trepur_components 1.0.2 → 1.0.3

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

package/dist/components/Form/index.tsx

@@ -1,58 +0,0 @@
-import React from 'react'
-import Button, { Props as buttonProps } from '@components/Button'
-import Input, { Props as inputProps } from '@components/Input'
-
-export interface Props {
-  id?: string
-  className?: string
-  title?: string
-  titleClasses?: string
-  onSubmit?: () => void
-  ref?: string
-  components?: Array<inputProps & buttonProps & { htmlType: string }>
-}
-
-const Form = ({
-  id,
-  className,
-  title,
-  titleClasses,
-  onSubmit,
-  ref,
-  components
-}: Props): JSX.Element => {
-  return (
-    <>
-      <h1 className={titleClasses}>{title}</h1>
-      <form id={id} ref={ref} className={className} onSubmit={onSubmit}>
-        {components?.map((component, i) => {
-          if (component?.htmlType === 'Input') {
-            return (
-              <Input
-                key={`input_${i + 0}`}
-                className={component?.className}
-                label={component?.label}
-                placeholder={component?.placeholder}
-                type={component?.type}
-                name={component?.name}
-              />
-            )
-          } else if (component.htmlType === 'Button') {
-            return (
-              <Button
-                key={`button_${i + 0}`}
-                type={component?.type}
-                onClick={component?.onClick}
-                className={component?.className}
-              >
-                {component?.children}
-              </Button>
-            )
-          } else return <></>
-        })}
-      </form>
-    </>
-  )
-}
-
-export default Form

package/dist/components/FyreCard/FyreCard.stories.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import FyreCard from './index'
-import { idAndClassName } from '@utils/controls'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof FyreCard> = {
-  title: 'Trepur Components/Other/Organisms/Fyre Card',
-  component: FyreCard,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    image: {
-      description: '',
-      control: 'text',
-      table: {
-        category: ''
-      }
-    }
-  },
-  args: {
-    image: 'https://picsum.photos/500/300'
-  }
-}
-
-const Template: ComponentStory<typeof FyreCard> = (args) => <FyreCard {...args} />
-
-export const _FyreCard = Template.bind({})
-
-export default componentMeta

package/dist/components/FyreCard/index.tsx

@@ -1,46 +0,0 @@
-import React from 'react'
-import Button, { Props as buttonProps } from '@components/Button'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  image?: string
-  imageClass?: string
-  altText?: string
-  bordered?: string
-  buttonProps?: buttonProps
-}
-const FyreCard = ({
-  id,
-  className,
-  image,
-  imageClass,
-  altText,
-  bordered,
-  buttonProps
-}: Props): JSX.Element => {
-  const classList = classNames({
-    'border border-grey border-opacity-100': bordered
-  }, className, 'flex flex-col')
-  const imageClassList = classNames(imageClass, 'w-full')
-
-  return (
-    <div
-      key={id}
-      id={id}
-      className={classList}
-    >
-      <div className='card-content flex flex-1 flex-col'>
-        <div>
-          <img className={imageClassList} src={image} alt={altText} />
-        </div>
-        <div className='flex justify-end'>
-          <Button {...buttonProps}>{buttonProps?.children}</Button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default FyreCard

package/dist/components/Greeting/Greeting.stories.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import Greeting from './index'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { idAndClassName } from '@utils/controls'
-
-const componentMeta: ComponentMeta<typeof Greeting> = {
-  title: 'Trepur Components/Rupert Bennett/Atoms/Greeting',
-  component: Greeting,
-  argTypes: {
-    ...idAndClassName,
-    morningMessage: {
-      type: { name: 'string', required: false },
-      description: 'Defines the morning message for the greeting component',
-      table: {
-        type: { summary: 'string' }
-      }
-    },
-    afternoonMessage: {
-      type: { name: 'string', required: false },
-      description: 'Defines the afternoon message for the greeting component',
-      table: {
-        type: { summary: 'string' }
-      }
-    },
-    eveningMessage: {
-      type: { name: 'string', required: false },
-      description: 'Defines the evening message for the greeting component',
-      table: {
-        type: { summary: 'string' }
-      }
-    }
-  },
-  args: {
-    morningMessage: 'What a beautiful morning it is today'
-  }
-}
-
-const Template: ComponentStory<typeof Greeting> = (args) => <Greeting {...args} />
-
-export const _Greeting = Template.bind({})
-
-export default componentMeta

package/dist/components/Greeting/index.tsx

@@ -1,46 +0,0 @@
-import React from 'react'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  morningMessage?: string
-  afternoonMessage?: string
-  eveningMessage?: string
-}
-
-const Greeting = ({
-  id,
-  className,
-  morningMessage = 'Good morning',
-  afternoonMessage = 'Good afternoon',
-  eveningMessage = 'Good evening'
-}: Props): JSX.Element => {
-  const today = new Date()
-  const hours = `0${today.getHours().toString()}`.slice(-2)
-  const minutes = `0${today.getMinutes().toString()}`.slice(-2)
-  const seconds = `0${today.getSeconds().toString()}`.slice(-2)
-  const time = parseInt(`${hours}${minutes}${seconds}`)
-
-  let message
-  if (time < 120000) {
-    message = morningMessage
-  } else if (time > 115959 && time < 170000) {
-    message = afternoonMessage
-  } else if (time > 165959) {
-    message = eveningMessage
-  }
-
-  const classList = classNames(className)
-
-  return (
-    <p
-      id={id}
-      className={classList}
-    >
-      {message}
-    </p>
-  )
-}
-
-export default Greeting

package/dist/components/HamburgerIcon/HamburgerIcon.stories.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import HamburgerIcon from './index'
-
-const componentMeta: ComponentMeta<typeof HamburgerIcon> = {
-  title: 'Trepur Components/Rupert Bennett/Atoms/Hamburger Icon',
-  component: HamburgerIcon,
-  parameters: {
-    docs: {
-      description: {
-        component: 'An icon component'
-      }
-    },
-    layout: 'padded'
-  },
-  argTypes: {
-    id: {
-      type: { name: 'string', required: false },
-      description: 'HTML id attribute',
-      table: { type: { summary: 'string' } }
-    },
-    className: {
-      type: { name: 'string', required: false },
-      description: 'Used to pass any additional classes to the component',
-      table: { type: { summary: 'string' } }
-    },
-    opened: {
-      type: { name: 'boolean', required: false },
-      description: 'If this component is disabled and can not be interacted',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'boolean' }
-      }
-    },
-    onClick: {
-      type: { name: 'function', required: false },
-      description: 'Function to be called when the button is clicked',
-      table: { type: { summary: 'function' } }
-    }
-  },
-  args: {
-    opened: false
-  }
-}
-
-const Template: ComponentStory<typeof HamburgerIcon> = (args) => <HamburgerIcon {...args} />
-
-export const _HamburgerIcon = Template.bind({})
-
-export default componentMeta