lookbook 1.0.0.rc.2 → 1.0.0.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 03c7bc590a271bc1db49e9636c5c6a274ec45f9a449aaf811695e74c4de52aaa
-  data.tar.gz: a23446857053cf0789adf7ac0644ea3fe8968a8a7fee7c25e2f688ff5e15b7b5
+  metadata.gz: f64c997d49feb8abebcde5278b87487c2e6560325e5f36c849b2f1897e8c749e
+  data.tar.gz: d6d230272a15c2b3685da778e3b174300c5a40845f9b3819dba676c66f78904e
 SHA512:
-  metadata.gz: b1eac6af6a1e73ef6c44aa637ca1552bba495d3f07a402ff2bb60d79606c391aaa4a54eeed8e44896273007cb9261cffe57d40b135951b94ea57919be9581d44
-  data.tar.gz: 70fd860db9aa315acd81b182188f3b7f53a38098f33a57bd7b4d8839437de932bc93462a5d00acd30195790157f8af70e7f8313778663bf784ffb3d8fb9437a1
+  metadata.gz: 5cae26841a60c692b5f762b77ad5b6ca38cba5164da39b38f8e026b720a9289300469e6f50d8b7e90e7c8135dcae93443650ae4a6861c5e29ea7b527cdd6e6ee
+  data.tar.gz: d59f0142b41eb72a82997a61a479937cf91ac2cf3adffdfd7e28f0fa9e9af6dacc0f106ce8db5afc9431b5b7278afb00fea3498859e4411b563cd67a47342c14

data/app/components/lookbook/base_component.rb

@@ -35,7 +35,7 @@ module Lookbook
       alpine_component_name = x_data || @html_attrs&.dig(:"x-data") || alpine_component
       if alpine_component_name.present?
         args = Array.wrap(alpine_data)
-        args.any? ? "#{alpine_component_name}(#{safe_join(args).gsub(""", "'").tr("\"", "'")})" : alpine_component_name
+        args.any? ? "#{alpine_component_name}(#{safe_join(args)})" : alpine_component_name
       end
     end
   end

data/app/components/lookbook/params_editor/field/component.html.erb

@@ -1,7 +1,7 @@
 <%= render_component_tag class: "px-4 py-3" do %>
   <div class="flex items-start max-w-[800px]" :class="isNarrowLayout && '!block'">
     <label
-      for="param-<%= @name %>"
+      for="param-<%= name %>"
       class="block font-bold cursor-pointer flex-none py-2 w-[140px] truncate pr-2">
       <%= label %>
     </label>
@@ -27,12 +27,12 @@
         <select
           class="form-input"
           x-bind="bindings.input || {}"
-          x-model="value">
+          x-model="value"
+          name="<%= name %>">
           <%= options_for_select(@options || [], value) %>
         </select>
 
       <% elsif field_type == "toggle" %>
-
         <button type="button"
           class="<%= value == true ? "bg-lookbook-input-toggle-active" : "bg-lookbook-input-toggle" %> relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-input-border-focus"
           role="switch"
@@ -42,7 +42,6 @@
             class="<%= value == true ? "translate-x-5" : "translate-x-0" %>  pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200"
           ></span>
         </button>
-
       <% end %>
     </div>
   </div>

data/app/components/lookbook/params_editor/field/component.rb

@@ -1,5 +1,7 @@
 module Lookbook
   class ParamsEditor::Field::Component < Lookbook::BaseComponent
+    attr_reader :name
+
     def initialize(input:, name:, default: nil, value: nil, input_type: nil, type: nil, options: nil, **html_attrs)
       @input = input
       @name = name
@@ -12,7 +14,7 @@ module Lookbook
     end
 
     def label
-      @name.titleize
+      name.titleize
     end
 
     def value
@@ -31,8 +33,8 @@ module Lookbook
     protected
 
     def alpine_data
-      escaped_value = value.is_a?(String) ? helpers.j(value) : value
-      "{name: '#{@name}', value: '#{escaped_value}'}"
+      escaped_value = helpers.raw json_escape(value.to_json)
+      "{name: '#{name}', value: #{escaped_value}}"
     end
 
     def alpine_component

data/lib/lookbook/engine.rb

@@ -1,4 +1,3 @@
-require "rails"
 require "view_component"
 require "action_cable/engine"
 require "listen"

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "1.0.0.rc.2"
+  VERSION = "1.0.0.rc.3"
 end

data/lib/tasks/lookbook_tasks.rake

@@ -1,18 +1,6 @@
 require_relative "../lookbook"
 
 namespace :lookbook do
-  desc "Run the rspec tests"
-  task :test do
-    sh "bundle exec rspec"
-  end
-
-  namespace :test do
-    desc "Start a server to view the test app"
-    task :serve do
-      sh "bundle exec rackup"
-    end
-  end
-
   namespace :previews do
     desc "Preparse the previews"
     task preparse: :environment do
