trepur_components 1.0.2 → 1.0.4

package/dist/components/Collapsible/Collapsible.stories.tsx

@@ -1,70 +0,0 @@
-import React from 'react'
-import Collapsible from './index'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof Collapsible> = {
-  title: 'Trepur Components/Other/Atoms/Collapsible',
-  component: Collapsible,
-  parameters: {},
-  argTypes: {
-    title: {
-      description: '',
-      control: 'text',
-      table: {
-        category: ''
-      }
-    },
-    subtitle: {
-      description: '',
-      control: 'text',
-      table: {
-        category: ''
-      }
-    },
-    borderTop: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: ''
-      }
-    },
-    borderBottom: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: ''
-      }
-    },
-    showBottomLine: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: ''
-      }
-    },
-    children: {
-      description: '',
-      control: 'array',
-      table: {
-        category: ''
-      }
-    }
-  },
-  args: {
-    title: 'This is a title',
-    subtitle: 'This is a subtitle',
-    showBottomLine: true,
-    iconProps: {
-      type: 'heart',
-      colour: 'white',
-      bgColour: 'primary'
-    },
-    children: <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, unde perferendis quibusdam eos repellendus vero rerum sunt reiciendis velit autem odio, fuga molestiae perspiciatis dolor voluptatum mollitia quos ipsa! Doloribus? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis ducimus, dolorum tempore unde earum aspernatur placeat magnam, alias neque, blanditiis esse tenetur dignissimos in optio nihil libero cum cupiditate debitis?</p>
-  }
-}
-
-const Template: ComponentStory<typeof Collapsible> = (args) => <Collapsible {...args} />
-
-export const _Collapsible = Template.bind({})
-
-export default componentMeta

package/dist/components/Collapsible/index.tsx

@@ -1,124 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import Icon, { Props as iconProps } from '@components/Icon'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  title?: string
-  subtitle?: string
-  boldTitle?: boolean
-  borderTop?: boolean
-  borderBottom?: boolean
-  showBottomLine?: boolean
-  iconProps?: iconProps
-  children?: string | JSX.Element
-}
-
-const Collapsible = ({
-  id,
-  className,
-  title,
-  subtitle,
-  boldTitle,
-  borderTop,
-  borderBottom,
-  showBottomLine,
-  iconProps,
-  children
-}: Props): JSX.Element => {
-  const [expanded, setExpanded] = useState(false)
-
-  useEffect(() => {
-    const coll = document.getElementsByClassName('collapsible')
-    let i: number
-
-    for (i = 0; i < coll.length; i++) {
-      coll[i].addEventListener('click', function (this: any, err: any) {
-        const content = this.nextElementSibling
-
-        const scrollHeight: string = content.scrollHeight.toString()
-        if (content.style.maxHeight === '0px') {
-          content.style.maxHeight = `${scrollHeight}px`
-        } else {
-          content.style.maxHeight = '0px'
-        }
-      })
-    }
-  })
-
-  const headingClassList = classNames({
-    'border-b': borderBottom,
-    'border-t': borderTop
-  }, 'w-auto flex text-center collapsible')
-
-  const classList = classNames(className, 'bg-primary text-white hover:bg-white hover:text-primary transition-opactiy duration-300')
-
-  const padding = classNames({
-    'pt-7': title !== undefined && subtitle !== undefined,
-    'pt-4': title !== undefined && subtitle === undefined
-  })
-
-  const textSubstitutePadding = classNames({
-    'pb-4': title === undefined && subtitle === undefined
-  })
-
-  const contentWrapperClassList = classNames({
-    'max-h-max my-2': expanded,
-    'max-h-0': !expanded
-  }, 'w-auto overflow-hidden px-4 bg-white text-primary')
-
-  const childrenClassList = classNames(padding, 'w-full pr-8 text-right')
-
-  const expandItem = (e: any): void => {
-    const content = e.currentTarget.nextElementSibling
-    const scrollHeight: string = content.scrollHeight.toString()
-    if (!expanded) {
-      content.style.maxHeight = `${scrollHeight}px`
-    } else {
-      content.style.maxHeight = '0px'
-    }
-    setExpanded(!expanded)
-  }
-
-  return (
-    <div
-      id={id}
-      className={classList}
-    >
-      <div
-        onClick={e => expandItem(e)}
-        className={headingClassList}
-      >
-        {(iconProps !== undefined) &&
-          <div
-            className={`pl-4 text-left ${padding} ${textSubstitutePadding}`}
-          >
-            <Icon {...iconProps} />
-          </div>}
-        {(title !== undefined || subtitle !== undefined) &&
-          <div className='w-full pl-4 py-4 text-left'>
-            {title !== undefined && <h4>{title}</h4>}
-            {subtitle !== undefined && <h5><small>{subtitle}</small></h5>}
-          </div>}
-        {children !== undefined &&
-          <div className={childrenClassList}>
-            <Icon
-              type={expanded ? 'chevron-up' : 'chevron-down'}
-              colour='white'
-              bgColour='primary'
-            />
-          </div>}
-      </div>
-      {children !== undefined &&
-        <div
-          className={contentWrapperClassList}
-          style={{ transition: 'max-height 0.2s ease-out' }}
-        >
-          {children}
-        </div>}
-    </div>
-  )
-}
-
-export default Collapsible

