react-miui 0.0.3 → 0.4.0

package/esm/components/ui/button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAClC;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAW3B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/components/ui/button/Button.js

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./Button.module.scss";
+import classnames from "classnames";
+import { makeVariants } from "../../../demo/utils/makeVariants";
+const Button = (props) => {
+    const variants = makeVariants(props.variant);
+    const cls = classnames(styles.btn, {
+        [styles["btn--inline"]]: variants.includes("inline"),
+        [styles["btn--outline"]]: variants.includes("outline"),
+    });
+    return (React.createElement("button", { className: cls, disabled: props.disabled }, props.children));
+};
+export { Button };
+//# sourceMappingURL=Button.js.map

package/esm/components/ui/button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAOhE,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAE7C,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE;QAC/B,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;QACpD,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC;KACzD,CAAC,CAAC;IAEH,OAAO,CACH,gCAAQ,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAG,KAAK,CAAC,QAAQ,CAAU,CAC9E,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/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/esm/global.scss

@@ -1,15 +1,18 @@
-// Font-size ratio: 1,6 (666?)
-// Border ratio: 2,6666
-// Dimensions ratio: 3
-
 // @TODO prefix variable names
 :root {
+    --ratio-dimensions: 3;
+    --ratio-border:     2.666666;
+    --ratio-font:       1.666666;
+
     --main-color: #008ad2; // used
     --main-color-alt: #006AA9;
 
     --active-bg: #d3d3d3;
     --inactive-bg: #d3d3d3; // used
 
+    --toggle-handle-bg: #e0e0e0;
+    --toggle-handle-border: #cdcdcd;
+
     --icon: #636363;
     --border: #d5d5d5;
     --button-border: #bababa;
@@ -17,18 +20,39 @@
     --header-border: #c8c8c9;
     --header-bg: #efeff0;
     --header-text: #484848;
+    --text: #323232;
+    --sub: #959595;
 
     --toolbar-border: #ababab;
     --toolbar-bg: #f8f8f8;
 
-    --color1: #00aeeb;
-    --color2: #9d6ee5;
-    --color3: #00c293;
-    --color4: #ff5290;
-    --color5: #ff7259;
-    --color6: #4083f7;
+    // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
+    --blue1: #038bf4;
+    --orange1: #ff7200;
+    --orange1-darker: #cc5b00;
+    --purple1: #7357e8;
+    --green1: #3ec234;
+    --green1-darker: #38af2f;
+    --pink1: #ff388f;
+    --red1: #ea2700;
+
+    --grey1: #737373;
+
+    --focus-color: #dcaf00;
 }
 
-*:focus { // @TODO take care of focus
+*:focus {
     outline: none!important;
 }
+
+*:focus-visible:focus-visible {
+    outline: none!important;
+    border-color: var(--focus-color);
+    background-color: var(--focus-bg-set);
+}
+
+
+body {
+    font-size: 15px;
+    color: var(--text);
+}

package/esm/index.d.ts

@@ -1,7 +1,9 @@
 export * from "./components/form/Checkbox.js";
+export * from "./components/icons/Icon.js";
 export * from "./components/layout/header/Header.js";
 export * from "./components/layout/header/StickyHeader.js";
 export * from "./components/layout/list/List.js";
 export * from "./components/layout/list/Item.js";
+export * from "./components/ui/button/Button.js";
 export * from "./components/ui/directionPad/Pad.js";
 //# sourceMappingURL=index.d.ts.map

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAE9C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AAEjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}

package/esm/index.js

@@ -1,7 +1,9 @@
 export * from "./components/form/Checkbox.js";
+export * from "./components/icons/Icon.js";
 export * from "./components/layout/header/Header.js";
 export * from "./components/layout/header/StickyHeader.js";
 export * from "./components/layout/list/List.js";
 export * from "./components/layout/list/Item.js";
+export * from "./components/ui/button/Button.js";
 export * from "./components/ui/directionPad/Pad.js";
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAE9C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AAEjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}

package/esm/types.d.ts

@@ -0,0 +1,4 @@
+import type React from "react";
+declare type AnyComponent = React.ComponentClass | React.FC | React.VFC;
+export type { AnyComponent, };
+//# sourceMappingURL=types.d.ts.map

package/esm/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,aAAK,YAAY,GAAG,KAAK,CAAC,cAAc,GAAG,KAAK,CAAC,EAAE,GAAG,KAAK,CAAC,GAAG,CAAC;AAEhE,YAAY,EACR,YAAY,GACf,CAAC"}

