add storybook components

.storybook/main.js

@@ -0,0 +1,22 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

src/js/common/components/Style/Colors.js

@@ -0,0 +1,12 @@
+const colors = {
+  primary: '#0834CD',
+  primaryHover: '#09288A',
+  secondaryHover: '#F5F7FD',
+  darkGrey: '#454F69',
+  middleGrey: '#8C92A2',
+  grey: '#AEB2BE',
+  lightGrey: '#E5E6EA',
+  white: '#ffffff',
+};
+
+export default colors;

src/js/common/stories/Button.jsx

@@ -0,0 +1,50 @@
+// import React from 'react';
+// import PropTypes from 'prop-types';
+// import './button.css';
+
+// /**
+//  * Primary UI component for user interaction
+//  */
+// export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
+//   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+//   return (
+//     <button
+//       type="button"
+//       className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+//       style={backgroundColor && { backgroundColor }}
+//       {...props}
+//     >
+//       {label}
+//     </button>
+//   );
+// };
+
+// Button.propTypes = {
+//   /**
+//    * Is this the principal call to action on the page?
+//    */
+//   primary: PropTypes.bool,
+//   /**
+//    * What background color to use
+//    */
+//   backgroundColor: PropTypes.string,
+//   /**
+//    * How large should the button be?
+//    */
+//   size: PropTypes.oneOf(['small', 'medium', 'large']),
+//   /**
+//    * Button contents
+//    */
+//   label: PropTypes.string.isRequired,
+//   /**
+//    * Optional click handler
+//    */
+//   onClick: PropTypes.func,
+// };
+
+// Button.defaultProps = {
+//   backgroundColor: null,
+//   primary: false,
+//   size: 'medium',
+//   onClick: undefined,
+// };

src/js/common/stories/Button.stories.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import styled from 'styled-components';
+import Button from '../../components/Buttons/BaseButton';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+export default {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  // argTypes: {
+  //   backgroundColor: { control: 'color' },
+  // },
+  args: {
+    primary: true,
+  },
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const AllButtons = (args) => (
+  <ButtonContainer>
+    <Button {...Primary.args} primary size="large" label="Primary Large Disabled Button" />
+    <Button {...Primary.args} primary={false} size="large" label="PrimaryLarge Disabled Button" />
+    <Button {...Primary.args} primary label="Primary Medium Button" />
+    <Button {...PrimaryDisabled.args} primary={false} label="Primary Medium Disabled Button" />
+    <Button {...Primary.args} primary size="small" label="Primary Small Button" />
+    <Button {...PrimaryDisabled.args} primary={false} size="small" label="Primary Small Disabled" />
+    <Button {...Secondary.args} secondary label="Secondary Button" />
+  </ButtonContainer>
+);
+
+export const PrimaryDisabled = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    secondary: true,
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    primary: true,
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Medium = {
+  args: {
+    primary: true,
+    size: 'medium',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    primary: true,
+    size: 'small',
+    label: 'Button',
+  },
+};
+
+const ButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 34px;
+  flex-direction: column;
+`;