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

package/src/components/DateTimePicker/DateTimePicker.tsx

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

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

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

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

@@ -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();