@ominiflow/sdk-react 0.2.0-rc.0

package/README.md

@@ -0,0 +1,99 @@
+# @ominiflow/sdk-react
+
+Bindings React oficiais para o SDK TypeScript do OmniFlow. O pacote entrega `OmniFlowProvider`, hooks idiomáticos com TanStack Query e componentes opt-in para inbox rápido.
+
+## Instalação
+
+```bash
+npm install @ominiflow/sdk @ominiflow/sdk-react @tanstack/react-query
+# ou
+bun add @ominiflow/sdk @ominiflow/sdk-react @tanstack/react-query
+```
+
+## Quick Start
+
+```tsx
+import { OmniFlowProvider, MessageList, Composer, useSendMessage } from '@ominiflow/sdk-react';
+
+function ConversationPanel() {
+  const sendMessage = useSendMessage();
+
+  return (
+    <div style={{ display: 'grid', gap: 12 }}>
+      <MessageList conversationId="conv_123" />
+      <Composer
+        onSend={(text) =>
+          sendMessage.mutateAsync({
+            to: '+5511999999999',
+            channel: 'whatsapp_official',
+            content: { type: 'text', text },
+          })
+        }
+      />
+    </div>
+  );
+}
+
+export function App() {
+  return (
+    <OmniFlowProvider config={{ jwt: 'jwt_emitido_pelo_backend', baseUrl: 'https://api.omniflow.com.br' }}>
+      <ConversationPanel />
+    </OmniFlowProvider>
+  );
+}
+```
+
+## Provider
+
+O `OmniFlowProvider` aceita um `client` já instanciado ou `config` do `@ominiflow/sdk`.
+
+```tsx
+<OmniFlowProvider config={{ jwt: 'jwt_frontend', baseUrl: 'https://api.omniflow.com.br' }}>
+  <App />
+</OmniFlowProvider>
+
+<OmniFlowProvider config={{ apiKey: 'omf_live_...' }}>
+  <App />
+</OmniFlowProvider>
+
+<OmniFlowProvider
+  config={{
+    oauth: { clientId: 'client_123', clientSecret: 'secret_123' },
+    baseUrl: 'https://api.omniflow.com.br',
+  }}
+>
+  <App />
+</OmniFlowProvider>
+```
+
+## Hooks
+
+### `useOmniFlow()`
+
+Retorna a instância do `OmniFlow` provida pelo contexto.
+
+### `useConversations(filters?)`
+
+Executa `client.conversations.list(filters)` com query key namespaced.
+
+### `useMessages(conversationId, options?)`
+
+Executa paginação cursor de mensagens com `useInfiniteQuery`.
+
+### `useSendMessage()`
+
+Envia mensagens de texto/imagem/template com optimistic update quando `conversationId` é informado.
+
+## Componentes
+
+### `<MessageList conversationId={...} />`
+
+- renderiza mensagens da conversa
+- busca próxima página ao rolar para o topo
+- placeholder de estado vazio
+
+### `<Composer onSend={...} />`
+
+- textarea com envio por Enter
+- emoji picker simples
+- seletor de anexo opcional

package/dist/components.d.ts

@@ -0,0 +1,15 @@
+export type MessageListProps = {
+    conversationId: string;
+    pageSize?: number;
+    emptyState?: string;
+    height?: number | string;
+};
+export declare function MessageList({ conversationId, pageSize, emptyState, height, }: MessageListProps): import("react/jsx-runtime").JSX.Element;
+export type ComposerProps = {
+    onSend: (text: string) => void | Promise<void>;
+    onAttachmentSelect?: (file: File) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    emojiOptions?: string[];
+};
+export declare function Composer({ onSend, onAttachmentSelect, disabled, placeholder, emojiOptions, }: ComposerProps): import("react/jsx-runtime").JSX.Element;

package/dist/hooks.d.ts

