react-miui 0.28.3 → 0.29.0

package/src/components/icons/Checkmark.tsx

@@ -13,7 +13,7 @@ const Checkmark: React.FC<Props> = (props) => {
             xmlns={"http://www.w3.org/2000/svg"}
             className={props.className}
         >
-            <path d={"M26 1.6q0-.7-.4-1.15Q25.15 0 24.55 0q-.65 0-1.1.45L9.5 14.35l-6.95-7Q2.1 6.9 1.5 6.9q-.65 0-1.05.45Q0 7.8 0 8.4q0 .7.45 1.15l8 8.05q.45.4 1.05.4.6 0 1.05-.4l15-14.95Q26 2.2 26 1.6"} />
+            <path fill={"currentColor"} d={"M26 1.6q0-.7-.4-1.15Q25.15 0 24.55 0q-.65 0-1.1.45L9.5 14.35l-6.95-7Q2.1 6.9 1.5 6.9q-.65 0-1.05.45Q0 7.8 0 8.4q0 .7.45 1.15l8 8.05q.45.4 1.05.4.6 0 1.05-.4l15-14.95Q26 2.2 26 1.6"} />
         </svg>
     );
 };

package/src/components/icons/Config.tsx

@@ -13,7 +13,7 @@ const Config: React.FC<Props> = (props) => {
             xmlns={"http://www.w3.org/2000/svg"}
             className={props.className}
         >
-            <path d={"M87.55 26.85 85.2 21.5l-5.25.6q-2.4.3-3.7.25-1.3-.05-2.35-.65-1-.6-2.5-1.95-1.55-1.3-2.25-2.3-.75-1-.95-2.5-.25-1.45-.25-4.25l-.1-6.15L56.65 0l-4.1 4.5q-1.7 1.8-2.85 2.75-1.25.95-2.35 1.3-1.15.3-2.7.3-1.5 0-2.6-.3-1.2-.35-2.35-1.25-1.2-.9-2.85-2.65L32.75.4 28 2.25q-2.05.8-3.65 1.65-1.6.75-2 1.15-.4.45-.6 2.15-.25 1.75-.1 4 .1 2.1-.05 3.45-.15 1.35-.65 2.4-.45 1-1.45 2.1-1 1.25-1.95 1.8-.9.6-2.4.8-1.45.2-4.15.25l-6.1.1L.1 33 4 36.9q1.55 1.6 2.8 3.4 1.2 1.8 1.5 2.9.5 2.7-.95 5.55Q6 51.55 3.1 53.8L0 56.35 4.9 67.7h4.85q6.5 0 9.4 3 2.95 2.95 2.5 9.1-.25 2.25.1 3.55.3 1.2 1.75 2.1 1.45.85 4.6 2l4.85 1.95 3.5-3.7q8.75-9.1 17.2.7l3 3.6 11.4-4.85-.3-4.2q-.45-6.55 2.7-9.85 3.15-3.35 9.9-3.2l5.35.2 4.1-11.4-3.7-3q-3.25-2.7-4.2-6.2-.95-3.5.35-6.85 1.3-3.25 4.85-5.35 1.2-.65 2-1.35.85-.65.9-.95-.05-.35-.75-2.1-.6-1.7-1.7-4.05m-28.25.8q2 1.5 3.5 3.55 1.45 2.05 2.75 4.9 1.95 4.4 1.9 8.95-.1 4.5-2.2 9.05-2 4.35-5 7.15-2.9 2.75-7.1 4.45-8.65 3.25-17.25-.8-2.9-1.3-4.9-2.8-2.05-1.55-3.5-3.6-1.45-2-2.75-4.9-1.9-4.2-1.9-8.75 0-4.5 1.9-8.75 1.3-2.85 2.75-4.9 1.45-2.05 3.5-3.55 2-1.55 4.9-2.85 4.65-2.3 9.25-2.3t9.25 2.3q2.9 1.3 4.9 2.85"} />
+            <path fill={"currentColor"} d={"M87.55 26.85 85.2 21.5l-5.25.6q-2.4.3-3.7.25-1.3-.05-2.35-.65-1-.6-2.5-1.95-1.55-1.3-2.25-2.3-.75-1-.95-2.5-.25-1.45-.25-4.25l-.1-6.15L56.65 0l-4.1 4.5q-1.7 1.8-2.85 2.75-1.25.95-2.35 1.3-1.15.3-2.7.3-1.5 0-2.6-.3-1.2-.35-2.35-1.25-1.2-.9-2.85-2.65L32.75.4 28 2.25q-2.05.8-3.65 1.65-1.6.75-2 1.15-.4.45-.6 2.15-.25 1.75-.1 4 .1 2.1-.05 3.45-.15 1.35-.65 2.4-.45 1-1.45 2.1-1 1.25-1.95 1.8-.9.6-2.4.8-1.45.2-4.15.25l-6.1.1L.1 33 4 36.9q1.55 1.6 2.8 3.4 1.2 1.8 1.5 2.9.5 2.7-.95 5.55Q6 51.55 3.1 53.8L0 56.35 4.9 67.7h4.85q6.5 0 9.4 3 2.95 2.95 2.5 9.1-.25 2.25.1 3.55.3 1.2 1.75 2.1 1.45.85 4.6 2l4.85 1.95 3.5-3.7q8.75-9.1 17.2.7l3 3.6 11.4-4.85-.3-4.2q-.45-6.55 2.7-9.85 3.15-3.35 9.9-3.2l5.35.2 4.1-11.4-3.7-3q-3.25-2.7-4.2-6.2-.95-3.5.35-6.85 1.3-3.25 4.85-5.35 1.2-.65 2-1.35.85-.65.9-.95-.05-.35-.75-2.1-.6-1.7-1.7-4.05m-28.25.8q2 1.5 3.5 3.55 1.45 2.05 2.75 4.9 1.95 4.4 1.9 8.95-.1 4.5-2.2 9.05-2 4.35-5 7.15-2.9 2.75-7.1 4.45-8.65 3.25-17.25-.8-2.9-1.3-4.9-2.8-2.05-1.55-3.5-3.6-1.45-2-2.75-4.9-1.9-4.2-1.9-8.75 0-4.5 1.9-8.75 1.3-2.85 2.75-4.9 1.45-2.05 3.5-3.55 2-1.55 4.9-2.85 4.65-2.3 9.25-2.3t9.25 2.3q2.9 1.3 4.9 2.85"} />
         </svg>
     );
 };

