@ohos-ports/histoire-app 1.0.0-beta.0

package/dist/bundled/sandbox.js

@@ -0,0 +1,87 @@
+import { applyState } from "@histoire/shared";
+import { createPinia } from "@histoire/vendors/pinia";
+import { files } from "./_virtual/histoire-stories.js";
+import { ref, createApp, h, computed, watch, onMounted } from "@histoire/vendors/vue";
+import { parseQuery } from "@histoire/vendors/vue-router";
+import "./components/story/GenericMountStory.vue.js";
+import "./components/story/GenericRenderStory.vue.js";
+import { setupPluginApi } from "./plugin.js";
+import { histoireConfig } from "./util/config.js";
+import { SANDBOX_READY, STATE_SYNC, PREVIEW_SETTINGS_SYNC } from "./util/const.js";
+import { isDark } from "./util/dark.js";
+import { mapFile } from "./util/mapping.js";
+import { applyPreviewSettings } from "./util/preview-settings.js";
+import { toRawDeep } from "./util/state.js";
+import _sfc_main from "./components/story/GenericMountStory.vue2.js";
+import _sfc_main$1 from "./components/story/GenericRenderStory.vue2.js";
+"use strict";
+const query = parseQuery(window.location.search);
+const file = ref(mapFile(files.find((f) => f.id === query.storyId)));
+const app = createApp({
+  name: "SandboxApp",
+  setup() {
+    const story = computed(() => file.value.story);
+    const variant = computed(() => story.value?.variants.find((v) => v.id === query.variantId));
+    let synced = false;
+    let mounted = false;
+    window.addEventListener("message", (event) => {
+      if (event.data?.type === STATE_SYNC) {
+        if (!mounted) return;
+        synced = true;
+        applyState(variant.value.state, event.data.state);
+      } else if (event.data?.type === PREVIEW_SETTINGS_SYNC) {
+        applyPreviewSettings(event.data.settings);
+      }
+    });
+    watch(() => variant.value.state, (value) => {
+      if (synced && mounted) {
+        synced = false;
+        return;
+      }
+      window.parent?.postMessage({
+        type: STATE_SYNC,
+        state: toRawDeep(value, true)
+      });
+    }, {
+      deep: true
+    });
+    onMounted(() => {
+      mounted = true;
+    });
+    return {
+      story,
+      variant
+    };
+  },
+  render() {
+    return [
+      h("div", { class: "htw-sandbox-hidden" }, [
+        h(_sfc_main, {
+          key: file.value.story.id,
+          story: file.value.story
+        })
+      ]),
+      this.story && this.variant ? h(_sfc_main$1, { story: this.story, variant: this.variant, onReady: () => {
+        window.parent?.postMessage({
+          type: SANDBOX_READY
+        });
+      } }) : null
+    ];
+  }
+});
+app.use(createPinia());
+app.mount("#app");
+watch(isDark, (value) => {
+  if (value) {
+    document.documentElement.classList.add(histoireConfig.sandboxDarkClass);
+    document.documentElement.classList.add(histoireConfig.theme.darkClass);
+  } else {
+    document.documentElement.classList.remove(histoireConfig.sandboxDarkClass);
+    document.documentElement.classList.remove(histoireConfig.theme.darkClass);
+  }
+}, {
+  immediate: true
+});
+if (import.meta.hot) {
+  /* @__PURE__ */ setupPluginApi();
+}

package/dist/bundled/stores/command.js

@@ -0,0 +1,25 @@
+import { defineStore } from "@histoire/vendors/pinia";
+import { ref } from "@histoire/vendors/vue";
+import { getCommandContext, executeCommand } from "../util/commands.js";
+"use strict";
+const useCommandStore = defineStore("command", () => {
+  const selectedCommand = ref(null);
+  const showPromptsModal = ref(false);
+  function activateCommand(command) {
+    selectedCommand.value = command;
+    if (command.prompts?.length) {
+      showPromptsModal.value = true;
+    } else {
+      const params = command.getParams?.(getCommandContext()) ?? {};
+      executeCommand(command, params);
+    }
+  }
+  return {
+    selectedCommand,
+    showPromptsModal,
+    activateCommand
+  };
+});
+export {
+  useCommandStore
+};

package/dist/bundled/stores/events.js

