@uxf/ui 1.0.0-beta.8 → 1.0.0-beta.80

package/combobox/combobox.stories.js

@@ -0,0 +1,67 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentStructure = exports.Default = void 0;
+const react_1 = __importStar(require("react"));
+const index_1 = require("./index");
+const component_structure_analyzer_1 = __importDefault(require("../utils/component-structure-analyzer"));
+exports.default = {
+    title: "UI/Combobox",
+    component: index_1.Combobox,
+};
+const options = [
+    { id: "one", label: "Option one escr" },
+    { id: "two", label: "Option two ěščř" },
+    { id: "three", label: "Option three" },
+];
+function Default() {
+    const [value, setValue] = (0, react_1.useState)();
+    const handleChange = (v) => {
+        // eslint-disable-next-line no-console
+        console.log("Select value: ", v);
+        setValue(v);
+    };
+    const storyComboboxes = (react_1.default.createElement("div", { className: "space-y-8" },
+        react_1.default.createElement(index_1.Combobox, { id: "combobox-1", label: "Combobox", name: "combobox", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
+        react_1.default.createElement(index_1.Combobox, { helperText: "Start typing to see options...", id: "combobox-1", label: "Combobox with helper text", name: "combobox", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
+        react_1.default.createElement(index_1.Combobox, { helperText: "Error message", id: "combobox-1", isInvalid: true, isRequired: true, label: "Combobox invalid", name: "combobox", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
+        react_1.default.createElement(index_1.Combobox, { dropdownPlacement: "top", id: "combobox-1", label: "Combobox with dropdown top", name: "combobox", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value })));
+    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" }, storyComboboxes),
+        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyComboboxes)));
+}
+exports.Default = Default;
+function ComponentStructure() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    const handleChange = (v) => {
+        setValue(v);
+    };
+    return (react_1.default.createElement(component_structure_analyzer_1.default, null,
+        react_1.default.createElement(index_1.Combobox, { id: "combobox-structure", name: "combobox", label: "Combobox with helper text", options: options, onChange: handleChange, value: value, helperText: "Start typing to see options..." })));
+}
+exports.ComponentStructure = ComponentStructure;

package/combobox/index.d.ts

@@ -0,0 +1 @@
+export * from "./combobox";

package/combobox/index.js

@@ -0,0 +1,17 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./combobox"), exports);

package/config/icons-config.d.ts

@@ -0,0 +1,2 @@
+export declare const ICONS_VERSION = "1668632602549";
+export declare const ICON_SPRITE = "/.storybook/static-assets/icons-generated/_icon-sprite.svg";

package/config/icons-config.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICON_SPRITE = exports.ICONS_VERSION = void 0;
+exports.ICONS_VERSION = "1668632602549";
+exports.ICON_SPRITE = "/.storybook/static-assets/icons-generated/_icon-sprite.svg";

package/config/icons.d.ts

@@ -0,0 +1,77 @@
+export declare const ICONS: {
+    readonly calendar: {
+        readonly w: 448;
+        readonly h: 512;
+    };
+    readonly camera: {
+        readonly w: 512;
+        readonly h: 512;
+    };
+    readonly caretDown: {
+        readonly w: 320;
+        readonly h: 512;
+    };
+    readonly clock: {
+        readonly w: 512;
+        readonly h: 512;
+    };
+    readonly bars: {
+        readonly w: 448;
+        readonly h: 512;
+    };
+    readonly check: {
+        readonly w: 512;
+        readonly h: 512;
+    };
+    readonly chevronDown: {
+        readonly w: 512;
+        readonly h: 512;
+    };
+    readonly chevronLeft: {
+        readonly w: 384;
+        readonly h: 512;
+    };
+    readonly chevronsLeft: {
+        readonly w: 512;
+        readonly h: 512;
+    };
+    readonly chevronRight: {
+        readonly w: 384;
+        readonly h: 512;
+    };
+    readonly chevronsRight: {
+        readonly w: 512;
+        readonly h: 512;
+    };
+    readonly chevronUp: {
+        readonly w: 512;
+        readonly h: 512;
+    };
+    readonly user: {
+        readonly w: 448;
+        readonly h: 512;
+    };
+    readonly xmarkLarge: {
+        readonly w: 448;
+        readonly h: 512;
+    };
+};
+export declare type IconsType = keyof typeof ICONS;
+declare module "@uxf/ui/icon/theme" {
+    interface IconsSet {
+        calendar: true;
+        camera: true;
+        caretDown: true;
+        clock: true;
+        bars: true;
+        check: true;
+        chevronDown: true;
+        chevronLeft: true;
+        chevronsLeft: true;
+        chevronRight: true;
+        chevronsRight: true;
+        chevronUp: true;
+        user: true;
+        xmarkLarge: true;
+    }
+}

package/config/icons.js

@@ -0,0 +1,20 @@
+"use strict";
+// this file is generated automatically, do not change anything manually in the contents of this file
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICONS = void 0;
+exports.ICONS = {
+    calendar: { w: 448, h: 512 },
+    camera: { w: 512, h: 512 },
+    caretDown: { w: 320, h: 512 },
+    clock: { w: 512, h: 512 },
+    bars: { w: 448, h: 512 },
+    check: { w: 512, h: 512 },
+    chevronDown: { w: 512, h: 512 },
+    chevronLeft: { w: 384, h: 512 },
+    chevronsLeft: { w: 512, h: 512 },
+    chevronRight: { w: 384, h: 512 },
+    chevronsRight: { w: 512, h: 512 },
+    chevronUp: { w: 512, h: 512 },
+    user: { w: 448, h: 512 },
+    xmarkLarge: { w: 448, h: 512 },
+};

package/content/content-schema.d.ts

@@ -0,0 +1,3 @@
+export interface ContentSchema {
+    wysiwyg: any;
+}

package/content/content-schema.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/content/types.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode, FC } from "react";
+import { ContentSchema } from "@uxf/ui/content/content-schema";
+import { UseControllerProps } from "react-hook-form";
+export declare type ContentType = keyof ContentSchema;
+interface ContentFormProps<TYPE extends ContentType> extends UseControllerProps<ContentSchema[TYPE]> {
+    type: TYPE;
+    index: number;
+    onRemove: () => void;
+    TypeInputProps: any;
+}
+export declare type ContentFormComponent<TYPE extends ContentType> = FC<ContentFormProps<TYPE>> & {
+    getConfig: () => {
+        type: TYPE;
+        label: ReactNode;
+    };
+};
+interface ContentRendererProps<TYPE extends ContentType> {
+    type: TYPE;
+    data: ContentSchema[TYPE];
+    index: number;
+}
+export declare type ContentRendererComponent<TYPE extends ContentType> = FC<ContentRendererProps<TYPE>> & {
+    getConfig: () => {
+        type: TYPE;
+    };
+};
+export {};

package/content/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/context/context.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { IconName } from "../icon/types";
+export declare type UiContextType = {
+    icon: {
+        spriteFilePath: string;
+        iconsConfig: Record<IconName, {
+            w: number;
+            h: number;
+        }>;
+    };
+};
+export declare const UiContext: import("react").Context<UiContextType | undefined>;

package/context/context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UiContext = void 0;
+const react_1 = require("react");
+exports.UiContext = (0, react_1.createContext)(undefined);

package/context/index.d.ts

@@ -0,0 +1,3 @@
+export * from "@uxf/ui/context/context";
+export * from "@uxf/ui/context/provider";
+export * from "@uxf/ui/context/use-component-context";

package/context/index.js

@@ -0,0 +1,19 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("@uxf/ui/context/context"), exports);
+__exportStar(require("@uxf/ui/context/provider"), exports);
+__exportStar(require("@uxf/ui/context/use-component-context"), exports);

