@gravity-ui/dynamic-forms 1.0.0 → 1.0.1

package/build/esm/lib/kit/constants/config.js

@@ -0,0 +1,342 @@
+import { Accordeon, AccordeonCardLayout, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, Group, Group2, MonacoInput, MonacoInputCard, MonacoView, MonacoViewCard, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, OneOf, OneOfCard, OneOfCardView, OneOfView, Row, Row2, Secret, Section, Section2, SectionCard, SectionCard2, SectionWithSubtitle, SectionWithSubtitle2, Select, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewRow2, ViewSection, ViewSection2, ViewSectionCard, ViewSectionCard2, ViewTableCell, ViewTransparent, } from '../components';
+import { getArrayValidator, getBooleanValidator, getNumberValidator, getObjectValidator, getStringValidator, } from '../validators';
+export const dynamicConfig = {
+    array: {
+        inputs: {
+            select: { Component: MultiSelect },
+            table: { Component: TableArrayInput },
+            base: { Component: ArrayBase },
+        },
+        layouts: {
+            row: Row,
+            accordeon: Accordeon,
+            section: Section,
+            section2: Section2,
+            group: Group,
+            group2: Group2,
+            table_item: TableCell,
+            transparent: Transparent,
+            card_accordeon: CardAccordeon,
+            card_section: CardSection,
+        },
+        validators: {
+            base: getArrayValidator(),
+        },
+    },
+    boolean: {
+        inputs: {
+            base: { Component: Checkbox },
+        },
+        layouts: {
+            row: Row,
+            table_item: TableCell,
+        },
+        validators: {
+            base: getBooleanValidator(),
+        },
+    },
+    number: {
+        inputs: {
+            base: { Component: Text },
+        },
+        layouts: {
+            row: Row,
+            table_item: TableCell,
+            transparent: Transparent,
+        },
+        validators: {
+            base: getNumberValidator(),
+        },
+    },
+    object: {
+        inputs: {
+            oneof: { Component: OneOf, independent: true },
+            card_oneof: { Component: CardOneOf, independent: true },
+            secret: { Component: Secret, independent: true },
+            base: { Component: ObjectBase, independent: true },
+        },
+        layouts: {
+            row: Row,
+            accordeon: Accordeon,
+            section: Section,
+            section2: Section2,
+            group: Group,
+            group2: Group2,
+            transparent: Transparent,
+            card_accordeon: CardAccordeon,
+            card_section: CardSection,
+        },
+        validators: {
+            base: getObjectValidator(),
+        },
+    },
+    string: {
+        inputs: {
+            password: { Component: Text },
+            textarea: { Component: TextArea },
+            select: { Component: Select },
+            base: { Component: Text },
+            number_with_scale: { Component: NumberWithScale },
+            monaco_input: { Component: MonacoInput },
+            text_content: { Component: TextContent, independent: true },
+        },
+        layouts: {
+            row: Row,
+            table_item: TableCell,
+            transparent: Transparent,
+            section: Section,
+            section2: Section2,
+            group: Group,
+            group2: Group2,
+            card_section: CardSection,
+        },
+        validators: {
+            base: getStringValidator(),
+            number: getNumberValidator(),
+        },
+    },
+};
+export const dynamicCardConfig = {
+    array: {
+        inputs: {
+            select: { Component: MultiSelect },
+            table: { Component: TableArrayInput },
+            base: { Component: ArrayBase },
+        },
+        layouts: {
+            row: Row2,
+            accordeon: AccordeonCardLayout,
+            section: SectionWithSubtitle,
+            section2: SectionWithSubtitle2,
+            group: SectionCard,
+            group2: SectionCard2,
+            table_item: TableCell,
+            transparent: Transparent,
+        },
+        validators: {
+            base: getArrayValidator(),
+        },
+    },
+    boolean: {
+        inputs: {
+            base: { Component: Checkbox },
+        },
+        layouts: {
+            row: Row2,
+            table_item: TableCell,
+        },
+        validators: {
+            base: getBooleanValidator(),
+        },
+    },
+    number: {
+        inputs: {
+            base: { Component: Text },
+        },
+        layouts: {
+            row: Row2,
+            table_item: TableCell,
+            transparent: Transparent,
+        },
+        validators: {
+            base: getNumberValidator(),
+        },
+    },
+    object: {
+        inputs: {
+            oneof: { Component: OneOfCard, independent: true },
+            secret: { Component: Secret, independent: true },
+            base: { Component: ObjectBase, independent: true },
+        },
+        layouts: {
+            row: Row2,
+            accordeon: AccordeonCardLayout,
+            section: SectionWithSubtitle,
+            section2: SectionWithSubtitle2,
+            group: SectionCard,
+            group2: SectionCard2,
+            transparent: Transparent,
+        },
+        validators: {
+            base: getObjectValidator(),
+        },
+    },
+    string: {
+        inputs: {
+            password: { Component: Text },
+            textarea: { Component: TextArea },
+            select: { Component: Select },
+            base: { Component: Text },
+            number_with_scale: { Component: NumberWithScale },
+            monaco_input: { Component: MonacoInputCard },
+            text_content: { Component: TextContent, independent: true },
+        },
+        layouts: {
+            row: Row2,
+            table_item: TableCell,
+            transparent: Transparent,
+            section: SectionWithSubtitle,
+            section2: SectionWithSubtitle2,
+            group: SectionCard,
+            group2: SectionCard2,
+        },
+        validators: {
+            base: getStringValidator(),
+            number: getNumberValidator(),
+        },
+    },
+};
+export const dynamicViewConfig = {
+    array: {
+        views: {
+            select: { Component: MultiSelectView },
+            table: { Component: TableArrayView },
+            base: { Component: ArrayBaseView },
+        },
+        layouts: {
+            row: ViewRow,
+            accordeon: ViewAccordeon,
+            section: ViewSection,
+            section2: ViewSection2,
+            group: ViewGroup,
+            group2: ViewGroup2,
+            table_item: ViewTableCell,
+            transparent: ViewTransparent,
+            card_accordeon: ViewCardAccordeon,
+            card_section: ViewCardSection,
+        },
+    },
+    boolean: {
+        views: {
+            base: { Component: BaseView },
+        },
+        layouts: {
+            row: ViewRow,
+            table_item: ViewTableCell,
+        },
+    },
+    number: {
+        views: {
+            base: { Component: BaseView },
+        },
+        layouts: {
+            row: ViewRow,
+            table_item: ViewTableCell,
+            transparent: ViewTransparent,
+        },
+    },
+    object: {
+        views: {
+            oneof: { Component: OneOfView, independent: true },
+            card_oneof: { Component: CardOneOfView, independent: true },
+            secret: undefined,
+            base: { Component: ObjectBaseView, independent: true },
+        },
+        layouts: {
+            row: ViewRow,
+            accordeon: ViewAccordeon,
+            section: ViewSection,
+            section2: ViewSection2,
+            group: ViewGroup,
+            group2: ViewGroup2,
+            transparent: ViewTransparent,
+            card_accordeon: ViewCardAccordeon,
+            card_section: ViewCardSection,
+        },
+    },
+    string: {
+        views: {
+            password: undefined,
+            textarea: { Component: TextAreaView },
+            select: { Component: BaseView },
+            base: { Component: BaseView },
+            number_with_scale: { Component: NumberWithScaleView },
+            monaco_input: { Component: MonacoView },
+            text_content: undefined,
+        },
+        layouts: {
+            row: ViewRow,
+            table_item: ViewTableCell,
+            transparent: ViewTransparent,
+            section: ViewSection,
+            section2: ViewSection2,
+            group: ViewGroup,
+            group2: ViewGroup2,
+            card_section: ViewCardSection,
+        },
+    },
+};
+export const dynamicViewCardConfig = {
+    array: {
+        views: {
+            select: { Component: MultiSelectView },
+            table: { Component: TableArrayView },
+            base: { Component: ArrayBaseView },
+        },
+        layouts: {
+            row: ViewRow2,
+            accordeon: ViewAccordeonCard,
+            section: ViewSection,
+            section2: ViewSection2,
+            group: ViewSectionCard,
+            group2: ViewSectionCard2,
+            table_item: ViewTableCell,
+            transparent: ViewTransparent,
+        },
+    },
+    boolean: {
+        views: {
+            base: { Component: BaseView },
+        },
+        layouts: {
+            row: ViewRow2,
+            table_item: ViewTableCell,
+        },
+    },
+    number: {
+        views: {
+            base: { Component: BaseView },
+        },
+        layouts: {
+            row: ViewRow2,
+            table_item: ViewTableCell,
+            transparent: ViewTransparent,
+        },
+    },
+    object: {
+        views: {
+            oneof: { Component: OneOfCardView, independent: true },
+            secret: undefined,
+            base: { Component: ObjectBaseView, independent: true },
+        },
+        layouts: {
+            row: ViewRow2,
+            accordeon: ViewAccordeonCard,
+            section: ViewSection,
+            section2: ViewSection2,
+            group: ViewSectionCard,
+            group2: ViewSectionCard2,
+            transparent: ViewTransparent,
+        },
+    },
+    string: {
+        views: {
+            password: undefined,
+            textarea: { Component: TextAreaView },
+            select: { Component: BaseView },
+            base: { Component: BaseView },
+            number_with_scale: { Component: NumberWithScaleView },
+            monaco_input: { Component: MonacoViewCard },
+            text_content: undefined,
+        },
+        layouts: {
+            row: ViewRow2,
+            table_item: ViewTableCell,
+            transparent: ViewTransparent,
+            section: ViewSection,
+            section2: ViewSection2,
+            group: ViewSectionCard,
+            group2: ViewSectionCard2,
+        },
+    },
+};

