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

package/src/components/Gallery/Gallery.stories.tsx

@@ -1,82 +0,0 @@
-import Gallery from "./Gallery";
-import type { Meta, StoryObj } from "@storybook/react";
-import { DefaultGalleryDefinition } from "./Gallery.definition";
-
-const meta: Meta<typeof Gallery> = {
-    title: "Components/Gallery",
-    component: Gallery,
-    parameters: {
-        layout: "centered"
-    },
-    tags: ["autodocs"]
-};
-
-export default meta;
-
-
-type Story = StoryObj<typeof Gallery>;
-
-
-export const Default: Story = {
-    args: {
-        maxWidth: "600px",
-        items: [
-            {
-                type: "image",
-                url: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80",
-                title: "Image 1",
-                thumbnail: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
-            },
-            {
-                type: "image",
-                url: "https://images.unsplash.com/photo-1511765224389-37f0e77cf0eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80",
-                title: "Image 2",
-                thumbnail: "https://images.unsplash.com/photo-1511765224389-37f0e77cf0eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
-            },
-            {
-                type: "image",
-                url: "https://images.unsplash.com/photo-1500534623283-312aade485b7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80",
-                title: "Image 3",
-                thumbnail: "https://images.unsplash.com/photo-1500534623283-312aade485b7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
-            },
-            {
-                type: "video",
-                url: "https://www.w3schools.com/html/mov_bbb.mp4",
-                title: "Video 1",
-                thumbnail: "https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
-            },
-            {
-                type: "image",
-                url: "https://images.unsplash.com/photo-1494526585095-c41746248156?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80",
-                title: "Image 4",
-                thumbnail: "https://images.unsplash.com/photo-1494526585095-c41746248156?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
-            },
-
-
-        ]
-    },
-    render: (args) => (
-
-        <Gallery {...args} />
-
-    ),
-    parameters: {
-        docs: {
-            description: {
-                story: "Ejemplo básico de Gallery, permite ver imagenes y videos"
-            },
-            source: {
-                code: DefaultGalleryDefinition
-            },
-            argTypes: {
-                maxWidth: { description: 'Permite ajustar el maxwidht de el componente gallery' },
-                items: { control: false, description: `Array de objetos con la información de las imágenes y videos a mostrar, la estructura de los objetos es la siguiente : {
-                    type: "image" | "video",
-                    url: string,
-                    title: string,
-                    thumbnail: string
-                }` }
-            }
-        }
-    }
-};

package/src/components/Gallery/Gallery.tsx

