structured-ticket-form

Table of contents

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

Setup

Install:

To use this component, install in your project using npm:

$ yarn 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

Production release

!! DO NOT npm version !!

The project use semantic-release which automates the whole package release workflow including:

• determining the next version number
• generating the release notes and publishing the package

This repository is also configured to squash-merge (see here).
When you squash merge, GitHub takes the title of the PR for the squash-merge's commit subject.

By choosing a proper PR title e.g. feat: my new feature your merged PR will trigger a new release.
See semantic-releases docs for available prefixes.

Development release

1. Create or check out the target branch from the commit you want to release.

2. Push the branch to trigger the CI pipeline:

   git push --force origin HEAD:beta   # or alpha / next

   The pipeline will automatically run semantic-release, which detects the branch name, bumps the version with the appropriate pre-release tag, and publishes it to npm under the matching dist-tag. Check Actions page for the release logs.

3. Install the pre-release in another project:

   yarn add -E @allthings/structured-ticket-form@beta   # or @alpha / @next

   or use exact release (check versions on npm):

   yarn add -E @allthings/[email protected]

4. Promote to stable – once the pre-release is validated, create a PR form your target branch and proceed with Production release section.