trepur_components 1.0.0 → 1.0.1

package/dist/components/Search/Search.stories.tsx

@@ -1,58 +0,0 @@
-import React from 'react'
-import { idAndClassName } from '@utils/controls'
-import Search from './index'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof Search> = {
-  title: 'Trepur Components/Other/Organisms/Search',
-  component: Search,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    leftIconProps: {
-      description: 'An optional param to display an icon to the left of the search bar',
-      control: 'text',
-      table: {
-        category: ''
-      }
-    },
-    rightIconProps: {
-      description: 'An optional param to display an icon to the right of the search bar',
-      control: 'text',
-      table: {
-        category: ''
-      }
-    },
-    placeholder: {
-      description: 'An optional param to display a placeholder inside the search box',
-      control: 'text',
-      table: {
-        category: ''
-      }
-    },
-    text: {
-      description: 'An optional param to display a label on the left of the search bar',
-      control: 'text',
-      table: {
-        category: ''
-      }
-    }
-  },
-  args: {
-    placeholder: 'search...',
-    leftIconProps: {
-      type: 'heart',
-      className: 'absolute py-4 left-3 flex items-center'
-    },
-    rightIconProps: {
-      type: 'heart',
-      className: 'absolute py-4 right-3 flex items-center'
-    }
-  }
-}
-
-const Template: ComponentStory<typeof Search> = (args) => <Search {...args} />
-
-export const _Search = Template.bind({})
-
-export default componentMeta

package/dist/components/Search/index.tsx

