react-miui 0.5.1 → 0.8.0

package/src/components/ui/modal/Modal.tsx

@@ -0,0 +1,136 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import classnames from "classnames";
+
+import styles from "./Modal.module.scss";
+import { makeVariants } from "../../../utils/makeVariants";
+import { ModalNegateMargin } from "./ModalNoMargin";
+
+type Variant = "bottom" | "full";
+
+interface Props {
+    onOverlayClick?: (() => void) | "close" | null;
+    closeOnEsc?: boolean;
+    onClose: () => void;
+    isOpen: boolean;
+    title?: React.ReactNode;
+    className?: string;
+    variant?: Variant | Variant[];
+}
+
+interface SubComponents {
+    NegateMargin: typeof ModalNegateMargin;
+}
+
+// eslint-disable-next-line max-lines-per-function,max-statements
+const Modal: React.FC<Props> & SubComponents = ({
+    children,
+    onClose,
+    isOpen,
+    title,
+    className,
+    onOverlayClick = "close",
+    closeOnEsc = true,
+    variant,
+}) => {
+    const [isClosing, setIsClosing] = useState(false);
+    const [isRendered, setIsRendered] = useState(false);
+    const overlayRef = useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const v = makeVariants(variant);
+
+    useEffect(() => {
+        if (!isOpen || !closeOnEsc) {
+            return;
+        }
+
+        const onKeyDown = (e: KeyboardEvent) => {
+            if (e.key === "Escape") {
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [isOpen, closeOnEsc]);
+
+    useEffect(() => {
+        if (!isOpen) {
+            setIsClosing(true);
+            return;
+        }
+        setIsRendered(true);
+        setIsClosing(false);
+    }, [isOpen]);
+
+    useEffect(() => {
+        if (!isClosing) {
+            return;
+        }
+
+        if (!overlayRef.current || !containerRef.current) {
+            return;
+        }
+
+        overlayRef.current.style.animation = "none";
+        containerRef.current.style.animation = "none";
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        overlayRef.current.offsetHeight; // force sync document reflow
+        overlayRef.current.style.removeProperty("animation");
+        containerRef.current.style.removeProperty("animation");
+    }, [isClosing]);
+
+    const titleElem = title && <div className={styles.title}>{title}</div>;
+
+    const handleOverlayClick = useCallback((e: React.MouseEvent) => {
+        if (e.target !== e.currentTarget) {
+            return;
+        }
+        if (onOverlayClick === "close") {
+            onClose();
+        }
+        if (typeof onOverlayClick === "function") {
+            onOverlayClick();
+        }
+    }, [onOverlayClick, onClose]);
+
+    const handleAnimationEnd = useCallback(() => {
+        if (isOpen) {
+            return;
+        }
+
+        setIsRendered(false);
+    }, [isOpen]);
+
+    if (!isRendered) {
+        return null;
+    }
+
+    const overlayCls = classnames(styles.overlay, {
+        [styles.isClosing]: isClosing,
+        [styles.overlayOnBottom]: v.includes("bottom"),
+    });
+
+    const containerCls = classnames(styles.container, className, {
+        [styles.isClosing]: isClosing,
+        [styles.full]: v.includes("full"),
+    });
+
+    return (
+        <div
+            className={overlayCls}
+            onClick={handleOverlayClick}
+            ref={overlayRef}
+            onAnimationEnd={handleAnimationEnd}
+        >
+            <div className={containerCls} ref={containerRef}>
+                {titleElem}
+                {children}
+            </div>
+        </div>
+    );
+};
+Modal.NegateMargin = ModalNegateMargin;
+
+export { Modal };

package/src/components/ui/modal/ModalButton.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import styles from "./ModalButtons.module.scss";
+import { makeVariants } from "../../../utils/makeVariants";
+import classnames from "classnames";
+
+type Variant = "main";
+
+interface Props {
+    variant?: Variant | Variant[];
+}
+
+const ModalButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & Props> = ({
+    className, children, variant, ...props
+}) => {
+    const v = makeVariants(variant);
+
+    const cls = classnames(styles.button, {
+        [styles.buttonMain]: v.includes("main"),
+    }, className);
+
+    return <button {...props} className={cls}>{children}</button>;
+};
+
+export { ModalButton };

package/src/components/ui/modal/ModalButtons.module.scss

@@ -0,0 +1,32 @@
+.container {
+    display: flex;
+    margin-top: calc(100px / var(--ratio-dimensions));
+    margin-left: -20px;
+    margin-right: -20px;
+    margin-bottom: -20px;
+}
+
+.button {
+    border: none;
+    border-top: 1px solid var(--modal-button-border);
+    background: var(--modal-button-bg);
+    flex: 1;
+    height: calc(156px / var(--ratio-dimensions));
+    font-weight: 500;
+
+    &:not(:first-child) {
+        border-left: 1px solid var(--modal-button-border);
+    }
+
+    &:first-child {
+        border-bottom-left-radius: calc(12px / var(--ratio-dimensions));
+    }
+
+    &:last-child {
+        border-bottom-right-radius: calc(12px / var(--ratio-dimensions));
+    }
+}
+
+.buttonMain {
+    color: var(--main-color);
+}

package/src/components/ui/modal/ModalButtons.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { ModalButton } from "./ModalButton";
+
+import styles from "./ModalButtons.module.scss";
+
+interface Props {}
+
+interface SubComponents {
+    Button: typeof ModalButton;
+}
+
+const ModalButtons: React.FC<Props> & SubComponents = (props) => {
+    return <div className={styles.container}>{props.children}</div>;
+};
+ModalButtons.Button = ModalButton;
+
+export { ModalButtons };

package/src/components/ui/modal/ModalNoMargin.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import styles from "./Modal.module.scss";
+import { List } from "../../layout/list/List";
+
+interface Props {}
+
+const ModalNegateMargin: React.FC<Props> = (props) => {
+    const chld = React.Children.map(props.children, (child, index) => {
+        if (child && typeof child === "object" && "type" in child && child.type === List) {
+            return React.cloneElement(child, {
+                // @TODO this will overwrite className
+                className: styles.removeMargin,
+            });
+        }
+
+        return child;
+    });
+    return <div className={styles.negateMargin}>{chld}</div>;
+};
+
+export { ModalNegateMargin };

package/src/components/ui/toaster/Notification.tsx

@@ -0,0 +1,31 @@
+import React, { useCallback } from "react";
+import classnames from "classnames";
+
+import type { Toast } from "./types";
+import styles from "./Toaster.module.scss";
+
+interface Props {
+    toast: Toast;
+    onRemove: (id: Toast["id"]) => void;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-shadow
+const Notification: React.FC<Props> = (props) => {
+    const handleRemove = useCallback(() => {
+        props.onRemove(props.toast.id);
+    }, [props.toast.id]);
+
+    return (
+        <div
+            className={classnames(styles.toast, {
+                [styles.hide]: props.toast.hide,
+            })}
+            key={props.toast.id}
+            onTransitionEnd={handleRemove}
+        >
+            <span>{props.toast.text}</span>
+        </div>
+    );
+};
+
+export { Notification };

package/src/components/ui/toaster/Toaster.module.scss

@@ -0,0 +1,32 @@
+@keyframes show {
+    from {
+        transform: translateY(calc(100% + calc(190px / var(--ratio-dimensions))))
+    }
+}
+
+.toast {
+    position: fixed;
+    bottom: 0;
+    left: 40px;
+    right: 40px;
+    display: flex;
+    justify-content: center;
+    z-index: 1;
+
+    span {
+        background: rgba(56, 50, 46, 0.85);
+        color: #F9F6F2;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.37);
+        border-radius: 12px; // around 22 @TODO use calc here
+        display: inline-block;
+        padding: 1em 1em;
+        animation: show 500ms 1;
+        animation-fill-mode: forwards;
+        margin-bottom: calc(190px / var(--ratio-dimensions));
+    }
+}
+
+.hide {
+    transition: opacity 300ms;
+    opacity: 0;
+}

package/src/components/ui/toaster/Toaster.tsx

@@ -0,0 +1,101 @@
+import React, { createContext, useContext } from "react";
+
+import type { Toast } from "./types";
+// eslint-disable-next-line @typescript-eslint/no-shadow
+import { Notification } from "./Notification";
+
+type ToasterFn = (text: string) => void;
+
+const ToasterContext = createContext<ToasterFn>(() => {
+    throw new Error("Toaster Provider missing in the tree");
+});
+
+const prefix = `${Date.now()}_`;
+let counter = 0;
+
+interface Props {}
+interface State {
+    list: Toast[];
+}
+
+const DEFAULT_TIMEOUT = 5000;
+
+class ToasterProvider extends React.Component<Props, State> {
+    public constructor(props: Props, context: unknown) {
+        super(props, context);
+
+        this.state = {
+            list: [],
+        };
+    }
+
+    private readonly _add = (text: string) => {
+        this._removeAllToasts();
+
+        const id = prefix + String(counter++);
+        const hide = false;
+
+        this.setState(prev => ({
+            ...prev,
+            list: [...prev.list, {
+                id,
+                text,
+                hide,
+            }],
+        }));
+
+        setTimeout(() => {
+            this.setState(prev => ({
+                ...prev,
+                list: prev.list.map(p => {
+                    if (p.id !== id) {
+                        return p;
+                    }
+                    return {
+                        ...p,
+                        hide: true,
+                    };
+                }),
+            }));
+        }, DEFAULT_TIMEOUT);
+    };
+
+    private readonly _handleRemove = (id: Toast["id"]) => {
+        this.setState(prev => ({
+            ...prev,
+            list: prev.list.filter(p => p.id !== id),
+        }));
+    };
+
+    private readonly _removeAllToasts = () => {
+        this.setState(prev => ({
+            ...prev,
+            list: prev.list.map(p => {
+                if (p.hide) {
+                    return p;
+                }
+                return {
+                    ...p,
+                    hide: true,
+                };
+            }),
+        }));
+    };
+
+    public render() {
+        const notifications = this.state.list.map((t) => {
+            return <Notification onRemove={this._handleRemove} key={t.id} toast={t} />;
+        });
+
+        return (
+            <ToasterContext.Provider value={this._add}>
+                {notifications}
+                {this.props.children}
+            </ToasterContext.Provider>
+        );
+    }
+}
+
+const useToaster = () => useContext(ToasterContext);
+
+export { ToasterProvider, useToaster };

package/src/components/ui/toaster/types.ts

@@ -0,0 +1,9 @@
+interface Toast {
+    id: string;
+    text: string;
+    hide: boolean;
+}
+
+export type {
+    Toast,
+};

package/src/demo/Demo.tsx

@@ -4,13 +4,16 @@ import styles from "./Demo.module.scss";
 import { Menu } from "./Menu";
 import { Main } from "./Main";
 import { componentsMap } from "./componentsMap";
+import { ToasterProvider } from "../components/ui/toaster/Toaster";
 
 const Demo: React.FC = (props) => {
     return (
-        <div className={styles.container}>
-            <Menu list={componentsMap} />
-            <Main />
-        </div>
+        <ToasterProvider>
+            <div className={styles.container}>
+                <Menu list={componentsMap} />
+                <Main />
+            </div>
+        </ToasterProvider>
     );
 };
 

package/src/demo/Menu.module.scss

@@ -2,6 +2,7 @@
     margin: 0;
     padding: 0;
     border-right: 1px solid black;
+    overflow: auto;
 
     ul {
         margin: 0 0 0 15px;

package/src/demo/components/form/Form.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Section } from "../../../components/layout/section/Section";
+import { SectionContainer } from "../../../components/layout/section/SectionContainer";
+import { Input } from "../../../components/form/Input";
+import { Label } from "../../../components/form/Label";
+import { Button } from "../../../components/ui/button/Button";
+import { TextArea } from "../../../components/form/TextArea";
+
+// @TODO add checkbox
+// @TODO add toggle
+// @TODO some kind of `form` wrapper which also takes cares of margins?
+const FormDemo = () => {
+    return (
+        <SectionContainer>
+            <Section>
+                <Section variant={["vertical", "horizontal"]}>
+                    <Label label={"First name"}>
+                        <Input placeholder={""} />
+                    </Label>
+                    <Label label={"E-mail"}>
+                        <Input placeholder={"Don't forget the @"} suffix={".com"} />
+                    </Label>
+                    <Label label={"Your story"}>
+                        <TextArea placeholder={"Hello"} />
+                    </Label>
+                    <Label>
+                        <Button>Submit</Button>
+                    </Label>
+                </Section>
+            </Section>
+        </SectionContainer>
+    );
+};
+
+export { FormDemo };

package/src/demo/components/form/Input.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Input } from "../../../components/form/Input";
+import { ICON, Icon } from "../../../components/icons/Icon";
+
+const InputDemo: React.FC = () => {
+    return (
+        <>
+            <Input placeholder={"Capacity"} prefix={<Icon name={ICON.battery} />} suffix={"kWh"} />
+        </>
+    );
+};
+
+export { InputDemo };

package/src/demo/components/form/Label.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Label } from "../../../components/form/Label";
+import { Input } from "../../../components/form/Input";
+import { ICON, Icon } from "../../../components/icons/Icon";
+
+const LabelDemo = () => {
+    return (
+        <Label label={"Capacity"}>
+            <Input placeholder={"ie: 500"} prefix={<Icon name={ICON.battery} />} suffix={"kWh"} />
+        </Label>
+    );
+};
+
+export { LabelDemo };

package/src/demo/components/form/Search.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { SearchContainer } from "../../../components/layout/section/SearchContainer";
+import { Input } from "../../../components/form/Input";
+import { ICON, Icon } from "../../../components/icons/Icon";
+import { Section } from "../../../components/layout/section/Section";
+import { SectionContainer } from "../../../components/layout/section/SectionContainer";
+import { List } from "../../../components/layout/list/List";
+import { Item } from "../../../components/layout/list/Item";
+
+const SearchDemo = () => {
+    return (
+        <SectionContainer>
+            <SearchContainer>
+                <Input placeholder={"Search..."} prefix={<Icon name={ICON.search} />} />
+            </SearchContainer>
+            <Section>
+                <List>
+                    <List.Header>Messages</List.Header>
+                    <Item>Lorem</Item>
+                    <Item>Ipsum</Item>
+                    <Item>Dolor</Item>
+                </List>
+            </Section>
+            <Section>
+                <List>
+                    <List.Header>Contacts</List.Header>
+                    <Item>Lorem</Item>
+                    <Item>Ipsum</Item>
+                    <Item>Dolor</Item>
+                </List>
+            </Section>
+        </SectionContainer>
+    );
+};
+
+export { SearchDemo };

package/src/demo/components/form/TextArea.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { TextArea } from "../../../components/form/TextArea";
+
+const TextAreaDemo: React.FC = () => {
+    return (
+        <>
+            <TextArea placeholder={"Capacity"} />
+        </>
+    );
+};
+
+export { TextAreaDemo };

package/src/demo/components/form/Toggle.tsx

@@ -5,7 +5,7 @@ import { Item } from "../../../components/layout/list/Item";
 
 const handleNoop = () => undefined;
 
-const ToggleDemo: React.VFC = () => {
+const ToggleDemo: React.FC = () => {
     const [state, ss] = useState<boolean | null>(null);
 
     useEffect(() => {

package/src/demo/components/layout/list/Inset.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { List } from "../../../../components/layout/list/List";
+import { Item } from "../../../../components/layout/list/Item";
+import { Header } from "../../../../components/layout/list/Header";
+
+const ListInsetDemo = () => {
+    return (
+        <List variant={"inset"}>
+            <Header>Section name</Header>
+            <Item>Item</Item>
+            <Item>Another item</Item>
+            <Item>One more</Item>
+            <Header>Status section</Header>
+            <Item>Item</Item>
+            <Item>One more</Item>
+            <Header>Selection</Header>
+            <Item>Item</Item>
+            <Item>Another item</Item>
+            <Item>One more</Item>
+        </List>
+    );
+};
+
+export { ListInsetDemo };

package/src/demo/components/layout/list/Selection.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { List } from "../../../../components/layout/list/List";
+import { Item } from "../../../../components/layout/list/Item";
+import { Header } from "../../../../components/layout/list/Header";
+
+const ListSelectionDemo = () => {
+    return (
+        <List>
+            <Header>Select your favourite meal</Header>
+            <Item selected={false}>Stick</Item>
+            <Item selected={true}>Stone</Item>
+            <Item selected={false}>Bone</Item>
+        </List>
+    );
+};
+
+export { ListSelectionDemo };

package/src/demo/components/ui/button/ButtonDemo.tsx

@@ -1,16 +1,20 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { Button } from "../../../../index.js";
 
 const ButtonDemo = () => {
+    const handleClick = useCallback(() => {
+        alert("Clicked");
+    }, []);
+
     return (
         <div>
-            <Button>Basic button</Button>
+            <Button onClick={handleClick}>Basic button</Button>
             <br />
-            <Button disabled={true}>Disabled button</Button>
+            <Button disabled={true} onClick={handleClick}>Disabled button</Button>
             <br />
-            <Button variant={"inline"}>Inline button</Button>
+            <Button variant={"inline"} onClick={handleClick}>Inline button</Button>
             <br />
-            <Button variant={"outline"}>Outline button</Button>
+            <Button variant={"outline"} onClick={handleClick}>Outline button</Button>
         </div>
     );
 };