Upgrade node/yarn/storybook (#2736)

.nvmrc

@@ -1 +1 @@
-16.17.0
+18

.storybook/main.ts

@@ -0,0 +1,54 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+import path from 'path';
+
+const config: StorybookConfig = {
+  stories: ['../packages/core/**/*.stories.tsx', '../packages/react/**/*.stories.tsx'],
+  addons: [
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-storysource'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-webpack5'),
+    options: {
+      builder: {
+        useSWC: true,
+      },
+      // enable React strict mode
+      strictMode: true,
+    },
+  },
+
+  // we need to add aliases to webpack so it knows how to follow
+  // to the source of the packages rather than the built version (dist)
+  webpackFinal: async (config) => ({
+    ...config,
+    resolve: {
+      ...config.resolve,
+      alias: {
+        ...config.resolve.alias,
+        ...convertTsConfigPathsToWebpackAliases(),
+      },
+    },
+  }),
+};
+
+export default config;
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return path.dirname(require.resolve(path.join(value, 'package.json')));
+}
+
+function convertTsConfigPathsToWebpackAliases() {
+  const rootDir = path.resolve(__dirname, '../');
+  const tsconfig = require('../tsconfig.json');
+  const tsconfigPaths: Array<string | string[]> = Object.entries(tsconfig.compilerOptions.paths);
+
+  return tsconfigPaths.reduce((aliases, [realPath, mappedPath]) => {
+    aliases[realPath] = path.join(rootDir, mappedPath[0]);
+    return aliases;
+  }, {});
+}

.storybook/manager.ts

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/manager-api';
+import { themes } from '@storybook/theming';
+
+addons.setConfig({
+  enableShortcuts: false,
+  theme: themes.light,
+});

.storybook/preview.ts

@@ -0,0 +1,19 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    // This should work after upgrading to Storybook 7.6 but doesn't.
+    // I am leaving it commented out here so we can fix it one day.
+    //
+    // options: {
+    //   storySort: {
+    //     order: ['Components', 'Utilities'],
+    //   },
+    // },
+
+    // disables Chromatic on a global level
+    chromatic: { disable: true },
+  },
+};
+
+export default preview;

.yarn/versions/d226e89e.yml

@@ -0,0 +1,2 @@
+declined:
+  - primitives

.yarnrc.yml

@@ -7,14 +7,10 @@ changesetIgnorePatterns:
   - '**/*.test.{ts,tsx}'
   - '**/*.stories.{ts,tsx}'
 
-nodeLinker: node-modules
+compressionLevel: mixed
+
+enableGlobalCache: false
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: '@yarnpkg/plugin-workspace-tools'
-  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
-    spec: '@yarnpkg/plugin-typescript'
-  - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
-    spec: '@yarnpkg/plugin-version'
+nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.0.1.cjs
+yarnPath: .yarn/releases/yarn-4.1.0.cjs

package.json

@@ -12,12 +12,12 @@
     "types:check": "tsc --skipLibCheck --noEmit",
     "test": "jest",
     "test:ci": "yarn types:check && jest --ci && yarn cypress:ci",
-    "storybook": "start-storybook -p 9009 --ci",
+    "storybook": "BROWSER=none storybook dev -p 9009",
     "cypress:ci": "start-server-and-test storybook http://localhost:9009 cypress:run",
     "cypress:run": "cypress run",
     "cypress:dev": "cypress open",
     "dev": "yarn storybook",
-    "build-storybook": "build-storybook",
+    "build-storybook": "storybook build",
     "// build": "For context on tsconfig replacements in build scripts, see https://github.com/radix-ui/primitives/pull/361#discussion_r555004944",
     "build": "yarn build:config && yarn build:packages && yarn build:cleanup",
     "build:config": "mv tsconfig.json tsconfig.tmp.json && mv tsconfig.production.json tsconfig.json",
@@ -46,8 +46,11 @@
     "@parcel/packager-ts": "2.4.1",
     "@parcel/transformer-typescript-types": "2.4.1",
     "@stitches/core": "^1.2.8",
-    "@storybook/addon-storysource": "^6.5.0-alpha.63",
-    "@storybook/react": "^6.5.0-alpha.63",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-storysource": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-webpack5": "^7.6.17",
+    "@storybook/test": "^7.6.17",
     "@testing-library/cypress": "^7.0.6",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.1",
@@ -74,6 +77,7 @@
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-storybook": "^0.8.0",
     "fs-extra": "^11.1.1",
     "glob": "^10.2.2",
     "husky": "^4.3.6",
@@ -87,6 +91,7 @@
     "react-test-renderer": "^18.0.0",
     "replace-in-files": "^3.0.0",
     "start-server-and-test": "^1.12.5",
+    "storybook": "^7.6.17",
     "ts-jest": "^27.1.4",
     "typescript": "^4.6.3"
   },
@@ -128,7 +133,8 @@
   "eslintConfig": {
     "extends": [
       "react-app",
-      "plugin:jsx-a11y/recommended"
+      "plugin:jsx-a11y/recommended",
+      "plugin:storybook/recommended"
     ],
     "plugins": [
       "jsx-a11y"
@@ -182,5 +188,6 @@
   },
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --quiet --fix --cache"
-  }
+  },
+  "packageManager": "[email protected]"
 }