-
Notifications
You must be signed in to change notification settings - Fork 174
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #469 from githubanuja/master
Adding schema docs in examples and api reference
- Loading branch information
Showing
28 changed files
with
1,505 additions
and
9 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
vitedocs/Pages/Examples/schemas/ArrayFieldSchema/ArrayFieldSchema.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { useEffect } from 'react'; | ||
| import Example from './Example'; | ||
| import exampleCode from './Example.jsx?raw'; | ||
| import Code from '../../../../YourComponents/Code'; | ||
| import { SideBySide } from '../../../../SideBySide'; | ||
|
|
||
| export default function ArrayFieldSchema() { | ||
| useEffect(() => { | ||
| window.scrollTo(0, 0); | ||
| }, []); | ||
| return ( | ||
| <> | ||
| <h1> | ||
| <code>Array Field Schema</code> | ||
| </h1> | ||
| <SideBySide | ||
| leftHeader={<h3>Example:</h3>} | ||
| rightHeader={<h3>Code:</h3>} | ||
| left={<Example />} | ||
| right={<Code links input1={exampleCode} />} | ||
| /> | ||
| <br /> | ||
| <br /> | ||
| </> | ||
| ); | ||
| } |
85 changes: 85 additions & 0 deletions
85
vitedocs/Pages/Examples/schemas/ArrayFieldSchema/Example.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import { SchemaFields, Debug } from 'informed'; | ||
| import { Form, Button } from 'YourComponents'; | ||
| import Ajv from 'ajv'; | ||
|
|
||
| const initialValue = [ | ||
| { | ||
| name: 'Joe', | ||
| age: '26' | ||
| }, | ||
| { | ||
| name: 'Elon', | ||
| age: '49' | ||
| } | ||
| ]; | ||
|
|
||
| const schema = { | ||
| type: 'object', | ||
| required: ['name', 'siblings'], | ||
| properties: { | ||
| name: { | ||
| type: 'string', | ||
| title: 'First name', | ||
| 'ui:control': 'input' | ||
| }, | ||
| siblings: { | ||
| type: 'array', | ||
| minItems: 2, | ||
| 'ui:control': 'array', | ||
| 'ui:props': { | ||
| initialValue | ||
| }, | ||
| 'ui:before': [{ 'ui:control': 'add' }], | ||
| items: { | ||
| type: 'object', | ||
| required: ['name', 'age'], | ||
| properties: { | ||
| name: { | ||
| type: 'string', | ||
| title: 'Sibling name', | ||
| 'ui:control': 'input' | ||
| }, | ||
| age: { | ||
| type: 'number', | ||
| title: 'Sibling age', | ||
| minimum: 0, | ||
| 'ui:control': 'input', | ||
| 'ui:props': { | ||
| type: 'number' | ||
| } | ||
| }, | ||
| married: { | ||
| type: 'string', | ||
| title: 'Are you married?', | ||
| enum: ['yes', 'no'], | ||
| 'ui:control': 'radio', | ||
| 'ui:props': { | ||
| notify: ['spouse'] | ||
| } | ||
| }, | ||
| spouse: { | ||
| type: 'string', | ||
| title: 'Spouse name', | ||
| 'ui:control': 'input', | ||
| 'ui:props': { | ||
| relevant: ({ formApi, scope }) => { | ||
| return formApi.getValue(`${scope}.married`) == 'yes'; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| 'ui:component:remove': { 'ui:control': 'remove' } | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| const Schema = () => ( | ||
| <Form ajv={Ajv} schema={schema}> | ||
| <SchemaFields /> | ||
| <Button type="submit">Submit</Button> | ||
| <Debug /> | ||
| </Form> | ||
| ); | ||
|
|
||
| export default Schema; |
35 changes: 35 additions & 0 deletions
35
vitedocs/Pages/Examples/schemas/ConditionalOptionsSchema/ConditionalOptionsSchema.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { useEffect } from 'react'; | ||
| import Example from './Example'; | ||
| import exampleCode from './Example.jsx?raw'; | ||
| import Code from '../../../../YourComponents/Code'; | ||
| import { SideBySide } from '../../../../SideBySide'; | ||
| import { Info } from '../../../../Info'; | ||
|
|
||
| export default function ConditionalOptionSchema() { | ||
| useEffect(() => { | ||
| window.scrollTo(0, 0); | ||
| }, []); | ||
| return ( | ||
| <> | ||
| <h1> | ||
| <code>Conditional Options Schema</code> | ||
| </h1> | ||
| <Info> | ||
| Informed allows you to use conditional change the options of input | ||
| fields. | ||
| <br /> | ||
| <br /> | ||
| Try selecting different options from "Would you like a car or truck?" | ||
| and observe the "Product" dropdown. | ||
| </Info> | ||
| <SideBySide | ||
| leftHeader={<h3>Example:</h3>} | ||
| rightHeader={<h3>Code:</h3>} | ||
| left={<Example />} | ||
| right={<Code links input1={exampleCode} />} | ||
| /> | ||
| <br /> | ||
| <br /> | ||
| </> | ||
| ); | ||
| } |
65 changes: 65 additions & 0 deletions
65
vitedocs/Pages/Examples/schemas/ConditionalOptionsSchema/Example.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { SchemaFields, Debug } from 'informed'; | ||
| import { Form, Button } from 'YourComponents'; | ||
|
|
||
| const schema = { | ||
| type: 'object', | ||
| properties: { | ||
| type: { | ||
| type: 'string', | ||
| 'ui:control': 'select', | ||
| title: 'Would you like a car or truck?', | ||
| oneOf: [ | ||
| { const: 'car', title: 'Car' }, | ||
| { const: 'truck', title: 'Truck' } | ||
| ], | ||
| 'ui:props': { | ||
| initialValue: 'car' | ||
| } | ||
| }, | ||
| product: { | ||
| type: 'string', | ||
| 'ui:control': 'select', | ||
| title: 'Product' | ||
| } | ||
| }, | ||
| allOf: [ | ||
| { | ||
| if: { properties: { type: { const: 'car' } }, required: ['type'] }, | ||
| then: { | ||
| properties: { | ||
| product: { | ||
| oneOf: [ | ||
| { const: '', title: '- Select -' }, | ||
| { const: 'modelS', title: 'Model S' }, | ||
| { const: 'modelX', title: 'Model X' }, | ||
| { const: 'model3', title: 'Model 3' } | ||
| ] | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| { | ||
| if: { properties: { type: { const: 'truck' } }, required: ['type'] }, | ||
| then: { | ||
| properties: { | ||
| product: { | ||
| oneOf: [ | ||
| { const: '', title: '- Select -' }, | ||
| { const: 'semi', title: 'Semi Truck' }, | ||
| { const: 'cyber', title: 'Cyber Truck' } | ||
| ] | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ] | ||
| }; | ||
|
|
||
| const Schema = () => ( | ||
| <Form schema={schema}> | ||
| <SchemaFields /> | ||
| <Button type="submit">Submit</Button> | ||
| <Debug /> | ||
| </Form> | ||
| ); | ||
| export default Schema; |
31 changes: 31 additions & 0 deletions
31
vitedocs/Pages/Examples/schemas/ConditionalSchema/ConditionalSchema.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { useEffect } from 'react'; | ||
| import Example from './Example'; | ||
| import exampleCode from './Example.jsx?raw'; | ||
| import Code from '../../../../YourComponents/Code'; | ||
| import { SideBySide } from '../../../../SideBySide'; | ||
| import { Info } from '../../../../Info'; | ||
|
|
||
| export default function ConditionalFieldComponent() { | ||
| useEffect(() => { | ||
| window.scrollTo(0, 0); | ||
| }, []); | ||
| return ( | ||
| <> | ||
| <h1> | ||
| <code>Conditional Schema</code> | ||
| </h1> | ||
| <Info> | ||
| Informed allows you to use advanced JSON schema conditionals. | ||
| <br /> | ||
| </Info> | ||
| <SideBySide | ||
| leftHeader={<h3>Example:</h3>} | ||
| rightHeader={<h3>Code:</h3>} | ||
| left={<Example />} | ||
| right={<Code links input1={exampleCode} />} | ||
| /> | ||
| <br /> | ||
| <br /> | ||
| </> | ||
| ); | ||
| } |
49 changes: 49 additions & 0 deletions
49
vitedocs/Pages/Examples/schemas/ConditionalSchema/Example.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { SchemaFields, Debug } from 'informed'; | ||
| import { Form, Button } from 'YourComponents'; | ||
|
|
||
| const schema = { | ||
| type: 'object', | ||
| required: ['name'], | ||
| properties: { | ||
| name: { | ||
| type: 'string', | ||
| title: 'First name', | ||
| 'ui:control': 'input' | ||
| }, | ||
| married: { | ||
| type: 'string', | ||
| title: 'Are you married?', | ||
| enum: ['yes', 'no'], | ||
| 'ui:control': 'radio' | ||
| } | ||
| }, | ||
| allOf: [ | ||
| { | ||
| if: { | ||
| properties: { | ||
| married: { const: 'yes' } | ||
| }, | ||
| required: ['married'] | ||
| }, | ||
| then: { | ||
| properties: { | ||
| spouse: { | ||
| type: 'string', | ||
| title: 'Spouse name', | ||
| 'ui:control': 'input' | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ] | ||
| }; | ||
|
|
||
| const Example = () => ( | ||
| <Form schema={schema}> | ||
| <SchemaFields /> | ||
| <Button type="submit">Submit</Button> | ||
| <Debug /> | ||
| </Form> | ||
| ); | ||
|
|
||
| export default Example; |
Oops, something went wrong.