trepur_components 0.4.7 → 1.0.0

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

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

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

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

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

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