@axzydev/axzy_ui_system 1.2.1 → 1.2.2

package/src/components/grid/grid.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ITGrid from "./grid";
+
+const meta: Meta<typeof ITGrid> = {
+  title: "Layout/ITGrid",
+  component: ITGrid,
+  tags: ["autodocs"],
+  argTypes: {
+    spacing: { control: { type: "range", min: 0, max: 8, step: 1 } },
+    columns: { control: { type: "number", min: 1, max: 12 } },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ITGrid>;
+
+const Cell = ({ children }: { children: string }) => (
+  <div className="bg-primary-100 text-primary-800 rounded-lg p-4 text-center font-medium h-full flex items-center justify-center">
+    {children}
+  </div>
+);
+
+export const ThreeColumns: Story = {
+  args: { container: true, spacing: 2 },
+  render: (args) => (
+    <ITGrid {...args}>
+      <ITGrid item xs={4}>
+        <Cell>1/3</Cell>
+      </ITGrid>
+      <ITGrid item xs={4}>
+        <Cell>1/3</Cell>
+      </ITGrid>
+      <ITGrid item xs={4}>
+        <Cell>1/3</Cell>
+      </ITGrid>
+    </ITGrid>
+  ),
+};
+
+export const Responsive: Story = {
+  args: { container: true, spacing: 3 },
+  render: (args) => (
+    <ITGrid {...args}>
+      <ITGrid item xs={12} sm={6} md={4} lg={3}>
+        <Cell>xs=12 sm=6 md=4 lg=3</Cell>
+      </ITGrid>
+      <ITGrid item xs={12} sm={6} md={4} lg={3}>
+        <Cell>xs=12 sm=6 md=4 lg=3</Cell>
+      </ITGrid>
+      <ITGrid item xs={12} sm={6} md={4} lg={3}>
+        <Cell>xs=12 sm=6 md=4 lg=3</Cell>
+      </ITGrid>
+      <ITGrid item xs={12} sm={6} md={4} lg={3}>
+        <Cell>xs=12 sm=6 md=4 lg=3</Cell>
+      </ITGrid>
+    </ITGrid>
+  ),
+};
+
+export const SidebarContent: Story = {
+  args: { container: true, spacing: 4, columns: 12 },
+  render: (args) => (
+    <ITGrid {...args}>
+      <ITGrid item xs={12} md={3}>
+        <Cell>Sidebar (md: 3/12)</Cell>
+      </ITGrid>
+      <ITGrid item xs={12} md={9}>
+        <Cell>Main Content (md: 9/12)</Cell>
+      </ITGrid>
+    </ITGrid>
+  ),
+};

package/src/components/grid/grid.tsx

@@ -0,0 +1,69 @@
+import clsx from "clsx";
+import { ITGridProps } from "./grid.props";
+
+function colSpanClass(span: number | undefined, cols: number) {
+  if (span === undefined) return undefined;
+  const clamped = Math.min(Math.max(Math.round(span), 1), cols);
+  return `col-span-${clamped}`;
+}
+
+function breakpointSpan(span: number | undefined, bp: string, cols: number) {
+  if (span === undefined) return undefined;
+  const clamped = Math.min(Math.max(Math.round(span), 1), cols);
+  return `${bp}:col-span-${clamped}`;
+}
+
+export default function ITGrid({
+  children,
+  container,
+  item,
+  spacing = 0,
+  columns = 12,
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  className,
+  style,
+  as: Component = "div",
+}: ITGridProps) {
+  if (container) {
+    return (
+      <Component
+        className={clsx("grid", className)}
+        style={{
+          gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+          gap: spacing > 0 ? `${spacing * 0.25}rem` : undefined,
+          ...style,
+        }}
+      >
+        {children}
+      </Component>
+    );
+  }
+
+  if (item) {
+    return (
+      <Component
+        className={clsx(
+          colSpanClass(xs ?? sm, columns),
+          sm !== undefined && breakpointSpan(sm, "sm", columns),
+          md !== undefined && breakpointSpan(md, "md", columns),
+          lg !== undefined && breakpointSpan(lg, "lg", columns),
+          xl !== undefined && breakpointSpan(xl, "xl", columns),
+          className
+        )}
+        style={style}
+      >
+        {children}
+      </Component>
+    );
+  }
+
+  return (
+    <Component className={className} style={style}>
+      {children}
+    </Component>
+  );
+}

package/src/components/image/image.props.ts

@@ -0,0 +1,7 @@
+export interface ITImageProps {
+  src: string;
+  alt?: string;
+  className?: string;
+  fallback?: string;
+  onClick?: () => void;
+}

package/src/components/image/image.tsx

@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { ITImageProps } from "./image.props";
+
+const ITImage = ({
+  src,
+  alt,
+  className = "",
+  fallback = "",
+}: ITImageProps) => {
+  const [imageError, setImageError] = useState(false);
+
+  const handleImageError = () => {
+    setImageError(true);
+  };
+
+  return (
+    <div
+      className={`${className} flex items-center justify-center bg-transparent`}
+    >
+      {imageError ? (
+        <img
+          src={fallback}
+          alt="Fallback"
+          className="w-full h-full object-cover"
+        />
+      ) : (
+        <img
+          src={src}
+          alt={alt}
+          onError={handleImageError}
+          className="w-full h-full object-cover"
+        />
+      )}
+    </div>
+  );
+};
+
+export default ITImage;

package/src/components/input/input.props.ts

@@ -0,0 +1,49 @@
+import { ColorsTypes } from "@app/types/colors.types";
+import { SizesTypes } from "@app/types/sizes.types";
+import { ReactNode } from "react";
+
+export interface ITInputProps {
+  name: string;
+  type?:
+    | "text"
+    | "password"
+    | "number"
+    | "email"
+    | "checkbox"
+    | "radio"
+    | "textarea";
+  label?: string;
+  currencyFormat?: boolean;
+  placeholder?: string;
+  value?: any;
+  onChange: (event: any) => void;
+  onBlur?: (
+    event:
+      | React.FocusEvent<HTMLInputElement>
+      | React.FocusEvent<HTMLTextAreaElement, Element>
+  ) => void;
+  onKeyDown?: (event: React.KeyboardEvent) => void;
+  showHintLength?: boolean;
+  maxLength?: number;
+  minLength?: number;
+  variant?: ColorsTypes;
+  size?: SizesTypes;
+  disabled?: boolean;
+  containerClassName?: string;
+  labelClassName?: string;
+  className?: string;
+  touched?: boolean;
+  error?: string | boolean;
+  required?: boolean;
+  formatNumber?:boolean;
+  autoFocus?: boolean;
+  focusContent?:boolean;
+  onClick?: () => void;
+  iconLeft?: ReactNode;
+  iconRight?: ReactNode;
+  checked?: boolean;
+  rows?: number;
+  min?: number;
+  max?: number;
+  readOnly?: boolean;
+}

package/src/components/input/input.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ITInput from './input';
+import { FaUser, FaLock, FaEnvelope } from 'react-icons/fa';
+
+const meta = {
+  title: 'Components/Form Elements/ITInput',
+  component: ITInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['text', 'password', 'number', 'email', 'textarea'],
+    },
+    disabled: { control: 'boolean' },
+    error: { control: 'text' },
+  },
+} satisfies Meta<typeof ITInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: any = {
+  args: {
+    name: 'default-input',
+    placeholder: 'Type something...',
+  },
+};
+
+export const WithLabel: any = {
+  args: {
+    name: 'labeled-input',
+    label: 'Username',
+    placeholder: 'Enter your username',
+  },
+};
+
+export const WithIcons: any = {
+  args: {
+    name: 'icon-input',
+    label: 'Email',
+    type: 'email',
+    placeholder: 'example@mail.com',
+    iconLeft: <FaEnvelope className="text-gray-400" />,
+  },
+};
+
+export const ClickableIcons: any = {
+  args: {
+    name: 'search-input',
+    label: 'Search',
+    placeholder: 'Search...',
+    iconRight: (
+      <button 
+        onClick={() => alert('Search clicked!')}
+        className="text-gray-500 hover:text-blue-500 transition-colors"
+      >
+        <FaUser />
+      </button>
+    ),
+  },
+};
+
+export const Password: any = {
+  args: {
+    name: 'password-input',
+    label: 'Password',
+    type: 'password',
+    placeholder: '••••••••',
+    iconLeft: <FaLock className="text-gray-400" />,
+  },
+};
+
+export const WithError: any = {
+  args: {
+    name: 'error-input',
+    label: 'Email',
+    value: 'invalid-email',
+    touched: true,
+    error: 'Please enter a valid email address',
+    iconLeft: <FaEnvelope className="text-gray-400" />,
+  },
+};
+
+export const Disabled: any = {
+  args: {
+    name: 'disabled-input',
+    label: 'Disabled Input',
+    value: 'Cannot edit this',
+    disabled: true,
+  },
+};
+
+export const TextArea: any = {
+  args: {
+    name: 'textarea',
+    label: 'Description',
+    type: 'textarea',
+    placeholder: 'Write a detailed description...',
+    rows: 4,
+  },
+};
+
+export const NumberInput: any = {
+  args: {
+    name: 'number-input',
+    label: 'Quantity',
+    type: 'number',
+    placeholder: '0',
+    min: 0,
+    max: 100,
+  },
+};