react-miui 0.9.2 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {

package/src/components/form/Checkbox.module.scss

@@ -6,42 +6,66 @@
         margin: 0;
         vertical-align: middle;
 
-        + span {
-            border-radius: 100px;
-            background: var(--inactive-bg);
-            width: 18px;
-            height: 18px;
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            vertical-align: middle;
-
-            svg {
-                width: 9px;
-                height: 9px;
-                fill: white;
-            }
-
-            + span {
-                vertical-align: middle;
-            }
-        }
-
         &:focus-visible {
-            + span {
+            + .checkmark {
                 box-shadow: 0 0 5px black;
             }
         }
 
-        &:checked {
-            + span {
-                color: var(--main-color);
-                background: currentColor;
-            }
+        + .checkmark + .label:not(:empty) {
+            margin-left: 0.75em;
         }
+    }
+}
 
-        + span + span:not(:empty) {
-            margin-left: 0.5em;
-        }
+.checkmark {
+    border-radius: 100px;
+    background: none;
+    border: 1px solid var(--inactive-bg);
+    width: 18px;
+    height: 18px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    vertical-align: middle;
+    box-sizing: border-box;
+
+    svg {
+        display: none;
+        width: 9px;
+        height: 9px;
+        fill: white;
+    }
+
+    + .label {
+        vertical-align: middle;
+    }
+}
+
+.checkmarkChecked {
+    border-width: 0;
+    color: var(--main-color);
+    background: currentColor;
+
+    svg {
+        display: inline-block;
+    }
+
+    &.checkmarkDisabled {
+        background: var(--inactive-dark-bg);
+    }
+}
+
+.checkmarkDisabled {
+    background: var(--active-bg);
+
+    + .label {
+        color: var(--input-disabled-text);
+    }
+}
+
+.checkmarkReadOnly {
+    + .label {
+        color: var(--input-disabled-text);
     }
 }

package/src/components/form/Checkbox.tsx

@@ -1,24 +1,45 @@
 import React from "react";
+import classnames from "classnames";
 
 import styles from "./Checkbox.module.scss";
 import { Checkmark } from "../icons/Checkmark.js";
 
 interface Props {
     color?: string;
-    name: string;
-    onChange: () => void;
-    checked: boolean;
+    name?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    checked?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
 }
 
 const Checkbox: React.FC<Props> = (props) => {
     const style: React.CSSProperties = {};
     props.color && (style.color = props.color);
 
+    const cls = classnames(styles.checkbox, {
+        [styles.disabled]: props.disabled,
+        [styles.readOnly]: props.readOnly,
+    });
+
+    const checkmarkCls = classnames(styles.checkmark, {
+        [styles.checkmarkDisabled]: props.disabled,
+        [styles.checkmarkChecked]: props.checked,
+        [styles.checkmarkReadOnly]: props.readOnly,
+    });
+
     return (
-        <label className={styles.checkbox}>
-            <input type={"checkbox"} name={props.name} onChange={props.onChange} checked={props.checked} />
-            <span style={style}><Checkmark /></span>
-            <span>{props.children}</span>
+        <label className={cls}>
+            <input
+                type={"checkbox"}
+                name={props.name}
+                onChange={props.onChange}
+                checked={props.checked}
+                disabled={props.disabled}
+                readOnly={props.readOnly}
+            />
+            <span style={style} className={checkmarkCls}><Checkmark /></span>
+            <span className={styles.label}>{props.children}</span>
         </label>
     );
 };

package/src/components/form/Input.module.scss

@@ -24,6 +24,27 @@
     padding: 0 calc(36px / var(--ratio-dimensions));
     border: calc(1px / var(--ratio-border)) solid var(--border);
     align-items: center;
+
+    .input {
+        flex: 1;
+    }
+
+    &.disabled {
+        background: var(--input-disabled-bg);
+        color: var(--input-disabled-text);
+
+        .input {
+            color: var(--input-disabled-text);
+        }
+    }
+
+    &.readOnly {
+        color: var(--input-disabled-text);
+
+        .input {
+            color: var(--input-disabled-text);
+        }
+    }
 }
 
 .textarea {

package/src/components/form/Input.tsx

@@ -29,6 +29,8 @@ const Input: React.FC<Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"
 
     const wrapperCls = classnames(styles.wrapper, {
         [styles.wrapperFocused]: focused,
+        [styles.disabled]: props.disabled,
+        [styles.readOnly]: props.readOnly,
     }, className);
 
     const prefixElem = prefix ? <div className={styles.prefix}>{prefix}</div> : null;

package/src/components/ui/message/Message.module.scss

@@ -0,0 +1,31 @@
+.container {
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    padding: calc(47px / var(--ratio-dimensions)) calc(83px / var(--ratio-dimensions));
+    font-weight: 500;
+    line-height: 1.25;
+}
+
+.box {
+    border-left: 1px solid var(--border);
+    border-right: 1px solid var(--border);
+    margin: 12px;
+}
+
+.warning {
+    background-color: var(--yellow3);
+    border-color: var(--yellow1);
+    color: var(--yellow2);
+}
+
+.error {
+    background-color: var(--pinky3);
+    border-color: var(--pinky1);
+    color: var(--pinky2);
+}
+
+.info {
+    background-color: var(--blue3);
+    border-color: var(--blue2);
+    color: var(--blue1);
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+import classnames from "classnames";
+
+import styles from "./Message.module.scss";
+
+interface Props {
+    type: "warning" | "error" | "info" | "tip";
+    variant?: "box";
+}
+
+const Message: React.FC<Props> = (props) => {
+    const cls = classnames(styles.container, {
+        [styles.box]: props.variant === "box",
+        [styles.warning]: props.type === "warning",
+        [styles.error]: props.type === "error",
+        [styles.info]: props.type === "info",
+    });
+    return <div className={cls}>{props.children}</div>;
+};
+
+export { Message };

package/src/demo/components/form/Checkbox.tsx

@@ -2,13 +2,31 @@ import React, { useCallback, useState } from "react";
 
 import { Checkbox } from "../../../index.js";
 
+const handleChangeNoop = () => undefined;
+
 const CheckboxDemo: React.FC = (props) => {
     const [v, setV] = useState(false);
 
     const handleToggle = useCallback(() => { setV((prevV) => !prevV); }, []);
 
     return (
-        <Checkbox name={"a"} onChange={handleToggle} checked={v}>I want something something</Checkbox>
+        <>
+            <Checkbox name={"a"} onChange={handleToggle} checked={!v}>I want something something</Checkbox>
+            <hr />
+            <Checkbox name={"a"} onChange={handleChangeNoop} checked={true} disabled={true}>
+                Something else - disabled
+            </Checkbox>
+            <Checkbox name={"a"} onChange={handleChangeNoop} checked={false} disabled={true}>
+                Something else - disabled
+            </Checkbox>
+            <hr />
+            <Checkbox name={"a"} onChange={handleChangeNoop} checked={true} readOnly={true}>
+                Last option - readonly
+            </Checkbox>
+            <Checkbox name={"a"} onChange={handleChangeNoop} checked={false} readOnly={true}>
+                Last option - readonly
+            </Checkbox>
+        </>
     );
 };
 

package/src/demo/components/form/Input.tsx

@@ -6,6 +6,10 @@ const InputDemo: React.FC = () => {
     return (
         <>
             <Input placeholder={"Capacity"} prefix={<Icon name={ICON.battery} />} suffix={"kWh"} />
+            <Input value={"William J. Welter"} />
+            <Input prefix={"Text prefix"} value={"Polly W. Wilson"} />
+            <Input prefix={"Disabled"} value={"Clayton J. Foster"} disabled={true} />
+            <Input prefix={"Read only"} value={"Norma J. Gomez"} readOnly={true} />
         </>
     );
 };

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

@@ -0,0 +1,27 @@
+import React from "react";
+
+import { Message } from "../../../../components/ui/message/Message";
+
+interface Props {}
+
+const MessageDemo: React.FC<Props> = () => {
+    return (
+        <>
+            <Message type={"warning"}>Files will be removed after 30 days.</Message>
+            <br /><br />
+            <Message type={"error"}>Files will be removed after 30 days.</Message>
+            <br /><br />
+            <Message type={"info"}>
+                Files will be removed after 30 days. Files will be removed after 30 days.
+            </Message>
+            <br /><br />
+            <Message type={"warning"} variant={"box"}>Files will be removed after 30 days.</Message>
+            <Message type={"error"} variant={"box"}>Files will be removed after 30 days.</Message>
+            <Message type={"info"} variant={"box"}>
+                Files will be removed after 30 days. Files will be removed after 30 days.
+            </Message>
+        </>
+    );
+};
+
+export { MessageDemo };

package/src/demo/componentsMap.ts

@@ -40,6 +40,7 @@ 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";
+import { MessageDemo } from "./components/ui/message/Message";
 
 interface TheMap {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -213,6 +214,10 @@ const componentsMap: TheMap = {
         name: "Toaster",
         Component: ToasterDemo,
     },
+    Message: {
+        name: "Message",
+        Component: MessageDemo,
+    },
     Modal: {
         name: "Modal",
         Component: ModalDemo,

package/src/global.scss

@@ -7,11 +7,12 @@
 
     --background: white;
 
-    --main-color: #008ad2; // used
+    --main-color: #008ad2;
     --main-color-alt: #006AA9;
 
-    --active-bg: #d3d3d3;
-    --inactive-bg: #d3d3d3; // used
+    --active-bg: #e7e7e7;
+    --inactive-bg: #d3d3d3;
+    --inactive-dark-bg: #999;
 
     --toggle-handle-bg: #e0e0e0;
     --toggle-handle-border: #cdcdcd;
@@ -32,6 +33,9 @@
     --modal-button-bg: #f8f8f8;
     --modal-button-border: #c2c2c2;
 
+    --input-disabled-bg: #f3f3f3;
+    --input-disabled-text: #959595;
+
     --choice-bg: #ffffff;
     --choice-text: #999999;
     --choice-active-bg: #f3f3f3;
@@ -43,6 +47,8 @@
 
     // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
     --blue1: #038bf4;
+    --blue2: #b7d6f5;
+    --blue3: #dbe6ff;
     --orange1: #ff7200;
     --orange1-darker: #cc5b00;
     --purple1: #7357e8;
@@ -50,6 +56,12 @@
     --green1-darker: #38af2f;
     --pink1: #ff388f;
     --red1: #ea2700;
+    --yellow1: #ffde9d;
+    --yellow2: #e4a429;
+    --yellow3: #fff5db;
+    --pinky1: #f5c0b7;
+    --pinky2: #e07b67;
+    --pinky3: #ffe1db;
 
     --grey1: #737373;