lookbook 2.3.1 → 3.0.0.alpha.1

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

@@ -1,28 +0,0 @@
-module Lookbook
-  class Tabs::Component < Lookbook::BaseComponent
-    renders_many :tabs, ->(**attrs) do
-      @tab_counter += 1
-      attrs[:name] ||= "tab-#{@tab_counter}"
-      attrs[:position] ||= @tab_counter
-      attrs[:theme] ||= @theme
-      with_dropdown_tab(**attrs)
-      Lookbook::Tabs::Tab::Component.new(**attrs)
-    end
-
-    renders_many :dropdown_tabs, ->(name:, **attrs) do
-      Lookbook::Tabs::DropdownTab::Component.new(name: "dropdown-#{name}", **attrs)
-    end
-
-    def initialize(theme: :toolbar, **html_attrs)
-      @theme = theme
-      @tab_counter = 0
-      super(**html_attrs)
-    end
-
-    protected
-
-    def alpine_component
-      "tabsComponent"
-    end
-  end
-end

data/app/components/lookbook/tabs/dropdown_tab/component.html.erb

@@ -1,21 +0,0 @@
-<%= render_component_tag :button,
-  "x-ref": @name,
-  "data-tab": @name,
-  class: [
-    "whitespace-nowrap px-4 border-l-2 cursor-pointer block w-full text-left",
-    {
-      "py-2": @theme == :toolbar,
-      "py-2 text-base": @theme == :page,
-    }
-  ],
-  ":class": "{
-    'border-lookbook-tabs-border-active': isSelected($el),
-    'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
-    'hidden': visibleTabsCount >= #{@position}
-  }",
-  "x-on:click.prevent": "selectTab($el)",
-  data: {
-    disabled: @disabled
-  } do %>
-  <%= label %>
-<% end %>

data/app/components/lookbook/tabs/dropdown_tab/component.rb

@@ -1,17 +0,0 @@
-module Lookbook
-  class Tabs::DropdownTab::Component < Lookbook::BaseComponent
-    def initialize(name:, label: nil, hotkey: nil, disabled: nil, position: 0, theme: :toolbar, **html_attrs)
-      @name = name
-      @label = label
-      @hotkey = hotkey
-      @disabled = disabled
-      @position = position
-      @theme = theme
-      super(**html_attrs)
-    end
-
-    def label
-      @label.presence || content || @name.titleize
-    end
-  end
-end

data/app/components/lookbook/tabs/tab/component.html.erb

@@ -1,25 +0,0 @@
-<%= render_component_tag :button,
-  id: @id,
-  "x-ref": @name,
-  "data-tab": @name,
-  class: [
-    "whitespace-nowrap cursor-pointer pt-2.5 pb-1.5 border-b-2",
-    {
-      "px-1": @theme == :toolbar,
-      "px-2 text-lg relative -bottom-px": @theme == :page,
-    }
-  ],
-  ":class": "{
-    'border-lookbook-tabs-border-active': isSelected($el),
-    'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
-    '!text-lookbook-tabs-text-disabled': isDisabled($el),
-    'invisible pointer-events-none relative z-[-1]': visibleTabsCount < #{@position}
-  }",
-  "x-on:click.prevent": "selectTab($el)",
-  "x-on:keydown.window.prevent.#{@hotkey}": @hotkey.present? ? "$el.click()" : nil,
-  data: {
-    disabled: @disabled
-  },
-  cloak: true do %>
-  <%== label %>
-<% end %>

data/app/components/lookbook/tabs/tab/component.rb

@@ -1,17 +0,0 @@
-module Lookbook
-  class Tabs::Tab::Component < Lookbook::BaseComponent
-    def initialize(name:, label: nil, hotkey: nil, disabled: nil, position: 0, theme: :toolbar, **html_attrs)
-      @name = name
-      @label = label
-      @hotkey = hotkey
-      @disabled = disabled
-      @position = position
-      @theme = theme
-      super(**html_attrs)
-    end
-
-    def label
-      @label.presence || content || @name.titleize
-    end
-  end
-end

