@quadrats/react 1.1.6 → 1.1.8

package/underline/tsconfig.build.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "exclude": ["**/*.spec.*"],
+  "include": ["./src"]
+}

package/utils/package.json

@@ -1,7 +1,4 @@
 {
   "name": "@quadrats/react/utils",
-  "sideEffects": false,
-  "main": "./index.cjs.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts"
+  "sideEffects": false
 }

package/utils/src/composeRefs.ts

@@ -0,0 +1,34 @@
+import { Ref } from 'react';
+
+/**
+ * Compose all refs to single one.
+ * It's helpful if you want to use useRef in an forwardRef component.
+ *
+ * @example
+ *
+ * const Some = forwardRef((props, ref) => {
+ *   const refFromHook = useRef(null);
+ *   const composedRef = composeRefs([ref, refFromHook]);
+ *
+ *   return (
+ *     <div ref{composedRef}>
+ *       ...
+ *     </div>
+ *   );
+ * });
+ */
+export function composeRefs<T>(refs: Ref<T>[]) {
+  return (element: T) => {
+    refs.forEach((ref) => {
+      if (!ref) {
+        return;
+      }
+
+      if (typeof ref === 'function') {
+        return ref(element);
+      }
+
+      (ref as any).current = element;
+    });
+  };
+}

package/utils/src/removePreviousElement.ts

@@ -0,0 +1,62 @@
+import { KeyboardEvent } from 'react';
+import { Range, QuadratsEditor, Editor, Element, QuadratsElement, Node, Transforms, Path } from '@quadrats/core';
+
+export function removePreviousElement({
+  event,
+  editor,
+  type,
+  confirmModal,
+  doConfirm,
+}: {
+  event: KeyboardEvent<HTMLElement>;
+  editor: QuadratsEditor & Editor;
+  type: string;
+  confirmModal: boolean;
+  doConfirm?: (remove: VoidFunction) => void;
+}) {
+  const { selection } = editor;
+
+  if (selection && Range.isCollapsed(selection)) {
+    const currentEntry = Editor.above(editor, {
+      match: (n) => Element.isElement(n),
+    });
+
+    if (currentEntry) {
+      const [, currentPath] = currentEntry;
+
+      if (Editor.isStart(editor, selection.anchor, currentPath)) {
+        // const previousEntry = Editor.previous(editor, {
+        //   at: currentPath,
+        //   match: (n) => Element.isElement(n) && (n as QuadratsElement).type === type,
+        // });
+        let prevPath: Path = currentPath;
+
+        try {
+          prevPath = Path.previous(currentPath);
+        } catch (ex) {
+          // error
+        }
+
+        const prevNode = Node.get(editor, prevPath);
+
+        if (Element.isElement(prevNode) && (prevNode as QuadratsElement).type === type) {
+          event.preventDefault();
+
+          const remove = () => {
+            Transforms.removeNodes(editor, {
+              at: prevPath,
+            });
+          };
+
+          if (confirmModal) {
+            doConfirm?.(remove);
+          } else {
+            remove();
+          }
+
+          return;
+        }
+      }
+    }
+  }
+}

package/utils/src/upload.ts

@@ -0,0 +1,83 @@
+import {
+  FileUploaderGetBody,
+  FileUploaderGetHeaders,
+  FileUploaderGetUrl,
+  FileUploaderImplement,
+} from '@quadrats/common/file-uploader';
+
+export function readFileAsBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      if (typeof reader.result === 'string') {
+        resolve(reader.result);
+      }
+    };
+
+    reader.onerror = () => reject(reader.error);
+
+    reader.readAsDataURL(file);
+  });
+}
+
+export async function upload({
+  file,
+  getBody,
+  getHeaders,
+  getUrl,
+  uploader,
+  onProgress,
+}: {
+  file: File;
+  getBody: FileUploaderGetBody;
+  getHeaders?: FileUploaderGetHeaders;
+  getUrl: FileUploaderGetUrl;
+  uploader?: FileUploaderImplement;
+  onProgress: (percent: number) => void;
+}) {
+  const headers = await getHeaders?.(file);
+  const xhr = uploader || new XMLHttpRequest();
+
+  return new Promise<string>((resolve, reject) => {
+    let sent = false;
+
+    xhr.upload.onprogress = ({ loaded, total }: { loaded: number; total: number }) =>
+      onProgress((loaded * 100) / total);
+
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        resolve(xhr.response as string);
+      } else {
+        reject(new Error(`Upload failed with status ${xhr.status}: ${xhr.response}`));
+      }
+    };
+
+    xhr.open('POST', getUrl(file));
+
+    if (headers) {
+      for (const headerName in headers) {
+        xhr.setRequestHeader(headerName, headers[headerName]);
+      }
+    }
+
+    if (!sent) {
+      sent = true;
+      xhr.send(getBody(file) as XMLHttpRequestBodyInit);
+    }
+  });
+}
+
+export function mockUpload(base64: string, onProgress: (percent: number) => void): Promise<string> {
+  return new Promise((resolve) => {
+    let progress = 0;
+    const interval = setInterval(() => {
+      progress += 10;
+      onProgress(progress);
+      if (progress >= 100) {
+        clearInterval(interval);
+        setTimeout(() => resolve(base64), 200);
+      }
+    }, 250);
+  });
+}

