trepur_components 2.3.8 → 2.3.9

package/src/components/ImageCard/index.tsx

@@ -0,0 +1,75 @@
+import { forwardRef, HTMLAttributes } from 'react';
+
+import { Image, ImageProps } from '@components/Image';
+import clsx from 'clsx';
+
+const ImageCardComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <div
+      className={clsx(
+        'grid max-w-96 overflow-hidden rounded-xl bg-white drop-shadow',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+
+const ImageCardImage = forwardRef<
+  HTMLImageElement,
+  HTMLAttributes<ImageProps> & ImageProps
+>(({ src, ...props }) => {
+  return (
+    <div className="h-64">
+      <Image src={src} {...props} />
+    </div>
+  );
+});
+
+const ImageCardContent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ children, ...props }, ref) => (
+  <div className="px-2 pb-4 pt-2" ref={ref} {...props}>
+    {children}
+  </div>
+));
+
+const ImageCardTitle = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ ...props }, ref) => <p className="text-lg" ref={ref} {...props} />);
+
+const ImageCardSubtitle = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ ...props }, ref) => <p className="text-sm" ref={ref} {...props} />);
+
+const ImageCardText = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ ...props }, ref) => <p className="text-md pt-2" ref={ref} {...props} />);
+
+ImageCardComponent.displayName = 'ImageCard';
+
+ImageCardImage.displayName = 'ImageCard.Image';
+ImageCardTitle.displayName = 'ImageCard.Title';
+ImageCardSubtitle.displayName = 'ImageCard.Subtitle';
+ImageCardContent.displayName = 'ImageCard.Content';
+ImageCardText.displayName = 'ImageCard.Text';
+
+const ImageCard = Object.assign(ImageCardComponent, {
+  Image: ImageCardImage,
+  Content: ImageCardContent,
+  Title: ImageCardTitle,
+  Subtitle: ImageCardSubtitle,
+  Text: ImageCardText,
+});
+
+export { ImageCard };

package/src/components/Input/Input.stories.tsx

@@ -1,81 +1,22 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Input } from '.';
 
 const meta = {
-  title: 'Components/Input',
+  title: 'V2Components/Input',
   component: Input,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-
-    label: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    placeholder: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    bold: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: '',
-      }
-    },
-    required: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: '',
-      }
-    },
-    withValidation: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: '',
-      }
-    },
-    errors: {
-      description: 'An array of errors to display',
-      control: 'array',
-      table: {
-        category: '',
-      }
-    },
-    value: {
-      description: 'The default value of the input',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    bgColour: {
-      type: { name: 'string', required: false },
-      options: ['primary', 'secondary', 'white', 'black', 'gold'],
-      description: 'The background colour of the component',
-      table: {
-        type: { summary: 'string' },
-      },
-      defaultValue: 'primary',
-      control: 'select',
-    }
-  },
   args: {
-    label: 'This is a label',
     placeholder: 'This is a placeholder',
-    errors: [],
-  }
-}
+    errors: ['tyhj', 'sdfghjk'],
+    children: [
+      <Input.Item>
+        <Input.Label required>This is a label</Input.Label>
+        <Input.Box />
+        <Input.Validation />
+      </Input.Item>,
+    ],
+  },
+} satisfies Meta<typeof Input>;
 
 export default meta;
 

package/src/components/Input/index.tsx

@@ -1,11 +1,15 @@
-import { useRef } from 'react';
+import {
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useContext,
+  useMemo,
+  useRef,
+} from 'react';
 
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
-export interface Props {
-  id?: string;
-  className?: string;
+export interface InputContextProps {
   autoComplete?: string;
   disabled?: boolean;
   formId?: string;
@@ -25,106 +29,111 @@ export interface Props {
   onFocus?: () => void;
   onClick?: () => void;
   errors?: string[];
-  errorState?: boolean;
   value?: string;
-  bgColour?: Colours;
 }
 
-export const Input = ({
-  id,
-  className,
-  autoComplete,
-  disabled,
-  formId,
-  height,
-  maxLength,
-  minLength,
-  pattern,
-  required = false,
-  readOnly,
-  label,
-  type,
-  name,
-  placeholder,
-  onChange,
-  onBlur,
-  onFocus,
-  onClick,
-  withValidation,
-  errors,
-  errorState = false,
-  value,
-}: Props) => {
-  const newId = id !== undefined ? `-${id}` : '';
+const InputContext = createContext<InputContextProps | null>(null);
 
-  const valueClassList = classNames(
-    {
-      'border-2 border-error': errors != null || errorState,
-    },
-    'w-full rounded-md bg-white py-2 pl-4 text-ink cursor-pointer border border-black text-md',
-  )
+const InputComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & InputContextProps
+>(({ children, errors, placeholder, ...props }, ref) => {
+  const state = useMemo(
+    () => ({
+      errors,
+      placeholder,
+      ...props,
+    }),
+    [errors, props],
+  );
+  return (
+    <InputContext.Provider value={state}>
+      <div ref={ref}>{children}</div>
+    </InputContext.Provider>
+  );
+});
 
-  const labelClassList = classNames({
-    'text-error': errors != null || errorState,
-  })
+const InputItem = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ children, ...props }, ref) => {
+    const btnRef = useRef<any>(null);
+    return (
+      <div
+        className="mt-4 w-full cursor-pointer bg-white"
+        onClick={() => btnRef.current?.focus()}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
 
-  const headerClassList = classNames(
-    className,
-    'mt-4 w-full bg-white cursor-pointer',
-  )
+const InputLabel = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & { required?: boolean }
+>(({ children, required = false }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className="font-regular absolute -mt-3 ml-3 flex items-center rounded-2xl bg-white px-1 text-sm"
+    >
+      <p>{children}</p>
+      {required && (
+        <p className="font-semiBold text-lg text-error-default">&nbsp;*</p>
+      )}
+    </div>
+  );
+});
 
-  const btnRef = useRef<any>(null);
+const InputBox = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ ...props }) => {
+    const { errors, placeholder } = useContext(InputContext) || {};
 
-  const handleClick = (): void => {
-    btnRef.current?.focus();
-  }
+    return (
+      <input
+        placeholder={placeholder}
+        className={clsx(
+          'text-ink text-md w-full cursor-pointer rounded-md border border-black bg-white py-2 pl-4',
+          {
+            'border-error border-2': errors != null,
+          },
+        )}
+        {...props}
+      />
+    );
+  },
+);
 
