react-miui 0.20.1 → 0.22.0

package/src/components/form/Select.module.scss

@@ -1,18 +0,0 @@
-.select {
-    box-sizing: border-box;
-    height: calc(103px / var(--ratio-dimensions));
-    font-size: calc(34 / var(--ratio-font));
-    color: var(--text);
-    display: block;
-    width: 100%;
-    background: white;
-    font-family: inherit;
-    border-radius: 2px;
-    padding: 0 calc(36px / var(--ratio-dimensions));
-    border: calc(1px / var(--ratio-border)) solid var(--border);
-
-    &:disabled {
-        background: var(--input-disabled-bg);
-        color: var(--input-disabled-text);
-    }
-}

package/src/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/src/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/src/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/src/components/layout/list/List.module.scss

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

package/src/components/layout/list/Value.styled.ts

@@ -1,13 +0,0 @@
-import { styled } from "../../../theme.js";
-
-const StyledValue = styled("div", {
-    color: "var(--icon)",
-    fontSize: "calc(26px / var(--ratio-font))",
-    display: "flex",
-    justifyContent: "flex-end",
-    flex: 1,
-});
-
-export {
-    StyledValue,
-};

package/src/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/src/components/layout/section/SectionContainer.module.scss

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

package/src/components/ui/button/Button.module.scss

@@ -1,25 +0,0 @@
-.btn {
-    height: calc(118px / var(--ratio-dimensions));
-    background: var(--green1);
-    border: calc(1px / var(--ratio-border)) solid var(--green1-darker);
-    color: white;
-    border-radius: 1000px;
-    display: block;
-    width: 100%;
-    font-size: calc(26px / var(--ratio-font));
-    padding: 0 1em;
-
-    &:disabled {
-        opacity: 0.5;
-    }
-}
-
-.btn--inline {
-    width: auto;
-}
-
-.btn--outline {
-    background: white;
-    border-color: var(--button-border);
-    color: var(--grey1);
-}

package/src/components/ui/modal/Modal.module.scss

