react-miui 0.18.1 → 0.20.0

package/esm/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAC9E,OAAO,KAAK,EAAE,GAAG,IAAI,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAS1D,QAAA,MAAM,OAAO,OAAQ,MAAM,WAAoB,CAAC;AAChD,QAAA,MAAM,iBAAiB,OAAQ,MAAM,WAAoC,CAAC;AAC1E,QAAA,MAAM,aAAa,OAAQ,MAAM,WAAgC,CAAC;AAClE,QAAA,MAAM,WAAW,OAAQ,MAAM,WAA8B,CAAC;AAE9D,QAAA,MACI,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAkFU,MAAM;;;;gBACN,MAAM;;;;kBACJ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAFR,MAAM;;;;gBACN,MAAM;;;;kBACJ,MAAM;;;;KAnFxB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAiFa,MAAM;;;;gBACN,MAAM;;;;kBACJ,MAAM;;;;;;;;;;;;;;;mbAlFxB,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAgFO,MAAM;;;;oBACN,MAAM;;;;sBACJ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAFR,MAAM;;;;gBACN,MAAM;;;;kBACJ,MAAM;;;;2BAjFxB,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA+EO,MAAM;;;;oBACN,MAAM;;;;sBACJ,MAAM;;;;;;;;GAhFxB,UAAU,gBACV,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GACL,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4KACX,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA2EU,MAAM;;;;oBACN,MAAM;;;;sBACJ,MAAM;;;;;CAE1B,CAAC;AAEH,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,MAAM,CAAC,CAAC;AAE3C,KAAK,cAAc,CAEf,CAAC,SAAS,eAAe,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,EAExD,KAAK,EAAE,IAAI,GAAG,GAAG,EAAE,QAAQ,GAAG,GAAG,EAAE,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG,IAC5D,eAAe,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAEhD,YAAY,EACR,QAAQ,EACR,cAAc,GACjB,CAAC;AAEF,OAAO,EACH,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAEzE,OAAO,EACP,iBAAiB,EACjB,aAAa,EACb,WAAW,GACd,CAAC"}

package/esm/theme.js

@@ -0,0 +1,78 @@
+import { createStitches } from "@stitches/react";
+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: {
+            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 }),
+        my: (value) => ({ marginTop: value, marginBottom: value }),
+        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

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}

package/esm/utils/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./makeVariants.js";
 export * from "./toObjectValue.js";
 export * from "./useKeyPress.js";
-export * from "./useRandomId.js";
 //# sourceMappingURL=index.d.ts.map

package/esm/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC"}

package/esm/utils/index.js

@@ -1,5 +1,4 @@
 export * from "./makeVariants.js";
 export * from "./toObjectValue.js";
 export * from "./useKeyPress.js";
-export * from "./useRandomId.js";
 //# sourceMappingURL=index.js.map

package/esm/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC"}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "react-miui",
-  "version": "0.18.1",
+  "version": "0.20.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {
     "test": "NODE_ENV=test jest",
-    "docs": "typedoc src/index.ts --skipErrorChecking --out docs --includeVersion --pluginPages ./pagesconfig.json",
+    "docs": "typedoc src/index.ts --skipErrorChecking --out docs --includeVersion",
     "compile": "yarn compile:esm && yarn compile:cjs",
     "compile:esm": "rm -rf esm && tsc --project tsconfig.esm.json && node ./build-scripts/compile.esm.after.mjs",
     "compile:cjs": "rm -rf dist && tsc --project tsconfig.cjs.json && node ./build-scripts/compile.cjs.after.mjs",
@@ -14,12 +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",
-    "prepare": "husky install",
     "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",
