updated storybook webpack config

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.storybook/main.js

@@ -0,0 +1,35 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const custom = require('../webpack.config.js')()
+
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/preset-create-react-app',
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
+  webpackFinal: (config) => {
+    return {
+      ...config,
+      module: {
+        ...config.module,
+        rules: custom.module.rules, // babel, sass, fonts and images loaders
+      },
+      resolve: {
+        ...config.resolve,
+        ...custom.resolve, // custom imports resolvers
+      },
+      plugins: [
+        new MiniCssExtractPlugin({
+          filename: '[name].[contenthash].css',
+        }),
+        ...config.plugins,
+      ],
+    }
+  },
+}

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

package.json

@@ -8,7 +8,9 @@
     "build:prod": "webpack --mode development",
     "start:dev": "webpack serve --mode development --config webpack.config.js --open",
     "start:prod": "webpack serve --mode production --open",
-    "lint": "eslint --fix . && echo 'Lint complete.'"
+    "lint": "eslint --fix . && echo 'Lint complete.'",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "author": "Andres Alcocer",
   "license": "ISC",
@@ -45,7 +47,18 @@
     "@babel/polyfill": "^7.0.0-beta.51",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/node-logger": "^6.5.13",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.13",
+    "@storybook/testing-library": "^0.0.13",
     "babel-loader": "^9.1.0",
+    "babel-plugin-named-exports-order": "^0.0.2",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.2",
@@ -62,7 +75,7 @@
     "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.0",
     "image-webpack-loader": "^8.1.0",
-    "mini-css-extract-plugin": "^2.7.0",
+    "mini-css-extract-plugin": "^1.3.6",
     "node-sass": "^8.0.0",
     "prettier": "^2.8.0",
     "sass-loader": "^13.2.0",
@@ -75,5 +88,17 @@
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.0",
     "webpack-dev-server": "^4.11.1"
+  },
+  "eslintConfig": {
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
   }
 }

src/components/Button/Button.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import './button.scss'
+
+export enum ButtonType {
+  Primary,
+  Secondary,
+}
+
+interface IButton {
+  label: string
+  onClick?: () => void
+  buttonType: ButtonType
+  Icon: JSX.Element
+}
+
+const Button = ({ label, onClick, buttonType, Icon }: IButton) => {
+  return (
+    <button
+      className={`n-button${Icon ? ' with-icon' : ''} ${
+        ButtonType[buttonType ? buttonType : ButtonType.Primary]
+      }`}
+      onClick={onClick}
+    >
+      {Icon && Icon}
+      {label}
+    </button>
+  )
+}
+
+export default Button

src/components/Button/__tests__/Button.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+import Button from '../Button'
+import { ButtonType } from '../Button'
+import PlayLogo from '../../../static/images/play-button.svg'
+
+export default {
+  title: 'Button',
+  component: Button,
+} as ComponentMeta<typeof Button>
+
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
+
+export const Primary = Template.bind({})
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Primary.args = {
+  label: 'Primary',
+  buttonType: ButtonType.Primary,
+}
+
+export const Secondary = Template.bind({})
+Secondary.args = {
+  label: 'Secondary',
+  buttonType: ButtonType.Secondary,
+}
+
+export const WithIcon = Template.bind({})
+WithIcon.args = {
+  label: 'Icon Btn',
+  buttonType: ButtonType.Primary,
+  Icon: <PlayLogo />,
+}

src/components/Button/button.scss

