cpk-ui 0.5.4 → 0.7.0

package/src/utils/accessibility.ts

@@ -1,110 +0,0 @@
-import type {AccessibilityProps} from '../types/common';
-
-/**
- * Generate accessibility props for button-like components
- */
-export function getButtonAccessibilityProps(
-  label: string,
-  disabled?: boolean,
-  pressed?: boolean,
-): AccessibilityProps {
-  return {
-    accessibilityRole: 'button',
-    accessibilityLabel: label,
-    accessibilityState: {
-      disabled: disabled ?? false,
-      ...(pressed !== undefined && {selected: pressed}),
-    },
-  };
-}
-
-/**
- * Generate accessibility props for checkbox components
- */
-export function getCheckboxAccessibilityProps(
-  label: string,
-  checked: boolean,
-  disabled?: boolean,
-): AccessibilityProps {
-  return {
-    accessibilityRole: 'checkbox',
-    accessibilityLabel: label,
-    accessibilityState: {
-      checked,
-      disabled: disabled ?? false,
-    },
-  };
-}
-
-/**
- * Generate accessibility props for radio button components
- */
-export function getRadioAccessibilityProps(
-  label: string,
-  selected: boolean,
-  disabled?: boolean,
-): AccessibilityProps {
-  return {
-    accessibilityRole: 'radio',
-    accessibilityLabel: label,
-    accessibilityState: {
-      selected,
-      disabled: disabled ?? false,
-    },
-  };
-}
-
-/**
- * Generate accessibility props for text input components
- */
-export function getTextInputAccessibilityProps(
-  label: string,
-  placeholder?: string,
-  required?: boolean,
-  invalid?: boolean,
-): AccessibilityProps {
-  return {
-    accessibilityRole: 'text',
-    accessibilityLabel: label,
-    accessibilityHint: placeholder,
-    accessibilityState: {
-      ...(required && {busy: true}),
-      ...(invalid && {selected: false}),
-    },
-  };
-}
-
-/**
- * Generate accessibility props for switch/toggle components
- */
-export function getSwitchAccessibilityProps(
-  label: string,
-  value: boolean,
-  disabled?: boolean,
-): AccessibilityProps {
-  return {
-    accessibilityRole: 'switch',
-    accessibilityLabel: label,
-    accessibilityState: {
-      checked: value,
-      disabled: disabled ?? false,
-    },
-  };
-}
-
-/**
- * Generate accessibility props for expandable components (like Accordion)
- */
-export function getExpandableAccessibilityProps(
-  label: string,
-  expanded: boolean,
-): AccessibilityProps {
-  return {
-    accessibilityRole: 'button',
-    accessibilityLabel: label,
-    accessibilityState: {
-      expanded,
-    },
-    accessibilityHint: expanded ? 'Double tap to collapse' : 'Double tap to expand',
-  };
-}

package/src/utils/colors.ts

