<|start_filename|>packages/ui-schema/src/JSONPointer/pointerToKeySeq.js<|end_filename|>
import {List} from 'immutable'
import {unescapePointer} from '@ui-schema/ui-schema/JSONPointer/unescapePointer';

function isInt(value) {
    let x;
    if(isNaN(value)) {
        return false;
    }
    x = parseFloat(value);
    return (x | 0) === x;
}

export const pointerToKeySeq = (pointer) => {
    // todo: take # fragment pointers into account for correct descaping (URI decode)
    // if(pointer.indexOf('#/') === 0) {}
    let pointerPoints = pointer.split('/')
    pointerPoints.splice(0, 1)
    pointerPoints = pointerPoints.map(point => {
        let key = unescapePointer(point)
        const nKey = key.trim() !== '' && Number(key)
        if(!isNaN(nKey) && isInt(nKey) && key.indexOf('.') === -1) {
            key = parseInt(key)
        }
        return key
    })
    if(pointerPoints.length === 1 && pointerPoints[0] === '') {
        pointerPoints.splice(0, 1)
    }
    //console.log(pointerPoints, pointer)
    return List(pointerPoints)
}


<|start_filename|>packages/dictionary/src/en/richText.js<|end_filename|>
export const richText = {
    'rich-text-h1': 'Headline 1',
    'rich-text-h2': 'Headline 2',
    'rich-text-h3': 'Headline 3',
    'rich-text-h4': 'Headline 4',
    'rich-text-h5': 'Headline 5',
    'rich-text-h6': 'Headline 6',
    'rich-text-quote': 'Quote',
    'rich-text-li': 'List',
    'rich-text-ol': 'Ordered List',
    'rich-text-code': 'Code Block',
    'rich-text-code-inline': 'Code Part',
    'rich-text-bold': 'Format Bold',
    'rich-text-italic': 'Format Italic',
    'rich-text-underline': 'Format Underline',
    'rich-text-enabled-markdown': 'MarkDown enabled',
}


<|start_filename|>packages/material-color/src/Compact/index.js<|end_filename|>
export * from './Compact'


<|start_filename|>packages/ui-schema/src/Utils/useImmutable/useImmutable.js<|end_filename|>
import React from 'react'
import {isImmutable, Record} from 'immutable'

/*
 * If the value passed in is structurally equal to the one saved in the ref,
 * it will return the one saved in the ref to preserve reference equality
 */
export function useImmutable(value) {
    const currentState = React.useRef(value)
    if(
        (!isImmutable(currentState.current) && !Record.isRecord(value)) ||
        !currentState.current?.equals(value)
    ) {
        // update the referenced immutable when:
        // - value is not a immutable (Map/List) AND is not a Record (as `isImmutable` doesn't check for records)
        // - the current state doesn't equal the next value - what must only be done when not an immutable data type
        currentState.current = value
    }
    return currentState.current
}


<|start_filename|>packages/material-color/src/Color/index.js<|end_filename|>
export * from './Color'


<|start_filename|>packages/docs/src/t.js<|end_filename|>
import React from 'react';
import AccountBox from '@material-ui/icons/AccountBox';
import {makeTranslator, createMap} from '@ui-schema/ui-schema';
import * as en from '@ui-schema/dictionary/en'
import * as de from '@ui-schema/dictionary/de'

const icons = {
    'AccountBox': () => <AccountBox/>,
};

const dicEN = createMap({
    error: en.errors,
    labels: {...en.labels, ...en.richText, ...en.dnd},
    formats: {...en.formats},
    pagination: {...en.pagination},
    // for material-ui only icons which are set manually through schema are needed to add
    icons,
});

const dicDE = createMap({
    error: de.errors,
    labels: {...de.labels, ...de.richText, ...de.dnd},
    formats: {...de.formats},
    pagination: {...de.pagination},
    icons,
});

const tEN = makeTranslator(dicEN, 'en');
const tDE = makeTranslator(dicDE, 'de');

const browserT = (text, context, schema) => {
    const locale = window.localStorage.getItem('locale') || navigator.language;
    return locale === 'de' ? tDE(text, context, schema) : tEN(text, context, schema);
};

export {browserT}


<|start_filename|>packages/ui-schema/src/Utils/useImmutable/index.js<|end_filename|>
export * from './useImmutable'


<|start_filename|>packages/material-color/src/Twitter/Twitter.js<|end_filename|>
import {restrictColors} from "../Base/restrictColors";
import {ColorBase} from "../Base/ColorBase/ColorBase";
import React from "react";
import merge from "deepmerge";
import useTheme from "@material-ui/core/styles/useTheme";
import {TwitterPicker} from 'react-color';
import {ColorStaticBase} from "../Base/ColorStaticBase/ColorStaticBase";

const styles = ({palette, value}) => ({
    'default': {
        card: {
            marginTop: 6,
            background: palette.background.paper,
        },
        triangle: {
            borderColor: `transparent transparent ${
                value ||
                palette.divider
            } transparent`,
        },
        hash: {
            background: 'transparent',
            border: '1px solid transparent',
            borderRight: 0,
            marginTop: 2,
            borderBottomColor: palette.grey[500],
        },
        input: {
            background: 'transparent',
            border: '1px solid transparent',
            borderLeft: 0,
            borderBottomColor: palette.grey[500],
            boxShadow: 0,
        },
    }
});

const ColorTwitter = (props) => {
    const {palette} = useTheme();

    const pickerProps = {};
    restrictColors(pickerProps, props.schema);

    return <ColorBase
        {...props} styles={styles({palette, value: props.value})}
        ColorPicker={TwitterPicker}
        pickerProps={pickerProps}
    />
};

const stylesStatic = ({palette, value}) => merge(styles({palette, value}), {
    'default': {
        card: {
            width: '100%',
            marginTop: 6,
            background: palette.background.paper,
            boxShadow: 0,
            padding: 0,
        },
        body: {
            padding: 0,
        },
    }
});

const ColorTwitterStatic = (props) => {
    const {palette,} = useTheme();

    const pickerProps = {triangle: 'hide'};
    restrictColors(pickerProps, props.schema);

    return <ColorStaticBase
        {...props} styles={stylesStatic({palette, value: props.value})}
        ColorPicker={TwitterPicker}
        pickerProps={pickerProps}
    />
};

export {ColorTwitter, ColorTwitterStatic}


<|start_filename|>packages/ui-schema/src/Utils/createMap/createMap.js<|end_filename|>
import {Seq, List, Map, OrderedMap, fromJS} from 'immutable';

export function fromJSOrdered(js) {
    if(Map.isMap(js) || OrderedMap.isOrderedMap(js) || List.isList(js)) {
        if(process.env.NODE_ENV === 'development') {
            console.warn('converting immutable to immutable may lead to wrong types');
        }
    }

    return typeof js !== 'object' || js === null ? js :
        Array.isArray(js) ?
            Seq(js).map(fromJSOrdered).toList() :
            Seq(js).map(fromJSOrdered).toOrderedMap();
}

export const createOrderedMap = (data = {}) => new OrderedMap(fromJSOrdered(data));

export const createMap = (data = {}) => new Map(fromJS(data));


<|start_filename|>packages/ds-material/src/Widgets/Stepper/index.js<|end_filename|>
export * from './Stepper'

<|start_filename|>packages/ui-schema/src/JSONPointer/resolvePointer.js<|end_filename|>
import {pointerToKeySeq} from '@ui-schema/ui-schema/JSONPointer/pointerToKeySeq';

/**
 * @param {string} pointer
 * @param {Map<string, any>} data
 * @return {any}
 */
export const resolvePointer = (pointer, data) => {
    const keySeq = pointerToKeySeq(pointer)
    return keySeq.size ? data.getIn(keySeq) : data
}


<|start_filename|>packages/ui-schema/src/Validators/ValueValidator/index.js<|end_filename|>
export * from './valueValidatorConst'
export * from './valueValidatorEnum'


<|start_filename|>packages/ui-schema/src/PluginSimpleStack/PluginSimpleStack.js<|end_filename|>
import React from 'react';
import {getNextPlugin} from '@ui-schema/ui-schema/PluginStack/PluginStack';

export const handlePluginSimpleStack = (props, pluginSimpleStack) => {
    if(pluginSimpleStack && Array.isArray(pluginSimpleStack)) {
        pluginSimpleStack.forEach(propsPlugin => {
            if(typeof propsPlugin.handle !== 'function') {
                return;
            }

            if(typeof propsPlugin.should === 'function') {
                if(!propsPlugin.should(props)) {
                    if(typeof propsPlugin.noHandle === 'function') {
                        props = {...props, ...propsPlugin.noHandle(props)};
                    }
                    return;
                }
            }

            props = {...props, ...propsPlugin.handle(props)};
        });
    }

    return props;
}

export const PluginSimpleStack = ({currentPluginIndex, ...props}) => {
    const next = currentPluginIndex + 1;
    const Plugin = getNextPlugin(next, props.widgets)
    return <Plugin {...handlePluginSimpleStack(props, props.widgets.pluginSimpleStack)} currentPluginIndex={next}/>;
}


<|start_filename|>packages/ui-schema/src/Validators/RequiredValidator/index.js<|end_filename|>
export * from './RequiredValidator'

<|start_filename|>packages/docs/src/content/docs/widgets/Drag-n-Drop-Editor.js<|end_filename|>
const blocks = {
    text: {
        type: 'object',
        properties: {
            $bid: {
                hidden: true,
                type: 'string',
            },
            $block: {
                hidden: true,
                type: 'string',
            },
            text: {
                type: 'string',
                widget: 'Text',
                view: {
                    hideTitle: true,
                },
            },
        },
        required: ['$bid', '$block'],
    },
    teasers: {
        type: 'object',
        properties: {
            $bid: {
                hidden: true,
                type: 'string',
            },
            $block: {
                hidden: true,
                type: 'string',
            },
            list: {
                type: 'array',
                widget: 'GenericList',
                view: {
                    hideTitle: true,
                },
                items: {
                    type: 'object',
                    properties: {
                        headline: {
                            type: 'string',
                        },
                        content: {
                            type: 'string',
                            widget: 'Text',
                        },
                    },
                },
            },
        },
        required: ['$bid', '$block'],
    },
    'block_group': {
        type: 'object',
        view: {
            noGrid: true,
        },
        properties: {
            $bid: {
                hidden: true,
                type: 'string',
            },
            $block: {
                hidden: true,
                type: 'string',
            },
            list: {
                type: 'array',
                widget: 'DroppablePanel',
            },
        },
        required: ['$bid', '$block'],
    },
    address: {
        type: 'object',
        widget: 'FormGroup',
        properties: {
            $bid: {
                hidden: true,
                type: 'string',
            },
            $block: {
                hidden: true,
                type: 'string',
            },
            street_address: {
                type: 'string',
            },
            city: {
                type: 'string',
            },
            state: {
                type: 'string',
            },
            country: {
                type: 'string',
                widget: 'Select',
                'enum': [
                    'Germany',
                    'France',
                    'Spain',
                    'Ireland',
                    'Italy',
                ],
            },
        },
        required: [
            'city',
            'country',
        ],
    },
    'addresses': {
        type: 'object',
        view: {
            noGrid: true,
        },
        properties: {
            $bid: {
                hidden: true,
                type: 'string',
            },
            $block: {
                hidden: true,
                type: 'string',
            },
            list: {
                type: 'array',
                widget: 'DroppablePanel',
                dragDrop: {
                    allowed: ['address'],
                    nameOfBlock: {
                        en: 'address',
                        de: 'Addresse',
                    },
                },
            },
        },
        required: ['$bid', '$block'],
    },
}

export const demoDragnDropEditor = [
    [
        `Multiple draggable roots with panels as item container`,
        {
            type: 'object',
            widget: 'DroppableRootMultiple',
            $defs: blocks,
            properties: {
                main: {
                    type: 'array',
                    //widget: 'EditorJS',
                },
                suggestions: {
                    type: 'array',
                    //widget: 'Text',
                },
            },
        },
    ],
    [
        `Single draggable root`,
        {
            type: 'array',
            widget: 'DroppableRootSingle',
            $defs: blocks,
            title: 'Single Editor',
        },
    ],
];


<|start_filename|>packages/demo/src/schemas/demoDatePickers.js<|end_filename|>
import {createOrderedMap} from '@ui-schema/ui-schema';

const schemaDatePickers = createOrderedMap({
    type: 'object',
    properties: {
        timeInMs1: {
            'type': 'string',
            'format': 'date+time',
            'widget': 'DateTime',
            'default': 'now',
            'date': {
                'keyboard': false,
                'clearable': true,
                'toolbar': true,
                'views': [
                    'year',
                    'month',
                    'date',
                    'hours',
                    'minutes',
                ],
                'format': 'dd.MM.yyyy HH:mm z',
                'formatData': 'X',
            },
            'view': {
                'sizeXs': 12,
                'sizeMd': 4,
            },
        },
        timeInMs: {
            'type': 'string',
            'format': 'date+time',
            'widget': 'DateTime',
            'date': {
                'variant': 'inline',
                'clearable': true,
                'toolbar': true,
                'format': 'yyyy-MM-ddTZZ',
                'formatData': 'x',
            },
        },
        time: {
            type: 'string',
            format: 'time',
            widget: 'Time',
            date: {
                variant: 'inline',
                format: 'HH.mm',
                formatData: 'HH:mm',
                ampm: false,
            },
            view: {
                sizeXs: 12,
                sizeMd: 4,
            },
        },
        time_mobile: {
            type: 'string',
            format: 'time',
            widget: 'Time',
            default: 'now',
            date: {
                keyboard: false,
                clearable: true,
                toolbar: true,
                views: ['hours', 'minutes'],
            },
            view: {
                sizeXs: 12,
                sizeMd: 4,
            },
        },
        time_view: {
            type: 'string',
            format: 'time',
            widget: 'Time',
            default: '10:11',
            date: {
                clearable: true,
            },
            view: {
                sizeXs: 12,
                sizeMd: 4,
            },
        },
        time_static_l: {
            type: 'string',
            format: 'time',
            widget: 'Time',
            date: {
                variant: 'static',
                keyboard: false,
                autoOk: true,
                toolbar: true,
            },
            view: {
                sizeXs: 12,
                sizeMd: 6,
                justify: 'center',
            },
        },
        time_static_p: {
            type: 'string',
            format: 'time',
            widget: 'Time',
            date: {
                variant: 'static',
                formatData: 'HH:mm',
                openTo: 'year',
                keyboard: false,
                autoOk: true,
                minDate: '10:20',
                maxDate: '20:20',
            },
            view: {
                sizeXs: 12,
                sizeMd: 6,
                justify: 'right',
            },
        },
        datetime: {
            type: 'string',
            format: 'date+time',
            widget: 'DateTime',
            date: {
                variant: 'inline',
                clearable: true,
                format: 'dd.MM.yyyy HH:mm',
                formatData: 'yyyy/dd/MM HH:mm',
            },
            view: {
                sizeXs: 12,
                sizeMd: 4,
            },
        },
        datetime_mobile: {
            type: 'string',
            format: 'date+time',
            widget: 'DateTime',
            default: 'now',
            date: {
                keyboard: false,
                clearable: true,
                toolbar: true,
                views: ['year', 'month', 'date', 'hours', 'minutes'],
            },
            view: {
                sizeXs: 12,
                sizeMd: 4,
            },
        },
        datetime_view: {
            type: 'string',
            format: 'date+time',
            widget: 'DateTime',
            default: '2017-10-30 12:11',
            date: {
                clearable: true,
            },
            view: {
                sizeXs: 12,
                sizeMd: 4,
            },
        },
        datetime_static_l: {
            type: 'string',
            format: 'date+time',
            widget: 'DateTime',
            date: {
                variant: 'static',
                keyboard: false,
                autoOk: true,
                toolbar: true,
            },
            view: {
                sizeXs: 12,
                sizeMd: 6,
                justify: 'center',
            },
        },
        datetime_static_p: {
            type: 'string',
            format: 'date+time',
            widget: 'DateTime',
            date: {
                variant: 'static',
                formatData: 'yyyy-MM-dd HH',
                views: ['year', 'month', 'date', 'hours'],
                openTo: 'year',
                keyboard: false,
                autoOk: true,
                minDate: '2018',
                maxDate: '2023',
            },
            view: {
                sizeXs: 12,
                sizeMd: 6,
                justify: 'right',
            },
        },
        date: {
            type: 'string',
            format: 'date',
            widget: 'Date',
            date: {
                variant: 'inline',
                clearable: true,
            },
            view: {
                sizeXs: 12,
                sizeMd: 4,
            },
        },
        year_mobile: {
            type: 'string',
            format: 'date',
            widget: 'Date',
            default: 'now',
            date: {
                format: 'y',
                keyboard: false,
                clearable: true,
                views: ['year'],
            },
            view: {
                sizeXs: 12,
                sizeMd: 4,
            },
        },
        date_view: {
            type: 'string',
            format: 'date',
            widget: 'Date',
            date: {
                format: 'y-MM',
                clearable: true,
                views: ['year', 'month'],
            },
            view: {
                sizeXs: 12,
                sizeMd: 4,
            },
        },
        date_static_l: {
            type: 'string',
            format: 'date',
            widget: 'Date',
            date: {
                variant: 'static',
                orientation: 'landscape',
                keyboard: false,
                autoOk: true,
                toolbar: true,
            },
            view: {
                sizeXs: 12,
                sizeMd: 7,
            },
        },
        date_static_p: {
            type: 'string',
            format: 'date',
            widget: 'Date',
            date: {
                variant: 'static',
                orientation: 'portrait',
                format: 'y',
                views: ['year'],
                openTo: 'year',
                keyboard: false,
                autoOk: true,
                minDate: '2018',
                maxDate: '2023',
            },
            view: {
                sizeXs: 12,
                sizeMd: 5,
            },
        },
    },
});

