react-miui 0.0.1-beta.8 → 0.2.0

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

@@ -0,0 +1,25 @@
+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>
+        );
+    });
+
+    return (
+        <List>
+            {icons}
+        </List>
+    );
+};
+
+export { IconsDemo };

package/src/demo/componentsMap.ts

@@ -0,0 +1,135 @@
+import type { AnyComponent } from "../types";
+import { CheckboxDemo } from "./components/form/Checkbox";
+import {
+    CenteredHeaderDemo,
+    HeaderDemo,
+    HeaderWithButtonsDemo,
+    HeaderWithButtonsOnSideDemo,
+} from "./components/layout/header/Header";
+import {
+    StickyHeaderBottomDemo,
+    StickyHeaderDemo, StickyHeaderLeftCenterDemo, StickyHeaderLeftDemo, StickyHeaderRightDemo,
+    StickyHeaderTopBottomDemo,
+} from "./components/layout/header/StickyHeader";
+import { ListItemDemo } from "./components/layout/list/List.Item";
+import { DirectionPadDemo } from "./components/ui/directionPad/Pad";
+import { IconsDemo } from "./components/ui/icons/Icons";
+import { ButtonDemo } from "./components/ui/button/ButtonDemo";
+import {
+    ActionDemo,
+    ActionLabelsOnBottom,
+    ActionsDemo,
+    ActionsOnBottom,
+    ActionsOnLeft,
+} from "./components/ui/action/Action";
+
+interface TheMap {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    [key: string]: TheMapItem;
+}
+
+interface TheMapItem {
+    name: string;
+    Component: AnyComponent;
+    children?: TheMap;
+}
+
+const componentsMap: TheMap = {
+    Button: {
+        name: "Button",
+        Component: ButtonDemo,
+    },
+    Checkbox: {
+        name: "Checkbox",
+        Component: CheckboxDemo,
+    },
+    Header: {
+        name: "Header",
+        Component: HeaderDemo,
+        children: {
+            Centered: {
+                name: "Centered",
+                Component: CenteredHeaderDemo,
+            },
+            WithButtons: {
+                name: "With buttons",
+                Component: HeaderWithButtonsDemo,
+                children: {
+                    OnLeft: {
+                        name: "On the side",
+                        Component: HeaderWithButtonsOnSideDemo,
+                    },
+                },
+            },
+            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,
+                    },
+                },
+            },
+        },
+    },
+    Action: {
+        name: "Action",
+        Component: ActionDemo,
+        children: {
+            ActionOnBottom: {
+                name: "Actions on header",
+                Component: ActionsOnBottom,
+            },
+            ActionLabelsOnBottom: {
+                name: "Actions with labels on header",
+                Component: ActionLabelsOnBottom,
+            },
+            ActionOnLeft: {
+                name: "Actions on left header",
+                Component: ActionsOnLeft,
+            },
+            EqualActions: {
+                name: "EqualActions (wrapper)",
+                Component: ActionsDemo,
+            },
+        },
+    },
+    ListItem: {
+        name: "List & Item",
+        Component: ListItemDemo,
+    },
+    Pad: {
+        name: "Direction pad",
+        Component: DirectionPadDemo,
+    },
+    Icons: {
+        name: "Icons",
+        Component: IconsDemo,
+    },
+};
+
+export {
+    componentsMap,
+};
+
+export type {
+    TheMap,
+    TheMapItem,
+};

package/src/demo/utils/makeVariants.ts

@@ -0,0 +1,13 @@
+const makeVariants = <T extends string>(variants: T | T[] | undefined): T[] => {
+    if (!variants) {
+        return [];
+    }
+    if (typeof variants === "string") {
+        return variants.split(" ").filter(Boolean) as T[];
+    }
+    return variants;
+};
+
+export {
+    makeVariants,
+};

package/src/global.scss

@@ -1,9 +1,9 @@
-// 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;
 
@@ -18,17 +18,34 @@
     --header-bg: #efeff0;
     --header-text: #484848;
 
-    --toolbar--border: #ababab;
-    --toolbar--bg: #f8f8f8;
+    --toolbar-border: #ababab;
+    --toolbarf-bg: #f8f8f8;
+
+    // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
+    --blue1: #038bf4;
+    --orange1: #ff7200;
+    --purple1: #7357e8;
+    --green1: #3ec234;
+    --green1-darker: #38af2f;
+    --pink1: #ff388f;
+    --red1: #ea2700;
+
+    --grey1: #737373;
+
+    --focus-color: #dcaf00;
+}
 
-    --color1: #00aeeb;
-    --color2: #9d6ee5;
-    --color3: #00c293;
-    --color4: #ff5290;
-    --color5: #ff7259;
-    --color6: #4083f7;
+*: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;
 }

package/src/index.ts

@@ -1 +1,11 @@
-export * from "./components/form/Checkbox";
+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";

package/src/pages/_app.tsx

@@ -1,11 +1,17 @@
 import React from "react";
+import Head from "next/head";
 import type { AppProps } from "next/app";
 
 import "../global.scss";
 import "../demo-global.scss";
 
 const MyApp = ({ Component, pageProps }: AppProps) => (
-    <Component {...pageProps} />
+    <>
+        <Head>
+            <title>MIUI in React</title>
+        </Head>
+        <Component {...pageProps} />
+    </>
 );
 
 export default MyApp;

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

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

package/.postcssrc

@@ -1,9 +0,0 @@
-{
-    "modules": true,
-    "plugins": {
-        "postcss-modules": {
-            "generateScopedName": "_[name]__[local]"
-        },
-        "postcss-nested": true
-    }
-}

package/src/pages/index.html

@@ -1,14 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Library demo</title>
-</head>
-<body>
-<div id="root"></div>
-<script src="./index.tsx"></script>
-</body>
-</html>