refactor(stories): migrate stories to CSF3 format

1 files changed, 45 insertions, 53 deletions

diff --git a/src/components/atoms/flip/flip.stories.tsx b/src/components/atoms/flip/flip.stories.tsx
index 1e470b1..19b4242 100644
--- a/src/components/atoms/flip/flip.stories.tsx
+++ b/src/components/atoms/flip/flip.stories.tsx
@@ -1,61 +1,53 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Flip as FlipComponent } from './flip';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Flip } from './flip';
 import { FlipSide } from './flip-side';
 
-/**
- * Flip - Storybook Meta
- */
-export default {
+const meta = {
+  component: Flip,
   title: 'Atoms/Flip',
-  component: FlipComponent,
-  argTypes: {},
-} as ComponentMeta<typeof FlipComponent>;
+} satisfies Meta<typeof Flip>;
 
-const Template: ComponentStory<typeof FlipComponent> = (args) => (
-  <FlipComponent {...args} tabIndex={0} />
-);
+export default meta;
 
-/**
- * Images Stories - Horizontal Flipping
- */
-export const Horizontal = Template.bind({});
-Horizontal.args = {
-  children: (
-    <>
-      <FlipSide style={{ padding: '10px' }}>
-        Consequatur natus possimus quia consequatur placeat consectetur. Quia
-        vel magnam. Dolorem in quas non inventore aut sapiente. Consequuntur est
-        cum et.
-      </FlipSide>
-      <FlipSide isBack style={{ background: '#eee', padding: '10px' }}>
-        Iusto voluptatem repudiandae odit quo amet. Dolores vitae et neque
-        minima velit. Ad consequatur assumenda qui placeat aut consectetur
-        officia numquam illo. Neque quos voluptate ipsam eum ipsa officiis et
-        autem non.
-      </FlipSide>
-    </>
-  ),
+type Story = StoryObj<typeof meta>;
+
+export const Horizontal: Story = {
+  args: {
+    children: (
+      <>
+        <FlipSide style={{ padding: '10px' }}>
+          Consequatur natus possimus quia consequatur placeat consectetur. Quia
+          vel magnam. Dolorem in quas non inventore aut sapiente. Consequuntur
+          est cum et.
+        </FlipSide>
+        <FlipSide isBack style={{ background: '#eee', padding: '10px' }}>
+          Iusto voluptatem repudiandae odit quo amet. Dolores vitae et neque
+          minima velit. Ad consequatur assumenda qui placeat aut consectetur
+          officia numquam illo. Neque quos voluptate ipsam eum ipsa officiis et
+          autem non.
+        </FlipSide>
+      </>
+    ),
+  },
 };
 
-/**
- * Images Stories - Vertical Flipping
- */
-export const Vertical = Template.bind({});
-Vertical.args = {
-  children: (
-    <>
-      <FlipSide style={{ padding: '10px' }}>
-        Consequatur natus possimus quia consequatur placeat consectetur. Quia
-        vel magnam. Dolorem in quas non inventore aut sapiente. Consequuntur est
-        cum et.
-      </FlipSide>
-      <FlipSide isBack style={{ background: '#eee', padding: '10px' }}>
-        Iusto voluptatem repudiandae odit quo amet. Dolores vitae et neque
-        minima velit. Ad consequatur assumenda qui placeat aut consectetur
-        officia numquam illo. Neque quos voluptate ipsam eum ipsa officiis et
-        autem non.
-      </FlipSide>
-    </>
-  ),
-  direction: 'vertical',
+export const Vertical: Story = {
+  args: {
+    children: (
+      <>
+        <FlipSide style={{ padding: '10px' }}>
+          Consequatur natus possimus quia consequatur placeat consectetur. Quia
+          vel magnam. Dolorem in quas non inventore aut sapiente. Consequuntur
+          est cum et.
+        </FlipSide>
+        <FlipSide isBack style={{ background: '#eee', padding: '10px' }}>
+          Iusto voluptatem repudiandae odit quo amet. Dolores vitae et neque
+          minima velit. Ad consequatur assumenda qui placeat aut consectetur
+          officia numquam illo. Neque quos voluptate ipsam eum ipsa officiis et
+          autem non.
+        </FlipSide>
+      </>
+    ),
+    direction: 'vertical',
+  },
 };