react-miui 0.23.4 → 0.23.6

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

@@ -5,6 +5,7 @@ import classnames from "classnames";
 
 import { Action } from "../../ui/action/Action";
 import { EqualActions } from "../../ui/action/EqualActions";
+import { Div } from "../../native";
 
 import styles from "./Header.module.scss";
 
@@ -13,17 +14,22 @@ interface Props {
     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 parent element.
+     * 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?
-    className?: string;
     before?: ReactNode;
     after?: ReactNode;
-    children: React.ReactNode;
 }
 
-const Header: React.FC<Props> = (props) => {
-    const { center, children, variant, position = "top" } = props;
+const Header: React.FC<React.ComponentProps<typeof Div> & Props> = (props) => {
+    const {
+        center,
+        variant,
+        position = "top",
+        className: _className, before: _before, after: _after,
+        children,
+        ...rest
+    } = props;
 
     const chld = React.Children.toArray(props.children);
     const justActions = chld.every(c => {
@@ -53,13 +59,13 @@ const Header: React.FC<Props> = (props) => {
     }
 
     return (
-        <div className={cls}>
+        <Div className={cls} {...rest}>
             {before}
             <div className={styles.contents}>
                 {contents}
             </div>
             {after}
-        </div>
+        </Div>
     );
 };
 

package/src/components/native/index.ts

@@ -0,0 +1,5 @@
+import { styled } from "../../theme";
+
+const Div = styled("div", {});
+
+export { Div };

package/src/components/ui/action/Action.stories.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { Action } from "./Action";
+
+const meta: Meta = {
+    title: "Components/UI/Action",
+    component: Action,
+    tags: ["autodocs", "ui"],
+};
+
+type Story = StoryObj<typeof Action>;
+
+const Primary: Story = {
+    args: {
+        label: "Section name",
+        icon: "checkmark",
+    },
+    render: (args) => {
+        const props = { ...args };
+        if (!args.label) {
+            delete props.label;
+        }
+        return (
+            <Action {...props} />
+        );
+    },
+};
+
+export {
+    Primary,
+};
+
+export default meta;

package/src/components/ui/action/Action.styled.ts

@@ -0,0 +1,40 @@
+import type { ThemeCSS } from "../../../theme";
+
+import { borderPxToRem, dimensionsPxToRem, styled } from "../../../theme";
+
+const StyledAction = styled("div", {
+    height: dimensionsPxToRem(102),
+    width: dimensionsPxToRem(102),
+    borderRadius: dimensionsPxToRem(102),
+    border: `${borderPxToRem(1)} solid $buttonBorder`,
+    background: "white",
+    padding: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+});
+
+const sharedCss: ThemeCSS = {
+    display: "inline-flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: dimensionsPxToRem(18),
+
+};
+
+const Anchor = styled("a", {
+    ...sharedCss,
+});
+
+const Button = styled("button", {
+    ...sharedCss,
+    border: "none",
+    padding: 0,
+    background: "none",
+});
+
+export {
+    StyledAction,
+    Anchor,
+    Button,
+};

package/src/components/ui/action/Action.tsx

@@ -1,13 +1,12 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import classnames from "classnames";
-
 import type { ICON } from "../../icons/Icon";
+import type { ThemeCSS } from "../../../theme";
 
 import { Icon } from "../../icons/Icon";
 
-import styles from "./Action.module.scss";
+import { Anchor, Button, StyledAction } from "./Action.styled";
 
 interface LinkProps { // @TODO extract? - same on list item
     href: string;
@@ -15,28 +14,59 @@ interface LinkProps { // @TODO extract? - same on list item
 }
 
 interface Props {
+    /**
+     * If action should be a native link provide target URL as `href`
+     */
     href?: string;
+    /**
+     * If action should be a routed link provide target URL as `to` and `Link` component
+     */
     to?: string;
+    /**
+     * If action should be a routed link provide target URL as `to` and `Link` component
+     */
+    Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
+    /**
+     * Standard onClick handler (with no event)
+     */
     onClick?: () => void;
+    /**
+     * Icon to be displayed
+     */
     icon?: ICON | Exclude<ReactNode, string>;
-    Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
+    /**
+     * Label to be displayed below the icon
+     */
     label?: ReactNode;
+    /**
+     * Custom class name
+     */
     className?: string;
+    /**
+     * Custom CSS
+     */
+    css?: ThemeCSS;
 }
 
+/**
+ * Action is a round-shaped button or a link, usually used at headers/toolbars.
+ *
+ * Its label is displayed below the circular shape.
+ */
 const Action: React.FC<Props> = (props) => {
-    const { icon, label, href, to, Link, ...restProps } = props;
+    const { icon, label, href, to, Link, css, ...restProps } = props;
+    const maybeCss = css ? { css } : {};
 
     let iconElem: ReactNode = icon;
     if (typeof icon === "string") {
         iconElem = <Icon name={icon as ICON} />;
     }
 
-    const labelElem = label ? <div className={styles.label}>{label}</div> : null;
+    const labelElem = label ? <div>{label}</div> : null;
 
     const content = (
         <>
-            <div className={styles.action}>{iconElem}</div>
+            <StyledAction>{iconElem}</StyledAction>
             {labelElem}
         </>
     );
@@ -46,17 +76,21 @@ const Action: React.FC<Props> = (props) => {
             throw new TypeError("`to` prop given without `Link` component");
         }
 
-        return <Link href={to} {...restProps}><a className={classnames(styles.a, props.className)}>{content}</a></Link>;
+        return (
+            <Link href={to} {...restProps}>
+                <Anchor className={props.className} {...maybeCss}>{content}</Anchor>
+            </Link>
+        );
     }
 
     if (href) {
-        return <a href={href} className={classnames(styles.a, props.className)} {...restProps}>{content}</a>;
+        return <Anchor href={href} className={props.className} {...restProps} {...maybeCss}>{content}</Anchor>;
     }
 
     return (
-        <button onClick={props.onClick} className={classnames(styles.button, props.className)}>
+        <Button onClick={props.onClick} className={props.className} {...maybeCss}>
             {content}
-        </button>
+        </Button>
     );
 };
 

package/src/demo/componentsMap.ts

@@ -7,13 +7,13 @@ import {
     HeaderDemo,
     HeaderWithButtonsDemo,
     HeaderWithButtonsOnSideDemo, ToolbarVariantDemo,
-} from "./components/layout/header/Header.js";
+} from "./components/layout/header/Header";
 import {
     StickyColoredBg,
     StickyHeaderBottomDemo,
     StickyHeaderDemo, StickyHeaderLeftCenterDemo, StickyHeaderLeftDemo, StickyHeaderRightDemo,
     StickyHeaderTopBottomDemo,
-} from "./components/layout/header/StickyHeader.js";
+} from "./components/layout/header/StickyHeader";
 import { DirectionPadDemo } from "./components/ui/directionPad/Pad";
 import { IconsDemo } from "./components/ui/icons/Icons";
 import {
@@ -22,7 +22,7 @@ import {
     ActionsDemo,
     ActionsOnBottom,
     ActionsOnLeft,
-} from "./components/ui/action/Action.js";
+} from "./components/ui/action/Action";
 import { ToggleDemo } from "./components/form/Toggle";
 import { CardDemo } from "./components/layout/card/Card";
 import { FormDemo } from "./components/form/Form";
@@ -136,7 +136,7 @@ const componentsMap: TheMap = {
         },
     },
     Action: {
-        name: "Action",
+        name: "Action", // TODO move all action demos to storybook
         Component: ActionDemo,
         children: {
             ActionOnBottom: {

package/dist/components/ui/action/Action.module.scss

@@ -1,26 +0,0 @@
-.action {
-    height: calc(102px / var(--ratio-dimensions));
-    width: calc(102px / var(--ratio-dimensions));
-    border-radius: 100px;
-    border: calc(1px / var(--ratio-border)) solid var(--button-border);
-    background: white;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.a {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.button {
-    border: none;
-    padding: 0;
-    background: none;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    gap: calc(18px / var(--ratio-dimensions));
-}

package/esm/components/ui/action/Action.module.scss

@@ -1,26 +0,0 @@
-.action {
-    height: calc(102px / var(--ratio-dimensions));
-    width: calc(102px / var(--ratio-dimensions));
-    border-radius: 100px;
-    border: calc(1px / var(--ratio-border)) solid var(--button-border);
-    background: white;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.a {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.button {
-    border: none;
-    padding: 0;
-    background: none;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    gap: calc(18px / var(--ratio-dimensions));
-}

package/src/components/ui/action/Action.module.scss

@@ -1,26 +0,0 @@
-.action {
-    height: calc(102px / var(--ratio-dimensions));
-    width: calc(102px / var(--ratio-dimensions));
-    border-radius: 100px;
-    border: calc(1px / var(--ratio-border)) solid var(--button-border);
-    background: white;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.a {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.button {
-    border: none;
-    padding: 0;
-    background: none;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    gap: calc(18px / var(--ratio-dimensions));
-}