react-miui 0.5.1 → 0.8.0

package/src/components/form/Input.module.scss

@@ -0,0 +1,48 @@
+.input {
+    box-sizing: border-box;
+    height: calc(103px / var(--ratio-dimensions));
+    font-size: calc(34 / var(--ratio-font));
+    color: var(--text);
+    border: none;
+    display: block;
+    width: 100%;
+    background: none;
+    font-family: inherit;
+    padding: 1.2em 0;
+
+    &::placeholder {
+        color: var(--sub);
+    }
+}
+
+.wrapper {
+    background: white;
+    display: inline-flex;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 2px;
+    padding: 0 calc(36px / var(--ratio-dimensions));
+    border: calc(1px / var(--ratio-border)) solid var(--border);
+    align-items: center;
+}
+
+.textarea {
+    padding: 1.2em calc(36px / var(--ratio-dimensions));
+    height: unset;
+    resize: vertical;
+    min-height: calc(103px * 3 / var(--ratio-dimensions))
+}
+
+.prefix {
+    margin-right: calc(36px / var(--ratio-dimensions));
+    display: flex;
+}
+
+.suffix {
+    margin-left: calc(36px / var(--ratio-dimensions));
+    display: flex;
+}
+
+.wrapperFocused {
+    border-color: var(--focus-color);
+}

package/src/components/form/Input.tsx

@@ -0,0 +1,48 @@
+import React, { useCallback, useState } from "react";
+import classnames from "classnames";
+
+import styles from "./Input.module.scss";
+
+interface Props {
+    children?: never;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+}
+
+const Input: React.FC<Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> & Props> = ({
+    className, children,
+    prefix, suffix,
+    onFocus, onBlur,
+    ...props
+}) => {
+    const [focused, setFocused] = useState(false);
+
+    const handleFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
+        setFocused(true);
+        onFocus?.(e);
+    }, [onFocus]);
+
+    const handleBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
+        setFocused(false);
+        onBlur?.(e);
+    }, [onBlur]);
+
+    const wrapperCls = classnames(styles.wrapper, {
+        [styles.wrapperFocused]: focused,
+    }, className);
+
+    const prefixElem = prefix ? <div className={styles.prefix}>{prefix}</div> : null;
+    const suffixElem = suffix ? <div className={styles.suffix}>{suffix}</div> : null;
+
+    return (
+        <div className={wrapperCls}>
+            {prefixElem}
+            <input {...props} onFocus={handleFocus} onBlur={handleBlur} className={styles.input} />
+            {suffixElem}
+        </div>
+    );
+};
+
+export {
+    Input,
+};

package/src/components/form/Label.module.scss

@@ -0,0 +1,15 @@
+.label + .label {
+    margin-top: 23px;
+    display: block;
+}
+
+.text {
+    font-size: calc(28px / var(--ratio-font));
+    margin-bottom: calc(24px / var(--ratio-dimensions));
+    color: var(--sub);
+}
+
+.textBig {
+    font-size: calc(34px / var(--ratio-font));
+
+}

package/src/components/form/Label.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+import styles from "./Label.module.scss";
+import { makeVariants } from "../../utils/makeVariants";
+import classnames from "classnames";
+
+interface Props {
+    label?: React.ReactNode;
+    variant?: "big";
+}
+
+const Label: React.FC<Props> = (props) => {
+    const v = makeVariants(props.variant);
+
+    const labelCls = classnames(styles.text, {
+        [styles.textBig]: v.includes("big"),
+    });
+
+    const label = props.label ? <div className={labelCls}>{props.label}</div> : null;
+
+    return (
+        <label className={styles.label}>
+            {label}
+            {props.children}
+        </label>
+    );
+};
+
+export { Label };

package/src/components/form/TextArea.tsx

@@ -0,0 +1,38 @@
+import React, { useCallback, useState } from "react";
+import classnames from "classnames";
+
+import styles from "./Input.module.scss";
+
+interface Props {
+    children?: never;
+}
+
+const TextArea: React.FC<React.TextareaHTMLAttributes<HTMLTextAreaElement> & Props> = ({
+    className, children,
+    onFocus, onBlur,
+    ...props
+}) => {
+    const [focused, setFocused] = useState(false);
+
+    const handleFocus = useCallback((e: React.FocusEvent<HTMLTextAreaElement>) => {
+        setFocused(true);
+        onFocus?.(e);
+    }, [onFocus]);
+
+    const handleBlur = useCallback((e: React.FocusEvent<HTMLTextAreaElement>) => {
+        setFocused(false);
+        onBlur?.(e);
+    }, [onBlur]);
+
+    const cls = classnames(styles.wrapper, {
+        [styles.wrapperFocused]: focused,
+    }, styles.input, styles.textarea, className);
+
+    return (
+        <textarea {...props} onFocus={handleFocus} onBlur={handleBlur} className={cls} />
+    );
+};
+
+export {
+    TextArea,
+};

