buner 0.0.2 → 1.0.0

package/xpack/root/state-animation-html.tsx

@@ -0,0 +1,18 @@
+export default function StateAnimationHtml(model: { keyExist: boolean }) {
+  return model.keyExist ? (
+    <></>
+  ) : (
+    <div className="pl-state-toggle__circles">
+      <div className="pl-state-toggle__circle" />
+      <div className="pl-state-toggle__circle" />
+      <div className="pl-state-toggle__circle" />
+      <div className="pl-state-toggle__circle" />
+      <div className="pl-state-toggle__circle" />
+      <div className="pl-state-toggle__circle" />
+      <div className="pl-state-toggle__circle" />
+      <div className="pl-state-toggle__circle" />
+      <div className="pl-state-toggle__circle" />
+      <div className="pl-state-toggle__circle" />
+    </div>
+  );
+}

package/xpack/root/template.tsx

@@ -0,0 +1,23 @@
+import { RootModel } from '@_types/types';
+import RequireJs from '@helpers/RequireJs';
+import ReactSection from '@helpers/ReactSection';
+
+export default function Template(model: RootModel) {
+  return (
+    <main className="xpack-t-root">
+      {model && <ReactSection css={'root'} data={model} type="root" />}
+
+      <div className="xpack-t-root__target-wrapper" id="root-iframe-wrapper">
+        <iframe
+          className="xpack-t-root__target"
+          id="root-iframe"
+          name="inner"
+          sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals allow-downloads allow-popups-to-escape-sandbox allow-presentation allow-top-navigation"
+          title="Pages"
+        />
+        <div className="xpack-t-root__target-resizer" id="root-iframe-resizer" />
+        <RequireJs defer path="root" />
+      </div>
+    </main>
+  );
+}

package/xpack/root/use-click-outside.ts

@@ -0,0 +1,37 @@
+import { RefObject, useEffect } from 'react';
+
+export function useOnClickOutside(
+  ref: RefObject<HTMLElement | null>,
+  handler: (event?: MouseEvent | TouchEvent) => void,
+  otherDependenceRef?: RefObject<HTMLElement | null>[]
+) {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!event.target || !ref.current || ref.current.contains(event.target as Node)) {
+        return;
+      }
+
+      if (otherDependenceRef && otherDependenceRef.some((r) => r.current?.contains(event.target as Node))) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    const handleWindowBlur = () => {
+      handler();
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    window.addEventListener('blur', handleWindowBlur);
+
+    // Cleanup the event listeners on component unmount
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+      window.removeEventListener('blur', handleWindowBlur);
+    };
+  }, [ref, handler, otherDependenceRef]);
+}

package/xpack/scripts/color-mode.entry.ts

@@ -0,0 +1,28 @@
+import { THEME_KEY, switchTheme } from '@helpers/handleTheme';
+
+/**
+ * Handle storage change
+ */
+const handleStorageChange = (event: StorageEvent) => {
+  switch (event.key) {
+    case THEME_KEY: {
+      document.documentElement.setAttribute('data-theme', event.newValue as string);
+      break;
+    }
+  }
+};
+
+const handleToggleTheme = () => {
+  switchTheme();
+};
+
+const themeToggle = document.querySelector('.zzz-o-header__theme-toggle');
+
+if (themeToggle) {
+  themeToggle.addEventListener('click', () => {
+    switchTheme();
+  });
+}
+
+window.addEventListener('storage', handleStorageChange);
+window.addEventListener('toggleTheme', handleToggleTheme);

package/xpack/scripts/mock-api.entry.ts

@@ -0,0 +1,11 @@
+import { worker } from '@mocks/browser';
+
+worker.start({
+  serviceWorker: {
+    url: `${import.meta.env.VITE_BASE_URL}mockServiceWorker.js`,
+    options: {
+      scope: `${import.meta.env.VITE_BASE_URL}`,
+    },
+  },
+  onUnhandledRequest: 'bypass',
+});

package/xpack/scripts/pl-states.entry.ts

