@uxf/data-grid 11.1.1 → 11.2.3

package/_generator/cli.js

@@ -8,20 +8,21 @@ Usage:
   uxf-data-grid-generator [options]
 `);
         })
-        .option("s", { alias: "schemaDirectory" })
-        .option("o", { alias: "outputDirectory" })
+        .option("s", { alias: "schemaDirectory", type: "string" })
+        .option("o", { alias: "outputDirectory", type: "string" })
+        .option("l", { alias: "requiredLoader", type: "boolean" })
         .option("h", { alias: "help", group: "Options" })
         .strict(false)
         .exitProcess(false);
 
     try {
-        const { help, schemaDirectory, outputDirectory } = cli.parse(argv.slice(2));
+        const { help, schemaDirectory, outputDirectory, requiredLoader } = cli.parse(argv.slice(2));
 
         if (Boolean(help)) {
             return 0;
         }
 
-        await require("./index")(schemaDirectory, outputDirectory);
+        await require("./index")(schemaDirectory, outputDirectory, requiredLoader);
     } catch (e) {
         console.error(e);
         return 1;

package/_generator/index.js

@@ -21,7 +21,83 @@ import json from "${schemaRelativeImport}";
 export const dataGridSchema_${camelize(gridName)}: Schema<any> = json as any;`;
 }
 
