npm package: @marketingauto/shared-ui
Description: A shared UI library containing reusable React components, icons, and Tailwind CSS styles for MarketingAuto applications.
Latest version: 0.1.33

# @marketingauto/shared-ui

A shared UI library containing reusable React components, icons, and Tailwind CSS styles for MarketingAuto applications.

## Installation

```bash
npm install @marketingauto/shared-ui
```

## Package Contents

### Components
- **Sidebar** - A customizable sidebar navigation component with items, collapsible support, and flexible rendering

### Icons
70+ SVG icons exported as React components, including:
- Navigation icons (arrows, chevrons, expand/collapse)
- UI icons (close, dots, filter, grid, table)
- Feature icons (calendar, chat, mail, phone, SMS)
- Action icons (upload, download, copy, modify, trash)
- Brand icons (Google, Microsoft, logos)
- Status icons (checkmark, warning, notification, spinner)

All icons are prefixed with `Svg` (e.g., `SvgArrowDown`, `SvgCalendar`, `SvgUser`)

### Styles
- **CSS Variables** - Theme colors and design tokens in `variables.css`
- **Component Styles** - Pre-built component styles in `components.css`
- **Tailwind Preset** - Shared Tailwind configuration with custom colors, animations, and utilities

## Usage

### Importing Components

```typescript
import { Sidebar } from '@marketingauto/shared-ui';
import type { SidebarProps, SidebarItem } from '@marketingauto/shared-ui';
```

### Importing Icons

```typescript
import { SvgArrowDown, SvgCalendar, SvgUser } from '@marketingauto/shared-ui/icons';

function MyComponent() {
  return (
    <div>
      <SvgUser className="w-6 h-6" />
      <SvgCalendar className="w-5 h-5 text-primary" />
    </div>
  );
}
```

### Importing Styles

```typescript
// In your main CSS file or component
import '@marketingauto/shared-ui/variables.css';
import '@marketingauto/shared-ui/components.css';
```

### Using the Tailwind Preset

In your `tailwind.config.js`:

```javascript
import sharedPreset from '@marketingauto/shared-ui/tailwind-preset';

export default {
  presets: [sharedPreset],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@marketingauto/shared-ui/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // Your custom overrides here
    },
  },
};
```

## Local Development

For developing the shared-ui package alongside your application (e.g., `conecrm-frontend`):

### Method 1: Using npm link (Recommended)

1. **Build and link the package:**
   ```bash
   cd /path/to/shared-ui
   npm run build        # Build the TypeScript
   npm link             # Create global symlink
   ```

2. **Link in your project:**
   ```bash
   cd /path/to/conecrm-frontend
   npm link @marketingauto/shared-ui
   ```

3. **Watch mode for development:**
   In the `shared-ui` directory, run:
   ```bash
   npm run build:watch  # Auto-rebuild on changes
   ```

4. **Restart your dev server** in `conecrm-frontend` to pick up changes.

### Method 2: Using file path (Alternative)

In your project's `package.json`, temporarily use a file reference:

```json
{
  "dependencies": {
    "@marketingauto/shared-ui": "file:../shared-ui"
  }
}
```

Then run:
```bash
npm install
```

### Unlinking after development

```bash
cd /path/to/conecrm-frontend
npm unlink @marketingauto/shared-ui
npm install @marketingauto/shared-ui  # Reinstall from npm
```

## Publishing

Publishing is fully automated via CI/CD. To publish a new version:

1. **Commit your changes:**
   ```bash
   git add .
   git commit -m "feat: add new component/feature"
   ```

2. **Push to the main branch:**
   ```bash
   git push origin main
   ```

The CI/CD pipeline will automatically:
- Bump the package version
- Build the package
- Publish to the npm registry as `@marketingauto/shared-ui`

### Testing the Published Package

After publishing, test the new version in your consuming application:

1. **Unlink the local package** (if using npm link):
   ```bash
   cd /path/to/conecrm-frontend
   npm unlink @marketingauto/shared-ui
   ```

2. **Update to the new version:**
   ```bash
   npm install @marketingauto/shared-ui@latest
   # or specify the exact version
   npm install @marketingauto/shared-ui@0.1.24
   ```

3. **Verify the installation:**
   ```bash
   npm list @marketingauto/shared-ui
   ```

4. **Test your application** to ensure the new package version works correctly.

5. **Update package.json** if needed to lock to a specific version:
   ```json
   {
     "dependencies": {
       "@marketingauto/shared-ui": "0.1.24"
     }
   }
   ```

### Pre-publish Checklist

- [ ] All changes are committed
- [ ] TypeScript builds without errors (`npm run build`)
- [ ] Type checking passes (`npm run typecheck`)
- [ ] Changes have been tested locally in a consuming application (using `npm link`)
- [ ] Ready to push to main branch

## Development Workflow

### Full Development Cycle

1. **Make changes** to components, icons, or styles in `src/`
2. **Export** new components/icons in `src/index.ts` or `src/icons/index.ts`
3. **Test locally:**
   - Build: `npm run build:watch`
   - Link to consuming app: `npm link`
   - Test in `conecrm-frontend` using `npm link @marketingauto/shared-ui`
4. **Publish:** Commit and push to main branch
5. **Test published version:**
   - Unlink local package in consuming app
   - Install new version: `npm install @marketingauto/shared-ui@latest`
   - Verify functionality in consuming app

## Peer Dependencies

This package requires:
- `react` ^18.3.1
- `react-dom` ^18.3.1

Ensure your consuming application has these installed.

## Repository

- **GitHub:** [MarketingAuto/shared-ui](https://github.com/MarketingAuto/shared-ui)
- **npm:** [@marketingauto/shared-ui](https://www.npmjs.com/package/@marketingauto/shared-ui)