Migrate Atoms from CSF 2 to CSF 3

app/components/atoms/arrow-button/arrow-button.stories.tsx

@@ -1,21 +1,25 @@
 import {action} from '@storybook/addon-actions';
-import {ComponentMeta, ComponentStory} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 
 import {ArrowButton, LeftArrow, RightArrow} from './arrow-button.component';
 
-export default {
+const meta: Meta<typeof ArrowButton> = {
   title: 'Atoms/ArrowButton',
-} as ComponentMeta<typeof ArrowButton>;
+  component: ArrowButton,
+};
+export default meta;
 
-const Template: ComponentStory<typeof ArrowButton> = (args) => (
-  <div style={{display: 'flex', gap: '1em'}}>
-    <LeftArrow {...args} />
-    <RightArrow {...args} />
-  </div>
-);
+type Story = StoryObj<typeof ArrowButton>;
 
-export const Default = Template.bind({});
-Default.args = {
-  title: 'buttons',
-  onClick: action('click'),
+export const Default: Story = {
+  render: (args) => (
+    <div style={{display: 'flex', gap: '1em'}}>
+      <LeftArrow {...args} />
+      <RightArrow {...args} />
+    </div>
+  ),
+  args: {
+    title: 'buttons',
+    onClick: action('click'),
+  },
 };

app/components/atoms/badge/badge.stories.tsx

@@ -1,20 +1,19 @@
-import {ComponentMeta, ComponentStory} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 
 import {Badge} from './badge.component';
 
 export default {
   title: 'Atoms/Badge',
   component: Badge,
-} as ComponentMeta<typeof Badge>;
+} as Meta<typeof Badge>;
 
-const Template: ComponentStory<typeof Badge> = (args) => <Badge {...args} />;
+type Story = StoryObj<typeof Badge>;
 
-export const Seasonal = Template.bind({});
-Seasonal.args = {
-  variant: 'seasonal',
+export const Seasonal: Story = {
+  render: (args) => <Badge {...args} />,
+  args: {variant: 'seasonal'},
 };
-
-export const Recommendation = Template.bind({});
-Recommendation.args = {
-  variant: 'recommendation',
+export const Recommendation: Story = {
+  render: (args) => <Badge {...args} />,
+  args: {variant: 'recommendation'},
 };

app/components/atoms/carousel-circle/carousel-circle.stories.tsx

@@ -1,22 +1,20 @@
-import {ComponentMeta, ComponentStory} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 
 import {CarouselCircle} from './carousel-circle.component';
 
 export default {
   title: 'Atoms/CarouselCircle',
   component: CarouselCircle,
-} as ComponentMeta<typeof CarouselCircle>;
+} as Meta<typeof CarouselCircle>;
 
-const Template: ComponentStory<typeof CarouselCircle> = (args) => (
-  <CarouselCircle {...args} />
-);
+type Story = StoryObj<typeof CarouselCircle>;
 
-export const Default = Template.bind({});
-Default.args = {
-  active: false,
+export const Default: Story = {
+  render: (args) => <CarouselCircle {...args} />,
+  args: {active: false},
 };
 
-export const Active = Template.bind({});
-Active.args = {
-  active: true,
+export const Active: Story = {
+  render: (args) => <CarouselCircle {...args} />,
+  args: {active: true},
 };

app/components/atoms/divider/divider.stories.tsx

@@ -1,12 +1,12 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {StoryObj, Meta} from '@storybook/react';
 
 import {Divider} from './divider.component';
 
 export default {
   title: 'Atoms/Divider',
   component: Divider,
-} as ComponentMeta<typeof Divider>;
+} as Meta<typeof Divider>;
 
-const Template: ComponentStory<typeof Divider> = (args) => <Divider />;
+type Story = StoryObj<typeof Divider>;
 
-export const Default = Template.bind({});
+export const Default: Story = {render: () => <Divider />};

app/components/atoms/explosion-badge/explosion-badge.stories.tsx

@@ -1,18 +1,15 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import React from 'react';
+import {StoryObj, Meta} from '@storybook/react';
 
 import {ExplosionBadge} from './explosion-badge.component';
 
 export default {
   title: 'Atoms/ExplosionBadge',
   component: ExplosionBadge,
-} as ComponentMeta<typeof ExplosionBadge>;
+} as Meta<typeof ExplosionBadge>;
 
-const Template: ComponentStory<typeof ExplosionBadge> = (args) => (
-  <ExplosionBadge {...args} />
-);
+type Story = StoryObj<typeof ExplosionBadge>;
 
-export const Default = Template.bind({});
-Default.args = {
-  label: 'HMO.',
+export const Default: Story = {
+  render: (args) => <ExplosionBadge {...args} />,
+  args: {label: 'HMO.'},
 };

app/components/atoms/heading/heading.stories.tsx

@@ -1,4 +1,4 @@
-import {ComponentStory} from '@storybook/react';
+import {StoryObj} from '@storybook/react';
 
 import {
   Heading1,
@@ -22,21 +22,22 @@ const allHeadings = [
   {title: 'Heading6', component: Heading6},
 ];
 
-const Template: ComponentStory<typeof Heading1> = (args) => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'flex-start',
-      flexDirection: 'column',
-    }}
-  >
-    {allHeadings.map(({title, component: HeadingComponent}) => (
-      <div key={title} style={{textAlign: 'center'}}>
-        <HeadingComponent {...args}>{title}</HeadingComponent>
-      </div>
-    ))}
-  </div>
-);
+type Story = StoryObj;
 
