react-miui 0.20.1 → 0.22.0

package/esm/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.20.1",
+  "version": "0.22.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {
@@ -13,8 +13,9 @@
     "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",
     "updates": "npx --yes npm-check-updates --dep prod",
     "updates:dev": "npx --yes npm-check-updates --dep dev",
@@ -39,9 +40,9 @@
     "oop-timers": "^5.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.4",
-    "@babel/preset-env": "^7.21.4",
-    "@babel/preset-typescript": "^7.21.4",
+    "@babel/core": "^7.22.5",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
     "@dzek69/eslint-config-base": "^2.4.0",
     "@dzek69/eslint-config-import": "^1.2.0",
     "@dzek69/eslint-config-import-typescript": "^1.0.0",
@@ -71,7 +72,7 @@
     "fs-extra": "^11.1.1",
     "jest": "^29.5.0",
     "must": "^0.13.4",
-    "next": "^13.1.6",
+    "next": "^13.4.4",
     "nodemon": "^2.0.22",
     "prettier": "^2.8.7",
     "react": "^18.2.0",
@@ -81,7 +82,7 @@
     "storybook": "^7.0.11",
     "ts-node": "^10.9.1",
     "typedoc": "^0.23.28",
-    "typescript": "^5.0.4"
+    "typescript": "^5.1.3"
   },
   "peerDependencies": {
     "react": "^18.2.0",

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/form/input/Input.css.ts

@@ -1,4 +1,4 @@
-import type { ThemeCSS } from "../../../theme";
+// import type { ThemeCSS } from "../../../theme"; TODO restore
 
 import { dimensionsPxToRem, fontPxToRem, borderPxToRem } from "../../../theme.js";
 
@@ -21,7 +21,8 @@ const input = {
     "&:read-only, &:disabled": {
         color: "inherit",
     },
-} satisfies ThemeCSS;
+};
+// satisfies ThemeCSS; @TODO restore
 
 const wrapper = {
     background: "white",
@@ -50,7 +51,8 @@ const wrapper = {
             },
         },
     },
-} satisfies ThemeCSS;
+};
+// satisfies ThemeCSS; TODO restore
 
 export {
     input,

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

@@ -0,0 +1,40 @@
+import React from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { Header } from "./Header.js";
+import { List } from "./List.js";
+
+const meta: Meta = {
+    title: "Components/Layout/List/Header",
+    component: Header,
+    tags: ["autodocs", "layout"],
+};
+
+type Story = StoryObj<typeof Header>;
+
+const Primary: Story = {
+    args: {
+        children: "Section name",
+    },
+    render: (args) => {
+        return (
+            <List>
+                <Header {...args} />
+                <List.Item>Item 1</List.Item>
+                <List.Item>Item 2</List.Item>
+                <List.Item>Item 3</List.Item>
+                <Header {...args} />
+                <List.Item>Item 1</List.Item>
+                <List.Item>Item 2</List.Item>
+                <List.Item>Item 3</List.Item>
+            </List>
+        );
+    },
+};
+
+export {
+    Primary,
+};
+
+export default meta;

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