@soyfri/shared-library 2.0.0-beta.4 → 2.0.0-beta.5

package/src/hooks/Wizard/WizardContext.tsx

@@ -1,166 +0,0 @@
-import React, {
-  createContext,
-  useCallback,
-  useMemo,
-  useState,
-  type FC,
-  type ReactNode,
-} from 'react';
-
-/**
- * API expuesta por `useWizard()`.
- *
- * Nota de retro-compatibilidad: los nombres `submitStep`, `nextStep`,
- * `prevStep`, `goToStep` se mantienen idénticos al `WizardContext` de
- * `@soyfri/fri-web-components` para que consumers migrando no tengan que
- * cambiar sus llamadas. Se agregan campos extra opcionales que antes no
- * existían (`currentStep`, `totalSteps`, `isFirst`, `isLast`, `completed`).
- */
-export interface WizardContextValue {
-  /** Índice del paso actual (0-based). */
-  currentStep: number;
-  /** Total de pasos del wizard. */
-  totalSteps: number;
-  /** True si `currentStep === 0`. */
-  isFirst: boolean;
-  /** True si `currentStep === totalSteps - 1`. */
-  isLast: boolean;
-  /** True tras ejecutar `submitStep()` desde el último paso. */
-  completed: boolean;
-  /** Avanza al siguiente paso (no pasa de `totalSteps - 1`). */
-  nextStep: () => void;
-  /** Retrocede al paso anterior (no baja de 0). */
-  prevStep: () => void;
-  /** Salta a un paso específico (0-based). No-op si fuera de rango. */
-  goToStep: (stepNumber: number) => void;
-  /**
-   * Envía el wizard. Marca `completed = true` y dispara el callback
-   * `onSubmit` del provider. En el último paso suele reemplazar a `nextStep`.
-   */
-  submitStep: () => void;
-  /** Resetea el wizard al paso inicial y limpia `completed`. */
-  reset: () => void;
-}
-
-const defaultValue: WizardContextValue = {
-  currentStep: 0,
-  totalSteps: 0,
-  isFirst: true,
-  isLast: true,
-  completed: false,
-  nextStep: () => {},
-  prevStep: () => {},
-  goToStep: () => {},
-  submitStep: () => {},
-  reset: () => {},
-};
-
-export const WizardContext = createContext<WizardContextValue>(defaultValue);
-
-export interface WizardProviderProps {
-  /** Número total de pasos del wizard. Requerido. */
-  totalSteps: number;
-  /** Paso inicial (0-based). Default: 0. */
-  initialStep?: number;
-  /**
-   * Callback disparado cuando se llama `submitStep()`. Recibe el paso actual.
-   * El paquete NO ejecuta ninguna petición; queda a cargo del consumer.
-   */
-  onSubmit?: (currentStep: number) => void;
-  /**
-   * Callback disparado en cada cambio de paso (next/prev/goTo).
-   * Útil para tracking o validaciones externas.
-   */
-  onStepChange?: (newStep: number, prevStep: number) => void;
-  children?: ReactNode;
-}
-
-/**
- * Provider del wizard. Administra el `currentStep` internamente. El consumer
- * no necesita gestionar estado — sólo consumirlo con `useWizard()` desde
- * cualquier descendiente.
- *
- * ```tsx
- * <WizardProvider totalSteps={3} onSubmit={handleFinalSubmit}>
- *   <Stepper ... />
- *   <StepContent />
- *   <WizardControls />
- * </WizardProvider>
- * ```
- */
-export const WizardProvider: FC<WizardProviderProps> = ({
-  totalSteps,
-  initialStep = 0,
-  onSubmit,
-  onStepChange,
-  children,
-}) => {
-  const [currentStep, setCurrentStep] = useState(initialStep);
-  const [completed, setCompleted] = useState(false);
-
-  const changeStep = useCallback(
-    (newStep: number) => {
-      setCurrentStep((prev) => {
-        if (newStep === prev) return prev;
-        if (newStep < 0 || newStep >= totalSteps) return prev;
-        onStepChange?.(newStep, prev);
-        return newStep;
-      });
-    },
-    [totalSteps, onStepChange],
-  );
-
-  const nextStep = useCallback(() => {
-    changeStep(currentStep + 1);
-  }, [changeStep, currentStep]);
-
-  const prevStep = useCallback(() => {
-    changeStep(currentStep - 1);
-  }, [changeStep, currentStep]);
-
-  const goToStep = useCallback(
-    (stepNumber: number) => {
-      changeStep(stepNumber);
-    },
-    [changeStep],
-  );
-
-  const submitStep = useCallback(() => {
-    setCompleted(true);
-    onSubmit?.(currentStep);
-  }, [currentStep, onSubmit]);
-
-  const reset = useCallback(() => {
-    setCurrentStep(initialStep);
-    setCompleted(false);
-  }, [initialStep]);
-
-  const value = useMemo<WizardContextValue>(
-    () => ({
-      currentStep,
-      totalSteps,
-      isFirst: currentStep === 0,
-      isLast: currentStep === totalSteps - 1,
-      completed,
-      nextStep,
-      prevStep,
-      goToStep,
-      submitStep,
-      reset,
-    }),
-    [
-      currentStep,
-      totalSteps,
-      completed,
-      nextStep,
-      prevStep,
-      goToStep,
-      submitStep,
-      reset,
-    ],
-  );
-
-  return (
-    <WizardContext.Provider value={value}>{children}</WizardContext.Provider>
-  );
-};

