feat(ui-library): add figma plugin to storybook (#703)

deven-org · Dec 20, 2023 · 35df4c3 · 35df4c3
1 parent dbcafa8
commit 35df4c3
Show file tree

Hide file tree

Showing 26 changed files with 399 additions and 254 deletions.
diff --git a/package.json b/package.json
@@ -105,7 +105,8 @@
     "rimraf": "^5.0.5"
   },
   "engines": {
-    "node": "^18"
+    "node": "^18",
+    "yarn": "^4.0.2"
   },
   "packageManager": "[email protected]"
 }
diff --git a/packages/ui-library/.storybook/main.ts b/packages/ui-library/.storybook/main.ts
@@ -3,7 +3,7 @@ import { resolve } from 'path';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y', '@storybook/addon-designs'],
   framework: '@storybook/web-components-webpack5',
   docs: {
     autodocs: true,

diff --git a/packages/ui-library/package.json b/packages/ui-library/package.json
@@ -21,7 +21,8 @@
   "license": "MIT",
   "devDependencies": {
     "@boiler/eslint-config-boiler": "1.0.0",
-    "@boiler/figma-design-tokens": "0.0.1"
+    "@boiler/figma-design-tokens": "0.0.1",
+    "@storybook/addon-designs": "^7.0.7"
   },
   "dependencies": {
     "@boiler/icons": "0.0.1",

diff --git a/packages/ui-library/src/components/actions/buttons/icon-button/index.stories.ts b/packages/ui-library/src/components/actions/buttons/icon-button/index.stories.ts
@@ -158,6 +158,10 @@ export default {
     },
   },
   parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A106388&mode=dev',
+    },
     layout: 'centered',
     viewMode: 'docs',
     docs: {

diff --git a/packages/ui-library/src/components/actions/buttons/text-button/index.stories.ts b/packages/ui-library/src/components/actions/buttons/text-button/index.stories.ts
@@ -182,6 +182,10 @@ export default {
     },
   },
   parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=705%3A1815&mode=dev',
+    },
     viewMode: 'docs',
     docs: {
       description: {

diff --git a/packages/ui-library/src/components/feedback/loader/index.stories.ts b/packages/ui-library/src/components/feedback/loader/index.stories.ts
@@ -58,6 +58,10 @@ export default {
     },
   },
   parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A126742&mode=dev',
+    },
     layout: 'centered',
     docs: {
       description: {

diff --git a/packages/ui-library/src/components/feedback/tooltip/index.stories.ts b/packages/ui-library/src/components/feedback/tooltip/index.stories.ts
@@ -21,6 +21,12 @@ export default {
       control: { type: 'select' },
     },
   },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A126744&mode=dev',
+    },
+  },
 };
 
 export const BlrTooltip = (params: BlrTooltipType) => html`<div

diff --git a/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.stories.ts b/packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.stories.ts
@@ -10,6 +10,12 @@ export default {
       control: { type: 'select' },
     },
   },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A126744&mode=dev',
+    },
+  },
 };
 
 export const BlrTooltipBubble = (params: BlrTooltipBubbleType) => html`<div style="position: relative; height: 200px;">

diff --git a/packages/ui-library/src/components/forms/checkbox/index.stories.ts b/packages/ui-library/src/components/forms/checkbox/index.stories.ts
@@ -207,6 +207,10 @@ export default {
     },
   },
   parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A125200&mode=dev',
+    },
     layout: 'centered',
     docs: {
       //Two examples for Code integration

diff --git a/packages/ui-library/src/components/forms/number-input/index.stories.ts b/packages/ui-library/src/components/forms/number-input/index.stories.ts
@@ -350,6 +350,10 @@ export default {
     },
   },
   parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=7155%3A108301&mode=dev',
+    },
     viewMode: 'docs',
     layout: 'centered',
     docs: {

diff --git a/packages/ui-library/src/components/forms/radio/radio-input-group/index.stories.ts b/packages/ui-library/src/components/forms/radio/radio-input-group/index.stories.ts
@@ -33,6 +33,12 @@ export default {
       control: { type: 'select' },
     },
   },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A125199&mode=dev',
+    },
+  },
 };
 
 export const BlrRadioGroup = (params: BlrRadioGroupType) => BlrRadioGroupRenderFunction(params);

diff --git a/packages/ui-library/src/components/forms/radio/radio-input/index.stories.ts b/packages/ui-library/src/components/forms/radio/radio-input/index.stories.ts
@@ -185,6 +185,10 @@ export default {
     },
   },
   parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A125199&mode=dev',
