react-miui 0.8.0 → 0.9.0

package/esm/utils/index.js

@@ -0,0 +1,3 @@
+export * from "./makeVariants";
+export * from "./toObjectValue";
+//# sourceMappingURL=index.js.map

package/esm/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC"}

package/esm/utils/toObjectValue.d.ts

@@ -0,0 +1,4 @@
+import type { ObjectValue, Value } from "../types/form";
+declare const toObjectValue: (s: Value) => ObjectValue;
+export { toObjectValue, };
+//# sourceMappingURL=toObjectValue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toObjectValue.d.ts","sourceRoot":"","sources":["../../src/utils/toObjectValue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAExD,QAAA,MAAM,aAAa,MAAO,KAAK,KAAG,WAEjC,CAAC;AAEF,OAAO,EACH,aAAa,GAChB,CAAC"}

package/esm/utils/toObjectValue.js

@@ -0,0 +1,5 @@
+const toObjectValue = (s) => {
+    return typeof s === "string" ? { value: s, label: s } : s;
+};
+export { toObjectValue, };
+//# sourceMappingURL=toObjectValue.js.map

package/esm/utils/toObjectValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toObjectValue.js","sourceRoot":"","sources":["../../src/utils/toObjectValue.ts"],"names":[],"mappings":"AAEA,MAAM,aAAa,GAAG,CAAC,CAAQ,EAAe,EAAE;IAC5C,OAAO,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9D,CAAC,CAAC;AAEF,OAAO,EACH,aAAa,GAChB,CAAC"}

package/package.json

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

package/src/components/form/choice/Choice.module.scss

@@ -0,0 +1,43 @@
+.choice {
+    input {
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        opacity: 0;
+        margin: 0;
+        position: absolute;
+
+        &:checked + span {
+            color: var(--choice-active-text);
+            background: var(--choice-active-bg);
+        }
+    }
+
+    span {
+        display: flex;
+        padding: 0;
+        flex: 1;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        font-size: calc(24px / var(--ratio-font));
+        color: var(--choice-text);
+        background: var(--choice-bg);
+    }
+
+    display: flex;
+    border: 1px solid var(--choice-border); // @TODO width
+    position: relative;
+    border-radius: 8px;
+    overflow: hidden;
+
+    label {
+        flex: 1;
+        height: calc(89px / var(--ratio-dimensions));
+        display: flex;
+
+        + label {
+            border-left: 1px solid var(--choice-border);
+        }
+    }
+}

package/src/components/form/choice/Choice.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import type { Value } from "../../../types/form";
+import { toObjectValue } from "../../../utils";
+import { ChoiceItem } from "./ChoiceItem";
+import styles from "./Choice.module.scss";
+
+interface Props {
+    values: Value[];
+    value: string;
+    name: string;
+    onChange: (value: string) => void;
+}
+
+const Choice: React.FC<Props> = (props) => {
+    const opts = props.values.map(option => {
+        const opt = toObjectValue(option);
+        return (
+            <ChoiceItem
+                key={opt.value}
+                name={props.name}
+                value={opt}
+                onChange={props.onChange}
+                active={props.value === opt.value}
+            />
+        );
+    });
+
+    return <div className={styles.choice}>{opts}</div>;
+};
+
+export { Choice };

package/src/components/form/choice/ChoiceItem.tsx

@@ -0,0 +1,30 @@
+import React, { useCallback } from "react";
+import type { ObjectValue } from "../../../types/form";
+
+interface Props {
+    name: string;
+    value: ObjectValue;
+    onChange: (value: string) => void;
+    active: boolean;
+}
+
+const ChoiceItem: React.FC<Props> = (props) => {
+    const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        props.onChange(e.currentTarget.value);
+    }, [props.onChange]);
+
+    return (
+        <label key={props.value.value} tabIndex={0}>
+            <input
+                type={"radio"}
+                name={props.name}
+                value={props.value.value}
+                checked={props.active}
+                onChange={handleChange}
+            />
+            <span>{props.value.label}</span>
+        </label>
+    );
+};
+
+export { ChoiceItem };

package/src/components/ui/tabs/Item.module.scss

