updates story files

mongodb · Apr 5, 2024 · 3e90139 · 3e90139
1 parent b449747
commit 3e90139
Show file tree

Hide file tree

Showing 7 changed files with 159 additions and 115 deletions.
diff --git a/packages/skeleton-loader/src/CardSkeleton/CardSkeleton.stories.tsx b/packages/skeleton-loader/src/CardSkeleton/CardSkeleton.stories.tsx
@@ -1,24 +1,32 @@
 import React from 'react';
-import { storybookArgTypes } from '@lg-tools/storybook-utils';
-import { StoryFn } from '@storybook/react';
+import { StoryMetaType, StoryType } from '@lg-tools/storybook-utils';
 
 import { CardSkeleton } from '..';
 
 export default {
   title: 'Components/SkeletonLoader',
   component: CardSkeleton,
+  parameters: {
+    default: null,
+    controls: { exclude: ['darkMode', 'ref'] },
+    generate: {
+      storyNames: ['Card'],
+      combineArgs: {
+        darkMode: [false, true],
+      },
+      decorator: Instance => (
+        <div style={{ width: 500 }}>
+          <Instance />
+        </div>
+      ),
+    },
+  },
+  args: {
+    enableAnimations: false,
+  },
   argTypes: {
-    darkMode: storybookArgTypes.darkMode,
+    enableAnimations: { control: 'boolean' },
   },
-  decorators: [
-    (Story: StoryFn) => (
-      <div style={{ width: 700 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
+} satisfies StoryMetaType<typeof CardSkeleton>;
 
-export const Card: StoryFn<typeof CardSkeleton> = props => (
-  <CardSkeleton {...props} />
-);
+export const Card: StoryType<typeof CardSkeleton> = () => <></>;
diff --git a/packages/skeleton-loader/src/CodeSkeleton/CodeSkeleton.stories.tsx b/packages/skeleton-loader/src/CodeSkeleton/CodeSkeleton.stories.tsx
@@ -1,24 +1,32 @@
 import React from 'react';
-import { storybookArgTypes } from '@lg-tools/storybook-utils';
-import { StoryFn } from '@storybook/react';
+import { StoryMetaType, StoryType } from '@lg-tools/storybook-utils';
 
 import { CodeSkeleton } from '..';
 
 export default {
   title: 'Components/SkeletonLoader',
   component: CodeSkeleton,
+  parameters: {
+    default: null,
+    controls: { exclude: ['darkMode', 'ref'] },
+    generate: {
+      storyNames: ['Code'],
+      combineArgs: {
+        darkMode: [false, true],
+      },
+      decorator: Instance => (
+        <div style={{ width: 500 }}>
+          <Instance />
+        </div>
+      ),
+    },
+  },
+  args: {
+    enableAnimations: false,
+  },
   argTypes: {
-    darkMode: storybookArgTypes.darkMode,
+    enableAnimations: { control: 'boolean' },
   },
-  decorators: [
-    (Story: StoryFn) => (
-      <div style={{ width: 700 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
+} satisfies StoryMetaType<typeof CodeSkeleton>;
 
-export const Code: StoryFn<typeof CodeSkeleton> = props => (
-  <CodeSkeleton {...props} />
-);
+export const Code: StoryType<typeof CodeSkeleton> = () => <></>;
diff --git a/packages/skeleton-loader/src/FormSkeleton/FormSkeleton.stories.tsx b/packages/skeleton-loader/src/FormSkeleton/FormSkeleton.stories.tsx
@@ -1,24 +1,32 @@
 import React from 'react';
-import { storybookArgTypes } from '@lg-tools/storybook-utils';
-import { StoryFn } from '@storybook/react';
+import { StoryMetaType, StoryType } from '@lg-tools/storybook-utils';
 
 import { FormSkeleton } from '.';
 
 export default {
   title: 'Components/SkeletonLoader',
   component: FormSkeleton,
+  parameters: {
+    controls: { exclude: ['darkMode', 'ref'] },
+    default: null,
+    generate: {
+      storyNames: ['Form'],
+      combineArgs: {
+        darkMode: [false, true],
+      },
+      decorator: Instance => (
+        <div style={{ width: 500 }}>
+          <Instance />
+        </div>
+      ),
+    },
+  },
+  args: {
+    enableAnimations: false,
+  },
   argTypes: {
-    darkMode: storybookArgTypes.darkMode,
+    enableAnimations: { control: 'boolean' },
   },
-  decorators: [
-    (Story: StoryFn) => (
-      <div style={{ width: 700 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
+} satisfies StoryMetaType<typeof FormSkeleton>;
 
-export const Form: StoryFn<typeof FormSkeleton> = props => (
-  <FormSkeleton {...props} />
-);
+export const Form: StoryType<typeof FormSkeleton> = () => <></>;
diff --git a/packages/skeleton-loader/src/ListSkeleton/ListSkeleton.stories.tsx b/packages/skeleton-loader/src/ListSkeleton/ListSkeleton.stories.tsx
@@ -1,36 +1,35 @@
 import React from 'react';
 import { StoryMetaType, StoryType } from '@lg-tools/storybook-utils';
 
-import { ListSkeleton, type ListSkeletonProps } from '.';
+import { ListSkeleton } from '.';
 
-const meta: StoryMetaType<typeof ListSkeleton> = {
-  title: 'Components/SkeletonLoader/List',
+export default {
+  title: 'Components/SkeletonLoader',
   component: ListSkeleton,
   parameters: {
     default: null,
+    controls: { exclude: ['darkMode', 'ref', 'size'] },
+    generate: {
+      storyNames: ['List'],
+      combineArgs: {
+        darkMode: [false, true],
+        bulletsOnly: [false, true],
+      },
+      decorator: Instance => (
+        <div style={{ width: 256 }}>
+          <Instance />
+        </div>
+      ),
+    },
   },
   args: {
+    enableAnimations: false,
     count: 5,
-    bulletsOnly: false,
   },
-};
-
-export default meta;
-
-export const Basic: StoryType<typeof ListSkeleton> = (
-  args: ListSkeletonProps,
-) => {
-  return (
-    <div style={{ width: 256 }}>
-      <ListSkeleton {...args} />
-    </div>
-  );
-};
+  argTypes: {
+    enableAnimations: { control: 'boolean' },
+    count: { control: 'number' },
+  },
+} satisfies StoryMetaType<typeof ListSkeleton>;
 
-export const BulletsOnly: StoryType<typeof ListSkeleton> = () => {
-  return (
-    <div style={{ width: 256 }}>
-      <ListSkeleton bulletsOnly />
-    </div>
-  );
-};
+export const List: StoryType<typeof ListSkeleton> = () => <></>;
diff --git a/packages/skeleton-loader/src/ParagraphSkeleton/ParagraphSkeleton.stories.tsx b/packages/skeleton-loader/src/ParagraphSkeleton/ParagraphSkeleton.stories.tsx
@@ -1,25 +1,33 @@
 import React from 'react';
-import { storybookArgTypes } from '@lg-tools/storybook-utils';
-import { StoryFn } from '@storybook/react';
+import { StoryMetaType, StoryType } from '@lg-tools/storybook-utils';
 
-import { ParagraphSkeleton } from '.';
+import { ParagraphSkeleton } from './ParagraphSkeleton';
 
 export default {
   title: 'Components/SkeletonLoader',
   component: ParagraphSkeleton,
+  parameters: {
+    controls: { exclude: ['darkMode', 'ref'] },
+    default: null,
+    generate: {
+      storyNames: ['Paragraph'],
+      combineArgs: {
+        darkMode: [false, true],
+        withHeader: [true, false],
+      },
+      decorator: Instance => (
+        <div style={{ width: 500 }}>
+          <Instance />
+        </div>
+      ),
+    },
+  },
+  args: {
+    enableAnimations: false,
+  },
   argTypes: {
-    darkMode: storybookArgTypes.darkMode,
-    withHeader: { control: 'boolean' },
+    enableAnimations: { control: 'boolean' },
   },
-  decorators: [
-    (Story: StoryFn) => (
-      <div style={{ width: 700 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
+} satisfies StoryMetaType<typeof ParagraphSkeleton>;
 
-export const Paragraph: StoryFn<typeof ParagraphSkeleton> = props => (
-  <ParagraphSkeleton {...props} />
-);
+export const Paragraph: StoryType<typeof ParagraphSkeleton> = () => <></>;
diff --git a/packages/skeleton-loader/src/Skeleton/Skeleton.stories.tsx b/packages/skeleton-loader/src/Skeleton/Skeleton.stories.tsx
@@ -1,27 +1,36 @@
 import React from 'react';
-import { storybookArgTypes } from '@lg-tools/storybook-utils';
-import { StoryFn } from '@storybook/react';
+import { StoryMetaType, StoryType } from '@lg-tools/storybook-utils';
 
 import { Size, Skeleton } from '.';
 
 export default {
   title: 'Components/SkeletonLoader',
   component: Skeleton,
-  argTypes: {
-    darkMode: storybookArgTypes.darkMode,
-    size: {
-      control: 'select',
-      options: Object.values(Size),
-      defaultValue: Size.Default,
+  parameters: {
+    controls: { exclude: ['darkMode', 'ref', 'size'] },
+    default: null,
+    generate: {
+      storyNames: ['Basic'],
+      combineArgs: {
+        darkMode: [false, true],
+        size: Object.values(Size),
+      },
+      args: {
+        enableAnimations: false,
+      },
+      decorator: Instance => (
+        <div style={{ width: 256 }}>
+          <Instance />
+        </div>
+      ),
     },
   },
-  decorators: [
-    (Story: StoryFn) => (
-      <div style={{ width: 700 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
+  args: {
+    enableAnimations: false,
+  },
+  argTypes: {
+    enableAnimations: { control: 'boolean' },
+  },
+} satisfies StoryMetaType<typeof Skeleton>;
 
-export const Basic: StoryFn<typeof Skeleton> = props => <Skeleton {...props} />;
+export const Basic: StoryType<typeof Skeleton> = () => <></>;
diff --git a/packages/skeleton-loader/src/TableSkeleton/TableSkeleton.stories.tsx b/packages/skeleton-loader/src/TableSkeleton/TableSkeleton.stories.tsx
@@ -1,18 +1,33 @@
 import React from 'react';
-import { storybookArgTypes } from '@lg-tools/storybook-utils';
+import { StoryMetaType, StoryType } from '@lg-tools/storybook-utils';
 import { StoryFn } from '@storybook/react';
 
 import { TableSkeleton } from '..';
 
 export default {
   title: 'Components/SkeletonLoader/Table',
   component: TableSkeleton,
+  parameters: {
+    default: null,
+    controls: { exclude: ['darkMode', 'ref'] },
+    generate: {
+      storyNames: ['Table'],
+      combineArgs: {
+        darkMode: [false, true],
+        columnLabels: [undefined, ['Column 1', 'Column 2', 'Column 3', '']],
+      },
+    },
+  },
+  args: {
+    enableAnimations: false,
+    numCols: 4,
+    numRows: 5,
+  },
   argTypes: {
-    darkMode: storybookArgTypes.darkMode,
-    baseFontSize: storybookArgTypes.updatedBaseFontSize,
     columnLabels: { control: 'none' },
     numCols: { control: 'number' },
     numRows: { control: 'number' },
+    enableAnimations: { control: 'boolean' },
   },
   decorators: [
     (Story: StoryFn) => (
@@ -21,17 +36,6 @@ export default {
       </div>
     ),
   ],
-};
-
-const TableTemplate: StoryFn<typeof TableSkeleton> = props => (
-  <TableSkeleton {...props} />
-);
-
-export const WithoutLabels: StoryFn<typeof TableSkeleton> = TableTemplate.bind(
-  {},
-);
+} satisfies StoryMetaType<typeof TableSkeleton>;
 
-export const WithLabels: StoryFn<typeof TableSkeleton> = TableTemplate.bind({});
-WithLabels.args = {
-  columnLabels: ['Column 1', 'Column 2', 'Column 3', ''],
-};
+export const Table: StoryType<typeof TableSkeleton> = () => <></>;