lookbook 0.4.1 → 0.4.5

data/lib/lookbook/engine.rb

@@ -8,6 +8,10 @@ module Lookbook
     def config
       @config ||= Engine.config.lookbook
     end
+
+    def logger
+      @logger ||= config.debug == true ? Rails.logger : Lookbook::NullLogger.new
+    end
   end
 
   class Engine < Rails::Engine
@@ -35,6 +39,8 @@ module Lookbook
       options.listen_paths = options.listen_paths.map(&:to_s)
       options.listen_paths += options.preview_paths
       options.listen_paths << (vc_options.view_component_path || Rails.root.join("app/components"))
+
+      options.experimental_features = false unless options.experimental_features.present?
     end
 
     initializer "lookbook.cable.config" do |app|

data/lib/lookbook/features.rb

@@ -0,0 +1,24 @@
+module Lookbook
+  module Features
+    EXPERIMENTAL_FEATURES = [:params]
+
+    def self.experimental_feature?(name)
+      EXPERIMENTAL_FEATURES.include?(name.to_sym)
+    end
+
+    def self.enabled?(name)
+      return true unless experimental_feature?(name)
+      enabled.include?(name.to_sym)
+    end
+
+    def self.enabled
+      if Lookbook.config.experimental_features == true
+        EXPERIMENTAL_FEATURES
+      elsif Lookbook.config.experimental_features.blank?
+        []
+      else
+        Lookbook.config.experimental_features.map(&:to_sym)
+      end
+    end
+  end
+end

data/lib/lookbook/params.rb

@@ -0,0 +1,110 @@
+module Lookbook
+  module Params
+    class << self
+      def build_param(param, default)
+        input, options_str = param.text.present? ? param.text.split(" ", 2) : [nil, ""]
+        type = param.types&.first
+        options = YAML.safe_load(options_str || "~")
+        input ||= guess_input(type, default)
+        type ||= guess_type(input, default)
+        {
+          name: param.name,
+          input: input_text?(input) ? "text" : input,
+          input_type: (input if input_text?(input)),
+          options: options,
+          type: type,
+          default: default
+        }
+      end
+
+      def parse_method_param_str(param_str)
+        return nil if param_str[0].nil? || param_str[1].nil?
+        name = param_str[0].chomp(":")
+        value = param_str[1]&.strip
+        value = case value
+        when "nil"
+          nil
+        else
+          if value&.first == ":"
+            value.delete_prefix(":").to_sym
+          else
+            YAML.safe_load(value)
+          end
+        end
+        [name, value]
+      end
+
+      def cast(value, type = "String")
+        case type.downcase
+        when "symbol"
+          value.delete_prefix(":").to_sym
+        when "hash"
+          result = safe_parse_yaml(value, {})
+          unless result.is_a? Hash
+            Lookbook.logger.debug "Failed to parse '#{value}' into a Hash"
+            result = {}
+          end
+          result
+        when "array"
+          result = safe_parse_yaml(value, [])
+          unless result.is_a? Array
+            Lookbook.logger.debug "Failed to parse '#{value}' into an Array"
+            result = []
+          end
+          result
+        else
+          begin
+            type_class = "ActiveModel::Type::#{type}".constantize
+            type_class.new.cast(value)
+          rescue NameError
+            raise ArgumentError, "'#{type}' is not a valid param type to cast to."
+          end
+        end
+      end
+
+      private
+
+      def guess_input(type, default)
+        if type&.downcase == "boolean" || (type.blank? && boolean?(default))
+          "toggle"
+        else
+          "text"
+        end
+      end
+
+      def guess_type(input, default)
+        if input&.downcase == "toggle"
+          "Boolean"
+        elsif input&.downcase == "number"
+          "Integer"
+        elsif boolean?(default)
+          "Boolean"
+        elsif default.is_a? Symbol
+          "Symbol"
+        else
+          "String"
+        end
+      end
+
+      def input_text?(input)
+        [
+          "email",
+          "number",
+          "tel",
+          "text",
+          "url"
+        ].include? input
+      end
+
+      def safe_parse_yaml(value, fallback)
+        value.present? ? YAML.safe_load(value) : fallback
+      rescue Psych::SyntaxError
+        fallback
+      end
+
+      def boolean?(value)
+        value == true || value == false
+      end
+    end
+  end
+end

data/lib/lookbook/parser.rb

@@ -5,7 +5,7 @@ module Lookbook
     YARDOC_FILE_PATH = Rails.root.join("tmp/storage/.yardoc").to_s
 
     def initialize(paths)
