trepur_components 2.3.8 → 2.3.9

package/src/components/Testimonial/index.tsx

@@ -1,55 +1,123 @@
-import { Container } from '@components/Container';
-import { Image, type Props as imageProps } from '@components/Image';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  text?: string;
-  imageProps?: imageProps;
-  companyName?: string;
-  position?: string;
-  date?: string;
-  positionStartDate?: string;
-  positionEndDate?: string;
-  authorsName?: string;
-  authorsPosition?: string;
-}
-
-export const Testimonial = ({
-  id,
-  className,
-  text,
-  imageProps,
-  companyName,
-  position,
-  date,
-  positionStartDate,
-  positionEndDate,
-  authorsName,
-  authorsPosition,
-}: Props) => {
-  const classList = classNames(className, 'text-center');
-  const src = imageProps?.src !== undefined ? imageProps?.src : '';
-
-  return (
-    <div id={id} className={classList}>
-      <Container withPadding>
-        <div className="mx-auto">
-          <Image src={src} {...imageProps} />
-        </div>
-        <div>
-          <h3 className="text-lg font-medium">{companyName}</h3>
-          <p className="pt-2 text-md font-regular">{position}</p>
-          <p className="text-sm font-regular">
-            {positionStartDate} - {positionEndDate}
-          </p>
-          <p className="py-4 text-md font-light">{text}</p>
-          <p className="text-sm font-medium">
-            {authorsName} - {authorsPosition}: {date}
-          </p>
-        </div>
-      </Container>
+import { forwardRef, HTMLAttributes } from 'react';
+
+import { Card } from '../';
+import { Image, ImageProps } from '@components/Image';
+import clsx from 'clsx';
+
+const TestimonialComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <Card ref={ref} className={clsx('grid gap-4', className)} {...props}>
+      {children}
+    </Card>
+  );
+});
+
+const TestimonialImage = forwardRef<
+  HTMLImageElement,
+  HTMLAttributes<HTMLImageElement> & ImageProps
+>(({ className, src, ...props }, ref) => {
+  return (
+    <div ref={ref} className="mx-auto w-40 ">
+      <Image className="rounded-full" src={src} {...props} />
     </div>
   );
-}
+});
+
+const TestimonialTitle = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <h3 ref={ref} className="text-center text-lg font-medium" {...props}>
+      {children}
+    </h3>
+  );
+});
+
+const TestimonialSection = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <div ref={ref} className={clsx('text-center', className)} {...props}>
+      {children}
+    </div>
+  );
+});
+
+const TestimonialPosition = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <p
+      ref={ref}
+      className={clsx('text-md font-regular text-sm', className)}
+      {...props}
+    >
+      {children}
+    </p>
+  );
+});
+
+const TestimonialDate = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <p ref={ref} className="font-regular text-sm" {...props}>
+      {children}
+    </p>
+  );
+});
+
+const TestimonialText = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <p className={clsx('text-md text-center font-light')} {...props}>
+      {children}
+    </p>
+  );
+});
+
+const TestimonialAuthorDetails = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <p
+      ref={ref}
+      className={clsx('text-center text-sm font-medium', className)}
+      {...props}
+    >
+      {children}
+    </p>
+  );
+});
+
+TestimonialComponent.displayName = 'Testimonial';
+
+TestimonialImage.displayName = 'Testimonial.Image';
+TestimonialTitle.displayName = 'Testimonial.Title';
+TestimonialSection.displayName = 'Testimonial.Section';
+TestimonialPosition.displayName = 'Testimonial.Position';
+TestimonialDate.displayName = 'Testimonial.Date';
+TestimonialText.displayName = 'Testimonial.Text';
+TestimonialAuthorDetails.displayName = 'Testimonial.AuthorDetails';
+
+const Testimonial = Object.assign(TestimonialComponent, {
+  Image: TestimonialImage,
+  Title: TestimonialTitle,
+  Section: TestimonialSection,
+  Position: TestimonialPosition,
+  Date: TestimonialDate,
+  Text: TestimonialText,
+  AuthorDetails: TestimonialAuthorDetails,
+});
+
+export { Testimonial };

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

@@ -1,52 +1,21 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { TextArea } from '.';
 
 const meta = {
-  title: 'Components/Text Area',
+  title: 'V2Components/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',
-  }
-}
+    children: [
+      <TextArea.Item>
+        <TextArea.Label required>This is a label</TextArea.Label>
+        <TextArea.Box />
+        <TextArea.Validation />
+      </TextArea.Item>,
+    ],
+  },
+} satisfies Meta<typeof TextArea>;
 
 export default meta;
 

package/src/components/TextArea/index.tsx

