@lincros-ui/components 0.1.1

package/README.md

@@ -0,0 +1,270 @@
+# LaisaUI Components
+
+A comprehensive React component library for the Torre Frontend project, built on top of shadcn/ui and Radix UI primitives.
+
+## Overview
+
+LaisaUI 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/LaisaUI
+   npm run build
+   ```
+
+2. **Link the package:**
+   ```bash
+   cd /home/tom/git/LaisaUI
+   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.