@@ -1,118 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-import { Stack, useMediaQuery } from "@mui/material";
-import { GalleryThumbnails } from "./GalleryThumbnails";
-import { GalleryMain } from "./GalleryMain";
-import { GalleryLightbox } from "./GalleryLightbox";
-
-export interface Props {
-  items: Array<{
-  url: string;
-  type: "image" | "video" | string;
-  title: string;
-  thumbnail: string;
-}>;
-  maxWidth?: string;
-}
-
-
-export const Gallery:React.FC<Props> = ({ items, maxWidth='600px' }: Props) => {
-  const isMobile = useMediaQuery("(max-width:700px)");
-  const [selectedIdx, setSelectedIdx] = useState(0);
-  const [openLightbox, setOpenLightbox] = useState(false);
-  const [zoom, setZoom] = useState(1);
-  const [rotation, setRotation] = useState(0);
-  const videoRef = useRef<HTMLVideoElement | null>(null);
-
-  const [thumbStartIdx, setThumbStartIdx] = useState(0);
-  const THUMB_VISIBLE_COUNT = isMobile ? 3 : 5;
-
-  // Flechas para miniaturas
-  const handleThumbUp = () => {
-    setThumbStartIdx((prev) => Math.max(0, prev - 1));
-  };
-  const handleThumbDown = () => {
-    setThumbStartIdx((prev) =>
-      Math.min(items.length - THUMB_VISIBLE_COUNT, prev + 1)
-    );
-  };
-
-  // Navegación entre imágenes
-  const handlePrev = () => {
-    setSelectedIdx((idx) => (idx === 0 ? items.length - 1 : idx - 1));
-  };
-  const handleNext = () => {
-    setSelectedIdx((idx) =>
-      idx === items.length - 1 ? 0 : idx + 1
-    );
-  };
-
-  // Acciones de teclado
-  useEffect(() => {
-    if (!openLightbox) return;
-    const handleKey = (e: KeyboardEvent) => {
-      switch (e.key) {
-        case "ArrowLeft":
-          handlePrev();
-          break;
-        case "ArrowRight":
-          handleNext();
-          break;
-        case "Escape":
-          setOpenLightbox(false);
-          break;
-        default:
-          break;
-      }
-    };
-    window.addEventListener("keydown", handleKey);
-    return () => window.removeEventListener("keydown", handleKey);
-  }, [openLightbox, items.length]);
-
-  // Reset zoom/rotación y autoplay video
-  useEffect(() => {
-    if (
-      openLightbox &&
-      items[selectedIdx]?.type === "video" &&
-      videoRef.current
-    ) {
-      videoRef.current.currentTime = 0;
-      videoRef.current.play();
-    }
-    setZoom(1);
-    setRotation(0);
-  }, [openLightbox, selectedIdx, items]);
-
-  return (
-    <Stack direction={isMobile ? "column" : "row"} gap={3} sx={{ maxWidth: maxWidth, mx: "auto", minHeight: 300 }}>
-      <GalleryThumbnails
-        items={items}
-        selectedIdx={selectedIdx}
-        onSelect={setSelectedIdx}
-        thumbStartIdx={thumbStartIdx}
-        THUMB_VISIBLE_COUNT={THUMB_VISIBLE_COUNT}
-        handleThumbUp={handleThumbUp}
-        handleThumbDown={handleThumbDown}
-        isMobile={isMobile}
-      />
-      <GalleryMain
-        item={items[selectedIdx]}
-        onOpenLightbox={() => setOpenLightbox(true)}
-        isMobile={isMobile}
-      />
-      <GalleryLightbox
-        open={openLightbox}
-        onClose={() => setOpenLightbox(false)}
-        item={items[selectedIdx]}
-        handlePrev={handlePrev}
-        handleNext={handleNext}
-        zoom={zoom}
-        setZoom={setZoom}
-        rotation={rotation}
-        setRotation={setRotation}
-        videoRef={videoRef}
-      />
-    </Stack>
-  );
-};
-
-export default Gallery;

package/src/components/Gallery/GalleryLightbox.tsx