@@ -1,19 +1,26 @@
-import { useRef } from 'react';
+import {
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useContext,
+  useMemo,
+  useRef,
+} from 'react';
 
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
-export interface Props {
-  id?: string;
-  className?: string;
+export interface TextAreaContextProps {
   autoComplete?: string;
   disabled?: boolean;
   formId?: string;
+  height?: string;
   maxLength?: number;
   minLength?: number;
+  pattern?: string;
   required?: boolean;
   readOnly?: boolean;
   label?: string;
+  type?: string;
   name?: string;
   placeholder?: string;
   withValidation?: boolean;
@@ -22,103 +29,105 @@ export interface Props {
   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 TextAreaContext = createContext<TextAreaContextProps | null>(null);
 
-  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 TextAreaComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & TextAreaContextProps
+>(({ children, errors, placeholder, ...props }, ref) => {
+  const state = useMemo(
+    () => ({
+      errors,
+      placeholder,
+      ...props,
+    }),
+    [errors, props],
+  );
+  return (
+    <TextAreaContext.Provider value={state}>
+      <div ref={ref}>{children}</div>
+    </TextAreaContext.Provider>
+  );
+});
 
-  const labelClassList = classNames(
-    {
-      'text-error': errors != null || errorState,
-    },
-    'text-error',
-  )
+const TextAreaItem = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ children, ...props }, ref) => {
+    const btnRef = useRef<any>(null);
+    return (
+      <div
+        className="mt-4 w-full cursor-pointer bg-white"
+        onClick={() => btnRef.current?.focus()}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
 
-  const headerClassList = classNames(
-    className,
-    'mt-4 w-full bg-white cursor-pointer',
-  )
+const TextAreaLabel = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & { required?: boolean }
+>(({ children, required = false }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className="font-regular absolute -mt-3 ml-3 flex rounded-2xl bg-white px-1 text-sm "
+    >
+      <p>{children}</p>
+      {required && (
+        <p className="font-semiBold text-lg text-error-default">&nbsp;*</p>
+      )}
+    </div>
+  );
+});
 
-  const btnRef = useRef<any>(null);
+const TextAreaBox = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ ...props }) => {
+    const { errors, placeholder } = useContext(TextAreaContext) || {};
 
-  const handleClick = (): void => {
-    btnRef.current?.focus();
-  }
+    return (
+      <textarea
+        className="text-ink text-md w-full cursor-pointer rounded-md border border-black bg-white py-2 pl-4"
+        placeholder={placeholder}
+      />
+    );
+  },
+);
 
+const TextAreaValidation = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ children, ...props }, ref) => {
+  const { errors } = useContext(TextAreaContext) || {};
   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>
-      )}
-    </>
+    <div
+      ref={ref}
+      className="font-regular gap-y-2 text-sm text-error-default"
+      {...props}
+    >
+      {errors?.map((error, i) => {
+        return <p key={`error-msg-${i + 1}`}>{error}</p>;
+      })}
+    </div>
   );
-}
+});
+
+TextAreaComponent.displayName = 'TextArea';
+TextAreaItem.displayName = 'TextArea.Item';
+TextAreaLabel.displayName = 'TextArea.Label';
+TextAreaBox.displayName = 'TextArea.Box';
+TextAreaValidation.displayName = 'TextArea.Validation';
+
+const TextArea = Object.assign(TextAreaComponent, {
+  Item: TextAreaItem,
+  Label: TextAreaLabel,
+  Box: TextAreaBox,
+  Validation: TextAreaValidation,
+});
+
+export { TextArea };

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

@@ -1,89 +1,42 @@
-import { CardWithTopImage } from '@components/CardWithTopImage';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
+import { items } from '@components/Accordion/const';
+import { Collapsible } from '@components/Collapsible';
+import { Meta, StoryObj } from '@storybook/react';
 
 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',
+  title: 'V2Components/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,
-  }
-}
+    children: items.map((item, i) => {
+      return (
+        <Timeline.Item>
+          <Timeline.Dot
+            className="bg-primary"
+            index={i}
+            length={items.length}
+          />
+          <Timeline.Content>
+            <Collapsible>
+              <Collapsible.Header>
+                {item.image && <Collapsible.Image src={item.image} />}
+                <Collapsible.HeaderContent>
+                  <Collapsible.Label>{item.label}</Collapsible.Label>
+                  <Collapsible.Title>{item.title}</Collapsible.Title>
+                  <Collapsible.Subtitle>{item.subtitle}</Collapsible.Subtitle>
+                </Collapsible.HeaderContent>
+              </Collapsible.Header>
+              <Collapsible.Content>
+                <Collapsible.Text>{item.content}</Collapsible.Text>
+              </Collapsible.Content>
+            </Collapsible>
+          </Timeline.Content>
+        </Timeline.Item>
+      );
+    }),
+  },
+} satisfies Meta<typeof Timeline>;
 
 export default meta;