lookbook 2.3.1 → 3.0.0.alpha.1

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

@@ -1,28 +0,0 @@
-module Lookbook
-  module DisplayOptions
-    class Field::Component < Lookbook::BaseComponent
-      attr_reader :name, :value
-
-      def initialize(name:, opts:, value:, **html_attrs)
-        @name = name
-        @opts = opts
-        @value = value
-        super(**html_attrs)
-      end
-
-      def choices
-        @opts.is_a?(Hash) ? @opts[:choices].to_a : @opts
-      end
-
-      protected
-
-      def alpine_data
-        "{name: '#{name}', value: '#{value}'}"
-      end
-
-      def alpine_component
-        "displayOptionsFieldComponent"
-      end
-    end
-  end
-end

data/app/components/lookbook/embed/component.html.erb

@@ -1,6 +0,0 @@
-<lookbook-embed
-  app="<%= lookbook_home_url %>"
-  preview="<%= preview_class %>"
-  scenario="<%= scenario.name %>"
-  <%= params_attrs_str %> panels="<%= panels.join(",") %>"
-  actions="<%= actions.join(",") %>"></lookbook-embed>

data/app/components/lookbook/embed/component.rb

@@ -1,31 +0,0 @@
-module Lookbook
-  class Embed::Component < Lookbook::BaseComponent
-    ACTIONS = [:inspect, :open]
-
-    attr_reader :preview, :scenario, :params, :options
-
-    def initialize(scenario:, params: {}, options: {}, **html_attrs)
-      @scenario = scenario
-      @preview = scenario.preview
-      @params = params.to_h
-      @options = options.to_h
-      super(**html_attrs)
-    end
-
-    def preview_class
-      preview.preview_class.name
-    end
-
-    def panels
-      options.fetch(:panels, []).map(&:to_s)
-    end
-
-    def actions
-      options.fetch(:actions, ACTIONS).map(&:to_s)
-    end
-
-    def params_attrs_str
-      params.map { |key, value| "param-#{key}=\"#{value}\"" }.join(" ").strip.html_safe
-    end
-  end
-end

data/app/components/lookbook/embed/inspector/component.html.erb

