@uxf/ui 1.0.0-beta.87 → 1.0.0-beta.89

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

@@ -2,7 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getProviderConfig = void 0;
 const icons_1 = require("../config/icons");
+const tw_screens_1 = require("../tw-tokens/tw-screens");
 const getProviderConfig = () => ({
     icon: { spriteFilePath: "/icons-generated/_icon-sprite.svg", iconsConfig: icons_1.ICONS },
+    rasterImage: {
+        breakpoints: tw_screens_1.twScreens,
+    },
 });
 exports.getProviderConfig = getProviderConfig;

package/config/icons-config.d.ts

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

package/config/icons-config.js

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

package/config/icons.d.ts

@@ -59,19 +59,19 @@ export declare const ICONS: {
 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;
+        "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

@@ -3,18 +3,18 @@
 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 },
+    "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/context/context.d.ts

@@ -8,5 +8,8 @@ export declare type UiContextType = {
             h: number;
         }>;
     };
+    rasterImage: {
+        breakpoints: Record<string, string>;
+    };
 };
 export declare const UiContext: import("react").Context<UiContextType | undefined>;

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

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

package/css/raster-image.css

@@ -1,6 +1,11 @@
 .uxf-raster-image {
     @apply block w-full;
 
+    &--contain,
+    &--cover {
+        @apply relative;
+    }
+
     &__img {
         @apply block w-full h-auto;
 

package/image-gallery/components/gallery.js

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const image_1 = require("../../utils/image");
 const close_button_1 = __importDefault(require("./close-button"));
 const previous_button_1 = __importDefault(require("./previous-button"));
 const next_button_1 = __importDefault(require("./next-button"));
@@ -66,6 +67,6 @@ function Gallery(props) {
                 react_1.default.createElement("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-between p-2" },
                     react_1.default.createElement(previous_button_1.default, { onClick: props.onPrevious }),
                     react_1.default.createElement(next_button_1.default, { onClick: props.onNext })))),
-        react_1.default.createElement("div", { className: "row mx-auto flex space-x-2 p-4" }, props.images.map((image, index) => (react_1.default.createElement(dot_1.default, { key: typeof image.src === "string" ? image.src : image.src.uuid, active: index === props.imageIndex }))))));
+        react_1.default.createElement("div", { className: "row mx-auto flex space-x-2 p-4" }, props.images.map((image, index) => (react_1.default.createElement(dot_1.default, { key: (0, image_1.getImgUniqueIdentifier)(image.src) || index, active: index === props.imageIndex }))))));
 }
 exports.default = Gallery;

package/image-gallery/image-gallery.stories.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 const react_1 = __importDefault(require("react"));
+const image_1 = require("../utils/image");
+const image_2 = __importDefault(require("./image"));
 const image_gallery_1 = __importDefault(require("./image-gallery"));
-const image_1 = __importDefault(require("./image"));
 exports.default = {
     title: "Lab/ImageGallery",
     component: image_gallery_1.default,
@@ -21,6 +22,6 @@ const images = [
 ];
 function Default() {
     return (react_1.default.createElement(image_gallery_1.default, null,
-        react_1.default.createElement("div", { className: "flex-direction flex gap-2" }, images.map((src) => (react_1.default.createElement(image_1.default, { key: typeof src === "string" ? src : src.uuid, src: src, className: "h-56 w-56 cursor-pointer object-cover transition-transform hover:scale-105" }))))));
+        react_1.default.createElement("div", { className: "flex-direction flex gap-2" }, images.map((src, index) => (react_1.default.createElement(image_2.default, { key: (0, image_1.getImgUniqueIdentifier)(src) || index, src: src, className: "h-56 w-56 cursor-pointer object-cover transition-transform hover:scale-105" }))))));
 }
 exports.Default = Default;

package/image-gallery/types.d.ts

@@ -1,6 +1,6 @@
-import { FileResponse } from "../utils/image";
+import { ImageSource } from "@uxf/core/utils/resizer";
 export interface ImageGalleryImageProps {
-    src: string | FileResponse;
+    src: ImageSource;
     title?: string;
     alt?: string;
     className?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.87",
+  "version": "1.0.0-beta.89",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,15 +13,16 @@
   "author": "UX Fans s.r.o",
   "license": "MIT",
   "dependencies": {
-    "@floating-ui/react-dom": "^1.0.0",
-    "@headlessui/react": "^1.7.2",
-    "@uxf/core": "^3.1.0",
-    "@uxf/styles": "^2.0.1",
-    "dayjs": "^1.11.6",
+    "@floating-ui/react-dom": "^1.1.0",
+    "@headlessui/react": "^1.7.7",
+    "@uxf/core": "^4.1.2",
+    "@uxf/datepicker": "^1.2.0",
+    "@uxf/styles": "^2.1.1",
+    "dayjs": "^1.11.7",
     "jump.js": "^1.0.2"
   },
   "devDependencies": {
     "@types/jump.js": "^1.0.4",
-    "@uxf/icons-generator": "^1.2.1"
+    "@uxf/icons-generator": "^1.3.0"
   }
 }