package/src/hooks/Wizard/index.ts

@@ -1,6 +0,0 @@
-export { useWizard } from './useWizard';
-export {
-  WizardProvider,
-  WizardContext,
-} from './WizardContext';
-export type { WizardContextValue, WizardProviderProps } from './WizardContext';

package/src/hooks/Wizard/useWizard.ts

@@ -1,13 +0,0 @@
-import { useContext } from 'react';
-import { WizardContext, type WizardContextValue } from './WizardContext';
-
-/**
- * Hook para consumir el `WizardContext` desde cualquier descendiente de
- * `<WizardProvider>`.
- *
- * Si se llama fuera de un provider, devuelve los valores por defecto (no-op)
- * para mantener compatibilidad con el hook original de fri-web-components.
- */
-export function useWizard(): WizardContextValue {
-  return useContext(WizardContext);
-}

package/src/index.ts

@@ -1,17 +0,0 @@
-import './styles.css';
-
-// ── Sistema de presets de estilos (theme.styles) ─────────────────────────
-// Exportar el módulo de tipos ejecuta el `declare module '@mui/material/styles'`
-// para que los consumers tengan `theme.styles` tipado sin imports extra.
-export type {
-  LibraryComponentName,
-  PresetStyle,
-  ComponentPresets,
-  LibraryStyles,
-} from './theme/componentStyles';
-export { DEFAULT_PRESET_NAME, resolvePreset } from './components/_shared/resolvePreset';
-import './theme/componentStyles';
-
-// ── Pass-through de MUI (punto de entrada único para el consumer) ─────────
-// Regla: el consumer nunca importa de '@mui/material'. Todo viene de acá.
-export * from './mui';

package/src/mui.ts

@@ -1,54 +0,0 @@
-// -----------------------------------------------------------------------------
-// Pass-through puro de primitivos de MUI.
-//
-// Regla para el consumer: si está en `@soyfri/shared-library`, impórtalo desde
-// acá. NUNCA directamente desde `@mui/material`. Esto nos da un único punto de
-// entrada y facilita un eventual cambio de librería base.
-//
-// Este archivo NO wrappea nada — solo re-exporta. Si se necesita otro
-// primitivo, agregar la línea correspondiente.
-// -----------------------------------------------------------------------------
-
-// ── Layout primitives ────────────────────────────────────────────────────
-export {
-  Box,
-  Stack,
-  Grid,
-  Container,
-  Paper,
-  Divider,
-} from '@mui/material';
-
-// ── Tipografía ────────────────────────────────────────────────────────────
-export { Typography, Link } from '@mui/material';
-
-// ── Listas ────────────────────────────────────────────────────────────────
-export {
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  ListSubheader,
-} from '@mui/material';
-
-// ── Feedback / misc ───────────────────────────────────────────────────────
-export {
-  CircularProgress,
-  LinearProgress,
-  Skeleton,
-  Alert,
-  AlertTitle,
-  Snackbar,
-  Backdrop,
-  Fade,
-  Grow,
-  Zoom,
-  Collapse,
-} from '@mui/material';
-
-// ── Hooks y utilidades de tema ───────────────────────────────────────────
-export { useTheme, useMediaQuery, alpha, styled } from '@mui/material';
-
-// ── Tipos más usados ──────────────────────────────────────────────────────
-export type { SxProps, Theme } from '@mui/material/styles';