@@ -0,0 +1,321 @@
+interface Theme {
+  value: string;
+  name: string;
+}
+
+interface StateOption {
+  name: string;
+  value: string;
+}
+
+interface State {
+  name: string;
+  options?: StateOption[];
+  multiple?: boolean;
+}
+
+interface StateButton {
+  parentSelector?: string;
+  styleModifier: string;
+  zIndex?: number;
+}
+
+interface ComponentState {
+  name: string;
+  selector: string;
+  button?: StateButton;
+  states: State[];
+}
+
+let index = 100000;
+
+const themes: Theme[] = [
+  {
+    value: 'theme-blue-p',
+    name: 'Blue',
+  },
+  {
+    value: 'theme-white-p',
+    name: 'White',
+  },
+  {
+    value: 'theme-sand-s',
+    name: 'Sand',
+  },
+  {
+    value: 'theme-flow-25',
+    name: 'Flow 25',
+  },
+  {
+    value: 'theme-wave-ac',
+    name: 'Wave',
+  },
+  {
+    value: 'theme-wave-50',
+    name: 'Wave 50',
+  },
+  {
+    value: 'theme-pearl-s',
+    name: 'Pearl',
+  },
+  {
+    value: 'theme-pebble-s',
+    name: 'Pebble',
+  },
+];
+
+const newId = () => {
+  return 'pl-state-id-' + index++;
+};
+
+const createSelect = (state: State, classList: DOMTokenList) => {
+  if (!state.options) {
+    return '';
+  }
+
+  const options = state.options;
+  const name = newId();
+  const header = state.multiple ? 'Select many...' : (options.find((o) => classList.contains(o.value))?.name ?? '---');
+  const type = state.multiple ? 'checkbox' : 'radio';
+
+  let optionsHtml = '';
+
+  options.forEach((option: StateOption) => {
+    const selectedHtml = classList.contains(option.value) ? 'checked' : '';
+    const id = newId();
+
+    optionsHtml +=
+      `<input name="${name}" class="pl-state-bar__input" type="${type}" id="${id}" data-name="${option.name}" value="${option.value}" ${selectedHtml}/>` +
+      `<label class="pl-state-bar__label" for="${id}"><span>${option.name}</span></label>`;
+  });
+
+  const html =
+    '<div class="pl-state-bar__group">' +
+    `<div>${state.name}:</div>` +
+    `<div class="pl-state-bar__group-header">${header}</div>` +
+    `<div class="pl-state-bar__checkbox-group">${optionsHtml}</div>` +
+    '</div>';
+
+  return html;
+};
+
+const deactiveStateButtons = () => {
+  const stateButtons = [...document.querySelectorAll('.pl-state__button')];
+
+  stateButtons.forEach((stateButton) => stateButton.classList.remove('active'));
+};
+
+const closeButtonClickHandler = (stateBar: HTMLElement) => {
+  stateBar.classList.remove('expand');
+  document.body.classList.remove('pl-state-expand');
+  deactiveStateButtons();
+  window.dispatchEvent(new Event('resize'));
+};
+
+const stateButtonClickHandler = (item: HTMLElement, stateButton: HTMLElement, plState: ComponentState) => {
+  deactiveStateButtons();
+
+  const stateBar: HTMLElement | null = document.querySelector('.pl-state-bar');
+
+  if (!stateBar) {
+    return;
+  }
+
+  if (stateButton.classList.contains('active')) {
+    closeButtonClickHandler(stateBar);
+
+    return;
+  }
+
+  const stateBarContent = stateBar.querySelector('.pl-state-bar__content');
+
+  if (stateBarContent) {
+    let stateBarContentHtml = '';
+    let index = 0;
+
+    plState.states.forEach((state) => {
+      const combinedState = state.name === 'Theme' && !state.options ? { ...state, options: themes } : state;
+
+      stateBarContentHtml += createSelect(combinedState, item.classList);
+
+      index++;
+
+      if (index == 1) {
+        stateBarContentHtml += stateBarCloseButtonHtml();
+      }
+    });
+    stateBarContent.innerHTML = stateBarContentHtml;
+
+    const closeButton = stateBarContent.querySelector('.pl-state-bar__close-button');
+
+    if (closeButton) {
+      closeButton.addEventListener('click', () => closeButtonClickHandler(stateBar));
+    }
+
+    const stateBarGroups = [...stateBarContent.querySelectorAll('.pl-state-bar__group')];
+
+    stateBarGroups.forEach((stateBarGroup) => {
+      const stateBarGroupHeader = stateBarGroup.querySelector('.pl-state-bar__group-header');
+      const checkboxGroup = stateBarGroup.querySelector('.pl-state-bar__checkbox-group');
+
+      if (!stateBarGroupHeader || !checkboxGroup) {
+        return;
+      }
+
+      if (stateBarGroupHeader) {
+        stateBarGroupHeader.addEventListener('click', () => {
+          checkboxGroup.classList.toggle('expand');
+        });
+        document.addEventListener('click', (e: MouseEvent) => {
+          if (!e.target) {
+            return;
+          }
+
+          const node = e.target as Node;
+
+          if (!checkboxGroup.contains(node) && !stateBarGroupHeader.contains(node)) {
+            checkboxGroup.classList.remove('expand');
+          }
+        });
+      }
+
+      const checkboxes = stateBarGroup.querySelectorAll("input[type='checkbox']");
+
+      [].forEach.call(checkboxes, (checkbox: HTMLInputElement) => {
+        checkbox.addEventListener('change', () => {
+          if (!checkbox.value) {
+            return;
+          }
+
+          if (checkbox.checked) {
+            item.classList.add(checkbox.value);
+          } else {
+            item.classList.remove(checkbox.value);
+          }
+          window.dispatchEvent(new Event('resize'));
+        });
+      });
+
+      const radios = stateBarGroup.querySelectorAll("input[type='radio']");
+
+      [].forEach.call(radios, (radio: HTMLInputElement) => {
+        radio.addEventListener('change', () => {
+          [].forEach.call(radios, (r: HTMLInputElement) => {
+            if (r.value) {
+              item.classList.remove(r.value);
+            }
+          });
+          if (radio.value) {
+            item.classList.add(radio.value);
+          }
+          stateBarGroupHeader.textContent = radio.getAttribute('data-name');
+          checkboxGroup.classList.remove('expand');
+        });
+      });
+
+      const radioLabels = [...stateBarGroup.querySelectorAll("input[type='radio'] + label")];
+
+      radioLabels.forEach((radioLabel) => {
+        radioLabel.addEventListener('click', () => {
+          checkboxGroup.classList.remove('expand');
+        });
+      });
+    });
+
+    stateBar.classList.add('expand');
+    stateButton.classList.add('active');
+    document.body.classList.add('pl-state-expand');
+    window.dispatchEvent(new Event('resize'));
+  }
+};
+const stateBarCloseButtonHtml = () => {
+  return '<div class="pl-state-bar__buttons"><a class="pl-state-bar__close-button"></a></div>';
+};
+
+const appendButtons = (states: ComponentState[]) => {
+  const stateBarHtml = `<div class="pl-state-bar"><div class="pl-state-bar__content"></div>${stateBarCloseButtonHtml()}</div>`;
+
+  document.body.insertAdjacentHTML('beforeend', stateBarHtml);
+  const stateBar: HTMLElement | null = document.querySelector('.pl-state-bar');
+
+  if (!stateBar) {
+    return;
+  }
+
+  const closeButton = stateBar.querySelector('.pl-state-bar__close-button');
+
+  if (closeButton) {
+    closeButton.addEventListener('click', () => closeButtonClickHandler(stateBar));
+  }
+
+  [].forEach.call(states, (plState: ComponentState) => {
+    if (!plState || !plState.selector) {
+      return;
+    }
+
+    const buttonModifier = plState.button?.styleModifier ?? '';
+    const buttonTitle = plState.name ? `title="Show state modifier for: ${plState.name}"` : '';
+    const buttonZIndex = plState.button?.zIndex ? `style="z-index: ${plState.button.zIndex};"` : '';
+
+    const items = document.querySelectorAll(plState.selector);
+
+    [].forEach.call(items, (item: HTMLElement) => {
+      const html =
+        `<div class="pl-state ${buttonModifier}" ${buttonZIndex}>` +
+        '<div class="pl-state__controls">' +
+        `<button class="pl-state__button" ${buttonTitle}>` +
+        `<img src="${import.meta.env.BASE_URL}pl-states.svg" loading="async">` +
+        '</button></div></div>';
+
+      const stateButtonParent = plState.button?.parentSelector ? item.querySelector(plState.button.parentSelector) : item;
+
+      if (!stateButtonParent) {
+        return;
+      }
+      stateButtonParent.insertAdjacentHTML('beforeend', html);
+
+      const stateContainer: HTMLElement | null = stateButtonParent.querySelector(':scope > .pl-state');
+
+      if (!stateContainer) {
+        return;
+      }
+
+      const stateButton: HTMLElement | null = stateContainer.querySelector('.pl-state__button');
+
+      if (stateButton) {
+        stateButton.addEventListener('click', () => {
+          stateButtonClickHandler(item, stateButton, plState);
+        });
+      }
+    });
+  });
+
+  addEventListener('resize', function () {
+    const stateBar = document.querySelector('.pl-state-bar');
+
+    if (!stateBar) {
+      return;
+    }
+
+    const stateBarRect = stateBar.getBoundingClientRect();
+
+    document.documentElement.style.setProperty('--pl-state-bar-height', Math.ceil(stateBarRect.height) + 'px');
+  });
+};
+
+const init = () => {
+  const localStorageKey = 'pl-show-state-selector';
+  const showStateSelector = localStorage.getItem(localStorageKey);
+
+  if (!showStateSelector) {
+    return;
+  }
+
+  fetch(import.meta.env.BASE_URL + 'pl-states.json')
+    .then((response) => response.json())
+    .then((data) => appendButtons(data));
+};
+
+init();
+
+export {};

