Form builder

blocks/example/example.js

@@ -0,0 +1,7 @@
+import ComponentBase from '../../scripts/component-base.js';
+
+export default class Example extends ComponentBase {
+    ready() {
+        console.log('Example ready');
+    }
+}

blocks/form/form.js

@@ -0,0 +1,136 @@
+import ComponentBase from '../../scripts/component-base.js';
+import { flat, getBaseUrl } from '../../scripts/libs.js';
+import { generalManipulation, renderVirtualDom } from '../../scripts/render/dom.js';
+
+export default class Form extends ComponentBase {
+  static observedAttributes = ['schema'];
+
+  dom = [];
+
+  resolver = null;
+
+  loading = new Promise((resolve) => {
+    this.resolver = resolve;
+  });
+
+  async connected() {
+    await this.loading;
+    this.append(...renderVirtualDom(generalManipulation(this.dom)));
+  }
+
+  get prefix() {
+    return `${getBaseUrl()}/schemas/`;
+  }
+
+  get sufix() {
+    return '.schema.json';
+  }
+
+  async applySchema(schema) {
+    console.log(schema);
+    const n = flat(schema);
+    const path = Object.keys(n).reduce((acc, key) => `${acc}${key}-${n[key]}`, '');
+    const json = await this.parseSchema(await this.loadSchema(path));
+    this.dom = this.schemaToDom(json);
+    this.resolver(this.dom);
+  }
+
+  schemaToDom(schema) {
+    return schema.map((s) => {
+      const { key, type, title, required, id, label, placeholder, helpText, pattern } = s;
+      return {
+        tag: 'raqn-input',
+        class: ['form-group'],
+        attributes: {
+          key,
+          type,
+          title,
+          required,
+          id,
+          label,
+          placeholder,
+          helpText,
+          pattern,
+        },
+        children: [
+          {
+            tag: 'label',
+            class: ['form-label'],
+            attributes: {
+              for: id,
+            },
+            children: [
+              {
+                class: ['form-label-text'],
+                tag: 'span',
+                text: label,
+              },
+            ],
+          },
+          {
+            tag: 'input',
+            class: ['form-control'],
+            children: [],
+            attributes: {
+              type,
+              name: key,
+              id,
+              placeholder,
+              pattern,
+              required,
+              title,
+            },
+          },
+          {
+            class: ['form-text'],
+            tag: 'small',
+            text: helpText,
+            children: [],
+          },
+        ],
+      };
+    });
+  }
+
+  async loadSchema(ref) {
+    if (ref.includes('http')) {
+      return (await fetch(ref)).json();
+    }
+    return (await fetch(`${this.prefix}${ref}${this.sufix}`)).json();
+  }
+
+  extractName(name) {
+    return name.replace(this.prefix, '').replace(this.sufix, '').toLowerCase();
+  }
+
+  async parseSchema(data) {
+    const { $id, required, properties } = data;
+    return Object.keys(properties).reduce(async (acc, key) => {
+      const fullfill = await acc;
+      const { type, title, description, $ref, pattern } = properties[key];
+      if ($ref) {
+        const options = await this.parseSchema(await this.loadSchema($ref));
+
+        fullfill.push(...options);
+        return fullfill;
+      }
+      const id = `${this.extractName($id)}-${key}`;
+      fullfill.push({
+        key,
+        type,
+        title,
+        description,
+        required: required.includes(key),
+        id: `${id}`,
+        i18n: `i18n-${id}`,
+        label: `i18n-${id}-label`,
+        placeholder: `i18n-${id}-placeholder`,
+        helpText: `i18n-${id}-helpText`,
+        pattern,
+      });
+      return fullfill;
+    }, []);
+  }
+
+  // parse json schema and load any external $ref
+}

blocks/form/text/input.css

@@ -0,0 +1,3 @@
+:host {
+  background-color: red;
+}

blocks/form/text/input.js

@@ -0,0 +1,11 @@
+import ComponentBase from '../../../scripts/component-base.js';
+
+export default class Input extends ComponentBase {
+  static observedAttributes = ['schema'];
+
+  connected() {
+    console.log('init');
+  }
+
+  // parse json schema and load any external $ref
+}

blocks/grid/grid.js

@@ -10,9 +10,10 @@ export default class Grid extends ComponentBase {
       grid: {
         gap: '80px',
         template: {
-          rows: 'auto',
+          columns: '1fr 1fr 1fr 1fr 1fr',
+          rows: '1fr',
         },
-        heigth: 'initial',
+        heigth: 'auto',
       },
     },
   };

blocks/popup-trigger/popup-trigger.md

@@ -3,6 +3,7 @@
 ## Description
 
 A component which generates a button used to:
+
 1. open a pop-up.
 2. close the currently active popup
 
