trepur_components 2.3.8 → 2.3.10

package/src/components/Showcase/index.tsx

@@ -1,69 +0,0 @@
-import { Avatar } from '@components/Avatar';
-import { ComponentWrapper } from '@components/ComponentWrapper';
-import { Container } from '@components/Container';
-import { Icon, type IconProps } from '@components/Icon';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface Props {
-  id: string;
-  className?: string;
-  title: string;
-  subTitle: string;
-  description: string;
-  bgColour?: Colours;
-  image: string;
-  size?: 'small' | 'medium' | 'large';
-  iconProps?: IconProps;
-}
-
-export const Showcase = ({
-  id,
-  className,
-  title,
-  subTitle,
-  description,
-  bgColour,
-  size = 'large',
-  iconProps,
-}: Props) => {
-  const classList = className;
-
-  const containerSize = classNames(
-    {
-      'h-56': size === 'small',
-      'h-96': size === 'medium',
-      'min-h-[calc(100vh-176px)]': size === 'large',
-    },
-    'flex flex-wrap text-center md:flex-nowrap md:text-left',
-  )
-
-  return (
-    <ComponentWrapper id={id} className={classList} bgColour={bgColour}>
-      <Container className={containerSize}>
-        <div className="m-auto w-full md:w-2/3 md:pl-16 md:pr-4 lg:pl-32 lg:pr-8 xl:pl-64">
-          <h2 className="text-lg font-bold leading-tight text-primary md:text-xxl">
-            {title}
-          </h2>
-          <h2 className="text-lg font-bold leading-tight text-black md:text-xxl">
-            {subTitle}
-          </h2>
-          <p className="pt-4 text-sm text-black md:text-md">{description}</p>
-        </div>
-        <div className="m-auto flex w-full justify-center md:w-1/3 md:pb-20">
-          <Avatar />
-        </div>
-      </Container>
-      {iconProps?.icon && (
-        <div className="flex justify-center">
-          <Icon
-            size="2x"
-            {...iconProps}
-            icon={iconProps.icon}
-            onClick={iconProps.onClick}
-          />
-        </div>
-      )}
-    </ComponentWrapper>
-  );
-}

package/src/components/SideNav/SideNav.stories.tsx

