cpk-ui 0.5.5 → 0.7.0

package/src/components/uis/Typography/Typography.tsx

@@ -1,386 +0,0 @@
-import React, {ReactNode, useMemo} from 'react';
-import {StyleProp, Text, TextInput, Platform, StyleSheet} from 'react-native';
-import {CpkTheme, isEmptyObject} from '../../../utils/theme';
-import {light} from '../../../utils/colors';
-import {type TextStyle} from 'react-native';
-import {styled, css} from 'kstyled';
-
-type FontFamilyOptions = {
-  normal: string;
-  thin?: string;
-  bold?: string;
-};
-
-type FontFamilyConfig = {
-  heading?: FontFamilyOptions;
-  body?: FontFamilyOptions;
-};
-
-const createBaseText = (
-  colorResolver: (theme: CpkTheme) => string,
-  fallbackColor: string,
-  isHeading: boolean,
-) => styled(Text)<{theme?: CpkTheme; $fontWeight?: 'normal' | 'bold' | 'thin'}>`
-  font-family: ${({$fontWeight}) => {
-    const fontFamilies = getFontFamilies(isHeading);
-    const {normal, thin = normal, bold = normal} = fontFamilies;
-    switch ($fontWeight) {
-      case 'bold':
-        return bold;
-      case 'thin':
-        return thin;
-      default:
-        return normal;
-    }
-  }};
-  color: ${({theme}) => {
-    if (!theme || isEmptyObject(theme)) {
-      return fallbackColor;
-    }
-    return colorResolver(theme);
-  }};
-`;
-
-type TextComponentType = ReturnType<typeof createBaseText>;
-
-const createTextComponent = ({
-  BaseText,
-  fontSize,
-  lineHeight,
-  fontWeight,
-  isHeading,
-}: {
-  BaseText: TextComponentType;
-  fontSize: number;
-  lineHeight: number;
-  fontWeight?: 'normal' | 'bold' | 'thin';
-  isHeading: boolean;
-}) =>
-  React.memo(({
-    style,
-    children,
-    ...props
-  }: {
-    style?: StyleProp<TextStyle>;
-    children?: ReactNode;
-  }) => {
-    const fontFamilies = getFontFamilies(isHeading);
-    const isCustomFont = Platform?.OS === 'android' && fontFamilies.normal !== 'Pretendard';
-
-    // On Android, remove fontWeight when custom font is applied
-    const effectiveFontWeight = isCustomFont ? undefined : fontWeight;
-
-    // Memoize style calculation
-    const textStyle = useMemo(() => [
-      css`
-        font-size: ${fontSize}px;
-        line-height: ${lineHeight}px;
-        ${effectiveFontWeight ? `font-weight: ${effectiveFontWeight};` : ''}
-      `,
-      {includeFontPadding: false},
-      style,
-    ], [style, effectiveFontWeight]);
-
-    return (
-      <BaseText
-        {...props}
-        $fontWeight={effectiveFontWeight}
-        style={textStyle}
-      >
-        {children}
-      </BaseText>
-    );
-  }) as unknown as TextComponentType;
-
-const StandardHeadingBaseText = createBaseText((theme) => theme.text.basic, 'gray', true);
-const StandardBodyBaseText = createBaseText((theme) => theme.text.basic, 'gray', false);
-const InvertedHeadingBaseText = createBaseText(
-  (theme) => theme.text.contrast,
-  light.text.contrast,
-  true,
-);
-const InvertedBodyBaseText = createBaseText(
-  (theme) => theme.text.contrast,
-  light.text.contrast,
-  false,
-);
-
-const Title = createTextComponent({
-  BaseText: StandardHeadingBaseText,
-  fontSize: 36,
-  lineHeight: 50.4,
-  fontWeight: 'bold',
-  isHeading: true,
-});
-
-const Heading1 = createTextComponent({
-  BaseText: StandardHeadingBaseText,
-  fontSize: 28,
-  lineHeight: 39.2,
-  fontWeight: 'bold',
-  isHeading: true,
-});
-
-const Heading2 = createTextComponent({
-  BaseText: StandardHeadingBaseText,
-  fontSize: 26,
-  lineHeight: 36.4,
-  fontWeight: 'bold',
-  isHeading: true,
-});
-
-const Heading3 = createTextComponent({
-  BaseText: StandardHeadingBaseText,
-  fontSize: 24,
-  lineHeight: 33.6,
-  fontWeight: 'bold',
-  isHeading: true,
-});
-
-const Heading4 = createTextComponent({
-  BaseText: StandardHeadingBaseText,
-  fontSize: 22,
-  lineHeight: 30.8,
-  fontWeight: 'bold',
-  isHeading: true,
-});
-
-const Heading5 = createTextComponent({
-  BaseText: StandardHeadingBaseText,
-  fontSize: 20,
-  lineHeight: 28,
-  fontWeight: 'bold',
-  isHeading: true,
-});
-
-const Body1 = createTextComponent({
-  BaseText: StandardBodyBaseText,
-  fontSize: 18,
-  lineHeight: 25.2,
-  isHeading: false,
-});
-
-const Body2 = createTextComponent({
-  BaseText: StandardBodyBaseText,
-  fontSize: 16,
-  lineHeight: 22.4,
-  isHeading: false,
-});
-
-const Body3 = createTextComponent({
-  BaseText: StandardBodyBaseText,
-  fontSize: 14,
-  lineHeight: 19.6,
-  isHeading: false,
-});
-
-const Body4 = createTextComponent({
-  BaseText: StandardBodyBaseText,
-  fontSize: 12,
-  lineHeight: 16.4,
-  isHeading: false,
-});
-
-const InvertedTitle = createTextComponent({
-  BaseText: InvertedHeadingBaseText,
-  fontSize: 36,
-  lineHeight: 50.4,
-  fontWeight: 'bold',
-  isHeading: true,
-});
-
-const InvertedHeading1 = createTextComponent({
-  BaseText: InvertedHeadingBaseText,
-  fontSize: 28,
-  lineHeight: 39.2,
-  fontWeight: 'bold',
-  isHeading: true,
-});
-
-const InvertedHeading2 = createTextComponent({
-  BaseText: InvertedHeadingBaseText,
-  fontSize: 26,
-  lineHeight: 36.4,
-  fontWeight: 'bold',
-  isHeading: true,
-});
-
-const InvertedHeading3 = createTextComponent({
-  BaseText: InvertedHeadingBaseText,
-  fontSize: 24,
-  lineHeight: 33.6,
-  fontWeight: 'bold',
-  isHeading: true,
-});
-
-const InvertedHeading4 = createTextComponent({
-  BaseText: InvertedHeadingBaseText,
-  fontSize: 22,
-  lineHeight: 30.8,
-  fontWeight: 'bold',
-  isHeading: true,
-});
-
-const InvertedHeading5 = createTextComponent({
-  BaseText: InvertedHeadingBaseText,
-  fontSize: 20,
-  lineHeight: 28,
-  fontWeight: 'bold',
-  isHeading: true,
-});
-
-const InvertedBody1 = createTextComponent({
-  BaseText: InvertedBodyBaseText,
-  fontSize: 18,
-  lineHeight: 25.2,
-  isHeading: false,
-});
-
-const InvertedBody2 = createTextComponent({
-  BaseText: InvertedBodyBaseText,
-  fontSize: 16,
-  lineHeight: 22.4,
-  isHeading: false,
-});
-
-const InvertedBody3 = createTextComponent({
-  BaseText: InvertedBodyBaseText,
-  fontSize: 14,
-  lineHeight: 19.6,
-  isHeading: false,
-});
-
-const InvertedBody4 = createTextComponent({
-  BaseText: InvertedBodyBaseText,
-  fontSize: 12,
-  lineHeight: 16.4,
-  isHeading: false,
-});
-
-export const Typography = {
-  Title,
-  Heading1,
-  Heading2,
-  Heading3,
-  Heading4,
-  Heading5,
-  Body1,
-  Body2,
-  Body3,
-  Body4,
-};
-
-export const TypographyInverted = {
-  Title: InvertedTitle,
-  Heading1: InvertedHeading1,
-  Heading2: InvertedHeading2,
-  Heading3: InvertedHeading3,
-  Heading4: InvertedHeading4,
-  Heading5: InvertedHeading5,
-  Body1: InvertedBody1,
-  Body2: InvertedBody2,
-  Body3: InvertedBody3,
-  Body4: InvertedBody4,
-};
-
-let currentFontFamilies: FontFamilyConfig = {
-  heading: {
-    normal: 'Pretendard',
-    thin: 'Pretendard-Thin',
-    bold: 'Pretendard-Bold',
-  },
-  body: {
-    normal: 'Pretendard',
-    thin: 'Pretendard-Thin',
-    bold: 'Pretendard-Bold',
-  },
-};
-
-export const setFontFamily = (fontFamilies: FontFamilyConfig): void => {
-  if (fontFamilies.heading) {
-    currentFontFamilies.heading = {
-      ...currentFontFamilies.heading,
-      ...fontFamilies.heading,
-    };
-  }
-
-  if (fontFamilies.body) {
-    currentFontFamilies.body = {
-      ...currentFontFamilies.body,
-      ...fontFamilies.body,
-    };
-  }
-
-  // Memoize font family getter function
-  const getFontFamily = (fontWeight: string | undefined, userFontFamily: string | undefined, isHeading: boolean): string => {
-    // If user explicitly set fontFamily, use it (override)
-    if (userFontFamily) {
-      return userFontFamily;
-    }
-
-    const fontFamilies = isHeading ? currentFontFamilies.heading : currentFontFamilies.body;
-    if (!fontFamilies) {
-      // Fallback to default Pretendard if not configured
-      return 'Pretendard';
-    }
-
-    const {normal, thin = normal, bold = normal} = fontFamilies;
-
-    switch (fontWeight) {
-      case 'bold':
-      case '700':
-        return bold;
-      case '100':
-      case '200':
-      case '300':
-        return thin;
-      default:
-        return normal;
-    }
-  };
-
-  const applyFontFamily = (Component: typeof Text | typeof TextInput) => {
-    // @ts-ignore
-    const oldRender = Component.render;
-
-    // @ts-ignore
-    Component.render = function (...args: any) {
-      const origin = oldRender.call(this, ...args);
-
-      // Flatten styles using React Native's StyleSheet.flatten
-      const flatStyle = StyleSheet.flatten(origin.props.style) ?? {};
-
-      const fontWeight = flatStyle?.fontWeight;
-      const userFontFamily = flatStyle?.fontFamily;
-
-      // Default to body fonts for direct Text/TextInput usage
-      // Heading fonts are applied via Typography components
-      const isHeading = false;
-
-      const updatedStyle = [
-        {
-          fontFamily: getFontFamily(fontWeight, userFontFamily, isHeading),
-          includeFontPadding: false,
-        },
-        origin.props.style,
-      ];
-
-      return React.cloneElement(origin, {
-        style: updatedStyle,
-      });
-    };
-  };
-
-  applyFontFamily(Text);
-  applyFontFamily(TextInput);
-};
-
-// Memoize font families getter
-export const getFontFamilies = (isHeading: boolean): FontFamilyOptions => {
-  const fontFamilies = isHeading ? currentFontFamilies.heading : currentFontFamilies.body;
-  return fontFamilies || {
-    normal: 'Pretendard',
-    thin: 'Pretendard-Thin',
-    bold: 'Pretendard-Bold',
-  };
-};

