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

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

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

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

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

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

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

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

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

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