test(stories): consistent composition

kripod · Jul 19, 2024 · 1d0e507 · 1d0e507
1 parent d76d916
commit 1d0e507
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 19 deletions.
diff --git a/src/components/Alert.stories.tsx b/src/components/Alert.stories.tsx
@@ -17,6 +17,7 @@ export const Basic = {
 } satisfies Story;
 
 export const Types = {
+  ...Basic,
   render: () => (
     <div className="flex flex-col gap-4">
       <Alert type="info">Info</Alert>

diff --git a/src/components/ButtonPlain.stories.tsx b/src/components/ButtonPlain.stories.tsx
@@ -23,6 +23,7 @@ export const Basic = {
 } satisfies Story;
 
 export const Interactivity = {
+  ...Basic,
   render: () => (
     <div className="flex flex-wrap gap-4">
       <ButtonPlain>Focused</ButtonPlain>
@@ -35,6 +36,7 @@ export const Interactivity = {
 } satisfies Story;
 
 export const Sizes = {
+  ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
       <ButtonPlain size="sm">Small</ButtonPlain>
@@ -45,6 +47,7 @@ export const Sizes = {
 } satisfies Story;
 
 export const WithIcon = {
+  ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
       <ButtonPlain size="sm" iconStart={<PlusIcon16 className="size-4" />}>
@@ -61,6 +64,7 @@ export const WithIcon = {
 } satisfies Story;
 
 export const Shapes = {
+  ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
       <ButtonPlain shape="rectangle">Rectangle</ButtonPlain>
@@ -76,6 +80,7 @@ export const Shapes = {
 } satisfies Story;
 
 export const Colors = {
+  ...Basic,
   render: () => (
     <div className="flex flex-wrap gap-4">
       <ButtonPlain color="neutral">Neutral</ButtonPlain>

diff --git a/src/components/ButtonPrimary.stories.tsx b/src/components/ButtonPrimary.stories.tsx
@@ -23,6 +23,7 @@ export const Basic = {
 } satisfies Story;
 
 export const Interactivity = {
+  ...Basic,
   render: () => (
     <div className="flex flex-wrap gap-4">
       <ButtonPrimary>Focused</ButtonPrimary>
@@ -35,6 +36,7 @@ export const Interactivity = {
 } satisfies Story;
 
 export const Sizes = {
+  ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
       <ButtonPrimary size="sm">Small</ButtonPrimary>
@@ -45,6 +47,7 @@ export const Sizes = {
 } satisfies Story;
 
 export const WithIcon = {
+  ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
       <ButtonPrimary size="sm" iconStart={<PlusIcon16 className="size-4" />}>
@@ -61,6 +64,7 @@ export const WithIcon = {
 } satisfies Story;
 
 export const Shapes = {
+  ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
       <ButtonPrimary shape="rectangle">Rectangle</ButtonPrimary>
@@ -76,6 +80,7 @@ export const Shapes = {
 } satisfies Story;
 
 export const Colors = {
+  ...Basic,
   render: () => (
     <div className="flex flex-wrap gap-4">
       <ButtonPrimary color="neutral">Neutral</ButtonPrimary>

diff --git a/src/components/ButtonSecondary.stories.tsx b/src/components/ButtonSecondary.stories.tsx
@@ -23,6 +23,7 @@ export const Basic = {
 } satisfies Story;
 
 export const Interactivity = {
+  ...Basic,
   render: () => (
     <div className="flex flex-wrap gap-4">
       <ButtonSecondary>Focused</ButtonSecondary>
@@ -35,6 +36,7 @@ export const Interactivity = {
 } satisfies Story;
 
 export const Sizes = {
+  ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
       <ButtonSecondary size="sm">Small</ButtonSecondary>
@@ -45,6 +47,7 @@ export const Sizes = {
 } satisfies Story;
 
 export const WithIcon = {
+  ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
       <ButtonSecondary size="sm" iconStart={<PlusIcon16 className="size-4" />}>
@@ -61,6 +64,7 @@ export const WithIcon = {
 } satisfies Story;
 
 export const Shapes = {
+  ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
       <ButtonSecondary shape="rectangle">Rectangle</ButtonSecondary>
@@ -76,6 +80,7 @@ export const Shapes = {
 } satisfies Story;
 
 export const Colors = {
+  ...Basic,
   render: () => (
     <div className="flex flex-wrap gap-4">
       <ButtonSecondary color="neutral">Neutral</ButtonSecondary>

diff --git a/src/components/ButtonTertiary.stories.tsx b/src/components/ButtonTertiary.stories.tsx
@@ -23,6 +23,7 @@ export const Basic = {
 } satisfies Story;
 
 export const Interactivity = {
+  ...Basic,
   render: () => (
     <div className="flex flex-wrap gap-4">
       <ButtonTertiary>Focused</ButtonTertiary>
@@ -35,6 +36,7 @@ export const Interactivity = {
 } satisfies Story;
 
 export const Sizes = {
+  ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
       <ButtonTertiary size="sm">Small</ButtonTertiary>
@@ -45,6 +47,7 @@ export const Sizes = {
 } satisfies Story;
 
 export const WithIcon = {
+  ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
       <ButtonTertiary size="sm" iconStart={<PlusIcon16 className="size-4" />}>
@@ -61,6 +64,7 @@ export const WithIcon = {
 } satisfies Story;
 
 export const Shapes = {
+  ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
       <ButtonTertiary shape="rectangle">Rectangle</ButtonTertiary>
@@ -76,6 +80,7 @@ export const Shapes = {
 } satisfies Story;
 
 export const Colors = {
+  ...Basic,
   render: () => (
     <div className="flex flex-wrap gap-4">
       <ButtonTertiary color="neutral">Neutral</ButtonTertiary>

diff --git a/src/components/InputFilled.stories.tsx b/src/components/InputFilled.stories.tsx
@@ -21,16 +21,22 @@ export const Basic = {
 } satisfies Story;
 
 export const Interactivity = {
-  args: {
-    placeholder: "Placeholder",
-  },
-  render: (args) => (
+  ...Basic,
+  render: () => (
     <div className="flex flex-col items-start gap-4">
-      <InputFilled {...args} defaultValue="Focused" />
-      <InputFilled {...args} defaultValue="Invalid" aria-invalid />
-      <InputFilled {...args} defaultValue="Read-only" readOnly />
-      <InputFilled {...args} placeholder="Placeholder" />
-      <InputFilled {...args} defaultValue="Disabled" disabled />
+      <InputFilled placeholder="Placeholder" defaultValue="Focused" />
+      <InputFilled
+        placeholder="Placeholder"
+        defaultValue="Invalid"
+        aria-invalid
+      />
+      <InputFilled
+        placeholder="Placeholder"
+        defaultValue="Read-only"
+        readOnly
+      />
+      <InputFilled placeholder="Placeholder" />
+      <InputFilled placeholder="Placeholder" defaultValue="Disabled" disabled />
     </div>
   ),
   play: async () => {
@@ -39,9 +45,7 @@ export const Interactivity = {
 } satisfies Story;
 
 export const Sizes = {
-  args: {
-    placeholder: "Placeholder",
-  },
+  ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
       <InputFilled size="sm" placeholder="Small" />
@@ -52,9 +56,7 @@ export const Sizes = {
 } satisfies Story;
 
 export const Shapes = {
-  args: {
-    placeholder: "Placeholder",
-  },
+  ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
       <InputFilled shape="rectangle" placeholder="Rectangle" />

diff --git a/src/components/InputOutlined.stories.tsx b/src/components/InputOutlined.stories.tsx
@@ -21,13 +21,26 @@ export const Basic = {
 } satisfies Story;
 
 export const Interactivity = {
+  ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
-      <InputOutlined defaultValue="Focused" />
-      <InputOutlined defaultValue="Invalid" aria-invalid />
-      <InputOutlined defaultValue="Read-only" readOnly />
+      <InputOutlined placeholder="Placeholder" defaultValue="Focused" />
+      <InputOutlined
+        placeholder="Placeholder"
+        defaultValue="Invalid"
+        aria-invalid
+      />
+      <InputOutlined
+        placeholder="Placeholder"
+        defaultValue="Read-only"
+        readOnly
+      />
       <InputOutlined placeholder="Placeholder" />
-      <InputOutlined defaultValue="Disabled" disabled />
+      <InputOutlined
+        placeholder="Placeholder"
+        defaultValue="Disabled"
+        disabled
+      />
     </div>
   ),
   play: async () => {
@@ -36,6 +49,7 @@ export const Interactivity = {
 } satisfies Story;
 
 export const Sizes = {
+  ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
       <InputOutlined size="sm" placeholder="Small" />
@@ -46,6 +60,7 @@ export const Sizes = {
 } satisfies Story;
 
 export const Shapes = {
+  ...Basic,
   render: () => (
     <div className="flex flex-col items-start gap-4">
       <InputOutlined shape="rectangle" placeholder="Rectangle" />