@g4rcez/components 0.0.1

package/src/components/table/sort.tsx

@@ -0,0 +1,141 @@
+"use client";
+import { ChevronDownIcon, ChevronUpIcon, PlusIcon, SortAscIcon, Trash2Icon } from "lucide-react";
+import React, { Fragment, useEffect, useState } from "react";
+import { Dropdown } from "~/components/floating/dropdown";
+import { OptionProps, Select } from "~/components/form/select";
+import { uuid } from "~/lib/fns";
+import { Label } from "~/types";
+import { Col, TableConfiguration, TableOperationProps } from "./table-lib";
+
+type Keyof<T extends {}> = keyof T extends infer R extends string ? R : never;
+
+enum Order {
+    Asc = "asc",
+    Desc = "desc",
+    Undefined = "undefined",
+}
+
+export type Sorter<T extends {}> = { value: Keyof<T>; type: Order; label: Label; id: string };
+
+const createSorterFn =
+    <T extends {}>(fields: Sorter<T>[]) =>
+    (a: any, b: any) =>
+        fields.reduce<number>((acc, x) => {
+            const reverse = x.type === "desc" ? -1 : 1;
+            const property = x.value;
+            const p = a[property] > b[property] ? reverse : a[property] < b[property] ? -reverse : 0;
+            return acc !== 0 ? acc : p;
+        }, 0);
+
+export const multiSort = <T extends {}>(array: T[], fields: Sorter<T>[]) => array.sort(createSorterFn(fields));
+
+const orders = {
+    asc: { label: "Ascending", value: Order.Asc },
+    desc: { label: "Descending", value: Order.Desc },
+} satisfies Omit<Record<Order, OptionProps>, Order.Undefined>;
+
+const orderOptions: OptionProps[] = [orders.asc, orders.desc];
+
+type Props<T extends {}> = TableConfiguration<
+    T,
+    {
+        cols: Col<T>[];
+        sorters: Sorter<T>[];
+        set: React.Dispatch<React.SetStateAction<Sorter<T>[]>>;
+    }
+>;
+
+const createSorter = <T extends {}>(col: Col<T>, order: Order = Order.Asc): Sorter<T> => ({
+    id: uuid(),
+    type: order,
+    value: col.id as any,
+    label: orders[Order.Asc].label,
+});
+
+export const Sort = <T extends {}>(props: Props<T>) => {
+    const onAddSorter = () => {
+        const col = props.cols[0];
+        if (col) props.set((prev) => [...prev, createSorter(col)]);
+    };
+
+    const onSetSorter = (id: string) => (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const value = e.target.value;
+        props.set((prev) => prev.map((x) => (x.id === id ? { ...x, value: value as Keyof<T> } : x)));
+    };
+
+    const onSortOrderType = (id: string) => (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const type = e.target.value;
+        props.set((prev) => prev.map((x) => (x.id === id ? { ...x, type: type as Order } : x)));
+    };
+
+    const onDelete = (e: React.MouseEvent<HTMLButtonElement>) => {
+        const id = e.currentTarget.dataset.id || "";
+        props.set((prev) => prev.filter((x) => x.id !== id));
+    };
+
+    return (
+        <Fragment>
+            <Dropdown
+                arrow={false}
+                title="Order By"
+                trigger={
+                    <span className="flex items-center gap-1 proportional-nums text-foreground-description">
+                        <SortAscIcon size={14} />
+                        Order by {props.sorters.length === 0 ? "" : ` (${props.sorters.length})`}
+                    </span>
+                }
+            >
+                <ul className="mt-4 space-y-2">
+                    {props.sorters.map((sorter) => {
+                        return (
+                            <li key={`sorter-select-${sorter.id}`} className="flex flex-nowrap gap-3">
+                                <Select
+                                    onChange={onSetSorter(sorter.id)}
+                                    options={props.options}
+                                    placeholder="Selecione um campo..."
+                                    value={sorter.value as string}
+                                />
+                                <Select onChange={onSortOrderType(sorter.id)} value={sorter.type} options={orderOptions} placeholder="Operação..." />
+                                <button className="mt-4" data-id={sorter.id} onClick={onDelete}>
+                                    <Trash2Icon className="text-danger" size={14} />
+                                </button>
+                            </li>
+                        );
+                    })}
+                    <li>
+                        <button onClick={onAddSorter} className="text-primary flex items-center gap-1">
+                            <PlusIcon size={14} /> Adicionar ordenação
+                        </button>
+                    </li>
+                </ul>
+            </Dropdown>
+        </Fragment>
+    );
+};
+
+type SorterHeadProps<T extends {}> = Pick<TableOperationProps<T>, "sorters" | "setSorters"> & { col: Col<T> };
+
+export const SorterHead = <T extends {}>(props: SorterHeadProps<T>) => {
+    const sorter = props.sorters.find((sort) => sort.id === props.col.id);
+    const [status, setStatus] = useState(sorter ? sorter.type : Order.Undefined);
+
+    const onClick = () => setStatus((prev) => (prev === Order.Undefined ? Order.Asc : prev === Order.Asc ? Order.Desc : Order.Undefined));
+
+    useEffect(() => {
+        props.setSorters((prev) => {
+            if (status === Order.Undefined) return prev.filter((x) => (x.value as string) !== props.col.id);
+            const findIndex = prev.findIndex((p) => (p.value as string) === props.col.id);
+            if (findIndex === -1) return [...prev, createSorter(props.col, status)];
+            prev[findIndex] = createSorter(props.col, status);
+            return [...prev];
+        });
+    }, [status, props.col]);
+
+    return (
+        <button className="isolate flex items-center" onClick={onClick}>
+            {status === Order.Asc ? <ChevronDownIcon size={14} /> : null}
+            {status === Order.Desc ? <ChevronUpIcon size={14} /> : null}
+            {status === Order.Undefined ? <SortAscIcon size={14} /> : null}
+        </button>
+    );
+};

