@axzydev/axzy_ui_system 1.2.0 → 1.2.2

package/src/components/segmented-control/segmented-control.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { FaList, FaTh } from "react-icons/fa";
+import ITSegmentedControl from "./segmented-control";
+
+const meta: Meta<typeof ITSegmentedControl> = {
+  title: "Components/Inputs/ITSegmentedControl",
+  component: ITSegmentedControl,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITSegmentedControl>;
+
+export const Default: Story = {
+  render: () => {
+    const [val, setVal] = useState("day");
+    return (
+      <ITSegmentedControl
+        options={[
+          { value: "day", label: "Día" },
+          { value: "week", label: "Semana" },
+          { value: "month", label: "Mes" },
+        ]}
+        value={val}
+        onChange={setVal}
+      />
+    );
+  },
+};
+
+export const WithIcons: Story = {
+  render: () => {
+    const [val, setVal] = useState("list");
+    return (
+      <ITSegmentedControl
+        options={[
+          { value: "list", label: "Lista", icon: <FaList size={10} /> },
+          { value: "grid", label: "Grid", icon: <FaTh size={10} /> },
+        ]}
+        value={val}
+        onChange={setVal}
+      />
+    );
+  },
+};
+
+export const Small: Story = {
+  render: () => {
+    const [val, setVal] = useState("sm");
+    return (
+      <ITSegmentedControl
+        size="sm"
+        options={[
+          { value: "sm", label: "Chico" },
+          { value: "md", label: "Mediano" },
+        ]}
+        value={val}
+        onChange={setVal}
+      />
+    );
+  },
+};

package/src/components/segmented-control/segmented-control.tsx

@@ -0,0 +1,52 @@
+import clsx from "clsx";
+import { ITSegmentedControlProps } from "./segmented-control.props";
+import ITText from "@/components/text/text";
+
+const sizeMap = {
+  sm: { button: "px-2.5 py-1.5 text-[11px]", container: "p-0.5" },
+  md: { button: "px-3 py-2 text-xs", container: "p-1" },
+};
+
+export default function ITSegmentedControl({
+  options,
+  value,
+  onChange,
+  size = "md",
+  className,
+  disabled = false,
+}: ITSegmentedControlProps) {
+  const { button, container } = sizeMap[size];
+
+  return (
+    <div
+      className={clsx(
+        "inline-flex rounded-xl bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700",
+        container,
+        disabled && "opacity-50 cursor-not-allowed",
+        className
+      )}
+    >
+      {options.map((opt) => {
+        const isActive = opt.value === value;
+        return (
+          <button
+            key={opt.value}
+            onClick={() => !disabled && onChange(opt.value)}
+            disabled={disabled}
+            className={clsx(
+              button,
+              "rounded-lg font-semibold transition-all flex items-center gap-1.5",
+              isActive
+                ? "bg-white dark:bg-slate-700 text-slate-800 dark:text-white shadow-sm border border-slate-200 dark:border-slate-600"
+                : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 border border-transparent",
+              disabled && "pointer-events-none"
+            )}
+          >
+            {opt.icon && <span>{opt.icon}</span>}
+            <ITText as="span">{opt.label}</ITText>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/select/select.props.ts

@@ -0,0 +1,25 @@
+import { ColorsTypes } from "@/types/colors.types";
+import { SizesTypes } from "@/types/sizes.types";
+export interface OptionType {
+  [key: string]: string;
+}
+export interface ITSelectProps {
+  name: string;
+  options: OptionType[];
+  valueField?: string;
+  labelField?: string;
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLSelectElement>) => void;
+  variant?: ColorsTypes;
+  size?: SizesTypes;
+  disabled?: boolean;
+  className?: string;
+  touched?: boolean;
+  error?: string | boolean;
+  required?: boolean;
+  autoFocus?: boolean;
+  readOnly?: boolean;
+}

package/src/components/select/select.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ITSelect from "./select";
+import { useState } from "react";
+
+const meta: Meta<typeof ITSelect> = {
+  title: "Components/Form Elements/ITSelect",
+  component: ITSelect,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: { control: "boolean" },
+    required: { control: "boolean" },
+    error: { control: "text" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ITSelect>;
+
+const options = [
+  { value: "option1", label: "Option 1" },
+  { value: "option2", label: "Option 2" },
+  { value: "option3", label: "Option 3" },
+  { value: "option4", label: "Option 4" },
+];
+
+const SelectWrapper = (args: any) => {
+  const [value, setValue] = useState(args.value || "");
+  const [touched, setTouched] = useState(false);
+
+  return (
+    <div className="w-[300px]">
+      <ITSelect
+        {...args}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onBlur={() => setTouched(true)}
+        touched={touched}
+      />
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: (args) => <SelectWrapper {...args} />,
+  args: {
+    name: "select",
+    options: options,
+    placeholder: "Select an option",
+  },
+};
+
+export const WithLabel: Story = {
+  render: (args) => <SelectWrapper {...args} />,
+  args: {
+    name: "select",
+    label: "Select Label",
+    options: options,
+    placeholder: "Select an option",
+  },
+};
+
+export const WithError: Story = {
+  render: (args) => <SelectWrapper {...args} />,
+  args: {
+    name: "select",
+    label: "Select with Error",
+    options: options,
+    placeholder: "Select an option",
+    error: "This field is required",
+    touched: true, // Force touched to show error immediately
+  },
+};
+
+export const Disabled: Story = {
+  render: (args) => <SelectWrapper {...args} />,
+  args: {
+    name: "select",
+    label: "Disabled Select",
+    options: options,
+    placeholder: "Select an option",
+    disabled: true,
+  },
+};

package/src/components/select/select.tsx

@@ -0,0 +1,150 @@
+import { theme } from "@/theme/theme";
+import clsx from "clsx";
+import { useState } from "react";
+import { FaAngleDown } from "react-icons/fa";
+import { ITSelectProps } from "./select.props";
+import ITText from "@/components/text/text";
+
+/**
+ * Componente de selección (select) con soporte para opciones personalizadas, validación y personalización de estilo.
+ * Matches styles of ITInput.
+ */
+export default function ITSelect({
+  name,
+  options,
+  label,
+  placeholder,
+  valueField = "value",
+  labelField = "label",
+  value,
+  onChange,
+  onBlur,
+  disabled = false,
+  className,
+  touched,
+  required,
+  error,
+  readOnly = false,
+}: ITSelectProps) {
+  const [isFocused, setIsFocused] = useState(false);
+  const [localTouched, setLocalTouched] = useState(false);
+
+  // Theme logic - reuse input theme for consistency
+  const inputTheme = (theme as any).input || {};
+
+  const isTouched = touched !== undefined ? touched : localTouched;
+  const isEmpty = value === undefined || value === null || String(value).trim() === "";
+
+  const effectiveError = error !== undefined && error !== false
+    ? (error === true ? "Este campo es requerido" : error)
+    : (required && isEmpty ? "Este campo es requerido" : undefined);
+
+  const hasError = isTouched && !!effectiveError;
+  const errorMessage = typeof effectiveError === "string" ? effectiveError : "Este campo es requerido";
+
+  const getStyle = () => {
+    const style: React.CSSProperties = {
+      backgroundColor: inputTheme.backgroundColor,
+      borderColor: inputTheme.borderColor,
+      borderRadius: inputTheme.borderRadius,
+      padding: inputTheme.padding,
+      fontSize: inputTheme.fontSize,
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      transition: 'all 0.2s',
+      color: 'var(--input-text-color, var(--color-secondary-900))',
+      appearance: 'none', // Important for custom styling
+    };
+
+    if (disabled) {
+      style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
+      style.borderColor = inputTheme.disabled?.borderColor || style.borderColor;
+      style.opacity = 0.7;
+    }
+
+    if (hasError) {
+      style.borderColor = inputTheme.error?.borderColor || 'red';
+      if (isFocused) {
+        style.boxShadow = inputTheme.error?.ring;
+      }
+    } else if (isFocused && !readOnly) {
+      style.boxShadow = inputTheme.focus?.ring;
+    }
+
+    return style;
+  };
+
+  return (
+    <div className="w-full">
+      <div className={clsx("relative", {
+        "flex flex-col gap-1.5": label,
+      })}>
+        {label && (
+          <ITText
+            as="label"
+            htmlFor={name}
+            className={clsx(
+              "text-sm font-medium text-gray-700 dark:text-slate-300 pt-0",
+              { "text-red-500": hasError }
+            )}
+          >
+            <ITText as="span">{label}</ITText>
+            {required && <ITText as="span" className="text-red-500 ml-1">*</ITText>}
+          </ITText>
+        )}
+        <div className="flex flex-col w-full">
+          <div className="relative flex-1">
+            <select
+              name={name}
+              id={name}
+              value={value}
+              onChange={readOnly ? undefined : onChange}
+              onBlur={(e) => {
+                setIsFocused(false);
+                setLocalTouched(true);
+                readOnly ? undefined : onBlur?.(e);
+              }}
+              onFocus={() => setIsFocused(true)}
+              disabled={disabled}
+              className={clsx(
+                "w-full focus:outline-none", // Core structure only
+                className,
+                { "cursor-not-allowed": disabled }
+              )}
+              style={getStyle()}
+            >
+              <option value=""><ITText as="span">{placeholder || "Selecciona una opción"}</ITText></option>
+              {
+                readOnly ? (
+                  <option value={value} disabled>
+                    <ITText as="span">{options.find((option) => option[valueField] === value)?.[labelField]}</ITText>
+                  </option>
+                ) : (
+                  options.map((option) => (
+                    <option
+                      key={option[valueField]}
+                      value={option[valueField]}
+                      title={option[labelField]}
+                    >
+                      <ITText as="span">{option[labelField]}</ITText>
+                    </option>
+                  ))
+                )
+              }
+            </select>
+            <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-500">
+              <FaAngleDown />
+            </div>
+          </div>
+          {/* Validation message aligned with select */}
+          {hasError && (
+            <div className="flex-shrink-0 min-w-[140px] flex items-center pt-3">
+              <ITText as="p" className="text-red-500 text-xs">{errorMessage}</ITText>
+            </div>
+          )}
+        </div>
+
+      </div>
+    </div>
+  );
+}

package/src/components/sidebar/sidebar.props.ts

@@ -0,0 +1,28 @@
+export interface ITNavigationSubItem {
+  id: string;
+  label: string;
+  action?: () => void;
+  isActive?: boolean;
+}
+
+export interface ITNavigationItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  action?: () => void;
+  isActive?: boolean;
+  subitems?: ITNavigationSubItem[];
+  badge?: string;
+}
+
+export interface ITSidebarProps {
+  navigationItems: ITNavigationItem[];
+  isCollapsed?: boolean;
+  onToggleCollapse?: () => void;
+  visibleOnMobile?: boolean; 
+  onItemClick?: (item: ITNavigationItem) => void;
+  onSubItemClick?: (subitem: ITNavigationSubItem) => void;
+  subitemConnector?: 'dot' | '|' | 'none';
+  className?: string;
+}
+

package/src/components/sidebar/sidebar.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ITSidebar from './sidebar';
+import { FaHome, FaUsers, FaCog, FaChartBar, FaShieldAlt } from 'react-icons/fa';
+
+const meta: Meta<typeof ITSidebar> = {
+  title: 'Components/Layout & Navigation/ITSidebar',
+  component: ITSidebar,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Un sidebar moderno, verdaderamente minimalista, hermoso y personalizable con estados colapsables y submenús. Soporta theming global con hover states y glassmorphism elegantes.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITSidebar>;
+
+const baseNavigationItems = [
+  {
+    id: 'dashboard',
+    label: 'Dashboard',
+    icon: <FaHome />,
+    action: () => console.log('Dashboard clicked'),
+    isActive: true,
+  },
+  {
+    id: 'users',
+    label: 'Gestión de Usuarios',
+    icon: <FaUsers />,
+    badge: '3',
+    subitems: [
+      { id: 'users-list', label: 'Lista de Usuarios', action: () => console.log('Users list'), isActive: false },
+      { id: 'users-roles', label: 'Roles y Permisos', action: () => console.log('Roles'), isActive: false },
+    ],
+  },
+  {
+    id: 'analytics',
+    label: 'Analíticas',
+    icon: <FaChartBar />,
+    action: () => console.log('Analytics clicked'),
+    isActive: false,
+  },
+  {
+    id: 'security',
+    label: 'Seguridad',
+    icon: <FaShieldAlt />,
+    badge: '!',
+    action: () => console.log('Security clicked'),
+    isActive: false,
+  },
+  {
+    id: 'settings',
+    label: 'Configuración',
+    icon: <FaCog />,
+    subitems: [
+      { id: 'settings-general', label: 'General', action: () => console.log('General'), isActive: false },
+      { id: 'settings-theme', label: 'Apariencia', action: () => console.log('Theme'), isActive: false },
+    ],
+  },
+];
+
+export const Default: Story = {
+  args: {
+    navigationItems: baseNavigationItems,
+    isCollapsed: false,
+    visibleOnMobile: true,
+  },
+  render: (args) => (
+    <div className="h-screen bg-gray-50 flex">
+      <ITSidebar {...args} />
+      <div className="flex-1 p-8 text-zinc-500 font-medium">Contenido principal simulado. Juega con el botón de colapsar para ver las transiciones suaves.</div>
+    </div>
+  ),
+};
+
+export const Collapsed: Story = {
+  args: {
+    navigationItems: baseNavigationItems,
+    isCollapsed: true,
+    visibleOnMobile: true,
+  },
+  render: (args) => (
+    <div className="h-screen bg-gray-50 flex">
+      <ITSidebar {...args} />
+      <div className="flex-1 p-8 text-zinc-500 font-medium">Contenido principal... ¡Pasa el cursor sobre los íconos del sidebar para ver el efecto de glassmorphism en los tooltips flotantes!</div>
+    </div>
+  ),
+};
+
+export const WithActiveSubmenu: Story = {
+  args: {
+    navigationItems: [
+      ...baseNavigationItems.slice(0, 1).map(i => ({...i, isActive: false})),
+      {
+        ...baseNavigationItems[1],
+        isActive: true,
+        subitems: [
+          { id: 'users-list', label: 'Lista de Usuarios', action: () => console.log('Users list'), isActive: true },
+          { id: 'users-roles', label: 'Roles y Permisos', action: () => console.log('Roles'), isActive: false },
+        ]
+      },
+      ...baseNavigationItems.slice(2),
+    ],
+    isCollapsed: false,
+    visibleOnMobile: true,
+  },
+  render: (args) => (
+    <div className="h-screen bg-gray-50 flex">
+      <ITSidebar {...args} />
+      <div className="flex-1 p-8 text-zinc-500 font-medium">El menú de usuarios está expandido y activo, mostrando el conector visual sutil.</div>
+    </div>
+  ),
+};