@muskanmeet/invoicing-design-system 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Changelog
+
+All notable changes to `@yourteam/invoicing-ui` will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.1.0] - 2026-05-25
+
+### Added
+- Initial extraction of the design system into a publishable npm package.
+- Components: `Avatar`, `Badge`, `Button`, `Card`, `Checkbox`, `Dialog`,
+  `DropdownMenu`, `FormField`, `Input`, `Label`, `RadioGroup`, `Select`,
+  `Separator`, `Switch`, `Table`, `Tabs`, `Textarea`, `Toast`, `Toaster`,
+  `Tooltip`.
+- Hooks: `useToast`, `useMediaQuery`.
+- Utilities: `cn`, `tokens`.
+- Tailwind preset exported as `@yourteam/invoicing-ui/tailwind-preset`.
+- CSS entrypoints: `@yourteam/invoicing-ui/styles.css` and
+  `@yourteam/invoicing-ui/tokens.css`.
+- `tsup`-powered build emitting ESM, CJS, and `.d.ts` to `dist/`.

package/README.md

@@ -1,121 +1,129 @@
-# Invoicing System — Design Reference
+# @yourteam/invoicing-ui
 
-A Next.js + TypeScript reference project for the **Invoicing System** initiative.
-It owns the design system, breakpoints, shadcn-based components, and the final
-screens the development team will consume.
+Design system powering the Invoicing app — design tokens, a Tailwind preset,
+and shadcn-based React components on top of Radix primitives.
 
-> Frontend-only. No Next.js server features (API routes, server actions,
-> server-only data fetching) are used. The app exists purely to design, preview,
-> and hand off UI.
-
-## Quick start
+## Install
 
 ```bash
-npm install
-npm run dev
+npm install @yourteam/invoicing-ui
+# peer deps
+npm install react react-dom tailwindcss tailwindcss-animate
 ```
 
-Open <http://localhost:5000>.
-
-## Routes
+## Usage
 
-| Route             | What it is                                                      |
-| ----------------- | --------------------------------------------------------------- |
-| `/`               | Index of everything in this repo                                |
-| `/design-system`  | Living styleguide — tokens, breakpoints, every component        |
-| `/dashboard`      | Final screen: dashboard with KPIs, activity, recent invoices    |
-| `/invoices`       | Final screen: filterable, sortable invoice list with pagination |
-| `/login`          | Final screen: login                                             |
-| `/signup`         | Final screen: signup                                            |
+### 1. Import the CSS once
 
-## Repo layout
+In your app entry (e.g. `app/layout.tsx`, `pages/_app.tsx`, `main.tsx`):
 
+```ts
+import "@yourteam/invoicing-ui/styles.css";
 ```
-app/                  → Next.js App Router (preview pages only)
-design-system/        → THE design system (future npm package)
-  tokens/             → Design tokens (TS + CSS variables)
-  components/         → shadcn-based components, custom-themed
-  lib/                → Utilities (e.g. cn())
-  styles.css          → Tailwind entry + token import
-  index.ts            → Public barrel — import only from here
-screens/              → Final invoicing screens (consumed via GitHub)
-  _shared/            → Shell layout shared across screens
-  dashboard/          → DashboardScreen
-  invoices/           → InvoicesScreen
-  auth/               → AuthScreen (login + signup)
-  index.ts            → Public barrel
+
+`styles.css` includes `@tailwind base/components/utilities` plus the token
+CSS variables. If you already manage your own Tailwind entry, import just
+the tokens instead:
+
+```css
+@import "@yourteam/invoicing-ui/tokens.css";
 ```
 
-Path aliases:
+### 2. Extend the Tailwind preset
+
+```ts
+// tailwind.config.ts
+import type { Config } from "tailwindcss";
+import preset from "@yourteam/invoicing-ui/tailwind-preset";
+
+export default {
+  presets: [preset],
+  content: [
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+    // include the package so its class names survive purging
+    "./node_modules/@yourteam/invoicing-ui/dist/**/*.{js,mjs,cjs}",
+  ],
+} satisfies Config;
+```
 
-- `@ds/*` → `design-system/*`
-- `@screens/*` → `screens/*`
+### 3. Use components
 