package/src/components/table/table-lib.ts

@@ -0,0 +1,130 @@
+"use client";
+import React from "react";
+import { LocalStorage } from "storage-manager-js";
+import { useReducer } from "use-typed-reducer";
+import { OptionProps } from "~/components/form/select";
+import { isSsr } from "~/lib/fns";
+import { POJO, SetState } from "~/types";
+import { FilterConfig } from "./filter";
+import { GroupItem } from "./group";
+import { Sorter } from "./sort";
+
+export const getLabel = <T extends {}>(col: Col<T>) => col.headerLabel ?? col.thead ?? (col.id as string);
+
+export type TableConfiguration<T extends {}, M extends {} = {}> = M & {
+    cols: Col<T>[];
+    options: OptionProps[];
+};
+
+export const createOptionCols = <T extends {}>(cols: Col<T>[]): OptionProps[] =>
+    cols.map((opt) => ({
+        value: opt.id as string,
+        label: (opt.thead ?? opt.headerLabel ?? (opt.id as string)) as string,
+    }));
+
+export enum ColType {
+    Boolean = "boolean",
+    Number = "number",
+    Select = "select",
+    Text = "text",
+}
+
+export const valueFromType = (input: HTMLInputElement) => (input.type === "number" ? input.valueAsNumber : input.value);
+
+type THead = React.ReactElement | React.ReactNode;
+
+export type ColMatrix = `${number},${number}`;
+
+export type CellPropsElement<T extends {}, K extends keyof T> = {
+    row: T;
+    value: T[K];
+    rowIndex: number;
+    matrix: ColMatrix;
+    col: ColOptions<T, K> & { id: K; thead: THead };
+};
+
+type ColOptions<T extends {}, K extends keyof T> = Partial<{
+    cellProps: React.HTMLAttributes<HTMLTableCellElement>;
+    thProps: React.HTMLAttributes<HTMLTableCellElement>;
+    type: ColType;
+    headerLabel: string;
+    allowFilter: boolean;
+    Element: (props: CellPropsElement<T, K>) => React.ReactNode;
+}>;
+
+export type ColConstructor<T extends {}> = {
+    remove: <K extends keyof T>(id: K) => void;
+    add: <K extends keyof T>(id: K, thead: THead, props?: ColOptions<T, K>) => void;
+};
+
+const cols =
+    <T extends POJO>() =>
+    <K extends keyof T>(id: K, thead: THead, options: ColOptions<T, K>) => ({ ...options, id, thead });
+
+export type Col<T extends {}> = ReturnType<ReturnType<typeof cols<T>>>;
+
+type TableGetters<T extends POJO> = {
+    rows: T[];
+    cols: Col<T>[];
+    groups: GroupItem<T>[];
+    sorters: Sorter<T>[];
+    filters: FilterConfig<T>[];
+};
+
+type TableSetters<T extends POJO> = {
+    setCols: SetState<Col<T>[]>;
+    setSorters: SetState<Sorter<T>[]>;
+    setGroups: SetState<GroupItem<T>[]>;
+    setFilters: SetState<FilterConfig<T>[]>;
+};
+
+export type TableOperationProps<T extends {}> = TableConfiguration<
+    T,
+    TableSetters<T> &
+        TableGetters<T> & {
+            set?: (v: TableGetters<T>) => void;
+        }
+>;
+
+export const createColumns = <T extends {}>(callback: (o: ColConstructor<T>) => void) => {
+    let items: Col<T>[] = [];
+    const add: ColConstructor<T>["add"] = (id, thead, options) => items.push({ ...options, id, thead } as any);
+    const remove: ColConstructor<T>["remove"] = (id) => (items = items.filter((x) => x.id !== id));
+    callback({ add, remove });
+    return items;
+};
+
+type TablePreferenceState<T extends POJO> = {
+    name: string;
+    cols: Col<T>[];
+    groups: GroupItem<T>[];
+    sorters: Sorter<T>[];
+    filters: FilterConfig<T>[];
+};
+
+const noop = {};
+
+export const useTablePreferences = <T extends POJO>(name: string, options: Partial<TableGetters<T>> = noop) => {
+    const init: TableGetters<T> | null = isSsr() ? null : (LocalStorage.get(`@unamed/table-${name}`) as TableGetters<T>) || null;
+    const [state, dispatch] = useReducer(
+        {
+            name,
+            groups: options.groups || init?.groups || [],
+            sorters: options.sorters || init?.sorters || [],
+            filters: options.filters || init?.filters || [],
+            cols: options.cols || init?.cols || [],
+        } as Omit<TableGetters<T>, "rows"> & { name: string },
+        (get) => {
+            const intercept = (partial: Partial<TablePreferenceState<T>>) => {
+                const prev = get.state();
+                const result = { ...prev, ...partial };
+                if (!isSsr()) LocalStorage.set(`@unamed/table-${prev.name}`, result);
+                return result;
+            };
+            return {
+                set: (getters: TableGetters<T>) => intercept(getters),
+            };
+        }
+    );
+    return { ...state, ...dispatch, name };
+};

