trepur_components 2.3.8 → 2.3.10

package/src/components/Image/Image.stories.tsx

@@ -1,87 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Image } from '.';
-
-const meta = {
-  title: 'Components/Image',
-  component: Image,
-  argTypes: {
-    ...idAndClassName,
-    image: {
-      type: { name: 'string', required: false },
-      description: 'The image to display on the component',
-      table: {
-        type: { summary: 'default' },
-      }
-    },
-    altText: {
-      type: { name: 'string', required: false },
-      description: 'The accessibility alt text for the image on the component',
-      table: {
-        type: { summary: 'default' },
-      }
-    },
-    title: {
-      type: { name: 'string', required: false },
-      description: 'The accessibility title for the image on the component',
-      table: {
-        type: { summary: 'default' },
-      }
-    },
-    rounded: {
-      type: { name: 'boolean', required: false },
-      description: 'Sets the corners of the component to rounded',
-      table: {
-        type: { summary: 'boolean' },
-      }
-    },
-    roundedFull: {
-      type: { name: 'boolean', required: false },
-      description: 'Sets the component to a circle shape',
-      table: {
-        type: { summary: 'boolean' },
-      }
-    },
-    height: {
-      type: { name: 'number', required: false },
-      description: 'Defines the height of the component',
-      table: {
-        type: { summary: 'number' },
-      }
-    },
-    width: {
-      type: { name: 'number', required: false },
-      description: 'Defines the width of the component',
-      table: {
-        type: { summary: 'number' },
-      }
-    },
-    overlayText: {
-      type: { name: 'string', required: false },
-      description: 'The text to show when hovering over the component',
-      table: {
-        type: { summary: 'default' },
-      }
-    },
-    centerAligned: {
-      type: { name: 'boolean', required: false },
-      description: 'Sets the component to the center',
-      table: {
-        type: { summary: 'boolean' },
-      }
-    }
-  },
-  args: {
-    src: 'https://picsum.photos/200/200',
-    height: 8,
-    width: 8,
-    overlayText: 'logo',
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof Image>;
-
-export const Default: Story = {};

package/src/components/Image/index.tsx

@@ -1,127 +0,0 @@
-import { useState } from 'react';
-
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  src: string;
-  altText?: string;
-  title?: string;
-  rounded?: boolean;
-  roundedFull?: boolean;
-  height?: number;
-  width?: number;
-  overlayText?: string;
-  centerAligned?: boolean;
-  bordered?: boolean;
-}
-
-export const Image = ({
-  id,
-  className,
-  src,
-  altText,
-  title,
-  rounded = false,
-  roundedFull = false,
-  height = 8,
-  width = 8,
-  overlayText,
-  centerAligned = false,
-  bordered = false,
-}: Props) => {
-  const [isHovering, setIsHovering] = useState(false);
-  const opacity = classNames({
-    'opacity-80': isHovering,
-    'opacity-0': !isHovering,
-  })
-
-  const widthClassList = classNames({
-    'w-6': width === 1,
-    'w-10': width === 2,
-    'w-14': width === 3,
-    'w-16': width === 4,
-    'w-20': width === 5,
-    'w-24': width === 6,
-    'w-28': width === 7,
-    'w-32': width === 8,
-    'w-36': width === 9,
-    'w-40': width === 10,
-    'w-44': width === 11,
-    'w-full':
-      width === undefined ||
-      ![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(width),
-  })
-
-  const heightClassList = classNames({
-    'h-6': height === 1,
-    'h-10': height === 2,
-    'h-14': height === 3,
-    'h-16': height === 4,
-    'h-20': height === 5,
-    'h-24': height === 6,
-    'h-28': height === 7,
-    'h-32': height === 8,
-    'h-36': height === 9,
-    'h-40': height === 10,
-    'h-44': height === 11,
-    'h-full':
-      height === undefined ||
-      ![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(height),
-  })
-
-  const imageClassList = classNames(
-    {
-      'rounded-2xl': rounded,
-      'rounded-full': roundedFull,
-      'mx-auto': centerAligned,
-      'border-4 border-primary': bordered,
-    },
-    className,
-    widthClassList,
-    heightClassList,
-  )
-
-  const overlayClassList = classNames(
-    widthClassList,
-    heightClassList,
-    opacity,
-    'absolute z-10 bg-white transition-opacity duration-700',
-  )
-
-  const overlayTextWrapperClassList = classNames(
-    widthClassList,
-    heightClassList,
-    opacity,
-    'absolute z-20 flex transition-opacity duration-700',
-  )
-
-  return (
-    <div className={imageClassList}>
-      {overlayText !== undefined && (
-        <>
-          <div className={overlayClassList} />
-          <div
-            className={overlayTextWrapperClassList}
-            onMouseEnter={() => {
-              setIsHovering(true);
-            }}
-            onMouseLeave={() => {
-              setIsHovering(false);
-            }}
-          >
-            <p className="m-auto text-center text-primary">{overlayText}</p>
-          </div>
-        </>
-      )}
-      <img
-        id={id}
-        className={imageClassList}
-        src={src}
-        alt={altText ?? overlayText}
-        title={title ?? overlayText}
-      />
-    </div>
-  );
-}

package/src/components/ImageInfo/ImageInfo.stories.tsx

@@ -1,38 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { ImageInfo } from '.';
-
-const meta = {
-  title: 'Components/Image Info',
-  component: ImageInfo,
-  argTypes: {
-    ...idAndClassName,
-    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: {
-    title: 'This is a title',
-    description: 'what do you recon to this?',
-    contentTitle: 'This is a title',
-    text: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse quia ducimus dolores exercitationem officia repudiandae maiores voluptatum iusto cum. Quae tenetur veniam quam nihil cupiditate fugiat, ratione minima illo! Cum.',
-    image: 'https://picsum.photos/400/200',
-    swapDesktop: true,
-    swapMobile: true,
-    bgColour: '#31A3DD',
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof ImageInfo>;
-
-export const Default: Story = {};

package/src/components/ImageInfo/index.tsx

@@ -1,84 +0,0 @@
-import { type Colours } from '@utils/controls';
-import MatchMedia from '@utils/matchMedia';
-import { Screens } from '@utils/screens';
-import classNames from 'classnames';
-
-import { Container } from '..';
-
-export interface Props {
-  id: string;
-  className?: string;
-  bgColour?: Colours;
-  textColour?: string;
-  contentTitle?: string;
-  text?: string;
-  image: string;
-  swapDesktop?: boolean;
-  swapMobile?: boolean;
-}
-
-export const ImageInfo = ({
-  id,
-  className,
-  bgColour,
-  textColour = 'white',
-  contentTitle,
-  text,
-  image,
-  swapDesktop = false,
-  swapMobile = false,
-}: Props) => {
-  const classList = `${className} w-full max-h-[800px]`;
-  const mediumScreen: string = Screens.md;
-  const lgScreenSize: string = `(min-width: ${mediumScreen})`;
-  const smScreenSize: string = `(max-width: ${mediumScreen})`;
-  const isLg: boolean = MatchMedia(lgScreenSize);
-  const isSm: boolean = MatchMedia(smScreenSize);
-
-  const wrapperClassList = classNames(
-    {
-      'md:flex-row': !swapDesktop,
-      'md:flex-row-reverse': swapDesktop,
-      'flex flex-col-reverse': !isLg && swapMobile,
-    },
-    'md:flex',
-  )
-
-  const imageWrapperClasses = classNames('max-h-96');
-
-  const imageClasses = classNames(
-    {
-      'h-[100vw]': isSm,
-    },
-    'h-full w-full object-cover',
-  )
-
-  return (
-    <div
-      id={id}
-      style={{ backgroundColor: bgColour, color: textColour }}
-      className={classList}
-    >
-      <Container withPadding={isLg}>
-        <div className={wrapperClassList}>
-          <div className={imageWrapperClasses}>
-            <img
-              src={image}
-              className={imageClasses}
-              alt={contentTitle}
-              title={contentTitle}
-            />
-          </div>
-          <div className="md:w-1/2">
-            <div className="flex h-full items-center justify-center p-8 text-center">
-              <div>
-                <p className="text-lg font-regular">{contentTitle}</p>
-                <p className="text-md font-light">{text}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </Container>
-    </div>
-  );
-}

package/src/components/ImageLink/ImageLink.stories.tsx

@@ -1,36 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { ImageLink } from '.';
-
-const meta = {
-  title: 'Components/Image Link',
-  component: ImageLink,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    title: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    image: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    }
-  },
-  args: {
-    image: 'https://picsum.photos/400/400',
-    link: '/',
-  }
-}
-export default meta;
-
-type Story = StoryObj<typeof ImageLink>;
-
-export const Default: Story = {};

package/src/components/ImageLink/index.tsx

@@ -1,58 +0,0 @@
-import { Button, type Props as buttonProps } from '@components/Button';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  image?: string;
-  altText?: string;
-  title?: string;
-  link?: string;
-  rounded?: boolean;
-  openInNewTab?: boolean;
-  buttonProps?: buttonProps;
-}
-export const ImageLink = ({
-  id,
-  className,
-  image,
-  altText,
-  title,
-  link,
-  rounded,
-  openInNewTab,
-  buttonProps,
-}: Props) => {
-  const classList = classNames(
-    className,
-    'mx-1 mb-2 cursor-pointer overflow-hidden text-center hover:opacity-50 md:mx-1 md:mb-2 lg:mx-3 lg:mb-5 max-w-96',
-  )
-
-  const roundedClass = classNames({
-    'rounded-full': rounded,
-  })
-
-  return (
-    <a id={id} href={link} {...(openInNewTab && { target: 'blank' })}>
-      <div
-        className={classNames(
-          roundedClass,
-          classList,
-          'relative overflow-hidden',
-        )}
-      >
-        <img src={image} alt={altText} className="h-full w-full object-cover" />
-        {title !== undefined && (
-          <h1 className="absolute inset-x-0 top-0 mt-4 bg-black py-2 text-center text-white">
-            {title}
-          </h1>
-        )}
-        {buttonProps?.children !== undefined && (
-          <Button className="absolute inset-x-0 bottom-0 mx-8 mb-4 text-center">
-            {buttonProps.children}
-          </Button>
-        )}
-      </div>
-    </a>
-  );
-}

package/src/components/ImageLinkList/ImageLinkList.stories.tsx

@@ -1,34 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { ImageLinkList } from '.';
-
-const getLinks = (): any => {
-  return new Array(16).fill(null).map(() => {
-    return {
-      image: 'https://picsum.photos/400/400',
-      title: 'Hi',
-      buttonProps: {
-        children: <p>button</p>,
-      }
-    }
-  })
-};
-
-const meta = {
-  title: 'Components/Image Link List',
-  component: ImageLinkList,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    items: getLinks(),
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof ImageLinkList>;
-
-export const Default: Story = {};

package/src/components/ImageLinkList/index.tsx

@@ -1,28 +0,0 @@
-import classNames from 'classnames';
-
-import { ImageLink, type Props as imageLinkProps } from '../ImageLink';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  items?: imageLinkProps[];
-}
-
-export const ImageLinkList = ({ id, className, items }: Props) => {
-  const classList = classNames(className, 'grid sm:grid-cols-2 md:grid-cols-4');
-
-  return (
-    <div id={id} className={classList}>
-      {items?.map((item, i: number) => {
-        return (
-          <ImageLink
-            key={`image_link_${i + 0}`}
-            altText={item.altText}
-            image={item.image}
-            title={item.title}
-          />
-        );
-      })}
-    </div>
-  );
-}

package/src/components/InformationIcon/InformationIcon.stories.tsx

@@ -1,29 +0,0 @@
-import { faHeart } from '@fortawesome/fontawesome-free-solid';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { InformationIcon } from '.';
-
-const meta = {
-  title: 'Components/Information Icon',
-  component: InformationIcon,
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    title: 'Self check-in',
-    subtitle: 'Check yourself in with the smartlock.',
-    withAnimation: true,
-    backgroundColour: 'white',
-    iconProps: {
-      icon: faHeart,
-      hollow: true,
-    }
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof InformationIcon>;
-
-export const Default: Story = {};

package/src/components/InformationIcon/index.tsx

@@ -1,105 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-import { Icon, type IconProps } from '@components/Icon';
-import MatchMedia from '@utils/matchMedia';
-import classNames from 'classnames';
-
-export interface InformationIconProps {
-  id: string;
-  className?: string;
-  title: string;
-  subtitle?: string | number;
-  withAnimation?: boolean;
-  iconProps: IconProps;
-  large?: boolean;
-}
-
-export const InformationIcon = ({
-  id,
-  className,
-  title,
-  subtitle,
-  withAnimation = false,
-  iconProps,
-  large = true,
-}: InformationIconProps) => {
-  const loaded = useRef(false);
-  const smScreenSize = 'max-width: 768px';
-  const isSm: boolean = MatchMedia(smScreenSize);
-  const classList = classNames(
-    {
-      'py-8': large,
-      'pb-4': !large,
-      'pt-4': !large,
-    },
-    className,
-    'rounded-2xl text-center sm:flex sm:text-left grid gap-6',
-  )
-
-  const titleClassList = classNames({
-    'font-light sm:font-semiBold': subtitle !== undefined,
-  })
-
-  const subtitleClassList = classNames(
-    'text-xxl font-medium sm:text-xs sm:font-regular',
-  )
-
-  useEffect(() => {
-    if (typeof subtitle === 'number') {
-      const element = document.getElementById(`${id}_number`);
-      const observer = new IntersectionObserver(
-        (entries, observer) => {
-          entries.forEach((entry) => {
-            if (entry.intersectionRatio >= 0.1 && !loaded.current) {
-              loaded.current = true;
-              counterAnimation(
-                document.getElementById(`${id}_number`),
-                0,
-                subtitle,
-                3000,
-              )
-            }
-          });
-        },
-        { threshold: 1 },
-      )
-      element != null && withAnimation && observer.observe(element);
-    }
-  }, []);
-
-  const counterAnimation = (
-    obj: any,
-    start: number,
-    end: number,
-    duration: number,
-  ): void => {
-    let startTimestamp: number;
-    const step = (timestamp: number): void => {
-      startTimestamp = timestamp;
-      const progress = Math.min((timestamp - startTimestamp) / duration, 1);
-      obj.innerHTML = Math.floor(progress * (end - start) + start);
-      if (progress < 1) {
-        window.requestAnimationFrame(step);
-      }
-    };
-    window.requestAnimationFrame(step);
-  }
-
-  return (
-    <div id={id} className={classList}>
-      <div className="sm:h-full">
-        {iconProps !== undefined && (
-          <Icon {...iconProps} size={isSm ? '3x' : '2x'} />
-        )}
-      </div>
-      <div className="mt-8 flex flex-col-reverse sm:mt-0 sm:block sm:pr-4 md:pr-8">
-        {title !== undefined && title !== '' && (
-          <p className={titleClassList}>{title}</p>
-        )}
-        {subtitle !== undefined && subtitle !== '' && (
-          <p className={subtitleClassList}>{subtitle}</p>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/InformationIconBlock/InformationIconBlock.stories.tsx

@@ -1,38 +0,0 @@
-import {
-  faCalendar,
-  faGlobe,
-  faList,
-  faUniversity,
-} from '@fortawesome/fontawesome-free-solid';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { InformationIconBlock } from '.';
-
-const icons = [
-  { name: 'Current Age', value: '27', icon: faCalendar },
-  { name: 'Countries Visited', value: '20', icon: faGlobe },
-  { name: 'Projects', value: '27', icon: faList },
-  { name: 'Years in industry', value: '4', icon: faUniversity },
-]
-
-const meta = {
-  title: 'Components/Information Icon Block',
-  component: InformationIconBlock,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    title: 'Information Icon Block',
-    description: 'What do you recon to this? Prob needs a refurb right?',
-    icons,
-    bgColour: 'primary',
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof InformationIconBlock>;
-
-export const Default: Story = {};