react-miui 0.0.1 → 0.3.0

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

@@ -0,0 +1,54 @@
+import React from "react";
+import classnames from "classnames";
+
+import { Header } from "./Header.js";
+import styles from "./StickyHeader.module.scss";
+
+const err = new TypeError("StickyHeader needs two children - Header and StickyHeader.Content");
+
+interface Content {
+    Content: React.FC;
+}
+
+interface Props {
+    position?: "top" | "left" | "right" | "bottom";
+}
+
+const StickyHeader: React.FC<Props> & Content = (props) => {
+    const position = props.position || "top";
+
+    const children = React.Children.toArray(props.children);
+
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    if (children.length !== 2) {
+        throw err;
+    }
+
+    let header = children.find(c => typeof c === "object" && "type" in c && c.type === Header),
+        content = children.find(c => typeof c === "object" && "type" in c && c.type === StickyHeader.Content);
+
+    if (!header || !content) {
+        throw err;
+    }
+
+    header = header as never; // @TODO find a better way to silence TS on cloneElement
+    content = content as never;
+
+    const cls = classnames(styles.stickyHeader, styles[`stickyHeader--${position}`]);
+    const contentCls = classnames(styles.stickyHeader__content, styles[`stickyHeader__content--${position}`]);
+
+    return (
+        <div className={cls}>
+            {React.cloneElement(header, { position })}
+            <div className={contentCls}>
+                {content}
+            </div>
+        </div>
+    );
+};
+// eslint-disable-next-line react/no-multi-comp
+StickyHeader.Content = ({ children }) => {
+    return <>{children}</>;
+};
+
+export { StickyHeader };

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

@@ -0,0 +1,23 @@
+.item {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    font-size: 15px;
+
+    &:not(:first-child) > * {
+        border-top: 0.37px solid var(--header-border);
+    }
+
+    > * {
+        display: block;
+        padding: 20px 0;
+        text-decoration: none;
+    }
+}
+
+.button {
+    border: none;
+    background: none;
+    width: 100%;
+    text-align: left;
+}

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

@@ -0,0 +1,50 @@
+import React from "react";
+import classnames from "classnames";
+
+import styles from "./Item.module.scss";
+
+interface LinkProps {
+    href: string;
+}
+
+interface Props {
+    href?: string;
+    to?: string;
+    onClick?: () => void;
+    className?: string;
+    Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
+}
+
+const Item: React.FC<Props> = (props) => {
+    const { className, children, href, to, onClick, Link, ...restProps } = props;
+    const cls = classnames(styles.item, className);
+
+    const liProps = {
+        className: cls,
+    };
+
+    if (to) {
+        if (!Link) {
+            throw new TypeError("`to` prop given without `Link` component");
+        }
+
+        return <li {...liProps}><Link href={to} {...restProps}>{children}</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>;
+    }
+    if (onClick) {
+        return (
+            <li {...liProps}>
+                <button className={styles.button} onClick={props.onClick} {...restProps}>{children}</button>
+            </li>
+        );
+    }
+    return <li {...liProps}><div {...restProps}>{children}</div></li>;
+};
+
+export { Item };

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

@@ -0,0 +1,4 @@
+.list {
+    margin: 0 23px;
+    padding: 0;
+}

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

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

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/components/ui/directionPad/Button.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+import styles from "./Pad.module.scss";
+
+interface Props {
+    onClick?: () => void;
+}
+
+const PadButton: React.FC<Props> = (props) => {
+    return (
+        <button {...props} className={styles.pad__button}><span className={styles.pad__dot} /></button>
+    );
+};
+
+export { PadButton };

package/src/components/ui/directionPad/Middle.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import styles from "./Pad.module.scss";
+
+interface Props {
+    label?: string;
+    onClick?: () => void;
+}
+
+const PadMiddle: React.FC<Props> = (props) => {
+    return (
+        <button onClick={props.onClick} className={styles.pad__middle}>{props.label}</button>
+    );
+};
+
+export { PadMiddle };

package/src/components/ui/directionPad/Pad.module.scss

@@ -0,0 +1,45 @@
+.pad {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 150px;
+    border-radius: 666px;
+    width: 150px;
+    border: 1px solid #aaa;
+    background: white;
+
+    &__line {
+        display: flex;
+    }
+
+    &__button {
+        height: 50px;
+        width: 50px;
+        margin: 0;
+        border-radius: 666px;
+        border: none;
+        display: block;
+        background: none;
+    }
+
+    &__middle {
+        display: block;
+        margin: 0;
+        height: 50px;
+        width: 50px;
+        border: 1px solid #999;
+        box-sizing: border-box;
+        border-radius: 666px;
+        background: none;
+    }
+
+    &__dot {
+        display: block;
+        width: 4px;
+        height: 4px;
+        border-radius: 666px;
+        background: black;
+        margin: auto;
+    }
+}

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