package/src/components/table/thead.tsx

@@ -0,0 +1,108 @@
+import { AnimatePresence, Reorder, TargetAndTransition } from "framer-motion";
+import { PlusIcon, SearchIcon } from "lucide-react";
+import { Dropdown } from "~/components/floating/dropdown";
+import { useReactive } from "~/hooks/use-reactive";
+import { ColumnHeaderFilter, createFilterFromCol } from "./filter";
+import { SorterHead } from "./sort";
+import { Col, getLabel, TableOperationProps } from "./table-lib";
+
+type TableHeaderProps<T extends {}> = {
+    headers: Col<T>[];
+} & Pick<TableOperationProps<T>, "filters" | "setFilters" | "setCols" | "setSorters" | "sorters">;
+
+const targetTransitionAnimate: TargetAndTransition = { opacity: 1 };
+
+const whileDrag: TargetAndTransition = { opacity: 0.75, backgroundColor: "#a1a1aa" };
+
+const exit: TargetAndTransition = { opacity: 0, transition: { duration: 0.4, type: "spring" } };
+
+type HeaderChildProps<T extends {}> = {
+    header: Col<T>;
+} & Pick<TableOperationProps<T>, "filters" | "setFilters" | "sorters" | "setSorters">;
+
+const HeaderChild = <T extends {}>(props: HeaderChildProps<T>) => {
+    const ownFilters = props.filters.filter((x) => x.name === props.header.id);
+    return (
+        <Reorder.Item
+            {...(props.header.thProps as {})}
+            as="th"
+            exit={exit}
+            initial={false}
+            dragSnapToOrigin
+            dragDirectionLock
+            value={props.header}
+            whileDrag={whileDrag}
+            animate={targetTransitionAnimate}
+            className={`hidden px-2 py-4 first:table-cell md:table-cell ${props.header.thProps?.className ?? ""}`}
+        >
+            <span className="flex items-center justify-between">
+                <span className="flex items-center gap-1">
+                    <Dropdown
+                        arrow
+                        trigger={<SearchIcon size={14} />}
+                        onChange={(opened) => {
+                            if (!opened) return;
+                            props.setFilters((prev) => prev.concat(createFilterFromCol(props.header, {})));
+                        }}
+                    >
+                        Filter by: {getLabel(props.header)}
+                        {(ownFilters.length === 0) === null ? null : (
+                            <ul>
+                                {ownFilters.map((filter) => (
+                                    <li key={`thead-filter-${filter.id}`} className="my-1">
+                                        <ColumnHeaderFilter filter={filter} set={props.setFilters} />
+                                    </li>
+                                ))}
+                                <li>
+                                    <button
+                                        onClick={() => props.setFilters((prev) => prev.concat(createFilterFromCol(props.header)))}
+                                        className="text-primary-muted flex items-center"
+                                    >
+                                        <PlusIcon size={14} /> Add
+                                    </button>
+                                </li>
+                            </ul>
+                        )}
+                    </Dropdown>
+                    <span className="pointer-events-auto text-balance text-base">{props.header.thead}</span>
+                    <SorterHead col={props.header} setSorters={props.setSorters} sorters={props.sorters} />
+                </span>
+            </span>
+        </Reorder.Item>
+    );
+};
+
+export const TableHeader = <T extends {}>(props: TableHeaderProps<T>) => {
+    const [headers, setHeaders] = useReactive<Col<T>[]>(props.headers);
+
+    const onPointerUp = () => props.setCols(headers);
+
+    return (
+        <Reorder.Group
+            as="tr"
+            axis="x"
+            drag
+            layout
+            layoutRoot
+            layoutScroll
+            initial={false}
+            values={headers}
+            onReorder={setHeaders}
+            onPointerUp={onPointerUp}
+            className="bg-table-background border-none text-lg"
+        >
+            <AnimatePresence>
+                {headers.map((header) => (
+                    <HeaderChild<T>
+                        key={`header-child-item-${header.id as string}`}
+                        setFilters={props.setFilters}
+                        filters={props.filters}
+                        setSorters={props.setSorters}
+                        sorters={props.sorters}
+                        header={header}
+                    />
+                ))}
+            </AnimatePresence>
+        </Reorder.Group>
+    );
+};