@@ -1,50 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { SideNav } from '.';
-
-const meta = {
-  title: 'Components/SideNav',
-  component: SideNav,
-  parameters: {
-    backgrounds: {
-      default: 'grey',
-      values: [
-        {
-          name: 'grey',
-          value: '#f3f3f3',
-        }
-      ]
-    },
-  },
-  argTypes: {
-    ...idAndClassName,
-
-    navLinks: {
-      description: 'An array of nav links to display in the component',
-      table: {
-        type: { summary: 'array' },
-      }
-    },
-    bgColour: {
-      type: { name: 'string', required: false },
-      options: ['primary', 'secondary', 'white', 'black', 'gold'],
-      description: 'The background colour of the component',
-      table: {
-        type: { summary: 'string' },
-      },
-      defaultValue: 'primary',
-      control: 'select',
-    }
-  },
-  args: {
-    children: <p>dfghj</p>,
-    showNav: true,
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof SideNav>;
-
-export const Default: Story = {};

package/src/components/SideNav/index.tsx

@@ -1,39 +0,0 @@
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface Props {
-  id: string;
-  className: string;
-  children: any;
-  getNavStatus: (asSideBar: boolean, open: boolean) => void;
-  bgColour?: Colours;
-  showNav?: boolean;
-  leftExpand?: boolean;
-}
-
-export const SideNav = ({
-  id,
-  className,
-  children,
-  bgColour = 'primary',
-  showNav = false,
-  leftExpand = true,
-}: Props) => {
-  const sideNavClasses = classNames(
-    {
-      'w-0': !showNav,
-      'w-full sm:w-1/3': showNav,
-      'left-0': leftExpand,
-      'right-0': !leftExpand,
-    },
-
-    className,
-    'absolute z-50 h-full overflow-hidden duration-700',
-  )
-
-  return (
-    <div id={id} className={sideNavClasses}>
-      {children}
-    </div>
-  );
-}

package/src/components/SocialBlock/SocialBlock.stories.tsx

@@ -1,58 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { SocialBlock } from '.';
-
-const socialButtons = [
-  { type: 'facebook', href: '/facebook' },
-  { type: 'instagram', href: '/insta' },
-  { type: 'github', href: '/github' },
-]
-
-const meta = {
-  title: 'Components/Social Block',
-  component: SocialBlock,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-
-    withLiveUpdates: {
-      description: '',
-      control: 'boolean',
-      table: { category: '' },
-    },
-    onSave: {
-      type: { name: 'function', required: false },
-      description: 'Fires a function when you click save',
-      action: 'onClick',
-      table: {
-        type: { summary: 'function' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    variant: {
-      type: { name: 'string', required: false },
-      options: ['dark', 'light'],
-      description: 'The variant of button to render',
-      table: { type: { summary: 'dark' }, defaultValue: { summary: 'dark' } },
-      defaultValue: 'dark',
-      control: { type: 'radio' },
-    }
-  },
-  args: {
-    title: 'Why not connect with me on LinkedIn or Facebook?',
-    description: 'Or send me a E-Mail to get in touch',
-    editTitleClasses: 'text-md sm:text-lg ',
-    editTextClasses: '',
-    editInputClasses: 'mt-4 border border-black text-black bg-white',
-    onSave: action('button-save'),
-    withLiveUpdates: true,
-    socialButtons,
-  }
-}
-export default meta;
-
-type Story = StoryObj<typeof SocialBlock>;
-
-export const Default: Story = {};

package/src/components/SocialBlock/index.tsx

@@ -1,59 +0,0 @@
-import { ComponentWrapper } from '@components/ComponentWrapper';
-import { SocialButton } from '@components/SocialButton';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface SocialBlockProps {
-  id?: string;
-  className?: string;
-  title?: string;
-  description?: string;
-  bgColour?: Colours;
-  socialButtons?: Array<{ type: string }>;
-  variant: 'light' | 'dark';
-}
-
-export const SocialBlock = ({
-  id,
-  className,
-  title,
-  description,
-  bgColour,
-  socialButtons,
-  variant = 'light',
-}: SocialBlockProps) => {
-  const colours =
-    variant === 'dark'
-      ? 'bg-primary text-white placeholder-white'
-      : 'bg-white text-black placeholder-primary';
-  const classList = classNames('w-full', className, colours);
-
-  return (
-    <ComponentWrapper
-      id={id}
-      className={classList}
-      title={title}
-      description={description}
-      bgColour={bgColour}
-    >
-      <div className="flex w-full">
-        <div className="mx-auto inline-block rounded-full px-2">
-          <div className="flex">
-            {socialButtons?.map((button: any, i: number) => {
-              return (
-                button.href !== undefined && (
-                  <SocialButton
-                    key={`socual_button_${i}`}
-                    className="mx-1 my-2"
-                    type={button.type}
-                    href={button.href}
-                  />
-                )
-              );
-            })}
-          </div>
-        </div>
-      </div>
-    </ComponentWrapper>
-  );
-}

package/src/components/SocialButton/SocialButton.stories.tsx

@@ -1,88 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { SocialButton } from '.';
-
-const meta = {
-  title: 'Components/SocialButton',
-  component: SocialButton,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'A SocialButton 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' },
-      }
-    },
-    type: {
-      type: {
-        name: 'string',
-        required: false,
-      },
-      options: ['facebook', 'instagram', 'github', 'linkedin'],
-      description: 'The type of SocialButton 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',
-        }
-      }
-    },
-    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: {
-    type: 'facebook',
-    href: '/',
-    onClick: action('SocialButton clicked'),
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof SocialButton>;
-
-export const Default: Story = {};

package/src/components/SocialButton/index.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-
-import { Icon } from '@components/Icon';
-import { faStar } from '@fortawesome/fontawesome-free-solid';
-import { type IconProp } from '@fortawesome/fontawesome-svg-core';
-import { type Colours, type SocialTypes } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  onClick?: React.MouseEventHandler;
-  type?: SocialTypes;
-  href?: string;
-  openInNewTab?: boolean;
-}
-
-export const SocialButton = ({
-  id,
-  className,
-  onClick,
-  type = 'facebook',
-  href,
-  openInNewTab = false,
-}: Props) => {
-  const getColours = (type: Colours): Colours => {
-    const typeString: string = type;
-    const colour: string = `interactive-${typeString}`;
-    return colour as Colours;
-  }
-
-  const classList = classNames(
-    'flex h-16 w-16 transform rounded-full duration-500',
-    className,
-    {
-      'bg-facebook hover:bg-interactive-facebook': type === 'facebook',
-      'bg-github hover:bg-interactive-github': type === 'github',
-      '': type === 'instagram',
-      'bg-linkedin hover:bg-interactive-linkedin': type === 'linkedin',
-    }
-  )
-
-  const iconType = {
-    facebook: 'facebook-f',
-    instagram: 'instagram',
-    github: 'github',
-    linkedin: 'linkedin-in',
-  }
-
-  const typeString: string = type.toString();
-  return (
-    <a
-      className="rounded-full"
-      href={href}
-      aria-label={`view me on ${typeString}`}
-      onClick={onClick}
-      {...(openInNewTab && { target: '_blank' })}
-    >
-      <div id={id} className={classList}>
-        <Icon icon={faStar as IconProp} size="2x" colour="white" />
-      </div>
-    </a>
-  );
-}

