trepur_components 2.3.8 → 2.3.10

package/src/components/DetailUpdater/index.tsx

@@ -1,108 +0,0 @@
-import React, { useState } from 'react';
-
-import { Button } from '@components/Button';
-import 'keen-slider/keen-slider.min.css';
-
-export interface DetailUpdatesProps {
-  id?: string;
-  className?: string;
-  title: string;
-  description?: string;
-  expandText: string;
-  collapseText: string;
-  ctaText: string;
-  onClick?: (fieldValues: any) => void;
-  onChange?: (fieldValues: any) => void;
-  children: React.ReactNode;
-  onSubmit?: () => void;
-  onCancel?: () => void;
-  value?: string;
-}
-
-export const DetailUpdater = ({
-  id,
-  className,
-  title,
-  description,
-  expandText,
-  collapseText,
-  ctaText,
-  onClick,
-  onChange,
-  children,
-  onSubmit,
-  onCancel,
-  value,
-}: DetailUpdatesProps) => {
-  const [expanded, setExpanded] = useState(false);
-  const classList = className;
-
-  const handleSubmit = (): void => {
-    onSubmit?.();
-    setExpanded(false);
-  }
-  // const handleChange = (e: any): void => {
-  //   const value = e.target.value
-  //   const id = e.target.id
-
-  //   const newFieldValues = fieldValues.map((fieldValue) => {
-  //     return fieldValue.id !== id.split('-')[1]
-  //       ? fieldValue
-  //       : { ...fieldValue, value }
-  //   })
-
-  //   onChange?.(newFieldValues)
-
-  //   setFieldValues(newFieldValues)
-  // }
-
-  // const handleSubmit = (): void => {
-  //   onClick?.(fieldValues)
-  //   setState(false)
-  // }
-
-  return (
-    <div id={id} className={classList}>
-      {!expanded && (
-        <div className="mx-4 py-6">
-          <div className="flex justify-between">
-            <p className="font-semiBold text-ink">{title}</p>
-            <p
-              className="cursor-pointer font-semiBold text-ink underline"
-              onClick={() => {
-                setExpanded(true);
-              }}
-            >
-              {expandText}
-            </p>
-          </div>
-          <p className="text-ink">{value !== undefined ? value : '-'}</p>
-        </div>
-      )}
-      {expanded && (
-        <div className="mx-4 py-6">
-          <div className="flex justify-between">
-            <p className="font-semiBold text-ink">{title}</p>
-            <p
-              className="cursor-pointer font-semiBold text-ink underline"
-              onClick={() => {
-                onCancel?.();
-                setExpanded(false);
-              }}
-            >
-              {collapseText}
-            </p>
-          </div>
-          <p className="text-light-grey">{description}</p>
-          <div className="grid w-full grid-cols-1 gap-0 py-4 md:grid-cols-2 md:gap-4 lg:w-2/3">
-            {children}
-          </div>
-          <Button variant="secondary" onClick={handleSubmit}>
-            {ctaText}
-          </Button>
-        </div>
-      )}
-      <hr className="text-lightest-grey shadow" />
-    </div>
-  );
-}

package/src/components/Dialog/Dialog.stories.tsx

