react-miui 0.20.1 → 0.22.0

package/src/components/layout/list/List.stories.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { Icon, ICON } from "../../icons/Icon.js";
+
+import { List } from "./List.js";
+
+const meta: Meta = {
+    title: "Components/Layout/List/List",
+    component: List,
+    tags: ["autodocs", "layout"],
+    argTypes: {
+        inset: {
+            type: "boolean",
+        },
+    },
+};
+
+type Story = StoryObj<typeof List>;
+
+const Primary: Story = {
+    args: {
+        inset: false,
+    },
+    render: (args) => {
+        return (
+            <List {...args}>
+                <List.Item>I am a list item</List.Item>
+                <List.Item>I am a list item</List.Item>
+            </List>
+        );
+    },
+};
+
+const FullFeaturedExample: Story = {
+    render: (args) => {
+        return (
+            <List>
+                <List.Header>GPS settings</List.Header>
+                <List.Item>
+                    <List.Item.Label sub={"Higher precision means higher battery usage"}>
+                        GPS precision
+                    </List.Item.Label>
+                    <List.Item.Value>
+                        Low
+                    </List.Item.Value>
+                    <Icon name={ICON.forward} />
+                </List.Item>
+                <List.Item>
+                    <List.Item>
+                        Something
+                    </List.Item>
+                </List.Item>
+                <List.Header>
+                    Last trips
+                </List.Header>
+                <List.Item>
+                    Portugal
+                </List.Item>
+                <List.Item>
+                    <List.Item.Label sub={"Visited 2 times in last year"}>
+                        Poland
+                    </List.Item.Label>
+                </List.Item>
+                <List.Item>
+                    Sweden
+                </List.Item>
+                <List.Header>
+                    Choose one option
+                </List.Header>
+                <List.Item selected={true}>yes</List.Item>
+                <List.Item selected={false}>no</List.Item>
+            </List>
+        );
+    },
+};
+
+export {
+    Primary,
+    FullFeaturedExample,
+};
+
+export default meta;

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

@@ -1,47 +1,58 @@
 import React from "react";
 
-import classnames from "classnames";
-
-import { makeVariants } from "../../../utils/index.js";
+import { pxToRem, styled } from "../../../theme.js";
 
 import { Header } from "./Header.js";
 import { Item } from "./Item.js";
-import styles from "./List.module.scss";
-
-type Variant = "inset";
-
-interface Props {
-    className?: string;
-    variant?: Variant | Variant[];
-    children: React.ReactNode;
-}
 
 interface SubComponents {
     Header: typeof Header;
+    Item: typeof Item;
 }
 
