@bluecopa/react 0.1.0

package/README.md

@@ -0,0 +1,200 @@
+# @bluecopa/reactjs
+
+A React.js wrapper for TanStack React Query with Bluecopa core integration.
+
+## Installation
+
+```bash
+npm install @bluecopa/reactjs @bluecopa/core @tanstack/react-query
+```
+
+## Usage
+
+### 1. Setup the Provider
+
+Wrap your app with the `BlueCopaQueryProvider`:
+
+```tsx
+import React from 'react';
+import { BlueCopaQueryProvider } from '@bluecopa/reactjs';
+import { ApiClient } from '@bluecopa/core';
+
+const apiClient = new ApiClient({
+  baseURL: 'https://api.example.com',
+  // other config options
+});
+
+function App() {
+  return (
+    <BlueCopaQueryProvider 
+      config={{
+        apiClient,
+        defaultStaleTime: 5 * 60 * 1000, // 5 minutes
+        defaultCacheTime: 10 * 60 * 1000, // 10 minutes
+        enableDevtools: true,
+      }}
+    >
+      <YourAppComponents />
+    </BlueCopaQueryProvider>
+  );
+}
+```
+
+### 2. Using Queries
+
+```tsx
+import React from 'react';
+import { useQuery } from '@bluecopa/reactjs';
+
+function UserProfile({ userId }: { userId: string }) {
+  const { data, isLoading, error } = useQuery({
+    queryKey: {
+      scope: 'users',
+      endpoint: `/users/${userId}`,
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return <div>User: {data?.name}</div>;
+}
+```
+
+### 3. Using Mutations
+
+```tsx
+import React from 'react';
+import { usePost, usePut } from '@bluecopa/reactjs';
+
+function CreateUser() {
+  const createUser = usePost('/users', {
+    onSuccess: (data) => {
+      console.log('User created:', data);
+    },
+    onError: (error) => {
+      console.error('Failed to create user:', error);
+    },
+  });
+
+  const handleSubmit = (userData: any) => {
+    createUser.mutate(userData);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {/* form fields */}
+      <button 
+        type="submit" 
+        disabled={createUser.isPending}
+      >
+        {createUser.isPending ? 'Creating...' : 'Create User'}
+      </button>
+    </form>
+  );
+}
+```
+
+### 4. Using Infinite Queries
+
+```tsx
+import React from 'react';
+import { useInfiniteQuery } from '@bluecopa/reactjs';
+
+function UserList() {
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+  } = useInfiniteQuery({
+    queryKey: {
+      scope: 'users',
+      endpoint: '/users',
+      params: { limit: 10 },
+    },
+    getNextPageParam: (lastPage) => lastPage.nextPage,
+  });
+
+  if (isLoading) return <div>Loading...</div>;
+
+  return (
+    <div>
+      {data?.pages.map((page, i) => (
+        <div key={i}>
+          {page.data.map((user: any) => (
+            <div key={user.id}>{user.name}</div>
+          ))}
+        </div>
+      ))}
+      {hasNextPage && (
+        <button
+          onClick={() => fetchNextPage()}
+          disabled={isFetchingNextPage}
+        >
+          {isFetchingNextPage ? 'Loading more...' : 'Load More'}
+        </button>
+      )}
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### BlueCopaQueryProvider
+
+The main provider component that sets up React Query with Bluecopa core integration.
+
+#### Props
+
+- `config?: BlueCopaQueryConfig` - Configuration options
+
+#### BlueCopaQueryConfig
+
+```typescript
+interface BlueCopaQueryConfig {
+  apiClient?: ApiClient;
+  queryClient?: QueryClient;
+  defaultStaleTime?: number;
+  defaultCacheTime?: number;
+  defaultRetry?: number | boolean;
+  enableDevtools?: boolean;
+}
+```
+
+### Hooks
+
+#### useQuery
+
+Enhanced version of TanStack's useQuery with Bluecopa integration.
+
+#### useMutation, usePost, usePut, usePatch, useDelete
+
+Enhanced mutation hooks with built-in HTTP method support.
+
+#### useInfiniteQuery
+
+Enhanced infinite query hook for pagination.
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build the package
+pnpm build
+
+# Run in development mode (watch)
+pnpm dev
+
+# Run tests
+pnpm test
+```
+
+## License
+
+MIT

package/dist/COOQDZLH-8ygFcp7n.js

@@ -0,0 +1,33 @@
+import { c, T as l, P as m, a as u, D as v, Q as i } from "./VREWMQAW-DGhbq4hm.js";
+import { g as d, c as f, a as e } from "./index-bzN7KmNV.js";
+var p = (a) => {
+  const [r, t] = c({
+    prefix: "TanstackQueryDevtools"
+  }), n = d(), s = f(() => {
+    const o = r.theme_preference || l;
+    return o !== "system" ? o : n();
+  });
+  return e(i.Provider, {
+    value: a,
+    get children() {
+      return e(m, {
+        localStore: r,
+        setLocalStore: t,
+        get children() {
+          return e(u.Provider, {
+            value: s,
+            get children() {
+              return e(v, {
+                localStore: r,
+                setLocalStore: t
+              });
+            }
+          });
+        }
+      });
+    }
+  });
+}, C = p;
+export {
+  C as default
+};

package/dist/MU7WGUJF-DLX5YliY.js

@@ -0,0 +1,42 @@
+import { c as s, T as c, P as u, a as i, b as m, C as P, Q as d } from "./VREWMQAW-DGhbq4hm.js";
+import { g as v, c as C, a as e } from "./index-bzN7KmNV.js";
+var h = (t) => {
+  const [r, o] = s({
+    prefix: "TanstackQueryDevtools"
+  }), a = v(), l = C(() => {
+    const n = r.theme_preference || c;
+    return n !== "system" ? n : a();
+  });
+  return e(d.Provider, {
+    value: t,
+    get children() {
+      return e(u, {
+        disabled: !0,
+        localStore: r,
+        setLocalStore: o,
+        get children() {
+          return e(i.Provider, {
+            value: l,
+            get children() {
+              return e(m, {
+                get children() {
+                  return e(P, {
+                    localStore: r,
+                    setLocalStore: o,
+                    get onClose() {
+                      return t.onClose;
+                    },
+                    showPanelViewOnly: !0
+                  });
+                }
+              });
+            }
+          });
+        }
+      });
+    }
+  });
+}, p = h;
+export {
+  p as default
+};