cpk-ui 0.5.4 → 0.7.0

package/src/components/uis/Styled/StyledComponents.tsx

@@ -1,217 +0,0 @@
-import {Animated} from 'react-native';
-import {styled, css} from 'kstyled';
-import {getTheme} from '../../../utils/theme';
-import {Typography} from '../Typography/Typography';
-
-export type ButtonType =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'danger'
-  | 'warning'
-  | 'info'
-  | 'light';
-
-export type SnackbarType =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'warning'
-  | 'info'
-  | 'danger';
-
-// ButtonWrapper Component
-export const ButtonWrapper = styled.View<{
-  $type?: ButtonType;
-  $outlined?: boolean;
-  $disabled?: boolean;
-  $loading?: boolean;
-}>`
-  border-width: ${({$outlined}) => ($outlined ? '1px' : undefined)};
-  background-color: ${({theme, $type, $outlined, $loading, $disabled}) => {
-    const resolvedTheme = getTheme(theme);
-
-    if ($loading) {
-      return $outlined ? undefined : resolvedTheme.button[$type ?? 'primary'].bg;
-    }
-    if ($disabled) {
-      return undefined;
-    }
-    return $outlined ? resolvedTheme.bg.basic : resolvedTheme.button[$type ?? 'primary'].bg;
-  }};
-  border-color: ${({theme, $type, $disabled}) => {
-    const resolvedTheme = getTheme(theme);
-
-    if ($disabled) {
-      return resolvedTheme.bg.basic;
-    }
-    return resolvedTheme.button[$type ?? 'primary'].bg;
-  }};
-`;
-
-// ButtonText Component
-export const ButtonText = styled(Typography.Body2)<{
-  $outlined?: boolean;
-  $type?: ButtonType | SnackbarType;
-  $disabled?: boolean;
-  $loading?: boolean;
-}>`
-  color: ${({theme, $outlined, $type, $disabled}) => {
-    const resolvedTheme = getTheme(theme);
-
-    if ($outlined) {
-      return resolvedTheme.text.basic;
-    }
-    if ($disabled) {
-      return resolvedTheme.text.disabled;
-    }
-    return resolvedTheme.button[$type ?? 'primary'].text;
-  }};
-`;
-
-// CheckboxWrapperOutlined Component
-export const CheckboxWrapperOutlined = styled.View<{
-  $type: ButtonType;
-  $disabled?: boolean;
-  $checked?: boolean;
-}>`
-  border-width: 1px;
-  border-color: ${({theme, $type, $disabled}) => {
-    const resolvedTheme = getTheme(theme);
-
-    if ($disabled) {
-      return resolvedTheme.bg.disabled;
-    }
-    return $type === 'light'
-      ? resolvedTheme.role.primary
-      : resolvedTheme.button[$type ?? 'primary'].bg;
-  }};
-`;
-
-// CheckboxWrapper Component
-export const CheckboxWrapper = styled.View<{
-  $type: ButtonType;
-  $disabled?: boolean;
-  $checked?: boolean;
-}>`
-  background-color: ${({theme, $checked, $type, $disabled}) => {
-    const resolvedTheme = getTheme(theme);
-
-    if ($disabled) {
-      return undefined;
-    }
-    if (!$checked) {
-      return resolvedTheme.bg.disabled;
-    }
-    return $type === 'light'
-      ? resolvedTheme.role.primary
-      : resolvedTheme.button[$type ?? 'primary'].bg;
-  }};
-`;
-
-// RadioButtonWrapper Component
-export const RadioButtonWrapper = styled.View<{
-  $type: ButtonType;
-  $selected?: boolean;
-  $disabled?: boolean;
-  $size?: 'small' | 'medium' | 'large' | number;
-}>`
-  width: ${({$size = 'medium'}) => {
-    if (typeof $size === 'number') return $size;
-    return $size === 'small' ? 16 : $size === 'large' ? 24 : 20;
-  }};
-  height: ${({$size = 'medium'}) => {
-    if (typeof $size === 'number') return $size;
-    return $size === 'small' ? 16 : $size === 'large' ? 24 : 20;
-  }};
-  border-radius: ${({$size = 'medium'}) => {
-    if (typeof $size === 'number') return $size / 2;
-    return $size === 'small' ? 8 : $size === 'large' ? 12 : 10;
-  }};
-  margin: 0px 6px;
-  justify-content: center;
-  align-items: center;
-  border-width: 1px;
-  border-color: ${({theme, $type, $selected, $disabled}) => {
-    const resolvedTheme = getTheme(theme);
-
-    if ($disabled) {
-      return resolvedTheme.bg.disabled;
-    }
-    const buttonColor = $type === 'light'
-      ? resolvedTheme.role.primary
-      : resolvedTheme.button[$type ?? 'primary'].bg;
-    return $selected ? buttonColor : resolvedTheme.text.basic;
-  }};
-  background-color: transparent;
-`;
-
-// RadioWrapper Component
-export const RadioWrapper = styled(Animated.View)<{
-  $type: ButtonType;
-  $disabled?: boolean;
-  $selected?: boolean;
-}>`
-  flex: 1;
-  align-self: stretch;
-  background-color: ${({theme, $type, $disabled, $selected}) => {
-    const resolvedTheme = getTheme(theme);
-
-    if ($disabled) {
-      return resolvedTheme.bg.disabled;
-    }
-    if (!$selected) {
-      return 'transparent';
-    }
-    return $type === 'light'
-      ? resolvedTheme.role.primary
-      : resolvedTheme.button[$type ?? 'primary'].bg;
-  }};
-`;
-
-// ColoredText Component
-export const ColoredText = styled(Typography.Body2)<{
-  $type: ButtonType;
-  $disabled?: boolean;
-  $selected?: boolean;
-  $size?: 'small' | 'medium' | 'large' | number;
-}>`
-  color: ${({theme, $selected, $type, $disabled}) => {
-    const resolvedTheme = getTheme(theme);
-
-    if ($disabled) {
-      return undefined;
-    }
-    if (!$selected) {
-      return resolvedTheme.text.basic;
-    }
-    return $type === 'light'
-      ? resolvedTheme.role.primary
-      : resolvedTheme.button[$type ?? 'primary'].bg;
-  }};
-  font-size: ${({$size = 'medium'}) => {
-    if (typeof $size === 'number') return $size * 0.7;
-    return $size === 'small' ? 12 : $size === 'large' ? 16 : 14;
-  }}px;
-`;
-
-// SnackbarWrapper Component
-export const SnackbarWrapper = styled.View<{
-  $type?: SnackbarType;
-  $checked?: boolean;
-}>`
-  background-color: ${({theme, $type}) => {
-    const resolvedTheme = getTheme(theme);
-
-    return !$type ? resolvedTheme.bg.disabled : resolvedTheme.button[$type ?? 'light'].bg;
-  }};
-  flex-direction: row;
-  text-align: left;
-  align-items: center;
-  align-self: center;
-  position: absolute;
-  font-size: 16px;
-  padding: 10px 20px;
-  bottom: 20px;
-  border-radius: 20px;
-`;

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

