react-miui 0.0.1 → 0.3.0

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

@@ -1,10 +1,14 @@
-import React, { useState } from "react";
-import { Checkbox } from "../../../components/form/Checkbox";
+import React, { useCallback, useState } from "react";
+
+import { Checkbox } from "../../../index.js";
 
 const CheckboxDemo: React.FC = (props) => {
     const [v, setV] = useState(false);
+
+    const handleToggle = useCallback(() => { setV((prevV) => !prevV); }, []);
+
     return (
-        <Checkbox name={"a"} onChange={() => { setV(!v); }} checked={v}>I want something something</Checkbox>
+        <Checkbox name={"a"} onChange={handleToggle} checked={v}>I want something something</Checkbox>
     );
 };
 

package/src/demo/components/form/Toggle.module.scss

@@ -0,0 +1,5 @@
+.row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}

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

@@ -0,0 +1,59 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Toggle } from "../../../components/form/Toggle";
+import { List } from "../../../components/layout/list/List";
+import { Item } from "../../../components/layout/list/Item";
+
+import styles from "./Toggle.module.scss";
+
+const handleNoop = () => undefined;
+
+const ToggleDemo: React.VFC = () => {
+    const [state, ss] = useState<boolean | null>(null);
+
+    useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        setTimeout(() => { ss(true); }, 1000);
+    }, []);
+
+    const handleToggle = useCallback(() => {
+        if (state == null) {
+            return; // shouldn't happen, but ...
+        }
+        ss(null);
+        setTimeout(() => {
+            ss(!state);
+            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        }, 1000);
+    }, [state]);
+
+    return (
+        <List>
+            <Item>
+                <div className={styles.row}>
+                    <span>Off</span>
+                    <Toggle onChange={handleNoop} state={false} />
+                </div>
+            </Item>
+            <Item>
+                <div className={styles.row}>
+                    <span>On</span>
+                    <Toggle onChange={handleNoop} state={true} />
+                </div>
+            </Item>
+            <Item>
+                <div className={styles.row}>
+                    <span>Undetermined</span>
+                    <Toggle onChange={handleNoop} state={null} />
+                </div>
+            </Item>
+            <Item>
+                <div className={styles.row}>
+                    <span>Dynamic</span>
+                    <Toggle onChange={handleToggle} state={state} />
+                </div>
+            </Item>
+        </List>
+    );
+};
+
+export { ToggleDemo };

