react-miui 0.21.0 → 0.22.0

package/esm/components/ui/modal/ModalButtons.styled.js

@@ -0,0 +1,39 @@
+import { dimensionsPxToRem, styled } from "../../../theme.js";
+import { NEGATIVE_PADDING } from "./Modal.styled";
+const Container = styled("div", {
+    display: "flex",
+    marginTop: dimensionsPxToRem(100),
+    mx: NEGATIVE_PADDING,
+    marginBottom: NEGATIVE_PADDING,
+});
+const Button = styled("button", {
+    "border": "none",
+    "borderTop": "1px solid $modalButtonBorder",
+    "background": "$modalButtonBg",
+    "flex": 1,
+    "height": dimensionsPxToRem(156),
+    "fontWeight": 500,
+    "display": "flex",
+    "alignItems": "center",
+    "justifyContent": "center",
+    "&:not(:first-child)": {
+        borderLeft: "1px solid $modalButtonBorder",
+    },
+    "&:first-child": {
+        borderBottomLeftRadius: dimensionsPxToRem(12),
+    },
+    "&:last-child": {
+        borderBottomRightRadius: dimensionsPxToRem(12),
+    },
+    "variants": {
+        variant: {
+            main: {
+                color: "$mainColor",
+            },
+        },
+    },
+});
+const ModalButtons = Container;
+ModalButtons.Button = Button;
+export { ModalButtons, };
+//# sourceMappingURL=ModalButtons.styled.js.map

package/esm/components/ui/modal/ModalButtons.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalButtons.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButtons.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,EAAE;IAC5B,OAAO,EAAE,MAAM;IACf,SAAS,EAAE,iBAAiB,CAAC,GAAG,CAAC;IACjC,EAAE,EAAE,gBAAgB;IACpB,YAAY,EAAE,gBAAgB;CACjC,CAAC,CAAC;AAEH,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,EAAE;IAC5B,QAAQ,EAAE,MAAM;IAChB,WAAW,EAAE,8BAA8B;IAC3C,YAAY,EAAE,gBAAgB;IAC9B,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,iBAAiB,CAAC,GAAG,CAAC;IAChC,YAAY,EAAE,GAAG;IACjB,SAAS,EAAE,MAAM;IACjB,YAAY,EAAE,QAAQ;IACtB,gBAAgB,EAAE,QAAQ;IAE1B,qBAAqB,EAAE;QACnB,UAAU,EAAE,8BAA8B;KAC7C;IAED,eAAe,EAAE;QACb,sBAAsB,EAAE,iBAAiB,CAAC,EAAE,CAAC;KAChD;IAED,cAAc,EAAE;QACZ,uBAAuB,EAAE,iBAAiB,CAAC,EAAE,CAAC;KACjD;IAED,UAAU,EAAE;QACR,OAAO,EAAE;YACL,IAAI,EAAE;gBACF,KAAK,EAAE,YAAY;aACtB;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,SAEpB,CAAC;AACF,YAAY,CAAC,MAAM,GAAG,MAAM,CAAC;AAE7B,OAAO,EACH,YAAY,GACf,CAAC"}

package/esm/components/ui/pop/Pop.module.scss

@@ -38,6 +38,7 @@
     text-align: left;
     color: var(--pop-text);
     font-size: calc(26px / var(--ratio-font));
