lookbook 0.2.0

data/app/assets/lookbook/css/tooltip_theme.css

@@ -0,0 +1,16 @@
+.tippy-box[data-theme~="lookbook"] {
+  @apply bg-indigo-500 text-white text-xs opacity-90;
+
+  &[data-placement^="top"] > .tippy-arrow::before {
+    border-top-color: theme("colors.indigo.500");
+  }
+  &[data-placement^="bottom"] > .tippy-arrow::before {
+    border-bottom-color: theme("colors.indigo.500");
+  }
+  &[data-placement^="left"] > .tippy-arrow::before {
+    border-left-color: theme("colors.indigo.500");
+  }
+  &[data-placement^="right"] > .tippy-arrow::before {
+    border-right-color: theme("colors.indigo.500");
+  }
+}

data/app/assets/lookbook/js/app.js

@@ -0,0 +1,47 @@
+import Alpine from "alpinejs";
+import Fern from "@ryangjchandler/fern";
+import Tooltip from "@ryangjchandler/alpine-tooltip";
+import Clipboard from "@ryangjchandler/alpine-clipboard";
+import split from "./split";
+import preview from "./preview";
+import observeSize from "./size_observer";
+import reloader from "./reloader";
+
+// Plugins
+
+Alpine.plugin(Fern);
+Alpine.plugin(Tooltip);
+Alpine.plugin(Clipboard);
+
+// Data
+
+Alpine.data("preview", preview);
+Alpine.data("sizeObserver", observeSize);
+Alpine.data("split", split);
+
+// Stores
+
+Alpine.store("app", { reflowing: false });
+Alpine.persistedStore("nav", {
+  width: 280,
+  filter: "",
+  open: {},
+  scrollTop: 0,
+  shouldDisplay(previewName) {
+    const cleanFilter = this.filter.replace(/\s/g, "");
+    return (
+      cleanFilter === "" || previewName.includes(cleanFilter.toLowerCase())
+    );
+  },
+});
+Alpine.persistedStore("preview", {});
+Alpine.persistedStore("inspector", {
+  height: 200,
+  active: "source",
+});
+
+// Init
+
+window.Alpine = Alpine;
+reloader(window.SOCKET_PATH).start();
+Alpine.start();

data/app/assets/lookbook/js/preview.js

@@ -0,0 +1,76 @@
+export default function preview() {
+  const app = Alpine.store("app");
+  const preview = Alpine.store("preview");
+  return {
+    init() {
+      this.root = this.$el;
+    },
+    onResize(e) {
+      const size =
+        this.resizeStartSize - (this.resizeStartPosition - e.pageX) * 2;
+      const parentSize = this.root.parentElement.clientWidth;
+      const percentSize = (Math.round(size) / parentSize) * 100;
+      const minWidth = (300 / parentSize) * 100;
+      preview.width = `${Math.min(Math.max(percentSize, minWidth), 100)}%`;
+    },
+    onResizeStart(e) {
+      app.reflowing = true;
+      this.onResize = this.onResize.bind(this);
+      this.onResizeEnd = this.onResizeEnd.bind(this);
+      this.resizeStartPosition = e.pageX;
+      this.resizeStartSize = this.root.clientWidth;
+      window.addEventListener("pointermove", this.onResize);
+      window.addEventListener("pointerup", this.onResizeEnd);
+    },
+    onResizeEnd(e) {
+      window.removeEventListener("pointermove", this.onResize);
+      window.removeEventListener("pointerup", this.onResizeEnd);
+      app.reflowing = false;
+    },
+    handle: {
+      ["@pointerdown"]: "onResizeStart",
+      ["@dblclick"]() {
+        if (preview.width === "100%" && preview.lastWidth) {
+          preview.width = preview.lastWidth;
+        } else {
+          preview.lastWidth = preview.width;
+          preview.width = "100%";
+        }
+      },
+    },
+  };
+}
+
+// export default function (dimension, store, { shrink = false, centered = false } = {}) {
+//   const position = (e) => (dimension == "height" ? e.pageY : e.pageX);
+//   const pane = {
+//     onResize(e) {
+//       let size =
+//         this.resizeStartSize -
+//         (shrink
+//           ? (this.resizeStartPosition - position(e)) * (centered ? 2 : 1)
+//           : (position(e) - this.resizeStartPosition) * (centered ? 2 : 1));
+//       const parentSize =
+//         dimension == "height"
+//           ? this.$el.parentElement.clientHeight
+//           : this.$el.parentElement.clientWidth;
+//       const percentSize = (Math.round(size) / parentSize) * 100;
+//       store[dimension] = `${Math.min(Math.max(percentSize, 0), 100)}%`;
+//     },
+//     onResizeStart(e) {
+//       Spruce.store("app").reflowing = true;
+//       this.resizeStartPosition = position(e);
+//       this.resizeStartSize = dimension == "height" ? this.$el.clientHeight : this.$el.clientWidth;
+//       this.onResize = this.onResize.bind(this);
+//       this.onResizeEnd = this.onResizeEnd.bind(this);
+//       window.addEventListener("pointermove", this.onResize);
+//       window.addEventListener("pointerup", this.onResizeEnd);
+//     },
+//     onResizeEnd() {
+//       Spruce.store("app").reflowing = false;
+//       window.removeEventListener("pointermove", this.onResize);
+//       window.removeEventListener("pointerup", this.onResizeEnd);
+//     },
+//   };
+//   return pane;
+// };

