react-miui 0.4.2 → 0.5.2

package/esm/components/ui/button/Button.js

@@ -1,14 +1,14 @@
 import React from "react";
 import classnames from "classnames";
 import styles from "./Button.module.scss";
-import { makeVariants } from "../../../demo/utils/makeVariants.js";
-const Button = (props) => {
+import { makeVariants } from "../../../utils/makeVariants.js";
+const Button = ({ className, children, ...props }) => {
     const variants = makeVariants(props.variant);
     const cls = classnames(styles.btn, {
         [styles["btn--inline"]]: variants.includes("inline"),
         [styles["btn--outline"]]: variants.includes("outline"),
-    });
-    return (React.createElement("button", { className: cls, disabled: props.disabled }, props.children));
+    }, className);
+    return (React.createElement("button", { ...props, className: cls, disabled: props.disabled }, children));
 };
 export { Button };
 //# sourceMappingURL=Button.js.map

package/esm/components/ui/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAOnE,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAE7C,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE;QAC/B,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;QACpD,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC;KACzD,CAAC,CAAC;IAEH,OAAO,CACH,gCAAQ,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAG,KAAK,CAAC,QAAQ,CAAU,CAC9E,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAM9D,MAAM,MAAM,GAAoE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAClH,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAE7C,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE;QAC/B,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;QACpD,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC;KACzD,EAAE,SAAS,CAAC,CAAC;IAEd,OAAO,CACH,mCACQ,KAAK,EACT,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAC1B,QAAQ,CACD,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/global.scss

@@ -4,6 +4,8 @@
     --ratio-border:     2.666666;
     --ratio-font:       1.666666;
 
+    --background: white;
+
     --main-color: #008ad2; // used
     --main-color-alt: #006AA9;
 

package/esm/index.d.ts

@@ -1,11 +1,13 @@
 export * from "./components/form/Checkbox.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/Section.js";
 export * from "./components/ui/action/Action.js";
 export * from "./components/ui/action/EqualActions.js";
 export * from "./components/ui/button/Button.js";

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AAEjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}

package/esm/index.js

@@ -1,11 +1,13 @@
 export * from "./components/form/Checkbox.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/Section.js";
 export * from "./components/ui/action/Action.js";
 export * from "./components/ui/action/EqualActions.js";
 export * from "./components/ui/button/Button.js";

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AAEjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}

package/esm/utils/makeVariants.d.ts

@@ -0,0 +1,3 @@
+declare const makeVariants: <T extends string>(variants: T | T[] | undefined) => T[];
+export { makeVariants, };
+//# sourceMappingURL=makeVariants.d.ts.map

package/esm/utils/makeVariants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeVariants.d.ts","sourceRoot":"","sources":["../../src/utils/makeVariants.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY,0DAQjB,CAAC;AAEF,OAAO,EACH,YAAY,GACf,CAAC"}

package/esm/utils/makeVariants.js

@@ -0,0 +1,11 @@
+const makeVariants = (variants) => {
+    if (!variants) {
+        return [];
+    }
+    if (typeof variants === "string") {
+        return variants.split(" ").filter(Boolean);
+    }
+    return variants;
+};
+export { makeVariants, };
+//# sourceMappingURL=makeVariants.js.map

