@arismachina/design-system

Standalone global package — shared UI primitives for Protos and Gemba. Both products use this repo independently; it is not embedded in either codebase.

This is its own repo

• Publish to npm (or your private registry) as @arismachina/design-system.
• Consume from Protos and Gemba via npm or Git.
• No dependency on either product; they depend on this package.

Principles

• Every component accepts className and merges with cn() (clsx + tailwind-merge).
• Semantic tokens only (e.g. bg-primary, text-muted-foreground). No raw colors.
• CVA variant patterns; Radix accessibility preserved.

Making this a new repo

1. Copy this folder to the root of a new Git repo (e.g. arismachina-design-system).
2. Or from inside this folder run:

   git init
   git remote add origin https://github.com/arismachina/arismachina-design-system.git

3. Update package.json → repository.url to your real repo URL.
4. Publish (see below) or let products install from Git.

Publish to npm

npm run build
npm publish

For a scoped package with a private registry, set publishConfig in package.json (e.g. "registry": "https://your-registry.com/").

Install in products (use independently)

From npm (after publish)

Protos and Gemba add the same dependency:

pnpm add @arismachina/design-system
# or
npm install @arismachina/design-system

From Git (before or without publish)

Protos (protos-v2/frontend2/package.json):

"dependencies": {
  "@arismachina/design-system": "git+https://github.com/arismachina/arismachina-design-system.git#main"
}

Gemba (aris-troubleshooting/frontend/ui/package.json):

"dependencies": {
  "@arismachina/design-system": "git+https://github.com/arismachina/arismachina-design-system.git#main"
}

Use a tag or commit hash instead of #main for a fixed version.

From local path (development)

While developing the design system, either product can link it:

"@arismachina/design-system": "file:../../path/to/arismachina-design-system"

Or use pnpm link / npm link.

Peer dependencies

• react >= 18
• react-dom >= 18

Consumers need Tailwind (v3 or v4) and the semantic theme (preset or CSS variables) so classes like bg-primary resolve. See CONSUMING.md for Protos vs Gemba setup.

Tailwind preset (Phase 2)

Use the preset so semantic utilities (bg-primary, text-muted-foreground, etc.) resolve:

// tailwind.config.js (Tailwind v3)
module.exports = {
  presets: [require("@arismachina/design-system/preset")],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@arismachina/design-system/dist/**/*.js",
  ],
};

Also valid: require("@arismachina/design-system/tailwind-preset").

Optional: base styles (semantic tokens)

To get default token values (light/dark) without defining CSS variables yourself, import once in your app:

// e.g. in main.tsx or your root CSS
import "@arismachina/design-system/styles";

Or in CSS: @import "@arismachina/design-system/styles";
This sets --primary, --muted, --background, etc. You can override any variable in your own :root / .dark.

Usage

import { Button, cn } from "@arismachina/design-system";

<Button variant="default" size="sm" className="my-2">Click</Button>