@@ -20,21 +8,4 @@ namespace :lookbook do
       puts "Lookbook preview parsing complete"
     end
   end
-
-  namespace :release do
-    desc "Bump the Lookbook engine version number"
-    task :bump_version, [:version] do |t, args|
-      filename = Lookbook::Engine.root.join("lib/lookbook/version.rb")
-      current_version = Lookbook::VERSION.to_s
-      new_version = args[:version].sub("v", "").tr("-", ".")
-      file = File.open(filename)
-      contents = file.read
-      File.write(filename, contents.gsub(current_version, new_version))
-    end
-
-    desc "Build Gem and push to RubyGems"
-    task :build_and_push do
-      sh("rake build && gem push pkg/lookbook-#{Lookbook::VERSION}.gem")
-    end
-  end
 end

data/public/lookbook-assets/css/themes/zinc.css.map.91837.5

@@ -0,0 +1 @@
+{"mappings":"AAAA","sources":["app/assets/lookbook/css/themes/zinc.css"],"sourcesContent":[":root {\n  --lookbook-white: theme(\"colors.white\");\n  --lookbook-accent-50: theme(\"colors.zinc.50\");\n  --lookbook-accent-100: theme(\"colors.zinc.100\");\n  --lookbook-accent-200: theme(\"colors.zinc.200\");\n  --lookbook-accent-300: theme(\"colors.zinc.300\");\n  --lookbook-accent-400: theme(\"colors.zinc.400\");\n  --lookbook-accent-500: theme(\"colors.zinc.500\");\n  --lookbook-accent-600: theme(\"colors.zinc.600\");\n  --lookbook-accent-700: theme(\"colors.zinc.700\");\n  --lookbook-accent-800: theme(\"colors.zinc.800\");\n  --lookbook-accent-900: theme(\"colors.zinc.900\");\n  --lookbook-base-50: theme(\"colors.zinc.50\");\n  --lookbook-base-100: theme(\"colors.zinc.100\");\n  --lookbook-base-200: theme(\"colors.zinc.200\");\n  --lookbook-base-300: theme(\"colors.zinc.300\");\n  --lookbook-base-400: theme(\"colors.zinc.400\");\n  --lookbook-base-500: theme(\"colors.zinc.500\");\n  --lookbook-base-600: theme(\"colors.zinc.600\");\n  --lookbook-base-700: theme(\"colors.zinc.700\");\n  --lookbook-base-800: theme(\"colors.zinc.800\");\n  --lookbook-base-900: theme(\"colors.zinc.900\");\n  --lookbook-text: var(--lookbook-base-800);\n  --lookbook-divider: var(--lookbook-base-300);\n  --lookbook-icon-button-stroke: var(--lookbook-base-400);\n  --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);\n  --lookbook-tooltip-bg: var(--lookbook-accent-500);\n  --lookbook-tooltip-text: var(--lookbook-white);\n  --lookbook-scrollbar: var(--lookbook-base-200);\n  --lookbook-scrollbar-hover: var(--lookbook-base-300);\n  --lookbook-toolbar-bg: var(--lookbook-white);\n  --lookbook-toolbar-divider: var(--lookbook-divider);\n  --lookbook-nav-text: var(--lookbook-text);\n  --lookbook-nav-toggle: var(--lookbook-base-500);\n  --lookbook-nav-icon-stroke: var(--lookbook-accent-500);\n  --lookbook-nav-item-hover: var(--lookbook-base-100);\n  --lookbook-nav-item-active: var(--lookbook-accent-50);\n  --lookbook-input-bg: var(--lookbook-white);\n  --lookbook-input-border: var(--lookbook-base-300);\n  --lookbook-input-border-focus: var(--lookbook-accent-200);\n  --lookbook-input-text: var(--lookbook-base-600);\n  --lookbook-input-text-placeholder: var(--lookbook-base-400);\n  --lookbook-input-toggle: var(--lookbook-base-300);\n  --lookbook-input-toggle-active: var(--lookbook-accent-500);\n  --lookbook-prose-bg: var(--lookbook-white);\n  --lookbook-prose-text: var(--lookbook-base-600);\n  --lookbook-prose-link: var(--lookbook-accent-900);\n  --lookbook-tabs-text: var(--lookbook-base-500);\n  --lookbook-tabs-text-hover: var(--lookbook-base-700);\n  --lookbook-tabs-text-disabled: var(--lookbook-base-300);\n  --lookbook-tabs-border-active: var(--lookbook-accent-400);\n  --lookbook-viewport-handle: var(--lookbook-white);\n  --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);\n  --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);\n  --lookbook-sidebar-bg: var(--lookbook-base-50);\n  --lookbook-page-bg: var(--lookbook-white);\n  --lookbook-drawer-bg: var(--lookbook-base-50);\n  --lookbook-header-bg: var(--lookbook-accent-600);\n  --lookbook-header-text: var(--lookbook-white);\n  --lookbook-header-border: var(--lookbook-accent-700);\n  --lookbook-blank-slate-title: var(--lookbook-accent-600);\n  --lookbook-branding-text: var(--lookbook-header-text);\n  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);\n}\n"],"names":[],"version":3,"file":"zinc.css.map","sourceRoot":"../../../../"}

