diff --git a/Gemfile b/Gemfile index 8b60596..37cd36f 100644 --- a/Gemfile +++ b/Gemfile @@ -9,6 +9,7 @@ group :development do gem "puma" gem "rspec" gem "rspec-rails" + gem "ruby-lsp" gem "sprockets-rails" # gem 'better_errors' diff --git a/Gemfile.lock b/Gemfile.lock index d7fc03d..7b5ebc4 100644 --- a/Gemfile.lock +++ b/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 diff --git a/app/assets/config/phlex_storybook_manifest.js b/app/assets/config/phlex_storybook_manifest.js index 26b8d5d..6fff013 100644 --- a/app/assets/config/phlex_storybook_manifest.js +++ b/app/assets/config/phlex_storybook_manifest.js @@ -1 +1,2 @@ +//= link_tree ../fonts/phlex_storybook .ttf //= link_tree ../../javascript/phlex_storybook .js diff --git a/app/assets/fonts/phlex_storybook/codicon.ttf b/app/assets/fonts/phlex_storybook/codicon.ttf new file mode 100644 index 0000000..807c949 Binary files /dev/null and b/app/assets/fonts/phlex_storybook/codicon.ttf differ diff --git a/app/javascript/phlex_storybook/controllers/story_display_controller.js b/app/javascript/phlex_storybook/controllers/story_display_controller.js index 5aa95be..64d7acc 100644 --- a/app/javascript/phlex_storybook/controllers/story_display_controller.js +++ b/app/javascript/phlex_storybook/controllers/story_display_controller.js @@ -37,6 +37,7 @@ export default class extends Controller { value: this.getComponentSource(), language: "ruby", theme: "vs-dark", + automaticLayout: true, }); } diff --git a/config/routes.rb b/config/routes.rb index af95e77..9a5e655 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -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 diff --git a/lib/phlex_storybook/components/sidebar_menu.rb b/lib/phlex_storybook/components/sidebar_menu.rb index fd333dd..5c08917 100644 --- a/lib/phlex_storybook/components/sidebar_menu.rb +++ b/lib/phlex_storybook/components/sidebar_menu.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 } diff --git a/lib/phlex_storybook/components/stories/component_display.rb b/lib/phlex_storybook/components/stories/component_display.rb index 93006a1..f599470 100644 --- a/lib/phlex_storybook/components/stories/component_display.rb +++ b/lib/phlex_storybook/components/stories/component_display.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) diff --git a/lib/phlex_storybook/layouts/application_layout.rb b/lib/phlex_storybook/layouts/application_layout.rb index 42f8b95..d8694c0 100644 --- a/lib/phlex_storybook/layouts/application_layout.rb +++ b/lib/phlex_storybook/layouts/application_layout.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 diff --git a/lib/phlex_storybook/tasks/install.rb b/lib/phlex_storybook/tasks/install.rb index 7072be1..600aa74 100644 --- a/lib/phlex_storybook/tasks/install.rb +++ b/lib/phlex_storybook/tasks/install.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: diff --git a/test/dummy/config/initializers/phlex_storybook.rb b/test/dummy/config/initializers/phlex_storybook.rb index 638fbd6..ebfac1c 100644 --- a/test/dummy/config/initializers/phlex_storybook.rb +++ b/test/dummy/config/initializers/phlex_storybook.rb @@ -1,5 +1,5 @@ # frozen_string_literal: true -# + # Make sure to add the DSL and invoke ".storybook" in your components # # Example: