react-miui 0.28.3 → 0.30.0

package/src/components/ui/action/EqualActions.tsx

@@ -1,36 +1,43 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
-import classnames from "classnames";
+import type { ThemeCSS } from "../../../theme";
 
 import { Action } from "./Action";
+import { StyledEqualActions } from "./EqualActions.styled";
 
-import styles from "./EqualActions.module.scss";
-
-interface Props {
+type EqualActionsProps = {
     className?: string;
     mode?: "horizontal" | "vertical";
     children: React.ReactNode;
-}
+};
 
-const EqualActions: React.FC<Props> = (props) => {
+const EqualActions = forwardRef<HTMLDivElement, EqualActionsProps>((props, ref) => {
     React.Children.forEach(props.children, (child) => {
         if (!child || typeof child !== "object" || !("type" in child) || child.type !== Action) {
             throw new TypeError("Every child of EqualActions must be an Action component");
         }
     });
 
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    const style = {
+    const style: ThemeCSS = {
         "--actions-count": React.Children.count(props.children),
-    } as React.CSSProperties;
+    };
 
-    const cls = classnames(styles.actions, props.className, { [styles.vertical as string]: props.mode === "vertical" });
+    const isVertical = props.mode === "vertical";
 
     return (
-        <div className={cls} style={style}>
+        <StyledEqualActions
+            className={props.className}
+            vertical={isVertical}
+            css={style}
+            ref={ref}
+        >
             {props.children}
-        </div>
+        </StyledEqualActions>
     );
-};
+});
+
+EqualActions.displayName = "EqualActions";
+EqualActions.toString = () => StyledEqualActions.toString();
 
 export { EqualActions };
+export type { EqualActionsProps };

package/src/components/ui/button/Button.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } 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/directionPad/Button.styled.ts

@@ -0,0 +1,25 @@
+import { styled } from "../../../theme";
+
+const StyledButton = styled("button", {
+    height: "50px",
+    width: "50px",
+    margin: "0",
+    borderRadius: "666px",
+    border: "none",
+    display: "block",
+    background: "none",
+});
+
+const StyledDot = styled("span", {
+    display: "block",
+    width: "4px",
+    height: "4px",
+    borderRadius: "666px",
+    background: "black",
+    margin: "auto",
+});
+
+export {
+    StyledButton,
+    StyledDot,
+};

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

@@ -1,15 +1,23 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
-import styles from "./Pad.module.scss";
+import { StyledButton, StyledDot } from "./Button.styled";
 
-interface Props {
+type PadButtonProps = {
     onClick?: (() => void) | undefined;
-}
+};
 
-const PadButton: React.FC<Props> = (props) => {
+const PadButton = forwardRef<HTMLButtonElement, PadButtonProps>((props, ref) => {
     return (
-        <button {...props} className={styles.pad__button}><span className={styles.pad__dot} /></button>
+        <StyledButton {...props} ref={ref}>
+            <StyledDot />
+        </StyledButton>
     );
-};
+});
+
+PadButton.displayName = "PadButton";
+PadButton.toString = () => StyledButton.toString();
+
+const PadButtonDotSelector = StyledDot.toString();
 
-export { PadButton };
+export { PadButton, PadButtonDotSelector };
+export type { PadButtonProps };

package/src/components/ui/directionPad/Middle.styled.ts

@@ -0,0 +1,19 @@
+import { styled } from "../../../theme";
+
+const StyledMiddle = styled("button", {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: "0",
+    height: "50px",
+    width: "50px",
+    border: "1px solid #999",
+    boxSizing: "border-box",
+    borderRadius: "666px",
+    background: "none",
+    textAlign: "center",
+});
+
+export {
+    StyledMiddle,
+};

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

@@ -1,16 +1,22 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
-import styles from "./Pad.module.scss";
+import { StyledMiddle } from "./Middle.styled";
 
-interface Props {
+type PadMiddleProps = {
     label?: string | undefined;
     onClick?: (() => void) | undefined;
-}
+};
 
