publ-echo 0.0.1

package/src/lib/Resizable/styles/styles.css

@@ -0,0 +1,76 @@
+.react-resizable {
+  position: relative;
+}
+
+.react-resizable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-repeat: no-repeat;
+  background-origin: content-box;
+  box-sizing: border-box;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+");
+  background-position: bottom right;
+  padding: 0 3px 3px 0;
+}
+
+.react-resizable-handle-sw {
+  bottom: 0;
+  left: 0;
+  cursor: sw-resize;
+  transform: rotate(90deg);
+}
+
+.react-resizable-handle-se {
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+}
+
+.react-resizable-handle-nw {
+  top: 0;
+  left: 0;
+  cursor: nw-resize;
+  transform: rotate(180deg);
+}
+
+.react-resizable-handle-ne {
+  top: 0;
+  right: 0;
+  cursor: ne-resize;
+  transform: rotate(270deg);
+}
+
+.react-resizable-handle-w,
+.react-resizable-handle-e {
+  top: 50%;
+  margin-top: -10px;
+  cursor: ew-resize;
+}
+
+.react-resizable-handle-w {
+  left: 0;
+  transform: rotate(135deg);
+}
+
+.react-resizable-handle-e {
+  right: 0;
+  transform: rotate(315deg);
+}
+
+.react-resizable-handle-n,
+.react-resizable-handle-s {
+  left: 50%;
+  margin-left: -10px;
+  cursor: ns-resize;
+}
+
+.react-resizable-handle-n {
+  top: 0;
+  transform: rotate(225deg);
+}
+
+.react-resizable-handle-s {
+  bottom: 0;
+  transform: rotate(45deg);
+}

package/src/lib/Resizable/types.ts

@@ -0,0 +1,96 @@
+import { CSSProperties, ReactElement, Ref, SyntheticEvent } from "react";
+import { DraggableCoreDefaultProps } from "../Draggable/types";
+
+export type ReactRef<T> = {
+  current: T | null;
+};
+export type Axis = "both" | "x" | "y" | "none";
+export type ResizeHandleAxis =
+  | "s"
+  | "w"
+  | "e"
+  | "n"
+  | "sw"
+  | "nw"
+  | "se"
+  | "ne";
+export type ResizableBoxState = {
+  width: number;
+  height: number;
+  propsWidth: number;
+  propsHeight: number;
+};
+
+export type DragCallbackData = {
+  node: HTMLElement;
+  x: number;
+  y: number;
+  deltaX: number;
+  deltaY: number;
+  lastX: number;
+  lastY: number;
+};
+
+export type ResizeCallbackData = {
+  node: HTMLElement;
+  size: { width: number; height: number; top: number; left: number };
+  handle: ResizeHandleAxis;
+};
+
+// <Resizable>
+export type ResizableDefaultProps = {
+  axis: Axis;
+  handleSize: [number, number];
+  lockAspectRatio: boolean;
+  minConstraints: [number, number];
+  maxConstraints: [number, number];
+  resizeHandles: ResizeHandleAxis[];
+  transformScale: number;
+};
+
+export type ResizableProps = {
+  top?: number;
+  left?: number;
+  children?: ReactElement<any>;
+  axis?: Axis;
+  className?: string;
+  draggableOpts?: Partial<DraggableCoreDefaultProps>;
+  handle?: ResizeHandleType;
+  onResizeStop?: (e: SyntheticEvent<any>, data: ResizeCallbackData) => any;
+  onResizeStart?: (e: SyntheticEvent<any>, data: ResizeCallbackData) => any;
+  onResize?: (e: SyntheticEvent<any>, data: ResizeCallbackData) => any;
+  handleSize?: [number, number];
+  lockAspectRatio?: boolean;
+  minConstraints?: [number, number];
+  maxConstraints?: [number, number];
+  resizeHandles?: ResizeHandleAxis[];
+  transformScale?: number;
+  style?: CSSProperties;
+  width: number;
+  height: number;
+};
+// react-draggable에서는 아래와 같은 타입입니다. 현재 echo에서는 width와 height를 필수값입니다.
+// & (
+//   | {
+//       width: number;
+//       height?: number;
+//       axis: "x";
+//     }
+//   | {
+//       width?: number;
+//       height: number;
+//       axis: "y";
+//     }
+//   | {
+//       width: number;
+//       height: number;
+//       axis?: "both";
+//     }
+// );
+
+export type ResizeHandleType =
+  | ReactElement<any>
+  | ((
+      resizeHandleAxis: ResizeHandleAxis,
+      ref: Ref<HTMLElement>
+    ) => ReactElement<any>);

