js_admin 0.0.1 → 0.1.0

data/app/views/js_admin/resources/index.html.erb

@@ -1,54 +1,5 @@
 <% content_for :title, @resource.label %>
 
-<div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-  <div>
-    <div class="mb-2 text-sm text-slate-500"><%= link_to "Models", root_path, class: "hover:text-slate-950" %> / <%= @resource.label %></div>
-    <h1 class="text-2xl font-semibold text-slate-950"><%= @resource.label %></h1>
-    <p class="mt-1 text-sm text-slate-600"><%= number_with_delimiter(@total_count) %> records</p>
-  </div>
-
-  <%= link_to "New #{@resource.singular_label}", new_resource_path(@resource.model_id), class: "inline-flex items-center justify-center rounded-md bg-sky-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-sky-700" %>
-</div>
-
-<div class="overflow-x-auto rounded-lg border border-slate-200 bg-white shadow-sm">
-  <table class="min-w-full divide-y divide-slate-200">
-    <thead class="bg-slate-50">
-      <tr>
-        <% @resource.list_fields.each do |field| %>
-          <th scope="col" class="whitespace-nowrap px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500"><%= field.human_name %></th>
-        <% end %>
-        <th scope="col" class="w-24 px-4 py-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-500">Actions</th>
-      </tr>
-    </thead>
-    <tbody class="divide-y divide-slate-200 bg-white">
-      <% @records.each do |record| %>
-        <tr class="hover:bg-slate-50">
-          <% @resource.list_fields.each do |field| %>
-            <td class="whitespace-nowrap px-4 py-3 text-sm"><%= js_admin_table_value(field, record) %></td>
-          <% end %>
-          <td class="whitespace-nowrap px-4 py-3 text-right text-sm">
-            <%= link_to "Open", resource_path(@resource.model_id, record), class: "font-medium text-sky-700 hover:text-sky-900" %>
-          </td>
-        </tr>
-      <% end %>
-
-      <% if @records.empty? %>
-        <tr>
-          <td colspan="<%= @resource.list_fields.size + 1 %>" class="px-4 py-10 text-center text-sm text-slate-500">No records</td>
-        </tr>
-      <% end %>
-    </tbody>
-  </table>
-</div>
-
-<div class="mt-4 flex items-center justify-between">
-  <div class="text-sm text-slate-500">Page <%= @page %></div>
-  <div class="flex gap-2">
-    <% if @resource.previous_page?(@page) %>
-      <%= link_to "Previous", resources_path(@resource.model_id, page: @page - 1), class: "rounded-md border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50" %>
-    <% end %>
-    <% if @resource.next_page?(@page) %>
-      <%= link_to "Next", resources_path(@resource.model_id, page: @page + 1), class: "rounded-md border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50" %>
-    <% end %>
-  </div>
-</div>
+<%= render layout: "layouts/js_admin/content_frame" do %>
+  <%= render "index_content" %>
+<% end %>

data/app/views/js_admin/resources/new.html.erb

@@ -1,12 +1,5 @@
 <% content_for :title, "New #{@resource.singular_label}" %>
 
-<div class="mb-6">
-  <div class="mb-2 text-sm text-slate-500">
-    <%= link_to "Models", root_path, class: "hover:text-slate-950" %> /
-    <%= link_to @resource.label, resources_path(@resource.model_id), class: "hover:text-slate-950" %> /
-    New
-  </div>
-  <h1 class="text-2xl font-semibold text-slate-950">New <%= @resource.singular_label %></h1>
-</div>
-
-<%= render "form", record: @record, resource: @resource, url: resources_path(@resource.model_id) %>
+<%= render layout: "layouts/js_admin/content_frame" do %>
+  <%= render "new_content" %>
+<% end %>

data/app/views/js_admin/resources/show.html.erb

@@ -1,28 +1,5 @@
 <% content_for :title, @resource.display_name(@record) %>
 
-<div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-  <div>
-    <div class="mb-2 text-sm text-slate-500">
-      <%= link_to "Models", root_path, class: "hover:text-slate-950" %> /
-      <%= link_to @resource.label, resources_path(@resource.model_id), class: "hover:text-slate-950" %> /
-      <%= @resource.display_name(@record) %>
-    </div>
-    <h1 class="text-2xl font-semibold text-slate-950"><%= @resource.display_name(@record) %></h1>
-  </div>
-
-  <div class="flex gap-2">
-    <%= link_to "Edit", edit_resource_path(@resource.model_id, @record), class: "inline-flex items-center justify-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50" %>
-    <%= button_to "Delete", resource_path(@resource.model_id, @record), method: :delete, form: { data: { turbo_confirm: "Delete this record?" } }, class: "inline-flex items-center justify-center rounded-md bg-rose-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-rose-700" %>
-  </div>
-</div>
-
-<div class="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
-  <dl class="divide-y divide-slate-200">
-    <% @resource.fields.each do |field| %>
-      <div class="grid gap-2 px-4 py-4 sm:grid-cols-3">
-        <dt class="text-sm font-medium text-slate-600"><%= field.human_name %></dt>
-        <dd class="text-sm text-slate-950 sm:col-span-2"><%= js_admin_table_value(field, @record) %></dd>
-      </div>
-    <% end %>
-  </dl>
-</div>
+<%= render layout: "layouts/js_admin/content_frame" do %>
+  <%= render "show_content" %>
+<% end %>

data/app/views/layouts/js_admin/_content_frame.html.erb

@@ -0,0 +1,7 @@
+<%= turbo_frame_tag js_admin_content_frame_id, data: js_admin_content_frame_data do %>
+  <%= render "layouts/js_admin/flash", notice: notice, alert: alert %>
+
+  <div id="<%= js_admin_content_body_id %>">
+    <%= yield %>
+  </div>
+<% end %>

data/app/views/layouts/js_admin/_flash.html.erb

@@ -0,0 +1,3 @@
+<div id="<%= js_admin_flash_id %>" class="pointer-events-none fixed right-0 top-4 z-50 flex w-full justify-end px-4 sm:right-4 sm:w-auto sm:px-0">
+  <%= render "layouts/js_admin/flash_messages", notice: notice, alert: alert %>
+</div>

data/app/views/layouts/js_admin/_flash_messages.html.erb

@@ -0,0 +1,9 @@
+<div class="w-full max-w-sm space-y-3">
+  <% if notice.present? %>
+    <div data-controller="js-admin-flash" data-js-admin-flash-timeout-value="4000" class="<%= js_admin_flash_classes(:notice) %>" role="status"><%= notice %></div>
+  <% end %>
+
+  <% if alert.present? %>
+    <div data-controller="js-admin-flash" data-js-admin-flash-timeout-value="4000" class="<%= js_admin_flash_classes(:alert) %>" role="alert"><%= alert %></div>
+  <% end %>
+</div>

data/app/views/layouts/js_admin/_sidebar.html.erb

@@ -0,0 +1,36 @@
+<aside class="flex shrink-0 flex-col border-b border-slate-200 bg-white/80 dark:border-slate-800 dark:bg-slate-900/70 lg:sticky lg:top-16 lg:h-[calc(100vh-4rem)] lg:w-64 lg:self-start lg:overflow-hidden lg:border-b-0 lg:border-r">
+  <nav class="min-h-0 flex-1 space-y-6 overflow-y-auto px-5 py-6 sm:px-8 lg:px-5">
+    <section>
+      <div class="space-y-1">
+        <% js_admin_sidebar_top_level_resources.each do |resource| %>
+          <%= link_to js_admin_sidebar_resource_label(resource), resources_path(resource.model_id), class: js_admin_sidebar_link_classes(resource), data: js_admin_content_link_data.merge(js_admin_sidebar_link: resource.model_id) %>
+        <% end %>
+
+        <% js_admin_sidebar_namespace_groups.each do |namespace, resources| %>
+          <details class="group" <%= "open" if js_admin_sidebar_namespace_open?(resources) %>>
+            <summary class="flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100">
+              <span><%= js_admin_sidebar_namespace_label(namespace) %></span>
+              <span class="transition-transform group-open:rotate-90">&gt;</span>
+            </summary>
+
+            <div class="mt-1 space-y-1 pl-3">
+              <% resources.each do |resource| %>
+                <%= link_to js_admin_sidebar_resource_label(resource), resources_path(resource.model_id), class: js_admin_sidebar_link_classes(resource), data: js_admin_content_link_data.merge(js_admin_sidebar_link: resource.model_id) %>
+              <% end %>
+            </div>
+          </details>
+        <% end %>
+      </div>
+    </section>
+  </nav>
+
+  <div class="shrink-0 border-t border-slate-200 px-5 py-4 dark:border-slate-800 sm:px-8 lg:px-5">
+    <button type="button" data-js-admin-theme-target="toggle" data-action="js-admin-theme#toggle" class="inline-flex h-9 w-full items-center justify-between rounded-md border border-slate-300 bg-white px-3 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800" aria-label="Toggle dark mode" aria-pressed="false">
+      <span class="flex items-center gap-2">
+        <span class="h-2.5 w-2.5 rounded-full bg-slate-500 dark:bg-amber-300"></span>
+        <span>Theme</span>
+      </span>
+      <span class="text-xs text-slate-400 dark:text-slate-500">Toggle</span>
+    </button>
+  </div>
+</aside>

data/app/views/layouts/js_admin/application.html.erb

@@ -1,8 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html class="<%= js_admin_html_classes %>">
 <head>
   <title><%= content_for(:title) || "JSAdmin" %></title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="color-scheme" content="light dark">
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
 
@@ -10,28 +11,29 @@
 
   <%= js_admin_stylesheet_link_tag "tailwind" %>
   <%= stylesheet_link_tag "js_admin/application", media: "all", "data-turbo-track": "reload" %>
-  <%= js_admin_hotwire_javascript_tags %>
+  <%= js_admin_javascript_tags %>
 </head>
-<body class="min-h-screen bg-slate-50 text-slate-950">
+<body class="min-h-screen bg-slate-50 text-slate-950 antialiased dark:bg-slate-950 dark:text-slate-100" data-controller="js-admin-theme">
   <div class="min-h-screen">
-    <header class="border-b border-slate-200 bg-white">
-      <div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
-        <%= link_to "JSAdmin", root_path, class: "text-base font-semibold text-slate-950" %>
-        <%= link_to "Models", root_path, class: "rounded-md px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-950" %>
+    <header class="fixed inset-x-0 top-0 z-40 border-b border-slate-200 bg-white/95 dark:border-slate-800 dark:bg-slate-900/95">
+      <div class="flex min-h-16 w-full items-center">
+        <div class="flex min-h-16 shrink-0 items-center px-5 sm:px-8 lg:w-64 lg:border-r lg:border-slate-200 lg:px-5 lg:dark:border-slate-800">
+          <%= link_to "JSAdmin", root_path, class: "text-base font-semibold text-slate-950 dark:text-slate-100", data: js_admin_content_link_data %>
+        </div>
+
+        <div class="min-h-16 min-w-0 flex-1"></div>
       </div>
     </header>
 
-    <main class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
-      <% if notice.present? %>
-        <div class="mb-4 rounded-md border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800"><%= notice %></div>
-      <% end %>
-
-      <% if alert.present? %>
-        <div class="mb-4 rounded-md border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800"><%= alert %></div>
-      <% end %>
+    <div class="flex w-full flex-col pt-16 lg:flex-row">
+      <%= render "layouts/js_admin/sidebar" %>
 
-      <%= yield %>
-    </main>
+      <main class="min-w-0 flex-1 px-5 py-8 sm:px-8 sm:py-10 lg:px-10">
+        <div class="mx-auto max-w-screen-2xl">
+          <%= yield %>
+        </div>
+      </main>
+    </div>
   </div>
 </body>
 </html>

data/config/routes.rb

@@ -1,6 +1,7 @@
 JSAdmin::Engine.routes.draw do
-  root to: "models#index"
+  root to: "home#index"
 
+  get "/models", to: "models#index", as: :models
   get "/:model_id", to: "resources#index", as: :resources
   get "/:model_id/new", to: "resources#new", as: :new_resource
   post "/:model_id", to: "resources#create"

data/lib/generators/js_admin/install/install_generator.rb

@@ -3,22 +3,80 @@ require "rails/generators"
 module JSAdmin
   module Generators
     class InstallGenerator < Rails::Generators::Base
-      class_option :path, type: :string, default: "/js_admin",
-        desc: "Mount path for JSAdmin"
+      IMPORTMAP_PINS = {
+        "@hotwired/turbo-rails" => 'pin "@hotwired/turbo-rails", to: "turbo.min.js"',
+        "@hotwired/stimulus" => 'pin "@hotwired/stimulus", to: "stimulus.min.js"',
+        "js_admin" => 'pin "js_admin", to: "js_admin/application.js", preload: true',
+        "js_admin/controllers/theme_controller" => 'pin "js_admin/controllers/theme_controller", to: "js_admin/controllers/theme_controller.js", preload: true',
+        "js_admin/controllers/flash_controller" => 'pin "js_admin/controllers/flash_controller", to: "js_admin/controllers/flash_controller.js", preload: true'
+      }.freeze
+
+      namespace "js_admin:install"
+
+      class_option :path,
+                   type: :string,
+                   default: "/admin",
+                   desc: "Mount path for JSAdmin"
 
       def mount_engine
         route %(mount JSAdmin::Engine => "#{options[:path]}")
       end
 
+      def create_initializer
+        create_file "config/initializers/js_admin.rb", <<~RUBY
+          JSAdmin.configure do |config|
+            # Limit visible models. When empty, JSAdmin exposes every concrete Active Record model.
+            # config.include_models User, Post
+            # config.exclude_models AuditLog
+
+            # UI pagination and association select limits.
+            # config.records_per_page = 10
+            # config.association_limit = 100
+
+            # Methods tried in order when displaying records in labels and associations.
+            # config.display_name_methods = %i[name title email username id]
+
+            # Basic Auth is disabled unless both username and password are present.
+            # config.basic_auth_username = ENV["JS_ADMIN_BASIC_AUTH_USERNAME"]
+            # config.basic_auth_password = ENV["JS_ADMIN_BASIC_AUTH_PASSWORD"]
+            # config.basic_auth_realm = "JSAdmin"
+          end
+        RUBY
+      end
+
+      def pin_importmap_modules
+        importmap_path = application_path("config/importmap.rb")
+
+        unless File.exist?(importmap_path)
+          say_status :warning, "config/importmap.rb was not found. Run bin/rails importmap:install, then rerun js_admin:install.", :yellow
+          return
+        end
+
+        importmap = File.read(importmap_path)
+        missing_pins = IMPORTMAP_PINS.filter_map do |name, line|
+          line unless importmap.match?(/^\s*pin\s+["']#{Regexp.escape(name)}["']/)
+        end
+
+        return if missing_pins.empty?
+
+        append_to_file importmap_path, "\n#{missing_pins.join("\n")}\n"
+      end
+
       def import_tailwind_engine_styles
-        tailwind_entrypoint = Rails.root.join("app/assets/tailwind/application.css")
-        return unless tailwind_entrypoint.exist?
+        tailwind_entrypoint = application_path("app/assets/tailwind/application.css")
+        return unless File.exist?(tailwind_entrypoint)
 
         import_line = '@import "../builds/tailwind/js_admin";'
-        return if tailwind_entrypoint.read.include?(import_line)
+        return if File.read(tailwind_entrypoint).include?(import_line)
 
         append_to_file tailwind_entrypoint, "\n#{import_line}\n"
       end
+
+      private
+
+      def application_path(relative_path)
+        File.join(destination_root, relative_path)
+      end
     end
   end
 end

data/lib/js_admin/configuration.rb

@@ -1,14 +1,23 @@
 module JSAdmin
   class Configuration
-    attr_accessor :included_models, :excluded_models, :records_per_page,
-      :association_limit, :display_name_methods
+    attr_accessor :included_models,
+                  :excluded_models,
+                  :records_per_page,
+                  :association_limit,
+                  :display_name_methods,
+                  :basic_auth_username,
+                  :basic_auth_password,
+                  :basic_auth_realm
 
     def initialize
       @included_models = []
       @excluded_models = []
-      @records_per_page = 25
+      @records_per_page = 10
       @association_limit = 100
       @display_name_methods = %i[name title email username id]
+      @basic_auth_username = nil
+      @basic_auth_password = nil
+      @basic_auth_realm = "JSAdmin"
     end
 
     def include_models(*models)
@@ -19,6 +28,10 @@ module JSAdmin
       excluded_models.concat(normalize_model_names(models))
     end
 
+    def basic_auth_enabled?
+      basic_auth_username.to_s != "" && basic_auth_password.to_s != ""
+    end
+
     private
 
     def normalize_model_names(models)

data/lib/js_admin/field.rb

@@ -67,8 +67,8 @@ module JSAdmin
 
     def belongs_to_association
       @belongs_to_association ||= resource.model_class
-        .reflect_on_all_associations(:belongs_to)
-        .find { |association| association.foreign_key.to_s == name }
+                                          .reflect_on_all_associations(:belongs_to)
+                                          .find { |association| association.foreign_key.to_s == name }
     rescue NameError
       nil
     end
@@ -79,8 +79,8 @@ module JSAdmin
 
       association_resource = Resource.new(association.klass)
       association.klass
-        .limit(JSAdmin.configuration.association_limit)
-        .map { |record| [ association_resource.display_name(record), record.id ] }
+                 .limit(JSAdmin.configuration.association_limit)
+                 .map { |record| [ association_resource.display_name(record), record.id ] }
     rescue ActiveRecord::ActiveRecordError, NameError
       []
     end

data/lib/js_admin/resource.rb

@@ -7,7 +7,7 @@ module JSAdmin
     end
 
     def model_id
-      model_class.name.underscore.tr("/", "--")
+      model_class.name.underscore.gsub("/", "--")
     end
 
     def label
@@ -42,14 +42,18 @@ module JSAdmin
       page_number = [ page.to_i, 1 ].max
       model_class.all
         .then { |scope| ordered_scope(scope) }
-        .limit(JSAdmin.configuration.records_per_page)
-        .offset((page_number - 1) * JSAdmin.configuration.records_per_page)
+        .limit(records_per_page)
+        .offset((page_number - 1) * records_per_page)
     end
 
     def count
       model_class.count
     end
 
+    def total_pages(total_count: count)
+      [ (total_count.to_f / records_per_page).ceil, 1 ].max
+    end
+
     def find(record_id)
       model_class.find(record_id)
     end
@@ -69,7 +73,7 @@ module JSAdmin
     end
 
     def next_page?(page)
-      count > page.to_i * JSAdmin.configuration.records_per_page
+      page.to_i < total_pages
     end
 
     def previous_page?(page)
@@ -84,5 +88,9 @@ module JSAdmin
 
       scope.order(primary_key => :desc)
     end
+
+    def records_per_page
+      [ JSAdmin.configuration.records_per_page.to_i, 1 ].max
+    end
   end
 end

data/lib/js_admin/version.rb

@@ -1,3 +1,3 @@
 module JSAdmin
-  VERSION = "0.0.1"
+  VERSION = "0.1.0"
 end

data/lib/js_admin.rb

@@ -1,4 +1,10 @@
 require "js_admin/version"
+
+require "importmap-rails"
+require "stimulus-rails"
+require "tailwindcss-rails"
+require "turbo-rails"
+
 require "js_admin/configuration"
 require "js_admin/field"
 require "js_admin/registry"

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: js_admin
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.1.0
 platform: ruby
 authors:
 - JoungSik
 bindir: bin
 cert_chain: []
-date: 2026-07-12 00:00:00.000000000 Z
+date: 2026-07-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -29,6 +29,26 @@ dependencies:
     - - "<"
       - !ruby/object:Gem::Version
         version: '9.0'
+- !ruby/object:Gem::Dependency
+  name: importmap-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3.0'
 - !ruby/object:Gem::Dependency
   name: stimulus-rails
   requirement: !ruby/object:Gem::Requirement
@@ -101,19 +121,34 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
+- app/assets/javascripts/js_admin/application.js
+- app/assets/javascripts/js_admin/controllers/flash_controller.js
+- app/assets/javascripts/js_admin/controllers/theme_controller.js
 - app/assets/stylesheets/js_admin/application.css
 - app/assets/tailwind/js_admin/engine.css
 - app/controllers/js_admin/application_controller.rb
+- app/controllers/js_admin/home_controller.rb
 - app/controllers/js_admin/models_controller.rb
 - app/controllers/js_admin/resources_controller.rb
 - app/helpers/js_admin/application_helper.rb
 - app/models/js_admin/application_record.rb
+- app/views/js_admin/home/index.html.erb
+- app/views/js_admin/models/_index_content.html.erb
 - app/views/js_admin/models/index.html.erb
+- app/views/js_admin/resources/_edit_content.html.erb
 - app/views/js_admin/resources/_form.html.erb
+- app/views/js_admin/resources/_index_content.html.erb
+- app/views/js_admin/resources/_new_content.html.erb
+- app/views/js_admin/resources/_show_content.html.erb
+- app/views/js_admin/resources/destroy.turbo_stream.erb
 - app/views/js_admin/resources/edit.html.erb
 - app/views/js_admin/resources/index.html.erb
 - app/views/js_admin/resources/new.html.erb
 - app/views/js_admin/resources/show.html.erb
+- app/views/layouts/js_admin/_content_frame.html.erb
+- app/views/layouts/js_admin/_flash.html.erb
+- app/views/layouts/js_admin/_flash_messages.html.erb
+- app/views/layouts/js_admin/_sidebar.html.erb
 - app/views/layouts/js_admin/application.html.erb
 - config/routes.rb
 - lib/generators/js_admin/install/install_generator.rb