trepur_components 2.3.8 → 2.3.10

package/src/components/Proficiencies/Proficiencies.stories.tsx

@@ -1,50 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Proficiencies } from '.';
-
-const meta = {
-  title: 'Components/Proficiencies',
-  component: Proficiencies,
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    title: 'Proficiencies',
-    proficiencies: [
-      { src: 'https://picsum.photos/200/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/201', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/202', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/203', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/204', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/205', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/206', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/207', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/208', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/200/209', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/202/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/203/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/204/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/205/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/206/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/207/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/208/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/209/200', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/201', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/202', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/203', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/204', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/205', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/205', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/206', overlayText: 'Logo' },
-      { src: 'https://picsum.photos/201/207', overlayText: 'Logo' },
-    ]
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Proficiencies>;
-
-export const Default: Story = {};

package/src/components/Proficiencies/index.tsx

@@ -1,51 +0,0 @@
-import { Column } from '@components/Column';
-import { ComponentWrapper } from '@components/ComponentWrapper';
-import { Image, type Props as imageProps } from '@components/Image';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  description?: string;
-  proficiencies: imageProps[];
-  bgColour: Colours;
-}
-
-export const Proficiencies = ({
-  id,
-  className,
-  title,
-  description,
-  proficiencies,
-  bgColour,
-}: Props) => {
-  const classList = classNames(className, 'mx-auto w-full');
-
-  return (
-    <ComponentWrapper
-      id={id}
-      className={classList}
-      title={title}
-      description={description}
-      bgColour={bgColour}
-    >
-      <div className="flex flex-wrap">
-        {proficiencies.map((proficiency, i) => {
-          return (
-            <Column key={`stat_${i}`} className="pb-4" lg={2} md={2} sm={4}>
-              <Image
-                className="mx-auto md:mx-0"
-                src={proficiency.src}
-                overlayText={proficiency.overlayText}
-                width={4}
-                height={4}
-              />
-            </Column>
-          );
-        })}
-      </div>
-    </ComponentWrapper>
-  );
-}

package/src/components/Profile/Profile.stories.tsx

@@ -1,49 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Profile } from '.';
-
-const meta = {
-  title: 'Components/Profile',
-  component: Profile,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    imageProps: {
-      type: { name: 'other', value: 'object' },
-      description: 'The props to pass to the image to display on the component',
-      table: {
-        type: {
-          summary: 'object',
-        },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    alignment: {
-      description: '',
-      control: 'select',
-      options: ['left', 'center', 'right'],
-      table: {
-        category: '',
-      }
-    },
-    profileLinks: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    }
-  },
-  args: {
-    imageProps: {
-      src: 'https://picsum.photos/200/200',
-    }
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Profile>;
-
-export const Default: Story = {};

package/src/components/Profile/index.tsx

@@ -1,103 +0,0 @@
-import { useState } from 'react';
-
-import { Image, type Props as imageProps } from '@components/Image';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  profileLinks?: Array<{ name: string; link: string }>;
-  alignment?: 'left' | 'right';
-  imageHeight?: number;
-  imageWidth?: number;
-  rounded?: boolean;
-  bordered?: boolean;
-  imageProps?: imageProps;
-}
-
-export const Profile = ({
-  id,
-  className,
-  profileLinks,
-  alignment,
-  imageHeight = 0,
-  imageWidth = 0,
-  rounded,
-  bordered,
-  imageProps,
-}: Props) => {
-  const [profileState, setProfileState] = useState(false);
-
-  const profileAlignment = classNames({
-    'float-right': alignment === 'right',
-    'float-left': alignment === 'left',
-  })
-
-  const dropdownAlignement = classNames({
-    '-mr-16 mt-16': alignment === 'right',
-    ' -ml-16 mt-16': alignment === 'left',
-  })
-
-  const dropdownTextAlignement = classNames({
-    'text-center': alignment !== 'right' && alignment !== 'left',
-  })
-
-  const classList = classNames(
-    {
-      'rounded-full': rounded,
-      border: bordered,
-    },
-    className,
-    `h-${imageHeight} w-${imageWidth}`,
-    'object-cover text-center',
-  )
-
-  const src = imageProps?.src !== undefined ? imageProps.src : '';
-  return (
-    <>
-      <div id={id} className={classList}>
-        <div
-          className={classNames(
-            'inset-y-0 hidden  sm:inline-flex',
-            profileAlignment,
-          )}
-        >
-          <button
-            className="flex rounded-full"
-            onClick={() => {
-              setProfileState(!profileState);
-            }}
-          >
-            <Image src={src} {...imageProps} />
-          </button>
-        </div>
-      </div>
-      {profileState && (
-        <div className={dropdownTextAlignement}>
-          <div
-            className={classNames(
-              'z-10 w-48 shadow-lg sm:inline-block',
-              profileAlignment,
-              dropdownAlignement,
-            )}
-          >
-            {profileLinks?.map((link, i) => {
-              return (
-                <a
-                  key={`profile_link_${i + 1}`}
-                  href={link.link}
-                  className="block border-b px-4 py-2 text-sm font-bold"
-                  role="menuitem"
-                  // tabindex="-1"
-                  id={`user-menu-item-${i + 1}`}
-                >
-                  {link.name}
-                </a>
-              );
-            })}
-          </div>
-        </div>
-      )}
-    </>
-  );
-}

package/src/components/Row/Row.stories.tsx

@@ -1,53 +0,0 @@
-import { CardWithTopImage } from '@components/CardWithTopImage';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Row } from '.';
-
-const cardChild = (
-  <CardWithTopImage
-    imageProps={{
-      src: 'https://picsum.photos/200/200',
-      rounded: true,
-      height: 4,
-      width: 4,
-      roundedFull: true,
-    }}
-    className="w-1/3"
-  >
-    <p>This is some text</p>
-    <p>This is some more text</p>
-    <p>This is a bit more text</p>
-    <p>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem odit ad
-      sed, quam recusandae voluptatem provident eveniet beatae omnis vero minus
-      unde facilis. Quia commodi quas odit iusto ut enim!
-    </p>
-  </CardWithTopImage>
-);
-
-const meta = {
-  title: 'Components/Row',
-  component: Row,
-  argTypes: {
-    ...idAndClassName,
-    children: {
-      type: { name: 'other', value: 'string | React.ReactNode' },
-      description: 'The child elements to show in the component',
-      table: {
-        type: {
-          summary: 'Array',
-        },
-        defaultValue: { summary: 'undefined' },
-      }
-    }
-  },
-  args: {
-    children: cardChild,
-  }
-}
-export default meta;
-
-type Story = StoryObj<typeof Row>;
-
-export const Default: Story = {};

