@uxf/ui 1.0.0-beta.127 → 1.0.0-beta.129

package/_private-utils/get-provider-config.js

@@ -10,6 +10,7 @@ const getProviderConfig = () => ({
         respectSystemSetting: false,
         respectUserSettings: false,
     },
+    domain: "https://localhost:6006",
     icon: { spriteFilePath: "/icons-generated/_icon-sprite.svg", iconsConfig: icons_1.ICONS },
     rasterImage: {
         breakpoints: tw_screens_1.twScreens,

package/context/context.d.ts

@@ -3,6 +3,7 @@ import { ColorSchemeOptions } from "../color-scheme/use-handle-color-scheme";
 import { IconName } from "../icon/types";
 export declare type UiContextType = {
     colorScheme: ColorSchemeOptions;
+    domain: string;
     icon: {
         spriteFilePath: string;
         iconsConfig: Record<IconName, {

package/css/combobox.css

@@ -92,16 +92,23 @@
         &,
         &:hover,
         &:focus {
-            margin: 1px 0;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            transition: background-color 5000s ease-in-out 0s !important;
 
             :root .dark & {
+                -webkit-text-fill-color: theme("colors.gray.300");
                 -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                background-color: theme("colors.gray.800");
                 caret-color: white;
-                -webkit-text-fill-color: theme("colors.gray.300");
             }
 
             :root .light & {
-                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.100");
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.white");
+                box-shadow: inset 0 0 0 1000px theme("colors.white");
+                background-color: theme("colors.white");
             }
         }
     }

package/css/dropzone.css

@@ -67,6 +67,10 @@
                 @apply truncate;
             }
 
+            &__file-name-link {
+                @apply truncate hover:underline hover:underline-offset-2;
+            }
+
             &__file-size {
                 @apply whitespace-nowrap shrink-0;
             }

package/css/file-input.css

@@ -71,6 +71,10 @@
             &__file-name {
                 @apply truncate;
             }
+
+            &__file-name-link {
+                @apply truncate hover:underline hover:underline-offset-2;
+            }
         }
     }
 }

package/css/input.css

@@ -217,16 +217,23 @@
         &,
         &:hover,
         &:focus {
-            margin: 1px 0;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            transition: background-color 5000s ease-in-out 0s !important;
 
             :root .dark & {
+                -webkit-text-fill-color: theme("colors.gray.300");
                 -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                background-color: theme("colors.gray.800");
                 caret-color: white;
-                -webkit-text-fill-color: theme("colors.gray.300");
             }
 
             :root .light & {
                 -webkit-box-shadow: inset 0 0 0 1000px theme("colors.white");
+                box-shadow: inset 0 0 0 1000px theme("colors.white");
+                background-color: theme("colors.white");
             }
         }
     }

package/css/textarea.css

@@ -101,16 +101,23 @@
         &,
         &:hover,
         &:focus {
-            margin: 1px 0;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            transition: background-color 5000s ease-in-out 0s !important;
 
             :root .dark & {
+                -webkit-text-fill-color: theme("colors.gray.300");
                 -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                background-color: theme("colors.gray.800");
                 caret-color: white;
-                -webkit-text-fill-color: theme("colors.gray.300");
             }
 
             :root .light & {
-                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.100");
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.white");
+                box-shadow: inset 0 0 0 1000px theme("colors.white");
+                background-color: theme("colors.white");
             }
         }
     }

package/dropzone/dropzone-list.d.ts

@@ -1,5 +1,5 @@
+import { FormControlProps } from "@uxf/ui/types";
 import { FC, ReactNode } from "react";
