trepur_components 1.0.2 → 1.0.4

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

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

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

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

package/dist/components/Nav/index.tsx

@@ -1,180 +0,0 @@
-import React, { useState } from 'react'
-import classNames from 'classnames'
-import NavItem, { Props as navItemProps } from '@components/NavItem'
-import HamburgerIcon from '@components/HamburgerIcon'
-
-export interface Props {
-  id: string
-  className: string
-  navLinks: Array<navItemProps>
-  asSideBar: boolean
-  dropdownNavHeight: string
-  logo: string
-  logoDarkTheme: string
-  mobileLogo: string
-  mobileLogoDarkTheme: string
-  logoLink: string
-  mobileClasses: string
-  fixedTop: boolean
-  getNavStatus: (asSideBar: boolean, open: boolean) => void
-  theme: 'light' | 'dark'
-  text?: string
-  textLink?: string
-}
-
-const Nav = ({
-  id,
-  className,
-  navLinks,
-  asSideBar,
-  dropdownNavHeight,
-  logo,
-  logoDarkTheme,
-  mobileLogo,
-  mobileLogoDarkTheme,
-  logoLink,
-  fixedTop,
-  mobileClasses,
-  getNavStatus,
-  theme = 'dark',
-  text,
-  textLink
-}: Props): JSX.Element => {
-  const [showSideNav, setShowSideNav] = useState(false)
-  const [showDropdownNav, setShowDropdownNav] = useState(false)
-
-  const colours = theme === 'dark' ? 'text-white bg-primary' : 'text-primary bg-white'
-  const textColour = theme === 'dark' ? 'text-white' : 'text-primary'
-  const navItemsClassList = 'flex justify-center my-auto px-4 lg:px-8'
-  const logoClassList = 'flex justify-center my-auto pl-16 lg:pl-24'
-  const emailClassList = 'flex justify-center my-auto pr-24'
-  const classList = classNames(className, colours, 'h-16')
-
-  const sideNavClasses = classNames({
-    'w-0': !showSideNav,
-    'w-full sm:w-1/3': showSideNav
-  }, colours, 'z-50 md:hidden mt-20 fixed overflow-hidden h-full duration-700')
-
-  const dropdownNavClasses = classNames({
-    'h-0': !showDropdownNav,
-    [`h-${dropdownNavHeight}`]: showDropdownNav
-  }, colours, 'z-50 md:hidden overflow-hidden pt-20')
-
-  const logoImageClassList = 'h-16 w-auto'
-
-  const mobileClassList = classNames({
-    'fixed w-full z-50 top-0 mt-0': fixedTop
-  }, colours, mobileClasses, 'flex items-center md:hidden py-2')
-
-  const desktopClassList = classNames({
-    'fixed w-full z-50 top-0 mt-0': fixedTop
-  }, 'w-full justify-between hidden md:flex items-center justify-between sm:items-stretch text-center flex bg-primary')
-
-  const toggleMenu = (): void => {
-    getNavStatus?.(asSideBar, true)
-    if (asSideBar) {
-      setShowSideNav(!showSideNav)
-    } else {
-      setShowDropdownNav(!showDropdownNav)
-    }
-  }
-
-  return (
-    <header id={id} className={classList}>
-      {/* mobile */}
-      <div
-        id='mobile-nav'
-        className={`${mobileClassList}`}
-      >
-        {/* Nav collapse icon */}
-        <div
-          id='nav-collapse-btn-wrapper'
-          className='absolute inset-y-0 left-8 top-5'
-        >
-          <HamburgerIcon onClick={toggleMenu} />
-        </div>
-        {/* Logo */}
-        <a id='logo-link' className='mx-auto' href={logoLink}>
-          <img className={logoImageClassList} src={theme === 'dark' ? mobileLogoDarkTheme : mobileLogo} alt='Logo' />
-        </a>
-      </div>
-
-      <div id='destop-nav' className={desktopClassList}>
-        <div className={logoClassList}>
-          <a id='logo-link' className='mx-auto' href={logoLink}>
-            <img className={logoImageClassList} src={theme === 'dark' ? logoDarkTheme : logo} alt='Logo' />
-          </a>
-        </div>
-        <div className={navItemsClassList}>
-          {navLinks?.map((navLink, i) => {
-            return (
-              <NavItem
-                key={`navItem_${i}`}
-                {...navLink}
-                className={i !== 0 ? 'pl-8' : ''}
-                bordered={false}
-                rounded={false}
-                underlineOnHover
-                variant={theme === 'dark' ? 'secondary' : 'primary'}
-              />
-            )
-          })}
-        </div>
-        <div className={emailClassList}>
-          <a
-            className={`hidden lg:inline-block ${textColour}`}
-            href={textLink}
-          >
-            {text}
-          </a>
-        </div>
-      </div>
-
-      {/* Mobile Links */}
-      {/* Side Bar */}
-      {asSideBar
-        ? (
-          <div className={sideNavClasses}>
-            {navLinks?.map((navLink, i) => {
-              return (
-                <NavItem
-                  key={`navItem_${i}`}
-                  {...navLink}
-                  className='pl-8 pt-4'
-                  bordered={false}
-                  rounded={false}
-                  underlineOnHover
-                  variant={theme === 'dark' ? 'secondary' : 'primary'}
-                />
-              )
-            })}
-          </div>
-      /* dropdown */
-          )
-        : (
-          <div
-            className={dropdownNavClasses}
-            id='mobile-menu'
-          >
-            <div className='pt-2 pb-3 space-y-1'>
-              {navLinks?.map((navLink, i) => {
-                return (
-                  <NavItem
-                    key={`navItem_${i}`}
-                    {...navLink}
-                    className='pl-8 pt-2'
-                    bordered={false}
-                    rounded={false}
-                    underlineOnHover
-                    variant={theme === 'dark' ? 'secondary' : 'primary'}
-                  />
-                )
-              })}
-            </div>
-          </div>
-          )}
-    </header>
-  )
-}
-
-export default Nav

