From 2078fdc52b312854f8dae4f0b25658abf845281d Mon Sep 17 00:00:00 2001
From: Danny Coulombe <danny.coulombe@yolarx.com>
Date: Thu, 1 May 2025 08:01:35 -0400
Subject: [PATCH 1/2] adaptation to new js/vue3 library restructuration

---
 package.json                          |   2 +-
 src/components/Carousels.vue          |   2 +-
 src/jms/data.json                     | 138 ++++++++++++
 src/jms/default.ts                    |  44 ++++
 src/jms/index.ts                      |  16 ++
 src/jms/settings.json                 |  14 ++
 src/jms/structure.json                | 288 ++++++++++++++++++++++++++
 src/jms/structure.yml                 | 231 +++++++++++++++++++++
 src/{interfaces.ts => jms/typings.ts} |  89 ++------
 src/main.ts                           |   2 +-
 src/plugins/index.ts                  |   4 +-
 src/plugins/jsonms.ts                 |  36 ++--
 src/plugins/vuetify.ts                |   2 +-
 13 files changed, 772 insertions(+), 96 deletions(-)
 create mode 100644 src/jms/data.json
 create mode 100644 src/jms/default.ts
 create mode 100644 src/jms/index.ts
 create mode 100644 src/jms/settings.json
 create mode 100644 src/jms/structure.json
 create mode 100644 src/jms/structure.yml
 rename src/{interfaces.ts => jms/typings.ts} (50%)

diff --git a/package.json b/package.json
index 407fbc8..4751e6f 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@jsonms/demo",
   "private": true,
   "type": "module",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
diff --git a/src/components/Carousels.vue b/src/components/Carousels.vue
index f185b1d..dc6d4d9 100644
--- a/src/components/Carousels.vue
+++ b/src/components/Carousels.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script setup lang="ts">
-import { useJsonMs } from '@/plugins/jsonms';
+import {useJsonMs} from "@/plugins/jsonms";
 
 const slide = ref(0);
 const { data, locale } = useJsonMs();
