databasium 0.1.0

data/app/assets/stylesheets/databasium/custom.css

@@ -0,0 +1,36 @@
+@layer components {
+  .scrollbar-thin {
+    /* The height makes the horizontal scroll thin */
+    &::-webkit-scrollbar {
+      height: 6px;
+      width: 6px;
+      @apply rounded-full;
+    }
+
+    &::-webkit-scrollbar-track {
+      @apply bg-background;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      @apply bg-panel;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      @apply bg-hover;
+    }
+
+    /* Support for Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: theme("colors.panel") theme("colors.background");
+  }
+}
+
+@layer base {
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus {
+    -webkit-box-shadow: 0 0 0px 1000px var(--color-background) inset !important;
+    -webkit-text-fill-color: var(--color-main-text) !important;
+    transition: background-color 5000s ease-in-out 0s;
+  }
+}

data/app/assets/stylesheets/databasium/databasium_engine.css

@@ -0,0 +1,6 @@
+/* Our entry point for tailwindcss */
+
+@import "tailwindcss";
+@import "./pagy-tailwind.css";
+@import "./colors.css";
+@import "./custom.css";

data/app/assets/stylesheets/databasium/pagy-tailwind.css

@@ -0,0 +1,66 @@
+@layer components {
+  .pagy {
+    --B: 1;
+    --H: 360;
+    --S: 48.71;
+    --L: 73.56;
+    --A: 1;
+    --spacing: 0.1875rem;
+    --padding: 0.5rem;
+    --rounding: 0.75rem;
+    --border-width: 0.0625rem;
+    --font-size: 0.875rem;
+    --font-weight: 300;
+    --line-height: 1.75;
+
+    --text: hsl(var(--H) var(--S) calc(var(--L) - (30 * var(--B))));
+    --text-hover: hsl(var(--H) var(--S) calc(var(--L) - (33 * var(--B))));
+    --text-current: hsl(var(--H) var(--S) calc(100 * (var(--B) + 1)));
+    --background: hsl(var(--H) var(--S) calc(var(--L) + (30 * var(--B))));
+    --background-hover: hsl(var(--H) var(--S) calc(var(--L) + (20 * var(--B))));
+    --background-current: hsl(var(--H) var(--S) var(--L));
+    --background-input: hsl(var(--H) var(--S) calc(var(--L) + (45 * var(--B))));
+    --opacity: 1;
+
+    @apply flex gap-x-[var(--spacing)] font-[var(--font-weight)]
+    text-[length:var(--font-size)] text-[var(--text)]
+    leading-[var(--line-height)];
+
+    a:not([role="separator"]) {
+      /* all but gaps */
+      @apply block rounded-[var(--rounding)] px-[var(--padding)] py-[calc(var(--padding)/3)] bg-[var(--background)]
+      border-solid  border-[var(--background-current)] border-[length:var(--border-width)] opacity-[var(--opacity)];
+    }
+
+    a[href]:hover {
+      /* all links on hover */
+      @apply bg-[var(--background-hover)] text-[var(--text-hover)];
+    }
+
+    a:not([href]) {
+      /* all but links */
+      @apply cursor-default;
+    }
+
+    a[role="link"]:not([aria-current]) {
+      /* disabled links */
+      @apply opacity-[calc(var(--opacity)*.6)];
+    }
+
+    a[aria-current] {
+      /* current page */
+      @apply bg-[var(--background-current)] text-[var(--text-current)];
+    }
+
+    label {
+      @apply inline-block whitespace-nowrap rounded-[var(--rounding)] px-[var(--padding)]
+      py-[calc(var(--padding)/3-var(--border-width))]
+      bg-[var(--background)] border-solid border-[length:var(--border-width)] border-[var(--background-current)];
+
+      input {
+        @apply text-[var(--text)] text-[length:var(--font-size)] leading-[var(--line-height)] rounded-[calc(var(--rounding)/2)]
+        font-[var(--font-weight)] bg-[var(--background-input)] border-[length:var(--border-width)] border-[var(--background-current)];
+      }
+    }
+  }
+}

data/app/components/base.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Databasium
+  class Components::Base < Phlex::HTML
+    # Include any helpers you want to be available across all components
+    include Phlex::Rails::Helpers::Routes
+    include Phlex::Rails::Helpers::ClassNames
+    include ::Databasium::HeroiconHelper
+
+    if Rails.env.development?
+      def before_template
+        comment { "Before #{self.class.name}" }
+        super
+      end
+    end
+
+    protected
+
+    def minimalistic_label_class
+      "text-xs absolute -top-2.5 left-0"
+    end
+
+    def render_x_button(action: nil)
+      button(type: "button", class: "text-red-500", data: { action: action }) do
+        heroicon "x-mark", variant: :solid, options: { class: "w-8 h-8" }
+      end
+    end
+
+    def render_collapsable(
+      form: nil,
+      name:,
+      data_targets: {},
+      name_params: {},
+      class_name: nil,
+      target_container: nil,
+      &block
+    )
+      render Components::Databasium::Collapsable.new(
+               name: name,
+               form: form,
+               data_targets: data_targets,
+               name_params: name_params,
+               class_name: class_name,
+               target_container: target_container
+             ) do
+        yield if block_given?
+      end
+    end
+  end
+end

data/app/components/databasium/collapsable.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module Components
+  module Databasium
+    class Collapsable < Components::Base
+      def initialize(
+        name: nil,
+        form: nil,
+        class_name: nil,
+        data_targets: {},
+        name_params: nil,
+        target_container: nil
+      )
+        @name = name
+        @form = form
+        @class_name = class_name
+        @data_targets = data_targets
+        @name_params = name_params || {}
+        @target_container = target_container
+      end
+
+      def view_template(&block)
+        form(&block)
+      end
+
+      private
+
+      def form(&block)
+        div(
+          class: @class_name ? @class_name : "w-full border-1 border-border rounded-xl p-3",
+          data: @data_targets
+        ) do
+          div(data: { controller: "collapse" }) do
+            button(
+              data: {
+                action: "click->collapse#toggle"
+              },
+              class: "flex items-center justify-between w-full h-fit hover:cursor-pointer px-3"
+            ) do
+              if @form
+                raw @form.label(@name, class: "text-lg font-semibold")
+              else
+                h2(class: "text-lg font-semibold", **@name_params) { @name }
+              end
+              heroicon(
+                "chevron-down",
+                variant: :solid,
+                options: {
+                  class: "w-8 h-8 text-red-500",
+                  data_collapse_target: "collapseIcon"
+                }
+              )
+            end
+            div(class: "hidden", data: { collapse_target: "content" }) do
+              div(class: "w-full") { div(data: @target_container) { yield if block_given? } }
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/databasium/forms/model.rb

@@ -0,0 +1,147 @@
+# frozen_string_literal: true
+
+module Components
+  module Databasium
+    class Forms::Model < Components::Base
+      include Phlex::Rails::Helpers::HiddenFieldTag
+      include Phlex::Rails::Helpers::ContentTag
+      include Phlex::Rails::Helpers::FormWith
+      include Phlex::Rails::Helpers::LinkTo
+      include Phlex::Rails::Helpers::TurboFrameTag
+
+      TYPES = %w[
+        string
+        text
+        integer
+        float
+        double
+        decimal
+        boolean
+        date
+        datetime
+        timestamp
+        time
+        binary
+      ].freeze
+      SKIPPED_COLUMNS = %w[created_at updated_at id].freeze
+
+      def initialize(columns_names_types:, model:)
+        @columns_names_types = columns_names_types
+        @model = model
+      end
+
+      def view_template
+        if @model
+          form_with(
+            method: :post,
+            scope: :record,
+            url: databasium.records_path,
+            class:
+              "border-b-1 border-border p-4 rounded-xl hidden max-h-100 overflow-y-auto flex-1",
+            id: "addRecord",
+            data: {
+              table_target: "addRecordForm"
+            }
+          ) do |form|
+            hidden_field_tag(:table, @model.name)
+            div(class: "grid grid-cols-2 gap-4 w-fit") do
+              render_fields(form)
+              render_submit_button(form)
+            end
+          end
+        end
+      end
+
+      private
+
+      def render_fields(form)
+        @columns_names_types.each do |column|
+          next if column[:name].in?(SKIPPED_COLUMNS)
+
+          raw form.label(column[:name], class: "underline p-1 h-full text-sm")
+
+          render_foreign_key_content(form, column) if column[:foreign_key]
+          render_field(form, column) unless column[:foreign_key]
+        end
+      end
+
+      def render_submit_button(form)
+        raw form.submit(
+              "Add record",
+              class: "bg-blue-500 px-4 py-2 rounded-md w-fit",
+              id: "add_record_button"
+            )
+      end
+
+      def render_field(form, column)
+        div(class: "flex flex-col relative") do
+          p(class: "text-xs font-light z-10 text-end absolute -top-3 right-0") { column[:type] }
+          raw form.public_send(
+                type_to_helper(column[:type]),
+                column[:name],
+                class: "border-1 rounded-xl p-1 border-border bg-panel text-sm"
+              )
+        end
+      end
+
+      def type_to_helper(type)
+        unless type.in?(TYPES)
+          raise ArgumentError, "Invalid type: #{type}. Known types are: #{TYPES.join(", ")}"
+        end
+
+        case type
+        when "decimal", "float", "double", "integer"
+          "number_field"
+        when "text"
+          "text_area"
+        when "date"
+          "date_field"
+        when "datetime", "timestamp"
+          "datetime_local_field"
+        when "time"
+          "time_field"
+        when "boolean"
+          "check_box"
+        when "binary"
+          "file_field"
+        else
+          "text_field"
+        end
+      end
+
+      def render_foreign_key_content(form, column)
+        frame_id = foreign_records_frame_id(column)
+        div(data: { controller: "table-select" }, class: "relative flex overflow-visible") do
+          raw form.public_send(
+                type_to_helper(column[:type]),
+                column[:name],
+                class: "border-2 rounded-xl p-1 border-gray-300 me-2 w-full",
+                data: {
+                  table_select_target: "foreignKeyInput"
+                }
+              )
+
+          link_to(
+            helpers.records_records_path(table: column[:to_table], frame_id: frame_id),
+            class: "border-1 border-blue-500 rounded-md flex justify-center items-center p-1",
+            data: {
+              turbo_frame: frame_id
+            }
+          ) do
+            heroicon "arrow-right-circle",
+                     variant: :solid,
+                     options: {
+                       class: "w-8 h-8 text-blue-500"
+                     }
+          end
+
+          turbo_frame_tag(frame_id)
+        end
+      end
+
+      def foreign_records_frame_id(column)
+        "foreign_records_#{@model.name}_#{column[:to_table]}"
+      end
+    end
+  end
+end

data/app/components/databasium/forms/search.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Components
+  module Databasium
+    class Forms::Search < Components::Base
+      include Phlex::Rails::Helpers::FormWith
+
+      def initialize(url:, turbo_frame:, placeholder:)
+        @url = url
+        @turbo_frame = turbo_frame
+        @placeholder = placeholder
+      end
+
+      def view_template
+        div(data: { controller: "search" }) do
+          form_with url: @url,
+                    method: :get,
+                    data: {
+                      turbo_frame: @turbo_frame,
+                      action: "input->search#update"
+                    } do |form|
+            raw form.search_field :search,
+                                  class:
+                                    "border-2 border-border bg-background rounded-md p-2 w-full",
+                                  placeholder: @placeholder
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/databasium/global/error.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module Components
+  module Databasium
+    class Global::Error < Components::Base
+      include Phlex::Rails::Helpers::TurboFrameTag
+
+      def initialize(message: nil, details: nil, type: nil)
+        @message = message
+        @details = details
+        @type = type
+      end
+
+      def view_template
+        div(id: "error") do
+          div(
+            class:
+              "absolute top-20 left-1/2 -translate-x-1/2 px-4 z-50 transition-opacity duration-1000 ease-in-out",
+            data: {
+              controller: "error"
+            }
+          ) { render_error if @message || @details }
+        end
+      end
+
+      private
+
+      def render_error
+        div(
+          class:
+            "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-xl shadow-md lg:w-4xl mx-auto relative overflow-y-auto max-h-100",
+          role: "alert"
+        ) do
+          button(
+            type: "button",
+            class: "absolute right-4 top-1",
+            data: {
+              action: "click->error#close"
+            }
+          ) do
+            heroicon("x-mark", variant: :solid, options: { class: "w-8 h-8 hover:cursor-pointer" })
+          end
+          h2(class: "font-bold pr-10") { @type || "Error" }
+          p(class: "block whitespace-pre-wrap pr-10") { @message }
+          render_details if @details.present?
+        end
+      end
+
+      def render_details
+        details(class: "mt-3") do
+          summary(class: "cursor-pointer font-semibold") { "Details" }
+          pre(
+            class:
+              "mt-2 max-h-64 overflow-auto whitespace-pre rounded-lg bg-red-50 p-2 font-mono text-xs"
+          ) { plain @details }
+        end
+      end
+    end
+  end
+end

data/app/components/databasium/global/flash.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+module Components
+  module Databasium
+    class Global::Flash < Components::Base
+      include Phlex::Rails::Helpers::TurboFrameTag
+
+      def initialize(success: nil, error: nil)
+        @success = success
+        @error = error
+      end
+
+      def view_template
+        turbo_frame_tag "flash" do
+          if @success || @error
+            div(
+              class:
+                "absolute top-20 left-1/2 -translate-x-1/2 px-4 z-50 transition-opacity duration-1000 ease-in-out",
+              data: {
+                controller: "flash"
+              }
+            ) do
+              render_success if @success
+              render_error if @error
+            end
+          end
+        end
+      end
+
+      private
+
+      def render_success
+        div(
+          class:
+            "bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-xl shadow-md lg:w-4xl mx-auto relative",
+          role: "alert"
+        ) do
+          button(
+            type: "button",
+            class: "absolute right-4 top-2",
+            data: {
+              action: "click->flash#close"
+            }
+          ) do
+            heroicon("x-mark", variant: :solid, options: { class: "w-8 h-8 hover:cursor-pointer" })
+          end
+          h2(class: "font-bold border-b-1 border-b-gray-300") { "Success!" }
+          p(class: "block") { @success }
+        end
+      end
+
+      def render_error
+        div(
+          class:
+            "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-xl shadow-md lg:w-4xl mx-auto relative",
+          role: "alert"
+        ) do
+          button(
+            type: "button",
+            class: "absolute right-4 top-2",
+            data: {
+              action: "click->flash#close"
+            }
+          ) do
+            heroicon("x-mark", variant: :solid, options: { class: "w-8 h-8 hover:cursor-pointer" })
+          end
+          h2(class: "font-bold") { "Error!" }
+          p(class: "block") { @error }
+        end
+      end
+    end
+  end
+end

data/app/components/databasium/global/header_actions.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Components
+  module Databasium
+    class Global::HeaderActions < Components::Base
+      include Phlex::Rails::Helpers::LinkTo
+      include Phlex::Rails::Helpers::Routes
+      include Phlex::Rails::Helpers::TurboFrameTag
+
+      def initialize(actions: nil)
+        @actions = actions
+      end
+
+      def view_template
+        render_navigation_links
+      end
+
+      private
+
+      def render_navigation_links
+        div(
+          class:
+            "border-b-1 bg-panel border-border flex min-w-0 items-center text-2xl gap-4 py-2 ps-4"
+        ) do
+          div(
+            class: "flex shrink-0 items-center gap-4 border-1 p-1 p-2 rounded-xl font-bold",
+            data: {
+              action: "click->layout#toggleSidebar"
+            }
+          ) { heroicon("arrows-right-left", variant: :outline, options: { class: "w-4 h-4" }) }
+          div(id: "header_actions", class: "min-w-0 flex-1 overflow-x-auto") { raw @actions }
+        end
+      end
+    end
+  end
+end

data/app/components/databasium/global/sidebar.rb

@@ -0,0 +1,45 @@
+module Components
+  module Databasium
+    class Global::Sidebar < Components::Base
+      include Phlex::Rails::Helpers::LinkTo
+      include Phlex::Rails::Helpers::CurrentPage
+      PAGES = [
+        { icon: "list-bullet", path: :records_path, text: "Records" },
+        { icon: "arrow-path", path: :migrations_path, text: "Migrations" },
+        { icon: "cube", path: :new_model_path, text: "Models" },
+        { icon: "table-cells", path: :schemas_path, text: "Schema" }
+      ].freeze
+
+      def initialize(sidebar: nil)
+        @sidebar = sidebar
+      end
+
+      def view_template
+        div(
+          class: "flex flex-col bg-panel border-r-2 border-r-border py-2 px-3 w-80",
+          data: {
+            layout_target: "sidebar"
+          }
+        ) do
+          div(class: "flex flex-col gap-2 pb-6") do
+            PAGES.each do |page|
+              path = databasium.send(page[:path])
+              link_to(
+                path,
+                class:
+                  class_names(
+                    "text-main-text hover:text-hover flex items-center gap-2 py-2 px-3 border border-border rounded-lg",
+                    "bg-accent shadow-accent" => current_page?(path)
+                  )
+              ) do
+                heroicon(page[:icon], variant: :outline, options: { class: "w-6 h-6" })
+                span(class: "ml-2") { page[:text] }
+              end
+            end
+          end
+          raw @sidebar
+        end
+      end
+    end
+  end
+end

data/app/components/databasium/global/suggestion.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Components
+  module Databasium
+    class Global::Suggestion < Components::Base
+      def initialize(suggestions:)
+        @suggestions = suggestions
+      end
+
+      def view_template
+        div(
+          class: "flex flex-col gap-2 bg-panel border-1 border-border rounded-xl p-2 m-4",
+          id: "suggestion"
+        ) do
+          @suggestions.each do |suggestion|
+            div(class: "flex items-center gap-2") do
+              heroicon("information-circle", variant: :outline, options: { class: "w-6 h-6" })
+              span(class: "text-main-text") { suggestion }
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/databasium/migrations/action.rb

@@ -0,0 +1,39 @@
+module Components
+  module Databasium
+    class Migrations::Action < Components::Base
+      include Phlex::Rails::Helpers::TurboStream
+
+      def initialize(success:, error:, migration_version: nil, status: nil)
+        @success = success
+        @error = error
+        @migration_version = migration_version
+        @status = status
+      end
+
+      def view_template
+        render_flash_stream if @success || @error
+        render_migration_status_stream if @status
+      end
+
+      private
+
+      def render_flash_stream
+        turbo_stream.replace("error", Components::Databasium::Global::Error.new)
+        turbo_stream.replace(
+          "flash",
+          Components::Databasium::Global::Flash.new(success: @success, error: @error)
+        )
+      end
+
+      def render_migration_status_stream
+        turbo_stream.replace(
+          "migration_#{@migration_version}_status",
+          Components::Databasium::Migrations::MigrationStatus.new(
+            status: @status,
+            version: @migration_version
+          )
+        )
+      end
+    end
+  end
+end