trepur_components 2.3.8 → 2.3.10

package/src/components/NavTwo/Dropdown.tsx

@@ -1,30 +0,0 @@
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  children: any;
-  visible?: boolean;
-}
-
-export const Dropdown = ({
-  id,
-  className,
-  children,
-  visible = false,
-}: Props) => {
-  const dropdownNavClasses = classNames(
-    {
-      'hidden h-0': !visible,
-      'h-auto': visible,
-    },
-    'z-50 overflow-hidden md:hidden',
-    className,
-  )
-
-  return (
-    <div id={id} className={dropdownNavClasses}>
-      <div className="space-y-1 pb-3 pt-2">{children}</div>
-    </div>
-  );
-}

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

@@ -1,32 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Nav from '.';
-
-const meta = {
-  title: 'Components/NavTwo',
-  component: Nav,
-  parameters: {
-    backgrounds: {
-      default: 'grey',
-      values: [
-        {
-          name: 'grey',
-          value: '#f3f3f3',
-        }
-      ]
-    },
-  },
-  argTypes: {
-    ...idAndClassName,
-    children: {},
-  },
-  args: {
-    className: 'bg-primary text-white py-4',
-  }
-}
-export default meta;
-
-type Story = StoryObj<typeof Nav>;
-
-export const Default: Story = {};

package/src/components/NavTwo/Sidebar.tsx

@@ -1,30 +0,0 @@
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  children: any;
-  visible?: boolean;
-}
-
-export const Sidebar = ({
-  id,
-  className,
-  children,
-  visible = false,
-}: Props) => {
-  const sideNavClasses = classNames(
-    {
-      'w-0': !visible,
-      'h-screen w-full sm:w-1/3': visible,
-    },
-    'fixed z-50 h-full overflow-hidden duration-700 md:hidden',
-    className,
-  )
-
-  return (
-    <div id={id} className={sideNavClasses}>
-      {children}
-    </div>
-  );
-}

package/src/components/NavTwo/StickyNav.tsx

@@ -1,29 +0,0 @@
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  children: any;
-  visible?: boolean;
-}
-
-export const StickyNav = ({
-  id,
-  className,
-  children,
-  visible = false,
-}: Props) => {
-  const classList = classNames(
-    {
-      'opacity-100 transition-all duration-1000': visible,
-    },
-    className,
-    'fixed top-0 z-40 w-full overflow-hidden opacity-0 transition-all duration-500',
-  )
-
-  return (
-    <div id={`sticky_${id ?? 'nav'}`} className={classList}>
-      {children}
-    </div>
-  );
-}

package/src/components/NavTwo/index.tsx

@@ -1,37 +0,0 @@
-import classNames from 'classnames';
-
-import { Dropdown } from './Dropdown';
-import { Sidebar } from './Sidebar';
-import { StickyNav } from './StickyNav';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  children: any;
-  mobileNavExpanded?: boolean;
-}
-
-export const Nav = ({ id, className, children, mobileNavExpanded }: Props) => {
-  const classList = classNames(className);
-
-  return (
-    <div>
-      <div
-        className={classNames(
-          'fixed bottom-0 left-0 right-0 top-0 z-50 h-full w-full bg-primary transition-opacity duration-700',
-          [mobileNavExpanded] && 'visible opacity-100',
-          [!mobileNavExpanded] && 'invisible opacity-0',
-        )}
-      />
-      <header id={id} className={classList}>
-        {children}
-      </header>
-    </div>
-  );
-}
-
-export default Nav;
-
-Nav.Dropdown = Dropdown;
-Nav.Sidebar = Sidebar;
-Nav.Sticky = StickyNav;

package/src/components/NewsCard/NewsCard.stories.tsx

