@bonobolabs/mds-web-ui
v1.7.4
Published
React component library, used in MDS-Accounts, MDS-Home, actions-web, and flow-web.
Downloads
244
Readme
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>