trepur_components 2.3.8 → 2.3.9

package/src/components/Container/index.tsx

@@ -1,21 +0,0 @@
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  withPadding?: boolean;
-  children?: any;
-}
-
-export const Container = ({ id, className, children }: Props) => {
-  const classList = classNames(
-    className,
-    'max-w-[2520px] px-6 md:px-10 lg:px-20',
-  )
-
-  return (
-    <div id={id} className={classList}>
-      {children}
-    </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/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/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>
-  );
-}

package/src/components/FyreCard/FyreCard.stories.tsx

@@ -1,31 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { FyreCard } from '.';
-
-const meta = {
-  title: 'Components/Fyre Card',
-  component: FyreCard,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    image: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    }
-  },
-  args: {
-    image: 'https://picsum.photos/500/300',
-    buttonProps: {
-      children: 'Shop Now',
-    }
-  }
-};
-export default meta;
-
-type Story = StoryObj<typeof FyreCard>;
-
-export const Default: Story = {};

package/src/components/FyreCard/index.tsx

@@ -1,44 +0,0 @@
-import { Button, type Props as buttonProps } from '@components/Button';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  image?: string;
-  imageClass?: string;
-  altText?: string;
-  bordered?: string;
-  buttonProps?: buttonProps;
-}
-
-export const FyreCard = ({
-  id,
-  className,
-  image,
-  imageClass,
-  altText,
-  bordered,
-  buttonProps,
-}: Props) => {
-  const classList = classNames(
-    {
-      'border border-grey border-opacity-100': bordered,
-    },
-    className,
-    'flex flex-col',
-  )
-  const imageClassList = classNames(imageClass, 'w-full');
-
-  return (
-    <div key={id} id={id} className={classList}>
-      <div className={classNames('flex flex-1 flex-col', 'card-content')}>
-        <div>
-          <img className={imageClassList} src={image} alt={altText} />
-        </div>
-        <div className="flex justify-end">
-          <Button {...buttonProps}>{buttonProps?.children}</Button>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/HorizontalLine/HorizontalLine.stories.tsx

@@ -1,54 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { HorizontalLine } from '.';
-
-const meta = {
-  title: 'Components/HorizontalLine',
-  component: HorizontalLine,
-  argTypes: {
-    ...idAndClassName,
-
-    colour: {
-      description: 'The colour of the component',
-      control: 'select',
-      table: {
-        type: { summary: 'select' },
-        defaultValue: { summary: 'primary' },
-      },
-      defaultValue: 'primary',
-    },
-    topLine: {
-      description: 'Adds margin underneath the component',
-      control: 'boolean',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-      defaultValue: 'false',
-    },
-    bottomLine: {
-      description: 'Adds margin above the component',
-      control: 'boolean',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-      defaultValue: 'false',
-    },
-    middleLine: {
-      description: 'Adds margin above and below the component',
-      control: 'boolean',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-      defaultValue: 'false',
-    }
-  }
-};
-export default meta;
-
-type Story = StoryObj<typeof HorizontalLine>;
-
-export const Default: Story = {};

package/src/components/HorizontalLine/index.tsx

@@ -1,32 +0,0 @@
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  colour?: Colours;
-  topLine?: boolean;
-  bottomLine?: boolean;
-  middleLine?: boolean;
-}
-
-export const HorizontalLine = ({
-  id,
-  className,
-  colour = 'primary',
-  topLine = false,
-  bottomLine = false,
-  middleLine = false,
-}: Props) => {
-  const classList = classNames(
-    {
-      'mb-6': topLine,
-      'mt-6': bottomLine,
-      'my-6': middleLine,
-    },
-    className,
-    'my-0 h-0.5 border-none py-0',
-  )
-
-  return <hr id={id} className={classList} />;
-}

package/src/components/IconCard/IconCard.stories.tsx

@@ -1,26 +0,0 @@
-import { faHeading } from '@fortawesome/fontawesome-free-solid';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { IconCard } from '.';
-
-const meta = {
-  title: 'Components/IconCard',
-  component: IconCard,
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    title: 'This is a title',
-    description:
-      'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga excepturi itaque in. Debitis et velit explicabo id quo repellendus architecto hic quis repellat corporis cumque dolorem officiis animi, dicta praesentium.',
-    iconProps: {
-      icon: faHeading,
-    }
-  }
-};
-export default meta;
-
-type Story = StoryObj<typeof IconCard>;
-
-export const Default: Story = {};