UXF Core

Constants

• common modifier classnames for interactive elements (eg. CLASSES.IS_HOVERABLE for is-hoverable classname)
  • focus-visible
  • is-active
  • is-busy
  • is-disabled
  • is-focused
  • is-hoverable
  • is-hovered
  • is-invalid
  • is-loading
  • is-not-hoverable
  • is-readonly
  • is-required
  • is-selected

Resizer

!!! Required @uxf/resizer version >= 2.3.2 which supported quality parameter.

Config

[
    {
        "route": "/generated/static/:width(\\d+|x)_:height(\\d+|x)_:fit([a-z]+)_:position([a-z]+)_:background([a-z]+)_:trim([a-z]+)_:quality(\\d+|x)/:version/:filename(*).:extension.:toFormat",
        "source": "https://uxf-base.uxf.dev/:filename+.:extension"
    },
    {
        "route": "/generated/:namespace/:p1/:p2/:filename([a-f0-9\\-]+)_:width(\\d+|x)_:height(\\d+|x)_:fit([a-z]+)_:position([a-z]+)_:background([a-z]+)_:trim([a-z]+)_:quality(\\d+|x)_:extension.:toFormat",
        "source": "https://s3.uxf.dev/${APP_NAME}-${APP_ENV}/:namespace/:p1/:p2/:filename.:extension"
    }
]

Usage for generated images

import {resizerImageUrl} from "@uxf/core/utils/resizer";

<img src={resizerImageUrl(file, width, height, params)}/>

Usage for static images

import {resizerImageUrl} from "@uxf/core/utils/resizer";

import staticImage from "./path/to/static-image.png";

<img src={resizerImageUrl(staticImage, width, height, params)}/>

QR code generator

Helper function for qr code generator.

https://gitlab.uxf.cz/uxf-internal-projects/qr#qr-code-generator

import { qrCodeUrl } from "@uxf/core/qr";

qrCodeUrl("https://www.uxf.cz", { width: 200, margin: 5, errorCorrectionLevel: "H" });

Cookie

• Cookie options
  • secure?: boolean;
  • httpOnly?: boolean;
  • path?: string;

import { Cookie } from "@uxf/core/cookie";

// on client
const cookie = Cookie.create();

// in getInitialProps
const cookie = Cookie.create(ctx);

cookie.has("cookie-name");
cookie.get("cookie-name");
cookie.set("cookie-name", "value", /* ttl in seconds (optional) */, /* options (optional) */)
cookie.delete("cookie-name", /* options (optional) */);

Hooks - @deprecated - will be moved to @uxf/core-react

import { useBodyScrollLock } from "@uxf/core/hooks/useBodyScrollLock";
import { useState } from "react";

const innerRef = useRef<HTMLDivElement>(null);
const [isOpen, setIsOpen] = useState<boolean>();

const clearAllOnclose = false;

useBodyScrollLock<HTMLDivElement>(innerRef, isOpen, {
  allowTouchMove: undefined, // https://github.com/willmcpo/body-scroll-lock#allowtouchmove
  clearAllOnClose: false, // optionally call clearAllBodyScrollLocks method on unmount
  reserveScrollBarGap: undefined, // https://github.com/willmcpo/body-scroll-lock#reservescrollbargap
});

<div ref={innerRef}>Element which activates scroll lock on its parent elements.</div>

import { useIsMounted } from "@uxf/core/hooks/useIsMounted";

const isMounted = useIsMounted();

import { useIsomorphicLayoutEffect } from "@uxf/core/hooks/useIsomorphicLayoutEffect";

useIsomorphicLayoutEffect(() => {/* code */}, [/* deps */]);

import { useKey } from "@uxf/core/hooks/useKey";
import { useRef } from "react";

const targetRef = useRef<HTMLDivElement>(null);
const disabled = false; // eg. for passing disabled state

useKey<HTMLDivElement>("Enter", () => console.log("callback"), {
  disabled,
  targetRef, // if not provided, then `document` will be used
  type: "keydown"
});

<div ref={targetRef} tabIndex={0}>Element with callback triggerable by enter key.</div>

