react-miui 0.23.7-beta.2 → 0.24.0

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

@@ -1,4 +1,6 @@
-import React from "react";
+import React, { useEffect } from "react";
+
+import { useForceUpdate } from "@ezez/hooks";
 
 import type { StoryObj, Meta } from "@storybook/react";
 
@@ -9,6 +11,21 @@ const meta: Meta = {
     title: "Components/Layout/Header/StickyHeader",
     component: StickyHeader,
     tags: ["autodocs", "layout"],
+    argTypes: {
+        children: {
+            control: {
+                disable: true,
+            },
+            description: "Usual children",
+        },
+        position: {
+            control: {
+                type: "select",
+            },
+            description: "Position of the header",
+            options: ["top", "left", "right", "bottom"],
+        },
+    },
 };
 
 type Story = StoryObj<typeof StickyHeader>;
@@ -34,8 +51,37 @@ const Primary: Story = {
     },
 };
 
+const RefsDemo: Story = {
+    render: (args) => {
+        const ref = React.useRef<HTMLDivElement>(null);
+        const refContent = React.useRef<HTMLDivElement>(null);
+        const handleForceUpdate = useForceUpdate();
+
+        useEffect(() => {
+            handleForceUpdate();
+        }, []);
+
+        console.info("RefsDemo", {
+            ref: ref.current, refContent: refContent.current,
+        });
+
+        return (
+            <>
+                <StickyHeader {...args} ref={ref}>
+                    <Header>x</Header>
+                    <StickyHeader.Content ref={refContent}>
+                        {`Ref: ${ref.current ? `set ${ref.current.nodeName}` : "not set"}`}<br />
+                        {`RefContent: ${refContent.current ? `set ${refContent.current.nodeName}` : "not set"}`}<br />
+                    </StickyHeader.Content>
+                </StickyHeader>
+            </>
+        );
+    },
+};
+
 export {
     Primary,
+    RefsDemo,
 };
 
 export default meta;

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 import { Header } from "./Header";
 import { Content, StyledStickyHeader } from "./StickyHeader.styled";
@@ -6,23 +6,36 @@ import { Content, StyledStickyHeader } from "./StickyHeader.styled";
 const err = new TypeError("StickyHeader needs two children - Header and StickyHeader.Content");
 
 interface ContentComponent {
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    Content: React.FC<ContentProps>;
-}
-
-interface ContentProps {
-    className?: string;
-    children: React.ReactNode;
+    Content: typeof Content;
 }
 
 interface Props {
+    /**
+     * Position of the header
+     */
     position?: "top" | "left" | "right" | "bottom";
+    /**
+     * Additional class name
+     */
     className?: string;
+    /**
+     * If you need to pass custom children for some reason and you are sure that you are doing it right - use this prop
+     * to disable children type check.
+     */
+    __dangerouslyDisableChildrenGuard?: boolean;
     children: React.ReactNode;
 }
 
