react-miui 0.17.2 → 0.17.3

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "react-miui",
-  "version": "0.17.2",
+  "version": "0.17.3",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {
     "test": "NODE_ENV=test jest",
-    "docs": "typedoc src/index.ts --out docs --includeVersion --pluginPages ./pagesconfig.json",
+    "docs": "typedoc src/index.ts --skipErrorChecking --out docs --includeVersion --pluginPages ./pagesconfig.json",
     "compile": "yarn compile:esm && yarn compile:cjs",
     "compile:esm": "rm -rf esm && tsc --project tsconfig.esm.json && node ./build-scripts/compile.esm.after.mjs",
     "compile:cjs": "rm -rf dist && tsc --project tsconfig.cjs.json && node ./build-scripts/compile.cjs.after.mjs",
@@ -16,7 +16,10 @@
     "prepublishOnly": "yarn audit && yarn lint && yarn test && yarn docs",
     "start:dev": "next dev",
     "deploy:dev": "next build && next export && netlify deploy --dir out",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "updates": "npx --yes npm-check-updates --dep prod",
+    "updates:dev": "npx --yes npm-check-updates --dep dev",
+    "updates:all": "npx --yes npm-check-updates"
   },
   "exports": {
     "./global.scss": "./src/global.scss",
@@ -30,31 +33,31 @@
   "module": "./esm/index.js",
   "dependencies": {
     "classnames": "^2.3.1",
-    "nodemon": "^2.0.19",
+    "nodemon": "^2.0.20",
     "oop-timers": "^4.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-typescript": "^7.12.7",
-    "@dzek69/eslint-config-base": "^2.2.0",
+    "@babel/core": "^7.19.3",
+    "@babel/preset-env": "^7.19.3",
+    "@babel/preset-typescript": "^7.18.6",
+    "@dzek69/eslint-config-base": "^2.3.0",
     "@dzek69/eslint-config-import": "^1.0.0",
     "@dzek69/eslint-config-import-typescript": "^1.0.0",
     "@dzek69/eslint-config-react": "^1.2.2",
-    "@dzek69/eslint-config-typescript": "^1.0.1",
+    "@dzek69/eslint-config-typescript": "^1.0.2",
     "@knodes/typedoc-plugin-pages": "^0.23.1",
     "@types/jest": "^29.2.0",
     "@types/react": "^17.0.4",
     "@types/react-dom": "^17.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.30.3",
-    "@typescript-eslint/parser": "^5.30.3",
+    "@typescript-eslint/eslint-plugin": "^5.38.1",
+    "@typescript-eslint/parser": "^5.38.1",
     "babel-plugin-module-extension": "^0.1.3",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "eslint": "^8.18.0",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "eslint": "^8.24.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-react": "^7.24.0",
     "fast-glob": "^3.2.7",
-    "fs-extra": "^9.0.1",
+    "fs-extra": "^10.1.0",
     "husky": "^8.0.1",
     "jest": "^29.2.2",
     "must": "^0.13.4",
@@ -64,7 +67,7 @@
     "react-use": "^17.2.4",
     "sass": "^1.35.2",
     "ts-node": "^10.9.1",
-    "typedoc": "^0.23.8",
+    "typedoc": "^0.23.15",
     "typescript": "^4.7.4"
   },
   "peerDependencies": {
@@ -77,7 +80,7 @@
     }
   },
   "libraryTemplate": {
-    "version": "3.5.3",
+    "version": "3.6.0",
     "language": "typescript",
     "fixDefaultForCommonJS": true,
     "jsx": true

package/src/components/form/Checkbox.tsx

@@ -13,13 +13,14 @@ interface Props {
     checked?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
+    className?: string;
 }
 
 const Checkbox: React.FC<Props> = (props) => {
     const style: React.CSSProperties = {};
     props.color && (style.color = props.color);
 
-    const cls = classnames(styles.checkbox, {
+    const cls = classnames(props.className, styles.checkbox, {
         [styles.disabled]: props.disabled,
         [styles.readOnly]: props.readOnly,
     });

package/src/components/form/Label.tsx

@@ -9,6 +9,7 @@ import styles from "./Label.module.scss";
 interface Props {
     label?: React.ReactNode;
     variant?: "big";
+    className?: string;
 }
 
 const Label: React.FC<Props> = (props) => {
@@ -20,8 +21,10 @@ const Label: React.FC<Props> = (props) => {
 
     const label = props.label ? <div className={labelCls}>{props.label}</div> : null;
 
+    const rootCls = classnames(props.className, styles.label);
+
     return (
-        <label className={styles.label}>
+        <label className={rootCls}>
             {label}
             {props.children}
         </label>

package/src/components/form/Toggle.tsx

@@ -11,6 +11,7 @@ interface Props {
     undeterminedClickValue?: boolean;
     disabled?: boolean;
     value: boolean | null;
+    className?: string;
 }
 
 const Toggle: React.FC<Props> = (props) => {
@@ -24,7 +25,7 @@ const Toggle: React.FC<Props> = (props) => {
         props.onChange(e.target.checked);
     }, [props.onChange, props.value]);
 
-    const cls = classnames(styles.container, {
+    const cls = classnames(props.className, styles.container, {
         [styles.disabled]: props.disabled,
     });
 

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

@@ -10,11 +10,12 @@ type Variants = "margin";
 
 interface Props {
     variant?: Variants;
+    className?: string;
 }
 
 const Card: React.FC<Props> = (props) => {
     const v = makeVariants(props.variant);
-    const cls = classnames(styles.card, {
+    const cls = classnames(props.className, styles.card, {
         [styles.margin]: v.includes("margin"),
     });
 

package/src/components/layout/header/HeaderIconAction.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import type { ReactNode } from "react";
 
+import classnames from "classnames";
+
 import type { ICON } from "../../icons/Icon";
 
 import { Icon } from "../../icons/Icon.js";
@@ -18,11 +20,11 @@ interface Props {
     to?: string;
     Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
     label?: ReactNode;
-    // if className ever goes here make sure that `a` gets classnames merged
+    className?: string;
 }
 
 const HeaderIconAction: React.FC<Props> = (props) => {
-    const { icon, label, href, to, Link, ...restProps } = props;
+    const { icon, label, href, to, Link, className, ...restProps } = props;
 
     let content: ReactNode = icon;
     if (typeof icon === "string") {
@@ -34,15 +36,18 @@ const HeaderIconAction: React.FC<Props> = (props) => {
             throw new TypeError("`to` prop given without `Link` component");
         }
 
-        return <Link href={to} {...restProps}><a className={styles.a}>{content}</a></Link>;
+        const aCls = classnames(props.className, styles.a);
+        return <Link href={to} {...restProps}><a className={aCls}>{content}</a></Link>;
     }
 
     if (href) {
-        return <a href={href} className={styles.a} {...restProps}>{content}</a>;
+        const aCls = classnames(props.className, styles.a);
+        return <a href={href} className={aCls} {...restProps}>{content}</a>;
     }
 
+    const btnCls = classnames(props.className, styles.btn);
     return (
-        <button className={styles.btn} onClick={props.onClick}>
+        <button className={btnCls} onClick={props.onClick}>
             {content}
         </button>
     );

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

@@ -1,10 +1,16 @@
 import React from "react";
 
+import classnames from "classnames";
+
 import styles from "./SearchContainer.module.scss";
 
-const SearchContainer: React.FC = (props) => {
+interface Props {
+    className?: string;
+}
+
+const SearchContainer: React.FC<Props> = (props) => {
     return (
-        <section className={styles.section}>{props.children}</section>
+        <section className={classnames(props.className, styles.section)}>{props.children}</section>
     );
 };
 

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

@@ -15,12 +15,13 @@ type Variant = "horizontal" | "vertical";
 
 interface Props {
     variant?: Variant | Variant[];
+    className?: string;
 }
 
 const Section: React.FC<Props> & SubComponents = (props) => {
     const v = makeVariants(props.variant);
 
-    const cls = classnames(styles.section, {
+    const cls = classnames(props.className, styles.section, {
         [styles.vertical]: v.includes("vertical"),
         [styles.horizontal]: v.includes("horizontal"),
     });

package/src/components/ui/directionPad/Pad.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 
+import classnames from "classnames";
+
 import { PadButton as Button } from "./Button.js";
 import { PadMiddle as Middle } from "./Middle.js";
 import styles from "./Pad.module.scss";
@@ -11,11 +13,12 @@ interface Props {
     onRightPress?: () => void;
     onMiddlePress?: () => void;
     middleLabel?: string;
+    className?: string;
 }
 
 const Pad: React.FC<Props> = (props) => {
     return (
-        <div className={styles.pad}>
+        <div className={classnames(props.className, styles.pad)}>
             <div className={styles.pad__line}>
                 <Button onClick={props.onUpPress} />
             </div>

package/src/components/ui/drawer/Drawer.tsx

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 
 import { Timeout } from "oop-timers";
+import classnames from "classnames";
 
 import { HandleEsc } from "../../utils/HandleEsc.js";
 
@@ -12,6 +13,7 @@ interface Props {
     isOpen: boolean;
     closeOnEsc?: boolean;
     onClose: () => void;
+    className?: string;
 }
 
 interface State {
@@ -76,8 +78,10 @@ class Drawer extends Component<Props, State> {
         const closeOnEsc = this.props.closeOnEsc ?? true;
         const esc = closeOnEsc && <HandleEsc onPress={this.handleEsc} />;
 
+        const cls = classnames(this.props.className, styles.drawer);
+
         return (
-            <div className={styles.drawer} style={style}>
+            <div className={cls} style={style}>
                 {esc}
                 <div className={styles.content}>
                     {shouldRender && this.props.children}

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

@@ -1,5 +1,7 @@
 import React, { Component, createRef } from "react";
 
+import classnames from "classnames";
+
 import { HandleEsc } from "../../utils/HandleEsc.js";
 
 import { OnButtonClick } from "./OnButtonClick.js";
@@ -11,6 +13,7 @@ interface Props {
     onClose: () => void;
     anchor?: HTMLElement | "prev" | "next";
     closeOnEsc?: boolean;
+    className?: string;
 }
 
 interface State {
@@ -143,8 +146,10 @@ class Pop extends Component<Props, State> {
         const closeOnEsc = this.props.closeOnEsc ?? true;
         const esc = closeOnEsc && <HandleEsc onPress={this.handleEsc} />;
 
+        const cls = classnames(this.props.className, styles.overlay);
+
         return (
-            <div className={styles.overlay} ref={this.rootRef} onClick={this.handleOverlayClick}>
+            <div className={cls} ref={this.rootRef} onClick={this.handleOverlayClick}>
                 {esc}
                 <OnButtonClick onClick={this.handleEsc}>
                     <ul className={styles.pop} style={style}>

package/src/components/ui/pop/PopOption.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 
+import classnames from "classnames";
+
 import type { ICON } from "../../icons/Icon";
 
 import { Icon } from "../../icons/Icon.js";
@@ -10,6 +12,7 @@ interface Props {
     icon?: ICON;
     forceEmptyIcon?: boolean;
     onClick: () => void;
+    className?: string;
 }
 
 const PopOption: React.FC<Props> = (props) => {
@@ -18,7 +21,7 @@ const PopOption: React.FC<Props> = (props) => {
         : ((props.forceEmptyIcon ?? true) ? <span className={styles.fakeIcon} /> : null);
 
     return (
-        <li className={styles.li}>
+        <li className={classnames(props.className, styles.li)}>
             <button onClick={props.onClick} className={styles.button}>{ic}{props.children}</button>
         </li>
     );

package/src/components/ui/stats/Stats.tsx

@@ -12,6 +12,7 @@ interface Stat {
 interface Props {
     stats: Stat[];
     variant?: "dark";
+    className?: string;
 }
 
 const Stats: React.FC<Props> = (props) => {
@@ -31,7 +32,7 @@ const Stats: React.FC<Props> = (props) => {
 
     const cls = classnames(styles.stats, {
         [styles["stats-dark"]]: props.variant === "dark",
-    });
+    }, props.className);
 
     return (
         <ul className={cls}>

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

@@ -1,5 +1,7 @@
 import React, { useCallback, useState } from "react";
 
+import classnames from "classnames";
+
 import type { Value } from "../../../types/form";
 
 import { toObjectValue } from "../../../utils/index.js";
@@ -11,6 +13,7 @@ interface Props<T extends string> {
     values: Value<T>[];
     value?: string;
     onChange?: (value: string) => void;
+    className?: string;
 }
 
 const Selector = <T extends string>(props: Props<T>): ReturnType<React.FC<Props<T>>> => {
@@ -27,7 +30,7 @@ const Selector = <T extends string>(props: Props<T>): ReturnType<React.FC<Props<
         const ov = toObjectValue(v);
         return <Item key={ov.value} value={ov} onClick={handleCurrent} active={crr === ov.value} />;
     });
-    return <div className={styles.selector}>{vals}</div>;
+    return <div className={classnames(props.className, styles.selector)}>{vals}</div>;
 };
 
 export { Selector };