@soyfri/shared-library 2.0.0-beta.1 → 2.0.0-beta.3

package/src/components/Drawer/DrawerItem.tsx

@@ -1,110 +0,0 @@
-import React, { type ReactNode, type MouseEvent } from 'react';
-import { Box, Tooltip, Typography } from '@mui/material';
-import type { SxProps, Theme } from '@mui/material/styles';
-
-import { useDrawerContext } from './DrawerContext';
-import { buildDrawerItemSx } from './Drawer.sx';
-
-export interface DrawerItemProps {
-  /** Icono del item. Se muestra siempre (expanded y collapsed). */
-  icon?: ReactNode;
-  /** Texto del item. Se oculta cuando el drawer está colapsado (muestra tooltip). */
-  label: ReactNode;
-  /** Handler de click. */
-  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
-  /** Marca el item como activo (destaca color y fondo). */
-  active?: boolean;
-  /** Marca el item como "destructivo" (p.ej. cerrar sesión): color error. */
-  danger?: boolean;
-  /** Deshabilita click + bajo opacidad. */
-  disabled?: boolean;
-  /** Contenido adicional a la derecha del label (badge, count, chevron). */
-  endAdornment?: ReactNode;
-  /** sx override del consumer, se mergea al final. */
-  sx?: SxProps<Theme>;
-  className?: string;
-}
-
-/**
- * Item de un Drawer de shared-library. Lee el estado `collapsed` del
- * DrawerContext para adaptar layout y mostrar tooltip en modo mini.
- *
- * Uso típico:
- * ```tsx
- * <Drawer collapsed={collapsed} onToggleCollapse={toggle}>
- *   <DrawerItem icon={<HomeIcon />} label="Inicio" active />
- *   <DrawerItem icon={<UserIcon />} label="Perfil" />
- * </Drawer>
- * ```
- */
-export function DrawerItem({
-  icon,
-  label,
-  onClick,
-  active = false,
-  danger = false,
-  disabled = false,
-  endAdornment,
-  sx,
-  className,
-}: DrawerItemProps) {
-  const { collapsed } = useDrawerContext();
-
-  const baseSx = buildDrawerItemSx({ collapsed, active, danger });
-
-  const mergedSx: SxProps<Theme> = [
-    baseSx,
-    disabled && { pointerEvents: 'none', opacity: 0.5 },
-    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
-  ].filter(Boolean) as SxProps<Theme>;
-
-  const content = (
-    <Box
-      role="button"
-      tabIndex={disabled ? -1 : 0}
-      aria-disabled={disabled}
-      onClick={disabled ? undefined : onClick}
-      onKeyDown={(event) => {
-        if (disabled) return;
-        if (event.key === 'Enter' || event.key === ' ') {
-          event.preventDefault();
-          onClick?.(event as unknown as MouseEvent<HTMLDivElement>);
-        }
-      }}
-      className={className}
-      sx={mergedSx}
-    >
-      {icon !== undefined && (
-        <Box className="drawer-item__icon" component="span">
-          {icon}
-        </Box>
-      )}
-      <Typography
-        component="span"
-        variant="body2"
-        className="drawer-item__label"
-        sx={{ fontWeight: active ? 600 : 400 }}
-      >
-        {label}
-      </Typography>
-      {!collapsed && endAdornment && (
-        <Box component="span" sx={{ flexShrink: 0, ml: 'auto' }}>
-          {endAdornment}
-        </Box>
-      )}
-    </Box>
-  );
-
-  // Cuando está colapsado, envolvemos en tooltip para revelar el label al hover.
-  if (collapsed && typeof label === 'string') {
-    return (
-      <Tooltip title={label} placement="right" arrow>
-        {content}
-      </Tooltip>
-    );
-  }
-
-  return content;
-}
-
-export default DrawerItem;

package/src/components/Drawer/index.ts

@@ -1,10 +0,0 @@
-export { Drawer, default } from './Drawer';
-export { DrawerItem } from './DrawerItem';
-export { useDrawerContext } from './DrawerContext';
-export type {
-  DrawerProps,
-  DrawerVariant,
-  DrawerAnchor,
-} from './Drawer';
-export type { DrawerItemProps } from './DrawerItem';
-export type { DrawerContextValue } from './DrawerContext';

package/src/components/Flyout/Flyout.stories.tsx

