lookbook 0.9.1 → 1.0.0.beta.0

data/app/components/lookbook/code/highlight_github_light.css

@@ -0,0 +1,217 @@
+@layer components {
+  .theme-github-light {
+    @apply bg-white;
+
+    & .highlight {
+      & .hll {
+        background-color: #f8f8f8;
+        border: 1px solid #ccc;
+        padding: 6px 10px;
+        border-radius: 3px;
+      }
+      & .c {
+        color: #999988;
+        font-style: italic;
+      }
+      & .err {
+        /* color: #a61717;
+        background-color: #e3d2d2; */
+      }
+      & .k {
+        font-weight: bold;
+      }
+      & .o {
+        font-weight: bold;
+      }
+      & .cm {
+        color: #999988;
+        font-style: italic;
+      }
+      & .cp {
+        color: #999999;
+        font-weight: bold;
+      }
+      & .c1 {
+        color: #999988;
+        font-style: italic;
+      }
+      & .cs {
+        color: #999999;
+        font-weight: bold;
+        font-style: italic;
+      }
+      & .gd {
+        color: #000000;
+        background-color: #ffdddd;
+      }
+      & .gd .x {
+        color: #000000;
+        background-color: #ffaaaa;
+      }
+      & .ge {
+        font-style: italic;
+      }
+      & .gr {
+        color: #aa0000;
+      }
+      & .gh {
+        color: #999999;
+      }
+      & .gi {
+        color: #000000;
+        background-color: #ddffdd;
+      }
+      & .gi .x {
+        color: #000000;
+        background-color: #aaffaa;
+      }
+      & .go {
+        color: #888888;
+      }
+      & .gp {
+        color: #555555;
+      }
+      & .gs {
+        font-weight: bold;
+      }
+      & .gu {
+        color: #800080;
+        font-weight: bold;
+      }
+      & .gt {
+        color: #aa0000;
+      }
+      & .kc {
+        font-weight: bold;
+      }
+      & .kd {
+        font-weight: bold;
+      }
+      & .kn {
+        font-weight: bold;
+      }
+      & .kp {
+        font-weight: bold;
+      }
+      & .kr {
+        font-weight: bold;
+      }
+      & .kt {
+        color: #445588;
+        font-weight: bold;
+      }
+      & .m {
+        color: #009999;
+      }
+      & .s {
+        color: #dd1144;
+      }
+      & .n {
+        color: #333333;
+      }
+      & .na {
+        color: teal;
+      }
+      & .nb {
+        color: #0086b3;
+      }
+      & .nc {
+        color: #445588;
+        font-weight: bold;
+      }
+      & .no {
+        color: teal;
+      }
+      & .ni {
+        color: purple;
+      }
+      & .ne {
+        color: #990000;
+        font-weight: bold;
+      }
+      & .nf {
+        color: #990000;
+        font-weight: bold;
+      }
+      & .nn {
+        color: #555555;
+      }
+      & .nt {
+        color: navy;
+      }
+      & .nv {
+        color: teal;
+      }
+      & .ow {
+        font-weight: bold;
+      }
+      & .w {
+        color: #bbbbbb;
+      }
+      & .mf {
+        color: #009999;
+      }
+      & .mh {
+        color: #009999;
+      }
+      & .mi {
+        color: #009999;
+      }
+      & .mo {
+        color: #009999;
+      }
+      & .sb {
+        color: #dd1144;
+      }
+      & .sc {
+        color: #dd1144;
+      }
+      & .sd {
+        color: #dd1144;
+      }
+      & .s2 {
+        color: #dd1144;
+      }
+      & .se {
+        color: #dd1144;
+      }
+      & .sh {
+        color: #dd1144;
+      }
+      & .si {
+        color: #dd1144;
+      }
+      & .sx {
+        color: #dd1144;
+      }
+      & .sr {
+        color: #009926;
+      }
+      & .s1 {
+        color: #dd1144;
+      }
+      & .ss {
+        color: #990073;
+      }
+      & .bp {
+        color: #999999;
+      }
+      & .vc {
+        color: teal;
+      }
+      & .vg {
+        color: teal;
+      }
+      & .vi {
+        color: teal;
+      }
+      & .il {
+        color: #009999;
+      }
+      & .gc {
+        color: #999;
+        background-color: #eaf2f5;
+      }
+    }
+  }
+}

data/app/components/lookbook/component.rb

