lookbook 0.9.3 → 1.0.0.beta.0

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

@@ -0,0 +1,33 @@
+<%= render_component_tag class: "flex flex-col overflow-hidden h-full",
+  "@filter:change.stop": "filter($event.detail.text)" do %>
+  
+  <% if label.present? %>
+    <%= render_component :toolbar do |toolbar| %>
+      <% toolbar.section padded: true do %>
+        <h4 class="pt-1"><%= label %></h4>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <% if filter && items.any? %>
+    <div class="p-2 pb-0">
+      <%= filter %>
+    </div>
+  <% end %>
+
+  <div class="overflow-auto">
+    <% if items.any? %>
+      <ul class="py-2" x-ref="items" x-show="!empty" x-cloak>
+        <%= safe_join(items) %>
+      </ul>
+      <div class="p-4 text-center" x-show="empty" x-cloak>
+        <h4 class="opacity-50 italic">No matching <%= label.downcase %>.</h4>
+      </div>
+    <% else %>
+      <div class="p-4 text-center">
+        <h4 class="opacity-50 italic">No <%= label.downcase %> available.</h4>
+      </div>
+    <% end %>
+  </div>
+
+<% end %>

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

@@ -0,0 +1,52 @@
+export default function navComponent(store) {
+  return {
+    empty: false,
+
+    children: [],
+
+    init() {
+      this.children = this.$refs.items
+        ? Array.from(this.$refs.items.children)
+        : [];
+    },
+
+    isOpen(id) {
+      return store.open.includes(id);
+    },
+
+    setOpen(id) {
+      store.open.push(id);
+    },
+
+    setClosed(id) {
+      const index = store.open.indexOf(id);
+      if (index > -1) {
+        store.open.splice(index, 1);
+      }
+    },
+
+    toggleOpen(id) {
+      this.isOpen(id) ? this.setClosed(id) : this.setOpen(id);
+    },
+
+    async filter(text) {
+      this.debug(`Filter text: ${text}`);
+
+      await this.$nextTick();
+      const filteredStates = await Promise.all(
+        this.children.map(async (child) => {
+          const data = Alpine.$data(child);
+          await data.filter(text);
+          return data.filteredOut;
+        })
+      );
+
+      const matchedChildCount = filteredStates.filter((s) => !s).length;
+      this.empty = matchedChildCount === 0;
+
+      this.debug(
+        `Children matching filter: ${matchedChildCount}/${this.children.length}`
+      );
+    },
+  };
+}

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

@@ -0,0 +1,37 @@
+module Lookbook
+  class Nav::Component < Lookbook::Component
+    renders_one :filter, Lookbook::Filter::Component
+
+    def initialize(
+      collection:,
+      label: nil,
+      collapse_singles: false,
+      **attrs
+    )
+      @collection = collection.as_tree
+      @label = label
+      @item_args = {
+        collapse_singles: collapse_singles
+      }
+      super(**attrs)
+    end
+
+    def label
+      @label || @collection.label
+    end
+
+    def items
+      @collection.non_empty_items.map do |item|
+        render Lookbook::Nav::Item::Component.new item,
+          depth: 1,
+          **@item_args
+      end
+    end
+
+    protected
+
+    def alpine_component
+      "navComponent"
+    end
+  end
+end

data/app/components/lookbook/nav/item/component.html.erb

@@ -0,0 +1,23 @@
+<%= render_component_tag :li, id: @item.id, class: "list-none", "x-show": "!filteredOut", cloak: true do %>
+  
+  <%= render_tag href.present? ? :a : :div,
+    href: href,
+    class: "flex items-center py-1 select-none cursor-pointer text-lookbook-nav-text hover:bg-lookbook-nav-item-hover",
+    style: "padding-left: #{left_pad}px",
+    x_bind: "bindings.#{href.present? ? "link" : "toggle"}" do %>
+    <div class="relative flex items-center">
+      <%= render_component :icon, name: nil,
+        size: 3,
+        class: "mr-1 text-lookbook-nav-toggle absolute -left-4",
+        x_effect: "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
+      <%= render_component :icon, name: nav_icon(@item), size: 3.5, class: "mr-1.5 text-lookbook-nav-icon" %>
+      <span><%= label %></span>
+    </div>
+  <% end %>
+  
+  <% if children? %>
+    <ul x-ref="items" x-show="open" x-cloak>
+      <%= safe_join(children) %>
+    </ul>
+  <% end %>  
+<% end %>

