feat: Figma in Storybook (#51)

Author: razor-x

.storybook/main.ts

@@ -12,6 +12,7 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    'storybook-addon-designs',
   ],
   framework: {
     name: '@storybook/react-webpack5',

package-lock.json

@@ -111,6 +111,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.0.2",
+    "storybook-addon-designs": "^7.0.0-beta.2",
     "ts-jest": "^29.1.0",
     "tsc-alias": "^1.8.5",
     "tsconfig-paths-webpack-plugin": "^4.0.1",

package.json

@@ -20,4 +20,11 @@ type Story = StoryObj<typeof DeviceManager>
  * # List of devices
  * This is a list of devices.
  */
-export const Devices: Story = {}
+export const Devices: Story = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Su3VO6yupz4yxe88fv0Uqa/Out-of-the-box-Components?node-id=358-43308&t=nQzUZZTb5FddESkl-4',
+    },
+  },
+}