@@ -0,0 +1,41 @@
+module Lookbook
+  class Component < ViewComponent::Base
+    include Lookbook::ComponentHelper
+
+    def initialize(alpine_data: [], **html_attrs)
+      @alpine_data ||= alpine_data
+      @html_attrs = html_attrs
+      @html_attrs[:class] = {"#{@html_attrs[:class]}": true} if @html_attrs[:class].is_a? String
+    end
+
+    def render_component_tag(tag = :div, **attrs, &block)
+      merged_classes = class_names(attrs[:class], @html_attrs[:class])
+      merge_attrs = @html_attrs.except(:class).deep_merge(attrs.except(:class))
+      render Lookbook::TagComponent.new(tag: tag,
+        name: component_name,
+        **merge_attrs,
+        x_data: prepare_alpine_data(attrs[:x_data]),
+        class: merged_classes), &block
+    end
+
+    def component_name
+      self.class.name.chomp("::Component").delete_prefix("Lookbook::").underscore.tr("/", "_").tr("_", "-")
+    end
+
+    protected
+
+    attr_reader :alpine_data
+
+    def alpine_component
+      nil
+    end
+
+    def prepare_alpine_data(x_data = nil)
+      alpine_component_name = x_data || @html_attrs&.dig(:x_data) || alpine_component
+      if alpine_component_name.present?
+        args = Array.wrap(alpine_data)
+        args.any? ? "#{alpine_component_name}(#{safe_join(args).gsub("&quot;", "'").tr("\"", "'")})" : alpine_component_name
+      end
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+<%= render_component :button,
+  name: "copy-button",
+  **@button_attrs,
+  x_data: prepare_alpine_data,
+  "@click.prevent": "copyToClipboard" do |button| %>
+  <% button.icon name: @icon, size: icon_size, x_show: "!copied", cloak: true %>
+  <%= render_component :icon, name: :check, size: icon_size, class: "text-green-500", x_show: "copied", cloak: true  %>
+  <% if content %>
+    <div x-ref="copyTarget" class="hidden"><%== content %></div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,16 @@
+import { initClipboard } from "~/app/assets/lookbook/js/components/clipboard";
+import buttonComponent from "@components/button/component";
+
+export default function copyButtonComponent() {
+  const button = buttonComponent();
+  return {
+    ...button,
+
+    copied: false,
+
+    init() {
+      button.init.bind(this)();
+      initClipboard(this);
+    },
+  };
+}

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

@@ -0,0 +1,23 @@
+module Lookbook
+  class CopyButton::Component < Lookbook::Component
+    def initialize(target: nil, icon: :code, **attrs)
+      @icon = icon
+      @target = target
+      @button_attrs = attrs
+    end
+
+    def icon_size
+      Lookbook::Button::Component::ICON_SIZES[@size]
+    end
+
+    protected
+
+    def alpine_data
+      content ? nil : @target.to_json
+    end
+
+    def alpine_component
+      "copyButtonComponent"
+    end
+  end
+end

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

@@ -0,0 +1,10 @@
+<%= render_component_tag class: "flex items-center text-xs font-mono space-x-1 transition",
+  ":class":"{'!opacity-100': resizing}",
+  "@viewport:resize-start.window": "resizing = true",
+  "@viewport:resize-complete.window": "resizing = false",
+  "@dom:update-start.window": "tearDown",
+  "@dom:update-complete.window": "createObserver" do %>
+    <span x-text="`${width}px`"></span>
+    <span class="opacity-70">x</span>
+    <span x-text="`${height}px`"></span>
+<% end %>

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

@@ -0,0 +1,30 @@
+import { observeSize } from "@helpers/layout";
+
+export default function dimensionsDisplayComponent(targetSelector) {
+  return {
+    width: 0,
+    height: 0,
+    resizing: false,
+
+    init() {
+      const target = document.querySelector(targetSelector);
+      this.width = Math.round(target.clientWidth);
+      this.height = Math.round(target.clientHeight);
+      this.createObserver();
+    },
+
+    createObserver() {
+      this.observer = observeSize(
+        document.querySelector(targetSelector),
+        ({ width, height }) => {
+          this.width = width;
+          this.height = height;
+        }
+      );
+    },
+
+    tearDown() {
+      this.observer.disconnect();
+    },
+  };
+}

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

@@ -0,0 +1,18 @@
+module Lookbook
+  class DimensionsDisplay::Component < Lookbook::Component
+    def initialize(target:, **html_attrs)
+      @target = target
+      super(**html_attrs)
+    end
+
+    protected
+
+    def alpine_data
+      @target.to_json
+    end
+
+    def alpine_component
+      "dimensionsDisplayComponent"
+    end
+  end
+end

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

