@shipfox/client-integrations 0.2.0

package/dist/components/webhook/copyable-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copyable-value.d.ts","sourceRoot":"","sources":["../../../src/components/webhook/copyable-value.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrC,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,aAAa,CAAC,EAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAC,EAAE,kBAAkB,+BAwDhF"}

package/dist/components/webhook/copyable-value.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@shipfox/react-ui/button';
+import { useCopyToClipboard } from '@shipfox/react-ui/hooks';
+import { toast } from '@shipfox/react-ui/toast';
+import { Code, Text } from '@shipfox/react-ui/typography';
+import { cn } from '@shipfox/react-ui/utils';
+import { useEffect, useRef, useState } from 'react';
+export function CopyableValue({ label, value, note, className }) {
+    const [copied, setCopied] = useState(false);
+    const timeoutRef = useRef(undefined);
+    const { copy } = useCopyToClipboard({
+        text: value,
+        onCopy: ()=>{
+            setCopied(true);
+            if (timeoutRef.current) clearTimeout(timeoutRef.current);
+            timeoutRef.current = setTimeout(()=>setCopied(false), 2000);
+        }
+    });
+    useEffect(()=>{
+        return ()=>{
+            if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        };
+    }, []);
+    async function handleCopy() {
+        try {
+            await copy();
+        } catch  {
+            toast.error('Could not copy.');
+        }
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('flex w-full min-w-0 flex-col gap-8', className),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex min-w-0 items-center gap-8",
+                children: [
+                    /*#__PURE__*/ _jsx(Code, {
+                        as: "span",
+                        variant: "paragraph",
+                        className: "min-w-0 flex-1 break-all rounded-4 border border-border-neutral-base bg-background-components-base px-8 py-6 text-foreground-neutral-base",
+                        children: value
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        type: "button",
+                        variant: "secondary",
+                        size: "sm",
+                        iconLeft: copied ? 'check' : 'copy',
+                        "aria-label": `Copy ${label}`,
+                        onClick: ()=>{
+                            void handleCopy();
+                        },
+                        children: "Copy"
+                    })
+                ]
+            }),
+            note ? /*#__PURE__*/ _jsx(Text, {
+                size: "sm",
+                className: "text-foreground-neutral-muted",
+                children: note
+            }) : null
+        ]
+    });
+}
+
+//# sourceMappingURL=copyable-value.js.map

