trepur_components 2.3.2 → 2.3.4

package/archive/Column/style.module.css

@@ -0,0 +1,151 @@
+.classList {
+  @apply h-full;
+}
+
+.size1 {
+  @apply w-1/12;
+}
+.size2 {
+  @apply w-2/12;
+}
+.size3 {
+  @apply w-3/12;
+}
+.size4 {
+  @apply w-4/12;
+}
+.size5 {
+  @apply w-5/12;
+}
+.size6 {
+  @apply w-6/12;
+}
+.size7 {
+  @apply w-7/12;
+}
+.size8 {
+  @apply w-8/12;
+}
+.size9 {
+  @apply w-9/12;
+}
+.size10 {
+  @apply w-10/12;
+}
+.size11 {
+  @apply w-11/12;
+}
+.size12 {
+  @apply w-full;
+}
+
+.mdSize1 {
+  @apply md:w-1/12;
+}
+.mdSize2 {
+  @apply md:w-2/12;
+}
+.mdSize3 {
+  @apply md:w-3/12;
+}
+.mdSize4 {
+  @apply md:w-4/12;
+}
+.mdSize5 {
+  @apply md:w-5/12;
+}
+.mdSize6 {
+  @apply md:w-6/12;
+}
+.mdSize7 {
+  @apply md:w-7/12;
+}
+.mdSize8 {
+  @apply md:w-8/12;
+}
+.mdSize9 {
+  @apply md:w-9/12;
+}
+.mdSize10 {
+  @apply md:w-10/12;
+}
+.mdSize11 {
+  @apply md:w-11/12;
+}
+.mdSize12 {
+  @apply md:w-full;
+}
+
+.lgSize1 {
+  @apply lg:w-1/12;
+}
+.lgSize2 {
+  @apply lg:w-2/12;
+}
+.lgSize3 {
+  @apply lg:w-3/12;
+}
+.lgSize4 {
+  @apply lg:w-4/12;
+}
+.lgSize5 {
+  @apply lg:w-5/12;
+}
+.lgSize6 {
+  @apply lg:w-6/12;
+}
+.lgSize7 {
+  @apply lg:w-7/12;
+}
+.lgSize8 {
+  @apply lg:w-8/12;
+}
+.lgSize9 {
+  @apply lg:w-9/12;
+}
+.lgSize10 {
+  @apply lg:w-10/12;
+}
+.lgSize11 {
+  @apply lg:w-11/12;
+}
+.lgSize12 {
+  @apply lg:w-full;
+}
+
+.xlSize1 {
+  @apply xl:w-1/12;
+}
+.xlSize2 {
+  @apply xl:w-2/12;
+}
+.xlSize3 {
+  @apply xl:w-3/12;
+}
+.xlSize4 {
+  @apply xl:w-4/12;
+}
+.xlSize5 {
+  @apply xl:w-5/12;
+}
+.xlSize6 {
+  @apply xl:w-6/12;
+}
+.xlSize7 {
+  @apply xl:w-7/12;
+}
+.xlSize8 {
+  @apply xl:w-8/12;
+}
+.xlSize9 {
+  @apply xl:w-9/12;
+}
+.xlSize10 {
+  @apply xl:w-10/12;
+}
+.xlSize11 {
+  @apply xl:w-11/12;
+}
+.xlSize12 {
+  @apply xl:w-full;
+}

package/archive/ComponentWrapper/ComponentWrapper.stories.tsx

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

package/archive/ComponentWrapper/index.tsx

@@ -0,0 +1,55 @@
+import React, { 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;
+}
+
+const ComponentWrapper = ({
+  id,
+  className,
+  title,
+  description,
+  bgColour = 'grey',
+  children,
+  styles,
+  withContainerPadding = true,
+}: Props): JSX.Element => {
+  const classList = classNames(
+    className,
+    style.classList,
+    style[bgColour],
+    'theme-local',
+  );
+  const containerClasses = classNames({
+    [style.containerPadding]: withContainerPadding,
+  });
+
+  return (
+    <div id={id} className={classList} style={styles}>
+      <Container withPadding className={containerClasses}>
+        <div className={style.heading}>
+          {title !== undefined && <h2 className={style.title}>{title}</h2>}
+          {description !== undefined && (
+            <p className={style.description}>{description}</p>
+          )}
+        </div>
+        {children}
+      </Container>
+    </div>
+  );
+};
+
+export default ComponentWrapper;

