trepur_components 2.3.7 → 2.3.9

package/src/components/AlertBar/index.tsx

@@ -1,113 +1,82 @@
-import { MouseEventHandler, useState } from 'react';
+import { ComponentPropsWithoutRef, forwardRef, HTMLAttributes } from 'react';
 
-// import Icon, { type Props as iconProps } from '@components/Icon';
-import classNames from 'classnames';
+import { PickU } from '@components/Pill';
+import { faExclamation } from '@fortawesome/fontawesome-free-solid';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import clsx from 'clsx';
 
-export interface Props {
+import { Button } from '..';
+import { Icon } from '../Icon';
+
+export interface AlertBarProps {
   id?: string;
   className?: string;
-  type?: 'success' | 'warning' | 'error' | 'info';
-  text?: string;
-  // leftIconProps?: iconProps;
-  // rightIconProps?: iconProps;
-  textCenter?: boolean;
-  isDismissable?: boolean;
-  onDismissClick?: MouseEventHandler;
+  variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
+  loading?: boolean;
 }
 
-export const AlertBar = ({
-  id,
-  className,
-  type = 'warning',
-  text,
-  // leftIconProps,
-  // rightIconProps,
-  textCenter = false,
-  isDismissable = false,
-  onDismissClick,
-}: Props): JSX.Element => {
-  const [alertBarStatus, setAlertBarStatus] = useState({
-    state: 'open',
-    display: true,
-  });
-
-  // const iconLeft = leftIconProps != null && <Icon {...leftIconProps} />;
-
-  // const iconRight = rightIconProps != null && <Icon {...rightIconProps} />;
-
-  const bgColor = classNames({
-    'bg-success': type === 'success',
-    'bg-warning': type === 'warning',
-    'bg-error': type === 'error',
-    'bg-info-light': type === 'info',
-  });
+const AlertBarComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & AlertBarProps
+>(
+  (
+    { id, className, children, variant = 'default', loading, ...props },
+    ref,
+  ) => {
+    return (
+      <div
+        id={id}
+        className={clsx('flex w-full items-center gap-x-4 px-8 py-2', {
+          '': variant === 'default',
+          'border-error-default bg-error-light text-error-default':
+            variant === 'error',
+          'border-info-default bg-info-light text-info-default':
+            variant === 'info',
+          'border-success-default bg-success-light text-success-default':
+            variant === 'success',
+          'border-warning-default bg-warning-light text-warning-default':
+            variant === 'warning',
+        })}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
 
-  const alertBarState = classNames({
-    'opacity-100': alertBarStatus.state === 'open',
-    'opacity-0': alertBarStatus.state === 'closed',
-    hidden: !alertBarStatus.display,
-  });
+const AlertBarLabel = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ ...props }, ref) => (
+  <p className="text-md text-light-grey flex-1 truncate" ref={ref} {...props} />
+));
 
-  const classList = classNames(
-    className,
-    bgColor,
-    alertBarState,
-    'flex py-2 text-white duration-700  w-parent transition-opactiy',
-  );
+const AlertBarIcon = forwardRef<
+  SVGSVGElement,
+  PickU<ComponentPropsWithoutRef<typeof Icon>, 'icon'>
+>(({ icon }, ref) => <Icon ref={ref} icon={icon} />);
 
-  const textClassList = classNames(
-    {
-      'text-center': textCenter,
-      // 'pl-20': !textCenter && leftIconProps !== null,
-      // 'pl-4': !textCenter && leftIconProps === null,
-    },
-    'w-full py-3',
-  );
+const AlertBarDismiss = forwardRef<
+  HTMLButtonElement,
+  Omit<HTMLAttributes<HTMLButtonElement>, 'icon'>
+>(({ ...props }) => (
+  <Button variant="ghost" {...props}>
+    <Icon icon={faExclamation} />
+  </Button>
+));
 
-  const rightIconClasses = classNames(
-    {
-      'hover:cursor-pointer': isDismissable,
-    },
-    'absolute right-0 pr-8 pt-3',
-  );
+AlertBarComponent.displayName = 'AlertBar';
 
-  const closeAlertBar = (e: any): void => {
-    setAlertBarStatus({
-      state: 'closed',
-      display: alertBarStatus.display,
-    });
-    setTimeout(() => {
-      setAlertBarStatus({
-        state: 'closed',
-        display: false,
-      });
-    }, 700);
-    if (onDismissClick != null) {
-      onDismissClick(e);
-    }
-  };
+AlertBarLabel.displayName = 'AlertBar.Label';
+AlertBarIcon.displayName = 'AlertBar.Icon';
+AlertBarDismiss.displayName = 'AlertBar.Dismiss';
 
-  // const dismissIcon = <Icon type="multiply" colour="white" />;
+const AlertBar = Object.assign(AlertBarComponent, {
+  Label: AlertBarLabel,
+  Icon: AlertBarIcon,
+  Dismiss: AlertBarDismiss,
+});
 
-  return (
-    <div id={id} className={classList}>
-      {/* {leftIconProps != null && (
-        <span className='absolute pl-8 pt-3'>{iconLeft}</span>
-      )} */}
-      <h3 className={textClassList}>{text}</h3>
-      {/* {isDismissable && (
-        <a
-          className={rightIconClasses}
-          onClick={(e) => {
-            closeAlertBar(e);
-          }}
-        >
-          <span>{dismissIcon}</span>
-        </a>
-      )} */}
-      {/* {iconRight != null && !isDismissable && (
-        <span className={rightIconClasses}>{iconRight}</span>
-      )} */}
-    </div>
-  );
-};
+export { AlertBar };

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,16 +1,11 @@
+import { Avatar } from './';
 import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Avatar from '.';
 
 const meta = {
   title: 'Components/Avatar',
   component: Avatar,
-  argTypes: {
-    ...idAndClassName,
-  },
   args: {},
-};
+} satisfies Meta<typeof Avatar>;
 
 export default meta;
 

