react-miui 0.5.2 → 0.9.0

package/src/demo/componentsMap.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import type { AnyComponent } from "../types";
 import { CheckboxDemo } from "./components/form/Checkbox";
 import {
@@ -29,6 +30,16 @@ 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 } from "./components/form/Choice";
 
 interface TheMap {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -42,17 +53,39 @@ interface TheMapItem {
 }
 
 const componentsMap: TheMap = {
-    Button: {
-        name: "Button",
-        Component: ButtonDemo,
-    },
-    Checkbox: {
-        name: "Checkbox",
-        Component: CheckboxDemo,
-    },
-    Toggle: {
-        name: "Toggle",
-        Component: ToggleDemo,
+    Form: {
+        name: "Form",
+        Component: FormDemo,
+        children: {
+            Input: {
+                name: "Input",
+                Component: InputDemo,
+            },
+            Label: {
+                name: "Label",
+                Component: LabelDemo,
+            },
+            Search: {
+                name: "Search",
+                Component: SearchDemo,
+            },
+            Button: {
+                name: "Button",
+                Component: ButtonDemo,
+            },
+            Checkbox: {
+                name: "Checkbox",
+                Component: CheckboxDemo,
+            },
+            Toggle: {
+                name: "Toggle",
+                Component: ToggleDemo,
+            },
+            Choice: {
+                name: "Choice",
+                Component: ChoiceDemo,
+            },
+        },
     },
     Header: {
         name: "Header",
@@ -126,6 +159,10 @@ const componentsMap: TheMap = {
             },
         },
     },
+    Tabs: {
+        name: "Tabs",
+        Component: TabsDemo,
+    },
     ListItem: {
         name: "List & Item",
         Component: ListItemDemo,
@@ -138,6 +175,14 @@ const componentsMap: TheMap = {
                 name: "Header",
                 Component: ListHeaderDemo,
             },
+            Inset: {
+                name: "Inset",
+                Component: ListInsetDemo,
+            },
+            Selection: {
+                name: "Selection",
+                Component: ListSelectionDemo,
+            },
             Label: {
                 name: "Label",
                 Component: ItemLabelDemo,
@@ -164,6 +209,24 @@ const componentsMap: TheMap = {
         name: "Icons",
         Component: IconsDemo,
     },
+    Toaster: {
+        name: "Toaster",
+        Component: ToasterDemo,
+    },
+    Modal: {
+        name: "Modal",
+        Component: ModalDemo,
+        children: {
+            Centered: {
+                name: "Centered & smaller",
+                Component: ModalCenteredDemo,
+            },
+            WithOptions: {
+                name: "With options to pick",
+                Component: ModalOptionsDemo,
+            },
+        },
+    },
 };
 
 export {

package/src/global.scss

@@ -2,6 +2,7 @@
 :root {
     --ratio-dimensions: 3;
     --ratio-border:     2.666666;
+    // font is calculated from top to bottom
     --ratio-font:       1.666666;
 
     --background: white;
@@ -27,6 +28,18 @@
 
     --toolbar-border: #ababab;
     --toolbar-bg: #f8f8f8;
+    --modal-bg: #f7f7f7;
+    --modal-button-bg: #f8f8f8;
+    --modal-button-border: #c2c2c2;
+
+    --choice-bg: #ffffff;
+    --choice-text: #999999;
+    --choice-active-bg: #f3f3f3;
+    --choice-active-text: #313131;
+    --choice-border: #cfcfcf;
+
+    --selector-text: #606060;
+    --selector-active: var(--main-color);
 
     // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
     --blue1: #038bf4;

package/src/index.ts

@@ -1,4 +1,8 @@
+export * from "./components/form/choice/Choice.js";
 export * from "./components/form/Checkbox.js";
+export * from "./components/form/Input.js";
+export * from "./components/form/Label.js";
+export * from "./components/form/TextArea.js";
 export * from "./components/form/Toggle.js";
 
 export * from "./components/icons/Icon.js";
@@ -9,9 +13,14 @@ export * from "./components/layout/header/HeaderIconAction.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/layout/section/SearchContainer.js";
 export * from "./components/layout/section/Section.js";
 
 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/modal/Modal.js";
+export * from "./components/ui/modal/ModalButtons.js";
+export * from "./components/ui/tabs/Selector.js";
+export * from "./components/ui/toaster/Toaster.js";

package/src/types/form.ts

@@ -0,0 +1,7 @@
+interface ObjectValue { value: string; label: string }
+type Value = string | ObjectValue;
+
+export type {
+    ObjectValue,
+    Value,
+};

package/src/types.ts

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

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./makeVariants";
+export * from "./toObjectValue";

package/src/utils/toObjectValue.ts

@@ -0,0 +1,9 @@
+import type { ObjectValue, Value } from "../types/form";
+
+const toObjectValue = (s: Value): ObjectValue => {
+    return typeof s === "string" ? { value: s, label: s } : s;
+};
+
+export {
+    toObjectValue,
+};