@json-layout/vocabulary 0.13.0 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-layout/vocabulary",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "description": "Main JSON Layout vocabulary as JSON schemas and Typescript types. Also contains some small utility functions to validate and normalize annotations.",
   "type": "module",
   "exports": {
@@ -17,11 +17,11 @@
     "LICENSE"
   ],
   "scripts": {
-    "test:single": "node --test --test-only test/*.spec.js",
+    "test:only": "node --test --test-only test/*.spec.js",
     "test": "node --test test/*.spec.js",
-    "build": "run-s clean build:schemas build:tsc",
+    "build": "run-s clean build:types build:tsc",
     "clean": "rm -rf ./types && rm -f src/*/types.ts && rm -f src/*/validate.js",
-    "build:schemas": "node scripts/compile-schemas.js",
+    "build:types": "node scripts/compile-types.js",
     "build:tsc": "tsc -p tsconfig.build.json",
     "lint": "eslint . --fix",
     "watch:schemas": "node --watch scripts/compile-schemas.js",
@@ -51,6 +51,6 @@
   "devDependencies": {
     "@types/debug": "^4.1.7",
     "ajv": "^8.12.0",
-    "json-schema-to-typescript": "^13.1.1"
+    "json-schema-to-typescript": "^14.0.0"
   }
 }

package/src/components/compile-types.js

@@ -0,0 +1,61 @@
+import { compile as compileTs } from 'json-schema-to-typescript'
+import normalizedLayoutSchema from '../normalized-layout/schema.js'
+
+const localResolver = {
+  order: 1,
+  /**
+   * @param {{ url: string }} file
+   * @returns {boolean}
+   */
+  canRead (file) {
+    return file.url === normalizedLayoutSchema.$id
+  },
+  /**
+   * @param {{ url: string }} file
+   * @param {(err: any, doc?: any) => void} callback
+   */
+  async read (/** @type {{ url: string }} */file, callback) {
+    const clonedSchema = JSON.parse(JSON.stringify(normalizedLayoutSchema))
+    delete clonedSchema.$id
+    callback(null, clonedSchema)
+  }
+}
+
+const compileTsOptions = {
+  bannerComment: '',
+  declareExternallyReferenced: false,
+  $refOptions: { resolve: { local: localResolver } }
+}
+
+/**
+ * @param {string} from
+ * @returns {string}
+ */
+export function getComponentTypesCodeImport (from) {
+  return `import type {
+  BaseCompObject,
+  CompositeCompObject,
+  SimpleCompObject,
+  FocusableCompObject,
+  ItemsBasedCompObject,
+  Expression,
+  Children,
+  GetItems,
+  SelectItems
+} from '${from}'\n`
+}
+
+/**
+ * @param {any} schema
+ * @param {string} key
+ * @param {boolean} standalone
+ * @returns {Promise<string>}
+ */
+export async function getComponentTypesCode (schema, key, standalone = true) {
+  let typesCode = ''
+  if (standalone) {
+    typesCode += getComponentTypesCodeImport('@json-layout/vocabulary/normalized-layout/types.js')
+  }
+  typesCode += await compileTs(schema, key, compileTsOptions)
+  return typesCode
+}

package/src/components/index.js

