siesa-ui-kit 1.0.0

package/src/views/TableLayoutView/icons.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+
+/**
+ * Iconos para TableLayoutView
+ * Basados en Heroicons Micro (16x16px)
+ */
+
+// Icono Plus (heroicons-micro/plus)
+export const PlusIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+  </svg>
+);
+
+// Icono Arrows Pointing In (heroicons-micro/arrows-pointing-in)
+export const ArrowsPointingInIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      fillRule="evenodd"
+      d="M2.22 2.22a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72v2.69a.75.75 0 0 1-1.5 0V2.5c0-.69.56-1.25 1.25-1.25h4.75a.75.75 0 0 1 0 1.5H4.81l.72.72a.75.75 0 0 1-1.06 1.06l-2-2a.75.75 0 0 1 0-1.06ZM9 2.75a.75.75 0 0 1 .75-.75h4.75C15.19 2 15.75 2.56 15.75 3.25v4.75a.75.75 0 0 1-1.5 0V5.31l-.72.72a.75.75 0 1 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72V8a.75.75 0 0 1-1.5 0V3.5H9.75A.75.75 0 0 1 9 2.75ZM2.75 9a.75.75 0 0 1 .75.75v2.69l.72-.72a.75.75 0 1 1 1.06 1.06l-2 2a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l.72.72V9.75c0-.41.34-.75.75-.75Zm10.5 0a.75.75 0 0 1 .75.75v3.5h3.5a.75.75 0 0 1 0 1.5h-4.75c-.69 0-1.25-.56-1.25-1.25V9.75a.75.75 0 0 1 .75-.75Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+// Icono Arrows Pointing Out (heroicons-micro/arrows-pointing-out)
+export const ArrowsPointingOutIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      fillRule="evenodd"
+      d="M2.75 2a.75.75 0 0 0-.75.75v3.5a.75.75 0 0 0 1.5 0V3.81l2.47 2.47a.75.75 0 1 0 1.06-1.06L4.56 2.75h2.69a.75.75 0 0 0 0-1.5h-4.5ZM9 2.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-2.69l2.47 2.47a.75.75 0 1 1-1.06 1.06L10.5 4.56v2.69a.75.75 0 0 1-1.5 0v-4.5ZM2.75 9a.75.75 0 0 1 .75.75v2.69l2.47-2.47a.75.75 0 1 1 1.06 1.06L4.56 13.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 1 .75-.75Zm10.5 0a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-.75.75h-4.5a.75.75 0 0 1 0-1.5h2.69l-2.47-2.47a.75.75 0 1 1 1.06-1.06l2.47 2.47V9.75a.75.75 0 0 1 .75-.75Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+// Icono Arrow Right End On Rectangle (heroicons-micro/arrow-right-end-on-rectangle)
+export const ArrowRightEndOnRectangleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      fillRule="evenodd"
+      d="M2 4.75A2.75 2.75 0 0 1 4.75 2h3a2.75 2.75 0 0 1 2.75 2.75v.5a.75.75 0 0 1-1.5 0v-.5c0-.69-.56-1.25-1.25-1.25h-3c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h3c.69 0 1.25-.56 1.25-1.25v-.5a.75.75 0 0 1 1.5 0v.5A2.75 2.75 0 0 1 7.75 14h-3A2.75 2.75 0 0 1 2 11.25v-6.5Zm10.58 2.96-1.72-1.72a.75.75 0 1 1 1.06-1.06l2.78 2.78c.3.29.3.76 0 1.06l-2.78 2.78a.75.75 0 1 1-1.06-1.06l1.72-1.72H7.25a.75.75 0 0 1 0-1.5h5.33Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+// Icono Arrows Right Left (heroicons-micro/arrows-right-left)
+export const ArrowsRightLeftIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      fillRule="evenodd"
+      d="M13.78 10.47a.75.75 0 0 1 0 1.06l-2.25 2.25a.75.75 0 1 1-1.06-1.06l.97-.97H5.75a.75.75 0 0 1 0-1.5h5.69l-.97-.97a.75.75 0 0 1 1.06-1.06l2.25 2.25ZM2.22 5.53a.75.75 0 0 1 0-1.06l2.25-2.25a.75.75 0 0 1 1.06 1.06l-.97.97h5.69a.75.75 0 0 1 0 1.5H4.56l.97.97a.75.75 0 1 1-1.06 1.06L2.22 5.53Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+// Icono Rectangle Group (heroicons-micro/rectangle-group)
+export const RectangleGroupIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="M2.5 3.5h3v3h-3v-3ZM6.5 2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5h-4ZM2.5 10.5h3v3h-3v-3ZM6.5 9a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5h-4ZM10.5 3.5h3v3h-3v-3ZM13.5 2h-3a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5h-.5ZM10.5 10.5h3v3h-3v-3Z" />
+  </svg>
+);
+
+// Icono X Mark (heroicons-micro/x-mark)
+export const XMarkIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
+  </svg>
+);

package/src/views/TableLayoutView/index.ts

@@ -0,0 +1,6 @@
+export { TableLayoutView } from './TableLayoutView';
+export type {
+  TableLayoutViewProps,
+  Location,
+  TableItem,
+} from './TableLayoutView.types';

package/storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@chromatic-com/storybook",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-a11y",
+    "@storybook/addon-vitest"
+  ],
+  "framework": {
+    "name": "@storybook/react-vite",
+    "options": {}
+  }
+};
+export default config;

package/storybook/preview.tsx

@@ -0,0 +1,84 @@
+import type { Preview } from '@storybook/react-vite';
+import React, { useEffect } from 'react';
+import '../src/index.css';
+
+// Decorador global para manejar el tema en Storybook
+const withTheme = (Story: any, context: any) => {
+  const { theme } = context.globals;
+
+  useEffect(() => {
+    const htmlElement = document.documentElement;
+
+    if (theme === 'dark') {
+      htmlElement.classList.add('dark');
+    } else {
+      htmlElement.classList.remove('dark');
+    }
+  }, [theme]);
+
+  return (
+    <div className="bg-white dark:bg-dark-bg-primary text-content-primary dark:text-dark-content-primary p-6">
+      <Story />
+    </div>
+  );
+};
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo'
+    },
+
+    // Configuración de fondos para las historias
+    backgrounds: {
+      default: 'light',
+      values: [
+        {
+          name: 'light',
+          value: '#ffffff',
+        },
+        {
+          name: 'dark',
+          value: '#000000',
+        },
+      ],
+    },
+
+    // Deshabilitar la cuadrícula de fondo
+    grid: {
+      disable: true,
+    },
+  },
+
+  // Control global de tema
+  globalTypes: {
+    theme: {
+      name: 'Theme',
+      description: 'Global theme for components',
+      defaultValue: 'light',
+      toolbar: {
+        title: 'Theme',
+        icon: 'circlehollow',
+        items: [
+          { value: 'light', icon: 'sun', title: 'Light' },
+          { value: 'dark', icon: 'moon', title: 'Dark' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+
+  decorators: [withTheme],
+};
+
+export default preview;

package/storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

package/tailwind.config.js

@@ -0,0 +1,128 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class', // Habilita dark mode con clase 'dark' en el elemento raíz
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      // Fuentes
+      fontFamily: {
+        sans: ['SiesaBT', 'Inter', 'sans-serif'],
+      },
+
+      // Colores del Sistema de Diseño Siesa
+      colors: {
+        // Primary Custom Colors (extraído de Figma)
+        'primary-custom': {
+          100: '#dbeefe', // backgroundCustomPrimary - Hover para outline
+          300: '#93d1fd', // borderCustomPrimary - Bordes
+          400: '#60b6fa', // PrimaryCustom/400 - Focus ring
+          500: '#3c9bf6', // PrimaryCustom/500 - Hover para botón default
+          600: '#0e79fd', // contentCustomPrimary - Color principal
+          700: '#0c6ade', // variante más oscura - Active/pressed
+        },
+
+        // Primary Inverse (para usar con bg-, text-, border-)
+        'primary-inverse-content': '#eff8ff',   // contentInverseCustomPrimary
+        'primary-inverse-background': '#0e79fd', // backgroundInverseCustomPrimary
+        'primary-inverse-border': '#3c9bf6',     // borderInverseCustomPrimary
+
+        // System Colors (Light Mode)
+        'content-primary': '#18181b', // contentPrimary
+        'content-secondary': '#a1a1aa', // contentSecondary - Description text
+        'content-tertiary': '#71717a', // contentTertiary - Texto secundario/placeholder
+        'bg-primary': '#ffffff', // backgroundPrimary
+        'background-secondary': '#f4f4f5', // backgroundSecondary - Fondos disabled
+        'border-primary': '#e4e4e7', // borderPrimary
+        'border-secondary': '#f4f4f5', // borderSecondary - Divider soft
+
+        // Error Colors
+        'error-border': '#ef4444', // Error border - Red 500
+        'error-content': '#dc2626', // Error text - Red 600
+        'error-bg': '#fef2f2', // Error background - Red 50
+
+        // Extensions Colors (para badges, notificaciones, etc)
+        'content-extensions-red': '#b91c1c', // contentRed - Red 700 para notificaciones
+
+        // Dark Mode Colors (extraído de Figma node 4001-17241)
+        'dark-bg-primary': '#18181b', // backgroundPrimary - Fondo principal oscuro (zinc-900)
+        'dark-bg-custom': '#112d57', // backgroundCustomPrimary - Fondo activo en dark mode
+        'dark-content-primary': '#f4f4f5', // contentPrimary - Texto principal en dark mode (zinc-100)
+        'dark-content-custom': '#93d1fd', // contentCustomPrimary - Texto activo en dark mode
+        'dark-border-primary': '#71717a', // borderPrimary - Bordes en dark
+        'dark-border-custom': '#0f6ae3', // borderCustomPrimary - Bordes de componentes
+        'dark-bg-inverse': '#bfe2fe', // backgroundInverseCustomPrimary - Fondos inversos (botón dark)
+        'dark-content-inverse': '#0e79fd', // contentInverseCustomPrimary - Texto inverso (botón dark)
+        'dark-border-inverse': '#93d1fd', // borderInverseCustomPrimary - Borde botón en dark
+      },
+
+      // Background colors adicionales para hover
+      backgroundColor: {
+        'hover-overlay': 'rgba(0, 0, 0, 0.1)', // Light mode hover overlay
+        'hover-overlay-inverse': 'rgba(255, 255, 255, 0.2)', // Inverse hover
+        'hover-overlay-dark': 'rgba(255, 255, 255, 0.2)', // Dark mode hover overlay (20% white)
+      },
+
+      // Text colors adicionales
+      textColor: {
+        'primary-inverse-content': '#eff8ff',
+        'primary-custom-600': '#0e79fd',
+      },
+
+      // Border colors adicionales
+      borderColor: {
+        'primary-inverse-border': '#3c9bf6',
+        'primary-custom-300': '#93d1fd',
+      },
+
+      // Tipografía completa del sistema de diseño (typography.md)
+      fontSize: {
+        // Display - Para heros y títulos muy grandes
+        '9xl': ['8rem', { lineHeight: '8rem', letterSpacing: '-0.025em', fontWeight: '700' }],       // 128px
+        '8xl': ['6rem', { lineHeight: '6rem', letterSpacing: '-0.025em', fontWeight: '700' }],       // 96px
+        '7xl': ['4.5rem', { lineHeight: '4.5rem', letterSpacing: '-0.025em', fontWeight: '700' }],   // 72px
+        '6xl': ['3.75rem', { lineHeight: '3.75rem', letterSpacing: '-0.025em', fontWeight: '700' }], // 60px
+        '5xl': ['3rem', { lineHeight: '3rem', letterSpacing: '-0.025em', fontWeight: '700' }],       // 48px
+
+        // Heading - Para títulos de secciones
+        '4xl': ['2.25rem', { lineHeight: '2.5rem', letterSpacing: '-0.025em', fontWeight: '700' }],    // 36px
+        '3xl': ['1.875rem', { lineHeight: '2.25rem', letterSpacing: '-0.025em', fontWeight: '700' }],  // 30px
+        '2xl': ['1.5rem', { lineHeight: '2rem', letterSpacing: '-0.025em', fontWeight: '700' }],       // 24px
+        'xl': ['1.25rem', { lineHeight: '1.75rem', letterSpacing: '-0.025em', fontWeight: '700' }],    // 20px
+
+        // Label & Paragraph - Para contenido y labels
+        'lg': ['1.125rem', { lineHeight: '1.75rem' }],  // 18px
+        'base': ['1rem', { lineHeight: '1.5rem' }],     // 16px (default)
+        'sm': ['0.875rem', { lineHeight: '1.25rem' }],  // 14px
+        'xs': ['0.75rem', { lineHeight: '1rem' }],      // 12px
+      },
+
+      // Border Radius (valores exactos de Figma)
+      borderRadius: {
+        'md': '6px',   // rounded-md de Figma
+        '2xl': '16px', // rounded-2xl de Figma
+        '3xl': '24px', // rounded-3xl de Figma
+      },
+
+      // Letter Spacing (typography.md)
+      letterSpacing: {
+        'tighter': '-0.025em', // -2.5% usado en Display y Heading
+      },
+
+      // Espaciado personalizado (alineado con Figma)
+      spacing: {
+        '1.5': '6px',   // spacing/1.5
+        '2.5': '10px',  // spacing/2.5
+      },
+
+      // Sombras personalizadas
+      boxShadow: {
+        'button-inset': '0px 2px 0px 0px inset rgba(255,255,255,0.15)',
+        'menu': '0px 4px 4px -1px rgba(12, 12, 13, 0.05), 0px 4px 4px -1px rgba(12, 12, 13, 0.1)',
+      },
+    },
+  },
+  plugins: [],
+}