react-miui 0.20.0 → 0.21.0

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

@@ -1,32 +1,49 @@
 import React from "react";
 
-import classnames from "classnames";
-
-import { makeVariants } from "../../../utils/index.js";
-
-import styles from "./Item.module.scss";
-import headerStyles from "./Header.module.scss";
-
-type Variant = "inset";
-
-interface Props {
-    className?: string;
-    variant?: Variant | Variant[];
-    children: React.ReactNode;
-}
-
-const Header: React.FC<Props> = (props) => {
-    const v = makeVariants(props.variant);
-
-    const cls = classnames(props.className, styles.item, headerStyles.header, {
-        [styles.inset]: v.includes("inset"),
-    });
-
-    // @TODO way to use h1, h2, h3 instead of div
+import type { VariantProps } from "@stitches/react";
+
+import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme.js";
+
+import { Item, ItemInnerContainerClassName } from "./Item.js";
+
+const StyledContent = styled("div", {});
+
+const StyledHeader = styled(Item, {
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    paddingTop: dimensionsPxToRem(80),
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    paddingBottom: dimensionsPxToRem(40),
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    fontSize: fontPxToRem(26),
+    color: "$sub",
+    textTransform: "uppercase",
+
+    [`& ${ItemInnerContainerClassName}`]: {
+        minHeight: 0,
+    },
+
+    variants: {
+        inset: {
+            true: {
+                paddingLeft: 0,
+                paddingRight: 0,
+            },
+        },
+    },
+});
+
+type StyledHeaderProps = React.ComponentProps<typeof StyledHeader>;
+type Variants = VariantProps<typeof StyledHeader>;
+
+/**
+ * Use this to render a header within a `List`.
+ * Use `as` prop to define which tag to use.
+ */
+const Header: React.FC<StyledHeaderProps & Variants & { as?: string }> = ({ as, ...props }) => {
     return (
-        <li className={cls}>
-            <div>{props.children}</div>
-        </li>
+        <StyledHeader {...props}>
+            <StyledContent {...(as ? { as } : undefined)}>{props.children}</StyledContent>
+        </StyledHeader>
     );
 };
 

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

@@ -0,0 +1,69 @@
+import React from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { NextLink } from "../../../demo/NextLink.js";
+
+import { Item } from "./Item.js";
+import { List } from "./List.js";
+
+const meta: Meta = {
+    title: "Components/Layout/List/Item",
+    component: Item,
+    tags: ["autodocs", "layout"],
+    argTypes: {
+        inset: {
+            type: "boolean",
+        },
+        Link: {
+            controls: "none",
+        },
+    },
+};
+
+type Story = StoryObj<typeof Item>;
+
+const Primary: Story = {
+    args: {
+        children: "I am a list item",
+        inset: false,
+        Link: NextLink,
+    },
+    render: (args) => {
+        return <List><Item {...args} /></List>;
+    },
+};
+
+const Alignment: Story = {
+    args: {
+        children: [
+            <div key={"1st"}>first</div>,
+            <div key={"2nd"}>2nd</div>,
+            <div key={"3rd"}>last</div>,
+        ],
+        ratio: "1/2/1",
+    },
+    render: (args) => {
+        return <List><Item {...args} /></List>;
+    },
+};
+
+const OnClick: Story = {
+    args: {
+        children: "I am a list item, but I will render a button, click me",
+        onClick: () => {
+            alert("Clicked!");
+        },
+    },
+    render: (args) => {
+        return <List><Item {...args} /></List>;
+    },
+};
+
+export {
+    Primary,
+    Alignment,
+    OnClick,
+};
+
+export default meta;

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

@@ -1,11 +1,8 @@
 import React from "react";
 
-import classnames from "classnames";
-
-import { makeVariants } from "../../../utils/index.js";
 import { ICON, Icon } from "../../icons/Icon.js";
+import { dimensionsPxToRem, fontPxToRem, pxToRem, styled } from "../../../theme.js";
 
-import styles from "./Item.module.scss";
 import { Value } from "./Value.js";
 import { Label } from "./Label.js";
 
@@ -14,18 +11,12 @@ interface LinkProps {
     children: React.ReactNode;
 }
 
-type Variant = "inset";
-
 interface Props {
     href?: string;
     to?: string;
     onClick?: () => void;
-    className?: string;
     Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
     ratio?: string; // @TODO number/number/number/.. type?
-    variant?: Variant | Variant[];
-    selected?: boolean | undefined;
-    children: React.ReactNode;
 }
 
 interface SubComponents {
@@ -33,32 +24,101 @@ interface SubComponents {
     Value: typeof Value;
 }
 
-const icon = <Icon className={styles.icon} name={ICON.forward} />;
-const noIcon = <span className={styles.icon} />;
-
-// eslint-disable-next-line max-statements,max-lines-per-function
-const Item: React.FC<Props> & SubComponents = (props) => {
-    const { className, children, href, to, onClick, Link, ratio, variant, selected, ...restProps } = props;
-    const v = makeVariants(variant);
-    const cls = classnames(styles.item, className);
-
-    const innerCls = classnames(styles.content, {
-        [styles.inset]: v.includes("inset"),
-        [styles.selected]: selected,
-    });
+const iconStyles = {
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    width: pxToRem(7),
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    marginRight: pxToRem(10),
+    display: "inline-block",
+}; // TODO satisfies
+
+const StyledIcon = styled(Icon, iconStyles);
+const StyledNoIcon = styled("span", iconStyles);
+
+const icon = <StyledIcon name={ICON.forward} />;
+const noIcon = <StyledNoIcon />;
+
+const StyledInnerContainer = styled("div", {
+    display: "flex",
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    minHeight: dimensionsPxToRem(174),
+    alignItems: "center",
+    gap: "1rem",
+
+    border: "none",
+    background: "none",
+    width: "100%",
+    textAlign: "left",
+    fontFamily: "inherit",
+    fontSize: "inherit",
+});
+
+const ItemInnerContainerClassName = StyledInnerContainer.toString();
+
+const StyledItem = styled("li", {
+    "listStyleType": "none",
+    "margin": 0,
+    "padding": 0,
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    "fontSize": fontPxToRem(34),
+
+    "&:not(:first-child)": {
+        borderTop: "0.37px solid $headerBorder",
+    },
+
+    "> *": {
+        display: "block",
+        padding: 0,
+        textDecoration: "none",
+    },
+
+    "variants": {
+        inset: {
+            true: {
+                // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+                paddingLeft: dimensionsPxToRem(37),
+                // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+                paddingRight: dimensionsPxToRem(37),
+            },
+        },
+        selected: {
+            true: {
+                color: "$mainColor",
+            },
+        },
+    },
+});
+
+type StyledItemProps = React.ComponentProps<typeof StyledItem>;
+
+/**
+ * Represents a single item in a list.
+ *
+ * It has two subcomponents:
+ * - `Label`: for rendering the label with sublabel (usually on the left)
+ * - `Value`: for rendering the value (usually on the right)
+ *
+ * It can be however used with any children, its children are rendered in a flexbox container, `ratio` prop can be used
+ * to set the flex ratio of each child.
+ *
+ * It has two variants:
+ * - `inset`: which adds padding to the left and right side of the item - it should be used when the list is inset (it's
+ * applied automatically if used within `List` component)
+ * - `selected`: which renders an arrow on the left side, useful when creating a radio-like list (please note that not
+ * sending `selected` is different from sending `false`)
+ *
+ * It accepts few more props:
+ * - `href`: if given it will render an anchor tag with the given href
+ * - `to`: if given it will render an anchor tag wrapped in a link using the given `Link` component
+ * - `onClick`: if given it will render a button tag with the given onClick handler (it can be passed with `href` too)
+ */
+const Item: React.FC<StyledItemProps & Props> & SubComponents = ({ href, to, onClick, Link, ratio, ...props }) => {
+    const r = ratio ? ratio.split("/") : [];
 
-    const pre = typeof selected === "boolean"
-        ? (
-            selected ? icon : noIcon
-        )
+    const pre = typeof props.selected === "boolean"
+        ? (props.selected ? icon : noIcon)
         : null;
 
-    const liProps = {
-        className: cls,
-    };
-
-    const r = ratio ? ratio.split("/") : [];
-
     const ren = React.Children.map(props.children, (child, index) => {
         let flex = undefined;
         if (!r.length && child && typeof child === "object" && "type" in child && child.type === Value) {
@@ -75,28 +135,40 @@ const Item: React.FC<Props> & SubComponents = (props) => {
             throw new TypeError("`to` prop given without `Link` component");
         }
 
-        return <li {...liProps}><Link href={to} {...restProps}><a className={innerCls}>{ren}</a></Link></li>;
+        return (
+            <StyledItem {...props}>
+                <Link href={to}><StyledInnerContainer as={"a"} href={to}>{ren}</StyledInnerContainer></Link>
+            </StyledItem>
+        );
     }
+
     if (href) {
-        const aProps: typeof restProps & { onClick?: Props["onClick"] } = { ...restProps };
-        if (onClick) {
-            aProps.onClick = onClick;
-        }
-        return <li {...liProps}><a href={href} {...aProps} className={innerCls}>{ren}</a></li>;
+        return (
+            <StyledItem {...props}>
+                {/* eslint-disable-next-line react/jsx-handler-names */}
+                <StyledInnerContainer as={"a"} href={href} onClick={onClick}>{ren}</StyledInnerContainer>
+            </StyledItem>
+        );
     }
+
     if (onClick) {
         return (
-            <li {...liProps}>
-                <button className={classnames(styles.button, innerCls)} onClick={props.onClick} {...restProps}>
-                    {ren}
-                </button>
-            </li>
+            <StyledItem {...props}>
+                {/* eslint-disable-next-line react/jsx-handler-names */}
+                <StyledInnerContainer as={"button"} onClick={onClick}>{ren}</StyledInnerContainer>
+            </StyledItem>
         );
     }
-    return <li {...liProps}><div {...restProps} className={innerCls}>{ren}</div></li>;
+
+    return <StyledItem {...props}><StyledInnerContainer>{ren}</StyledInnerContainer></StyledItem>;
 };
 
 Item.Label = Label;
 Item.Value = Value;
 
-export { Item };
+export { Item, ItemInnerContainerClassName };
+
+export type {
+    Props as ItemProps,
+    SubComponents as ItemSubComponents,
+};

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

@@ -0,0 +1,45 @@
+import React from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { Label } from "./Label.js";
+import { List } from "./List.js";
+import { Item } from "./Item.js";
+
+const meta: Meta = {
+    title: "Components/Layout/List/Label",
+    component: Label,
+    tags: ["autodocs", "layout"],
+    argTypes: {
+        sub: {
+            type: "string",
+        },
+    },
+};
+
+type Story = StoryObj<typeof Label>;
+
+const Primary: Story = {
+    args: {
+        children: "I am a label",
+        sub: "Sub text",
+    },
+    render: (args) => {
+        return (
+            <List>
+                <Item>
+                    <Label {...args} />
+                </Item>
+                <Item>
+                    I am classic list item
+                </Item>
+            </List>
+        );
+    },
+};
+
+export {
+    Primary,
+};
+
+export default meta;

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

@@ -1,24 +1,33 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import classnames from "classnames";
+import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme.js";
 
-import styles from "./Label.module.scss";
+const SubLabel = styled("div", {
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    fontSize: fontPxToRem(27),
+    color: "$sub",
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    marginTop: fontPxToRem(27 / 3),
+});
 
-interface Props {
-    sub?: ReactNode;
-    className?: string;
-    children: React.ReactNode;
-}
+const StyledLabel = styled("div", {
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    padding: `${dimensionsPxToRem(54)} 0`,
+});
 
-const Label: React.FC<Props> = (props) => {
-    const sub = props.sub ? <div className={styles.sub}>{props.sub}</div> : null;
+type StyledLabelProps = React.ComponentProps<typeof StyledLabel>;
 
+/**
+ * Use this to render a label within `Item`, optionally you can render a sublabel as well (with a tip message for
+ * example).
+ */
+const Label: React.FC<StyledLabelProps & { sub?: ReactNode }> = ({ sub, ...props }) => {
     return (
-        <div className={classnames(styles.root, props.className)}>
+        <StyledLabel {...props}>
             <div>{props.children}</div>
-            {sub}
-        </div>
+            {sub && <SubLabel>{sub}</SubLabel>}
+        </StyledLabel>
     );
 };
 

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