Adding config storybook chromatic

.github/workflows/chromatic.yml

@@ -0,0 +1,27 @@
+name: "Chromatic"
+
+on:
+  push:
+    branches:
+      - storybook
+  pull_request:
+
+jobs:
+  chromatic-deployment:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Install lib dependencies
+        run: cd projects/dxc-ngx-cdk && npm install
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitOnceUploaded: true
+          exitZeroOnChanges: true
+          workingDir: projects/dxc-ngx-cdk

.vscode/settings.json

@@ -1,13 +1,13 @@
 {
     "workbench.colorCustomizations": {
-        "activityBar.activeBackground": "#8cb761",
+        "activityBar.activeBackground": "#073caf",
         "activityBar.activeBorder": "#e9eff5",
-        "activityBar.background": "#8cb761",
+        "activityBar.background": "#ec5fa6",
         "activityBar.foreground": "#15202b",
         "activityBar.inactiveForeground": "#15202b99",
         "activityBarBadge.background": "#e9eff5",
         "activityBarBadge.foreground": "#15202b",
-        "statusBar.background": "#739d48",
+        "statusBar.background": "#ec5fa6",
         "statusBar.foreground": "#15202b",
         "statusBarItem.hoverBackground": "#597a38",
         "titleBar.activeBackground": "#739d48",

projects/dxc-ngx-cdk/.storybook/components/components.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { ExampleContainerComponent } from "./example-container/example-container.component";
+import { TitleComponent } from "./title/title.component";
+import { DarkSectionComponent } from "./dark-section/dark-section.component";
+
+@NgModule({
+  declarations: [
+    TitleComponent,
+    ExampleContainerComponent,
+    DarkSectionComponent,
+  ],
+  imports: [CommonModule],
+  exports: [TitleComponent, ExampleContainerComponent, DarkSectionComponent],
+})
+export class ComponentsModule {}

projects/dxc-ngx-cdk/.storybook/components/dark-section/dark-section.component.css

@@ -0,0 +1,3 @@
+.dark-section{
+  background-color: #333333;
+}

projects/dxc-ngx-cdk/.storybook/components/dark-section/dark-section.component.html

@@ -0,0 +1,3 @@
+<div class="dark-section">
+  <ng-content></ng-content>
+</div>

projects/dxc-ngx-cdk/.storybook/components/dark-section/dark-section.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DarkSectionComponent } from './dark-section.component';
+
+describe('DarkSectionComponent', () => {
+  let component: DarkSectionComponent;
+  let fixture: ComponentFixture<DarkSectionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DarkSectionComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DarkSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/dxc-ngx-cdk/.storybook/components/dark-section/dark-section.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "sb-dark-container",
+  templateUrl: "./dark-section.component.html",
+  styleUrls: ["./dark-section.component.css"],
+})
+export class DarkSectionComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

projects/dxc-ngx-cdk/.storybook/components/example-container/example-container.component.html

@@ -0,0 +1,3 @@
+<div class="example-container">
+  <ng-content></ng-content>
+</div>

projects/dxc-ngx-cdk/.storybook/components/example-container/example-container.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExampleContainerComponent } from './example-container.component';
+
+describe('ExampleContainerComponent', () => {
+  let component: ExampleContainerComponent;
+  let fixture: ComponentFixture<ExampleContainerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ExampleContainerComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExampleContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/dxc-ngx-cdk/.storybook/components/example-container/example-container.component.ts

@@ -0,0 +1,55 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+  OnInit,
+  SimpleChanges,
+} from "@angular/core";
+import { css } from "emotion";
+import { BehaviorSubject } from "rxjs";
+
+@Component({
+  selector: "sb-example-container",
+  templateUrl: "./example-container.component.html",
+  styleUrls: ["./example-container.component.css"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ExampleContainerComponent implements OnInit {
+  @HostBinding("class") className;
+
+  @Input()
+  pseudoState: string;
+
+  @Input()
+  expanded: string;
+
+  defaultInputs = new BehaviorSubject<any>({
+    expanded: false,
+  });
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
+  }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    const inputs = Object.keys(changes).reduce((result, item) => {
+      result[item] = changes[item].currentValue;
+      return result;
+    }, {});
+
+    this.defaultInputs.next({ ...this.defaultInputs.getValue(), ...inputs });
+    this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
+  }
+
+  getDynamicStyle(inputs) {
+    return css`
+      .example-container {
+        margin: 15px;
+        height: ${inputs.expanded && "100vh"};
+      }
+    `;
+  }
+}

projects/dxc-ngx-cdk/.storybook/components/title/title.component.html

@@ -0,0 +1,12 @@
+<ng-container *ngIf="level===1">
+  <h1>{{title}}</h1>
+</ng-container>
+<ng-container *ngIf="level===2">
+  <h2>{{title}}</h2>
+</ng-container>
+<ng-container *ngIf="level===3">
+  <h3>{{title}}</h3>
+</ng-container>
+<ng-container *ngIf="level===4">
+  <h4>{{title}}</h4>
+</ng-container>

projects/dxc-ngx-cdk/.storybook/components/title/title.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TitleComponent } from './title.component';
+
+describe('TitleComponent', () => {
+  let component: TitleComponent;
+  let fixture: ComponentFixture<TitleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TitleComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TitleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/dxc-ngx-cdk/.storybook/components/title/title.component.ts

@@ -0,0 +1,66 @@
+import {
+  Component,
+  HostBinding,
+  Input,
+  OnInit,
+  SimpleChanges,
+} from "@angular/core";
+import { css } from "emotion";
+import { BehaviorSubject } from "rxjs";
+
+@Component({
+  selector: "sb-title",
+  templateUrl: "./title.component.html",
+  styleUrls: ["./title.component.scss"],
+})
+export class TitleComponent implements OnInit {
+  @HostBinding("class") className;
+
+  @Input()
+  title: string;
+
+  @Input()
+  theme: string;
+
+  @Input()
+  level: number;
+
+  defaultInputs = new BehaviorSubject<any>({
+    level: 1,
+    theme: "light",
+  });
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
+    if (this.level == null) {
+      this.level = 1;
+    }
+  }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    if (this.level == null) {
+      this.level = 1;
+    }
+    const inputs = Object.keys(changes).reduce((result, item) => {
+      result[item] = changes[item].currentValue;
+      return result;
+    }, {});
+
+    this.defaultInputs.next({ ...this.defaultInputs.getValue(), ...inputs });
+    this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
+  }
+
+  getDynamicStyle(inputs) {
+    return css`
+      h1,
+      h2,
+      h3,
+      h4 {
+        font-family: Open Sans, sans-serif;
+        color: ${inputs.theme === "dark" ? "#FFFFFF" : "#000000"};
+      }
+    `;
+  }
+}

projects/dxc-ngx-cdk/.storybook/main.js

@@ -0,0 +1,11 @@
+
+
+module.exports = {
+  stories: ['../src/lib/**/*.stories.@(ts|mdx)'],
+  addons: ["@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "storybook-addon-pseudo-states",
+    "@storybook/addon-a11y"],
+  babel: async (options) => ({ ...options, babelrc: false, configFile: false }),
+
+}

projects/dxc-ngx-cdk/.storybook/preview.js

@@ -0,0 +1,12 @@
+import '@angular/localize/init';
+
+export const decorators = [
+  (storyFunc) => {
+    const story = storyFunc();
+
+    return {
+      ...story,
+      template: `<div theme>${story.template}</div>`,
+    };
+  },
+];

projects/dxc-ngx-cdk/.storybook/tsconfig.json

@@ -0,0 +1,18 @@
+
+{
+  "extends": "../tsconfig.lib.json",
+  "compilerOptions": {
+    "types": ["node"]
+  },
+  "exclude": [
+    "../src/lib/**/*.spec.ts",
+    "../../projects/**/*.spec.ts"
+  ],
+  "include": [
+    "../src/lib/**/*",
+    "../../projects/**/*"
+  ],
+  "files": [
+    "./typings.d.ts"
+  ]
+}

projects/dxc-ngx-cdk/.storybook/typings.d.ts

@@ -0,0 +1,4 @@
+declare module "*.md" {
+  const content: string;
+  export default content;
+}