react-miui 0.16.0 → 0.17.0

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";

package/src/pages/_app.tsx

@@ -1,5 +1,7 @@
 import React from "react";
+
 import Head from "next/head";
+
 import type { AppProps } from "next/app";
 
 import "../global.scss";
@@ -15,4 +17,5 @@ const MyApp = ({ Component, pageProps }: AppProps) => (
     </>
 );
 
+// eslint-disable-next-line import/no-default-export
 export default MyApp;

package/src/pages/index.tsx

@@ -1,8 +1,10 @@
 import React from "react";
-import { Demo } from "../demo/Demo";
+
+import { Demo } from "../demo/Demo.js";
 
 const IndexComp = () => (
     <Demo />
 );
 
+// eslint-disable-next-line import/no-default-export
 export default IndexComp;

package/src/pages/react-miui.tsx

@@ -9,4 +9,5 @@ const ReactMiuiPage = () => {
     );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default ReactMiuiPage;

package/src/utils/index.ts

@@ -1,4 +1,4 @@
-export * from "./makeVariants";
-export * from "./toObjectValue";
-export * from "./useKeyPress";
-export * from "./useRandomId";
+export * from "./makeVariants.js";
+export * from "./toObjectValue.js";
+export * from "./useKeyPress.js";
+export * from "./useRandomId.js";

package/babel.config.js

@@ -1,33 +0,0 @@
-const path = require("path");
-const fs = require("fs");
-
-module.exports = {
-    presets: ["next/babel"],
-    plugins: [
-        [
-            "module-resolver",
-            {
-                extensions: [".js", ".jsx", ".es", ".es6", ".mjs", "ts", "tsx"],
-                resolvePath(sourcePath, currentFile, opts) {
-                    if (!sourcePath.startsWith("./") && !sourcePath.startsWith("../")) {
-                        return sourcePath;
-                    }
-
-                    if (sourcePath.endsWith(".js")) {
-                        const relPath = path.resolve(path.dirname(currentFile), sourcePath);
-                        const tsPath = relPath.replace(/\.js$/, ".ts");
-                        const tsxPath = relPath.replace(/\.js$/, ".tsx");
-                        if (fs.existsSync(tsPath)) {
-                            return tsPath;
-                        }
-                        if (fs.existsSync(tsxPath)) {
-                            return tsxPath;
-                        }
-                    }
-
-                    return sourcePath;
-                },
-            },
-        ],
-    ],
-};