package/src/components/icons/Dots.tsx

@@ -13,7 +13,7 @@ const Dots: React.FC<Props> = (props) => {
             xmlns={"http://www.w3.org/2000/svg"}
             className={props.className}
         >
-            <path d={"M13.65 13.65Q16 11.3 16 8q0-3.3-2.35-5.65Q11.3 0 8 0 4.7 0 2.35 2.35 0 4.7 0 8q0 3.3 2.35 5.65Q4.7 16 8 16q3.3 0 5.65-2.35M8 44q3.3 0 5.65-2.35Q16 39.3 16 36q0-3.3-2.35-5.65Q11.3 28 8 28q-3.3 0-5.65 2.35Q0 32.7 0 36q0 3.3 2.35 5.65Q4.7 44 8 44M8 72q3.3 0 5.65-2.35Q16 67.3 16 64q0-3.3-2.35-5.65Q11.3 56 8 56q-3.3 0-5.65 2.35Q0 60.7 0 64q0 3.3 2.35 5.65Q4.7 72 8 72"} />
+            <path fill={"currentColor"} d={"M13.65 13.65Q16 11.3 16 8q0-3.3-2.35-5.65Q11.3 0 8 0 4.7 0 2.35 2.35 0 4.7 0 8q0 3.3 2.35 5.65Q4.7 16 8 16q3.3 0 5.65-2.35M8 44q3.3 0 5.65-2.35Q16 39.3 16 36q0-3.3-2.35-5.65Q11.3 28 8 28q-3.3 0-5.65 2.35Q0 32.7 0 36q0 3.3 2.35 5.65Q4.7 44 8 44M8 72q3.3 0 5.65-2.35Q16 67.3 16 64q0-3.3-2.35-5.65Q11.3 56 8 56q-3.3 0-5.65 2.35Q0 60.7 0 64q0 3.3 2.35 5.65Q4.7 72 8 72"} />
         </svg>
     );
 };

package/src/components/icons/Heart.tsx

@@ -13,7 +13,7 @@ const Heart: React.FC<Props> = (props) => {
             xmlns={"http://www.w3.org/2000/svg"}
             className={props.className}
         >
-            <path d={"M54 8.5q-1.1-2.35-2.15-3.35Q50.9 4.2 49.4 3 47.75 1.65 44.9.75h-.05q-2.7-.85-5.55-.7-.05 0-.1.05-2.9.35-5.3 1.7-.8.35-1.9 1.15l.05-.05q-1.15.7-2.1 1.55-.75.55-1.55 1-.45.2-.9.15-.15-.05-.25-.05-.35-.05-.75-.35-.1-.05-.15-.1-.7-.4-1.35-.95l-.05-.05q-.85-.75-1.75-1.25-2.15-1.6-4.65-2.25Q15.9-.1 13.2.05q-.05 0-.15.05Q9.9.6 7 2.4h-.05q-2.7 1.75-4.5 4.45v.05Q.7 9.6.15 12.85q-.05.05-.05.1-.4 3.3 1.1 6.75v.1q1.25 2.45 3.2 4.6 1.6 2.05 3.55 4l3.8 3.8q0 .05.05.05 1.9 1.8 3.7 3.65v.05q3.9 3.75 6.05 5.8l.05.05q2.25 2.25 3.1 2.75l-.05-.05 1 .75q.85.75 2.05.75.3 0 .55-.1 1-.4 2-1.3.75-.75 2.1-1.85h.05q1.35-1.25 3-2.75h.05q1.6-1.55 3.35-3.2 1.75-1.65 3.7-3.7v.05l4.1-4 .05-.05q2.15-2.2 4-4.55v-.05q1.9-2.55 3.1-5.1h-.05q1.3-2.7 1.3-5.65 0-3-1-5.25m-4.25-1.25q.75.8 1.5 2.5t.75 4q0 2.25-1 4.35v.05q-1.05 2.25-2.7 4.55h-.05Q46.5 24.9 44.5 27l-4.1 4q-1.95 1.9-3.65 3.6-1.75 1.6-3.35 3.2-.05 0-.05.05-1.6 1.45-2.9 2.6-1.45 1.2-2.25 1.95-.35.3-.7.55-.5-.45-1.25-.95-.7-.45-2.6-2.35-2.15-2.1-6.05-5.9-1.8-1.8-3.75-3.7v.05l-3.8-3.8h.05q-1.85-1.9-3.4-3.85-.05-.1-.1-.1-1.65-1.8-2.7-3.9-1.1-2.6-.8-5.1.4-2.65 1.85-4.8 1.5-2.2 3.65-3.65 2.3-1.4 4.8-1.85 2.2-.15 4.35.45h.05q2 .55 3.7 1.8l.1.1q.7.45 1.45 1.05.85.65 1.65 1.15 1.25.95 2.4.95 1.4.25 2.75-.5l-.05.05q1.05-.6 2.1-1.35 0-.05.05-.05.75-.7 1.7-1.25 0-.05.05-.05.85-.6 1.45-.85.05-.05.15-.1 1.95-1.1 4.3-1.4h-.1q2.25-.15 4.45.55 2.3.75 3.6 1.75 1.35 1.05 2.2 1.9"} />
+            <path fill={"currentColor"} d={"M54 8.5q-1.1-2.35-2.15-3.35Q50.9 4.2 49.4 3 47.75 1.65 44.9.75h-.05q-2.7-.85-5.55-.7-.05 0-.1.05-2.9.35-5.3 1.7-.8.35-1.9 1.15l.05-.05q-1.15.7-2.1 1.55-.75.55-1.55 1-.45.2-.9.15-.15-.05-.25-.05-.35-.05-.75-.35-.1-.05-.15-.1-.7-.4-1.35-.95l-.05-.05q-.85-.75-1.75-1.25-2.15-1.6-4.65-2.25Q15.9-.1 13.2.05q-.05 0-.15.05Q9.9.6 7 2.4h-.05q-2.7 1.75-4.5 4.45v.05Q.7 9.6.15 12.85q-.05.05-.05.1-.4 3.3 1.1 6.75v.1q1.25 2.45 3.2 4.6 1.6 2.05 3.55 4l3.8 3.8q0 .05.05.05 1.9 1.8 3.7 3.65v.05q3.9 3.75 6.05 5.8l.05.05q2.25 2.25 3.1 2.75l-.05-.05 1 .75q.85.75 2.05.75.3 0 .55-.1 1-.4 2-1.3.75-.75 2.1-1.85h.05q1.35-1.25 3-2.75h.05q1.6-1.55 3.35-3.2 1.75-1.65 3.7-3.7v.05l4.1-4 .05-.05q2.15-2.2 4-4.55v-.05q1.9-2.55 3.1-5.1h-.05q1.3-2.7 1.3-5.65 0-3-1-5.25m-4.25-1.25q.75.8 1.5 2.5t.75 4q0 2.25-1 4.35v.05q-1.05 2.25-2.7 4.55h-.05Q46.5 24.9 44.5 27l-4.1 4q-1.95 1.9-3.65 3.6-1.75 1.6-3.35 3.2-.05 0-.05.05-1.6 1.45-2.9 2.6-1.45 1.2-2.25 1.95-.35.3-.7.55-.5-.45-1.25-.95-.7-.45-2.6-2.35-2.15-2.1-6.05-5.9-1.8-1.8-3.75-3.7v.05l-3.8-3.8h.05q-1.85-1.9-3.4-3.85-.05-.1-.1-.1-1.65-1.8-2.7-3.9-1.1-2.6-.8-5.1.4-2.65 1.85-4.8 1.5-2.2 3.65-3.65 2.3-1.4 4.8-1.85 2.2-.15 4.35.45h.05q2 .55 3.7 1.8l.1.1q.7.45 1.45 1.05.85.65 1.65 1.15 1.25.95 2.4.95 1.4.25 2.75-.5l-.05.05q1.05-.6 2.1-1.35 0-.05.05-.05.75-.7 1.7-1.25 0-.05.05-.05.85-.6 1.45-.85.05-.05.15-.1 1.95-1.1 4.3-1.4h-.1q2.25-.15 4.45.55 2.3.75 3.6 1.75 1.35 1.05 2.2 1.9"} />
         </svg>
     );
 };

