Is split into two different parts: Storybook, and Base Components. Storybook is used for development and testing of the ui and for reference for developers on the implementation details of an UI component. The readme files for each component inside Storybook acts as the Styleguide. Lastly, Base Components is the directory containing all of our base reusable components which gets published as the npm package.
You can view the current build of Storybook here.
Bug Reporting: For technical issues post to ux-guild or
front-end-team slack channel. For design issues talk to a designer.
Please run all commands from the monorepo root.
-
npx lerna run start --stream --scope=@navinc/base-react-components- Make changes and watch them at http://localhost:9009/ - Watch and run your tests with
npx lerna run test:watch --stream --scope=@navinc/base-react-components - Test in pipsqueak with
./bin/copy-package brc pipor to continuously copy over to pipnpx lerna run dev:pip --stream --scope=@navinc/base-react-components - When it works as you need it to, build it:
npx lerna run build --stream --scope=@navinc/base-react-components - Run the tests post build:
npx lerna run test --stream --scope=@navinc/base-react-components
To start Storybook, go to the monorepo root and run the following:
npx lerna run start --stream --scope=@navinc/base-react-componentsAnd go to http://localhost:9009/
Adding a new Base Component: Copy the pattern used with other base components. Each component should have its own folder with a structure similar to
/parts/...js //Optional
/index.js
/readme.md
/story.js
If it makes sense, organize related components by putting them in their own sub
directory, ei: /typography, but prefer a flat file structure.
IMPORTANT: Don't forget to add them to the main base-components/index.js
file.
When should you add a new component? Good question! You should add a component to our base components when you have found a good reusable abstraction of a piece of our ui. Make sure the team agrees with the abstraction and that it has been passed off by design then add it and and create a pull request for it.
Testing Locally in pipsqueak before publishing
Assuming pipsqueak and base-react-components are both in ~/{user}/nav/
you can use bin/copy-to-pip and it will build base-react-components and
manually put it in the node_modules folder in pipsqueak for you. Then you can
restart pipsqueak and see your changes.
Updating a Base Component: This can be dangerous waters. Its super easy to update global components now, but be careful cause this will change it everywhere its used! Make sure to be smart about changes you make and to thoroughly test your changes! If you do make global changes, make sure you bump the major version.
npx lerna run build --stream --scope=@navinc/base-react-componentsnpx lerna run build:storybook --stream --scope=@navinc/base-react-componentsAnd open /public/base-react-components/index.html to test storybook.
-
npx lerna run test --stream --scope=@navinc/base-react-componentsThis will run Jest and our linter.
- Install it in your project
npm i @navinc/base-react-components - Use it! Ex:
import { Copy } from '@navinc/base-react-components' - Refer to Storybook for implementation details for each component.
We use the following add-ons are in Storybooks. Please read their documentation for more details.
- Controls: allow you to edit React props dynamically using the Storybook UI.
- Viewport: allows your stories to be displayed in different sizes and layouts
- Actions: used to display data received by event handlers.
- Options: used to set configure the Storybook UI.
- a11y: accessibility testing. story.
- Info : Shows additional info in the storybook ui about a component
- Add back Loki
- Add eslint from pip
- Automate most of the build in the pipeline
- Add https://github.com/buildit/storybook-addon-versions