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

package/src/components/Switch/Switch.stories.tsx

@@ -1,213 +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 { Switch } from './Switch';
-import {
-  BasicSwitchDefinition,
-  SwitchWithLabelDefinition,
-  BorderedSwitchDefinition,
-  SwitchSizesDefinition,
-  SwitchWithErrorDefinition,
-  DisabledSwitchDefinition,
-  RHFSwitchDefinition,
-} from './Switch.definitions';
-
-// =============================================================================
-// Meta
-// =============================================================================
-const meta: Meta<typeof Switch> = {
-  title: 'Components/Switch',
-  component: Switch,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Un toggle/switch basado en MUI `Switch`. Soporta modo controlado (`checked` + `onChange`) ' +
-          'y modo react-hook-form (`name` + `control`). Mantiene compatibilidad visual con el legacy ' +
-          '`FormToggleInput` mediante la prop `bordered` (label a la izquierda, switch a la derecha).',
-      },
-    },
-  },
-  argTypes: {
-    label: { control: 'text', description: 'Texto al lado del switch. Si está ausente, se renderiza solo el switch.' },
-    labelPlacement: {
-      control: 'radio',
-      options: ['start', 'end', 'top', 'bottom'],
-      description: 'Posición del label respecto al switch. Default: `end`.',
-    },
-    size: { control: 'radio', options: ['small', 'medium'], description: 'Tamaño del switch. Default: `medium`.' },
-    bordered: { control: 'boolean', description: 'Renderizar contenedor con borde estilo "form field". Default: false.' },
-    borderRadius: { control: { type: 'number' }, description: 'Border radius del contenedor cuando `bordered`. Default: 10.' },
-    disabled: { control: 'boolean', description: 'Deshabilitar el switch.' },
-    error: { control: 'boolean', description: 'Estado de error visual.' },
-    helperText: { control: 'text', description: 'Texto auxiliar debajo del switch.' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Switch>;
-
-// =============================================================================
-// Stories
-// =============================================================================
-
-export const BasicSwitch: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-    return (
-      <Box sx={{ width: 280 }}>
-        <Switch checked={checked} onChange={setChecked} />
-        <Typography sx={{ mt: 2 }}>Estado: {checked ? 'ON' : 'OFF'}</Typography>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: { story: 'Uso mínimo, sin label. Equivalente al legacy `ToggleInputReport`.' },
-      source: { code: BasicSwitchDefinition.trim() },
-    },
-  },
-};
-
-export const SwitchWithLabel: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(true);
-    return (
-      <Box sx={{ width: 280 }}>
-        <Switch
-          label="Notificaciones por email"
-          checked={checked}
-          onChange={setChecked}
-        />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: { story: 'Switch con label a la derecha (default `labelPlacement="end"`).' },
-      source: { code: SwitchWithLabelDefinition.trim() },
-    },
-  },
-};
-
-export const BorderedSwitch: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(true);
-    return (
-      <Box sx={{ width: 360 }}>
-        <Switch
-          label="Recibir reportes diarios"
-          checked={checked}
-          onChange={setChecked}
-          bordered
-        />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Variante con `bordered`: contenedor con borde, label a la izquierda y switch al borde opuesto. ' +
-          'Replica el estilo del legacy `FormToggleInput`.',
-      },
-      source: { code: BorderedSwitchDefinition.trim() },
-    },
-  },
-};
-
-export const SwitchSizes: Story = {
-  render: () => {
-    const [a, setA] = useState(false);
-    const [b, setB] = useState(true);
-    return (
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: 280 }}>
-        <Switch label="Pequeño" size="small" checked={a} onChange={setA} />
-        <Switch label="Mediano (default)" size="medium" checked={b} onChange={setB} />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: { story: 'Tamaños disponibles: `small` y `medium` (default).' },
-      source: { code: SwitchSizesDefinition.trim() },
-    },
-  },
-};
-
-export const SwitchWithError: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-    const hasError = !checked;
-    return (
-      <Box sx={{ width: 320 }}>
-        <Switch
-          label="Aceptar términos y condiciones"
-          checked={checked}
-          onChange={setChecked}
-          error={hasError}
-          helperText={hasError ? 'Debes aceptar los términos para continuar' : ''}
-        />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: { story: 'Estado de error con `error` + `helperText`.' },
-      source: { code: SwitchWithErrorDefinition.trim() },
-    },
-  },
-};
-
-export const DisabledSwitch: Story = {
-  render: () => (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: 280 }}>
-      <Switch label="Off bloqueado" checked={false} onChange={() => {}} disabled />
-      <Switch label="On bloqueado" checked={true} onChange={() => {}} disabled />
-    </Box>
-  ),
-  parameters: {
-    docs: {
-      description: { story: 'Switch deshabilitado en ambos estados.' },
-      source: { code: DisabledSwitchDefinition.trim() },
-    },
-  },
-};
-
-export const RHFSwitch: Story = {
-  render: () => {
-    const { control, handleSubmit, watch } = useForm({
-      defaultValues: { darkMode: false },
-    });
-    const value = watch('darkMode');
-    return (
-      <Box
-        sx={{ width: 320 }}
-        component="form"
-        onSubmit={handleSubmit((data) => console.log(data))}
-      >
-        <Switch
-          label="Modo oscuro"
-          name="darkMode"
-          control={control}
-          bordered
-        />
-        <Typography sx={{ mt: 2 }}>Valor en el form: {String(value)}</Typography>
-        <Button type="submit" sx={{ mt: 1 }}>Enviar</Button>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Modo react-hook-form con `name` + `control`. El valor `true`/`false` viaja directo al form state.',
-      },
-      source: { code: RHFSwitchDefinition.trim() },
-    },
-  },
-};

