diff --git a/web/.storybook/main.ts b/web/.storybook/main.ts index 7441ada59..2dbdca7d9 100644 --- a/web/.storybook/main.ts +++ b/web/.storybook/main.ts @@ -1,34 +1,19 @@ -// This file has been automatically migrated to valid ESM format by Storybook. -import { fileURLToPath } from "node:url"; -import { resolve, dirname } from "path"; +import { resolve } from "path"; import type { StorybookConfig } from "@storybook/react-vite"; import { mergeConfig } from "vite"; -const __filename = fileURLToPath(import.meta.url); -const __dirname = dirname(__filename); - const config: StorybookConfig = { stories: ["../src/**/*.stories.@(js|ts|tsx|mdx)"], - addons: [ - "@storybook/addon-onboarding", - "@storybook/addon-a11y", - "@storybook/addon-themes", - "@chromatic-com/storybook", - "@storybook/addon-docs", - ], - + addons: ["@storybook/addon-essentials", "@storybook/addon-styling"], framework: { name: "@storybook/react-vite", options: {}, }, - core: { disableTelemetry: true, }, - staticDirs: ["./public"], - viteFinal(config, { configType }) { return mergeConfig(config, { define: { @@ -61,29 +46,7 @@ const config: StorybookConfig = { find: "@reearth/core", replacement: resolve(__dirname, "..", "node_modules/@reearth/core"), }, - // cesium-mvt-imagery-provider: force resolution to the JS bundle, not the .d.ts types file - { - find: "cesium-mvt-imagery-provider", - replacement: resolve( - __dirname, - "..", - "node_modules/cesium-mvt-imagery-provider/dist/cesium-mvt-imagery-provider.mjs", - ), - }, - // quickjs-emscripten: force resolution to the JS bundle, not the .d.ts types file - { - find: "quickjs-emscripten-sync", - replacement: resolve( - __dirname, - "..", - "node_modules/quickjs-emscripten-sync/dist/quickjs-emscripten-sync.mjs", - ), - }, - // react-align: force resolution to the JS bundle, not the .d.ts types file - { - find: "react-align", - replacement: resolve(__dirname, "..", "node_modules/react-align/dist/react-align.mjs"), - }, + // quickjs-emscripten { find: "@reearth", replacement: resolve(__dirname, "..", "src"), @@ -94,10 +57,6 @@ const config: StorybookConfig = { }, ], }, - optimizeDeps: { - include: ["quickjs-emscripten-sync", "prop-types", "hoist-non-react-statics", "react-is"], - exclude: ["react-align"], - }, server: { watch: { // https://github.com/storybookjs/storybook/issues/22253#issuecomment-1673229400 @@ -106,11 +65,8 @@ const config: StorybookConfig = { }, }); }, - - docs: {}, - - typescript: { - reactDocgen: "react-docgen-typescript", + docs: { + autodocs: true, }, }; -export default config; +module.exports = config; diff --git a/web/.storybook/manager.ts b/web/.storybook/manager.ts new file mode 100644 index 000000000..3ea19f8bd --- /dev/null +++ b/web/.storybook/manager.ts @@ -0,0 +1,7 @@ +import { addons } from "@storybook/manager-api"; + +import theme from "./theme"; + +addons.setConfig({ + theme, +}); diff --git a/web/.storybook/preview.tsx b/web/.storybook/preview.tsx index 5a46a60f7..5a21934bb 100644 --- a/web/.storybook/preview.tsx +++ b/web/.storybook/preview.tsx @@ -7,8 +7,8 @@ import { Observable, } from "@apollo/client"; import { ThemeProvider } from "@emotion/react"; -import { withThemeFromJSXProvider } from "@storybook/addon-themes"; -import type { Preview, ReactRenderer } from "@storybook/react-vite"; +import { withThemeFromJSXProvider } from "@storybook/addon-styling"; +import type { Preview, ReactRenderer } from "@storybook/react"; import React from "react"; import classicDarkTheme from "../src/classic/theme/reearthTheme/darkTheme"; // temp classic imports @@ -33,18 +33,18 @@ const mockClient = new ApolloClient({ const preview: Preview = { parameters: { backgrounds: { - options: { - light: { name: "Light", value: "lightGrey" }, - dark: { name: "Dark", value: "ash" }, - }, + values: [ + { name: "Light", value: "lightGrey" }, + { name: "Dark", value: "ash" }, + ], }, layout: "fullscreen", controls: { expanded: true }, + actions: { argTypesRegex: "^on.*" }, docs: { theme, }, }, - decorators: [ withThemeFromJSXProvider({ themes: { @@ -73,8 +73,6 @@ const preview: Preview = { ); }, ], - - tags: ["autodocs"], }; export default preview; diff --git a/web/.storybook/theme.ts b/web/.storybook/theme.ts index 824be5628..2a97be104 100644 --- a/web/.storybook/theme.ts +++ b/web/.storybook/theme.ts @@ -1,4 +1,4 @@ -import { create } from "storybook/theming"; +import { create } from "@storybook/theming"; export default create({ base: "dark", diff --git a/web/.yarn/install-state.gz b/web/.yarn/install-state.gz index 81c7c6c81..1948898f5 100644 Binary files a/web/.yarn/install-state.gz and b/web/.yarn/install-state.gz differ diff --git a/web/package.json b/web/package.json index c9291b033..905f66540 100644 --- a/web/package.json +++ b/web/package.json @@ -1,216 +1,217 @@ { - "name": "@reearth/visualizer", - "version": "0.21.6", - "repository": "https://github.com/reearth/reearth-visualizer.git", - "author": "Re:Earth contributors ", - "license": "Apache-2.0", - "type": "module", - "private": true, - "resolutions": { - "@apollo/client": "3.8.1", - "@zip.js/zip.js": "2.7.48", - "@cesium/engine": "9.0.0", - "cookie": "^0.7.0", - "jsonpath-plus": "10.3.0", - "glob": "^11.1.0", - "js-yaml": "4.1.1" - }, - "scripts": { - "start": "yarn && vite", - "test": "vitest", - "coverage": "vitest --coverage", - "e2e": "playwright test", - "prepare": "cd .. && husky install web/.husky", - "build": "vite build", - "build:preview": "run-s build storybook:build", - "clean": "del coverage dist node_modules/.cache", - "check": "run-p type lint coverage", - "type": "tsc", - "lint": "eslint .", - "format": "eslint --fix .", - "storybook": "storybook dev -p 9001", - "storybook:build": "storybook build --quiet -o dist/storybook", - "gql": "run-s gql:beta gql:classic", - "gql:beta": "graphql-codegen", - "gql:classic": "graphql-codegen -c codegen-classic.ts", - "i18n": "i18next", - "gen:doc:plugin": "ts-node -O '{\"module\":\"CommonJS\"}' ./bin/pluginDoc", - "scan:lock": "sh ./bin/scan-yarn-lock.sh" - }, - "engines": { - "node": ">=20.11.0" - }, - "lint-staged": { - "**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}": "eslint --fix" - }, - "devDependencies": { - "@chromatic-com/storybook": "5.2.1", - "@emotion/jest": "11.11.0", - "@graphql-codegen/cli": "6.1.0", - "@graphql-codegen/client-preset": "5.2.0", - "@graphql-codegen/fragment-matcher": "6.0.0", - "@graphql-codegen/introspection": "5.0.0", - "@graphql-codegen/typescript": "5.0.5", - "@graphql-codegen/typescript-operations": "5.0.5", - "@graphql-codegen/typescript-react-apollo": "4.3.3", - "@playwright/test": "1.55.1", - "@rollup/plugin-yaml": "4.1.2", - "@storybook/addon-a11y": "10.4.0", - "@storybook/addon-docs": "10.4.0", - "@storybook/addon-onboarding": "10.4.0", - "@storybook/addon-themes": "10.4.0", - "@storybook/react-vite": "10.4.0", - "@testing-library/jest-dom": "6.1.4", - "@testing-library/react": "14.0.0", - "@testing-library/user-event": "14.5.1", - "@types/apollo-upload-client": "17.0.2", - "@types/carbon__colors": "10.31.2", - "@types/gapi.auth2": "0.0.59", - "@types/gapi.client": "1.0.7", - "@types/gapi.client.sheets": "4.0.20201031", - "@types/google.picker": "0.0.41", - "@types/js-md5": "0.7.1", - "@types/js-yaml": "^4.0.9", - "@types/lodash-es": "4.17.10", - "@types/mapbox__vector-tile": "1.3.3", - "@types/node": "22.13.14", - "@types/react": "18.3.12", - "@types/react-dom": "18.3.3", - "@types/react-ga": "2.3.0", - "@types/react-leaflet": "2.8.2", - "@types/styled-components": "5.1.29", - "@types/tinycolor2": "1.4.5", - "@types/uuid": "9.0.6", - "@vitejs/plugin-react-swc": "3.7.1", - "@vitest/coverage-v8": "4.0.14", - "@welldone-software/why-did-you-render": "7.0.1", - "del-cli": "5.1.0", - "dotenv": "16.3.1", - "eslint": "8.40.0", - "eslint-config-reearth": "0.2.2", - "eslint-plugin-playwright": "0.12.0", - "eslint-plugin-storybook": "10.4.0", - "husky": "8.0.3", - "i18next-parser": "9.3.0", - "jsdom": "22.1.0", - "lint-staged": "13.2.2", - "npm-run-all": "4.1.5", - "prettier": "2.8.8", - "read-env": "2.0.0", - "rollup": "4.22.4", - "rollup-plugin-visualizer": "6.0.3", - "storybook": "10.4.0", - "ts-node": "10.9.1", - "type-fest": "4.6.0", - "typescript": "5.0.4", - "typescript-styled-plugin": "0.18.3", - "vite": "5.4.21", - "vite-plugin-cesium": "1.2.23", - "vite-plugin-svgr": "4.5.0", - "vite-tsconfig-paths": "5.1.4", - "vitest": "4.0.14", - "web-streams-polyfill": "3.2.1" - }, - "dependencies": { - "@apollo/client": "3.8.1", - "@auth0/auth0-react": "2.2.2", - "@aws-amplify/ui-react": "6.13.1", - "@carbon/colors": "11.20.1", - "@cesium/engine": "9.0.0", - "@emotion/react": "11.11.1", - "@emotion/styled": "11.11.0", - "@floating-ui/react": "0.24.7", - "@lexical/react": "0.12.2", - "@mapbox/vector-tile": "1.3.1", - "@monaco-editor/react": "4.6.0", - "@popperjs/core": "2.11.8", - "@reearth/cesium-mvt-imagery-provider": "1.5.4", - "@reearth/core": "0.0.4", - "@rot1024/use-transition": "1.0.0", - "@sentry/browser": "7.119.1", - "@seznam/compose-react-refs": "1.0.6", - "@turf/turf": "7.3.5", - "@types/d3": "7.4.3", - "@types/escape-string-regexp": "2.0.1", - "@ungap/event-target": "0.2.4", - "@xstate/react": "3.2.1", - "apollo-link-sentry": "3.2.3", - "apollo-upload-client": "17.0.0", - "array-move": "4.0.0", - "aws-amplify": "6.15.8", - "axios": "1.12.0", - "cesium": "1.116.0", - "cesium-dnd": "1.1.0", - "cesium-mvt-imagery-provider": "1.4.0", - "core-js": "3.33.2", - "crypto-js": "4.2.0", - "csv-parse": "5.5.2", - "d3": "7.8.5", - "date-fns": "2.30.0", - "dayjs": "1.11.10", - "detect-browser": "5.3.0", - "escape-string-regexp": "5.0.0", - "fast-xml-parser": "4.3.2", - "formik": "2.4.5", - "framer-motion": "10.18.0", - "github-markdown-css": "5.4.0", - "graphiql": "2.4.4", - "graphql": "16.8.1", - "i18next": "22.4.15", - "i18next-browser-languagedetector": "7.0.1", - "jotai": "1.12.1", - "js-file-download": "0.4.12", - "js-md5": "0.7.3", - "js-yaml": "4.1.1", - "jsep": "1.3.8", - "jsonpath-plus": "10.3.0", - "jszip": "3.10.1", - "leaflet": "1.9.4", - "lexical": "0.12.2", - "localforage": "1.10.0", - "lodash-es": "4.17.21", - "lru-cache": "8.0.4", - "mini-svg-data-uri": "1.4.4", - "moment-timezone": "0.5.43", - "parse-domain": "7.0.1", - "proj4": "2.11.0", - "protomaps": "1.23.1", - "quickjs-emscripten": "0.23.0", - "quickjs-emscripten-sync": "1.5.2", - "rc-slider": "9.7.5", - "react": "18.3.1", - "react-accessible-accordion": "5.0.0", - "react-align": "2.2.3", - "react-beautiful-dnd": "13.1.1", - "react-colorful": "5.6.1", - "react-dnd": "16.0.1", - "react-dnd-html5-backend": "16.0.1", - "react-dom": "18.3.1", - "react-dropzone": "14.2.3", - "react-error-boundary": "4.0.11", - "react-ga": "3.3.1", - "react-ga4": "2.1.0", - "react-i18next": "12.2.2", - "react-inlinesvg": "3.0.2", - "react-leaflet": "4.2.1", - "react-markdown": "8.0.7", - "react-nl2br": "1.0.4", - "react-player": "2.13.0", - "react-popper": "2.3.0", - "react-router-dom": "6.21.0", - "react-spinners": "0.13.8", - "react-use": "17.4.0", - "react18-json-view": "0.2.7", - "remark-gfm": "3.0.1", - "resium": "1.17.3", - "suspend-react": "0.1.3", - "tinycolor2": "1.6.0", - "ts-easing": "0.2.0", - "use-callback-ref": "1.3.0", - "use-custom-compare": "1.4.0", - "use-file-input": "1.0.0", - "uuid": "9.0.1", - "xstate": "4.38.2" - }, - "packageManager": "yarn@4.10.2" + "name": "@reearth/visualizer", + "version": "0.21.6", + "repository": "https://github.com/reearth/reearth-visualizer.git", + "author": "Re:Earth contributors ", + "license": "Apache-2.0", + "type": "module", + "private": true, + "resolutions": { + "@apollo/client": "3.8.1", + "@zip.js/zip.js": "2.7.48", + "@cesium/engine": "9.0.0", + "cookie": "^0.7.0", + "jsonpath-plus": "10.3.0", + "glob": "^11.1.0", + "js-yaml": "4.1.1" + }, + "scripts": { + "start": "yarn && vite", + "test": "vitest", + "coverage": "vitest --coverage", + "e2e": "playwright test", + "prepare": "cd .. && husky install web/.husky", + "build": "vite build", + "build:preview": "run-s build storybook:build", + "clean": "del coverage dist node_modules/.cache", + "check": "run-p type lint coverage", + "type": "tsc", + "lint": "eslint .", + "format": "eslint --fix .", + "storybook": "storybook dev -p 9001", + "storybook:build": "storybook build --quiet -o dist/storybook", + "gql": "run-s gql:beta gql:classic", + "gql:beta": "graphql-codegen", + "gql:classic": "graphql-codegen -c codegen-classic.ts", + "i18n": "i18next", + "gen:doc:plugin": "ts-node -O '{\"module\":\"CommonJS\"}' ./bin/pluginDoc", + "scan:lock": "sh ./bin/scan-yarn-lock.sh" + }, + "engines": { + "node": ">=20.11.0" + }, + "lint-staged": { + "**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}": "eslint --fix" + }, + "devDependencies": { + "@emotion/jest": "11.11.0", + "@graphql-codegen/cli": "6.1.0", + "@graphql-codegen/client-preset": "5.2.0", + "@graphql-codegen/fragment-matcher": "6.0.0", + "@graphql-codegen/introspection": "5.0.0", + "@graphql-codegen/typescript": "5.0.5", + "@graphql-codegen/typescript-operations": "5.0.5", + "@graphql-codegen/typescript-react-apollo": "4.3.3", + "@playwright/test": "1.55.1", + "@rollup/plugin-yaml": "4.1.2", + "@storybook/addon-essentials": "7.5.2", + "@storybook/addon-styling": "1.3.7", + "@storybook/addons": "7.5.2", + "@storybook/manager-api": "7.5.2", + "@storybook/react": "7.5.2", + "@storybook/react-vite": "7.5.2", + "@storybook/theming": "7.5.2", + "@testing-library/jest-dom": "6.1.4", + "@testing-library/react": "14.0.0", + "@testing-library/user-event": "14.5.1", + "@types/apollo-upload-client": "17.0.2", + "@types/carbon__colors": "10.31.2", + "@types/gapi.auth2": "0.0.59", + "@types/gapi.client": "1.0.7", + "@types/gapi.client.sheets": "4.0.20201031", + "@types/google.picker": "0.0.41", + "@types/js-md5": "0.7.1", + "@types/js-yaml": "^4.0.9", + "@types/lodash-es": "4.17.10", + "@types/mapbox__vector-tile": "1.3.3", + "@types/node": "22.13.14", + "@types/react": "18.3.12", + "@types/react-dom": "18.3.3", + "@types/react-ga": "2.3.0", + "@types/react-leaflet": "2.8.2", + "@types/styled-components": "5.1.29", + "@types/tinycolor2": "1.4.5", + "@types/uuid": "9.0.6", + "@vitejs/plugin-react-swc": "3.7.1", + "@vitest/coverage-v8": "4.0.14", + "@welldone-software/why-did-you-render": "7.0.1", + "del-cli": "5.1.0", + "dotenv": "16.3.1", + "eslint": "8.40.0", + "eslint-config-reearth": "0.2.2", + "eslint-plugin-playwright": "0.12.0", + "eslint-plugin-storybook": "0.6.15", + "husky": "8.0.3", + "i18next-parser": "9.3.0", + "jsdom": "22.1.0", + "lint-staged": "13.2.2", + "npm-run-all": "4.1.5", + "prettier": "2.8.8", + "read-env": "2.0.0", + "rollup": "4.22.4", + "rollup-plugin-visualizer": "6.0.3", + "storybook": "7.5.2", + "ts-node": "10.9.1", + "type-fest": "4.6.0", + "typescript": "5.0.4", + "typescript-styled-plugin": "0.18.3", + "vite": "5.4.21", + "vite-plugin-cesium": "1.2.23", + "vite-plugin-svgr": "4.5.0", + "vite-tsconfig-paths": "5.1.4", + "vitest": "4.0.14", + "web-streams-polyfill": "3.2.1" + }, + "dependencies": { + "@apollo/client": "3.8.1", + "@auth0/auth0-react": "2.2.2", + "@aws-amplify/ui-react": "6.13.1", + "@carbon/colors": "11.20.1", + "@cesium/engine": "9.0.0", + "@emotion/react": "11.11.1", + "@emotion/styled": "11.11.0", + "@floating-ui/react": "0.24.7", + "@lexical/react": "0.12.2", + "@mapbox/vector-tile": "1.3.1", + "@monaco-editor/react": "4.6.0", + "@popperjs/core": "2.11.8", + "@reearth/cesium-mvt-imagery-provider": "1.5.4", + "@reearth/core": "0.0.4", + "@rot1024/use-transition": "1.0.0", + "@sentry/browser": "7.119.1", + "@seznam/compose-react-refs": "1.0.6", + "@turf/turf": "6.5.0", + "@types/d3": "7.4.3", + "@types/escape-string-regexp": "2.0.1", + "@ungap/event-target": "0.2.4", + "@xstate/react": "3.2.1", + "apollo-link-sentry": "3.2.3", + "apollo-upload-client": "17.0.0", + "array-move": "4.0.0", + "aws-amplify": "6.15.8", + "axios": "1.12.0", + "cesium": "1.116.0", + "cesium-dnd": "1.1.0", + "cesium-mvt-imagery-provider": "1.4.0", + "core-js": "3.33.2", + "crypto-js": "4.2.0", + "csv-parse": "5.5.2", + "d3": "7.8.5", + "date-fns": "2.30.0", + "dayjs": "1.11.10", + "detect-browser": "5.3.0", + "escape-string-regexp": "5.0.0", + "fast-xml-parser": "4.3.2", + "formik": "2.4.5", + "framer-motion": "10.18.0", + "github-markdown-css": "5.4.0", + "graphiql": "2.4.4", + "graphql": "16.8.1", + "i18next": "22.4.15", + "i18next-browser-languagedetector": "7.0.1", + "jotai": "1.12.1", + "js-file-download": "0.4.12", + "js-md5": "0.7.3", + "js-yaml": "4.1.1", + "jsep": "1.3.8", + "jsonpath-plus": "10.3.0", + "jszip": "3.10.1", + "leaflet": "1.9.4", + "lexical": "0.12.2", + "localforage": "1.10.0", + "lodash-es": "4.17.21", + "lru-cache": "8.0.4", + "mini-svg-data-uri": "1.4.4", + "moment-timezone": "0.5.43", + "parse-domain": "7.0.1", + "proj4": "2.11.0", + "protomaps": "1.23.1", + "quickjs-emscripten": "0.23.0", + "quickjs-emscripten-sync": "1.5.2", + "rc-slider": "9.7.5", + "react": "18.3.1", + "react-accessible-accordion": "5.0.0", + "react-align": "2.2.2", + "react-beautiful-dnd": "13.1.1", + "react-colorful": "5.6.1", + "react-dnd": "16.0.1", + "react-dnd-html5-backend": "16.0.1", + "react-dom": "18.3.1", + "react-dropzone": "14.2.3", + "react-error-boundary": "4.0.11", + "react-ga": "3.3.1", + "react-ga4": "2.1.0", + "react-i18next": "12.2.2", + "react-inlinesvg": "3.0.2", + "react-leaflet": "4.2.1", + "react-markdown": "8.0.7", + "react-nl2br": "1.0.4", + "react-player": "2.13.0", + "react-popper": "2.3.0", + "react-router-dom": "6.21.0", + "react-spinners": "0.13.8", + "react-use": "17.4.0", + "react18-json-view": "0.2.7", + "remark-gfm": "3.0.1", + "resium": "1.17.3", + "suspend-react": "0.1.3", + "tinycolor2": "1.6.0", + "ts-easing": "0.2.0", + "use-callback-ref": "1.3.0", + "use-custom-compare": "1.4.0", + "use-file-input": "1.0.0", + "uuid": "9.0.1", + "xstate": "4.38.2" + }, + "packageManager": "yarn@4.10.2" } diff --git a/web/src/beta/components/Accordion/index.stories.tsx b/web/src/beta/components/Accordion/index.stories.tsx index 286f2cd42..7dfbbf6ad 100644 --- a/web/src/beta/components/Accordion/index.stories.tsx +++ b/web/src/beta/components/Accordion/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import Accordion from "."; diff --git a/web/src/beta/components/Avatar/index.stories.tsx b/web/src/beta/components/Avatar/index.stories.tsx index 03231c898..dfa48d7f2 100644 --- a/web/src/beta/components/Avatar/index.stories.tsx +++ b/web/src/beta/components/Avatar/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import Avatar from "."; diff --git a/web/src/beta/components/Button/index.stories.tsx b/web/src/beta/components/Button/index.stories.tsx index c2a3e8f5b..54cb42cbd 100644 --- a/web/src/beta/components/Button/index.stories.tsx +++ b/web/src/beta/components/Button/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import Button from "."; diff --git a/web/src/beta/components/CatalogCard/index.stories.tsx b/web/src/beta/components/CatalogCard/index.stories.tsx index d9afdd7bf..518a5198d 100644 --- a/web/src/beta/components/CatalogCard/index.stories.tsx +++ b/web/src/beta/components/CatalogCard/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import PopoverMenuContent from "@reearth/beta/components/PopoverMenuContent"; diff --git a/web/src/beta/components/CheckboxField/index.stories.tsx b/web/src/beta/components/CheckboxField/index.stories.tsx index 6c67acdbe..9de39fb9c 100644 --- a/web/src/beta/components/CheckboxField/index.stories.tsx +++ b/web/src/beta/components/CheckboxField/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import CheckBoxField from "."; diff --git a/web/src/beta/components/Collapse/index.stories.tsx b/web/src/beta/components/Collapse/index.stories.tsx index d992f97ac..b1bb4ab54 100644 --- a/web/src/beta/components/Collapse/index.stories.tsx +++ b/web/src/beta/components/Collapse/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import Collapse from "."; diff --git a/web/src/beta/components/ContentPicker/index.stories.tsx b/web/src/beta/components/ContentPicker/index.stories.tsx index 7848afb23..76fb80afe 100644 --- a/web/src/beta/components/ContentPicker/index.stories.tsx +++ b/web/src/beta/components/ContentPicker/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from "@storybook/react-vite"; +import { Meta } from "@storybook/react"; import ContentPicker, { Item } from "."; diff --git a/web/src/beta/components/Divider/index.stories.tsx b/web/src/beta/components/Divider/index.stories.tsx index c270150ee..36ab855d1 100644 --- a/web/src/beta/components/Divider/index.stories.tsx +++ b/web/src/beta/components/Divider/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import Divider from "."; diff --git a/web/src/beta/components/DragAndDropList/index.stories.tsx b/web/src/beta/components/DragAndDropList/index.stories.tsx index dbe85dac0..971bb47f5 100644 --- a/web/src/beta/components/DragAndDropList/index.stories.tsx +++ b/web/src/beta/components/DragAndDropList/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import { useState } from "react"; import DragAndDropList from "."; diff --git a/web/src/beta/components/Flex/index.stories.tsx b/web/src/beta/components/Flex/index.stories.tsx index 265171af5..164a2bda2 100644 --- a/web/src/beta/components/Flex/index.stories.tsx +++ b/web/src/beta/components/Flex/index.stories.tsx @@ -1,12 +1,10 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, Story } from "@storybook/react"; -import Component from "."; +import Component, { Props } from "."; -const meta: Meta = { +export default { component: Component, -}; -export default meta; -type Story = StoryObj; +} as Meta; const ExampleDiv = () => ( <> @@ -15,36 +13,31 @@ const ExampleDiv = () => ( ); -export const SpaceBetween: Story = { - render: args => ( - - - - ), - args: { - justify: "space-between", - }, +export const SpaceBetween: Story = args => ( + + + +); +export const GapChildren: Story = args => ( + +
hoge
+
fuga
+ +); +export const DirectionVertical: Story = args => ( + + + +); + +SpaceBetween.args = { + justify: "space-between", }; -export const GapChildren: Story = { - render: args => ( - -
hoge
-
fuga
- - ), - args: { - gap: "20px", - }, +GapChildren.args = { + gap: "20px", }; -export const DirectionVertical: Story = { - render: args => ( - - - - ), - args: { - direction: "column", - }, +DirectionVertical.args = { + direction: "column", }; diff --git a/web/src/beta/components/FloatedPanel/index.stories.tsx b/web/src/beta/components/FloatedPanel/index.stories.tsx index 0d3b62c26..7f0e40b62 100644 --- a/web/src/beta/components/FloatedPanel/index.stories.tsx +++ b/web/src/beta/components/FloatedPanel/index.stories.tsx @@ -1,36 +1,35 @@ import { css } from "@emotion/react"; -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, Story } from "@storybook/react"; -import FloatedPanel from "."; +import FloatedPanel, { Props } from "."; -const meta: Meta = { +const meta: Meta = { component: FloatedPanel, }; + export default meta; -type Story = StoryObj; -export const Default: Story = { - args: { - visible: true, - children: "This is the content of the floated panel", - }, +const Template: Story = args => ; + +export const Default = Template.bind({}); +Default.args = { + visible: true, + children: "This is the content of the floated panel", }; -export const Hidden: Story = { - args: { - visible: false, - children: "This is the content of the floated panel", - }, +export const Hidden = Template.bind({}); +Hidden.args = { + visible: false, + children: "This is the content of the floated panel", }; -export const CustomStyles: Story = { - args: { - visible: true, - children: "This is the content of the floated panel", - styles: css` - background-color: lightblue; - color: white; - padding: 10px; - `, - }, +export const CustomStyles = Template.bind({}); +CustomStyles.args = { + visible: true, + children: "This is the content of the floated panel", + styles: css` + background-color: lightblue; + color: white; + padding: 10px; + `, }; diff --git a/web/src/beta/components/Icon/index.stories.tsx b/web/src/beta/components/Icon/index.stories.tsx index 3999abde5..1904d5949 100644 --- a/web/src/beta/components/Icon/index.stories.tsx +++ b/web/src/beta/components/Icon/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from "@storybook/react-vite"; +import { Meta } from "@storybook/react"; import Icon from "."; diff --git a/web/src/beta/components/InsertionBar/index.stories.tsx b/web/src/beta/components/InsertionBar/index.stories.tsx index 8079f75ad..9e98f9e32 100644 --- a/web/src/beta/components/InsertionBar/index.stories.tsx +++ b/web/src/beta/components/InsertionBar/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import InsertionBar, { Props } from "."; diff --git a/web/src/beta/components/InsertionButton/index.stories.tsx b/web/src/beta/components/InsertionButton/index.stories.tsx index 049c03b2a..116624477 100644 --- a/web/src/beta/components/InsertionButton/index.stories.tsx +++ b/web/src/beta/components/InsertionButton/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import InsertionButton from "."; diff --git a/web/src/beta/components/ListItem/index.stories.tsx b/web/src/beta/components/ListItem/index.stories.tsx index c23e38386..7dd20b61e 100644 --- a/web/src/beta/components/ListItem/index.stories.tsx +++ b/web/src/beta/components/ListItem/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import ActionItem from "./index"; diff --git a/web/src/beta/components/Loading/index.stories.tsx b/web/src/beta/components/Loading/index.stories.tsx index 588ba27b7..d4c7312b7 100644 --- a/web/src/beta/components/Loading/index.stories.tsx +++ b/web/src/beta/components/Loading/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import Loading from "."; diff --git a/web/src/beta/components/Markdown/index.stories.tsx b/web/src/beta/components/Markdown/index.stories.tsx index 73d1a0a30..f78faef79 100644 --- a/web/src/beta/components/Markdown/index.stories.tsx +++ b/web/src/beta/components/Markdown/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import { styled } from "@reearth/services/theme"; diff --git a/web/src/beta/components/Modal/index.stories.tsx b/web/src/beta/components/Modal/index.stories.tsx index 58f52a5a3..fc53f8fa9 100644 --- a/web/src/beta/components/Modal/index.stories.tsx +++ b/web/src/beta/components/Modal/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import { ReactNode } from "react"; import Button from "../Button"; diff --git a/web/src/beta/components/NotFound/index.stories.tsx b/web/src/beta/components/NotFound/index.stories.tsx index d925e13b8..d31272867 100644 --- a/web/src/beta/components/NotFound/index.stories.tsx +++ b/web/src/beta/components/NotFound/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from "@storybook/react-vite"; +import { Meta } from "@storybook/react"; import NotFound from "."; diff --git a/web/src/beta/components/Popover/index.stories.tsx b/web/src/beta/components/Popover/index.stories.tsx index 26fd0846e..4f7d51d52 100644 --- a/web/src/beta/components/Popover/index.stories.tsx +++ b/web/src/beta/components/Popover/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import * as Popover from "./"; diff --git a/web/src/beta/components/PopoverMenuContent/index.stories.tsx b/web/src/beta/components/PopoverMenuContent/index.stories.tsx index 26dffaf34..e7e616af5 100644 --- a/web/src/beta/components/PopoverMenuContent/index.stories.tsx +++ b/web/src/beta/components/PopoverMenuContent/index.stories.tsx @@ -1,5 +1,5 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; -import { action } from "storybook/actions"; +import { action } from "@storybook/addon-actions"; +import { Meta, StoryObj } from "@storybook/react"; import PopoverContent from "."; diff --git a/web/src/beta/components/RadioGroup/RadioBox/index.stories.tsx b/web/src/beta/components/RadioGroup/RadioBox/index.stories.tsx index 1b0a7be01..38e47fe01 100644 --- a/web/src/beta/components/RadioGroup/RadioBox/index.stories.tsx +++ b/web/src/beta/components/RadioGroup/RadioBox/index.stories.tsx @@ -1,6 +1,6 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { useArgs } from "@storybook/preview-api"; +import { Meta, StoryObj } from "@storybook/react"; import { useCallback } from "react"; -import { useArgs } from "storybook/preview-api"; import RadioBox from "."; diff --git a/web/src/beta/components/RadioGroup/index.stories.tsx b/web/src/beta/components/RadioGroup/index.stories.tsx index 93bdfd9a4..52bc11330 100644 --- a/web/src/beta/components/RadioGroup/index.stories.tsx +++ b/web/src/beta/components/RadioGroup/index.stories.tsx @@ -1,6 +1,6 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { useArgs } from "@storybook/preview-api"; +import { Meta, StoryObj } from "@storybook/react"; import { useCallback } from "react"; -import { useArgs } from "storybook/preview-api"; import RadioGroup from "./index"; diff --git a/web/src/beta/components/RangeSlider/index.stories.tsx b/web/src/beta/components/RangeSlider/index.stories.tsx index becce7735..a131764b9 100644 --- a/web/src/beta/components/RangeSlider/index.stories.tsx +++ b/web/src/beta/components/RangeSlider/index.stories.tsx @@ -1,6 +1,6 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { useArgs } from "@storybook/preview-api"; +import { Meta, StoryObj } from "@storybook/react"; import { useCallback } from "react"; -import { useArgs } from "storybook/preview-api"; import { styled } from "@reearth/services/theme"; diff --git a/web/src/beta/components/Resizable/index.stories.tsx b/web/src/beta/components/Resizable/index.stories.tsx index 6f72d6db4..0210be606 100644 --- a/web/src/beta/components/Resizable/index.stories.tsx +++ b/web/src/beta/components/Resizable/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import { ReactNode, CSSProperties, ComponentProps } from "react"; import Resizable from "."; diff --git a/web/src/beta/components/SettingsButtons/index.stories.tsx b/web/src/beta/components/SettingsButtons/index.stories.tsx index 9b1718bfa..2ad9e5183 100644 --- a/web/src/beta/components/SettingsButtons/index.stories.tsx +++ b/web/src/beta/components/SettingsButtons/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import React, { ReactNode } from "react"; import SettingsButtons from "."; diff --git a/web/src/beta/components/SidePanelSectionField/index.stories.tsx b/web/src/beta/components/SidePanelSectionField/index.stories.tsx index 5064a9d5f..899b13049 100644 --- a/web/src/beta/components/SidePanelSectionField/index.stories.tsx +++ b/web/src/beta/components/SidePanelSectionField/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import Component from "."; diff --git a/web/src/beta/components/Slide/index.stories.tsx b/web/src/beta/components/Slide/index.stories.tsx index c36d8da66..1edb0e715 100644 --- a/web/src/beta/components/Slide/index.stories.tsx +++ b/web/src/beta/components/Slide/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from "@storybook/react-vite"; +import { Meta } from "@storybook/react"; import { useState } from "react"; import { styled } from "@reearth/services/theme"; diff --git a/web/src/beta/components/Slider/index.stories.tsx b/web/src/beta/components/Slider/index.stories.tsx index 4063a8d67..f5af07fb7 100644 --- a/web/src/beta/components/Slider/index.stories.tsx +++ b/web/src/beta/components/Slider/index.stories.tsx @@ -1,6 +1,6 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { useArgs } from "@storybook/preview-api"; +import { Meta, StoryObj } from "@storybook/react"; import { useCallback } from "react"; -import { useArgs } from "storybook/preview-api"; import { styled } from "@reearth/services/theme"; diff --git a/web/src/beta/components/StorytellingPageSectionItem/index.stories.tsx b/web/src/beta/components/StorytellingPageSectionItem/index.stories.tsx index 08faaf4f6..467a02df3 100644 --- a/web/src/beta/components/StorytellingPageSectionItem/index.stories.tsx +++ b/web/src/beta/components/StorytellingPageSectionItem/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import StorytellingPageSectionItem from "."; diff --git a/web/src/beta/components/SubTabButtonList/index.stories.tsx b/web/src/beta/components/SubTabButtonList/index.stories.tsx index 8f07b2b28..2a0aef0aa 100644 --- a/web/src/beta/components/SubTabButtonList/index.stories.tsx +++ b/web/src/beta/components/SubTabButtonList/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import SubTabButtonList from "."; diff --git a/web/src/beta/components/SwitchButtonList/index.stories.tsx b/web/src/beta/components/SwitchButtonList/index.stories.tsx index d70079249..7f06e303a 100644 --- a/web/src/beta/components/SwitchButtonList/index.stories.tsx +++ b/web/src/beta/components/SwitchButtonList/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import SwitchButtonList from "."; diff --git a/web/src/beta/components/TabButton/index.stories.tsx b/web/src/beta/components/TabButton/index.stories.tsx index 8b28b9eae..87b79dafb 100644 --- a/web/src/beta/components/TabButton/index.stories.tsx +++ b/web/src/beta/components/TabButton/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import TabButton from "."; diff --git a/web/src/beta/components/TabMenu/index.stories.tsx b/web/src/beta/components/TabMenu/index.stories.tsx index 2a4fea00e..a19375876 100644 --- a/web/src/beta/components/TabMenu/index.stories.tsx +++ b/web/src/beta/components/TabMenu/index.stories.tsx @@ -1,6 +1,6 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { useArgs } from "@storybook/preview-api"; +import { Meta, StoryObj } from "@storybook/react"; import { ReactNode, CSSProperties } from "react"; -import { useArgs } from "storybook/preview-api"; import Button from "@reearth/beta/components/Button"; import Resizable from "@reearth/beta/components/Resizable"; diff --git a/web/src/beta/components/Text/index.stories.tsx b/web/src/beta/components/Text/index.stories.tsx index ccb4da291..2a7b890e5 100644 --- a/web/src/beta/components/Text/index.stories.tsx +++ b/web/src/beta/components/Text/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import Text from "."; diff --git a/web/src/beta/components/Toggle/index.stories.tsx b/web/src/beta/components/Toggle/index.stories.tsx index 1c087fa15..6215c19e5 100644 --- a/web/src/beta/components/Toggle/index.stories.tsx +++ b/web/src/beta/components/Toggle/index.stories.tsx @@ -1,6 +1,6 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { useArgs } from "@storybook/preview-api"; +import { Meta, StoryObj } from "@storybook/react"; import { useCallback } from "react"; -import { useArgs } from "storybook/preview-api"; import { styled } from "@reearth/services/theme"; diff --git a/web/src/beta/components/fields/CameraField/index.stories.tsx b/web/src/beta/components/fields/CameraField/index.stories.tsx index cafde4f37..a2f45ff4d 100644 --- a/web/src/beta/components/fields/CameraField/index.stories.tsx +++ b/web/src/beta/components/fields/CameraField/index.stories.tsx @@ -1,6 +1,6 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { useArgs } from "@storybook/preview-api"; +import { Meta, StoryObj } from "@storybook/react"; import { useCallback } from "react"; -import { useArgs } from "storybook/preview-api"; import { Camera } from "@reearth/beta/utils/value"; import { styled } from "@reearth/services/theme"; diff --git a/web/src/beta/components/fields/ColorField/index.stories.tsx b/web/src/beta/components/fields/ColorField/index.stories.tsx index f46e6883a..8ff395bf1 100644 --- a/web/src/beta/components/fields/ColorField/index.stories.tsx +++ b/web/src/beta/components/fields/ColorField/index.stories.tsx @@ -1,5 +1,5 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; -import { action } from "storybook/actions"; +import { action } from "@storybook/addon-actions"; +import { Meta, StoryObj } from "@storybook/react"; import ColorField from "."; diff --git a/web/src/beta/components/fields/DateTimeField/index.stories.tsx b/web/src/beta/components/fields/DateTimeField/index.stories.tsx index f29c484e4..8d924477b 100644 --- a/web/src/beta/components/fields/DateTimeField/index.stories.tsx +++ b/web/src/beta/components/fields/DateTimeField/index.stories.tsx @@ -1,5 +1,5 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; -import { action } from "storybook/actions"; +import { action } from "@storybook/addon-actions"; +import { Meta, StoryObj } from "@storybook/react"; import DateTimeField from "."; diff --git a/web/src/beta/components/fields/ListField/index.stories.tsx b/web/src/beta/components/fields/ListField/index.stories.tsx index a72957076..9dba7cae2 100644 --- a/web/src/beta/components/fields/ListField/index.stories.tsx +++ b/web/src/beta/components/fields/ListField/index.stories.tsx @@ -1,6 +1,6 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { useArgs } from "@storybook/preview-api"; +import { Meta, StoryObj } from "@storybook/react"; import { useCallback } from "react"; -import { useArgs } from "storybook/preview-api"; import { styled } from "@reearth/services/theme"; diff --git a/web/src/beta/components/fields/LocationField/index.stories.tsx b/web/src/beta/components/fields/LocationField/index.stories.tsx index 65a663ffd..10a6a6736 100644 --- a/web/src/beta/components/fields/LocationField/index.stories.tsx +++ b/web/src/beta/components/fields/LocationField/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import LocationField from "."; diff --git a/web/src/beta/components/fields/NumberField/index.stories.tsx b/web/src/beta/components/fields/NumberField/index.stories.tsx index 32e16fa2d..1bb14affd 100644 --- a/web/src/beta/components/fields/NumberField/index.stories.tsx +++ b/web/src/beta/components/fields/NumberField/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import NumberField, { Props } from "."; diff --git a/web/src/beta/components/fields/Property/PropertyList/index.stories.tsx b/web/src/beta/components/fields/Property/PropertyList/index.stories.tsx index d66b04251..0eeb5896e 100644 --- a/web/src/beta/components/fields/Property/PropertyList/index.stories.tsx +++ b/web/src/beta/components/fields/Property/PropertyList/index.stories.tsx @@ -1,6 +1,6 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { useArgs } from "@storybook/preview-api"; +import { Meta, StoryObj } from "@storybook/react"; import { useCallback } from "react"; -import { useArgs } from "storybook/preview-api"; import { styled } from "@reearth/services/theme"; diff --git a/web/src/beta/components/fields/RangeField/index.stories.tsx b/web/src/beta/components/fields/RangeField/index.stories.tsx index e7a1652f1..0403b3706 100644 --- a/web/src/beta/components/fields/RangeField/index.stories.tsx +++ b/web/src/beta/components/fields/RangeField/index.stories.tsx @@ -1,6 +1,6 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { useArgs } from "@storybook/preview-api"; +import { Meta, StoryObj } from "@storybook/react"; import { useCallback } from "react"; -import { useArgs } from "storybook/preview-api"; import { styled } from "@reearth/services/theme"; diff --git a/web/src/beta/components/fields/SelectField/index.stories.tsx b/web/src/beta/components/fields/SelectField/index.stories.tsx index 762ebad99..cfeb83b4d 100644 --- a/web/src/beta/components/fields/SelectField/index.stories.tsx +++ b/web/src/beta/components/fields/SelectField/index.stories.tsx @@ -1,6 +1,6 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { useArgs } from "@storybook/preview-api"; +import { Meta, StoryObj } from "@storybook/react"; import { useCallback } from "react"; -import { useArgs } from "storybook/preview-api"; import { styled } from "@reearth/services/theme"; diff --git a/web/src/beta/components/fields/SliderField/index.stories.tsx b/web/src/beta/components/fields/SliderField/index.stories.tsx index ddaf2d23e..249a2cd54 100644 --- a/web/src/beta/components/fields/SliderField/index.stories.tsx +++ b/web/src/beta/components/fields/SliderField/index.stories.tsx @@ -1,6 +1,6 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { useArgs } from "@storybook/preview-api"; +import { Meta, StoryObj } from "@storybook/react"; import { useCallback } from "react"; -import { useArgs } from "storybook/preview-api"; import { styled } from "@reearth/services/theme"; diff --git a/web/src/beta/components/fields/SpacingInput/index.stories.tsx b/web/src/beta/components/fields/SpacingInput/index.stories.tsx index d3da1315a..a5ae5dc7e 100644 --- a/web/src/beta/components/fields/SpacingInput/index.stories.tsx +++ b/web/src/beta/components/fields/SpacingInput/index.stories.tsx @@ -1,29 +1,27 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, Story } from "@storybook/react"; import SpacingInput from "./index"; -const meta: Meta = { +export default { component: SpacingInput, -}; -export default meta; -type Story = StoryObj; +} as Meta; -export const Default: Story = { - args: { - name: "Padding", - description: "Adjust the padding values", - }, +const Template: Story = args => ; + +export const Default = Template.bind({}); +Default.args = { + name: "Padding", + description: "Adjust the padding values", }; -export const WithValues: Story = { - args: { - name: "Padding", - description: "Adjust the padding values", - value: { - top: 10, - left: 20, - right: 30, - bottom: 40, - }, +export const WithValues = Template.bind({}); +WithValues.args = { + name: "Padding", + description: "Adjust the padding values", + value: { + top: "10", + left: "20", + right: "30", + bottom: "40", }, }; diff --git a/web/src/beta/components/fields/TextAreaField/index.stories.tsx b/web/src/beta/components/fields/TextAreaField/index.stories.tsx index 3c5ce9d94..e7ead5521 100644 --- a/web/src/beta/components/fields/TextAreaField/index.stories.tsx +++ b/web/src/beta/components/fields/TextAreaField/index.stories.tsx @@ -1,6 +1,6 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { useArgs } from "@storybook/preview-api"; +import { Meta, StoryObj } from "@storybook/react"; import { useCallback } from "react"; -import { useArgs } from "storybook/preview-api"; import { styled } from "@reearth/services/theme"; diff --git a/web/src/beta/components/fields/TextField/index.stories.tsx b/web/src/beta/components/fields/TextField/index.stories.tsx index 0325e01c2..e8a4d4164 100644 --- a/web/src/beta/components/fields/TextField/index.stories.tsx +++ b/web/src/beta/components/fields/TextField/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import TextField, { Props } from "./index"; diff --git a/web/src/beta/components/fields/ToggleField/index.stories.tsx b/web/src/beta/components/fields/ToggleField/index.stories.tsx index a8bf28bb2..9e704f49a 100644 --- a/web/src/beta/components/fields/ToggleField/index.stories.tsx +++ b/web/src/beta/components/fields/ToggleField/index.stories.tsx @@ -1,6 +1,6 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { useArgs } from "@storybook/preview-api"; +import { Meta, StoryObj } from "@storybook/react"; import { useCallback } from "react"; -import { useArgs } from "storybook/preview-api"; import { styled } from "@reearth/services/theme"; diff --git a/web/src/beta/components/fields/URLField/index.stories.tsx b/web/src/beta/components/fields/URLField/index.stories.tsx index c4af10ee2..941266716 100644 --- a/web/src/beta/components/fields/URLField/index.stories.tsx +++ b/web/src/beta/components/fields/URLField/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import URLField, { Props } from "."; diff --git a/web/src/beta/components/fields/common/NumberInput/index.stories.tsx b/web/src/beta/components/fields/common/NumberInput/index.stories.tsx index 5b02875d2..36769d59d 100644 --- a/web/src/beta/components/fields/common/NumberInput/index.stories.tsx +++ b/web/src/beta/components/fields/common/NumberInput/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import NumberInput, { Props } from "./index"; diff --git a/web/src/beta/components/fields/common/TextInput/index.stories.tsx b/web/src/beta/components/fields/common/TextInput/index.stories.tsx index 25f54e20b..8cf977bd8 100644 --- a/web/src/beta/components/fields/common/TextInput/index.stories.tsx +++ b/web/src/beta/components/fields/common/TextInput/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import TextInput, { Props } from "./index"; diff --git a/web/src/beta/features/Editor/DataSourceManager/index.stories.tsx b/web/src/beta/features/Editor/DataSourceManager/index.stories.tsx index 06dab1597..573dddb85 100644 --- a/web/src/beta/features/Editor/DataSourceManager/index.stories.tsx +++ b/web/src/beta/features/Editor/DataSourceManager/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import DataSourceManager from "."; diff --git a/web/src/beta/features/Editor/SidePanel/index.stories.tsx b/web/src/beta/features/Editor/SidePanel/index.stories.tsx index 2143d3d72..a0da5a20c 100644 --- a/web/src/beta/features/Editor/SidePanel/index.stories.tsx +++ b/web/src/beta/features/Editor/SidePanel/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import SidePanel from "."; diff --git a/web/src/beta/features/Editor/SketchLayerManager/index.stories.tsx b/web/src/beta/features/Editor/SketchLayerManager/index.stories.tsx index 8230b5ff6..18469128b 100644 --- a/web/src/beta/features/Editor/SketchLayerManager/index.stories.tsx +++ b/web/src/beta/features/Editor/SketchLayerManager/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import SketchLayerManager from "."; diff --git a/web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/index.stories.tsx b/web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/index.stories.tsx index fd7fc8fa3..2b5922113 100644 --- a/web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/index.stories.tsx +++ b/web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import type { LayerNameUpdateProps, diff --git a/web/src/beta/features/Editor/tabs/story/LeftPanel/Action/index.stories.tsx b/web/src/beta/features/Editor/tabs/story/LeftPanel/Action/index.stories.tsx index c774eaf69..a1a837d4d 100644 --- a/web/src/beta/features/Editor/tabs/story/LeftPanel/Action/index.stories.tsx +++ b/web/src/beta/features/Editor/tabs/story/LeftPanel/Action/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import ActionItem from "."; diff --git a/web/src/beta/features/Editor/tabs/story/LeftPanel/ContentPage/index.stories.tsx b/web/src/beta/features/Editor/tabs/story/LeftPanel/ContentPage/index.stories.tsx index d54fdf78b..051ab9e03 100644 --- a/web/src/beta/features/Editor/tabs/story/LeftPanel/ContentPage/index.stories.tsx +++ b/web/src/beta/features/Editor/tabs/story/LeftPanel/ContentPage/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import ContentPage from "."; diff --git a/web/src/beta/features/Editor/tabs/story/LeftPanel/ContentStory/index.stories.tsx b/web/src/beta/features/Editor/tabs/story/LeftPanel/ContentStory/index.stories.tsx index 6afa1a8a8..0e2fdc6df 100644 --- a/web/src/beta/features/Editor/tabs/story/LeftPanel/ContentStory/index.stories.tsx +++ b/web/src/beta/features/Editor/tabs/story/LeftPanel/ContentStory/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import ContentStory from "."; diff --git a/web/src/beta/features/Editor/tabs/story/LeftPanel/PageItemWrapper/index.stories.tsx b/web/src/beta/features/Editor/tabs/story/LeftPanel/PageItemWrapper/index.stories.tsx index 374eca7c7..e70549b40 100644 --- a/web/src/beta/features/Editor/tabs/story/LeftPanel/PageItemWrapper/index.stories.tsx +++ b/web/src/beta/features/Editor/tabs/story/LeftPanel/PageItemWrapper/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import ActionItem from "./index"; diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginAccordion/index.stories.tsx b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginAccordion/index.stories.tsx index 0d90645a9..0c244bc91 100644 --- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginAccordion/index.stories.tsx +++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginAccordion/index.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, StoryObj } from "@storybook/react"; import PluginAccordion from "."; diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/index.stories.tsx index 0003c8d58..8abecaeec 100644 --- a/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/index.stories.tsx +++ b/web/src/beta/features/Visualizer/Crust/Plugins/Plugin/index.stories.tsx @@ -1,40 +1,36 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, Story } from "@storybook/react"; import { Provider } from "../storybook"; -import Component from "."; +import Component, { Props } from "."; -const meta: Meta = { +export default { component: Component, parameters: { actions: { argTypesRegex: "^on.*" } }, -}; -export default meta; -type Story = StoryObj; +} as Meta; + +export const Default: Story = args => ( + +
+ +
+ +); -export const Default: Story = { - render: args => ( - -
- -
- - ), - args: { - pluginId: "plugins", - extensionId: "plugin", - pluginBaseUrl: "", - visible: true, - }, +Default.args = { + pluginId: "plugins", + extensionId: "plugin", + pluginBaseUrl: "", + visible: true, }; -export const Headless: Story = { - render: args => ( - - - - ), - args: { - sourceCode: `console.log("hello world");`, - visible: true, - }, +export const Headless: Story = args => ( + + + +); + +Headless.args = { + sourceCode: `console.log("hello world");`, + visible: true, }; diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.stories.tsx index fdc0925fc..443214c9a 100644 --- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.stories.tsx +++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/IFrame/index.stories.tsx @@ -1,20 +1,18 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, Story } from "@storybook/react"; import { useRef } from "react"; -import Component, { Ref } from "."; +import Component, { Props, Ref } from "."; -const meta: Meta = { +export default { component: Component, argTypes: { onLoad: { action: "onLoad" }, onMessage: { action: "onMessage" }, }, // parameters: { actions: { argTypesRegex: "^on.*" } }, -}; -export default meta; -type Story = StoryObj; +} as Meta; -const DefaultRenderer = (args: Story["args"]) => { +export const Default: Story = args => { const ref = useRef(null); const postMessage = () => { ref.current?.postMessage({ foo: new Date().toISOString() }); @@ -29,17 +27,15 @@ const DefaultRenderer = (args: Story["args"]) => { ); }; -export const Default: Story = { - render: args => , - args: { - visible: true, - iFrameProps: { - style: { - width: "400px", - height: "300px", - }, +Default.args = { + visible: true, + iFrameProps: { + style: { + width: "400px", + height: "300px", }, - html: `

iframe

`, - }, }; diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/index.stories.tsx index fdc0925fc..443214c9a 100644 --- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/index.stories.tsx +++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/SafeIFrame/index.stories.tsx @@ -1,20 +1,18 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, Story } from "@storybook/react"; import { useRef } from "react"; -import Component, { Ref } from "."; +import Component, { Props, Ref } from "."; -const meta: Meta = { +export default { component: Component, argTypes: { onLoad: { action: "onLoad" }, onMessage: { action: "onMessage" }, }, // parameters: { actions: { argTypesRegex: "^on.*" } }, -}; -export default meta; -type Story = StoryObj; +} as Meta; -const DefaultRenderer = (args: Story["args"]) => { +export const Default: Story = args => { const ref = useRef(null); const postMessage = () => { ref.current?.postMessage({ foo: new Date().toISOString() }); @@ -29,17 +27,15 @@ const DefaultRenderer = (args: Story["args"]) => { ); }; -export const Default: Story = { - render: args => , - args: { - visible: true, - iFrameProps: { - style: { - width: "400px", - height: "300px", - }, +Default.args = { + visible: true, + iFrameProps: { + style: { + width: "400px", + height: "300px", }, - html: `

iframe

`, - }, }; diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/index.stories.tsx index 89276b197..93015b4a4 100644 --- a/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/index.stories.tsx +++ b/web/src/beta/features/Visualizer/Crust/Plugins/PluginFrame/index.stories.tsx @@ -1,100 +1,97 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { action } from "@storybook/addon-actions"; +import { Meta, Story } from "@storybook/react"; import { useRef } from "react"; -import { action } from "storybook/actions"; -import Component, { Ref } from "."; +import Component, { Props, Ref } from "."; -const meta: Meta = { +export default { component: Component, parameters: { actions: { argTypesRegex: "^on.*" } }, -}; -export default meta; -type Story = StoryObj; +} as Meta; + +export const Default: Story = args => ; let cb: (message: any) => void | undefined; -export const Default: Story = { - args: { - src: `/plugins/plugin.js`, - uiVisible: true, - iFrameProps: { - style: { - width: "300px", - height: "300px", - backgroundColor: "#fff", - }, +Default.args = { + src: `/plugins/plugin.js`, + uiVisible: true, + iFrameProps: { + style: { + width: "300px", + height: "300px", + backgroundColor: "#fff", }, - exposed: ({ main: { render, postMessage } }) => ({ - console: { - log: action("console.log"), + }, + exposed: ({ main: { render, postMessage } }) => ({ + console: { + log: action("console.log"), + }, + reearth: { + on(type: string, value: (message: any) => void | undefined) { + if (type === "message") { + cb = value; + } }, - reearth: { - on(type: string, value: (message: any) => void | undefined) { - if (type === "message") { - cb = value; - } - }, - ui: { - show: render, - postMessage, - }, + ui: { + show: render, + postMessage, }, - }), - onMessage: (message: any) => { - action("onMessage")(message); - return cb?.(message); }, + }), + onMessage: (message: any) => { + action("onMessage")(message); + return cb?.(message); }, }; -export const HiddenIFrame: Story = { - args: { - src: `/plugins/hidden.js`, - uiVisible: true, - iFrameProps: { - style: { - width: "300px", - height: "300px", - backgroundColor: "#fff", - }, +export const HiddenIFrame: Story = args => ; + +HiddenIFrame.args = { + src: `/plugins/hidden.js`, + uiVisible: true, + iFrameProps: { + style: { + width: "300px", + height: "300px", + backgroundColor: "#fff", }, - exposed: ({ main: { render, postMessage } }) => ({ - console: { - log: action("console.log"), + }, + exposed: ({ main: { render, postMessage } }) => ({ + console: { + log: action("console.log"), + }, + reearth: { + on(type: string, value: (message: any) => void | undefined) { + if (type === "message") { + cb = value; + } }, - reearth: { - on(type: string, value: (message: any) => void | undefined) { - if (type === "message") { - cb = value; - } - }, - ui: { - show: render, - postMessage, - }, + ui: { + show: render, + postMessage, }, - }), - onMessage: (message: any) => { - action("onMessage")(message); - return cb?.(message); }, + }), + onMessage: (message: any) => { + action("onMessage")(message); + return cb?.(message); }, }; -export const SourceCode: Story = { - args: { - sourceCode: `console.log("Hello")`, - exposed: { - console: { - log: action("console.log"), - }, +export const SourceCode: Story = args => ; + +SourceCode.args = { + sourceCode: `console.log("Hello")`, + exposed: { + console: { + log: action("console.log"), }, }, }; -const AutoResizeRenderer = (args: Story["args"]) => { +export const AutoResize: Story = args => { const ref = useRef(null); - return ( { ); }; -export const AutoResize: Story = { - render: args => , - args: { - sourceCode: ` +AutoResize.args = { + sourceCode: ` render(\`

@@ -135,8 +130,7 @@ export const AutoResize: Story = { \`); onmessage = msg => { resize(msg.width, msg.height); }; `, - autoResize: "both", - uiVisible: true, - exposed: ({ main: { render, resize } }) => ({ render, resize }), - }, + autoResize: "both", + uiVisible: true, + exposed: ({ main: { render, resize } }) => ({ render, resize }), }; diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/context.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/context.tsx index 736ee0f21..54e86295d 100644 --- a/web/src/beta/features/Visualizer/Crust/Plugins/context.tsx +++ b/web/src/beta/features/Visualizer/Crust/Plugins/context.tsx @@ -2,7 +2,7 @@ import { createContext, FC, PropsWithChildren, useContext } from "react"; import type { Context } from "./types"; -export const PluginContext = createContext(undefined); +const PluginContext = createContext(undefined); export const PluginProvider: FC> = ({ children, value }) => ( {children} diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/storybook.tsx b/web/src/beta/features/Visualizer/Crust/Plugins/storybook.tsx index ad03aa8c7..c4db89443 100644 --- a/web/src/beta/features/Visualizer/Crust/Plugins/storybook.tsx +++ b/web/src/beta/features/Visualizer/Crust/Plugins/storybook.tsx @@ -1,5 +1,5 @@ +import { action } from "@storybook/addon-actions"; import type { ReactNode } from "react"; -import { fn } from "storybook/test"; import { Layer } from "@reearth/core"; @@ -220,8 +220,12 @@ export const context: Context = { }; function act any>( - _name: string, + name: string, mock?: M, ): (...args: T) => ReturnType { - return fn(mock) as unknown as (...args: T) => ReturnType; + const a = action(`Common API: ${name}`); + return (...args) => { + a(...args); + return mock?.(...args); + }; } diff --git a/web/src/beta/features/Visualizer/Crust/Plugins/useExperimentalSandbox.ts b/web/src/beta/features/Visualizer/Crust/Plugins/useExperimentalSandbox.ts index b8d6b6096..e91eae436 100644 --- a/web/src/beta/features/Visualizer/Crust/Plugins/useExperimentalSandbox.ts +++ b/web/src/beta/features/Visualizer/Crust/Plugins/useExperimentalSandbox.ts @@ -1,8 +1,6 @@ -import { useContext } from "react"; - -import { PluginContext } from "./context"; +import { usePluginContext } from "./context"; export default (): boolean => { - const ctx = useContext(PluginContext); - return !!ctx?.useExperimentalSandbox; + const ctx = usePluginContext(); + return !!ctx.useExperimentalSandbox; }; diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/index.stories.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/index.stories.tsx index aefd12d4e..789a44b48 100644 --- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/index.stories.tsx +++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/index.stories.tsx @@ -1,52 +1,50 @@ -import { Meta, StoryObj } from "@storybook/react-vite"; +import { Meta, Story } from "@storybook/react"; import { Math as CesiumMath } from "cesium"; import { contextEvents } from "../../storybook"; -import Button from "."; +import Button, { Props } from "."; -const meta: Meta = { +export default { component: Button, parameters: { actions: { argTypesRegex: "^on.*" } }, -}; -export default meta; -type Story = StoryObj; +} as Meta; -export const Default: Story = { - args: { - widget: { - id: "", - property: { - menu: [ - { - id: "hoge", - menuTitle: "Hoge", - menuType: "camera", - menuCamera: { - lat: 0, - lng: 0, - height: 1000, - fov: CesiumMath.toRadians(60), - heading: 0, - pitch: 0, - roll: 0, - }, - }, - { - id: "hoge", - menuType: "border", - }, - { - id: "GitHub", - menuType: "link", - menuTitle: "GitHub", - menuLink: "https://github.com", +export const Default: Story = args =>