@j2-health/design-system 0.1.0 → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 J2 Health, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -44,8 +44,14 @@ $ npm install @j2-health/design-system
 ```
 
 The package ships a prebuilt bundle plus type declarations, and expects the
-consuming app to provide the peer dependencies listed in `package.json`
-(react, antd, formik, highcharts, tailwindcss, ...).
+consuming app to provide the peer dependencies listed in `package.json` (react,
+antd, formik, highcharts, tailwindcss, ...).
+
+> **Tailwind v3 only.** The preset is a Tailwind 3 config. Installing Tailwind
+> without a version pin gets you v4, which does not satisfy the
+> `tailwindcss@^3.4.14` peer range — npm reports it as a warning and installs it
+> anyway, so the mismatch is easy to miss. Pin it:
+> `npm i -D tailwindcss@^3.4.14`.
 
 Wire it up in three places:
 
@@ -56,8 +62,7 @@ Wire it up in three places:
    ```
 
 2. **Styles** — import the compiled component styles once (e.g. in your app
-   entry), and pull the base stylesheet (design tokens, `@tailwind`
-   directives, base element styles) into your own CSS pipeline:
+   entry), and pull the base stylesheet into your own CSS pipeline:
 
    ```tsx
    // app entry
@@ -65,10 +70,18 @@ Wire it up in three places:
    ```
 
    ```css
-   /* your root stylesheet — processed by YOUR Tailwind/PostCSS build */
+   /* your root stylesheet — processed by YOUR Tailwind/PostCSS build.
+      This @import must be the FIRST statement in the file: it carries an
+      @import of its own (the Rubik webfont), and CSS drops an @import that
+      follows other rules. */
    @import '@j2-health/design-system/stylesheets/index.css';
    ```
 
+   **This file is your Tailwind entry point.** It supplies `@tailwind base`,
+   `@tailwind components`, and `@tailwind utilities` along with the design
+   tokens and base element styles, so remove those directives from your own
+   stylesheet — keeping both emits every Tailwind layer twice.
+
 3. **Tailwind** — use the preset and scan the package's compiled output so
    utility classes used inside components are generated by your build:
 
@@ -89,18 +102,52 @@ Wire it up in three places:
 
 Include this repo as a git submodule and compile its raw TypeScript source with
 your own toolchain (vite alias + tsconfig paths + tailwind content globs
-pointing into the submodule). The npm entry point for this mode is `index.ts`
-at the repo root; submodule consumers should alias `design-system` to that file
+pointing into the submodule). The npm entry point for this mode is `index.ts` at
+the repo root; submodule consumers should alias `design-system` to that file
 explicitly, since the package.json `exports` map points at `dist/`, which only
 exists in the published package.
 
+### Local development against a consuming app
+
+To work on a component and see it live in an app that depends on this package, point the
+app's bundler at this checkout's source rather than linking the built package. Consuming
+apps support this through a `DESIGN_SYSTEM_LOCAL` environment variable:
+
+```bash
+DESIGN_SYSTEM_LOCAL=/path/to/design-system npm run dev
+```
+
+**Do not use `npm link` or `npm install ../design-system`.** This package declares 12 peer
+dependencies that are also devDependencies, because Storybook and the test suite need them
+to run. A linked install resolves those imports from this checkout's own `node_modules`
+rather than the app's, so the app ends up with two copies of React and two copies of antd.
+
+Two copies of React raise `Invalid hook call`, which is at least obvious. Two copies of antd
+fail silently: `AppConfigProvider` supplies the theme through antd's `ConfigProvider`, a
+React context singleton, so a component resolved from the second copy reads an empty context
+and renders unthemed with no error and no warning. Because it only reproduces under a linked
+install, it looks like a bug in this library that disappears the moment you publish.
+
+Consuming apps must also set `resolve.dedupe` for `react`, `react-dom`, and `antd`, since a
+local checkout has its own `node_modules`.
+
 ### Publishing to npm
 
 The package is published publicly (the source is public anyway). Publishing is
 tag-driven via
-[.github/workflows/publish-workflow.yml](.github/workflows/publish-workflow.yml)
-and requires the `NPM_TOKEN` repository secret (an npm automation token with
-publish rights on the `@j2-health` org).
+[.github/workflows/publish-workflow.yml](.github/workflows/publish-workflow.yml).
+
+There is **no publish token**. npm authenticates the release through trusted
+publishing (OIDC): npm is configured to trust this repository and this workflow
+file by name, and GitHub mints a short-lived identity token for the job. Two
+consequences worth knowing before you change anything here:
+
+- **Renaming or moving `publish-workflow.yml` breaks publishing.** The trusted
+  publisher is matched on the exact filename, case-sensitive. Update it on
+  npmjs.com in the same change.
+- **Do not lower `.node-version` below 24.5.0.** Trusted publishing needs
+  npm >= 11.5.1, which is exactly what Node 24.5.0 ships. The workflow asserts
+  this rather than letting it surface later as an unexplained 401.
 
 To release a new version from `main`:
 
@@ -109,5 +156,7 @@ $ npm version minor        # or patch / major — bumps package.json and creates
 $ git push origin main --follow-tags
 ```
 
-The workflow verifies the tag matches `package.json`, runs lint and tests,
-builds the library, and publishes.
+The workflow packs the tarball and builds a scratch consumer against it, then
+verifies the tag matches `package.json`, runs lint, tests and type-check, builds
+the library, and publishes. Provenance is generated automatically by trusted
+publishing, so `--provenance` is not passed.

package/dist/index.cjs

@@ -10,7 +10,7 @@ require("@highcharts/react/options/Accessibility.js");
 require("@highcharts/react/options/Exporting.js");
 const server = require("react-dom/server");
 const cx = require("classnames");
-const lodash = require("lodash");
+const cloneDeep = require("lodash/cloneDeep.js");
 const formikAntd = require("formik-antd");
 const formik = require("formik");
 require("@highcharts/react/series/Venn.js");
@@ -1466,7 +1466,7 @@ const ValueInput = ({
   }
 };
 const copyFilterGroups = (filterGroups) => {
-  return lodash.cloneDeep(filterGroups);
+  return cloneDeep(filterGroups);
 };
 const addFilter = (filter, filterGroups) => {
   const copy = copyFilterGroups(filterGroups);