react-miui 0.23.6 → 0.23.7-beta.0

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

@@ -0,0 +1,86 @@
+import React from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { ICON } from "../../icons/Icon";
+
+import { Header } from "./Header";
+import { HeaderIconAction } from "./HeaderIconAction";
+
+const meta: Meta = {
+    title: "Components/Layout/Header/Header",
+    component: Header,
+    tags: ["autodocs", "layout"],
+
+    argTypes: {
+        before: {
+            control: {
+                type: "text",
+            },
+        },
+        after: {
+            control: {
+                type: "text",
+            },
+        },
+    },
+    args: {
+        before: "Left side",
+        children: "Title",
+        after: "[Icons]",
+    },
+};
+
+type Story = StoryObj<typeof Header>;
+
+const Primary: Story = {};
+const LongContent: Story = {
+    render: (args) => {
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers,react/no-array-index-key
+        const longContent = new Array(1000).fill(null).map((_, key) => <div key={key}>content</div>);
+
+        return (
+            <>
+                <Header {...args} />
+                {longContent}
+
+            </>
+        );
+    },
+};
+
+const handleClick = () => { alert(1); };
+
+const WithButtons: Story = {
+    args: {
+        before: (
+            <>
+                <HeaderIconAction icon={ICON.back} onClick={handleClick} />
+                <HeaderIconAction icon={ICON.checkmark} onClick={handleClick} />
+            </>
+        ),
+    },
+};
+
+const Vertical: Story = {
+    args: {
+        before: (
+            <>
+                <HeaderIconAction icon={ICON.back} onClick={handleClick} />
+                <HeaderIconAction icon={ICON.checkmark} onClick={handleClick} />
+            </>
+        ),
+        after: null,
+        position: "left",
+        children: "M",
+    },
+};
+
+export {
+    Primary,
+    LongContent,
+    WithButtons,
+    Vertical,
+};
+
+export default meta;

package/src/components/layout/header/Header.styled.ts

@@ -0,0 +1,134 @@
+import type { ThemeCSS } from "../../../theme";
+
+import { dimensionsPxToRem, pxToRem, styled } from "../../../theme";
+import { EqualActions } from "../../ui/action/EqualActions";
+
+const Contents = styled("div", {
+    flex: 1,
+    display: "flex",
+});
+
+const Before = styled("div", {
+    display: "flex",
+});
+
+const After = styled("div", {
+    display: "flex",
+});
+
+const topBottomBeforeAfter: ThemeCSS = {
+    height: "100%",
+    padding: "7px 0",
+    boxSizing: "border-box",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+};
+
+const leftRightBeforeAfter: ThemeCSS = {
+    width: "100%",
+    padding: "0 7px",
+    boxSizing: "border-box",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+};
+
+const topBottomShared: ThemeCSS = {
+    padding: "0 16.666px",
+    height: "44px",
+
+    [`& ${Before.toString()}`]: topBottomBeforeAfter,
+    [`& ${After.toString()}`]: topBottomBeforeAfter,
+
+    [`& ${EqualActions.toString()}`]: {
+        margin: `${dimensionsPxToRem(56)} 0`,
+    },
+};
+
+const leftRightShared: ThemeCSS = {
+    padding: "16.666px 0",
+    width: "44px",
+    flexDirection: "column",
+
+    [`& ${Contents.toString()}`]: {
+        flexDirection: "column",
+        alignItems: "center",
+    },
+
+    [`& ${Before.toString()}`]: {
+        flexDirection: "column",
+        ...leftRightBeforeAfter,
+    },
+
+    [`& ${After.toString()}`]: {
+        flexDirection: "column",
+        ...leftRightBeforeAfter,
+    },
+
+    [`& ${EqualActions.toString()}`]: {
+        margin: `0 ${dimensionsPxToRem(56)}`,
+    },
+};
+
+const StyledHeader = styled("div", {
+    "--border-color": "$colors$headerBorder",
+    "--background-color": "$colors$headerBg",
+    "backgroundClip": "padding-box",
+    "background": "var(--background-color)",
+    "display": "flex",
+    "alignItems": "center",
+    "fontSize": pxToRem(15),
+    "fontWeight": "bold",
+    "boxSizing": "border-box",
+    "color": "$headerText",
+    "gap": dimensionsPxToRem(50),
+
+    "variants": {
+        variant: {
+            toolbar: {
+                "--border-color": "$colors$toolbarBorder",
+                "--background-color": "$colors$toolbarBg",
+            },
+            colored: {
+                "--border-color": "var(--custom-header-color)",
+                "--background-color": "var(--custom-header-color)",
+                "color": "var(--custom-text-color)",
+            },
+        },
+        position: {
+            top: {
+                borderBottom: "0.37px solid var(--border-color)",
+                ...topBottomShared,
+            },
+            bottom: {
+                borderTop: "0.37px solid var(--border-color)",
+                order: 2,
+                ...topBottomShared,
+            },
+            left: {
+                borderRight: "0.37px solid var(--border-color)",
+                ...leftRightShared,
+            },
+            right: {
+                borderLeft: "0.37px solid var(--border-color)",
+                order: 2,
+                ...leftRightShared,
+            },
+        },
+        center: {
+            true: {
+                [`& ${Contents.toString()}`]: {
+                    justifyContent: "center",
+                },
+            },
+        },
+    },
+});
+
+export {
+    StyledHeader,
+    Contents,
+    Before,
+    After,
+};

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

