bullet_train-themes-light 1.19.2 → 1.20.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 02d5fb874e31c8426b7167bf768df6b0c070ae2e4c64f79c43516ab38ae2b486
-  data.tar.gz: ec30e70c823015d09a9880e925ce98bf0d556984574856f4254c9a17935003eb
+  metadata.gz: 4e9dceda78f3784f0ef0c87e6433ae5b52f90a603189159f5d2e14f14829a3f5
+  data.tar.gz: 0b09bd6809c5f25257abcf73fa73e30a4b62dc965023538fd787d15384c05152
 SHA512:
-  metadata.gz: 9a636d62b26b414d2227a77406343f7f8b9d30b0be6c3e3fd6b120592ef21ea8d760957efc5bc1ccce80d59f029e1dd1f31ffb9992ebb4a30905ff49dba5295f
-  data.tar.gz: fbf07899d9b3e625d0bb9e7c2321c1e345d586cb5eaa3bcfc5850dd7c5f6d0a0aa11d202e9f7997fc899c4e33b83d4b7c816472a1c103b6a69bc826379e73078
+  metadata.gz: 5493a162466b1c77a0e378ec657c83dd2374d7aea3fefe3d5457c219128acc6d3bee9ae0c0aa1f0012a97f9f2cb590e3443972a147601e998322cc051ec2cb52
+  data.tar.gz: 0d1013a3af1bb4377861babc501a35420fe3249d4cdebd4b69ac7f867611c9237f7e09d3100c459366d3e767f0ab779295127ff7bf8f24cc8518d9e00ab973e1

data/app/assets/stylesheets/light/fields/code_editor.css

@@ -0,0 +1,10 @@
+.code-editor {
+  .monaco-editor, .monaco-editor .overflow-guard {
+    border-radius: inherit;
+  }
+  
+  .monaco-editor, .monaco-editor-background,
+  .monaco-editor .margin {
+    background-color: var(--code-editor-background);
+  }
+}

data/app/assets/stylesheets/light/fields/index.css

@@ -3,6 +3,7 @@
 @import './phone_field';
 @import './super_select';
 @import './trix_editor';
+@import './code_editor';
 
 .required > label::after {
   @apply text-red-500 pl-1 text-base leading-none inline-block;

data/app/views/showcase/previews/field_partials/_code_editor.html.erb

@@ -0,0 +1,56 @@
+<%= render "showcase/previews/field_partials/about_field_partials", showcase: showcase do |form| %>
+  <% showcase.description do %>
+    <p>The code editor field is a custom field that allows you to edit code in a monaco editor, which supports a <a target="_blank" href="https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages">wide range of programming languages</a>.</p>
+    <p class="mt-2">
+      <strong>Note:</strong>
+      The code editor loads the Monaco editor from a CDN on first load. If the CDN is not available, the code editor
+      will fall back to a plain text area.
+    </p>
+  <% end %>
+
+  <% showcase.sample "CSS Example (Default Language)" do %>
+    <%
+      code_field = :text_area_value
+      form.object.text_area_value = <<~CSS
+        .example {
+          color: red;
+        }
+      CSS
+    %>
+    <%= render 'shared/fields/code_editor', form: form, method: code_field %>
+  <% end %>
+
+  <% showcase.sample "JS Example" do %>
+    <%
+      code_field = :text_area_value
+      form.object.text_area_value = <<~JS
+        import { Component } from "@hotwired/stimulus"
+
+        export default class extends Component {
+          connect() {
+            console.log("Hello, world!");
+          }
+        }
+      JS
+    %>
+    <%= render 'shared/fields/code_editor', form: form, method: code_field, language: :javascript %>
+  <% end %>
+
+  <% showcase.sample "HTML Example" do %>
+    <%
+      code_field = :text_area_value
+      form.object.text_area_value = <<~HTML
+        <div class="example">Hello, world!</div>
+      HTML
+    %>
+    <%= render 'shared/fields/code_editor', form: form, method: code_field, language: :html %>
+  <% end %>
+
+  <% showcase.options do |o| %>
+    <% o.optional :language, "The <a target=\"_blank\" href=\"https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages\">coding language</a> of the editor".html_safe, default: "css" %>
+    <% o.optional :theme_light, "The theme of the editor in light mode", default: "vs" %>
+    <% o.optional :theme_dark, "The theme of the editor in dark mode", default: "vs-dark" %>
+    <% o.optional :monaco_config, "Extra config properties to pass to the monaco editor" %>
+    <% o.optional :code_field_options, "Options to pass to the wrapper div of the code editor e.g. for custom data-action properties" %>
+  <% end %>
+<% end %>

data/app/views/showcase/previews/field_partials/attribute_partials/_code_snippet.html.erb

@@ -0,0 +1,21 @@
+<%= render "showcase/previews/field_partials/attribute_partials/about_attribute_partials", showcase: showcase do |partial| %>
+  <% partial.body do |object| %>
+    <% showcase.sample "CSS example" do %>
+      <%
+        object.text_area_value = <<~CSS
+          h1 {
+            font-size: 3em;
+            color: red;
+            text-transform: uppercase;
+            font-family: Futura, sans-serif;
+            margin-bottom: 3em;
+            line-height: 1;
+            max-inline-size: 50ch;
+            text-wrap: balance;
+          }
+        CSS
+      %>
+      <%= render 'shared/attributes/code_snippet', object: object, strategy: :label, attribute: :text_area_value %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/themes/light/fields/_code_editor.html.erb

@@ -0,0 +1,54 @@
+<%
+stimulus_controller = "fields--code-editor"
+form ||= current_fields_form
+options ||= {}
+other_options ||= {}
+
+language ||= "css" # See https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages
+monaco_config ||= {}
+theme_light ||= "vs"
+theme_dark ||= "vs-dark"
+
+wrapper_options ||= {}
+wrapper_options[:class] ||= ""
+wrapper_options[:class] += " code-editor"
+wrapper_options[:data] ||= {}
+wrapper_options[:data][:controller] ||= ""
+wrapper_options[:data][:controller] += " #{stimulus_controller}"
+wrapper_options[:data]["#{stimulus_controller}-language-value"] = language
+wrapper_options[:data]["#{stimulus_controller}-theme-light-value"] = theme_light
+wrapper_options[:data]["#{stimulus_controller}-theme-dark-value"] = theme_dark
+wrapper_options[:data]["#{stimulus_controller}-monaco-config-value"] = monaco_config if monaco_config.present?
+
+field_class = "min-h-32 w-full text-base md:text-[0.75rem] font-mono text-input px-0 "
+field_class += " bg-[color:--code-editor-background] [--code-editor-background:theme('colors.slate.50')] dark:[--code-editor-background:theme('colors.slate.800')]"
+field_class += " block rounded-md shadow-sm font-light dark:text-slate-300"
+field_class += " disabled:[--code-editor-background:theme('colors.slate.200')] disabled:dark:[--code-editor-background:theme('colors.slate.700')]"
+field_class += " focus:ring-primary-500 focus:border-primary-500 border-slate-300 dark:border-slate-900"
+
+plain_field_options ||= {}
+plain_field_options[:class] ||= ""
+plain_field_options[:class] += "hidden #{field_class} p-0 pl-3"
+plain_field_options[:data] ||= {}
+plain_field_options[:data]["#{stimulus_controller}-target"] = "plainField"
+plain_field_options[:spellcheck] = :false
+plain_field_options[:autocomplete] = :off
+plain_field_options[:autocorrect] = :off
+plain_field_options[:autocapitalize] = :off
+
+code_field_options ||= {}
+code_field_options[:class] ||= ""
+code_field_options[:class] += " #{field_class}"
+code_field_options[:data] ||= {}
+code_field_options[:data]["#{stimulus_controller}-target"] = "codeField"
+code_field_options[:data][:action] ||= ""
+%>
+
+<%= tag.div(**wrapper_options) do %>
+  <%= render 'shared/fields/field', form: form, method: method, options: options, other_options: other_options do %>
+    <% content_for :field do %>
+      <%= form.text_area method, plain_field_options %>
+      <%= tag.div(**code_field_options) %>
+    <% end %>
+  <% end %>
+<% end %>

data/lib/bullet_train/themes/light/version.rb

@@ -1,7 +1,7 @@
 module BulletTrain
   module Themes
     module Light
-      VERSION = "1.19.2"
+      VERSION = "1.20.0"
     end
   end
 end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: bullet_train-themes-light
 version: !ruby/object:Gem::Version
-  version: 1.19.2
+  version: 1.20.0
 platform: ruby
 authors:
 - Andrew Culver
 bindir: bin
 cert_chain: []
-date: 2025-03-25 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: standard
@@ -99,6 +99,7 @@ files:
 - app/assets/stylesheets/light/docs.css
 - app/assets/stylesheets/light/electron.css
 - app/assets/stylesheets/light/fields/cloudinary_image.css
+- app/assets/stylesheets/light/fields/code_editor.css
 - app/assets/stylesheets/light/fields/date_field.css
 - app/assets/stylesheets/light/fields/index.css
 - app/assets/stylesheets/light/fields/phone_field.css
@@ -166,6 +167,7 @@ files:
 - app/views/showcase/previews/field_partials/_address_field.html.erb
 - app/views/showcase/previews/field_partials/_buttons.html.erb
 - app/views/showcase/previews/field_partials/_cloudinary_image.html.erb
+- app/views/showcase/previews/field_partials/_code_editor.html.erb
 - app/views/showcase/previews/field_partials/_color_picker.html.erb
 - app/views/showcase/previews/field_partials/_date_and_time_field.html.erb
 - app/views/showcase/previews/field_partials/_date_field.html.erb
@@ -183,6 +185,7 @@ files:
 - app/views/showcase/previews/field_partials/_trix_editor.html.erb
 - app/views/showcase/previews/field_partials/attribute_partials/_about_attribute_partials.html.erb
 - app/views/showcase/previews/field_partials/attribute_partials/_address.html.erb
+- app/views/showcase/previews/field_partials/attribute_partials/_code_snippet.html.erb
 - app/views/showcase/previews/partials/_alert.html.erb
 - app/views/showcase/previews/partials/_box.html.erb
 - app/views/showcase/previews/partials/_breadcrumb.html.erb
@@ -226,6 +229,7 @@ files:
 - app/views/themes/light/conversations/_comment.html.erb
 - app/views/themes/light/conversations/_message.html.erb
 - app/views/themes/light/conversations/_thread_border.html.erb
+- app/views/themes/light/fields/_code_editor.html.erb
 - app/views/themes/light/fields/_field.html.erb
 - app/views/themes/light/forms/_errors.html.erb
 - app/views/themes/light/layouts/_account.html.erb
@@ -282,7 +286,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.2
+rubygems_version: 3.6.7
 specification_version: 4
 summary: 'Bullet Train Themes: Light'
 test_files: []