trepur_components 1.0.2 → 1.0.4

package/dist/components/Form/index.tsx

@@ -1,58 +0,0 @@
-import React from 'react'
-import Button, { Props as buttonProps } from '@components/Button'
-import Input, { Props as inputProps } from '@components/Input'
-
-export interface Props {
-  id?: string
-  className?: string
-  title?: string
-  titleClasses?: string
-  onSubmit?: () => void
-  ref?: string
-  components?: Array<inputProps & buttonProps & { htmlType: string }>
-}
-
-const Form = ({
-  id,
-  className,
-  title,
-  titleClasses,
-  onSubmit,
-  ref,
-  components
-}: Props): JSX.Element => {
-  return (
-    <>
-      <h1 className={titleClasses}>{title}</h1>
-      <form id={id} ref={ref} className={className} onSubmit={onSubmit}>
-        {components?.map((component, i) => {
-          if (component?.htmlType === 'Input') {
-            return (
-              <Input
-                key={`input_${i + 0}`}
-                className={component?.className}
-                label={component?.label}
-                placeholder={component?.placeholder}
-                type={component?.type}
-                name={component?.name}
-              />
-            )
-          } else if (component.htmlType === 'Button') {
-            return (
-              <Button
-                key={`button_${i + 0}`}
-                type={component?.type}
-                onClick={component?.onClick}
-                className={component?.className}
-              >
-                {component?.children}
-              </Button>
-            )
-          } else return <></>
-        })}
-      </form>
-    </>
-  )
-}
-
-export default Form

package/dist/components/FyreCard/FyreCard.stories.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import FyreCard from './index'
-import { idAndClassName } from '@utils/controls'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof FyreCard> = {
-  title: 'Trepur Components/Other/Organisms/Fyre Card',
-  component: FyreCard,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    image: {
-      description: '',
-      control: 'text',
-      table: {
-        category: ''
-      }
-    }
-  },
-  args: {
-    image: 'https://picsum.photos/500/300'
-  }
-}
-
-const Template: ComponentStory<typeof FyreCard> = (args) => <FyreCard {...args} />
-
-export const _FyreCard = Template.bind({})
-
-export default componentMeta

package/dist/components/FyreCard/index.tsx

@@ -1,46 +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
-  imageClass?: string
-  altText?: string
-  bordered?: string
-  buttonProps?: buttonProps
-}
-const FyreCard = ({
-  id,
-  className,
-  image,
-  imageClass,
-  altText,
-  bordered,
-  buttonProps
-}: Props): JSX.Element => {
-  const classList = classNames({
-    'border border-grey border-opacity-100': bordered
-  }, className, 'flex flex-col')
-  const imageClassList = classNames(imageClass, 'w-full')
-
-  return (
-    <div
-      key={id}
-      id={id}
-      className={classList}
-    >
-      <div className='card-content flex flex-1 flex-col'>
-        <div>
-          <img className={imageClassList} src={image} alt={altText} />
-        </div>
-        <div className='flex justify-end'>
-          <Button {...buttonProps}>{buttonProps?.children}</Button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default FyreCard

package/dist/components/Greeting/Greeting.stories.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import Greeting from './index'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { idAndClassName } from '@utils/controls'
-
-const componentMeta: ComponentMeta<typeof Greeting> = {
-  title: 'Trepur Components/Rupert Bennett/Atoms/Greeting',
-  component: Greeting,
-  argTypes: {
-    ...idAndClassName,
-    morningMessage: {
-      type: { name: 'string', required: false },
-      description: 'Defines the morning message for the greeting component',
-      table: {
-        type: { summary: 'string' }
-      }
-    },
-    afternoonMessage: {
-      type: { name: 'string', required: false },
-      description: 'Defines the afternoon message for the greeting component',
-      table: {
-        type: { summary: 'string' }
-      }
-    },
-    eveningMessage: {
-      type: { name: 'string', required: false },
-      description: 'Defines the evening message for the greeting component',
-      table: {
-        type: { summary: 'string' }
-      }
-    }
-  },
-  args: {
-    morningMessage: 'What a beautiful morning it is today'
-  }
-}
-
-const Template: ComponentStory<typeof Greeting> = (args) => <Greeting {...args} />
-
-export const _Greeting = Template.bind({})
-
-export default componentMeta

package/dist/components/Greeting/index.tsx

@@ -1,46 +0,0 @@
-import React from 'react'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  morningMessage?: string
-  afternoonMessage?: string
-  eveningMessage?: string
-}
-
-const Greeting = ({
-  id,
-  className,
-  morningMessage = 'Good morning',
-  afternoonMessage = 'Good afternoon',
-  eveningMessage = 'Good evening'
-}: Props): JSX.Element => {
-  const today = new Date()
-  const hours = `0${today.getHours().toString()}`.slice(-2)
-  const minutes = `0${today.getMinutes().toString()}`.slice(-2)
-  const seconds = `0${today.getSeconds().toString()}`.slice(-2)
-  const time = parseInt(`${hours}${minutes}${seconds}`)
-
-  let message
-  if (time < 120000) {
-    message = morningMessage
-  } else if (time > 115959 && time < 170000) {
-    message = afternoonMessage
-  } else if (time > 165959) {
-    message = eveningMessage
-  }
-
-  const classList = classNames(className)
-
-  return (
-    <p
-      id={id}
-      className={classList}
-    >
-      {message}
-    </p>
-  )
-}
-
-export default Greeting

package/dist/components/HamburgerIcon/HamburgerIcon.stories.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import HamburgerIcon from './index'
-
-const componentMeta: ComponentMeta<typeof HamburgerIcon> = {
-  title: 'Trepur Components/Rupert Bennett/Atoms/Hamburger Icon',
-  component: HamburgerIcon,
-  parameters: {
-    docs: {
-      description: {
-        component: 'An icon component'
-      }
-    },
-    layout: 'padded'
-  },
-  argTypes: {
-    id: {
-      type: { name: 'string', required: false },
-      description: 'HTML id attribute',
-      table: { type: { summary: 'string' } }
-    },
-    className: {
-      type: { name: 'string', required: false },
-      description: 'Used to pass any additional classes to the component',
-      table: { type: { summary: 'string' } }
-    },
-    opened: {
-      type: { name: 'boolean', required: false },
-      description: 'If this component is disabled and can not be interacted',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'boolean' }
-      }
-    },
-    onClick: {
-      type: { name: 'function', required: false },
-      description: 'Function to be called when the button is clicked',
-      table: { type: { summary: 'function' } }
-    }
-  },
-  args: {
-    opened: false
-  }
-}
-
-const Template: ComponentStory<typeof HamburgerIcon> = (args) => <HamburgerIcon {...args} />
-
-export const _HamburgerIcon = Template.bind({})
-
-export default componentMeta

