Merge pull request #710 from CodeForAfrica/chore/ui_storybook_8

Upgrade repo Storybook 8

apps/commons-ui-docs/.env

@@ -1 +1 @@
-STORYBOOK_DISABLE_TELEMETRY=0
+STORYBOOK_DISABLE_TELEMETRY=1

apps/commons-ui-docs/.storybook/main.js

@@ -6,9 +6,6 @@ const config = {
     getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@storybook/addon-interactions"),
   ],
-  docs: {
-    autodocs: "tag",
-  },
   framework: {
     name: getAbsolutePath("@storybook/nextjs"),
     options: {},

apps/commons-ui-docs/.storybook/preview.js

@@ -65,6 +65,10 @@ const preview = {
         date: /Date$/,
       },
     },
+    docs: {
+      toc: true,
+    },
+    tags: ["autodocs"],
     viewport: { viewports },
   },
 };

apps/commons-ui-docs/package.json

@@ -37,6 +37,7 @@
     "@mui/material": "^5.14.20",
     "@mui/utils": "^5.14.20",
     "@next/env": "^14.0.4",
+    "css-loader": "^7.1.2",
     "next": "^14.1.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
@@ -45,22 +46,22 @@
   "devDependencies": {
     "@babel/core": "^7.23.6",
     "@babel/preset-react": "^7.23.3",
-    "@storybook/addon-essentials": "^7.6.4",
-    "@storybook/addon-interactions": "^7.6.4",
-    "@storybook/addon-links": "^7.6.4",
-    "@storybook/blocks": "^7.6.4",
-    "@storybook/cli": "^7.6.4",
-    "@storybook/nextjs": "^7.6.4",
-    "@storybook/react": "^7.6.4",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/addon-essentials": "^8.1.5",
+    "@storybook/addon-interactions": "^8.1.5",
+    "@storybook/addon-links": "^8.1.5",
+    "@storybook/blocks": "^8.1.5",
+    "@storybook/cli": "^8.1.5",
+    "@storybook/nextjs": "^8.1.5",
+    "@storybook/react": "^8.1.5",
+    "@storybook/test": "^8.1.5",
     "@types/node": "^18.19.3",
     "@types/react": "^18.2.43",
     "eslint": "^8.55.0",
     "eslint-config-commons-ui": "workspace:*",
     "eslint-import-resolver-webpack": "^0.13.8",
     "eslint-plugin-import": "^2.29.0",
     "prettier": "^3.1.1",
-    "storybook": "^7.6.4",
+    "storybook": "^8.1.5",
     "typescript": "^5.3.3",
     "webpack": "^5.89.0"
   },

apps/pesayetu/.env.template

@@ -55,3 +55,8 @@ S3_UPLOAD_REGION=bucket-region-us-east-1
 
 #Analytics
 NEXT_PUBLIC_GOOGLE_ANALYTICS = "G-xxxxxxxx"
+
+# Storybook Telemetry
+# https://storybook.js.org/docs/configure/telemetry
+#
+STORYBOOK_DISABLE_TELEMETRY=0

apps/pesayetu/.storybook/main.js

@@ -0,0 +1,50 @@
+import { dirname, join } from "path";
+/** @type { import('@storybook/nextjs').StorybookConfig } */
+const config = {
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/nextjs"),
+    options: {},
+  },
+  staticDirs: ["../public"],
+  stories: [
+    "../src/components/**/*.mdx",
+    "../src/components/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+  webpackFinal: async (config) => {
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+
+    // Exclude .svg files so that we can use @svgr/webpack below
+    const imageRule = config.module.rules.find((rule) =>
+      rule?.["test"]?.test(".svg"),
+    );
+    if (imageRule) {
+      imageRule["exclude"] = /\.svg$/;
+    }
+
+    // Configure .svg files to be loaded with @svgr/webpack
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [
+        "@svgr/webpack",
+        {
+          loader: "svg-url-loader",
+          options: {},
+        },
+      ],
+    });
+
+    return config;
+  },
+};
+
+export default config;
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}

apps/pesayetu/.storybook/manager-head.html

@@ -0,0 +1,3 @@
+<!-- .storybook/manager-head.html -->
+
+<meta name="description" content="PesaYetu UI" key="desc" />

apps/pesayetu/.storybook/preview-head.html

@@ -0,0 +1,8 @@
+<!-- .storybook/preview-head.html -->
+
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+  rel="stylesheet"
+/>

apps/pesayetu/.storybook/preview.js