package/xpack/scripts/root.entry.ts

@@ -0,0 +1,135 @@
+const BORDER_SIZE = 20;
+const MIN_FRAME_SIZE = 350;
+const MSG_IFRAME_SIZE = 'MSG_IFRAME_SIZE';
+
+let orgWidth: number;
+let pos: number;
+
+const wrapper = document.getElementById('root-iframe-wrapper');
+const frame = document.getElementById('root-iframe');
+const resizer = document.getElementById('root-iframe-resizer');
+
+let iframeSize = sessionStorage.getItem(MSG_IFRAME_SIZE);
+
+const setIFrameWidth = (width?: number) => {
+  if (!wrapper) {
+    return;
+  }
+
+  if (width) {
+    wrapper.style.maxWidth = `min(100%, ${width}px)`;
+  } else {
+    wrapper.style.removeProperty('max-width');
+  }
+};
+
+const resize = (e: globalThis.MouseEvent) => {
+  e.stopPropagation();
+  e.preventDefault();
+  const dx = (e.x - pos) * 2;
+
+  const size = Math.max(MIN_FRAME_SIZE, orgWidth + dx);
+
+  setIFrameWidth(size);
+  iframeSize = size + '';
+
+  return false;
+};
+
+const mouseUp = () => {
+  if (!wrapper || !frame) {
+    return;
+  }
+
+  wrapper.style.removeProperty('transition');
+  frame.style.removeProperty('pointer-events');
+  iframeSize && sessionStorage.setItem(MSG_IFRAME_SIZE, iframeSize);
+
+  document.removeEventListener('mousemove', resize, false);
+};
+
+const handleResizerMouseDown = (e: MouseEvent) => {
+  if (!wrapper || !frame || e.offsetX >= BORDER_SIZE) {
+    return;
+  }
+
+  wrapper.style.transition = 'none';
+  frame.style.pointerEvents = 'none';
+  pos = e.x;
+  orgWidth = parseInt(getComputedStyle(wrapper, '').width);
+  document.addEventListener('mousemove', resize, false);
+  document.addEventListener('mouseup', mouseUp, false);
+};
+
+const initTopPanel = () => {
+  const isTopPanel = localStorage.getItem('MSG_IS_TOP_PANEL') === 'true';
+  const rootEl = document.querySelector('.xpack-t-root');
+
+  if (!rootEl) {
+    return;
+  }
+  if (isTopPanel) {
+    rootEl.classList.add('top-panel');
+  }
+};
+
+const handleStoreModified = (event: StorageEvent) => {
+  switch (event.key) {
+    case 'MSG_IS_TOP_PANEL': {
+      const isTopPanel = event.newValue === 'true';
+      const rootEl = document.querySelector('.xpack-t-root');
+
+      if (!rootEl) {
+        return;
+      }
+
+      if (isTopPanel) {
+        rootEl.classList.add('top-panel');
+      } else {
+        rootEl.classList.remove('top-panel');
+      }
+      break;
+    }
+  }
+};
+
+const addStoreEvent = () => {
+  window.addEventListener('storage', handleStoreModified);
+};
+
+const setup = () => {
+  if (!resizer || !frame) {
+    return;
+  }
+
+  resizer.onmousedown = handleResizerMouseDown;
+  setIFrameWidth(iframeSize ? parseInt(iframeSize) : undefined);
+
+  const getIFrameActualWidth = () => {
+    const el = document.getElementById('root-actual-iframe-width');
+
+    if (el) {
+      el.textContent = Math.ceil(parseInt(getComputedStyle(frame).width)) + 'px';
+    }
+  };
+
+  frame.onload = getIFrameActualWidth;
+
+  if ('ResizeObserver' in window) {
+    // create an Observer instance
+    const resizeObserver = new ResizeObserver(getIFrameActualWidth);
+
+    // start observing a DOM node
+    resizeObserver.observe(frame);
+  }
+  initTopPanel();
+  addStoreEvent();
+
+  if (wrapper) {
+    window.onload = () => wrapper.classList.add('initialized');
+  }
+};
+
+setup();
+
+export {};

