feat: conditionals operations for dialog objects (#86)

* feat: add conditional functions to dialog

* feat: add conditions implementation

* fix: missing tabs schema

* fix: types for component function

* feat: type conditions operations

* refactor: move utils to types folder

* refactor: move types to new files

* feat: add new conditional operators

Signed-off-by: Francisco Madeira <francisco.madeira@diconium.com>

* chore: setup paths test

* chore: deprecate rollup plugin

* chore: add alias to vitecondig

* fix: add correct type to select

* chore: add changesets for publish

* fix: add all node paths to Operators field

Signed-off-by: Francisco Madeira <francisco.madeira@diconium.com>

---------

Signed-off-by: Francisco Madeira <francisco.madeira@diconium.com>

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.3/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/lucky-ads-jam.md

@@ -0,0 +1,6 @@
+---
+'@ethereal-nexus/vite-plugin-ethereal-nexus': minor
+'@ethereal-nexus/core': minor
+---
+
+Updated libraries to support the conditionals behavior for dialogs.

.changeset/tiny-mayflies-yawn.md

@@ -0,0 +1,5 @@
+---
+'@ethereal-nexus/core': patch
+---
+
+fix type inference for select schema

examples/vite-react-ts/package.json

@@ -11,10 +11,10 @@
     "build+publish": "vite build && ethereal publish --all"
   },
   "dependencies": {
+    "@ethereal-nexus/conector-aem-react": "workspace:*",
+    "@ethereal-nexus/core": "workspace:*",
     "@r2wc/react-to-web-component": "^2.0.3",
     "@szhsin/react-accordion": "^1.2.3",
-    "@ethereal-nexus/core": "workspace:*",
-    "@ethereal-nexus/conector-aem-react": "workspace:*",
     "react": "^18.3.0",
     "react-dom": "^18.3.0"
   },
@@ -24,7 +24,7 @@
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.1.0",
-    "typescript": "^5.0.2",
-    "vite": "^4.3.9"
+    "typescript": "^5.6.2",
+    "vite": "^5.4.4"
   }
 }

examples/vite-react-ts/src/components/ReactHelloWorld/ReactHelloWorld.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
 import {
+  checkbox,
   component,
   dialog,
   dynamic,
   type GetServerSideProps, hidden,
   image, multifield, object,
   optional,
-  type Output, pathbrowser, rte,
+  type Output, pathbrowser, rte, select,
   text
 } from '@ethereal-nexus/core';
 
-import { Item } from '../../patterns';
+import { Item } from '@/patterns';
 import { Parsys } from '@ethereal-nexus/conector-aem-react';
-import { titles } from '../../dialogs/titles.ts';
+import { titles } from '@/dialogs/titles.ts';
 
 import styles from './ReactHelloWorld.module.css';
 
@@ -39,7 +40,24 @@ const dialogSchema = dialog({
       type: 'string'
     })
   ),
+  checkbox: checkbox({
+    label: 'Show Links'
+  }),
   rich: rteComponent,