package/src/demo/components/layout/header/Header.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import Link from "next/link";
+
+import { Header, ICON, StickyHeader } from "../../../../index.js";
+import { HeaderIconAction } from "../../../../components/layout/header/HeaderIconAction";
+
+const HeaderDemo = () => {
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers,react/no-array-index-key
+    const longContent = new Array(1000).fill(null).map((_, key) => <div key={key}>content</div>);
+
+    return (
+        <>
+            <Header>Some place</Header>
+            {longContent}
+        </>
+    );
+};
+
+const CenteredHeaderDemo = () => {
+    return (
+        <>
+            <Header center={true}>Messages</Header>
+            <div>
+                Header text is centered
+            </div>
+        </>
+    );
+};
+
+const ToolbarVariantDemo = () => {
+    return (
+        <>
+            <Header center={true} variant={"toolbar"}>Toolbar version</Header>
+        </>
+    );
+};
+
+const handleClick = () => { alert(1); };
+
+// eslint-disable-next-line max-lines-per-function
+const HeaderWithButtonsDemo = () => {
+    const demo = (
+        <>
+            <HeaderIconAction icon={ICON.back} onClick={handleClick} />
+            <HeaderIconAction icon={ICON.checkmark} onClick={handleClick} />
+        </>
+    );
+
+    return (
+        <>
+            <Header center={true} before={"A text"}>Messages</Header>
+            <div>
+                Header text is centered
+            </div>
+            <Header before={"A text"}>Messages</Header>
+            <div>
+                Header text is start aligned
+            </div>
+            <Header before={demo}>Messages</Header>
+            <div>
+                Some button icons are added on the left to left aligned title
+            </div>
+            <Header before={demo} center={true}>Messages</Header>
+            <div>
+                Some button icons are added on the left to centered aligned title
+            </div>
+            <Header
+                before={<HeaderIconAction icon={ICON.back} to={"/react-miui"} Link={Link} />}
+                center={true}
+            >Messages
+            </Header>
+            <div>
+                Some internal link icons are added on the left to centered aligned title
+            </div>
+            <Header
+                before={<HeaderIconAction icon={ICON.back} href={"https://www.npmjs.com/package/react-miui"} />}
+                center={true}
+            >Messages
+            </Header>
+            <div>
+                Some external link icons are added on the left to centered aligned title
+            </div>
+            <Header
+                before={<HeaderIconAction icon={ICON.back} href={"https://www.npmjs.com/package/react-miui"} />}
+                after={<HeaderIconAction icon={ICON.checkmark} href={"https://www.npmjs.com/package/react-miui"} />}
+                center={true}
+            >Messages
+            </Header>
+            <div>
+                Some external link icons are added on both sides to centered aligned title
+            </div>
+        </>
+    );
+};
+
+const HeaderWithButtonsOnSideDemo = () => {
+    const demo = (
+        <>
+            <HeaderIconAction icon={ICON.back} onClick={handleClick} />
+            <HeaderIconAction icon={ICON.checkmark} onClick={handleClick} />
+        </>
+    );
+
+    return (
+        <StickyHeader position={"left"}>
+            <Header
+                center={true}
+                before={demo}
+                after={demo}
+            >M
+            </Header>
+            <StickyHeader.Content>
+                Header is on the side
+            </StickyHeader.Content>
+        </StickyHeader>
+    );
+};
+
+export { HeaderDemo, CenteredHeaderDemo, ToolbarVariantDemo, HeaderWithButtonsDemo, HeaderWithButtonsOnSideDemo };

package/src/demo/components/layout/header/StickyHeader.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+
+import { Header, StickyHeader } from "../../../../index.js";
+
+const LongContent: React.FC = () => {
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers,react/no-array-index-key
+    const longContent = new Array(1000).fill(null).map((_, key) => <div key={key}>content</div>);
+    return <>{longContent}</>;
+};
+
+const StickyHeaderDemo = () => {
+    return (
+        <StickyHeader>
+            <Header>Some place</Header>
+            <StickyHeader.Content>
+                <LongContent />
+            </StickyHeader.Content>
+        </StickyHeader>
+    );
+};
+
+const StickyHeaderBottomDemo = () => {
+    return (
+        <StickyHeader position={"bottom"}>
+            <Header>Some place</Header>
+            <StickyHeader.Content>
+                <LongContent />
+            </StickyHeader.Content>
+        </StickyHeader>
+    );
+};
+
+const StickyHeaderTopBottomDemo = () => {
+    return (
+        <StickyHeader position={"top"}>
+            <Header>Some place</Header>
+            <StickyHeader.Content>
+                <StickyHeader position={"bottom"}>
+                    <Header>Some place</Header>
+                    <StickyHeader.Content>
+                        <LongContent />
+                    </StickyHeader.Content>
+                </StickyHeader>
+            </StickyHeader.Content>
+        </StickyHeader>
+    );
+};
+
+const StickyHeaderLeftDemo = () => {
+    return (
+        <StickyHeader position={"left"}>
+            <Header>x<br />x<br />x</Header>
+            <StickyHeader.Content>
+                <LongContent />
+            </StickyHeader.Content>
+        </StickyHeader>
+    );
+};
+
+const StickyHeaderRightDemo = () => {
+    return (
+        <StickyHeader position={"right"}>
+            <Header>x<br />x<br />x</Header>
+            <StickyHeader.Content>
+                <LongContent />
+            </StickyHeader.Content>
+        </StickyHeader>
+    );
+};
+
+const StickyHeaderLeftCenterDemo = () => {
+    return (
+        <StickyHeader position={"left"}>
+            <Header center={true}>x<br />x<br />x</Header>
+            <StickyHeader.Content>
+                <LongContent />
+            </StickyHeader.Content>
+        </StickyHeader>
+    );
+};
+
+export {
+    StickyHeaderDemo, StickyHeaderBottomDemo, StickyHeaderTopBottomDemo, StickyHeaderLeftDemo, StickyHeaderRightDemo,
+    StickyHeaderLeftCenterDemo,
+};

