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

npm install @lincros-ui/components

Peer Dependencies

This package requires the following peer dependencies:

{
  "react": "^18.3.1",
  "react-dom": "^18.3.1"
}

Usage

Importing Components

import { Button, Card, Input } from '@lincros-ui/components';

function MyComponent() {
  return (
    <Card>
      <Input placeholder="Enter text" />
      <Button>Submit</Button>
    </Card>
  );
}

Importing Styles

import '@lincros-ui/components/styles';

Using Hooks

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:

{
  "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:

// 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):

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

npm run build

Development Mode

npm run dev

This will watch for changes and rebuild automatically.

Type Checking

npm run typecheck

Linting

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:

npm publish --access public

Using Locally in Torre Frontend

To use this package locally before publishing:

1. Build the package:

   cd /home/tom/git/lincros-ui
   npm run build

2. Link the package:

   cd /home/tom/git/lincros-ui
   npm link

3. Link in Torre Frontend:

   cd /home/tom/git/torre_frontend
   npm link @lincros-ui/components

4. Update imports in Torre Frontend:

   // Before
   import { Button } from '@/presentation/components/ui/button';
   
   // After
   import { Button } from '@lincros-ui/components';

5. Update Tailwind config:

   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.