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

package/Dialog/DialogMui.js

@@ -1,19 +1,53 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var Modal_1 = tslib_1.__importDefault(require("@mui/base/Modal"));
-var md_1 = require("react-icons/md");
-var helpers_1 = require("../helpers");
-exports.Root = Modal_1.default;
-exports.Backdrop = "div";
-exports.Container = "div";
-exports.Paper = "div";
-exports.Close = "button";
-exports.Header = "div";
-exports.Body = "div";
+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;
+    },
+    Backdrop: function() {
+        return Backdrop;
+    },
+    Container: function() {
+        return Container;
+    },
+    Paper: function() {
+        return Paper;
+    },
+    Close: function() {
+        return Close;
+    },
+    Header: function() {
+        return Header;
+    },
+    Body: function() {
+        return Body;
+    },
+    KoineDialog: function() {
+        return KoineDialog;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _jsxruntime = require("react/jsx-runtime");
+const _Modal = /*#__PURE__*/ _interop_require_default._(require("@mui/base/Modal"));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _md = require("react-icons/md");
+const _helpers = require("../helpers");
+const Root = _Modal.default;
+const Backdrop = "div";
+const Container = "div";
+const Paper = "div";
+const Close = "button";
+const Header = "div";
+const Body = "div";
 // const Dialog = ({
 //   children,
 //   title,
@@ -48,18 +82,16 @@ exports.Body = "div";
  * - Uses backdrop blur by default
  *
  * FIXME: it actually works even without forwardRef, check if we do need it
- */
-var DialogWithRef = (0, react_1.forwardRef)(function Dialog(_a, ref) {
-    var children = _a.children, title = _a.title, $scrollPaper = _a.$scrollPaper, _Root = _a.Root, _Backdrop = _a.Backdrop, _Container = _a.Container, _Paper = _a.Paper, _Close = _a.Close, _Header = _a.Header, _Body = _a.Body, onClose = _a.onClose, props = tslib_1.__rest(_a, ["children", "title", "$scrollPaper", "Root", "Backdrop", "Container", "Paper", "Close", "Header", "Body", "onClose"]);
+ */ const DialogWithRef = /*#__PURE__*/ (0, _react.forwardRef)(function Dialog({ children, title, $scrollPaper, Root: _Root, Backdrop: _Backdrop, Container: _Container, Paper: _Paper, Close: _Close, Header: _Header, Body: _Body, onClose, ...props }, ref) {
     // click handling is taken from
     // @see https://github.com/mui/material-ui/blob/c758b6c0b30f0831110458a746690b33147c45df/packages/mui-material/src/Dialog/Dialog.js#L205-L226
-    var backdropClick = (0, react_1.useRef)();
-    var handleMouseDown = function (event) {
+    const backdropClick = (0, _react.useRef)();
+    const handleMouseDown = (event)=>{
         // We don't want to close the dialog when clicking the dialog content.
         // Make sure the event starts and ends on the same DOM element.
         backdropClick.current = event.target === event.currentTarget;
     };
-    var handleBackdropClick = function (event) {
+    const handleBackdropClick = (event)=>{
         // Ignore the events not coming from the "backdrop".
         if (!backdropClick.current) {
             return;
@@ -70,14 +102,42 @@ var DialogWithRef = (0, react_1.forwardRef)(function Dialog(_a, ref) {
             onClose(event, "backdropClick");
         }
     };
-    return ((0, jsx_runtime_1.jsx)(exports.Root, tslib_1.__assign({ slots: { backdrop: exports.Backdrop }, onClick: handleBackdropClick, onClose: onClose, ref: ref }, props, { children: (0, jsx_runtime_1.jsx)(exports.Container, { "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown, children: (0, jsx_runtime_1.jsxs)(exports.Paper, { "aria-label": title || "", "$scrollPaper": $scrollPaper, children: [title && (0, jsx_runtime_1.jsx)(exports.Header, { children: title }), (0, jsx_runtime_1.jsx)(exports.Close, { onClick: onClose, children: (0, jsx_runtime_1.jsx)(md_1.MdClear, {}) }), (0, jsx_runtime_1.jsx)(exports.Body, { children: children })] }) }) })));
-});
-exports.KoineDialog = (0, helpers_1.extendComponent)(DialogWithRef, {
-    Root: exports.Root,
-    Backdrop: exports.Backdrop,
-    Container: exports.Container,
-    Paper: exports.Paper,
-    Close: exports.Close,
-    Header: exports.Header,
-    Body: exports.Body,
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Root, {
+        slots: {
+            backdrop: Backdrop
+        },
+        onClick: handleBackdropClick,
+        onClose: onClose,
+        ref: ref,
+        ...props,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Container, {
+            $scrollPaper: $scrollPaper,
+            onMouseDown: handleMouseDown,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(Paper, {
+                "aria-label": title || "",
+                $scrollPaper: $scrollPaper,
+                children: [
+                    title && /*#__PURE__*/ (0, _jsxruntime.jsx)(Header, {
+                        children: title
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(Close, {
+                        onClick: onClose,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_md.MdClear, {})
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(Body, {
+                        children: children
+                    })
+                ]
+            })
+        })
+    });
 });
+const KoineDialog = (0, _helpers.extendComponent)(DialogWithRef, {
+    Root,
+    Backdrop,
+    Container,
+    Paper,
+    Close,
+    Header,
+    Body
+}); // export default Dialog;

package/Dialog/DialogMui.mjs

@@ -1,16 +1,15 @@
-import { __assign, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef } from "react";
 import ModalUnstyled from "@mui/base/Modal";
+import React, { forwardRef, useRef } from "react";
 import { MdClear as IconClose } from "react-icons/md";
 import { extendComponent } from "../helpers";
-export var Root = ModalUnstyled;
-export var Backdrop = "div";
-export var Container = "div";
-export var Paper = "div";
-export var Close = "button";
-export var Header = "div";
-export var Body = "div";
+export const Root = ModalUnstyled;
+export const Backdrop = "div";
+export const Container = "div";
+export const Paper = "div";
+export const Close = "button";
+export const Header = "div";
+export const Body = "div";
 // const Dialog = ({
 //   children,
 //   title,
@@ -45,18 +44,16 @@ export var Body = "div";
  * - Uses backdrop blur by default
  *
  * FIXME: it actually works even without forwardRef, check if we do need it
- */
-var DialogWithRef = forwardRef(function Dialog(_a, ref) {
-    var children = _a.children, title = _a.title, $scrollPaper = _a.$scrollPaper, _Root = _a.Root, _Backdrop = _a.Backdrop, _Container = _a.Container, _Paper = _a.Paper, _Close = _a.Close, _Header = _a.Header, _Body = _a.Body, onClose = _a.onClose, props = __rest(_a, ["children", "title", "$scrollPaper", "Root", "Backdrop", "Container", "Paper", "Close", "Header", "Body", "onClose"]);
+ */ const DialogWithRef = /*#__PURE__*/ forwardRef(function Dialog({ children, title, $scrollPaper, Root: _Root, Backdrop: _Backdrop, Container: _Container, Paper: _Paper, Close: _Close, Header: _Header, Body: _Body, onClose, ...props }, ref) {
     // click handling is taken from
     // @see https://github.com/mui/material-ui/blob/c758b6c0b30f0831110458a746690b33147c45df/packages/mui-material/src/Dialog/Dialog.js#L205-L226
-    var backdropClick = useRef();
-    var handleMouseDown = function (event) {
+    const backdropClick = useRef();
+    const handleMouseDown = (event)=>{
         // We don't want to close the dialog when clicking the dialog content.
         // Make sure the event starts and ends on the same DOM element.
         backdropClick.current = event.target === event.currentTarget;
     };
-    var handleBackdropClick = function (event) {
+    const handleBackdropClick = (event)=>{
         // Ignore the events not coming from the "backdrop".
         if (!backdropClick.current) {
             return;
@@ -67,14 +64,42 @@ var DialogWithRef = forwardRef(function Dialog(_a, ref) {
             onClose(event, "backdropClick");
         }
     };
-    return (_jsx(Root, __assign({ slots: { backdrop: Backdrop }, onClick: handleBackdropClick, onClose: onClose, ref: ref }, props, { children: _jsx(Container, { "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown, children: _jsxs(Paper, { "aria-label": title || "", "$scrollPaper": $scrollPaper, children: [title && _jsx(Header, { children: title }), _jsx(Close, { onClick: onClose, children: _jsx(IconClose, {}) }), _jsx(Body, { children: children })] }) }) })));
-});
-export var KoineDialog = extendComponent(DialogWithRef, {
-    Root: Root,
-    Backdrop: Backdrop,
-    Container: Container,
-    Paper: Paper,
-    Close: Close,
-    Header: Header,
-    Body: Body,
+    return /*#__PURE__*/ _jsx(Root, {
+        slots: {
+            backdrop: Backdrop
+        },
+        onClick: handleBackdropClick,
+        onClose: onClose,
+        ref: ref,
+        ...props,
+        children: /*#__PURE__*/ _jsx(Container, {
+            $scrollPaper: $scrollPaper,
+            onMouseDown: handleMouseDown,
+            children: /*#__PURE__*/ _jsxs(Paper, {
+                "aria-label": title || "",
+                $scrollPaper: $scrollPaper,
+                children: [
+                    title && /*#__PURE__*/ _jsx(Header, {
+                        children: title
+                    }),
+                    /*#__PURE__*/ _jsx(Close, {
+                        onClick: onClose,
+                        children: /*#__PURE__*/ _jsx(IconClose, {})
+                    }),
+                    /*#__PURE__*/ _jsx(Body, {
+                        children: children
+                    })
+                ]
+            })
+        })
+    });
 });
+export const KoineDialog = extendComponent(DialogWithRef, {
+    Root,
+    Backdrop,
+    Container,
+    Paper,
+    Close,
+    Header,
+    Body
+}); // export default Dialog;

package/Dialog/DialogMui.stories.js

@@ -0,0 +1,38 @@
+"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, {
+    default: function() {
+        return _default;
+    },
+    Bare: function() {
+        return Bare;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _stories = require("@koine/stories");
+const _DialogMui = require("./DialogMui");
+const _default = {
+    component: _DialogMui.KoineDialog,
+    title: "Base/Dialog"
+};
+const BareTemplate = (args)=>{
+    // return <StoryDialog {...args} Dialog={KoineDialog} />;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_stories.StoryDialog, {
+        ...args,
+        Dialog: _DialogMui.KoineDialog
+    });
+// return <div><Dialog {...args} /></div>;
+};
+const Bare = BareTemplate.bind({});
+Bare.args = {
+    title: "Dialog title",
+    children: _stories.LoremIpsum
+};

package/Dialog/DialogMui.stories.mjs

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LoremIpsum, StoryDialog } from "@koine/stories";
+import { KoineDialog } from "./DialogMui";
+export default {
+    component: KoineDialog,
+    title: "Base/Dialog"
+};
+const BareTemplate = (args)=>{
+    // return <StoryDialog {...args} Dialog={KoineDialog} />;
+    return /*#__PURE__*/ _jsx(StoryDialog, {
+        ...args,
+        Dialog: KoineDialog
+    });
+// return <div><Dialog {...args} /></div>;
+};
+export const Bare = BareTemplate.bind({});
+Bare.args = {
+    title: "Dialog title",
+    children: LoremIpsum
+};