@soyfri/shared-library 2.0.0-beta.21 → 2.0.0-beta.23

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,212 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { useForm } from 'react-hook-form';
-import { Box, Button, Stack, Typography } from '@mui/material';
-
-import { Checkbox } from './Checkbox';
-
-const meta: Meta<typeof Checkbox> = {
-  title: 'Components/Checkbox',
-  component: Checkbox,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Checkbox con soporte para modo controlled (`checked`/`onChange`) y react-hook-form (`name`/`control`/`validation`). Incluye estado `indeterminate`, variante `bordered`, colores del theme y mensajes de error.',
-      },
-    },
-  },
-  argTypes: {
-    label: { control: 'text' },
-    size: { control: 'radio', options: ['small', 'medium'] },
-    color: {
-      control: 'select',
-      options: ['default', 'primary', 'secondary', 'success', 'error', 'info', 'warning'],
-    },
-    labelPlacement: {
-      control: 'radio',
-      options: ['start', 'end', 'top', 'bottom'],
-    },
-    indeterminate: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    bordered: { control: 'boolean' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Checkbox>;
-
-// ── Controlled mode ──────────────────────────────────────────────────────
-
-export const Basic: Story = {
-  render: (args) => {
-    const [checked, setChecked] = useState(false);
-    return (
-      <Checkbox
-        label={args.label ?? 'Acepto los términos'}
-        size={args.size}
-        color={args.color}
-        labelPlacement={args.labelPlacement}
-        indeterminate={args.indeterminate}
-        disabled={args.disabled}
-        bordered={args.bordered}
-        checked={checked}
-        onChange={setChecked}
-      />
-    );
-  },
-};
-
-export const WithError: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-    return (
-      <Checkbox
-        label="Debes aceptar para continuar"
-        checked={checked}
-        onChange={setChecked}
-        error={!checked}
-        helperText={!checked ? 'Campo requerido' : ' '}
-      />
-    );
-  },
-};
-
-export const Indeterminate: Story = {
-  render: () => {
-    const [children, setChildren] = useState([false, false, false]);
-    const allChecked = children.every(Boolean);
-    const someChecked = children.some(Boolean);
-    const indeterminate = someChecked && !allChecked;
-
-    return (
-      <Stack spacing={0.5}>
-        <Checkbox
-          label="Seleccionar todos"
-          checked={allChecked}
-          indeterminate={indeterminate}
-          onChange={(next) => setChildren([next, next, next])}
-        />
-        <Box sx={{ pl: 3 }}>
-          <Checkbox
-            label="Opción 1"
-            checked={children[0]}
-            onChange={(next) => setChildren([next, children[1], children[2]])}
-          />
-          <Checkbox
-            label="Opción 2"
-            checked={children[1]}
-            onChange={(next) => setChildren([children[0], next, children[2]])}
-          />
-          <Checkbox
-            label="Opción 3"
-            checked={children[2]}
-            onChange={(next) => setChildren([children[0], children[1], next])}
-          />
-        </Box>
-      </Stack>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Patrón "seleccionar todos" con `indeterminate` — útil para tablas o listas con selección múltiple.',
-      },
-    },
-  },
-};
-
-export const Bordered: Story = {
-  render: () => {
-    const [a, setA] = useState(true);
-    const [b, setB] = useState(false);
-    return (
-      <Stack spacing={2} sx={{ width: 320 }}>
-        <Checkbox label="Notificaciones por email" bordered checked={a} onChange={setA} />
-        <Checkbox label="Notificaciones push" bordered checked={b} onChange={setB} />
-      </Stack>
-    );
-  },
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <Stack direction="row" spacing={2}>
-      <Checkbox label="Small" size="small" checked onChange={() => {}} />
-      <Checkbox label="Medium (default)" size="medium" checked onChange={() => {}} />
-    </Stack>
-  ),
-};
-
-export const Colors: Story = {
-  render: () => (
-    <Stack direction="row" spacing={1} flexWrap="wrap">
-      {(['primary', 'secondary', 'success', 'error', 'info', 'warning'] as const).map(
-        (color) => (
-          <Checkbox
-            key={color}
-            label={color}
-            color={color}
-            checked
-            onChange={() => {}}
-          />
-        ),
-      )}
-    </Stack>
-  ),
-};
-
-// ── React Hook Form ──────────────────────────────────────────────────────
-
-export const WithReactHookForm: Story = {
-  render: () => {
-    type FormValues = {
-      terms: boolean;
-      newsletter: boolean;
-    };
-    const { control, handleSubmit, watch } = useForm<FormValues>({
-      defaultValues: { terms: false, newsletter: true },
-    });
-    const [submitted, setSubmitted] = useState<FormValues | null>(null);
-
-    return (
-      <Box component="form" onSubmit={handleSubmit((data) => setSubmitted(data))}>
-        <Stack spacing={1} sx={{ width: 360 }}>
-          <Checkbox
-            name="terms"
-            control={control}
-            validation={{ required: 'Debes aceptar los términos' }}
-            label="Acepto los términos y condiciones"
-          />
-          <Checkbox
-            name="newsletter"
-            control={control}
-            label="Quiero recibir el newsletter"
-          />
-          <Button type="submit" variant="contained">
-            Enviar
-          </Button>
-          <Typography variant="caption" color="text.secondary">
-            Watch: {JSON.stringify(watch())}
-          </Typography>
-          {submitted && (
-            <Typography variant="caption" color="success.main">
-              Submit OK: {JSON.stringify(submitted)}
-            </Typography>
-          )}
-        </Stack>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Integración con react-hook-form. El `validation.required` se muestra como `helperText` debajo del checkbox al intentar enviar. El `defaultValues` del `useForm` gana sobre `defaultChecked`.',
-      },
-    },
-  },
-};