@@ -1,32 +1,41 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import classnames from "classnames";
+import type { Div } from "../../native";
 
 import { Action } from "../../ui/action/Action";
 import { EqualActions } from "../../ui/action/EqualActions";
-import { Div } from "../../native";
 
-import styles from "./Header.module.scss";
+import { After, Before, Contents, StyledHeader } from "./Header.styled";
 
 interface Props {
+    /**
+     * Should the main content (children) be centered?
+     */
     center?: boolean;
+    /**
+     * Styling variant.
+     */
     variant?: "toolbar" | "colored";
     /**
      * This indicates just how the borders are drawn and how content is aligned, not the actual position on the screen.
      * To set up position on the screen, you need to properly style the parent element.
      */
     position?: "top" | "left" | "right" | "bottom"; // @TODO disallow left/right if not inside StickyHeader?
+    /**
+     * Content to be displayed before the main content.
+     */
     before?: ReactNode;
+    /**
+     * Content to be displayed after the main content.
+     */
     after?: ReactNode;
 }
 
 const Header: React.FC<React.ComponentProps<typeof Div> & Props> = (props) => {
     const {
-        center,
-        variant,
         position = "top",
-        className: _className, before: _before, after: _after,
+        before: _before, after: _after,
         children,
         ...rest
     } = props;
@@ -36,36 +45,30 @@ const Header: React.FC<React.ComponentProps<typeof Div> & Props> = (props) => {
         return c && typeof c === "object" && "type" in c && c.type === Action;
     });
 
-    const cls = classnames(styles.header, {
-        [styles["header--center"] as string]: center,
-        [styles["header--toolbar"] as string]: variant === "toolbar",
-        [styles["header--colored"] as string]: variant === "colored",
-    }, styles[`header--${position}`], props.className);
-
     let contents = children;
     if (justActions) {
         const mode = position === "top" || position === "bottom" ? "horizontal" : "vertical";
-        contents = <EqualActions className={styles.actions as string} mode={mode}>{contents}</EqualActions>;
+        contents = <EqualActions mode={mode}>{contents}</EqualActions>;
     }
 
     let before: ReactNode;
     if (props.before != null) {
-        before = <div className={styles.before}>{props.before}</div>;
+        before = <Before>{props.before}</Before>;
     }
 
     let after: ReactNode;
     if (props.after != null) {
-        after = <div className={styles.after}>{props.after}</div>;
+        after = <After>{props.after}</After>;
     }
 
     return (
-        <Div className={cls} {...rest}>
+        <StyledHeader {...rest} position={position} data-header-position={position}>
             {before}
-            <div className={styles.contents}>
+            <Contents>
                 {contents}
-            </div>
+            </Contents>
             {after}
-        </Div>
+        </StyledHeader>
     );
 };
 

