trepur_components 1.0.2 → 1.0.4

package/dist/components/Image/index.tsx

@@ -1,113 +0,0 @@
-import React, { useState } from 'react'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  image?: string
-  altText?: string
-  title?: string
-  rounded?: boolean
-  roundedFull?: boolean
-  height?: number
-  width?: number
-  overlayText?: string
-  centerAligned?: boolean
-}
-
-const Image = ({
-  id,
-  className,
-  image,
-  altText,
-  title,
-  rounded = false,
-  roundedFull = false,
-  height = 8,
-  width = 8,
-  overlayText,
-  centerAligned = false
-}: Props): JSX.Element => {
-  const [isHovering, setIsHovering] = useState(false)
-  const opacity = classNames({
-    'opacity-80': isHovering,
-    'opacity-0': !isHovering
-  })
-
-  const widthClassList = classNames({
-    'w-6': width === 1,
-    'w-10': width === 2,
-    'w-14': width === 3,
-    'w-16': width === 4,
-    'w-20': width === 5,
-    'w-24': width === 6,
-    'w-28': width === 7,
-    'w-32': width === 8,
-    'w-36': width === 9,
-    'w-40': width === 10,
-    'w-44': width === 11,
-    'w-full': (width === undefined) || (![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(width))
-  })
-
-  const heightClassList = classNames({
-    'h-6': height === 1,
-    'h-10': height === 2,
-    'h-14': height === 3,
-    'h-16': height === 4,
-    'h-20': height === 5,
-    'h-24': height === 6,
-    'h-28': height === 7,
-    'h-32': height === 8,
-    'h-36': height === 9,
-    'h-40': height === 10,
-    'h-44': height === 11,
-    'h-full': (height === undefined) || (![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(height))
-  })
-
-  const imageClassList = classNames({
-    'rounded-2xl': rounded,
-    'rounded-full': roundedFull,
-    'mx-auto': centerAligned
-  }, className, widthClassList, heightClassList)
-
-  const overlayClassList = classNames(
-    widthClassList,
-    heightClassList,
-    opacity,
-    'absolute z-10 transition-opacity duration-700 bg-white'
-  )
-
-  const overlayTextWrapperClassList = classNames(
-    widthClassList,
-    heightClassList,
-    opacity,
-    'flex absolute z-20 transition-opacity duration-700'
-  )
-
-  const overlayTextClassList = 'm-auto text-center text-primary'
-
-  return (
-    <>
-      {overlayText !== undefined &&
-        <>
-          <div className={overlayClassList} />
-          <div
-            className={overlayTextWrapperClassList}
-            onMouseEnter={() => setIsHovering(true)}
-            onMouseLeave={() => setIsHovering(false)}
-          >
-            <p className={overlayTextClassList}>{overlayText}</p>
-          </div>
-        </>}
-      <img
-        id={id}
-        className={imageClassList}
-        src={image}
-        {...(altText !== undefined && { alt: altText })}
-        {...(title !== undefined && { title })}
-      />
-    </>
-  )
-}
-
-export default Image

package/dist/components/ImageLink/ImageLink.stories.tsx

@@ -1,60 +0,0 @@
-import React from 'react'
-import { idAndClassName } from '@utils/controls'
-import Column from '@components/Column'
-import ImageLink from './index'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof ImageLink> = {
-  title: 'Trepur Components/Other/Organisms/Image Link',
-  component: ImageLink,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    title: {
-      description: '',
-      control: 'text',
-      table: {
-        category: ''
-      }
-    },
-    image: {
-      description: '',
-      control: 'text',
-      table: {
-        category: ''
-      }
-    }
-  },
-  args: {
-    image: 'https://picsum.photos/400/400',
-    link: '/'
-  }
-}
-
-const Template: ComponentStory<typeof ImageLink> = (args) => <Column sm={3} md={3}><ImageLink {...args} /></Column>
-
-export const _ImageLink = Template.bind({})
-_ImageLink.args = {}
-
-export const _ImageLinkWithTitle = Template.bind({})
-_ImageLinkWithTitle.args = {
-  title: 'Title'
-}
-
-export const _ImageLinkWithButton = Template.bind({})
-_ImageLinkWithButton.args = {
-  buttonProps: {
-    children: 'Button 1'
-  }
-}
-
-export const _ImageLinkRounded = Template.bind({})
-_ImageLinkRounded.args = {
-  title: 'Title',
-  buttonProps: {
-    children: 'Button 1'
-  },
-  rounded: true
-}
-
-export default componentMeta

package/dist/components/ImageLink/index.tsx

@@ -1,62 +0,0 @@
-import React from 'react'
-import Button, { Props as buttonProps } from '@components/Button'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  image?: string
-  altText?: string
-  title?: string
-  link?: string
-  rounded?: boolean
-  openInNewTab?: boolean
-  buttonProps?: buttonProps
-}
-const ImageLink = ({
-  id,
-  className,
-  image,
-  altText,
-  title,
-  link,
-  rounded,
-  openInNewTab,
-  buttonProps
-}: Props): JSX.Element => {
-  const classList = classNames(className, 'cursor-pointer lg:mx-3 md:mx-1 mx-1 lg:mb-5 md:mb-2 mb-2 hover:opacity-50 overflow-hidden text-center')
-
-  const roundedClass = classNames({
-    'rounded-full': rounded
-  })
-
-  return (
-    <a
-      id={id}
-      href={link}
-      {...(openInNewTab !== false && { target: 'blank' })}
-    >
-      <div className={roundedClass + ' ' + classList + ' relative overflow-hidden'}>
-        <img
-          src={image}
-          alt={altText}
-          className='object-cover w-full h-full'
-        />
-        {title !== undefined &&
-          <h1
-            className='absolute bg-black text-white py-2 mt-4 top-0 inset-x-0 text-center'
-          >
-            {title}
-          </h1>}
-        {buttonProps?.children !== undefined &&
-          <Button
-            className='absolute mx-8 mb-4 bottom-0 inset-x-0 text-center'
-          >
-            {buttonProps.children}
-          </Button>}
-      </div>
-    </a>
-  )
-}
-
-export default ImageLink