package/raster-image/raster-image.d.ts

@@ -1,16 +1,30 @@
-import { FC, ImgHTMLAttributes } from "react";
-import { FileResponse } from "../utils/image";
+import { ImageSource, ResizerImageProps } from "@uxf/core/utils/resizer";
+import { FC, ImgHTMLAttributes, ReactNode } from "react";
+import { Quality } from "../utils/image";
 declare type ImgProps = ImgHTMLAttributes<HTMLImageElement>;
-export interface RasterImageProps {
+declare type Props = {
     alt: string;
+    breakpoints?: Record<string, string>;
     className?: string;
-    height: number;
+    heights?: number[];
     imgClassName?: string;
     loading?: ImgProps["loading"];
     mode?: "contain" | "cover" | "responsive";
+    noImageContent?: ReactNode;
+    options?: Omit<ResizerImageProps, "quality" | "toFormat">;
+    quality?: Quality;
     role?: ImgProps["role"];
-    src?: FileResponse | null;
+    src: ImageSource | null | undefined;
+    widths?: number[];
+} & ({
+    width: number;
+    height: number;
+} | {
+    width?: never;
+    height: number;
+} | {
     width: number;
-}
-export declare const RasterImage: FC<RasterImageProps>;
+    height?: never;
+});
+export declare const RasterImage: FC<Props>;
 export {};

package/raster-image/raster-image.js

@@ -7,15 +7,29 @@ exports.RasterImage = void 0;
 const cx_1 = require("@uxf/core/utils/cx");
 const resizer_1 = require("@uxf/core/utils/resizer");
 const react_1 = __importDefault(require("react"));
+const context_1 = require("../context");
 const image_1 = require("../utils/image");
 const RasterImage = (props) => {
-    var _a, _b;
-    // eslint-disable-next-line react/destructuring-assignment
-    const { alt, className, height, imgClassName, loading = "lazy", mode = "responsive", src, width, ...restProps } = props;
-    const Element = src ? "picture" : "div";
-    return (react_1.default.createElement(Element, { className: `uxf-raster-image ${className || ""}` }, src ? (react_1.default.createElement(react_1.default.Fragment, null,
-        (0, image_1.getImgSources)(src, width, height),
-        react_1.default.createElement("img", { alt: alt, className: (0, cx_1.cx)("uxf-raster-image__img", mode === "contain" && "uxf-raster-image__img--contain", mode === "cover" && "uxf-raster-image__img--cover", imgClassName), loading: loading, src: (_a = (0, resizer_1.resizerImageUrl)(src, width, height, {})) !== null && _a !== void 0 ? _a : undefined, srcSet: (_b = (0, image_1.getImgSrcSet)(src, width, height)) !== null && _b !== void 0 ? _b : undefined, ...restProps }))) : null));
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const componentContext = (0, context_1.useComponentContext)("rasterImage");
+    const className = [
+        props.mode === "contain" && "uxf-raster-image--contain",
+        props.mode === "cover" && "uxf-raster-image--cover",
+        props.className,
+    ];
+    const breakpoints = ["0em", ...Object.values((_a = props.breakpoints) !== null && _a !== void 0 ? _a : componentContext.breakpoints)];
+    const resizerSrc = (0, resizer_1.resizerImageUrl)(props.src, (_b = props.width) !== null && _b !== void 0 ? _b : "auto", (_c = props.height) !== null && _c !== void 0 ? _c : "auto", {
+        ...((_d = props.options) !== null && _d !== void 0 ? _d : {}),
+        quality: (0, image_1.getImgQuality)(props.quality, "original"),
+    });
+    if (!resizerSrc) {
+        return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-raster-image uxf-raster-image--no-image", ...className) }, props.noImageContent));
+    }
+    return (react_1.default.createElement("picture", { className: (0, cx_1.cx)("uxf-raster-image", ...className) }, (_f = (_e = props.widths) === null || _e === void 0 ? void 0 : _e.map((w, i) => i < breakpoints.length && (react_1.default.createElement(image_1.ImgSources, { breakpointIndex: i, breakpoints: breakpoints, height: props.heights && props.heights[i]
+            ? props.heights[i]
+            : props.width && props.height
+                ? Math.ceil((props.height / props.width) * w)
+                : "auto", key: w, options: props.options, quality: props.quality, src: props.src, width: w }))).reverse()) !== null && _f !== void 0 ? _f : (react_1.default.createElement(image_1.ImgSources, { height: (_g = props.height) !== null && _g !== void 0 ? _g : "auto", options: props.options, quality: props.quality, src: props.src, width: (_h = props.width) !== null && _h !== void 0 ? _h : "auto" })),
+        react_1.default.createElement("img", { alt: props.alt, className: (0, cx_1.cx)("uxf-raster-image__img", props.mode === "contain" && "uxf-raster-image__img--contain", props.mode === "cover" && "uxf-raster-image__img--cover", props.imgClassName), height: props.height, loading: props.loading, src: resizerSrc, width: props.width })));
 };
 exports.RasterImage = RasterImage;
-exports.RasterImage.displayName = "RasterImage";