-import { FormControlProps } from "../types";
 import { DropzoneFile } from "./types";
 export interface DropzoneListProps extends FormControlProps<DropzoneFile[]> {
     errorText?: string;

package/dropzone/dropzone-list.js

@@ -1,14 +1,36 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropzoneList = void 0;
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
-const react_1 = __importDefault(require("react"));
-const icon_1 = require("../icon");
-const loader_1 = require("../loader/loader");
+const context_1 = require("@uxf/ui/context");
+const icon_1 = require("@uxf/ui/icon");
+const loader_1 = require("@uxf/ui/loader/loader");
+const get_file_url_1 = require("@uxf/ui/utils/files/get-file-url");
+const react_1 = __importStar(require("react"));
 function formatBytes(bytes, decimals = 2) {
     const k = 1024;
     const dm = decimals < 0 ? 0 : decimals;
@@ -32,6 +54,7 @@ function getIconName(extension) {
     }
 }
 const DropzoneList = (props) => {
+    const context = (0, react_1.useContext)(context_1.UiContext);
     const onRemove = (file, isUploading) => () => {
         var _a, _b, _c;
         // eslint-disable-next-line no-alert
@@ -55,7 +78,7 @@ const DropzoneList = (props) => {
             react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-dropzone-list__item", !!file.error && classes_1.CLASSES.IS_INVALID) },
                 react_1.default.createElement("div", { className: "uxf-dropzone-list__item__block" },
                     react_1.default.createElement(icon_1.Icon, { className: "uxf-dropzone-list__item__block__icon", name: getIconName(file.extension) }),
-                    react_1.default.createElement("span", { className: "uxf-dropzone-list__item__block__file-name" }, file.name)),
+                    (context === null || context === void 0 ? void 0 : context.domain) && file.id > 0 ? (react_1.default.createElement("a", { className: "uxf-dropzone-list__item__block__file-name-link", href: (0, get_file_url_1.getFileUrl)(context.domain, file), target: "_blank", rel: "noreferrer noopenner" }, file.name)) : (react_1.default.createElement("span", { className: "uxf-dropzone-list__item__block__file-name" }, file.name))),
                 react_1.default.createElement("div", { className: "uxf-dropzone-list__item__block" },
                     isUploading ? (react_1.default.createElement(loader_1.Loader, { size: "sm" })) : (!file.error &&
                         ((_c = file.originalFile) === null || _c === void 0 ? void 0 : _c.size) && (react_1.default.createElement("span", { className: "uxf-dropzone-list__item__block__file-size" }, formatBytes(file.originalFile.size)))),

package/dropzone/dropzone.stories.js

@@ -30,6 +30,8 @@ exports.ComponentStructure = exports.Default = void 0;
 const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
 const uploadFIle_mock_1 = require("@uxf/ui/utils/mocks/uploadFIle.mock");
 const react_1 = __importStar(require("react"));
+const get_provider_config_1 = require("../_private-utils/get-provider-config");
+const context_1 = require("../context");
 const index_1 = require("./index");
 exports.default = {
     title: "UI/Dropzone",
@@ -46,9 +48,10 @@ function Default() {
         react_1.default.createElement(index_1.Dropzone.List, { errorText: "Chyba p\u0159i nahr\u00E1v\u00E1n\u00ED souboru", onAbortWarning: "Opravdu chcete p\u0159eru\u0161it nahr\u00E1v\u00E1n\u00ED?", onChange: setFiles, onRemoveWarning: "Opravdu chcete soubor smazat?", value: files }),
         react_1.default.createElement(index_1.Dropzone.List, { onChange: setFiles, value: files, renderItem: (file) => (react_1.default.createElement("li", { key: file.id },
                 react_1.default.createElement("pre", null, JSON.stringify(file, null, 4)))) })));
-    return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-        react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyDropzone),
-        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyDropzone)));
+    return (react_1.default.createElement(context_1.UiContextProvider, { value: (0, get_provider_config_1.getProviderConfig)() },
+        react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
+            react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyDropzone),
+            react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyDropzone))));
 }
 exports.Default = Default;
 function ComponentStructure() {

package/file-input/file-input.js

@@ -28,20 +28,24 @@ const classes_1 = require("@uxf/core/constants/classes");
 const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
 const cx_1 = require("@uxf/core/utils/cx");
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const context_1 = require("@uxf/ui/context");
 const form_control_1 = require("@uxf/ui/form-control");
 const input_1 = require("@uxf/ui/input");
 const loader_1 = require("@uxf/ui/loader/loader");
+const get_file_url_1 = require("@uxf/ui/utils/files/get-file-url");
 const react_1 = __importStar(require("react"));
 const file_input_base_1 = require("./file-input-base");
 // eslint-disable-next-line complexity
 exports.FileInput = (0, forwardRef_1.forwardRef)("FileInput", (props, ref) => {
     var _a, _b;
+    const context = (0, react_1.useContext)(context_1.UiContext);
     const [isUploading, setIsUploading] = (0, react_1.useState)(false);
     const generatedId = (0, react_1.useId)();
     const id = props.id || generatedId;
     const innerRef = (0, react_1.useRef)(null);
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const errorId = props.isInvalid && props.id ? `${props.id}--errormessage` : undefined;
+    const fileName = props.value ? `${props.value.name}` : props.placeholder || "No file has been selected yet";
     const onChange = async (_, e) => {
         var _a, _b, _c;
         const file = (_a = e === null || e === void 0 ? void 0 : e.target.files) === null || _a === void 0 ? void 0 : _a[0];
@@ -66,6 +70,6 @@ exports.FileInput = (0, forwardRef_1.forwardRef)("FileInput", (props, ref) => {
             react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-input", "uxf-file-input__label", input.focused && classes_1.CLASSES.IS_FOCUSED, (props.isDisabled || props.isReadOnly) && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, isUploading && classes_1.CLASSES.IS_LOADING, isUploading && "uxf-file-input__label--has-right-addon", `uxf-input--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-input--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), htmlFor: id },
                 react_1.default.createElement("div", { className: "uxf-input__left-addon uxf-file-input__label__button" }, !isUploading ? ("Vyberte soubor") : (react_1.default.createElement(loader_1.Loader, { className: "uxf-file-input__label__loader", size: "sm" }))),
                 react_1.default.createElement("div", { className: "uxf-file-input__label__wrapper" },
-                    react_1.default.createElement("span", { className: "uxf-file-input__label__wrapper__file-name" }, props.value ? `${props.value.name}` : props.placeholder || "No file has been selected yet"),
+                    (context === null || context === void 0 ? void 0 : context.domain) && props.value ? (react_1.default.createElement("a", { className: "uxf-file-input__label__wrapper__file-name-link", href: (0, get_file_url_1.getFileUrl)(context.domain, props.value), target: "_blank", rel: "noreferrer noopenner" }, fileName)) : (react_1.default.createElement("span", { className: "uxf-file-input__label__wrapper__file-name" }, fileName)),
                     props.value && !props.isDisabled && !props.isReadOnly && props.isClearable && (react_1.default.createElement(input_1.Input.RemoveButton, { onChange: props.onChange })))))));
 });

package/package.json

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

package/utils/files/get-file-url.d.ts

@@ -0,0 +1,2 @@
+import { FileResponse } from "@uxf/ui/types";
+export declare function getFileUrl(domain: string, file: FileResponse): string;

package/utils/files/get-file-url.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFileUrl = void 0;
+function getFileUrl(domain, file) {
+    return `${domain}/upload/${file.namespace || "default"}/${file.uuid[0]}/${file.uuid[1]}/${file.uuid}.${file.extension}`;
+}
+exports.getFileUrl = getFileUrl;