package/utils/src/useClickAway.ts

@@ -0,0 +1,34 @@
+import { RefObject, DependencyList } from 'react';
+import { useDocumentEvents } from './useDocumentEvents';
+
+export type ClickAwayEvent = MouseEvent | TouchEvent | PointerEvent;
+export type ClickAwayHandler = (event: ClickAwayEvent) => void;
+export type ClickAwayHandlerFactory = () => ClickAwayHandler | undefined;
+
+export function useClickAway(
+  factory: ClickAwayHandlerFactory,
+  containerRef: RefObject<HTMLElement | null>,
+  deps?: DependencyList,
+) {
+  useDocumentEvents(() => {
+    const clickAwayHandler = factory();
+
+    if (!clickAwayHandler) {
+      return;
+    }
+
+    const handler: ClickAwayHandler = (event) => {
+      const target = event.target as HTMLElement | null;
+      const container = containerRef.current;
+
+      if (!(container?.contains(target) || !document.contains(target))) {
+        clickAwayHandler(event);
+      }
+    };
+
+    return {
+      click: handler,
+      touchend: handler,
+    };
+  }, deps);
+}

package/utils/src/useDocumentEvents.ts

@@ -0,0 +1,35 @@
+import { DependencyList } from 'react';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+
+export type DocumentEventHandlersFactory = () =>
+| {
+  [event in keyof DocumentEventMap]?: (
+    event: DocumentEventMap[event],
+  ) => void;
+}
+| undefined;
+
+export function useDocumentEvents(
+  factory: DocumentEventHandlersFactory,
+  deps?: DependencyList,
+) {
+  useIsomorphicLayoutEffect(() => {
+    const handlers = factory();
+
+    if (!handlers) {
+      return;
+    }
+
+    const entries = Object.entries(handlers);
+
+    entries.forEach(([event, handler]) => {
+      document.addEventListener(event, handler as any);
+    });
+
+    return () => {
+      entries.forEach(([event, handler]) => {
+        document.removeEventListener(event, handler as any);
+      });
+    };
+  }, deps);
+}

package/utils/src/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,8 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+export const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' &&
+  window.document &&
+  !!window.document.createElement
+    ? useLayoutEffect
+    : useEffect;

package/utils/src/usePreviousValue.ts

@@ -0,0 +1,11 @@
+import { useRef, useEffect } from 'react';
+
+export function usePreviousValue<T>(value: T): T {
+  const ref = useRef(value);
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}

package/utils/tsconfig.build.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "exclude": ["**/*.spec.*"],
+  "include": ["./src"]
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2020 Quadrats
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/_internal/index.cjs.js

@@ -1,59 +0,0 @@
-'use strict';
-
-function composeRenderElementsBase(renderDefault, renderElements) {
-    return (props) => {
-        for (const renderElement of renderElements) {
-            const element = renderElement(props);
-            if (element) {
-                return element;
-            }
-        }
-        return renderDefault(props);
-    };
-}
-
-function composeRenderLeafsBase(renderDefault, renderLeafs) {
-    return (props) => {
-        props = Object.assign({}, props);
-        renderLeafs.forEach((renderLeaf) => {
-            props.children = renderLeaf(props);
-        });
-        return renderDefault(props);
-    };
-}
-
-function createRenderElementBase({ type, render, }) {
-    return (props) => {
-        if (props.element.type === type) {
-            return render(props);
-        }
-    };
-}
-
-function createRenderElementsBase(options) {
-    return (props) => {
-        for (const { type, render } of options) {
-            if (props.element.type === type) {
-                return render(props);
-            }
-        }
-    };
-}
-
-function createRenderMarkBase(options) {
-    const { type, render } = options;
-    return (props) => {
-        const { children, leaf } = props;
-        const mark = leaf[type];
-        if (mark != null && leaf.text) {
-            return render(Object.assign(Object.assign({}, props), { mark }));
-        }
-        return children;
-    };
-}
-
-exports.composeRenderElementsBase = composeRenderElementsBase;
-exports.composeRenderLeafsBase = composeRenderLeafsBase;
-exports.createRenderElementBase = createRenderElementBase;
-exports.createRenderElementsBase = createRenderElementsBase;
-exports.createRenderMarkBase = createRenderMarkBase;

