cpk-ui 0.5.5 → 0.7.0

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

@@ -1,188 +0,0 @@
-import {useState} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-
-import {withThemeProvider} from '../../../../.storybook/decorators';
-import {RadioButtonType, RadioGroup} from './RadioGroup';
-import type {RadioButtonSizeType} from './RadioButton';
-
-const meta = {
-  title: 'RadioGroup',
-  component: (props) => <RadioGroup {...props} />,
-  parameters: {
-    notes: `
-A flexible RadioGroup component that allows users to select a single option from a set of choices.
-
-## Features
-- **Flexible Sizing**: Supports preset sizes (small, medium, large) and custom numeric values
-- **Color Variants**: Multiple color options for different contexts
-- **Disabled State**: Can disable the entire radio group
-- **Optional Title**: Display an optional title above the radio group
-- **Label Positioning**: Position labels on the left or right of radio buttons
-
-## Size Options
-- \`small\`: 16px radio button
-- \`medium\`: 20px radio button (default)
-- \`large\`: 24px radio button
-- Custom number: Any pixel value (e.g., \`size={28}\`)
-
-## Usage
-\`\`\`tsx
-<RadioGroup
-  data={['Option 1', 'Option 2', 'Option 3']}
-  labels={['Option 1', 'Option 2', 'Option 3']}
-  selectedValue="Option 1"
-  selectValue={setSelectedValue}
-  size="medium"
-  type="primary"
-  title="Choose an option"
-/>
-\`\`\`
-        `,
-    docs: {
-      description: {
-        component: `
-A flexible RadioGroup component that allows users to select a single option from a set of choices.
-
-## Features
-- **Flexible Sizing**: Supports preset sizes (small, medium, large) and custom numeric values
-- **Color Variants**: Multiple color options for different contexts
-- **Disabled State**: Can disable the entire radio group
-- **Optional Title**: Display an optional title above the radio group
-- **Label Positioning**: Position labels on the left or right of radio buttons
-
-## Size Options
-- \`small\`: 16px radio button
-- \`medium\`: 20px radio button (default)
-- \`large\`: 24px radio button
-- Custom number: Any pixel value (e.g., \`size={28}\`)
-
-## Usage
-\`\`\`tsx
-<RadioGroup
-  data={['Option 1', 'Option 2', 'Option 3']}
-  labels={['Option 1', 'Option 2', 'Option 3']}
-  selectedValue="Option 1"
-  selectValue={setSelectedValue}
-  size="medium"
-  type="primary"
-  title="Choose an option"
-/>
-\`\`\`
-        `,
-      },
-    },
-  },
-  argTypes: {
-    type: {
-      control: 'select',
-      options: [
-        'danger',
-        'info',
-        'primary',
-        'light',
-        'secondary',
-        'success',
-        'warning',
-      ] as RadioButtonType[],
-      description: 'Color variant of the radio buttons',
-    },
-    size: {
-      control: 'radio',
-      options: ['small', 'medium', 'large', 16, 20, 24, 32],
-      description: 'Size can be "small" (16px), "medium" (20px), "large" (24px) or a custom number in pixels',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disables all radio buttons in the group',
-    },
-    title: {
-      description: 'Optional title displayed above the radio group',
-    },
-    labelPosition: {
-      description: 'Position of the label text relative to the radio button',
-    },
-  },
-  decorators: [withThemeProvider],
-} satisfies Meta<typeof RadioGroup>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-  render: (args) => {
-    const [selectedValue, setSelectedValue] = useState(args.selectedValue);
-
-    return (
-      <RadioGroup
-        data={args.data}
-        labels={args.labels}
-        title={args.title}
-        labelPosition={args.labelPosition}
-        type={args.type}
-        size={args.size}
-        disabled={args.disabled}
-        selectedValue={selectedValue}
-        selectValue={setSelectedValue}
-      />
-    );
-  },
-  args: {
-    theme: 'light',
-    data: ['Person', 'Animal', 'Bird', 'Other'],
-    labels: ['Person', 'Animal', 'Bird', 'Other'],
-    selectedValue: 'Person',
-    title: 'RadioGroup',
-    labelPosition: 'right',
-    type: 'primary',
-    size: 'medium',
-    disabled: false,
-  },
-  argTypes: {
-    theme: {
-      control: 'select',
-      options: ['light', 'dark'],
-    },
-  },
-};
-
-export const CustomSize: Story = {
-  render: (args) => {
-    const [selectedValue, setSelectedValue] = useState(args.selectedValue);
-
-    return (
-      <RadioGroup
-        data={args.data}
-        labels={args.labels}
-        title={args.title}
-        labelPosition={args.labelPosition}
-        type={args.type}
-        size={args.size}
-        disabled={args.disabled}
-        selectedValue={selectedValue}
-        selectValue={setSelectedValue}
-      />
-    );
-  },
-  args: {
-    theme: 'light',
-    data: ['Person', 'Animal', 'Bird', 'Other'],
-    labels: ['Person', 'Animal', 'Bird', 'Other'],
-    selectedValue: 'Person',
-    title: 'RadioGroup with Custom Size',
-    labelPosition: 'right',
-    type: 'primary',
-    size: 28,
-    disabled: false,
-  },
-  argTypes: {
-    theme: {
-      control: 'select',
-      options: ['light', 'dark'],
-    },
-    size: {
-      control: {type: 'number', min: 12, max: 48, step: 2},
-      description: 'Custom size in pixels',
-    },
-  },
-};

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

