cpk-ui 0.5.4 → 0.7.0

package/src/hooks/useOptimizedStyles.ts

@@ -1,22 +0,0 @@
-import {useMemo} from 'react';
-import type {StyleProp, ViewStyle, TextStyle} from 'react-native';
-
-/**
- * Hook to optimize style objects and prevent unnecessary re-renders
- */
-export function useOptimizedStyles<T extends Record<string, StyleProp<ViewStyle | TextStyle>>>(
-  styleFactory: () => T,
-  dependencies: React.DependencyList,
-): T {
-  return useMemo(styleFactory, dependencies);
-}
-
-/**
- * Hook to memoize style arrays
- */
-export function useStyleArray<T extends StyleProp<ViewStyle | TextStyle>>(
-  styles: T[],
-  dependencies: React.DependencyList,
-): T[] {
-  return useMemo(() => styles, dependencies);
-}

package/src/hooks/usePerformance.ts

@@ -1,93 +0,0 @@
-import {useEffect, useRef} from 'react';
-
-interface PerformanceMetrics {
-  componentName: string;
-  renderCount: number;
-  lastRenderTime: number;
-  averageRenderTime: number;
-  slowRenders: number;
-}
-
-const SLOW_RENDER_THRESHOLD = 16; // 16ms for 60fps
-
-/**
- * Hook to monitor component render performance
- * Only active in development mode
- */
-export function usePerformanceMonitor(
-  componentName: string,
-  enabled: boolean = __DEV__,
-): PerformanceMetrics | null {
-  const metricsRef = useRef<PerformanceMetrics>({
-    componentName,
-    renderCount: 0,
-    lastRenderTime: 0,
-    averageRenderTime: 0,
-    slowRenders: 0,
-  });
-
-  const startTimeRef = useRef<number>(0);
-
-  useEffect(() => {
-    if (!enabled) return;
-
-    const endTime = performance.now();
-    const renderTime = endTime - startTimeRef.current;
-
-    const metrics = metricsRef.current;
-    metrics.renderCount++;
-    metrics.lastRenderTime = renderTime;
-    metrics.averageRenderTime =
-      (metrics.averageRenderTime * (metrics.renderCount - 1) + renderTime) /
-      metrics.renderCount;
-
-    if (renderTime > SLOW_RENDER_THRESHOLD) {
-      metrics.slowRenders++;
-      console.warn(
-        `Slow render detected in ${componentName}: ${renderTime.toFixed(2)}ms`,
-      );
-    }
-  });
-
-  if (enabled) {
-    startTimeRef.current = performance.now();
-  }
-
-  return enabled ? metricsRef.current : null;
-}
-
-/**
- * Hook to track unnecessary re-renders
- */
-export function useRenderTracker(
-  componentName: string,
-  props: Record<string, any>,
-  enabled: boolean = __DEV__,
-): void {
-  const prevPropsRef = useRef<Record<string, any> | undefined>(undefined);
-  const renderCountRef = useRef(0);
-
-  useEffect(() => {
-    if (!enabled) return;
-
-    renderCountRef.current++;
-
-    if (prevPropsRef.current) {
-      const changedProps = Object.keys(props).filter(
-        (key) => props[key] !== prevPropsRef.current![key],
-      );
-
-      if (changedProps.length === 0) {
-        console.warn(
-          `Unnecessary re-render in ${componentName} (render #${renderCountRef.current})`,
-        );
-      } else if (renderCountRef.current > 10) {
-        console.info(
-          `${componentName} re-rendered due to: ${changedProps.join(', ')}`,
-        );
-      }
-    }
-
-    prevPropsRef.current = {...props};
-  });
-}

package/src/index.tsx

