react-miui 0.7.0 → 0.9.2

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/Choice.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import { Choice } from "../../../components/form/choice/Choice";
+import { Section } from "../../../components/layout/section/Section";
+
+interface Props {}
+
+const values = ["Single", "Multiple"];
+
+const ChoiceDemo: React.FC<Props> = () => {
+    const [current, handleCurrent] = useState(values[0]);
+
+    return (
+        <Section variant={["vertical", "horizontal"]}>
+            <Choice values={values} value={current} name={"rnd"} onChange={handleCurrent} />
+        </Section>
+    );
+};
+
+export { ChoiceDemo };

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/modal/Modal.tsx

@@ -0,0 +1,110 @@
+import React, { useCallback, useState } from "react";
+import { Modal } from "../../../../components/ui/modal/Modal";
+import { Button } from "../../../../components/ui/button/Button";
+import { Input } from "../../../../components/form/Input";
+import { Checkbox } from "../../../../components/form/Checkbox";
+import { Label } from "../../../../components/form/Label";
+import { ModalButtons } from "../../../../components/ui/modal/ModalButtons";
+import { List } from "../../../../components/layout/list/List";
+import { Item } from "../../../../components/layout/list/Item";
+
+interface Props {}
+
+const handleNoop = () => undefined;
+
+const ModalDemo: React.FC<Props> = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const [open, setIsOpen] = useState(false);
+
+    const handleClose = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+
+    const handleOpen = useCallback(() => {
+        setIsOpen(true);
+    }, []);
+
+    return (
+        <div>
+            <Button onClick={handleOpen}>Open modal</Button>
+            <Modal onClose={handleClose} isOpen={open} title={"95.5 MHz"} variant={["bottom", "full"]}>
+                <Label>
+                    <Input placeholder={"New station"} />
+                </Label>
+                <Label>
+                    <Checkbox name={""} onChange={handleNoop} checked={true}>
+                        Remember me
+                    </Checkbox>
+                </Label>
+                <ModalButtons>
+                    <ModalButtons.Button onClick={handleClose}>
+                        Cancel
+                    </ModalButtons.Button>
+                    <ModalButtons.Button variant={"main"} onClick={handleClose}>
+                        Ok
+                    </ModalButtons.Button>
+                </ModalButtons>
+            </Modal>
+        </div>
+    );
+};
+
+const ModalCenteredDemo: React.FC<Props> = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const [open, setIsOpen] = useState(false);
+
+    const handleClose = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+
+    const handleOpen = useCallback(() => {
+        setIsOpen(true);
+    }, []);
+
+    return (
+        <div>
+            <Button onClick={handleOpen}>Open modal</Button>
+            <Modal onClose={handleClose} isOpen={open} title={"Format C:?"}>
+                <ModalButtons>
+                    <ModalButtons.Button onClick={handleClose}>
+                        Nope
+                    </ModalButtons.Button>
+                    <ModalButtons.Button variant={"main"} onClick={handleClose}>
+                        Yes, please
+                    </ModalButtons.Button>
+                </ModalButtons>
+            </Modal>
+        </div>
+    );
+};
+
+const ModalOptionsDemo: React.FC<Props> = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const [open, setIsOpen] = useState(false);
+
+    const handleClose = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+
+    const handleOpen = useCallback(() => {
+        setIsOpen(true);
+    }, []);
+
+    return (
+        <div>
+            <Button onClick={handleOpen}>Open modal</Button>
+            <Modal onClose={handleClose} isOpen={open} title={"Format C:?"}>
+                <Modal.NegateMargin>
+                    <List variant={"inset"}>
+                        <Item selected={false} onClick={handleClose}>First item</Item>
+                        <Item selected={true} onClick={handleClose}>Second item</Item>
+                        <Item selected={false} onClick={handleClose}>Third item</Item>
+                        <Item selected={false} onClick={handleClose}>Last option</Item>
+                    </List>
+                </Modal.NegateMargin>
+            </Modal>
+        </div>
+    );
+};
+
+export { ModalDemo, ModalCenteredDemo, ModalOptionsDemo };

package/src/demo/components/ui/tabs/Tabs.tsx

@@ -0,0 +1,15 @@
+import React, { useState } from "react";
+import { Header } from "../../../../components/layout/header/Header";
+import { Selector } from "../../../../components/ui/tabs/Selector";
+
+interface Props {}
+
+const values = ["Recent", "Categories", "Whole Disk"];
+
+const TabsDemo: React.FC<Props> = () => {
+    const [current, handleCurrent] = useState("Recent");
+
+    return <Header><Selector values={values} value={current} onChange={handleCurrent} /></Header>;
+};
+
+export { TabsDemo };

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