data/app/components/lookbook/nav/item/component.js

@@ -0,0 +1,66 @@
+export default function navItemComponent({ id, matchers }) {
+  return {
+    filteredOut: false,
+
+    get open() {
+      return this.isCollection && this.isOpen(id);
+    },
+
+    get active() {
+      if (this.$refs.link) {
+        return (
+          this.location &&
+          this.location.pathname === this.$refs.link.getAttribute("href")
+        );
+      }
+      return false;
+    },
+
+    get children() {
+      return this.$refs.items ? Array.from(this.$refs.items.children) : [];
+    },
+
+    get isCollection() {
+      return !this.$refs.link;
+    },
+
+    toggle() {
+      this.toggleOpen(id);
+    },
+
+    async filter(text) {
+      if (this.isCollection) {
+        this.filteredOut = true;
+        this.children.forEach(async (child) => {
+          const data = Alpine.$data(child);
+          await data.filter(text);
+          if (!data.filteredOut) {
+            this.filteredOut = false;
+          }
+        });
+      } else {
+        this.filteredOut = !this.match(text);
+      }
+      return this;
+    },
+
+    match(text) {
+      if (text.length) {
+        const matched = (matchers || []).map((m) => m.includes(text));
+        return matched.filter((m) => m).length;
+      }
+      return true;
+    },
+
+    bindings: {
+      toggle: {
+        ["@click.stop"]: "toggle",
+        ["x-ref"]: "toggle",
+      },
+      link: {
+        [":class"]: "{'!bg-lookbook-nav-item-active':active}",
+        ["x-ref"]: "link",
+      },
+    },
+  };
+}

data/app/components/lookbook/nav/item/component.rb

@@ -0,0 +1,84 @@
+module Lookbook
+  class Nav::Item::Component < Lookbook::Component
+    ICONS = {
+      page: :file,
+      page_collection: :folder,
+      preview_collection: :folder,
+      preview: :layers,
+      example: :eye,
+      group: :eye,
+      collection: :folder
+    }.freeze
+
+    delegate :label, to: :@item
+
+    def initialize(
+      item,
+      depth: 1,
+      collapse_singles: false,
+      **html_attrs
+    )
+      @item = item
+      @depth = depth
+      @collapse_singles = collapse_singles
+      super(**html_attrs)
+    end
+
+    def left_pad
+      ((@depth - 1) * 12) + 24
+    end
+
+    def href
+      if collapsed?
+        item.url_path
+      elsif !collection?
+        item.url_path
+      end
+    end
+
+    def children
+      @children ||= if collection? && !collapsed?
+        item.non_empty_items.map do |item|
+          render Lookbook::Nav::Item::Component.new item,
+            depth: (@depth + 1),
+            collapse_singles: @collapse_singles
+        end
+      else
+        []
+      end
+    end
+
+    def item
+      collapsed? ? @item.first : @item
+    end
+
+    def nav_icon(entity)
+      ICONS[entity.type] || :file
+    end
+
+    def collection?
+      @item.is_a? Lookbook::Collection
+    end
+
+    def children?
+      children.any? if collection? && !collapsed?
+    end
+
+    def collapsed?
+      @collapse_singles == true && collection? && @item.collapsible? && @item.one?
+    end
+
+    protected
+
+    def alpine_data
+      {
+        id: @item.id,
+        matchers: item.is_a?(Lookbook::Collection) ? nil : item.matchers
+      }.to_json
+    end
+
+    def alpine_component
+      "navItemComponent"
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<%= render_component_tag do %>
+  <%= safe_join(fields) %>
+<% end %>

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

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

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

@@ -0,0 +1,11 @@
+module Lookbook
+  class ParamsEditor::Component < Lookbook::Component
+    renders_many :fields, Lookbook::ParamsEditor::Field::Component
+
+    protected
+
+    def alpine_component
+      "paramsEditorComponent"
+    end
+  end
+end

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