package/dist/components/HamburgerIcon/index.tsx

@@ -1,65 +0,0 @@
-import React, { useState } from 'react'
-import classNames from 'classnames'
-import Button from '@components/Button'
-
-export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
-  opened?: boolean
-  onClick?: React.MouseEventHandler
-}
-
-const HamburgerIcon = ({
-  id,
-  className,
-  onClick
-}: Props): JSX.Element => {
-  const [opened, setOpened] = useState(false)
-  const lineOneClassList = classNames({
-    'origin-top-left rotate-45 translate-x-1 -translate-y-0.5': opened
-  }, 'origin-top-left transition-transform duration-200 ease-linear')
-
-  const lineTwoClassList = classNames({
-    'opacity-0': opened
-  }, 'opacity-100 transition-opacity duration-200 ease-linear')
-
-  const lineThreeClassList = classNames({
-    'origin-bottom-left -rotate-45 translate-x-1 translate-y-px': opened
-  }, 'origin-bottom-left transition-transform duration-200 ease-linear')
-
-  const toggleOpened = (e: any): void => {
-    setOpened(!opened)
-    onClick?.(e)
-  }
-
-  return (
-    <Button
-      id={id}
-      className={className}
-      onClick={(e) => toggleOpened(e)}
-      variant='primary'
-      type='icon'
-    >
-      <svg
-        className='mx-auto overflow-visible fill-white group-hover:fill-primary transition-backgroundColor duration-500 transform'
-        width='24'
-        height='24'
-        viewBox='0 0 24 15'
-        xmlns='http://www.w3.org/2000/svg'
-      >
-        <path
-          className={lineOneClassList}
-          d='M0 1.5C0 0.947715 0.447715 0.5 1 0.5H21C21.5523 0.5 22 0.947715 22 1.5C22 2.05228 21.5523 2.5 21 2.5H1C0.447716 2.5 0 2.05228 0 1.5Z'
-        />
-        <path
-          className={lineTwoClassList}
-          d='M0 7.5C0 6.94772 0.447715 6.5 1 6.5H21C21.5523 6.5 22 6.94772 22 7.5C22 8.05228 21.5523 8.5 21 8.5H1C0.447716 8.5 0 8.05228 0 7.5Z'
-        />
-        <path
-          className={lineThreeClassList}
-          d='M0 13.5C0 12.9477 0.447715 12.5 1 12.5H21C21.5523 12.5 22 12.9477 22 13.5C22 14.0523 21.5523 14.5 21 14.5H1C0.447716 14.5 0 14.0523 0 13.5Z'
-        />
-      </svg>
-    </Button>
-  )
-}
-
-export default HamburgerIcon

