Storybook Addon (#2243)

* init storybook-addon

* cp package.json

* copy root addon files

* Moves /Users/adam.thompson/Documents/GitHub/leafygreen-ui/tools/storybook/src to /Users/adam.thompson/Documents/GitHub/leafygreen-ui/tools/storybook-addon

* Restores /Users/adam.thompson/Documents/GitHub/leafygreen-ui/tools/storybook/src

* copy static

* rm redundant addon packages

* update addon package name in package json

* validate deps

* changesets

* Update README.md

* Update CHANGELOG.md

.changeset/clever-panthers-tan.md

@@ -0,0 +1,5 @@
+---
+'@lg-tools/storybook': minor
+---
+
+Deprecates `@lg-tools/storybook`. Use `@lg-tools/storybook-addon` instead

.changeset/moody-dingos-tie.md

@@ -0,0 +1,5 @@
+---
+'@lg-tools/storybook-addon': minor
+---
+
+Re-names `@lg-tools/storybook` to `@lg-tools/storybook-addon`

.storybook/main.ts

@@ -1,5 +1,5 @@
 export default {
-  addons: ['@lg-tools/storybook'],
+  addons: ['@lg-tools/storybook-addon'],
   framework: {
     name: '@storybook/react-webpack5',
     options: {

package.json

@@ -37,7 +37,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@changesets/cli": "^2.26.0",
     "@lg-tools/cli": "^0.5.6",
-    "@lg-tools/storybook": "^0.3.4",
+    "@lg-tools/storybook-addon": "^0.0.1",
     "@types/lodash": "^4.14.170",
     "@types/react": "18.2.23",
     "@types/react-dom": "18.2.8",
@@ -48,6 +48,7 @@
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "storybook": "^7.6.17",
     "turbo": "^1.12.3",
     "typescript": "~4.7.0"
   },

tools/storybook-addon/CHANGELOG.md

@@ -0,0 +1,219 @@
+# @lg-tools/storybook-addon
+
+## @lg-tools/storybook@0.3.5
+
+### Patch Changes
+
+- fbc2b7c8: Upgrades Storybook packages to v7.6.17
+- Updated dependencies [fbc2b7c8]
+- Updated dependencies [3208b813]
+  - @lg-tools/storybook-decorators@0.2.5
+  - @leafygreen-ui/tokens@2.5.0
+
+## @lg-tools/storybook@0.3.4
+
+### Patch Changes
+
+- 2bceccb1: Fixes `lodash` imports to use default exports of specific functions to reduce component's bundle size.
+- Updated dependencies [2bceccb1]
+- Updated dependencies [2645cd50]
+  - @lg-tools/storybook-decorators@0.2.4
+  - @leafygreen-ui/lib@13.2.1
+  - @lg-tools/build@0.3.2
+  - @leafygreen-ui/tokens@2.3.0
+
+## @lg-tools/storybook@0.3.3
+
+### Patch Changes
+
+- Updated dependencies [dd4f3da8]
+- Updated dependencies [90053e16]
+  - @leafygreen-ui/lib@13.0.0
+  - @leafygreen-ui/typography@18.0.0
+  - @lg-tools/storybook-decorators@0.2.2
+
+## @lg-tools/storybook@0.3.2
+
+### Patch Changes
+
+- Updated dependencies [3a9b274d]
+- Updated dependencies [74071b67]
+  - @leafygreen-ui/lib@12.0.0
+  - @lg-tools/build@0.3.0
+  - @leafygreen-ui/typography@17.0.1
+  - @lg-tools/storybook-decorators@0.2.1
+
+## @lg-tools/storybook@0.3.1
+
+### Patch Changes
+
+- Updated dependencies [a5770c15]
+- Updated dependencies [c89d17a4]
+  - @leafygreen-ui/typography@17.0.0
+
+## @lg-tools/storybook@0.3.0
+
+### Minor Changes
+
+- 4fcf2e94: Bump `@mdx-js/react` to the latest major version, `2.3.0`. This version will not work with React 17.
+
+  Modified the ReactDOM peerDependency to ensure compatibility with either version 17 or 18.
+
+### Patch Changes
+
+- 4fcf2e94: Modified the React peerDependency to ensure compatibility with either version 17 or 18.
+- Updated dependencies [4fcf2e94]
+- Updated dependencies [4fcf2e94]
+- Updated dependencies [8e06bb20]
+- Updated dependencies [4fcf2e94]
+- Updated dependencies [4fcf2e94]
+- Updated dependencies [4fcf2e94]
+  - @leafygreen-ui/lib@11.0.0
+  - @lg-tools/build@0.2.1
+  - @lg-tools/storybook-decorators@0.2.0
+  - @leafygreen-ui/typography@16.5.5
+
+## @lg-tools/storybook@0.2.1
+
+### Patch Changes
+
+- 6815ee6e: Updates README for storybook addon
+- Updated dependencies [c15ee2ac]
+  - @leafygreen-ui/lib@10.4.2
+  - @leafygreen-ui/palette@4.0.6
+  - @leafygreen-ui/tokens@2.1.3
+  - @leafygreen-ui/typography@16.5.3
+
+## @lg-tools/storybook@0.2.0
+
+### Minor Changes
+
+- 34cfcdff: 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
+
+## @lg-tools/storybook@0.1.4
+
+### Patch Changes
+
+- Updated dependencies [746962d9]
+- Updated dependencies [c2908c5a]
+- Updated dependencies [6776fee7]
+  - @lg-tools/build@0.2.0
+
+## @lg-tools/storybook@0.1.3
+
+### Patch Changes
+
+- cb1e4ba4: Sets @lg-tools package dependencies to specific versions.
+  This should solve dependency resolution issues in consuming applications
+- Updated dependencies [cb1e4ba4]
+  - @lg-tools/build@0.1.2
+
+## @lg-tools/storybook@0.1.2
+
+### Patch Changes
+
+- a370c9ef: Updates storybook main config. Prevents Storybook from building nested `*.story` files inside a package's `node_modules`.
+- Updated dependencies [ff02d0bb]
+  - @lg-tools/build@0.1.1
+
+## @lg-tools/storybook@0.1.1
+
+### Patch Changes
+
+- 72dc68ad: Updates storybook main config. Prevents Storybook from building nested `*.story` files inside a package's `node_modules`.
+
+## @lg-tools/storybook@0.1.0
+
+### Minor Changes
+
+- 215268ff: First pre-release of shared LeafyGreen Storybook tooling
+
+### Patch Changes
+
+- 215268ff: Adds README.md. Minor bug fixes
+- 215268ff: Fix broken builds
+- 215268ff: Updates dependencies
+- Updated dependencies [215268ff]
+- Updated dependencies [215268ff]
+- Updated dependencies [215268ff]
+- Updated dependencies [215268ff]
+  - @lg-tools/build@0.1.0
+  - @leafygreen-ui/palette@4.0.5
+  - @leafygreen-ui/tokens@2.1.2
+
+## @lg-tools/storybook@0.1.0-beta.10
+
+### Minor Changes
+
+- 6d1a7bb9a: First pre-release of shared LeafyGreen Storybook tooling
+
+### Patch Changes
+
+- 8d8a433d1: Adds README.md. Minor bug fixes
+- 9476719bd: Fix broken builds
+- 7b48fe92d: Updates dependencies
+- Updated dependencies [8d8a433d1]
+- Updated dependencies [d40674fe1]
+- Updated dependencies [d84e7eba1]
+- Updated dependencies [9476719bd]
+  - @lg-tools/build@0.1.0-beta.9
+  - @leafygreen-ui/palette@5.0.0-beta.0
+  - @leafygreen-ui/tokens@3.0.0-beta.0
+
+## @lg-tools/storybook@0.1.0-beta.9
+
+### Patch Changes
+
+- Adds README.md. Minor bug fixes
+- Updated dependencies
+  - @lg-tools/build@0.1.0-beta.8
+
+## @lg-tools/storybook@0.1.0-beta.8
+
+### Patch Changes
+
+- 78acda539: Fix broken builds
+- Updated dependencies [78acda539]
+  - @lg-tools/build@0.1.0-beta.7
+
+## @lg-tools/storybook@0.1.0-beta.7
+
+### Patch Changes
+
+- Updates dependencies
+
+## @lg-tools/storybook@0.1.0-beta.0-6
+
+### Minor Changes
+
+- 6d1a7bb9: First pre-release of shared LeafyGreen Storybook tooling
+
+### Patch Changes
+
+- Updated dependencies [d84e7eba]
+  - @lg-tools/build@0.1.0-beta.6

tools/storybook-addon/README.md

@@ -0,0 +1,41 @@
+# `@lg-tools/storybook-addon`
+
+Storybook addon to share configuration in LeafyGreen repositories.
+
+## Usage
+
+Install this package, and consume it in your `.storybook/` config files.
+
+```ts
+// .storybook/main.ts
+export default {
+  addons: ['@lg-tools/storybook-addon'],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      fastRefresh: true,
+      strictMode: true,
+    },
+  },
+};
+```
+
+Most parameters `preview.ts` will be automatically populated by the addon. However you may want to customize certain things like section ordering:
+
+```js
+// .storybook/preview.js
+const parameters = {
+  options: {
+    storySort: {
+      method: 'alphabetical',
+      order: [
+        // ... section headers
+      ],
+    },
+  },
+};
+
+export default {
+  parameters,
+};
+```

tools/storybook-addon/package.json

@@ -0,0 +1,64 @@
+
+{
+  "name": "@lg-tools/storybook-addon",
+  "version": "0.0.1",
+  "description": "Storybook Addon for LeafyGreen UI Kit",
+  "main": "./dist/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "lg-internal-build-package",
+    "tsc": "tsc --build tsconfig.json",
+    "upgrade": "npx storybook@latest upgrade --config-dir ."
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/storybook-addon",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mongodb/leafygreen-ui"
+  },
+  "bugs": {
+    "url": "https://jira.mongodb.org/projects/PD/summary"
+  },
+  "dependencies": {
+    "@leafygreen-ui/lib": "^13.2.1",
+    "@leafygreen-ui/palette": "^4.0.6",
+    "@leafygreen-ui/tokens": "^2.5.0",
+    "@leafygreen-ui/typography": "^18.0.0",
+    "@lg-tools/build": "^0.3.2",
+    "@lg-tools/storybook-decorators": "^0.2.5",
+    "@mdx-js/react": "2.3.0",
+    "@storybook/addon-a11y": "7.6.17",
+    "@storybook/addon-essentials": "7.6.17",
+    "@storybook/addon-interactions": "7.6.17",
+    "@storybook/addon-links": "7.6.17",
+    "@storybook/addon-mdx-gfm": "7.6.17",
+    "@storybook/addons": "7.6.17",
+    "@storybook/api": "7.6.17",
+    "@storybook/components": "7.6.17",
+    "@storybook/core-events": "7.6.17",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/react": "7.6.17",
+    "@storybook/react-webpack5": "7.6.17",
+    "@storybook/testing-library": "0.2.0",
+    "@storybook/theming": "7.6.17",
+    "@svgr/webpack": "8.0.1",
+    "buffer": "6.0.3",
+    "file-loader": "6.2.0",
+    "glob": "10.3.3",
+    "lodash": "4.17.21",
+    "path-browserify": "1.0.1",
+    "react-docgen-typescript": "2.2.2",
+    "stream-browserify": "3.0.0",
+    "url-loader": "4.1.1",
+    "webpack": "5.88.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "storybook": "^7.6.17"
+  }
+}

tools/storybook-addon/preset.js

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