trepur_components 0.4.8 → 1.0.0

package/dist/components/InformationIcon/InformationIcon.stories.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import InformationIcon from './index'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { idAndClassName } from '@utils/controls'
+
+const componentMeta: ComponentMeta<typeof InformationIcon> = {
+  title: 'Trepur Components/Rupert Bennett/Atoms/Information Icon',
+  component: InformationIcon,
+  argTypes: {
+    ...idAndClassName,
+    text: {
+      type: { name: 'string', required: false },
+      description: 'The text to display on the component',
+      table: {
+        type: { summary: 'string' }
+      }
+    },
+    number: {
+      type: { name: 'number', required: false },
+      description: 'The number to display on the component',
+      table: {
+        type: { summary: 'number' }
+      }
+    },
+    bordered: {
+      type: { name: 'boolean', required: false },
+      description: 'Applies a border to the component',
+      table: {
+        type: { summary: 'boolean' }
+      },
+      defaultValue: 'false'
+    },
+    rounded: {
+      type: { name: 'boolean', required: false },
+      description: 'Enabled rounded corners on the component',
+      table: {
+        type: { summary: 'boolean' }
+      },
+      defaultValue: 'false'
+    },
+    withAnimation: {
+      type: { name: 'boolean', required: false },
+      description: 'Enabled the counter animation on the component',
+      table: {
+        type: { summary: 'boolean' }
+      },
+      defaultValue: 'false'
+    },
+    iconProps: {
+      type: { name: 'string', required: false },
+      description: 'The props to pass to the icon to display on the component',
+      table: {
+        type: { summary: 'string' }
+      }
+    },
+    theme: {
+      type: { name: 'string', required: false },
+      options: ['dark', 'light'],
+      description: 'The variant of component to render',
+      table: { type: { summary: 'light' }, defaultValue: { summary: 'light' } },
+      defaultValue: 'light',
+      control: { type: 'radio' }
+    }
+  },
+  args: {
+    text: 'Projects Completed',
+    number: 21,
+    bordered: true,
+    rounded: true,
+    withAnimation: true,
+    theme: 'dark',
+    iconProps: {
+      type: 'heart',
+      size: 2,
+      className: 'mr-4 mb-8',
+      colour: 'white',
+      bgColour: 'primary'
+    }
+  }
+}
+
+const Template: ComponentStory<typeof InformationIcon> = (args) => <InformationIcon {...args} />
+
+export const _InformationIcon = Template.bind({})
+
+export default componentMeta

package/dist/components/InformationIcon/index.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useRef } from 'react'
+import Icon, { Props as iconProps } from '@components/Icon'
+import classNames from 'classnames'
+
+export interface Props {
+  id: string
+  className?: string
+  text?: string
+  number: number
+  bordered?: boolean
+  rounded?: boolean
+  withAnimation?: boolean
+  iconProps?: iconProps
+  theme?: 'dark' | 'light'
+}
+
+const InformationIcon = ({
+  id,
+  className,
+  text,
+  number,
+  bordered = false,
+  rounded = false,
+  withAnimation = false,
+  iconProps,
+  theme = 'light'
+}: Props): JSX.Element => {
+  const colours = theme === 'dark' ? 'placeholder-white bg-primary text-white' : 'placeholder-primary bg-white text-primary'
+  const loaded = useRef(false)
+
+  useEffect(() => {
+    const element = document.getElementById(`${id}_number`)
+    const observer = new IntersectionObserver((entries, observer) => {
+      entries.forEach(entry => {
+        if (entry.intersectionRatio >= 0.1 && !loaded.current) {
+          loaded.current = true
+          counterAnimation(
+            document.getElementById(`${id}_number`), 0, number, 3000)
+        }
+      })
+    }, { threshold: 1 })
+    ;(element != null) && withAnimation && observer.observe(element)
+  }, [])
+
+  const wrapperClasses = 'h-96 flex items-center text-center ease-out duration-300'
+
+  const classList = classNames({
+    border: bordered,
+    'rounded-2xl': rounded
+  },
+  className,
+  colours,
+  'flex flex-col justify-center w-full h-full items-center ease-out duration-300 text-md lg:text-md hover:text-lg')
+
+  const counterAnimation = (obj: any, start: number, end: number, duration: number): void => {
+    let startTimestamp: number
+    const step = (timestamp: number): void => {
+      startTimestamp = timestamp
+      const progress = Math.min((timestamp - startTimestamp) / duration, 1)
+      obj.innerHTML = Math.floor(progress * (end - start) + start)
+      if (progress < 1) {
+        window.requestAnimationFrame(step)
+      }
+    }
+    window.requestAnimationFrame(step)
+  }
+
+  return (
+    <div
+      id={id}
+      className={wrapperClasses}
+    >
+      <div className={classList}>
+        {(iconProps != null) &&
+          <Icon {...iconProps} />}
+        {number !== undefined &&
+          <p>{number}</p>}
+        <p>{text}</p>
+      </div>
+    </div>
+  )
+}
+
+export default InformationIcon

