@tari-project/tari-extension-query-builder 0.0.4

package/src/xy-theme.css

@@ -0,0 +1,144 @@
+/* xyflow theme files. Delete these to start from our base */
+
+.react-flow {
+  /* Custom Variables */
+  /* --xy-theme-selected: #f57dbd; */
+  /* --xy-theme-hover: #c5c5c5; */
+  --xy-theme-edge-hover: black;
+  --xy-theme-color-focus: #e8e8e8;
+
+  /* Built-in Variables see https://reactflow.dev/learn/customization/theming */
+  --xy-node-border-default: 1px solid #ededed;
+
+  --xy-node-boxshadow-default:
+    0px 3.54px 4.55px 0px #00000005, 0px 3.54px 4.55px 0px #0000000d, 0px 0.51px 1.01px 0px #0000001a;
+
+  --xy-node-border-radius-default: 8px;
+
+  /* --xy-handle-background-color-default: #ffffff; */
+  /* --xy-handle-border-color-default: #aaaaaa; */
+
+  /* --xy-edge-label-color-default: #505050; */
+}
+
+.react-flow.dark {
+  --xy-node-boxshadow-default:
+    0px 3.54px 4.55px 0px rgba(255, 255, 255, 0.05), 0px 3.54px 4.55px 0px rgba(255, 255, 255, 0.13),
+    0px 0.51px 1.01px 0px rgba(255, 255, 255, 0.2);
+  --xy-theme-edge-hover: white;
+  --xy-theme-color-focus: #535353;
+}
+
+/* Customizing Default Theming */
+
+.react-flow__node {
+  box-shadow: var(--xy-node-boxshadow-default);
+  border-radius: var(--xy-node-border-radius-default);
+  background-color: var(--xy-node-background-color-default);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 10px;
+  font-size: 12px;
+  flex-direction: column;
+  border: var(--xy-node-border-default);
+  color: var(--xy-node-color, var(--xy-node-color-default));
+}
+
+.react-flow__node.selectable:focus {
+  box-shadow: 0px 0px 0px 4px var(--xy-theme-color-focus);
+  border-color: #d9d9d9;
+}
+
+.react-flow__node.selectable:focus:active {
+  box-shadow: var(--xy-node-boxshadow-default);
+}
+
+.react-flow__node.selectable:hover,
+.react-flow__node.draggable:hover {
+  border-color: var(--xy-theme-hover);
+}
+
+.react-flow__node.selectable.selected {
+  border-color: var(--xy-theme-selected);
+  box-shadow: var(--xy-node-boxshadow-default);
+}
+
+.react-flow__node-group {
+  background-color: rgba(207, 182, 255, 0.4);
+  border-color: #9e86ed;
+}
+
+.react-flow__edge.selectable:hover .react-flow__edge-path,
+.react-flow__edge.selectable.selected .react-flow__edge-path {
+  stroke: var(--xy-theme-edge-hover);
+}
+
+/** enter-connection start */
+.enter-connection.react-flow__handle {
+  background-color: var(--xy-handle-background-color-default);
+  width: 17px;
+  height: 17px;
+  border-radius: 0;
+  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+}
+/** enter-connection end */
+
+/** exit-connection start */
+.exit-connection.react-flow__handle {
+  background-color: var(--xy-handle-background-color-default);
+  width: 17px;
+  height: 17px;
+  border-radius: 0;
+  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+}
+/** exit-connection end */
+
+.react-flow__handle {
+  background-color: var(--xy-handle-background-color-default);
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+}
+
+.react-flow__handle.connectionindicator:hover {
+  pointer-events: all;
+  border-color: var(--xy-theme-edge-hover);
+  background-color: white;
+}
+
+.react-flow__handle.connectionindicator:focus,
+.react-flow__handle.connectingfrom,
+.react-flow__handle.connectingto {
+  border-color: var(--xy-theme-edge-hover);
+}
+
+.react-flow__handle.connectingto {
+  background: #ff6060;
+}
+
+.react-flow__handle.valid {
+  background: #55dd99;
+}
+
+.react-flow__node-resizer {
+  border-radius: 0;
+  border: none;
+}
+
+.react-flow__resize-control.handle {
+  background-color: #ffffff;
+  border-color: #9e86ed;
+  border-radius: 0;
+  width: 5px;
+  height: 5px;
+}
+
+path.react-flow__edge-path {
+  stroke-width: 4;
+}
+
+path.react-flow__edge-path:hover {
+  stroke-width: 10;
+}

package/tsconfig.app.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" },
+    { "path": "./tsconfig.lib.json" },
+    { "path": "../tari-extension-common" }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true, // Generate .d.ts files
+    "declarationMap": true, // Optional: Include source maps for .d.ts files
+    "emitDeclarationOnly": true, // Only emit type declarations
+    "noEmit": false, // Ensure TypeScript actually outputs files
+    "skipLibCheck": true,
+    "stripInternal": true // Optional: Remove @internal types from .d.ts
+  },
+  "include": ["src"]
+}

package/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,35 @@
+import path from "path";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import dts from "vite-plugin-dts";
+
+const isLibrary = process.env.BUILD_LIB === "true";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss(), isLibrary && dts({ tsconfigPath: "tsconfig.lib.json" })].filter(Boolean),
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  build: isLibrary
+    ? {
+        lib: {
+          entry: path.resolve(__dirname, "src/index.ts"),
+          name: "TariExtensionQueryBuilderLibrary",
+          fileName: (format) => `tari-extension-query-builder.${format}.js`,
+        },
+        rollupOptions: {
+          external: ["react", "react-dom", "react-flow-renderer"],
+          output: {
+            globals: {
+              react: "React",
+              "react-dom": "ReactDOM",
+              "react-flow-renderer": "ReactFlowRenderer",
+            },
+          },
+        },
+      }
+    : undefined,
+});