lookbook 0.8.2 → 1.0.0.beta.0

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

@@ -0,0 +1,61 @@
+import Alpine from "alpinejs";
+
+import Morph from "@alpinejs/morph";
+import Persist from "@alpinejs/persist";
+import Collapse from "@alpinejs/morph";
+import Tooltip from "@ryangjchandler/alpine-tooltip";
+
+import Logger, { log } from "./plugins/logger";
+
+import initLayoutStore from "./stores/layout";
+import initNavStore from "./stores/nav";
+import initInspectorStore from "./stores/inspector";
+import initPagesStore from "./stores/pages";
+import initSettingsStore from "./stores/settings";
+import initWorkbenchStore from "./stores/workbench";
+
+import app from "./app";
+
+// Note: A ParcelJS issue prevents loading all depths of component JS files in one glob,
+// so need to split it up. Path aliases also do not work with the glob imports.
+import { getComponents } from "./helpers/build";
+import * as components from "../../../components/lookbook/*/component.js";
+import * as subComponents from "../../../components/lookbook/*/*/component.js";
+import * as jsComponents from "./components/*.js";
+
+// Plugins
+
+Alpine.plugin(Morph);
+Alpine.plugin(Persist);
+Alpine.plugin(Collapse);
+Alpine.plugin(Tooltip);
+Alpine.plugin(Logger);
+
+// Stores
+const prefix = window.APP_NAME;
+Alpine.store("layout", initLayoutStore(Alpine, { prefix }));
+Alpine.store("nav", initNavStore(Alpine, { prefix }));
+Alpine.store("inspector", initInspectorStore(Alpine, { prefix }));
+Alpine.store("pages", initPagesStore(Alpine, { prefix }));
+Alpine.store("settings", initSettingsStore(Alpine, { prefix }));
+
+if (process.env.NODE_ENV !== "production") {
+  Alpine.store("workbench", initWorkbenchStore(Alpine, { prefix }));
+}
+
+// Components
+
+Alpine.data("app", app);
+
+[components, subComponents, jsComponents].forEach((scripts) => {
+  const components = getComponents(scripts);
+  Object.keys(components).forEach((name) => {
+    Alpine.data(`${name}Component`, components[name]);
+  });
+});
+
+// Init
+
+window.log = log;
+window.Alpine = Alpine;
+Alpine.start();

data/app/assets/lookbook/js/plugins/logger.js

@@ -0,0 +1,39 @@
+import log from "loglevel";
+import logPrefix from "loglevel-plugin-prefix";
+
+logPrefix.reg(log);
+logPrefix.apply(log, {
+  format: (level) => `${`[${level}]`.padStart(7)} Lookbook:`,
+});
+
+let logLevel = process.env.NODE_ENV === "development" ? 2 : 3;
+if (window.LOG_LEVEL !== undefined) {
+  logLevel = window.LOG_LEVEL;
+}
+log.setLevel(logLevel);
+
+export default function loggerPlugin(Alpine) {
+  Alpine.directive(
+    "log",
+    (el, { modifiers, expression }, { evaluateLater, effect }) => {
+      let logFn =
+        typeof expression === "string"
+          ? (callback) => callback(expression)
+          : evaluateLater(expression);
+      effect(() =>
+        logFn((message) => {
+          const level = modifiers[0] || "debug";
+          log[level](message);
+        })
+      );
+    }
+  );
+
+  Alpine.magic("log", () => {
+    return log;
+  });
+
+  Alpine.$log = log;
+}
+
+export { log };

data/app/assets/lookbook/js/stores/filter.js

