3. Create first atomic component

[bartektelec]

• Your feature/mvp has changed on the remote (origin/feature/mvp) because you merged your last pull request, and you will need to sync it with your local feature/mvp, google it
• Create a new branch OUT of feature/mvp that you will call develop/btn-component
• Short article: https://atomicdesign.bradfrost.com/chapter-2/
• In your client app create a new directory called components, its where you will put all your reusable components
• Install Storybook, do some reading on what it is and how to run it, preferably add a NPM script to package.json to easily run it from terminal
• Inside of components create a Button.tsx component, Style it using Tailwind
  => https://www.figma.com/file/iGqblG6oUcIuLDnvcoltfR/Foodie-collection?node-id=1%3A4
• Do some reading about forwarding Refs - you want to use it in this component as you are actually just creating a whole new <button> that is supposed to work like a native one
  => https://reactjs.org/docs/forwarding-refs.html
• Add Storybook stories, next to the component file Button.stories.tsx, the component should handle passed mouse events and native HTML attributes, like [type] or [disabled]
• Open a PR develop/btn-component -> feature/mvp

[bartektelec]

Example story file:

// Button.stories.ts|tsx

import React from 'react';

import { ComponentStory, ComponentMeta } from '@storybook/react';

import Button from './Button';

export default {
  /* 👇 The title prop is optional.
   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
  title: 'Button',
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: [
        'default',
        'primary',
        'success',
        'info',
        'warning',
        'danger',
        'dark',
      ],
    },
    size: { control: 'select', options: ['sm', 'md', 'lg', 'xl'] },
    disabled: { control: 'boolean' },
  },
  args: {
    variant: 'default',
    size: 'md',
    disabled: false,
    children: 'I am a button',
  },
} as ComponentMeta<typeof Button>;

const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

export const Default = Template.bind({});
export const Disabled = Template.bind({});
Disabled.args = {
  disabled: true,
};

export const Primary = Template.bind({});
Primary.args = {
  variant: 'primary',
};

export const PrimaryDisabled = Template.bind({});
PrimaryDisabled.args = {
  variant: 'primary',
  disabled: true,
};
export const Small = Template.bind({});
Small.args = {
  size: 'sm',
};
export const Medium = Template.bind({});
Medium.args = {
  size: 'md',
};
export const Large = Template.bind({});
Large.args = {
  size: 'lg',
};
export const ExtraLarge = Template.bind({});
ExtraLarge.args = {
  size: 'xl',
};

[bartektelec]

[bartektelec]

You may run into issues when installing storybook.
What I have done.

1. I had an error about not being able to run ESM modules. Solution:
   Storybook cannot be built on packages using "type": "module" storybookjs/storybook#11587 (comment)
   Create a package.json file in .storybook folder.

{
  "type": "commonjs"
}

2. PostCSS is not running by default you will need to add @storybook/addon-postcss - be aware i had issues with version 3.0.0-alpha.1 and needed to install 2.0.0 instead. You will then need to add this addon to storybook, and since you are using PostCSS 8: https://storybook.js.org/addons/@storybook/addon-postcss
   you should have this in .storybook/main.js :

addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ]

Last thing you will need to do is go to .storybook/preview-head.html and add <link rel="stylesheet" href="../src/index.css" /> at the end of the document.

Good luck