package/dist/components/ImageLinkList/ImageLinkList.stories.tsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import { idAndClassName } from '@utils/controls'
-import ImageLinkList, { Props as imageLinkListProps } from './index'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const getLinks = (): any => {
-  return new Array(16).fill(null).map(() => {
-    return {
-      image: 'https://picsum.photos/400/400',
-      title: 'Hi',
-      buttonProps: {
-        children: <p>button</p>
-      }
-    }
-  })
-}
-
-const componentMeta: ComponentMeta<typeof ImageLinkList> = {
-  title: 'Trepur Components/Other/Organisms/Image Link List',
-  component: ImageLinkList,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName
-  },
-  args: {
-    items: getLinks()
-  }
-}
-
-const Template: ComponentStory<typeof ImageLinkList> = (args) => <ImageLinkList {...args} />
-
-export const _ImageLinkList = Template.bind({})
-
-export default componentMeta

package/dist/components/ImageLinkList/index.tsx

@@ -1,33 +0,0 @@
-import React from 'react'
-import ImageLink, { Props as imageLinkProps } from '../ImageLink/index'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  items?: Array<imageLinkProps>
-}
-const ImageLinkList = ({
-  id,
-  className,
-  items
-}: Props): JSX.Element => {
-  const classList = classNames(className, 'grid md:grid-cols-4 sm:grid-cols-2')
-
-  return (
-    <div id={id} className={classList}>
-      {items?.map((item, i: number) => {
-        return (
-          <ImageLink
-            key={`image_link_${i + 0}`}
-            altText='image'
-            image={item.image}
-            title={item.title}
-          />
-        )
-      })}
-    </div>
-  )
-}
-
-export default ImageLinkList

package/dist/components/InformationIcon/InformationIcon.stories.tsx

