Accept variables from Omnibar in workflow steps (#97)

Bump to v1 🎉 - potential breaking changes below!

## Features
- Add arguments support for workflows

## Updates
- Update autocomplete-js to 1.7.4
- Refactor creation of Autocomplete 
- Changed the Autocomplete component to use @algolia/core for more control
- Added styling for inputs and buttons in core components
- Updated workflow-source, settings-source and math-source to work with the new autocomplete component, added descriptions

package.json

@@ -3,9 +3,12 @@
   "version": "0.11.0",
   "private": true,
   "dependencies": {
-    "@algolia/autocomplete-js": "^1.7.1",
+    "@algolia/autocomplete-core": "^1.7.4",
+    "@algolia/autocomplete-js": "^1.7.4",
     "@algolia/autocomplete-theme-classic": "^1.7.1",
     "@radix-ui/colors": "^0.1.8",
+    "@radix-ui/react-icons": "^1.1.1",
+    "@radix-ui/react-popover": "^1.0.2",
     "@radix-ui/react-tabs": "^0.1.5",
     "@stitches/react": "^1.2.7",
     "@tauri-apps/api": "^1.1.0",
@@ -56,6 +59,6 @@
   },
   "devDependencies": {
     "@hookform/devtools": "^4.0.2",
-    "@tauri-apps/cli": "^1.1.1"
+    "@tauri-apps/cli": "^1.2.2"
   }
 }

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "brancato"
-version = "0.11.0"
+version = "1.0.0"
 description = "A tool for stage-managing your life"
 authors = ["Ryan Killeen"]
 license = ""

src-tauri/src/main.rs

@@ -11,7 +11,7 @@ use app_config::{set_custom_user_config_path, AppConfig};
 use auto_launch::{AutoLaunch, AutoLaunchBuilder};
 use rayon::prelude::*;
 use serde::Serialize;
-use std::{path::PathBuf, sync::Mutex};
+use std::{collections::HashMap, path::PathBuf, sync::Mutex};
 use tauri::{
   api::dialog::blocking::FileDialogBuilder, utils::platform::current_exe, AppHandle,
   CustomMenuItem, GlobalShortcutManager, Manager, RunEvent, State, SystemTray, SystemTrayEvent,
@@ -49,10 +49,10 @@ fn save_user_config(
   state: State<Mutex<UserConfig>>,
   app: AppHandle,
   config: UserConfig,
-) -> Result<(), tauri::Error> {
+) -> Result<&str, tauri::Error> {
   update_user_config_and_state(&app, state, config).ok();
 
-  Ok(())
+  Ok("Success!".into())
 }
 
 #[tauri::command]
@@ -130,16 +130,25 @@ fn set_user_config_path(app_config_state: State<Mutex<AppConfig>>) -> Option<Pat
 }
 
 #[tauri::command]