-## Design system
+```tsx
+import { Button, Card, CardContent, tokens } from "@yourteam/invoicing-ui";
 
-Built on top of **shadcn/ui** primitives (Radix + Tailwind) with a custom
-"Modern SaaS" theme: subtle indigo accent, rounded radii, friendly Inter
-typography. All colors are HSL CSS variables (`--ds-*`), so retinting the
-system requires changing tokens only — no component edits.
+export function Example() {
+  return (
+    <Card>
+      <CardContent>
+        <Button>Click me</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
 
-Breakpoints (Tailwind `screens`):
+## Dark mode
 
-| Token | Min width | Target          |
-| ----- | --------- | --------------- |
-| sm    | 480px     | Large phones    |
-| md    | 768px     | Tablets         |
-| lg    | 1024px    | Small laptops   |
-| xl    | 1280px    | Desktops        |
-| 2xl   | 1536px    | Wide displays   |
+Toggle the `.dark` class on `<html>` (or any ancestor) — all tokens swap
+to their dark equivalents automatically.
 
-### Future: extract `design-system/` to an npm package
+## What ships
 
-The folder is intentionally **self-contained**:
+| Entry                                       | What it is                          |
+| ------------------------------------------- | ----------------------------------- |
+| `@yourteam/invoicing-ui`                    | All components, hooks, tokens, `cn` |
+| `@yourteam/invoicing-ui/tailwind-preset`    | Tailwind preset (theme + plugins)   |
+| `@yourteam/invoicing-ui/styles.css`         | Tailwind entry + token CSS vars     |
+| `@yourteam/invoicing-ui/tokens.css`         | Just the token CSS vars             |
 
-- Has its own `tokens/`, `lib/`, `components/`, `styles.css`, and `index.ts`.
-- Has **no inbound imports** from `app/` or `screens/`.
-- Uses only `clsx`, `tailwind-merge`, `class-variance-authority`, `lucide-react`,
-  and `@radix-ui/*` — all standard, framework-agnostic.
+## Development
 
-To publish later:
+```bash
+npm install
+npm run build       # bundle ESM + CJS + d.ts to dist/
+npm run dev         # watch mode
+npm run typecheck
+```
 
-1. Move `design-system/` to its own repo (e.g. `@yourteam/invoicing-ui`).
-2. Add a `package.json` with the same Radix / Tailwind peer deps.
-3. Move the matching parts of `tailwind.config.ts` into a preset the consumer
-   extends, and ship `styles.css` + `tokens.css` as the CSS entrypoint.
-4. Publish. Consumers do `import { Button } from "@yourteam/invoicing-ui"`.
+The build uses [`tsup`](https://tsup.egoist.dev/). Output goes to `dist/`
+with `react`, `react-dom`, `tailwindcss`, and `tailwindcss-animate` left
+external.
 
-This project consumes the design system via the `@ds/*` alias today — after
-extraction, switching to the published package is a find-and-replace.
+## Releasing
 
-## Final screens (for developers)
+This package follows [Semantic Versioning](https://semver.org/) and
+[Keep a Changelog](https://keepachangelog.com/).
 
-The `screens/` folder is what your developers will pull from this GitHub repo.
-Each screen:
+1. Make your changes on a branch.
+2. Add an entry under `## [Unreleased]` in `CHANGELOG.md`.
+3. Bump the version:
+   - `npm version patch` — bug fixes only
+   - `npm version minor` — additive, backward-compatible changes
+   - `npm version major` — breaking changes (renamed exports, removed
+     components, changed token names, etc.)
+4. Move the `Unreleased` block under a new `## [x.y.z] - YYYY-MM-DD`
+   heading.
+5. Publish:
 
-- Is a **client component** (`"use client"`) with no Next.js server APIs.
-- Imports **only** from `@ds/*`. No imports from `app/` or other framework code.
-- Uses mock/static data — wire it to your real API on consumption.
+   ```bash
+   npm publish
+   ```
 
-Consumers can drop these into:
+   `prepublishOnly` runs `clean` + `build` automatically.
 
-- A **Next.js + TypeScript** project (just place under `app/` or `pages/` and
-  import the screen).
-- A **plain React + TypeScript** project (Vite, CRA, etc.) — the screens have
-  no Next-specific dependencies.
+6. Push the tag created by `npm version` so the release is traceable:
 
-### Caveat — navigation
+   ```bash
+   git push --follow-tags
+   ```
 
-`AppShell` uses plain `<a>` tags for portability. In a Next.js host, replace
-them with `next/link` if you want client-side navigation. The screens
-themselves (`DashboardScreen`, `InvoicesScreen`, `AuthScreen`) do not contain
-any links that depend on the framework.
+### What counts as breaking
 
-## Scripts
+- Removing or renaming an exported component, hook, or token.
+- Changing a component's required props or default behavior.
+- Renaming a CSS variable or Tailwind token (`--ds-*`, color names, etc.).
+- Changing the Tailwind preset in a way that alters existing class output.
 
-| Script          | Description                  |
-| --------------- | ---------------------------- |
-| `npm run dev`   | Start dev server on `:5000`  |
-| `npm run build` | Production build             |
-| `npm run start` | Run production build         |
-| `npm run lint`  | Run ESLint                   |
+Anything else (new components, new props with defaults, new tokens, internal
+refactors) is minor or patch.