misaki-studio-internal 0.1.0

package/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "misaki-studio-internal",
+  "version": "0.1.0",
+  "scripts": {
+    "build": "webpack",
+    "publish": "npm publish --access public"
+  },
+  "dependencies": {
+    "@types/lodash": "4.14.202",
+    "axios": "0.25.0",
+    "joi": "18.0.1",
+    "lodash": "4.17.21",
+    "styled-components": "6.1.11",
+    "use-immer": "0.9.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "next": ">=15.5.4"
+  },
+  "devDependencies": {
+    "sass": "1.42.1",
+    "webpack": "5.103.0",
+    "webpack-cli": "6.0.1",
+    "typescript": "5.9.3",
+    "postcss": "8.3.6",
+    "style-loader": "4.0.0",
+    "sass-loader": "16.0.6",
+    "css-loader": "7.1.2",
+    "@types/node": "18.11.19",
+    "@types/react": "18.2.61",
+    "@types/react-dom": "18.2.19",
+    "@types/styled-components": "5.1.26"
+  }
+}

package/src/index.ts

@@ -0,0 +1,26 @@
+import * as api from "./utils/api";
+import * as appear from "./utils/appear";
+import * as blog from "./utils/blog";
+import * as document from "./utils/document";
+import * as operations from "./utils/operations";
+import * as popup from "./utils/popup";
+import * as resizeDetecter from "./utils/resize-detecter";
+import * as storage from "./utils/storage";
+import * as timeline from "./utils/timeline";
+import * as types from "./utils/types";
+import * as useResize from "./utils/use-resize";
+import * as utils from "./utils/utils";
+export {
+  api,
+  appear,
+  blog,
+  document,
+  operations,
+  popup,
+  resizeDetecter,
+  storage,
+  timeline,
+  types,
+  useResize,
+  utils,
+};

package/src/styles.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.scss" {
+  const classes: { [key: string]: string };
+  export default classes;
+}

package/src/utils/api.ts

@@ -0,0 +1,87 @@
+import _ from "lodash";
+import { deepEqual } from "fast-equals";
+import { useMemo, useState } from "react";
+import axios from "axios";
+
+export type Request<Query, Body> = {
+  config: {
+    host: string;
+    path: string;
+  };
+  query: Query;
+  body: Body;
+};
+
+export class ApiLoader<Query, Body, Response> {
+  response?: Response;
+  error?: string;
+  loading: boolean = false;
+  onUpdate?: () => void;
+  request?: Request<Query, Body>;
+  controller = new AbortController();
+
+  constructor(onUpdate?: () => void) {
+    this.onUpdate = onUpdate;
+  }
+
+  load(request: Request<Query, Body>) {
+    if (deepEqual(request, this.request)) return;
+    if (this.loading) this.controller.abort();
+    this.controller = new AbortController();
+    this.request = request;
+    this.loading = true;
+    this.onUpdate?.();
+    const { config, body } = request;
+    const query = Object.entries(request.query || {}).reduce(
+      (prev, [key, param], index) => {
+        if (index === 0) {
+          return `?${key}=${param}`;
+        } else {
+          return `${prev}&${key}=${param}`;
+        }
+      },
+      "",
+    );
+    axios({
+      signal: this.controller.signal,
+      method: "post",
+      url: `${config.host}/${config.path.startsWith("/") ? config.path.slice(1) : config.path}${query}`,
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: body,
+    })
+      .then((response) => {
+        this.response = response.data;
+        this.error = undefined;
+        this.loading = false;
+        this.onUpdate?.();
+      })
+      .catch((error: any) => {
+        this.response = undefined;
+        this.error = error?.message || "Unknown Error";
+        this.loading = false;
+        this.onUpdate?.();
+      });
+  }
+}
+
+export const useApi = <Query, Body, Response>(
+  request: Request<Query, Body>,
+) => {
+  const [, update] = useState({});
+  const loader = useMemo(() => {
+    return new ApiLoader<Query, Body, Response>(() => {
+      update({});
+    });
+  }, []);
+  loader.load(request);
+  return {
+    loading: loader.loading,
+    response: {
+      body: loader.response,
+    },
+    error: loader.error,
+    request: loader.request,
+  };
+};

package/src/utils/appear.ts