package/_internal/index.js

@@ -1,5 +0,0 @@
-export { composeRenderElementsBase } from './renderer/composeRenderElementsBase.js';
-export { composeRenderLeafsBase } from './renderer/composeRenderLeafsBase.js';
-export { createRenderElementBase } from './renderer/createRenderElementBase.js';
-export { createRenderElementsBase } from './renderer/createRenderElementsBase.js';
-export { createRenderMarkBase } from './renderer/createRenderMarkBase.js';

package/_internal/renderer/composeRenderElementsBase.d.ts

@@ -1,3 +0,0 @@
-import { JSX } from 'react';
-import { RenderElementPropsBase } from './typings';
-export declare function composeRenderElementsBase<P extends RenderElementPropsBase>(renderDefault: (props: P) => JSX.Element, renderElements: ((props: P) => JSX.Element | null | undefined)[]): (props: P) => JSX.Element;

package/_internal/renderer/composeRenderElementsBase.js

@@ -1,13 +0,0 @@
-function composeRenderElementsBase(renderDefault, renderElements) {
-    return (props) => {
-        for (const renderElement of renderElements) {
-            const element = renderElement(props);
-            if (element) {
-                return element;
-            }
-        }
-        return renderDefault(props);
-    };
-}
-
-export { composeRenderElementsBase };

package/_internal/renderer/composeRenderLeafsBase.d.ts

@@ -1,3 +0,0 @@
-import { JSX } from 'react';
-import { RenderLeafPropsBase } from './typings';
-export declare function composeRenderLeafsBase<P extends RenderLeafPropsBase>(renderDefault: (props: P) => JSX.Element, renderLeafs: ((props: P) => JSX.Element)[]): (props: P) => JSX.Element;

package/_internal/renderer/composeRenderLeafsBase.js

@@ -1,11 +0,0 @@
-function composeRenderLeafsBase(renderDefault, renderLeafs) {
-    return (props) => {
-        props = Object.assign({}, props);
-        renderLeafs.forEach((renderLeaf) => {
-            props.children = renderLeaf(props);
-        });
-        return renderDefault(props);
-    };
-}
-
-export { composeRenderLeafsBase };

package/_internal/renderer/createRenderElementBase.d.ts

@@ -1,3 +0,0 @@
-import { JSX } from 'react';
-import { CreateRenderElementOptionsBase, RenderElementPropsBase } from './typings';
-export declare function createRenderElementBase<P extends RenderElementPropsBase, RP extends RenderElementPropsBase>({ type, render, }: CreateRenderElementOptionsBase<P>): (props: RP) => JSX.Element | null | undefined;

package/_internal/renderer/createRenderElementBase.js

@@ -1,9 +0,0 @@
-function createRenderElementBase({ type, render, }) {
-    return (props) => {
-        if (props.element.type === type) {
-            return render(props);
-        }
-    };
-}
-
-export { createRenderElementBase };

package/_internal/renderer/createRenderElementsBase.d.ts

@@ -1,3 +0,0 @@
-import { JSX } from 'react';
-import { CreateRenderElementOptionsBase, RenderElementPropsBase } from './typings';
-export declare function createRenderElementsBase<P extends RenderElementPropsBase, RP extends RenderElementPropsBase>(options: CreateRenderElementOptionsBase<P>[]): (props: RP) => JSX.Element | null | undefined;

package/_internal/renderer/createRenderElementsBase.js

@@ -1,11 +0,0 @@
-function createRenderElementsBase(options) {
-    return (props) => {
-        for (const { type, render } of options) {
-            if (props.element.type === type) {
-                return render(props);
-            }
-        }
-    };
-}
-
-export { createRenderElementsBase };

