react-miui 0.19.0 → 0.20.1

package/esm/theme.js

@@ -1,7 +1,72 @@
 import { createStitches } from "@stitches/react";
-export const { styled, css, globalCss, keyframes, getCssText, theme, createTheme, config, } = createStitches({
+const RATIOS = {
+    dimensions: 3,
+    border: 2.666666,
+    font: 1.666666,
+};
+const pxToRem = (px) => `${px / 16}rem`;
+const dimensionsPxToRem = (px) => pxToRem(px / RATIOS.dimensions);
+const borderPxToRem = (px) => pxToRem(px / RATIOS.border);
+const fontPxToRem = (px) => pxToRem(px / RATIOS.font);
+const { styled, css, globalCss, keyframes, getCssText, theme, createTheme, config, } = createStitches({
     theme: {
-        colors: {},
+        colors: {
+            background: "white",
+            mainColor: "#008ad2",
+            mainColorAlt: "#006AA9",
+            activeBg: "#e7e7e7",
+            inactiveBg: "#d3d3de",
+            inactiveDarkBg: "#999",
+            toggleHandleBg: "#e0e0e0",
+            toggleHandleBorder: "#cdcdcd",
+            toggleBgDisabled: "#f0f0f0",
+            toggleHandleBorderDisabled: "#c29f7d",
+            toggleHandleBgDisabled: "#deae84",
+            icon: "#636363",
+            border: "#d5d5d5",
+            buttonBorder: "#bababa",
+            headerBorder: "#c8c8c9",
+            headerBg: "#efeff0",
+            headerText: "#484848",
+            text: "#323232",
+            sub: "#959595",
+            popText: "#666",
+            toolbarBorder: "#ababab",
+            toolbarBg: "#f8f8f8",
+            modalBg: "#f7f7f7",
+            modalButtonBg: "#f8f8f8",
+            modalButtonBorder: "#c2c2c2",
+            inputDisabledBg: "#f3f3f3",
+            inputDisabledText: "#959595",
+            choiceBg: "#ffffff",
+            choiceText: "#999999",
+            choiceActiveBg: "#f3f3f3",
+            choiceActiveText: "#313131",
+            choiceBorder: "#cfcfcf",
+            selectorText: "#606060",
+            selectorActive: "#008ad2",
+            blue1: "#038bf4",
+            blue2: "#b7d6f5",
+            blue3: "#dbe6ff",
+            orange1: "#ff7200",
+            orange1Darker: "#cc5b00",
+            purple1: "#7357e8",
+            green1: "#3ec234",
+            green1Darker: "#38af2f",
+            pink1: "#ff388f",
+            red1: "#ea2700",
+            yellow1: "#ffde9d",
+            yellow2: "#e4a429",
+            yellow3: "#fff5db",
+            pinky1: "#f5c0b7",
+            pinky2: "#e07b67",
+            pinky3: "#ffe1db",
+            grey1: "#737373",
+            focusColor: "#dcaf00",
+            scrollbarsThumb: "#737373",
+            scrollbarsBg: "transparent",
+            tableStripedBg: "#fafafa",
+        },
     },
     utils: {
         mx: (value) => ({ marginLeft: value, marginRight: value }),
@@ -9,4 +74,5 @@ export const { styled, css, globalCss, keyframes, getCssText, theme, createTheme
         size: (value) => ({ width: value, height: value }),
     },
 });
+export { styled, css, globalCss, keyframes, getCssText, theme, createTheme, config, pxToRem, dimensionsPxToRem, borderPxToRem, fontPxToRem, };
 //# sourceMappingURL=theme.js.map

package/esm/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,CAAC,MAAM,EACT,MAAM,EACN,GAAG,EACH,SAAS,EACT,SAAS,EACT,UAAU,EACV,KAAK,EACL,WAAW,EACX,MAAM,GACT,GAAG,cAAc,CAAC;IACf,KAAK,EAAE;QACH,MAAM,EAAE,EAAE;KACb;IACD,KAAK,EAAE;QACH,EAAE,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC;QAClE,EAAE,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;QAClE,IAAI,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;KAC7D;CACJ,CAAC,CAAC"}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.19.0",
+  "version": "0.20.1",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {
@@ -14,11 +14,13 @@
     "lint:fix": "yarn lint --fix",
     "prepack": "yarn compile",
     "prepublishOnly": "yarn audit && yarn lint && yarn test && yarn docs",
-    "start:dev": "next dev",
+    "start:dev": "yarn storybook",
     "deploy:dev": "next build && next export && netlify deploy --dir out",
     "updates": "npx --yes npm-check-updates --dep prod",
     "updates:dev": "npx --yes npm-check-updates --dep dev",
-    "updates:all": "npx --yes npm-check-updates"
+    "updates:all": "npx --yes npm-check-updates",
+    "storybook": "storybook dev -p 6006",
+    "build:storybook": "storybook build"
   },
   "exports": {
     "./global.scss": "./src/global.scss",
@@ -34,7 +36,6 @@
   "dependencies": {
     "@stitches/react": "^1.2.8",
     "classnames": "^2.3.2",
-    "nodemon": "^2.0.22",
     "oop-timers": "^5.0.0"
   },
   "devDependencies": {
@@ -48,6 +49,13 @@
     "@dzek69/eslint-config-typescript": "^1.1.0",
     "@icon-park/react": "^1.4.2",
     "@knodes/typedoc-plugin-pages": "^0.23.4",
+    "@storybook/addon-essentials": "^7.0.11",
+    "@storybook/addon-interactions": "^7.0.11",
+    "@storybook/addon-links": "^7.0.11",
+    "@storybook/blocks": "^7.0.11",
+    "@storybook/nextjs": "^7.0.11",
+    "@storybook/react": "^7.0.11",
+    "@storybook/testing-library": "^0.0.14-next.2",
     "@types/jest": "^29.5.0",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
@@ -58,16 +66,19 @@
     "eslint": "^8.38.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-storybook": "^0.6.12",
     "fast-glob": "^3.2.7",
     "fs-extra": "^11.1.1",
     "jest": "^29.5.0",
     "must": "^0.13.4",
     "next": "^13.1.6",
+    "nodemon": "^2.0.22",
     "prettier": "^2.8.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-use": "^17.4.0",
     "sass": "^1.35.2",
+    "storybook": "^7.0.11",
     "ts-node": "^10.9.1",
     "typedoc": "^0.23.28",
     "typescript": "^5.0.4"

package/src/components/form/input/Input.css.ts

@@ -0,0 +1,58 @@
+import type { ThemeCSS } from "../../../theme";
+
+import { dimensionsPxToRem, fontPxToRem, borderPxToRem } from "../../../theme.js";
+
+const input = {
+    "height": dimensionsPxToRem(103),
+    "fontSize": fontPxToRem(25),
+    "color": "$text",
+    "border": "none",
+    "display": "block",
+    "width": "100%",
+    "background": "none",
+    "fontFamily": "inherit",
+    "padding": "1.2em 0",
+    "flex": 1,
+
+    "&::placeholder": {
+        color: "$sub",
+    },
+
+    "&:read-only, &:disabled": {
+        color: "inherit",
+    },
+} satisfies ThemeCSS;
+
+const wrapper = {
+    background: "white",
+    display: "inline-flex",
+    width: "100%",
+    borderRadius: "2px",
+    padding: `0 ${dimensionsPxToRem(36)}`,
+    border: `${borderPxToRem(1)} solid $border`,
+    alignItems: "center",
+
+    variants: {
+        disabled: {
+            true: {
+                background: "$inputDisabledBg",
+                color: "$inputDisabledText",
+            },
+        },
+        readOnly: {
+            true: {
+                color: "$inputDisabledText",
+            },
+        },
+        focused: {
+            true: {
+                borderColor: "$focusColor",
+            },
+        },
+    },
+} satisfies ThemeCSS;
+
+export {
+    input,
+    wrapper,
+};

package/src/components/form/input/Input.module.scss

@@ -1,52 +1,3 @@
-.input {
-    box-sizing: border-box;
-    height: calc(103px / var(--ratio-dimensions));
-    font-size: calc(34 / var(--ratio-font));
-    color: var(--text);
-    border: none;
-    display: block;
-    width: 100%;
-    background: none;
-    font-family: inherit;
-    padding: 1.2em 0;
-
-    &::placeholder {
-        color: var(--sub);
-    }
-}
-
-.wrapper {
-    background: white;
-    display: inline-flex;
-    width: 100%;
-    box-sizing: border-box;
-    border-radius: 2px;
-    padding: 0 calc(36px / var(--ratio-dimensions));
-    border: calc(1px / var(--ratio-border)) solid var(--border);
-    align-items: center;
-
-    .input {
-        flex: 1;
-    }
-
-    &.disabled {
-        background: var(--input-disabled-bg);
-        color: var(--input-disabled-text);
-
-        .input {
-            color: var(--input-disabled-text);
-        }
-    }
-
-    &.readOnly {
-        color: var(--input-disabled-text);
-
-        .input {
-            color: var(--input-disabled-text);
-        }
-    }
-}
-
 .textarea {
     padding: 1.2em calc(36px / var(--ratio-dimensions));
     height: unset;
@@ -54,16 +5,3 @@
     min-height: calc(103px * 3 / var(--ratio-dimensions))
 }
 
-.prefix {
-    margin-right: calc(36px / var(--ratio-dimensions));
-    display: flex;
-}
-
-.suffix {
-    margin-left: calc(36px / var(--ratio-dimensions));
-    display: flex;
-}
-
-.wrapperFocused {
-    border-color: var(--focus-color);
-}

package/src/components/form/input/Input.stories.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { Icon, ICON } from "../../icons/Icon.js";
+import { countries } from "../../../demo/components/form/countries.const";
+
+import { Input } from "./Input.js";
+
+const meta: Meta<typeof Input> = {
+    title: "Components/Form/Input",
+    component: Input,
+    tags: ["autodocs", "form"],
+    argTypes: {
+        prefix: {
+            type: "string",
+        },
+        suffix: {
+            type: "string",
+        },
+    },
+};
+
+type Story = StoryObj<typeof Input>;
+
+const Primary: Story = {
+    args: {
+        placeholder: "Capacity",
+        prefix: <Icon name={ICON.battery} />,
+        suffix: "kWh",
+    },
+};
+
+const handleSuggestionMatch = (s: string, picked: boolean) => {
+    alert("Suggestion " + (picked ? "picked" : "matched") + " : " + s);
+};
+
+const Mixed: Story = {
+    render: () => (
+        <>
+            <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 {
+    Primary, Mixed,
+};
+
+export default meta;

package/src/components/form/input/Input.styled.ts

@@ -1,22 +1,24 @@
-import { styled } from "../../../theme.js";
+import { dimensionsPxToRem, styled } from "../../../theme.js";
 
-const InputStyled = styled("input", {
-    "boxSizing": "border-box",
-    "height": "calc(103px / var(--ratio-dimensions))",
-    "fontSize": "calc(34 / var(--ratio-font))",
-    "color": "var(--text)",
-    "border": "none",
-    "display": "block",
-    "width": "100%",
-    "background": "none",
-    "fontFamily": "inherit",
-    "padding": "1.2em 0",
+import { input, wrapper } from "./Input.css.js";
 
-    "&::placeholder": {
-        color: "var(--sub)",
-    },
+const StyledInput = styled("input", input);
+
+const StyledWrapper = styled("div", wrapper);
+
+const StyledPrefix = styled("div", {
+    marginRight: dimensionsPxToRem(36),
+    display: "flex",
+});
+
+const StyledSuffix = styled("div", {
+    marginLeft: dimensionsPxToRem(36),
+    display: "flex",
 });
 
 export {
-    InputStyled,
+    StyledInput,
+    StyledWrapper,
+    StyledPrefix,
+    StyledSuffix,
 };

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

@@ -1,13 +1,11 @@
 import React, { useCallback, useId, useState } from "react";
 
-import classnames from "classnames";
-
 import type { ObjectValue, Value } from "../../../types/form";
 
 import { Suggestions } from "../Suggestions.js";
 
 import styles from "./Input.module.scss";
-import { InputStyled } from "./Input.styled";
+import { StyledInput, StyledWrapper, StyledPrefix, StyledSuffix } from "./Input.styled";
 
 interface CustomProps<T extends string> {
     children?: never;
@@ -19,8 +17,10 @@ interface CustomProps<T extends string> {
 
 type Props<T extends string> = Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> & CustomProps<T>;
 
-// eslint-disable-next-line max-lines-per-function
-const Input = <T extends string>({
+/**
+ * Input component.
+ */
+const Input = <T extends string>({ // eslint-disable-line max-lines-per-function
     className, children,
     prefix, suffix,
     onFocus, onBlur, onKeyDown, onChange,
@@ -69,14 +69,8 @@ const Input = <T extends string>({
         onChange?.(e);
     }, [suggestions]);
 
-    const wrapperCls = classnames(styles.wrapper, {
-        [styles.wrapperFocused]: focused,
-        [styles.disabled]: props.disabled,
-        [styles.readOnly]: props.readOnly,
-    }, className);
-
-    const prefixElem = prefix ? <div className={styles.prefix}>{prefix}</div> : null;
-    const suffixElem = suffix ? <div className={styles.suffix}>{suffix}</div> : null;
+    const prefixElem = prefix ? <StyledPrefix>{prefix}</StyledPrefix> : null;
+    const suffixElem = suffix ? <StyledSuffix>{suffix}</StyledSuffix> : null;
 
     const extraProps: { list?: string } = {};
     if (suggestions) {
@@ -84,9 +78,14 @@ const Input = <T extends string>({
     }
 
     return (
-        <div className={wrapperCls}>
+        <StyledWrapper
+            className={className}
+            focused={Boolean(focused)}
+            disabled={Boolean(props.disabled)}
+            readOnly={Boolean(props.readOnly)}
+        >
             {prefixElem}
-            <InputStyled
+            <StyledInput
                 {...props}
                 {...extraProps}
                 onChange={handleChange}
@@ -97,7 +96,7 @@ const Input = <T extends string>({
             />
             <Suggestions id={suggestionsId} suggestions={suggestions} />
             {suffixElem}
-        </div>
+        </StyledWrapper>
     );
 };
 

package/src/components/form/textarea/TextArea.stories.tsx

@@ -0,0 +1,21 @@
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { TextArea } from "./TextArea.js";
+
+const meta: Meta = {
+    title: "Components/Form/TextArea",
+    component: TextArea,
+    tags: ["autodocs", "form"],
+};
+
+type Story = StoryObj<typeof TextArea>;
+
+const Primary: Story = {
+    args: {},
+};
+
+export {
+    Primary,
+};
+
+export default meta;

package/src/components/form/textarea/TextArea.styled.ts

@@ -0,0 +1,19 @@
+import { dimensionsPxToRem, styled } from "../../../theme.js";
+import { input, wrapper } from "../input/Input.css";
+import { miuiScrollbars } from "../../../scrollbars.css";
+
+const StyledTextArea = styled("textarea", {
+    ...miuiScrollbars,
+    ...input,
+    ...wrapper,
+
+    padding: `1.2em ${dimensionsPxToRem(36)}`,
+    height: "unset",
+    resize: "vertical",
+    minHeight: dimensionsPxToRem(103),
+
+});
+
+export {
+    StyledTextArea,
+};

package/src/components/form/{TextArea.tsx → textarea/TextArea.tsx}

@@ -1,15 +1,13 @@
 import React, { useCallback, useState } from "react";
 
-import classnames from "classnames";
-
-import styles from "./input/Input.module.scss";
+import { StyledTextArea } from "./TextArea.styled";
 
 interface Props {
     children?: never;
 }
 
 const TextArea: React.FC<React.TextareaHTMLAttributes<HTMLTextAreaElement> & Props> = ({
-    className, children,
+    children,
     onFocus, onBlur,
     ...props
 }) => {
@@ -25,12 +23,15 @@ const TextArea: React.FC<React.TextareaHTMLAttributes<HTMLTextAreaElement> & Pro
         onBlur?.(e);
     }, [onBlur]);
 
-    const cls = classnames(styles.wrapper, {
-        [styles.wrapperFocused]: focused,
-    }, styles.input, styles.textarea, className);
-
     return (
-        <textarea {...props} onFocus={handleFocus} onBlur={handleBlur} className={cls} />
+        <StyledTextArea
+            {...props}
+            disabled={Boolean(props.disabled)}
+            readOnly={Boolean(props.readOnly)}
+            focused={focused}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+        />
     );
 };
 

package/src/components/ui/loader/CoveringLoader.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { CoveringLoader } from "./CoveringLoader.js";
+
+const meta: Meta = {
+    title: "Components/UI/Loader/CoveringLoader",
+    component: CoveringLoader,
+    tags: ["autodocs", "ui"],
+};
+
+type Story = StoryObj<typeof CoveringLoader>;
+
+const Primary: Story = {
+    args: {},
+    render: () => {
+        return (
+            <CoveringLoader show={true}>
+                <div style={{ background: "#f0f0f0" }}>
+                    some contents<br />
+                    some contents Lorem ipsum etc
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quibusdam.
+                    some contents<br />
+                    some contents<br />
+                    some contents<br />
+                </div>
+            </CoveringLoader>
+        );
+    },
+};
+
+export {
+    Primary,
+};
+
+export default meta;

package/src/components/ui/loader/CoveringLoader.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+import type { Loader } from "./Loader";
+
+import { styled } from "../../../theme.js";
+
+import { FullLoader } from "./FullLoader.js";
+
+interface Props extends React.ComponentProps<typeof Loader> {
+    /**
+     * Contents to render underneath the loader
+     */
+    children: React.ReactNode;
+}
+
+const Container = styled("div", {
+    position: "relative",
+});
+
+const TailSpin = styled("div", {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+});
+
+const Content = styled("div", {
+    opacity: 0.3,
+});
+
+/**
+ * A loader that renders in the middle of available space, but also covers the contents.
+ * Contents opacity is lowered.
+ */
+const CoveringLoader: React.FC<Props> = ({ show, children, ...props }) => {
+    if (!show) {
+        return <>{children}</>;
+    }
+
+    return (
+        <Container>
+            <TailSpin>
+                <FullLoader {...props} />
+            </TailSpin>
+            <Content>
+                {children}
+            </Content>
+        </Container>
+    );
+};
+
+export { CoveringLoader };

package/src/components/ui/loader/FullLoader.stories.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { FullLoader } from "./FullLoader.js";
+
+const meta: Meta = {
+    title: "Components/UI/Loader/FullLoader",
+    component: FullLoader,
+    tags: ["autodocs", "ui"],
+};
+
+type Story = StoryObj<typeof FullLoader>;
+
+const Primary: Story = {
+    args: {},
+    render: () => {
+        return (
+            <>
+                Container:
+                <div style={{ border: "1px solid black", width: 300, height: 300 }}>
+                    <FullLoader />
+                </div>
+            </>
+        );
+    },
+};
+
+export {
+    Primary,
+};
+
+export default meta;
+

package/src/components/ui/loader/FullLoader.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { styled } from "../../../theme.js";
+
+import { Loader } from "./Loader.js";
+
+type Props = React.ComponentProps<typeof Loader>;
+
+const Container = styled("div", {
+    height: "100%",
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+});
+
+/**
+ * A loader that renders in the middle of available space
+ */
+const FullLoader: React.FC<Props> = (props) => {
+    return <Container><Loader {...props} /></Container>;
+};
+
+export { FullLoader };