import { useMinWindowWidth } from "@uxf/core/hooks/useMinWindowWidth";

const isDesktop = useMinWindowWidth(1200);
const isDesktopWithDebounce = useMinWindowWidth(1200, 200); // will be updated every 200 ms

const example = isDesktop ? "desktop" : "tablet";
const debouncedExample = isDesktopWithDebounce ? "debouncedDesktop" : "debouncedTablet";

import { usePagination } from "@uxf/core/hooks/usePagination";

const paginationItems = usePagination({ page: 1, count: 10 })

import { useRafState } from "@uxf/core/hooks/useRafState";

const [state, setState] = useRafState<boolean>(false);

import { useOnUnmount } from "@uxf/core/hooks/useOnUnmount";

const exampleCallback = () => {};

useOnUnmount(exampleCallback());

import { useOnUpdate } from "@uxf/core/hooks/useOnUpdate";

useOnUpdate(() => {/* code */}, [/* deps */]);

import { useWindowScroll } from "@uxf/core/hooks/useWindowScroll";

const windowScroll = useWindowScroll();

const example = windowScroll && windowScroll.y > 100 ? "scroled" : "on top";

import { useWindowSize } from "@uxf/core/hooks/useWindowSize";

const windowSize = useWindowSize();

const example = windowSize && windowSize.width > 1200 ? "desktop" : "tablet";

import { useFocusTrap } from "@uxf/core/hooks/useFocusTrap";
import { useState } from "react";

const [active, setActive] = useState<boolean>();

const focusTrapRef = useFocusTrap(active);

<div ref={focusTrapRef}>Element which trap focus inside if `active` is truthy.</div>

import { useFocusReturn } from "@uxf/core/hooks/useFocusReturn";
import { useState } from "react";

const [active, setActive] = useState<boolean>();

// Returns focus to last active element, e.g. in Modal or Popover
useFocusReturn(active);

import { useAnchorProps } from "@uxf/core/hooks/useAnchorProps";
import { AnchorHTMLAttributes } from "react";

// extends <a /> by `analyticsCallback`, `disabled`, `loading`, `submit` props
const anchorProps = useAnchorProps<AnchorHTMLAttributes<HTMLAnchorElement>>({
  analyticsCallback: () => console.log("analytics"),
  disabled: false,
  href: "https://www.google.com/",
  loading: false,
  onClick: () => console.log("success"),
  type: "submit", // simulate <button type="submit" /> function
});

<a {...anchorProps}>Click me</a>

// example with generics
import { UseAnchorProps, useAnchorProps } from "@uxf/core/hooks/useAnchorProps";
import { AnchorHTMLAttributes } from "react";

interface Props extends UseAnchorProps, AnchorHTMLAttributes<HTMLAnchorElement> {
  customProp?: boolean;
}

const anchorProps = useAnchorProps<Props>({
  customProp: true,
  loading: false,
  href: "https://www.google.com/",
});

<a {...anchorProps}>Click me</a>

import { useButtonProps } from "@uxf/core/hooks/useButtonProps";
import { ButtonHTMLAttributes } from "react";

// extends <button /> by `analyticsCallback` and `loading` props
const buttonProps = useButtonProps<ButtonHTMLAttributes<HTMLButtonElement>>({
  analyticsCallback: () => console.log("analytics"),
  disabled: false,
  loading: false,
  onClick: () => console.log("success"),
  type: "submit",
});

<button {...buttonProps}>Click me</button>

// example with generics
import { UseButtonProps, useButtonProps } from "@uxf/core/hooks/useButtonProps";
import { ButtonHTMLAttributes } from "react";

interface Props extends UseButtonProps, ButtonHTMLAttributes<HTMLButtonElement> {
  customProp?: boolean;
}

const buttonProps = useButtonProps<Props>({
  customProp: true,
  loading: false,
  type: "submit",
});

<button {...buttonProps}>Click me</button>

import { useClickableProps } from "@uxf/core/hooks/useClickableProps";
import { HTMLAttributes } from "react";