package/src/components/icons/Icon.stories.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { List } from "../layout/list/List";
+
+import { Icon, ICON } from "./Icon";
+
+const meta: Meta<typeof Icon> = {
+    title: "Icons/Icon",
+    component: Icon,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+    argTypes: {
+        name: {
+            options: Object.values(ICON),
+            control: { type: "select" },
+        },
+    },
+};
+
+type Story = StoryObj<typeof Icon>;
+
+/**
+ * Basic usage of a single Icon component.
+ */
+const SingleIcon: Story = {
+    args: {
+        name: ICON.heart,
+    },
+};
+
+/**
+ * A gallery of all available icons in the system displayed in a grid layout.
+ */
+const AllIcons: Story = {
+    render: () => {
+        const icons = Object.values(ICON).map((value) => {
+            return (
+                <List.Item key={value} ratio={"1/"}>
+                    {value}
+                    <Icon name={value} />
+                </List.Item>
+            );
+        });
+
+        return (
+            <List>
+                {icons}
+            </List>
+        );
+    },
+};
+
+/**
+ * Custom styled icons with different colors using the styled() API.
+ */
+const CustomStyledIcons: Story = {
+    render: () => {
+        return (
+            <div style={{ display: "flex", alignItems: "center", gap: "20px" }}>
+                <div style={{ textAlign: "center", color: "red" }}>
+                    <Icon name={ICON.heart} />
+                    <div style={{ marginTop: "8px", fontSize: "12px" }}>Red</div>
+                </div>
+                <div style={{ textAlign: "center", color: "blue" }}>
+                    <Icon name={ICON.heart} />
+                    <div style={{ marginTop: "8px", fontSize: "12px" }}>Blue</div>
+                </div>
+                <div style={{ textAlign: "center", color: "green" }}>
+                    <Icon name={ICON.heart} />
+                    <div style={{ marginTop: "8px", fontSize: "12px" }}>Green</div>
+                </div>
+            </div>
+        );
+    },
+};
+
+export { SingleIcon, AllIcons, CustomStyledIcons };
+export default meta;

