structured-ticket-form

Table of contents

• [General Info] (#general-info)
• Technologies
• Setup
• Sandbox VIew
• Deployment

General info

Simple component to create and edit jsonSchemaForm with possibility to adding translated fields and custom UISchema.

Technologies

• TypeScript
• JsonSchemaForm
• React
• snowpack

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.

1. Download repository
2. Check your node version =>12.0.0 (if you are working on Macbook with M1 CPU use node =>15.0.0)
3. Install the required packages:

    yarn install

4. In first start:

   yarn build:sandbox

5. To start sandbox view:

   yarn start

Deployment

$ yarn version
$ yarn release