-const PadMiddle: React.FC<Props> = (props) => {
+const PadMiddle = forwardRef<HTMLButtonElement, PadMiddleProps>((props, ref) => {
     return (
-        <button onClick={props.onClick} className={styles.pad__middle}>{props.label}</button>
+        <StyledMiddle onClick={props.onClick} ref={ref}>
+            {props.label}
+        </StyledMiddle>
     );
-};
+});
+
+PadMiddle.displayName = "PadMiddle";
+PadMiddle.toString = () => StyledMiddle.toString();
 
 export { PadMiddle };
+export type { PadMiddleProps };

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

@@ -0,0 +1,143 @@
+import React, { useState, useCallback } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { DirectionPad } from "./Pad";
+
+const meta: Meta<typeof DirectionPad> = {
+    title: "UI/DirectionPad",
+    component: DirectionPad,
+    tags: ["autodocs"],
+};
+
+type Story = StoryObj<typeof DirectionPad>;
+
+/**
+ * Basic usage of the DirectionPad component with all direction buttons and a middle button.
+ * This example shows which button was last clicked.
+ */
+const Default: Story = {
+    render: () => {
+        const [lastClick, setLastClick] = useState("<none>");
+
+        const handleLeftClick = useCallback(() => {
+            setLastClick("left");
+        }, []);
+
+        const handleRightClick = useCallback(() => {
+            setLastClick("right");
+        }, []);
+
+        const handleUpClick = useCallback(() => {
+            setLastClick("up");
+        }, []);
+
+        const handleDownClick = useCallback(() => {
+            setLastClick("down");
+        }, []);
+
+        const handleMiddleClick = useCallback(() => {
+            setLastClick("res");
+        }, []);
+
+        return (
+            <>
+                <DirectionPad
+                    onLeftPress={handleLeftClick}
+                    onRightPress={handleRightClick}
+                    onUpPress={handleUpClick}
+                    onDownPress={handleDownClick}
+                    onMiddlePress={handleMiddleClick}
+                    middleLabel={"RES"}
+                />
+                <div style={{ marginTop: "20px", textAlign: "center" }}>
+                    Last clicked button: {lastClick}
+                </div>
+            </>
+        );
+    },
+};
+
+/**
+ * A simplified version of the DirectionPad with only horizontal controls (left/right).
+ */
+const HorizontalOnly: Story = {
+    render: () => {
+        const [lastClick, setLastClick] = useState("<none>");
+
+        const handleLeftClick = useCallback(() => {
+            setLastClick("left");
+        }, []);
+
+        const handleRightClick = useCallback(() => {
+            setLastClick("right");
+        }, []);
+
+        const handleMiddleClick = useCallback(() => {
+            setLastClick("middle");
+        }, []);
+
+        return (
+            <>
+                <DirectionPad
+                    onLeftPress={handleLeftClick}
+                    onRightPress={handleRightClick}
+                    onMiddlePress={handleMiddleClick}
+                    middleLabel={"OK"}
+                />
+                <div style={{ marginTop: "20px", textAlign: "center" }}>
+                    Last clicked button: {lastClick}
+                </div>
+            </>
+        );
+    },
+};
+
+/**
+ * Custom styled variant of DirectionPad with a different background color.
+ */
+const CustomStyled: Story = {
+    render: () => {
+        const [lastClick, setLastClick] = useState("<none>");
+
+        const handleLeftClick = useCallback(() => {
+            setLastClick("left");
+        }, []);
+
+        const handleRightClick = useCallback(() => {
+            setLastClick("right");
+        }, []);
+
+        const handleUpClick = useCallback(() => {
+            setLastClick("up");
+        }, []);
+
+        const handleDownClick = useCallback(() => {
+            setLastClick("down");
+        }, []);
+
+        const handleMiddleClick = useCallback(() => {
+            setLastClick("middle");
+        }, []);
+
+        return (
+            <div style={{ backgroundColor: "#f5f5f5", padding: "20px", borderRadius: "8px" }}>
+                <DirectionPad
+                    onLeftPress={handleLeftClick}
+                    onRightPress={handleRightClick}
+                    onUpPress={handleUpClick}
+                    onDownPress={handleDownClick}
+                    onMiddlePress={handleMiddleClick}
+                    middleLabel={"OK"}
+                    className={"custom-pad"}
+                />
+                <div style={{ marginTop: "20px", textAlign: "center" }}>
+                    Last clicked button: {lastClick}
+                </div>
+            </div>
+        );
+    },
+};
+
+export { Default, HorizontalOnly, CustomStyled };
+export default meta;

