jigsaw_engine 0.4.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 4ef8b377b4e0adf48debf601a0275f21fa887b5411de9d268a2513c27b0bb594
+  data.tar.gz: b8bfe61bd334c43c63137e4b3fce8afd5bb951fd517bf1e0396ed3f199b8636e
+SHA512:
+  metadata.gz: 9d1da80a238c9097123119a2efdfb21b85b49a16414ff1cb85a3dbf121b8cbb45e9fc6c10117811cd6c4af301d10398720dd4ea476ee9d76537a283e94bf84bd
+  data.tar.gz: 4969c358733b4ba3f77c08cbb3d3b7c1c629b3675f3fb24af122264fd12dbcbbcec432daf79a4d32ce7a419a9a360340ad6a05de5104bbcb66950258804a26ca

data/README.md

@@ -0,0 +1,18 @@
+# Jigsaw
+
+Rails engine with the `Jigsaw` namespace.
+
+## Installation
+
+Add to your Gemfile:
+
+```ruby
+gem "jigsaw_engine", path: "engines/jigsaw-engine"
+```
+
+Then:
+
+```bash
+bin/rails jigsaw_engine:install:migrations
+bin/rails db:migrate
+```

data/Rakefile

@@ -0,0 +1,6 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+require "bundler/gem_tasks"

data/app/assets/stylesheets/jigsaw/grid_resize.css

@@ -0,0 +1,21 @@
+.grid-resize-handle {
+  position: absolute;
+  z-index: 100;
+  transition: background-color 0.15s;
+  background-color: transparent;
+}
+
+.grid-resize-handle--col {
+  width: 6px;
+  cursor: col-resize;
+}
+
+.grid-resize-handle--row {
+  height: 6px;
+  cursor: row-resize;
+}
+
+.grid-resize-handle:hover,
+.grid-resize-handle--active {
+  background-color: #3b82f6;
+}

data/app/assets/stylesheets/jigsaw/layout_editor.css

@@ -0,0 +1,356 @@
+html, body {
+  height: 100%;
+}
+
+[data-controller="layout-editor"] .ui.menu .item[data-action] {
+  cursor: pointer;
+}
+
+[data-controller="layout-editor"] .ui.menu .item[data-action]:hover {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+[data-controller="layout-editor"] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.editor-page {
+  display: grid;
+  grid-template-columns: 1fr 300px;
+  grid-template-areas: "center output";
+  gap: 0;
+  flex: 1;
+  min-height: 0;
+}
+
+.editor-page.full-width {
+  grid-template-columns: 1fr;
+  grid-template-areas: "center";
+}
+
+.editor-page.full-width .editor-output {
+  display: none;
+}
+
+.editor-center {
+  grid-area: center;
+  display: grid;
+  grid-template-columns: 60px 1fr;
+  grid-template-rows: 50px 1fr;
+  grid-template-areas:
+    ". col-controls"
+    "row-controls main";
+  gap: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0px;
+}
+
+.editor-output {
+  grid-area: output;
+  padding: 12px;
+  border-left: 1px solid #ddd;
+  overflow: auto;
+}
+
+.panel-divider {
+  border-top: 1px solid #ddd;
+  margin: 16px 0;
+}
+
+.code-output {
+  font-size: 12px;
+  font-family: "SF Mono", "Fira Code", monospace;
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: #1e1e1e;
+  color: #d4d4d4;
+  padding: 12px;
+  border-radius: 4px;
+  margin: 0 0 12px 0;
+}
+
+.sidebar-field {
+  margin-bottom: 12px;
+  display: grid;
+  grid-template-columns: 80px 1fr;
+  align-items: center;
+  gap: 8px;
+}
+
+.sidebar-field label {
+  font-size: 12px;
+  font-weight: bold;
+  color: #555;
+}
+
+.sidebar-input-row {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.sidebar-input-row input {
+  width: 100%;
+  padding: 4px 6px;
+  font-size: 13px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+}
+
+.unit-btn {
+  padding: 4px 8px;
+  font-size: 11px;
+  min-width: 40px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  background: #f5f5f5;
+  cursor: pointer;
+  text-align: center;
+}
+
+.unit-btn:hover {
+  background: #e8e8e8;
+}
+
+/* Track controls */
+.track-controls--col {
+  grid-area: col-controls;
+  display: grid;
+  background: #eef;
+  align-items: center;
+}
+
+.track-controls--row {
+  grid-area: row-controls;
+  display: grid;
+  background: #efe;
+  justify-items: center;
+}
+
+.track-control {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  padding: 4px;
+}
+
+.track-controls--row .track-control {
+  flex-direction: column;
+  border-bottom: 1px dashed #999;
+}
+
+.track-controls--col .track-control {
+  border-right: 1px dashed #999;
+}
+
+.track-value-input {
+  width: 50px;
+  padding: 2px 4px;
+  font-size: 11px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  text-align: center;
+}
+
+.track-value-input:disabled {
+  background: #eee;
+  color: #999;
+}
+
+.track-thumb-ew {
+  cursor: ew-resize;
+  position: absolute;
+  z-index: 10;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  transform: translateX(50%);
+}
+
+.track-thumb-ns {
+  cursor: ns-resize;
+  position: absolute;
+  z-index: 10;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 8px;
+  transform: translateY(50%);
+}
+
+/* Preview area */
+.preview-main {
+  grid-area: main;
+  min-height: 300px;
+  position: relative;
+}
+
+.preview-grid {
+  display: grid;
+}
+
+.preview-cell {
+  position: relative;
+  min-height: 60px;
+  padding: 4px;
+  cursor: pointer;
+}
+
+.grid-cell-bg {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: #c0cbdc;
+  border: 1px dashed #555;
+  transition: 0.1s ease-out;
+}
+
+.grid-cell-bg.selected {
+  background: #dedd70;
+}
+
+.grid-cell-bg.selected.combinable {
+  background: #6ec387;
+}
+
+.grid-cell-inner {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.area-name-input {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  width: calc(100% - 32px);
+  padding: 4px 8px;
+  font-size: 14px;
+  text-align: center;
+  border: 1px dashed transparent;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.6);
+  color: #333;
+  z-index: 2;
+}
+
+.area-name-input:hover {
+  border-color: #aaa;
+  background: rgba(255, 255, 255, 0.85);
+}
+
+.area-name-input:focus {
+  border-color: #4183c4;
+  background: rgba(255, 255, 255, 0.95);
+  outline: none;
+}
+
+.grid-action-btn {
+  position: absolute;
+  font-size: 11px;
+  padding: 2px 6px;
+  border: 1px solid #000;
+  border-radius: 6px;
+  cursor: pointer;
+  white-space: nowrap;
+  z-index: 3;
+}
+
+.grid-action-btn.split {
+  top: 4px;
+  right: 4px;
+  background: #000;
+  color: #fff;
+}
+
+.grid-action-btn.combine {
+  left: 50%;
+  bottom: 4px;
+  transform: translateX(-50%);
+  background: #fff;
+  color: #000;
+}
+
+.slot-edit-btn {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  border: 1px solid #aaa;
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 4;
+  padding: 0;
+  font-size: 12px;
+  color: #444;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  transition: background 0.1s, color 0.1s;
+}
+
+.slot-edit-btn:hover {
+  background: #4183c4;
+  color: #fff;
+  border-color: #4183c4;
+}
+
+.slot-edit-btn-disabled {
+  background: #eee;
+  color: #bbb;
+  cursor: not-allowed;
+  border-color: #ddd;
+}
+
+.slot-edit-btn-disabled:hover {
+  background: #eee;
+  color: #bbb;
+  border-color: #ddd;
+}
+
+.slot-edit-btn .icon {
+  margin: 0 !important;
+}
+
+.grid-action-btn.track-remove,
+.grid-action-btn.track-insert {
+  position: static;
+  width: 24px;
+  height: 18px;
+  padding: 0;
+  background: #fff;
+  border-radius: 3px;
+  font-size: 12px;
+  line-height: 1;
+}
+
+/* Page editor (legacy support) */
+.preview-grid {
+  position: relative;
+}
+
+.module-placeholder {
+  background: #e8e8e8;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: #888;
+}

data/app/components/custom_module_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+class CustomModuleComponent < Component
+  attribute :module_id,          :integer
+  attribute :data_function_url,  :string
+  attribute :render_function_url, :string
+  attribute :config,             :string, default: "{}"
+  attribute :shares,             :string, default: "[]"
+  attribute :edit_url,           :string
+
+  def to_s
+    toolbar = tag.div(style: "position: absolute; top: 4px; right: 4px; z-index: 10;") {
+      tag.button(
+        class: "ui mini icon button",
+        type: "button",
+        onclick: "$('.ui.flyout').flyout('show'); document.querySelector('#editor').src = '#{edit_url}'"
+      ) {
+        tag.i(class: "pencil icon")
+      }
+    }
+
+    content = tag.div(
+      data: {
+        controller: "custom-module",
+        "custom-module-id-value": module_id,
+        "custom-module-data-fn-url-value": data_function_url,
+        "custom-module-render-fn-url-value": render_function_url,
+        "custom-module-config-value": config,
+        "custom-module-shares-value": shares
+      },
+      class: "custom-module-content"
+    )
+
+    tag.div(**merge_html_options(style: "position: relative;")) {
+      safe_join([toolbar, content])
+    }
+  end
+end

data/app/controllers/jigsaw/application_controller.rb

@@ -0,0 +1,5 @@
+module Jigsaw
+  class ApplicationController < ActionController::Base
+    ActionView::Base.default_form_builder = Ui::FomanticFormBuilder
+  end
+end

data/app/controllers/jigsaw/dashboard_controller.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Jigsaw
+  class DashboardController < ApplicationController
+    def index
+    end
+  end
+end

data/app/controllers/jigsaw/layout_templates_controller.rb

@@ -0,0 +1,73 @@
+module Jigsaw
+  class LayoutTemplatesController < ApplicationController
+    before_action :set_layout_template, only: [:edit, :update, :destroy]
+
+    DEFAULT_GRID_CONFIG = {
+      "type"        => "grid",
+      "areas"       => [["main"]],
+      "columns"     => ["1fr"],
+      "rows"        => ["1fr"],
+      "gridWidth"   => "100%",
+      "gridHeight"  => "100%",
+      "rowGap"      => 8,
+      "colGap"      => 8,
+      "rowGapUnit"  => "px",
+      "colGapUnit"  => "px"
+    }.freeze
+
+    def index
+      @layout_templates = LayoutTemplate.order(:name)
+    end
+
+    def new
+      @layout_template = LayoutTemplate.new
+    end
+
+    def create
+      @layout_template = LayoutTemplate.new(layout_template_params)
+      @layout_template.config = DEFAULT_GRID_CONFIG.deep_dup if @layout_template.config.blank?
+      if @layout_template.save
+        redirect_to edit_layout_template_path(@layout_template), notice: "Layout template created"
+      else
+        render :new, status: :unprocessable_entity
+      end
+    end
+
+    def edit
+    end
+
+    def update
+      if @layout_template.update(layout_template_params)
+        redirect_to edit_layout_template_path(@layout_template), notice: "Layout template updated"
+      else
+        render :edit, status: :unprocessable_entity
+      end
+    end
+
+    def destroy
+      @layout_template.destroy!
+      redirect_to layout_templates_path, notice: "Layout template deleted"
+    end
+
+    private
+
+      def set_layout_template
+        @layout_template = LayoutTemplate.find(params[:id])
+      end
+
+      def layout_template_params
+        params.require(:layout_template).permit(
+          :name,
+          :description,
+          :thumbnail,
+          :config,
+          :gridWidth,
+          :gridHeight,
+          :rowGap,
+          :colGap,
+          :rowGapUnit,
+          :colGapUnit
+        )
+      end
+  end
+end

data/app/controllers/jigsaw/pages_controller.rb

@@ -0,0 +1,114 @@
+module Jigsaw
+  class PagesController < ApplicationController
+
+    before_action :set_page, only: [:edit, :update, :destroy, :unlink_template]
+
+    DEFAULT_GRID_CONFIG = {
+      "type"        => "grid",
+      "areas"       => [["main"]],
+      "columns"     => ["1fr"],
+      "rows"        => ["1fr"],
+      "gridWidth"   => "100%",
+      "gridHeight"  => "100%",
+      "rowGap"      => 8,
+      "colGap"      => 8,
+      "rowGapUnit"  => "px",
+      "colGapUnit"  => "px"
+    }.freeze
+
+    def index
+      @pages = Page.order(:title)
+    end
+
+    def new
+      @page = Page.new
+      @layout_templates = LayoutTemplate.order(:name)
+    end
+
+    def create
+      @page = Page.new(page_params)
+      if @page.save
+        layout_template_id = params[:page][:layout_template_id]
+        if layout_template_id.present?
+          lt = LayoutTemplate.find(layout_template_id)
+          @page.create_layout!(
+            name: "#{@page.title} Layout",
+            config: lt.config.deep_dup,
+            layout_template: lt,
+            linked_to_template: true
+          )
+        else
+          @page.create_layout!(name: "#{@page.title} Layout", config: DEFAULT_GRID_CONFIG.deep_dup)
+        end
+        @page.layout.sync_slots
+        redirect_to edit_page_path(@page), notice: "Page created"
+      else
+        @layout_templates = LayoutTemplate.order(:name)
+        render :new, status: :unprocessable_entity
+      end
+    end
+
+    def edit
+      if @layout && !@layout.linked_to_template?
+        @layout.sync_slots
+      end
+      @slots = @layout&.slots&.order(:position) || []
+    end
+
+    def update
+      if @page.update(page_params)
+        @page.layout&.sync_slots unless @page.layout&.linked_to_template?
+        redirect_to edit_page_path(@page), notice: "Page updated"
+      else
+        @slots = @layout&.slots&.order(:position) || []
+        render :edit, status: :unprocessable_entity
+      end
+    end
+
+    def show
+      @page = Page.find_by!(path: params[:path].to_s.delete_prefix("/"))
+      @layout = @page.layout
+
+      if @layout
+        @slots = @layout.slots.order(:position)
+      else
+        @slots = []
+      end
+    end
+
+    def destroy
+      @page.destroy!
+      redirect_to pages_path, notice: "Page deleted"
+    end
+
+    def unlink_template
+      @layout&.unlink_from_template!
+      redirect_to edit_page_path(@page), notice: "Unlinked from layout template"
+    end
+
+    private
+
+      def set_page
+        @page = Page.find(params[:id])
+        @layout = @page.layout
+      end
+
+      def page_params
+        params.require(:page).permit(
+          :title,
+          :path,
+
+          layout_attributes: [
+            :id,
+            :config,
+            :gridWidth,
+            :gridHeight,
+            :rowGap,
+            :colGap,
+            :rowGapUnit,
+            :colGapUnit
+          ]
+        )
+      end
+  end
+end