@@ -1,86 +0,0 @@
-import React from 'react'
-import InformationIcon from './index'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { idAndClassName } from '@utils/controls'
-
-const componentMeta: ComponentMeta<typeof InformationIcon> = {
-  title: 'Trepur Components/Rupert Bennett/Atoms/Information Icon',
-  component: InformationIcon,
-  argTypes: {
-    ...idAndClassName,
-    text: {
-      type: { name: 'string', required: false },
-      description: 'The text to display on the component',
-      table: {
-        type: { summary: 'string' }
-      }
-    },
-    number: {
-      type: { name: 'number', required: false },
-      description: 'The number to display on the component',
-      table: {
-        type: { summary: 'number' }
-      }
-    },
-    bordered: {
-      type: { name: 'boolean', required: false },
-      description: 'Applies a border to the component',
-      table: {
-        type: { summary: 'boolean' }
-      },
-      defaultValue: 'false'
-    },
-    rounded: {
-      type: { name: 'boolean', required: false },
-      description: 'Enabled rounded corners on the component',
-      table: {
-        type: { summary: 'boolean' }
-      },
-      defaultValue: 'false'
-    },
-    withAnimation: {
-      type: { name: 'boolean', required: false },
-      description: 'Enabled the counter animation on the component',
-      table: {
-        type: { summary: 'boolean' }
-      },
-      defaultValue: 'false'
-    },
-    iconProps: {
-      type: { name: 'string', required: false },
-      description: 'The props to pass to the icon to display on the component',
-      table: {
-        type: { summary: 'string' }
-      }
-    },
-    theme: {
-      type: { name: 'string', required: false },
-      options: ['dark', 'light'],
-      description: 'The variant of component to render',
-      table: { type: { summary: 'light' }, defaultValue: { summary: 'light' } },
-      defaultValue: 'light',
-      control: { type: 'radio' }
-    }
-  },
-  args: {
-    text: 'Projects Completed',
-    number: 21,
-    bordered: true,
-    rounded: true,
-    withAnimation: true,
-    theme: 'dark',
-    iconProps: {
-      type: 'heart',
-      size: 2,
-      className: 'mr-4 mb-8',
-      colour: 'white',
-      bgColour: 'primary'
-    }
-  }
-}
-
-const Template: ComponentStory<typeof InformationIcon> = (args) => <InformationIcon {...args} />
-
-export const _InformationIcon = Template.bind({})
-
-export default componentMeta

package/dist/components/InformationIcon/index.tsx

@@ -1,84 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import Icon, { Props as iconProps } from '@components/Icon'
-import classNames from 'classnames'
-
-export interface Props {
-  id: string
-  className?: string
-  text?: string
-  number: number
-  bordered?: boolean
-  rounded?: boolean
-  withAnimation?: boolean
-  iconProps?: iconProps
-  theme?: 'dark' | 'light'
-}
-
-const InformationIcon = ({
-  id,
-  className,
-  text,
-  number,
-  bordered = false,
-  rounded = false,
-  withAnimation = false,
-  iconProps,
-  theme = 'light'
-}: Props): JSX.Element => {
-  const colours = theme === 'dark' ? 'placeholder-white bg-primary text-white' : 'placeholder-primary bg-white text-primary'
-  const loaded = useRef(false)
-
-  useEffect(() => {
-    const element = document.getElementById(`${id}_number`)
-    const observer = new IntersectionObserver((entries, observer) => {
-      entries.forEach(entry => {
-        if (entry.intersectionRatio >= 0.1 && !loaded.current) {
-          loaded.current = true
-          counterAnimation(
-            document.getElementById(`${id}_number`), 0, number, 3000)
-        }
-      })
-    }, { threshold: 1 })
-    ;(element != null) && withAnimation && observer.observe(element)
-  }, [])
-
-  const wrapperClasses = 'h-96 flex items-center text-center ease-out duration-300'
-
-  const classList = classNames({
-    border: bordered,
-    'rounded-2xl': rounded
-  },
-  className,
-  colours,
-  'flex flex-col justify-center w-full h-full items-center ease-out duration-300 text-md lg:text-md hover:text-lg')
-
-  const counterAnimation = (obj: any, start: number, end: number, duration: number): void => {
-    let startTimestamp: number
-    const step = (timestamp: number): void => {
-      startTimestamp = timestamp
-      const progress = Math.min((timestamp - startTimestamp) / duration, 1)
-      obj.innerHTML = Math.floor(progress * (end - start) + start)
-      if (progress < 1) {
-        window.requestAnimationFrame(step)
-      }
-    }
-    window.requestAnimationFrame(step)
-  }
-
-  return (
-    <div
-      id={id}
-      className={wrapperClasses}
-    >
-      <div className={classList}>
-        {(iconProps != null) &&
-          <Icon {...iconProps} />}
-        {number !== undefined &&
-          <p>{number}</p>}
-        <p>{text}</p>
-      </div>
-    </div>
-  )
-}
-
-export default InformationIcon

package/dist/components/Input/Input.stories.tsx

