Merge pull request #3 from waldiez/dev

Dev

.github/workflows/main.yaml

@@ -1,13 +1,14 @@
 ---
 name: Lint, test, and docs
-    
+
 # yamllint disable rule:truthy
 on:
   push:
     branches:
       - main
-      - dev
   pull_request:
+    branches:
+      - main
 
 permissions:
   contents: write
@@ -33,7 +34,7 @@ jobs:
         - name: Install dependencies
           run: bun install
         - name: Prepare Playwright
-          run: npx playwright install
+          run: npx playwright install --with-deps chromium
         - name: Run tests
           run: bun run test:all
         - name: Report to Coveralls
@@ -68,16 +69,4 @@ jobs:
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4
-
-  # upload-to-nmp:
-  #   if: github.event_name == 'push' && github.ref == 'refs/heads/main'
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - uses: actions/checkout@v4
-  #     - uses: oven-sh/setup-bun@v2
-  #     - name: Install dependencies
-  #       run: bun install
-  #     - name: Publish to NPM
-  #       run: bun run publish
-  #       env:
-  #         NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+

.github/workflows/publish.yaml

@@ -0,0 +1,26 @@
+---
+name: Publish to NPM
+
+# yamllint disable rule:truthy
+on:
+  release:
+    types: [created]
+permissions:
+    contents: write
+    id-token: write
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup bun
+        uses: oven-sh/setup-bun@v2
+      - name: Install dependencies
+        run: bun install
+      - name: Build
+        run: bun build:lib
+      - name: Publish to NPM
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: bun publish

.github/workflows/release.yaml

@@ -0,0 +1,19 @@
+---
+name: Release
+
+# yamllint disable rule:truthy
+on:
+  push:
+    tags:
+      - "v[0-9]+.[0-9]+.[0-9]+"
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Create GitHub release
+        uses: Roang-zero1/github-create-release-action@v3
+        with:
+          version_regex: ^v[[:digit:]]+\.[[:digit:]]+\.[[:digit:]]+
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.npmrc

@@ -0,0 +1,3 @@
+//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}
+registry=https://registry.npmjs.org/
+always-auth=true

CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## v0.1.0
+
+- Initial release

README.md

@@ -6,3 +6,158 @@
 
 - Node.js
 - [email protected]
