trepur_components 1.0.2 → 1.0.4

package/dist/components/Profile/Profile.stories.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import Profile from './index'
-import userImage from '@assets/images/user.jpeg'
-import { idAndClassName } from '@utils/controls'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof Profile> = {
-  title: 'Trepur Components/Other/Organisms/Profile',
-  component: Profile,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    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' }
-      }
-    },
-    alignment: {
-      description: '',
-      control: 'select',
-      options: ['left', 'center', 'right'],
-      table: {
-        category: ''
-      }
-    },
-    profileLinks: {
-      description: '',
-      control: 'text',
-      table: {
-        category: ''
-      }
-    }
-  },
-  args: {
-    imageProps: {
-      image: userImage
-    }
-  }
-}
-
-const Template: ComponentStory<typeof Profile> = (args) => <Profile {...args} />
-
-export const _Profile = Template.bind({})
-
-export default componentMeta

package/dist/components/Profile/index.tsx

@@ -1,87 +0,0 @@
-import React, { useState } from 'react'
-import Image, { Props as imageProps } from '@components/Image'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  profileLinks?: Array<{ name: string, link: string }>
-  alignment?: 'left' | 'right'
-  imageHeight?: number
-  imageWidth?: number
-  rounded?: boolean
-  bordered?: boolean
-  imageProps?: imageProps
-}
-
-const Profile = ({
-  id,
-  className,
-  profileLinks,
-  alignment,
-  imageHeight = 0,
-  imageWidth = 0,
-  rounded,
-  bordered,
-  imageProps
-}: Props): JSX.Element => {
-  const [profileState, setProfileState] = useState(false)
-
-  const profileAlignment = classNames({
-    'float-right': alignment === 'right',
-    'float-left': alignment === 'left'
-  })
-
-  const dropdownAlignement = classNames({
-    'mt-16 -mr-16': alignment === 'right',
-    'mt-16 -ml-16': alignment === 'left'
-  })
-
-  const dropdownTextAlignement = classNames({
-    'text-center': alignment !== 'right' && alignment !== 'left'
-  })
-
-  const classList = classNames({
-    'rounded-full': rounded === true,
-    border: bordered === true
-  }, className, `h-${imageHeight} w-${imageWidth} object-cover`)
-
-  return (
-    <>
-      <div id={id} className={`text-center ${classList}`}>
-        <div className={`hidden sm:inline-flex  inset-y-0 ${profileAlignment}`}>
-          <button
-            onClick={() => setProfileState(!profileState)}
-            type='button'
-            className='flex rounded-full'
-          >
-            <Image {...imageProps} />
-          </button>
-        </div>
-      </div>
-      {profileState &&
-        <div className={dropdownTextAlignement}>
-          <div className={`w-48 sm:inline-block shadow-lg 
-                        z-10 ${profileAlignment} ${dropdownAlignement}`}
-          >
-            {profileLinks?.map((link, i) => {
-              return (
-                <a
-                  key={`profile_link_${i + 1}`}
-                  href={link.link}
-                  className='border-b font-bold block px-4 py-2 text-sm'
-                  role='menuitem'
-                                    // tabindex="-1"
-                  id={`user-menu-item-${i + 1}`}
-                >
-                  {link.name}
-                </a>
-              )
-            })}
-          </div>
-        </div>}
-    </>
-  )
-}
-
-export default Profile

package/dist/components/Row/Row.stories.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import Row from './index'
-import CardWithTopImage from '@components/CardWithTopImage'
-import logo from '@assets/images/primary-logo.png'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { idAndClassName } from '@utils/controls'
-
-const cardChild = (
-  <CardWithTopImage
-    imageProps={{
-      image: logo,
-      rounded: true,
-      height: 4,
-      width: 4,
-      roundedFull: true
-    }}
-    className='w-1/3'
-  >
-    <p>This is some text</p>
-    <p>This is some more text</p>
-    <p>This is a bit more text</p>
-    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem odit ad sed, quam recusandae voluptatem provident eveniet beatae omnis vero minus unde facilis. Quia commodi quas odit iusto ut enim!</p>
-  </CardWithTopImage>
-)
-
-const componentMeta: ComponentMeta<typeof Row> = {
-  title: 'Trepur Components/Rupert Bennett/Atoms/Row',
-  component: Row,
-  argTypes: {
-    ...idAndClassName,
-    children: {
-      type: { name: 'other', value: 'string | React.ReactNode' },
-      description: 'The child elements to show in the component',
-      table: {
-        type: {
-          summary: 'Array'
-        },
-        defaultValue: { summary: 'undefined' }
-      }
-    }
-  },
-  args: {
-    children: cardChild
-  }
-}
-
-const Template: ComponentStory<typeof Row> = (args) => <Row {...args} />
-
-export const _Row = Template.bind({})
-
-export default componentMeta

package/dist/components/Row/index.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  children: any
-}
-
-const Row = ({
-  id,
-  className,
-  children
-}: Props): JSX.Element => {
-  const classList = classNames(className, 'flex flex-wrap')
-
-  return (
-    <div id={id} className={classList}>
-      {children}
-    </div>
-  )
-}
-
-export default Row

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