activeadmin-tom_select 4.1.0

data/docs/tailwind-4/active_admin.tailwind.css

@@ -0,0 +1,415 @@
+@import "tailwindcss";
+
+@config "../../../config/tailwind-active_admin.config.js";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@utility ring-opacity-5 {
+  --tw-ring-opacity: 0.05;
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+
+  /* Form Inputs */
+  [type='text'],
+  [type='email'],
+  [type='url'],
+  [type='password'],
+  [type='number'],
+  [type='date'],
+  [type='datetime-local'],
+  [type='month'],
+  [type='search'],
+  [type='tel'],
+  [type='time'],
+  [type='week'],
+  textarea,
+  select {
+    @apply appearance-none bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600 border rounded-md px-3 py-2 text-gray-900 dark:text-white w-full;
+    --tw-shadow: 0 0 #0000;
+  }
+
+  /* Form Input Focus States */
+  [type='text']:focus,
+  [type='email']:focus,
+  [type='url']:focus,
+  [type='password']:focus,
+  [type='number']:focus,
+  [type='date']:focus,
+  [type='datetime-local']:focus,
+  [type='month']:focus,
+  [type='search']:focus,
+  [type='tel']:focus,
+  [type='time']:focus,
+  [type='week']:focus,
+  textarea:focus,
+  select:focus {
+    @apply outline-none ring-2 ring-blue-500 dark:ring-blue-500 border-blue-500 dark:border-blue-500;
+  }
+
+  /* Placeholders */
+  input::placeholder,
+  textarea::placeholder {
+    @apply text-gray-500 dark:text-gray-400;
+  }
+
+  /* Checkbox and Radio */
+  [type='checkbox'],
+  [type='radio'] {
+    @apply appearance-none p-0 inline-block align-middle bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 border rounded-none h-4 w-4 text-blue-600 dark:text-blue-500;
+    print-color-adjust: exact;
+  }
+
+  [type='radio'] {
+    @apply rounded-full;
+  }
+
+  /* Checkbox and Radio Focus States */
+  [type='checkbox']:focus,
+  [type='radio']:focus {
+    @apply outline-none ring-2 ring-blue-500 dark:ring-blue-500;
+  }
+
+  /* Checkbox and Radio Checked States */
+  [type='checkbox']:checked,
+  [type='radio']:checked {
+    @apply border-transparent bg-current bg-no-repeat bg-center;
+    background-size: 0.65rem 0.65rem;
+  }
+
+  [type='checkbox']:checked {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3E%3Cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3E%3C/svg%3E");
+  }
+
+  [type='radio']:checked {
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");
+    background-size: 1rem 1rem;
+  }
+
+  /* File Input */
+  [type='file'] {
+    @apply bg-transparent border-0 p-0;
+  }
+
+  [type='file']:focus {
+    @apply outline-none;
+  }
+
+  /* File Selector Button */
+  input[type=file]::file-selector-button {
+    @apply text-white bg-gray-800 dark:bg-gray-600 border-0 font-medium text-sm cursor-pointer px-8 py-2.5 -ml-4 mr-4;
+  }
+
+  input[type=file]::file-selector-button:hover {
+    @apply bg-gray-700 dark:bg-gray-500;
+  }
+}
+
+@layer components {
+  /* Action Item Button */
+  .action-item-button {
+    @apply py-2 px-3 text-sm font-medium no-underline text-gray-900 focus:outline-none bg-white rounded-md border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700;
+  }
+
+  /* Index Data Table Toolbar */
+  .index-data-table-toolbar {
+    @apply flex flex-col lg:flex-row gap-4 mb-4;
+  }
+
+  /* Scopes */
+  .scopes {
+    @apply flex flex-wrap gap-1.5;
+  }
+
+  /* Index Button Group */
+  .index-button-group {
+    @apply inline-flex flex-wrap items-stretch rounded-md;
+  }
+
+  .index-button-group > :where(*:not(:first-child)) {
+    @apply -ms-px my-0;
+  }
+
+  /* Index Button */
+  .index-button {
+    @apply inline-flex items-center justify-center px-3 py-2 text-sm font-medium no-underline text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 first:rounded-s-md last:rounded-e-md dark:bg-gray-900 dark:border-gray-700 dark:text-gray-100 dark:hover:text-gray-200 dark:hover:bg-gray-800 dark:focus:ring-blue-500 dark:focus:text-white;
+  }
+
+  .index-button-selected {
+    @apply bg-gray-100 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-800;
+  }
+
+  /* Scopes Count */
+  .scopes-count {
+    @apply inline-flex items-center justify-center rounded-full bg-indigo-200/80 text-indigo-800 dark:bg-indigo-800 dark:text-indigo-200 px-1.5 py-1 text-xs font-normal ms-2 leading-none;
+  }
+
+  /* Paginated Collection */
+  .paginated-collection {
+    @apply border border-gray-200 dark:border-gray-800 rounded-md shadow-sm overflow-hidden;
+  }
+
+  .paginated-collection-contents {
+    @apply overflow-x-auto;
+  }
+
+  .paginated-collection-pagination {
+    @apply p-2 lg:p-3 flex flex-col-reverse lg:flex-row gap-4 items-center justify-between;
+  }
+
+  .paginated-collection-footer {
+    @apply p-3 flex gap-2 items-center justify-between text-sm border-t border-gray-200 dark:border-gray-800;
+  }
+
+  /* Data Table */
+  .data-table {
+    @apply w-full text-sm text-gray-800 dark:text-gray-300;
+  }
+
+  .data-table :where(thead > tr > th) {
+    @apply px-3 py-3.5 whitespace-nowrap font-semibold text-start text-xs uppercase border-b text-gray-700 bg-gray-50 dark:bg-gray-950/50 dark:border-gray-800 dark:text-white;
+  }
+
+  .data-table :where(tbody > tr) {
+    @apply border-b dark:border-gray-800;
+  }
+
+  .data-table :where(td) {
+    @apply px-3 py-4;
+  }
+
+  /* Data Table Resource Actions */
+  .data-table-resource-actions {
+    @apply flex gap-2 items-center;
+  }
+
+  .data-table-resource-actions > a {
+    @apply text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white;
+  }
+
+  /* Data Sortable */
+  .data-table :where(thead > tr > th[data-sortable]) {
+    @apply cursor-pointer;
+  }
+
+  .data-table-sorted-icon {
+    @apply invisible w-2 h-3;
+  }
+
+  .data-table :where(thead > tr > th[data-sort-direction]) .data-table-sorted-icon {
+    @apply visible;
+  }
+
+  .data-table :where(thead > tr > th[data-sort-direction="asc"]) .data-table-sorted-icon {
+    @apply rotate-180;
+  }
+
+  /* Filters Form */
+  .filters-form {
+    @apply text-sm mb-6;
+  }
+
+  .filters-form-title {
+    @apply text-gray-700 dark:text-gray-200 font-bold text-lg mb-4;
+  }
+
+  .filters-form :where(.label) {
+    @apply block mb-1.5 text-sm;
+  }
+
+  .filters-form-input-group {
+    @apply grid grid-cols-1 sm:grid-cols-2 gap-4;
+  }
+
+  .filters-form-input-group :where(.input) {
+    @apply w-full;
+  }
+
+  .filters-form-input-group :where(.label) {
+    @apply block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300;
+  }
+
+  .filters-form-input-group :where(.hint) {
+    @apply mt-1 text-sm text-gray-500 dark:text-gray-400;
+  }
+
+  .filters-form-field {
+    @apply mb-4;
+  }
+
+  .filters-form-buttons {
+    @apply flex gap-2 items-center;
+  }
+
+  .filters-form-submit {
+    @apply min-w-[6rem] font-bold text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-md px-3 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 cursor-pointer;
+  }
+
+  .filters-form-clear {
+    @apply rounded-md px-3 py-2 font-semibold text-gray-700 hover:bg-gray-100 no-underline dark:text-gray-400 dark:hover:bg-inherit dark:hover:text-gray-100 dark:focus:ring-blue-800;
+  }
+
+  /* Panel */
+  .panel {
+    @apply mb-6 border border-gray-200 rounded-md shadow-sm dark:border-gray-800;
+  }
+
+  .panel-title {
+    @apply font-bold bg-gray-100 dark:bg-gray-900 rounded-t-md p-3;
+  }
+
+  .panel-body {
+    @apply py-5 px-3;
+  }
+
+  /* Attributes Table */
+  .attributes-table {
+    @apply overflow-hidden mb-6 border border-gray-200 rounded-md shadow-sm dark:border-gray-800;
+  }
+
+  .attributes-table :where(tbody > tr > th) {
+    @apply w-32 sm:w-40 text-start text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-800/60 dark:text-gray-300;
+  }
+
+  .attributes-table :where(tbody > tr > th, tbody > tr > td) {
+    @apply p-3;
+  }
+
+  /* Status Tag */
+  .status-tag {
+    @apply bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-400 inline-flex items-center rounded-full text-sm font-medium px-2.5 py-0.5 whitespace-nowrap;
+  }
+
+  .status-tag:where([data-status=yes]) {
+    @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300;
+  }
+
+  /* Tabs */
+  .tabs-nav {
+    @apply flex flex-wrap mb-2 text-sm font-medium text-center border-b border-gray-200 dark:border-gray-700;
+  }
+
+  .tabs-nav > :where(a) {
+    @apply block p-4 border-b-2 border-transparent rounded-t-md hover:text-gray-600 dark:hover:text-gray-300 no-underline;
+  }
+
+  .tabs-content {
+    @apply p-4 mb-6;
+  }
+
+  /* Formtastic */
+  .formtastic {
+    @apply text-sm;
+  }
+
+  .formtastic :where(.fieldset-title, .has-many-fields-title) {
+    @apply block w-full mb-3 border-b font-bold text-lg;
+  }
+
+  .formtastic :where(.label) {
+    @apply block mb-1.5 text-gray-700 dark:text-gray-300;
+  }
+
+  .formtastic :where(.label abbr) {
+    @apply ms-1 no-underline;
+  }
+
+  .formtastic :where(.input) {
+    @apply py-3;
+  }
+
+  .formtastic :where(.choice) {
+    @apply mb-1;
+  }
+
+  .formtastic :where(.boolean label, .choice label) {
+    @apply flex gap-2 items-center;
+  }
+
+  .formtastic :where(.fragments-group) {
+    @apply inline-flex flex-wrap gap-1;
+  }
+
+  .formtastic :where(.fragment label) {
+    @apply sr-only;
+  }
+
+  .formtastic :where(.inline-hints) {
+    @apply text-gray-500 mt-2;
+  }
+
+  .formtastic :where(.errors) {
+    @apply p-4 mb-6 rounded-md space-y-2 bg-red-50 text-red-800 dark:bg-red-800 dark:text-red-300;
+  }
+
+  .formtastic :where(.errors > li) {
+    @apply list-disc ms-4;
+  }
+
+  .formtastic :where(.inline-errors) {
+    @apply font-bold mt-2 text-red-600 dark:text-red-300;
+  }
+
+  .formtastic :where(.error [type=email], .error [type=number], .error [type=password], .error [type=tel], .error [type=text], .error [type=url], .error textarea) {
+    @apply border-red-500;
+  }
+
+  .formtastic :where(.buttons, .actions) {
+    @apply mt-3;
+  }
+
+  .formtastic :where(.actions > ol) {
+    @apply flex items-center gap-6;
+  }
+
+  .formtastic :where([type=submit], [type=button], button) {
+    @apply font-bold text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 cursor-pointer;
+  }
+
+  .formtastic :where(.actions .cancel-link) {
+    @apply font-semibold leading-6 text-gray-900 dark:text-white no-underline;
+  }
+
+  .formtastic :where(.has-many-add) {
+    @apply inline-block py-3;
+  }
+
+  .formtastic :where(.has-many-container) {
+    @apply space-y-8;
+  }
+
+  .formtastic :where(.has-many-fields) {
+    @apply ps-3 border-s-4 border-s-gray-200 dark:border-s-gray-700;
+  }
+
+  /* Select Elements */
+  select {
+    @apply bg-no-repeat bg-[right_0.75rem_center] bg-[length:0.75em_0.75em] pr-8;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
+    print-color-adjust: exact;
+  }
+
+  .dark select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3E%3Cpath stroke='%23D1D5DB' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
+  }
+
+  /* Fix for Formtastic fragments (date/time selects) */
+  .fragments-group,
+  .fragments {
+    @apply flex flex-row gap-2 items-center;
+  }
+  .fragment {
+    @apply flex-shrink-0;
+  }
+  .fragments-group select,
+  .fragments select {
+    @apply w-auto min-w-[5rem];
+  }
+}

