react-miui 0.9.5 → 0.12.0

package/src/demo/components/ui/stats/Stats.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Stats } from "../../../../components/ui/stats/Stats";
+import { Header } from "../../../../components/layout/header/Header";
+import { StickyHeader } from "../../../../components/layout/header/StickyHeader";
+
+import styles from "./Stats.module.scss";
+
+interface Props {}
+
+const stats = [
+    {
+        label: "Temperature",
+        value: "32°C",
+    },
+    {
+        label: "Used",
+        value: "320.3 mAh",
+    },
+    {
+        label: "Used for",
+        value: "14h 32m",
+    },
+];
+
+const StatsDemo: React.FC<Props> = (props) => {
+    return (
+        <StickyHeader position={"top"}>
+            <Header
+                center={true}
+                variant={"colored"}
+                className={styles.header}
+            >
+                Battery
+            </Header>
+            <StickyHeader.Content className={"miui-scrollbars"}>
+                <div className={styles.coloredBox}>
+                    <Stats stats={stats} />
+                </div>
+            </StickyHeader.Content>
+        </StickyHeader>
+    );
+};
+
+const StatsDarkDemo = () => (
+    <StickyHeader position={"top"}>
+        <Header
+            center={true}
+            variant={"colored"}
+            className={styles.header2}
+        >
+            Battery
+        </Header>
+        <StickyHeader.Content className={"miui-scrollbars"}>
+            <div className={styles.coloredBox2}>
+                <Stats stats={stats} variant={"dark"} />
+            </div>
+        </StickyHeader.Content>
+    </StickyHeader>
+);
+
+export { StatsDemo, StatsDarkDemo };

package/src/demo/componentsMap.ts

@@ -8,6 +8,7 @@ import {
     HeaderWithButtonsOnSideDemo, ToolbarVariantDemo,
 } from "./components/layout/header/Header";
 import {
+    StickyColoredBg,
     StickyHeaderBottomDemo,
     StickyHeaderDemo, StickyHeaderLeftCenterDemo, StickyHeaderLeftDemo, StickyHeaderRightDemo,
     StickyHeaderTopBottomDemo,
@@ -40,6 +41,10 @@ import { ListInsetDemo } from "./components/layout/list/Inset";
 import { ListSelectionDemo } from "./components/layout/list/Selection";
 import { TabsDemo } from "./components/ui/tabs/Tabs";
 import { ChoiceDemo } from "./components/form/Choice";
+import { MessageDemo } from "./components/ui/message/Message";
+import { PopDemo } from "./components/ui/pop/Pop";
+import { DrawerDemo } from "./components/ui/drawer/Drawer";
+import { StatsDarkDemo, StatsDemo } from "./components/ui/stats/Stats";
 
 interface TheMap {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -133,6 +138,10 @@ const componentsMap: TheMap = {
                         name: "On left centered",
                         Component: StickyHeaderLeftCenterDemo,
                     },
+                    StickyColoredBg: {
+                        name: "With colored background",
+                        Component: StickyColoredBg,
+                    },
                 },
             },
         },
@@ -205,6 +214,16 @@ const componentsMap: TheMap = {
         name: "Direction pad",
         Component: DirectionPadDemo,
     },
+    Stats: {
+        name: "Stats",
+        Component: StatsDemo,
+        children: {
+            DarkOnLight: {
+                name: "Dark on light",
+                Component: StatsDarkDemo,
+            },
+        },
+    },
     Icons: {
         name: "Icons",
         Component: IconsDemo,
@@ -213,6 +232,14 @@ const componentsMap: TheMap = {
         name: "Toaster",
         Component: ToasterDemo,
     },
+    Message: {
+        name: "Message",
+        Component: MessageDemo,
+    },
+    Drawer: {
+        name: "Drawer",
+        Component: DrawerDemo,
+    },
     Modal: {
         name: "Modal",
         Component: ModalDemo,
@@ -227,6 +254,10 @@ const componentsMap: TheMap = {
             },
         },
     },