@@ -1,75 +0,0 @@
-import type {ComponentProps} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {SwitchToggle} from './SwitchToggle';
-import {withThemeProvider} from '../../../../.storybook/decorators';
-
-const meta = {
-  title: 'SwitchToggle',
-  component: (props) => <SwitchToggle {...props} />,
-  parameters: {
-    docs: {
-      description: {
-        component: `
-An animated SwitchToggle component with smooth transitions and proportional sizing.
-
-## Features
-- **Smooth Animations**: Slide and color transitions
-- **Proportional Sizing**: Automatically calculates container and circle dimensions
-- **Flexible Sizing**: Preset sizes and custom numeric values
-- **Icon Elements**: Add elements before or after the switch
-- **Custom Colors**: Support for custom active and inactive colors
-
-## Size Options
-- \`small\`: 24px height, 40px width
-- \`medium\`: 30px height, 56px width (default)
-- \`large\`: 40px height, 80px width
-- Custom number: Height = size, Width = size × 2, automatically calculated
-
-## Size Calculation
-When using a custom number, dimensions are calculated as:
-- **Container width**: \`size × 2\`
-- **Container height**: \`size\`
-- **Circle size**: \`size × 0.8\`
-- **Padding**: \`size × 0.2\`
-
-## Usage
-\`\`\`tsx
-<SwitchToggle
-  isOn={isToggled}
-  onPress={() => setIsToggled(!isToggled)}
-  size="medium"
-/>
-\`\`\`
-        `,
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'radio',
-      options: ['small', 'medium', 'large', 24, 30, 36, 42],
-      description: 'Switch size: "small" (24px), "medium" (30px), "large" (36px), or custom number with proportional scaling',
-    },
-    isOn: {
-      description: 'Whether the switch is in the on position',
-    },
-  },
-  decorators: [withThemeProvider],
-} satisfies Meta<typeof SwitchToggle>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-  args: {
-    isOn: false,
-    size: 'medium',
-  },
-  argTypes: {
-    theme: {
-      control: 'select',
-      options: ['light', 'dark'],
-    },
-  },
-};

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