+
+## Libraries
+
+```json
+{
+    "@monaco-editor/react": "^4.6.0",
+    "@xyflow/react": "^12.3.2",
+    "bun-types": "^1.1.32",
+    "nanoid": "^5.0.7",
+    "rc-slider": "^11.1.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.1.2",
+    "react-icons": "^5.3.0",
+    "react-select": "^5.8.1",
+    "zustand": "^5.0.0"
+}
+```
+
+## Usage
+
+```tsx
+import { Waldie } from '@waldiez';
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+const isProd = import.meta.env.PROD;
+
+// the actions should be handled by other components
+// that use `Waldie` as a child component
+
+/**
+ *OnChange
+ */
+const onChange = null;
+// const onChange = (flowJson: any) => {
+//     console.info(JSON.stringify(JSON.parse(flowJson), null, 2));
+// };
+
+/**
+ * UserInput
+ */
+// to check/test the user input, use `onUserInput` and `inputPrompt`
+// reset `inputPrompt` to `null` to remove/hide the modal
+// these two props are used to show a modal to the user
+// and get the user input
+// Example:
+//
+// const [ inputPrompt, setInputPrompt ] = useState<{
+//   previousMessages: string[];
+//   prompt: string;
+// } | null>(null);
+//
+// const onUserInput = (input: string) => {
+//   const allMessages = input.split('\n');
+//   const previousMessages = allMessages.slice(0, allMessages.length - 1);
+//   const prompt = allMessages[allMessages.length - 1];
+//   setInputPrompt({ previousMessages, prompt });
+// };
+
+// const inputPrompt = {
+//   previousMessages: ['Hello, World!', 'How\n are you?'],
+//   prompt: 'What is your name?'
+// };
+// const onUserInput = (input: string) => {
+//   console.info(input);
+// };
+const inputPrompt = null;
+const onUserInput = null;
+
+/**
+ * OnRun
+ * adds a button to the main panel, to run the code.
+ * The action should be handled by the parent component
+ * "running" the flow happens in the python part / backend
+ * the flow string is the JSON stringified flow
+ */
+const onRunDev = (flowString: string) => {
+  console.info(flowString);
+};
+const onRun = isProd ? null : onRunDev;
+
+/**
+ * OnUpload
+ * on RAG user: adds a dropzone to upload files
+ * when triggered, the files are sent to the backend,
+ * returning the paths of the uploaded files
+ * and the 'docsPath' in RAG retrieveConfig is updated.
+ * the paths can be either relative or absolute,
+ * this depends on how we run the flow
+ * (the docsPath will have to be updated accordingly if needed on the backend)
+ */
+const onUploadDev = (files: File[]) => {
+  return new Promise<string[]>(resolve => {
+    const uploadedFiles: string[] = [];
+    const promises = files.map(file => {
+      // simulate uploading files
+      return new Promise<string>(resolve => {
+        setTimeout(() => {
+          uploadedFiles.push(`path/to/${file.name}`);
+          resolve(`path/to/${file.name}`);
+        }, 2000);
+      });
+    });
+    Promise.all(promises).then(() => {
+      resolve(uploadedFiles);
+    });
+  });
+};
+const onUpload = isProd ? null : onUploadDev;
+
+/**
+ * Monaco Editor
+ */
+// DEV: downloaded in `public/vs` folder (.gitignored)
+// PROD:
+//  either served and `VITE_VS_PATH` is set to the path, or
+//  use the default cdn (jsdelivr) that monaco loader uses
+const vsPath = isProd ? (import.meta.env.VS_PATH ?? null) : 'vs';
+/**
+ * Other props:
+ *  we can use:
+ * `{ import importFlow } from '@waldiez';`
+ *  to import a flow from a waldiez/json file
+ *  then we can pass the additional props:
+ *    - edges: Edge[];  initial edges to render
+ *    - nodes: Node[];  initial nodes to render
+ *    - name: string;
+ *    - description: string;
+ *    - tags: string[];
+ *    - requirements: string[];
+ *    - createdAt?: string;
+ *    - updatedAt?: string;
+ */
+
+const startApp = () => {
+  ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+      <Waldie
+        monacoVsPath={vsPath}
+        onUserInput={onUserInput}
+        flowId="flow-0"
+        storageId="storage-0"
+        inputPrompt={inputPrompt}
+        onRun={onRun}
+        onChange={onChange}
+        onUpload={onUpload}
+      />
+    </React.StrictMode>
+  );
+};
+
+startApp();
+```

package.json

