react-miui 0.28.2 → 0.29.0

package/src/demo/Main.module.scss

@@ -1,38 +0,0 @@
-.container {
-    flex: 1;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
-.header {
-    margin: 0;
-    padding: 20px 20px 0;
-}
-
-.component {
-    padding: 20px;
-    flex: 1;
-    overflow: auto;
-    display: flex;
-    flex-direction: column;
-    margin-top: 20px;
-
-    &--transparent {
-        background-position: 0px 0px, 10px 10px;
-        background-size: 20px 20px;
-        background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
-    }
-
-    &--mobile {
-        border-radius: 20px;
-        max-width: 400px;
-        width: 100%;
-        padding: 0;
-        margin: 20px 0;
-        align-self: center;
-        border: 10px solid black;
-        border-top-width: 30px;
-        position: relative;
-    }
-}

package/src/demo/Main.tsx

@@ -1,84 +0,0 @@
-import React, { useState } from "react";
-
-import classnames from "classnames";
-
-import type { AnyComponent } from "../types";
-import type { TheMap, TheMapItem } from "./componentsMap";
-
-import { Choice } from "../components/form/choice/Choice";
-
-import { safeUseHash } from "./utils/safeUseHash";
-import { componentsMap } from "./componentsMap";
-
-import styles from "./Main.module.scss";
-
-type BG = "white" | "transparent" | "mobile";
-
-interface ComponentInfo {
-    Component: AnyComponent<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
-    name: string;
-}
-
-const getComponentByHash = (hash: string): ComponentInfo | null => {
-    const parts = hash.split("/");
-    let obj: TheMap | undefined = componentsMap,
-        objItem: TheMapItem | undefined;
-
-    while (parts.length) {
-        const first = parts.shift()!;
-        objItem = obj?.[first];
-
-        if (!objItem) {
-            return null;
-        }
-        obj = objItem.children;
-    }
-
-    if (objItem?.Component) {
-        return {
-            name: objItem.name,
-            Component: objItem.Component,
-        };
-    }
-
-    return null;
-};
-
-const values: BG[] = ["white", "transparent", "mobile"];
-
-const Main: React.FC = (props) => {
-    const [bg, handleBgChange] = useState<string>("white");
-
-    const hash = safeUseHash();
-    const hashWithoutHash = hash.substr(1);
-    const info = getComponentByHash(hashWithoutHash);
-
-    if (!info) {
-        return (
-            <div className={styles.container}>
-                <h1 className={styles.header}>Hi there</h1>
-                This is poor man's StoryBook.
-            </div>
-        );
-    }
-
-    const Component = info.Component;
-
-    const componentCls = classnames(styles.component, {
-        [styles["component--transparent"] as string]: bg === "transparent",
-        [styles["component--mobile"] as string]: bg === "mobile",
-    });
-
-    return (
-        <div className={styles.container}>
-            <h1 className={styles.header}>{info.name}</h1>
-            <Choice values={values} value={bg} name={"x"} onChange={handleBgChange} />
-
-            <div className={componentCls}>
-                <Component />
-            </div>
-        </div>
-    );
-};
-
-export { Main };

package/src/demo/Menu.module.scss

@@ -1,42 +0,0 @@
-.menu {
-    margin: 0;
-    padding: 0;
-    border-right: 1px solid black;
-    overflow: auto;
-
-    ul {
-        margin: 0 0 0 15px;
-        padding: 0;
-    }
-
-    li {
-        padding: 0;
-        margin: 0;
-        list-style-type: none;
-    }
-
-    > ul {
-        margin: 0;
-        display: block;
-    }
-
-    > ul > li > a {
-        padding: 10px;
-        text-transform: uppercase;
-        font-size: 16px;
-    }
-
-    a {
-        padding: 5px 10px;
-        display: block;
-        color: black;
-        text-decoration: none;
-        font-size: 14px;
-
-        &:hover {
-            background: var(--active-bg);
-        }
-
-        --focus-bg-set: var(--focus-color);
-    }
-}

package/src/demo/Menu.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-
-import classnames from "classnames";
-
-import type { componentsMap } from "./componentsMap";
-
-import styles from "./Menu.module.scss";
-
-interface Props {
-    ancestors?: string[];
-    list: typeof componentsMap;
-}
-
-const Menu: React.FC<Props> = (props) => {
-    const cmp = Object.entries(props.list).map(([urlHash, component]) => {
-        const label = component.name;
-        const children = component.children
-            ? <Menu ancestors={[...props.ancestors!, urlHash]} list={component.children} />
-            : null;
-
-        return (
-            <li key={urlHash}>
-                <a href={"#" + [...props.ancestors!, urlHash].join("/")}>{label}</a>
-                {children}
-            </li>
-        );
-    });
-
-    const contents = <ul>{cmp}</ul>;
-
-    if (!props.ancestors!.length) {
-        cmp.unshift(<li key={"--main"}><a href={"#"}>Main</a></li>);
-        return <menu className={classnames(styles.menu, "miui-scrollbars")}>{contents}</menu>;
-    }
-
-    return contents;
-};
-
-Menu.defaultProps = {
-    ancestors: [],
-};
-
-export { Menu };

package/src/demo/NextLink.tsx

@@ -1,11 +0,0 @@
-import React from "react";
-
-import Link from "next/link";
-
-const NextLink: React.FC<Omit<React.ComponentProps<typeof Link>, "href"> & { href: string }> = (props) => {
-    return <Link legacyBehavior={true} {...props} />;
-};
-
-export {
-    NextLink,
-};

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

@@ -1,31 +0,0 @@
-import React from "react";
-
-import { Section, Input, Label, Button, TextArea } from "../../../index";
-
-// @TODO add checkbox
-// @TODO add toggle
-// @TODO some kind of `form` wrapper which also takes cares of margins?
-const FormDemo = () => {
-    return (
-        <Section.Container>
-            <Section>
-                <Section vertical={true} horizontal={true}>
-                    <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>
-        </Section.Container>
-    );
-};
-
-export { FormDemo };

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

@@ -1,33 +0,0 @@
-import React from "react";
-
-import { SearchContainer, Input, ICON, Icon, Section, List } from "../../../index";
-
-const Item = List.Item;
-
-const SearchDemo = () => {
-    return (
-        <Section.Container>
-            <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>
-        </Section.Container>
-    );
-};
-
-export { SearchDemo };

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

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

package/src/demo/components/layout/card/Card.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-
-import { Card, Section } from "../../../../index";
-
-const CardDemo = () => {
-    return (
-        <Section.Container>
-            <Card>
-                <Section vertical={true} horizontal={true}>Content</Section>
-            </Card>
-            <Card>
-                <Section vertical={true} horizontal={true}>Content</Section>
-            </Card>
-            <Card variant={"margin"}>
-                <Section vertical={true} horizontal={true}>Content</Section>
-            </Card>
-        </Section.Container>
-    );
-};
-
-export { CardDemo };

package/src/demo/components/ui/action/Action.tsx

@@ -1,109 +0,0 @@
-import React from "react";
-
-import { Action, ICON, StickyHeader, Header, EqualActions } from "../../../../index";
-import { NextLink } from "../../../NextLink";
-
-import styles from "./ActionDemo.module.scss";
-
-const handleClick = () => { alert(1); };
-
-const ActionDemo: React.FC = () => {
-    return (
-        <>
-            <div>
-                <Action icon={ICON.checkmark} /> - action without action
-            </div>
-            <div>
-                <Action icon={ICON.checkmark} Link={NextLink} to={"react-miui"} /> - internal link action
-            </div>
-            <div>
-                <Action icon={ICON.checkmark} href={"https://www.npmjs.com/package/react-miui"} /> - external link action
-            </div>
-            <div>
-                <Action icon={ICON.checkmark} onClick={handleClick} /> - onClick action
-            </div>
-            <div>
-                <Action icon={ICON.checkmark} onClick={handleClick} label={"Pineapple"} /> - onClick action with label
-            </div>
-        </>
-    );
-};
-
-const ActionsOnLeft = () => {
-    return (
-        <StickyHeader position={"left"}>
-            <Header center={true} className={styles.header as string}>
-                <Action icon={ICON.checkmark} />
-                <Action icon={ICON.checkmark} />
-                <Action icon={ICON.checkmark} />
-            </Header>
-            <StickyHeader.Content>
-                content
-            </StickyHeader.Content>
-        </StickyHeader>
-
-    );
-};
-
-const ActionsOnBottom = () => {
-    return (
-        <StickyHeader position={"bottom"}>
-            <Header center={true} className={styles.header as string}>
-                <Action icon={ICON.checkmark} />
-                <Action icon={ICON.checkmark} />
-                <Action icon={ICON.checkmark} />
-            </Header>
-            <StickyHeader.Content>
-                content
-            </StickyHeader.Content>
-        </StickyHeader>
-
-    );
-};
-
-const ActionLabelsOnBottom = () => {
-    return (
-        <StickyHeader position={"bottom"}>
-            <Header center={true} className={styles.header as string}>
-                <Action icon={ICON.checkmark} label={"Add"} />
-                <Action icon={ICON.checkmark} label={"Delete"} />
-                <Action icon={ICON.checkmark} label={"Share on Web"} />
-            </Header>
-            <StickyHeader.Content>
-                <StickyHeader position={"top"}>
-                    <Header center={true} className={styles.header as string}>
-                        <Action icon={ICON.checkmark} label={"Add"} />
-                        <Action icon={ICON.checkmark} label={"Delete"} />
-                        <Action icon={ICON.checkmark} label={"Share"} />
-                    </Header>
-                    <StickyHeader.Content>
-                        When you put just `Action`s into Header it will be automatically wrapped with EqualActions so if
-                        labels width are not equal each action will take the same space as the most wide item.
-                        If you don't like this behavior - wrap your actions into React.Fragment {"<></>"} or pass extra
-                        {"<span />"}.
-                    </StickyHeader.Content>
-                </StickyHeader>
-            </StickyHeader.Content>
-        </StickyHeader>
-    );
-};
-
-const ActionsDemo = () => {
-    return (
-        <div>
-            To make every action take the same amount of horizontal space you need to wrap every Action with
-            EqualActions wrapper. Some components (like Header) will do that automatically for you. If you need to use
-            Actions outside of such components - manually wrap them with EqualActions.
-
-            <div>
-                <EqualActions>
-                    <Action icon={ICON.checkmark} label={"Add"} />
-                    <Action icon={ICON.checkmark} label={"Delete"} />
-                    <Action icon={ICON.checkmark} label={"Share on Web"} />
-                </EqualActions>
-            </div>
-        </div>
-    );
-};
-
-export { ActionDemo, ActionsOnLeft, ActionsOnBottom, ActionLabelsOnBottom, ActionsDemo };

package/src/demo/components/ui/action/ActionDemo.module.scss

@@ -1,3 +0,0 @@
-.header {
-    gap: calc(56px / var(--ratio-dimensions));
-}

package/src/demo/components/ui/directionPad/Pad.tsx

@@ -1,41 +0,0 @@
-import React, { useCallback, useState } from "react";
-
-import { DirectionPad } from "../../../../index";
-
-const DirectionPadDemo: React.FC = (props) => {
-    const [lastClick, setLastClick] = useState("<none>");
-
-    const handleLeftClick = useCallback(() => {
-        setLastClick("left");
-    }, []);
-    const handleRightClick = useCallback(() => {
-        setLastClick("right");
-    }, []);
-    const handleUpClick = useCallback(() => {
-        setLastClick("up");
-    }, []);
-    const handleDownClick = useCallback(() => {
-        setLastClick("down");
-    }, []);
-    const handleMiddleClick = useCallback(() => {
-        setLastClick("res");
-    }, []);
-
-    return (
-        <>
-            <DirectionPad
-                onLeftPress={handleLeftClick}
-                onRightPress={handleRightClick}
-                onUpPress={handleUpClick}
-                onDownPress={handleDownClick}
-                onMiddlePress={handleMiddleClick}
-                middleLabel={"RES"}
-            />
-            <div>
-                Last clicked button: {lastClick}
-            </div>
-        </>
-    );
-};
-
-export { DirectionPadDemo };

package/src/demo/components/ui/drawer/Drawer.tsx

@@ -1,29 +0,0 @@
-import React, { useCallback, useState } from "react";
-
-import { Drawer } from "../../../../index";
-
-interface Props {}
-
-const DrawerDemo: React.FC<Props> = (props) => {
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    const [open, setOpen] = useState(false);
-
-    const handleToggleOpen = useCallback(() => {
-        setOpen(p => !p);
-    }, []);
-
-    const handleClose = useCallback(() => {
-        setOpen(false);
-    }, []);
-
-    return (
-        <>
-            <Drawer isOpen={open} onClose={handleClose}>
-                Drawer content
-            </Drawer>
-            <button onClick={handleToggleOpen}>open drawer</button>
-        </>
-    );
-};
-
-export { DrawerDemo };

package/src/demo/components/ui/icons/Icons.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-
-import { Icon, ICON, List } from "../../../../index";
-
-const Item = List.Item;
-
-const IconsDemo: React.FC = () => {
-    const icons = Object.values(ICON).map((value) => {
-        return (
-            <Item key={value} ratio={"1/"}>
-                {value}
-                <Icon name={value} />
-            </Item>
-        );
-    });
-
-    return (
-        <List>
-            {icons}
-        </List>
-    );
-};
-
-export { IconsDemo };

package/src/demo/components/ui/keyValue/KeyValue.tsx

@@ -1,49 +0,0 @@
-import React from "react";
-
-import { Icon, ICON, KeyValue, Section } from "../../../../index";
-
-interface Props {}
-
-const items = [
-    {
-        key: "Turbo",
-        value: "100x",
-    },
-    {
-        key: "Turbo",
-        value: "100x",
-        icon: <Icon name={ICON.heart} />,
-        onClick: () => { alert(1); },
-    },
-    {
-        value: "99%",
-        icon: <Icon name={ICON.battery} />,
-    },
-    {
-        key: "4,25 V",
-        value: "99%",
-        icon: <Icon name={ICON.battery} />,
-    },
-    {
-        key: "Just key",
-    },
-    {
-        value: "Just value",
-    },
-    {
-        key: <>Multi line<br />key</>,
-    },
-    {
-        value: <>Multi line<br />value</>,
-    },
-];
-
-const KeyValueDemo: React.FC<Props> = (props) => {
-    return (
-        <Section vertical={true} horizontal={true}>
-            <KeyValue items={items} valueFirst={true} cols={3} />
-        </Section>
-    );
-};
-
-export { KeyValueDemo };

package/src/demo/components/ui/stats/Stats.module.scss

@@ -1,29 +0,0 @@
-.coloredBox {
-    height: 300px;
-    background: var(--green1-darker);
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    color: white;
-    flex-direction: column;
-}
-
-.header {
-    --custom-header-color: var(--green1-darker);
-    --custom-text-color: white;
-}
-
-.header2 {
-    --custom-header-color: var(--active-bg);
-    --custom-text-color: white;
-}
-
-.coloredBox2 {
-    height: 300px;
-    background: var(--active-bg);
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    color: white;
-    flex-direction: column;
-}

package/src/demo/components/ui/stats/Stats.tsx

@@ -1,60 +0,0 @@
-import React from "react";
-
-import { Stats, Header, StickyHeader } from "../../../../index";
-
-import styles from "./Stats.module.scss";
-
-interface Props {}
-
-const stats = [
-    {
-        label: "Temperature",
-        value: "32°C",
-    },
-    {
-        label: "Used",
-        value: "320.3 mAh",
-    },
-    {
-        label: "Used for",
-        value: "14h 32m",
-    },
-];
-
-const StatsDemo: React.FC<Props> = (props) => {
-    return (
-        <StickyHeader position={"top"}>
-            <Header
-                center={true}
-                variant={"colored"}
-                className={styles.header as string}
-            >
-                Battery
-            </Header>
-            <StickyHeader.Content className={"miui-scrollbars"}>
-                <div className={styles.coloredBox}>
-                    <Stats stats={stats} />
-                </div>
-            </StickyHeader.Content>
-        </StickyHeader>
-    );
-};
-
-const StatsDarkDemo = () => (
-    <StickyHeader position={"top"}>
-        <Header
-            center={true}
-            variant={"colored"}
-            className={styles.header2 as string}
-        >
-            Battery
-        </Header>
-        <StickyHeader.Content className={"miui-scrollbars"}>
-            <div className={styles.coloredBox2}>
-                <Stats stats={stats} variant={"dark"} />
-            </div>
-        </StickyHeader.Content>
-    </StickyHeader>
-);
-
-export { StatsDemo, StatsDarkDemo };