// extends any HTML element by `analyticsCallback`, `disabled`, `loading`, `submit` props
const clickableProps = useClickableProps<HTMLAttributes<HTMLDivElement>>({
  analyticsCallback: () => console.log("analytics"),
  disabled: false,
  loading: false,
  onClick: () => console.log("success"),
  type: "submit", // simulate <button type="submit" /> function
});

<div {...clickableProps}>Click me</div>

// example with generics
import { UseClickableProps, useClickableProps } from "@uxf/core/hooks/useClickableProps";
import { HTMLAttributes } from "react";

interface Props extends UseClickableProps, HTMLAttributes<HTMLDivElement> {
  customProp?: boolean;
}

const buttonProps = useClickableProps<Props>({
  customProp: true,
  hidden: false,
  loading: false,
});

<button {...buttonProps}>Click me</button>

import { useMouseDragToScroll } from "@uxf/core/hooks/useMouseDragToScroll";

const targetRef = useRef<HTMLDivElement>(null);

const style = useMouseDragToScroll(scrollRef);

<div style={style}>Drag to scroll</div>

import { useInputFocus } from "@uxf/core/hooks/useInputFocus";

const focusRef = useRef<HTMLInputElement>(null); // or HTMLTextAreaElement
const { onBlur, onFocus } = props;

const input = useInputFocus(focusRef, onBlur, onFocus);

<div>Input is {input.focused}</div>
<button onClick={input.focus}>Focus input</button>
<input onBlur={input.onBlur} onFocus={input.onFocus} ref={focusRef} />

import { useLatest } from "@uxf/core/hooks/useLatest";

const latestState = useLatest(someUnstableWhatever);

useEffect(() => {
  latestState.current(); // use newest state of 'someUnstableWhatever' without affecting this effetct update
}, [latestState])

import { usePrevious } from "@uxf/core/hooks/usePrevious";

const previousState = usePrevious(someUnstableWhatever);

useEffect(() => {
  previousState.current(); // use state of 'someUnstableWhatever' from previous render without affecting this effetct update
}, [previousState])

Next

import { queryParamToString, queryParamToNumber } from "@uxf/core/next";

queryParamToNumber(ctx.query.id);
queryParamToString(ctx.query.name);

Utils

cx, cxa

It is our fork of clsx library https://github.com/lukeed/clsx

We will mainly use cx, which is fork of clsx/lite – it accepts ONLY string values! Any non-string arguments are ignored!

import { cx } from "@uxf/core/utils/cx";

// string
cx("hello", true && "foo", false && "bar");
// => "hello foo"

// NOTE: Any non-string input(s) ignored
cx({ foo: true });
//=> ""

The cxa function is full fork of clsx and can take any number of arguments, each of which can be an Object, Array, Boolean, or String.

Important: Any falsy values are discarded! Standalone Boolean values are discarded as well.

import { cxa } from "@uxf/core/utils/cxa";

cxa(true, false, "", null, undefined, 0, NaN);
//=> ""

// Strings (variadic)
cxa("foo", true && "bar", "baz");
//=> "foo bar baz"

// Objects
cxa({ foo:true, bar:false, baz:isTrue() });
//=> "foo baz"

// Objects (variadic)
cxa({ foo:true }, { bar:false }, null, { "--foobar":"hello" });
//=> "foo --foobar"

// Arrays
cxa(["foo", 0, false, "bar"]);
//=> "foo bar"

// Arrays (variadic)
cxa(["foo"], ["", 0, false, "bar"], [["baz", [["hello"], "there"]]]);
//=> "foo bar baz hello there"

// Kitchen sink (with nesting)
cxa("foo", [1 && "bar", { baz:false, bat:null }, ["hello", ["world"]]], "cya");
//=> "foo bar hello world cya"

downloadFile

Intended as only way to programmatically download file if there is no option to use native anchor with download html attribute (eg. in form submit events).

import { downloadFile } from "@uxf/core/utils/download-file";
import { FormEventHandler } from "react";

const submitHandler: FormEventHandler<HTMLFormElement> = () => {
    downloadFile("https://example.com/file", "file.txt")
};

Validators

import { Validator } from "@uxf/core";

Validator.isEmail("...");
Validator.isPhone("...");