trepur_components 1.0.2 → 1.0.3

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

package/dist/components/Profile/Profile.stories.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import Profile from './index'
-import userImage from '@assets/images/user.jpeg'
-import { idAndClassName } from '@utils/controls'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof Profile> = {
-  title: 'Trepur Components/Other/Organisms/Profile',
-  component: Profile,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    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' }
-      }
-    },
-    alignment: {
-      description: '',
-      control: 'select',
-      options: ['left', 'center', 'right'],
-      table: {
-        category: ''
-      }
-    },
-    profileLinks: {
-      description: '',
-      control: 'text',
-      table: {
-        category: ''
-      }
-    }
-  },
-  args: {
-    imageProps: {
-      image: userImage
-    }
-  }
-}
-
-const Template: ComponentStory<typeof Profile> = (args) => <Profile {...args} />
-
-export const _Profile = Template.bind({})
-
-export default componentMeta

package/dist/components/Profile/index.tsx

@@ -1,87 +0,0 @@
-import React, { useState } from 'react'
-import Image, { Props as imageProps } from '@components/Image'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  profileLinks?: Array<{ name: string, link: string }>
-  alignment?: 'left' | 'right'
-  imageHeight?: number
-  imageWidth?: number
-  rounded?: boolean
-  bordered?: boolean
-  imageProps?: imageProps
-}
-
-const Profile = ({
-  id,
-  className,
-  profileLinks,
-  alignment,
-  imageHeight = 0,
-  imageWidth = 0,
-  rounded,
-  bordered,
-  imageProps
-}: Props): JSX.Element => {
-  const [profileState, setProfileState] = useState(false)
-
-  const profileAlignment = classNames({
-    'float-right': alignment === 'right',
-    'float-left': alignment === 'left'
-  })
-
-  const dropdownAlignement = classNames({
-    'mt-16 -mr-16': alignment === 'right',
-    'mt-16 -ml-16': alignment === 'left'
-  })
-
-  const dropdownTextAlignement = classNames({
-    'text-center': alignment !== 'right' && alignment !== 'left'
-  })
-
-  const classList = classNames({
-    'rounded-full': rounded === true,
-    border: bordered === true
-  }, className, `h-${imageHeight} w-${imageWidth} object-cover`)
-
-  return (
-    <>
-      <div id={id} className={`text-center ${classList}`}>
-        <div className={`hidden sm:inline-flex  inset-y-0 ${profileAlignment}`}>
-          <button
-            onClick={() => setProfileState(!profileState)}
-            type='button'
-            className='flex rounded-full'
-          >
-            <Image {...imageProps} />
-          </button>
-        </div>
-      </div>
-      {profileState &&
-        <div className={dropdownTextAlignement}>
-          <div className={`w-48 sm:inline-block shadow-lg 
-                        z-10 ${profileAlignment} ${dropdownAlignement}`}
-          >
-            {profileLinks?.map((link, i) => {
-              return (
-                <a
-                  key={`profile_link_${i + 1}`}
-                  href={link.link}
-                  className='border-b font-bold block px-4 py-2 text-sm'
-                  role='menuitem'
-                                    // tabindex="-1"
-                  id={`user-menu-item-${i + 1}`}
-                >
-                  {link.name}
-                </a>
-              )
-            })}
-          </div>
-        </div>}
-    </>
-  )
-}
-
-export default Profile

package/dist/components/Row/Row.stories.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import Row from './index'
-import CardWithTopImage from '@components/CardWithTopImage'
-import logo from '@assets/images/primary-logo.png'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { idAndClassName } from '@utils/controls'
-
-const cardChild = (
-  <CardWithTopImage
-    imageProps={{
-      image: logo,
-      rounded: true,
-      height: 4,
-      width: 4,
-      roundedFull: true
-    }}
-    className='w-1/3'
-  >
-    <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 Row> = {
-  title: 'Trepur Components/Rupert Bennett/Atoms/Row',
-  component: Row,
-  argTypes: {
-    ...idAndClassName,
-    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: {
-    children: cardChild
-  }
-}
-
-const Template: ComponentStory<typeof Row> = (args) => <Row {...args} />
-
-export const _Row = Template.bind({})
-
-export default componentMeta

package/dist/components/Row/index.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  children: any
-}
-
-const Row = ({
-  id,
-  className,
-  children
-}: Props): JSX.Element => {
-  const classList = classNames(className, 'flex flex-wrap')
-
-  return (
-    <div id={id} className={classList}>
-      {children}
-    </div>
-  )
-}
-
-export default Row