@@ -1,151 +0,0 @@
-const baseColors = {
-  success: '#1CD66C',
-  warning: '#E2B101',
-  danger: '#F84444',
-  info: '#307EF1',
-  accent: '#6BF3C5',
-  link: '#A351F4',
-};
-
-const buttonColors = {
-  light: {
-    primary: {bg: '#1B1B1B', text: '#FFFFFF'},
-    secondary: {bg: '#3D8BFF', text: '#FFFFFF'},
-    success: {bg: '#1CD66C', text: '#FFFFFF'},
-    danger: {bg: '#F84444', text: '#FFFFFF'},
-    warning: {bg: '#E2B101', text: '#FFFFFF'},
-    info: {bg: '#307EF1', text: '#FFFFFF'},
-    light: {bg: '#E8E8E8', text: '#232323'},
-    disabled: {bg: '#EDEDED', text: '#BEBEBE'},
-  },
-  dark: {
-    primary: {bg: '#FFFFFF', text: '#000000'},
-    secondary: {bg: '#3D8BFF', text: '#000000'},
-    success: {bg: '#2FFA86', text: '#000000'},
-    danger: {bg: '#FF3C3C', text: '#000000'},
-    warning: {bg: '#F4CC3E', text: '#000000'},
-    info: {bg: '#2998FF', text: '#000000'},
-    light: {bg: '#313131', text: '#FFFFFF'},
-    disabled: {bg: '#292929', text: '#474747'},
-  },
-};
-
-const colors: {
-  light: Partial<ThemeColors>;
-  dark: Partial<ThemeColors>;
-} = {
-  light: {
-    bg: {
-      basic: '#FFFFFF',
-      paper: '#EDEDED',
-      disabled: '#BEBEBE',
-    },
-    role: {
-      primary: '#1B1B1B',
-      secondary: '#3D8BFF',
-      success: baseColors.success,
-      warning: baseColors.warning,
-      danger: baseColors.danger,
-      info: baseColors.info,
-      accent: baseColors.accent,
-      link: baseColors.link,
-      border: '#CCCCCC',
-      underlay: 'rgba(0, 0, 0, 0.16)',
-      underlayContrast: 'rgba(0, 0, 0, 0.8)',
-    },
-    text: {
-      basic: '#000000',
-      label: '#4D4D4D',
-      placeholder: '#787878',
-      disabled: '#BEBEBE',
-      validation: '#DA0000',
-      contrast: '#FFFFFF',
-    },
-    button: buttonColors.light,
-  },
-
-  dark: {
-    bg: {
-      basic: '#242424',
-      paper: '#1E1D1D',
-      disabled: '#474747',
-    },
-    role: {
-      primary: '#FFFFFF',
-      secondary: '#3D8BFF',
-      success: '#2FFA86',
-      warning: '#F4CC3E',
-      danger: '#FF3C3C',
-      info: '#2998FF',
-      accent: '#4AE3AD',
-      link: baseColors.link,
-      border: '#363636',
-      underlay: 'rgba(255, 255, 255, 0.16)',
-      underlayContrast: 'rgba(255, 255, 255, 0.8)',
-    },
-    text: {
-      basic: '#FFFFFF',
-      label: '#BEBEBE',
-      placeholder: '#909090',
-      disabled: '#6D6D6D',
-      validation: '#FF2C2C',
-      contrast: '#000000',
-    },
-    button: buttonColors.dark,
-  },
-};
-
-type ThemeColors = {
-  bg: {
-    basic: string;
-    paper: string;
-    disabled: string;
-  };
-  role: {
-    primary: string;
-    secondary: string;
-    success: string;
-    warning: string;
-    danger: string;
-    info: string;
-    accent: string;
-    link: string;
-    border: string;
-    underlay: string;
-    underlayContrast: string;
-  };
-  text: {
-    basic: string;
-    label: string;
-    placeholder: string;
-    disabled: string;
-    validation: string;
-    contrast: string;
-  };
-  button: {
-    primary: {bg: string; text: string};
-    secondary: {bg: string; text: string};
-    success: {bg: string; text: string};
-    danger: {bg: string; text: string};
-    warning: {bg: string; text: string};
-    info: {bg: string; text: string};
-    light: {bg: string; text: string};
-    disabled: {bg: string; text: string};
-  };
-};
-
-const createTheme = (mode: 'light' | 'dark'): ThemeColors => {
-  const themeColors = colors[mode];
-
-  return {
-    bg: themeColors.bg as ThemeColors['bg'],
-    role: themeColors.role as ThemeColors['role'],
-    text: themeColors.text as ThemeColors['text'],
-    button: themeColors.button as ThemeColors['button'],
-  };
-};
-
-export const light = createTheme('light');
-export const dark = createTheme('dark');
-
-export type Colors = typeof light;