package/src/components/form/Toggle.tsx

@@ -8,7 +8,7 @@ interface Props {
     state: boolean | null;
 }
 
-const Toggle: React.VFC<Props> = (props) => {
+const Toggle: React.FC<Props> = (props) => {
     const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
         if (props.state == null) {
             return;

package/src/components/icons/Back.tsx

@@ -4,7 +4,7 @@ interface Props {
     className?: string;
 }
 
-const Back: React.VFC<Props> = (props) => {
+const Back: React.FC<Props> = (props) => {
     return (
         <svg
             width={"9"}

package/src/components/icons/Battery.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+interface Props {
+    className?: string;
+}
+
+const Battery: React.FC<Props> = (props) => {
+    return (
+        <svg
+            width={"13"}
+            height={"17"}
+            xmlns={"http://www.w3.org/2000/svg"}
+            className={props.className}
+        >
+            <path
+                fill={"none"}
+                stroke={"#000"}
+                strokeLinecap={"round"}
+                strokeLinejoin={"round"}
+                d={"M12.5 2.55q0-.6-.5-.55H9.25q-.65 0-.6-.7v-.2Q8.7.5 8.2.5H4.75q-.4 0-.4.4v.4q.05.75-.75.7H1.1q-.6-.05-.6.55V16q0 .5.6.5h11q.4 0 .4-.45V2.55"}
+            />
+            <path
+                fill={"none"}
+                stroke={"#000"}
+                strokeLinecap={"round"}
+                strokeLinejoin={"round"}
+                d={"M8.9 8.6h-2V5.8l-3 4 1.95.05v2.75l3.05-4"}
+            />
+        </svg>
+
+    );
+};
+
+export { Battery };

package/src/components/icons/Forward.tsx

@@ -4,7 +4,7 @@ interface Props {
     className?: string;
 }
 
-const Forward: React.VFC<Props> = (props) => {
+const Forward: React.FC<Props> = (props) => {
     return (
         <svg
             width={"9"}

package/src/components/icons/Icon.tsx

@@ -4,11 +4,15 @@ import type { AnyComponent } from "../../types";
 import { Checkmark } from "./Checkmark.js";
 import { Back } from "./Back.js";
 import { Forward } from "./Forward.js";
+import { Search } from "./Search.js";
+import { Battery } from "./Battery.js";
 
 enum ICON {
     checkmark = "checkmark",
     back = "back",
     forward = "forward",
+    search = "search",
+    battery = "battery",
 }
 
 interface Props {
@@ -20,6 +24,8 @@ const iconsMap = new Map<ICON, AnyComponent>([
     [ICON.checkmark, Checkmark],
     [ICON.back, Back],
     [ICON.forward, Forward],
+    [ICON.search, Search],
+    [ICON.battery, Battery],
 ]);
 
 const Icon: React.FC<Props> = ({ name: iconName, ...props }) => {

package/src/components/icons/Search.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+interface Props {
+    className?: string;
+}
+
+const Search: React.FC<Props> = (props) => {
+    return (
+        <svg
+            baseProfile={"basic"}
+            width={"16"}
+            height={"16"}
+            xmlns={"http://www.w3.org/2000/svg"}
+            className={props.className}
+        >
+            <path
+                fill={"none"}
+                stroke={"currentColor"}
+                strokeWidth={"2"}
+                strokeLinecap={"round"}
+                strokeLinejoin={"round"}
+                d={"M11.95 6.6q0 2.1-1.5 3.6m0-7.2q1.5 1.55 1.5 3.6M6.9 1.5q2.05 0 3.55 1.5m-7.2 0q1.5-1.5 3.65-1.5M1.75 6.6q0-2.05 1.5-3.6m0 7.2q-1.5-1.5-1.5-3.6m5.15 5.1q-2.15 0-3.65-1.5m6.95.2q-1.4 1.3-3.3 1.3m3.3-1.3l4.1 4.1m-3.85-4.3q-.1.1-.25.2"}
+            />
+        </svg>
+
+    );
+};
+
+export { Search };

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

@@ -19,7 +19,7 @@ interface Props {
     // if className ever goes here make sure that `a` gets classnames merged
 }
 
-const HeaderIconAction: React.VFC<Props> = (props) => {
+const HeaderIconAction: React.FC<Props> = (props) => {
     const { icon, label, href, to, Link, ...restProps } = props;
 
     let content: ReactNode = icon;

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

@@ -3,11 +3,24 @@ import classnames from "classnames";
 
 import styles from "./Item.module.scss";
 import headerStyles from "./Header.module.scss";
+import { makeVariants } from "../../../utils/makeVariants";
+
+type Variant = "inset";
+
+interface Props {
+    variant?: Variant | Variant[];
+}
+
+const Header: React.FC<Props> = (props) => {
+    const v = makeVariants(props.variant);
+
+    const cls = classnames(styles.item, headerStyles.header, {
+        [styles.inset]: v.includes("inset"),
+    });
 
-const Header: React.FC = (props) => {
     // @TODO way to use h1, h2, h3 instead of div
     return (
-        <li className={classnames(styles.item, headerStyles.header)}>
+        <li className={cls}>
             <div>{props.children}</div>
         </li>
     );

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

@@ -4,7 +4,7 @@
     padding: 0;
     font-size: calc(34px / var(--ratio-font));
 
-    &:not(:first-child) > * {
+    &:not(:first-child) {
         border-top: 0.37px solid var(--header-border);
     }
 
@@ -29,3 +29,18 @@
     min-height: calc(174px / var(--ratio-dimensions));
     align-items: center;
 }
+
+.inset {
+    padding-left: calc(37px / var(--ratio-dimensions));
+    padding-right: calc(37px / var(--ratio-dimensions));
+}
+
+.icon {
+    width: 7px;
+    margin-right: 10px;
+    display: inline-block;
+}
+
+.selected {
+    color: var(--main-color);
+}

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

@@ -4,11 +4,15 @@ import classnames from "classnames";
 import styles from "./Item.module.scss";
 import { Value } from "./Value.js";
 import { Label } from "./Label.js";
+import { makeVariants } from "../../../utils/makeVariants";
+import { ICON, Icon } from "../../icons/Icon";
 
 interface LinkProps {
     href: string;
 }
 
+type Variant = "inset";
+
 interface Props {
     href?: string;
     to?: string;
@@ -16,6 +20,8 @@ interface Props {
     className?: string;
     Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
     ratio?: string; // @TODO number/number/number/.. type?
+    variant?: Variant | Variant[];
+    selected?: boolean | undefined;
 }
 
 interface SubComponents {
@@ -23,11 +29,26 @@ interface SubComponents {
     Value: typeof Value;
 }
 
-// eslint-disable-next-line max-statements
+const icon = <Icon className={styles.icon} name={ICON.forward} />;
+const noIcon = <span className={styles.icon} />;
+
+// eslint-disable-next-line max-statements,max-lines-per-function
 const Item: React.FC<Props> & SubComponents = (props) => {
-    const { className, children, href, to, onClick, Link, ratio, ...restProps } = props;
+    const { className, children, href, to, onClick, Link, ratio, variant, selected, ...restProps } = props;
+    const v = makeVariants(variant);
     const cls = classnames(styles.item, className);
 
+    const innerCls = classnames(styles.content, {
+        [styles.inset]: v.includes("inset"),
+        [styles.selected]: selected,
+    });
+
+    const pre = typeof selected === "boolean"
+        ? (
+            selected ? icon : noIcon
+        )
+        : null;
+
     const liProps = {
         className: cls,
     };
@@ -42,7 +63,7 @@ const Item: React.FC<Props> & SubComponents = (props) => {
         if (index in r) {
             flex = r[index];
         }
-        return <div style={{ flex }}>{child}</div>;
+        return <div style={{ flex }}>{pre}{child}</div>;
     });
 
     if (to) {
@@ -50,25 +71,25 @@ const Item: React.FC<Props> & SubComponents = (props) => {
             throw new TypeError("`to` prop given without `Link` component");
         }
 
-        return <li {...liProps}><Link href={to} {...restProps}><a className={styles.content}>{ren}</a></Link></li>;
+        return <li {...liProps}><Link href={to} {...restProps}><a className={innerCls}>{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} className={styles.content}>{ren}</a></li>;
+        return <li {...liProps}><a href={href} {...aProps} className={innerCls}>{ren}</a></li>;
     }
     if (onClick) {
         return (
             <li {...liProps}>
-                <button className={classnames(styles.button, styles.content)} onClick={props.onClick}{...restProps}>
+                <button className={classnames(styles.button, innerCls)} onClick={props.onClick} {...restProps}>
                     {ren}
                 </button>
             </li>
         );
     }
-    return <li {...liProps}><div {...restProps} className={styles.content}>{ren}</div></li>;
+    return <li {...liProps}><div {...restProps} className={innerCls}>{ren}</div></li>;
 };
 
 Item.Label = Label;

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

@@ -2,3 +2,7 @@
     margin: 0 23px;
     padding: 0;
 }
+
+.inset {
+    margin: 0;
+}

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

@@ -1,15 +1,42 @@
 import React from "react";
+import classnames from "classnames";
 
 import { Header } from "./Header.js";
+import { makeVariants } from "../../../utils/makeVariants";
+import { Item } from "./Item";
 import styles from "./List.module.scss";
 
+type Variant = "inset";
+
+interface Props {
+    className?: string;
+    variant?: Variant | Variant[];
+}
+
 interface SubComponents {
     Header: typeof Header;
 }
 
-const List: React.FC & SubComponents = (props) => {
+const List: React.FC<Props> & SubComponents = (props) => {
+    const v = makeVariants(props.variant);
+
+    const chld = React.Children.map(props.children, (child) => {
+        if (child && typeof child === "object" && "type" in child && (child.type === Item || child.type === Header)) {
+            return React.cloneElement(child, {
+                // @TODO this will override but should merge?
+                variant: props.variant,
+            });
+        }
+        return child;
+    });
+
     return (
-        <ul className={styles.list}>{props.children}</ul>
+        <ul
+            className={classnames(styles.list, {
+                [styles.inset]: v.includes("inset"),
+            })}
+        >{chld}
+        </ul>
     );
 };
 

package/src/components/layout/section/SearchContainer.module.scss

@@ -0,0 +1,3 @@
+.section {
+    margin: 12px;
+}

package/src/components/layout/section/SearchContainer.tsx

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

package/src/components/layout/section/Section.module.scss

@@ -15,3 +15,10 @@
     margin-left: 23px;
     margin-right: 23px;
 }
+
+.section > .section.vertical {
+    padding-top: 23px;
+    padding-bottom: 23px;
+    margin-top: 0;
+    margin-bottom: 0;
+}

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

@@ -19,7 +19,7 @@ interface Props {
     // if className ever goes here make sure that `a` gets classnames merged
 }
 
-const Action: React.VFC<Props> = (props) => {
+const Action: React.FC<Props> = (props) => {
     const { icon, label, href, to, Link, ...restProps } = props;
 
     let iconElem: ReactNode = icon;

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

@@ -5,20 +5,26 @@ import styles from "./Button.module.scss";
 import { makeVariants } from "../../../utils/makeVariants.js";
 
 interface Props {
-    disabled?: boolean;
     variant?: "inline" | "outline";
 }
 
-const Button: React.FC<Props> = (props) => {
-    const variants = makeVariants(props.variant);
+const Button: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & Props> = ({
+    className, children, variant, ...props
+}) => {
+    const variants = makeVariants(variant);
 
     const cls = classnames(styles.btn, {
         [styles["btn--inline"]]: variants.includes("inline"),
         [styles["btn--outline"]]: variants.includes("outline"),
-    });
+    }, className);
 
     return (
-        <button className={cls} disabled={props.disabled}>{props.children}</button>
+        <button
+            {...props}
+            className={cls}
+            disabled={props.disabled}
+        >{children}
+        </button>
     );
 };
 

package/src/components/ui/modal/Modal.module.scss

@@ -0,0 +1,92 @@
+@keyframes overlay {
+    from {
+        background: #00000000;
+    }
+
+    to {
+        background: #0000004c;
+    }
+}
+
+.overlay {
+    position: fixed;
+    z-index: 4;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: overlay 300ms;
+    animation-fill-mode: forwards;
+}
+
+.overlayOnBottom {
+    align-items: flex-end;
+    padding-bottom: calc(24px / var(--ratio-dimensions));
+}
+
+@keyframes container {
+    from {
+        transform: translateY(30px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.container {
+    background: var(--modal-bg);
+    border-radius: calc(12px / var(--ratio-dimensions));
+    max-width: 333px;
+    width: calc(100% - 30px);
+    padding: 20px;
+    position: relative;
+    box-sizing: border-box;
+    animation: container 300ms;
+    animation-fill-mode: forwards;
+}
+
+.full {
+    width: calc(100vw - 30px);
+    max-width: 1000px;
+}
+
+.isClosing {
+    // keep this after .overlay .container to prevent overwriting
+    animation-direction: reverse;
+}
+
+.close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+
+    + .title {
+        margin-right: 40px;
+        margin-top: -4px;
+    }
+}
+
+.title {
+    font-size: calc(40px / var(--ratio-font));
+    text-align: center;
+    color: black;
+    margin: calc(90px / var(--ratio-dimensions)) 0;
+}
+
+.negateMargin {
+    margin: 0 -20px -20px;
+}
+
+.removeMargin {
+    margin: 0;
+}