lookbook 2.3.1 → 3.0.0.alpha.2

data/assets/js/index.js

@@ -1,61 +0,0 @@
-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 "../../app/components/lookbook/*/*component.js";
-import * as subComponents from "../../app/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/assets/js/lib/lookbook.js

@@ -1,125 +0,0 @@
-window.Lookbook = window.Lookbook || {};
-window.Lookbook.initEmbeds = initEmbeds;
-
-const embedUrlPrefix = "embed";
-const whiteListedAttributes = [
-  "preview",
-  "scenario",
-  "panels",
-  "actions",
-  "param-*",
-];
-
-function initEmbeds(root = document) {
-  if (typeof window.iFrameResize !== "function") {
-    console.error(
-      "Lookbook embeds require the 'iframe-resizer' library to be available. Skipping embed instantiation."
-    );
-    return;
-  }
-
-  if (typeof root === "string") {
-    root = document.querySelector(root);
-  }
-
-  if (!root) {
-    return console.error(
-      "Could not initialize Lookbook embeds. Root node not found."
-    );
-  }
-
-  const embeds = Array.from(root.querySelectorAll("lookbook-embed"));
-
-  embeds.forEach((embed) => {
-    const attrs = Array.from(embed.attributes);
-    const wrapper = createWrapper();
-    const iframe = createIframe(attrs);
-
-    wrapper.appendChild(iframe);
-    embed.replaceWith(wrapper);
-  });
-
-  window.iFrameResize({ checkOrigin: false }, "[data-lookbook-embed-iframe]");
-}
-
-function createWrapper() {
-  const wrapper = document.createElement("div");
-
-  wrapper.setAttribute("data-lookbook-embed", "");
-  wrapper.classList.add("lookbook-embed");
-
-  return wrapper;
-}
-
-function createIframe(attrs) {
-  const src = buildSrc(attrs);
-  const id = attrValue(attrs, "id");
-  const styles = attrValue(attrs, "style");
-  const classes = attrValue(attrs, "class", "")
-    .split(" ")
-    .map((c) => c.trim())
-    .filter((c) => c.length);
-
-  const iframe = document.createElement("iframe");
-  iframe.src = src;
-  if (id) iframe.id = id;
-
-  iframe.setAttribute("frameborder", 0);
-  iframe.setAttribute("data-lookbook-embed-iframe", "");
-
-  if (classes.length) iframe.classList.add(...classes);
-  if (styles) iframe.style.cssText = styles;
-
-  iframe.style.width = "100%";
-  iframe.style.transition = "height 0.3s";
-
-  return iframe;
-}
-
-function buildSrc(attrs) {
-  const appPath = attrValue(attrs, "app") || guessBasePath();
-  const props = {};
-
-  permittedAttrs(attrs).forEach(({ name, value }) => {
-    name = name.replace("-", "_").toLowerCase();
-    props[name] = value;
-  });
-
-  return encodeURI(
-    [appPath, embedUrlPrefix].join("/") + `?props=${JSON.stringify(props)}`
-  );
-}
-
-function attrValue(attrs, name, fallback = null) {
-  const attr = attrs.find((attr) => attr.name === name);
-  return attr ? attr.value : fallback;
-}
-
-function permittedAttrs(attrs) {
-  return attrs.filter((attr) => {
-    return whiteListedAttributes.find((key) => {
-      const name = attr.name;
-      return (
-        key === name ||
-        (key.includes("*") && name.startsWith(key.replace("*", "")))
-      );
-    });
-  });
-}
-
-function guessBasePath() {
-  const script =
-    document.currentScript ||
-    document.querySelector('script[src*="lookbook.js"]');
-  const scriptSrc = script.src;
-
-  if (scriptSrc && scriptSrc.includes("lookbook-assets")) {
-    return scriptSrc
-      .split("?")[0]
-      .replace("lookbook-assets/js/lookbook.js", "lookbook");
-  }
-
-  return `//${location.host}/lookbook`;
-}
-
-document.addEventListener("DOMContentLoaded", () => initEmbeds());

data/assets/js/lib/socket.js

