trepur_components 2.3.8 → 2.3.9

package/src/components/Avatar/index.tsx

@@ -66,7 +66,7 @@ export const Avatar: React.FC = (): any => {
       mask: beardGroup,
       fill: beardColour,
       opacity: 0.6,
-    })
+    });
 
     const outerHair = s?.rect(103, 90, 68, 60, 25).attr({ fill: 'white' });
     const innerHair = s?.rect(109, 105, 56, 40, 10);
@@ -74,7 +74,7 @@ export const Avatar: React.FC = (): any => {
     const baseHair = s?.rect(103, 90, 68, 40).attr({
       mask: hairGroup,
       fill: hairColour,
-    })
+    });
     const hairLevel1 = s
       ?.rect(113, 88, 50, 16, 10)
       .attr({ fill: hairColour })
@@ -87,7 +87,7 @@ export const Avatar: React.FC = (): any => {
     const nose = s?.rect(129, 140, 12, 10)?.attr({
       mask: noseGroup,
       fill: noseColour,
-    })
+    });
 
     const leftEar = s?.circle(103, 135, 5)?.attr({ fill: 'white' });
     const leftEarMask = s
@@ -179,7 +179,7 @@ export const Avatar: React.FC = (): any => {
       ears,
       hair,
       beard,
-    )
+    );
     torso = s?.group(rucksack, hood, body, neck, zip);
     legs = s
       ?.group(leftThigh, rightThigh, wasteBand, shoes)
@@ -190,10 +190,10 @@ export const Avatar: React.FC = (): any => {
 
     mouthCutOff?.attr({
       mask: mouth,
-    })
+    });
 
     callBack(avatar);
-  }
+  };
 
   const nextFrame = (s: any, frameArray: any, frame: number): void => {
     if (frame >= frameArray.length) {
@@ -207,8 +207,8 @@ export const Avatar: React.FC = (): any => {
       frameArray[frame].dur,
       null,
       nextFrame.bind(null, Snap, frameArray, frame + 1),
-    )
-  }
+    );
+  };
 
   const rightWave = [
     {
@@ -273,8 +273,8 @@ export const Avatar: React.FC = (): any => {
       from: 120,
       to: 0,
       dur: 100,
-    }
-  ]
+    },
+  ];
 
   const leftWave = [
     {
@@ -339,8 +339,8 @@ export const Avatar: React.FC = (): any => {
       from: -120,
       to: 0,
       dur: 100,
-    }
-  ]
+    },
+  ];
 
   const jump = (): void => {
     torso.animate({ transform: 't0,20' }, 500);
@@ -360,24 +360,24 @@ export const Avatar: React.FC = (): any => {
         straps.animate({ transform: 't0,0' }, 200);
         hands.animate({ transform: 't0,0' }, 200);
         legs.animate({ transform: 't0,0' }, 200);
-      })
+      });
     });
-  }
+  };
 
   const eyesLeft = (duration: any): void => {
     leftEyePupil.animate({ transform: 't2,0' }, duration);
     rightEyePupil.animate({ transform: 't2,0' }, duration);
-  }
+  };
 
   const eyesRight = (duration: any): void => {
     leftEyePupil.animate({ transform: 't-2,0' }, duration);
     rightEyePupil.animate({ transform: 't-2,0' }, duration);
-  }
+  };
 
   const eyesCenter = (duration: any): void => {
     leftEyePupil.animate({ transform: 't0,0' }, duration);
     rightEyePupil.animate({ transform: 't0,0' }, duration);
-  }
+  };
 
   const blink = (times: number): void => {
     if (times < 1) return;
@@ -391,14 +391,14 @@ export const Avatar: React.FC = (): any => {
         rightEyeWhite?.animate({ ry: 4 }, 200);
         rightEyePupil?.animate({ ry: 3 }, 200, () => {
           blink(times - 1);
-        })
+        });
       });
-    })
-  }
+    });
+  };
 
   const animate = (s: any, animation: any): any => {
     nextFrame(s, animation, 0);
-  }
+  };
 
   // const drawPath = (s: any): void => {
   //   const linePath =
@@ -433,7 +433,7 @@ export const Avatar: React.FC = (): any => {
     const makeBlinkHappen = (): void => {
       const randNum = Math.floor(Math.random() * 2) + 1;
       blink(randNum);
-    }
+    };
 
     const loadActions = (): void => {
       if (!avatar) return;
@@ -453,28 +453,28 @@ export const Avatar: React.FC = (): any => {
       armless?.click(jump);
       leftArm?.hover(() => {
         eyesLeft(200);
-      })
+      });
       leftThigh?.hover(() => {
         eyesLeft(200);
-      })
+      });
       leftShoe?.hover(() => {
         eyesLeft(200);
-      })
+      });
 
       torso?.hover(() => {
         eyesCenter(200);
-      })
+      });
 
       rightArm?.hover(() => {
         eyesRight(200);
-      })
+      });
       rightThigh?.hover(() => {
         eyesRight(200);
-      })
+      });
       rightShoe?.hover(() => {
         eyesRight(200);
-      })
-    }
+      });
+    };
 
     createAvatar(s, loadActions);
   }, [s]);