package/_internal/renderer/createRenderMarkBase.d.ts

@@ -1,3 +0,0 @@
-import { JSX } from 'react';
-import { CreateRenderMarkOptionsBase, RenderLeafPropsBase, RenderMarkPropsBase } from './typings';
-export declare function createRenderMarkBase<M, P extends RenderMarkPropsBase<M>>(options: CreateRenderMarkOptionsBase<M, P>): (props: Omit<P, Exclude<keyof RenderMarkPropsBase<M>, keyof RenderLeafPropsBase>>) => JSX.Element;

package/_internal/renderer/createRenderMarkBase.js

@@ -1,13 +0,0 @@
-function createRenderMarkBase(options) {
-    const { type, render } = options;
-    return (props) => {
-        const { children, leaf } = props;
-        const mark = leaf[type];
-        if (mark != null && leaf.text) {
-            return render(Object.assign(Object.assign({}, props), { mark }));
-        }
-        return children;
-    };
-}
-
-export { createRenderMarkBase };

package/_internal/renderer/typings.d.ts

@@ -1,19 +0,0 @@
-import { JSX } from 'react';
-import { QuadratsElement, Text, WithElementType, WithMarkType } from '@quadrats/core';
-export interface RenderLeafPropsBase {
-    children: any;
-    leaf: Text;
-}
-export interface RenderMarkPropsBase<M> extends RenderLeafPropsBase {
-    mark: M;
-}
-export interface RenderElementPropsBase<E extends QuadratsElement = QuadratsElement> {
-    children: any;
-    element: E;
-}
-export interface CreateRenderMarkOptionsBase<M, P extends RenderMarkPropsBase<M>> extends WithMarkType {
-    render: (props: P) => JSX.Element;
-}
-export interface CreateRenderElementOptionsBase<P extends RenderElementPropsBase<QuadratsElement>> extends WithElementType {
-    render: (props: P) => JSX.Element | null | undefined;
-}

package/accordion/accordion.css

