trepur_components 2.3.9 → 2.3.11

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

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

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

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

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

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

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

package/src/custom.d.ts

@@ -1,14 +0,0 @@
-declare module '*.webm' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.mp4' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.svg' {
-  const src: string;
-  export default src;
-}

package/src/documentation/Colours.mdx

@@ -1,192 +0,0 @@
-import { Meta, Unstyled } from '@storybook/blocks';
-
-<Meta title="colour/ThemeColours" />
-
-<Unstyled>
-    <div className='px-4 grid grid-cols-1 gap-12'>
-      <div>
-        <h2 className='py-4 font-bold underline'>Defaults</h2>
-        <div className='grid grid-cols-4 gap-6'>
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Primary</p>
-            <div className='h-6 rounded-md bg-primary' />
-          </div>
-
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Secondary</p>
-            <div className='h-6 rounded-md bg-secondary' />
-          </div>
-
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Tertiary</p>
-            <div className='h-6 rounded-md bg-tertiary' />
-          </div>
-
-          <div className='grid grid-cols-1 gap-1'>
-            <p>White</p>
-            <div className='h-6 rounded-md bg-white' />
-          </div>
-
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Black</p>
-            <div className='h-6 rounded-md bg-black' />
-          </div>
-
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Grey</p>
-            <div className='h-6 rounded-md bg-grey' />
-          </div>
-
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Light Grey</p>
-            <div className='h-6 rounded-md bg-light-grey' />
-          </div>
-
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Lightest Grey</p>
-            <div className='h-6 rounded-md bg-lightest-grey' />
-          </div>
-
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Border</p>
-            <div className='h-6 rounded-md bg-border' />
-          </div>
-
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Border Light</p>
-            <div className='h-6 rounded-md bg-border-light' />
-          </div>
-
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Border Lightest</p>
-            <div className='h-6 rounded-md bg-border-lightest' />
-          </div>
-
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Border Dark</p>
-            <div className='h-6 rounded-md bg-border-dark' />
-          </div>
-
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Primary Strict</p>
-            <div className='h-6 rounded-md bg-primary-strict' />
-          </div>
-
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Red</p>
-            <div className='h-6 rounded-md bg-red' />
-          </div>
-
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Gold</p>
-            <div className='h-6 rounded-md bg-gold' />
-          </div>
-
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Ink</p>
-            <div className='h-6 rounded-md bg-ink' />
-          </div>
-        </div>
-      </div>
-      <div>
-        <h2 className='py-4 font-bold underline'>Status Colours</h2>
-        <div className='grid grid-cols-4 gap-6'>
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Success Default</p>
-            <div className='h-6 rounded-md bg-success-default' />
-          </div>
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Error Default</p>
-            <div className='h-6 rounded-md bg-error-default' />
-          </div>
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Warning Default</p>
-            <div className='h-6 rounded-md bg-warning-default' />
-          </div>
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Info Default</p>
-            <div className='h-6 rounded-md bg-info-default' />
-          </div>
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Success Light</p>
-            <div className='h-6 rounded-md bg-success-light' />
-          </div>
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Error Light</p>
-            <div className='h-6 rounded-md bg-error-light' />
-          </div>
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Warning Light</p>
-            <div className='h-6 rounded-md bg-warning-light' />
-          </div>
-          <div className='grid grid-cols-1 gap-1'>
-            <p>Info Light</p>
-            <div className='h-6 rounded-md bg-info-light' />
-          </div>
-        </div>
-      </div>
-      <div>
-        <h2 className='py-4 font-bold underline'>Socials</h2>
-        <div className='grid grid-cols-4 gap-6'>
-          <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-facebook' />
-            <p>Facebook</p>
-          </div>
-          <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-linkedin' />
-            <p>Linkedin</p>
-          </div>
-          <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-email' />
-            <p>Email</p>
-          </div>
-          <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-github' />
-            <p>Github</p>
-          </div>
-          <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-whatsapp' />
-            <p>Whatsapp</p>
-          </div>
-          <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-twitter' />
-            <p>Twitter</p>
-          </div>
-          <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-instagram' />
-            <p>Instagram</p>
-          </div>
-        </div>
-      </div>
-      <div>
-        <h2 className='py-4'>Interactive Socials</h2>
-        <div className='grid grid-cols-4 gap-6'>
-          <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-interactive-facebook' />
-            <p>Interactive Facebook</p>
-          </div>
-          <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-interactive-linkedin' />
-            <p>Interactive Linkedin</p>
-          </div>
-          <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-interactive-email' />
-            <p>Interactive Email</p>
-          </div>
-          <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-interactive-github' />
-            <p>Interactive Github</p>
-          </div>
-          <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-interactive-whatsapp' />
-            <p>Interactive Whatsapp</p>
-          </div>
-          <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-interactive-twitter' />
-            <p>Interactive Twitter</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-</Unstyled>

package/src/documentation/Introduction.mdx

@@ -1,13 +0,0 @@
-import { Meta, Unstyled } from '@storybook/blocks';
-
-import { TrepurComponentsLogo } from './assets';
-
-<Meta title="guides/Introduction" />
-
-<Unstyled>
-  <div>
-    <img className="mx-auto" src={TrepurComponentsLogo} width="200" />
-    <h1 className="font-semiBold py-4 text-center">Trepur Components</h1>
-    <p>Welcome to Trepur Components, the design system for Trepur Tech</p>
-  </div>
-</Unstyled>

package/src/documentation/assets/index.ts

@@ -1,3 +0,0 @@
-import TrepurComponentsLogo from './trepurComponentsLogo.svg';
-
-export { TrepurComponentsLogo };