feat(storybook): move config folder to root (#2267)

Author: castastrophe

.github/workflows/testing.yml

@@ -33,7 +33,7 @@ jobs:
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           buildScriptName: ci:storybook
-          storybookConfigDir: tools/preview
+          storybookConfigDir: .storybook
           exitOnceUploaded: true
           onlyChanged: true
           traceChanged: true

.gitignore

@@ -17,7 +17,7 @@ package-lock.json
 .nx
 
 # Storybook build output
-tools/preview/storybook-static
+.storybook/storybook-static
 build-storybook.log
 
 # Chromatic

.prettierignore

@@ -9,7 +9,7 @@ components/expressvars/css/**/*.css
 components/vars/css/**/*.css
 components/vars/custom.css
 components/tokens/custom-*/*.css
-tools/preview/storybook-static/**
+.storybook/storybook-static/**
 generator
 dist
 template.hbs

tools/preview/.env.example renamed to .storybook/.env.example

@@ -50,10 +50,10 @@ Storybook leverages webpack for bundling and we have updated it with the followi
 
   ```js
   try {
-  	if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
-  	else import(/* webpackPrefetch: true */ "../themes/express.css");
+   if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
+   else import(/* webpackPrefetch: true */ "../themes/express.css");
   } catch (e) {
-  	console.warn(e);
+   console.warn(e);
   }
   ```
 
@@ -249,73 +249,73 @@ import "../index.css";
 
 // More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args
 export const Template = ({
-	rootClass = "spectrum-Tag",
-	size = "m",
-	iconName,
-	avatarUrl,
-	label,
-	isSelected = false,
-	isEmphasized = false,
-	isDisabled = false,
-	isInvalid = false,
-	hasClearButton = false,
-	id,
-	customClasses = [],
-	...globals
+ rootClass = "spectrum-Tag",
+ size = "m",
+ iconName,
+ avatarUrl,
+ label,
+ isSelected = false,
+ isEmphasized = false,
+ isDisabled = false,
+ isInvalid = false,
+ hasClearButton = false,
+ id,
+ customClasses = [],
+ ...globals
 }) => {
-	const { express } = globals;
-
-	try {
-		if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
-		else import(/* webpackPrefetch: true */ "../themes/express.css");
-	} catch (e) {
-		console.warn(e);
-	}
-
-	return html`
-		<div
-			class=${classMap({
-				[rootClass]: true,
-				[`${rootClass}--size${size?.toUpperCase()}`]:
-					typeof size !== "undefined",
-				"is-emphasized": isEmphasized,
-				"is-disabled": isDisabled,
-				"is-invalid": isInvalid,
-				"is-selected": isSelected,
-				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-			})}
-			id=${ifDefined(id)}
-			tabindex="0"
-		>
-			${avatarUrl && !iconName
-				? Avatar({
-						...globals,
-						image: avatarUrl,
-						size: "50",
-				  })
-				: ""} ${iconName
-				? Icon({
-						...globals,
-						iconName,
-						customClasses: [`${rootClass}s-itemIcon`],
-				  })
-				: ""}
-			<span class="${rootClass}s-itemLabel">${label}</span>
-			${hasClearButton
-				? ClearButton({
-						...globals,
-						customClasses: [`${rootClass}-clearButton`],
-						onclick: (evt) => {
-							const el = evt.target;
-							if (!el) return;
-
-							const wrapper = el.closest(rootClass);
-							wrapper.parentNode.removeChild(wrapper);
-						},
-				  })
-				: ""}
-		</div>
-	`;
+ const { express } = globals;
+
+ try {
+  if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
+  else import(/* webpackPrefetch: true */ "../themes/express.css");
+ } catch (e) {
+  console.warn(e);
+ }
+
+ return html`
+  <div
+   class=${classMap({
+    [rootClass]: true,
+    [`${rootClass}--size${size?.toUpperCase()}`]:
+     typeof size !== "undefined",
+    "is-emphasized": isEmphasized,
+    "is-disabled": isDisabled,
+    "is-invalid": isInvalid,
+    "is-selected": isSelected,
+    ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+   })}
+   id=${ifDefined(id)}
+   tabindex="0"
+  >
+   ${avatarUrl && !iconName
+    ? Avatar({
+      ...globals,
+      image: avatarUrl,
+      size: "50",
+      })
+    : ""} ${iconName
+    ? Icon({
+      ...globals,
+      iconName,
+      customClasses: [`${rootClass}s-itemIcon`],
+      })
+    : ""}
+   <span class="${rootClass}s-itemLabel">${label}</span>
+   ${hasClearButton
+    ? ClearButton({
+      ...globals,
+      customClasses: [`${rootClass}-clearButton`],
+      onclick: (evt) => {
+       const el = evt.target;
+       if (!el) return;
+
+       const wrapper = el.closest(rootClass);
+       wrapper.parentNode.removeChild(wrapper);
+      },
+      })
+    : ""}
+  </div>
+ `;
 };
 ```
 
@@ -325,7 +325,7 @@ Now that your stories are written, we need to add them to our visual regression
 
 ### Getting started
 
-Check that you have a local `.env` file in your `tools/preview` folder with a `CHROMATIC_PROJECT_TOKEN` variable defined. Get this token from the project maintainer. You should not be committing this `.env` file to the repo as it contains sensitive login information.
+Check that you have a local `.env` file in your `.storybook` folder with a `CHROMATIC_PROJECT_TOKEN` variable defined. Get this token from the project maintainer. You should not be committing this `.env` file to the repo as it contains sensitive login information.
 
 From the root of the project, there are 2 commands available for you to run:
 