@@ -1,72 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { NewsCard } from '.';
-
-const meta = {
-  title: 'Components/News Card',
-  component: NewsCard,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    title: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    content: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    imageProps: {
-      type: { name: 'other', value: 'object' },
-      description: 'The props to pass to the image to display on the component',
-      table: {
-        type: {
-          summary: 'object',
-        },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    buttonProps: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    rounded: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    }
-  },
-  args: {
-    title: 'This is a title',
-    content:
-      'This is some content that will only be displayed if the collapsible item is expanded and will dissappear when the collapsible item is collapsed.',
-    rounded: true,
-    imageProps: {
-      src: 'https://picsum.photos/400/200',
-      rounded: true,
-    },
-    buttonProps: {
-      children: 'Button',
-      className: 'w-full',
-      href: '/',
-    }
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof NewsCard>;
-
-export const Default: Story = {};

package/src/components/NewsCard/index.tsx

@@ -1,44 +0,0 @@
-import { Button, type Props as buttonProps } from '@components/Button';
-import { Image, type Props as imageProps } from '@components/Image';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  content?: string;
-  imageProps?: imageProps;
-  buttonProps?: buttonProps;
-  rounded?: boolean;
-}
-
-export const NewsCard = ({
-  id,
-  className,
-  title,
-  content,
-  imageProps,
-  buttonProps,
-  rounded,
-}: Props) => {
-  const classList = classNames(className, 'flex border p-2');
-
-  const src = imageProps?.src !== undefined ? imageProps.src : '';
-
-  return (
-    <div id={id} className={classList}>
-      <div>
-        <Image src={src} {...imageProps} />
-      </div>
-      <div className="expandable flex w-auto flex-col justify-between text-center">
-        <p>{title}</p>
-        <p>{content}</p>
-        {buttonProps !== undefined && (
-          <div className="px-8">
-            <Button {...buttonProps}>{buttonProps.children}</Button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/Pill/Pill.stories.tsx

@@ -1,44 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Pill } from '.';
-
-const meta = {
-  title: 'Components/Pill',
-  component: Pill,
-  argTypes: {
-    ...idAndClassName,
-    text: {
-      type: { name: 'string', required: false },
-      description: 'The text to display in the component',
-      table: {
-        type: { summary: 'string' },
-      }
-    },
-    onClick: {
-      type: { name: 'function', required: false },
-      description:
-        'An on click handle to execute when clicking on the component',
-      table: {
-        type: { summary: 'function' },
-      }
-    },
-    dismissOnClick: {
-      type: { name: 'boolean', required: false },
-      description: 'To toggle the disappearance of the component on click',
-      table: {
-        type: { summary: 'boolean' },
-      }
-    }
-  },
-  args: {
-    text: 'This is a pill',
-    onClick: action('pill clicked'),
-  }
-}
-export default meta;
-
-type Story = StoryObj<typeof Pill>;
-
-export const Default: Story = {};

package/src/components/Pill/index.tsx

@@ -1,54 +0,0 @@
-import { useState } from 'react';
-
-import { faCrosshairs } from '@fortawesome/fontawesome-free-solid';
-import { type IconProp } from '@fortawesome/fontawesome-svg-core';
-import classNames from 'classnames';
-import { Icon } from '..';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  text: string;
-  onClick?: () => void;
-  dismissOnClick?: boolean;
-}
-
-export const Pill = ({
-  id,
-  className,
-  text,
-  onClick,
-  dismissOnClick = false,
-}: Props) => {
-  const [shouldDisplay, setShouldDisplay] = useState(true);
-
-  const classList = classNames(
-    {
-      invisible: !shouldDisplay,
-      'px-4': !dismissOnClick,
-      'pl-4 pr-1': dismissOnClick,
-    },
-    className,
-    'rounded-full border-2 py-1 inline-block border-primary text-primary',
-  )
-
-  const handleOnClick = (): void => {
-    if (dismissOnClick) {
-      setShouldDisplay(false);
-    }
-    onClick?.();
-  }
-
-  return shouldDisplay ? (
-    <button id={id} className={classList} onClick={handleOnClick}>
-      <div className="flex">
-        <p>{text}</p>
-        {dismissOnClick && (
-          <Icon icon={faCrosshairs as IconProp} colour="primary" />
-        )}
-      </div>
-    </button>
-      ) : (
-    <></>
-      );
-}

package/src/components/ProductCard/ProductCard.stories.tsx

@@ -1,61 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { ProductCard } from '.';
-
-const meta = {
-  title: 'Components/ProductCard',
-  component: ProductCard,
-  argTypes: {
-    ...idAndClassName,
-    imageProps: {
-      description: '',
-      table: {},
-    },
-    videoProps: {
-      description: '',
-      table: {},
-    },
-    title: {
-      description: 'The title to display on the component',
-      table: {},
-    },
-    subTitle: {
-      description: 'The subtitle to display on the component',
-      table: {},
-    },
-    description: {
-      description: 'The description to display on the component',
-      table: {},
-    },
-    href: {
-      description:
-        'The link to send the user to when clicking on the component',
-      table: {},
-    },
-    target: {
-      description: '',
-      table: {},
-    },
-    buttonProps: {
-      description: '',
-      table: {},
-    }
-  },
-  args: {
-    imageProps: {
-      src: 'https://picsum.photos/500/300',
-    },
-    title: 'This is a title',
-    textLineOne: 'Text line 1',
-    textLineTwo: 'Text Line 2',
-    textLineThree: 'Text line 3',
-    ctaText: 'Add to bag',
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof ProductCard>;
-
-export const Default: Story = {};

package/src/components/ProductCard/index.tsx

@@ -1,110 +0,0 @@
-import { useState } from 'react';
-
-import { Button } from '@components/Button';
-import { Icon } from '@components/Icon';
-import { type Props as imageProps } from '@components/Image';
-import { faPercent } from '@fortawesome/fontawesome-free-solid';
-import { type IconProp } from '@fortawesome/fontawesome-svg-core';
-import classNames from 'classnames';
-
-import { Counter } from '../Counter';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  imageProps?: imageProps;
-  textLineOne?: string;
-  textLineTwo?: string;
-  textLineThree?: string;
-  count?: number;
-  ctaText: string;
-  isEditable?: boolean;
-  ctaOnClick?: () => void;
-  onEditClick?: () => void;
-  onCounterClick?: (count: number) => void;
-}
-
-export const ProductCard = ({
-  id,
-  className,
-  imageProps,
-  title,
-  textLineOne,
-  textLineTwo,
-  textLineThree,
-  count,
-  ctaText,
-  isEditable = false,
-  ctaOnClick,
-  onEditClick,
-  onCounterClick,
-}: Props) => {
-  const [isHovering, setIsHovering] = useState(false);
-  const ProductCardTitleClasses = 'text-md font-medium';
-  const ProductCardSubTitleClassList = 'text-sm font-regular';
-  const classList = classNames(
-    className,
-    'absolute flex flex-col rounded-lg shadow-xl max-w-[380px]',
-  )
-  const imageClassList =
-    'w-full object-cover h-96 overflow-hidden rounded-t-lg';
-
-  return (
-    <div
-      id={id}
-      className={classList}
-      onMouseOver={() => {
-        setIsHovering(true);
-      }}
-      onMouseOut={() => {
-        setIsHovering(false);
-      }}
-    >
-      <div className="relative">
-        <img className={imageClassList} {...imageProps} />
-        {isEditable && (
-          <div className="absolute right-2 top-2">
-            <Button type="icon" variant="secondary" onClick={onEditClick}>
-              <Icon icon={faPercent as IconProp} />
-            </Button>
-          </div>
-        )}
-      </div>
-
-      <div className="h-150px overflow-hidden">
-        {!isHovering && (
-          <div className="mt-0 h-full rounded-b-lg bg-white p-6 transition-all duration-300">
-            {title !== undefined && (
-              <h3 className={ProductCardTitleClasses}>{title}</h3>
-            )}
-            {textLineOne !== undefined && (
-              <h4 className={ProductCardSubTitleClassList}>{textLineOne}</h4>
-            )}
-            {textLineTwo !== undefined && (
-              <h4 className={ProductCardSubTitleClassList}>{textLineTwo}</h4>
-            )}
-            {textLineThree !== undefined && (
-              <h4 className={ProductCardSubTitleClassList}>{textLineThree}</h4>
-            )}
-          </div>
-        )}
-        {isHovering && (
-          <div className="mt-0 flex h-full rounded-b-lg bg-white p-6 text-center transition-all duration-300">
-            <div className="mx-auto my-auto">
-              <Button onClick={ctaOnClick}>{ctaText}</Button>
-              {count !== undefined && (
-                <Counter
-                  count={count}
-                  onClick={(newCount: number) => {
-                    onCounterClick?.(newCount);
-                  }}
-                />
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/ProductCardV2/ProductCardV2.stories.tsx

@@ -1,50 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { ProductCardV2 } from '.';
-
-const meta = {
-  title: 'Components/ProductCardV2',
-  component: ProductCardV2,
-  parameters: {
-    layout: 'padded',
-  },
-  argTypes: {
-    ...idAndClassName,
-    imageProps: {
-      description: '',
-    },
-    title: {
-      description: 'The title to display on the component',
-    },
-    subTitle: {
-      description: 'The subtitle to display on the component',
-    },
-    description: {
-      description: 'The description to display on the component',
-    },
-    href: {
-      description:
-        'The link to send the user to when clicking on the component',
-    }
-  },
-  args: {
-    imageProps: {
-      src: 'https://picsum.photos/500/300',
-    },
-    title: 'Osprey Exos Pro 55',
-    textLineOne: 'Weight: 600 grams',
-    topRightIcon: 'circle-check',
-    bottomRightIcon: {
-      colour: 'black',
-      type: 'edit',
-      size: 2,
-    }
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ProductCardV2>;
-
-export const Default: Story = {};

package/src/components/ProductCardV2/index.tsx

@@ -1,98 +0,0 @@
-import React from 'react';
-
-import { Counter } from '@components/Counter';
-import { Icon, type IconProps } from '@components/Icon';
-import { type Props as imageProps } from '@components/Image';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  imageProps?: imageProps;
-  topRightIcon?: IconProps;
-  bottomRightIcon?: IconProps;
-  topLeftIcon?: IconProps;
-  bottomLeftIcon?: IconProps;
-  textLineOne?: string;
-  textLineTwo?: string;
-  textLineThree?: string;
-  onClick?: () => void;
-  onCounterClick?: (count: number) => void;
-  count?: number;
-  isSelected?: boolean;
-}
-
-export const ProductCardV2 = ({
-  id,
-  className,
-  imageProps,
-  title,
-  textLineOne,
-  textLineTwo,
-  textLineThree,
-  topRightIcon,
-  bottomRightIcon,
-  topLeftIcon,
-  bottomLeftIcon,
-  onClick,
-  onCounterClick,
-  count,
-  isSelected = false,
-}: Props) => {
-  return (
-    <div
-      id={id}
-      className={classNames(
-        {
-          'rounded-lg border-2 border-border-light p-2': isSelected,
-        },
-
-        className,
-        'max-w-[600px] scale-100 transform cursor-pointer duration-300',
-      )}
-      onClick={onClick}
-    >
-      <div className="relative">
-        <img
-          className="aspect-square w-full rounded-xl bg-white object-cover"
-          {...imageProps}
-        />
-        {topRightIcon && <Icon {...topRightIcon} />}
-        {bottomRightIcon && <Icon {...bottomRightIcon} colour="success" />}
-        {topLeftIcon && <Icon {...topLeftIcon} />}
-        {bottomLeftIcon && <Icon {...bottomLeftIcon} colour="success" />}
-        {count && (
-          <div className="absolute bottom-4 left-4 cursor-pointer">
-            <Counter
-              count={count}
-              onClick={(newCount: number) => {
-                onCounterClick?.(newCount);
-              }}
-            />
-          </div>
-        )}
-      </div>
-      <div className="mt-4">
-        {title !== undefined && (
-          <h3 className="text-md font-light text-ink">{title}</h3>
-        )}
-        {textLineOne !== undefined && (
-          <h4 className="text-sm font-extraLight text-border-dark">
-            {textLineOne}
-          </h4>
-        )}
-        {textLineTwo !== undefined && (
-          <h4 className="text-sm font-extraLight text-border-dark">
-            {textLineTwo}
-          </h4>
-        )}
-        {textLineThree !== undefined && (
-          <h4 className="text-sm font-extraLight text-border-dark">
-            {textLineThree}
-          </h4>
-        )}
-      </div>
-    </div>
-  );
-}