siesa-ui-kit 1.0.2 → 1.0.4

package/src/index.ts

@@ -1,102 +1,133 @@
-// Componentes
-export { Button } from './components/Button/Button';
-export type { ButtonProps, ButtonType, ButtonSize, ButtonState } from './components/Button/Button.types';
-
-export { Input } from './components/Input/Input';
-export type { InputProps, InputState } from './components/Input/Input.types';
-
-export { Textarea } from './components/Textarea/Textarea';
-export type { TextareaProps, TextareaState } from './components/Textarea/Textarea.types';
-
-export { Checkbox } from './components/Checkbox/Checkbox';
-export type { CheckboxProps, CheckboxState } from './components/Checkbox/Checkbox.types';
-
-export { Radio } from './components/Radio/Radio';
-export type { RadioProps, RadioState } from './components/Radio/Radio.types';
-
-export { Switch } from './components/Switch/Switch';
-export type { SwitchProps, SwitchState } from './components/Switch/Switch.types';
-
-export { Avatar } from './components/Avatar/Avatar';
-export type { AvatarProps, AvatarSize, AvatarType } from './components/Avatar/Avatar.types';
-
-export { Divider } from './components/Divider/Divider';
-export type { DividerProps, DividerType } from './components/Divider/Divider.types';
-
-export { DescriptionList } from './components/DescriptionList/DescriptionList';
-export type { DescriptionListProps } from './components/DescriptionList/DescriptionList.types';
-
-export { Alert } from './components/Alert/Alert';
-export type { AlertProps } from './components/Alert/Alert.types';
-
-export { Badge } from './components/Badge/Badge';
-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';
+// Componentes
+export { Button } from './components/Button/Button';
+export type { ButtonProps, ButtonType, ButtonSize, ButtonState } from './components/Button/Button.types';
+
+export { Input } from './components/Input/Input';
+export type { InputProps, InputState } from './components/Input/Input.types';
+
+export { Textarea } from './components/Textarea/Textarea';
+export type { TextareaProps, TextareaState } from './components/Textarea/Textarea.types';
+
+export { Checkbox } from './components/Checkbox/Checkbox';
+export type { CheckboxProps, CheckboxState } from './components/Checkbox/Checkbox.types';
+
+export { Radio } from './components/Radio/Radio';
+export type { RadioProps, RadioState } from './components/Radio/Radio.types';
+
+export { Switch } from './components/Switch/Switch';
+export type { SwitchProps, SwitchState } from './components/Switch/Switch.types';
+
+export { Avatar } from './components/Avatar/Avatar';
+export type { AvatarProps, AvatarSize, AvatarType } from './components/Avatar/Avatar.types';
+
+export { Divider } from './components/Divider/Divider';
+export type { DividerProps, DividerType } from './components/Divider/Divider.types';
+
+export { DescriptionList } from './components/DescriptionList/DescriptionList';
+export type { DescriptionListProps } from './components/DescriptionList/DescriptionList.types';
+
+export { Alert } from './components/Alert/Alert';
+export type { AlertProps } from './components/Alert/Alert.types';
+
+export { Badge } from './components/Badge/Badge';
+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 { NavigationRailCommercial } from './components/NavigationRailCommercial/NavigationRailCommercial';
+export type { NavigationRailCommercialProps, NavigationRailCommercialMenuItem } from './components/NavigationRailCommercial/NavigationRailCommercial.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';
+
+export { LoginView } from './components/LoginView/LoginView';
+export type { LoginViewProps } from './components/LoginView/LoginView.types';
+
+export { SignUpView } from './components/SignUpView/SignUpView';
+export type { SignUpViewProps } from './components/SignUpView/SignUpView.types';
+
+// Views
+export { LayoutCommercial } from './views/LayoutCommercial/LayoutCommercial';
+export type { LayoutCommercialProps } from './views/LayoutCommercial/LayoutCommercial.types';
+
+export { ListView } from './views/ListView/ListView';
+export type { ListViewProps } from './views/ListView/ListView.types';
+
+export { LoginView as LoginViewPage } from './views/LoginView/LoginView';
+export type { LoginViewProps as LoginViewPageProps } from './views/LoginView/LoginView.types';
+
+export { ProductsView } from './views/ProductsView/ProductsView';
+export type { ProductsViewProps } from './views/ProductsView/ProductsView.types';
+
+export { RecoverPasswordView } from './views/RecoverPasswordView/RecoverPasswordView';
+export type { RecoverPasswordViewProps } from './views/RecoverPasswordView/RecoverPasswordView.types';
+
+export { SignUpView as SignUpViewPage } from './views/SignUpView/SignUpView';
+export type { SignUpViewProps as SignUpViewPageProps } from './views/SignUpView/SignUpView.types';
+
+export { TableLayoutView } from './views/TableLayoutView/TableLayoutView';
+export type { TableLayoutViewProps } from './views/TableLayoutView/TableLayoutView.types';
+
+// Context y Hooks
+export { ThemeProvider, useTheme, type Theme } from './context';