+    },
     viewMode: 'docs',
     layout: 'centered',
     docs: {

diff --git a/packages/ui-library/src/components/forms/select/index.stories.ts b/packages/ui-library/src/components/forms/select/index.stories.ts
@@ -217,6 +217,10 @@ export default {
     },
   },
   parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A125198&mode=dev',
+    },
     layout: 'centered',
     viewMode: 'docs',
     docs: {

diff --git a/packages/ui-library/src/components/forms/text-input/index.stories.ts b/packages/ui-library/src/components/forms/text-input/index.stories.ts
@@ -280,6 +280,10 @@ export default {
   },
 
   parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A125196&mode=dev',
+    },
     viewMode: 'docs',
     previewTabs: {
       'storybook/story/panel': {

diff --git a/packages/ui-library/src/components/forms/textarea/index.stories.ts b/packages/ui-library/src/components/forms/textarea/index.stories.ts
@@ -369,6 +369,10 @@ export default {
     },
   },
   parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A125197&mode=dev',
+    },
     layout: 'centered',
     docs: {
       //Two examples for Code integration

diff --git a/packages/ui-library/src/components/forms/toggle-switch/index.stories.ts b/packages/ui-library/src/components/forms/toggle-switch/index.stories.ts
@@ -36,6 +36,12 @@ export default {
       control: { type: 'select' },
     },
   },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A125201&mode=dev',
+    },
+  },
 };
 
 export const BlrToggleSwitch = (params: BlrToggleSwitchType) => BlrToggleSwitchRenderFunction(params);

diff --git a/packages/ui-library/src/components/internal-components/counter/index.stories.ts b/packages/ui-library/src/components/internal-components/counter/index.stories.ts
@@ -20,6 +20,10 @@ export default {
     },
   },
   parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A126743&mode=dev',
+    },
     viewMode: 'docs',
   },
 };

diff --git a/...brary/src/components/internal-components/form-caption-group/form-caption/index.stories.ts b/...brary/src/components/internal-components/form-caption-group/form-caption/index.stories.ts
@@ -25,6 +25,10 @@ export default {
     },
   },
   parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A125223&mode=dev',
+    },
     viewMode: 'docs',
   },
 };

diff --git a/packages/ui-library/src/components/internal-components/form-caption-group/index.stories.ts b/packages/ui-library/src/components/internal-components/form-caption-group/index.stories.ts
@@ -12,6 +12,10 @@ export default {
     },
   },
   parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=8273%3A7564&mode=dev',
+    },
     viewMode: 'docs',
   },
 };

diff --git a/packages/ui-library/src/components/internal-components/form-label/index.stories.ts b/packages/ui-library/src/components/internal-components/form-label/index.stories.ts
@@ -20,6 +20,10 @@ export default {
     },
   },
   parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A125225&mode=dev',
+    },
     viewMode: 'docs',
   },
 };

diff --git a/packages/ui-library/src/components/navigation/tab-bar/index.stories.ts b/packages/ui-library/src/components/navigation/tab-bar/index.stories.ts
@@ -51,6 +51,10 @@ export default {
     },
   },
   parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3231%3A94377&mode=dev',
+    },
     viewMode: 'docs',
   },
 };

diff --git a/packages/ui-library/src/components/ui/button-group/index.stories.ts b/packages/ui-library/src/components/ui/button-group/index.stories.ts
@@ -18,6 +18,10 @@ export default {
     },
   },
   parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3777%3A114816&mode=dev',
+    },
     viewMode: 'docs',
   },
 };

diff --git a/packages/ui-library/src/components/ui/divider/index.stories.ts b/packages/ui-library/src/components/ui/divider/index.stories.ts
@@ -16,6 +16,10 @@ export default {
     },
   },
   parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A127845&mode=dev',
+    },
     previewTabs: {
       canvas: { hidden: true },
     },

diff --git a/packages/ui-library/src/components/ui/icon/icon-link/index.stories.ts b/packages/ui-library/src/components/ui/icon/icon-link/index.stories.ts
@@ -25,6 +25,10 @@ export default {
     },
   },
   parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A106388&mode=dev',
+    },
     viewMode: 'docs',
   },
 };

diff --git a/packages/ui-library/src/components/ui/icon/index.stories.ts b/packages/ui-library/src/components/ui/icon/index.stories.ts
@@ -17,6 +17,10 @@ export default {
     },
   },
   parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=947%3A31105&mode=dev',
+    },
     viewMode: 'docs',
   },
 };