@axzydev/axzy_ui_system 1.2.0 → 1.2.2

package/src/components/pagination/pagination.props.ts

@@ -0,0 +1,53 @@
+export interface ITPaginationProps {
+  /**
+   * Current active page (1-indexed).
+   */
+  currentPage: number;
+
+  /**
+   * Total number of pages available.
+   */
+  totalPages: number;
+
+  /**
+   * Callback fired when a page is clicked or next/prev is activated.
+   */
+  onPageChange: (page: number) => void;
+
+  /**
+   * Number of visible pages before and after the current page.
+   * Default: 1
+   */
+  siblingCount?: number;
+
+  /**
+   * Semantic color from the theme (primary, secondary, success, danger, warning, info, purple).
+   * Default: primary
+   */
+  color?: string;
+
+  /**
+   * Additional CSS classes for the container.
+   */
+  className?: string;
+
+  /**
+   * Options for items per page selector.
+   */
+  itemsPerPageOptions?: number[];
+
+  /**
+   * Current items per page value. Required if itemsPerPageOptions is provided.
+   */
+  itemsPerPage?: number;
+
+  /**
+   * Callback fired when items per page is changed.
+   */
+  onItemsPerPageChange?: (value: number) => void;
+
+  /**
+   * Total number of items across all pages. Used to render "1-10 of 50" text.
+   */
+  totalItems?: number;
+}

package/src/components/pagination/pagination.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ITPagination from "./pagination";
+import { useState } from "react";
+
+const meta: Meta<typeof ITPagination> = {
+  title: "Components/Data Display/ITPagination",
+  component: ITPagination,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    currentPage: { control: "number" },
+    totalPages: { control: "number" },
+    siblingCount: { control: "number" },
+    color: {
+      control: "select",
+      options: ["primary", "secondary", "success", "danger", "warning", "info", "purple"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ITPagination>;
+
+const PaginationWrapper = (args: any) => {
+  const [currentPage, setCurrentPage] = useState(args.currentPage || 1);
+
+  return (
+    <ITPagination
+      {...args}
+      currentPage={currentPage}
+      onPageChange={(page) => setCurrentPage(page)}
+    />
+  );
+};
+
+export const Default: Story = {
+  render: (args) => <PaginationWrapper {...args} />,
+  args: {
+    currentPage: 1,
+    totalPages: 5,
+    color: "primary",
+  },
+};
+
+export const ManyPages: Story = {
+  render: (args) => <PaginationWrapper {...args} />,
+  args: {
+    currentPage: 1,
+    totalPages: 50,
+    siblingCount: 1,
+    color: "primary",
+  },
+};
+
+export const MiddlePageOpened: Story = {
+  render: (args) => <PaginationWrapper {...args} />,
+  args: {
+    currentPage: 25,
+    totalPages: 50,
+    siblingCount: 1,
+    color: "primary",
+  },
+};
+
+export const WithItemsPerPage: Story = {
+  render: (args) => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [itemsPerPage, setItemsPerPage] = useState(10);
+    const totalItems = 500;
+    const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+    return (
+      <ITPagination
+        {...args}
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={(page) => setCurrentPage(page)}
+        itemsPerPageOptions={[10, 20, 30, 50]}
+        itemsPerPage={itemsPerPage}
+        onItemsPerPageChange={(val) => {
+          setItemsPerPage(val);
+          setCurrentPage(1);
+        }}
+        totalItems={totalItems}
+      />
+    );
+  },
+  args: {
+    color: "primary",
+    className: "w-[600px]" // Make it wide enough to see the layout
+  },
+};
+
+export const Colors: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-4">
+      {(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'purple'] as const).map((color) => (
+        <div key={color} className="flex gap-4 items-center">
+            <span className="w-20 text-sm font-bold text-gray-500 capitalize">{color}</span>
+             <PaginationWrapper {...args} color={color} />
+        </div>
+      ))}
+    </div>
+  ),
+  args: {
+    currentPage: 1,
+    totalPages: 5,
+  },
+};

package/src/components/pagination/pagination.tsx

@@ -0,0 +1,241 @@
+import React from "react";
+import clsx from "clsx";
+import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
+import { ITPaginationProps } from "./pagination.props";
+import { theme } from "@/theme/theme";
+import ITSelect from "../select/select";
+import ITText from "@/components/text/text";
+
+const DOTS = "...";
+
+// Helper hook to calculate page ranges
+const usePagination = ({
+  totalPages,
+  currentPage,
+  siblingCount = 1,
+}: {
+  totalPages: number;
+  currentPage: number;
+  siblingCount?: number;
+}) => {
+  return React.useMemo(() => {
+    // Pages count is determined as siblingCount + firstPage + lastPage + currentPage + 2*DOTS
+    const totalPageNumbers = siblingCount + 5;
+
+    /*
+      Case 1:
+      If the number of pages is less than the page numbers we want to show in our
+      paginationComponent, we return the range [1..totalPageCount]
+    */
+    if (totalPageNumbers >= totalPages) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < totalPages - 2;
+
+    const firstPageIndex = 1;
+    const lastPageIndex = totalPages;
+
+    /*
+      Case 2: No left dots to show, but rights dots to be shown
+    */
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      let leftItemCount = 3 + 2 * siblingCount;
+      let leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);
+      return [...leftRange, DOTS, totalPages];
+    }
+
+    /*
+      Case 3: No right dots to show, but left dots to be shown
+    */
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      let rightItemCount = 3 + 2 * siblingCount;
+      let rightRange = Array.from(
+        { length: rightItemCount },
+        (_, i) => totalPages - rightItemCount + i + 1
+      );
+      return [firstPageIndex, DOTS, ...rightRange];
+    }
+
+    /*
+      Case 4: Both left and right dots to be shown
+    */
+    if (shouldShowLeftDots && shouldShowRightDots) {
+      let middleRange = Array.from(
+        { length: rightSiblingIndex - leftSiblingIndex + 1 },
+        (_, i) => leftSiblingIndex + i
+      );
+      return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
+    }
+  }, [totalPages, currentPage, siblingCount]);
+};
+
+export default function ITPagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  color = "primary",
+  className = "",
+  itemsPerPageOptions,
+  itemsPerPage,
+  onItemsPerPageChange,
+  totalItems,
+}: ITPaginationProps) {
+  const paginationRange = usePagination({
+    currentPage,
+    totalPages,
+    siblingCount,
+  });
+
+  // If there are less than 2 pages and no items per page options, we can hide the component
+  if (currentPage === 0 || (!itemsPerPageOptions && paginationRange && paginationRange.length < 2)) {
+    return null;
+  }
+
+  // Resolve color
+  const isSemantic = color in theme.colors;
+  const resolvedBgColor = isSemantic
+    ? theme.colors[color as keyof typeof theme.colors][500]
+    : color;
+  const resolvedHoverBgColor = isSemantic
+    ? theme.colors[color as keyof typeof theme.colors][50]
+    : "#f3f4f6"; // fallback generic gray hover
+
+  const handleNext = () => {
+    if (currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  };
+
+  const handlePrevious = () => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+
+  // Base styles for list items
+  const baseItemClass =
+    "flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium transition-colors cursor-pointer select-none";
+
+  const renderPaginationControls = () => (
+    <div className="flex items-center gap-1">
+      {/* Previous Button */}
+      <div
+        className={clsx(
+          baseItemClass,
+          currentPage === 1
+            ? "text-gray-300 cursor-not-allowed"
+            : "text-gray-500 hover:bg-gray-100"
+        )}
+        onClick={handlePrevious}
+        aria-disabled={currentPage === 1}
+      >
+        <FaChevronLeft size={12} />
+      </div>
+
+      {/* Pages */}
+      {paginationRange?.map((pageNumber, idx) => {
+        if (pageNumber === DOTS) {
+          return (
+            <ITText
+              as="div"
+              key={`dots-${idx}`}
+              className="flex items-center justify-center w-8 h-8 select-none text-gray-400"
+            >
+              &#8230;
+            </ITText>
+          );
+        }
+
+        const isActive = pageNumber === currentPage;
+
+        return (
+          <ITText
+            as="div"
+            key={pageNumber}
+            className={clsx(
+              baseItemClass,
+              isActive ? "text-white" : "text-gray-600 hover:bg-gray-100"
+            )}
+            style={{
+              backgroundColor: isActive ? resolvedBgColor : undefined,
+              ...(isActive ? {} : { "--hover-bg": resolvedHoverBgColor } as React.CSSProperties),
+            }}
+            onClick={() => onPageChange(pageNumber as number)}
+            title={`Page ${pageNumber}`}
+          >
+            <ITText as="span">{pageNumber}</ITText>
+          </ITText>
+        );
+      })}
+
+      {/* Next Button */}
+      <div
+        className={clsx(
+          baseItemClass,
+          currentPage === totalPages
+            ? "text-gray-300 cursor-not-allowed"
+            : "text-gray-500 hover:bg-gray-100"
+        )}
+        onClick={handleNext}
+        aria-disabled={currentPage === totalPages}
+      >
+        <FaChevronRight size={12} />
+      </div>
+    </div>
+  );
+
+  // If itemsPerPageOptions is provided, wrap in a wider container with the select
+  if (itemsPerPageOptions && itemsPerPage && onItemsPerPageChange) {
+    const startItem = Math.min((currentPage - 1) * itemsPerPage + 1, totalItems || 0);
+    const endItem = Math.min(currentPage * itemsPerPage, totalItems || 0);
+
+    return (
+      <div className={clsx("flex flex-col sm:flex-row justify-between items-center gap-4 w-full", className)}>
+        <div className="flex items-center gap-4 text-sm text-gray-500">
+          <div className="flex items-center gap-2 bg-gray-50 px-3 py-1 rounded-lg border border-gray-200">
+            <ITText as="span" className="text-xs font-medium">Mostrar</ITText>
+            <ITSelect
+              name="itemsPerPage"
+              options={itemsPerPageOptions.map((option) => ({
+                value: String(option),
+                label: String(option),
+              }))}
+              value={String(itemsPerPage)}
+              onChange={(e) => onItemsPerPageChange(Number(e.target.value))}
+              onBlur={() => {}}
+              size="small"
+              className="!w-14 !h-6 !text-xs !py-0 !px-1! !border-none !bg-transparent !ring-0 focus:!ring-0 cursor-pointer font-bold text-gray-700"
+              placeholder=""
+            />
+          </div>
+          
+          {totalItems !== undefined && (
+            <>
+              <ITText as="span" className="text-gray-300">|</ITText>
+              <ITText as="span" className="text-xs">
+                <ITText as="span" className="font-semibold text-gray-700">{startItem}</ITText><ITText as="span"> - </ITText><ITText as="span" className="font-semibold text-gray-700">{endItem}</ITText><ITText as="span"> de </ITText><ITText as="span" className="font-semibold text-gray-900">{totalItems}</ITText>
+              </ITText>
+            </>
+          )}
+        </div>
+        
+        <nav aria-label="Pagination">
+          {renderPaginationControls()}
+        </nav>
+      </div>
+    );
+  }
+
+  // Otherwise, render just the standard pagination component
+  return (
+    <nav aria-label="Pagination" className={clsx("inline-flex", className)}>
+      {renderPaginationControls()}
+    </nav>
+  );
+}

package/src/components/popover/popover.props.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+
+export type PopoverPosition = "top" | "bottom" | "left" | "right";
+
+export interface ITPopoverProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  position?: PopoverPosition;
+  isOpen?: boolean;
+  onClose?: () => void;
+  className?: string;
+}