package/src/components/Avatar/index.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from 'react';
 
-let Snap: any;
-if (typeof window !== 'undefined') {
-  Snap = require('snapsvg-cjs');
-}
-const Avatar: React.FC = (): any => {
+// @ts-expect-error
+import Snap from 'snapsvg-cjs';
+
+export const Avatar: React.FC = (): any => {
   const [s, setS] = useState(null);
 
   let rightEyeWhite: any,
@@ -491,5 +490,3 @@ const Avatar: React.FC = (): any => {
     />
   );
 };
-
-export default Avatar;

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

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Breadcrumbs } from '.';
+
+const meta = {
+  title: 'V2Components/Breadcrumbs',
+  component: Breadcrumbs,
+  args: {
+    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>;
+
+export const Default: Story = {};

package/src/components/Breadcrumbs/index.tsx

@@ -0,0 +1,89 @@
+import { forwardRef, HTMLAttributes } from 'react';
+
+import classNames from 'classnames';
+
+export interface BreadcrumbsProps {
+  id?: string;
+  className?: string;
+  links?: Array<{ name: string; href: string }>;
+}
+
+const BreadcrumbsComponent = forwardRef<
+  HTMLUListElement,
+  HTMLAttributes<HTMLUListElement> & BreadcrumbsProps
+>(({ children, ...props }, ref) => {
+  return (
+    <ul className="flex gap-2" {...props}>
+      {children}
+    </ul>
+  );
+});
+
+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 (
+    <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

@@ -0,0 +1,24 @@
+import { faHeart } from '@fortawesome/fontawesome-free-solid';
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '.';
+
+const meta = {
+  title: 'V2Components/Button',
+  component: Button,
+  args: {
+    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;
+
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {};

package/src/components/Button/index.tsx

@@ -0,0 +1,59 @@
+import { ComponentPropsWithoutRef, forwardRef, HTMLAttributes } from 'react';
+
+import { Icon } from '@components/Icon';
+import { PickU } from '@components/Pill';
+import clsx from 'clsx';
+
+export interface ButtonProps {
+  variant?: 'primary' | 'secondary' | 'ghost';
+  disabled?: boolean;
+}
+
+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 ButtonLabel = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p className={clsx('text-md', className)} ref={ref} {...props} />
+));
+
+const ButtonIcon = forwardRef<
+  SVGSVGElement,
+  PickU<ComponentPropsWithoutRef<typeof Icon>, 'icon'>
+>(({ icon }, ref) => <Icon size="md" ref={ref} icon={icon} />);
+
+ButtonComponent.displayName = 'Button';
+
+ButtonIcon.displayName = 'Button.Icon';
+ButtonLabel.displayName = 'Button.Label';
+
+const Button = Object.assign(ButtonComponent, {
+  Icon: ButtonIcon,
+  Label: ButtonLabel,
+});
+
+export { Button };

package/src/components/Calendar/Calendar.stories.tsx

@@ -0,0 +1,21 @@
+import { CalendarComponent } from './';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'V2Components/Calendar',
+  component: CalendarComponent,
+} satisfies Meta<typeof CalendarComponent>;
+
+export default meta;
+
+type Story = StoryObj<typeof CalendarComponent>;
+
+export const Default: Story = {};
+
+export const ShowDoubleView: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    showDoubleView: true,
+  },
+};

package/src/components/Calendar/index.tsx