@@ -0,0 +1,29 @@
+import { defineStore } from "@histoire/vendors/pinia";
+import { reactive, ref, watch } from "@histoire/vendors/vue";
+import { useStoryStore } from "./story.js";
+"use strict";
+const useEventsStore = defineStore("events", () => {
+  const storyStore = useStoryStore();
+  const events = reactive([]);
+  const unseen = ref(0);
+  function addEvent(event) {
+    events.push(event);
+    unseen.value++;
+  }
+  function reset() {
+    events.length = 0;
+    unseen.value = 0;
+  }
+  watch(() => storyStore.currentVariant?.id, () => {
+    reset();
+  });
+  return {
+    addEvent,
+    reset,
+    events,
+    unseen
+  };
+});
+export {
+  useEventsStore
+};

package/dist/bundled/stores/folder.js

@@ -0,0 +1,54 @@
+import { useStorage } from "@histoire/vendors/vue-use";
+import { defineStore } from "@histoire/vendors/pinia";
+import { watch } from "@histoire/vendors/vue";
+import { useStoryStore } from "./story.js";
+"use strict";
+const useFolderStore = defineStore("folder", () => {
+  const openedFolders = useStorage(
+    "_histoire-tree-state",
+    /* @__PURE__ */ new Map()
+  );
+  function getStringPath(path) {
+    return path.join("␜");
+  }
+  function toggleFolder(path, defaultToggleValue = true) {
+    const stringPath = getStringPath(path);
+    const currentValue = openedFolders.value.get(stringPath);
+    if (currentValue == null) {
+      setFolderOpen(stringPath, defaultToggleValue);
+    } else if (currentValue) {
+      setFolderOpen(stringPath, false);
+    } else {
+      setFolderOpen(stringPath, true);
+    }
+  }
+  function setFolderOpen(path, value) {
+    const stringPath = typeof path === "string" ? path : getStringPath(path);
+    openedFolders.value.set(stringPath, value);
+  }
+  function isFolderOpened(path, defaultValue = false) {
+    const value = openedFolders.value.get(getStringPath(path));
+    if (value == null) {
+      return defaultValue;
+    }
+    return value;
+  }
+  function openFileFolders(path) {
+    for (let pathLength = 1; pathLength < path.length; pathLength++) {
+      setFolderOpen(path.slice(0, pathLength), true);
+    }
+  }
+  const storyStore = useStoryStore();
+  watch(() => storyStore.currentStory, (story) => {
+    if (story) {
+      openFileFolders(story.file.path);
+    }
+  });
+  return {
+    isFolderOpened,
+    toggleFolder
+  };
+});
+export {
+  useFolderStore
+};

package/dist/bundled/stores/preview-settings.js

@@ -0,0 +1,19 @@
+import { useStorage } from "@histoire/vendors/vue-use";
+import { defineStore } from "@histoire/vendors/pinia";
+"use strict";
+const usePreviewSettingsStore = defineStore("preview-settings", () => {
+  const currentSettings = useStorage("_histoire-sandbox-settings-v3", {
+    responsiveWidth: 720,
+    responsiveHeight: null,
+    rotate: false,
+    backgroundColor: "transparent",
+    checkerboard: false,
+    textDirection: "ltr"
+  });
+  return {
+    currentSettings
+  };
+});
+export {
+  usePreviewSettingsStore
+};

package/dist/bundled/stores/story.js

@@ -0,0 +1,43 @@
+import { defineStore } from "@histoire/vendors/pinia";
+import { ref, computed } from "@histoire/vendors/vue";
+import { router } from "../router.js";
+"use strict";
+const useStoryStore = defineStore("story", () => {
+  const stories = ref([]);
+  function setStories(value) {
+    stories.value = value;
+  }
+  const currentStory = computed(() => stories.value.find((s) => s.id === router.currentRoute.value.params.storyId));
+  const currentVariant = computed(() => currentStory.value?.variants.find((v) => v.id === router.currentRoute.value.query.variantId));
+  const maps = computed(() => {
+    const storyMap = /* @__PURE__ */ new Map();
+    const variantMap = /* @__PURE__ */ new Map();
+    for (const story of stories.value) {
+      storyMap.set(story.id, story);
+      for (const variant of story.variants) {
+        variantMap.set(`${story.id}:${variant.id}`, variant);
+      }
+    }
+    return {
+      stories: storyMap,
+      variants: variantMap
+    };
+  });
+  function getStoryById(id) {
+    return maps.value.stories.get(id);
+  }
+  function getVariantById(idWithStoryId) {
+    return maps.value.variants.get(idWithStoryId);
+  }
+  return {
+    stories,
+    setStories,
+    currentStory,
+    currentVariant,
+    getStoryById,
+    getVariantById
+  };
+});
+export {
+  useStoryStore
+};

