trepur_components 2.3.8 → 2.3.10

package/src/components/FileUploader/index.tsx

@@ -1,132 +0,0 @@
-import { useState } from 'react';
-
-import { Image } from '@components/Image';
-import classNames from 'classnames';
-
-import { FilePreview } from './FilePreview';
-
-export interface FileUploaderProps {
-  id?: string;
-  className?: string;
-  ctaText: string;
-  text?: string;
-  imageUrl?: string;
-  onDrop?: ([]) => void;
-}
-
-export const FileUploader = ({
-  id,
-  className,
-  ctaText,
-  text,
-  imageUrl,
-  onDrop,
-}: FileUploaderProps) => {
-  const [inDropZone, setInDropZone] = useState(false);
-  const [fileList, setFileList] = useState<any>([]);
-
-  const classList = classNames(
-    {
-      'bg-lightest-grey': inDropZone,
-    },
-    className,
-    'flex flex-col items-center justify-center rounded-2xl border-4 border-dashed border-light-grey py-8',
-  )
-
-  const handleDragEnter = (e: any): void => {
-    e.preventDefault();
-    e.stopPropagation();
-    setInDropZone(true);
-  }
-
-  const handleDragLeave = (e: any): void => {
-    e.preventDefault();
-    e.stopPropagation();
-    setInDropZone(false);
-  }
-
-  const handleDragOver = (e: any): void => {
-    e.preventDefault();
-    e.stopPropagation();
-    setInDropZone(true);
-  }
-
-  const handleDrop = (e: any): void => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    let files = [...e.dataTransfer.files];
-
-    if (files?.length > 0) {
-      const existingFiles = fileList?.fileList?.map((f: any) => f.name);
-      files = files.filter((f) => !existingFiles?.includes(f.name));
-
-      setFileList(files);
-      setInDropZone(false);
-    }
-    onDrop?.(files);
-  }
-
-  const handleFileSelect = (e: any): void => {
-    let files = [...e.target.files];
-
-    if (files?.length > 0) {
-      const existingFiles = fileList?.fileList?.map((f: any) => f.name);
-      files = files.filter((f) => !existingFiles?.includes(f.name));
-      setFileList(files);
-      onDrop?.(files);
-    }
-  };
-
-  const handleDismiss = (fileName: string): void => {
-    setFileList(fileList.filter((file: any) => file.name !== fileName));
-  }
-
-  return (
-    <div
-      id={id}
-      className={classList}
-      onDragEnter={(e) => {
-        handleDragEnter(e);
-      }}
-      onDragOver={(e) => {
-        handleDragOver(e);
-      }}
-      onDragLeave={(e) => {
-        handleDragLeave(e);
-      }}
-      onDrop={(e) => {
-        handleDrop(e);
-      }}
-    >
-      {imageUrl && (
-        <Image src={imageUrl} altText="upload" height={5} width={5} />
-      )}
-
-      <input
-        id="fileSelect"
-        type="file"
-        multiple
-        className="absolute mb-2 mt-4 inline-block h-px w-px cursor-pointer overflow-hidden whitespace-nowrap border-none p-0 text-center"
-        onChange={(e) => {
-          handleFileSelect(e);
-        }}
-      />
-
-      <label
-        className="mb-2 mt-4 inline-block cursor-pointer text-center"
-        htmlFor="fileSelect"
-      >
-        {ctaText}
-      </label>
-
-      <h3 className="mt-8">{text}</h3>
-      <FilePreview
-        fileData={fileList}
-        onDismiss={(e: any) => {
-          handleDismiss(e);
-        }}
-      />
-    </div>
-  );
-}

package/src/components/FilterItem/FilterItem.stories.tsx

