cpk-ui 0.5.4 → 0.7.0

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

@@ -1,110 +0,0 @@
-import React, {type ReactElement} from 'react';
-import {fireEvent, render} from '@testing-library/react-native';
-
-import {createComponent} from '../../../../test/testUtils';
-import type {IconName} from '../../..';
-import {Fab} from './Fab';
-
-const Component = (props): ReactElement => createComponent(<Fab {...props} />);
-
-describe('[Fab]', () => {
-  it('should render', async () => {
-    let count = 0;
-    let items: IconName[] = ['AndroidLogo', 'AppleLogo'];
-    // let resItem: FabItem;
-
-    const {getByTestId} = render(
-      Component({
-        icons: items,
-        isActive: true,
-        onPressItem: () => {
-          count += 1;
-          // resItem = fab;
-        },
-        onPressFab: () => {},
-      }),
-    );
-
-    expect(count).toBe(0);
-    fireEvent.press(getByTestId('AndroidLogo'));
-    expect(count).toBe(1);
-    // expect(resItem.id).toBe(item.id);
-  });
-
-  it('should render custom Fab', async () => {
-    const testingLib = render(
-      Component({
-        icons: ['AppleLogo', 'AndroidLogo'],
-        isActive: true,
-        onPressItem: () => {},
-        onPressFab: () => {},
-      }),
-    );
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-
-  describe('sizes', () => {
-    it('should render with small size', async () => {
-      const testingLib = render(
-        Component({
-          icons: ['AppleLogo', 'AndroidLogo'],
-          size: 'small',
-          isActive: true,
-          onPressItem: () => {},
-          onPressFab: () => {},
-        }),
-      );
-
-      const json = testingLib.toJSON();
-      expect(json).toBeTruthy();
-    });
-
-    it('should render with medium size', async () => {
-      const testingLib = render(
-        Component({
-          icons: ['AppleLogo', 'AndroidLogo'],
-          size: 'medium',
-          isActive: true,
-          onPressItem: () => {},
-          onPressFab: () => {},
-        }),
-      );
-
-      const json = testingLib.toJSON();
-      expect(json).toBeTruthy();
-    });
-
-    it('should render with large size', async () => {
-      const testingLib = render(
-        Component({
-          icons: ['AppleLogo', 'AndroidLogo'],
-          size: 'large',
-          isActive: true,
-          onPressItem: () => {},
-          onPressFab: () => {},
-        }),
-      );
-
-      const json = testingLib.toJSON();
-      expect(json).toBeTruthy();
-    });
-
-    it('should render with custom numeric size', async () => {
-      const testingLib = render(
-        Component({
-          icons: ['AppleLogo', 'AndroidLogo'],
-          size: 64,
-          isActive: true,
-          onPressItem: () => {},
-          onPressFab: () => {},
-        }),
-      );
-
-      const json = testingLib.toJSON();
-      expect(json).toBeTruthy();
-    });
-  });
-});

package/src/components/uis/Fab/Fab.tsx

@@ -1,168 +0,0 @@
-import React, {useLayoutEffect, useMemo, useRef, useCallback, type ReactElement} from 'react';
-import type {LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';
-import {Animated, Easing, Platform, View} from 'react-native';
-import {IconName} from '../Icon/Icon';
-import {ButtonSizeType} from '../Button/Button';
-import {IconButton} from '../IconButton/IconButton';
-import {useOptimizedStyles} from '../../../hooks/useOptimizedStyles';
-import {safePlatformSelect} from '../../../utils/platform';
-import {getButtonAccessibilityProps} from '../../../utils/accessibility';
-
-type Styles = {
-  Fab?: StyleProp<ViewStyle>;
-  FabItem?: StyleProp<ViewStyle>;
-};
-
-export type FabProps = {
-  isActive?: boolean;
-  icons?: IconName[];
-  animationDuration?: number;
-  onPressFab: () => void;
-  onPressItem?: (item?: IconName) => void;
-  buttonSize?: ButtonSizeType | number;
-  fabIcon?: IconName;
-  gap?: number;
-  style?: StyleProp<ViewStyle>;
-  styles?: Styles;
-  iconButtonProps?: Omit<
-    React.ComponentProps<typeof IconButton>,
-    'icon' | 'onPress' | 'size'
-  >;
-};
-
-function FloatingActionButtons({
-  isActive = false,
-  style,
-  styles,
-  fabIcon = 'Plus',
-  icons = [],
-  onPressFab,
-  onPressItem,
-  buttonSize = 'medium',
-  gap = Platform.select({
-    web: 60,
-    default: 12,
-  }) || 12,
-  animationDuration = 200,
-  iconButtonProps,
-}: FabProps): ReactElement {
-  const {Fab, FabItem} = styles ?? {};
-
-  const spinValue = useRef(new Animated.Value(0));
-  const positionValue = useRef(new Animated.Value(0));
-  const fabHeight = useRef(0);
-
-  // Memoize animation configuration
-  const animationConfig = useMemo(() => ({
-    duration: animationDuration,
-    easing: Easing.linear,
-    useNativeDriver: true,
-  }), [animationDuration]);
-
-  useLayoutEffect(() => {
-    const config = {
-      toValue: isActive ? 1 : 0,
-      ...animationConfig,
-    };
-
-    Animated.parallel([
-      Animated.timing(spinValue.current, config),
-      Animated.timing(positionValue.current, config),
-    ]).start();
-  }, [isActive, animationConfig]);
-
-  // Memoize offsets calculation
-  const offsets = useMemo(
-    () =>
-      icons?.map((_, idx) =>
-        positionValue.current.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, -1 * (idx + 1) * (fabHeight.current + gap)],
-        }),
-      ),
-    [icons, gap],
-  );
-
-  // Memoize layout handler
-  const onLayout = useCallback((e: LayoutChangeEvent): void => {
-    fabHeight.current = e.nativeEvent.layout.height;
-  }, []);
-
-  // Memoize item press handler
-  const handleItemPress = useCallback((icon: IconName) => {
-    onPressItem?.(icon);
-  }, [onPressItem]);
-
-  // Memoize main FAB press handler
-  const handleFabPress = useCallback(() => {
-    onPressFab();
-  }, [onPressFab]);
-
-  // Memoize container styles
-  const containerStyles = useMemo(() => [
-    {
-      position: 'absolute' as const,
-      right: 10,
-      bottom: 10,
-      zIndex: 999,
-    },
-    style,
-  ], [style]);
-
-  // Memoize spin interpolation
-  const spinInterpolation = useMemo(() => 
-    spinValue.current.interpolate({
-      inputRange: [0, 1],
-      outputRange: ['0deg', '45deg'],
-    }),
-  []);
-
-  // Memoize main FAB styles
-  const mainFabStyles = useMemo(() => [
-    {
-      transform: [{ rotate: spinInterpolation }],
-    },
-    Fab,
-  ], [spinInterpolation, Fab]);
-
-  // Memoize icon items rendering
-  const iconItems = useMemo(() => 
-    icons.map((icon, idx) => (
-      <Animated.View
-        key={`${icon}-${idx}`}
-        style={[
-          {
-            position: 'absolute' as const,
-            transform: [{translateY: offsets[idx]}],
-          },
-          FabItem,
-        ]}
-      >
-        <IconButton
-          icon={icon}
-          onPress={() => handleItemPress(icon)}
-          size={buttonSize}
-          testID={icon}
-          {...iconButtonProps}
-        />
-      </Animated.View>
-    )),
-    [icons, offsets, FabItem, handleItemPress, buttonSize, iconButtonProps],
-  );
-
-  return (
-    <View style={containerStyles}>
-      {iconItems}
-      <Animated.View onLayout={onLayout} style={mainFabStyles}>
-        <IconButton
-          icon={fabIcon}
-          onPress={handleFabPress}
-          size={buttonSize}
-          {...iconButtonProps}
-        />
-      </Animated.View>
-    </View>
-  );
-}
-
-export {FloatingActionButtons as Fab};

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