@@ -33,56 +34,61 @@
   "types": "./esm/index.d.ts",
   "module": "./esm/index.js",
   "dependencies": {
+    "@stitches/react": "^1.2.8",
     "classnames": "^2.3.2",
-    "nodemon": "^2.0.20",
-    "oop-timers": "^4.0.1"
+    "oop-timers": "^5.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.3",
-    "@babel/preset-env": "^7.19.3",
-    "@babel/preset-typescript": "^7.18.6",
-    "@dzek69/eslint-config-base": "^2.3.0",
-    "@dzek69/eslint-config-import": "^1.0.0",
+    "@babel/core": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-typescript": "^7.21.4",
+    "@dzek69/eslint-config-base": "^2.4.0",
+    "@dzek69/eslint-config-import": "^1.2.0",
     "@dzek69/eslint-config-import-typescript": "^1.0.0",
     "@dzek69/eslint-config-react": "^1.2.2",
-    "@dzek69/eslint-config-typescript": "^1.0.2",
-    "@knodes/typedoc-plugin-pages": "^0.23.1",
-    "@types/jest": "^29.2.0",
+    "@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",
-    "@typescript-eslint/eslint-plugin": "^5.38.1",
-    "@typescript-eslint/parser": "^5.38.1",
+    "@typescript-eslint/eslint-plugin": "^5.58.0",
+    "@typescript-eslint/parser": "^5.58.0",
     "babel-plugin-module-extension": "^0.1.3",
     "babel-plugin-module-resolver": "^5.0.0",
-    "eslint": "^8.24.0",
-    "eslint-plugin-import": "^2.26.0",
+    "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": "^10.1.0",
-    "husky": "^8.0.1",
-    "jest": "^29.2.2",
+    "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.15",
-    "typescript": "^4.9.5",
-    "prettier": "^2.8.3"
+    "typedoc": "^0.23.28",
+    "typescript": "^5.0.4"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "husky": {
-    "hooks": {
-      "pre-push": "yarn prepublishOnly && yarn compile"
-    }
-  },
   "libraryTemplate": {
-    "version": "3.7.1",
+    "version": "3.9.1",
     "language": "typescript",
     "fixDefaultForCommonJS": true,
     "jsx": true

package/src/components/form/TextArea.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from "react";
 
 import classnames from "classnames";
 
-import styles from "./Input.module.scss";
+import styles from "./input/Input.module.scss";
 
 interface Props {
     children?: never;

package/src/components/form/index.ts

@@ -0,0 +1 @@
+export * from "./input/Input.js";

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

@@ -0,0 +1,7 @@
+.textarea {
+    padding: 1.2em calc(36px / var(--ratio-dimensions));
+    height: unset;
+    resize: vertical;
+    min-height: calc(103px * 3 / var(--ratio-dimensions))
+}
+

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

@@ -0,0 +1,72 @@
+import { borderPxToRem, dimensionsPxToRem, fontPxToRem, styled } from "../../../theme.js";
+
+const StyledInput = styled("input", {
+    "height": dimensionsPxToRem(103),
+    "fontSize": fontPxToRem(34),
+    "color": "$text",
+    "border": "none",
+    "display": "block",
+    "width": "100%",
+    "background": "none",
+    "fontFamily": "inherit",
+    "padding": "1.2em 0",
+    "flex": 1,
+
+    "&::placeholder": {
+        color: "$sub",
+    },
+});
+
+const StyledWrapper = styled("div", {
+    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",
+
+                [StyledInput.toString()]: {
+                    color: "$inputDisabledText",
+                },
+            },
+        },
+        readOnly: {
+            true: {
+                color: "$inputDisabledText",
+
+                [StyledInput.toString()]: {
+                    color: "$inputDisabledText",
+                },
+            },
+        },
+        focused: {
+            true: {
+                borderColor: "$focusColor",
+            },
+        },
+    },
+});
+
+const StyledPrefix = styled("div", {
+    marginRight: dimensionsPxToRem(36),
+    display: "flex",
+});
+
+const StyledSuffix = styled("div", {
+    marginLeft: dimensionsPxToRem(36),
+    display: "flex",
+});
+
+export {
+    StyledInput,
+    StyledWrapper,
+    StyledPrefix,
+    StyledSuffix,
+};

package/src/components/form/{Input.tsx → input/Input.tsx}

@@ -1,13 +1,11 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useId, useState } from "react";
 
-import classnames from "classnames";
+import type { ObjectValue, Value } from "../../../types/form";
 
-import type { ObjectValue, Value } from "../../types/form";
+import { Suggestions } from "../Suggestions.js";
 
-import { useRandomId } from "../../utils/index.js";
-
-import { Suggestions } from "./Suggestions.js";
 import styles from "./Input.module.scss";
+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,
@@ -29,7 +29,7 @@ const Input = <T extends string>({
     ...props
 }: Props<T>): ReturnType<React.FC<Props<T>>> => {
     const [focused, setFocused] = useState(false);
-    const suggestionsId = useRandomId();
+    const suggestionsId = useId();
     const [info] = useState<{ picked?: boolean }>({});
 
     const handleFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
@@ -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}
-            <input
+            <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/layout/header/Header.module.scss

@@ -64,10 +64,22 @@
 .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 {

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

@@ -1,8 +1,11 @@
 .btn, .a {
-    padding: 7px;
+    height: 100%;
+    aspect-ratio: 1;
     background: none;
     border-radius: 666px;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     border: calc(2px / var(--ratio-border)) solid transparent;
     color: currentColor;
 

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

@@ -0,0 +1,13 @@
+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/list/Value.tsx

@@ -1,18 +1 @@
-import React from "react";
-
-import classnames from "classnames";
-
-import styles from "./Value.module.scss";
-
-interface Props {
-    className?: string;
-    children: React.ReactNode;
-}
-
-const Value: React.FC<Props> = (props) => {
-    return (
-        <div className={classnames(styles.value, props.className)}>{props.children}</div>
-    );
-};
-
-export { Value };
+export { StyledValue as Value } from "./Value.styled.js";

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 };