Improve Storybook Setup (#47)

libs/ui/project.json

@@ -42,6 +42,7 @@
       "options": {
         "port": 4400,
         "configDir": "libs/ui/.storybook",
+        "tsConfig": "libs/ui/tsconfig.storybook.json",
         "browserTarget": "ui:build-storybook",
         "compodoc": false
       },
@@ -56,6 +57,7 @@
       "outputs": ["{options.outputDir}"],
       "options": {
         "outputDir": "dist/storybook/ui",
+        "tsConfig": "libs/ui/tsconfig.storybook.json",
         "configDir": "libs/ui/.storybook",
         "browserTarget": "ui:build-storybook",
         "compodoc": false

libs/ui/src/component/radial-chart/radial-chart.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import { RADIAL_CHART_COLOR, RADIAL_CHART_SIZE, RadialChartColor, RadialChartSize } from './radial-chart.types';
 
 @Component({
   selector: 'app-radial-chart',
@@ -14,18 +15,19 @@ import { Component, Input, ViewEncapsulation } from '@angular/core';
   `,
   styleUrls: ['./radial-chart.component.scss'],
   encapsulation: ViewEncapsulation.Emulated,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RadialChartComponent {
   @Input() public score = 0;
-  @Input() public size: 'sm' | 'md' | 'lg' = 'md';
+  @Input() public size: RadialChartSize = RADIAL_CHART_SIZE.MEDIUM;
 
-  getColorScheme(): 'green' | 'orange' | 'red' {
-    if (this.score > 90) return 'green';
-    if (this.score > 50) return 'orange';
-    return 'red';
+  getColorScheme(): RadialChartColor {
+    if (this.score > 90) return RADIAL_CHART_COLOR.GREEN;
+    if (this.score > 50) return RADIAL_CHART_COLOR.ORANGE;
+    return RADIAL_CHART_COLOR.RED;
   }
   getOffset(): number {
-    const progress = (100 - 50) / 100 ;
+    const progress = (100 - this.score) / 100 ;
     const circumference = 2 * Math.PI * 45;
     return progress * circumference;
   }

libs/ui/src/component/radial-chart/radial-chart.stories.ts

@@ -1,7 +1,10 @@
-import { Meta, Story } from '@storybook/angular';
+import { Meta, StoryObj } from '@storybook/angular';
 import { RadialChartComponent } from './radial-chart.component';
+import { RADIAL_CHART_SIZE } from './radial-chart.types';
 
-export default {
+const sizeOptions = Object.values(RADIAL_CHART_SIZE);
+
+const meta: Meta<RadialChartComponent> = {
   title: 'Radial Chart',
   component: RadialChartComponent,
   argTypes: {
@@ -16,15 +19,19 @@ export default {
     },
     size: {
       description: 'Size of the radial chart with options of small, medium and large',
-      options: ['sm', 'md', 'lg'],
+      options: sizeOptions,
       control: { type: 'select' },
-      defaultValue: 'md',
-    },
+    }
   }
-}as Meta<RadialChartComponent>;
+};
+export default meta;
 
-const Template: Story = (args) => ({
-  props: args,
-});
+type Story = StoryObj<RadialChartComponent>;
 
-export const Default = Template.bind({});
+export const Default: Story = {};
+export const Poor: Story = { args: { score: 49 }};
+export const NeedsImprovement: Story = { args: { score: 89 }};
+export const Good: Story = { args: { score: 100 }};
+export const Small: Story = { args: { size: RADIAL_CHART_SIZE.SMALL }};
+export const Medium: Story = { args: { size: RADIAL_CHART_SIZE.MEDIUM }};
+export const Large: Story = { args: { size: RADIAL_CHART_SIZE.LARGE }};

libs/ui/src/component/radial-chart/radial-chart.types.ts

@@ -0,0 +1,15 @@
+export const RADIAL_CHART_SIZE = {
+  SMALL: 'sm',
+  MEDIUM: 'md',
+  LARGE: 'lg',
+} as const;
+
+export type RadialChartSize = typeof RADIAL_CHART_SIZE[keyof typeof RADIAL_CHART_SIZE];
+
+export const RADIAL_CHART_COLOR = {
+  GREEN: 'green',
+  ORANGE: 'orange',
+  RED: 'red'
+} as const;
+
+export type RadialChartColor = typeof RADIAL_CHART_COLOR[keyof typeof RADIAL_CHART_COLOR];

libs/ui/src/component/user-flow-form/user-flow-form.component.ts

@@ -38,8 +38,6 @@ type UiActions = {
   providers: [RxActionFactory],
 })
 export class UserFlowFormComponent extends RxEffects {
-  // TODO REmove!
-  private readonly urlValidatorPattern = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?';
   userflowForm: FormGroup = this.fb.group({
     url: [''],
   });
@@ -64,10 +62,7 @@ export class UserFlowFormComponent extends RxEffects {
 
   @Output() auditSubmit = this.ui.formSubmit$.pipe(
     withLatestFrom(this.userflowForm.statusChanges,this.userflowForm.valueChanges),
-    // @TODO fix unused vars
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    filter(([submitEvent, formState, formValue]) => formState === 'VALID'),
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    map(([submitEvent, formState, formValue]) => formValue.url)
+    filter(([,formState,]) => formState === 'VALID'),
+    map(([,, formValue]) => formValue.url)
   );
 }

libs/ui/src/component/user-flow-form/user-flow-form.stories.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { UserFlowFormComponent } from './user-flow-form.component';
+import { of } from 'rxjs';
+
+const meta: Meta<UserFlowFormComponent> = {
+  title: 'User-Flow Form',
+  component: UserFlowFormComponent,
+};
+export default meta;
+
+type Story = StoryObj<UserFlowFormComponent>;
+
+const disabled = of(false);
+const enabled = of(true);
+
+export const Enabled: Story = { args: { disabled: enabled } };
+export const Disabled: Story = { args: { disabled: disabled } };

libs/ui/tsconfig.json

@@ -19,7 +19,7 @@
       "path": "./tsconfig.spec.json"
     },
     {
-      "path": "./.storybook/tsconfig.json"
+      "path": "./tsconfig.storybook.json"
     }
   ],
   "extends": "../../tsconfig.base.json",

libs/ui/tsconfig.storybook.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true
+  },
+  "exclude": ["./src/**/*.spec.ts"],
+  "include": [
+    "./src/**/*.stories.ts",
+    "./.storybook/*.ts"
+  ]
+}