trepur_components 2.3.8 → 2.3.10

package/src/components/Checkbox/index.tsx

@@ -1,41 +0,0 @@
-import React, { useState } from 'react';
-
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  label: string;
-  onClick?: (label: string, isChecked: boolean) => void;
-  checked?: boolean;
-}
-
-export const Checkbox = ({ id, label, onClick, checked = false }: Props) => {
-  const [isChecked, setIsChecked] = useState(checked);
-
-  const classList = 'checkbox-wrapper';
-  const checkBoxClassList = classNames(
-    {
-      'bg-facebook': isChecked,
-    },
-    'h-6 w-6 appearance-none rounded border-2 hover:cursor-pointer',
-  )
-
-  return (
-    <div id={id} className={classList}>
-      <label className="flex  hover:cursor-pointer">
-        <input
-          className={checkBoxClassList}
-          onChange={() => {
-            setIsChecked(!isChecked);
-          }}
-          onClick={() => {
-            onClick?.(label, !isChecked);
-          }}
-          type="checkbox"
-          checked={isChecked}
-        />
-        <span className="my-auto px-2">{label}</span>
-      </label>
-    </div>
-  );
-}

package/src/components/Collapsible/Collapsible.stories.tsx

@@ -1,67 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Collapsible } from '.';
-
-const meta = {
-  title: 'Components/Collapsible',
-  component: Collapsible,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-
-    preText: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    title: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    subtitle: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    children: {
-      description: '',
-      control: 'array',
-      table: {
-        category: '',
-      }
-    }
-  },
-  args: {
-    preText: 'this is some text',
-    title: 'Sheffield Hallam University',
-    subtitle: 'This is a subtitle',
-    imageProps: {
-      src: 'https://picsum.photos/500/300',
-    },
-    children: (
-      <p>
-        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, unde
-        perferendis quibusdam eos repellendus vero rerum sunt reiciendis velit
-        autem odio, fuga molestiae perspiciatis dolor voluptatum mollitia quos
-        ipsa! Doloribus? Lorem ipsum, dolor sit amet consectetur adipisicing
-        elit. Reiciendis ducimus, dolorum tempore unde earum aspernatur placeat
-        magnam, alias neque, blanditiis esse tenetur dignissimos in optio nihil
-        libero cum cupiditate debitis?
-      </p>
-    ),
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof Collapsible>;
-
-export const Default: Story = {};

package/src/components/Collapsible/index.tsx

@@ -1,128 +0,0 @@
-import { useState, useEffect } from 'react';
-
-import { HorizontalLine } from '@components/HorizontalLine';
-import { Icon } from '@components/Icon';
-import { Image, type Props as imageProps } from '@components/Image';
-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;
-  preText?: string;
-  title?: string;
-  subtitle?: string;
-  imageProps?: imageProps;
-  children?: string | JSX.Element;
-}
-
-export const Collapsible = ({
-  id,
-  className,
-  preText,
-  title,
-  subtitle,
-  imageProps,
-  children,
-}: Props) => {
-  const [expanded, setExpanded] = useState(false);
-
-  useEffect(() => {
-    const coll = document.getElementsByClassName('collapsible');
-    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,
-    'w-full border-b border-lightest-grey duration-300 hover:cursor-pointer transition-opactiy',
-  )
-
-  const contentWrapperClassList = classNames(
-    {
-      'mb-4 mt-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 h-24 px-4 sm:pr-8"
-      >
-        {imageProps !== undefined && (
-          <Image
-            {...imageProps}
-            width={3}
-            height={3}
-            className=" my-auto flex-none rounded-2xl"
-          />
-        )}
-        <div className="mx-4 my-auto grid w-full">
-          {preText !== undefined && (
-            <h4 className="truncate text-xxs text-light-grey md:text-xs">
-              {preText}
-            </h4>
-          )}
-          {title !== undefined && (
-            <h4 className="truncate text-sm md:text-md">{title}</h4>
-          )}
-          {subtitle !== undefined && (
-            <h5 className="truncate text-xs md:text-sm">{subtitle}</h5>
-          )}
-        </div>
-        {children !== undefined && (
-          <div className="my-auto flex-none">
-            <Icon
-              icon={
-                expanded
-                  ? (faChevronUp as IconProp)
-                  : (faChevronDown as IconProp)
-              }
-            />
-          </div>
-        )}
-      </div>
-      {children !== undefined && (
-        <div
-          className={contentWrapperClassList}
-          style={{ transition: 'max-height 0.2s ease-out' }}
-        >
-          <HorizontalLine colour="grey" />
-          <div className="pb-2 pt-4">{children}</div>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/Column/Column.stories.tsx

@@ -1,89 +0,0 @@
-import { CardWithTopImage } from '@components/CardWithTopImage';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Column } from '.';
-
-const cardChild = (
-  <CardWithTopImage
-    id="cardwithtopimage"
-    imageProps={{
-      src: 'https://picsum.photos/200/200',
-      roundedFull: true,
-    }}
-  >
-    <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/Column',
-  component: Column,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    sm: {
-      type: { name: 'number', required: false },
-      description:
-        'The number of sections out of 12 that the component should span on sm screens',
-      table: {
-        type: { summary: 'number' },
-      }
-    },
-    md: {
-      type: { name: 'number', required: false },
-      description:
-        'The number of sections out of 12 that the component should span on md screens',
-      table: {
-        type: { summary: 'number' },
-      }
-    },
-    lg: {
-      type: { name: 'number', required: false },
-      description:
-        'The number of sections out of 12 that the component should span on lg screens',
-      table: {
-        type: { summary: 'number' },
-      }
-    },
-    xl: {
-      type: { name: 'number', required: false },
-      description:
-        'The number of sections out of 12 that the component should span on xl screens',
-      table: {
-        type: { summary: 'number' },
-      }
-    },
-    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: {
-    sm: 12,
-    md: 8,
-    lg: 4,
-    xl: 2,
-    className: 'bg-facebook md:bg-twitter lg-whatsapp xl:bg-linkedin border',
-    children: cardChild,
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof Column>;
-
-export const Default: Story = {};

package/src/components/Column/index.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  sm?: number;
-  md?: number;
-  lg?: number;
-  xl?: number;
-  children?: any;
-}
-export const Column = ({
-  id,
-
-  children,
-}: Props) => {
-  return <div id={id}>{children}</div>;
-}

package/src/components/ComponentWrapper/ComponentWrapper.stories.tsx

@@ -1,40 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { ComponentWrapper } from '.';
-
-const meta = {
-  title: 'Components/ComponentWrapper',
-  component: ComponentWrapper,
-  argTypes: {
-    ...idAndClassName,
-    maxWidth: {
-      type: { name: 'number', required: false },
-      description: 'The number of pixles for the component to span',
-      control: { type: 'number', min: 1, step: 1 },
-      defaultValue: '1200',
-    },
-    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: {
-    title: 'This is a title',
-    description:
-      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis blanditiis cupiditate officiis aperiam culpa unde vitae quaerat, incidunt aliquam ut qui alias accusamus aspernatur in ad voluptatibus itaque, quibusdam distinctio.',
-    children: <p>This is a centered ComponentWrapper with a max width</p>,
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof ComponentWrapper>;
-
-export const Default: Story = {};

package/src/components/ComponentWrapper/index.tsx

@@ -1,48 +0,0 @@
-import { type CSSProperties } from 'react';
-
-import { Container } from '@components/Container';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  description?: string;
-  bgColour?: Colours;
-  children?: any;
-  styles?: CSSProperties;
-  withContainerPadding?: boolean;
-}
-
-export const ComponentWrapper = ({
-  id,
-  className,
-  title,
-  description,
-  bgColour = 'grey',
-  children,
-  styles,
-  withContainerPadding = true,
-}: Props) => {
-  const classList = classNames(className, 'mx-auto w-full');
-  const containerClasses = classNames({
-    'py-8': withContainerPadding,
-  })
-
-  return (
-    <div id={id} className={classList} style={styles}>
-      <Container withPadding className={containerClasses}>
-        <div className="pt-0">
-          {title !== undefined && (
-            <h2 className="pb-2 text-lg font-regular">{title}</h2>
-          )}
-          {description !== undefined && (
-            <p className="pb-8 text-md font-light">{description}</p>
-          )}
-        </div>
-        {children}
-      </Container>
-    </div>
-  );
-}

package/src/components/Container/Container.stories.tsx

@@ -1,40 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Container } from '.';
-
-const meta = {
-  title: 'Components/Container',
-  component: Container,
-  argTypes: {
-    ...idAndClassName,
-    maxWidth: {
-      type: { name: 'number', required: false },
-      description: 'The number of pixles for the component to span',
-      control: { type: 'number', min: 1, step: 1 },
-      defaultValue: '1200',
-    },
-    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: (
-      <div className="w-full border">
-        <p className="my-20 text-center">This is a container</p>
-      </div>
-    ),
-  }
-}
-export default meta;
-
-type Story = StoryObj<typeof Container>;
-
-export const Default: Story = {};

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/Counter/Counter.stories.tsx

@@ -1,19 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Counter } from '.';
-
-const meta = {
-  title: 'Components/Counter',
-  component: Counter,
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {},
-}
-
-export default meta;
-
-type Story = StoryObj<typeof Counter>;
-
-export const Default: Story = {};

package/src/components/Counter/index.tsx

@@ -1,42 +0,0 @@
-import React, { useState } from 'react';
-
-import { Icon } from '@components/Icon';
-import {
-  faChevronCircleLeft,
-  faChevronCircleRight,
-} from '@fortawesome/fontawesome-free-solid';
-import { type IconProp } from '@fortawesome/fontawesome-svg-core';
-
-export interface Props {
-  id?: string;
-  count?: number;
-  onClick?: (count: number) => void;
-}
-
-export const Counter = ({ id, count = 0, onClick }: Props) => {
-  const [currentCount, setCurrentCount] = useState(count);
-
-  return (
-    <div id={id} className="z-10 inline-block rounded-lg">
-      <div className="flex gap-8">
-        <div className="my-auto cursor-pointer">
-          <Icon
-            icon={faChevronCircleLeft as IconProp}
-            onClick={() => {
-              setCurrentCount(currentCount - 1);
-            }}
-          />
-        </div>
-        <div className="overflow-hidden text-center">{currentCount}</div>
-        <div className="my-auto cursor-pointer">
-          <Icon
-            icon={faChevronCircleRight as IconProp}
-            onClick={() => {
-              setCurrentCount(currentCount + 1);
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/DetailUpdater/DetailUpdater.stories.tsx

@@ -1,95 +0,0 @@
-import { Input } from '@components/Input';
-import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { DetailUpdater } from '.';
-
-const meta = {
-  title: 'Components/Detail Updater',
-  component: DetailUpdater,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-
-    title: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    description: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    expandText: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: '',
-      }
-    },
-    collapseText: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: '',
-      }
-    },
-    ctaText: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: '',
-      }
-    },
-    onClick: {
-      description: '',
-      control: 'array',
-      table: {
-        category: '',
-      }
-    },
-    fields: {
-      description: 'The default value of the input',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    }
-  },
-  args: {
-    title: 'Legal Name',
-    description: 'This is a description to let you know what to do',
-    expandText: 'Edit',
-    collapseText: 'Cancel',
-    ctaText: 'Save',
-    onClick: (fieldValues: any) => {
-      action('Submitted')(fieldValues);
-    },
-    onChange: (value: any) => {
-      action('Updated')(value);
-    },
-    children: (
-      <Input
-        withValidation
-        bgColour="white"
-        label="Title"
-        placeholder="Insert title here"
-        className="mb-4"
-        required
-        // onChange={(e) => setTitle(e.target.value)}
-      />
-    ),
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof DetailUpdater>;
-
-export const Default: Story = {};