samples.json

[
  {
    "title": "Layout Grid",
    "description": [
      "It has 12 columns. Also you can specify phoneColumns,",
      "tableColumns, desktopColumns. It supports nested grids"
    ],
    "lines": [
      "<One fields={[",
      "  {",
      "    type: FieldType.Group,",
      "    columns: '12',",
      "    fields: [",
      "      {",
      "        type: FieldType.Component,",
      "        compute: () => <Rect>12 total</Rect>,",
      "      },",
      "    ]",
      "  },",
      "  {",
      "    type: FieldType.Group,",
      "    desktopColumns: '12',",
      "    phoneColumns: '6',",
      "    tabletColumns: '6',",
      "    fields: [",
      "      {",
      "        type: FieldType.Component,",
      "        compute: () => <Rect>6 phone 6 tabled 12 desktop</Rect>,",
      "      }",
      "    ],",
      "  },",
      "  {",
      "    type: FieldType.Group,",
      "    desktopColumns: '12',",
      "    phoneColumns: '6',",
      "    tabletColumns: '6',",
      "    fields: [",
      "      {",
      "        type: FieldType.Component,",
      "        compute: () => <Rect>6 phone 6 tabled 12 desktop</Rect>,",
      "      }",
      "    ],",
      "  },",
      "  {",
      "    type: FieldType.Group,",
      "    desktopColumns: '6',",
      "    phoneColumns: '4',",
      "    tabletColumns: '4',",
      "    fields: [",
      "      {",
      "        type: FieldType.Component,",
      "        compute: () => <Rect>4 phone 4 tabled 6 desktop</Rect>,",
      "      }",
      "    ],",
      "  },",
      "  {",
      "    type: FieldType.Group,",
      "    desktopColumns: '6',",
      "    phoneColumns: '4',",
      "    tabletColumns: '4',",
      "    fields: [",
      "      {",
      "        type: FieldType.Component,",
      "        compute: () => <Rect>4 phone 4 tabled 6 desktop</Rect>,",
      "      }",
      "    ],",
      "  },",
      "  {",
      "    type: FieldType.Group,",
      "    desktopColumns: '6',",
      "    phoneColumns: '4',",
      "    tabletColumns: '4',",
      "    fields: [",
      "      {",
      "        type: FieldType.Component,",
      "        compute: () => <Rect>4 phone 4 tabled 6 desktop</Rect>,",
      "      }",
      "    ],",
      "  },",
      "]}/>",
      ""
    ]
  },
  {
    "title": "State by pure functions",
    "description": [
      "Code split convention will keep your code",
      "pure after extending view by other fields"
    ],
    "lines": [
      "<One",
      "  handler={() => Promise.resolve({",
      "    items: ['a', 'b', 'c']",
      "  })}",
      "  fields={[",
      "    {",
      "      type: FieldType.Items,",
      "      title: 'A sample field',",
      "      placeholder: 'Multiple selection',",
      "      name: 'items',",
      "      itemList: ['a', 'b', 'c'],",
      "      isVisible: (obj) => obj.visible,",
      "      isDisabled: (obj) => obj.disabled,",
      "    },",
      "    {",
      "      type: FieldType.Checkbox,",
      "      title: 'Mark as visible',",
      "      defaultValue: true,",
      "      name: 'visible',", 
      "    },",
      "    {",
      "      type: FieldType.Checkbox,",
      "      title: 'Mark as disabled',",
      "      defaultValue: false,",
      "      name: 'disabled',", 
      "    },",
      "  ]}",
      "/>",
      ""
    ]
  },
  {
    "title": "Validation optimisation",
    "description": [
      "It includes input debouncing and data filtering",
      "which prevents submit of invalid input"
    ],
    "lines": [
      "<One",
      "  handler={{",
      "    text: '42',",
      "  }}",
      "  change={({}, initial) => {",
      "    if (!initial) {",
      "      snack(`",
      "        It looks like form  has raised",
      "        change callback. Should enable",
      "        save button",
      "      `);",
      "    }",
      "  }}",
      "  fields={[",
      "    {",
      "      type: FieldType.Text,",
      "      // inputType: 'number',",
      "      title: 'Only number allowed',",
      "      description: 'Which will not be greater or lower than 42',",
      "      name: 'text',",
      "      isInvalid(obj) {",
      "        if (isNaN(obj.text)) {",
      "          return 'It is not a number';",
      "        }",
      "        if (obj.text != 42) {",
      "          return 'The number is greater or lower than 42';",
      "        }",
      "        return null;",
      "      },",
      "      invalidity() {",
      "        snack(`",
      "          It looks  like form  has  invalid value",
      "          in the field. The save button should be",
      "          disabled",
      "        `);",
      "      },",
      "    }",
      "  ]}",
      "/>",
      ""
    ]
  },
  {
    "title": "Focus-blur monitoring",
    "description": [
      "There is automatic monitor for focus/blur of",
      "field, group and full component with bubbling",
      "support"
    ],
    "lines": [
      "<One blur={() => snack('blur c')} fields={[",
      "  {",
      "    type: FieldType.Text,",
      "    name: 'a',",
      "    focus() { snack('focus a') },",
      "    blur() { snack('blur a') },",
      "  },",
      "  {",
      "    type: FieldType.Text,",
      "    name: 'b',",
      "    focus() { snack('focus b') },",
      "  }",
      "]}/>",
      ""
    ]
  },
  {
    "title": "Two-way value binding",
    "description": [
      "Completely Bugless"
    ],
    "lines": [
      "<One fields={[",
      "  {",
      "    type: FieldType.Progress,",
      "    showPercentLabel: true,",
      "    maxPercent: 100,",
      "    name: 'slider',",
      "  },",
      "  {",
      "    type: FieldType.Slider,",
      "    name: 'slider',",
      "    leadingIcon: VolumeDown,",
      "    trailingIcon: VolumeUp,",
      "    defaultValue: 30,",
      "    leadingIconClick(v, onChange) { onChange(v - 10) },",
      "    trailingIconClick(v, onChange) { onChange(v + 10) },",
      "  },",
      "]}/>",
      ""
    ]
  }, 
  {
    "title": "Computed values",
    "description": [
      "Much better than redux selectors"
    ],
    "lines": [
      "<One fields={[",
      "  {",
      "    type: FieldType.Text,",
      "    title: 'Computed value',",
      "    compute(obj) {",
      "      if (obj.radio === 'first') {",
      "        return 'It looks like radio #1 was cheched';",
      "      } else if (obj.radio === 'second') {",
      "        return 'It looks like radio #2 was cheched';",
      "      } else if (obj.radio === 'third') {",
      "        return 'It looks like radio #3 was cheched';",
      "      } else {",
      "        return 'Please mark radio button';",
      "      }",
      "    },",
      "  },",
      "  {",
      "    type: FieldType.Radio,",
      "    title: 'First radio button',",
      "    name: 'radio',",
      "    radioValue: 'first',",
      "  },",
      "  {",
      "    type: FieldType.Radio,",
      "    title: 'Second radio button',",
      "    name: 'radio',",
      "    radioValue: 'second',",
      "  },",
      "  {",
      "    type: FieldType.Radio,",
      "    title: 'Third radio button',",
      "    name: 'radio',",
      "    radioValue: 'third',",
      "  },",
      "]}/>",
      ""
    ]
  },
  {
    "title": "Modal pickers",
    "description": [
      "Mobile-first modal date and time pickers. Also there is \"One\" component based",
      "user input dialog which helps keep single responsibility principle on page"
    ],
    "lines": [
      "<One fields={[",
      "  {",
      "    type: FieldType.Text,",
      "    title: 'Pick date',",
      "    description: 'By using trailing icon',",
      "    name: 'date',",
      "    trailingIcon: CalendarToday,",
      "    readonly: true,",
      "    trailingIconClick: (v, onChange) => pickDate().then((d) => {",
      "      if (d) {",
      "        onChange(d.format('MM-DD-YYYY'));",
      "      } else {",
      "        onChange('Rejected :-(');",
      "      }",
      "    }),",
      "  },",
      "  {",
      "    type: FieldType.Text,",
      "    title: 'Pick time',",
      "    description: 'By using leading icon',",
      "    name: 'time',",
      "    leadingIcon: Alarm,",
      "    readonly: true,",
      "    defaultValue: '12:00',",
      "    leadingIconClick: (v, onChange) => pickTime().then((t) => {",
      "      if (t) {",
      "        onChange(t.format('H:mm'));",
      "      } else {",
      "        onChange('Rejected :-(');",
      "      }",
      "    }),",
      "  },",
      "  {",
      "    type: FieldType.Text,",
      "    title: 'Pick name',",
      "    description: 'Firstname, Lastname, Patronymic',",
      "    name: 'fio',",
      "    trailingIcon: Face,",
      "    readonly: true,",
      "    trailingIconClick: (v, onChange) => pickOne('Waiting for user input', [",
      "      {type: FieldType.Text, title: 'Firstname', defaultValue: 'Петр', name: 'f'},",
      "      {type: FieldType.Text, title: 'Lastname', name: 'l'},",
      "      {type: FieldType.Text, title: 'Patronymic', name: 'p'},",
      "    ]).then((input) => {",
      "      if (input) {",
      "        const {f, l, p} = input;",
      "        onChange([f, l, p].join(' '));",
      "      } else {",
      "        onChange('Rejected :-(');",
      "      }",
      "    }),",
      "  },",
      "]}/>",
      ""
    ]
  },
  {
    "title": "Demos",
    "description": [
      "Applications created with One component"
    ],
    "lines": [
      "<div style={{height: '100%', width: '100%'}}>",
      "  <Typography>",
      "    <Link onClick={() => openBlank('./wordpress-interop/')}>",
      "      Wordpress interop",
      "    </Link>",
      "  </Typography>",
      "  <Typography>",
      "    <Link onClick={() => openBlank('./form-generator/')}>",
      "      Form generator",
      "    </Link>",
      "  </Typography>",
      "  <Typography>",
      "    <Link onClick={() => openBlank('./amazing-settings/')}>",
      "      Settings panel",
      "    </Link>",
      "  </Typography>",
      "  <Typography>",
      "    <Link onClick={() => openBlank('./amazing-search/')}>",
      "      Search example",
      "    </Link>",
      "  </Typography>",
      "  <Typography>",
      "    <Link onClick={() => openBlank('./amazing-typography/')}>",
      "      Typography",
      "    </Link>",
      "  </Typography>",
      "  <Typography>",
      "    <Link onClick={() => openBlank('https://github.com/tripolskypetr/react-view-builder')}>",
      "      NPM package",
      "    </Link>",
      "  </Typography>",
      "</div>",
      ""
    ]
  }
]