package/src/components/popover/popover.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ITPopover from "./popover";
+import ITButton from "../button/button";
+import ITStack from "../stack/stack";
+
+const meta: Meta<typeof ITPopover> = {
+  title: "Components/Overlay/ITPopover",
+  component: ITPopover,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITPopover>;
+
+export const Default: Story = {
+  render: () => (
+    <ITPopover trigger={<ITButton label="Abrir Popover" />}>
+      <ITStack spacing={2}>
+        <p className="text-sm font-semibold">Opciones</p>
+        <button className="text-sm text-left text-slate-600 hover:text-slate-800">Editar</button>
+        <button className="text-sm text-left text-slate-600 hover:text-slate-800">Eliminar</button>
+      </ITStack>
+    </ITPopover>
+  ),
+};

package/src/components/popover/popover.tsx

@@ -0,0 +1,45 @@
+import { useState, useRef } from "react";
+import clsx from "clsx";
+import { ITPopoverProps, PopoverPosition } from "./popover.props";
+import useClickOutside from "@/hooks/useClickOutside";
+
+const positionClasses: Record<PopoverPosition, string> = {
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+  left: "right-full top-1/2 -translate-y-1/2 mr-2",
+  right: "left-full top-1/2 -translate-y-1/2 ml-2",
+};
+
+export default function ITPopover({
+  trigger,
+  children,
+  position = "bottom",
+  isOpen: controlledOpen,
+  onClose,
+  className,
+}: ITPopoverProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const ref = useRef<HTMLDivElement>(null);
+
+  useClickOutside(ref, () => {
+    if (isControlled) onClose?.();
+    else setInternalOpen(false);
+  });
+
+  return (
+    <div ref={ref} className={clsx("relative inline-flex", className)}>
+      <div onClick={() => (isControlled ? onClose?.() : setInternalOpen((p) => !p))} className="cursor-pointer">
+        {trigger}
+      </div>
+      {open && (
+        <div className={clsx("absolute z-[200]", positionClasses[position])}>
+          <div className="bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 p-3 min-w-[160px]">
+            {children}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/progress/progress.props.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from "react";
+import { ColorsTypes } from "@/types/colors.types";
+
+export interface ITProgressProps {
+  value?: number;
+  max?: number;
+  variant?: "determinate" | "indeterminate";
+  color?: ColorsTypes;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  style?: CSSProperties;
+}

package/src/components/progress/progress.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import ITProgress from "./progress";
+import ITButton from "../button/button";
+
+const meta: Meta<typeof ITProgress> = {
+  title: "Components/Feedback/ITProgress",
+  component: ITProgress,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITProgress>;
+
+export const Determinate: Story = {
+  render: () => {
+    const [val, setVal] = useState(0);
+    return (
+      <div className="space-y-3">
+        <ITProgress value={val} />
+        <ITButton label="+10%" onClick={() => setVal(v => Math.min(v + 10, 100))} />
+      </div>
+    );
+  },
+};
+
+export const Indeterminate: Story = {
+  args: { variant: "indeterminate" },
+};
+
+export const Colors: Story = {
+  render: () => (
+    <div className="space-y-3">
+      <ITProgress value={70} color="primary" />
+      <ITProgress value={70} color="success" />
+      <ITProgress value={70} color="danger" />
+      <ITProgress value={70} color="warning" />
+    </div>
+  ),
+};

package/src/components/progress/progress.tsx

@@ -0,0 +1,52 @@
+import clsx from "clsx";
+import { ITProgressProps } from "./progress.props";
+import { ColorsTypes } from "@/types/colors.types";
+
+const colorMap: Record<ColorsTypes, string> = {
+  primary: "bg-primary-500",
+  secondary: "bg-secondary-500",
+  success: "bg-success-500",
+  danger: "bg-danger-500",
+  warning: "bg-warning-500",
+  info: "bg-info-500",
+  purple: "bg-purple-500",
+  error: "bg-danger-500",
+  gray: "bg-secondary-500",
+};
+
+const sizeMap = {
+  sm: "h-1",
+  md: "h-2",
+  lg: "h-3",
+};
+
+export default function ITProgress({
+  value = 0,
+  max = 100,
+  variant = "determinate",
+  color = "primary",
+  size = "md",
+  className,
+  style,
+}: ITProgressProps) {
+  const pct = Math.min(Math.max((value / max) * 100, 0), 100);
+
+  return (
+    <div
+      className={clsx("w-full bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden", sizeMap[size], className)}
+      style={style}
+      role="progressbar"
+      aria-valuenow={variant === "determinate" ? value : undefined}
+      aria-valuemax={max}
+    >
+      <div
+        className={clsx(
+          "h-full rounded-full transition-all duration-500",
+          colorMap[color],
+          variant === "indeterminate" && "animate-pulse w-1/2"
+        )}
+        style={variant === "determinate" ? { width: `${pct}%` } : undefined}
+      />
+    </div>
+  );
+}

package/src/components/radio/radio.props.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+
+export interface ITRadioOption {
+  value: string;
+  label: ReactNode;
+}
+
+export interface ITRadioGroupProps {
+  name: string;
+  value: string;
+  onChange: (value: string) => void;
+  options: ITRadioOption[];
+  disabled?: boolean;
+  direction?: "row" | "column";
+  className?: string;
+}

package/src/components/radio/radio.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import ITRadioGroup from "./radio";
+import ITStack from "../stack/stack";
+
+const meta: Meta<typeof ITRadioGroup> = {
+  title: "Components/Inputs/ITRadioGroup",
+  component: ITRadioGroup,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITRadioGroup>;
+
+export const Default: Story = {
+  render: () => {
+    const [val, setVal] = useState("option1");
+    return (
+      <ITRadioGroup
+        name="example"
+        value={val}
+        onChange={setVal}
+        options={[
+          { value: "option1", label: "Opción 1" },
+          { value: "option2", label: "Opción 2" },
+          { value: "option3", label: "Opción 3" },
+        ]}
+      />
+    );
+  },
+};
+
+export const Row: Story = {
+  render: () => {
+    const [val, setVal] = useState("sm");
+    return (
+      <ITRadioGroup
+        name="size"
+        value={val}
+        onChange={setVal}
+        direction="row"
+        options={[
+          { value: "sm", label: "Chico" },
+          { value: "md", label: "Mediano" },
+          { value: "lg", label: "Grande" },
+        ]}
+      />
+    );
+  },
+};