-      @paths = paths.map { |p| "#{p}/**/*_preview.rb" }
+      @paths = paths.map { |p| "#{p}/**/*preview.rb" }
       YARD::Registry.yardoc_file = YARDOC_FILE_PATH
     end
 

data/lib/lookbook/preview.rb

@@ -71,7 +71,7 @@ module Lookbook
     end
 
     def lookbook_id
-      lookbook_path.tr("_", "-")
+      lookbook_path.tr("/", "-").tr("_", "-")
     end
 
     def lookbook_layout

data/lib/lookbook/preview_controller.rb

@@ -14,10 +14,9 @@ module Lookbook
       render_to_string template, opts
     end
 
-    def render_in_layout_to_string(template, locals, layout_override = nil)
+    def render_in_layout_to_string(template, locals, layout = nil)
       append_view_path Lookbook::Engine.root.join("app/views")
-      layout = determine_layout(layout_override, prepend_views: false)[:layout]
-      render_to_string template, locals: locals, layout: layout
+      render_to_string template, locals: locals, **determine_layout(@preview.lookbook_layout)
     end
   end
 end

data/lib/lookbook/preview_example.rb

@@ -10,7 +10,7 @@ module Lookbook
     end
 
     def id
-      path.underscore.tr("_", "-")
+      path.underscore.tr("/", "-").tr("_", "-")
     end
 
     def path
@@ -25,6 +25,12 @@ module Lookbook
       @preview.display_params.merge(lookbook_display_params)
     end
 
+    def params
+      @params || code_object&.tags("param")&.map do |param|
+        Lookbook::Params.build_param(param, parameter_defaults[param.name])
+      end
+    end
+
     def method_source
       code_object.source.split("\n")[1..-2].join("\n").strip_heredoc
     end
@@ -55,6 +61,12 @@ module Lookbook
 
     private
 
+    def parameter_defaults
+      @parameter_defaults || code_object&.parameters&.map do |param_str|
+        Lookbook::Params.parse_method_param_str(param_str)
+      end&.compact&.to_h
+    end
+
     def taggable_object_path
       "#{@preview.name}##{name}"
     end

data/lib/lookbook/preview_group.rb

@@ -11,7 +11,7 @@ module Lookbook
     end
 
     def id
-      path.underscore.tr("_", "-")
+      path.underscore.tr("/", "-").tr("_", "-")
     end
 
     def path
@@ -26,6 +26,10 @@ module Lookbook
       :group
     end
 
+    def params
+      []
+    end
+
     def hidden?
       false
     end

data/lib/lookbook/taggable.rb

@@ -27,8 +27,8 @@ module Lookbook
           parts = tag.text.strip.match(/^([^\s]*)\s?(.*)$/)
           if parts.present?
             begin
-              display_params[parts[1]] = JSON.parse parts[2]
-            rescue JSON::ParserError => err
+              display_params[parts[1]] = YAML.safe_load(parts[2] || "~")
+            rescue SyntaxError => err
               Rails.logger.error("\n👀 [Lookbook] Invalid JSON in @display tag.\n👀 [Lookbook] (#{err})\n")
             end
           end

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "0.4.1"
+  VERSION = "0.4.5"
 end

data/lib/lookbook.rb

@@ -5,6 +5,8 @@ module Lookbook
   extend ActiveSupport::Autoload
 
   autoload :Lang, "lookbook/lang"
+  autoload :Params, "lookbook/params"
+  autoload :Features, "lookbook/features"
   autoload :Collection, "lookbook/collection"
   autoload :Parser, "lookbook/parser"
   autoload :Preview, "lookbook/preview"

data/public/lookbook-assets/app.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v2.2.17 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com */
 
 /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
