@yanolja-next/design-core 0.0.1 → 0.1.0

package/package.json

@@ -1,7 +1,71 @@
 {
   "name": "@yanolja-next/design-core",
-  "version": "0.0.1",
-  "description": "NEXT Hub design system (design-core). Placeholder so Trusted Publishing can be set up. Real releases come from yanolja-org/next-hub.",
-  "license": "UNLICENSED",
-  "repository": { "type": "git", "url": "git+https://github.com/yanolja-org/next-hub.git" }
-}
+  "private": false,
+  "version": "0.1.0",
+  "description": "Product-neutral React parts of the Yanolja NEXT design system, with their prebuilt CSS",
+  "type": "module",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "AGENTS.md",
+    "RULES.md",
+    "catalog.json",
+    "llms.txt",
+    "skill"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yanolja-org/next-hub.git",
+    "directory": "design-system/core"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.3.3",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^5.9.3",
+    "unplugin-dts": "^1.0.3",
+    "vite": "^7.3.3"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.4.1",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.5.1",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-toast": "^1.3.1",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0",
+    "@yanolja-next/design-tokens": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "scripts": {
+    "build": "vite build && tailwindcss -i src/styles.css -o dist/styles.css --minify",
+    "agent-files": "node scripts/write-agent-files.ts"
+  }
+}

package/skill/SKILL.md

@@ -0,0 +1,38 @@
+---
+name: nexthub-design
+description: Builds or changes React screens with the Yanolja NEXT design system (@yanolja-next/design-core and @yanolja-next/design-tokens). Use it when you build or change a React screen in a repository that has @yanolja-next/design-core, or when the user mentions the design system, shared parts, design tokens, or moving from @yanolja-next/next-hub-ui.
+---
+
+# nexthub-design
+
+Pick parts by intent from the design core catalog, keep screen CSS to layout, and put a missing part in the product kit.
+
+## Find the catalog
+
+1. Read `node_modules/@yanolja-next/design-core/catalog.json`. If it is not there, install the package first (step 1 below).
+2. In the next-hub repository, read `design-system/core/src/catalog.ts` and the kit catalogs in `design-system/kits/*/src/catalog.ts` instead.
+3. If the installed version and the repository differ, the installed version is correct for that product.
+
+## Steps
+
+1. Install: `pnpm add @yanolja-next/design-tokens @yanolja-next/design-core pretendard`. If the app uses React 18, stop and tell the user. The parts need React 19.
+2. CSS: at the app entry, import `pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css`, `@yanolja-next/design-tokens/fonts.css` and `@yanolja-next/design-core/styles.css`. If the tokens package ships a theme for the product, import it after them. If the repository runs Tailwind, add `@yanolja-next/design-tokens/tailwind.css` to its Tailwind entry. Do not use `@import 'tailwindcss'`, because its preflight removes the backgrounds and borders of the parts. Import the theme and the utilities only, as `README.md` shows.
+3. App setup: follow `README.md` "App setup". An English app calls `setLocale('en')` at the entry and in the test setup. A router app wraps the app in `LinkProvider`. Add `ToastProvider` and the sign-out route. Add the jsdom stubs from `README.md` "Tests in jsdom" to the test setup.
+4. Theme: if the product colours differ, do not make a theme file. Ask the user which semantic values must change. A theme is a design decision.
+5. Pick a part: write in one line what you want to build. Find it in `catalog.json` by `intent` and `use`. If `avoid` matches your case, go to an entry in `instead`. Read the rule it names in `RULES.md` and its props in `dist/index.d.ts`. In the next-hub workspace, `dist` exists only after a build, so read the source in `design-system/core/src/components`.
+6. Screen CSS holds layout only: grids, column widths, spacing between sections and one-off positions. Do not build a box, a text style, a state or a hover in screen CSS.
+7. No part fits: build it in that repository's product kit with a catalog entry. If another product kit already has a part with the same intent, open an issue or a next-hub pull request to move it to core.
+
+## Move from @yanolja-next/next-hub-ui
+
+- Move one app at a time. Do not mix the two packages inside one app for long, because their base CSS rules differ.
+- Map each next-hub-ui part to the core part with the same intent (`Dialog` to `Modal`, `Alert` to `Note` or `FailState`, `Typography` to `PageHead`, `SubHead`, `Meta` or `Prose`). Check the intent in `catalog.json`. Do not map by name only.
+- Button variants: the shadcn `default` variant is a dark fill, but core `primary` is for the one main action of a screen only. Map shadcn `default` to `primary` only for that action, and to `default` for all other buttons. Map `outline` to `default`, `ghost` to `quiet` and `destructive` to `danger`.
+- An icon child of a button becomes the `icon` prop (`<Button icon="plus">`).
+- `PendingButton` becomes `Button loading`. `loading` sets `aria-busy`, not `disabled`. Change `toBeDisabled()` assertions to check `aria-busy="true"`.
+- `window.confirm` becomes `ConfirmModal`.
+- `Toaster` becomes `ToastProvider`, and a component shows a toast with `useToast().show({ title })`. A `toast.success(...)` call outside a component becomes `showToast({ title, tone: 'success' })`.
+- A native `<select>` becomes `Select`. `Select` is a Radix select, so `fireEvent.change` does not work in tests. Open it with a click and click the option.
+- A `<datalist>` becomes `Combobox`. For a list of hundreds of options, use `rank` to put the best matches first and `limit` to cap the open list.
+- A hand-built panel or card (`Panel`, `Card` with its own border and padding) becomes `Container`. Use `Card` only for boxes that sit side by side.
+- A "Back" link on a detail screen becomes `PageHead crumbs`.