trepur_components 2.3.9 → 2.3.10

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

@@ -1,88 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, 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,63 +0,0 @@
-import React from 'react';
-
-import { Icon } from '@components/Icon';
-import { faStar } from '@fortawesome/fontawesome-free-solid';
-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} size="2x" colour="white" />
-      </div>
-    </a>
-  );
-};

package/src/components/SplitCard/SplitCard.stories.tsx

@@ -1,34 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { SplitCard } from '.';
-import { Image } from '..';
-
-const meta = {
-  title: 'V2Components/Split Card',
-  component: SplitCard,
-  args: {
-    className: 'bg-info-light',
-    swapDesktop: true,
-    swapMobile: true,
-    children: [
-      <SplitCard.LeftContent>
-        <Image src="https://picsum.photos/200/200" />
-      </SplitCard.LeftContent>,
-      <SplitCard.RightContent className="flex flex-col justify-center p-8">
-        <SplitCard.Title>This is a title</SplitCard.Title>
-        <SplitCard.Text>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
-          non reprehenderit quaerat unde eius quisquam enim distinctio tempora
-          animi, rerum exercitationem asperiores, consequuntur fuga ex
-          cupiditate? Cumque laudantium laborum numquam!
-        </SplitCard.Text>
-      </SplitCard.RightContent>,
-    ],
-  },
-} satisfies Meta<typeof SplitCard>;
-
-export default meta;
-
-type Story = StoryObj<typeof SplitCard>;
-
-export const Default: Story = {};

package/src/components/SplitCard/index.tsx

@@ -1,132 +0,0 @@
-import {
-  createContext,
-  forwardRef,
-  HTMLAttributes,
-  useContext,
-  useMemo,
-} from 'react';
-
-import MatchMedia from '@utils/matchMedia';
-import { Screens } from '@utils/screens';
-import clsx from 'clsx';
-
-export interface SplitCardContextProps {
-  swapDesktop?: boolean;
-  swapMobile?: boolean;
-  isMd?: boolean;
-}
-
-const SplitCardContext = createContext<SplitCardContextProps | null>(null);
-
-const SplitCardComponent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & SplitCardContextProps
->(({ id, className, children, swapDesktop, swapMobile, ...props }, ref) => {
-  const mediumScreen: string = Screens.md;
-  const mdScreenSize: string = `(min-width: ${mediumScreen})`;
-  const isMd: boolean = MatchMedia(mdScreenSize);
-
-  const state = useMemo(
-    () => ({
-      swapDesktop,
-      swapMobile,
-      isMd,
-    }),
-    [swapDesktop, swapMobile, isMd],
-  );
-
-  return (
-    <SplitCardContext.Provider value={state}>
-      <div
-        ref={ref}
-        {...props}
-        className={clsx('grid grid-cols-1 md:grid-cols-2', className)}
-      >
-        {children}
-      </div>
-    </SplitCardContext.Provider>
-  );
-});
-
-const SplitCardLeftContent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => {
-  const { swapDesktop, swapMobile, isMd } = useContext(SplitCardContext) || {};
-
-  return (
-    <div
-      ref={ref}
-      {...props}
-      className={clsx(
-        'flex h-full items-center text-center',
-        {
-          'md:order-last': swapDesktop,
-          'order-last': !isMd && swapMobile,
-        },
-        className,
-      )}
-    >
-      {children}
-    </div>
-  );
-});
-
-const SplitCardRightContent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => {
-  const { swapDesktop, swapMobile, isMd } = useContext(SplitCardContext) || {};
-
-  return (
-    <div
-      ref={ref}
-      {...props}
-      className={clsx(
-        'flex h-full items-center text-center',
-        {
-          'md:order-first': swapDesktop,
-          'order-first': !isMd && swapMobile,
-        },
-        className,
-      )}
-    >
-      {children}
-    </div>
-  );
-});
-
-const SplitCardTitle = forwardRef<
-  HTMLParagraphElement,
-  HTMLAttributes<HTMLParagraphElement>
->(({ id, children, ...props }, ref) => {
-  return (
-    <p ref={ref} className="items-center" {...props}>
-      {children}
-    </p>
-  );
-});
-
-const SplitCardText = forwardRef<
-  HTMLParagraphElement,
-  HTMLAttributes<HTMLParagraphElement>
->(({ id, children, ...props }, ref) => {
-  return (
-    <p ref={ref} className="" {...props}>
-      {children}
-    </p>
-  );
-});
-
-SplitCardComponent.displayName = 'SplitCard';
-SplitCardLeftContent.displayName = 'SplitCard.LeftContent';
-SplitCardRightContent.displayName = 'SplitCard.RightContent';
-
-const SplitCard = Object.assign(SplitCardComponent, {
-  LeftContent: SplitCardLeftContent,
-  RightContent: SplitCardRightContent,
-  Title: SplitCardTitle,
-  Text: SplitCardText,
-});
-
-export { SplitCard };

package/src/components/Stars/Star.stories.tsx

