Add provision for visibility and constraints

.github/workflows/chromatic.yml

@@ -10,33 +10,53 @@ jobs:
   publish-chromatic:
     # the operating system it will run on
     runs-on: ubuntu-latest
+    env:
+      # Storybook 6.5's webpack manager build uses a legacy hash that OpenSSL 3
+      # (Node 17+) rejects; this restores the legacy provider for the build.
+      NODE_OPTIONS: --openssl-legacy-provider
     # the list of steps that the action will go through
     steps:
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
         with:
-          node-version: 16
+          # Chromatic needs full git history to establish baselines
+          fetch-depth: 0
 
-      - uses: actions/checkout@v1
+      # installs pnpm using the version from the root package.json "packageManager" field
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
 
       - name: Install Dependencies
-        run: yarn install
+        run: pnpm install --frozen-lockfile
 
       - name: 🤞 Build Library 🧪
-        run: yarn build
+        run: pnpm build
         working-directory: lib
 
       - name: 🤞 Run Typecheck 🧪
-        run: yarn typecheck
+        run: pnpm typecheck
         working-directory: storybook
 
       - name: 🤞 Run Lint 🧪
-        run: yarn lint
+        run: pnpm lint
+        working-directory: storybook
+
+      # Build Storybook here with pnpm (the runner's toolchain) rather than letting the
+      # Chromatic action build it — the action runs the CLI in its own container with yarn,
+      # which fails on this repo's "packageManager": "pnpm@..." field.
+      - name: 🤞 Build Storybook 🧪
+        run: pnpm run build-storybook
         working-directory: storybook
 
       - name: 🤞 Publish to Chromatic 🧪
         uses: chromaui/action@v1
         # options required to the GitHub chromatic action
         with:
           workingDir: storybook
+          # Upload the pre-built output instead of having Chromatic rebuild it.
+          storybookBuildDir: storybook-static
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-# .github/workflows/chromatic.yml
+# .github/workflows/ci.yml
 
 # name of our action
 name: 'CI'
@@ -12,27 +12,31 @@ jobs:
     runs-on: ubuntu-latest
     # the list of steps that the action will go through
     steps:
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
+      - uses: actions/checkout@v4
+
+      # installs pnpm using the version from the root package.json "packageManager" field
+      - uses: pnpm/action-setup@v4
 
-      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
 
       - name: Install Dependencies
-        run: yarn install
+        run: pnpm install --frozen-lockfile
 
       - name: 🤞 Run Typecheck 🧪
-        run: yarn typecheck
+        run: pnpm typecheck
         working-directory: lib
 
       - name: 🤞 Run Lint 🧪
-        run: yarn lint
+        run: pnpm lint
         working-directory: lib
 
       - name: 🤞 Run Test 🧪
-        run: yarn test
+        run: pnpm test
         working-directory: lib
 
       - name: 🤞 Build 🧪
-        run: yarn build
+        run: pnpm build
         working-directory: lib

.npmrc

@@ -0,0 +1,5 @@
+# Storybook 6.5 (webpack manager + vite preview builder) expects many transitive
+# @storybook/* internals to be present in a flat, top-level node_modules. pnpm's isolated
+# layout hides them (e.g. "Rollup failed to resolve @storybook/preview-web"), so hoist
+# packages to the root node_modules to keep the legacy Storybook toolchain working.
+shamefully-hoist=true

README.md

@@ -216,8 +216,8 @@ Symbol to define `null` on `forceValue` and `defaultValue` on literal schema
 ## Development
 
 ```bash
-# Install dependencies
-yarn install
+# Install dependencies (uses pnpm; `corepack enable` will provide it)
+pnpm install
 ```
 
 ### Lib
@@ -226,16 +226,16 @@ yarn install
 cd lib
 
 # Eslint
-yarn lint
+pnpm lint
 
 # Typescript
-yarn typecheck
+pnpm typecheck
 
 # Check unused files
-yarn check-unused
+pnpm check-unused
 
 # Test
-yarn test
+pnpm test
 ```
 
 ### Storybook
@@ -244,5 +244,7 @@ yarn test
 cd storybook
 
 # Start storybook
-yarn storybook
+# NOTE: on Node 17+ prefix with NODE_OPTIONS=--openssl-legacy-provider
+# (Storybook 6.5's webpack manager uses a hash OpenSSL 3 rejects)
+pnpm storybook
 ```

lib/package.json

@@ -18,10 +18,9 @@
     },
     "typings": "build/esm/index.d.ts",
     "scripts": {
-        "prepare": "install-peers",
         "build": "rollup -c && tsc --project tsconfig-typings.json",
         "watch": "rollup -c -w",
-        "prepack": "yarn build",
+        "prepack": "pnpm build",
         "typecheck": "tsc",
         "lint": "eslint ./src --report-unused-disable-directives",
         "check-unused": "unimported",
@@ -40,7 +39,8 @@
     "homepage": "https://github.com/toggle-corp/toggle-form#readme",
     "dependencies": {
         "@babel/runtime-corejs3": "^7.22.3",
-        "@togglecorp/fujs": "^2.1.1"
+        "@togglecorp/fujs": "^2.1.1",
+        "core-js-pure": "^3.48.0"
     },
     "peerDependencies": {
         "react": "^18.2.0",
@@ -70,7 +70,6 @@
         "eslint-plugin-jsx-a11y": "^6.7.1",
         "eslint-plugin-react": "^7.32.2",
         "eslint-plugin-react-hooks": "^4.6.0",
-        "install-peers-cli": "^2.2.0",
         "jest": "^29.6.1",
         "rollup": "^3.26.2",
         "rollup-plugin-copy": "^3.4.0",

lib/rollup.config.js

@@ -3,8 +3,6 @@ import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import filesize from 'rollup-plugin-filesize';
 import eslint from '@rollup/plugin-eslint';
-import copy from 'rollup-plugin-copy';
-
 import pkg from './package.json' assert { type: 'json' };
 
 const INPUT_FILE_PATH = 'src/index.ts';
@@ -25,11 +23,6 @@ const PLUGINS = [
     }),
     commonjs(),
     filesize(),
-    copy({
-        targets: [
-            { src: ['src/schema.d.ts', 'src/nullHelper.d.ts'], dest: 'build/esm' },
-        ],
-    }),
 ];
 
 const OUTPUT_DATA = [
@@ -46,17 +39,23 @@ const OUTPUT_DATA = [
     },
 ];
 
+// Treat every dependency / peerDependency — and any of their subpath imports such as
+// `core-js-pure/stable/...` or `@babel/runtime-corejs3/helpers/...` — as external. A plain
+// string list only matches exact ids, which would wrongly try to bundle subpath imports.
+const EXTERNAL = [
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {}),
+];
+const isExternal = (id) => EXTERNAL.some((dep) => id === dep || id.startsWith(`${dep}/`));
+
 const config = OUTPUT_DATA.map((options) => ({
     input: INPUT_FILE_PATH,
     output: {
         ...options,
         sourcemap: true,
         exports: 'named',
     },
-    external: [
-        ...Object.keys(pkg.dependencies || {}),
-        ...Object.keys(pkg.peerDependencies || {}),
-    ],
+    external: isExternal,
     plugins: PLUGINS,
 }));