Merge pull request #1179 from nhost/changeset-release/main

chore: update versions

DEVELOPERS.md

@@ -2,6 +2,8 @@
 
 ## Requirements
 
+- This repository works with **Node 16**
+
 - We use [pnpm](https://pnpm.io/) as a package manager to speed up development and builds, and as a basis for our monorepo. You need to make sure it's installed on your machine. There are [several ways to install it](https://pnpm.io/installation), but the easiest way is with `npm`:
 
 ```sh
@@ -97,6 +99,12 @@ You can take a look at the changeset documentation: [How to add a changeset](htt
 
 You'll notice that `git commit` takes a few seconds to run. We set a commit hook that scans the changes in the code, automatically generates documentation from the inline [TSDoc](https://tsdoc.org/) annotations, and adds these generated documentation files to the commit. They automatically update the [reference documentation](https://docs.nhost.io/reference).
 
+The document generation script that is run in the pre-commit hook requires to be built first. You may need to run the following command before the commit:
+
+```sh
+pnpm run build
+```
+
 <!-- ## Good practices
 - lint
 - prettier

README.md

@@ -380,6 +380,13 @@ Here are some ways of contributing to making Nhost better:
             <sub><b>Chris</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/massless">
+            <img src="https://avatars.githubusercontent.com/u/44389?v=4" width="100;" alt="massless"/>
+            <br />
+            <sub><b>Chris Wetherell</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/rustyb">
             <img src="https://avatars.githubusercontent.com/u/53086?v=4" width="100;" alt="rustyb"/>
@@ -393,15 +400,15 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Dago</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/dminkovsky">
             <img src="https://avatars.githubusercontent.com/u/218725?v=4" width="100;" alt="dminkovsky"/>
             <br />
             <sub><b>Dmitry Minkovsky</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/dohomi">
             <img src="https://avatars.githubusercontent.com/u/489221?v=4" width="100;" alt="dohomi"/>
@@ -436,15 +443,15 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Ikko Ashimine</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/jladuval">
             <img src="https://avatars.githubusercontent.com/u/1935359?v=4" width="100;" alt="jladuval"/>
             <br />
             <sub><b>Jacob Duval</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/leothorp">
             <img src="https://avatars.githubusercontent.com/u/12928449?v=4" width="100;" alt="leothorp"/>
@@ -479,15 +486,15 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Nirmalya Ghosh</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/quentin-decre">
             <img src="https://avatars.githubusercontent.com/u/1137511?v=4" width="100;" alt="quentin-decre"/>
             <br />
             <sub><b>Quentin Decré</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/altschuler">
             <img src="https://avatars.githubusercontent.com/u/956928?v=4" width="100;" alt="altschuler"/>
@@ -522,15 +529,15 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Zach Burnaby</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/komninoschat">
             <img src="https://avatars.githubusercontent.com/u/29049104?v=4" width="100;" alt="komninoschat"/>
             <br />
             <sub><b>Komninos</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/meesvandongen">
             <img src="https://avatars.githubusercontent.com/u/35409045?v=4" width="100;" alt="meesvandongen"/>

dashboard/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nhost/dashboard
 
+## 0.4.2
+
+### Patch Changes
+
+- 89bd37bc: fix(dashboard): correct redirect URL input opacity
+- Updated dependencies [4601d84e]
+- Updated dependencies [843087cb]
+  - @nhost/react@0.15.0
+  - @nhost/nextjs@1.9.0
+  - @nhost/react-apollo@4.9.0
+
 ## 0.4.1
 
 ### Patch Changes

dashboard/Dockerfile

@@ -22,7 +22,7 @@ ENV NEXT_PUBLIC_NHOST_MIGRATIONS_URL http://localhost:9693
 ENV NEXT_PUBLIC_NHOST_HASURA_URL http://localhost:9695
 ENV NEXT_PUBLIC_ENV dev
 
-RUN yarn global add pnpm
+RUN yarn global add pnpm@7.17.0
 COPY .gitignore .gitignore
 COPY --from=pruner /app/out/json/ .
 COPY --from=pruner /app/out/pnpm-*.yaml .

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -35,10 +35,10 @@
     "@mui/system": "^5.10.14",
     "@mui/x-date-pickers": "^5.0.8",
     "@nhost/core": "^0.9.3",
-    "@nhost/nextjs": "^1.8.3",
+    "@nhost/nextjs": "^1.9.0",
     "@nhost/nhost-js": "^1.6.1",
-    "@nhost/react": "^0.14.3",
-    "@nhost/react-apollo": "^4.8.3",
+    "@nhost/react": "^0.15.0",
+    "@nhost/react-apollo": "^4.9.0",
     "@segment/snippet": "^4.15.3",
     "@tailwindcss/forms": "^0.5.3",
     "@tanstack/react-query": "^4.16.1",
@@ -169,4 +169,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

dashboard/src/components/settings/signInMethods/AppleProviderSettings/AppleProviderSettings.tsx

@@ -168,7 +168,7 @@ export default function AppleProviderSettings() {
           <Input
             name="redirectUrl"
             id="redirectUrl"
-            placeholder={`${generateRemoteAppUrl(
+            defaultValue={`${generateRemoteAppUrl(
               currentApplication.subdomain,
             )}/v1/auth/signin/provider/apple/callback`}
             className="col-span-2"

dashboard/src/components/settings/signInMethods/DiscordProviderSettings/DiscordProviderSettings.tsx

@@ -112,7 +112,7 @@ export default function DiscordProviderSettings() {
             fullWidth
             hideEmptyHelperText
             label="Redirect URL"
-            value={`${generateRemoteAppUrl(
+            defaultValue={`${generateRemoteAppUrl(
               currentApplication.subdomain,
             )}/v1/auth/signin/provider/discord/callback`}
             disabled

dashboard/src/components/settings/signInMethods/FacebookProviderSettings/FacebookProviderSettings.tsx

@@ -112,7 +112,7 @@ export default function FacebookProviderSettings() {
             fullWidth
             hideEmptyHelperText
             label="Redirect URL"
-            value={`${generateRemoteAppUrl(
+            defaultValue={`${generateRemoteAppUrl(
               currentApplication.subdomain,
             )}/v1/auth/signin/provider/facebook/callback`}
             disabled

dashboard/src/components/settings/signInMethods/GitHubProviderSettings/GitHubProviderSettings.tsx

@@ -112,7 +112,7 @@ export default function GitHubProviderSettings() {
             fullWidth
             hideEmptyHelperText
             label="Redirect URL"
-            value={`${generateRemoteAppUrl(
+            defaultValue={`${generateRemoteAppUrl(
               currentApplication.subdomain,
             )}/v1/auth/signin/provider/github/callback`}
             disabled

dashboard/src/components/settings/signInMethods/GoogleProviderSettings/GoogleProviderSettings.tsx

@@ -112,7 +112,7 @@ export default function GoogleProviderSettings() {
             fullWidth
             hideEmptyHelperText
             label="Redirect URL"
-            value={`${generateRemoteAppUrl(
+            defaultValue={`${generateRemoteAppUrl(
               currentApplication.subdomain,
             )}/v1/auth/signin/provider/google/callback`}
             disabled

dashboard/src/components/settings/signInMethods/LinkedInProviderSettings/LinkedInProviderSettings.tsx

@@ -112,7 +112,7 @@ export default function LinkedInProviderSettings() {
             fullWidth
             hideEmptyHelperText
             label="Redirect URL"
-            value={`${generateRemoteAppUrl(
+            defaultValue={`${generateRemoteAppUrl(
               currentApplication.subdomain,
             )}/v1/auth/signin/provider/linkedin/callback`}
             disabled

dashboard/src/components/settings/signInMethods/SpotifyProviderSettings/SpotifyProviderSettings.tsx

@@ -112,7 +112,7 @@ export default function SpotifyProviderSettings() {
             fullWidth
             hideEmptyHelperText
             label="Redirect URL"
-            value={`${generateRemoteAppUrl(
+            defaultValue={`${generateRemoteAppUrl(
               currentApplication.subdomain,
             )}/v1/auth/signin/provider/spotify/callback`}
             disabled

dashboard/src/components/settings/signInMethods/TwitchProviderSettings/TwitchProviderSettings.tsx

@@ -112,7 +112,7 @@ export default function TwitchProviderSettings() {
             fullWidth
             hideEmptyHelperText
             label="Redirect URL"
-            value={`${generateRemoteAppUrl(
+            defaultValue={`${generateRemoteAppUrl(
               currentApplication.subdomain,
             )}/v1/auth/signin/provider/twitch/callback`}
             disabled

dashboard/src/components/settings/signInMethods/TwitterProviderSettings/TwitterProviderSettings.tsx

@@ -125,7 +125,7 @@ export default function TwitterProviderSettings() {
           <Input
             name="redirectUrl"
             id="redirectUrl"
-            placeholder={`${generateRemoteAppUrl(
+            defaultValue={`${generateRemoteAppUrl(
               currentApplication.subdomain,
             )}/v1/auth/signin/provider/twitter/callback`}
             className="col-span-2"
@@ -133,11 +133,6 @@ export default function TwitterProviderSettings() {
             hideEmptyHelperText
             label="Redirect URL"
             disabled
-            slotProps={{
-              input: {
-                className: 'bg-opacity-5',
-              },
-            }}
             endAdornment={
               <InputAdornment position="end" className="absolute right-2">
                 <IconButton

dashboard/src/components/settings/signInMethods/WindowsLiveProviderSettings/WindowsLiveProviderSettings.tsx

@@ -111,7 +111,7 @@ export default function WindowsLiveProviderSettings() {
             fullWidth
             hideEmptyHelperText
             label="Redirect URL"
-            value={`${generateRemoteAppUrl(
+            defaultValue={`${generateRemoteAppUrl(
               currentApplication.subdomain,
             )}/v1/auth/signin/provider/microsoft/callback`}
             disabled

dashboard/src/components/settings/signInMethods/WorkOsProviderSettings/WorkOsProviderSettings.tsx

@@ -161,7 +161,7 @@ export default function WorkOsProviderSettings() {
           <Input
             name="redirectUrl"
             id="redirectUrl"
-            placeholder={`${generateRemoteAppUrl(
+            defaultValue={`${generateRemoteAppUrl(
               currentApplication.subdomain,
             )}/v1/auth/signin/provider/workos/callback`}
             className="col-span-6"
@@ -169,11 +169,6 @@ export default function WorkOsProviderSettings() {
             hideEmptyHelperText
             label="Redirect URL"
             disabled
-            slotProps={{
-              input: {
-                className: 'bg-opacity-5',
-              },
-            }}
             endAdornment={
               <InputAdornment position="end" className="absolute right-2">
                 <IconButton

docs/docs/platform/git.mdx

@@ -12,13 +12,14 @@ Nhost allows you to automatically deploy your Nhost project when you do changes
 
 Support GitLab, BitBucket, and other Git providers are on our roadmap.
 
-## How It Works
+## Deployment
 
 The following things are deployed:
 
 - Database migrations
 - Hasura metadata
 - Serverless Functions
+- Email Templates
 
 :::caution
 Settings in `nhost/config.yaml` are **not** deployed. That means you need to manually sync settings between local and remote environments between the CLI and Nhost Cloud.
@@ -40,20 +41,14 @@ Settings in `nhost/config.yaml` are **not** deployed. That means you need to man
 
 ## Deployment Branch
 
-Nhost only deploys your **deployment branch**. By default, your deployment branch matches the default branch set on GitHub (usually `main`).
+Nhost only deploys changes from the **Deployment Branch**. By default, your deployment branch matches the default branch (usually `main`).
 
-You can change the deployment branch by clicking **Edit** next to the repository in your Nhost project's Overview.
+You can change the Deployment Branch on the **Git** page in the **Settings** section.
 
-You can have multiple Nhost projects connected to the same GitHub repository and use different deployment branches (e.g., `main` and `staging`).
-
-<center>
-  <img src="/img/github-integration/deployment-branch.png" alt="drawing" width="50%" />
-</center>
+It's possible to have multiple Nhost projects connected to the same Git repository and use different Deployment Branches (e.g., `main` and `staging`). Learn more about [multiple environments](/platform/multiple-environments).
 
 ## Base Directory
 
-If your Nhost project is not at the root of your git repository (typically when using a monorepo), you can set a custom base directory. The base directory is where the `nhost` directory is located. In other words, the base directory is the **parent directory** of the `nhost` folder.
+If your Nhost project is not located at the root of your Git repository, which is typically the case when using a monorepo, it's possible to set a custom Base Directory. The Base Directory is where the `nhost/` directory is located. In other words, the Base Directory is the **parent directory** of the `nhost/` directory.
 
-<center>
-  <img src="/img/github-integration/base-directory.png" alt="drawing" width="50%" />
-</center>
+You can change the Base Directory on the **Git** page in the **Settings** section.

docs/docs/reference/docgen/nextjs/content/signed-in.mdx

@@ -0,0 +1,35 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: <SignedIn />
+sidebar_label: <SignedIn />
+slug: /reference/nextjs/signed-in
+description: Use `<SignedIn />` to control the rendering of components for users. Components inside `<SignedIn />` are only rendered if the user is authenticated.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/components/SignedIn.tsx#L28
+---
+
+# `SignedIn()`
+
+Use `<SignedIn />` to control the rendering of components for users. Components inside `<SignedIn />` are only rendered if the user is authenticated.
+
+```tsx
+import { NhostProvider, SignedOut } from '@nhost/react'
+import { nhost } from '@/utils/nhost'
+
+function Page() {
+  return (
+    <NhostProvider nhost={nhost}>
+      <SignedIn>
+        <h1>Only rendered if the user is authenticated</h1>
+      </SignedIn>
+    </NhostProvider>
+  )
+}
+```
+
+## Parameters
+
+---
+
+**<span className="parameter-name">\_\_namedParameters</span>** <span className="optional-status">required</span> `{ children: ReactNode }`
+
+---

docs/docs/reference/docgen/nextjs/content/signed-out.mdx

@@ -0,0 +1,35 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: <SignedOut />
+sidebar_label: <SignedOut />
+slug: /reference/nextjs/signed-out
+description: Use `<SignedOut />` to control the rendering of components for users. Components inside `<SignedOut />` are only rendered if the user is not authenticated.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/components/SignedOut.tsx#L28
+---
+
+# `SignedOut()`
+
+Use `<SignedOut />` to control the rendering of components for users. Components inside `<SignedOut />` are only rendered if the user is not authenticated.
+
+```tsx
+import { NhostProvider, SignedOut } from '@nhost/react'
+import { nhost } from '@/utils/nhost'
+
+function Page() {
+  return (
+    <NhostProvider nhost={nhost}>
+      <SignedOut>
+        <h1>Only rendered if the user is not authenticated</h1>
+      </SignedOut>
+    </NhostProvider>
+  )
+}
+```
+
+## Parameters
+
+---
+
+**<span className="parameter-name">\_\_namedParameters</span>** <span className="optional-status">required</span> `{ children: ReactNode }`
+
+---

docs/docs/reference/docgen/react/content/signed-in.mdx

@@ -0,0 +1,35 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: <SignedIn />
+sidebar_label: <SignedIn />
+slug: /reference/react/signed-in
+description: Use `<SignedIn />` to control the rendering of components for users. Components inside `<SignedIn />` are only rendered if the user is authenticated.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/components/SignedIn.tsx#L28
+---
+
+# `SignedIn()`
+
+Use `<SignedIn />` to control the rendering of components for users. Components inside `<SignedIn />` are only rendered if the user is authenticated.
+
+```tsx
+import { NhostProvider, SignedOut } from '@nhost/react'
+import { nhost } from '@/utils/nhost'
+
+function Page() {
+  return (
+    <NhostProvider nhost={nhost}>
+      <SignedIn>
+        <h1>Only rendered if the user is authenticated</h1>
+      </SignedIn>
+    </NhostProvider>
+  )
+}
+```
+
+## Parameters
+
+---
+
+**<span className="parameter-name">\_\_namedParameters</span>** <span className="optional-status">required</span> `{ children: ReactNode }`
+
+---

docs/docs/reference/docgen/react/content/signed-out.mdx

@@ -0,0 +1,35 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: <SignedOut />
+sidebar_label: <SignedOut />
+slug: /reference/react/signed-out
+description: Use `<SignedOut />` to control the rendering of components for users. Components inside `<SignedOut />` are only rendered if the user is not authenticated.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/components/SignedOut.tsx#L28
+---
+
+# `SignedOut()`
+
+Use `<SignedOut />` to control the rendering of components for users. Components inside `<SignedOut />` are only rendered if the user is not authenticated.
+
+```tsx
+import { NhostProvider, SignedOut } from '@nhost/react'
+import { nhost } from '@/utils/nhost'
+
+function Page() {
+  return (
+    <NhostProvider nhost={nhost}>
+      <SignedOut>
+        <h1>Only rendered if the user is not authenticated</h1>
+      </SignedOut>
+    </NhostProvider>
+  )
+}
+```
+
+## Parameters
+
+---
+
+**<span className="parameter-name">\_\_namedParameters</span>** <span className="optional-status">required</span> `{ children: ReactNode }`
+
+---

docs/docs/reference/docgen/vue/content/use-file-upload-item.mdx

@@ -0,0 +1,44 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: useFileUploadItem()
+sidebar_label: useFileUploadItem()
+slug: /reference/vue/use-file-upload-item
+description: Use the composable `useFileUploadItem` to control the file upload of a file in a multiple file upload.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/vue/src/useFileUpload.ts#L61
+---
+
+# `useFileUploadItem()`
+
+Use the composable `useFileUploadItem` to control the file upload of a file in a multiple file upload.
+
+It has the same signature as `useFileUpload`.
+
+```tsx
+const Item = ({ itemRef }) => {
+  const { name, progress } = useFileUploadItem(itemRef)
+  return (
+    <li>
+      {name} {progress}
+    </li>
+  )
+}
+
+const List = () => {
+  const { list } = useMultipleFilesUpload()
+  return (
+    <ul>
+      {list.map((itemRef) => (
+        <Item key={item.id} itemRef={item} />
+      ))}
+    </ul>
+  )
+}
+```
+
+## Parameters
+
+---
+
+**<span className="parameter-name">ref</span>** <span className="optional-status">required</span> `ActorRefWithDeprecatedState<FileUploadContext, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, { value: any, context: FileUploadContext }, ResolveTypegenMeta<Typegen0, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, BaseActionObject, ServiceMap>>` | `Interpreter<FileUploadContext, any, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, { value: any, context: FileUploadContext }, ResolveTypegenMeta<Typegen0, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, BaseActionObject, ServiceMap>>`
+
+---

docs/docs/reference/docgen/vue/content/use-file-upload.mdx

@@ -0,0 +1,33 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: useFileUpload()
+sidebar_label: useFileUpload()
+slug: /reference/vue/use-file-upload
+description: Use the composable `useFileUpload` to upload a file.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/vue/src/useFileUpload.ts#L142
+---
+
+# `useFileUpload()`
+
+Use the composable `useFileUpload` to upload a file.
+
+```tsx
+const {
+  add,
+  upload,
+  cancel,
+  isUploaded,
+  isUploading,
+  isError,
+  progress,
+  id,
+  bucketId,
+  name
+} = useFileUpload()
+
+const handleFormSubmit = async (e) => {
+  e.preventDefault()
+
+  await upload({ file })
+}
+```

docs/docs/reference/docgen/vue/types/file-item-ref.mdx

@@ -0,0 +1,10 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: FileItemRef
+sidebar_label: FileItemRef
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/machines/multiple-files-upload.ts#L7
+---
+
+# `FileItemRef`

docs/docs/reference/docgen/vue/types/file-upload-composable-result.mdx

@@ -0,0 +1,80 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: FileUploadComposableResult
+sidebar_label: FileUploadComposableResult
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/vue/src/useFileUpload.ts#L16
+---
+
+# `FileUploadComposableResult`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">isError</span>** <span className="optional-status">required</span> `boolean`
+
+**`@returns`**
+
+`true` if an error occurred
+
+**`@depreacted`**
+
+use `!isSuccess` or `!!error` instead
+
+---
+
+**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | `ErrorPayload`
+
+Provides details about the error
+
+---
+
+**<span className="parameter-name">isUploading</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when the file is being uploaded.
+
+---
+
+**<span className="parameter-name">progress</span>** <span className="optional-status">required</span> `null` | `number`
+
+Returns the progress of the upload, from 0 to 100. Returns null if the upload has not started yet.
+
+---
+
+**<span className="parameter-name">isUploaded</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when the file has been successfully uploaded.
+
+---
+
+**<span className="parameter-name">id</span>** <span className="optional-status">optional</span> `string`
+
+Returns the id of the file.
+
+---
+
+**<span className="parameter-name">bucketId</span>** <span className="optional-status">optional</span> `string`
+
+Returns the bucket id.
+
+---
+
+**<span className="parameter-name">name</span>** <span className="optional-status">optional</span> `string`
+
+Returns the name of the file.
+
+---
+
+**<span className="parameter-name">add</span>** <span className="optional-status">required</span> `(params: StorageUploadFileParams) => void`
+
+---
+
+**<span className="parameter-name">upload</span>** <span className="optional-status">required</span> `(params: Partial<StorageUploadFileParams>) => Promise<UploadFileHandlerResult>`
+
+---
+
+**<span className="parameter-name">cancel</span>** <span className="optional-status">required</span> `() => void`
+
+---

examples/nextjs/CHANGELOG.md

@@ -7,7 +7,7 @@
 - ba785da1: Bump dependencies versions
 - Updated dependencies [ba785da1]
 - Updated dependencies [6da44bf8]
-  - @nhost/nextjs@2.0.0
+  - @nhost/nextjs@1.9.0
   - @nhost/react@0.14.0
   - @nhost/react-apollo@5.0.0
 

package.json

@@ -88,7 +88,7 @@
   },
   "packageManager": "pnpm@7.17.0",
   "engines": {
-    "node": ">=14 <17",
+    "node": ">=16 <17",
     "pnpm": ">=7.17.0"
   },
   "eslintConfig": {

packages/docgen/src/helpers/getModuleContentMap.test.ts

@@ -8,7 +8,9 @@ test('should categorize elements of groups in a Map', () => {
       { title: 'Classes', kind: 0, children: [1, 2, 3] },
       { title: 'Properties', kind: 0, children: [4, 5, 6, 7] },
       { title: 'Type aliases', kind: 0, children: [8, 9] },
-      { title: 'Functions', kind: 0, children: [10] }
+      { title: 'Functions', kind: 0, children: [10] },
+      { title: 'Components', kind: 0, children: [11, 12, 13] },
+      { title: 'References', kind: 0, children: [14, 15] }
     ])
   ).toEqual(
     new Map([
@@ -21,7 +23,12 @@ test('should categorize elements of groups in a Map', () => {
       [7, 'Property'],
       [8, 'Type alias'],
       [9, 'Type alias'],
-      [10, 'Function']
+      [10, 'Function'],
+      [11, 'Component'],
+      [12, 'Component'],
+      [13, 'Component'],
+      [14, 'Reference'],
+      [15, 'Reference']
     ])
   )
 })
@@ -57,3 +64,46 @@ test('should set content type to "undefined" if value does not exist in dictiona
     ])
   )
 })
+
+test('should not treat the same text with different letter casing differently', () => {
+  expect(
+    getModuleContentMap([
+      { title: 'Type aliases', kind: 0, children: [1, 2, 3] },
+      { title: 'Type Aliases', kind: 0, children: [4] },
+      { title: 'TYPE ALIASES', kind: 0, children: [5, 6] }
+    ])
+  ).toEqual(
+    new Map([
+      [1, 'Type alias'],
+      [2, 'Type alias'],
+      [3, 'Type alias'],
+      [4, 'Type alias'],
+      [5, 'Type alias'],
+      [6, 'Type alias']
+    ])
+  )
+})
+
+test('should update the type of a child if it has a special category (not "Other")', () => {
+  expect(
+    getModuleContentMap([
+      {
+        title: 'Functions',
+        kind: 0,
+        children: [1, 2, 3],
+        categories: [
+          { title: 'Components', children: [3] },
+          { title: 'Other', children: [1] }
+        ]
+      },
+      { title: 'Type Aliases', kind: 0, children: [4] }
+    ])
+  ).toEqual(
+    new Map([
+      [1, 'Function'],
+      [2, 'Function'],
+      [3, 'Component'],
+      [4, 'Type alias']
+    ])
+  )
+})

packages/docgen/src/helpers/getModuleContentMap.ts

@@ -4,17 +4,19 @@ import { Group } from '../types'
  * Used to convert plural names coming from TypeDoc to singular names.
  */
 const pluralSingularDictionary = new Map([
-  ['Classes', 'Class'],
-  ['Properties', 'Property'],
-  ['Methods', 'Method'],
-  ['Functions', 'Function'],
-  ['Type aliases', 'Type alias'],
-  ['Interfaces', 'Interface'],
-  ['Modules', 'Module'],
-  ['Methods', 'Method'],
-  ['Variables', 'Variable'],
-  ['Accessors', 'Accessor'],
-  ['Constructors', 'Constructor']
+  ['classes', 'Class'],
+  ['properties', 'Property'],
+  ['methods', 'Method'],
+  ['functions', 'Function'],
+  ['type aliases', 'Type alias'],
+  ['interfaces', 'Interface'],
+  ['modules', 'Module'],
+  ['methods', 'Method'],
+  ['variables', 'Variable'],
+  ['accessors', 'Accessor'],
+  ['constructors', 'Constructor'],
+  ['components', 'Component'],
+  ['references', 'Reference']
 ])
 
 /**
@@ -28,13 +30,27 @@ export function getModuleContentMap(
   groups: Array<Group>,
   originalMap: Map<number, string> = new Map()
 ): Map<number, string> {
-  return groups.reduce((contentMap, { title, children }) => {
-    const singularTitle = pluralSingularDictionary.get(title)
+  return groups.reduce((contentMap, { title, children, categories }) => {
+    const singularTitle = pluralSingularDictionary.get(title.toLowerCase())
 
     children.forEach((child) => {
       contentMap.set(child, singularTitle || 'undefined')
     })
 
+    if (categories) {
+      categories.forEach(({ title: categoryTitle, children: categoryChildren }) => {
+        if (categoryTitle === 'Other') {
+          return
+        }
+
+        const singularTitle = pluralSingularDictionary.get(categoryTitle.toLowerCase())
+
+        categoryChildren.forEach((categoryChild) => {
+          contentMap.set(categoryChild, singularTitle || 'undefined')
+        })
+      })
+    }
+
     return contentMap
   }, originalMap)
 }

packages/docgen/src/templates/FunctionTemplate.ts

@@ -16,7 +16,7 @@ import { Signature } from '../types'
  * @returns Prettified function page template
  */
 export const FunctionTemplate = (
-  { name, comment, signatures, sources }: Signature,
+  { id, name, comment, signatures, sources }: Signature,
   originalDocument?: Array<Signature>,
   slug?: string,
   functionFragmentOptions?: FunctionFragmentOptions
@@ -25,13 +25,14 @@ export const FunctionTemplate = (
   const allChildrenDeprecated = signatures?.every((signature) =>
     signature.comment?.tags?.some(({ tag }) => tag === 'deprecated')
   )
-  const { baseEditUrl } = snapshot(appState)
+  const { baseEditUrl, contentReferences } = snapshot(appState)
+  const isComponent = contentReferences.get(id) === 'Component'
   const source = sources?.[0]
 
   const header = `---
 # ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
-title: ${name}()
-sidebar_label: ${alias || name}()
+title: ${isComponent ? `<${name} />` : `${name}()`}
+sidebar_label: ${isComponent ? `<${alias || name} />` : `${alias || name}()`}
 ${slug ? `slug: ${slug}` : ``}
 ${allChildrenDeprecated ? 'sidebar_class_name: deprecated' : ''}
 ${

packages/docgen/src/types/common.ts

@@ -29,6 +29,7 @@ export type Group = {
   title: string
   kind: number
   children: Array<number>
+  categories?: Array<{ title: string; children: Array<number> }>
 }
 
 export type Source = {

packages/nextjs/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost/nextjs
 
+## 1.9.0
+
+### Patch Changes
+
+- Updated dependencies [4601d84e]
+- Updated dependencies [843087cb]
+  - @nhost/react@0.15.0
+
 ## 1.8.3
 
 ### Patch Changes

packages/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/nextjs",
-  "version": "1.8.3",
+  "version": "1.9.0",
   "description": "Nhost NextJS library",
   "license": "MIT",
   "keywords": [

packages/react-apollo/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost/react-apollo
 
+## 4.9.0
+
+### Patch Changes
+
+- Updated dependencies [4601d84e]
+- Updated dependencies [843087cb]
+  - @nhost/react@0.15.0
+
 ## 4.8.3
 
 ### Patch Changes

packages/react-apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-apollo",
-  "version": "4.8.3",
+  "version": "4.9.0",
   "description": "Nhost React Apollo client",
   "license": "MIT",
   "keywords": [

packages/react/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @nhost/react
 
+## 0.15.0
+
+### Minor Changes
+
+- 4601d84e: Adding `<SignedIn />` and `<SignedOut />` components.
+
+### Patch Changes
+
+- 843087cb: Make `useUserRoles` reactive
+
 ## 0.14.3
 
 ### Patch Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react",
-  "version": "0.14.3",
+  "version": "0.15.0",
   "description": "Nhost React library",
   "license": "MIT",
   "keywords": [

packages/react/src/components/SignedIn.tsx

@@ -0,0 +1,36 @@
+import { PropsWithChildren } from 'react'
+
+import { useAuthenticationStatus } from '../useAuthenticationStatus'
+
+/**
+ * Use `<SignedIn />` to control the rendering of components for users. Components inside `<SignedIn />` are only rendered if the user is authenticated.
+ *
+ * @example
+ * ```tsx
+ * import { NhostProvider, SignedOut } from "@nhost/react";
+ * import { nhost } from '@/utils/nhost';
+ *
+ * function Page() {
+ *   return (
+ *     <NhostProvider nhost={nhost}>
+ *       <SignedIn>
+ *         <h1>Only rendered if the user is authenticated</h1>
+ *       </SignedIn>
+ *     </NhostProvider>
+ *   )
+ * }
+ * ```
+ *
+ * @docs https://docs.nhost.io/reference/react/signed-in
+ * @category Components
+ */
+
+export function SignedIn({ children }: PropsWithChildren<unknown>) {
+  const { isAuthenticated } = useAuthenticationStatus()
+
+  if (!isAuthenticated) {
+    return null
+  }
+
+  return <>{children}</>
+}

packages/react/src/components/SignedOut.tsx

@@ -0,0 +1,36 @@
+import { PropsWithChildren } from 'react'
+
+import { useAuthenticationStatus } from '../useAuthenticationStatus'
+
+/**
+ * Use `<SignedOut />` to control the rendering of components for users. Components inside `<SignedOut />` are only rendered if the user is not authenticated.
+ *
+ * @example
+ * ```tsx
+ * import { NhostProvider, SignedOut } from "@nhost/react";
+ * import { nhost } from '@/utils/nhost';
+ *
+ * function Page() {
+ *   return (
+ *     <NhostProvider nhost={nhost}>
+ *       <SignedOut>
+ *         <h1>Only rendered if the user is not authenticated</h1>
+ *       </SignedOut>
+ *     </NhostProvider>
+ *   )
+ * }
+ * ```
+ *
+ * @docs https://docs.nhost.io/reference/react/signed-out
+ * @category Components
+ */
+
+export function SignedOut({ children }: PropsWithChildren<unknown>) {
+  const { isAuthenticated } = useAuthenticationStatus()
+
+  if (isAuthenticated) {
+    return null
+  }
+
+  return <>{children}</>
+}

packages/react/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './SignedIn'
+export * from './SignedOut'

packages/react/src/index.ts

@@ -1,4 +1,5 @@
 export * from './client'
+export * from './components'
 export * from './provider'
 export * from './useAccessToken'
 export * from './useAddSecurityKey'

packages/react/src/useUserRoles.ts

@@ -14,9 +14,10 @@ import { useAuthInterpreter } from './useAuthInterpreter'
  */
 export const useUserRoles = () => {
   const service = useAuthInterpreter()
-  return useSelector(
-    service,
-    (state) => state.context.user?.roles || [],
-    (a, b) => a.every((i) => b.includes(i) && b.every((i) => a.includes(i)))
-  )
+  return useSelector(service, (state) => {
+    if (!state.matches('authentication.signedIn')) {
+      return []
+    }
+    return state.context.user?.roles || []
+  })
 }

packages/vue/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @nhost/vue
 
+## 0.6.0
+
+### Minor Changes
+
+- f6d2042a: `useFileUpload` composable to upload a file useFileUpload composable
+
+### Patch Changes
+
+- 843087cb: Make `useUserRoles` reactive
+
 ## 0.5.3
 
 ### Patch Changes

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/vue",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Nhost Vue library",
   "license": "MIT",
   "keywords": [

packages/vue/src/useFileUpload.ts

@@ -1,44 +1,44 @@
 import { InterpreterFrom } from 'xstate'
 
 import {
-	createFileUploadMachine,
-	FileItemRef,
-	FileUploadMachine,
-	FileUploadState,
-	StorageUploadFileParams,
-	UploadFileHandlerResult,
-	uploadFilePromise
+  createFileUploadMachine,
+  FileItemRef,
+  FileUploadMachine,
+  FileUploadState,
+  StorageUploadFileParams,
+  UploadFileHandlerResult,
+  uploadFilePromise
 } from '@nhost/hasura-storage-js'
 import { useInterpret, useSelector } from '@xstate/vue'
 
 import { useNhostClient } from './useNhostClient'
 
-export interface FileUploadHookResult extends FileUploadState {
-	/**
-	 * Add the file without uploading it.
-	 */
-	add: (params: StorageUploadFileParams) => void
+export interface FileUploadComposableResult extends FileUploadState {
+  /**
+   * Add the file without uploading it.
+   */
+  add: (params: StorageUploadFileParams) => void
 
-	/**
-	 * Upload the file given as a parameter, or that has been previously added.
-	 */
-	upload: (params: Partial<StorageUploadFileParams>) => Promise<UploadFileHandlerResult>
+  /**
+   * Upload the file given as a parameter, or that has been previously added.
+   */
+  upload: (params: Partial<StorageUploadFileParams>) => Promise<UploadFileHandlerResult>
 
-	/**
-	 * Cancel the ongoing upload.
-	 */
-	cancel: () => void
+  /**
+   * Cancel the ongoing upload.
+   */
+  cancel: () => void
 
-	/**
-	 * @internal - used by the MultipleFilesUpload component to notice the file should be removed from the list.
-	 */
-	destroy: () => void
+  /**
+   * @internal - used by the MultipleFilesUpload component to notice the file should be removed from the list.
+   */
+  destroy: () => void
 }
 
 export type { FileItemRef }
 
 /**
- * Use the hook `useFileUploadItem` to control the file upload of a file in a multiple file upload.
+ * Use the composable `useFileUploadItem` to control the file upload of a file in a multiple file upload.
  *
  * It has the same signature as `useFileUpload`.
  *
@@ -59,61 +59,61 @@ export type { FileItemRef }
  * ```
  */
 export const useFileUploadItem = (
-	ref: FileItemRef | InterpreterFrom<FileUploadMachine>
-): FileUploadHookResult => {
-	const { nhost } = useNhostClient()
+  ref: FileItemRef | InterpreterFrom<FileUploadMachine>
+): FileUploadComposableResult => {
+  const { nhost } = useNhostClient()
 
-	const add = (params: StorageUploadFileParams) => {
-		ref.send({
-			type: 'ADD',
-			file: params.file,
-			bucketId: params.bucketId || bucketId
-		})
-	}
+  const add = (params: StorageUploadFileParams) => {
+    ref.send({
+      type: 'ADD',
+      file: params.file,
+      bucketId: params.bucketId || bucketId
+    })
+  }
 
-	const upload = (params: Partial<StorageUploadFileParams>) =>
-		uploadFilePromise(nhost, ref, {
-			file: params.file,
-			bucketId: params.bucketId || bucketId,
-			id,
-			name
-		})
+  const upload = (params: Partial<StorageUploadFileParams>) =>
+    uploadFilePromise(nhost, ref, {
+      file: params.file,
+      bucketId: params.bucketId || bucketId,
+      id,
+      name
+    })
 
-	const cancel = () => {
-		ref.send('CANCEL')
-	}
+  const cancel = () => {
+    ref.send('CANCEL')
+  }
 
-	const destroy = () => {
-		ref.send('DESTROY')
-	}
+  const destroy = () => {
+    ref.send('DESTROY')
+  }
 
-	const isUploading = useSelector(ref, (state) => state.matches('uploading')).value
-	const isUploaded = useSelector(ref, (state) => state.matches('uploaded')).value
-	const isError = useSelector(ref, (state) => state.matches('error')).value
-	const error = useSelector(ref, (state) => state.context.error || null).value
-	const progress = useSelector(ref, (state) => state.context.progress).value
-	const id = useSelector(ref, (state) => state.context.id).value
-	const bucketId = useSelector(ref, (state) => state.context.bucketId).value
-	const name = useSelector(ref, (state) => state.context.file?.name).value
+  const isUploading = useSelector(ref, (state) => state.matches('uploading')).value
+  const isUploaded = useSelector(ref, (state) => state.matches('uploaded')).value
+  const isError = useSelector(ref, (state) => state.matches('error')).value
+  const error = useSelector(ref, (state) => state.context.error || null).value
+  const progress = useSelector(ref, (state) => state.context.progress).value
+  const id = useSelector(ref, (state) => state.context.id).value
+  const bucketId = useSelector(ref, (state) => state.context.bucketId).value
+  const name = useSelector(ref, (state) => state.context.file?.name).value
 
-	return {
-		add,
-		upload,
-		cancel,
-		destroy,
-		isUploaded,
-		isUploading,
-		isError,
-		error,
-		progress,
-		id,
-		bucketId,
-		name
-	}
+  return {
+    add,
+    upload,
+    cancel,
+    destroy,
+    isUploaded,
+    isUploading,
+    isError,
+    error,
+    progress,
+    id,
+    bucketId,
+    name
+  }
 }
 
 /**
- * Use the hook `useFileUpload` to upload a file.
+ * Use the composable `useFileUpload` to upload a file.
  *
  * @example
  * ```tsx
@@ -139,8 +139,8 @@ export const useFileUploadItem = (
  *
  * @docs https://docs.nhost.io/reference/vue/use-file-upload
  */
-export const useFileUpload = (): FileUploadHookResult => {
-	const service = useInterpret(createFileUploadMachine)
+export const useFileUpload = (): FileUploadComposableResult => {
+  const service = useInterpret(createFileUploadMachine)
 
-	return useFileUploadItem(service)
+  return useFileUploadItem(service)
 }

packages/vue/src/useUserRoles.ts

@@ -14,9 +14,10 @@ import { useAuthInterpreter } from './useAuthInterpreter'
  */
 export const useUserRoles = () => {
   const service = useAuthInterpreter()
-  return useSelector(
-    service.value,
-    (state) => state.context.user?.roles || [],
-    (a, b) => a.every((i) => b.includes(i) && b.every((i) => a.includes(i)))
-  )
+  return useSelector(service.value, (state) => {
+    if (!state.matches('authentication.signedIn')) {
+      return []
+    }
+    return state.context.user?.roles || []
+  })
 }

pnpm-lock.yaml

@@ -103,10 +103,10 @@ importers:
       '@netlify/functions': ^0.7.2
       '@next/bundle-analyzer': ^12.3.1
       '@nhost/core': ^0.9.3
-      '@nhost/nextjs': ^1.8.3
+      '@nhost/nextjs': ^1.9.0
       '@nhost/nhost-js': ^1.6.1
-      '@nhost/react': ^0.14.3
-      '@nhost/react-apollo': ^4.8.3
+      '@nhost/react': ^0.15.0
+      '@nhost/react-apollo': ^4.9.0
       '@segment/snippet': ^4.15.3
       '@storybook/addon-actions': ^6.5.13
       '@storybook/addon-essentials': ^6.5.13