@koine/react 2.0.0-beta.1 → 2.0.0-beta.10

package/Editor/Editor--tiptap.mjs

@@ -1,26 +1,53 @@
-import { __assign, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
-import { useEditor, EditorContent } from "@tiptap/react";
+import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
-import { EditorGlobalStyles, EditorRoot, EditorBarRoot, EditorBarBtn, EditorIconBold, EditorIconItalic, } from "./components";
-export var EditorBar = function (_a) {
-    var editor = _a.editor;
-    var handleClick = useCallback(function (e, type) {
+import { useCallback } from "react";
+import { EditorBarBtn, EditorBarRoot, EditorGlobalStyles, EditorIconBold, EditorIconItalic, EditorRoot } from "./components";
+export const EditorBar = ({ editor })=>{
+    const handleClick = useCallback((e, type)=>{
         e.preventDefault();
-        editor === null || editor === void 0 ? void 0 : editor.chain().focus()["toggle".concat(type)]().run();
-    }, [editor]);
+        // @ts-expect-error FIXME: cannot build this
+        editor?.chain().focus()[`toggle${type}`]().run();
+    }, [
+        editor
+    ]);
     if (!editor) {
         return null;
     }
-    return (_jsxs(EditorBarRoot, { children: [_jsx(EditorBarBtn, { onClick: function (e) {
-                    return handleClick(e, "Bold");
-                }, className: editor.isActive("bold") ? "is-active" : "", children: _jsx(EditorIconBold, {}) }), _jsx(EditorBarBtn, { onClick: function (e) {
-                    return handleClick(e, "Italic");
-                }, className: editor.isActive("bold") ? "is-active" : "", children: _jsx(EditorIconItalic, {}) })] }));
+    return /*#__PURE__*/ _jsxs(EditorBarRoot, {
+        children: [
+            /*#__PURE__*/ _jsx(EditorBarBtn, {
+                onClick: (e)=>handleClick(e, "Bold"),
+                className: editor.isActive("bold") ? "is-active" : "",
+                children: /*#__PURE__*/ _jsx(EditorIconBold, {})
+            }),
+            /*#__PURE__*/ _jsx(EditorBarBtn, {
+                onClick: (e)=>handleClick(e, "Italic"),
+                className: editor.isActive("bold") ? "is-active" : "",
+                children: /*#__PURE__*/ _jsx(EditorIconItalic, {})
+            })
+        ]
+    });
 };
-export var Editor = function (_a) {
-    var options = _a.options, props = __rest(_a, ["options"]);
-    var editor = useEditor(__assign({ extensions: [StarterKit], content: "" }, (options || {})));
-    return (_jsxs(EditorRoot, { children: [_jsx(EditorGlobalStyles, {}), _jsx(EditorBar, { editor: editor }), _jsx(EditorContent, __assign({ className: "EditorContent", editor: editor }, props))] }));
+export const Editor = ({ options, ...props })=>{
+    const editor = useEditor({
+        extensions: [
+            StarterKit
+        ],
+        content: "",
+        ...options || {}
+    });
+    return /*#__PURE__*/ _jsxs(EditorRoot, {
+        children: [
+            /*#__PURE__*/ _jsx(EditorGlobalStyles, {}),
+            /*#__PURE__*/ _jsx(EditorBar, {
+                editor: editor
+            }),
+            /*#__PURE__*/ _jsx(EditorContent, {
+                className: "EditorContent",
+                editor: editor,
+                ...props
+            })
+        ]
+    });
 };

package/Editor/components.d.ts

@@ -1,7 +1,5 @@
 export { MdFormatBold as EditorIconBold, MdFormatItalic as EditorIconItalic, } from "react-icons/md";
-export declare const EditorRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const EditorBarRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const EditorBarBtn: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../Buttons").KoineButtonUiProps & {
-    disabled?: boolean | undefined;
-}, never>;
+export declare const EditorRoot: any;
+export declare const EditorBarRoot: any;
+export declare const EditorBarBtn: any;
 export declare const EditorGlobalStyles: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;

package/Editor/components.js

@@ -1,15 +1,59 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditorGlobalStyles = exports.EditorBarBtn = exports.EditorBarRoot = exports.EditorRoot = exports.EditorIconItalic = exports.EditorIconBold = void 0;
-var tslib_1 = require("tslib");
-var styled_components_1 = tslib_1.__importStar(require("styled-components"));
-var IconButton_1 = require("../Buttons/IconButton");
-var styles_1 = require("../Forms/styles");
-var md_1 = require("react-icons/md");
-Object.defineProperty(exports, "EditorIconBold", { enumerable: true, get: function () { return md_1.MdFormatBold; } });
-Object.defineProperty(exports, "EditorIconItalic", { enumerable: true, get: function () { return md_1.MdFormatItalic; } });
-exports.EditorRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), styles_1.inputBorder, styles_1.inputFocus);
-exports.EditorBarRoot = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  /* background: var(--grey900); */\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  /* background: var(--grey900); */\n"])));
-exports.EditorBarBtn = (0, styled_components_1.default)(IconButton_1.IconButton)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject([""], [""])));
-exports.EditorGlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  .ProseMirror {\n    ", "\n    \n    &:focus {\n      outline:none;\n    }\n\n    > *:first-child {\n      margin-top: 0;\n    }\n  }\n"], ["\n  .ProseMirror {\n    ", "\n    \n    &:focus {\n      outline:none;\n    }\n\n    > *:first-child {\n      margin-top: 0;\n    }\n  }\n"])), styles_1.inputPadding);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    EditorIconBold: function() {
+        return _md.MdFormatBold;
+    },
+    EditorIconItalic: function() {
+        return _md.MdFormatItalic;
+    },
+    EditorRoot: function() {
+        return EditorRoot;
+    },
+    EditorBarRoot: function() {
+        return EditorBarRoot;
+    },
+    EditorBarBtn: function() {
+        return EditorBarBtn;
+    },
+    EditorGlobalStyles: function() {
+        return EditorGlobalStyles;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard._(require("styled-components"));
+const _IconButton = require("../Buttons/IconButton");
+const _styles = require("../Forms/styles");
+const _md = require("react-icons/md");
+const EditorRoot = _styledcomponents.default.div`
+  ${_styles.inputBorder}
+  ${_styles.inputFocus}
+`;
+const EditorBarRoot = _styledcomponents.default.div`
+  display: flex;
+  justify-content: flex-end;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  /* background: var(--grey900); */
+`;
+const EditorBarBtn = (0, _styledcomponents.default)(_IconButton.IconButton)``;
+const EditorGlobalStyles = (0, _styledcomponents.createGlobalStyle)`
+  .ProseMirror {
+    ${_styles.inputPadding}
+    
+    &:focus {
+      outline:none;
+    }
+
+    > *:first-child {
+      margin-top: 0;
+    }
+  }
+`;

package/Editor/components.mjs

@@ -1,10 +1,28 @@
-import { __makeTemplateObject } from "tslib";
 import styled, { createGlobalStyle } from "styled-components";
 import { IconButton } from "../Buttons/IconButton";
-import { inputPadding, inputBorder, inputFocus } from "../Forms/styles";
-export { MdFormatBold as EditorIconBold, MdFormatItalic as EditorIconItalic, } from "react-icons/md";
-export var EditorRoot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), inputBorder, inputFocus);
-export var EditorBarRoot = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  /* background: var(--grey900); */\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  /* background: var(--grey900); */\n"])));
-export var EditorBarBtn = styled(IconButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
-export var EditorGlobalStyles = createGlobalStyle(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  .ProseMirror {\n    ", "\n    \n    &:focus {\n      outline:none;\n    }\n\n    > *:first-child {\n      margin-top: 0;\n    }\n  }\n"], ["\n  .ProseMirror {\n    ", "\n    \n    &:focus {\n      outline:none;\n    }\n\n    > *:first-child {\n      margin-top: 0;\n    }\n  }\n"])), inputPadding);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+import { inputBorder, inputFocus, inputPadding } from "../Forms/styles";
+export { MdFormatBold as EditorIconBold, MdFormatItalic as EditorIconItalic } from "react-icons/md";
+export const EditorRoot = styled.div`
+  ${inputBorder}
+  ${inputFocus}
+`;
+export const EditorBarRoot = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  /* background: var(--grey900); */
+`;
+export const EditorBarBtn = styled(IconButton)``;
+export const EditorGlobalStyles = createGlobalStyle`
+  .ProseMirror {
+    ${inputPadding}
+    
+    &:focus {
+      outline:none;
+    }
+
+    > *:first-child {
+      margin-top: 0;
+    }
+  }
+`;

package/Editor/index.js

@@ -1,4 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Editor--tiptap"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./Editor--tiptap"), exports);

package/FaviconTags.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    FaviconTags: function() {
+        return FaviconTags;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const FaviconTags = ({ name, color, safariTabColor, tileColor, themeColor })=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("link", {
+                rel: "shortcut icon",
+                href: "/favicon.ico",
+                type: "image/x-icon"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("link", {
+                rel: "apple-touch-icon",
+                sizes: "180x180",
+                href: "/apple-touch-icon.png"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("link", {
+                rel: "icon",
+                type: "image/png",
+                sizes: "32x32",
+                href: "/favicon-32x32.png"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("link", {
+                rel: "icon",
+                type: "image/png",
+                sizes: "16x16",
+                href: "/favicon-16x16.png"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("link", {
+                rel: "manifest",
+                href: "/site.webmanifest"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("link", {
+                rel: "mask-icon",
+                href: "/safari-pinned-tab.svg",
+                color: safariTabColor || color
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("meta", {
+                name: "apple-mobile-web-app-title",
+                content: name
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("meta", {
+                name: "application-name",
+                content: name
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("meta", {
+                name: "msapplication-TileColor",
+                content: tileColor || color
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("meta", {
+                name: "theme-color",
+                content: themeColor || color
+            })
+        ]
+    });
+};
+const _default = FaviconTags;

package/FaviconTags.mjs

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Favicon tags.
+ *
+ * This component is meant to be wrapped in a `<head>` manager component.
+ *
+ * These tags have been produced by [realfavicongenerator.net](https://realfavicongenerator.net/)
+ * on _**16 Feb 2022**_.
+ *
+ * @see https://realfavicongenerator.net/
+ */ export const FaviconTags = ({ name, color, safariTabColor, tileColor, themeColor })=>{
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("link", {
+                rel: "shortcut icon",
+                href: "/favicon.ico",
+                type: "image/x-icon"
+            }),
+            /*#__PURE__*/ _jsx("link", {
+                rel: "apple-touch-icon",
+                sizes: "180x180",
+                href: "/apple-touch-icon.png"
+            }),
+            /*#__PURE__*/ _jsx("link", {
+                rel: "icon",
+                type: "image/png",
+                sizes: "32x32",
+                href: "/favicon-32x32.png"
+            }),
+            /*#__PURE__*/ _jsx("link", {
+                rel: "icon",
+                type: "image/png",
+                sizes: "16x16",
+                href: "/favicon-16x16.png"
+            }),
+            /*#__PURE__*/ _jsx("link", {
+                rel: "manifest",
+                href: "/site.webmanifest"
+            }),
+            /*#__PURE__*/ _jsx("link", {
+                rel: "mask-icon",
+                href: "/safari-pinned-tab.svg",
+                color: safariTabColor || color
+            }),
+            /*#__PURE__*/ _jsx("meta", {
+                name: "apple-mobile-web-app-title",
+                content: name
+            }),
+            /*#__PURE__*/ _jsx("meta", {
+                name: "application-name",
+                content: name
+            }),
+            /*#__PURE__*/ _jsx("meta", {
+                name: "msapplication-TileColor",
+                content: tileColor || color
+            }),
+            /*#__PURE__*/ _jsx("meta", {
+                name: "theme-color",
+                content: themeColor || color
+            })
+        ]
+    });
+};
+export default FaviconTags;

package/Form/Form.js

@@ -1,65 +1,130 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineForm = exports.Form = exports.Fail = exports.Ok = exports.Collapsable = exports.Progress = exports.Overlay = exports.Root = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-// import type { MotionProps } from "framer-motion";
-var helpers_1 = require("../helpers");
-exports.Root = "form";
-exports.Overlay = "div";
-exports.Progress = "div";
-exports.Collapsable = "div";
-exports.Ok = null;
-exports.Fail = null;
-var Form = function (_a) {
-    var _Root = _a.Root, _Overlay = _a.Overlay, _Progress = _a.Progress, _Collapsable = _a.Collapsable, ok = _a.ok, fail = _a.fail, loading = _a.loading, _Ok = _a.Ok, _b = _a.okProps, okProps = _b === void 0 ? {
-        children: "Sent!",
-    } : _b, _Fail = _a.Fail, _c = _a.failProps, failProps = _c === void 0 ? {
-        children: "Failed.",
-    } : _c, collapseOnOk = _a.collapseOnOk, collapseOnFail = _a.collapseOnFail, _d = _a.okTimeout, okTimeout = _d === void 0 ? 3000 : _d, _e = _a.failTimeout, failTimeout = _e === void 0 ? 3000 : _e, children = _a.children, props = tslib_1.__rest(_a, ["Root", "Overlay", "Progress", "Collapsable", "ok", "fail", "loading", "Ok", "okProps", "Fail", "failProps", "collapseOnOk", "collapseOnFail", "okTimeout", "failTimeout", "children"]);
-    var _f = (0, react_1.useState)(""), open = _f[0], setOpen = _f[1];
-    var commonProps = {
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Root: function() {
+        return Root;
+    },
+    Overlay: function() {
+        return Overlay;
+    },
+    Progress: function() {
+        return Progress;
+    },
+    Collapsable: function() {
+        return Collapsable;
+    },
+    Ok: function() {
+        return Ok;
+    },
+    Fail: function() {
+        return Fail;
+    },
+    Form: function() {
+        return Form;
+    },
+    KoineForm: function() {
+        return KoineForm;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _helpers = require("../helpers");
+const Root = "form";
+const Overlay = "div";
+const Progress = "div";
+const Collapsable = "div";
+const Ok = null;
+const Fail = null;
+const Form = ({ Root: _Root, Overlay: _Overlay, Progress: _Progress, Collapsable: _Collapsable, ok, fail, loading, Ok: _Ok, okProps = {
+    children: "Sent!"
+}, Fail: _Fail, failProps = {
+    children: "Failed."
+}, collapseOnOk, collapseOnFail, okTimeout = 3000, failTimeout = 3000, children, ...props })=>{
+    const [open, setOpen] = (0, _react.useState)("");
+    const commonProps = {
         head: null,
         components: {
-            HeadIcon: null,
-        },
+            HeadIcon: null
+        }
     };
-    (0, react_1.useEffect)(function () {
+    (0, _react.useEffect)(()=>{
         if (!loading) {
-            if (ok)
-                setOpen("ok");
-            else if (fail)
-                setOpen("fail");
+            if (ok) setOpen("ok");
+            else if (fail) setOpen("fail");
         }
-    }, [ok, fail, loading]);
-    (0, react_1.useEffect)(function () {
-        var timeout;
+    }, [
+        ok,
+        fail,
+        loading
+    ]);
+    (0, _react.useEffect)(()=>{
+        let timeout;
         if (open === "fail" && failTimeout) {
-            timeout = setTimeout(function () { return setOpen(""); }, failTimeout);
+            timeout = setTimeout(()=>setOpen(""), failTimeout);
+        } else if (open === "ok" && okTimeout) {
+            timeout = setTimeout(()=>setOpen(""), okTimeout);
         }
-        else if (open === "ok" && okTimeout) {
-            timeout = setTimeout(function () { return setOpen(""); }, okTimeout);
-        }
-        return function () {
+        return ()=>{
             if (timeout) {
                 clearTimeout(timeout);
             }
         };
-    }, [open, failTimeout, okTimeout]);
-    var formExpanded = true;
-    if (collapseOnFail && fail)
-        formExpanded = false;
-    if (collapseOnOk && ok)
-        formExpanded = false;
-    return ((0, jsx_runtime_1.jsxs)(exports.Root, tslib_1.__assign({ method: "post", noValidate: true }, props, { children: [(0, jsx_runtime_1.jsx)(exports.Collapsable, tslib_1.__assign({}, commonProps, { "$open": formExpanded, recalc: loading, body: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, loading && ((0, jsx_runtime_1.jsx)(exports.Overlay, { children: (0, jsx_runtime_1.jsx)(exports.Progress, {}) }))] }) })), (0, jsx_runtime_1.jsx)(exports.Collapsable, tslib_1.__assign({}, commonProps, { "$open": open === "ok" && !loading, body: (0, jsx_runtime_1.jsx)(exports.Ok, tslib_1.__assign({}, okProps)) })), (0, jsx_runtime_1.jsx)(exports.Collapsable, tslib_1.__assign({}, commonProps, { "$open": open === "fail" && !loading, body: (0, jsx_runtime_1.jsx)(exports.Fail, tslib_1.__assign({}, failProps)) }))] })));
+    }, [
+        open,
+        failTimeout,
+        okTimeout
+    ]);
+    let formExpanded = true;
+    if (collapseOnFail && fail) formExpanded = false;
+    if (collapseOnOk && ok) formExpanded = false;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(Root, {
+        method: "post",
+        noValidate: true,
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(Collapsable, {
+                ...commonProps,
+                $open: formExpanded,
+                recalc: loading,
+                body: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                    children: [
+                        children,
+                        loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(Overlay, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Progress, {})
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(Collapsable, {
+                ...commonProps,
+                $open: open === "ok" && !loading,
+                body: /*#__PURE__*/ (0, _jsxruntime.jsx)(Ok, {
+                    ...okProps
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(Collapsable, {
+                ...commonProps,
+                $open: open === "fail" && !loading,
+                body: /*#__PURE__*/ (0, _jsxruntime.jsx)(Fail, {
+                    ...failProps
+                })
+            })
+        ]
+    });
 };
-exports.Form = Form;
-exports.KoineForm = (0, helpers_1.extendComponent)(exports.Form, {
-    Root: exports.Root,
-    Overlay: exports.Overlay,
-    Progress: exports.Progress,
-    Collapsable: exports.Collapsable,
-    Ok: exports.Ok,
-    Fail: exports.Fail,
-});
+const KoineForm = (0, _helpers.extendComponent)(Form, {
+    Root,
+    Overlay,
+    Progress,
+    Collapsable,
+    Ok,
+    Fail
+}); // export default Form;