trepur_components 2.3.8 → 2.3.10

package/src/components/Timeline/index.tsx

@@ -1,256 +0,0 @@
-import { Column } from '@components/Column';
-import { ComponentWrapper } from '@components/ComponentWrapper';
-import { Image } from '@components/Image';
-import { Row } from '@components/Row';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  description?: string;
-  bgColour?: Colours;
-  isHorizontal?: boolean;
-  items?: object[];
-  reverse?: boolean;
-  textCenter?: boolean;
-  useImages?: boolean;
-  horizontalComponentClasses?: string;
-  isSm?: boolean;
-}
-
-export const Timeline = ({
-  id,
-  className,
-  title,
-  description,
-  bgColour,
-  isHorizontal = false,
-  items,
-  reverse = false,
-  textCenter,
-  useImages = true,
-  horizontalComponentClasses,
-  isSm = false,
-}: Props) => {
-  const classList = classNames(className, 'w-full list-none pb-4');
-  const ulClasses = classNames(
-    {
-      'flex-row justify-between none-reverse': !reverse && isHorizontal,
-      'flex-col none-reverse': !reverse && !isHorizontal,
-      'flex-row justify-between reverse': reverse && isHorizontal,
-      'flex-col reverse': reverse && !isHorizontal,
-    },
-    className,
-    'relative flex list-none pl-0 status-flow timeline',
-  )
-
-  const liClasses = classNames(
-    {
-      'text-center': textCenter,
-      'flex-col items-center justify-between': !reverse && isHorizontal,
-      'flex-row none-reverse': !reverse && !isHorizontal,
-      'flex-col-reverse items-center': reverse && isHorizontal,
-      'flex-row-reverse': reverse && !isHorizontal,
-    },
-    'relative flex flex-auto flex-row leading-tight status-flow-item',
-  )
-
-  const circle = classNames(
-    {
-      'horizontal collapse': isHorizontal && isSm,
-      horizontal: isHorizontal && !isSm,
-      vertical: !isHorizontal,
-    },
-    'mx-auto my-16 h-4 w-4 rounded-full border bg-black text-center',
-  )
-
-  return (
-    <ComponentWrapper
-      id={id}
-      className={classList}
-      title={title}
-      description={description}
-      bgColour={bgColour}
-    >
-      <div className={ulClasses}>
-        {items?.map((item: any, i: number) => {
-          let before;
-          if (i % 2 === 0) {
-            before = true;
-          } else {
-            before = false;
-          }
-
-          let circlePos;
-          if (items.length - 1 > 0) {
-            if (i === 0) circlePos = 'first-circle';
-            else if (i === items.length - 1) circlePos = 'last-circle';
-            else circlePos = 'circle';
-          }
-
-          let verticalCircleStylesBefore;
-          if (circlePos === 'circle' && isSm) {
-            verticalCircleStylesBefore =
-              'absolute top-0 block h-1/2 border-2 border-solid border-primary';
-          } else if (circlePos === 'circle' && !isSm) {
-            verticalCircleStylesBefore =
-              'absolute top-0 block h-1/2 border-2 border-solid border-primary';
-          } else if (circlePos === 'last-circle' && isSm) {
-            verticalCircleStylesBefore =
-              'absolute top-0 block h-1/2 border-2 border-solid border-primary';
-          } else if (circlePos === 'last-circle' && !isSm) {
-            verticalCircleStylesBefore =
-              'absolute top-0 block h-1/2 border-2 border-solid border-primary';
-          }
-
-          let verticalCircleStylesAfter;
-          if (circlePos === 'circle' && isSm) {
-            verticalCircleStylesAfter =
-              'absolute bottom-0 block h-1/2 border-2 border-solid border-primary';
-          } else if (circlePos === 'circle' && !isSm) {
-            verticalCircleStylesAfter =
-              'absolute bottom-0 block h-1/2 border-2 border-solid border-primary';
-          } else if (circlePos === 'first-circle' && isSm) {
-            verticalCircleStylesAfter =
-              'absolute bottom-0 block h-1/2 border-2 border-solid border-primary';
-          } else if (circlePos === 'first-circle' && !isSm) {
-            verticalCircleStylesAfter =
-              'absolute bottom-0 block h-1/2 border-2 border-solid border-primary';
-          }
-
-          let horizontalCircleStylesBefore;
-          if (circlePos === 'circle' && isSm) {
-            horizontalCircleStylesBefore = '';
-          } else if (circlePos === 'circle' && !isSm) {
-            horizontalCircleStylesBefore =
-              'absolute top-1/2 block border-2 border-solid border-primary';
-          } else if (circlePos === 'last-circle' && isSm) {
-            horizontalCircleStylesBefore = '';
-          } else if (circlePos === 'last-circle' && !isSm) {
-            horizontalCircleStylesBefore =
-              'absolute top-1/2 block border-2 border-solid border-primary';
-          }
-
-          let horizontalCircleStylesAfter;
-          if (circlePos === 'circle' && isSm) {
-            horizontalCircleStylesAfter = '';
-          } else if (circlePos === 'circle' && !isSm) {
-            horizontalCircleStylesAfter =
-              'absolute top-1/2 block border-2 border-solid border-primary';
-          } else if (circlePos === 'first-circle' && isSm) {
-            horizontalCircleStylesAfter = '';
-          } else if (circlePos === 'first-circle' && !isSm) {
-            horizontalCircleStylesAfter =
-              'absolute top-1/2 block border-2 border-solid border-primary';
-          }
-
-          const horizonalComponentClassList = classNames(
-            horizontalComponentClasses,
-            'pt-12',
-          )
-          if (isHorizontal) {
-            return (
-              <Column
-                key={`horizontal_col_${i + 0}`}
-                id="timeline-item"
-                className={`${liClasses} mb-8 py-4`}
-              >
-                <Row className={horizontalComponentClasses}>
-                  {before && item.component}
-                </Row>
-                <Row>
-                  {useImages ? (
-                    <div
-                      id={circlePos}
-                      className={
-                        isHorizontal ? 'horizontal my-0 py-0' : 'vertical'
-                      }
-                    >
-                      <span className={horizontalCircleStylesBefore} />
-                      <Image
-                        {...item.centerImageProps}
-                        className="relative z-10"
-                      />
-                      <span className={horizontalCircleStylesAfter} />
-                    </div>
-                      ) : (
-                    <p id={circlePos} className={circle} />
-                      )}
-                </Row>
-                <Row className={horizonalComponentClassList}>
-                  {!before && item.component}
-                </Row>
-              </Column>
-            );
-          } else {
-            return (
-              <Row
-                key={`vertical_row_${i + 0}`}
-                id="timeline-item"
-                className={`${liClasses} py-4`}
-              >
-                {!isSm && (
-                  <Column
-                    sm={5}
-                    md={5}
-                    lg={5}
-                    xl={5}
-                    className="my-auto text-center"
-                  >
-                    {before && item.component}
-                  </Column>
-                )}
-                <Column
-                  sm={2}
-                  md={2}
-                  lg={2}
-                  xl={2}
-                  id="circle-wrapper"
-                  className="my-auto"
-                >
-                  {useImages ? (
-                    <div id={circlePos} className="vertical">
-                      <span className={verticalCircleStylesBefore} />
-                      <Image
-                        {...item.centerImageProps}
-                        className="relative z-10"
-                      />
-                      <span className={verticalCircleStylesAfter} />
-                    </div>
-                      ) : (
-                    <p id={circlePos} className={circle} />
-                      )}
-                </Column>
-                {/* TODO: combine below - issue with sm div */}
-                {isSm && (
-                  <Column
-                    sm={10}
-                    md={10}
-                    lg={10}
-                    xl={10}
-                    className="my-auto text-center"
-                  >
-                    {item.component}
-                  </Column>
-                )}
-                {!isSm && (
-                  <Column
-                    sm={5}
-                    md={5}
-                    lg={5}
-                    xl={5}
-                    className="my-auto text-center"
-                  >
-                    {!before && item.component}
-                  </Column>
-                )}
-              </Row>
-            );
-          }
-        })}
-      </div>
-    </ComponentWrapper>
-  );
-}