package/src/views/LayoutCommercial/LayoutCommercial.stories.tsx

@@ -0,0 +1,374 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { LayoutCommercial } from './LayoutCommercial';
+import {
+  Cog6ToothIcon,
+  ShoppingCartIcon,
+  CubeIcon,
+  DocumentIcon,
+} from '../../components/NavigationRailCommercial/icons';
+
+const meta = {
+  title: 'Siesa UI Kit/Views/LayoutCommercial',
+  component: LayoutCommercial,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Vista de layout comercial completa con NavigationRail lateral, Navbar superior y formulario de configuración de ítems.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    productName: {
+      control: 'text',
+      description: 'Nombre del producto en el Navbar',
+      table: {
+        type: { summary: 'string' },
+        category: 'Apariencia',
+      },
+    },
+    userDropdown: {
+      control: 'object',
+      description: 'Configuración del dropdown de usuario',
+      table: {
+        type: { summary: 'UserDropdownProps' },
+        category: 'Contenido',
+      },
+    },
+    navigationItems: {
+      control: 'object',
+      description: 'Items del NavigationRail',
+      table: {
+        type: { summary: 'NavigationRailCommercialMenuItem[]' },
+        category: 'Contenido',
+      },
+    },
+    formData: {
+      control: 'object',
+      description: 'Datos del formulario',
+      table: {
+        type: { summary: 'FormData' },
+        category: 'Estado',
+      },
+    },
+  },
+} satisfies Meta<typeof LayoutCommercial>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// DATOS DE PRUEBA
+// ============================================
+
+const avatarUrl = 'https://avatar.iran.liara.run/public/boy?username=carlos';
+
+const defaultUserDropdown = {
+  avatar: avatarUrl,
+  name: 'Carlos',
+  email: 'carlos@siesa.com',
+};
+
+const defaultNavigationItems = [
+  {
+    id: 'config',
+    label: 'Configuración',
+    icon: <Cog6ToothIcon />,
+    active: true,
+    isCollapsible: true,
+    children: [
+      {
+        id: 'general',
+        label: 'General',
+        icon: <Cog6ToothIcon />,
+      },
+      {
+        id: 'users',
+        label: 'Usuarios',
+        icon: <Cog6ToothIcon />,
+      },
+      {
+        id: 'permissions',
+        label: 'Permisos',
+        icon: <Cog6ToothIcon />,
+      },
+    ],
+  },
+  {
+    id: 'cart',
+    label: 'Carrito',
+    icon: <ShoppingCartIcon />,
+    isCollapsible: true,
+    children: [
+      {
+        id: 'active-carts',
+        label: 'Carritos activos',
+        icon: <ShoppingCartIcon />,
+      },
+      {
+        id: 'pending',
+        label: 'Pendientes',
+        icon: <ShoppingCartIcon />,
+      },
+    ],
+  },
+  {
+    id: 'products',
+    label: 'Productos',
+    icon: <CubeIcon />,
+    isCollapsible: true,
+    children: [
+      {
+        id: 'catalog',
+        label: 'Catálogo',
+        icon: <CubeIcon />,
+      },
+      {
+        id: 'inventory',
+        label: 'Inventario',
+        icon: <CubeIcon />,
+      },
+      {
+        id: 'categories',
+        label: 'Categorías',
+        icon: <CubeIcon />,
+      },
+    ],
+  },
+  {
+    id: 'documents',
+    label: 'Documentos',
+    icon: <DocumentIcon />,
+    isCollapsible: true,
+    children: [
+      {
+        id: 'invoices',
+        label: 'Facturas',
+        icon: <DocumentIcon />,
+      },
+      {
+        id: 'orders',
+        label: 'Pedidos',
+        icon: <DocumentIcon />,
+      },
+      {
+        id: 'reports',
+        label: 'Reportes',
+        icon: <DocumentIcon />,
+      },
+    ],
+  },
+];
+
+const defaultFormData = {
+  codigoItem: '',
+  nombre: '',
+  tipoItem: 'inventario' as const,
+  extension1: '',
+  extension2: '',
+  modeloCosto: '',
+  configuracionSerial: '',
+  manejaLotes: '',
+  manejaSeriales: false,
+  procesoManufactura: false,
+  puedeComprarse: false,
+  puedeVenderse: false,
+  permitirExtension1: false,
+  permitirExtension2: false,
+  permitirModeloCosto: false,
+  permitirManejaLotes: false,
+  permitirManejaSeriales: false,
+  permitirConfiguracionSerial: false,
+  permitirProcesoManufactura: false,
+  permitirCompras: false,
+  permitirVentas: false,
+};
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+export const Playground: Story = {
+  args: {
+    productName: 'SB Comercial',
+    userDropdown: defaultUserDropdown,
+    navigationItems: defaultNavigationItems,
+    formData: defaultFormData,
+  },
+  render: (args) => {
+    const [formData, setFormData] = useState(args.formData);
+
+    return (
+      <LayoutCommercial
+        {...args}
+        formData={formData}
+        onFormChange={setFormData}
+      />
+    );
+  },
+};
+
+// ============================================
+// 2. ESTADO: FORMULARIO VACÍO
+// ============================================
+export const FormularioVacio: Story = {
+  render: () => {
+    const [formData, setFormData] = useState(defaultFormData);
+
+    return (
+      <LayoutCommercial
+        productName="SB Comercial"
+        userDropdown={defaultUserDropdown}
+        navigationItems={defaultNavigationItems}
+        formData={formData}
+        onFormChange={setFormData}
+      />
+    );
+  },
+};
+
+// ============================================
+// 3. ESTADO: FORMULARIO CON DATOS
+// ============================================
+export const FormularioConDatos: Story = {
+  render: () => {
+    const [formData, setFormData] = useState({
+      codigoItem: 'ITEM-001',
+      nombre: 'Producto de Ejemplo',
+      tipoItem: 'inventario' as const,
+      extension1: 'azul',
+      extension2: 'm',
+      modeloCosto: 'fifo',
+      configuracionSerial: '1234567890123456789O',
+      manejaLotes: 'si',
+      manejaSeriales: true,
+      procesoManufactura: true,
+      puedeComprarse: true,
+      puedeVenderse: true,
+      permitirExtension1: true,
+      permitirExtension2: true,
+      permitirModeloCosto: false,
+      permitirManejaLotes: true,
+      permitirManejaSeriales: true,
+      permitirConfiguracionSerial: false,
+      permitirProcesoManufactura: true,
+      permitirCompras: true,
+      permitirVentas: true,
+    });
+
+    return (
+      <LayoutCommercial
+        productName="SB Comercial"
+        userDropdown={defaultUserDropdown}
+        navigationItems={defaultNavigationItems}
+        formData={formData}
+        onFormChange={setFormData}
+      />
+    );
+  },
+};
+
+// ============================================
+// 4. ESTADO: TIPO SERVICIO
+// ============================================
+export const TipoServicio: Story = {
+  render: () => {
+    const [formData, setFormData] = useState({
+      ...defaultFormData,
+      codigoItem: 'SERV-001',
+      nombre: 'Servicio de Consultoría',
+      tipoItem: 'servicio' as const,
+      puedeComprarse: false,
+      puedeVenderse: true,
+    });
+
+    return (
+      <LayoutCommercial
+        productName="SB Comercial"
+        userDropdown={defaultUserDropdown}
+        navigationItems={defaultNavigationItems}
+        formData={formData}
+        onFormChange={setFormData}
+      />
+    );
+  },
+};
+
+// ============================================
+// 5. ESTADO: SIN USUARIO
+// ============================================
+export const SinUsuario: Story = {
+  render: () => {
+    const [formData, setFormData] = useState(defaultFormData);
+
+    return (
+      <LayoutCommercial
+        productName="SB Comercial"
+        navigationItems={defaultNavigationItems}
+        formData={formData}
+        onFormChange={setFormData}
+      />
+    );
+  },
+};
+
+// ============================================
+// 6. ESTADO: SIN NAVEGACIÓN
+// ============================================
+export const SinNavegacion: Story = {
+  render: () => {
+    const [formData, setFormData] = useState(defaultFormData);
+
+    return (
+      <LayoutCommercial
+        productName="SB Comercial"
+        userDropdown={defaultUserDropdown}
+        formData={formData}
+        onFormChange={setFormData}
+      />
+    );
+  },
+};
+
+// ============================================
+// 7. ESTADO: CREACIÓN ÍTEM (BASADO EN FIGMA)
+// ============================================
+export const CreacionItem: Story = {
+  render: () => {
+    const [formData, setFormData] = useState({
+      codigoItem: '',
+      nombre: '',
+      tipoItem: 'inventario' as const,
+      extension1: '',
+      extension2: '',
+      modeloCosto: '',
+      configuracionSerial: '',
+      manejaLotes: '',
+      manejaSeriales: false,
+      procesoManufactura: false,
+      puedeComprarse: true,
+      puedeVenderse: true,
+      permitirExtension1: false,
+      permitirExtension2: false,
+      permitirModeloCosto: false,
+      permitirManejaLotes: false,
+      permitirManejaSeriales: false,
+      permitirConfiguracionSerial: false,
+      permitirProcesoManufactura: false,
+      permitirCompras: true,
+      permitirVentas: true,
+    });
+
+    return (
+      <LayoutCommercial
+        productName="SB Comercial"
+        userDropdown={defaultUserDropdown}
+        navigationItems={defaultNavigationItems}
+        formData={formData}
+        onFormChange={setFormData}
+      />
+    );
+  },
+};