@@ -1 +0,0 @@
-.qdr-accordion{display:flex;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-2);margin:var(--qdr-spacing-9) 0 var(--qdr-spacing-8)}.qdr-accordion__icon-wrapper{display:flex;align-items:center;justify-content:center;color:var(--qdr-action-inactive);border-radius:var(--qdr-radius-2);cursor:pointer;transition:background-color var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-accordion__icon-wrapper:hover{background-color:var(--qdr-divider)}.qdr-accordion__icon-wrapper:active{background-color:var(--qdr-border)}.qdr-accordion__icon{transform:rotate(-90deg);transition:transform var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-accordion__icon--expanded{transform:rotate(0)}.qdr-accordion__wrapper{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-4)}.qdr-accordion__title,.qdr-accordion__content{position:relative;align-self:stretch;color:var(--qdr-text-primary);margin:0}.qdr-accordion__title{font-size:var(--qdr-typography-article-h4-font-size);line-height:var(--qdr-typography-article-h4-line-height);letter-spacing:var(--qdr-typography-article-h4-letter-spacing);font-weight:var(--qdr-typography-article-h4-font-weight)}.qdr-accordion__title__placeholder{position:absolute;left:0;top:0;color:var(--qdr-text-secondary);pointer-events:none}.qdr-accordion__content{font-size:var(--qdr-typography-article-body1-font-size);line-height:var(--qdr-typography-article-body1-line-height);letter-spacing:var(--qdr-typography-article-body1-letter-spacing);font-weight:var(--qdr-typography-article-body1-font-weight)}.qdr-accordion__content__placeholder{position:absolute;left:0;top:0;color:var(--qdr-text-secondary);pointer-events:none}

package/accordion/components/Accordion.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { RenderElementProps } from '@quadrats/react';
-import { RenderAccordionElementProps } from '../typings';
-declare function Accordion({ attributes, children, }: {
-    attributes?: RenderElementProps['attributes'];
-    children: RenderElementProps['children'];
-    element: RenderAccordionElementProps['element'];
-}): React.JSX.Element;
-export default Accordion;

package/accordion/components/Accordion.js

@@ -1,22 +0,0 @@
-import React, { useState } from 'react';
-import clsx from 'clsx';
-import { Icon } from '@quadrats/react/components';
-import { AccordionDown } from '@quadrats/icons';
-import { AccordionContext } from '../contexts/AccordionContext.js';
-
-function Accordion({ attributes, children, }) {
-    const [expanded, setExpanded] = useState(true);
-    return (React.createElement(AccordionContext.Provider, { value: {
-            expanded,
-        } },
-        React.createElement("div", Object.assign({}, attributes, { className: "qdr-accordion" }),
-            React.createElement("div", { className: "qdr-accordion__icon-wrapper", contentEditable: false, onClick: () => {
-                    setExpanded(status => !status);
-                } },
-                React.createElement(Icon, { className: clsx('qdr-accordion__icon', {
-                        'qdr-accordion__icon--expanded': expanded,
-                    }), icon: AccordionDown, width: 24, height: 24 })),
-            React.createElement("div", { className: "qdr-accordion__wrapper" }, children))));
-}
-
-export { Accordion as default };

package/accordion/components/AccordionContent.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { RenderElementProps } from '@quadrats/react';
-declare function AccordionContent(props: {
-    attributes?: RenderElementProps['attributes'];
-    children: RenderElementProps['children'];
-    element: RenderElementProps['element'];
-}): React.JSX.Element | null;
-export default AccordionContent;

package/accordion/components/AccordionContent.js

@@ -1,24 +0,0 @@
-import React, { useMemo } from 'react';
-import { Editor, Path } from '@quadrats/core';
-import { useComposition, useQuadrats, ReactEditor, useLocale } from '@quadrats/react';
-import { useAccordion } from '../hooks/useAccordion.js';
-
-function AccordionContent(props) {
-    const { compositionPath } = useComposition();
-    const { attributes, children, element } = props;
-    const editor = useQuadrats();
-    const path = ReactEditor.findPath(editor, element);
-    const text = Editor.string(editor, path);
-    const isEmpty = !text;
-    const locale = useLocale();
-    const placeholder = locale.editor.accordion.contentPlaceholder;
-    const composing = useMemo(() => Path.equals(compositionPath, path), [compositionPath, path]);
-    const { expanded } = useAccordion();
-    if (!expanded)
-        return null;
-    return (React.createElement("p", Object.assign({}, attributes, { className: "qdr-accordion__content" }),
-        children,
-        isEmpty && !composing && (React.createElement("span", { className: "qdr-accordion__content__placeholder", contentEditable: false }, placeholder))));
-}
-
-export { AccordionContent as default };

package/accordion/components/AccordionTitle.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { RenderElementProps } from '@quadrats/react';
-declare function AccordionTitle(props: {
-    attributes?: RenderElementProps['attributes'];
-    children: RenderElementProps['children'];
-    element: RenderElementProps['element'];
-}): React.JSX.Element;
-export default AccordionTitle;

package/accordion/components/AccordionTitle.js

@@ -1,20 +0,0 @@
-import React, { useMemo } from 'react';
-import { Editor, Path } from '@quadrats/core';
-import { useComposition, useQuadrats, ReactEditor, useLocale } from '@quadrats/react';
-
-function AccordionTitle(props) {
-    const { compositionPath } = useComposition();
-    const { attributes, children, element } = props;
-    const editor = useQuadrats();
-    const path = ReactEditor.findPath(editor, element);
-    const text = Editor.string(editor, path);
-    const isEmpty = !text;
-    const locale = useLocale();
-    const placeholder = locale.editor.accordion.titlePlaceholder;
-    const composing = useMemo(() => Path.equals(compositionPath, path), [compositionPath, path]);
-    return (React.createElement("p", Object.assign({}, attributes, { className: "qdr-accordion__title" }),
-        children,
-        isEmpty && !composing && (React.createElement("span", { className: "qdr-accordion__title__placeholder", contentEditable: false }, placeholder))));
-}
-
-export { AccordionTitle as default };

package/accordion/contexts/AccordionContext.d.ts

@@ -1,2 +0,0 @@
-import { AccordionContextType } from '../typings';
-export declare const AccordionContext: import("react").Context<AccordionContextType>;

package/accordion/contexts/AccordionContext.js

@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-
-const AccordionContext = createContext({ expanded: true });
-
-export { AccordionContext };

package/accordion/createReactAccordion.d.ts

@@ -1,4 +0,0 @@
-import { CreateAccordionOptions } from '@quadrats/common/accordion';
-import { ReactAccordion } from './typings';
-export type CreateReactAccordionOptions = CreateAccordionOptions;
-export declare function createReactAccordion(options?: CreateReactAccordionOptions): ReactAccordion;