trepur_components 2.3.8 → 2.3.9

package/src/components/Collapsible/index.tsx

@@ -1,128 +1,169 @@
-import { useState, useEffect } from 'react';
+import {
+  forwardRef,
+  HTMLAttributes,
+  useContext,
+  createContext,
+  useState,
+  useMemo,
+} from 'react';
 
-import { HorizontalLine } from '@components/HorizontalLine';
 import { Icon } from '@components/Icon';
-import { Image, type Props as imageProps } from '@components/Image';
+import { Image, ImageProps } from '@components/Image';
 import {
   faChevronDown,
   faChevronUp,
 } from '@fortawesome/fontawesome-free-solid';
-import { type IconProp } from '@fortawesome/fontawesome-svg-core';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  preText?: string;
-  title?: string;
-  subtitle?: string;
-  imageProps?: imageProps;
-  children?: string | JSX.Element;
+import clsx from 'clsx';
+
+export interface CollapsibleContextProps {
+  loading?: boolean;
+  expanded?: boolean;
+  setExpanded?: (expanded: boolean) => void;
 }
 
-export const Collapsible = ({
-  id,
-  className,
-  preText,
-  title,
-  subtitle,
-  imageProps,
-  children,
-}: Props) => {
+const CollapsibleContext = createContext<CollapsibleContextProps | null>(null);
+
+const CollapsibleComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & CollapsibleContextProps
+>(({ id, className, children, loading, ...props }, ref) => {
   const [expanded, setExpanded] = useState(false);
 
-  useEffect(() => {
-    const coll = document.getElementsByClassName('collapsible');
-    let i: number;
-
-    for (i = 0; i < coll.length; i++) {
-      coll[i]?.addEventListener('click', function (this: any, err: any) {
-        const content = this.nextElementSibling;
-
-        const scrollHeight: string = content.scrollHeight.toString();
-        if (content.style.maxHeight === '0px') {
-          content.style.maxHeight = `${scrollHeight}px`;
-        } else {
-          content.style.maxHeight = '0px';
-        }
-      });
-    }
-  });
-
-  const classList = classNames(
-    className,
-    'w-full border-b border-lightest-grey duration-300 hover:cursor-pointer transition-opactiy',
-  )
-
-  const contentWrapperClassList = classNames(
-    {
-      'mb-4 mt-2 max-h-max': expanded,
-      'max-h-0': !expanded,
-    },
-    'w-auto overflow-hidden px-4',
-  )
-
-  const expandItem = (e: any): void => {
-    const content = e.currentTarget.nextElementSibling;
-    const scrollHeight: string = content.scrollHeight.toString();
-    if (!expanded) {
-      content.style.maxHeight = `${scrollHeight}px`;
-    } else {
-      content.style.maxHeight = '0px';
-    }
-    setExpanded(!expanded);
-  }
+  const state = useMemo(
+    () => ({
+      loading,
+      expanded,
+      setExpanded,
+    }),
+    [loading, expanded, setExpanded],
+  );
 
   return (
-    <div id={id} className={classList}>
+    <CollapsibleContext.Provider value={state}>
       <div
-        onClick={(e) => {
-          expandItem(e);
-        }}
-        className="flex h-24 px-4 sm:pr-8"
+        id={id}
+        className="w-full rounded-2xl bg-white hover:cursor-pointer"
+        ref={ref}
+        {...props}
       >
-        {imageProps !== undefined && (
-          <Image
-            {...imageProps}
-            width={3}
-            height={3}
-            className=" my-auto flex-none rounded-2xl"
-          />
-        )}
-        <div className="mx-4 my-auto grid w-full">
-          {preText !== undefined && (
-            <h4 className="truncate text-xxs text-light-grey md:text-xs">
-              {preText}
-            </h4>
-          )}
-          {title !== undefined && (
-            <h4 className="truncate text-sm md:text-md">{title}</h4>
-          )}
-          {subtitle !== undefined && (
-            <h5 className="truncate text-xs md:text-sm">{subtitle}</h5>
-          )}
-        </div>
-        {children !== undefined && (
-          <div className="my-auto flex-none">
-            <Icon
-              icon={
-                expanded
-                  ? (faChevronUp as IconProp)
-                  : (faChevronDown as IconProp)
-              }
-            />
-          </div>
-        )}
+        {children}
+      </div>
+    </CollapsibleContext.Provider>
+  );
+});
+
+const CollapsibleHeader = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ children, ...props }, ref) => {
+  const { expanded, setExpanded } = useContext(CollapsibleContext) || {};
+  return (
+    <div
+      className="flex h-24 pr-4 sm:pr-8"
+      onClick={() => setExpanded?.(!expanded)}
+      ref={ref}
+      {...props}
+    >
+      {children}
+      <div className="my-auto flex-none">
+        <Icon icon={expanded ? faChevronDown : faChevronUp} />
       </div>
-      {children !== undefined && (
-        <div
-          className={contentWrapperClassList}
-          style={{ transition: 'max-height 0.2s ease-out' }}
-        >
-          <HorizontalLine colour="grey" />
-          <div className="pb-2 pt-4">{children}</div>
-        </div>
+    </div>
+  );
+});
+
+const CollapsibleHeaderContent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ children, ...props }, ref) => (
+  <div className="mx-4 my-auto grid w-full" ref={ref} {...props}>
+    {children}
+  </div>
+));
+
+const CollapsibleImage = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & ImageProps
+>(({ children, src, ...props }, ref) => (
+  <div className="aspect-square flex-none p-4">
+    <Image src={src} className="h-full rounded-2xl" {...props} />
+  </div>
+));
+
+const CollapsibleLabel = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ ...props }, ref) => (
+  <p
+    className="text-xxs text-light-grey truncate md:text-xs"
+    ref={ref}
+    {...props}
+  />
+));
+
+const CollapsibleTitle = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ ...props }, ref) => (
+  <p className="md:text-md truncate text-sm" ref={ref} {...props} />
+));
+
+const CollapsibleSubtitle = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ ...props }, ref) => (
+  <p className="truncate text-xs md:text-sm" ref={ref} {...props} />
+));
+
+const CollapsibleContent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ children, ...props }, ref) => {
+  const { expanded } = useContext(CollapsibleContext) || {};
+  return (
+    <div
+      className={clsx(
+        'w-auto overflow-scroll px-4 transition-max-height duration-300',
+        {
+          'max-h-32': expanded,
+          'max-h-0': !expanded,
+        },
       )}
+      ref={ref}
+      {...props}
+    >
+      <div className="pb-4">{children}</div>
     </div>
   );
-}
+});
+
+const CollapsibleText = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ ...props }, ref) => (
+  <p className="text-xs md:text-sm" ref={ref} {...props} />
+));
+
+CollapsibleComponent.displayName = 'Collapsible';
+
+CollapsibleHeader.displayName = 'Collapsible.Header';
+CollapsibleContent.displayName = 'Collapsible.Content';
+CollapsibleImage.displayName = 'Collapsible.Image';
+CollapsibleLabel.displayName = 'Collapsible.Label';
+CollapsibleTitle.displayName = 'Collapsible.Title';
+CollapsibleSubtitle.displayName = 'Collapsible.Subtitle';
+CollapsibleHeaderContent.displayName = 'Collapsible.HeaderContent';
+CollapsibleText.displayName = 'Collapsible.Text';
+
+const Collapsible = Object.assign(CollapsibleComponent, {
+  Header: CollapsibleHeader,
+  HeaderContent: CollapsibleHeaderContent,
+  Image: CollapsibleImage,
+  Label: CollapsibleLabel,
+  Title: CollapsibleTitle,
+  Subtitle: CollapsibleSubtitle,
+  Content: CollapsibleContent,
+  Text: CollapsibleText,
+});
+
+export { Collapsible };

