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
• React 18/19
• React JSON Schema Form (RJSF)
• Material UI (MUI v9)
• Monaco editor
• Parcel (sandbox build only)

Setup

Install:

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

$ yarn install @allthings/structured-ticket-form

[!IMPORTANT] This package is pure ESM and does not ship a CommonJS build. Use import to load it; older CommonJS runtimes and toolchains may fail when using require(). Consumers need to be on an ESM-capable toolchain (Node ≥ 22.13, Vite, Vitest, modern webpack/rollup, etc.).

How to use?:

Import the StructuredTicketEditor component into your .tsx file.

First, create the schema and language data objects:

import {
  EditorTab,
  StructuredTicketEditor,
} from '@allthings/structured-ticket-form'
import type {
  IFullFormSchema,
  ILanguageDisplay,
} from '@allthings/structured-ticket-form'

const schema: IFullFormSchema = {
  [EditorTab.JSON]: {},
  [EditorTab.UI]: {},
  [EditorTab.TRANSLATION]: {},
}

const languageDisplay: ILanguageDisplay = {
  display: { key: 'en_US', value: 'English' },
  language: [{ key: 'en_US', value: 'English' }],
}

Hold the schema in state and render the editor. onSaveButton receives the updated IFullFormSchema when the user saves:

const [fullFormSchema, setFullFormSchema] = useState<IFullFormSchema>(schema)
const [isValidate, setIsValidate] = useState(false)

<StructuredTicketEditor
  buttonSaveText="Save"
  errorTextButton="Dismiss"
  errorTextJson="Invalid JSON schema"
  errorTextTranslator="Invalid translation"
  fullFormSchema={fullFormSchema}
  isValidate={isValidate}
  languageDisplay={languageDisplay}
  multiErrorText="Multiple errors found"
  onSaveButton={(json) => setFullFormSchema(json)}
  setChangedSchema={() => {}}
  setIsValidate={setIsValidate}
/>

See IStructuredTicketEditorProperties in src/models.ts for the full, authoritative list of props (including optional button and error-text overrides).

What is the IFullFormSchema prop?

An object with three properties, keyed by EditorTab:

export interface IFullFormSchema {
  [EditorTab.JSON]: JSONSchema7
  [EditorTab.TRANSLATION]: Record<string, string>
  [EditorTab.UI]: UiSchema
}

What is the ILanguageDisplay prop?

An object describing the currently displayed language and the available ones:

export interface ILang {
  key: string
  value: string
}

export interface ILanguageDisplay {
  display: ILang
  language: ILang[]
}

Setup and lunch Sandbox View

You can try out how it works using our Sandbox View.

1. Download repository
2. Check your node version (this project requires Node >= 22.13, see engines in package.json)
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.