package/esm/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/esm/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.0.3",
+  "version": "0.4.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {
@@ -14,7 +14,8 @@
     "lint:fix": "yarn lint --fix",
     "prepack": "yarn compile",
     "prepublishOnly": "yarn audit && yarn lint && yarn test && yarn docs",
-    "start:dev": "next dev"
+    "start:dev": "next dev",
+    "deploy:dev": "next build && next export && netlify deploy --dir out"
   },
   "exports": {
     "./global.scss": "./src/global.scss",
@@ -34,8 +35,8 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-typescript": "^7.12.7",
     "@dzek69/eslint-config-base": "^2.1.0",
-    "@dzek69/eslint-config-typescript": "^0.4.0",
     "@dzek69/eslint-config-react": "^1.2.2",
+    "@dzek69/eslint-config-typescript": "^0.4.0",
     "@types/jest": "^26.0.23",
     "@types/react": "^17.0.4",
     "@types/react-dom": "^17.0.3",
@@ -50,8 +51,7 @@
     "husky": "^4.3.0",
     "jest": "^27.0.6",
     "must": "^0.13.4",
-    "next": "^11.1.0",
-    "nodemon": "^2.0.6",
+    "next": "^11.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-use": "^17.2.4",
@@ -71,7 +71,7 @@
     }
   },
   "libraryTemplate": {
-    "version": "3.3.1",
+    "version": "3.4.0",
     "language": "typescript",
     "fixDefaultForCommonJS": true,
     "jsx": true

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

@@ -3,24 +3,31 @@
         width: 0;
         height: 0;
         transform: scale(0);
+        margin: 0;
+        vertical-align: middle;
 
         + span {
             border-radius: 100px;
             background: var(--inactive-bg);
-            width: 24px;
-            height: 24px;
+            width: 18px;
+            height: 18px;
             display: inline-flex;
             justify-content: center;
             align-items: center;
+            vertical-align: middle;
 
             svg {
-                width: 12px;
-                height: 12px;
+                width: 9px;
+                height: 9px;
                 fill: white;
             }
+
+            + span {
+                vertical-align: middle;
+            }
         }
 
-        &:focus {
+        &:focus-visible {
             + span {
                 box-shadow: 0 0 5px black;
             }
@@ -34,7 +41,7 @@
         }
 
         + span + span:not(:empty) {
-            margin-left: 1em;
+            margin-left: 0.5em;
         }
     }
 }

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

@@ -0,0 +1,46 @@
+.container {
+    --ratio-dimensions: 2.5;
+
+    display: inline-flex;
+    align-items: center;
+    border: 1px solid #ccc;
+    border-radius: 100px;
+    position: relative;
+    line-height: 0;
+    width: calc(110px / var(--ratio-dimensions));
+    height: calc(62px / var(--ratio-dimensions));
+    padding-left: calc(8px / var(--ratio-dimensions));
+    box-sizing: border-box;
+
+    input {
+        position: absolute;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        visibility: hidden;
+
+        &:not(:checked) + .toggle {
+            transform: translateX(0);
+            background: var(--toggle-handle-bg);
+            border-color: var(--toggle-handle-border);
+        }
+
+        &[data-undetermined=true] + .toggle {
+            transform: translateX(calc(24px / var(--ratio-dimensions)));
+            background: var(--toggle-handle-border);
+            border-color: var(--toggle-handle-border);
+        }
+    }
+}
+
+.toggle {
+    box-sizing: border-box;
+    border-radius: 100px;
+    display: inline-block;
+    width: calc(44px / var(--ratio-dimensions));
+    height: calc(44px / var(--ratio-dimensions));
+    border: calc(1px / var(--ratio-border)) solid var(--orange1-darker);
+    background: var(--orange1);
+    transition: transform 200ms, background-color 200ms, border-color 200ms;
+    transform: translateX(calc(48px / var(--ratio-dimensions)));
+}

package/src/components/form/Toggle.tsx

@@ -0,0 +1,33 @@
+import type { ChangeEvent } from "react";
+import React, { useCallback } from "react";
+
+import styles from "./Toggle.module.scss";
+
+interface Props {
+    onChange: (newState: boolean) => void;
+    state: boolean | null;
+}
+
+const Toggle: React.VFC<Props> = (props) => {
+    const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+        if (props.state == null) {
+            return;
+        }
+        props.onChange(e.target.checked);
+    }, [props.onChange, props.state]);
+
+    return (
+        <label className={styles.container}>
+            <input
+                type={"checkbox"}
+                checked={Boolean(props.state)}
+                data-undetermined={props.state == null}
+                readOnly={props.state == null}
+                onChange={handleChange}
+            />
+            <div className={styles.toggle} />
+        </label>
+    );
+};
+
+export { Toggle };