package/dist/components/Icon/Icon.stories.tsx

@@ -1,102 +0,0 @@
-import React from 'react'
-import Icon from './index'
-import { idAndClassName } from '@utils/controls'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof Icon> = {
-  title: 'Trepur Components/Rupert Bennett/Atoms/Icon',
-  component: Icon,
-  argTypes: {
-    ...idAndClassName,
-    type: {
-      options: ['heart', 'arrow-up', 'arrow-down', 'multiply', 'burger', 'bars'],
-      type: { name: 'string', required: false },
-      description: 'The name of the icon to display in the component',
-      table: {
-        type: { summary: 'string' }
-      },
-      control: 'select'
-    },
-    size: {
-      type: { name: 'number', required: false },
-      description: 'The size of the icon to show in the component',
-      table: {
-        type: { summary: 'number' }
-      }
-    },
-    animation: {
-      type: { name: 'string', required: false },
-      options: ['none', 'pulse', 'spin', 'beat'],
-      description: 'Type of annimation to apply to the component',
-      table: {
-        type: { summary: 'string' }
-      },
-      control: 'select'
-    },
-    reverseSpin: {
-      type: { name: 'boolean', required: false },
-      description: 'To reverse the animation on the component',
-      table: {
-        type: { summary: 'boolean' }
-      },
-      defaultValue: 'false'
-    },
-    hollow: {
-      type: { name: 'boolean', required: false },
-      description: 'To render a hollow version of the icon in component',
-      table: {
-        type: { summary: 'boolean' }
-      },
-      defaultValue: 'false'
-    },
-    colour: {
-      type: { name: 'string', required: false },
-      options: ['primary', 'secondary', 'white', 'black', 'gold'],
-      description: 'The font colour of the component',
-      table: {
-        type: { summary: 'string' }
-      },
-      defaultValue: 'primary',
-      control: 'select'
-    },
-    bgColour: {
-      type: { name: 'string', required: false },
-      options: ['primary', 'secondary', 'white', 'black', 'gold'],
-      description: 'The background colour of the component',
-      table: {
-        type: { summary: 'string' }
-      },
-      defaultValue: 'secondary',
-      control: 'select'
-    },
-    rounded: {
-      type: { name: 'boolean', required: false },
-      description: 'Sets the component to a circle shape',
-      table: {
-        type: { summary: 'boolean' }
-      },
-      defaultValue: 'false'
-    },
-    brand: {
-      type: { name: 'boolean', required: false },
-      description: 'Set to true if the icon type to render is a brand image',
-      table: {
-        type: { summary: 'boolean' }
-      },
-      defaultValue: 'false'
-    }
-  },
-  args: {
-    type: 'heart',
-    size: 3,
-    animation: 'none',
-    hoverBgColour: 'primary',
-    hoverColour: 'secondary'
-  }
-}
-
-const Template: ComponentStory<typeof Icon> = (args) => <Icon {...args} />
-
-export const _Icon = Template.bind({})
-
-export default componentMeta

package/dist/components/Icon/index.tsx

