react-miui 0.2.0 → 0.4.2

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 };

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,8 @@ import React from "react";
 import classnames from "classnames";
 
 import styles from "./Item.module.scss";
+import { Value } from "./Value.js";
+import { Label } from "./Label.js";
 
 interface LinkProps {
     href: string;
@@ -13,38 +15,63 @@ interface Props {
     onClick?: () => void;
     className?: string;
     Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
+    ratio?: string; // @TODO number/number/number/.. type?
 }
 
-const Item: React.FC<Props> = (props) => {
-    const { className, children, href, to, onClick, Link, ...restProps } = props;
+interface SubComponents {
+    Label: typeof Label;
+    Value: typeof Value;
+}
+
+// eslint-disable-next-line max-statements
+const Item: React.FC<Props> & SubComponents = (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>;
 };
 
+Item.Label = Label;
+Item.Value = Value;
+
 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/List.tsx

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

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.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import type { ReactNode } from "react";
 
 import type { ICON } from "../../icons/Icon";
-import { Icon } from "../../icons/Icon";
+import { Icon } from "../../icons/Icon.js";
 import styles from "./Action.module.scss";
 
 interface LinkProps { // @TODO extract? - same on list item

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

@@ -1,8 +1,8 @@
 import React from "react";
-import { Action } from "./Action";
+import classnames from "classnames";
 
+import { Action } from "./Action.js";
 import styles from "./EqualActions.module.scss";
-import classnames from "classnames";
 
 interface Props {
     className?: string;

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

@@ -1,8 +1,8 @@
 import React from "react";
+import classnames from "classnames";
 
 import styles from "./Button.module.scss";
-import classnames from "classnames";
-import { makeVariants } from "../../../demo/utils/makeVariants";
+import { makeVariants } from "../../../demo/utils/makeVariants.js";
 
 interface Props {
     disabled?: boolean;

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

@@ -27,6 +27,14 @@ const CenteredHeaderDemo = () => {
     );
 };
 
+const ToolbarVariantDemo = () => {
+    return (
+        <>
+            <Header center={true} variant={"toolbar"}>Toolbar version</Header>
+        </>
+    );
+};
+
 const handleClick = () => { alert(1); };
 
 // eslint-disable-next-line max-lines-per-function
@@ -108,4 +116,4 @@ const HeaderWithButtonsOnSideDemo = () => {
     );
 };
 
-export { HeaderDemo, CenteredHeaderDemo, HeaderWithButtonsDemo, HeaderWithButtonsOnSideDemo };
+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,31 @@
+import React from "react";
+import { List } from "../../../../components/layout/list/List";
+import { Item } from "../../../../components/layout/list/Item";
+
+const Label = Item.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 { ICON, Icon } from "../../../../components/icons/Icon";
+import styles from "./Value.module.scss";
+
+const { Label, Value } = Item;
+
+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 };

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

@@ -1,16 +1,12 @@
 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 key={value} ratio={"1/"}>
+                {value}
+                <Icon name={value} />
             </Item>
         );
     });

package/src/demo/componentsMap.ts