package/src/components/layout/header/HeaderIconAction.stories.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { Header } from "./Header";
+import { HeaderIconAction } from "./HeaderIconAction";
+
+const meta: Meta = {
+    title: "Components/Layout/Header/HeaderIconAction",
+    component: HeaderIconAction,
+    tags: ["autodocs", "layout"],
+    render: (args) => {
+        return (
+            <Header before={<HeaderIconAction {...args} icon={<>i</>} />}>
+                On the left you can see the icon
+            </Header>
+        );
+    },
+};
+
+type Story = StoryObj<typeof Header>;
+
+const Primary: Story = {};
+
+const MultipleIcons: Story = {
+    render: ({ onClick: _onClick, ...args }) => {
+        const after = (
+            <>
+                <div>some text</div>
+                <HeaderIconAction {...args} icon={<>i</>} />
+                <HeaderIconAction {...args} icon={<>i</>} />
+            </>
+        );
+        return (
+            <Header after={after}>
+                On the left you can see the icon
+            </Header>
+        );
+    },
+};
+
+export {
+    Primary,
+    MultipleIcons,
+};
+
+export default meta;

package/src/components/layout/header/HeaderIconAction.styled.ts

@@ -0,0 +1,40 @@
+import type { ThemeCSS } from "../../../theme";
+
+import { styled } from "../../../theme";
+import { Icon } from "../../icons/Icon";
+
+const sharedStyles: ThemeCSS = {
+    "blockSize": "100%",
+    "aspectRatio": "1",
+    "background": "none",
+    "borderRadius": "666px",
+    "display": "inline-flex",
+    "alignItems": "center",
+    "justifyContent": "center",
+    "border": "calc(2px / var(--ratio-border)) solid transparent",
+    "color": "currentColor",
+
+    "&:hover": {
+        background: "#00000022",
+    },
+    "&:active": {
+        background: "#00000011",
+        color: "currentColor",
+    },
+};
+
+const Btn = styled("button", sharedStyles);
+const A = styled("a", sharedStyles);
+
+const StyledIcon = styled(Icon, {
+    width: "16px",
+    height: "16px",
+    display: "block",
+    fill: "currentColor",
+});
+
+export {
+    Btn,
+    A,
+    StyledIcon,
+};

package/src/components/layout/header/HeaderIconAction.tsx

@@ -1,13 +1,9 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import classnames from "classnames";
-
 import type { ICON } from "../../icons/Icon";
 