package/archive/ComponentWrapper/style.module.css

@@ -0,0 +1,40 @@
+.classList {
+  @apply mx-auto w-full;
+  scroll-margin-top: 80px;
+}
+
+.containerPadding {
+  @apply py-8;
+}
+
+.heading {
+  @apply pt-0;
+}
+
+.title {
+  @apply pb-2 text-lg font-regular;
+}
+
+.description {
+  @apply pb-8 text-md font-light;
+}
+
+.primary {
+  @apply bg-primary text-white;
+}
+
+.secondary {
+  @apply bg-secondary text-white;
+}
+
+.white {
+  @apply bg-white text-black;
+}
+
+.grey {
+  @apply bg-lightest-grey text-black;
+}
+
+.black {
+  @apply bg-black text-white;
+}

package/archive/Container/Container.stories.tsx

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

package/archive/Container/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  withPadding?: boolean;
+  children?: any;
+}
+
+const Container = ({ id, className, children }: Props): JSX.Element => {
+  const classList = classNames(className, style.classList, 'theme-local');
+
+  return (
+    <div id={id} className={classList}>
+      {children}
+    </div>
+  );
+};
+
+export default Container;

package/archive/Container/style.module.css

@@ -0,0 +1,4 @@
+.classList {
+  @apply px-6 md:px-10 lg:px-20;
+  max-width: 2520px;
+}

package/archive/Counter/Counter.stories.tsx

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

