feat(preview): add figma support to storybook [CSS-284] (#1680)

* feat(preview): add figma support to storybook [CSS-284]
* chore(actionbar): add Figma URL to Storybook

Author: castastrophe

.storybook/main.js

@@ -1,5 +1,6 @@
 const { resolve } = require("path");
 const { readdirSync } = require("fs");
+
 const componentsPath = resolve(__dirname, "../components");
 const componentPkgs = readdirSync(componentsPath, {
 	withFileTypes: true,
@@ -36,16 +37,20 @@ module.exports = {
 		"@storybook/addon-interactions",
 		// https://www.chromatic.com/docs/visual-testing-addon/
 		"@chromaui/addon-visual-tests",
+		// https://storybook.js.org/addons/@storybook/addon-designs/
+    	"@storybook/addon-designs",
 	],
 	core: {
 		disableTelemetry: true,
 	},
 	env: {
 		MIGRATED_PACKAGES: componentPkgs.filter((dir) => {
-			const pkg = require(resolve(componentsPath, dir, "package.json"));
+			const {
+				devDependencies = {},
+			} = require(resolve(componentsPath, dir, "package.json"));
 			if (
-				pkg.devDependencies &&
-				pkg.devDependencies["@spectrum-css/component-builder-simple"]
+				devDependencies &&
+				devDependencies["@spectrum-css/component-builder-simple"]
 			) {
 				return true;
 			}
@@ -56,7 +61,9 @@ module.exports = {
 		// Removing the global alias as it conflicts with the global npm pkg
 		const { global, ...alias } = config.resolve.alias;
 		config.resolve.alias = alias;
-		let storybookRules =
+
+		// Parse out any storybook rules for CSS so we can replace them with our own
+		const storybookRules =
 			config && config.module && config.module.rules
 				? config.module.rules.filter(
 						(rule) => !(rule.test && rule.test.toString().includes("css"))

components/actionbar/stories/actionbar.stories.js

@@ -77,7 +77,12 @@ export default {
 				? "migrated"
 				: undefined,
 		},
-	},
+    // Getting the Figma link: https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma
+    design: {
+       type: "figma",
+       url: "https://www.figma.com/file/MPtRIVRzPp2VHiEplwXL2X/S-%2F-Manual?node-id=465%3A3127&t=xbooxCWItOFgG2xM-1",
+    },
+  }
 };
 
 export const Default = Template.bind({});

generator/templates/stories/{{ folderName }}.stories.js.hbs

@@ -31,7 +31,12 @@ export default {
     },
     status: {
       type: process.env.MIGRATED_PACKAGES.includes('{{ folderName }}') ? 'migrated' : undefined
-    }
+    },
+    // Getting the Figma link: https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma
+    // design: {
+    //   type: "figma",
+    //   url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File",
+    // },
   }
 };