react-miui 0.23.7 → 0.25.0

package/src/components/form/Checkbox.stories.tsx

@@ -0,0 +1,91 @@
+import React, { useCallback, useState } from "react";
+
+import { omit } from "@ezez/utils";
+
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { Div } from "../native";
+import { styled } from "../../theme";
+
+import { Checkbox } from "./Checkbox";
+
+const meta: Meta = {
+    title: "Components/Form/Checkbox",
+    component: Checkbox,
+    tags: ["autodocs", "form"],
+    argTypes: {
+        color: {
+            control: {
+                type: "color",
+            },
+        },
+        defaultChecked: {
+            control: {
+                type: "boolean",
+            },
+        },
+        checked: {
+            control: {
+                type: "boolean",
+            },
+        },
+        disabled: {
+            control: {
+                type: "boolean",
+            },
+        },
+        readOnly: {
+            control: {
+                type: "boolean",
+            },
+        },
+        onChange: {
+            action: "onChange",
+        },
+    },
+    args: {
+        children: "Check me",
+    },
+};
+
+type Story = StoryObj<typeof Checkbox>;
+
+const Primary: Story = {};
+
+const Green = styled(Checkbox, {
+    "--color": "$colors$green1",
+});
+
+const AllAtOnce: Story = {
+    render: (args) => {
+        const [v, setV] = useState(false);
+        const handleToggle = useCallback(() => { setV((prevV) => !prevV); }, []);
+
+        return (
+            <>
+                <Div>Red (deprecated prop):</Div>
+                <Checkbox {...args} color={"red"} />
+                <Div>Blue (css):</Div>
+                <Checkbox {...args} css={{ "--color": "$blue5" }} />
+                <Div>Green (composed):</Div>
+                <Green {...omit(args, ["ref"])} />
+                <Div>Always controlled: (checked: {String(v)})</Div>
+                <Checkbox {...args} checked={v} onChange={handleToggle} />
+                <Div>Always disabled:</Div>
+                <Checkbox {...args} disabled={true} />
+                <Div>Always read-only:</Div>
+                <Checkbox {...args} readOnly={true} />
+            </>
+        );
+    },
+    args: {
+        defaultChecked: true,
+    },
+};
+
+export {
+    Primary,
+    AllAtOnce,
+};
+
+export default meta;

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

@@ -0,0 +1,79 @@
+import { styled } from "../../theme";
+
+const TextLabel = styled("span");
+
+const CheckmarkWrapper = styled("div", {
+    "borderRadius": "100px",
+    "background": "none",
+    "border": "1px solid $inactiveBg",
+    "width": "18px",
+    "height": "18px",
+    "display": "inline-flex",
+    "justifyContent": "center",
+    "alignItems": "center",
+    "verticalAlign": "middle",
+    "boxSizing": "border-box",
+
+    "& svg": {
+        display: "none",
+        width: "9px",
+        height: "9px",
+        fill: "white",
+    },
+
+    [`+ ${TextLabel.toString()}`]: {
+        verticalAlign: "middle",
+    },
+
+    ":checked + &": {
+        "borderWidth": 0,
+        "color": "var(--color)",
+        "background": "currentColor",
+        "& svg": {
+            display: "inline-block",
+        },
+    },
+
+    ":checked:disabled": {
+        background: "$inactiveDarkBg",
+    },
+
+    ":disabled + &": {
+        background: "$activeBg",
+        [`+ ${TextLabel.toString()}`]: {
+            color: "$inputDisabledText",
+        },
+    },
+
+    ":readonly + &": {
+        [`+ ${TextLabel.toString()}`]: {
+            color: "$inputDisabledText",
+        },
+    },
+});
+
+const LabelWrapper = styled("label", {
+    "--color": "$colors$mainColor",
+
+    "& input": {
+        "width": 0,
+        "height": 0,
+        "transform": "scale(0)",
+        "margin": 0,
+        "verticalAlign": "middle",
+        "&:focus-visible": {
+            [`+ ${CheckmarkWrapper.toString()}`]: {
+                boxShadow: "0 0 5px black",
+            },
+        },
+        [`+ ${CheckmarkWrapper.toString()} + ${TextLabel.toString()}:not(:empty)`]: {
+            marginLeft: "0.75em",
+        },
+    },
+});
+
+export {
+    LabelWrapper,
+    CheckmarkWrapper,
+    TextLabel,
+};