package/src/hooks/use-form.ts

@@ -0,0 +1,155 @@
+import { parse } from "qs";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { AllPaths, Is, setPath } from "sidekicker";
+import { z, ZodArray, ZodNumber } from "zod";
+import { formReset } from "~/components/form/form";
+import { InputProps } from "~/components/form/input";
+import { SelectProps } from "~/components/form/select";
+
+const sort = (a: string, b: string) => a.localeCompare(b);
+
+const options = {
+    sort,
+    allowDots: true,
+    charset: "utf-8",
+    parseArrays: true,
+    plainObjects: true,
+    charsetSentinel: true,
+    allowPrototypes: false,
+    depth: Number.MAX_SAFE_INTEGER,
+    arrayLimit: Number.MAX_SAFE_INTEGER,
+    parameterLimit: Number.MAX_SAFE_INTEGER,
+} as const;
+
+export const formToJson = (form: HTMLFormElement): any => {
+    const formData = new FormData(form);
+    const urlSearchParams = new URLSearchParams(formData as any);
+    return parse(urlSearchParams.toString(), options) as never;
+};
+
+export const convertPath = (path: string) => path.replace("[", ".").replace("]", "").split(".");
+
+export const getSchemaShape = <T extends z.ZodObject<any>>(name: string, schema: T) =>
+    convertPath(name).reduce((acc, el) => {
+        if (el === "") return acc;
+        const shape = acc.shape?.[el] || acc;
+        return shape instanceof ZodArray ? shape.element : shape;
+    }, schema);
+
+const getValueByType = (e: HTMLInputElement) => {
+    if (e.type === "checkbox") return e.checked;
+    if (e.type === "number") return e.valueAsNumber;
+    return e.value;
+};
+
+type CustomOnInvalid = (args: { form: HTMLFormElement; errors: Record<string, string> }) => any;
+
+type CustomOnSubmit<T> = (args: { json: T; form: HTMLFormElement; reset: () => void; event: React.FormEvent<HTMLFormElement> }) => any;
+
+export const useForm = <T extends z.ZodObject<any>>(schema: T) => {
+    const [errors, setErrors] = useState<Record<string, string | undefined> | null>(null);
+    const ref = useRef<Record<string, { element: HTMLElement; schema: z.ZodType }>>({});
+
+    const select = <Props extends SelectProps>(name: AllPaths<z.infer<T>>, props?: Props): Props => {
+        const validator = getSchemaShape(name, schema);
+        return {
+            ...props,
+            name,
+            id: name,
+            error: errors?.[name],
+            ref: (e: HTMLSelectElement) => {
+                if (e === null) return;
+                ref.current[name] = { element: e, schema: validator };
+            },
+        } as any;
+    };
+
+    const input = <Props extends InputProps>(name: AllPaths<z.infer<T>>, props?: Props): Props => {
+        const validator = getSchemaShape(name, schema);
+        return {
+            ...props,
+            name,
+            id: name,
+            type: Is.instance(validator, ZodNumber) ? "number" : props?.type ?? "text",
+            error: errors?.[name],
+            ref: (e: HTMLInputElement) => {
+                if (e === null) return;
+                ref.current[name] = { element: e, schema: validator };
+            },
+        } as any;
+    };
+
+    useEffect(() => {
+        const events = Object.values(ref.current).map((input) => {
+            const validation = input.schema.safeParse(getValueByType(input.element as any));
+            const onBlurField = (e: any) => {
+                const validation = input.schema.safeParse(getValueByType(e.target));
+                const html = input.element as HTMLInputElement;
+                const name = html.name;
+                if (validation.success) {
+                    html.setCustomValidity("");
+                    return setErrors((prev) => {
+                        const { [name]: removed, ...rest } = prev || {};
+                        return rest === null || Is.empty(rest) ? null : rest;
+                    });
+                }
+                if (html.required) {
+                    const errorMessage = validation.error.issues[0].message;
+                    html.setCustomValidity(errorMessage);
+                    setErrors((prev) => ({ ...prev, [name]: errorMessage }));
+                }
+            };
+            const event = input.element.tagName === "INPUT" ? "blur" : "change";
+            input.element.addEventListener(event, onBlurField);
+            return {
+                input,
+                hasInitialError: (input.element as HTMLInputElement).required ? !validation.success : false,
+                unsubscribe: () => input.element.removeEventListener(event, onBlurField),
+            };
+        });
+        const hasErrors = events.some((x) => x.hasInitialError);
+        if (hasErrors) setErrors((prev) => (prev === null ? {} : prev));
+        return () => events.forEach((item) => item.unsubscribe());
+    });
+
+    const onInvalid = useCallback(
+        (exec?: CustomOnInvalid) => (event: React.FormEvent<HTMLFormElement>) => {
+            event.preventDefault();
+            const form = event.currentTarget;
+            const validationErrors = Object.values(ref.current).reduce((acc, input) => {
+                const field = input.element as HTMLInputElement;
+                const validation = input.schema.safeParse(getValueByType(field));
+                if (validation.success) return acc;
+                const errorMessage = validation.error.issues[0].message;
+                field.setAttribute("data-initialized", "true");
+                return { ...acc, [field.name]: errorMessage };
+            }, {});
+            const e = Is.empty(validationErrors) ? null : {};
+            setErrors(e);
+            exec?.({ form, errors: e || {} });
+        },
+        []
+    );
+
+    const onSubmit = useCallback(
+        (exec: CustomOnSubmit<z.infer<T>>) => (event: React.FormEvent<HTMLFormElement>) => {
+            event.preventDefault();
+            const form = event.currentTarget;
+            let json = formToJson(form);
+            Array.from(form.elements).forEach((field) => {
+                if (field.tagName === "SELECT") {
+                    const input = field as HTMLSelectElement;
+                    json = setPath<any>(json as any, input.name, input.value);
+                }
+                if (field.tagName === "INPUT") {
+                    const input = field as HTMLInputElement;
+                    json = setPath<any>(json as any, input.name, getValueByType(input));
+                }
+            });
+            exec({ form, json, event, reset: () => formReset(form) });
+        },
+        []
+    );
+
+    return { input, select, onSubmit, errors, onInvalid, disabled: errors !== null };
+};

