@skill-academy/uikit 0.0.2

package/README.md

@@ -0,0 +1,115 @@
+# @skill-academy/uikit
+
+Shared UI component library for the Skill Management Platform and Tech Qualify Academy FE apps. Built with React, Radix UI primitives, and Tailwind CSS utilities.
+
+## Install
+
+From a sibling app (e.g. `tech-qualify-learners-app`):
+
+```bash
+yarn add file:../skill-management-ui
+# or with workspaces: "@skill-academy/uikit": "workspace:*"
+```
+
+The package is published as `@skill-academy/uikit`; when using a local path, the folder may still be named `skill-management-ui`.
+
+## Peer dependencies
+
+The consuming app must install:
+
+- `react`, `react-dom`
+- All `@radix-ui/*` packages used by the components you import (see `package.json` peerDependencies)
+- `class-variance-authority`, `clsx`, `tailwind-merge`
+
+Optional (only if you use components that need them): `cmdk`, `date-fns`, `embla-carousel-react`, `input-otp`, `lucide-react`, `next-themes`, `react-day-picker`, `react-hook-form`, `react-resizable-panels`, `recharts`, `sonner`, `vaul`.
+
+## Styling (theme and variables)
+
+This package ships the same design-system styles as **Skill Management Platform Designs**. Import them in your app’s main CSS (or entry) so tokens and base styles apply.
+
+| File | Use when |
+|------|----------|
+| `@skill-academy/uikit/styles/theme.css` | **Tailwind v4**: full theme (`:root` / `.dark` variables, `@theme inline`, `@layer base`). Import once so Tailwind can process it. |
+| `@skill-academy/uikit/styles/theme-variables.css` | **Tailwind v3** or no Tailwind: variables only. Use in your global CSS; for Tailwind v3, extend your `theme` from these vars if needed. |
+| `@skill-academy/uikit/styles/index.css` | Tailwind v4 convenience entry; currently just imports `theme.css`. |
+
+**Example (Tailwind v4):**
+
+```css
+/* In your app’s main CSS, e.g. src/index.css */
+@import '@skill-academy/uikit/styles/theme.css';
+```
+
+**Example (Tailwind v3):**
+
+```css
+/* In your app’s main CSS */
+@import '@skill-academy/uikit/styles/theme-variables.css';
+```
+
+Then use the preset so utilities like `bg-primary` and `rounded-lg` match:
+
+```js
+// tailwind.config.js
+module.exports = {
+  presets: [require('@skill-academy/uikit/tailwind.preset.js')],
+  content: ['./src/**/*.{js,ts,jsx,tsx}', './node_modules/@skill-academy/uikit/dist/**/*.js'],
+};
+```
+
+**Fonts:** `@skill-academy/uikit/styles/fonts.css` is a placeholder; add `@font-face` or font imports there in your app if you use custom fonts.
+
+## Tailwind setup
+
+Components rely on Tailwind utility classes and design tokens (e.g. `bg-primary`, `text-card-foreground`, `rounded-xl`). The library does **not** bundle Tailwind.
+
+1. **Use Tailwind** in your app (Tailwind v3 or v4 with PostCSS or Vite plugin).
+
+2. **Provide the same design tokens** so components look correct. The easiest way is to import this package’s styles (see **Styling** above). Alternatively, in your Tailwind config extend `theme` with matching colors and border radius (e.g. `primary`, `destructive`, `card`, `muted`, `accent`, `border`, `input`, `ring`, `sidebar`).
+
+3. **Content paths**: In `tailwind.config.js`, add the library’s dist (or source) so classes used by the components are not purged:
+   ```js
+   content: [
+     './src/**/*.{js,ts,jsx,tsx}',
+     './node_modules/@skill-academy/uikit/dist/**/*.js',
+   ],
+   ```
+
+## Usage
+
+```tsx
+import { Button, Card, CardHeader, CardTitle, CardContent, cn } from '@skill-academy/uikit';
+
+export function MyPage() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Title</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Button>Submit</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+All exported components and utilities are listed in `src/index.ts`.
+
+## Build
+
+```bash
+yarn install
+yarn build
+```
+
+- **JS:** `yarn build:js` (or `tsup`) → `dist/index.js` (ESM), `dist/index.cjs` (CJS), `dist/index.d.ts` (types).
+- **CSS:** `yarn build:css` runs Tailwind v4 (PostCSS) on `styles/tailwind-src.css` → `styles/tailwind.css` (includes theme + utilities used by the package). Full build runs both.
+
+## Development
+
+```bash
+yarn dev
+```
+
+Runs the build in watch mode.