package/esm/utils/makeVariants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeVariants.js","sourceRoot":"","sources":["../../src/utils/makeVariants.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,CAAmB,QAA6B,EAAO,EAAE;IAC1E,IAAI,CAAC,QAAQ,EAAE;QACX,OAAO,EAAE,CAAC;KACb;IACD,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;QAC9B,OAAO,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAQ,CAAC;KACrD;IACD,OAAO,QAAQ,CAAC;AACpB,CAAC,CAAC;AAEF,OAAO,EACH,YAAY,GACf,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.4.2",
+  "version": "0.5.2",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {
@@ -51,7 +51,7 @@
     "husky": "^4.3.0",
     "jest": "^27.0.6",
     "must": "^0.13.4",
-    "next": "^11.1.2",
+    "next": "^11.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-use": "^17.2.4",

package/src/components/layout/card/Card.module.scss

@@ -0,0 +1,15 @@
+.card {
+    background: var(--background);
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+
+    + .card {
+        margin-top: 23px;
+    }
+}
+
+.margin {
+    margin-left: 23px;
+    margin-right: 23px;
+}

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

@@ -0,0 +1,26 @@
+import React from "react";
+import classnames from "classnames";
+
+import { makeVariants } from "../../../utils/makeVariants.js";
+import styles from "./Card.module.scss";
+
+type Variants = "margin";
+
+interface Props {
+    variant?: Variants;
+}
+
+const Card: React.FC<Props> = (props) => {
+    const v = makeVariants(props.variant);
+    const cls = classnames(styles.card, {
+        [styles.margin]: v.includes("margin"),
+    });
+
+    // @TODO auto wrap some children in Section
+
+    return (
+        <div className={cls}>{props.children}</div>
+    );
+};
+
+export { Card };

package/src/components/layout/section/Section.module.scss

@@ -0,0 +1,17 @@
+.section {
+    background: var(--background);
+}
+
+.section + .section {
+    margin-top: 23px;
+}
+
+.vertical {
+    margin-top: 23px;
+    margin-bottom: 23px;
+}
+
+.horizontal {
+    margin-left: 23px;
+    margin-right: 23px;
+}

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

@@ -0,0 +1,34 @@
+import React from "react";
+import classnames from "classnames";
+
+import { SectionContainer } from "./SectionContainer.js";
+import { makeVariants } from "../../../utils/makeVariants.js";
+import styles from "./Section.module.scss";
+
+interface SubComponents {
+    Container: typeof SectionContainer;
+}
+
+type Variant = "horizontal" | "vertical";
+
+interface Props {
+    variant?: Variant | Variant[];
+}
+
+const Section: React.FC<Props> & SubComponents = (props) => {
+    const v = makeVariants(props.variant);
+
+    const cls = classnames(styles.section, {
+        [styles.vertical]: v.includes("vertical"),
+        [styles.horizontal]: v.includes("horizontal"),
+    });
+    return (
+        <section className={cls}>
+            {props.children}
+        </section>
+    );
+};
+
+Section.Container = SectionContainer;
+
+export { Section };

package/src/components/layout/section/SectionContainer.module.scss

@@ -0,0 +1,4 @@
+.container {
+    background: var(--toolbar-bg);
+    flex: 1;
+}

package/src/components/layout/section/SectionContainer.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+import styles from "./SectionContainer.module.scss";
+
+const SectionContainer: React.FC = (props) => {
+    return (
+        <div className={styles.container}>{props.children}</div>
+    );
+};
+
+export { SectionContainer };

package/src/components/ui/button/Button.tsx

@@ -2,23 +2,27 @@ import React from "react";
 import classnames from "classnames";
 
 import styles from "./Button.module.scss";
-import { makeVariants } from "../../../demo/utils/makeVariants.js";
+import { makeVariants } from "../../../utils/makeVariants.js";
 
 interface Props {
-    disabled?: boolean;
     variant?: "inline" | "outline";
 }
 
-const Button: React.FC<Props> = (props) => {
+const Button: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & Props> = ({ className, children, ...props }) => {
     const variants = makeVariants(props.variant);
 
     const cls = classnames(styles.btn, {
         [styles["btn--inline"]]: variants.includes("inline"),
         [styles["btn--outline"]]: variants.includes("outline"),
-    });
+    }, className);
 
     return (
-        <button className={cls} disabled={props.disabled}>{props.children}</button>
+        <button
+            {...props}
+            className={cls}
+            disabled={props.disabled}
+        >{children}
+        </button>
     );
 };
 

package/src/demo/Main.module.scss

@@ -9,6 +9,8 @@
     padding: 20px;
     flex: 1;
     overflow: auto;
+    display: flex;
+    flex-direction: column;
 
     &--transparent {
         background-position: 0px 0px, 10px 10px;

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { Card } from "../../../../components/layout/card/Card";
+import { Section } from "../../../../components/layout/section/Section";
+
+const CardDemo = () => {
+    return (
+        <Section.Container>
+            <Card>
+                <Section variant={["vertical", "horizontal"]}>Content</Section>
+            </Card>
+            <Card>
+                <Section variant={["vertical", "horizontal"]}>Content</Section>
+            </Card>
+            <Card variant={"margin"}>
+                <Section variant={["vertical", "horizontal"]}>Content</Section>
+            </Card>
+        </Section.Container>
+    );
+};
+
+export { CardDemo };

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

@@ -0,0 +1,34 @@
+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";
+
+const SectionDemo = () => {
+    return (
+        <Section.Container>
+            <Section>
+                <List>
+                    <List.Header>Section name</List.Header>
+                    <Item>Item</Item>
+                    <Item>Item</Item>
+                </List>
+            </Section>
+            <Section>
+                <List>
+                    <List.Header>Section name</List.Header>
+                    <Item>Item</Item>
+                    <Item>Item</Item>
+                </List>
+            </Section>
+            <Section>
+                <List>
+                    <List.Header>Section name</List.Header>
+                    <Item>Item</Item>
+                    <Item>Item</Item>
+                </List>
+            </Section>
+        </Section.Container>
+    );
+};
+
+export { SectionDemo };

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

@@ -1,16 +1,20 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { Button } from "../../../../index.js";
 
 const ButtonDemo = () => {
+    const handleClick = useCallback(() => {
+        alert("Clicked");
+    }, []);
+
     return (
         <div>
-            <Button>Basic button</Button>
+            <Button onClick={handleClick}>Basic button</Button>
             <br />
-            <Button disabled={true}>Disabled button</Button>
+            <Button disabled={true} onClick={handleClick}>Disabled button</Button>
             <br />
-            <Button variant={"inline"}>Inline button</Button>
+            <Button variant={"inline"} onClick={handleClick}>Inline button</Button>
             <br />
-            <Button variant={"outline"}>Outline button</Button>
+            <Button variant={"outline"} onClick={handleClick}>Outline button</Button>
         </div>
     );
 };

package/src/demo/componentsMap.ts

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

package/src/global.scss

@@ -4,6 +4,8 @@
     --ratio-border:     2.666666;
     --ratio-font:       1.666666;
 
+    --background: white;
+
     --main-color: #008ad2; // used
     --main-color-alt: #006AA9;
 

package/src/index.ts

@@ -3,11 +3,13 @@ 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/Section.js";
 
 export * from "./components/ui/action/Action.js";
 export * from "./components/ui/action/EqualActions.js";