cpk-ui 0.5.0 → 0.5.1-rc.2

package/components/uis/Accordion/Accordion.d.ts

@@ -16,7 +16,12 @@ export type AccordionBaseProps<T = string, K = string> = {
     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';
@@ -26,7 +31,7 @@ export type AccordionBaseProps<T = string, K = string> = {
     onPressItem?: (title: T | string, body: K | string) => void;
 };
 export type AccordionProps<T = string, K = string> = AccordionBaseProps<T, K>;
-declare function Accordion<T, K>({ style, toggleElementPosition, size, data, ...rest }: AccordionProps<T, K>): ReactElement;
+declare function Accordion<T, K>({ style, toggleElementPosition, size, data, collapseOnStart, expandAllOnStart, defaultExpandedIndexes, ...rest }: AccordionProps<T, K>): ReactElement;
 declare const _default: typeof Accordion;
 export default _default;
 export { Accordion };

package/components/uis/Accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAU,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAIlE,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AAO3D,KAAK,MAAM,GAAG;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEtE,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,MAAM,EAAE,CAAC,GAAG,MAAM,IAAI;IACvD,IAAI,EAAE,qBAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzC,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,YAAY,CAAC;IACzC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,YAAY,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,MAAM,EAAE,IAAI,EAAE,CAAC,GAAG,MAAM,KAAK,IAAI,CAAC;CAC7D,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,EAAE,CAAC,GAAG,MAAM,IAAI,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAE9E,iBAAS,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,EACvB,KAAK,EACL,qBAA+B,EAC/B,IAAe,EACf,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,YAAY,CAqBrC;wBAGuC,OAAO,SAAS;AAAxD,wBAAyD;AACzD,OAAO,EAAC,SAAS,EAAC,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAU,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAIlE,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AAO3D,KAAK,MAAM,GAAG;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEtE,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,MAAM,EAAE,CAAC,GAAG,MAAM,IAAI;IACvD,IAAI,EAAE,qBAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iFAAiF;IACjF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oFAAoF;IACpF,sBAAsB,CAAC,EAAE,MAAM,EAAE,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzC,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,YAAY,CAAC;IACzC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,YAAY,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,MAAM,EAAE,IAAI,EAAE,CAAC,GAAG,MAAM,KAAK,IAAI,CAAC;CAC7D,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,EAAE,CAAC,GAAG,MAAM,IAAI,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAE9E,iBAAS,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,EACvB,KAAK,EACL,qBAA+B,EAC/B,IAAe,EACf,IAAI,EACJ,eAAe,EACf,gBAAgB,EAChB,sBAAsB,EACtB,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,YAAY,CAiDrC;wBAGuC,OAAO,SAAS;AAAxD,wBAAyD;AACzD,OAAO,EAAC,SAAS,EAAC,CAAC"}

package/components/uis/Accordion/Accordion.js

@@ -6,10 +6,39 @@ import { AccordionItem } from './AccordionItem';
 const Container = styled(View) `
   flex-direction: column;
 `;
-function Accordion({ style, toggleElementPosition = 'right', size = 'medium', data, ...rest }) {
+function Accordion({ style, toggleElementPosition = 'right', size = 'medium', data, collapseOnStart, expandAllOnStart, defaultExpandedIndexes, ...rest }) {
     // Memoize accordion items rendering
-    const accordionItems = useMemo(() => data.map((datum, titleKey) => (_jsx(AccordionItem, { data: datum, testID: `${titleKey}`, toggleElementPosition: toggleElementPosition, size: size, ...rest }, titleKey))), [data, toggleElementPosition, size, rest]);
-    return (_jsx(Container, { style: style, children: accordionItems }));
+    const accordionItems = useMemo(() => data.map((datum, titleKey) => {
+        // Determine if this item should be collapsed on start
+        let shouldCollapse;
+        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 (_jsx(AccordionItem, { data: datum, testID: `${titleKey}`, toggleElementPosition: toggleElementPosition, size: size, collapseOnStart: shouldCollapse, ...rest }, titleKey));
+    }), [
+        data,
+        toggleElementPosition,
+        size,
+        collapseOnStart,
+        expandAllOnStart,
+        defaultExpandedIndexes,
+        rest,
+    ]);
+    return _jsx(Container, { style: style, children: accordionItems });
 }
 // Export memoized component for better performance
 export default React.memo(Accordion);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpk-ui",
-  "version": "0.5.0",
+  "version": "0.5.1-rc.2",
   "main": "index",
   "react-native": "index",
   "module": "index",

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

@@ -10,7 +10,7 @@ An expandable/collapsible accordion component for organizing content hierarchica
 ## Features
 - **Smooth Animations**: Configurable animation duration for expand/collapse
 - **Flexible Sizing**: Preset sizes and custom numeric values
-- **Collapse on Start**: Option to start with all items collapsed
+- **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
@@ -23,29 +23,32 @@ An expandable/collapsible accordion component for organizing content hierarchica
 
 ## Usage
 \`\`\`tsx
-<Accordion
-  data={[
-    {
-      title: 'Section 1',
-      items: ['Item 1', 'Item 2', 'Item 3'],
-    },
-    {
-      title: 'Section 2',
-      items: ['Item A', 'Item B', 'Item C'],
-    },
-  ]}
-  size="medium"
-  collapseOnStart={true}
-  animDuration={200}
-  shouldAnimate={true}
-  onPressItem={(item) => console.log('Pressed:', item)}
-/>
+// 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
-- **collapseOnStart**: Whether sections start collapsed
+- **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
@@ -76,26 +79,82 @@ 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: [
-      {
-        title: 'Item 1',
-        items: ['User', 'Mail', 'Text'],
-      },
-      {
-        title: 'Item 2',
-        items: ['User', 'Mail', 'Text'],
-      },
-      {
-        title: 'Item 3',
-        items: ['User', 'Mail', 'Text'],
-      },
-    ],
+    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: {

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

@@ -41,7 +41,7 @@ describe('[Accordion] render test', () => {
     expect(json).toBeTruthy();
   });
 
-  it('should render collapsed when collapseOnStart props is true', () => {
+  it('should render collapsed when collapseOnStart props is true (deprecated)', () => {
     props = createTestProps({
       collapseOnStart: true,
       data: data,
@@ -57,6 +57,88 @@ describe('[Accordion] render test', () => {
     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,

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

@@ -27,7 +27,12 @@ export type AccordionBaseProps<T = string, K = string> = {
   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';
@@ -44,28 +49,59 @@ function Accordion<T, K>({
   toggleElementPosition = 'right',
   size = 'medium',
   data,
+  collapseOnStart,
+  expandAllOnStart,
+  defaultExpandedIndexes,
   ...rest
 }: AccordionProps<T, K>): ReactElement {
   // Memoize accordion items rendering
-  const accordionItems = useMemo(() =>
-    data.map((datum, titleKey) => (
-      <AccordionItem
-        data={datum}
-        key={titleKey}
-        testID={`${titleKey}`}
-        toggleElementPosition={toggleElementPosition}
-        size={size}
-        {...rest}
-      />
-    )),
-    [data, toggleElementPosition, size, rest]
-  );
+  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 (
-    <Container style={style}>
-      {accordionItems}
-    </Container>
+        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