@allthings/structured-ticket-form

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

Usage no npm install needed!

<script type="module">
  import allthingsStructuredTicketForm from 'https://cdn.skypack.dev/@allthings/structured-ticket-form';
</script>

README

Build status

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
  • 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