cpk-ui 0.5.5 → 0.7.0

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

@@ -1,216 +0,0 @@
-import {type ComponentProps} from 'react';
-import {Text} from 'react-native';
-import {css} from 'kstyled';
-import type {Meta, StoryObj} from '@storybook/react';
-
-import {withThemeProvider} from '../../../../.storybook/decorators';
-import {Checkbox, CheckboxColor} from './Checkbox';
-import {Typography} from '../Typography/Typography';
-
-const colors: CheckboxColor[] = [
-  'primary',
-  'success',
-  'info',
-  'warning',
-  'danger',
-  'secondary',
-];
-
-const meta = {
-  title: 'Checkbox',
-  component: (props) => <Checkbox {...props} />,
-  parameters: {
-    notes: `
-An animated Checkbox component with smooth transitions and flexible sizing options.
-
-## Features
-- **Smooth Animations**: Spring-based fade and scale animations
-- **Flexible Sizing**: Preset sizes and custom numeric values
-- **Color Variants**: Multiple color options for different contexts
-- **Disabled State**: Can disable checkbox interaction
-- **Icon Elements**: Add elements before or after the checkbox
-- **Optimized Performance**: Memoized for better performance
-
-## Size Options
-- \`small\`: 16px checkbox
-- \`medium\`: 20px checkbox (default)
-- \`large\`: 24px checkbox
-- Custom number: Any pixel value (e.g., \`size={28}\`)
-
-## Animation Details
-The checkbox uses two simultaneous animations:
-- **Fade**: Opacity transition from 0 to 1
-- **Scale**: Size transition from 0.8 to 1.0
-
-## Usage
-
-### With String Text
-\`\`\`tsx
-<Checkbox
-  checked={isChecked}
-  onPress={() => setIsChecked(!isChecked)}
-  size="medium"
-  color="primary"
-  text="Accept terms"
-  direction="right"
-/>
-\`\`\`
-
-### With Custom Element
-\`\`\`tsx
-<Checkbox
-  checked={isChecked}
-  onPress={() => setIsChecked(!isChecked)}
-  size="large"
-  color="success"
-  text={<CustomComponent />}
-  direction="left"
-/>
-\`\`\`
-        `,
-    docs: {
-      description: {
-        component: `
-An animated Checkbox component with smooth transitions and flexible sizing options.
-
-## Features
-- **Smooth Animations**: Spring-based fade and scale animations
-- **Flexible Sizing**: Preset sizes and custom numeric values
-- **Color Variants**: Multiple color options for different contexts
-- **Disabled State**: Can disable checkbox interaction
-- **Icon Elements**: Add elements before or after the checkbox
-- **Optimized Performance**: Memoized for better performance
-
-## Size Options
-- \`small\`: 16px checkbox
-- \`medium\`: 20px checkbox (default)
-- \`large\`: 24px checkbox
-- Custom number: Any pixel value (e.g., \`size={28}\`)
-
-## Animation Details
-The checkbox uses two simultaneous animations:
-- **Fade**: Opacity transition from 0 to 1
-- **Scale**: Size transition from 0.8 to 1.0
-
-## Usage
-
-### With String Text
-\`\`\`tsx
-<Checkbox
-  checked={isChecked}
-  onPress={() => setIsChecked(!isChecked)}
-  size="medium"
-  color="primary"
-  text="Accept terms"
-  direction="right"
-/>
-\`\`\`
-
-### With Custom Element
-\`\`\`tsx
-<Checkbox
-  checked={isChecked}
-  onPress={() => setIsChecked(!isChecked)}
-  size="large"
-  color="success"
-  text={<CustomComponent />}
-  direction="left"
-/>
-\`\`\`
-        `,
-      },
-    },
-  },
-  argTypes: {
-    color: {
-      control: 'select',
-      options: colors,
-      description: 'Color variant of the checkbox',
-    },
-    size: {
-      control: 'radio',
-      options: ['small', 'medium', 'large', 16, 20, 24, 32],
-      description: 'Checkbox size: "small" (16px), "medium" (20px), "large" (24px), or custom number in pixels',
-    },
-    checked: {
-      defaultValue: false,
-      type: 'boolean',
-      description: 'Whether the checkbox is checked',
-    },
-    disabled: {
-      description: 'Disables checkbox interaction',
-    },
-    direction: {
-      control: 'radio',
-      options: ['left', 'right'],
-      description: 'Position of the text relative to the checkbox',
-    },
-    text: {
-      description: 'Text or custom element to display next to the checkbox',
-    },
-  },
-  decorators: [withThemeProvider],
-} satisfies Meta<typeof Checkbox>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-  args: {
-    color: 'primary',
-    size: 'medium',
-    text: 'Click Checkbox!',
-    direction: 'right',
-    checked: false,
-    onPress: () => {},
-  },
-  argTypes: {
-    theme: {
-      control: 'select',
-      options: ['light', 'dark'],
-    },
-  },
-};
-
-export const WithLeftText: Story = {
-  args: {
-    color: 'primary',
-    size: 'medium',
-    text: 'Accept terms and conditions',
-    direction: 'left',
-    checked: false,
-    onPress: () => {},
-  },
-  argTypes: {
-    theme: {
-      control: 'select',
-      options: ['light', 'dark'],
-    },
-  },
-};
-
-export const WithCustomElement: Story = {
-  args: {
-    color: 'success',
-    size: 'large',
-    text: (
-      <Typography.Body2
-        style={css`
-          font-weight: bold;
-        `}
-      >
-        Custom Element
-      </Typography.Body2>
-    ),
-    direction: 'right',
-    checked: true,
-    onPress: () => {},
-  },
-  argTypes: {
-    theme: {
-      control: 'select',
-      options: ['light', 'dark'],
-    },
-  },
-};

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