package/src/components/Counter/Counter.stories.tsx

@@ -1,16 +1,17 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Counter } from '.';
+import { Counter } from './';
+import { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'Components/Counter',
+  title: 'V2Components/Counter',
   component: Counter,
-  argTypes: {
-    ...idAndClassName,
+  args: {
+    children: [
+      <Counter.DecrementIcon />,
+      <Counter.Count />,
+      <Counter.IncrementIcon />,
+    ],
   },
-  args: {},
-}
+} satisfies Meta<typeof Counter>;
 
 export default meta;
 

package/src/components/Counter/index.tsx

@@ -1,42 +1,98 @@
-import React, { useState } from 'react';
+import {
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
 
 import { Icon } from '@components/Icon';
 import {
   faChevronCircleLeft,
   faChevronCircleRight,
 } from '@fortawesome/fontawesome-free-solid';
-import { type IconProp } from '@fortawesome/fontawesome-svg-core';
 
-export interface Props {
-  id?: string;
+export interface CounterContextProps {
+  currentCount?: number;
+  setCurrentCount?: (val: number) => void;
   count?: number;
   onClick?: (count: number) => void;
 }
 
-export const Counter = ({ id, count = 0, onClick }: Props) => {
+const CounterContext = createContext<CounterContextProps | null>(null);
+
+const CounterComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & CounterContextProps
+>(({ children, count = 0 }, ref) => {
   const [currentCount, setCurrentCount] = useState(count);
 
+  const state = useMemo(
+    () => ({
+      currentCount,
+      setCurrentCount,
+    }),
+    [currentCount, setCurrentCount],
+  );
+
   return (
-    <div id={id} className="z-10 inline-block rounded-lg">
-      <div className="flex gap-8">
-        <div className="my-auto cursor-pointer">
-          <Icon
-            icon={faChevronCircleLeft as IconProp}
-            onClick={() => {
-              setCurrentCount(currentCount - 1);
-            }}
-          />
-        </div>
-        <div className="overflow-hidden text-center">{currentCount}</div>
-        <div className="my-auto cursor-pointer">
-          <Icon
-            icon={faChevronCircleRight as IconProp}
-            onClick={() => {
-              setCurrentCount(currentCount + 1);
-            }}
-          />
-        </div>
+    <CounterContext.Provider value={state}>
+      <div ref={ref} className="flex gap-6 rounded-lg ">
+        {children}
       </div>
+    </CounterContext.Provider>
+  );
+});
+
+const CounterDecrementIcon = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(() => {
+  const { setCurrentCount, currentCount = 0 } =
+    useContext(CounterContext) || {};
+  return (
+    <div className="my-auto cursor-pointer">
+      <Icon
+        icon={faChevronCircleLeft}
+        onClick={() => setCurrentCount?.(currentCount - 1)}
+      />
     </div>
   );
-}
+});
+
+const CounterIncrementIcon = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(() => {
+  const { setCurrentCount, currentCount = 0 } =
+    useContext(CounterContext) || {};
+  return (
+    <div className="my-auto cursor-pointer">
+      <Icon
+        icon={faChevronCircleRight}
+        onClick={() => setCurrentCount?.(currentCount + 1)}
+      />
+    </div>
+  );
+});
+
+const CounterCount = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  () => {
+    const { currentCount } = useContext(CounterContext) || {};
+    return <div className="overflow-hidden text-center">{currentCount}</div>;
+  },
+);
+
+CounterComponent.displayName = 'Counter';
+CounterDecrementIcon.displayName = 'Counter.DecrementIcon';
+CounterIncrementIcon.displayName = 'Counter.IncrementIcon';
+CounterCount.displayName = 'Counter.Count';
+
+const Counter = Object.assign(CounterComponent, {
+  DecrementIcon: CounterDecrementIcon,
+  IncrementIcon: CounterIncrementIcon,
+  Count: CounterCount,
+});
+
+export { Counter };

package/src/components/DetailUpdater/DetailUpdater.stories.tsx

@@ -1,67 +1,11 @@
+import { DetailUpdater } from './';
 import { Input } from '@components/Input';
 import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { DetailUpdater } from '.';
+import { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
   title: 'Components/Detail Updater',
   component: DetailUpdater,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-
-    title: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    description: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    expandText: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: '',
-      }
-    },
-    collapseText: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: '',
-      }
-    },
-    ctaText: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: '',
-      }
-    },
-    onClick: {
-      description: '',
-      control: 'array',
-      table: {
-        category: '',
-      }
-    },
-    fields: {
-      description: 'The default value of the input',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    }
-  },
   args: {
     title: 'Legal Name',
     description: 'This is a description to let you know what to do',
@@ -75,18 +19,16 @@ const meta = {
       action('Updated')(value);
     },
     children: (
-      <Input
-        withValidation
-        bgColour="white"
-        label="Title"
-        placeholder="Insert title here"
-        className="mb-4"
-        required
-        // onChange={(e) => setTitle(e.target.value)}
-      />
+      <Input placeholder="Insert title here">
+        <Input.Item>
+          <Input.Label required>Title</Input.Label>
+          <Input.Box />
+          <Input.Validation />
+        </Input.Item>
+      </Input>
     ),
-  }
-}
+  },
+} satisfies Meta<typeof DetailUpdater>;
 
 export default meta;
 

