Hex Core JS libraries.
Larger and more app-specific components and functions for use in a React app.
Finite automata library.
Houses core React functionality to be used in apps and other packages in this repository. Includes basic components, utility functions, general hooks and more.
Helpful utilities for the recharts package.
Contains logic and components for managing and displaying forms.
A code generation CLI tool.
JSON Web Token (JWT) library.
Logging library.
Library for storing and working with user permissions.
Routing and URL handling library.
Parsing tools for Simple Relational Schema Language (SRSL).
Table library.
Test utility library.
Upload utilities library. Designed to work with uploads.hexinsights.dev.
See specific packages for installation instructions, but all should follow the pattern:
npm i @hex-insights/<package>
And require a local .npmrc file with the following contents:
registry=https://npm.pkg.github.com/hex-insights
This project uses NPM Workspaces to manage packages.
For more details, see the Development document.
To get inter-dependency to work, do the following. All steps should be done from the root directory.
npm i to install dependencies.npm run buildPackages are creating using create-react-library. After creating a new package using create-react-library, some further configuration is necessary. Use the following command to add a new app (from the packages/ directory):
npx create-react-library <package> --template typescript
The package.json file must be updated to reflect the correct package name and repository and the .prettierrc should be adjusted to match that of the other packages.
Install the following dev dependencies in the new package:
typedochttp-server (for serving documentation)@testing-library/react-hooks and react-test-renderer@^16.9.0 (if package includes exported hooks)Define the package.json command doc as npx typedoc && npx http-server docs -p 3001, then documentation can be updated and served with npm run-script doc.
Format files using prettier—configure to run on save in your editor or run manually with npx prettier --write ..
To run automatically on save with VS Code, add the following to settings.json:
"[typescript][typescriptreact][css]": {
"editor.formatOnSave": true
}
Test coverage is especially important in this repository as these packages will be imported into all/most Hex Insights projects. Run tests in vitest. Test hooks using react-hooks-testing-library.
To help teams working on projects using the Hex Core React libraries make sure components and functions are well documented.
Document components using storybook. Stories written for storybook can be used as test cases in tests which simplifies the testing/documentation process. Use the following command to setup storybook in a package:
npx -p @storybook/cli sb init --story-format=csf-ts
Document components and functions using typedoc. While storybook offers a great way to explore and test components, the documentation capabilities seem to be limited, so standard documentation should be included for components.
Note that component props need to be documented twice: inline docs above each property of the props type (for storybook); and above the component (for typedoc). Possibly this will be fixed in the future with an update to typedoc, which currently supports inline documentation for interfaces but not types, so that documentation can exist only in the type definition.
Before committing changes make sure to run tests and format all files.
Packages are registered on the GitHub Package Registry and deployed automatically using GitHub Actions. To update a published package, increment the package version number in the relevant package.json file and the package will be updated when the changes are merged into the main branch.