data/app/assets/lookbook/js/reloader.js

@@ -0,0 +1,28 @@
+import { createConsumer } from "@rails/actioncable";
+import debounce from "debounce";
+
+export default function (endpoint) {
+  const uid = (Date.now() + ((Math.random() * 100) | 0)).toString();
+  const consumer = createConsumer(`${endpoint}?uid=${uid}`);
+
+  return {
+    uid,
+    consumer,
+    start() {
+      const received = debounce(() => {
+        console.log("Lookbook files changed");
+        document.dispatchEvent(new CustomEvent("refresh"));
+      }, 300);
+
+      consumer.subscriptions.create("Lookbook::ReloadChannel", {
+        received,
+        connected() {
+          console.log("Lookbook websocket connected");
+        },
+        disconnected() {
+          console.log("Lookbook websocket disconnected");
+        },
+      });
+    },
+  };
+}

data/app/assets/lookbook/js/size_observer.js

@@ -0,0 +1,16 @@
+export default function () {
+  return {
+    observedWidth: 0,
+    observedHeight: 0,
+    init() {
+      const ro = new ResizeObserver((entries) => {
+        const rect = entries[0].contentRect;
+        this.observedWidth = Math.round(rect.width);
+        this.observedHeight = Math.round(rect.height);
+      });
+      ro.observe(this.$el);
+      this.observedWidth = Math.round(this.$el.clientWidth);
+      this.observedHeight = Math.round(this.$el.clientHeight);
+    },
+  };
+}

data/app/assets/lookbook/js/split.js

@@ -0,0 +1,26 @@
+import Split from "split-grid";
+
+export default function (props) {
+  const app = Alpine.store("app");
+  return {
+    init() {
+      Split({
+        [`${props.direction === "vertical" ? "row" : "column"}Gutters`]: [
+          { track: 1, element: this.$el },
+        ],
+        minSize: props.minSize,
+        writeStyle() {},
+        onDrag(dir, track, style) {
+          splits = style.split(" ").map((num) => parseInt(num));
+          props.onDrag(splits);
+        },
+        onDragStart() {
+          app.reflowing = true;
+        },
+        onDragEnd() {
+          app.reflowing = false;
+        },
+      });
+    },
+  };
+}

data/app/channels/lookbook/connection.rb

@@ -0,0 +1,11 @@
+module Lookbook
+  class Connection < ActionCable::Connection::Base
+    identified_by :uid
+
+    def connect
+      self.uid = request.params[:uid]
+      logger.add_tags(uid)
+      logger.info "connected to Lookbook"
+    end
+  end
+end

data/app/channels/lookbook/reload_channel.rb

@@ -0,0 +1,7 @@
+module Lookbook
+  class ReloadChannel < ActionCable::Channel::Base
+    def subscribed
+      stream_from "reload"
+    end
+  end
+end

data/app/controllers/lookbook/browser_controller.rb