package/src/styles.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/src/theme/componentStyles.ts

@@ -1,47 +0,0 @@
-import type { SxProps, Theme } from '@mui/material/styles';
-
-/**
- * Lista de componentes del paquete que soportan presets registrables en el
- * theme. Si en el futuro se agrega otro componente al sistema, se extiende
- * esta union.
- */
-export type LibraryComponentName =
-  | 'Input'
-  | 'Select'
-  | 'Autocomplete'
-  | 'DatePicker'
-  | 'DateTimePicker'
-  | 'Drawer'
-  | 'AppBar'
-  | 'Card'
-  | 'ScrollTopButton';
-
-/**
- * Un estilo de preset. Puede ser un objeto sx directo o una función del theme
- * para acceder a palette/typography/etc.
- */
-export type PresetStyle = SxProps<Theme> | ((theme: Theme) => SxProps<Theme>);
-
-/**
- * Map de presets disponibles para un componente. Las keys son nombres libres
- * elegidos por el consumidor (p.ej. `reddit`, `compact-filled`). El paquete
- * no registra ninguna entrada: `preset="default"` significa "usar el estilo
- * built-in de fábrica" y no requiere registro.
- */
-export type ComponentPresets = Record<string, PresetStyle>;
-
-/**
- * Shape del namespace `theme.styles` — un map de componentes del paquete a
- * sus presets registrados.
- */
-export type LibraryStyles = Partial<Record<LibraryComponentName, ComponentPresets>>;
-
-// ── Module augmentation de MUI ───────────────────────────────────────────
-declare module '@mui/material/styles' {
-  interface Theme {
-    styles: LibraryStyles;
-  }
-  interface ThemeOptions {
-    styles?: LibraryStyles;
-  }
-}

package/src/theme/tokens.ts

@@ -1,43 +0,0 @@
-/**
- * Design tokens compartidos por los componentes de formulario
- * (Input, Select, Autocomplete, DatePicker, DateTimePicker).
- *
- * Centralizar estos valores garantiza que:
- * - el espaciado, la tipografía y las animaciones del label sean idénticos
- *   en todos los campos;
- * - un cambio visual global (p.ej. cambiar el transform del shrink) se haga
- *   en un único archivo.
- */
-
-// ── Spacing ──────────────────────────────────────────────────────────────
-/** Margen superior que deja el aire para el label flotante "outside". */
-export const LABEL_MARGIN_TOP = '14px';
-
-/** Padding vertical interno del input (TextField/Select/Picker sections). */
-export const FIELD_INPUT_PADDING_Y = '8.5px';
-
-// ── Label animation ──────────────────────────────────────────────────────
-/** Transform que aplica el label cuando sube arriba del input (shrink). */
-export const LABEL_SHRINK_TRANSFORM = 'translate(4px, -22px) scale(0.85)';
-
-/** Origen del transform para el shrink. */
-export const LABEL_TRANSFORM_ORIGIN = 'top left';
-
-/** Transición del label (color + transform + max-width). */
-export const LABEL_TRANSITION =
-  'color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, ' +
-  'transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, ' +
-  'max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms';
-
-// ── Label colors (theme-aware) ───────────────────────────────────────────
-/** Color del label en reposo. */
-export const LABEL_COLOR_REST = 'text.secondary';
-
-/** Color del label cuando el campo tiene valor (shrink). */
-export const LABEL_COLOR_FILLED = 'text.primary';
-
-/** Color del label cuando el campo está focused. */
-export const LABEL_COLOR_FOCUSED = 'primary.main';
-
-/** Peso del label cuando sube (filled/focused). */
-export const LABEL_FONT_WEIGHT_FILLED = 500;

package/tailwind.config.js

@@ -1,10 +0,0 @@
-module.exports = {
-    content: ["./src/**/*.{js,jsx,ts,tsx}"],
-    theme: {
-      extend: {},
-    },
-    plugins: [],
-    corePlugins: {
-      preflight: false, // Disable Tailwind's base styles to avoid conflicts with MUI
-    },
-  }