package/dist/components/Column/Column.stories.tsx

@@ -1,82 +0,0 @@
-import React from 'react'
-import Column from './index'
-import { idAndClassName } from '@utils/controls'
-import CardWithTopImage from '@components/CardWithTopImage'
-import logo from '@assets/images/primary-logo.png'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const cardChild = (
-  <CardWithTopImage
-    id='cardwithtopimage'
-    imageProps={{
-      image: logo,
-      roundedFull: true
-    }}
-  >
-    <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 Column> = {
-  title: 'Trepur Components/Rupert Bennett/Atoms/Column',
-  component: Column,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    sm: {
-      type: { name: 'number', required: false },
-      description: 'The number of sections out of 12 that the component should span on sm screens',
-      table: {
-        type: { summary: 'number' }
-      }
-    },
-    md: {
-      type: { name: 'number', required: false },
-      description: 'The number of sections out of 12 that the component should span on md screens',
-      table: {
-        type: { summary: 'number' }
-      }
-    },
-    lg: {
-      type: { name: 'number', required: false },
-      description: 'The number of sections out of 12 that the component should span on lg screens',
-      table: {
-        type: { summary: 'number' }
-      }
-    },
-    xl: {
-      type: { name: 'number', required: false },
-      description: 'The number of sections out of 12 that the component should span on xl screens',
-      table: {
-        type: { summary: 'number' }
-      }
-    },
-    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: {
-    sm: 12,
-    md: 8,
-    lg: 4,
-    xl: 2,
-    className: 'bg-facebook md:bg-twitter lg-whatsapp xl:bg-linkedin border',
-    children: cardChild
-  }
-}
-
-const Template: ComponentStory<typeof Column> = (args) => <Column {...args} />
-
-export const _Column = Template.bind({})
-
-export default componentMeta

package/dist/components/Column/index.tsx

@@ -1,114 +0,0 @@
-import React from 'react'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  sm?: number
-  md?: number
-  lg?: number
-  xl?: number
-  children?: any
-}
-const Column: React.FC<Props> = ({
-  id,
-  className,
-  sm = 1,
-  md = 1,
-  lg = 1,
-  xl = 1,
-  children
-}: Props): JSX.Element => {
-  const widthOptions = [
-    { 1: 'w-1/12' },
-    { 2: 'w-2/12' },
-    { 3: 'w-3/12' },
-    { 4: 'w-4/12' },
-    { 5: 'w-5/12' },
-    { 6: 'w-6/12' },
-    { 7: 'w-7/12' },
-    { 8: 'w-8/12' },
-    { 9: 'w-9/12' },
-    { 10: 'w-10/12' },
-    { 11: 'w-11/12' },
-    { 12: 'w-full' }
-  ]
-
-  const mdWidthOptions = [
-    { 1: 'md:w-1/12' },
-    { 2: 'md:w-2/12' },
-    { 3: 'md:w-3/12' },
-    { 4: 'md:w-4/12' },
-    { 5: 'md:w-5/12' },
-    { 6: 'md:w-6/12' },
-    { 7: 'md:w-7/12' },
-    { 8: 'md:w-8/12' },
-    { 9: 'md:w-9/12' },
-    { 10: 'md:w-10/12' },
-    { 11: 'md:w-11/12' },
-    { 12: 'md:w-full' }
-  ]
-
-  const lgWidthOptions = [
-    { 1: 'lg:w-1/12' },
-    { 2: 'lg:w-2/12' },
-    { 3: 'lg:w-3/12' },
-    { 4: 'lg:w-4/12' },
-    { 5: 'lg:w-5/12' },
-    { 6: 'lg:w-6/12' },
-    { 7: 'lg:w-7/12' },
-    { 8: 'lg:w-8/12' },
-    { 9: 'lg:w-9/12' },
-    { 10: 'lg:w-10/12' },
-    { 11: 'lg:w-11/12' },
-    { 12: 'lg:w-full' }
-  ]
-
-  const xlWidthOptions = [
-    { 1: 'xl:w-1/12' },
-    { 2: 'xl:w-2/12' },
-    { 3: 'xl:w-3/12' },
-    { 4: 'xl:w-4/12' },
-    { 5: 'xl:w-5/12' },
-    { 6: 'xl:w-6/12' },
-    { 7: 'xl:w-7/12' },
-    { 8: 'xl:w-8/12' },
-    { 9: 'xl:w-9/12' },
-    { 10: 'xl:w-10/12' },
-    { 11: 'xl:w-11/12' },
-    { 12: 'xl:w-full' }
-  ]
-
-  const calculateWidth = (screen: any, size: number): string => {
-    switch (screen) {
-      case 'sm':
-        return Object.values(widthOptions[size - 1]).toString()
-      case 'md':
-        return Object.values(mdWidthOptions[size - 1]).toString()
-      case 'lg':
-        return Object.values(lgWidthOptions[size - 1]).toString()
-      case 'xl':
-        return Object.values(xlWidthOptions[size - 1]).toString()
-      default:
-        return Object.values(widthOptions[size - 1]).toString()
-    }
-  }
-
-  const classList = classNames({
-    [calculateWidth('sm', sm)]: sm,
-    [calculateWidth('md', md)]: md,
-    [calculateWidth('lg', lg)]: lg,
-    [calculateWidth('xl', xl)]: xl
-  }, className, 'h-full')
-
-  return (
-    <div
-      id={id}
-      className={classList}
-    >
-      {children}
-    </div>
-  )
-}
-
-export default Column

