@axzydev/axzy_ui_system 1.2.1 → 1.2.2

package/src/components/time-picker/timePicker.props.ts

@@ -0,0 +1,16 @@
+export interface ITTimePickerProps {
+  name: string;
+  value?: string;
+  label?: string;
+  placeholder?: string;
+  onChange: (e: any) => void;
+  onBlur?: (e: any) => void;
+  required?: boolean;
+  touched?: boolean;
+  error?: string | boolean;
+  disabled?: boolean;
+  className?: string;
+  size?: "small" | "medium" | "large";
+  variant?: "primary" | "secondary" | "danger" | "success" | "warning" | "info" | "purple";
+  color?: "primary" | "secondary" | "danger" | "success" | "warning" | "info" | "purple" | string;
+}

package/src/components/time-picker/timePicker.stories.tsx

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ITTimePicker from "./timePicker";
+import { useState } from "react";
+
+const meta: Meta<typeof ITTimePicker> = {
+  title: "Components/Form Elements/ITTimePicker",
+  component: ITTimePicker,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    color: {
+      control: "select",
+      options: ["primary", "secondary", "success", "danger", "warning", "info", "purple"],
+    },
+    size: {
+      control: "select",
+      options: ["small", "medium", "large"],
+    },
+    variant: {
+      control: "select",
+      options: ["primary", "secondary"],
+    },
+    disabled: {
+      control: "boolean",
+    },
+    required: {
+      control: "boolean",
+    },
+    error: {
+      control: "text",
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[300px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITTimePicker>;
+
+// Helper to wrap uncontrolled behavior
+const TimePickerWrapper = (args: any) => {
+  const [value, setValue] = useState(args.value || "");
+  const [touched, setTouched] = useState(false);
+
+  return (
+    <ITTimePicker
+      {...args}
+      value={value}
+      touched={touched}
+      onChange={(e) => {
+        setValue(e.target.value);
+        if (args.onChange) args.onChange(e);
+      }}
+      onBlur={(e) => {
+        setTouched(true);
+        if (args.onBlur) args.onBlur(e);
+      }}
+    />
+  );
+};
+
+export const Default: Story = {
+  render: (args) => <TimePickerWrapper {...args} />,
+  args: {
+    name: "default_time",
+    label: "Select Time",
+    placeholder: "HH:MM",
+    color: "primary",
+  },
+};
+
+export const WithPredefinedValue: Story = {
+  render: (args) => <TimePickerWrapper {...args} />,
+  args: {
+    name: "predefined_time",
+    label: "Meeting Time",
+    value: "14:30",
+    color: "success",
+  },
+};
+
+export const Disabled: Story = {
+  render: (args) => <TimePickerWrapper {...args} />,
+  args: {
+    name: "disabled_time",
+    label: "Unavailable Time",
+    value: "09:00",
+    disabled: true,
+  },
+};
+
+export const Validation: Story = {
+  render: (args) => <TimePickerWrapper {...args} />,
+  args: {
+    name: "validation_time",
+    label: "End Time",
+    value: "25:99", // Invalid time string to trigger intrinsic validation
+    touched: true, // Force validation display
+    error: "Custom error message if passed explicitly",
+  },
+};
+
+export const Sizes: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-6">
+      <TimePickerWrapper {...args} size="small" label="Small TimePicker" name="sm" />
+      <TimePickerWrapper {...args} size="medium" label="Medium TimePicker" name="md" />
+      <TimePickerWrapper {...args} size="large" label="Large TimePicker" name="lg" />
+    </div>
+  ),
+  args: {
+    value: "10:15",
+  },
+};
+
+export const Colors: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-6">
+      <TimePickerWrapper {...args} color="primary" label="Primary Theme Highlight" name="c1" value="12:00" />
+      <TimePickerWrapper {...args} color="danger" label="Danger Theme Highlight" name="c2" value="13:15" />
+      <TimePickerWrapper {...args} color="purple" label="Purple Theme Highlight" name="c3" value="14:45" />
+    </div>
+  ),
+};

package/src/components/time-picker/timePicker.tsx