@@ -1,117 +0,0 @@
-<%= render_component_tag id: id,
-  class: "border-b border-lookbook-divider rounded-md overflow-hidden",
-  cloak: true do %>
-
-  <%= lookbook_render :toolbar,
-    class: "border border-b-0 border-lookbook-divider",
-    style: "border-top-left-radius: 6px; border-top-right-radius: 6px;" do |toolbar| %>
-    <% toolbar.with_section padded: true do %>
-      <h3 class="flex items-center space-x-1">
-        <strong class="text-lookbook-embed-title"><%= target.preview.label %></strong>
-        <% if scenarios.many? %>
-          <%= select_tag("target", options_for_select(scenario_select_options, helpers.lookbook_embed_path(target.lookup_path)), "x-model": "targetPath", class: "!ml-2 compact") %>
-        <% else %>
-          <span>(<%= target.label %>) </span>
-        <% end %>
-      </h3>
-    <% end %>
-
-    <% toolbar.with_section align: :right, class: "flex-none" do %>
-      <% if display_option_controls? && dynamic_display_options.any? %>
-        <%= lookbook_render "display_options/editor" do |editor| %>
-          <% dynamic_display_options.each do |key, opts| %>
-            <% editor.with_field name: key, opts: opts, value: static_display_options[key] %>
-          <% end %>
-        <% end %>
-      <% end %>
-    <% end %>
-
-    <% if actions.any? %>
-      <% toolbar.with_section divide: :left do %>
-        <%= lookbook_render :button_group do |group| %>
-          <% if display_action?(:inspect) %>
-            <% group.with_button icon: :eye,
-              href: helpers.lookbook_inspect_url(target.lookup_path, params),
-              tooltip: "View in Inspector",
-              target: "_top" %>
-          <% end %>
-          <% if display_action?(:open) %>
-            <% group.with_button icon: :external_link,
-              href: helpers.lookbook_preview_url(target.lookup_path, params),
-              tooltip: "Open in new window",
-              target: "_blank" %>
-          <% end %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-
-  <section
-    x-ref="viewport"
-    <% unless drawer? %>
-      style="border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; overflow: hidden;"
-    <% end %>>
-    <div
-      x-on:viewport:resize-progress="resizeIframe"
-      x-on:viewport:resize-complete="resizeIframe"
-      x-ref="viewportWrapper"> 
-      <%= lookbook_render :viewport,
-        iframe_id: "#{id}-viewport",
-        src: helpers.lookbook_preview_path(target.lookup_path, request.query_parameters.merge(lookbook_timestamp: Time.now, lookbook_embed: true)),
-        alpine_data: "store",
-        resize_height: false,
-        class: "mb-[-2px] transition-[height] duration-150",
-        ":style": "`height: ${viewportCssHeight}`"
-          %>
-    </div>
-  </section>
-
-  <% if drawer? %>
-    <section
-      class="relative top-[-1px] border border-b-0 border-lookbook-divider overflow-hidden"
-      style="border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;"
-      x-cloak>
-      <%= lookbook_render :toolbar, id: "#{id}-drawer-toolbar" do |toolbar| %>
-        <% toolbar.with_section do %>
-          <%= lookbook_render :tabs, alpine_data: "store", id: "#{id}-drawer-tabs" do |tabs| %>
-            <%= panels.each do |panel| %>
-              <% tabs.with_tab name: panel.name,
-                label: panel.label,
-                hotkey: panel.hotkey,
-                disabled: panel.disabled %>
-            <% end %>
-          <% end %>
-        <% end %>
-
-         <% toolbar.with_section align: :right,  class: "flex-none relative z-10" do %>
-          <%= lookbook_render :button_group do |group| %>
-            <%= panels.select { |p| !p.disabled && p.copy }.each do |panel| %>
-              <% group.with_button id: "copy-panel-contents-button-#{panel.name}",
-                icon: :copy,
-                tooltip: "Copy panel contents",
-                copy: !!panel.copy,
-                "x-show": "store.activeTab === '#{panel.name}'",
-                cloak: true do %>
-                <%= panel.copy ? panel.copy : "" %>
-                <% end %>
-            <% end %>  
-          <% end %>
-        <% end %>
-      <% end %>
-
-      <div class="bg-lookbook-drawer-bg">      
-        <%= lookbook_render :tab_panels, alpine_data: "store", id: "{id}-drawer-panels" do |tabs| %>
-          <% panels.each do |panel| %>
-            <% tabs.with_panel name: panel.name do %>
-              <%= lookbook_render :inspector_panel, name: panel.name do %>
-                <%= render panel.partial, **data, panel: panel, **panel.locals %>
-              <% end %>
-            <% end %>
-          <% end %>
-        <% end %>
-      </div>
-    </section>
-  <% end %>
-<% end %>
-
-

data/app/components/lookbook/embed/inspector/component.js

@@ -1,58 +0,0 @@
-import "iframe-resizer/js/iframeResizer";
-
-export default function embedInspectorComponent(id, embedStore) {
-  if (!embedStore[id]) {
-    embedStore[id] = { width: "100%", height: "100%" };
-  }
-
-  return {
-    iframe: null,
-
-    viewportHeight: 0,
-
-    targetPath: window.location.pathname,
-
-    get viewportCssHeight() {
-      return this.viewportHeight ? `${this.viewportHeight}px` : "100%";
-    },
-
-    get store() {
-      return embedStore[id];
-    },
-
-    init() {
-      const onResized = this.onResized.bind(this);
-
-      this.iframe = this.$el.querySelector("iframe");
-      window.iFrameResize({ onResized, checkOrigin: false }, this.iframe);
-
-      this.$watch("targetPath", (value) => this.switchTarget(value));
-    },
-
-    switchTarget(newTargetPath) {
-      this.navigateTo(`${newTargetPath}${window.location.search}`);
-    },
-
-    onResized({ height }) {
-      if (height) {
-        this.viewportHeight = height;
-
-        // Notify parent window of height resize so the parent window can implement
-        // its own iframe resize strategy if not using the Lookbook JS script.
-        // Uses Embedly-compatible postMessage format: https://docs.embed.ly/reference/provider-height-resizing
-        window.parent.postMessage(
-          JSON.stringify({
-            src: window.location.toString(),
-            context: "iframe.resize",
-            height,
-          }),
-          "*"
-        );
-      }
-    },
-
-    resizeIframe() {
-      this.iframe.iFrameResizer.resize();
-    },
-  };
-}

data/app/components/lookbook/embed/inspector/component.rb

