lookbook 0.8.2 → 1.0.0.beta.0

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

@@ -0,0 +1,21 @@
+export default function tabbedContentComponent(store) {
+  return {
+    get id() {
+      return this.$root.id;
+    },
+
+    get sections() {
+      return Array.from(this.$refs.sections.children);
+    },
+
+    isActive(el) {
+      return store.activeTab === this._getRef(el);
+    },
+
+    // protected
+
+    _getRef(el) {
+      return el.getAttribute("x-ref");
+    },
+  };
+}

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

@@ -0,0 +1,20 @@
+module Lookbook
+  class TabbedContent::Component < Lookbook::Component
+    renders_many :sections, ->(ref: nil, **attrs) do
+      @section_counter += 1
+      ref ||= "tab-#{@section_counter}"
+      Lookbook::TabbedContent::Section::Component.new ref: ref, **attrs
+    end
+
+    def initialize(**html_attrs)
+      @section_counter = 0
+      super(**html_attrs)
+    end
+
+    protected
+
+    def alpine_component
+      "tabbedContentComponent"
+    end
+  end
+end

data/app/components/lookbook/tabbed_content/section/component.html.erb

@@ -0,0 +1,8 @@
+<%= render_component_tag :section,
+  id: @id,
+  x_ref: @ref,
+  x_cloak: true,
+  class: "h-full",
+  ":class": "{ hidden: !isActive($el) }" do %>
+  <%= content %>
+<% end %>

data/app/components/lookbook/tabbed_content/section/component.rb

@@ -0,0 +1,9 @@
+module Lookbook
+  class TabbedContent::Section::Component < Lookbook::Component
+    def initialize(ref:, id: nil, **html_attrs)
+      @ref = ref
+      @id = id || ref
+      super(**html_attrs)
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+@layer components {
+  [data-component="tabs-dropdown-tab"]:not(.hidden) {
+    @apply border-b border-b-lookbook-divider;
+  }
+  [data-component="tabs-dropdown-tab"]:not(.hidden):last-child {
+    @apply border-b-0;
+  }
+}

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

@@ -0,0 +1,14 @@
+<%= render_component_tag class: "px-4 flex items-center relative" do %>
+  <div x-ref="tabs" class="flex items-stretch h-10 space-x-6 select-none min-w-0">
+    <%= safe_join(tabs) %>
+  </div>
+  <div x-ref="dropdownTrigger" class="absolute" x-show="hasHiddenTabs" :style="{left: `${triggerLeft}px`}">
+    <%= render_component :button, icon: :chevrons_right, x_show: "visibleTabsCount > 0" %>
+    <%= render_component :button, icon: :menu, class: "-ml-3", x_show: "visibleTabsCount === 0" %>
+  </div>
+  <div class="hidden">
+    <div x-ref="tabsDropdown" data-cloak>
+      <%= safe_join(dropdown_tabs) %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,107 @@
+import debounce from "debounce";
+import tippy from "~/app/assets/lookbook/js/lib/tippy";
+import { observeSize } from "@helpers/layout";
+import { getElementSize } from "@helpers/dom";
+
+export default function tabsComponent(store) {
+  const initial = store.activeTab || null;
+  let dropdown = null;
+  return {
+    visibleTabsCount: 0,
+
+    triggerLeft: 0,
+
+    get tabs() {
+      return Array.from(this.$refs.tabs.children);
+    },
+
+    get dropdownTabs() {
+      return Array.from(
+        this.$refs.tabsDropdown ? this.$refs.tabsDropdown.children : []
+      );
+    },
+
+    get tabWidths() {
+      return this.tabs.map(
+        (tab) => getElementSize(tab, { includeMargins: true }).width
+      );
+    },
+
+    init() {
+      this.$nextTick(() => {
+        dropdown = tippy(this.$refs.dropdownTrigger, {
+          content: this.$refs.tabsDropdown,
+          theme: "menu",
+          interactive: true,
+          trigger: "click",
+          appendTo: this.$root,
+        });
+
+        const initialTab = initial
+          ? this.tabs.find((t) => this._getRef(t) === initial)
+          : this.tabs[0];
+        this.selectTab(initialTab);
+
+        this.parentObserver = observeSize(
+          this.$root.parentElement,
+          debounce(this.handleResize.bind(this), 10)
+        );
+
+        this.$watch("visibleTabsCount", (value) => {
+          this.debug(`'#${this.$root.id}' visible tabs count:`, value);
+        });
+      });
+    },
+
+    handleResize({ width }) {
+      if (width === this._lastMeasuredWidth) {
+        return;
+      }
+
+      if (width === this.$root.offsetWidth) {
+        this.visibleTabsCount = this.tabs.length;
+        return;
+      }
+
+      let sumTabWidths = 60;
+      let triggerLeft = 20;
+      let visibleTabsCount = 0;
+      this.tabWidths.forEach((tabWidth) => {
+        sumTabWidths += tabWidth;
+        if (sumTabWidths < width) {
+          triggerLeft += tabWidth;
+          visibleTabsCount++;
+        }
+      });
+
+      this.visibleTabsCount = visibleTabsCount;
+      this.triggerLeft = triggerLeft;
+      this._lastMeasuredWidth = width;
+    },
+
+    selectTab(el) {
+      store.activeTab = this._getRef(el);
+      dropdown.hide();
+    },
+
+    isSelected(el) {
+      return store.activeTab === this._getRef(el);
+    },
+
+    isDisabled(el) {
+      return el.getAttribute("data-disabled") == "true";
+    },
+
+    hasHiddenTabs() {
+      return this.visibleTabsCount < this.tabs.length;
+    },
+
+    // protected
+
+    _lastMeasuredWidth: 0,
+
+    _getRef(el) {
+      return el ? el.getAttribute("x-ref").replace("dropdown-", "") : null;
+    },
+  };
+}

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

