trepur_components 2.3.8 → 2.3.9

package/src/components/Greeting/Greeting.stories.tsx

@@ -1,39 +1,14 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Greeting } from '.';
+import { Greeting } from './';
+import { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'Components/Greeting',
+  title: 'V2Components/Greeting',
   component: Greeting,
-  argTypes: {
-    ...idAndClassName,
-    morningMessage: {
-      type: { name: 'string', required: false },
-      description: 'Defines the morning message for the greeting component',
-      table: {
-        type: { summary: 'string' },
-      }
-    },
-    afternoonMessage: {
-      type: { name: 'string', required: false },
-      description: 'Defines the afternoon message for the greeting component',
-      table: {
-        type: { summary: 'string' },
-      }
-    },
-    eveningMessage: {
-      type: { name: 'string', required: false },
-      description: 'Defines the evening message for the greeting component',
-      table: {
-        type: { summary: 'string' },
-      }
-    }
-  },
   args: {
     morningMessage: 'What a beautiful morning it is today',
-  }
-}
+  },
+} satisfies Meta<typeof Greeting>;
+
 export default meta;
 
 type Story = StoryObj<typeof Greeting>;

package/src/components/Greeting/index.tsx

@@ -1,30 +1,49 @@
-export interface Props {
-  id?: string;
-  className?: string;
+import { forwardRef, HTMLAttributes } from 'react';
+
+import { DateTime } from 'luxon';
+
+export interface GreetingProps {
   morningMessage?: string;
   afternoonMessage?: string;
   eveningMessage?: string;
 }
 
-export const Greeting = ({
-  morningMessage = 'Good morning',
-  afternoonMessage = 'Good afternoon',
-  eveningMessage = 'Good evening',
-}: Props) => {
-  const today = new Date();
-  const hours = `0${today.getHours().toString()}`.slice(-2);
-  const minutes = `0${today.getMinutes().toString()}`.slice(-2);
-  const seconds = `0${today.getSeconds().toString()}`.slice(-2);
-  const time = parseInt(`${hours}${minutes}${seconds}`);
-
-  let message = '';
-  if (time < 120000) {
-    message = morningMessage;
-  } else if (time > 115959 && time < 170000) {
-    message = afternoonMessage;
-  } else if (time > 165959) {
-    message = eveningMessage;
-  }
-
-  return <p>{message}</p>;
-}
+const GreetingComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLParagraphElement> & GreetingProps
+>(
+  (
+    {
+      morningMessage = 'Good morning',
+      afternoonMessage = 'Good afternoon',
+      eveningMessage = 'Good evening',
+      ...props
+    },
+    ref,
+  ) => {
+    const now = DateTime.now();
+    const midday = DateTime.now().set({ hour: 12, minute: 0, second: 0 });
+    const evening = DateTime.now().set({ hour: 17, minute: 0, second: 0 });
+
+    let message = '';
+    if (now < midday) {
+      message = morningMessage;
+    } else if (now >= midday && now < evening) {
+      message = afternoonMessage;
+    } else if (now >= evening) {
+      message = eveningMessage;
+    }
+
+    return (
+      <p {...props} ref={ref}>
+        {message}
+      </p>
+    );
+  },
+);
+
+GreetingComponent.displayName = 'Greeting';
+
+const Greeting = Object.assign(GreetingComponent);
+
+export { Greeting };

package/src/components/HamburgerIcon/HamburgerIcon.stories.tsx

@@ -1,29 +1,11 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { HamburgerIcon } from '.';
 
 const meta = {
-  title: 'Components/Hamburger Icon',
+  title: 'V2Components/Hamburger Icon',
   component: HamburgerIcon,
-  parameters: {
-    docs: {
-      description: {
-        component: 'An icon component',
-      }
-    },
-    layout: 'padded',
-  },
-  argTypes: {
-    ...idAndClassName,
-
-    onClick: {
-      type: { name: 'function', required: false },
-      description: 'Function to be called when the button is clicked',
-      table: { type: { summary: 'function' } },
-    }
-  }
-};
+} satisfies Meta<typeof HamburgerIcon>;
 
 export default meta;
 

package/src/components/HamburgerIcon/index.tsx

@@ -1,78 +1,35 @@
-import React, { useState } from 'react';
+import { forwardRef, HTMLAttributes, useState } from 'react';
 
-import { Button } from '@components/Button';
-import classNames from 'classnames';
+import { Button, ButtonProps } from '@components/Button';
+import clsx from 'clsx';
 
