@soyfri/shared-library 1.5.0-beta.4 → 1.5.0

package/src/components/Autocomplete/Autocomplete.stories.tsx

@@ -0,0 +1,387 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React, { useState } from "react";
+import { Box, Typography, Avatar } from "@mui/material";
+
+import Autocomplete, { SelectOption } from "./Autocomplete";
+import {
+  CustomChipRenderAutocompleteDefinition,
+  CustomRenderOptionAutocompleteDefinition,
+  EmptyOptionsAutocompleteDefinition,
+  LoadingAutocompleteDefinition,
+  MultipleAutocompleteDefinition,
+  MultipleWithLimitAutocompleteDefinition,
+  SimpleAutocompleteDefinition,
+  WithPlaceholderAutocompleteDefinition,
+} from "./Autocomplete.definitions";
+
+// =============================================================================
+// Datos de ejemplo
+// =============================================================================
+const basicOptions: SelectOption[] = [
+  { value: "10", label: "10" },
+  { value: "25", label: "25" },
+  { value: "50", label: "50" },
+  { value: "100", label: "100" },
+];
+
+const userOptions: SelectOption[] = [
+  {
+    value: "admin",
+    label: "Administrador",
+    img: "https://placehold.co/40x40?text=A",
+  },
+  { value: "user", label: "Usuario", img: "https://placehold.co/40x40?text=U" },
+  {
+    value: "moderator",
+    label: "Moderador",
+    img: "https://placehold.co/40x40?text=M",
+  },
+];
+
+const manyOptions = Array.from({ length: 50 }, (_, i) => ({
+  value: `option-${i}`,
+  label: `Opción ${i + 1}`,
+}));
+
+// =============================================================================
+// META
+// =============================================================================
+const meta: Meta<typeof Autocomplete> = {
+  title: "Components/Autocomplete",
+  component: Autocomplete,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "Autocomplete personalizado basado en MUI con soporte para selección múltiple, chips, render custom y async.",
+      },
+    },
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Etiqueta para el campo de selección.",
+    },
+    options: {
+      control: "object",
+      description:
+        "Array de objetos `SelectOption` para las opciones del menú.",
+    },
+    value: {
+      control: "object",
+      description: "Valor(es) seleccionado(s) del select.",
+    },
+    onChange: {
+      action: "changed",
+      description:
+        "Función de callback que se llama cuando el valor del select cambia.",
+    },
+    multiple: {
+      control: "boolean",
+      description:
+        "Si es verdadero, permite la selección de múltiples opciones.",
+    },
+    placeholder: {
+      control: "text",
+      description: "Texto que se muestra cuando no hay nada seleccionado.",
+    },
+    maxChipsToShow: {
+      control: "number",
+      description:
+        "Número máximo de chips a mostrar en selección múltiple antes de agrupar.",
+      if: { arg: "multiple", eq: true },
+    },
+    renderChipLabel: {
+      control: false,
+      description:
+        "Función para personalizar el contenido del label de cada chip seleccionado (para múltiple) o del valor mostrado (para individual).",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Autocomplete>;
+
+// =============================================================================
+// STORIES
+// =============================================================================
+
+export const Simple: Story = {
+  render: () => {
+    const [value, setValue] = useState<string>("25");
+
+    return (
+      <Box sx={{ width: 250 }}>
+        <Autocomplete
+          label="Registros por página"
+          options={basicOptions}
+          value={value}
+          onChange={(val) => {
+            setValue(val as string);
+          }}
+        />
+        <Typography sx={{ mt: 2 }}>Valor: {value}</Typography>
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Autocomplete simple con opciones básicas y valor por defecto.",
+      },
+      source: { code: SimpleAutocompleteDefinition.trim() },
+    },
+  },
+};
+
+export const WithPlaceholder: Story = {
+  render: () => {
+    const [value, setValue] = useState<string>("");
+
+    return (
+      <Box sx={{ width: 300 }}>
+        <Autocomplete
+          label="Seleccione una opción"
+          options={basicOptions}
+          value={value}
+          onChange={(val) => {
+            setValue(val as string);
+          }}
+          placeholder="Ninguna opción seleccionada"
+        />
+        <Typography sx={{ mt: 2 }}>{value || "Ninguno"}</Typography>
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Autocomplete sin valor inicial que muestra un placeholder cuando no hay selección.",
+      },
+      source: { code: WithPlaceholderAutocompleteDefinition.trim() },
+    },
+  },
+};
+
+export const Multiple: Story = {
+  render: () => {
+    const [value, setValue] = useState<string[]>([]);
+
+    return (
+      <Box sx={{ width: 400 }}>
+        <Autocomplete
+          label="Seleccionar valores"
+          multiple
+          options={basicOptions}
+          value={value}
+          onChange={(val) => {
+            setValue(val as string[]);
+          }}
+        />
+        <Typography sx={{ mt: 2 }}>
+          Valor seleccionado: {JSON.stringify(value)}
+        </Typography>
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Autocomplete en modo múltiple que permite seleccionar varias opciones y las muestra como chips.",
+      },
+      source: { code: MultipleAutocompleteDefinition.trim() },
+    },
+  },
+};
+
+export const MultipleWithLimit: Story = {
+  render: () => {
+    const [value, setValue] = useState<string[]>(
+      manyOptions.slice(0, 5).map((opt) => opt.value),
+    );
+
+    return (
+      <Box sx={{ width: 400 }}>
+        <Autocomplete
+          label="Muchas selecciones"
+          multiple
+          maxChipsToShow={2}
+          options={manyOptions}
+          value={value}
+          onChange={(val) => {
+            setValue(val as string[]);
+          }}
+        />
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Autocomplete múltiple con límite de chips visibles, agrupando el resto en un contador.",
+      },
+      source: { code: MultipleWithLimitAutocompleteDefinition.trim() },
+    },
+  },
+};
+
+export const CustomRenderOption: Story = {
+  render: () => {
+    const [value, setValue] = useState<string[]>([]);
+
+    return (
+      <Box sx={{ width: 300 }}>
+        <Autocomplete
+          label="Usuarios"
+          multiple
+          options={userOptions}
+          value={value}
+          onChange={(val) => {
+            setValue(val as string[]);
+          }}
+          renderOptionItem={(item) => (
+            <Box sx={{ display: "flex", gap: 1, alignItems: "center" }}>
+              <Avatar src={item.img} sx={{ width: 24, height: 24 }} />
+              {item.label}
+            </Box>
+          )}
+        />
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Autocomplete con renderizado personalizado de opciones, incluyendo avatar e información adicional.",
+      },
+      source: { code: CustomRenderOptionAutocompleteDefinition.trim() },
+    },
+  },
+};
+
+export const CustomChipRender: Story = {
+  render: () => {
+    const [value, setValue] = useState<string[]>([]);
+
+    return (
+      <Box sx={{ width: 400 }}>
+        <Autocomplete
+          label="Usuarios seleccionados"
+          multiple
+          options={userOptions}
+          value={value}
+          onChange={(val) => {
+            setValue(val as string[]);
+          }}
+          maxChipsToShow={2}
+          renderChipLabel={(item) => (
+            <Typography variant="caption" fontWeight="bold">
+              {item.label.charAt(0)}
+            </Typography>
+          )}
+        />
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Autocomplete múltiple con renderizado personalizado de chips, mostrando solo la inicial del label.",
+      },
+      source: { code: CustomChipRenderAutocompleteDefinition.trim() },
+    },
+  },
+};
+
+export const Loading: Story = {
+  render: () => {
+    const [value, setValue] = useState<string>("");
+
+    return (
+      <Box sx={{ width: 300 }}>
+        <Autocomplete
+          label="Cargando..."
+          options={[]}
+          loading
+          value={value}
+          onChange={(val) => {
+            setValue(val as string);
+          }}
+        />
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Autocomplete en estado de carga, útil para integraciones con APIs o búsquedas asíncronas.",
+      },
+      source: { code: LoadingAutocompleteDefinition.trim() },
+    },
+  },
+};
+
+export const EmptyOptions: Story = {
+  render: () => {
+    const [value, setValue] = useState<string>("");
+
+    return (
+      <Box sx={{ width: 300 }}>
+        <Autocomplete
+          label="Sin opciones"
+          options={[]}
+          value={value}
+          onChange={(val) => {
+            setValue(val as string);
+          }}
+          placeholder="No hay opciones"
+        />
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Autocomplete sin opciones disponibles, mostrando mensaje vacío al usuario.",
+      },
+      source: { code: EmptyOptionsAutocompleteDefinition.trim() },
+    },
+  },
+};
+
+export const ManyOptions: Story = {
+  render: () => {
+    const [value, setValue] = useState<string>("");
+
+    return (
+      <Box sx={{ width: 300 }}>
+        <Autocomplete
+          label="Muchas opciones"
+          options={manyOptions}
+          value={value}
+          onChange={(val) => {
+            setValue(val as string);
+          }}
+        />
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Autocomplete sin opciones disponibles, mostrando mensaje vacío al usuario.",
+      },
+      source: { code: EmptyOptionsAutocompleteDefinition.trim() },
+    },
+  },
+};

