@koine/react 2.0.0-beta.14 → 2.0.0-beta.16

package/Collapsable/CollapsableReach.mjs

@@ -1,250 +0,0 @@
-/**
- * @file
- *
- * Maybe do a simplified version following this example:
- * https://codesandbox.io/s/framer-motion-accordion-qx958?file=/src/Example.tsx
- */ // import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
-// import styled from "styled-components";
-// import { MotionProps, m } from "framer-motion";
-// import {
-//   Disclosure,
-//   DisclosureButton,
-//   DisclosurePanel,
-// } from "@reach/disclosure";
-// import { BsBoxArrowInDown as IconCollapse } from "react-icons/bs";
-// import { btnStyleReset } from "../Buttons";
-// import { useWindowSize } from "../hooks/useWindowSize";
-// import { InputInvisible } from "../Forms/styles";
-// export type CollapsableStyledProps = {
-//   $expanded?: boolean;
-// };
-// /**
-//  * `overflow-anchor: none;` keeps the same scrolling position
-//  * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Accordion/Accordion.js#L54
-//  */
-// export const CollapsableRoot = styled(Disclosure)`
-//   overflow-anchor: none;
-// `;
-// export const CollapsableHeadRoot = styled(m.label).attrs(
-//   (props: Pick<CollapsableHeadProps, "id">) => ({
-//     htmlFor: `${props.id}-input`,
-//   })
-// )<Pick<CollapsableStyledProps, "$expanded">>`
-//   ${btnStyleReset}
-//   width: 100%;
-//   padding: 0;
-//   text-align: left;
-//   display: flex;
-//   justify-content: space-between;
-//   align-items: center;
-//   cursor: pointer;
-// `;
-// export const CollapsableHeadSpace = styled.div`
-//   flex: 1;
-//   padding-left: 20px;
-// `;
-// export const CollapsableHeadAction = styled.div`
-//   padding-left: 20px;
-// `;
-// export const CollaspableHeadLine = styled(m.div)`
-//   width: 0%;
-//   height: 1px;
-//   background: #bbb;
-// `;
-// export const collapsableHeadLineMotion = {
-//   hover: {
-//     width: "100%",
-//     transition: {
-//       duration: 0.4,
-//     },
-//   },
-// };
-// export const CollapsableHeadText = styled.div``;
-// export const CollapsableHeadIcon = styled(m.div)``;
-// export type CollapsableHeadProps = React.PropsWithChildren<
-//   Pick<CollapsableStyledProps, "$expanded"> &
-//     CollapsableComponents & {
-//       id: CollapsableProps["id"];
-//       onClick: (...args: any) => any;
-//     }
-// >;
-// export const CollapsableHead = ({
-//   $expanded,
-//   id,
-//   onClick,
-//   HeadRoot = CollapsableHeadRoot,
-//   HeadAction = CollapsableHeadAction,
-//   HeadIcon = CollapsableHeadIcon,
-//   children,
-// }: CollapsableHeadProps) => {
-//   return (
-//     <DisclosureButton
-//       onClick={onClick}
-//       // tabIndex={0}
-//       // role="tab"
-//       initial="rest"
-//       whileHover="hover"
-//       $expanded={$expanded}
-//       as={HeadRoot}
-//       id={id}
-//     >
-//       <CollapsableHeadText>{children}</CollapsableHeadText>
-//       <CollapsableHeadSpace>
-//         <CollaspableHeadLine
-//           variants={collapsableHeadLineMotion}
-//           animate={$expanded ? "hover" : ""}
-//         />
-//       </CollapsableHeadSpace>
-//       {HeadAction && (
-//         <HeadAction>
-//           {HeadIcon && (
-//             <HeadIcon animate={{ rotate: $expanded ? 180 : 0 }}>
-//               <IconCollapse />
-//             </HeadIcon>
-//           )}
-//         </HeadAction>
-//       )}
-//     </DisclosureButton>
-//   );
-// };
-// export const CollapsableInput = styled(InputInvisible).attrs({
-//   type: "checkbox",
-// })``;
-// export const CollasableBodyWrap = styled(
-//   DisclosurePanel
-// )<CollapsableStyledProps>`
-//   /* this is because @reach adds the "hidden" attribute */
-//   &[hidden] {
-//     display: block;
-//   }
-// `;
-// export const CollapsableBodyRoot = styled(m.div)`
-//   .no-js & {
-//     transition: margin-top 0.2s ease;
-//   }
-//   .no-js ${CollapsableInput}:checked + ${CollasableBodyWrap} & {
-//     margin-top: 0 !important;
-//     opacity: 1 !important;
-//   }
-// `;
-// export type CollapsableBodyProps = MotionProps &
-//   Pick<CollapsableStyledProps, "$expanded"> & {
-//     children?: React.ReactNode;
-//     style?: React.CSSProperties;
-//   };
-// export const CollapsableBody = forwardRef<HTMLDivElement, CollapsableBodyProps>(
-//   function CollapsableBody(props, ref) {
-//     return <CollapsableBodyRoot ref={ref} {...props} />;
-//   }
-// );
-// export type CollapsableComponents = {
-//   HeadRoot?: typeof CollapsableHeadRoot;
-//   HeadAction?: null | typeof CollapsableHeadAction | React.FC<any>;
-//   HeadIcon?: null | typeof CollapsableHeadIcon | React.FC<any>;
-// };
-// export type CollapsableProps = React.ComponentPropsWithoutRef<"div"> & {
-//   id?: string;
-//   expanded?: boolean;
-//   /** Used to trigger a recalculation effect */
-//   recalc?: any;
-//   onChange?: () => any;
-//   head: null | React.ReactNode;
-//   body: React.ReactNode;
-//   /** Amount of milliseconds after which the component collapses */
-//   // autoCollapse?: number;
-//   components?: CollapsableComponents;
-//   /** @default "Expand" */
-//   ariaExpand?: string;
-//   /** @default "Collapse" */
-//   ariaCollapse?: string;
-// };
-// export const Collapsable = ({
-//   expanded: propExpanded,
-//   recalc,
-//   onChange,
-//   id,
-//   head,
-//   body,
-//   // autoCollapse,
-//   components = {},
-//   ariaExpand = "Expand",
-//   ariaCollapse = "Collapse",
-//   ...props
-// }: CollapsableProps) => {
-//   const isControlled = typeof propExpanded !== "undefined";
-//   const [stateExpanded, setStateExpanded] = useState(propExpanded);
-//   const [height, setHeight] = useState(0);
-//   const hash = id ? `#${id}` : "";
-//   const winSize = useWindowSize();
-//   const expanded = isControlled ? propExpanded : stateExpanded;
-//   const [overflow, setOverflow] = useState(expanded ? "unset" : "hidden");
-//   const content = useRef<HTMLDivElement>(null);
-//   const defaultId = useId();
-//   id = id || defaultId;
-//   const handleClick = useCallback(() => {
-//     if (hash) {
-//       window.history.replaceState(
-//         null,
-//         "",
-//         expanded ? window.location.pathname + window.location.search : hash
-//       );
-//     }
-//     if (onChange) {
-//       onChange();
-//     }
-//     if (!isControlled) {
-//       setStateExpanded((prevExpanded) => !prevExpanded);
-//     }
-//   }, [expanded, hash, onChange, isControlled]);
-//   const handleAnimationStart = useCallback(() => {
-//     setOverflow("hidden");
-//   }, []);
-//   const handleAnimationComplete = useCallback(() => {
-//     setOverflow(expanded ? "unset" : "hidden");
-//   }, [expanded]);
-//   useEffect(() => {
-//     if (content.current) {
-//       setHeight(Math.ceil(content.current.offsetHeight));
-//     }
-//   }, [winSize, recalc]);
-//   // deeplink on mount
-//   useEffect(() => {
-//     if (!isControlled && hash && window.location.hash === hash) {
-//       setStateExpanded(true);
-//     }
-//   }, [hash, isControlled]);
-//   return (
-//     <CollapsableRoot id={id} {...props} open={expanded || false}>
-//       {head !== null && (
-//         <CollapsableHead
-//           id={id}
-//           $expanded={expanded}
-//           onClick={handleClick}
-//           {...components}
-//         >
-//           {head}
-//         </CollapsableHead>
-//       )}
-//       <CollapsableInput id={`${id}-input`} />
-//       <CollasableBodyWrap $expanded={expanded} style={{ overflow }}>
-//         <CollapsableBody
-//           ref={content}
-//           $expanded={expanded}
-//           // aria-expanded={expanded}
-//           // aria-label={expanded ? ariaCollapse : ariaExpand}
-//           style={{
-//             pointerEvents: expanded ? "all" : "none",
-//           }}
-//           onAnimationStart={handleAnimationStart}
-//           onAnimationComplete={handleAnimationComplete}
-//           animate={{
-//             marginTop: expanded ? 0 : height ? `-${height}px` : "-100vh",
-//             opacity: expanded ? 1 : 0.4,
-//           }}
-//         >
-//           {body}
-//         </CollapsableBody>
-//       </CollasableBodyWrap>
-//     </CollapsableRoot>
-//   );
-// };