package/tsconfig.json

@@ -1,48 +0,0 @@
-{
-  "compilerOptions": {
-    /* Specifies ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
-    "target": "es2017",
-    /* Specifies library files to be included in the compilation. */
-    "lib": ["dom", "dom.iterable", "esnext"],
-    /* Allows JavaScript files to be compiled. */
-    "allowJs": true,
-    /* Skip type checking of declaration files. */
-    "skipLibCheck": true,
-    /* Enables emit interoperability between CommonJS and ES Modules. */
-    "esModuleInterop": true,
-    /* Allows import x from y when a module doesn't have a default export. */
-    "allowSyntheticDefaultImports": true,
-    /* Enables all strict type-checking options. */
-    "strict": true,
-    /* Ensures file names are consistent in casing with imports. */
-    "forceConsistentCasingInFileNames": true,
-    /* Report errors for fallthrough cases in switch statements. */
-    "noFallthroughCasesInSwitch": true,
-    /* Specifies module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
-    "module": "esnext",
-    /* Specifies how TypeScript looks up a file from a given module specifier. */
-    "moduleResolution": "node",
-    /* Allows importing .json files. */
-    "resolveJsonModule": true,
-    /* Ensures each file can be safely transpiled without relying on other imports. */
-    "isolatedModules": true,
-    /* Specifies the JSX factory function to use when targeting React JSX emit. */
-    "jsx": "react-jsx",
-    /* Generates corresponding .d.ts file for each output JavaScript file. */
-    "declaration": true,
-    /* Specifies the output directory for generated declaration files. */
-    "declarationDir": "dist/esm",
-    /* Specifies the output directory for all emitted files. */
-    "outDir": "dist",
-
-    /* --- Configuración de Alias de Módulos --- */
-    "baseUrl": ".", // 👈 Base para resolver rutas absolutas
-    "paths": {
-      "@soyfri/shared-library/*": ["src/*"] // 👈 Alias que mapea @soyfri/shared-library a la carpeta src
-    }
-  },
-  /* Specifies a list of glob patterns that match files to be included in compilation. */
-  "include": ["src"],
-  /* Specifies a list of files to be excluded from compilation. */
-  "exclude": ["node_modules", "dist"]
-}

package/tsup.config.js

@@ -1,41 +0,0 @@
-import { defineConfig } from 'tsup';
-import { glob } from 'glob';
-
-// Find all entry points in the 'src/components' directory
-const componentEntries = glob.sync('src/components/*/index.ts');
-const mainEntry = 'src/index.ts';
-
-export default defineConfig({
-  // Configure multiple entry points for each component and the main library index.
-  entry: [mainEntry, ...componentEntries],
-  
-  // Clean the 'dist' directory before building.
-  clean: true,
-  
-  // Generate both ESM and CommonJS formats.
-  format: ['esm', 'cjs'],
-  
-  // Generate sourcemaps for better debugging.
-  sourcemap: true,
-  
-  // Generate declaration files (.d.ts) for TypeScript.
-  dts: true,
-  
-  // Split code into chunks for better optimization.
-  splitting: true,
-  
-  // Do not bundle these dependencies. They will be handled by the consumer's package manager.
-  external: [
-    'react',
-    'react-dom',
-    /@mui\/.*/,
-    /@emotion\/.*/,
-    'dayjs',
-    'react-hook-form',
-  ],
-
-  // Override tsup's default esbuild options if needed.
-  esbuildOptions(options) {
-    // You can add custom esbuild configurations here, if necessary.
-  },
-});

package/vite.config.js