@@ -1,38 +0,0 @@
-// Modals
-export * from './components/modals/AlertDialog/AlertDialog';
-export * from './components/modals/Snackbar/Snackbar';
-
-// Common Components
-export * from './components/common/ErrorBoundary/ErrorBoundary';
-
-// Providers
-export * from './providers';
-
-// UIs
-export * from './components/uis/Accordion/Accordion';
-export * from './components/uis/Button/Button';
-export * from './components/uis/Card/Card';
-export * from './components/uis/Checkbox/Checkbox';
-export * from './components/uis/CustomPressable/CustomPressable';
-export * from './components/uis/EditText/EditText';
-export * from './components/uis/Fab/Fab';
-export * from './components/uis/Hr/Hr';
-export * from './components/uis/Icon/Icon';
-export * from './components/uis/IconButton/IconButton';
-export * from './components/uis/LoadingIndicator/LoadingIndicator';
-export * from './components/uis/PinchZoom/PinchZoom';
-export * from './components/uis/Rating/Rating';
-export * from './components/uis/RadioGroup/RadioGroup';
-export * from './components/uis/SegmentedControl/SegmentedControl';
-export * from './components/uis/StatusbarBrightness/StatusBarBrightness';
-export * from './components/uis/SwitchToggle/SwitchToggle';
-export * from './components/uis/Typography/Typography';
-
-// Hooks
-export * from './hooks';
-
-// Utils
-export * from './utils';
-
-// Types
-export * from './types';

package/src/providers/ThemeProvider.tsx

