react-miui 0.20.0 → 0.21.0

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

@@ -0,0 +1,54 @@
+import React from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { List } from "../list/List.js";
+import { Item } from "../list/Item.js";
+
+import { Section } from "./Section.js";
+
+const meta: Meta = {
+    title: "Components/Layout/Section",
+    component: Section,
+    tags: ["autodocs", "layout"],
+    argTypes: {
+        vertical: {
+            type: "boolean",
+        },
+        horizontal: {
+            type: "boolean",
+        },
+    },
+};
+
+type Story = StoryObj<typeof Section>;
+
+const Primary: Story = {
+    args: {},
+    render: (args) => (
+        <div style={{ border: "1px solid #ddd" }}>
+            <Section.Container>
+                <Section {...args}>
+                    This is an example section, arguments in the arguments table are applied only to this
+                    section. By default sections do not have any padding, so you can place elements that should touch
+                    the edges. Use `vertical` and `horizontal` arguments to add padding.
+                </Section>
+                <Section vertical={true} horizontal={true}>
+                    Some section
+                </Section>
+                <Section>
+                    <List>
+                        <Item>Some item</Item>
+                        <Item>Some item</Item>
+                    </List>
+                </Section>
+            </Section.Container>
+        </div>
+    ),
+};
+
+export {
+    Primary,
+};
+
+export default meta;

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

@@ -1,37 +1,37 @@
-import React from "react";
-
-import classnames from "classnames";
-
-import { makeVariants } from "../../../utils/makeVariants.js";
+import { pxToRem, styled } from "../../../theme.js";
 
 import { SectionContainer } from "./SectionContainer.js";
-import styles from "./Section.module.scss";
 
 interface SubComponents {
     Container: typeof SectionContainer;
 }
 
