trepur_components 1.0.2 → 1.0.4

package/dist/components/Timeline/Timeline.stories.tsx

@@ -1,100 +0,0 @@
-import React from 'react'
-import Timeline from './index'
-import CardWithTopImage from '@components/CardWithTopImage'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import logo from '@assets/images/primary-logo.png'
-import { Props as imageProps } from '@components/Image'
-
-const timelineItems = (): Array<{ component: JSX.Element, centerImageProps: imageProps }> => {
-  return new Array(8).fill(null).map(() => {
-    return (
-      {
-        component:
-  <CardWithTopImage
-    imageProps={{
-      image: logo,
-      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: {
-          image: logo,
-          imageClasses: 'mx-auto',
-          width: 4,
-          height: 4,
-          centerAligned: true,
-          roundedFull: true
-        }
-      }
-    )
-  })
-}
-
-const componentMeta: ComponentMeta<typeof Timeline> = {
-  title: 'Trepur Components/Rupert Bennett/Organisms/Timeline',
-  component: Timeline,
-  parameters: {},
-  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' }
-      }
-    },
-    isHorizontal: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: ''
-      }
-    },
-    useImages: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: ''
-      }
-    },
-    items: {
-      description: '',
-      control: 'array',
-      table: {
-        category: ''
-      }
-    }
-  },
-  args: {
-    isHorizontal: true,
-    reverse: false,
-    items: timelineItems(),
-    textCenter: true,
-    useImages: true,
-    horizontalComponentClasses: 'w-96 h-96',
-    isSm: true
-  }
-}
-
-const Template: ComponentStory<typeof Timeline> = (args) => <Timeline {...args} />
-
-export const _Timeline = Template.bind({})
-
-export default componentMeta

package/dist/components/Timeline/index.tsx

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

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

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

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

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

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