@@ -1,33 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { FilterItem } from '.';
-
-const meta = {
-  title: 'Components/FilterItem',
-  component: FilterItem,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-
-    title: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    }
-  },
-  args: {
-    title: 'This is a title',
-    filters: ['filter 1', 'filter 2', 'filter 3', 'filter 4', 'filter 5'],
-    onClick: action('clicked'),
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof FilterItem>;
-
-export const Default: Story = {};

package/src/components/FilterItem/index.tsx

@@ -1,97 +0,0 @@
-import { useState, useEffect } from 'react';
-
-import { Checkbox } from '@components/Checkbox';
-import { Icon } from '@components/Icon';
-import {
-  faChevronDown,
-  faChevronUp,
-} from '@fortawesome/fontawesome-free-solid';
-import { type IconProp } from '@fortawesome/fontawesome-svg-core';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  filters?: string[];
-  onClick?: () => void;
-}
-
-export const FilterItem = ({
-  id,
-  className,
-  title,
-  filters,
-  onClick,
-}: Props) => {
-  const [expanded, setExpanded] = useState(false);
-
-  useEffect(() => {
-    const coll = document.getElementsByClassName('FilterItem');
-    let i: number;
-
-    for (i = 0; i < coll.length; i++) {
-      coll[i]?.addEventListener('click', function (this: any, err: any) {
-        const content = this.nextElementSibling;
-
-        const scrollHeight: string = content.scrollHeight.toString();
-        if (content.style.maxHeight === '0px') {
-          content.style.maxHeight = `${scrollHeight}px`;
-        } else {
-          content.style.maxHeight = '0px';
-        }
-      });
-    }
-  });
-
-  const classList = classNames(className, 'duration-300 transition-opactiy');
-
-  const contentWrapperClassList = classNames(
-    {
-      'my-2 max-h-max': expanded,
-      'max-h-0': !expanded,
-    },
-    'w-auto overflow-hidden px-4',
-  )
-
-  const expandItem = (e: any): void => {
-    const content = e.currentTarget.nextElementSibling;
-    const scrollHeight: string = content.scrollHeight.toString();
-    if (!expanded) {
-      content.style.maxHeight = `${scrollHeight}px`;
-    } else {
-      content.style.maxHeight = '0px';
-    }
-    setExpanded(!expanded);
-  }
-
-  return (
-    <div id={id} className={classList}>
-      <div
-        onClick={(e) => {
-          expandItem(e);
-        }}
-        className="flex w-full justify-between border-b px-6 py-3"
-      >
-        <h4>{title}</h4>
-        <Icon
-          icon={
-            expanded ? (faChevronUp as IconProp) : (faChevronDown as IconProp)
-          }
-          colour="black"
-        />
-      </div>
-      <div className={contentWrapperClassList}>
-        <ul>
-          {filters?.map((filter, i) => {
-            return (
-              <li className="py-1" key={`filter_${i}`}>
-                <Checkbox label={filter} onClick={onClick} />
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-    </div>
-  );
-}

package/src/components/Footer/Footer.stories.tsx

@@ -1,59 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Footer } from '.';
-
-const meta = {
-  title: 'Components/Footer',
-  component: Footer,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    text: {
-      type: { name: 'string', required: false },
-      description: 'The text to show on the component',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    buttonProps: {
-      type: { name: 'other', value: 'object' },
-      description:
-        'The props to pass to the button to display on the component',
-      table: {
-        type: {
-          summary: 'object',
-        },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    variant: {
-      type: { name: 'string', required: false },
-      options: ['dark', 'light'],
-      description: 'The variant of button to render',
-      table: {
-        type: { summary: 'light' },
-        defaultValue: { summary: 'light' },
-      },
-      defaultValue: 'light',
-      control: { type: 'radio' },
-    }
-  },
-  args: {
-    text: 'Copyright All rights reserved',
-    variant: 'dark',
-    buttonProps: {
-      children: 'Admin Panel',
-      onClick: action('button clicked'),
-      href: '/',
-      target: '_blank',
-    }
-  }
-};
-export default meta;
-
-type Story = StoryObj<typeof Footer>;
-
-export const Default: Story = {};

package/src/components/Footer/index.tsx

@@ -1,48 +0,0 @@
-import { Button, type Props as buttonProps } from '@components/Button';
-import { Container } from '@components/Container';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  buttonProps?: buttonProps;
-  text?: string;
-  variant?: 'light' | 'dark';
-}
-
-export const Footer = ({
-  id,
-  className,
-  text,
-  buttonProps,
-  variant,
-}: Props) => {
-  const colours =
-    variant === 'dark' ? 'bg-primary text-white' : 'bg-white text-primary';
-  const classList = classNames(className, colours);
-
-  return (
-    <div id={id} className={classList}>
-      <Container
-        withPadding
-        className="block h-auto flex-wrap items-center justify-between md:flex"
-      >
-        <p className="pb-4 pt-8 text-center md:my-8 md:pb-0 md:pt-0">{text}</p>
-        <div className="pb-8 pt-4 text-center md:pb-0 md:pt-0">
-          {buttonProps?.children !== undefined &&
-            (buttonProps?.href !== undefined ||
-              buttonProps?.onClick !== undefined) && (
-              <Button
-                variant={variant === 'dark' ? 'primary' : 'secondary'}
-                rounded
-                href={buttonProps?.href}
-                onClick={buttonProps?.onClick}
-              >
-                {buttonProps?.children}
-              </Button>
-            )}
-        </div>
-      </Container>
-    </div>
-  );
-}

package/src/components/FooterNav/FooterNav.stories.tsx

@@ -1,122 +0,0 @@
-import {
-  faHeart,
-  faMoon,
-  faSnowflake,
-  faStar,
-  faSun,
-} from '@fortawesome/fontawesome-free-solid';
-import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { FooterNav } from '.';
-
-const meta = {
-  title: 'Components/Footer Nav',
-  component: FooterNav,
-  argTypes: {
-    ...idAndClassName,
-    title: {
-      type: { name: 'string', required: true },
-      description: 'The title to display on the component',
-      table: {
-        type: { summary: 'string' },
-      }
-    },
-    subtitle: {
-      type: { name: 'string', value: 'string | number' },
-      description: 'The subtitle to display on the component',
-      table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    withAnimation: {
-      type: { name: 'boolean', required: false },
-      description: 'Enabled the counter animation on the component',
-      table: {
-        type: { summary: 'boolean' },
-      },
-      defaultValue: 'false',
-    },
-    withHoverEffect: {
-      type: { name: 'boolean', required: false },
-      description: 'Enabled the hover effect on the component',
-      table: {
-        type: { summary: 'boolean' },
-      },
-      defaultValue: 'true',
-    },
-    iconProps: {
-      type: { name: 'iconProps', required: false },
-      description: 'The props to pass to the icon to display on the component',
-      table: {
-        type: { summary: 'iconProps' },
-      }
-    },
-
-    large: {
-      description: 'Defines the top and bottom padding size',
-      control: 'boolean',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'true' },
-      },
-      defaultValue: 'true',
-    }
-  },
-  args: {
-    backgroundColour: 'white',
-    colour: 'grey',
-    hoverColour: 'primary',
-    footerItems: [
-      {
-        title: 'wishlists',
-        href: '#',
-        iconProps: {
-          icon: faHeart,
-        },
-        onClick: action('clicked wishlist'),
-      },
-      {
-        title: 'Profile',
-        href: '#',
-        iconProps: {
-          icon: faStar,
-        },
-        onClick: action('clicked profile'),
-      },
-      {
-        title: 'sun',
-        href: '#',
-        iconProps: {
-          icon: faSun,
-        },
-        onClick: action('clicked sun'),
-      },
-      {
-        title: 'moon',
-        href: '#',
-        iconProps: {
-          icon: faMoon,
-        },
-        onClick: action('clicked moon'),
-      },
-      {
-        title: 'snowflake',
-        href: '#',
-        iconProps: {
-          icon: faSnowflake,
-        },
-        onClick: action('clicked snowflake'),
-      }
-    ]
-  },
-}
-export default meta;
-
-type Story = StoryObj<typeof FooterNav>;
-
-export const Default: Story = {};

package/src/components/FooterNav/index.tsx

@@ -1,49 +0,0 @@
-import {
-  FooterNavItem,
-  type FooterNavItemProps,
-} from '@components/FooterNavItem';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface Props {
-  id: string;
-  className?: string;
-  backgroundColour?: Colours;
-  colour?: Colours;
-  hoverColour?: Colours;
-  hoverBgColour?: Colours;
-  footerItems: FooterNavItemProps[];
-}
-
-export const FooterNav = ({
-  id,
-  className,
-  backgroundColour = 'white',
-  colour = 'black',
-  hoverColour = 'black',
-  hoverBgColour = 'black',
-  footerItems,
-}: Props) => {
-  const classList = classNames(
-    className,
-    'fixed bottom-0 flex w-full justify-between px-4 border-t border-lightest-grey',
-  )
-
-  return (
-    <div id={id} className={classList}>
-      {footerItems?.map((footerItem: any, i) => {
-        footerItem.iconProps.colour = colour;
-        footerItem.iconProps.hoverColour = hoverColour;
-        footerItem.iconProps.hoverBgColour = hoverBgColour;
-        footerItem.iconProps.size = 2;
-        return (
-          <FooterNavItem
-            key={i}
-            {...footerItem}
-            backgroundColour={backgroundColour}
-          />
-        );
-      })}
-    </div>
-  );
-}

package/src/components/FooterNavItem/FooterNavItem.stories.tsx

@@ -1,53 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { FooterNavItem } from '.';
-
-const meta = {
-  title: 'Components/Footer Nav Item',
-  component: FooterNavItem,
-  argTypes: {
-    ...idAndClassName,
-
-    title: {
-      type: { name: 'string', required: true },
-      description: 'The title to display on the component',
-      table: {
-        type: { summary: 'string' },
-      }
-    },
-    iconProps: {
-      type: { name: 'iconProps', required: false },
-      description: 'The props to pass to the icon to display on the component',
-      table: {
-        type: { summary: 'iconProps' },
-      }
-    },
-    backgroundColour: {
-      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: 'Wishlist',
-    href: '#',
-    iconProps: {
-      type: 'heart',
-      size: 2,
-      hollow: true,
-    },
-    onClick: action('clicked'),
-  }
-}
-export default meta;
-
-type Story = StoryObj<typeof FooterNavItem>;
-
-export const Default: Story = {};

package/src/components/FooterNavItem/index.tsx

@@ -1,58 +0,0 @@
-import { Icon, type IconProps } from '@components/Icon';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface FooterNavItemProps {
-  id: string;
-  className?: string;
-  title?: string;
-  iconProps?: IconProps;
-  bgColour?: Colours;
-  hoverBgColour?: Colours;
-  colour?: Colours;
-  hoverColour?: Colours;
-  onClick?: () => void;
-  href: string;
-}
-
-export const FooterNavItem = ({
-  id,
-  className,
-  title,
-  iconProps,
-  bgColour = 'white',
-  hoverBgColour = 'secondary',
-  colour = 'grey',
-  hoverColour = 'white',
-  onClick,
-  href,
-}: FooterNavItemProps) => {
-  const formattedText =
-    typeof colour === 'string' ? `text_${colour}` : 'text_primary';
-  const formattedBg =
-    typeof bgColour === 'string' ? `bg_${bgColour}` : 'bg_secondary';
-  const formattedHoverText =
-    typeof hoverColour === 'string'
-      ? `hover_text_${hoverColour}`
-      : 'hover_text_secondary';
-  const formattedHoverBg =
-    typeof hoverBgColour === 'string'
-      ? `hover_bg_${hoverBgColour}`
-      : 'hover_bg_primary';
-
-  const classList = classNames(
-    className,
-    'group w-full cursor-pointer py-2 text-center transition-all duration-500',
-  )
-
-  return (
-    <div id={id} className={classList}>
-      <a href={href} onClick={onClick}>
-        {iconProps !== undefined && <Icon {...iconProps} colour={colour} />}
-        {title !== undefined && title !== '' && (
-          <p className="pt-0.5 text-xs font-regular">{title}</p>
-        )}
-      </a>
-    </div>
-  );
-}