@@ -1,177 +0,0 @@
-import '@expo/match-media';
-
-import React, {useEffect, useState, type ReactElement} from 'react';
-import type {ColorSchemeName} from 'react-native';
-import {useMediaQuery} from 'react-responsive';
-import {ThemeProvider as KStyledThemeProvider} from 'kstyled';
-import type {DefaultTheme} from 'kstyled';
-
-import type {CpkTheme, ThemeParam} from '../utils/theme';
-import {dark, light} from '../utils/colors';
-import {useDebouncedColorScheme} from '../hooks/useDebouncedColorScheme';
-import createCtx from '../utils/createCtx';
-
-type ResponsiveDesignMode = 'mobile-first' | 'desktop-first';
-export type ThemeType = 'light' | 'dark';
-
-export type ThemeContext = {
-  themeType: ColorSchemeName;
-  media: {
-    isPortrait: boolean;
-    isMobile: boolean;
-    isTablet: boolean;
-    isDesktop: boolean;
-  };
-  theme: DefaultTheme & CpkTheme;
-  changeThemeType: (themeType?: ColorSchemeName) => void;
-};
-
-const [useCtx, CpkProvider] = createCtx<ThemeContext>();
-
-export type ThemeProps = {
-  children?: ReactElement;
-  initialThemeType?: ThemeType;
-  customTheme?: ThemeParam;
-  /*
-    @description
-    default: mobile-first
-    - mobile-first: mobile first responsive design mode
-    - desktop-first: desktop first responsive design mode
-  */
-  responsiveDesignMode?: ResponsiveDesignMode;
-};
-
-const genTheme = (type: ThemeType, themeParam: ThemeParam): any => {
-  const theme = type === 'light' ? light : dark;
-  const customTheme = themeParam?.[type] || {};
-
-  return {
-    bg: {
-      ...theme.bg,
-      ...(customTheme.bg || {}),
-    },
-    role: {
-      ...theme.role,
-      ...(customTheme.role || {}),
-    },
-    text: {
-      ...theme.text,
-      ...(customTheme.text || {}),
-    },
-    button: {
-      ...theme.button,
-      primary: {
-        ...theme.button.primary,
-        ...(customTheme.button?.primary || {}),
-      },
-      secondary: {
-        ...theme.button.secondary,
-        ...(customTheme.button?.secondary || {}),
-      },
-      success: {
-        ...theme.button.success,
-        ...(customTheme.button?.success || {}),
-      },
-      warning: {
-        ...theme.button.warning,
-        ...(customTheme.button?.warning || {}),
-      },
-      danger: {
-        ...theme.button.danger,
-        ...(customTheme.button?.danger || {}),
-      },
-      info: {
-        ...theme.button.info,
-        ...(customTheme.button?.info || {}),
-      },
-      light: {
-        ...theme.button.light,
-        ...(customTheme.button?.light || {}),
-      },
-      disabled: {
-        ...theme.button.disabled,
-        ...(customTheme.button?.disabled || {}),
-      },
-    },
-  };
-};
-
-export function ThemeProvider({
-  children,
-  initialThemeType,
-  customTheme = {},
-  responsiveDesignMode = 'mobile-first',
-}: ThemeProps): ReactElement {
-  console.log('🎨 ThemeProvider rendered with initialThemeType:', initialThemeType);
-
-  const isPortrait = useMediaQuery({orientation: 'portrait'});
-
-  const isMobile = useMediaQuery(
-    responsiveDesignMode === 'mobile-first'
-      ? {minWidth: 0}
-      : {minWidth: 0, maxWidth: 767},
-  );
-
-  const isTablet = useMediaQuery(
-    responsiveDesignMode === 'mobile-first'
-      ? {minWidth: 767}
-      : {minWidth: 768, maxWidth: 992},
-  );
-
-  const isDesktop = useMediaQuery(
-    responsiveDesignMode === 'mobile-first' ? {minWidth: 992} : {minWidth: 0},
-  );
-
-  const colorScheme = useDebouncedColorScheme();
-  const [themeType, setThemeType] = useState(initialThemeType ?? colorScheme);
-
-  useEffect(() => {
-    if (initialThemeType) {
-      setThemeType(initialThemeType);
-    } else {
-      setThemeType(colorScheme);
-    }
-  }, [colorScheme, initialThemeType]);
-
-  const changeThemeType = (themeTypeProp?: ColorSchemeName): void => {
-    if (!themeTypeProp) {
-      setThemeType(themeType === 'light' ? 'dark' : 'light');
-
-      return;
-    }
-
-    setThemeType(themeTypeProp);
-  };
-
-  const baseTheme = {
-    light: genTheme('light', customTheme),
-    dark: genTheme('dark', customTheme),
-  }[themeType || 'light'];
-
-  const media = {
-    isPortrait,
-    isMobile,
-    isTablet,
-    isDesktop,
-  };
-
-  const theme = {
-    ...baseTheme,
-    ...media,
-  } as DefaultTheme & CpkTheme;
-
-  return (
-    <CpkProvider
-      value={{
-        media,
-        themeType,
-        changeThemeType,
-        theme,
-      }}
-    >
-      <KStyledThemeProvider theme={theme}>{children}</KStyledThemeProvider>
-    </CpkProvider>
-  );
-}
-
-export {useCtx as useTheme};

package/src/providers/index.tsx