data/public/lookbook-assets/js/lookbook.js

@@ -7701,17 +7701,7 @@ function $5439cede634b2921$var$toCamel(s) {
 }
 
 
-var $f959e58624110d32$exports = {};
-var $99486586f6691564$exports = {};
-
-$parcel$defineInteropFlag($99486586f6691564$exports);
-
-$parcel$export($99486586f6691564$exports, "default", () => $99486586f6691564$export$2e2bcd8739ae039);
-function $99486586f6691564$export$2e2bcd8739ae039() {
-    return {};
-}
-
-
+var $730b795bb0498251$exports = {};
 var $cbd28b10fa9798c7$exports = {};
 
 $parcel$defineInteropFlag($cbd28b10fa9798c7$exports);
@@ -11364,6 +11354,72 @@ function $cbd28b10fa9798c7$export$2e2bcd8739ae039() {
 }
 
 
+var $99486586f6691564$exports = {};
+
+$parcel$defineInteropFlag($99486586f6691564$exports);
+
+$parcel$export($99486586f6691564$exports, "default", () => $99486586f6691564$export$2e2bcd8739ae039);
+function $99486586f6691564$export$2e2bcd8739ae039() {
+    return {};
+}
+
+
+var $47a1c62621be0c54$exports = {};
+
+$parcel$defineInteropFlag($47a1c62621be0c54$exports);
+
+$parcel$export($47a1c62621be0c54$exports, "default", () => $47a1c62621be0c54$export$2e2bcd8739ae039);
+var $122263eab94cad08$exports = {};
+
+$parcel$defineInteropFlag($122263eab94cad08$exports);
+
+$parcel$export($122263eab94cad08$exports, "initClipboard", () => $122263eab94cad08$export$c6684e6159b21de3);
+$parcel$export($122263eab94cad08$exports, "default", () => $122263eab94cad08$export$2e2bcd8739ae039);
+
+function $122263eab94cad08$export$c6684e6159b21de3(context = {}) {
+    let copyTimeout = null;
+    return Object.assign(context, {
+        copied: false,
+        async copyToClipboard (target = null) {
+            let targetEl;
+            if (this.$refs.copyTarget) targetEl = this.$refs.copyTarget;
+            else if (typeof target === "string") targetEl = document.querySelector(target);
+            if (!targetEl) {
+                this.warn("Could not find copy target");
+                return false;
+            }
+            const content = (0, $7ae6ae39c2ec9059$export$6cb344a21ca18aec)(targetEl.innerHTML.trim());
+            await window.navigator.clipboard.writeText(content);
+            this.copied = true;
+            if (copyTimeout) clearTimeout(copyTimeout);
+            copyTimeout = setTimeout(()=>{
+                this.copied = false;
+                this.onCopyComplete();
+            }, 1000);
+            return content;
+        },
+        onCopyComplete () {}
+    });
+}
+function $122263eab94cad08$export$2e2bcd8739ae039() {
+    return $122263eab94cad08$export$c6684e6159b21de3({});
+}
+
+
+
+function $47a1c62621be0c54$export$2e2bcd8739ae039() {
+    const button = (0, $cbd28b10fa9798c7$export$2e2bcd8739ae039)();
+    return {
+        ...button,
+        copied: false,
+        init () {
+            button.init.bind(this)();
+            (0, $122263eab94cad08$export$c6684e6159b21de3)(this);
+        }
+    };
+}
+
+
 var $e398acaded942bbe$exports = {};
 
 $parcel$defineInteropFlag($e398acaded942bbe$exports);
@@ -11397,31 +11453,6 @@ function $e398acaded942bbe$export$2e2bcd8739ae039(targetSelector) {
 }
 
 