@@ -339,16 +339,15 @@ Runs will generate a JUnit XML file with build results (`chromatic-build-{buildN
 
 Running without publishing to Chromatic? Add the `--dry-run` flag. Need more information to debug a run? Try the `--diagnostics` flag (writes process context information to `chromatic-diagnostics.json`).
 
-
-
 # Migration to Storybook 7.0(Draft)
 
+## Updates
 
-## Updates:
 ---
 `*` Added support for handler actions with ```withActions``` on each stories which have action handlers.
 
 Example:
+
 ```js
 import globalThis from 'global';
 + import { withActions } from '@storybook/addon-actions/decorator';
@@ -373,6 +372,7 @@ export const Basic = {
 `*` Upgraded to ```Webpack 5``` for improved bundling and performance from ```webpack 4```
 
 `*` @storybook addons dependencies are upgraded to v7 from v6
+
 ```js
 "@storybook/addon-docs": "^7.0.12",
 "@storybook/addon-essentials": "^7.0.12",
@@ -393,9 +393,10 @@ export const Basic = {
 
 `*` Improved the addon ecosystem with new and updated addons.
 
-
 <br></br>
-## Breaking Changes:
+
+## Breaking Changes
+
 ---
 `*` client-api is deperacted and preview-api is introduced
 
@@ -426,6 +427,7 @@ export const Basic = {
 ```
 
 `*` Docs is now added to every component on the sidebar with the below code in Storybook 7
+
 ```js
   docs: {
     autodocs: true,
@@ -446,24 +448,26 @@ export const Basic = {
 +  },
 + };
 ```
-## Deprecations(Addons):
+
+## Deprecations(Addons)
+
 ---
 
 `*` ```"@storybook/client-api"``` is deprecated
 
 `*` ```"@storybook/addons"``` is deprecated
 
+## Bug Fixes
 
-## Bug Fixes:
 ---
 `*` Fixed various issues related to performance, rendering, and compatibility.
 
 `*` Resolved problems with the Storybook UI, including layout glitches and navigation bugs.
 
 `*` Fixed bugs in calender storybook
 
+## Improvements
 
-## Improvements:
 ---
 `*` Improved the overall performance and stability of the Storybook development environment.
 

tools/preview/CHANGELOG.md renamed to .storybook/CHANGELOG.md

@@ -1,18 +1,18 @@
 const { resolve } = require("path");
 const { readdirSync } = require("fs");
-const componentsPath = resolve(__dirname, "../../components");
+const componentsPath = resolve(__dirname, "../components");
 const componentPkgs = readdirSync(componentsPath, {
 	withFileTypes: true,
 })
 	.filter((dirent) => dirent.isDirectory())
 	.map((dirent) => dirent.name);
 module.exports = {
 	stories: [
-		"../../components/*/stories/*.stories.mdx",
-		"../../components/*/stories/*.stories.@(js|jsx|ts|tsx)",
+		"../components/*/stories/*.stories.mdx",
+		"../components/*/stories/*.stories.@(js|jsx|ts|tsx)",
 	],
-	rootDir: "../../",
-	staticDirs: ["../../assets"],
+	rootDir: "../",
+	staticDirs: ["../assets"],
 	addons: [
 		{
 			name: "@storybook/addon-essentials",
@@ -73,7 +73,7 @@ module.exports = {
 				...(config.resolve ? config.resolve : {}),
 				modules: [
 					...(config.resolve ? config.resolve.modules : []),
-					resolve(__dirname, "../../node_modules"),
+					resolve(__dirname, "../node_modules"),
 				],
 				alias: {
 					...(config.resolve ? config.resolve.alias : {}),

tools/preview/DocumentationTemplate.mdx renamed to .storybook/DocumentationTemplate.mdx

@@ -7,7 +7,7 @@ const legacyBuilder = require("@spectrum-css/component-builder/css/processors.js
 
 module.exports = (ctx) => {
 	let plugins = [];
-	const componentPath = resolve(__dirname, "../../components");
+	const componentPath = resolve(__dirname, "../components");
 	const folderName = relative(componentPath, ctx.file).split("/")[0];
 	const pkgPath = resolve(componentPath, folderName, "package.json");
 

tools/preview/README.md renamed to .storybook/README.md

@@ -42,7 +42,7 @@
     "lint:components": "node ./tasks/packageLint.js",
     "lint:styles": "stylelint",
     "migration:clean": "test -n \"${BASH_VERSION}\" && bash ./tasks/clean-up-after-migration.sh || exit 0",
-    "mv:preview": "rimraf dist/preview && mv tools/preview/storybook-static dist/preview",
+    "mv:preview": "rimraf dist/preview && mv .storybook/storybook-static dist/preview",
     "new": "nx run @spectrum-css/generator:new",
     "precommit": "lint-staged",
     "prepare": "husky install && run-p refresh:env migration:clean",
@@ -64,7 +64,8 @@
     "components/*",
     "tools/*",
     "plugins/*",
-    "generator"
+    "generator",
+    ".storybook"
   ],
   "devDependencies": {
     "@adobe/focus-ring-polyfill": "^0.1.5",

tools/preview/assets/base.css renamed to .storybook/assets/base.css

@@ -17,6 +17,7 @@
 # test -d "tools" && rm -rf tools
 
 test -d "tools/generator" && rm -rf tools/generator
+test -d "tools/preview" && rm -rf tools/preview
 
 # Legacy tokens packages
 # test -d "components/vars" && rm -rf components/vars