@uxf/ui 1.0.0-beta.97 → 1.0.0-beta.99

package/color-scheme/color-scheme-defaults.d.ts

@@ -1,7 +1,7 @@
 import { ColorScheme } from "../types";
 export declare const COLOR_SCHEME_DEFAULTS: {
     readonly defaultColorScheme: "light";
-    readonly getUserSettings: () => ColorScheme;
+    readonly getUserSettings: () => ColorScheme | null;
     readonly respectSystemSetting: true;
     readonly respectUserSettings: true;
     readonly setUserSettings: (colorScheme: ColorScheme) => void;

package/color-scheme/use-handle-color-scheme.d.ts

@@ -1,7 +1,7 @@
 import { ColorScheme } from "../types";
 export interface ColorSchemeOptions {
     defaultColorScheme?: ColorScheme;
-    getUserSettings: () => ColorScheme;
+    getUserSettings: () => ColorScheme | null;
     respectSystemSetting?: boolean;
     respectUserSettings?: boolean;
     setUserSettings: (colorScheme: ColorScheme) => void;

package/color-scheme/use-handle-color-scheme.js

@@ -7,9 +7,10 @@ function useHandleColorScheme(props) {
     const { defaultColorScheme = color_scheme_defaults_1.COLOR_SCHEME_DEFAULTS.defaultColorScheme, getUserSettings, respectSystemSetting, respectUserSettings, setUserSettings, } = props;
     (0, react_1.useEffect)(() => {
         const inverseColorScheme = defaultColorScheme === "light" ? "dark" : "light";
-        if ((respectUserSettings && getUserSettings() === inverseColorScheme) ||
+        const userSettings = getUserSettings();
+        if ((respectUserSettings && userSettings === inverseColorScheme) ||
             (respectSystemSetting &&
-                !("theme" in localStorage) &&
+                !userSettings &&
                 window.matchMedia(`(prefers-color-scheme: ${inverseColorScheme})`).matches)) {
             document.body.classList.remove(defaultColorScheme);
             document.body.classList.add(inverseColorScheme);

package/color-scheme/use-toggle-color-scheme.js

@@ -5,16 +5,26 @@ const isServer_1 = require("@uxf/core/utils/isServer");
 const react_1 = require("react");
 const context_1 = require("../context");
 function useToggleColorScheme() {
-    const { getUserSettings, setUserSettings } = (0, context_1.useComponentContext)("colorScheme");
+    const { respectSystemSetting, respectUserSettings, getUserSettings, setUserSettings } = (0, context_1.useComponentContext)("colorScheme");
     return (0, react_1.useCallback)(() => {
         if (isServer_1.isServer) {
             return;
         }
-        const currentColorSchema = getUserSettings();
-        const inverseColorScheme = currentColorSchema === "light" ? "dark" : "light";
-        document.body.classList.remove(currentColorSchema);
-        document.body.classList.add(inverseColorScheme);
-        setUserSettings(inverseColorScheme);
-    }, [getUserSettings, setUserSettings]);
+        const userSettings = getUserSettings();
+        let inverseColorScheme;
+        if (userSettings && respectUserSettings) {
+            document.body.classList.remove(userSettings);
+            inverseColorScheme = userSettings === "light" ? "dark" : "light";
+        }
+        else if (respectSystemSetting) {
+            const userColorScheme = window.matchMedia(`(prefers-color-scheme: dark)`).matches ? "dark" : "light";
+            document.body.classList.remove(userColorScheme);
+            inverseColorScheme = userColorScheme === "light" ? "dark" : "light";
+        }
+        if (inverseColorScheme) {
+            document.body.classList.add(inverseColorScheme);
+            setUserSettings(inverseColorScheme);
+        }
+    }, [getUserSettings, respectSystemSetting, respectUserSettings, setUserSettings]);
 }
 exports.useToggleColorScheme = useToggleColorScheme;

package/css/flash-messages.css

@@ -17,4 +17,12 @@
     &--error {
         @apply bg-error-500 is-hoverable:bg-error-700 text-white;
     }
+
+    &--warning {
+        @apply bg-warning-500 is-hoverable:bg-warning-700 text-white;
+    }
+
+    &--info {
+        @apply bg-gray-500 is-hoverable:bg-gray-700 text-white;
+    }
 }

package/css/loader.css

@@ -0,0 +1,11 @@
+@keyframes spinner {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.uxf-loader {
+    animation: spinner 1.2s linear infinite;
+
+    @apply inline-block h-12 w-12 rounded-full border-r-4 border-t-4 border-r-transparent border-t-current;
+}

package/flash-messages/flash-messages.stories.js

@@ -14,18 +14,32 @@ exports.default = {
     component: flash_messages_1.FlashMessages,
 };
 function Default() {
-    return (react_1.default.createElement("div", { className: "light flex space-x-4" },
+    return (react_1.default.createElement("div", { className: "light inline-flex flex-col space-y-4" },
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
                 message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
                     react_1.default.createElement(icon_1.Icon, { name: "check", size: 24 }),
                     react_1.default.createElement("span", null, "Everything is alright."))),
-            }) }, "Click to fire Flash message"),
+            }) }, "Click to fire Flash message, variant success"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
                 message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
                     react_1.default.createElement(icon_1.Icon, { name: "xmarkLarge", size: 24 }),
                     react_1.default.createElement("span", null, "Seems like an error occurred :)"))),
                 autoDismiss: false,
                 variant: "error",
-            }) }, "AutoDismiss: false Flash message, variant error")));
+            }) }, "AutoDismiss: false Flash message, variant error"),
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
+                message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
+                    react_1.default.createElement(icon_1.Icon, { name: "clock", size: 24 }),
+                    react_1.default.createElement("span", null, "You should better watch out :)"))),
+                autoDismiss: false,
+                variant: "warning",
+            }) }, "Flash message, variant warning"),
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
+                message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
+                    react_1.default.createElement(icon_1.Icon, { name: "check", size: 24 }),
+                    react_1.default.createElement("span", null, "Just letting you know"))),
+                autoDismiss: false,
+                variant: "info",
+            }) }, "Flash message, variant info")));
 }
 exports.Default = Default;

package/flash-messages/theme.d.ts

@@ -1,4 +1,6 @@
 export interface FlashMessageVariants {
     error: true;
+    info: true;
     success: true;
+    warning: true;
 }

package/loader/loader.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const Loader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/loader/loader.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loader = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+exports.Loader = (0, forwardRef_1.forwardRef)("Loader", (props, ref) => {
+    const loaderClassName = (0, cx_1.cx)("uxf-loader", props.className);
+    return react_1.default.createElement("span", { ref: ref, className: loaderClassName });
+});

package/loader/loader.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/loader/loader.stories.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const loader_1 = require("./loader");
+exports.default = {
+    title: "UI/Loader",
+    component: loader_1.Loader,
+};
+function Default() {
+    const loaders = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(loader_1.Loader, null),
+        react_1.default.createElement(loader_1.Loader, { className: "h-6 w-6" })));
+    return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
+        react_1.default.createElement("div", { className: "light space-y-4 space-x-4 rounded bg-white p-8" }, loaders),
+        react_1.default.createElement("div", { className: "dark space-y-4 space-x-4 rounded bg-gray-900 p-8 text-white" }, loaders)));
+}
+exports.Default = Default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.97",
+  "version": "1.0.0-beta.99",
   "description": "",
   "publishConfig": {
     "access": "public"