publ-echo 0.0.3 → 0.0.5

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

@@ -1,76 +0,0 @@
-.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

@@ -1,96 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,71 +0,0 @@
-/* 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

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

package/src/lib/components/types.ts

@@ -1,19 +0,0 @@
-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

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

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

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

package/src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-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

@@ -1,5 +0,0 @@
-// 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

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

package/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "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"
-  ]
-}