@@ -0,0 +1,50 @@
+<% if @example.present? %>
+  <%= render_component_tag class: "not-prose border-b border-lookbook-divider rounded-sm overflow-hidden", "@navigation:start.window": "cleanup" do %>
+
+    <%= render_component :toolbar, class: "border border-b-0 border-lookbook-divider" do |toolbar| %>
+      <% toolbar.section padded: true do %>
+        <h3>
+          <%= @example.preview.label %> (<%= @example.label %>)
+        </h3>
+      <% end %>
+        <% toolbar.section align: :right, divide: :left do %>
+          <%= render_component :button_group do |group| %>
+          <% group.button icon: :eye,
+            href: helpers.lookbook.inspect_path(@example.path, @params),
+            tooltip: "View in Inspector" %>
+          <% group.button icon: :external_link,
+            href: helpers.lookbook.inspect_path(@example.path, @params),
+            tooltip: "Open in new window",
+            target: "_blank" %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <div
+      x-show="tab === 'preview'"
+      @viewport:loaded="loadResizer"
+      @dom:update-complete="loadResizer"
+      @viewport:resize-progress="resizeIframe"
+      @viewport:resize-complete="resizeIframe"> 
+      <%= render_component :viewport,
+        src: helpers.lookbook.preview_path(@example.path, @params.merge(lookbook_embed: true)),
+        alpine_data: "store",
+        resize_height: false,
+        max_height: @max_height,
+        class: "mb-[-2px]" %>
+    </div>
+
+  <% end %>
+<% else %>
+<%= render_component_tag class: "bg-white flex flex-col items-center justify-center border-2 border-dashed border-gray-200 p-6 rounded-md not-prose" do %>
+  <div class="px-4 text-center">
+    <%= render_component :icon, name: :alert_triangle, size: 6, class: "text-red-300 mx-auto" %>
+    <div class="mt-2 max-w-xs">
+      <h5 class="text-base">Preview not found</h5>
+      <p class="mt-1 opacity-50 text-sm">
+        The preview may have been renamed or deleted
+      </p>
+    </div>
+  </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,39 @@
+import "iframe-resizer/js/iframeResizer";
+
+export default function embedComponent(id, embedStore) {
+  if (!embedStore[id]) {
+    embedStore[id] = { width: "100%", height: "100%" };
+  }
+
+  return {
+    tab: "preview",
+
+    resizer: null,
+
+    get store() {
+      return embedStore[id];
+    },
+
+    async loadResizer() {
+      window.iFrameResize(
+        {
+          heightCalculationMethod: "lowestElement",
+        },
+        this.$el.querySelector("iframe")
+      );
+      this.resizer = this.$el.querySelector("iframe").iFrameResizer;
+      this.resizer.resize();
+      this.$dispatch("embed:resizer-loaded", { resizer: this.resizer });
+    },
+
+    resizeIframe() {
+      this.$el.querySelector("iframe").iFrameResizer.resize();
+    },
+
+    cleanup() {
+      if (this.resizer) {
+        this.resizer.removeListeners();
+      }
+    },
+  };
+}

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

@@ -0,0 +1,22 @@
+module Lookbook
+  class Embed::Component < Lookbook::Component
+    def initialize(id:, example:, params: {}, opts: {}, max_height: nil, **html_attrs)
+      @id = id
+      @example = example
+      @params = params
+      @opts = opts
+      @max_height = max_height
+      super(**html_attrs)
+    end
+
+    protected
+
+    def alpine_data
+      [@id.to_json, "$store.pages.embeds"].join(",")
+    end
+
+    def alpine_component
+      "embedComponent"
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+<%= render_component_tag do %>
+  <div class="relative">
+  <input
+    type="text"
+    class="form-input text-sm"
+    placeholder="<%== @placeholder %>"
+    x-ref="input"
+    x-model="<%= @model %>"
+    x-effect="$dispatch('filter:change', { text, filter: this })"
+    @keydown.esc.stop="clear"
+    @keydown.f.stop.prevent.window="focus"
+    @keydown.stop>
+    <button class="text-lookbook-button-text hover:text-lookbook-button-text-hover focus:ring-0 focus:outline-none absolute top-1/2 right-3 -translate-y-1/2" @click="clear" :class="{hidden: !active}">
+      <%= render_component :icon, name: :x, size: 3 %>
+    </button>
+</div>
+<% end %>

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

@@ -0,0 +1,21 @@
+export default function filterComponent(store) {
+  return {
+    focussed: false,
+    get active() {
+      return store.active;
+    },
+    get text() {
+      return store.text;
+    },
+    clear() {
+      if (store.raw === "") {
+        this.$refs.input.blur();
+      } else {
+        store.raw = "";
+      }
+    },
+    focus() {
+      this.$refs.input.focus();
+    },
+  };
+}

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