+  select: select({
+    label: 'Select',
+    multiple: true,
+    values: [
+      {
+        value: 'foo',
+        label: 'Foo'
+      },
+      {
+        value: 'bar',
+        label: 'Bar'
+      }
+    ]
+  }),
   banners: multifield({
     label: 'Banners',
     children: object({
@@ -67,6 +85,18 @@ const dialogSchema = dialog({
       image: true,
       imagetwo: true,
     },
+  })
+  .conditions({
+    subtitle: ({ eq, or }) => or(
+      eq('title', 'foo'),
+      eq('title', 'bar'),
+    ),
+    banners: {
+      link: ({ eq, and, exists }) => and(
+        eq('checkbox', true),
+        exists('banners'),
+      )
+    }
   });
 
 const dynamicSlots = {

examples/vite-react-ts/tsconfig.json

@@ -18,7 +18,10 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

examples/vite-react-ts/tsconfig.node.json

@@ -4,7 +4,10 @@
     "skipLibCheck": true,
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["vite.config.ts"]
 }

examples/vite-react-ts/vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import ethereal from '@ethereal-nexus/vite-plugin-ethereal-nexus';
 import react from '@vitejs/plugin-react';
+import * as path from 'node:path';
 
 export default defineConfig({
   plugins: [
@@ -28,4 +29,9 @@ export default defineConfig({
     outDir: 'build',
     minify: true
   },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
 })

lib/connector-aem-react/package.json

@@ -21,13 +21,13 @@
   "module": "dist/index.esm.js",
   "types": "./dist/index.d.mts",
   "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "tsup": "^8.0.2",
-    "typescript": "^5.4.5",
-    "@types/react":  "^18.3.0",
-    "@types/react-dom":  "^18.3.0"
+    "typescript": "^5.6.2"
   },
   "dependencies": {
-    "react-dom": "^18.3.0",
-    "react": "^18.3.1"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.0"
   }
 }

lib/core/package.json

@@ -29,7 +29,7 @@
     "@types/react": "^18.3.0",
     "react": "^18.3.1",
     "tsup": "^8.0.2",
-    "typescript": "^5.4.5"
+    "typescript": "^5.6.2"
   },
   "dependencies": {
     "@r2wc/react-to-web-component": "^2.0.3"

lib/core/src/functions/component/component.ts

@@ -3,15 +3,15 @@ import { ObjectEntries, ObjectOutput, SlotEntries } from '../../types/object';
 import { DialogSchema } from '../../schema/dialog';
 import { WebcomponentPropTypes } from '../../types/webcomponent';
 
-export interface ComponentSchema<TEntries extends ObjectEntries, TSlots extends SlotEntries, TOutput = ObjectOutput<TEntries & TSlots>> extends BaseSchema<TOutput>, Partial<ComponentModel> {
+export interface ComponentSchema<TEntries extends ObjectEntries, TSlots extends SlotEntries | undefined> extends BaseSchema<ObjectOutput<TEntries & TSlots>>, Partial<ComponentModel> {
   type: 'component';
-  dialog: Omit<DialogSchema<TEntries>, 'tabs'>;
+  dialog: DialogSchema<TEntries>;
   slots?: TSlots,
 }
 
-export function component<TEntries extends ObjectEntries, TSlots extends SlotEntries>(
+export function component<TEntries extends ObjectEntries, TSlots extends SlotEntries | undefined>(
   config: Partial<ComponentModel>,
-  dialog: Omit<DialogSchema<TEntries>, 'tabs'>,
+  dialog: DialogSchema<TEntries>,
   slots?: TSlots,
 ): ComponentSchema<TEntries, TSlots> {
 

lib/core/src/schema/dialog/condition.ts

@@ -0,0 +1,50 @@
+import { NestedPaths } from '../../types';
+import { ConditionFn, ConditionOperators, Conditions, Field } from './types';
+import { ObjectEntries } from '../../types/object';
+
+function addConditionToField(fields: Field[], path: string, condition: Conditions): void {
+  const keys = path.split('.');
+  let currentFields = fields;
+
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+    const field = currentFields.find(f => f.id === key);
+
+    if (!field) {
+      throw new Error(`Field with id "${key}" not found`);
+    }
+
+    if (i === keys.length - 1) {
+      field.condition = condition;
+    } else {
+      if (!field.children) {
+        throw new Error(`Field with id "${key}" has no children`);
+      }
+      currentFields = field.children;
+    }
+  }
+}
+
+export class Condition<TEntries extends ObjectEntries> {
+  private conditions = new Map<string, Conditions>();
+
+  addCondition(field: NestedPaths<TEntries>, condition: ConditionFn<TEntries>) {
+    const operators: ConditionOperators<TEntries> = {
+      eq: (field, value) => ({ operator: 'eq', field, value }),
+      neq: (field, value) => ({ operator: 'neq', field, value }),
+      exists: (field) => ({ operator: 'exists', field }),
+      and: (...operations) => ({ operator: 'and', value: operations }),
+      or: (...operations) => ({ operator: 'or', value: operations })
+    };
+
+    this.conditions.set(field, condition(operators));
+  }
+
+  parse(entries: Field[]) {
+    for (let [key, value] of this.conditions) {
+      addConditionToField(entries, key, value)
+    }
+
+    return entries;
+  }
+}