@@ -1,28 +0,0 @@
-import { createConsumer } from "@rails/actioncable";
-import { debounce } from "throttle-debounce";
-import { log } from "../plugins/logger";
-
-export default function socket(endpoint) {
-  const uid = (Date.now() + ((Math.random() * 100) | 0)).toString();
-  const consumer = createConsumer(`${endpoint}?uid=${uid}`);
-  return {
-    addListener(channel, callback) {
-      consumer.subscriptions.create(channel, {
-        received: debounce(
-          200,
-          (data) => {
-            log.debug("Lookbook files changed");
-            callback(data);
-          },
-          { atBegin: true }
-        ),
-        connected() {
-          log.info("Lookbook websocket connected");
-        },
-        disconnected() {
-          log.info("Lookbook websocket disconnected");
-        },
-      });
-    },
-  };
-}

data/assets/js/lib/tippy.js

@@ -1,9 +0,0 @@
-import tippy from "tippy.js";
-
-tippy.setDefaultProps({
-  allowHTML: true,
-  theme: "tooltip",
-  appendTo: document.getElementById("app"),
-});
-
-export default tippy;

data/assets/js/lookbook-core.js

@@ -1 +0,0 @@
-import "./lib/lookbook";

data/assets/js/lookbook.js

@@ -1,2 +0,0 @@
-import "iframe-resizer/js/iframeResizer";
-import "./lib/lookbook";

data/assets/js/plugins/logger.js

@@ -1,39 +0,0 @@
-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/assets/js/stores/filter.js

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

data/assets/js/stores/inspector.js