package/src/components/TimelineV2/TimelineV2.stories.tsx

@@ -1,95 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { TimelineV2 } from '.';
-
-const meta = {
-  title: 'Components/TimelineV2',
-  component: TimelineV2,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-
-    isHorizontal: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: '',
-      }
-    },
-    useImages: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: '',
-      }
-    },
-    items: {
-      description: '',
-      control: 'array',
-      table: {
-        category: '',
-      }
-    }
-  },
-  args: {
-    title: 'This is a timeline',
-    description: 'What do you think to it?',
-    items: [
-      {
-        preText:
-          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laudantium ratione optio ipsa repellat voluptatum in reiciendis corrupti officiis similique aliquid ex voluptas placeat autem blanditiis doloribus nisi, accusantium hic.',
-        title:
-          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laudantium ratione optio ipsa repellat voluptatum in reiciendis corrupti officiis similique aliquid ex voluptas placeat autem blanditiis doloribus nisi, accusantium hic.',
-        subtitle:
-          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laudantium ratione optio ipsa repellat voluptatum in reiciendis corrupti officiis similique aliquid ex voluptas placeat autem blanditiis doloribus nisi, accusantium hic.',
-        imageProps: {
-          src: 'https://picsum.photos/101/100',
-        },
-        children:
-          'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam culpa dolores animi voluptatum dolore ducimus illum ad magni iste adipisci, officiis, pariatur architecto tenetur cupiditate rem minima itaque nostrum voluptate.',
-      },
-      {
-        title: 'Title 2',
-        subtitle: 'Subtitle 2',
-        imageProps: {
-          src: 'https://picsum.photos/100/101',
-        },
-        children:
-          'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam culpa dolores animi voluptatum dolore ducimus illum ad magni iste adipisci, officiis, pariatur architecto tenetur cupiditate rem minima itaque nostrum voluptate.',
-      },
-      {
-        title: 'Title 3',
-        subtitle: 'Subtitle 3',
-        imageProps: {
-          src: 'https://picsum.photos/102/100',
-        },
-        children:
-          'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam culpa dolores animi voluptatum dolore ducimus illum ad magni iste adipisci, officiis, pariatur architecto tenetur cupiditate rem minima itaque nostrum voluptate.',
-      },
-      {
-        title: 'Title 4',
-        subtitle: 'Subtitle 4',
-        imageProps: {
-          src: 'https://picsum.photos/100/102',
-        },
-        children:
-          'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam culpa dolores animi voluptatum dolore ducimus illum ad magni iste adipisci, officiis, pariatur architecto tenetur cupiditate rem minima itaque nostrum voluptate.',
-      },
-      {
-        title: 'Title 5',
-        subtitle: 'Subtitle 5',
-        imageProps: {
-          src: 'https://picsum.photos/102/101',
-        },
-        children:
-          'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam culpa dolores animi voluptatum dolore ducimus illum ad magni iste adipisci, officiis, pariatur architecto tenetur cupiditate rem minima itaque nostrum voluptate.',
-      }
-    ]
-  },
-}
-export default meta;
-
-type Story = StoryObj<typeof TimelineV2>;
-
-export const Default: Story = {};

