trepur_components 2.3.8 → 2.3.9

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/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>
-  );
-}

package/src/components/Proficiencies/Proficiencies.stories.tsx

@@ -1,50 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Proficiencies } from '.';
-
-const meta = {
-  title: 'Components/Proficiencies',
-  component: Proficiencies,
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    title: 'Proficiencies',
-    proficiencies: [
-      { src: 'https://picsum.photos/200/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/201', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/202', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/203', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/204', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/205', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/206', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/207', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/208', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/209', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/202/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/203/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/204/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/205/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/206/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/207/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/208/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/209/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/201', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/202', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/203', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/204', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/205', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/205', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/206', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/207', overlayText: 'Logo' },
-    ]
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Proficiencies>;
-
-export const Default: Story = {};

package/src/components/Proficiencies/index.tsx

@@ -1,51 +0,0 @@
-import { Column } from '@components/Column';
-import { ComponentWrapper } from '@components/ComponentWrapper';
-import { Image, type Props as imageProps } from '@components/Image';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  description?: string;
-  proficiencies: imageProps[];
-  bgColour: Colours;
-}
-
-export const Proficiencies = ({
-  id,
-  className,
-  title,
-  description,
-  proficiencies,
-  bgColour,
-}: Props) => {
-  const classList = classNames(className, 'mx-auto w-full');
-
-  return (
-    <ComponentWrapper
-      id={id}
-      className={classList}
-      title={title}
-      description={description}
-      bgColour={bgColour}
-    >
-      <div className="flex flex-wrap">
-        {proficiencies.map((proficiency, i) => {
-          return (
-            <Column key={`stat_${i}`} className="pb-4" lg={2} md={2} sm={4}>
-              <Image
-                className="mx-auto md:mx-0"
-                src={proficiency.src}
-                overlayText={proficiency.overlayText}
-                width={4}
-                height={4}
-              />
-            </Column>
-          );
-        })}
-      </div>
-    </ComponentWrapper>
-  );
-}

package/src/components/Profile/Profile.stories.tsx

@@ -1,49 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Profile } from '.';
-
-const meta = {
-  title: 'Components/Profile',
-  component: Profile,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    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' },
-      }
-    },
-    alignment: {
-      description: '',
-      control: 'select',
-      options: ['left', 'center', 'right'],
-      table: {
-        category: '',
-      }
-    },
-    profileLinks: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    }
-  },
-  args: {
-    imageProps: {
-      src: 'https://picsum.photos/200/200',
-    }
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Profile>;
-
-export const Default: Story = {};