@@ -1,64 +0,0 @@
-module Lookbook
-  class Embed::Inspector::Component < Lookbook::BaseComponent
-    attr_reader :target, :context, :scenarios, :panels, :options, :actions
-
-    def initialize(target:, context: nil, options: nil, scenarios: nil, panels: nil, actions: nil, **html_attrs)
-      @target = target
-      @context = context.to_h
-      @options = options.to_h
-      @panels = Array(panels)
-      @actions = Array(actions).map(&:to_sym)
-      @scenarios = Array(scenarios)
-      super(**html_attrs)
-    end
-
-    def id
-      Utils.id(
-        "embed-inspector",
-        "#{scenarios.map(&:name).join}#{options.to_json}#{actions.to_json}#{panels.to_json}".hash
-      )
-    end
-
-    def data
-      context.fetch(:data, Store.new)
-    end
-
-    def params
-      context.fetch(:params, {}).to_h
-    end
-
-    def dynamic_display_options
-      context.fetch(:dynamic_display_options, {}).to_h
-    end
-
-    def static_display_options
-      context.fetch(:static_display_options, {}).to_h
-    end
-
-    def display_action?(name)
-      actions.include?(name)
-    end
-
-    def scenario_select_options
-      scenarios.map { |scenario| [scenario.label, helpers.lookbook_embed_path(scenario.lookup_path)] }
-    end
-
-    def display_option_controls?
-      options.fetch(:display_option_controls, true)
-    end
-
-    def drawer?
-      panels.any?
-    end
-
-    protected
-
-    def alpine_data
-      [alpine_encode(id), "$store.pages.embeds"].join(",")
-    end
-
-    def alpine_component
-      "embedInspectorComponent"
-    end
-  end
-end

data/app/components/lookbook/embed_code_dropdown/component.css

@@ -1,19 +0,0 @@
-@layer components {
-  [data-component="embed-code-dropdown"] {
-    & [data-component="code"] {
-      @apply px-2 py-2 bg-lookbook-base-50 border border-dashed border-lookbook-divider;
-    }
-
-    & pre.code.highlight {
-      @apply overflow-hidden whitespace-normal p-0;
-      font-size: 11px;
-    }
-
-    .line-clamp-2 {
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-    }
-  }
-}

data/app/components/lookbook/embed_code_dropdown/component.html.erb

@@ -1,64 +0,0 @@
-<%= render_component_tag class:"p-3 w-[360px] text-[11px] text-gray-600" do %>  
-
-  <!-- p class="mb-3">
-    Embed this preview in Lookbook pages or externally using the code or iframe URL below.
-  </!-->
-
-  <div class="mb-4 space-y-2">
-
-    <header class="flex items-center">
-      <h4 class=" uppercase tracking-wider font-bold">Embed Code</h4>
-      <span class="ml-auto" >
-        <a
-          href="https://lookbook.build/guide/sharing/embeds"
-          target="_blank"
-          title="Help"
-          class="text-lookbook-prose underline opacity-70 hover:opacity-100">
-          what's this?
-        </a>
-      </span>
-    </header>
-
-    <div class="relative group">
-      <%= code :html do %><%= embed_code %><% end %>
-
-      <span class="absolute top-px right-px bg-lookbook-base-50 rounded-md transition-opacity duration-300 opacity-0 group-hover:opacity-100">
-        <%= lookbook_render :copy_button, icon: :copy, tooltip: "Copy" do %>
-          <%= escape_once embed_code %>
-        <% end %>
-      </span>
-    </div>
-    
-  </div>
-
-  <div class="space-y-2">
-
-    <header class="flex items-center">
-      <h4 class="text-[11px] uppercase tracking-wider font-bold">Embed URL</h4>
-      <span class="ml-auto" >
-        <a
-          href="https://lookbook.build/guide/sharing/embeds#other-services"
-          target="_blank"
-          title="Help"
-          class="text-lookbook-prose underline opacity-70 hover:opacity-100">
-          what's this?
-        </a>
-      </span>
-    </header>
-
-    <div class="relative group">
-      <div class="font-mono bg-lookbook-base-50 px-2 py-2 break-all border border-dashed border-lookbook-divider">
-        <span class="line-clamp-2">
-          <%= embed_url %>
-        </span>
-      </div>
-      
-      <span class="absolute top-px right-px bg-lookbook-base-50 rounded-md transition-opacity duration-300 opacity-0 group-hover:opacity-100">
-        <%= lookbook_render :copy_button, icon: :copy, tooltip: "Copy" do %><%= embed_url %><% end %>
-      </span>
-    </div>
-
-  </div>
-      
-
-<% end %>

data/app/components/lookbook/embed_code_dropdown/component.js

@@ -1,3 +0,0 @@
-export default function embedCodeDropdownComponent() {
-  return {};
-}

