content-nexus-components

This project provides a complete set of accessible, customizable UI components that combine the accessibility features of Adobe's React Aria Components with the utility-first styling approach of Tailwind CSS.

Components

• Button - Accessible button component with various styles and states
• Select - Dropdown select component with keyboard navigation
• ComboBox - Autocomplete input with dropdown suggestions
• Field - Form field wrapper with label and validation support
• ListBox - Accessible list selection component
• Popover - Floating content container

Development

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn package manager

Installation

Get the NPM_TOKEN and place it in .npmrc file in the root folder, in the folllowing way:

//registry.npmjs.org/:_authToken=<YOUR_NPM_TOKEN>

npm install

Running Storybook

To start the Storybook development server and view the component documentation:

npm run storybook

This will start Storybook on http://localhost:6006 where you can:

• Browse all available components
• View interactive examples
• Test different component states and props
• Read component documentation

Building Storybook

To build a static version of Storybook for deployment:

npm run build-storybook

The built files will be generated in the storybook-static directory.

Testing the Package Locally

To test this package in another project before publishing, use the npm pack method. This approach creates a tarball (.tgz) file that mimics the actual npm registry installation process, helping catch potential packaging issues like missing files.

Steps:

1. Build and pack the package in this repository:

npm run build
npm pack

This creates a .tgz file (e.g., content-nexus-components-1.0.0.tgz) in the root directory.

2. Install the tarball in your test project:

cd /path/to/your/test-project
npm install /path/to/content-nexus-components/content-nexus-components-1.0.0.tgz

Or with a relative path:

npm install ../content-nexus-components/content-nexus-components-1.0.0.tgz

3. Test the components in your project as you would with a published package.

4. Update after changes: When you make changes to the package, rebuild and repack, then reinstall in your test project:

# In the package directory
npm run build
npm pack

# In your test project
npm install /path/to/content-nexus-components/content-nexus-components-1.0.0.tgz

Note: This method validates that your package.json configuration (especially the files field) correctly includes all necessary files for distribution.

Technology Stack

• React - UI library
• React Aria Components - Accessibility primitives
• Tailwind CSS - Utility-first CSS framework
• TypeScript - Type safety
• Storybook - Component development and documentation
• Vite - Build tool and development server