-export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
-  onClick?: React.MouseEventHandler;
-  variant?: 'primary' | 'secondary' | 'tertiary';
-}
-
-export const HamburgerIcon = ({
-  id,
-  className,
-  onClick,
-  variant = 'primary',
-}: Props) => {
+const HamburgerIconComponent = forwardRef<
+  HTMLButtonElement,
+  HTMLAttributes<HTMLButtonElement> & ButtonProps
+>(({ className, onClick, variant = 'ghost' }, ref) => {
   const [opened, setOpened] = useState(false);
-  const classList = classNames(
-    {
-      'transition-all duration-500 outline-none fill-primary':
-        variant === 'secondary',
-      'transition-all duration-500 outline-none fill-secondary':
-        variant === 'primary',
-      'transition-all duration-500 outline-none fill-tertiary':
-        variant === 'tertiary',
-    },
-    className,
-  )
-
-  const lineOneClassList = classNames(
-    {
-      'origin-top-left -translate-y-0.5 translate-x-1 rotate-45': opened,
-    },
-    'origin-top-left duration-200 ease-linear transition-transform',
-  )
-
-  const lineTwoClassList = classNames(
-    {
-      'opacity-0': opened,
-      'opacity-100': !opened,
-    },
-    'duration-200 ease-linear transition-opacity',
-  )
-
-  const lineThreeClassList = classNames(
-    {
-      'origin-bottom-left translate-x-1 translate-y-px -rotate-45': opened,
-    },
-    'origin-bottom-left duration-200 ease-linear transition-transform',
-  )
 
   const toggleOpened = (e: any): void => {
     setOpened(!opened);
     onClick?.(e);
-  }
-
+  };
   return (
     <Button
-      id={id}
-      className={classList}
+      className={clsx('stroke-white', className)}
+      ref={ref}
       onClick={(e) => {
         toggleOpened(e);
       }}
       variant={variant}
-      type="icon"
-      label="Mobile menu toggle"
     >
       <svg
-        className={classNames(
+        className={clsx(
+          'transition-backgroundColor mx-auto transform overflow-visible duration-500',
           {
-            'fill-primary': variant === 'primary',
-            'fill-secondary': variant === 'secondary',
-            'fill-tertiary': variant === 'tertiary',
+            'fill-button-primary-text': variant === 'primary',
+            'fill-button-secondary-text': variant === 'secondary',
+            'fill-button-ghost-text': variant === 'ghost',
           },
-          'transition-backgroundColor mx-auto transform overflow-visible duration-500',
         )}
         width="24"
         height="24"
@@ -80,18 +37,39 @@ export const HamburgerIcon = ({
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          className={lineOneClassList}
+          className={clsx(
+            'origin-top-left transition-transform duration-200 ease-linear',
+            {
+              'origin-top-left -translate-y-0.5 translate-x-1 rotate-45':
+                opened,
+            },
+          )}
           d="M0 1.5C0 0.947715 0.447715 0.5 1 0.5H21C21.5523 0.5 22 0.947715 22 1.5C22 2.05228 21.5523 2.5 21 2.5H1C0.447716 2.5 0 2.05228 0 1.5Z"
         />
         <path
-          className={lineTwoClassList}
+          className={clsx('transition-opacity duration-200 ease-linear', {
+            'opacity-0': opened,
+            'opacity-100': !opened,
+          })}
           d="M0 7.5C0 6.94772 0.447715 6.5 1 6.5H21C21.5523 6.5 22 6.94772 22 7.5C22 8.05228 21.5523 8.5 21 8.5H1C0.447716 8.5 0 8.05228 0 7.5Z"
         />
         <path
-          className={lineThreeClassList}
+          className={clsx(
+            'origin-bottom-left transition-transform duration-200 ease-linear',
+            {
+              'origin-bottom-left translate-x-1 translate-y-px -rotate-45':
+                opened,
+            },
+          )}
           d="M0 13.5C0 12.9477 0.447715 12.5 1 12.5H21C21.5523 12.5 22 12.9477 22 13.5C22 14.0523 21.5523 14.5 21 14.5H1C0.447716 14.5 0 14.0523 0 13.5Z"
         />
       </svg>
     </Button>
   );
-}
+});
+
+HamburgerIconComponent.displayName = 'HamburgerIcon';
+
+const HamburgerIcon = Object.assign(HamburgerIconComponent);
+
+export { HamburgerIcon };

package/src/components/Icon/Icon.stories.tsx

@@ -1,22 +1,41 @@
-import { faHeart } from '@fortawesome/fontawesome-free-solid';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Icon } from '.';
+import { Icon } from './';
+import { faHeart, faSpinner } from '@fortawesome/fontawesome-free-solid';
+import { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
-  title: 'Components/Icon',
+  title: 'V2Components/Icon',
   component: Icon,
-  argTypes: {
-    ...idAndClassName,
-  },
   args: {
     icon: faHeart,
-  }
-}
+  },
+} satisfies Meta<typeof Icon>;
 
 export default meta;
 
 type Story = StoryObj<typeof Icon>;
 
 export const Default: Story = {};