package/src/components/TimelineV2/index.tsx

@@ -1,70 +0,0 @@
-import { Collapsible } from '@components/Collapsible';
-import { ComponentWrapper } from '@components/ComponentWrapper';
-import { type Props as ImageProps } from '@components/Image';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-interface Item {
-  preText?: string;
-  title?: string;
-  subtitle?: string;
-  children: any;
-  imageProps: ImageProps;
-}
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  description?: string;
-  bgColour?: Colours;
-  items?: Item[];
-}
-
-export const TimelineV2 = ({
-  id,
-  className,
-  title,
-  description,
-  bgColour,
-  items,
-}: Props) => {
-  const classList = classNames(className, 'w-full list-none pb-4');
-
-  return (
-    <ComponentWrapper
-      id={id}
-      className={classList}
-      title={title}
-      description={description}
-      bgColour={bgColour}
-    >
-      {items?.map((item, i: number) => {
-        return (
-          <div className="flex" key={`timeline_${i}`}>
-            <div className="hidden sm:block">
-              <p className="z-10 m-auto mt-12 h-4 w-4 rounded-full bg-light-grey" />
-              <div
-                className={
-                  i !== items.length - 1
-                    ? 'm-auto h-full w-1 bg-light-grey'
-                    : 'border-r-2 border-transparent'
-                }
-              />
-            </div>
-            <div className="my-2 w-full rounded-2xl bg-white sm:ml-8">
-              <Collapsible
-                preText={item.preText}
-                title={item.title}
-                subtitle={item.subtitle}
-                imageProps={item.imageProps}
-              >
-                {item.children}
-              </Collapsible>
-            </div>
-          </div>
-        );
-      })}
-    </ComponentWrapper>
-  );
-}

package/src/components/Tubestops/Tubestops.stories.tsx