diff --git a/src/jms/data.json b/src/jms/data.json
new file mode 100644
index 0000000..c7241d5
--- /dev/null
+++ b/src/jms/data.json
@@ -0,0 +1,138 @@
+{
+  "home": {
+    "presentation": [
+      {
+        "title": {
+          "en-US": "Generate an admin panel from a YAML interface that communicates with a remote server using JSON.",
+          "es-MX": "Genera un panel de administración a partir de una interfaz YAML que se comunica con un servidor remoto utilizando JSON."
+        },
+        "body": {
+          "en-US": "Keep your data safe on your server, and feel free to download your JSON file whenever you need it—no obligations! Enjoy stunning, customizable interfaces that empower you to edit your website's content without being tied to our technology!",
+          "es-MX": "Mantén tus datos seguros en tu servidor y siéntete libre de descargar tu archivo JSON siempre que lo necesites, ¡sin obligaciones! Disfruta de impresionantes interfaces personalizables que te permiten editar el contenido de tu sitio web sin estar atado a nuestra tecnología."
+        },
+        "cta": {
+          "en-US": "Let's see how it works!",
+          "es-MX": "¡Veamos cómo funciona!"
+        },
+        "color": "primary",
+        "commands": [],
+        "hash": "hoqCTZrB"
+      },
+      {
+        "title": {
+          "en-US": "The form on the right is generated dynamically from the YAML interface below. You can modify the YAML to see the form update in real time.",
+          "es-MX": "El formulario a la derecha se genera dinámicamente a partir de la interfaz YAML a continuación. Puedes modificar el YAML para ver el formulario actualizarse en tiempo real."
+        },
+        "body": {
+          "en-US": "",
+          "es-MX": ""
+        },
+        "cta": {
+          "en-US": "Got it!",
+          "es-MX": "¡Entendido!"
+        },
+        "color": "secondary",
+        "commands": [
+          "showData",
+          "openAdvanced",
+          "setDesktop"
+        ],
+        "hash": "1l3lbx81"
+      },
+      {
+        "title": {
+          "en-US": "On the left side, you'll find sections that you can also control through the YAML template.",
+          "es-MX": "En el lado izquierdo, encontrarás secciones que también puedes controlar a través de la plantilla YAML."
+        },
+        "body": {
+          "en-US": null,
+          "es-MX": null
+        },
+        "cta": {
+          "en-US": "Very nice!",
+          "es-MX": "¡Muy bien!"
+        },
+        "color": "secondary",
+        "commands": [
+          "openDrawer"
+        ],
+        "hash": "UZYD8ILH"
+      },
+      {
+        "title": {
+          "en-US": "To assist you in structuring your YAML interface and setting up your server, we have provided clear documentation on the right side.",
+          "es-MX": "Para ayudarte a estructurar tu interfaz YAML y configurar tu servidor, hemos proporcionado documentación clara en el lado derecho."
+        },
+        "body": {
+          "en-US": null,
+          "es-MX": null
+        },
+        "cta": {
+          "en-US": "Alright!",
+          "es-MX": "¡Está bien!"
+        },
+        "color": "secondary",
+        "commands": [
+          "closeDrawer",
+          "openAdvanced",
+          "showDocs"
+        ],
+        "hash": "KLLhfqMF"
+      },
+      {
+        "title": {
+          "en-US": "Make sure to explore the various examples provided in the sections area!",
+          "es-MX": "¡Asegúrate de explorar los diversos ejemplos proporcionados en el área de secciones!"
+        },
+        "body": {
+          "en-US": "Also remember that if you would rather run your own instance of JSON.ms, visit our GitHub page, as it is open-source.",
+          "es-MX": "También recuerda que si prefieres ejecutar tu propia instancia de JSON.ms, visita nuestra página de GitHub, ya que es de código abierto."
+        },
+        "cta": {
+          "en-US": "Enjoy! :)",
+          "es-MX": "¡Disfruta! :)"
+        },
+        "color": "secondary",
+        "commands": [
+          "showData"
+        ],
+        "hash": "hHuFCqwA"
+      }
+    ]
+  },
+  "playground": {
+    "text": null,
+    "textWithIcon": null,
+    "i18nRequired": {
+      "en-US": "",
+      "es-MX": ""
+    },
+    "i18nTextarea": {
+      "en-US": null,
+      "es-MX": null
+    },
+    "i18nRating": null,
+    "conditionalSwitch": true,
+    "hiddenField1": 50,
+    "hiddenField2": [
+      25,
+      90
+    ],
+    "list": {
+      "select": null,
+      "radio": null,
+      "checkbox": []
+    },
+    "arrays": {
+      "array": [],
+      "i18nArray": []
+    },
+    "files": {
+      "file": null,
+      "acceptImages": null,
+      "multiple": []
+    },
+    "markdown": null,
+    "date": null
+  }
+}
\ No newline at end of file
diff --git a/src/jms/default.ts b/src/jms/default.ts
new file mode 100644
index 0000000..b1b3f41
--- /dev/null
+++ b/src/jms/default.ts
@@ -0,0 +1,44 @@
+import { type JmsData } from './typings'
+
+export const locales: { [key: string]: string } = {
+  "en-US": "English (US)",
+  "es-MX": "Spanish (Mexico)"
+}
+
+export const defaultData: JmsData = {
+  "home": {
+    "presentation": []
+  },
+  "playground": {
+    "text": null,
+    "textWithIcon": "This is a default value",
+    "i18nRequired": {
+      "en-US": "",
+      "es-MX": ""
+    },
+    "i18nTextarea": {
+      "en-US": "",
+      "es-MX": ""
+    },
+    "i18nRating": null,
+    "conditionalSwitch": null,
+    "hiddenField1": null,
+    "hiddenField2": null,
+    "list": {
+      "select": null,
+      "radio": null,
+      "checkbox": []
+    },
+    "arrays": {
+      "array": [],
+      "i18nArray": []
+    },
+    "files": {
+      "file": null,
+      "acceptImages": null,
+      "multiple": []
+    },
+    "markdown": null,
+    "date": null
+  }
+}
\ No newline at end of file
diff --git a/src/jms/index.ts b/src/jms/index.ts
new file mode 100644
index 0000000..3ac94d4
--- /dev/null
+++ b/src/jms/index.ts
@@ -0,0 +1,16 @@
+import { type JmsSectionKey, type JmsLocaleKey, type JmsData } from '@/jms/typings';
+import { defaultData, locales } from './default';
+import data from './data.json';
+import structure from './structure.json';
+import settings from './settings.json';
+
+export {
+  type JmsSectionKey,
+  type JmsLocaleKey,
+  type JmsData,
+  locales,
+  defaultData,
+  data,
+  structure,
+  settings,
+}
\ No newline at end of file
diff --git a/src/jms/settings.json b/src/jms/settings.json
new file mode 100644
index 0000000..3d5c67a
--- /dev/null
+++ b/src/jms/settings.json
@@ -0,0 +1,14 @@
+{
+  "uploadMaxSize": "2048M",
+  "postMaxSize": "2048M",
+  "publicUrl": "http://localhost:9001/file/read/",
+  "version": "1.0.16",
+  "supportedFeatures": [
+    "data/get",
+    "data/update",
+    "file/list",
+    "file/read",
+    "file/upload",
+    "file/delete"
+  ]
+}
\ No newline at end of file
diff --git a/src/jms/structure.json b/src/jms/structure.json
new file mode 100644
index 0000000..3a44bc5
--- /dev/null
+++ b/src/jms/structure.json
@@ -0,0 +1,288 @@
+{
+  "global": {
+    "title": "Demo Preview",
+    "copyright": "JSON.ms v1.2.0. Licensed under the BSD-3-Clause.",
+    "logo": "http://localhost:3000/favicon.ico",
+    "preview": "http://localhost:3001"
+  },
+  "locales": {
+    "en-US": "English (US)",
+    "es-MX": "Spanish (Mexico)"
+  },
+  "enums": {
+    "colors": {
+      "primary": "Blueish",
+      "secondary": "Greenish"
+    },
+    "gender": {
+      "male": "Male",
+      "female": "Female"
+    }
+  },
+  "schemas": {
+    "meta": {
+      "title": {
+        "type": "string",
+        "label": "Title"
+      },
+      "description": {
+        "type": "string",
+        "label": "Description"
+      }
+    }
+  },
+  "sections": {
+    "home": {
+      "label": "Presentation",
+      "icon": "mdi-view-carousel-outline",
+      "fields": {
+        "presentation": {
+          "type": "array",
+          "label": "Slides",
+          "fields": {
+            "title": {
+              "type": "i18n",
+              "label": "Title",
+              "required": true,
+              "fields": {}
+            },
+            "body": {
+              "type": "i18n:markdown",
+              "label": "Body",
+              "fields": {}
+            },
+            "cta": {
+              "type": "i18n",
+              "label": "Call-to-action",
+              "required": true,
+              "fields": {}
+            },
+            "color": {
+              "type": "radio",
+              "inline": true,
+              "items": "enums.colors",
+              "label": "Background color",
+              "required": true,
+              "fields": {}
+            },
+            "commands": {
+              "type": "select",
+              "multiple": true,
+              "label": "Optional command(s)",
+              "items": {
+                "openDrawer": "Open drawer",
+                "closeDrawer": "Close drawer",
+                "openAdvanced": "Open advanced",
+                "closeAdvanced": "Close advanced",
+                "showData": "Show data",
+                "showSettings": "Show settings",
+                "showDocs": "Show documentation",
+                "setMobile": "Set mobile",
+                "setDesktop": "Set desktop",
+                "hideDevice": "Hide device"
+              },
+              "fields": {}
+            }
+          },
+          "items": {}
+        }
+      },
+      "type": "unknown"
+    },
+    "playground": {
+      "label": "Playground",
+      "icon": "mdi-toy-brick-outline",
+      "prepend": "In this section, we created various fields and played with their attributes to show you what you can do with JSON.ms. Follow along by opening the editor by click on \"Advanced\" in the Toolbar.",
+      "fields": {
+        "text": {
+          "type": "string",
+          "label": "String",
+          "rules": [
+            {
+              "regex": "/^abc/",
+              "message": "The string must start with abc"
+            },
+            {
+              "regex": "/123$/",
+              "message": "The string must end with 123"
+            }
+          ],
+          "prepend": "For instance, here's the most basic field.",
+          "hint": "You can add a hint or a description below each field like so.",
+          "fields": {}
+        },
+        "textWithIcon": {
+          "default": "This is a default value",
+          "type": "string",
+          "label": "String with icon",
+          "prepend": "But we could also decorate this field by adding icons and inner text.",
+          "icon": "mdi-earth",
+          "append-inner": "Inner text here",
+          "hint": "Use properties \"icon\", \"prepend\", \"prepend-inner\", \"append\" and \"append-inner\" to add content around and within the field.",
+          "fields": {}
+        },
+        "i18nRequired": {
+          "type": "i18n",
+          "label": "Translatable field",
+          "required": true,
+          "prepend": "What if you want a translatable field which is required? Just use type \"i18n\" and \"required: true\".",
+          "hint": "Have you noticed the translatable field at the end of this field? This is how you recognize that this field is multilingual.",
+          "fields": {}
+        },
+        "i18nTextarea": {
+          "type": "i18n:textarea",
+          "label": "Translatable textarea",
+          "prepend": "You can make any field aside from \"node\" translatable. For instance, this type \"textarea\" have being converted to a multilingual field, simply by prepending the type with \"i18n:textarea\".",
+          "fields": {}
+        },
+        "i18nRating": {
+          "type": "i18n:rating",
+          "label": "Translatable ratings",
+          "prepend": "For instance, here's a translatable rating field \"i18n:rating\". Pretty simple, right?",
+          "fields": {}
+        },
+        "conditionalSwitch": {
+          "type": "switch",
+          "prepend": "You can only show/hide fields based on conditions. For instance, the hidden field has a conditional attribute that expect the following switch to be activated in order to show up.",
+          "label": "Show hidden field",
+          "fields": {}
+        },
+        "hiddenField1": {
+          "type": "slider",
+          "label": "I'm visible now!",
+          "conditional": "this.conditionalSwitch == true",
+          "fields": {}
+        },
+        "hiddenField2": {
+          "type": "range",
+          "label": "I'm a range",
+          "conditional": "this.conditionalSwitch == true",
+          "fields": {}
+        },
+        "list": {
+          "type": "node",
+          "label": "List",
+          "prepend": "OK, now let's see how to create a node (group). To do so, we simply set a field's type to \"node\". This is the only type of field that is not translatable.",
+          "fields": {
+            "select": {
+              "type": "select",
+              "label": "Gender",
+              "prepend": "Here's a simple list which contains two values: Male and Female. To define the items, add a \"items\" property with a list of key: value.",
+              "items": {
+                "male": "Male",
+                "female": "Female"
+              },
+              "fields": {}
+            },
+            "radio": {
+              "type": "radio",
+              "label": "Enums",
+              "prepend": "You can also define enums, which are predefined at the root level of the interface. Open the advanced editor and look for \"enums\". Use \"enums.[key]\" as items' value to use the enums. In this case, we used the enum like so: \"items: enums.gender\".",
+              "items": "enums.gender",
+              "fields": {}
+            },
+            "checkbox": {
+              "type": "checkbox",
+              "label": "Reuse of enums (multiple)",
+              "multiple": true,
+              "prepend": "The following field is reusing enums.gender as checkbox components, simply by adding a \"multiple: true\" in addition to \"type: checkbox\".",
+              "items": "enums.gender",
+              "fields": {}
+            }
+          }
+        },
+        "arrays": {
+          "type": "node",
+          "label": "Arrays",
+          "prepend": "OK, so now let's see how to create arrays.",
+          "fields": {
+            "array": {
+              "type": "array",
+              "label": "Person",
+              "prepend": "Let's pretend we want to define a list of people. We need to define a field with a type \"array\". Now click on \"Add\".",
+              "fields": {
+                "firstName": {
+                  "type": "string",
+                  "label": "First name",
+                  "fields": {}
+                },
+                "lastName": {
+                  "type": "string",
+                  "label": "Last name",
+                  "fields": {}
+                },
+                "gender": {
+                  "type": "radio",
+                  "label": "Gender",
+                  "items": "enums.gender",
+                  "fields": {}
+                },
+                "picture": {
+                  "type": "file",
+                  "label": "Picture",
+                  "accept": "image/*",
+                  "fields": {}
+                }
+              },
+              "items": {}
+            },
+            "i18nArray": {
+              "type": "i18n:array",
+              "label": "Translatable array",
+              "prepend": "Arrays can be translated as well. It is useful when you need a different list for each languages. Remember, to make any field translatable (but node), prefix the field with i18n. In this case: \"i18n:array\".",
+              "fields": {
+                "title": {
+                  "type": "string",
+                  "label": "Title",
+                  "prepend": "When using a translatable array, you must NOT set any of the inner fields translatable.",
+                  "fields": {}
+                }
+              },
+              "items": {}
+            }
+          }
+        },
+        "files": {
+          "type": "node",
+          "label": "Files",
+          "prepend": "Now let's talk about files.",
+          "fields": {
+            "file": {
+              "type": "file",
+              "label": "File",
+              "prepend": "It's as simple as adding \"type: file\" to your field.",
+              "fields": {}
+            },
+            "acceptImages": {
+              "type": "file",
+              "label": "Image only",
+              "accept": "image/*",
+              "prepend": "You can use the \"accept\" parameter and use any value supported by HTML. Example: \".png,.jpg,image/*,application/msword\". In this case, we'll use \"images/*\".",
+              "fields": {}
+            },
+            "multiple": {
+              "type": "file",
+              "label": "Multiple files",
+              "multiple": true,
+              "prepend": "You can also allow multiple files to be added.",
+              "fields": {}
+            }
+          }
+        },
+        "markdown": {
+          "type": "markdown",
+          "label": "Markdown",
+          "prepend": "There are other fields as well that you can use. Let's check them out. First, here's a markdown editor.",
+          "fields": {}
+        },
+        "date": {
+          "type": "date",
+          "label": "Date",
+          "prepend": "And here's a date selector:",
+          "fields": {}
+        }
+      },
+      "type": "unknown"
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/jms/structure.yml b/src/jms/structure.yml
new file mode 100644
index 0000000..91428f8
--- /dev/null
+++ b/src/jms/structure.yml
@@ -0,0 +1,231 @@
+# This YAML file serves as a blueprint for your admin panel, defining
+# all the fields and sections that will be displayed to users. It
+# outlines the structure and layout of the interface, specifying what
+# data can be entered and how it will be organized.
+
+
+# Global Configuration:
+#   Set the foundational parameters for your admin panel, including
+#   title, logo, and other essential settings that govern
+#   the overall appearance and functionality.
+global:
+  title: Demo Preview
+  copyright: JSON.ms v{{version}}. Licensed under the BSD-3-Clause.
+  logo: http://localhost:3000/favicon.ico
+  preview: http://localhost:3001
+
+
+# Supported Languages:
+#   Specify the languages your content will support, allowing users
+#   to interact with your content in their preferred language
+#   and enhancing accessibility for a diverse audience.
+locales:
+  en-US: English (US)
+  es-MX: Spanish (Mexico)
+  
+
+# Reusable Schemas:
+#   This feature allows you to define a schema of fields that can
+#   be reused throughout your document. A good example of schemas
+#   could be meta titles and descriptions for your web pages.
+schemas:
+  meta:
+    title:
+      type: string
+      label: Title
+    description:
+      type: string
+      label: Description
+
+
+# Reusable Enumerations:
+#   This feature allows you to define a schema of enums that can
+#   be reused throughout the document, promoting consistency and
+#   reducing redundancy in your data definitions.
+enums:
+  colors:
+    primary: Blueish
+    secondary: Greenish
+  gender:
+    male: Male
+    female: Female
+
+
+# App Sections and Fields:
+#   Outline the various sections of your data, detailing the
+#   specific fields within each section. This allows for a structured
+#   approach to content management, ensuring that all necessary
+#   information is captured and organized effectively.
+sections:
+  home:
+    label: Presentation
+    icon: mdi-view-carousel-outline
+    fields:
+      presentation:
+        type: array
+        label: Slides
+        fields:
+          title:
+            type: i18n
+            label: Title
+            required: true
+          body:
+            type: i18n:markdown
+            label: Body
+          cta:
+            type: i18n
+            label: Call-to-action
+            required: true
+          color:
+            type: radio
+            inline: true
+            items: enums.colors
+            label: Background color
+            required: true
+          commands:
+            type: select
+            multiple: true
+            label: Optional command(s)
+            items:
+              openDrawer: Open drawer
+              closeDrawer: Close drawer
+              openAdvanced: Open advanced
+              closeAdvanced: Close advanced
+              showData: Show data
+              showSettings: Show settings
+              showDocs: Show documentation
+              setMobile: Set mobile
+              setDesktop: Set desktop
+              hideDevice: Hide device
+  playground:
+    label: Playground
+    icon: mdi-toy-brick-outline
+    prepend: "In this section, we created various fields and played with their attributes to show you what you can do with JSON.ms. Follow along by opening the editor by click on \"Advanced\" in the Toolbar."
+    fields:
+      text:
+        type: string
+        label: String
+        rules:
+          - regex: /^abc/
+            message: The string must start with abc
+          - regex: /123$/
+            message: The string must end with 123
+        prepend: For instance, here's the most basic field.
+        hint: You can add a hint or a description below each field like so.
+      textWithIcon:
+        default: This is a default value
+        type: string
+        label: String with icon
+        prepend: But we could also decorate this field by adding icons and inner text.
+        icon: mdi-earth
+        append-inner: Inner text here
+        hint: "Use properties \"icon\", \"prepend\", \"prepend-inner\", \"append\" and \"append-inner\" to add content around and within the field."
+      i18nRequired:
+        type: i18n
+        label: Translatable field
+        required: true
+        prepend: "What if you want a translatable field which is required? Just use type \"i18n\" and \"required: true\"."
+        hint: Have you noticed the translatable field at the end of this field? This is how you recognize that this field is multilingual.
+      i18nTextarea:
+        type: i18n:textarea
+        label: Translatable textarea
+        prepend: "You can make any field aside from \"node\" translatable. For instance, this type \"textarea\" have being converted to a multilingual field, simply by prepending the type with \"i18n:textarea\"."
+      i18nRating:
+        type: i18n:rating
+        label: Translatable ratings
+        prepend: "For instance, here's a translatable rating field \"i18n:rating\". Pretty simple, right?"
+      conditionalSwitch:
+        type: switch
+        prepend: You can only show/hide fields based on conditions. For instance, the hidden field has a conditional attribute that expect the following switch to be activated in order to show up.
+        label: Show hidden field
+      hiddenField1:
+        type: slider
+        label: I'm visible now!
+        conditional: this.conditionalSwitch == true
+      hiddenField2:
+        type: range
+        label: I'm a range
+        conditional: this.conditionalSwitch == true
+      list:
+        type: node
+        label: List
+        prepend: "OK, now let's see how to create a node (group). To do so, we simply set a field's type to \"node\". This is the only type of field that is not translatable."
+        fields:
+          select:
+            type: select
+            label: Gender
+            prepend: "Here's a simple list which contains two values: Male and Female. To define the items, add a \"items\" property with a list of key: value."
+            items:
+              male: Male
+              female: Female
+          radio:
+            type: radio
+            label: Enums
+            prepend: "You can also define enums, which are predefined at the root level of the interface. Open the advanced editor and look for \"enums\". Use \"enums.[key]\" as items' value to use the enums. In this case, we used the enum like so: \"items: enums.gender\"."
+            items: enums.gender
+          checkbox:
+            type: checkbox
+            label: Reuse of enums (multiple)
+            multiple: true
+            prepend: "The following field is reusing enums.gender as checkbox components, simply by adding a \"multiple: true\" in addition to \"type: checkbox\"."
+            items: enums.gender
+      arrays:
+        type: node
+        label: Arrays
+        prepend: OK, so now let's see how to create arrays.
+        fields:
+          array:
+            type: array
+            label: Person
+            prepend: "Let's pretend we want to define a list of people. We need to define a field with a type \"array\". Now click on \"Add\"."
+            fields:
+              firstName:
+                type: string
+                label: First name
+              lastName:
+                type: string
+                label: Last name
+              gender:
+                type: radio
+                label: Gender
+                items: enums.gender
+              picture:
+                type: file
+                label: Picture
+                accept: image/*
+          i18nArray:
+            type: i18n:array
+            label: Translatable array
+            prepend: "Arrays can be translated as well. It is useful when you need a different list for each languages. Remember, to make any field translatable (but node), prefix the field with i18n. In this case: \"i18n:array\"."
+            fields:
+              title:
+                type: string
+                label: Title
+                prepend: When using a translatable array, you must NOT set any of the inner fields translatable.
+      files:
+        type: node
+        label: Files
+        prepend: Now let's talk about files.
+        fields:
+          file:
+            type: file
+            label: File
+            prepend: "It's as simple as adding \"type: file\" to your field.".
+          acceptImages:
+            type: file
+            label: Image only
+            accept: "image/*"
+            prepend: "You can use the \"accept\" parameter and use any value supported by HTML. Example: \".png,.jpg,image/*,application/msword\". In this case, we'll use \"images/*\".".
+          multiple:
+            type: file
+            label: Multiple files
+            multiple: true
+            prepend: "You can also allow multiple files to be added.".
+      markdown:
+        type: markdown
+        label: Markdown
+        prepend: There are other fields as well that you can use. Let's check them out. First, here's a markdown editor.
+      date:
+        type: date
+        label: Date
+        prepend: "And here's a date selector:"
\ No newline at end of file
diff --git a/src/interfaces.ts b/src/jms/typings.ts
similarity index 50%
rename from src/interfaces.ts
rename to src/jms/typings.ts
index 7ee1bd6..2f71040 100644
--- a/src/interfaces.ts
+++ b/src/jms/typings.ts
@@ -1,6 +1,6 @@
-export type JmsLocale = 'en-US' | 'es-MX'
+export type JmsLocaleKey = 'en-US' | 'es-MX'
 
-export type JmsSection = 'home' | 'playground'
+export type JmsSectionKey = 'home' | 'playground'
 
 export type JmsEnumColors = 'primary' | 'secondary'
 
@@ -12,19 +12,22 @@ export type JmsLocaleSet<T> = {
 }
 
 export interface JmsFileMeta {
-  size: number
-  type: string
-  width: number
-  height: number
-  originalFileName: string
+  size?: number | null
+  type?: string
+  width?: number | null
+  height?: number | null
+  timestamp?: number
+  frameRate?: number
+  duration?: number
+  originalFileName?: string
 }
 
 export interface JmsFile {
-  path: string
+  path: string | null
   meta: JmsFileMeta
 }
 
-export interface JmsHomeItems {
+export interface JmsHomePresentationItems {
   title: JmsLocaleSet<string>
   body: JmsLocaleSet<string | null>
   cta: JmsLocaleSet<string>
@@ -34,7 +37,7 @@ export interface JmsHomeItems {
 }
 
 export interface JmsHome {
-  presentation: JmsHomeItems[]
+  presentation: JmsHomePresentationItems[]
 }
 
 export interface JmsPlaygroundList {
@@ -43,7 +46,7 @@ export interface JmsPlaygroundList {
   checkbox: JmsEnumGender[]
 }
 
-export interface JmsPlaygroundArraysItems {
+export interface JmsPlaygroundArraysArrayItems {
   firstName: string | null
   lastName: string | null
   gender: JmsEnumGender | null
@@ -51,14 +54,14 @@ export interface JmsPlaygroundArraysItems {
   hash: string
 }
 
-export interface JmsPlaygroundArraysItems {
+export interface JmsPlaygroundArraysI18nArrayItems {
   title: string | null
   hash: string
 }
 
 export interface JmsPlaygroundArrays {
-  array: JmsPlaygroundArraysItems[]
-  i18nArray: JmsPlaygroundArraysItems[]
+  array: JmsPlaygroundArraysArrayItems[]
+  i18nArray: JmsLocaleSet<JmsPlaygroundArraysI18nArrayItems[]>
 }
 
 export interface JmsPlaygroundFiles {
@@ -71,10 +74,11 @@ export interface JmsPlayground {
   text: string | null
   textWithIcon: string | null
   i18nRequired: JmsLocaleSet<string>
-  i18nTextarea: JmsLocaleSet<undefined | null>
+  i18nTextarea: JmsLocaleSet<string | null>
   i18nRating: JmsLocaleSet<number | null>
   conditionalSwitch: undefined | null
-  hiddenField: number | null
+  hiddenField1: number | null
+  hiddenField2: [number, number] | null
   list: JmsPlaygroundList
   arrays: JmsPlaygroundArrays
   files: JmsPlaygroundFiles
@@ -82,56 +86,7 @@ export interface JmsPlayground {
   date: Date | null
 }
 
-export interface JmsObject {
+export interface JmsData {
   home: JmsHome
   playground: JmsPlayground
-}
-
-const locales: { [key: string]: string } = {
-  "en-US": "English (US)",
-  "es-MX": "Spanish (Mexico)"
-}
-
-export { locales }
-
-const defaultJmsObject: JmsObject = {
-  "home": {
-    "presentation": []
-  },
-  "playground": {
-    "text": null,
-    "textWithIcon": null,
-    "i18nRequired": {
-      "en-US": "",
-      "es-MX": ""
-    },
-    "i18nTextarea": {
-      "en-US": null,
-      "es-MX": null
-    },
-    "i18nRating": {
-      "en-US": null,
-      "es-MX": null
-    },
-    "conditionalSwitch": null,
-    "hiddenField": null,
-    "list": {
-      "select": null,
-      "radio": null,
-      "checkbox": []
-    },
-    "arrays": {
-      "array": [],
-      "i18nArray": []
-    },
-    "files": {
-      "file": null,
-      "acceptImages": null,
-      "multiple": []
-    },
-    "markdown": null,
-    "date": null
-  }
-}
-
-export default defaultJmsObject
+}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index c8fc172..284618e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,7 @@
 /**
  * main.ts
  *
- * Bootstraps Vuetify and other plugins then mounts the App`
+ * Bootstraps Vuetify and other utils then mounts the App`
  */
 
 // Plugins
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index 5ef294b..2862c16 100644
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -18,7 +18,5 @@ export function registerPlugins (app: App) {
     .use(vuetify)
     .use(router)
     .use(pinia)
-    .use(jsonMs, {
-      router,
-    })
+    .use(jsonMs)
 }
diff --git a/src/plugins/jsonms.ts b/src/plugins/jsonms.ts
index 7fc2afd..8888131 100644
--- a/src/plugins/jsonms.ts
+++ b/src/plugins/jsonms.ts
@@ -1,23 +1,15 @@
-import JsonMs from '@jsonms/vue3'
-import { inject } from 'vue';
-import defaultJmsObject, { type JmsSection, type JmsLocale, type JmsObject } from '@/interfaces';
-import { type JSONmsProvider } from '@jsonms/vue3';
-
-const defaultSection: JmsSection = 'home';
-const defaultLocale: JmsLocale = 'en-US';
-
-export default JsonMs<JmsObject, JmsSection, JmsLocale>(defaultJmsObject, defaultSection, defaultLocale)
-
-type JmsProviderSet = JSONmsProvider<JmsObject, JmsSection, JmsLocale>
-
-export const useJsonMs = (): JmsProviderSet => {
-  const jms = inject<JmsProviderSet>('jms');
-  if (jms) {
-    return jms;
-  }
-  return {
-    data: ref(defaultJmsObject),
-    section: ref(defaultSection),
-    locale: ref(defaultLocale),
-  }
+import { inject } from "vue";
+import { data, type JmsSectionKey, type JmsLocaleKey, type JmsData } from '@/jms';
+import JsonMs, { type JSONmsProvider } from '@jsonms/vue3';
+
+const provider = JsonMs<JmsData, JmsSectionKey, JmsLocaleKey>({
+  defaultData: data as unknown as JmsData,
+  defaultLocale: 'en-US',
+  defaultSection: { name: 'home', paths: [] },
+})
+
+export function useJsonMs() {
+  return inject<JSONmsProvider<JmsData, JmsSectionKey, JmsLocaleKey>>('jms', provider.values);
 }
+
+export default provider;
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
index 46ece96..5e58917 100644
--- a/src/plugins/vuetify.ts
+++ b/src/plugins/vuetify.ts
@@ -1,5 +1,5 @@
 /**
- * plugins/vuetify.ts
+ * utils/vuetify.ts
  *
  * Framework documentation: https://vuetifyjs.com`
  */

From 8de9a1f37be85f7f2697e87b7aacfd344ba12eea Mon Sep 17 00:00:00 2001
From: Danny Coulombe <danny.coulombe@yolarx.com>
Date: Thu, 1 May 2025 09:33:54 -0400
Subject: [PATCH 2/2] upgrade @jsonms/js version

---
 package.json |  4 ++--
 yarn.lock    | 12 ++++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 4751e6f..27121cb 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@jsonms/demo",
   "private": true,
   "type": "module",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@mdi/font": "7.4.47",
-    "@jsonms/vue3": "^1.0.0",
+    "@jsonms/vue3": "^1.0.7",
     "core-js": "^3.37.1",
     "roboto-fontface": "*",
     "vue": "^3.4.31",
diff --git a/yarn.lock b/yarn.lock
index 8a04525..b1afe47 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -251,6 +251,18 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
   integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
 
+"@jsonms/js@^1.0.0":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@jsonms/js/-/js-1.0.7.tgz#353efe6724789386fb723eb5615a08df4d253d42"
+  integrity sha512-/7Ru4cxsOjSjrIBONUA/mbdZYcYKPANbL8zPR0DjsIN4qaMuiWD7laQlHTGNphKhuQ4lDb2qMzAO66E9lgsV5g==
+
+"@jsonms/vue3@^1.0.7":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@jsonms/vue3/-/vue3-1.0.8.tgz#05ed3b43f1d2cab947f38fe37b426e84bc9fbcf8"
+  integrity sha512-piYGFz0GeQ1z4dc3ZAs3AawCEAAa+nEgxWKFS8RxPb9EH72Rz2thLSbph/YWga3xjvpdywsdknUJ2d0PINg42w==
+  dependencies:
+    "@jsonms/js" "^1.0.0"
+
 "@mdi/font@7.4.47":
   version "7.4.47"
   resolved "https://registry.yarnpkg.com/@mdi/font/-/font-7.4.47.tgz#2ae522867da3a5c88b738d54b403eb91471903af"