export {schemaDatePickers}


<|start_filename|>packages/docs/src/component/I18nRedir.js<|end_filename|>
import {useHistory} from 'react-router-dom';
import {useTranslation} from "react-i18next";

const loadLang = window.localStorage.getItem('i18nextLng');

const I18nRedir = ({to}) => {
    const {i18n} = useTranslation();
    const history = useHistory();

    // we can't trust i18n's current language
    // we wan't to redirect short urls like `/admin` to `/admin`
    // but `/admin` lead to `admin` as current language

    let estimatedLanguage = loadLang && loadLang.length === 2 ? loadLang : i18n.options.defaultLanguage;
    history.push('/' + estimatedLanguage + (to ? '/' + to : ''));

    return null;
};

export {I18nRedir}


<|start_filename|>packages/ui-schema/src/PluginSimpleStack/index.js<|end_filename|>
export * from './PluginSimpleStack'


<|start_filename|>packages/dictionary/src/en/index.js<|end_filename|>
export * from './dnd'
export * from './errors'
export * from './formats'
export * from './labels'
export * from './pagination'
export * from './richText'


<|start_filename|>packages/ui-schema/src/ValidatorErrors/index.js<|end_filename|>
export * from './ValidatorErrors'


<|start_filename|>packages/demo/src/schemas/demoSlate.js<|end_filename|>
import {createOrderedMap} from '@ui-schema/ui-schema';

export const schemaDemoSlate = createOrderedMap({
    type: 'object',
    properties: {
        texts: {
            type: 'array',
            widget: 'GenericList',
            items: {
                type: 'array',
                widget: 'RichContent',
                editor: {
                    placeholder: 'Write something great!',
                },
                view: {
                    sizeXs: 10,
                },
            },
        },
        text_1: {
            type: 'array',
            widget: 'RichContent',
            editor: {
                placeholder: 'Write something great!',
            },
            view: {
                sizeXs: 10,
            },
        },
        pure: {
            type: 'string',
            widget: 'Text',
            view: {
                sizeXs: 2,
            },
        },
        text_2a: {
            type: 'array',
            widget: 'RichContent',
            //default: 'Something',
            view: {
                sizeXs: 10,
                sizeMd: 5,
            },
            editor: {
                initialRoot: 'h1',
                enableOnly: [
                    'p',
                    'h1',
                    'h2',
                    'h3',
                    'bold',
                    'italic',
                    'align_right',
                    'align_center',
                    'align_justify',
                ],
            },
        },
        text_2b: {
            type: 'array',
            widget: 'RichContent',
            view: {
                sizeXs: 10,
                sizeMd: 5,
            },
            editor: {
                initialRoot: 'h1',
                enableOnly: [
                    'p',
                    'h1',
                    'h2',
                    'h3',
                    'block_quote',
                    'align_right',
                    'align_center',
                    'align_justify',
                ],
                hideBalloon: true,
            },
        },
        pure2: {
            type: 'string',
            widget: 'Text',
            view: {
                sizeXs: 2,
            },
        },
        text_dense: {
            type: 'array',
            widget: 'RichContent',
            view: {
                sizeXs: 10,
                dense: true,
                //hideMd: true,
            },
        },
        pure_dense: {
            type: 'string',
            widget: 'Text',
            view: {
                dense: true,
                sizeXs: 2,
            },
        },
        pure3: {
            type: 'string',
            widget: 'Text',
            view: {
                sizeXs: 2,
            },
        },
        text_default: {
            type: 'array',
            widget: 'RichContent',
            view: {
                sizeMd: 12,
            },
            default: [
                {
                    'type': 'h1',
                    'children': [
                        {
                            'text': 'Headline 1',
                        },
                    ],
                },
                {
                    'type': 'h2',
                    'children': [
                        {
                            'text': 'Headline 2',
                        },
                    ],
                },
                {
                    'type': 'h3',
                    'children': [
                        {
                            'text': 'Headline 3',
                        },
                    ],
                },
                {
                    'type': 'h4',
                    'children': [
                        {
                            'text': 'Headline 4',
                        },
                    ],
                },
                {
                    'type': 'h5',
                    'children': [
                        {
                            'text': 'Headline 5',
                        },
                    ],
                },
                {
                    'type': 'h6',
                    'children': [
                        {
                            'text': 'Headline 6',
                        },
                    ],
                },
                {
                    'type': 'p',
                    'children': [
                        {
                            'text': 'Lorem Ipsum dolor sit, this is a body 1.',
                        },
                    ],
                },
                {
                    'type': 'ul',
                    'children': [
                        {
                            'type': 'li',
                            'children': [
                                {
                                    'text': 'List',
                                },
                            ],
                        },
                        {
                            'type': 'li',
                            'children': [
                                {
                                    'text': 'List',
                                },
                            ],
                        },
                        {
                            'type': 'ul',
                            'children': [
                                {
                                    'type': 'li',
                                    'children': [
                                        {
                                            'text': 'Nested List, hard to make',
                                        },
                                    ],
                                },
                                {
                                    'type': 'li',
                                    'children': [
                                        {
                                            'text': 'As a little bit buggy',
                                        },
                                    ],
                                },
                            ],
                        },
                        {
                            'type': 'li',
                            'children': [
                                {
                                    'text': 'List End',
                                },
                            ],
                        },
                    ],
                },
                {
                    'type': 'p',
                    'children': [
                        {
                            'text': 'Lorem ipsum end of text.',
                        },
                    ],
                },
            ],
        },
        text_no_line: {
            type: 'array',
            widget: 'RichContent',
            view: {
                sizeMd: 12,
                noUnderline: true,
            },
            default: [
                {
                    'type': 'h1',
                    'children': [
                        {
                            'text': 'Headline 1',
                        },
                    ],
                },
                {
                    'type': 'p',
                    'children': [
                        {
                            'text': 'Lorem Ipsum dolor sit, this is a body 1.',
                        },
                    ],
                },
                {
                    'type': 'h2',
                    'children': [
                        {
                            'text': 'Headline 2',
                        },
                    ],
                },
                {
                    'type': 'p',
                    'children': [
                        {
                            'text': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. Pellentesque dignissim enim sit amet. Bibendum est ultricies integer quis auctor. Porttitor massa id neque aliquam. Sit amet porttitor eget dolor morbi non. Hendrerit gravida rutrum quisque non tellus. Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Mauris a diam maecenas sed enim. Nulla facilisi morbi tempus iaculis. Morbi tristique senectus et netus et malesuada fames. Amet massa vitae tortor condimentum lacinia quis vel eros donec. Magna fermentum iaculis eu non. Semper feugiat nibh sed pulvinar proin. Et malesuada fames ac turpis egestas maecenas pharetra. Morbi enim nunc faucibus a pellentesque.',
                        },
                    ],
                },
                {
                    'type': 'p',
                    'children': [
                        {
                            'text': 'Magna eget est lorem ipsum dolor sit amet consectetur adipiscing. Tempus egestas sed sed risus pretium quam vulputate dignissim. Mattis molestie a iaculis at erat. Molestie nunc non blandit massa enim nec dui nunc. Ornare lectus sit amet est placerat in egestas. Nec ullamcorper sit amet risus nullam eget felis eget. Bibendum neque egestas congue quisque egestas. Maecenas volutpat blandit aliquam etiam. Neque sodales ut etiam sit amet nisl purus in mollis. Platea dictumst vestibulum rhoncus est pellentesque. Ornare aenean euismod elementum nisi quis eleifend. Montes nascetur ridiculus mus mauris vitae ultricies leo integer malesuada.',
                        },
                    ],
                },
                {
                    'type': 'p',
                    'children': [
                        {
                            'text': 'Velit egestas dui id ornare arcu odio ut sem nulla. Pellentesque sit amet porttitor eget dolor morbi non arcu risus. Semper viverra nam libero justo laoreet. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Ac tortor vitae purus faucibus ornare suspendisse. In fermentum posuere urna nec tincidunt praesent. Ultricies leo integer malesuada nunc vel risus. Lacus luctus accumsan tortor posuere ac ut. Venenatis a condimentum vitae sapien. Mi proin sed libero enim sed faucibus turpis in eu. Blandit libero volutpat sed cras ornare arcu.',
                        },
                    ],
                },
            ],
        },
        text_inline: {
            type: 'array',
            widget: 'RichContentInline',
            view: {
                sizeXs: 8,
                sizeMd: 5,
            },
        },
        text_inline_dense: {
            type: 'array',
            widget: 'RichContentInline',
            view: {
                sizeXs: 8,
                sizeMd: 5,
                dense: true,
            },
        },
    },
});

export const schemaDemoSlateSingle = createOrderedMap({
    type: 'array',
    widget: 'RichContentPane',
    view: {
        sizeMd: 12,
    },
    /*editor: {
        enableOnly: [
            'p',
            'h1',
            'h2',
            'h3',
            'ul',
            'li',
            //'bold',
        ],
        hideBalloon: true,
    },*/
    default: [{
        'type': 'p',
        'children': [
            {
                'text': 'Velit egestas dui id ornare arcu odio ut sem nulla. Pellentesque sit amet porttitor eget dolor morbi non arcu risus. Semper viverra nam libero justo laoreet. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Ac tortor vitae purus faucibus ornare suspendisse. In fermentum posuere urna nec tincidunt praesent. Ultricies leo integer malesuada nunc vel risus. Lacus luctus accumsan tortor posuere ac ut. Venenatis a condimentum vitae sapien. Mi proin sed libero enim sed faucibus turpis in eu. Blandit libero volutpat sed cras ornare arcu.',
            },
        ],
    }],
});


<|start_filename|>packages/material-color/src/Twitter/index.js<|end_filename|>
export * from './Twitter'


<|start_filename|>packages/demo/src/schemas/demoDependencies.js<|end_filename|>
import {createOrderedMap} from "@ui-schema/ui-schema";

const schemaWDep1 = createOrderedMap({
    "type": "object",

    "properties": {
        "name": {
            "type": "string"
        },
        "credit_card": {
            "type": "string",
            "deleteOnEmpty": true,
        }
    },

    "required": ["name"],

    "dependentSchemas": {
        "credit_card": {
            "properties": {
                "billing_address": {"type": "string"}
            },
            "required": ["billing_address"]
        }
    }
});

const schemaWDep2 = createOrderedMap({
    type: "object",
    properties: {
        // here `country` is defined
        country_eu: {
            type: "boolean",
            deleteOnEmpty: true,
        },
        country_canada: {
            type: "boolean",
            deleteOnEmpty: true,
        }
    },
    dependencies: {
        country_eu: {
            properties: {
                privacy: {
                    type: "boolean",
                },
                maple_trees: {
                    minimum: 10,
                }
            },
            required: [
                "privacy"
            ]
        },
        country_canada: {
            properties: {
                maple_trees: {
                    type: "number",
                    deleteOnEmpty: true,
                }
            }
        }
    }
});

export {schemaWDep1, schemaWDep2}


<|start_filename|>packages/material-color/src/Material/index.js<|end_filename|>
export * from './Material'


<|start_filename|>packages/ui-schema/src/Validators/ObjectValidator/index.js<|end_filename|>
export * from './ObjectValidator'

<|start_filename|>packages/ui-schema/src/ObjectRenderer/ObjectRenderer.js<|end_filename|>
import React from 'react';
import {memo} from '@ui-schema/ui-schema/Utils/memo';
import {PluginStack} from '@ui-schema/ui-schema/PluginStack';

let ObjectRenderer = ({
                          level, schema, storeKeys, schemaKeys,
                          // todo: concept in validation
                          // for performance reasons, not pushing errors deeper
                          // eslint-disable-next-line no-unused-vars
                          errors,
                          ...props
                      }) => {
    const {isVirtual, widgets} = props
    const properties = schema.get('properties');

    if(!isVirtual && !widgets.GroupRenderer) {
        if(process.env.NODE_ENV === 'development') {
            console.error('Widget GroupRenderer not existing');
        }
        return null;
    }
    if(!properties) {
        if(process.env.NODE_ENV === 'development') {
            console.error('not rendering object, missing `properties`');
        }
        return null;
    }
    const GroupRenderer = widgets.GroupRenderer;

    const propertyTree = properties.map((childSchema, childKey) =>
        <PluginStack
            key={childKey}
            {...props}
            schema={childSchema} parentSchema={schema}
            storeKeys={storeKeys.push(childKey)}
            schemaKeys={schemaKeys?.push('properties').push(childKey)}
            level={level + 1}
        />,
    ).valueSeq()

    // no-properties could come from
    //   e.g. combining/conditional schemas which are currently not applied (e.g. a condition fails)
    return isVirtual ? propertyTree :
        properties ? <GroupRenderer level={level} schema={schema} noGrid={props.noGrid}>
            {propertyTree}
        </GroupRenderer> : null
};
ObjectRenderer = memo(ObjectRenderer);

export {ObjectRenderer}


<|start_filename|>packages/material-richtext/src/EditorControls/index.js<|end_filename|>
export * from './EditorControls'

<|start_filename|>packages/ui-schema/src/ObjectGroup/index.js<|end_filename|>
export * from './ObjectGroup'


<|start_filename|>packages/ui-schema/src/Validators/ArrayValidator/ArrayValidator.js<|end_filename|>
import {List, Map} from 'immutable';
import {validateSchema} from '@ui-schema/ui-schema/validateSchema';
import {createValidatorErrors} from '@ui-schema/ui-schema/ValidatorErrors';
import {ERROR_WRONG_TYPE} from '@ui-schema/ui-schema/Validators/TypeValidator/TypeValidator';
import {schemaTypeIs} from '@ui-schema/ui-schema/Utils/schemaTypeIs';

export const ERROR_DUPLICATE_ITEMS = 'duplicate-items';
export const ERROR_NOT_FOUND_CONTAINS = 'not-found-contains';
export const ERROR_MIN_CONTAINS = 'min-contains';
export const ERROR_MAX_CONTAINS = 'max-contains';
export const ERROR_ADDITIONAL_ITEMS = 'additional-items';

const findDuplicates = arr => arr.filter((item, index) => arr.indexOf(item) !== index);

/**
 * @param itemsSchema single schema or tuple schema
 * @param value
 * @param additionalItems
 * @return {{err: ValidatorErrorsType, found: number}}
 */
export const validateArrayContent = (itemsSchema, value, additionalItems = true) => {
    let err = createValidatorErrors();
    let found = 0;
    if(
        (List.isList(itemsSchema) || Array.isArray(itemsSchema))
    ) {
        // tuple validation
        if(List.isList(value) || Array.isArray(value)) {
            // for tuples, the actual item must be an array/list also
            // todo: add values as array support
            // todo: implement tuple validation
            //   actually, only `additionalItems` should be needed to be validated here, the other values should be validated when the input for them is rendered
            //   as "only what is mounted can be entered and validated"
            //   but they must be usable for within conditional schemas
            if(!validateAdditionalItems(additionalItems, value, itemsSchema)) {
                // todo: add index of erroneous item; or at all as one context list, only one error instead of multiple?
                err = err.addError(ERROR_ADDITIONAL_ITEMS, Map({}));
                found++
            }
            /* example: further nested validation
            const listSize = itemsSchema.size || 0
            value.forEach((val, i) => {
                if(i < listSize) {
                    let tmpErr = validateSchema(itemsSchema.get(i), val);
                    if(tmpErr.hasError()) {
                        err = err.addErrors(tmpErr)
                        found++
                    }
                }
            })*/
        } else {
            //console.log('val?.toJS()', /*val,*/ schema?.toJS(), value?.toJS())
            // when tuple schema but no-tuple value
            err = err.addError(ERROR_WRONG_TYPE, Map({actual: typeof value, arrayTupleValidation: true}));
            found++
        }
    }/* else if(
        itemsSchema.get('type') === 'array' &&
        (List.isList(nestedItemsSchema) || Array.isArray(nestedItemsSchema))
    ) {
        // nested tuple validation
        console.log('nested tuple validation', itemsSchema?.toJS())
    } else if(
        itemsSchema.get('type') === 'array' &&
        (Map.isMap(nestedItemsSchema) || typeof nestedItemsSchema === 'object')
    ) {
        // a nested "one-schema-for-all" array, nested in the current array
        console.log('nested one-schema-for-all', itemsSchema?.toJS())
    }*/ else if(!schemaTypeIs(itemsSchema.get('type'), 'array')) {
        // no nested array, one-schema for all items
        // not validating array content of array here, must be validated with next schema level
        for(let val of value) {
            let tmpErr = createValidatorErrors();
            // single-validation
            // Cite from json-schema.org: When items is a single schema, the additionalItems keyword is meaningless, and it should not be used.
            let tmpErr2 = validateSchema(itemsSchema, val);
            if(tmpErr2.hasError()) {
                tmpErr = tmpErr.addErrors(tmpErr2)
            }
            if(tmpErr.errCount === 0) {
                found++
            } else {
                err = err.addErrors(tmpErr);
            }
        }
    }

    return {
        err,
        found,
    };
};

