misaki-studio-internal 0.1.0

package/src/utils/utils.ts

@@ -0,0 +1,251 @@
+import { useEffect, useMemo, useRef } from "react";
+import { deepEqual } from "fast-equals";
+let count = 0;
+
+const getCount = () => {
+  return useMemo(() => `C${++count}`, []);
+};
+
+const useDidUpdateEffect = (props: {
+  values: any[];
+  option: {
+    debounce: boolean;
+    delay: number;
+    runOnInit: boolean;
+  };
+  on: () => void;
+}) => {
+  const isMountingRef = useRef(false);
+
+  useEffect(() => {
+    isMountingRef.current = true;
+  }, []);
+
+  useEffect(() => {
+    if (!isMountingRef.current || props.option.runOnInit) {
+      return props.on();
+    } else {
+      isMountingRef.current = false;
+    }
+  }, props.values);
+};
+
+const loopOnRange = <T,>(
+  from: number,
+  to: number,
+  fn: (index: number) => T,
+) => {
+  const list: T[] = [];
+  const length = to < from ? to - from : from - to;
+  list.length = length;
+  for (let index = 0; index < length; index++) {
+    list[index] = fn(index);
+  }
+  return list;
+};
+
+const loopOnString = <T,>(
+  str: string,
+  fn: (character: string, index: number) => T,
+) => {
+  const list: T[] = [];
+  const length = str.length;
+  list.length = length;
+  for (let index = 0; index < length; index++) {
+    list[index] = fn(str[index], index);
+  }
+  return list;
+};
+
+const loopOnObject = <T,>(
+  object: any,
+  fn: (key: string, value: any, index: number) => T,
+) => {
+  const list: T[] = [];
+  const entries = Object.entries(object);
+  const length = entries.length;
+  list.length = length;
+  for (let index = 0; index < length; index++) {
+    list[index] = fn(entries[index][0], entries[index][1], index);
+  }
+  return list;
+};
+
+const loopOnArray = <T, A>(
+  array: A[],
+  fn: (value: A, index: number, isLastStep: boolean) => T,
+) => {
+  const list: T[] = [];
+  const length = array.length;
+  list.length = length;
+  for (let index = 0; index < length; index++) {
+    list[index] = fn(array[index], index, length === index + 1);
+  }
+  return list;
+};
+
+const toText = (value: string | number | boolean | null | undefined) => {
+  if (typeof value === "string") {
+    return value;
+  } else if (typeof value === "number") {
+    return value.toString();
+  } else if (typeof value === "boolean") {
+    return value.toString();
+  }
+  return undefined;
+};
+
+const toStyle = (value?: {
+  width?: { value: undefined; type: string };
+  height?: { value: undefined; type: string };
+  fill?: string;
+  image?: string;
+}) => {
+  return {
+    width: value?.width ? value.width.value + value.width.type : undefined,
+    height: value?.height ? value.height.value + value.height.type : undefined,
+    backgroundColor: value?.fill,
+    backgroundImage: value?.image,
+  };
+};
+
+export enum ScrollElementConfig {
+  TOP = 1,
+  LEFT = 2,
+  RIGHT = 3,
+  BOTTOM = 4,
+}
+
+export enum ScrollElementOrator {
+  PLUS = 1,
+  MINUS = 2,
+}
+
+const scrollTo = (param: {
+  container?: string;
+  target?: string;
+  config?: ScrollElementConfig;
+  operator?: ScrollElementOrator;
+  value?: number;
+}) => {
+  const container = param.container
+    ? document.querySelector(param.container)
+    : document.querySelector("#__next");
+  const value = param.value || 0;
+  let targetElement = param.target
+    ? document.querySelector(param.target)
+    : undefined;
+  if (container) {
+    let targetValue = 0;
+    const containerRect = container.getBoundingClientRect();
+    if (targetElement) {
+      const targetRect = targetElement.getBoundingClientRect();
+      if (param.config === ScrollElementConfig.TOP) {
+        targetValue = Number(
+          container.scrollTop + (targetRect.top - containerRect.top),
+        );
+      } else if (param.config === ScrollElementConfig.BOTTOM) {
+        targetValue = Number(
+          container.scrollTop + (targetRect.bottom - containerRect.top),
+        );
+      } else if (param.config === ScrollElementConfig.LEFT) {
+        targetValue = Number(
+          container.scrollLeft + (targetRect.left - containerRect.left),
+        );
+      } else if (param.config === ScrollElementConfig.RIGHT) {
+        targetValue = Number(
+          container.scrollLeft + (targetRect.right - containerRect.left),
+        );
+      }
+      if (param.operator === ScrollElementOrator.PLUS) {
+        targetValue += value;
+      } else if (param.operator === ScrollElementOrator.MINUS) {
+        targetValue -= value;
+      }
+    } else {
+      if (param.config === ScrollElementConfig.TOP) {
+        targetValue = 0;
+      } else if (param.config === ScrollElementConfig.BOTTOM) {
+        targetValue = -container.scrollHeight;
+      } else if (param.config === ScrollElementConfig.LEFT) {
+        targetValue = 0;
+      } else if (param.config === ScrollElementConfig.RIGHT) {
+        targetValue = -container.scrollWidth;
+      }
+      if (param.operator === ScrollElementOrator.PLUS) {
+        targetValue += value;
+      } else if (param.operator === ScrollElementOrator.MINUS) {
+        targetValue -= value;
+      }
+    }
+
+    if (
+      param.config === ScrollElementConfig.TOP ||
+      param.config === ScrollElementConfig.BOTTOM
+    ) {
+      container.scrollTo({
+        behavior: "instant",
+        top: targetValue,
+      });
+    } else {
+      container.scrollTo({
+        behavior: "instant",
+        left: targetValue,
+      });
+    }
+  }
+};
+
+const prepareMouseEvent = (
+  event: React.MouseEvent<HTMLElement, MouseEvent>,
+) => {
+  return {
+    text: ((event.currentTarget as any).value || "") as string,
+    element: event.currentTarget,
+  };
+};
+const prepareInputChangeEvent = (
+  event: React.ChangeEvent<HTMLInputElement>,
+) => {
+  return {
+    text: ((event.currentTarget as any).value || "") as string,
+    element: event.currentTarget,
+  };
+};
+const prepareKeyboardEvent = (event: React.KeyboardEvent<HTMLDivElement>) => {
+  return {
+    element: event.currentTarget,
+  };
+};
+const prepareFocusEvent = (
+  event: React.FocusEvent<HTMLDivElement, Element>,
+) => {
+  return {
+    element: event.currentTarget,
+  };
+};
+
+const prepareUIEvent = (event: React.UIEvent<HTMLDivElement, UIEvent>) => {
+  return {
+    element: event.currentTarget,
+  };
+};
+
+export default {
+  ScrollElementOrator,
+  ScrollElementConfig,
+  loopOnRange,
+  loopOnString,
+  loopOnObject,
+  loopOnArray,
+  toText,
+  toStyle,
+  useDidUpdateEffect,
+  prepareMouseEvent,
+  prepareInputChangeEvent,
+  prepareKeyboardEvent,
+  prepareFocusEvent,
+  prepareUIEvent,
+  getCount,
+  scrollTo,
+};

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "target": "es5",
+    "module": "esnext",
+    "jsx": "react-jsx",
+    "declaration": true,
+    "strict": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "lib": ["dom", "esnext"],
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/styles.d.ts"],
+  "exclude": ["node_modules", "dist"],
+}

package/webpack.config.js

@@ -0,0 +1,39 @@
+const path = require("path");
+
+module.exports = {
+  mode: "production",
+  entry: "./src/index.ts", // or .tsx if your main entry is a React component
+  output: {
+    filename: "index.js",
+    path: path.resolve(__dirname, "dist"),
+    libraryTarget: "umd",
+    globalObject: "this",
+  },
+  resolve: {
+    extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: "ts-loader",
+      },
+      {
+        test: /\.(module.scss)$/, // Matches .scss and .sass files
+        use: [
+          "style-loader",
+          "css-loader",
+          {
+            loader: "sass-loader",
+          },
+        ],
+      },
+    ],
+  },
+  externals: {
+    react: "react",
+    "react-dom": "react-dom",
+    "next/router": "next/router",
+  },
+};