cpk-ui 0.5.5 → 0.7.0

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

@@ -1,274 +0,0 @@
-import * as React from 'react';
-import {type ReactElement} from 'react';
-import {View, Text} from 'react-native';
-import type {RenderAPI} from '@testing-library/react-native';
-import {fireEvent, render, waitFor} from '@testing-library/react-native';
-
-import {createComponent, createTestProps} from '../../../../test/testUtils';
-import {type SegmentedControlColorType, SegmentedControl} from './SegmentedControl';
-import {Typography} from '../Typography/Typography';
-
-let props: any;
-let component: ReactElement;
-let testingLib: RenderAPI;
-
-const values = [
-  {value: 'day', text: 'Day'},
-  {value: 'week', text: 'Week'},
-  {value: 'month', text: 'Month'},
-];
-
-describe('[SegmentedControl] render', () => {
-  it('should render without crashing', async () => {
-    props = createTestProps({
-      selectedValue: 'day',
-      onValueChange: (value: string | number) => (props.selectedValue = value),
-    });
-
-    component = createComponent(
-      <View>
-        <SegmentedControl
-          values={values}
-          onValueChange={props.onValueChange}
-          selectedValue={props.selectedValue}
-        />
-      </View>,
-    );
-
-    testingLib = render(component);
-
-    const baseElement = await waitFor(() => testingLib.toJSON());
-    expect(baseElement).toBeTruthy();
-  });
-
-  it('should trigger `onValueChange` and change `selectedValue` props', () => {
-    props = createTestProps({
-      selectedValue: 'day',
-      onValueChange: (value: string | number) => (props.selectedValue = value),
-    });
-
-    component = createComponent(
-      <View>
-        <SegmentedControl
-          values={values}
-          onValueChange={props.onValueChange}
-          selectedValue={props.selectedValue}
-        />
-      </View>,
-    );
-
-    testingLib = render(component);
-
-    const secondOption = testingLib.getByTestId('segment-1');
-    expect(props.selectedValue).toEqual('day');
-
-    fireEvent.press(secondOption);
-    expect(props.selectedValue).toEqual('week');
-  });
-
-  it('should not trigger `onValueChange` when disabled', () => {
-    props = createTestProps({
-      selectedValue: 'day',
-      onValueChange: jest.fn(),
-    });
-
-    component = createComponent(
-      <View>
-        <SegmentedControl
-          values={values}
-          disabled={true}
-          onValueChange={props.onValueChange}
-          selectedValue={props.selectedValue}
-        />
-      </View>,
-    );
-
-    testingLib = render(component);
-
-    const secondOption = testingLib.getByTestId('segment-1');
-    fireEvent.press(secondOption);
-
-    expect(props.onValueChange).not.toHaveBeenCalled();
-  });
-});
-
-describe('[SegmentedControl] colors', () => {
-  const colors = [
-    'primary',
-    'secondary',
-    'success',
-    'info',
-    'warning',
-    'danger',
-    'light',
-  ];
-
-  it('should render all colors', async () => {
-    component = createComponent(
-      <View>
-        {colors.map((color) => {
-          return (
-            <View key={color} style={{marginTop: 24}}>
-              <SegmentedControl
-                color={color as SegmentedControlColorType}
-                values={values}
-                selectedValue="day"
-              />
-            </View>
-          );
-        })}
-      </View>,
-    );
-
-    testingLib = render(component);
-
-    const baseElement = await waitFor(() => testingLib.toJSON());
-    expect(baseElement).toBeTruthy();
-  });
-});
-
-describe('[SegmentedControl] sizes', () => {
-  it('should render with small size', async () => {
-    component = createComponent(
-      <SegmentedControl
-        values={values}
-        selectedValue="day"
-        size="small"
-      />,
-    );
-
-    testingLib = render(component);
-
-    const baseElement = await waitFor(() => testingLib.toJSON());
-    expect(baseElement).toBeTruthy();
-  });
-
-  it('should render with medium size', async () => {
-    component = createComponent(
-      <SegmentedControl
-        values={values}
-        selectedValue="day"
-        size="medium"
-      />,
-    );
-
-    testingLib = render(component);
-
-    const baseElement = await waitFor(() => testingLib.toJSON());
-    expect(baseElement).toBeTruthy();
-  });
-
-  it('should render with large size', async () => {
-    component = createComponent(
-      <SegmentedControl
-        values={values}
-        selectedValue="day"
-        size="large"
-      />,
-    );
-
-    testingLib = render(component);
-
-    const baseElement = await waitFor(() => testingLib.toJSON());
-    expect(baseElement).toBeTruthy();
-  });
-
-  it('should render with custom numeric size', async () => {
-    component = createComponent(
-      <SegmentedControl
-        values={values}
-        selectedValue="day"
-        size={28}
-      />,
-    );
-
-    testingLib = render(component);
-
-    const baseElement = await waitFor(() => testingLib.toJSON());
-    expect(baseElement).toBeTruthy();
-  });
-});
-
-describe('[SegmentedControl] with different data lengths', () => {
-  it('should render with 2 segments', async () => {
-    const twoSegments = [
-      {value: 'first', text: 'First'},
-      {value: 'second', text: 'Second'},
-    ];
-    component = createComponent(
-      <SegmentedControl
-        values={twoSegments}
-        selectedValue="first"
-      />,
-    );
-
-    testingLib = render(component);
-
-    const baseElement = await waitFor(() => testingLib.toJSON());
-    expect(baseElement).toBeTruthy();
-    expect(testingLib.getByTestId('segment-0')).toBeTruthy();
-    expect(testingLib.getByTestId('segment-1')).toBeTruthy();
-  });
-
-  it('should render with 4 segments', async () => {
-    const fourSegments = [
-      {value: 1, text: 'One'},
-      {value: 2, text: 'Two'},
-      {value: 3, text: 'Three'},
-      {value: 4, text: 'Four'},
-    ];
-    component = createComponent(
-      <SegmentedControl
-        values={fourSegments}
-        selectedValue={1}
-      />,
-    );
-
-    testingLib = render(component);
-
-    const baseElement = await waitFor(() => testingLib.toJSON());
-    expect(baseElement).toBeTruthy();
-    expect(testingLib.getByTestId('segment-0')).toBeTruthy();
-    expect(testingLib.getByTestId('segment-1')).toBeTruthy();
-    expect(testingLib.getByTestId('segment-2')).toBeTruthy();
-    expect(testingLib.getByTestId('segment-3')).toBeTruthy();
-  });
-});
-
-describe('[SegmentedControl] custom borderRadius', () => {
-  it('should render with custom border radius', async () => {
-    component = createComponent(
-      <SegmentedControl
-        borderRadius={16}
-        values={values}
-        selectedValue="day"
-      />,
-    );
-
-    testingLib = render(component);
-
-    const baseElement = await waitFor(() => testingLib.toJSON());
-    expect(baseElement).toBeTruthy();
-  });
-});
-
-describe('[SegmentedControl] with ReactElement text', () => {
-  it('should render with React elements as text', async () => {
-    const valuesWithElements = [
-      {value: 'grid', text: <View><Text>Grid</Text></View>},
-      {value: 'list', text: <View><Text>List</Text></View>},
-    ];
-
-    component = createComponent(
-      <SegmentedControl
-        values={valuesWithElements}
-        selectedValue="grid"
-      />,
-    );
-
-    testingLib = render(component);
-
-    const baseElement = await waitFor(() => testingLib.toJSON());
-    expect(baseElement).toBeTruthy();
-  });
-});