@@ -0,0 +1,11 @@
+.button {
+    border: none;
+    padding: 0;
+    font-size: calc(29px / var(--ratio-font));
+    color: var(--selector-text);
+    background: none;
+}
+
+.active {
+    color: var(--selector-active);
+}

package/src/components/ui/tabs/Item.tsx

@@ -0,0 +1,26 @@
+import React, { useCallback } from "react";
+import classnames from "classnames";
+
+import type { ObjectValue } from "../../../types/form";
+
+import styles from "./Item.module.scss";
+
+interface Props {
+    value: ObjectValue;
+    onClick: (value: string) => void;
+    active: boolean;
+}
+
+const Item: React.FC<Props> = (props) => {
+    const handleClick = useCallback(() => {
+        props.onClick(props.value.value);
+    }, [props.onClick, props.value.value, props.value.label]);
+
+    const cls = classnames(styles.button, {
+        [styles.active]: props.active,
+    });
+
+    return <button onClick={handleClick} className={cls} type={"button"}>{props.value.label}</button>;
+};
+
+export { Item };

package/src/components/ui/tabs/Selector.module.scss

@@ -0,0 +1,6 @@
+.selector {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    gap: calc(114px / var(--ratio-dimensions));
+}

package/src/components/ui/tabs/Selector.tsx

@@ -0,0 +1,31 @@
+import React, { useCallback, useState } from "react";
+
+import type { Value } from "../../../types/form";
+import { toObjectValue } from "../../../utils";
+import { Item } from "./Item";
+import styles from "./Selector.module.scss";
+
+interface Props {
+    values: Value[];
+    value?: string;
+    onChange?: (value: string) => void;
+}
+
+const Selector: React.FC<Props> = (props) => {
+    const [current, setCurrent] = useState(props.value);
+
+    const handleCurrent = useCallback((value: string) => {
+        setCurrent(value);
+        props.onChange?.(value);
+    }, [props.onChange]);
+
+    const crr = props.value ?? current;
+
+    const vals = props.values.map(v => {
+        const ov = toObjectValue(v);
+        return <Item key={ov.value} value={ov} onClick={handleCurrent} active={crr === ov.value} />;
+    });
+    return <div className={styles.selector}>{vals}</div>;
+};
+
+export { Selector };

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

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import { Choice } from "../../../components/form/choice/Choice";
+import { Section } from "../../../components/layout/section/Section";
+
+interface Props {}
+
+const values = ["Single", "Multiple"];
+
+const ChoiceDemo: React.FC<Props> = () => {
+    const [current, handleCurrent] = useState(values[0]);
+
+    return (
+        <Section variant={["vertical", "horizontal"]}>
+            <Choice values={values} value={current} name={"rnd"} onChange={handleCurrent} />
+        </Section>
+    );
+};
+
+export { ChoiceDemo };

package/src/demo/components/ui/tabs/Tabs.tsx

@@ -0,0 +1,15 @@
+import React, { useState } from "react";
+import { Header } from "../../../../components/layout/header/Header";
+import { Selector } from "../../../../components/ui/tabs/Selector";
+
+interface Props {}
+
+const values = ["Recent", "Categories", "Whole Disk"];
+
+const TabsDemo: React.FC<Props> = () => {
+    const [current, handleCurrent] = useState("Recent");
+
+    return <Header><Selector values={values} value={current} onChange={handleCurrent} /></Header>;
+};
+
+export { TabsDemo };

package/src/demo/componentsMap.ts

@@ -38,6 +38,8 @@ 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
@@ -79,6 +81,10 @@ const componentsMap: TheMap = {
                 name: "Toggle",
                 Component: ToggleDemo,
             },
+            Choice: {
+                name: "Choice",
+                Component: ChoiceDemo,
+            },
         },
     },
     Header: {
@@ -153,6 +159,10 @@ const componentsMap: TheMap = {
             },
         },
     },
+    Tabs: {
+        name: "Tabs",
+        Component: TabsDemo,
+    },
     ListItem: {
         name: "List & Item",
         Component: ListItemDemo,

package/src/global.scss

@@ -32,6 +32,15 @@
     --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;
     --orange1: #ff7200;

package/src/index.ts

@@ -1,3 +1,4 @@
+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";
@@ -21,4 +22,5 @@ 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/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,
+};