open-index/open-npm huggingface dataset:
npm package: @railstrips/components
Description: A collection of reusable Stimulus.js components for modern web applications.
Latest version: 0.2.0

# Railstrips Components

A collection of reusable Stimulus.js components for modern web applications.

## Description

Railstrips provides a set of pre-built Stimulus controllers that you can easily integrate into your Rails or any Stimulus-powered application. These components are designed to be lightweight, accessible, and customizable.

## Installation

### Via Package Manager

Install the components package using npm:

```sh
npm install @railstrips/components
```

Or using Yarn:

```sh
yarn add @railstrips/components
```

## Usage

### JavaScript Setup

You can import components in two ways.

**Option 1: Import specific components (Recommended)**
This allows for better tree-shaking and smaller bundle sizes if supported by your bundler.

```js
// app/javascript/controllers/index.js
import { Application } from "@hotwired/stimulus"
import Clipboard from "@railstrips/components/clipboard"
import Counter from "@railstrips/components/counter"

const application = Application.start()
application.register("clipboard", Clipboard)
application.register("counter", Counter)
```

**Option 2: Import from main entry**

```js
// app/javascript/controllers/index.js
import { Application } from "@hotwired/stimulus"
import { Clipboard, Counter } from "@railstrips/components"

const application = Application.start()
application.register("clipboard", Clipboard)
application.register("counter", Counter)
```

### HTML Examples

#### Clipboard

Copy text to clipboard with success feedback.

```html
<div
  data-controller="clipboard"
  data-clipboard-success-content-value="<strong>Copied!</strong>"
  class="mt-1 flex rounded-md shadow-sm"
>
  <input
    type="text"
    value="https://www.slog-app.com/register"
    data-clipboard-target="source"
    readonly
    class="py-3 px-2 outline-none flex-1 block rounded-none rounded-l-md sm:text-sm border border-gray-300"
  />

  <button
    type="button"
    data-action="clipboard#copy"
    data-clipboard-target="button"
    class="inline-flex items-center gap-1 px-3 focus:outline-none rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 text-sm"
  >
    Copy to clipboard
  </button>
</div>
```

#### Counter

A simple counter example.

```html
<div data-controller="counter">
  <button type="button" data-action="click->counter#increment">
    Increment
  </button>
</div>
```

## Available Components

- **Clipboard**: Copy text to clipboard with customizable success feedback.
- **Counter**: A basic counter controller.
- *(More components coming soon)*

## Development

To contribute or develop locally:

1. Clone the repository
2. Install dependencies: `npm install`
3. Start development server: `npm run dev`
4. Run tests: `npm test`
5. Build for production: `npm run build`

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

This project is licensed under the MIT License.