package/src/utils/createCtx.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-
-type CreateCtx<A> = readonly [
-  () => A,
-  React.ProviderExoticComponent<React.ProviderProps<A | undefined>>
-];
-
-// create context with no upfront defaultValue
-// without having to do undefined check all the time
-function createCtx<A>(): CreateCtx<A> {
-  const ctx = React.createContext<A | undefined>(undefined);
-
-  function useCtx(): A {
-    const c = React.useContext(ctx);
-
-    if (!c) {
-      throw new Error("useTheme must be inside a ThemeProvider");
-    }
-
-    return c;
-  }
-
-  return [useCtx, ctx.Provider] as const;
-}
-
-export default createCtx;

package/src/utils/guards.ts

@@ -1,93 +0,0 @@
-import React, {cloneElement, type ReactElement} from 'react';
-import type {ColorValue, ViewStyle} from 'react-native';
-import {
-  Button,
-  Image,
-  Pressable,
-  Text,
-  TextInput,
-  TouchableHighlight,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
-import {Icon} from '../components/uis/Icon/Icon';
-
-const getRootElementStyleType = (
-  element: ReactElement,
-): 'TextStyle' | 'ViewStyle' | 'unknown' => {
-  if (React.isValidElement(element)) {
-    if (
-      element.type === Text ||
-      element.type === TextInput ||
-      element.type === Icon
-    ) {
-      return 'TextStyle';
-    }
-
-    if (
-      element.type === Image ||
-      element.type === View ||
-      element.type === Button ||
-      element.type === TouchableHighlight ||
-      element.type === TouchableOpacity ||
-      element.type === Pressable ||
-      element.type === TouchableWithoutFeedback
-    ) {
-      return 'ViewStyle';
-    }
-  }
-
-  return 'unknown';
-};
-
-type CloneElemColorsParams = {
-  /**
-   * ReactElement to be cloned to shape default colors.
-   */
-  element?: ReactElement;
-  /**
-   * Text color to be applied.
-   * If not passed, default color will be applied.
-   * Invalid if element is ViewStyle.
-   */
-  color?: ColorValue;
-  /**
-   * Background color to be applied.
-   * If not passed, default color will be applied.
-   * Invalid if element is TextStyle.
-   */
-  backgroundColor?: ColorValue;
-  /**
-   * Extra style to be applied.
-   */
-  style?: ViewStyle;
-};
-
-/**
- * This function applies default colors to cloned element.
- *
- * @param {CloneElemColorsParams} params
- * @returns {ReactElement} - Cloned element with default colors if exists. Otherwise, null.
- */
-export const cloneElemWithDefaultColors = ({
-  element,
-  color,
-  backgroundColor,
-  style,
-}: CloneElemColorsParams): ReactElement | null => {
-  return element
-    ? cloneElement(element, {
-        style: [
-          getRootElementStyleType(element) === 'TextStyle' && {
-            color,
-          },
-          getRootElementStyleType(element) === 'ViewStyle' && {
-            borderColor: color,
-            backgroundColor: backgroundColor,
-          },
-          {...style, ...(element.props as any).style},
-        ],
-      } as any)
-    : null;
-};

package/src/utils/index.ts

@@ -1,2 +0,0 @@
-export * from './platform';
-export * from './accessibility';

package/src/utils/performanceTest.ts

@@ -1,174 +0,0 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
-
-/**
- * Performance testing utilities for cpk-ui components
- */
-
-export interface PerformanceMetrics {
-  renderCount: number;
-  lastRenderTime: number;
-  averageRenderTime: number;
-  maxRenderTime: number;
-  minRenderTime: number;
-}
-
-/**
- * Hook to track component render performance
- * Useful for development and testing component optimizations
- */
-export function usePerformanceTest(componentName: string = 'Unknown'): PerformanceMetrics {
-  const renderCount = useRef(0);
-  const renderTimes = useRef<number[]>([]);
-  const lastRenderStart = useRef(performance.now());
-  const [metrics, setMetrics] = useState<PerformanceMetrics>({
-    renderCount: 0,
-    lastRenderTime: 0,
-    averageRenderTime: 0,
-    maxRenderTime: 0,
-    minRenderTime: 0,
-  });
-
-  useEffect(() => {
-    const renderEnd = performance.now();
-    const renderTime = renderEnd - lastRenderStart.current;
-    
-    renderCount.current += 1;
-    renderTimes.current.push(renderTime);
-    
-    // Keep only last 100 render times to avoid memory issues
-    if (renderTimes.current.length > 100) {
-      renderTimes.current = renderTimes.current.slice(-100);
-    }
-    
-    const averageRenderTime = renderTimes.current.reduce((sum, time) => sum + time, 0) / renderTimes.current.length;
-    const maxRenderTime = Math.max(...renderTimes.current);
-    const minRenderTime = Math.min(...renderTimes.current);
-    
-    setMetrics({
-      renderCount: renderCount.current,
-      lastRenderTime: renderTime,
-      averageRenderTime,
-      maxRenderTime,
-      minRenderTime,
-    });
-    
-    // Log performance if it's slow (over 16ms for 60fps)
-    if (renderTime > 16) {
-      console.warn(`[Performance] ${componentName} slow render: ${renderTime.toFixed(2)}ms`);
-    }
-    
-    lastRenderStart.current = performance.now();
-  });
-
-  return metrics;
-}
-
-/**
- * Hook to measure style calculation performance
- */
-export function useStylePerformanceTest() {
-  const measureStyleCalculation = useCallback((
-    styleFn: () => any,
-    styleName: string = 'Style'
-  ) => {
-    const start = performance.now();
-    const result = styleFn();
-    const end = performance.now();
-    const duration = end - start;
-    
-    if (duration > 1) {
-      console.warn(`[Style Performance] ${styleName} calculation took ${duration.toFixed(2)}ms`);
-    }
-    
-    return result;
-  }, []);
-
-  return measureStyleCalculation;
-}
-
-/**
- * Hook to detect unnecessary re-renders
- */
-export function useRenderTracker(props: Record<string, any>, componentName: string = 'Component') {
-  const prevProps = useRef<Record<string, any> | undefined>(undefined);
-  const renderCount = useRef(0);
-
-  useEffect(() => {
-    renderCount.current += 1;
-    
-    if (prevProps.current) {
-      const changedProps: string[] = [];
-      
-      Object.keys(props).forEach(key => {
-        if (prevProps.current![key] !== props[key]) {
-          changedProps.push(key);
-        }
-      });
-      
-      if (changedProps.length === 0) {
-        console.warn(`[Render Tracker] ${componentName} re-rendered without prop changes (render #${renderCount.current})`);
-      } else if (changedProps.length > 0) {
-        console.log(`[Render Tracker] ${componentName} re-rendered due to: ${changedProps.join(', ')}`);
-      }
-    }
-    
-    prevProps.current = props;
-  });
-
-  return renderCount.current;
-}
-
-/**
- * Hook to measure memory usage (approximation)
- */
-export function useMemoryTracker(componentName: string = 'Component') {
-  const [memoryUsage, setMemoryUsage] = useState<number>(0);
-
-  useEffect(() => {
-    // Only available in some browsers and development
-    if ('memory' in performance && (performance as any).memory) {
-      const memory = (performance as any).memory;
-      const usedJSHeapSize = memory.usedJSHeapSize / 1024 / 1024; // Convert to MB
-      setMemoryUsage(usedJSHeapSize);
-      
-      if (usedJSHeapSize > 50) { // Warn if over 50MB
-        console.warn(`[Memory] ${componentName} - High memory usage: ${usedJSHeapSize.toFixed(2)}MB`);
-      }
-    }
-  });
-
-  return memoryUsage;
-}
-
-/**
- * Component wrapper for performance testing
- */
-export function withPerformanceTest<P extends object>(
-  Component: React.ComponentType<P>,
-  componentName?: string
-): React.ComponentType<P> {
-  const PerformanceTestWrapper = (props: P) => {
-    const name = componentName || Component.displayName || Component.name || 'Unknown';
-    const metrics = usePerformanceTest(name);
-    const renderCount = useRenderTracker(props as Record<string, any>, name);
-    const memoryUsage = useMemoryTracker(name);
-
-    // Log metrics every 10 renders
-    useEffect(() => {
-      if (renderCount % 10 === 0 && renderCount > 0) {
-        console.log(`[Performance Summary] ${name}:`, {
-          renders: renderCount,
-          avgRenderTime: `${metrics.averageRenderTime.toFixed(2)}ms`,
-          maxRenderTime: `${metrics.maxRenderTime.toFixed(2)}ms`,
-          memoryUsage: `${memoryUsage.toFixed(2)}MB`,
-        });
-      }
-    }, [renderCount, metrics, memoryUsage, name]);
-
-    return React.createElement(Component, props);
-  };
-
-  PerformanceTestWrapper.displayName = `withPerformanceTest(${componentName || Component.displayName || Component.name})`;
-  
-  return PerformanceTestWrapper;
-}

package/src/utils/platform.ts

@@ -1,69 +0,0 @@
-import {Platform} from 'react-native';
-
-/**
- * Safely check if current platform is web
- * Prevents undefined Platform.OS errors during testing
- */
-export function isWeb(): boolean {
-  try {
-    return Platform.OS === 'web';
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Safely check if current platform is iOS
- */
-export function isIOS(): boolean {
-  try {
-    return Platform.OS === 'ios';
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Safely check if current platform is Android
- */
-export function isAndroid(): boolean {
-  try {
-    return Platform.OS === 'android';
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Safe wrapper for Platform.select
- * Provides fallback when Platform.OS is undefined
- */
-export function safePlatformSelect<T>(options: {
-  web?: T;
-  ios?: T;
-  android?: T;
-  native?: T;
-  default?: T;
-}): T | undefined {
-  try {
-    const platformSelect = Platform.select(options);
-    return platformSelect ?? options.default;
-  } catch {
-    return options.default;
-  }
-}
-
-/**
- * Get safe platform-specific values
- */
-export function getPlatformValue<T>(
-  webValue: T,
-  nativeValue: T,
-  fallback: T,
-): T {
-  try {
-    return Platform.OS === 'web' ? webValue : nativeValue;
-  } catch {
-    return fallback;
-  }
-}

package/src/utils/theme.ts

@@ -1,38 +0,0 @@
-import {Colors, light} from './colors';
-
-// Internal base theme type for cpk-ui components
-export type CpkThemeBase = Colors & {
-  isPortrait?: boolean;
-  isDesktop?: boolean;
-  isTablet?: boolean;
-  isMobile?: boolean;
-};
-
-// Empty interface for module augmentation (like @emotion/react's Theme)
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface CpkTheme extends CpkThemeBase {}
-
-type RecursivePartial<T> = {
-  [P in keyof T]?: RecursivePartial<T[P]>;
-};
-
-export type CpkThemeParams = RecursivePartial<CpkThemeBase>;
-
-export type ThemeObjParams = {
-  bg: Partial<Colors['bg']>;
-  role: Partial<Colors['role']>;
-  text: Partial<Colors['text']>;
-  button: Partial<Colors['button']>;
-};
-
-export interface ThemeParam {
-  light?: Partial<ThemeObjParams & any>;
-  dark?: Partial<ThemeObjParams & any>;
-}
-
-export const isEmptyObject = (param: any): boolean =>
-  Object.keys(param).length === 0 && param.constructor === Object;
-
-export const getTheme = (theme?: CpkTheme): CpkThemeBase => {
-  return (isEmptyObject(theme) || theme === undefined ? light : theme) as CpkThemeBase;
-};