package/src/components/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+import {
+  Autocomplete,
+  TextField,
+  Chip,
+  Avatar,
+  Box,
+  Typography,
+  CircularProgress,
+} from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+
+export interface SelectOption {
+  value: string | number;
+  label: string;
+  img?: string;
+  disabled?: boolean;
+  group?: string;
+  [key: string]: any;
+}
+
+type RenderOptionItem = (item: SelectOption) => React.ReactNode;
+type RenderChipLabel = (item: SelectOption) => React.ReactNode;
+
+interface AutocompleteProps<
+  TValue extends SelectOption["value"] = SelectOption["value"],
+> {
+  label?: string;
+  value: TValue | TValue[];
+  onChange: (val: TValue | TValue[]) => void;
+  options?: SelectOption[];
+  placeholder?: string;
+  multiple?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  error?: boolean;
+  helperText?: string;
+  maxChipsToShow?: number;
+  renderOptionItem?: RenderOptionItem;
+  renderChipLabel?: RenderChipLabel;
+}
+
+export function AutocompleteSelect<
+  TValue extends SelectOption["value"] = SelectOption["value"],
+>(props: AutocompleteProps<TValue>) {
+  const {
+    label,
+    options = [],
+    value,
+    onChange,
+    placeholder,
+    multiple = false,
+    disabled = false,
+    loading = false,
+    error = false,
+    helperText,
+    renderOptionItem,
+    renderChipLabel,
+    maxChipsToShow = 3,
+  } = props;
+
+  const renderTags = (value: SelectOption[], getTagProps: any) => {
+    const displayed = value.slice(0, maxChipsToShow);
+    const hidden = value.length - maxChipsToShow;
+
+    return (
+      <>
+        {displayed.map((option, index) => (
+          <Chip
+            {...getTagProps({ index })}
+            key={option.value}
+            label={renderChipLabel ? renderChipLabel(option) : option.label}
+            avatar={option.img ? <Avatar src={option.img} /> : undefined}
+            deleteIcon={<ClearIcon />}
+          />
+        ))}
+
+        {hidden > 0 && <Chip label={`+${hidden} más`} />}
+      </>
+    );
+  };
+
+  const renderOption = (propsLi: any, option: SelectOption) => (
+    <li {...propsLi} key={option.value}>
+      {renderOptionItem ? renderOptionItem(option) : option.label}
+    </li>
+  );
+
+  const renderAutocomplete = (value: any, onChange: any) => (
+    <Autocomplete
+      multiple={multiple}
+      options={options}
+      value={
+        multiple
+          ? (options.filter((o) =>
+              (value as string[] | undefined)?.includes(o.value as string),
+            ) ?? [])
+          : (options.find((o) => o.value === value) ?? null)
+      }
+      disabled={disabled}
+      loading={loading}
+      getOptionLabel={(opt) => opt?.label ?? ""}
+      isOptionEqualToValue={(a, b) => a.value === b.value}
+      onChange={onChange}
+      renderOption={renderOption}
+      renderTags={multiple ? renderTags : undefined}
+      noOptionsText="No hay opciones"
+      loadingText={
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <CircularProgress size={20} />
+          <Typography>Cargando...</Typography>
+        </Box>
+      }
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label={label}
+          placeholder={placeholder}
+          error={error}
+          helperText={helperText}
+        />
+      )}
+    />
+  );
+
+  const handleChangeInternal = (event: any, newValue: any) => {
+    if (multiple) {
+      const values = (newValue ?? []).map((opt: any) => opt.value);
+      (onChange as (val: TValue[]) => void)?.(values);
+    } else {
+      const value = newValue?.value ?? "";
+      (onChange as (val: TValue) => void)?.(value);
+    }
+  };
+
+  return renderAutocomplete(value, handleChangeInternal);
+}
+
+export default AutocompleteSelect;