package/Collapsable/index.mjs

@@ -1 +0,0 @@
-export * from "./Collapsable"; // export * from "./CollapsableReach";

package/Debug/Debug.mjs

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from "styled-components";
-const Root = styled.div`
-  background: #f4f4f4;
-  border: 1px solid #ddd;
-  border-left: 3px solid #f36d33;
-  color: #666;
-  page-break-inside: avoid;
-  font-family: monospace;
-  font-size: small;
-  line-height: 1.6;
-  margin-bottom: 1.6em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1em 1.5em;
-  display: block;
-  word-wrap: break-word;
-`;
-export const Debug = ({ data })=>{
-    return /*#__PURE__*/ _jsx(Root, {
-        children: JSON.stringify(data, undefined, 2)
-    });
-};

package/Debug/index.mjs

@@ -1 +0,0 @@
-export * from "./Debug";

package/Details/Details.mjs

@@ -1,90 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
-import { extendComponent } from "../helpers";
-import { useWindowSize } from "../hooks/useWindowSize";
-export const Root = "details";
-export const Summary = "summary";
-export const Body = "div";
-export const Content = "div";
-/**
- * FIXME: it actually works even without forwardRef, check if we do need it
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
- */ const DetailsWithRef = /*#__PURE__*/ forwardRef(function Details({ id, open: propOpen, recalc, summary, children, Root: _Root, Summary: _Summary, Body: _Body, Content: _Content, onChange, ...props }, ref) {
-    const isControlled = typeof propOpen !== "undefined";
-    const [stateOpen, setStateOpen] = useState(propOpen);
-    const [, /* height */ setHeight] = useState(0);
-    const hash = id ? `#${id}` : "";
-    const winSize = useWindowSize();
-    const open = isControlled ? propOpen : stateOpen;
-    const [overflow /* setOverflow */ ] = useState(open ? "unset" : "hidden");
-    const content = useRef(null);
-    const defaultId = useId();
-    id = id || defaultId;
-    const handleClick = useCallback(()=>{
-        if (hash) {
-            window.history.replaceState(null, "", open ? window.location.pathname + window.location.search : hash);
-        }
-        if (onChange) {
-            onChange();
-        }
-        if (!isControlled) {
-            setStateOpen((prevOpen)=>!prevOpen);
-        }
-    }, [
-        open,
-        hash,
-        onChange,
-        isControlled
-    ]);
-    useEffect(()=>{
-        if (content.current) {
-            setHeight(Math.ceil(content.current.offsetHeight));
-        }
-    }, [
-        winSize,
-        recalc
-    ]);
-    // deeplink on mount
-    useEffect(()=>{
-        if (!isControlled && hash && window.location.hash === hash) {
-            setStateOpen(true);
-        }
-    }, [
-        hash,
-        isControlled
-    ]);
-    return /*#__PURE__*/ _jsxs(Root, {
-        ...props,
-        open: open || false,
-        children: [
-            /*#__PURE__*/ _jsx(Summary, {
-                $open: open,
-                onClick: handleClick,
-                children: summary || " "
-            }),
-            /*#__PURE__*/ _jsx(Body, {
-                $open: open,
-                style: {
-                    overflow
-                },
-                children: /*#__PURE__*/ _jsx(Content, {
-                    // ref={content}
-                    $open: open,
-                    // aria-expanded={open}
-                    // aria-label={open ? ariaCollapse : ariaExpand}
-                    style: {
-                        pointerEvents: open ? "all" : "none"
-                    },
-                    children: children
-                })
-            })
-        ]
-    });
-});
-export const KoineDetails = extendComponent(DetailsWithRef, {
-    Root,
-    Summary,
-    Body,
-    Content
-}); // export default Details;

