@axzydev/axzy_ui_system 1.2.1 → 1.2.2

package/src/components/date-picker/datePicker.tsx

@@ -0,0 +1,307 @@
+import clsx from "clsx";
+import React, { useEffect, useRef, useState } from "react";
+import { FaCalendarAlt } from "react-icons/fa";
+import { isBefore } from "date-fns";
+import ITCalendar from "../calendar/calendar";
+import ITInput from "../input/input";
+import { ITDatePickerProps } from "./date-picker.props";
+import { theme } from "@/theme/theme";
+
+export default function ITDatePicker({
+  name,
+  value,
+  onChange,
+  onBlur,
+  variant = "primary",
+  size = "medium",
+  className,
+  calendarClassName,
+  disabled = false,
+  label,
+  touched,
+  error,
+  required,
+  placeholder,
+  minDate,
+  maxDate,
+  range = false,
+}: ITDatePickerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [isValidDate, setIsValidDate] = useState(true);
+  
+  // For range selection, we'll keep track of the internal state if not provided
+  const [internalRange, setInternalRange] = useState<[Date | null, Date | null]>([null, null]);
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [calendarPosition, setCalendarPosition] = useState({ top: 0, left: 0 });
+
+  // Normalize single vs range values
+  const dateRange = React.useMemo(() => {
+    if (range) {
+      if (Array.isArray(value)) return value;
+      return internalRange;
+    }
+    return [value instanceof Date ? value : null, null] as [Date | null, Date | null];
+  }, [value, range, internalRange]);
+
+  const [startDate, endDate] = dateRange;
+
+  useEffect(() => {
+    if (range) {
+      if (startDate && endDate) {
+        setInputValue(`${formatDate(startDate)} - ${formatDate(endDate)}`);
+      } else if (startDate) {
+        setInputValue(`${formatDate(startDate)} - ...`);
+      } else {
+        setInputValue("");
+      }
+    } else {
+      if (startDate instanceof Date && !isNaN(startDate.getTime())) {
+        setInputValue(formatDate(startDate));
+      } else {
+        setInputValue("");
+      }
+    }
+  }, [startDate, endDate, range]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        wrapperRef.current &&
+        !wrapperRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const calculateCalendarPosition = () => {
+    if (wrapperRef.current) {
+      const inputRect = wrapperRef.current.getBoundingClientRect();
+      const calendarHeight = 300;
+      const viewportHeight = window.innerHeight;
+
+      let top = inputRect.bottom + 4;
+      if (inputRect.bottom + calendarHeight > viewportHeight) {
+        top = inputRect.top - calendarHeight - 4;
+      }
+
+      setCalendarPosition({
+        top,
+        left: inputRect.left,
+      });
+    }
+  };
+
+  const handleDateChange = (date: Date) => {
+    if (range) {
+      let newRange: [Date | null, Date | null];
+      
+      if (!startDate || (startDate && endDate)) {
+        // Start a new range
+        newRange = [date, null];
+      } else {
+        // Closing a range
+        if (isBefore(date, startDate)) {
+          newRange = [date, startDate];
+        } else {
+          newRange = [startDate, date];
+        }
+      }
+      
+      setInternalRange(newRange);
+      
+      // If range is complete, notify parent and close
+      if (newRange[0] && newRange[1]) {
+        onChange({
+          target: {
+            name,
+            value: newRange,
+          },
+        });
+        setIsOpen(false);
+      } else {
+        // Just notify start (optional, but good for reactivity)
+        onChange({
+          target: {
+            name,
+            value: newRange,
+          },
+        });
+      }
+    } else {
+      const event = {
+        target: {
+          name,
+          value: date,
+        },
+      };
+      onChange(event);
+      setInputValue(formatDate(date));
+      setIsOpen(false);
+    }
+  };
+
+  const handleIconClick = () => {
+    if (!disabled) {
+      calculateCalendarPosition();
+      setIsOpen(!isOpen);
+    }
+  };
+
+  const formatDate = (date: Date) =>
+    date
+      .toLocaleDateString("es-ES", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+      })
+      .replace(/\//g, "/");
+
+  const validateDate = (dateString: string) => {
+    const regex = /^(\d{2})\/(\d{2})\/(\d{4})$/;
+    const match = dateString.match(regex);
+    if (!match) return false;
+
+    const day = parseInt(match[1], 10);
+    const month = parseInt(match[2], 10);
+    const year = parseInt(match[3], 10);
+
+    const date = new Date(year, month - 1, day);
+    return (
+      date.getFullYear() === year &&
+      date.getMonth() === month - 1 &&
+      date.getDate() === day
+    );
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let val = e.target.value.replace(/\D/g, "");
+    if (val.length > 8) val = val.slice(0, 8);
+
+    if (val.length > 4) {
+      val = `${val.slice(0, 2)}/${val.slice(2, 4)}/${val.slice(4)}`;
+    } else if (val.length > 2) {
+      val = `${val.slice(0, 2)}/${val.slice(2)}`;
+    }
+
+    setInputValue(val);
+
+    if (val.length === 10 && validateDate(val)) {
+      const [day, month, year] = val.split("/").map(Number);
+      const date = new Date(year, month - 1, day);
+      const event = {
+        target: {
+          name,
+          value: date,
+        },
+      };
+      onChange(event);
+      onChange(event);
+      setIsValidDate(true);
+    } else {
+      setIsValidDate(false);
+    }
+  };
+
+  const handleInputBlur = () => {
+    if (range) {
+      // For range, simple text input is harder to validate without complex logic
+      // We'll rely on calendar for now to avoid breaking the UX
+      return;
+    }
+    
+    if (!validateDate(inputValue)) {
+      // Si la fecha no es válida, usar la fecha de hoy
+      const today = new Date();
+      setInputValue(formatDate(today));
+      const event = {
+        target: {
+          name,
+          value: today,
+        },
+      };
+      onChange(event);
+      setIsValidDate(true);
+    } else {
+      // Solo construimos la fecha si es válida
+      const [day, month, year] = inputValue.split("/").map(Number);
+      const date = new Date(year, month - 1, day);
+
+      if (!isNaN(date.getTime())) {
+        onBlur?.({ target: { name, value: date } });
+      } else {
+        // fallback a hoy por seguridad
+        const today = new Date();
+        setInputValue(formatDate(today));
+        onChange({ target: { name, value: today } });
+      }
+    }
+  };
+
+  return (
+    <div ref={wrapperRef} className={clsx("relative w-full", className)}>
+      <ITInput
+        name={name}
+        type="text"
+        label={label}
+        placeholder={placeholder}
+        value={inputValue}
+        onChange={handleInputChange}
+        onBlur={handleInputBlur}
+        maxLength={10}
+        iconRight={
+          <span>
+            <FaCalendarAlt
+              onClick={handleIconClick}
+              className="text-slate-900 cursor-pointer"
+            />
+          </span>
+        }
+        variant={variant}
+        size={size}
+        disabled={disabled}
+        required={required}
+        touched={touched}
+        error={!isValidDate ? "Fecha inválida" : error}
+        onClick={handleIconClick}
+      />
+
+      {isOpen && (
+        <div
+          className={clsx(
+            "fixed z-[9999]",
+            calendarClassName,
+            range ? "w-[320px]" : "w-[280px]"
+          )}
+          style={{
+            top: `${calendarPosition.top}px`,
+            left: `${calendarPosition.left}px`,
+             backgroundColor: theme.card.backgroundColor,
+             borderColor: theme.card.borderColor,
+             borderWidth: '1px',
+             borderStyle: 'solid',
+             borderRadius: theme.card.borderRadius,
+             boxShadow: theme.card.shadow,
+             padding: '0.5rem',
+          }}
+        >
+          <ITCalendar
+            value={!range ? (startDate as Date) : undefined}
+            startDate={startDate as Date}
+            endDate={endDate as Date}
+            selectionMode={range ? 'range' : 'single'}
+            onChange={handleDateChange}
+            minDate={minDate}
+            maxDate={maxDate}
+            variant={variant}
+            className="h-auto border-none shadow-none w-full"
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/dialog/dialog.props.ts

@@ -0,0 +1,9 @@
+export interface ITDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  className?: string;
+  title?: string;
+  useFormHeader?: boolean;
+  fullScreen?: boolean;
+}

package/src/components/dialog/dialog.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ITDialog from './dialog';
+import { useState } from 'react';
+import ITButton from '../button/button';
+
+const meta = {
+  title: 'Components/Feedback/ITDialog',
+  component: ITDialog,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    isOpen: { control: 'boolean' },
+    onClose: { action: 'closed' },
+    title: { control: 'text' },
+    useFormHeader: { control: 'boolean' },
+  },
+} satisfies Meta<typeof ITDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Wrapper to handle open/close state
+const DialogWrapper = (args: any) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div>
+       <ITButton onClick={() => setIsOpen(true)}>Open Dialog</ITButton>
+       <ITDialog {...args} isOpen={isOpen} onClose={() => setIsOpen(false)}>
+         {args.children}
+       </ITDialog>
+    </div>
+  );
+};
+
+export const Default: any = {
+  render: (args) => <DialogWrapper {...args} />,
+  args: {
+    title: 'Basic Dialog',
+    children: <p className="text-gray-600">This is a simple dialog usage standard headers.</p>,
+    useFormHeader: false,
+    className: 'w-96',
+  } as any,
+};
+
+export const WithFormHeader: any = {
+  render: (args) => <DialogWrapper {...args} />,
+  args: {
+    title: 'Form Header Dialog',
+    children: (
+        <div className="space-y-4">
+            <p className="text-gray-600">This dialog uses the standard form header styling.</p>
+            <div className="flex justify-end">
+                <ITButton variant="primary">Confirm</ITButton>
+            </div>
+        </div>
+    ),
+    useFormHeader: true,
+    className: 'w-[500px]',
+  } as any,
+};
+
+export const LongContent: any = {
+  render: (args) => <DialogWrapper {...args} />,
+  args: {
+    title: 'Terms of Service',
+    children: (
+        <div className="h-64 overflow-y-auto text-sm text-gray-600">
+            <p className="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+            <p className="mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p className="mb-4">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
+            <p className="mb-4">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
+        </div>
+    ),
+    useFormHeader: true,
+    className: 'w-[600px]',
+  } as any,
+};

package/src/components/dialog/dialog.tsx

@@ -0,0 +1,88 @@
+import { createPortal } from "react-dom";
+import { theme } from "@/theme/theme";
+import { useEffect, useRef } from "react";
+import { FaRegTimesCircle } from "react-icons/fa";
+import { ITDialogProps } from "./dialog.props";
+import useClickOutside from "@/hooks/useClickOutside";
+import ITFormHeader from "../form-header/form-header";
+import ITText from "@/components/text/text";
+
+export default function ITDialog({
+  isOpen,
+  onClose,
+  children,
+  className,
+  title,
+  useFormHeader = false,
+  fullScreen = false,
+}: ITDialogProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useClickOutside(modalRef, onClose);
+
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+  if (typeof document === "undefined") return null;
+
+  const content = (
+    <div
+      className={`fixed inset-0 flex ${
+        fullScreen ? "items-stretch" : "items-center justify-center"
+      } bg-black/50 z-[9999]`}
+    >
+      <div
+        ref={modalRef}
+        className={`overflow-hidden relative ${
+          fullScreen
+            ? "w-screen h-screen max-w-none rounded-none m-0 flex flex-col"
+            : `${className || ""} ${useFormHeader ? "p-0" : "p-6"}`
+        }`}
+        style={{
+             backgroundColor: theme.card.backgroundColor,
+             borderRadius: fullScreen ? "0" : theme.card.borderRadius,
+             boxShadow: fullScreen ? "none" : theme.card.shadow,
+             borderWidth: fullScreen ? "0" : theme.card.borderWidth,
+             borderColor: theme.card.borderColor,
+             borderStyle: 'solid',
+        }}
+      >
+        {useFormHeader && title ? (
+          <>
+            <ITFormHeader title={title} onClose={onClose} />
+            <div className={fullScreen ? "flex-1 overflow-auto p-6" : "p-6"}>
+              {children}
+            </div>
+          </>
+        ) : (
+          <>
+            <button
+              className="absolute top-2 right-2 text-gray-600 hover:text-gray-900"
+              onClick={onClose}
+            >
+              <FaRegTimesCircle />
+            </button>
+            {title && <ITText as="h2" className="text-xl font-semibold mb-4">{title}</ITText>}
+            <div>{children}</div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+
+  return createPortal(content, document.body);
+}

package/src/components/divider/divider.props.ts

@@ -0,0 +1,8 @@
+export type DividerOrientation = "horizontal" | "vertical";
+
+export interface ITDividerProps {
+  orientation?: DividerOrientation;
+  className?: string;
+  color?: string;
+  thickness?: string;
+}

package/src/components/divider/divider.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ITDivider from "./divider";
+import ITStack from "../stack/stack";
+import ITFlex from "../flex/flex";
+
+const meta: Meta<typeof ITDivider> = {
+  title: "Components/Layout/ITDivider",
+  component: ITDivider,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITDivider>;
+
+export const Horizontal: Story = {
+  args: { orientation: "horizontal" },
+};
+
+export const Vertical: Story = {
+  decorators: [(Story) => <ITFlex gap={3} className="h-12"><span>Left</span><Story /><span>Right</span></ITFlex>],
+  args: { orientation: "vertical" },
+};
+
+export const InStack: Story = {
+  render: () => (
+    <ITStack spacing={3}>
+      <div className="p-3 bg-slate-50 rounded-lg text-sm">Sección 1</div>
+      <ITDivider />
+      <div className="p-3 bg-slate-50 rounded-lg text-sm">Sección 2</div>
+      <ITDivider />
+      <div className="p-3 bg-slate-50 rounded-lg text-sm">Sección 3</div>
+    </ITStack>
+  ),
+};

package/src/components/divider/divider.tsx

@@ -0,0 +1,21 @@
+import clsx from "clsx";
+import { ITDividerProps } from "./divider.props";
+
+export default function ITDivider({
+  orientation = "horizontal",
+  className,
+  color = "bg-slate-200 dark:bg-slate-700",
+  thickness = orientation === "horizontal" ? "h-px" : "w-px",
+}: ITDividerProps) {
+  return (
+    <div
+      className={clsx(
+        "flex-shrink-0",
+        orientation === "horizontal" ? "w-full" : "self-stretch",
+        thickness,
+        color,
+        className
+      )}
+    />
+  );
+}

package/src/components/drawer/drawer.props.ts

@@ -0,0 +1,14 @@
+import { ReactNode, CSSProperties } from "react";
+
+export type DrawerPosition = "left" | "right";
+
+export interface ITDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  position?: DrawerPosition;
+  size?: string;
+  title?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}

package/src/components/drawer/drawer.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import ITDrawer from "./drawer";
+import ITButton from "../button/button";
+
+const meta: Meta<typeof ITDrawer> = {
+  title: "Components/Overlay/ITDrawer",
+  component: ITDrawer,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITDrawer>;
+
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <ITButton label="Abrir Drawer" onClick={() => setOpen(true)} />
+        <ITDrawer isOpen={open} onClose={() => setOpen(false)} title="Panel Lateral">
+          <p className="text-sm text-slate-600 dark:text-slate-300">Contenido del drawer.</p>
+        </ITDrawer>
+      </>
+    );
+  },
+};
+
+export const PositionLeft: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <ITButton label="Abrir Izquierda" onClick={() => setOpen(true)} />
+        <ITDrawer isOpen={open} onClose={() => setOpen(false)} position="left" title="Menú">
+          <p className="text-sm text-slate-600">Drawer desde la izquierda.</p>
+        </ITDrawer>
+      </>
+    );
+  },
+};