@@ -21,6 +22,7 @@ This component is not supported as a block. It's only used as a nested component
 `N/A`
 
 ## WebComponent Tag
+
 ### `<raqn-popup-trigger></raqn-popup-trigger>`
 
 ## Initialization
@@ -42,20 +44,17 @@ When `#popup-trigger` hash is used, the url of the anchor will be used to load t
 ## Editorial Initializations (in MS Word)
 
 ### 1. Open a popup
-The popup content will be loaded from the url provided in the anchor configured with the `#popup-trigger` hash.
 
-Example: 
+The popup content will be loaded from the url provided in the anchor configured with the `#popup-trigger` hash.
 
-`https://example.com/page-with-the-popup-content#popup-trigger`
+Example:
 
+`http://localhost:3000/schemas/page-with-the-popup-content#popup-trigger`
 
 ### 2. Close the currently open popup
 
 In this case the url or the current page can be used on the anchor because the url will be ignored. Only the `#popup-close` hash of the url is important.
 
-Example: 
-
-`https://example.com/current-page#popup-close`
-
-
+Example:
 
+`http://localhost:3000/schemas/current-page#popup-close`

head.html

@@ -22,3 +22,4 @@
 <script src="/scripts/component-base.js" type="module"></script>
 <script src="/scripts/libs.js" type="module"></script>
 <script src="/scripts/index.js" type="module"></script>
+

schemas/address.schema.json

@@ -0,0 +1,34 @@
+{
+  "$id": "http://localhost:3000/schemas/address.schema.json",
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "description": "An address similar to http://microformats.org/wiki/h-card",
+  "type": "object",
+  "properties": {
+    "postOfficeBox": {
+      "type": "string"
+    },
+    "extendedAddress": {
+      "type": "string"
+    },
+    "streetAddress": {
+      "type": "string"
+    },
+    "locality": {
+      "type": "string"
+    },
+    "region": {
+      "type": "string"
+    },
+    "postalCode": {
+      "type": "string"
+    },
+    "countryName": {
+      "type": "string"
+    }
+  },
+  "required": ["locality", "region", "countryName"],
+  "dependentRequired": {
+    "postOfficeBox": ["streetAddress"],
+    "extendedAddress": ["streetAddress"]
+  }
+}

schemas/blog-post.schema.json

@@ -0,0 +1,28 @@
+{
+  "$id": "http://localhost:3000/schemas/blog-post.schema.json",
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "description": "A representation of a blog post",
+  "type": "object",
+  "required": ["title", "content", "author"],
+  "properties": {
+    "title": {
+      "type": "string"
+    },
+    "content": {
+      "type": "string"
+    },
+    "publishedDate": {
+      "type": "string",
+      "format": "date-time"
+    },
+    "author": {
+      "$ref": "http://localhost:3000/schemas/user-profile.schema.json"
+    },
+    "tags": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    }
+  }
+}

schemas/ecommerce.schema.json

@@ -0,0 +1,25 @@
+{
+  "$id": "http://localhost:3000/schemas/ecommerce.schema.json",
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$defs": {
+    "product": {
+      "$anchor": "ProductSchema",
+      "type": "object",
+      "properties": {
+        "name": { "type": "string" },
+        "price": { "type": "number", "minimum": 0 }
+      }
+    },
+    "order": {
+      "$anchor": "OrderSchema",
+      "type": "object",
+      "properties": {
+        "orderId": { "type": "string" },
+        "items": {
+          "type": "array",
+          "items": { "$ref": "#ProductSchema" }
+        }
+      }
+    }
+  }
+}

schemas/geographical-location.schema.json

@@ -0,0 +1,20 @@
+{
+  "$id": "http://localhost:3000/schemas/geographical-location.schema.json",
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "Longitude and Latitude Values",
+  "description": "A geographical coordinate.",
+  "required": ["latitude", "longitude"],
+  "type": "object",
+  "properties": {
+    "latitude": {
+      "type": "number",
+      "minimum": -90,
+      "maximum": 90
+    },
+    "longitude": {
+      "type": "number",
+      "minimum": -180,
+      "maximum": 180
+    }
+  }
+}

schemas/health-record.json

@@ -0,0 +1,40 @@
+{
+  "$id": "http://localhost:3000/schemas/health-record.schema.json",
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "description": "Schema for representing a health record",
+  "type": "object",
+  "required": ["patientName", "dateOfBirth", "bloodType"],
+  "properties": {
+    "patientName": {
+      "type": "string"
+    },
+    "dateOfBirth": {
+      "type": "string",
+      "format": "date"
+    },
+    "bloodType": {
+      "type": "string"
+    },
+    "allergies": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "conditions": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "medications": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "emergencyContact": {
+      "$ref": "http://localhost:3000/schemas/user-profile.schema.json"
+    }
+  }
+}