trepur_components 1.0.2 → 1.0.3

package/dist/components/Timeline/index.css

@@ -1,133 +0,0 @@
-/* Vertical */
-/* #circle.vertical:before {
-  position: absolute;
-  display: block;
-  border-left: 1px solid #31a3dd;
-  content: "";
-  height: 50%;
-  top: 0%;
-  left: 49.9%;
-  z-index: -1;
-}
-
-#circle.vertical:after {
-  position: absolute;
-  display: block;
-  border-left: 1px solid #31a3dd;
-  content: "";
-  height: 50%;
-  bottom: 0%;
-  left: 49.9%;
-  z-index: -1;
-}
-
-#first-circle.vertical:after {
-  position: absolute;
-  display: block;
-  border-left: 1px solid #31a3dd;
-  content: "";
-  height: 50%;
-  bottom: 0%;
-  left: 49.9%;
-  z-index: -1;
-}
-
-#last-circle.vertical:before {
-  position: absolute;
-  display: block;
-  border-left: 1px solid #31a3dd;
-  content: "";
-  height: 50%;
-  top: 0%;
-  left: 49.9%;
-  z-index: -1;
-} */
-
-/* V - collapse*/
-/* #circle.vertical.collapse:before {
-  position: absolute;
-  display: block;
-  border-left: 1px solid #31a3dd;
-  content: "";
-  height: 50%;
-  top: 0%;
-  left: 8.2%;
-  z-index: -1;
-}
-
-#circle.vertical.collapse:after {
-  position: absolute;
-  display: block;
-  border-left: 1px solid #31a3dd;
-  content: "";
-  height: 50%;
-  bottom: 0%;
-  left: 8.2%;
-  z-index: -1;
-}
-
-#first-circle.vertical.collapse:after {
-  position: absolute;
-  display: block;
-  border-left: 1px solid #31a3dd;
-  content: "";
-  height: 50%;
-  bottom: 0%;
-  left: 8.2%;
-  z-index: -1;
-}
-
-#last-circle.vertical.collapse:before {
-  position: absolute;
-  display: block;
-  border-left: 1px solid #31a3dd;
-  content: "";
-  height: 50%;
-  top: 0%;
-  left: 8.2%;
-  z-index: -1;
-} */
-/* Horizontal */
-/* #circle.horizontal:before {
-  position: absolute;
-  display: block;
-  border-top: 1px solid #31a3dd;
-  content: "";
-  width: 70%;
-  top: 50%;
-  left: -8%;
-  z-index: -1;
-}
-
-#circle.horizontal:after {
-  position: absolute;
-  display: block;
-  border-top: 1px solid #31a3dd;
-  content: "";
-  width: 70%;
-  top: 50%;
-  right: -12%;
-  z-index: -1;
-}
-
-#first-circle.horizontal:after {
-  position: absolute;
-  display: block;
-  border-top: 1px solid #31a3dd;
-  content: "";
-  width: 60%;
-  top: 50%;
-  right: -12%;
-  z-index: -1;
-}
-
-#last-circle.horizontal:before {
-  position: absolute;
-  display: block;
-  border-top: 1px solid #31a3dd;
-  content: "";
-  width: 55%;
-  top: 50%;
-  left: -8%;
-  z-index: -1;
-} */

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.css

@@ -1,92 +0,0 @@
-/* Vertical */
-.tubestop.flex-col.none-reverse .status-flow-item:not(:first-child):before {
-  @apply absolute;
-  @apply block;
-  
-  content: "";
-  width: 1px;
-  height: 100%;
-  left: 7px;
-  top: -100%;
-}
-
-.tubestop.flex-col.none-reverse .status-flow-item:not(:last-child):after {
-  @apply absolute;
-  @apply block;
- 
-  content: "";
-  width: 1px;
-  height: 100%;
-  left: 7px;
-  top: 40%;
-}
-
-/* reverse */
-.tubestop.flex-col.reverse .status-flow-item:not(:first-child):before {
-  @apply absolute;
-  @apply block;
-
-  content: "";
-  width: 1px;
-  height: 100%;
-  right: 7px;
-  top: -100%;
-}
-
-.tubestop.flex-col.reverse .status-flow-item:not(:last-child):after {
-  @apply absolute;
-  @apply block;
-
-  content: "";
-  width: 1px;
-  height: 100%;
-  right: 7px;
-  top: 40%;
-}
-
-/* Horizontal */
-.tubestop.flex-row.none-reverse .status-flow-item:not(:first-child):after {
-  @apply absolute;
-  @apply block;
-
-  content: "";
-  width: 100%;
-  height: 1px;
-  left: -50%;
-  bottom: 7px;
-}
-
-.tubestop.flex-row-reverse.none-reverse
-  .status-flow-item:not(:first-child):after {
-  @apply absolute;
-  @apply block;
-
-  content: "";
-  width: 100%;
-  height: 1px;
-  right: -50%;
-  top: 7px;
-}
-
-/*reverse*/
-.tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {
-  @apply absolute;
-  @apply block;
-
-  content: "";
-  width: 100%;
-  height: 1px;
-  left: -50%;
-  bottom: 7px;
-}
-
-.tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {
-  @apply absolute;
-  @apply block;
-
-  content: "";
-  width: 100%;
-  height: 1px;
-  right: -50%;
-  top: 7px;
-}

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