@@ -489,4 +489,4 @@ export const Avatar: React.FC = (): any => {
       xmlns="http://www.w3.org/2000/svg"
     />
   );
-}
+};

package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,44 +1,27 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Breadcrumbs } from '.';
 
 const meta = {
-  title: 'Components/Breadcrumbs',
+  title: 'V2Components/Breadcrumbs',
   component: Breadcrumbs,
-  argTypes: {
-    ...idAndClassName,
-
-    links: {
-      description: 'An array of items to be displayed in the component',
-      table: {
-        category: '',
-        type: { summary: 'array' },
-        defaultValue: { summary: 'undefined' },
-      }
-    }
-  },
   args: {
-    links: [
-      {
-        href: '/',
-        name: 'link 1',
-      },
-      {
-        href: '/',
-        name: 'link 2',
-      },
-      {
-        href: '/',
-        name: 'link 3',
-      },
-      {
-        href: '/',
-        name: 'link 4',
-      }
-    ]
+    children: [
+      <Breadcrumbs.Item>
+        <Breadcrumbs.Label href="#">Link 1</Breadcrumbs.Label>
+      </Breadcrumbs.Item>,
+      <Breadcrumbs.Item>
+        <Breadcrumbs.Label href="#">Link 2</Breadcrumbs.Label>
+      </Breadcrumbs.Item>,
+      <Breadcrumbs.Item>
+        <Breadcrumbs.Label href="#">Link 3</Breadcrumbs.Label>
+      </Breadcrumbs.Item>,
+      <Breadcrumbs.Item>
+        <Breadcrumbs.Label href="#">Link 4</Breadcrumbs.Label>
+      </Breadcrumbs.Item>,
+    ],
   },
-}
+} satisfies Meta<typeof Breadcrumbs>;
 export default meta;
 
 type Story = StoryObj<typeof Breadcrumbs>;

package/src/components/Breadcrumbs/index.tsx

@@ -1,40 +1,89 @@
+import { forwardRef, HTMLAttributes } from 'react';
+
 import classNames from 'classnames';
 