package/src/components/ui/directionPad/Pad.styled.ts

@@ -0,0 +1,22 @@
+import { styled } from "../../../theme";
+
+const StyledPad = styled("div", {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "150px",
+    borderRadius: "666px",
+    width: "150px",
+    border: "1px solid #aaa",
+    background: "white",
+});
+
+const StyledLine = styled("div", {
+    display: "flex",
+});
+
+export {
+    StyledPad,
+    StyledLine,
+};

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

@@ -1,13 +1,10 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
-import classnames from "classnames";
-
-import { PadButton as Button } from "./Button";
+import { PadButton as Button, PadButtonDotSelector } from "./Button";
 import { PadMiddle as Middle } from "./Middle";
+import { StyledPad, StyledLine } from "./Pad.styled";
 
-import styles from "./Pad.module.scss";
-
-interface Props {
+type DirectionPadProps = {
     onUpPress?: () => void;
     onDownPress?: () => void;
     onLeftPress?: () => void;
@@ -15,24 +12,38 @@ interface Props {
     onMiddlePress?: () => void;
     middleLabel?: string;
     className?: string;
-}
+};
 
-const Pad: React.FC<Props> = (props) => {
+const Pad = forwardRef<HTMLDivElement, DirectionPadProps>((props, ref) => {
     return (
-        <div className={classnames(props.className, styles.pad)}>
-            <div className={styles.pad__line}>
+        <StyledPad className={props.className} ref={ref}>
+            <StyledLine>
                 <Button onClick={props.onUpPress} />
-            </div>
-            <div className={styles.pad__line}>
+            </StyledLine>
+            <StyledLine>
                 <Button onClick={props.onLeftPress} />
                 <Middle onClick={props.onMiddlePress} label={props.middleLabel} />
                 <Button onClick={props.onRightPress} />
-            </div>
-            <div className={styles.pad__line}>
+            </StyledLine>
+            <StyledLine>
                 <Button onClick={props.onDownPress} />
-            </div>
-        </div>
+            </StyledLine>
+        </StyledPad>
     );
-};
+});
 
-export { Pad as DirectionPad };
+Pad.displayName = "DirectionPad";
+Pad.toString = () => StyledPad.toString();
+
+const DirectionPadLineSelector = StyledLine.toString();
+const DirectionPadButtonSelector = Button.toString();
+const DirectionPadMiddleSelector = Middle.toString();
+
+export {
+    Pad as DirectionPad,
+    DirectionPadLineSelector,
+    DirectionPadButtonSelector,
+    DirectionPadMiddleSelector,
+    PadButtonDotSelector as DirectionPadButtonDotSelector,
+};
+export type { DirectionPadProps };

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

@@ -0,0 +1,167 @@
+import React, { useState, useCallback } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { styled } from "../../../theme";
+import { Section } from "../../layout/section/Section";
+import { Button } from "../button/Button";
+
+import { Drawer } from "./Drawer";
+
+const meta: Meta<typeof Drawer> = {
+    title: "UI/Drawer",
+    component: Drawer,
+    parameters: {
+        layout: "fullscreen",
+    },
+    tags: ["autodocs"],
+};
+
+type Story = StoryObj<typeof Drawer>;
+
+/**
+ * Basic implementation of the Drawer component with a toggle button.
+ */
+const Default: Story = {
+    render: () => {
+        const [isOpen, setisOpen] = useState(false);
+
+        const handleToggleOpen = useCallback(() => {
+            setisOpen((prev) => !prev);
+        }, []);
+
+        const handleClose = useCallback(() => {
+            setisOpen(false);
+        }, []);
+
+        return (
+            <div style={{ padding: "20px" }}>
+                <Drawer isOpen={isOpen} onClose={handleClose}>
+                    <div style={{ padding: "20px" }}>
+                        <h2>Drawer Content</h2>
+                        <p>This is the content inside the drawer.</p>
+                        <p>Press ESC to close.</p>
+                    </div>
+                </Drawer>
+                <Button onClick={handleToggleOpen}>
+                    {isOpen ? "Close Drawer" : "Open Drawer"}
+                </Button>
+            </div>
+        );
+    },
+};
+
+/**
+ * Drawer with custom close behavior where ESC key doesn't close the drawer.
+ */
+const NoEscClose: Story = {
+    render: () => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+        const [open, setOpen] = useState(false);
+
+        const handleToggleOpen = useCallback(() => {
+            setOpen((prev) => !prev);
+        }, []);
+
+        const handleClose = useCallback(() => {
+            setOpen(false);
+        }, []);
+
+        return (
+            <div style={{ padding: "20px" }}>
+                <Drawer isOpen={open} onClose={handleClose} closeOnEsc={false}>
+                    <div style={{ padding: "20px" }}>
+                        <h2>Drawer Without ESC Close</h2>
+                        <p>This drawer will not close when you press ESC.</p>
+                        <p>Use the button below to close it.</p>
+                        <Button onClick={handleClose}>Close Drawer</Button>
+                    </div>
+                </Drawer>
+                <Button onClick={handleToggleOpen}>
+                    {open ? "Close Drawer" : "Open Drawer (No ESC Close)"}
+                </Button>
+            </div>
+        );
+    },
+};
+
+/**
+ * Drawer with content that demonstrates scrolling behavior.
+ */
+const WithLongContent: Story = {
+    render: () => {
+        const [isOpen, setIsOpen] = useState(false);
+
+        const handleToggleOpen = useCallback(() => {
+            setIsOpen(prev => !prev);
+        }, []);
+
+        const handleClose = useCallback(() => {
+            setIsOpen(false);
+        }, []);
+
+        return (
+            <div style={{ padding: "20px" }}>
+                <Drawer isOpen={isOpen} onClose={handleClose}>
+                    <div style={{ padding: "20px" }}>
+                        <h2>Drawer with Long Content</h2>
+                        <p>This drawer has enough content to demonstrate scrolling behavior.</p>
+                        {Array(20).fill(0).map((_, i) => (
+                            <Section key={String(`${i}`)} vertical={true} horizontal={true}>
+                                <h3>Section {i + 1}</h3>
+                                <p>This is content section {i + 1} in the scrollable drawer.</p>
+                            </Section>
+                        ))}
+                    </div>
+                </Drawer>
+                <Button onClick={handleToggleOpen}>
+                    {isOpen ? "Close Drawer" : "Open Drawer with Long Content"}
+                </Button>
+            </div>
+        );
+    },
+};
+
+/**
+ * Custom styled Drawer with a different background color and border radius.
+ */
+const CustomStyledDrawer = styled(Drawer, {
+    "&&": {
+        background: "linear-gradient(to bottom, #c5f7fa, #63cfe2)",
+    },
+});
+
+/**
+ * A custom styled version of the Drawer component with a gradient background and rounded top corners.
+ */
+const CustomStyled: Story = {
+    render: () => {
+        const [isOpen, setIsOpen] = useState(false);
+
+        const handleToggleOpen = useCallback(() => {
+            setIsOpen(prev => !prev);
+        }, []);
+
+        const handleClose = useCallback(() => {
+            setIsOpen(false);
+        }, []);
+
+        return (
+            <div style={{ padding: "20px" }}>
+                <CustomStyledDrawer isOpen={isOpen} onClose={handleClose}>
+                    <div style={{ padding: "20px" }}>
+                        <h2>Custom Styled Drawer</h2>
+                        <p>This drawer has custom styling with a gradient background</p>
+                        <Button onClick={handleClose}>Close Drawer</Button>
+                    </div>
+                </CustomStyledDrawer>
+                <Button onClick={handleToggleOpen}>
+                    {isOpen ? "Close Custom Drawer" : "Open Custom Drawer"}
+                </Button>
+            </div>
+        );
+    },
+};
+
+export { Default, NoEscClose, WithLongContent, CustomStyled };
+export default meta;

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,
+};