Refactor Accordion [Composition pattern, optimisations, contributing standards]

packages/apps/tools/src/components/Common/Layout/partials/Sidebar/Menu.tsx

@@ -19,14 +19,13 @@ export const Menu: FC = () => {
           title={activeMenu.title}
         />
       </div>
-      <Accordion
-        sections={
-          activeMenu.items?.map((item) => ({
-            title: '', // @todo: fix Type error: Property 'title' does not exist on type 'ISidebarSubMenuItem'.
-            children: <Tree isOpen={true} items={item.items} />,
-          })) ?? []
-        }
-      />
+      <Accordion.Root>
+        {activeMenu.items?.map((item, index) => (
+          <Accordion.Section title="" key={index}>
+            <Tree isOpen={true} items={item.items} />
+          </Accordion.Section>
+        ))}
+      </Accordion.Root>
     </div>
   );
 };

packages/libs/react-ui/src/components/Accordion/Accordion.css.ts

@@ -3,6 +3,8 @@ import { style, styleVariants } from '@vanilla-extract/css';
 
 export const accordionSectionClass = style([
   sprinkles({
+    display: 'block',
+    flexGrow: 1,
     marginBottom: '$6',
   }),
   {
@@ -13,30 +15,39 @@ export const accordionSectionClass = style([
     },
   },
 ]);
-export const accordionTitleClass = style([
+
+export const accordionSectionHeadingClass = style([
   sprinkles({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
     cursor: 'pointer',
-    fontSize: '$base',
-    fontWeight: '$medium',
-    paddingBottom: '$2',
+    display: 'flex',
   }),
   {
     transition: 'color 0.2s ease 0s',
     borderBottom: '1px solid',
   },
 ]);
+
+export const accordionTitleClass = style([
+  sprinkles({
+    alignItems: 'center',
+    display: 'flex',
+    fontSize: '$base',
+    fontWeight: '$medium',
+    justifyContent: 'space-between',
+    paddingBottom: '$2',
+    width: '100%',
+  }),
+]);
+
 export const accordionTitleVariants = styleVariants({
   closed: [sprinkles({ color: '$negativeContrast' })],
   opened: [sprinkles({ color: '$foreground' })],
 });
 
 export const toggleButtonClass = style([
   sprinkles({
-    border: 'none',
     background: 'none',
+    border: 'none',
     color: 'inherit',
   }),
   {
@@ -49,6 +60,7 @@ export const toggleButtonClass = style([
     },
   },
 ]);
+
 export const accordionContentWrapperClass = style([
   sprinkles({
     paddingTop: '$2',

packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx

@@ -1,59 +1,80 @@
-import { Accordion, IAccordionProps } from './Accordion';
+import type { IAccordionProps, IAccordionSectionProps } from './';
+import { Accordion } from './';
 
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
-const meta: Meta<{} & IAccordionProps> = {
+const generateSection = (i: number): IAccordionSectionProps => ({
+  title: `Section ${i}`,
+  children: <p>This is the content for section {i}</p>,
+  onOpen: () => console.log(`open section ${i}`),
+  onClose: () => console.log(`close section ${i}`),
+});
+const generateSections = (n: number): IAccordionSectionProps[] =>
+  Array.from({ length: n }, (d, i) => generateSection(i + 1));
+
+const sampleSections: IAccordionSectionProps[] = generateSections(5);
+
+type StoryProps = { sectionCount: number; linked: boolean } & IAccordionProps;
+
+const meta: Meta<StoryProps> = {
   title: 'Components/Accordion',
+  parameters: {
+    controls: {
+      hideNoControlsWarning: true,
+      sort: 'requiredFirst',
+    },
+    docs: {
+      description: {
+        component:
+          'Note: optional property of `initialOpenSection` may be set to the Root component to set the initially opened section. This defaults to `undefined` and has only been explcitly set to -1 in the story code for demonstration purposes.',
+      },
+    },
+  },
   argTypes: {
     linked: {
-      type: 'boolean',
-      defaultValue: true,
+      control: { type: 'boolean' },
       description:
-        'Each section will close the other sections if they are linked',
-      control: {
-        type: 'boolean',
-      },
+        'When linked, only one section can be open at a time. If a section is opened, the previously opened section will be closed.',
     },
-    sections: {
-      defaultValue: [],
-      description: 'Accordion children',
-      control: {
-        type: 'array',
-      },
+    sectionCount: {
+      control: { type: 'range', min: 1, max: sampleSections.length, step: 1 },
+      description: 'Adjust sample section items count',
     },
   },
 };
 
-export default meta;
-type Story = StoryObj<{} & IAccordionProps>;
+type IStory = StoryObj<StoryProps>;
 
-export const Dynamic: Story = {
+export const Dynamic: IStory = {
   name: 'Accordion',
   args: {
-    linked: true,
-    sections: [
-      {
-        title: <span>First Section</span>,
-        children: <p>This is the content for the first section</p>,
-        onOpen: () => console.log('open first item'),
-        onClose: () => console.log('close first item'),
-      },
-      {
-        title: <span>Second Section</span>,
-        children: <p>This is the content for the second section</p>,
-        onOpen: () => console.log('open second item'),
-        onClose: () => console.log('close second item'),
-      },
-      {
-        title: <span>Third Section</span>,
-        children: <p>This is the content for the third section</p>,
-        onOpen: () => console.log('open third item'),
-        onClose: () => console.log('close third item'),
-      },
-    ],
+    linked: false,
+    sectionCount: 3,
   },
-  render: ({ linked, sections }) => {
-    return <Accordion linked={Boolean(linked)} sections={sections} />;
+  render: ({ linked, sectionCount }) => {
+    return (
+      <Accordion.Root linked={linked} initialOpenSection={-1}>
+        {sampleSections
+          .slice(0, sectionCount)
+          .map(
+            (
+              { title, children, onOpen, onClose }: IAccordionSectionProps,
+              index,
+            ) => (
+              <Accordion.Section
+                onOpen={onOpen}
+                onClose={onClose}
+                title={title}
+                key={index}
+              >
+                {children}
+              </Accordion.Section>
+            ),
+          )}
+      </Accordion.Root>
+    );
   },
 };
+
+export default meta;

packages/libs/react-ui/src/components/Accordion/Accordion.tsx

@@ -1,43 +1,53 @@
-'use client';
+import { IAccordionSectionProps } from '.';
 
-import { AccordionSection, IAccordionSectionProps } from './AccordionSection';
+import type { FC, FunctionComponentElement } from 'react';
+import React, { useEffect, useState } from 'react';
 
-import React, { FC, useState } from 'react';
-
-export interface IAccordionProps {
-  sections: Omit<IAccordionSectionProps, 'isOpen' | 'onToggle'>[];
+export interface IAccordionRootProps {
+  children?: FunctionComponentElement<IAccordionSectionProps>[];
   linked?: boolean;
+  initialOpenSection?: number;
 }
 
-export const Accordion: FC<IAccordionProps> = ({ sections, linked = true }) => {
-  const [expandedSections, setExpandedSections] = useState<number[]>([]);
-  const handleOpen = (index: number): void => {
-    if (linked) setExpandedSections([index]);
-    else setExpandedSections([...expandedSections, index]);
-  };
-  const handleClose = (index: number): void => {
-    setExpandedSections(expandedSections.filter((item) => item !== index));
-  };
-
-  const isOpen = (index: number): boolean => expandedSections.includes(index);
+export const AccordionRoot: FC<IAccordionRootProps> = ({
+  children,
+  linked = false,
+  initialOpenSection = undefined,
+}) => {
+  const [openSections, setOpenSections] = useState([initialOpenSection]);
 
-  const handleToggle = (index: number): void => {
-    if (isOpen(index)) handleClose(index);
-    else handleOpen(index);
-  };
+  useEffect(() => {
+    if (linked && openSections.length > 1) {
+      const lastOpen = openSections.pop() || undefined;
+      setOpenSections([lastOpen]);
+    }
+  }, [linked]);
 
   return (
-    <div data-testid="kda-accordion-wrapper">
-      {sections.map((section, index) => (
-        <AccordionSection
-          {...section}
-          isOpen={isOpen(index)}
-          onToggle={() => handleToggle(index)}
-          key={String(section.title)}
-        >
-          {section.children}
-        </AccordionSection>
-      ))}
+    <div data-testid="kda-accordion-sections">
+      {React.Children.map(children, (section, sectionIndex) =>
+        React.cloneElement(
+          section as React.ReactElement<
+            HTMLElement | IAccordionSectionProps,
+            | string
+            | React.JSXElementConstructor<JSX.Element & IAccordionSectionProps>
+          >,
+          {
+            index: sectionIndex,
+            isOpen: openSections.includes(sectionIndex),
+            onOpen: () => section?.props.onOpen?.(),
+            onClose: () => section?.props.onClose?.(),
+            onClick: () =>
+              openSections.includes(sectionIndex)
+                ? setOpenSections(
+                    openSections.filter((i) => i !== sectionIndex),
+                  )
+                : setOpenSections(
+                    linked ? [sectionIndex] : [...openSections, sectionIndex],
+                  ),
+          },
+        ),
+      )}
     </div>
   );
 };