@@ -0,0 +1,92 @@
+import { forwardRef, HTMLAttributes, useState } from 'react';
+
+import Calendar from 'react-calendar';
+
+import './style.css';
+
+export type Detail = 'month' | 'year' | 'decade' | 'century';
+
+export interface CalendarProps {
+  onChange?: () => void;
+  useRange?: boolean;
+  minDetail?: Detail;
+  minDate?: Date;
+  maxDate?: Date;
+  showNavigation?: true;
+  disabledDates?: string[];
+  showDoubleView?: boolean;
+}
+
+interface Tile {
+  activeStartDate: Date;
+  date: Date;
+  view: string;
+}
+
+const CalendarComp = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & CalendarProps
+>(
+  (
+    {
+      onChange,
+      useRange,
+      minDetail,
+      minDate,
+      maxDate,
+      showNavigation,
+      disabledDates,
+      showDoubleView,
+    },
+    ref,
+  ) => {
+    const [today, setToday] = useState(new Date());
+
+    const calculateDisabledDates = (
+      date: Tile,
+      disabledDates?: string[],
+    ): boolean => {
+      const formattedDate = new Intl.DateTimeFormat('en-gb', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+      }).format(date?.date);
+
+      if (!disabledDates) return false;
+
+      return disabledDates.includes(formattedDate);
+    };
+
+    return (
+      <Calendar
+        ref={ref}
+        onActiveStartDateChange={({ value, activeStartDate, action }) => {
+          const toFormat = activeStartDate !== null ? activeStartDate : today;
+          if (action === 'next') {
+            setToday(new Date(toFormat));
+          }
+          if (action === 'prev') {
+            setToday(new Date(toFormat));
+          }
+        }}
+        activeStartDate={today}
+        onChange={onChange}
+        selectRange={useRange}
+        minDetail={minDetail}
+        minDate={minDate}
+        maxDate={maxDate}
+        showNavigation={showNavigation}
+        showDoubleView={showDoubleView}
+        tileDisabled={(date: Tile) => {
+          return calculateDisabledDates(date, disabledDates);
+        }}
+      />
+    );
+  },
+);
+
+CalendarComp.displayName = 'Calendar';
+
+const CalendarComponent = Object.assign(CalendarComp);
+
+export { CalendarComponent };

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Card } from '.';
+
+const meta = {
+  title: 'V2Components/Card',
+  component: Card,
+  args: {},
+} satisfies Meta<typeof Card>;
+export default meta;
+
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {};

package/src/components/Card/index.tsx

@@ -0,0 +1,39 @@
+import { forwardRef, HTMLAttributes } from 'react';
+
+import clsx from 'clsx';
+
+interface AnchorAttributes
+  extends Partial<Pick<JSX.IntrinsicElements['a'], 'href' | 'target'>> {}
+
+const CardComponent = forwardRef<
+  HTMLAnchorElement,
+  HTMLAttributes<HTMLDivElement> & { href: string; target: string }
+>(({ className, href, target, children, ...props }, ref) => {
+  let Tag: keyof Pick<JSX.IntrinsicElements, 'a' | 'div'> = 'div';
+  let attributes: AnchorAttributes = {};
+
+  if (Boolean(href) || Boolean(target)) {
+    Tag = 'a';
+    attributes = { href, target, ...props };
+  }
+  return (
+    <Tag
+      className={clsx(
+        'grid grid-cols-1 rounded-xl bg-white p-4 drop-shadow',
+        {
+          'hover:cursor-pointer': href,
+        },
+        className,
+      )}
+      {...attributes}
+    >
+      {children}
+    </Tag>
+  );
+});
+
+CardComponent.displayName = 'Card';
+
+const Card = Object.assign(CardComponent);
+
+export { Card };

package/src/components/Carousel/Carousel.stories.tsx

@@ -0,0 +1,44 @@
+import { ImageCard } from '@components/ImageCard';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Carousel } from '.';
+
+const meta = {
+  title: 'V2Components/Carousel',
+  component: Carousel,
+  args: {
+    perView: 4,
+    spacing: 16,
+    loop: true,
+    children: [
+      <Carousel.Content>
+        <Carousel.Arrow />
+        <Carousel.Slides>
+          {[...Array(5)].map((_, i) => (
+            <ImageCard className="keen-slider__slide">
+              <ImageCard.Image src={`https://picsum.photos/10${i}/100`} />
+              <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>
+            </ImageCard>
+          ))}
+        </Carousel.Slides>
+        <Carousel.Arrow rightArrow />
+      </Carousel.Content>,
+      <Carousel.Dots />,
+    ],
+  },
+} satisfies Meta<typeof Carousel>;
+
+export default meta;
+
+type Story = StoryObj<typeof Carousel>;
+
+export const Default: Story = {};