@@ -1,42 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Tubestops } from '.';
-
-const meta = {
-  title: 'Components/Tubestops',
-  component: Tubestops,
-  argTypes: {
-    ...idAndClassName,
-    items: {
-      description:
-        'An array of strings, one per stop. To add a stop without text, use and empty string',
-    },
-    activeStop: {
-      description: 'The stop number which is currently active',
-    }
-  },
-  args: {
-    items: [
-      'Step 1',
-      'Step 2',
-      'Step 3',
-      'Step 4',
-      'Step 5',
-      'Step 6',
-      'Step 7',
-      'Step 8',
-      'Step 9',
-      'Step 10',
-      'Step 11',
-      'Step 12',
-    ],
-    activeStop: 1,
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof Tubestops>;
-
-export const Default: Story = {};

package/src/components/Tubestops/index.tsx

@@ -1,54 +0,0 @@
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface TubestopsProps
-  extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
-  items?: string[];
-
-  bgColour?: Colours;
-  activeStop?: number;
-}
-
-export const Tubestops = ({ id, items, activeStop = 1 }: TubestopsProps) => {
-  return (
-    <div id={id} className="flex py-4">
-      {items?.map((item, i: number) => {
-        return (
-          <div className="w-full min-w-[120px]" key={`tubestop-stop-${i}`}>
-            <div
-              className={classNames({
-                'ml-1/2 mt-4 h-1 w-full bg-border-light':
-                  i >= activeStop - 1 && i < items.length - 1,
-                'ml-1/2 mt-4 h-1 w-full bg-success':
-                  i < activeStop - 1 && i < items.length - 1,
-              })}
-            />
-            <p
-              className={classNames(
-                {
-                  '-mt-4 bg-success': i + 1 < activeStop,
-                  '-mt-4 bg-gold': activeStop === i + 1,
-                  '-mt-4 bg-border-light': i + 1 > activeStop,
-                  'mt-1': i === items.length - 1,
-                },
-                'z-10 mx-auto h-6 w-6 rounded-full',
-              )}
-            />
-            <p
-              className={classNames(
-                {
-                  'font-medium text-success': i + 1 < activeStop,
-                  'font-bold text-gold': activeStop === i + 1,
-                  'font-medium text-border-light': i + 1 > activeStop,
-                },
-                'mt-2 text-center',
-              )}
-            >
-              {item}
-            </p>
-          </div>
-        );
-      })}
-    </div>
-  );
-}

package/src/components/UserIcon/UserIcon.stories.tsx

@@ -1,52 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { UserIcon } from '.';
-
-const meta = {
-  title: 'Components/User Icon',
-  component: UserIcon,
-  argTypes: {
-    ...idAndClassName,
-
-    name: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    description: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    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' },
-      }
-    }
-  },
-  args: {
-    imageProps: {
-      title: '',
-      altText: '',
-      src: 'https://picsum.photos/200/200',
-    },
-    name: 'Someones name',
-    description: 'someone info',
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/components/UserIcon/index.tsx

@@ -1,43 +0,0 @@
-import { Image, type Props as imageProps } from '@components/Image';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  name?: string;
-  description?: string;
-  imageProps?: imageProps;
-}
-
-export const UserIcon = ({
-  id,
-  className,
-  name,
-  description,
-  imageProps,
-}: Props) => {
-  const classList = classNames(
-    {
-      className: className !== undefined,
-    },
-    'flex items-center',
-  )
-
-  imageProps = {
-    ...imageProps,
-    src: imageProps?.src !== undefined ? imageProps.src : '',
-    className: classNames(
-      imageProps?.className,
-      'mr-4 h-12 w-12 shrink-0 rounded-full',
-    )
-  }
-  return (
-    <div id={id} className={classList}>
-      <Image {...imageProps} />
-      <div className="ltr:ml-3 rtl:mr-3">
-        <p className="text-md font-regular">{name}</p>
-        <p className="text-sm font-light">{description}</p>
-      </div>
-    </div>
-  );
-}

package/src/components/Video/Video.stories.tsx

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

package/src/components/Video/index.tsx

@@ -1,45 +0,0 @@
-export interface Props {
-  id?: string;
-  className?: string;
-  autoPlay?: boolean;
-  muted?: boolean;
-  poster?: string;
-  mp4File?: string;
-  webmFile?: string;
-  ogvFile?: string;
-  height?: string;
-  width?: string;
-  withControls?: boolean;
-  withPoster?: boolean;
-}
-
-export const Video = ({
-  id,
-  className,
-  autoPlay,
-  muted,
-  poster,
-  mp4File,
-  webmFile,
-  ogvFile,
-  height,
-  width,
-  withControls,
-}: Props) => {
-  return (
-    <video
-      id={id}
-      className={className}
-      poster={poster}
-      width={width}
-      height={height}
-      controls={withControls}
-      autoPlay={autoPlay}
-      muted={muted}
-    >
-      <source src={mp4File} type="video/mp4" />
-      {webmFile !== null && <source src={webmFile} type="video/webm" />}
-      {ogvFile !== undefined && <source src={ogvFile} type="video/ogg" />}
-    </video>
-  );
-}