@@ -1,354 +0,0 @@
-import * as React from 'react';
-import {type ReactElement} from 'react';
-import {StyleSheet, View} from 'react-native';
-import type {RenderAPI} from '@testing-library/react-native';
-import {act, fireEvent, render, waitFor} from '@testing-library/react-native';
-
-import {createComponent, createTestProps} from '../../../../test/testUtils';
-import RadioButton from './RadioButton';
-import {type RadioButtonType, RadioGroup} from './RadioGroup';
-
-let props: any;
-let component: ReactElement;
-let testingLib: RenderAPI;
-
-const data = ['Person', 'Animal', 'Bird', 'Other'];
-
-describe('[RadioButton] render', () => {
-  it('should render without crashing', async () => {
-    props = createTestProps({
-      selectedValue: data[0],
-      selectValue: (value: string) => (props.selectedValue = value),
-    });
-
-    component = createComponent(
-      <View style={{flexDirection: 'row', marginTop: 24}}>
-        <RadioGroup<string>
-          data={data}
-          selectValue={props.selectValue}
-          selectedValue={props.selectedValue}
-          title="title"
-        />
-      </View>,
-    );
-
-    testingLib = render(component);
-
-    const baseElement = await waitFor(() => testingLib.toJSON());
-    expect(baseElement).toBeTruthy();
-  });
-
-  describe('label', () => {
-    it('should render `labels`', async () => {
-      props = createTestProps();
-
-      component = createComponent(
-        <View>
-          <View style={{flexDirection: 'row', marginTop: 24}}>
-            <RadioGroup<string>
-              data={data}
-              labels={data}
-              selectedValue={data[0]}
-              title="title"
-            />
-          </View>
-        </View>,
-      );
-
-      testingLib = render(component);
-
-      const baseElement = await waitFor(() => testingLib.toJSON());
-      expect(baseElement).toBeTruthy();
-    });
-
-    it('should render `labels` with left position', async () => {
-      props = createTestProps();
-
-      component = createComponent(
-        <View>
-          <View style={{flexDirection: 'row', marginTop: 24}}>
-            <RadioGroup<string>
-              data={data}
-              labelPosition="left"
-              labels={data}
-              selectedValue={data[0]}
-              title="title"
-            />
-          </View>
-        </View>,
-      );
-
-      testingLib = render(component);
-
-      const baseElement = await waitFor(() => testingLib.toJSON());
-      expect(baseElement).toBeTruthy();
-    });
-  });
-
-  it('should trigger `selectValue` and change `selectedValue` props', () => {
-    props = createTestProps({
-      selectedValue: data[0],
-      selectValue: (value: string) => (props.selectedValue = value),
-    });
-
-    component = createComponent(
-      <View style={{flexDirection: 'row', marginTop: 24}}>
-        <RadioGroup<string>
-          data={data}
-          selectValue={props.selectValue}
-          selectedValue={props.selectedValue}
-          title="title"
-        />
-      </View>,
-    );
-
-    testingLib = render(component);
-
-    const secondOption = testingLib.getByTestId('radio-1');
-    expect(props.selectedValue).toEqual(data[0]);
-
-    fireEvent.press(secondOption);
-    expect(props.selectedValue).toEqual(data[1]);
-  });
-});
-
-describe('[RadioButton]', () => {
-  it('should render and trigger `onLayout` and change `innerLayout`', () => {
-    props = createTestProps({
-      selectedValue: data[0],
-      selectValue: (value: string) => (props.selectedValue = value),
-    });
-
-    component = createComponent(
-      <View style={{flexDirection: 'row', marginTop: 24}}>
-        <RadioGroup<string>
-          data={data}
-          selectValue={props.selectValue}
-          selectedValue={props.selectedValue}
-          title="title"
-        />
-      </View>,
-    );
-
-    testingLib = render(component);
-
-    const circleRadio = testingLib.getByTestId('circle-radio-0');
-    // Get initial styles before layout
-    const initialStyle = StyleSheet.flatten(circleRadio.props.style) ?? {};
-    const initialMargin =
-      initialStyle.margin ??
-      initialStyle.marginTop ??
-      initialStyle.marginRight ??
-      initialStyle.marginBottom ??
-      initialStyle.marginLeft;
-
-    // Initially margin should be 0 since innerLayout is not set
-    expect(initialMargin).toBe(0);
-
-    act(() => {
-      circleRadio.props.onLayout({
-        nativeEvent: {
-          layout: {
-            width: 40,
-            height: 40,
-          },
-        },
-      });
-    });
-
-    // After layout, the styles should reflect the innerLayout values
-    // margin should be 2 and borderRadius should be width/2 = 20
-    const updatedStyle =
-      StyleSheet.flatten(testingLib.getByTestId('circle-radio-0').props.style) ??
-      {};
-    const updatedMargin =
-      updatedStyle.margin ??
-      updatedStyle.marginTop ??
-      updatedStyle.marginRight ??
-      updatedStyle.marginBottom ??
-      updatedStyle.marginLeft;
-
-    expect(updatedMargin).toBe(2);
-    expect(updatedStyle.borderRadius).toBe(20); // 40 / 2
-  });
-
-  describe('colors', () => {
-    const types = [
-      'primary',
-      'secondary',
-      'success',
-      'info',
-      'warning',
-      'danger',
-    ];
-
-    it('should render all colors', async () => {
-      component = createComponent(
-        <View>
-          {types.map((el) => {
-            return (
-              <View key={el} style={{flexDirection: 'row', marginTop: 24}}>
-                <RadioGroup<string>
-                  data={data}
-                  labels={data}
-                  selectedValue={data[0]}
-                  title={el}
-                  type={el as RadioButtonType}
-                />
-              </View>
-            );
-          })}
-        </View>,
-      );
-
-      testingLib = render(component);
-
-      const baseElement = await waitFor(() => testingLib.toJSON());
-      expect(baseElement).toBeTruthy();
-    });
-
-    it('should render `disabled color', async () => {
-      component = createComponent(
-        <RadioButton disabled={true} label="label" />,
-      );
-
-      testingLib = render(component);
-
-      const baseElement = await waitFor(() => testingLib.toJSON());
-      expect(baseElement).toBeTruthy();
-    });
-  });
-
-  describe('sizes', () => {
-    it('should render with small size', async () => {
-      component = createComponent(
-        <RadioGroup<string>
-          data={data}
-          labels={data}
-          selectedValue={data[0]}
-          size="small"
-        />,
-      );
-
-      testingLib = render(component);
-
-      const baseElement = await waitFor(() => testingLib.toJSON());
-      expect(baseElement).toBeTruthy();
-    });
-
-    it('should render with medium size', async () => {
-      component = createComponent(
-        <RadioGroup<string>
-          data={data}
-          labels={data}
-          selectedValue={data[0]}
-          size="medium"
-        />,
-      );
-
-      testingLib = render(component);
-
-      const baseElement = await waitFor(() => testingLib.toJSON());
-      expect(baseElement).toBeTruthy();
-    });
-
-    it('should render with large size', async () => {
-      component = createComponent(
-        <RadioGroup<string>
-          data={data}
-          labels={data}
-          selectedValue={data[0]}
-          size="large"
-        />,
-      );
-
-      testingLib = render(component);
-
-      const baseElement = await waitFor(() => testingLib.toJSON());
-      expect(baseElement).toBeTruthy();
-    });
-
-    it('should render with custom numeric size', async () => {
-      component = createComponent(
-        <RadioGroup<string>
-          data={data}
-          labels={data}
-          selectedValue={data[0]}
-          size={24}
-        />,
-      );
-
-      testingLib = render(component);
-
-      const baseElement = await waitFor(() => testingLib.toJSON());
-      expect(baseElement).toBeTruthy();
-    });
-  });
-
-  describe('accessibility', () => {
-    it('should have accessibilityRole="radio" on RadioButton', async () => {
-      component = createComponent(
-        <RadioButton label="Option 1" testID="radio-a11y" />,
-      );
-
-      testingLib = render(component);
-
-      const radioButton = testingLib.getByTestId('radio-a11y');
-      expect(radioButton.props.accessibilityRole).toBe('radio');
-    });
-
-    it('should use label as default accessibilityLabel', async () => {
-      component = createComponent(
-        <RadioButton label="Option 1" testID="radio-a11y" />,
-      );
-
-      testingLib = render(component);
-
-      const radioButton = testingLib.getByTestId('radio-a11y');
-      expect(radioButton.props.accessibilityLabel).toBe('Option 1');
-    });
-
-    it('should use custom accessibilityLabel when provided', async () => {
-      component = createComponent(
-        <RadioButton
-          label="Option 1"
-          testID="radio-a11y"
-          accessibilityLabel="Select option one"
-        />,
-      );
-
-      testingLib = render(component);
-
-      const radioButton = testingLib.getByTestId('radio-a11y');
-      expect(radioButton.props.accessibilityLabel).toBe('Select option one');
-    });
-
-    it('should have accessibilityState with selected=true when selected', async () => {
-      component = createComponent(
-        <RadioButton label="Option 1" testID="radio-a11y" selected={true} />,
-      );
-
-      testingLib = render(component);
-
-      const radioButton = testingLib.getByTestId('radio-a11y');
-      expect(radioButton.props.accessibilityState).toEqual({
-        selected: true,
-        disabled: false,
-      });
-    });
-
-    it('should have accessibilityState with disabled=true when disabled', async () => {
-      component = createComponent(
-        <RadioButton label="Option 1" testID="radio-a11y" disabled={true} />,
-      );
-
-      testingLib = render(component);
-
-      const radioButton = testingLib.getByTestId('radio-a11y');
-      expect(radioButton.props.accessibilityState).toEqual({
-        selected: undefined,
-        disabled: true,
-      });
-    });
-  });
-});