package/src/components/Autocomplete/index.ts

@@ -0,0 +1 @@
+export { default as Autocomplete} from './Autocomplete'

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Avatar, AvatarProps } from './Avatar';
+import { within, expect } from 'storybook/test';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  args: {
+    items: [
+      { text: 'User One', imageUrl: 'https://i.pravatar.cc/150?img=1' },
+      { text: 'User Two', imageUrl: 'https://i.pravatar.cc/150?img=2' },
+    ],
+  },
+};
+
+export const WithTypeAndText: Story = {
+  args: {
+    type: 'Owner',
+    items: [{ text: 'Maria', imageUrl: 'https://i.pravatar.cc/150?img=5' }],
+    showText: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const text = await canvas.findByTestId('text');
+    const type = await canvas.findByTestId('type');
+    expect(text).toBeInTheDocument();
+    expect(type).toHaveTextContent('Owner:');
+  },
+};
+
+export const WithBadgesAndTooltip: Story = {
+  args: {
+    showTooltip: true,
+    items: [
+      { text: 'John D.', badge: 'JD', backgroundColor: '#EF5350', color: '#fff' },
+      { text: 'Alice B.', badge: 'AB', backgroundColor: '#AB47BC', color: '#fff' },
+    ],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const badges = await canvas.findAllByTestId('badge');
+    expect(badges.length).toBe(2);
+  },
+};