package/build/esm/lib/kit/constants/index.d.ts

@@ -0,0 +1 @@
+export * from './config';

package/build/esm/lib/kit/constants/index.js

@@ -0,0 +1 @@
+export * from './config';

package/build/esm/lib/kit/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useErrorChecker';
+export * from './useOneOf';

package/build/esm/lib/kit/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useErrorChecker';
+export * from './useOneOf';

package/build/esm/lib/kit/hooks/useErrorChecker.d.ts

@@ -0,0 +1,8 @@
+import { FieldRenderProps, FieldValue } from '../../core';
+export interface UseErrorCheckerParams {
+    name: string;
+    meta: FieldRenderProps<FieldValue>['meta'];
+    open: boolean;
+    setOpen: (flag: boolean) => void;
+}
+export declare const useErrorChecker: ({ name, meta, open, setOpen }: UseErrorCheckerParams) => void;

package/build/esm/lib/kit/hooks/useErrorChecker.js

@@ -0,0 +1,10 @@
+import React from 'react';
+export const useErrorChecker = ({ name, meta, open, setOpen }) => {
+    React.useEffect(() => {
+        if (meta.submitFailed &&
+            document.querySelector(`[data-form-error-name*="${name}"]`) &&
+            !open) {
+            setOpen(true);
+        }
+    }, [meta.submitFailed]);
+};

package/build/esm/lib/kit/hooks/useOneOf.d.ts

@@ -0,0 +1,11 @@
+import { ObjectIndependentInputProps } from '../../core';
+export interface UseOneOfParams {
+    props: ObjectIndependentInputProps;
+    onTogglerChange?: (value: string) => void;
+}
+export declare const useOneOf: ({ props, onTogglerChange }: UseOneOfParams) => {
+    oneOfValue: string;
+    specProperties: Record<string, import("../../core").Spec>;
+    toggler: JSX.Element;
+    togglerInput: JSX.Element;
+};

package/build/esm/lib/kit/hooks/useOneOf.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { RadioButton, Select } from '@gravity-ui/uikit';
+import _ from 'lodash';
+const MAX_TAB_TITLE_LENGTH = 20;
+export const useOneOf = ({ props, onTogglerChange }) => {
+    const { input, spec, Layout } = props;
+    const specProperties = React.useMemo(() => (_.isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
+    const [oneOfValue, setOneOfValue] = React.useState(() => {
+        let valueKeys;
+        if (_.isObjectLike(input.value)) {
+            const keys = Object.keys(input.value);
+            if (keys.length) {
+                valueKeys = keys;
+            }
+        }
+        return (valueKeys || spec.viewSpec.order || Object.keys(specProperties))[0];
+    });
+    const onOneOfChange = React.useCallback(([newValue]) => {
+        if (newValue !== oneOfValue) {
+            input.onChange({});
+            setOneOfValue(newValue);
+            onTogglerChange === null || onTogglerChange === void 0 ? void 0 : onTogglerChange(newValue);
+        }
+    }, [setOneOfValue, input.onChange, oneOfValue]);
+    const options = React.useMemo(() => (spec.viewSpec.order || Object.keys(specProperties)).map((value) => {
+        var _a, _b;
+        const title = ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[value]) ||
+            ((_b = specProperties[value]) === null || _b === void 0 ? void 0 : _b.viewSpec.layoutTitle) ||
+            value ||
+            '';
+        return {
+            value,
+            title,
+            content: title,
+        };
+    }), [spec.description, spec.viewSpec.order, specProperties]);
+    const togglerInput = React.useMemo(() => {
+        if (options.length > 3 ||
+            _.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH)) {
+            return (React.createElement(Select, { width: "max", value: [oneOfValue], onUpdate: onOneOfChange, options: options, disabled: spec.viewSpec.disabled, filterable: options.length > 7 }));
+        }
+        return (React.createElement(RadioButton, { value: oneOfValue, onChange: (event) => onOneOfChange([event.target.value]), disabled: spec.viewSpec.disabled }, options.map((option) => (React.createElement(RadioButton.Option, { key: option.value, value: option.value }, option.title)))));
+    }, [options, oneOfValue, onOneOfChange]);
+    const toggler = React.useMemo(() => {
+        if (Layout) {
+            return React.createElement(Layout, Object.assign({}, props), togglerInput);
+        }
+        return togglerInput;
+    }, [Layout, togglerInput, props]);
+    return { oneOfValue, specProperties, toggler, togglerInput };
+};