package/src/components/icons/Back.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface Props {
+    className?: string;
+}
+
+const Back: React.VFC<Props> = (props) => {
+    return (
+        <svg
+            width={"9"}
+            height={"16"}
+            viewBox={"0 0 9 16"}
+            xmlns={"http://www.w3.org/2000/svg"}
+            className={props.className}
+        >
+            <path fill={"currentColor"} d={"M8.05.1L0 7.95l8.05 7.85v.05q.15.15.4.15t.4-.15q.15-.2.15-.4 0-.25-.15-.4V15H8.8L1.65 7.95l7.2-7Q9 .75 9 .55q0-.25-.2-.4Q8.65 0 8.4 0q-.2 0-.35.1"} />
+        </svg>
+    );
+};
+
+export { Back };

package/src/components/icons/Forward.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface Props {
+    className?: string;
+}
+
+const Forward: React.VFC<Props> = (props) => {
+    return (
+        <svg
+            width={"9"}
+            height={"16"}
+            viewBox={"0 0 9 16"}
+            xmlns={"http://www.w3.org/2000/svg"}
+            className={props.className}
+        >
+            <path fill={"currentColor"} d={"M.95.15Q.8 0 .55 0t-.4.15Q0 .3 0 .55t.15.4L7.35 8l-7.2 7.05Q0 15.2 0 15.4q0 .25.2.4.15.2.4.2.2 0 .35-.15L9 8 1 .2Q1 .15.95.15"} />
+        </svg>
+    );
+};
+
+export { Forward };

package/src/components/icons/Icon.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import type { AnyComponent } from "../../types";
+import { Checkmark } from "./Checkmark";
+import { Back } from "./Back";
+import { Forward } from "./Forward";
+
+enum ICON {
+    checkmark = "checkmark",
+    back = "back",
+    forward = "forward",
+}
+
+interface Props {
+    name: ICON;
+    className?: string;
+}
+
+const iconsMap = new Map<ICON, AnyComponent>([
+    [ICON.checkmark, Checkmark],
+    [ICON.back, Back],
+    [ICON.forward, Forward],
+]);
+
+const Icon: React.FC<Props> = ({ name: iconName, ...props }) => {
+    const C = iconsMap.get(iconName);
+    if (!C) {
+        throw new TypeError("Unknown icon: " + iconName);
+    }
+    return <C {...props} />;
+};
+
+export { Icon, ICON };

package/src/components/layout/header/Header.module.scss

@@ -23,6 +23,11 @@
     padding: 16.666px 0;
     min-width: 44px;
     flex-direction: column;
+
+    > .contents {
+        flex-direction: column;
+        align-items: center;
+    }
 }
 
 .header--top {
@@ -36,10 +41,49 @@
     border-right: 0.37px solid var(--border-color);
 }
 .header--right {
-    border-right: 0.37px solid var(--border-color);
+    border-left: 0.37px solid var(--border-color);
     order: 2;
 }
 