@@ -1,132 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import { resolve } from 'path';
-import { fileURLToPath } from 'url';
-import { dirname } from 'path';
-import { globSync } from 'glob';
-import dts from 'vite-plugin-dts';
-import { libInjectCss } from 'vite-plugin-lib-inject-css';
-
-// Obtener __dirname en ESM
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-// Función para generar los puntos de entrada de componentes y hooks con validación de mayúsculas
-const getEntryPoints = (sourceDir, prefix) => {
-  const entryPoints = {};
-  const files = globSync(`${sourceDir}/*/index.ts`);
-
-  files.forEach(file => {
-    const componentName = file.split('/').slice(-2, -1)[0];
-    
-    // Verificar si el nombre de la carpeta tiene la inicial en mayúscula
-    if (!/^[A-Z]/.test(componentName)) {
-      console.log(`Saltando el directorio '${componentName}' porque no empieza con mayúscula.`);
-      return;
-    }
-    
-    entryPoints[`${prefix}/${componentName}`] = resolve(__dirname, file);
-  });
-  
-  return entryPoints;
-};
-
-// Generar entry points para componentes
-const componentEntryPoints = getEntryPoints('src/components', 'components');
-
-// Generar entry points para hooks
-const hooksEntryPoints = getEntryPoints('src/hooks', 'hooks');
-
-export default defineConfig(({ mode }) => {
-  const isLibraryBuild = mode === 'lib';
-  
-  const baseConfig = {
-    plugins: [
-      react(),
-      ...(isLibraryBuild ? [
-        dts({
-          include: ['src'],
-          exclude: [
-            '**/*.test.*', 
-            '**/*.spec.*', 
-            '**/*.stories.*',
-            'src/stories/**'
-          ],
-          outDir: 'dist',
-          insertTypesEntry: true,
-        }),
-        libInjectCss()
-      ] : [])
-    ],
-    resolve: {
-      alias: {
-        '@soyfri/shared-library': resolve(__dirname, './src'),
-      },
-      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
-    },
-  };
-
-  // Si estamos haciendo build de librería
-  if (isLibraryBuild) {
-    return {
-      ...baseConfig,
-      build: {
-        lib: {
-          entry: {
-            index: resolve(__dirname, 'src/index.ts'),
-            ...componentEntryPoints,
-            ...hooksEntryPoints,
-          },
-          formats: ['es', 'cjs'],
-          // Lógica para generar la estructura de directorios
-          fileName: (format, entryName) => {
-            const extension = format === 'es' ? 'js' : 'cjs';
-            if (entryName === 'index') {
-              return `index.${extension}`;
-            }
-            // Esto asume que el entryName es algo como 'components/Button' o 'hooks/useHook'
-            // y crea la estructura de directorios apropiada.
-            const parts = entryName.split('/');
-            const type = parts[0]; // 'components' o 'hooks'
-            const name = parts[1]; // 'Button' o 'useHook'
-            return `${type}/${name}/${name}.${extension}`;
-          },
-        },
-        rollupOptions: {
-          external: [
-            'react',
-            'react-dom',
-            'react/jsx-runtime',
-            /@mui\/.*/,
-            /@emotion\/.*/,
-            'dayjs',
-            'react-hook-form',
-            'tailwindcss',
-            'autoprefixer', 
-            'postcss',
-          ],
-          output: {
-            globals: {
-              react: 'React',
-              'react-dom': 'ReactDOM',
-              'react/jsx-runtime': 'jsxRuntime',
-            },
-            assetFileNames: (assetInfo) => {
-              if (assetInfo.name === 'style.css') return 'styles.css';
-              return assetInfo.name;
-            },
-          },
-        },
-        target: 'es2017',
-        sourcemap: true,
-        minify: false,
-        cssCodeSplit: false,
-        outDir: 'dist',
-        emptyOutDir: true,
-      },
-    };
-  }
-
-  // Configuración para desarrollo/Storybook (sin cambios)
-  return baseConfig;
-});

package/vitest.config.ts

@@ -1,35 +0,0 @@
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-import { defineConfig } from 'vitest/config';
-
-import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
-
-const dirname =
-  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
-
-// More info at: https://storybook.js.org/docs/writing-tests/test-addon
-export default defineConfig({
-  test: {
-    workspace: [
-      {
-        extends: true,
-        plugins: [
-          // The plugin will run tests for the stories defined in your Storybook config
-          // See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest
-          storybookTest({ configDir: path.join(dirname, '.storybook') }),
-        ],
-        test: {
-          name: 'storybook',
-          browser: {
-        enabled: true,
-        headless: true,
-        name: 'chromium',
-        provider: 'playwright'
-      },
-          setupFiles: ['.storybook/vitest.setup.ts'],
-        },
-      },
-    ],
-  },
-});