react-miui 0.0.3 → 0.4.0

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

@@ -2,7 +2,7 @@
     list-style-type: none;
     margin: 0;
     padding: 0;
-    font-size: 15px;
+    font-size: calc(34px / var(--ratio-font));
 
     &:not(:first-child) > * {
         border-top: 0.37px solid var(--header-border);
@@ -10,7 +10,7 @@
 
     > * {
         display: block;
-        padding: 20px 0;
+        padding: 0;
         text-decoration: none;
     }
 }
@@ -20,4 +20,12 @@
     background: none;
     width: 100%;
     text-align: left;
+    font-family: inherit;
+    font-size: inherit;
+}
+
+.content {
+    display: flex;
+    min-height: calc(174px / var(--ratio-dimensions));
+    align-items: center;
 }

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

@@ -2,6 +2,7 @@ import React from "react";
 import classnames from "classnames";
 
 import styles from "./Item.module.scss";
+import { Value } from "./Value";
 
 interface LinkProps {
     href: string;
@@ -13,38 +14,55 @@ interface Props {
     onClick?: () => void;
     className?: string;
     Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
+    ratio?: string; // @TODO number/number/number/.. type?
 }
 
+// eslint-disable-next-line max-statements
 const Item: React.FC<Props> = (props) => {
-    const { className, children, href, to, onClick, Link, ...restProps } = props;
+    const { className, children, href, to, onClick, Link, ratio, ...restProps } = props;
     const cls = classnames(styles.item, className);
 
     const liProps = {
         className: cls,
     };
 
+    const r = ratio ? ratio.split("/") : [];
+
+    const ren = React.Children.map(props.children, (child, index) => {
+        let flex = undefined;
+        if (!r.length && child && typeof child === "object" && "type" in child && child.type === Value) {
+            return child;
+        }
+        if (index in r) {
+            flex = r[index];
+        }
+        return <div style={{ flex }}>{child}</div>;
+    });
+
     if (to) {
         if (!Link) {
             throw new TypeError("`to` prop given without `Link` component");
         }
 
-        return <li {...liProps}><Link href={to} {...restProps}>{children}</Link></li>;
+        return <li {...liProps}><Link href={to} {...restProps}><a className={styles.content}>{ren}</a></Link></li>;
     }
     if (href) {
         const aProps: typeof restProps & { onClick?: Props["onClick"]} = { ...restProps };
         if (onClick) {
             aProps.onClick = onClick;
         }
-        return <li {...liProps}><a href={href} {...aProps}>{children}</a></li>;
+        return <li {...liProps}><a href={href} {...aProps} className={styles.content}>{ren}</a></li>;
     }
     if (onClick) {
         return (
             <li {...liProps}>
-                <button className={styles.button} onClick={props.onClick} {...restProps}>{children}</button>
+                <button className={classnames(styles.button, styles.content)} onClick={props.onClick}{...restProps}>
+                    {ren}
+                </button>
             </li>
         );
     }
-    return <li {...liProps}><div {...restProps}>{children}</div></li>;
+    return <li {...liProps}><div {...restProps} className={styles.content}>{ren}</div></li>;
 };
 
 export { Item };

package/src/components/layout/list/Label.module.scss

@@ -0,0 +1,9 @@
+.sub {
+    font-size: calc(27px / var(--ratio-font));
+    color: var(--sub);
+    margin-top: calc(27px / var(--ratio-font) / 3);
+}
+
+.root {
+    padding: calc(54px / var(--ratio-dimensions)) 0;
+}

package/src/components/layout/list/Label.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import styles from "./Label.module.scss";
+
+interface Props {
+    sub?: ReactNode;
+}
+
+const Label: React.FC<Props> = (props) => {
+    const sub = props.sub ? <div className={styles.sub}>{props.sub}</div> : null;
+
+    return (
+        <div className={styles.root}>
+            <div>{props.children}</div>
+            {sub}
+        </div>
+    );
+};
+
+export { Label };

package/src/components/layout/list/Value.module.scss

@@ -0,0 +1,7 @@
+.value {
+    color: var(--icon);
+    font-size: calc(26px / var(--ratio-font));
+    display: flex;
+    justify-content: flex-end;
+    flex: 1;
+}

package/src/components/layout/list/Value.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+import styles from "./Value.module.scss";
+
+const Value: React.FC = (props) => {
+    return (
+        <div className={styles.value}>{props.children}</div>
+    );
+};
+
+export { Value };

package/src/components/ui/action/Action.module.scss

@@ -0,0 +1,26 @@
+.action {
+    height: calc(102px / var(--ratio-dimensions));
+    width: calc(102px / var(--ratio-dimensions));
+    border-radius: 100px;
+    border: calc(1px / var(--ratio-border)) solid var(--button-border);
+    background: white;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.a {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.button {
+    border: none;
+    padding: 0;
+    background: none;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(18px / var(--ratio-dimensions));
+}

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

@@ -0,0 +1,58 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import type { ICON } from "../../icons/Icon";
+import { Icon } from "../../icons/Icon";
+import styles from "./Action.module.scss";
+
+interface LinkProps { // @TODO extract? - same on list item
+    href: string;
+}
+
+interface Props {
+    href?: string;
+    to?: string;
+    onClick?: () => void;
+    icon?: ICON | Exclude<ReactNode, string>;
+    Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
+    label?: ReactNode;
+    // if className ever goes here make sure that `a` gets classnames merged
+}
+
+const Action: React.VFC<Props> = (props) => {
+    const { icon, label, href, to, Link, ...restProps } = props;
+
+    let iconElem: ReactNode = icon;
+    if (typeof icon === "string") {
+        iconElem = <Icon name={icon as ICON} />;
+    }
+
+    const labelElem = label ? <div className={styles.label}>{label}</div> : null;
+
+    const content = (
+        <>
+            <div className={styles.action}>{iconElem}</div>
+            {labelElem}
+        </>
+    );
+
+    if (to) {
+        if (!Link) {
+            throw new TypeError("`to` prop given without `Link` component");
+        }
+
+        return <Link href={to} {...restProps}><a className={styles.a}>{content}</a></Link>;
+    }
+
+    if (href) {
+        return <a href={href} className={styles.a} {...restProps}>{content}</a>;
+    }
+
+    return (
+        <button onClick={props.onClick} className={styles.button}>
+            {content}
+        </button>
+    );
+};
+
+export { Action };

package/src/components/ui/action/EqualActions.module.scss

@@ -0,0 +1,6 @@
+.actions {
+    --actions-count: 1;
+    display: inline-grid;
+    grid-template-columns: repeat(var(--actions-count), 1fr);
+    gap: calc(56px / var(--ratio-dimensions));
+}

package/src/components/ui/action/EqualActions.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Action } from "./Action";
+
+import styles from "./EqualActions.module.scss";
+import classnames from "classnames";
+
+interface Props {
+    className?: string;
+}
+
+const EqualActions: React.FC<Props> = (props) => {
+    React.Children.forEach(props.children, (child) => {
+        if (!child || typeof child !== "object" || !("type" in child) || child.type !== Action) {
+            throw new TypeError("Every child of EqualActions must be an Action component");
+        }
+    });
+
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const style = {
+        "--actions-count": React.Children.count(props.children),
+    } as React.CSSProperties;
+
+    return (
+        <div className={classnames(styles.actions, props.className)} style={style}>
+            {props.children}
+        </div>
+    );
+};
+
+export { EqualActions };

package/src/components/ui/button/Button.module.scss

@@ -0,0 +1,25 @@
+.btn {
+    height: calc(118px / var(--ratio-dimensions));
+    background: var(--green1);
+    border: calc(1px / var(--ratio-border)) solid var(--green1-darker);
+    color: white;
+    border-radius: 1000px;
+    display: block;
+    width: 100%;
+    font-size: calc(26px / var(--ratio-font));
+    padding: 0 1em;
+
+    &:disabled {
+        opacity: 0.5;
+    }
+}
+
+.btn--inline {
+    width: auto;
+}
+
+.btn--outline {
+    background: white;
+    border-color: var(--button-border);
+    color: var(--grey1);
+}

package/src/components/ui/button/Button.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import styles from "./Button.module.scss";
+import classnames from "classnames";
+import { makeVariants } from "../../../demo/utils/makeVariants";
+
+interface Props {
+    disabled?: boolean;
+    variant?: "inline" | "outline";
+}
+
+const Button: React.FC<Props> = (props) => {
+    const variants = makeVariants(props.variant);
+
+    const cls = classnames(styles.btn, {
+        [styles["btn--inline"]]: variants.includes("inline"),
+        [styles["btn--outline"]]: variants.includes("outline"),
+    });
+
+    return (
+        <button className={cls} disabled={props.disabled}>{props.children}</button>
+    );
+};
+
+export { Button };

package/src/demo/Main.tsx

@@ -1,14 +1,15 @@
 import React, { useCallback, useState } from "react";
 import classnames from "classnames";
 
+import type { AnyComponent } from "../types";
+import type { TheMap, TheMapItem } from "./componentsMap";
+
 import styles from "./Main.module.scss";
 
 import { safeUseHash } from "./utils/safeUseHash";
-import type { TheMap, TheMapItem } from "./componentsMap";
 import { componentsMap } from "./componentsMap";
 
 type BG = "white" | "transparent" | "mobile";
-type AnyComponent = React.ComponentClass | React.FC;
 
 interface ComponentInfo {
     Component: AnyComponent;

package/src/demo/Menu.module.scss

@@ -35,5 +35,7 @@
         &:hover {
             background: var(--active-bg);
         }
+
+        --focus-bg-set: var(--focus-color);
     }
 }

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

@@ -0,0 +1,49 @@
+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";
+
+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 ratio={"1/"}>
+                <span>Off</span>
+                <Toggle onChange={handleNoop} state={false} />
+            </Item>
+            <Item ratio={"1/"}>
+                <span>On</span>
+                <Toggle onChange={handleNoop} state={true} />
+            </Item>
+            <Item ratio={"1/"}>
+                <span>Undetermined</span>
+                <Toggle onChange={handleNoop} state={null} />
+            </Item>
+            <Item ratio={"1/"}>
+                <span>Dynamic</span>
+                <Toggle onChange={handleToggle} state={state} />
+            </Item>
+        </List>
+    );
+};
+
+export { ToggleDemo };

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

