chore: doc

CHANGELOG.md

@@ -1,16 +1,24 @@
 # Change Log
 
+### About versions
+
 The GDD project is backwards and forwards compatible.
-Therefore, there are no version numbers, nor semantic versioning.
+Therefore there are no version numbers, nor semantic versioning for the project as a whole.
+
+Implementation libraries (like the javascript npm library) _do_ have individual version numbering though.
+
+
+## About this change log
 
 The list below is intended for (GUI) developers to keep track of (and add support for) new features.
 
-_Internal changes, like typos or updates to the json-schema are not listed here._
+_Internal changes, like typos or internal fixes to the json-schema are not listed here._
 
 
 ## 2023-10-20
 
 * New **GDDType**: `color-rrggbbaa` [PR #16](https://github.com/SuperFlyTV/GraphicsDataDefinition/pull/16)
+* Version 1.0.0 of the [javascript npm library](https://www.npmjs.com/package/graphics-data-definition) is released.
 
 ## 2022-10-28
 

README.md

@@ -437,6 +437,16 @@ Example:
 
 ## For GUI Developers
 
+### Getting started
+
+```bash
+npm install graphics-data-definition
+```
+
+See [README for the npm-library](https://www.npmjs.com/package/graphics-data-definition) for how to use.
+
+### About implementing GUIs
+
 When implementing a GUI to support the GDD definitions, you don't have to implement support for all GDD Types - since the GDD Types are designed to degrade gracefully. The only types that are mandatory to implement are the basic types `"boolean"`, `"string"`, `"number"`, `"integer"`, `"array"`and `"object"`.
 
 To degrade gracefully, it is recommended that you follow these practices when implementing the GUI:

lib/javascript-library/README.md

@@ -12,6 +12,9 @@ npm install graphics-data-definition
 
 ## How to use
 
+
+### Validating schema and data
+
 ```typescript
 // Typescript
 import {
@@ -69,3 +72,49 @@ console.log('Default Data from schema: ' + JSON.stringify(defaultData))
 
 ```
 
+
+
+### Building a GUI
+
+_See [Reference-GUI](https://github.com/SuperFlyTV/GraphicsDataDefinition/tree/master/lib/reference-gui) for example implementation,_
+
+```typescript
+// Typescript
+import {
+    validateData,
+    getDefaultDataFromSchema,
+    setupSchemaValidator,
+    GDDSchema,
+    GDDTypes
+} from 'graphics-data-definition'
+
+
+function drawGUIComponent(schema: GDDSchemaProperty) {
+    const gddSchema = schema as GDDTypes
+
+    // Handle GDD Types:
+    if (gddSchema.type === 'string') {
+        if (gddSchema.gddType === 'single-line') return drawGUIComponentSingleLine(innerProps)
+        else if (gddSchema.gddType === 'multi-line') return drawGUIComponentMultiLine(innerProps)
+        // etc ...
+    } else if (gddSchema.type === 'integer') {
+		if (gddSchema.gddType === 'select') return drawGUIComponentSelect(innerProps)
+        // etc ...
+    } // else if () etc ...
+
+
+    // Handle basic types:
+    const basicType = getBasicType(schema.type)
+
+    if (basicType === 'boolean') return drawGUIComponentBoolean(innerProps)
+    if (basicType === 'string') return drawGUIComponentString(innerProps)
+    if (basicType === 'number') return drawGUIComponentNumber(innerProps)
+    if (basicType === 'integer') return drawGUIComponentInteger(innerProps)
+    if (basicType === 'array') return drawGUIComponentArray(innerProps)
+    if (basicType === 'object') return drawGUIComponentObject(innerProps)
+
+    // Fallback:
+    return drawGUIComponentUnknown({ ...innerProps, basicType })
+}
+
+``````