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.
To build all packages, run yarn build. This will trigger tsc --build
and yarn flowgen for all packages.
To build the storybook docs, run yarn build:stories, which will run
yarn build and then the default storybook build command.
To publish all packages, manually update each packages’s version field in
their package.json. If any of the packages depends on any of the other
packages being updated, be sure to update the dependency version as well.
Then run yarn publish. Publishing will trigger a build before running
npm publish to ensure that the latest changes are published. To publish
only a single package, use
yarn workspace <package-name> npm publish --access public (e.g.
yarn workspace @acusti/css-value-input npm publish --access public), but
note that in that case, you are responsible for running yarn build
yourself before triggering the 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 _._._.
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.