export const validateAdditionalItems = (additionalItems, value, schema) => {
    return additionalItems === true || (
        additionalItems === false && (
            (List.isList(value) && value.size <= schema.size) ||
            (Array.isArray(value) && value.length <= schema.size)
        )
    )
}

export const validateItems = (schema, value) => {
    let items = schema.get('items');
    if(items && value) {
        let item_err = validateArrayContent(items, value, schema.get('additionalItems'));
        return item_err.err
    }

    return createValidatorErrors();
};

export const validateContains = (schema, value) => {
    let errors = createValidatorErrors();
    if(!schemaTypeIs(schema.get('type'), 'array')) return errors;

    const contains = schema.get('contains');
    if(!contains) return errors;
    let contains_type = contains.get('type');
    if(!contains_type) return errors;

    let minContains = schema.get('minContains');
    let maxContains = schema.get('maxContains');

    let item_err = validateArrayContent(contains, value, undefined);

    if(
        (item_err.found < 1 && typeof minContains === 'undefined' && typeof maxContains === 'undefined') ||
        (typeof minContains === 'number' && minContains > item_err.found) ||
        (typeof maxContains === 'number' && maxContains < item_err.found)
    ) {
        if(item_err.err.errCount !== 0) {
            errors = errors.addErrors(item_err.err);
        }
    }

    if(typeof minContains === 'number' && minContains > item_err.found) {
        errors = errors.addError(ERROR_MIN_CONTAINS, Map({minContains}));
    }
    if(typeof maxContains === 'number' && maxContains < item_err.found) {
        errors = errors.addError(ERROR_MAX_CONTAINS, Map({maxContains}));
    }

    if(
        minContains !== 0 &&
        ((Array.isArray(value) && value.length === 0) || (List.isList(value) && value.size === 0))
    ) {
        errors = errors.addError(ERROR_NOT_FOUND_CONTAINS);
    }

    return errors;
};

export const validateUniqueItems = (schema, value) => {
    let uniqueItems = schema.get('uniqueItems');
    if(uniqueItems && (List.isList(value) || Array.isArray(value))) {
        let duplicates = findDuplicates(value);
        if(Array.isArray(duplicates)) {
            return duplicates.length === 0;
        } else if(List.isList(duplicates)) {
            return duplicates.size === 0;
        }
    }
    return true;
}

export const arrayValidator = {
    should: ({schema, value}) => {
        return schemaTypeIs(schema.get('type'), 'array') &&
            (List.isList(value) || Array.isArray(value))
    },
    handle: ({schema, value, errors, valid}) => {
        // unique-items sub-schema is intended for dynamics and for statics, e.g. Selects could have duplicates but also a SimpleList of strings
        let uniqueItems = schema.get('uniqueItems');
        if(uniqueItems && value) {
            if(!validateUniqueItems(schema, value)) {
                valid = false;
                errors = errors.addError(ERROR_DUPLICATE_ITEMS);
            }
        }

        /*
         * `items` sub-schema validation is intended for dynamic-inputs like SimpleList or GenericList
         * - thus the validity must also be checked in the components rendering the sub-schema,
         * - when validation is done here, the parent receives the invalidations instead of the actual component that is invalid
         * - e.g. 2 out of 3 are invalid, only one error is visible on the parent-component
         * - but when the items are not valid, the parent should also know that something is invalid
         * - providing context `arrayItems = true` for errors makes it possible to distinct the errors in the parent-component
         * - full sub-schema validation is done (and possible) if the sub-schema is rendered through e.g. PluginStack isVirtual
         */
        let items = schema.get('items');
        if(items && value) {
            let items_err = validateItems(schema, value);
            if(items_err.hasError()) {
                valid = false;
                //errors = errors.addChildErrors(items_err);
                errors = errors.addErrorsToChild(items_err);
            }
        }

        // `contains` sub-schema is intended for components which may be dynamic, but the error is intended to be shown on the root-component and not the sub-schema, as not clear which-sub-schema it is, "1 out of n sub-schemas must be valid" can not logically translated to "specific sub-schema X is invalid"
        // todo: the error displayed on the the array component may be confusing, it should be possible to distinct between "own-errors" and child-errors
        //    maybe adding a possibility to update the validity for sub-schemas from the parent-component?
        let contains = schema.get('contains');
        if(contains && value) {
            const containsError = validateContains(schema, value);
            if(containsError.hasError()) {
                valid = false;
                errors = errors.addErrors(containsError);
            }
        }
        return {errors, valid}
    },
};


<|start_filename|>packages/ui-schema/src/UIRootRenderer/index.js<|end_filename|>
export * from './UIRootRenderer'


<|start_filename|>packages/dictionary/src/en/pagination.js<|end_filename|>
export const pagination = {
    'first-page': 'First page',
    'prev-page': 'Prev. page',
    'next-page': 'Next page',
    'last-page': 'Last page',
    'total': 'Total',
    'rows-per-page': 'Rows per page',
    'of': 'of',
    'all': 'all',
}


<|start_filename|>packages/ui-schema/src/Utils/moveItem/moveItem.js<|end_filename|>
import {List} from 'immutable';

/**
 * Map and List compatible 'switch place of item' function
 * @param value
 * @param oldI
 * @param newI
 * @return {[]|*}
 */
export const moveItem = (value, oldI, newI) => {
    if(
        !value ||
        newI < 0 || value.size <= newI ||
        oldI < 0 || value.size <= oldI
    ) return value;

    if(List.isList(value)) {
        const srcItem = value.get(oldI);
        return value.splice(oldI, 1).splice(newI, 0, srcItem);
    }

    return value;
};


<|start_filename|>packages/demo/src/schemas/demoEditorJS.js<|end_filename|>
import {createOrderedMap} from '@ui-schema/ui-schema';

export const schemaDemoEditorJS = createOrderedMap({
    type: 'object',
    properties: {
        text_1: {
            type: 'object',
            widget: 'EditorJS',
            view: {
                sizeXs: 10,
            },
        },
        pure: {
            type: 'string',
            widget: 'Text',
            view: {
                sizeXs: 2,
            },
        },
        text_2: {
            type: 'object',
            widget: 'EditorJS',
            default: {
                time: 0,
                blocks: [{
                    'type': 'paragraph',
                    'data': {
                        'text': 'Lorem ipsum dolor sit amet.',
                    },
                }],
                'version': '2.19.1',
            },
            view: {
                sizeXs: 10,
            },
        },
        pure_2: {
            type: 'string',
            widget: 'Text',
            view: {
                sizeXs: 2,
            },
        },
        text_dense: {
            type: 'object',
            widget: 'EditorJS',
            view: {
                sizeXs: 10,
                dense: true,
            },
        },
        pure_dense: {
            type: 'string',
            widget: 'Text',
            view: {
                sizeXs: 2,
                dense: true,
            },
        },
    },
});


<|start_filename|>packages/ui-schema/src/Plugins/ReferencingHandler/index.js<|end_filename|>
export * from './parseRefs'
export * from './ReferencingHandler'
export * from './ReferencingNetworkHandler'
export * from './ReferencingProvider'
export * from './resolveRef'


<|start_filename|>packages/material-color/src/Alpha/index.js<|end_filename|>
export * from './Alpha'


<|start_filename|>packages/material-color/src/Hue/index.js<|end_filename|>
export * from './Hue'


<|start_filename|>packages/material-code/src/CodeProvider/index.js<|end_filename|>
export * from './CodeProvider'


<|start_filename|>packages/docs/src/component/Schema/EditorJSComp.js<|end_filename|>
import React from 'react';
import {EditorJSWidget} from '@ui-schema/material-editorjs/Widgets/EditorJSWidget';
import Paragraph from '@editorjs/paragraph'
import CheckList from '@editorjs/checklist'
import List from '@editorjs/list'
import Header from '@editorjs/header'
import Table from '@editorjs/table'

const tools = {
    paragraph: Paragraph,
    checkList: CheckList,
    list: List,
    header: Header,
    table: Table,
};

export const EditorJSComp = (props = {}) => {
    return <EditorJSWidget
        {...props}
        tools={tools}
    />
}


<|start_filename|>packages/material-code/src/CodeSelectable/index.js<|end_filename|>
export * from './CodeSelectable'


<|start_filename|>packages/material-richtext/src/styles.js<|end_filename|>
import makeStyles from "@material-ui/core/styles/makeStyles";

export const useEditorStyles = makeStyles(theme => ({
    wrapper: {
        display: 'flex',
        flexDirection: 'column',
        width: '100%',
    },
    editor: {
        position: 'relative',
        '& .DraftEditor-root': {
            padding: ({dense}) =>
                (dense ? theme.spacing(0.375) : theme.spacing(0.75))
                + 'px 0 ' + theme.spacing(0.75) + 'px 0',
            marginTop: theme.spacing(2),
        },
        '& .DraftEditor-editorContainer': {
            display: 'flex',
        },
        '& .public-DraftEditor-content': {
            width: '100%',
        },
        '& .public-DraftStyleDefault-depth0': {
            marginLeft: theme.spacing(0)
        },
        '& .public-DraftStyleDefault-depth1': {
            marginLeft: theme.spacing(2)
        },
        '& .public-DraftStyleDefault-depth2': {
            marginLeft: theme.spacing(4)
        },
        '& .public-DraftStyleDefault-depth3': {
            marginLeft: theme.spacing(6)
        },
        '& .public-DraftStyleDefault-depth4': {
            marginLeft: theme.spacing(8)
        },
    },
    markdown: {
        position: 'absolute',
        top: '0px',
        right: '4px',
        zIndex: 1,
    },
    markdownLabel: {
        position: 'absolute',
        right: 0,
        bottom: '-50%',
        whiteSpace: 'pre',
    },
}));

export const useControlStyles = makeStyles(theme => ({
    wrapper: {
        display: 'flex',
        flexWrap: 'wrap',
    },
    controlsTop: {
        position: 'absolute',
        left: theme.spacing(6),
        right: theme.spacing(6),
        zIndex: 2,
        top: ({dense}) =>
            dense ? -5 : -8,
    },
    controlsBottom: {
        marginBottom: theme.spacing(0),
        marginTop: ({dense}) =>
            dense ? theme.spacing(0.375) : theme.spacing(1),
        alignItems: 'flex-start',
    },
    controlsLabel: {
        flexShrink: 0,
        marginRight: 'auto',
    },
    controls: {
        display: 'flex',
        justifyContent: 'center',
        flexWrap: 'wrap',
        margin: '0 auto',
    },
}));


<|start_filename|>packages/ui-schema/src/SchemaRootProvider/SchemaRootProvider.js<|end_filename|>
import React from 'react'
import {getSchemaId} from '@ui-schema/ui-schema/Utils/getSchema';
import {memo} from '@ui-schema/ui-schema/Utils/memo';

export const isRootSchema = (schema) => {
    const id = getSchemaId(schema)
    // todo: is this "no fragment beginning" really the correct root for everything? e.g. $defs?
    return id && id.indexOf('#') !== 0
}

const SchemaRootContext = React.createContext({
    id: undefined,
    schema: undefined,
});

export const SchemaRootProviderBase = ({id, schema, children, ...further} = {}) => {
    const context = React.useMemo(() => ({
        id, schema, ...further,
    }), [id, schema, ...Object.values(further)])

    return <SchemaRootContext.Provider value={context}>
        {children}
    </SchemaRootContext.Provider>
}

export const SchemaRootProvider = memo(SchemaRootProviderBase)

export const useSchemaRoot = () => {
    return React.useContext(SchemaRootContext);
}


<|start_filename|>packages/ui-schema/src/Validators/ArrayValidator/index.js<|end_filename|>
export * from './ArrayValidator'

<|start_filename|>packages/ds-material/src/Component/LocaleHelperText/LocaleHelperText.js<|end_filename|>
import React from 'react';
import FormHelperText from '@material-ui/core/FormHelperText';
import {Trans} from '@ui-schema/ui-schema/Translate/Trans';

export const LocaleHelperText = ({text, schema, context, error = false}) => {
    return <FormHelperText error={error}>
        <Trans text={text} context={
            context ? context.set('type', schema.get('type'))
                .set('widget', schema.get('widget')) : undefined
        }/>
    </FormHelperText>
};

export const ValidityHelperText = ({showValidity, errors, schema, browserError}) =>
    schema.get('t') === 'browser' && browserError ?
        <FormHelperText error>
            {browserError}
        </FormHelperText> :
        showValidity && errors && errors.hasError() ?
            errors.getErrors().keySeq().map((type) =>
                errors.getError(type).map((err, i) =>
                    <LocaleHelperText
                        key={type + '.' + i} schema={schema} error
                        text={'error.' + type}
                        context={err}
                    />,
                ),
            ).valueSeq()
            : null;


<|start_filename|>packages/ui-schema/src/Translate/makeTranslator/index.js<|end_filename|>
export * from './makeTranslator'