+
+export const Colour: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    className: 'text-error-light',
+  },
+};
+
+export const Size: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    size: '2x',
+  },
+};
+
+export const Annimation: Story = {
+  ...Default,
+  args: {
+    icon: faSpinner,
+    className: 'animate-spin',
+  },
+};

package/src/components/Icon/index.tsx

@@ -1,25 +1,33 @@
-import {
-  type IconProp,
-  type SizeProp,
-} from '@fortawesome/fontawesome-svg-core';
+import { forwardRef } from 'react';
+
+import { IconDefinition } from '@fortawesome/fontawesome-free-solid';
+import { IconProp, SizeProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 export interface IconProps {
-  id?: string;
-  icon: IconProp;
-  colour?: string;
-  size?: SizeProp;
-  onClick?: () => void;
+  className?: string;
+  icon: IconProp | IconDefinition;
+  size: SizeProp;
 }
 
-export const Icon = ({ id, icon, colour, size = '1x', onClick }: IconProps) => {
-  return (
-    <FontAwesomeIcon
-      onClick={onClick}
-      id={id}
-      icon={icon}
-      size={size}
-      color={colour}
-    />
-  );
-}
+const IconComponent = forwardRef(
+  (props: IconProps, ref: React.Ref<SVGSVGElement>) => {
+    const { className, size, icon, ...rest } = props;
+
+    return (
+      <FontAwesomeIcon
+        className={className}
+        ref={ref}
+        icon={icon as IconProp}
+        size={size}
+        {...rest}
+      />
+    );
+  },
+);
+
+IconComponent.displayName = 'Icon';
+
+const Icon = Object.assign(IconComponent);
+
+export { Icon };

package/src/components/Image/Image.stories.tsx

@@ -1,84 +1,14 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Image } from '.';
 
 const meta = {
-  title: 'Components/Image',
+  title: 'V2Components/Image',
   component: Image,
-  argTypes: {
-    ...idAndClassName,
-    image: {
-      type: { name: 'string', required: false },
-      description: 'The image to display on the component',
-      table: {
-        type: { summary: 'default' },
-      }
-    },
-    altText: {
-      type: { name: 'string', required: false },
-      description: 'The accessibility alt text for the image on the component',
-      table: {
-        type: { summary: 'default' },
-      }
-    },
-    title: {
-      type: { name: 'string', required: false },
-      description: 'The accessibility title for the image on the component',
-      table: {
-        type: { summary: 'default' },
-      }
-    },
-    rounded: {
-      type: { name: 'boolean', required: false },
-      description: 'Sets the corners of the component to rounded',
-      table: {
-        type: { summary: 'boolean' },
-      }
-    },
-    roundedFull: {
-      type: { name: 'boolean', required: false },
-      description: 'Sets the component to a circle shape',
-      table: {
-        type: { summary: 'boolean' },
-      }
-    },
-    height: {
-      type: { name: 'number', required: false },
-      description: 'Defines the height of the component',
-      table: {
-        type: { summary: 'number' },
-      }
-    },
-    width: {
-      type: { name: 'number', required: false },
-      description: 'Defines the width of the component',
-      table: {
-        type: { summary: 'number' },
-      }
-    },
-    overlayText: {
-      type: { name: 'string', required: false },
-      description: 'The text to show when hovering over the component',
-      table: {
-        type: { summary: 'default' },
-      }
-    },
-    centerAligned: {
-      type: { name: 'boolean', required: false },
-      description: 'Sets the component to the center',
-      table: {
-        type: { summary: 'boolean' },
-      }
-    }
-  },
   args: {
-    src: 'https://picsum.photos/200/200',
-    height: 8,
-    width: 8,
-    overlayText: 'logo',
-  }
-}
+    src: 'https://picsum.photos/400/400',
+  },
+} satisfies Meta<typeof Image>;
 
 export default meta;
 

package/src/components/Image/index.tsx

@@ -1,127 +1,25 @@
-import { useState } from 'react';
+import { forwardRef, HTMLAttributes } from 'react';
 
-import classNames from 'classnames';
+import clsx from 'clsx';
 
