@collective-intelligence/ui-react 0.1.26 → 0.1.27

package/README.md

@@ -98,6 +98,46 @@ or `open` with `onOpenChange` to control it. Labels, translations, diagnostic
 formatting and error recovery remain with the caller. Use `className` and
 `classes` to customize the root and individual presentation parts.
 
+## Failed write toast
+
+Import `ciWriteFailedToast` and `Toaster` from
+`@collective-intelligence/ui-react/ui`. `ciWriteFailedToast(messages?)` returns
+a handler for the `onWriteFailed` prop of `CollectiveIntelligenceProvider`
+(`@collective-intelligence/external-apps-client-sdk-react`). The handler calls
+`toast.error` with one text:
+
+- For a `CiError`, the English text of its `code`.
+- For a `CiTransportError`, an English connection text. It does not say that the change was
+  not saved: when the answer of a write is lost, CI can have saved it.
+
+To use other texts, for example in another language, pass `messages`
+(`CiWriteFailedMessages`). Its keys are the `CiError` codes and `transport`. A
+key that you do not give keeps its English text.
+
+```tsx
+import {
+  Toaster,
+  ciWriteFailedToast
+} from "@collective-intelligence/ui-react/ui"
+
+const onWriteFailed = ciWriteFailedToast({
+  conflict: "Quelqu'un a modifié cet élément.",
+  transport:
+    "Pas de connexion. La modification n'est peut-être pas enregistrée."
+})
+
+;<CollectiveIntelligenceProvider client={client} onWriteFailed={onWriteFailed}>
+  <App />
+  <Toaster />
+</CollectiveIntelligenceProvider>
+```
+
+The handler reads only the `_tag` and `code` of the error
+(`CiWriteFailedEvent`), so this package does not depend on the client SDK. The
+toast shows in the `Toaster` only when the app has one copy of this package:
+two copies have two toast stores. For this reason the client SDK for React has
+this package as a peer dependency.
+
 ## Card options
 
 Import `CardOptionsBlock`, `CheckboxCardOption` and `RadioCardOption` from

package/dist/components/ui/index.d.ts

@@ -126,6 +126,21 @@ export declare const CarouselItem: ({ className, ...props }: React$1.ComponentPr
 export declare const CarouselPrevious: ({ className, variant, size, ...props }: React$1.ComponentProps<typeof Button>) => React$1.JSX.Element;
 export declare const CarouselNext: ({ className, variant, size, ...props }: React$1.ComponentProps<typeof Button>) => React$1.JSX.Element;
 export declare const Checkbox: ({ className, ...props }: React$1.ComponentProps<typeof CheckboxPrimitive.Root>) => React$1.JSX.Element;
+export type CiErrorCode = "conflict" | "forbidden" | "internal" | "invalid_request" | "not_found" | "rate_limited" | "unauthenticated" | "unavailable";
+/** The part of a client SDK `WriteFailed` event that the toast reads. */
+export type CiWriteFailedEvent = Readonly<{
+	error: Readonly<{
+		_tag: "CiError";
+		code: CiErrorCode;
+	}> | Readonly<{
+		_tag: "CiTransportError";
+	}>;
+}>;
+export type TextKey = CiErrorCode | "transport";
+/** App texts by `CiError` code, and `transport` for a `CiTransportError`. */
+export type CiWriteFailedMessages = Partial<Readonly<Record<TextKey, string>>>;
+/** Returns an `onWriteFailed` handler that shows a failed write as an error toast. */
+export declare const ciWriteFailedToast: (messages?: CiWriteFailedMessages) => ({ error }: CiWriteFailedEvent) => void;
 export declare const Collapsible: ({ ...props }: React$1.ComponentProps<typeof CollapsiblePrimitive.Root>) => React$1.JSX.Element;
 export declare const CollapsibleTrigger: ({ ...props }: React$1.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) => React$1.JSX.Element;
 export declare const CollapsibleContent: ({ ...props }: React$1.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) => React$1.JSX.Element;