+const InputValidation = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ children, ...props }, ref) => {
+  const { errors } = useContext(InputContext) || {};
   return (
-    <>
-      <div id={id} className={headerClassList} onClick={handleClick}>
-        <div className="absolute -mt-3 ml-3 flex rounded-2xl bg-white px-1 text-sm font-regular">
-          <p className={labelClassList}>{label}</p>
-          {required && <p className="font-semiBold text-error">&nbsp;*</p>}
-        </div>
-        <input
-          ref={btnRef}
-          id={`input${newId}`}
-          className={valueClassList}
-          autoComplete={autoComplete}
-          disabled={disabled}
-          form={formId}
-          height={height}
-          maxLength={maxLength}
-          minLength={minLength}
-          pattern={pattern}
-          required={required}
-          readOnly={readOnly}
-          type={type}
-          name={name}
-          value={value}
-          placeholder={placeholder}
-          onChange={(e) => {
-            onChange?.(e);
-          }}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          onClick={onClick}
-        />
-      </div>
-      {withValidation && (
-        <div id={`errors${newId}`} className="text-sm font-regular text-error">
-          {errors?.map((error, i) => {
-            return (
-              <p
-                key={`error-msg-${i + 0}`}
-                className="mt-1 border-l-4 border-error pl-3"
-              >
-                {error}
-              </p>
-            );
-          })}
-        </div>
-      )}
-    </>
+    <div
+      ref={ref}
+      className="font-regular gap-y-2 text-sm text-error-default"
+      {...props}
+    >
+      {errors?.map((error, i) => {
+        return <p key={`error-msg-${i + 1}`}>{error}</p>;
+      })}
+    </div>
   );
-}
+});
+
+InputComponent.displayName = 'Input';
+InputItem.displayName = 'Input.Item';
+InputLabel.displayName = 'Input.Label';
+InputBox.displayName = 'Input.Box';
+InputValidation.displayName = 'Input.Validation';
+
+const Input = Object.assign(InputComponent, {
+  Item: InputItem,
+  Label: InputLabel,
+  Box: InputBox,
+  Validation: InputValidation,
+});
+
+export { Input };

package/src/components/MenuButton/MenuButton.stories.tsx

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
 import { MenuButton } from '.';
@@ -25,8 +25,8 @@ const meta = {
       control: 'array',
       table: {
         type: { summary: 'array' },
-      }
-    }
+      },
+    },
   },
   args: {
     backgroundColour: 'white',
@@ -36,8 +36,8 @@ const meta = {
       { name: 'Menu Item 2', href: '#' },
       { name: 'Menu Item 3', href: '#' },
       { name: 'Menu Item 4', href: '#' },
-    ]
-  }
+    ],
+  },
 };
 export default meta;
 

package/src/components/MenuButton/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { DropdownMenu } from '@components/DropdownMenu';
+import { Dropdown } from '@components/Dropdown';
 import { Image } from '@components/Image';
 import { type Colours } from '@utils/controls';
 import classNames from 'classnames';
@@ -26,7 +26,7 @@ export const MenuButton = ({
   const classList = classNames(
     className,
     'h-[45px] w-[80px] overflow-hidden rounded-full border-2 border-lightest-grey my-auto flex cursor-pointer justify-between pl-2 text-center hover:shadow-md',
-  )
+  );
 
   if (!menuItems) return <></>;
 
@@ -58,9 +58,9 @@ export const MenuButton = ({
       </div>
       {showMenu && (
         <div>
-          <DropdownMenu menuItems={menuItems} />
+          <Dropdown />
         </div>
       )}
     </div>
   );
-}
+};

