@chiblinx/ui

Reusable React + TypeScript design system for Labournet-style enterprise SaaS products.

npm package names must be lowercase, so the publishable package is @chiblinx/ui.

Install

npm install @chiblinx/ui

import { Badge, Button, Card } from "@chiblinx/ui";
import "@chiblinx/ui/styles.css";

export function Example() {
  return (
    <Card>
      <Badge variant="success">Approved</Badge>
      <Button>Continue</Button>
    </Card>
  );
}

Local Development

npm install
npm run storybook

Storybook runs locally at http://localhost:6006.

Package Build

npm run build

The library outputs:

dist/
  index.cjs
  index.mjs
  index.d.ts
  styles.css

The package publishes both ESM and CommonJS entry points:

• ESM: @chiblinx/ui -> dist/index.mjs
• CommonJS: @chiblinx/ui -> dist/index.cjs
• CSS: @chiblinx/ui/styles.css

Quality Gates

npm run lint
npm run typecheck
npm run test
npm run test:a11y
npm run build:package
npm run build:storybook
npm run test:visual

npm run quality runs linting, strict TypeScript, unit tests, accessibility tests, package build, and Storybook build. npm run quality:full also runs Playwright visual regression tests.

Visual regression testing uses Playwright against Storybook stories. Install Playwright browsers before first use:

npx playwright install

Documentation Standards

Each Storybook story should document:

• Purpose
• Props
• Variants
• Usage examples
• Accessibility notes
• Do / don't guidance
• Code snippets

Release Flow

Changesets controls versioning:

npm run changeset
npm run version-packages
npm run release

Before publishing, verify npm authentication and package contents:

npm whoami
npm run quality
npm run pack:dry-run

For a manual publish, run:

npm publish --access public

prepublishOnly runs the quality gate before npm publish. The scoped package is configured with publishConfig.access=public.

Example versions:

0.1.0
0.1.1
0.2.0

License

UNLICENSED. This package is proprietary unless a separate license is provided.