package/src/components/uis/SegmentedControl/SegmentedControl.tsx

@@ -1,232 +0,0 @@
-import React, {useCallback, useMemo, type ReactElement} from 'react';
-import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
-import {TouchableOpacity} from 'react-native';
-import {styled, css} from 'kstyled';
-
-import {useTheme} from '../../../providers/ThemeProvider';
-import {Typography} from '../Typography/Typography';
-import type {CpkTheme} from '../../../utils/theme';
-
-export type SegmentedControlSizeType = 'small' | 'medium' | 'large' | number;
-export type SegmentedControlColorType =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'danger'
-  | 'warning'
-  | 'info'
-  | 'light';
-
-export type SegmentedControlItem = {
-  value: string | number;
-  text: string | ReactElement;
-};
-
-type Styles = {
-  container?: StyleProp<ViewStyle>;
-  segment?: StyleProp<ViewStyle>;
-  selectedSegment?: StyleProp<ViewStyle>;
-  text?: StyleProp<TextStyle>;
-  selectedText?: StyleProp<TextStyle>;
-};
-
-export type SegmentedControlProps = {
-  testID?: string;
-  values: SegmentedControlItem[];
-  selectedValue: string | number;
-  onValueChange?: (value: string | number) => void;
-  color?: SegmentedControlColorType;
-  size?: SegmentedControlSizeType;
-  disabled?: boolean;
-  style?: StyleProp<ViewStyle>;
-  styles?: Styles;
-  borderRadius?: number;
-};
-
-const Container = styled.View`
-  overflow: hidden;
-`;
-
-// Calculate styles based on theme and props
-const calculateStyles = ({
-  theme,
-  color,
-  size,
-  borderRadius,
-  styles,
-}: {
-  theme: CpkTheme;
-  color: SegmentedControlColorType;
-  size: SegmentedControlSizeType;
-  borderRadius: number;
-  styles?: Styles;
-}) => {
-  const padding =
-    typeof size === 'number'
-      ? `${size * 0.4}px ${size * 0.8}px`
-      : size === 'large'
-        ? '12px 16px'
-        : size === 'medium'
-          ? '8px 12px'
-          : size === 'small'
-            ? '6px 8px'
-            : '8px 12px';
-
-  return {
-    wrapper: [
-      css`
-        flex-direction: row;
-        background-color: ${theme.bg.paper};
-        border-top-color: ${theme.bg.disabled};
-        border-bottom-color: ${theme.bg.disabled};
-        border-left-color: ${theme.bg.disabled};
-        border-right-color: ${theme.bg.disabled};
-        border-width: 1px;
-        border-radius: ${borderRadius}px;
-      `,
-    ],
-    container: styles?.container,
-    segment: [
-      css`
-        flex: 1;
-        align-items: center;
-        justify-content: center;
-        padding: ${padding};
-        background-color: transparent;
-      `,
-      styles?.segment,
-    ],
-    selectedSegment: [
-      css`
-        background-color: ${theme.button[color].bg};
-      `,
-      styles?.selectedSegment,
-    ],
-    text: [
-      css`
-        color: ${theme.text.basic};
-      `,
-      styles?.text,
-    ],
-    selectedText: [
-      css`
-        color: ${theme.button[color].text};
-        font-weight: 600;
-      `,
-      styles?.selectedText,
-    ],
-  };
-};
-
-function SegmentedControlContainer({
-  testID,
-  values,
-  selectedValue,
-  onValueChange,
-  color = 'primary',
-  size = 'medium',
-  disabled = false,
-  style,
-  styles,
-  borderRadius = 8,
-}: SegmentedControlProps): ReactElement {
-  const {theme} = useTheme();
-
-  // Memoize styles calculation
-  const compositeStyles = useMemo(
-    () =>
-      calculateStyles({
-        theme,
-        color,
-        size,
-        borderRadius,
-        styles,
-      }),
-    [theme, color, size, borderRadius, styles],
-  );
-
-  // Memoize segment press handler
-  const handlePress = useCallback(
-    (value: string | number) => {
-      if (!disabled) {
-        onValueChange?.(value);
-      }
-    },
-    [disabled, onValueChange],
-  );
-
-  // Memoize segments rendering
-  const segments = useMemo(
-    () => {
-      const cornerRadius = Math.max(borderRadius - 1, 0);
-
-      return values.map((item: SegmentedControlItem, index: number) => {
-        const isSelected = selectedValue === item.value;
-        const isFirst = index === 0;
-        const isLast = index === values.length - 1;
-
-        return (
-          <TouchableOpacity
-            key={`segment-${index}`}
-            testID={`segment-${index}`}
-            accessibilityLabel={typeof item.text === 'string' ? item.text : undefined}
-            accessibilityRole="button"
-            accessibilityState={{selected: isSelected}}
-            activeOpacity={0.7}
-            disabled={disabled}
-            onPress={() => handlePress(item.value)}
-            style={[
-              compositeStyles.segment,
-              isSelected && compositeStyles.selectedSegment,
-              {
-                borderTopLeftRadius: isFirst ? cornerRadius : 0,
-                borderBottomLeftRadius: isFirst ? cornerRadius : 0,
-                borderTopRightRadius: isLast ? cornerRadius : 0,
-                borderBottomRightRadius: isLast ? cornerRadius : 0,
-                borderRightWidth: isLast ? 0 : 1,
-                borderRightColor: theme.bg.disabled,
-              },
-            ]}
-          >
-            {typeof item.text === 'string' ? (
-              <Typography.Body2
-                style={[
-                  compositeStyles.text,
-                  isSelected && compositeStyles.selectedText,
-                ]}
-              >
-                {item.text}
-              </Typography.Body2>
-            ) : (
-              item.text
-            )}
-          </TouchableOpacity>
-        );
-      });
-    },
-    [
-      values,
-      selectedValue,
-      disabled,
-      handlePress,
-      compositeStyles,
-      borderRadius,
-      theme.bg.disabled,
-    ],
-  );
-
-  return (
-    <Container style={style} testID={testID}>
-      <Container style={[compositeStyles.wrapper, compositeStyles.container]}>
-        {segments}
-      </Container>
-    </Container>
-  );
-}
-
-// Export memoized component for better performance
-export const SegmentedControl = React.memo(
-  SegmentedControlContainer,
-);
-
-export default SegmentedControl;