@@ -1,105 +0,0 @@
-import React, {type ReactElement} from 'react';
-import {Text} from 'react-native';
-import type {RenderAPI} from '@testing-library/react-native';
-import {fireEvent, render, waitFor} from '@testing-library/react-native';
-import {createComponent} from '../../../../test/testUtils';
-import {SwitchToggle, type SwitchToggleSizeType} from './SwitchToggle';
-
-let testingLib: RenderAPI;
-
-describe('[SwitchToggle]', () => {
-  const handlePress = jest.fn();
-
-  beforeEach(() => {
-    handlePress.mockClear();
-  });
-
-  it('handles press event', async () => {
-    testingLib = render(
-      createComponent(<SwitchToggle isOn={false} onPress={handlePress} />),
-    );
-
-    const baseElement = await waitFor(() => testingLib.toJSON());
-    expect(baseElement).toBeTruthy();
-
-    const {getByRole} = testingLib;
-    fireEvent.press(getByRole('switch'));
-    expect(handlePress).toBeCalled();
-  });
-
-  const getSwitchToggle = ({isOn, size}: {isOn: boolean; size?: SwitchToggleSizeType}): ReactElement =>
-    createComponent(
-      <SwitchToggle
-        isOn={isOn}
-        size={size}
-        offElement={<Text>off</Text>}
-        onElement={<Text>on</Text>}
-        onPress={handlePress}
-        style={{padding: 6}}
-        styles={{
-          container: {paddingLeft: 6, paddingRight: 5},
-          onElementContainer: {padding: 4},
-          offElementContainer: {padding: 3},
-          circle: {padding: 2},
-          button: {padding: 1},
-          circleColorOff: 'red',
-          circleColorOn: 'blue',
-          backgroundColorOn: 'green',
-          backgroundColorOff: 'grey',
-        }}
-      />,
-    );
-
-  context('when switch toggle is on', () => {
-    it('renders as on state', async () => {
-      testingLib = render(createComponent(getSwitchToggle({isOn: true})));
-
-      const baseElement = await waitFor(() => testingLib.toJSON());
-      expect(baseElement).toBeTruthy();
-    });
-  });
-
-  context('when switch toggle is off', () => {
-    it('renders as off state', () => {
-      const component = createComponent(getSwitchToggle({isOn: false}));
-      testingLib = render(component);
-
-      const baseElement = testingLib.toJSON();
-      expect(baseElement).toBeTruthy();
-    });
-  });
-
-  describe('sizes', () => {
-    it('renders with small size', () => {
-      const component = createComponent(getSwitchToggle({size: 'small'}));
-      testingLib = render(component);
-
-      const baseElement = testingLib.toJSON();
-      expect(baseElement).toBeTruthy();
-    });
-
-    it('renders with medium size', () => {
-      const component = createComponent(getSwitchToggle({size: 'medium'}));
-      testingLib = render(component);
-
-      const baseElement = testingLib.toJSON();
-      expect(baseElement).toBeTruthy();
-    });
-
-    it('renders with large size', () => {
-      const component = createComponent(getSwitchToggle({size: 'large'}));
-      testingLib = render(component);
-
-      const baseElement = testingLib.toJSON();
-      expect(baseElement).toBeTruthy();
-    });
-
-    it('renders with custom numeric size', () => {
-      const component = createComponent(getSwitchToggle({size: 28}));
-      testingLib = render(component);
-
-      const baseElement = testingLib.toJSON();
-      expect(baseElement).toBeTruthy();
-    });
-  });
-});

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

@@ -1,305 +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;
-};
-
-// 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,
-}: 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
-      accessibilityRole="switch"
-      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;