feat: améliore le design du formulaire des métadonnées

front/src/components/form.module.scss

@@ -4,14 +4,10 @@
 @use './button.module' as *;
 
 @mixin legend {
-  background-color: $main-background-color;
-  border-top: 1px solid $main-border-color;
-  border-bottom: 1px solid $main-border-color;
-  display: block;
-  font-size: 1.15em;
+  font-size: 1.75rem;
   font-weight: bold;
   margin: 0;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem;
   text-align: left;
   width: 100%;
 }
@@ -27,8 +23,10 @@
 
 .form {
   :global {
-    .field-object > label {
+    label {
       font-weight: bold;
+      padding-bottom: 0.15rem;
+      font-size: 0.875rem;
     }
 
     [role='combobox'] {
@@ -51,9 +49,9 @@
     }
 
     .form-group {
-      //border-bottom: 1px solid #f0f0f0;
       display: flex;
-      align-items: center;
+      flex-direction: column;
+      align-items: start;
       padding: 0.5rem 0.5rem;
 
       &.field-array {
@@ -110,16 +108,12 @@
         > * {
           width: 100%;
         }
-
-        input {
-          width: 100%;
-        }
       }
 
       &.field-string,
       &.field-boolean {
         label {
-          flex: 0 0 100px;
+         padding-bottom: 0.15rem;
         }
       }
 
@@ -216,6 +210,7 @@
 
   legend {
     @include legend;
+    font-size: 1.25rem;
   }
 }
 

front/src/index.jsx

@@ -25,6 +25,7 @@ import Field from './components/Field'
 import { Check, Copy, Search } from 'react-feather'
 import buttonStyles from './components/button.module.scss'
 import Select from './components/Select'
+import Story from './stories/Story.jsx'
 
 // lazy loaded routes
 const Corpus = lazy(() => import('./components/corpus/Corpus'))
@@ -153,30 +154,7 @@ root.render(
                 <Privacy/>
               </Route>
               <Route exact path="/ux">
-                <h2>Buttons</h2>
-                <h4>Primary</h4>
-                <Button primary={true}>Create New Article</Button>
-                <h4>Secondary</h4>
-                <Button>Manage Tags</Button>
-                <h4>With Icon</h4>
-                <Button><Check/> Save</Button>
-                <h4>Icon Only</h4>
-                <Button icon={true}><Copy/></Button>
-                <h2>Fields</h2>
-                <h4>Search</h4>
-                <Field placeholder="Search" icon={Search}/>
-                <h4>Textarea</h4>
-                <div style={{ 'max-width': '50%' }}>
-                  <textarea className={buttonStyles.textarea} rows="10">Du texte</textarea>
-                </div>
-                <h4>Select</h4>
-                <Select>
-                  <option>Tome de Savoie</option>
-                  <option>Reblochon</option>
-                  <option>St Marcellin</option>
-                </Select>
-                <h4>Tabs</h4>
-                <h4>Form actions</h4>
+                <Story/>
               </Route>
               <Route exact path="/error">
                 <Error/>

front/src/stories/Button.story.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Check, Copy } from 'react-feather'
+import Button from '../components/Button.jsx'
+
+export default function ButtonStory () {
+  return <>
+    <h2>Buttons</h2>
+    <h4>Primary</h4>
+    <Button primary={true}>Create New Article</Button>
+    <h4>Secondary</h4>
+    <Button>Manage Tags</Button>
+    <h4>With Icon</h4>
+    <Button><Check/> Save</Button>
+    <h4>Icon Only</h4>
+    <Button icon={true}><Copy/></Button>
+  </>
+}

front/src/stories/Form.story.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import SchemaForm from '../components/Form.jsx'
+import schema from './form-story.schema.json'
+import uiSchema from './form-story-ui-schema.json'
+
+export default function FormStory() {
+  return <>
+    <h2>Form</h2>
+    <SchemaForm formData={{}} uiSchema={uiSchema} schema={schema}/>
+  </>
+}

front/src/stories/Story.jsx

@@ -0,0 +1,38 @@
+import { Tabs } from '@geist-ui/core'
+import React from 'react'
+import { Search } from 'react-feather'
+import buttonStyles from '../components/button.module.scss'
+import Field from '../components/Field.jsx'
+import Select from '../components/Select.jsx'
+import ButtonStory from './Button.story.jsx'
+import FormStory from './Form.story.jsx'
+
+import styles from './story.module.scss'
+
+export default function Story () {
+  return <div className={styles.container}>
+    <Tabs initialValue="1">
+      <Tabs.Item label="buttons" value="1">
+        <ButtonStory/>
+      </Tabs.Item>
+      <Tabs.Item label="form" value="2">
+        <FormStory/>
+      </Tabs.Item>
+      <Tabs.Item label="fields" value="3">
+        <h2>Fields</h2>
+        <h4>Search</h4>
+        <Field placeholder="Search" icon={Search}/>
+        <h4>Textarea</h4>
+        <div style={{ 'max-width': '50%' }}>
+          <textarea className={buttonStyles.textarea} rows="10">Du texte</textarea>
+        </div>
+        <h4>Select</h4>
+        <Select>
+          <option>Tome de Savoie</option>
+          <option>Reblochon</option>
+          <option>St Marcellin</option>
+        </Select>
+      </Tabs.Item>
+    </Tabs>
+  </div>
+}

front/src/stories/form-story-ui-schema.json

@@ -0,0 +1,22 @@
+{
+  "ui:groups": [
+    {
+      "title": "Article",
+      "fields": [
+        "id",
+        "date",
+        "url",
+        "license"
+      ]
+    },
+    {
+      "title": "Issue",
+      "fields": [
+        "issue"
+      ]
+    }
+  ],
+  "date": {
+    "ui:widget": "date"
+  }
+}

front/src/stories/form-story.schema.json

@@ -0,0 +1,32 @@
+{
+  "type": "object",
+  "properties": {
+    "id": {
+      "type": "string"
+    },
+    "date": {
+      "type": "string",
+      "format": "date"
+    },
+    "url": {
+      "type": "string"
+    },
+    "license": {
+      "type": "string"
+    },
+    "issue": {
+      "type": "object",
+      "properties": {
+        "title": {
+          "type": "string"
+        },
+        "identifier": {
+          "type": "string"
+        },
+        "number": {
+          "type": "string"
+        }
+      }
+    }
+  }
+}

front/src/stories/story.module.scss

@@ -0,0 +1,11 @@
+.container {
+  padding: 0.25rem
+}
+
+.container {
+  :global {
+    .content {
+      padding: 1rem;
+    }
+  }
+}