@@ -1,31 +0,0 @@
-import { prefixString } from "../helpers/string";
-
-export default function initInspectorStore(Alpine, { prefix }) {
-  return {
-    minVerticalSplitWidth: 800,
-
-    main: {
-      activeTab: Alpine.$persist("").as(
-        prefixString("inspector-main-active-tab", prefix)
-      ),
-      width: Alpine.$persist("100%").as(
-        prefixString("inspector-main-width", prefix)
-      ),
-      height: Alpine.$persist("100%").as(
-        prefixString("inspector-main-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/assets/js/stores/layout.js

@@ -1,111 +0,0 @@
-import config from "../config";
-import { addMediaQueryListener } from "../helpers/layout";
-import { log } from "../plugins/logger";
-import { prefixString } from "../helpers/string";
-
-const { sidebar, main, inspector } = config;
-
-export default function initLayoutStore(Alpine, { prefix }) {
-  return {
-    init() {
-      addMediaQueryListener(
-        `(min-width: ${config.desktopWidth}px)`,
-        (matches) => {
-          this._isDesktop = matches;
-          log.debug(
-            `Media query 'desktop': ${matches ? "✅ match" : "❌ no match"}`
-          );
-        }
-      );
-    },
-
-    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/assets/js/stores/nav.js

@@ -1,22 +0,0 @@
-import initFilterStore from "./filter";
-import { prefixString } from "../helpers/string";
-
-export default function initNavStore(Alpine, { prefix }) {
-  return {
-    previews: {
-      filter: initFilterStore(
-        Alpine,
-        prefixString("previews-filter-text", prefix)
-      ),
-      open: Alpine.$persist([]).as(prefixString("previews-nav-open", prefix)),
-    },
-
-    pages: {
-      filter: initFilterStore(
-        Alpine,
-        prefixString("pages-filter-text", prefix)
-      ),
-      open: Alpine.$persist([]).as(prefixString("pages-nav-open", prefix)),
-    },
-  };
-}

data/assets/js/stores/pages.js

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

data/assets/js/stores/settings.js

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

data/assets/js/stores/workbench.js

@@ -1,29 +0,0 @@
-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/config/app.yml

@@ -1,78 +0,0 @@
-shared:
-  project_name: ~
-  project_logo: ~
-
-  preview_collection_label: "Previews"
-  preview_nav_filter: true
-  preview_paths: [test/components/previews]
-  preview_display_options: {}
-  preview_controller: "Lookbook::PreviewController"
-  preview_template: lookbook/previews/preview
-  preview_inspector:
-    main_panels: [preview, output]
-    drawer_panels: [source, notes, params, "*"]
-    sidebar_panels: [previews, pages]
-  preview_embeds:
-    enabled: true
-    policy: SAMEORIGIN
-    panels: false
-    actions: []
-    scenarios: []
-    display_option_controls: true
-  preview_layout: ~
-  preview_disable_action_view_annotations: true
-  preview_disable_action_view_partial_prefixes: true
-  preview_type_default: view_component
-  preview_sort_scenarios: false
-  preview_disable_error_handling: false
-
-  page_collection_label: "Pages"
-  page_nav_filter: false
-  page_controller: "Lookbook::PageController"
-  page_route: pages
-  page_paths: [test/components/docs]
-  page_extensions: [html.*, md.*]
-  page_options: {}
-
-  markdown_options:
-    tables: true
-    fenced_code_blocks: true
-    disable_indented_code_blocks: true
-    strikethrough: true
-    highlight: true
-    with_toc_data: true
-    lax_spacing: true
-
-  highlighter_options:
-    theme: github
-    dark: false
-
-  component_paths: [app/views, app/components]
-
-  reload_on_change: ~
-  live_updates: false
-  listen_paths: []
-  listen_extensions: [rb, html.*]
-  autoload_previews: true
-
-  ui_theme: indigo
-  ui_theme_overrides: {}
-  ui_favicon: true
-
-  log_level: 2
-  log_use_rails_logger: true
-
-  debug_menu: false
-
-  links:
-    docs: https://v2.lookbook.build
-    demo: https://v2-demo.lookbook.build
-    repo: https://github.com/lookbook-hq/lookbook/tree/v2
-
-development:
-  debug_menu: true
-  live_updates: true
-
-test:
-  debug_menu: true
-  live_updates: false

data/config/inputs.yml

@@ -1,48 +0,0 @@
-shared:
-  select:
-    partial: lookbook/inspector/inputs/select
-    opts: {}
-
-  textarea:
-    partial: lookbook/inspector/inputs/textarea
-    opts: {}
-
-  toggle:
-    partial: lookbook/inspector/inputs/toggle
-    opts: {}
-
-  color:
-    partial: lookbook/inspector/inputs/color
-    opts: {}
-
-  range:
-    partial: lookbook/inspector/inputs/range
-    opts: {}
-
-  text:
-    partial: lookbook/inspector/inputs/text
-    opts: {}
-
-  email:
-    partial: lookbook/inspector/inputs/text
-    opts: {}
-
-  number:
-    partial: lookbook/inspector/inputs/text
-    opts: {}
-
-  tel:
-    partial: lookbook/inspector/inputs/text
-    opts: {}
-
-  url:
-    partial: lookbook/inspector/inputs/text
-    opts: {}
-
-  date:
-    partial: lookbook/inspector/inputs/text_two_step
-    opts: {}
-
-  datetime_local:
-    partial: lookbook/inspector/inputs/text_two_step
-    opts: {}

data/config/languages.yml

@@ -1,41 +0,0 @@
-shared:
-  definitions:
-    - name: ruby
-      ext: .rb
-      label: Ruby
-      comment: "# %s"
-
-    - name: html
-      ext: .html
-      label: HTML
-      comment: "<!-- %s -->"
-
-    - name: erb
-      ext: .erb
-      label: ERB
-      comment: "<%%# %s %%>"
-
-    - name: haml
-      ext: .haml
-      label: Haml
-      comment: "<!-- %s -->"
-
-    - name: slim
-      ext: .slim
-      label: Slim
-      comment: "<!-- %s -->"
-
-    - name: tsx
-      ext: .tsx
-      label: TypeScript
-      comment: "// %s"
-
-    - name: js
-      ext: .js
-      label: JavasScript
-      comment: "// %s"
-
-    - name: css
-      ext: .css
-      label: CSS
-      comment: "/* %s */"

data/config/panels.yml

@@ -1,28 +0,0 @@
-shared:
-  preview:
-    partial: lookbook/inspector/panels/preview
-    label: Preview
-    hotkey: v
-
-  output:
-    partial: lookbook/inspector/panels/output
-    label: HTML
-    hotkey: h
-
-  source:
-    partial: lookbook/inspector/panels/source
-    label: Source
-    hotkey: s
-    copy: "->(data) { data.scenarios.map { |e| e.source }.join(\n) }"
-
-  notes:
-    partial: lookbook/inspector/panels/notes
-    label: Notes
-    hotkey: n
-    disabled: "->(data) { data.scenarios.select { |e| e.notes.present? }.none? }"
-
-  params:
-    partial: lookbook/inspector/panels/params
-    label: Params
-    hotkey: p
-    disabled: "->(data) { data.context.params.none? }"