cpk-ui 0.5.4 → 0.7.0

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

@@ -1,167 +0,0 @@
-import type {ComponentProps} from 'react';
-import {css} from 'kstyled';
-import type {Meta, StoryObj} from '@storybook/react';
-import {Accordion} from './Accordion';
-import {withThemeProvider} from '../../../../.storybook/decorators';
-
-const ACCORDION_DOCS = `
-An expandable/collapsible accordion component for organizing content hierarchically.
-
-## Features
-- **Smooth Animations**: Configurable animation duration for expand/collapse
-- **Flexible Sizing**: Preset sizes and custom numeric values
-- **Initial Expansion Control**: Control which items start expanded
-- **Item Press Handling**: Callback for item interactions
-- **Customizable Content**: Flexible data structure for titles and items
-- **Animation Control**: Can disable animations if needed
-
-## Size Options
-- \`small\`: Compact accordion (title: 40px height, 14px font)
-- \`medium\`: Standard accordion (title: 48px height, 16px font) - default
-- \`large\`: Large accordion (title: 56px height, 18px font)
-- Custom number: Custom size with proportional scaling
-
-## Usage
-\`\`\`tsx
-// Default: All items collapsed
-<Accordion data={data} />
-
-// First item expanded
-<Accordion data={data} defaultExpandedIndexes={[0]} />
-
-// Multiple items expanded (first and third)
-<Accordion data={data} defaultExpandedIndexes={[0, 2]} />
-
-// All items expanded
-<Accordion data={data} expandAllOnStart={true} />
-\`\`\`
-
-## Initial Expansion Props
-- **defaultExpandedIndexes**: Array of indexes to expand on start (e.g., \`[0, 2]\`)
-- **expandAllOnStart**: Boolean to expand all items on start
-- **collapseOnStart**: **@deprecated** Use \`expandAllOnStart={false}\` instead
-
-**Priority order:** \`defaultExpandedIndexes\` > \`expandAllOnStart\` > \`collapseOnStart\` (deprecated) > default (all collapsed)
-
-## Props
-- **size**: Accordion size ('small', 'medium', 'large', or number)
-- **data**: Array of accordion sections with title and items
-- **defaultExpandedIndexes**: Array of indexes to expand on start
-- **expandAllOnStart**: Whether all sections start expanded
-- **collapseOnStart**: **@deprecated** Whether sections start collapsed (use expandAllOnStart instead)
-- **animDuration**: Animation duration in milliseconds
-- **shouldAnimate**: Enable/disable animations
-- **onPressItem**: Callback when an item is pressed
-`;
-
-const meta = {
-  title: 'Accordion',
-  component: Accordion,
-  parameters: {
-    notes: ACCORDION_DOCS,
-    docs: {
-      description: {
-        component: ACCORDION_DOCS,
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'radio',
-      options: ['small', 'medium', 'large', 16, 20, 24],
-      description: 'Accordion size: "small" (40px title), "medium" (48px title), "large" (56px title), or custom number',
-    },
-  },
-  decorators: [withThemeProvider],
-} satisfies Meta<typeof Accordion>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const defaultData = [
-  {
-    title: 'Item 1',
-    items: ['User', 'Mail', 'Text'],
-  },
-  {
-    title: 'Item 2',
-    items: ['User', 'Mail', 'Text'],
-  },
-  {
-    title: 'Item 3',
-    items: ['User', 'Mail', 'Text'],
-  },
-];
-
-export const Basic: Story = {
-  args: {
-    size: 'medium',
-    animDuration: 200,
-    collapseOnStart: true,
-    onPressItem: () => {},
-    data: defaultData,
-    shouldAnimate: true,
-  },
-  argTypes: {
-    // @ts-expect-error - theme is for storybook control
-    theme: {
-      control: 'select',
-      options: ['light', 'dark'],
-    },
-  },
-};
-
-export const FirstItemExpanded: Story = {
-  args: {
-    size: 'medium',
-    animDuration: 200,
-    defaultExpandedIndexes: [0],
-    onPressItem: () => {},
-    data: defaultData,
-    shouldAnimate: true,
-  },
-  argTypes: {
-    // @ts-expect-error - theme is for storybook control
-    theme: {
-      control: 'select',
-      options: ['light', 'dark'],
-    },
-  },
-};
-
-export const MultipleItemsExpanded: Story = {
-  args: {
-    size: 'medium',
-    animDuration: 200,
-    defaultExpandedIndexes: [0, 2],
-    onPressItem: () => {},
-    data: defaultData,
-    shouldAnimate: true,
-  },
-  argTypes: {
-    // @ts-expect-error - theme is for storybook control
-    theme: {
-      control: 'select',
-      options: ['light', 'dark'],
-    },
-  },
-};
-
-export const AllItemsExpanded: Story = {
-  args: {
-    size: 'medium',
-    animDuration: 200,
-    expandAllOnStart: true,
-    onPressItem: () => {},
-    data: defaultData,
-    shouldAnimate: true,
-  },
-  argTypes: {
-    // @ts-expect-error - theme is for storybook control
-    theme: {
-      control: 'select',
-      options: ['light', 'dark'],
-    },
-  },
-};

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

@@ -1,272 +0,0 @@
-import React, {type ReactElement} from 'react';
-import {Text} from 'react-native';
-import type {RenderAPI} from '@testing-library/react-native';
-import {fireEvent, render} from '@testing-library/react-native';
-
-import {createComponent, createTestProps} from '../../../../test/testUtils';
-import {Accordion} from './Accordion';
-
-let props: any;
-let component: ReactElement;
-let testingLib: RenderAPI;
-
-const data: any[] = [
-  {
-    title: 'title1',
-    items: ['body1', 'body2', 'body3'],
-  },
-  {
-    title: 'title2',
-    items: ['body1', 'body2', 'body3'],
-  },
-  {
-    title: 'title3',
-    items: ['body1', 'body2', 'body3'],
-  },
-];
-
-describe('[Accordion] render test', () => {
-  it('should render without crashing', () => {
-    props = createTestProps({
-      data: data,
-      renderTitle: (title) => <Text>{title}</Text>,
-      renderItem: (item) => <Text>{item}</Text>,
-    });
-
-    component = createComponent(<Accordion {...props} />);
-
-    testingLib = render(component);
-
-    const json = testingLib.toJSON();
-    expect(json).toBeTruthy();
-  });
-
-  it('should render collapsed when collapseOnStart props is true (deprecated)', () => {
-    props = createTestProps({
-      collapseOnStart: true,
-      data: data,
-      renderTitle: (title) => <Text>{title}</Text>,
-      renderItem: (item) => <Text>{item}</Text>,
-    });
-
-    component = createComponent(<Accordion {...props} />);
-    testingLib = render(component);
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-
-  it('should render all expanded when expandAllOnStart is true', () => {
-    props = createTestProps({
-      expandAllOnStart: true,
-      data: data,
-      renderTitle: (title) => <Text>{title}</Text>,
-      renderItem: (item) => <Text>{item}</Text>,
-    });
-
-    component = createComponent(<Accordion {...props} />);
-    testingLib = render(component);
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-
-  it('should render first item expanded when defaultExpandedIndexes is [0]', () => {
-    props = createTestProps({
-      defaultExpandedIndexes: [0],
-      data: data,
-      renderTitle: (title) => <Text>{title}</Text>,
-      renderItem: (item) => <Text>{item}</Text>,
-    });
-
-    component = createComponent(<Accordion {...props} />);
-    testingLib = render(component);
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-
-  it('should render multiple items expanded when defaultExpandedIndexes is [0, 2]', () => {
-    props = createTestProps({
-      defaultExpandedIndexes: [0, 2],
-      data: data,
-      renderTitle: (title) => <Text>{title}</Text>,
-      renderItem: (item) => <Text>{item}</Text>,
-    });
-
-    component = createComponent(<Accordion {...props} />);
-    testingLib = render(component);
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-
-  it('should prioritize defaultExpandedIndexes over expandAllOnStart', () => {
-    props = createTestProps({
-      defaultExpandedIndexes: [0],
-      expandAllOnStart: true,
-      data: data,
-      renderTitle: (title) => <Text>{title}</Text>,
-      renderItem: (item) => <Text>{item}</Text>,
-    });
-
-    component = createComponent(<Accordion {...props} />);
-    testingLib = render(component);
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-
-  it('should prioritize expandAllOnStart over collapseOnStart (deprecated)', () => {
-    props = createTestProps({
-      expandAllOnStart: false,
-      collapseOnStart: false,
-      data: data,
-      renderTitle: (title) => <Text>{title}</Text>,
-      renderItem: (item) => <Text>{item}</Text>,
-    });
-
-    component = createComponent(<Accordion {...props} />);
-    testingLib = render(component);
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-
-  it('should operate animation when shouldAnimate props is true', () => {
-    props = createTestProps({
-      shouldAnimate: true,
-      data: data,
-      renderTitle: (title) => <Text>{title}</Text>,
-      renderItem: (item) => <Text>{item}</Text>,
-    });
-
-    component = createComponent(<Accordion {...props} />);
-
-    testingLib = render(component);
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-
-  it('should adjust duration of animation depends on animDuration props value', () => {
-    props = createTestProps({
-      animDuration: 500,
-      data: data,
-      renderTitle: (title) => <Text>{title}</Text>,
-      renderItem: (item) => <Text>{item}</Text>,
-    });
-
-    component = createComponent(<Accordion {...props} />);
-    testingLib = render(component);
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-});
-
-describe('[Accordion] event test', () => {
-  beforeEach(() => {
-    props = createTestProps({
-      data: data,
-      renderTitle: (title) => <Text>{title}</Text>,
-      renderItem: (item) => <Text>{item}</Text>,
-    });
-
-    component = createComponent(<Accordion {...props} />);
-    testingLib = render(component);
-  });
-
-  it('should trigger onLayout event when itemBody rendered', () => {
-    const {getByTestId} = testingLib;
-    const itemTitle = getByTestId('body-0');
-
-    fireEvent(itemTitle, 'layout', {
-      nativeEvent: {
-        layout: {
-          height: 300,
-        },
-      },
-    });
-
-    expect(itemTitle.props.style.height).toBeDefined();
-  });
-
-  it('should trigger press event when clicking title', () => {
-    fireEvent.press(testingLib.getByTestId('title-0'));
-
-    expect(
-      testingLib.getByTestId('body-0').props.accessibilityState.expanded,
-    ).toBeTruthy();
-  });
-});
-
-describe('[Accordion] sizes', () => {
-  it('should render with small size', () => {
-    props = createTestProps({
-      data: data,
-      size: 'small',
-      renderTitle: (title) => <Text>{title}</Text>,
-      renderItem: (item) => <Text>{item}</Text>,
-    });
-
-    component = createComponent(<Accordion {...props} />);
-    testingLib = render(component);
-
-    const json = testingLib.toJSON();
-    expect(json).toBeTruthy();
-  });
-
-  it('should render with medium size', () => {
-    props = createTestProps({
-      data: data,
-      size: 'medium',
-      renderTitle: (title) => <Text>{title}</Text>,
-      renderItem: (item) => <Text>{item}</Text>,
-    });
-
-    component = createComponent(<Accordion {...props} />);
-    testingLib = render(component);
-
-    const json = testingLib.toJSON();
-    expect(json).toBeTruthy();
-  });
-
-  it('should render with large size', () => {
-    props = createTestProps({
-      data: data,
-      size: 'large',
-      renderTitle: (title) => <Text>{title}</Text>,
-      renderItem: (item) => <Text>{item}</Text>,
-    });
-
-    component = createComponent(<Accordion {...props} />);
-    testingLib = render(component);
-
-    const json = testingLib.toJSON();
-    expect(json).toBeTruthy();
-  });
-
-  it('should render with custom numeric size', () => {
-    props = createTestProps({
-      data: data,
-      size: 20,
-      renderTitle: (title) => <Text>{title}</Text>,
-      renderItem: (item) => <Text>{item}</Text>,
-    });
-
-    component = createComponent(<Accordion {...props} />);
-    testingLib = render(component);
-
-    const json = testingLib.toJSON();
-    expect(json).toBeTruthy();
-  });
-});

package/src/components/uis/Accordion/Accordion.tsx

@@ -1,109 +0,0 @@
-import React, {useMemo, type ReactElement} from 'react';
-import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
-import {View} from 'react-native';
-import {styled} from 'kstyled';
-
-import type {AccordionItemDataType} from './AccordionItem';
-import {AccordionItem} from './AccordionItem';
-
-const Container = styled(View)`
-  flex-direction: column;
-`;
-
-type Styles = {
-  container?: StyleProp<ViewStyle>;
-  titleContainer?: StyleProp<ViewStyle>;
-  titleText?: StyleProp<TextStyle>;
-  itemContainer?: StyleProp<ViewStyle>;
-  itemText?: StyleProp<TextStyle>;
-  toggleElement?: StyleProp<ViewStyle>;
-};
-
-export type AccordionSizeType = 'small' | 'medium' | 'large' | number;
-
-export type AccordionBaseProps<T = string, K = string> = {
-  data: AccordionItemDataType<T, K>[];
-  style?: StyleProp<ViewStyle>;
-  styles?: Styles;
-  size?: AccordionSizeType;
-  shouldAnimate?: boolean;
-  /** @deprecated Use expandAllOnStart instead */
-  collapseOnStart?: boolean;
-  /** If true, all items start expanded. Defaults to false (all items collapsed) */
-  expandAllOnStart?: boolean;
-  /** Array of indexes that should be expanded on start. Overrides expandAllOnStart */
-  defaultExpandedIndexes?: number[];
-  animDuration?: number;
-  activeOpacity?: number;
-  toggleElementPosition?: 'left' | 'right';
-  toggleElement?: ReactElement | null;
-  renderTitle?: (title: T) => ReactElement;
-  renderItem?: (body: K) => ReactElement;
-  onPressItem?: (title: T | string, body: K | string) => void;
-};
-
-export type AccordionProps<T = string, K = string> = AccordionBaseProps<T, K>;
-
-function Accordion<T, K>({
-  style,
-  toggleElementPosition = 'right',
-  size = 'medium',
-  data,
-  collapseOnStart,
-  expandAllOnStart,
-  defaultExpandedIndexes,
-  ...rest
-}: AccordionProps<T, K>): ReactElement {
-  // Memoize accordion items rendering
-  const accordionItems = useMemo(
-    () =>
-      data.map((datum, titleKey) => {
-        // Determine if this item should be collapsed on start
-        let shouldCollapse: boolean;
-
-        if (
-          defaultExpandedIndexes !== undefined &&
-          defaultExpandedIndexes.length > 0
-        ) {
-          // If defaultExpandedIndexes is provided, use it
-          shouldCollapse = !defaultExpandedIndexes.includes(titleKey);
-        } else if (expandAllOnStart !== undefined) {
-          // If expandAllOnStart is provided, use it
-          shouldCollapse = !expandAllOnStart;
-        } else if (collapseOnStart !== undefined) {
-          // Fallback to deprecated collapseOnStart for backward compatibility
-          shouldCollapse = collapseOnStart;
-        } else {
-          // Default: all items collapsed
-          shouldCollapse = true;
-        }
-
-        return (
-          <AccordionItem
-            data={datum}
-            key={titleKey}
-            testID={`${titleKey}`}
-            toggleElementPosition={toggleElementPosition}
-            size={size}
-            collapseOnStart={shouldCollapse}
-            {...rest}
-          />
-        );
-      }),
-    [
-      data,
-      toggleElementPosition,
-      size,
-      collapseOnStart,
-      expandAllOnStart,
-      defaultExpandedIndexes,
-      rest,
-    ],
-  );
-
-  return <Container style={style}>{accordionItems}</Container>;
-}
-
-// Export memoized component for better performance
-export default React.memo(Accordion) as typeof Accordion;
-export {Accordion};