package/dist/components/Input/Input.stories.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import Input from './index'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+const componentMeta: ComponentMeta<typeof Input> = {
+  title: 'Trepur Components/Rupert Bennett/Atoms/Input',
+  component: Input,
+  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: ''
+      }
+    },
+    required: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    hasValidation: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    errors: {
+      description: '',
+      control: 'array',
+      table: {
+        category: ''
+      }
+    },
+    value: {
+      description: 'The default value of the input',
+      control: 'text',
+      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 placeholder',
+    errors: [
+      'This is an error',
+      'This is another error',
+      'This is a third error'
+    ]
+  }
+}
+
+const Template: ComponentStory<typeof Input> = (args) => <Input {...args} />
+
+export const _Input = Template.bind({})
+
+export default componentMeta

package/dist/components/Input/index.tsx

@@ -0,0 +1,126 @@
+import React from 'react'
+import classNames from 'classnames'
+
+export interface Props {
+  id?: string
+  className?: string
+  labelClasses?: string
+  inputClasses?: string
+  autoComplete?: string
+  disabled?: boolean
+  formId?: string
+  height?: string
+  maxLength?: number
+  minLength?: number
+  pattern?: string
+  required?: boolean
+  readOnly?: boolean
+  label?: string
+  type?: string
+  name?: string
+  placeholder?: string
+  hasValidation?: boolean
+  bold?: boolean
+  autoFocus?: boolean
+  onChange?: (e: any) => void
+  onBlur?: () => void
+  onFocus?: () => void
+  errors?: string[]
+  value?: string
+  theme?: 'dark' | 'light'
+}
+
+const Input = ({
+  id,
+  className,
+  labelClasses,
+  inputClasses,
+  autoComplete,
+  disabled,
+  formId,
+  height,
+  maxLength,
+  minLength,
+  pattern,
+  required,
+  readOnly,
+  autoFocus,
+  label,
+  type,
+  name,
+  placeholder,
+  bold,
+  onChange,
+  onBlur,
+  onFocus,
+  hasValidation,
+  errors,
+  value,
+  theme
+}: 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 labelClassList = classNames({
+    'font-bold': bold
+  }, labelClasses, 'w-auto pb-2')
+
+  const inputClassList = classNames({
+  }, inputClasses, colours, 'border px-2 py-2 mb-2 rounded-md')
+
+  const newId = id !== undefined ? `-${id}` : ''
+  return (
+    <div
+      id={id}
+      className={classList}
+    >
+      {label !== undefined &&
+        <label
+          id={`label${newId}`}
+          className={labelClassList}
+          htmlFor={`input${newId}`}
+        >
+          <p>
+            {label}
+            {required === true &&
+              <span className='text-red'>*</span>}
+          </p>
+        </label>}
+      <input
+        id={`input${newId}`}
+        className={inputClassList}
+        autoComplete={autoComplete}
+        disabled={disabled}
+        form={formId}
+        height={height}
+        maxLength={maxLength}
+        minLength={minLength}
+        pattern={pattern}
+        required={required}
+        readOnly={readOnly}
+        type={type}
+        name={name}
+        value={value}
+        placeholder={placeholder}
+        onChange={onChange}
+        onBlur={onBlur}
+        onFocus={onFocus}
+      />
+      {hasValidation === true &&
+        <div id={`errors${newId}`}>
+          {errors?.map((error, i) => {
+            return (
+              <p
+                key={`error_msg_${i + 0}`}
+                className='text-red text-sm'
+              >
+                {error}
+              </p>
+            )
+          })}
+        </div>}
+    </div>
+  )
+}
+
+export default Input

package/dist/components/Jumbotron/Jumbotron.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { idAndClassName } from '@utils/controls'
+import Jumbotron from './index'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+const componentMeta: ComponentMeta<typeof Jumbotron> = {
+  title: 'Trepur Components/Rupert Bennett/Organisms/Jumbotron',
+  component: Jumbotron,
+  parameters: {},
+  argTypes: {
+    ...idAndClassName
+  },
+  args: {
+    image: 'https://picsum.photos/1500/400'
+  }
+}
+
+const Template: ComponentStory<typeof Jumbotron> = (args) => <Jumbotron {...args} />
+
+export const _Jumbotron = Template.bind({})
+
+export default componentMeta