@@ -1,6 +1,6 @@
-export default function createFilterStore(Alpine) {
+export default function initFilterStore(Alpine, name) {
   return {
-    raw: Alpine.$persist("").as("filter-text"),
+    raw: Alpine.$persist("").as(name),
     get text() {
       return this.raw.replace(/\s/g, "").toLowerCase();
     },

data/app/assets/lookbook/js/stores/inspector.js

@@ -1,25 +1,31 @@
-import config from "../config";
+import { prefixString } from "../helpers/string";
 
-export default function createInspectorStore(Alpine) {
-  const { drawer, preview } = config.inspector;
+export default function initInspectorStore(Alpine, { prefix }) {
   return {
-    drawer: {
-      hidden: Alpine.$persist(false).as("drawer-hidden"),
-      orientation: Alpine.$persist(drawer.orientation).as("drawer-orientation"),
-      panel: Alpine.$persist(drawer.defaultPanel).as("drawer-panel"),
-      height: Alpine.$persist(drawer.defaultHeight).as("drawer-height"),
-      width: Alpine.$persist(drawer.defaultWidth).as("drawer-width"),
-      minWidth: drawer.minWidth,
-      minHeight: drawer.minHeight,
-      visibleTabCount: Infinity,
-    },
+    minVerticalSplitWidth: 800,
+
     preview: {
-      width: Alpine.$persist("100%").as("preview-width"),
-      height: Alpine.$persist("100%").as("preview-height"),
-      panel: Alpine.$persist(preview.defaultPanel).as("preview-panel"),
+      activeTab: Alpine.$persist("").as(
+        prefixString("inspector-preview-active-tab", prefix)
+      ),
+      width: Alpine.$persist("100%").as(
+        prefixString("inspector-preview-width", prefix)
+      ),
+      height: Alpine.$persist("100%").as(
+        prefixString("inspector-preview-height", prefix)
+      ),
       lastWidth: null,
       lastHeight: null,
       resizing: false,
     },
+
+    drawer: {
+      hidden: Alpine.$persist(false).as(
+        prefixString("inspector-drawer-hidden", prefix)
+      ),
+      activeTab: Alpine.$persist("").as(
+        prefixString("inspector-drawer-active-tab", prefix)
+      ),
+    },
   };
 }

data/app/assets/lookbook/js/stores/layout.js

@@ -1,15 +1,111 @@
 import config from "../config";
+import { addMediaQueryListener } from "../helpers/layout";
+import { log } from "../plugins/logger";
+import { prefixString } from "../helpers/string";
 
-export default function createLayoutStore() {
+const { sidebar, main, inspector } = config;
+
+export default function initLayoutStore(Alpine, { prefix }) {
   return {
     init() {
-      this.desktop = window.innerWidth >= config.desktopWidth;
+      addMediaQueryListener(
+        `(min-width: ${config.desktopWidth}px)`,
+        (matches) => {
+          this._isDesktop = matches;
+          log.debug(
+            `Media query 'desktop': ${matches ? "✅ match" : "❌ no match"}`
+          );
+        }
+      );
     },
-    reflowing: false,
-    desktop: true,
-    desktopWidth: config.desktopWidth,
+
+    get desktop() {
+      return this._isDesktop;
+    },
+
     get mobile() {
       return !this.desktop;
     },
+
+    reflowing: false,
+
+    // Main app sidebar/content layout
+    main: {
+      split: Alpine.$persist({
+        direction: "vertical",
+        sizes: [`${sidebar.defaultWidth}px`, "1fr"],
+      }).as(prefixString("main-split", prefix)),
+
+      opts: {
+        minSizes: [sidebar.minWidth, main.minWidth],
+      },
+    },
+
+    // Sidebar visibility and sections
+    sidebar: {
+      _hiddenDesktop: Alpine.$persist(false).as(
+        prefixString("sidebar-hidden-desktop", prefix)
+      ),
+
+      _hiddenMobile: Alpine.$persist(true).as(
+        prefixString("sidebar-hidden-mobile", prefix)
+      ),
+
+      set hidden(value) {
+        if (Alpine.store("layout").desktop) {
+          this._hiddenDesktop = value;
+        } else {
+          this._hiddenMobile = value;
+        }
+      },
+
+      get hidden() {
+        const isDesktop = Alpine.store("layout").desktop;
+        return (
+          (isDesktop && this._hiddenDesktop) ||
+          (!isDesktop && this._hiddenMobile)
+        );
+      },
+
+      split: Alpine.$persist({
+        direction: "horizontal",
+        sizes: ["50%", "50%"],
+      }).as(prefixString("sidebar-split", prefix)),
+
+      opts: {
+        minSizes: [sidebar.minSectionHeight, sidebar.minSectionHeight],
+      },
+    },
+
+    singleSectionSidebar: {
+      split: {
+        direction: "horizontal",
+        sizes: null,
+      },
+    },
+
+    // Inspector drawer/preview layout
+    inspector: {
+      split: Alpine.$persist({
+        direction: "horizontal",
+        horizontalSizes: ["1fr", `${inspector.drawer.defaultHeight}px`],
+        verticalSizes: ["1fr", `${inspector.drawer.defaultWidth}px`],
+      }).as(prefixString("inspector-split", prefix)),
+
+      opts: {
+        minVerticalSizes: [
+          inspector.drawer.minWidth,
+          inspector.drawer.minWidth,
+        ],
+        minHorizontalSizes: [
+          inspector.drawer.minHeight,
+          inspector.drawer.minHeight,
+        ],
+      },
+    },
+
+    // protected
+
+    _isDesktop: true,
   };
 }

data/app/assets/lookbook/js/stores/nav.js

@@ -1,21 +1,22 @@
-export default function createNavStore(Alpine) {
+import initFilterStore from "./filter";
+import { prefixString } from "../helpers/string";
+
+export default function initNavStore(Alpine, { prefix }) {
   return {
-    open: Alpine.$persist([]).as("nav-open"),
-    active: Alpine.$persist(null).as("nav-active"),
-    isOpen(id) {
-      return this.open.includes(id);
+    previews: {
+      filter: initFilterStore(
+        Alpine,
+        prefixString("previews-filter-text", prefix)
+      ),
+      open: Alpine.$persist([]).as(prefixString("previews-nav-open", prefix)),
     },
-    setOpen(id) {
-      this.open.push(id);
-    },
-    setClosed(id) {
-      const index = this.open.indexOf(id);
-      if (index > -1) {
-        this.open.splice(index, 1);
-      }
-    },
-    toggle(id) {
-      this.isOpen(id) ? this.setClosed(id) : this.setOpen(id);
+
+    pages: {
+      filter: initFilterStore(
+        Alpine,
+        prefixString("pages-filter-text", prefix)
+      ),
+      open: Alpine.$persist([]).as(prefixString("pages-nav-open", prefix)),
     },
   };
 }

data/app/assets/lookbook/js/stores/pages.js

@@ -1,5 +1,7 @@
-export default function createNavStore(Alpine) {
+import { prefixString } from "../helpers/string";
+
+export default function initPagesStore(Alpine, { prefix }) {
   return {
-    embeds: {},
+    embeds: Alpine.$persist({}).as(prefixString("pages-embeds", prefix)),
   };
 }

data/app/assets/lookbook/js/stores/settings.js

@@ -0,0 +1,7 @@
+import { prefixString } from "../helpers/string";
+
+export default function initSettingsStore(Alpine, { prefix }) {
+  return {
+    showTooltips: true,
+  };
+}

data/app/assets/lookbook/js/stores/workbench.js

@@ -0,0 +1,29 @@
+import initFilterStore from "./filter";
+import { prefixString } from "../helpers/string";
+
+export default function initWorkbenchStore(Alpine, { prefix }) {
+  return {
+    filter: initFilterStore(Alpine, prefixString("workbench-filter", prefix)),
+    nav: {
+      open: Alpine.$persist([]).as(prefixString("workbench-nav-open", prefix)),
+      location: {
+        pathname: null,
+      },
+    },
+    horizontalSplitLayout: {
+      split: Alpine.$persist({
+        direction: "horizontal",
+        sizes: ["50%", "50%"],
+      }).as(prefixString("workbench-horizontal-split", prefix)),
+    },
+    verticalSplitLayout: {
+      split: Alpine.$persist({
+        direction: "vertical",
+        sizes: ["40%", "30%", "30%"],
+      }).as(prefixString("workbench-vertical-split", prefix)),
+    },
+    tabbedPanels: {
+      activeTab: "tab-1",
+    },
+  };
+}

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

@@ -0,0 +1,28 @@
+<%= render_component_tag tag_name,
+  href: @href,
+  class: [
+    "block text-lookbook-button-text focus:outline-none focus-visible:outline-none #{padding}",
+    {
+      "hover:text-lookbook-button-text-hover": !@disabled,
+      "cursor-[not-allowed] opacity-50": @disabled
+    }
+  ],
+  disabled: @disabled,
+  "@keydown.esc.stop": "hideDropdown" do %>
+  <span x-ref="icon">
+    <%= icon || render_component(:icon, name: @icon, size: icon_size, ":class": "{'animate-spin': _spinning}") %>
+  </span>
+  <% if @tooltip %>
+    <label class="hidden" x-ref="tooltip"><%= @tooltip %></label>
+  <% end %>
+  <% if content %>
+    <div x-ref="content"><%== content %></div>
+  <% end %>
+  <% if dropdown %>
+    <div class="hidden" x-ref="dropdown">
+      <div class="bg-white divide-y divide-lookbook-divider text-left">
+        <%== dropdown %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,55 @@
+import tippy from "~/app/assets/lookbook/js/lib/tippy";
+import { initTooltip } from "~/app/assets/lookbook/js/components/tooltip";
+
+export default function buttonComponent() {
+  let tooltip = null;
+  let dropdown = null;
+
+  return {
+    init() {
+      if (this.$refs.tooltip) {
+        tooltip = initTooltip(this, {
+          target: this.$refs.icon,
+        });
+      }
+
+      if (this.$refs.dropdown) {
+        dropdown = tippy(this.$el, {
+          content: this.$refs.dropdown.innerHTML,
+          trigger: "click",
+          theme: "menu",
+          triggerTarget: this.$el,
+          interactive: true,
+          zIndex: 99999,
+          onShow: () => {
+            if (!this.$store.settings.showTooltips) {
+              return false;
+            }
+            this.$dispatch("dropdown:show", { dropdown: this });
+          },
+          onHide: () => this.$dispatch("dropdown:hide", { dropdown: this }),
+        });
+      }
+    },
+
+    hideDropdown() {
+      if (dropdown) {
+        dropdown.hide();
+      }
+    },
+
+    startSpin() {
+      this._spinning = true;
+    },
+
+    stopSpin(delay = 0) {
+      setTimeout(() => (this._spinning = false), delay);
+    },
+
+    get _tooltip() {
+      return tooltip;
+    },
+
+    _spinning: false,
+  };
+}

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

@@ -0,0 +1,39 @@
+module Lookbook
+  class Button::Component < Lookbook::Component
+    renders_one :icon, Lookbook::Icon::Component
+    renders_one :dropdown
+
+    ICON_SIZES = {
+      sm: 3.5,
+      md: 4,
+      lg: 6
+    }
+
+    def initialize(icon: nil, tooltip: nil, disabled: false, size: :md, href: nil, **html_attrs)
+      @icon = icon
+      @tooltip = tooltip
+      @disabled = disabled
+      @size = size
+      @href = href
+      super(**html_attrs)
+    end
+
+    def icon_size
+      ICON_SIZES[@size]
+    end
+
+    def padding
+      @size == :sm ? "p-1" : "p-2"
+    end
+
+    def tag_name
+      @href.present? ? :a : :button
+    end
+
+    protected
+
+    def alpine_component
+      "buttonComponent"
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<%= render_component_tag :div, class: "flex items-center" do %>
+  <%= safe_join(buttons) %>
+<% end %>

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

@@ -0,0 +1,18 @@
+module Lookbook
+  class ButtonGroup::Component < Lookbook::Component
+    renders_many :buttons, ->(copy: nil, **attrs, &block) do
+      attrs[:size] = @size
+      instance = if copy.present?
+        CopyButton::Component.new(target: copy, **attrs)
+      else
+        Button::Component.new(**attrs)
+      end
+      render instance, &block
+    end
+
+    def initialize(size: :md, **html_attrs)
+      @size = size
+      super(**html_attrs)
+    end
+  end
+end

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

@@ -0,0 +1,57 @@
+@import "./highlight_github_light.css";
+
+@layer components {
+  [data-component="code"] {
+    @apply text-sm px-4 overflow-x-hidden;
+
+    & .line {
+      min-height: 1.625em;
+      @apply leading-relaxed;
+    }
+
+    & .code {
+      @apply overflow-x-auto overflow-y-hidden py-4;
+    }
+
+    /* Line numbers */
+
+    &.numbered {
+      @apply p-0;
+
+      & .wrapper {
+        grid-template-columns: min-content 1fr;
+        @apply grid h-full w-full relative;
+      }
+
+      & .line-numbers {
+        width: min-content;
+        @apply bg-white border-r border-dashed border-lookbook-divider z-10 h-full p-3 select-none text-gray-400 text-right;
+      }
+
+      & .line-number {
+        min-width: 1.4em;
+        @apply text-xs block pt-[4px];
+      }
+
+      & .code {
+        @apply py-3;
+      }
+
+      & .code .line {
+        @apply px-3;
+      }
+    }
+
+    /* Focusing on specific lines */
+
+    &.focussed {
+      & .line:not(.highlighted) {
+        @apply !opacity-30;
+      }
+
+      & .code .line.highlighted {
+        @apply bg-yellow-50;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+<%= render_component_tag class: [
+    "not-prose font-mono #{theme_classname}",
+    {
+      "numbered": numbered?,
+      "focussed": focussed?,
+      "h-full": full_height?
+    } 
+  ] do %>
+  <%= Lookbook::CodeFormatter.highlight(source, **@highlight_opts) %>
+<% end %>

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

@@ -0,0 +1,3 @@
+export default function codeComponent() {
+  return {};
+}

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

@@ -0,0 +1,56 @@
+module Lookbook
+  class Code::Component < Lookbook::Component
+    include Lookbook::OutputHelper
+
+    def initialize(
+      source: nil,
+      language: :html,
+      line_numbers: false,
+      highlight_lines: [],
+      start_line: 1,
+      wrap: false,
+      theme: :github_light,
+      full_height: false,
+      **html_attrs
+    )
+      @source_code = source
+      @highlight_opts = {
+        language: language,
+        line_numbers: line_numbers,
+        highlight_lines: highlight_lines,
+        start_line: start_line
+      }
+      @highlight_lines = highlight_lines
+      @wrap = wrap
+      @theme = theme
+      @full_height = full_height
+      super(**html_attrs)
+    end
+
+    def theme_classname
+      "theme-#{@theme.to_s.tr("_", "-")}"
+    end
+
+    def source
+      (@source_code || content).strip_heredoc.strip
+    end
+
+    def numbered?
+      @highlight_opts[:line_numbers] == true
+    end
+
+    def focussed?
+      @highlight_opts[:highlight_lines].any?
+    end
+
+    def full_height?
+      @full_height == true
+    end
+
+    protected
+
+    def alpine_component
+      "codeComponent"
+    end
+  end
+end