Maintenance: July deps check (#73)

* Remove isbot dependency

* Update storefront API version to 2023-07

* Revert "Update storefront API version to 2023-07"

This reverts commit a501c2f.

* Update typescript to 5.1.6

* Revert "Update typescript to 5.1.6"

This reverts commit d416400.

* bump html-react-parser from 3.0.16 to 4.1.0

* Update eslint and plugins

* bump @types/eslint from 8.4.10 to 8.44.0

* bump @emotion/react from 11.11.0 to 11.11.1

* Start Storybook migration from 6.5.16 to 7.1.0

* Migrate Atoms from CSF 2 to CSF 3

* Migrate molecules from CSF 2 to CSF 3

* Migrate Organisms from CSF 2 to CSF 3

* Migrate Templates from CSF 2 to CSF 3

* Fix storybook button render, fix console warnings

* Remove comments, cleanup

.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.storybook/main.ts

@@ -0,0 +1,22 @@
+import {StorybookConfig} from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: [
+    '../app/components/**/*.stories.mdx',
+    '../app/components/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {fastRefresh: true},
+  },
+  docs: {
+    autodocs: true,
+  },
+};
+
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import {Preview} from '@storybook/react';
+import {ThemeProvider} from '@emotion/react';
+
+import {GlobalStyles} from '../app/global.styles';
+import theme from '../app/theme';
+
+const preview: Preview = {
+  parameters: {
+    actions: {argTypesRegex: '^on[A-Z].*'},
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={theme}>
+        <GlobalStyles />
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default preview;

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 Default: 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,38 @@
-import {ComponentMeta, ComponentStory} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 
 import {HorizontalButton} from './horizontal-button.component';
+import {LinkWrapper} from './horizontal-button.styles';
 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) => (
+    <LinkWrapper>
+      <HorizontalButton {...args} />
+    </LinkWrapper>
+  ),
+  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) => (
+    <LinkWrapper>
+      <HorizontalButton {...args} />
+    </LinkWrapper>
+  ),
+  args: {
+    label: '¿CÓMO LLEGAR?',
+    href: configData.globalLinks.googleMaps,
+    linkRender: (props) => <CustomLink {...props} />,
+  },
 };

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

@@ -76,3 +76,9 @@ export const Img = styled.img`
   height: 23px;
   width: 14px;
 `;
+
+export const LinkWrapper = styled.div`
+  & > a {
+    line-height: unset;
+  }
+`;

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 />};