@@ -1,92 +0,0 @@
-@keyframes overlay {
-    from {
-        background: #00000000;
-    }
-
-    to {
-        background: #0000004c;
-    }
-}
-
-.overlay {
-    position: fixed;
-    z-index: 4;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    animation: overlay 300ms;
-    animation-fill-mode: forwards;
-}
-
-.overlayOnBottom {
-    align-items: flex-end;
-    padding-bottom: calc(24px / var(--ratio-dimensions));
-}
-
-@keyframes container {
-    from {
-        transform: translateY(30px);
-        opacity: 0;
-    }
-
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
-.container {
-    background: var(--modal-bg);
-    border-radius: calc(12px / var(--ratio-dimensions));
-    max-width: 333px;
-    width: calc(100% - 30px);
-    padding: 20px;
-    position: relative;
-    box-sizing: border-box;
-    animation: container 300ms;
-    animation-fill-mode: forwards;
-}
-
-.full {
-    width: calc(100vw - 30px);
-    max-width: 1000px;
-}
-
-.isClosing {
-    // keep this after .overlay .container to prevent overwriting
-    animation-direction: reverse;
-}
-
-.close {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    background: none;
-    border: none;
-    padding: 0;
-    margin: 0;
-
-    + .title {
-        margin-right: 40px;
-        margin-top: -4px;
-    }
-}
-
-.title {
-    font-size: calc(40px / var(--ratio-font));
-    text-align: center;
-    color: black;
-    margin: calc(90px / var(--ratio-dimensions)) 0;
-}
-
-.negateMargin {
-    margin: 0 -20px -20px;
-}
-
-.removeMargin {
-    margin: 0;
-}

package/src/components/ui/modal/ModalButtons.module.scss

@@ -1,32 +0,0 @@
-.container {
-    display: flex;
-    margin-top: calc(100px / var(--ratio-dimensions));
-    margin-left: -20px;
-    margin-right: -20px;
-    margin-bottom: -20px;
-}
-
-.button {
-    border: none;
-    border-top: 1px solid var(--modal-button-border);
-    background: var(--modal-button-bg);
-    flex: 1;
-    height: calc(156px / var(--ratio-dimensions));
-    font-weight: 500;
-
-    &:not(:first-child) {
-        border-left: 1px solid var(--modal-button-border);
-    }
-
-    &:first-child {
-        border-bottom-left-radius: calc(12px / var(--ratio-dimensions));
-    }
-
-    &:last-child {
-        border-bottom-right-radius: calc(12px / var(--ratio-dimensions));
-    }
-}
-
-.buttonMain {
-    color: var(--main-color);
-}

package/src/components/ui/modal/ModalNoMargin.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-
-import { List } from "../../layout/list/List.js";
-
-import styles from "./Modal.module.scss";
-
-interface Props {
-    children: React.ReactNode;
-}
-
-const ModalNegateMargin: React.FC<Props> = (props) => {
-    const chld = React.Children.map(props.children, (child, index) => {
-        if (child && typeof child === "object" && "type" in child && child.type === List) {
-            return React.cloneElement(child, {
-                // @TODO this will overwrite className
-                className: styles.removeMargin,
-            });
-        }
-
-        return child;
-    });
-    return <div className={styles.negateMargin}>{chld}</div>;
-};
-
-export { ModalNegateMargin };

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

@@ -1,28 +0,0 @@
-import React from "react";
-
-import { Input, ICON, Icon } from "../../../index.js";
-
-import { countries } from "./countries.const.js";
-
-const handleSuggestionMatch = (s: string, picked: boolean) => {
-    alert("Suggestion " + (picked ? "picked" : "matched") + " : " + s);
-};
-
-const InputDemo: React.FC = () => {
-    return (
-        <>
-            <Input placeholder={"Capacity"} prefix={<Icon name={ICON.battery} />} suffix={"kWh"} />
-            <Input value={"William J. Welter"} />
-            <Input prefix={"Text prefix"} value={"Polly W. Wilson"} />
-            <Input prefix={"Disabled"} value={"Clayton J. Foster"} disabled={true} />
-            <Input prefix={"Read only"} value={"Norma J. Gomez"} readOnly={true} />
-            <Input
-                placeholder={"With suggestions, try country name"}
-                suggestions={countries}
-                onSuggestionMatch={handleSuggestionMatch}
-            />
-        </>
-    );
-};
-
-export { InputDemo };

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

@@ -1,26 +0,0 @@
-import React from "react";
-
-import { Label, Select } from "../../../index.js";
-
-const SelectDemo: React.FC = () => {
-    return (
-        <>
-            <Label label={"Normal select"}>
-                <Select>
-                    <option>Cookie</option>
-                    <option>Ice cream</option>
-                    <option>Sweets</option>
-                </Select>
-            </Label>
-            <Label label={"Disabled"}>
-                <Select disabled={true}>
-                    <option>Cookie</option>
-                    <option>Ice cream</option>
-                    <option>Sweets</option>
-                </Select>
-            </Label>
-        </>
-    );
-};
-
-export { SelectDemo };

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

@@ -1,23 +0,0 @@
-import React from "react";
-
-import { List, Item, Header } from "../../../../index.js";
-
-const ListHeaderDemo = () => {
-    return (
-        <List>
-            <Header>Section name</Header>
-            <Item>Item</Item>
-            <Item>Another item</Item>
-            <Item>One more</Item>
-            <Header>Status section</Header>
-            <Item>Item</Item>
-            <Item>One more</Item>
-            <Header>Advanced</Header>
-            <Item>Item</Item>
-            <Item>Another item</Item>
-            <Item>One more</Item>
-        </List>
-    );
-};
-
-export { ListHeaderDemo };

package/src/demo/components/layout/list/Inset.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-
-import { List, Item, Header } from "../../../../index.js";
-
-const ListInsetDemo = () => {
-    return (
-        <List variant={"inset"}>
-            <Header>Section name</Header>
-            <Item>Item</Item>
-            <Item>Another item</Item>
-            <Item>One more</Item>
-            <Header>Status section</Header>
-            <Item>Item</Item>
-            <Item>One more</Item>
-            <Header>Selection</Header>
-            <Item>Item</Item>
-            <Item>Another item</Item>
-            <Item>One more</Item>
-        </List>
-    );
-};
-
-export { ListInsetDemo };

package/src/demo/components/layout/list/ItemRatio.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-
-import { List, Item, ICON, Icon } from "../../../../index.js";
-
-const ItemRatioDemo = () => {
-    return (
-        <List>
-            <Item ratio={"1/"}>
-                <span>Label</span>
-                <>Value</>
-            </Item>
-            <Item ratio={"1/"}>
-                <span>Label</span>
-                <Icon name={ICON.forward} />
-            </Item>
-        </List>
-    );
-};
-
-export { ItemRatioDemo };

package/src/demo/components/layout/list/Label.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-
-import { List, Item } from "../../../../index.js";
-
-const Label = Item.Label;
-
-const ItemLabelDemo = () => {
-    return (
-        <List>
-            <Item>
-                <Label sub={"Here is a little text explaining things. Don't go too long, but make it non-ambiguous."}>
-                    Transmit power
-                </Label>
-            </Item>
-            <Item ratio={"6/4/"}>
-                <Label sub={"Here is a little text explaining things. Don't go too long, but make it non-ambiguous."}>
-                    Transmit power
-                </Label>
-                <></>
-                <>Value</>
-            </Item>
-            <Item>
-                <Label sub={"Just one sentence."}>
-                    Complicated name
-                </Label>
-            </Item>
-        </List>
-    );
-};
-
-export { ItemLabelDemo };

package/src/demo/components/layout/list/List.Item.module.scss

@@ -1,7 +0,0 @@
-.custom {
-    border-left: 3px solid green;
-}
-
-.item {
-    display: flex;
-}

package/src/demo/components/layout/list/List.Item.tsx

@@ -1,24 +0,0 @@
-import React, { useCallback } from "react";
-
-import { Item, List } from "../../../../index.js";
-import { NextLink } from "../../../NextLink.js";
-
-import styles from "./List.Item.module.scss";
-
-const ListItemDemo = () => {
-    const handleClick = useCallback(() => { window.alert("Clicked"); }, []);
-
-    return (
-        <List>
-            <Item>I am an item</Item>
-            <Item>I am an item</Item>
-            <Item href={"https://www.npmjs.com/package/react-miui"}>I am clickable item</Item>
-            <Item to={"/react-miui"} Link={NextLink}>I am local link item</Item>
-            <Item onClick={handleClick}>Click me to see my action</Item>
-            <Item className={styles.custom}>I'm a custom item</Item>
-            <Item>I am an item</Item>
-        </List>
-    );
-};
-
-export { ListItemDemo };

package/src/demo/components/layout/list/Selection.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-
-import { List, Item, Header } from "../../../../index.js";
-
-const ListSelectionDemo = () => {
-    return (
-        <List>
-            <Header>Select your favourite meal</Header>
-            <Item selected={false}>Stick</Item>
-            <Item selected={true}>Stone</Item>
-            <Item selected={false}>Bone</Item>
-        </List>
-    );
-};
-
-export { ListSelectionDemo };

package/src/demo/components/layout/list/Value.module.scss

@@ -1,4 +0,0 @@
-.icon {
-    color: var(--toolbar-border);
-    margin-left: calc(40px / var(--ratio-dimensions));
-}

package/src/demo/components/layout/list/Value.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-
-import { List, Item, ICON, Icon } from "../../../../index.js";
-
-import styles from "./Value.module.scss";
-
-const { Label, Value } = Item;
-
-const ValueDemo = () => {
-    return (
-        <List>
-            <Item>
-                <Label>Name</Label>
-                <Value>Jack The 23rd</Value>
-            </Item>
-            <Item>
-                <Label>Start at</Label>
-                <Value>18:00</Value>
-                <Icon name={ICON.forward} className={styles.icon} />
-            </Item>
-        </List>
-    );
-};
-
-export { ValueDemo };

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

@@ -1,33 +0,0 @@
-import React from "react";
-
-import { Section, List, Item } from "../../../../index.js";
-
-const SectionDemo = () => {
-    return (
-        <Section.Container>
-            <Section>
-                <List>
-                    <List.Header>Section name</List.Header>
-                    <Item>Item</Item>
-                    <Item>Item</Item>
-                </List>
-            </Section>
-            <Section>
-                <List>
-                    <List.Header>Section name</List.Header>
-                    <Item>Item</Item>
-                    <Item>Item</Item>
-                </List>
-            </Section>
-            <Section>
-                <List>
-                    <List.Header>Section name</List.Header>
-                    <Item>Item</Item>
-                    <Item>Item</Item>
-                </List>
-            </Section>
-        </Section.Container>
-    );
-};
-
-export { SectionDemo };

package/src/demo/components/ui/button/ButtonDemo.tsx

@@ -1,23 +0,0 @@
-import React, { useCallback } from "react";
-
-import { Button } from "../../../../index.js";
-
-const ButtonDemo = () => {
-    const handleClick = useCallback(() => {
-        alert("Clicked");
-    }, []);
-
-    return (
-        <div>
-            <Button onClick={handleClick}>Basic button</Button>
-            <br />
-            <Button disabled={true} onClick={handleClick}>Disabled button</Button>
-            <br />
-            <Button variant={"inline"} onClick={handleClick}>Inline button</Button>
-            <br />
-            <Button variant={"outline"} onClick={handleClick}>Outline button</Button>
-        </div>
-    );
-};
-
-export { ButtonDemo };

package/src/demo/components/ui/message/Message.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-
-import { Message } from "../../../../index.js";
-
-interface Props {}
-
-const MessageDemo: React.FC<Props> = () => {
-    return (
-        <>
-            <Message type={"warning"}>Files will be removed after 30 days.</Message>
-            <br /><br />
-            <Message type={"error"}>Files will be removed after 30 days.</Message>
-            <br /><br />
-            <Message type={"info"}>
-                Files will be removed after 30 days. Files will be removed after 30 days.
-            </Message>
-            <br /><br />
-            <Message type={"warning"} variant={"box"}>Files will be removed after 30 days.</Message>
-            <Message type={"error"} variant={"box"}>Files will be removed after 30 days.</Message>
-            <Message type={"info"} variant={"box"}>
-                Files will be removed after 30 days. Files will be removed after 30 days.
-            </Message>
-        </>
-    );
-};
-
-export { MessageDemo };