@@ -1,267 +0,0 @@
-import React, {type ReactElement} from 'react';
-import {Text, 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 {Checkbox, type CheckboxProps} from './Checkbox';
-import {light} from '../../../utils/colors';
-
-let testingLib: RenderAPI;
-
-const Component = (props?: CheckboxProps): ReactElement =>
-  createComponent(<Checkbox {...props} />);
-
-describe('[Checkbox]', () => {
-  it('should render without crashing', () => {
-    testingLib = render(Component());
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-
-  it('should render `disabled` button', () => {
-    testingLib = render(
-      Component({
-        disabled: true,
-      }),
-    );
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-
-  it('should render `startElement`', () => {
-    testingLib = render(
-      Component({
-        startElement: <View />,
-      }),
-    );
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-
-  it('should render `endElement`', () => {
-    testingLib = render(
-      Component({
-        endElement: <View />,
-      }),
-    );
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-
-  describe('colors', () => {
-    const colors = [
-      'primary',
-      'secondary',
-      'success',
-      'info',
-      'warning',
-      'danger',
-    ];
-
-    it('should render all colors', () => {
-      testingLib = render(
-        createComponent(
-          <View>
-            {colors.map((color) => (
-              <Checkbox
-                key={color}
-                checked={true}
-                color={color as any}
-              />
-            ))}
-          </View>,
-        ),
-      );
-
-      const json = testingLib.toJSON();
-      // $type is a transient prop used for styling only,
-      // so it's not accessible via props in tests
-      // Just verify the component renders correctly with all colors
-      expect(json).toBeTruthy();
-    });
-
-    it('should render with specific color type and verify checked state', () => {
-      testingLib = render(
-        Component({
-          color: 'success',
-          checked: true,
-        }),
-      );
-
-      const checkbox = testingLib.getByTestId('cpk-ui-checkbox');
-
-      // While we can't directly test transient props ($type, $checked),
-      // we can verify the component renders and has the testID
-      expect(checkbox).toBeTruthy();
-
-      // The checkbox wrapper receives $checked prop which affects its styling
-      // We can verify it's rendered in checked state by checking the component structure
-      expect(checkbox).toBeDefined();
-    });
-
-    it('should render unchecked state', () => {
-      testingLib = render(
-        Component({
-          color: 'primary',
-          checked: false,
-        }),
-      );
-
-      const checkbox = testingLib.getByTestId('cpk-ui-checkbox');
-      expect(checkbox).toBeTruthy();
-    });
-  });
-
-  describe('sizes', () => {
-    it('should render with small size', () => {
-      testingLib = render(
-        Component({
-          size: 'small',
-          checked: true,
-        }),
-      );
-
-      const checkbox = testingLib.getByTestId('cpk-ui-checkbox');
-      expect(checkbox).toBeTruthy();
-    });
-
-    it('should render with medium size', () => {
-      testingLib = render(
-        Component({
-          size: 'medium',
-          checked: true,
-        }),
-      );
-
-      const checkbox = testingLib.getByTestId('cpk-ui-checkbox');
-      expect(checkbox).toBeTruthy();
-    });
-
-    it('should render with large size', () => {
-      testingLib = render(
-        Component({
-          size: 'large',
-          checked: true,
-        }),
-      );
-
-      const checkbox = testingLib.getByTestId('cpk-ui-checkbox');
-      expect(checkbox).toBeTruthy();
-    });
-
-    it('should render with custom numeric size', () => {
-      testingLib = render(
-        Component({
-          size: 24,
-          checked: true,
-        }),
-      );
-
-      const checkbox = testingLib.getByTestId('cpk-ui-checkbox');
-      expect(checkbox).toBeTruthy();
-    });
-  });
-
-  describe('accessibility', () => {
-    it('should have accessibilityRole="checkbox"', () => {
-      testingLib = render(
-        Component({
-          text: 'Accept terms',
-        }),
-      );
-
-      const json = testingLib.toJSON();
-      expect(json).toBeTruthy();
-      // The root element should have accessibilityRole
-      expect((json as any).props.accessibilityRole).toBe('checkbox');
-    });
-
-    it('should use text as default accessibilityLabel', () => {
-      testingLib = render(
-        Component({
-          text: 'Accept terms',
-        }),
-      );
-
-      const json = testingLib.toJSON();
-      expect((json as any).props.accessibilityLabel).toBe('Accept terms');
-    });
-
-    it('should use custom accessibilityLabel when provided', () => {
-      testingLib = render(
-        Component({
-          text: 'Accept',
-          accessibilityLabel: 'Accept terms and conditions',
-        }),
-      );
-
-      const json = testingLib.toJSON();
-      expect((json as any).props.accessibilityLabel).toBe('Accept terms and conditions');
-    });
-
-    it('should have accessibilityState with checked=true when checked', () => {
-      testingLib = render(
-        Component({
-          text: 'Accept terms',
-          checked: true,
-        }),
-      );
-
-      const json = testingLib.toJSON();
-      expect((json as any).props.accessibilityState).toEqual({
-        checked: true,
-        disabled: false,
-      });
-    });
-
-    it('should have accessibilityState with checked=false when unchecked', () => {
-      testingLib = render(
-        Component({
-          text: 'Accept terms',
-          checked: false,
-        }),
-      );
-
-      const json = testingLib.toJSON();
-      expect((json as any).props.accessibilityState).toEqual({
-        checked: false,
-        disabled: false,
-      });
-    });
-
-    it('should have accessibilityState with disabled=true when disabled', () => {
-      testingLib = render(
-        Component({
-          text: 'Accept terms',
-          disabled: true,
-        }),
-      );
-
-      const json = testingLib.toJSON();
-      expect((json as any).props.accessibilityState).toEqual({
-        checked: false,
-        disabled: true,
-      });
-    });
-
-    it('should have undefined accessibilityLabel when text is ReactElement', () => {
-      testingLib = render(
-        Component({
-          text: <Text>Custom text</Text>,
-        }),
-      );
-
-      const json = testingLib.toJSON();
-      expect((json as any).props.accessibilityLabel).toBeUndefined();
-    });
-  });
-});

package/src/components/uis/Checkbox/Checkbox.tsx

@@ -1,225 +0,0 @@
-import React, {useCallback, useEffect, useMemo, useRef, type ReactElement} from 'react';
-import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
-import {Animated, Platform, TouchableOpacity, View} from 'react-native';
-import {styled, css} from 'kstyled';
-
-import {
-  CheckboxWrapper,
-  CheckboxWrapperOutlined,
-} from '../Styled/StyledComponents';
-import {Icon} from '../Icon/Icon';
-import {Typography} from '../Typography/Typography';
-import {useTheme} from '../../../providers/ThemeProvider';
-
-type Styles = {
-  container?: StyleProp<ViewStyle>;
-  checkbox?: StyleProp<ViewStyle>;
-  check?: ViewStyle;
-  text?: StyleProp<TextStyle>;
-};
-
-export type CheckboxColor =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'danger'
-  | 'warning'
-  | 'info';
-
-export type CheckboxSizeType = 'small' | 'medium' | 'large' | number;
-
-export interface CheckboxProps {
-  onPress?: () => void;
-  style?: StyleProp<ViewStyle>;
-  styles?: Styles;
-  color?: CheckboxColor;
-  size?: CheckboxSizeType;
-  disabled?: boolean;
-  checked?: boolean;
-  text?: string | ReactElement;
-  direction?: 'left' | 'right';
-  accessibilityLabel?: string;
-}
-
-const Container = styled(TouchableOpacity)`
-  flex-direction: row;
-  align-items: center;
-`;
-
-const StyledCheckboxOutlined = styled(CheckboxWrapperOutlined)`
-  border-width: 1px;
-  margin: 0 6px;
-
-  justify-content: center;
-  align-items: center;
-`;
-
-// Create animated version for checkbox that needs animation
-const AnimatedView = Animated.createAnimatedComponent(View);
-const AnimatedCheckbox = styled(AnimatedView)`
-  margin: 0 6px;
-
-  justify-content: center;
-  align-items: center;
-`;
-
-const StyledCheck = styled(Icon)<{$checked?: boolean}>`
-  font-weight: bold;
-  color: ${({theme, $checked}) => ($checked ? theme.bg.basic : 'transparent')};
-`;
-
-export function Checkbox({
-  style,
-  styles,
-  text,
-  direction = 'right',
-  color = 'primary',
-  size = 'medium',
-  disabled = false,
-  checked = false,
-  onPress,
-  accessibilityLabel,
-}: CheckboxProps): ReactElement {
-  const checkboxSize = typeof size === 'number'
-    ? size
-    : size === 'small'
-      ? 16
-      : size === 'large'
-        ? 24
-        : 20;
-
-  const textFontSize = typeof size === 'number'
-    ? size * 0.7
-    : size === 'small'
-      ? 12
-      : size === 'large'
-        ? 16
-        : 14;
-  // Separate animated values for fade and scale
-  const fadeAnim = useRef(new Animated.Value(checked ? 1 : 0)).current;
-  const scaleAnim = useRef(new Animated.Value(checked ? 1 : 0.8)).current; // Start from 0.8, not 0
-  const {theme} = useTheme();
-
-  // Memoize animation config
-  const animationConfig = useMemo(
-    () => ({
-      useNativeDriver: Platform.select({
-        web: false,
-        default: true,
-      }),
-    }),
-    [],
-  );
-
-  useEffect(() => {
-    Animated.parallel([
-      Animated.spring(fadeAnim, {
-        toValue: checked ? 1 : 0,
-        ...animationConfig,
-      }),
-      Animated.spring(scaleAnim, {
-        toValue: checked ? 1 : 0.8, // Scale to 0.8 when unchecked, not 0
-        ...animationConfig,
-      }),
-    ]).start();
-  }, [fadeAnim, scaleAnim, checked, animationConfig]);
-
-  // Memoize container styles
-  const containerStyles = useMemo(
-    () => [
-      css`
-        flex: 1;
-        padding: 6px 0;
-
-        flex-direction: ${direction === 'left' ? 'row-reverse' : 'row'};
-        column-gap: 2px;
-        align-items: center;
-      `,
-      styles?.container,
-    ],
-    [styles?.container, direction],
-  );
-
-  // Memoize checkbox size styles
-  const checkboxSizeStyles = useMemo(
-    () => ({
-      width: checkboxSize,
-      height: checkboxSize,
-    }),
-    [checkboxSize],
-  );
-
-  // Memoize animated styles
-  const animatedStyles = useMemo(
-    () => [
-      checkboxSizeStyles,
-      styles?.checkbox,
-      {
-        opacity: fadeAnim,
-        transform: [{scale: scaleAnim}],
-      },
-    ],
-    [checkboxSizeStyles, styles?.checkbox, fadeAnim, scaleAnim],
-  );
-
-  // Memoize text styles
-  const textStyles = useMemo(
-    () => [
-      css`
-        font-size: ${textFontSize}px;
-      `,
-      styles?.text,
-    ],
-    [textFontSize, styles?.text],
-  );
-
-  // Render text element
-  const TextElement = useMemo(() => {
-    if (!text) return null;
-
-    if (typeof text === 'string') {
-      return (
-        <Typography.Body2 style={textStyles}>
-          {text}
-        </Typography.Body2>
-      );
-    }
-
-    return text;
-  }, [text, textStyles]);
-
-  return (
-    <Container
-      accessibilityLabel={accessibilityLabel ?? (typeof text === 'string' ? text : undefined)}
-      accessibilityRole="checkbox"
-      accessibilityState={{checked, disabled}}
-      activeOpacity={0.9}
-      disabled={disabled}
-      onPress={onPress}
-      style={style}
-    >
-      <View style={containerStyles}>
-        <StyledCheckboxOutlined
-          $checked={checked}
-          $disabled={disabled}
-          style={[checkboxSizeStyles, styles?.checkbox]}
-          testID="cpk-ui-checkbox"
-          $type={color}
-        >
-          <AnimatedCheckbox style={animatedStyles}>
-            <StyledCheck
-              $checked={checked}
-              name="Check"
-              size={checkboxSize * 0.7}
-              style={styles?.check}
-            />
-          </AnimatedCheckbox>
-        </StyledCheckboxOutlined>
-        {TextElement}
-      </View>
-    </Container>
-  );
-}
-
-// Export memoized component for better performance
-export default React.memo(Checkbox) as typeof Checkbox;