data/docs/tailwind-4/tailwind-active_admin.config.js

@@ -0,0 +1,18 @@
+const execSync = require("node:child_process").execSync;
+const activeAdminPath = execSync("bundle show activeadmin", {
+  encoding: "utf-8",
+}).trim();
+
+module.exports = {
+  content: [
+    `${activeAdminPath}/vendor/javascript/flowbite.js`,
+    `${activeAdminPath}/plugin.js`,
+    `${activeAdminPath}/app/views/**/*.{arb,erb,html,rb}`,
+    "./app/admin/**/*.{arb,erb,html,rb}",
+    "./app/views/active_admin/**/*.{arb,erb,html,rb}",
+    "./app/views/admin/**/*.{arb,erb,html,rb}",
+    "./app/views/layouts/active_admin*.{erb,html}",
+    "./app/assets/controllers/active_admin/**/*.js",
+  ],
+  darkMode: "selector"
+};

data/docs/test-app-change.md

@@ -0,0 +1,154 @@
+# Test App Migration from Combustion to Rails 8 (2025-09-11)
+
+## Summary
+Migrated the test environment from Combustion-based minimal app to a full Rails 8 application with Propshaft, Tom Select, and Tailwind CSS v3.
+
+## Key Changes
+
+### 1. Removed Combustion
+- Backed up old `spec/internal` to `spec/internal.backup`
+- Created new full Rails 8 app in `spec/internal`
+- Removed all Combustion references from specs
+- Fixed RSpec configuration to load Rails app directly
+
+### 2. Rails 8 Test App Setup
+```ruby
+# Created with:
+rails new spec/internal \
+  --skip-action-cable \
+  --skip-action-mailbox \
+  --skip-action-text \
+  --skip-active-storage \
+  --skip-bootsnap \
+  --skip-brakeman \
+  --skip-ci \
+  --skip-docker \
+  --skip-git \
+  --skip-hotwire \
+  --skip-jbuilder \
+  --skip-kamal \
+  --skip-rubocop \
+  --skip-solid \
+  --skip-system-test \
+  --skip-test \
+  --skip-thruster \
+  --css=tailwind \
+  --javascript=esbuild
+```
+
+### 3. Asset Pipeline (Propshaft)
+- Removed sassc-rails (using Tailwind only)
+- Configured Propshaft for asset serving
+- Built CSS outputs to `app/assets/builds/active_admin.css`
+- Tom Select styles integrated via Tailwind build process
+
+### 4. Tom Select Integration
+- Migrated from Select2 to Tom Select
+- Full Tailwind CSS styling for Tom Select components
+- Styles located in `/src/tom-select-tailwind.css`
+- Credits: Based on https://github.com/orchidjs/tom-select/discussions/693 by @LeZellus
+
+### 5. Database Setup
+```ruby
+# spec/internal/db/schema.rb includes:
+- users (with name field)
+- admin_users (for Devise/ActiveAdmin)
+- categories, posts, colors, rgb_colors
+- tags, taggings (many-to-many)
+- option_types, internal_tag_names (for tests)
+```
+
+### 6. Build Process
+```bash
+# CSS Build (Tailwind with Tom Select)
+cd spec/internal
+bundle exec rake active_admin:build
+
+# JavaScript Build
+npm run build
+
+# Watch mode
+bundle exec rake active_admin:watch  # CSS
+npm run watch:js                     # JavaScript
+```
+
+### 7. Running the Test App
+```bash
+cd spec/internal
+bundle exec rackup
+# Available at http://localhost:9292
+# Admin login: admin@example.com / password
+```
+
+### 8. Fixed Issues
+- ✅ Removed duplicate config.ru from root
+- ✅ Fixed empty schema.rb
+- ✅ Added missing Devise gem
+- ✅ Created missing models (AdminUser, Color, Tag, Tagging)
+- ✅ Fixed seeds.rb to match schema
+- ✅ Converted from Sprockets to Propshaft
+- ✅ Downgraded Tailwind CSS from v4 to v3 for compatibility
+- ✅ Fixed all RSpec/Capybara loading issues
+
+### 9. File Structure
+```
+spec/internal/
+├── app/
+│   ├── admin/           # ActiveAdmin resources
+│   ├── assets/
+│   │   ├── builds/       # Built CSS/JS (Propshaft serves these)
+│   │   └── stylesheets/
+│   │       └── active_admin.tailwind.css
+│   └── models/          # Test models
+├── config/
+│   ├── initializers/
+│   │   ├── active_admin.rb
+│   │   └── devise.rb
+│   └── routes.rb
+├── db/
+│   ├── schema.rb        # Complete test schema
+│   └── seeds.rb         # Test data
+├── lib/
+│   └── tasks/
+│       └── active_admin.rake  # Build tasks
+├── package.json         # Node dependencies
+├── tailwind.config.js   # Tailwind configuration
+├── Gemfile             # Ruby dependencies (Propshaft, no Sprockets)
+└── config.ru           # Rack configuration
+```
+
+### 10. Dependencies
+- Rails 8.0.2+
+- ActiveAdmin 4.0.0.beta16
+- Propshaft (not Sprockets)
+- Tailwind CSS v3 (not v4)
+- Tom Select 2.4.3
+- esbuild for JavaScript
+- cssbundling-rails for CSS
+
+### 11. Testing
+```bash
+# Run all specs
+bundle exec rspec
+
+# Run specific spec
+bundle exec rspec spec/features/form_input_spec.rb
+
+# Tests now work with:
+- No Combustion dependency
+- Proper Rails 8 app loading
+- ActiveAdmin integration
+- Tom Select functionality
+```
+
+### 12. Documentation Updates
+- Updated CLAUDE.md with new test app instructions
+- Updated README.md with development/testing section
+- Added `bundle exec rackup` instructions for manual testing
+
+## Important Notes
+- Always use Tailwind v3 (v4 has breaking changes)
+- Tom Select base CSS is concatenated during build
+- All imports use proper @import directives
+- Test app is a full Rails app, not a minimal Combustion app
+- Propshaft serves assets from app/assets/builds/