package/raster-image/raster-image.stories.d.ts

@@ -1,7 +1,30 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: React.FC<import("./raster-image").RasterImageProps>;
+    component: React.FC<{
+        alt: string;
+        breakpoints?: Record<string, string> | undefined;
+        className?: string | undefined;
+        heights?: number[] | undefined;
+        imgClassName?: string | undefined;
+        loading?: "eager" | "lazy" | undefined;
+        mode?: "contain" | "cover" | "responsive" | undefined;
+        noImageContent?: React.ReactNode;
+        options?: Omit<import("@uxf/core/utils/resizer").ResizerImageProps, "quality" | "toFormat"> | undefined;
+        quality?: import("../utils/image").Quality | undefined;
+        role?: React.AriaRole | undefined;
+        src: import("@uxf/core/utils/resizer").ImageSource | null | undefined;
+        widths?: number[] | undefined;
+    } & ({
+        width: number;
+        height: number;
+    } | {
+        width?: undefined;
+        height: number;
+    } | {
+        width: number;
+        height?: undefined;
+    })>;
 };
 export default _default;
 export declare function Default(): JSX.Element;

package/raster-image/raster-image.stories.js

@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
-const index_1 = require("./index");
 const react_1 = __importDefault(require("react"));
+const index_1 = require("./index");
 exports.default = {
     title: "UI/RasterImage",
     component: index_1.RasterImage,
 };
 function Default() {
     return (react_1.default.createElement("div", { className: "space-y-2" },
-        react_1.default.createElement(index_1.RasterImage, { alt: "Alt text", height: 100, width: 300, mode: "cover" })));
+        react_1.default.createElement(index_1.RasterImage, { alt: "Alt text", height: 100, width: 300, mode: "cover", src: undefined })));
 }
 exports.Default = Default;

package/scripts/generate-tw-tokens.js

@@ -0,0 +1,94 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const resolveConfig = require("tailwindcss/resolveConfig");
+const prettier = require("prettier");
+const path = require("path");
+
+function camelToSnakeCase(str) {
+    return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+
+function capitalizeFirstLetter(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+function resolveProperty(property, theme) {
+    const entry = theme[property];
+
+    if (typeof entry === "undefined") {
+        return;
+    }
+
+    const propertyValue = JSON.stringify(entry);
+    const propertyKey = capitalizeFirstLetter(property);
+
+    return `
+// this file is generated automatically, do not change anything manually in the contents of this file
+
+export const tw${propertyKey} = ${propertyValue};
+
+export type Tw${propertyKey} = typeof tw${propertyKey};
+`;
+}
+
+const TW_TOKENS = [
+    "boxShadow",
+    "colors",
+    "containers",
+    "fontSize",
+    "fontWeight",
+    "letterSpacings",
+    "lineHeight",
+    "screens",
+    "spacing",
+    "zIndex",
+];
+
+let error = false;
+
+try {
+    const mode = process.argv.filter((c) => c.includes("--mode="))[0]?.split("=")[1];
+    const twConfig = process.argv.filter((c) => c.includes("--twConfig="))[0]?.split("=")[1];
+    const outputPath = process.argv.filter((c) => c.includes("--outputPath="))[0]?.split("=")[1];
+
+    if (!twConfig) {
+        throw Error(`Provide valid path to tailwind config. Use "--twConfig" argument.`);
+    }
+
+    if (!outputPath) {
+        throw Error(`Provide valid output path to tailwind tokens. Use "--outputPath" argument.`);
+    }
+
+    const loadedTwConfig = resolveConfig(require(path.resolve(process.cwd(), twConfig)));
+
+    TW_TOKENS.forEach((property) => {
+        const result = resolveProperty(property, loadedTwConfig.theme) || "";
+
+        const filePath = path.resolve(process.cwd(), `${outputPath}tw-${camelToSnakeCase(property)}.ts`);
+
+        if (!result && mode !== "check" && fs.existsSync(filePath)) {
+            fs.rmSync(filePath);
+        }
+
+        const newContent = prettier.format(result, {
+            parser: "babel",
+            tabWidth: 4,
+        });
+
+        if (mode === "check") {
+            const oldContent = fs.existsSync(filePath) ? fs.readFileSync(filePath).toString() : "";
+
+            if (newContent !== oldContent) {
+                throw new Error("Generated tailwind tokens doesn't match with current tailwind config.");
+            }
+        } else if (newContent) {
+            fs.writeFileSync(filePath, newContent, "utf-8");
+        }
+    });
+} catch (err) {
+    console.error(err.message);
+    error = true;
+}
+
+process.exit(error ? 1 : 0);

package/tw-tokens/tw-box-shadow.d.ts

@@ -0,0 +1,11 @@
+export declare const twBoxShadow: {
+    sm: string;
+    DEFAULT: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    inner: string;
+    none: string;
+};
+export declare type TwBoxShadow = typeof twBoxShadow;

package/tw-tokens/tw-box-shadow.js

@@ -0,0 +1,14 @@
+"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.twBoxShadow = void 0;
+exports.twBoxShadow = {
+    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+    inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+    none: "none",
+};