trepur_components 0.4.8 → 1.0.0

package/dist/components/Carousel/index.tsx

@@ -0,0 +1,267 @@
+import React, { useState } from 'react'
+import 'keen-slider/keen-slider.min.css'
+import { useKeenSlider, KeenSliderInstance, KeenSliderHooks, KeenSliderOptions } from 'keen-slider/react'
+import classNames from 'classnames'
+import Icon from '@components/Icon'
+// https://keen-slider.io/docs#usage-in-react
+
+export interface Props {
+  id?: string
+  className?: string
+  breakpoints?: { [key: string]: Omit<KeenSliderOptions<{}, {}, KeenSliderHooks>, 'breakpoints'> }
+  defaultAnimation?: { duration?: number, easing?: (t: number) => number }
+  disabled: boolean
+  drag?: boolean
+  dragSpeed?: number
+  initial?: number
+  loop?: boolean
+  mode?: 'snap' | 'free' | 'free-snap'
+  range?: { align?: boolean, min?: number, max?: number }
+  renderMode?: 'precision' | 'performance' | 'custom'
+  rtl?: boolean
+  rubberband?: boolean
+  slides?: any[]
+  vertical?: boolean
+  animationStarted?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void
+  animationStopped?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void
+  animationEnded?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void
+  created?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void
+  destroyed?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void
+  detailsChanged?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void
+  dragged?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void
+  dragStarted?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void
+  dragChecked?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void
+  dragEnded?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void
+  beforeOptionsChanged?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void
+  optionsChanged?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void
+  slideChanged?: boolean
+  updated?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void
+  perView?: number
+  spacing?: number
+  number?: number
+  origin?: number | 'auto' | 'center'
+  arrows?: { visible: boolean, onClick?: () => void }
+  dots?: { visible: boolean, activeColours: string, colours: string }
+}
+
+const Carousel: React.FC<Props> = ({
+  id,
+  className,
+  breakpoints,
+  defaultAnimation,
+  disabled,
+  drag,
+  dragSpeed,
+  initial,
+  loop = true,
+  mode = 'snap',
+  range,
+  renderMode,
+  rtl,
+  rubberband,
+  slides,
+  vertical,
+  animationStarted,
+  animationStopped,
+  animationEnded,
+  created,
+  destroyed,
+  detailsChanged,
+  dragged,
+  dragStarted,
+  dragChecked,
+  dragEnded,
+  beforeOptionsChanged,
+  optionsChanged,
+  slideChanged,
+  updated,
+  perView = 1,
+  spacing,
+  number,
+  origin,
+  arrows,
+  dots
+}) => {
+  const classList = className
+  const [currentSlide, setCurrentSlide] = useState(0)
+  const [loaded, setLoaded] = useState(false)
+
+  const wheelControls = (slider: any): void => {
+    let touchTimeout: any
+    let position: any
+    let wheelActive: boolean
+
+    function dispatch (e: any, name: string): void {
+      position.x -= e.deltaX
+      position.y -= e.deltaY
+      slider.container.dispatchEvent(
+        new CustomEvent(name, {
+          detail: {
+            x: position.x,
+            y: position.y
+          }
+        })
+      )
+    }
+
+    function wheelStart (e: any): void {
+      position = {
+        x: e.pageX,
+        y: e.pageY
+      }
+      dispatch(e, 'ksDragStart')
+    }
+
+    function wheel (e: any): void {
+      dispatch(e, 'ksDrag')
+    }
+
+    function wheelEnd (e: any): void {
+      dispatch(e, 'ksDragEnd')
+    }
+
+    function eventWheel (e: any): void {
+      e.preventDefault()
+      if (!wheelActive) {
+        wheelStart(e)
+        wheelActive = true
+      }
+      wheel(e)
+      clearTimeout(touchTimeout)
+      touchTimeout = setTimeout(() => {
+        wheelActive = false
+        wheelEnd(e)
+      }, 50)
+    }
+
+    slider.on('created', () => {
+      slider.container.addEventListener('wheel', eventWheel, {
+        passive: false
+      })
+    })
+  }
+
+  const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>({
+    initial,
+    breakpoints,
+    defaultAnimation,
+    disabled,
+    drag,
+    dragSpeed,
+    loop,
+    mode,
+    range,
+    renderMode,
+    rtl,
+    rubberband,
+    vertical,
+    slideChanged (slider) {
+      setCurrentSlide(slider.track.details.rel)
+    },
+    // slideChanged: slideChanged,
+    created () {
+      setLoaded(true)
+    },
+    // created: created,
+    animationStarted,
+    animationStopped,
+    animationEnded,
+    destroyed,
+    detailsChanged,
+    dragged,
+    dragStarted,
+    dragChecked,
+    dragEnded,
+    beforeOptionsChanged,
+    optionsChanged,
+    updated,
+    slides: {
+      perView,
+      spacing,
+      origin,
+      number
+    }
+  }, [wheelControls])
+
+  return (
+    <>
+      <div id={id} className={classNames(classList, arrows?.visible === true && 'flex justify-between', 'navigation-wrapper w-full')}>
+        {arrows?.visible === true && loaded && (instanceRef.current !== undefined) && (
+          <div className='my-auto'>
+            <Arrow
+              left
+              onClick={(e: any) => e.stopPropagation() !== undefined || instanceRef.current?.prev()}
+              disabled={currentSlide === 0}
+              arrows={arrows}
+            />
+          </div>
+        )}
+        <div ref={sliderRef} className='keen-slider w-full'>
+          {(slides != null) && slides}
+        </div>
+        {arrows?.visible === true && loaded && (instanceRef.current !== undefined) && (
+          <div className='my-auto'>
+            <Arrow
+              right
+              onClick={(e: any) =>
+                e.stopPropagation() !== undefined || instanceRef.current?.next()}
+              disabled={
+                currentSlide === instanceRef?.current?.track?.details?.slides?.length
+              }
+              arrows={arrows}
+            />
+          </div>
+        )}
+      </div>
+      {dots?.visible === true && loaded && (instanceRef.current != null) && (
+        <div className='flex py-8 justify-center'>
+          {[...Array(instanceRef?.current?.track?.details?.slides?.length).keys()].map((idx, i) => {
+            return (
+              <Dot
+                key={`dot_${i}`}
+                isActive={currentSlide === idx}
+                onClick={() => {
+                  instanceRef.current?.moveToIdx(idx)
+                }}
+              />
+            )
+          })}
+        </div>
+      )}
+    </>
+  )
+}
+
+function Arrow (props: { onClick?: (e: any) => void, disabled?: boolean, left?: boolean, right?: boolean, arrows?: { visible?: boolean, colours?: string, disabledColours?: string } }): JSX.Element {
+  return (
+    <div className='w-full'>
+      <a onClick={props?.onClick}>
+        <Icon
+          type={props?.left === true ? 'chevron-left' : 'chevron-right'}
+          className='mx-auto hover:cursor-pointer'
+          size={3}
+          rounded
+          bgColour='white'
+          colour='primary'
+        />
+      </a>
+    </div>
+  )
+}
+
+function Dot (props: { onClick: (e: any) => void, isActive: boolean }): JSX.Element {
+  return (
+    <a onClick={props?.onClick}>
+      <Icon
+        type='circle'
+        className='mx-1 hover:cursor-pointer'
+        size={1}
+        rounded
+        bgColour={props?.isActive ? 'primary' : 'secondary'}
+        colour={props?.isActive ? 'primary' : 'secondary'}
+      />
+    </a>
+  )
+}
+
+export default Carousel

