react-miui 0.15.8 → 0.17.0

package/src/demo/components/form/countries.const.ts

@@ -0,0 +1,201 @@
+// from: https://gist.github.com/kalinchernev/486393efcca01623b18d
+const countries = `Afghanistan
+Albania
+Algeria
+Andorra
+Angola
+Antigua & Deps
+Argentina
+Armenia
+Australia
+Austria
+Azerbaijan
+Bahamas
+Bahrain
+Bangladesh
+Barbados
+Belarus
+Belgium
+Belize
+Benin
+Bhutan
+Bolivia
+Bosnia Herzegovina
+Botswana
+Brazil
+Brunei
+Bulgaria
+Burkina
+Burundi
+Cambodia
+Cameroon
+Canada
+Cape Verde
+Central African Rep
+Chad
+Chile
+China
+Colombia
+Comoros
+Congo
+Congo {Democratic Rep}
+Costa Rica
+Croatia
+Cuba
+Cyprus
+Czech Republic
+Denmark
+Djibouti
+Dominica
+Dominican Republic
+East Timor
+Ecuador
+Egypt
+El Salvador
+Equatorial Guinea
+Eritrea
+Estonia
+Ethiopia
+Fiji
+Finland
+France
+Gabon
+Gambia
+Georgia
+Germany
+Ghana
+Greece
+Grenada
+Guatemala
+Guinea
+Guinea-Bissau
+Guyana
+Haiti
+Honduras
+Hungary
+Iceland
+India
+Indonesia
+Iran
+Iraq
+Ireland {Republic}
+Israel
+Italy
+Ivory Coast
+Jamaica
+Japan
+Jordan
+Kazakhstan
+Kenya
+Kiribati
+Korea North
+Korea South
+Kosovo
+Kuwait
+Kyrgyzstan
+Laos
+Latvia
+Lebanon
+Lesotho
+Liberia
+Libya
+Liechtenstein
+Lithuania
+Luxembourg
+Macedonia
+Madagascar
+Malawi
+Malaysia
+Maldives
+Mali
+Malta
+Marshall Islands
+Mauritania
+Mauritius
+Mexico
+Micronesia
+Moldova
+Monaco
+Mongolia
+Montenegro
+Morocco
+Mozambique
+Myanmar, {Burma}
+Namibia
+Nauru
+Nepal
+Netherlands
+New Zealand
+Nicaragua
+Niger
+Nigeria
+Norway
+Oman
+Pakistan
+Palau
+Panama
+Papua New Guinea
+Paraguay
+Peru
+Philippines
+Poland
+Portugal
+Qatar
+Romania
+Russian Federation
+Rwanda
+St Kitts & Nevis
+St Lucia
+Saint Vincent & the Grenadines
+Samoa
+San Marino
+Sao Tome & Principe
+Saudi Arabia
+Senegal
+Serbia
+Seychelles
+Sierra Leone
+Singapore
+Slovakia
+Slovenia
+Solomon Islands
+Somalia
+South Africa
+South Sudan
+Spain
+Sri Lanka
+Sudan
+Suriname
+Swaziland
+Sweden
+Switzerland
+Syria
+Taiwan
+Tajikistan
+Tanzania
+Thailand
+Togo
+Tonga
+Trinidad & Tobago
+Tunisia
+Turkey
+Turkmenistan
+Tuvalu
+Uganda
+Ukraine
+United Arab Emirates
+United Kingdom
+United States
+Uruguay
+Uzbekistan
+Vanuatu
+Vatican City
+Venezuela
+Vietnam
+Yemen
+Zambia
+Zimbabwe`.split("\n").map(s => s.trim());
+
+export {
+    countries,
+};

