Feat: Basic collapsible component added (#407)

Author: decipher-cs

src/components/ui/Button/Button.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React from 'react';
+import React, {ButtonHTMLAttributes, DetailedHTMLProps, PropsWithChildren} from 'react';
 import {customClassSwitcher} from '~/core';
 
 import ButtonPrimitive from '~/core/primitives/Button';
@@ -9,17 +9,12 @@ const COMPONENT_NAME = 'Button';
 
 
 export type ButtonProps = {
-    children?: React.ReactNode;
-    color?: string;
-    type?: 'button' | 'submit' | 'reset';
-    className?: string;
     customRootClass?: string;
     variant?: 'solid' | 'outline' | 'soft' | 'ghost';
     size?: 'small' | 'medium' | 'large' | 'x-large';
-    props?: any
-}
+} & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & PropsWithChildren
 
-const Button = ({children, type='button', customRootClass='', color = '', className='', variant='solid', size='', ...props}: ButtonProps) => {
+const Button = ({children, type='button', customRootClass='', className='', color, variant='solid', size='medium', ...props}: ButtonProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
     // apply data attribute for accent color
     // apply attribute only if color is present

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

@@ -0,0 +1,72 @@
+import React, {useState} from 'react';
+import {Meta} from '@storybook/react';
+import Collapsible from './Collapsible';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+import Button from '../Button/Button';
+
+const placeholderText= ['“One of the penalties for refusing to participate in politics is that you end up being governed by your inferiors.“ – Plato',
+    '“The superior man understands what is right; the inferior man understands what will sell.” – Confucius',
+    '“There are no secrets on the internet.” – Paul Babicki'];
+
+
+const meta: Meta<typeof Collapsible> = {
+    component: Collapsible,
+    title: 'UI/Data Display/Collapsible',
+};
+
+export default meta;
+
+export const Default = () => {
+    return (<section>
+        <SandboxEditor className=''>
+            <Collapsible>
+                <div className='grid gap-4 border-2 border-zinc-200 p-2'>
+                    {placeholderText.map((text) =>
+                        <p key={text}> {text} </p>,
+                    )}
+                </div>
+            </Collapsible>
+        </SandboxEditor>
+    </section>
+    );
+};
+
+export const WithTitle= () => {
+    return (<section>
+        <SandboxEditor className=''>
+            <Collapsible title='Hello World'>
+                <div className='grid gap-4 border-2 border-zinc-200'>
+                    {placeholderText.map((text) =>
+                        <p key={text}> {text} </p>,
+                    )}
+                </div>
+            </Collapsible>
+        </SandboxEditor>
+    </section>
+    );
+};
+
+export const ExternalTrigger= () => {
+    const [open, setOpen] =useState(true);
+
+    const toggleHidden=() => setOpen((p) => !p);
+
+    return (<section>
+        <SandboxEditor className=''>
+            <Collapsible
+                title='Quotes'
+                open={open}
+                trigger={<Button onClick={toggleHidden}>{open?'OPEN':'CLOSE'}</Button>}
+            >
+
+                <div className='grid gap-4 border-2 border-zinc-200'>
+                    {placeholderText.map((text) =>
+                        <p key={text}> {text} </p>,
+                    )}
+                </div>
+
+            </Collapsible>
+        </SandboxEditor>
+    </section>
+    );
+};

src/components/ui/Collapsible/Collapsible.tsx

@@ -0,0 +1,59 @@
+import React, {PropsWithChildren, ReactNode, useState} from 'react';
+import ButtonPrimitive from '~/core/primitives/Button';
+
+/*
+ * CHECKLIST
+ *
+ * Add rtl and ltr support
+ * Support animations
+ * Support basic poitioning of button
+ * Add title to collapsible
+ *
+ * */
+
+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 default Collapsible;