trepur_components 2.3.8 → 2.3.10

package/src/components/TextAndTitle/TextAndTitle.stories.tsx

@@ -1,71 +0,0 @@
-import { Greeting } from '@components/Greeting';
-import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { TextAndTitle } from '.';
-
-const meta = {
-  title: 'Components/Text And Title',
-  component: TextAndTitle,
-  argTypes: {
-    ...idAndClassName,
-
-    onSave: {
-      type: { name: 'function', required: false },
-      description: 'Fires a function when you click save',
-      action: 'onClick',
-      table: {
-        type: {
-          summary: 'function',
-        },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    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: {
-    title: 'This is a title',
-    description: 'what do you recon to this?',
-    children: <p>This is a child</p>,
-    editTitleClasses: 'text-md sm:text-lg ',
-    editTextClasses: 'break-words',
-    editInputClasses: 'border border-black text-black bg-white',
-    textLineOne: (
-      <div>
-        <Greeting />
-        <p>Loremipsumdolorsitamet consectetur adipisicing elit</p>
-      </div>
-    ),
-    textLineTwo:
-      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi impedit sed, quis aspernatur voluptate minima vel placeat ipsa amet voluptatem reprehenderit ullam rem cum tempora explicabo veritatis numquam libero asperiores!',
-    textLineThree:
-      'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur nihil voluptas ipsum labore? Eligendi et ipsam, repellat culpa porro a animi laudantium molestiae provident facere non tempora odit? Perferendis, assumenda.',
-    onSave: action('button-save'),
-    withLiveUpdates: true,
-    isHorizontal: true,
-    saveButtonProps: {
-      className: 'mt-4',
-      children: 'Save',
-    },
-    cancelButtonProps: {
-      className: 'mt-4 ml-4',
-      children: 'Cancel',
-    }
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof TextAndTitle>;
-
-export const Default: Story = {};

package/src/components/TextAndTitle/index.tsx

@@ -1,119 +0,0 @@
-import React, { useState } from 'react';
-
-import { type Props as buttonProps } from '@components/Button';
-import { ComponentWrapper } from '@components/ComponentWrapper';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface Props {
-  id: string;
-  className?: string;
-  title?: string;
-  description?: string;
-  bgColour?: Colours;
-  titleClasses?: string;
-  textClasses?: string;
-  textLineOne?: string;
-  textLineTwo?: string;
-  textLineThree?: string;
-  titleBold?: boolean;
-  textCenter?: boolean;
-  titleCenter?: boolean;
-  withLiveUpdates?: boolean;
-  onSave?: (arr: any[], id: string | undefined) => void;
-  saveButtonProps?: buttonProps;
-  cancelButtonProps?: buttonProps;
-  isHorizontal?: boolean;
-  children?: any;
-}
-
-export const TextAndTitle = ({
-  id,
-  className,
-  title,
-  description,
-  bgColour,
-  titleClasses,
-  textClasses,
-  textLineOne,
-  textLineTwo,
-  textLineThree,
-  titleBold,
-  textCenter,
-  titleCenter,
-  withLiveUpdates = false,
-  isHorizontal = true,
-  children,
-}: Props) => {
-  const [isInEditingMode, setIsInEditingMode] = useState(false);
-  const borderClasses = 'border-4 border-transparent';
-  const classList = classNames(className);
-
-  const titleClassList = classNames(
-    {
-      'font-bold': titleBold,
-      'text-center': titleCenter,
-      [borderClasses]: withLiveUpdates && !isInEditingMode && isHorizontal,
-    },
-    titleClasses,
-    'break-words text-lg font-light',
-  )
-
-  const textClassList = classNames(
-    {
-      'text-center': textCenter,
-      [borderClasses]: withLiveUpdates && !isInEditingMode && isHorizontal,
-    },
-    textClasses,
-    'mt-2 pt-2 text-md font-light',
-  )
-
-  const toggleEditState = (): void => {
-    withLiveUpdates && setIsInEditingMode(!isInEditingMode);
-  }
-
-  const wrapperClassList = classNames({
-    'flex flex-wrap justify-center md:items-center': isHorizontal,
-    'hover:border-4 hover:border-dashed': withLiveUpdates && !isInEditingMode,
-    'border-4 border-transparent': isHorizontal,
-  })
-
-  const titleWrapperClassList = classNames({
-    'md:w-1/2 md:text-center': isHorizontal,
-  })
-
-  const textWrapperClassList = classNames({
-    'md:w-1/2 md:text-center': isHorizontal,
-  })
-
-  return (
-    <ComponentWrapper
-      id={id}
-      className={classList}
-      title={title}
-      description={description}
-      bgColour={bgColour}
-    >
-      <div className={wrapperClassList} onClick={toggleEditState}>
-        <div className={titleWrapperClassList}>
-          {children !== undefined && children !== null ? (
-                children
-              ) : (
-            <h1 className={titleClassList}>{title}</h1>
-              )}
-        </div>
-        <div className={textWrapperClassList}>
-          <div id="textLineOne" className={textClassList}>
-            {textLineOne}
-          </div>
-          <div id="textLineTwo" className={textClassList}>
-            {textLineTwo}
-          </div>
-          <div id="textLineThree" className={textClassList}>
-            {textLineThree}
-          </div>
-        </div>
-      </div>
-    </ComponentWrapper>
-  );
-}

package/src/components/TextArea/TextArea.stories.tsx

@@ -1,55 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { TextArea } from '.';
-
-const meta = {
-  title: 'Components/Text Area',
-  component: TextArea,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-
-    label: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    placeholder: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    bold: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: '',
-      }
-    },
-    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: {
-    label: 'This is a label',
-    placeholder: 'This is a text area placeholder',
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof TextArea>;
-
-export const Default: Story = {};

package/src/components/TextArea/index.tsx

@@ -1,124 +0,0 @@
-import { useRef } from 'react';
-
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  autoComplete?: string;
-  disabled?: boolean;
-  formId?: string;
-  maxLength?: number;
-  minLength?: number;
-  required?: boolean;
-  readOnly?: boolean;
-  label?: string;
-  name?: string;
-  placeholder?: string;
-  withValidation?: boolean;
-  onChange?: (e: any) => void;
-  onBlur?: () => void;
-  onFocus?: () => void;
-  onClick?: () => void;
-  errors?: string[];
-  errorState?: boolean;
-  value?: string;
-  bgColour?: Colours;
-}
-
-export const TextArea = ({
-  id,
-  className,
-  autoComplete,
-  disabled,
-  formId,
-  maxLength,
-  minLength,
-  required = false,
-  readOnly,
-  label,
-  name,
-  placeholder,
-  onChange,
-  onBlur,
-  onFocus,
-  onClick,
-  withValidation,
-  errors,
-  errorState = false,
-  value,
-}: Props) => {
-  const newId = id !== undefined ? `-${id}` : '';
-
-  const valueClassList = classNames(
-    {
-      'border-2 border-error': errors != null || errorState,
-    },
-    'w-full rounded-md bg-white py-2 pl-4 text-ink cursor-pointer border border-black text-md',
-  )
-
-  const labelClassList = classNames(
-    {
-      'text-error': errors != null || errorState,
-    },
-    'text-error',
-  )
-
-  const headerClassList = classNames(
-    className,
-    'mt-4 w-full bg-white cursor-pointer',
-  )
-
-  const btnRef = useRef<any>(null);
-
-  const handleClick = (): void => {
-    btnRef.current?.focus();
-  }
-
-  return (
-    <>
-      <div id={id} className={headerClassList} onClick={handleClick}>
-        <div className="absolute -mt-3 ml-3 rounded-2xl bg-white px-1 text-sm font-regular">
-          <p className={labelClassList}>{label}</p>
-          {required && <p className="font-semiBold text-error">&nbsp;*</p>}
-        </div>
-        <textarea
-          ref={btnRef}
-          id={`input${newId}`}
-          className={valueClassList}
-          autoComplete={autoComplete}
-          disabled={disabled}
-          form={formId}
-          maxLength={maxLength}
-          minLength={minLength}
-          required={required}
-          readOnly={readOnly}
-          name={name}
-          value={value}
-          placeholder={placeholder}
-          onChange={(e) => {
-            onChange?.(e);
-          }}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          onClick={onClick}
-        />
-      </div>
-      {withValidation && (
-        <div id={`errors${newId}`} className="text-sm font-regular text-error">
-          {errors?.map((error, i) => {
-            return (
-              <p
-                key={`error-msg-${i + 0}`}
-                className="mt-1 border-l-4 border-error pl-3"
-              >
-                {error}
-              </p>
-            );
-          })}
-        </div>
-      )}
-    </>
-  );
-}

package/src/components/Timeline/Timeline.stories.tsx

@@ -1,92 +0,0 @@
-import { CardWithTopImage } from '@components/CardWithTopImage';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Timeline } from '.';
-import { type Props as imageProps } from '../Image';
-
-const timelineItems = (): Array<{
-  component: any;
-  centerImageProps: imageProps;
-}> => {
-  return new Array(8).fill(null).map((_, i) => {
-    return {
-      component: (
-        <CardWithTopImage
-          imageProps={{
-            src: `https://picsum.photos/200/20${i}`,
-            roundedFull: true,
-            width: 4,
-            height: 4,
-          }}
-          className="px-4"
-        >
-          <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>
-      ),
-      centerImageProps: {
-        src: `https://picsum.photos/200/20${i}`,
-        imageClasses: 'mx-auto',
-        width: 4,
-        height: 4,
-        centerAligned: true,
-        roundedFull: true,
-      }
-    }
-  })
-};
-
-const meta = {
-  title: 'Components/Timeline',
-  component: Timeline,
-  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?',
-    isHorizontal: true,
-    reverse: false,
-    items: timelineItems(),
-    textCenter: true,
-    useImages: true,
-    horizontalComponentClasses: 'w-96 h-96',
-    isSm: true,
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof Timeline>;
-
-export const Default: Story = {};