package/src/components/icons/Trash.tsx

@@ -13,7 +13,7 @@ const Trash: React.FC<Props> = (props) => {
             xmlns={"http://www.w3.org/2000/svg"}
             className={props.className}
         >
-            <path d={"M35.7 9.25h3.95q1.4-.4 1.35-1.6-.1-1.2-1.35-1.45H25.6V1.25Q25.6 0 24.4 0h-8.7q-1.1-.05-1.2 1.25V6.2H1.35Q-.1 6.6 0 7.75.1 9 1.35 9.25H5.4v26.5q.15 1.2 1.25 1.25H34.5q1.1-.1 1.2-1.25V9.25M22.6 6.2h-5.05V3.1h5.05v3.1M8.45 33.9V9.25H32.7V33.9H8.45"} />
+            <path fill={"currentColor"} d={"M35.7 9.25h3.95q1.4-.4 1.35-1.6-.1-1.2-1.35-1.45H25.6V1.25Q25.6 0 24.4 0h-8.7q-1.1-.05-1.2 1.25V6.2H1.35Q-.1 6.6 0 7.75.1 9 1.35 9.25H5.4v26.5q.15 1.2 1.25 1.25H34.5q1.1-.1 1.2-1.25V9.25M22.6 6.2h-5.05V3.1h5.05v3.1M8.45 33.9V9.25H32.7V33.9H8.45"} />
         </svg>
     );
 };

package/src/components/layout/card/Card.stories.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { styled } from "../../../theme";
+import { Section } from "../section/Section";
+
+import { Card } from "./Card";
+
+const meta: Meta<typeof Card> = {
+    title: "Layout/Card",
+    component: Card,
+    tags: ["autodocs"],
+};
+
+type Story = StoryObj<typeof Card>;
+
+/**
+ * Default Card component with basic styling.
+ */
+const Default: Story = {
+    render: () => (
+        <Card>
+            <Section vertical={true} horizontal={true}>
+                Content inside a basic Card
+            </Section>
+        </Card>
+    ),
+};
+
+/**
+ * Multiple Cards demonstrating default spacing between cards.
+ */
+const MultipleCards: Story = {
+    render: () => (
+        <Section.Container>
+            <Card>
+                <Section vertical={true} horizontal={true}>
+                    First Card
+                </Section>
+            </Card>
+            <Card>
+                <Section vertical={true} horizontal={true}>
+                    Second Card
+                </Section>
+            </Card>
+            <Card variant={"margin"}>
+                <Section vertical={true} horizontal={true}>
+                    Third Card with margin variant
+                </Section>
+            </Card>
+        </Section.Container>
+    ),
+};
+
+/**
+ * Card with the "margin" variant that adds left and right margins.
+ */
+const WithMargin: Story = {
+    render: () => (
+        <Card variant={"margin"}>
+            <Section vertical={true} horizontal={true}>
+                Card with left and right margins
+            </Section>
+        </Card>
+    ),
+};
+
+/**
+ * Custom styled Card with a different background color, shadow, and border radius.
+ */
+const CustomStyledCard = styled(Card, {
+    background: "#f0f8ff", // Light blue background
+    borderRadius: "10px",
+    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+    border: "1px solid #d0e3ff",
+});
+
+/**
+ * A custom styled version of the Card component with enhanced visual styling.
+ */
+const CustomStyled: Story = {
+    render: () => (
+        <CustomStyledCard>
+            <Section vertical={true} horizontal={true}>
+                This card has custom styling
+            </Section>
+        </CustomStyledCard>
+    ),
+};
+
+export { Default, MultipleCards, WithMargin, CustomStyled };
+export default meta;

