chore(storybook): storybook configured for magic shapes

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;

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;

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

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<EllipseSchema>(ellipse);
 
 const meta = {
-  title: 'Shapes/Ellipse',
+  title: "Shapes/Ellipse",
   component: Ellipse,
   args: {
     ...ELLIPSE_SCHEMA_DEFAULTS,

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) => {

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"]
 }