@vicinae/api 0.9.4 → 0.9.5

package/dist/api/components/form.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode, Ref } from "react";
+import { ImageLike } from "../image";
 type FormProps = {
     actions?: React.ReactNode;
     children?: React.ReactNode;
@@ -70,12 +71,44 @@ interface DropdownProps extends FormItemProps<string>, WithFormRef<Form.Dropdown
     throttle?: boolean;
     onSearchTextChange?: (text: string) => void;
 }
+interface TagPickerProps extends FormItemProps<string[]>, WithFormRef<Form.TagPicker> {
+    children?: ReactNode;
+}
+interface TextAreaProps extends FormItemProps<string>, WithFormRef<Form.TagPicker> {
+}
+interface FilePickerProps extends FormItemProps<string[]>, WithFormRef<Form.FilePicker> {
+}
+type DescriptionProps = {
+    text: string;
+    title?: string;
+};
 export declare const Form: import("react").FC<FormProps> & {
     TextField: import("react").FC<TextFieldProps>;
     PasswordField: import("react").FC<PasswordFieldProps>;
     DatePicker: import("react").FC<DatePickerProps>;
     Checkbox: import("react").FC<CheckboxProps>;
-    Dropdown: import("react").FC<DropdownProps>;
+    TextArea: import("react").FC<TextAreaProps>;
+    Dropdown: import("react").FC<DropdownProps> & {
+        Item: import("react").FC<{
+            title: string;
+            value: string;
+            icon?: import("../image").Image.ImageLike;
+            keywords?: string[];
+        }>;
+        Section: import("react").FC<{
+            title?: string;
+            children?: ReactNode;
+        }>;
+    };
+    Description: import("react").FC<DescriptionProps>;
+    TagPicker: import("react").FC<TagPickerProps> & {
+        Item: import("react").FC<{
+            title: string;
+            value: string;
+            icon: ImageLike;
+        }>;
+    };
+    FilePicker: import("react").FC<FilePickerProps>;
     Separator: () => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/api/components/form.js

@@ -3,12 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Form = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const use_imperative_form_handle_1 = require("../hooks/use-imperative-form-handle");
+const image_1 = require("../image");
+const dropdown_1 = require("./dropdown");
+const wrapFormItemProps = (props) => {
+    // TODO: pass the current value in the event
+    return {
+        ...props,
+        onFocus: () => props.onFocus?.({ type: 'focus', target: { id: props.id } }),
+        onBlur: () => props.onBlur?.({ type: 'blur', target: { id: props.id } })
+    };
+};
 const FormRoot = ({ enableDrafts = false, actions, children, isLoading = false, navigationTitle, searchBarAccessory, }) => {
     return ((0, jsx_runtime_1.jsxs)("form", { enableDrafts: enableDrafts, isLoading: isLoading, navigationTitle: navigationTitle, children: [searchBarAccessory, children, actions] }));
 };
 const TextField = ({ ref, ...props }) => {
     (0, use_imperative_form_handle_1.useImperativeFormHandle)(ref);
-    return ((0, jsx_runtime_1.jsx)("text-field", { ...props }));
+    return ((0, jsx_runtime_1.jsx)("text-field", { ...wrapFormItemProps(props) }));
 };
 const PasswordField = ({ ...props }) => {
     return (0, jsx_runtime_1.jsx)("password-field", { ...props });
@@ -18,16 +28,45 @@ const DatePicker = ({ ...props }) => {
 };
 const Checkbox = ({ ref, ...props }) => {
     (0, use_imperative_form_handle_1.useImperativeFormHandle)(ref);
-    return ((0, jsx_runtime_1.jsx)("checkbox-field", { ...props }));
+    return ((0, jsx_runtime_1.jsx)("checkbox-field", { ...wrapFormItemProps(props) }));
+};
+//FIXME: we probably need to reuse the existing dropdown in
+// a smarter way.
+const DropdownRoot = ({ children, ...props }) => {
+    // FIXME: testing stuff, we need to generalize this to all form items
+    return ((0, jsx_runtime_1.jsx)("dropdown-field", { ...wrapFormItemProps(props), children: children }));
+};
+const Dropdown = Object.assign(DropdownRoot, {
+    Item: dropdown_1.Dropdown.Item,
+    Section: dropdown_1.Dropdown.Section
+});
+const TagPickerRoot = ({ children, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("tag-picker-field", { ...wrapFormItemProps(props), children: children }));
+};
+const TagPickerItem = ({ icon, ...props }) => {
+    return (0, jsx_runtime_1.jsx)("tag-picker-item", { ...props, icon: icon && (0, image_1.serializeImageLike)(icon) });
+};
+const TagPicker = Object.assign(TagPickerRoot, {
+    Item: TagPickerItem
+});
+const TextArea = (props) => {
+    return ((0, jsx_runtime_1.jsx)("text-area-field", { ...wrapFormItemProps(props) }));
+};
+const FilePicker = (props) => {
+    return ((0, jsx_runtime_1.jsx)("file-picker-field", { ...wrapFormItemProps(props) }));
 };
-const Dropdown = ({ children, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)("dropdown-field", { ...props, children: children }));
+const Description = (props) => {
+    return (0, jsx_runtime_1.jsx)("form-description", { ...props });
 };
 exports.Form = Object.assign(FormRoot, {
     TextField,
     PasswordField,
     DatePicker,
     Checkbox,
+    TextArea,
     Dropdown,
+    Description,
+    TagPicker,
+    FilePicker,
     Separator: () => (0, jsx_runtime_1.jsx)("separator", {}),
 });

package/dist/api/proto/ui.d.ts

@@ -80,8 +80,8 @@ export interface ConfirmAlertRequest {
     description: string;
     /** TODO: replace with proper ImageLike message */
     icon?: string | undefined;
-    dismissAction?: ConfirmAlertAction | undefined;
-    primaryAction?: ConfirmAlertAction | undefined;
+    dismissAction: ConfirmAlertAction | undefined;
+    primaryAction: ConfirmAlertAction | undefined;
     rememberUserChoice: boolean;
 }
 export interface ConfirmAlertResponse {

package/dist/commands/build/index.js

@@ -106,7 +106,7 @@ class Build extends core_1.Command {
                 return esbuild.build({
                     bundle: true,
                     entryPoints: [source],
-                    external: ["react", "@vicinae/api"],
+                    external: ["react", "@vicinae/api", "@raycast/api"],
                     format: "cjs",
                     outfile: (0, node_path_1.join)(outDir, `${cmd.name}.js`),
                     platform: "node",

package/dist/commands/develop/index.js

@@ -125,7 +125,7 @@ class Develop extends core_1.Command {
                 return esbuild.build({
                     bundle: true,
                     entryPoints: [source],
-                    external: ["react", "@vicinae/api"],
+                    external: ["react", "@vicinae/api", "@raycast/api"],
                     format: "cjs",
                     outfile: (0, node_path_1.join)(outDir, `${cmd.name}.js`),
                     platform: "node",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vicinae/api",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "description": "TypeScript SDK to build Vicinae extensions",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/types/jsx.d.ts

@@ -8,6 +8,12 @@ import { Grid } from "../api/components/grid";
 
 import 'react';
 
+type BaseFormField = {
+    onBlur?: Function;
+    onFocus?: Function;
+    onChange?: Function;
+};
+
 declare module "react" {
   namespace JSX {
     interface IntrinsicElements {
@@ -132,23 +138,22 @@ declare module "react" {
         navigationTitle?: string;
         children?: React.ReactNode;
       };
-      "text-field": {
-        onBlur?: Function;
-        onFocus?: Function;
-        onChange?: Function;
-      };
-      "dropdown-field": {
-        onBlur?: Function;
-        onFocus?: Function;
-        onChange?: Function;
+      "text-field": BaseFormField & {};
+	  "tag-picker-field": BaseFormField & {},
+	  "tag-picker-item": {
+		  title: string;
+		  value: string;
+		  icon?: SerializedImageLike;
+	  },
+	  "text-area-field": BaseFormField & {
+	  }
+	  "file-picker-field": BaseFormField & {
+	  }
+      "dropdown-field": BaseFormField & {
         children?: ReactNode;
       };
       "date-picker-field": {};
-      "checkbox-field": {
-        onBlur?: Function;
-        onFocus?: Function;
-        onChange?: Function;
-      };
+      "checkbox-field": BaseFormField & {};
       "password-field": {};
       "textarea-field": {};
 
@@ -168,6 +173,11 @@ declare module "react" {
         keywords?: string[];
       };
 
+	  "form-description": {
+		  title?: string;
+		  text: string;
+	  }
+
       separator: {};
       "menu-bar": {};
       "menu-bar-item": {};