@soyfri/shared-library 2.0.0-beta.2 → 2.0.0-beta.4

package/src/components/Drawer/DrawerItem.tsx

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

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

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

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

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

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

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

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