react-miui 0.28.2 → 0.29.0

package/src/components/ui/drawer/Drawer.styled.ts

@@ -0,0 +1,22 @@
+import { styled } from "../../../theme";
+
+const StyledDrawer = styled("div", {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: "white",
+    zIndex: 1,
+    transition: "transform 300ms",
+    overflow: "auto",
+});
+
+const Content = styled("div", {
+    height: "100%",
+});
+
+export {
+    StyledDrawer,
+    Content,
+};

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

@@ -1,95 +1,72 @@
-import React, { Component } from "react";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
 
 import { Timeout } from "oop-timers";
-import classnames from "classnames";
 
 import { HandleEsc } from "../../utils/HandleEsc";
 
-import styles from "./Drawer.module.scss";
+import { StyledDrawer, Content } from "./Drawer.styled";
 
 const RENDER_TIMEOUT = 500;
 
-interface Props {
+type DrawerProps = {
     isOpen: boolean;
     closeOnEsc?: boolean;
     onClose: () => void;
     className?: string;
     children: React.ReactNode;
-}
+};
 
-interface State {
-    shouldRenderWhenClosed: boolean;
-}
+const Drawer = forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {
+    const [shouldRenderWhenClosed, setShouldRenderWhenClosed] = useState(false);
+    const timeoutRef = useRef<Timeout | null>(null);
 
-class Drawer extends Component<Props, State> {
-    public constructor(props: Props) {
-        super(props);
+    useEffect(() => {
+        timeoutRef.current = new Timeout(() => {
+            setShouldRenderWhenClosed(false);
+        }, RENDER_TIMEOUT);
 
-        this.state = {
-            shouldRenderWhenClosed: false,
+        return () => {
+            timeoutRef.current?.stop();
+            timeoutRef.current = null;
         };
-    }
-
-    public override componentDidMount() {
-        this.timeout = new Timeout(() => {
-            this.setState({ shouldRenderWhenClosed: false });
-        }, RENDER_TIMEOUT);
-    }
+    }, []);
 
-    public override componentDidUpdate(prevProps: Props) {
-        if (!prevProps.isOpen && this.props.isOpen) {
-            this.onOpen();
+    useEffect(() => {
+        if (props.isOpen) {
+            timeoutRef.current?.stop();
+            setShouldRenderWhenClosed(true);
         }
-
-        if (prevProps.isOpen && !this.props.isOpen) {
-            this.onClose();
+        else {
+            timeoutRef.current?.start();
         }
-    }
-
-    public override componentWillUnmount() {
-        this.timeout?.stop();
-        this.timeout = null;
-    }
+    }, [props.isOpen]);
 
-    private timeout: Timeout | null = null;
-
-    private onOpen() {
-        this.timeout?.stop();
-        this.setState({ shouldRenderWhenClosed: true });
-    }
-
-    private onClose() {
-        this.timeout?.start();
-    }
-
-    private readonly handleEsc = () => {
-        this.props.onClose();
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    const y = props.isOpen ? 0 : 100;
+    const style = {
+        transform: `translateY(${y}%)`,
     };
 
-    public override render() {
-        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-        const y = this.props.isOpen ? 0 : 100;
-        const style = {
-            transform: `translateY(${y}%)`,
-        };
+    const shouldRender = props.isOpen || shouldRenderWhenClosed;
 
-        const shouldRender = this.props.isOpen || this.state.shouldRenderWhenClosed;
+    const closeOnEsc = props.closeOnEsc ?? true;
+    const esc = closeOnEsc && <HandleEsc onPress={props.onClose} />;
 
-        const closeOnEsc = this.props.closeOnEsc ?? true;
-        const esc = closeOnEsc && <HandleEsc onPress={this.handleEsc} />;
+    return (
+        <StyledDrawer className={props.className} style={style} ref={ref}>
+            {esc}
+            <Content>
+                {/* eslint-disable-next-line react/jsx-no-leaked-render */}
+                {shouldRender && props.children}
+            </Content>
+        </StyledDrawer>
+    );
+});
 
-        const cls = classnames(this.props.className, styles.drawer);
+Drawer.displayName = "Drawer";
+Drawer.toString = () => StyledDrawer.toString();
 
-        return (
-            <div className={cls} style={style}>
-                {esc}
-                <div className={styles.content}>
-                    {/* eslint-disable-next-line react/jsx-no-leaked-render */}
-                    {shouldRender && this.props.children}
-                </div>
-            </div>
-        );
-    }
-}
+const DrawerContentSelector = Content.toString();
 
-export { Drawer };
+export { Drawer, DrawerContentSelector };
+export type { DrawerProps };

package/src/components/ui/keyValue/KeyValue.stories.tsx

@@ -0,0 +1,143 @@
+import React from "react";
+
+import { omit } from "@ezez/utils";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { styled } from "../../../theme";
+import { Icon, ICON } from "../../icons/Icon";
+
+import { KeyValue, KeyValueKeySelector, KeyValueValueSelector, KeyValueIconSelector } from "./KeyValue";
+
+const meta: Meta<typeof KeyValue> = {
+    title: "UI/KeyValue",
+    component: KeyValue,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+};
+
+type Story = StoryObj<typeof KeyValue>;
+
+// Create custom styled variants of the KeyValue component
+const StyledKeyValue = styled(KeyValue, {
+    "--kv-background-color": "#f5f5f5",
+    "--kv-border-color": "#ddd",
+    "--kv-hover-background-color": "#e8e8e8",
+    "borderRadius": "8px",
+    "boxShadow": "0 2px 4px rgba(0,0,0,0.05)",
+
+    // Target the Key subcomponent using the exported selector
+    [`& ${KeyValueKeySelector}`]: {
+        fontFamily: "serif",
+        fontStyle: "italic",
+        color: "$blue1",
+    },
+
+    // Target the Value subcomponent using the exported selector
+    [`& ${KeyValueValueSelector}`]: {
+        fontWeight: "bold",
+        color: "$green1",
+    },
+
+    // Target the Icon subcomponent using the exported selector
+    [`& ${KeyValueIconSelector}`]: {
+        color: "$orange1",
+    },
+});
+
+// Sample items array that shows different ways to use KeyValue items
+const items = [
+    {
+        key: "Turbo",
+        value: "100x",
+    },
+    {
+        key: "Turbo",
+        value: "100x",
+        icon: <Icon name={ICON.heart} />,
+        onClick: () => { alert("Clicked item with heart icon"); },
+    },
+    {
+        value: "99%",
+        icon: <Icon name={ICON.battery} />,
+    },
+    {
+        key: "4,25 V",
+        value: "99%",
+        icon: <Icon name={ICON.battery} />,
+    },
+    {
+        key: "Just key",
+    },
+    {
+        value: "Just value",
+    },
+    {
+        key: <>Multi line<br />key</>,
+    },
+    {
+        value: <>Multi line<br />value</>,
+    },
+];
+
+/**
+ * Default configuration of the KeyValue component with values displayed first
+ * in a 3-column layout. This example showcases different item configurations including:
+ * - Simple key-value pairs
+ * - Items with icons and click handlers
+ * - Value-only or key-only items
+ * - Multi-line content
+ */
+const Default: Story = {
+    args: {
+        items: items,
+        valueFirst: true,
+        cols: 3,
+    },
+};
+
+/**
+ * Two-column layout with keys displayed first (standard key-value order)
+ */
+const TwoColumn: Story = {
+    args: {
+        items: items,
+        valueFirst: false,
+        cols: 2,
+    },
+};
+
+/**
+ * Single column layout that displays each key-value pair in a vertical list
+ */
+const SingleColumn: Story = {
+    args: {
+        items: items,
+        valueFirst: false,
+        cols: 1,
+    },
+};
+
+/**
+ * Custom styled variant using the styled() function to create a component with:
+ * - Custom background and border colors
+ * - Serif font for keys with italic styling and blue color
+ * - Bold values with green color
+ * - Orange-colored icons
+ * - Rounded corners and subtle shadow
+ */
+const CustomStyled: Story = {
+    render: (args) => (
+        <StyledKeyValue
+            items={items}
+            valueFirst={true}
+            cols={2}
+            {...omit(args, ["ref", "items"])}
+        />
+    ),
+};
+
+export { Default, TwoColumn, SingleColumn, CustomStyled };
+export default meta;

package/src/components/ui/keyValue/KeyValue.styled.ts

@@ -0,0 +1,70 @@
+import { borderPxToRem, css, fontPxToRem, styled } from "../../../theme";
+
+const item = css({
+    display: "inline-flex",
+    boxSizing: "border-box",
+    padding: "10px",
+    alignItems: "center",
+    gap: "10px",
+    border: "none",
+    background: "none",
+});
+
+const Container = styled("div", {
+    "--kv-border-color": "$colors$headerBorder",
+    "--kv-border": `${borderPxToRem(1)} solid var(--kv-border-color)`,
+    "--kv-background-color": "white",
+    "--kv-hover-background-color": "$colors$activeBg",
+    "border": "1px solid var(--kv-border-color)",
+    "backgroundColor": "var(--kv-background-color)",
+    "borderRadius": "5px",
+    "display": "flex",
+    "flexWrap": "wrap",
+});
+
+const Item = styled("div", item, {
+    "&:is(button):hover": {
+        background: "var(--kv-hover-background-color)",
+    },
+
+    "variants": {
+        notFirstRow: {
+            true: {
+                borderTop: "var(--kv-border)",
+            },
+        },
+        notFirstCol: {
+            true: {
+                borderLeft: "var(--kv-border)",
+            },
+        },
+    },
+});
+
+const KeyValuePair = styled("div", {
+    display: "flex",
+    flexDirection: "column",
+    gap: "3px",
+});
+
+const Key = styled("div", {
+    fontSize: fontPxToRem(22),
+    color: "$sub",
+});
+
+const Value = styled("div", {
+    fontSize: fontPxToRem(29),
+});
+
+const Icon = styled("div", {
+    "--KeyValueStyledIconDummyVar": "0",
+});
+
+export {
+    Container,
+    Item,
+    KeyValuePair,
+    Key,
+    Value,
+    Icon,
+};

package/src/components/ui/keyValue/KeyValue.tsx

@@ -1,20 +1,25 @@
 import type { ReactElement } from "react";
-import React from "react";
+import React, { forwardRef } from "react";
 
-import classnames from "classnames";
+import {
+    Container,
+    Item,
+    Key,
+    KeyValuePair,
+    Value,
+    Icon,
+} from "./KeyValue.styled";
 
-import styles from "./KeyValue.module.scss";
-
-interface Props {
+type KeyValueProps = {
     items: { key?: React.ReactNode; value?: React.ReactNode; icon?: React.ReactNode; onClick?: () => void }[];
     cols?: number;
     valueFirst?: boolean;
     className?: string;
-}
+};
 
 const DEFAULT_COLS = 2;
 
-const KeyValue: React.FC<Props> = (props) => {
+const KeyValue = forwardRef<HTMLDivElement, KeyValueProps>((props, ref) => {
     const cols = props.cols ?? DEFAULT_COLS;
 
     const items: ReactElement[] = props.items.map((value, key) => {
@@ -24,25 +29,26 @@ const KeyValue: React.FC<Props> = (props) => {
 
         const isFirstRow = key < cols;
         const isFirstCol = (key % cols) === 0;
-        const className = classnames(styles.item, {
-            [styles.itemNotFirstRow as string]: !isFirstRow,
-            [styles.itemNotFirstCol as string]: !isFirstCol,
-        });
 
-        const kvKey = value.key != null ? <div className={styles.key}>{value.key}</div> : null;
-        const kvValue = value.value != null ? <div className={styles.value}>{value.value}</div> : null;
+        const kvKey = value.key != null ? <Key>{value.key}</Key> : null;
+        const kvValue = value.value != null ? <Value>{value.value}</Value> : null;
 
         const keyValue = (
-            <div className={styles.kv}>
+            <KeyValuePair>
                 {props.valueFirst ? kvValue : kvKey}{!props.valueFirst ? kvValue : kvKey}
-            </div>
+            </KeyValuePair>
         );
-        const icon = value.icon != null ? <div className={styles.icon}>{value.icon}</div> : null;
+        const icon = value.icon != null ? <Icon>{value.icon}</Icon> : null;
 
         const component = value.onClick ? "button" : "div";
-        return React.createElement(component, {
+        return React.createElement(Item, {
             // eslint-disable-next-line react/no-array-index-key
-            key, style, className,
+            key: key,
+            style: style,
+            // @ts-expect-error idk why ts can't figure it out, but it works
+            as: component,
+            notFirstRow: !isFirstRow,
+            notFirstCol: !isFirstCol,
         }, <>{icon}{keyValue}</>);
     });
 
@@ -52,18 +58,37 @@ const KeyValue: React.FC<Props> = (props) => {
         // eslint-disable-next-line @typescript-eslint/no-magic-numbers
         const width = `${(100 / cols) * (missingItems)}%`;
         const style = { width };
-        const cls = classnames(styles.item, styles.missingItem);
+
+        const firstRow = items.length < cols;
+        const firstCol = (items.length % cols) === 0;
 
         items.push(
-            <div key={"extra"} style={style} className={cls} />,
+            <Item key={"extra"} css={style} notFirstCol={!firstCol} notFirstRow={!firstRow} />,
         );
     }
 
     return (
-        <div className={classnames(styles.container, props.className)}>
+        <Container className={props.className} ref={ref}>
             {items}
-        </div>
+        </Container>
     );
-};
+});
 
-export { KeyValue };
+KeyValue.displayName = "KeyValue";
+KeyValue.toString = () => Container.toString();
+
+const KeyValueItemSelector = Item.toString();
+const KeyValuePairSelector = KeyValuePair.toString();
+const KeyValueKeySelector = Key.toString();
+const KeyValueValueSelector = Value.toString();
+const KeyValueIconSelector = Icon.toString();
+
+export {
+    KeyValue,
+    KeyValueItemSelector,
+    KeyValuePairSelector,
+    KeyValueKeySelector,
+    KeyValueValueSelector,
+    KeyValueIconSelector,
+};
+export type { KeyValueProps };

package/src/components/ui/line/Line.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { omit } from "@ezez/utils";
 
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Line } from "./Line";
 

package/src/components/ui/loader/CoveringLoader.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react";
+import type { StoryObj, Meta } from "@storybook/react-vite";
 
 import { CoveringLoader } from "./CoveringLoader";
 

package/src/components/ui/loader/FullLoader.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react";
+import type { StoryObj, Meta } from "@storybook/react-vite";
 
 import { FullLoader } from "./FullLoader";
 

package/src/components/ui/loader/Loader.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Loader } from "./Loader";
 

package/src/components/ui/loader/Loading.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react";
+import type { StoryObj, Meta } from "@storybook/react-vite";
 
 import { styled } from "../../../theme";
 

package/src/components/ui/loader/PopLoader.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react";
+import type { StoryObj, Meta } from "@storybook/react-vite";
 
 import { styled } from "../../../theme";
 

package/src/components/ui/loader/PopLoader.tsx

@@ -11,7 +11,7 @@ const Container = styled("div", {
     right: 20,
     top: 20,
     background: "white",
-    border: "1px solid var(--toolbar-border)",
+    border: "1px solid $toolbarBorder",
     borderRadius: 666,
     padding: 10,
 });

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

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { styled } from "../../../theme";
 

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

@@ -30,6 +30,6 @@ interface Props extends StitchesProps {
 /**
  * A component that usually displays result of some action or a tip for the user.
  */
-const Message = StyledMessage as unknown as OverwriteProps<typeof StyledMessage, Props>;
+const Message = StyledMessage as unknown as OverwriteProps<typeof StyledMessage, Props>; // eslint-disable-line @typescript-eslint/no-unsafe-type-assertion
 
 export { Message };

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from "react";
 
-import type { StoryObj, Meta } from "@storybook/react";
+import type { StoryObj, Meta } from "@storybook/react-vite";
 
 import { Button } from "../button/Button";
 import { Label } from "../../form/Label";

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

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react";
+import type { StoryObj, Meta } from "@storybook/react-vite";
 
 import { ModalButtons } from "./ModalButtons";
 import { Modal } from "./Modal";

package/src/components/ui/modal/ModalButtons.styled.ts

@@ -1,4 +1,5 @@
 import { dimensionsPxToRem, styled } from "../../../theme";
+import { fnWithProps } from "../../../types/fnWithProps";
 
 import { NEGATIVE_PADDING } from "./Modal.styled";
 
@@ -41,10 +42,9 @@ const Button = styled("button", {
     },
 });
 
-const ModalButtons = Container as typeof Container & {
-    Button: typeof Button;
-};
-ModalButtons.Button = Button;
+const ModalButtons = fnWithProps(Container, {
+    Button,
+});
 
 export {
     ModalButtons,

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

@@ -15,7 +15,7 @@ const OnButtonClick: React.FC<Props> = (props) => {
         }
 
         const cb = (e: MouseEvent) => {
-            if ((e.target as HTMLDivElement).nodeName.toLowerCase() === "button") {
+            if (e.target instanceof HTMLElement && e.target.nodeName.toLowerCase() === "button") {
                 setTimeout(() => {
                     props.onClick();
                 }, 0);

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

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from "react";
 
 import { SunOne } from "@icon-park/react";
 
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { HeaderIconAction } from "../../layout/header/HeaderIconAction";
 import { Icon, ICON } from "../../icons/Icon";

package/src/components/ui/pop/Pop.styled.ts

@@ -22,7 +22,7 @@ const ListItem = styled("li", {
     "listStyleType": "none",
 
     "& + &": {
-        borderTop: "1px solid var(--border)",
+        borderTop: "1px solid $border",
     },
 });
 

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

@@ -101,9 +101,13 @@ class Pop extends Component<Props, State> {
             console.warn("PopOptions can not find anchor element");
             return;
         }
+        if (!(anchorElement instanceof HTMLElement)) {
+            console.warn("PopOptions anchor element not a HTMLElement");
+            return;
+        }
         // @todo use get derived state
 
-        const [vertical, horizontal] = getElementLocation(anchorElement as HTMLElement);
+        const [vertical, horizontal] = getElementLocation(anchorElement);
         const dimensions = getElementDimensions(html!);
         const rect = anchorElement.getBoundingClientRect();
 

package/src/components/ui/progress/Progress.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { styled } from "../../../theme";
 
@@ -34,6 +34,7 @@ const CustomProgress = styled(Progress, {
 const CustomizedColors: Story = {
     render: (args) => {
         return (
+            // @ts-ignore :shrug:
             <CustomProgress {...args} />
         );
     },