diff --git a/packages/skeleton-loader/src/CardSkeleton/CardSkeleton.stories.tsx b/packages/skeleton-loader/src/CardSkeleton/CardSkeleton.stories.tsx
index a669924eb6..16a11c76ce 100644
--- 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 => (
+
+
+
+ ),
+ },
+ },
+ args: {
+ enableAnimations: false,
+ },
argTypes: {
- darkMode: storybookArgTypes.darkMode,
+ enableAnimations: { control: 'boolean' },
},
- decorators: [
- (Story: StoryFn) => (
-
-
-
- ),
- ],
-};
+} satisfies StoryMetaType;
-export const Card: StoryFn = props => (
-
-);
+export const Card: StoryType = () => <>>;
diff --git a/packages/skeleton-loader/src/CodeSkeleton/CodeSkeleton.stories.tsx b/packages/skeleton-loader/src/CodeSkeleton/CodeSkeleton.stories.tsx
index bdf2a4df42..3fd60fe674 100644
--- 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 => (
+
+
+
+ ),
+ },
+ },
+ args: {
+ enableAnimations: false,
+ },
argTypes: {
- darkMode: storybookArgTypes.darkMode,
+ enableAnimations: { control: 'boolean' },
},
- decorators: [
- (Story: StoryFn) => (
-
-
-
- ),
- ],
-};
+} satisfies StoryMetaType;
-export const Code: StoryFn = props => (
-
-);
+export const Code: StoryType = () => <>>;
diff --git a/packages/skeleton-loader/src/FormSkeleton/FormSkeleton.stories.tsx b/packages/skeleton-loader/src/FormSkeleton/FormSkeleton.stories.tsx
index 23a0ec2c19..26f2d50fb4 100644
--- 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 => (
+
+
+
+ ),
+ },
+ },
+ args: {
+ enableAnimations: false,
+ },
argTypes: {
- darkMode: storybookArgTypes.darkMode,
+ enableAnimations: { control: 'boolean' },
},
- decorators: [
- (Story: StoryFn) => (
-
-
-
- ),
- ],
-};
+} satisfies StoryMetaType;
-export const Form: StoryFn = props => (
-
-);
+export const Form: StoryType = () => <>>;
diff --git a/packages/skeleton-loader/src/ListSkeleton/ListSkeleton.stories.tsx b/packages/skeleton-loader/src/ListSkeleton/ListSkeleton.stories.tsx
index 3d5aa48b03..86886cef7b 100644
--- 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 = {
- 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 => (
+
+
+
+ ),
+ },
},
args: {
+ enableAnimations: false,
count: 5,
- bulletsOnly: false,
},
-};
-
-export default meta;
-
-export const Basic: StoryType = (
- args: ListSkeletonProps,
-) => {
- return (
-
-
-
- );
-};
+ argTypes: {
+ enableAnimations: { control: 'boolean' },
+ count: { control: 'number' },
+ },
+} satisfies StoryMetaType;
-export const BulletsOnly: StoryType = () => {
- return (
-
-
-
- );
-};
+export const List: StoryType = () => <>>;
diff --git a/packages/skeleton-loader/src/ParagraphSkeleton/ParagraphSkeleton.stories.tsx b/packages/skeleton-loader/src/ParagraphSkeleton/ParagraphSkeleton.stories.tsx
index f5bf769512..288660c760 100644
--- 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 => (
+
+
+
+ ),
+ },
+ },
+ args: {
+ enableAnimations: false,
+ },
argTypes: {
- darkMode: storybookArgTypes.darkMode,
- withHeader: { control: 'boolean' },
+ enableAnimations: { control: 'boolean' },
},
- decorators: [
- (Story: StoryFn) => (
-
-
-
- ),
- ],
-};
+} satisfies StoryMetaType;
-export const Paragraph: StoryFn = props => (
-
-);
+export const Paragraph: StoryType = () => <>>;
diff --git a/packages/skeleton-loader/src/Skeleton/Skeleton.stories.tsx b/packages/skeleton-loader/src/Skeleton/Skeleton.stories.tsx
index 7d403b59fc..befd59aa7c 100644
--- 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 => (
+
+
+
+ ),
},
},
- decorators: [
- (Story: StoryFn) => (
-
-
-
- ),
- ],
-};
+ args: {
+ enableAnimations: false,
+ },
+ argTypes: {
+ enableAnimations: { control: 'boolean' },
+ },
+} satisfies StoryMetaType;
-export const Basic: StoryFn = props => ;
+export const Basic: StoryType = () => <>>;
diff --git a/packages/skeleton-loader/src/TableSkeleton/TableSkeleton.stories.tsx b/packages/skeleton-loader/src/TableSkeleton/TableSkeleton.stories.tsx
index a719f5f0ab..f3cb67ae74 100644
--- a/packages/skeleton-loader/src/TableSkeleton/TableSkeleton.stories.tsx
+++ b/packages/skeleton-loader/src/TableSkeleton/TableSkeleton.stories.tsx
@@ -1,5 +1,5 @@
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 '..';
@@ -7,12 +7,27 @@ 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 {
),
],
-};
-
-const TableTemplate: StoryFn = props => (
-
-);
-
-export const WithoutLabels: StoryFn = TableTemplate.bind(
- {},
-);
+} satisfies StoryMetaType;
-export const WithLabels: StoryFn = TableTemplate.bind({});
-WithLabels.args = {
- columnLabels: ['Column 1', 'Column 2', 'Column 3', ''],
-};
+export const Table: StoryType = () => <>>;