+    Pop: {
+        name: "Pop up menu",
+        Component: PopDemo,
+    },
 };
 
 export {

package/src/global.scss

@@ -27,6 +27,8 @@
     --text: #323232;
     --sub: #959595;
 
+    --pop-text: #666;
+
     --toolbar-border: #ababab;
     --toolbar-bg: #f8f8f8;
     --modal-bg: #f7f7f7;
@@ -47,6 +49,8 @@
 
     // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
     --blue1: #038bf4;
+    --blue2: #b7d6f5;
+    --blue3: #dbe6ff;
     --orange1: #ff7200;
     --orange1-darker: #cc5b00;
     --purple1: #7357e8;
@@ -54,10 +58,19 @@
     --green1-darker: #38af2f;
     --pink1: #ff388f;
     --red1: #ea2700;
+    --yellow1: #ffde9d;
+    --yellow2: #e4a429;
+    --yellow3: #fff5db;
+    --pinky1: #f5c0b7;
+    --pinky2: #e07b67;
+    --pinky3: #ffe1db;
 
     --grey1: #737373;
 
     --focus-color: #dcaf00;
+
+    --scrollbars-thumb: var(--grey1);
+    --scrollbars-bg: transparent;
 }
 
 *:focus {

package/src/index.ts

@@ -20,7 +20,10 @@ 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";
+export * from "./components/ui/drawer/Drawer.js";
+export * from "./components/ui/message/Message.js";
 export * from "./components/ui/modal/Modal.js";
 export * from "./components/ui/modal/ModalButtons.js";
+export * from "./components/ui/pop/Pop.js";
 export * from "./components/ui/tabs/Selector.js";
 export * from "./components/ui/toaster/Toaster.js";

package/src/pages/_app.tsx

@@ -4,6 +4,7 @@ import type { AppProps } from "next/app";
 
 import "../global.scss";
 import "../demo-global.scss";
+import "../scrollbars.scss";
 
 const MyApp = ({ Component, pageProps }: AppProps) => (
     <>

package/src/scrollbars.scss

@@ -0,0 +1,22 @@
+.miui-scrollbars {
+    overflow-y: auto;
+    scrollbar-color: var(--scrollbars-thumb) var(--scrollbars-bg);
+    scrollbar-width: thin !important;
+
+    &::-webkit-scrollbar {
+        width: 6px;
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb:vertical {
+        background: var(--scrollbars-thumb);
+        background-clip: padding-box;
+        border: 2px solid var(--scrollbars-bg);
+        min-height: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb:vertical:active {
+        background: var(--scrollbars-thumb);
+        border: 2px solid var(--scrollbars-bg);
+    }
+}

package/src/utils/useKeyPress.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+const useKeyPress = (targetKey: string) => {
+    const [keyPressed, setKeyPressed] = useState(false);
+
+    useEffect(() => {
+        const handleKeyDown = ({ key }: KeyboardEvent): void => {
+            if (key === targetKey) {
+                setKeyPressed(true);
+            }
+        };
+
+        const handleKeyUp = ({ key }: KeyboardEvent): void => {
+            if (key === targetKey) {
+                setKeyPressed(false);
+            }
+        };
+
+        window.addEventListener("keydown", handleKeyDown);
+        window.addEventListener("keyup", handleKeyUp);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+            window.removeEventListener("keyup", handleKeyUp);
+        };
+    }, [targetKey]);
+
+    return keyPressed;
+};
+
+export {
+    useKeyPress,
+};

package/ATTRIBUTION.md

@@ -1,10 +0,0 @@
-Icons made by
-- [Freepik][1]
-
-from [www.flaticon.com][999].
-
-Icons used:
-- https://www.flaticon.com/free-icon/check-mark_64484
-
-[1]: https://www.freepik.com
-[999]: https://www.flaticon.com/