trepur_components 0.4.7 → 1.0.0

package/dist/components/Timeline/index.tsx

@@ -0,0 +1,315 @@
+import React, { CSSProperties } from 'react'
+import classNames from 'classnames'
+import Image from '@components/Image'
+import Column from '@components/Column'
+import Row from '@components/Row'
+
+export interface Props {
+  id?: string
+  className?: string
+  isHorizontal?: boolean
+  items?: object[]
+  reverse?: boolean
+  textCenter?: boolean
+  useImages?: boolean
+  horizontalComponentClasses?: string
+  isSm?: boolean
+}
+
+const Timeline = ({
+  id,
+  className,
+  isHorizontal = false,
+  items,
+  reverse = false,
+  textCenter,
+  useImages = true,
+  horizontalComponentClasses,
+  isSm = false
+}: Props): JSX.Element => {
+  const classList = classNames(className, 'w-full list-none overflow-x-auto pb-4')
+  const ulClasses = classNames({
+    'flex-row none-reverse justify-between': !reverse && isHorizontal,
+    'flex-col none-reverse': !reverse && !isHorizontal,
+    'flex-row reverse justify-between': reverse && isHorizontal,
+    'flex-col reverse': reverse && !isHorizontal
+  }, className, 'timeline status-flow relative list-none pl-0 flex')
+
+  const liClasses = classNames({
+    'text-center': textCenter,
+    'items-center flex-col justify-between': !reverse && isHorizontal,
+    'flex-row none-reverse': !reverse && !isHorizontal,
+    'items-center flex-col-reverse': reverse && isHorizontal,
+    'flex-row-reverse': reverse && !isHorizontal
+  }, 'status-flow-item relative flex flex-auto flex-row leading-tight')
+
+  const circle = classNames({
+    'horizontal collapse': isHorizontal && isSm,
+    horizontal: isHorizontal && !isSm,
+    vertical: !isHorizontal
+  }, 'w-4 h-4 my-16 text-center mx-auto rounded-full border bg-black')
+
+  const circleVerticalBefore: CSSProperties = {
+    position: 'absolute',
+    display: 'block',
+    borderLeft: '1px solid',
+    borderColor: 'text-primary',
+    content: '""',
+    height: '50%',
+    top: '0%',
+    left: '49.9%',
+    zIndex: '-1'
+  }
+
+  const circleVerticalCollapseBefore: CSSProperties = {
+    position: 'absolute',
+    display: 'block',
+    borderLeft: '1px solid',
+    borderColor: 'text-primary',
+    content: '""',
+    height: '50%',
+    top: '0%',
+    left: '8.2%',
+    zIndex: '-1'
+  }
+
+  const lastCircleVerticalBefore: CSSProperties = {
+    position: 'absolute',
+    display: 'block',
+    borderLeft: '1px solid',
+    borderColor: 'text-primary',
+    content: '""',
+    height: '50%',
+    top: '0%',
+    left: '49.9%',
+    zIndex: '-1'
+  }
+
+  const lastCircleVerticalCollapseBefore: CSSProperties = {
+    position: 'absolute',
+    display: 'block',
+    borderLeft: '1px solid',
+    borderColor: 'text-primary',
+    content: '""',
+    height: '50%',
+    top: '0%',
+    left: '8.2%',
+    zIndex: '-1'
+  }
+
+  const circleVerticalAfter: CSSProperties = {
+    position: 'absolute',
+    display: 'block',
+    borderLeft: '1px solid',
+    borderColor: 'text-primary',
+    content: '""',
+    height: '50%',
+    bottom: '0%',
+    left: '49.9%',
+    zIndex: '-1'
+  }
+
+  const firstCircleVerticalAfter: CSSProperties = {
+    position: 'absolute',
+    display: 'block',
+    borderLeft: '1px solid',
+    borderColor: 'text-primary',
+    content: '""',
+    height: '50%',
+    bottom: '0%',
+    left: '49.9%',
+    zIndex: '-1'
+  }
+
+  const circleVerticalCollapseAfter: CSSProperties = {
+    position: 'absolute',
+    display: 'block',
+    borderLeft: '1px solid',
+    borderColor: 'text-primary',
+    content: '""',
+    height: '50%',
+    bottom: '0%',
+    left: '8.2%',
+    zIndex: '-1'
+  }
+
+  const firstCircleVerticalCollapseAfter: CSSProperties = {
+    position: 'absolute',
+    display: 'block',
+    borderLeft: '1px solid',
+    borderColor: 'text-primary',
+    content: '""',
+    height: '50%',
+    bottom: '0%',
+    left: '8.2%',
+    zIndex: '-1'
+  }
+
+  return (
+    <Column
+      sm={12}
+      md={12}
+      lg={12}
+      xl={12}
+      id={id}
+      className={classList}
+    >
+      <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'
+          }
+
+          let verticalCircleStylesBefore
+          if (circlePos === 'circle' && isSm) {
+            verticalCircleStylesBefore = circleVerticalCollapseBefore
+          } else if (circlePos === 'circle' && !isSm) {
+            verticalCircleStylesBefore = circleVerticalBefore
+          } else if (circlePos === 'last-circle' && isSm) {
+            verticalCircleStylesBefore = lastCircleVerticalCollapseBefore
+          } else if (circlePos === 'last-circle' && !isSm) {
+            verticalCircleStylesBefore = lastCircleVerticalBefore
+          }
+
+          let verticalCircleStylesAfter
+          if (circlePos === 'circle' && isSm) {
+            verticalCircleStylesAfter = circleVerticalCollapseAfter
+          } else if (circlePos === 'circle' && !isSm) {
+            verticalCircleStylesAfter = circleVerticalAfter
+          } else if (circlePos === 'first-circle' && isSm) {
+            verticalCircleStylesAfter = firstCircleVerticalCollapseAfter
+          } else if (circlePos === 'first-circle' && !isSm) {
+            verticalCircleStylesAfter = firstCircleVerticalAfter
+          }
+
+          let horizontalCircleStylesBefore
+          // if (circlePos === 'circle' && isSm){
+          //     horizontalCircleStylesBefore = circleHorizontalCollapseBefore
+          // } else if (circlePos === 'circle' && !isSm){
+          //     horizontalCircleStylesBefore = circleHorizontalBefore
+          // } else if (circlePos === 'first-circle' && isSm){
+          //     horizontalCircleStylesBefore = firstCircleHorizontalCollapseBefore
+          // } else if (circlePos === 'first-circle' && !isSm){
+          //     horizontalCircleStylesBefore = firstCircleHorizontalBefore
+          // }
+
+          let horizontalCircleStylesAfter
+          // if (circlePos === 'circle' && isSm){
+          //     horizontalCircleStylesAfter = circleHorizontalCollapseAfter
+          // } else if (circlePos === 'circle' && !isSm){
+          //     horizontalCircleStylesAfter = circleHorizontalAfter
+          // } else if (circlePos === 'first-circle' && isSm){
+          //     horizontalCircleStylesAfter = firstCircleHorizontalCollapseAfter
+          // } else if (circlePos === 'first-circle' && !isSm){
+          //     horizontalCircleStylesAfter = firstCircleHorizontalAfter
+          // }
+
+          const horizonalComponentClassList = classNames(horizontalComponentClasses, 'pt-12')
+          if (isHorizontal) {
+            return (
+              <Column
+                key={`horizontal_col_${i + 0}`}
+                id='timeline-item'
+                className={`${liClasses} py-4 mb-8`}
+              >
+                <Row className={horizontalComponentClasses}>
+                  {before && item.component}
+                </Row>
+                <Row>
+                  {useImages
+                    ? (
+                      <div
+                        id={circlePos}
+                        className={isHorizontal ? 'horizontal py-0 my-0' : 'vertical'}
+                      >
+                        <span style={horizontalCircleStylesBefore} />
+                        <Image {...item.centerImageProps} />
+                        <span style={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='text-center my-auto'
+                  >
+                    {before && item.component}
+                  </Column>}
+                <Column
+                  sm={2}
+                  md={2}
+                  lg={2}
+                  xl={2}
+                  id='circle-wrapper'
+                  className='my-auto'
+                >
+                  {useImages
+                    ? (
+                      <div
+                        id={circlePos}
+                        className={isSm ? 'vertical' : 'vertical'}
+                      >
+                        <span style={verticalCircleStylesBefore} />
+                        <Image {...item.centerImageProps} />
+                        <span style={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='text-center my-auto'
+                  >
+                    {item.component}
+                  </Column>}
+                {!isSm &&
+                  <Column
+                    sm={5}
+                    md={5}
+                    lg={5}
+                    xl={5}
+                    className='text-center my-auto'
+                  >
+                    {!before && item.component}
+                  </Column>}
+              </Row>
+            )
+          }
+        })}
+      </div>
+    </Column>
+  )
+}
+
+export default Timeline