package/src/components/Switch/Switch.sx.ts

@@ -1,81 +0,0 @@
-import type { SxProps, Theme } from '@mui/material/styles';
-
-export interface BuildSwitchSxOptions {
-  bordered: boolean;
-  borderRadius: number | string;
-  hasLabel: boolean;
-  error: boolean;
-}
-
-const toRadius = (borderRadius: number | string) =>
-  typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;
-
-/**
- * Transición compartida (matchea el InputGroup y el RadioGroup).
- */
-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 Switch. Reproduce el estilo del antiguo
- * `FormToggleInput` legacy cuando `bordered=true`: contenedor con borde,
- * label a la izquierda y switch a la derecha (vía justify-content: space-between).
- *
- * 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`, sólo aplica un reset de margin del helper text.
- */
-export const buildSwitchSx = ({
-  bordered,
-  borderRadius,
-  hasLabel,
-  error,
-}: BuildSwitchSxOptions): SxProps<Theme> => {
-  const radius = toRadius(borderRadius);
-
-  if (!bordered) {
-    return {
-      '& .MuiFormHelperText-root': { marginLeft: 0 },
-    };
-  }
-
-  return (theme) => ({
-    '& .MuiFormControlLabel-root': {
-      marginLeft: 0,
-      marginRight: 0,
-      paddingX: 1.5,
-      paddingY: 1.25,
-      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 el switch 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
-        }`,
-      },
-      // Si hay label, separar el switch al borde opuesto.
-      ...(hasLabel && {
-        width: '100%',
-        justifyContent: 'space-between',
-      }),
-    },
-    '& .MuiFormHelperText-root': {
-      marginLeft: 0,
-    },
-  });
-};

package/src/components/Switch/Switch.tsx