<|start_filename|>packages/ui-schema/src/JSONPointer/escapePointer.js<|end_filename|>
export const escapePointer = (pointer) => {
    return pointer.replace(/~/g, '~0').replace(/\//g, '~1')
}


<|start_filename|>packages/dictionary/src/en/formats.js<|end_filename|>
export const formats = {
    css: 'CSS',
    mysql: 'MySQL',
    php: 'PHP',
    html: 'HTML',
    js: 'JS',
    json: 'JSON',
    jsx: 'ReactJS',
    tsx: 'ReactTS',
    ts: 'Typescript',
    nodejs: 'NodeJS',
}


<|start_filename|>packages/docs/src/page/DocsDetails.js<|end_filename|>
import React from 'react';
import {useTheme, Paper, Link} from '@material-ui/core';
import IcToc from '@material-ui/icons/Toc';
import {ScrollUpButton} from '@control-ui/kit/ScrollUpButton';
import PageNotFound from './PageNotFound';
import {DocDetails} from '@control-ui/docs/DocDetails';
import {HeadlineMenu} from '@control-ui/docs/LinkableHeadline';
import {PROCESS_ERROR, PROCESS_PROGRESS, PROCESS_START, PROCESS_SUCCESS} from '@control-ui/kit/Process';
import {LoadingCircular} from '@control-ui/kit/Loading/LoadingCircular';
import {Markdown} from '../component/Markdown';
import DemoUIGenerator from '../component/Schema/DemoUIGenerator';
import {PageContent} from '@control-ui/kit/PageContent';

const DocContent = ({content, id, progress, activeDoc}) => {
    const {palette} = useTheme()
    return <>
        <PageContent maxWidth={'md'}>
            <div style={{display: 'block', textAlign: 'right', margin: '0 12px'}}>
                <Link
                    target={'_blank'} rel="noreferrer noopener nofollow"
                    href={'https://github.com/ui-schema/ui-schema/tree/develop/packages/docs/src/content/docs/' + id + '.md'}
                >Edit Page</Link>
            </div>
            <Paper style={{margin: '12px 0', padding: 24, display: 'flex', flexDirection: 'column'}} elevation={4}>
                {progress === PROCESS_START || progress === PROCESS_PROGRESS ?
                    <LoadingCircular title={'Loading Docs'}/> :
                    progress === PROCESS_ERROR ?
                        'error' :
                        <React.Fragment>
                            <Markdown source={content} content/>
                        </React.Fragment>}
            </Paper>
            {progress === PROCESS_SUCCESS && activeDoc.context && activeDoc.context.demoUIGenerator ?
                <div style={{display: 'block', textAlign: 'right', margin: '0 12px'}}>
                    <Link
                        target={'_blank'} rel="noreferrer noopener nofollow"
                        href={'https://github.com/ui-schema/ui-schema/tree/develop/packages/docs/src/content/docs/' + id + 'Demo.js'}
                    >Edit Demos</Link>
                </div> : null}
            {progress === PROCESS_SUCCESS && activeDoc.context && activeDoc.context.demoUIGenerator ?
                <Paper style={{margin: '12px 0', padding: 24, display: 'flex', flexDirection: 'column'}} elevation={4}>
                    <Markdown
                        source={`
## Demo UI Generator

Examples of this widget, using \`ds-material\`. Type in/change the input and check the data or change the schema (e.g. add specific keywords from above), the demo generators are showing invalid directly.
`} content/>
                    {activeDoc.context.demoUIGenerator.map(([demoText, demoSchema], i) =>
                        <React.Fragment key={i}>
                            <Markdown source={demoText} content/>
                            <DemoUIGenerator activeSchema={demoSchema} id={'i-' + i}/>
                        </React.Fragment>)}
                </Paper>
                : null}

            <Paper
                style={{
                    /*margin: '12px 0',*/
                    padding: '0 12px',
                    display: 'flex',
                    flexDirection: 'column',
                    overflowX: 'auto',
                    opacity: progress === PROCESS_SUCCESS ? 1 : 0,
                    transition: '0.32s opacity ease-out',
                    flexShrink: 0,
                    position: 'sticky',
                    bottom: 0,
                    left: 0,
                    right: 0,
                    zIndex: 10,
                    maxHeight: '90vh',
                    //borderTop: '1px solid ' + palette.primary.main,
                    //background: palette.primary.main,
                }}
                elevation={4}
                variant={'elevation'}
            >
                <HeadlineMenu
                    disableNavLink
                    //style={{margin: 0, padding: 0}}
                    startIcon={<IcToc/>}
                    titleStyle={{color: palette.background.paper, fontWeight: 'bold', background: palette.primary.main}}
                    //linkItemStyle={{color: palette.background.paper}}
                />
            </Paper>
        </PageContent>
    </>
};

const DocsDetails = ({scrollContainer}) => {
    return <React.Fragment>
        <DocDetails
            scrollContainer={scrollContainer}
            title={activeDoc => activeDoc && activeDoc.nav && activeDoc.nav.label ?
                activeDoc.nav.label + ' · UI Schema' : 'UI Schema Documentation'}
            NotFound={PageNotFound}
            Content={DocContent}
        />
        <ScrollUpButton scrollContainer={scrollContainer}/>
    </React.Fragment>;
};

export default DocsDetails


<|start_filename|>packages/demo/src/schemas/demoDragDropEditable.js<|end_filename|>
import {createOrderedMap} from '@ui-schema/ui-schema';

const blocks = {
    text: {
        type: 'object',
        properties: {
            $bid: {
                hidden: true,
                type: 'string',
            },
            $block: {
                hidden: true,
                type: 'string',
            },
            content: {
                type: 'array',
                widget: 'RichContent',
                //default: [{type: 'string', widget: 'EditableParagraph', text: 'Placeholder'}],
            },
        },
        required: ['$bid', '$block'],
    },
    'block_group': {
        type: 'object',
        view: {
            noGrid: true,
        },
        properties: {
            $bid: {
                hidden: true,
                type: 'string',
            },
            $block: {
                hidden: true,
                type: 'string',
            },
            list: {
                type: 'array',
                widget: 'DroppablePanel',
            },
        },
        required: ['$bid', '$block'],
    },
}

export const schemaDragDropEditableSingle = createOrderedMap({
    type: 'array',
    widget: 'DroppableRootSingle',
    $defs: blocks,
    title: 'Editable Editor',
    dragDrop: {
        //showOpenAll: true,
        //allowed: ['address', 'addresses'],
    },
});

export const schemaEditable = createOrderedMap({
    type: 'object',
    title: 'Editable',
    properties: {
        text: {
            type: 'array',
            widget: 'EditableContent',
            default: [{type: 'string', widget: 'EditableParagraph', text: 'Placeholder'}],
        },
    },
});


<|start_filename|>packages/demo/src/material-ui/component/MuiSchemaDebug.js<|end_filename|>
import React from 'react';
import Paper from '@material-ui/core/Paper';
import useTheme from '@material-ui/core/styles/useTheme';
import {ImmutableEditor, themeMaterial} from "react-immutable-editor";
import {SchemaDebug} from "../../component/SchemaDebug";

const MuiJsonEditor = p => {
    const theme = useTheme();
    return <Paper
        square
        variant={'outlined'}
        style={{
            margin: theme.spacing(2) + 'px ' + theme.spacing(1) + 'px',
            padding: '0 ' + theme.spacing(1) + 'px',
        }}
        elevation={0}>

        <ImmutableEditor
            {...p}
            theme={{
                ...themeMaterial,
                type: theme.palette.type,
                base00: theme.palette.background.paper,
                base0D: theme.palette.text.secondary,
                base0B: theme.palette.text.primary,
            }}
        />
    </Paper>
};

export const MuiSchemaDebug = p => <SchemaDebug StyledEditor={MuiJsonEditor} {...p}/>;


<|start_filename|>packages/material-richtext/src/RichTextProvider/index.js<|end_filename|>
export * from './RichTextProvider'


<|start_filename|>packages/ui-schema/src/WidgetRenderer/VirtualWidgetRenderer.js<|end_filename|>
import React from 'react';
import {List} from 'immutable';
import {PluginStack} from '@ui-schema/ui-schema/PluginStack';
import {ObjectRenderer} from '@ui-schema/ui-schema/ObjectRenderer';
import {schemaTypeToDistinct} from '@ui-schema/ui-schema/Utils/schemaTypeToDistinct';

export const VirtualArrayRenderer = (
    {storeKeys, value, schema, virtualWidgets, widgets},
) =>
    value ? value.map((val, i) =>
        <PluginStack
            key={i}
            schema={
                List.isList(schema.get('items')) ?
                    schema.get('items').get(i)
                    : schema.get('items')
            }
            parentSchema={schema}
            storeKeys={storeKeys.push(i)}
            level={0}
            virtualWidgets={virtualWidgets}
            widgets={widgets}
            isVirtual
        />,
    ).valueSeq() : null;

export const VirtualWidgetRenderer = (props) => {
    const {
        schema, value,
        virtualWidgets = {
            'default': null,
            // `ObjectRenderer` is somehow `undefined` inside of `VirtualWidgetRenderer` when this object was defined outside of the component
            'object': ObjectRenderer,
            'array': VirtualArrayRenderer,
        },
    } = props;
    const type = schemaTypeToDistinct(schema.get('type'));

    let Widget = virtualWidgets['default'];

    if(type) {
        if(type === 'object') {
            Widget = virtualWidgets['object'];
        } else if(type === 'array') {
            Widget = virtualWidgets['array'];
        }
    }

    return Widget ? <Widget {...props} value={value}/> : null;
};


<|start_filename|>packages/ui-schema/src/applyPluginStack/applyPluginStack.js<|end_filename|>
import React from 'react'
import {PluginStack} from '@ui-schema/ui-schema/PluginStack'
import {getDisplayName} from '@ui-schema/ui-schema/Utils/memo'

export function applyPluginStack(CustomWidget) {
    const CustomStack = (p) =>
        <PluginStack
            {...p}
            WidgetOverride={CustomWidget}
        />

    CustomStack.displayName = `ApplyPluginStack(${getDisplayName(CustomWidget)})`
    return CustomStack
}


<|start_filename|>packages/docs/src/page/PageLiveEdit.js<|end_filename|>
import React from "react";
import {Head} from "@control-ui/kit/Head";
import LiveEditor from '../component/Schema/LiveEditor'

function PageLiveEdit() {
    return <>
        <Head
            title={'Examples and Live-Editor · UI-Schema'}
            description={'JSON-Schema examples and the rendered UI for it, from simple to conditional combining schemas.'}
        />
        <LiveEditor/>
    </>;
}

export default PageLiveEdit


<|start_filename|>packages/ui-schema/src/WidgetRenderer/index.js<|end_filename|>
export * from './WidgetRenderer'
export * from './VirtualWidgetRenderer'


<|start_filename|>packages/material-pickers/src/DateTime/index.js<|end_filename|>
export * from './DateTime'

<|start_filename|>packages/material-richtext/src/RichTextInline/index.js<|end_filename|>
export * from './RichTextInline'


<|start_filename|>packages/ui-schema/src/Plugins/DependentHandler/DependentHandler.js<|end_filename|>
import React from 'react';
import {getNextPlugin, NextPluginRendererMemo} from '@ui-schema/ui-schema/PluginStack';
import {useUI} from '@ui-schema/ui-schema/UIStore';
import {mergeSchema} from '@ui-schema/ui-schema/Utils/mergeSchema';
import {List, Map} from 'immutable';

const DependentRenderer = ({dependencies, dependentSchemas, dependentRequired, ...props}) => {
    let {schema, storeKeys} = props;
    const {store} = useUI();

    const currentValues = storeKeys.size ? store.getValues().getIn(storeKeys) : store.getValues();

    if(!currentValues) return <NextPluginRendererMemo {...props} schema={schema}/>;

    currentValues.keySeq().forEach(key => {
        const key_dependencies = dependencies ? dependencies.get(key) : undefined;
        const key_dependentSchemas = dependentSchemas ? dependentSchemas.get(key) : undefined;
        const key_dependentRequired = dependentRequired ? dependentRequired.get(key) : undefined;

        // todo: what if the `key`'s own schema should be dynamically changed?
        //   what to remove?
        //   what to keep? when keeping e.g. `const` it could destroy `enum`s

        // "if property is present", must not use "if correct type"
        if(typeof currentValues.get(key) !== 'undefined') {
            if(Map.isMap(key_dependencies) || Map.isMap(key_dependentSchemas)) {
                // schema-dependencies
                // value for dependency exist, so it should be used
                if(Map.isMap(key_dependencies)) {
                    schema = mergeSchema(schema, key_dependencies);
                } else {
                    schema = mergeSchema(schema, key_dependentSchemas);
                }
            }
            if(List.isList(key_dependencies) || List.isList(key_dependentRequired)) {
                // property-dependencies
                // value for dependency exist, so it should be used
                const currentRequired = schema.get('required') || List();
                if(List.isList(key_dependencies)) {
                    schema = schema.set('required', currentRequired.concat(key_dependencies));
                } else {
                    schema = schema.set('required', currentRequired.concat(key_dependentRequired));
                }
            }
        }
    });

    return <NextPluginRendererMemo {...props} schema={schema}/>;
};

export const DependentHandler = (props) => {
    let {storeKeys, ownKey, schema, currentPluginIndex} = props;
    const next = currentPluginIndex + 1;
    const Plugin = getNextPlugin(next, props.widgets)

    const dependencies = schema.get('dependencies');
    const dependentSchemas = schema.get('dependentSchemas');
    const dependentRequired = schema.get('dependentRequired');

    return <React.Fragment>
        {dependencies || dependentSchemas || dependentRequired ?
            <DependentRenderer
                dependencies={dependencies}
                dependentSchemas={dependentSchemas}
                dependentRequired={dependentRequired}
                storeKeys={storeKeys}
                ownKey={ownKey}
                {...props}/>
            : <Plugin {...props} currentPluginIndex={next}/>}
    </React.Fragment>;
};


<|start_filename|>packages/ui-schema/src/SchemaRootProvider/index.js<|end_filename|>
export * from './SchemaRootProvider'


<|start_filename|>packages/material-color/src/Base/index.js<|end_filename|>
export * from './ColorBase'
export * from './ColorDialogBase'
export * from './ColorStaticBase'
export * from './restrictColors'
export * from './transformers'


<|start_filename|>packages/material-code/src/CodeRenderer/index.js<|end_filename|>
export * from './CodeRenderer'


<|start_filename|>packages/ui-schema/src/Validators/RequiredValidator/RequiredValidator.js<|end_filename|>
import {List} from 'immutable';
import {schemaTypeIs, schemaTypeIsNumeric} from '@ui-schema/ui-schema';

const ERROR_NOT_SET = 'required-not-set';

const checkValueExists = (type, value) => {
    const valType = typeof value;

    if(valType === 'undefined') {
        return false;
    }

    if(schemaTypeIs(type, 'string') && valType === 'string') {
        return value !== '';
    } else if(valType === 'string' && schemaTypeIsNumeric(type)) {
        // 0 is also a valid number, so not checking for false here
        return value !== ''
    }

    return true;
};

const requiredValidator = {
    should: ({requiredList, ownKey}) => {
        if(requiredList && List.isList(requiredList)) {
            return requiredList.contains(ownKey);
        }
        return false
    },
    noHandle: () => ({required: false}),
    handle: ({schema, value, errors, valid}) => {
        let type = schema.get('type');
        if(!checkValueExists(type, value)) {
            valid = false;
            errors = errors.addError(ERROR_NOT_SET);
        }
        return {errors, valid, required: true}
    },
};

export {requiredValidator, ERROR_NOT_SET, checkValueExists}


<|start_filename|>packages/material-color/src/Sketch/index.js<|end_filename|>
export * from './Sketch'


<|start_filename|>packages/material-pickers/src/TimeBase/index.js<|end_filename|>
export * from './TimeBase'


<|start_filename|>packages/material-richtext/src/RichTextInline/RichTextInline.js<|end_filename|>
import React from "react";
import {RichText} from "../RichText/RichText";

export const RichTextInline = (props) => <RichText onlyInline {...props}/>;



<|start_filename|>packages/ui-schema/src/Translate/Trans/Trans.js<|end_filename|>
import React from 'react';
import {useUIMeta} from '@ui-schema/ui-schema/UIMeta';

/**
 * Translation component, supports dot strings, dictionary can be mixed strings, string functions and function components as translation
 */
export const Trans = ({t: customT, text, context, schema, fallback}) => {
    const {t} = useUIMeta();
    const Translated = customT ? customT(text, context, schema) : t(text, context, schema);

    return !Translated && Translated !== 0 && Translated !== '0' ?
        typeof fallback !== 'undefined' && fallback !== '' ? fallback : text :
        typeof Translated === 'string' || typeof Translated === 'number' || typeof Translated === 'object' ?
            Translated :
            typeof Translated === 'function' ?
                <Translated/> :
                text
};


<|start_filename|>packages/dictionary/src/en/dnd.js<|end_filename|>
export const dnd = {
    'dnd-close-selection': 'Close Selection',
    'dnd-add-new': (context) => 'Add new ' + (context.getIn(['name', 'en']) || 'block'),
    'dnd-add-a-block': (context) => 'Add a ' + (context.getIn(['name', 'en']) || 'block') + '!',
    'dnd-selection-title': 'Select Block',
    'dnd-show-block-info': 'Show Info',
    'dnd-close-all': 'Close All',
    'dnd-open-all': 'Open All',
    'dnd-move-up-down': 'Move up or down',
}


<|start_filename|>packages/ui-schema/src/Validators/ObjectValidator/ObjectValidator.js<|end_filename|>
import {List, Map, Record} from 'immutable';
import {createValidatorErrors} from '@ui-schema/ui-schema/ValidatorErrors';
import {validateSchema} from '@ui-schema/ui-schema/validateSchema';
import {schemaTypeIs} from '@ui-schema/ui-schema/Utils/schemaTypeIs';

export const ERROR_ADDITIONAL_PROPERTIES = 'additional-properties';

export const validateObject = (schema, value) => {
    let err = createValidatorErrors();
    if(
        !schemaTypeIs(schema.get('type'), 'object') ||
        !(Map.isMap(value) || Record.isRecord(value) || typeof value === 'object') || List.isList(value) || Array.isArray(value)) {
        return err
    }
    if(schema.get('additionalProperties') === false && schema.get('properties') && typeof value === 'object') {
        let hasAdditional = false;
        const keys = Map.isMap(value) ? value.keySeq() : Object.keys(value);
        const schemaKeys = schema.get('properties').keySeq();
        keys.forEach(key => {
            // todo: add all invalid additional or change to `for key of value` to break after first invalid
            if(schemaKeys.indexOf(key) === -1) hasAdditional = true;
        });
        if(hasAdditional) {
            err = err.addError(ERROR_ADDITIONAL_PROPERTIES);
        }
    }

    if(schema.get('propertyNames') && typeof value === 'object') {
        const keys = Map.isMap(value) ? value.keySeq() : Object.keys(value);
        keys.forEach(key => {
            let tmp_err = validateSchema(schema.get('propertyNames').set('type', 'string'), key);
            if(tmp_err.hasError()) {
                err = err.addErrors(tmp_err);
            }
        });
    }

    return err;
};

export const objectValidator = {
    should: ({schema}) => {
        return schemaTypeIs(schema.get('type'), 'object')
    },
    handle: ({schema, value, errors, valid}) => {
        const objectErrors = validateObject(schema, value);
        if(objectErrors?.hasError()) {
            valid = false;
            errors = errors.addErrors(objectErrors);
        }
        return {errors, valid}
    },
};


<|start_filename|>packages/ui-schema/src/ObjectGroup/ObjectGroup.js<|end_filename|>
import React from 'react';
import {applyPluginStack} from '@ui-schema/ui-schema/applyPluginStack';
import {useImmutable} from '@ui-schema/ui-schema/Utils/useImmutable';

const ObjectGroupBase = ({schema, children, onSchema}) => {
    const currentSchema = useImmutable(schema)

    React.useEffect(() => {
        if(onSchema) {
            onSchema(currentSchema)
        }
    }, [onSchema, currentSchema])

    return <>
        {children}
    </>
};
export const ObjectGroup = applyPluginStack(ObjectGroupBase);


<|start_filename|>packages/ds-material/src/Widgets/Stepper/Stepper.js<|end_filename|>
import React from 'react';
import makeStyles from '@material-ui/core/styles/makeStyles';
import MuiStepper from '@material-ui/core/Stepper';
import MuiStep from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import {memo} from '@ui-schema/ui-schema/Utils';
import {extractValidity} from '@ui-schema/ui-schema/UIStore';
import {isInvalid} from '@ui-schema/ui-schema/ValidityReporter';
import {PluginStack} from '@ui-schema/ui-schema/PluginStack';
import {TransTitle} from '@ui-schema/ui-schema/Translate/TransTitle';

const useStyles = makeStyles(theme => ({
    root: {
        width: '100%',
    },
    button: {
        marginRight: theme.spacing(1),
    },
    instructions: {
        marginTop: theme.spacing(1),
        marginBottom: theme.spacing(1),
    },
}));

export const Step = ({schema, storeKeys, level, ...p}) => {
    return <PluginStack
        schema={schema.delete('widget')}
        storeKeys={storeKeys} level={level + 1}
        {...p}
    />
};

export const Stepper = extractValidity(memo(
    ({
         schema, storeKeys, validity, level,
     }) => {
        if(!schema) return null;

        const [showValidity, setShowValidity] = React.useState(false);

        const classes = useStyles();
        const [activeStep, setActiveStep] = React.useState(0);
        const steps = schema.get('properties');
        const stepOrder = steps.keySeq();

        let activeStepInvalid = isInvalid(validity, [stepOrder.get(activeStep)]);

        const handleNext = () => {
            if(activeStepInvalid) {
                setShowValidity(true);
            } else {
                setShowValidity(false);
                setActiveStep(prevActiveStep => prevActiveStep + 1);
            }
        };

        const handleBack = () => {
            setActiveStep(prevActiveStep => prevActiveStep - 1);
        };

        const handleReset = () => {
            setActiveStep(0);
        };

        return <div className={classes.root}>
            <MuiStepper activeStep={activeStep}>
                {steps.map((step, name) => {
                    const stepProps = {};
                    const labelProps = {};
                    return (
                        <MuiStep key={name} {...stepProps}>
                            <StepLabel {...labelProps}><TransTitle schema={schema} storeKeys={storeKeys} ownKey={name}/></StepLabel>
                        </MuiStep>
                    );
                }).valueSeq()}
            </MuiStepper>
            <div>
                {activeStep === stepOrder.size ? (
                    <div>
                        <Typography className={classes.instructions}>
                            All steps completed - you&apos;re finished
                        </Typography>
                        <Button onClick={handleReset} className={classes.button}>
                            Reset
                        </Button>
                    </div>
                ) : (
                    <div>
                        <Typography className={classes.instructions}><TransTitle schema={schema} storeKeys={storeKeys} ownKey={stepOrder.get(activeStep)}/></Typography>

                        <PluginStack
                            showValidity={showValidity}
                            schema={steps.get(stepOrder.get(activeStep))} parentSchema={schema}
                            storeKeys={storeKeys.push(stepOrder.get(activeStep))} level={level + 1}
                        />

                        <div style={{margin: '24px 0 0 0'}}>
                            <Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>
                                Back
                            </Button>

                            <Button
                                variant="contained"
                                color="primary"
                                onClick={handleNext}
                                className={classes.button}
                            >
                                {activeStep === steps.size - 1 ? 'Finish' : 'Next'}
                            </Button>
                        </div>
                    </div>
                )}
            </div>
        </div>;
    },
));


<|start_filename|>packages/dictionary/src/de/labels.js<|end_filename|>
export const labels = {
    'loading': 'Lade..',
    'ok': 'Ok',
    'add': 'Hinzufügen',
    'remove': 'Entfernen',
    'delete': 'Löschen',
    'delete-confirm': 'Wirklich löschen?',
    'add-number': 'Neue Nummer',
    'add-entry': 'Neuer Eintrag',
    'entry': 'Eintrag',
    'remove-entry': 'Entferne Eintrag',
    'add-item': 'Neues Element',
    'remove-item': 'Lösche Element',
    'add-row': 'Neue Zeile',
    'remove-row': 'Lösche Zeile',
    'remove-rows': 'Lösche Zeilen',
    'move-up': 'Nach oben',
    'move-down': 'Nach unten',
    'move-to-position': (context) => `Verschiebe zur ${context.get('nextIndex')}. Position`,
}


<|start_filename|>packages/material-code/src/index.js<|end_filename|>
export * from './Code'
export * from './CodeProvider'
export * from './CodeRenderer'
export * from './CodeSelectable'


<|start_filename|>packages/dictionary/src/de/errors.js<|end_filename|>
import {
    ERROR_CONST_MISMATCH,
    ERROR_DUPLICATE_ITEMS,
    ERROR_ENUM_MISMATCH,
    ERROR_MAX_LENGTH,
    ERROR_MIN_LENGTH,
    ERROR_MULTIPLE_OF,
    ERROR_NOT_FOUND_CONTAINS,
    ERROR_NOT_SET,
    ERROR_PATTERN,
    ERROR_WRONG_TYPE,
    ERROR_ADDITIONAL_ITEMS,
    ERROR_MIN_CONTAINS,
    ERROR_MAX_CONTAINS,
    ERROR_ADDITIONAL_PROPERTIES,
} from '@ui-schema/ui-schema/Validators';
import {typeToString} from '@ui-schema/dictionary/Utils/typeToString';

export const errors = {
    [ERROR_NOT_SET]: 'Bitte fülle das Feld aus',
    [ERROR_CONST_MISMATCH]: (context) => `Erwartet wird der Wert: ${context.get('const')}`,
    [ERROR_ENUM_MISMATCH]: (context) => `Bitte wähle einen validen eintrag, z.B.: ${context.get('enum')}`,
    [ERROR_DUPLICATE_ITEMS]: 'Entferne Duplikate aus der Liste',
    [ERROR_NOT_FOUND_CONTAINS]: 'Minimum ein Eintrag muss wie spezifiert existieren',
    [ERROR_MIN_LENGTH]: (context) => `Min. Länge: ${typeof context.get('min') !== 'undefined' ? context.get('min') : typeof context.get('exclMin') !== 'undefined' ? context.get('exclMin') + 1 : '-'}`,
    [ERROR_MAX_LENGTH]: (context) => `Max. Länge: ${
        typeof context.get('max') !== 'undefined' ? context.get('max') :
            typeof context.get('exclMin') !== 'undefined' ? context.get('exclMin') - 1 :
                typeof context.get('exclMax') !== 'undefined' ? context.get('exclMax') - 1 : '-'
    }`,
    [ERROR_MULTIPLE_OF]: (context) => `Erwartet ein mehrfaches von ${context.get('multipleOf')}`,
    [ERROR_PATTERN]: (context) => `Eingabe nicht korrekt, benötigt ${context.getIn(['patternError', 'de']) || ('match ' + context.get('pattern'))}`,
    [ERROR_WRONG_TYPE]: (context) => `Falscher Typ, erwartet ${typeToString(context.get('type'))} aber ist ${context.get('actual')}`,
    [ERROR_ADDITIONAL_ITEMS]: 'Darf nur spezifizierte Elemente enthalten, entferne die weiteren.',
    [ERROR_ADDITIONAL_PROPERTIES]: 'Darf nur spezifizierte Eigenschaften enthalten, entferne die weiteren.',
    [ERROR_MIN_CONTAINS]: (context) => `Muss min. ${context.get('minContains')} mal das spezifizierte Element enthalten`,
    [ERROR_MAX_CONTAINS]: (context) => `Darf max. ${context.get('maxContains')} mal das spezifizierte Element enthalten`,
}


<|start_filename|>packages/ds-material/src/Widgets/NumberSlider/index.js<|end_filename|>
export * from './NumberSlider'


<|start_filename|>packages/material-richtext/src/MarkdownLabel/MarkdownLabel.js<|end_filename|>
import React from 'react';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import Link from '@material-ui/core/Link';
import {useEditorStyles} from '../styles';
import {Trans} from '@ui-schema/ui-schema/Translate/Trans';

const MarkdownIcon = React.forwardRef(({color}, ref) => <svg
    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ref={ref}
    fill={color}
    style={{width: '20px', display: 'block', opacity: 0.6}}
>
    <g transform="translate(-71.09-24.1)">
        <path d="m10.509 2.01c-5.82 0-10.509 4.689-10.509 10.509v102.96c0 5.82 4.689 10.509 10.509 10.509h186.98c5.82 0 10.509-4.689 10.509-10.509v-102.96c0-5.82-4.689-10.509-10.509-10.509h-186.98m15.764 26.27h20.992l21.02 26.27 21.02-26.27h20.992v71.43h-20.992v-40.971l-21.02 26.27-21.02-26.27v40.971h-20.992v-71.43m120.8 0h20.992v36.756h21.02l-31.501 34.676-31.528-34.676h21.02v-36.756" stroke="none" transform="matrix(.06731 0 0 .06731 72.08 27.814)"/>
    </g>
</svg>);

const MarkdownLink = React.forwardRef((props, ref) => <Link
    style={{textDecoration: 'underline'}}
    href='https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet'
    target='_blank' rel='noopener noreferrer'
    {...props}
    ref={ref}
/>);

let MarkdownLabel = ({focus, setFocus}) => {
    const classes = useEditorStyles();

    return <div className={classes.markdown}>
        <IconButton
            component={MarkdownLink}
            style={{position: 'relative'}} color={'primary'}
            onMouseEnter={() => setFocus(true)}
            onMouseLeave={() => setFocus(false)}
            onFocus={() => setFocus(true)}
            onBlur={() => setFocus(false)}
            size={'small'}>

            <MarkdownIcon color={'currentColor'}/>

            {focus ? <Typography
                component={'span'} variant={'caption'}
                className={classes.markdownLabel}
            ><Trans text={'labels.rich-text-enabled-markdown'}/></Typography> : null}
        </IconButton>
    </div>
};
MarkdownLabel = React.memo(MarkdownLabel)

export {MarkdownLabel}


<|start_filename|>packages/ds-bootstrap/src/Widgets/index.js<|end_filename|>
export * from './OptionsBoolean'
export * from './OptionsCheck'
export * from './OptionsRadio'
export * from './Select'
export * from './SimpleList'
export * from './TextField'


<|start_filename|>packages/dictionary/src/de/dnd.js<|end_filename|>
export const dnd = {
    'dnd-close-selection': 'Schließe Auswahl',
    // keine verben/adverben hier, da dies im Gegensatz zu English noch das Geschlecht des `name` benötigen würde
    // z.B. `Neuer + (name)` würde ergeben: `Neuer Adresse` (korrekt: Neue), `Neuer Event` (korrekt: Neues)
    'dnd-add-new': (context) => context.getIn(['name', 'de']) || 'Block',
    'dnd-add-a-block': (context) => context.getIn(['name', 'de']) || 'Block',
    'dnd-selection-title': 'Wähle Block',
    'dnd-show-block-info': 'Zeige Info',
    'dnd-close-all': 'Schließe Alle',
    'dnd-open-all': 'Öffne alle',
    'dnd-move-up-down': 'Verschiebe hoch oder runter',
}


<|start_filename|>packages/dictionary/src/de/richText.js<|end_filename|>
export const richText = {
    'rich-text-h1': 'Überschrift 1',
    'rich-text-h2': 'Überschrift 2',
    'rich-text-h3': 'Überschrift 3',
    'rich-text-h4': 'Überschrift 4',
    'rich-text-h5': 'Überschrift 5',
    'rich-text-h6': 'Überschrift 6',
    'rich-text-quote': 'Zitat',
    'rich-text-li': 'Liste',
    'rich-text-ol': 'Geordnete Liste',
    'rich-text-code': 'Code Block',
    'rich-text-code-inline': 'Code Part',
    'rich-text-bold': 'Format Fett',
    'rich-text-italic': 'Format Kursiv',
    'rich-text-underline': 'Format Unterstrichen',
    'rich-text-enabled-markdown': 'unterstützt MarkDown',
}


<|start_filename|>packages/ds-material/src/Widgets/OptionsRadio/index.js<|end_filename|>
export * from './OptionsRadio'

<|start_filename|>packages/ui-schema/src/Translate/relT/relT.js<|end_filename|>
import {Map} from 'immutable';

export const relT = (schema, context, locale) => {
    if(Map.isMap(schema) && context && context.get('relative')) {
        const relSchema = locale ? schema.get(locale) : schema;
        if(relSchema) {
            const schemaT = relSchema.getIn(context.get('relative'));
            if(schemaT) return schemaT;
        }
    }

    return undefined;
};

export const relTranslator = (_text, context, schema = undefined) =>
    relT(schema, context)


<|start_filename|>packages/ui-schema/src/JSONPointer/unescapePointer.js<|end_filename|>
export const unescapePointer = (pointer) => {
    return pointer.replace(/~1/g, '/').replace(/~0/g, '~')
}


<|start_filename|>packages/material-color/src/index.js<|end_filename|>
export * from './Base'
export * from './Color'
export * from './Alpha'
export * from './Block'
export * from './Circle'
export * from './Color'
export * from './Compact'
export * from './Hue'
export * from './Material'
export * from './Sketch'
export * from './Slider'
export * from './Swatches'
export * from './Twitter'
export * from './styleWrapper'


<|start_filename|>packages/ui-schema/src/PluginStack/index.js<|end_filename|>
export * from './PluginStack'


<|start_filename|>packages/ui-schema/src/ValidityReporter/isInvalid.js<|end_filename|>
import {Map} from 'immutable';

const searchRecursive = (immutable, val, keys, count = false) => {
    if(!immutable || immutable.size === 0) return 0;

    let found = 0;

    let further = [];
    for(let [, value] of immutable) {
        if(Map.isMap(value)) {
            if(keys) {
                let t = value.getIn(keys);
                if(typeof t !== 'undefined' || typeof val === 'undefined') {
                    if(t === val) {
                        found++;
                        if(!count) {
                            break;
                        }
                    }
                }
                further.push(value.deleteIn(keys));
            } else {
                further.push(value);
            }
        } else if(value === val) {
            found++;

            if(!count) {
                break;
            }
        }
    }

    if(further.length && (!found || (found && count))) {
        for(let value of further) {
            found += searchRecursive(value, val, keys, count);

            if(found && !count) {
                break;
            }
        }
    }

    return found;
};

export const isInvalid = (validity, scope = [], count = false) => {
    if(!validity) return 0;

    return searchRecursive(validity.getIn(scope), false, ['__valid'], count);
};


<|start_filename|>packages/material-color/src/Base/ColorStaticBase/index.js<|end_filename|>
export * from './ColorStaticBase'


<|start_filename|>packages/material-code/src/Code/Code.js<|end_filename|>
import React from 'react';
import {beautifyKey, Trans} from '@ui-schema/ui-schema';
import FormLabel from '@material-ui/core/FormLabel';
import {ValidityHelperText} from '@ui-schema/ds-material/Component/LocaleHelperText/LocaleHelperText';
import {CodeRenderer} from '@ui-schema/material-code/CodeRenderer';

export const Code = (props) => {
    const {valid, showValidity, ownKey, schema, required, errors} = props
    const format = schema.get('format')

    if(process.env.NODE_ENV === 'development' && typeof format !== 'string') {
        console.log('Code schema without string format')
    }

    const hideTitle = schema.getIn(['view', 'hideTitle'])
    return <>
        <FormLabel error={!valid && showValidity} style={{marginBottom: 12, display: 'block'}}>
            {!hideTitle ?
                beautifyKey(ownKey, schema.get('tt')) + (required ? ' *' : '')
                : null}
            {!hideTitle && ' ('}
            <Trans text={'formats.' + format}/>
            {!hideTitle && ') '}
        </FormLabel>
        {typeof format === 'string' ? <CodeRenderer
            {...props}
            format={format}
        /> : null}
        <ValidityHelperText errors={errors} showValidity={showValidity} schema={schema}/>
    </>
};


<|start_filename|>packages/ui-schema/src/Utils/sortScalarList/sortScalarList.js<|end_filename|>
export const sortScalarList = (list) =>
    list.sort(
        (a, b = '') =>
            typeof a === 'string' ? a.localeCompare(b) :
                typeof a === 'number' ? a > b : 1,
    )


<|start_filename|>packages/ui-schema/src/Utils/index.js<|end_filename|>
export * from './beautify'
export * from './createMap'
export * from './getSchema'
export * from './isImmutableDeep'
export * from './memo'
export * from './mergeSchema'
export * from './moveItem'
export * from './schemaToNative'
export * from './schemaTypeIs'
export * from './schemaTypeToDistinct'
export * from './sortScalarList'
export * from './useImmutable'


<|start_filename|>packages/ui-schema/src/applyPluginStack/index.js<|end_filename|>
export * from './applyPluginStack'


<|start_filename|>packages/ui-schema/src/Validators/MultipleOfValidator/index.js<|end_filename|>
export * from './MultipleOfValidator'

<|start_filename|>packages/demo/src/material-ui/material-ui-slate.js<|end_filename|>
import React from 'react';
import AppTheme from './layout/AppTheme';
import Dashboard from './dashboard/Dashboard';
import Grid from '@material-ui/core/Grid';
import {widgets} from '@ui-schema/ds-material';
import {RichContent, RichContentInline} from '@ui-schema/material-slate';
import {schemaDemoSlate, schemaDemoSlateSingle} from '../schemas/demoSlate';
import {RichContentPane} from '@ui-schema/material-slate/Widgets/RichContentPane';
import {browserT} from '../t';
import {UIMetaProvider} from '@ui-schema/ui-schema';
import {DummyRenderer} from './component/MuiMainDummy';

const customWidgets = {...widgets};
customWidgets.custom = {
    ...widgets.custom,
    RichContentPane: RichContentPane,
    RichContent: RichContent,
    RichContentInline: RichContentInline,
};

const Main = ({classes = {}}) => {
    return <React.Fragment>
        <Grid item xs={12}>
            <DummyRenderer id={'schemaSlate'} open schema={schemaDemoSlateSingle} classes={classes}/>
        </Grid>
        <Grid item xs={12}>
            <DummyRenderer id={'schemaSlate'} open schema={schemaDemoSlate} classes={classes}/>
        </Grid>
    </React.Fragment>
};

export default () => <AppTheme>
    <UIMetaProvider widgets={customWidgets} t={browserT}>
        <Dashboard main={Main}/>
    </UIMetaProvider>
</AppTheme>

export {customWidgets}


<|start_filename|>packages/demo/src/material-ui/material-ui-color.js<|end_filename|>
import React from 'react';
import AppTheme from './layout/AppTheme';
import Dashboard from './dashboard/Dashboard';
import Grid from '@material-ui/core/Grid';
import {widgets} from '@ui-schema/ds-material';
import {DummyRenderer} from './component/MuiMainDummy';
import {useDummy} from '../component/MainDummy';
import {
    Color, ColorDialog,
    ColorSwatches,
    ColorCircle, ColorCompact, ColorMaterial,
    ColorBlock, ColorTwitter, ColorSlider,
    ColorAlpha, ColorHue, ColorSketch,
    ColorSliderStatic, ColorStatic,
    ColorCircleStatic, ColorTwitterStatic,
    ColorSketchStatic, ColorSketchDialog,
} from '@ui-schema/material-color';
import {schemaColor} from '../schemas/demoColor';
import {browserT} from '../t';
import {UIMetaProvider} from '@ui-schema/ui-schema';

const customWidgets = {...widgets};
customWidgets.custom = {
    ...widgets.custom,
    Color,
    ColorDialog,
    ColorStatic,
    ColorSwatches,
    ColorCircle,
    ColorCompact,
    ColorMaterial,
    ColorTwitter,
    ColorBlock,
    ColorSlider,
    ColorAlpha,
    ColorHue,
    ColorSketch,
    ColorSliderStatic,
    ColorCircleStatic,
    ColorTwitterStatic,
    ColorSketchStatic,
    ColorSketchDialog,
};

const Main = ({classes = {}}) => {
    const {toggleDummy, getDummy} = useDummy();

    return <Grid item xs={12}>
        <DummyRenderer id={'schemaColor'} open schema={schemaColor} toggleDummy={toggleDummy} getDummy={getDummy} classes={classes}/>
    </Grid>
};

export default () => (
    <AppTheme>
        <UIMetaProvider widgets={customWidgets} t={browserT}>
            <Dashboard main={Main}/>
        </UIMetaProvider>
    </AppTheme>
)


<|start_filename|>packages/ui-schema/src/JSONPointer/index.js<|end_filename|>
export * from './escapePointer'
export * from './pointerToKeySeq'
export * from './resolvePointer'
export * from './unescapePointer'


<|start_filename|>packages/material-richtext/src/EditorExtends/index.js<|end_filename|>
export * from './EditorExtends'

<|start_filename|>packages/ds-material/src/Widgets/SimpleList/index.js<|end_filename|>
export * from './SimpleList'

<|start_filename|>packages/material-richtext/src/MarkdownLabel/index.js<|end_filename|>
export * from './MarkdownLabel'


<|start_filename|>packages/material-pickers/src/Date/index.js<|end_filename|>
export * from './Date'

<|start_filename|>packages/docs/src/index.js<|end_filename|>
import React from 'react';
import ReactDOM from 'react-dom';
import {themes} from "./theme";
import './asset/App.css';
import {AppLoader} from "@control-ui/app/AppLoader";

const App = AppLoader(
    {themes},
    () => import('./App'),
    'Loading',
);

ReactDOM.render(<App/>, document.getElementById('root'));


<|start_filename|>packages/ui-schema/src/Utils/isImmutableDeep/index.js<|end_filename|>
export * from './isImmutableDeep'


<|start_filename|>packages/docs/src/component/Nav.js<|end_filename|>
import Typography from '@material-ui/core/Typography';
import MuiLink from '@material-ui/core/Link';
import React from 'react';
import {Link} from '@control-ui/kit/Link';
import GithubIcon from '../asset/GithubLogo';

export default () => {
    return <React.Fragment>
        <Typography component={'p'} variant={'body1'}>
            <span role={'img'} aria-label={'Live Icon'}>🔴</span> <Link to={'/examples'} primary={'Live-Editor + Examples'} style={{display: 'inline-block'}}/>
        </Typography>
        <hr style={{opacity: 0.1, margin: '4px 0 4px 26px'}}/>
        <Typography component={'p'} variant={'body1'}>
            <span role={'img'} aria-label={'Quick Start Icon'}>⚡</span> <Link to={'/quick-start'} primary={'Quick-Start'} style={{display: 'inline-block'}}/>
        </Typography>
        <hr style={{opacity: 0.1, margin: '4px 0 4px 26px'}}/>
        <Typography component={'p'} variant={'body1'}>
            <span role={'img'} aria-label={'Widget Icon'}>💎</span> <Link to={'/docs/overview#widget-list'} primary={'Widget List'} style={{display: 'inline-block'}}/>
        </Typography>
        <hr style={{opacity: 0.1, margin: '4px 0 4px 26px'}}/>
        <Typography component={'p'} variant={'body1'}>
            <span role={'img'} aria-label={'Professional service Icon'}>🔥</span> Professional service available, <MuiLink href={'https://bemit.codes/get-quote'}>reach out now!</MuiLink>
        </Typography>
        <hr style={{opacity: 0.1, margin: '4px 0 4px 26px'}}/>
        <Typography component={'p'} variant={'body1'}>
            <span role={'img'} aria-label={'Github Icon'}><GithubIcon/></span> <MuiLink href={'https://github.com/ui-schema/ui-schema/releases'} style={{display: 'inline-block'}}>Changelog / Release Notes at Github</MuiLink>
        </Typography>
    </React.Fragment>
};


<|start_filename|>packages/ui-schema/src/Utils/getSchema/getSchema.js<|end_filename|>
export const getSchemaId = (schema) => {
    // till draft-06, no `$`, hashtag in id
    return schema?.get('$id') || schema?.get('id')
}


<|start_filename|>packages/material-richtext/src/EditorControls/EditorControls.js<|end_filename|>
import React from 'react';
import clsx from 'clsx';
import {
    LooksOne, LooksTwo, Looks3, Looks4, Looks5, Looks6,
    FormatQuote, FormatListBulleted, FormatListNumbered, Code, FormatBold, FormatItalic, FormatUnderlined,
} from '@material-ui/icons';
import IconButton from '@material-ui/core/IconButton';
import Fade from '@material-ui/core/Fade';
import {EditorState, RichUtils} from 'draft-js';
import makeStyles from '@material-ui/core/styles/makeStyles';
import {useControlStyles} from '../styles';
import {memo, Trans} from '@ui-schema/ui-schema';
import {AccessTooltipIcon} from '@ui-schema/ds-material/Component/Tooltip';
import {useRichText} from '../RichTextProvider/RichTextProvider';

const buttonStyle = makeStyles(theme => ({
    root: {
        color: ({active}) => active ?
            theme.palette.primary.main :
            theme.palette.text.secondary,
    },
}));

const ControlButton = memo(({classes, size, inline, toggleInlineStyle, toggleBlockType, Label, style}) => <IconButton
    classes={classes}
    size={'small'}
    style={{
        margin: size === 'medium' ? '2px 1px' : 'auto 1px',
        fontSize: size === 'medium' ? '1.25rem' : undefined,
    }}
    onClick={(e) => {
        e.preventDefault();
        if(inline) {
            toggleInlineStyle(style);
        } else {
            toggleBlockType(style);
        }
    }}>
    {typeof Label === 'function' ? <Label/> : Label}
</IconButton>);

const Button = ({Label, style, inline, size}) => {
    const {editorState, handleChange} = useRichText();

    const toggleInlineStyle = React.useCallback((inlineStyle) => {
        handleChange(prevEditorState => {
            let currentState = EditorState.forceSelection(
                prevEditorState,
                prevEditorState.getSelection(),
            );
            currentState = RichUtils.toggleInlineStyle(
                currentState,
                inlineStyle,
            );
            return currentState
        });
    }, [handleChange]);

    const toggleBlockType = React.useCallback((blockType) => {
        handleChange(prevEditorState => {
            let currentState = EditorState.forceSelection(
                prevEditorState,
                prevEditorState.getSelection(),
            );
            currentState = RichUtils.toggleBlockType(
                currentState,
                blockType,
            );
            return currentState
        });
    }, [handleChange]);

    let currentInlineStyle = editorState.getCurrentInlineStyle();

    const selection = editorState.getSelection();
    const blockType = editorState
        .getCurrentContent()
        .getBlockForKey(selection.getStartKey())
        .getType();

    const active = inline ? currentInlineStyle.has(style) : style === blockType;

    const classes = buttonStyle({active});

    return <ControlButton
        classes={classes}
        size={size}
        inline={inline}
        handleChange={handleChange}
        toggleInlineStyle={toggleInlineStyle}
        toggleBlockType={toggleBlockType}
        Label={Label}
        style={style}
    />;
};

const BLOCK_TYPES = [
    {
        key: 1,
        label: () => <AccessTooltipIcon title={<Trans text={'labels.rich-text-h1'}/>}>
            <LooksOne fontSize={'inherit'}/>
        </AccessTooltipIcon>,

        style: 'header-one',
    },
    {
        key: 2,
        label: () => <AccessTooltipIcon title={<Trans text={'labels.rich-text-h2'}/>}>
            <LooksTwo fontSize={'inherit'}/>
        </AccessTooltipIcon>,
        style: 'header-two',
    },
    {
        key: 3,
        label: () => <AccessTooltipIcon title={<Trans text={'labels.rich-text-h3'}/>}>
            <Looks3 fontSize={'inherit'}/>
        </AccessTooltipIcon>,
        style: 'header-three',
    },
    {
        key: 4,
        label: () => <AccessTooltipIcon title={<Trans text={'labels.rich-text-h4'}/>}>
            <Looks4 fontSize={'inherit'}/>
        </AccessTooltipIcon>,
        style: 'header-four',
    },
    {
        key: 5,
        label: () => <AccessTooltipIcon title={<Trans text={'labels.rich-text-h5'}/>}>
            <Looks5 fontSize={'inherit'}/>
        </AccessTooltipIcon>,
        style: 'header-five',
    },
    {
        key: 6,
        label: () => <AccessTooltipIcon title={<Trans text={'labels.rich-text-h6'}/>}>
            <Looks6 fontSize={'inherit'}/>
        </AccessTooltipIcon>,
        style: 'header-six',
    },
    {
        key: 7,
        label: () => <AccessTooltipIcon title={<Trans text={'labels.rich-text-quote'}/>}>
            <FormatQuote fontSize={'inherit'}/>
        </AccessTooltipIcon>,
        style: 'blockquote',
    },
    {
        key: 8,
        label: () => <AccessTooltipIcon title={<Trans text={'labels.rich-text-li'}/>}>
            <FormatListBulleted fontSize={'inherit'}/>
        </AccessTooltipIcon>,
        style: 'unordered-list-item',
    },
    {
        key: 9,
        label: () => <AccessTooltipIcon title={<Trans text={'labels.rich-text-ol'}/>}>
            <FormatListNumbered fontSize={'inherit'}/>
        </AccessTooltipIcon>,
        style: 'ordered-list-item',
    },
    {
        key: 10,
        label: () => <AccessTooltipIcon title={<Trans text={'labels.rich-text-code'}/>}>
            <Code fontSize={'inherit'}/>
        </AccessTooltipIcon>,
        style: 'code-block',
    },
    /*{key: 11, label: <MdInsertLink size={'1.25em'}/>, style: 'link'},*/
];

let INLINE_STYLES = [
    {
        key: 1,
        label: () => <AccessTooltipIcon title={<Trans text={'labels.rich-text-bold'}/>}>
            <FormatBold fontSize={'inherit'}/>
        </AccessTooltipIcon>,
        style: 'BOLD',
    },
    {
        key: 2,
        label: () => <AccessTooltipIcon title={<Trans text={'labels.rich-text-italic'}/>}>
            <FormatItalic fontSize={'inherit'}/>
        </AccessTooltipIcon>,
        style: 'ITALIC',
    },
    {
        key: 3,
        label: () => <AccessTooltipIcon title={<Trans text={'labels.rich-text-underline'}/>}>
            <FormatUnderlined fontSize={'inherit'}/>
        </AccessTooltipIcon>,
        style: 'UNDERLINE',
    },
    {
        key: 4,
        label: () => <AccessTooltipIcon title={<Trans text={'labels.rich-text-code-inline'}/>}>
            <Code fontSize={'inherit'}/>
        </AccessTooltipIcon>,
        style: 'CODE',
    },
];

const BlockStyleControls = ({btnSize}) => {
    return BLOCK_TYPES.map((type) =>
        <Button
            key={type.key}
            Label={type.label}
            style={type.style}
            size={btnSize}
        />,
    );
};

const InlineStyleControls = ({btnSize}) => {
    return INLINE_STYLES.map(type =>
        <Button
            key={type.key}
            Label={type.label}
            style={type.style}
            size={btnSize}
            inline
        />,
    );
};

let EditorControls = ({
                          focused, showBlockControl,
                          topControls, dense, btnSize,
                      }) => {
    const classes = useControlStyles({dense});

    return <Fade
        in={topControls && focused || !topControls}
        timeout={{enter: 400, exit: 600}}
    >
        <div
            className={clsx(
                classes.wrapper,
                topControls ? classes.controlsTop : classes.controlsBottom,
            )}
        >
            <div className={classes.controls}>
                {showBlockControl ?
                    <React.Fragment>
                        <BlockStyleControls btnSize={btnSize}/>
                    </React.Fragment>
                    : null}
                <div>
                    <InlineStyleControls btnSize={btnSize}/>
                </div>
            </div>
        </div>
    </Fade>;
};
EditorControls = memo(EditorControls);

export {EditorControls}


<|start_filename|>packages/ds-material/src/Component/LocaleHelperText/index.js<|end_filename|>
export * from './LocaleHelperText'


<|start_filename|>packages/material-richtext/src/EditorExtends/EditorExtends.js<|end_filename|>
import React from "react";
import {Map} from "immutable";
import {
    EditorState,
    convertFromRaw,
    convertToRaw,
    EditorBlock
} from 'draft-js';
import {draftToMarkdown, markdownToDraft} from 'markdown-draft-js';

export function getBlockStyle(block) {
    if(block.getType() === 'blockquote') {
        return 'RichEditor-blockquote';
    }
    return null;
}

// Custom overrides for "code" style.
export const styleMap = {
    CODE: {
        backgroundColor: 'rgba(0, 0, 0, 0.3)',
        fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
        fontSize: 16,
        padding: 3,
    },
};

const Line = props => {
    const {contentState, block} = props;
    const showLineNo = false;
    const blockMap = contentState.getBlockMap().toArray();
    const blockKey = block.key;
    const lineNumber = blockMap.findIndex(block => blockKey === block.key) + 1;
    return (
        showLineNo ?
            <div style={{display: 'flex'}}>
                <span style={{marginRight: '5px'}}>{lineNumber}</span>
                <div style={{flex: '1'}}><EditorBlock {...props} /></div>
            </div>
            :
            <EditorBlock {...props} />
    );
};

export const blockRendererFn = function() {
    return {component: Line, editable: true}
};

export const editorStateFrom = {
    markdown: (markdown) => {
        return EditorState.createWithContent(
            convertFromRaw(markdownToDraft(markdown))
        )
    }
};

export const editorStateTo = {
    raw: (editorState) => {
        const content = editorState.getCurrentContent();
        return content.hasText() ? convertToRaw(content) : '';
    },
    markdown: (editorState) => {
        const content = editorState.getCurrentContent();
        return content.hasText() ? draftToMarkdown(convertToRaw(content)) : '';
    }
};

export const inlineMap = Map({
    'header-one': {
        element: 'div'
    },
    'header-two': {
        element: 'div'
    },
    'header-three': {
        element: 'div'
    },
    'header-four': {
        element: 'div'
    },
    'header-five': {
        element: 'div'
    },
    'header-six': {
        element: 'div'
    },
    'blockquote': {
        element: 'div'
    },
    'code-block': {
        element: 'div'
    },
    'atomic': {
        element: 'div'
    },
    'unordered-list': {
        element: 'div'
    },
    'ordered-list': {
        element: 'div'
    },
    'unordered-list-item': {
        element: 'div'
    },
    'ordered-list-item': {
        element: 'div'
    },
    'unstyled': {
        element: 'div'
    }
});


<|start_filename|>packages/ui-schema/src/ValidityReporter/index.js<|end_filename|>
export * from './isInvalid'
export * from './ValidityReporter'


<|start_filename|>packages/dictionary/src/en/labels.js<|end_filename|>
export const labels = {
    'loading': 'Loading',
    'ok': 'Ok',
    'add': 'Add',
    'remove': 'Remove',
    'delete': 'Delete',
    'delete-confirm': 'Confirm deletion',
    'add-number': 'Add number',
    'add-entry': 'Add entry',
    'entry': 'Entry',
    'remove-entry': 'Remove entry',
    'add-item': 'Add item',
    'remove-item': 'Remove item',
    'add-row': 'Add row',
    'remove-row': 'Remove row',
    'remove-rows': 'Remove rows',
    'move-up': 'Move up',
    'move-down': 'Move down',
    'move-to-position': (context) => `Move to ${context.get('nextIndex')}. position`,
}


<|start_filename|>packages/ds-material/src/Widgets/GenericList/index.js<|end_filename|>
export * from './GenericList'


<|start_filename|>packages/material-richtext/src/index.js<|end_filename|>
export * from './RichText'
export * from './RichTextInline'
export * from './EditorControls'
export * from './EditorExtends'
export * from './RichTextProvider'
export * from './MarkdownLabel'
export * from './styles'



<|start_filename|>packages/dictionary/src/de/pagination.js<|end_filename|>
export const pagination = {
    'first-page': 'Erste Seite',
    'prev-page': 'Vorherige Seite',
    'next-page': 'Nächste Seite',
    'last-page': 'Letzte Seite',
    'total': 'Gesamt',
    'rows-per-page': 'Zeilen pro Seite',
    'of': 'von',
    'all': 'alle',
}


<|start_filename|>packages/ui-schema/src/Validators/MinMaxValidator/MinMaxValidator.js<|end_filename|>
import {List, Map} from 'immutable';
import {createValidatorErrors} from '@ui-schema/ui-schema/ValidatorErrors';
import {schemaTypeIs, schemaTypeIsNumeric} from '@ui-schema/ui-schema/Utils/schemaTypeIs';

export const ERROR_MIN_LENGTH = 'min-length';
export const ERROR_MAX_LENGTH = 'max-length';

export const validateMinMax = (schema, value) => {
    const type = schema.get('type');
    let errors = createValidatorErrors();
    if(typeof value === 'undefined') return errors

    if(schemaTypeIs(type, 'string')) {
        if(typeof value === 'string') {
            let minLength = schema.get('minLength');
            let maxLength = schema.get('maxLength');
            if(minLength) {
                if(value.length < minLength) {
                    errors = errors.addError(ERROR_MIN_LENGTH, Map({min: minLength}));
                }
            }
            if(maxLength) {
                if(value.length > maxLength) {
                    errors = errors.addError(ERROR_MAX_LENGTH, Map({max: maxLength}));
                }
            }
        }
    }

    if(schemaTypeIs(type, 'array')) {
        let minItems = schema.get('minItems');
        let maxItems = schema.get('maxItems');

        if(minItems) {
            if(List.isList(value)) {
                if(value.size < minItems) {
                    errors = errors.addError(ERROR_MIN_LENGTH, Map({min: minItems}));
                }
            } else if(Array.isArray(value)) {
                if(value.length < minItems) {
                    errors = errors.addError(ERROR_MIN_LENGTH, Map({min: minItems}));
                }
            }
        }

        if(maxItems) {
            if(List.isList(value)) {
                if(value.size > maxItems) {
                    errors = errors.addError(ERROR_MAX_LENGTH, Map({max: maxItems}));
                }
            } else if(Array.isArray(value)) {
                if(value.length > maxItems) {
                    errors = errors.addError(ERROR_MAX_LENGTH, Map({max: maxItems}));
                }
            }
        }
    }

    if(schemaTypeIs(type, 'object')) {
        let minProperties = schema.get('minProperties');
        let maxProperties = schema.get('maxProperties');

        if(minProperties) {
            if(Map.isMap(value)) {
                if(value.keySeq().size < minProperties) {
                    errors = errors.addError(ERROR_MIN_LENGTH, Map({min: minProperties}));
                }
            } else if(typeof value === 'object') {
                if(Object.keys(value).length < minProperties) {
                    errors = errors.addError(ERROR_MIN_LENGTH, Map({min: minProperties}));
                }
            }
        }

        if(maxProperties) {
            if(Map.isMap(value)) {
                if(value.keySeq().size > maxProperties) {
                    errors = errors.addError(ERROR_MAX_LENGTH, Map({max: maxProperties}));
                }
            } else if(typeof value === 'object') {
                if(Object.keys(value).length > maxProperties) {
                    errors = errors.addError(ERROR_MAX_LENGTH, Map({max: maxProperties}));
                }
            }
        }
    }

    if(schemaTypeIsNumeric(type)) {
        let minimum = schema.get('minimum');
        let exclusiveMinimum = schema.get('exclusiveMinimum');
        let maximum = schema.get('maximum');
        let exclusiveMaximum = schema.get('exclusiveMaximum');

        if(typeof value === 'number') {
            if(typeof minimum === 'number') {
                if(typeof exclusiveMinimum === 'boolean') {
                    if(exclusiveMinimum && value <= minimum) {
                        errors = errors.addError(ERROR_MIN_LENGTH, Map({exclMin: minimum}));
                    }
                } else if(value < minimum) {
                    errors = errors.addError(ERROR_MIN_LENGTH, Map({min: minimum}));
                }
            }

            if(typeof exclusiveMinimum === 'number') {
                if(value <= exclusiveMinimum) {
                    errors = errors.addError(ERROR_MIN_LENGTH, Map({exclMin: exclusiveMinimum}));
                }
            }
            if(typeof maximum === 'number') {
                if(typeof exclusiveMaximum === 'boolean') {
                    if(value >= maximum) {
                        errors = errors.addError(ERROR_MAX_LENGTH, Map({exclMax: maximum}));
                    }
                } else if(value > maximum) {
                    errors = errors.addError(ERROR_MAX_LENGTH, Map({max: maximum}));
                }
            }
            if(typeof exclusiveMaximum === 'number') {
                if(value >= exclusiveMaximum) {
                    errors = errors.addError(ERROR_MAX_LENGTH, Map({exclMax: exclusiveMaximum}));
                }
            }
        }
    }

    return errors;
};

export const minMaxValidator = {
    handle: ({schema, value, errors, valid}) => {
        let err = validateMinMax(schema, value);

        if(err.hasError()) {
            valid = false;
            errors = errors.addErrors(err);
        }
        return {errors, valid}
    },
};


<|start_filename|>packages/demo/src/material-ui/material-ui-pro.js<|end_filename|>
import React from 'react';
import AppTheme from './layout/AppTheme';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import {ImmutableEditor, themeMaterial} from 'react-immutable-editor';
import Dashboard from './dashboard/Dashboard';
import {widgets} from '@ui-schema/ds-material';
import {browserT} from '../t';
import {MuiSchemaDebug} from './component/MuiSchemaDebug';
import {schemaDemoReferencingRecursive} from '../schemas/demoReferencing';
import IcSave from '@material-ui/icons/Save'
import IcClear from '@material-ui/icons/Clear'
import IcHistory from '@material-ui/icons/History'
import IcRedo from '@material-ui/icons/Redo'
import IcUndo from '@material-ui/icons/Undo'
import useTheme from '@material-ui/core/styles/useTheme';
import {isInvalid} from '@ui-schema/ui-schema/ValidityReporter/isInvalid';
import {fromJSOrdered} from '@ui-schema/ui-schema/Utils/createMap';
import {createStore, UIStoreProvider} from '@ui-schema/ui-schema/UIStore';
import {toHistory, useStorePro} from '@ui-schema/pro/UIStorePro';
import {UIMetaProvider, UIRootRenderer} from '@ui-schema/ui-schema';

const customWidgets = {...widgets};
customWidgets.custom = {
    ...widgets.custom,
};

// or set to `undefined` for no-initial values
//const initialStore = createStore(fromJSOrdered({person: {name: '<NAME>'}}))
const initialStore = createStore(fromJSOrdered({
    person: {
        'name': '<NAME>',
        'children': [
            {
                'name': '4335534',
            },
            {
                'name': 'gegfgtg',
                'children': [
                    {
                        'name': 'asdcvbn',
                        'children': [
                            {
                                'name': '233456',
                            },
                        ],
                    },
                    {
                        'name': 'fddgfdfdfgdfs',
                        'children': [
                            {
                                'name': '23456',
                            },
                        ],
                    },
                ],
            },
            {
                'name': 'dfgdgfdgf',
            },
        ],
    },
}))

const schema = schemaDemoReferencingRecursive

const Main = () => {
    const theme = useTheme();

    const [showHistory, setShowHistory] = React.useState(false);
    const [showValidity, setShowValidity] = React.useState(false);

    const prevOriginalStore = React.useRef(initialStore?.getValues())
    const {
        reset: resetHistoryStore,
        onChange, store, setStore,
        redoHistory, undoHistory,
        // todo: multi type support #68
    } = useStorePro({type: String(schema.get('type')), initialStore: initialStore})

    // todo: multi type support #68
    const type = String(schema.get('type'))
    const reset = React.useCallback(() => {
        resetHistoryStore(type, initialStore)
        prevOriginalStore.current = initialStore?.getValues()
    }, [type, resetHistoryStore, prevOriginalStore])

    const changedStore = (
        (!prevOriginalStore.current && store.current?.getValues().size > 0) ||
        (prevOriginalStore.current && !prevOriginalStore.current?.equals(store.current?.getValues()))
    )

    return <React.Fragment>
        <div>
            <Button
                startIcon={<IcUndo/>}
                disabled={store.activeIndex === 0}
                onClick={() => undoHistory(1)}
            >undo</Button>
            <Button
                startIcon={<IcRedo/>}
                disabled={store.activeIndex + 1 === store.list.size}
                onClick={() => redoHistory(1)}
            >redo</Button>
            <Button
                startIcon={<IcHistory/>}
                disabled={store.list.size === 1}
                onClick={() => setShowHistory(s => !s)}
            >history</Button>
            <Button
                startIcon={<IcClear/>}
                disabled={store.list.size === 1}
                onClick={reset}
            >clear</Button>
            <Button
                startIcon={<IcSave/>}
                disabled={!changedStore}
            >save</Button>
        </div>

        <UIStoreProvider
            store={store.current}
            onChange={onChange}
            showValidity={showValidity}
        >
            <UIRootRenderer schema={schema}/>
            <MuiSchemaDebug schema={schema}/>
        </UIStoreProvider>

        <div style={{width: '100%'}}>
            <Button onClick={() => setShowValidity(!showValidity)}>validity</Button>
            <div>
                {isInvalid(store.current.getValidity()) ? 'invalid' : 'valid'}
            </div>
        </div>

        <Dialog
            onClose={() => setShowHistory(false)}
            open={showHistory}
        >
            <DialogTitle style={{textAlign: 'center'}}>Store History</DialogTitle>
            <DialogContent
                style={{minWidth: 350}}
            >
                {store.list.map((s, i) => <div key={i} style={{marginBottom: 18}}>
                    <Button
                        style={{fontWeight: 'bold'}}
                        onClick={() => {
                            setStore(store => toHistory(store, i))
                            setShowHistory(false)
                        }}
                    >Index: {i} {store.activeIndex === i ? 'is-active' : null}</Button>
                    <ImmutableEditor
                        data={s.getValues()}
                        onChange={() => console.log('not implemented')}
                        getVal={keys => s.getValues().getIn(keys)}
                        theme={{
                            ...themeMaterial,
                            type: theme.palette.type,
                            base00: theme.palette.background.paper,
                            base0D: theme.palette.text.secondary,
                            base0B: theme.palette.text.primary,
                        }}
                    />
                </div>)}
            </DialogContent>
        </Dialog>
    </React.Fragment>
};

export default () => <AppTheme>
    <UIMetaProvider widgets={customWidgets} t={browserT}>
        <Dashboard main={Main}/>
    </UIMetaProvider>
</AppTheme>

export {customWidgets}


<|start_filename|>packages/material-color/src/Base/ColorBase/index.js<|end_filename|>
export * from './ColorBase'


<|start_filename|>packages/ui-schema/src/Validators/TypeValidator/index.js<|end_filename|>
export * from './TypeValidator'

<|start_filename|>packages/ds-material/src/index.js<|end_filename|>
export * from './BaseComponents'
export * from './Component';
export * from './Utils';
export * from './Widgets';
export * from './Grid';
export * from './pluginStack';
export * from './widgetsBinding';



<|start_filename|>packages/material-pickers/src/index.js<|end_filename|>
export * from './DateTime'
export * from './Date'
export * from './Time'
export * from './TimeBase'


<|start_filename|>packages/ui-schema/src/Validators/PatternValidator/index.js<|end_filename|>
export * from './PatternValidator'

<|start_filename|>packages/ui-schema/src/Plugins/CombiningHandler/CombiningHandler.js<|end_filename|>
import React from 'react';
import {Map} from 'immutable';
import {mergeSchema} from '@ui-schema/ui-schema/Utils/mergeSchema';
import {handleIfElseThen} from '@ui-schema/ui-schema/Plugins/ConditionalHandler';
import {getNextPlugin} from '@ui-schema/ui-schema/PluginStack/PluginStack';

export const CombiningHandler = (props) => {
    let {schema, value, currentPluginIndex} = props;

    const allOf = schema.get('allOf');
    if(allOf) {
        allOf.forEach((subSchema) => {
            // removing afterwards-handled keywords, otherwise they would merge wrongly/double evaluate
            schema = mergeSchema(schema, subSchema.delete('if').delete('else').delete('then').delete('allOf'));

            // todo: `Record` support #140
            if(value && Map.isMap(value)) {
                schema = handleIfElseThen(subSchema, value, schema);
            }

            const allOf1 = subSchema.get('allOf');
            if(allOf1) {
                // nested allOf may appear when using complex combining-conditional schemas
                allOf1.forEach((subSchema1) => {
                    // removing afterwards-handled keywords, otherwise they would merge wrongly/double evaluate
                    // further on nested `allOf` will be resolved by render flow
                    schema = mergeSchema(schema, subSchema1.delete('if').delete('else').delete('then'));

                    // todo: `Record` support #140
                    if(value && Map.isMap(value)) {
                        schema = handleIfElseThen(subSchema1, value, schema);
                    }
                })
            }
        });
    }
    const next = currentPluginIndex + 1;
    const Plugin = getNextPlugin(next, props.widgets)
    return <Plugin {...props} currentPluginIndex={next} schema={schema}/>
};


<|start_filename|>packages/material-color/src/Base/ColorDialogBase/index.js<|end_filename|>
export * from './ColorDialogBase'


<|start_filename|>packages/material-pickers/src/Date/Date.js<|end_filename|>
import React from "react";
import {DatePicker as MuiDatePicker, KeyboardDatePicker,} from '@material-ui/pickers';
import {DateTimeBase} from "../DateTimeBase/DateTimeBase";

const KeyboardButtonProps = {
    'aria-label': 'change date',
};

export const DatePicker = ({
                        schema, ...props
                    }) => {
    const dateFormat = schema.getIn(['date', 'format']) || 'yyyy-MM-dd';
    const dateFormatData = schema.getIn(['date', 'formatData']) || dateFormat;

    const keyboard = schema.getIn(['date', 'keyboard']) !== false;
    let Component = keyboard ? KeyboardDatePicker : MuiDatePicker;

    const additionalProps = {};
    if(keyboard) {
        additionalProps['KeyboardButtonProps'] = KeyboardButtonProps;
    }
    additionalProps['orientation'] = schema.getIn(['date', 'orientation']);

    return <DateTimeBase
        dateFormat={dateFormat}
        dateFormatData={dateFormatData}
        additionalProps={additionalProps}
        Component={Component}
        schema={schema}
        keyboard={keyboard}
        {...props}
    />
};


<|start_filename|>packages/material-color/src/styleWrapper.js<|end_filename|>
export const styleWrapper = ({palette, spacing}) => ({
    background: palette.background.paper,
    boxShadow: 'rgba(0, 0, 0, 0.12) 0px 2px 10px, rgba(0, 0, 0, 0.16) 0px 2px 5px',
    width: 300,
    padding: spacing(2)
});


<|start_filename|>packages/ds-material/src/Widgets/OptionsBoolean/index.js<|end_filename|>
export * from './OptionsBoolean'

<|start_filename|>packages/dictionary/src/en/errors.js<|end_filename|>
import {
    ERROR_CONST_MISMATCH,
    ERROR_DUPLICATE_ITEMS,
    ERROR_ENUM_MISMATCH,
    ERROR_MAX_LENGTH,
    ERROR_MIN_LENGTH,
    ERROR_MULTIPLE_OF,
    ERROR_NOT_FOUND_CONTAINS,
    ERROR_NOT_SET,
    ERROR_PATTERN,
    ERROR_WRONG_TYPE,
    ERROR_ADDITIONAL_ITEMS,
    ERROR_MIN_CONTAINS,
    ERROR_MAX_CONTAINS,
    ERROR_ADDITIONAL_PROPERTIES,
} from '@ui-schema/ui-schema/Validators';
import {typeToString} from '@ui-schema/dictionary/Utils/typeToString';

export const errors = {
    [ERROR_NOT_SET]: 'Please fill out this field',
    [ERROR_CONST_MISMATCH]: (context) => `Expected value is: ${context.get('const')}`,
    [ERROR_ENUM_MISMATCH]: (context) => `Please choose one valid entry, one of: ${context.get('enum')}`,
    [ERROR_DUPLICATE_ITEMS]: 'Remove duplicate entries',
    [ERROR_NOT_FOUND_CONTAINS]: 'Minimum one entry must exist like specified',
    [ERROR_MIN_LENGTH]: (context) => `Min. Length: ${typeof context.get('min') !== 'undefined' ? context.get('min') : typeof context.get('exclMin') !== 'undefined' ? context.get('exclMin') + 1 : '-'}`,
    [ERROR_MAX_LENGTH]: (context) => `Max. Length: ${
        typeof context.get('max') !== 'undefined' ? context.get('max') :
            typeof context.get('exclMin') !== 'undefined' ? context.get('exclMin') - 1 :
                typeof context.get('exclMax') !== 'undefined' ? context.get('exclMax') - 1 : '-'
    }`,
    [ERROR_MULTIPLE_OF]: (context) => `Must be multiple of ${context.get('multipleOf')}`,
    [ERROR_PATTERN]: (context) => `Input is invalid, must ${context.getIn(['patternError', 'en']) || ('match ' + context.get('pattern'))}`,
    [ERROR_WRONG_TYPE]: (context) => `Wrong type, expected ${typeToString(context.get('type'))} and got ${context.get('actual')}`,
    [ERROR_ADDITIONAL_ITEMS]: 'Must have only specified items, remove the additional.',
    [ERROR_ADDITIONAL_PROPERTIES]: 'Must have only specified properties, remove the additional.',
    [ERROR_MIN_CONTAINS]: (context) => `Must have at least ${context.get('minContains')} occurrences of the specified element`,
    [ERROR_MAX_CONTAINS]: (context) => `Must have at max. ${context.get('maxContains')} occurrences of the specified element`,
}


<|start_filename|>packages/demo/src/t.js<|end_filename|>
import React from 'react';
import AccountBox from '@material-ui/icons/AccountBox';
import {makeTranslator, createMap} from '@ui-schema/ui-schema';
import * as en from '@ui-schema/dictionary/en'
import * as de from '@ui-schema/dictionary/de'

const BtsPlus = () => {
    return <svg className="bi bi-plus" width={20} height={20} viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fillRule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clipRule="evenodd"/>
        <path fillRule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clipRule="evenodd"/>
    </svg>;
};
const BtsMinus = () => {
    return <svg className={['bi', 'bi-dash-circle', 'mx-3'].join(' ')} width={20} height={20} viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fillRule="evenodd" d="M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z" clipRule="evenodd"/>
        <path fillRule="evenodd" d="M3.5 8a.5.5 0 01.5-.5h8a.5.5 0 010 1H4a.5.5 0 01-.5-.5z" clipRule="evenodd"/>
    </svg>;
};

const icons = {
    'AccountBox': () => <AccountBox/>,
    'Plus': () => <BtsPlus/>,
    'Minus': () => <BtsMinus/>,
};

const dicEN = createMap({
    error: en.errors,
    labels: {...en.labels, ...en.richText, ...en.dnd},
    formats: {...en.formats},
    pagination: {...en.pagination},
    // for material-ui only icons which are set manually through schema are needed to add
    icons,
    widget: {
        stepper: {
            'step-1': {
                email: {title: 'Email'},
                date: {title: 'Date'},
            },
        },
    },
    titles: {
        'simple-number': 'Simple Number',
    },
});

const dicDE = createMap({
    error: de.errors,
    labels: {...de.labels, ...de.richText, ...de.dnd},
    formats: {...de.formats},
    pagination: {...de.pagination},
    icons,
    widget: {
        stepper: {
            'step-1': {
                email: {title: 'E-Mail'},
                date: {title: 'Datum'},
            },
        },
        layouts: {
            enum: {
                notice: 'Notiz',
            },
        },
    },
    titles: {
        'simple-number': 'Einfache Nummer',
    },
});

const tEN = makeTranslator(dicEN, 'en');
const tDE = makeTranslator(dicDE, 'de');

const browserT = (text, context, schema) => {
    const locale = window.localStorage.getItem('locale') || navigator.language;
    return locale === 'de' ? tDE(text, context, schema) : tEN(text, context, schema);
    //return tEN(text, context, schema);
};

export {browserT}


<|start_filename|>packages/ds-material/src/Widgets/TextFieldIcon/index.js<|end_filename|>
export * from './TextFieldIcon'

<|start_filename|>packages/ui-schema/src/Plugins/ReferencingHandler/parseRefs.js<|end_filename|>
import {List, Map} from 'immutable';
import {resolveRef, SchemaRefPending} from '@ui-schema/ui-schema/Plugins/ReferencingHandler/resolveRef';
import {isRootSchema} from '@ui-schema/ui-schema/SchemaRootProvider';
import {getSchemaId} from '@ui-schema/ui-schema/Utils/getSchema';

const handleResolve = (keywords, condition, schema, context, recursive, pending) => {
    Object.keys(keywords).forEach(keyword => {
        // schemaMap can be a `Map` or a `List`
        const schemaMap = schema.get(keyword)
        if(schemaMap && condition(schemaMap)) {
            schema = schema.set(keyword, schemaMap.map((subSchema) => {
                const res = parseRefs(subSchema, context, keywords[keyword] || recursive, pending)
                pending = res.pending
                return res.schema
            }));
        }
    })

    return {schema, pending}
}

// all keywords which nested schemas in maps
const checkNestedMapSchema = {
    properties: false,
}

// all keywords which are an array of schemas
const checkNestedArraySchema = {}

const parseRefsInRenderingKeywords = (schema, context, recursive, pending = Map()) => {
    // for all schema keywords which will be rendered, only the root references must be resolved,
    // but not if they are within an e.g. `if`
    // - e.g. references within `properties` doesn't need to be resolved before they are rendered
    let res = {schema, pending}

    res = handleResolve(
        checkNestedMapSchema, schemaMap => Map.isMap(schemaMap),
        res.schema, context, recursive, res.pending,
    )

    res = handleResolve(
        checkNestedArraySchema, schemaList => List.isList(schemaList),
        res.schema, context, recursive, res.pending,
    )

    return res
}

// conditional keywords who must resolve recursive
const checkConditionalNestedMapSchema = {
    patternProperties: true,
    dependencies: false,
    dependentSchemas: false,
}

// all keywords which are an array of schemas
const checkConditionalNestedArraySchema = {
    allOf: false,
    oneOf: false,
    anyOf: false,
    // here items are tuple-schema arrays
    items: false,
}

const checkSchema = {
    if: true,
    else: false,
    then: false,
    not: false,
    propertyNames: true,
    contains: true,
}

const parseRefsInConditionalKeywords = (schema, context, recursive = false, pending = Map()) => {
    // all schema keywords which are never rendered must be resolved endless-recursive
    // - e.g. `if` is used from within the ConditionalHandler, but it will never be rendered through `PluginStack`
    //   thus any `$ref` can not be resolved at render-flow, but must be resolved beforehand
    // for all schema keywords which may-be rendered, only the first level must be resolved, maybe configurable depth
    // - e.g. if `then` should be applied, this schema is merged into the current one, if it is only a reference
    //   and another `then` is applied and also just a reference, the first reference will be overwritten from the second one and is lost.
    //   when resolving the root ref in the `then`s, those schemas are merged into each other

    let res = {schema, pending}

    Object.keys(checkSchema).forEach(keyword => {
        const schemaCond = res.schema.get(keyword)
        if(schemaCond && Map.isMap(schemaCond)) {
            const resCheckSchema = parseRefs(schemaCond, context, checkSchema[keyword] || recursive, res.pending)
            res.schema = res.schema.set(keyword, resCheckSchema.schema);
            res.pending = resCheckSchema.pending
        }
    })

    res = handleResolve(
        checkConditionalNestedMapSchema, schemaMap => Map.isMap(schemaMap),
        res.schema, context, true, res.pending,
    )

    res = handleResolve(
        checkConditionalNestedArraySchema, schemaList => List.isList(schemaList),
        res.schema, context, recursive, res.pending,
    )

    // items is either a schema or a list of schemas,
    // here one-schema for all items
    const items = res.schema.get('items')
    if(items && Map.isMap(items)) {
        const itemsSchema = parseRefs(items, context, recursive, res.pending)
        res.schema = res.schema.set('items', itemsSchema.schema)
        res.pending = itemsSchema.pending
    }

    return res
}

export const parseRefs = (schema, context, recursive = false, pending = Map()) => {
    const ref = schema.get('$ref')
    const schemaVersion = schema.get('version')
    if(ref) {
        // 1. if schema is a reference itself, resolve it
        //    then with the next code, references in the reference are resolved
        try {
            let resolved = resolveRef(ref, context, schemaVersion)
            // merging resolved ref with current schema, using mergeDeep, but not with `$ref`
            // - for recursion protection and without `version`, to be sure to get the latest `version`
            // todo: json-schema multi-schema validation
            schema = resolved ? resolved.mergeDeep(schema.delete('version').delete('$ref')) : schema
        } catch(e) {
            if(e instanceof SchemaRefPending) {
                const id = context.id || '#'
                pending = pending.updateIn([id, ref], (refPref = List()) => {
                    const v = schema.get('version') || '*'
                    if(!refPref.contains(v)) {
                        refPref = refPref.push(v)
                    }
                    return refPref
                })
            } else {
                throw e
            }
        }
    }

    if(isRootSchema(schema)) {
        // change context if new root schema
        // enforces this before going deeper when nested/recursive
        context = {...context}
        context.id = getSchemaId(schema)
        context.root = schema
        context.defs = schema.get('definitions') || schema.get('$defs')
    }

    let res = {schema, pending}

    // 2. handle conditionals
    res = parseRefsInConditionalKeywords(res.schema, context, recursive, res.pending)

    // 3. handle validation/applicator schema
    if(recursive) {
        res = parseRefsInRenderingKeywords(res.schema, context, recursive, res.pending)
    }

    return res
}


<|start_filename|>packages/material-richtext/src/RichTextProvider/RichTextProvider.js<|end_filename|>
import React from "react";

export const RichTextContext = React.createContext({});

export const RichTextProvider = ({children, ...props}) => <RichTextContext.Provider value={props} children={children}/>;

/**
 * @return {{
 *     editorState: Map,
 *     handleChange: function,
 * }}
 */
export const useRichText = () => {
    return React.useContext(RichTextContext);
};



<|start_filename|>packages/material-color/src/Swatches/index.js<|end_filename|>
export * from './Swatches'


<|start_filename|>packages/ui-schema/src/WidgetRenderer/WidgetRenderer.js<|end_filename|>
import React from 'react';
import {useImmutable} from '@ui-schema/ui-schema/Utils';
import {widgetMatcher} from '@ui-schema/ui-schema/widgetMatcher';

export const WidgetRenderer = (
    {
        // we do not want `value`/`internalValue` to be passed to non-scalar widgets for performance reasons
        value, internalValue,
        WidgetOverride,
        errors,
        onErrors,
        // todo: concept in validation
        // we do not want `parentSchema` to be passed to the final widget for performance reasons
        // eslint-disable-next-line no-unused-vars
        //parentSchema,
        // we do not want `requiredList` to be passed to the final widget for performance reasons
        // eslint-disable-next-line no-unused-vars
        requiredList,
        // eslint-disable-next-line no-unused-vars
        currentPluginIndex,
        // `props` contains all props accumulated in the PluginStack, UIRootRenderer etc.
        ...props
    },
) => {
    const {schema, widgets, isVirtual} = props;
    const type = schema.get('type');
    const widgetName = schema.get('widget');
    const currentErrors = useImmutable(errors)

    React.useEffect(() => onErrors && onErrors(currentErrors), [onErrors, currentErrors])

    let Widget = widgetMatcher({
        isVirtual,
        WidgetOverride,
        widgetName: widgetName,
        schemaType: type,
        widgets,
    });

    const extractValue = !isVirtual && (type === 'array' || type === 'object')
    return Widget ?
        <Widget
            {...props}
            value={extractValue ? undefined : value}
            internalValue={extractValue ? undefined : internalValue}
            errors={currentErrors}
        /> : null;
};


<|start_filename|>packages/ds-bootstrap/src/Component/index.js<|end_filename|>
export * from './LocaleHelperText'
export * from './Icons'

<|start_filename|>packages/ui-schema/src/Utils/getSchema/index.js<|end_filename|>
export * from './getSchema'


<|start_filename|>packages/ui-schema/src/Validators/PatternValidator/PatternValidator.js<|end_filename|>
import {Map} from 'immutable';
import {schemaTypeIs} from '@ui-schema/ui-schema/Utils/schemaTypeIs';

const ERROR_PATTERN = 'pattern-not-matching';

const validatePattern = (type, value, pattern) => {
    if(schemaTypeIs(type, 'string') && typeof value === 'string' && pattern) {
        return null !== value.match(pattern);
    }

    return true;
};

const patternValidator = {
    handle: ({schema, value, errors, valid}) => {
        let type = schema.get('type');
        let pattern = schema.get('pattern');

        if(!validatePattern(type, value, pattern)) {
            valid = false;
            errors = errors.addError(ERROR_PATTERN, Map({pattern, patternError: schema.get('patternError')}));
        }

        return {errors, valid}
    },
};


export {patternValidator, ERROR_PATTERN, validatePattern}


<|start_filename|>packages/ds-bootstrap/src/index.js<|end_filename|>
export * from './Component'
export * from './Grid'
export * from './Widgets'
export * from './pluginStack'
export * from './widgetsBinding'


<|start_filename|>packages/ui-schema/src/UIApi/index.js<|end_filename|>
export * from './UIApi'


<|start_filename|>packages/ui-schema/src/Utils/sortScalarList/index.js<|end_filename|>
export * from './sortScalarList'


<|start_filename|>packages/material-color/src/Alpha/Alpha.js<|end_filename|>
import useTheme from "@material-ui/core/styles/useTheme";
import {ColorBase} from "../Base/ColorBase/ColorBase";
import React from "react";
import {styleWrapper} from "../styleWrapper";
import { AlphaPicker } from 'react-color';

const WrappedAlphaPicker = p => {
    const theme = useTheme();
    return <div style={styleWrapper(theme)}>
        <div style={{background: '#ffffff', borderRadius: 3}}>
            <AlphaPicker {...p} width={'100%'}/>
        </div>
    </div>
};

export const ColorAlpha = (props) => {
    return <ColorBase {...props} ColorPicker={WrappedAlphaPicker}/>
};

