trepur_components 2.3.2 → 2.3.4

package/archive/Search/Search.stories.tsx

@@ -0,0 +1,63 @@
+import { Meta, 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 meta>;
+
+export const Default: Story = {};

package/archive/Search/index.tsx

@@ -0,0 +1,68 @@
+import React, { ChangeEventHandler } from 'react';
+
+import Icon, { type Props as 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;
+}
+
+const Search = ({
+  id,
+  className,
+  onChange,
+  placeholder,
+  text,
+  leftIconProps,
+  rightIconProps,
+}: Props): JSX.Element => {
+  const classList = classNames(className, style.classList, 'theme-local');
+
+  const inputClasses = classNames(
+    {
+      [style.leftIcon]: leftIconProps !== undefined,
+      [style.noLeftIcon]: leftIconProps === undefined,
+    },
+    style.inputClassList,
+  );
+
+  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={classNames(style.text, 'font-base-lg')}>{text}</h2>
+        )}
+      </div>
+      <div>
+        <div className={style.inputWrapper}>
+          {leftIconProps !== undefined && <Icon {...leftIconProps} />}
+          <input
+            className={inputClasses}
+            onChange={onChangeFunc}
+            placeholder={placeholder}
+            type="text"
+            name="search"
+          />
+          {rightIconProps !== undefined && <Icon {...rightIconProps} />}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Search;

package/archive/Search/style.module.css

@@ -0,0 +1,23 @@
+.classList {
+  @apply flex;
+}
+
+.inputClassList {
+  @apply w-full rounded-md border-2 py-2 pr-9;
+}
+
+.leftIcon {
+  @apply pl-9;
+}
+
+.noLeftIcon {
+  @apply pl-2;
+}
+
+.text {
+  @apply py-2 pr-4;
+}
+
+.inputWrapper {
+  @apply relative flex w-full;
+}

package/archive/Select/Select.stories.tsx

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import Select from '.';
+
+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 meta>;
+
+export const Default: Story = {};