@@ -1,170 +0,0 @@
-import React from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogActions,
-  Stack,
-  IconButton,
-  Box,
-  Typography,
-} from "@mui/material";
-import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
-import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
-import ZoomInIcon from "@mui/icons-material/ZoomIn";
-import ZoomOutIcon from "@mui/icons-material/ZoomOut";
-import RotateLeftIcon from "@mui/icons-material/RotateLeft";
-import RotateRightIcon from "@mui/icons-material/RotateRight";
-import RestartAltIcon from "@mui/icons-material/RestartAlt";
-import CloseIcon from "@mui/icons-material/Close";
-import { Button } from "../Button";
-
-
-interface Props {
-  open: boolean;
-  onClose: () => void;
-  item: {
-    url: string;
-    type: "image" | "video" | string;
-    title: string;
-    thumbnail: string;
-  };
-  handlePrev: () => void;
-  handleNext: () => void;
-  zoom: number;
-  setZoom: React.Dispatch<React.SetStateAction<number>>;
-  rotation: number;
-  setRotation: React.Dispatch<React.SetStateAction<number>>;
-  videoRef?: React.RefObject<HTMLVideoElement | null>;
-}
-
-export const GalleryLightbox = ({
-  open,
-  onClose,
-  item,
-  handlePrev,
-  handleNext,
-  zoom,
-  setZoom,
-  rotation,
-  setRotation,
-  videoRef,
-}: Props) => (
-  <Dialog open={open} onClose={onClose} fullWidth maxWidth="lg">
-    <DialogContent
-      sx={{
-        minHeight: 431,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 2,
-      }}
-    >
-      <Stack direction="row" justifyContent="space-between" alignItems="center" width="100%">
-        <IconButton onClick={handlePrev}>
-          <ArrowBackIosNewIcon />
-        </IconButton>
-        <Typography variant="subtitle1" fontWeight={600} sx={{ flex: 1, textAlign: "center" }}>
-          {item.title}
-        </Typography>
-        <IconButton onClick={handleNext}>
-          <ArrowForwardIosIcon />
-        </IconButton>
-      </Stack>
-      {item.type === "video" ? (
-        <Box
-          component="video"
-          key={item.url}
-          ref={videoRef}
-          src={item.url}
-          controls
-          autoPlay
-          sx={{
-            width: "100%",
-            maxWidth: "900px",
-            maxHeight: "70vh",
-            objectFit: "contain",
-            bgcolor: "#000",
-            borderRadius: 1,
-          }}
-        />
-      ) : (
-        <Box
-          component="img"
-          src={item.url}
-          alt={item.title}
-          sx={{
-            transform: `scale(${zoom}) rotate(${rotation}deg)`,
-            transition: "transform 0.2s ease",
-            width: "100%",
-            maxWidth: "900px",
-            maxHeight: "70vh",
-            objectFit: "contain",
-            borderRadius: 1,
-          }}
-        />
-      )}
-    </DialogContent>
-    <DialogActions
-      sx={{
-        display: "flex",
-        justifyContent: item.type === 'image' ? "space-between" : "end",
-        flexWrap: "wrap",
-        gap: 1,
-      }}
-    >
-
-      {item.type === 'image' && <>
-        <Stack direction="row" spacing={1}>
-          <Button
-            variant="outlined"
-            startIcon={<ZoomInIcon />}
-            onClick={() => setZoom((z) => z + 0.25)}
-          >
-            Zoom +
-          </Button>
-          <Button
-            variant="outlined"
-            startIcon={<ZoomOutIcon />}
-            onClick={() => setZoom((z) => Math.max(0.25, z - 0.25))}
-          >
-            Zoom −
-          </Button>
-        </Stack>
-        <Stack direction="row" spacing={1}>
-          <Button
-            variant="outlined"
-            onClick={() => setRotation((r) => r - 90)}
-          >
-            <RotateLeftIcon />
-          </Button>
-          <Button
-            variant="outlined"
-            onClick={() => setRotation((r) => r + 90)}
-          >
-            <RotateRightIcon />
-          </Button>
-        </Stack>
-        <Button
-          variant="outlined"
-          startIcon={<RestartAltIcon />}
-          onClick={() => {
-            setZoom(1);
-            setRotation(0);
-          }}
-        >
-          Reset
-        </Button>
-
-      </>
-      }
-      <Button
-        variant="contained"
-        startIcon={<CloseIcon />}
-        onClick={onClose}
-      >
-        Cerrar
-      </Button>
-    </DialogActions>
-  </Dialog >
-);

package/src/components/Gallery/GalleryMain.tsx

@@ -1,84 +0,0 @@
-import React from "react";
-import { Box, IconButton } from "@mui/material";
-import FullscreenIcon from "@mui/icons-material/Fullscreen";
-
-interface Props {
-  item: {
-  url: string;
-  type: "image" | "video" | string;
-  title: string;
-  thumbnail: string;
-};
-  onOpenLightbox: () => void;
-  isMobile: boolean;
-}
-
-export const GalleryMain = ({ item, onOpenLightbox, isMobile }: Props) => (
-  <Box
-    sx={{
-      width: isMobile ? "80%" : '100%',
-      maxHeight: 431,
-      maxWidth: isMobile ? "80%" : '100%',
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      position: "relative",
-      borderRadius: 1,
-      bgcolor: "#f8f9fa",
-      overflow: "hidden",
-      mx: "auto",
-    }}
-  >
-    <Box
-      sx={{
-        width: "100%",
-        height: "100%",
-        cursor: "pointer",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
-      onClick={onOpenLightbox}
-    >
-      {item.type === "video" ? (
-        <Box
-          component="video"
-          controls
-          src={item.url}
-          sx={{
-            width: "100%",
-            height: "100%",
-            objectFit: "contain",
-            bgcolor: "#000",
-            borderRadius: 1,
-          }}
-        />
-      ) : (
-        <Box
-          component="img"
-          src={item.url}
-          alt={item.title}
-          sx={{
-            width: "100%",
-            height: "100%",
-            objectFit: "contain",
-            borderRadius: 1,
-          }}
-        />
-      )}
-    </Box>
-    <IconButton
-      onClick={onOpenLightbox}
-      sx={{
-        position: "absolute",
-        top: 16,
-        right: 16,
-        bgcolor: "#1976d2",
-        "&:hover": { bgcolor: "#1565c0" },
-        boxShadow: 2,
-      }}
-    >
-      <FullscreenIcon sx={{ color: "#fff" }} />
-    </IconButton>
-  </Box>
-);

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,54 +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',
-  },
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Icon>;
-
-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',
-  },
-};