@navinc/base-react-components

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.

Contributing

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/...tsx  //Optional
/index.tsx
/readme.md  // Prefer JSDocs over readme when it makes sense
/component.stories.tsx

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.ts 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 This package must be rebuilt for changes to be reflected in Pipsqueak. Turbo will handle this automatically when running pnpm run dev:pipsqueak, otherwise run pnpm run build within this directory or pnpm turbo --filter=@navinc/base-react-components build from the root of the repo.

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.

Using base-react-components in your own projects

1. Install it in your project pnpm i @navinc/base-react-components
2. Use it! Ex: import { Copy } from '@navinc/base-react-components'
3. Refer to Storybook for implementation details for each component.