trepur_components 2.3.3 → 2.3.4

package/archive/FileUploader/index.tsx

@@ -0,0 +1,135 @@
+import React, { useState } from 'react';
+
+import Image from '@components/Image';
+import classNames from 'classnames';
+
+import FilePreview from './FilePreview';
+
+
+interface Props {
+  id?: string;
+  className?: string;
+  ctaText: string;
+  text?: string;
+
+  imageUrl?: string;
+  onDrop?: ([]) => void;
+}
+
+const FileUploader: React.FC<Props> = ({
+  id,
+  className,
+  ctaText,
+  text,
+
+  imageUrl,
+  onDrop,
+}) => {
+  const [inDropZone, setInDropZone] = useState(false);
+  const [fileList, setFileList] = useState<any>([]);
+
+  const classList = classNames(
+    {
+      [style.inDropZone]: inDropZone,
+    },
+    className,
+    style.dropzone,
+    'theme-local',
+  );
+
+  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={style.files}
+        onChange={(e) => {
+          handleFileSelect(e);
+        }}
+      />
+
+      <label className={style.label} htmlFor="fileSelect">
+        {ctaText}
+      </label>
+
+      <h3 className={style.uploadMessage}>{text}</h3>
+      <FilePreview
+        fileData={fileList}
+        onDismiss={(e) => {
+          handleDismiss(e);
+        }}
+      />
+    </div>
+  );
+};
+
+export default FileUploader;

package/archive/FileUploader/style.module.css

@@ -0,0 +1,54 @@
+.dropzone {
+  @apply flex flex-col items-center justify-center;
+  @apply rounded-2xl border-4 border-dashed border-light-grey py-8;
+}
+
+.active {
+  @apply border-4 border-dashed;
+}
+
+.uploadMessage h3 {
+  @apply mt-8;
+}
+
+.files {
+  @apply absolute h-px w-px overflow-hidden border-none p-0;
+  @apply whitespace-nowrap;
+}
+
+.files + label {
+  @apply mb-2 mt-4 inline-block cursor-pointer text-center;
+}
+
+.label {
+  @apply rounded-2xl border-2 border-primary bg-primary px-4 py-1 text-white;
+  @apply hover:bg-white hover:text-primary;
+}
+
+.uploadBtn {
+  @apply m-2 w-auto cursor-pointer rounded-2xl text-center;
+}
+
+.fileList {
+  @apply flex w-full flex-wrap px-8 pt-4;
+}
+
+.file {
+  @apply mx-2 rounded-2xl border bg-secondary text-white;
+  @apply cursor-pointer hover:bg-primary;
+}
+
+.nameWrapper {
+  @apply flex w-full justify-between px-4 py-1;
+}
+
+.name {
+}
+
+.dismiss {
+  @apply ml-2 cursor-pointer;
+}
+
+.inDropZone {
+  @apply bg-lightest-grey;
+}

package/archive/FilterItem/FilterItem.stories.tsx

@@ -0,0 +1,33 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, 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 meta>;
+
+export const Default: Story = {};

package/archive/FilterItem/index.tsx