@@ -1,18 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Stars } from '.';
-
-const meta = {
-  title: 'V2Components/Stars',
-  component: Stars,
-  args: {
-    stars: 3,
-    size: '2x',
-  },
-} satisfies Meta<typeof Stars>;
-
-export default meta;
-
-type Story = StoryObj<typeof Stars>;
-
-export const Default: Story = {};

package/src/components/Stars/index.tsx

@@ -1,38 +0,0 @@
-import { forwardRef, HTMLAttributes } from 'react';
-
-import { Icon } from '@components/Icon';
-import { faStar } from '@fortawesome/fontawesome-free-solid';
-import { SizeProp } from '@fortawesome/fontawesome-svg-core';
-import clsx from 'clsx';
-
-export interface StarProps {
-  stars?: 1 | 2 | 3 | 4 | 5;
-  size?: SizeProp;
-}
-
-const StarComponent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & StarProps
->(({ className, stars = 0, size }, ref) => {
-  const getStarsChecked = () =>
-    [...Array(5)].map((_, i) => (
-      <Icon
-        className={i < stars ? 'text-star' : ''}
-        key={`checked_star_${i}`}
-        icon={faStar}
-        size="2x"
-      />
-    ));
-
-  return (
-    <div ref={ref} className={clsx('flex', className)}>
-      {getStarsChecked()}
-    </div>
-  );
-});
-
-StarComponent.displayName = 'Stars';
-
-const Stars = Object.assign(StarComponent);
-
-export { Stars };

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

@@ -1,37 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Testimonial } from '.';
-
-const meta = {
-  title: 'V2Components/Testimonial',
-  component: Testimonial,
-  args: {
-    children: [
-      <Testimonial.Image src="https://picsum.photos/100/100" />,
-      <Testimonial.Title>This is a title</Testimonial.Title>,
-      <Testimonial.Section>
-        <Testimonial.Position>Position</Testimonial.Position>
-        <Testimonial.Date>This is a date</Testimonial.Date>
-      </Testimonial.Section>,
-      <Testimonial.Text>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere delectus
-        soluta voluptas, minus sequi fuga facilis rem animi reprehenderit iusto
-        recusandae. Accusantium porro possimus id quas quis a soluta cum. Lorem,
-        ipsum dolor sit amet consectetur adipisicing elit. Facere odit rem quam
-        ullam! Ipsam dolorem libero exercitationem odio atque itaque
-        repudiandae? Amet est exercitationem quas iusto magni quod, molestiae
-        eaque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
-        fuga quibusdam minima assumenda. Culpa ab ea sit molestias aspernatur
-        enim ducimus quis consequatur? Ab officiis, sequi reiciendis eos quaerat
-        quisquam?
-      </Testimonial.Text>,
-      <Testimonial.AuthorDetails>Authors Name</Testimonial.AuthorDetails>,
-    ],
-  },
-} satisfies Meta<typeof Testimonial>;
-
-export default meta;
-
-type Story = StoryObj<typeof Testimonial>;
-
-export const Default: Story = {};

package/src/components/Testimonial/index.tsx

@@ -1,123 +0,0 @@
-import { forwardRef, HTMLAttributes } from 'react';
-
-import { Card } from '../';
-import { Image, ImageProps } from '@components/Image';
-import clsx from 'clsx';
-
-const TestimonialComponent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => {
-  return (
-    <Card ref={ref} className={clsx('grid gap-4', className)} {...props}>
-      {children}
-    </Card>
-  );
-});
-
-const TestimonialImage = forwardRef<
-  HTMLImageElement,
-  HTMLAttributes<HTMLImageElement> & ImageProps
->(({ className, src, ...props }, ref) => {
-  return (
-    <div ref={ref} className="mx-auto w-40 ">
-      <Image className="rounded-full" src={src} {...props} />
-    </div>
-  );
-});
-
-const TestimonialTitle = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => {
-  return (
-    <h3 ref={ref} className="text-center text-lg font-medium" {...props}>
-      {children}
-    </h3>
-  );
-});
-
-const TestimonialSection = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => {
-  return (
-    <div ref={ref} className={clsx('text-center', className)} {...props}>
-      {children}
-    </div>
-  );
-});
-
-const TestimonialPosition = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => {
-  return (
-    <p
-      ref={ref}
-      className={clsx('text-md font-regular text-sm', className)}
-      {...props}
-    >
-      {children}
-    </p>
-  );
-});
-
-const TestimonialDate = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => {
-  return (
-    <p ref={ref} className="font-regular text-sm" {...props}>
-      {children}
-    </p>
-  );
-});
-
-const TestimonialText = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => {
-  return (
-    <p className={clsx('text-md text-center font-light')} {...props}>
-      {children}
-    </p>
-  );
-});
-
-const TestimonialAuthorDetails = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => {
-  return (
-    <p
-      ref={ref}
-      className={clsx('text-center text-sm font-medium', className)}
-      {...props}
-    >
-      {children}
-    </p>
-  );
-});
-
-TestimonialComponent.displayName = 'Testimonial';
-
-TestimonialImage.displayName = 'Testimonial.Image';
-TestimonialTitle.displayName = 'Testimonial.Title';
-TestimonialSection.displayName = 'Testimonial.Section';
-TestimonialPosition.displayName = 'Testimonial.Position';
-TestimonialDate.displayName = 'Testimonial.Date';
-TestimonialText.displayName = 'Testimonial.Text';
-TestimonialAuthorDetails.displayName = 'Testimonial.AuthorDetails';
-
-const Testimonial = Object.assign(TestimonialComponent, {
-  Image: TestimonialImage,
-  Title: TestimonialTitle,
-  Section: TestimonialSection,
-  Position: TestimonialPosition,
-  Date: TestimonialDate,
-  Text: TestimonialText,
-  AuthorDetails: TestimonialAuthorDetails,
-});
-
-export { Testimonial };

