Creates Storybook addon [LG-3478] (#1900)

* initialize sb addon

* Moves manager & preview heads

* mv static

* Create six-sloths-rush.md

* Update six-sloths-rush.md

Author: TheSonOfThomp

.changeset/six-sloths-rush.md

@@ -0,0 +1,26 @@
+---
+'@lg-tools/storybook': minor
+---
+
+Updates `storybook` package to be a Storybook addon.
+
+#### Usage
+1. Install 
+```bash
+> yarn add @lg-tools/storybook@latest
+```
+
+2. Add to `./storybook/main.ts`
+```ts
+export default {
+  addons: ['@lg-tools/storybook'],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      fastRefresh: true,
+      strictMode: true,
+    },
+  },
+};
+```
+ - There is no need for a `manager.ts`, `preview.ts`, or `*-head.html` file, unless you need to extend the defaults in this addon

.storybook/main.ts

@@ -1,2 +1,10 @@
-import main from '@lg-tools/storybook';
-export default main;
+export default {
+  addons: ['@lg-tools/storybook'],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      fastRefresh: true,
+      strictMode: true,
+    },
+  },
+};

.storybook/preview.ts

@@ -1,39 +1,6 @@
-import {
-  ComponentPreview,
-  ReactStrictMode,
-  PropCombinations,
-} from '@lg-tools/storybook-decorators';
-
-import {
-  storybookExcludedArgTypes,
-  storybookExcludedControlParams,
-} from '@leafygreen-ui/lib';
-import {
-  H1,
-  H2,
-  H3,
-  Subtitle,
-  Body,
-  InlineCode,
-  Link,
-} from '@leafygreen-ui/typography';
 import { Preview } from '@storybook/react';
 
 const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  argTypes: {
-    // By default we set specific argTypes to `control: none`
-    ...storybookExcludedArgTypes,
-  },
-  controls: {
-    exclude: [...storybookExcludedControlParams],
-    expanded: true,
-    matchers: {
-      color: /.*(c|C)olor$/,
-      date: /Date$/,
-    },
-    sort: 'requiredFirst',
-  },
   options: {
     storySort: {
       method: 'alphabetical',
@@ -51,26 +18,10 @@ const parameters = {
       locales: '',
     },
   },
-  docs: {
-    components: {
-      h1: H1,
-      h2: H2,
-      h3: H3,
-      h4: Subtitle,
-      h5: Body,
-      p: Body,
-      a: Link,
-      code: InlineCode,
-    },
-    source: { type: 'code' },
-  },
 };
 
-export const decorators = [PropCombinations, ReactStrictMode, ComponentPreview];
-
 const preview: Preview = {
   parameters,
-  decorators,
 };
 
 export default preview;

.storybook/static/leafygreen-ui-banner.jpeg

@@ -6,6 +6,7 @@
     "esbenp.prettier-vscode",
     "wayou.vscode-todo-highlight",
     "styled-components.vscode-styled-components",
-    "redhat.vscode-yaml"
+    "redhat.vscode-yaml",
+    "julienetie.vscode-template-literals"
   ]
 }

.vscode/extensions.json

@@ -50,7 +50,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "5.2.0",
-    "storybook": "^7.1.0",
+    "storybook": "7.1.1",
     "turbo": "^1.10.7",
     "typescript": "~4.7.0"
   },

package.json

@@ -2,18 +2,25 @@
   "name": "@lg-tools/storybook",
   "version": "0.1.4",
   "description": "Storybook config for LeafyGreen",
-  "main": "main.ts",
   "license": "Apache-2.0",
+  "main": "./dist/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
   "scripts": {
+    "build": "lg-internal-build-package",
+    "tsc": "tsc --build tsconfig.json",
     "upgrade": "npx storybook@latest upgrade --config-dir ."
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
+    "@leafygreen-ui/lib": "^10.4.0",
     "@leafygreen-ui/palette": "^4.0.5",
     "@leafygreen-ui/tokens": "^2.1.2",
+    "@leafygreen-ui/typography": "^16.5.1",
     "@lg-tools/build": "^0.2.0",
+    "@lg-tools/storybook-decorators": "^0.1.2",
     "@mdx-js/react": "1.6.22",
     "@storybook/addon-a11y": "7.1.1",
     "@storybook/addon-actions": "7.1.1",
@@ -34,6 +41,7 @@
     "@svgr/webpack": "8.0.1",
     "buffer": "6.0.3",
     "file-loader": "6.2.0",
+    "fs-extra": "11.1.1",
     "glob": "10.3.3",
     "lodash": "4.17.21",
     "path-browserify": "1.0.1",
@@ -44,6 +52,7 @@
     "webpack": "5.88.0"
   },
   "peerDependencies": {
+
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "storybook": "^7.1.0"

tools/storybook/babel.config.js

@@ -0,0 +1 @@
+module.exports = require('./dist/index');