@soyfri/shared-library 2.0.0-beta.10 → 2.0.0-beta.11

package/src/components/PageLoader/PageLoader.tsx

@@ -1,96 +0,0 @@
-import React, { type ReactNode } from 'react';
-import { Box, CircularProgress, Typography, Fade } from '@mui/material';
-import type { SxProps, Theme } from '@mui/material/styles';
-
-export interface PageLoaderProps {
-  /**
-   * Si es true, muestra el loader ocupando toda la ventana (fixed, 100vh/vw)
-   * con backdrop. Default: true.
-   */
-  fullscreen?: boolean;
-  /** Texto bajo el spinner. */
-  message?: ReactNode;
-  /** Logo/imagen opcional arriba del spinner. */
-  logo?: ReactNode;
-  /** Tamaño del spinner en px. Default: 48. */
-  size?: number;
-  /**
-   * Control explícito. Si es undefined, el loader se muestra apenas se monta.
-   * Útil para fades.
-   */
-  open?: boolean;
-  /** Color del backdrop (solo fullscreen). Default: usa theme.palette.background.default. */
-  backdropColor?: string;
-  /** sx del root. */
-  sx?: SxProps<Theme>;
-  className?: string;
-}
-
-/**
- * Loader full-page o inline. Reemplaza el `LayoutSplashScreen` de Metronic.
- *
- * ```tsx
- * // Splash de arranque
- * <PageLoader logo={<img src={logo} />} message="Cargando..." />
- *
- * // Loader local dentro de una card
- * <PageLoader fullscreen={false} size={32} />
- * ```
- */
-export function PageLoader({
-  fullscreen = true,
-  message,
-  logo,
-  size = 48,
-  open = true,
-  backdropColor,
-  sx,
-  className,
-}: PageLoaderProps) {
-  const rootSx: SxProps<Theme> = [
-    (theme) => ({
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: 2,
-      ...(fullscreen
-        ? {
-            position: 'fixed',
-            inset: 0,
-            zIndex: theme.zIndex.modal + 10,
-            backgroundColor:
-              backdropColor ?? theme.palette.background.default,
-          }
-        : {
-            width: '100%',
-            minHeight: 160,
-          }),
-    }),
-    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
-  ];
-
-  const content = (
-    <Box className={className} sx={rootSx} role="status" aria-live="polite">
-      {logo && <Box sx={{ mb: 1 }}>{logo}</Box>}
-      <CircularProgress size={size} thickness={4} />
-      {message && (
-        <Typography variant="body2" color="text.secondary">
-          {message}
-        </Typography>
-      )}
-    </Box>
-  );
-
-  if (!fullscreen) {
-    return open ? content : null;
-  }
-
-  return (
-    <Fade in={open} timeout={{ enter: 0, exit: 200 }} unmountOnExit>
-      {content}
-    </Fade>
-  );
-}
-
-export default PageLoader;

package/src/components/PageLoader/index.ts

@@ -1,2 +0,0 @@
-export { PageLoader, default } from './PageLoader';
-export type { PageLoaderProps } from './PageLoader';

package/src/components/RadioGroup/RadioGroup.definitions.ts

