trepur_components 1.0.2 → 1.0.3

package/dist/components/TextAndTitle/TextAndTitle.stories.tsx

@@ -1,65 +0,0 @@
-import React from 'react'
-import TextAndTitle from './index'
-import { action } from '@storybook/addon-actions'
-import Greeting from '@components/Greeting'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof TextAndTitle> = {
-  title: 'Trepur Components/Rupert Bennett/Organisms/Text And Title',
-  component: TextAndTitle,
-  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' }
-      }
-    },
-    onSave: {
-      type: { name: 'function', required: false },
-      description: 'Fires a function when you click save',
-      action: 'onClick',
-      table: {
-        type: {
-          summary: 'function'
-        },
-        defaultValue: { summary: 'undefined' }
-      }
-    }
-  },
-  args: {
-    children: <p>This is a child</p>,
-    editTitleClasses: 'text-md sm:text-lg ',
-    editTextClasses: 'break-words',
-    editInputClasses: 'border border-black text-black bg-white',
-    textLineOne: <div><Greeting /><p>Loremipsumdolorsitamet consectetur adipisicing elit</p></div>,
-    textLineTwo: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi impedit sed, quis aspernatur voluptate minima vel placeat ipsa amet voluptatem reprehenderit ullam rem cum tempora explicabo veritatis numquam libero asperiores!',
-    textLineThree: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur nihil voluptas ipsum labore? Eligendi et ipsam, repellat culpa porro a animi laudantium molestiae provident facere non tempora odit? Perferendis, assumenda.',
-    onSave: action('button-save'),
-    withLiveUpdates: true,
-    isHorizontal: true,
-    saveButtonProps: {
-      className: 'mt-4',
-      children: 'Save'
-    },
-    cancelButtonProps: {
-      className: 'mt-4 ml-4',
-      children: 'Cancel'
-    }
-  }
-}
-
-const Template: ComponentStory<typeof TextAndTitle> = (args) => <TextAndTitle {...args} />
-
-export const _TextAndTitle = Template.bind({})
-
-export default componentMeta

package/dist/components/TextAndTitle/index.tsx