@@ -1,8 +1,8 @@
 {
     "name": "@waldiez/react",
-    "private": true,
+    "private": false,
     "license": "MIT",
-    "version": "0.0.1",
+    "version": "0.1.0",
     "type": "module",
     "main": "./dist/@waldiez.umd.cjs",
     "module": "./dist/@waldiez.js",
@@ -70,7 +70,7 @@
     "dependencies": {
         "@monaco-editor/react": "^4.6.0",
         "@xyflow/react": "^12.3.2",
-        "bun-types": "^1.1.31",
+        "bun-types": "^1.1.32",
         "nanoid": "^5.0.7",
         "rc-slider": "^11.1.7",
         "react": "^18.3.1",
@@ -90,13 +90,13 @@
         "@trivago/prettier-plugin-sort-imports": "^4.3.0",
         "@types/eslint__js": "^8.42.3",
         "@types/gunzip-maybe": "^1.4.2",
-        "@types/jest": "^29.5.13",
+        "@types/jest": "^29.5.14",
         "@types/jest-image-snapshot": "^6.4.0",
-        "@types/react": "^18.3.11",
+        "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
         "@types/tar-fs": "^2.0.4",
-        "@typescript-eslint/eslint-plugin": "^8.10.0",
-        "@typescript-eslint/parser": "^8.10.0",
+        "@typescript-eslint/eslint-plugin": "^8.11.0",
+        "@typescript-eslint/parser": "^8.11.0",
         "@vitejs/plugin-react": "^4.3.3",
         "@vitest/browser": "^2.1.3",
         "@vitest/coverage-v8": "^2.1.3",
@@ -128,12 +128,12 @@
         "tsx": "^4.19.1",
         "typedoc": "^0.26.10",
         "typescript": "^5.6.3",
-        "typescript-eslint": "^8.10.0",
-        "vite": "^5.4.9",
-        "vite-plugin-dts": "^4.2.4",
+        "typescript-eslint": "^8.11.0",
+        "vite": "^5.4.10",
+        "vite-plugin-dts": "^4.3.0",
         "vite-plugin-externalize-deps": "^0.8.0",
         "vitest": "^2.1.3",
-        "vitest-browser-react": "^0.0.1"
+        "vitest-browser-react": "^0.0.3"
     },
     "prettier": {
         "plugins": [
@@ -168,5 +168,8 @@
             "^@waldiez/"
         ]
     },
-    "packageManager": "[email protected]"
+    "packageManager": "[email protected]",
+    "publishConfig": {
+        "access": "public"
+    }
 }

schema.json

@@ -1,5 +1,5 @@
 {
-  "$id": "https://github.com/waldiez/react/tree/v0.0.1/schema.json",
+  "$id": "https://github.com/waldiez/react/tree/v0.1.0/schema.json",
   "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {

src/index.tsx

@@ -6,15 +6,6 @@ import ReactDOM from 'react-dom/client';
 
 const isProd = import.meta.env.PROD;
 
-/**
- * Monaco Editor
- */
-// DEV: downloaded in `public/vs` folder (.gitignored)
-// PROD:
-//  either served and `VITE_VS_PATH` is set to the path, or
-//  use the default cdn (jsdelivr) that monaco loader uses
-const vsPath = isProd ? (import.meta.env.VS_PATH ?? null) : 'vs';
-
 // the actions should be handled by other components
 // that use `Waldie` as a child component
 
@@ -33,6 +24,20 @@ const onChange = null;
 // reset `inputPrompt` to `null` to remove/hide the modal
 // these two props are used to show a modal to the user
 // and get the user input
+// Example:
+//
+// const [ inputPrompt, setInputPrompt ] = useState<{
+//   previousMessages: string[];
+//   prompt: string;
+// } | null>(null);
+//
+// const onUserInput = (input: string) => {
+//   const allMessages = input.split('\n');
+//   const previousMessages = allMessages.slice(0, allMessages.length - 1);
+//   const prompt = allMessages[allMessages.length - 1];
+//   setInputPrompt({ previousMessages, prompt });
+// };
+
 // const inputPrompt = {
 //   previousMessages: ['Hello, World!', 'How\n are you?'],
 //   prompt: 'What is your name?'
@@ -83,6 +88,15 @@ const onUploadDev = (files: File[]) => {
   });
 };
 const onUpload = isProd ? null : onUploadDev;
+
+/**
+ * Monaco Editor
+ */
+// DEV: downloaded in `public/vs` folder (.gitignored)
+// PROD:
+//  either served and `VITE_VS_PATH` is set to the path, or
+//  use the default cdn (jsdelivr) that monaco loader uses
+const vsPath = isProd ? (import.meta.env.VS_PATH ?? null) : 'vs';
 /**
  * Other props:
  *  we can use:
@@ -98,6 +112,7 @@ const onUpload = isProd ? null : onUploadDev;
  *    - createdAt?: string;
  *    - updatedAt?: string;
  */
+
 export const startApp = () => {
   ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>