package/src/components/layout/card/Card.styled.ts

@@ -0,0 +1,25 @@
+import { styled } from "../../../theme";
+
+const StyledCard = styled("div", {
+    "background": "$background",
+    "borderRadius": "5px",
+    "display": "flex",
+    "flexDirection": "column",
+
+    "& + &": {
+        marginTop: "23px",
+    },
+
+    "variants": {
+        variant: {
+            margin: {
+                marginLeft: "23px",
+                marginRight: "23px",
+            },
+        },
+    },
+});
+
+export {
+    StyledCard,
+};

package/src/components/layout/card/Card.tsx

@@ -1,30 +1,8 @@
-import React from "react";
+import type { ComponentProps } from "@stitches/react";
 
-import classnames from "classnames";
+import { StyledCard } from "./Card.styled";
 
-import { makeVariants } from "../../../utils/makeVariants";
+type CardProps = ComponentProps<typeof StyledCard>;
 
-import styles from "./Card.module.scss";
-
-type Variants = "margin";
-
-interface Props {
-    variant?: Variants;
-    className?: string;
-    children: React.ReactNode;
-}
-
-const Card: React.FC<Props> = (props) => {
-    const v = makeVariants(props.variant);
-    const cls = classnames(props.className, styles.card, {
-        [styles.margin as string]: v.includes("margin"),
-    });
-
-    // @TODO auto wrap some children in Section
-
-    return (
-        <div className={cls}>{props.children}</div>
-    );
-};
-
-export { Card };
+export { StyledCard as Card };
+export type { CardProps };

package/src/components/layout/header/Header.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 { ICON } from "../../icons/Icon";
 
