@meeovi/directus-client 1.0.1 → 1.0.3

package/dist/client/createClient.d.ts

@@ -1,6 +1,7 @@
-import { createDirectus, readItem, readItems, createItem, updateItem, deleteItem, uploadFiles, readSingleton, readFieldsByCollection } from '@directus/sdk';
+import { readItem, readItems, createItem, updateItem, deleteItem, uploadFiles, readSingleton, readFieldsByCollection, type DirectusClient } from '@directus/sdk';
 export interface MeeoviDirectusClient<Schema> {
-    client: ReturnType<typeof createDirectus<Schema>>;
+    client: DirectusClient<Schema>;
+    request: any;
     readItem: typeof readItem;
     readItems: typeof readItems;
     createItem: typeof createItem;

package/dist/client/createClient.js

@@ -1,4 +1,3 @@
-// src/client/createClient.ts
 import { createDirectus, rest, authentication, readItem, readItems, createItem, updateItem, deleteItem, uploadFiles, readSingleton, readFieldsByCollection } from '@directus/sdk';
 export function createMeeoviDirectusClient(url) {
     const client = createDirectus(url)
@@ -6,6 +5,7 @@ export function createMeeoviDirectusClient(url) {
         .with(authentication());
     return {
         client,
+        request: client.request,
         readItem,
         readItems,
         createItem,

package/dist/generators/form-engine.d.ts

@@ -1,15 +1,13 @@
 import type { DirectusField } from '../schema/types';
-export interface FormEngineOptions {
-    clearOnSuccess?: boolean;
-    onSuccess?: () => void;
-    onError?: (msg: string) => void;
+export interface GeneratedFormField {
+    key: string;
+    widget: string;
+    type: string;
+    options?: Record<string, any>;
+    fields?: GeneratedFormField[];
+    isRepeatable?: boolean;
+    isFile?: boolean;
+    isRelational?: boolean;
 }
-export declare function createFormEngine(collectionName: string, fields: DirectusField[], directusClient: any, opts?: FormEngineOptions): {
-    form: Record<string, any>;
-    submit: () => Promise<{
-        error: string | null;
-        success: string | null;
-    }>;
-    readonly error: string | null;
-    readonly success: string | null;
-};
+export declare function generateFormField(field: DirectusField): GeneratedFormField;
+export declare function generateFormSchema(fields: DirectusField[]): GeneratedFormField[];

package/dist/generators/form-engine.js

@@ -1,63 +1,22 @@
-export function createFormEngine(collectionName, fields, directusClient, opts) {
-    const form = {};
-    let error = null;
-    let success = null;
-    const validate = () => {
-        error = null;
-        for (const field of fields) {
-            const meta = field;
-            if (!meta?.validation)
-                continue;
-            try {
-                const validation = meta.validation;
-                if (validation._and) {
-                    for (const rule of validation._and) {
-                        const fieldName = Object.keys(rule)[0];
-                        if (!fieldName)
-                            continue;
-                        const ruleDef = rule[fieldName];
-                        if (ruleDef?._regex) {
-                            const regex = new RegExp(ruleDef._regex);
-                            const value = String(form[field.field] ?? '');
-                            if (!regex.test(value)) {
-                                error = meta.validation_message || `${field.field} failed validation`;
-                                return false;
-                            }
-                        }
-                    }
-                }
-            }
-            catch {
-                error = `Validation error for ${field.field}`;
-                return false;
-            }
-        }
-        return true;
-    };
-    const submit = async () => {
-        if (!validate())
-            return { error, success };
-        const result = await directusClient.request(directusClient.createItem(collectionName, form));
-        if (result?.error) {
-            error = result.error.message;
-            return { error, success };
-        }
-        success = `${collectionName} created successfully`;
-        if (opts?.clearOnSuccess) {
-            for (const key of Object.keys(form))
-                delete form[key];
-        }
-        opts?.onSuccess?.();
-        return { error, success };
-    };
-    return {
-        form,
-        submit,
-        get error() {
-            return error;
-        },
-        get success() {
-            return success;
-        }
+import { widgetRegistry } from './widget-registry';
+export function generateFormField(field) {
+    const widget = widgetRegistry[field.interface || 'input'];
+    const base = {
+        key: field.field,
+        widget: widget.component,
+        type: field.type,
+        options: field.options || {},
+        isRepeatable: widget.isRepeatable,
+        isFile: widget.isFile,
+        isRelational: widget.isRelational
     };
+    if ((field.interface === 'repeater' || field.interface === 'group') && field.options?.fields) {
+        base.fields = field.options.fields.map((sub) => generateFormField(sub));
+    }
+    return base;
+}
+export function generateFormSchema(fields) {
+    return fields
+        .filter(f => f.interface !== 'presentation' && f.interface !== 'divider')
+        .map(generateFormField);
 }

package/dist/generators/widget-registry.d.ts

@@ -1,17 +1,9 @@
-export declare const widgetRegistry: {
-    text: {
-        component: string;
-    };
-    number: {
-        component: string;
-    };
-    checkbox: {
-        component: string;
-    };
-    date: {
-        component: string;
-    };
-    json: {
-        component: string;
-    };
-};
+export interface WidgetDefinition {
+    component: string;
+    props?: Record<string, any>;
+    isRepeatable?: boolean;
+    isRelational?: boolean;
+    isFile?: boolean;
+}
+export declare const widgetRegistry: Record<string, WidgetDefinition>;
+export declare function extendWidgetRegistryFromDirectus(client: any): Promise<void>;

package/dist/generators/widget-registry.js

@@ -1,7 +1,54 @@
+import { readItems } from "@directus/sdk";
 export const widgetRegistry = {
-    text: { component: 'TextInput' },
-    number: { component: 'NumberInput' },
+    // Basic inputs
+    input: { component: 'TextInput' },
+    textarea: { component: 'TextareaInput' },
+    boolean: { component: 'ToggleInput' },
+    slider: { component: 'SliderInput' },
+    color: { component: 'ColorPicker' },
+    rating: { component: 'RatingInput' },
+    // Selects
+    'select-dropdown': { component: 'SelectInput' },
+    'select-multiple-dropdown': { component: 'MultiSelectInput' },
+    tags: { component: 'TagInput' },
     checkbox: { component: 'CheckboxInput' },
+    radio: { component: 'RadioInput' },
+    // Date/time
+    datetime: { component: 'DateTimeInput' },
     date: { component: 'DateInput' },
-    json: { component: 'JsonEditor' }
+    time: { component: 'TimeInput' },
+    // Files
+    file: { component: 'FileInput', isFile: true },
+    files: { component: 'FilesInput', isFile: true },
+    image: { component: 'ImageInput', isFile: true },
+    images: { component: 'ImagesInput', isFile: true },
+    // Complex
+    repeater: { component: 'RepeaterInput', isRepeatable: true },
+    group: { component: 'GroupInput' },
+    json: { component: 'JsonEditor' },
+    code: { component: 'CodeEditor' },
+    wysiwyg: { component: 'WysiwygEditor' },
+    markdown: { component: 'MarkdownEditor' },
+    // Directus-specific
+    icon: { component: 'IconPicker' },
+    user: { component: 'UserSelect' },
+    role: { component: 'RoleSelect' },
+    translation: { component: 'TranslationInput' },
+    // Presentation (ignored in forms)
+    presentation: { component: 'PresentationBlock' },
+    divider: { component: 'DividerBlock' }
 };
+export async function extendWidgetRegistryFromDirectus(client) {
+    const extensions = await client.request(readItems('directus_extensions'));
+    for (const ext of extensions) {
+        if (ext.type !== 'interface')
+            continue;
+        const name = ext.name;
+        if (!widgetRegistry[name]) {
+            widgetRegistry[name] = {
+                component: 'CustomInterfaceRenderer',
+                props: { interfaceName: name }
+            };
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meeovi/directus-client",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Directus Client Library with auto generating forms and tables, Directus SDK and Types, and vue/react components for Directus Visual Editing.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/client/createClient.ts

@@ -1,5 +1,3 @@
-// src/client/createClient.ts
-
 import {
   createDirectus,
   rest,
@@ -11,11 +9,13 @@ import {
   deleteItem,
   uploadFiles,
   readSingleton,
-  readFieldsByCollection
+  readFieldsByCollection,
+  type DirectusClient
 } from '@directus/sdk';
 
 export interface MeeoviDirectusClient<Schema> {
-  client: ReturnType<typeof createDirectus<Schema>>;
+  client: DirectusClient<Schema>;
+  request: any;
   readItem: typeof readItem;
   readItems: typeof readItems;
   createItem: typeof createItem;
@@ -33,6 +33,7 @@ export function createMeeoviDirectusClient<Schema>(url: string): MeeoviDirectusC
 
   return {
     client,
+    request: client.request,
     readItem,
     readItems,
     createItem,

package/src/generators/form-engine.ts

@@ -1,17 +1,26 @@
 import type { DirectusField } from '../schema/types';
 import { widgetRegistry } from './widget-registry';
 
+export interface FormEngineOptions {
+  clearOnSuccess?: boolean;
+  onSuccess?: () => void;
+  onError?: (msg: string) => void;
+}
+
 export interface GeneratedFormField {
   key: string;
   widget: string;
   type: string;
   options?: Record<string, any>;
-  fields?: GeneratedFormField[]; // for repeater/group
+  fields?: GeneratedFormField[];
   isRepeatable?: boolean;
   isFile?: boolean;
   isRelational?: boolean;
 }
 
+/**
+ * Convert a Directus field into a UI-ready form field schema.
+ */
 export function generateFormField(field: DirectusField): GeneratedFormField {
   const widget = widgetRegistry[field.interface || 'input'];
 
@@ -25,15 +34,11 @@ export function generateFormField(field: DirectusField): GeneratedFormField {
     isRelational: widget.isRelational
   };
 
-  // Handle repeater (nested fields)
-  if (field.interface === 'repeater' && field.options?.fields) {
-    base.fields = field.options.fields.map((sub: any) =>
-      generateFormField(sub)
-    );
-  }
-
-  // Handle group
-  if (field.interface === 'group' && field.options?.fields) {
+  // Repeater or group fields contain nested fields
+  if (
+    (field.interface === 'repeater' || field.interface === 'group') &&
+    Array.isArray(field.options?.fields)
+  ) {
     base.fields = field.options.fields.map((sub: any) =>
       generateFormField(sub)
     );
@@ -42,8 +47,114 @@ export function generateFormField(field: DirectusField): GeneratedFormField {
   return base;
 }
 
-export function generateFormSchema(fields: DirectusField[]) {
+/**
+ * Convert an entire collection's fields into a form schema.
+ */
+export function generateFormSchema(fields: DirectusField[]): GeneratedFormField[] {
   return fields
     .filter(f => f.interface !== 'presentation' && f.interface !== 'divider')
     .map(generateFormField);
 }
+
+/**
+ * Framework-agnostic form engine for submitting Directus items.
+ */
+export function createFormEngine(
+  collectionName: string,
+  fields: DirectusField[],
+  directusClient: any,
+  opts?: FormEngineOptions
+) {
+  const form: Record<string, any> = {};
+  let error: string | null = null;
+  let success: string | null = null;
+
+  /**
+   * Validate a single field using Directus validation metadata.
+   */
+  const validateField = (field: DirectusField): string | null => {
+    if (!field.validation) return null;
+
+    try {
+      const validation = field.validation;
+
+      if (validation._and) {
+        for (const rule of validation._and) {
+          const fieldName = Object.keys(rule)[0];
+          if (!fieldName) continue;
+
+          const ruleDef = (rule as any)[fieldName];
+
+          if (ruleDef?._regex) {
+            const regex = new RegExp(ruleDef._regex);
+            const value = String(form[field.field] ?? '');
+
+            if (!regex.test(value)) {
+              return field.validation_message || `${field.field} failed validation`;
+            }
+          }
+        }
+      }
+    } catch {
+      return `Validation error for ${field.field}`;
+    }
+
+    return null;
+  };
+
+  /**
+   * Validate all fields before submission.
+   */
+  const validate = () => {
+    error = null;
+
+    for (const field of fields) {
+      const result = validateField(field);
+      if (result) {
+        error = result;
+        opts?.onError?.(result);
+        return false;
+      }
+    }
+
+    return true;
+  };
+
+  /**
+   * Submit the form to Directus.
+   */
+  const submit = async () => {
+    if (!validate()) return { error, success };
+
+    const result = await directusClient.request(
+      directusClient.createItem(collectionName, form)
+    );
+
+    if (result?.error) {
+      error = result.error.message;
+      opts?.onError?.(error as any);
+      return { error, success };
+    }
+
+    success = `${collectionName} created successfully`;
+
+    if (opts?.clearOnSuccess) {
+      for (const key of Object.keys(form)) delete form[key];
+    }
+
+    opts?.onSuccess?.();
+
+    return { error, success };
+  };
+
+  return {
+    form,
+    submit,
+    get error() {
+      return error;
+    },
+    get success() {
+      return success;
+    }
+  };
+}

package/tsconfig.json

@@ -7,7 +7,9 @@
     "module": "ESNext",
     "target": "ESNext",
     "strict": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "skipLibCheck": true, 
+    "noEmitOnError": false
   },
   "include": ["src"]
 }