@allthings/structured-ticket-form
v6.0.1
Published
Simple component to create and edit jsonSchemaForm with possibility to adding translated fields and custom UISchema.
Downloads
2,013
Readme
structured-ticket-form
Table of contents
General info
Simple component to create and edit jsonSchemaForm with possibility to adding translated fields and custom UISchema.
Technologies
- TypeScript
- JsonSchemaForm
- React
- parcel
Setup
Install:
To use this component, install in your project using npm:
$ npm install @allthings/structured-ticket-form
How to use?:
import { AdminView } to your .tsx file.
You have to create and pass data object with specific types, for example like that:
const schema: FullFormSchema = {
[EditorTab.JSON]: {},
[EditorTab.UI]: {},
[EditorTab.TRANSLATION]: {},
};
const lang: LanguageDisplay = {
language: [],
display: '',
};
You have to use two useState hooks and pass for your created data object, for example like that:
const [textSchema, setTextSchema] = useState<FullFormSchema>(schema);
const [lang, setLang] = useState<LanguageDisplay>(lang);
To use component it is required to pass props like that:
<AdminView
FullFormSchema={schema}
LanguageDisplay={lang}
setSchema={(json) => setTextSchema(json)}
/>
What is FullFormSchema props?
It is an object with three properties declared as the following types:
export interface FullFormSchema {
[EditorTab.JSON]: JSONSchema7;
[EditorTab.UI]: JSONSchema7;
[EditorTab.TRANSLATION]: Record<string, string>;
}
What is LanguageDisplay props?
It is an object with two properties declared as the following types:
export interface LanguageDisplay {
language: string[];
display: string;
}
Setup and lunch Sandbox View
You can try out how it works using our Sandbox View.
- Download repository
- Check your node version =>12.0.0 (if you are working on Macbook with M1 CPU use node =>15.0.0)
- Install the required packages:
yarn install
- In first start:
yarn build:sandbox
- To start sandbox view:
yarn start
Deployment
$ yarn version
$ yarn release