Upgrade Storybook to v7, use @storybook/react-vite, move DocsUtils in…

…to core to break cyclic dependency (#1309)

* Upgrade Storybook to v7, move DocsUtils into core to break cyclic dependency

* Build Storybook with Vite

.gitignore

@@ -73,6 +73,8 @@ common/autoinstallers/*/.npmrc
 **/types/**/*.d.ts
 tsdoc-metadata.json
 
+storybook-static/
+
 apps/docs/out/
 
 # Heft

apps/docs/package.json

@@ -21,7 +21,8 @@
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.9"
+    "react-is": "^17.0.2",
+    "styled-components": "^5.3.11"
   },
   "devDependencies": {
     "@mdx-js/loader": "^0.15.5",

apps/storybook/.storybook/main.ts

@@ -0,0 +1,29 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+import { storykitAddons, framework } from '@priceline/storybook-preset'
+
+const packagesWithStories = [
+  'carousel',
+  'core',
+  'icons',
+  'autocomplete',
+  'menu',
+  'modal',
+  'popover',
+  'slider',
+]
+const storiesGlob = 'src/**/*.stories.@(js|jsx|ts|tsx)'
+
+const config: StorybookConfig = {
+  framework,
+  stories: packagesWithStories.map((packageFolder) => `../../../packages/${packageFolder}/${storiesGlob}`),
+  addons: storykitAddons,
+  docs: {
+    autodocs: true,
+  },
+  typescript: {
+    check: false,
+  },
+}
+
+export default config

apps/storybook/.storybook/preview.tsx

@@ -0,0 +1,41 @@
+import { decorators as presetDecorators, parameters as presetParameters } from '@priceline/storybook-preset'
+import { createTheme } from 'pcln-design-system'
+
+const baseTheme = createTheme()
+
+export const decorators = presetDecorators
+
+export const parameters = {
+  ...presetParameters,
+
+  backgrounds: {
+    default: 'background.lightest',
+    values: [
+      {
+        name: 'background.lightest',
+        value: baseTheme.palette.background.lightest,
+      },
+      {
+        name: 'background.light',
+        value: baseTheme.palette.background.light,
+      },
+      {
+        name: 'background.base',
+        value: baseTheme.palette.background.base,
+      },
+      {
+        name: 'background.dark',
+        value: baseTheme.palette.background.dark,
+      },
+      {
+        name: 'background.darkest',
+        value: baseTheme.palette.background.darkest,
+      },
+    ],
+  },
+
+  controls: {
+    expanded: true,
+    sort: 'requiredFirst',
+  },
+}

apps/storybook/package.json

@@ -8,37 +8,36 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "build": "",
-    "start": "start-storybook --quiet -p 8000",
+    "start": "storybook dev -p 8000",
     "storybook": "run-s storybook:build chromatic",
     "storybook:baseline": "run-s storybook:build storybook:baseline:chromatic",
-    "storybook:build": "build-storybook --webpack-stats-json --quiet -o ../docs/out/storybook",
+    "storybook:build": "storybook build --output-dir=../docs/out/storybook",
     "storybook:baseline:chromatic": "chromatic --storybook-build-dir=../docs/out/storybook --auto-accept-changes --exit-once-uploaded",
     "chromatic": "chromatic --storybook-build-dir=../docs/out/storybook --exit-once-uploaded --only-changed --untraced=**/package.json"
   },
   "author": "Priceline Design System Working Group",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.16.7",
-    "@priceline/babel-preset": "workspace:*",
     "@priceline/eslint-config": "workspace:*",
     "@priceline/storybook-preset": "workspace:*",
-    "@rushstack/eslint-patch": "^1.1.0",
-    "@storybook/addon-actions": "^6.4.12",
-    "@storybook/react": "^6.4.12",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-react-docgen": "4.2.1",
-    "chromatic": "^6.3.4",
-    "eslint": "^8.33.0",
+    "@rushstack/eslint-patch": "^1.3.1",
+    "@storybook/addon-actions": "^7.0.20",
+    "@storybook/addon-a11y": "^7.0.20",
+    "@storybook/addon-essentials": "^7.0.20",
+    "@storybook/react": "^7.0.20",
+    "@storybook/react-vite": "^7.0.20",
+    "babel-plugin-react-docgen": "^4.2.1",
+    "chromatic": "^6.19.5",
+    "eslint": "^8.42.0",
     "npm-run-all": "^4.1.5",
     "pcln-design-system": "workspace:*",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-draggable-playground": "^1.0.0",
+    "react-is": "^17.0.2",
     "require-from-string": "2.0.2",
-    "storybook-addon-performance": "^0.16.1",
-    "styled-components": "^5.3.9",
-    "webpack": "^5.66.0",
-    "typescript": "^4.5.4",
-    "react-is": "^17.0.2"
+    "storybook": "^7.0.20",
+    "styled-components": "^5.3.11",
+    "vite": "^4.3.9",
+    "typescript": "^5.1.3"
   }
 }

common/changes/pcln-autocomplete/UXPT-4716--storybook-v7_2023-06-14-15-26.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Upgrade Storybook to v7",
+      "type": "minor",
+      "packageName": "pcln-autocomplete"
+    }
+  ],
+  "packageName": "pcln-autocomplete",
+  "email": "steven.dalonzo@priceline.com"
+}

common/changes/pcln-carousel/UXPT-4716--storybook-v7_2023-06-14-15-26.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Upgrade Storybook to v7",
+      "type": "minor",
+      "packageName": "pcln-carousel"
+    }
+  ],
+  "packageName": "pcln-carousel",
+  "email": "steven.dalonzo@priceline.com"
+}

common/changes/pcln-codemods/UXPT-4716--storybook-v7_2023-06-14-15-26.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Upgrade Storybook to v7",
+      "type": "minor",
+      "packageName": "pcln-codemods"
+    }
+  ],
+  "packageName": "pcln-codemods",
+  "email": "steven.dalonzo@priceline.com"
+}

common/changes/pcln-design-system/UXPT-4716--storybook-v7_2023-06-14-15-26.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Upgrade Storybook to v7",
+      "type": "minor",
+      "packageName": "pcln-design-system"
+    }
+  ],
+  "packageName": "pcln-design-system",
+  "email": "steven.dalonzo@priceline.com"
+}

common/changes/pcln-icons/UXPT-4716--storybook-v7_2023-06-14-15-26.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Upgrade Storybook to v7",
+      "type": "minor",
+      "packageName": "pcln-icons"
+    }
+  ],
+  "packageName": "pcln-icons",
+  "email": "steven.dalonzo@priceline.com"
+}

common/changes/pcln-menu/UXPT-4716--storybook-v7_2023-06-14-15-26.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Upgrade Storybook to v7",
+      "type": "minor",
+      "packageName": "pcln-menu"
+    }
+  ],
+  "packageName": "pcln-menu",
+  "email": "steven.dalonzo@priceline.com"
+}

common/changes/pcln-modal/UXPT-4716--storybook-v7_2023-06-14-15-26.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Upgrade Storybook to v7",
+      "type": "minor",
+      "packageName": "pcln-modal"
+    }
+  ],
+  "packageName": "pcln-modal",
+  "email": "steven.dalonzo@priceline.com"
+}

common/changes/pcln-popover/UXPT-4716--storybook-v7_2023-06-14-15-26.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Upgrade Storybook to v7",
+      "type": "minor",
+      "packageName": "pcln-popover"
+    }
+  ],
+  "packageName": "pcln-popover",
+  "email": "steven.dalonzo@priceline.com"
+}