Frontend - Documentation

[jaballogian]

This issue is just documentation.

Deployed app: https://dev.worx.id/sign-in

List of licenses:

• base component: MUI
• base Data Grid component: MUI Data Grid
• country list: DannMolina's country list JSON object

JSON object form:

Component Design: https://whimsical.com/sketch-3aN9P3fud7mpb1hWt4A4w3

{
  label: 'Eksplor - 2',
  description: 'Contoh Deskripsi',
  submit_in_zone: true,
  default: true
  fields: [
    {...},
    {...},
    ...
  ],
}

JSON object form fields sample:

1. Text Field

{
  id: '7231942686725',
  label: 'Text field 1',
  description: 'description',
  required: true,
  type: 'text',
  minLength: 0,
  maxLength: 24,
}

2. Checkbox

{
  id: '23565229205',
  label: 'Checkboxes',
  description: 'description',
  required: false,
  minChecked: 1,
  maxChecked: 3,
  group: [
    {
      label: 'Option #1'
    },
    {
      label: 'Option #2'
    },
    {
      label: 'Option #3'
    }
  ],
  type: 'checkbox_group'
}

3. Radio Button

{
  id: '2356760777462',
  label: 'Radiobuttons',
  description: 'description',
  required: true,
  options: [
    {
      label: 'Option #1'
    },
    {
      label: 'Option #2'
    },
    {
      label: 'Option #3'
    }
  ],
  type: 'radio_group'
}

4. Dropdown

{
  id: '2357109577409',
  label: 'Dropdown',
  description: 'description',
  required: false,
  options: [
    {
      label: 'Option #1'
    },
    {
      label: 'Option #2'
    },
    {
      label: 'Option #3'
    }
  ],
  type: 'dropdown'
}

5. Date

{
  id: '2357265606749',
  label: 'Date',
  description: 'description',
  required: false,
  disableFuture: false,
  disablePast: true,
  type: 'date'
}

6. Separator

{
  id: '23575153539',
  label: 'Separator',
  description: 'description',
  type: 'separator'
}

7. Rating

{
  id: '2357523970968',
  label: 'Rating',
  description: 'description',
  required: false,
  maxStars: 5,
  type: 'rating'
}

8. File

{
  id: '2357526469860',
  label: File',
  description: 'description',
  required: true,
  maxFiles: 6,
  maxFileSize: 10485760,
  minFileSize: 128,
  fileMinSizeType: 'MB',
  fileMaxSizeType: 'MB',
  allowedExtensions: [
    'csv',
    'doc',
    'docx'
  ],
  type: 'file'
}

9. Image

{
  id: '2357527652279',
  label: 'Image',
  description: 'description',
  required: false,
  maxFiles: 6,
  allowGalleryUpload: true,
  type: 'photo'
}

10. Signature

{
  id: '2357528685219',
  label: 'Signature',
  description: 'description',
  required: false,
  type: 'signature'
}

11. Time

12. Barcode

13. Sketch

14. Yes/No

15. Integer