changes to the component calls to improve collapsible component #528

Author: g-charan

src/components/ui/Collapsible/Collapsible.tsx

@@ -5,11 +5,8 @@ import React, {
   SetStateAction,
   useState,
 } from "react";
-import CollapsibleContent from "./fragments/CollapsibleContent";
-import CollapsibleHeader from "./fragments/CollapsibleHeader";
-import CollapsibleItem from "./fragments/CollapsibleItem";
-import CollapsibleRoot from "./fragments/CollapsibleRoot";
-import CollapsibleTrigger from "./fragments/CollapsibleTrigger";
+
+import CollapsibleComponent from ".";
 
 /*
  * CHECKLIST
@@ -50,44 +47,52 @@ const Collapsible = ({ children, items, ...props }: CollapsibleProps) => {
   // Onclick Handler
 
   return (
-    <CollapsibleRoot
+    <CollapsibleComponent.Root
       open={props.open ?? open}
       onOpenChange={props.onOpenChange ?? onOpenChange}
       disabled={disabled}
     >
-      <CollapsibleHeader title={title}>
+      <CollapsibleComponent.Header title={title}>
         {/* Button */}
 
-          <CollapsibleTrigger asChild>
+          <CollapsibleComponent.Trigger asChild>
             {props.trigger && props.trigger}
-          </CollapsibleTrigger>
+          </CollapsibleComponent.Trigger>
 
-      </CollapsibleHeader>
+      </CollapsibleComponent.Header>
 
       {/* Conditonal Loop */}
       {disabled ? (
         // loops through all the items with no conditions
         items.map((item, index) => (
-          <CollapsibleItem key={index}>{item.content}</CollapsibleItem>
+          <CollapsibleComponent.Item key={index}>{item.content}</CollapsibleComponent.Item>
         ))
       ) : (
         <>
           {/* Default value to be shown */}
           {defaultPos!=undefined ? items[defaultPos] && (
-            <CollapsibleItem>{items[defaultPos].content}</CollapsibleItem>
+            <CollapsibleComponent.Item>{items[defaultPos].content}</CollapsibleComponent.Item>
           ) : null}
           {/* Collapsable Content  */}
-          <CollapsibleContent>
+          <CollapsibleComponent.Content>
             {items.map((item, index) => (
               defaultPos!=undefined? item !== items[defaultPos] && (
-                <CollapsibleItem key={index}>{item.content}</CollapsibleItem>
-              ) : <CollapsibleItem key={index}>{item.content}</CollapsibleItem>
+                <CollapsibleComponent.Item key={index}>{item.content}</CollapsibleComponent.Item>
+              ) : <CollapsibleComponent.Item key={index}>{item.content}</CollapsibleComponent.Item>
             ))}
-          </CollapsibleContent>
+          </CollapsibleComponent.Content>
         </>
       )}
-    </CollapsibleRoot>
+    </CollapsibleComponent.Root>
   );
 };
 
+
+
+Collapsible.Root = CollapsibleComponent.Root;
+Collapsible.Header = CollapsibleComponent.Header;
+Collapsible.Trigger = CollapsibleComponent.Trigger;
+Collapsible.Content = CollapsibleComponent.Content;
+Collapsible.Item = CollapsibleComponent.Item;
+
 export default Collapsible;

src/components/ui/Collapsible/fragments/CollapsibleContent.tsx

@@ -8,7 +8,7 @@ type CollapsibleContentProps = {
 
 }
 
-const CollapsibleContent: React.FC<CollapsibleContentProps> = ({children,className=''}:CollapsibleContentProps) => {
+const CollapsibleContent = ({children,className=''}:CollapsibleContentProps) => {
 
     const {rootClass,open} = useContext(CollapsibleContext)
 

src/components/ui/Collapsible/fragments/CollapsibleItem.tsx

@@ -8,7 +8,7 @@ type CollapsibleItemProps = {
 
 };
 
-const CollapsibleItem: React.FC<CollapsibleItemProps> = ({
+const CollapsibleItem = ({
   children,
   className = "",
 

src/components/ui/Collapsible/index.tsx

@@ -0,0 +1,16 @@
+import CollapsibleContent from "./fragments/CollapsibleContent";
+import CollapsibleHeader from "./fragments/CollapsibleHeader";
+import CollapsibleItem from "./fragments/CollapsibleItem";
+import CollapsibleRoot from "./fragments/CollapsibleRoot";
+import CollapsibleTrigger from "./fragments/CollapsibleTrigger";
+
+
+const CollapsibleComponent = {
+  Root: CollapsibleRoot,
+  Header: CollapsibleHeader,
+  Trigger: CollapsibleTrigger,
+  Content: CollapsibleContent,
+  Item: CollapsibleItem,
+} as const;
+
+export default CollapsibleComponent;

src/components/ui/Collapsible/stories/Collapsible.stories.tsx

@@ -3,11 +3,7 @@ import React, { useState } from "react";
 import SandboxEditor from "~/components/tools/SandboxEditor/SandboxEditor";
 import Collapsible from "~/components/ui/Collapsible/Collapsible";
 import Button from "../../Button/Button";
-import CollapsibleContent from "../fragments/CollapsibleContent";
-import CollapsibleHeader from "../fragments/CollapsibleHeader";
 import CollapsibleItem from "../fragments/CollapsibleItem";
-import CollapsibleRoot from "../fragments/CollapsibleRoot";
-import CollapsibleTrigger from "../fragments/CollapsibleTrigger";
 
 const Items = [
   {
@@ -82,15 +78,15 @@ export const CustomTrigger = () => {
   return (
     <section>
       <SandboxEditor className="">
-        <CollapsibleRoot open={open} onOpenChange={setOpen}>
-          <CollapsibleHeader title="Composable">
-            <CollapsibleTrigger>
+        <Collapsible.Root open={open} onOpenChange={setOpen}>
+          <Collapsible.Header title="Composable">
+            <Collapsible.Trigger>
               <Button style={{ margin: "0" }}>{open ? "CLOSE" : "OPEN"}</Button>
-            </CollapsibleTrigger>
-          </CollapsibleHeader>
-          <CollapsibleItem>{Items[0].content}</CollapsibleItem>
-          <CollapsibleContent>{Items.map((item) => item != Items[0] && <CollapsibleItem>{item.content}</CollapsibleItem>)}</CollapsibleContent>
-        </CollapsibleRoot>
+            </Collapsible.Trigger>
+          </Collapsible.Header>
+          <Collapsible.Item>{Items[0].content}</Collapsible.Item>
+          <Collapsible.Content>{Items.map((item) => item != Items[0] && <CollapsibleItem>{item.content}</CollapsibleItem>)}</Collapsible.Content>
+        </Collapsible.Root>
       </SandboxEditor>
     </section>
   );