package/src/components/Checkbox/Checkbox.sx.ts

@@ -1,67 +0,0 @@
-import type { SxProps, Theme } from '@mui/material/styles';
-
-export interface BuildCheckboxSxOptions {
-  bordered: boolean;
-  borderRadius: number | string;
-  hasLabel: boolean;
-  error: boolean;
-}
-
-const toRadius = (borderRadius: number | string) =>
-  typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;
-
-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 Checkbox. Cuando `bordered=true`, el contenedor del
- * `FormControlLabel` gana un borde estilo "form field" con focus ring y
- * estado de error (matchea InputGroup / Switch / RadioGroup).
- */
-export const buildCheckboxSx = ({
-  bordered,
-  borderRadius,
-  hasLabel,
-  error,
-}: BuildCheckboxSxOptions): 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: 0.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-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
-        }`,
-      },
-      ...(hasLabel && {
-        width: '100%',
-        justifyContent: 'space-between',
-      }),
-    },
-    '& .MuiFormHelperText-root': {
-      marginLeft: 0,
-    },
-  });
-};

package/src/components/Checkbox/Checkbox.tsx

@@ -1,208 +0,0 @@
-import type { FC, Ref } from 'react';
-import {
-  Checkbox as MuiCheckbox,
-  FormControl,
-  FormControlLabel,
-  FormHelperText,
-  type CheckboxProps as MuiCheckboxProps,
-  type SxProps,
-  type Theme,
-} from '@mui/material';
-import { useTheme } from '@mui/material/styles';
-import { Controller, type Control, type RegisterOptions } from 'react-hook-form';
-
-import { buildCheckboxSx } from './Checkbox.sx';
-import { resolvePreset } from '../_shared/resolvePreset';
-
-// ── Tipos de dominio ─────────────────────────────────────────────────────
-export type CheckboxSize = 'small' | 'medium';
-export type CheckboxLabelPlacement = 'start' | 'end' | 'top' | 'bottom';
-export type CheckboxColor =
-  | 'default'
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'error'
-  | 'info'
-  | 'warning';
-
-// ── Props base (todo lo común entre RHF y controlado) ────────────────────
-export interface BaseCheckboxProps
-  extends Omit<
-    MuiCheckboxProps,
-    'value' | 'onChange' | 'checked' | 'defaultChecked' | 'size' | 'color'
-  > {
-  /** Texto al lado del checkbox. Si está ausente, se renderiza solo el control. */
-  label?: string;
-  size?: CheckboxSize;
-  /** Color del checkbox. Default: `'primary'`. */
-  color?: CheckboxColor;
-  /** Posición del label respecto al checkbox. Default: `'end'`. */
-  labelPlacement?: CheckboxLabelPlacement;
-  /** Estado indeterminate (tri-state). Típico para "select all" parcial. */
-  indeterminate?: boolean;
-  disabled?: boolean;
-  error?: boolean;
-  helperText?: string;
-  /** Renderiza un contenedor con borde alrededor del checkbox + label. Default: false. */
-  bordered?: boolean;
-  /** Border radius del contenedor (cuando bordered). Default: 10. */
-  borderRadius?: number | string;
-  /** Valor inicial del checkbox en modo RHF. */
-  defaultChecked?: boolean;
-  /**
-   * Nombre del preset de estilo registrado en `theme.styles.Checkbox`.
-   * - `"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 RHFCheckboxProps extends BaseCheckboxProps {
-  name: string;
-  // `any` plano (no `Control<any>`): RHF tipa `Control<T>` con generics en
-  // posiciones tanto contravariantes como covariantes (ej. `_subjects.state`).
-  // Cuando el componente o su uso involucra generics adicionales, TS se
-  // confunde narroweando el discriminated union y `Control<any>` no logra
-  // absorber `Control<MyForm>` en la comparación estructural profunda. El
-  // `any` plano elimina ese ruido. RHF adentro sigue teniendo sus tipos
-  // fuertes — solo degradamos la superficie del prop del componente.
-  control: any;
-  validation?: RegisterOptions;
-  /**
-   * Side-effect que corre después de que RHF actualiza el form state.
-   * Útil para cascadas entre campos. NO reemplaza al handler de RHF.
-   */
-  onValueChange?: (checked: boolean) => void;
-  checked?: never;
-  onChange?: never;
-}
-
-export interface ControlledCheckboxProps extends BaseCheckboxProps {
-  name?: string;
-  control?: never;
-  validation?: never;
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-}
-
-// ── API pública final ────────────────────────────────────────────────────
-export type CheckboxProps = RHFCheckboxProps | ControlledCheckboxProps;
-
-export const Checkbox: FC<CheckboxProps> = (props) => {
-  const {
-    label,
-    size = 'medium',
-    color = 'primary',
-    labelPlacement = 'end',
-    indeterminate = false,
-    disabled = false,
-    error = false,
-    helperText,
-    bordered = false,
-    borderRadius = 10,
-    defaultChecked,
-    preset,
-    sx,
-    ...rest
-  } = props as ControlledCheckboxProps & {
-    control?: Control<any>;
-    validation?: RegisterOptions;
-  };
-
-  const theme = useTheme();
-  const presetSx = resolvePreset('Checkbox', 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) => [
-    buildCheckboxSx({
-      bordered,
-      borderRadius,
-      hasLabel: !!label,
-      error: effectiveError,
-    }),
-    ...(presetSx ? [presetSx] : []),
-    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
-  ];
-
-  const renderCheckbox = (
-    checked: boolean,
-    onChange: (next: boolean) => void,
-    onBlur?: () => void,
-    inputRef?: Ref<HTMLInputElement>,
-  ) => {
-    const checkboxEl = (
-      <MuiCheckbox
-        {...rest}
-        size={size}
-        color={color}
-        checked={!!checked}
-        indeterminate={indeterminate}
-        onChange={(_e, next) => onChange(next)}
-        onBlur={onBlur}
-        inputRef={inputRef}
-        disabled={disabled}
-      />
-    );
-
-    return label ? (
-      <FormControlLabel
-        control={checkboxEl}
-        label={label}
-        labelPlacement={labelPlacement}
-        disabled={disabled}
-      />
-    ) : (
-      checkboxEl
-    );
-  };
-
-  // ── RHF mode ──────────────────────────────────────────────────────────
-  if ('control' in props && props.control) {
-    const { name, control, validation, onValueChange } = props as RHFCheckboxProps;
-    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)}
-            >
-              {renderCheckbox(
-                !!field.value,
-                (next) => {
-                  field.onChange(next);
-                  onValueChange?.(next);
-                },
-                field.onBlur,
-                field.ref,
-              )}
-              {finalHelperText && <FormHelperText>{finalHelperText}</FormHelperText>}
-            </FormControl>
-          );
-        }}
-      />
-    );
-  }
-
-  // ── Controlled mode ───────────────────────────────────────────────────
-  const { checked, onChange } = props as ControlledCheckboxProps;
-  return (
-    <FormControl error={error} disabled={disabled} sx={buildSx(error)}>
-      {renderCheckbox(checked, onChange)}
-      {helperText && <FormHelperText>{helperText}</FormHelperText>}
-    </FormControl>
-  );
-};
-
-export default Checkbox;

