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:

npm install @railstrips/components

Or using Yarn:

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.

// 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

// 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.

<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.

<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.