@@ -0,0 +1,15 @@
+module Lookbook
+  class Filter::Component < Lookbook::Component
+    def initialize(store: nil, placeholder: "Type to filter&hellip;", **html_attrs)
+      @model = store.nil? ? "{}" : "#{store}.raw"
+      @placeholder = placeholder
+      super(alpine_data: store, **html_attrs)
+    end
+
+    protected
+
+    def alpine_component
+      "filterComponent"
+    end
+  end
+end

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

@@ -0,0 +1,79 @@
+<%= render_component_tag :header do %>
+  <%= render_component :toolbar, class: "!bg-lookbook-header !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
+    <% toolbar.section padded: true do %>
+      <% if branding.present? %>
+        <a
+          <% if landing_path %>href="<%= landing_path %>"<% end %>    
+          class="text-sm truncate uppercase font-black tracking-wider text-lookbook-branding-text">
+          <%= branding %>
+        </a>
+      <% end %>
+    <% end %>
+
+    <% toolbar.section padded: false, align: :right, class: "flex items-center" do %>
+      <%= render_component :button_group do |group| %>
+        <% if Rails.env.development? %>
+          <% group.button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text" do |button| %>
+            <% button.dropdown do %>
+              <%= tag.div class: "divide-y divide-lookbook-divider min-w-[180px]" do %>
+                <div class="px-3 py-3">
+                  <ul class="space-y-2 opacity-80">
+                    <li>
+                      <a href="#"
+                        class="text-xs flex items-center hover:underline"
+                        x-data="clipboardComponent"
+                        @click.prevent.stop="copyToClipboard('#debug-data')">
+                        <span x-show="copied" x-cloak>
+                          <%= render_component :icon,
+                            name: :check,
+                            size: 2.5,
+                            class: "text-green-600" %>
+                        </span>
+                        <span x-show="!copied">
+                          <%= render_component :icon,
+                            name: :clipboard,
+                            size: 2.5 %>
+                        </span>
+                        <span class="ml-2">Copy debug data</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="#"
+                        class="text-xs flex items-center hover:underline"
+                        @click.stop="localStorage.clear(); window.location.reload();">
+                        <%= render_component :icon, name: :refresh_cw, size: 2.5 %>
+                        <span class="ml-2">Reset local storage</span>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <div class="flex items-center text-xs px-3 py-2 bg-zinc-50">
+                  <span class="opacity-70 mr-1">Lookbook</span>
+                  <span class="mr-6">v<%= Lookbook::VERSION %></span>
+                  <div class="flex items-center space-x-2">
+                    <a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70" title="Documentation">
+                      <%= render_component :icon, name: :book, size: 3 %>
+                    </a>
+                    <a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70" title="Github">
+                      <%= render_component :icon, name: :github, size: 3 %>
+                    </a>
+                  </div>
+                </div>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+        <% group.button icon: :menu,
+          "@click.stop": "toggleSidebar",
+          x_show: "$store.layout.mobile && sidebarHidden",
+          class: "!text-lookbook-header-text" %>
+        <% group.button icon: :x,
+          "@click.stop": "toggleSidebar",
+          x_show: "$store.layout.mobile && !sidebarHidden",
+          "@keydown.esc.window": "closeMobileSidebar",
+          class: "!text-lookbook-header-text" %>
+      <% end %>    
+    <% end %>
+  <% end %>
+  
+<% end %>

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

@@ -0,0 +1,9 @@
+module Lookbook
+  class Header::Component < Lookbook::Component
+    renders_one :branding
+
+    def landing_path
+      helpers.landing_path if defined? helpers.landing_path
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+@layer components {
+  [data-component="icon"] {
+    @apply transition block flex-none leading-none;
+
+    svg {
+      @apply w-full h-full stroke-current stroke-2 fill-transparent;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+<%= render_component_tag :i, style: "height: #{size_rems}; width: #{size_rems}" do %>
+  <svg>
+    <use :href="`/lookbook-assets/feather-sprite.svg#${iconName}`" x-cloak />
+  </svg>
+<% end %>

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

@@ -0,0 +1,5 @@
+export default function iconComponent(iconName) {
+  return {
+    iconName,
+  };
+}

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

@@ -0,0 +1,23 @@
+module Lookbook
+  class Icon::Component < Lookbook::Component
+    def initialize(name:, size: 4, **html_attrs)
+      @icon_name = name.is_a?(Symbol) ? name.to_s.tr("_", "-").to_json : name
+      @size = size || 4
+      super(**html_attrs)
+    end
+
+    def size_rems
+      "#{@size * 0.25}rem"
+    end
+
+    protected
+
+    def alpine_data
+      @icon_name
+    end
+
+    def alpine_component
+      "iconComponent"
+    end
+  end
+end