npm package: @salah_salem_177/shared-shadcn-ui
Description: Shared shadcn-style UI components for shell and MFE services (same repo or separate repos)
Latest version: 1.0.0

# @companies/shared-shadcn-ui

Shared shadcn-style UI components for the shell and all MFE services. **Works in the same repo and in separate repos** (publish to npm and install in any service).

## Contents

- **Components:** `Button`, `Input`, `Card`, `Alert` (and subcomponents)
- **Utility:** `cn()` for merging Tailwind classes
- **Theme:** `theme.css` (CSS variables) and `tailwind-theme.js` (Tailwind v3 theme extension)

---

## Same repo (monorepo)

When the shell and services live in the same repo, use a `file:` dependency:

```json
"dependencies": {
  "@companies/shared-shadcn-ui": "file:../shared-shadcn-ui"
}
```

1. From repo root:  
   `npm install --prefix shared-shadcn-ui`  
   `npm run build --prefix shared-shadcn-ui`  
   then `npm install` in each app (shell, mfe-service-d, etc.).

2. In your app:
   ```tsx
   import { Button, Alert, AlertTitle, AlertDescription } from "@companies/shared-shadcn-ui";
   ```

3. **Tailwind:** Add the package to `content` so classes are not purged:
   - **Tailwind v3:**  
     `content: ["./src/**/*.{js,ts,jsx,tsx}", "./node_modules/@companies/shared-shadcn-ui/dist/**/*.js"]`
   - **Tailwind v4 (e.g. Next):**  
     In your main CSS:  
     `@source "../../node_modules/@companies/shared-shadcn-ui/dist/**/*.js";`

4. **Theme:** Either import the package theme once, or copy the variables from `src/theme.css` into your app:
   ```css
   @import "@companies/shared-shadcn-ui/theme.css";
   ```
   For Tailwind v3, extend your theme:  
   `const { theme } = require("@companies/shared-shadcn-ui/tailwind-theme.js");` then `theme: { extend: theme }`.

---

## Separate repos (services in different repositories)

When services (or the shell) are in **other repos**, publish this package to a registry and install it like any npm package.

### 1. Publish the package

- Publish to a **private npm registry** (e.g. Azure Artifacts, GitHub Packages, Verdaccio), or to the public npm registry if appropriate.
- In `shared-shadcn-ui`: bump version, then for example:
  ```bash
  npm publish
  ```
  (Use your org’s publish config: `npm publish --registry https://...` for private.)

### 2. In any service (any repo)

```bash
npm install @companies/shared-shadcn-ui
```

Or with a specific version:

```bash
npm install @companies/shared-shadcn-ui@1.0.0
```

### 3. Use in code

Same as in the same repo:

```tsx
import { Button, Input, Card, Alert, AlertTitle, AlertDescription } from "@companies/shared-shadcn-ui";
```

### 4. Tailwind and theme

- Add the package to Tailwind `content` (or Tailwind v4 `@source`) as above, using:
  `./node_modules/@companies/shared-shadcn-ui/dist/**/*.js`
- Import `theme.css` and, for Tailwind v3, extend theme with `tailwind-theme.js` as above.

No path to the shell or to this repo is needed; everything comes from the installed package.

---

## Adding new components

1. Add the component under `src/components/ui/` (use `cn` from `src/lib/utils.ts`).
2. Export it from `src/index.ts`.
3. Run `npm run build`.
4. For same repo: reinstall in apps that use it. For separate repos: bump version and publish, then upgrade the dependency in each service.

---

## Build

```bash
cd shared-shadcn-ui
npm install
npm run build
```

Produces `dist/index.js`, `dist/index.mjs`, `dist/index.d.ts`, and `dist/theme.css`.