Merge pull request #162 from capcodigital/feature/add_storybook

added storybook and stories

.storybook/main.js

@@ -0,0 +1,19 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: ["../public"],
+};
+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$/,
+      },
+    },
+  },
+};
+
+export default preview;

package.json

@@ -24,7 +24,9 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "eslint --fix --ext .js,.jsx ./src/."
+    "lint": "eslint --fix --ext .js,.jsx ./src/.",
+    "storybook": "DISABLE_ESLINT_PLUGIN=true storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "browserslist": {
     "production": [
@@ -40,11 +42,23 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.24.2",
+    "@storybook/addon-essentials": "^7.0.20",
+    "@storybook/addon-interactions": "^7.0.20",
+    "@storybook/addon-links": "^7.0.20",
+    "@storybook/blocks": "^7.0.20",
+    "@storybook/preset-create-react-app": "^7.0.20",
+    "@storybook/react": "^7.0.20",
+    "@storybook/react-webpack5": "^7.0.20",
+    "@storybook/testing-library": "^0.0.14-next.2",
+    "babel-plugin-named-exports-order": "^0.0.2",
     "eslint": "^8.34.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0"
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prop-types": "^15.8.1",
+    "storybook": "^7.0.20",
+    "webpack": "^5.86.0"
   }
 }

src/stories/Content.stories.js

@@ -0,0 +1,25 @@
+import ContentComponent from "../components/ContentComponent";
+import "../components/ContentComponent/styles";
+
+export default {
+    title: "Content",
+    component: ContentComponent,
+}
+var subtitle = "Test Subtitle"
+var content = "Test content"
+
+export const ColorWhiteWithButton = () => <ContentComponent
+    subtitle={subtitle} content={content}
+/>
+
+export const ColorBlackWithButton = () => <ContentComponent
+    subtitle={subtitle} content={content} color="black"
+/>
+
+export const ColorWhiteNoButton = () => <ContentComponent
+    subtitle={subtitle} content={content} noBtn
+/>
+
+export const ColorBlackNoButton = () => <ContentComponent
+    subtitle={subtitle} content={content} color="black" noBtn
+/>

src/stories/Footer.stories.js

@@ -0,0 +1,9 @@
+import FooterComponent from "../components/FooterComponent";
+import "../components/FooterComponent/styles";
+
+export default {
+    title: "Footer",
+    component: FooterComponent,
+}
+
+export const Footer = () => <FooterComponent />

src/stories/Hero.stories.js

@@ -0,0 +1,9 @@
+import HeroComponent from "../components/HeroComponent";
+import "../components/HeroComponent/styles";
+
+export default {
+    title: "Hero",
+    component: HeroComponent,
+}
+
+export const Hero = () => <HeroComponent />

src/stories/NavBar.stories.js

@@ -0,0 +1,9 @@
+import NavBarComp from "../components/NavBar";
+import "../components/NavBar/styles";
+
+export default {
+    title: "NavBar",
+    component: NavBarComp,
+}
+
+export const NavBar = () => <NavBarComp />