Changes to collapsible component #528 (#677)

Author: g-charan

src/components/ui/Collapsible/Collapsible.tsx

@@ -1,5 +1,12 @@
-import React, { PropsWithChildren, ReactNode, useState } from 'react';
-import ButtonPrimitive from '~/core/primitives/Button';
+import React, {
+  Dispatch,
+  PropsWithChildren,
+  ReactNode,
+  SetStateAction,
+  useState,
+} from "react";
+
+import CollapsibleComponent from ".";
 
 /*
  * CHECKLIST
@@ -11,49 +18,72 @@ import ButtonPrimitive from '~/core/primitives/Button';
  *
  * */
 
-export type CollapsibleProps = { open?: boolean, title?: string, trigger?: ReactNode} & PropsWithChildren;
-
-const ExpandIcon = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className='size-6'>
-        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
-    </svg>
-);
-
-const CollapseIcon = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className='size-6'>
-        <path strokeLinecap="round" strokeLinejoin="round" d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25" />
-    </svg>
-);
-
-const Collapsible = ({ children, title, trigger, ...props }: CollapsibleProps) => {
-    const [open, setOpen] = useState(props.open ?? true);
-
-    const toggleCollapse = () => setOpen((p) => !p);
-
-    return (
-        <article>
-            <span style={{ display: 'flex', alignItems: 'center' }}>
-                {title && <p>{title}</p>}
-                {
-                    trigger ||
-                    <ButtonPrimitive style={{ marginInlineStart: 'auto' }} onClick={toggleCollapse}>{open ? <CollapseIcon/> : <ExpandIcon/>}</ButtonPrimitive>
-                }
-            </span>
-
-            <div
-                aria-hidden={!open}
-                style={{
-                    overflow: 'hidden',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: (props.open ?? open) ? 'auto' : '0',
-                    transition: 'all'
-                }}>
-                {children}
-            </div>
-
-        </article>
-    );
+export type CollapsibleProps = {
+  open?: boolean;
+  title?: string;
+  trigger?: ReactNode;
+  
+  disabled?: boolean;
+  collapsibleContent?: ReactNode;
+
+
+  onOpenChange?: Dispatch<SetStateAction<boolean>>;
+} & PropsWithChildren;
+
+const Collapsible = ({ children, ...props }: CollapsibleProps) => {
+  //State values if not provided by the user
+  const [open, onOpenChange] = useState(props.open ?? false);
+
+  
+  // Disable or enable collapse
+  const disabled = props.disabled ?? false;
+
+  // Title for the component
+  const title = props.title;
+
+  // Collapsible Content
+  const collapsibleContent = props.collapsibleContent;
+
+  return (
+    <CollapsibleComponent.Root
+      open={props.open ?? open}
+      onOpenChange={props.onOpenChange ?? onOpenChange}
+      disabled={disabled}
+    >
+      <CollapsibleComponent.Header title={title}>
+        {/* Button */}
+        
+          <CollapsibleComponent.Trigger asChild>
+            {props.trigger && props.trigger}
+          </CollapsibleComponent.Trigger>
+       
+      </CollapsibleComponent.Header>
+
+      {/* Conditonal Loop */}
+      {disabled ? (
+        // loops through all the items with no toggle
+         <>{children && children}
+         {collapsibleContent && collapsibleContent}</>
+      ) : (
+        <>
+          {/* Default Content */}
+          {children && children}
+          {/* Collapsable Content  */}
+          <CollapsibleComponent.Content>
+              {collapsibleContent && collapsibleContent}
+          </CollapsibleComponent.Content>
+        </>
+      )}
+    </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/contexts/CollapsibleContext.tsx

@@ -0,0 +1,20 @@
+import { createContext, Dispatch, SetStateAction } from "react";
+
+type CollapsibleContextType = {
+  rootClass?: string;
+  open?: boolean;
+  onOpenChange?: Dispatch<SetStateAction<boolean>>;
+  disabled?: boolean;
+  defaultOpen?: boolean;
+};
+
+const defaultContext: CollapsibleContextType = {
+  rootClass: "",
+  open: false,
+  onOpenChange: () => {},
+  disabled: false,
+  defaultOpen: false,
+};
+
+export const CollapsibleContext =
+  createContext<CollapsibleContextType>(defaultContext);

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

@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+import React, { useContext } from 'react';
+import { CollapsibleContext } from '../contexts/CollapsibleContext';
+
+type CollapsibleContentProps = {
+    children: React.ReactNode;
+    className?: string;
+    
+}
+
+const CollapsibleContent = ({children,className=''}:CollapsibleContentProps) => {
+  
+    const {rootClass,open} = useContext(CollapsibleContext)
+  
+    return (
+      <div
+        className={clsx(`${rootClass}-content`, className)}
+        aria-hidden={!open}
+        data-state={open? "expanded" : "collapsed"}
+      >
+        {open && children}
+      </div>
+    );
+}
+
+export default CollapsibleContent

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

@@ -0,0 +1,18 @@
+import clsx from 'clsx'
+import React, { useContext } from 'react'
+import { CollapsibleContext } from '../contexts/CollapsibleContext'
+
+type CollapsibleHeaderProps = {
+    children?: React.ReactNode
+    className?: string,
+    title?: string
+}
+
+const CollapsibleHeader = ({children,className="",title=""}: CollapsibleHeaderProps) => {
+    const { rootClass } = useContext(CollapsibleContext)
+  return (
+    <div className={clsx(`${rootClass}-header`,className)}>{title && <p>{title}</p>}{children}</div>
+  )
+}
+
+export default CollapsibleHeader

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

@@ -0,0 +1,23 @@
+import clsx from "clsx";
+import React, { useContext } from "react";
+import { CollapsibleContext } from "../contexts/CollapsibleContext";
+
+type CollapsibleItemProps = {
+  children: React.ReactNode;
+  className?: string;
+  
+};
+
+const CollapsibleItem = ({
+  children,
+  className = "",
+
+}: CollapsibleItemProps) => {
+  const { rootClass } = useContext(CollapsibleContext);
+
+  return (
+    <div className={clsx(`${rootClass}-item`, className)} >{children}</div>
+  );
+};
+
+export default CollapsibleItem;

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

@@ -0,0 +1,37 @@
+import clsx from 'clsx';
+import React, { Dispatch, SetStateAction } from 'react';
+import { customClassSwitcher } from '~/core';
+import { CollapsibleContext } from '../contexts/CollapsibleContext';
+
+
+
+
+const COMPONENT_NAME = 'Collapsible'
+
+export type CollapsibleRootProps = {
+  children: React.ReactNode;
+  customRootClass?: string;
+  open: boolean;
+  onOpenChange: Dispatch<SetStateAction<boolean>>;
+  className?: string
+  disabled?: boolean
+};
+
+const CollapsibleRoot = ({children,className="",disabled, customRootClass, open, onOpenChange}: CollapsibleRootProps) => {
+
+    const rootClass = customClassSwitcher(customRootClass,COMPONENT_NAME)
+  
+    return (
+    <CollapsibleContext.Provider
+    value={{
+        rootClass,
+        open,
+        onOpenChange,
+        disabled
+    }}
+    ><div className={clsx(`${rootClass}-root`,className)}>
+        {children}</div></CollapsibleContext.Provider>
+  )
+}
+
+export default CollapsibleRoot

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

@@ -0,0 +1,43 @@
+import clsx from 'clsx'
+import React, { useContext } from 'react'
+import Primitive from '~/core/primitives/Primitive'
+import { CollapsibleContext } from '../contexts/CollapsibleContext'
+
+
+type CollapsibleTriggerProps = {
+    children?: React.ReactNode
+    asChild?: boolean
+    className?: string
+    id?: string
+    key?: string
+    style?: React.CSSProperties
+    index?: number
+}
+
+
+const CollapsibleTrigger = ({children,className, ...props}: CollapsibleTriggerProps) => {
+    const {rootClass,open,onOpenChange,disabled} = useContext(CollapsibleContext)
+      
+    const toggleCollapse = () => onOpenChange && !disabled && onOpenChange((p) => (!p))
+  return (
+    <Primitive.button
+      className={clsx(`${rootClass}-trigger`, className)}
+      role={"button"}
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          toggleCollapse();
+        }
+      }}
+      aria-expanded={open}
+      onClick={toggleCollapse}
+      {...props}
+
+    >
+      {children}
+    </Primitive.button>
+  );
+}
+
+export default CollapsibleTrigger

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;