data/app/components/lookbook/tag_component.rb

@@ -1,33 +0,0 @@
-module Lookbook
-  class TagComponent < ViewComponent::Base
-    include Lookbook::UiElementsHelper
-    include Lookbook::ClassNamesHelper if Engine.runtime_context.rails_older_than?("6.1.0")
-
-    def initialize(tag: :div, name: nil, cloak: false, **html_attrs)
-      @tag = tag
-      html_attrs[:data] ||= {}
-      html_attrs[:data][:component] = name if name.present?
-      html_attrs[:"x-cloak"] = true if cloak == true
-      html_attrs[self.class.escape_attribute_key] = false
-      @html_attrs = html_attrs
-    end
-
-    def call
-      @html_attrs[:class] = class_names(@html_attrs[:class])
-      tag.public_send(@tag.to_sym, **@html_attrs) do
-        content
-      end
-    end
-
-    def self.escape_attribute_key
-      @escape_attribute_key ||= (
-        (
-          Gem::Version.new(Rails.version) < Gem::Version.new("5.2.7.1")
-        ) || (
-          Gem::Version.new(Rails.version) >= Gem::Version.new("6") &&
-          Gem::Version.new(Rails.version) < Gem::Version.new("6.1.5.1")
-        )
-      ) ? :escape_attributes : :escape
-    end
-  end
-end

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

@@ -1,26 +0,0 @@
-<%= render_component_tag tag_name,
-  id: id,
-  href: href,
-  class: [
-    "block px-2 py-1.5 text-xs rounded-md bg-lookbook-button-bg text-lookbook-button-text w-full transition focus:outline-none focus-visible:outline-none",
-    {
-      "hover:bg-lookbook-button-bg-hover": !disabled,
-      "cursor-[not-allowed] opacity-50": disabled
-    }
-  ],
-  disabled: disabled,
-  aria: { label: tooltip } do %>
-
-  <span class="flex items-center space-x-2 justify-center">
-    <span x-ref="icon">
-      <%= icons.present? ? safe_join(icons) : (lookbook_render(:icon, name: icon, size: icon_size, ":class": "{'animate-spin': _spinning}") if icon) %>
-    </span>
-    <% if content %>
-      <span><%= content %></span>
-    <% end %>
-  </span>
-
-  <% if tooltip %>
-    <label class="hidden" x-ref="tooltip"><%= tooltip %></label>
-  <% end %>
-<% end %>

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

@@ -1,42 +0,0 @@
-module Lookbook
-  class TextButton::Component < Lookbook::BaseComponent
-    renders_many :icons, Lookbook::Icon::Component
-
-    ICON_SIZES = {
-      xs: 3,
-      sm: 3.5,
-      md: 4,
-      lg: 6
-    }
-
-    attr_reader :icon, :tooltip, :disabled, :size, :href
-
-    def initialize(id: nil, icon: nil, tooltip: nil, disabled: false, size: :md, href: nil, **html_attrs)
-      @id = id
-      @icon = icon
-      @tooltip = tooltip
-      @disabled = disabled
-      @size = size
-      @href = href
-      super(**html_attrs)
-    end
-
-    def id
-      @id ||= Utils.temp_id(prefix: "button")
-    end
-
-    def icon_size
-      ICON_SIZES[size]
-    end
-
-    def tag_name
-      href.present? ? :a : :button
-    end
-
-    protected
-
-    def alpine_component
-      "buttonComponent"
-    end
-  end
-end

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

@@ -1,16 +0,0 @@
-@layer components {
-  [data-component="toolbar"] {
-    & .toolbar-sections > * {
-      @apply h-10 flex items-center whitespace-nowrap border-lookbook-toolbar-divider;
-    }
-
-    & [data-component="button-group"] {
-      padding-left: 0.45rem;
-      padding-right: 0.45rem;
-    }
-
-    & [data-component="tabs"] {
-      @apply relative -mb-px px-4;
-    }
-  }
-}

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