@@ -1,26 +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 {Hr} from './Hr';
-
-let testingLib: RenderAPI;
-
-const Component = (): ReactElement =>
-  createComponent(
-    <View>
-      <Hr />
-    </View>,
-  );
-
-describe('[Hr]', () => {
-  it('should render without crashing', () => {
-    testingLib = render(Component());
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-});

package/src/components/uis/Hr/Hr.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import {View} from 'react-native';
-import {styled} from 'kstyled';
-import {isEmptyObject} from '../../../utils/theme';
-
-const StyledHr = styled(View)`
-  height: 0.5px;
-  width: 100%;
-  background-color: ${({theme}) => {
-    if (isEmptyObject(theme)) {
-      return theme.role.border;
-    }
-
-    return theme.role.border;
-  }};
-`;
-
-// Memoized Hr component for performance optimization
-export const Hr = React.memo(StyledHr);

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

@@ -1,98 +0,0 @@
-import type {ComponentProps} from 'react';
-import {View} from 'react-native';
-import {css} from 'kstyled';
-import type {Meta, StoryObj} from '@storybook/react';
-import {Icon, iconList} from './Icon';
-import {withThemeProvider} from '../../../../.storybook/decorators';
-import {Typography} from '../Typography/Typography';
-
-const meta = {
-  title: 'Icon',
-  component: (props) => (
-    <View
-      style={css`
-        align-items: center;
-      `}
-    >
-      <Icon {...props} />
-      <Typography.Body2
-        style={css`
-          font-size: 12px;
-          text-align: center;
-        `}
-      >
-        {props?.name}
-      </Typography.Body2>
-    </View>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        component: `
-A flexible Icon component with a comprehensive icon library and size presets.
-
-## Features
-- **Extensive Icon Library**: Large collection of commonly used icons
-- **Flexible Sizing**: Preset sizes and custom numeric values
-- **Color Customization**: Support for custom icon colors
-- **Optimized Performance**: Efficiently rendered vector icons
-
-## Size Options
-- \`small\`: 18px icon
-- \`medium\`: 24px icon (default)
-- \`large\`: 32px icon
-- Custom number: Any pixel value (e.g., \`size={40}\`)
-
-## Available Icons
-The component includes a wide variety of icons such as:
-- UI elements (MagnifyingGlass, Bell, Settings, etc.)
-- Actions (Check, X, Plus, Minus, etc.)
-- Navigation (ChevronUp, ChevronDown, ArrowLeft, ArrowRight, etc.)
-- And many more...
-
-## Usage
-\`\`\`tsx
-<Icon
-  name="MagnifyingGlass"
-  size="medium"
-  color="#000000"
-/>
-\`\`\`
-        `,
-      },
-    },
-  },
-  argTypes: {
-    name: {
-      control: 'select',
-      options: iconList,
-      description: 'Name of the icon to display',
-    },
-    size: {
-      control: 'radio',
-      options: ['small', 'medium', 'large', 16, 24, 32, 48],
-      description: 'Icon size: "small" (18px), "medium" (24px), "large" (32px), or custom number in pixels',
-    },
-    color: {
-      description: 'Custom color for the icon',
-    },
-  },
-  decorators: [withThemeProvider],
-} satisfies Meta<typeof Icon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-  args: {
-    name: 'MagnifyingGlass',
-    size: 'medium',
-  },
-  argTypes: {
-    theme: {
-      control: 'select',
-      options: ['light', 'dark'],
-    },
-  },
-};

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

@@ -1,49 +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 {Icon} from './Icon';
-
-let testingLib: RenderAPI;
-
-const Component = (): ReactElement => createComponent(<Icon name="Person" />);
-
-describe('[Icon]', () => {
-  it('should render without crashing', () => {
-    testingLib = render(Component());
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-
-  describe('sizes', () => {
-    it('should render with small size preset', () => {
-      testingLib = render(createComponent(<Icon name="Person" size="small" />));
-
-      const json = testingLib.toJSON();
-      expect(json).toBeTruthy();
-    });
-
-    it('should render with medium size preset', () => {
-      testingLib = render(createComponent(<Icon name="Person" size="medium" />));
-
-      const json = testingLib.toJSON();
-      expect(json).toBeTruthy();
-    });
-
-    it('should render with large size preset', () => {
-      testingLib = render(createComponent(<Icon name="Person" size="large" />));
-
-      const json = testingLib.toJSON();
-      expect(json).toBeTruthy();
-    });
-
-    it('should render with custom numeric size', () => {
-      testingLib = render(createComponent(<Icon name="Person" size={32} />));
-
-      const json = testingLib.toJSON();
-      expect(json).toBeTruthy();
-    });
-  });
-});