siesa-ui-kit 1.0.0 → 1.0.2

package/src/context/index.ts

@@ -1 +1 @@
-export { ThemeProvider, useTheme, type Theme } from './ThemeContext';
+export { ThemeProvider, useTheme, type Theme } from './ThemeContext';

package/src/index.css

@@ -1,29 +1,29 @@
-/* ===== FUENTES PERSONALIZADAS ===== */
-@font-face {
-  font-family: 'SiesaBT';
-  src: url('./assets/fonts/SiesaBT/SiesaBT-Regular.otf') format('opentype');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'SiesaBT';
-  src: url('./assets/fonts/SiesaBT/SiesaBT-Light.otf') format('opentype');
-  font-weight: 300;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'SiesaBT';
-  src: url('./assets/fonts/SiesaBT/SiesaBT-Bold.otf') format('opentype');
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* ===== TAILWIND CSS ===== */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* ===== FUENTES PERSONALIZADAS ===== */
+@font-face {
+  font-family: 'SiesaBT';
+  src: url('./assets/fonts/SiesaBT/SiesaBT-Regular.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'SiesaBT';
+  src: url('./assets/fonts/SiesaBT/SiesaBT-Light.otf') format('opentype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'SiesaBT';
+  src: url('./assets/fonts/SiesaBT/SiesaBT-Bold.otf') format('opentype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* ===== TAILWIND CSS ===== */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/index.ts

@@ -35,5 +35,68 @@ export type { BadgeProps, BadgeColor } from './components/Badge/Badge.types';
 export { Quantity } from './components/Quantity/Quantity';
 export type { QuantityProps } from './components/Quantity/Quantity.types';
 
+// export { NavigationRailItem } from './components/NavigationRailItem/NavigationRailItem';
+// export type { NavigationRailItemProps, NavigationRailItemState } from './components/NavigationRailItem/NavigationRailItem.types';
+
+export { Dropdown } from './components/Dropdown/Dropdown';
+export type { DropdownProps, DropdownItemProps } from './components/Dropdown/Dropdown.types';
+
+// export { DropdownItemCollapsible } from './components/DropdownItemCollapsible/DropdownItemCollapsible';
+// export type { DropdownItemCollapsibleProps, DropdownItemCollapsibleChildProps } from './components/DropdownItemCollapsible/DropdownItemCollapsible.types';
+
+// export { DropdownItemHeading } from './components/DropdownItemHeading/DropdownItemHeading';
+// export type { DropdownItemHeadingProps } from './components/DropdownItemHeading/DropdownItemHeading.types';
+
+export { Notification } from './components/Notification/Notification';
+export type { NotificationProps } from './components/Notification/Notification.types';
+
+export { Pagination } from './components/Pagination/Pagination';
+export type { PaginationProps } from './components/Pagination/Pagination.types';
+
+export { Select } from './components/Select/Select';
+export type { SelectProps, SelectOption } from './components/Select/Select.types';
+
+// export { NavigationRail } from './components/NavigationRail/NavigationRail';
+// export type { NavigationRailItemProps as NavigationRailProps } from './components/NavigationRail/NavigationRail.types';
+
+// export { NavigationRailPanel } from './components/NavigationRailPanel/NavigationRailPanel';
+// export type { NavigationRailPanelProps, NavigationRailPanelSectionProps, NavigationRailPanelItemProps } from './components/NavigationRailPanel/NavigationRailPanel.types';
+
+// export { NavigationRailTypes } from './components/NavigationRailTypes/NavigationRailTypes';
+// export type { NavigationRailTypesProps, NavigationRailItem as NavigationRailTypeItem } from './components/NavigationRailTypes/NavigationRailTypes.types';
+
+export { Table } from './components/Table/Table';
+export type { TableProps, TableColumn, SortDirection } from './components/Table/Table.types';
+
+export { Tabs } from './components/Tabs/Tabs';
+export type { TabsProps, TabItem } from './components/Tabs/Tabs.types';
+
+export { Navbar } from './components/Navbar/Navbar';
+export type { NavbarProps, NavbarVariant, UserDropdownProps } from './components/Navbar/Navbar.types';
+
+export { NavigationBar } from './components/NavigationBar/NavigationBar';
+export type { NavigationBarProps, NavigationBarItem } from './components/NavigationBar/NavigationBar.types';
+
+export { POSConvention } from './components/POSConvention/POSConvention';
+export type { POSConventionProps, ConventionStatus } from './components/POSConvention/POSConvention.types';
+
+export { POSLocationButton } from './components/POSLocationButton/POSLocationButton';
+export type { POSLocationButtonProps, POSLocationStatus, POSLocationState, POSLocationCapacity } from './components/POSLocationButton/POSLocationButton.types';
+
+export { POSNumberButton } from './components/POSNumberButton/POSNumberButton';
+export type { POSNumberButtonProps } from './components/POSNumberButton/POSNumberButton.types';
+
+export { POSProductButton } from './components/POSProductButton/POSProductButton';
+export type { POSProductButtonProps } from './components/POSProductButton/POSProductButton.types';
+
+export { POSProductCard } from './components/POSProductCard/POSProductCard';
+export type { POSProductCardProps } from './components/POSProductCard/POSProductCard.types';
+
+export { POSProductSidebarItems } from './components/POSProductSidebarItems/POSProductSidebarItems';
+export type { POSProductSidebarItemsProps, DescriptionItem } from './components/POSProductSidebarItems/POSProductSidebarItems.types';
+
+export { POSTable } from './components/POSTable/POSTable';
+export type { POSTableProps, TableStatus, TableShape, ChairCount } from './components/POSTable/POSTable.types';
+
 // Context y Hooks
 export { ThemeProvider, useTheme, type Theme } from './context';

package/src/main.tsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/views/ListView/ListView.stories.tsx

@@ -0,0 +1,329 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ListView } from './ListView';
+import { Badge } from '../../components/Badge/Badge';
+import { Avatar } from '../../components/Avatar/Avatar';
+import type { ListViewQuickFilter } from './ListView.types';
+import {
+  EllipsisHorizontalIcon,
+  DocumentCheckIcon,
+  DocumentMinusIcon,
+  DocumentArrowUpIcon,
+} from './icons';
+
+// ===== TIPOS PARA LA DATA DE EJEMPLO =====
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  status: 'active' | 'inactive';
+  avatar?: string;
+}
+
+// ===== DATA DE EJEMPLO =====
+const sampleUsers: User[] = [
+  { id: '1', name: 'Jhonnatan Diaz', email: 'jhonnatan.diaz@siesa.com', role: 'Administrador', status: 'active' },
+  { id: '2', name: 'Santiago Sanchez', email: 'santiago.sanchez@siesa.com', role: 'Editor', status: 'active' },
+  { id: '3', name: 'Daniel Mesa', email: 'daniel.mesa@siesa.com', role: 'Editor', status: 'active' },
+  { id: '4', name: 'Juan David Guevara', email: 'juan.guevara@siesa.com', role: 'Editor', status: 'active' },
+  { id: '5', name: 'Francisco Gonzalez', email: 'francisco.gonzalez@siesa.com', role: 'Editor', status: 'active' },
+  { id: '6', name: 'Francisco Gonzalez', email: 'francisco.gonzalez@siesa.com', role: 'Editor', status: 'inactive' },
+  { id: '7', name: 'Brayan Perdomo', email: 'brayan.perdomo@siesa.com', role: 'Editor', status: 'active' },
+  { id: '8', name: 'Brayan Quiñones', email: 'brayan.quinones@siesa.com', role: 'Editor', status: 'active' },
+];
+
+// ===== COLUMNAS DE EJEMPLO =====
+const columns = [
+  {
+    header: 'Nombre',
+    accessor: 'name' as const,
+    sortable: true,
+    render: (value: string, row: User) => (
+      <div className="flex items-center gap-2">
+        <Avatar
+          src={row.avatar || `https://i.pravatar.cc/150?u=${row.id}`}
+          alt={value}
+          size="8"
+          type="circular"
+        />
+        <div className="flex flex-col gap-1">
+          <span className="text-sm font-normal text-content-primary dark:text-dark-content-primary">
+            {value}
+          </span>
+          <a
+            href={`mailto:${row.email}`}
+            className="text-[10px] leading-3 text-content-secondary dark:text-content-secondary hover:underline"
+          >
+            {row.email}
+          </a>
+        </div>
+      </div>
+    ),
+  },
+  {
+    header: 'Rol',
+    accessor: 'role' as const,
+    sortable: true,
+    render: (value: string) => (
+      <span className="text-sm text-content-primary dark:text-dark-content-primary">
+        {value}
+      </span>
+    ),
+  },
+  {
+    header: 'Estado',
+    accessor: 'status' as const,
+    sortable: false,
+    width: '96px',
+    render: (value: 'active' | 'inactive') => (
+      <Badge
+        color={value === 'active' ? 'lime' : 'zinc'}
+        label={value === 'active' ? 'Activo' : 'Inactivo'}
+      />
+    ),
+  },
+  {
+    header: '',
+    accessor: 'id' as const,
+    sortable: false,
+    width: '84px',
+    render: () => (
+      <button className="flex items-center justify-center p-2.5 rounded-lg shadow-sm hover:bg-bg-secondary dark:hover:bg-dark-bg-secondary transition-colors">
+        <EllipsisHorizontalIcon className="w-4 h-4 text-content-secondary dark:text-content-secondary" />
+      </button>
+    ),
+  },
+];
+
+// ===== FILTROS RÁPIDOS DE EJEMPLO =====
+const quickFilters: ListViewQuickFilter[] = [
+  {
+    id: 'paid',
+    label: 'Facturas Pagadas',
+    color: 'lime',
+    icon: <DocumentCheckIcon className="w-3 h-3" />,
+  },
+  {
+    id: 'pending',
+    label: 'facturas Pendientes por Pago',
+    color: 'rose',
+    icon: <DocumentMinusIcon className="w-3 h-3" />,
+  },
+  {
+    id: 'orders',
+    label: 'Ordenes de Compra',
+    color: 'sky',
+    icon: <DocumentArrowUpIcon className="w-3 h-3" />,
+  },
+];
+
+// ===== USER INFO =====
+const sampleUserInfo = {
+  avatar: 'https://i.pravatar.cc/150?img=12',
+  name: 'Jhonnatan Diaz',
+  role: 'Administrador',
+};
+
+// ===== META =====
+const meta: Meta<typeof ListView> = {
+  title: 'Siesa UI Kit/Views/ListView',
+  component: ListView,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+Vista de lista completa del sistema de diseño Siesa.
+
+Incluye:
+- Navigation Rail lateral con FAB
+- Navbar superior con logo, título y dropdown de usuario
+- Barra de filtros rápidos con badges de colores
+- Tabla de datos con cabecera, cuerpo y paginación
+- Botones de acción (Crear, Auditoría, Filtrar)
+- Buscador integrado
+- Dropdown de opciones de vista
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ListView>;
+
+// ============================================
+// 1. DEFAULT - Vista completa por defecto
+// ============================================
+export const Default: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <ListView
+        title="List View"
+        navbarTitle="List View"
+        tableTitle="Usuarios"
+        columns={columns}
+        data={sampleUsers}
+        quickFilters={quickFilters}
+        selectedNavId="home"
+        userDropdown={sampleUserInfo}
+        notifications={{
+          bell: true,
+          cart: 5,
+        }}
+        pagination={{
+          currentPage: 3,
+          totalPages: 66,
+          onPageChange: (page) => console.log('Page:', page),
+          previousLabel: 'Atrás',
+          nextLabel: 'Siguiente',
+        }}
+        onSearch={(query) => console.log('Search:', query)}
+        onFabClick={() => console.log('FAB clicked')}
+        onNavSelect={(id) => console.log('Nav selected:', id)}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 2. LOADING - Estado de carga
+// ============================================
+export const Loading: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <ListView
+        title="List View"
+        navbarTitle="List View"
+        tableTitle="Usuarios"
+        columns={columns}
+        data={[]}
+        loading={true}
+        loadingRows={8}
+        quickFilters={quickFilters}
+        selectedNavId="home"
+        userDropdown={sampleUserInfo}
+        pagination={{
+          currentPage: 1,
+          totalPages: 10,
+          onPageChange: () => {},
+        }}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 3. EMPTY - Sin datos
+// ============================================
+export const Empty: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <ListView
+        title="List View"
+        navbarTitle="List View"
+        tableTitle="Usuarios"
+        columns={columns}
+        data={[]}
+        emptyMessage="No se encontraron usuarios"
+        quickFilters={quickFilters}
+        selectedNavId="home"
+        userDropdown={sampleUserInfo}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 4. CON OPCIONES DE VISTA
+// ============================================
+export const WithViewOptions: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <ListView
+        title="List View"
+        navbarTitle="List View"
+        tableTitle="Usuarios"
+        columns={columns}
+        data={sampleUsers}
+        quickFilters={quickFilters}
+        selectedNavId="home"
+        userDropdown={sampleUserInfo}
+        pagination={{
+          currentPage: 1,
+          totalPages: 66,
+          onPageChange: () => {},
+        }}
+        viewOptions={[
+          { id: 'all', label: 'Todos' },
+          { id: 'active', label: 'Activos' },
+          { id: 'inactive', label: 'Inactivos' },
+        ]}
+        selectedViewOption="all"
+        onViewOptionChange={(id) => console.log('View option:', id)}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 5. MINIMAL - Sin elementos opcionales
+// ============================================
+export const Minimal: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <ListView
+        title="Lista Simple"
+        navbarTitle="Lista Simple"
+        tableTitle="Datos"
+        columns={[
+          { header: 'Nombre', accessor: 'name' as const },
+          { header: 'Email', accessor: 'email' as const },
+        ]}
+        data={sampleUsers.slice(0, 3)}
+        showFab={false}
+        selectedNavId="home"
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 6. CON BOTONES DE ACCIÓN PERSONALIZADOS
+// ============================================
+export const WithCustomActions: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <ListView
+        title="List View"
+        navbarTitle="List View"
+        tableTitle="Usuarios"
+        columns={columns}
+        data={sampleUsers}
+        quickFilters={quickFilters}
+        selectedNavId="home"
+        userDropdown={sampleUserInfo}
+        pagination={{
+          currentPage: 1,
+          totalPages: 10,
+          onPageChange: () => {},
+        }}
+        actionButtons={[
+          {
+            id: 'create',
+            label: 'Crear Usuario',
+            variant: 'primary',
+            onClick: () => alert('Crear usuario'),
+          },
+          {
+            id: 'export',
+            label: 'Exportar',
+            variant: 'secondary',
+            onClick: () => alert('Exportar'),
+          },
+        ]}
+      />
+    </div>
+  ),
+};