react-miui 0.23.6 → 0.23.7-beta.0

package/src/demo/componentsMap.ts

@@ -1,19 +1,7 @@
-/* eslint-disable max-lines, import/max-dependencies */
+/* eslint-disable import/max-dependencies */
 import type { AnyComponent } from "../types";
 
 import { CheckboxDemo } from "./components/form/Checkbox";
-import {
-    CenteredHeaderDemo,
-    HeaderDemo,
-    HeaderWithButtonsDemo,
-    HeaderWithButtonsOnSideDemo, ToolbarVariantDemo,
-} from "./components/layout/header/Header";
-import {
-    StickyColoredBg,
-    StickyHeaderBottomDemo,
-    StickyHeaderDemo, StickyHeaderLeftCenterDemo, StickyHeaderLeftDemo, StickyHeaderRightDemo,
-    StickyHeaderTopBottomDemo,
-} from "./components/layout/header/StickyHeader";
 import { DirectionPadDemo } from "./components/ui/directionPad/Pad";
 import { IconsDemo } from "./components/ui/icons/Icons";
 import {
@@ -81,60 +69,6 @@ const componentsMap: TheMap = {
             },
         },
     },
-    Header: {
-        name: "Header",
-        Component: HeaderDemo,
-        children: {
-            Centered: {
-                name: "Centered",
-                Component: CenteredHeaderDemo,
-            },
-            Toolbar: {
-                name: "Toolbar",
-                Component: ToolbarVariantDemo,
-            },
-            WithButtons: {
-                name: "With buttons",
-                Component: HeaderWithButtonsDemo,
-                children: {
-                    OnLeft: {
-                        name: "On the side",
-                        Component: HeaderWithButtonsOnSideDemo,
-                    },
-                },
-            },
-            Sticky: {
-                name: "Sticky",
-                Component: StickyHeaderDemo,
-                children: {
-                    StickyBottom: {
-                        name: "On bottom",
-                        Component: StickyHeaderBottomDemo,
-                    },
-                    StickyTopBottom: {
-                        name: "On top & bottom",
-                        Component: StickyHeaderTopBottomDemo,
-                    },
-                    StickyLeft: {
-                        name: "On left",
-                        Component: StickyHeaderLeftDemo,
-                    },
-                    StickyRight: {
-                        name: "On right",
-                        Component: StickyHeaderRightDemo,
-                    },
-                    StickyLeftCentered: {
-                        name: "On left centered",
-                        Component: StickyHeaderLeftCenterDemo,
-                    },
-                    StickyColoredBg: {
-                        name: "With colored background",
-                        Component: StickyColoredBg,
-                    },
-                },
-            },
-        },
-    },
     Action: {
         name: "Action", // TODO move all action demos to storybook
         Component: ActionDemo,

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

@@ -1,108 +0,0 @@
-.header {
-    --border-color: var(--header-border);
-    --background-color: var(--header-bg);
-    background-clip: padding-box;
-    background: var(--background-color);
-    display: flex;
-    align-items: center;
-    font-size: 15px;
-    font-weight: bold;
-    box-sizing: border-box;
-    color: var(--header-text);
-}
-
-.header--toolbar {
-    --border-color: var(--toolbar-border);
-    --background-color: var(--toolbar-bg);
-}
-
-.header--colored {
-    --border-color: var(--custom-header-color);
-    --background-color: var(--custom-header-color);
-    color: var(--custom-text-color);
-}
-
-.header--top, .header--bottom {
-    padding: 0 16.666px;
-    min-height: 44px;
-}
-.header--left, .header--right {
-    padding: 16.666px 0;
-    min-width: 44px;
-    flex-direction: column;
-
-    > .contents {
-        flex-direction: column;
-        align-items: center;
-    }
-}
-
-.header--top {
-    border-bottom: 0.37px solid var(--border-color);
-}
-.header--bottom {
-    border-top: 0.37px solid var(--border-color);
-    order: 2;
-}
-.header--left {
-    border-right: 0.37px solid var(--border-color);
-}
-.header--right {
-    border-left: 0.37px solid var(--border-color);
-    order: 2;
-}
-
-.contents {
-    flex: 1;
-    display: flex;
-}
-
-.header--center > .contents {
-    justify-content: center;
-}
-
-.header--top, .header--bottom {
-    .before {
-        margin-right: calc(50px / var(--ratio-dimensions));
-        height: 100%;
-        padding: 7px 0;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .after {
-        margin-left: calc(50px / var(--ratio-dimensions));
-        height: 100%;
-        padding: 7px 0;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .actions {
-        margin: calc(56px / var(--ratio-dimensions)) 0;
-    }
-}
-
-.header--left, .header--right {
-    .before {
-        margin-bottom: calc(50px / var(--ratio-dimensions));
-        flex-direction: column;
-    }
-
-    .after {
-        margin-top: calc(50px / var(--ratio-dimensions));
-        flex-direction: column;
-    }
-
-    .actions {
-        margin: 0 calc(56px / var(--ratio-dimensions));
-    }
-}
-
-.before, .after {
-    display: flex;
-}

package/dist/components/layout/header/HeaderIconAction.module.scss

@@ -1,26 +0,0 @@
-.btn, .a {
-    height: 100%;
-    aspect-ratio: 1;
-    background: none;
-    border-radius: 666px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: calc(2px / var(--ratio-border)) solid transparent;
-    color: currentColor;
-
-    &:hover {
-        background: #00000022;
-    }
-    &:active {
-        background: #00000011;
-        color: currentColor;
-    }
-}
-
-.icon {
-    width: 16px;
-    height: 16px;
-    display: block;
-    fill: currentColor;
-}

package/dist/components/layout/header/StickyHeader.module.scss

@@ -1,18 +0,0 @@
-.stickyHeader {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-
-    &__content {
-        flex: 1;
-        overflow: auto;
-
-        &--bottom, &--right {
-            order: 1;
-        }
-    }
-}
-
-.stickyHeader--left, .stickyHeader--right {
-    flex-direction: row;
-}

package/esm/components/layout/header/Header.module.scss

@@ -1,108 +0,0 @@
-.header {
-    --border-color: var(--header-border);
-    --background-color: var(--header-bg);
-    background-clip: padding-box;
-    background: var(--background-color);
-    display: flex;
-    align-items: center;
-    font-size: 15px;
-    font-weight: bold;
-    box-sizing: border-box;
-    color: var(--header-text);
-}
-
-.header--toolbar {
-    --border-color: var(--toolbar-border);
-    --background-color: var(--toolbar-bg);
-}
-
-.header--colored {
-    --border-color: var(--custom-header-color);
-    --background-color: var(--custom-header-color);
-    color: var(--custom-text-color);
-}
-
-.header--top, .header--bottom {
-    padding: 0 16.666px;
-    min-height: 44px;
-}
-.header--left, .header--right {
-    padding: 16.666px 0;
-    min-width: 44px;
-    flex-direction: column;
-
-    > .contents {
-        flex-direction: column;
-        align-items: center;
-    }
-}
-
-.header--top {
-    border-bottom: 0.37px solid var(--border-color);
-}
-.header--bottom {
-    border-top: 0.37px solid var(--border-color);
-    order: 2;
-}
-.header--left {
-    border-right: 0.37px solid var(--border-color);
-}
-.header--right {
-    border-left: 0.37px solid var(--border-color);
-    order: 2;
-}
-
-.contents {
-    flex: 1;
-    display: flex;
-}
-
-.header--center > .contents {
-    justify-content: center;
-}
-
-.header--top, .header--bottom {
-    .before {
-        margin-right: calc(50px / var(--ratio-dimensions));
-        height: 100%;
-        padding: 7px 0;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .after {
-        margin-left: calc(50px / var(--ratio-dimensions));
-        height: 100%;
-        padding: 7px 0;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .actions {
-        margin: calc(56px / var(--ratio-dimensions)) 0;
-    }
-}
-
-.header--left, .header--right {
-    .before {
-        margin-bottom: calc(50px / var(--ratio-dimensions));
-        flex-direction: column;
-    }
-
-    .after {
-        margin-top: calc(50px / var(--ratio-dimensions));
-        flex-direction: column;
-    }
-
-    .actions {
-        margin: 0 calc(56px / var(--ratio-dimensions));
-    }
-}
-
-.before, .after {
-    display: flex;
-}

package/esm/components/layout/header/HeaderIconAction.module.scss

@@ -1,26 +0,0 @@
-.btn, .a {
-    height: 100%;
-    aspect-ratio: 1;
-    background: none;
-    border-radius: 666px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: calc(2px / var(--ratio-border)) solid transparent;
-    color: currentColor;
-
-    &:hover {
-        background: #00000022;
-    }
-    &:active {
-        background: #00000011;
-        color: currentColor;
-    }
-}
-
-.icon {
-    width: 16px;
-    height: 16px;
-    display: block;
-    fill: currentColor;
-}

package/esm/components/layout/header/StickyHeader.module.scss

@@ -1,18 +0,0 @@
-.stickyHeader {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-
-    &__content {
-        flex: 1;
-        overflow: auto;
-
-        &--bottom, &--right {
-            order: 1;
-        }
-    }
-}
-
-.stickyHeader--left, .stickyHeader--right {
-    flex-direction: row;
-}

package/src/components/layout/header/Header.module.scss

@@ -1,108 +0,0 @@
-.header {
-    --border-color: var(--header-border);
-    --background-color: var(--header-bg);
-    background-clip: padding-box;
-    background: var(--background-color);
-    display: flex;
-    align-items: center;
-    font-size: 15px;
-    font-weight: bold;
-    box-sizing: border-box;
-    color: var(--header-text);
-}
-
-.header--toolbar {
-    --border-color: var(--toolbar-border);
-    --background-color: var(--toolbar-bg);
-}
-
-.header--colored {
-    --border-color: var(--custom-header-color);
-    --background-color: var(--custom-header-color);
-    color: var(--custom-text-color);
-}
-
-.header--top, .header--bottom {
-    padding: 0 16.666px;
-    min-height: 44px;
-}
-.header--left, .header--right {
-    padding: 16.666px 0;
-    min-width: 44px;
-    flex-direction: column;
-
-    > .contents {
-        flex-direction: column;
-        align-items: center;
-    }
-}
-
-.header--top {
-    border-bottom: 0.37px solid var(--border-color);
-}
-.header--bottom {
-    border-top: 0.37px solid var(--border-color);
-    order: 2;
-}
-.header--left {
-    border-right: 0.37px solid var(--border-color);
-}
-.header--right {
-    border-left: 0.37px solid var(--border-color);
-    order: 2;
-}
-
-.contents {
-    flex: 1;
-    display: flex;
-}
-
-.header--center > .contents {
-    justify-content: center;
-}
-
-.header--top, .header--bottom {
-    .before {
-        margin-right: calc(50px / var(--ratio-dimensions));
-        height: 100%;
-        padding: 7px 0;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .after {
-        margin-left: calc(50px / var(--ratio-dimensions));
-        height: 100%;
-        padding: 7px 0;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .actions {
-        margin: calc(56px / var(--ratio-dimensions)) 0;
-    }
-}
-
-.header--left, .header--right {
-    .before {
-        margin-bottom: calc(50px / var(--ratio-dimensions));
-        flex-direction: column;
-    }
-
-    .after {
-        margin-top: calc(50px / var(--ratio-dimensions));
-        flex-direction: column;
-    }
-
-    .actions {
-        margin: 0 calc(56px / var(--ratio-dimensions));
-    }
-}
-
-.before, .after {
-    display: flex;
-}

package/src/components/layout/header/HeaderIconAction.module.scss

@@ -1,26 +0,0 @@
-.btn, .a {
-    height: 100%;
-    aspect-ratio: 1;
-    background: none;
-    border-radius: 666px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: calc(2px / var(--ratio-border)) solid transparent;
-    color: currentColor;
-
-    &:hover {
-        background: #00000022;
-    }
-    &:active {
-        background: #00000011;
-        color: currentColor;
-    }
-}
-
-.icon {
-    width: 16px;
-    height: 16px;
-    display: block;
-    fill: currentColor;
-}

package/src/components/layout/header/StickyHeader.module.scss

@@ -1,18 +0,0 @@
-.stickyHeader {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-
-    &__content {
-        flex: 1;
-        overflow: auto;
-
-        &--bottom, &--right {
-            order: 1;
-        }
-    }
-}
-
-.stickyHeader--left, .stickyHeader--right {
-    flex-direction: row;
-}

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

@@ -1,118 +0,0 @@
-import React from "react";
-
-import { Header, ICON, StickyHeader, HeaderIconAction } from "../../../../index";
-import { NextLink } from "../../../NextLink";
-
-const HeaderDemo = () => {
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers,react/no-array-index-key
-    const longContent = new Array(1000).fill(null).map((_, key) => <div key={key}>content</div>);
-
-    return (
-        <>
-            <Header>Some place</Header>
-            {longContent}
-        </>
-    );
-};
-
-const CenteredHeaderDemo = () => {
-    return (
-        <>
-            <Header center={true}>Messages</Header>
-            <div>
-                Header text is centered
-            </div>
-        </>
-    );
-};
-
-const ToolbarVariantDemo = () => {
-    return (
-        <>
-            <Header center={true} variant={"toolbar"}>Toolbar version</Header>
-        </>
-    );
-};
-
-const handleClick = () => { alert(1); };
-
-// eslint-disable-next-line max-lines-per-function
-const HeaderWithButtonsDemo = () => {
-    const demo = (
-        <>
-            <HeaderIconAction icon={ICON.back} onClick={handleClick} />
-            <HeaderIconAction icon={ICON.checkmark} onClick={handleClick} />
-        </>
-    );
-
-    return (
-        <>
-            <Header center={true} before={"A text"}>Messages</Header>
-            <div>
-                Header text is centered
-            </div>
-            <Header before={"A text"}>Messages</Header>
-            <div>
-                Header text is start aligned
-            </div>
-            <Header before={demo}>Messages</Header>
-            <div>
-                Some button icons are added on the left to left aligned title
-            </div>
-            <Header before={demo} center={true}>Messages</Header>
-            <div>
-                Some button icons are added on the left to centered aligned title
-            </div>
-            <Header
-                before={<HeaderIconAction icon={ICON.back} to={"/react-miui"} Link={NextLink} />}
-                center={true}
-            >Messages
-            </Header>
-            <div>
-                Some internal link icons are added on the left to centered aligned title
-            </div>
-            <Header
-                before={<HeaderIconAction icon={ICON.back} href={"https://www.npmjs.com/package/react-miui"} />}
-                center={true}
-            >Messages
-            </Header>
-            <div>
-                Some external link icons are added on the left to centered aligned title
-            </div>
-            <Header
-                before={<HeaderIconAction icon={ICON.back} href={"https://www.npmjs.com/package/react-miui"} />}
-                after={<HeaderIconAction icon={ICON.checkmark} href={"https://www.npmjs.com/package/react-miui"} />}
-                center={true}
-            >Messages
-            </Header>
-            <div>
-                Some external link icons are added on both sides to centered aligned title
-            </div>
-        </>
-    );
-};
-
-const HeaderWithButtonsOnSideDemo = () => {
-    const demo = (
-        <>
-            <HeaderIconAction icon={ICON.back} onClick={handleClick} />
-            <HeaderIconAction icon={ICON.checkmark} onClick={handleClick} />
-        </>
-    );
-
-    return (
-        <StickyHeader position={"left"}>
-            <Header
-                center={true}
-                before={demo}
-                after={demo}
-            >M
-            </Header>
-            <StickyHeader.Content>
-                Header is on the side
-            </StickyHeader.Content>
-        </StickyHeader>
-    );
-};
-
-export { HeaderDemo, CenteredHeaderDemo, ToolbarVariantDemo, HeaderWithButtonsDemo, HeaderWithButtonsOnSideDemo };

package/src/demo/components/layout/header/StickyHeader.module.scss

@@ -1,14 +0,0 @@
-.coloredBox {
-    height: 300px;
-    background: var(--green1-darker);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    flex-direction: column;
-}
-
-.header {
-    --custom-header-color: var(--green1-darker);
-    --custom-text-color: white;
-}