diff --git a/packages/shapes/.storybook/main.ts b/packages/shapes/.storybook/main.ts new file mode 100644 index 00000000..a8e9cd1b --- /dev/null +++ b/packages/shapes/.storybook/main.ts @@ -0,0 +1,37 @@ +import type { StorybookConfig } from "@storybook/vue3-vite"; +import vue from "@vitejs/plugin-vue"; +import path from "node:path"; +import { mergeConfig } from "vite"; + +const r = (...p: string[]) => path.resolve(__dirname, ...p); + +const config: StorybookConfig = { + stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], + addons: [ + "@chromatic-com/storybook", + "@storybook/addon-docs", + "@storybook/addon-a11y", + ], + framework: { + name: "@storybook/vue3-vite", + options: {}, + }, + viteFinal: async (config) => { + return mergeConfig(config, { + plugins: [vue()], + resolve: { + alias: { + "@magic/graph": r("../../graph/src"), + "@magic/utils": r("../../utils/src"), + "@magic/ui": r("../../ui/src"), + "@magic/shapes": r("../../shapes/src"), + "@magic/canvas": r("../../canvas/src"), + "@magic/products": r("../../products/src"), + vue: r("../../../node_modules/vue"), + primevue: r("../../../node_modules/primevue"), + }, + }, + }); + }, +}; +export default config; diff --git a/packages/shapes/.storybook/preview.ts b/packages/shapes/.storybook/preview.ts new file mode 100644 index 00000000..18167ed1 --- /dev/null +++ b/packages/shapes/.storybook/preview.ts @@ -0,0 +1,14 @@ +import type { Preview } from '@storybook/vue3-vite' + +const preview: Preview = { + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, +}; + +export default preview; \ No newline at end of file diff --git a/packages/shapes/package.json b/packages/shapes/package.json index 7d2e4407..7724cfab 100644 --- a/packages/shapes/package.json +++ b/packages/shapes/package.json @@ -2,11 +2,14 @@ "name": "@magic/shapes", "version": "1.0.0", "private": true, + "type": "module", "exports": { "./*": "./src/*" }, "scripts": { - "build:types": "tsc -b ." + "build:types": "tsc -b .", + "storybook": "storybook dev -p 6006", + "build-storybook": "storybook build" }, "peerDependencies": { "vue": "^3.5.18" @@ -17,8 +20,11 @@ "tinycolor2": "^1.6.0" }, "devDependencies": { + "storybook": "^9.0.1", "@storybook/vue3-vite": "^9.0.1", "@types/tinycolor2": "^1.4.6", + "@vitejs/plugin-vue": "^5.0.5", + "vite": "^7.1.10", "vue": "^3.5.18" } } diff --git a/packages/shapes/src/shapes/ellipse/elllipse.stories.ts b/packages/shapes/src/shapes/ellipse/elllipse.stories.ts index 441a41df..b7db6f6b 100644 --- a/packages/shapes/src/shapes/ellipse/elllipse.stories.ts +++ b/packages/shapes/src/shapes/ellipse/elllipse.stories.ts @@ -2,17 +2,17 @@ import { DEFAULT_STORIES, DOC_MARKING_DEFAULTS, createDocComponent, -} from '../../docs'; -import type { Meta, StoryObj } from '@storybook/vue3-vite'; +} from "../../docs"; +import type { Meta, StoryObj } from "@storybook/vue3-vite"; -import { ellipse } from '.'; -import { ELLIPSE_SCHEMA_DEFAULTS } from './defaults'; -import type { EllipseSchema } from './types'; +import { ellipse } from "."; +import { ELLIPSE_SCHEMA_DEFAULTS } from "./defaults"; +import type { EllipseSchema } from "./types"; const Ellipse = createDocComponent(ellipse); const meta = { - title: 'Shapes/Ellipse', + title: "Shapes/Ellipse", component: Ellipse, args: { ...ELLIPSE_SCHEMA_DEFAULTS, diff --git a/packages/shapes/src/shapes/ellipse/hitbox.ts b/packages/shapes/src/shapes/ellipse/hitbox.ts index 09f2f8f3..7fdb99a1 100644 --- a/packages/shapes/src/shapes/ellipse/hitbox.ts +++ b/packages/shapes/src/shapes/ellipse/hitbox.ts @@ -1,10 +1,10 @@ import { areBoundingBoxesOverlapping, normalizeBoundingBox, -} from '../../helpers'; -import type { BoundingBox, Coordinate } from '../../types/utility'; +} from "../../helpers"; +import type { BoundingBox, Coordinate } from "../../types/utility"; -import type { EllipseSchemaWithDefaults } from './defaults'; +import type { EllipseSchemaWithDefaults } from "./defaults"; export const ellipseHitbox = (schema: EllipseSchemaWithDefaults) => (point: Coordinate) => { diff --git a/packages/shapes/tsconfig.json b/packages/shapes/tsconfig.json index 4a5d6bf7..8f6fe90c 100644 --- a/packages/shapes/tsconfig.json +++ b/packages/shapes/tsconfig.json @@ -2,13 +2,13 @@ "extends": "../../tsconfig.base.json", "compilerOptions": { "outDir": "./dist/types", - "rootDir": "./src", + "rootDir": ".", "paths": { "@magic/utils/*": ["../utils/src/*"], "@magic/canvas/*": ["../canvas/src/*"] } }, "references": [{ "path": "../utils" }, { "path": "../canvas" }], - "include": ["./src/**/*"], - "exclude": ["./dist", "**/node_modules", "**/*.stories.ts"] + "include": ["./src/**/*", "./.storybook/**/*"], + "exclude": ["./dist", "**/node_modules"] } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9b653055..bd4b9b14 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -374,10 +374,19 @@ importers: devDependencies: '@storybook/vue3-vite': specifier: ^9.0.1 - version: 9.1.7(storybook@9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)))(vite@7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1))(vue@3.5.21(typescript@5.9.2)) + version: 9.1.7(storybook@9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)))(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1))(vue@3.5.21(typescript@5.9.2)) '@types/tinycolor2': specifier: ^1.4.6 version: 1.4.6 + '@vitejs/plugin-vue': + specifier: ^5.0.5 + version: 5.2.4(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1))(vue@3.5.21(typescript@5.9.2)) + storybook: + specifier: ^9.0.1 + version: 9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)) + vite: + specifier: ^7.1.10 + version: 7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1) vue: specifier: ^3.5.18 version: 3.5.21(typescript@5.9.2) @@ -3639,6 +3648,46 @@ packages: terser: optional: true + vite@7.1.10: + resolution: {integrity: sha512-CmuvUBzVJ/e3HGxhg6cYk88NGgTnBoOo7ogtfJJ0fefUWAxN/WDSUa50o+oVBxuIhO8FoEZW0j2eW7sfjs5EtA==} + engines: {node: ^20.19.0 || >=22.12.0} + hasBin: true + peerDependencies: + '@types/node': ^20.19.0 || >=22.12.0 + jiti: '>=1.21.0' + less: ^4.0.0 + lightningcss: ^1.21.0 + sass: ^1.70.0 + sass-embedded: ^1.70.0 + stylus: '>=0.54.8' + sugarss: ^5.0.0 + terser: ^5.16.0 + tsx: ^4.8.1 + yaml: ^2.4.2 + peerDependenciesMeta: + '@types/node': + optional: true + jiti: + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + sass-embedded: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + tsx: + optional: true + yaml: + optional: true + vite@7.1.6: resolution: {integrity: sha512-SRYIB8t/isTwNn8vMB3MR6E+EQZM/WG1aKmmIUCfDXfVvKfc20ZpamngWHKzAmmu9ppsgxsg4b2I7c90JZudIQ==} engines: {node: ^20.19.0 || >=22.12.0} @@ -3756,8 +3805,8 @@ packages: vue-component-type-helpers@2.2.12: resolution: {integrity: sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==} - vue-component-type-helpers@3.0.7: - resolution: {integrity: sha512-TvyUcFXmjZcXUvU+r1MOyn4/vv4iF+tPwg5Ig33l/FJ3myZkxeQpzzQMLMFWcQAjr6Xs7BRwVy/TwbmNZUA/4w==} + vue-component-type-helpers@3.1.1: + resolution: {integrity: sha512-B0kHv7qX6E7+kdc5nsaqjdGZ1KwNKSUQDWGy7XkTYT7wFsOpkEyaJ1Vq79TjwrrtuLRgizrTV7PPuC4rRQo+vw==} vue-demi@0.14.10: resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==} @@ -4647,21 +4696,21 @@ snapshots: ts-dedent: 2.2.0 vite: 5.4.20(@types/node@20.19.17) - '@storybook/builder-vite@9.1.7(storybook@9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)))(vite@7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1))': + '@storybook/builder-vite@9.1.7(storybook@9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)))(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1))': dependencies: - '@storybook/csf-plugin': 9.1.7(storybook@9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1))) - storybook: 9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)) + '@storybook/csf-plugin': 9.1.7(storybook@9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1))) + storybook: 9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)) ts-dedent: 2.2.0 - vite: 7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1) + vite: 7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1) '@storybook/csf-plugin@9.1.7(storybook@9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@20.19.17)(typescript@5.4.5))(prettier@3.6.2)(vite@5.4.20(@types/node@20.19.17)))': dependencies: storybook: 9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@20.19.17)(typescript@5.4.5))(prettier@3.6.2)(vite@5.4.20(@types/node@20.19.17)) unplugin: 1.16.1 - '@storybook/csf-plugin@9.1.7(storybook@9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)))': + '@storybook/csf-plugin@9.1.7(storybook@9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)))': dependencies: - storybook: 9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)) + storybook: 9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)) unplugin: 1.16.1 '@storybook/global@5.0.0': {} @@ -4691,15 +4740,15 @@ snapshots: transitivePeerDependencies: - vue - '@storybook/vue3-vite@9.1.7(storybook@9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)))(vite@7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1))(vue@3.5.21(typescript@5.9.2))': + '@storybook/vue3-vite@9.1.7(storybook@9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)))(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1))(vue@3.5.21(typescript@5.9.2))': dependencies: - '@storybook/builder-vite': 9.1.7(storybook@9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)))(vite@7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)) - '@storybook/vue3': 9.1.7(storybook@9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)))(vue@3.5.21(typescript@5.9.2)) + '@storybook/builder-vite': 9.1.7(storybook@9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)))(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)) + '@storybook/vue3': 9.1.7(storybook@9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)))(vue@3.5.21(typescript@5.9.2)) find-package-json: 1.2.0 magic-string: 0.30.19 - storybook: 9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)) + storybook: 9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)) typescript: 5.9.2 - vite: 7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1) + vite: 7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1) vue-component-meta: 2.2.12(typescript@5.9.2) vue-docgen-api: 4.79.2(vue@3.5.21(typescript@5.9.2)) transitivePeerDependencies: @@ -4711,15 +4760,15 @@ snapshots: storybook: 9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@20.19.17)(typescript@5.4.5))(prettier@3.6.2)(vite@5.4.20(@types/node@20.19.17)) type-fest: 2.19.0 vue: 3.5.21(typescript@5.4.5) - vue-component-type-helpers: 3.0.7 + vue-component-type-helpers: 3.1.1 - '@storybook/vue3@9.1.7(storybook@9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)))(vue@3.5.21(typescript@5.9.2))': + '@storybook/vue3@9.1.7(storybook@9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)))(vue@3.5.21(typescript@5.9.2))': dependencies: '@storybook/global': 5.0.0 - storybook: 9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)) + storybook: 9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)) type-fest: 2.19.0 vue: 3.5.21(typescript@5.9.2) - vue-component-type-helpers: 3.0.7 + vue-component-type-helpers: 3.1.1 '@testing-library/dom@10.4.1': dependencies: @@ -4952,6 +5001,11 @@ snapshots: vite: 5.4.20(@types/node@20.19.17) vue: 3.5.21(typescript@5.4.5) + '@vitejs/plugin-vue@5.2.4(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1))(vue@3.5.21(typescript@5.9.2))': + dependencies: + vite: 7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1) + vue: 3.5.21(typescript@5.9.2) + '@vitest/browser@2.1.9(@types/node@20.19.17)(playwright@1.55.0)(typescript@5.4.5)(vite@5.4.20(@types/node@20.19.17))(vitest@2.1.9)': dependencies: '@testing-library/dom': 10.4.1 @@ -5015,14 +5069,14 @@ snapshots: msw: 2.11.2(@types/node@24.5.2)(typescript@5.9.2) vite: 5.4.20(@types/node@24.5.2) - '@vitest/mocker@3.2.4(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(vite@7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1))': + '@vitest/mocker@3.2.4(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1))': dependencies: '@vitest/spy': 3.2.4 estree-walker: 3.0.3 magic-string: 0.30.19 optionalDependencies: msw: 2.11.2(@types/node@24.5.2)(typescript@5.9.2) - vite: 7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1) + vite: 7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1) '@vitest/pretty-format@2.1.9': dependencies: @@ -7007,13 +7061,13 @@ snapshots: - utf-8-validate - vite - storybook@9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)): + storybook@9.1.7(@testing-library/dom@10.4.1)(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(prettier@3.6.2)(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)): dependencies: '@storybook/global': 5.0.0 '@testing-library/jest-dom': 6.8.0 '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.1) '@vitest/expect': 3.2.4 - '@vitest/mocker': 3.2.4(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(vite@7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)) + '@vitest/mocker': 3.2.4(msw@2.11.2(@types/node@24.5.2)(typescript@5.9.2))(vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1)) '@vitest/spy': 3.2.4 better-opn: 3.0.2 esbuild: 0.25.10 @@ -7377,6 +7431,20 @@ snapshots: '@types/node': 24.5.2 fsevents: 2.3.3 + vite@7.1.10(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1): + dependencies: + esbuild: 0.25.10 + fdir: 6.5.0(picomatch@4.0.3) + picomatch: 4.0.3 + postcss: 8.5.6 + rollup: 4.51.0 + tinyglobby: 0.2.15 + optionalDependencies: + '@types/node': 24.5.2 + fsevents: 2.3.3 + jiti: 1.21.7 + yaml: 2.8.1 + vite@7.1.6(@types/node@24.5.2)(jiti@1.21.7)(yaml@2.8.1): dependencies: esbuild: 0.25.10 @@ -7491,7 +7559,7 @@ snapshots: vue-component-type-helpers@2.2.12: {} - vue-component-type-helpers@3.0.7: {} + vue-component-type-helpers@3.1.1: {} vue-demi@0.14.10(vue@3.5.21(typescript@5.4.5)): dependencies: