Merge pull request #14 from hedgeye-sdeming/editing-updates

Editing updates

Author: hedgeye-sdeming

Gemfile

@@ -9,6 +9,7 @@ group :development do
   gem "puma"
   gem "rspec"
   gem "rspec-rails"
+  gem "ruby-lsp"
   gem "sprockets-rails"
 
   # gem 'better_errors'

Gemfile.lock

@@ -158,6 +158,7 @@ GEM
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
     json (2.7.2)
+    language_server-protocol (3.17.0.3)
     logger (1.6.0)
     loofah (2.22.0)
       crass (~> 1.0.2)
@@ -210,6 +211,7 @@ GEM
     phlex-rails (1.2.1)
       phlex (~> 1.10.0)
       railties (>= 6.1, < 8)
+    prism (1.0.0)
     protocol-hpack (1.5.0)
     protocol-http (0.33.0)
     protocol-http1 (0.22.0)
@@ -262,6 +264,8 @@ GEM
       zeitwerk (~> 2.6)
     rainbow (3.1.1)
     rake (13.2.1)
+    rbs (3.5.3)
+      logger
     rdoc (6.7.0)
       psych (>= 4.0.0)
     reline (0.5.9)
@@ -288,10 +292,16 @@ GEM
       rspec-mocks (~> 3.13)
       rspec-support (~> 3.13)
     rspec-support (3.13.1)
+    ruby-lsp (0.17.17)
+      language_server-protocol (~> 3.17.0)
+      prism (~> 1.0)
+      rbs (>= 3, < 4)
+      sorbet-runtime (>= 0.5.10782)
     sawyer (0.9.2)
       addressable (>= 2.3.5)
       faraday (>= 0.17.3, < 3)
     securerandom (0.3.1)
+    sorbet-runtime (0.5.11558)
     sprockets (4.2.1)
       concurrent-ruby (~> 1.0)
       rack (>= 2.2.4, < 4)
@@ -353,6 +363,7 @@ DEPENDENCIES
   puma
   rspec
   rspec-rails
+  ruby-lsp
   sprockets-rails
   web-console
 

app/assets/config/phlex_storybook_manifest.js

@@ -1 +1,2 @@
+//= link_tree ../fonts/phlex_storybook .ttf
 //= link_tree ../../javascript/phlex_storybook .js

app/assets/fonts/phlex_storybook/codicon.ttf

@@ -37,6 +37,7 @@ export default class extends Controller {
       value: this.getComponentSource(),
       language: "ruby",
       theme: "vs-dark",
+      automaticLayout: true,
     });
   }
 

app/javascript/phlex_storybook/controllers/story_display_controller.js

@@ -6,14 +6,19 @@
     member do
       get :preview
     end
+
+    collection do
+      # for monaco editor linked to experiments
+      get 'codicon.ttf', to: redirect('/assets/phlex_storybook/codicon.ttf')
+    end
   end
 
   resources :stories, only: [:index, :show, :update] do
     collection do
       get :all
 
-      get 'codicon.ttf', to: redirect(
-        'https://cdn.jsdelivr.net/npm/monaco-editor@0.51.0/esm/vs/base/browser/ui/codicons/codicon/codicon.ttf')
+      # for monaco editor linked to components
+      get 'codicon.ttf', to: redirect('/assets/phlex_storybook/codicon.ttf')
     end
   end
 end

config/routes.rb

@@ -13,7 +13,7 @@ def view_template
         turbo_frame_tag("sidebar_menu") do
           h2(class: "bg-slate-900 p-2") { "Components" }
           div(class: "px-2") do
-            render_experiments
+            render_experiments if PhlexStorybook.configuration.editable?
 
             @story_components_by_category.each do |category, story_components|
               h4 { category }

lib/phlex_storybook/components/sidebar_menu.rb

@@ -30,7 +30,7 @@ def view_template
 
                 div(class: "mb-4") { @story_component.description }
 
-                div(class: "container w-full h-fit min-w-0 mr-0") do
+                div(class: "w-full h-fit min-w-0 mr-0") do
                   render_story_header
                   render ComponentRendering.new(
                     story_component: @story_component,
@@ -47,7 +47,13 @@ def view_template
 
         def blank_template
           render_header("Select a component")
-          div(class: "px-2") { "Select a component or experiment from the left to see its details" }
+          div(class: "px-2") do
+            if PhlexStorybook.configuration.editable?
+              "Select a component or experiment from the left to see its details"
+            else
+              "Select a component from the left to see its details"
+            end
+          end
         end
 
         def render_header(text)

lib/phlex_storybook/components/stories/component_display.rb

@@ -20,6 +20,7 @@ def view_template(&)
             csp_meta_tag
             javascript_importmap_tags "phlex_storybook"
             stylesheet_link_tag "phlex_storybook_application", media: "all"
+            # stylesheet_link_tag "https://cdn.jsdelivr.net/npm/vscode-codicons@0.0.17/dist/codicon.min.css", media: "all"
             turbo_refreshes_with method: :morph, scroll: :preserve
           end
 

lib/phlex_storybook/layouts/application_layout.rb

@@ -21,7 +21,7 @@ def install
         create_file("config/initializers/phlex_storybook.rb") do
           <<~RUBY
             # frozen_string_literal: true
-            #
+
             # Make sure to add the DSL and invoke ".storybook" in your components
             #
             # Example:

lib/phlex_storybook/tasks/install.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
-#
+
 # Make sure to add the DSL and invoke ".storybook" in your components
 #
 # Example: