@scalar/api-client-react 0.5.15 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,290 @@
 # @scalar/api-client-react
 
+## 1.0.2
+
+### Patch Changes
+
+- 5d19345: feat(api-client-react): adds use client directive at the top of file for next.js
+- Updated dependencies [d5408e8]
+  - @scalar/api-client@2.0.29
+
+## 1.0.1
+
+### Patch Changes
+
+- 2945efe: chore: make api client react public
+
+## 1.0.0
+
+### Major Changes
+
+- e41c15e: fix: SSR issue with api-client-react
+
+## 0.5.45
+
+### Patch Changes
+
+- 33f5a09: fix: revived the api-client-react package
+- Updated dependencies [23d498b]
+- Updated dependencies [624696e]
+- Updated dependencies [41341e9]
+- Updated dependencies [5402338]
+- Updated dependencies [33f5a09]
+- Updated dependencies [9f4db12]
+- Updated dependencies [aee3783]
+- Updated dependencies [9ca5d7d]
+- Updated dependencies [d97bffd]
+  - @scalar/api-client@2.0.28
+
+## 0.5.44
+
+### Patch Changes
+
+- Updated dependencies [19d8b6a]
+- Updated dependencies [c112f24]
+- Updated dependencies [83fc241]
+- Updated dependencies [2e1ef12]
+  - @scalar/api-client@2.0.27
+
+## 0.5.43
+
+### Patch Changes
+
+- Updated dependencies [54f7654]
+- Updated dependencies [b0b3290]
+- Updated dependencies [7e01b12]
+- Updated dependencies [b7211fb]
+  - @scalar/api-client@2.0.26
+
+## 0.5.42
+
+### Patch Changes
+
+- Updated dependencies [591fe24]
+- Updated dependencies [7f17fe4]
+- Updated dependencies [1dab515]
+- Updated dependencies [4d76ff5]
+- Updated dependencies [e8cd161]
+- Updated dependencies [a431eb0]
+- Updated dependencies [ff59399]
+- Updated dependencies [ec47287]
+- Updated dependencies [747e80e]
+- Updated dependencies [9d561b7]
+  - @scalar/api-client@2.0.25
+
+## 0.5.41
+
+### Patch Changes
+
+- Updated dependencies [7076725]
+- Updated dependencies [1e72b03]
+- Updated dependencies [cbe984b]
+  - @scalar/api-client@2.0.24
+
+## 0.5.40
+
+### Patch Changes
+
+- Updated dependencies [3928ac3]
+  - @scalar/api-client@2.0.23
+
+## 0.5.39
+
+### Patch Changes
+
+- Updated dependencies [45b956f]
+  - @scalar/api-client@2.0.22
+
+## 0.5.38
+
+### Patch Changes
+
+- Updated dependencies [d48e4ac]
+  - @scalar/api-client@2.0.21
+
+## 0.5.37
+
+### Patch Changes
+
+- @scalar/api-client@2.0.20
+
+## 0.5.36
+
+### Patch Changes
+
+- Updated dependencies [a0bb23a]
+  - @scalar/api-client@2.0.19
+
+## 0.5.35
+
+### Patch Changes
+
+- Updated dependencies [8654323]
+  - @scalar/api-client@2.0.18
+
+## 0.5.34
+
+### Patch Changes
+
+- Updated dependencies [91b97fa]
+- Updated dependencies [05bc858]
+- Updated dependencies [05bc858]
+  - @scalar/api-client@2.0.17
+
+## 0.5.33
+
+### Patch Changes
+
+- fc096b6: refactor!: rename `createScalarApiClient` to `createApiClientModal`
+- Updated dependencies [a5b295c]
+- Updated dependencies [bff602a]
+- Updated dependencies [6f4d20d]
+- Updated dependencies [1ba4267]
+- Updated dependencies [58da2c6]
+- Updated dependencies [9e3348a]
+- Updated dependencies [fe16789]
+- Updated dependencies [fc096b6]
+- Updated dependencies [ebdc9cf]
+  - @scalar/api-client@2.0.16
+
+## 0.5.32
+
+### Patch Changes
+
+- Updated dependencies [f86a242]
+  - @scalar/api-client@2.0.15
+
+## 0.5.31
+
+### Patch Changes
+
+- Updated dependencies [6b32eee]
+- Updated dependencies [1a675be]
+- Updated dependencies [a1d59de]
+  - @scalar/api-client@2.0.14
+
+## 0.5.30
+
+### Patch Changes
+
+- Updated dependencies [618285e]
+  - @scalar/api-client@2.0.13
+
+## 0.5.29
+
+### Patch Changes
+
+- Updated dependencies [0a33194]
+  - @scalar/api-client@2.0.12
+
+## 0.5.28
+
+### Patch Changes
+
+- Updated dependencies [e8a7f82]
+- Updated dependencies [c16413d]
+- Updated dependencies [b9a7a4e]
+  - @scalar/api-client@2.0.11
+
+## 0.5.27
+
+### Patch Changes
+
+- Updated dependencies [b65d1fa]
+- Updated dependencies [b655c7a]
+  - @scalar/api-client@2.0.10
+
+## 0.5.26
+
+### Patch Changes
+
+- Updated dependencies [1bb94c7]
+- Updated dependencies [f1b5390]
+- Updated dependencies [ad7fd7e]
+  - @scalar/api-client@2.0.9
+
+## 0.5.25
+
+### Patch Changes
+
+- Updated dependencies [ba3f5cb]
+- Updated dependencies [0b6e3aa]
+- Updated dependencies [d58841b]
+  - @scalar/api-client@2.0.8
+
+## 0.5.24
+
+### Patch Changes
+
+- Updated dependencies [f2e3b0e]
+  - @scalar/api-client@2.0.7
+
+## 0.5.23
+
+### Patch Changes
+
+- Updated dependencies [4385ae2]
+- Updated dependencies [632d6f7]
+- Updated dependencies [a5aedf5]
+- Updated dependencies [a5aedf5]
+- Updated dependencies [d6a2a4d]
+- Updated dependencies [cd5d1a4]
+  - @scalar/api-client@2.0.6
+
+## 0.5.22
+
+### Patch Changes
+
+- Updated dependencies [6709507]
+- Updated dependencies [8f06fcd]
+- Updated dependencies [8f06fcd]
+- Updated dependencies [cdfb8c5]
+  - @scalar/api-client@2.0.5
+
+## 0.5.21
+
+### Patch Changes
+
+- @scalar/api-client@2.0.4
+
+## 0.5.20
+
+### Patch Changes
+
+- Updated dependencies [9f208d5]
+  - @scalar/api-client@2.0.3
+
+## 0.5.19
+
+### Patch Changes
+
+- Updated dependencies [209a7e1]
+- Updated dependencies [429e928]
+- Updated dependencies [3ba80b9]
+  - @scalar/api-client@2.0.2
+
+## 0.5.18
+
+### Patch Changes
+
+- Updated dependencies [ec52346]
+- Updated dependencies [ded1303]
+- Updated dependencies [6aae9fe]
+  - @scalar/api-client@2.0.1
+
+## 0.5.17
+
+### Patch Changes
+
+- Updated dependencies [bd67d8f]
+  - @scalar/api-client@2.0.0
+
+## 0.5.16
+
+### Patch Changes
+
+- @scalar/api-client@1.3.21
+
 ## 0.5.15
 
 ### Patch Changes

package/README.md

@@ -13,79 +13,35 @@ npm install @scalar/api-client-react
 
 ## Usage
 
-```ts
-import { ApiClientReact } from '@scalar/api-client-react'
-import React, { useState } from 'react'
-
-export const Wrapper = () => {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <>
-      <button onClick={() => setIsOpen(true)}>
-        Click me to open the Api Client
-      </button>
-
-      <ApiClientReact
-        close={() => setIsOpen(false)}
-        isOpen={isOpen}
-        request={{
-          url: 'https://api.sampleapis.com',
-          type: 'GET',
-          path: '/simpsons/products',
-        }}
-      />
-    </>
-  )
-}
-```
-
-You will also need one of the following classes on a parent element:
-
-```css
-.dark-mode
-.light-mode
+First we need to add the provider, you should add it in the highest place you have a unique spec.
+
+```tsx
+import { ApiClientModalProvider } from '@scalar/api-client-react'
+import '@scalar/api-client-react/style.css'
+
+;<ApiClientModalProvider
+  configuration={{
+    spec: {
+      url: 'https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/latest.json',
+    },
+  }}>
+  {children}
+</ApiClientModalProvider>
 ```
 
-## Props
+Then you can trigger it from anywhere inside of that provider by calling the `useApiClientModal()`
 
-### close: function
+```tsx
+import { useApiClientModal } from '@scalar/api-client-react'
 
-function to close the dialog, as seen above
+const client = useApiClientModal()
 
-### isOpen: boolean
-
-boolean which controls the visibility of the dialog containing the client
-
-### request: ClientRequestConfig
-
-```ts
-export type ClientRequestConfig = {
-  id?: string
-  name?: string
-  url: string
-  /** HTTP Request Method */
-  type: string
-  /** Request path */
-  path: string
-  /** Variables */
-  variables?: BaseParameter[]
-  /** Query parameters */
-  query?: Query[]
-  /** Cookies */
-  cookies?: Cookie[]
-  /** Request headers */
-  headers?: Header[]
-  /** Content type matched body */
-  body?: string
-  /** Optional form data body */
-  formData?: FormDataItem[]
-}
+return (
+  <button
+    onClick={() => client?.open({ path: '/auth/token', method: 'get' })}>
+    Click me to open the Api Client
+  </button>
+)
 ```
 
-## ApiClientReactBase
-
-We also export the base component if you do not want the modal.
-`ApiClientReactBase`
-
-Details on how to use it can be found in the source code for `ApiClientReact`
+Check out the playground for a working example.

package/dist/ApiClientModalProvider.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsxs as p, jsx as C } from "react/jsx-runtime";
+import { createContext as d, useRef as A, useState as s, useEffect as i, useContext as T } from "react";
+/* empty css          */
+const o = d(null);
+globalThis.__VUE_OPTIONS_API__ = !0;
+globalThis.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = !0;
+globalThis.__VUE_PROD_DEVTOOLS__ = !1;
+const S = ({
+  children: c,
+  configuration: l = {}
+}) => {
+  const e = A(null), [n, u] = s(null), [_, r] = s(null);
+  return i(() => {
+    (async () => {
+      const { createApiClientModalSync: a } = await import("@scalar/api-client");
+      u(() => a);
+    })();
+  }, []), i(() => {
+    if (!(e != null && e.current) || !n) return;
+    const t = n(e.current, l, !0, !0);
+    return r(t), l.spec && t.updateSpec(l.spec), () => {
+      t.app.unmount(), r(null);
+    };
+  }, [e, n]), /* @__PURE__ */ p(o.Provider, { value: _, children: [
+    /* @__PURE__ */ C("div", { ref: e }),
+    c
+  ] });
+}, x = () => T(o);
+export {
+  S as ApiClientModalProvider,
+  x as useApiClientModal
+};

package/dist/index.d.ts

@@ -1,25 +1,35 @@
-import { ClientRequestConfig } from '@scalar/api-client';
+import { App } from 'vue';
+import { AuthenticationState } from '@scalar/oas-utils';
+import { ClientConfiguration } from '@scalar/api-client';
 import { default as default_2 } from 'react';
+import { OpenClientPayload } from '@scalar/api-client';
+import { PropsWithChildren } from 'react';
+import { SpecConfiguration } from '@scalar/oas-utils';
 
 /**
- * Api Client React
+ * Api Client Modal React
+ *
+ * Provider which mounts the Scalar Api Client Modal vue app
  */
-export declare const ApiClientReact: ({ proxy, close, isOpen, request, }: Props) => default_2.JSX.Element;
+export declare const ApiClientModalProvider: ({ children, configuration, }: Props) => default_2.JSX.Element;
 
-/**
- * Api Client base for react
- * You are probably looking for ApiClientReact
- * only use this if you know what you are doing
- */
-export declare const ApiClientReactBase: (props: {
-    proxy: string;
-}) => default_2.JSX.Element;
+declare type Props = PropsWithChildren<{
+    configuration?: ClientConfiguration;
+}>;
 
-declare type Props = {
-    close: () => void;
-    isOpen: boolean;
-    proxy?: string;
-    request: ClientRequestConfig | null;
-};
+export declare const useApiClientModal: () => {
+    app: App<Element>;
+    updateConfig(newConfig: ClientConfiguration, mergeConfigs?: boolean): void;
+    updateServerUrl: (serverUrl: string) => void;
+    updateAuth: (auth: AuthenticationState) => void;
+    updateSpec: (spec: SpecConfiguration) => void;
+    open: (payload?: OpenClientPayload) => void;
+    mount: (mountingEl?: HTMLElement | null) => void;
+    modalState: {
+        open: boolean;
+        show: () => void;
+        hide: () => void;
+    };
+} | null;
 
 export { }