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 |
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. Changesets is supposed to handle automatically updating any packages that depend on the changed packages, but it isn’t 100% accurate at that task. Yarn has its own “Release Workflow” feature, which will update versions and dependents with 100% accuracy. As such, the hybrid flow I have come up with is to first, run the following for each package that I have directly changed:
yarn workspace @acusti/{pkg} version patch
Then, make a note of each package that was bumped because the package depends on one or more of the packages receiving direct updates.
Then run git checkout . (or Branch › Discard All Changes…) to undo all of
the local changes.
Now, we turn to changesets. To create a new changeset, run the following and select all packages identified in the previous step (including ones that depend on the changed packages):
yarn changeset
For the contents of the changesets, the format to document updated dependencies (for the packages that depend on the packages receiving direct updates) is:
- Updated dependencies
- @acusti/aws-signature-v4@1.1.0
- @acusti/post@1.1.0
When you are ready to do a release, build all packages by running
yarn build. This will trigger each packages’ build script in
“topological” order, i.e. yarn will only run the command after all
workspaces that it depends on through the dependencies field have
successfully finished executing. You can then update all package versions
automatically by running:
yarn changeset version
Next, 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 _._._ if only one package (plus
dependents if applicable) was updated or
Create new versions via changeset version if many packages were updated.
Lastly, to publish the new versions to npm (building all the packages first if anything has changed), run:
yarn build
yarn changeset publish
git push --follow-tags
The run script for developing is yarn dev, which kicks kicks off the
default storybook command from packages/docs/package.json abd runs
storybook in watch mode. Changes to the source files (e.g.
packages/dropdown/src/Dropdown.tsx) should trigger a rebuild, but if not,
run yarn build to ensure it’s picked up.