Re-initialize storybook so that build works

.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"
+ }
 }