package/dist/components/Container/Container.stories.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import Container from './index'
-import { idAndClassName } from '@utils/controls'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof Container> = {
-  title: 'Trepur Components/Rupert Bennett/Atoms/Container',
-  component: Container,
-  argTypes: {
-    ...idAndClassName,
-    maxWidth: {
-      type: { name: 'number', required: false },
-      description: 'The number of pixles for the component to span',
-      control: { type: 'number', min: 1, step: 1 },
-      defaultValue: '1200'
-    },
-    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: {
-    className: 'border',
-    children: <p>This is a centered container with a max width</p>
-  }
-}
-
-const Template: ComponentStory<typeof Container> = (args) => <Container {...args} />
-
-export const _Container = Template.bind({})
-
-export default componentMeta

package/dist/components/Container/index.tsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  maxWidth?: number
-  children?: any
-}
-
-const Container = ({
-  id,
-  className,
-  maxWidth = 1200,
-  children
-}: Props): JSX.Element => {
-  const classList = classNames(className, 'mx-auto')
-
-  return (
-    <div
-      id={id}
-      className={classList}
-      style={{ maxWidth: `${maxWidth}px` }}
-    >
-      {children}
-    </div>
-  )
-}
-
-export default Container

package/dist/components/FooterBar/FooterBar.stories.tsx