-export interface Props {
-  id?: string;
-  className?: string;
+export interface ImageProps {
   src: string;
-  altText?: string;
-  title?: string;
-  rounded?: boolean;
-  roundedFull?: boolean;
-  height?: number;
-  width?: number;
-  overlayText?: string;
-  centerAligned?: boolean;
-  bordered?: boolean;
 }
 
-export const Image = ({
-  id,
-  className,
-  src,
-  altText,
-  title,
-  rounded = false,
-  roundedFull = false,
-  height = 8,
-  width = 8,
-  overlayText,
-  centerAligned = false,
-  bordered = false,
-}: Props) => {
-  const [isHovering, setIsHovering] = useState(false);
-  const opacity = classNames({
-    'opacity-80': isHovering,
-    'opacity-0': !isHovering,
-  })
+const ImageComponent = forwardRef<
+  HTMLImageElement,
+  HTMLAttributes<HTMLImageElement> & ImageProps
+>(({ className, src, ...props }, ref) => (
+  <img
+    className={clsx('h-full w-full', className)}
+    ref={ref}
+    src={src}
+    {...props}
+  />
+));
 
-  const widthClassList = classNames({
-    'w-6': width === 1,
-    'w-10': width === 2,
-    'w-14': width === 3,
-    'w-16': width === 4,
-    'w-20': width === 5,
-    'w-24': width === 6,
-    'w-28': width === 7,
-    'w-32': width === 8,
-    'w-36': width === 9,
-    'w-40': width === 10,
-    'w-44': width === 11,
-    'w-full':
-      width === undefined ||
-      ![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(width),
-  })
+ImageComponent.displayName = 'Image';
 
-  const heightClassList = classNames({
-    'h-6': height === 1,
-    'h-10': height === 2,
-    'h-14': height === 3,
-    'h-16': height === 4,
-    'h-20': height === 5,
-    'h-24': height === 6,
-    'h-28': height === 7,
-    'h-32': height === 8,
-    'h-36': height === 9,
-    'h-40': height === 10,
-    'h-44': height === 11,
-    'h-full':
-      height === undefined ||
-      ![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(height),
-  })
+const Image = Object.assign(ImageComponent);
 
-  const imageClassList = classNames(
-    {
-      'rounded-2xl': rounded,
-      'rounded-full': roundedFull,
-      'mx-auto': centerAligned,
-      'border-4 border-primary': bordered,
-    },
-    className,
-    widthClassList,
-    heightClassList,
-  )
-
-  const overlayClassList = classNames(
-    widthClassList,
-    heightClassList,
-    opacity,
-    'absolute z-10 bg-white transition-opacity duration-700',
-  )
-
-  const overlayTextWrapperClassList = classNames(
-    widthClassList,
-    heightClassList,
-    opacity,
-    'absolute z-20 flex transition-opacity duration-700',
-  )
-
-  return (
-    <div className={imageClassList}>
-      {overlayText !== undefined && (
-        <>
-          <div className={overlayClassList} />
-          <div
-            className={overlayTextWrapperClassList}
-            onMouseEnter={() => {
-              setIsHovering(true);
-            }}
-            onMouseLeave={() => {
-              setIsHovering(false);
-            }}
-          >
-            <p className="m-auto text-center text-primary">{overlayText}</p>
-          </div>
-        </>
-      )}
-      <img
-        id={id}
-        className={imageClassList}
-        src={src}
-        alt={altText ?? overlayText}
-        title={title ?? overlayText}
-      />
-    </div>
-  );
-}
+export { Image };

package/src/components/ImageCard/ImageCard.stories.tsx

@@ -0,0 +1,29 @@
+import { type Meta, StoryObj } from '@storybook/react';
+
+import { ImageCard } from '.';
+
+const meta = {
+  title: 'V2Components/ImageCard',
+  component: ImageCard,
+  args: {
+    children: [
+      <ImageCard.Image src="https://picsum.photos/500/300" />,
+      <ImageCard.Content>
+        <ImageCard.Title>This is a title</ImageCard.Title>
+        <ImageCard.Subtitle>This is a subtitle</ImageCard.Subtitle>
+        <ImageCard.Text>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, est
+          iusto. Veniam ullam impedit expedita perferendis cumque culpa saepe
+          magni velit quia nemo suscipit, reiciendis ad libero, voluptate
+          incidunt fugiat?
+        </ImageCard.Text>
+      </ImageCard.Content>,
+    ],
+  },
+} satisfies Meta<typeof ImageCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof ImageCard>;
+
+export const Default: Story = {};