package/dist/components/Tubestops/Tubestops.stories.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import Tubestops from './index'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+const componentMeta: ComponentMeta<typeof Tubestops> = {
+  title: 'Trepur Components/Other/Atoms/Tubestops',
+  component: Tubestops,
+  parameters: {},
+  argTypes: {
+    id: {
+      description: 'Defines the id of the component',
+      table: {
+        category: '',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    className: {
+      description: 'Defines any additional classes for the components',
+      table: {
+        category: '',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    isHorizontal: {
+      description: '',
+      table: {
+        category: ''
+      }
+    },
+    items: {
+      description: '',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    isHorizontal: false,
+    reverse: false,
+    items: [
+      {
+        title: 'This is a title',
+        subtitle: 'This is a subtitle'
+      },
+      {
+        title: 'This is a title',
+        subtitle: 'This is a subtitle'
+      },
+      {
+        title: 'This is a title',
+        subtitle: 'This is a subtitle'
+      }
+    ],
+    textCenter: true,
+    id: '',
+    className: ''
+  }
+}
+
+const Template: ComponentStory<typeof Tubestops> = (args) => <Tubestops {...args} />
+
+export const _Tubestops = Template.bind({})
+
+export default componentMeta

package/dist/components/Tubestops/index.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import classNames from 'classnames'
+import './index.css'
+
+export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
+  isHorizontal?: boolean
+  items?: Array<{ title: string, subtitle: string }>
+  reverse?: boolean
+  textCenter?: boolean
+}
+
+const Tubestops: React.FC<Props> = ({
+  id,
+  className,
+  isHorizontal = false,
+  items = [],
+  reverse = false,
+  textCenter = false
+}) => {
+  const circle = 'w-4 h-4 rounded-full bg-black z-10'
+  const classList = classNames(className, 'w-full list-none')
+
+  const liClasses = classNames({
+    'text-center': textCenter,
+    'items-center flex-col-reverse justify-between': !reverse && isHorizontal,
+    'flex-row none-reverse': !reverse && !isHorizontal,
+    'items-center flex-col': reverse && isHorizontal,
+    'flex-row-reverse': reverse && !isHorizontal
+  }, 'mb-0 status-flow-item relative flex flex-auto flex-row leading-tight')
+
+  const ulClasses = classNames({
+    'flex-row none-reverse justify-between': !reverse && isHorizontal,
+    'flex-col none-reverse': !reverse && !isHorizontal,
+    'flex-row reverse justify-between': reverse && isHorizontal,
+    'flex-col reverse': reverse && !isHorizontal
+  }, 'tubestop status-flow relative list-none pl-0 flex')
+
+  const padding = classNames({
+    'pb-2': !reverse && isHorizontal,
+    'pl-4': !reverse && !isHorizontal,
+    'pt-2': reverse && isHorizontal,
+    'pr-4': reverse && !isHorizontal
+  })
+
+  return (
+    <div
+      id={id}
+      className={classList}
+    >
+      <ul className={ulClasses}>
+        {items?.map((item: { title: string, subtitle: string }, i: number) => {
+          const a = isHorizontal
+            ? i === 0
+              ? ''
+              : ''
+            : i === 0
+              ? ''
+              : 'my-12'
+          return (
+            <li
+              key={`tubestop_${i + 0}`}
+              className={`${liClasses} ${a}`}
+            >
+              <span className={circle} />
+              <div className={padding}>
+                <p>{`${item?.title}${i.toString()}`}</p>
+                <p><small>{item?.subtitle}</small></p>
+              </div>
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}
+
+export default Tubestops

package/dist/components/UserIcon/UserIcon.stories.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import UserIcon from './index'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+const componentMeta: ComponentMeta<typeof UserIcon> = {
+  title: 'Trepur Components/Other/Organisms/User Icon',
+  component: UserIcon,
+  argTypes: {
+    id: {
+      description: 'Defines the id of the component',
+      control: { type: 'text', default: false },
+      table: {
+        category: 'Id',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    className: {
+      description: 'Defines any additional classes for the components',
+      control: { type: 'text', default: false },
+      table: {
+        category: 'Classes',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    name: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    description: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    imageProps: {
+      type: { name: 'other', value: 'object' },
+      description: 'The props to pass to the image to display on the component',
+      table: {
+        type: {
+          summary: 'object'
+        },
+        defaultValue: { summary: 'undefined' }
+      }
+    }
+  },
+  args: {
+    imageProps: {
+      title: '',
+      altText: '',
+      image: ''
+    },
+    name: 'Someones name',
+    description: 'someone info'
+  }
+}
+
+const Template: ComponentStory<typeof UserIcon> = (args) => <UserIcon {...args} />
+
+export const _UserIcon = Template.bind({})
+
+export default componentMeta

package/dist/components/UserIcon/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import classNames from 'classnames'
+import Image, { Props as imageProps } from '@components/Image'
+
+export interface Props {
+  id?: string
+  className?: string
+  name?: string
+  description?: string
+  imageProps?: imageProps
+}
+const UserIcon = ({
+  id,
+  className,
+  name,
+  description,
+  imageProps
+}: Props): JSX.Element => {
+  const classList = classNames({
+    className: className !== undefined
+  }, 'group flex items-center')
+
+  imageProps = {
+    ...imageProps,
+    className: classNames(imageProps?.className, 'shrink-0 h-12 w-12 rounded-full')
+  }
+  return (
+    <div id={id} className={classList}>
+      <Image {...imageProps} />
+      <div className='ltr:ml-3 rtl:mr-3'>
+        <p className='text-xs font-medium'>
+          {name}
+        </p>
+        <p className='text-xs font-medium '>
+          {description}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default UserIcon

package/dist/components/Video/Video.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import Video from './index'
+import { idAndClassName } from '@utils/controls'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+const componentMeta: ComponentMeta<typeof Video> = {
+  title: 'Trepur Components/Other/Atoms/Video',
+  component: Video,
+  argTypes: {
+    ...idAndClassName
+  },
+  args: {
+    withControls: true,
+    autoPlay: true,
+    muted: true
+  }
+}
+
+const Template: ComponentStory<typeof Video> = (args) => <Video {...args} />
+
+export const _Video = Template.bind({})
+
+export default componentMeta

package/dist/components/Video/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+export interface Props {
+  id?: string
+  className?: string
+  autoPlay?: boolean
+  muted?: boolean
+  poster?: string
+  mp4File?: string
+  webmFile?: string
+  ogvFile?: string
+  height?: string
+  width?: string
+  withControls?: boolean
+  withPoster?: boolean
+}
+
+const Video = ({
+  id,
+  className,
+  autoPlay,
+  muted,
+  poster,
+  mp4File,
+  webmFile,
+  ogvFile,
+  height,
+  width,
+  withControls
+}: Props): JSX.Element => {
+  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>
+  )
+}
+
+export default Video