@@ -0,0 +1,54 @@
+import { ThemeProvider } from "@mui/material/styles";
+import theme from "@/pesayetu/theme";
+// import createTheme from "@commons-ui/core/styles/createTheme";
+
+import "./styles.css";
+
+const withThemeProvider = (Story, context) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <Story {...context} />
+    </ThemeProvider>
+  );
+};
+
+/** MUI Breakpoints
+ * https://mui.com/material-ui/customization/breakpoints/#main-content
+ */
+const viewports = {
+  md: {
+    name: "Medium",
+    styles: {
+      width: "608px",
+      height: "800px",
+    },
+  },
+  lg: {
+    name: "Large",
+    styles: {
+      width: "1160px",
+      height: "800px",
+    },
+  },
+};
+
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  decorators: [withThemeProvider],
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      toc: true,
+    },
+    tags: ["autodocs"],
+    viewport: { viewports },
+  },
+};
+
+export default preview;

apps/pesayetu/.storybook/styles.css

@@ -0,0 +1,3 @@
+body {
+  padding: 0 !important;
+}

apps/pesayetu/package.json

@@ -22,6 +22,7 @@
   },
   "scripts": {
     "dev": "NODE_OPTIONS='--inspect' next dev",
+    "storybook": "storybook dev -p 6006",
     "lint-check": "TIMING=1 eslint './'",
     "lint": "TIMING=1 eslint --fix './'",
     "jest": "jest --passWithNoTests",
@@ -80,15 +81,14 @@
     "@commons-ui/testing-library": "workspace:*",
     "@material-ui/codemod": "^4.5.1",
     "@playwright/test": "^1.40.1",
-    "@storybook/addon-actions": "^7.6.4",
-    "@storybook/addon-essentials": "^7.6.4",
-    "@storybook/addon-links": "^7.6.4",
-    "@storybook/addons": "^7.6.4",
-    "@storybook/client-api": "^7.6.4",
-    "@storybook/components": "^7.6.4",
-    "@storybook/core-events": "^7.6.4",
-    "@storybook/react": "^7.6.4",
-    "@storybook/theming": "^7.6.4",
+    "@storybook/addon-essentials": "^8.1.5",
+    "@storybook/addon-interactions": "^8.1.5",
+    "@storybook/addon-links": "^8.1.5",
+    "@storybook/blocks": "^8.1.5",
+    "@storybook/cli": "^8.1.5",
+    "@storybook/nextjs": "^8.1.5",
+    "@storybook/react": "^8.1.5",
+    "@storybook/test": "^8.1.5",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^18.19.3",
     "@types/react": "^18.2.43",
@@ -113,6 +113,7 @@
     "playwright-config-commons-ui": "workspace:*",
     "prettier": "^3.1.1",
     "react-test-renderer": "^18.2.0",
+    "storybook": "^8.1.5",
     "svg-url-loader": "^8.0.0",
     "typescript": "^5.3.3"
   },

apps/pesayetu/src/components/AboutHero/index.stories.js