-var $e9904a14dabf652d$exports = {};
-
-$parcel$defineInteropFlag($e9904a14dabf652d$exports);
-
-$parcel$export($e9904a14dabf652d$exports, "default", () => $e9904a14dabf652d$export$2e2bcd8739ae039);
-function $e9904a14dabf652d$export$2e2bcd8739ae039(store) {
-    return {
-        focussed: false,
-        get active () {
-            return store.active;
-        },
-        get text () {
-            return store.text;
-        },
-        clear () {
-            if (store.raw === "") this.$refs.input.blur();
-            else store.raw = "";
-        },
-        focus () {
-            this.$refs.input.focus();
-        }
-    };
-}
-
-
 var $e1f51f020443edd4$exports = {};
 
 $parcel$defineInteropFlag($e1f51f020443edd4$exports);
@@ -12287,57 +12318,26 @@ function $e1f51f020443edd4$export$2e2bcd8739ae039(id, embedStore) {
 }
 
 
-var $47a1c62621be0c54$exports = {};
-
-$parcel$defineInteropFlag($47a1c62621be0c54$exports);
-
-$parcel$export($47a1c62621be0c54$exports, "default", () => $47a1c62621be0c54$export$2e2bcd8739ae039);
-var $122263eab94cad08$exports = {};
-
-$parcel$defineInteropFlag($122263eab94cad08$exports);
-
-$parcel$export($122263eab94cad08$exports, "initClipboard", () => $122263eab94cad08$export$c6684e6159b21de3);
-$parcel$export($122263eab94cad08$exports, "default", () => $122263eab94cad08$export$2e2bcd8739ae039);
-
-function $122263eab94cad08$export$c6684e6159b21de3(context = {}) {
-    let copyTimeout = null;
-    return Object.assign(context, {
-        copied: false,
-        async copyToClipboard (target = null) {
-            let targetEl;
-            if (this.$refs.copyTarget) targetEl = this.$refs.copyTarget;
-            else if (typeof target === "string") targetEl = document.querySelector(target);
-            if (!targetEl) {
-                this.warn("Could not find copy target");
-                return false;
-            }
-            const content = (0, $7ae6ae39c2ec9059$export$6cb344a21ca18aec)(targetEl.innerHTML.trim());
-            await window.navigator.clipboard.writeText(content);
-            this.copied = true;
-            if (copyTimeout) clearTimeout(copyTimeout);
-            copyTimeout = setTimeout(()=>{
-                this.copied = false;
-                this.onCopyComplete();
-            }, 1000);
-            return content;
-        },
-        onCopyComplete () {}
-    });
-}
-function $122263eab94cad08$export$2e2bcd8739ae039() {
-    return $122263eab94cad08$export$c6684e6159b21de3({});
-}
-
+var $e9904a14dabf652d$exports = {};
 
+$parcel$defineInteropFlag($e9904a14dabf652d$exports);
 
-function $47a1c62621be0c54$export$2e2bcd8739ae039() {
-    const button = (0, $cbd28b10fa9798c7$export$2e2bcd8739ae039)();
+$parcel$export($e9904a14dabf652d$exports, "default", () => $e9904a14dabf652d$export$2e2bcd8739ae039);
+function $e9904a14dabf652d$export$2e2bcd8739ae039(store) {
     return {
-        ...button,
-        copied: false,
-        init () {
-            button.init.bind(this)();
-            (0, $122263eab94cad08$export$c6684e6159b21de3)(this);
+        focussed: false,
+        get active () {
+            return store.active;
+        },
+        get text () {
+            return store.text;
+        },
+        clear () {
+            if (store.raw === "") this.$refs.input.blur();
+            else store.raw = "";
+        },
+        focus () {
+            this.$refs.input.focus();
         }
     };
 }
@@ -13210,13 +13210,13 @@ function $6d64716f0b34fdf4$export$2e2bcd8739ae039(store) {
 }
 
 
-$f959e58624110d32$exports = {
-    "code": $99486586f6691564$exports,
+$730b795bb0498251$exports = {
     "button": $cbd28b10fa9798c7$exports,
+    "code": $99486586f6691564$exports,
+    "copy_button": $47a1c62621be0c54$exports,
     "dimensions_display": $e398acaded942bbe$exports,
-    "filter": $e9904a14dabf652d$exports,
     "embed": $e1f51f020443edd4$exports,
-    "copy_button": $47a1c62621be0c54$exports,
+    "filter": $e9904a14dabf652d$exports,
     "icon": $36506012e0c6e9e3$exports,
     "nav": $d92d9d5253f84566$exports,
     "params_editor": $b63b9c6d236b3f65$exports,
@@ -13367,7 +13367,7 @@ const $d73574cc5e9b9e72$var$prefix = window.APP_NAME;
 // Components
 (0, $caa9439642c6336c$export$2e2bcd8739ae039).data("app", (0, $d709d0f4027033b2$export$2e2bcd8739ae039));
 [
-    $f959e58624110d32$exports,
+    $730b795bb0498251$exports,
     $e4eab7529959b73b$exports,
     $4979d2d897a1c01f$exports
 ].forEach((scripts)=>{