-function generate(jsonSchema, filename, outputDirectory) {
+function generateUseDataGridControl(gridName) {
+    return `import { useDataGridControl, UseDataGridControlConfig } from "@uxf/data-grid/use-data-grid-control";
+import { dataGridSchema_${camelize(gridName)} as schema } from "./schema";
+
+export function useDataGridControl_${camelize(gridName)}(config: Omit<UseDataGridControlConfig, "schema">) {
+    return useDataGridControl({
+        schema,
+        ...config,
+    });
+}
+`;
+}
+
+function generateUseDataGridFetching(gridName, isLoaderRequired) {
+    return `import { Loader } from "@uxf/data-grid/types/core";
+import { useDataGridFetching, UseDataGridFetchingConfig } from "@uxf/data-grid/use-data-grid-fetching";
+import { dataGridSchema_${camelize(gridName)} as schema } from "./schema";
+    
+export function useDataGridFetching_${camelize(gridName)}(
+    config: Omit<UseDataGridFetchingConfig, "gridName" | "loader" | "schema"> & { loader${
+        isLoaderRequired ? "" : "?"
+    }: Loader },
+) {
+    return useDataGridFetching({ gridName: "${gridName}", schema, ...config });
+}
+`;
+}
+
+function generateDataGridFile(gridName, isLoaderRequired) {
+    return `import { Nullish } from "@uxf/core/types";
+import { DataGrid, DataGridProps, DataGridUserConfig, Loader, Request } from "@uxf/data-grid";
+import { useDataGridControl } from "@uxf/data-grid/use-data-grid-control";
+import { useDataGridFetching } from "@uxf/data-grid/use-data-grid-fetching";
+import React from "react";
+import { dataGridSchema_${camelize(gridName)} as schema } from "./schema";
+
+type Props = Omit<
+    DataGridProps<any, any>,
+    "gridName" | "schema" | "state" | "actions" | "data" | "isLoading" | "onReload"
+> & {
+    loader${isLoaderRequired ? "" : "?"}: Loader;
+    initialUserConfig?: DataGridUserConfig | Nullish;
+    initialState?: Request | string | Nullish;
+};
+
+export function DataGrid_${camelize(gridName)}(props: Props) {
+    const { state, actions } = useDataGridControl({
+        schema,
+        initialState: props.initialState,
+        initialUserConfig: props.initialUserConfig,
+    });
+    
+    const { data, error, onReload, isLoading } = useDataGridFetching({
+        gridName: "${gridName}",
+        schema,
+        state,
+        loader: props.loader,
+    });
+
+    return (
+        <DataGrid<any>
+            state={state}
+            actions={actions}
+            data={data}
+            isLoading={isLoading}
+            error={error}
+            onReload={onReload}
+            {...props}
+            gridName="admin-club"
+            schema={schema}
+        />
+    );
+}
+`;
+}
+
+function generate(jsonSchema, filename, outputDirectory, isLoaderRequired) {
     const gridName = parse(filename).name;
     const generatedPath = join(process.cwd(), outputDirectory, gridName);
 
@@ -31,10 +107,14 @@ function generate(jsonSchema, filename, outputDirectory) {
         generatedSchemaFilename,
         generateSchemaFile(gridName, relative(dirname(generatedSchemaFilename), filename)),
     );
+
+    writeFile(`${generatedPath}/data-grid.tsx`, generateDataGridFile(gridName, isLoaderRequired));
+    writeFile(`${generatedPath}/use-data-grid-control.ts`, generateUseDataGridControl(gridName));
+    writeFile(`${generatedPath}/use-data-grid-fetching.ts`, generateUseDataGridFetching(gridName, isLoaderRequired));
 }
 
-module.exports = (schemaDirectory, outputDirectory) => {
+module.exports = (schemaDirectory, outputDirectory, requiredLoader) => {
     globSync(schemaDirectory + "/*.json")
         .map((path) => process.cwd() + "/" + path)
-        .forEach((filename) => generate(readFileSync(filename), filename, outputDirectory));
+        .forEach((filename) => generate(readFileSync(filename), filename, outputDirectory, requiredLoader));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/data-grid",
-  "version": "11.1.1",
+  "version": "11.2.3",
   "description": "UXF DataGrid",
   "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
   "main": "index.js",
@@ -25,6 +25,7 @@
     "dev": "next dev",
     "build": "tsc -P tsconfig.json",
     "gen:icons": "icons-gen",
+    "gen:data-grid": "node bin/uxf-data-grid-generator.js -s _generator/test/data-grid-schema -o _generator/test/data-grid --requiredLoader",
     "lint": "./node_modules/.bin/eslint -c .eslintrc.js \"./**/*.ts*\"",
     "test": "npm run-script typecheck",
     "typecheck": "tsc --noEmit --skipLibCheck"
@@ -33,6 +34,7 @@
     "@uxf/ui": "11.1.0",
     "dayjs": "1.11.10",
     "fast-glob": "^3.3.2",
+    "qs": "6.11.2",
     "react-data-grid": "7.0.0-beta.39",
     "yargs": "^17.7.2"
   },

package/use-data-grid-control/use-data-grid-control.d.ts

@@ -2,13 +2,13 @@ import { Nullish } from "@uxf/core/types";
 import { Request } from "../types/api";
 import { Schema } from "../types/schema";
 import { DataGridUserConfig } from "../types/state";
-interface Config {
+export interface UseDataGridControlConfig {
     schema: Schema<any>;
     initialState?: Request | string | Nullish;
     isDebug?: boolean;
     initialUserConfig?: DataGridUserConfig | Nullish;
 }
-export declare function useDataGridControl(config: Config): {
+export declare function useDataGridControl(config: UseDataGridControlConfig): {
     state: import("../types/state").DataGridState;
     actions: {
         changePage: (page: number) => void;
@@ -24,4 +24,3 @@ export declare function useDataGridControl(config: Config): {
     };
 };
 export type DataGridControl = ReturnType<typeof useDataGridControl>;
-export {};

package/use-data-grid-fetching/loader.d.ts

@@ -0,0 +1,2 @@
+import { Loader } from "../types/core";
+export declare const dataGridLoader: Loader;

package/use-data-grid-fetching/loader.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dataGridLoader = void 0;
+const qs_1 = require("qs");
+const dataGridLoader = (gridName, request) => {
+    return fetch(`/api/cms/datagrid/${gridName}?${(0, qs_1.stringify)(request)}`).then((response) => response.json());
+};
+exports.dataGridLoader = dataGridLoader;

package/use-data-grid-fetching/use-data-grid-fetching.d.ts

@@ -12,11 +12,11 @@ export interface DataGridFetchingResult<Row> {
     data: Response<Row> | null;
     onReload: () => void;
 }
-interface Config {
-    loader: Loader;
+export interface UseDataGridFetchingConfig {
+    loader?: Loader;
     schema: Schema<any>;
     gridName: string;
     state: DataGridControl["state"];
 }
-export declare function useDataGridFetching(config: Config): DataGridFetchingResult<any>;
+export declare function useDataGridFetching(config: UseDataGridFetchingConfig): DataGridFetchingResult<any>;
 export {};

package/use-data-grid-fetching/use-data-grid-fetching.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDataGridFetching = void 0;
 const react_1 = require("react");
 const utils_1 = require("../utils");
+const loader_1 = require("./loader");
 function useDataGridFetching(config) {
-    const { state, schema, loader, gridName } = config;
+    const { state, schema, loader = loader_1.dataGridLoader, gridName } = config;
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
     const [data, setData] = (0, react_1.useState)(null);