Split directive files in graphql-config

packages/graphql-config/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@fabrix-framework/graphql-config",
   "private": false,
+  "type": "module",
   "version": "0.1.0",
   "description": "GraphQL configuration for fabrix",
   "exports": {
@@ -21,19 +22,22 @@
     "build": "tsup",
     "lint": "eslint '**/*.{ts,tsx}' --ignore-pattern 'dist/*' --max-warnings=0",
     "type-check": "tsc --noEmit --incremental --pretty",
-    "test": "exit 0"
+    "test": "vitest run"
   },
   "dependencies": {
     "graphql": "^16.9.0"
   },
   "devDependencies": {
+    "@fabrix-framework/eslint-config": "workspace:*",
+    "@fabrix-framework/prettier-config": "workspace:*",
     "@types/node": "^22.7.5",
     "eslint": "^9.6.0",
+    "memfs": "^4.14.0",
     "prettier": "^3.3.3",
     "tsup": "^8.1.0",
     "typescript": "^5.5.3",
-    "@fabrix-framework/eslint-config": "workspace:*",
-    "@fabrix-framework/prettier-config": "workspace:*"
+    "vite-plugin-graphql-loader": "^4.0.4",
+    "vitest": "^2.0.3"
   },
   "prettier": "@fabrix-framework/prettier-config"
 }

packages/graphql-config/src/config.test.ts

@@ -0,0 +1,25 @@
+import { vol } from "memfs";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { generateConfig } from "./config";
+
+vi.mock("node:fs", async () => {
+  const { fs } = await vi.importActual("memfs");
+  return fs;
+});
+vi.mock("node:os", () => ({
+  tmpdir: () => "/tmp",
+}));
+
+beforeEach(() => {
+  vol.fromJSON({
+    "/tmp": null,
+  });
+});
+
+describe("generateConfig", () => {
+  test("should generate a config", () => {
+    const filePath = generateConfig();
+    const dirs = vol.toJSON();
+    expect(dirs[filePath.directiveSchema]).not.toHaveLength(0);
+  });
+});

packages/graphql-config/src/config.ts

@@ -1,12 +1,14 @@
 import * as os from "node:os";
 import * as path from "node:path";
 import * as fs from "node:fs";
-import Document from "./directive.graphql";
+import { print } from "graphql";
+import { schemaDefinition } from "./schema";
 
 export const generateConfig = () => {
   const tempGQLFile = path.join(os.tmpdir(), "fabrix-graphql-config.graphql");
+  const content = schemaDefinition.definitions.map(print).join("\n");
 
-  fs.writeFileSync(tempGQLFile, Document);
+  fs.writeFileSync(tempGQLFile, content);
 
   return {
     directiveSchema: tempGQLFile,

packages/graphql-config/src/graphql.d.ts

@@ -1,4 +1,4 @@
 declare module "*.graphql" {
-  const Document: string;
+  const Document: import("graphql").DocumentNode;
   export default Document;
 }

packages/graphql-config/src/schema.ts

@@ -1,4 +1,15 @@
-import { parse } from "graphql";
-import Document from "./directive.graphql";
+import { DocumentNode, Kind } from "graphql";
+import CommonSchema from "./schema/common.graphql";
+import ViewDirectiveSchema from "./schema/view.graphql";
+import FormDirectiveSchema from "./schema/form.graphql";
 
-export const schemaDefinition = parse(Document);
+const mergeDocumentNodes = (docs: DocumentNode[]) => ({
+  kind: Kind.DOCUMENT,
+  definitions: docs.flatMap((doc) => doc.definitions),
+});
+
+export const schemaDefinition = mergeDocumentNodes([
+  CommonSchema,
+  ViewDirectiveSchema,
+  FormDirectiveSchema,
+]);

packages/graphql-config/src/schema/common.graphql

@@ -0,0 +1,23 @@
+input FabrixComponentType {
+  """
+  Component name to render the field
+  """
+  name: String!
+
+  """
+  Component props
+  """
+  props: [FabrixComponentProps]
+}
+
+input FabrixComponentProps {
+  """
+  The property name for the component
+  """
+  name: String!
+
+  """
+  The value for the property
+  """
+  value: String!
+}

packages/graphql-config/src/schema/form.graphql

@@ -0,0 +1,55 @@
+input FabrixFormFieldConfig {
+  """
+  The number of grid columns the field (max: 12)
+  """
+  gridCol: Int
+
+  """
+  The 0-based index of the field
+  """
+  index: Int
+
+  """
+  The label of the field on UI
+  """
+  label: String
+
+  """
+  Placeholder text for the field
+  """
+  placeholder: String
+
+  """
+  Hide the field on UI
+  """
+  hidden: Boolean
+
+  """
+  The default value for the field
+
+  The value will automatically be converted to the type of the field
+  """
+  defaultValue: String
+
+  """
+  The component to render for the field
+  """
+  componentType: FabrixComponentType
+}
+
+input FabrixFormField {
+  """
+  The field name in the schema
+  """
+  field: String!
+
+  """
+  The configuration for the field
+  """
+  config: FabrixFormFieldConfig!
+}
+
+"""
+Fabrix directive for form
+"""
+directive @fabrixForm(input: [FabrixFormField!]) on FIELD

packages/graphql-config/src/schema/view.graphql

@@ -0,0 +1,43 @@
+input FabrixViewConfig {
+  """
+  The number of grid columns the field (max: 12)
+  """
+  gridCol: Int
+
+  """
+  The 0-based index of the field
+  """
+  index: Int
+
+  """
+  The label of the field on UI
+  """
+  label: String
+
+  """
+  Hide the field on UI
+  """
+  hidden: Boolean
+
+  """
+  The component to render for the field
+  """
+  componentType: FabrixComponentType
+}
+
+input FabrixView {
+  """
+  The field name in the schema
+  """
+  field: String!
+
+  """
+  The configuration for the field
+  """
+  config: FabrixViewConfig!
+}
+
+"""
+Fabrix directive for fields
+"""
+directive @fabrixView(input: [FabrixView!]) on FIELD

packages/graphql-config/tsconfig.json

@@ -1,7 +1,9 @@
 {
   "compilerOptions": {
+    "target": "ES6",
     "moduleResolution": "Bundler",
     "module": "ES2015"
   },
-  "include": ["src", "tsup.config.ts"],
+  "include": ["."],
+  "exclude": ["dist", "node_modules"]
 }

packages/graphql-config/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+import graphqlLoader from "vite-plugin-graphql-loader";
+
+export default defineConfig({
+  plugins: [graphqlLoader()],
+  test: {
+    include: ["src/**/*.test.ts"],
+  },
+});