package/src/components/DetailUpdater/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 
+import { Card } from '../';
 import { Button } from '@components/Button';
 import 'keen-slider/keen-slider.min.css';
 
@@ -35,12 +36,11 @@ export const DetailUpdater = ({
   value,
 }: DetailUpdatesProps) => {
   const [expanded, setExpanded] = useState(false);
-  const classList = className;
 
   const handleSubmit = (): void => {
     onSubmit?.();
     setExpanded(false);
-  }
+  };
   // const handleChange = (e: any): void => {
   //   const value = e.target.value
   //   const id = e.target.id
@@ -62,13 +62,13 @@ export const DetailUpdater = ({
   // }
 
   return (
-    <div id={id} className={classList}>
+    <Card id={id} className={className}>
       {!expanded && (
         <div className="mx-4 py-6">
           <div className="flex justify-between">
             <p className="font-semiBold text-ink">{title}</p>
             <p
-              className="cursor-pointer font-semiBold text-ink underline"
+              className="font-semiBold text-ink cursor-pointer underline"
               onClick={() => {
                 setExpanded(true);
               }}
@@ -84,7 +84,7 @@ export const DetailUpdater = ({
           <div className="flex justify-between">
             <p className="font-semiBold text-ink">{title}</p>
             <p
-              className="cursor-pointer font-semiBold text-ink underline"
+              className="font-semiBold text-ink cursor-pointer underline"
               onClick={() => {
                 onCancel?.();
                 setExpanded(false);
@@ -102,7 +102,6 @@ export const DetailUpdater = ({
           </Button>
         </div>
       )}
-      <hr className="text-lightest-grey shadow" />
-    </div>
+    </Card>
   );
-}
+};