@@ -0,0 +1,270 @@
+const appear = function (window: Window & typeof globalThis) {
+  var scrollLastPos: number | null = null,
+    scrollTimer = 0 as any,
+    scroll = {} as any;
+
+  function track() {
+    var newPos = window.scrollY || window.pageYOffset; // pageYOffset for IE9
+    if (scrollLastPos != null) {
+      scroll.velocity = newPos - scrollLastPos;
+      scroll.delta =
+        scroll.velocity >= 0 ? scroll.velocity : -1 * scroll.velocity;
+    }
+    scrollLastPos = newPos;
+    if (scrollTimer) {
+      clearTimeout(scrollTimer);
+    }
+    scrollTimer = setTimeout(function () {
+      scrollLastPos = null;
+    }, 30);
+  }
+  addEventListener("scroll", track, false);
+
+  function viewable(el: HTMLElement, bounds: any) {
+    var rect = el.getBoundingClientRect();
+    return (
+      rect.top + rect.height >= 0 &&
+      rect.left + rect.width >= 0 &&
+      rect.bottom - rect.height <=
+        (window.innerHeight || document.documentElement.clientHeight) +
+          bounds &&
+      rect.right - rect.width <=
+        (window.innerWidth || document.documentElement.clientWidth) + bounds
+    );
+  }
+
+  return function (obj: any) {
+    const fn = function () {
+      var initd = false,
+        elements: any[] = [],
+        elementsLength: number,
+        reappear: boolean[] = [],
+        appeared = 0,
+        disappeared = 0,
+        timer: string | number | NodeJS.Timeout | undefined,
+        deltaSet: boolean,
+        opts = {} as any,
+        done: boolean;
+
+      // called on scroll and resize event, so debounce the actual function that does
+      // the heavy work of determining if an item is viewable and then "appearing" it
+      function checkAppear() {
+        if (scroll.delta < opts.delta.speed) {
+          if (!deltaSet) {
+            deltaSet = true;
+            doCheckAppear();
+            setTimeout(function () {
+              deltaSet = false;
+            }, opts.delta.timeout);
+          }
+        }
+        doCheckAppear();
+      }
+
+      function begin() {
+        // initial appear check before any scroll or resize event
+        setTimeout(() => {
+          doCheckAppear();
+        }, 100);
+
+        // add relevant listeners
+        addEventListener("scroll", checkAppear, false);
+        addEventListener("wheel", checkAppear, false);
+        addEventListener("resize", checkAppear, false);
+      }
+
+      function end() {
+        elements = [];
+        if (timer) {
+          clearTimeout(timer);
+        }
+        removeListeners();
+      }
+
+      function removeListeners() {
+        removeEventListener("scroll", checkAppear, false);
+        removeEventListener("resize", checkAppear, false);
+      }
+
+      function doCheckAppear() {
+        if (done) {
+          return;
+        }
+        elements.forEach(function (n, i) {
+          if (n && viewable(n, opts.bounds)) {
+            // only act if the element is eligible to reappear
+            if (reappear[i]) {
+              // mark this element as not eligible to appear
+              reappear[i] = false;
+              // increment the count of appeared items
+              appeared++;
+              // call the appear fn
+              if (opts.appear) {
+                opts.appear(n);
+              }
+              // if not tracking reappears or disappears, need to remove node here
+              if (!opts.disappear && !opts.reappear) {
+                // stop tracking this node, which is now viewable
+                elements[i] = null;
+              }
+            }
+          } else {
+            if (reappear[i] === false) {
+              if (opts.disappear) {
+                opts.disappear(n);
+              }
+              // increment the dissappeared count
+              disappeared++;
+              // if not tracking reappears, need to remove node here
+              if (!opts.reappear) {
+                // stop tracking this node, which is now viewable
+                elements[i] = null;
+              }
+            }
+            // element is out of view and eligible to be appeared again
+            reappear[i] = true;
+          }
+        });
+
+        // remove listeners if all items have (re)appeared
+        if (
+          !opts.reappear &&
+          (!opts.appear || (opts.appear && appeared === elementsLength)) &&
+          (!opts.disappear ||
+            (opts.disappear && disappeared === elementsLength))
+        ) {
+          // ensure done is only called once (could be called from a trailing debounce/throttle)
+          done = true;
+          removeListeners();
+          // all items have appeared, so call the done fn
+          if (opts.done) {
+            opts.done();
+          }
+        }
+      }
+
+      function init() {
+        // make sure we only init once
+        if (initd) {
+          return;
+        }
+        initd = true;
+
+        // call the obj init fn
+        if (opts.init) {
+          opts.init();
+        }
+        // get the elements to work with
+        var els;
+        if (typeof opts.elements === "function") {
+          els = opts.elements();
+        } else {
+          els = opts.elements;
+        }
+        if (els) {
+          //  put elements into an array object to work with
+          elementsLength = els.length;
+          for (var i = 0; i < elementsLength; i += 1) {
+            elements.push(els[i]);
+            reappear.push(true);
+          }
+          begin();
+        }
+      }
+
+      var appear = function (obj: any) {
+        obj = obj || {};
+
+        // assign the fn to execute when a node is visible
+        opts = {
+          // a function to be run when the dom is ready (allows for any setup work)
+          init: obj.init,
+          // either an array of elements or a function that will return an htmlCollection
+          elements: obj.elements,
+          // function to call when an element is "viewable", will be passed the element to work with
+          appear: obj.appear,
+          // function to call when an element is no longer "viewable", will be passed the element to work with
+          disappear: obj.disappear,
+          // function to call when all the elements have "appeared"
+          done: obj.done,
+          // keep tracking the elements
+          reappear: obj.reappear,
+          // the extra border around an element to make it viewable outside of the true viewport
+          bounds: obj.bounds || 0,
+          // the debounce timeout
+          debounce: obj.debounce || 50,
+          // appear.js will also check for items on continuous slow scrolling
+          // you can controll how slow the scrolling should be  (deltaSpeed)
+          // and when it will check again (deltaTimeout) after it has inspected the dom/viewport;
+          delta: {
+            speed: obj.deltaSpeed || 50,
+            timeout: obj.deltaTimeout || 500,
+          },
+        };
+
+        // add an event listener to init when dom is ready
+        addEventListener("DOMContentLoaded", init, false);
+
+        // http://stackoverflow.com/questions/9900311/how-do-i-target-only-internet-explorer-10-for-certain-situations-like-internet-e/13971998#13971998
+        var isIE10 = false;
+        if (Function("/*@cc_on return document.documentMode===10@*/")()) {
+          isIE10 = true;
+        }
+        var completeOrLoaded =
+          document.readyState === "complete" ||
+          document.readyState === ("loaded" as any);
+
+        // call init if document is ready to be worked with and we missed the event
+        if (isIE10) {
+          if (completeOrLoaded) {
+            init();
+          }
+        } else {
+          if (completeOrLoaded || document.readyState === "interactive") {
+            init();
+          }
+        }
+
+        return {
+          // manually fire check for visibility of tracked elements
+          trigger: function trigger() {
+            doCheckAppear();
+          },
+          // pause tracking of elements
+          pause: function pause() {
+            removeListeners();
+          },
+          // resume tracking of elements after a pause
+          resume: function resume() {
+            begin();
+          },
+          // provide a means to stop monitoring all elements
+          destroy: function destroy() {
+            end();
+          },
+        };
+      };
+      return appear;
+    };
+    return fn()(obj);
+  };
+};
+
+type Param = {
+  init?: () => void;
+  elements: () => HTMLElement[];
+  appear: (el: HTMLElement) => void;
+  disappear?: (el: HTMLElement) => void;
+  bounds: number;
+  reappear: boolean;
+};
+
+export type Return = {
+  trigger: () => void;
+  pause: () => void;
+  resume: () => void;
+  destroy: () => void;
+};
+
+export const onAppear: () => (param: Param) => Return = () =>
+  appear(window) as any;