package/src/components/form/Checkbox.tsx

@@ -1,50 +1,57 @@
-import React from "react";
+import React, { useCallback } from "react";
 
-import classnames from "classnames";
+import type { ThemeCSS } from "../../theme";
 
 import { Checkmark } from "../icons/Checkmark";
 
-import styles from "./Checkbox.module.scss";
+import { CheckmarkWrapper, LabelWrapper, TextLabel } from "./Checkbox.styled";
 
-interface Props {
+type WrapperProps = React.ComponentProps<typeof LabelWrapper>;
+type InputProps = React.ComponentProps<"input">;
+
+interface Props extends Pick<WrapperProps, "css" | "className">, Omit<InputProps, "className"> {
+    /**
+     * @deprecated use --color css variable instead
+     */
     color?: string;
-    name?: string;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    checked?: boolean;
-    disabled?: boolean;
-    readOnly?: boolean;
-    className?: string;
     children: React.ReactNode;
 }
 
-const Checkbox: React.FC<Props> = (props) => {
-    const style: React.CSSProperties = {};
-    props.color && (style.color = props.color);
-
-    const cls = classnames(props.className, styles.checkbox, {
-        [styles.disabled as string]: props.disabled,
-        [styles.readOnly as string]: props.readOnly,
-    });
-
-    const checkmarkCls = classnames(styles.checkmark, {
-        [styles.checkmarkDisabled as string]: props.disabled,
-        [styles.checkmarkChecked as string]: props.checked,
-        [styles.checkmarkReadOnly as string]: props.readOnly,
-    });
+/**
+ * Checkbox component
+ */
+const Checkbox: React.FC<Props> = ({
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    color, name, onChange, children, css, className, ...inputProps
+}) => {
+    const style: ThemeCSS = {};
+    color && (style["--color"] = color);
+
+    const wrapperProps: { css?: NonNullable<typeof css>; className?: typeof className } = { className };
+    if (css) {
+        wrapperProps.css = css;
+    }
+
+    const handleChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
+        if (inputProps.readOnly) {
+            // eslint-disable-next-line no-param-reassign
+            e.currentTarget.checked = !e.currentTarget.checked;
+            return;
+        }
+        onChange?.(e);
+    }, [inputProps.readOnly, onChange]);
 
     return (
-        <label className={cls}>
+        <LabelWrapper {...wrapperProps}>
             <input
                 type={"checkbox"}
-                name={props.name}
-                onChange={props.onChange}
-                checked={props.checked}
-                disabled={props.disabled}
-                readOnly={props.readOnly}
+                name={name}
+                onChange={handleChange}
+                {...inputProps}
             />
-            <span style={style} className={checkmarkCls}><Checkmark /></span>
-            <span className={styles.label}>{props.children}</span>
-        </label>
+            <CheckmarkWrapper css={style}><Checkmark /></CheckmarkWrapper>
+            <TextLabel>{children}</TextLabel>
+        </LabelWrapper>
     );
 };
 

package/src/{demo/components/layout/table/TableDemo.tsx → components/layout/table/Table.stories.tsx}

@@ -1,14 +1,27 @@
 import React from "react";
 
-import { Table } from "../../../../index";
+import type { StoryObj, Meta } from "@storybook/react";
 
-import styles from "./TableDemo.module.scss";
+import { Table } from "./Table";
 
