react-miui 0.28.2 → 0.29.0

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 import { cap, scale } from "@ezez/utils";
 
@@ -8,7 +8,7 @@ import { fnWithProps } from "../../../types/fnWithProps";
 
 import { Background, Container, Value } from "./Progress.styled";
 
-interface Props extends React.ComponentProps<typeof Container> {
+type ProgressProps = React.ComponentProps<typeof Container> & {
     /**
      * The value of the progress bar. If used alone, it's the percentage value of the progress bar.
      */
@@ -25,7 +25,7 @@ interface Props extends React.ComponentProps<typeof Container> {
      * 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;
-}
+};
 
 type Selectors = {
     selectors: {
@@ -39,7 +39,7 @@ type Selectors = {
  *
  * At the moment, no value (undefined) means starting point, but in the future it will mean "undetermined" state.
  */
-const Progress = fnWithProps<React.FC<Props>, Selectors>((props) => {
+const ProgressBase = forwardRef<HTMLDivElement, ProgressProps>((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
     const { value, valueFrom, scaleFrom = 0, scaleTo = 100, ...rest } = props;
 
@@ -63,17 +63,35 @@ const Progress = fnWithProps<React.FC<Props>, Selectors>((props) => {
     };
 
     return (
-        <Container {...rest}>
+        <Container ref={ref} {...rest}>
             <Background />
             <Value css={css} zero={isZeroWidth} />
         </Container>
     );
-}, {
+});
+
+ProgressBase.displayName = "Progress";
+
+const Progress = fnWithProps<typeof ProgressBase, Selectors>(ProgressBase, {
+    /**
+     * @deprecated, use Progress-*-Selector exports
+     */
     selectors: {
+        /**
+         * @deprecated use ProgressBackgroundSelector instead
+         */
         background: Background.toString(),
+        /**
+         * @deprecated use ProgressValueSelector instead
+         */
         value: Value.toString(),
     },
 });
 
-export { Progress };
+Progress.toString = () => Container.toString();
+
+const ProgressBackgroundSelector = Background.toString();
+const ProgressValueSelector = Value.toString();
+
+export { Progress, type ProgressProps, ProgressBackgroundSelector, ProgressValueSelector };
 

package/src/components/ui/stats/Stats.stories.tsx

@@ -0,0 +1,167 @@
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { styled } from "../../../theme";
+import { Div } from "../../native";
+
+import {
+    Stats,
+    StatsLabelSelector,
+    StatsValueSelector,
+    StatsItemSelector,
+    StatsSeparatorSelector,
+} from "./Stats";
+
+const meta: Meta<typeof Stats> = {
+    title: "UI/Stats",
+    component: Stats,
+    parameters: {
+        layout: "padded",
+    },
+    tags: ["autodocs"],
+};
+
+type Story = StoryObj<typeof Stats>;
+
+const sampleStats = [
+    {
+        label: "Temperature",
+        value: "32°C",
+    },
+    {
+        label: "Used",
+        value: "320.3 mAh",
+    },
+    {
+        label: "Used for",
+        value: "14h 32m",
+    },
+];
+
+/**
+ * Default usage of the Stats component with light styling on a colored background.
+ */
+const Default: Story = {
+    render: () => (
+        <Div
+            css={{
+                background: "$green1Darker",
+                height: "200px",
+                display: "flex",
+                alignItems: "flex-end",
+            }}
+        >
+            <Stats stats={sampleStats} />
+        </Div>
+    ),
+};
+
+/**
+ * Dark variant of the Stats component, designed to be used on light backgrounds.
+ */
+const DarkVariant: Story = {
+    render: () => (
+        <Div
+            css={{
+                background: "$activeBg",
+                height: "200px",
+                display: "flex",
+                alignItems: "flex-end",
+            }}
+        >
+            <Stats stats={sampleStats} variant={"dark"} />
+        </Div>
+    ),
+};
+
+/**
+ * Stats component with more items to demonstrate how spacing and separators adapt.
+ */
+const WithMoreItems: Story = {
+    render: () => {
+        const moreStats = [
+            ...sampleStats,
+            {
+                label: "Voltage",
+                value: "4.2V",
+            },
+            {
+                label: "Capacity",
+                value: "5000 mAh",
+            },
+        ];
+
+        return (
+            <Div
+                css={{
+                    background: "$green1Darker",
+                    height: "200px",
+                    display: "flex",
+                    alignItems: "flex-end",
+                }}
+            >
+                <Stats stats={moreStats} />
+            </Div>
+        );
+    },
+};
+
+/**
+ * Custom styled variant of the Stats component with a different color scheme.
+ */
+const CustomStyledStats = styled(Stats, {
+    "--stats-border": "1px solid rgba(0, 0, 100, 0.2)",
+    "--stats-bg": "linear-gradient(to bottom, rgba(100, 149, 237, 0.1), rgba(100, 149, 237, 0.2))",
+    "--stats-value-color": "#1a237e",
+    "--stats-label-color": "#3949ab",
+
+    "borderRadius": "8px 8px 0 0",
+    "boxShadow": "0 -2px 10px rgba(0, 0, 0, 0.05)",
+
+    // Target specific subcomponents
+    [`& ${StatsValueSelector}`]: {
+        fontSize: "1.5rem",
+        fontWeight: "bold",
+    },
+
+    [`& ${StatsLabelSelector}`]: {
+        textTransform: "uppercase",
+        letterSpacing: "0.05em",
+        fontSize: "0.8rem",
+    },
+
+    [`& ${StatsSeparatorSelector}`]: {
+        borderLeft: "2px dotted rgba(0, 0, 100, 0.2)",
+    },
+
+    [`& ${StatsItemSelector}`]: {
+        "transition": "transform 0.2s ease",
+
+        "&:hover": {
+            transform: "translateY(-5px)",
+        },
+    },
+});
+
+/**
+ * A custom styled version of the Stats component with blue color scheme
+ * and interactive hover effects.
+ */
+const CustomStyled: Story = {
+    render: () => (
+        <div
+            style={{
+                background: "#e8eaf6",
+                height: "200px",
+                display: "flex",
+                alignItems: "flex-end",
+            }}
+        >
+            <CustomStyledStats stats={sampleStats} />
+        </div>
+    ),
+};
+
+export { Default, DarkVariant, WithMoreItems, CustomStyled };
+export default meta;

package/src/components/ui/stats/Stats.styled.ts

@@ -0,0 +1,62 @@
+import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme";
+
+const StyledStats = styled("ul", {
+    "--stats-border": "1px solid rgba(255, 255, 255, .15)",
+    "--stats-bg": "rgba(255, 255, 255, .05)",
+    "--stats-value-color": "rgba(255, 255, 255, .9)",
+    "--stats-label-color": "rgba(255, 255, 255, .61)",
+
+    "display": "flex",
+    "width": "100%",
+    "padding": dimensionsPxToRem(60),
+    "margin": "0",
+    "borderTop": "var(--stats-border)",
+    "background": "var(--stats-bg)",
+    "backgroundClip": "padding-box",
+    "listStyleType": "none",
+
+    "variants": {
+        variant: {
+            dark: {
+                "--stats-border": "1px solid rgba(0, 0, 0, .15)",
+                "--stats-bg": "rgba(0, 0, 0, .05)",
+                "--stats-value-color": "rgba(0, 0, 0, .9)",
+                "--stats-label-color": "rgba(0, 0, 0, .61)",
+            },
+        },
+    },
+});
+
+const Item = styled("li", {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "column",
+    textAlign: "center",
+    gap: dimensionsPxToRem(20),
+});
+
+const Separator = styled("li", {
+    borderLeft: "var(--stats-border)",
+});
+
+const Label = styled("span", {
+    display: "block",
+    color: "var(--stats-label-color)",
+    fontSize: fontPxToRem(22),
+});
+
+const Value = styled("span", {
+    display: "block",
+    color: "var(--stats-value-color)",
+    fontSize: fontPxToRem(30),
+});
+
+export {
+    StyledStats,
+    Item,
+    Separator,
+    Label,
+    Value,
+};

package/src/components/ui/stats/Stats.tsx

@@ -1,45 +1,55 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
-import classnames from "classnames";
+import type { ComponentProps } from "@stitches/react";
 
-import styles from "./Stats.module.scss";
+import { StyledStats, Item, Separator, Label, Value } from "./Stats.styled";
 
-interface Stat {
+type Stat = {
     label: string;
     value: React.ReactNode;
-}
+};
+
+type StyledStatsProps = ComponentProps<typeof StyledStats>;
 
-interface Props {
+type StatsProps = StyledStatsProps & {
     stats: Stat[];
-    variant?: "dark";
-    className?: string;
-}
+};
 
-const Stats: React.FC<Props> = (props) => {
-    const list = props.stats.map((s, k) => (
+const Stats = forwardRef<HTMLUListElement, StatsProps>(({ stats, ...props }, ref) => {
+    const list = stats.map((s, k) => (
         // eslint-disable-next-line react/no-array-index-key
-        <li key={k} className={styles.item}>
-            <span className={styles.value}>{s.value}</span>
-            <span className={styles.label}>{s.label}</span>
-        </li>
+        <Item key={k}>
+            <Value>{s.value}</Value>
+            <Label>{s.label}</Label>
+        </Item>
     ));
 
     const len = list.length;
-
     for (let i = 0; i < len - 1; i++) {
         // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-        list.splice((i * 2) + 1, 0, <li key={"separator" + String(i)} className={styles.separator} />);
+        list.splice((i * 2) + 1, 0, <Separator key={`separator${i}`} />);
     }
 
-    const cls = classnames(styles.stats, {
-        [styles["stats-dark"] as string]: props.variant === "dark",
-    }, props.className);
-
     return (
-        <ul className={cls}>
+        <StyledStats {...props} ref={ref}>
             {list}
-        </ul>
+        </StyledStats>
     );
+});
+
+Stats.displayName = "Stats";
+Stats.toString = () => StyledStats.toString();
+
+const StatsItemSelector = Item.toString();
+const StatsSeparatorSelector = Separator.toString();
+const StatsLabelSelector = Label.toString();
+const StatsValueSelector = Value.toString();
+
+export {
+    Stats,
+    StatsItemSelector,
+    StatsSeparatorSelector,
+    StatsLabelSelector,
+    StatsValueSelector,
 };
-
-export { Stats };
+export type { StatsProps, Stat };

package/src/components/ui/tabs/Item.styled.ts

@@ -0,0 +1,19 @@
+import { styled } from "@stitches/react";
+
+import { fontPxToRem } from "../../../theme";
+
+export const StyledItem = styled("button", {
+    border: "none",
+    padding: 0,
+    fontSize: fontPxToRem(29),
+    color: "var(--selector-text)",
+    background: "none",
+
+    variants: {
+        active: {
+            true: {
+                color: "var(--selector-active)",
+            },
+        },
+    },
+});

package/src/components/ui/tabs/Item.tsx

@@ -1,27 +1,28 @@
 import React, { useCallback } from "react";
 
-import classnames from "classnames";
-
 import type { ObjectValue } from "../../../types/form";
 
-import styles from "./Item.module.scss";
+import { StyledItem } from "./Item.styled";
 
-interface Props {
+type ItemProps = {
     value: ObjectValue;
     onClick: (value: string) => void;
     active: boolean;
-}
+};
 
-const Item: React.FC<Props> = (props) => {
+const Item = (props: ItemProps): React.ReactElement => {
     const handleClick = useCallback(() => {
         props.onClick(props.value.value);
-    }, [props.onClick, props.value.value, props.value.label]);
+    }, [props.onClick, props.value.value]);
 
-    const cls = classnames(styles.button, {
-        [styles.active as string]: props.active,
-    });
-
-    return <button onClick={handleClick} className={cls} type={"button"}>{props.value.label}</button>;
+    return (
+        <StyledItem onClick={handleClick} active={props.active} type={"button"} data-active={props.active}>
+            {props.value.label}
+        </StyledItem>
+    );
 };
 
-export { Item };
+Item.displayName = "Item";
+Item.toString = () => StyledItem.toString();
+
+export { Item, type ItemProps };

package/src/components/ui/tabs/Selector.stories.tsx

@@ -0,0 +1,108 @@
+import React, { useState } from "react";
+
+import type { StoryObj, Meta } from "@storybook/react-vite";
+
+import { Header } from "../../layout/header/Header";
+import { styled } from "../../../theme";
+
+import { Selector, SelectorItemSelector } from "./Selector";
+
+const meta: Meta = {
+    title: "Components/UI/Selector",
+    component: Selector,
+    tags: ["autodocs", "ui"],
+    args: {
+        values: ["Recent", "Categories", "Whole Disk"],
+        value: "Recent",
+    },
+    argTypes: {
+        onChange: {
+            action: "onChange",
+        },
+    },
+};
+
+type Story = StoryObj<typeof Selector>;
+
+const Primary: Story = {
+    render: (args) => {
+        const [current, setCurrent] = useState(args.value ?? "");
+
+        return (
+            <Selector
+                {...args}
+                value={current}
+                onChange={(value: string) => {
+                    setCurrent(value);
+                    if (args.onChange) {
+                        args.onChange(value);
+                    }
+                }}
+            />
+        );
+    },
+};
+
+const WithinHeader: Story = {
+    render: (args) => {
+        const [current, setCurrent] = useState(args.value ?? "");
+
+        return (
+            <Header>
+                <Selector
+                    {...args}
+                    value={current}
+                    onChange={(value: string) => {
+                        setCurrent(value);
+                        if (args.onChange) {
+                            args.onChange(value);
+                        }
+                    }}
+                />
+            </Header>
+        );
+    },
+};
+
+const CustomStyledSelector = styled(Selector, {
+    "backgroundColor": "$blue2",
+    "borderRadius": "8px",
+    "&&": {
+        "--selector-active": "$colors$green1",
+    },
+
+    [`& ${SelectorItemSelector}`]: {
+        fontFamily: "serif",
+        fontWeight: "bold",
+    },
+}) as typeof Selector;
+
+const CustomStyled: Story = {
+    render: (args) => {
+        const [current, setCurrent] = useState(args.value ?? "");
+
+        return (
+            <CustomStyledSelector
+                {...args}
+                value={current}
+                onChange={(value: string) => {
+                    setCurrent(value);
+                    if (args.onChange) {
+                        args.onChange(value);
+                    }
+                }}
+            />
+        );
+    },
+    args: {
+        values: ["Music", "Video", "Photos", "Documents"],
+    },
+};
+
+export {
+    Primary,
+    WithinHeader,
+    CustomStyled,
+};
+
+export default meta;

package/src/components/ui/tabs/Selector.styled.ts

@@ -0,0 +1,13 @@
+import { styled } from "@stitches/react";
+
+import { dimensionsPxToRem } from "../../../theme";
+
+export const Root = styled("div", {
+    "--selector-text": "$colors$selectorText",
+    "--selector-active": "$colors$selectorActive",
+
+    "display": "flex",
+    "flex": 1,
+    "justifyContent": "center",
+    "gap": dimensionsPxToRem(114),
+});

package/src/components/ui/tabs/Selector.tsx

@@ -1,23 +1,20 @@
-import React, { useCallback, useState } from "react";
-
-import classnames from "classnames";
+import React, { forwardRef, useCallback, useState } from "react";
 
 import type { Value } from "../../../types/form";
 
-import { toObjectValue } from "../../../utils/index";
+import { toObjectValue } from "../../../utils";
 
 import { Item } from "./Item";
+import { Root } from "./Selector.styled";
 
-import styles from "./Selector.module.scss";
-
-interface Props<T extends string> {
-    values: Value<T>[];
+type SelectorProps = {
+    values: Value<string>[];
     value?: string;
     onChange?: (value: string) => void;
     className?: string;
-}
+};
 
-const Selector = <T extends string>(props: Props<T>): ReturnType<React.FC<Props<T>>> => {
+const Selector = forwardRef<HTMLDivElement, SelectorProps>((props, ref) => {
     const [current, setCurrent] = useState(props.value);
 
     const handleCurrent = useCallback((value: string) => {
@@ -31,7 +28,13 @@ const Selector = <T extends string>(props: Props<T>): ReturnType<React.FC<Props<
         const ov = toObjectValue(v);
         return <Item key={ov.value} value={ov} onClick={handleCurrent} active={crr === ov.value} />;
     });
-    return <div className={classnames(props.className, styles.selector)}>{vals}</div>;
-};
+    return <Root ref={ref} className={props.className}>{vals}</Root>;
+});
+
+Selector.displayName = "Selector";
+Selector.toString = () => Root.toString();
+
+const SelectorItemSelector = Item.toString();
 
-export { Selector };
+export type { SelectorProps };
+export { Selector, SelectorItemSelector };

package/src/components/ui/toaster/Toaster.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react";
+import type { StoryObj, Meta } from "@storybook/react-vite";
 
 import { Div } from "../../native";
 import { Button } from "../button/Button";

package/src/components/ui/toaster/Toaster.tsx

@@ -10,6 +10,7 @@ type ToasterFn = (text: string, timeout?: number) => void;
 const ToasterContext = createContext<ToasterFn>(() => {
     throw new Error("Toaster Provider missing in the tree");
 });
+ToasterContext.displayName = "ToasterContext";
 
 const prefix = `${Date.now()}_`;
 let counter = 0;

package/src/components/ui/toolButton/ToolButton.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Div } from "../../native";
 

package/src/components/utils/Gap.tsx

@@ -0,0 +1,19 @@
+import { styled } from "../../theme";
+
+const Gap = styled("div", {
+    display: "flex",
+    gap: "10px",
+    flexDirection: "column",
+
+    variants: {
+        row: {
+            true: {
+                flexDirection: "row",
+            },
+        },
+    },
+});
+
+export {
+    Gap,
+};

package/src/index.ts

@@ -43,6 +43,7 @@ export * from "./components/ui/tabs/Selector";
 export * from "./components/ui/toaster/Toaster";
 export * from "./components/ui/toolButton/ToolButton";
 
+export * from "./components/utils/Gap";
 export * from "./components/utils/HandleEsc";
 export * from "./components/utils/If";
 export * from "./components/utils/Spacer";
@@ -53,3 +54,4 @@ export type { ThemeCSS } from "./theme";
 
 export * from "./theme";
 export { cssReset } from "./theme.css-reset";
+export { injectGlobalStyles } from "./theme.css-global";