package/xpack/scripts/theme-critical.entry.ts

@@ -0,0 +1,20 @@
+(() => {
+  // enforce local storage setting but also fallback to user-agent preferences
+
+  const THEME_KEY = 'MSG_THEME';
+
+  const urlParams = new URLSearchParams(window.location.search);
+  const theme = urlParams.get('theme');
+
+  if (theme === 'dark' || theme == 'light') {
+    document.documentElement.setAttribute('data-theme', theme);
+
+    return;
+  }
+
+  if (localStorage.getItem(THEME_KEY) === 'dark' || (!localStorage.getItem(THEME_KEY) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    document.documentElement.setAttribute('data-theme', 'dark');
+  }
+})();
+
+export {};

package/xpack/states.schema.json

@@ -0,0 +1,61 @@
+{
+  "$schema": "http://json-schema.org/draft-04/schema#",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string"
+    },
+    "selector": {
+      "type": "string"
+    },
+    "button": {
+      "type": "object",
+      "properties": {
+        "parentSelector": {
+          "type": "string"
+        },
+        "styleModifier": {
+          "type": "string"
+        },
+        "zIndex": {
+          "type": "integer"
+        }
+      }
+    },
+    "states": {
+      "type": "array",
+      "items": [
+        {
+          "type": "object",
+          "properties": {
+            "name": {
+              "type": "string"
+            },
+            "options": {
+              "type": "array",
+              "items": [
+                {
+                  "type": "object",
+                  "properties": {
+                    "value": {
+                      "type": "string"
+                    },
+                    "name": {
+                      "type": "string"
+                    }
+                  },
+                  "required": ["name"]
+                }
+              ]
+            },
+            "multiple": {
+              "type": "boolean"
+            }
+          },
+          "required": ["name"]
+        }
+      ]
+    }
+  },
+  "required": ["name", "selector", "states"]
+}

package/xpack/styles/_border.scss

@@ -0,0 +1,22 @@
+@use 'px2rem' as *;
+@use 'theme' as *;
+
+@mixin border {
+  border: px2rem(1px) solid $border-color;
+}
+
+@mixin border-top {
+  border-top: px2rem(1px) solid $border-color;
+}
+
+@mixin border-bottom {
+  border-bottom: px2rem(1px) solid $border-color;
+}
+
+@mixin border-left {
+  border-left: px2rem(1px) solid $border-color;
+}
+
+@mixin border-right {
+  border-right: px2rem(1px) solid $border-color;
+}