-interface Props {}
+const meta: Meta = {
+    title: "Components/Layout/Table/Table",
+    component: Table,
+    tags: ["autodocs", "layout"],
 
-const TableDemo: React.FC<Props> = (props) => {
-    return (
-        <Table variant={"striped"}>
+    argTypes: {},
+    args: {
+        striped: true,
+        wide: true,
+        centered: true,
+    },
+};
+
+type Story = StoryObj<typeof Table>;
+
+const Primary: Story = {
+    render: args => (
+        <Table {...args}>
             <thead>
                 <tr>
                     <th>Name</th>
@@ -20,36 +33,39 @@ const TableDemo: React.FC<Props> = (props) => {
                 <tr>
                     <td>Stefan</td>
                     <td>41</td>
-                    <td className={styles.actions}>edit</td>
+                    <td>edit</td>
                 </tr>
                 <tr>
                     <td>Juliette</td>
                     <td>23</td>
-                    <td className={styles.actions}>edit</td>
+                    <td>edit</td>
                 </tr>
                 <tr>
                     <td>Amy</td>
                     <td>55</td>
-                    <td className={styles.actions}>edit</td>
+                    <td>edit</td>
                 </tr>
                 <tr>
                     <td>Stefan</td>
                     <td>41</td>
-                    <td className={styles.actions}>edit</td>
+                    <td>edit</td>
                 </tr>
                 <tr>
                     <td>Juliette</td>
                     <td>23</td>
-                    <td className={styles.actions}>edit</td>
+                    <td>edit</td>
                 </tr>
                 <tr>
                     <td>Amy</td>
                     <td>55</td>
-                    <td className={styles.actions}>edit</td>
+                    <td>edit</td>
                 </tr>
             </tbody>
         </Table>
-    );
+    ),
 };
 
-export { TableDemo };
+export default meta;
+export {
+    Primary,
+};

package/src/components/layout/table/Table.styled.ts

@@ -0,0 +1,40 @@
+import { styled } from "../../../theme";
+
+const StyledTable = styled("table", {
+    "borderSpacing": "10px",
+    "borderCollapse": "collapse",
+
+    "> * > tr > *": {
+        textAlign: "left",
+        padding: "0.75em 0.5em",
+        borderBottom: "1px solid $border",
+    },
+
+    "> thead > tr:last-child > *": {
+        borderBottom: "2px solid $border",
+        boxShadow: "0 4px 10px -10px rgba(0, 0, 0, 0.6)",
+    },
+
+    "variants": {
+        striped: {
+            true: {
+                "> tbody > tr:nth-child(even) > *": {
+                    background: "$tableStripedBg",
+                },
+            },
+        },
+        centered: {
+            true: {
+                marginLeft: "auto",
+                marginRight: "auto",
+            },
+        },
+        wide: {
+            true: {
+                width: "100%",
+            },
+        },
+    },
+});
+
+export { StyledTable };

package/src/components/layout/table/Table.tsx

@@ -1,29 +1 @@
-import React from "react";
-
-import classnames from "classnames";
-
-import { makeVariants } from "../../../utils/index";
-
-import styles from "./Table.module.scss";
-
-type Variant = "striped" | "raw" | "wide" | "centered";
-
-interface Props {
-    variant?: Variant | Variant[];
-}
-
-const Table: React.FC<React.TableHTMLAttributes<HTMLTableElement> & Props> = (
-    { className, children, variant, ...props },
-) => {
-    const v = makeVariants(variant);
-
-    const cls = classnames(className, {
-        [styles.table as string]: !v.includes("raw"),
-        [styles.striped as string]: v.includes("striped"),
-        [styles.wide as string]: v.includes("wide"),
-        [styles.centered as string]: v.includes("centered"),
-    });
-    return <table className={cls} {...props}>{children}</table>;
-};
-
-export { Table };
+export { StyledTable as Table } from "./Table.styled";

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

@@ -0,0 +1,102 @@
+import React, { useCallback, useState } from "react";
+
+import { SunOne } from "@icon-park/react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { HeaderIconAction } from "../../layout/header/HeaderIconAction";
+import { Icon, ICON } from "../../icons/Icon";
+import { StickyHeader } from "../../layout/header/StickyHeader";
+import { Header } from "../../layout/header/Header";
+import { Section } from "../../layout/section/Section";
+
+import { Pop } from "./Pop";
+
+const meta: Meta = {
+    title: "Components/UI/Pop",
+    component: Pop,
+    tags: ["autodocs", "layout"],
+    args: {
+        value: 25,
+        valueFrom: 15,
+        scaleFrom: 10,
+        scaleTo: 30,
+    },
+};
+
+type Story = StoryObj<typeof Pop>;
+
+const handleClick = () => {
+    console.info("Clicked an option");
+};
+
+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);
+        const [leftOpen, setLeftOpen] = useState(false);
+
+        const handleToggle = useCallback(() => {
+            setOpen(p => !p);
+        }, []);
+
+        const handleLeftToggle = useCallback(() => {
+            setLeftOpen(p => !p);
+        }, []);
+
+        const handleClose = useCallback(() => {
+            setOpen(false);
+        }, []);
+
+        const handleLeftClose = useCallback(() => {
+            setLeftOpen(false);
+        }, []);
+
+        const after = (
+            <>
+                <HeaderIconAction icon={ICON.config} onClick={handleToggle} />
+                <Pop anchor={"prev"} open={open} onClose={handleClose}>
+                    <Pop.Option icon={<Icon name={ICON.heart} />} onClick={handleClick}>Add new list</Pop.Option>
+                    <Pop.Option icon={<Icon name={ICON.trash} />} onClick={handleClick}>Remove empty lists</Pop.Option>
+                    <Pop.Option onClick={handleClick}>Configure</Pop.Option>
+                </Pop>
+            </>
+        );
+
+        const left = (
+            <>
+                <HeaderIconAction icon={ICON.checkmark} onClick={handleLeftToggle} />
+                <Pop anchor={"prev"} open={leftOpen} onClose={handleLeftClose}>
+                    <Pop.Option icon={<Icon name={ICON.heart} />} onClick={handleClick}>Add new list</Pop.Option>
+                    <Pop.Option icon={<Icon name={ICON.trash} />} onClick={handleClick}>Remove empty lists</Pop.Option>
+                    <Pop.Option icon={<SunOne />} onClick={handleClick}>Configure</Pop.Option>
+                    <Pop.Option icon={<Icon name={ICON.heart} />} onClick={handleClick}>Add new list</Pop.Option>
+                    <Pop.Option icon={<Icon name={ICON.trash} />} onClick={handleClick}>Remove empty lists</Pop.Option>
+                    <Pop.Option onClick={handleClick}>Configure</Pop.Option>
+                    <Pop.Option icon={<Icon name={ICON.heart} />} onClick={handleClick}>Add new list</Pop.Option>
+                    <Pop.Option icon={<Icon name={ICON.trash} />} onClick={handleClick}>Remove empty lists</Pop.Option>
+                    <Pop.Option icon={<>text</>} onClick={handleClick}>Configure</Pop.Option>
+                </Pop>
+            </>
+        );
+
+        return (
+            <StickyHeader>
+                <Header before={left} after={after}>
+                    Some place
+                </Header>
+                <StickyHeader.Content>
+                    <Section horizontal={true} vertical={true} css={{ minHeight: 600 }}>
+                        Click on the left or right icon to open the menu
+                    </Section>
+                </StickyHeader.Content>
+            </StickyHeader>
+        );
+    },
+};
+
+export default meta;
+export {
+    Primary,
+};

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

