Merge pull request #239 from varya/storybook-restore

Restore Storybook

Author: varya

.storybook/main.js

@@ -7,6 +7,9 @@ module.exports = {
     // { name: "@storybook/addon-essentials", options: { docs: false } },
     "storybook-addon-grommet",
   ],
+  core: {
+    builder: "webpack5",
+  },
   webpackFinal: async (config) => {
     // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
     config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/];
@@ -32,8 +35,11 @@ module.exports = {
 
     config.resolve.alias = {
       "@components": path.resolve(__dirname, "../src/components"),
+      "@pages": path.resolve(__dirname, "../src/pages"),
       "@templates": path.resolve(__dirname, "../src/templates"),
       "@static": path.resolve(__dirname, "../static"),
+      "@common": path.resolve(__dirname, "../src/common"),
+      "@content": path.resolve(__dirname, "../content"),
     };
 
     return config;

.storybook/preview.js

@@ -1,9 +1,9 @@
-import { addDecorator } from "@storybook/react";
 import { withGrommet } from "storybook-addon-grommet";
 import theme from "../src/components/theme.js";
 import { grommet } from "grommet";
+import { action } from "@storybook/addon-actions";
 
-addDecorator(
+export const decorators = [
   withGrommet({
     theme: "theme",
     themes: {
@@ -16,13 +16,12 @@ addDecorator(
     grommetProps: {
       full: true,
     },
-  })
-);
-
-addDecorator((story) => {
-  document.body.style.padding = 0; //remove story container padding
-  return story();
-});
+  }),
+  (story) => {
+    document.body.style.padding = 0; //remove story container padding
+    return story();
+  },
+];
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

package.json

@@ -83,6 +83,12 @@
     "@babel/preset-env": "^7.28.5",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.28.5",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react": "^6.5.16",
     "@types/jest": "^30.0.0",
     "@types/node": "^24.0.15",
     "@types/react": "^19.1.8",
@@ -93,6 +99,7 @@
     "babel-loader": "9.1.2",
     "babel-plugin-dynamic-import-webpack": "1.1.0",
     "babel-plugin-import": "1.13.6",
+    "babel-plugin-remove-graphql-queries": "^5.15.0",
     "babel-plugin-styled-components": "2.0.7",
     "babel-plugin-syntax-dynamic-import": "6.18.0",
     "eslint": "8.36.0",
@@ -108,6 +115,7 @@
     "husky": "^8.0.3",
     "prettier": "2.8.4",
     "remove-markdown": "0.5.0",
+    "storybook-addon-grommet": "^1.0.4",
     "typescript": "^5.8.3"
   },
   "husky": {