package/archive/Select/index.tsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+
+import Icon from '@components/Icon';
+import classNames from 'classnames';
+
+
+
+interface Props {
+  id?: string;
+  className?: string;
+  options: string[];
+  label: string;
+  value?: string;
+  onClick?: any;
+  fullWidth?: boolean;
+  required?: boolean;
+}
+
+const Select: React.FC<Props> = ({
+  id,
+  className,
+  options,
+  value,
+  label,
+  onClick,
+  required = false,
+  fullWidth = false,
+}) => {
+  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({
+    [style.fullWidth]: fullWidth,
+    [style.notFullWidth]: !fullWidth,
+  });
+
+  const headerClassList = classNames(
+    fullWidthClasses,
+    style.classList,
+    className,
+    'theme-local',
+  );
+
+  const dropdownClassList = classNames(
+    fullWidthClasses,
+    style.optionList,
+    'theme-local',
+  );
+  const dropdownItemClassList = classNames(style.option, 'theme-local');
+
+  return (
+    <>
+      <div
+        id={id}
+        className={headerClassList}
+        onClick={() => {
+          setShowDropDown(!showDropDown);
+        }}
+      >
+        <div className={style.labelContainer}>
+          <div className={style.labelWrapper}>
+            <p className={style.label}>{label}</p>
+            {required && <p className={style.required}>&nbsp;*</p>}
+          </div>
+          <p className={style.value}>{activeValue}</p>
+        </div>
+        <Icon
+          className={style.icon}
+          bgColour="white"
+          colour="ink"
+          hoverBgColour="white"
+          hoverColour="ink"
+          type="chevron-down"
+        />
+      </div>
+      {showDropDown && (
+        <div className={classNames(style.dropdownWrapper, 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>
+      )}
+    </>
+  );
+};
+
+export default Select;

package/archive/Select/style.module.css

@@ -0,0 +1,52 @@
+.classList {
+  @apply w-full rounded-xl bg-white;
+  @apply shadow drop-shadow;
+  @apply flex cursor-pointer flex-row justify-between px-4;
+}
+
+.fullWidth {
+  @apply w-full;
+}
+
+.notFullWidth {
+  @apply sm:w-72;
+}
+
+.labelContainer {
+  @apply flex flex-col;
+}
+
+.labelWrapper {
+  @apply absolute mt-2 flex bg-white text-xs font-thin;
+}
+
+.required {
+  @apply font-semiBold text-error;
+}
+
+.value {
+  @apply rounded-xl border-ink bg-white pb-1 pt-6 text-ink;
+  @apply flex justify-between;
+}
+
+.icon {
+  @apply my-auto;
+}
+
+.dropdownWrapper {
+  @apply relative z-20;
+}
+
+.optionList {
+  @apply absolute w-full bg-white;
+  @apply mt-2 rounded-2xl py-4;
+  @apply shadow-xl;
+  @apply border border-lightest-grey;
+  @apply h-64 overflow-scroll;
+}
+
+.option {
+  @apply bg-white text-ink hover:bg-lightest-grey;
+  @apply hover:cursor-pointer;
+  @apply px-4 py-2;
+}

package/archive/Showcase/Showcase.stories.tsx

@@ -0,0 +1,30 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, 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: {
+      type: 'chevron-down',
+      onClick: action('Icon click'),
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/Showcase/index.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import Avatar from '@components/Avatar';
+import ComponentWrapper from '@components/ComponentWrapper';
+import Container from '@components/Container';
+import Icon, { type Props as iconProps } from '@components/Icon';
+import { type Colours } from '@utils/controls';
+import classNames from 'classnames';
+
+
+
+export interface Props {
+  id: string;
+  className?: string;
+  title: string;
+  subTitle: string;
+  description: string;
+  bgColour?: Colours;
+  image: string;
+
+  size?: 'small' | 'medium' | 'large';
+  iconProps?: iconProps;
+}
+
+const Showcase: React.FC<Props> = ({
+  id,
+  className,
+  title,
+  subTitle,
+  description,
+  bgColour,
+  size = 'large',
+
+  iconProps,
+}: Props): JSX.Element => {
+  const classList = classNames(className, 'theme-local');
+
+  const containerSize = classNames(
+    {
+      [style.smallContainer]: size === 'small',
+      [style.mediumContainer]: size === 'medium',
+      [style.largeContainer]: size === 'large',
+    },
+    style.container,
+  );
+
+  return (
+    <ComponentWrapper id={id} className={classList} bgColour={bgColour}>
+      <Container className={containerSize}>
+        <div className={style.textWrapper}>
+          <h2 className={style.title}>{title}</h2>
+          <h2 className={style.subTitle}>{subTitle}</h2>
+          <p className={style.description}>{description}</p>
+        </div>
+        <div className={style.avatarWrapper}>
+          <Avatar />
+        </div>
+      </Container>
+      {iconProps?.type !== undefined && (
+        <div className={style.iconWrapper}>
+          <Icon
+            className={style.icon}
+            size={2}
+            rounded
+            {...iconProps}
+            type={iconProps.type}
+            onClick={iconProps.onClick}
+          />
+        </div>
+      )}
+    </ComponentWrapper>
+  );
+};
+
+export default Showcase;

package/archive/Showcase/style.module.css

@@ -0,0 +1,47 @@
+.container {
+  @apply flex flex-wrap text-center md:flex-nowrap md:text-left;
+}
+
+.smallContainer {
+  @apply h-56;
+}
+
+.mediumContainer {
+  @apply h-96;
+}
+
+.largeContainer {
+  @apply min-h-[calc(100vh-176px)];
+}
+
+.textWrapper {
+  @apply m-auto w-full md:w-2/3 md:pl-16 md:pr-4 lg:pl-32 lg:pr-8 xl:pl-64;
+}
+
+.title {
+  @apply text-lg font-bold leading-tight text-primary md:text-xxl;
+}
+
+.subTitle {
+  @apply text-lg font-bold leading-tight text-black md:text-xxl;
+}
+
+.description {
+  @apply pt-4 text-sm text-black md:text-md;
+}
+
+.avatarWrapper {
+  @apply m-auto flex w-full justify-center md:w-1/3 md:pb-20;
+}
+
+.avatar {
+  @apply max-h-96 md:m-auto md:w-full;
+}
+
+.iconWrapper {
+  @apply w-full;
+}
+
+.icon {
+  @apply mx-auto hover:scale-125 hover:cursor-pointer;
+}

package/archive/SideNav/SideNav.stories.tsx

@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import SideNav from '.';
+
+const meta = {
+  title: 'Components/SideNav',
+  component: SideNav,
+  parameters: {
+    backgrounds: {
+      default: 'grey',
+      values: [
+        {
+          name: 'grey',
+          value: '#f3f3f3',
+        },
+      ],
+    },
+  },
+  argTypes: {
+    ...idAndClassName,
+
+    navLinks: {
+      description: 'An array of nav links to display in the component',
+      table: {
+        type: { summary: 'array' },
+      },
+    },
+    bgColour: {
+      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: {
+    children: <p>dfghj</p>,
+    showNav: true,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/SideNav/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { type Colours } from '@utils/controls';
+import classNames from 'classnames';
+
+
+
+export interface Props {
+  id: string;
+  className: string;
+  children: any;
+  getNavStatus: (asSideBar: boolean, open: boolean) => void;
+  bgColour?: Colours;
+  showNav?: boolean;
+  leftExpand?: boolean;
+}
+
+const SideNav = ({
+  id,
+  className,
+  children,
+  bgColour = 'primary',
+  showNav = false,
+  leftExpand = true,
+}: Props): JSX.Element => {
+  const sideNavClasses = classNames(
+    {
+      [style.sideBarCollapsed]: !showNav,
+      [style.sideBarExpanded]: showNav,
+      [style.leftExpand]: leftExpand,
+      [style.rightExpand]: !leftExpand,
+    },
+    style[bgColour],
+    style.sideNavClassList,
+    className,
+    'theme-local',
+  );
+
+  return (
+    <div id={id} className={sideNavClasses}>
+      {children}
+    </div>
+  );
+};
+
+export default SideNav;

package/archive/SideNav/style.module.css

@@ -0,0 +1,43 @@
+.primary {
+  @apply bg-primary text-white;
+}
+
+.secondary {
+  @apply bg-secondary text-white;
+}
+
+.white {
+  @apply bg-white text-black;
+}
+
+.black {
+  @apply bg-black text-white;
+}
+
+.sideNavClassList {
+  @apply absolute z-50 h-full overflow-hidden duration-700;
+}
+
+.leftExpand {
+  @apply left-0;
+}
+
+.rightExpand {
+  @apply right-0;
+}
+
+.mobileSideBarMenu {
+  @apply space-y-1 pb-3 pt-2;
+}
+
+.mobileSideBarMenuNavItems {
+  @apply pl-8 pt-4;
+}
+
+.sideBarCollapsed {
+  @apply w-0;
+}
+
+.sideBarExpanded {
+  @apply w-full sm:w-1/3;
+}