@@ -0,0 +1,68 @@
+import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme";
+
+const Overlay = styled("div", {
+    position: "fixed",
+    background: "#0000004c",
+    inset: 0,
+    zIndex: 4,
+});
+
+const List = styled("ul", {
+    zIndex: 5,
+    position: "absolute",
+    background: "white",
+    margin: 0,
+    padding: 0,
+    listStyleType: "none",
+});
+
+const ListItem = styled("li", {
+    "margin": 0,
+    "padding": 0,
+    "listStyleType": "none",
+
+    "& + &": {
+        borderTop: "1px solid var(--border)",
+    },
+});
+
+const Button = styled("button", {
+    "border": "none",
+    "background": "white",
+    "height": dimensionsPxToRem(116),
+    "padding": `0 ${dimensionsPxToRem(42)}`,
+    "boxSizing": "border-box",
+    "width": "100%",
+    "minWidth": dimensionsPxToRem(460),
+    "textAlign": "left",
+    "color": "$popText",
+    "fontSize": fontPxToRem(26),
+    "fontWeight": "revert",
+    "display": "flex",
+    "alignItems": "center",
+
+    "&:hover": {
+        background: "$activeBg",
+    },
+});
+
+const Icon = styled("div", {
+    fill: "currentColor",
+    marginRight: dimensionsPxToRem(42),
+});
+
+const FakeIcon = styled("span", {
+    display: "inline-block",
+    width: 16,
+    height: 16,
+    marginRight: dimensionsPxToRem(42),
+});
+
+export {
+    Overlay,
+    List,
+    ListItem,
+    Button,
+    Icon,
+    FakeIcon,
+};

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