@@ -1,130 +0,0 @@
-import React, {type MutableRefObject, useRef, type ReactElement} from 'react';
-import {View} from 'react-native';
-import {css} from 'kstyled';
-import {useFonts} from 'expo-font';
-
-import createCtx from '../utils/createCtx';
-import {
-  ThemeContext,
-  ThemeProps,
-  ThemeProvider,
-  useTheme,
-} from './ThemeProvider';
-import Snackbar, {
-  SnackbarContext,
-  SnackbarOptions,
-} from '../components/modals/Snackbar/Snackbar';
-import AlertDialog, {
-  AlertDialogContext,
-} from '../components/modals/AlertDialog/AlertDialog';
-import {LoadingIndicator} from '../components/uis/LoadingIndicator/LoadingIndicator';
-
-export type ThemeType = ThemeContext['themeType'];
-export type DoobooTheme = ThemeContext['theme'];
-
-export type CpkContext = {
-  assetLoaded: boolean;
-  snackbar: SnackbarContext;
-  alertDialog: AlertDialogContext;
-} & ThemeContext;
-
-const [useCtx, Provider] = createCtx<CpkContext>();
-
-function AppProvider({
-  children,
-}: {
-  children: ReactElement;
-}): ReactElement {
-  const [assetLoaded] = useFonts({
-    cpk: require('../components/uis/Icon/cpk.ttf'),
-    'Pretendard-Bold': require('../components/uis/Icon/Pretendard-Bold.otf'),
-    Pretendard: require('../components/uis/Icon/Pretendard-Regular.otf'),
-    'Pretendard-Thin': require('../components/uis/Icon/Pretendard-Thin.otf'),
-  });
-
-  const themeContext = useTheme();
-
-  const snackbar = useRef<SnackbarContext>(
-    undefined,
-  ) as MutableRefObject<SnackbarContext>;
-
-  const alertDialog = useRef<AlertDialogContext>(
-    undefined,
-  ) as MutableRefObject<AlertDialogContext>;
-
-  /**
-   ** Snackbar
-   */
-  const snackbarContext: SnackbarContext = {
-    open: (snackbarOption): void => {
-      snackbar.current && snackbar.current.open(snackbarOption);
-    },
-    close: (): void => {
-      snackbar.current && snackbar.current.close();
-    },
-  };
-
-  /**
-   ** AlertDialog
-   */
-  const alertDialogContext: AlertDialogContext = {
-    open: (alertDialogOptions): void => {
-      alertDialog.current && alertDialog.current.open(alertDialogOptions);
-    },
-    close: (): void => {
-      alertDialog.current && alertDialog.current.close();
-    },
-  };
-
-  return (
-    <View
-      style={css`
-        flex: 1;
-      `}
-    >
-      <Provider
-        value={{
-          ...themeContext,
-          assetLoaded,
-          snackbar: snackbarContext,
-          alertDialog: alertDialogContext,
-        }}
-      >
-        {!assetLoaded ? (
-          <LoadingIndicator
-            style={css`
-              align-self: stretch;
-              flex: 1;
-              justify-content: center;
-              background-color: ${themeContext.theme.bg.basic};
-            `}
-          />
-        ) : (
-          <>
-            {children}
-            <Snackbar ref={snackbar} />
-            <AlertDialog ref={alertDialog} />
-          </>
-        )}
-      </Provider>
-    </View>
-  );
-}
-
-export type CpkProviderProps = {
-  themeConfig?: Omit<ThemeProps, 'children'>;
-  snackbarConfig?: SnackbarOptions;
-  children: ReactElement;
-};
-
-function CpkWithThemeProvider(props: CpkProviderProps): ReactElement {
-  const {themeConfig} = props;
-
-  return (
-    <ThemeProvider {...themeConfig}>
-      <AppProvider {...props} />
-    </ThemeProvider>
-  );
-}
-
-export {useCtx as useCPK, CpkWithThemeProvider as CpkProvider};

package/src/test/testUtils.tsx

