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

package/src/components/Gallery/GalleryThumbnails.tsx

@@ -0,0 +1,122 @@
+import { Box, IconButton } from '@mui/material';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+
+import type { GalleryItem } from './Gallery';
+
+interface Props {
+  items: GalleryItem[];
+  selectedIdx: number;
+  onSelect: (idx: number) => void;
+  thumbStartIdx: number;
+  visibleCount: number;
+  onThumbUp: () => void;
+  onThumbDown: () => void;
+  isMobile: boolean;
+}
+
+export const GalleryThumbnails = ({
+  items,
+  selectedIdx,
+  onSelect,
+  thumbStartIdx,
+  visibleCount,
+  onThumbUp,
+  onThumbDown,
+  isMobile,
+}: Props) => (
+  <Box
+    sx={{
+      display: 'flex',
+      flexDirection: isMobile ? 'row' : 'column',
+      alignItems: 'center',
+      minWidth: 70,
+      width: 70,
+      borderRadius: 1,
+      bgcolor: 'grey.100',
+      boxSizing: 'border-box',
+      py: 1,
+      mb: isMobile ? 2 : 0,
+      px: isMobile ? 1 : 0,
+    }}
+  >
+    <IconButton
+      size="small"
+      onClick={onThumbUp}
+      disabled={thumbStartIdx === 0}
+      aria-label={isMobile ? 'Miniatura anterior' : 'Miniaturas arriba'}
+      sx={{ mb: isMobile ? 0 : 1, mr: isMobile ? 1 : 0 }}
+    >
+      {isMobile ? <KeyboardArrowLeftIcon /> : <KeyboardArrowUpIcon />}
+    </IconButton>
+    {items
+      .slice(thumbStartIdx, thumbStartIdx + visibleCount)
+      .map((item, idx) => {
+        const realIdx = thumbStartIdx + idx;
+        const isSelected = selectedIdx === realIdx;
+        const handleSelect = () => onSelect(realIdx);
+        return (
+          <Box
+            key={`${realIdx}-${item.url}`}
+            role="button"
+            tabIndex={0}
+            aria-label={item.title}
+            aria-pressed={isSelected}
+            onClick={handleSelect}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                handleSelect();
+              }
+            }}
+            sx={{
+              cursor: 'pointer',
+              width: 60,
+              height: 60,
+              borderRadius: 1,
+              border: (theme) =>
+                `2px solid ${
+                  isSelected ? theme.palette.primary.main : theme.palette.divider
+                }`,
+              overflow: 'hidden',
+              bgcolor: 'action.hover',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexShrink: 0,
+              m: isMobile ? '0 4px' : '4px 0',
+              outline: 'none',
+              '&:focus-visible': {
+                boxShadow: (theme) =>
+                  `0 0 0 2px ${theme.palette.primary.main}`,
+              },
+            }}
+          >
+            <Box
+              component="img"
+              src={item.thumbnail ?? item.url}
+              alt={item.title}
+              sx={{
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+              }}
+            />
+          </Box>
+        );
+      })}
+    <IconButton
+      size="small"
+      onClick={onThumbDown}
+      disabled={thumbStartIdx + visibleCount >= items.length}
+      aria-label={isMobile ? 'Miniatura siguiente' : 'Miniaturas abajo'}
+      sx={{ mt: isMobile ? 0 : 1, ml: isMobile ? 1 : 0 }}
+    >
+      {isMobile ? <KeyboardArrowRightIcon /> : <KeyboardArrowDownIcon />}
+    </IconButton>
+  </Box>
+);
+
+export default GalleryThumbnails;

package/src/components/Gallery/index.ts

@@ -0,0 +1,2 @@
+export { Gallery, default } from './Gallery';
+export type { GalleryProps, GalleryItem } from './Gallery';

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Icon } from './Icon';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import SettingsIcon from '@mui/icons-material/Settings';
+
+const meta: Meta<typeof Icon> = {
+  title: 'Components/Icon',
+  component: Icon,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Componente Icon con soporte para 3 fuentes: `children` (elemento MUI), `path` (string SVG inline, para los iconos custom de Metronic) y `url` (ruta a un archivo `.svg`).',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Icon>;
+
+// ── Modo legacy: children ──────────────────────────────────────────────
+
+export const Default: Story = {
+  args: {
+    children: <NotificationsIcon />,
+  },
+};
+
+export const Outlined: Story = {
+  args: {
+    children: <SettingsIcon />,
+    outlined: true,
+  },
+};
+
+export const Spinning: Story = {
+  args: {
+    children: <SettingsIcon />,
+    spin: true,
+  },
+};
+
+export const WithBadge: Story = {
+  args: {
+    children: <NotificationsIcon />,
+    badge: 3,
+    badgeColor: 'error',
+  },
+};
+
+export const LargeWhiteIcon: Story = {
+  args: {
+    children: <NotificationsIcon />,
+    size: 'xl',
+    white: true,
+    badge: 10,
+    badgeColor: 'primary',
+  },
+};
+
+// ── Nuevas fuentes: path + url ────────────────────────────────────────
+
+export const FromPathD: Story = {
+  args: {
+    path: 'M12 2L2 22h20L12 2zm0 3.83L19.17 20H4.83L12 5.83zM11 16h2v2h-2v-2zm0-6h2v5h-2v-5z',
+    color: '#f59e0b',
+    size: 'lg',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renderiza un SVG a partir del atributo `d` de un `<path>`. Es la forma en que Metronic suele entregar iconos custom.',
+      },
+    },
+  },
+};
+
+export const FromFullSvg: Story = {
+  args: {
+    path: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2" stroke="white" stroke-width="2" fill="none"/></svg>',
+    color: '#2563eb',
+    size: 'lg',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Si `path` contiene un `<svg>` completo (con `viewBox`, múltiples paths, etc), se inyecta tal cual.',
+      },
+    },
+  },
+};
+
+export const FromUrl: Story = {
+  args: {
+    url: 'https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg',
+    alt: 'SVG logo',
+    size: 'xl',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renderiza un `<img>` apuntando a un archivo `.svg`. Útil para assets locales (p.ej. `/public/icons/foo.svg`).',
+      },
+    },
+  },
+};
+
+export const PathWithBadge: Story = {
+  args: {
+    path: 'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z',
+    badge: '9+',
+    badgeColor: 'error',
+    size: 'md',
+  },
+};

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,163 @@
+import React, { type ReactNode, useMemo } from 'react';
+import { Badge, styled } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material/styles';
+
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface IconProps {
+  /**
+   * Contenido del icono. Modo legacy: acepta un elemento MUI o SVG ya armado.
+   * Si se usa junto con `path` o `url`, `children` tiene prioridad.
+   */
+  children?: ReactNode;
+  /**
+   * Ruta SVG inline. Acepta dos formatos:
+   * - Solo el valor del atributo `d` de un `<path>` (ej. `"M12 2L2 22..."`).
+   * - Un SVG completo (ej. `"<svg>...</svg>"`).
+   *
+   * ⚠️ Seguridad: cuando el string empieza con `<svg`, se inyecta vía
+   * `dangerouslySetInnerHTML`. **NUNCA pasar contenido proveniente de input
+   * de usuario o de backends no confiables** — riesgo XSS.
+   */
+  path?: string;
+  /**
+   * URL a un archivo `.svg` (asset local o remoto). Se renderiza vía `<img>`.
+   * El color del icono NO aplica en este modo (limitación de `<img>`).
+   */
+  url?: string;
+  /** Alt text cuando se usa `url`. Default: `"icon"`. */
+  alt?: string;
+  /**
+   * ViewBox cuando se usa `path`. Default: `"0 0 24 24"`. Ignorado si `path`
+   * ya viene como `<svg>` completo.
+   */
+  viewBox?: string;
+  color?: string;
+  outlined?: boolean;
+  spin?: boolean;
+  badge?: string | number;
+  badgeColor?: 'primary' | 'secondary' | 'error';
+  badgePosition?: {
+    vertical: 'top' | 'bottom';
+    horizontal: 'right' | 'left';
+  };
+  size?: IconSize;
+  black?: boolean;
+  white?: boolean;
+  className?: string;
+  sx?: SxProps<Theme>;
+}
+
+const sizeMap: Record<IconSize, number> = {
+  xs: 18,
+  sm: 24,
+  md: 36,
+  lg: 48,
+  xl: 64,
+};
+
+const StyledIcon = styled('span')<{
+  color?: string;
+  fontSize?: number;
+  spin?: boolean;
+  outlined?: boolean;
+}>(({ color, fontSize, spin, outlined }) => ({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: color,
+  fontSize: fontSize,
+  width: fontSize,
+  height: fontSize,
+  animation: spin ? 'spin 1s linear infinite' : undefined,
+  border: outlined ? '1px solid currentColor' : undefined,
+  borderRadius: '50%',
+  padding: outlined ? 4 : 0,
+  '@keyframes spin': {
+    '0%': { transform: 'rotate(0deg)' },
+    '100%': { transform: 'rotate(360deg)' },
+  },
+  '& svg': {
+    width: '100%',
+    height: '100%',
+    fill: 'currentColor',
+    display: 'block',
+  },
+  '& img': {
+    width: '100%',
+    height: '100%',
+    display: 'block',
+  },
+}));
+
+export const Icon: React.FC<IconProps> = ({
+  children,
+  path,
+  url,
+  alt = 'icon',
+  viewBox = '0 0 24 24',
+  color = 'var(--primary-color)',
+  outlined = false,
+  spin = false,
+  badge,
+  badgeColor = 'primary',
+  badgePosition = { vertical: 'bottom', horizontal: 'right' },
+  size = 'sm',
+  black,
+  white,
+  className,
+  sx,
+}) => {
+  const finalColor = white ? 'white' : black ? 'black' : color;
+  const iconSize = sizeMap[size];
+
+  const content = useMemo(() => {
+    if (children) return children;
+
+    if (path) {
+      const trimmed = path.trim();
+      if (trimmed.startsWith('<svg')) {
+        return <span dangerouslySetInnerHTML={{ __html: trimmed }} />;
+      }
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox={viewBox}
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <path d={trimmed} />
+        </svg>
+      );
+    }
+
+    if (url) {
+      return <img src={url} alt={alt} />;
+    }
+
+    return null;
+  }, [children, path, url, alt, viewBox]);
+
+  return (
+    <Badge
+      badgeContent={badge}
+      color={badgeColor}
+      anchorOrigin={badgePosition}
+      invisible={badge === undefined}
+      sx={{ '.MuiBadge-badge': { transform: 'scale(1)' } }}
+    >
+      <StyledIcon
+        color={finalColor}
+        fontSize={iconSize}
+        spin={spin}
+        outlined={outlined}
+        className={`hsi-icon ${className || ''}`}
+        sx={sx}
+      >
+        {content}
+      </StyledIcon>
+    </Badge>
+  );
+};
+
+export default Icon;

package/src/components/Icon/index.ts

@@ -0,0 +1,2 @@
+export { Icon, default } from './Icon';
+export type { IconProps, IconSize } from './Icon';