@@ -606,6 +606,9 @@ video {
   --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   --tw-border-opacity: 1;
   border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
@@ -820,12 +823,6 @@ pre[class*="language-"] {
   fill: none;
 }
 
-.min-h-fill {
-  min-height: -webkit-fill-available;
-  min-height: -moz-available;
-  min-height: fill-available;
-}
-
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
@@ -1563,6 +1560,10 @@ pre[class*="language-"] {
   display: flex;
 }
 
+.inline-flex {
+  display: inline-flex;
+}
+
 .hidden {
   display: none;
 }
@@ -1599,6 +1600,10 @@ pre[class*="language-"] {
   height: 11px;
 }
 
+.h-6 {
+  height: 1.5rem;
+}
+
 .w-full {
   width: 100%;
 }
@@ -1631,10 +1636,22 @@ pre[class*="language-"] {
   width: 1.25rem;
 }
 
+.w-\[200px\] {
+  width: 200px;
+}
+
+.w-11 {
+  width: 2.75rem;
+}
+
 .max-w-xs {
   max-width: 20rem;
 }
 
+.max-w-\[800px\] {
+  max-width: 800px;
+}
+
 .flex-none {
   flex: none;
 }
@@ -1643,6 +1660,10 @@ pre[class*="language-"] {
   flex: 1 1 auto;
 }
 
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
 .flex-grow {
   flex-grow: 1;
 }
@@ -1657,6 +1678,16 @@ pre[class*="language-"] {
   transform: var(--tw-transform);
 }
 
+.translate-x-5 {
+  --tw-translate-x: 1.25rem;
+  transform: var(--tw-transform);
+}
+
+.translate-x-0 {
+  --tw-translate-x: 0px;
+  transform: var(--tw-transform);
+}
+
 .transform {
   transform: var(--tw-transform);
 }
@@ -1692,6 +1723,10 @@ pre[class*="language-"] {
   flex-direction: column;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1751,6 +1786,10 @@ pre[class*="language-"] {
   white-space: nowrap;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .rounded-b {
   border-bottom-right-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
@@ -1768,6 +1807,10 @@ pre[class*="language-"] {
   border-width: 1px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-r {
   border-right-width: 1px;
 }
@@ -1835,6 +1878,16 @@ pre[class*="language-"] {
   background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
 }
 
+.bg-indigo-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(99, 102, 241, var(--tw-bg-opacity));
+}
+
+.bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -1882,6 +1935,11 @@ pre[class*="language-"] {
   padding-bottom: 0px;
 }
 
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
 .pr-3 {
   padding-right: 0.75rem;
 }
@@ -2000,11 +2058,22 @@ pre[class*="language-"] {
   opacity: 0.5;
 }
 
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
 
+.ring-0 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .blur {
   --tw-blur: blur(8px);
   filter: var(--tw-filter);
@@ -2022,6 +2091,44 @@ pre[class*="language-"] {
   transition-duration: 150ms;
 }
 
+.transition-colors {
+  transition-property: background-color, border-color, color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
+}
+
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.min-h-fill {
+  min-height: -webkit-fill-available;
+  min-height: -moz-available;
+  min-height: fill-available;
+}
+
+.form-input {
+  width: 100%;
+  border-radius: 0.125rem;
+  --tw-border-opacity: 1;
+  border-color: rgba(209, 213, 219, var(--tw-border-opacity));
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgba(55, 65, 81, var(--tw-text-opacity));
+}
+
+.form-input:focus {
+  --tw-border-opacity: 1;
+  border-color: rgba(165, 180, 252, var(--tw-border-opacity));
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgba(165, 180, 252, var(--tw-ring-opacity));
+}
+
 .tippy-box[data-animation=fade][data-state=hidden]{
   opacity:0
 }
@@ -2463,6 +2570,21 @@ pre[class*="language-"] {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-indigo-400:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgba(129, 140, 248, var(--tw-ring-opacity));
+}
+
+.focus\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
+
 .group:hover .group-hover\:text-indigo-800 {
   --tw-text-opacity: 1;
   color: rgba(55, 48, 163, var(--tw-text-opacity));

data/public/lookbook-assets/app.js

@@ -7333,7 +7333,9 @@ Expression: "${expression}"
   var module_default3 = src_default3;
 
   // node_modules/@ryangjchandler/alpine-clipboard/src/index.js
-  function src_default4(Alpine3) {
+  var onCopy = () => {
+  };
+  function Clipboard(Alpine3) {
     Alpine3.magic("clipboard", () => {
       return function(target) {
         if (typeof target === "function") {
@@ -7342,10 +7344,17 @@ Expression: "${expression}"
         if (typeof target === "object") {
           target = JSON.stringify(target);
         }
-        return window.navigator.clipboard.writeText(target);
+        return window.navigator.clipboard.writeText(target).then(onCopy);
       };
     });
   }
+  Clipboard.configure = (config) => {
+    if (config.hasOwnProperty("onCopy") && typeof config.onCopy === "function") {
+      onCopy = config.onCopy;
+    }
+    return Clipboard;
+  };
+  var src_default4 = Clipboard;
 
   // app/assets/lookbook/js/utils/screen.js
   function screen_default(Alpine3) {
@@ -8359,6 +8368,9 @@ Expression: "${expression}"
         if (fromEl.isEqualNode(toEl)) {
           return false;
         }
+        if (fromEl.hasAttribute("skip-morph")) {
+          return false;
+        }
         return true;
       }
     }, opts));
@@ -8395,7 +8407,12 @@ Expression: "${expression}"
       render() {
         if (this.ready) {
           morph_default(this.$el, store2.doc.getElementById(this.$el.id));
+          this.$dispatch("document:patched");
         }
+      },
+      navigateTo(path2) {
+        history.pushState({}, null, path2);
+        this.$dispatch("popstate");
       }
     };
   }
@@ -8469,6 +8486,27 @@ Expression: "${expression}"
     };
   }
 
+  // app/assets/lookbook/js/workbench/param.js
+  function param() {
+    return {
+      focused: false,
+      setFocus() {
+        if (this.focused && this.$el.focus) {
+          this.$el.focus();
+        }
+      },
+      update(name, value) {
+        const searchParams = new URLSearchParams(window.location.search);
+        searchParams.set(name, value);
+        const path2 = location.href.replace(location.search, "");
+        this.navigateTo(`${path2}?${searchParams.toString()}`);
+      },
+      validate() {
+        return this.$el.reportValidity ? this.$el.reportValidity() : true;
+      }
+    };
+  }
+
   // app/assets/lookbook/js/nav.js
   function nav_default() {
     return {
@@ -8492,13 +8530,12 @@ Expression: "${expression}"
         });
       },
       navigate(path2) {
-        if (path2 instanceof Event) {
-          path2 = path2.currentTarget.href;
-        }
-        history.pushState({}, null, path2);
-        this.$dispatch("popstate");
+        this.navigateTo(path2 instanceof Event ? path2.currentTarget.href : path2);
       },
