trepur_components 2.3.7 → 2.3.9

package/archive/Dialog/style.module.css

@@ -1,44 +0,0 @@
-.dialog {
-  @apply rounded-xl bg-white text-ink;
-  @apply mx-auto w-full p-6;
-  max-width: 608px;
-}
-
-@screen md {
-  .dialog {
-    width: 608px;
-  }
-}
-
-.headingWrapper {
-  @apply relative pb-2;
-}
-
-.dismissText {
-  @apply absolute right-0 top-0 cursor-pointer;
-  @apply text-sm font-regular;
-}
-
-.title {
-  @apply text-md font-regular;
-}
-
-.titlePadding {
-  @apply pr-64 md:pr-80;
-}
-
-.paragraph {
-  @apply pt-1 font-light;
-}
-
-.buttonWrapper {
-  @apply flex flex-wrap pt-6 md:flex-nowrap;
-}
-
-.fullWidth {
-  @apply w-full;
-}
-
-.cta2Btn {
-  @apply mt-2 w-full md:ml-6 md:mt-0;
-}

package/archive/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,59 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import DropdownMenu from '.';
-
-const meta = {
-  title: 'Components/Dropdown Menu',
-  component: DropdownMenu,
-  argTypes: {
-    ...idAndClassName,
-    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',
-    },
-
-    menuItems: {
-      description: 'The items to show in the menu',
-      control: 'array',
-      table: {
-        type: { summary: 'array' },
-      },
-    },
-  },
-  args: {
-    backgroundColour: 'white',
-    onClick: action('clicked'),
-    menuItems: [
-      {
-        name: 'Messages',
-        href: '#',
-      },
-      {
-        name: 'Notifications',
-        href: '#',
-      },
-      {
-        name: 'Trips',
-        href: '#',
-      },
-      {
-        name: 'Wishlists',
-        href: '#',
-      },
-    ],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/DropdownMenu/index.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  backgroundColour?: Colours;
-
-  menuItems: Array<{ name: string; href: string }>;
-  onClick?: React.MouseEventHandler;
-}
-
-const DropdownMenu = ({
-  id,
-  className,
-  backgroundColour = 'white',
-  menuItems = [],
-  onClick,
-}: Props): JSX.Element => {
-  const classList = classNames(
-    className,
-    style.classList,
-    style[backgroundColour],
-    'theme-local',
-  );
-
-  if (!menuItems) return <></>;
-
-  return (
-    <div id={id} className={classList}>
-      {menuItems?.map((item, i) => {
-        return (
-          <a
-            key={i}
-            href={item.href}
-            onClick={(e) => onClick?.(e)}
-            className={style.menuItem}
-          >
-            {item.name}
-          </a>
-        );
-      })}
-    </div>
-  );
-};
-
-export default DropdownMenu;

package/archive/DropdownMenu/style.module.css

@@ -1,38 +0,0 @@
-.classList {
-  width: 250px;
-  @apply flex flex-col;
-  @apply mt-2 rounded-2xl py-4 drop-shadow-lg;
-  @apply absolute right-10;
-}
-
-.menuItem {
-  @apply px-4 py-2 text-ink hover:bg-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;
-}

package/archive/DynamicTextSection/DynamicTextSection.stories.tsx

@@ -1,74 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import DynamicTextSection from '.';
-import Icon from '../Icon';
-
-const meta = {
-  title: 'Components/DynamicTextSection',
-  component: DynamicTextSection,
-  argTypes: {
-    ...idAndClassName,
-    children: {
-      description: 'The colour of the component',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    topLine: {
-      description: 'Shows a top line',
-      control: 'boolean',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-      defaultValue: 'false',
-    },
-    bottomLine: {
-      description: 'Shows a bottom line',
-      control: 'boolean',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-      defaultValue: 'false',
-    },
-    middleLine: {
-      description: `Shows a middle line, middle lines exist only at the bottom
-        of each component and should be used only when creating a list of 
-        dynamic text section components`,
-      control: 'boolean',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-      defaultValue: 'false',
-    },
-  },
-  args: {
-    topLine: true,
-    bottomLine: true,
-    middleLine: false,
-    children: [
-      <div key="1" className="flex">
-        <Icon type="heart" hollow bgColour="white" />
-        <p>First Child</p>
-      </div>,
-      <div key="2" className="flex">
-        <Icon type="star" hollow bgColour="white" />
-        <p>Second Child</p>
-      </div>,
-      <div key="3" className="flex">
-        <Icon type="moon" hollow bgColour="white" />
-        <p>Third Child</p>
-      </div>,
-    ],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/DynamicTextSection/index.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-
-import HorizontalLine from '@components/HorizontalLine';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-
-  children: React.ReactNode;
-  topLine?: boolean;
-  bottomLine?: boolean;
-  middleLine?: boolean;
-}
-
-const DynamicTextSection = ({
-  id,
-  className,
-  children,
-  topLine = false,
-  bottomLine = false,
-  middleLine = false,
-}: Props): JSX.Element => {
-  const classList = classNames(className, 'theme-local');
-
-  return (
-    <div id={id} className={classList}>
-      {topLine && <HorizontalLine colour="grey" topLine />}
-      {children}
-      {bottomLine && <HorizontalLine colour="grey" bottomLine />}
-      {middleLine && <HorizontalLine colour="grey" middleLine />}
-    </div>
-  );
-};
-
-export default DynamicTextSection;

package/archive/FileUploader/FileUploader.stories.tsx

@@ -1,28 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import FileUploader from '.';
-
-const meta = {
-  title: 'Components/FileUploader',
-  component: FileUploader,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    ctaText: 'You can select multiple Files',
-    text: 'or drag & drop your files here',
-    imageUrl: 'https://picsum.photos/500/300',
-    onDrop: (files) => {
-      action('files:')(files[0].name);
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/FileUploader/index.tsx

@@ -1,135 +0,0 @@
-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

@@ -1,54 +0,0 @@
-.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

@@ -1,33 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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

@@ -1,27 +0,0 @@
-.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;
-}