npm package: @lincros-ui/components
Description: React component library based on shadcn/ui compatible with Lincros React UI
Author: Antonio Andrietti Neto
Latest version: 0.2.28

# lincros-ui Components

A comprehensive React component library for the Torre Frontend project, built on top of shadcn/ui and Radix UI primitives.

## Overview

lincros-ui contains all UI components, hooks, utilities, and styles extracted from the Torre Frontend project. This package is designed to be used as a shared component library across Torre projects.

## Installation

```bash
npm install @lincros-ui/components
```

## Peer Dependencies

This package requires the following peer dependencies:

```json
{
  "react": "^18.3.1",
  "react-dom": "^18.3.1"
}
```

## Usage

### Importing Components

```tsx
import { Button, Card, Input } from '@lincros-ui/components';

function MyComponent() {
  return (
    <Card>
      <Input placeholder="Enter text" />
      <Button>Submit</Button>
    </Card>
  );
}
```

### Importing Styles

```tsx
import '@lincros-ui/components/styles';
```

### Using Hooks

```tsx
import { useToast, useTenant } from '@lincros-ui/components';

function MyComponent() {
  const { toast } = useToast();
  const { currentTenant } = useTenant();

  return <div>...</div>;
}
```

## Package Structure

```
dist/
├── index.js          # Main component exports
├── index.js.map      # Source maps
├── styles/
│   ├── index.js      # Design tokens and styles
│   └── *.css         # CSS files
```

## Components Included

### UI Components (shadcn/ui based)
- Accordion, Alert, AlertDialog
- Avatar, Badge, Button
- Card, Carousel, Chart
- Checkbox, Collapsible, Command
- Dialog, Drawer, DropdownMenu
- Form, HoverCard, Input
- Label, Menubar, NavigationMenu
- Pagination, Popover, Progress
- RadioGroup, ScrollArea, Select
- Separator, Sheet, Sidebar
- Skeleton, Slider, Switch
- Table, Tabs, Textarea
- Toast, Toggle, Tooltip
- And more...

### Business Components
- Flow Editor and Flow Execution components
- Webhook management components
- WhatsApp integration components
- Motorista (Driver) management
- Credential management
- Authentication components

### Hooks
- useAuth, useAuthContext
- useTenant, usePermissions
- useFlows, useFlowEditor
- useWhatsApp, useWhatsAppTriggers
- And many more...

### Utilities
- `cn()` - Class name merger (clsx + tailwind-merge)
- Date formatters
- String formatters
- Node styling utilities
- Webhook utilities

## Important Notes

### External Dependencies

This library has external dependencies on Torre-specific business logic modules. When using this package, you must provide these implementations in your consuming project:

- `@/domain/*` - Domain entities
- `@/application/*` - Application use cases
- `@/infrastructure/*` - Infrastructure repositories
- `@/services/*` - API services
- `@/lib/*` - Utility libraries
- Contexts (TenantContext, EdgeLabelContext, SSOContext, AuthProvider)
- Stores (execution store)
- Types (ErrorType)
- Constants (routes)

These are marked as external in the build and will not be bundled with the library.

### TypeScript

Type definitions are not included in the current version due to the external dependencies architecture. You can use the components with TypeScript by configuring path aliases in your project's `tsconfig.json`:

```json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@lincros-ui/components": ["./node_modules/@lincros-ui/components/dist"]
    }
  }
}
```

### Tailwind CSS Configuration

To use the components with proper styling, you need to:

1. **Include the library in your Tailwind content paths:**

```js
// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@lincros-ui/components/**/*.{js,jsx}"
  ],
  // ... rest of config
}
```

2. **Import design tokens (optional):**

```ts
import { acordeDesignTokens } from '@lincros-ui/components/styles';

// Use in your Tailwind config
export default {
  theme: {
    extend: {
      colors: acordeDesignTokens.colors,
      fontSize: acordeDesignTokens.typography.fontSize,
      // ... other tokens
    }
  }
}
```

3. **Import CSS variables:**

Make sure your project includes the necessary CSS variables for theme colors. See the Torre Frontend project's global.css for reference.

## Development

### Building

```bash
npm run build
```

### Development Mode

```bash
npm run dev
```

This will watch for changes and rebuild automatically.

### Type Checking

```bash
npm run typecheck
```

### Linting

```bash
npm run lint
```

## Publishing

Before publishing to NPM:

1. Update the version in `package.json`
2. Build the package: `npm run build`
3. Publish: `npm publish`

For scoped packages:
```bash
npm publish --access public
```

## Using Locally in Torre Frontend

To use this package locally before publishing:

1. **Build the package:**
   ```bash
   cd /home/tom/git/lincros-ui
   npm run build
   ```

2. **Link the package:**
   ```bash
   cd /home/tom/git/lincros-ui
   npm link
   ```

3. **Link in Torre Frontend:**
   ```bash
   cd /home/tom/git/torre_frontend
   npm link @lincros-ui/components
   ```

4. **Update imports in Torre Frontend:**
   ```tsx
   // Before
   import { Button } from '@/presentation/components/ui/button';

   // After
   import { Button } from '@lincros-ui/components';
   ```

5. **Update Tailwind config:**
   ```js
   content: [
     "./src/**/*.{js,ts,jsx,tsx}",
     "./node_modules/@lincros-ui/components/**/*.{js,jsx}"
   ]
   ```

## License

MIT

## Contributing

This package is maintained as part of the Torre Frontend project. For issues or contributions, please refer to the main project repository.