@bonobolabs/mds-web-ui

MDS-Web-UI

React component library, used in MDS-Accounts, MDS-Home, actions-web, and flow-web.

Storybook: https://mds-web-ui-storybook.netlify.com/

---

About

This project is published to NPM as the following packages:

• @bonobolabs/mds-web-ui - uses react-router links (for MDS-Accounts)
• @bonobolabs/mds-web-ui-gatsby - uses gatsby links (for MDS-home)
• @bonobolabs/mds-web-ui-reach - for @reach/router (for actions-web and flow-web)

It is packaged using babel, using one of three scripts in the package.json:

    "build": "babel src/ -d lib --copy-files",
    "build-gatsby": "NODE_ENV=gatsby babel src/ -d gatsby --copy-files",
    "build-reach": "NODE_ENV=reach babel src/ -d reach --copy-files",

The NODE_ENV is read by the babel config, which swaps out the ReactRouterLink import with GatsbyLink (for the gatsby build) and ReachRouterLink (for the @reach/router build).

Dev

Install deps:

yarn

Install peers: (so elegant)

node -e "const peers = Object.entries(require('./package.json').peerDependencies || {}).map(d => d.join('@')).join(' '); if (peers.length) process.stdout.write('yarn add -P --no-lockfile ' + String(peers));" | sh

Run locally:

yarn storybook

Publishing

yarn build
yarn publish --access=public

Publish the Gatsby version

yarn build-gatsby
cd gatsby
yarn publish --access=public

Publish the @reach/router version

yarn build-reach
cd reach
yarn publish --access=public

---

Links

Okay, so here's how links work.

Router specific

GatsbyLink.js, ReachRouterLink.js and ReactRouterLink.js all export three components:

• DefaultLink - this is a styled version of the library's link component. You probably won't use it directly.

• ActiveLink - this is a wrapper around the Link component (read on), which styles Links when they are active (e.g. if you are at /home then links to /home will be bold).

  If you set exact to true, then only /home will be counted as an active link - otherwise /home/test will also match)

  <ActiveLink to="/home" exact={true}>
    Home
  </ActiveLink>

• ButtonLinkLocal - this is a button that uses the library's navigation function

  <ButtonLinkLocal type="primary" href="/home">Go Home<ButtonLinkLocal>

Link

Link.js exports only a single component: Link. This compoent handles both internal and external links, with consistent styling.

For external links, Link will render a styled anchor tag: (this component is called InlineLink internally)

<Link to="/" external>
  Home
</Link>

For internal links, Link uses the DefaultLink (above) - the library's link component (e.g. a Gatsby Link)

<Link to="/">Home</Link>

The other props:

• newTab: whether to open links in a new tab (target="_blank")
• inline: true if you don't want to wrap links in a <div>