@teamblind-chorus/ui 1.0.0

package/eslint/test.mjs

@@ -0,0 +1,135 @@
+// Tests for the Chorus ESLint rules. Run: `node eslint/test.mjs` (needs eslint
+// installed). Uses ESLint 9's flat-config RuleTester — no extra test runner.
+import { RuleTester } from "eslint";
+import { rules } from "./rules.js";
+
+const tester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    parserOptions: { ecmaFeatures: { jsx: true } },
+  },
+});
+
+tester.run("no-raw-hex", rules["no-raw-hex"], {
+  valid: [
+    "const c = 'var(--sys-color-surface)';",
+    "<div style={{ color: 'var(--sys-color-onSurface)' }} />",
+    "<a href='#section'>jump</a>", // '#section' is not a hex color
+  ],
+  invalid: [
+    { code: "const c = '#1A1A1A';", errors: [{ messageId: "rawHex" }] },
+    { code: "<div style={{ background: '#fff' }} />", errors: [{ messageId: "rawHex" }] },
+    { code: "const c = `border: 1px solid #abcdef`;", errors: [{ messageId: "rawHex" }] },
+  ],
+});
+
+tester.run("no-tailwind-color", rules["no-tailwind-color"], {
+  valid: [
+    '<div className="flex items-center gap-2" />',
+    '<div className={`flex ${active ? "font-bold" : ""}`} />',
+  ],
+  invalid: [
+    { code: '<div className="bg-white" />', errors: [{ messageId: "twColor" }] },
+    { code: '<span className="text-gray-500 font-medium" />', errors: [{ messageId: "twColor" }] },
+    { code: '<div className={`p-2 ${x ? "hover:bg-blue-500" : ""}`} />', errors: [{ messageId: "twColor" }] },
+    { code: '<div className={clsx("border-gray-200", base)} />', errors: [{ messageId: "twColor" }] },
+  ],
+});
+
+tester.run("no-raw-cta", rules["no-raw-cta"], {
+  valid: [
+    "<Button variant='standard'>Save</Button>",
+    "<a href='/jobs'>Jobs</a>", // real navigation link
+  ],
+  invalid: [
+    { code: "<button onClick={f}>x</button>", errors: [{ messageId: "rawButton" }] },
+    { code: "<a onClick={f}>act</a>", errors: [{ messageId: "anchorAsButton" }] },
+    { code: "<a>no href</a>", errors: [{ messageId: "anchorAsButton" }] },
+  ],
+});
+
+tester.run("no-offscale-space", rules["no-offscale-space"], {
+  valid: [
+    "<div style={{ gap: 'var(--sys-layout-inline-sm)' }} />",
+    "<div style={{ padding: 0 }} />",
+    "<div style={{ width: 48 }} />", // width is not a token-only prop
+    "<div style={{ padding: 'calc(var(--sys-layout-page-md) + 4px)' }} />",
+    "<div style={{ fontSize: dynamic }} />",
+  ],
+  invalid: [
+    { code: "<div style={{ fontSize: 13 }} />", errors: [{ messageId: "offScale" }] },
+    { code: "<div style={{ gap: 6 }} />", errors: [{ messageId: "offScale" }] },
+    { code: "<div style={{ padding: '10px 12px' }} />", errors: [{ messageId: "offScale" }] },
+    { code: "<div style={{ borderRadius: 6 }} />", errors: [{ messageId: "offScale" }] },
+    { code: "<div style={{ lineHeight: 1.4 }} />", errors: [{ messageId: "offScale" }] },
+  ],
+});
+
+tester.run("no-fullbleed-wrapper", rules["no-fullbleed-wrapper"], {
+  valid: [
+    // full-bleed as a direct child of a zero-padding container — correct
+    "<main><Feed channel='A' /></main>",
+    "<div><Tabs value='a'><Tab value='a'>x</Tab></Tabs></div>",
+    // padding-BLOCK on the wrapper does not touch the rail
+    "<div style={{ paddingBlock: 'var(--sys-layout-stack-md)' }}><Feed /></div>",
+    "<div className='py-4'><Section label='x' /></div>",
+    // negative-margin opt-out inside a bounded surface
+    "<div style={{ paddingInline: 'var(--sys-layout-container-md)' }}><Feed style={{ marginInline: 'calc(-1 * var(--sys-layout-container-md))' }} /></div>",
+    // padded wrapper around a NON-full-bleed component is fine
+    "<div className='px-4'><NavCard /></div>",
+    // full-bleed child inside a Chorus host (embedded composition) is not
+    // flagged by the wrapper rule — only plain HTML containers are checked
+    "<Carousel label='x'><Tabs value='a' /></Carousel>",
+  ],
+  invalid: [
+    { code: "<div style={{ paddingInline: 'var(--sys-layout-page-md)' }}><Feed /></div>", errors: [{ messageId: "wrappedInPadding" }] },
+    { code: "<div className='px-4'><Feed /></div>", errors: [{ messageId: "wrappedInPadding" }] },
+    { code: "<section className='px-6'><PostCarousel items={items} /></section>", errors: [{ messageId: "wrappedInPadding" }] },
+    { code: "<Feed style={{ paddingInline: 16 }} />", errors: [{ messageId: "directPadding" }] },
+    { code: "<TabBar className='px-2' />", errors: [{ messageId: "directPadding" }] },
+  ],
+});
+
+tester.run("no-redundant-link", rules["no-redundant-link"], {
+  valid: [
+    "<Link href='/jobs'>Jobs</Link>", // text link, not a component wrapper
+    "<a href='/post/1'>read</a>",
+    "<Feed channel='A' onClick={go} />", // the in-contract path
+  ],
+  invalid: [
+    { code: "<Link href='/post/1'><Feed channel='A' /></Link>", errors: [{ messageId: "redundantLink" }] },
+    { code: "<a href='/post/1'><Feed channel='A' /></a>", errors: [{ messageId: "redundantLink" }] },
+    { code: "<Link href='/s'><Section label='x' /></Link>", errors: [{ messageId: "redundantLink" }] },
+  ],
+});
+
+tester.run("no-reinvented-family", rules["no-reinvented-family"], {
+  valid: [
+    // the real families — no primitive cluster
+    "<ProfileHeader name='현직자 Q&A' avatar={a} meta='공개 · 팔로우 4,218' />",
+    "<Metadata name={handle} subhandle={sub} timestamp={t} />",
+    // middot inside a single text run is content, not a structural separator
+    "<p>공개 · 팔로우 4,218</p>",
+    // a heading with no nearby Thumbnail/Avatar is fine
+    "<header><h1>Title</h1><p>sub</p></header>",
+    // heading legitimately inside a Chorus component — not a reinvention
+    "<Card><Thumbnail src={s} /><h2>{name}</h2></Card>",
+  ],
+  invalid: [
+    {
+      code: "<header style={{ display: 'flex' }}><Thumbnail src={s} /><div><h1>{name}</h1><p>{meta}</p></div><Button>언팔로우</Button></header>",
+      errors: [{ messageId: "reinventedIdentity" }],
+    },
+    {
+      code: "<div><Avatar src={s} /><h2>{name}</h2></div>",
+      errors: [{ messageId: "reinventedIdentity" }],
+    },
+    {
+      code: "<div><span>{handle}</span> · <span>{sub}</span></div>",
+      errors: [{ messageId: "manualMetaSeparator" }],
+    },
+  ],
+});
+
+console.log("✓ all Chorus ESLint rule tests passed");

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@teamblind-chorus/ui",
+  "version": "1.0.0",
+  "description": "Chorus React components. Ships prebuilt ESM + CJS bundles (`dist/`) and a single `styles.css`; import `@teamblind-chorus/tokens/tokens.css` + `@teamblind-chorus/ui/styles.css` once at the app entry. The contract every component honors lives in schema/components/<family>/<sub>.spec.json; see schema/manifest.json for the inventory.",
+  "license": "MIT",
+  "author": "Teamblind, Inc.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/teamblind/chorus.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/teamblind/chorus#readme",
+  "bugs": "https://github.com/teamblind/chorus/issues",
+  "keywords": [
+    "design-system",
+    "react",
+    "components",
+    "chorus"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./icons": {
+      "import": {
+        "types": "./dist/icons/index.d.ts",
+        "default": "./dist/icons/index.js"
+      },
+      "require": {
+        "types": "./dist/icons/index.d.cts",
+        "default": "./dist/icons/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css",
+    "./eslint": "./eslint/index.js",
+    "./agents/": "./agents/",
+    "./agents/AGENTS.md": "./agents/AGENTS.md",
+    "./agents/catalog.md": "./agents/catalog.md",
+    "./agents/manifest.json": "./agents/manifest.json",
+    "./agents/usage.json": "./agents/usage.json",
+    "./agents/DESIGN.md": "./agents/DESIGN.md",
+    "./agents/LOVABLE.md": "./agents/LOVABLE.md",
+    "./agents/reconstruct.md": "./agents/reconstruct.md",
+    "./agents/images.md": "./agents/images.md",
+    "./agents/patterns/": "./agents/patterns/",
+    "./agents/components/": "./agents/components/",
+    "./placeholder.png": "./placeholder.png",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "agents",
+    "eslint",
+    "placeholder.png",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "build-usage": "node scripts/build-usage.mjs",
+    "copy-agents": "node scripts/copy-agents.mjs",
+    "test:eslint": "node eslint/test.mjs",
+    "prepublishOnly": "npm run build-usage && npm run copy-agents && npm run build"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@teamblind-chorus/tokens": "^1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "eslint": "^9.39.4",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3"
+  }
+}