react-miui 0.17.2 → 0.18.0

package/src/components/ui/modal/Modal.tsx

@@ -19,6 +19,7 @@ interface Props {
     className?: string;
     variant?: Variant | Variant[];
     portal?: boolean | HTMLElement;
+    children: React.ReactNode;
 }
 
 interface SubComponents {

package/src/components/ui/modal/ModalButtons.tsx

@@ -7,6 +7,7 @@ import styles from "./ModalButtons.module.scss";
 
 interface Props {
     className?: string;
+    children: React.ReactNode;
 }
 
 interface SubComponents {

package/src/components/ui/modal/ModalNoMargin.tsx

@@ -4,7 +4,9 @@ import { List } from "../../layout/list/List.js";
 
 import styles from "./Modal.module.scss";
 
-interface Props {}
+interface Props {
+    children: React.ReactNode;
+}
 
 const ModalNegateMargin: React.FC<Props> = (props) => {
     const chld = React.Children.map(props.children, (child, index) => {

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

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from "react";
 
 interface Props {
     onClick: () => void;
+    children: React.ReactNode;
 }
 
 const OnButtonClick: React.FC<Props> = (props) => {

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,8 @@ interface Props {
     onClose: () => void;
     anchor?: HTMLElement | "prev" | "next";
     closeOnEsc?: boolean;
+    className?: string;
+    children: React.ReactNode;
 }
 
 interface State {
@@ -143,8 +147,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,8 @@ interface Props {
     icon?: ICON;
     forceEmptyIcon?: boolean;
     onClick: () => void;
+    className?: string;
+    children: React.ReactNode;
 }
 
 const PopOption: React.FC<Props> = (props) => {
@@ -18,7 +22,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 };

package/src/components/ui/toaster/Toaster.tsx

@@ -14,7 +14,9 @@ const ToasterContext = createContext<ToasterFn>(() => {
 const prefix = `${Date.now()}_`;
 let counter = 0;
 
-interface Props {}
+interface Props {
+    children: React.ReactNode;
+}
 interface State {
     list: Toast[];
 }

package/src/components/utils/If.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 interface Props {
     condition?: unknown;
+    children: React.ReactNode;
 }
 
 const If: React.FC<Props> = (props) => {

package/src/demo/Main.tsx

@@ -14,7 +14,7 @@ import { componentsMap } from "./componentsMap.js";
 type BG = "white" | "transparent" | "mobile";
 
 interface ComponentInfo {
-    Component: AnyComponent;
+    Component: AnyComponent<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
     name: string;
 }
 

package/src/demo/NextLink.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+import Link from "next/link";
+
+const NextLink: React.FC<Omit<React.ComponentProps<typeof Link>, "href"> & { href: string }> = (props) => {
+    return <Link {...props} />;
+};
+
+export {
+    NextLink,
+};

package/src/demo/components/layout/header/Header.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 
-import Link from "next/link";
-
 import { Header, ICON, StickyHeader, HeaderIconAction } from "../../../../index.js";
+import { NextLink } from "../../../NextLink.js";
 
 const HeaderDemo = () => {
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers,react/no-array-index-key
@@ -65,7 +64,7 @@ const HeaderWithButtonsDemo = () => {
                 Some button icons are added on the left to centered aligned title
             </div>
             <Header
-                before={<HeaderIconAction icon={ICON.back} to={"/react-miui"} Link={Link} />}
+                before={<HeaderIconAction icon={ICON.back} to={"/react-miui"} Link={NextLink} />}
                 center={true}
             >Messages
             </Header>

package/src/demo/components/layout/list/List.Item.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback } from "react";
 
-import Link from "next/link";
-
 import { Item, List } from "../../../../index.js";
+import { NextLink } from "../../../NextLink.js";
 
 import styles from "./List.Item.module.scss";
 
@@ -14,7 +13,7 @@ const ListItemDemo = () => {
             <Item>I am an item</Item>
             <Item>I am an item</Item>
             <Item href={"https://www.npmjs.com/package/react-miui"}>I am clickable item</Item>
-            <Item to={"/react-miui"} Link={Link}>I am local link item</Item>
+            <Item to={"/react-miui"} Link={NextLink}>I am local link item</Item>
             <Item onClick={handleClick}>Click me to see my action</Item>
             <Item className={styles.custom}>I'm a custom item</Item>
             <Item>I am an item</Item>

package/src/demo/components/ui/action/Action.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 
-import Link from "next/link";
-
 import { Action, ICON, StickyHeader, Header, EqualActions } from "../../../../index.js";
+import { NextLink } from "../../../NextLink.js";
 
 import styles from "./ActionDemo.module.scss";
 
@@ -15,7 +14,7 @@ const ActionDemo: React.FC = () => {
                 <Action icon={ICON.checkmark} /> - action without action
             </div>
             <div>
-                <Action icon={ICON.checkmark} Link={Link} to={"react-miui"} /> - internal link action
+                <Action icon={ICON.checkmark} Link={NextLink} to={"react-miui"} /> - internal link action
             </div>
             <div>
                 <Action icon={ICON.checkmark} href={"https://www.npmjs.com/package/react-miui"} /> - external link action

package/src/demo/componentsMap.ts

@@ -57,7 +57,7 @@ interface TheMap {
 
 interface TheMapItem {
     name: string;
-    Component: AnyComponent;
+    Component: AnyComponent<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
     children?: TheMap;
 }
 

package/src/types.ts

@@ -1,6 +1,6 @@
 import type React from "react";
 
-type AnyComponent = React.ComponentClass | React.FC;
+type AnyComponent<P> = React.ComponentClass<P> | React.FC<P>;
 
 export type {
     AnyComponent,

package/template/.prettierignore

@@ -0,0 +1,3 @@
+*.js
+*.ts
+*.tsx

package/template/.prettierrc.json

@@ -0,0 +1 @@
+{}