@@ -1,57 +0,0 @@
-import React from 'react'
-import FooterBar from './index'
-import { idAndClassName } from '@utils/controls'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { action } from '@storybook/addon-actions'
-
-const componentMeta: ComponentMeta<typeof FooterBar> = {
-  title: 'Trepur Components/Rupert Bennett/Organisms/Footer Bar',
-  component: FooterBar,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    text: {
-      type: { name: 'string', required: false },
-      description: 'The text to show on the component',
-      table: {
-        type: { summary: 'default' }
-      },
-      defaultValue: { summary: 'undefined' }
-    },
-    buttonProps: {
-      type: { name: 'other', value: 'object' },
-      description: 'The props to pass to the button to display on the component',
-      table: {
-        type: {
-          summary: 'object'
-        },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    theme: {
-      type: { name: 'string', required: false },
-      options: ['dark', 'light'],
-      description: 'The variant of button to render',
-      table: {
-        type: { summary: 'light' },
-        defaultValue: { summary: 'light' }
-      },
-      defaultValue: 'light',
-      control: { type: 'radio' }
-    }
-  },
-  args: {
-    text: 'RupertBennett.com Copyright 2022 All rights reserved',
-    theme: 'dark',
-    buttonProps: {
-      children: 'Admin Panel',
-      onClick: action('button clicked')
-    }
-  }
-}
-
-const Template: ComponentStory<typeof FooterBar> = (args) => <FooterBar {...args} />
-
-export const _FooterBar = Template.bind({})
-
-export default componentMeta

package/dist/components/FooterBar/index.tsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import classNames from 'classnames'
-import Button, { Props as buttonProps } from '@components/Button'
-
-export interface Props {
-  id?: string
-  className?: string
-  buttonProps?: buttonProps
-  text?: string
-  theme?: 'light' | 'dark'
-}
-
-const Nav = ({
-  id,
-  className,
-  text,
-  buttonProps,
-  theme
-}: Props): JSX.Element => {
-  const colours = theme === 'dark' ? 'bg-primary text-white' : 'bg-white text-primary'
-  const classList = classNames(className, colours, 'block md:flex flex-wrap justify-between items-center h-auto')
-  const textClasses = 'text-center pt-8 pb-4 md:pb-0 md:my-8 md:pt-0 md:pl-16'
-  const buttonClasses = 'text-center pb-8 pt-4 md:pb-0 md:pt-0 md:pr-16'
-
-  return (
-    <div id={id} className={classList}>
-      <div className={textClasses}>
-        {text}
-      </div>
-      <div className={buttonClasses}>
-        <Button
-          variant={theme === 'dark' ? 'primary' : 'secondary'}
-          rounded
-          href={buttonProps?.href}
-          onClick={buttonProps?.onClick}
-        >
-          {buttonProps?.children}
-        </Button>
-      </div>
-    </div>
-  )
-}
-
-export default Nav

package/dist/components/Form/Form.stories.tsx

@@ -1,93 +0,0 @@
-import React from 'react'
-import { idAndClassName } from '@utils/controls'
-import Form from './index'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof Form> = {
-  title: 'Trepur Components/Rupert Bennett/Organisms/Form',
-  component: Form,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    title: {
-      type: { name: 'string', required: false },
-      description: 'The title to display on the component',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    titleClasses: {
-      type: { name: 'string', required: false },
-      description: 'The class names to pass to the title of the component',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    onSubmit: {
-      type: { name: 'function', required: false },
-      description: 'The action to perform when submitting the component',
-      action: 'onClick',
-      table: {
-        type: {
-          summary: 'function'
-        },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    ref: {
-      type: { name: 'other', value: 'RefObject<TouchableOpacity>' },
-      description: 'An ref for highlighting the current element',
-      table: {
-        type: {
-          summary: 'object'
-        },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    components: {
-      description: 'An array of component objects to pass to the component',
-      control: 'array',
-      table: {
-        type: {
-          summary: 'array'
-        },
-        defaultValue: { summary: 'undefined' }
-      }
-    }
-  },
-  args: {
-    title: 'This is a title',
-    components: [
-      {
-        htmlType: 'Input',
-        label: 'This is a label',
-        placeholder: 'This is a placeholder',
-        children: 'Submit'
-      },
-      {
-        htmlType: 'Input',
-        label: 'This is a label',
-        placeholder: 'This is a placeholder',
-        children: 'Submit'
-      },
-      {
-        htmlType: 'Input',
-        label: 'This is a label',
-        placeholder: 'This is a placeholder',
-        children: 'Submit'
-      },
-      {
-        htmlType: 'Button',
-        children: 'Submit'
-      }
-    ]
-  }
-}
-
-const Template: ComponentStory<typeof Form> = (args) => <Form {...args} />
-
-export const _Form = Template.bind({})
-
-export default componentMeta