package/src/components/drawer/drawer.tsx

@@ -0,0 +1,53 @@
+import clsx from "clsx";
+import { ITDrawerProps } from "./drawer.props";
+import { FaTimes } from "react-icons/fa";
+import useClickOutside from "@/hooks/useClickOutside";
+import { useRef } from "react";
+import ITText from "@/components/text/text";
+
+export default function ITDrawer({
+  isOpen,
+  onClose,
+  position = "right",
+  size = "w-80",
+  title,
+  children,
+  className,
+  style,
+}: ITDrawerProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+  useClickOutside(panelRef, onClose);
+
+  return (
+    <>
+      {isOpen && (
+        <div className="fixed inset-0 z-[100] flex">
+          <div className="absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity" />
+          <div
+            ref={panelRef}
+            className={clsx(
+              "relative z-10 h-full bg-white dark:bg-slate-900 shadow-2xl flex flex-col transition-transform duration-300",
+              position === "right" ? "ml-auto" : "mr-auto",
+              size,
+              className
+            )}
+            style={style}
+          >
+            {title && (
+              <div className="flex items-center justify-between px-5 py-4 border-b border-slate-200 dark:border-slate-700">
+                <ITText as="h2" className="text-lg font-bold text-slate-800 dark:text-white">{title}</ITText>
+                <button
+                  onClick={onClose}
+                  className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-400 hover:text-slate-600 transition-colors"
+                >
+                  <FaTimes size={14} />
+                </button>
+              </div>
+            )}
+            <div className="flex-1 overflow-y-auto p-5">{children}</div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}