npm package: @meltwater/content-nexus-components
Description: 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.
Latest version: 0.0.9

# 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>`

```bash
npm install
```

### Running Storybook

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

```bash
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:

```bash
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:

```bash
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:

```bash
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:

```bash
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:

```bash
# 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