data/docs/test-environment-fixes.md

@@ -0,0 +1,58 @@
+# Test Environment Fixes for Tom Select Migration
+
+## Issue
+After migrating from Select2 to Tom Select, tests were failing because Propshaft wasn't being loaded in the test environment, causing assets not to be served properly.
+
+## Root Cause
+The Rails 8 test application wasn't loading Propshaft's railtie, which meant:
+- No asset paths were configured
+- Assets were being requested at wrong URLs (`/javascripts/` instead of `/assets/`)
+- Tom Select JavaScript wasn't being loaded
+- Tom Select wasn't initializing on searchable select inputs
+
+## Solution
+
+### 1. Load Propshaft Railtie
+Added to `spec/internal/config/application.rb`:
+```ruby
+# Require Propshaft railtie for asset pipeline
+require 'propshaft/railtie'
+```
+
+This ensures Propshaft is properly initialized with:
+- Asset paths configured
+- Dynamic resolver for test environment
+- Proper asset serving with digest URLs
+
+### 2. Key Configuration Details
+After the fix, Propshaft in test environment has:
+- **Asset paths**: 7 configured paths including app/assets/builds
+- **Resolver**: `Propshaft::Resolver::Dynamic` (no precompilation needed)
+- **Asset serving**: Enabled (`config.assets.server = true`)
+- **URLs**: Proper digest URLs like `/assets/active_admin-f967af7b.js`
+
+### 3. Test Adjustments
+Minor adjustments to tests for Tom Select compatibility:
+- Use `visible: :all` for finding dropdown options (Tom Select may create hidden options)
+- More flexible selectors for Tom Select wrappers
+- Removed hardcoded waits in favor of proper Capybara waiting
+
+## Verification
+Created comprehensive diagnostic test (`spec/features/asset_pipeline_diagnostic_spec.rb`) that verifies:
+- Rails and Propshaft configuration
+- Asset paths and files
+- Built asset contents (checks for Tom Select code)
+- Asset serving in browser
+- JavaScript loading and initialization
+
+## Results
+- ✅ All production_build_spec tests passing
+- ✅ Tom Select properly initializing
+- ✅ Assets served with correct digest URLs
+- ⚠️ Some end_to_end tests still need adjustment for Tom Select behavior differences
+
+## Lessons Learned
+1. Always verify that required railties are loaded in test environments
+2. Use diagnostic tests to troubleshoot asset pipeline issues
+3. Tom Select has slightly different DOM structure and behavior than Select2
+4. Propshaft requires explicit railtie loading unlike Sprockets which was auto-loaded