package/Details/Details.stories.mjs

@@ -1,21 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { StoryDetails, storyDetailsMeta } from "@koine/stories";
-import { KoineDetails } from "./Details";
-export default {
-    component: KoineDetails,
-    title: "Base/Details",
-    ...storyDetailsMeta
-};
-const BareTemplate = (args)=>{
-    // return <StoryDetails {...args} Details={KoineDetails} />;
-    return /*#__PURE__*/ _jsx(StoryDetails, {
-        ...args,
-        Details: KoineDetails
-    });
-// return <div><Details {...args} /></div>;
-};
-export const Bare = BareTemplate.bind({});
-Bare.args = {
-    summary: "Details summary",
-    children: "Medium"
-};

package/Details/index.mjs

@@ -1 +0,0 @@
-export * from "./Details";

package/Dialog/DialogMui.mjs

@@ -1,105 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 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,
-//   $scrollPaper,
-//   Root: _Root,
-//   Backdrop: _Backdrop,
-//   Container: _Container,
-//   Paper: _Paper,
-//   Close: _Close,
-//   Header: _Header,
-//   Body: _Body,
-//   ...props
-// }: KoineDialogProps) => (
-//   <Root components={{ Backdrop }} onBackdropClick={props.onClose} {...props}>
-//     <Container $scrollPaper={$scrollPaper}>
-//       <Paper aria-label={title || ""} $scrollPaper={$scrollPaper}>
-//         {title && <Header>{title}</Header>}
-//         <Close onClick={props.onClose}>
-//           <IconClose />
-//         </Close>
-//         <Body>{children}</Body>
-//       </Paper>
-//     </Container>
-//   </Root>
-// );
-/**
- *
- * Main differences from [Mui Dialog](https://mui.com/material-ui/react-dialog):
- *
- * - By default uses `scroll="body"` instead of paper.
- * - Optionally uses `framer-motion` for animations
- * - Uses backdrop blur by default
- *
- * FIXME: it actually works even without forwardRef, check if we do need it
- */ 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
-    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;
-    };
-    const handleBackdropClick = (event)=>{
-        // Ignore the events not coming from the "backdrop".
-        if (!backdropClick.current) {
-            return;
-        }
-        backdropClick.current = null;
-        // if (onBackdropClick) onBackdropClick(event);
-        if (onClose) {
-            onClose(event, "backdropClick");
-        }
-    };
-    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.mjs

