feat(components/standalone-accordion): make controlled

Author: psychedelicious

lib/components/accordion/standalone-accordion.stories.tsx

@@ -1,3 +1,4 @@
+import { useDisclosure } from '@chakra-ui/react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from '../tabs';
@@ -15,12 +16,14 @@ export default meta;
 type Story = StoryObj<typeof StandaloneAccordion>;
 
 const Component = (props: StandaloneAccordionProps) => {
+  const { isOpen, onToggle } = useDisclosure();
   return (
     <StandaloneAccordion
       {...props}
       label="The Best Flavours of Banana Sushi"
       badges={['Yum', 'Gourmet', 'Barf']}
-      defaultIsOpen
+      isOpen={isOpen}
+      onToggle={onToggle}
     >
       <Tabs variant="collapse">
         <TabList>

lib/components/accordion/standalone-accordion.tsx

@@ -1,20 +1,30 @@
-import type { PropsWithChildren } from 'react';
-import { memo } from 'react';
+import type { MouseEventHandler, PropsWithChildren } from 'react';
+import { memo, useCallback } from 'react';
 
 import { AccordionButton } from './accordion-button';
 import { Accordion, AccordionItem, AccordionPanel } from './wrapper';
 
 export type StandaloneAccordionProps = PropsWithChildren<{
   label: string;
   badges?: (string | number)[];
-  defaultIsOpen?: boolean;
+  isOpen: boolean;
+  onToggle: () => void;
 }>;
 
 export const StandaloneAccordion = memo((props: StandaloneAccordionProps) => {
+  const onClick = useCallback<MouseEventHandler<HTMLButtonElement>>(
+    (e) => {
+      e.preventDefault();
+      props.onToggle();
+    },
+    [props]
+  );
   return (
-    <Accordion allowToggle defaultIndex={props.defaultIsOpen ? 0 : undefined}>
+    <Accordion index={props.isOpen ? 0 : undefined} allowToggle>
       <AccordionItem>
-        <AccordionButton badges={props.badges}>{props.label}</AccordionButton>
+        <AccordionButton badges={props.badges} onClick={onClick}>
+          {props.label}
+        </AccordionButton>
         <AccordionPanel>{props.children}</AccordionPanel>
       </AccordionItem>
     </Accordion>