@@ -0,0 +1,226 @@
+/**
+ * @typedef {import('./types.js').Section} Section
+ * @typedef {import('./types.js').Select} Select
+ * @typedef {import('./types.js').Autocomplete} Autocomplete
+ * @typedef {import('./types.js').TextField} TextField
+ * @typedef {import('./types.js').Textarea} Textarea
+ * @typedef {import('./types.js').NumberField} NumberField
+ * @typedef {import('./types.js').Slider} Slider
+ * @typedef {import('./types.js').Checkbox} Checkbox
+ * @typedef {import('./types.js').Switch} Switch
+ * @typedef {import('./types.js').DatePicker} DatePicker
+ * @typedef {import('./types.js').TimePicker} TimePicker
+ * @typedef {import('./types.js').DateTimePicker} DateTimePicker
+ * @typedef {import('./types.js').ColorPicker} ColorPicker
+ * @typedef {import('./types.js').OneOfSelect} OneOfSelect
+ * @typedef {import('./types.js').Tabs} Tabs
+ * @typedef {import('./types.js').VerticalTabs} VerticalTabs
+ * @typedef {import('./types.js').ExpansionPanels} ExpansionPanels
+ * @typedef {import('./types.js').Stepper} Stepper
+ * @typedef {import('./types.js').List} List
+ * @typedef {import('./types.js').Combobox} Combobox
+ * @typedef {import('./types.js').FileInput} FileInput
+ */
+
+/** @type {import('../types.js').ComponentInfo[]} */
+export const standardComponents = [
+  {
+    name: 'none'
+  },
+  {
+    name: 'section',
+    composite: true
+  },
+  {
+    name: 'tabs',
+    composite: true
+  },
+  {
+    name: 'vertical-tabs',
+    composite: true
+  },
+  {
+    name: 'expansion-panels',
+    composite: true
+  },
+  {
+    name: 'stepper',
+    composite: true
+  },
+  {
+    name: 'list',
+    schema: {
+      required: ['listEditMode', 'listActions'],
+      properties: {
+        title: { type: 'string' },
+        listEditMode: { type: 'string', enum: ['inline', 'inline-single', 'menu', 'dialog'] },
+        listActions: { type: 'array', items: { type: 'string', enum: ['add', 'edit', 'delete', 'sort', 'duplicate'] } },
+        itemTitle: { $ref: 'https://json-layout.github.io/normalized-layout-keyword#/$defs/expression' },
+        itemSubtitle: { $ref: 'https://json-layout.github.io/normalized-layout-keyword#/$defs/expression' },
+        messages: {
+          type: 'object',
+          additionalProperties: false,
+          properties: {
+            addItem: { type: 'string' },
+            delete: { type: 'string' },
+            edit: { type: 'string' },
+            duplicate: { type: 'string' },
+            sort: { type: 'string' }
+          }
+        }
+      }
+    }
+  },
+  {
+    name: 'text-field',
+    shouldDebounce: true,
+    focusable: true,
+    emitsBlur: true
+  },
+  {
+    name: 'textarea',
+    shouldDebounce: true,
+    focusable: true,
+    emitsBlur: true
+  },
+  {
+    name: 'number-field',
+    shouldDebounce: true,
+    focusable: true,
+    emitsBlur: true,
+    schema: {
+      properties: {
+        step: { type: 'number' },
+        min: { type: 'number' },
+        max: { type: 'number' }
+      }
+    }
+  },
+  {
+    name: 'checkbox'
+  },
+  {
+    name: 'switch'
+  },
+  {
+    name: 'slider',
+    schema: {
+      properties: {
+        step: { type: 'number' },
+        min: { type: 'number' },
+        max: { type: 'number' }
+      }
+    }
+  },
+  {
+    name: 'date-picker',
+    schema: {
+      properties: {
+        min: { type: 'string', format: 'date' },
+        max: { type: 'string', format: 'date' },
+        format: { type: 'string', enum: ['date', 'date-time'], default: 'date' }
+      }
+    }
+  },
+  {
+    name: 'date-time-picker',
+    schema: {
+      properties: {
+        min: { type: 'string', format: 'date-time' },
+        max: { type: 'string', format: 'date-time' }
+      }
+    }
+  },
+  {
+    name: 'time-picker',
+    schema: {
+      properties: {
+        min: { type: 'string', format: 'time' },
+        max: { type: 'string', format: 'time' }
+      }
+    }
+  },
+  {
+    name: 'color-picker'
+  },
+  {
+    name: 'select',
+    focusable: true,
+    itemsBased: true,
+    multipleCompat: true
+  },
+  {
+    name: 'autocomplete',
+    focusable: true,
+    itemsBased: true,
+    multipleCompat: true
+  },
+  {
+    name: 'combobox',
+    focusable: true,
+    itemsBased: true,
+    multipleCompat: true
+  },
+  {
+    name: 'number-combobox',
+    focusable: true,
+    itemsBased: true,
+    multipleCompat: true,
+    schema: {
+      properties: {
+        step: { type: 'number' },
+        min: { type: 'number' },
+        max: { type: 'number' }
+      }
+    }
+  },
+  {
+    name: 'file-input',
+    focusable: true,
+    multipleCompat: true,
+    schema: {
+      properties: {
+        accept: { type: 'string' }
+      }
+    }
+  },
+  {
+    name: 'one-of-select'
+  }
+]
+
+/**
+ * @param {import('../types.js').ComponentInfo} component
+ * @returns {any}
+ */
+export function getComponentSchema (component) {
+  /** @type {any} */
+  const schema = {
+    type: 'object',
+    title: component.name,
+    $id: `https://json-layout.github.io/component/${component.name}#`,
+    unevaluatedProperties: false,
+    allOf: [
+      { properties: { comp: { const: component.name } } },
+      { $ref: 'https://json-layout.github.io/normalized-layout-keyword#/$defs/base-comp-object' }
+    ]
+  }
+  if (component.composite) {
+    schema.allOf.push({ $ref: 'https://json-layout.github.io/normalized-layout-keyword#/$defs/composite-comp-object' })
+  } else {
+    schema.allOf.push({ $ref: 'https://json-layout.github.io/normalized-layout-keyword#/$defs/simple-comp-object' })
+  }
+  if (component.focusable) {
+    schema.allOf.push({ $ref: 'https://json-layout.github.io/normalized-layout-keyword#/$defs/focusable-comp-object' })
+  }
+  if (component.itemsBased) {
+    schema.allOf.push({ $ref: 'https://json-layout.github.io/normalized-layout-keyword#/$defs/items-based-comp-object' })
+  }
+  if (component.multipleCompat) {
+    schema.allOf.push({ $ref: 'https://json-layout.github.io/normalized-layout-keyword#/$defs/multiple-compat-comp-object' })
+  }
+  if (component.schema) {
+    schema.allOf.push(component.schema)
+  }
+  return schema
+}