package/src/components/uis/StatusbarBrightness/StatusBarBrightness.test.tsx

@@ -1,41 +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 StatusBarBrightness from './StatusBarBrightness';
-import {ThemeProvider} from '../../../providers/ThemeProvider';
-
-let testingLib: RenderAPI;
-
-const Component = (): ReactElement =>
-  createComponent(
-    <View>
-      <StatusBarBrightness />
-    </View>,
-  );
-
-describe('[StatusBarBrightness]', () => {
-  it('should render without crashing', () => {
-    testingLib = render(Component());
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-
-  it('should render [dark] mode', () => {
-    testingLib = render(
-      <ThemeProvider initialThemeType="dark">
-        <View>
-          <StatusBarBrightness />
-        </View>
-      </ThemeProvider>,
-    );
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-});

package/src/components/uis/StatusbarBrightness/StatusBarBrightness.tsx

@@ -1,26 +0,0 @@
-import React, {useMemo, type ReactElement} from 'react';
-import type {StatusBarStyle} from 'react-native';
-import {StatusBar} from 'react-native';
-import {useTheme} from '../../../providers/ThemeProvider';
-
-type StatusBarBrightnessProps = {
-  type?: StatusBarStyle;
-};
-
-function StatusBarBrightness({type}: StatusBarBrightnessProps): ReactElement {
-  const {themeType} = useTheme();
-
-  // Memoize status bar color calculation
-  const statusColor: StatusBarStyle = useMemo(() => {
-    return type
-      ? type
-      : themeType === 'light'
-        ? 'dark-content'
-        : 'light-content';
-  }, [type, themeType]);
-
-  return <StatusBar barStyle={statusColor} />;
-}
-
-// Export memoized component for better performance
-export default React.memo(StatusBarBrightness) as typeof StatusBarBrightness;