trepur_components 0.4.7 → 1.0.0

package/dist/components/Column/index.tsx

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

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

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

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

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

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

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

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

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

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

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

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