@@ -0,0 +1,14 @@
+import type { ConversationFilters, ListMessagesParams, MessageDto, PaginatedResult, SendMessageParams, SendTemplateParams } from '@omniflow/sdk';
+export type UseSendMessageParams = SendMessageParams | SendTemplateParams;
+export type UseSendMessageOptions = {
+    conversationId?: string;
+};
+export type UseMessagesOptions = ListMessagesParams;
+type MutationContext = {
+    optimisticMessage?: MessageDto;
+};
+export declare function useOmniFlow(): import("@omniflow/sdk").OmniFlow;
+export declare function useConversations(filters?: ConversationFilters): import("@tanstack/react-query").UseQueryResult<PaginatedResult<import("@omniflow/sdk").ConversationDto>, Error>;
+export declare function useMessages(conversationId: string, options?: UseMessagesOptions): import("@tanstack/react-query").UseInfiniteQueryResult<import("@tanstack/react-query").InfiniteData<PaginatedResult<MessageDto>, unknown>, Error>;
+export declare function useSendMessage(options?: UseSendMessageOptions): import("@tanstack/react-query").UseMutationResult<MessageDto, Error, UseSendMessageParams, MutationContext>;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { OmniFlowProvider, useOmniFlowContext } from './provider';
+export { Composer, MessageList } from './components';
+export { useConversations, useMessages, useOmniFlow, useSendMessage } from './hooks';
+export { conversationsQueryKey, messagesQueryKey, messagesQueryRoot, OMNIFLOW_CONVERSATIONS_QUERY_ROOT, OMNIFLOW_QUERY_ROOT, } from './query-keys';
+export type { OmniFlowProviderProps } from './provider';
+export type { ComposerProps, MessageListProps } from './components';
+export type { UseMessagesOptions, UseSendMessageOptions, UseSendMessageParams } from './hooks';

package/dist/index.js