@@ -1,13 +1,12 @@
 import React, { Component, createRef } from "react";
 
-import classnames from "classnames";
+import type { ThemeCSS } from "../../../theme";
 
 import { HandleEsc } from "../../utils/HandleEsc";
 
 import { OnButtonClick } from "./OnButtonClick";
 import { PopOption } from "./PopOption";
-
-import styles from "./Pop.module.scss";
+import { List, Overlay } from "./Pop.styled";
 
 interface Props {
     open: boolean;
@@ -51,6 +50,11 @@ const getElementLocation = (element: HTMLElement, outerElement = html): [State["
     return [verticalLocation, horizontalLocation];
 };
 
+/**
+ * Popup menu component.
+ *
+ * It has a bug that miscalculates the position inside Storybook.
+ */
 class Pop extends Component<Props, State> {
     public constructor(props: Props) {
         super(props);
@@ -125,7 +129,7 @@ class Pop extends Component<Props, State> {
     };
 
     public override render() {
-        const style: React.CSSProperties = {};
+        const style: ThemeCSS = {};
 
         if (this.state.vertical === "top") {
             style.top = this.state.y;
@@ -148,17 +152,15 @@ 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={cls} ref={this.rootRef} onClick={this.handleOverlayClick}>
+            <Overlay className={this.props.className} ref={this.rootRef} onClick={this.handleOverlayClick}>
                 {esc}
                 <OnButtonClick onClick={this.handleEsc}>
-                    <ul className={styles.pop} style={style}>
+                    <List css={style}>
                         {this.props.children}
-                    </ul>
+                    </List>
                 </OnButtonClick>
-            </div>
+            </Overlay>
         );
     }
 }

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

@@ -1,8 +1,6 @@
 import React from "react";
 
-import classnames from "classnames";
-
-import styles from "./Pop.module.scss";
+import { Button, FakeIcon, Icon, ListItem } from "./Pop.styled";
 
 interface Props {
     icon?: React.ReactElement;
@@ -14,13 +12,13 @@ interface Props {
 
 const PopOption: React.FC<Props> = (props) => {
     const ic = props.icon
-        ? <div className={styles.icon}>{props.icon}</div>
-        : ((props.forceEmptyIcon ?? true) ? <span className={styles.fakeIcon} /> : null);
+        ? <Icon>{props.icon}</Icon>
+        : ((props.forceEmptyIcon ?? true) ? <FakeIcon /> : null);
 
     return (
-        <li className={classnames(props.className, styles.li)}>
-            <button onClick={props.onClick} className={styles.button}>{ic}{props.children}</button>
-        </li>
+        <ListItem className={props.className}>
+            <Button onClick={props.onClick}>{ic}{props.children}</Button>
+        </ListItem>
     );
 };