@@ -1,172 +0,0 @@
-import { useTheme } from '@mui/material/styles';
-import {
-  FormControl,
-  FormControlLabel,
-  FormHelperText,
-  Switch as MuiSwitch,
-  type SwitchProps as MuiSwitchProps,
-  type SxProps,
-  type Theme,
-} from '@mui/material';
-import { Controller, type Control, type RegisterOptions } from 'react-hook-form';
-
-import { buildSwitchSx } from './Switch.sx';
-import { resolvePreset } from '../_shared/resolvePreset';
-
-// ── Tipos de dominio ─────────────────────────────────────────────────────
-export type SwitchSize = 'small' | 'medium';
-export type SwitchLabelPlacement = 'start' | 'end' | 'top' | 'bottom';
-
-// ── Props base (todo lo común entre RHF y controlado) ────────────────────
-export interface BaseSwitchProps
-  extends Omit<MuiSwitchProps, 'value' | 'onChange' | 'checked' | 'defaultChecked' | 'size'> {
-  /** Texto al lado del switch. Si está ausente, no se renderiza FormControlLabel. */
-  label?: string;
-  size?: SwitchSize;
-  /** Posición del label. Default: 'end' (legacy `FormToggleInput` lo ponía a la izquierda con su flex-stack). */
-  labelPlacement?: SwitchLabelPlacement;
-  disabled?: boolean;
-  error?: boolean;
-  helperText?: string;
-  /** Renderiza un contenedor con borde alrededor del switch + label. Default: false. */
-  bordered?: boolean;
-  /** Border radius del contenedor (cuando bordered). Default: 10. */
-  borderRadius?: number | string;
-  defaultChecked?: boolean;
-  /**
-   * Nombre del preset de estilo registrado en `theme.styles.Switch`.
-   * - `"default"` (o ausente) = estilo built-in del paquete.
-   * - Cualquier otro string = mergea el preset encima del estilo built-in.
-   */
-  preset?: string;
-  sx?: SxProps<Theme>;
-}
-
-// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────
-export interface RHFSwitchProps extends BaseSwitchProps {
-  name: string;
-  control: Control<any>;
-  validation?: RegisterOptions;
-  checked?: never;
-  onChange?: never;
-}
-
-export interface ControlledSwitchProps extends BaseSwitchProps {
-  name?: string;
-  control?: never;
-  validation?: never;
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-}
-
-// ── API pública final ────────────────────────────────────────────────────
-export type SwitchProps = RHFSwitchProps | ControlledSwitchProps;
-
-export const Switch: React.FC<SwitchProps> = (props) => {
-  const {
-    label,
-    size = 'medium',
-    labelPlacement = 'end',
-    disabled = false,
-    error = false,
-    helperText,
-    bordered = false,
-    borderRadius = 10,
-    defaultChecked,
-    preset,
-    sx,
-    ...rest
-  } = props as ControlledSwitchProps & {
-    control?: Control<any>;
-    validation?: RegisterOptions;
-  };
-
-  const theme = useTheme();
-  const presetSx = resolvePreset('Switch', preset, theme);
-
-  // Construye el sx con el estado de error efectivo; se llama por rama
-  // (RHF usa el error del Controller, controlado usa el prop `error`).
-  const buildSx = (effectiveError: boolean) => [
-    buildSwitchSx({
-      bordered,
-      borderRadius,
-      hasLabel: !!label,
-      error: effectiveError,
-    }),
-    ...(presetSx ? [presetSx] : []),
-    ...(Array.isArray(sx) ? sx : [sx]),
-  ];
-
-  const renderSwitch = (
-    checked: boolean,
-    onChange: (next: boolean) => void,
-    onBlur?: () => void,
-    inputRef?: React.Ref<HTMLInputElement>,
-  ) => {
-    const switchEl = (
-      <MuiSwitch
-        {...rest}
-        size={size}
-        checked={!!checked}
-        onChange={(_e, next) => onChange(next)}
-        onBlur={onBlur}
-        inputRef={inputRef}
-        disabled={disabled}
-      />
-    );
-
-    return label ? (
-      <FormControlLabel
-        control={switchEl}
-        label={label}
-        labelPlacement={labelPlacement}
-        disabled={disabled}
-      />
-    ) : (
-      switchEl
-    );
-  };
-
-  // ── RHF mode ──────────────────────────────────────────────────────────
-  if ('control' in props && props.control) {
-    const { name, control, validation } = props as RHFSwitchProps;
-    return (
-      <Controller
-        name={name}
-        control={control}
-        rules={validation}
-        defaultValue={defaultChecked}
-        render={({ field, fieldState: { error: fieldError } }) => {
-          const finalError = !!fieldError || error;
-          const finalHelperText = fieldError?.message ?? helperText;
-          return (
-            <FormControl
-              error={finalError}
-              disabled={disabled}
-              sx={buildSx(finalError)}
-            >
-              {renderSwitch(
-                !!field.value,
-                (next) => field.onChange(next),
-                field.onBlur,
-                field.ref,
-              )}
-              {finalHelperText && <FormHelperText>{finalHelperText}</FormHelperText>}
-            </FormControl>
-          );
-        }}
-      />
-    );
-  }
-
-  // ── Controlled mode ───────────────────────────────────────────────────
-  const { checked, onChange } = props as ControlledSwitchProps;
-  return (
-    <FormControl error={error} disabled={disabled} sx={buildSx(error)}>
-      {renderSwitch(checked, onChange)}
-      {helperText && <FormHelperText>{helperText}</FormHelperText>}
-    </FormControl>
-  );
-};
-
-export default Switch;

package/src/components/Switch/Switch.types.ts

@@ -1,10 +0,0 @@
-// Re-export barrel para compatibilidad con imports antiguos.
-// Los tipos viven dentro de Switch.tsx.
-export type {
-  SwitchSize,
-  SwitchLabelPlacement,
-  BaseSwitchProps,
-  RHFSwitchProps,
-  ControlledSwitchProps,
-  SwitchProps,
-} from './Switch';

package/src/components/Switch/index.ts

@@ -1,9 +0,0 @@
-export { Switch, default } from './Switch';
-export type {
-  SwitchSize,
-  SwitchLabelPlacement,
-  BaseSwitchProps,
-  RHFSwitchProps,
-  ControlledSwitchProps,
-  SwitchProps,
-} from './Switch.types';