trepur_components 2.3.7 → 2.3.9

package/archive/TextAndTitle/index.tsx

@@ -1,123 +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;
-}
-
-const TextAndTitle: React.FC<Props> = ({
-  id,
-  className,
-  title,
-  description,
-  bgColour,
-  titleClasses,
-  textClasses,
-  textLineOne,
-  textLineTwo,
-  textLineThree,
-  titleBold,
-  textCenter,
-  titleCenter,
-  withLiveUpdates = false,
-  isHorizontal = true,
-  children,
-}: Props): JSX.Element => {
-  const [isInEditingMode, setIsInEditingMode] = useState(false);
-  const borderClasses = style.bordered;
-  const classList = classNames(className, 'theme-local');
-
-  const titleClassList = classNames(
-    {
-      [style.fontBold]: titleBold,
-      [style.textCenter]: titleCenter,
-      [borderClasses]: withLiveUpdates && !isInEditingMode && isHorizontal,
-    },
-    titleClasses,
-    style.titleClassList,
-  );
-
-  const textClassList = classNames(
-    {
-      [style.textCenter]: textCenter,
-      [borderClasses]: withLiveUpdates && !isInEditingMode && isHorizontal,
-    },
-    textClasses,
-    style.textClassList,
-  );
-
-  const toggleEditState = (): void => {
-    withLiveUpdates && setIsInEditingMode(!isInEditingMode);
-  };
-
-  const wrapperClassList = classNames({
-    [style.horizontalWrapperClassList]: isHorizontal,
-    [style.liveUpdatesWrapperClassList]: withLiveUpdates && !isInEditingMode,
-    [style.wrapperClassList]: isHorizontal,
-  });
-
-  const titleWrapperClassList = classNames({
-    [style.horizontalTitleWrapperClassList]: isHorizontal,
-  });
-
-  const textWrapperClassList = classNames({
-    [style.horizontalTextWrapperClassList]: 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>
-  );
-};
-
-export default TextAndTitle;

package/archive/TextAndTitle/style.module.css

@@ -1,75 +0,0 @@
-.primary {
-  @apply bg-primary text-white;
-}
-
-.primary:hover {
-  @apply border-white;
-}
-
-.secondary {
-  @apply bg-secondary text-white;
-}
-
-.secondary:hover {
-  @apply border-white;
-}
-
-.white {
-  @apply bg-white;
-}
-
-.white:hover {
-  @apply border-black;
-}
-
-.black {
-  @apply bg-black text-white;
-}
-
-.black:hover {
-  @apply border-white;
-}
-
-.bordered {
-  @apply border-4 border-transparent;
-}
-
-.fontBold {
-  @apply font-bold;
-}
-
-.textCenter {
-  @apply text-center;
-}
-
-.titleClassList {
-  @apply break-words text-lg font-light;
-}
-
-.textClassList {
-  @apply mt-2 pt-2 text-md font-light;
-}
-
-.wrapperClassList {
-  @apply border-4 border-transparent;
-}
-
-.horizontalWrapperClassList {
-  @apply flex flex-wrap justify-center md:items-center;
-}
-
-.liveUpdatesWrapperClassList:hover {
-  @apply border-4 border-dashed;
-}
-
-.horizontalTextWrapperClassList {
-  @apply md:w-1/2 md:text-center;
-}
-
-.horizontalTitleWrapperClassList {
-  @apply md:w-1/2 md:text-center;
-}
-
-.buttonWrapper {
-  @apply pb-8 text-center;
-}

package/archive/TextArea/TextArea.stories.tsx

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

package/archive/TextArea/index.tsx

@@ -1,125 +0,0 @@
-import React, { 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;
-}
-
-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): JSX.Element => {
-  const newId = id !== undefined ? `-${id}` : '';
-
-  const valueClassList = classNames(
-    {
-      [style.errorState]: errors != null || errorState,
-    },
-    style.value,
-  );
-
-  const labelClassList = classNames(
-    {
-      [style.labelError]: errors != null || errorState,
-    },
-    style.label,
-  );
-
-  const headerClassList = classNames(style.classList, className, 'theme-local');
-
-  const btnRef = useRef<any>(null);
-
-  const handleClick = (): void => {
-    btnRef.current?.focus();
-  };
-
-  return (
-    <>
-      <div id={id} className={headerClassList} onClick={handleClick}>
-        <div className={style.labelWrapper}>
-          <p className={labelClassList}>{label}</p>
-          {required && <p className={style.required}>&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={classNames(style.errors, 'theme-local')}
-        >
-          {errors?.map((error, i) => {
-            return (
-              <p key={`error-msg-${i + 0}`} className={style.errorText}>
-                {error}
-              </p>
-            );
-          })}
-        </div>
-      )}
-    </>
-  );
-};
-
-export default TextArea;

package/archive/TextArea/style.module.css

@@ -1,60 +0,0 @@
-.classList {
-  @apply mt-4 w-full bg-white;
-  @apply cursor-pointer;
-}
-
-/* .classList:active p {
-    @apply hidden;
-} 
-
-.classList:active .value {
-    @apply pt-3 pb-4;
-}  */
-
-.fullWidth {
-  @apply w-full;
-}
-
-.notFullWidth {
-  @apply sm:w-72;
-}
-
-.labelWrapper {
-  @apply absolute -mt-3 ml-3 px-1;
-  @apply rounded-2xl bg-white text-sm font-regular;
-}
-
-.required {
-  @apply font-semiBold text-error;
-}
-
-.value {
-  @apply w-full rounded-md bg-white py-2 pl-4 text-ink;
-  @apply cursor-pointer;
-  @apply border border-black;
-  @apply text-md;
-}
-
-/* .value:focus {
-    @apply pt-3 pb-4;
-}
-
-.value:focus ~ label {
-    @apply text-xl;
-} */
-
-.errors {
-  @apply text-sm font-regular text-error;
-}
-
-.errorState {
-  @apply border-2 border-error;
-}
-
-.labelError {
-  @apply text-error;
-}
-
-.errorText {
-  @apply mt-1 border-l-4 border-error pl-3;
-}

package/archive/Timeline/Timeline.stories.tsx

@@ -1,92 +0,0 @@
-import CardWithTopImage from '@components/CardWithTopImage';
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Timeline from '.';
-import { type Props as imageProps } from '../Image';
-
-const timelineItems = (): Array<{
-  component: JSX.Element;
-  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 meta>;
-
-export const Default: Story = {};