trepur_components 2.3.8 → 2.3.9

package/src/components/Timeline/index.tsx

@@ -1,256 +1,65 @@
-import { Column } from '@components/Column';
-import { ComponentWrapper } from '@components/ComponentWrapper';
-import { Image } from '@components/Image';
-import { Row } from '@components/Row';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
+import { forwardRef, HTMLAttributes } from 'react';
 
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  description?: string;
-  bgColour?: Colours;
-  isHorizontal?: boolean;
-  items?: object[];
-  reverse?: boolean;
-  textCenter?: boolean;
-  useImages?: boolean;
-  horizontalComponentClasses?: string;
-  isSm?: boolean;
-}
+import clsx from 'clsx';
 
-export const Timeline = ({
-  id,
-  className,
-  title,
-  description,
-  bgColour,
-  isHorizontal = false,
-  items,
-  reverse = false,
-  textCenter,
-  useImages = true,
-  horizontalComponentClasses,
-  isSm = false,
-}: Props) => {
-  const classList = classNames(className, 'w-full list-none pb-4');
-  const ulClasses = classNames(
-    {
-      'flex-row justify-between none-reverse': !reverse && isHorizontal,
-      'flex-col none-reverse': !reverse && !isHorizontal,
-      'flex-row justify-between reverse': reverse && isHorizontal,
-      'flex-col reverse': reverse && !isHorizontal,
-    },
-    className,
-    'relative flex list-none pl-0 status-flow timeline',
-  )
-
-  const liClasses = classNames(
-    {
-      'text-center': textCenter,
-      'flex-col items-center justify-between': !reverse && isHorizontal,
-      'flex-row none-reverse': !reverse && !isHorizontal,
-      'flex-col-reverse items-center': reverse && isHorizontal,
-      'flex-row-reverse': reverse && !isHorizontal,
-    },
-    'relative flex flex-auto flex-row leading-tight status-flow-item',
-  )
+const TimelineComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ id, className, children }, ref) => {
+  return (
+    <div ref={ref} id={id} className={className}>
+      {children}
+    </div>
+  );
+});
 
-  const circle = classNames(
-    {
-      'horizontal collapse': isHorizontal && isSm,
-      horizontal: isHorizontal && !isSm,
-      vertical: !isHorizontal,
-    },
-    'mx-auto my-16 h-4 w-4 rounded-full border bg-black text-center',
-  )
+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 (
-    <ComponentWrapper
-      id={id}
-      className={classList}
-      title={title}
-      description={description}
-      bgColour={bgColour}
-    >
-      <div className={ulClasses}>
-        {items?.map((item: any, i: number) => {
-          let before;
-          if (i % 2 === 0) {
-            before = true;
-          } else {
-            before = false;
-          }
-
-          let circlePos;
-          if (items.length - 1 > 0) {
-            if (i === 0) circlePos = 'first-circle';
-            else if (i === items.length - 1) circlePos = 'last-circle';
-            else circlePos = 'circle';
-          }
+    <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>
+  );
+});
 
-          let verticalCircleStylesBefore;
-          if (circlePos === 'circle' && isSm) {
-            verticalCircleStylesBefore =
-              'absolute top-0 block h-1/2 border-2 border-solid border-primary';
-          } else if (circlePos === 'circle' && !isSm) {
-            verticalCircleStylesBefore =
-              'absolute top-0 block h-1/2 border-2 border-solid border-primary';
-          } else if (circlePos === 'last-circle' && isSm) {
-            verticalCircleStylesBefore =
-              'absolute top-0 block h-1/2 border-2 border-solid border-primary';
-          } else if (circlePos === 'last-circle' && !isSm) {
-            verticalCircleStylesBefore =
-              'absolute top-0 block h-1/2 border-2 border-solid border-primary';
-          }
+const TimelineContent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ children }) => {
+  return <div className="my-2 w-full sm:ml-8">{children}</div>;
+});
 