@@ -1,5 +0,0 @@
-<%= render_component_tag class: "h-10 border-b border-lookbook-divider w-full flex items-center text-sm flex-none bg-lookbook-toolbar-bg" do %>
-  <div class="toolbar-sections flex items-stretch w-full h-10">
-    <%= safe_join(sections) %>
-  </div>
-<% end %>

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

@@ -1,26 +0,0 @@
-module Lookbook
-  class Toolbar::Component < Lookbook::BaseComponent
-    DIVIDE_CLASSES = {
-      left: "border-l",
-      right: "border-r"
-    }
-
-    ALIGN_CLASSES = {
-      right: "ml-auto",
-      left: "mr-auto",
-      middle: "mx-auto"
-    }
-
-    renders_many :sections, ->(align: :nil, divide: nil, padded: false, **attrs, &block) do
-      Lookbook::TagComponent.new class: [
-        "min-w-0",
-        {
-          "px-4": padded,
-          "#{DIVIDE_CLASSES[divide]}": divide.present?,
-          "#{ALIGN_CLASSES[align]}": align.present?
-        },
-        attrs[:class]
-      ], **attrs.except(:class), &block
-    end
-  end
-end

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

@@ -1,11 +0,0 @@
-@layer components {
-  [data-component="viewport"] {
-    background-color: #ffffff;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23f3f3f3' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
-
-    .resize-handle {
-      @apply flex items-center justify-center h-full w-full border-lookbook-divider bg-lookbook-viewport-handle hover:bg-lookbook-viewport-handle-hover hover:bg-opacity-20;
-      @apply text-lookbook-viewport-handle-icon-stroke hover:text-lookbook-viewport-handle-icon-stroke-hover transition select-none touch-none;
-    }
-  }
-}

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

