cpk-ui 0.5.4 → 0.7.0

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

@@ -1,149 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {Typography} from './Typography';
-import {withThemeProvider} from '../../../../.storybook/decorators';
-import {ScrollView, View} from 'react-native';
-import {ThemeParam} from '../../../utils/theme';
-
-const meta = {
-  title: 'Typography',
-  component: Typography.Title,
-  parameters: {
-    notes: `
-A comprehensive typography system with predefined text styles for consistent design.
-
-## Features
-- **Pre-defined Text Styles**: Multiple typography variants for different use cases
-- **Theme Integration**: Automatically uses theme colors and styles
-- **Responsive**: Works across all platforms (iOS, Android, Web)
-- **Customizable**: Can override styles while maintaining base typography
-
-## Available Typography Variants
-- **Title**: Large heading text
-- **Heading1**: Primary heading
-- **Heading2**: Secondary heading
-- **Heading3**: Tertiary heading
-- **Subtitle1**: Large subtitle
-- **Subtitle2**: Standard subtitle
-- **Body1**: Primary body text
-- **Body2**: Secondary body text
-- **Body3**: Tertiary body text
-- **Body4**: Small body text
-- **Caption**: Small caption text
-- **Button**: Button text style
-
-## Usage
-\`\`\`tsx
-<Typography.Title>Page Title</Typography.Title>
-<Typography.Heading1>Main Heading</Typography.Heading1>
-<Typography.Body1>This is body text.</Typography.Body1>
-<Typography.Caption>Small caption text</Typography.Caption>
-\`\`\`
-
-### With Custom Styling
-\`\`\`tsx
-<Typography.Body1 style={{color: 'blue', fontWeight: 'bold'}}>
-  Custom styled text
-</Typography.Body1>
-\`\`\`
-        `,
-    docs: {
-      description: {
-        component: `
-A comprehensive typography system with predefined text styles for consistent design.
-
-## Features
-- **Pre-defined Text Styles**: Multiple typography variants for different use cases
-- **Theme Integration**: Automatically uses theme colors and styles
-- **Responsive**: Works across all platforms (iOS, Android, Web)
-- **Customizable**: Can override styles while maintaining base typography
-
-## Available Typography Variants
-- **Title**: Large heading text
-- **Heading1**: Primary heading
-- **Heading2**: Secondary heading
-- **Heading3**: Tertiary heading
-- **Subtitle1**: Large subtitle
-- **Subtitle2**: Standard subtitle
-- **Body1**: Primary body text
-- **Body2**: Secondary body text
-- **Body3**: Tertiary body text
-- **Body4**: Small body text
-- **Caption**: Small caption text
-- **Button**: Button text style
-
-## Usage
-\`\`\`tsx
-<Typography.Title>Page Title</Typography.Title>
-<Typography.Heading1>Main Heading</Typography.Heading1>
-<Typography.Body1>This is body text.</Typography.Body1>
-<Typography.Caption>Small caption text</Typography.Caption>
-\`\`\`
-
-### With Custom Styling
-\`\`\`tsx
-<Typography.Body1 style={{color: 'blue', fontWeight: 'bold'}}>
-  Custom styled text
-</Typography.Body1>
-\`\`\`
-        `,
-      },
-    },
-  },
-  argTypes: {},
-  decorators: [withThemeProvider],
-} satisfies Meta<typeof Typography.Title>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const AllTypography: Story = {
-  render: (args) => (
-    <ScrollView contentContainerStyle={{padding: 16}}>
-      {Object.entries(Typography).map(([key, Component]) => (
-        <View key={key} style={{marginBottom: 16}}>
-          <Component {...args}>
-            {key} {args.children}
-          </Component>
-        </View>
-      ))}
-    </ScrollView>
-  ),
-  args: {
-    children: 'Hello world',
-  },
-  argTypes: {
-    theme: {
-      control: 'select',
-      options: ['light', 'dark'],
-    },
-  },
-};
-
-export const CustomTitle: Story = {
-  args: {
-    children: 'Custom Color',
-    // @ts-ignore
-    theme: {
-      light: {
-        text: {
-          basic: 'blue',
-        },
-      },
-      dark: {
-        text: {
-          basic: 'skyblue',
-        },
-      },
-    } as ThemeParam,
-  },
-  decorators: [
-    (Story, context) =>
-      withThemeProvider(
-        Story,
-        context,
-        // @ts-ignore
-        context.args.theme as ThemeParam,
-      ),
-  ],
-};

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

@@ -1,58 +0,0 @@
-import React, {type ReactElement} from 'react';
-import {View} from 'react-native';
-import type {RenderAPI} from '@testing-library/react-native';
-import {render} from '@testing-library/react-native';
-
-import {createComponent} from '../../../../test/testUtils';
-import {Typography, TypographyInverted} from './Typography';
-import {ThemeProvider} from '../../../providers/ThemeProvider';
-
-let testingLib: RenderAPI;
-
-const Component = (): ReactElement =>
-  createComponent(
-    <View>
-      <Typography.Title />,
-      <Typography.Heading1 />,
-      <Typography.Heading2 />,
-      <Typography.Heading3 />,
-      <Typography.Body1 />,
-      <Typography.Body2 />,
-      <TypographyInverted.Title />
-      <TypographyInverted.Heading1 />
-      <TypographyInverted.Heading2 />
-      <TypographyInverted.Heading3 />
-      <TypographyInverted.Body1 />
-      <TypographyInverted.Body2 />
-    </View>,
-  );
-
-describe('[Typography]', () => {
-  it('should render without crashing', () => {
-    testingLib = render(<Component />);
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-
-  it('should render default theme', () => {
-    testingLib = render(Component());
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-
-  it('should render [dark] mode', () => {
-    testingLib = render(
-      <ThemeProvider initialThemeType="dark">
-        <Component />
-      </ThemeProvider>,
-    );
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-});

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);
-}