trepur_components 2.3.7 → 2.3.9

package/src/components/Testimonial/index.tsx

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

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { TextArea } from '.';
+
+const meta = {
+  title: 'V2Components/Text Area',
+  component: TextArea,
+  args: {
+    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;
+
+type Story = StoryObj<typeof TextArea>;
+
+export const Default: Story = {};

package/src/components/TextArea/index.tsx

@@ -0,0 +1,133 @@
+import {
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useContext,
+  useMemo,
+  useRef,
+} from 'react';
+
+import clsx from 'clsx';
+
+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;
+  onChange?: (e: any) => void;
+  onBlur?: () => void;
+  onFocus?: () => void;
+  onClick?: () => void;
+  errors?: string[];
+  value?: string;
+}
+
+const TextAreaContext = createContext<TextAreaContextProps | null>(null);
+
+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 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 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 TextAreaBox = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ ...props }) => {
+    const { errors, placeholder } = useContext(TextAreaContext) || {};
+
+    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
+      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

@@ -0,0 +1,45 @@
+import { items } from '@components/Accordion/const';
+import { Collapsible } from '@components/Collapsible';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Timeline } from '.';
+
+const meta = {
+  title: 'V2Components/Timeline',
+  component: Timeline,
+  parameters: {},
+  args: {
+    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;
+
+type Story = StoryObj<typeof Timeline>;
+
+export const Default: Story = {};

package/src/components/Timeline/index.tsx

@@ -0,0 +1,65 @@
+import { forwardRef, HTMLAttributes } from 'react';
+
+import clsx from 'clsx';
+
+const TimelineComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ id, className, children }, ref) => {
+  return (
+    <div ref={ref} id={id} className={className}>
+      {children}
+    </div>
+  );
+});
+
+const TimelineItem = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ id, children }, ref) => {
+    return (
+      <div ref={ref} id={id} className="flex">
+        {children}
+      </div>
+    );
+  },
+);
+
+const TimelineDot = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & { index: number; length: number }
+>(({ className, index, length }) => {
+  return (
+    <div className="hidden sm:block">
+      <p
+        className={clsx('z-10 m-auto mt-12 h-4 w-4 rounded-full', className)}
+      />
+      <div
+        className={
+          index !== length - 1
+            ? clsx('m-auto h-full w-1', className)
+            : 'border-r-2 border-transparent'
+        }
+      />
+    </div>
+  );
+});
+
+const TimelineContent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ children }) => {
+  return <div className="my-2 w-full sm:ml-8">{children}</div>;
+});
+
+TimelineComponent.displayName = 'Timeline';
+
+TimelineItem.displayName = 'Timeline.Item';
+TimelineDot.displayName = 'Timeline.Dot';
+TimelineContent.displayName = 'Timeline.Content';
+
+const Timeline = Object.assign(TimelineComponent, {
+  Item: TimelineItem,
+  Dot: TimelineDot,
+  Content: TimelineContent,
+});
+
+export { Timeline };

package/src/components/Tubestops/Tubestops.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Tubestops } from '.';
+
+const meta = {
+  title: 'V2Components/Tubestops',
+  component: Tubestops,
+  args: {
+    activeStop: 3,
+    children: [...Array(5)].map((_, i) => (
+      <Tubestops.Stop stopId={i + 1}>
+        <Tubestops.Text>{`Stop ${i + 1}`}</Tubestops.Text>
+      </Tubestops.Stop>
+    )),
+  },
+} satisfies Meta<typeof Tubestops>;
+
+export default meta;
+
+type Story = StoryObj<typeof Tubestops>;
+
+export const Default: Story = {};

package/src/components/Tubestops/index.tsx

@@ -0,0 +1,132 @@
+import {
+  Children,
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+
+import clsx from 'clsx';
+
+export interface TubestopsContextProps {
+  stops?: number;
+  activeStop?: number;
+  currentStop?: number;
+  setCurrentStop?: (stop: number) => void;
+}
+
+interface TubestopsStopContextProps {
+  stopNumber: number;
+}
+
+const TubestopsContext = createContext<TubestopsContextProps | null>(null);
+const TubestopsStopContext = createContext<TubestopsStopContextProps | null>(
+  null,
+);
+
+const TubestopsComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & TubestopsContextProps
+>(({ className, children, activeStop = 0 }, ref) => {
+  const [currentStop, setCurrentStop] = useState(activeStop);
+  const totalStops = Children.count(children);
+
+  const state = useMemo(
+    () => ({
+      stops: totalStops ?? 0,
+      currentStop,
+      setCurrentStop,
+    }),
+    [currentStop, setCurrentStop],
+  );
+
+  return (
+    <TubestopsContext.Provider value={state}>
+      <div ref={ref} className={clsx('flex py-4', className)}>
+        {children}
+      </div>
+    </TubestopsContext.Provider>
+  );
+});
+
+const TubestopsStop = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & { stopId: number }
+>(({ className, stopId = 0, children }, ref) => {
+  const { currentStop = 0, stops = 0 } = useContext(TubestopsContext) || {};
+  const [stopNumber] = useState(stopId);
+
+  const state = useMemo(
+    () => ({
+      stopNumber,
+    }),
+    [stopNumber],
+  );
+
+  return (
+    <TubestopsStopContext.Provider value={state}>
+      <div ref={ref} className={clsx(className, 'w-full min-w-[120px]')}>
+        <div
+          className={clsx({
+            'mt-4 h-1 w-full translate-x-1/2 bg-tubestop-line-future':
+              stopId >= currentStop && stopId < stops,
+            'mt-4 h-1 w-full translate-x-1/2 bg-tubestop-line-complete':
+              stopId < currentStop && stopId < stops,
+          })}
+        />
+        <p
+          className={clsx(
+            {
+              'relative z-20 -mt-4 bg-tubestop-station-complete':
+                stopId < currentStop,
+              'relative z-20 -mt-4 bg-tubestop-station-active':
+                currentStop === stopId,
+              'relative z-20 -mt-4 bg-tubestop-station-future':
+                stopId > currentStop,
+              'mt-1': stopId === stops,
+            },
+            'z-10 mx-auto h-6 w-6 rounded-full',
+          )}
+        />
+        {children}
+      </div>
+    </TubestopsStopContext.Provider>
+  );
+});
+
+const TubestopsText = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ className, children }, ref) => {
+  const { currentStop = 0 } = useContext(TubestopsContext) || {};
+  const { stopNumber = 0 } = useContext(TubestopsStopContext) || {};
+  return (
+    <p
+      ref={ref}
+      className={clsx(
+        'mt-2 text-center',
+        {
+          'font-medium text-tubestop-text-complete': stopNumber < currentStop,
+          'font-bold text-tubestop-text-active': currentStop === stopNumber,
+          'font-medium text-tubestop-text-future': stopNumber > currentStop,
+        },
+        className,
+      )}
+    >
+      {children}
+    </p>
+  );
+});
+
+TubestopsComponent.displayName = 'Tubestop';
+TubestopsStop.displayName = 'Tubestops.Stop';
+TubestopsText.displayName = 'Tubestops.Text';
+
+const Tubestops = Object.assign(TubestopsComponent, {
+  Stop: TubestopsStop,
+  Text: TubestopsText,
+});
+
+export { Tubestops };

