trepur_components 1.0.2 → 1.0.4

package/dist/components/Carousel/Carousel.stories.tsx

@@ -1,369 +0,0 @@
-import React from 'react'
-import Carousel from './index'
-import { idAndClassName } from '@utils/controls'
-import Card from '@components/Card'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import logo from '@assets/images/primary-logo.png'
-
-const slides = [
-  <Card
-    key='card_1'
-    className='keen-slider__slide'
-    image={logo}
-    subTitle='This is a subtitle'
-    description='This is a description paragraph'
-    extraText='This is another paragraph'
-    rounded
-    bordered
-  />,
-  <Card
-    key='card_2'
-    className='keen-slider__slide'
-    image={logo}
-    subTitle='This is a subtitle'
-    description='This is a description paragraph'
-    extraText='This is another paragraph'
-    rounded
-    bordered
-  />,
-  <Card
-    key='card_3'
-    className='keen-slider__slide'
-    image={logo}
-    subTitle='This is a subtitle'
-    description='This is a description paragraph'
-    extraText='This is another paragraph'
-    rounded
-    bordered
-  />,
-  <Card
-    key='card_4'
-    className='keen-slider__slide'
-    image={logo}
-    subTitle='This is a subtitle'
-    description='This is a description paragraph'
-    extraText='This is another paragraph'
-    rounded
-    bordered
-  />
-]
-
-const componentMeta: ComponentMeta<typeof Carousel> = {
-  title: 'Trepur Components/Rupert Bennett/Organisms/Carousel',
-  component: Carousel,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    breakpoints: {
-      type: { name: 'number', required: false },
-      description: 'The slide to begin on',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    defaultAnimation: {
-      type: { name: 'number', required: false },
-      description: 'The slide to begin on',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    drag: {
-      type: { name: 'boolean', required: false },
-      description: 'Can the carousel be dragged or not',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    dragSpeed: {
-      type: { name: 'number', required: false },
-      description: 'The slide to begin on',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    initial: {
-      type: { name: 'number', required: false },
-      description: 'The slide to begin on',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    loop: {
-      type: { name: 'boolean', required: false },
-      description: 'loop the end back to the start',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    mode: {
-      type: { name: 'string', required: false },
-      description: 'snap, free or snap-free',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    range: {
-      type: { name: 'number', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    renderMode: {
-      type: { name: 'number', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    rtl: {
-      type: { name: 'boolean', required: false },
-      description: 'to display right to left',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    rubberband: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    slides: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    vertical: {
-      type: { name: 'boolean', required: false },
-      description: 'displays the slider vertically',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    animationStarted: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    animationStopped: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    animationEnded: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    destroyed: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    detailsChanged: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    dragged: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    dragStarted: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    dragChecked: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    dragEnded: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    beforeOptionsChanged: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    optionsChanged: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    updated: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    perView: {
-      type: { name: 'number', required: false },
-      description: 'The number of slides to show at a time',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    spacing: {
-      type: { name: 'number', required: false },
-      description: 'The spacing left and right of each slide',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    number: {
-      type: { name: 'number', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    origin: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    }
-  },
-  args: {
-    loop: true,
-    drag: true,
-    slides,
-    spacing: 16,
-    perView: 4,
-    arrows: {
-      visible: true
-    },
-    dots: {
-      visible: true,
-      colours: 'bg-primary',
-      activeColours: 'bg-secondary'
-    }
-  }
-}
-
-const Template: ComponentStory<typeof Carousel> = (args) => <Carousel {...args} />
-
-export const _Carousel = Template.bind({})
-
-export default componentMeta

package/dist/components/Carousel/index.tsx

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

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

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