@@ -0,0 +1,471 @@
+// src/provider.tsx
+import { OmniFlow } from "@omniflow/sdk";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+
+// src/query-keys.ts
+var OMNIFLOW_QUERY_ROOT = ["omniflow"];
+var OMNIFLOW_CONVERSATIONS_QUERY_ROOT = [...OMNIFLOW_QUERY_ROOT, "conversations"];
+function conversationsQueryKey(filters = {}) {
+  return [...OMNIFLOW_CONVERSATIONS_QUERY_ROOT, filters];
+}
+function messagesQueryRoot(conversationId) {
+  return [...OMNIFLOW_QUERY_ROOT, "messages", conversationId];
+}
+function messagesQueryKey(conversationId, params = {}) {
+  return [...messagesQueryRoot(conversationId), params];
+}
+
+// src/provider.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+var OmniFlowReactContext = createContext(null);
+function resolveClient(props) {
+  if ("client" in props) {
+    if (!props.client) {
+      throw new Error("client is required");
+    }
+    return props.client;
+  }
+  return new OmniFlow(props.config);
+}
+function getRealtimeTarget(eventTarget) {
+  if (eventTarget)
+    return eventTarget;
+  if (typeof window !== "undefined")
+    return window;
+  return;
+}
+function OmniFlowProvider({
+  children,
+  queryClient: providedQueryClient,
+  eventTarget,
+  eventName = "omniflow:event",
+  ...props
+}) {
+  const clientRef = useRef(null);
+  const client = clientRef.current ?? resolveClient(props);
+  clientRef.current = client;
+  const [queryClient] = useState(() => providedQueryClient ?? new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 30000
+      }
+    }
+  }));
+  useEffect(() => {
+    const target = getRealtimeTarget(eventTarget);
+    if (!target)
+      return;
+    const handleRealtimeEvent = (event) => {
+      const detail = event instanceof CustomEvent ? event.detail : null;
+      if (!detail) {
+        return;
+      }
+      if (detail.type === "message.received") {
+        queryClient.invalidateQueries({ queryKey: OMNIFLOW_CONVERSATIONS_QUERY_ROOT });
+        if (detail.conversationId) {
+          queryClient.invalidateQueries({
+            queryKey: messagesQueryRoot(detail.conversationId)
+          });
+        }
+        return;
+      }
+      if (detail.type === "conversation.created" || detail.type === "conversation.resolved") {
+        queryClient.invalidateQueries({ queryKey: OMNIFLOW_CONVERSATIONS_QUERY_ROOT });
+        return;
+      }
+      queryClient.invalidateQueries({ queryKey: OMNIFLOW_QUERY_ROOT });
+    };
+    target.addEventListener(eventName, handleRealtimeEvent);
+    return () => {
+      target.removeEventListener(eventName, handleRealtimeEvent);
+    };
+  }, [eventName, eventTarget, queryClient]);
+  return /* @__PURE__ */ jsxDEV(OmniFlowReactContext.Provider, {
+    value: { client, queryClient },
+    children: /* @__PURE__ */ jsxDEV(QueryClientProvider, {
+      client: queryClient,
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function useOmniFlowContext() {
+  const context = useContext(OmniFlowReactContext);
+  if (!context) {
+    throw new Error("OmniFlowProvider is required");
+  }
+  return context;
+}
+// src/components.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+
+// src/hooks.ts
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+function isTemplateSend(params) {
+  return "templateId" in params;
+}
+function toMessageContent(params) {
+  if (isTemplateSend(params)) {
+    return {
+      type: "template",
+      templateId: params.templateId,
+      params: params.params
+    };
+  }
+  return params.content;
+}
+function buildOptimisticMessage(conversationId, params) {
+  return {
+    id: `optimistic-${Date.now()}`,
+    conversationId,
+    direction: "OUTBOUND",
+    content: toMessageContent(params),
+    createdAt: new Date().toISOString()
+  };
+}
+function useOmniFlow() {
+  return useOmniFlowContext().client;
+}
+function useConversations(filters = {}) {
+  const client = useOmniFlow();
+  return useQuery({
+    queryKey: conversationsQueryKey(filters),
+    queryFn: () => client.conversations.list(filters)
+  });
+}
+function useMessages(conversationId, options = {}) {
+  const client = useOmniFlow();
+  return useInfiniteQuery({
+    queryKey: messagesQueryKey(conversationId, options),
+    enabled: Boolean(conversationId),
+    initialPageParam: options.cursor,
+    queryFn: ({ pageParam }) => client.messages.list(conversationId, {
+      ...options,
+      ...pageParam ? { cursor: pageParam } : {}
+    }),
+    getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined
+  });
+}
+function useSendMessage(options = {}) {
+  const client = useOmniFlow();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (params) => isTemplateSend(params) ? client.templates.send(params) : client.messages.send(params),
+    onMutate: async (params) => {
+      if (!options.conversationId) {
+        return {};
+      }
+      const key = messagesQueryRoot(options.conversationId);
+      await queryClient.cancelQueries({ queryKey: key });
+      const optimisticMessage = buildOptimisticMessage(options.conversationId, params);
+      queryClient.setQueriesData({ queryKey: key }, (current) => {
+        if (!current) {
+          return current;
+        }
+        return {
+          ...current,
+          pages: current.pages.map((page, index) => {
+            if (index !== 0) {
+              return page;
+            }
+            return {
+              ...page,
+              data: [optimisticMessage, ...page.data]
+            };
+          })
+        };
+      });
+      return { optimisticMessage };
+    },
+    onSuccess: (_message, _params) => {
+      queryClient.invalidateQueries({ queryKey: OMNIFLOW_CONVERSATIONS_QUERY_ROOT });
+      if (options.conversationId) {
+        queryClient.invalidateQueries({ queryKey: messagesQueryRoot(options.conversationId) });
+      }
+    },
+    onError: (_error, _params, context) => {
+      if (!options.conversationId || !context?.optimisticMessage) {
+        return;
+      }
+      queryClient.setQueriesData({ queryKey: messagesQueryRoot(options.conversationId) }, (current) => {
+        if (!current) {
+          return current;
+        }
+        return {
+          ...current,
+          pages: current.pages.map((page) => ({
+            ...page,
+            data: page.data.filter((message) => message.id !== context.optimisticMessage?.id)
+          }))
+        };
+      });
+    }
+  });
+}
+
+// src/components.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+var DEFAULT_EMOJIS = ["\uD83D\uDE00", "\uD83D\uDC4D", "\uD83C\uDF89", "❤️"];
+function formatMessageContent(message) {
+  if (message.content.type === "text") {
+    return message.content.text;
+  }
+  if (message.content.type === "image") {
+    return message.content.caption || message.content.url;
+  }
+  return `Template: ${message.content.templateId}`;
+}
+function formatTime(iso) {
+  try {
+    return new Date(iso).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  } catch {
+    return "";
+  }
+}
+function MessageList({
+  conversationId,
+  pageSize = 20,
+  emptyState = "Nenhuma mensagem ainda",
+  height = 360
+}) {
+  const listRef = useRef2(null);
+  const { data, isPending, hasNextPage, fetchNextPage, isFetchingNextPage } = useMessages(conversationId, { limit: pageSize });
+  const messages = (data?.pages ?? []).flatMap((page) => page.data);
+  const messageCount = messages.length;
+  useEffect2(() => {
+    const element = listRef.current;
+    if (!element || messageCount === 0) {
+      return;
+    }
+    try {
+      element.scrollTo?.({ top: element.scrollHeight });
+    } catch {}
+  }, [messageCount]);
+  const handleScroll = () => {
+    const element = listRef.current;
+    if (!element || !hasNextPage || isFetchingNextPage) {
+      return;
+    }
+    if (element.scrollTop <= 32) {
+      fetchNextPage();
+    }
+  };
+  if (!conversationId) {
+    return /* @__PURE__ */ jsxDEV2("div", {
+      role: "log",
+      children: emptyState
+    }, undefined, false, undefined, this);
+  }
+  if (isPending) {
+    return /* @__PURE__ */ jsxDEV2("div", {
+      role: "log",
+      children: "Carregando mensagens..."
+    }, undefined, false, undefined, this);
+  }
+  if (messages.length === 0) {
+    return /* @__PURE__ */ jsxDEV2("div", {
+      role: "log",
+      children: emptyState
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV2("div", {
+    ref: listRef,
+    role: "log",
+    "aria-live": "polite",
+    "data-omniflow-message-list": true,
+    onScroll: handleScroll,
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      overflowY: "auto",
+      height,
+      padding: "12px",
+      border: "1px solid #e5e7eb",
+      borderRadius: "12px",
+      background: "#ffffff"
+    },
+    children: [
+      hasNextPage ? /* @__PURE__ */ jsxDEV2("div", {
+        style: { alignSelf: "center", color: "#6b7280", fontSize: "12px" },
+        children: isFetchingNextPage ? "Carregando mais..." : "Role para carregar mais"
+      }, undefined, false, undefined, this) : null,
+      messages.map((message) => {
+        const outbound = message.direction === "OUTBOUND";
+        return /* @__PURE__ */ jsxDEV2("div", {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: outbound ? "flex-end" : "flex-start"
+          },
+          children: [
+            /* @__PURE__ */ jsxDEV2("div", {
+              style: {
+                maxWidth: "80%",
+                padding: "10px 12px",
+                borderRadius: outbound ? "16px 16px 4px 16px" : "16px 16px 16px 4px",
+                background: outbound ? "#0f766e" : "#f3f4f6",
+                color: outbound ? "#ffffff" : "#111827",
+                lineHeight: "1.4",
+                wordBreak: "break-word"
+              },
+              children: formatMessageContent(message)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2("span", {
+              style: { marginTop: "4px", fontSize: "11px", color: "#6b7280" },
+              children: formatTime(message.createdAt)
+            }, undefined, false, undefined, this)
+          ]
+        }, message.id, true, undefined, this);
+      })
+    ]
+  }, undefined, true, undefined, this);
+}
+function Composer({
+  onSend,
+  onAttachmentSelect,
+  disabled = false,
+  placeholder = "Digite uma mensagem",
+  emojiOptions = DEFAULT_EMOJIS
+}) {
+  const [text, setText] = useState2("");
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState2(false);
+  const fileInputRef = useRef2(null);
+  const handleSubmit = async () => {
+    const trimmed = text.trim();
+    if (!trimmed || disabled) {
+      return;
+    }
+    await onSend(trimmed);
+    setText("");
+  };
+  const canSend = text.trim().length > 0 && !disabled;
+  return /* @__PURE__ */ jsxDEV2("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      padding: "12px",
+      border: "1px solid #e5e7eb",
+      borderRadius: "12px",
+      background: "#ffffff"
+    },
+    children: [
+      emojiPickerOpen ? /* @__PURE__ */ jsxDEV2("div", {
+        style: { display: "flex", gap: "6px", flexWrap: "wrap" },
+        children: emojiOptions.map((emoji) => /* @__PURE__ */ jsxDEV2("button", {
+          type: "button",
+          "data-emoji": emoji,
+          onClick: () => {
+            setText((current) => `${current}${emoji}`);
+            setEmojiPickerOpen(false);
+          },
+          style: {
+            border: "1px solid #d1d5db",
+            borderRadius: "8px",
+            background: "#fff",
+            padding: "6px 8px",
+            cursor: "pointer"
+          },
+          children: emoji
+        }, emoji, false, undefined, this))
+      }, undefined, false, undefined, this) : null,
+      /* @__PURE__ */ jsxDEV2("div", {
+        style: { display: "flex", alignItems: "flex-end", gap: "8px" },
+        children: [
+          /* @__PURE__ */ jsxDEV2("button", {
+            type: "button",
+            "aria-label": "Adicionar emoji",
+            onClick: () => {
+              setEmojiPickerOpen((current) => !current);
+            },
+            children: "\uD83D\uDE42"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("button", {
+            type: "button",
+            "aria-label": "Adicionar anexo",
+            onClick: () => {
+              fileInputRef.current?.click();
+            },
+            children: "+"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("input", {
+            ref: fileInputRef,
+            type: "file",
+            style: { display: "none" },
+            onChange: (event) => {
+              const file = event.target.files?.[0];
+              if (!file) {
+                return;
+              }
+              onAttachmentSelect?.(file);
+              event.target.value = "";
+            }
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("textarea", {
+            value: text,
+            rows: 1,
+            placeholder,
+            disabled,
+            onInput: (event) => {
+              setText(event.target.value);
+            },
+            onKeyDown: (event) => {
+              if (event.key === "Enter" && !event.shiftKey) {
+                event.preventDefault();
+                handleSubmit();
+              }
+            },
+            style: {
+              flex: 1,
+              minHeight: "40px",
+              maxHeight: "120px",
+              resize: "vertical",
+              borderRadius: "10px",
+              border: "1px solid #d1d5db",
+              padding: "10px 12px",
+              fontFamily: "inherit"
+            }
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("button", {
+            type: "button",
+            "aria-label": "Enviar mensagem",
+            disabled: !canSend,
+            onClick: () => {
+              handleSubmit();
+            },
+            style: {
+              border: "none",
+              borderRadius: "9999px",
+              padding: "10px 14px",
+              background: canSend ? "#0f766e" : "#d1d5db",
+              color: "#ffffff"
+            },
+            children: "Enviar"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  useSendMessage,
+  useOmniFlowContext,
+  useOmniFlow,
+  useMessages,
+  useConversations,
+  messagesQueryRoot,
+  messagesQueryKey,
+  conversationsQueryKey,
+  OmniFlowProvider,
+  OMNIFLOW_QUERY_ROOT,
+  OMNIFLOW_CONVERSATIONS_QUERY_ROOT,
+  MessageList,
+  Composer
+};

package/dist/provider.d.ts

@@ -0,0 +1,25 @@
+import { OmniFlow, type OmniFlowConfig } from '@omniflow/sdk';
+import { QueryClient } from '@tanstack/react-query';
+import { type PropsWithChildren } from 'react';
+type OmniFlowProviderWithConfigProps = {
+    config: OmniFlowConfig;
+    client?: never;
+    queryClient?: QueryClient;
+    eventTarget?: EventTarget;
+    eventName?: string;
+};
+type OmniFlowProviderWithClientProps = {
+    client: OmniFlow;
+    config?: never;
+    queryClient?: QueryClient;
+    eventTarget?: EventTarget;
+    eventName?: string;
+};
+export type OmniFlowProviderProps = PropsWithChildren<OmniFlowProviderWithConfigProps | OmniFlowProviderWithClientProps>;
+type OmniFlowReactContextValue = {
+    client: OmniFlow;
+    queryClient: QueryClient;
+};
+export declare function OmniFlowProvider({ children, queryClient: providedQueryClient, eventTarget, eventName, ...props }: OmniFlowProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useOmniFlowContext(): OmniFlowReactContextValue;
+export {};

package/dist/query-keys.d.ts

@@ -0,0 +1,6 @@
+import type { ConversationFilters, ListMessagesParams } from '@omniflow/sdk';
+export declare const OMNIFLOW_QUERY_ROOT: readonly ["omniflow"];
+export declare const OMNIFLOW_CONVERSATIONS_QUERY_ROOT: readonly ["omniflow", "conversations"];
+export declare function conversationsQueryKey(filters?: ConversationFilters): readonly ["omniflow", "conversations", ConversationFilters];
+export declare function messagesQueryRoot(conversationId: string): readonly ["omniflow", "messages", string];
+export declare function messagesQueryKey(conversationId: string, params?: ListMessagesParams): readonly ["omniflow", "messages", string, ListMessagesParams];

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@ominiflow/sdk-react",
+  "version": "0.2.0-rc.0",
+  "description": "React bindings for the OmniFlow TypeScript SDK",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "pretest": "bun run --cwd ../sdk build",
+    "build": "bun build ./src/index.ts --outdir dist --format esm --external react --external react-dom --external react/jsx-runtime --external @tanstack/react-query --external @omniflow/sdk && tsc --emitDeclarationOnly --declaration --declarationMap false --outDir dist",
+    "prebuild": "bun run --cwd ../sdk build",
+    "prestorybook": "bun run --cwd ../sdk build",
+    "storybook": "storybook dev -p 6006",
+    "prebuild-storybook": "bun run --cwd ../sdk build",
+    "build-storybook": "storybook build --output-dir storybook-static",
+    "typecheck": "tsc --noEmit",
+    "test": "bun test",
+    "lint": "biome check ."
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@ominiflow/sdk": "workspace:*"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^14.0.0",
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
+    "@tanstack/react-query": "^5.0.0",
+    "@types/bun": "latest",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^10.3.5",
+    "vite": "^6.0.0"
+  },
+  "sideEffects": false
+}