package/src/components/TextArea/TextArea.stories.tsx

@@ -1,24 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { TextArea } from '.';
-
-const meta = {
-  title: 'V2Components/Text Area',
-  component: TextArea,
-  args: {
-    placeholder: 'This is a text area placeholder',
-    children: [
-      <TextArea.Item>
-        <TextArea.Label required>This is a label</TextArea.Label>
-        <TextArea.Box />
-        <TextArea.Validation />
-      </TextArea.Item>,
-    ],
-  },
-} satisfies Meta<typeof TextArea>;
-
-export default meta;
-
-type Story = StoryObj<typeof TextArea>;
-
-export const Default: Story = {};

package/src/components/TextArea/index.tsx

@@ -1,133 +0,0 @@
-import {
-  createContext,
-  forwardRef,
-  HTMLAttributes,
-  useContext,
-  useMemo,
-  useRef,
-} from 'react';
-
-import clsx from 'clsx';
-
-export interface TextAreaContextProps {
-  autoComplete?: string;
-  disabled?: boolean;
-  formId?: string;
-  height?: string;
-  maxLength?: number;
-  minLength?: number;
-  pattern?: string;
-  required?: boolean;
-  readOnly?: boolean;
-  label?: string;
-  type?: string;
-  name?: string;
-  placeholder?: string;
-  withValidation?: boolean;
-  onChange?: (e: any) => void;
-  onBlur?: () => void;
-  onFocus?: () => void;
-  onClick?: () => void;
-  errors?: string[];
-  value?: string;
-}
-
-const TextAreaContext = createContext<TextAreaContextProps | null>(null);
-
-const TextAreaComponent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & TextAreaContextProps
->(({ children, errors, placeholder, ...props }, ref) => {
-  const state = useMemo(
-    () => ({
-      errors,
-      placeholder,
-      ...props,
-    }),
-    [errors, props],
-  );
-  return (
-    <TextAreaContext.Provider value={state}>
-      <div ref={ref}>{children}</div>
-    </TextAreaContext.Provider>
-  );
-});
-
-const TextAreaItem = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ children, ...props }, ref) => {
-    const btnRef = useRef<any>(null);
-    return (
-      <div
-        className="mt-4 w-full cursor-pointer bg-white"
-        onClick={() => btnRef.current?.focus()}
-        ref={ref}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-const TextAreaLabel = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & { required?: boolean }
->(({ children, required = false }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className="font-regular absolute -mt-3 ml-3 flex rounded-2xl bg-white px-1 text-sm "
-    >
-      <p>{children}</p>
-      {required && (
-        <p className="font-semiBold text-lg text-error-default">&nbsp;*</p>
-      )}
-    </div>
-  );
-});
-
-const TextAreaBox = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ ...props }) => {
-    const { errors, placeholder } = useContext(TextAreaContext) || {};
-
-    return (
-      <textarea
-        className="text-ink text-md w-full cursor-pointer rounded-md border border-black bg-white py-2 pl-4"
-        placeholder={placeholder}
-      />
-    );
-  },
-);
-
-const TextAreaValidation = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ children, ...props }, ref) => {
-  const { errors } = useContext(TextAreaContext) || {};
-  return (
-    <div
-      ref={ref}
-      className="font-regular gap-y-2 text-sm text-error-default"
-      {...props}
-    >
-      {errors?.map((error, i) => {
-        return <p key={`error-msg-${i + 1}`}>{error}</p>;
-      })}
-    </div>
-  );
-});
-
-TextAreaComponent.displayName = 'TextArea';
-TextAreaItem.displayName = 'TextArea.Item';
-TextAreaLabel.displayName = 'TextArea.Label';
-TextAreaBox.displayName = 'TextArea.Box';
-TextAreaValidation.displayName = 'TextArea.Validation';
-
-const TextArea = Object.assign(TextAreaComponent, {
-  Item: TextAreaItem,
-  Label: TextAreaLabel,
-  Box: TextAreaBox,
-  Validation: TextAreaValidation,
-});
-
-export { TextArea };