trepur_components 2.3.3 → 2.3.4

package/archive/TextAndTitle/TextAndTitle.stories.tsx

@@ -0,0 +1,70 @@
+import Greeting from '@components/Greeting';
+import { action } from '@storybook/addon-actions';
+import { Meta, 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 meta>;
+
+export const Default: Story = {};

package/archive/TextAndTitle/index.tsx

@@ -0,0 +1,123 @@
+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

@@ -0,0 +1,75 @@
+.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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,125 @@
+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

@@ -0,0 +1,60 @@
+.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

@@ -0,0 +1,92 @@
+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 = {};