package/src/components/uis/RadioGroup/RadioGroup.tsx

@@ -1,109 +0,0 @@
-import React, {useCallback, useMemo, type ReactElement} from 'react';
-import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
-import {View} from 'react-native';
-import {styled} from 'kstyled';
-
-import type {RadioButtonProps, RadioButtonStyles, RadioButtonSizeType} from './RadioButton';
-import RadioButtonComp from './RadioButton';
-import {Typography} from '../Typography/Typography';
-
-type Styles = {
-  container?: StyleProp<ViewStyle>;
-  title?: StyleProp<TextStyle>;
-  radio?: StyleProp<ViewStyle>;
-  radioStyles?: RadioButtonStyles;
-};
-
-export type RadioButtonType =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'danger'
-  | 'warning'
-  | 'info'
-  | 'light';
-
-type Props<T> = {
-  title?: string;
-  data: T[];
-  selectedValue: T;
-  selectValue?: (item: T) => void;
-  type?: RadioButtonType;
-  size?: RadioButtonSizeType;
-  disabled?: boolean;
-  style?: StyleProp<ViewStyle>;
-  styles?: Styles;
-  labels?: string[];
-  radioType?: Omit<RadioButtonProps, 'type' | 'size' | 'disabled'>;
-  labelPosition?: 'left' | 'right';
-};
-
-const Container = styled.View`
-  flex-direction: column;
-  justify-content: center;
-`;
-
-const Content = styled.View`
-  flex-direction: row;
-`;
-
-function RadioGroupContainer<T>({
-  title,
-  data,
-  selectedValue,
-  selectValue,
-  style,
-  styles,
-  type,
-  size = 'medium',
-  disabled = false,
-  labels,
-  labelPosition,
-  radioType,
-}: Omit<Props<T>, 'selected'>): ReactElement {
-  // Memoize title spacer to avoid re-creating View
-  const titleSpacer = useMemo(() =>
-    title ? <View style={{height: 8}} /> : null,
-    [title]
-  );
-
-  // Memoize radio buttons to prevent unnecessary re-renders
-  const radioButtons = useMemo(() =>
-    data.map((datum, i) => {
-      const handlePress = () => !disabled && selectValue?.(datum);
-
-      return (
-        <RadioButtonComp
-          key={`radio-${i}`}
-          testID={`radio-${i}`}
-          {...radioType}
-          label={labels?.[i] || ''}
-          labelPosition={labelPosition}
-          onPress={handlePress}
-          selected={selectedValue === datum}
-          style={styles?.radio}
-          styles={styles?.radioStyles}
-          type={type}
-          size={size}
-          disabled={disabled}
-        />
-      );
-    }),
-    [data, selectedValue, selectValue, labels, labelPosition, radioType, styles?.radio, styles?.radioStyles, type, size, disabled]
-  );
-
-  return (
-    <Container style={style}>
-      {title ? <Typography.Heading3 style={styles?.title}>{title}</Typography.Heading3> : null}
-      {titleSpacer}
-      <Content style={styles?.container}>
-        {radioButtons}
-      </Content>
-    </Container>
-  );
-}
-
-// Export memoized component for better performance
-export const RadioGroup = React.memo(RadioGroupContainer) as typeof RadioGroupContainer;
-
-export const RadioButton = RadioButtonComp;