@@ -1,99 +0,0 @@
-import React from 'react'
-import Input from './index'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof Input> = {
-  title: 'Trepur Components/Rupert Bennett/Atoms/Input',
-  component: Input,
-  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' }
-      }
-    },
-    label: {
-      description: '',
-      control: 'text',
-      table: {
-        category: ''
-      }
-    },
-    placeholder: {
-      description: '',
-      control: 'text',
-      table: {
-        category: ''
-      }
-    },
-    bold: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: ''
-      }
-    },
-    required: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: ''
-      }
-    },
-    hasValidation: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: ''
-      }
-    },
-    errors: {
-      description: '',
-      control: 'array',
-      table: {
-        category: ''
-      }
-    },
-    value: {
-      description: 'The default value of the input',
-      control: 'text',
-      table: {
-        category: ''
-      }
-    },
-    theme: {
-      type: { name: 'string', required: false },
-      options: ['dark', 'light'],
-      description: 'The variant of button to render',
-      table: { type: { summary: 'dark' }, defaultValue: { summary: 'dark' } },
-      defaultValue: 'dark',
-      control: { type: 'radio' }
-    }
-  },
-  args: {
-    label: 'This is a label',
-    placeholder: 'This is a placeholder',
-    errors: [
-      'This is an error',
-      'This is another error',
-      'This is a third error'
-    ]
-  }
-}
-
-const Template: ComponentStory<typeof Input> = (args) => <Input {...args} />
-
-export const _Input = Template.bind({})
-
-export default componentMeta

package/dist/components/Input/index.tsx

@@ -1,126 +0,0 @@
-import React from 'react'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  labelClasses?: string
-  inputClasses?: string
-  autoComplete?: string
-  disabled?: boolean
-  formId?: string
-  height?: string
-  maxLength?: number
-  minLength?: number
-  pattern?: string
-  required?: boolean
-  readOnly?: boolean
-  label?: string
-  type?: string
-  name?: string
-  placeholder?: string
-  hasValidation?: boolean
-  bold?: boolean
-  autoFocus?: boolean
-  onChange?: (e: any) => void
-  onBlur?: () => void
-  onFocus?: () => void
-  errors?: string[]
-  value?: string
-  theme?: 'dark' | 'light'
-}
-
-const Input = ({
-  id,
-  className,
-  labelClasses,
-  inputClasses,
-  autoComplete,
-  disabled,
-  formId,
-  height,
-  maxLength,
-  minLength,
-  pattern,
-  required,
-  readOnly,
-  autoFocus,
-  label,
-  type,
-  name,
-  placeholder,
-  bold,
-  onChange,
-  onBlur,
-  onFocus,
-  hasValidation,
-  errors,
-  value,
-  theme
-}: Props): JSX.Element => {
-  const colours = theme === 'dark' ? 'placeholder-white bg-primary text-white' : 'placeholder-primary bg-white text-primary'
-  const classList = classNames(className, colours, 'flex flex-col')
-
-  const labelClassList = classNames({
-    'font-bold': bold
-  }, labelClasses, 'w-auto pb-2')
-
-  const inputClassList = classNames({
-  }, inputClasses, colours, 'border px-2 py-2 mb-2 rounded-md')
-
-  const newId = id !== undefined ? `-${id}` : ''
-  return (
-    <div
-      id={id}
-      className={classList}
-    >
-      {label !== undefined &&
-        <label
-          id={`label${newId}`}
-          className={labelClassList}
-          htmlFor={`input${newId}`}
-        >
-          <p>
-            {label}
-            {required === true &&
-              <span className='text-red'>*</span>}
-          </p>
-        </label>}
-      <input
-        id={`input${newId}`}
-        className={inputClassList}
-        autoComplete={autoComplete}
-        disabled={disabled}
-        form={formId}
-        height={height}
-        maxLength={maxLength}
-        minLength={minLength}
-        pattern={pattern}
-        required={required}
-        readOnly={readOnly}
-        type={type}
-        name={name}
-        value={value}
-        placeholder={placeholder}
-        onChange={onChange}
-        onBlur={onBlur}
-        onFocus={onFocus}
-      />
-      {hasValidation === true &&
-        <div id={`errors${newId}`}>
-          {errors?.map((error, i) => {
-            return (
-              <p
-                key={`error_msg_${i + 0}`}
-                className='text-red text-sm'
-              >
-                {error}
-              </p>
-            )
-          })}
-        </div>}
-    </div>
-  )
-}
-
-export default Input