+    font-weight: revert;
     display: flex;
     align-items: center;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {
@@ -13,7 +13,7 @@
     "lint": "eslint src --ext .ts,.tsx,.js,.jsx,.mjs",
     "lint:fix": "yarn lint --fix",
     "prepack": "yarn compile",
-    "prepublishOnly": "yarn audit && yarn lint && yarn test && yarn docs",
+    "prepublishOnly": "yarn lint && yarn test && yarn docs",
     "start:dev": "yarn storybook",
     "start:dev:legacy": "next dev",
     "deploy:dev": "next build && next export && netlify deploy --dir out",

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

@@ -0,0 +1,30 @@
+import React from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { Select } from "./Select.js";
+
+const meta: Meta = {
+    title: "Components/Form/Select",
+    component: Select,
+    tags: ["autodocs", "form"],
+};
+
+type Story = StoryObj<typeof Select>;
+
+const Primary: Story = {
+    args: {
+        children: [
+            <option key={"1"} value={"1"}>First</option>,
+            <option key={"2"} value={"2"}>Second</option>,
+            <option key={"3"} value={"3"}>Third</option>,
+        ],
+        disabled: false,
+    },
+};
+
+export {
+    Primary,
+};
+
+export default meta;

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

@@ -0,0 +1,25 @@
+import { borderPxToRem, dimensionsPxToRem, pxToRem, styled } from "../../theme.js";
+
+const Select = styled("select", {
+    "boxSizing": "border-box",
+    "height": dimensionsPxToRem(103),
+    "color": "$text",
+    "display": "flex",
+    "alignItems": "center",
+    "width": "100%",
+    "background": "white",
+    "fontFamily": "inherit",
+    "borderRadius": pxToRem(2),
+    "padding": `0 ${dimensionsPxToRem(36)}`,
+    "border": `${borderPxToRem(1)} solid $border`,
+    "appearance": "auto",
+
+    "&:disabled": {
+        background: "$inputDisabledBg",
+        color: "$inputDisabledText",
+    },
+});
+
+export {
+    Select,
+};

package/src/components/form/Select.tsx

@@ -1,22 +1 @@
-import React from "react";
-
-import classnames from "classnames";
-
-import styles from "./Select.module.scss";
-
-interface Props {
-}
-
-const Select: React.FC<React.SelectHTMLAttributes<HTMLSelectElement> & Props> = ({ className, children, ...props }) => {
-    const wrapperCls = classnames(styles.select, className);
-
-    return (
-        <select className={wrapperCls} {...props}>
-            {children}
-        </select>
-    );
-};
-
-export {
-    Select,
-};
+export { Select } from "./Select.styled.js";

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

@@ -0,0 +1,55 @@
+import React, { useCallback } from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { styled } from "../../../theme.js";
+
+import { Button } from "./Button.js";
+
+// TODO better docs
+
+const meta: Meta = {
+    title: "Components/UI/Button",
+    component: Button,
+    tags: ["autodocs", "ui"],
+};
+
+type Story = StoryObj<typeof Button>;
+
+const Primary: Story = {
+    args: {
+        children: "Click me",
+        onClick: () => { alert("Clicked"); },
+    },
+};
+
+const Container = styled("div", {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "1rem",
+});
+
+const MultipleAtOnce: Story = {
+    render: () => {
+        const handleClick = useCallback(() => {
+            alert("Clicked");
+        }, []);
+
+        return (
+            <Container>
+                <Button onClick={handleClick}>Basic button</Button>
+                <Button disabled={true} onClick={handleClick}>Disabled button</Button>
+                <Button inline={true} onClick={handleClick}>Inline button</Button>
+                <Button outline={true} onClick={handleClick}>Outline button</Button>
+            </Container>
+        );
+    },
+};
+
+export {
+    Primary,
+    MultipleAtOnce,
+};
+
+export default meta;

package/src/components/ui/button/Button.styled.ts

@@ -0,0 +1,43 @@
+import { borderPxToRem, dimensionsPxToRem, fontPxToRem, pxToRem, styled } from "../../../theme.js";
+
+/**
+ * Call-to-action button.
+ */
+const Button = styled("button", {
+    "height": dimensionsPxToRem(118),
+    "background": "$green1",
+    "border": `${borderPxToRem(1)} solid $green1Darker`,
+    "color": "white",
+    "borderRadius": "1000px",
+    "display": "flex",
+    "alignItems": "center",
+    "justifyContent": "center",
+    "width": "100%",
+    "fontSize": fontPxToRem(26),
+    "padding": "0 1em",
+    "gap": pxToRem(10),
+
+    "&:disabled": {
+        opacity: 0.5,
+    },
+
+    "variants": {
+        inline: {
+            true: {
+                width: "auto",
+                display: "inline-flex",
+            },
+        },
+        outline: {
+            true: {
+                background: "white",
+                borderColor: "$buttonBorder",
+                color: "$grey1",
+            },
+        },
+    },
+});
+
+export {
+    Button,
+};

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

@@ -1,35 +1 @@
-import React from "react";
-
-import classnames from "classnames";
-
-import { makeVariants } from "../../../utils/index.js";
-
-import styles from "./Button.module.scss";
-
-type Variant = "inline" | "outline";
-
-interface Props {
-    variant?: Variant | Variant[];
-}
-
-const Button: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & Props> = ({
-    className, children, variant, ...props
-}) => {
-    const variants = makeVariants(variant);
-
-    const cls = classnames(styles.btn, {
-        [styles["btn--inline"]]: variants.includes("inline"),
-        [styles["btn--outline"]]: variants.includes("outline"),
-    }, className);
-
-    return (
-        <button
-            {...props}
-            className={cls}
-            disabled={props.disabled}
-        >{children}
-        </button>
-    );
-};
-
-export { Button };
+export { Button } from "./Button.styled.js";

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

@@ -0,0 +1,143 @@
+import React, { useCallback, useState } from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { Button } from "../button/Button.js";
+import { Label } from "../../form/Label.js";
+import { Input } from "../../form/input/Input.js";
+import { Checkbox } from "../../form/Checkbox.js";
+import { List } from "../../layout/list/List.js";
+
+import { Modal } from "./Modal.js";
+import { ModalButtons } from "./ModalButtons.js";
+import { RemovePadding } from "./Modal.styled";
+
+const meta: Meta = {
+    title: "Components/UI/Modal",
+    component: Modal,
+    tags: ["autodocs", "ui"],
+};
+
+type Story = StoryObj<typeof Modal>;
+
+const handleNoop = () => undefined;
+
+const Primary: Story = {
+    args: {},
+    render: () => {
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const [open, setIsOpen] = useState(false);
+
+        const handleClose = useCallback(() => {
+            setIsOpen(false);
+        }, []);
+
+        const handleOpen = useCallback(() => {
+            setIsOpen(true);
+        }, []);
+
+        return (
+            <div>
+                <Button onClick={handleOpen}>Open modal</Button>
+                <Modal onClose={handleClose} isOpen={open} title={"95.5 MHz"} position={"bottom"} full={true}>
+                    <Label>
+                        <Input placeholder={"New station"} />
+                    </Label>
+                    <Label>
+                        <Checkbox name={""} onChange={handleNoop} checked={true}>
+                            Remember me
+                        </Checkbox>
+                    </Label>
+                    <ModalButtons>
+                        <ModalButtons.Button onClick={handleClose}>
+                            Cancel
+                        </ModalButtons.Button>
+                        <ModalButtons.Button variant={"main"} onClick={handleClose}>
+                            Ok
+                        </ModalButtons.Button>
+                    </ModalButtons>
+                </Modal>
+            </div>
+        );
+    },
+};
+
+const WithRemovedPaddingSections: Story = {
+    args: {},
+    render: () => {
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const [open, setIsOpen] = useState(false);
+
+        const handleClose = useCallback(() => {
+            setIsOpen(false);
+        }, []);
+
+        const handleOpen = useCallback(() => {
+            setIsOpen(true);
+        }, []);
+
+        return (
+            <div>
+                <Button onClick={handleOpen}>Open modal</Button>
+                <Modal onClose={handleClose} isOpen={open} position={"bottom"} full={true}>
+                    <RemovePadding>
+                        <Label>
+                            <Input placeholder={"New station"} />
+                        </Label>
+                    </RemovePadding>
+                    <Label>
+                        <Input placeholder={"New station"} />
+                    </Label>
+                    <RemovePadding>
+                        <Label>
+                            <Input placeholder={"New station"} />
+                        </Label>
+                    </RemovePadding>
+                </Modal>
+            </div>
+        );
+    },
+};
+
+/**
+ * Just a demo how to render a pick-mode list in a modal.
+ */
+const WithList: Story = {
+    args: {},
+    render: () => {
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const [open, setIsOpen] = useState(false);
+
+        const handleClose = useCallback(() => {
+            setIsOpen(false);
+        }, []);
+
+        const handleOpen = useCallback(() => {
+            setIsOpen(true);
+        }, []);
+
+        return (
+            <div>
+                <Button onClick={handleOpen}>Open modal</Button>
+                <Modal onClose={handleClose} isOpen={open} position={"bottom"} full={true}>
+                    <RemovePadding>
+                        <List inset={true}>
+                            <List.Item selected={false} onClick={handleClose}>First item</List.Item>
+                            <List.Item selected={true} onClick={handleClose}>Second item</List.Item>
+                            <List.Item selected={false} onClick={handleClose}>Third item</List.Item>
+                            <List.Item selected={false} onClick={handleClose}>Last option</List.Item>
+                        </List>
+                    </RemovePadding>
+                </Modal>
+            </div>
+        );
+    },
+};
+
+export {
+    Primary,
+    WithRemovedPaddingSections,
+    WithList,
+};
+
+export default meta;

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

@@ -0,0 +1,100 @@
+import { dimensionsPxToRem, fontPxToRem, keyframes, pxToRem, styled } from "../../../theme.js";
+
+const PADDING = pxToRem(20);
+const NEGATIVE_PADDING = pxToRem(-20);
+
+const overlay = keyframes({
+    from: {
+        background: "#00000000",
+    },
+    to: {
+        background: "#0000004c",
+    },
+});
+
+const OverlayStyled = styled("div", {
+    position: "fixed",
+    zIndex: 4,
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    animation: `${overlay.toString()} 300ms`,
+    animationFillMode: "forwards",
+
+    variants: {
+        position: {
+            bottom: {
+                alignItems: "flex-end",
+                paddingBottom: dimensionsPxToRem(24),
+            },
+        },
+        isClosing: {
+            true: {
+                animationDirection: "reverse",
+            },
+        },
+    },
+});
+
+const container = keyframes({
+    from: {
+        transform: "translateY(30px)",
+        opacity: 0,
+    },
+    to: {
+        transform: "translateY(0)",
+        opacity: 1,
+    },
+});
+
+const RemovePadding = styled("div", {
+    mx: NEGATIVE_PADDING,
+});
+
+const ContainerStyled = styled("div", {
+    background: "$modalBg",
+    borderRadius: dimensionsPxToRem(12),
+    maxWidth: pxToRem(333),
+    maxHeight: "100%",
+    width: "calc(100% - 30px)",
+    padding: PADDING,
+    position: "relative",
+    boxSizing: "border-box",
+    animation: `${container.toString()} 300ms`,
+    animationFillMode: "forwards",
+
+    variants: {
+        // TODO this is very not rwd, it should be a media query
+        full: {
+            true: {
+                width: "calc(100vw - 30px)",
+                maxWidth: dimensionsPxToRem(1000),
+            },
+        },
+        isClosing: {
+            true: {
+                animationDirection: "reverse",
+            },
+        },
+    },
+});
+
+const TitleStyled = styled("div", { // TODO header by default? expose this as `titleAs`?
+    fontSize: fontPxToRem(40),
+    textAlign: "center",
+    color: "black",
+    margin: `${dimensionsPxToRem(90)} 0`,
+});
+
+export {
+    OverlayStyled,
+    RemovePadding,
+    ContainerStyled,
+    TitleStyled,
+
+    NEGATIVE_PADDING,
+};

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

@@ -1,14 +1,13 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 
-import classnames from "classnames";
 import { createPortal } from "react-dom";
 
-import { makeVariants } from "../../../utils/index.js";
+import type { ThemeCSS } from "../../../theme";
 
-import { ModalNegateMargin } from "./ModalNoMargin.js";
-import styles from "./Modal.module.scss";
+import { ContainerStyled, NEGATIVE_PADDING, OverlayStyled, RemovePadding, TitleStyled } from "./Modal.styled";
 
-type Variant = "bottom" | "full";
+type OverlayProps = React.ComponentProps<typeof OverlayStyled>;
+type ContainerProps = React.ComponentProps<typeof ContainerStyled>;
 
 interface Props {
     onOverlayClick?: (() => void) | "close" | null;
@@ -17,15 +16,19 @@ interface Props {
     isOpen: boolean;
     title?: React.ReactNode;
     className?: string;
-    variant?: Variant | Variant[];
     portal?: boolean | HTMLElement;
     children: React.ReactNode;
+
+    position?: OverlayProps["position"];
+    full?: ContainerProps["full"];
 }
 
 interface SubComponents {
-    NegateMargin: typeof ModalNegateMargin;
+    RemovePadding: typeof RemovePadding;
 }
 
+// @TODO proper docs + buttons
+
 // eslint-disable-next-line max-lines-per-function,max-statements
 const Modal: React.FC<Props> & SubComponents = ({
     children,
@@ -36,15 +39,14 @@ const Modal: React.FC<Props> & SubComponents = ({
     onOverlayClick = "close",
     closeOnEsc = true,
     portal = true,
-    variant,
+    position,
+    full,
 }) => {
     const [isClosing, setIsClosing] = useState(false);
     const [isRendered, setIsRendered] = useState(false);
     const overlayRef = useRef<HTMLDivElement>(null);
     const containerRef = useRef<HTMLDivElement>(null);
 
-    const v = makeVariants(variant);
-
     useEffect(() => {
         if (!isOpen || !closeOnEsc) {
             return;
@@ -87,7 +89,7 @@ const Modal: React.FC<Props> & SubComponents = ({
         containerRef.current.style.removeProperty("animation");
     }, [isClosing]);
 
-    const titleElem = title && <div className={styles.title}>{title}</div>;
+    const titleElem = title ? <TitleStyled>{title}</TitleStyled> : null;
 
     const handleOverlayClick = useCallback((e: React.MouseEvent) => {
         if (e.target !== e.currentTarget) {
@@ -113,28 +115,49 @@ const Modal: React.FC<Props> & SubComponents = ({
         return null;
     }
 
-    const overlayCls = classnames(styles.overlay, {
-        [styles.isClosing]: isClosing,
-        [styles.overlayOnBottom]: v.includes("bottom"),
-    });
-
-    const containerCls = classnames(styles.container, className, {
-        [styles.isClosing]: isClosing,
-        [styles.full]: v.includes("full"),
+    const overlayVariants: Pick<OverlayProps, "isClosing" | "position"> = {};
+    isClosing && (overlayVariants.isClosing = true);
+    position != null && (overlayVariants.position = position);
+
+    const containerVariants: Pick<ContainerProps, "isClosing" | "full"> = {};
+    isClosing && (containerVariants.isClosing = true);
+    full != null && (containerVariants.full = full);
+
+    const childrenCount = React.Children.count(children);
+
+    const chld = React.Children.map(children, (child, index) => {
+        if (React.isValidElement(child)) {
+            if (child.type === RemovePadding) {
+                // eslint-disable-next-line max-len
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
+                const css: ThemeCSS = child.props.css ?? {};
+                if (index === 0 && titleElem == null) {
+                    css.marginTop = NEGATIVE_PADDING;
+                }
+                if (index === childrenCount - 1) {
+                    css.marginBottom = NEGATIVE_PADDING;
+                }
+
+                // @ts-expect-error TODO handle types correctly
+                return React.cloneElement(child, { css });
+            }
+            return child;
+        }
+        return child;
     });
 
     const tree = (
-        <div
-            className={overlayCls}
+        <OverlayStyled
+            {...overlayVariants}
             onClick={handleOverlayClick}
             ref={overlayRef}
             onAnimationEnd={handleAnimationEnd}
         >
-            <div className={containerCls} ref={containerRef}>
+            <ContainerStyled className={className} {...containerVariants} ref={containerRef}>
                 {titleElem}
-                {children}
-            </div>
-        </div>
+                {chld}
+            </ContainerStyled>
+        </OverlayStyled>
     );
 
     if (portal) {
@@ -144,6 +167,6 @@ const Modal: React.FC<Props> & SubComponents = ({
 
     return tree;
 };
-Modal.NegateMargin = ModalNegateMargin;
+Modal.RemovePadding = RemovePadding;
 
 export { Modal };