Necessarily Precedes Mischief

    bellini-slushie-components-v2

    2.0.0-alpha.5 • Public • Published

    bellini-slushie-components-v2

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

    NPM JavaScript Style Guide

    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

    Keywords

    none

    Install

    npm i bellini-slushie-components-v2

    DownloadsWeekly Downloads

    4

    Version

    2.0.0-alpha.5

    License

    MIT

    Unpacked Size

    1.12 MB

    Total Files

    8

    Last publish

    Collaborators

    • zingzinco