trepur_components 0.4.7 → 1.0.0

package/dist/components/Nav/index.tsx

@@ -0,0 +1,180 @@
+import React, { useState } from 'react'
+import classNames from 'classnames'
+import NavItem, { Props as navItemProps } from '@components/NavItem'
+import HamburgerIcon from '@components/HamburgerIcon'
+
+interface Props {
+  id: string
+  className: string
+  navLinks: 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')
+
+  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} flex`}>
+        <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

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

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

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

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

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

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

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

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