@@ -0,0 +1,141 @@
+module Lookbook
+  class BrowserController < ActionController::Base
+    EXCEPTIONS = [ViewComponent::PreviewTemplateError, ViewComponent::ComponentError, ViewComponent::TemplateError, ActionView::Template::Error]
+
+    protect_from_forgery with: :exception
+    prepend_view_path File.expand_path("../../views/lookbook", __dir__)
+
+    layout "layouts/app"
+    helper Lookbook::Engine.helpers
+
+    before_action :find_preview, only: [:preview, :show]
+    before_action :find_example, only: [:preview, :show]
+    before_action :assign_nav, only: [:index, :show]
+
+    def index
+    end
+
+    def preview
+      if @example
+        render html: preview_output
+      else
+        render "browser/not_found"
+      end
+    end
+
+    def show
+      if @example
+        begin
+          @preview_srcdoc = preview_output.gsub("\"", "&quot;")
+          @render_args = @preview.render_args(@example.name, params: preview_controller.params.permit!)
+          @render_output = preview_controller.render_component_to_string(@preview, @example_name)
+          @render_output_lang = Lookbook::Lang.find(:html)
+          if using_preview_template?
+            @source = @example.method_source
+            @source_lang = @example.source_lang
+          else
+            @source = @example.template_source(@render_args[:template])
+            @source_lang = @example.template_lang(@render_args[:template])
+          end
+          assign_inspector
+        rescue *EXCEPTIONS
+          render "browser/error"
+        end
+      else
+        render "browser/not_found"
+      end
+    end
+
+    private
+
+    def find_preview
+      candidates = []
+      params[:path].to_s.scan(%r{/|$}) { candidates << $` }
+      match = candidates.detect { |candidate| Lookbook::Preview.exists?(candidate) }
+      @preview = match ? Lookbook::Preview.find(match) : nil
+    end
+
+    def find_example
+      @example = if @preview
+        if params[:path] == @preview.lookbook_path
+          redirect_to show_path "#{params[:path]}/#{@preview.lookbook_examples.first.name}"
+        else
+          @example_name = File.basename(params[:path])
+          @preview.lookbook_example(@example_name)
+        end
+      end
+    end
+
+    def using_preview_template?
+      @render_args[:template] == "view_components/preview"
+    end
+
+    def preview_output
+      @preview_output ||= if @preview
+        preview_controller.request.params[:path] = "#{@preview.preview_name}/#{@example.name}".chomp("/")
+        preview_controller.process(:previews)
+      end
+    end
+
+    def assign_inspector
+      @inspector = {
+        panes: {
+          source: {
+            label: "Source",
+            content: @source || "",
+            template: "code",
+            lang: @source_lang,
+            clipboard: @source
+          },
+          output: {
+            label: "Output",
+            content: @render_output || "",
+            template: "code",
+            lang: @render_output_lang,
+            clipboard: @render_output
+          },
+          notes: {
+            label: "Notes",
+            content: @example.notes.presence || "<em class='opacity-50'>No notes provided.</em>",
+            template: "prose",
+            disabled: @example.notes.blank?
+          }
+        }
+      }
+    end
+
+    def assign_nav
+      @nav = Collection.new
+      previews.reject { |p| p.hidden? }.each do |preview|
+        current = @nav
+        if preview.hierarchy_depth == 1
+          current.add(preview)
+        else
+          preview.lookbook_parent_collections.each.with_index(1) do |name, i|
+            target = current.get_or_create(name)
+            if preview.hierarchy_depth == i + 1
+              target.add(preview)
+            else
+              current = target
+            end
+          end
+        end
+      end
+      @nav
+    end
+
+    def previews
+      Lookbook::Preview.all
+    end
+
+    def preview_controller
+      return @preview_controller if @preview_controller.present?
+      controller_class = Lookbook.config.preview_controller.constantize
+      controller_class.class_eval { include Lookbook::PreviewController }
+      controller = controller_class.new
+      controller.request = request
+      controller.response = response
+      @preview_controller ||= controller
+    end
+  end
+end

data/app/helpers/lookbook/application_helper.rb

@@ -0,0 +1,24 @@
+require "redcarpet"
+require "rouge"
+
+module Lookbook
+  module ApplicationHelper
+    def config
+      Lookbook::Engine.config.lookbook
+    end
+
+    def markdown(text)
+      Markdown.new(text).to_html.html_safe
+    end
+
+    def highlight(source, language)
+      formatter = Rouge::Formatters::HTML.new(css_class: "highlight")
+      lexer = Rouge::Lexer.find(language)
+      formatter.format(lexer.lex(source)).html_safe
+    end
+
+    def nav_padding_style(depth)
+      "padding-left: calc((#{depth} * 12px) + 0.5rem);"
+    end
+  end
+end

data/app/views/lookbook/browser/error.html.erb

@@ -0,0 +1 @@
+<iframe src="<%= url_for lookbook.preview_path %>" frameborder="0" class=" h-screen w-full" seamless></iframe>

data/app/views/lookbook/browser/index.html.erb

@@ -0,0 +1,8 @@
+<div class="flex flex-col items-center justify-center h-screen w-full">
+  <div class="p-4 text-center">
+    <svg class="feather w-10 h-10 text-gray-300 mx-auto">
+      <use xlink:href="#layers" />
+    </svg>
+    <h5 class="mt-4 text-gray-400 text-base">Select a preview to get started</h5>
+  </div>
+</div>

data/app/views/lookbook/browser/not_found.html.erb

@@ -0,0 +1,25 @@
+<div class="bg-white flex flex-col items-center justify-center h-screen w-full">
+  <div class="p-4 text-center">
+    <svg class="feather w-10 h-10 text-red-300 mx-auto">
+      <use xlink:href="#alert-triangle" />
+    </svg>
+    <div class="mt-3 text-gray-700 max-w-xs">
+      <% if @preview %>
+        <div data-role="example-not-found">
+          <h5 class="text-base">Not found</h5>
+          <p class="mt-2 text-gray-400 text-sm">
+            The "<span class="text-gray-500"><%= @preview.lookbook_label %></span>" preview does not have an example named "<span class="text-gray-500"><%= @example_name %></span>".
+          </p>
+        </div>
+      <% else %>
+        <div data-role="preview-not-found">
+          <h5 class="text-base">Preview not found</h5>
+          <p class="mt-2 text-gray-400 text-sm">
+            Looked for "<span class="text-gray-500"><%= params[:path] %></span>".<br>
+            The preview may have been renamed or deleted.
+          </p>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>