@true-tech-team/react-components 0.0.1

package/lib/types/theme.types.d.ts

@@ -0,0 +1,139 @@
+/**
+ * Color family names available in the theme
+ */
+export type ColorFamily = 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'brown' | 'copper' | 'gold' | 'silver' | 'olive' | 'mint' | 'navy' | 'coral' | 'turquoise' | 'magenta';
+/**
+ * Color shade levels (50-900)
+ */
+export type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+/**
+ * Semantic color roles in the theme
+ */
+export interface ThemeColorTokens {
+    primary: string;
+    primaryHover: string;
+    primaryActive: string;
+    primaryDisabled: string;
+    secondary: string;
+    secondaryHover: string;
+    secondaryActive: string;
+    secondaryDisabled: string;
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+    backgroundPrimary: string;
+    backgroundSecondary: string;
+    backgroundTertiary: string;
+    surfacePrimary: string;
+    surfaceSecondary: string;
+    surfaceElevated: string;
+    textPrimary: string;
+    textSecondary: string;
+    textTertiary: string;
+    textDisabled: string;
+    textOnPrimary: string;
+    borderPrimary: string;
+    borderSecondary: string;
+    borderFocus: string;
+    interactiveHover: string;
+    interactiveFocus: string;
+    interactiveActive: string;
+    interactiveDisabled: string;
+}
+/**
+ * Spacing values based on 4px grid
+ */
+export interface ThemeSpacing {
+    unit: number;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+}
+/**
+ * Typography scale
+ */
+export interface ThemeTypography {
+    fontFamily: {
+        primary: string;
+        secondary: string;
+        mono: string;
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    fontWeight: {
+        light: number;
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+    };
+    lineHeight: {
+        tight: number;
+        normal: number;
+        relaxed: number;
+    };
+}
+/**
+ * Border radius values
+ */
+export interface ThemeBorderRadius {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    full: string;
+}
+/**
+ * Shadow definitions
+ */
+export interface ThemeShadows {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}
+/**
+ * Complete theme definition
+ */
+export interface Theme {
+    mode: 'light' | 'dark';
+    colors: ThemeColorTokens;
+    spacing: ThemeSpacing;
+    typography: ThemeTypography;
+    borderRadius: ThemeBorderRadius;
+    shadows: ThemeShadows;
+}
+/**
+ * Partial theme override for customization
+ */
+export type ThemeOverride = Partial<{
+    colors: Partial<ThemeColorTokens>;
+    spacing: Partial<ThemeSpacing>;
+    typography: Partial<ThemeTypography>;
+    borderRadius: Partial<ThemeBorderRadius>;
+    shadows: Partial<ThemeShadows>;
+}>;
+/**
+ * Theme configuration for GlobalProvider
+ */
+export interface ThemeConfig {
+    mode?: 'light' | 'dark';
+    theme?: ThemeOverride;
+}
+/**
+ * Theme mode type
+ */
+export type ThemeMode = 'light' | 'dark';

package/lib/utils/colorUtils.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Color conversion utilities for ColorPicker component
+ */
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+export interface HSL {
+    h: number;
+    s: number;
+    l: number;
+}
+export interface RGBA extends RGB {
+    a: number;
+}
+export interface HSLA extends HSL {
+    a: number;
+}
+/**
+ * Convert HEX to RGB
+ */
+export declare const hexToRgb: (hex: string) => RGB | null;
+/**
+ * Convert RGB to HEX
+ */
+export declare const rgbToHex: (rgb: RGB) => string;
+/**
+ * Convert RGB to HSL
+ */
+export declare const rgbToHsl: (rgb: RGB) => HSL;
+/**
+ * Convert HSL to RGB
+ */
+export declare const hslToRgb: (hsl: HSL) => RGB;
+/**
+ * Convert HEX to HSL
+ */
+export declare const hexToHsl: (hex: string) => HSL | null;
+/**
+ * Convert HSL to HEX
+ */
+export declare const hslToHex: (hsl: HSL) => string;
+/**
+ * Format RGB to CSS string
+ */
+export declare const rgbToString: (rgb: RGB | RGBA) => string;
+/**
+ * Format HSL to CSS string
+ */
+export declare const hslToString: (hsl: HSL | HSLA) => string;
+/**
+ * Parse color string (hex, rgb, hsl) to RGB
+ */
+export declare const parseColorToRgb: (color: string) => RGB | null;
+/**
+ * Validate hex color string
+ */
+export declare const isValidHex: (hex: string) => boolean;
+/**
+ * Clamp number between min and max
+ */
+export declare const clamp: (value: number, min: number, max: number) => number;
+/**
+ * Get color brightness (0-255)
+ */
+export declare const getBrightness: (rgb: RGB) => number;
+/**
+ * Determine if color is light or dark
+ */
+export declare const isLightColor: (rgb: RGB) => boolean;

package/lib/utils/dateUtils.d.ts

@@ -0,0 +1,91 @@
+/**
+ * Date utilities for DatePicker and DateRangePicker components
+ */
+/**
+ * Get the number of days in a month
+ */
+export declare const getDaysInMonth: (year: number, month: number) => number;
+/**
+ * Get the first day of the month (0 = Sunday, 6 = Saturday)
+ */
+export declare const getFirstDayOfMonth: (year: number, month: number) => number;
+/**
+ * Get all days to display in calendar grid for a given month
+ * Includes previous/next month days to fill the grid
+ */
+export declare const getCalendarDays: (year: number, month: number) => Array<{
+    date: Date;
+    isCurrentMonth: boolean;
+}>;
+/**
+ * Check if two dates are the same day
+ */
+export declare const isSameDay: (date1: Date | null, date2: Date | null) => boolean;
+/**
+ * Check if a date is today
+ */
+export declare const isToday: (date: Date) => boolean;
+/**
+ * Check if a date is between two dates (inclusive)
+ */
+export declare const isDateInRange: (date: Date, startDate: Date | null, endDate: Date | null) => boolean;
+/**
+ * Check if a date is before another date
+ */
+export declare const isDateBefore: (date: Date, compareDate: Date) => boolean;
+/**
+ * Check if a date is after another date
+ */
+export declare const isDateAfter: (date: Date, compareDate: Date) => boolean;
+/**
+ * Format date to string
+ */
+export declare const formatDate: (date: Date | null, format?: string) => string;
+/**
+ * Parse date string to Date object
+ */
+export declare const parseDate: (dateString: string, format?: string) => Date | null;
+/**
+ * Get month name
+ */
+export declare const getMonthName: (month: number, short?: boolean) => string;
+/**
+ * Get day name
+ */
+export declare const getDayName: (day: number, short?: boolean) => string;
+/**
+ * Add months to a date
+ */
+export declare const addMonths: (date: Date, months: number) => Date;
+/**
+ * Add days to a date
+ */
+export declare const addDays: (date: Date, days: number) => Date;
+/**
+ * Get difference in days between two dates
+ */
+export declare const getDaysDifference: (date1: Date, date2: Date) => number;
+/**
+ * Check if year is a leap year
+ */
+export declare const isLeapYear: (year: number) => boolean;
+/**
+ * Clamp date between min and max
+ */
+export declare const clampDate: (date: Date, minDate?: Date, maxDate?: Date) => Date;
+/**
+ * Check if date is disabled based on constraints
+ */
+export declare const isDateDisabled: (date: Date, minDate?: Date, maxDate?: Date, disabledDates?: Date[]) => boolean;
+/**
+ * Get array of years for year selector
+ */
+export declare const getYearRange: (startYear?: number, endYear?: number) => number[];
+/**
+ * Set time to start of day (00:00:00)
+ */
+export declare const startOfDay: (date: Date) => Date;
+/**
+ * Set time to end of day (23:59:59)
+ */
+export declare const endOfDay: (date: Date) => Date;

package/lib/utils/dom.d.ts

@@ -0,0 +1,50 @@
+/**
+ * DOM utility functions for element measurements and viewport calculations
+ */
+/**
+ * Element boundary information
+ */
+export interface ElementBounds {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+/**
+ * Viewport size information
+ */
+export interface ViewportSize {
+    width: number;
+    height: number;
+}
+/**
+ * Scroll position information
+ */
+export interface ScrollPosition {
+    x: number;
+    y: number;
+}
+/**
+ * Get the bounding rectangle of an element
+ * @param element - The HTML element to measure
+ * @returns Element bounds including position and dimensions
+ */
+export declare function getElementBounds(element: HTMLElement): ElementBounds;
+/**
+ * Get the current viewport size
+ * @returns Viewport width and height
+ */
+export declare function getViewportSize(): ViewportSize;
+/**
+ * Get the current scroll position
+ * @returns Scroll x and y coordinates
+ */
+export declare function getScrollPosition(): ScrollPosition;
+/**
+ * Check if an element is within the viewport
+ * @param element - The HTML element to check
+ * @returns True if element is at least partially visible in viewport
+ */
+export declare function isElementInViewport(element: HTMLElement): boolean;

package/lib/utils/index.d.ts

@@ -0,0 +1,5 @@
+export { getThemeValue, getColorValue, setThemeValue, applyThemeValues, pxToRem, gridSpacing, isDarkMode, getThemeMode, } from './theme-utils';
+export { getElementBounds, getViewportSize, getScrollPosition, isElementInViewport, } from './dom';
+export type { ElementBounds, ViewportSize, ScrollPosition } from './dom';
+export { calculatePopoverPosition, findBestPosition, } from './positioning';
+export type { PopoverPosition, PositionCoordinates, PositionOptions, PopoverSize, PopoverWidth, } from './positioning';

package/lib/utils/positioning.d.ts

@@ -0,0 +1,59 @@
+import { ElementBounds, ViewportSize } from './dom';
+/**
+ * Supported popover positions relative to trigger element
+ */
+export type PopoverPosition = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+/**
+ * Calculated position coordinates
+ */
+export interface PositionCoordinates {
+    top: number;
+    left: number;
+    actualPosition: PopoverPosition;
+    width?: number;
+    widthValue?: string | number;
+}
+/**
+ * Width configuration options
+ * - 'trigger': Match trigger element width
+ * - 'auto': Use natural content width with no constraints
+ * - 'content': Use content width (fit-content)
+ * - 'max-content': Use maximum content width
+ * - number: Fixed width in pixels
+ */
+export type PopoverWidth = 'trigger' | 'auto' | 'content' | 'max-content' | number;
+/**
+ * Options for position calculation
+ */
+export interface PositionOptions {
+    preferredPosition: PopoverPosition;
+    offset: number;
+    allowFlip: boolean;
+    width?: PopoverWidth;
+}
+/**
+ * Popover size information
+ */
+export interface PopoverSize {
+    width: number;
+    height: number;
+}
+/**
+ * Find the best position that minimizes viewport overflow
+ * @param triggerBounds - Trigger element boundaries
+ * @param popoverSize - Popover dimensions
+ * @param viewportSize - Viewport dimensions
+ * @param preferredPosition - Desired position
+ * @param offset - Gap between trigger and popover
+ * @returns Best position that fits in viewport
+ */
+export declare function findBestPosition(triggerBounds: ElementBounds, popoverSize: PopoverSize, viewportSize: ViewportSize, preferredPosition: PopoverPosition, offset: number): PopoverPosition;
+/**
+ * Calculate popover position coordinates
+ * @param triggerBounds - Trigger element boundaries
+ * @param popoverSize - Popover dimensions
+ * @param viewportSize - Viewport dimensions
+ * @param options - Position calculation options
+ * @returns Position coordinates and actual position used
+ */
+export declare function calculatePopoverPosition(triggerBounds: ElementBounds, popoverSize: PopoverSize, viewportSize: ViewportSize, options: PositionOptions): PositionCoordinates;

package/lib/utils/theme-utils.d.ts

@@ -0,0 +1,105 @@
+import { ColorFamily, ColorShade } from '../types';
+/**
+ * Get a CSS custom property value from the document
+ *
+ * @param propertyName - CSS variable name (with or without --)
+ * @returns The value of the CSS variable
+ *
+ * @example
+ * ```ts
+ * const primaryColor = getThemeValue('--theme-primary');
+ * const spacing = getThemeValue('spacing-md');
+ * ```
+ */
+export declare function getThemeValue(propertyName: string): string;
+/**
+ * Get a color value from the color palette
+ *
+ * @param family - Color family name
+ * @param shade - Color shade (50-900)
+ * @returns The hex color value
+ *
+ * @example
+ * ```ts
+ * const blue500 = getColorValue('blue', 500);
+ * const red700 = getColorValue('red', 700);
+ * ```
+ */
+export declare function getColorValue(family: ColorFamily, shade: ColorShade): string;
+/**
+ * Set a CSS custom property on the document root
+ *
+ * @param propertyName - CSS variable name (with or without --)
+ * @param value - Value to set
+ *
+ * @example
+ * ```ts
+ * setThemeValue('--theme-primary', '#0066ff');
+ * setThemeValue('spacing-custom', '24px');
+ * ```
+ */
+export declare function setThemeValue(propertyName: string, value: string): void;
+/**
+ * Apply multiple theme values at once
+ *
+ * @param values - Object of CSS variable names and values
+ *
+ * @example
+ * ```ts
+ * applyThemeValues({
+ *   '--theme-primary': '#0066ff',
+ *   '--theme-secondary': '#708090',
+ * });
+ * ```
+ */
+export declare function applyThemeValues(values: Record<string, string>): void;
+/**
+ * Convert pixels to rem units
+ *
+ * @param pixels - Pixel value
+ * @param baseFontSize - Base font size in pixels (default: 16)
+ * @returns rem value as string
+ *
+ * @example
+ * ```ts
+ * const rem = pxToRem(24); // '1.5rem'
+ * ```
+ */
+export declare function pxToRem(pixels: number, baseFontSize?: number): string;
+/**
+ * Generate spacing value based on 4px grid
+ *
+ * @param units - Number of 4px units
+ * @returns Pixel value as string
+ *
+ * @example
+ * ```ts
+ * const spacing = gridSpacing(4); // '16px'
+ * const margin = gridSpacing(6); // '24px'
+ * ```
+ */
+export declare function gridSpacing(units: number): string;
+/**
+ * Check if current theme mode is dark
+ *
+ * @returns true if dark mode is active
+ *
+ * @example
+ * ```ts
+ * if (isDarkMode()) {
+ *   // Apply dark mode specific logic
+ * }
+ * ```
+ */
+export declare function isDarkMode(): boolean;
+/**
+ * Get current theme mode
+ *
+ * @returns Current theme mode
+ *
+ * @example
+ * ```ts
+ * const mode = getThemeMode(); // 'light' | 'dark'
+ * ```
+ */
+export declare function getThemeMode(): 'light' | 'dark';

package/lib/utils/validation.d.ts

@@ -0,0 +1,120 @@
+/**
+ * Validation utilities for form components
+ * Provides common validation functions and composition utilities
+ */
+export interface ValidationResult {
+    isValid: boolean;
+    errorMessage: string | null;
+}
+export type Validator = (value: any) => string | null;
+/**
+ * Common validators for form inputs
+ */
+export declare const validators: {
+    /**
+     * Validates that a value is not empty
+     * @param message Custom error message
+     */
+    required: (message?: string) => Validator;
+    /**
+     * Validates email format
+     * @param message Custom error message
+     */
+    email: (message?: string) => Validator;
+    /**
+     * Validates minimum string length
+     * @param min Minimum length
+     * @param message Custom error message
+     */
+    minLength: (min: number, message?: string) => Validator;
+    /**
+     * Validates maximum string length
+     * @param max Maximum length
+     * @param message Custom error message
+     */
+    maxLength: (max: number, message?: string) => Validator;
+    /**
+     * Validates against a regex pattern
+     * @param regex Regular expression pattern
+     * @param message Error message
+     */
+    pattern: (regex: RegExp, message?: string) => Validator;
+    /**
+     * Validates minimum numeric value
+     * @param min Minimum value
+     * @param message Custom error message
+     */
+    min: (min: number, message?: string) => Validator;
+    /**
+     * Validates maximum numeric value
+     * @param max Maximum value
+     * @param message Custom error message
+     */
+    max: (max: number, message?: string) => Validator;
+    /**
+     * Validates numeric range
+     * @param min Minimum value
+     * @param max Maximum value
+     * @param message Custom error message
+     */
+    range: (min: number, max: number, message?: string) => Validator;
+    /**
+     * Validates URL format
+     * @param message Custom error message
+     */
+    url: (message?: string) => Validator;
+    /**
+     * Validates phone number format (basic)
+     * @param message Custom error message
+     */
+    phone: (message?: string) => Validator;
+    /**
+     * Validates that value matches another field
+     * @param otherValue Value to match against
+     * @param message Custom error message
+     */
+    matches: (otherValue: any, message?: string) => Validator;
+    /**
+     * Validates file size
+     * @param maxSize Maximum size in bytes
+     * @param message Custom error message
+     */
+    fileSize: (maxSize: number, message?: string) => Validator;
+    /**
+     * Validates file type
+     * @param allowedTypes Array of allowed MIME types or extensions
+     * @param message Custom error message
+     */
+    fileType: (allowedTypes: string[], message?: string) => Validator;
+};
+/**
+ * Combines multiple validators into a single validator
+ * Returns the first error encountered
+ * @param validators Array of validator functions
+ */
+export declare const combineValidators: (...validators: Validator[]) => Validator;
+/**
+ * Validates a value against a single validator or array of validators
+ * @param value Value to validate
+ * @param validator Single validator or array of validators
+ * @returns ValidationResult object
+ */
+export declare const validate: (value: any, validator: Validator | Validator[]) => ValidationResult;
+/**
+ * Validates multiple fields
+ * @param values Object with field values
+ * @param validators Object with field validators
+ * @returns Object with validation results
+ */
+export declare const validateForm: (values: Record<string, any>, validators: Record<string, Validator | Validator[]>) => Record<string, ValidationResult>;
+/**
+ * Checks if all validation results are valid
+ * @param results Validation results object
+ */
+export declare const isFormValid: (results: Record<string, ValidationResult>) => boolean;
+/**
+ * Extracts error messages from validation results
+ * @param results Validation results object
+ * @returns Object with error messages (only for invalid fields)
+ */
+export declare const getErrorMessages: (results: Record<string, ValidationResult>) => Record<string, string>;

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@true-tech-team/react-components",
+  "version": "0.0.1",
+  "description": "React TypeScript component library",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
+  "scripts": {
+    "build": "nx build ui-components",
+    "test": "nx test ui-components",
+    "test:watch": "nx test ui-components --watch",
+    "test:coverage": "nx test ui-components --coverage",
+    "lint": "nx lint ui-components",
+    "lint:fix": "nx lint ui-components --fix",
+    "storybook": "nx storybook ui-components",
+    "storybook:build": "nx build-storybook ui-components",
+    "typecheck": "tsc --noEmit -p tsconfig.lib.json"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "files": [
+    "index.js",
+    "index.mjs",
+    "index.d.ts",
+    "**/*.js",
+    "**/*.mjs",
+    "**/*.d.ts",
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "directory": "libs/ui-components"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "typescript",
+    "ui",
+    "library"
+  ],
+  "license": "MIT"
+}
+