-      focusFilter() {
+      focusFilter($event) {
+        if ($event.target.tagName === "INPUT") {
+          return;
+        }
         this.currentFocus = this.$refs.filter;
         setTimeout(() => this.$refs.filter.focus(), 0);
       },
@@ -8666,6 +8703,7 @@ Expression: "${expression}"
   module_default.data("workbench", workbench);
   module_default.data("preview", preview);
   module_default.data("inspector", inspector);
+  module_default.data("param", param);
   module_default.data("clipboard", clipboard);
   module_default.data("sizeObserver", sizeObserver);
   module_default.data("split", split_default);

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: lookbook
 version: !ruby/object:Gem::Version
-  version: 0.4.1
+  version: 0.4.5
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-10-21 00:00:00.000000000 Z
+date: 2021-11-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -202,11 +202,13 @@ files:
 - app/assets/lookbook/js/utils/split.js
 - app/assets/lookbook/js/workbench.js
 - app/assets/lookbook/js/workbench/inspector.js
+- app/assets/lookbook/js/workbench/param.js
 - app/assets/lookbook/js/workbench/preview.js
 - app/channels/lookbook/connection.rb
 - app/channels/lookbook/reload_channel.rb
 - app/controllers/lookbook/app_controller.rb
 - app/helpers/lookbook/application_helper.rb
+- app/helpers/lookbook/preview_helper.rb
 - app/views/lookbook/app/error.html.erb
 - app/views/lookbook/app/index.html.erb
 - app/views/lookbook/app/not_found.html.erb
@@ -226,13 +228,20 @@ files:
 - app/views/lookbook/workbench/_preview.html.erb
 - app/views/lookbook/workbench/inspector/_code.html.erb
 - app/views/lookbook/workbench/inspector/_notes.html.erb
+- app/views/lookbook/workbench/inspector/_params.html.erb
 - app/views/lookbook/workbench/inspector/_plain.html.erb
+- app/views/lookbook/workbench/inspector/params/_select.html.erb
+- app/views/lookbook/workbench/inspector/params/_text.html.erb
+- app/views/lookbook/workbench/inspector/params/_textarea.html.erb
+- app/views/lookbook/workbench/inspector/params/_toggle.html.erb
 - config/routes.rb
 - lib/lookbook.rb
 - lib/lookbook/collection.rb
 - lib/lookbook/engine.rb
+- lib/lookbook/features.rb
 - lib/lookbook/lang.rb
 - lib/lookbook/null_logger.rb
+- lib/lookbook/params.rb
 - lib/lookbook/parser.rb
 - lib/lookbook/preview.rb
 - lib/lookbook/preview_controller.rb
@@ -263,7 +272,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.2
+rubygems_version: 3.2.22
 signing_key:
 specification_version: 4
 summary: A native development UI for ViewComponent