@soyfri/shared-library 2.0.0-beta.10 → 2.0.0-beta.11

package/src/components/Gallery/GalleryThumbnails.tsx

@@ -1,106 +0,0 @@
-import React from "react";
-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";
-
-
-interface Props {
-  items: Array<{
-    url: string;
-    type: string;
-    title: string;
-    thumbnail: string;
-  }>;
-  selectedIdx: number;
-  onSelect: (idx: number) => void;
-  thumbStartIdx: number;
-  THUMB_VISIBLE_COUNT: number;
-  handleThumbUp: () => void;
-  handleThumbDown: () => void;
-  isMobile: boolean;
-}
-
-export const GalleryThumbnails = ({
-  items,
-  selectedIdx,
-  onSelect,
-  thumbStartIdx,
-  THUMB_VISIBLE_COUNT,
-  handleThumbUp,
-  handleThumbDown,
-  isMobile,
-}: Props) => (
-  <Box
-    sx={{
-      display: "flex",
-      flexDirection: isMobile ? "row" : "column",
-      alignItems: "center",
-      minWidth: 70,
-      width: 70,
-      borderRadius: 1,
-      bgcolor: "#f8f9fa",
-      boxSizing: "border-box",
-      py: 1,
-      mb: isMobile ? 2 : 0,
-      px: isMobile ? 1 : 0,
-    }}
-  >
-    <IconButton
-      size="small"
-      onClick={handleThumbUp}
-      disabled={thumbStartIdx === 0}
-      sx={{ mb: isMobile ? 0 : 1, mr: isMobile ? 1 : 0 }}
-    >
-      {isMobile ? <KeyboardArrowLeftIcon /> : <KeyboardArrowUpIcon />}
-    </IconButton>
-    {items
-      .slice(thumbStartIdx, thumbStartIdx + THUMB_VISIBLE_COUNT)
-      .map((item, idx) => {
-        const realIdx = thumbStartIdx + idx;
-        return (
-          <Box
-            key={realIdx}
-            onClick={() => onSelect(realIdx)}
-            sx={{
-              cursor: "pointer",
-              width: 60,
-              height: 60,
-              borderRadius: 1,
-              border:
-                selectedIdx === realIdx
-                  ? "2px solid #1976d2"
-                  : "2px solid #eee",
-              overflow: "hidden",
-              bgcolor: "#eee",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              flexShrink: 0,
-              m: isMobile ? "0 4px" : "4px 0",
-            }}
-          >
-            <Box
-              component="img"
-              src={item.thumbnail}
-              alt={item.title}
-              sx={{
-                width: "100%",
-                height: "100%",
-                objectFit: "cover",
-              }}
-            />
-          </Box>
-        );
-      })}
-    <IconButton
-      size="small"
-      onClick={handleThumbDown}
-      disabled={thumbStartIdx + THUMB_VISIBLE_COUNT >= items.length}
-      sx={{ mt: isMobile ? 0 : 1, ml: isMobile ? 1 : 0 }}
-    >
-      {isMobile ? <KeyboardArrowRightIcon /> : <KeyboardArrowDownIcon />}
-    </IconButton>
-  </Box>
-);

package/src/components/Gallery/index.ts

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

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

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

@@ -1,175 +0,0 @@
-import React, { type ReactNode, useMemo } from 'react';
-import { Badge, styled } from '@mui/material';
-
-export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export interface IconProps {
-  /**
-   * Contenido 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 (el contenido del atributo `d` de un `<path>`). Útil para
-   * los iconos custom de Metronic que vienen como strings de path.
-   *
-   * ```tsx
-   * <Icon path="M12 2L2 22h20L12 2z" />
-   * ```
-   *
-   * Si el string contiene el tag `<svg>` completo (no solo el `d`), también
-   * se soporta y se inyecta tal cual via `dangerouslySetInnerHTML`.
-   */
-  path?: string;
-  /**
-   * URL a un archivo `.svg` (asset local o remoto). Se renderiza vía `<img>`.
-   *
-   * ```tsx
-   * <Icon url="/assets/icons/custom-warning.svg" />
-   * ```
-   */
-  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';
-  };
-  badgeSize?: 'small' | 'medium' | 'large';
-  size?: IconSize;
-  black?: boolean;
-  white?: boolean;
-  className?: string;
-}
-
-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,
-}) => {
-  const finalColor = useMemo(() => {
-    if (white) return 'white';
-    if (black) return 'black';
-    return color;
-  }, [color, white, black]);
-
-  const iconSize = sizeMap[size];
-
-  // Resolver el contenido según la prop activa.
-  const content = useMemo(() => {
-    if (children) return children;
-
-    if (path) {
-      const trimmed = path.trim();
-      // Si es un SVG completo (empieza con <svg), lo inyectamos tal cual.
-      if (trimmed.startsWith('<svg')) {
-        return <span dangerouslySetInnerHTML={{ __html: trimmed }} />;
-      }
-      // Si no, asumimos que es el atributo `d` de un <path>.
-      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 || ''}`}
-      >
-        {content}
-      </StyledIcon>
-    </Badge>
-  );
-};
-
-export default Icon;

package/src/components/Icon/index.ts

@@ -1,2 +0,0 @@
-import '../../styles.css';
-export { default as Icon } from './Icon'