@@ -1,177 +0,0 @@
-// RadioGroup.definitions.ts — código fuente para la pestaña Docs de Storybook.
-
-export const BasicRadioGroupDefinition = `
-import React, { useState } from 'react';
-import { RadioGroup } from './RadioGroup';
-import { Box, Typography } from '@mui/material';
-
-const options = [
-  { value: 'a', label: 'Opción A' },
-  { value: 'b', label: 'Opción B' },
-  { value: 'c', label: 'Opción C' },
-];
-
-export const BasicRadioGroupExample = () => {
-  const [value, setValue] = useState('a');
-  return (
-    <Box sx={{ width: 360 }}>
-      <RadioGroup
-        label="Selecciona una opción"
-        options={options}
-        value={value}
-        onChange={setValue}
-      />
-      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
-    </Box>
-  );
-};
-`;
-
-export const ColumnRadioGroupDefinition = `
-import React, { useState } from 'react';
-import { RadioGroup } from './RadioGroup';
-import { Box } from '@mui/material';
-
-const options = [
-  { value: 'sm', label: 'Pequeño' },
-  { value: 'md', label: 'Mediano' },
-  { value: 'lg', label: 'Grande' },
-];
-
-export const ColumnRadioGroupExample = () => {
-  const [value, setValue] = useState('md');
-  return (
-    <Box sx={{ width: 360 }}>
-      <RadioGroup
-        label="Tamaño"
-        options={options}
-        value={value}
-        onChange={setValue}
-        row={false}
-      />
-    </Box>
-  );
-};
-`;
-
-export const RadioGroupWithErrorDefinition = `
-import React, { useState } from 'react';
-import { RadioGroup } from './RadioGroup';
-import { Box } from '@mui/material';
-
-const options = [
-  { value: 'yes', label: 'Sí' },
-  { value: 'no', label: 'No' },
-];
-
-export const RadioGroupWithErrorExample = () => {
-  const [value, setValue] = useState('');
-  const hasError = !value;
-  return (
-    <Box sx={{ width: 360 }}>
-      <RadioGroup
-        label="¿Aceptas los términos?"
-        options={options}
-        value={value}
-        onChange={setValue}
-        error={hasError}
-        helperText={hasError ? 'Este campo es obligatorio' : ''}
-      />
-    </Box>
-  );
-};
-`;
-
-export const DisabledRadioGroupDefinition = `
-import React, { useState } from 'react';
-import { RadioGroup } from './RadioGroup';
-import { Box } from '@mui/material';
-
-const options = [
-  { value: 'a', label: 'Opción A' },
-  { value: 'b', label: 'Opción B', disabled: true },
-  { value: 'c', label: 'Opción C' },
-];
-
-export const DisabledRadioGroupExample = () => {
-  const [value, setValue] = useState('a');
-  return (
-    <Box sx={{ width: 360 }}>
-      {/* Bloqueo total */}
-      <RadioGroup
-        label="Grupo deshabilitado"
-        options={options}
-        value={value}
-        onChange={setValue}
-        disabled
-      />
-      {/* Bloqueo por opción */}
-      <RadioGroup
-        label="Opción B deshabilitada"
-        options={options}
-        value={value}
-        onChange={setValue}
-        sx={{ mt: 3 }}
-      />
-    </Box>
-  );
-};
-`;
-
-export const UnborderedRadioGroupDefinition = `
-import React, { useState } from 'react';
-import { RadioGroup } from './RadioGroup';
-import { Box } from '@mui/material';
-
-const options = [
-  { value: 'a', label: 'Opción A' },
-  { value: 'b', label: 'Opción B' },
-];
-
-export const UnborderedRadioGroupExample = () => {
-  const [value, setValue] = useState('a');
-  return (
-    <Box sx={{ width: 360 }}>
-      <RadioGroup
-        options={options}
-        value={value}
-        onChange={setValue}
-        bordered={false}
-      />
-    </Box>
-  );
-};
-`;
-
-export const RHFRadioGroupDefinition = `
-import React from 'react';
-import { useForm } from 'react-hook-form';
-import { RadioGroup } from './RadioGroup';
-import { Box, Button, Typography } from '@mui/material';
-
-const options = [
-  { value: 'paypal', label: 'PayPal' },
-  { value: 'card', label: 'Tarjeta' },
-  { value: 'transfer', label: 'Transferencia' },
-];
-
-export const RHFRadioGroupExample = () => {
-  const { control, handleSubmit, watch } = useForm({
-    defaultValues: { paymentMethod: 'card' },
-  });
-  const value = watch('paymentMethod');
-  return (
-    <Box sx={{ width: 360 }} component="form" onSubmit={handleSubmit(console.log)}>
-      <RadioGroup
-        label="Método de pago"
-        options={options}
-        name="paymentMethod"
-        control={control}
-        validation={{ required: 'Selecciona un método' }}
-      />
-      <Typography sx={{ mt: 2 }}>Valor en el form: {value}</Typography>
-      <Button type="submit" sx={{ mt: 1 }}>Enviar</Button>
-    </Box>
-  );
-};
-`;

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -1,231 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
-import { Box, Button, Typography } from '@mui/material';
-import { useForm } from 'react-hook-form';
-
-import { RadioGroup } from './RadioGroup';
-import {
-  BasicRadioGroupDefinition,
-  ColumnRadioGroupDefinition,
-  RadioGroupWithErrorDefinition,
-  DisabledRadioGroupDefinition,
-  UnborderedRadioGroupDefinition,
-  RHFRadioGroupDefinition,
-} from './RadioGroup.definitions';
-
-// =============================================================================
-// Meta
-// =============================================================================
-const meta: Meta<typeof RadioGroup> = {
-  title: 'Components/RadioGroup',
-  component: RadioGroup,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Un grupo de radio buttons basado en MUI `RadioGroup` + `Radio` + `FormControlLabel`. ' +
-          'Soporta modo controlado (`value` + `onChange`) y modo react-hook-form (`name` + `control`). ' +
-          'Mantiene compatibilidad visual con el legacy `FormRadioGroup` mediante la prop `bordered` (default: true).',
-      },
-    },
-  },
-  argTypes: {
-    label: { control: 'text', description: 'Label superior del grupo.' },
-    options: { control: 'object', description: 'Lista de opciones `{ value, label, disabled?, id? }`.' },
-    row: { control: 'boolean', description: 'Distribuir radios horizontalmente. Default: true.' },
-    size: { control: 'radio', options: ['small', 'medium'], description: 'Tamaño del radio.' },
-    bordered: { control: 'boolean', description: 'Renderizar contenedor con borde estilo "form field". Default: true.' },
-    borderRadius: { control: { type: 'number' }, description: 'Border radius del contenedor cuando `bordered`. Default: 10.' },
-    disabled: { control: 'boolean', description: 'Deshabilitar el grupo entero.' },
-    error: { control: 'boolean', description: 'Estado de error visual.' },
-    helperText: { control: 'text', description: 'Texto auxiliar debajo del grupo.' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof RadioGroup>;
-
-// =============================================================================
-// Stories
-// =============================================================================
-
-const baseOptions = [
-  { value: 'a', label: 'Opción A' },
-  { value: 'b', label: 'Opción B' },
-  { value: 'c', label: 'Opción C' },
-];
-
-export const BasicRadioGroup: Story = {
-  render: () => {
-    const [value, setValue] = useState('a');
-    return (
-      <Box sx={{ width: 360 }}>
-        <RadioGroup
-          label="Selecciona una opción"
-          options={baseOptions}
-          value={value}
-          onChange={setValue}
-        />
-        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: { story: 'Uso básico controlado: `value` + `onChange`. Distribución horizontal por defecto.' },
-      source: { code: BasicRadioGroupDefinition.trim() },
-    },
-  },
-};
-
-export const ColumnRadioGroup: Story = {
-  render: () => {
-    const [value, setValue] = useState('md');
-    return (
-      <Box sx={{ width: 360 }}>
-        <RadioGroup
-          label="Tamaño"
-          options={[
-            { value: 'sm', label: 'Pequeño' },
-            { value: 'md', label: 'Mediano' },
-            { value: 'lg', label: 'Grande' },
-          ]}
-          value={value}
-          onChange={setValue}
-          row={false}
-        />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: { story: 'Distribución vertical con `row={false}`.' },
-      source: { code: ColumnRadioGroupDefinition.trim() },
-    },
-  },
-};
-
-export const RadioGroupWithError: Story = {
-  render: () => {
-    const [value, setValue] = useState('');
-    const hasError = !value;
-    return (
-      <Box sx={{ width: 360 }}>
-        <RadioGroup
-          label="¿Aceptas los términos?"
-          options={[
-            { value: 'yes', label: 'Sí' },
-            { value: 'no', label: 'No' },
-          ]}
-          value={value}
-          onChange={setValue}
-          error={hasError}
-          helperText={hasError ? 'Este campo es obligatorio' : ''}
-        />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: { story: 'Estado de error con `error` + `helperText`. Equivalente a `errorRequired` + `messageError` del legacy.' },
-      source: { code: RadioGroupWithErrorDefinition.trim() },
-    },
-  },
-};
-
-export const DisabledRadioGroup: Story = {
-  render: () => {
-    const [value, setValue] = useState('a');
-    const opts = [
-      { value: 'a', label: 'Opción A' },
-      { value: 'b', label: 'Opción B', disabled: true },
-      { value: 'c', label: 'Opción C' },
-    ];
-    return (
-      <Box sx={{ width: 360, display: 'flex', flexDirection: 'column', gap: 3 }}>
-        <RadioGroup
-          label="Grupo deshabilitado"
-          options={opts}
-          value={value}
-          onChange={setValue}
-          disabled
-        />
-        <RadioGroup
-          label="Opción B deshabilitada"
-          options={opts}
-          value={value}
-          onChange={setValue}
-        />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: { story: 'Bloqueo total con `disabled`, o por opción individual con `option.disabled`.' },
-      source: { code: DisabledRadioGroupDefinition.trim() },
-    },
-  },
-};
-
-export const UnborderedRadioGroup: Story = {
-  render: () => {
-    const [value, setValue] = useState('a');
-    return (
-      <Box sx={{ width: 360 }}>
-        <RadioGroup
-          options={baseOptions}
-          value={value}
-          onChange={setValue}
-          bordered={false}
-        />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: { story: 'Sin contenedor con borde — útil para agrupar inline con otros controles.' },
-      source: { code: UnborderedRadioGroupDefinition.trim() },
-    },
-  },
-};
-
-export const RHFRadioGroup: Story = {
-  render: () => {
-    const { control, handleSubmit, watch } = useForm({
-      defaultValues: { paymentMethod: 'card' },
-    });
-    const value = watch('paymentMethod');
-    return (
-      <Box
-        sx={{ width: 360 }}
-        component="form"
-        onSubmit={handleSubmit((data) => console.log(data))}
-      >
-        <RadioGroup
-          label="Método de pago"
-          options={[
-            { value: 'paypal', label: 'PayPal' },
-            { value: 'card', label: 'Tarjeta' },
-            { value: 'transfer', label: 'Transferencia' },
-          ]}
-          name="paymentMethod"
-          control={control}
-          validation={{ required: 'Selecciona un método' }}
-        />
-        <Typography sx={{ mt: 2 }}>Valor en el form: {value}</Typography>
-        <Button type="submit" sx={{ mt: 1 }}>Enviar</Button>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Modo react-hook-form con `name` + `control`. El error y `helperText` se conectan automáticamente vía el `Controller`.',
-      },
-      source: { code: RHFRadioGroupDefinition.trim() },
-    },
-  },
-};

package/src/components/RadioGroup/RadioGroup.sx.ts

@@ -1,75 +0,0 @@
-import type { SxProps, Theme } from '@mui/material/styles';
-
-export interface BuildRadioGroupSxOptions {
-  bordered: boolean;
-  borderRadius: number | string;
-  error: boolean;
-}
-
-const toRadius = (borderRadius: number | string) =>
-  typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;
-
-/**
- * Transición compartida (matchea el InputGroup).
- */
-const FOCUS_TRANSITION =
-  'border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, ' +
-  'box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms';
-
-/**
- * Builder de sx para RadioGroup. Reproduce el estilo del antiguo
- * `FormRadioGroup` legacy: contenedor con borde + padding vertical.
- *
- * Cuando `bordered=true`, el contenedor gana:
- * - `:focus-within` → borde + shadow primario (mismo patrón que `InputGroup`).
- * - `error=true` → borde + shadow de error (palette.error.main).
- *
- * El shadow es de 1px, así que no hay shift de layout — sólo se intensifica
- * visualmente el borde sin empujar nada alrededor.
- *
- * Si `bordered=false`, devuelve un sx mínimo (sólo helper text reset).
- */
-export const buildRadioGroupSx = ({
-  bordered,
-  borderRadius,
-  error,
-}: BuildRadioGroupSxOptions): SxProps<Theme> => {
-  const radius = toRadius(borderRadius);
-
-  if (!bordered) {
-    return {
-      '& .MuiFormHelperText-root': { marginLeft: 0 },
-    };
-  }
-
-  return (theme) => ({
-    '& .MuiRadioGroup-root': {
-      paddingTop: 1.25,
-      paddingBottom: 1.25,
-      paddingX: 1.5,
-      border: `1px solid ${
-        error ? theme.palette.error.main : theme.palette.divider
-      }`,
-      borderRadius: radius,
-      transition: FOCUS_TRANSITION,
-      ...(error && {
-        boxShadow: `0 0 0 1px ${theme.palette.error.main}`,
-      }),
-      // Focus del usuario sobre cualquier radio interno.
-      '&:focus-within': {
-        borderColor: error
-          ? theme.palette.error.main
-          : theme.palette.primary.main,
-        boxShadow: `0 0 0 1px ${
-          error ? theme.palette.error.main : theme.palette.primary.main
-        }`,
-      },
-    },
-    '& .MuiFormHelperText-root': {
-      marginLeft: 0,
-    },
-    '& .MuiFormLabel-root': {
-      marginBottom: 0.5,
-    },
-  });
-};