-async fn run_workflow(state: State<'_, Mutex<UserConfig>>, label: String) -> Result<(), ()> {
+async fn run_workflow(
+  state: State<'_, Mutex<UserConfig>>,
+  name: String,
+  args: HashMap<String, String>,
+) -> Result<(), ()> {
   let workflows = state.lock().expect("Can't unlock").clone().workflows;
 
+  // println!("{:?}", args);
+
   workflows
     .into_iter()
-    .find(|x| x.name == label)
+    .find(|x| x.name == name)
     .expect("Couldn't find workflow")
     .steps
     .par_iter_mut()
-    .for_each(|step| run_step(&step.value));
+    .for_each(|step| {
+      let copy = args.clone();
+      run_step(&step.value, Some(copy))
+    });
 
   Ok(())
 }

src-tauri/src/workflows.rs

@@ -1,6 +1,6 @@
 extern crate open;
 use serde::{Deserialize, Serialize};
-use std::{env, path::Path};
+use std::{collections::HashMap, env, path::Path};
 
 #[derive(Debug, Serialize, Deserialize, Clone)]
 pub struct Step {
@@ -11,6 +11,7 @@ pub struct Step {
 pub struct Workflow {
   pub name: String,
   pub steps: Vec<Step>,
+  pub arguments: Option<Vec<String>>,
 }
 
 // On Windows, some apps expect a relative working directory (Looking at you, OBS....)
@@ -21,10 +22,17 @@ pub fn open_app(path: &str) {
   open::that(path).expect("Dang")
 }
 
-pub fn run_step(path: &str) {
-  if path.contains("http://") || path.contains("https://") {
-    open::that_in_background(&path);
+pub fn run_step(path: &str, args: Option<HashMap<String, String>>) {
+  let mut target = path.to_string();
+  if let Some(args) = args {
+    for (key, value) in args {
+      target = target.replace(&format!("${}", key), &value);
+    }
+  }
+  println!("target: {:?}", &target);
+  if target.contains("http://") || target.contains("https://") {
+    open::that_in_background(&target);
   } else {
-    open_app(&path);
+    open_app(&target);
   }
 }

src-tauri/tauri.conf.json

@@ -1,7 +1,6 @@
 {
   "package": {
-    "productName": "brancato",
-    "version": "0.11.0"
+    "productName": "brancato"
   },
   "build": {
     "distDir": "../build",

src/Config.tsx

@@ -11,6 +11,7 @@ import {
 
 export type Workflow = {
   name: string;
+  arguments?: string[];
   steps: {
     value: string;
   }[];

src/components/NewAutocomplete.jsx

@@ -0,0 +1,121 @@
+import { createAutocomplete } from "@algolia/autocomplete-core";
+import { useState, useMemo } from "react";
+import { appWindow } from "@tauri-apps/api/window";
+
+function Autocomplete({ getSources }) {
+  // (1) Create a React state.
+  const [autocompleteState, setAutocompleteState] = useState();
+  const autocomplete = useMemo(
+    () =>
+      createAutocomplete({
+        placeholder: "",
+        openOnFocus: true,
+        autoFocus: true,
+        defaultActiveItemId: 0,
+        onStateChange({ state }) {
+          // (2) Synchronize the Autocomplete state with the state.
+          setAutocompleteState(state);
+        },
+        getSources({ ...props }) {
+          return getSources({ ...props });
+        },
+      }),
+    [getSources]
+  );
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        const argKey = autocompleteState?.context?.searchPrefix ?? "";
+        const argValue = {
+          [argKey]: autocompleteState?.query,
+        };
+        console.log("argValue", argValue);
+        autocompleteState?.context.onComplete &&
+          autocompleteState.context.onComplete(argValue);
+      }}
+    >
+      <div
+        style={{
+          backgroundColor: "white",
+          padding: "0.5rem 1rem",
+          borderRadius: "4px",
+          boxShadow: "rgb(0 0 0 / 9%) 0px 3px 12px",
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") {
+            autocomplete.setContext({ searchPrefix: null });
+            appWindow.hide();
+          }
+        }}
+      >
+        <div className="aa-Autocomplete" {...autocomplete.getRootProps({})}>
+          <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+            {autocompleteState?.context?.searchPrefix && (
+              <span style={{ fontWeight: 900 }}>
+                {autocompleteState?.context?.searchPrefix}:
+              </span>
+            )}
+            <input className="aa-Input" {...autocomplete.getInputProps({})} />
+          </div>
+
+          <div
+            style={{
+              padding: "1rem",
+              boxShadow: "rgb(0 0 0 / 9%) 0px 3px 12px",
+              width: "100%",
+              left: 0,
+              transform: "translateY(20px)",
+            }}
+            className="aa-Panel"
+            {...autocomplete.getPanelProps({})}
+          >
+            {autocompleteState?.isOpen &&
+              autocompleteState?.collections.map((collection, index) => {
+                const { source, items } = collection;
+                console.log({ source });
+                return (
+                  <div key={`source-${index}`} className="aa-Source">
+                    {/* <h2>{source}</h2> */}
+                    {source.templates.header && source.templates.header()}
+                    {items.length > 0 && (
+                      <ul className="aa-List" {...autocomplete.getListProps()}>
+                        {items.map((item) => {
+                          return (
+                            <li
+                              className="aa-Item"
+                              {...autocomplete.getItemProps({
+                                item,
+                                source,
+                              })}
+                            >
+                              {source.templates.item({ item })}
+                            </li>
+                          );
+                          // <li
+                          //   key={item.objectID}
+                          //   className="aa-Item"
+                          // {...autocomplete.getItemProps({
+                          //   item,
+                          //   source,
+                          // })}
+                          // >
+                          //   {item.label}
+                          // </li>
+                        })}
+                      </ul>
+                    )}
+                  </div>
+                );
+              })}
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+
+  // ...
+}
+
+export default Autocomplete;

src/components/Omnibar/Action.tsx

@@ -0,0 +1,37 @@
+import { ReactNode } from "react"
+
+
+type Props = {
+    hit: {
+        label: string
+        description?: ReactNode
+    }
+}
+export const Action = ({ hit }: Props) => {
+    // Component to display the items
+    return (
+        <div className="aa-ItemWrapper">
+            <div className="aa-ItemContent">
+                {/* <div className="aa-ItemIcon"></div> */}
+                <div className="aa-ItemContentBody">
+                    <div className="aa-ItemContentTitle">
+                        <span>{hit.label}</span>
+                        {hit.description && <div style={{ fontSize: '0.8rem', paddingRight: '1rem' }}>{hit.description}</div>}
+
+                    </div>
+                </div>
+            </div>
+            <div className="aa-ItemActions">
+                <button
+                    className="aa-ItemActionButton aa-DesktopOnly aa-ActiveOnly"
+                    type="button"
+                    title="Select"
+                >
+                    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+                        <path d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+    );
+}