-export interface Props {
+export interface BreadcrumbsProps {
   id?: string;
   className?: string;
   links?: Array<{ name: string; href: string }>;
 }
 
-export const Breadcrumbs = ({ id, className, links }: Props) => {
-  const linksLength = links != null ? Object.keys(links).length : 0;
+const BreadcrumbsComponent = forwardRef<
+  HTMLUListElement,
+  HTMLAttributes<HTMLUListElement> & BreadcrumbsProps
+>(({ children, ...props }, ref) => {
+  return (
+    <ul className="flex gap-2" {...props}>
+      {children}
+    </ul>
+  );
+});
 
-  const classList = classNames(className, 'flex py-2');
+const BreadcrumbsItem = forwardRef<
+  HTMLLIElement,
+  HTMLAttributes<HTMLLIElement>
+>(({ children, ...props }, ref) => {
+  return (
+    <li className="flex items-center gap-2" {...props}>
+      {children}
+      <p>/</p>
+    </li>
+  );
+});
 
+const BreadcrumbsLabel = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement> & { href: string }
+>(({ children, href, ...props }, ref) => {
   return (
-    <ul id={id} className={classList}>
-      {links?.map((link, i) => {
-        return (
-          <div key={`breadcrumb_${i + 1}`} className="flex">
-            <li className="h-8">
-              {i + 1 >= linksLength ? (
-                <p className="px-1 py-1">{link.name}</p>
-                  ) : (
-                <p className="px-1 py-1">
-                  <a className="text-facebook hover:underline" href={link.href}>
-                    {link.name}
-                  </a>
-                </p>
-                  )}
-            </li>
-            {i + 1 < linksLength && (
-              <li className="h-8">
-                <p className="py-1">&nbsp; &#62; &nbsp;</p>
-              </li>
-            )}
-          </div>
-        );
-      })}
-    </ul>
+    <p className="px-1 py-1">
+      <a className="text-facebook hover:underline" href={href}>
+        {children}
+      </a>
+    </p>
   );
-}
+});
+
+BreadcrumbsComponent.displayName = 'Breadcrumbs';
+BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
+BreadcrumbsLabel.displayName = 'Breadcrumbs.Label';
+
+const Breadcrumbs = Object.assign(BreadcrumbsComponent, {
+  Item: BreadcrumbsItem,
+  Label: BreadcrumbsLabel,
+});
+
+export { Breadcrumbs };
+
+// export const Breadcrumbs = ({ id, className, links }: Props) => {
+//   const linksLength = links != null ? Object.keys(links).length : 0;
+
+//   const classList = classNames(className, 'flex py-2');
+
+//   return (
+//     <ul id={id} className={classList}>
+//       {links?.map((link, i) => {
+//         return (
+//           <div key={`breadcrumb_${i + 1}`} className="flex">
+//             <li className="h-8">
+//               {i + 1 >= linksLength ? (
+//                 <p className="px-1 py-1">{link.name}</p>
+//               ) : (
+//                 <p className="px-1 py-1">
+//                   <a className="text-facebook hover:underline" href={link.href}>
+//                     {link.name}
+//                   </a>
+//                 </p>
+//               )}
+//             </li>
+//             {i + 1 < linksLength && (
+//               <li className="h-8">
+//                 <p className="py-1">&nbsp; &#62; &nbsp;</p>
+//               </li>
+//             )}
+//           </div>
+//         );
+//       })}
+//     </ul>
+//   );
+// };

package/src/components/Button/Button.stories.tsx

@@ -1,147 +1,21 @@
+import { faHeart } from '@fortawesome/fontawesome-free-solid';
 import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from '.';
 
 const meta = {
-  title: 'Components/Button',
+  title: 'V2Components/Button',
   component: Button,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'A Button which can either be internal, external or social as well as a standard design or a slide design.',
-      }
-    }
-  },
-  argTypes: {
-    ...idAndClassName,
-    onClick: {
-      type: { name: 'function', required: false },
-      description: 'The action to perform when clicking on the component',
-      action: 'onClick',
-      table: {
-        type: {
-          summary: 'function',
-        },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    hoverText: {
-      type: {
-        name: 'string',
-        required: false,
-      },
-      description: 'The text to display when hovering on the component',
-      table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: {
-          summary: 'undefined',
-        }
-      }
-    },
-    variant: {
-      type: {
-        name: 'string',
-        required: false,
-      },
-      options: ['primary', 'secondary'],
-      description: 'The variant of button to render',
-      table: {
-        type: {
-          summary: 'primary',
-        },
-        defaultValue: {
-          summary: 'primary',
-        }
-      },
-      defaultValue: 'primary',
-      control: {
-        type: 'radio',
-      }
-    },
-    type: {
-      type: {
-        name: 'string',
-        required: false,
-      },
-      options: ['default', 'social', 'icon'],
-      description: 'The type of button to render',
-      table: {
-        type: {
-          summary: 'default',
-        },
-        defaultValue: {
-          summary: 'default',
-        }
-      },
-      defaultValue: 'default',
-      control: { type: 'radio' },
-    },
-    href: {
-      type: { name: 'string', required: false },
-      description: 'The link attached to the component',
-      table: {
-        type: {
-          summary: 'default',
-        },
-        defaultValue: {
-          summary: 'undefined',
-        }
-      }
-    },
-    rounded: {
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-      description: 'rounds the borders when true',
-      defaultValue: 'true',
-    },
-    disabled: {
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-      description: 'Can the carousel be dragged or not',
-    },
-    isLoading: {
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-      table: {
-        defaultValue: {
-          summary: 'false',
-        }
-      },
-      description: 'Toggles the loading state of the compnent',
-    },
-    openInNewTab: {
-      type: { name: 'boolean', required: false },
-      description: 'Opens the link in a new tab when set to true',
-      defaultValue: 'false',
-    },
-    children: {
-      type: { name: 'other', value: 'string | React.ReactNode' },
-      description: 'The child elements to show in the component',
-      table: {
-        type: {
-          summary: 'Array',
-        },
-        defaultValue: { summary: 'undefined' },
-      }
-    }
-  },
   args: {
-    children: 'This is a button',
-    rounded: true,
-    onClick: action('button clicked'),
-  }
-}
+    variant: 'primary',
+    children: [
+      <Button.Icon icon={faHeart} />,
+      <Button.Label>This is a button</Button.Label>,
+    ],
+    onClick: action('clicked'),
+  },
+} satisfies Meta<typeof Button>;
 
 export default meta;
 

package/src/components/Button/index.tsx

@@ -1,104 +1,59 @@
-import React from 'react';
+import { ComponentPropsWithoutRef, forwardRef, HTMLAttributes } from 'react';
 
 import { Icon } from '@components/Icon';