@@ -1,257 +0,0 @@
-import React, { useState } from 'react'
-import Input from '@components/Input'
-import Button, { Props as buttonProps } from '@components/Button'
-import classNames from 'classnames'
-import TextArea from '@components/TextArea'
-
-export interface Props {
-  id: string
-  className?: string
-  titleClasses?: string
-  editTitleClasses?: string
-  editTextClasses?: string
-  editInputClasses?: string
-  textClasses?: string
-  textLineOne?: string | object
-  textLineTwo?: string | object
-  textLineThree?: string | object
-  title?: string
-  titleBold?: boolean
-  textCenter?: boolean
-  titleCenter?: boolean
-  withLiveUpdates?: boolean
-  onSave?: (arr: any[], id: string | undefined) => void
-  saveButtonProps?: buttonProps
-  cancelButtonProps?: buttonProps
-  isHorizontal?: boolean
-  children?: any
-}
-
-const TextAndTitle: React.FC<Props> = ({
-  id,
-  className,
-  titleClasses,
-  editTitleClasses,
-  editTextClasses,
-  editInputClasses,
-  textClasses,
-  textLineOne,
-  textLineTwo,
-  textLineThree,
-  title,
-  titleBold,
-  textCenter,
-  titleCenter,
-  withLiveUpdates = false,
-  onSave,
-  saveButtonProps,
-  cancelButtonProps,
-  isHorizontal = true,
-  children
-}: Props): JSX.Element => {
-  const getLineHeight = (id: string): number => {
-    const element = document.getElementById(id)
-    const divHeight = element?.offsetHeight !== undefined ? element.offsetHeight : 0
-    const lineHeight = (element != null) ? parseFloat(getComputedStyle(element).fontSize) : 1
-    const pt = (element != null) ? parseFloat(getComputedStyle(element).paddingTop) : 0
-    const pb = (element != null) ? parseFloat(getComputedStyle(element).paddingBottom) : 0
-    const mt = (element != null) ? parseFloat(getComputedStyle(element).marginTop) : 0
-    const mb = (element != null) ? parseFloat(getComputedStyle(element).marginBottom) : 0
-    const bw = (element != null) ? parseFloat(getComputedStyle(element).borderWidth) : 0
-    const height = divHeight - mt - mb - pt - pb - (bw * 2)
-
-    if (isHorizontal) {
-      return Math.floor(height / lineHeight) - 1
-    }
-    return Math.floor(height / lineHeight)
-  }
-
-  const defaultComponentData = {
-    title,
-    textLineOne,
-    textLineTwo,
-    textLineThree
-  }
-  const [isInEditingMode, setIsInEditingMode] = useState(false)
-  const [componentData, setComponentData] = useState(defaultComponentData)
-
-  const borderClasses = 'border border-transparent'
-  const classList = classNames(className, 'bg-primary text-white')
-
-  const titleClassList = classNames({
-    'font-bold': titleBold,
-    'text-center': titleCenter,
-    [borderClasses]: withLiveUpdates && !isInEditingMode
-  }, titleClasses, 'text-md break-words')
-
-  const textClassList = classNames({
-    'text-center': textCenter,
-    [borderClasses]: withLiveUpdates && !isInEditingMode
-  }, textClasses, 'pt-2 mt-2')
-
-  const toggleEditState = (): void => {
-    withLiveUpdates &&
-            setIsInEditingMode(!isInEditingMode)
-  }
-
-  const handleButtonSave = (): void => {
-    const arr = []
-    arr.push({ key: 'title', value: componentData.title })
-    arr.push({ key: 'textLineOne', value: componentData.textLineOne })
-    arr.push({ key: 'textLineTwo', value: componentData.textLineTwo })
-    arr.push({ key: 'textLineThree', value: componentData.textLineThree })
-    toggleEditState()
-    onSave?.(arr, id)
-  }
-
-  const handleButtonCancel = (): void => {
-    return toggleEditState()
-  }
-
-  const handleChange = (e: any): void => {
-    let id = e.target.id
-    id = id.split('-')[id.split('-').length - 1]
-
-    setComponentData({
-      ...componentData,
-      [id]: e.target.value
-    })
-  }
-
-  const wrapperClassList = classNames({
-    'flex flex-wrap justify-center md:items-center': isHorizontal,
-    'hover:border-black hover:border-dashed': withLiveUpdates && !isInEditingMode
-  }, 'border-2 border-transparent')
-
-  const titleWrapperClassList = classNames({
-    'md:w-1/2 md:text-center md:px-8': isHorizontal
-  })
-
-  const textWrapperClassList = classNames({
-    'md:w-1/2 md:text-center md:py-8 md:px-8': isHorizontal
-  })
-
-  const inputClassList = classNames(editInputClasses, textClassList)
-
-  const node = document.getElementById('textLineOne')
-
-  return (
-    <div
-      id={id}
-      className={classList}
-    >
-      {withLiveUpdates && isInEditingMode
-        ? (
-          <>
-            <div className={wrapperClassList}>
-              <div className={titleWrapperClassList}>
-                {componentData?.title !== undefined
-                  ? (
-                    <Input
-                      className={editTitleClasses}
-                      inputClasses={inputClassList}
-                      autoFocus
-                      value={componentData?.title}
-                      onChange={(e: any) => handleChange(e)}
-                      type='text'
-                      theme='dark'
-                    />
-                    )
-                  : (
-                    <div>
-                      {children}
-                    </div>
-                    )}
-              </div>
-              <div className={textWrapperClassList}>
-                <TextArea
-                  className={editTextClasses}
-                  textAreaClasses={classNames({
-                    'text-center': isHorizontal
-                  }, editInputClasses)}
-                  rows={getLineHeight('textLineOne') + 1}
-                  onChange={(e: any) => handleChange(e)}
-                  theme='dark'
-                >
-                  {node?.innerHTML}
-                </TextArea>
-                <TextArea
-                  className={editTextClasses}
-                  textAreaClasses={classNames({
-                    'text-center': isHorizontal
-                  }, editInputClasses)}
-                  rows={getLineHeight('textLineTwo')}
-                  onChange={(e: any) => handleChange(e)}
-                  theme='dark'
-                >
-                  {componentData.textLineTwo}
-                </TextArea>
-                <TextArea
-                  className={editTextClasses}
-                  textAreaClasses={classNames({
-                    'text-center': isHorizontal
-                  }, editInputClasses)}
-                  rows={getLineHeight('textLineThree')}
-                  onChange={(e: any) => handleChange(e)}
-                  theme='dark'
-                >
-                  {componentData.textLineThree}
-                </TextArea>
-              </div>
-            </div>
-            <Button
-              className={saveButtonProps?.className}
-              onClick={handleButtonSave}
-            >
-              {saveButtonProps?.children}
-            </Button>
-            <Button
-              className={cancelButtonProps?.className}
-              onClick={handleButtonCancel}
-            >
-              {cancelButtonProps?.children}
-            </Button>
-          </>
-          )
-        : (
-          <div
-            className={wrapperClassList}
-            onClick={toggleEditState}
-          >
-            <div className={titleWrapperClassList}>
-              {componentData?.title !== undefined
-                ? (
-                  <h1 className={titleClassList}>
-                    {componentData.title}
-                  </h1>
-                  )
-                : (
-                    children
-                  )}
-            </div>
-            <div className={textWrapperClassList}>
-              {componentData?.title !== undefined
-                ? (
-                  <h1 id='title' className={titleClassList}>
-                    {componentData.title}
-                  </h1>
-                  )
-                : (
-                  <div id='textLineOne' className={textClassList}>
-                    {componentData.textLineOne}
-                  </div>
-                  )}
-              <div id='textLineTwo' className={textClassList}>
-                {componentData.textLineTwo}
-              </div>
-              <div id='textLineThree' className={textClassList}>
-                {componentData.textLineThree}
-              </div>
-            </div>
-          </div>
-          )}
-    </div>
-  )
-}
-
-export default TextAndTitle