-          let verticalCircleStylesAfter;
-          if (circlePos === 'circle' && isSm) {
-            verticalCircleStylesAfter =
-              'absolute bottom-0 block h-1/2 border-2 border-solid border-primary';
-          } else if (circlePos === 'circle' && !isSm) {
-            verticalCircleStylesAfter =
-              'absolute bottom-0 block h-1/2 border-2 border-solid border-primary';
-          } else if (circlePos === 'first-circle' && isSm) {
-            verticalCircleStylesAfter =
-              'absolute bottom-0 block h-1/2 border-2 border-solid border-primary';
-          } else if (circlePos === 'first-circle' && !isSm) {
-            verticalCircleStylesAfter =
-              'absolute bottom-0 block h-1/2 border-2 border-solid border-primary';
-          }
+TimelineComponent.displayName = 'Timeline';
 
-          let horizontalCircleStylesBefore;
-          if (circlePos === 'circle' && isSm) {
-            horizontalCircleStylesBefore = '';
-          } else if (circlePos === 'circle' && !isSm) {
-            horizontalCircleStylesBefore =
-              'absolute top-1/2 block border-2 border-solid border-primary';
-          } else if (circlePos === 'last-circle' && isSm) {
-            horizontalCircleStylesBefore = '';
-          } else if (circlePos === 'last-circle' && !isSm) {
-            horizontalCircleStylesBefore =
-              'absolute top-1/2 block border-2 border-solid border-primary';
-          }
+TimelineItem.displayName = 'Timeline.Item';
+TimelineDot.displayName = 'Timeline.Dot';
+TimelineContent.displayName = 'Timeline.Content';
 
-          let horizontalCircleStylesAfter;
-          if (circlePos === 'circle' && isSm) {
-            horizontalCircleStylesAfter = '';
-          } else if (circlePos === 'circle' && !isSm) {
-            horizontalCircleStylesAfter =
-              'absolute top-1/2 block border-2 border-solid border-primary';
-          } else if (circlePos === 'first-circle' && isSm) {
-            horizontalCircleStylesAfter = '';
-          } else if (circlePos === 'first-circle' && !isSm) {
-            horizontalCircleStylesAfter =
-              'absolute top-1/2 block border-2 border-solid border-primary';
-          }
+const Timeline = Object.assign(TimelineComponent, {
+  Item: TimelineItem,
+  Dot: TimelineDot,
+  Content: TimelineContent,
+});
 
-          const horizonalComponentClassList = classNames(
-            horizontalComponentClasses,
-            'pt-12',
-          )
-          if (isHorizontal) {
-            return (
-              <Column
-                key={`horizontal_col_${i + 0}`}
-                id="timeline-item"
-                className={`${liClasses} mb-8 py-4`}
-              >
-                <Row className={horizontalComponentClasses}>
-                  {before && item.component}
-                </Row>
-                <Row>
-                  {useImages ? (
-                    <div
-                      id={circlePos}
-                      className={
-                        isHorizontal ? 'horizontal my-0 py-0' : 'vertical'
-                      }
-                    >
-                      <span className={horizontalCircleStylesBefore} />
-                      <Image
-                        {...item.centerImageProps}
-                        className="relative z-10"
-                      />
-                      <span className={horizontalCircleStylesAfter} />
-                    </div>
-                      ) : (
-                    <p id={circlePos} className={circle} />
-                      )}
-                </Row>
-                <Row className={horizonalComponentClassList}>
-                  {!before && item.component}
-                </Row>
-              </Column>
-            );
-          } else {
-            return (
-              <Row
-                key={`vertical_row_${i + 0}`}
-                id="timeline-item"
-                className={`${liClasses} py-4`}
-              >
-                {!isSm && (
-                  <Column
-                    sm={5}
-                    md={5}
-                    lg={5}
-                    xl={5}
-                    className="my-auto text-center"
-                  >
-                    {before && item.component}
-                  </Column>
-                )}
-                <Column
-                  sm={2}
-                  md={2}
-                  lg={2}
-                  xl={2}
-                  id="circle-wrapper"
-                  className="my-auto"
-                >
-                  {useImages ? (
-                    <div id={circlePos} className="vertical">
-                      <span className={verticalCircleStylesBefore} />
-                      <Image
-                        {...item.centerImageProps}
-                        className="relative z-10"
-                      />
-                      <span className={verticalCircleStylesAfter} />
-                    </div>
-                      ) : (
-                    <p id={circlePos} className={circle} />
-                      )}
-                </Column>
-                {/* TODO: combine below - issue with sm div */}
-                {isSm && (
-                  <Column
-                    sm={10}
-                    md={10}
-                    lg={10}
-                    xl={10}
-                    className="my-auto text-center"
-                  >
-                    {item.component}
-                  </Column>
-                )}
-                {!isSm && (
-                  <Column
-                    sm={5}
-                    md={5}
-                    lg={5}
-                    xl={5}
-                    className="my-auto text-center"
-                  >
-                    {!before && item.component}
-                  </Column>
-                )}
-              </Row>
-            );
-          }
-        })}
-      </div>
-    </ComponentWrapper>
-  );
-}
+export { Timeline };

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