data/app/components/lookbook/embed_code_dropdown/component.rb

@@ -1,51 +0,0 @@
-module Lookbook
-  class EmbedCodeDropdown::Component < Lookbook::BaseComponent
-    attr_reader :preview, :pages, :params, :target, :policy
-
-    def initialize(preview:, target:, pages:, params:, policy:, **html_attrs)
-      @preview = preview
-      @target = target
-      @pages = pages
-      @policy = policy
-      @params = params.deep_symbolize_keys
-      super(**html_attrs)
-    end
-
-    def app_path
-      helpers.lookbook_home_url
-    end
-
-    def preview_name
-      preview.preview_class_name
-    end
-
-    def external_embed_params
-      permitted = params.select { |key, val| key.to_s != "_display" }
-      permitted.transform_keys! { |key| "param-#{key}" }
-    end
-
-    def embed_code
-      embed_tag = content_tag("lookbook-embed",
-        app: app_path,
-        preview: preview_name,
-        scenario: target.name,
-        **external_embed_params) { "" }
-      escape_once embed_tag
-    end
-
-    def embed_url
-      props = {
-        preview: preview_name,
-        scenario: target.name,
-        **external_embed_params.transform_keys { |k| k.tr("-", "_") }
-      }.to_json
-      "#{app_path}embed?props=#{CGI.escape(props)}"
-    end
-
-    private
-
-    def alpine_component
-      "embedCodeDropdownComponent"
-    end
-  end
-end

data/app/components/lookbook/file_source/component.html.erb

@@ -1,9 +0,0 @@
-<%= render_component_tag do %>
-  <%= lookbook_render :code,
-    language: source_lang,
-    highlight_lines: highlight_lines,
-    start_line: start_line_number,
-    line_numbers: true do %>
-    <%= trimmed_source %>
-  <% end %>
-<% end %>

data/app/components/lookbook/file_source/component.rb

@@ -1,73 +0,0 @@
-module Lookbook
-  class FileSource::Component < Lookbook::BaseComponent
-    attr_reader :file_path, :lines_around_highlight
-
-    def initialize(file_path:, source: nil, highlight_lines: [], lines_around_highlight: nil,
-      start_line: 1, end_line: nil, start_line_number: nil, **html_attrs)
-      @file_path = file_path
-      @source = source
-      @highlight_lines = highlight_lines.map(&:to_i)
-      @start_line = start_line
-      @end_line = end_line
-      @start_line_number = start_line_number
-      @lines_around_highlight = lines_around_highlight
-      super(**html_attrs)
-    end
-
-    def render?
-      source.present?
-    end
-
-    def trimmed_source
-      return unless source.present?
-
-      from = start_line - 1
-      to = end_line - 1
-      source_lines[from..to].join("\n")
-    end
-
-    def source
-      return @source if @source.present?
-
-      @_source ||= File.read(file_path)
-    rescue
-      nil
-    end
-
-    def source_lang
-      lang = Lang.guess(file_path)
-      lang.present? ? lang[:name] : "plaintext"
-    end
-
-    def highlight_lines
-      @highlight_lines.map { |num| num - start_line + 1 }
-    end
-
-    def source_lines
-      @_source_lines ||= source&.split("\n")
-    end
-
-    def start_line
-      if lines_around_highlight && @highlight_lines.any?
-        start = @highlight_lines.first - lines_around_highlight
-        (start > 0) ? start : 1
-      else
-        @start_line
-      end
-    end
-
-    def start_line_number
-      @start_line_number || start_line
-    end
-
-    def end_line
-      line_count = source_lines.size
-      if lines_around_highlight && @highlight_lines.any?
-        last = @highlight_lines.last + lines_around_highlight
-        (last <= line_count) ? last : line_count
-      else
-        (@end_line && (@end_line <= line_count)) ? @end_line : line_count
-      end
-    end
-  end
-end

data/app/components/lookbook/filter/component.html.erb

@@ -1,17 +0,0 @@
-<%= render_component_tag do %>
-  <div class="relative">
-    <input
-      type="text"
-      class="form-input text-sm"
-      placeholder="<%== @placeholder %>"
-      x-ref="input"
-      x-model="<%= @model %>"
-      x-effect="$dispatch('filter:change', { text, filter: this })"
-      x-on:keydown.esc.stop="clear"
-      x-on:keydown.f.window="if (!($event.shiftKey || $event.metaKey || $event.ctrlKey || $event.altKey)) { focus(); $event.preventDefault(); $event.stopPropagation(); }"
-      x-on:keydown.stop>
-      <button class="text-lookbook-icon-button-stroke hover:text-lookbook-icon-button-stroke-hover focus:ring-0 focus:outline-none absolute top-1/2 right-3 -translate-y-1/2" x-on:click="clear" x-bind:class="{hidden: !active}">
-        <%= icon  :x, size: 3 %>
-      </button>
-  </div>
-<% end %>

