lookbook 2.3.1 → 3.0.0.alpha.2

data/app/components/lookbook/params/editor/component.js

@@ -1,12 +0,0 @@
-import { observeSize } from "@helpers/layout";
-
-export default function paramsEditorComponent() {
-  return {
-    narrow: false,
-    init() {
-      observeSize(this.$el, ({ width }) => {
-        this.narrow = width < 500;
-      });
-    },
-  };
-}

data/app/components/lookbook/params/editor/component.rb

@@ -1,37 +0,0 @@
-module Lookbook
-  module Params
-    class Editor::Component < Lookbook::BaseComponent
-      renders_many :fields, ->(**attrs) do
-        @field_count += 1
-        Lookbook::Params::Field::Component.new(**attrs, index: @field_count)
-      end
-
-      def initialize(**html_attrs)
-        @field_count = -1
-        @@input_styles = {}
-        super(**html_attrs)
-      end
-
-      def before_render
-        fields
-      end
-
-      def param_styles
-        @css_styles ||= @@input_styles.map do |input_name, styles|
-          styles.map { |s| "[data-param-input=#{input_name}] #{s}" }.join("\n")
-        end.join("\n")
-      end
-
-      def self.add_styles(input, styles)
-        @@input_styles = {} unless defined?(@@input_styles)
-        @@input_styles[input] ||= styles
-      end
-
-      protected
-
-      def alpine_component
-        "paramsEditorComponent"
-      end
-    end
-  end
-end

data/app/components/lookbook/params/field/component.css

@@ -1,76 +0,0 @@
-@layer components {
-  [data-component="params-editor"] {
-    table:not(.linear) {
-      thead {
-        tr {
-          @apply border-b border-lookbook-divider;
-        }
-
-        th {
-          @apply font-semibold py-4 px-4 align-middle text-left;
-        }
-
-        th.param-label {
-          width: 18%;
-        }
-
-        th.param-input {
-          width: 45%;
-        }
-      }
-
-      tbody {
-        tr + tr td {
-          @apply border-t border-lookbook-divider;
-        }
-
-        td {
-          @apply py-4 px-4 align-middle;
-        }
-
-        td.param-label {
-          @apply font-semibold;
-        }
-
-        .param-input-wrapper {
-          min-height: 38px;
-        }
-      }
-    }
-  }
-
-  [data-component="params-editor"] {
-    table.linear {
-      table,
-      tr,
-      td {
-        display: block;
-      }
-
-      thead,
-      th {
-        display: none;
-      }
-
-      tr:not(:last-child) {
-        @apply border-b border-lookbook-divider;
-      }
-
-      tr {
-        @apply space-y-3 py-4;
-      }
-
-      td {
-        @apply px-4 align-middle;
-      }
-
-      td.param-label {
-        @apply font-semibold;
-      }
-
-      td.param-description-empty {
-        @apply hidden;
-      }
-    }
-  }
-}

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

@@ -1,27 +0,0 @@
-<%= render_component_tag :tr, "@keydown.stop": true do %>  
-  <td class="param-label">
-    <label for="param-<%= param.name %>">
-      <span class="mr-0.5"><%== param.label %></span>
-      <% if param.hint.present? %>
-        <span x-data="tooltipComponent" class="inline-block cursor-help relative top-[2px]">
-          <%= icon :help_circle, size: 3.5, class: "opacity-40 hover:opacity-100 transition" %>
-          <div class="hidden" x-ref="tooltip">
-            <%= param.hint %>
-          </div>
-        </span>
-      <% end %>
-    </label>
-  </td>
-  <td class="param-description <%= "param-description-empty" unless param.description %>">
-    <% if param.description %>
-      <p class="opacity-70"><%= param.description %></p>
-    <% else %>
-      <p class="italic opacity-40">&mdash;</p>
-    <% end %>
-  </td>
-  <td class="param-input">
-    <div class="param-input-wrapper">
-      <%= rendered_input %>
-    </div>
-  </td>
-<% end %>

data/app/components/lookbook/params/field/component.js

@@ -1,7 +0,0 @@
-export default function paramsFieldComponent() {
-  return {
-    get isNarrowLayout() {
-      return this.narrow || false;
-    },
-  };
-}

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

@@ -1,46 +0,0 @@
-module Lookbook
-  module Params
-    class Field::Component < Lookbook::BaseComponent
-      attr_reader :param, :rendered_input
-
-      def initialize(param:, index:, **html_attrs)
-        @param = param
-        @index = index
-        @rendered_input = nil
-        super(**html_attrs)
-      end
-
-      def before_render
-        styles, html = StylesExtractor.call(render_input)
-        Editor::Component.add_styles(param.input, styles)
-
-        escaped_value = json_escape(param.value.to_s).gsub("\n", '\n')
-        wrapper_attrs = {
-          data: {"param-input": param.input},
-          "x-data": "paramsInputComponent({name: \"#{param.name}\", value: \"#{escaped_value}\"})"
-        }
-        @rendered_input = tag.div(**wrapper_attrs) { html.html_safe }
-      end
-
-      protected
-
-      def render_input
-        input_options = param.input_options.to_h
-        input_options[:id] = "param-#{param.name}"
-
-        render(param.input_partial,
-          name: param.name,
-          input: param.input,
-          value: param.value.to_s,
-          value_type: param.value_type,
-          value_default: param.value_default,
-          input_options: input_options.except(:choices, :opts),
-          choices: input_options[:choices])
-      end
-
-      def alpine_component
-        "paramsFieldComponent"
-      end
-    end
-  end
-end

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

