Merge pull request #6 from sharpshooter90/feat/adding-new-addons

feat(design addon): added button figma preview with design addon

apps/docs/.storybook/main.js

@@ -1,4 +1,4 @@
-import { dirname, join, resolve } from "path";
+import { dirname, join } from "path";
 
 function getAbsolutePath(value) {
   return dirname(require.resolve(join(value, "package.json")));
@@ -10,6 +10,7 @@ const config = {
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-designs"),
   ],
   framework: {
     name: getAbsolutePath("@storybook/react-vite"),
@@ -18,7 +19,7 @@ const config = {
 
   core: {},
 
-  async viteFinal(config, { configType }) {
+  async viteFinal(config) {
     // customize the Vite config here
     return {
       ...config,

apps/docs/package.json

@@ -22,6 +22,7 @@
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@storybook/addon-actions": "^8.3.3",
+    "@storybook/addon-designs": "^8.0.3",
     "@storybook/addon-essentials": "^8.3.3",
     "@storybook/addon-links": "^8.3.3",
     "@storybook/react": "^8.3.3",

apps/docs/stories/button.stories.tsx

@@ -27,6 +27,20 @@ const meta: Meta<typeof Button> = {
       control: { type: "boolean" },
     },
   },
+  parameters: {
+    design: [
+      {
+        name: "Figma",
+        type: "figma",
+        url: "https://www.figma.com/design/egMidgk6VJDXTumxcCYUl1/Periscope---Primitives?node-id=12-739",
+      },
+      {
+        name: "Spec",
+        type: "figma",
+        url: "https://www.figma.com/board/uJOS4p4BNG1rLryBceR3YV/Untitled?node-id=6-155&t=2rVCYOnxaIjupEqA-4",
+      },
+    ],
+  },
 };
 
 export default meta;