@@ -0,0 +1,35 @@
+import React from "react";
+
+import { PadButton as Button } from "./Button.js";
+import { PadMiddle as Middle } from "./Middle.js";
+
+import styles from "./Pad.module.scss";
+
+interface Props {
+    onUpPress?: () => void;
+    onDownPress?: () => void;
+    onLeftPress?: () => void;
+    onRightPress?: () => void;
+    onMiddlePress?: () => void;
+    middleLabel?: string;
+}
+
+const Pad: React.FC<Props> = (props) => {
+    return (
+        <div className={styles.pad}>
+            <div className={styles.pad__line}>
+                <Button onClick={props.onUpPress} />
+            </div>
+            <div className={styles.pad__line}>
+                <Button onClick={props.onLeftPress} />
+                <Middle onClick={props.onMiddlePress} label={props.middleLabel} />
+                <Button onClick={props.onRightPress} />
+            </div>
+            <div className={styles.pad__line}>
+                <Button onClick={props.onDownPress} />
+            </div>
+        </div>
+    );
+};
+
+export { Pad as DirectionPad };

package/src/demo/Demo.tsx

@@ -3,11 +3,12 @@ import React from "react";
 import styles from "./Demo.module.scss";
 import { Menu } from "./Menu";
 import { Main } from "./Main";
+import { componentsMap } from "./componentsMap";
 
 const Demo: React.FC = (props) => {
     return (
         <div className={styles.container}>
-            <Menu />
+            <Menu list={componentsMap} />
             <Main />
         </div>
     );

package/src/demo/Main.module.scss

@@ -8,10 +8,23 @@
 .component {
     padding: 20px;
     flex: 1;
+    overflow: auto;
 
     &--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,15 +1,44 @@
-import React, { useState } from "react";
+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 { CheckboxDemo } from "./components/form/Checkbox";
 import { safeUseHash } from "./utils/safeUseHash";
+import { componentsMap } from "./componentsMap";
+
+type BG = "white" | "transparent" | "mobile";
+
+interface ComponentInfo {
+    Component: AnyComponent;
+    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];
 
-type BG = "white" | "transparent";
+        if (!objItem) {
+            return null;
+        }
+        obj = objItem.children;
+    }
+
+    if (objItem?.Component) {
+        return {
+            name: objItem.name,
+            Component: objItem.Component,
+        };
+    }
 
-const componentsMap: { [key: string]: (typeof React.Component) | React.FC } = {
-    checkbox: CheckboxDemo,
+    return null;
 };
 
 const Main: React.FC = (props) => {
@@ -17,9 +46,19 @@ const Main: React.FC = (props) => {
 
     const hash = safeUseHash();
     const hashWithoutHash = hash.substr(1);
-    const Component = componentsMap[hashWithoutHash];
+    const info = getComponentByHash(hashWithoutHash);
 
-    if (!Component) {
+    const handleTransparentBg = useCallback(() => {
+        setBg("transparent");
+    }, []);
+    const handleWhiteBg = useCallback(() => {
+        setBg("white");
+    }, []);
+    const handleMobileBg = useCallback(() => {
+        setBg("mobile");
+    }, []);
+
+    if (!info) {
         return (
             <div className={styles.container}>
                 <h1 className={styles.header}>Hi there</h1>
@@ -28,15 +67,19 @@ const Main: React.FC = (props) => {
         );
     }
 
+    const Component = info.Component;
+
     const componentCls = classnames(styles.component, {
         [styles["component--transparent"]]: bg === "transparent",
+        [styles["component--mobile"]]: bg === "mobile",
     });
 
     return (
         <div className={styles.container}>
-            <h1 className={styles.header}>{hash}</h1>
-            <button onClick={() => { setBg("transparent"); }}>Transparent</button>
-            <button onClick={() => { setBg("white"); }}>White</button>
+            <h1 className={styles.header}>{info.name}</h1>
+            <button onClick={handleTransparentBg}>Transparent</button>
+            <button onClick={handleWhiteBg}>White</button>
+            <button onClick={handleMobileBg}>Mobile</button>
 
             <div className={componentCls}>
                 <Component />

package/src/demo/Menu.module.scss

@@ -1,19 +1,41 @@
 .menu {
-    display: block;
-    padding: 10px;
+    margin: 0;
+    padding: 0;
     border-right: 1px solid black;
 
-    a {
+    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;
-        background: var(--active-bg);
-        border-radius: 5px;
+        text-transform: uppercase;
+        font-size: 16px;
+    }
+
+    a {
+        padding: 5px 10px;
+        display: block;
         color: black;
         text-decoration: none;
-        text-transform: uppercase;
+        font-size: 14px;
 
-        + a {
-            margin-top: 10px;
+        &:hover {
+            background: var(--active-bg);
         }
+
+        --focus-bg-set: var(--focus-color);
     }
 }

package/src/demo/Menu.tsx

@@ -1,14 +1,40 @@
 import React from "react";
 
 import styles from "./Menu.module.scss";
+import type { componentsMap } from "./componentsMap";
 
-const Menu: React.FC = () => {
-    return (
-        <div className={styles.menu}>
-            <a href={"#"}>Main</a>
-            <a href={"#checkbox"}>Checkbox</a>
-        </div>
-    );
+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 = `children` in component && 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={styles.menu}>{contents}</menu>;
+    }
+
+    return contents;
+};
+
+Menu.defaultProps = {
+    ancestors: [],
 };
 
 export { Menu };