package/src/components/Row/index.tsx

@@ -1,17 +0,0 @@
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  children: any;
-}
-
-export const Row = ({ id, className, children }: Props) => {
-  const classList = classNames(className, 'flex flex-wrap');
-
-  return (
-    <div id={id} className={classList}>
-      {children}
-    </div>
-  );
-}

package/src/components/Search/Search.stories.tsx

@@ -1,63 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Search } from '.';
-
-const meta = {
-  title: 'Components/Search',
-  component: Search,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    leftIconProps: {
-      description:
-        'An optional param to display an icon to the left of the search bar',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    rightIconProps: {
-      description:
-        'An optional param to display an icon to the right of the search bar',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    placeholder: {
-      description:
-        'An optional param to display a placeholder inside the search box',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    text: {
-      description:
-        'An optional param to display a label on the left of the search bar',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    }
-  },
-  args: {
-    placeholder: 'search...',
-    leftIconProps: {
-      type: 'heart',
-      className: 'absolute mt-2 left-3 flex items-center',
-      bgColour: 'white',
-    },
-    rightIconProps: {
-      type: 'heart',
-      className: 'absolute mt-2 right-3 flex items-center',
-      bgColour: 'white',
-    }
-  }
-};
-export default meta;
-
-type Story = StoryObj<typeof Search>;
-
-export const Default: Story = {};

package/src/components/Search/index.tsx

@@ -1,64 +0,0 @@
-import { type ChangeEventHandler } from 'react';
-
-import { Icon, type IconProps } from '@components/Icon';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  onChange?: (val: string | number) => void;
-  placeholder?: string;
-  text?: string;
-  leftIconProps?: IconProps;
-  rightIconProps?: IconProps;
-}
-
-export const Search = ({
-  id,
-  className,
-  onChange,
-  placeholder,
-  text,
-  leftIconProps,
-  rightIconProps,
-}: Props) => {
-  const classList = classNames(className, 'flex');
-
-  const inputClasses = classNames(
-    {
-      'pl-9': leftIconProps !== undefined,
-      'pl-2': leftIconProps === undefined,
-    },
-    'w-full rounded-md border-2 py-2 pr-9',
-  )
-
-  const onChangeFunc: ChangeEventHandler<HTMLInputElement> | undefined =
-    onChange != null
-      ? (e: any) => {
-          onChange(e.target.value);
-        }
-      : undefined;
-
-  return (
-    <div id={id} className={classList}>
-      <div>
-        {text !== undefined && (
-          <h2 className="font-base-lg py-2 pr-4">{text}</h2>
-        )}
-      </div>
-      <div>
-        <div className="relative flex w-full">
-          {leftIconProps !== undefined && <Icon {...leftIconProps} />}
-          <input
-            className={inputClasses}
-            onChange={onChangeFunc}
-            placeholder={placeholder}
-            type="text"
-            name="search"
-          />
-          {rightIconProps !== undefined && <Icon {...rightIconProps} />}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/Select/Select.stories.tsx

@@ -1,55 +0,0 @@
-import { Select } from './';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-const meta = {
-  title: 'Components/Select',
-  component: Select,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-
-    label: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    }
-  },
-  args: {
-    label: 'This is a label',
-    options: [
-      'Option 1',
-      'Option 2',
-      'Option 3',
-      'Option 4',
-      'Option 1',
-      'Option 2',
-      'Option 3',
-      'Option 4',
-      'Option 1',
-      'Option 2',
-      'Option 3',
-      'Option 4',
-      'Option 1',
-      'Option 2',
-      'Option 3',
-      'Option 4',
-      'Option 1',
-      'Option 2',
-      'Option 3',
-      'Option 4',
-      'Option 1',
-      'Option 2',
-      'Option 3',
-      'Option 4',
-    ]
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Select>;
-
-export const Default: Story = {};

package/src/components/Select/index.tsx

@@ -1,98 +0,0 @@
-import { useState } from 'react';
-
-import { Icon } from '@components/Icon';
-import { faChevronDown } from '@fortawesome/fontawesome-free-solid';
-import { type IconProp } from '@fortawesome/fontawesome-svg-core';
-import classNames from 'classnames';
-
-export interface SelectProps {
-  id?: string;
-  className?: string;
-  options: string[];
-  label: string;
-  value?: string;
-  onClick?: any;
-  fullWidth?: boolean;
-  required?: boolean;
-}
-
-export const Select = ({
-  id,
-  className,
-  options,
-  value,
-  label,
-  onClick,
-  required = false,
-  fullWidth = false,
-}: SelectProps) => {
-  const [showDropDown, setShowDropDown] = useState(false);
-  const [activeValue, setActiveValue] = useState(
-    value !== undefined ? value : options?.[0],
-  )
-
-  const handleOptionClick = (e: any): void => {
-    onClick(e.target.textContent);
-    setActiveValue(e.target.textContent);
-    setShowDropDown(false);
-  }
-
-  const fullWidthClasses = classNames({
-    'w-full': fullWidth,
-    'sm:w-72': !fullWidth,
-  })
-
-  const headerClassList = classNames(
-    fullWidthClasses,
-    className,
-    'w-full rounded-xl bg-white shadow drop-shadow flex cursor-pointer flex-row justify-between px-4',
-  )
-
-  const dropdownClassList = classNames(
-    fullWidthClasses,
-    'absolute w-full bg-white mt-2 rounded-2xl py-4 shadow-xl border border-lightest-grey h-64 overflow-scroll',
-  )
-  const dropdownItemClassList =
-    'bg-white text-ink hover:bg-lightest-grey hover:cursor-pointer px-4 py-2';
-
-  return (
-    <>
-      <div
-        id={id}
-        className={headerClassList}
-        onClick={() => {
-          setShowDropDown(!showDropDown);
-        }}
-      >
-        <div className="flex flex-col">
-          <div className="absolute mt-2 flex bg-white text-xs font-thin">
-            <p>{label}</p>
-            {required && <p className="font-semiBold text-error">&nbsp;*</p>}
-          </div>
-          <p className="flex justify-between rounded-xl border-ink bg-white pb-1 pt-6 text-ink">
-            {activeValue}
-          </p>
-        </div>
-        <Icon colour="ink" icon={faChevronDown as IconProp} />
-      </div>
-      {showDropDown && (
-        <div className={classNames('relative z-20', fullWidthClasses)}>
-          <ul className={dropdownClassList}>
-            {options?.map((option: string, i) => (
-              <li
-                key={`key_${i}`}
-                className={dropdownItemClassList}
-                value={option}
-                onClick={(e) => {
-                  handleOptionClick(e);
-                }}
-              >
-                {option}
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-    </>
-  );
-}

package/src/components/Showcase/Showcase.stories.tsx

@@ -1,31 +0,0 @@
-import { faChevronDown } from '@fortawesome/fontawesome-free-solid';
-import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Showcase } from '.';
-
-const meta = {
-  title: 'Components/Showcase',
-  component: Showcase,
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    title: 'This is a title',
-    subTitle: 'This is a subtitle',
-    description: 'This is a description',
-    bgColour: 'white',
-    size: 'large',
-    iconProps: {
-      icon: faChevronDown,
-      onClick: action('Icon click'),
-    }
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Showcase>;
-
-export const Default: Story = {};