cpk-ui 0.5.5 → 0.7.0

package/src/components/uis/SwitchToggle/SwitchToggle.tsx

@@ -1,309 +0,0 @@
-import React, {useCallback, useEffect, useMemo, useState, type ReactElement} from 'react';
-import type {StyleProp, ViewStyle} from 'react-native';
-import {Animated, TouchableOpacity, View} from 'react-native';
-import {styled} from 'kstyled';
-import {useTheme} from '../../../providers/ThemeProvider';
-
-// Metro cache workaround: Using explicit pattern until cache is cleared
-const AnimatedView = Animated.createAnimatedComponent(View);
-
-type Styles = {
-  container?: ViewStyle;
-  onElementContainer?: StyleProp<ViewStyle>;
-  offElementContainer?: StyleProp<ViewStyle>;
-  circle?: ViewStyle;
-  button?: StyleProp<ViewStyle>;
-  circleColorOff?: string;
-  circleColorOn?: string;
-  backgroundColorOn?: string;
-  backgroundColorOff?: string;
-};
-
-export type SwitchToggleSizeType = 'small' | 'medium' | 'large' | number;
-
-type Props = {
-  testID?: string;
-  size?: SwitchToggleSizeType;
-  isOn: boolean;
-  style?: StyleProp<ViewStyle>;
-  styles?: Styles;
-  duration?: number;
-  onElement?: any;
-  offElement?: any;
-  onPress?: () => void;
-  accessibilityLabel?: string;
-};
-
-// Using AnimatedView created above - functionally identical to styled(Animated.View)
-const AnimatedContainer = styled(AnimatedView)`
-  flex-direction: row;
-  align-items: center;
-`;
-
-const smallContainer: ViewStyle = {
-  width: 40,
-  height: 24,
-  borderRadius: 25,
-  padding: 5,
-};
-
-const smallCircle: ViewStyle = {
-  width: 16,
-  height: 16,
-  borderRadius: 8,
-};
-
-const mediumContainer: ViewStyle = {
-  width: 56,
-  height: 30,
-  borderRadius: 25,
-  padding: 5,
-};
-
-const mediumCircle: ViewStyle = {
-  width: 20,
-  height: 20,
-  borderRadius: 10,
-};
-
-const largeContainer: ViewStyle = {
-  width: 80,
-  height: 40,
-  borderRadius: 25,
-  padding: 5,
-};
-
-const largeCircle: ViewStyle = {
-  width: 32,
-  height: 32,
-  borderRadius: 16,
-};
-
-export function SwitchToggle({
-  testID,
-  isOn,
-  style,
-  styles,
-  duration = 300,
-  onElement,
-  size = 'medium',
-  offElement,
-  onPress,
-  accessibilityLabel,
-}: Props): ReactElement {
-  const {theme} = useTheme();
-
-  // Memoize size-based configurations
-  const sizeConfig = useMemo(() => {
-    if (typeof size === 'number') {
-      const containerConfig: ViewStyle = {
-        width: size * 1.87,
-        height: size,
-        borderRadius: size / 2,
-        padding: size * 0.17,
-      };
-      const circleConfig: ViewStyle = {
-        width: size * 0.67,
-        height: size * 0.67,
-        borderRadius: size / 3,
-      };
-      return {containerConfig, circleConfig};
-    }
-
-    const containerConfig =
-      size === 'large'
-        ? largeContainer
-        : size === 'small'
-        ? smallContainer
-        : mediumContainer;
-
-    const circleConfig =
-      size === 'large'
-        ? largeCircle
-        : size === 'small'
-        ? smallCircle
-        : mediumCircle;
-
-    return {containerConfig, circleConfig};
-  }, [size]);
-
-  // Memoize styles with defaults
-  const switchStyles = useMemo(() => {
-    const {
-      backgroundColorOn = theme.role.primary,
-      backgroundColorOff = theme.bg.disabled,
-      circleColorOn = theme.text.contrast,
-      circleColorOff = theme.text.basic,
-      container = sizeConfig.containerConfig,
-      circle = sizeConfig.circleConfig,
-      button,
-      onElementContainer,
-      offElementContainer,
-    } = styles ?? {};
-
-    return {
-      backgroundColorOn,
-      backgroundColorOff,
-      circleColorOn,
-      circleColorOff,
-      container,
-      circle,
-      button,
-      onElementContainer,
-      offElementContainer,
-    };
-  }, [styles, theme, sizeConfig]);
-
-  // Memoize padding calculations
-  const padding = useMemo(() => {
-    const paddingLeft =
-      (switchStyles.container.padding as number) ||
-      (switchStyles.container.paddingLeft as number) ||
-      0;
-    const paddingRight =
-      (switchStyles.container.padding as number) ||
-      (switchStyles.container.paddingRight as number) ||
-      0;
-    return {paddingLeft, paddingRight};
-  }, [switchStyles.container]);
-
-  // Memoize position calculations
-  const positions = useMemo(() => {
-    const circlePosXStart = 0;
-    const circlePosXEnd =
-      ((switchStyles.container.width ?? mediumContainer.width) as number) -
-      ((switchStyles.circle.width ?? mediumCircle.width) as number) -
-      (padding.paddingRight + padding.paddingLeft);
-
-    return {circlePosXStart, circlePosXEnd};
-  }, [
-    switchStyles.container.width,
-    switchStyles.circle.width,
-    padding,
-    mediumContainer,
-    smallContainer,
-    largeContainer,
-  ]);
-
-  const [animXValue] = useState(new Animated.Value(isOn ? 1 : 0));
-
-  // Memoize animation function
-  const runAnimation = useCallback(() => {
-    const option = {
-      fromValue: isOn ? 0 : 1,
-      toValue: isOn ? 1 : 0,
-      duration,
-      useNativeDriver: false,
-    };
-
-    Animated.timing(animXValue, option).start();
-  }, [animXValue, isOn, duration]);
-
-  useEffect(() => {
-    runAnimation();
-  }, [runAnimation]);
-
-  // Memoize animated components
-  const CircleButton = useMemo(
-    () => (
-      <Animated.View
-        style={[
-          switchStyles.circle,
-          {
-            backgroundColor: animXValue.interpolate({
-              inputRange: [0.5, 1],
-              outputRange: [
-                switchStyles.circleColorOff as string | number,
-                switchStyles.circleColorOn as string | number,
-              ] as string[] | number[],
-            }),
-          },
-          {
-            transform: [
-              {
-                translateX: animXValue.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [
-                    positions.circlePosXStart as string | number,
-                    positions.circlePosXEnd as string | number,
-                  ] as string[] | number[],
-                }),
-              },
-            ],
-          },
-          switchStyles.button,
-        ]}
-      />
-    ),
-    [switchStyles, animXValue, positions]
-  );
-
-  const OnElement = useMemo(
-    () => (
-      <Animated.View style={[{opacity: animXValue}, switchStyles.onElementContainer]}>
-        {onElement}
-      </Animated.View>
-    ),
-    [animXValue, switchStyles.onElementContainer, onElement]
-  );
-
-  const OffElement = useMemo(
-    () => (
-      <Animated.View
-        style={[
-          {
-            opacity: animXValue.interpolate({
-              inputRange: [0, 1],
-              outputRange: [1, 0],
-            }),
-          },
-          switchStyles.offElementContainer,
-        ]}
-      >
-        {offElement}
-      </Animated.View>
-    ),
-    [animXValue, switchStyles.offElementContainer, offElement]
-  );
-
-  // Memoize container styles
-  const containerStyles = useMemo(
-    () => [
-      switchStyles.container,
-      {
-        paddingLeft: padding.paddingLeft,
-        paddingRight: padding.paddingRight,
-      },
-      {
-        backgroundColor: animXValue.interpolate({
-          inputRange: [0, 1],
-          outputRange: [
-            switchStyles.backgroundColorOff as string | number,
-            switchStyles.backgroundColorOn as string | number,
-          ] as string[] | number[],
-        }),
-      },
-    ],
-    [switchStyles, padding, animXValue]
-  );
-
-  return (
-    <TouchableOpacity
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="switch"
-      accessibilityState={{checked: isOn}}
-      activeOpacity={0.8}
-      onPress={onPress}
-      style={style}
-      testID={testID}
-    >
-      <AnimatedContainer style={containerStyles}>
-        {isOn ? OnElement : OffElement}
-        {CircleButton}
-      </AnimatedContainer>
-    </TouchableOpacity>
-  );
-}
-
-// Export memoized component for better performance
-export default React.memo(SwitchToggle) as typeof SwitchToggle;

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