@@ -36,7 +36,7 @@ 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
+        // eslint-disable-next-line react/no-array-index-key
         const longContent = new Array(1000).fill(null).map((_, key) => <div key={key}>content</div>);
 
         return (

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

@@ -1,8 +1,6 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import type { ReactNode } from "react";
 
-import type { Div } from "../../native";
-
 import { Action } from "../../ui/action/Action";
 import { EqualActions } from "../../ui/action/EqualActions";
 
@@ -32,13 +30,15 @@ interface Props {
     after?: ReactNode;
 }
 
+type HeaderProps = React.ComponentProps<typeof StyledHeader> & Props;
+
 /**
  * General purpose header component.
  * It has the main section, `before` and `after` sections.
  * The main section is left-aligned by default, but it can be centered with `center` prop.
  * `before` and `after` sections are usually used for actions.
  */
-const Header: React.FC<React.ComponentProps<typeof Div> & Props> = (props) => {
+const Header = forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
     const {
         position = "top",
         before: _before, after: _after,
@@ -68,7 +68,7 @@ const Header: React.FC<React.ComponentProps<typeof Div> & Props> = (props) => {
     }
 
     return (
-        <StyledHeader {...rest} position={position} data-header-position={position}>
+        <StyledHeader {...rest} position={position} data-header-position={position} ref={ref}>
             {before}
             <Contents>
                 {contents}
@@ -76,12 +76,14 @@ const Header: React.FC<React.ComponentProps<typeof Div> & Props> = (props) => {
             {after}
         </StyledHeader>
     );
-};
+});
 
+Header.displayName = "Header";
 Header.toString = () => StyledHeader.toString();
 
-const HeaderBeforeSelector = () => Before.toString();
-const HeaderContentsSelector = () => Contents.toString();
-const HeaderAfterSelector = () => After.toString();
+const HeaderBeforeSelector = Before.toString();
+const HeaderContentsSelector = Contents.toString();
+const HeaderAfterSelector = After.toString();
 
 export { Header, HeaderBeforeSelector, HeaderContentsSelector, HeaderAfterSelector };
+export type { HeaderProps };

package/src/components/layout/header/HeaderIconAction.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 { Header } from "./Header";
 import { HeaderIconAction } from "./HeaderIconAction";

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

@@ -1,6 +1,6 @@
 import type { ThemeCSS } from "../../../theme";
 
-import { pxToRem, styled } from "../../../theme";
+import { borderPxToRem, pxToRem, styled } from "../../../theme";
 import { Icon } from "../../icons/Icon";
 
 const sharedStyles: ThemeCSS = {
@@ -11,7 +11,7 @@ const sharedStyles: ThemeCSS = {
     "display": "inline-flex",
     "alignItems": "center",
     "justifyContent": "center",
-    "border": "calc(2px / var(--ratio-border)) solid transparent",
+    "border": borderPxToRem(2),
     "color": "currentColor",
 
     "&:hover": {

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

@@ -46,6 +46,7 @@ const HeaderIconAction: React.FC<Props> = (props) => {
 
     let content: ReactNode = icon;
     if (typeof icon === "string") {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
         content = <StyledIcon name={icon as ICON} />;
     }
 

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

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 
 import { useForceUpdate } from "@ezez/hooks";
 
-import type { StoryObj, Meta } from "@storybook/react";
+import type { StoryObj, Meta } from "@storybook/react-vite";
 
 import { StickyHeader } from "./StickyHeader";
 import { Header } from "./Header";
@@ -32,7 +32,7 @@ type Story = StoryObj<typeof StickyHeader>;
 
 const Primary: Story = {
     render: (args) => {
-        // eslint-disable-next-line @typescript-eslint/no-magic-numbers,react/no-array-index-key
+        // eslint-disable-next-line react/no-array-index-key
         const longContent = new Array(1000).fill(null).map((_, key) => <div key={key}>content</div>);
 
         return (

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

@@ -24,7 +24,7 @@ interface Props {
     children: React.ReactNode;
 }
 
-const StickyHeader = fnWithProps(forwardRef<HTMLDivElement, Props>((props, ref) => { // eslint-disable-line react/display-name,max-len
+const StickyHeader = fnWithProps(forwardRef<HTMLDivElement, Props>((props, ref) => { // eslint-disable-line react/display-name
     const { children: _children, position = "top", __dangerouslyDisableChildrenGuard, ...rest } = props;
 
     if (__dangerouslyDisableChildrenGuard) {
@@ -49,7 +49,9 @@ const StickyHeader = fnWithProps(forwardRef<HTMLDivElement, Props>((props, ref)
         throw err;
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
     header = header as never; // @TODO find a better way to silence TS on cloneElement
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
     content = content as never;
 
     return (
@@ -61,11 +63,17 @@ const StickyHeader = fnWithProps(forwardRef<HTMLDivElement, Props>((props, ref)
 }), {
     displayName: "StickyHeader",
     Content: Content, // @TODO remove "position" from this component props
+    /**
+     * @deprecated use StickyHeader.toString() instead
+     */
     selectors: {
+        /**
+         * @deprecated use StickyHeader.toString() instead
+         */
         root: StyledStickyHeader.toString(),
     },
+    toString: () => StyledStickyHeader.toString(),
 });
-StickyHeader.displayName = "StickyHeader";
 
 export {
     StickyHeader,

package/src/components/layout/list/Header.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 { Header } from "./Header";
 import { List } from "./List";

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

@@ -2,9 +2,7 @@ import React from "react";
 
 import { omit } from "@ezez/utils";
 
-import type { StoryObj, Meta } from "@storybook/react";
-
-import { NextLink } from "../../../demo/NextLink";
+import type { StoryObj, Meta } from "@storybook/react-vite";
 
 import { Item } from "./Item";
 import { List } from "./List";
@@ -44,7 +42,6 @@ type Story = StoryObj<typeof Item>;
 const Primary: Story = {
     args: {
         children: "I am a list item",
-        Link: NextLink,
     },
     render: (rawProps) => {
         const renderList = (rawProps as { renderList: boolean | undefined }).renderList;

package/src/components/layout/list/Label.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 { Label } from "./Label";
 import { List } from "./List";

package/src/components/layout/list/List.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 { Icon, ICON } from "../../icons/Icon";
 

package/src/components/layout/list/Value.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 { Value } from "./Value";
 import { List } from "./List";

package/src/components/layout/section/SearchContainer.tsx

@@ -1,18 +1,5 @@
-import React from "react";
+import { styled } from "../../../theme";
 
-import classnames from "classnames";
-
-import styles from "./SearchContainer.module.scss";
-
-interface Props {
-    className?: string;
-    children: React.ReactNode;
-}
-
-const SearchContainer: React.FC<Props> = (props) => {
-    return (
-        <section className={classnames(props.className, styles.section)}>{props.children}</section>
-    );
-};
+const SearchContainer = styled("div", { margin: 12 });
 
 export { SearchContainer };

package/src/components/layout/section/Section.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 { List } from "../list/List";
 import { Item } from "../list/Item";

package/src/components/layout/section/Section.tsx

@@ -1,11 +1,8 @@
 import { pxToRem, styled } from "../../../theme";
+import { fnWithProps } from "../../../types/fnWithProps";
 
 import { SectionContainer } from "./SectionContainer";
 
-interface SubComponents {
-    Container: typeof SectionContainer;
-}
-
 const SectionCmp = styled("div", {
     background: "$background",
 
@@ -31,8 +28,8 @@ const SectionCmp = styled("div", {
  * You should use it along with the `Section.Container` component. Container stretches to fill the available space and
  * has darker background color, sections are lighter and have a gap between them.
  */
-const Section = SectionCmp as typeof SectionCmp & SubComponents;
-
-Section.Container = SectionContainer;
+const Section = fnWithProps(SectionCmp, {
+    Container: SectionContainer,
+});
 
 export { Section };

package/src/components/layout/table/Table.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 { Table } from "./Table";
 

package/src/components/native/index.ts

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

package/src/components/ui/action/Action.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 { Action } from "./Action";
 

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

@@ -76,13 +76,13 @@ type Props = (NativeLinkProps | RouterLinkProps | ButtonProps) & CommonProps;
 const Action: React.FC<Props> = (props) => {
     const { icon, label, css, ..._restProps } = props;
     const restProps = omit(
-        _restProps as unknown as Record<string, string>, ["to", "Link", "href", "type"],
+        _restProps as Record<string, unknown>, ["to", "Link", "href", "type"],
     ) as Omit<Props, "to" | "Link" | "href" | "type" | "icon" | "label" | "css">;
     const maybeCss = css ? { css } : {};
 
     let iconElem: ReactNode = icon;
     if (typeof icon === "string") {
-        iconElem = <Icon name={icon as ICON} />;
+        iconElem = <Icon name={icon as ICON} />; // eslint-disable-line @typescript-eslint/no-unsafe-type-assertion
     }
 
     const labelElem = label ? <div>{label}</div> : null;