package/src/components/Checkbox/index.ts

@@ -1,10 +0,0 @@
-export { Checkbox, default } from './Checkbox';
-export type {
-  CheckboxProps,
-  BaseCheckboxProps,
-  RHFCheckboxProps,
-  ControlledCheckboxProps,
-  CheckboxSize,
-  CheckboxLabelPlacement,
-  CheckboxColor,
-} from './Checkbox';

package/src/components/Chip/Chip.definitions.ts

@@ -1,167 +0,0 @@
-// Chip.definitions.ts
-
-export const BasicChipDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const BasicChipExample = () => {
-  return (
-    <Chip label="Etiqueta Básica" />
-  );
-};
-`;
-
-export const ClickableChipDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const ClickableChipExample = () => {
-  const handleClick = () => {
-    alert('Chip clickeado!');
-  };
-  return (
-    <Chip label="Clickeable" onClick={handleClick} />
-  );
-};
-`;
-
-export const DeletableChipDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
-
-export const DeletableChipExample = () => {
-  const handleDelete = () => {
-    alert('Chip borrado!');
-  };
-  return (
-    <Chip label="Borrable" onDelete={handleDelete} deleteIcon={<DeleteIcon />} />
-  );
-};
-`;
-
-export const ChipWithAvatarDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Avatar, Box, Typography } from '@mui/material';
-
-export const ChipWithAvatarExample = () => {
-  return (
-    <Chip
-      label="Con Avatar"
-      avatar={<Avatar alt="Avatar" src="https://placehold.co/40x40/FF7F50/FFFFFF?text=A" />}
-    />
-  );
-};
-`;
-
-export const ChipWithIconDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-import FaceIcon from '@mui/icons-material/Face';
-
-export const ChipWithIconExample = () => {
-  return (
-    <Chip label="Con Icono" icon={<FaceIcon />} />
-  );
-};
-`;
-
-export const DisabledChipDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const DisabledChipExample = () => {
-  return (
-    <Box sx={{ display: 'flex', gap: 2 }}>
-      <Chip label="Deshabilitado" disabled />
-      <Chip label="Deshabilitado Borrable" onDelete={() => {}} disabled />
-    </Box>
-  );
-};
-`;
-
-export const ChipVariantsDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const ChipVariantsExample = () => {
-  return (
-    <Box sx={{ display: 'flex', gap: 2 }}>
-      <Chip label="Filled (Default)" />
-      <Chip label="Outlined" variant="outlined" />
-    </Box>
-  );
-};
-`;
-
-export const ChipColorsDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const ChipColorsExample = () => {
-  return (
-    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
-      <Chip label="Default" />
-      <Chip label="Primary" color="primary" />
-      <Chip label="Secondary" color="secondary" />
-      <Chip label="Error" color="error" />
-      <Chip label="Info" color="info" />
-      <Chip label="Success" color="success" />
-      <Chip label="Warning" color="warning" />
-      <Chip label="Primary Outlined" color="primary" variant="outlined" />
-      <Chip label="Success Outlined" color="success" variant="outlined" />
-    </Box>
-  );
-};
-`;
-
-export const ChipSizesDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography } from '@mui/material';
-
-export const ChipSizesExample = () => {
-  return (
-    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
-      <Chip label="Pequeño" size="small" />
-      <Chip label="Mediano (Default)" size="medium" />
-    </Box>
-  );
-};
-`;
-
-export const CustomContentChipDefinition = `
-import React from 'react';
-import { Chip } from './Chip'; // Ajusta la ruta si es necesario
-import { Box, Typography, Avatar } from '@mui/material';
-import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
-
-export const CustomContentChipExample = () => {
-  const handleClick = () => alert('Perfil visto!');
-  const handleDelete = () => alert('Perfil eliminado!');
-
-  return (
-    <Chip
-      avatar={<Avatar src="https://placehold.co/40x40/87CEEB/FFFFFF?text=PR" />}
-      label={
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-          <CheckCircleOutlineIcon sx={{ fontSize: 16 }} />
-          <Typography variant="body2" sx={{ fontWeight: 'bold' }}>Perfil Completo</Typography>
-        </Box>
-      }
-      onDelete={handleDelete}
-      onClick={handleClick}
-      color="info"
-      variant="outlined"
-    />
-  );
-};
-`;