Commonly used widgets, building blocks for forms, table components and utilities for Next.js.
\n\n
\n \n \n \n \n \n \n
\n\n## Installation\n\nThis project follows the [semantic versioning\nspecification](https://semver.org/) for its releases.\n\nTo install, run the following command:\n\n```bash\nnpm install @biomedit/next-widgets\n```\n\n## Usage\n\n### Logging\n\nTo get logs from `next-widgets`, use the `onLog` and `offLog` methods to\nregister and unregister a listener, respectively. For example, to log everything\nto the console, add the following to `_app.tsx`:\n\n```ts\nimport { LogListener, onLog, offLog } from '@biomedit/next-widgets';\n\nuseEffect(() => {\n const listener: LogListener = (data) => {\n console.log(data);\n };\n onLog(listener);\n return () => {\n offLog(listener);\n };\n}, []);\n```\n\nTo use the logger from `next-widgets` in your application, pass a namespace to\nthe `logger` function to get a logger. Then, you can call the log levels as\nmethods on that logger:\n\n```ts\nimport { logger } from '@biomedit/next-widgets';\n\nconst log = logger('Example');\n\nlog.silly(message);\nlog.verbose(message);\nlog.info(message);\nlog.http(message);\nlog.warn(message);\nlog.error(message);\n```\n\n### ToastBar\n\nTo use the `ToastBar`, first add the component to your `_app.tsx`:\n\n```tsx\nfunction App({ Component, pageProps }: AppProps) {\n return (\n <>\n \n \n \n );\n}\n```\n\nThen, add the `toast` reducer to your reducers in `redux`:\n\n```ts\nimport { toast } from '@biomedit/next-widgets';\n\nexport const reducers = combineReducers({\n ...,\n toast,\n});\n```\n\nFinally, add a typing declaration file with the following content (for example\n`next-widgets.d.ts`), replacing\n`RootState` with the type of your redux store's state:\n\n```ts\nimport 'next-widgets';\nimport { RootState } from './store';\ndeclare module 'next-widgets' {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n export interface DefaultRootState extends RootState {}\n}\n```\n\n### Customizing\n\nThe unique validation that is performed in `LabelledField` when the `unique`\nproperty is specified performs debouncing, which is set to **750 ms** by\ndefault. To change the debouncing time, set the environment variable\n`NEXT_PUBLIC_UNIQUE_VALIDATION_DEBOUNCE` to the desired amount of milliseconds.\n\n### Styling\n\nWhen importing a component from this library, if the component exposes the `sx`\nproperty, be aware that using it completely replaces the internal `sx` property\nof the component (if present).\n\nTherefore, stick to the following guidelines:\n\n- To extend the component's styling, while preserving the component's internal\n `sx` property, use the [styled API](https://mui.com/system/styled/#api).\n- To completely replace the internal `sx` property of the component, use the\n exposed `sx` property.\n\n## Generating Typing Documentation\n\nTo generate typing documentation, clone this repository locally, then run the\nfollowing commands:\n\n```bash\nnpm install\nnpm run doc\n```\n\nFinally, open the `build/docs/index.html` file in your browser.\n\n## Development\n\n### Requirements\n\n- NodeJS == 22\n\n### Setting up development environment\n\n1. Clone this repository locally\n2. Run `npm install`\n\n### Running tests\n\nRun: `npm test`\n\nThis will do the following:\n\n- Build the source files\n- Run ESLint (check only)\n- Run prettier (check only)\n- Run unit tests using jest\n\n### Running tests in watch mode\n\nRun: `npm run watch`\n\n### Automatically fixing eslint and reformat using prettier\n\nTo automatically fix errors by eslint (limited to those that can be fixed\nautomatically) and have the code get reformatted using prettier, run the\nfollowing command:\n\n```bash\nnpm run fix\n```\n\n### Trying out changes locally\n\nThere are two ways to try out your changes locally, you can either use\nStorybook, or you can build and publish an npm package to a local registry, so\nyou can install it as a dependency in a different NodeJS application.\n\nStorybook is recommended, as it's the fastest way to try out changes locally.\n\nIn some special cases it might be necessary to publish a package, but this will\nrequire you to build the source files every time you make a change.\n\n#### Storybook\n\nRun storybook using the following command:\n\n```bash\nnpm run storybook\n```\n\nAfter building the storybook, it will automatically open it in your browser.\n\nIf the component you want to try out doesn't exist yet, you need to create a\n`.stories.tsx` file in the same folder as the component.\n\nAfter making changes to either the stories or the source files, storybook will\nautomatically rebuild and refresh upon saving, so there is no need to refresh\nthe page or rerun the command.\n\n#### Publishing a package locally\n\n##### First time setup\n\nRun the following commands to install and run a local npm registry:\n\n```bash\nnpm install -g verdaccio\nverdaccio\n```\n\n##### Publishing to the local npm registry\n\n1. Make sure the local npm registry is running and the current registry of npm\n is set to your local one by running `npm run verdaccio:up`\n2. Change the version number in `package.json` to one that doesn't exist yet.\n3. Run `npm run build` (or `npm run watch:build` if you plan on making further\n changes)\n4. Run `npm publish`\n5. In your application, change the version of `@biomedit/next-widgets` in your\n `package.json` which you defined in a previous step and run `npm i`\n6. Change back to the original npm registry by running `npm run verdaccio:down`.\n\nMake sure you don't commit your `package-lock.json` with your npm registry set\nto your local registry, always make sure to change back to the original npm\nregistry first and run `npm i`. It's always a good idea to search the\n`package-lock.json` for `localhost:4873` to make sure you don't accidentally\ninclude anything from a local registry.\n\n## Release\n\nTo release a new version of the package:\n\n```bash\ngit checkout main\ngit pull\n./bumpversion.sh\ngit push --follow-tags origin main\n```\n","readmeFilename":"README.md"}
![\"NPM](\"https://img.shields.io/npm/v/@biomedit/next-widgets/latest.svg?style=flat-square\")
\n ![\"NPM](\"https://img.shields.io/npm/dm/@biomedit/next-widgets.svg?style=flat-square\")
\n ![\"Storybook](\"https://img.shields.io/badge/docs-storybook-blue?style=flat-square\"){kind=icon}
\n ![\"GitLab](\"https://img.shields.io/gitlab/pipeline/biomedit/next-widgets/main?style=flat-square\")
\n ![\"GitLab](\"https://img.shields.io/npm/l/@biomedit/next-widgets?style=flat-square\")
\n ![\"Commitizen](\"https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square\"){kind=icon}
\n