package/src/demo/components/layout/list/List.Item.module.scss

@@ -0,0 +1,3 @@
+.custom {
+    border-left: 3px solid green;
+}

package/src/demo/components/layout/list/List.Item.tsx

@@ -0,0 +1,23 @@
+import React, { useCallback } from "react";
+import Link from "next/link";
+
+import { Item, List } from "../../../../index.js";
+import styles from "./List.Item.module.scss";
+
+const ListItemDemo = () => {
+    const handleClick = useCallback(() => { window.alert("Clicked"); }, []);
+
+    return (
+        <List>
+            <Item>I am an item</Item>
+            <Item>I am an item</Item>
+            <Item href={"https://www.npmjs.com/package/react-miui"}>I am clickable item</Item>
+            <Item to={"/react-miui"} Link={Link}>I am local link item</Item>
+            <Item onClick={handleClick}>Click me to see my action</Item>
+            <Item className={styles.custom}>I'm a custom item</Item>
+            <Item>I am an item</Item>
+        </List>
+    );
+};
+
+export { ListItemDemo };

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

@@ -0,0 +1,112 @@
+import React from "react";
+import Link from "next/link";
+import { Action } from "../../../../components/ui/action/Action";
+import { ICON } from "../../../../components/icons/Icon";
+import { StickyHeader } from "../../../../components/layout/header/StickyHeader";
+import { Header } from "../../../../components/layout/header/Header";
+
+import styles from "./ActionDemo.module.scss";
+import { EqualActions } from "../../../../components/ui/action/EqualActions";
+
+const handleClick = () => { alert(1); };
+
+const ActionDemo: React.FC = () => {
+    return (
+        <>
+            <div>
+                <Action icon={ICON.checkmark} /> - action without action
+            </div>
+            <div>
+                <Action icon={ICON.checkmark} Link={Link} 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}>
+                <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}>
+                <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}>
+                <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}>
+                        <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

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

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { Button } from "../../../../index.js";
+
+const ButtonDemo = () => {
+    return (
+        <div>
+            <Button>Basic button</Button>
+            <br />
+            <Button disabled={true}>Disabled button</Button>
+            <br />
+            <Button variant={"inline"}>Inline button</Button>
+            <br />
+            <Button variant={"outline"}>Outline button</Button>
+        </div>
+    );
+};
+
+export { ButtonDemo };

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

@@ -0,0 +1,40 @@
+import React, { useCallback, useState } from "react";
+import { DirectionPad } from "../../../..";
+
+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/icons/Icons.module.scss

@@ -0,0 +1,4 @@
+.row {
+    display: flex;
+    justify-content: space-between;
+}

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { Icon, ICON, Item, List } from "../../../../index.js";
+
+import styles from "./Icons.module.scss";
+
+const IconsDemo: React.FC = () => {
+    const icons = Object.values(ICON).map((value) => {
+        return (
+            <Item key={value}>
+                <div className={styles.row}>
+                    {value}
+                    <Icon name={value} />
+                </div>
+            </Item>
+        );
+    });
+
+    return (
+        <List>
+            {icons}
+        </List>
+    );
+};
+
+export { IconsDemo };

package/src/demo/componentsMap.ts