@@ -4,7 +4,7 @@ import {
     CenteredHeaderDemo,
     HeaderDemo,
     HeaderWithButtonsDemo,
-    HeaderWithButtonsOnSideDemo,
+    HeaderWithButtonsOnSideDemo, ToolbarVariantDemo,
 } from "./components/layout/header/Header";
 import {
     StickyHeaderBottomDemo,
@@ -22,6 +22,11 @@ import {
     ActionsOnBottom,
     ActionsOnLeft,
 } from "./components/ui/action/Action";
+import { ToggleDemo } from "./components/form/Toggle";
+import { ItemRatioDemo } from "./components/layout/list/ItemRatio";
+import { ItemLabelDemo } from "./components/layout/list/Label";
+import { ListHeaderDemo } from "./components/layout/list/Header";
+import { ValueDemo } from "./components/layout/list/Value";
 
 interface TheMap {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -43,6 +48,10 @@ const componentsMap: TheMap = {
         name: "Checkbox",
         Component: CheckboxDemo,
     },
+    Toggle: {
+        name: "Toggle",
+        Component: ToggleDemo,
+    },
     Header: {
         name: "Header",
         Component: HeaderDemo,
@@ -51,6 +60,10 @@ const componentsMap: TheMap = {
                 name: "Centered",
                 Component: CenteredHeaderDemo,
             },
+            Toolbar: {
+                name: "Toolbar",
+                Component: ToolbarVariantDemo,
+            },
             WithButtons: {
                 name: "With buttons",
                 Component: HeaderWithButtonsDemo,
@@ -114,6 +127,24 @@ const componentsMap: TheMap = {
     ListItem: {
         name: "List & Item",
         Component: ListItemDemo,
+        children: {
+            Ratio: {
+                name: "Alignment",
+                Component: ItemRatioDemo,
+            },
+            Header: {
+                name: "Header",
+                Component: ListHeaderDemo,
+            },
+            Label: {
+                name: "Label",
+                Component: ItemLabelDemo,
+            },
+            Value: {
+                name: "Value",
+                Component: ValueDemo,
+            },
+        },
     },
     Pad: {
         name: "Direction pad",

package/src/global.scss

@@ -10,6 +10,9 @@
     --active-bg: #d3d3d3;
     --inactive-bg: #d3d3d3; // used
 
+    --toggle-handle-bg: #e0e0e0;
+    --toggle-handle-border: #cdcdcd;
+
     --icon: #636363;
     --border: #d5d5d5;
     --button-border: #bababa;
@@ -17,13 +20,16 @@
     --header-border: #c8c8c9;
     --header-bg: #efeff0;
     --header-text: #484848;
+    --text: #323232;
+    --sub: #959595;
 
     --toolbar-border: #ababab;
-    --toolbarf-bg: #f8f8f8;
+    --toolbar-bg: #f8f8f8;
 
     // 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;
@@ -48,4 +54,5 @@
 
 body {
     font-size: 15px;
+    color: var(--text);
 }

package/src/index.ts

@@ -1,11 +1,15 @@
 export * from "./components/form/Checkbox.js";
+export * from "./components/form/Toggle.js";
 
 export * from "./components/icons/Icon.js";
 
 export * from "./components/layout/header/Header.js";
+export * from "./components/layout/header/HeaderIconAction.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/action/Action.js";
+export * from "./components/ui/action/EqualActions.js";
 export * from "./components/ui/button/Button.js";
 export * from "./components/ui/directionPad/Pad.js";

package/dist/demo/Demo.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-declare const Demo: React.FC;
-export { Demo };
-//# sourceMappingURL=Demo.d.ts.map

package/dist/demo/Demo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Demo.d.ts","sourceRoot":"","sources":["../../src/demo/Demo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAOjB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/demo/Demo.js

@@ -1,18 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Demo = void 0;
-const react_1 = __importDefault(require("react"));
-const Demo_module_scss_1 = __importDefault(require("./Demo.module.scss"));
-const Menu_1 = require("./Menu");
-const Main_1 = require("./Main");
-const componentsMap_1 = require("./componentsMap");
-const Demo = (props) => {
-    return (react_1.default.createElement("div", { className: Demo_module_scss_1.default.container },
-        react_1.default.createElement(Menu_1.Menu, { list: componentsMap_1.componentsMap }),
-        react_1.default.createElement(Main_1.Main, null)));
-};
-exports.Demo = Demo;
-//# sourceMappingURL=Demo.js.map

package/dist/demo/Demo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Demo.js","sourceRoot":"","sources":["../../src/demo/Demo.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,0EAAwC;AACxC,iCAA8B;AAC9B,iCAA8B;AAC9B,mDAAgD;AAEhD,MAAM,IAAI,GAAa,CAAC,KAAK,EAAE,EAAE;IAC7B,OAAO,CACH,uCAAK,SAAS,EAAE,0BAAM,CAAC,SAAS;QAC5B,8BAAC,WAAI,IAAC,IAAI,EAAE,6BAAa,GAAI;QAC7B,8BAAC,WAAI,OAAG,CACN,CACT,CAAC;AACN,CAAC,CAAC;AAEO,oBAAI"}

package/dist/demo/Demo.module.scss

@@ -1,4 +0,0 @@
-.container {
-    display: flex;
-    height: 100%;
-}

package/dist/demo/Main.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-declare const Main: React.FC;
-export { Main };
-//# sourceMappingURL=Main.d.ts.map

package/dist/demo/Main.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../src/demo/Main.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AA2CrD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EA6CjB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}