UI toolkit monorepo containing a React component library, UI utilities, a generative AI LLM parser, an AWS AppSync fetch utility, and more
| NPM Package Name | Version | Description |
|---|---|---|
| @acusti/appsync-fetch |  |
A promise-based node.js function for making AWS AppSync API graphql requests |
| @acusti/aws-signature-v4 |  |
An isomorphic module implementing the AWS Signature V4 (SigV4) signing process for requests |
| @acusti/css-values |  |
Utilities for parsing different types of CSS values |
| @acusti/css-value-input |  |
React component that renders a CSS value input |
| @acusti/date-picker |  |
React component that renders a date picker with range support |
| @acusti/dropdown |  |
React component that renders a dropdown UI element |
| @acusti/input-text |  |
React component that renders an uncontrolled text input |
| @acusti/matchmaking |  |
Utilities for approximate string matching (i.e. fuzzy search) |
| @acusti/parsing |  |
Loosely parse a string as JSON with numerous affordances for syntax errors |
| @acusti/post |  |
A promise-based node.js function for making graphql requests |
| @acusti/styling |  |
React component that renders a CSS string to the <head> |
| @acusti/textual |  |
Utilities for transforming and formatting text |
| @acusti/uniquify |  |
A function that ensures a string is unique amongst items |
| @acusti/use-bounding-client-rect |  |
React hook for getting an element’s boundingClientRect |
| @acusti/use-is-out-of-bounds |  |
React hook to check if an element overlaps its bounds |
| @acusti/use-keyboard-events |  |
React hook for adding key event listeners to your UI |
| @acusti/webcrypto |  |
Isomorphic method for accessing the webcrypto API |
The React components are documented and illustrated in the storybook
instance, which is located at packages/docs/ in the
repository.
The monorepo uses vitest to run its tests. To run tests across all
packages, use yarn test. To run them in watch mode, use
yarn test:watch.
We use changesets to maintain a changelog and manage versioning and publishing. To create a new changeset for changes you have made, run:
yarn changeset
When you are ready to do a release, build all packages by running
yarn build. This will trigger tsc --build and yarn flowgen for all
packages. You can then update all package versions automatically by
running:
yarn changeset version
Note: changesets is supposed to handle automatically updating any packages that depend on the changed packages, but it might not be 100% accurate at that task. Yarn has its own “Release Workflow” feature, which will update versions and dependents with 100% accuracy and can be used like so:
yarn workspace @acusti/example version patch
In some cases, I have been using yarn changeset version to update the changelogs and bump the package.json version numbers, then undoing the package.json change and redoing it with yarn version {semver type} in order to ensure that all packages that need to be updated are handled. There is an open issue in GitHub about handling changelogs from yarn’s release workflow, but it hasn’t had any updates since 2022.
Lastly, to publish the new versions to npm, run:
yarn changeset publish
After publishing the packages, run yarn to update the yarn.lock file and
then commit the version updates with a message in the form of:
:arrow_up: Bump package versions to _._._.
To build the storybook docs, run yarn build:stories, which will run
yarn build and then the default storybook build command.
The two main run scripts for developing are yarn dev:watch, which kicks
off the TypeScript compiler in --watch mode, and yarn dev:stories,
which kicks off the default storybook command from packages/docs/. To run
both of those in a single terminal window, use yarn dev.