@@ -1,69 +0,0 @@
-<%= render_component_tag class: "h-full min-h-0 w-full overflow-hidden relative", "@viewport:reload.window": "reloadIframe" do %>
-  <div class="absolute border border-lookbook-divider w-full h-full"></div>
-  <div
-    x-ref="wrapper"
-    class="mx-auto h-full w-full border border-b-0 border-lookbook-divider relative"
-    :style="`<% if @resize_width %>max-width: ${maxWidth};<% end %>
-      <% if @resize_height && @max_height.present? %>
-        max-height: min(${maxHeight}, <%= @max_height %>px);
-      <% elsif @resize_height %>
-        max-height: ${maxHeight};
-      <% elsif @max_height.present? %>
-        max-height: <%= @max_height %>px;
-      <% end %>`">
-  
-    <div
-      class="absolute z-10 pointer-events-none pr-1 pl-2 pt-1.5 pb-1 bg-gray-100/80 rounded-tl-sm top-0 <%= @resize_width ? "right-[18px]" : "right-0" %>"
-      x-ref="dimensions"
-      x-show="store.resizing"
-      x-cloak
-      x-transition:enter.opacity.duration.300ms
-      x-transition:leave.opacity.duration.500ms.delay.600ms>
-      <%= lookbook_render :dimensions_display, target: "[data-component=viewport] iframe" %>
-    </div>
-
-    <div
-      class="grid bg-white relative -inset-px <%= "grid-cols-[1fr_17px]" if @resize_width %> <%= "grid-rows-[1fr_17px]" if @resize_height %>"
-      style="width: calc(100% + 2px); height: calc(100% + 1px); <%= "max-height: #{@max_height}px;" if @max_height.present? %>">
-      <iframe seamless<%= " id=#{@iframe_id}" if @iframe_id.present? %>
-        x-ref="iframe"
-        class="bg-lookbook-page-bg h-full w-full border border-lookbook-divider"
-        x-bind:class="{ 'pointer-events-none': reflowing }"
-        style="<%= "max-height: #{@max_height}px;" if @max_height.present? %>"
-        src="<%= @src %>"
-        frameborder="0"
-        x-on:load="$dispatch('viewport:loaded', {viewport: this})"
-        title="viewport"></iframe>
-        <% if @resize_width %>
-          <div
-            class="resize-handle border-r border-t border-lookbook-divider cursor-[col-resize] <%= "border-b" unless @resize_height %>"
-            x-on:pointerdown="onResizeWidthStart"
-            x-on:dblclick="toggleFullWidth">
-            <svg class="h-4 w-4 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
-            </svg>
-          </div>
-        <% end %>
-        <% if @resize_height %>
-          <div
-            class="resize-handle border-b border-l border-lookbook-divider cursor-[row-resize] <%= "border-r" unless @resize_width %>"
-            x-on:pointerdown="onResizeHeightStart"
-            x-on:dblclick="toggleFullHeight">
-            <svg class="h-4 w-4 pointer-events-none rotate-90" fill="currentColor" viewBox="0 0 24 24" >
-              <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
-            </svg>
-          </div>
-        <% end %>
-        <% if @resize_height && @resize_width %>
-          <div
-            class="resize-handle border-r border-b border-lookbook-divider cursor-[nwse-resize]"
-            x-on:pointerdown="onResizeStart"
-            x-on:dblclick="toggleFullSize">
-            <svg class="h-3.5 w-3.5 pointer-events-none rotate-45 relative -top-px -left-px" fill="currentColor" viewBox="0 0 24 24" >
-              <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
-            </svg>
-          </div>
-        <% end %>
-    </div>
-  </div>
-<% end %>

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

@@ -1,150 +0,0 @@
-export default function viewportComponent(store) {
-  store = store || { width: "100%", height: "100%" };
-  store.resizing = false;
-
-  return {
-    store,
-
-    get maxWidth() {
-      return this.store.width === "100%" ? "100%" : `${store.width}px`;
-    },
-
-    get maxHeight() {
-      return this.store.height === "100%" ? "100%" : `${store.height}px`;
-    },
-
-    get parentWidth() {
-      return Math.round(this.$root.clientWidth);
-    },
-
-    get parentHeight() {
-      return Math.round(this.$root.clientHeight);
-    },
-
-    get reflowing() {
-      return this.$store.layout.reflowing;
-    },
-
-    reloadIframe() {
-      this.$refs.iframe.contentWindow.location.reload();
-    },
-
-    start() {
-      this.$dispatch("viewport:resize-start", this._resizeData);
-      this.$store.layout.reflowing = true;
-      this.store.resizing = true;
-    },
-
-    end() {
-      this.$store.layout.reflowing = false;
-      this.store.resizing = false;
-      this.$dispatch("viewport:resize-complete", this._resizeData);
-    },
-
-    onResizeStart(e) {
-      this.onResizeWidthStart(e);
-      this.onResizeHeightStart(e);
-    },
-
-    toggleFullSize() {
-      const { height, width } = store;
-      if (height === "100%" && width === "100%") {
-        this.toggleFullHeight();
-        this.toggleFullWidth();
-      } else {
-        if (height !== "100%") this.toggleFullHeight();
-        if (width !== "100%") this.toggleFullWidth();
-      }
-    },
-
-    onResizeWidth(e) {
-      const width =
-        this.resizeStartWidth - (this.resizeStartPositionX - e.pageX) * 2;
-      const boundedWidth = Math.min(
-        Math.max(Math.round(width), 200),
-        this.parentWidth
-      );
-      this.store.width =
-        boundedWidth === this.parentWidth ? "100%" : boundedWidth;
-      this.$dispatch("viewport:resize-progress", this._resizeData);
-    },
-
-    onResizeWidthStart(e) {
-      this.start();
-      this.onResizeWidth = this.onResizeWidth.bind(this);
-      this.onResizeWidthEnd = this.onResizeWidthEnd.bind(this);
-      this.resizeStartPositionX = e.pageX;
-      this.resizeStartWidth = this.$refs.wrapper.clientWidth;
-      window.addEventListener("pointermove", this.onResizeWidth);
-      window.addEventListener("pointerup", this.onResizeWidthEnd);
-    },
-
-    onResizeWidthEnd() {
-      window.removeEventListener("pointermove", this.onResizeWidth);
-      window.removeEventListener("pointerup", this.onResizeWidthEnd);
-      this.end();
-    },
-
-    toggleFullWidth() {
-      this.$dispatch("viewport:resize-start", this._resizeData);
-      const { width, lastWidth } = store;
-      if (width === "100%" && lastWidth) {
-        this.store.width = lastWidth;
-      } else {
-        this.store.lastWidth = width;
-        this.store.width = "100%";
-      }
-      this.$dispatch("viewport:resize-complete", this._resizeData);
-    },
-
-    onResizeHeight(e) {
-      const height =
-        this.resizeStartHeight - (this.resizeStartPositionY - e.pageY);
-      const boundedHeight = Math.min(
-        Math.max(Math.round(height), 200),
-        this.parentHeight
-      );
-      this.store.height =
-        boundedHeight === this.parentHeight ? "100%" : boundedHeight;
-      this.$dispatch("viewport:resize-progress", this._resizeData);
-    },
-
-    onResizeHeightStart(e) {
-      this.start();
-      this.onResizeHeight = this.onResizeHeight.bind(this);
-      this.onResizeHeightEnd = this.onResizeHeightEnd.bind(this);
-      this.resizeStartPositionY = e.pageY;
-      this.resizeStartHeight = this.$refs.wrapper.clientHeight;
-      window.addEventListener("pointermove", this.onResizeHeight);
-      window.addEventListener("pointerup", this.onResizeHeightEnd);
-    },
-
-    onResizeHeightEnd() {
-      window.removeEventListener("pointermove", this.onResizeHeight);
-      window.removeEventListener("pointerup", this.onResizeHeightEnd);
-      this.end();
-    },
-
-    toggleFullHeight() {
-      this.$dispatch("viewport:resize-start", this._resizeData);
-      const { height, lastHeight } = store;
-      if (height === "100%" && lastHeight) {
-        this.store.height = lastHeight;
-      } else {
-        this.store.lastHeight = height;
-        this.store.height = "100%";
-      }
-      this.$dispatch("viewport:resize-complete", this._resizeData);
-    },
-
-    // protected
-
-    get _resizeData() {
-      return {
-        width: this.store.width,
-        height: this.store.height,
-        viewport: this,
-      };
-    },
-  };
-}

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

@@ -1,18 +0,0 @@
-module Lookbook
-  class Viewport::Component < Lookbook::BaseComponent
-    def initialize(src:, resize_height: true, resize_width: true, max_height: nil, iframe_id: nil, **html_attrs)
-      @src = src
-      @resize_height = resize_height
-      @resize_width = resize_width
-      @max_height = max_height
-      @iframe_id = iframe_id
-      super(**html_attrs)
-    end
-
-    protected
-
-    def alpine_component
-      "viewportComponent"
-    end
-  end
-end

data/app/controllers/concerns/lookbook/targetable_concern.rb

@@ -1,123 +0,0 @@
-module Lookbook
-  module TargetableConcern
-    extend ActiveSupport::Concern
-
-    included do
-      before_action :lookup_entities, only: [:show]
-      before_action :set_title
-      before_action :set_display_options
-      before_action :set_params
-    end
-
-    def set_title
-      @title = @target.present? ? [@target&.label, @preview&.label].compact.join(" :: ") : "Not found"
-    end
-
-    def lookup_entities
-      @target = Engine.previews.find_scenario_by_path(params[:path])
-      if @target.present?
-        @preview = @target.preview
-        if params[:path] == @preview&.lookup_path
-          redirect_to lookbook_inspect_path("#{params[:path]}/#{@preview.default_scenario.name}", params.permit!)
-        end
-      else
-        @preview = Engine.previews.find_by_path(params[:path])
-        if @preview.present?
-          default_scenario = @preview.default_scenario
-          redirect_to lookbook_inspect_path(default_scenario.lookup_path, params.permit!) if default_scenario
-        end
-      end
-    end
-
-    def set_display_options
-      @dynamic_display_options = []
-      @static_display_options = []
-
-      if @target.present?
-        opts = @target.display_options
-        @dynamic_display_options = opts.select { _2.is_a?(Array) || _2.is_a?(Hash) }
-        @static_display_options = opts.except(*@dynamic_display_options.keys)
-
-        if params[:_display]
-          display_params = SearchParamParser.call(params[:_display])
-          display_params.each do |name, value|
-            if @dynamic_display_options.key?(name)
-              cookies["lookbook-display-#{name}"] = value.is_a?(Array) ? value[1] : value
-            end
-          end
-        end
-
-        @dynamic_display_options.each do |name, opts|
-          choices = opts.is_a?(Hash) ? opts[:choices].to_a : opts
-          value = choices.first.is_a?(Array) ? choices.first[1] : choices.first
-          @static_display_options[name] ||= cookies.fetch("lookbook-display-#{name}", value)
-        end
-
-        unless params[:_display]
-          display_params = @dynamic_display_options.each_with_object({}) do |(name, opts), hash|
-            hash[name] = @static_display_options[name]
-          end
-          request.query_parameters[:_display] = SearchParamEncoder.call(display_params)
-        end
-      end
-    end
-
-    def set_params
-      @params = []
-
-      if @target
-        param_tags = @target.tags("param").uniq(&:name)
-        @params = param_tags.map do |param_tag|
-          Param.from_tag(
-            param_tag,
-            value: preview_controller.params[param_tag.name]
-          )
-        end
-
-        # cast known param values to correct type
-        @params.each do |param|
-          if preview_controller.params.key?(param.name)
-            preview_controller.params[param.name] = param.cast_value
-          end
-        end
-
-        # set display and data params for use in preview layouts
-        preview_controller.params[:lookbook] = {
-          display: @static_display_options,
-          data: Lookbook.data
-        }
-      end
-
-      preview_controller.params.permit!
-    end
-
-    def inspector_data
-      return @inspector_data if @inspector_data.present?
-
-      scenarios = @target ? @target.scenarios : []
-      rendered_scenarios = scenarios.map do |scenario|
-        output = preview_controller.process(:render_scenario_to_string, @preview, scenario)
-        RenderedScenarioEntity.new(scenario, output, preview_controller.params)
-      end
-
-      target = rendered_scenarios.find { |scenario| scenario.id == @target.id } || @target
-
-      @inspector_data ||= Lookbook::Store.new({
-        context: Store.new({params: @params, path: params[:path]}),
-        preview: @preview,
-        scenarios: rendered_scenarios,
-        examples: -> do
-          Lookbook.logger.warn("The `examples` panel variable has been renamed to `scenarios`. The `examples` variable will be removed in the next major release.")
-          rendered_scenarios
-        end,
-        target: target,
-        data: Lookbook.data,
-        app: Lookbook
-      })
-    end
-
-    def path_segments
-      params[:path].split("/")
-    end
-  end
-end

data/app/controllers/concerns/lookbook/with_panels_concern.rb

@@ -1,30 +0,0 @@
-module Lookbook
-  module WithPanelsConcern
-    extend ActiveSupport::Concern
-
-    included do
-      private
-
-      def main_panel_names
-        Lookbook.config.preview_inspector.main_panels
-      end
-
-      def drawer_panel_names
-        Lookbook.config.preview_inspector.drawer_panels
-      end
-
-      def main_panels
-        Engine.panels.get_panels(*main_panel_names).map do |config|
-          PanelStore.resolve_config(config, inspector_data)
-        end
-      end
-
-      def drawer_panels
-        panels = Engine.panels.get_panels(*drawer_panel_names)
-        panels.select { |config| !config.name.to_s.in?(main_panel_names) }.map do |config|
-          PanelStore.resolve_config(config, inspector_data)
-        end
-      end
-    end
-  end
-end