Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit c419637

Browse files
authoredDec 23, 2020
Merge pull request #88 from headwirecom/feature/87-marketing-message
#87: better explain what the example project is all about
2 parents 777eb7b + cb31893 commit c419637

File tree

1 file changed

+29
-8
lines changed

1 file changed

+29
-8
lines changed
 

‎packages/example/src/App.tsx

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -103,18 +103,39 @@ function App(props: AppProps & { selectedExample: ReactExampleDescription }) {
103103
paddingTop='0'
104104
paddingBottom='size-800'
105105
>
106+
<div className='container'>
107+
<View padding='size-100'>
108+
<Heading>react, json-schema, jsonforms.io, react-spectrum</Heading>
109+
Generate{' '}
110+
<a href='https://react-spectrum.adobe.com/' target='_blank'>
111+
react-spectrum
112+
</a>{' '}
113+
based forms quickly by leveraging{' '}
114+
<a href='https://json-schema.org/' target='_blank'>
115+
json-schemas
116+
</a>{' '}
117+
for your object structure definition/validation, and{' '}
118+
<a href='https://www.jsonforms.io' target='_blank'>
119+
jsonforms.io
120+
</a>{' '}
121+
- choose a same in the 'Examples' section to preview predefined
122+
forms (try for example one of the 'Categorization' examples). You
123+
can also modify the examples in the editors and save them to local
124+
storage to play with them later.
125+
</View>
126+
</div>
106127
<div className='container'>
107128
<div className='App-Form'>
108129
<View padding='size-100'>
109-
<Heading>{props.selectedExample.label}</Heading>
130+
<Heading>Form: {props.selectedExample.label}</Heading>
110131
{props.getComponent(props.selectedExample)}
111132
<JsonFormsDispatch onChange={props.onChange} />
112133
</View>
113134
</div>
114135

115136
<div className='App-Data tabs'>
116137
<View padding='size-100'>
117-
<Heading>JsonForms Examples</Heading>
138+
<Heading>Example Forms</Heading>
118139
<ExamplesPicker {...props} onChange={setExampleByName} />
119140
<Tabs defaultSelectedKey='boundData'>
120141
<Item key='boundData' title='Bound data'>
@@ -125,31 +146,31 @@ function App(props: AppProps & { selectedExample: ReactExampleDescription }) {
125146
/>
126147
</Content>
127148
</Item>
128-
<Item key='uiSchema' title='UI Schema'>
149+
<Item key='schema' title='Json-Schema'>
129150
<Content margin='size-100'>
130151
<TextArea
131152
value={
132153
JSON.stringify(
133-
props.selectedExample.uischema,
154+
props.selectedExample.schema,
134155
circularReferenceReplacer(),
135156
2
136157
) || ''
137158
}
138-
onChange={updateCurrentUISchema}
159+
onChange={updateCurrentSchema}
139160
/>
140161
</Content>
141162
</Item>
142-
<Item key='schema' title='Schema'>
163+
<Item key='uiSchema' title='UI Schema'>
143164
<Content margin='size-100'>
144165
<TextArea
145166
value={
146167
JSON.stringify(
147-
props.selectedExample.schema,
168+
props.selectedExample.uischema,
148169
circularReferenceReplacer(),
149170
2
150171
) || ''
151172
}
152-
onChange={updateCurrentSchema}
173+
onChange={updateCurrentUISchema}
153174
/>
154175
</Content>
155176
</Item>

0 commit comments

Comments
 (0)
Please sign in to comment.