package/dist/components/NavItem/NavItem.stories.tsx

@@ -1,89 +0,0 @@
-import React from 'react'
-import NavItem from './index'
-import { action } from '@storybook/addon-actions'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { idAndClassName } from '@utils/controls'
-
-const componentMeta: ComponentMeta<typeof NavItem> = {
-  title: 'Trepur Components/Rupert Bennett/Atoms/Nav Item',
-  component: NavItem,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    title: {
-      type: { name: 'string', required: false },
-      description: 'A title for the component',
-      table: {
-        type: { summary: 'string' }
-      }
-    },
-    href: {
-      type: { name: 'string', required: false },
-      description: 'A href for the component',
-      table: {
-        type: { summary: 'string' }
-      }
-    },
-    onClick: {
-      type: { name: 'function', required: false },
-      description: 'An on click handle to execute when clicking on the component',
-      table: {
-        type: { summary: 'function' }
-      }
-    },
-    bordered: {
-      type: { name: 'boolean', required: false },
-      description: 'Enables borders around the component',
-      table: {
-        type: { summary: 'boolean' }
-      },
-      defaultValue: false
-    },
-    rounded: {
-      type: { name: 'boolean', required: false },
-      description: 'Roundes the corners of the component',
-      table: {
-        type: { summary: 'boolean' }
-      },
-      defaultValue: true
-    },
-    underlineOnHover: {
-      type: { name: 'boolean', required: false },
-      description: 'Underlines the title when hovering over the component',
-      table: {
-        type: { summary: 'boolean' }
-      },
-      defaultValue: true
-    },
-    isActive: {
-      type: { name: 'boolean', required: false },
-      description: 'Set the active state to the component',
-      table: {
-        type: { summary: 'array' }
-      },
-      defaultValue: false
-    },
-    variant: {
-      type: { name: 'string', required: false },
-      options: ['primary', 'secondary'],
-      description: 'The varient of the component to render',
-      table: {
-        type: { summary: 'string' }
-      },
-      defaultValue: 'primary',
-      control: 'radio'
-    }
-  },
-  args: {
-    title: 'Home',
-    href: '/',
-    underlineOnHover: true,
-    onClick: action('button-click')
-  }
-}
-
-const Template: ComponentStory<typeof NavItem> = (args) => <NavItem {...args} />
-
-export const _NavItem = Template.bind({})
-
-export default componentMeta

package/dist/components/NavItem/index.tsx