-.header--center {
+.contents {
+    flex: 1;
+    display: flex;
+}
+
+.header--center > .contents {
     justify-content: center;
 }
+
+.header--top, .header--bottom {
+    .before {
+        margin-right: calc(50px / var(--ratio-dimensions));
+    }
+
+    .after {
+        margin-left: calc(50px / var(--ratio-dimensions));
+    }
+
+    .actions {
+        margin: calc(56px / var(--ratio-dimensions)) 0;
+    }
+}
+
+.header--left, .header--right {
+    .before {
+        margin-bottom: calc(50px / var(--ratio-dimensions));
+        flex-direction: column;
+    }
+
+    .after {
+        margin-top: calc(50px / var(--ratio-dimensions));
+        flex-direction: column;
+    }
+
+    .actions {
+        margin: 0 calc(56px / var(--ratio-dimensions));
+    }
+}
+
+.before, .after {
+    display: flex;
+}

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

@@ -1,25 +1,63 @@
 import React from "react";
 import classnames from "classnames";
+import type { ReactNode } from "react";
 
 import styles from "./Header.module.scss";
+import { Action } from "../../ui/action/Action";
+import { EqualActions } from "../../ui/action/EqualActions";
 
 interface Props {
     center?: boolean;
     variant?: "toolbar";
-    position?: "top" | "left" | "right" | "bottom";
+    /**
+     * This indicates just how the borders are drawn and how content is aligned, not the actual position on the screen.
+     * To set up position on the screen you need to properly style parent element.
+     */
+    position?: "top" | "left" | "right" | "bottom"; // @TODO disallow left/right if not inside StickyHeader?
+    className?: string;
+    before?: ReactNode;
+    after?: ReactNode;
 }
 
+// eslint-disable-next-line max-statements
 const Header: React.FC<Props> = (props) => {
     const { center, children, variant, position = "top" } = props;
 
+    let justActions = false;
+    if (position === "top" || position === "bottom") {
+        const chld = React.Children.toArray(props.children);
+        justActions = chld.every(c => {
+            return c && typeof c === "object" && "type" in c && c.type === Action;
+        });
+    }
+
     const cls = classnames(styles.header, {
         [styles["header--center"]]: center,
         [styles["header--toolbar"]]: variant === "toolbar",
-    }, styles[`header--${position}`]);
+    }, styles[`header--${position}`], props.className);
+
+    let contents = children;
+    if (justActions) {
+        contents = <EqualActions className={styles.actions}>{contents}</EqualActions>;
+    }
+
+    let before: ReactNode;
+    if (props.before != null) {
+        before = <div className={styles.before}>{props.before}</div>;
+    }
+
+    let after: ReactNode;
+    if (props.after != null) {
+        after = <div className={styles.after}>{props.after}</div>;
+    }
 
     return (
         <div className={cls}>
-            {children}
+            {before}
+            <div className={styles.contents}>
+                {contents}
+            </div>
+            {after}
         </div>
     );
 };

package/src/components/layout/header/HeaderIconAction.module.scss

@@ -0,0 +1,22 @@
+.btn, .a {
+    padding: 7px;
+    background: none;
+    border-radius: 666px;
+    display: inline-block;
+    border: calc(2px / var(--ratio-border)) solid transparent;
+    color: var(--header-text);
+
+    &:hover {
+        background: #00000022;
+    }
+    &:active {
+        background: #00000011;
+        color: currentColor;
+    }
+}
+
+.icon {
+    width: 16px;
+    height: 16px;
+    display: block;
+}

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

@@ -0,0 +1,49 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import type { ICON } from "../../icons/Icon";
+import { Icon } from "../../icons/Icon";
+import styles from "./HeaderIconAction.module.scss";
+
+interface LinkProps { // @TODO extract? - same on list item
+    href: string;
+}
+
+interface Props {
+    icon?: ICON | Exclude<ReactNode, string>;
+    onClick?: () => void;
+    href?: string;
+    to?: string;
+    Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
+    label?: ReactNode;
+    // if className ever goes here make sure that `a` gets classnames merged
+}
+
+const HeaderIconAction: React.VFC<Props> = (props) => {
+    const { icon, label, href, to, Link, ...restProps } = props;
+
+    let content: ReactNode = icon;
+    if (typeof icon === "string") {
+        content = <Icon className={styles.icon} name={icon as ICON} />;
+    }
+
+    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 className={styles.btn} onClick={props.onClick}>
+            {content}
+        </button>
+    );
+};
+
+export { HeaderIconAction };

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

@@ -1,8 +1,8 @@
 import React from "react";
+import classnames from "classnames";
 
 import { Header } from "./Header.js";
 import styles from "./StickyHeader.module.scss";
-import classnames from "classnames";
 
 const err = new TypeError("StickyHeader needs two children - Header and StickyHeader.Content");
 

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

@@ -0,0 +1,8 @@
+.header > * {
+    padding-top: calc(80px / var(--ratio-dimensions));
+    padding-bottom: calc(40px / var(--ratio-dimensions));
+
+    font-size: calc(26px / var(--ratio-font));
+    color: var(--sub);
+    text-transform: uppercase;
+}

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

@@ -0,0 +1,16 @@
+import React from "react";
+import classnames from "classnames";
+
+import styles from "./Item.module.scss";
+import headerStyles from "./Header.module.scss";
+
+const Header: React.FC = (props) => {
+    // @TODO way to use h1, h2, h3 instead of div
+    return (
+        <li className={classnames(styles.item, headerStyles.header)}>
+            <div>{props.children}</div>
+        </li>
+    );
+};
+
+export { Header };