package/src/components/Video/Video.stories.tsx

@@ -0,0 +1,58 @@
+import { Video } from './';
+import { Meta, StoryObj } from '@storybook/react';
+
+import Mp4File from './assets/example.mp4';
+import WebmFile from './assets/example.webm';
+
+const meta = {
+  title: 'V2Components/Video',
+  component: Video,
+  args: {
+    children: [<Video.File src={WebmFile} type="video/webm" />],
+  },
+} satisfies Meta<typeof Video>;
+
+export default meta;
+
+type Story = StoryObj<typeof Video>;
+
+export const Default: Story = {};
+
+export const Mp4: Story = {
+  ...Default,
+  args: {
+    children: [<Video.File src={Mp4File} type="video/mp4" />],
+  },
+};
+
+export const withControls: Story = {
+  ...Default,
+  args: {
+    withControls: true,
+    children: [<Video.File src={Mp4File} type="video/mp4" />],
+  },
+};
+
+export const Muted: Story = {
+  ...Default,
+  args: {
+    muted: true,
+    children: [<Video.File src={Mp4File} type="video/mp4" />],
+  },
+};
+
+export const autoPlay: Story = {
+  ...Default,
+  args: {
+    autoPlay: true,
+    children: [<Video.File src={Mp4File} type="video/mp4" />],
+  },
+};
+
+export const withPoster: Story = {
+  ...Default,
+  args: {
+    withPoster: true,
+    children: [<Video.File src={Mp4File} type="video/mp4" />],
+  },
+};

package/src/components/Video/index.tsx

@@ -0,0 +1,92 @@
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface VideoProps {
+  autoPlay?: boolean;
+  muted?: boolean;
+  poster?: string;
+  mp4File?: string;
+  webmFile?: string;
+  withControls?: boolean;
+  withPoster?: boolean;
+}
+
+const VideoComponent = forwardRef<
+  HTMLVideoElement,
+  HTMLAttributes<HTMLVideoElement> & VideoProps
+>(
+  (
+    {
+      children,
+      poster,
+      withControls = false,
+      autoPlay = false,
+      muted = false,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <video
+        className="h-full w-full max-w-[800px]"
+        ref={ref}
+        poster={poster}
+        controls={withControls}
+        autoPlay={autoPlay}
+        muted={muted}
+        {...props}
+      >
+        {children}
+      </video>
+    );
+  },
+);
+
+const VideoFile = forwardRef<
+  HTMLSourceElement,
+  HTMLAttributes<HTMLSourceElement> & {
+    src: string;
+    type: 'video/mp4' | 'video/webm' | 'video/ogv';
+  }
+>(({ src, type, ...props }, ref) => {
+  return <source ref={ref} src={src} type={type} {...props} />;
+});
+
+VideoComponent.displayName = 'Video';
+VideoFile.displayName = 'Video.File';
+
+const Video = Object.assign(VideoComponent, {
+  File: VideoFile,
+});
+
+export { Video };
+
+// export const Video = ({
+//   id,
+//   className,
+//   autoPlay,
+//   muted,
+//   poster,
+//   mp4File,
+//   webmFile,
+//   ogvFile,
+//   height,
+//   width,
+//   withControls,
+// }: Props) => {
+//   return (
+//     <video
+//       id={id}
+//       className={className}
+//       poster={poster}
+//       width={width}
+//       height={height}
+//       controls={withControls}
+//       autoPlay={autoPlay}
+//       muted={muted}
+//     >
+//       <source src={mp4File} type="video/mp4" />
+//       {webmFile !== null && <source src={webmFile} type="video/webm" />}
+//       {ogvFile !== undefined && <source src={ogvFile} type="video/ogg" />}
+//     </video>
+//   );
+// }