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

package/src/components/DateTimePicker/DateTimePicker.tsx

@@ -0,0 +1,191 @@
+import React, { useMemo } from 'react';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateTimePicker as MuiDateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { DateValidationError } from '@mui/x-date-pickers/models';
+import { Dayjs } from 'dayjs';
+import { styled } from '@mui/system';
+import { Box, TextField, TextFieldProps } from '@mui/material';
+
+// Define las props para el DateTimePicker
+export interface DateTimePickerProps {
+  label: string;
+  selectedDateTime: Dayjs | null;
+  onDateTimeChange: (dateTime: Dayjs | null) => void;
+  minDateTime?: Dayjs;
+  maxDateTime?: Dayjs;
+  disabled?: boolean;
+  readOnly?: boolean;
+  inputFormat?: string;
+  slotProps?: any;
+  clearButtonText?: string;
+  cancelButtonText?: string;
+  acceptButtonText?: string;
+  minutesStep?: number;
+  minTime?: Dayjs;
+  customClass?: string;
+  viewRenderers?: any
+  timeSteps?: any
+  ampm?: boolean;
+}
+
+// 1. Crear un componente estilizado para el TextField
+// Este componente tendrá los mismos estilos de altura, padding y label que tu Input.tsx
+const StyledTextField = styled(TextField)(({ theme }) => ({
+  '& .MuiInputBase-root': {
+    maxHeight: '34px',
+    padding: '8px 10px',
+    borderRadius: '10px',
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: '14px',
+  },
+  '& .MuiInputBase-input': {
+    padding: '0 !important',
+    height: '18px',
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: '-4px'
+  },
+  '& .MuiInputLabel-root': {
+    top: '50%',
+    transform: 'translate(14px, -50%)',
+    '&.MuiInputLabel-shrink': {
+      transform: 'translate(1px, -200%) scale(0.75)',
+      fontSize: '16px !important',
+      '> legend': {
+        display: 'none',
+      }
+    },
+  },
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: '0.7px solid',
+    borderColor: '#e0e0e0',
+  },
+}));
+
+/**
+ * Custom Material UI DateTimePicker component.
+ * Allows selecting a date and time, and updates a Dayjs state.
+ */
+export const DateTimePicker: React.FC<DateTimePickerProps> = ({
+  label,
+  selectedDateTime,
+  onDateTimeChange,
+  minDateTime,
+  maxDateTime,
+  disabled,
+  readOnly,
+  customClass= '',
+  inputFormat,
+  slotProps,
+  clearButtonText,
+  cancelButtonText,
+  acceptButtonText,
+  minutesStep,
+  minTime,
+  viewRenderers,
+  timeSteps,
+  ampm,
+  ...rest
+}) => {
+  const [error, setError] = React.useState<DateValidationError | null>(null);
+
+  const errorMessage = useMemo(() => {
+    switch (error) {
+      case 'minDate':
+      case 'maxDate':
+      case 'invalidDate': {
+        return 'Formato de fecha/hora inválido';
+      }
+      case 'disableFuture': {
+        return 'No se permiten fechas/horas futuras';
+      }
+      case 'disablePast': {
+        return 'No se permiten fechas/horas pasadas';
+      }
+      default: {
+        return '';
+      }
+    }
+  }, [error]);
+
+  const customLocaleText = useMemo(() => {
+    const text: Record<string, string> = {};
+    if (clearButtonText) text.clearButtonLabel = clearButtonText;
+    if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;
+    if (acceptButtonText) text.okButtonLabel = acceptButtonText;
+    return text;
+  }, [clearButtonText, cancelButtonText, acceptButtonText]);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Box
+          sx={{
+              width: '100%',
+              display: 'grid',
+              marginBottom: '10px',
+              marginTop: '10px'
+          }}
+
+      >
+      <MuiDateTimePicker
+        className={customClass}
+        label={label}
+        value={selectedDateTime}
+        onChange={onDateTimeChange}
+        minDateTime={minDateTime}
+        maxDateTime={maxDateTime}
+        minutesStep={minutesStep}
+        disabled={disabled}
+        readOnly={readOnly}
+        minTime={minTime}
+        format={inputFormat ? inputFormat: 'DD/MM/YYYY HH:mm'}
+        viewRenderers={viewRenderers}
+        timeSteps={timeSteps}
+        sx={{
+          '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {
+            maxHeight: '28px',
+            borderRadius: '10px',
+          },
+          '& .MuiInputLabel-root': {
+            // El label se alinea con el padding del input base.
+            top: '50%',
+            transform: 'translate(14px, -50%)',
+            
+            // Estilo para el label "encogido" cuando el input está lleno o en foco
+            '&.MuiInputLabel-shrink': {
+              transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input
+              fontSize: '16px !important',
+              '> legend': {
+                display: 'none', // Ocultar el legend del outline
+              }
+            },
+          },
+          '& .MuiPickersInputBase-root > fieldset > legend':{
+            display: 'none', // Ocultar el legend del outline
+          },
+        }}
+        slotProps={{
+          ...slotProps,
+          // 2. Usar 'slotProps' para pasar el componente estilizado al TextField
+          textField: {
+            ...slotProps?.textField,
+            helperText: errorMessage || slotProps?.textField?.helperText,
+            error: !!errorMessage || slotProps?.textField?.error,
+            InputProps: {
+              ...slotProps?.textField?.InputProps,
+              inputComponent: StyledTextField,
+            },
+          },
+        }}
+        localeText={{ ...customLocaleText }}
+        ampm={false}
+        {...rest}
+      />
+      </Box>
+    </LocalizationProvider>
+  );
+};
+
+export default DateTimePicker;

package/src/components/DateTimePicker/index.ts

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

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

@@ -0,0 +1,274 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { Box, Button, List, ListItem, ListItemText, TextField, Typography } from '@mui/material';
+import Flyout from './Flyout'; // Adjust the import path if your Flyout.tsx is in a different directory
+
+// 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 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>
+    <TextField
+      label="Input Field"
+      variant="outlined"
+      fullWidth
+      margin="normal"
+      defaultValue="Some text"
+    />
+    <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>
+            <TextField
+              label="Your Message"
+              multiline
+              rows={4}
+              fullWidth
+              variant="outlined"
+              value={customText}
+              onChange={(e) => setCustomText(e.target.value)}
+              sx={{ mb: 2 }}
+            />
+            <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();