package/src/components/Modal/Modal.stories.tsx

@@ -11,8 +11,8 @@ const meta = {
     docs: {
       description: {
         component: 'A Modal component',
-      }
-    }
+      },
+    },
   },
   argTypes: {
     id: {
@@ -33,12 +33,12 @@ const meta = {
           summary: 'Array',
         },
         defaultValue: { summary: 'undefined' },
-      }
+      },
     },
     onOverlayClick: {
       type: { name: 'function', required: false },
       description: 'Specifies the action to take when the overlay is clicked',
-    }
+    },
   },
   args: {
     visible: true,
@@ -57,8 +57,8 @@ const meta = {
         </p>
       </div>
     ),
-  }
-}
+  },
+};
 
 const Template = (args: any): React.ReactElement => {
   const [visible, setVisible] = useState<boolean>(false);
@@ -75,7 +75,7 @@ const Template = (args: any): React.ReactElement => {
       />
     </div>
   );
-}
+};
 
 export const _Modal = Template.bind({});
 

package/src/components/Modal/index.tsx

@@ -39,7 +39,7 @@ export const Modal = ({
 
     return () => {
       clearTimeout(timeoutId);
-    }
+    };
   }, [visible]);
 
   const classList = classNames(
@@ -48,7 +48,7 @@ export const Modal = ({
     },
     'block h-screen w-screen fixed right-0 top-0 z-50 opacity-0 transition-opacity duration-300 ease-linear ease-out',
     className,
-  )
+  );
 
   const childrenClassList = classNames(
     {
@@ -58,7 +58,7 @@ export const Modal = ({
         animationStyle === 'slideBottom',
     },
     ' mx-auto flex w-full md:w-auto fixed left-1/2 top-1/2 z-50 block -translate-x-1/2 -translate-y-1/2 transform opacity-0 transition-opacity duration-300 ease-linear ease-out',
-  )
+  );
 
   if (hidden) return <></>;
 
@@ -68,4 +68,4 @@ export const Modal = ({
       {children && <div className={childrenClassList}>{children}</div>}
     </>
   );
-}
+};

package/src/components/Nav/Nav.stories.tsx

@@ -0,0 +1,80 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Nav, NavItem } from '..';
+
+const meta = {
+  title: 'V2Components/Nav',
+  component: Nav,
+  parameters: {
+    docs: {
+      story: { iframe: '1300px' },
+    },
+  },
+  args: {
+    children: [
+      <Nav.Header logo="https://picsum.photos/300/300">
+        <Nav.DesktopHeader>
+          <Nav.LeftSection>
+            <Nav.Folder label="about">
+              <NavItem href="">
+                <NavItem.Label>Item 1.1</NavItem.Label>
+              </NavItem>
+              <NavItem href="">
+                <NavItem.Label>Item 1.2</NavItem.Label>
+              </NavItem>
+            </Nav.Folder>
+            <NavItem href="">
+              <NavItem.Label>Item 2</NavItem.Label>
+            </NavItem>
+            <NavItem href="">
+              <NavItem.Label>Item 3</NavItem.Label>
+            </NavItem>
+          </Nav.LeftSection>
+          <Nav.Logo src="https://picsum.photos/300/300" />
+          <Nav.RightSection>
+            <NavItem href="">
+              <NavItem.Label>Item 4</NavItem.Label>
+            </NavItem>
+            <NavItem href="">
+              <NavItem.Label>Item 5</NavItem.Label>
+            </NavItem>
+            <NavItem href="">
+              <NavItem.Label>Item 6</NavItem.Label>
+            </NavItem>
+          </Nav.RightSection>
+        </Nav.DesktopHeader>
+      </Nav.Header>,
+      <Nav.Body>
+        <Nav.Folder label="about">
+          <NavItem href="">
+            <NavItem.Label>Item 1.1</NavItem.Label>
+          </NavItem>
+          <NavItem href="">
+            <NavItem.Label>Item 1.2</NavItem.Label>
+          </NavItem>
+        </Nav.Folder>
+        <NavItem href="">
+          <NavItem.Label>Item 2</NavItem.Label>
+        </NavItem>
+        <NavItem href="">
+          <NavItem.Label>Item 3</NavItem.Label>
+        </NavItem>
+        <NavItem href="">
+          <NavItem.Label>Item 4</NavItem.Label>
+        </NavItem>
+        <NavItem href="">
+          <NavItem.Label>Item 5</NavItem.Label>
+        </NavItem>
+        <NavItem href="">
+          <NavItem.Label>Item 6</NavItem.Label>
+        </NavItem>
+      </Nav.Body>,
+    ],
+  },
+} satisfies Meta<typeof Nav>;
+
+export default meta;
+
+type Story = StoryObj<typeof Nav>;
+
+export const Default: Story = {};