package/dist/components/Jumbotron/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import classNames from 'classnames'
+
+export interface Props {
+  id?: string
+  className?: string
+  image?: string
+  altText?: string
+}
+const Jumbotron = ({
+  id,
+  className,
+  image,
+  altText
+}: Props): JSX.Element => {
+  const classList = classNames(className)
+
+  return (
+    <div id={id} className={classList}>
+      <img className='w-full object-cover' src={image} alt={altText} />
+    </div>
+  )
+}
+
+export default Jumbotron

package/dist/components/Nav/Nav.stories.tsx

@@ -0,0 +1,155 @@
+import React from 'react'
+import Nav from './index'
+import { idAndClassName } from '@utils/controls'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import logoDarkTheme from '@assets/images/primary-logo-bold.png'
+import logoImage from '@assets/images/secondary-logo-bold.png'
+
+const navLinks = [
+  { title: 'Home', href: '/', isActive: true },
+  { title: 'Resume', href: '/', isActive: false },
+  { title: 'Contact Me', href: '/', isActive: false }
+]
+
+const componentMeta: ComponentMeta<typeof Nav> = {
+  title: 'Trepur Components/Rupert Bennett/Organisms/Nav',
+  component: Nav,
+  parameters: {
+    backgrounds: {
+      default: 'grey',
+      values: [
+        {
+          name: 'grey',
+          value: '#f3f3f3'
+        }
+      ]
+    }
+  },
+  argTypes: {
+    ...idAndClassName,
+    navLinks: {
+      description: 'An array of nav links to display in the component',
+      table: {
+        type: { summary: 'array' }
+      }
+    },
+    asSideBar: {
+      type: { name: 'boolean', required: false },
+      description: 'Sets the expanding mechanism to work as a side bar on mobile',
+      table: {
+        type: { summary: 'boolean' }
+      }
+    },
+    dropdownNavHeight: {
+      type: { name: 'string', required: false },
+      description: 'The distance in which the dropdown should come on mobile',
+      table: {
+        type: { summary: 'string' }
+      }
+    },
+    logo: {
+      type: { name: 'string', required: false },
+      description: 'The logo to display on the component',
+      table: {
+        type: { summary: 'string' }
+      }
+    },
+    logoDarkTheme: {
+      type: { name: 'string', required: false },
+      description: 'An optional dark them logo for dark mode',
+      table: {
+        type: { summary: 'string' }
+      }
+    },
+    mobileLogo: {
+      type: { name: 'string', required: false },
+      description: 'An optional mobile logo for mobile devices',
+      table: {
+        type: { summary: 'string' }
+      }
+    },
+    mobileLogoDarkTheme: {
+      type: { name: 'string', required: false },
+      description: 'An optional dark them mobile logo for mobile dark mode',
+      table: {
+        type: { summary: 'string' }
+      }
+    },
+    logoLink: {
+      type: { name: 'string', required: false },
+      description: 'The link to navigate to when clicking on the logo',
+      table: {
+        type: { summary: 'string' }
+      }
+    },
+    mobileClasses: {
+      type: { name: 'string', required: false },
+      description: '',
+      table: {
+        type: { summary: 'string' }
+      }
+    },
+    fixedTop: {
+      type: { name: 'boolean', required: false },
+      description: 'Sets the header to fix at the top when true',
+      table: {
+        type: { summary: 'boolean' }
+      }
+    },
+    getNavStatus: {
+      type: { name: 'boolean', required: false },
+      description: 'Returns the status of the header, opened or closed in mobile',
+      table: {
+        type: { summary: 'function' }
+      }
+    },
+    theme: {
+      type: { name: 'string', required: false },
+      options: ['dark', 'light'],
+      description: 'The them to render the component in',
+      table: {
+        type: { summary: 'dark' },
+        defaultValue: { summary: 'dark' }
+      },
+      defaultValue: 'dark',
+      control: { type: 'radio' }
+    },
+    text: {
+      type: { name: 'string', required: false },
+      description: 'Text to display on the component',
+      table: {
+        type: { summary: 'string' }
+      }
+    },
+    textLink: {
+      type: { name: 'string', required: false },
+      description: 'A link to navigate to when clicking on the text in the component',
+      control: 'string',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    logoLink: '/',
+    navLinks,
+    asSideBar: true,
+    dropdownNavHeight: '80',
+    logo: logoImage,
+    logoDarkTheme,
+    mobileLogo: logoImage,
+    mobileLogoDarkTheme: logoDarkTheme,
+    fixedTop: true,
+    theme: 'dark',
+    text: 'rupertbennett.com',
+    getNavStatus: (status) => {
+      console.log(status ? 'open' : 'closed')
+    }
+  }
+}
+
+const Template: ComponentStory<typeof Nav> = (args) => <Nav {...args} />
+
+export const _Nav = Template.bind({})
+
+export default componentMeta