package/dist/components/webhook/copyable-value.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/webhook/copyable-value.tsx"],"sourcesContent":["import {Button} from '@shipfox/react-ui/button';\nimport {useCopyToClipboard} from '@shipfox/react-ui/hooks';\nimport {toast} from '@shipfox/react-ui/toast';\nimport {Code, Text} from '@shipfox/react-ui/typography';\nimport {cn} from '@shipfox/react-ui/utils';\nimport type {ReactNode} from 'react';\nimport {useEffect, useRef, useState} from 'react';\n\ninterface CopyableValueProps {\n  label: string;\n  value: string;\n  note?: ReactNode;\n  className?: string;\n}\n\nexport function CopyableValue({label, value, note, className}: CopyableValueProps) {\n  const [copied, setCopied] = useState(false);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const {copy} = useCopyToClipboard({\n    text: value,\n    onCopy: () => {\n      setCopied(true);\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n      timeoutRef.current = setTimeout(() => setCopied(false), 2000);\n    },\n  });\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    };\n  }, []);\n\n  async function handleCopy() {\n    try {\n      await copy();\n    } catch {\n      toast.error('Could not copy.');\n    }\n  }\n\n  return (\n    <div className={cn('flex w-full min-w-0 flex-col gap-8', className)}>\n      <div className=\"flex min-w-0 items-center gap-8\">\n        <Code\n          as=\"span\"\n          variant=\"paragraph\"\n          className=\"min-w-0 flex-1 break-all rounded-4 border border-border-neutral-base bg-background-components-base px-8 py-6 text-foreground-neutral-base\"\n        >\n          {value}\n        </Code>\n        <Button\n          type=\"button\"\n          variant=\"secondary\"\n          size=\"sm\"\n          iconLeft={copied ? 'check' : 'copy'}\n          aria-label={`Copy ${label}`}\n          onClick={() => {\n            void handleCopy();\n          }}\n        >\n          Copy\n        </Button>\n      </div>\n      {note ? (\n        <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n          {note}\n        </Text>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["Button","useCopyToClipboard","toast","Code","Text","cn","useEffect","useRef","useState","CopyableValue","label","value","note","className","copied","setCopied","timeoutRef","undefined","copy","text","onCopy","current","clearTimeout","setTimeout","handleCopy","error","div","as","variant","type","size","iconLeft","aria-label","onClick"],"mappings":";AAAA,SAAQA,MAAM,QAAO,2BAA2B;AAChD,SAAQC,kBAAkB,QAAO,0BAA0B;AAC3D,SAAQC,KAAK,QAAO,0BAA0B;AAC9C,SAAQC,IAAI,EAAEC,IAAI,QAAO,+BAA+B;AACxD,SAAQC,EAAE,QAAO,0BAA0B;AAE3C,SAAQC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAO,QAAQ;AASlD,OAAO,SAASC,cAAc,EAACC,KAAK,EAAEC,KAAK,EAAEC,IAAI,EAAEC,SAAS,EAAqB;IAC/E,MAAM,CAACC,QAAQC,UAAU,GAAGP,SAAS;IACrC,MAAMQ,aAAaT,OAAkDU;IACrE,MAAM,EAACC,IAAI,EAAC,GAAGjB,mBAAmB;QAChCkB,MAAMR;QACNS,QAAQ;YACNL,UAAU;YACV,IAAIC,WAAWK,OAAO,EAAEC,aAAaN,WAAWK,OAAO;YACvDL,WAAWK,OAAO,GAAGE,WAAW,IAAMR,UAAU,QAAQ;QAC1D;IACF;IAEAT,UAAU;QACR,OAAO;YACL,IAAIU,WAAWK,OAAO,EAAEC,aAAaN,WAAWK,OAAO;QACzD;IACF,GAAG,EAAE;IAEL,eAAeG;QACb,IAAI;YACF,MAAMN;QACR,EAAE,OAAM;YACNhB,MAAMuB,KAAK,CAAC;QACd;IACF;IAEA,qBACE,MAACC;QAAIb,WAAWR,GAAG,sCAAsCQ;;0BACvD,MAACa;gBAAIb,WAAU;;kCACb,KAACV;wBACCwB,IAAG;wBACHC,SAAQ;wBACRf,WAAU;kCAETF;;kCAEH,KAACX;wBACC6B,MAAK;wBACLD,SAAQ;wBACRE,MAAK;wBACLC,UAAUjB,SAAS,UAAU;wBAC7BkB,cAAY,CAAC,KAAK,EAAEtB,OAAO;wBAC3BuB,SAAS;4BACP,KAAKT;wBACP;kCACD;;;;YAIFZ,qBACC,KAACR;gBAAK0B,MAAK;gBAAKjB,WAAU;0BACvBD;iBAED;;;AAGV"}

package/dist/components/webhook/webhook-create-modal.d.ts

@@ -0,0 +1,10 @@
+import type { IntegrationConnectionDto } from '@shipfox/api-integration-core-dto';
+interface WebhookCreateModalProps {
+    workspaceId: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onCreated: (connection: IntegrationConnectionDto) => void;
+}
+export declare function WebhookCreateModal({ workspaceId, open, onOpenChange, onCreated, }: WebhookCreateModalProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=webhook-create-modal.d.ts.map

package/dist/components/webhook/webhook-create-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"webhook-create-modal.d.ts","sourceRoot":"","sources":["../../../src/components/webhook/webhook-create-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,wBAAwB,EAAC,MAAM,mCAAmC,CAAC;AA0BhF,UAAU,uBAAuB;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,CAAC,UAAU,EAAE,wBAAwB,KAAK,IAAI,CAAC;CAC3D;AAED,wBAAgB,kBAAkB,CAAC,EACjC,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,SAAS,GACV,EAAE,uBAAuB,+BAmKzB"}

package/dist/components/webhook/webhook-create-modal.js

@@ -0,0 +1,233 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createWebhookConnectionBodySchema, WEBHOOK_RESERVED_SLUGS, webhookSlugSchema } from '@shipfox/api-integration-webhook-dto';
+import { displayNameFieldError } from '@shipfox/client-ui';
+import { Button } from '@shipfox/react-ui/button';
+import { Callout } from '@shipfox/react-ui/callout';
+import { FormField, FormFieldInput, fieldError } from '@shipfox/react-ui/form-field';
+import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalTitle } from '@shipfox/react-ui/modal';
+import { toast } from '@shipfox/react-ui/toast';
+import { Code, Text } from '@shipfox/react-ui/typography';
+import { useForm } from '@tanstack/react-form';
+import { useEffect, useRef, useState } from 'react';
+import { useCreateWebhookConnectionMutation } from '#hooks/api/webhook-connections.js';
+import { webhookCreateErrorToFormError } from './webhook-form-errors.js';
+export function WebhookCreateModal({ workspaceId, open, onOpenChange, onCreated }) {
+    const createWebhook = useCreateWebhookConnectionMutation();
+    const [formError, setFormError] = useState();
+    const [hasManualSlug, setHasManualSlug] = useState(false);
+    const nameInputRef = useRef(null);
+    const form = useForm({
+        defaultValues: {
+            name: '',
+            slug: ''
+        },
+        onSubmit: async ({ value })=>{
+            setFormError(undefined);
+            try {
+                const body = createWebhookConnectionBodySchema.parse({
+                    workspace_id: workspaceId,
+                    name: value.name.trim(),
+                    slug: value.slug.trim()
+                });
+                const connection = await createWebhook.mutateAsync(body);
+                onCreated(toIntegrationConnection(connection));
+                toast.success('Webhook created.');
+                onOpenChange(false);
+            } catch (error) {
+                const mapped = webhookCreateErrorToFormError(error);
+                if (mapped.kind === 'field') {
+                    form.setFieldMeta(mapped.field, (prev)=>({
+                            ...prev,
+                            errorMap: {
+                                ...prev.errorMap,
+                                onServer: mapped.message
+                            }
+                        }));
+                } else {
+                    setFormError(mapped.message);
+                }
+            }
+        }
+    });
+    useEffect(()=>{
+        if (!open) {
+            setFormError(undefined);
+            setHasManualSlug(false);
+            form.reset();
+            return;
+        }
+        requestAnimationFrame(()=>nameInputRef.current?.focus());
+    }, [
+        form,
+        open
+    ]);
+    const handleOpenChange = (nextOpen)=>{
+        if (createWebhook.isPending && !nextOpen) return;
+        onOpenChange(nextOpen);
+    };
+    return /*#__PURE__*/ _jsx(Modal, {
+        open: open,
+        onOpenChange: handleOpenChange,
+        children: /*#__PURE__*/ _jsxs(ModalContent, {
+            "aria-describedby": undefined,
+            children: [
+                /*#__PURE__*/ _jsx(ModalTitle, {
+                    className: "sr-only",
+                    children: "Add webhook"
+                }),
+                /*#__PURE__*/ _jsx(ModalHeader, {
+                    title: "Add webhook",
+                    showClose: !createWebhook.isPending
+                }),
+                /*#__PURE__*/ _jsxs("form", {
+                    noValidate: true,
+                    onSubmit: (event)=>{
+                        event.preventDefault();
+                        event.stopPropagation();
+                        void form.handleSubmit();
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsxs(ModalBody, {
+                            className: "gap-16",
+                            children: [
+                                /*#__PURE__*/ _jsx(Text, {
+                                    size: "sm",
+                                    className: "text-foreground-neutral-muted",
+                                    children: "Create a named inbound webhook URL for this workspace."
+                                }),
+                                formError ? /*#__PURE__*/ _jsx(Callout, {
+                                    role: "alert",
+                                    type: "error",
+                                    children: formError
+                                }) : null,
+                                /*#__PURE__*/ _jsx(form.Field, {
+                                    name: "name",
+                                    validators: {
+                                        onBlur: ({ value })=>webhookNameFieldError(value),
+                                        onSubmit: ({ value })=>webhookNameFieldError(value)
+                                    },
+                                    children: (field)=>/*#__PURE__*/ _jsx(FormField, {
+                                            label: "Name",
+                                            id: "webhook-name",
+                                            error: fieldError(field),
+                                            className: "w-full",
+                                            children: /*#__PURE__*/ _jsx(FormFieldInput, {
+                                                ref: nameInputRef,
+                                                name: "name",
+                                                value: field.state.value,
+                                                onChange: (event)=>{
+                                                    const nextName = event.target.value;
+                                                    field.handleChange(nextName);
+                                                    if (!hasManualSlug) {
+                                                        form.setFieldValue('slug', nextName.trim() ? suggestWebhookSlug(nextName) : '');
+                                                    }
+                                                },
+                                                onBlur: field.handleBlur,
+                                                placeholder: "Stripe production",
+                                                disabled: createWebhook.isPending
+                                            })
+                                        })
+                                }),
+                                /*#__PURE__*/ _jsx(form.Field, {
+                                    name: "slug",
+                                    validators: {
+                                        onBlur: ({ value })=>webhookSlugFieldError(value),
+                                        onSubmit: ({ value })=>webhookSlugFieldError(value)
+                                    },
+                                    children: (field)=>/*#__PURE__*/ _jsxs(FormField, {
+                                            label: "Slug",
+                                            id: "webhook-slug",
+                                            error: fieldError(field),
+                                            className: "w-full",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(FormFieldInput, {
+                                                    name: "slug",
+                                                    value: field.state.value,
+                                                    onChange: (event)=>{
+                                                        const nextSlug = event.target.value;
+                                                        setHasManualSlug(nextSlug.trim().length > 0);
+                                                        field.handleChange(nextSlug);
+                                                        if (nextSlug.trim().length === 0 && form.state.values.name.trim()) {
+                                                            form.setFieldValue('slug', suggestWebhookSlug(form.state.values.name));
+                                                        }
+                                                    },
+                                                    onBlur: field.handleBlur,
+                                                    placeholder: "webhook-stripe-production",
+                                                    disabled: createWebhook.isPending
+                                                }),
+                                                /*#__PURE__*/ _jsxs(Text, {
+                                                    size: "sm",
+                                                    className: "text-foreground-neutral-muted",
+                                                    children: [
+                                                        "Reference in workflows with",
+                                                        ' ',
+                                                        /*#__PURE__*/ _jsxs(Code, {
+                                                            as: "span",
+                                                            children: [
+                                                                "source: ",
+                                                                field.state.value || 'webhook-stripe-production'
+                                                            ]
+                                                        }),
+                                                        "."
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs(ModalFooter, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    type: "button",
+                                    variant: "secondary",
+                                    disabled: createWebhook.isPending,
+                                    onClick: ()=>onOpenChange(false),
+                                    children: "Cancel"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    type: "submit",
+                                    isLoading: createWebhook.isPending,
+                                    children: "Create"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+function webhookNameFieldError(value) {
+    return displayNameFieldError(value.trim(), 'Webhook name', createWebhookConnectionBodySchema.shape.name);
+}
+function webhookSlugFieldError(value) {
+    const trimmed = value.trim();
+    if (trimmed.length === 0) return 'Slug is required.';
+    if (WEBHOOK_RESERVED_SLUGS.includes(trimmed)) {
+        return 'That slug is reserved.';
+    }
+    if (webhookSlugSchema.safeParse(trimmed).success) return undefined;
+    return 'Use lowercase letters, numbers, hyphens, or underscores.';
+}
+function suggestWebhookSlug(name) {
+    const prefix = 'webhook';
+    const suffix = name.toLowerCase().replaceAll(/[^a-z0-9]+/g, '-').replaceAll(/^-+|-+$/g, '').slice(0, 100 - prefix.length - 1).replaceAll(/-+$/g, '');
+    return suffix ? `${prefix}-${suffix}` : prefix;
+}
+function toIntegrationConnection(connection) {
+    return {
+        id: connection.id,
+        workspace_id: connection.workspace_id,
+        provider: 'webhook',
+        external_account_id: connection.slug,
+        slug: connection.slug,
+        display_name: connection.name,
+        lifecycle_status: connection.lifecycle_status,
+        capabilities: [],
+        created_at: connection.created_at,
+        updated_at: connection.updated_at
+    };
+}
+
+//# sourceMappingURL=webhook-create-modal.js.map

package/dist/components/webhook/webhook-create-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/webhook/webhook-create-modal.tsx"],"sourcesContent":["import type {IntegrationConnectionDto} from '@shipfox/api-integration-core-dto';\nimport {\n  createWebhookConnectionBodySchema,\n  WEBHOOK_RESERVED_SLUGS,\n  type WebhookConnectionDto,\n  webhookSlugSchema,\n} from '@shipfox/api-integration-webhook-dto';\nimport {displayNameFieldError} from '@shipfox/client-ui';\nimport {Button} from '@shipfox/react-ui/button';\nimport {Callout} from '@shipfox/react-ui/callout';\nimport {FormField, FormFieldInput, fieldError} from '@shipfox/react-ui/form-field';\nimport {\n  Modal,\n  ModalBody,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalTitle,\n} from '@shipfox/react-ui/modal';\nimport {toast} from '@shipfox/react-ui/toast';\nimport {Code, Text} from '@shipfox/react-ui/typography';\nimport {useForm} from '@tanstack/react-form';\nimport {useEffect, useRef, useState} from 'react';\nimport {useCreateWebhookConnectionMutation} from '#hooks/api/webhook-connections.js';\nimport {webhookCreateErrorToFormError} from './webhook-form-errors.js';\n\ninterface WebhookCreateModalProps {\n  workspaceId: string;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  onCreated: (connection: IntegrationConnectionDto) => void;\n}\n\nexport function WebhookCreateModal({\n  workspaceId,\n  open,\n  onOpenChange,\n  onCreated,\n}: WebhookCreateModalProps) {\n  const createWebhook = useCreateWebhookConnectionMutation();\n  const [formError, setFormError] = useState<string | undefined>();\n  const [hasManualSlug, setHasManualSlug] = useState(false);\n  const nameInputRef = useRef<HTMLInputElement | null>(null);\n\n  const form = useForm({\n    defaultValues: {name: '', slug: ''},\n    onSubmit: async ({value}) => {\n      setFormError(undefined);\n      try {\n        const body = createWebhookConnectionBodySchema.parse({\n          workspace_id: workspaceId,\n          name: value.name.trim(),\n          slug: value.slug.trim(),\n        });\n        const connection = await createWebhook.mutateAsync(body);\n        onCreated(toIntegrationConnection(connection));\n        toast.success('Webhook created.');\n        onOpenChange(false);\n      } catch (error) {\n        const mapped = webhookCreateErrorToFormError(error);\n        if (mapped.kind === 'field') {\n          form.setFieldMeta(mapped.field, (prev) => ({\n            ...prev,\n            errorMap: {...prev.errorMap, onServer: mapped.message},\n          }));\n        } else {\n          setFormError(mapped.message);\n        }\n      }\n    },\n  });\n\n  useEffect(() => {\n    if (!open) {\n      setFormError(undefined);\n      setHasManualSlug(false);\n      form.reset();\n      return;\n    }\n    requestAnimationFrame(() => nameInputRef.current?.focus());\n  }, [form, open]);\n\n  const handleOpenChange = (nextOpen: boolean) => {\n    if (createWebhook.isPending && !nextOpen) return;\n    onOpenChange(nextOpen);\n  };\n\n  return (\n    <Modal open={open} onOpenChange={handleOpenChange}>\n      <ModalContent aria-describedby={undefined}>\n        <ModalTitle className=\"sr-only\">Add webhook</ModalTitle>\n        <ModalHeader title=\"Add webhook\" showClose={!createWebhook.isPending} />\n        <form\n          noValidate\n          onSubmit={(event) => {\n            event.preventDefault();\n            event.stopPropagation();\n            void form.handleSubmit();\n          }}\n        >\n          <ModalBody className=\"gap-16\">\n            <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n              Create a named inbound webhook URL for this workspace.\n            </Text>\n            {formError ? (\n              <Callout role=\"alert\" type=\"error\">\n                {formError}\n              </Callout>\n            ) : null}\n            <form.Field\n              name=\"name\"\n              validators={{\n                onBlur: ({value}) => webhookNameFieldError(value),\n                onSubmit: ({value}) => webhookNameFieldError(value),\n              }}\n            >\n              {(field) => (\n                <FormField\n                  label=\"Name\"\n                  id=\"webhook-name\"\n                  error={fieldError(field)}\n                  className=\"w-full\"\n                >\n                  <FormFieldInput\n                    ref={nameInputRef}\n                    name=\"name\"\n                    value={field.state.value}\n                    onChange={(event) => {\n                      const nextName = event.target.value;\n                      field.handleChange(nextName);\n                      if (!hasManualSlug) {\n                        form.setFieldValue(\n                          'slug',\n                          nextName.trim() ? suggestWebhookSlug(nextName) : '',\n                        );\n                      }\n                    }}\n                    onBlur={field.handleBlur}\n                    placeholder=\"Stripe production\"\n                    disabled={createWebhook.isPending}\n                  />\n                </FormField>\n              )}\n            </form.Field>\n            <form.Field\n              name=\"slug\"\n              validators={{\n                onBlur: ({value}) => webhookSlugFieldError(value),\n                onSubmit: ({value}) => webhookSlugFieldError(value),\n              }}\n            >\n              {(field) => (\n                <FormField\n                  label=\"Slug\"\n                  id=\"webhook-slug\"\n                  error={fieldError(field)}\n                  className=\"w-full\"\n                >\n                  <FormFieldInput\n                    name=\"slug\"\n                    value={field.state.value}\n                    onChange={(event) => {\n                      const nextSlug = event.target.value;\n                      setHasManualSlug(nextSlug.trim().length > 0);\n                      field.handleChange(nextSlug);\n                      if (nextSlug.trim().length === 0 && form.state.values.name.trim()) {\n                        form.setFieldValue('slug', suggestWebhookSlug(form.state.values.name));\n                      }\n                    }}\n                    onBlur={field.handleBlur}\n                    placeholder=\"webhook-stripe-production\"\n                    disabled={createWebhook.isPending}\n                  />\n                  <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n                    Reference in workflows with{' '}\n                    <Code as=\"span\">\n                      source: {field.state.value || 'webhook-stripe-production'}\n                    </Code>\n                    .\n                  </Text>\n                </FormField>\n              )}\n            </form.Field>\n          </ModalBody>\n          <ModalFooter>\n            <Button\n              type=\"button\"\n              variant=\"secondary\"\n              disabled={createWebhook.isPending}\n              onClick={() => onOpenChange(false)}\n            >\n              Cancel\n            </Button>\n            <Button type=\"submit\" isLoading={createWebhook.isPending}>\n              Create\n            </Button>\n          </ModalFooter>\n        </form>\n      </ModalContent>\n    </Modal>\n  );\n}\n\nfunction webhookNameFieldError(value: string): string | undefined {\n  return displayNameFieldError(\n    value.trim(),\n    'Webhook name',\n    createWebhookConnectionBodySchema.shape.name,\n  );\n}\n\nfunction webhookSlugFieldError(value: string): string | undefined {\n  const trimmed = value.trim();\n  if (trimmed.length === 0) return 'Slug is required.';\n  if (WEBHOOK_RESERVED_SLUGS.includes(trimmed as (typeof WEBHOOK_RESERVED_SLUGS)[number])) {\n    return 'That slug is reserved.';\n  }\n  if (webhookSlugSchema.safeParse(trimmed).success) return undefined;\n  return 'Use lowercase letters, numbers, hyphens, or underscores.';\n}\n\nfunction suggestWebhookSlug(name: string): string {\n  const prefix = 'webhook';\n  const suffix = name\n    .toLowerCase()\n    .replaceAll(/[^a-z0-9]+/g, '-')\n    .replaceAll(/^-+|-+$/g, '')\n    .slice(0, 100 - prefix.length - 1)\n    .replaceAll(/-+$/g, '');\n\n  return suffix ? `${prefix}-${suffix}` : prefix;\n}\n\nfunction toIntegrationConnection(connection: WebhookConnectionDto): IntegrationConnectionDto {\n  return {\n    id: connection.id,\n    workspace_id: connection.workspace_id,\n    provider: 'webhook',\n    external_account_id: connection.slug,\n    slug: connection.slug,\n    display_name: connection.name,\n    lifecycle_status: connection.lifecycle_status,\n    capabilities: [],\n    created_at: connection.created_at,\n    updated_at: connection.updated_at,\n  };\n}\n"],"names":["createWebhookConnectionBodySchema","WEBHOOK_RESERVED_SLUGS","webhookSlugSchema","displayNameFieldError","Button","Callout","FormField","FormFieldInput","fieldError","Modal","ModalBody","ModalContent","ModalFooter","ModalHeader","ModalTitle","toast","Code","Text","useForm","useEffect","useRef","useState","useCreateWebhookConnectionMutation","webhookCreateErrorToFormError","WebhookCreateModal","workspaceId","open","onOpenChange","onCreated","createWebhook","formError","setFormError","hasManualSlug","setHasManualSlug","nameInputRef","form","defaultValues","name","slug","onSubmit","value","undefined","body","parse","workspace_id","trim","connection","mutateAsync","toIntegrationConnection","success","error","mapped","kind","setFieldMeta","field","prev","errorMap","onServer","message","reset","requestAnimationFrame","current","focus","handleOpenChange","nextOpen","isPending","aria-describedby","className","title","showClose","noValidate","event","preventDefault","stopPropagation","handleSubmit","size","role","type","Field","validators","onBlur","webhookNameFieldError","label","id","ref","state","onChange","nextName","target","handleChange","setFieldValue","suggestWebhookSlug","handleBlur","placeholder","disabled","webhookSlugFieldError","nextSlug","length","values","as","variant","onClick","isLoading","shape","trimmed","includes","safeParse","prefix","suffix","toLowerCase","replaceAll","slice","provider","external_account_id","display_name","lifecycle_status","capabilities","created_at","updated_at"],"mappings":"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"}

package/dist/components/webhook/webhook-form-errors.d.ts

@@ -0,0 +1,11 @@
+export type WebhookCreateField = 'slug';
+export type WebhookCreateFormErrorMapping = {
+    kind: 'field';
+    field: WebhookCreateField;
+    message: string;
+} | {
+    kind: 'form';
+    message: string;
+};
+export declare function webhookCreateErrorToFormError(error: unknown): WebhookCreateFormErrorMapping;
+//# sourceMappingURL=webhook-form-errors.d.ts.map

package/dist/components/webhook/webhook-form-errors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"webhook-form-errors.d.ts","sourceRoot":"","sources":["../../../src/components/webhook/webhook-form-errors.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,kBAAkB,GAAG,MAAM,CAAC;AAExC,MAAM,MAAM,6BAA6B,GACrC;IAAC,IAAI,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,kBAAkB,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAC,GAC3D;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAC,CAAC;AAEpC,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,OAAO,GAAG,6BAA6B,CAY3F"}

package/dist/components/webhook/webhook-form-errors.js

@@ -0,0 +1,27 @@
+import { ApiError } from '@shipfox/client-api';
+export function webhookCreateErrorToFormError(error) {
+    const code = error instanceof ApiError ? error.code : undefined;
+    if (code === 'slug-already-exists') {
+        return {
+            kind: 'field',
+            field: 'slug',
+            message: 'A webhook with this slug already exists.'
+        };
+    }
+    return {
+        kind: 'form',
+        message: webhookCreateErrorMessage(error)
+    };
+}
+function webhookCreateErrorMessage(error) {
+    if (error instanceof ApiError) {
+        if (error.code === 'network-error') {
+            return "We couldn't reach the server. Check your connection and try again.";
+        }
+        return error.message;
+    }
+    if (error instanceof Error) return error.message;
+    return 'Something went wrong. Try again.';
+}
+
+//# sourceMappingURL=webhook-form-errors.js.map

package/dist/components/webhook/webhook-form-errors.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/webhook/webhook-form-errors.ts"],"sourcesContent":["import {ApiError} from '@shipfox/client-api';\n\nexport type WebhookCreateField = 'slug';\n\nexport type WebhookCreateFormErrorMapping =\n  | {kind: 'field'; field: WebhookCreateField; message: string}\n  | {kind: 'form'; message: string};\n\nexport function webhookCreateErrorToFormError(error: unknown): WebhookCreateFormErrorMapping {\n  const code = error instanceof ApiError ? error.code : undefined;\n\n  if (code === 'slug-already-exists') {\n    return {\n      kind: 'field',\n      field: 'slug',\n      message: 'A webhook with this slug already exists.',\n    };\n  }\n\n  return {kind: 'form', message: webhookCreateErrorMessage(error)};\n}\n\nfunction webhookCreateErrorMessage(error: unknown): string {\n  if (error instanceof ApiError) {\n    if (error.code === 'network-error') {\n      return \"We couldn't reach the server. Check your connection and try again.\";\n    }\n    return error.message;\n  }\n  if (error instanceof Error) return error.message;\n  return 'Something went wrong. Try again.';\n}\n"],"names":["ApiError","webhookCreateErrorToFormError","error","code","undefined","kind","field","message","webhookCreateErrorMessage","Error"],"mappings":"AAAA,SAAQA,QAAQ,QAAO,sBAAsB;AAQ7C,OAAO,SAASC,8BAA8BC,KAAc;IAC1D,MAAMC,OAAOD,iBAAiBF,WAAWE,MAAMC,IAAI,GAAGC;IAEtD,IAAID,SAAS,uBAAuB;QAClC,OAAO;YACLE,MAAM;YACNC,OAAO;YACPC,SAAS;QACX;IACF;IAEA,OAAO;QAACF,MAAM;QAAQE,SAASC,0BAA0BN;IAAM;AACjE;AAEA,SAASM,0BAA0BN,KAAc;IAC/C,IAAIA,iBAAiBF,UAAU;QAC7B,IAAIE,MAAMC,IAAI,KAAK,iBAAiB;YAClC,OAAO;QACT;QACA,OAAOD,MAAMK,OAAO;IACtB;IACA,IAAIL,iBAAiBO,OAAO,OAAOP,MAAMK,OAAO;IAChD,OAAO;AACT"}

package/dist/components/webhook/webhook-modals.stories.d.ts

@@ -0,0 +1,25 @@
+import type { StoryObj } from '@storybook/react';
+type Scenario = 'create-form' | 'create-success' | 'usage-active' | 'usage-disabled' | 'delete-confirm' | 'copyable-value';
+interface WebhookModalStoryProps {
+    scenario: Scenario;
+}
+declare function WebhookModalStory({ scenario }: WebhookModalStoryProps): import("react").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof WebhookModalStory;
+    parameters: {
+        layout: string;
+    };
+    args: {
+        scenario: "create-form";
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const CreateSuccess: Story;
+export declare const UsageActive: Story;
+export declare const UsageDisabled: Story;
+export declare const DeleteConfirm: Story;
+export declare const CopyableValueState: Story;
+//# sourceMappingURL=webhook-modals.stories.d.ts.map

package/dist/components/webhook/webhook-modals.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"webhook-modals.stories.d.ts","sourceRoot":"","sources":["../../../src/components/webhook/webhook-modals.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAqBrD,KAAK,QAAQ,GACT,aAAa,GACb,gBAAgB,GAChB,cAAc,GACd,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,CAAC;AAErB,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAoCD,iBAAS,iBAAiB,CAAC,EAAC,QAAQ,EAAC,EAAE,sBAAsB,+BAoB5D;AAED,QAAA,MAAM,IAAI;;;;;;;;;CAKgC,CAAC;AAE3C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,KAAU,CAAC;AAEpC,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAEhC,CAAC"}