react-miui 0.28.0 → 0.28.1

package/esm/components/utils/colors.js

@@ -2,7 +2,7 @@ const contrastColor = (hex) => {
     const r = parseInt(hex.substring(1, 3), 16);
     const g = parseInt(hex.substring(3, 5), 16);
     const b = parseInt(hex.substring(5, 7), 16);
-    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+    const brightness = ((r * 299) + (g * 587) + (b * 114)) / 1000;
     return brightness > 128 ? "#000000" : "#FFFFFF";
 };
 const invertColor = (hex) => {

package/esm/components/utils/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/components/utils/colors.ts"],"names":[],"mappings":"AAEA,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE;IAClC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC5C,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC5C,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAE5C,MAAM,UAAU,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;IACxD,OAAO,UAAU,GAAG,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;AACpD,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE;IAChC,MAAM,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAClD,OAAO,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9E,CAAC,CAAC;AAEF,OAAO,EACH,aAAa,EACb,WAAW,GACd,CAAC"}
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/components/utils/colors.ts"],"names":[],"mappings":"AAIA,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE;IAClC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC5C,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC5C,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAE5C,MAAM,UAAU,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC;IAC9D,OAAO,UAAU,GAAG,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;AACpD,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE;IAChC,MAAM,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAClD,OAAO,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9E,CAAC,CAAC;AAEF,OAAO,EACH,aAAa,EACb,WAAW,GACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.28.0",
+  "version": "0.28.1",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "exports": {

package/src/components/form/ColorPicker.tsx

@@ -39,9 +39,9 @@ const ColorPicker: React.FC<Props> = ({
         ...(value.startsWith("#") ? { color: contrastColor(value) } : {}),
     };
 
-    const wrapperProps: { css?: NonNullable<typeof css>; className?: typeof className } = {
-        className: className,
-    };
+    const wrapperProps: {
+        css?: NonNullable<typeof css>; className?: typeof className;
+    } = { className };
     if (css) {
         wrapperProps.css = css;
     }

package/src/components/form/Label.styled.ts

@@ -24,4 +24,4 @@ const StyledText = styled("div", {
 export {
     StyledLabel,
     StyledText,
-}; 
+};

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

@@ -2,7 +2,7 @@ import React from "react";
 
 import type { ObjectValue, Value } from "../../../types/form";
 
-import { makeVariants, toObjectValue } from "../../../utils/index";
+import { toObjectValue } from "../../../utils/index";
 
 import { ChoiceItem } from "./ChoiceItem";
 import { StyledChoice } from "./Choice.styled";
@@ -11,20 +11,20 @@ type Variant = "wide" | "left";
 
 type StyledProps = React.ComponentProps<typeof StyledChoice>;
 
-type Props<T extends string> = Omit<StyledProps, "onChange"> & {
-    values: Value<T>[];
+type Props = Omit<StyledProps, "onChange"> & {
+    values: Value<string>[];
     value: string;
     name: string;
-    onChange: (value: Exclude<Value<T>, ObjectValue>) => void;
+    onChange: (value: Exclude<Value<string>, ObjectValue>) => void;
     variant?: Variant | Variant[];
 };
 
 // @TODO handle disabled / readonly!
 
-const Choice = <T extends string>({
+const Choice: React.FC<Props> = ({
     // eslint-disable-next-line @typescript-eslint/no-shadow
     value, values, name, onChange, ...props
-}: Props<T>): ReturnType<React.FC<Props<T>>> => {
+}) => {
     const opts = values.map(option => {
         const opt = toObjectValue(option);
         return (

package/src/components/ui/pop/Pop.stories.tsx

@@ -31,7 +31,6 @@ const handleClick = () => {
 };
 
 const Primary: Story = {
-    // eslint-disable-next-line max-lines-per-function
     render: (args) => {
         // eslint-disable-next-line @typescript-eslint/no-shadow
         const [open, setOpen] = useState(false);

package/src/components/utils/colors.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+
 // TODO move to some ezez lib
 
 const contrastColor = (hex: string) => {
@@ -5,7 +7,7 @@ const contrastColor = (hex: string) => {
     const g = parseInt(hex.substring(3, 5), 16);
     const b = parseInt(hex.substring(5, 7), 16);
     // Perceived brightness
-    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+    const brightness = ((r * 299) + (g * 587) + (b * 114)) / 1000;
     return brightness > 128 ? "#000000" : "#FFFFFF";
 };
 

package/src/demo/Main.tsx

@@ -47,7 +47,7 @@ const getComponentByHash = (hash: string): ComponentInfo | null => {
 const values: BG[] = ["white", "transparent", "mobile"];
 
 const Main: React.FC = (props) => {
-    const [bg, handleBgChange] = useState<BG>("white");
+    const [bg, handleBgChange] = useState<string>("white");
 
     const hash = safeUseHash();
     const hashWithoutHash = hash.substr(1);

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

@@ -1,32 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Choice = void 0;
-var react_1 = require("react");
-var index_1 = require("../../../utils/index");
-var ChoiceItem_1 = require("./ChoiceItem");
-var Choice_styled_1 = require("./Choice.styled");
-// @TODO handle disabled / readonly!
-var Choice = function (_a) {
-    var 
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    value = _a.value, values = _a.values, name = _a.name, onChange = _a.onChange, props = __rest(_a, ["value", "values", "name", "onChange"]);
-    var opts = values.map(function (option) {
-        var opt = (0, index_1.toObjectValue)(option);
-        return (<ChoiceItem_1.ChoiceItem key={opt.value} name={name} value={opt} onChange={onChange} active={value === opt.value}/>);
-    });
-    return (<Choice_styled_1.StyledChoice {...props}>
-            {opts}
-        </Choice_styled_1.StyledChoice>);
-};
-exports.Choice = Choice;

package/src/components/form/choice/Choice.styled.js

@@ -1,65 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledChoice = void 0;
-var theme_1 = require("../../../theme");
-var StyledChoice = (0, theme_1.styled)("div", {
-    "--choice-bg": "$colors$choiceBg",
-    "--choice-text": "$colors$choiceText",
-    "--choice-active-bg": "$colors$choiceActiveBg",
-    "--choice-active-text": "$colors$choiceActiveText",
-    "--choice-border": "$colors$choiceBorder",
-    "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 1em",
-        flex: 1,
-        height: "100%",
-        alignItems: "center",
-        justifyContent: "center",
-        fontSize: (0, theme_1.fontPxToRem)(24),
-        color: "var(--choice-text)",
-        background: "var(--choice-bg)",
-        whiteSpace: "nowrap",
-    },
-    "display": "flex",
-    "border": "1px solid var(--choice-border)",
-    "position": "relative",
-    "borderRadius": "8px",
-    "overflow": "hidden",
-    "width": "max-content",
-    "marginLeft": "auto",
-    "marginRight": "auto",
-    "label": {
-        "flex": 1,
-        "height": (0, theme_1.dimensionsPxToRem)(89),
-        "display": "flex",
-        "+ label": {
-            borderLeft: "1px solid var(--choice-border)",
-        },
-    },
-    "variants": {
-        wide: {
-            true: {
-                width: "100%",
-            },
-        },
-        unaligned: {
-            true: {
-                marginLeft: "unset",
-                marginRight: "unset",
-            },
-        },
-    },
-});
-exports.StyledChoice = StyledChoice;

package/src/theme.js

@@ -1,98 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.fontPxToRem = exports.borderPxToRem = exports.dimensionsPxToRem = exports.pxToRem = exports.config = exports.createTheme = exports.theme = exports.getCssText = exports.keyframes = exports.globalCss = exports.css = exports.styled = void 0;
-var react_1 = require("@stitches/react");
-var RATIOS = {
-    dimensions: 3,
-    border: 1,
-    font: 1.666666,
-};
-// eslint-disable-next-line @typescript-eslint/no-magic-numbers
-var pxToRem = function (px) { return "".concat(px / 16, "rem"); };
-exports.pxToRem = pxToRem;
-var dimensionsPxToRem = function (px) { return pxToRem(px / RATIOS.dimensions); };
-exports.dimensionsPxToRem = dimensionsPxToRem;
-var borderPxToRem = function (px) { return pxToRem(px / RATIOS.border); };
-exports.borderPxToRem = borderPxToRem;
-var fontPxToRem = function (px) { return pxToRem(px / RATIOS.font); };
-exports.fontPxToRem = fontPxToRem;
-var _a = (0, react_1.createStitches)({
-    theme: {
-        colors: {
-            background: "white",
-            mainColor: "#008ad2",
-            mainColorAlt: "#006AA9",
-            activeBg: "#e7e7e7",
-            inactiveBg: "#d3d3de",
-            inactiveDarkBg: "#999",
-            toggleHandleBg: "#e0e0e0",
-            toggleHandleBorder: "#cdcdcd",
-            toggleBgDisabled: "#f0f0f0",
-            toggleHandleBorderDisabled: "#c29f7d",
-            toggleHandleBgDisabled: "#deae84",
-            icon: "#636363",
-            border: "#d5d5d5",
-            buttonBorder: "#bababa",
-            headerBorder: "#c8c8c9",
-            headerBg: "#efeff0",
-            headerText: "#484848",
-            text: "#323232",
-            sub: "#959595",
-            popText: "#666",
-            toolbarBorder: "#ababab",
-            toolbarBg: "#f8f8f8",
-            modalBg: "#f7f7f7",
-            modalButtonBg: "#f8f8f8",
-            modalButtonBorder: "#c2c2c2",
-            inputDisabledBg: "#f3f3f3",
-            inputDisabledText: "#959595",
-            choiceBg: "#ffffff",
-            choiceText: "#999999",
-            choiceActiveBg: "#f3f3f3",
-            choiceActiveText: "#313131",
-            choiceBorder: "#cfcfcf",
-            selectorText: "#606060",
-            selectorActive: "#008ad2",
-            // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
-            blue1: "#038bf4",
-            blue2: "#b7d6f5",
-            blue3: "#dbe6ff",
-            blue4: "#33b4ff",
-            blue5: "#30a2e6",
-            orange1: "#ff7200",
-            orange1Darker: "#cc5b00",
-            purple1: "#7357e8",
-            green1: "#3ec234",
-            green1Darker: "#38af2f",
-            pink1: "#ff388f",
-            red1: "#ea2700",
-            yellow1: "#ffde9d",
-            yellow2: "#e4a429",
-            yellow3: "#fff5db",
-            pinky1: "#f5c0b7",
-            pinky2: "#e07b67",
-            pinky3: "#ffe1db",
-            grey1: "#737373",
-            focusColor: "#dcaf00",
-            scrollbarsThumb: "#737373",
-            scrollbarsBg: "transparent",
-            tableStripedBg: "#fafafa",
-            toolButtonText: "#666e80",
-        },
-    },
-    utils: {
-        mx: function (value) { return ({ marginLeft: value, marginRight: value }); },
-        my: function (value) { return ({ marginTop: value, marginBottom: value }); },
-        px: function (value) { return ({ paddingLeft: value, paddingRight: value }); },
-        py: function (value) { return ({ paddingTop: value, paddingBottom: value }); },
-        size: function (value) { return ({ width: value, height: value }); },
-    },
-}), styled = _a.styled, css = _a.css, globalCss = _a.globalCss, keyframes = _a.keyframes, getCssText = _a.getCssText, theme = _a.theme, createTheme = _a.createTheme, config = _a.config;
-exports.styled = styled;
-exports.css = css;
-exports.globalCss = globalCss;
-exports.keyframes = keyframes;
-exports.getCssText = getCssText;
-exports.theme = theme;
-exports.createTheme = createTheme;
-exports.config = config;

package/src/types/form.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/src/utils/index.js

@@ -1,19 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./makeVariants"), exports);
-__exportStar(require("./toObjectValue"), exports);
-__exportStar(require("./useKeyPress"), exports);

package/src/utils/makeVariants.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeVariants = void 0;
-var makeVariants = function (variants) {
-    if (!variants) {
-        return [];
-    }
-    if (typeof variants === "string") {
-        return variants.split(" ").filter(Boolean);
-    }
-    return variants;
-};
-exports.makeVariants = makeVariants;

package/src/utils/toObjectValue.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toObjectValue = void 0;
-var toObjectValue = function (s) {
-    return typeof s === "string" ? { value: s, label: s } : s;
-};
-exports.toObjectValue = toObjectValue;

package/src/utils/useKeyPress.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useKeyPress = void 0;
-var react_1 = require("react");
-var useKeyPress = function (targetKey) {
-    var _a = (0, react_1.useState)(false), keyPressed = _a[0], setKeyPressed = _a[1];
-    (0, react_1.useEffect)(function () {
-        var handleKeyDown = function (_a) {
-            var key = _a.key;
-            if (key === targetKey) {
-                setKeyPressed(true);
-            }
-        };
-        var handleKeyUp = function (_a) {
-            var key = _a.key;
-            if (key === targetKey) {
-                setKeyPressed(false);
-            }
-        };
-        window.addEventListener("keydown", handleKeyDown);
-        window.addEventListener("keyup", handleKeyUp);
-        return function () {
-            window.removeEventListener("keydown", handleKeyDown);
-            window.removeEventListener("keyup", handleKeyUp);
-        };
-    }, [targetKey]);
-    return keyPressed;
-};
-exports.useKeyPress = useKeyPress;