-type Variant = "horizontal" | "vertical";
-
-interface Props {
-    variant?: Variant | Variant[];
-    className?: string;
-    children: React.ReactNode;
-}
-
-const Section: React.FC<Props> & SubComponents = (props) => {
-    const v = makeVariants(props.variant);
-
-    const cls = classnames(props.className, styles.section, {
-        [styles.vertical]: v.includes("vertical"),
-        [styles.horizontal]: v.includes("horizontal"),
-    });
-    return (
-        <section className={cls}>
-            {props.children}
-        </section>
-    );
-};
+const SectionCmp = styled("div", {
+    background: "$background",
+
+    variants: {
+        vertical: {
+            true: {
+                // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+                py: pxToRem(23),
+            },
+        },
+        horizontal: {
+            true: {
+                // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+                px: pxToRem(23),
+            },
+        },
+    },
+});
+
+/**
+ * A section is a container that can be used to group related content.
+ *
+ * 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;
 

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

@@ -1,15 +1,12 @@
-import React from "react";
-
-import styles from "./SectionContainer.module.scss";
-
-interface Props {
-    children: React.ReactNode;
-}
-
-const SectionContainer: React.FC<Props> = (props) => {
-    return (
-        <div className={styles.container}>{props.children}</div>
-    );
-};
+import { styled } from "../../../theme.js";
+
+const SectionContainer = styled("div", {
+    background: "$toolbarBg",
+    flex: 1,
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    gap: 23,
+});
 
 export { SectionContainer };

package/src/demo/components/form/Choice.tsx

@@ -12,7 +12,7 @@ const ChoiceDemo: React.FC<Props> = () => {
     const [current, handleCurrent] = useState(values[0]);
 
     return (
-        <Section variant={["vertical", "horizontal"]}>
+        <Section vertical={true} horizontal={true}>
             <Choice values={values} value={current} name={"rnd"} onChange={handleCurrent} />
         </Section>
     );
@@ -34,7 +34,7 @@ const ChoiceDemo2: React.FC<Props> = () => {
 
     return (
         <>
-            <Section variant={["vertical", "horizontal"]}>
+            <Section vertical={true} horizontal={true}>
                 <Choice
                     values={values2}
                     value={current}
@@ -46,7 +46,7 @@ const ChoiceDemo2: React.FC<Props> = () => {
 
                 Current: {current}
             </Section>
-            <Section variant={["vertical", "horizontal"]}>
+            <Section vertical={true} horizontal={true}>
                 <Choice
                     values={values2}
                     value={current}

package/src/demo/components/form/Form.tsx

@@ -9,7 +9,7 @@ const FormDemo = () => {
     return (
         <Section.Container>
             <Section>
-                <Section variant={["vertical", "horizontal"]}>
+                <Section vertical={true} horizontal={true}>
                     <Label label={"First name"}>
                         <Input placeholder={""} />
                     </Label>

package/src/demo/components/form/Search.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 
-import { SearchContainer, Input, ICON, Icon, Section, List, Item } from "../../../index.js";
+import { SearchContainer, Input, ICON, Icon, Section, List } from "../../../index.js";
+
+const Item = List.Item;
 
 const SearchDemo = () => {
     return (

package/src/demo/components/form/Toggle.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useEffect, useState } from "react";
 
-import { Toggle, List, Item, useToaster } from "../../../index.js";
+import { Toggle, List, useToaster } from "../../../index.js";
+
+const Item = List.Item;
 
 const handleNoop = () => undefined;
 

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

@@ -6,13 +6,13 @@ const CardDemo = () => {
     return (
         <Section.Container>
             <Card>
-                <Section variant={["vertical", "horizontal"]}>Content</Section>
+                <Section vertical={true} horizontal={true}>Content</Section>
             </Card>
             <Card>
-                <Section variant={["vertical", "horizontal"]}>Content</Section>
+                <Section vertical={true} horizontal={true}>Content</Section>
             </Card>
             <Card variant={"margin"}>
-                <Section variant={["vertical", "horizontal"]}>Content</Section>
+                <Section vertical={true} horizontal={true}>Content</Section>
             </Card>
         </Section.Container>
     );

package/src/demo/components/ui/icons/Icons.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 
-import { Icon, ICON, Item, List } from "../../../../index.js";
+import { Icon, ICON, List } from "../../../../index.js";
+
+const Item = List.Item;
 
 const IconsDemo: React.FC = () => {
     const icons = Object.values(ICON).map((value) => {

package/src/demo/components/ui/keyValue/KeyValue.tsx

@@ -40,7 +40,7 @@ const items = [
 
 const KeyValueDemo: React.FC<Props> = (props) => {
     return (
-        <Section variant={["vertical", "horizontal"]}>
+        <Section vertical={true} horizontal={true}>
             <KeyValue items={items} valueFirst={true} cols={3} />
         </Section>
     );

package/src/demo/components/ui/modal/Modal.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useState } from "react";
 
-import { Modal, Button, Input, Checkbox, Label, ModalButtons, List, Item } from "../../../../index.js";
+import { Modal, Button, Input, Checkbox, Label, ModalButtons, List } from "../../../../index.js";
+
+const Item = List.Item;
 
 interface Props {}
 
@@ -89,7 +91,7 @@ const ModalOptionsDemo: React.FC<Props> = (props) => {
             <Button onClick={handleOpen}>Open modal</Button>
             <Modal onClose={handleClose} isOpen={open} title={"Format C:?"}>
                 <Modal.NegateMargin>
-                    <List variant={"inset"}>
+                    <List inset={true}>
                         <Item selected={false} onClick={handleClose}>First item</Item>
                         <Item selected={true} onClick={handleClose}>Second item</Item>
                         <Item selected={false} onClick={handleClose}>Third item</Item>

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

@@ -66,7 +66,7 @@ const PopDemo: React.FC<Props> = () => {
                 Some place
             </Header>
             <StickyHeader.Content>
-                <Section variant={["vertical", "horizontal"]}>
+                <Section horizontal={true} vertical={true}>
                     Click on the left or right icon to open the menu
                 </Section>
             </StickyHeader.Content>

package/src/demo/componentsMap.ts

@@ -14,7 +14,6 @@ import {
     StickyHeaderDemo, StickyHeaderLeftCenterDemo, StickyHeaderLeftDemo, StickyHeaderRightDemo,
     StickyHeaderTopBottomDemo,
 } from "./components/layout/header/StickyHeader.js";
-import { ListItemDemo } from "./components/layout/list/List.Item.js";
 import { DirectionPadDemo } from "./components/ui/directionPad/Pad.js";
 import { IconsDemo } from "./components/ui/icons/Icons.js";
 import { ButtonDemo } from "./components/ui/button/ButtonDemo.js";
@@ -26,23 +25,14 @@ import {
     ActionsOnLeft,
 } from "./components/ui/action/Action.js";
 import { ToggleDemo } from "./components/form/Toggle.js";
-import { ItemRatioDemo } from "./components/layout/list/ItemRatio.js";
-import { ItemLabelDemo } from "./components/layout/list/Label.js";
-import { ListHeaderDemo } from "./components/layout/list/Header.js";
-import { ValueDemo } from "./components/layout/list/Value.js";
-import { SectionDemo } from "./components/layout/section/Section.js";
 import { CardDemo } from "./components/layout/card/Card.js";
-import { InputDemo } from "./components/form/Input.js";
 import { FormDemo } from "./components/form/Form.js";
 import { SearchDemo } from "./components/form/Search.js";
 import { LabelDemo } from "./components/form/Label.js";
 import { ToasterDemo } from "./components/ui/toaster/Toaster.js";
 import { ModalCenteredDemo, ModalDemo, ModalOptionsDemo } from "./components/ui/modal/Modal.js";
-import { ListInsetDemo } from "./components/layout/list/Inset.js";
-import { ListSelectionDemo } from "./components/layout/list/Selection.js";
 import { TabsDemo } from "./components/ui/tabs/Tabs.js";
 import { ChoiceDemo, ChoiceDemo2 } from "./components/form/Choice.js";
-import { MessageDemo } from "./components/ui/message/Message.js";
 import { PopDemo } from "./components/ui/pop/Pop.js";
 import { DrawerDemo } from "./components/ui/drawer/Drawer.js";
 import { StatsDarkDemo, StatsDemo } from "./components/ui/stats/Stats.js";
@@ -66,10 +56,6 @@ const componentsMap: TheMap = {
         name: "Form",
         Component: FormDemo,
         children: {
-            Input: {
-                name: "Input",
-                Component: InputDemo,
-            },
             Select: {
                 name: "Select",
                 Component: SelectDemo,
@@ -186,40 +172,6 @@ const componentsMap: TheMap = {
         name: "Tabs",
         Component: TabsDemo,
     },
-    ListItem: {
-        name: "List & Item",
-        Component: ListItemDemo,
-        children: {
-            Ratio: {
-                name: "Alignment",
-                Component: ItemRatioDemo,
-            },
-            Header: {
-                name: "Header",
-                Component: ListHeaderDemo,
-            },
-            Inset: {
-                name: "Inset",
-                Component: ListInsetDemo,
-            },
-            Selection: {
-                name: "Selection",
-                Component: ListSelectionDemo,
-            },
-            Label: {
-                name: "Label",
-                Component: ItemLabelDemo,
-            },
-            Value: {
-                name: "Value",
-                Component: ValueDemo,
-            },
-        },
-    },
-    Section: {
-        name: "Section",
-        Component: SectionDemo,
-    },
     Card: {
         name: "Card",
         Component: CardDemo,
@@ -250,10 +202,6 @@ const componentsMap: TheMap = {
         name: "Toaster",
         Component: ToasterDemo,
     },
-    Message: {
-        name: "Message",
-        Component: MessageDemo,
-    },
     Drawer: {
         name: "Drawer",
         Component: DrawerDemo,

package/src/index.ts

@@ -3,7 +3,7 @@ export * from "./components/form/choice/Choice.js";
 export * from "./components/form/Checkbox.js";
 export * from "./components/form/Label.js";
 export * from "./components/form/Select.js";
-export * from "./components/form/TextArea.js";
+export * from "./components/form/textarea/TextArea.js";
 export * from "./components/form/Toggle.js";
 
 export * from "./components/form/index.js";
@@ -15,7 +15,6 @@ export * from "./components/layout/header/Header.js";
 export * from "./components/layout/header/HeaderIconAction.js";
 export * from "./components/layout/header/StickyHeader.js";
 export * from "./components/layout/list/List.js";
-export * from "./components/layout/list/Item.js";
 export * from "./components/layout/section/SearchContainer.js";
 export * from "./components/layout/section/Section.js";
 export * from "./components/layout/table/Table.js";
@@ -45,6 +44,8 @@ export * from "./components/utils/HandleEsc.js";
 export * from "./components/utils/If.js";
 export * from "./components/utils/Spacer.js";
 
+export * from "./scrollbars.css.js";
+
 export type { ThemeCSS } from "./theme.js";
 
 export { getCssText, styled } from "./theme.js";

package/src/pages/_app.tsx

@@ -7,11 +7,13 @@ import type { AppProps } from "next/app";
 import "../global.scss";
 import "../demo-global.scss";
 import "../scrollbars.scss";
+import { cssReset } from "../theme.css-reset";
 
 const MyApp = ({ Component, pageProps }: AppProps) => (
     <>
         <Head>
             <title>MIUI in React</title>
+            <style id={"miui-css-reset"} dangerouslySetInnerHTML={{ __html: cssReset }} />
         </Head>
         <Component {...pageProps} />
     </>

package/src/scrollbars.css.ts

@@ -0,0 +1,56 @@
+import type { ThemeCSS } from "./theme";
+
+import { pxToRem } from "./theme.js";
+
+const thumbStyle = {
+    background: "var(--scrollbars-thumb)",
+    backgroundClip: "padding-box",
+    border: "2px solid var(--scrollbars-bg)",
+    borderRadius: "$1",
+};
+
+const thumbActive: ThemeCSS = {
+    background: "var(--scrollbars-thumb-active)",
+    border: "2px solid var(--scrollbars-bg)",
+};
+
+// @TODO use colors from theme
+const miuiScrollbars: ThemeCSS = {
+    "--scrollbars-thumb": "#737373",
+    "--scrollbars-thumb-active": "#737373",
+    "--scrollbars-bg": "transparent",
+    "scrollbar-color": "var(--scrollbars-thumb) var(--scrollbars-bg)",
+    "scrollbar-width": "thin !important",
+
+    "&::-webkit-scrollbar": {
+        height: pxToRem(7),
+        width: pxToRem(7),
+        backgroundColor: "transparent",
+        borderRadius: pxToRem(7),
+    },
+    "&::-webkit-scrollbar-thumb:vertical": {
+        ...thumbStyle,
+        "minHeight": pxToRem(10),
+        "marginRight": pxToRem(2),
+        "&:active": {
+            ...thumbActive,
+            minHeight: pxToRem(8),
+            marginRight: pxToRem(4),
+        },
+    },
+    "&::-webkit-scrollbar-thumb:horizontal": {
+        ...thumbStyle,
+        "minWidth": pxToRem(10),
+        "marginBottom": pxToRem(2),
+        "&:active": {
+            ...thumbActive,
+            minWidth: pxToRem(8),
+            marginBottom: pxToRem(4),
+        },
+    },
+    "&::-webkit-scrollbar-corner": {
+        backgroundColor: "transparent",
+    },
+};
+
+export { miuiScrollbars };

package/src/theme.ts

@@ -98,9 +98,11 @@ const {
         },
     },
     utils: {
-        mx: (value: string) => ({ marginLeft: value, marginRight: value }),
-        my: (value: string) => ({ marginTop: value, marginBottom: value }),
-        size: (value: string) => ({ width: value, height: value }),
+        mx: (value: string | number) => ({ marginLeft: value, marginRight: value }),
+        my: (value: string | number) => ({ marginTop: value, marginBottom: value }),
+        px: (value: string | number) => ({ paddingLeft: value, paddingRight: value }),
+        py: (value: string | number) => ({ paddingTop: value, paddingBottom: value }),
+        size: (value: string | number) => ({ width: value, height: value }),
     },
 });
 

package/dist/components/form/TextArea.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/form/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAMrD,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,GAAG,KAAK,CAwBjF,CAAC;AAEF,OAAO,EACH,QAAQ,GACX,CAAC"}

package/dist/components/form/TextArea.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/form/TextArea.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AAErD,4DAAoC;AAEpC,kFAA+C;AAM/C,MAAM,QAAQ,GAAwE,CAAC,EAItF,EAAE,EAAE;QAJkF,EACnF,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,MAAM,OAElB,EADM,KAAK,cAH2E,8CAItF,CADW;IAER,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAC,CAAC,CAAwC,EAAE,EAAE;QACzE,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;IACjB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,UAAU,GAAG,IAAA,mBAAW,EAAC,CAAC,CAAwC,EAAE,EAAE;QACxE,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,CAAC,CAAC;IAChB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,GAAG,GAAG,IAAA,oBAAU,EAAC,2BAAM,CAAC,OAAO,EAAE;QACnC,CAAC,2BAAM,CAAC,cAAc,CAAC,EAAE,OAAO;KACnC,EAAE,2BAAM,CAAC,KAAK,EAAE,2BAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAE7C,OAAO,CACH,4DAAc,KAAK,IAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAI,CACpF,CAAC;AACN,CAAC,CAAC;AAGE,4BAAQ"}

package/dist/components/layout/list/Header.module.scss

@@ -1,8 +0,0 @@
-.header > * {
-    padding-top: calc(80px / var(--ratio-dimensions));
-    padding-bottom: calc(40px / var(--ratio-dimensions));
-
-    font-size: calc(26px / var(--ratio-font));
-    color: var(--sub);
-    text-transform: uppercase;
-}

package/dist/components/layout/list/Item.module.scss

@@ -1,46 +0,0 @@
-.item {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    font-size: calc(34px / var(--ratio-font));
-
-    &:not(:first-child) {
-        border-top: 0.37px solid var(--header-border);
-    }
-
-    > * {
-        display: block;
-        padding: 0;
-        text-decoration: none;
-    }
-}
-
-.button {
-    border: none;
-    background: none;
-    width: 100%;
-    text-align: left;
-    font-family: inherit;
-    font-size: inherit;
-}
-
-.content {
-    display: flex;
-    min-height: calc(174px / var(--ratio-dimensions));
-    align-items: center;
-}
-
-.inset {
-    padding-left: calc(37px / var(--ratio-dimensions));
-    padding-right: calc(37px / var(--ratio-dimensions));
-}
-
-.icon {
-    width: 7px;
-    margin-right: 10px;
-    display: inline-block;
-}
-
-.selected {
-    color: var(--main-color);
-}

package/dist/components/layout/list/Label.module.scss

@@ -1,9 +0,0 @@
-.sub {
-    font-size: calc(27px / var(--ratio-font));
-    color: var(--sub);
-    margin-top: calc(27px / var(--ratio-font) / 3);
-}
-
-.root {
-    padding: calc(54px / var(--ratio-dimensions)) 0;
-}

package/dist/components/layout/list/List.module.scss

@@ -1,8 +0,0 @@
-.list {
-    margin: 0 23px;
-    padding: 0;
-}
-
-.inset {
-    margin: 0;
-}

package/dist/components/layout/list/Value.styled.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Value.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Value.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAMf,CAAC;AAEH,OAAO,EACH,WAAW,GACd,CAAC"}

package/dist/components/layout/list/Value.styled.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledValue = void 0;
-const theme_js_1 = require("../../../theme.js");
-const StyledValue = (0, theme_js_1.styled)("div", {
-    color: "var(--icon)",
-    fontSize: "calc(26px / var(--ratio-font))",
-    display: "flex",
-    justifyContent: "flex-end",
-    flex: 1,
-});
-exports.StyledValue = StyledValue;
-//# sourceMappingURL=Value.styled.js.map

package/dist/components/layout/list/Value.styled.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Value.styled.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Value.styled.ts"],"names":[],"mappings":";;;AAAA,gDAA2C;AAE3C,MAAM,WAAW,GAAG,IAAA,iBAAM,EAAC,KAAK,EAAE;IAC9B,KAAK,EAAE,aAAa;IACpB,QAAQ,EAAE,gCAAgC;IAC1C,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,UAAU;IAC1B,IAAI,EAAE,CAAC;CACV,CAAC,CAAC;AAGC,kCAAW"}

package/dist/components/layout/section/Section.module.scss

@@ -1,24 +0,0 @@
-.section {
-    background: var(--background);
-}
-
-.section + .section {
-    margin-top: 23px;
-}
-
-.vertical {
-    margin-top: 23px;
-    margin-bottom: 23px;
-}
-
-.horizontal {
-    margin-left: 23px;
-    margin-right: 23px;
-}
-
-.section > .section.vertical {
-    padding-top: 23px;
-    padding-bottom: 23px;
-    margin-top: 0;
-    margin-bottom: 0;
-}

package/dist/components/layout/section/SectionContainer.module.scss

@@ -1,4 +0,0 @@
-.container {
-    background: var(--toolbar-bg);
-    flex: 1;
-}