bellini-slushie-components-v2

*!!!! IMPORTANT -- Use yalc to work with packages locally. *

Install

npm install --save bellini-slushie-components-v2

Hooks

useSignUpForm

A custom react hook for handling sign-ups. Creates a new row in Airtable: Email list and populates it with inputs.

import useSignUpForm from '../custom-hooks/use-sign-up-form' 

const initialValues = { email: '' }
const { handleSubmit, handleInputChange, inputs, resetForm } = useSignUpForm(initialValues, signup)

Components

These are simple or composite molecules. They generally do not require additional components or composition by the parent (using the library).

Footer

import Footer from '../components/footer' 

<Footer /> 

Sign-up Form

import SignUpForm from '../components/signup-form' 

<SignUpForm 
  
  API_BASE_URL={functionsURL} 
  
  // @types { 'left' | 'center' | 'right' }
  // Default: center 
  alignment="left"
  
/> 

Features

Nav Bar

import { Navbar } from 'bellini-slushie-components-v2'

All the links in the Navbar have to be added from the parent project because the way links are handled depend heavily on the framework used. Given this project deals with Next.JS and Gatsby, I've choosen not to include them. Multi-repo link refers are also non-trivial.

The Navbar feature requires three props:

1. apiBaseUrl: when the subscribe button triggers the sign-up form modal
2. menuLinks: returns a set of links
3. brandLink: image of logo (preferably linked)

Navbar comes by default with the ModalTriggerButton.

MenuLinks

A good pattern for doing this is to define an array up top for easy maintenence and readibility in future.

Here is an example for Next.js: Handling external, internal and active links:

External links are treated as <a> but internal links are wrapped with the Link. ActiveLink identifies the currently active page and allows us to add custom styles to them.

For them to render as desired, attach the specific classnames: bsNavbar__menu-link, bsNavbar__menu-text, bsNavbar__menu-link--active

const menu = [
  { text: "Home", route: "/index", isExternal: false },
  { text: "About", route: "/about", isExternal: false },
  { text: "Blog", route: "https://bellinislushie.com/blog/", isExternal: true }
]

return (
  menu.map((menuItem) =>
      menuItem.isExternal ? 
      (<a key={menuItem.text} href={menuItem.route} className="bsNavbar__menu-link">
          <div className="bsNavbar__menu-text">{menuItem.text}</div>
      </a>)
      :
      (<ActiveLink key={menuItem.text} activeClassName="bsNavbar__menu-link--active" key={menuItem.text} href={menuItem.route}>
          <a className="bsNavbar__menu-link">
              <div className="bsNavbar__menu-text">{menuItem.text}</div>
          </a>
      </ActiveLink>)
  )
)

BrandLink The logo image that appears on the left hand side of the Navbar. Good practice to include a link back to the homepage.

Additional classnames required bsNavbar__logo

In Next.JS it should be wrapped in a Link and <a>.

<Link href="/">
  <a>
    <WebpPicture className="bsNavbar__logo" imgSrc="../static/images/20190925-logo.png"></WebpPicture>
  </a>
</Link>

License

MIT © tzeying