@@ -0,0 +1,101 @@
+import React, { useState, useEffect } from 'react';
+
+import Checkbox from '@components/Checkbox';
+import Icon from '@components/Icon';
+import classNames from 'classnames';
+
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  title?: string;
+  filters?: string[];
+  onClick?: () => void;
+}
+
+const FilterItem = ({
+  id,
+  className,
+  title,
+  filters,
+  onClick,
+}: Props): JSX.Element => {
+  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,
+    style.classList,
+    'transition-opactiy theme-local',
+  );
+
+  const contentWrapperClassList = classNames(
+    {
+      [style.expanded]: expanded,
+      [style.collapsed]: !expanded,
+    },
+    style.contentWrapperClassList,
+  );
+
+  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={style.headingClassList}
+      >
+        <h4>{title}</h4>
+        <Icon
+          type={expanded ? 'chevron-up' : 'chevron-down'}
+          colour="black"
+          bgColour="white"
+          hoverColour="black"
+          hoverBgColour="white"
+        />
+      </div>
+      <div className={contentWrapperClassList}>
+        <ul>
+          {filters?.map((filter, i) => {
+            return (
+              <li className={style.li} key={`filter_${i}`}>
+                <Checkbox label={filter} onClick={onClick} />
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default FilterItem;

package/archive/FilterItem/style.module.css

@@ -0,0 +1,27 @@
+.classList {
+  @apply duration-300;
+}
+
+.headingClassList {
+  @apply flex w-full justify-between border-b px-6 py-3;
+}
+
+.contentWrapperClassList {
+  @apply w-auto overflow-hidden px-4;
+}
+
+.childrenClassList {
+  @apply w-full pr-8 text-right;
+}
+
+.expanded {
+  @apply my-2 max-h-max;
+}
+
+.collapsed {
+  @apply max-h-0;
+}
+
+.li {
+  @apply py-1;
+}

package/archive/Footer/Footer.stories.tsx

@@ -0,0 +1,59 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, 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 meta>;
+
+export const Default: Story = {};

package/archive/Footer/index.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+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';
+}
+
+const Footer = ({
+  id,
+  className,
+  text,
+  buttonProps,
+  variant,
+}: Props): JSX.Element => {
+  const colours = variant === 'dark' ? [style.dark] : [style.light];
+  const classList = classNames(className, colours, 'theme-local');
+
+  return (
+    <div id={id} className={classList}>
+      <Container withPadding className={style.classList}>
+        <p className={style.textClassList}>{text}</p>
+        <div className={style.buttonClassList}>
+          {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>
+  );
+};
+
+export default Footer;

package/archive/Footer/style.module.css

@@ -0,0 +1,19 @@
+.classList {
+  @apply block h-auto flex-wrap items-center justify-between md:flex;
+}
+
+.textClassList {
+  @apply pb-4 pt-8 text-center md:my-8 md:pb-0 md:pt-0;
+}
+
+.buttonClassList {
+  @apply pb-8 pt-4 text-center md:pb-0 md:pt-0;
+}
+
+.dark {
+  @apply bg-primary text-white;
+}
+
+.light {
+  @apply bg-white text-primary;
+}

package/archive/FooterNav/FooterNav.stories.tsx

@@ -0,0 +1,125 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, 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: {
+          type: 'heart',
+          size: 2,
+          hollow: true,
+        },
+        onClick: action('clicked wishlist'),
+      },
+      {
+        title: 'Profile',
+        href: '#',
+        iconProps: {
+          type: 'star',
+          size: 2,
+          hollow: true,
+        },
+        onClick: action('clicked profile'),
+      },
+      {
+        title: 'sun',
+        href: '#',
+        iconProps: {
+          type: 'sun',
+          size: 2,
+          hollow: true,
+        },
+        onClick: action('clicked sun'),
+      },
+      {
+        title: 'moon',
+        href: '#',
+        iconProps: {
+          type: 'moon',
+          size: 2,
+          hollow: true,
+        },
+        onClick: action('clicked moon'),
+      },
+      {
+        title: 'snowflake',
+        href: '#',
+        iconProps: {
+          type: 'snowflake',
+          size: 2,
+          hollow: true,
+        },
+        onClick: action('clicked snowflake'),
+      },
+    ],
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/FooterNav/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import FooterNavItem, {
+  type Props as 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[];
+}
+
+const FooterNav = ({
+  id,
+  className,
+  backgroundColour = 'white',
+  colour = 'black',
+  hoverColour = 'black',
+  hoverBgColour = 'black',
+  footerItems,
+}: Props): JSX.Element => {
+  const classList = classNames(
+    className,
+    style.classList,
+    style[backgroundColour],
+    'theme-local',
+  );
+
+  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>
+  );
+};
+
+export default FooterNav;

package/archive/FooterNav/style.module.css

@@ -0,0 +1,32 @@
+.classList {
+  @apply fixed bottom-0 flex w-full justify-between px-4;
+  @apply border-t border-lightest-grey;
+}
+
+.primary {
+  @apply bg-primary text-white;
+}
+.secondary {
+  @apply bg-secondary text-white;
+}
+.white {
+  @apply bg-white text-black;
+}
+.grey {
+  @apply bg-lightest-grey text-black;
+}
+.black {
+  @apply bg-black text-white;
+}
+.success {
+  @apply bg-success text-white;
+}
+.error {
+  @apply bg-error text-white;
+}
+.facebook {
+  @apply bg-facebook text-white;
+}
+.gold {
+  @apply bg-gold text-white;
+}