package/dist/bundled/util/commands.js

@@ -0,0 +1,57 @@
+import { router } from "../router.js";
+import { useStoryStore } from "../stores/story.js";
+import { openInEditor } from "./open-in-editor.js";
+"use strict";
+const builtinCommands = [
+  {
+    id: "builtin:open-in-editor",
+    label: "Open file in editor",
+    icon: "carbon:script-reference",
+    showIf: ({ route }) => route.name === "story" && !!useStoryStore().currentStory,
+    getParams: () => {
+      const story = useStoryStore().currentStory;
+      let file;
+      if (story.docsOnly) {
+        file = story.file?.docsFilePath ?? story.file?.filePath;
+      } else {
+        file = story.file?.filePath;
+      }
+      return {
+        file
+      };
+    },
+    clientAction: ({ file }) => {
+      openInEditor(file);
+    }
+  },
+  {
+    id: "builtin:histoire-docs",
+    label: "Open Histoire Documentation",
+    icon: "carbon:help",
+    clientAction: () => {
+      window.open("https://histoire.dev/guide/getting-started.html", "_blank");
+    }
+  }
+];
+function executeCommand(command, params) {
+  if (import.meta.hot) {
+    import.meta.hot.send("histoire:dev-command", {
+      id: command.id,
+      params
+    });
+    command.clientAction?.(params, getCommandContext());
+  }
+}
+function getCommandContext() {
+  const storyStore = useStoryStore();
+  return {
+    route: router.currentRoute.value,
+    currentStory: storyStore.currentStory,
+    currentVariant: storyStore.currentVariant
+  };
+}
+export {
+  builtinCommands,
+  executeCommand,
+  getCommandContext
+};

package/dist/bundled/util/config.js

@@ -0,0 +1,8 @@
+import { config, logos } from "../_virtual/histoire-config.js";
+"use strict";
+const histoireConfig = config;
+const customLogos = logos;
+export {
+  customLogos,
+  histoireConfig
+};

package/dist/bundled/util/const.js

@@ -0,0 +1,10 @@
+const STATE_SYNC = "__histoire:state-sync";
+const SANDBOX_READY = "__histoire:sandbox-ready";
+const EVENT_SEND = "__histoire:event";
+const PREVIEW_SETTINGS_SYNC = "__histoire:preview-settings-sync";
+export {
+  EVENT_SEND,
+  PREVIEW_SETTINGS_SYNC,
+  SANDBOX_READY,
+  STATE_SYNC
+};

package/dist/bundled/util/dark.js

@@ -0,0 +1,28 @@
+import { useDark, useToggle } from "@histoire/vendors/vue-use";
+import { watch } from "@histoire/vendors/vue";
+import { histoireConfig } from "./config.js";
+"use strict";
+const isDark = useDark({
+  valueDark: "htw-dark",
+  initialValue: histoireConfig.theme.defaultColorScheme,
+  storageKey: "histoire-color-scheme",
+  storage: histoireConfig.theme.storeColorScheme ? localStorage : sessionStorage
+});
+const toggleDark = useToggle(isDark);
+function applyDarkToControls() {
+  window.__hst_controls_dark?.forEach((ref) => {
+    ref.value = isDark.value;
+  });
+}
+watch(isDark, () => {
+  applyDarkToControls();
+}, {
+  immediate: true
+});
+window.__hst_controls_dark_ready = () => {
+  applyDarkToControls();
+};
+export {
+  isDark,
+  toggleDark
+};

package/dist/bundled/util/docs.js

@@ -0,0 +1,26 @@
+import { unindent } from "@histoire/shared";
+import { clientSupportPlugins } from "../_virtual/histoire-support-plugins-client.js";
+"use strict";
+async function getSourceCode(story, variant) {
+  if (variant.source) {
+    return variant.source;
+  } else if (variant.slots?.().source) {
+    const source = variant.slots?.().source()[0].children;
+    if (source) {
+      return unindent(source);
+    }
+  } else {
+    const clientPlugin = clientSupportPlugins[story.file?.supportPluginId];
+    if (clientPlugin) {
+      const pluginModule = await clientPlugin();
+      return pluginModule.generateSourceCode(variant);
+    }
+  }
+  const sourceLoader = story.file?.source;
+  if (sourceLoader) {
+    return (await sourceLoader()).default;
+  }
+}
+export {
+  getSourceCode
+};

