cpk-ui 0.5.5 → 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,149 +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();
-    });
-  });
-
-  describe('accessibility', () => {
-    it('should have accessibilityRole="switch"', () => {
-      testingLib = render(
-        createComponent(<SwitchToggle isOn={false} onPress={handlePress} />),
-      );
-
-      const switchElement = testingLib.getByRole('switch');
-      expect(switchElement).toBeTruthy();
-    });
-
-    it('should have accessibilityState with checked=true when isOn', () => {
-      testingLib = render(
-        createComponent(<SwitchToggle isOn={true} onPress={handlePress} />),
-      );
-
-      const json = testingLib.toJSON();
-      expect((json as any).props.accessibilityState).toEqual({checked: true});
-    });
-
-    it('should have accessibilityState with checked=false when not isOn', () => {
-      testingLib = render(
-        createComponent(<SwitchToggle isOn={false} onPress={handlePress} />),
-      );
-
-      const json = testingLib.toJSON();
-      expect((json as any).props.accessibilityState).toEqual({checked: false});
-    });
-
-    it('should use custom accessibilityLabel when provided', () => {
-      testingLib = render(
-        createComponent(
-          <SwitchToggle
-            isOn={false}
-            onPress={handlePress}
-            accessibilityLabel="Toggle dark mode"
-          />,
-        ),
-      );
-
-      const json = testingLib.toJSON();
-      expect((json as any).props.accessibilityLabel).toBe('Toggle dark mode');
-    });
-  });
-});