package/src/components/StarRating/StarRating.stories.tsx

@@ -1,23 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { StarRating } from '.';
-
-const meta = {
-  title: 'Components/Star Rating',
-  component: StarRating,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    stars: 3,
-    size: 2,
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof StarRating>;
-
-export const Default: Story = {};

package/src/components/StarRating/index.tsx

@@ -1,65 +0,0 @@
-import { Icon } from '@components/Icon';
-import { faStar } from '@fortawesome/fontawesome-free-solid';
-import {
-  type IconProp,
-  type SizeProp,
-} from '@fortawesome/fontawesome-svg-core';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  stars?: number;
-  size?: SizeProp;
-}
-
-export const StarRating = ({
-  id,
-  className,
-  stars = 1,
-  size = '2x',
-}: Props) => {
-  const classList = classNames(className, 'flex');
-
-  const getStars = () => {
-    const starsArr = [];
-    for (let i = 0; i < stars; i++) {
-      starsArr.push(
-        <Icon
-          key={`checked_star_${i + 0}`}
-          id={`checked-${i}`}
-          icon={faStar as IconProp}
-          size={size}
-          colour="gold"
-        />,
-      )
-    }
-    return starsArr;
-  }
-
-  const getStarsChecked = () => {
-    const starsArr = [];
-    for (let i = 0; i < 5 - stars; i++) {
-      starsArr.push(
-        <Icon
-          key={`unchecked_star_${i + 0}`}
-          id={`unchecked-${i}`}
-          icon={faStar as IconProp}
-          size={size}
-        />,
-      )
-    }
-    return starsArr;
-  }
-
-  const getAllStars = () => {
-    const starArray = [...getStars(), ...getStarsChecked()];
-    return starArray;
-  }
-
-  return (
-    <div id={id} className={classList}>
-      {getAllStars()}
-    </div>
-  );
-}

package/src/components/Testimonial/Testimonial.stories.tsx

@@ -1,109 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Testimonial } from '.';
-
-const meta = {
-  title: 'Components/Testimonial',
-  component: Testimonial,
-  argTypes: {
-    ...idAndClassName,
-    text: {
-      description: 'The description to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    companyName: {
-      description: 'The company name to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    positionStartDate: {
-      description: 'The start date to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    positionEndDate: {
-      description: 'The end date to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    position: {
-      description: 'The position to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    date: {
-      description: 'The date of the testimonial to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    authorsName: {
-      description: 'The authors name to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    authorsPosition: {
-      description: 'The authors position to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    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' },
-      }
-    }
-  },
-  args: {
-    imageProps: {
-      src: 'https://picsum.photos/100/100',
-      height: 8,
-      width: 8,
-      roundedFull: true,
-      centerAligned: true,
-    },
-    authorsName: 'Authors Name',
-    authorsPosition: 'Authors Position',
-    position: 'Position',
-    positionEndDate: 'End Date',
-    positionStartDate: 'Start Date',
-    date: 'Date',
-    companyName: 'Company Name',
-    text: 'This is some text',
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof Testimonial>;
-
-export const Default: Story = {};

package/src/components/Testimonial/index.tsx

@@ -1,55 +0,0 @@
-import { Container } from '@components/Container';
-import { Image, type Props as imageProps } from '@components/Image';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  text?: string;
-  imageProps?: imageProps;
-  companyName?: string;
-  position?: string;
-  date?: string;
-  positionStartDate?: string;
-  positionEndDate?: string;
-  authorsName?: string;
-  authorsPosition?: string;
-}
-
-export const Testimonial = ({
-  id,
-  className,
-  text,
-  imageProps,
-  companyName,
-  position,
-  date,
-  positionStartDate,
-  positionEndDate,
-  authorsName,
-  authorsPosition,
-}: Props) => {
-  const classList = classNames(className, 'text-center');
-  const src = imageProps?.src !== undefined ? imageProps?.src : '';
-
-  return (
-    <div id={id} className={classList}>
-      <Container withPadding>
-        <div className="mx-auto">
-          <Image src={src} {...imageProps} />
-        </div>
-        <div>
-          <h3 className="text-lg font-medium">{companyName}</h3>
-          <p className="pt-2 text-md font-regular">{position}</p>
-          <p className="text-sm font-regular">
-            {positionStartDate} - {positionEndDate}
-          </p>
-          <p className="py-4 text-md font-light">{text}</p>
-          <p className="text-sm font-medium">
-            {authorsName} - {authorsPosition}: {date}
-          </p>
-        </div>
-      </Container>
-    </div>
-  );
-}