@@ -1,58 +0,0 @@
-import React, { ChangeEventHandler } from 'react'
-import Icon, { Props as iconProps } from '@components/Icon'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  onChange?: (val: string | number) => void
-  placeholder?: string
-  text?: string
-  leftIconProps?: iconProps
-  rightIconProps?: iconProps
-}
-
-const Search = ({
-  id,
-  className,
-  onChange,
-  placeholder,
-  text,
-  leftIconProps,
-  rightIconProps
-}: Props): JSX.Element => {
-  const classList = classNames(className, 'flex')
-
-  const inputClasses = classNames({
-    'pl-9': leftIconProps !== undefined,
-    'pl-2': leftIconProps === undefined
-  }, 'w-full border-2 rounded-md py-2 pr-9')
-
-  const onChangeFunc: ChangeEventHandler<HTMLInputElement> | undefined = (onChange != null) ? (e: any) => onChange(e.target.value) : undefined
-
-  return (
-    <div id={id} className={classList}>
-      <div>
-        {text !== undefined &&
-          <h2 className='font-base-lg py-2 pr-4'>{text}</h2>}
-      </div>
-      <div>
-        <div className='relative w-full flex'>
-          {(leftIconProps != null) &&
-            <Icon {...leftIconProps} />}
-          <input
-            className={inputClasses}
-            onChange={onChangeFunc}
-            placeholder={placeholder}
-            type='text'
-            name='search'
-          />
-          {(rightIconProps != null) &&
-            <Icon {...rightIconProps} />}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default Search

package/dist/components/SocialBlock/SocialBlock.stories.tsx

@@ -1,114 +0,0 @@
-import React from 'react'
-import SocialBlock from './index'
-import { action } from '@storybook/addon-actions'
-import Icon from '@components/Icon'
-import Button from '@components/Button'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const socialButtons = [
-  <Button
-    key='btn_1'
-    className='mx-2 w-16 py-4 border border-1'
-    href='https://www.facebook.com/rupert.bennett'
-    type='social'
-  >
-    <Icon
-      type='facebook-f'
-      brand
-      size={2}
-      className='mx-auto'
-      colour='white'
-      bgColour='primary'
-    />
-  </Button>,
-  <Button
-    key='btn_2'
-    className='mx-2 w-16 py-4 border border-1'
-    href='https://www.linkedin.com/in/rupert-bennett'
-    type='social'
-  >
-    <Icon
-      brand
-      type='linkedin-in'
-      size={2}
-      className='mx-auto'
-      colour='white'
-      bgColour='primary'
-    />
-  </Button>,
-  <Button
-    key='btn_3'
-    className='mx-2 w-16 py-4 border border-1'
-    href='https://github.com/irupertbennett'
-    type='social'
-  >
-    <Icon
-      brand
-      type='github'
-      size={2}
-      className='mx-auto'
-      colour='white'
-      bgColour='primary'
-    />
-  </Button>,
-  <Button
-    key='btn_4'
-    className='mx-2 w-16 py-4 border border-1'
-    href='mailto:irupertbennett@gmail.com?subject=rupertbennett.com-&body=Referred from rupertbennett.com'
-    type='social'
-  >
-    <Icon
-      type='envelope'
-      size={2}
-      className='mx-auto'
-      colour='white'
-      bgColour='primary'
-    />
-  </Button>
-]
-
-const componentMeta: ComponentMeta<typeof SocialBlock> = {
-  title: 'Trepur Components/Rupert Bennett/Organisms/Social Block',
-  component: SocialBlock,
-  parameters: {},
-  argTypes: {
-    withLiveUpdates: {
-      description: '',
-      control: 'boolean',
-      table: { category: '' }
-    },
-    onSave: {
-      type: { name: 'function', required: false },
-      description: 'Fires a function when you click save',
-      action: 'onClick',
-      table: {
-        type: { summary: 'function' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    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: {
-    title: 'Why not connect with me on LinkedIn or Facebook?',
-    text: 'Or send me a E-Mail to get in touch',
-    editTitleClasses: 'text-md sm:text-lg ',
-    editTextClasses: '',
-    editInputClasses: 'mt-4 border border-black text-black bg-white',
-    onSave: action('button-save'),
-    withLiveUpdates: true,
-    socialButtons
-  }
-}
-
-const Template: ComponentStory<typeof SocialBlock> = (args) => <SocialBlock {...args} />
-
-export const _SocialBlock = Template.bind({})
-
-export default componentMeta

package/dist/components/SocialBlock/index.tsx

@@ -1,161 +0,0 @@
-import React, { useState } from 'react'
-import Input from '@components/Input'
-import Button, { Props as buttonProps } from '@components/Button'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  title?: string
-  text?: string
-  withLiveUpdates?: boolean
-  onSave?: (arr: any[], id: string | undefined) => void
-  saveButtonProps?: buttonProps
-  cancelButtonProps?: buttonProps
-  editTitleClasses?: string
-  editTextClasses?: string
-  editInputClasses?: string
-  buttonWrapperClasses?: string
-  textWrapperClasses?: string
-  socialButtons?: buttonProps[]
-  theme: 'light' | 'dark'
-}
-
-const SocialBlock = ({
-  id,
-  className,
-  title,
-  text,
-  withLiveUpdates,
-  onSave,
-  saveButtonProps,
-  cancelButtonProps,
-  editTitleClasses,
-  editTextClasses,
-  editInputClasses,
-  buttonWrapperClasses,
-  textWrapperClasses,
-  socialButtons,
-  theme = 'light'
-}: Props): JSX.Element => {
-  const colours = theme === 'dark' ? 'placeholder-white bg-primary text-white' : 'placeholder-primary bg-white text-primary'
-  const defaultComponentData = {
-    title: {
-      text: title
-    },
-    text: {
-      text
-    }
-  }
-
-  const [isInEditingMode, setIsInEditingMode] = useState(false)
-  const [isHovering, setIsHovering] = useState(false)
-  const [componentData, setComponentData] = useState(defaultComponentData)
-  const hoverClasses = 'border-dashed border'
-
-  const classList = classNames(className, colours)
-  const buttnoWrapperClasslist = classNames(buttonWrapperClasses, 'py-4')
-
-  const hoverClassList = classNames({
-    [hoverClasses]: withLiveUpdates !== undefined && !isInEditingMode && isHovering
-  }, textWrapperClasses)
-
-  const toggleEditState = (): void => {
-    withLiveUpdates === true && setIsInEditingMode(!isInEditingMode)
-  }
-
-  const handleButtonSave = (): void => {
-    const arr = []
-    arr.push({ key: 'title', value: componentData.title.text })
-    arr.push({ key: 'text', value: componentData.text.text })
-    toggleEditState()
-    onSave?.(arr, id)
-    setIsHovering(false)
-  }
-
-  const handleButtonCancel = (): void => {
-    toggleEditState()
-    setIsHovering(false)
-  }
-
-  const handleChange = (e: any): void => {
-    let id = e.target.id
-    id = id.split('-')[id.split('-').length - 1]
-    setComponentData({
-      ...componentData,
-      [id]: {
-        text: e.target.value
-      }
-    })
-  }
-
-  const toggleHoverState = (): void => {
-    withLiveUpdates === true && setIsHovering(!isHovering)
-  }
-
-  return (
-    <div
-      id={id}
-      className={classList}
-    >
-      {withLiveUpdates === true && isInEditingMode
-        ? (
-          <div className={colours}>
-            <Input
-              id='title'
-              className={editTitleClasses}
-              inputClasses={editInputClasses}
-              autoFocus
-              value={componentData.title.text}
-              onChange={(e: any) => handleChange(e)}
-              type='text'
-              theme={theme}
-            />
-            <Input
-              id='text'
-              className={editTextClasses}
-              inputClasses={editInputClasses}
-              value={componentData.text.text}
-              onChange={(e: any) => handleChange(e)}
-              type='text'
-              theme={theme}
-            />
-            <Button
-              className='mt-4'
-              onClick={handleButtonSave}
-            >
-              Save
-            </Button>
-            <Button
-              className='mt-4 ml-4'
-              onClick={handleButtonCancel}
-            >
-              Cancel
-            </Button>
-          </div>
-          )
-        : (
-          <>
-            <div
-              onMouseOver={() => toggleHoverState()}
-              onMouseOut={() => toggleHoverState()}
-              onClick={toggleEditState}
-              className={hoverClassList}
-            >
-              <h2 className='text-md sm:text-lg'>{componentData.title.text}</h2>
-              <p className='pt-4'>{componentData.text.text}</p>
-            </div>
-            <div className={buttnoWrapperClasslist}>
-              <div className='flex flex-wrap w-full justify-center'>
-                {socialButtons?.map((button, i: number) => {
-                  return <div key={`social_btn_${i + 1}`}>{button}</div>
-                })}
-              </div>
-            </div>
-          </>
-          )}
-    </div>
-  )
-}
-
-export default SocialBlock

package/dist/components/StarRating/StarRating.stories.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import StarRating from './index'
-import { idAndClassName } from '@utils/controls'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof StarRating> = {
-  title: 'Trepur Components/Other/Atoms/Star Rating',
-  component: StarRating,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName
-  },
-  args: {
-    stars: 3,
-    size: 2
-  }
-}
-
-const Template: ComponentStory<typeof StarRating> = (args) => <StarRating {...args} />
-
-export const _StarRating = Template.bind({})
-
-export default componentMeta

package/dist/components/StarRating/index.tsx

@@ -1,71 +0,0 @@
-import React from 'react'
-import Icon from '@components/Icon'
-import classNames from 'classnames'
-
-export interface Props {
-  id: string
-  className: string
-  stars: number
-  size: number
-}
-const StarRating = ({
-  id,
-  className,
-  stars = 1,
-  size = 1
-}: Props): JSX.Element => {
-  const classList = classNames({
-  }, `${className} flex`)
-
-  const getStars = (): JSX.Element[] => {
-    const starsArr = []
-    for (let i = 0; i < stars; i++) {
-      starsArr.push(
-        <Icon
-          key={`checked_star_${i + 0}`}
-          id={`checked-${i}`}
-          className='checked'
-          type='star'
-          size={size}
-          colour='gold'
-          bgColour='white'
-        />
-      )
-    }
-    return starsArr
-  }
-
-  const getStarsChecked = (): JSX.Element[] => {
-    const starsArr = []
-    for (let i = 0; i < 5 - stars; i++) {
-      starsArr.push(
-        <Icon
-          key={`unchecked_star_${i + 0}`}
-          id={`unchecked-${i}`}
-          className='unchecked opacity-30 gold'
-          type='star'
-          size={size}
-          colour='gold'
-          bgColour='white'
-        />
-      )
-    }
-    return starsArr
-  }
-
-  const getAllStars = (): JSX.Element[] => {
-    const starArray = [...getStars(), ...getStarsChecked()]
-    return starArray
-  }
-
-  return (
-    <div
-      id={id}
-      className={classList}
-    >
-      {getAllStars()}
-    </div>
-  )
-}
-
-export default StarRating

package/dist/components/Testimonial/Testimonial.stories.tsx

@@ -1,110 +0,0 @@
-import React from 'react'
-import { idAndClassName } from '@utils/controls'
-import Testimonial from './index'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof Testimonial> = {
-  title: 'Trepur Components/Rupert Bennett/Organisms/Testimonial',
-  component: Testimonial,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    text: {
-      description: 'The description to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' }
-      },
-      defaultValue: { summary: 'undefined' }
-    },
-    companyName: {
-      description: 'The company name to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' }
-      },
-      defaultValue: { summary: 'undefined' }
-    },
-    positionStartDate: {
-      description: 'The start date to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' }
-      },
-      defaultValue: { summary: 'undefined' }
-    },
-    positionEndDate: {
-      description: 'The end date to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' }
-      },
-      defaultValue: { summary: 'undefined' }
-    },
-    position: {
-      description: 'The position to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' }
-      },
-      defaultValue: { summary: 'undefined' }
-    },
-    date: {
-      description: 'The date of the testimonial to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' }
-      },
-      defaultValue: { summary: 'undefined' }
-    },
-    authorsName: {
-      description: 'The authors name to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' }
-      },
-      defaultValue: { summary: 'undefined' }
-    },
-    authorsPosition: {
-      description: 'The authors position to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' }
-      },
-      defaultValue: { summary: 'undefined' }
-    },
-    imageProps: {
-      type: { name: 'other', value: 'object' },
-      description: 'The props to pass to the image to display on the component',
-      table: {
-        type: {
-          summary: 'object'
-        },
-        defaultValue: { summary: 'undefined' }
-      }
-    }
-  },
-  args: {
-    imageProps: {
-      image: 'https://picsum.photos/100/100',
-      height: 8,
-      width: 8,
-      roundedFull: true,
-      centerAligned: true
-    },
-    authorsName: 'Authors Name',
-    authorsPosition: 'Authors Position',
-    position: 'Position',
-    positionEndDate: 'End Date',
-    positionStartDate: 'Start Date',
-    date: 'Date',
-    companyName: 'Company Name',
-    text: 'This is some text'
-  }
-}
-
-const Template: ComponentStory<typeof Testimonial> = (args) => <Testimonial {...args} />
-
-export const _Testimonial = Template.bind({})
-
-export default componentMeta

package/dist/components/Testimonial/index.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import classNames from 'classnames'
-import Image, { Props as imageProps } from '@components/Image'
-
-export interface Props {
-  id?: string
-  className?: string
-  text?: string
-  imageProps?: imageProps
-  companyName?: string
-  position?: string
-  date?: string
-  positionStartDate?: string
-  positionEndDate?: string
-  authorsName?: string
-  authorsPosition?: string
-}
-
-const Testimonial = ({
-  id,
-  className,
-  text,
-  imageProps,
-  companyName,
-  position,
-  date,
-  positionStartDate,
-  positionEndDate,
-  authorsName,
-  authorsPosition
-}: Props): JSX.Element => {
-  const classList = classNames(className, 'text-center')
-
-  return (
-    <div id={id} className={classList}>
-      <div className='mx-auto'>
-        <Image {...imageProps} />
-      </div>
-      <div>
-        <h2 className='text-md md:text-md'>{companyName} </h2>
-        <p className='text-md md:text-sm'>{position}</p>
-        <p>{positionStartDate} - {positionEndDate}</p>
-        <p>{text}</p>
-        <p>{authorsName} - {authorsPosition}: {date}</p>
-      </div>
-    </div>
-  )
-}
-
-export default Testimonial