@@ -0,0 +1,317 @@
+import clsx from "clsx";
+import React, { useEffect, useRef, useState } from "react";
+import { FaClock } from "react-icons/fa";
+import ITInput from "../input/input";
+import ITButton from "../button/button";
+import useClickOutside from "@/hooks/useClickOutside";
+import { theme } from "@/theme/theme";
+import { ITTimePickerProps } from "./timePicker.props";
+import ITText from "@/components/text/text";
+
+export default function ITTimePicker({
+  name,
+  value,
+  label,
+  placeholder = "HH:MM",
+  onChange,
+  onBlur,
+  required,
+  touched,
+  error,
+  disabled,
+  className,
+  size = "medium",
+  variant = "primary",
+  color = "primary",
+}: ITTimePickerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState(value || "");
+  const [isValidTime, setIsValidTime] = useState(true);
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const hoursRef = useRef<HTMLDivElement>(null);
+  const minutesRef = useRef<HTMLDivElement>(null);
+
+  useClickOutside(dropdownRef, () => {
+    // Only close if it's currently open to avoid setting state unnecessarily
+    if (isOpen) {
+      setIsOpen(false);
+    }
+  });
+
+  // Resolve theme color for the dropdown highlight
+  const isThemeColor = color in theme.colors;
+  const highlightColor = isThemeColor
+    ? theme.colors[color as keyof typeof theme.colors][50]
+    : "#f3f4f6"; // fallback to gray-100
+
+  const activeColor = isThemeColor
+    ? theme.colors[color as keyof typeof theme.colors][100]
+    : "#e5e7eb"; // fallback to gray-200
+
+  useEffect(() => {
+    setInputValue(value || "");
+  }, [value]);
+
+  const calculateDropdownPosition = () => {
+    if (wrapperRef.current) {
+      const inputRect = wrapperRef.current.getBoundingClientRect();
+      const dropdownHeight = 280; // approximate height of the time picker dropdown
+      const viewportHeight = window.innerHeight;
+
+      let top = inputRect.bottom + 4;
+      if (inputRect.bottom + dropdownHeight > viewportHeight) {
+        top = inputRect.top - dropdownHeight - 4;
+      }
+
+      setDropdownPosition({
+        top,
+        left: inputRect.left,
+      });
+    }
+  };
+
+  const validateTime = (timeString: string) => {
+    const regex = /^([01]\d|2[0-3]):([0-5]\d)$/;
+    return regex.test(timeString);
+  };
+
+  const currentHour = validateTime(inputValue) ? inputValue.split(":")[0] : null;
+  const currentMinute = validateTime(inputValue) ? inputValue.split(":")[1] : null;
+
+  // Auto-scroll to selected items when opened
+  useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => {
+        if (hoursRef.current && currentHour) {
+          const selectedHourEl = hoursRef.current.querySelector(
+            `[data-value="${currentHour}"]`
+          ) as HTMLElement;
+          if (selectedHourEl) {
+            hoursRef.current.scrollTop =
+              selectedHourEl.offsetTop -
+              hoursRef.current.clientHeight / 2 +
+              selectedHourEl.clientHeight / 2;
+          }
+        }
+        if (minutesRef.current && currentMinute) {
+          const selectedMinuteEl = minutesRef.current.querySelector(
+            `[data-value="${currentMinute}"]`
+          ) as HTMLElement;
+          if (selectedMinuteEl) {
+            minutesRef.current.scrollTop =
+              selectedMinuteEl.offsetTop -
+              minutesRef.current.clientHeight / 2 +
+              selectedMinuteEl.clientHeight / 2;
+          }
+        }
+      }, 50);
+    }
+  }, [isOpen, currentHour, currentMinute]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let val = e.target.value.replace(/\D/g, "");
+
+    if (val.length > 4) val = val.slice(0, 4);
+
+    if (val.length >= 3) {
+      val = `${val.slice(0, 2)}:${val.slice(2)}`;
+    }
+
+    setInputValue(val);
+
+    if (validateTime(val)) {
+      setIsValidTime(true);
+      onChange({ target: { name, value: val } });
+    } else {
+      setIsValidTime(false);
+    }
+  };
+
+  const handleBlurInput = () => {
+    if (!validateTime(inputValue)) {
+      setIsValidTime(false);
+      onBlur?.({ target: { name, value } });
+      return;
+    }
+
+    setIsValidTime(true);
+    onBlur?.({ target: { name, value: inputValue } });
+  };
+
+  const handleHourSelect = (h: string) => {
+    const min = currentMinute || "00";
+    const newVal = `${h}:${min}`;
+    setInputValue(newVal);
+    onChange({ target: { name, value: newVal } });
+    setIsValidTime(true);
+  };
+
+  const handleMinuteSelect = (m: string) => {
+    const hr = currentHour || "00";
+    const newVal = `${hr}:${m}`;
+    setInputValue(newVal);
+    onChange({ target: { name, value: newVal } });
+    setIsValidTime(true);
+  };
+
+  const handleConfirm = () => {
+    setIsOpen(false);
+  };
+
+  const hoursList = Array.from({ length: 24 }, (_, i) =>
+    i.toString().padStart(2, "0")
+  );
+  const minutesList = Array.from({ length: 60 }, (_, i) =>
+    i.toString().padStart(2, "0")
+  );
+
+  return (
+    <div ref={wrapperRef} className={clsx("relative w-full", className)}>
+      <ITInput
+        name={name}
+        label={label}
+        placeholder={placeholder}
+        type="text"
+        value={inputValue}
+        onChange={handleInputChange}
+        onBlur={handleBlurInput}
+        maxLength={5}
+        required={required}
+        disabled={disabled}
+        variant={variant}
+        size={size}
+        touched={touched}
+        error={!isValidTime ? "Hora inválida" : typeof error === 'string' ? error : undefined}
+        iconRight={
+          <FaClock
+            onClick={() => {
+              if (!disabled) {
+                calculateDropdownPosition();
+                setIsOpen(!isOpen);
+              }
+            }}
+            className={clsx(
+              "cursor-pointer transition-colors",
+              disabled
+                ? "text-slate-400 cursor-not-allowed"
+                : "text-slate-900 hover:text-slate-600"
+            )}
+          />
+        }
+      />
+
+      {isOpen && !disabled && (
+        <div 
+          ref={dropdownRef}
+          className="fixed z-[9999] bg-white border border-gray-100 shadow-xl rounded-xl w-64 overflow-hidden flex flex-col animate-in fade-in zoom-in-95 duration-200 origin-top it-timepicker-dropdown"
+          style={{
+            top: `${dropdownPosition.top}px`,
+            left: `${dropdownPosition.left}px`,
+          }}
+        >
+          <div className="flex bg-gray-50 border-b border-gray-100 text-xs font-semibold text-gray-500 uppercase tracking-wider">
+            <ITText as="div" className="flex-1 text-center py-2 border-r border-gray-100">
+              Horas
+            </ITText>
+            <ITText as="div" className="flex-1 text-center py-2">Minutos</ITText>
+          </div>
+
+          <div className="flex h-56 relative bg-white">
+            {/* Hours Column */}
+            <div
+              ref={hoursRef}
+              className="flex-1 overflow-y-auto no-scrollbar border-r border-gray-50 scroll-smooth relative"
+            >
+              <div className="py-2">
+                {hoursList.map((h) => {
+                  const isSelected = currentHour === h;
+                  return (
+                    <div
+                      key={h}
+                      data-value={h}
+                      className={clsx(
+                        "text-center py-2 cursor-pointer transition-all duration-200 text-sm font-medium mx-2 rounded-lg my-1",
+                        isSelected
+                          ? "text-slate-900 shadow-sm"
+                          : "text-slate-600 hover:text-slate-900"
+                      )}
+                      style={{
+                        backgroundColor: isSelected ? activeColor : undefined,
+                      }}
+                      onMouseEnter={(e) => {
+                        if (!isSelected)
+                          e.currentTarget.style.backgroundColor = highlightColor;
+                      }}
+                      onMouseLeave={(e) => {
+                        if (!isSelected)
+                          e.currentTarget.style.backgroundColor = "transparent";
+                      }}
+                      onClick={() => handleHourSelect(h)}
+                    >
+                      {h}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* Minutes Column */}
+            <div
+              ref={minutesRef}
+              className="flex-1 overflow-y-auto no-scrollbar scroll-smooth relative"
+            >
+              <div className="py-2">
+                {minutesList.map((m) => {
+                  const isSelected = currentMinute === m;
+                  return (
+                    <div
+                      key={m}
+                      data-value={m}
+                      className={clsx(
+                        "text-center py-2 cursor-pointer transition-all duration-200 text-sm font-medium mx-2 rounded-lg my-1",
+                        isSelected
+                          ? "text-slate-900 shadow-sm"
+                          : "text-slate-600 hover:text-slate-900"
+                      )}
+                      style={{
+                        backgroundColor: isSelected ? activeColor : undefined,
+                      }}
+                      onMouseEnter={(e) => {
+                        if (!isSelected)
+                          e.currentTarget.style.backgroundColor = highlightColor;
+                      }}
+                      onMouseLeave={(e) => {
+                        if (!isSelected)
+                          e.currentTarget.style.backgroundColor = "transparent";
+                      }}
+                      onClick={() => handleMinuteSelect(m)}
+                    >
+                      {m}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* Center Selection Overlay */}
+            <div className="absolute top-1/2 left-0 right-0 h-10 -mt-5 bg-black/5 pointer-events-none border-y border-black/10 z-10" />
+          </div>
+
+          <div className="p-3 bg-gray-50 border-t border-gray-100 flex justify-end">
+            <ITButton
+              variant="solid"
+              color={color as any}
+              size="small"
+              onClick={handleConfirm}
+            >
+              <ITText as="span">Aceptar</ITText>
+            </ITButton>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/toast/toast.css

@@ -0,0 +1,32 @@
+/* Animación de entrada */
+@keyframes slideIn {
+    from {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  
+  /* Animación de salida */
+  @keyframes slideOut {
+    from {
+      transform: translateY(0);
+      opacity: 1;
+    }
+    to {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+  }
+  
+  /* Aplicar animaciones */
+  .toast-enter {
+    animation: slideIn 0.3s ease-out;
+  }
+  
+  .toast-exit {
+    animation: slideOut 0.3s ease-out;
+  }

package/src/components/toast/toast.props.ts

@@ -0,0 +1,13 @@
+export interface ITToastProps {
+  message: string;
+  type?: "success" | "error" | "warning" | "info" | "primary" | "danger" | string;
+  duration?: number;
+  position?:
+    | "top-right"
+    | "top-center"
+    | "top-left"
+    | "bottom-right"
+    | "bottom-center"
+    | "bottom-left";
+  onClose?: () => void;
+}

package/src/components/toast/toast.stories.tsx

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ITToast from "./toast";
+import { useState } from "react";
+import ITButton from "../button/button";
+
+const meta: Meta<typeof ITToast> = {
+  title: "Components/Feedback/ITToast",
+  component: ITToast,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["success", "error", "warning", "info", "primary", "danger"],
+    },
+    position: {
+      control: "select",
+      options: [
+        "top-right",
+        "top-center",
+        "top-left",
+        "bottom-right",
+        "bottom-center",
+        "bottom-left",
+      ],
+    },
+    duration: {
+      control: { type: "number", min: 1000, max: 10000, step: 500 },
+    },
+    message: {
+      control: "text",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ITToast>;
+
+const ToastTrigger = (args: any) => {
+  const [show, setShow] = useState(false);
+
+  return (
+    <div className="flex items-center justify-center p-12">
+      <ITButton
+        variant="solid"
+        color={args.type in ["success", "error", "warning", "info", "primary"] ? args.type : "primary"}
+        onClick={() => {
+          setShow(false);
+          // Small delay to allow react to unmount and remount a fresh toast for demo purposes
+          setTimeout(() => setShow(true), 10);
+        }}
+      >
+        Show Toast ({args.type})
+      </ITButton>
+      
+      {show && (
+        <ITToast
+          {...args}
+          onClose={() => {
+            setShow(false);
+            if (args.onClose) args.onClose();
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: (args) => <ToastTrigger {...args} />,
+  args: {
+    message: "This is a default information message.",
+    type: "info",
+    position: "top-right",
+    duration: 3000,
+  },
+};
+
+export const Success: Story = {
+  render: (args) => <ToastTrigger {...args} />,
+  args: {
+    message: "Operation completed successfully!",
+    type: "success",
+    position: "top-right",
+    duration: 3000,
+  },
+};
+
+export const Error: Story = {
+  render: (args) => <ToastTrigger {...args} />,
+  args: {
+    message: "There was a critical error processing your request.",
+    type: "error", // Uses theme.colors.error or danger
+    position: "top-center",
+    duration: 5000,
+  },
+};
+
+export const Warning: Story = {
+  render: (args) => <ToastTrigger {...args} />,
+  args: {
+    message: "Please check your input values before proceeding.",
+    type: "warning",
+    position: "bottom-left",
+    duration: 4000,
+  },
+};
+
+/**
+ * Multiple Toasts Preview
+ * Note: A real implementation would manage multiple toasts via a Toast Provider Context. 
+ * This just shows how the colors resolve visually.
+ */
+export const AllTypesPreview = () => {
+  const types = ["primary", "success", "error", "warning", "info"] as const;
+  
+  return (
+    <div className="flex flex-col gap-8 w-[400px]">
+      <h3 className="text-gray-500 text-sm font-semibold mb-2">Static Preview (Not positioned fixed)</h3>
+      <div className="flex flex-col gap-4 relative">
+        {types.map((type) => (
+          // We inline style it simply to bypass the fixed positioning just for this preview story block.
+           <div key={type} className="relative z-0">
+             <ITToast 
+                message={`This is a ${type} notification message`} 
+                type={type} 
+                duration={999999} 
+                position="top-right" 
+             />
+           </div>
+        ))}
+      </div>
+      <p className="text-xs text-gray-400 mt-4">Note: Actual ITToasts are position: fixed and rendered at the edges of the screen according to their position prop.</p>
+    </div>
+  );
+};