react-miui 0.11.0 → 0.12.0

package/src/demo/components/layout/header/StickyHeader.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
-import { Header, StickyHeader } from "../../../../index.js";
+import { Header, HeaderIconAction, ICON, StickyHeader } from "../../../../index.js";
+import styles from "./StickyHeader.module.scss";
 
 const LongContent: React.FC = () => {
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers,react/no-array-index-key
@@ -79,7 +80,32 @@ const StickyHeaderLeftCenterDemo = () => {
     );
 };
 
+const handleNoop = () => null;
+
+const StickyColoredBg = () => {
+    return (
+        <StickyHeader position={"top"}>
+            <Header
+                center={true}
+                variant={"colored"}
+                before={<HeaderIconAction icon={ICON.back} onClick={handleNoop} />}
+                after={"Text"}
+                className={styles.header}
+            >
+                Some text
+            </Header>
+            <StickyHeader.Content className={"miui-scrollbars"}>
+                <div className={styles.coloredBox}>
+                    To achieve this effect set <kbd>variant=colored</kbd> & apply these with className:<br />
+                    <pre>--custom-header-color: green;<br />--custom-text-color: white;</pre>
+                </div>
+                <LongContent />
+            </StickyHeader.Content>
+        </StickyHeader>
+    );
+};
+
 export {
     StickyHeaderDemo, StickyHeaderBottomDemo, StickyHeaderTopBottomDemo, StickyHeaderLeftDemo, StickyHeaderRightDemo,
-    StickyHeaderLeftCenterDemo,
+    StickyHeaderLeftCenterDemo, StickyColoredBg,
 };

package/src/demo/components/ui/drawer/Drawer.tsx

@@ -0,0 +1,28 @@
+import React, { useCallback, useState } from "react";
+import { Drawer } from "../../../../components/ui/drawer/Drawer";
+
+interface Props {}
+
+const DrawerDemo: React.FC<Props> = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const [open, setOpen] = useState(false);
+
+    const handleToggleOpen = useCallback(() => {
+        setOpen(p => !p);
+    }, []);
+
+    const handleClose = useCallback(() => {
+        setOpen(false);
+    }, []);
+
+    return (
+        <>
+            <Drawer isOpen={open} onClose={handleClose}>
+                Drawer content
+            </Drawer>
+            <button onClick={handleToggleOpen}>open drawer</button>
+        </>
+    );
+};
+
+export { DrawerDemo };

package/src/demo/components/ui/stats/Stats.module.scss

@@ -0,0 +1,29 @@
+.coloredBox {
+    height: 300px;
+    background: var(--green1-darker);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    color: white;
+    flex-direction: column;
+}
+
+.header {
+    --custom-header-color: var(--green1-darker);
+    --custom-text-color: white;
+}
+
+.header2 {
+    --custom-header-color: var(--active-bg);
+    --custom-text-color: white;
+}
+
+.coloredBox2 {
+    height: 300px;
+    background: var(--active-bg);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    color: white;
+    flex-direction: column;
+}

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,
@@ -42,6 +43,8 @@ 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
@@ -135,6 +138,10 @@ const componentsMap: TheMap = {
                         name: "On left centered",
                         Component: StickyHeaderLeftCenterDemo,
                     },
+                    StickyColoredBg: {
+                        name: "With colored background",
+                        Component: StickyColoredBg,
+                    },
                 },
             },
         },
@@ -207,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,
@@ -219,6 +236,10 @@ const componentsMap: TheMap = {
         name: "Message",
         Component: MessageDemo,
     },
+    Drawer: {
+        name: "Drawer",
+        Component: DrawerDemo,
+    },
     Modal: {
         name: "Modal",
         Component: ModalDemo,

package/src/global.scss

@@ -68,6 +68,9 @@
     --grey1: #737373;
 
     --focus-color: #dcaf00;
+
+    --scrollbars-thumb: var(--grey1);
+    --scrollbars-bg: transparent;
 }
 
 *:focus {

package/src/index.ts

@@ -20,6 +20,7 @@ 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";

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/dist/components/ui/pop/HandleEsc.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HandleEsc.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/pop/HandleEsc.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,KAAK;IACX,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAU9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/ui/pop/HandleEsc.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HandleEsc.js","sourceRoot":"","sources":["../../../../src/components/ui/pop/HandleEsc.tsx"],"names":[],"mappings":";;;AACA,yCAAwC;AACxC,iCAAkC;AAMlC,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;IACzC,MAAM,CAAC,OAAO,CAAC,GAAG,uBAAW,CAAC,QAAQ,CAAC,CAAC;IAExC,iBAAS,CAAC,GAAG,EAAE;QACX,IAAI,OAAO,EAAE;YACT,KAAK,CAAC,OAAO,EAAE,CAAC;SACnB;IACL,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEO,8BAAS"}

package/esm/components/ui/pop/HandleEsc.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HandleEsc.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/pop/HandleEsc.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,KAAK;IACX,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAU9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/esm/components/ui/pop/HandleEsc.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HandleEsc.js","sourceRoot":"","sources":["../../../../src/components/ui/pop/HandleEsc.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlC,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;IACzC,MAAM,CAAC,OAAO,CAAC,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,OAAO,EAAE;YACT,KAAK,CAAC,OAAO,EAAE,CAAC;SACnB;IACL,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}