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

package/src/hooks/Wizard/WizardContext.tsx

@@ -0,0 +1,166 @@
+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

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

package/src/hooks/Wizard/useWizard.ts

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,54 @@
+// -----------------------------------------------------------------------------
+// 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

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

package/src/theme/componentStyles.ts

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,43 @@
+/**
+ * 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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,48 @@
+{
+  "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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,132 @@
+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

@@ -0,0 +1,35 @@
+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'],
+        },
+      },
+    ],
+  },
+});