package/archive/Counter/index.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+
+import Icon from '@components/Icon';
+import classNames from 'classnames';
+
+
+
+export interface Props {
+  id?: string;
+  count?: number;
+
+  onClick?: (count: number) => void;
+}
+
+const Counter: React.FC<Props> = ({
+  id,
+  count = 0,
+  onClick,
+}: Props): JSX.Element => {
+  const [currentCount, setCurrentCount] = useState(
+    count !== undefined ? count : 0,
+  );
+
+  const handleMinusClick = (e: any): void => {
+    e.stopPropagation();
+    const newCount = currentCount - 1;
+    if (currentCount === 0) {
+      return;
+    }
+    setCurrentCount(newCount);
+    onClick?.(newCount);
+  };
+
+  const handlePlusClick = (e: any): void => {
+    e.stopPropagation();
+    const newCount = currentCount + 1;
+    setCurrentCount(newCount);
+    onClick?.(newCount);
+  };
+
+  return (
+    <div id={id} className={classNames(style.container, 'theme-local')}>
+      <div className={style.innerContainer}>
+        <div className={style.minusIconWrapper}>
+          <Icon
+            type="chevron-left"
+            onClick={(e: any) => {
+              handleMinusClick(e);
+            }}
+          />
+        </div>
+        <div className={style.count}>{currentCount}</div>
+        <div className={style.plusIconWrapper}>
+          <Icon
+            type="chevron-right"
+            onClick={(e: any) => {
+              handlePlusClick(e);
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Counter;

package/archive/Counter/style.module.css

@@ -0,0 +1,19 @@
+.container {
+  @apply z-10 inline-block rounded-lg border bg-white p-1;
+}
+
+.innerContainer {
+  @apply flex;
+}
+
+.count {
+  @apply w-auto overflow-hidden text-center;
+}
+
+.minusIconWrapper {
+  @apply my-auto cursor-pointer;
+}
+
+.plusIconWrapper {
+  @apply my-auto cursor-pointer;
+}

package/archive/DetailUpdater/DetailUpdater.stories.tsx

@@ -0,0 +1,96 @@
+import Input from '@components/Input';
+import { action } from '@storybook/addon-actions';
+import { Meta, 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) => {
+      action('Submitted')(fieldValues);
+    },
+    onChange: (value) => {
+      action('Updated')(value);
+    },
+    children: (
+      <Input
+        withValidation
+        bgColour="white"
+        label="Title"
+        placeholder="Insert title here"
+        className="mb-4"
+        fullWidth={true}
+        required={true}
+        // onChange={(e) => setTitle(e.target.value)}
+      />
+    ),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/DetailUpdater/index.tsx

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+
+import Button from '@components/Button';
+import classNames from 'classnames';
+import 'keen-slider/keen-slider.min.css';
+
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  title: string;
+  description?: string;
+  expandText: string;
+  collapseText: string;
+  ctaText: string;
+  onClick?: (fieldValues: any) => void;
+  onChange?: (fieldValues: any) => void;
+
+  children: React.ReactNode;
+  onSubmit?: () => void;
+  onCancel?: () => void;
+  value?: string;
+}
+
+const DetailUpdater: React.FC<Props> = ({
+  id,
+  className,
+  title,
+  description,
+  expandText,
+  collapseText,
+  ctaText,
+  onClick,
+  onChange,
+  children,
+  onSubmit,
+  onCancel,
+  value,
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const classList = classNames(className, style.classList, 'theme-local');
+
+  const handleSubmit = (): void => {
+    onSubmit?.();
+    setExpanded(false);
+  };
+  // const handleChange = (e: any): void => {
+  //   const value = e.target.value
+  //   const id = e.target.id
+
+  //   const newFieldValues = fieldValues.map((fieldValue) => {
+  //     return fieldValue.id !== id.split('-')[1]
+  //       ? fieldValue
+  //       : { ...fieldValue, value }
+  //   })
+
+  //   onChange?.(newFieldValues)
+
+  //   setFieldValues(newFieldValues)
+  // }
+
+  // const handleSubmit = (): void => {
+  //   onClick?.(fieldValues)
+  //   setState(false)
+  // }
+
+  return (
+    <div id={id} className={classList}>
+      {!expanded && (
+        <div className={style.class}>
+          <div className={style.wrapper}>
+            <p className={style.title}>{title}</p>
+            <p
+              className={style.expandText}
+              onClick={() => {
+                setExpanded(true);
+              }}
+            >
+              {expandText}
+            </p>
+          </div>
+          <p className={style.value}>{value !== undefined ? value : '-'}</p>
+        </div>
+      )}
+      {expanded && (
+        <div className={style.class}>
+          <div className={style.wrapper}>
+            <p className={style.title}>{title}</p>
+            <p
+              className={style.expandText}
+              onClick={() => {
+                onCancel?.();
+                setExpanded(false);
+              }}
+            >
+              {collapseText}
+            </p>
+          </div>
+          <p className={style.description}>{description}</p>
+          <div className={style.inputWrapper}>{children}</div>
+          <Button variant="secondary" onClick={handleSubmit}>
+            {ctaText}
+          </Button>
+        </div>
+      )}
+      <hr className={style.hr} />
+    </div>
+  );
+};
+
+export default DetailUpdater;

package/archive/DetailUpdater/style.module.css

@@ -0,0 +1,31 @@
+.class {
+  @apply mx-4 py-6;
+}
+
+.wrapper {
+  @apply flex justify-between;
+}
+
+.title {
+  @apply font-semiBold text-ink;
+}
+
+.value {
+  @apply text-ink;
+}
+
+.description {
+  @apply text-light-grey;
+}
+
+.expandText {
+  @apply cursor-pointer font-semiBold text-ink underline;
+}
+
+.inputWrapper {
+  @apply grid w-full grid-cols-1 gap-0 py-4 md:grid-cols-2 md:gap-4 lg:w-2/3;
+}
+
+.hr {
+  @apply text-lightest-grey shadow;
+}