@@ -3,7 +3,7 @@ import React from "react";
 import AboutHero from ".";
 
 export default {
-  title: "Sections/AboutHero",
+  title: "PesaYetu/Sections/AboutHero",
 };
 
 function Template({ ...args }) {

apps/pesayetu/src/components/AboutProject/index.stories.js

@@ -3,7 +3,7 @@ import React from "react";
 import AboutProject from ".";
 
 export default {
-  title: "Sections/AboutProject",
+  title: "PesaYetu/Sections/AboutProject",
 };
 
 function Template({ ...args }) {

apps/pesayetu/src/components/AboutTeam/index.stories.js

@@ -5,7 +5,7 @@ import AboutTeam from ".";
 import { aboutTeam } from "@/pesayetu/config";
 
 export default {
-  title: "Sections/AboutTeam",
+  title: "PesaYetu/Sections/AboutTeam",
 };
 
 function Template({ ...args }) {

apps/pesayetu/src/components/Button/index.stories.js

@@ -3,7 +3,7 @@ import { Button } from "@mui/material";
 import React from "react";
 
 export default {
-  title: "Components/Button",
+  title: "PesaYetu/Components/Button",
   argTypes: {
     color: {
       control: {

apps/pesayetu/src/components/Card/index.stories.js

@@ -8,7 +8,7 @@ const [insightItem] = insightData.items;
 const [teamItem] = aboutTeam.items;
 
 export default {
-  title: "Components/Card",
+  title: "PesaYetu/Components/Card",
   argTypes: {
     card: {
       control: {

apps/pesayetu/src/components/DataIndicators/index.stories.js

@@ -6,7 +6,7 @@ import DataIndicators from ".";
 import { dataIndicator } from "@/pesayetu/config";
 
 export default {
-  title: "Sections/DataIndicators",
+  title: "PesaYetu/Sections/DataIndicators",
 };
 
 function Template({ ...args }) {

apps/pesayetu/src/components/DataSources/index.stories.js

@@ -3,7 +3,7 @@ import React from "react";
 import DataSources from ".";
 
 export default {
-  title: "Sections/DataSources",
+  title: "PesaYetu/Sections/DataSources",
 };
 
 function Template(args) {

apps/pesayetu/src/components/DataVisualisationGuide/index.stories.js

@@ -6,7 +6,7 @@ import DataVisuals from ".";
 import { dataVisuals } from "@/pesayetu/config";
 
 export default {
-  title: "Sections/DataVisualisationGuide",
+  title: "PesaYetu/Sections/DataVisualisationGuide",
 };
 
 function Template({ ...args }) {

apps/pesayetu/src/components/DatasetsAndDocuments/index.stories.js

@@ -5,7 +5,7 @@ import DatasetsAndDocuments from ".";
 import { documentsAndDatasetsArgs } from "@/pesayetu/config";
 
 export default {
-  title: "Sections/DatasetsAndDocuments",
+  title: "PesaYetu/Sections/DatasetsAndDocuments",
   argTypes: {
     activeType: {
       control: {

apps/pesayetu/src/components/DropdownSearch/index.stories.js

@@ -5,7 +5,7 @@ import DropdownSearch from ".";
 import { searchArgs } from "@/pesayetu/config";
 
 export default {
-  title: "Components/DropdownSearch",
+  title: "PesaYetu/Components/DropdownSearch",
   argTypes: {
     title: {
       control: {

apps/pesayetu/src/components/ExploreOtherTools/index.stories.js

@@ -6,7 +6,7 @@ import ExploreOtherTools from ".";
 import { exploreTools } from "@/pesayetu/config";
 
 export default {
-  title: "Sections/ExploreOtherTools",
+  title: "PesaYetu/Sections/ExploreOtherTools",
 };
 
 function Template({ ...args }) {

apps/pesayetu/src/components/FeaturedStoryCard/index.stories.js

@@ -5,7 +5,7 @@ import FeaturedStoryCard from ".";
 import cardImage from "@/pesayetu/assets/images/stephen-dawson-qwtCeJ5cLYs-unsplash.png";
 
 export default {
-  title: "Components/FeaturedStoryCard",
+  title: "PesaYetu/Components/FeaturedStoryCard",
   argTypes: {
     ctaText: {
       control: {

apps/pesayetu/src/components/Footer/index.stories.js

@@ -6,7 +6,7 @@ import Footer from ".";
 import { footerArgs } from "@/pesayetu/config";
 
 export default {
-  title: "Sections/Footer",
+  title: "PesaYetu/Sections/Footer",
   argTypes: {
     title: {
       control: {
@@ -54,8 +54,10 @@ function Template({ ...args }) {
 export const Default = Template.bind({});
 
 Default.parameters = {
-  nextRouter: {
-    pathname: "/?path=/story/sections-footer--default",
+  nextjs: {
+    router: {
+      pathname: "/?path=/story/sections-footer--default",
+    },
   },
 };
 

apps/pesayetu/src/components/HURUmap/CategoryHeader/index.stories.js

@@ -4,7 +4,7 @@ import Group4658 from "@/pesayetu/assets/icons/Group 4658-white.svg";
 import CategoryHeader from "@/pesayetu/components/HURUmap/CategoryHeader";
 
 export default {
-  title: "Components/HURUmap/CategoryHeader",
+  title: "HURUmap/Components/CategoryHeader",
   argTypes: {},
 };
 

apps/pesayetu/src/components/HURUmap/Chart/index.stories.js

@@ -4,7 +4,7 @@ import React from "react";
 import Chart from "@/pesayetu/components/HURUmap/Chart";
 
 export default {
-  title: "Components/HURUmap/Chart",
+  title: "HURUmap/Components/Chart",
 };
 
 function Template({ ...args }) {

apps/pesayetu/src/components/HURUmap/ChartFilter/index.stories.js

@@ -3,7 +3,7 @@ import React from "react";
 import ChartFilter from "@/pesayetu/components/HURUmap/ChartFilter";
 
 export default {
-  title: "Components/HURUmap/ChartFilter",
+  title: "HURUmap/Components/ChartFilter",
   argTypes: {},
 };