@@ -1,20 +0,0 @@
-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
-};

package/Dialog/css/bare.mjs

@@ -1,19 +0,0 @@
-import { classed, extendComponent } from "../../helpers";
-import * as _ from "../DialogMui";
-// export type { KoineDialogProps } from "../DialogMui";
-export const Root = classed(_.Root)`dialog`;
-export const Backdrop = classed(_.Backdrop)`dialogBackdrop`;
-export const Container = classed(_.Container)`dialogContainer`;
-export const Paper = classed(_.Paper)`dialogPaper`;
-export const Close = classed(_.Close)`"dialogClose`;
-export const Header = classed(_.Header)`dialogHeader`;
-export const Body = classed(_.Body)`dialogBody`;
-export const KoineDialog = extendComponent(_.KoineDialog, {
-    Root,
-    Backdrop,
-    Container,
-    Paper,
-    Close,
-    Header,
-    Body
-});

package/Dialog/css/index.stories.mjs

@@ -1,75 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { StoryDialog, storyDialogArgs, storyDialogMeta } from "@koine/stories";
-import { KoineDialog as bareComp } from "./bare";
-export default {
-    component: bareComp,
-    title: "Base/Dialog/CSS",
-    ...storyDialogMeta,
-    decorators: [
-        (Story)=>/*#__PURE__*/ _jsxs(_Fragment, {
-                children: [
-                    /*#__PURE__*/ _jsx("style", {
-                        children: `
-.dialog {
-  z-index: 1000;
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.dialogRoot {
-  z-index: 1300;
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.dialogBackdrop {
-  z-index: -1;
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  backdrop-filter: blur(0px);
-}
-
-.dialogContainer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-}
-
-.dialogPaper {
-  position: relative;
-}
-
-.dialogClose {
-  position: absolute;
-}
-
-.dialogHeader {
-}
-
-.dialogBody {
-}
-`
-                    }),
-                    /*#__PURE__*/ _jsx(Story, {})
-                ]
-            })
-    ]
-};
-const bareTemplate = (args)=>{
-    return /*#__PURE__*/ _jsx(StoryDialog, {
-        ...args,
-        Dialog: bareComp
-    });
-};
-export const bare = bareTemplate.bind({});
-bare.args = storyDialogArgs;

package/Dialog/index.mjs

@@ -1 +0,0 @@
-export { KoineDialog } from "./DialogMui";