@@ -1,39 +1,19 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Tubestops } from '.';
 
 const meta = {
-  title: 'Components/Tubestops',
+  title: 'V2Components/Tubestops',
   component: Tubestops,
-  argTypes: {
-    ...idAndClassName,
-    items: {
-      description:
-        'An array of strings, one per stop. To add a stop without text, use and empty string',
-    },
-    activeStop: {
-      description: 'The stop number which is currently active',
-    }
-  },
   args: {
-    items: [
-      'Step 1',
-      'Step 2',
-      'Step 3',
-      'Step 4',
-      'Step 5',
-      'Step 6',
-      'Step 7',
-      'Step 8',
-      'Step 9',
-      'Step 10',
-      'Step 11',
-      'Step 12',
-    ],
-    activeStop: 1,
-  }
-}
+    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;
 

package/src/components/Tubestops/index.tsx

@@ -1,54 +1,132 @@
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
+import {
+  Children,
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
 
-export interface TubestopsProps
-  extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
-  items?: string[];
+import clsx from 'clsx';
 
-  bgColour?: Colours;
+export interface TubestopsContextProps {
+  stops?: number;
   activeStop?: number;
+  currentStop?: number;
+  setCurrentStop?: (stop: number) => void;
 }
 
-export const Tubestops = ({ id, items, activeStop = 1 }: TubestopsProps) => {
+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 (
-    <div id={id} className="flex py-4">
-      {items?.map((item, i: number) => {
-        return (
-          <div className="w-full min-w-[120px]" key={`tubestop-stop-${i}`}>
-            <div
-              className={classNames({
-                'ml-1/2 mt-4 h-1 w-full bg-border-light':
-                  i >= activeStop - 1 && i < items.length - 1,
-                'ml-1/2 mt-4 h-1 w-full bg-success':
-                  i < activeStop - 1 && i < items.length - 1,
-              })}
-            />
-            <p
-              className={classNames(
-                {
-                  '-mt-4 bg-success': i + 1 < activeStop,
-                  '-mt-4 bg-gold': activeStop === i + 1,
-                  '-mt-4 bg-border-light': i + 1 > activeStop,
-                  'mt-1': i === items.length - 1,
-                },
-                'z-10 mx-auto h-6 w-6 rounded-full',
-              )}
-            />
-            <p
-              className={classNames(
-                {
-                  'font-medium text-success': i + 1 < activeStop,
-                  'font-bold text-gold': activeStop === i + 1,
-                  'font-medium text-border-light': i + 1 > activeStop,
-                },
-                'mt-2 text-center',
-              )}
-            >
-              {item}
-            </p>
-          </div>
-        );
-      })}
-    </div>
+    <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

@@ -1,23 +1,58 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
+import { Video } from './';
+import { Meta, StoryObj } from '@storybook/react';
 
-import { Video } from '.';
+import Mp4File from './assets/example.mp4';
+import WebmFile from './assets/example.webm';
 
 const meta = {
-  title: 'Components/Video',
+  title: 'V2Components/Video',
   component: Video,
-  argTypes: {
-    ...idAndClassName,
-  },
   args: {
-    withControls: true,
-    autoPlay: true,
-    muted: true,
-  }
-}
+    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" />],
+  },
+};