@@ -1,6 +1,8 @@
 import React from "react";
+import Link from "next/link";
 
-import { Header } from "../../../../index.js";
+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
@@ -14,4 +16,104 @@ const HeaderDemo = () => {
     );
 };
 
-export { HeaderDemo };
+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/list/Header.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 ListHeaderDemo = () => {
+    return (
+        <List>
+            <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>Advanced</Header>
+            <Item>Item</Item>
+            <Item>Another item</Item>
+            <Item>One more</Item>
+        </List>
+    );
+};
+
+export { ListHeaderDemo };

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { List } from "../../../../components/layout/list/List";
+import { Item } from "../../../../components/layout/list/Item";
+import { ICON, Icon } from "../../../../components/icons/Icon";
+
+const ItemRatioDemo = () => {
+    return (
+        <List>
+            <Item ratio={"1/"}>
+                <span>Label</span>
+                <>Value</>
+            </Item>
+            <Item ratio={"1/"}>
+                <span>Label</span>
+                <Icon name={ICON.forward} />
+            </Item>
+        </List>
+    );
+};
+
+export { ItemRatioDemo };

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { List } from "../../../../components/layout/list/List";
+import { Item } from "../../../../components/layout/list/Item";
+import { Label } from "../../../../components/layout/list/Label";
+
+const ItemLabelDemo = () => {
+    return (
+        <List>
+            <Item>
+                <Label sub={"Here is a little text explaining things. Don't go too long, but make it non-ambiguous."}>
+                    Transmit power
+                </Label>
+            </Item>
+            <Item ratio={"6/4/"}>
+                <Label sub={"Here is a little text explaining things. Don't go too long, but make it non-ambiguous."}>
+                    Transmit power
+                </Label>
+                <></>
+                <>Value</>
+            </Item>
+            <Item>
+                <Label sub={"Just one sentence."}>
+                    Complicated name
+                </Label>
+            </Item>
+        </List>
+    );
+};
+
+export { ItemLabelDemo };

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

@@ -1,3 +1,7 @@
 .custom {
     border-left: 3px solid green;
 }
+
+.item {
+    display: flex;
+}

package/src/demo/components/layout/list/Value.module.scss

@@ -0,0 +1,4 @@
+.icon {
+    color: var(--toolbar-border);
+    margin-left: calc(40px / var(--ratio-dimensions));
+}

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { List } from "../../../../components/layout/list/List";
+import { Item } from "../../../../components/layout/list/Item";
+import { Value } from "../../../../components/layout/list/Value";
+import { Label } from "../../../../components/layout/list/Label";
+import { ICON, Icon } from "../../../../components/icons/Icon";
+
+import styles from "./Value.module.scss";
+
+const ValueDemo = () => {
+    return (
+        <List>
+            <Item>
+                <Label>Name</Label>
+                <Value>Jack The 23rd</Value>
+            </Item>
+            <Item>
+                <Label>Start at</Label>
+                <Value>18:00</Value>
+                <Icon name={ICON.forward} className={styles.icon} />
+            </Item>
+        </List>
+    );
+};
+
+export { ValueDemo };