@@ -0,0 +1,30 @@
+module Lookbook
+  class Tabs::Component < Lookbook::Component
+    renders_many :tabs, ->(ref: nil, **attrs) do
+      @tab_counter += 1
+      ref ||= "tab-#{@tab_counter}"
+      attrs = {
+        ref: ref,
+        position: @tab_counter,
+        **attrs
+      }
+      dropdown_tab(**attrs)
+      Lookbook::Tabs::Tab::Component.new(**attrs)
+    end
+
+    renders_many :dropdown_tabs, ->(ref:, **attrs) do
+      Lookbook::Tabs::DropdownTab::Component.new(ref: "dropdown-#{ref}", **attrs)
+    end
+
+    def initialize(**html_attrs)
+      @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

@@ -0,0 +1,14 @@
+<%= render_component_tag :button,
+  x_ref: @ref,
+  class: "whitespace-nowrap px-4 py-2 border-l-2 cursor-pointer block w-full text-left",
+  ":class": "{
+    'border-lookbook-tabs-highlight': isSelected($el),
+    'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
+    'hidden': visibleTabsCount >= #{@position}
+  }",
+  "@click.prevent": "selectTab($el)",
+  data: {
+    disabled: @disabled
+  } do %>
+  <%= label %>
+<% end %>

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

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

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

@@ -0,0 +1,18 @@
+<%= render_component_tag :button,
+  id: @id,
+  x_ref: @ref,
+  class: "whitespace-nowrap pt-2.5 pb-1.5 px-1 border-b-2 cursor-pointer",
+  ":class": "{
+    'border-lookbook-tabs-highlight': 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}
+  }",
+  "@click.prevent": "selectTab($el)",
+  "@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

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

data/app/components/lookbook/tag_component.rb

@@ -0,0 +1,29 @@
+module Lookbook
+  class TagComponent < ViewComponent::Base
+    include Lookbook::ComponentHelper
+
+    def initialize(tag: :div, name: nil, cloak: false, **html_attrs)
+      @tag = tag
+      html_attrs[:class] = class_names(html_attrs[:class]) if html_attrs[:class]
+      html_attrs[:data] ||= {}
+      html_attrs[:data][:component] = name if name.present?
+      html_attrs[:x_cloak] = true if cloak == true
+      @html_attrs = convert_attrs(html_attrs)
+    end
+
+    def call
+      @html_attrs[Rails.version.to_f < 7.0 ? :escape_attributes : :escape] = false
+      tag.public_send(@tag, **@html_attrs) do
+        content
+      end
+    end
+
+    protected
+
+    def convert_attrs(html_attrs)
+      html_attrs.map do |name, value|
+        [name.to_s.tr("_", "-"), value]
+      end.to_h
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+@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;
+    }
+  }
+}

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

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

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

@@ -0,0 +1,26 @@
+module Lookbook
+  class Toolbar::Component < Lookbook::Component
+    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

@@ -0,0 +1,11 @@
+@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-indigo-100 hover:bg-opacity-20;
+      @apply text-lookbook-viewport-handle-icon hover:text-lookbook-viewport-handle-icon-hover transition select-none touch-none;
+    }
+  }
+}

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