package/dist/components/TextArea/TextArea.stories.tsx

@@ -1,67 +0,0 @@
-import React from 'react'
-import TextArea from './index'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof TextArea> = {
-  title: 'Trepur Components/Rupert Bennett/Atoms/Text Area',
-  component: TextArea,
-  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: ''
-      }
-    },
-    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 text area placeholder',
-    withPadding: true
-  }
-}
-
-const Template: ComponentStory<typeof TextArea> = (args) => <TextArea {...args} />
-
-export const _TextArea = Template.bind({})
-
-export default componentMeta

package/dist/components/TextArea/index.tsx

@@ -1,97 +0,0 @@
-import React from 'react'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  labelClasses?: string
-  textAreaClasses?: string
-  label?: string
-  placeholder?: string
-  bold?: boolean
-  name?: string
-  disabled?: boolean
-  rows?: number
-  cols?: number
-  autoFocus?: boolean
-  formId?: string
-  maxLength?: number
-  readOnly?: boolean
-  required?: boolean
-  onBlur?: () => void
-  onFocus?: () => void
-  onChange?: (e: any) => void
-  withPadding?: boolean
-  children?: any
-  theme?: 'dark' | 'light'
-}
-
-const TextArea = ({
-  id,
-  className,
-  labelClasses,
-  textAreaClasses,
-  label,
-  placeholder,
-  bold,
-  name,
-  disabled,
-  rows,
-  cols,
-  autoFocus,
-  formId,
-  maxLength,
-  readOnly,
-  required,
-  onBlur,
-  onFocus,
-  onChange,
-  withPadding,
-  children,
-  theme = 'light'
-}: 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 newId = id !== undefined ? `-${id}` : '-'
-  const labelClassList = classNames({
-    'font-bold': bold
-  }, labelClasses, 'w-auto pb-2')
-
-  const textAreaClassList = classNames({
-    'p-2': withPadding
-  }, textAreaClasses, colours, 'border rounded-md mb-2')
-
-  return (
-    <div
-      id={id}
-      className={classList}
-    >
-      {label !== undefined &&
-        <label
-          className={labelClassList}
-          htmlFor={`text-area${newId}`}
-        >
-          {label}
-        </label>}
-      <textarea
-        className={textAreaClassList}
-        autoFocus={autoFocus}
-        form={formId}
-        maxLength={maxLength}
-        readOnly={readOnly}
-        required={required}
-        disabled={disabled}
-        rows={rows}
-        cols={cols}
-        name={name}
-        placeholder={placeholder}
-        onChange={onChange}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        defaultValue={children}
-      />
-    </div>
-  )
-}
-
-export default TextArea

package/dist/components/Timeline/Timeline.stories.tsx

@@ -1,100 +0,0 @@
-import React from 'react'
-import Timeline from './index'
-import CardWithTopImage from '@components/CardWithTopImage'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import logo from '@assets/images/primary-logo.png'
-import { Props as imageProps } from '@components/Image'
-
-const timelineItems = (): Array<{ component: JSX.Element, centerImageProps: imageProps }> => {
-  return new Array(8).fill(null).map(() => {
-    return (
-      {
-        component:
-  <CardWithTopImage
-    imageProps={{
-      image: logo,
-      roundedFull: true,
-      width: 4,
-      height: 4
-    }}
-    className='px-4'
-  >
-    <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>,
-        centerImageProps: {
-          image: logo,
-          imageClasses: 'mx-auto',
-          width: 4,
-          height: 4,
-          centerAligned: true,
-          roundedFull: true
-        }
-      }
-    )
-  })
-}
-
-const componentMeta: ComponentMeta<typeof Timeline> = {
-  title: 'Trepur Components/Rupert Bennett/Organisms/Timeline',
-  component: Timeline,
-  parameters: {},
-  argTypes: {
-    id: {
-      description: 'Defines the id of the component',
-      control: { type: 'text', default: false },
-      table: {
-        category: 'Id',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    className: {
-      description: 'Defines any additional classes for the components',
-      control: { type: 'text', default: false },
-      table: {
-        category: 'Classes',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    isHorizontal: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: ''
-      }
-    },
-    useImages: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: ''
-      }
-    },
-    items: {
-      description: '',
-      control: 'array',
-      table: {
-        category: ''
-      }
-    }
-  },
-  args: {
-    isHorizontal: true,
-    reverse: false,
-    items: timelineItems(),
-    textCenter: true,
-    useImages: true,
-    horizontalComponentClasses: 'w-96 h-96',
-    isSm: true
-  }
-}
-
-const Template: ComponentStory<typeof Timeline> = (args) => <Timeline {...args} />
-
-export const _Timeline = Template.bind({})
-
-export default componentMeta