-export const Default = Template.bind({});
-Default.args = {};
+export const Template: Story = {
+  render: (args) => (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'flex-start',
+        flexDirection: 'column',
+      }}
+    >
+      {allHeadings.map(({title, component: HeadingComponent}) => (
+        <div key={title} style={{textAlign: 'center'}}>
+          <HeadingComponent {...args}>{title}</HeadingComponent>
+        </div>
+      ))}
+    </div>
+  ),
+};

app/components/atoms/horizontal-button/horizontal-button.stories.tsx

@@ -1,25 +1,28 @@
-import {ComponentMeta, ComponentStory} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 
 import {HorizontalButton} from './horizontal-button.component';
 import configData from '../../../config.json';
+import {CustomLink} from '../link';
 
 export default {
   title: 'Atoms/HorizontalButton',
   component: HorizontalButton,
-} as ComponentMeta<typeof HorizontalButton>;
+} as Meta<typeof HorizontalButton>;
 
-const Template: ComponentStory<typeof HorizontalButton> = (args) => (
-  <HorizontalButton {...args} />
-);
+type Story = StoryObj<typeof HorizontalButton>;
 
-export const SeeMenu = Template.bind({});
-SeeMenu.args = {
-  label: 'VER EL MENÚ',
-  href: configData.globalLinks.menu,
+export const SeeMenu: Story = {
+  render: (args) => <HorizontalButton {...args} />,
+  args: {
+    label: 'VER EL MENÚ',
+    href: configData.globalLinks.menu,
+    linkRender: (props) => <CustomLink {...props} />,
+  },
 };
-
-export const Directions = Template.bind({});
-Directions.args = {
-  label: '¿CÓMO LLEGAR?',
-  href: configData.globalLinks.googleMaps,
+export const Directions: Story = {
+  render: (args) => <HorizontalButton {...args} />,
+  args: {
+    label: '¿CÓMO LLEGAR?',
+    href: configData.globalLinks.googleMaps,
+  },
 };

app/components/atoms/hr/horizontal-rule.stories.tsx

@@ -1,12 +1,12 @@
-import {ComponentMeta, ComponentStory} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 
 import {Hr} from './hr.component';
 
 export default {
   title: 'Atoms/Hr',
   component: Hr,
-} as ComponentMeta<typeof Hr>;
+} as Meta<typeof Hr>;
 
-const Template: ComponentStory<typeof Hr> = () => <Hr />;
+type Story = StoryObj<typeof Hr>;
 
-export const Default = Template.bind({});
+export const Default: Story = {render: () => <Hr />};

app/components/atoms/icon/icon.stories.tsx

@@ -1,30 +1,32 @@
-import {ComponentMeta, ComponentStory} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 
 import {FacebookIcon, InstagramIcon, TwitterIcon} from './icon.component';
 import {Paragraph} from '../paragraph';
 
 export default {
   title: 'Atoms/Icon',
-} as ComponentMeta<typeof FacebookIcon>;
+} as Meta<typeof FacebookIcon>;
 
 const allIcons = [
   {title: 'FacebookIcon', component: FacebookIcon},
   {title: 'InstagramIcon', component: InstagramIcon},
   {title: 'TwitterIcon', component: TwitterIcon},
 ];
 
