refactor: use consistent pattern to write component stories

Author: samshara

.github/workflows/chromatic.yml

@@ -1,4 +1,4 @@
-name: Chromatic
+name: 'Chromatic'
 
 on: workflow_call
 
@@ -13,7 +13,6 @@ permissions:
 jobs:
   ui:
     name: Build UI Library
-    needs: [changed-files]
     environment: 'test'
     runs-on: ubuntu-latest
     defaults:

packages/go-ui-storybook/eslint.config.js

@@ -21,8 +21,6 @@ const appConfigs = compat.config({
         'airbnb/hooks',
         'plugin:@typescript-eslint/recommended',
         'plugin:react-hooks/recommended',
-        'plugin:import/recommended',
-        'plugin:storybook/recommended',
     ],
     parser: '@typescript-eslint/parser',
     parserOptions: {
@@ -41,7 +39,9 @@ const appConfigs = compat.config({
         },
         'import/resolver': {
             typescript: {
-                project: './tsconfig.json'
+                project: [
+                    './tsconfig.json',
+                ],
             },
         },
     },
@@ -90,7 +90,7 @@ const appConfigs = compat.config({
         'react/require-default-props': ['warn', { ignoreFunctionalComponents: true }],
         'simple-import-sort/imports': 'warn',
         'simple-import-sort/exports': 'warn',
-        'import-newlines/enforce': ['warn', 1],
+        'import-newlines/enforce': ['warn', 1]
     },
     overrides: [
         {

packages/go-ui-storybook/src/stories/BlockLoading.tsx

@@ -1,11 +1,9 @@
 import {
     BlockLoading as PureBlockLoading,
-    BlockLoadingProps as PureBlockLoadingProps,
+    BlockLoadingProps,
 } from '@ifrc-go/ui';
 
-interface BlockloadingProps extends PureBlockLoadingProps {}
-
-function Blockloading(props: BlockloadingProps) {
+function Blockloading(props: BlockLoadingProps) {
     return (
         // eslint-disable-next-line react/jsx-props-no-spreading
         <PureBlockLoading {...props} />

packages/go-ui-storybook/src/stories/Blockloading.stories.ts

@@ -21,7 +21,7 @@ const meta = {
 } satisfies Meta<typeof BlockLoading>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof BlockLoading>;
 
 export const Default : Story = {
     args: {
@@ -31,14 +31,14 @@ export const Default : Story = {
 
 export const Compact : Story = {
     args: {
-        message: 'Loading...',
+        ...Default.args,
         compact: true,
     },
 };
 
 export const WithoutBorder : Story = {
     args: {
-        message: 'Loading...',
+        ...Default.args,
         withoutBorder: true,
     },
 };

packages/go-ui-storybook/src/stories/BodyOverlay.stories.tsx

@@ -1,4 +1,3 @@
-import { BooleanInput } from '@ifrc-go/ui';
 import { useArgs } from '@storybook/preview-api';
 import type {
     Args,
@@ -7,6 +6,8 @@ import type {
 } from '@storybook/react';
 import { fn } from '@storybook/test';
 
+import BooleanInput from './BooleanInput';
+
 type Story = StoryObj<typeof BooleanInput>;
 
 const meta: Meta<typeof BooleanInput> = {
@@ -57,6 +58,9 @@ function Template(args: Args) {
 
 export const Default: Story = {
     render: Template,
+    args: {
+        name: 'booleanInput',
+    },
 };
 
 export const Disabled: Story = {

packages/go-ui-storybook/src/stories/BodyOverlay.tsx

@@ -6,9 +6,7 @@ import type {
 
 import BooleanOutput from './BooleanOutput';
 
-type BooleanOutputSpecificProps = BooleanOutputProps;
-
-type Story = StoryObj<BooleanOutputSpecificProps>;
+type Story = StoryObj<BooleanOutputProps>;
 
 const meta: Meta<typeof BooleanOutput> = {
     title: 'Components/BooleanOutput',
@@ -21,47 +19,34 @@ const meta: Meta<typeof BooleanOutput> = {
         },
     },
     tags: ['autodocs'],
-    decorators: [
-        function Component(_, ctx) {
-            const componentArgs = ctx.args as BooleanOutputSpecificProps;
-            return (
-                <BooleanOutput
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...componentArgs}
-
-                />
-            );
-        },
-    ],
 };
 
 export default meta;
 
 export const Default: Story = {
     args: {
-        className: 'BooleanOutput',
         value: true,
     },
 };
 
 export const TrueValue : Story = {
     args: {
-        className: 'BooleanOutput',
+        ...Default.args,
         value: true,
     },
 };
 
 export const FalseValue :Story = {
     args: {
-        className: 'booleanOutput',
+        ...Default.args,
         value: false,
     },
 
 };
 
 export const InvalidText: Story = {
     args: {
-        className: 'BooleanOutput',
+        ...Default.args,
         invalidText: 'Invalid value',
     },
 };

packages/go-ui-storybook/src/stories/BooleanInput.stories.tsx

@@ -1,10 +1,8 @@
 import {
     BooleanOutput as PureBooleanOutput,
-    BooleanOutputProps as PureBooleanOutputProps,
+    BooleanOutputProps,
 } from '@ifrc-go/ui';
 
-interface BooleanOutputProps extends PureBooleanOutputProps{}
-
 function BooleanOutput(props: BooleanOutputProps) {
     return (
         <PureBooleanOutput {...props} />// eslint-disable-line react/jsx-props-no-spreading

packages/go-ui-storybook/src/stories/BooleanOutput.stories.tsx

@@ -28,3 +28,10 @@ export const Default: Story = {
         children: ['Home', 'Africa', 'Angola'],
     },
 };
+
+export const WithSlashSeparator: Story = {
+    args: {
+        ...Default.args,
+        separator: '/',
+    },
+};