data/app/components/lookbook/filter/component.js

@@ -1,21 +0,0 @@
-export default function filterComponent(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();
-    },
-  };
-}

data/app/components/lookbook/filter/component.rb

@@ -1,15 +0,0 @@
-module Lookbook
-  class Filter::Component < Lookbook::BaseComponent
-    def initialize(store: nil, placeholder: "Type to filter&hellip;", **html_attrs)
-      @model = store.nil? ? "{}" : "#{store}.raw"
-      @placeholder = placeholder
-      super(alpine_data: store, **html_attrs)
-    end
-
-    protected
-
-    def alpine_component
-      "filterComponent"
-    end
-  end
-end

data/app/components/lookbook/header/component.css

@@ -1,12 +0,0 @@
-@layer components {
-  [data-component="header"] {
-    .header-project-icon {
-      @apply h-5 inline-block flex-none;
-      width: min-content;
-
-      svg {
-        @apply h-full w-auto;
-      }
-    }
-  }
-}

data/app/components/lookbook/header/component.html.erb

@@ -1,58 +0,0 @@
-<%= render_component_tag :header do %>
-  <%= lookbook_render :toolbar, class: "!bg-lookbook-header-bg !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
-    <% toolbar.with_section padded: true do %>
-      <a <% if landing_path %>href="<%= landing_path %>"<% end %> class="flex items-center space-x-3">
-        <% if project_logo.present? %>
-          <i class="header-project-icon">
-            <%== project_logo %>
-          </i>
-        <% elsif project_logo != false %>
-          <%= lookbook_render :logo, size: 3.7 %>
-        <% end %>
-        <% if project_name.present? %>
-          <span class="text-sm truncate uppercase font-black tracking-wider text-lookbook-branding-text">
-            <%= project_name %>
-          </span>
-        <% end %>
-      </a>
-    <% end %>
-
-    <% toolbar.with_section padded: false, align: :right, class: "flex items-center -mt-px" do %>
-      <div x-show="loading" x-cloak>
-        <svg class="animate-spin h-3.5 w-3.5 text-lookbook-header-text opacity-60" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-        </svg>
-      </div>
-
-      <%= lookbook_render :button_group do |group| %>
-        <% if @debug_menu %>
-          <% group.with_button id: "debug-menu-button",
-            icon: :help_circle,
-            tooltip: "Debug info",
-            class: "!text-lookbook-header-text", "x-show": "!loading" do |button| %>
-            <% menu = lookbook_render :debug_menu,
-              version: Lookbook::VERSION,
-              docs_url: "https://lookbook.build/guide",
-              repo_url: "https://github.com/lookbook-hq/lookbook" do %>
-              <%= debug_data %>
-            <% end %>
-            <% button.with_dropdown.with_content(menu) %>
-          <% end %>
-        <% end %>
-
-        <% group.with_button icon: :menu,
-          "x-on:click.stop": "toggleSidebar",
-          "x-show": "$store.layout.mobile && sidebarHidden",
-          class: "!text-lookbook-header-text" %>
-
-        <% group.with_button icon: :x,
-          "x-on:click.stop": "toggleSidebar",
-          "x-show": "$store.layout.mobile && !sidebarHidden",
-          "x-on:keydown.esc.window": "closeMobileSidebar",
-          class: "!text-lookbook-header-text" %>
-      <% end %>
-    <% end %>
-  <% end %>
-
-<% end %>

data/app/components/lookbook/header/component.rb

@@ -1,20 +0,0 @@
-module Lookbook
-  class Header::Component < Lookbook::BaseComponent
-    attr_reader :project_logo, :project_name
-
-    def initialize(debug_menu: false, project_name: nil, project_logo: nil, **html_attrs)
-      @debug_menu = debug_menu
-      @project_logo = project_logo
-      @project_name = project_name
-      super(**html_attrs)
-    end
-
-    def landing_path
-      helpers.lookbook_landing_path if defined? helpers.lookbook_landing_path
-    end
-
-    def debug_data
-      JSON.pretty_generate(Lookbook.debug_data)
-    end
-  end
-end