Prototype HDS Libraries

This repository contains a comparative prototype for implementing accessible UI component libraries using the following libraries:

• Radix Primitives
• HeadlessUI
• Ariakit
• React-Aria

Purpose

The goal of this project is to evaluate and compare various aspects of these libraries, including:

1. Basic Implementation: Ease of setting up components.
2. Advanced Implementation: Flexibility for complex use cases.
3. Developer Experience: Usability for developers.
4. Customization: Support for SCSS and adapting styles to custom designs.
5. Testing: Accessibility and ease of testing.
6. Documentation Quality: Clarity and thoroughness of documentation.
7. Support and Community: Active development and community engagement.
8. Compilation and Usage: Output size and integration in an external project.

Repository Structure

packages

Each folder within packages contains a prototype implementation using one of the libraries. Each prototype:

• Implements similar components for a fair comparison.
• Includes a build script to compile the project and generate a .tgz package.
• Can be individually showcased in Storybook.

demo

The demo folder serves as an external project that:

1. Imports the compiled .tgz packages from packages.
2. Demonstrates the integration of these prototypes in a real-world scenario.
3. Allows testing of styles, behavior, and performance.

Setup

Running Storybook

To showcase individual prototypes, run the following command from the root:

npm run dev

This launches Storybook and displays the components implemented in each library.

Building Prototypes

To build a specific prototype, navigate to its folder (e.g., packages/radix) and run:

npm run build

Alternatively, you can build all prototypes at once by running the following command from the root:

npm run build -ws

Both approaches will generate .tgz files in the respective prototype folders.

Testing Integration in demo

1. Navigate to the demo folder using cd demo, then clean up previous dependencies with:

rm -fr node_modules package-lock.json

Next, install the new dependencies by running:

npm install

2. Start the demo project to verify integration:

   npm run dev

Evaluation Criteria

Criterium	Subcriteria
Ease of Use	- Speed of implementation
	- Integration with SASS/CSS Modules
Accessibility	- Out-of-the-box support
	- Adaptability without complex setups
Flexibility	- Customization in styles and behavior
	- Modularity for complex use cases
Documentation/Community	- Clarity of examples in documentation
	- Community support
Testing	- Compatibility with testing tools
	- Ease of configuration
Final Size	- Minified
	- Compressed

Contributing

This project is designed for internal evaluation purposes. If you wish to contribute, please fork the repository and open a pull request.

License

This project is licensed under the MIT License.