@@ -0,0 +1,57 @@
+<%= 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="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
+        x-ref="iframe"
+        class="h-full w-full border border-lookbook-divider"
+        :class="{ 'pointer-events-none': reflowing }"
+        style="<%= "max-height: #{@max_height}px;" if @max_height.present? %>"
+        src="<%= @src %>"
+        frameborder="0"
+        @load="$dispatch('viewport:loaded', {viewport: this})"></iframe>
+        <% if @resize_width %>
+          <div
+            class="resize-handle border-r border-t border-lookbook-divider cursor-[col-resize] <%= "border-b" unless @resize_height %>"
+            @pointerdown="onResizeWidthStart"
+            @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-[col-resize] <%= "border-r" unless @resize_width %>"
+            @pointerdown="onResizeHeightStart"
+            @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]"
+            @pointerdown="onResizeStart"
+            @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/{assets/lookbook/js/components/preview-window.js → components/lookbook/viewport/component.js}

@@ -1,34 +1,53 @@
-export default function preview() {
+export default function viewportComponent(store) {
+  store = store || { width: "100%", height: "100%" };
+  store.resizing = false;
+
   return {
-    get store() {
-      return this.$store.inspector.preview;
-    },
+    store,
+
     get maxWidth() {
-      return this.store.width === "100%" ? "100%" : `${this.store.width}px`;
+      return this.store.width === "100%" ? "100%" : `${store.width}px`;
     },
+
     get maxHeight() {
-      return this.store.height === "100%" ? "100%" : `${this.store.height}px`;
+      return this.store.height === "100%" ? "100%" : `${store.height}px`;
     },
+
     get parentWidth() {
-      return Math.round(this.$root.parentElement.clientWidth);
+      return Math.round(this.$root.clientWidth);
     },
+
     get parentHeight() {
-      return Math.round(this.$root.parentElement.clientHeight);
+      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 } = this.store;
+      const { height, width } = store;
       if (height === "100%" && width === "100%") {
         this.toggleFullHeight();
         this.toggleFullWidth();
@@ -37,6 +56,7 @@ export default function preview() {
         if (width !== "100%") this.toggleFullWidth();
       }
     },
+
     onResizeWidth(e) {
       const width =
         this.resizeStartWidth - (this.resizeStartPositionX - e.pageX) * 2;
@@ -46,30 +66,37 @@ export default function preview() {
       );
       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.$root.clientWidth;
+      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() {
-      const { width, lastWidth } = this.store;
+      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);
@@ -77,31 +104,47 @@ export default function preview() {
         Math.max(Math.round(height), 200),
         this.parentHeight
       );
-      this.$store.inspector.preview.height =
+      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.$root.clientHeight;
+      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() {
-      const { height, lastHeight } = this.store;
+      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

@@ -0,0 +1,21 @@
+module Lookbook
+  class Viewport::Component < Lookbook::Component
+    def initialize(src:, resize_height: true, resize_width: true, max_height: nil, **html_attrs)
+      @src = src
+      @resize_height = resize_height
+      @resize_width = resize_width
+      @max_height = max_height
+      super(**html_attrs)
+    end
+
+    def generate_id(*args)
+      args.map { |args| args.delete_prefix("/").tr("&?=/_\-", "-") }.join("-")
+    end
+
+    protected
+
+    def alpine_component
+      "viewportComponent"
+    end
+  end
+end

data/app/controllers/lookbook/application_controller.rb

@@ -6,23 +6,34 @@ module Lookbook
     helper Lookbook::OutputHelper
     helper Lookbook::ComponentHelper
 
+    before_action :generate_theme_overrides
+
     def self.controller_path
       "lookbook"
     end
 
     def index
-      if feature_enabled? :pages
-        landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
-        if landing.present?
-          redirect_to page_path(landing.lookup_path)
-        end
+      landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
+      if landing.present?
+        redirect_to page_path(landing.lookup_path)
+      else
+        render "lookbook/index", layout: Lookbook.previews.any? ? "lookbook/application" : "lookbook/shell"
       end
     end
 
     protected
 
+    def generate_theme_overrides
+      @theme_overrides = Lookbook::Theme.new(Lookbook.config.ui_theme_overrides).to_css
+    end
+
     def feature_enabled?(feature)
       Lookbook::Features.enabled?(feature)
     end
+
+    def render_in_layout(path, layout: nil, **locals)
+      @error = locals[:error]
+      render path, layout: layout.presence || (params[:lookbook_embed] ? "lookbook/basic" : "lookbook/application"), locals: locals
+    end
   end
 end