package/dist/bundled/util/env.js

@@ -0,0 +1,4 @@
+const isMac = navigator.platform.toLowerCase().includes("mac");
+export {
+  isMac
+};

package/dist/bundled/util/events.js

@@ -0,0 +1,33 @@
+import { EVENT_SEND } from "./const.js";
+"use strict";
+async function logEvent(name, argument) {
+  console.log("[histoire] Event fired", { name, argument });
+  const event = {
+    name,
+    argument: JSON.parse(stringifyEvent(argument))
+    // Needed for HTMLEvent that can't be cloned
+  };
+  if (location.href.includes("__sandbox")) {
+    window.parent?.postMessage({
+      type: EVENT_SEND,
+      event
+    });
+  } else {
+    const { useEventsStore } = await import("../stores/events.js");
+    useEventsStore().addEvent(event);
+  }
+}
+function stringifyEvent(e) {
+  const obj = {};
+  for (const k in e) {
+    obj[k] = e[k];
+  }
+  return JSON.stringify(obj, (k, v) => {
+    if (v instanceof Node) return "Node";
+    if (v instanceof Window) return "Window";
+    return v;
+  }, " ");
+}
+export {
+  logEvent
+};

package/dist/bundled/util/keyboard.js

@@ -0,0 +1,90 @@
+import { useEventListener } from "@histoire/vendors/vue-use";
+import { isRef } from "@histoire/vendors/vue";
+import { isMac } from "./env.js";
+"use strict";
+function onKeyboardShortcut(shortcut, handler, options = {}) {
+  useEventListener(options.event ?? "keydown", (event) => {
+    if (isMatchingShortcut(isRef(shortcut) ? shortcut.value : shortcut)) {
+      handler(event);
+    }
+  });
+}
+const modifiers = {
+  ctrl: { key: "Control", pressed: false },
+  alt: { key: "Alt", pressed: false },
+  shift: { key: "Shift", pressed: false },
+  meta: { key: "Meta", pressed: false }
+};
+const pressedKeys = /* @__PURE__ */ new Set();
+window.addEventListener("keydown", (event) => {
+  for (const i in modifiers) {
+    const mod = modifiers[i];
+    if (mod.key === event.key) {
+      mod.pressed = true;
+      return;
+    }
+  }
+  pressedKeys.add(event.key.toLocaleLowerCase());
+});
+window.addEventListener("keyup", (event) => {
+  requestAnimationFrame(() => {
+    pressedKeys.clear();
+    for (const i in modifiers) {
+      const mod = modifiers[i];
+      if (mod.key === event.key) {
+        mod.pressed = false;
+        break;
+      }
+    }
+  });
+});
+window.addEventListener("blur", () => {
+  pressedKeys.clear();
+  for (const i in modifiers) {
+    const mod = modifiers[i];
+    mod.pressed = false;
+  }
+});
+function isMatchingShortcut(shortcut) {
+  for (const combination of shortcut) {
+    if (isMatchingCombination(combination.toLowerCase())) {
+      return true;
+    }
+  }
+  return false;
+}
+function isMatchingCombination(combination) {
+  const splitted = combination.split("+").map((key) => key.trim());
+  const targetKey = splitted.pop();
+  for (const mod in modifiers) {
+    const containsMod = splitted.includes(mod);
+    const isPressed = modifiers[mod].pressed;
+    if (containsMod !== isPressed) {
+      return false;
+    }
+  }
+  return pressedKeys.has(targetKey);
+}
+function formatKey(key) {
+  key = key.toLowerCase();
+  if (key === "ctrl") {
+    return isMac ? "^" : "Ctrl";
+  }
+  if (key === "alt") {
+    return isMac ? "⎇" : "Alt";
+  }
+  if (key === "shift") {
+    return "⇧";
+  }
+  if (key === "meta") {
+    return "⌘";
+  }
+  if (key === "enter") {
+    return "⏎";
+  }
+  return key.charAt(0).toUpperCase() + key.substring(1).toLowerCase();
+}
+export {
+  formatKey,
+  onKeyboardShortcut
+};

package/dist/bundled/util/mapping.js