package/build/esm/lib/kit/i18n/configure.d.ts

@@ -0,0 +1,12 @@
+export declare enum Lang {
+    Ru = "ru",
+    En = "en"
+}
+interface Config {
+    lang?: Lang;
+}
+type Subscriber = (config: Config) => void;
+export declare const configure: (newConfig: Config) => void;
+export declare const subscribeConfigure: (sub: Subscriber) => (() => void);
+export declare const getConfig: () => Config;
+export {};

package/build/esm/lib/kit/i18n/configure.js

@@ -0,0 +1,20 @@
+export var Lang;
+(function (Lang) {
+    Lang["Ru"] = "ru";
+    Lang["En"] = "en";
+})(Lang || (Lang = {}));
+let config = {};
+let subscribers = [];
+export const configure = (newConfig) => {
+    if (newConfig) {
+        config = Object.assign(Object.assign({}, config), newConfig);
+        subscribers.forEach((sub) => sub(config));
+    }
+};
+export const subscribeConfigure = (sub) => {
+    subscribers.push(sub);
+    return () => {
+        subscribers = subscribers.filter((el) => el === sub);
+    };
+};
+export const getConfig = () => config;

package/build/esm/lib/kit/i18n/en.json

@@ -0,0 +1,46 @@
+{
+  "label_error-required": "Empty field",
+  "label_error-invalid": "Incorrect value in field",
+  "label_error-int": "Value must be an integer",
+  "label_error-number": "Value must be a number",
+  "label_error-min-length": [
+    "Value can't be shorter than {{count}} character",
+    "Value can't be shorter than {{count}} characters",
+    "Value can't be shorter than {{count}} characters",
+    "",
+    "Value can't be shorter than {{count}} characters",
+    "Value can't be shorter than {{count}} characters"
+  ],
+  "label_error-min-length-array": [
+    "Value can't be shorter than {{count}} item",
+    "Value can't be shorter than {{count}} items",
+    "Value can't be shorter than {{count}} items",
+    "",
+    "Value can't be shorter than {{count}} items",
+    "Value can't be shorter than {{count}} items"
+  ],
+  "label_error-max-length": [
+    "Value can't be longer than {{count}} character",
+    "Value can't be longer than {{count}} characters",
+    "Value can't be longer than {{count}} characters",
+    "",
+    "Value can't be longer than {{count}} characters",
+    "Value can't be longer than {{count}} characters"
+  ],
+  "label_error-max-length-array": [
+    "Value can't be longer than {{count}} item",
+    "Value can't be longer than {{count}} items",
+    "Value can't be longer than {{count}} items",
+    "",
+    "Value can't be longer than {{count}} items",
+    "Value can't be longer than {{count}} items"
+  ],
+  "label_error-min-number": "Value must be an integer no less than {{count}}",
+  "label_error-max-number": "Value must not be greater than {{count}}",
+  "label_error-space-end": "Value must not end with a space",
+  "label_error-space-start": "Value must not start with a space",
+  "label_error-zero-start": "Value must not start with a zero",
+  "label_error-dot-end": "Value must not end with a dot",
+  "label_delete": "Delete",
+  "button_cancel": "Close"
+}