package/src/lib/Resizable/utils/cloneElement.ts

@@ -0,0 +1,15 @@
+import React, { PropsWithChildren, ReactElement } from "react";
+
+export function cloneElement(
+  element: ReactElement<any>,
+  props: PropsWithChildren<any>
+): ReactElement<any> {
+  if (props.style && element.props.style) {
+    props.style = { ...element.props.style, ...props.style };
+  }
+  if (props.className && element.props.className) {
+    props.className = `${element.props.className} ${props.className}`;
+  }
+
+  return React.cloneElement(element, props);
+}

package/src/lib/components/WidthProvider.tsx

@@ -0,0 +1,71 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import classNames from "classnames";
+import React, { useRef, useState, useEffect } from "react";
+
+type WPState = {
+  width: number;
+};
+
+type ComposedProps<Config> = {
+  measureBeforeMount?: boolean;
+  className?: string;
+  style?: Object;
+  width?: number;
+} & Config;
+
+const layoutClassName = "react-grid-layout";
+
+/*
+ * A simple HOC that provides facility for listening to container resizes.
+ */
+const WidthProvider = <Config,>(
+  ComposedComponent: React.ComponentType<Config>
+) => {
+  return (props: ComposedProps<Config>) => {
+    const elementRef = useRef<HTMLDivElement>(null);
+    const mounted = useRef(false);
+    const [state, setState] = useState<WPState>({
+      width: props.width ?? 1280,
+    });
+
+    const { measureBeforeMount = false } = props;
+
+    useEffect(() => {
+      if (mounted.current) {
+        return;
+      }
+      mounted.current = true;
+
+      window.addEventListener("resize", onWindowResize);
+
+      onWindowResize();
+      return () => {
+        mounted.current = false;
+        window.removeEventListener("resize", onWindowResize);
+      };
+    }, []);
+
+    const onWindowResize = () => {
+      if (!mounted.current) return;
+      const node = elementRef.current;
+
+      if (node instanceof HTMLElement && node.offsetWidth) {
+        setState({ width: node.offsetWidth });
+      }
+    };
+
+    if (measureBeforeMount && !mounted.current) {
+      return (
+        <div
+          className={classNames(props.className, layoutClassName)}
+          style={props.style}
+          ref={elementRef}
+        />
+      );
+    }
+
+    return <ComposedComponent {...props} innerRef={elementRef} {...state} />;
+  };
+};
+
+export default WidthProvider;

package/src/lib/components/index.ts

@@ -0,0 +1 @@
+export { default as WidthProvider } from "./WidthProvider";

package/src/lib/components/types.ts

@@ -0,0 +1,19 @@
+import { RefObject } from "react";
+
+export type WidthProviderProps = {
+  measureBeforeMount: boolean;
+  className?: string;
+  style?: Object;
+};
+
+export type WidthProviderState = {
+  width: number;
+};
+
+export type WidthProviderRef = {
+  innerRef?: RefObject<HTMLDivElement>;
+};
+
+export type ComposedProps = WidthProviderProps &
+  WidthProviderState &
+  WidthProviderRef;

package/src/lib/index.ts

@@ -0,0 +1,4 @@
+export * from "./GridLayoutEditor";
+export { GridItem } from "./GridItem";
+export * from "./Resizable";
+export * from "./Draggable";

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

package/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

package/src/utils/types.ts

@@ -0,0 +1,3 @@
+export type PropsWithChildren<P> = P & {
+  children: React.ReactElement | React.ReactElement[];
+};

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}