react-miui 0.1.0 → 0.2.0

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/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/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,96 @@ const HeaderDemo = () => {
     );
 };
 
-export { HeaderDemo };
+const CenteredHeaderDemo = () => {
+    return (
+        <>
+            <Header center={true}>Messages</Header>
+            <div>
+                Header text is centered
+            </div>
+        </>
+    );
+};
+
+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, HeaderWithButtonsDemo, HeaderWithButtonsOnSideDemo };

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.module.scss

@@ -0,0 +1,4 @@
+.row {
+    display: flex;
+    justify-content: space-between;
+}

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

@@ -1,23 +1,24 @@
 import React from "react";
-import { Icon, ICON } from "../../../../index.js";
+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 (
-            <li key={value}>
-                <Icon name={value} />
-                {value}
-            </li>
+            <Item key={value}>
+                <div className={styles.row}>
+                    {value}
+                    <Icon name={value} />
+                </div>
+            </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,
+} from "./components/layout/header/Header";
 import {
     StickyHeaderBottomDemo,
     StickyHeaderDemo, StickyHeaderLeftCenterDemo, StickyHeaderLeftDemo, StickyHeaderRightDemo,
@@ -42,29 +47,45 @@ const componentsMap: TheMap = {
         name: "Header",
         Component: HeaderDemo,
         children: {
-            Sticky: {
-                name: "Sticky header",
-                Component: StickyHeaderDemo,
-            },
-            StickyBottom: {
-                name: "On bottom",
-                Component: StickyHeaderBottomDemo,
+            Centered: {
+                name: "Centered",
+                Component: CenteredHeaderDemo,
             },
-            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 +105,8 @@ const componentsMap: TheMap = {
                 name: "Actions on left header",
                 Component: ActionsOnLeft,
             },
-            Actions: {
-                name: "Actions (wrapper)",
+            EqualActions: {
+                name: "EqualActions (wrapper)",
                 Component: ActionsDemo,
             },
         },

package/src/global.scss

@@ -31,12 +31,21 @@
     --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;
 }

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,