-const StickyHeader: React.FC<Props> & ContentComponent = (props) => {
-    const { children: _children, position = "top", ...rest } = props;
+const StickyHeaderRaw = forwardRef<HTMLDivElement, Props>((props, ref) => {
+    const { children: _children, position = "top", __dangerouslyDisableChildrenGuard, ...rest } = props;
+
+    if (__dangerouslyDisableChildrenGuard) {
+        return (
+            <StyledStickyHeader ref={ref} {...rest} position={position}>
+                {_children}
+            </StyledStickyHeader>
+        );
+    }
 
     const children = React.Children.toArray(_children);
 
@@ -32,7 +45,7 @@ const StickyHeader: React.FC<Props> & ContentComponent = (props) => {
     }
 
     let header = children.find(c => typeof c === "object" && "type" in c && c.type === Header),
-        content = children.find(c => typeof c === "object" && "type" in c && c.type === StickyHeader.Content);
+        content = children.find(c => typeof c === "object" && "type" in c && c.type === Content);
 
     if (!header || !content) {
         throw err;
@@ -41,20 +54,18 @@ const StickyHeader: React.FC<Props> & ContentComponent = (props) => {
     header = header as never; // @TODO find a better way to silence TS on cloneElement
     content = content as never;
 
-    const contentCls = (content as { props: ContentProps }).props.className;
-
     return (
-        <StyledStickyHeader {...rest} position={position}>
+        <StyledStickyHeader ref={ref} {...rest} position={position}>
             {React.cloneElement(header, { position })}
-            <Content className={contentCls} position={position}>
-                {content}
-            </Content>
+            {React.cloneElement(content, { position })}
         </StyledStickyHeader>
     );
-};
-// eslint-disable-next-line react/no-multi-comp
-StickyHeader.Content = ({ children }) => {
-    return <>{children}</>;
-};
+});
+
+type StickyHeaderType = React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>> & ContentComponent;
+
+const StickyHeader = StickyHeaderRaw as StickyHeaderType;
+StickyHeader.Content = Content; // @TODO remove "position" from this component props
 
 export { StickyHeader };
+export type { Props as StickyHeaderProps };

package/src/components/ui/pop/Pop.stories.tsx

@@ -0,0 +1,102 @@
+import React, { useCallback, useState } from "react";
+
+import { SunOne } from "@icon-park/react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { HeaderIconAction } from "../../layout/header/HeaderIconAction";
+import { Icon, ICON } from "../../icons/Icon";
+import { StickyHeader } from "../../layout/header/StickyHeader";
+import { Header } from "../../layout/header/Header";
+import { Section } from "../../layout/section/Section";
+
+import { Pop } from "./Pop";
+
+const meta: Meta = {
+    title: "Components/UI/Pop",
+    component: Pop,
+    tags: ["autodocs", "layout"],
+    args: {
+        value: 25,
+        valueFrom: 15,
+        scaleFrom: 10,
+        scaleTo: 30,
+    },
+};
+
+type Story = StoryObj<typeof Pop>;
+
+const handleClick = () => {
+    console.info("Clicked an option");
+};
+
+const Primary: Story = {
+    // eslint-disable-next-line max-lines-per-function
+    render: (args) => {
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const [open, setOpen] = useState(false);
+        const [leftOpen, setLeftOpen] = useState(false);
+
+        const handleToggle = useCallback(() => {
+            setOpen(p => !p);
+        }, []);
+
+        const handleLeftToggle = useCallback(() => {
+            setLeftOpen(p => !p);
+        }, []);
+
+        const handleClose = useCallback(() => {
+            setOpen(false);
+        }, []);
+
+        const handleLeftClose = useCallback(() => {
+            setLeftOpen(false);
+        }, []);
+
+        const after = (
+            <>
+                <HeaderIconAction icon={ICON.config} onClick={handleToggle} />
+                <Pop anchor={"prev"} open={open} onClose={handleClose}>
+                    <Pop.Option icon={<Icon name={ICON.heart} />} onClick={handleClick}>Add new list</Pop.Option>
+                    <Pop.Option icon={<Icon name={ICON.trash} />} onClick={handleClick}>Remove empty lists</Pop.Option>
+                    <Pop.Option onClick={handleClick}>Configure</Pop.Option>
+                </Pop>
+            </>
+        );
+
+        const left = (
+            <>
+                <HeaderIconAction icon={ICON.checkmark} onClick={handleLeftToggle} />
+                <Pop anchor={"prev"} open={leftOpen} onClose={handleLeftClose}>
+                    <Pop.Option icon={<Icon name={ICON.heart} />} onClick={handleClick}>Add new list</Pop.Option>
+                    <Pop.Option icon={<Icon name={ICON.trash} />} onClick={handleClick}>Remove empty lists</Pop.Option>
+                    <Pop.Option icon={<SunOne />} onClick={handleClick}>Configure</Pop.Option>
+                    <Pop.Option icon={<Icon name={ICON.heart} />} onClick={handleClick}>Add new list</Pop.Option>
+                    <Pop.Option icon={<Icon name={ICON.trash} />} onClick={handleClick}>Remove empty lists</Pop.Option>
+                    <Pop.Option onClick={handleClick}>Configure</Pop.Option>
+                    <Pop.Option icon={<Icon name={ICON.heart} />} onClick={handleClick}>Add new list</Pop.Option>
+                    <Pop.Option icon={<Icon name={ICON.trash} />} onClick={handleClick}>Remove empty lists</Pop.Option>
+                    <Pop.Option icon={<>text</>} onClick={handleClick}>Configure</Pop.Option>
+                </Pop>
+            </>
+        );
+
+        return (
+            <StickyHeader>
+                <Header before={left} after={after}>
+                    Some place
+                </Header>
+                <StickyHeader.Content>
+                    <Section horizontal={true} vertical={true} css={{ minHeight: 600 }}>
+                        Click on the left or right icon to open the menu
+                    </Section>
+                </StickyHeader.Content>
+            </StickyHeader>
+        );
+    },
+};
+
+export default meta;
+export {
+    Primary,
+};

package/src/components/ui/pop/Pop.styled.ts

@@ -0,0 +1,68 @@
+import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme";
+
+const Overlay = styled("div", {
+    position: "fixed",
+    background: "#0000004c",
+    inset: 0,
+    zIndex: 4,
+});
+
+const List = styled("ul", {
+    zIndex: 5,
+    position: "absolute",
+    background: "white",
+    margin: 0,
+    padding: 0,
+    listStyleType: "none",
+});
+
+const ListItem = styled("li", {
+    "margin": 0,
+    "padding": 0,
+    "listStyleType": "none",
+
+    "& + &": {
+        borderTop: "1px solid var(--border)",
+    },
+});
+
+const Button = styled("button", {
+    "border": "none",
+    "background": "white",
+    "height": dimensionsPxToRem(116),
+    "padding": `0 ${dimensionsPxToRem(42)}`,
+    "boxSizing": "border-box",
+    "width": "100%",
+    "minWidth": dimensionsPxToRem(460),
+    "textAlign": "left",
+    "color": "$popText",
+    "fontSize": fontPxToRem(26),
+    "fontWeight": "revert",
+    "display": "flex",
+    "alignItems": "center",
+
+    "&:hover": {
+        background: "$activeBg",
+    },
+});
+
+const Icon = styled("div", {
+    fill: "currentColor",
+    marginRight: dimensionsPxToRem(42),
+});
+
+const FakeIcon = styled("span", {
+    display: "inline-block",
+    width: 16,
+    height: 16,
+    marginRight: dimensionsPxToRem(42),
+});
+
+export {
+    Overlay,
+    List,
+    ListItem,
+    Button,
+    Icon,
+    FakeIcon,
+};

package/src/components/ui/pop/Pop.tsx

@@ -1,13 +1,12 @@
 import React, { Component, createRef } from "react";
 
-import classnames from "classnames";
+import type { ThemeCSS } from "../../../theme";
 
 import { HandleEsc } from "../../utils/HandleEsc";
 
 import { OnButtonClick } from "./OnButtonClick";
 import { PopOption } from "./PopOption";
-
-import styles from "./Pop.module.scss";
+import { List, Overlay } from "./Pop.styled";
 
 interface Props {
     open: boolean;
@@ -51,6 +50,11 @@ const getElementLocation = (element: HTMLElement, outerElement = html): [State["
     return [verticalLocation, horizontalLocation];
 };
 
+/**
+ * Popup menu component.
+ *
+ * It has a bug that miscalculates the position inside Storybook.
+ */
 class Pop extends Component<Props, State> {
     public constructor(props: Props) {
         super(props);
@@ -125,7 +129,7 @@ class Pop extends Component<Props, State> {
     };
 
     public override render() {
-        const style: React.CSSProperties = {};
+        const style: ThemeCSS = {};
 
         if (this.state.vertical === "top") {
             style.top = this.state.y;
@@ -148,17 +152,15 @@ class Pop extends Component<Props, State> {
         const closeOnEsc = this.props.closeOnEsc ?? true;
         const esc = closeOnEsc && <HandleEsc onPress={this.handleEsc} />;
 
-        const cls = classnames(this.props.className, styles.overlay);
-
         return (
-            <div className={cls} ref={this.rootRef} onClick={this.handleOverlayClick}>
+            <Overlay className={this.props.className} ref={this.rootRef} onClick={this.handleOverlayClick}>
                 {esc}
                 <OnButtonClick onClick={this.handleEsc}>
-                    <ul className={styles.pop} style={style}>
+                    <List css={style}>
                         {this.props.children}
-                    </ul>
+                    </List>
                 </OnButtonClick>
-            </div>
+            </Overlay>
         );
     }
 }

package/src/components/ui/pop/PopOption.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 
-import classnames from "classnames";
-
-import styles from "./Pop.module.scss";
+import { Button, FakeIcon, Icon, ListItem } from "./Pop.styled";
 
 interface Props {
     icon?: React.ReactElement;
@@ -14,13 +12,13 @@ interface Props {
 
 const PopOption: React.FC<Props> = (props) => {
     const ic = props.icon
-        ? <div className={styles.icon}>{props.icon}</div>
-        : ((props.forceEmptyIcon ?? true) ? <span className={styles.fakeIcon} /> : null);
+        ? <Icon>{props.icon}</Icon>
+        : ((props.forceEmptyIcon ?? true) ? <FakeIcon /> : null);
 
     return (
-        <li className={classnames(props.className, styles.li)}>
-            <button onClick={props.onClick} className={styles.button}>{ic}{props.children}</button>
-        </li>
+        <ListItem className={props.className}>
+            <Button onClick={props.onClick}>{ic}{props.children}</Button>
+        </ListItem>
     );
 };
 

package/src/components/ui/progress/Progress.stories.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { styled } from "../../../theme";
+
+import { Progress, ValueClassName } from "./Progress";
+
+const meta: Meta = {
+    title: "Components/UI/Progress",
+    component: Progress,
+    tags: ["autodocs", "layout"],
+    args: {
+        value: 25,
+        valueFrom: 15,
+        scaleFrom: 10,
+        scaleTo: 30,
+    },
+};
+
+type Story = StoryObj<typeof Progress>;
+
+const Primary: Story = {};
+
+const CustomProgress = styled(Progress, {
+    "--value-background-color":
+        "linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff)",
+
+    [`& ${ValueClassName}`]: {
+        borderWidth: 0,
+    },
+});
+
+const CustomizedColors: Story = {
+    render: (args) => {
+        return (
+            <CustomProgress {...args} />
+        );
+    },
+};
+
+export default meta;
+export {
+    Primary,
+    CustomizedColors,
+};

package/src/components/ui/progress/Progress.styled.ts

@@ -0,0 +1,56 @@
+import { borderPxToRem, css, dimensionsPxToRem, styled } from "../../../theme";
+
+const Container = styled("div", {
+    "height": dimensionsPxToRem(20),
+    "position": "relative",
+    "overflow": "hidden",
+
+    "variants": {
+        size: {
+            big: {
+                height: dimensionsPxToRem(40),
+            },
+        },
+    },
+
+    "--value-border-color": "$colors$blue5",
+    "--value-background-color": "$colors$blue4",
+    "--container-border-color": "$colors$border",
+    "--container-background-color": "$colors$toggleBgDisabled",
+
+});
+
+const sharedValueStyles = css({
+    position: "absolute",
+    top: 0,
+    height: `100%`,
+    borderRadius: "9999px",
+    border: `${borderPxToRem(1)} solid $border`,
+    background: "$background",
+});
+
+const Value = styled("div", sharedValueStyles, {
+    borderColor: "var(--value-border-color)",
+    background: "var(--value-background-color)",
+    transition: "right 0.3s, border-width 0.3s, left 0.3s",
+
+    variants: {
+        zero: {
+            true: {
+                borderWidth: 0,
+            },
+        },
+    },
+});
+
+const Background = styled("div", sharedValueStyles, {
+    borderColor: "var(--container-border-color)",
+    background: "var(--container-background-color)",
+    width: "100%",
+});
+
+export {
+    Container,
+    Value,
+    Background,
+};

package/src/components/ui/progress/Progress.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+
+import { cap, scale } from "@ezez/utils";
+
+import type { ThemeCSS } from "../../../theme";
+
+import { Background, Container, Value } from "./Progress.styled";
+
+interface Props extends React.ComponentProps<typeof Container> {
+    /**
+     * The value of the progress bar. If used alone, it's the percentage value of the progress bar.
+     */
+    value?: number | undefined;
+    /**
+     * Value from which the value bar starts. Default is equal to `scaleFrom`.
+     */
+    valueFrom?: number;
+    /**
+     * Redefines the scale of the progress bar. By default, the scale is 0-100. This controls the starting point of the progress bar.
+     */
+    scaleFrom?: number;
+    /**
+     * Redefines the scale of the progress bar. By default, the scale is 0-100. This controls the ending point of the progress bar.
+     */
+    scaleTo?: number;
+}
+
+/**
+ * Progress bar component, it can be filled from the start or from any arbitrary point.
+ *
+ * At the moment, no value (undefined) means starting point, but in the future it will mean "undetermined" state.
+ */
+const Progress: React.FC<Props> = (props) => {
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    const { value, valueFrom, scaleFrom = 0, scaleTo = 100, ...rest } = props;
+
+    const from = cap(valueFrom ?? scaleFrom, scaleTo, scaleFrom);
+    const to = cap(value ?? scaleFrom, scaleTo, scaleFrom);
+
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    const scaledFrom = valueFrom != null ? scale(scaleFrom, scaleTo, 0, 100, from) : 0;
+    const percFrom = Math.max(scaledFrom, 0);
+
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    const scaledTo = value != null ? scale(scaleTo, scaleFrom, 0, 100, to) : 100;
+    const percTo = Math.max(scaledTo, 0);
+
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    const isZeroWidth = from >= to || percFrom === 100 || percTo === 100;
+
+    const css: ThemeCSS = {
+        right: `${percTo}%`,
+        left: `${percFrom}%`,
+    };
+
+    return (
+        <Container {...rest}>
+            <Background />
+            <Value css={css} zero={isZeroWidth} />
+        </Container>
+    );
+};
+
+const BackgroundClassName = Background.toString();
+const ValueClassName = Value.toString();
+
+export { Progress, BackgroundClassName, ValueClassName };
+

package/src/demo/componentsMap.ts

@@ -19,7 +19,6 @@ import { LabelDemo } from "./components/form/Label";
 import { ToasterDemo } from "./components/ui/toaster/Toaster";
 import { TabsDemo } from "./components/ui/tabs/Tabs";
 import { ChoiceDemo, ChoiceDemo2 } from "./components/form/Choice";
-import { PopDemo } from "./components/ui/pop/Pop";
 import { DrawerDemo } from "./components/ui/drawer/Drawer";
 import { StatsDarkDemo, StatsDemo } from "./components/ui/stats/Stats";
 import { TableDemo } from "./components/layout/table/TableDemo";
@@ -129,10 +128,6 @@ const componentsMap: TheMap = {
         name: "Drawer",
         Component: DrawerDemo,
     },
-    Pop: {
-        name: "Pop up menu",
-        Component: PopDemo,
-    },
     Table: {
         name: "Table",
         Component: TableDemo,

package/src/index.ts

@@ -33,6 +33,7 @@ export * from "./components/ui/loader/PopLoader";
 export * from "./components/ui/message/Message";
 export * from "./components/ui/modal/Modal";
 export * from "./components/ui/modal/ModalButtons";
+export * from "./components/ui/progress/Progress";
 export * from "./components/ui/pop/Pop";
 export * from "./components/ui/pop/PopOption";
 export * from "./components/ui/stats/Stats";

package/src/theme.ts

@@ -5,7 +5,7 @@ import type { CSS as StitchesCSS } from "@stitches/react";
 
 const RATIOS = {
     dimensions: 3,
-    border: 2.666666,
+    border: 1,
     font: 1.666666,
 };
 
@@ -76,6 +76,8 @@ const {
             blue1: "#038bf4",
             blue2: "#b7d6f5",
             blue3: "#dbe6ff",
+            blue4: "#33b4ff",
+            blue5: "#30a2e6",
             orange1: "#ff7200",
             orange1Darker: "#cc5b00",
             purple1: "#7357e8",