-const List: React.FC<Props> & SubComponents = (props) => {
-    const v = makeVariants(props.variant);
-
+const StyledList = styled("ul", {
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    margin: `0 ${pxToRem(23)}`,
+    padding: 0,
+
+    variants: {
+        inset: {
+            true: {
+                margin: 0,
+            },
+        },
+    },
+});
+
+type StyledListProps = React.ComponentProps<typeof StyledList>;
+
+/**
+ * Component for rendering menu lists.
+ *
+ * It has two subcomponents:
+ * - `Item`: for rendering list items
+ * - `Header`: for rendering list headers
+ *
+ * List has one variant: `inset`, which removes the margin from the list. If used it will be automatically applied to
+ * all children.
+ *
+ * See `Item` and `Header` for more information about their usage.
+ */
+const List: React.FC<StyledListProps> & SubComponents = (props) => {
     const chld = React.Children.map(props.children, (child) => {
         if (child && typeof child === "object" && "type" in child && (child.type === Item || child.type === Header)) {
             return React.cloneElement(child, {
-                // @TODO this will override but should merge?
-                variant: props.variant,
+                inset: props.inset,
             });
         }
         return child;
     });
 
-    const cls = classnames(props.className, styles.list, {
-        [styles.inset]: v.includes("inset"),
-    });
-
     return (
-        <ul className={cls}>{chld}</ul>
+        <StyledList {...props}>{chld}</StyledList>
     );
 };
-
 List.Header = Header;
+List.Item = Item;
 
 export { List };

package/src/components/layout/list/Value.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { Value } from "./Value.js";
+import { List } from "./List.js";
+import { Item } from "./Item.js";
+
+const meta: Meta = {
+    title: "Components/Layout/List/Value",
+    component: Value,
+    tags: ["autodocs", "layout"],
+};
+
+type Story = StoryObj<typeof Value>;
+
+const Primary: Story = {
+    args: {
+        children: "23,4*C",
+    },
+    render: (args) => {
+        return (
+            <List>
+                <Item>
+                    <div>Some label</div>
+                    <Value {...args} />
+                </Item>
+            </List>
+        );
+    },
+};
+
+export {
+    Primary,
+};
+
+export default meta;

package/src/components/layout/list/Value.tsx

@@ -1 +1,15 @@
-export { StyledValue as Value } from "./Value.styled.js";
+import { fontPxToRem, styled } from "../../../theme.js";
+
+/**
+ * Use this to render a value within `Item`. It's most useful when used with `Item.Label`.
+ */
+const Value = styled("div", {
+    color: "$icon",
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    fontSize: fontPxToRem(26),
+    display: "flex",
+    justifyContent: "flex-end",
+    flex: 1,
+});
+
+export { Value };

package/src/components/layout/section/Section.stories.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { List } from "../list/List.js";
+import { Item } from "../list/Item.js";
+
+import { Section } from "./Section.js";
+
+const meta: Meta = {
+    title: "Components/Layout/Section",
+    component: Section,
+    tags: ["autodocs", "layout"],
+    argTypes: {
+        vertical: {
+            type: "boolean",
+        },
+        horizontal: {
+            type: "boolean",
+        },
+    },
+};
+
+type Story = StoryObj<typeof Section>;
+
+const Primary: Story = {
+    args: {},
+    render: (args) => (
+        <div style={{ border: "1px solid #ddd" }}>
+            <Section.Container>
+                <Section {...args}>
+                    This is an example section, arguments in the arguments table are applied only to this
+                    section. By default sections do not have any padding, so you can place elements that should touch
+                    the edges. Use `vertical` and `horizontal` arguments to add padding.
+                </Section>
+                <Section vertical={true} horizontal={true}>
+                    Some section
+                </Section>
+                <Section>
+                    <List>
+                        <Item>Some item</Item>
+                        <Item>Some item</Item>
+                    </List>
+                </Section>
+            </Section.Container>
+        </div>
+    ),
+};
+
+export {
+    Primary,
+};
+
+export default meta;

package/src/components/layout/section/Section.tsx

@@ -1,37 +1,37 @@
-import React from "react";
-
-import classnames from "classnames";
-
-import { makeVariants } from "../../../utils/makeVariants.js";
+import { pxToRem, styled } from "../../../theme.js";
 
 import { SectionContainer } from "./SectionContainer.js";
-import styles from "./Section.module.scss";
 
 interface SubComponents {
     Container: typeof SectionContainer;
 }
 
-type Variant = "horizontal" | "vertical";
-
-interface Props {
-    variant?: Variant | Variant[];
-    className?: string;
-    children: React.ReactNode;
-}
-
-const Section: React.FC<Props> & SubComponents = (props) => {
-    const v = makeVariants(props.variant);
-
-    const cls = classnames(props.className, styles.section, {
-        [styles.vertical]: v.includes("vertical"),
-        [styles.horizontal]: v.includes("horizontal"),
-    });
-    return (
-        <section className={cls}>
-            {props.children}
-        </section>
-    );
-};
+const SectionCmp = styled("div", {
+    background: "$background",
+
+    variants: {
+        vertical: {
+            true: {
+                // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+                py: pxToRem(23),
+            },
+        },
+        horizontal: {
+            true: {
+                // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+                px: pxToRem(23),
+            },
+        },
+    },
+});
+
+/**
+ * A section is a container that can be used to group related content.
+ *
+ * You should use it along with the `Section.Container` component. Container stretches to fill the available space and
+ * has darker background color, sections are lighter and have a gap between them.
+ */
+const Section = SectionCmp as typeof SectionCmp & SubComponents;
 
 Section.Container = SectionContainer;
 

package/src/components/layout/section/SectionContainer.tsx

@@ -1,15 +1,12 @@
-import React from "react";
-
-import styles from "./SectionContainer.module.scss";
-
-interface Props {
-    children: React.ReactNode;
-}
-
-const SectionContainer: React.FC<Props> = (props) => {
-    return (
-        <div className={styles.container}>{props.children}</div>
-    );
-};
+import { styled } from "../../../theme.js";
+
+const SectionContainer = styled("div", {
+    background: "$toolbarBg",
+    flex: 1,
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    gap: 23,
+});
 
 export { SectionContainer };

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;