@@ -0,0 +1,28 @@
+import React, { useCallback, useState } from "react";
+import { useToaster } from "../../../../components/ui/toaster/Toaster";
+import { Button } from "../../../../components/ui/button/Button";
+import { Input } from "../../../../components/form/Input";
+
+interface Props {}
+
+const ToasterDemo: React.FC<Props> = (props) => {
+    const toast = useToaster();
+    const [text, setText] = useState("");
+
+    const handleToast = useCallback(() => {
+        toast(text || "Lorem ipsum dolor sit amet");
+    }, [text]);
+
+    const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        setText(e.target.value);
+    }, []);
+
+    return (
+        <div>
+            <Input onChange={handleChange} value={text} placeholder={"Fill in text to display"} />
+            <Button onClick={handleToast}>Show toast</Button>
+        </div>
+    );
+};
+
+export { ToasterDemo };

package/src/demo/componentsMap.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import type { AnyComponent } from "../types";
 import { CheckboxDemo } from "./components/form/Checkbox";
 import {
@@ -33,6 +34,12 @@ import { InputDemo } from "./components/form/Input";
 import { FormDemo } from "./components/form/Form";
 import { SearchDemo } from "./components/form/Search";
 import { LabelDemo } from "./components/form/Label";
+import { ToasterDemo } from "./components/ui/toaster/Toaster";
+import { ModalCenteredDemo, ModalDemo, ModalOptionsDemo } from "./components/ui/modal/Modal";
+import { ListInsetDemo } from "./components/layout/list/Inset";
+import { ListSelectionDemo } from "./components/layout/list/Selection";
+import { TabsDemo } from "./components/ui/tabs/Tabs";
+import { ChoiceDemo } from "./components/form/Choice";
 
 interface TheMap {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -74,6 +81,10 @@ const componentsMap: TheMap = {
                 name: "Toggle",
                 Component: ToggleDemo,
             },
+            Choice: {
+                name: "Choice",
+                Component: ChoiceDemo,
+            },
         },
     },
     Header: {
@@ -148,6 +159,10 @@ const componentsMap: TheMap = {
             },
         },
     },
+    Tabs: {
+        name: "Tabs",
+        Component: TabsDemo,
+    },
     ListItem: {
         name: "List & Item",
         Component: ListItemDemo,
@@ -160,6 +175,14 @@ const componentsMap: TheMap = {
                 name: "Header",
                 Component: ListHeaderDemo,
             },
+            Inset: {
+                name: "Inset",
+                Component: ListInsetDemo,
+            },
+            Selection: {
+                name: "Selection",
+                Component: ListSelectionDemo,
+            },
             Label: {
                 name: "Label",
                 Component: ItemLabelDemo,
@@ -186,6 +209,24 @@ const componentsMap: TheMap = {
         name: "Icons",
         Component: IconsDemo,
     },
+    Toaster: {
+        name: "Toaster",
+        Component: ToasterDemo,
+    },
+    Modal: {
+        name: "Modal",
+        Component: ModalDemo,
+        children: {
+            Centered: {
+                name: "Centered & smaller",
+                Component: ModalCenteredDemo,
+            },
+            WithOptions: {
+                name: "With options to pick",
+                Component: ModalOptionsDemo,
+            },
+        },
+    },
 };
 
 export {

package/src/global.scss

@@ -28,6 +28,18 @@
 
     --toolbar-border: #ababab;
     --toolbar-bg: #f8f8f8;
+    --modal-bg: #f7f7f7;
+    --modal-button-bg: #f8f8f8;
+    --modal-button-border: #c2c2c2;
+
+    --choice-bg: #ffffff;
+    --choice-text: #999999;
+    --choice-active-bg: #f3f3f3;
+    --choice-active-text: #313131;
+    --choice-border: #cfcfcf;
+
+    --selector-text: #606060;
+    --selector-active: var(--main-color);
 
     // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
     --blue1: #038bf4;

package/src/index.ts

@@ -1,3 +1,4 @@
+export * from "./components/form/choice/Choice.js";
 export * from "./components/form/Checkbox.js";
 export * from "./components/form/Input.js";
 export * from "./components/form/Label.js";
@@ -19,3 +20,7 @@ export * from "./components/ui/action/Action.js";
 export * from "./components/ui/action/EqualActions.js";
 export * from "./components/ui/button/Button.js";
 export * from "./components/ui/directionPad/Pad.js";
+export * from "./components/ui/modal/Modal.js";
+export * from "./components/ui/modal/ModalButtons.js";
+export * from "./components/ui/tabs/Selector.js";
+export * from "./components/ui/toaster/Toaster.js";

package/src/types/form.ts

@@ -0,0 +1,7 @@
+interface ObjectValue { value: string; label: string }
+type Value = string | ObjectValue;
+
+export type {
+    ObjectValue,
+    Value,
+};

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./makeVariants";
+export * from "./toObjectValue";

package/src/utils/toObjectValue.ts

@@ -0,0 +1,9 @@
+import type { ObjectValue, Value } from "../types/form";
+
+const toObjectValue = (s: Value): ObjectValue => {
+    return typeof s === "string" ? { value: s, label: s } : s;
+};
+
+export {
+    toObjectValue,
+};