@@ -0,0 +1,50 @@
+<%= render_component_tag class: "px-4 py-3" do %>
+  <div class="flex items-start max-w-[800px]" :class="isNarrowLayout && '!block'">
+    <label
+      for="param-<%= @name %>"
+      class="block font-bold cursor-pointer flex-none py-2 w-[140px] truncate pr-2">
+      <%= label %>
+    </label>
+    
+    <div class="flex-grow">
+      <% if field_type == "text" %>
+      
+        <input
+          class="form-input"
+          value="<%= value %>"
+          type="<%= input_type %>"
+          x-bind="bindings.input || {}">
+
+      <% elsif field_type == "textarea" %>
+
+        <textarea
+          class="form-input"
+          rows="4"
+          x-bind="bindings.input || {}"><%= value %></textarea>
+
+      <% elsif field_type == "select" %>
+
+        <select
+          class="form-input"
+          x-bind="bindings.input || {}"
+          x-model="value">
+          <%= options_for_select(@options || [], value) %>
+        </select>
+
+      <% elsif field_type == "toggle" %>
+
+        <button type="button"
+          class="<%= value == true ? "bg-lookbook-input-toggle-active" : "bg-lookbook-input-toggle" %> relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-input-border-focus"
+          role="switch"
+          @click.stop="value = !value">
+          <span
+            aria-hidden="true"
+            class="<%= value == true ? "translate-x-5" : "translate-x-0" %>  pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200"
+          ></span>
+        </button>
+
+      <% end %>
+    </div>
+  </div>
+<% end %>
+

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

@@ -0,0 +1,36 @@
+export default function paramsEditorFieldComponent({ name, value }) {
+  return {
+    name,
+    value,
+
+    init() {
+      this.$watch("value", () => this.update());
+    },
+
+    update() {
+      if (this.validate()) {
+        const searchParams = new URLSearchParams(window.location.search);
+        searchParams.set(this.name, this.value);
+        const path = location.href.replace(location.search, "");
+        this.navigateTo(`${path}?${searchParams.toString()}`);
+      }
+    },
+
+    validate() {
+      return this.$root.reportValidity ? this.$root.reportValidity() : true;
+    },
+
+    get isNarrowLayout() {
+      return this.narrow || false;
+    },
+
+    bindings: {
+      input: {
+        [":id"]: "`param-${name}`",
+        ["x-ref"]: "input",
+        ["x-model.debounce.200"]: "value",
+        ["@keydown.stop"]: true,
+      },
+    },
+  };
+}

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

@@ -0,0 +1,41 @@
+module Lookbook
+  class ParamsEditor::Field::Component < Lookbook::Component
+    def initialize(input:, name:, default: nil, value: nil, input_type: nil, type: nil, options: nil, **html_attrs)
+      @input = input
+      @name = name
+      @value = value
+      @default_value = default
+      @input_type = input_type
+      @type = type
+      @options = options
+      super(**html_attrs)
+    end
+
+    def label
+      @name.titleize
+    end
+
+    def value
+      val = @value.presence || @default_value
+      @type == "Boolean" ? val == "true" || val == true : val
+    end
+
+    def field_type
+      @input.to_s
+    end
+
+    def input_type
+      @input_type.nil? && field_type == "text" ? "text" : @input_type
+    end
+
+    protected
+
+    def alpine_data
+      "{name: '#{@name}', value: #{value.to_json}}"
+    end
+
+    def alpine_component
+      "paramsEditorFieldComponent"
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+@layer components {
+  [data-component="prose"] {
+    [data-component="code"] {
+      @apply border border-lookbook-divider rounded-md;
+    }
+
+    [data-component="embed"],
+    [data-component="code"] {
+      @apply my-8;
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+<%= render_component_tag class: "prose #{size_class} text-lookbook-prose-text bg-lookbook-prose prose-a:text-lookbook-prose-link" do %>
+  <%== rendered_content %>
+<% end %>

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

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

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

@@ -0,0 +1,13 @@
+<%= 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="bg-lookbook-divider relative" x-init="registerGutter">
+        <div class="absolute z-10 bg-transparent hover:bg-lookbook-draggable-hint transition-all" :class="{
+          'w-[9px] h-full -translate-x-1/2 cursor-[col-resize]': vertical,
+          'h-[9px] w-full -translate-y-1/2 cursor-[row-resize]': horizontal
+        }"></div>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

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/tabbed_content/component.html.erb

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