Merge pull request #88 from headwirecom/feature/87-marketing-message

#87: better explain what the example project is all about

Author: reusr1

packages/example/src/App.tsx

@@ -103,18 +103,39 @@ function App(props: AppProps & { selectedExample: ReactExampleDescription }) {
         paddingTop='0'
         paddingBottom='size-800'
       >
+        <div className='container'>
+          <View padding='size-100'>
+            <Heading>react, json-schema, jsonforms.io, react-spectrum</Heading>
+            Generate{' '}
+            <a href='https://react-spectrum.adobe.com/' target='_blank'>
+              react-spectrum
+            </a>{' '}
+            based forms quickly by leveraging{' '}
+            <a href='https://json-schema.org/' target='_blank'>
+              json-schemas
+            </a>{' '}
+            for your object structure definition/validation, and{' '}
+            <a href='https://www.jsonforms.io' target='_blank'>
+              jsonforms.io
+            </a>{' '}
+            - choose a same in the 'Examples' section to preview predefined
+            forms (try for example one of the 'Categorization' examples). You
+            can also modify the examples in the editors and save them to local
+            storage to play with them later.
+          </View>
+        </div>
         <div className='container'>
           <div className='App-Form'>
             <View padding='size-100'>
-              <Heading>{props.selectedExample.label}</Heading>
+              <Heading>Form: {props.selectedExample.label}</Heading>
               {props.getComponent(props.selectedExample)}
               <JsonFormsDispatch onChange={props.onChange} />
             </View>
           </div>
 
           <div className='App-Data tabs'>
             <View padding='size-100'>
-              <Heading>JsonForms Examples</Heading>
+              <Heading>Example Forms</Heading>
               <ExamplesPicker {...props} onChange={setExampleByName} />
               <Tabs defaultSelectedKey='boundData'>
                 <Item key='boundData' title='Bound data'>
@@ -125,31 +146,31 @@ function App(props: AppProps & { selectedExample: ReactExampleDescription }) {
                     />
                   </Content>
                 </Item>
-                <Item key='uiSchema' title='UI Schema'>
+                <Item key='schema' title='Json-Schema'>
                   <Content margin='size-100'>
                     <TextArea
                       value={
                         JSON.stringify(
-                          props.selectedExample.uischema,
+                          props.selectedExample.schema,
                           circularReferenceReplacer(),
                           2
                         ) || ''
                       }
-                      onChange={updateCurrentUISchema}
+                      onChange={updateCurrentSchema}
                     />
                   </Content>
                 </Item>
-                <Item key='schema' title='Schema'>
+                <Item key='uiSchema' title='UI Schema'>
                   <Content margin='size-100'>
                     <TextArea
                       value={
                         JSON.stringify(
-                          props.selectedExample.schema,
+                          props.selectedExample.uischema,
                           circularReferenceReplacer(),
                           2
                         ) || ''
                       }
-                      onChange={updateCurrentSchema}
+                      onChange={updateCurrentUISchema}
                     />
                   </Content>
                 </Item>