@datalayer/primer-rjsf
Version:
React JSON Schema Form (RJSF) for Primer
1,713 lines (1,712 loc) • 55.5 kB
TypeScript
export const samples: {
Simple: {
schema: {
title: string;
description: string;
type: string;
required: string[];
properties: {
firstName: {
type: string;
title: string;
default: string;
};
lastName: {
type: string;
title: string;
};
age: {
type: string;
title: string;
};
bio: {
type: string;
title: string;
};
password: {
type: string;
title: string;
minLength: number;
};
telephone: {
type: string;
title: string;
minLength: number;
};
};
};
uiSchema: {
firstName: {
"ui:autofocus": boolean;
"ui:emptyValue": string;
"ui:placeholder": string;
"ui:autocomplete": string;
};
lastName: {
"ui:autocomplete": string;
};
age: {
"ui:widget": string;
"ui:title": string;
"ui:description": string;
};
bio: {
"ui:widget": string;
};
password: {
"ui:widget": string;
"ui:help": string;
};
telephone: {
"ui:options": {
inputType: string;
};
};
};
formData: {
lastName: string;
age: number;
bio: string;
password: string;
telephone: string;
};
};
"UI Options": {
schema: {
title: string;
description: string;
type: string;
required: string[];
properties: {
firstName: {
type: string;
title: string;
default: string;
};
lastName: {
type: string;
title: string;
};
telephone: {
type: string;
title: string;
minLength: number;
};
};
};
uiSchema: {
"ui:submitButtonOptions": {
submitText: string;
norender: boolean;
props: {
disabled: boolean;
className: string;
};
};
firstName: {
"ui:autofocus": boolean;
"ui:emptyValue": string;
"ui:autocomplete": string;
};
lastName: {
"ui:title": string;
"ui:emptyValue": string;
"ui:autocomplete": string;
};
age: {
"ui:widget": string;
"ui:title": string;
"ui:description": string;
};
bio: {
"ui:widget": string;
};
password: {
"ui:widget": string;
"ui:help": string;
};
date: {
"ui:widget": string;
};
telephone: {
"ui:options": {
inputType: string;
};
};
};
formData: {
lastName: string;
age: number;
bio: string;
password: string;
};
};
Nested: {
schema: {
title: string;
type: string;
required: string[];
properties: {
title: {
type: string;
title: string;
};
tasks: {
type: string;
title: string;
items: {
type: string;
required: string[];
properties: {
title: {
type: string;
title: string;
description: string;
};
details: {
type: string;
title: string;
description: string;
};
done: {
type: string;
title: string;
default: boolean;
};
};
};
};
};
};
uiSchema: {
tasks: {
items: {
details: {
"ui:widget": string;
};
};
};
};
formData: {
title: string;
tasks: {
title: string;
details: string;
done: boolean;
}[];
};
};
Arrays: {
schema: {
definitions: {
Thing: {
type: string;
properties: {
name: {
type: string;
default: string;
};
};
};
};
type: string;
properties: {
listOfStrings: {
type: string;
title: string;
items: {
type: string;
default: string;
};
};
multipleChoicesList: {
type: string;
title: string;
items: {
type: string;
enum: string[];
};
uniqueItems: boolean;
};
fixedItemsList: {
type: string;
title: string;
items: ({
title: string;
type: string;
default: string;
} | {
title: string;
type: string;
default?: undefined;
})[];
additionalItems: {
title: string;
type: string;
};
};
minItemsList: {
type: string;
title: string;
minItems: number;
items: {
$ref: string;
};
};
defaultsAndMinItems: {
type: string;
title: string;
minItems: number;
default: string[];
items: {
type: string;
default: string;
};
};
nestedList: {
type: string;
title: string;
items: {
type: string;
title: string;
items: {
type: string;
default: string;
};
};
};
unorderable: {
title: string;
type: string;
items: {
type: string;
default: string;
};
};
unremovable: {
title: string;
type: string;
items: {
type: string;
default: string;
};
};
noToolbar: {
title: string;
type: string;
items: {
type: string;
default: string;
};
};
fixedNoToolbar: {
title: string;
type: string;
items: ({
title: string;
type: string;
default: number;
} | {
title: string;
type: string;
default: boolean;
})[];
additionalItems: {
title: string;
type: string;
default: string;
};
};
};
};
uiSchema: {
listOfStrings: {
items: {
"ui:emptyValue": string;
};
};
multipleChoicesList: {
"ui:widget": string;
};
fixedItemsList: {
items: {
"ui:widget": string;
}[];
additionalItems: {
"ui:widget": string;
};
};
unorderable: {
"ui:options": {
orderable: boolean;
};
};
unremovable: {
"ui:options": {
removable: boolean;
};
};
noToolbar: {
"ui:options": {
addable: boolean;
orderable: boolean;
removable: boolean;
};
};
fixedNoToolbar: {
"ui:options": {
addable: boolean;
orderable: boolean;
removable: boolean;
};
};
};
formData: {
listOfStrings: string[];
multipleChoicesList: string[];
fixedItemsList: (string | number | boolean)[];
nestedList: string[][];
unorderable: string[];
unremovable: string[];
noToolbar: string[];
fixedNoToolbar: (string | number | boolean)[];
};
};
Numbers: {
schema: {
type: string;
title: string;
properties: {
number: {
title: string;
type: string;
};
integer: {
title: string;
type: string;
};
numberEnum: {
type: string;
title: string;
enum: number[];
};
numberEnumRadio: {
type: string;
title: string;
enum: number[];
};
integerRange: {
title: string;
type: string;
minimum: number;
maximum: number;
};
integerRangeSteps: {
title: string;
type: string;
minimum: number;
maximum: number;
multipleOf: number;
};
};
};
uiSchema: {
integer: {
"ui:widget": string;
};
numberEnumRadio: {
"ui:widget": string;
"ui:options": {
inline: boolean;
};
};
integerRange: {
"ui:widget": string;
};
integerRangeSteps: {
"ui:widget": string;
};
};
formData: {
number: number;
integer: number;
numberEnum: number;
integerRange: number;
integerRangeSteps: number;
};
};
Widgets: {
schema: {
title: string;
type: string;
properties: {
stringFormats: {
type: string;
title: string;
properties: {
email: {
type: string;
format: string;
};
uri: {
type: string;
format: string;
};
};
};
boolean: {
type: string;
title: string;
properties: {
default: {
type: string;
title: string;
description: string;
};
radio: {
type: string;
title: string;
description: string;
};
select: {
type: string;
title: string;
description: string;
};
};
};
string: {
type: string;
title: string;
properties: {
default: {
type: string;
title: string;
};
textarea: {
type: string;
title: string;
};
placeholder: {
type: string;
};
color: {
type: string;
title: string;
default: string;
};
};
};
secret: {
type: string;
default: string;
};
disabled: {
type: string;
title: string;
default: string;
};
readonly: {
type: string;
title: string;
default: string;
};
readonly2: {
type: string;
title: string;
default: string;
readOnly: boolean;
};
widgetOptions: {
title: string;
type: string;
default: string;
};
selectWidgetOptions: {
title: string;
type: string;
enum: string[];
};
selectWidgetOptions2: {
title: string;
type: string;
oneOf: {
const: string;
title: string;
}[];
};
};
};
uiSchema: {
boolean: {
radio: {
"ui:widget": string;
};
select: {
"ui:widget": string;
};
};
string: {
textarea: {
"ui:widget": string;
"ui:options": {
rows: number;
};
};
placeholder: {
"ui:placeholder": string;
};
color: {
"ui:widget": string;
};
};
secret: {
"ui:widget": string;
};
disabled: {
"ui:disabled": boolean;
};
readonly: {
"ui:readonly": boolean;
};
widgetOptions: {
"ui:widget": ({ value, onChange, options }: {
value: any;
onChange: any;
options: any;
}) => import("react/jsx-runtime").JSX.Element;
"ui:options": {
backgroundColor: string;
};
};
selectWidgetOptions: {
"ui:widget": ({ value, onChange, options }: {
value: any;
onChange: any;
options: any;
}) => import("react/jsx-runtime").JSX.Element;
"ui:options": {
backgroundColor: string;
};
};
};
formData: {
stringFormats: {
email: string;
uri: string;
};
boolean: {
default: boolean;
radio: boolean;
select: boolean;
};
string: {
default: string;
textarea: string;
};
secret: string;
};
};
Ordering: {
schema: {
title: string;
type: string;
required: string[];
properties: {
password: {
type: string;
title: string;
};
lastName: {
type: string;
title: string;
};
bio: {
type: string;
title: string;
};
firstName: {
type: string;
title: string;
};
age: {
type: string;
title: string;
};
};
};
uiSchema: {
"ui:order": string[];
age: {
"ui:widget": string;
};
bio: {
"ui:widget": string;
};
password: {
"ui:widget": string;
};
};
formData: {
firstName: string;
lastName: string;
age: number;
bio: string;
password: string;
};
};
References: {
schema: {
definitions: {
address: {
type: string;
properties: {
street_address: {
type: string;
};
city: {
type: string;
};
state: {
type: string;
};
};
required: string[];
};
node: {
type: string;
properties: {
name: {
type: string;
};
children: {
type: string;
items: {
$ref: string;
};
};
};
};
};
type: string;
properties: {
billing_address: {
title: string;
$ref: string;
};
shipping_address: {
title: string;
$ref: string;
};
tree: {
title: string;
$ref: string;
};
};
};
uiSchema: {
"ui:order": string[];
};
formData: {
billing_address: {
street_address: string;
city: string;
state: string;
};
shipping_address: {
street_address: string;
city: string;
state: string;
};
tree: {
name: string;
children: {
name: string;
}[];
};
};
};
Custom: {
schema: {
title: string;
type: string;
required: string[];
properties: {
lat: {
type: string;
};
lon: {
type: string;
};
};
};
uiSchema: {
"ui:field": string;
};
formData: {
lat: number;
lon: number;
};
};
Errors: {
schema: {
title: string;
type: string;
properties: {
firstName: {
type: string;
title: string;
minLength: number;
pattern: string;
};
active: {
type: string;
title: string;
};
skills: {
type: string;
items: {
type: string;
minLength: number;
};
};
multipleChoicesList: {
type: string;
title: string;
uniqueItems: boolean;
maxItems: number;
items: {
type: string;
enum: string[];
};
};
};
};
uiSchema: {};
formData: {
firstName: string;
active: string;
skills: string[];
multipleChoicesList: string[];
};
};
Examples: {
schema: {
title: string;
description: string;
type: string;
properties: {
browser: {
type: string;
title: string;
examples: string[];
};
};
};
};
Large: {
schema: {
definitions: {
largeEnum: {
type: string;
enum: string[];
};
};
title: string;
type: string;
properties: {
string: {
type: string;
title: string;
};
choice1: {
$ref: string;
};
choice2: {
$ref: string;
};
choice3: {
$ref: string;
};
choice4: {
$ref: string;
};
choice5: {
$ref: string;
};
choice6: {
$ref: string;
};
choice7: {
$ref: string;
};
choice8: {
$ref: string;
};
choice9: {
$ref: string;
};
choice10: {
$ref: string;
};
};
};
uiSchema: {
choice1: {
"ui:placeholder": string;
};
};
formData: {};
};
"Date & time": {
schema: {
title: string;
type: string;
properties: {
native: {
title: string;
description: string;
type: string;
properties: {
datetime: {
type: string;
format: string;
};
date: {
type: string;
format: string;
};
};
};
alternative: {
title: string;
description: string;
type: string;
properties: {
"alt-datetime": {
type: string;
format: string;
};
"alt-date": {
type: string;
format: string;
};
};
};
};
};
uiSchema: {
alternative: {
"alt-datetime": {
"ui:widget": string;
"ui:options": {
yearsRange: number[];
};
};
"alt-date": {
"ui:widget": string;
"ui:options": {
yearsRange: number[];
};
};
};
};
formData: {};
};
Validation: {
schema: {
title: string;
description: string;
type: string;
properties: {
pass1: {
title: string;
type: string;
minLength: number;
};
pass2: {
title: string;
type: string;
minLength: number;
};
age: {
title: string;
type: string;
minimum: number;
};
};
};
uiSchema: {
pass1: {
"ui:widget": string;
};
pass2: {
"ui:widget": string;
};
};
formData: {};
validate: ({ pass1, pass2 }: {
pass1: any;
pass2: any;
}, errors: any) => any;
transformErrors: (errors: any) => any;
};
Files: {
schema: {
title: string;
type: string;
properties: {
file: {
type: string;
format: string;
title: string;
};
files: {
type: string;
title: string;
items: {
type: string;
format: string;
};
};
filesAccept: {
type: string;
format: string;
title: string;
};
};
};
uiSchema: {
filesAccept: {
"ui:options": {
accept: string;
};
};
};
formData: {};
};
Single: {
schema: {
title: string;
type: string;
};
formData: string;
uiSchema: {};
};
"Custom Array": {
schema: {
title: string;
type: string;
items: {
type: string;
};
};
formData: string[];
ArrayFieldTemplate: (props: any) => import("react/jsx-runtime").JSX.Element;
};
"Custom Object": {
schema: {
title: string;
description: string;
type: string;
required: string[];
properties: {
firstName: {
type: string;
title: string;
};
lastName: {
type: string;
title: string;
};
age: {
type: string;
title: string;
};
bio: {
type: string;
title: string;
};
password: {
type: string;
title: string;
minLength: number;
};
telephone: {
type: string;
title: string;
minLength: number;
};
};
};
formData: {
firstName: string;
lastName: string;
age: number;
bio: string;
password: string;
};
ObjectFieldTemplate: ({ TitleField, properties, title, description }: {
TitleField: any;
properties: any;
title: any;
description: any;
}) => import("react/jsx-runtime").JSX.Element;
};
Alternatives: {
schema: {
definitions: {
Color: {
title: string;
type: string;
anyOf: {
type: string;
enum: string[];
title: string;
}[];
};
Toggle: {
title: string;
type: string;
oneOf: {
title: string;
const: boolean;
}[];
};
};
title: string;
type: string;
required: string[];
properties: {
currentColor: {
$ref: string;
title: string;
};
colorMask: {
type: string;
uniqueItems: boolean;
items: {
$ref: string;
};
title: string;
};
toggleMask: {
title: string;
$ref: string;
};
colorPalette: {
type: string;
title: string;
items: {
$ref: string;
};
};
blendMode: {
title: string;
type: string;
oneOf: {
const: string;
title: string;
}[];
};
};
};
uiSchema: {
blendMode: {
"ui:enumDisabled": string[];
};
toggleMask: {
"ui:widget": string;
};
};
formData: {
currentColor: string;
colorMask: string[];
colorPalette: string[];
blendMode: string;
};
};
"Property dependencies": {
schema: {
title: string;
description: string;
type: string;
properties: {
unidirectional: {
title: string;
src: string;
type: string;
properties: {
name: {
type: string;
};
credit_card: {
type: string;
};
billing_address: {
type: string;
};
};
required: string[];
dependencies: {
credit_card: string[];
};
};
bidirectional: {
title: string;
src: string;
description: string;
type: string;
properties: {
name: {
type: string;
};
credit_card: {
type: string;
};
billing_address: {
type: string;
};
};
required: string[];
dependencies: {
credit_card: string[];
billing_address: string[];
};
};
};
};
uiSchema: {
unidirectional: {
credit_card: {
"ui:help": string;
};
billing_address: {
"ui:help": string;
};
};
bidirectional: {
credit_card: {
"ui:help": string;
};
billing_address: {
"ui:help": string;
};
};
};
formData: {
unidirectional: {
name: string;
};
bidirectional: {
name: string;
};
};
};
"Schema dependencies": {
schema: {
title: string;
description: string;
type: string;
properties: {
simple: {
src: string;
title: string;
type: string;
properties: {
name: {
type: string;
};
credit_card: {
type: string;
};
};
required: string[];
dependencies: {
credit_card: {
properties: {
billing_address: {
type: string;
};
};
required: string[];
};
};
};
conditional: {
title: string;
$ref: string;
};
arrayOfConditionals: {
title: string;
type: string;
items: {
$ref: string;
};
};
fixedArrayOfConditionals: {
title: string;
type: string;
items: {
title: string;
$ref: string;
}[];
additionalItems: {
title: string;
$ref: string;
};
};
};
definitions: {
person: {
title: string;
type: string;
properties: {
"Do you have any pets?": {
type: string;
enum: string[];
default: string;
};
};
required: string[];
dependencies: {
"Do you have any pets?": {
oneOf: ({
properties: {
"Do you have any pets?": {
enum: string[];
};
"How old is your pet?"?: undefined;
"Do you want to get rid of any?"?: undefined;
};
required?: undefined;
} | {
properties: {
"Do you have any pets?": {
enum: string[];
};
"How old is your pet?": {
type: string;
};
"Do you want to get rid of any?"?: undefined;
};
required: string[];
} | {
properties: {
"Do you have any pets?": {
enum: string[];
};
"Do you want to get rid of any?": {
type: string;
};
"How old is your pet?"?: undefined;
};
required: string[];
})[];
};
};
};
};
};
uiSchema: {
simple: {
credit_card: {
"ui:help": string;
};
};
conditional: {
"Do you want to get rid of any?": {
"ui:widget": string;
};
};
arrayOfConditionals: {
items: {
"Do you want to get rid of any?": {
"ui:widget": string;
};
};
};
fixedArrayOfConditionals: {
items: {
"Do you want to get rid of any?": {
"ui:widget": string;
};
};
additionalItems: {
"Do you want to get rid of any?": {
"ui:widget": string;
};
};
};
};
formData: {
simple: {
name: string;
};
conditional: {
"Do you have any pets?": string;
};
arrayOfConditionals: ({
"Do you have any pets?": string;
"How old is your pet?": number;
"Do you want to get rid of any?"?: undefined;
} | {
"Do you have any pets?": string;
"Do you want to get rid of any?": boolean;
"How old is your pet?"?: undefined;
})[];
fixedArrayOfConditionals: ({
"Do you have any pets?": string;
"How old is your pet?"?: undefined;
"Do you want to get rid of any?"?: undefined;
} | {
"Do you have any pets?": string;
"How old is your pet?": number;
"Do you want to get rid of any?"?: undefined;
} | {
"Do you have any pets?": string;
"Do you want to get rid of any?": boolean;
"How old is your pet?"?: undefined;
})[];
};
};
"Additional Properties": {
schema: {
title: string;
description: string;
type: string;
required: string[];
additionalProperties: {
type: string;
};
properties: {
firstName: {
type: string;
title: string;
};
lastName: {
type: string;
title: string;
};
};
};
uiSchema: {
firstName: {
"ui:autofocus": boolean;
"ui:emptyValue": string;
};
};
formData: {
firstName: string;
lastName: string;
assKickCount: string;
};
};
"Any Of": {
schema: {
type: string;
properties: {
age: {
type: string;
title: string;
};
items: {
type: string;
items: {
type: string;
anyOf: ({
properties: {
foo: {
type: string;
};
bar?: undefined;
};
} | {
properties: {
bar: {
type: string;
};
foo?: undefined;
};
})[];
};
};
};
anyOf: ({
title: string;
properties: {
firstName: {
type: string;
title: string;
default: string;
};
lastName: {
type: string;
title: string;
};
idCode?: undefined;
};
} | {
title: string;
properties: {
idCode: {
type: string;
title: string;
};
firstName?: undefined;
lastName?: undefined;
};
})[];
};
formData: {};
};
"Any Of with Custom Field": {
schema: {
title: string;
type: string;
anyOf: ({
title: string;
properties: {
city: {
type: string;
};
lat?: undefined;
lon?: undefined;
};
required: string[];
} | {
title: string;
properties: {
lat: {
type: string;
};
lon: {
type: string;
};
city?: undefined;
};
required: string[];
})[];
};
uiSchema: {
"ui:field": ({ schema, idSchema: { $id }, formData, onChange, ...other }: {
[x: string]: any;
schema: any;
idSchema: {
$id: any;
};
formData: any;
onChange: any;
}) => import("react/jsx-runtime").JSX.Element;
};
formData: {};
};
"One Of": {
schema: {
type: string;
oneOf: ({
properties: {
lorem: {
type: string;
};
ipsum?: undefined;
};
required: string[];
} | {
properties: {
ipsum: {
type: string;
};
lorem?: undefined;
};
required: string[];
})[];
};
formData: {};
};
"All Of": {
schema: {
type: string;
allOf: ({
properties: {
lorem: {
type: string[];
default: boolean;
};
ipsum?: undefined;
};
} | {
properties: {
lorem: {
type: string;
default?: undefined;
};
ipsum: {
type: string;
};
};
})[];
};
formData: {};
};
"If Then Else": {
schema: {
type: string;
properties: {
animal: {
enum: string[];
};
};
allOf: ({
if: {
properties: {
animal: {
const: string;
};
};
};
then: {
properties: {
food: {
type: string;
enum: string[];
};
water?: undefined;
};
required: string[];
};
required?: undefined;
} | {
if: {
properties: {
animal: {
const: string;
};
};
};
then: {
properties: {
food: {
type: string;
enum: string[];
};
water: {
type: string;
enum: string[];
};
};
required: string[];
};
required?: undefined;
} | {
required: string[];
if?: undefined;
then?: undefined;
})[];
};
formData: {};
};
"Null fields": {
schema: {
title: string;
description: string;
type: string;
required: string[];
properties: {
helpText: {
title: string;
description: string;
type: string;
};
firstName: {
type: string;
title: string;
default: string;
};
};
};
uiSchema: {
firstName: {
"ui:autofocus": boolean;
"ui:emptyValue": string;
};
};
formData: {};
};
"Enumerated objects": {
schema: {
definitions: {
locations: {
enumNames: string[];
enum: {
name: string;
lat: number;
lon: number;
}[];
};
};
type: string;
properties: {
location: {
title: string;
$ref: string;
};
locationRadio: {
title: string;
$ref: string;
};
multiSelect: {
title: string;
type: string;
uniqueItems: boolean;
items: {
$ref: string;
};
};
checkboxes: {
title: string;
type: string;
uniqueItems: boolean;
items: {
$ref: string;
};
};
};
};
uiSchema: {
locationRadio: {
"ui:widget": string;
};
checkboxes: {
"ui:widget": string;
};
};
formData: {
location: {
name: string;
lat: number;
lon: number;
};
};
};
Nullable: {
schema: {
title: string;
description: string;
type: string;
required: string[];
properties: {
firstName: {
type: string;
title: string;
default: string;
};
lastName: {
type: string;
title: string;
};
age: {
type: string[];
title: string;
};
bio: {