cpk-ui 0.5.5 → 0.7.0

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

@@ -1,204 +0,0 @@
-import React, {type ReactElement} from 'react';
-import type {RenderAPI} from '@testing-library/react-native';
-import {render} from '@testing-library/react-native';
-
-import {createComponent} from '../../../../test/testUtils';
-import type {IconButtonProps} from './IconButton';
-import {IconButton} from './IconButton';
-
-let testingLib: RenderAPI;
-
-jest.mock('react-native-web-hooks', () => ({
-  useHover: () => true,
-}));
-
-const Component = (props?: IconButtonProps): ReactElement =>
-  createComponent(<IconButton {...props} />);
-
-describe('[IconButton]', () => {
-  it('should render without crashing', () => {
-    testingLib = render(Component());
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-
-  it('should render `outlined` button', () => {
-    testingLib = render(
-      Component({
-        type: 'outlined',
-      }),
-    );
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-
-  describe('loading', () => {
-    it('should render `loading` button', () => {
-      testingLib = render(
-        Component({
-          loading: true,
-        }),
-      );
-
-      const json = testingLib.toJSON();
-
-      expect(json).toBeTruthy();
-    });
-
-    it('should render `disabled` button', () => {
-      testingLib = render(
-        Component({
-          loading: true,
-          disabled: true,
-        }),
-      );
-
-      const json = testingLib.toJSON();
-
-      expect(json).toBeTruthy();
-    });
-  });
-
-  describe('size', () => {
-    it('should renders large size', () => {
-      testingLib = render(
-        Component({
-          size: 'large',
-        }),
-      );
-
-      const json = testingLib.toJSON();
-
-      expect(json).toBeTruthy();
-    });
-
-    it('should renders small size', () => {
-      testingLib = render(
-        Component({
-          size: 'small',
-        }),
-      );
-
-      const json = testingLib.toJSON();
-
-      expect(json).toBeTruthy();
-    });
-  });
-
-  describe('type', () => {
-    it('should render color==="info"', () => {
-      testingLib = render(
-        Component({
-          color: 'info',
-        }),
-      );
-
-      const json = testingLib.toJSON();
-
-      expect(json).toBeTruthy();
-    });
-
-    it('should renders primary color', () => {
-      testingLib = render(
-        Component({
-          color: 'primary',
-        }),
-      );
-
-      const json = testingLib.toJSON();
-
-      expect(json).toBeTruthy();
-    });
-
-    it('should renders secondary color', () => {
-      testingLib = render(
-        Component({
-          color: 'secondary',
-        }),
-      );
-
-      const json = testingLib.toJSON();
-
-      expect(json).toBeTruthy();
-    });
-
-    it('should renders danger color', () => {
-      testingLib = render(
-        Component({
-          color: 'danger',
-        }),
-      );
-
-      const json = testingLib.toJSON();
-
-      expect(json).toBeTruthy();
-    });
-
-    it('should renders warning color', () => {
-      testingLib = render(
-        Component({
-          color: 'warning',
-        }),
-      );
-
-      const json = testingLib.toJSON();
-
-      expect(json).toBeTruthy();
-    });
-  });
-
-  it('should render `disabled` button', () => {
-    testingLib = render(
-      Component({
-        disabled: true,
-      }),
-    );
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-
-  describe('accessibility', () => {
-    it('should have accessibilityRole="button"', () => {
-      testingLib = render(
-        Component({
-          testID: 'a11y-icon-button',
-          icon: 'Plus',
-        }),
-      );
-
-      const button = testingLib.getByTestId('a11y-icon-button');
-      expect(button.props.accessibilityRole).toBe('button');
-    });
-
-    it('should use icon name as default accessibilityLabel', () => {
-      testingLib = render(
-        Component({
-          testID: 'a11y-icon-button',
-          icon: 'Plus',
-        }),
-      );
-
-      const button = testingLib.getByTestId('a11y-icon-button');
-      expect(button.props.accessibilityLabel).toBe('Plus');
-    });
-
-    it('should use custom accessibilityLabel when provided', () => {
-      testingLib = render(
-        Component({
-          testID: 'a11y-icon-button',
-          icon: 'Plus',
-          accessibilityLabel: 'Add new item',
-        }),
-      );
-
-      const button = testingLib.getByTestId('a11y-icon-button');
-      expect(button.props.accessibilityLabel).toBe('Add new item');
-    });
-  });
-});

package/src/components/uis/IconButton/IconButton.tsx

@@ -1,279 +0,0 @@
-import React, {useCallback, useMemo, useRef, type ReactElement} from 'react';
-import type {StyleProp, TouchableHighlightProps, ViewStyle} from 'react-native';
-import {Platform, TouchableHighlight, View} from 'react-native';
-import {useHover} from 'react-native-web-hooks';
-import {css} from 'kstyled';
-
-import type {IconName} from '../Icon/Icon';
-import {Icon} from '../Icon/Icon';
-import {LoadingIndicator} from '../LoadingIndicator/LoadingIndicator';
-import {CpkTheme, getTheme} from '../../../utils/theme';
-import {useTheme} from '../../../providers/ThemeProvider';
-import * as Haptics from 'expo-haptics';
-
-type Styles = {
-  container?: StyleProp<ViewStyle>;
-  icon?: StyleProp<ViewStyle>;
-  disabled?: StyleProp<ViewStyle>;
-  hovered?: StyleProp<ViewStyle>;
-};
-
-type ButtonType = 'text' | 'solid' | 'outlined';
-
-type ButtonColorType =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'danger'
-  | 'warning'
-  | 'info'
-  | 'light';
-
-type ButtonSizeType = 'small' | 'medium' | 'large' | number;
-
-// Memoized styles calculation function
-const ButtonStyles = ({
-  theme,
-  type,
-  color,
-  loading,
-  disabled,
-}: {
-  theme: CpkTheme;
-  type: ButtonType;
-  color: ButtonColorType;
-  loading?: boolean;
-  disabled?: boolean;
-}) => {
-  const isDisabled = disabled || loading;
-
-  let backgroundColor = theme.bg.basic;
-  let borderColor = 'transparent';
-  let iconColor = theme.text.basic;
-
-  if (type === 'solid') {
-    backgroundColor = isDisabled
-      ? theme.button.disabled.bg
-      : theme.button[color].bg;
-    borderColor = backgroundColor;
-  }
-
-  if (type === 'outlined') {
-    backgroundColor = isDisabled
-      ? theme.bg.disabled
-      : theme.bg.basic;
-    borderColor = isDisabled
-      ? theme.bg.disabled
-      : theme.button[color].bg;
-  }
-
-  if (type === 'solid' || color === 'light') {
-    iconColor = theme.button[color].text;
-  }
-
-  return {
-    backgroundColor,
-    borderColor,
-    borderWidth: type === 'outlined' ? 1 : 0,
-    iconColor,
-    disabledBackgroundColor:
-      type === 'solid' && !loading ? theme.button.disabled.bg : theme.bg.basic,
-    disabledBorderColor: theme.bg.disabled,
-    disabledTextColor: theme.button.disabled.text,
-  };
-};
-
-export type IconButtonProps = {
-  testID?: string;
-  type?: ButtonType;
-  color?: ButtonColorType;
-  size?: ButtonSizeType | number;
-  disabled?: boolean;
-  loading?: boolean;
-  loadingElement?: ReactElement;
-  icon?: IconName;
-  iconElement?: ReactElement;
-  style?: StyleProp<Omit<ViewStyle, 'borderRadius' | 'padding'>>;
-  styles?: Styles;
-  onPress?: TouchableHighlightProps['onPress'];
-  activeOpacity?: number;
-  touchableHighlightProps?: Omit<TouchableHighlightProps, 'onPress' | 'style'>;
-  hapticFeedback?: Haptics.ImpactFeedbackStyle;
-  accessibilityLabel?: string;
-};
-
-export function IconButton({
-  testID,
-  type = 'solid',
-  color = 'primary',
-  size = 'medium',
-  disabled,
-  loading = false,
-  loadingElement,
-  icon,
-  iconElement,
-  style,
-  styles,
-  onPress,
-  activeOpacity = 0.95,
-  touchableHighlightProps,
-  hapticFeedback,
-  accessibilityLabel,
-}: IconButtonProps): ReactElement {
-  const ref = useRef<React.ElementRef<typeof TouchableHighlight>>(null);
-  const hovered = useHover(ref);
-  const {theme} = useTheme();
-
-  // Memoize button styles
-  const buttonStylesConfig = useMemo(() => ButtonStyles({
-    theme,
-    type,
-    color,
-    loading,
-    disabled,
-  }), [theme, type, color, loading, disabled]);
-
-  // Memoize icon size calculation
-  const iconSize = useMemo(() => {
-    return size === 'large'
-      ? 32
-      : size === 'medium'
-        ? 24
-        : size === 'small'
-          ? 16
-          : size;
-  }, [size]);
-
-  // Memoize style strings
-  const borderRadiusStr = useMemo(() => '99px', []);
-  const borderWidthStr = useMemo(() => `${buttonStylesConfig.borderWidth}px`, [buttonStylesConfig.borderWidth]);
-
-  // Memoize composite styles
-  const compositeStyles: Styles = useMemo(() => ({
-    container: [
-      css`
-        background-color: ${buttonStylesConfig.backgroundColor};
-        border-color: ${buttonStylesConfig.borderColor};
-        border-width: ${borderWidthStr};
-        padding: 12px;
-      `,
-      styles?.container,
-    ],
-    icon: [
-      css`
-        color: ${buttonStylesConfig.iconColor};
-      `,
-      styles?.icon,
-    ],
-    disabled: [
-      css`
-        background-color: ${buttonStylesConfig.disabledBackgroundColor};
-        border-color: ${buttonStylesConfig.disabledBorderColor};
-      `,
-      styles?.disabled,
-    ],
-    hovered: [
-      {
-        shadowColor: theme.text.basic,
-        shadowOpacity: 0.24,
-        shadowRadius: 16,
-        elevation: 10,
-      },
-      styles?.hovered,
-    ],
-  }), [buttonStylesConfig, borderWidthStr, theme.text.basic, styles]);
-
-  // Memoize press handler
-  const handlePress = useCallback((e: any) => {
-    onPress?.(e);
-    if (hapticFeedback) {
-      Haptics.impactAsync(hapticFeedback);
-    }
-  }, [onPress, hapticFeedback]);
-
-  // Memoize loading view
-  const LoadingView = useMemo(() => 
-    loadingElement || (
-      <LoadingIndicator
-        color={theme.text.disabled}
-        size="small"
-        style={css`
-          justify-content: center;
-          align-items: center;
-          height: ${iconSize}px;
-          width: ${iconSize}px;
-        `}
-      />
-    ),
-    [loadingElement, theme.text.disabled, iconSize]
-  );
-
-  // Memoize icon view
-  const IconView = useMemo(() => 
-    iconElement || (
-      <Icon
-        color={buttonStylesConfig.iconColor}
-        name={icon || 'QuestBoxFill'}
-        size={iconSize}
-        style={compositeStyles?.icon}
-      />
-    ),
-    [iconElement, buttonStylesConfig.iconColor, icon, iconSize, compositeStyles?.icon]
-  );
-
-  // Memoize container styles
-  const containerStyles = useMemo(() => [
-    css`
-      flex-direction: row;
-      border-radius: ${borderRadiusStr};
-    `,
-    style,
-  ], [borderRadiusStr, style]);
-
-  // Memoize inner container styles
-  const innerContainerStyles = useMemo(() => [
-    css`
-      padding: 4px;
-      border-radius: ${borderRadiusStr};
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-    `,
-    compositeStyles.container,
-    hovered && !disabled && compositeStyles.hovered,
-    disabled && compositeStyles.disabled,
-  ], [borderRadiusStr, compositeStyles, hovered, disabled]);
-
-  return (
-    <View style={containerStyles}>
-      <TouchableHighlight
-        accessibilityLabel={accessibilityLabel ?? icon}
-        accessibilityRole="button"
-        activeOpacity={activeOpacity}
-        delayPressIn={50}
-        disabled={disabled || loading}
-        onPress={handlePress}
-        ref={Platform.select({
-          web: ref,
-          default: undefined,
-        })}
-        style={css`
-          border-radius: ${borderRadiusStr};
-        `}
-        testID={testID}
-        underlayColor={theme.role.underlay}
-        {...touchableHighlightProps}
-      >
-        <View
-          style={innerContainerStyles}
-          testID={loading ? 'loading-view' : 'button-container'}
-        >
-          {loading ? LoadingView : IconView}
-        </View>
-      </TouchableHighlight>
-    </View>
-  );
-}
-
-// Export memoized component for better performance
-export default React.memo(IconButton) as typeof IconButton;

package/src/components/uis/LoadingIndicator/LoadingIndicator.tsx

@@ -1,126 +0,0 @@
-import React, {useMemo, useCallback, type ReactElement} from "react";
-import type {
-  ImageSourcePropType,
-  ImageStyle,
-  StyleProp,
-  ViewStyle,
-} from "react-native";
-import { ActivityIndicator, Image, Platform, View } from "react-native";
-import {styled} from "kstyled";
-import { useTheme } from "../../../providers/ThemeProvider";
-import type {BaseComponentProps} from "../../../types/common";
-
-type Styles = {
-  activityIndicator?: ViewStyle;
-  image?: ImageStyle;
-};
-
-export type LoadingIndicatorSizeType = 'small' | 'medium' | 'large' | number;
-
-export interface LoadingIndicatorProps extends BaseComponentProps {
-  style?: StyleProp<ViewStyle>;
-  styles?: Styles;
-  color?: string;
-  size?: LoadingIndicatorSizeType;
-  imgSource?: string | ImageSourcePropType;
-  customElement?: ReactElement | (() => ReactElement);
-}
-
-const Container = styled(View)`
-  justify-content: center;
-  align-items: center;
-`;
-
-function LoadingIndicator({
-  customElement,
-  style,
-  styles,
-  size = "large",
-  color,
-  imgSource,
-  testID,
-}: LoadingIndicatorProps): ReactElement {
-  const { theme } = useTheme();
-
-  // Convert size to ActivityIndicator compatible format
-  // Note: iOS only supports 'small' | 'large', Android also supports numbers
-  const activityIndicatorSize: 'small' | 'large' | number = useMemo(() => {
-    if (typeof size === 'number') {
-      // On iOS, convert numeric sizes to 'large' since numeric sizes aren't supported
-      if (Platform.OS === 'ios') return 'large';
-      return size;
-    }
-    if (size === 'medium') return 'large';
-    return size;
-  }, [size]);
-
-  // Memoize image source processing
-  const imageSource = useMemo((): ImageSourcePropType | undefined => {
-    if (!imgSource) return undefined;
-
-    if (typeof imgSource === "string") {
-      return { uri: imgSource };
-    }
-    return imgSource;
-  }, [imgSource]);
-
-  // Memoize image style calculation
-  const imageStyle = useMemo(() => {
-    if (typeof size === 'number') {
-      return [{ width: size, height: size }, styles?.image];
-    }
-    return [
-      size === "large"
-        ? { width: 50, height: 50 }
-        : size === "medium"
-        ? { width: 40, height: 40 }
-        : size === "small"
-        ? { width: 30, height: 30 }
-        : undefined,
-      styles?.image,
-    ];
-  }, [size, styles?.image]);
-
-  // Memoize activity indicator color
-  const activityIndicatorColor = useMemo(() => {
-    return color || theme.role.secondary;
-  }, [color, theme.role.secondary]);
-
-  // Memoize content renderer
-  const renderContent = useCallback(() => {
-    if (customElement) {
-      return typeof customElement === "function" ? customElement() : customElement;
-    }
-
-    if (imageSource) {
-      return (
-        <Image
-          source={imageSource}
-          style={imageStyle}
-          testID={`${testID}-image`}
-        />
-      );
-    }
-
-    return (
-      <ActivityIndicator
-        color={activityIndicatorColor}
-        size={activityIndicatorSize}
-        style={styles?.activityIndicator}
-        testID={`${testID}-activity-indicator`}
-      />
-    );
-  }, [customElement, imageSource, imageStyle, testID, activityIndicatorColor, activityIndicatorSize, styles?.activityIndicator]);
-
-  return (
-    <Container style={style} testID={testID}>
-      {renderContent()}
-    </Container>
-  );
-}
-
-// Export memoized component for better performance
-export default React.memo(LoadingIndicator) as typeof LoadingIndicator;
-
-// Also export the non-memoized version for cases where memoization is not needed
-export {LoadingIndicator};

package/src/components/uis/LoadingIndicator/LodingIndicator.stories.tsx

@@ -1,81 +0,0 @@
-import type {ComponentProps} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {withThemeProvider} from '../../../../.storybook/decorators';
-import {LoadingIndicator} from './LoadingIndicator';
-
-const meta = {
-  title: 'LoadingIndicator',
-  component: (props) => <LoadingIndicator {...props} />,
-  parameters: {
-    docs: {
-      description: {
-        component: `
-A loading indicator component that displays a spinner or custom loading animation.
-
-## Features
-- **Flexible Sizing**: Preset sizes and custom numeric values
-- **Platform Adaptive**: Uses native ActivityIndicator on mobile platforms
-- **Custom Colors**: Support for custom loading indicator colors
-- **Custom Elements**: Can replace with custom loading animation
-
-## Size Options
-- \`small\`: 30px indicator
-- \`medium\`: 40px indicator
-- \`large\`: 50px indicator (default on native)
-- Custom number: Any pixel value (e.g., \`size={45}\`)
-
-## Platform Behavior
-- **iOS/Android**: Uses native ActivityIndicator with "small" or "large" sizes
-- **Web**: Custom implementation with flexible sizing
-- **Medium size**: Maps to "large" on native platforms
-
-## Usage
-\`\`\`tsx
-<LoadingIndicator
-  size="medium"
-  color="#0000FF"
-/>
-\`\`\`
-
-### With Custom Element
-\`\`\`tsx
-<LoadingIndicator
-  size={50}
-  customElement={<CustomSpinner />}
-/>
-\`\`\`
-        `,
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'radio',
-      options: ['small', 'medium', 'large', 20, 30, 40, 50],
-      description: 'Indicator size: "small" (30px), "medium" (40px), "large" (50px), or custom number in pixels',
-    },
-    color: {
-      description: 'Custom color for the loading indicator',
-    },
-    customElement: {
-      description: 'Custom loading element to replace the default spinner',
-    },
-  },
-  decorators: [withThemeProvider],
-} satisfies Meta<typeof LoadingIndicator>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-  args: {
-    size: 'medium',
-  },
-  argTypes: {
-    theme: {
-      control: 'select',
-      options: ['light', 'dark'],
-    },
-  },
-};