-const Template: ComponentStory<typeof FacebookIcon> = (args) => (
-  <div style={{display: 'flex', gap: '1em'}}>
-    {allIcons.map(({title, component: IconComponent}) => (
-      <div key={title} style={{textAlign: 'center'}}>
-        <IconComponent {...args} />
-        <Paragraph>{title}</Paragraph>
-      </div>
-    ))}
-  </div>
-);
+type Story = StoryObj;
 
-export const Default = Template.bind({});
-Default.args = {
-  height: 36,
+export const Default: Story = {
+  render: (args) => (
+    <div style={{display: 'flex', gap: '1em'}}>
+      {allIcons.map(({title, component: IconComponent}) => (
+        <div key={title} style={{textAlign: 'center'}}>
+          <IconComponent {...args} />
+          <Paragraph>{title}</Paragraph>
+        </div>
+      ))}
+    </div>
+  ),
+  args: {
+    height: 36,
+  },
 };

app/components/atoms/link/link.stories.tsx

@@ -1,17 +1,26 @@
-import {ComponentMeta, ComponentStory} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 
 import {CustomLink, Link} from './link.component';
 
 export default {
   title: 'Atoms/Link',
   component: Link,
-} as ComponentMeta<typeof Link>;
+} as Meta<typeof Link>;
 
-const Template: ComponentStory<typeof Link> = (args) => <Link {...args} />;
+type Story = StoryObj<typeof Link>;
 
-export const Default = Template.bind({});
-Default.args = {
-  to: 'https://perro.cafe',
-  children: <p>Culto al Perro Café</p>,
-  linkRender: (props) => <CustomLink {...props} />,
+export const Default: Story = {
+  render: (args) => <Link {...args} />,
+  args: {
+    to: 'https://perro.cafe/',
+    children: <p>Culto al Perro Café</p>,
+    linkRender: (props) => <CustomLink {...props} />,
+  },
 };
+
+// export const Default = Template.bind({});
+// Default.args = {
+//   to: 'https://perro.cafe',
+//   children: <p>Culto al Perro Café</p>,
+//   linkRender: (props) => <CustomLink {...props} />,
+// };

app/components/atoms/map-sketch/map-sketch.stories.tsx

@@ -1,12 +1,12 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {StoryObj, Meta} from '@storybook/react';
 
 import {MapSketch} from './map-sketch.component';
 
 export default {
   title: 'Atoms/MapSketch',
   component: MapSketch,
-} as ComponentMeta<typeof MapSketch>;
+} as Meta<typeof MapSketch>;
 
-const Template: ComponentStory<typeof MapSketch> = () => <MapSketch />;
+type Story = StoryObj<typeof MapSketch>;
 
-export const Default = Template.bind({});
+export const Default: Story = {render: () => <MapSketch />};

app/components/atoms/numeral/numeral.stories.tsx

@@ -1,17 +1,15 @@
-import {ComponentMeta, ComponentStory} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 
 import {Numeral} from './numeral.component';
 
 export default {
   title: 'Atoms/Numeral',
   component: Numeral,
-} as ComponentMeta<typeof Numeral>;
+} as Meta<typeof Numeral>;
 
-const Template: ComponentStory<typeof Numeral> = (args) => (
-  <Numeral {...args} />
-);
+type Story = StoryObj<typeof Numeral>;
 
-export const Default = Template.bind({});
-Default.args = {
-  label: '1.',
+export const Default: Story = {
+  render: (args) => <Numeral {...args} />,
+  args: {label: '1.'},
 };