package/src/hooks/index.ts

@@ -1,2 +0,0 @@
-export * from './useOptimizedStyles';
-export * from './useAnimations';

package/src/hooks/useAnimations.ts

@@ -1,71 +0,0 @@
-import {useRef, useEffect} from 'react';
-import {Animated, Easing} from 'react-native';
-
-export interface AnimationConfig {
-  duration?: number;
-  easing?: (value: number) => number;
-  useNativeDriver?: boolean;
-}
-
-/**
- * Hook for optimized fade animations
- */
-export function useFadeAnimation(
-  isVisible: boolean,
-  config: AnimationConfig = {},
-): Animated.Value {
-  const fadeAnim = useRef(new Animated.Value(isVisible ? 1 : 0)).current;
-
-  useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: isVisible ? 1 : 0,
-      duration: config.duration ?? 200,
-      easing: config.easing ?? Easing.ease,
-      useNativeDriver: config.useNativeDriver ?? true,
-    }).start();
-  }, [isVisible, fadeAnim, config.duration, config.easing, config.useNativeDriver]);
-
-  return fadeAnim;
-}
-
-/**
- * Hook for optimized slide animations
- */
-export function useSlideAnimation(
-  isVisible: boolean,
-  config: AnimationConfig & {direction?: 'up' | 'down' | 'left' | 'right'} = {},
-): Animated.Value {
-  const slideAnim = useRef(new Animated.Value(isVisible ? 0 : 1)).current;
-
-  useEffect(() => {
-    Animated.timing(slideAnim, {
-      toValue: isVisible ? 0 : 1,
-      duration: config.duration ?? 200,
-      easing: config.easing ?? Easing.ease,
-      useNativeDriver: config.useNativeDriver ?? true,
-    }).start();
-  }, [isVisible, slideAnim, config.duration, config.easing, config.useNativeDriver]);
-
-  return slideAnim;
-}
-
-/**
- * Hook for optimized rotation animations
- */
-export function useRotateAnimation(
-  isActive: boolean,
-  config: AnimationConfig & {rotationDegrees?: number} = {},
-): Animated.Value {
-  const rotateAnim = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    Animated.timing(rotateAnim, {
-      toValue: isActive ? 1 : 0,
-      duration: config.duration ?? 200,
-      easing: config.easing ?? Easing.ease,
-      useNativeDriver: config.useNativeDriver ?? true,
-    }).start();
-  }, [isActive, rotateAnim, config.duration, config.easing, config.useNativeDriver]);
-
-  return rotateAnim;
-}

package/src/hooks/useDebouncedColorScheme.tsx

@@ -1,30 +0,0 @@
-import { useEffect, useState } from "react";
-import type { ColorSchemeName } from "react-native";
-import { useColorScheme } from "react-native";
-
-function useDebounce<T>(value: T, delay?: number): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [value, delay]);
-
-  return debouncedValue;
-}
-
-/* ?
- * Strangely enough, when useColorScheme() returns from the background state, it first returns a different color value and later returns the original color value.
- * Due to this phenomenon, there's a momentary flickering effect on the screen.
- * Therefore, to prevent this, we use useDebounce to delay the return of the color value until after a certain amount of time has passed.
- */
-export function useDebouncedColorScheme(
-  delay: number = 300
-): "light" | "dark" | null | undefined {
-  const colorScheme = useColorScheme();
-
-  return useDebounce<ColorSchemeName>(colorScheme, delay);
-}

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';