package/src/components/types.ts

@@ -0,0 +1,378 @@
+import type {
+  BaseCompObject,
+  CompositeCompObject,
+  SimpleCompObject,
+  FocusableCompObject,
+  ItemsBasedCompObject,
+  Expression,
+  Children,
+  GetItems,
+  SelectItems
+} from '../normalized-layout/types.js'
+export type None = {
+  comp?: "none";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    [k: string]: unknown;
+  });
+export type Section = {
+  comp?: "section";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    title?: string | null;
+    subtitle?: string | null;
+    children: Children;
+    [k: string]: unknown;
+  });
+export type Tabs = {
+  comp?: "tabs";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    title?: string | null;
+    subtitle?: string | null;
+    children: Children;
+    [k: string]: unknown;
+  });
+export type VerticalTabs = {
+  comp?: "vertical-tabs";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    title?: string | null;
+    subtitle?: string | null;
+    children: Children;
+    [k: string]: unknown;
+  });
+export type ExpansionPanels = {
+  comp?: "expansion-panels";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    title?: string | null;
+    subtitle?: string | null;
+    children: Children;
+    [k: string]: unknown;
+  });
+export type Stepper = {
+  comp?: "stepper";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    title?: string | null;
+    subtitle?: string | null;
+    children: Children;
+    [k: string]: unknown;
+  });
+export type List = {
+  comp?: "list";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    [k: string]: unknown;
+  }) & {
+    title?: string;
+    listEditMode: "inline" | "inline-single" | "menu" | "dialog";
+    listActions: ("add" | "edit" | "delete" | "sort" | "duplicate")[];
+    itemTitle?: Expression;
+    itemSubtitle?: Expression;
+    messages?: {
+      addItem?: string;
+      delete?: string;
+      edit?: string;
+      duplicate?: string;
+      sort?: string;
+    };
+    [k: string]: unknown;
+  };
+export type TextField = {
+  comp?: "text-field";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    [k: string]: unknown;
+  }) &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    autofocus?: boolean;
+    [k: string]: unknown;
+  });
+export type Textarea = {
+  comp?: "textarea";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    [k: string]: unknown;
+  }) &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    autofocus?: boolean;
+    [k: string]: unknown;
+  });
+export type NumberField = {
+  comp?: "number-field";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    [k: string]: unknown;
+  }) &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    autofocus?: boolean;
+    [k: string]: unknown;
+  }) & {
+    step?: number;
+    min?: number;
+    max?: number;
+    [k: string]: unknown;
+  };
+export type Checkbox = {
+  comp?: "checkbox";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    [k: string]: unknown;
+  });
+export type Switch = {
+  comp?: "switch";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    [k: string]: unknown;
+  });
+export type Slider = {
+  comp?: "slider";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    [k: string]: unknown;
+  }) & {
+    step?: number;
+    min?: number;
+    max?: number;
+    [k: string]: unknown;
+  };
+export type DatePicker = {
+  comp?: "date-picker";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    [k: string]: unknown;
+  }) & {
+    min?: string;
+    max?: string;
+    format?: "date" | "date-time";
+    [k: string]: unknown;
+  };
+export type DateTimePicker = {
+  comp?: "date-time-picker";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    [k: string]: unknown;
+  }) & {
+    min?: string;
+    max?: string;
+    [k: string]: unknown;
+  };
+export type TimePicker = {
+  comp?: "time-picker";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    [k: string]: unknown;
+  }) & {
+    min?: string;
+    max?: string;
+    [k: string]: unknown;
+  };
+export type ColorPicker = {
+  comp?: "color-picker";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    [k: string]: unknown;
+  });
+export type Select = {
+  comp?: "select";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    [k: string]: unknown;
+  }) &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    autofocus?: boolean;
+    [k: string]: unknown;
+  }) &
+  (BaseCompObject & {
+    comp: string;
+    items?: SelectItems;
+    getItems?: GetItems;
+    multiple?: boolean;
+    separator?: string;
+    [k: string]: unknown;
+  }) &
+  (BaseCompObject & {
+    comp: string;
+    multiple?: boolean;
+    [k: string]: unknown;
+  });
+export type Autocomplete = {
+  comp?: "autocomplete";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    [k: string]: unknown;
+  }) &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    autofocus?: boolean;
+    [k: string]: unknown;
+  }) &
+  (BaseCompObject & {
+    comp: string;
+    items?: SelectItems;
+    getItems?: GetItems;
+    multiple?: boolean;
+    separator?: string;
+    [k: string]: unknown;
+  }) &
+  (BaseCompObject & {
+    comp: string;
+    multiple?: boolean;
+    [k: string]: unknown;
+  });
+export type Combobox = {
+  comp?: "combobox";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    [k: string]: unknown;
+  }) &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    autofocus?: boolean;
+    [k: string]: unknown;
+  }) &
+  (BaseCompObject & {
+    comp: string;
+    items?: SelectItems;
+    getItems?: GetItems;
+    multiple?: boolean;
+    separator?: string;
+    [k: string]: unknown;
+  }) &
+  (BaseCompObject & {
+    comp: string;
+    multiple?: boolean;
+    [k: string]: unknown;
+  });
+export type NumberCombobox = {
+  comp?: "number-combobox";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    [k: string]: unknown;
+  }) &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    autofocus?: boolean;
+    [k: string]: unknown;
+  }) &
+  (BaseCompObject & {
+    comp: string;
+    items?: SelectItems;
+    getItems?: GetItems;
+    multiple?: boolean;
+    separator?: string;
+    [k: string]: unknown;
+  }) &
+  (BaseCompObject & {
+    comp: string;
+    multiple?: boolean;
+    [k: string]: unknown;
+  }) & {
+    step?: number;
+    min?: number;
+    max?: number;
+    [k: string]: unknown;
+  };
+export type FileInput = {
+  comp?: "file-input";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    [k: string]: unknown;
+  }) &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    autofocus?: boolean;
+    [k: string]: unknown;
+  }) &
+  (BaseCompObject & {
+    comp: string;
+    multiple?: boolean;
+    [k: string]: unknown;
+  }) & {
+    accept?: string;
+    [k: string]: unknown;
+  };
+export type OneOfSelect = {
+  comp?: "one-of-select";
+  [k: string]: unknown;
+} & BaseCompObject &
+  (BaseCompObject & {
+    comp: string;
+    label?: string;
+    [k: string]: unknown;
+  });

package/src/index.js

@@ -1,4 +1,7 @@
 /** @typedef {import("./types.js").SchemaFragment} SchemaFragment */
+/** @typedef {import("./types.js").ComponentInfo} ComponentInfo */
+
 export * from './layout-keyword/index.js'
 export * from './normalized-layout/index.js'
+export * from './components/index.js'
 export { normalizeLayoutFragment, getSchemaFragmentType } from './normalize.js'