@@ -1,25 +0,0 @@
-@layer components {
-  [data-component="prose"] {
-    @apply font-prose;
-
-    /* letter-spacing: -0.015em !important; */
-
-    [data-component="code"] {
-      @apply border border-lookbook-divider rounded-md;
-    }
-
-    [data-component="embed"],
-    [data-component="code"],
-    [data-lookbook-embed] {
-      @apply my-8;
-    }
-
-    [data-lookbook-embed] {
-      @apply rounded-md;
-    }
-  }
-
-  #page [data-component="prose"] h2 {
-    @apply border-b border-lookbook-divider pb-3;
-  }
-}

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

@@ -1,8 +0,0 @@
-<%= render_component_tag class: "
-    prose #{size_class}
-    text-lookbook-prose-text bg-lookbook-prose-bg prose-a:text-lookbook-prose-link
-    prose-headings:font-semibold
-    prose-h1:font-bold
-  " do %>
-  <%== rendered_content %>
-<% end %>

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

@@ -1,24 +0,0 @@
-module Lookbook
-  class Prose::Component < Lookbook::BaseComponent
-    def initialize(size: :sm, markdown: true, **html_attrs)
-      @size = size
-      @markdown = markdown
-      super(**html_attrs)
-    end
-
-    def rendered_content
-      @markdown ? MarkdownRenderer.call(content.strip_heredoc) : helpers.raw(content)
-    end
-
-    def size_class
-      case @size
-      when :sm
-        "prose-sm"
-      when :lg
-        "prose-lg"
-      else
-        "prose-sm lg:prose-base"
-      end
-    end
-  end
-end

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

@@ -1,13 +0,0 @@
-<%= render_component_tag class: "grid h-full w-full", "x-bind": "bindings.root", "x-effect": "initSplit" do %>
-  <% panes.each.with_index(1) do |pane, i| %>
-    <%= pane %>
-    <% if i < panes.size %>
-      <div class="split-layout-gutter bg-lookbook-divider relative z-50" x-init="registerGutter">
-        <div class="absolute z-10 bg-transparent hover:bg-lookbook-draggable-hint transition-all" x-bind:class="{
-          'w-[9px] h-full -translate-x-1/2 cursor-[col-resize] split-layout-gutter-vertical': vertical,
-          'h-[9px] w-full -translate-y-1/2 cursor-[row-resize] split-layout-gutter-horizontal': horizontal
-        }"></div>
-      </div>
-    <% end %>
-  <% end %>
-<% end %>

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

@@ -1,151 +0,0 @@
-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

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

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

@@ -1,5 +0,0 @@
-<%= 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

@@ -1,25 +0,0 @@
-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

@@ -1,20 +0,0 @@
-module Lookbook
-  class TabPanels::Component < Lookbook::BaseComponent
-    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

@@ -1,8 +0,0 @@
-<%= render_component_tag :section,
-  "x-ref": @name,
-  "data-tab-panel": @name,
-  cloak: true,
-  class: "h-full",
-  ":class": "{ hidden: !isActive($el) }" do %>
-    <%== content %>
-<% end %>

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

@@ -1,8 +0,0 @@
-module Lookbook
-  class TabPanels::Panel::Component < Lookbook::BaseComponent
-    def initialize(name:, **html_attrs)
-      @name = name
-      super(**html_attrs)
-    end
-  end
-end

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

@@ -1,8 +0,0 @@
-@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

@@ -1,20 +0,0 @@
-<%= 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`}">
-    <%= lookbook_render :icon_button, icon: :chevrons_right, "x-show": "visibleTabsCount > 0" %>
-    <%= lookbook_render :icon_button, icon: :menu, class: "-ml-3", "x-show": "visibleTabsCount === 0" %>
-  </div>
-  <div class="hidden">
-    <div x-ref="tabsDropdown" x-cloak>
-      <%= safe_join(dropdown_tabs) %>
-    </div>
-  </div>
-<% end %>

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

@@ -1,119 +0,0 @@
-import { debounce } from "throttle-debounce";
-import tippy from "~/assets/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 this.$refs.tabs ? 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(() => {
-        if (this.$root.parentElement.offsetWidth === this.$root.offsetWidth) {
-          this.visibleTabsCount = this.tabs.length;
-        }
-
-        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.tabs[0], true);
-
-        this.parentObserver = observeSize(
-          this.$root.parentElement,
-          debounce(10, this.handleResize.bind(this))
-        );
-
-        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, initial = false) {
-      this.store.activeTab = this._getRef(el);
-      dropdown.hide();
-      if (!initial) {
-        this.$dispatch("tabs:change", { tabs: this });
-      }
-    },
-
-    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;
-    },
-  };
-}