@@ -0,0 +1,144 @@
+import type { AnyComponent } from "../types";
+import { CheckboxDemo } from "./components/form/Checkbox";
+import {
+    CenteredHeaderDemo,
+    HeaderDemo,
+    HeaderWithButtonsDemo,
+    HeaderWithButtonsOnSideDemo, ToolbarVariantDemo,
+} from "./components/layout/header/Header";
+import {
+    StickyHeaderBottomDemo,
+    StickyHeaderDemo, StickyHeaderLeftCenterDemo, StickyHeaderLeftDemo, StickyHeaderRightDemo,
+    StickyHeaderTopBottomDemo,
+} from "./components/layout/header/StickyHeader";
+import { ListItemDemo } from "./components/layout/list/List.Item";
+import { DirectionPadDemo } from "./components/ui/directionPad/Pad";
+import { IconsDemo } from "./components/ui/icons/Icons";
+import { ButtonDemo } from "./components/ui/button/ButtonDemo";
+import {
+    ActionDemo,
+    ActionLabelsOnBottom,
+    ActionsDemo,
+    ActionsOnBottom,
+    ActionsOnLeft,
+} from "./components/ui/action/Action";
+import { ToggleDemo } from "./components/form/Toggle";
+
+interface TheMap {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    [key: string]: TheMapItem;
+}
+
+interface TheMapItem {
+    name: string;
+    Component: AnyComponent;
+    children?: TheMap;
+}
+
+const componentsMap: TheMap = {
+    Button: {
+        name: "Button",
+        Component: ButtonDemo,
+    },
+    Checkbox: {
+        name: "Checkbox",
+        Component: CheckboxDemo,
+    },
+    Toggle: {
+        name: "Toggle",
+        Component: ToggleDemo,
+    },
+    Header: {
+        name: "Header",
+        Component: HeaderDemo,
+        children: {
+            Centered: {
+                name: "Centered",
+                Component: CenteredHeaderDemo,
+            },
+            Toolbar: {
+                name: "Toolbar",
+                Component: ToolbarVariantDemo,
+            },
+            WithButtons: {
+                name: "With buttons",
+                Component: HeaderWithButtonsDemo,
+                children: {
+                    OnLeft: {
+                        name: "On the side",
+                        Component: HeaderWithButtonsOnSideDemo,
+                    },
+                },
+            },
+            Sticky: {
+                name: "Sticky",
+                Component: StickyHeaderDemo,
+                children: {
+                    StickyBottom: {
+                        name: "On bottom",
+                        Component: StickyHeaderBottomDemo,
+                    },
+                    StickyTopBottom: {
+                        name: "On top & bottom",
+                        Component: StickyHeaderTopBottomDemo,
+                    },
+                    StickyLeft: {
+                        name: "On left",
+                        Component: StickyHeaderLeftDemo,
+                    },
+                    StickyRight: {
+                        name: "On right",
+                        Component: StickyHeaderRightDemo,
+                    },
+                    StickyLeftCentered: {
+                        name: "On left centered",
+                        Component: StickyHeaderLeftCenterDemo,
+                    },
+                },
+            },
+        },
+    },
+    Action: {
+        name: "Action",
+        Component: ActionDemo,
+        children: {
+            ActionOnBottom: {
+                name: "Actions on header",
+                Component: ActionsOnBottom,
+            },
+            ActionLabelsOnBottom: {
+                name: "Actions with labels on header",
+                Component: ActionLabelsOnBottom,
+            },
+            ActionOnLeft: {
+                name: "Actions on left header",
+                Component: ActionsOnLeft,
+            },
+            EqualActions: {
+                name: "EqualActions (wrapper)",
+                Component: ActionsDemo,
+            },
+        },
+    },
+    ListItem: {
+        name: "List & Item",
+        Component: ListItemDemo,
+    },
+    Pad: {
+        name: "Direction pad",
+        Component: DirectionPadDemo,
+    },
+    Icons: {
+        name: "Icons",
+        Component: IconsDemo,
+    },
+};
+
+export {
+    componentsMap,
+};
+
+export type {
+    TheMap,
+    TheMapItem,
+};

package/src/demo/utils/makeVariants.ts

@@ -0,0 +1,13 @@
+const makeVariants = <T extends string>(variants: T | T[] | undefined): T[] => {
+    if (!variants) {
+        return [];
+    }
+    if (typeof variants === "string") {
+        return variants.split(" ").filter(Boolean) as T[];
+    }
+    return variants;
+};
+
+export {
+    makeVariants,
+};