react-miui 0.1.0 → 0.4.1

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

@@ -1,11 +1,18 @@
 import React from "react";
+import { Header } from "./Header";
 
 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/EqualActions.tsx

@@ -2,11 +2,16 @@ import React from "react";
 import { Action } from "./Action";
 
 import styles from "./EqualActions.module.scss";
+import classnames from "classnames";
 
-const EqualActions: React.FC = (props) => {
+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 Actions must be an Action component");
+            throw new TypeError("Every child of EqualActions must be an Action component");
         }
     });
 
@@ -16,7 +21,7 @@ const EqualActions: React.FC = (props) => {
     } as React.CSSProperties;
 
     return (
-        <div className={styles.actions} style={style}>
+        <div className={classnames(styles.actions, props.className)} style={style}>
             {props.children}
         </div>
     );

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,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/action/Action.tsx

@@ -26,7 +26,7 @@ const ActionDemo: React.FC = () => {
                 <Action icon={ICON.checkmark} onClick={handleClick} /> - onClick action
             </div>
             <div>
-                <Action icon={ICON.checkmark} onClick={handleClick} label={"Pineapple"} /> - onClick action
+                <Action icon={ICON.checkmark} onClick={handleClick} label={"Pineapple"} /> - onClick action with label
             </div>
         </>
     );
@@ -94,9 +94,9 @@ const ActionLabelsOnBottom = () => {
 const ActionsDemo = () => {
     return (
         <div>
-            To make every action take the same amount of horizontal space you need to wrap every Action with Actions
-            wrapper. Some components (like Header) will do that automatically for you. If you need to use Actions
-            outside of such components - manually wrap them with Actions.
+            To make every action take the same amount of horizontal space you need to wrap every Action with
+            EqualActions wrapper. Some components (like Header) will do that automatically for you. If you need to use
+            Actions outside of such components - manually wrap them with EqualActions.
 
             <div>
                 <EqualActions>

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

@@ -1,23 +1,20 @@
 import React from "react";
-import { Icon, ICON } from "../../../../index.js";
+import { Icon, ICON, Item, List } from "../../../../index.js";
 
 const IconsDemo: React.FC = () => {
     const icons = Object.values(ICON).map((value) => {
         return (
-            <li key={value}>
-                <Icon name={value} />
+            <Item key={value} ratio={"1/"}>
                 {value}
-            </li>
+                <Icon name={value} />
+            </Item>
         );
     });
 
     return (
-        <div>
-            Icons:
-            <ul>
-                {icons}
-            </ul>
-        </div>
+        <List>
+            {icons}
+        </List>
     );
 };
 

package/src/demo/componentsMap.ts

@@ -1,6 +1,11 @@
 import type { AnyComponent } from "../types";
 import { CheckboxDemo } from "./components/form/Checkbox";
-import { HeaderDemo } from "./components/layout/header/Header";
+import {
+    CenteredHeaderDemo,
+    HeaderDemo,
+    HeaderWithButtonsDemo,
+    HeaderWithButtonsOnSideDemo, ToolbarVariantDemo,
+} from "./components/layout/header/Header";
 import {
     StickyHeaderBottomDemo,
     StickyHeaderDemo, StickyHeaderLeftCenterDemo, StickyHeaderLeftDemo, StickyHeaderRightDemo,
@@ -17,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
@@ -38,33 +48,57 @@ const componentsMap: TheMap = {
         name: "Checkbox",
         Component: CheckboxDemo,
     },
+    Toggle: {
+        name: "Toggle",
+        Component: ToggleDemo,
+    },
     Header: {
         name: "Header",
         Component: HeaderDemo,
         children: {
-            Sticky: {
-                name: "Sticky header",
-                Component: StickyHeaderDemo,
+            Centered: {
+                name: "Centered",
+                Component: CenteredHeaderDemo,
             },
-            StickyBottom: {
-                name: "On bottom",
-                Component: StickyHeaderBottomDemo,
+            Toolbar: {
+                name: "Toolbar",
+                Component: ToolbarVariantDemo,
             },
-            StickyTopBottom: {
-                name: "On top & bottom",
-                Component: StickyHeaderTopBottomDemo,
+            WithButtons: {
+                name: "With buttons",
+                Component: HeaderWithButtonsDemo,
+                children: {
+                    OnLeft: {
+                        name: "On the side",
+                        Component: HeaderWithButtonsOnSideDemo,
+                    },
+                },
             },
-            StickyLeft: {
-                name: "On left",
-                Component: StickyHeaderLeftDemo,
-            },
-            StickyRight: {
-                name: "On right",
-                Component: StickyHeaderRightDemo,
-            },
-            StickyLeftCentered: {
-                name: "On left centered",
-                Component: StickyHeaderLeftCenterDemo,
+            Sticky: {
+                name: "Sticky",
+                Component: StickyHeaderDemo,
+                children: {
+                    StickyBottom: {
+                        name: "On bottom",
+                        Component: StickyHeaderBottomDemo,
+                    },
+                    StickyTopBottom: {
+                        name: "On top & bottom",
+                        Component: StickyHeaderTopBottomDemo,
+                    },
+                    StickyLeft: {
+                        name: "On left",
+                        Component: StickyHeaderLeftDemo,
+                    },
+                    StickyRight: {
+                        name: "On right",
+                        Component: StickyHeaderRightDemo,
+                    },
+                    StickyLeftCentered: {
+                        name: "On left centered",
+                        Component: StickyHeaderLeftCenterDemo,
+                    },
+                },
             },
         },
     },
@@ -84,8 +118,8 @@ const componentsMap: TheMap = {
                 name: "Actions on left header",
                 Component: ActionsOnLeft,
             },
-            Actions: {
-                name: "Actions (wrapper)",
+            EqualActions: {
+                name: "EqualActions (wrapper)",
                 Component: ActionsDemo,
             },
         },
@@ -93,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;
@@ -31,12 +37,22 @@
     --red1: #ea2700;
 
     --grey1: #737373;
+
+    --focus-color: #dcaf00;
+}
+
+*:focus {
+    outline: none!important;
 }
 
-*:focus { // @TODO take care of focus
+*: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/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/src/pages/react-miui.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const ReactMiuiPage = () => {
+    // @TODO nicer UI, add back button etc
+    return (
+        <div>
+            Hi. This is an example page to demonstrate application level routing.
+        </div>
+    );
+};
+
+export default ReactMiuiPage;

package/src/types.ts

@@ -1,6 +1,6 @@
 import type React from "react";
 
-type AnyComponent = React.ComponentClass | React.FC;
+type AnyComponent = React.ComponentClass | React.FC | React.VFC;
 
 export type {
     AnyComponent,

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