@@ -1,130 +0,0 @@
-import React, { useState } from 'react';
-
-import { action } from '@storybook/addon-actions';
-
-import { Dialog } from '.';
-import { Button } from '../Button';
-import { Modal } from '../Modal';
-
-const meta = {
-  title: 'Components/Dialog',
-  component: Dialog,
-  parameters: {
-    docs: {
-      description: {
-        component: 'A dialog component',
-      }
-    },
-    layout: 'padded',
-  },
-  argTypes: {
-    id: {
-      type: { name: 'string', required: false },
-      description: 'HTML id attribute',
-      table: { type: { summary: 'string' } },
-    },
-    className: {
-      type: { name: 'string', required: false },
-      description: 'Additional classes to be appended to the component',
-      table: { type: { summary: 'string' } },
-    },
-    onDismissClick: {
-      type: { name: 'function', required: false },
-      description:
-        'Used to determine the onClick action when the dismiss cta is pressed',
-      action: 'onClick',
-      table: {
-        type: { summary: 'function' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    title: {
-      type: { name: 'string', required: false },
-      description: 'Used to specify the title to display on the component',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    paragraph: {
-      type: { name: 'string', required: false },
-      description:
-        'Used to the specify paragraph text to display on the component',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    dismissText: {
-      type: { name: 'string', required: false },
-      description: 'Used to specify dismiss text to display on the component',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    primaryCta: {
-      type: { name: 'other', value: 'ButtonProps', required: false },
-      description: 'A collection of props to pass to the button component',
-      table: { type: { summary: 'ButtonProps' } },
-    },
-    secondaryCta: {
-      type: { name: 'other', value: 'ButtonProps', required: false },
-      description:
-        'A collection of props to pass to the second button component',
-      table: { type: { summary: 'ButtonProps' } },
-    }
-  },
-  args: {
-    title: 'This is a title',
-    paragraph:
-      'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente itaque repellendus, ab rerum explicabo ducimus culpa incidunt consequatur, corporis, sequi dolor in praesentium ea maxime perferendis autem aliquam impedit. Debitis.',
-    dismissText: 'Close',
-    imageUrl: 'https://picsum.photos/500/300',
-    onDismissClick: action('dismissed'),
-    primaryCta: {
-      children: 'Add bank details',
-      palette: 'secondary',
-    },
-    secondaryCta: {
-      children: 'Add bank details',
-      variant: 'secondary',
-      palette: 'secondary',
-    }
-  }
-};
-
-const Template = (args: any): React.ReactElement => {
-  const [visible, setVisible] = useState<boolean>(false);
-
-  return (
-    <div style={{ height: '350vh' }}>
-      <Button
-        onClick={() => {
-          setVisible(true);
-        }}
-      >
-        Click Me!
-      </Button>
-      <Modal
-        visible={visible}
-        mobileGutter
-        onOverlayClick={() => {
-          setVisible(false);
-        }}
-      >
-        <Dialog
-          {...args}
-          onDismissClick={() => {
-            action('dismiss click');
-            setVisible(!visible);
-          }}
-        />
-      </Modal>
-    </div>
-  );
-}
-
-export const _Dialog = Template.bind({});
-
-export default meta;

package/src/components/Dialog/index.tsx

@@ -1,93 +0,0 @@
-import { Button, type Props as ButtonProps } from '@components/Button';
-import { Image } from '@components/Image';
-import classNames from 'classnames';
-
-export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
-  title: string;
-  paragraph: string;
-  dismissText: string;
-  onDismissClick?: () => void;
-  primaryCta?: ButtonProps;
-  secondaryCta?: ButtonProps;
-  imageUrl?: string;
-}
-
-export const Dialog = ({
-  id,
-  className,
-  title,
-  paragraph,
-  dismissText,
-  onDismissClick,
-  primaryCta,
-  secondaryCta,
-  imageUrl,
-}: Props) => {
-  const hasCta = Boolean(primaryCta?.children);
-  const hasCta2 = Boolean(secondaryCta?.children);
-
-  const ctaButton = hasCta && (
-    <Button
-      {...primaryCta}
-      className={classNames(
-        {
-          'w-full': hasCta2,
-        },
-        primaryCta?.className,
-        'mt-2 w-full md:ml-6 md:mt-0',
-      )}
-    />
-  );
-
-  const ctaButton2 = hasCta2 && (
-    <Button
-      {...secondaryCta}
-      className={classNames(
-        {
-          'w-full': hasCta,
-        },
-        secondaryCta?.className,
-        'mt-2 w-full md:ml-6 md:mt-0',
-      )}
-    />
-  );
-
-  const buttonWrapperClassList = classNames(
-    {
-      'w-full': ctaButton2,
-    },
-    'flex flex-wrap pt-6 md:flex-nowrap',
-  )
-
-  const titleClassList = classNames({}, 'text-md font-regular');
-
-  return (
-    <div
-      id={id}
-      className={classNames(
-        className,
-        'mx-auto w-full rounded-xl bg-white p-6 text-ink md:w-[608px]',
-      )}
-    >
-      <div className="relative pb-2">
-        {imageUrl !== undefined && (
-          <Image src={imageUrl} height={3} width={3} />
-        )}
-        <p
-          className="absolute right-0 top-0 cursor-pointer text-sm font-regular"
-          onClick={onDismissClick}
-        >
-          {dismissText}
-        </p>
-      </div>
-      <p className={titleClassList}>{title}</p>
-      <p className="pt-1 font-light">{paragraph}</p>
-      {(hasCta || hasCta2) && (
-        <div className={buttonWrapperClassList}>
-          {ctaButton}
-          {ctaButton2}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/DropdownMenu/DropdownMenu.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 { 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 DropdownMenu>;
-
-export const Default: Story = {};

package/src/components/DropdownMenu/index.tsx

@@ -1,45 +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;
-}
-
-export const DropdownMenu = ({
-  id,
-  className,
-  backgroundColour = 'white',
-  menuItems = [],
-  onClick,
-}: Props) => {
-  const classList = classNames(
-    className,
-    'w-[250px] flex flex-col mt-2 rounded-2xl py-4 drop-shadow-lg absolute right-10',
-  )
-
-  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="px-4 py-2 text-ink hover:bg-lightest-grey"
-          >
-            {item.name}
-          </a>
-        );
-      })}
-    </div>
-  );
-}

package/src/components/DynamicTextSection/DynamicTextSection.stories.tsx

@@ -1,76 +0,0 @@
-import { faHeart } from '@fortawesome/fontawesome-free-solid';
-import { type IconProp } from '@fortawesome/fontawesome-svg-core';
-import { Meta, type 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 icon={faHeart as IconProp} />
-        <p>First Child</p>
-      </div>,
-      <div key="2" className="flex">
-        <Icon icon={faHeart as IconProp} />
-        <p>Second Child</p>
-      </div>,
-      <div key="3" className="flex">
-        <Icon icon={faHeart as IconProp} />
-        <p>Third Child</p>
-      </div>,
-    ]
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof DynamicTextSection>;
-
-export const Default: Story = {};

package/src/components/DynamicTextSection/index.tsx

@@ -1,32 +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;
-}
-
-export const DynamicTextSection = ({
-  id,
-  className,
-  children,
-  topLine = false,
-  bottomLine = false,
-  middleLine = false,
-}: Props) => {
-  return (
-    <div id={id} className={className}>
-      {topLine && <HorizontalLine colour="grey" topLine />}
-      {children}
-      {bottomLine && <HorizontalLine colour="grey" bottomLine />}
-      {middleLine && <HorizontalLine colour="grey" middleLine />}
-    </div>
-  );
-}

package/src/components/FileUploader/FilePreview.tsx

@@ -1,45 +0,0 @@
-import classNames from 'classnames';
-
-interface FilePreviewProps {
-  id?: string;
-  className?: string;
-  fileData?: any;
-  onDismiss?: (e: any) => void;
-}
-
-export const FilePreview = ({
-  id,
-  className,
-  fileData,
-  onDismiss,
-}: FilePreviewProps) => {
-  const handleDismiss = (fileName: string): void => {
-    onDismiss?.(fileName);
-  }
-
-  return (
-    <ul
-      id={id}
-      className={classNames(className, 'flex w-full flex-wrap px-8 pt-4')}
-    >
-      {fileData?.map((file: any) => {
-        return (
-          <li
-            key={file.lastModified}
-            className="mx-2 cursor-pointer rounded-2xl border bg-secondary text-white hover:bg-primary"
-          >
-            <div
-              className="flex w-full justify-between px-4 py-1"
-              onClick={() => {
-                handleDismiss(file.name);
-              }}
-            >
-              <p>{file.name}</p>
-              <p className="ml-2 cursor-pointer">x</p>
-            </div>
-          </li>
-        );
-      })}
-    </ul>
-  );
-}

package/src/components/FileUploader/FileUploader.stories.tsx

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