STOKR - Components Library

For consuming applications

"useNavigate() may be used only in the context of a <Router> component"

Components that use routing (e.g. LearnMore, MainMenu, AuthProvider, HeaderHo, StepsProgress, RegisterTaxId) must be rendered inside a React Router. Wrap your app with a Router from react-router-dom:

import { BrowserRouter } from 'react-router-dom'
import App from './App'

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

Install the peer dependency if needed: npm install react-router-dom

"Invalid hook call" / "useContext of null"

If you see "Invalid hook call" or "Cannot read properties of null (reading 'useContext')" when using this library, the app and the library must use the same React instance. Do this in your app:

1. Install peer dependencies (if not already):
   npm install react react-dom styled-components

2. Vite apps – add dedupe in vite.config.js / vite.config.ts:

   export default defineConfig({
     resolve: {
       dedupe: ['react', 'react-dom', 'styled-components'],
     },
     // ...rest of config
   })

3. Rebuild / reinstall the library after pulling the latest version (e.g. npm run build:dist in the library, then in your app reinstall or refresh the dependency).

"build": "cross-env BABEL_ENV=production babel src -d dist",

Add to Storybook

Story Source for showing code consumption examples Viewport for allowing us to test different screen sizes and devices

How I managed to create the build for distribution

https://medium.com/better-programming/how-to-publish-a-react-component-library-c89a07566770

How to build and publish new version

1. Commit your changes.
2. Update CHANGELOG.md – add a new # vX.Y.Z section at the top (below the intro) with a short list of changes for this version.
3. Bump the version: npm version <version> (e.g. npm version 1.2.0 or npm version 3.0.0-alpha.1).
4. Run npm run build:dist to build the dist folder for npm.
5. If you added new images, copy them to the same path under dist/.
6. Publish: npm publish (you must be authenticated to publish to npm).

Consumers can see what changed in each release in CHANGELOG.md.