@soyfri/shared-library 1.5.0 → 1.6.0-beta.1

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

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

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

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

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

@@ -1,54 +0,0 @@
-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);
-  },
-};