package/build/esm/lib/kit/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/esm/lib/kit/i18n/index.js

@@ -0,0 +1,15 @@
+import { I18N } from '@gravity-ui/i18n';
+import { Lang, getConfig, subscribeConfigure } from './configure';
+import en from './en.json';
+import ru from './ru.json';
+const KEYSET_NAME = 'dynamic-forms-errors';
+const i18n = new I18N();
+i18n.setLang(getConfig().lang || Lang.En);
+subscribeConfigure((config) => {
+    if (config === null || config === void 0 ? void 0 : config.lang) {
+        i18n.setLang(config.lang);
+    }
+});
+i18n.registerKeyset(Lang.Ru, KEYSET_NAME, ru);
+i18n.registerKeyset(Lang.En, KEYSET_NAME, en);
+export default i18n.keyset(KEYSET_NAME);

package/build/esm/lib/kit/i18n/ru.json

@@ -0,0 +1,46 @@
+{
+  "label_error-required": "Поле не заполнено",
+  "label_error-invalid": "Поле заполнено неправильно",
+  "label_error-int": "Значение должно быть целым числом",
+  "label_error-number": "Значение должно быть числом",
+  "label_error-min-length": [
+    "Значение не может быть короче {{count}} символа",
+    "Значение не может быть короче {{count}} символов",
+    "Значение не может быть короче {{count}} символов",
+    "",
+    "Значение не может быть короче {{count}} символов",
+    "Значение не может быть короче {{count}} символов"
+  ],
+  "label_error-min-length-array": [
+    "Значение не может быть короче {{count}} элемента",
+    "Значение не может быть короче {{count}} элементов",
+    "Значение не может быть короче {{count}} элементов",
+    "",
+    "Значение не может быть короче {{count}} элементов",
+    "Значение не может быть короче {{count}} элементов"
+  ],
+  "label_error-max-length": [
+    "Значение не может быть длиннее {{count}} символа",
+    "Значение не может быть длиннее {{count}} символов",
+    "Значение не может быть длиннее {{count}} символов",
+    "",
+    "Значение не может быть длиннее {{count}} символов",
+    "Значение не может быть длиннее {{count}} символов"
+  ],
+  "label_error-max-length-array": [
+    "Значение не может быть длиннее {{count}} элемента",
+    "Значение не может быть длиннее {{count}} элементов",
+    "Значение не может быть длиннее {{count}} элементов",
+    "",
+    "Значение не может быть длиннее {{count}} элементов",
+    "Значение не может быть длиннее {{count}} элементов"
+  ],
+  "label_error-min-number": "Значение должно быть числом не меньше {{count}}",
+  "label_error-max-number": "Значение должно быть числом не больше {{count}}",
+  "label_error-space-end": "Значение не должно заканчиваться пробелом",
+  "label_error-space-start": "Значение не должно начинаться с пробела",
+  "label_error-zero-start": "Значение не должно начинаться с нуля",
+  "label_error-dot-end": "Значение не должно заканчиваться точкой",
+  "label_delete": "Удалить",
+  "button_cancel": "Закрыть"
+}