-import { faSpinner } from '@fortawesome/fontawesome-free-solid';
-import { type IconProp } from '@fortawesome/fontawesome-svg-core';
-import classNames from 'classnames';
+import { PickU } from '@components/Pill';
+import clsx from 'clsx';
 
-interface AnchorAttributes
-  extends Partial<
-    Pick<JSX.IntrinsicElements['a'], 'href' | 'title' | 'target'>
-  > {}
-
-export interface Props {
-  id?: string;
-  className?: string;
-  onClick?: React.MouseEventHandler;
-  hoverText?: string;
-  variant?: 'primary' | 'secondary' | 'tertiary';
-  type?: 'social' | 'icon' | 'default';
-  href?: string;
-  label?: string;
-  target?: string;
-  rounded?: boolean;
+export interface ButtonProps {
+  variant?: 'primary' | 'secondary' | 'ghost';
   disabled?: boolean;
-  isLoading?: boolean;
-  openInNewTab?: boolean;
-  children?: any;
 }
 
-export const Button = ({
-  id,
-  className,
-  onClick,
-  variant = 'primary',
-  type = 'default',
-  href,
-  target,
-  label,
-  rounded = true,
-  disabled = false,
-  isLoading = false,
-  openInNewTab = false,
-  children,
-}: Props) => {
-  const padding = classNames(
-    {
-      'px-1 py-1': type === 'social',
-      'px-3': type === 'icon',
-      'px-8': type === 'default',
-    },
-    'py-3',
-  )
+const ButtonComponent = forwardRef<
+  HTMLButtonElement,
+  HTMLAttributes<HTMLButtonElement> & ButtonProps
+>(({ className, children, variant = 'primary', disabled, ...props }) => {
+  return (
+    <button
+      className={clsx(
+        'flex items-center gap-2 rounded-lg border px-4 py-2 text-center text-sm duration-200',
+        {
+          'border-button-primary-border bg-button-primary-bg text-button-primary-text hover:bg-button-primary-hover active:bg-button-primary-active':
+            variant === 'primary',
+          'border-button-secondary-border bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-hover active:bg-button-secondary-active':
+            variant === 'secondary',
+          'border-button-ghost-border bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-hover active:bg-button-ghost-active':
+            variant === 'ghost',
+        },
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+});
 
-  const loadingClasses = classNames(
-    {
-      invisible: !isLoading,
-    },
-    'absolute left-2/4 top-1/4 -ml-2',
-  )
+const ButtonLabel = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p className={clsx('text-md', className)} ref={ref} {...props} />
+));
 
-  const classList = classNames(
-    {
-      'border-secondary bg-primary text-secondary outline-primary':
-        variant === 'primary',
-      'hover:border-primary hover:bg-secondary hover:text-primary focus:border-primary focus:bg-secondary focus:text-primary':
-        !disabled && variant === 'primary',
-      'border-primary bg-secondary text-primary outline-secondary':
-        variant === 'secondary',
-      'hover:border-tertiary hover:bg-secondary hover:text-tertiary focus:border-tertiary focus:bg-secondary focus:text-tertiary':
-        !disabled && variant === 'secondary',
-      'opacity-50': disabled,
-      'rounded-lg': rounded,
-      'rounded-none': !rounded,
-    },
-    'transform border-2 text-sm duration-500 inline-block text-center focus:outline',
-    className,
-    padding,
-  )
+const ButtonIcon = forwardRef<
+  SVGSVGElement,
+  PickU<ComponentPropsWithoutRef<typeof Icon>, 'icon'>
+>(({ icon }, ref) => <Icon size="md" ref={ref} icon={icon} />);
 
-  const loadingIcon = <Icon icon={faSpinner as IconProp} />;
+ButtonComponent.displayName = 'Button';
 
-  let Tag: keyof Pick<JSX.IntrinsicElements, 'a' | 'button'> = 'button';
-  let attributes: AnchorAttributes = {};
+ButtonIcon.displayName = 'Button.Icon';
+ButtonLabel.displayName = 'Button.Label';
 
-  if (Boolean(href) || Boolean(target)) {
-    Tag = 'a';
-    attributes = { href, target };
-  }
+const Button = Object.assign(ButtonComponent, {
+  Icon: ButtonIcon,
+  Label: ButtonLabel,
+});
 
-  return (
-    <Tag
-      {...attributes}
-      id={id}
-      className={classList}
-      aria-busy={isLoading}
-      aria-label={label}
-      {...(onClick != null && { onClick })}
-      {...(disabled && { disabled })}
-    >
-      <div className={classNames({ invisible: isLoading })}>{children}</div>
-      {isLoading && <div className={loadingClasses}>{loadingIcon}</div>}
-    </Tag>
-  );
-}
+export { Button };