package/dist/components/ChevronCard/ChevronCard.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { idAndClassName } from '@utils/controls'
+import ChevronCard from './index'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+const componentMeta: ComponentMeta<typeof ChevronCard> = {
+  title: 'Trepur Components/Other/Organisms/Chevron Card',
+  component: ChevronCard,
+  parameters: {},
+  argTypes: {
+    ...idAndClassName
+  },
+  args: {
+  }
+}
+
+const Template: ComponentStory<typeof ChevronCard> = (args) => <ChevronCard {...args} />
+
+export const _ChevronCard = Template.bind({})
+
+export default componentMeta

package/dist/components/ChevronCard/index.tsx

@@ -0,0 +1,39 @@
+import classNames from 'classnames'
+import React from 'react'
+
+export interface Props {
+  id?: string
+  className?: string
+}
+const ChevronCard: React.FC<Props> = ({
+  id,
+  className
+}: Props): JSX.Element => {
+  const classList = classNames(className, 'flex border-l border-t border-b h-20 w-32 z-10 bg-white')
+
+  return (
+    <>
+      <div id={id} className={`${classList} flex`}>
+        <div className='border-l border-t border-b h-20 w-32 z-10 bg-white' />
+        <div id='chevronLeft' className='border h-14 w-14 -ml-7 mt-3 rotate-45' />
+      </div>
+
+      <div id={id} className='flex-col my-8'>
+        <div className='border-l border-t border-r h-32 w-20 z-20 bg-white' />
+        <div id='chevronLeft' className='border h-14 w-14 -mt-7 ml-3 rotate-45 z-0' />
+      </div>
+
+      <div id={id} className='flex-col my-16'>
+        <div className='border h-14 w-14 -mb-7 ml-3 rotate-45 z-0' />
+        <div id={id} className='border-l border-b border-r h-32 w-20 z-20 bg-white' />
+      </div>
+
+      <div id={id} className='flex'>
+        <div className='border h-14 w-14 -mr-7 mt-3 rotate-45' />
+        <div id={id} className='border-r border-t border-b h-20 w-32 z-10 bg-white' />
+      </div>
+    </>
+  )
+}
+
+export default ChevronCard