package/src/demo/components/layout/card/Card.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Card } from "../../../../components/layout/card/Card";
-import { Section } from "../../../../components/layout/section/Section";
+
+import { Card, Section } from "../../../../index.js";
 
 const CardDemo = () => {
     return (

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

@@ -1,8 +1,8 @@
 import React from "react";
+
 import Link from "next/link";
 
-import { Header, ICON, StickyHeader } from "../../../../index.js";
-import { HeaderIconAction } from "../../../../components/layout/header/HeaderIconAction";
+import { Header, ICON, StickyHeader, HeaderIconAction } from "../../../../index.js";
 
 const HeaderDemo = () => {
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers,react/no-array-index-key

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

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { Header, HeaderIconAction, ICON, StickyHeader } from "../../../../index.js";
+
 import styles from "./StickyHeader.module.scss";
 
 const LongContent: React.FC = () => {

package/src/demo/components/layout/list/Header.tsx

@@ -1,7 +1,6 @@
 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";
+
+import { List, Item, Header } from "../../../../index.js";
 
 const ListHeaderDemo = () => {
     return (

package/src/demo/components/layout/list/Inset.tsx

@@ -1,7 +1,6 @@
 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";
+
+import { List, Item, Header } from "../../../../index.js";
 
 const ListInsetDemo = () => {
     return (

package/src/demo/components/layout/list/ItemRatio.tsx

@@ -1,7 +1,6 @@
 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 { List, Item, ICON, Icon } from "../../../../index.js";
 
 const ItemRatioDemo = () => {
     return (

package/src/demo/components/layout/list/Label.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { List } from "../../../../components/layout/list/List";
-import { Item } from "../../../../components/layout/list/Item";
+
+import { List, Item } from "../../../../index.js";
 
 const Label = Item.Label;
 

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

@@ -1,7 +1,9 @@
 import React, { useCallback } from "react";
+
 import Link from "next/link";
 
 import { Item, List } from "../../../../index.js";
+
 import styles from "./List.Item.module.scss";
 
 const ListItemDemo = () => {

package/src/demo/components/layout/list/Selection.tsx

@@ -1,7 +1,6 @@
 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";
+
+import { List, Item, Header } from "../../../../index.js";
 
 const ListSelectionDemo = () => {
     return (

package/src/demo/components/layout/list/Value.tsx

@@ -1,8 +1,7 @@
 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 { List, Item, ICON, Icon } from "../../../../index.js";
+
 import styles from "./Value.module.scss";
 
 const { Label, Value } = Item;

package/src/demo/components/layout/section/Section.tsx

@@ -1,7 +1,6 @@
 import React from "react";
-import { Section } from "../../../../components/layout/section/Section.js";
-import { List } from "../../../../components/layout/list/List";
-import { Item } from "../../../../components/layout/list/Item";
+
+import { Section, List, Item } from "../../../../index.js";
 
 const SectionDemo = () => {
     return (

package/src/demo/components/layout/table/TableDemo.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { Table } from "../../../../components/layout/table/Table";
+
+import { Table } from "../../../../index.js";
 
 import styles from "./TableDemo.module.scss";
 

package/src/demo/components/ui/action/Action.tsx

@@ -1,12 +1,10 @@
 import React from "react";
+
 import Link from "next/link";
-import { Action } from "../../../../components/ui/action/Action";
-import { ICON } from "../../../../components/icons/Icon";
-import { StickyHeader } from "../../../../components/layout/header/StickyHeader";
-import { Header } from "../../../../components/layout/header/Header";
+
+import { Action, ICON, StickyHeader, Header, EqualActions } from "../../../../index.js";
 
 import styles from "./ActionDemo.module.scss";
-import { EqualActions } from "../../../../components/ui/action/EqualActions";
 
 const handleClick = () => { alert(1); };
 

package/src/demo/components/ui/button/ButtonDemo.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback } from "react";
+
 import { Button } from "../../../../index.js";
 
 const ButtonDemo = () => {

package/src/demo/components/ui/directionPad/Pad.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from "react";
-import { DirectionPad } from "../../../..";
+
+import { DirectionPad } from "../../../../index.js";
 
 const DirectionPadDemo: React.FC = (props) => {
     const [lastClick, setLastClick] = useState("<none>");

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from "react";
-import { Drawer } from "../../../../components/ui/drawer/Drawer";
+
+import { Drawer } from "../../../../index.js";
 
 interface Props {}
 

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

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { Icon, ICON, Item, List } from "../../../../index.js";
 
 const IconsDemo: React.FC = () => {

package/src/demo/components/ui/keyValue/KeyValue.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+import { Icon, ICON, KeyValue, Section } from "../../../../index.js";
+
+interface Props {}
+
+const items = [
+    {
+        key: "Turbo",
+        value: "100x",
+    },
+    {
+        key: "Turbo",
+        value: "100x",
+        icon: <Icon name={ICON.heart} />,
+        onClick: () => { alert(1); },
+    },
+    {
+        value: "99%",
+        icon: <Icon name={ICON.battery} />,
+    },
+    {
+        key: "4,25 V",
+        value: "99%",
+        icon: <Icon name={ICON.battery} />,
+    },
+    {
+        key: "Just key",
+    },
+    {
+        value: "Just value",
+    },
+    {
+        key: <>Multi line<br />key</>,
+    },
+    {
+        value: <>Multi line<br />value</>,
+    },
+];
+
+const KeyValueDemo: React.FC<Props> = (props) => {
+    return (
+        <Section variant={["vertical", "horizontal"]}>
+            <KeyValue items={items} valueFirst={true} cols={3} />
+        </Section>
+    );
+};
+
+export { KeyValueDemo };

package/src/demo/components/ui/message/Message.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Message } from "../../../../components/ui/message/Message";
+import { Message } from "../../../../index.js";
 
 interface Props {}
 

package/src/demo/components/ui/modal/Modal.tsx

@@ -1,12 +1,6 @@
 import React, { useCallback, useState } from "react";
-import { Modal } from "../../../../components/ui/modal/Modal";
-import { Button } from "../../../../components/ui/button/Button";
-import { Input } from "../../../../components/form/Input";
-import { Checkbox } from "../../../../components/form/Checkbox";
-import { Label } from "../../../../components/form/Label";
-import { ModalButtons } from "../../../../components/ui/modal/ModalButtons";
-import { List } from "../../../../components/layout/list/List";
-import { Item } from "../../../../components/layout/list/Item";
+
+import { Modal, Button, Input, Checkbox, Label, ModalButtons, List, Item } from "../../../../index.js";
 
 interface Props {}
 

package/src/demo/components/ui/pop/Pop.tsx

@@ -1,11 +1,6 @@
 import React, { useCallback, useState } from "react";
-import { Pop } from "../../../../components/ui/pop/Pop";
-import { Header } from "../../../../components/layout/header/Header";
-import { StickyHeader } from "../../../../components/layout/header/StickyHeader";
-import { HeaderIconAction } from "../../../../components/layout/header/HeaderIconAction";
-import { ICON } from "../../../../components/icons/Icon";
-import { PopOption } from "../../../../components/ui/pop/PopOption";
-import { Section } from "../../../../components/layout/section/Section";
+
+import { Pop, Header, StickyHeader, HeaderIconAction, ICON, Section } from "../../../../index.js";
 
 interface Props {}
 
@@ -39,9 +34,9 @@ const PopDemo: React.FC<Props> = () => {
         <>
             <HeaderIconAction icon={ICON.config} onClick={handleToggle} />
             <Pop anchor={"prev"} open={open} onClose={handleClose}>
-                <PopOption icon={ICON.heart} onClick={handleClick}>Add new list</PopOption>
-                <PopOption icon={ICON.trash} onClick={handleClick}>Remove empty lists</PopOption>
-                <PopOption onClick={handleClick}>Configure</PopOption>
+                <Pop.Option icon={ICON.heart} onClick={handleClick}>Add new list</Pop.Option>
+                <Pop.Option icon={ICON.trash} onClick={handleClick}>Remove empty lists</Pop.Option>
+                <Pop.Option onClick={handleClick}>Configure</Pop.Option>
             </Pop>
         </>
     );
@@ -50,15 +45,15 @@ const PopDemo: React.FC<Props> = () => {
         <>
             <HeaderIconAction icon={ICON.checkmark} onClick={handleLeftToggle} />
             <Pop anchor={"prev"} open={leftOpen} onClose={handleLeftClose}>
-                <PopOption icon={ICON.heart} onClick={handleClick}>Add new list</PopOption>
-                <PopOption icon={ICON.trash} onClick={handleClick}>Remove empty lists</PopOption>
-                <PopOption onClick={handleClick}>Configure</PopOption>
-                <PopOption icon={ICON.heart} onClick={handleClick}>Add new list</PopOption>
-                <PopOption icon={ICON.trash} onClick={handleClick}>Remove empty lists</PopOption>
-                <PopOption onClick={handleClick}>Configure</PopOption>
-                <PopOption icon={ICON.heart} onClick={handleClick}>Add new list</PopOption>
-                <PopOption icon={ICON.trash} onClick={handleClick}>Remove empty lists</PopOption>
-                <PopOption onClick={handleClick}>Configure</PopOption>
+                <Pop.Option icon={ICON.heart} onClick={handleClick}>Add new list</Pop.Option>
+                <Pop.Option icon={ICON.trash} onClick={handleClick}>Remove empty lists</Pop.Option>
+                <Pop.Option onClick={handleClick}>Configure</Pop.Option>
+                <Pop.Option icon={ICON.heart} onClick={handleClick}>Add new list</Pop.Option>
+                <Pop.Option icon={ICON.trash} onClick={handleClick}>Remove empty lists</Pop.Option>
+                <Pop.Option onClick={handleClick}>Configure</Pop.Option>
+                <Pop.Option icon={ICON.heart} onClick={handleClick}>Add new list</Pop.Option>
+                <Pop.Option icon={ICON.trash} onClick={handleClick}>Remove empty lists</Pop.Option>
+                <Pop.Option onClick={handleClick}>Configure</Pop.Option>
             </Pop>
         </>
     );

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

@@ -1,7 +1,6 @@
 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 { Stats, Header, StickyHeader } from "../../../../index.js";
 
 import styles from "./Stats.module.scss";
 

package/src/demo/components/ui/tabs/Tabs.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { Header } from "../../../../components/layout/header/Header";
-import { Selector } from "../../../../components/ui/tabs/Selector";
+
+import { Header, Selector } from "../../../../index.js";
 
 interface Props {}
 

package/src/demo/components/ui/toaster/Toaster.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from "react";
-import { useToaster } from "../../../../components/ui/toaster/Toaster";
-import { Button } from "../../../../components/ui/button/Button";
-import { Input } from "../../../../components/form/Input";
+
+import { useToaster, Button, Input } from "../../../../index.js";
 
 interface Props {}
 

package/src/demo/componentsMap.ts

@@ -1,52 +1,54 @@
-/* eslint-disable max-lines */
+/* eslint-disable max-lines, import/max-dependencies */
 import type { AnyComponent } from "../types";
-import { CheckboxDemo } from "./components/form/Checkbox";
+
+import { CheckboxDemo } from "./components/form/Checkbox.js";
 import {
     CenteredHeaderDemo,
     HeaderDemo,
     HeaderWithButtonsDemo,
     HeaderWithButtonsOnSideDemo, ToolbarVariantDemo,
-} from "./components/layout/header/Header";
+} from "./components/layout/header/Header.js";
 import {
     StickyColoredBg,
     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";
+} from "./components/layout/header/StickyHeader.js";
+import { ListItemDemo } from "./components/layout/list/List.Item.js";
+import { DirectionPadDemo } from "./components/ui/directionPad/Pad.js";
+import { IconsDemo } from "./components/ui/icons/Icons.js";
+import { ButtonDemo } from "./components/ui/button/ButtonDemo.js";
 import {
     ActionDemo,
     ActionLabelsOnBottom,
     ActionsDemo,
     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";
-import { SectionDemo } from "./components/layout/section/Section";
-import { CardDemo } from "./components/layout/card/Card";
-import { InputDemo } from "./components/form/Input";
-import { FormDemo } from "./components/form/Form";
-import { SearchDemo } from "./components/form/Search";
-import { LabelDemo } from "./components/form/Label";
-import { ToasterDemo } from "./components/ui/toaster/Toaster";
-import { ModalCenteredDemo, ModalDemo, ModalOptionsDemo } from "./components/ui/modal/Modal";
-import { ListInsetDemo } from "./components/layout/list/Inset";
-import { ListSelectionDemo } from "./components/layout/list/Selection";
-import { TabsDemo } from "./components/ui/tabs/Tabs";
-import { ChoiceDemo, ChoiceDemo2 } 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";
-import { SelectDemo } from "./components/form/Select";
-import { TableDemo } from "./components/layout/table/TableDemo";
+} from "./components/ui/action/Action.js";
+import { ToggleDemo } from "./components/form/Toggle.js";
+import { ItemRatioDemo } from "./components/layout/list/ItemRatio.js";
+import { ItemLabelDemo } from "./components/layout/list/Label.js";
+import { ListHeaderDemo } from "./components/layout/list/Header.js";
+import { ValueDemo } from "./components/layout/list/Value.js";
+import { SectionDemo } from "./components/layout/section/Section.js";
+import { CardDemo } from "./components/layout/card/Card.js";
+import { InputDemo } from "./components/form/Input.js";
+import { FormDemo } from "./components/form/Form.js";
+import { SearchDemo } from "./components/form/Search.js";
+import { LabelDemo } from "./components/form/Label.js";
+import { ToasterDemo } from "./components/ui/toaster/Toaster.js";
+import { ModalCenteredDemo, ModalDemo, ModalOptionsDemo } from "./components/ui/modal/Modal.js";
+import { ListInsetDemo } from "./components/layout/list/Inset.js";
+import { ListSelectionDemo } from "./components/layout/list/Selection.js";
+import { TabsDemo } from "./components/ui/tabs/Tabs.js";
+import { ChoiceDemo, ChoiceDemo2 } from "./components/form/Choice.js";
+import { MessageDemo } from "./components/ui/message/Message.js";
+import { PopDemo } from "./components/ui/pop/Pop.js";
+import { DrawerDemo } from "./components/ui/drawer/Drawer.js";
+import { StatsDarkDemo, StatsDemo } from "./components/ui/stats/Stats.js";
+import { SelectDemo } from "./components/form/Select.js";
+import { TableDemo } from "./components/layout/table/TableDemo.js";
+import { KeyValueDemo } from "./components/ui/keyValue/KeyValue.js";
 
 interface TheMap {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -236,6 +238,10 @@ const componentsMap: TheMap = {
             },
         },
     },
+    KeyValue: {
+        name: "Key Value blocks",
+        Component: KeyValueDemo,
+    },
     Icons: {
         name: "Icons",
         Component: IconsDemo,

package/src/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/max-dependencies */
 export * from "./components/form/choice/Choice.js";
 export * from "./components/form/Checkbox.js";
 export * from "./components/form/Input.js";
@@ -23,10 +24,12 @@ 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/keyValue/KeyValue.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/pop/PopOption.js";
 export * from "./components/ui/stats/Stats.js";
 
 export * from "./components/ui/tabs/Selector.js";