@@ -0,0 +1,49 @@
+@import '../../static/sass/abstracts/functions';
+
+.n-button {
+  top: 40rem;
+  cursor: pointer;
+  font-size: 1.6rem;
+  outline: none;
+  border: none;
+  font-weight: 700;
+  border-radius: 5px;
+  padding-left: 3.5rem;
+  padding-right: 3.5rem;
+  margin-right: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+
+  @include responsive(phone) {
+    top: 24rem;
+  }
+
+  &.with-icon {
+    fill: #fff;
+    margin-right: 1rem;
+    display: flex;
+
+    & > * {
+      width: 15px;
+      height: 15px;
+      fill: #fff;
+      margin-right: 1rem;
+    }
+  }
+
+  &.Primary {
+    color: #000;
+    background-color: #fff;
+    transition: all 0.2s;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+
+    & > * {
+      fill: #000;
+    }
+  }
+
+  &.Secondary {
+    background-color: rgba(109, 109, 110, 0.7);
+    color: #fff;
+  }
+}

src/components/Header.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react'
 
 import PlayLogo from '../static/images/play-button.svg'
+import { ButtonType } from './Button/Button'
+import Button from './Button/Button'
 import AddLogo from '../static/images/add.svg'
 import MuteIcon from '../static/images/mute.svg'
 import UnmuteIcon from '../static/images/unmute.svg'
@@ -27,17 +29,17 @@ const Header = ({ name, overview }: IHeader) => {
         url='https://vimeo.com/384025132'
       />
       <h1 className='header__container-heading'>{name}</h1>
-      <button
+      <Button
+        Icon={<PlayLogo />}
+        buttonType={ButtonType.Primary}
         onClick={() => alert('not a movie!')}
-        className='header__container-btnPlay'
-      >
-        <PlayLogo className='header__container-btnMyList-play' />
-        Play
-      </button>
-      <button className='header__container-btnMyList'>
-        <AddLogo className='header__container-btnMyList-add' />
-        My List
-      </button>
+        label={'Play'}
+      />
+      <Button
+        label={'My List'}
+        Icon={<AddLogo />}
+        buttonType={ButtonType.Secondary}
+      />
       {isMuted ? (
         <MuteIcon
           onClick={() => setIsMuted(false)}

src/static/sass/layout/_header.scss

@@ -3,6 +3,16 @@
   position: relative;
   padding-top: 56.25%;
 
+  & > button.Primary {
+    left: 4rem;
+    position: absolute;
+  }
+
+  & > button.Secondary {
+    left: 18.5rem;
+    position: absolute;
+  }
+
   @include responsive(phone) {
     padding-top: 0;
     height: 32rem;
@@ -34,64 +44,6 @@
       }
     }
 
-    &-btnPlay,
-    &-btnMyList {
-      top: 40rem;
-      cursor: pointer;
-      font-size: 1.6rem;
-      color: #fff;
-      outline: none;
-      border: none;
-      font-weight: 700;
-      border-radius: 5px;
-      padding-left: 3.5rem;
-      padding-right: 3.5rem;
-      margin-right: 1rem;
-      padding-top: 1rem;
-      background-color: rgba(112, 111, 111, 0.5);
-      padding-bottom: 1rem;
-
-      @include responsive(phone) {
-        top: 24rem;
-      }
-
-      &-add {
-        width: 15px;
-        height: 15px;
-        fill: #fff;
-        margin-right: 1rem;
-      }
-
-      &-play {
-        width: 15px;
-        height: 15px;
-        fill: #fff;
-        margin-right: 1rem;
-      }
-    }
-
-    &-btnPlay {
-      color: #000;
-      background-color: #e6e6e6;
-      transition: all 0.2s;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-
-      & > * {
-        fill: #000;
-      }
-      left: 4rem;
-      position: absolute;
-    }
-
-    &-btnMyList {
-      left: 18.5rem;
-      position: absolute;
-
-      &:hover {
-        background-color: rgb(37, 37, 37);
-      }
-    }
-
     &-btnVolume {
       position: absolute;
       height: 3rem;

webpack.config.js

@@ -93,9 +93,7 @@ module.exports = () => {
         {
           test: /\.svg$/,
           exclude: /node_modules/,
-          use: {
-            loader: 'svg-react-loader',
-          },
+          use: ['@svgr/webpack'],
         },
         {
           test: /\.css$/i,