bard-attachment_field 0.1.0

data/app/controllers/bard/attachment_field/blobs_controller.rb

@@ -0,0 +1,11 @@
+module Bard
+  module AttachmentField
+    class BlobsController < ActionController::Base
+      def show
+        @blob = ActiveStorage::Blob.find_signed!(params[:signed_id])
+        render json: @blob
+      end
+    end
+  end
+end
+

data/bard-attachment_field.gemspec

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+require_relative "lib/bard/attachment_field/version"
+
+Gem::Specification.new do |spec|
+  spec.name = "bard-attachment_field"
+  spec.version = Bard::AttachmentField::VERSION
+  spec.authors = ["Micah Geisel"]
+  spec.email = ["micah@botandrose.com"]
+
+  spec.summary = "Enhanced file upload field for Rails forms with drag-and-drop and previews"
+  spec.description = "An enhanced file upload field for Rails forms, powered by web components. Provides drag-and-drop uploads, image/video previews, and seamless ActiveStorage integration."
+  spec.homepage = "https://github.com/botandrose/bard-attachment_field"
+  spec.required_ruby_version = ">= 3.0.0"
+
+  spec.metadata["homepage_uri"] = spec.homepage
+  spec.metadata["source_code_uri"] = "https://github.com/botandrose/bard-attachment_field"
+
+  # Specify which files should be added to the gem when it is released.
+  # The `git ls-files -z` loads the files in the RubyGem that have been added into git.
+  spec.files = Dir.chdir(__dir__) do
+    `git ls-files -z`.split("\x0").reject do |f|
+      (f == __FILE__) || f.match(%r{\A(?:(?:bin|test|spec|features)/|\.(?:git|travis|circleci)|appveyor)})
+    end
+  end
+  spec.bindir = "exe"
+  spec.executables = spec.files.grep(%r{\Aexe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_dependency "activestorage", ">=7.1.0"
+
+  # Development dependencies
+  spec.add_development_dependency "debug"
+  spec.add_development_dependency "rails"
+  spec.add_development_dependency "sqlite3"
+  spec.add_development_dependency "cucumber"
+  spec.add_development_dependency "cucumber-rails"
+  spec.add_development_dependency "capybara"
+  spec.add_development_dependency "cuprite"
+  spec.add_development_dependency "cuprite-downloads"
+  spec.add_development_dependency "chop"
+  spec.add_development_dependency "rspec"
+  spec.add_development_dependency "capybara-shadowdom"
+  spec.add_development_dependency "capybara-screenshot"
+  spec.add_development_dependency "database_cleaner"
+  spec.add_development_dependency "puma"
+  spec.add_development_dependency "sprockets-rails"
+  spec.add_development_dependency "importmap-rails"
+  spec.add_development_dependency "turbo-rails"
+  spec.add_development_dependency "stimulus-rails"
+  spec.add_development_dependency "rake", "~> 13.0"
+  spec.add_development_dependency "appraisal"
+
+  # For more information and examples about making a new gem, check out our
+  # guide at: https://bundler.io/guides/creating_gem.html
+end

data/config/cucumber.yml

@@ -0,0 +1 @@
+default: --strict <%= "--retry 2 --no-strict-flaky" if ENV["CI"] %> --format pretty --guess --require features/support --publish-quiet --tags 'not @pending'

data/config/routes.rb

@@ -0,0 +1,6 @@
+Rails.application.routes.draw do
+  scope ActiveStorage.routes_prefix do
+    get "/blobs/info/:signed_id" => "bard/attachment_field/blobs#show"
+  end
+end
+

data/gemfiles/rails_7.1.gemfile

@@ -0,0 +1,7 @@
+# This file was generated by Appraisal
+
+source "https://rubygems.org"
+
+gem "rails", "~> 7.1.0"
+
+gemspec path: "../"

data/gemfiles/rails_7.2.gemfile

@@ -0,0 +1,7 @@
+# This file was generated by Appraisal
+
+source "https://rubygems.org"
+
+gem "rails", "~> 7.2.0"
+
+gemspec path: "../"

data/gemfiles/rails_8.0.gemfile

@@ -0,0 +1,7 @@
+# This file was generated by Appraisal
+
+source "https://rubygems.org"
+
+gem "rails", "~> 8.0.0"
+
+gemspec path: "../"

data/gemfiles/rails_8.1.gemfile

@@ -0,0 +1,7 @@
+# This file was generated by Appraisal
+
+source "https://rubygems.org"
+
+gem "rails", "~> 8.1.0"
+
+gemspec path: "../"

data/input-attachment/.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

data/input-attachment/.github/workflows/test.yml

@@ -0,0 +1,21 @@
+name: Test
+
+on: [push, pull_request]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Setup Bun
+      uses: oven-sh/setup-bun@v1
+      with:
+        bun-version: latest
+
+    - name: Install dependencies
+      run: bun install
+
+    - name: Run tests
+      run: NODE_OPTIONS=--experimental-vm-modules bun run test

data/input-attachment/.gitignore

@@ -0,0 +1,27 @@
+www/
+dist/
+loader/
+
+*~
+*.sw[mnpcod]
+*.log
+*.lock
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env
+PLAN

data/input-attachment/.prettierrc.json

@@ -0,0 +1,13 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "quoteProps": "consistent",
+  "printWidth": 180,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

data/input-attachment/CLAUDE.md

@@ -0,0 +1,63 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+**Note: This project uses Bun instead of npm for package management and script execution.**
+
+- **Build**: `bun run build` - Compiles Stencil components with docs generation
+- **Development server**: `bun start` - Watch mode with live reload 
+- **Tests**: `bun run test` - Run unit tests (Jest via Stencil)
+- **E2E tests**: `bun run test:e2e` - Run unit + e2e
+- **Spec tests only**: `bun run spec` - Run unit tests without e2e
+- **Watch tests**: `bun run test.watch` - Run tests in watch mode
+- **Generate component**: `bun run generate` - Create new Stencil component
+
+## Architecture Overview
+
+This is a Stencil-based Web Components library for advanced file upload functionality, specifically designed to work with Rails Active Storage direct uploads.
+
+### Core Components Structure
+
+- **`<input-attachment>`** - Main file upload component with drag/drop support
+  - Acts as form field replacement with validation API compatibility
+  - Manages file state and coordinates with Rails Active Storage
+  - Uses `FormController` for upload orchestration and progress tracking
+
+- **`<attachment-file>`** - Individual file representation component
+  - Handles direct upload via `DirectUploadController`
+  - Manages file preview, validation, and removal
+  - Supports both existing files (via signed IDs) and new uploads
+
+- **`<file-drop>`** - Drag and drop interface component (provided by `@botandrose/file-drop` package)
+- **`<attachment-preview>`** - File preview display component
+- **`<progress-bar>`** - Upload progress indicator (provided by `@botandrose/progress-bar` package)
+
+### Key Integration Points
+
+- **Rails Active Storage**: Uses `@rails/activestorage` for direct uploads
+- **Form Integration**: Components integrate with standard HTML forms via `FormController`
+- **Validation**: Implements HTML5 form validation APIs (`checkValidity`, `setCustomValidity`, etc.)
+
+### Component Communication
+
+- Uses Stencil's event system for component communication
+- Key events: `direct-upload:*`, `attachment-file:remove`, `change`
+- `FormController` coordinates upload queue and progress display
+- Components maintain form field compatibility for seamless integration
+
+### File Upload Flow
+
+1. User selects/drops files into `<input-attachment>`
+2. Files become `<attachment-file>` components with validation
+3. On form submit, `FormController` manages upload queue
+4. `DirectUploadController` handles Rails Active Storage uploads
+5. Progress tracked via `<progress-bar>` components
+6. Completed uploads provide signed IDs for form submission
+
+## Testing Configuration
+
+- Uses Jest with ts-jest for TypeScript support
+- Puppeteer for e2e testing (headless Chrome)
+- ESM modules enabled via `NODE_OPTIONS=--experimental-vm-modules`

data/input-attachment/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/input-attachment/README.md

@@ -0,0 +1,288 @@
+# input-attachment
+
+A web components library providing advanced file upload functionality for Rails Active Storage with drag-and-drop support and real-time progress tracking.
+
+## Features
+
+- 📁 **Multiple File Support** - Upload single or multiple files
+- 🎨 **Drag & Drop** - Intuitive drag-and-drop file selection
+- 📸 **File Previews** - Automatic preview generation for images and videos
+- 📊 **Progress Tracking** - Real-time upload progress with visual feedback
+- ✅ **Validation** - Built-in file type and size validation
+- 🔐 **Rails Active Storage Integration** - Seamless direct uploads to AWS S3 or other storage backends
+
+## Installation
+
+```bash
+npm install @botandrose/input-attachment
+```
+
+or with Bun:
+
+```bash
+bun add @botandrose/input-attachment
+```
+
+## Usage
+
+### Basic Example
+
+```html
+<form>
+  <input-attachment
+    name="files"
+    directupload="/rails/active_storage/direct_uploads"
+    multiple
+  ></input-attachment>
+
+  <button type="submit">Upload</button>
+</form>
+```
+
+### With Validation
+
+```html
+<input-attachment
+  name="photos"
+  directupload="/rails/active_storage/direct_uploads"
+  accepts="image"
+  max="5242880"
+  required
+></input-attachment>
+```
+
+## API Reference
+
+### `<input-attachment>`
+
+The main component providing file upload functionality.
+
+#### Props
+
+| Prop           | Type    | Default   | Description                                                |
+| ------         | ------  | --------- | -------------                                              |
+| `name`         | string  | -         | Form field name for form submission                        |
+| `directupload` | string  | -         | Rails Active Storage direct upload endpoint URL            |
+| `multiple`     | boolean | false     | Allow multiple file selection                              |
+| `required`     | boolean | false     | Require at least one file                                  |
+| `accepts`      | string  | -         | Comma-separated file types (e.g., "image", "video", "pdf") |
+| `max`          | number  | -         | Maximum file size in bytes                                 |
+| `preview`      | boolean | true      | Show file previews                                         |
+| `disabled`     | boolean | false     | Disable file selection (used during form submission)       |
+
+#### Methods
+
+```typescript
+// Get/set array of file objects
+get files(): AttachmentFile[]
+set files(val: AttachmentFile[])
+
+// Get/set array of signed IDs from Active Storage
+get value(): string[]
+set value(val: string[])
+
+// Clear all files
+reset(): void
+
+// Validate the component
+checkValidity(): boolean
+setCustomValidity(msg: string): void
+reportValidity(): boolean
+
+// Get validation error message
+get validationMessage(): string
+```
+
+#### Events
+
+| Event                      | Detail                     | Description                            |
+| -------                    | --------                   | -------------                          |
+| `change`                   | -                          | Fired when file list changes (bubbles) |
+| `direct-upload:initialize` | `{ id, file, controller }` | Upload queue initialized               |
+| `direct-upload:start`      | `{ id }`                   | Upload started                         |
+| `direct-upload:progress`   | `{ id, progress }`         | Upload progress (0-100)                |
+| `direct-upload:error`      | `{ id, error }`            | Upload failed                          |
+| `direct-upload:end`        | `{ id }`                   | Upload completed                       |
+
+### `<attachment-file>`
+
+Individual file representation within the upload component.
+
+#### Props
+
+| Prop       | Type    | Default    | Description                             |
+| ------     | ------  | ---------  | -------------                           |
+| `name`     | string  | -          | Form field name                         |
+| `value`    | string  | ""         | Signed ID from Rails Active Storage     |
+| `filename` | string  | -          | Display filename                        |
+| `src`      | string  | -          | Preview image/video URL                 |
+| `filetype` | string  | -          | File category (image/video/pdf/unknown) |
+| `size`     | number  | -          | File size in bytes                      |
+| `state`    | string  | "complete" | Upload state (pending/complete/error)   |
+| `percent`  | number  | 100        | Upload progress percentage              |
+| `preview`  | boolean | true       | Show preview                            |
+| `accepts`  | string  | -          | Allowed file types                      |
+| `max`      | number  | -          | Maximum file size                       |
+
+#### Methods
+
+```typescript
+// Set file to upload
+set file(file: File)
+
+// Load existing file from Active Storage
+set signedId(val: string)
+
+// Validate the file
+checkValidity(): boolean
+```
+
+## Form Submission Flow
+
+1. User selects/drops files into `<input-attachment>`
+2. Files become `<attachment-file>` components with validation
+3. On form submit, `FormController` intercepts and manages upload queue
+4. Each file uploads to Rails Active Storage via `DirectUploadController`
+5. Signed IDs are collected via `ElementInternals.setFormValue()`
+6. After all uploads complete, form is actually submitted
+7. Server receives signed IDs in form data
+
+## Architecture
+
+### Components
+
+- **`<input-attachment>`** - Main form field replacement with drag-and-drop
+- **`<attachment-file>`** - Individual file representation
+- **`<attachment-preview>`** - File preview display
+- **`<file-drop>`** - Drag and drop interface (from `@botandrose/file-drop`)
+- **`<progress-bar>`** - Upload progress indicator (from `@botandrose/progress-bar`)
+
+## Styling
+
+The component uses Shadow DOM with customizable CSS custom properties:
+
+```css
+input-attachment {
+  --input-attachment-text-color: #000;
+}
+```
+
+Style the file-drop area using the `::part()` pseudo-element:
+
+```css
+input-attachment::part(title) {
+  font-size: 16px;
+  color: #333;
+}
+```
+
+## Rails Integration
+
+### Setup Active Storage Direct Uploads
+
+In your Rails app, ensure Active Storage is configured:
+
+```ruby
+# config/storage.yml
+amazon:
+  service: S3
+  access_key_id: ...
+  secret_access_key: ...
+```
+
+The `directupload` prop should point to:
+```
+/rails/active_storage/direct_uploads
+```
+
+### Accessing Uploaded Files in Rails
+
+```ruby
+class Post < ApplicationRecord
+  has_many_attached :attachments
+end
+
+# In controller
+@post = Post.create(attachments: attachment_signed_ids)
+
+# The signed_ids are automatically resolved to blobs
+```
+
+## Validation
+
+### File Type Validation
+
+```html
+<input-attachment
+  accepts="image,video"
+></input-attachment>
+```
+
+Supported types: `image`, `video`, `pdf`, or specific MIME types
+
+### File Size Validation
+
+```html
+<!-- Max 5MB -->
+<input-attachment
+  max="5242880"
+></input-attachment>
+```
+
+### Custom Validation
+
+```javascript
+const attachment = document.querySelector('input-attachment');
+
+// Check validity
+if (!attachment.checkValidity()) {
+  console.log(attachment.validationMessage);
+}
+
+// Set custom error
+attachment.setCustomValidity('Custom error message');
+```
+
+## Development
+
+### Prerequisites
+
+- Node.js 18+
+- Bun
+
+### Commands
+
+```bash
+# Install dependencies
+bun install
+
+# Start development server
+bun start
+
+# Build for production
+bun run build
+
+# Run tests
+bun run test
+
+# Watch tests
+bun run test.watch
+
+# Run e2e tests only
+bun run test:e2e
+
+# Generate new component
+bun run generate
+```
+
+## Browser Support
+
+- Chrome/Edge 88+
+- Firefox 85+
+- Safari 15.1+
+
+ElementInternals requires modern browsers with form-associated custom elements support.
+
+## License
+
+MIT

data/input-attachment/bin/log

@@ -0,0 +1,2 @@
+#!/bin/bash
+tail -f -n100 /var/log/apache2/error.log

data/input-attachment/bin/server

@@ -0,0 +1 @@
+bun run start

data/input-attachment/bin/setup

@@ -0,0 +1,4 @@
+if [[ ! $(command -v bun) ]] || [[ $(bun --version) != "1.0.14" ]]; then
+  curl -fsSL https://bun.sh/install | bash -s -- bun-v1.0.14
+fi
+bun install

data/input-attachment/bundle.js

@@ -0,0 +1,3 @@
+export * from './dist/components/index.js';
+import { defineCustomElements } from './dist/components/index.js';
+defineCustomElements();

data/input-attachment/jest-setup.js

@@ -0,0 +1,24 @@
+// Jest setup file for DOM polyfills
+
+// Polyfill replaceChildren for test environment
+Element.prototype.replaceChildren = Element.prototype.replaceChildren || function(...nodes) {
+  while (this.lastChild) {
+    this.removeChild(this.lastChild);
+  }
+  this.append(...nodes);
+};
+
+// Mock HTML input validation methods
+if (typeof HTMLInputElement !== 'undefined') {
+  Object.defineProperty(HTMLInputElement.prototype, 'setCustomValidity', {
+    value: function() {},
+    writable: true
+  });
+
+  Object.defineProperty(HTMLInputElement.prototype, 'reportValidity', {
+    value: function() { return true; },
+    writable: true
+  });
+}
+
+// Progress-bar and file-drop components are mocked via moduleNameMapper in stencil.config.ts

data/input-attachment/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@botandrose/input-attachment",
+  "version": "0.0.1",
+  "description": "Next-gen file field",
+  "type": "module",
+  "module": "dist/components/index.js",
+  "types": "./dist/components/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "prepublishOnly": "bun run build",
+    "build": "bunx stencil build --docs && bun run bundle",
+    "bundle": "bunx esbuild dist/components/index.js --bundle --format=esm --outfile=dist/input-attachment.esm.js --footer:js='defineCustomElements();'",
+    "start": "bunx stencil build --docs --watch --serve",
+    "test": "NODE_OPTIONS=--experimental-vm-modules bunx stencil test --spec --e2e --max-workers=1",
+    "test:spec": "NODE_OPTIONS=--experimental-vm-modules bunx stencil test --spec --max-workers=1",
+    "test:e2e": "NODE_OPTIONS=--experimental-vm-modules bunx stencil test --e2e --max-workers=1",
+    "test:watch": "NODE_OPTIONS=--experimental-vm-modules bunx stencil test --spec --watchAll --max-workers=1",
+    "generate": "bunx stencil generate"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "extensionsToTreatAsEsm": [".ts", ".tsx"],
+    "globals": {
+      "ts-jest": {
+        "useESM": true
+      }
+    }
+  },
+  "dependencies": {
+    "@botandrose/file-drop": "^0.1.0",
+    "@botandrose/progress-bar": "^0.1.1",
+    "@rails/activestorage": "^8.1.0",
+    "@stencil/core": "^4.38.2",
+    "rails-request-json": "^0.2.0",
+    "ts-jest": "^29.4.5"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.12",
+    "@types/node": "^24.9.1",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "puppeteer": "^24.26.1"
+  },
+  "peerDependencies": {
+    "@rails/activestorage": ">=7.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types/components.d.ts",
+      "import": "./dist/components/index.js"
+    }
+  },
+  "license": "MIT"
+}