@soyfri/shared-library 2.0.0-beta.17 → 2.0.0-beta.18

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

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

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

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

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

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

@@ -0,0 +1,167 @@
+// 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"
+    />
+  );
+};
+`;