trepur_components 0.4.7 → 1.0.0

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

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

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

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

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

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

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

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

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