package/context/provider.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from "react";
+import { UiContextType } from "./context";
+declare type UiContextProviderProps = {
+    value: UiContextType;
+    children: ReactNode;
+};
+export declare const UiContextProvider: FC<UiContextProviderProps>;
+export {};

package/context/provider.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UiContextProvider = void 0;
+const react_1 = __importDefault(require("react"));
+const context_1 = require("./context");
+const UiContextProvider = (props) => (react_1.default.createElement(context_1.UiContext.Provider, { value: props.value }, props.children));
+exports.UiContextProvider = UiContextProvider;

package/context/use-component-context.d.ts

@@ -0,0 +1,3 @@
+import { UiContextType } from "./context";
+export declare type UiContextComponent = keyof UiContextType;
+export declare const useComponentContext: <T extends "icon">(componentName: T) => UiContextType[T];

package/context/use-component-context.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComponentContext = void 0;
+const react_1 = require("react");
+const context_1 = require("./context");
+const useComponentContext = (componentName) => {
+    const context = (0, react_1.useContext)(context_1.UiContext);
+    if (typeof context === "undefined") {
+        throw new Error(`If you want to use the "${componentName}" UI component, you have to wrap your code in the "UiContextProvider"`);
+    }
+    return context[componentName];
+};
+exports.useComponentContext = useComponentContext;

package/css/avatar-file-input.css

@@ -0,0 +1,7 @@
+.uxf-avatar-file-input {
+    @apply overflow-hidden relative mx-auto h-24 w-24 rounded-full bg-gray-300 text-gray-300 transition
+        before:absolute before:inset-0 before:border before:border-dashed before:border-current before:rounded-full
+        hover:before:border-2 is-focused:text-gray-800 is-focused:bg-white
+        is-disabled:opacity-50 is-disabled:pointer-events-none is-readonly:pointer-events-none
+        is-invalid:text-red-600 is-invalid:is-focused:ring-red-300;
+}

package/css/avatar.css

@@ -0,0 +1,15 @@
+.uxf-avatar {
+    @apply relative inline-flex items-center justify-center h-10 w-10 rounded-full;
+
+    &__image {
+        @apply absolute left-0 top-0 block h-full w-full rounded-inherit object-cover;
+    }
+
+    :root .light & {
+        @apply text-gray-700 bg-gray-200;
+    }
+
+    :root .dark & {
+        @apply text-gray-200 bg-gray-800;
+    }
+}

package/css/badge.css

@@ -0,0 +1,23 @@
+.uxf-badge {
+    @apply inline-flex items-center justify-center font-bold;
+
+    &--size-small {
+        @apply h-6 min-w-[24px] text-sm rounded-[12px] px-1.5;
+    }
+
+    &--size-medium {
+        @apply h-8 min-w-[32px] text-base rounded-[16px] px-2;
+    }
+
+    &--size-large {
+        @apply h-10 min-w-[40px] text-lg rounded-[20px] px-2;
+    }
+
+    :root .light & {
+        @apply text-white bg-primary-500;
+    }
+
+    :root .dark & {
+        @apply text-gray-900 bg-white;
+    }
+}

package/css/button.css

