lookbook 0.9.0 → 1.0.0.beta.2

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

@@ -0,0 +1,151 @@
+import Split from "split-grid";
+import { observeSize } from "@helpers/layout";
+
+export default function splitLayoutComponent({ split, opts = {} }) {
+  let splitter = null;
+  const shouldSplit = split.sizes !== null;
+
+  return {
+    layoutResizing: false,
+
+    layoutWidth: null,
+
+    layoutHeight: null,
+
+    forceOrientation: null,
+
+    get vertical() {
+      if (this.forceOrientation) {
+        return this.forceOrientation === "vertical";
+      }
+      return split.direction === "vertical";
+    },
+
+    get horizontal() {
+      if (this.forceOrientation) {
+        return this.forceOrientation === "horizontal";
+      }
+      return split.direction === "horizontal";
+    },
+
+    get splits() {
+      if (this.horizontal && split.horizontalSizes) {
+        return split.horizontalSizes;
+      } else if (this.vertical && split.verticalSizes) {
+        return split.verticalSizes;
+      } else {
+        return split.sizes || [];
+      }
+    },
+
+    get minSizes() {
+      if (this.horizontal && opts.minHorizontalSizes) {
+        return opts.minHorizontalSizes;
+      } else if (this.vertical && opts.minVerticalSizes) {
+        return opts.minVerticalSizes;
+      } else {
+        return opts.minSizes || [];
+      }
+    },
+
+    init() {
+      observeSize(this.$el, ({ width, height }) => {
+        this.layoutWidth = width;
+        this.layoutHeight = height;
+      });
+    },
+
+    switchOrientation() {
+      split.direction = this.vertical ? "horizontal" : "vertical";
+    },
+
+    registerGutter() {
+      this._gutters.push(this.$el);
+    },
+
+    initSplit() {
+      if (shouldSplit && this._gutters.length) {
+        this._destroySplit();
+        const dir = this.horizontal ? "row" : "column";
+        splitter = Split({
+          [`${dir}Gutters`]: gutterSplits(this._gutters),
+          [`${dir}MinSizes`]: sizeSplits(this.minSizes),
+          snapOffset: 0,
+          dragInterval: 1,
+          writeStyle() {},
+          onDrag: (dir, gutterTrack, style) => {
+            const splits = style
+              .split(" ")
+              .map((value, i) => (i % 2 == 0 ? value : null))
+              .filter((v) => v);
+            this._setSplits(splits);
+          },
+          onDragStart: () => {
+            this.layoutResizing = true;
+            this.$dispatch("layout:resize-start", { layout: this });
+          },
+          onDragEnd: () => {
+            this.layoutResizing = false;
+            this.$dispatch("layout:resize-end", { layout: this });
+          },
+        });
+      }
+    },
+
+    bindings: {
+      root: {
+        [":style"]() {
+          return {
+            "grid-template-columns":
+              shouldSplit && this.vertical && sizeStr(this.splits),
+            "grid-template-rows":
+              shouldSplit && this.horizontal && sizeStr(this.splits),
+          };
+        },
+      },
+    },
+
+    // protected
+
+    _gutters: [],
+
+    _destroySplit() {
+      if (splitter) splitter.destroy();
+    },
+
+    _setSplits(splits) {
+      if (this.horizontal && split.horizontalSizes) {
+        split.horizontalSizes = splits;
+      } else if (this.vertical && split.verticalSizes) {
+        split.verticalSizes = splits;
+      } else {
+        split.sizes = splits;
+      }
+    },
+  };
+}
+
+// utils
+
+function sizeStr(sizes) {
+  const values = [];
+  sizes.forEach((size) => values.push(size, "1px"));
+  return values.slice(0, -1).join(" ");
+}
+
+function gutterSplits(gutters) {
+  return gutters.map((element, i) => {
+    return {
+      track: i * 2 + 1,
+      element,
+    };
+  });
+}
+
+function sizeSplits(sizes) {
+  const splits = {};
+  sizes.forEach((value, i) => {
+    if (value !== null) splits[i * 2] = value;
+  });
+  return splits;
+}

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

@@ -0,0 +1,11 @@
+module Lookbook
+  class SplitLayout::Component < Lookbook::Component
+    renders_many :panes, Lookbook::TagComponent
+
+    protected
+
+    def alpine_component
+      "splitLayoutComponent"
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<%= render_component_tag class: "h-full" do %>
+  <div x-ref="panels" class="h-full">
+    <%= safe_join(panels) %>
+  </div>
+<% end %>

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

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

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

@@ -0,0 +1,20 @@
+module Lookbook
+  class TabPanels::Component < Lookbook::Component
+    renders_many :panels, ->(**attrs) do
+      @panel_counter += 1
+      attrs[:name] ||= "tab-#{@panel_counter}"
+      Lookbook::TabPanels::Panel::Component.new **attrs
+    end
+
+    def initialize(**html_attrs)
+      @panel_counter = 0
+      super(**html_attrs)
+    end
+
+    protected
+
+    def alpine_component
+      "tabPanelsComponent"
+    end
+  end
+end

data/app/components/lookbook/tab_panels/panel/component.html.erb

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

data/app/components/lookbook/tab_panels/panel/component.rb

@@ -0,0 +1,9 @@
+module Lookbook
+  class TabPanels::Panel::Component < Lookbook::Component
+    def initialize(name:, id: nil, **html_attrs)
+      @name = name 
+      @id = id || name
+      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,20 @@
+<%= render_component_tag class: "flex items-center relative" do %>
+  <div x-ref="tabs" class="<%= class_names [
+    "flex items-stretch select-none min-w-0",
+    {
+      "h-10 space-x-6": @theme == :toolbar,
+      "space-x-3": @theme == :page,
+    }
+  ] %>">
+    <%= 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,115 @@
+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 ? store.activeTab : null;
+  let dropdown = null;
+  return {
+    visibleTabsCount: 0,
+
+    triggerLeft: 0,
+
+    get store() {
+      return store || this;
+    },
+
+    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",
+          placement: "bottom",
+          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) {
+        console.log("uep");
+        this.visibleTabsCount = this.tabs.length;
+        return;
+      }
+
+      console.log(width);
+
+      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) {
+      this.store.activeTab = this._getRef(el);
+      dropdown.hide();
+    },
+
+    isSelected(el) {
+      return this.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,28 @@
+module Lookbook
+  class Tabs::Component < Lookbook::Component
+    renders_many :tabs, ->(**attrs) do
+      @tab_counter += 1
+      attrs[:name] ||= "tab-#{@tab_counter}"
+      attrs[:position] ||= @tab_counter
+      attrs[:theme] ||= @theme
+      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

@@ -0,0 +1,20 @@
+<%= render_component_tag :button,
+  x_ref: @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-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,17 @@
+module Lookbook
+  class Tabs::DropdownTab::Component < Lookbook::Component
+    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

@@ -0,0 +1,24 @@
+<%= render_component_tag :button,
+  id: @id,
+  x_ref: @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-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,17 @@
+module Lookbook
+  class Tabs::Tab::Component < Lookbook::Component
+    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

@@ -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 px-4;
+    }
+  }
+}

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 %>