package/src/utils/blog.tsx

@@ -0,0 +1,223 @@
+import { useRouter } from "next/router";
+import { CSSProperties, useState } from "react";
+import styled from "styled-components";
+
+export type Blog<T = never> = {
+  pagePath: string;
+  name: string;
+  children?: Blog<T>[];
+  properties?: T;
+};
+
+export const Item = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  user-select: none;
+  white-space: pre-line;
+  width: 100%;
+  height: auto;
+  justify-content: start;
+  align-items: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  border-radius: 8px;
+  height: auto;
+  &.hide-arrow {
+    > .icon {
+      display: none;
+    }
+    > .text {
+      padding-left: 8px;
+    }
+  }
+  > .icon {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 30px;
+    height: 30px;
+    &.open {
+      rotate: 90deg;
+    }
+    &.hide {
+      user-select: none;
+      opacity: 0;
+    }
+  }
+  > .text {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+    width: auto;
+    height: 30px;
+    padding: 8px;
+    padding-left: 0px;
+    flex: 1;
+  }
+  &:hover {
+    background-color: #0000000a;
+  }
+`;
+
+export const BlogItem = <T,>({
+  item,
+  level,
+  onClick,
+  itemWrapper,
+  isRoot,
+}: {
+  item: Blog<T>;
+  level: number;
+  onClick?: (id: string) => void;
+  itemWrapper?: BlogItemWrapper;
+  isRoot?: boolean;
+}) => {
+  const router = useRouter();
+  const currentPath = location.pathname.slice(0, -1);
+  const isPageOpen =
+    location.pathname.startsWith(item.pagePath) &&
+    currentPath !== item.pagePath;
+  const [isOpen, setOpen] = useState(isPageOpen);
+  const ItemWrapper = itemWrapper;
+  const rootPath = isRoot
+    ? item.pagePath.split("/").slice(0, -1).join("/")
+    : undefined;
+
+  const isSelected =
+    router.asPath === item.pagePath || rootPath === router.asPath;
+  return (
+    <>
+      {ItemWrapper ? (
+        <ItemWrapper
+          properties={{
+            title: item.name,
+            isSelected,
+          }}
+          events={{
+            click: () => {
+              if (onClick) {
+                onClick(item.pagePath);
+              } else {
+                router.push(item.pagePath);
+              }
+            },
+          }}
+          style={{
+            paddingLeft: `${level * 15}px`,
+          }}
+        />
+      ) : (
+        <Item
+          style={{
+            paddingLeft: `${level * 15}px`,
+          }}
+        >
+          <div
+            onClick={() => setOpen(!isOpen)}
+            className={`icon ${isOpen ? "open" : "close"}`}
+          >
+            {item.children?.length ? (
+              <svg
+                width="7"
+                height="12"
+                viewBox="0 0 7 12"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0.0854187 1.36887L0.746734 0.696899L6.09215 5.95757L5.43083 6.62954L0.0854187 1.36887Z"
+                  fill="black"
+                />
+                <path
+                  d="M5.42025 5.29636L6.09215 5.95757L0.831473 11.3032L0.159501 10.6419L5.42025 5.29636Z"
+                  fill="black"
+                />
+              </svg>
+            ) : (
+              <svg
+                width="6"
+                height="6"
+                viewBox="0 0 6 6"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle cx="3.44977" cy="2.93213" r="2" stroke="#666666" />
+              </svg>
+            )}
+          </div>
+          <div
+            onClick={() => {
+              if (onClick) {
+                onClick(item.pagePath);
+              } else {
+                router.push(item.pagePath);
+              }
+            }}
+            className="text"
+          >
+            {item.name}
+          </div>
+        </Item>
+      )}
+
+      {!!item.children?.length && isOpen && (
+        <BlogList
+          onClick={onClick}
+          list={item.children}
+          level={level + 1}
+          itemWrapper={itemWrapper}
+        />
+      )}
+    </>
+  );
+};
+
+export const BlogList = <T = never,>(props: {
+  list: Blog<T>[];
+  onClick?: (id: string) => void;
+  level: number;
+  itemWrapper?: BlogItemWrapper;
+  isRoot?: boolean;
+}) => {
+  return (
+    <>
+      {props.list.map((item, index) => (
+        <BlogItem
+          item={item}
+          onClick={props.onClick}
+          key={item.pagePath}
+          level={props.level}
+          itemWrapper={props.itemWrapper}
+          isRoot={index === 0 && props.isRoot}
+        />
+      ))}
+    </>
+  );
+};
+
+type BlogItemWrapper = (props: {
+  properties?: { title: string; isSelected: boolean };
+  events?: { open?: () => void; click?: () => void };
+  style?: CSSProperties | undefined;
+}) => JSX.Element;
+
+export const BlogSideBar = <T = never,>(props: {
+  list: Blog<T>[];
+  itemWrapper?: BlogItemWrapper;
+  onClick?: (id: string) => void;
+}) => {
+  return (
+    <>
+      <BlogList
+        onClick={props.onClick}
+        list={props.list}
+        level={0}
+        itemWrapper={props.itemWrapper}
+        isRoot={true}
+      />
+    </>
+  );
+};