@@ -1,65 +0,0 @@
-import React from 'react'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  title: string
-  href?: string
-  onClick?: React.MouseEventHandler
-  bordered?: boolean
-  rounded?: boolean
-  underlineOnHover?: boolean
-  isActive?: boolean
-  variant?: 'primary' | 'secondary'
-}
-
-const NavItem = ({
-  id,
-  className,
-  title,
-  href,
-  onClick,
-  bordered = false,
-  rounded = true,
-  underlineOnHover = true,
-  isActive = false,
-  variant = 'primary'
-}: Props): JSX.Element => {
-  const linkClassList = classNames({
-    'active before:w-full': isActive,
-    'border-2 px-2 py-2': bordered,
-    'rounded-md': rounded,
-    'before:w-full': isActive,
-    'before:w-0': !isActive,
-    'text-primary before:bg-primary': variant === 'primary',
-    'text-white before:bg-white': variant === 'secondary',
-    'relative before:absolute before:-bottom-1 before:left-0 hover:before:w-full focus:before:w-full before:h-1 before:transition-all ease-linear': underlineOnHover
-  }, 'text-center whitespace-nowrap')
-
-  const classList = classNames(className, 'w-auto list-none')
-
-  const anchorClassList = classNames({
-    'relative ease-linear': underlineOnHover,
-    [linkClassList]: true // TODO: remove this once css files are compilable
-  }, 'focus:outline-none')
-
-  return (
-    <div
-      id={id}
-      className={classList}
-    >
-      <a
-        href={href}
-        onClick={onClick}
-        className={anchorClassList}
-      >
-        <span className={linkClassList}>
-          {title}
-        </span>
-      </a>
-    </div>
-  )
-}
-
-export default NavItem

package/dist/components/NewsCard/NewsCard.stories.tsx

@@ -1,71 +0,0 @@
-import React from 'react'
-import { idAndClassName } from '@utils/controls'
-import NewsCard from './index'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof NewsCard> = {
-  title: 'Trepur Components/Other/Organisms/News Card',
-  component: NewsCard,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    title: {
-      description: '',
-      control: 'text',
-      table: {
-        category: ''
-      }
-    },
-    content: {
-      description: '',
-      control: 'text',
-      table: {
-        category: ''
-      }
-    },
-    imageProps: {
-      type: { name: 'other', value: 'object' },
-      description: 'The props to pass to the image to display on the component',
-      table: {
-        type: {
-          summary: 'object'
-        },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    buttonProps: {
-      description: '',
-      control: 'text',
-      table: {
-        category: ''
-      }
-    },
-    rounded: {
-      description: '',
-      control: 'text',
-      table: {
-        category: ''
-      }
-    }
-  },
-  args: {
-    title: 'This is a title',
-    content: 'This is some content that will only be displayed if the collapsible item is expanded and will dissappear when the collapsible item is collapsed.',
-    rounded: true,
-    imageProps: {
-      image: 'https://picsum.photos/400/200',
-      rounded: true
-    },
-    buttonProps: {
-      children: 'Button 1',
-      className: 'w-full',
-      href: '/'
-    }
-  }
-}
-
-const Template: ComponentStory<typeof NewsCard> = (args) => <NewsCard {...args} />
-
-export const _NewsCard = Template.bind({})
-
-export default componentMeta

package/dist/components/NewsCard/index.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-import Button, { Props as buttonProps } from '@components/Button'
-import Image, { Props as imageProps } from '@components/Image'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  title?: string
-  content?: string
-  imageProps?: imageProps
-  buttonProps?: buttonProps
-  rounded?: boolean
-}
-
-const NewsCard = ({
-  id,
-  className,
-  title,
-  content,
-  imageProps,
-  buttonProps,
-  rounded
-}: Props): JSX.Element => {
-  const classList = classNames({
-    'rounded-lg': rounded
-  }, className, 'border flex p-2')
-
-  return (
-    <div id={id} className={classList}>
-      <div>
-        <Image {...imageProps} />
-      </div>
-      <div className='flex flex-col justify-between expandable w-auto text-center'>
-        <p>{title}</p>
-        <p>{content}</p>
-        {(buttonProps != null) &&
-          <div className='px-8'>
-            <Button {...buttonProps}>
-              {buttonProps.children}
-            </Button>
-          </div>}
-      </div>
-    </div>
-  )
-}
-
-export default NewsCard