Re-initialize storybook so that build works

.github/workflows/chromatic.yml

@@ -14,7 +14,7 @@ jobs:
     steps:
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - uses: actions/checkout@v1
 

.github/workflows/ci.yml

@@ -14,7 +14,7 @@ jobs:
     steps:
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - uses: actions/checkout@v1
 

.gitignore

@@ -21,3 +21,5 @@ yarn-error.log*
 *.tmp
 *.bak
 *.swp
+
+storybook-static/

storybook/.eslintrc.js

@@ -1,9 +1,5 @@
 module.exports = {
-    extends: [
-        'airbnb',
-        'airbnb/hooks',
-        'plugin:@typescript-eslint/recommended',
-    ],
+    extends: ['airbnb', 'airbnb/hooks', 'plugin:@typescript-eslint/recommended', 'plugin:storybook/recommended', 'plugin:storybook/recommended'],
     env: {
         browser: true,
         jest: true,

storybook/.storybook/main.ts

@@ -0,0 +1,31 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

storybook/.storybook/preview-head.html

@@ -2,7 +2,7 @@
   window.global = window;
 </script>
 <style>
-    html, body, #root {
+    html, body, #storybook-root {
         height: 100%
     }
     * {

storybook/.storybook/preview.ts

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

storybook/package.json

@@ -1,56 +1,56 @@
 {
-    "name": "@togglecorp/re-map-storybook",
-    "version": "1.0.0",
-    "description": "",
-    "main": "index.js",
-    "scripts": {
-        "typecheck": "tsc",
-        "lint": "eslint ./stories --report-unused-disable-directives",
-        "check-unused": "unimported",
-        "storybook": "start-storybook -p 6006 --no-open",
-        "build-storybook": "build-storybook"
-    },
-    "keywords": [],
-    "author": "",
-    "license": "ISC",
-    "dependencies": {
-        "@mapbox/mapbox-gl-draw": "^1.4.3",
-        "@togglecorp/fujs": "^2.0.0",
-        "@togglecorp/re-map": "^0.3.0",
-        "chromatic": "^9.0.0",
-        "immer": "^10.0.3",
-        "maplibre-gl": "^3.5.2",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
-    },
-    "devDependencies": {
-        "@babel/core": "^7.22.8",
-        "@storybook/addon-actions": "^6.5.12",
-        "@storybook/addon-essentials": "^6.5.12",
-        "@storybook/addon-interactions": "^6.5.12",
-        "@storybook/addon-links": "^6.5.12",
-        "@storybook/builder-vite": "^0.2.3",
-        "@storybook/react": "^6.5.12",
-        "@storybook/testing-library": "^0.0.13",
-        "@types/react": "^18.2.14",
-        "@types/react-dom": "^18.2.6",
-        "@typescript-eslint/eslint-plugin": "^5.61.0",
-        "@typescript-eslint/parser": "^5.61.0",
-        "babel-loader": "^8.2.5",
-        "eslint": "^8.44.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",
-        "postcss-nested": "^6.0.0",
-        "postcss-normalize": "^10.0.1",
-        "postcss-preset-env": "^7.8.2",
-        "stylelint": "^14.13.0",
-        "stylelint-config-concentric": "^2.0.2",
-        "stylelint-config-recommended": "^9.0.0",
-        "typescript": "^5.1.6",
-        "unimported": "^1.22.0",
-        "vite": "^3.1.6"
-    }
+  "name": "@togglecorp/re-map-storybook",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "typecheck": "tsc",
+    "lint": "eslint ./stories --report-unused-disable-directives",
+    "check-unused": "unimported",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@mapbox/mapbox-gl-draw": "^1.4.3",
+    "@togglecorp/fujs": "^2.0.0",
+    "@togglecorp/re-map": "^0.3.0",
+    "chromatic": "^9.0.0",
+    "immer": "^10.0.3",
+    "maplibre-gl": "^3.5.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-vite": "^7.5.3",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@typescript-eslint/parser": "^5.61.0",
+    "eslint": "^8.44.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "postcss-nested": "^6.0.0",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^7.8.2",
+    "storybook": "^7.5.3",
+    "stylelint": "^14.13.0",
+    "stylelint-config-concentric": "^2.0.2",
+    "stylelint-config-recommended": "^9.0.0",
+    "typescript": "^5.1.6",
+    "unimported": "^1.22.0",
+    "vite": "^5.0.0"
+  }
 }