package/src/hooks/use-previous.ts

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "react";
+
+export const usePrevious = <T>(value: T): T => {
+    const ref = useRef<T | undefined>();
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current as T;
+};

package/src/hooks/use-reactive.ts

@@ -0,0 +1,10 @@
+import { useEffect, useState } from "react";
+
+export const useReactive = <T extends unknown>(t: T, initial?: T) => {
+    const [state, setState] = useState(() => (initial ? initial : t));
+    useEffect(() => {
+        setState(t);
+    }, [t]);
+    return [state, setState] as const;
+};
+

package/src/index.css

@@ -0,0 +1,37 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+select.select {
+    @apply appearance-none pr-10 bg-no-repeat;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+input[type="color"],
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="month"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="time"],
+input[type="url"],
+input[type="week"],
+select,
+select:focus,
+textarea {
+    @apply text-base;
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from "./components";
+export * from "./hooks/use-form";
+export * from "./hooks/use-previous";
+export * from "./hooks/use-reactive";
+export * from "./lib/dom";
+export * from "./lib/fns";

package/src/lib/dom.ts

@@ -0,0 +1,27 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import React, { LegacyRef, MutableRefObject, RefCallback } from "react";
+
+export const mergeRefs =
+    <T extends any = any>(...refs: Array<MutableRefObject<T> | LegacyRef<T> | undefined | null>): RefCallback<T> =>
+    (value) => {
+        refs.forEach((ref) => {
+            if (typeof ref === "function") {
+                ref(value);
+            } else if (ref !== null) {
+                (ref as MutableRefObject<T | null>).current = value;
+            }
+        });
+    };
+
+export const isReactComponent = (a: any): a is React.FC => {
+    if (a.$$typeof === Symbol.for("react.forward_ref")) {
+        return true;
+    }
+    if (a.$$typeof === Symbol.for("react.fragment")) {
+        return true;
+    }
+    return a.$$typeof === Symbol.for("react.element");
+};
+
+export const css = (...styles: ClassValue[]) => twMerge(clsx(styles));

package/src/lib/fns.ts

@@ -0,0 +1,23 @@
+import { AllPaths } from "sidekicker";
+
+export const uuid = (): string =>
+    "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+        let r = (Math.random() * 16) | 0;
+        let v = c == "x" ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+
+const travel = (path: string, regexp: RegExp, obj: any) =>
+    path
+        .split(regexp)
+        .filter(Boolean)
+        .reduce((res, key) => (res !== null && res !== undefined ? (res as any)[key] : res), obj);
+
+const regexPaths = { basic: /[,[\]]+?/, extend: /[,[\].]+?/ };
+
+export const path = <T extends {}, K extends AllPaths<T>>(obj: T, path: K) => {
+    const result = travel(path, regexPaths.basic, obj) || travel(path, regexPaths.extend, obj);
+    return result === undefined || result === obj ? undefined : result;
+};
+
+export const isSsr = () => typeof window === 'undefined';