react-miui 0.4.3 → 0.6.0

package/src/demo/componentsMap.ts

@@ -27,6 +27,12 @@ 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";
 
 interface TheMap {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -40,17 +46,35 @@ 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,
+            },
+        },
     },
     Header: {
         name: "Header",
@@ -146,6 +170,14 @@ const componentsMap: TheMap = {
             },
         },
     },
+    Section: {
+        name: "Section",
+        Component: SectionDemo,
+    },
+    Card: {
+        name: "Card",
+        Component: CardDemo,
+    },
     Pad: {
         name: "Direction pad",
         Component: DirectionPadDemo,

package/src/global.scss

@@ -2,8 +2,11 @@
 :root {
     --ratio-dimensions: 3;
     --ratio-border:     2.666666;
+    // font is calculated from top to bottom
     --ratio-font:       1.666666;
 
+    --background: white;
+
     --main-color: #008ad2; // used
     --main-color-alt: #006AA9;
 

package/src/index.ts

@@ -1,13 +1,18 @@
 export * from "./components/form/Checkbox.js";
+export * from "./components/form/Input.js";
+export * from "./components/form/Label.js";
 export * from "./components/form/Toggle.js";
 
 export * from "./components/icons/Icon.js";
 
+export * from "./components/layout/card/Card.js";
 export * from "./components/layout/header/Header.js";
 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";

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,