@@ -1,282 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
-import { Box, Button, List, ListItem, ListItemText, Typography } from '@mui/material';
-import Flyout from './Flyout'; // Adjust the import path if your Flyout.tsx is in a different directory
-import { Input } from '../Input/Input';
-
-// Define the Meta for the Flyout component
-const meta: Meta<typeof Flyout> = {
-  title: 'Components/Flyout', // Category in Storybook
-  component: Flyout,
-  tags: ['autodocs'], // Automatically generate documentation
-  argTypes: {
-    open: {
-      control: 'boolean',
-      description: 'Controls the visibility of the flyout.',
-    },
-    onClose: {
-      action: 'closed', // Log the onClose event in Storybook actions panel
-      description: 'Callback function when the flyout is requested to close.',
-    },
-    title: {
-      control: 'text',
-      description: 'Title displayed at the top of the flyout.',
-    },
-    anchor: {
-      control: 'select',
-      options: ['left', 'top', 'right', 'bottom'],
-      description: 'Side from which the flyout will appear.',
-    },
-    size: {
-      control: 'select',
-      options: ['small', 'medium', 'large'],
-      description: 'Predefined size of the flyout (width for left/right, height for top/bottom).',
-    },
-    height: {
-      control: 'text',
-      description: 'Custom height for top/bottom anchored flyouts (e.g., "50vh", "300px").',
-      if: { arg: 'anchor', eq: ['top', 'bottom'] }, // Only show if anchor is top or bottom
-    },
-    children: {
-      control: 'text', // Can be set to 'text' for simple string content, or 'disable'
-      description: 'Content to be rendered inside the flyout.',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: 'A customizable Drawer component that slides in from a specified anchor point, ideal for displaying supplementary content or forms without navigating away from the main page.',
-      },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Flyout>;
-
-// --- Helper component for demonstration content ---
-const DefaultValueInput: React.FC = () => {
-  const [value, setValue] = useState<string | number>('Some text');
-  return (
-    <Box sx={{ my: 2 }}>
-      <Input
-        label="Input Field"
-        value={value}
-        onChange={(next) => setValue(next)}
-      />
-    </Box>
-  );
-};
-
-const DemoContent: React.FC = () => (
-  <Box>
-    <Typography variant="body1" paragraph>
-      This is some example content inside the flyout. It can contain any React elements.
-    </Typography>
-    <List dense>
-      <ListItem disablePadding>
-        <ListItemText primary="Item 1:" secondary="Detail A" />
-      </ListItem>
-      <ListItem disablePadding>
-        <ListItemText primary="Item 2:" secondary="Detail B" />
-      </ListItem>
-      <ListItem disablePadding>
-        <ListItemText primary="Item 3:" secondary="Detail C" />
-      </ListItem>
-      {[...Array(15)].map((_, i) => ( // Add more items to demonstrate scrolling
-        <ListItem key={i + 4} disablePadding>
-          <ListItemText primary={`More Item ${i + 4}:`} secondary={`More Detail ${i + 4}`} />
-        </ListItem>
-      ))}
-    </List>
-    <DefaultValueInput />
-    <Button variant="contained" color="primary" sx={{ mt: 2 }}>
-      Action Button
-    </Button>
-  </Box>
-);
-
-
-// --- Stories ---
-
-// Default story for a basic right-anchored flyout
-export const Default: Story = {
-  render: (args) => {
-    const [isOpen, setIsOpen] = useState(false);
-    return (
-      <Box sx={{ height: '200vh', p: 2, backgroundColor: '#f0f0f0' }}> {/* Added height to simulate scrollable page */}
-        <Typography variant="h5" mb={2}>Default Flyout Example</Typography>
-        <Button variant="contained" onClick={() => setIsOpen(true)}>
-          Open Flyout (Right)
-        </Button>
-        <Flyout {...args} open={isOpen} onClose={() => setIsOpen(false)}>
-          <DemoContent />
-        </Flyout>
-      </Box>
-    );
-  },
-  args: {
-    title: 'Flyout Title',
-    anchor: 'right',
-    size: 'medium',
-    // children is handled by the render function with DemoContent
-  },
-};
-
-// Story for a small flyout from the left
-export const SmallLeft: Story = {
-  render: (args) => {
-    const [isOpen, setIsOpen] = useState(false);
-    return (
-      <Box sx={{ p: 2 }}>
-        <Typography variant="h5" mb={2}>Small Flyout from Left</Typography>
-        <Button variant="contained" onClick={() => setIsOpen(true)}>
-          Open Small Flyout (Left)
-        </Button>
-        <Flyout {...args} open={isOpen} onClose={() => setIsOpen(false)}>
-          <DemoContent />
-        </Flyout>
-      </Box>
-    );
-  },
-  args: {
-    title: 'Small Flyout',
-    anchor: 'left',
-    size: 'small',
-  },
-};
-
-// Story for a large flyout from the right
-export const LargeRight: Story = {
-  render: (args) => {
-    const [isOpen, setIsOpen] = useState(false);
-    return (
-      <Box sx={{ p: 2 }}>
-        <Typography variant="h5" mb={2}>Large Flyout from Right</Typography>
-        <Button variant="contained" onClick={() => setIsOpen(true)}>
-          Open Large Flyout (Right)
-        </Button>
-        <Flyout {...args} open={isOpen} onClose={() => setIsOpen(false)}>
-          <DemoContent />
-        </Flyout>
-      </Box>
-    );
-  },
-  args: {
-    title: 'Large Flyout',
-    anchor: 'right',
-    size: 'large',
-  },
-};
-
-// Story for a top-anchored flyout with custom height
-export const TopAnchor: Story = {
-  render: (args) => {
-    const [isOpen, setIsOpen] = useState(false);
-    return (
-      <Box sx={{ p: 2 }}>
-        <Typography variant="h5" mb={2}>Top Anchored Flyout</Typography>
-        <Button variant="contained" onClick={() => setIsOpen(true)}>
-          Open Top Flyout
-        </Button>
-        <Flyout {...args} open={isOpen} onClose={() => setIsOpen(false)}>
-          <DemoContent />
-        </Flyout>
-      </Box>
-    );
-  },
-  args: {
-    title: 'Top Flyout',
-    anchor: 'top',
-    height: '300px', // Custom height for top/bottom anchor
-    size: 'medium', // Size prop still applies but width is 100% for top/bottom
-  },
-};
-
-// Story for a bottom-anchored flyout with custom height
-export const BottomAnchor: Story = {
-  render: (args) => {
-    const [isOpen, setIsOpen] = useState(false);
-    return (
-      <Box sx={{ p: 2 }}>
-        <Typography variant="h5" mb={2}>Bottom Anchored Flyout</Typography>
-        <Button variant="contained" onClick={() => setIsOpen(true)}>
-          Open Bottom Flyout
-        </Button>
-        <Flyout {...args} open={isOpen} onClose={() => setIsOpen(false)}>
-          <DemoContent />
-        </Flyout>
-      </Box>
-    );
-  },
-  args: {
-    title: 'Bottom Flyout',
-    anchor: 'bottom',
-    height: '40vh', // Custom height using viewport units
-    size: 'medium',
-  },
-};
-
-// Story with no title
-export const NoTitle: Story = {
-  render: (args) => {
-    const [isOpen, setIsOpen] = useState(false);
-    return (
-      <Box sx={{ p: 2 }}>
-        <Typography variant="h5" mb={2}>Flyout with No Title</Typography>
-        <Button variant="contained" onClick={() => setIsOpen(true)}>
-          Open Flyout (No Title)
-        </Button>
-        <Flyout {...args} open={isOpen} onClose={() => setIsOpen(false)}>
-          <DemoContent />
-        </Flyout>
-      </Box>
-    );
-  },
-  args: {
-    title: undefined, // Explicitly no title
-    anchor: 'right',
-    size: 'medium',
-  },
-};
-
-// Story with custom content
-export const CustomContent: Story = {
-  render: (args) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [customText, setCustomText] = useState('This is some custom text that can be edited.');
-    return (
-      <Box sx={{ p: 2 }}>
-        <Typography variant="h5" mb={2}>Flyout with Custom Content</Typography>
-        <Button variant="contained" onClick={() => setIsOpen(true)}>
-          Open Custom Content Flyout
-        </Button>
-        <Flyout {...args} open={isOpen} onClose={() => setIsOpen(false)}>
-          <Box sx={{ p: 2 }}>
-            <Typography variant="h6" gutterBottom>Custom Form</Typography>
-            <Box sx={{ mb: 2 }}>
-              <Input
-                label="Your Message"
-                multiline
-                rows={4}
-                fullWidth
-                value={customText}
-                onChange={(next) => setCustomText(String(next))}
-              />
-            </Box>
-            <Button variant="contained" color="secondary">
-              Submit Custom Content
-            </Button>
-          </Box>
-        </Flyout>
-      </Box>
-    );
-  },
-  args: {
-    title: 'Custom Content Flyout',
-    anchor: 'right',
-    size: 'medium',
-    // children is handled by the render function
-  },
-};

package/src/components/Flyout/Flyout.tsx

@@ -1,122 +0,0 @@
-import React, { useMemo } from 'react';
-import {
-  Box,
-  Typography,
-  IconButton,
-  Divider,
-  Drawer,
-  List,
-  ListItem,
-  ListItemText,
-  TextField,
-  Button,
-} from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-
-// Define the size types for the Flyout
-type FlyoutSize = 'small' | 'medium' | 'large';
-
-// Define the props for the Flyout component
-export interface FlyoutProps {
-  open: boolean;
-  onClose: () => void;
-  title?: string;
-  anchor?: 'left' | 'top' | 'right' | 'bottom';
-  children: React.ReactNode;
-  size?: FlyoutSize; // New prop for predefined size
-  height?: string | number; // Allows custom height for top/bottom anchors
-}
-
-const Flyout: React.FC<FlyoutProps> = ({
-  open,
-  onClose,
-  title,
-  anchor = 'right',
-  children,
-  size = 'medium', // Default size: 'medium'
-  height = 'auto',
-}) => {
-  // Mapping of predefined sizes to pixel widths
-  const getWidthBySize = (flyoutSize: FlyoutSize): number => {
-    const baseMultiplier = 1.15; // 15% larger than base
-    switch (flyoutSize) {
-      case 'small':
-        return Math.round(300 * baseMultiplier); // ~345px
-      case 'medium':
-        return Math.round(450 * baseMultiplier); // ~518px (rounded)
-      case 'large':
-        return Math.round(600 * baseMultiplier); // ~690px
-      default:
-        return Math.round(450 * baseMultiplier); // Fallback, ~518px
-    }
-  };
-
-  // Calculate width based on size prop for left/right anchors
-  const calculatedWidth = getWidthBySize(size);
-
-  // Determine the style for the content box based on anchor
-  const contentStyle = useMemo(() => {
-    if (anchor === 'left' || anchor === 'right') {
-      return { width: calculatedWidth }; // Use the calculated width
-    } else {
-      // For 'top' or 'bottom' anchors, width is 100% and height is controlled
-      return { height: height, width: '100%' };
-    }
-  }, [anchor, calculatedWidth, height]);
-
-  return (
-    <Drawer
-      anchor={anchor}
-      open={open}
-      onClose={onClose}
-      // Allows closing with Escape key, but prevents closing by clicking outside if ModalProps.disableBackdropClick is true
-      disableEscapeKeyDown={false}
-      ModalProps={{
-        // Keep mounted for better performance if content is complex or needs to retain state
-        keepMounted: true,
-      }}
-    >
-      <Box
-        sx={{
-          ...contentStyle, // Apply calculated width/height
-          display: 'flex',
-          flexDirection: 'column',
-          p: 2, // Padding around the content
-          backgroundColor: (theme) => theme.palette.background.paper, // Use theme background color
-          color: (theme) => theme.palette.text.primary, // Use theme text color
-          height: '100%', // Ensure the main container of the Drawer takes full height
-        }}
-        role="presentation" // ARIA role for accessibility
-      >
-        {/* Header section with title and close button */}
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            mb: 2, // Margin bottom for separation from content
-            flexShrink: 0, // Prevent the header from shrinking when content scrolls
-          }}
-        >
-          {title && (
-            <Typography variant="h6" component="div" sx={{ fontWeight: 'bold' }}>
-              {title}
-            </Typography>
-          )}
-          <IconButton onClick={onClose} sx={{ ml: 'auto' }}>
-            <CloseIcon />
-          </IconButton>
-        </Box>
-
-        <Divider sx={{ mb: 2 }} /> {/* Separator line */}
-
-        {/* Scrollable content area */}
-        <Box sx={{ flexGrow: 1, overflowY: 'auto' }}>
-          {children}
-        </Box>
-      </Box>
-    </Drawer>
-  );
-};
-
-export default Flyout;

package/src/components/Flyout/index.ts

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

package/src/components/Gallery/Gallery.definition.tsx

@@ -1,37 +0,0 @@
-export const DefaultGalleryDefinition = `
-<Gallery
-  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"
-    }
-  ]}
-/>
-`.trim();

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
-                }` }
-            }
-        }
-    }
-};