@@ -1,101 +0,0 @@
-import {render, fireEvent, waitFor} from '@testing-library/react-native';
-import React, {type ReactElement} from 'react';
-import {CpkProvider} from '../providers';
-import {light as lightTheme} from '../utils/colors';
-
-/**
- * Custom render function that wraps components with necessary providers
- */
-export function renderWithProviders(
-  ui: ReactElement,
-  options: {
-    theme?: 'light' | 'dark';
-    initialTheme?: typeof lightTheme;
-  } = {},
-) {
-  const {theme = 'light', initialTheme} = options;
-
-  const Wrapper = ({children}: {children: ReactElement}) => (
-    <CpkProvider>{children}</CpkProvider>
-  );
-
-  return render(ui, {wrapper: Wrapper});
-}
-
-/**
- * Test helper for checking accessibility properties
- */
-export function expectAccessibilityProps(
-  element: any,
-  expectedProps: {
-    role?: string;
-    label?: string;
-    hint?: string;
-    state?: Record<string, any>;
-  },
-) {
-  const {role, label, hint, state} = expectedProps;
-
-  if (role) {
-    expect(element.props.accessibilityRole).toBe(role);
-  }
-
-  if (label) {
-    expect(element.props.accessibilityLabel).toBe(label);
-  }
-
-  if (hint) {
-    expect(element.props.accessibilityHint).toBe(hint);
-  }
-
-  if (state) {
-    expect(element.props.accessibilityState).toEqual(
-      expect.objectContaining(state),
-    );
-  }
-}
-
-/**
- * Test helper for animation testing
- */
-export async function waitForAnimation(duration: number = 300) {
-  await waitFor(() => {}, {timeout: duration + 100});
-}
-
-/**
- * Test helper for press events with different delays
- */
-export async function pressWithDelay(
-  element: any,
-  delay: number = 0,
-): Promise<void> {
-  fireEvent.press(element);
-  if (delay > 0) {
-    await new Promise((resolve) => setTimeout(resolve, delay));
-  }
-}
-
-/**
- * Mock platform for testing
- */
-export function mockPlatform(platform: 'ios' | 'android' | 'web') {
-  const originalPlatform = require('react-native').Platform.OS;
-
-  beforeEach(() => {
-    require('react-native').Platform.OS = platform;
-  });
-
-  afterEach(() => {
-    require('react-native').Platform.OS = originalPlatform;
-  });
-}
-
-/**
- * Test performance of component renders
- */
-export function measureRenderTime(renderFn: () => void): number {
-  const startTime = performance.now();
-  renderFn();
-  const endTime = performance.now();
-  return endTime - startTime;
-}

package/src/types/common.ts

@@ -1,77 +0,0 @@
-import type {StyleProp, ViewStyle, TextStyle} from 'react-native';
-
-/**
- * Common size types used across components
- */
-export type ComponentSize = 'small' | 'medium' | 'large';
-
-/**
- * Common variant types for styled components
- */
-export type ComponentVariant = 
-  | 'primary' 
-  | 'secondary' 
-  | 'success' 
-  | 'danger' 
-  | 'warning' 
-  | 'info' 
-  | 'light' 
-  | 'dark';
-
-/**
- * Position types for various components
- */
-export type Position = 'left' | 'right' | 'top' | 'bottom' | 'center';
-
-/**
- * Common styles interface that most components should accept
- */
-export interface BaseStyles {
-  container?: StyleProp<ViewStyle>;
-  content?: StyleProp<ViewStyle>;
-  text?: StyleProp<TextStyle>;
-}
-
-/**
- * Base props that most UI components should accept
- */
-export interface BaseComponentProps {
-  testID?: string;
-  style?: StyleProp<ViewStyle>;
-  disabled?: boolean;
-}
-
-/**
- * Props for components that can be pressed
- */
-export interface PressableComponentProps extends BaseComponentProps {
-  onPress?: () => void;
-  activeOpacity?: number;
-  disabled?: boolean;
-}
-
-/**
- * Animation configuration interface
- */
-export interface AnimationOptions {
-  duration?: number;
-  delay?: number;
-  useNativeDriver?: boolean;
-  easing?: (value: number) => number;
-}
-
-/**
- * Accessibility props interface
- */
-export interface AccessibilityProps {
-  accessibilityLabel?: string;
-  accessibilityHint?: string;
-  accessibilityRole?: string;
-  accessibilityState?: {
-    disabled?: boolean;
-    selected?: boolean;
-    checked?: boolean | 'mixed';
-    busy?: boolean;
-    expanded?: boolean;
-  };
-}

package/src/types/index.ts

@@ -1 +0,0 @@
-export * from './common';

package/src/types/kstyled.d.ts

@@ -1,6 +0,0 @@
-import 'kstyled';
-import {CpkThemeBase} from '../utils/theme';
-
-declare module 'kstyled' {
-  export interface DefaultTheme extends CpkThemeBase {}
-}