package/dist/components/Collapsible/Collapsible.stories.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import Collapsible from './index'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+const componentMeta: ComponentMeta<typeof Collapsible> = {
+  title: 'Trepur Components/Other/Atoms/Collapsible',
+  component: Collapsible,
+  parameters: {},
+  argTypes: {
+    title: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    subtitle: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    borderTop: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    borderBottom: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    showBottomLine: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    children: {
+      description: '',
+      control: 'array',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    title: 'This is a title',
+    subtitle: 'This is a subtitle',
+    showBottomLine: true,
+    iconProps: {
+      type: 'heart',
+      colour: 'white',
+      bgColour: 'primary'
+    },
+    children: <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, unde perferendis quibusdam eos repellendus vero rerum sunt reiciendis velit autem odio, fuga molestiae perspiciatis dolor voluptatum mollitia quos ipsa! Doloribus? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis ducimus, dolorum tempore unde earum aspernatur placeat magnam, alias neque, blanditiis esse tenetur dignissimos in optio nihil libero cum cupiditate debitis?</p>
+  }
+}
+
+const Template: ComponentStory<typeof Collapsible> = (args) => <Collapsible {...args} />
+
+export const _Collapsible = Template.bind({})
+
+export default componentMeta

package/dist/components/Collapsible/index.tsx

@@ -0,0 +1,124 @@
+import React, { useState, useEffect } from 'react'
+import Icon, { Props as iconProps } from '@components/Icon'
+import classNames from 'classnames'
+
+export interface Props {
+  id?: string
+  className?: string
+  title?: string
+  subtitle?: string
+  boldTitle?: boolean
+  borderTop?: boolean
+  borderBottom?: boolean
+  showBottomLine?: boolean
+  iconProps?: iconProps
+  children?: any
+}
+
+const Collapsible = ({
+  id,
+  className,
+  title,
+  subtitle,
+  boldTitle,
+  borderTop,
+  borderBottom,
+  showBottomLine,
+  iconProps,
+  children
+}: Props): JSX.Element => {
+  const [expanded, setExpanded] = useState(false)
+
+  useEffect(() => {
+    const coll = document.getElementsByClassName('collapsible')
+    let i: number
+
+    for (i = 0; i < coll.length; i++) {
+      coll[i].addEventListener('click', function (this: any, err: any) {
+        const content = this.nextElementSibling
+
+        const scrollHeight: string = content.scrollHeight.toString()
+        if (content.style.maxHeight === '0px') {
+          content.style.maxHeight = `${scrollHeight}px`
+        } else {
+          content.style.maxHeight = '0px'
+        }
+      })
+    }
+  })
+
+  const headingClassList = classNames({
+    'border-b': borderBottom,
+    'border-t': borderTop
+  }, 'w-auto flex text-center collapsible')
+
+  const classList = classNames(className, 'bg-primary text-white hover:bg-white hover:text-primary transition-opactiy duration-300')
+
+  const padding = classNames({
+    'pt-7': title !== undefined && subtitle !== undefined,
+    'pt-4': title !== undefined && subtitle === undefined
+  })
+
+  const textSubstitutePadding = classNames({
+    'pb-4': title === undefined && subtitle === undefined
+  })
+
+  const contentWrapperClassList = classNames({
+    'max-h-max my-2': expanded,
+    'max-h-0': !expanded
+  }, 'w-auto overflow-hidden px-4 bg-white text-primary')
+
+  const childrenClassList = classNames(padding, 'w-full pr-8 text-right')
+
+  const expandItem = (e: any): void => {
+    const content = e.currentTarget.nextElementSibling
+    const scrollHeight: string = content.scrollHeight.toString()
+    if (!expanded) {
+      content.style.maxHeight = `${scrollHeight}px`
+    } else {
+      content.style.maxHeight = '0px'
+    }
+    setExpanded(!expanded)
+  }
+
+  return (
+    <div
+      id={id}
+      className={classList}
+    >
+      <div
+        onClick={e => expandItem(e)}
+        className={headingClassList}
+      >
+        {(iconProps !== undefined) &&
+          <div
+            className={`pl-4 text-left ${padding} ${textSubstitutePadding}`}
+          >
+            <Icon {...iconProps} />
+          </div>}
+        {(title !== undefined || subtitle !== undefined) &&
+          <div className='w-full pl-4 py-4 text-left'>
+            {title !== undefined && <h4>{title}</h4>}
+            {subtitle !== undefined && <h5><small>{subtitle}</small></h5>}
+          </div>}
+        {children !== undefined &&
+          <div className={childrenClassList}>
+            <Icon
+              type={expanded ? 'chevron-up' : 'chevron-down'}
+              colour='white'
+              bgColour='primary'
+            />
+          </div>}
+      </div>
+      {children !== undefined &&
+        <div
+          className={contentWrapperClassList}
+          style={{ transition: 'max-height 0.2s ease-out' }}
+        >
+          {children}
+        </div>}
+    </div>
+  )
+}
+
+export default Collapsible

package/dist/components/Column/Column.stories.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import Column from './index'
+import { idAndClassName } from '@utils/controls'
+import CardWithTopImage from '@components/CardWithTopImage'
+import logo from '@assets/images/primary-logo.png'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+const cardChild = (
+  <CardWithTopImage
+    id='cardwithtopimage'
+    imageProps={{
+      image: logo,
+      roundedFull: true
+    }}
+  >
+    <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>
+)
+
+const componentMeta: ComponentMeta<typeof Column> = {
+  title: 'Trepur Components/Rupert Bennett/Atoms/Column',
+  component: Column,
+  parameters: {},
+  argTypes: {
+    ...idAndClassName,
+    sm: {
+      type: { name: 'number', required: false },
+      description: 'The number of sections out of 12 that the component should span on sm screens',
+      table: {
+        type: { summary: 'number' }
+      }
+    },
+    md: {
+      type: { name: 'number', required: false },
+      description: 'The number of sections out of 12 that the component should span on md screens',
+      table: {
+        type: { summary: 'number' }
+      }
+    },
+    lg: {
+      type: { name: 'number', required: false },
+      description: 'The number of sections out of 12 that the component should span on lg screens',
+      table: {
+        type: { summary: 'number' }
+      }
+    },
+    xl: {
+      type: { name: 'number', required: false },
+      description: 'The number of sections out of 12 that the component should span on xl screens',
+      table: {
+        type: { summary: 'number' }
+      }
+    },
+    children: {
+      type: { name: 'other', value: 'string | React.ReactNode' },
+      description: 'The child elements to show in the component',
+      table: {
+        type: {
+          summary: 'Array'
+        },
+        defaultValue: { summary: 'undefined' }
+      }
+    }
+  },
+  args: {
+    sm: 12,
+    md: 8,
+    lg: 4,
+    xl: 2,
+    className: 'bg-facebook md:bg-twitter lg-whatsapp xl:bg-linkedin border',
+    children: cardChild
+  }
+}
+
+const Template: ComponentStory<typeof Column> = (args) => <Column {...args} />
+
+export const _Column = Template.bind({})
+
+export default componentMeta