@@ -0,0 +1,70 @@
+import { markRaw, reactive } from "@histoire/vendors/vue";
+"use strict";
+const copiedFromExistingVariant = [
+  "state",
+  "slots",
+  "source",
+  "responsiveDisabled",
+  "autoPropsDisabled",
+  "setupApp",
+  "configReady",
+  "previewReady"
+];
+function mapFile(file, existingFile) {
+  let result;
+  if (existingFile) {
+    result = existingFile;
+    for (const key in file) {
+      if (key === "story") {
+        result.story = {
+          ...result.story,
+          ...file.story,
+          file: markRaw(result),
+          variants: file.story.variants.map((v) => mapVariant(v, existingFile.story.variants.find((item) => item.id === v.id)))
+        };
+      } else if (key !== "component") {
+        result[key] = file[key];
+      }
+    }
+  } else {
+    result = {
+      ...file,
+      component: markRaw(file.component),
+      story: {
+        ...file.story,
+        title: file.story.title,
+        file: markRaw(file),
+        variants: file.story.variants.map((v) => mapVariant(v)),
+        slots: () => ({})
+      }
+    };
+  }
+  return result;
+}
+function mapVariant(variant, existingVariant) {
+  let result;
+  if (existingVariant) {
+    result = existingVariant;
+    for (const key in variant) {
+      if (!copiedFromExistingVariant.includes(key)) {
+        result[key] = variant[key];
+      }
+    }
+  } else {
+    result = {
+      ...variant,
+      state: reactive({
+        _hPropState: {},
+        _hPropDefs: {}
+      }),
+      setupApp: null,
+      slots: () => ({}),
+      previewReady: false
+    };
+  }
+  return result;
+}
+export {
+  mapFile,
+  mapVariant
+};

package/dist/bundled/util/open-in-editor.js

@@ -0,0 +1,7 @@
+const openInEditorBase = (typeof import.meta !== "undefined" && import.meta.env && import.meta.env.BASE_URL !== undefined) ? import.meta.env.BASE_URL : "/";
+function openInEditor(file) {
+  return fetch(`${openInEditorBase}__open-in-editor?file=${encodeURIComponent(file)}`);
+}
+export {
+  openInEditor
+};

package/dist/bundled/util/preview-settings.js

@@ -0,0 +1,21 @@
+import { reactive } from "@histoire/vendors/vue";
+import { histoireConfig } from "./config.js";
+"use strict";
+const receivedSettings = reactive({});
+function applyPreviewSettings(settings) {
+  Object.assign(receivedSettings, settings);
+  document.documentElement.setAttribute("dir", settings.textDirection);
+  const contrastColor = getContrastColor(settings);
+  document.documentElement.style.setProperty("--histoire-contrast-color", contrastColor);
+  if (histoireConfig.autoApplyContrastColor) {
+    document.documentElement.style.color = contrastColor;
+  }
+}
+function getContrastColor(setting) {
+  return histoireConfig.backgroundPresets.find((preset) => preset.color === setting.backgroundColor)?.contrastColor ?? "unset";
+}
+export {
+  applyPreviewSettings,
+  getContrastColor,
+  receivedSettings
+};

package/dist/bundled/util/responsive.js

@@ -0,0 +1,6 @@
+import { useMediaQuery } from "@histoire/vendors/vue-use";
+"use strict";
+const isMobile = useMediaQuery("(max-width: 640px)");
+export {
+  isMobile
+};

package/dist/bundled/util/sandbox.js

@@ -0,0 +1,11 @@
+import { base } from "../router.js";
+"use strict";
+function getSandboxUrl(story, variant) {
+  const url = new URLSearchParams();
+  url.append("storyId", story.id);
+  url.append("variantId", variant.id);
+  return `${base}__sandbox.html?${url.toString()}`;
+}
+export {
+  getSandboxUrl
+};

package/dist/bundled/util/scroll.js

@@ -0,0 +1,31 @@
+import scrollIntoView from "@histoire/vendors/scroll";
+import { watch, onMounted } from "@histoire/vendors/vue";
+"use strict";
+function useScrollOnActive(active, el) {
+  watch(active, (value) => {
+    if (value) {
+      autoScroll();
+    }
+  });
+  function autoScroll() {
+    if (el.value) {
+      scrollIntoView(el.value, {
+        scrollMode: "if-needed",
+        block: "center",
+        inline: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }
+  onMounted(() => {
+    if (active.value) {
+      autoScroll();
+    }
+  });
+  return {
+    autoScroll
+  };
+}
+export {
+  useScrollOnActive
+};