package/build/esm/lib/kit/index.d.ts

@@ -0,0 +1,6 @@
+export * from './components';
+export * from './constants';
+export * from './hooks';
+export * from './i18n/configure';
+export * from './utils';
+export * from './validators';

package/build/esm/lib/kit/index.js

@@ -0,0 +1,6 @@
+export * from './components';
+export * from './constants';
+export * from './hooks';
+export * from './i18n/configure';
+export * from './utils';
+export * from './validators';

package/build/esm/lib/kit/utils/bigIntMath.d.ts

@@ -0,0 +1,2 @@
+export declare const multiply: (a: string, b: string, afterDotLength?: number) => string | null;
+export declare const divide: (a: string, b: string, afterDotLength?: number) => string | null;

package/build/esm/lib/kit/utils/bigIntMath.js

@@ -0,0 +1,56 @@
+const discardRightZeros = (num) => {
+    return !num || num[num.length - 1] !== '0' ? num : discardRightZeros(num.slice(0, -1));
+};
+// only positive degree
+const mathPow = (degree) => {
+    const factor = BigInt(10);
+    let cnt = degree;
+    let result = BigInt(1);
+    while (cnt-- > 0) {
+        result = result * factor;
+    }
+    return result;
+};
+export const multiply = (a, b, afterDotLength) => {
+    try {
+        const [aBefore, aAfter = ''] = a.split('.');
+        const [bBefore, bAfter = ''] = b.split('.');
+        const digitCapacityDegree = aAfter.length + bAfter.length;
+        const digitCapacity = mathPow(aAfter.length + bAfter.length);
+        const multiplied = BigInt(`${aBefore}${aAfter}`) * BigInt(`${bBefore}${bAfter}`);
+        const integerPart = multiplied / digitCapacity;
+        const fractionalPart = multiplied % digitCapacity;
+        const fractionalPartZeros = digitCapacityDegree > 0
+            ? '0'.repeat(digitCapacityDegree - String(fractionalPart || '').length)
+            : '';
+        const stringFractionalPart = fractionalPartZeros + fractionalPart;
+        const slicedFractionalPart = discardRightZeros(stringFractionalPart.slice(0, afterDotLength));
+        return `${integerPart}${BigInt(slicedFractionalPart) ? `.${slicedFractionalPart}` : ''}`;
+    }
+    catch (_a) {
+        return null;
+    }
+};
+export const divide = (a, b, afterDotLength) => {
+    try {
+        const [aBefore, aAfter = ''] = a.split('.');
+        const [bBefore, bAfter = ''] = b.split('.');
+        const MIN_RESERVE = 20;
+        const reserve = (afterDotLength && afterDotLength > MIN_RESERVE ? afterDotLength : MIN_RESERVE) +
+            b.length;
+        const digitCapacityDegree = reserve + aAfter.length - bAfter.length;
+        const digitCapacity = mathPow(digitCapacityDegree);
+        const divided = (BigInt(`${aBefore}${aAfter}`) * mathPow(reserve)) / BigInt(`${bBefore}${bAfter}`);
+        const integerPart = divided / digitCapacity;
+        const fractionalPart = divided % digitCapacity;
+        const fractionalPartZeros = digitCapacityDegree > 0
+            ? '0'.repeat(digitCapacityDegree - String(fractionalPart || '').length)
+            : '';
+        const stringFractionalPart = fractionalPartZeros + fractionalPart;
+        const slicedFractionalPart = discardRightZeros(stringFractionalPart.slice(0, afterDotLength));
+        return `${integerPart}${BigInt(slicedFractionalPart) ? `.${slicedFractionalPart}` : ''}`;
+    }
+    catch (_a) {
+        return null;
+    }
+};

package/build/esm/lib/kit/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import blockOrigin from 'bem-cn-lite';
+export declare const block: (name: string) => ReturnType<typeof blockOrigin>;

package/build/esm/lib/kit/utils/cn.js

@@ -0,0 +1,3 @@
+import blockOrigin from 'bem-cn-lite';
+const NAMESPACE = 'df-';
+export const block = (name) => blockOrigin(`${NAMESPACE}${name}`);