@@ -0,0 +1,231 @@
+@keyframes spinner {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.uxf-button {
+    @apply inline-flex items-center justify-center text-center rounded-lg before:rounded-lg font-semibold
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 relative cursor-pointer transition
+        before:transition;
+
+    &__text {
+        @apply truncate;
+    }
+
+    &--full-width {
+        @apply w-full flex flex-row justify-center;
+    }
+
+    &.is-disabled {
+        @apply pointer-events-none;
+    }
+
+    &.is-loading {
+        @apply pointer-events-none;
+
+        &::after {
+            animation: spinner 0.8s linear infinite;
+            border-radius: 50%;
+            border-right: 2px solid transparent;
+            border-top: 2px solid;
+            content: "";
+            height: 20px;
+            margin-left: 8px;
+            width: 20px;
+        }
+    }
+
+    &--size-xs {
+        @apply px-2.5 py-1.5 text-xs;
+
+        &.is-loading::after {
+            height: 14px;
+            width: 14px;
+        }
+
+        &.uxf-button--icon-button {
+            @apply p-0 h-7 w-7;
+        }
+    }
+
+    &--size-sm {
+        @apply px-3 py-2 text-sm leading-4;
+
+        &.is-loading::after {
+            height: 16px;
+            width: 16px;
+        }
+
+        &.uxf-button--icon-button {
+            @apply p-0 h-8 w-8;
+        }
+    }
+
+    &--size-default {
+        @apply px-4 py-3 text-base;
+
+        &.uxf-button--icon-button {
+            @apply p-0 h-12 w-12;
+        }
+    }
+
+    &--size-lg {
+        @apply px-8 py-5 text-base;
+
+        &.uxf-button--icon-button {
+            @apply p-0 h-16 w-16;
+        }
+    }
+
+    &--size-xl {
+        @apply px-10 py-6 text-base;
+
+        &.uxf-button--icon-button {
+            @apply p-0 h-[72px] w-[72px];
+        }
+    }
+
+    &--variant-outlined {
+        @apply before:absolute before:pointer-events-none before:inset-0 before:border is-hoverable:before:border-2
+            bg-transparent;
+
+        :root .light & {
+            @apply before:border-gray-300 is-hoverable:bg-primary-100 is-hoverable:before:border-primary-400
+                focus-visible:ring-primary-500 focus-visible:ring-offset-white;
+
+            &.is-disabled {
+                @apply before:border-gray-100 text-gray-400;
+            }
+        }
+
+        :root .dark & {
+            @apply before:border-gray-300 is-hoverable:bg-white/10 focus-visible:ring-primary-500
+                focus-visible:ring-offset-gray-900;
+
+            &.is-disabled {
+                @apply before:border-gray-700 text-gray-600;
+            }
+        }
+    }
+
+    &--variant-default {
+        @apply text-white;
+
+        &.uxf-button--color-default {
+            :root .light & {
+                @apply text-white bg-primary-500 is-hoverable:bg-primary-400 focus-visible:ring-primary-500;
+
+                &.is-disabled {
+                    @apply bg-gray-100 text-gray-400;
+                }
+            }
+
+            :root .dark & {
+                @apply text-white bg-primary-500 is-hoverable:bg-primary-400 focus-visible:ring-primary-500
+                    focus-visible:ring-offset-gray-900;
+
+                &.is-disabled {
+                    @apply bg-gray-700 text-gray-400;
+                }
+            }
+        }
+
+        &.uxf-button--color-white {
+            :root .light & {
+                @apply bg-white is-hoverable:bg-gray-200 focus-visible:ring-gray-200;
+
+                &.is-disabled {
+                    @apply bg-gray-100 text-gray-400;
+                }
+            }
+
+            :root .dark & {
+                @apply bg-white is-hoverable:bg-gray-200 focus-visible:ring-gray-200;
+
+                &.is-disabled {
+                    @apply bg-gray-100 text-gray-400;
+                }
+            }
+
+            @apply bg-gray-50 text-gray-700 is-hoverable:bg-gray-100 focus-visible:ring-gray-500;
+        }
+
+        &.uxf-button--color-success {
+            :root .light & {
+                @apply text-white bg-success-500 is-hoverable:bg-success-400 focus-visible:ring-success-500;
+
+                &.is-disabled {
+                    @apply bg-gray-100 text-gray-400;
+                }
+            }
+
+            :root .dark & {
+                @apply text-white bg-success-500 is-hoverable:bg-success-400 focus-visible:ring-success-500
+                    focus-visible:ring-offset-gray-900;
+
+                &.is-disabled {
+                    @apply bg-gray-700 text-gray-400;
+                }
+            }
+        }
+
+        &.uxf-button--color-warning {
+            :root .light & {
+                @apply text-white bg-warning-500 is-hoverable:bg-warning-400 focus-visible:ring-warning-500;
+
+                &.is-disabled {
+                    @apply bg-gray-100 text-gray-400;
+                }
+            }
+
+            :root .dark & {
+                @apply text-white bg-warning-500 is-hoverable:bg-warning-400 focus-visible:ring-warning-500
+                    focus-visible:ring-offset-gray-900;
+
+                &.is-disabled {
+                    @apply bg-gray-700 text-gray-400;
+                }
+            }
+        }
+
+        &.uxf-button--color-error {
+            :root .light & {
+                @apply text-white bg-error-500 is-hoverable:bg-error-400 focus-visible:ring-error-500;
+
+                &.is-disabled {
+                    @apply bg-gray-100 text-gray-400;
+                }
+            }
+
+            :root .dark & {
+                @apply text-white bg-error-500 is-hoverable:bg-error-400 focus-visible:ring-error-500
+                    focus-visible:ring-offset-gray-900;
+
+                &.is-disabled {
+                    @apply bg-gray-700 text-gray-400;
+                }
+            }
+        }
+    }
+
+    &--variant-text {
+        @apply before:border-transparent;
+
+        :root .light & {
+            @apply is-hoverable:bg-gray-200 focus-visible:ring-primary-500 focus-visible:ring-offset-white;
+
+            &.is-disabled {
+                @apply text-gray-400;
+            }
+        }
+
+        :root .dark & {
+            @apply is-hoverable:bg-gray-800 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
+
+            &.is-disabled {
+                @apply text-gray-600;
+            }
+        }
+    }
+}