@@ -1,112 +0,0 @@
-import React from 'react'
-import classNames from 'classnames'
-import { Colours } from '@utils/controls'
-
-export interface Props {
-  id?: string
-  className?: string
-  type: string
-  size?: number
-  animation?: 'pulse' | 'none'
-  reverseSpin?: boolean
-  hollow?: boolean
-  colour?: Colours
-  bgColour?: Colours
-  hoverColour?: Colours
-  hoverBgColour?: Colours
-  rounded?: boolean
-  brand?: boolean
-}
-
-const Icon = ({
-  id,
-  className,
-  type,
-  size = 1,
-  animation = 'none',
-  reverseSpin = false,
-  hollow = false,
-  colour = 'primary',
-  bgColour = 'secondary',
-  hoverColour = 'primary',
-  hoverBgColour = 'secondary',
-  rounded = false,
-  brand = false
-}: Props): JSX.Element => {
-  const fontColour: { [key in Colours]: string } = {
-    primary: 'text-primary',
-    secondary: 'text-secondary',
-    white: 'text-white',
-    black: 'text-black',
-    gold: 'text-gold'
-  }
-
-  const backgroundColour: { [key in Colours]: string } = {
-    primary: 'bg-primary',
-    secondary: 'bg-secondary',
-    white: 'bg-white',
-    black: 'bg-black',
-    gold: 'bg-gold'
-  }
-
-  const hoverFontColour: { [key in Colours]: string } = {
-    primary: 'group-hover:text-primary',
-    secondary: 'group-hover:text-secondary',
-    white: 'group-hover:text-white',
-    black: 'group-hover:text-black',
-    gold: 'group-hover:text-gold'
-  }
-
-  const hoverBackgroundColour: { [key in Colours]: string } = {
-    primary: 'group-hover:bg-primary',
-    secondary: 'group-hover:bg-secondary',
-    white: 'group-hover:bg-white',
-    black: 'group-hover:bg-black',
-    gold: 'group-hover:bg-gold'
-  }
-
-  const wrapperClassList = classNames({
-    'w-6 h-6': size === 1,
-    'w-10 h-10': size === 2,
-    'w-14 h-14': size === 3,
-    'w-20 h-20': size === 4,
-    'w-24 h-24': size === 5,
-    'w-28 h-28': size === 6,
-    'w-32 h-32': size === 7,
-    'w-36 h-36': size === 8,
-    'w-40 h-40': size === 9,
-    'w-44 h-44': size === 10,
-    'rounded-full': rounded
-  },
-  className,
-  backgroundColour[bgColour],
-  fontColour[colour],
-  hoverBackgroundColour[hoverBgColour],
-  hoverFontColour[hoverColour],
-  'flex transition-backgroundColor duration-500 transform'
-  )
-
-  const classList = classNames({
-    'fa-brands': brand,
-    [`fa-${size}x`]: size,
-    [`fa-${animation}`]: animation,
-    'fa-spin-reverse': reverseSpin,
-    'fa-regular': hollow
-  }, `fa fa-${type} mx-auto my-auto`)
-
-  return (
-    <div
-      id={id}
-      className={wrapperClassList}
-    >
-      <span
-        className={classList}
-        role='img'
-        aria-hidden='true'
-        aria-label={type}
-      />
-    </div>
-  )
-}
-
-export default Icon

package/dist/components/Image/Image.stories.tsx

@@ -1,88 +0,0 @@
-import React from 'react'
-import Image from '.'
-import { idAndClassName } from '@utils/controls'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import logo from '@assets/images/primary-logo.png'
-
-const componentMeta: ComponentMeta<typeof Image> = {
-  title: 'Trepur Components/Rupert Bennett/Atoms/Image',
-  component: Image,
-  argTypes: {
-    ...idAndClassName,
-    image: {
-      type: { name: 'string', required: false },
-      description: 'The image to display on the component',
-      table: {
-        type: { summary: 'default' }
-      }
-    },
-    altText: {
-      type: { name: 'string', required: false },
-      description: 'The accessibility alt text for the image on the component',
-      table: {
-        type: { summary: 'default' }
-      }
-    },
-    title: {
-      type: { name: 'string', required: false },
-      description: 'The accessibility title for the image on the component',
-      table: {
-        type: { summary: 'default' }
-      }
-    },
-    rounded: {
-      type: { name: 'boolean', required: false },
-      description: 'Sets the corners of the component to rounded',
-      table: {
-        type: { summary: 'boolean' }
-      }
-    },
-    roundedFull: {
-      type: { name: 'boolean', required: false },
-      description: 'Sets the component to a circle shape',
-      table: {
-        type: { summary: 'boolean' }
-      }
-    },
-    height: {
-      type: { name: 'number', required: false },
-      description: 'Defines the height of the component',
-      table: {
-        type: { summary: 'number' }
-      }
-    },
-    width: {
-      type: { name: 'number', required: false },
-      description: 'Defines the width of the component',
-      table: {
-        type: { summary: 'number' }
-      }
-    },
-    overlayText: {
-      type: { name: 'string', required: false },
-      description: 'The text to show when hovering over the component',
-      table: {
-        type: { summary: 'default' }
-      }
-    },
-    centerAligned: {
-      type: { name: 'boolean', required: false },
-      description: 'Sets the component to the center',
-      table: {
-        type: { summary: 'boolean' }
-      }
-    }
-  },
-  args: {
-    image: logo,
-    height: 8,
-    width: 8,
-    overlayText: 'logo'
-  }
-}
-
-const Template: ComponentStory<typeof Image> = (args) => <Image {...args} />
-
-export const _Image = Template.bind({})
-
-export default componentMeta