-import { Icon } from "../../icons/Icon";
-
-import styles from "./HeaderIconAction.module.scss";
+import { A, Btn, StyledIcon } from "./HeaderIconAction.styled";
 
 interface LinkProps { // @TODO extract? - same on list item
     href: string;
@@ -15,21 +11,42 @@ interface LinkProps { // @TODO extract? - same on list item
 }
 
 interface Props {
+    /**
+     * Icon to display. Can be a string (for build in icons) or a ReactNode (any icon component).
+     */
     icon?: ICON | Exclude<ReactNode, string>;
+    /**
+     * Function to call when the icon is clicked.
+     */
     onClick?: () => void;
+    /**
+     * If given it will make the icon a native link.
+     */
     href?: string;
+    /**
+     * If given it will make the icon a custom link. `to` will be passed to given `Link` component as `href`.
+     */
     to?: string;
+    /**
+     * Custom link component to use. Use with `to` prop.
+     */
     Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
-    label?: ReactNode;
-    className?: string;
+    /**
+     * Additional class name to apply.
+     */
+    className?: string | undefined;
 }
 
+/**
+ * Use this component if you need a clickable icon that stylistically fits the header.
+ * It can be a simple link, a button or a custom link component.
+ */
 const HeaderIconAction: React.FC<Props> = (props) => {
-    const { icon, label, href, to, Link, className, ...restProps } = props;
+    const { icon, href, to, Link, className, ...restProps } = props;
 
     let content: ReactNode = icon;
     if (typeof icon === "string") {
-        content = <Icon className={styles.icon as string} name={icon as ICON} />;
+        content = <StyledIcon name={icon as ICON} />;
     }
 
     if (to) {
@@ -37,20 +54,17 @@ const HeaderIconAction: React.FC<Props> = (props) => {
             throw new TypeError("`to` prop given without `Link` component");
         }
 
-        const aCls = classnames(props.className, styles.a);
-        return <Link href={to} {...restProps}><a className={aCls}>{content}</a></Link>;
+        return <Link href={to} {...restProps}><A className={props.className}>{content}</A></Link>;
     }
 
     if (href) {
-        const aCls = classnames(props.className, styles.a);
-        return <a href={href} className={aCls} {...restProps}>{content}</a>;
+        return <A href={href} className={props.className} {...restProps}>{content}</A>;
     }
 
-    const btnCls = classnames(props.className, styles.btn);
     return (
-        <button className={btnCls} onClick={props.onClick}>
+        <Btn className={props.className} onClick={props.onClick}>
             {content}
-        </button>
+        </Btn>
     );
 };
 

package/src/components/layout/header/StickyHeader.stories.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { StickyHeader } from "./StickyHeader";
+import { Header } from "./Header";
+
+const meta: Meta = {
+    title: "Components/Layout/Header/StickyHeader",
+    component: StickyHeader,
+    tags: ["autodocs", "layout"],
+};
+
+type Story = StoryObj<typeof StickyHeader>;
+
+const Primary: Story = {
+    render: (args) => {
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers,react/no-array-index-key
+        const longContent = new Array(1000).fill(null).map((_, key) => <div key={key}>content</div>);
+
+        return (
+            <StickyHeader {...args}>
+                <Header>x<br />x<br />x</Header>
+                <StickyHeader.Content>{longContent}</StickyHeader.Content>
+            </StickyHeader>
+        );
+    },
+};
+
+export {
+    Primary,
+};
+
+export default meta;

package/src/components/layout/header/StickyHeader.styled.ts

@@ -0,0 +1,43 @@
+import { styled } from "../../../theme";
+
+const StyledStickyHeader = styled("div", {
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+
+    variants: {
+        position: {
+            top: {},
+            left: {
+                flexDirection: "row",
+            },
+            bottom: {},
+            right: {
+                flexDirection: "row",
+            },
+        },
+    },
+});
+
+const Content = styled("div", {
+    flex: 1,
+    overflow: "auto",
+
+    variants: {
+        position: {
+            top: {},
+            bottom: {
+                order: 1,
+            },
+            left: {},
+            right: {
+                order: 1,
+            },
+        },
+    },
+});
+
+export {
+    Content,
+    StyledStickyHeader,
+};

package/src/components/layout/header/StickyHeader.tsx

@@ -1,14 +1,11 @@
 import React from "react";
 
-import classnames from "classnames";
-
 import { Header } from "./Header";
-
-import styles from "./StickyHeader.module.scss";
+import { Content, StyledStickyHeader } from "./StickyHeader.styled";
 
 const err = new TypeError("StickyHeader needs two children - Header and StickyHeader.Content");
 
-interface Content {
+interface ContentComponent {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     Content: React.FC<ContentProps>;
 }
@@ -24,10 +21,10 @@ interface Props {
     children: React.ReactNode;
 }
 
-const StickyHeader: React.FC<Props> & Content = (props) => {
-    const position = props.position || "top";
+const StickyHeader: React.FC<Props> & ContentComponent = (props) => {
+    const { children: _children, position = "top", ...rest } = props;
 
-    const children = React.Children.toArray(props.children);
+    const children = React.Children.toArray(_children);
 
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
     if (children.length !== 2) {
@@ -44,21 +41,15 @@ const StickyHeader: React.FC<Props> & Content = (props) => {
     header = header as never; // @TODO find a better way to silence TS on cloneElement
     content = content as never;
 
-    const cls = classnames(styles.stickyHeader, styles[`stickyHeader--${position}`], props.className);
-
-    const contentCls = classnames(
-        styles.stickyHeader__content,
-        styles[`stickyHeader__content--${position}`],
-        (content as { props: ContentProps }).props.className,
-    );
+    const contentCls = (content as { props: ContentProps }).props.className;
 
     return (
-        <div className={cls}>
+        <StyledStickyHeader {...rest} position={position}>
             {React.cloneElement(header, { position })}
-            <div className={contentCls}>
+            <Content className={contentCls} position={position}>
                 {content}
-            </div>
-        </div>
+            </Content>
+        </StyledStickyHeader>
     );
 };
 // eslint-disable-next-line react/no-multi-comp