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

chore: update versions

.config/.eslintrc

@@ -1,50 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es6": true,
-    "node": true
-  },
-  "ignorePatterns": ["**/dist", "**/build", "**/.next"],
-  "extends": ["react-app", "plugin:react/recommended", "plugin:react-hooks/recommended"],
-  "parserOptions": {
-    // "project": "./tsconfig.json"
-    "project": ["packages/*/tsconfig.json", "examples/*/tsconfig.json"]
-  },
-  "plugins": ["react", "@typescript-eslint", "react-hooks", "simple-import-sort"],
-  "rules": {
-    "no-use-before-define": "off",
-    "simple-import-sort/exports": "error",
-
-    "simple-import-sort/imports": [
-      "error",
-      {
-        "groups": [
-          // Node.js builtins. You could also generate this regex if you use a `.js` config.
-          // For example: `^(${require("module").builtinModules.join("|")})(/|$)`
-          [
-            "^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)"
-          ],
-          // Packages
-          ["^\\w"],
-          // Internal packages.
-          ["^(@|config/)(/*|$)"],
-          // Side effect imports.
-          ["^\\u0000"],
-          // Parent imports. Put `..` last.
-          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
-          // Other relative imports. Put same-folder imports and `.` last.
-          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
-          // Style imports.
-          ["^.+\\.s?css$"]
-        ]
-      }
-    ],
-    "import/no-anonymous-default-export": [
-      "error",
-      {
-        "allowArrowFunction": true,
-        "allowAnonymousFunction": true
-      }
-    ]
-  }
-}

.config/esbuild.lib.js

@@ -1,30 +0,0 @@
-const esbuild = require('esbuild')
-
-// Automatically exclude all node_modules from the bundled version
-const { nodeExternalsPlugin } = require('esbuild-node-externals')
-esbuild
-  .build({
-    entryPoints: ['./src/index.ts'],
-    outfile: 'dist/index.cjs.js',
-    bundle: true,
-    minify: true,
-    platform: 'node',
-    format: 'cjs',
-    sourcemap: true,
-    target: 'node14',
-    plugins: [nodeExternalsPlugin()]
-  })
-  .catch(() => process.exit(1))
-
-esbuild
-  .build({
-    entryPoints: ['./src/index.ts'],
-    outfile: 'dist/index.es.js',
-    bundle: true,
-    minify: true,
-    platform: 'browser',
-    format: 'esm',
-    sourcemap: true,
-    target: 'es2019'
-  })
-  .catch(() => process.exit(1))

.config/jest.config.js

@@ -1,7 +0,0 @@
-const base = require('./jest.config.base.js')
-
-module.exports = {
-  ...base,
-  projects: ['<rootDir>/packages/*/jest.config.js'],
-  coverageDirectory: '<rootDir>/coverage/'
-}

.github/workflows/changesets.yaml

@@ -9,6 +9,7 @@ on:
       - 'examples/**'
       - 'assets/**'
       - '**.md'
+      - '!.changeset/**'
       - 'LICENSE'
 
 jobs:

.gitignore

@@ -19,6 +19,7 @@ logs/
 # Directories
 coverage/
 dist/
+umd/
 lib/
 node_modules/
 tmp/
@@ -32,16 +33,15 @@ tmp/
 *.map
 todo.md
 
-# Generated configs 
+# Config files that are not part of the repository root anymore. Should be removed in the future.
 /.eslintignore
-/.eslintrc
-/.prettierignore
-/prettier.config.js
+/.eslintrc*
 /vite.*.js
 /jest.*.js
+/*tsconfig*.json
 /esbuild.*.js
 
-!.config/**
+!config/**
 
 *.tsbuildinfo
 

.prettierrc.js

@@ -11,6 +11,11 @@ module.exports = {
   tabWidth: 2,
   trailingComma: 'none',
   useTabs: false,
+  // TODO: add import sort configuration to match ESLint rules
+  // plugins: ['./node_modules/@trivago/prettier-plugin-sort-imports'],
+  // importOrderSeparation: true,
+  // importOrderSortSpecifiers: true
+  plugins: [],
   overrides: [
     {
       files: ['*.json', '*.yaml'],
@@ -18,7 +23,5 @@ module.exports = {
         useTabs: false
       }
     }
-  ],
-  importOrderSeparation: true,
-  importOrderSortSpecifiers: true
+  ]
 }

DEVELOPERS.md

@@ -2,15 +2,17 @@
 
 ## Requirements
 
-- We use [pnpm](https://pnpm.io/) as a package manager to fasten development and builds, and as a backbone to our monorepo. You have to make sure it is installed in your machine. There are [multiple ways to install it](https://pnpm.io/installation), but the easiest way is with `npm`:
+- 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
-npm install -g pnpm
+$ npm install -g pnpm
 ```
 
-- Our tests and examples are using the Nhost CLI to run the backend services locally. You can follow the instructions to install it in [our documentation](https://docs.nhost.io/get-started/cli-workflow/install-cli)
+- Our tests and examples use the Nhost CLI, to run the backend services locally. You can follow the installation instructions in [our documentation](https://docs.nhost.io/get-started/cli-workflow/install-cli).
 
-## Getting things ready
+## Get started
+
+### Installation
 
 First, clone this repository:
 
@@ -21,57 +23,74 @@ git clone https://github.com/nhost/nhost
 Then, install the dependencies with `pnpm`:
 
 ```sh
-cd nhost
-pnpm install
+$ cd nhost
+$ pnpm install
 ```
 
-## Starting development from an example
+### Development
 
-Let's follow the instructions to start [react-apollo example](https://github.com/nhost/nhost/blob/main/examples/react-apollo/README.md).
+Although package references are correctly updated on the fly for TypeScript, example projects won't
+see the changes because they are depending on the build output. To fix this, you can run packages
+in development mode.
 
-## Running the documentation website locally
-
-The easier way to contribute to our documentation is to move to the `docs` folder and follow the [instructions to start local development](https://github.com/nhost/nhost/blob/main/docs/README.md):
+Running packages in development mode is as simple as:
 
 ```sh
-cd docs
-# not necessary step if you've done this step already anywhere in the repository
-pnpm install
-pnpm start
+$ pnpm dev
 ```
 
-## Testing
+Our packages are linked together using [PNPM's workspace](https://pnpm.io/workspaces) feature. Vite automatically detects changes in the dependencies and rebuilds everything, so that the changes are immediately reflected in the other packages.
 
-In order to run tests, the Nhost testing backend should run locally. You can start it in from a separate terminal:
+### Use examples
+
+Examples are a great way to test your changes in practice. Make sure you've `pnpm dev` running in your terminal and then run an example.
+
+Let's follow the instructions to run [react-apollo example](https://github.com/nhost/nhost/blob/main/examples/react-apollo/README.md).
+
+## Run the documentation website locally
+
+The easier way to contribute to our documentation is to go to the `docs` folder and follow the [instructions to start local development](https://github.com/nhost/nhost/blob/main/docs/README.md):
 
 ```sh
-cd examples/testing-project
-nhost -d
+$ cd docs
+# not necessary if you've already done this step somewhere in the repository
+$ pnpm install
+$ pnpm start
 ```
 
-Once Nhost started locally, you can run the tests from the root folder of the repository with the following command:
+## Run test suites
+
+In order to run tests, the Nhost testing backend should be running locally. You can run it from a separate terminal:
 
 ```sh
-pnpm test
+$ cd examples/testing-project
+$ nhost -d
+```
+
+Once Nhost is started locally, you can run the tests with the following command from the repository root:
+
+```sh
+$ pnpm test
 ```
 
 ## Changesets
 
-If you made some changes in the packages, you will have to describe these changes so they will be taken into account in the next release.
-We are using [changesets](https://github.com/changesets/changesets) to support our version/publish workflows. When submitting a pull request, a bot will check if some changesets are present, and if not, will guide you to add them.
+If you've made changes to the packages, you must describe those changes so that they can be reflected in the next release.
+We use [changesets](https://github.com/changesets/changesets) to support our versioning and release workflows. When you submit a pull request, a bot checks if some changesets are present, and if not, it directs you to add them.
 
-The most comprehensive way to add a changeset is to run the following command from the root directory of the repository:
+The most comprehensive way to add a changeset is to run the following command in the repository root:
 
 ```sh
-pnpm changeset
+$ pnpm changeset
 ```
 
-This will generate a file in the `.changeset` directory. You can edit it to give further details about the change you just made.
-You can have a look at the changesets documentation on [how to add a changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
+This will create a file in the `.changeset` directory. You can edit it to give more details about the change you just made.
 
-## Commiting changes
+You can take a look at the changeset documentation: [How to add a changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).
 
-You may notice `git commit` takes a few seconds to run. We set a commit hook that scan the changes in the code, automatically generates the documentation from the inline [TSDoc](https://tsdoc.org/) annotations, and add these generated documentation files to the commit. They will automatically update the [reference documentation](https://docs.nhost.io/reference).
+## Committing changes
+
+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).
 
 <!-- ## Good practices
 - lint

README.md

@@ -134,13 +134,6 @@ Here are some ways of contributing to making Nhost better:
             <sub><b>Pilou</b></sub>
         </a>
     </td>
-    <td align="center">
-        <a href="https://github.com/elitan">
-            <img src="https://avatars.githubusercontent.com/u/331818?v=4" width="100;" alt="elitan"/>
-            <br />
-            <sub><b>Johan Eliasson</b></sub>
-        </a>
-    </td>
     <td align="center">
         <a href="https://github.com/szilarddoro">
             <img src="https://avatars.githubusercontent.com/u/310881?v=4" width="100;" alt="szilarddoro"/>
@@ -148,6 +141,13 @@ Here are some ways of contributing to making Nhost better:
             <sub><b>Szilárd Dóró</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/elitan">
+            <img src="https://avatars.githubusercontent.com/u/331818?v=4" width="100;" alt="elitan"/>
+            <br />
+            <sub><b>Johan Eliasson</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/nunopato">
             <img src="https://avatars.githubusercontent.com/u/1523504?v=4" width="100;" alt="nunopato"/>
@@ -320,6 +320,13 @@ Here are some ways of contributing to making Nhost better:
             <sub><b>Jacob Duval</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/MarcelloTheArcane">
+            <img src="https://avatars.githubusercontent.com/u/21159570?v=4" width="100;" alt="MarcelloTheArcane"/>
+            <br />
+            <sub><b>Max Reynolds</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/ghoshnirmalya">
             <img src="https://avatars.githubusercontent.com/u/6391763?v=4" width="100;" alt="ghoshnirmalya"/>
@@ -333,7 +340,8 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Quentin Decré</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"/>

config/.eslintrc.js

@@ -0,0 +1,65 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    node: true
+  },
+  ignorePatterns: [
+    'dist',
+    'umd',
+    'build',
+    '.next',
+    'node_modules',
+    'tsup.config.ts',
+    '__tests__',
+    '__mocks__',
+    '*.test.ts',
+    '*.test.tsx',
+    '*.spec.ts',
+    '*.spec.tsx',
+    'tests/**/*.ts',
+    'tests/**/*.d.ts'
+  ],
+  extends: ['react-app', 'plugin:react/recommended', 'plugin:react-hooks/recommended'],
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  },
+  plugins: ['react', '@typescript-eslint', 'react-hooks', 'simple-import-sort'],
+  rules: {
+    'react/prop-types': 'off',
+    'no-use-before-define': 'off',
+    'simple-import-sort/exports': 'error',
+    'simple-import-sort/imports': [
+      'error',
+      {
+        groups: [
+          // Node.js builtins. You could also generate this regex if you use a `.js` config.
+          // For example: `^(${require("module").builtinModules.join("|")})(/|$)`
+          [
+            '^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)'
+          ],
+          // Packages
+          ['^\\w'],
+          // Internal packages.
+          ['^(@|config/)(/*|$)'],
+          // Side effect imports.
+          ['^\\u0000'],
+          // Parent imports. Put `..` last.
+          ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+          // Other relative imports. Put same-folder imports and `.` last.
+          ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+          // Style imports.
+          ['^.+\\.s?css$']
+        ]
+      }
+    ],
+    'import/no-anonymous-default-export': [
+      'error',
+      {
+        allowArrowFunction: true,
+        allowAnonymousFunction: true
+      }
+    ]
+  }
+}

config/jest.config.base.js

@@ -7,7 +7,6 @@ module.exports = {
   testRegex: '(/tests/.*.(test|spec)).(jsx?|tsx?)$',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   collectCoverage: true,
-  // coveragePathIgnorePatterns: ['(tests/.*.mock).(jsx?|tsx?)$'],
   verbose: true,
   testTimeout: 30000,
   globals: {

config/jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  rootDir: process.cwd(),
+  preset: 'ts-jest',
+  collectCoverage: true,
+  coverageProvider: 'v8',
+  coverageDirectory: '<rootDir>/coverage',
+  clearMocks: true,
+  verbose: true,
+  testTimeout: 30000,
+  globals: {
+    'ts-jest': {
+      isolatedModules: true
+    }
+  }
+}

config/react-library.tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "React Library",
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "preserve"
+  }
+}

config/tsconfig.base.json

@@ -0,0 +1,56 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Default",
+  "compilerOptions": {
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "strict": true,
+    "isolatedModules": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "target": "ES6",
+    "module": "CommonJS",
+    "lib": [
+      "es5",
+      "dom",
+      "es2015.promise",
+      "es2015.symbol",
+      "es2015.iterable",
+      "es2015.collection",
+      "es2015.symbol.wellknown",
+      "es2015.core",
+      "es2017.object",
+      "es2017.string"
+    ],
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "types": ["node"],
+    "typeRoots": [
+      "./node_modules/@types", "**/*/dist", "**/*/build", "**/*/.next", "**/*/umd"
+    ],
+    "paths": {
+      "@nhost/apollo": ["../packages/apollo/src/index.ts"],
+      "@nhost/core": ["../packages/core/src/index.ts"],
+      "@nhost/docgen": ["../packages/docgen/src/index.ts"],
+      "@nhost/hasura-auth-js": ["../packages/hasura-auth-js/src/index.ts"],
+      "@nhost/hasura-storage-js": ["../packages/hasura-storage-js/src/index.ts"],
+      "@nhost/nextjs": ["../packages/nextjs/src/index.ts"],
+      "@nhost/nhost-js": ["../packages/nhost-js/src/index.ts"],
+      "@nhost/react": ["../packages/react/src/index.ts"],
+      "@nhost/react-apollo": ["../packages/react-apollo/src/index.ts"],
+      "@nhost/react-auth": ["../packages/react-auth/src/index.ts"]
+    }
+  },
+  "exclude": [
+    "node_modules",
+    "**/*/dist",
+    "**/*/build",
+    "**/*/.next",
+    "**/*/__tests__",
+    "**/*/__mocks__"
+  ]
+}

config/vite.lib.config.js

@@ -5,20 +5,19 @@ import { defineConfig } from 'vite'
 import dts from 'vite-plugin-dts'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
-import react from '@vitejs/plugin-react'
-
 const PWD = process.env.PWD
 const pkg = require(path.join(PWD, 'package.json'))
 
 const tsEntry = path.resolve(PWD, 'src/index.ts')
 const entry = fs.existsSync(tsEntry) ? tsEntry : tsEntry.replace('.ts', '.tsx')
 
-/**
- * @type {import('vite').UserConfig}
- */
+const deps = [...Object.keys(Object.assign({}, pkg.peerDependencies, pkg.dependencies))]
+
 export default defineConfig({
+  optimizeDeps: {
+    include: ['react/jsx-runtime']
+  },
   plugins: [
-    react(),
     tsconfigPaths(),
     dts({
       exclude: ['**/*.spec.ts', '**/*.test.ts', '**/tests/**'],
@@ -32,16 +31,29 @@ export default defineConfig({
     })
   ],
   build: {
+    sourcemap: true,
     lib: {
       entry,
       name: pkg.name,
-      fileName: 'index'
+      fileName: 'index',
+      formats: ['cjs', 'es']
     },
     rollupOptions: {
-      external: ['react', '@nhost/react'],
+      external: (id) => deps.some((dep) => id.startsWith(dep)),
       output: {
         globals: {
-          react: 'react',
+          'graphql/language/printer': 'graphql/language/printer',
+          '@apollo/client': '@apollo/client',
+          '@apollo/client/link/context': '@apollo/client/link/context',
+          '@apollo/client/link/subscriptions': '@apollo/client/link/subscriptions',
+          '@apollo/client/utilities': '@apollo/client/utilities',
+          'graphql-ws': 'graphql-ws',
+          xstate: 'xstate',
+          axios: 'axios',
+          'js-cookie': 'Cookies',
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react/jsx-runtime': '_jsx',
           '@nhost/react': '@nhost/react'
         }
       }

config/vite.lib.dev.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+
+import viteLibConfig from './vite.lib.config'
+
+export default defineConfig({
+  ...viteLibConfig,
+  build: {
+    ...viteLibConfig.build,
+    watch: {
+      buildDelay: 500
+    }
+  }
+})

config/vite.lib.umd.config.js

@@ -0,0 +1,42 @@
+import fs from 'fs'
+import path from 'path'
+
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+import baseLibConfig from './vite.lib.config'
+
+const PWD = process.env.PWD
+const pkg = require(path.join(PWD, 'package.json'))
+
+const deps = [...Object.keys(Object.assign({}, pkg.peerDependencies))]
+
+export default defineConfig({
+  plugins: [
+    tsconfigPaths(),
+    dts({
+      exclude: ['**/*.spec.ts', '**/*.test.ts', '**/tests/**'],
+      afterBuild: () => {
+        const types = fs.readdirSync(path.join(PWD, 'umd/src'))
+        types.forEach((file) => {
+          fs.renameSync(path.join(PWD, 'umd/src', file), path.join(PWD, 'umd', file))
+        })
+        fs.rmdirSync(path.join(PWD, 'umd/src'))
+      }
+    })
+  ],
+  build: {
+    ...(baseLibConfig.build || {}),
+    outDir: 'umd',
+    lib: {
+      ...(baseLibConfig.build?.lib || {}),
+      fileName: pkg.name.replace(/@nhost\//g, ''),
+      formats: ['umd']
+    },
+    rollupOptions: {
+      ...(baseLibConfig.build?.rollupOptions || {}),
+      external: (id) => deps.some((dep) => id.startsWith(dep))
+    }
+  }
+})

config/vite.react.config.js

@@ -0,0 +1,8 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+import baseLibConfig from './vite.lib.config'
+
+export default defineConfig({
+  ...baseLibConfig,
+  plugins: [react(), ...baseLibConfig.plugins]
+})

config/vite.react.dev.config.js

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import viteReactConfig from './vite.react.config'
+
+export default defineConfig({
+  ...viteReactConfig,
+  build: {
+    ...viteReactConfig.build,
+    watch: {
+      buildDelay: 500
+    }
+  }
+})

config/vite.react.umd.config.js

@@ -0,0 +1,45 @@
+import fs from 'fs'
+import path from 'path'
+
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+import react from '@vitejs/plugin-react'
+
+import baseLibConfig from './vite.lib.config'
+
+const PWD = process.env.PWD
+const pkg = require(path.join(PWD, 'package.json'))
+
+const deps = [...Object.keys(Object.assign({}, pkg.peerDependencies))]
+
+export default defineConfig({
+  plugins: [
+    react(),
+    tsconfigPaths(),
+    dts({
+      exclude: ['**/*.spec.ts', '**/*.test.ts', '**/tests/**'],
+      afterBuild: () => {
+        const types = fs.readdirSync(path.join(PWD, 'umd/src'))
+        types.forEach((file) => {
+          fs.renameSync(path.join(PWD, 'umd/src', file), path.join(PWD, 'umd', file))
+        })
+        fs.rmdirSync(path.join(PWD, 'umd/src'))
+      }
+    })
+  ],
+  build: {
+    ...(baseLibConfig.build || {}),
+    outDir: 'umd',
+    lib: {
+      ...(baseLibConfig.build?.lib || {}),
+      fileName: pkg.name.replace(/@nhost\//g, ''),
+      formats: ['umd']
+    },
+    rollupOptions: {
+      ...(baseLibConfig.build?.rollupOptions || {}),
+      external: (id) => deps.some((dep) => id.startsWith(dep))
+    }
+  }
+})

docs/.prettierrc.json

@@ -1,11 +0,0 @@
-{
-  "singleQuote": true,
-  "printWidth": 80,
-  "tabWidth": 2,
-  "useTabs": false,
-  "trailingComma": "all",
-  "bracketSpacing": true,
-  "bracketSameLine": false,
-  "endOfLine": "auto",
-  "semi": true
-}

docs/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @nhost/docs
+
+## 0.0.1
+
+### Patch Changes
+
+- 584976d: - publishable directory structure changes (ESM, CJS and UMD included in the output)
+  - build system improvements
+  - fixed some bundling concerns (https://github.com/nhost/nhost/issues/428)

docs/docs/platform/_category_.json

@@ -1,5 +0,0 @@
-{
-  "label": "The Nhost Platform",
-  "position": 1,
-  "link": { "type": "generated-index", "slug": "/platform" }
-}

docs/docs/platform/authentication/_category_.json

@@ -1,5 +1,4 @@
 {
   "label": "Authentication",
-  "position": 4,
-  "link": { "id": "platform/authentication/index", "type": "doc" }
+  "position": 6
 }

docs/docs/platform/cli.md

@@ -1,6 +1,6 @@
 ---
-title: 'Nhost CLI'
-sidebar_position: 3
+title: 'CLI'
+sidebar_position: 11
 ---
 
 import Tabs from '@theme/Tabs';

docs/docs/platform/database/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Database",
-  "position": 2
+  "position": 4
 }

docs/docs/platform/environment-variables.md

@@ -1,6 +1,6 @@
 ---
 title: 'Environment variables'
-sidebar_position: 1
+sidebar_position: 9
 ---
 
 Environment variables are key-value pairs configured outside your source code. They are used to store environment-specific values such as API keys.

docs/docs/platform/github-integration.md

@@ -1,6 +1,6 @@
 ---
 title: 'GitHub integration'
-sidebar_position: 2
+sidebar_position: 10
 ---
 
 You can connect your Nhost app to a GitHub repository. When you do this, any updates you push to your code will automatically be deployed.
@@ -21,7 +21,7 @@ Specifically, the following will be deployed:
 
 ## Workflow
 
-Create a new Nhost app. Then use [Nhost CLI](/platform/nhost/local-development) to initialize your Nhost app locally.
+Create a new Nhost app. Then use [Nhost CLI](/platform/cli) to initialize your Nhost app locally.
 
 The workflow is as follows:
 

docs/docs/platform/graphql/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "GraphQL",
-  "position": 3
+  "position": 5
 }

docs/docs/platform/index.md

@@ -1,11 +0,0 @@
----
-title: 'The Nhost Platform'
-sidebar_position: 1
----
-
-- [Database](/platform/database)
-- [GraphQL](/platform/graphql)
-- [Authentication](/platform/authentication)
-- [Storage](/platform/storage)
-- [Serverless Functions](/platform/serverless-functions)
-- [Nhost](/platform/nhost)

docs/docs/platform/index.mdx

@@ -0,0 +1,28 @@
+---
+title: 'Introduction to Nhost'
+sidebar_label: Introduction
+sidebar_position: 1
+---
+
+Nhost is the open source GraphQL backend (Firebase Alternative) and a development platform. Nhost is doing for the backend, what [Netlify](https://netlify.com/) and [Vercel](https://vercel.com/) are doing for the frontend.
+
+We provide a modern backend with the general building blocks required to build fantastic digital products.
+
+We make it easy to build and deploy this backend using our platform that takes care of configuration, security, and performance. Things just works and scale automatically so you can focus on your product and on your business.
+
+## Quickstart
+
+Get started quickly by following one of our quickstart guides:
+
+- [Next.js](/platform/quickstarts/nextjs)
+- [React](/platform/quickstarts/react)
+
+## Products and features
+
+Learn more about the product and features of Nhost.
+
+- [Database](/platform/database)
+- [GraphQL](/platform/graphql)
+- [Authentication](/platform/authentication)
+- [Storage](/platform/storage)
+- [Serverless Functions](/platform/serverless-functions)

docs/docs/platform/nhost/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Nhost",
-  "position": 7
-}

docs/docs/platform/nhost/index.md

@@ -1,9 +0,0 @@
----
-title: 'Overview'
----
-
-Documentation for other platform features:
-
-- [Environment variables](/platform/nhost/environment-variables)
-- [GitHub integration](/platform/nhost/github-integration)
-- [Local development](/platform/nhost/local-development)

docs/docs/platform/overview/_category_.json

@@ -0,0 +1,5 @@
+{
+  "label": "Overview",
+  "position": 2,
+  "collapsed": false
+}

docs/docs/platform/overview/architecture.md

@@ -0,0 +1,30 @@
+---
+title: 'Architecture'
+sidebar_position: 2
+---
+
+Nhost is a backend as a service built with open source tools to provide developers the general building blocks required to build fantastic digital apps and products.
+
+Here's a diagram of the Nhost stack on a high level:
+
+![Nhost Architecture Diagram](/img/architecture/nhost-diagram.png)
+
+As you see in the image above, Nhost provides endpoints for:
+
+- GraphQL (`/graphql`)
+- Authentication (`/auth`)
+- Storage (`/storage`)
+- Functions (`/functions`)
+
+Data is stored in Postgres and files are stored in S3.
+
+## Open Source
+
+The open source tools used for the full Nhost stack are:
+
+- Database: [Postgres](https://www.postgresql.org/)
+- S3: [Minio](https://github.com/minio/minio)
+- GraphQL: [Hasura](https://github.com/hasura/graphql-engine)
+- Authentication: [Hasura Auth](https://github.com/nhost/hasura-auth)
+- Storage: [Hasura Storage](https://github.com/nhost/hasura-storage)
+- Functions: [Node.js](https://nodejs.org/en/)

docs/docs/platform/quickstarts/_category_.json

@@ -0,0 +1,5 @@
+{
+  "label": "Quickstarts",
+  "position": 3,
+  "collapsed": false
+}

docs/docs/platform/quickstarts/nextjs.md

@@ -0,0 +1,8 @@
+---
+title: 'Quickstart: Next.js'
+sidebar_position: 2
+---
+
+## Introduction
+
+This is a quickstart guide for React with Nhost.

docs/docs/platform/quickstarts/react.md

@@ -0,0 +1,8 @@
+---
+title: 'Quickstart: React'
+sidebar_position: 1
+---
+
+## Introduction
+
+This is a quickstart guide for React with Nhost.

docs/docs/platform/serverless-functions/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Serverless Functions",
-  "position": 6
+  "position": 8
 }

docs/docs/platform/serverless-functions/event-triggers.md

@@ -15,7 +15,7 @@ Event triggers are managed in Hasura. Go to Hasura, then select **Events** in th
 
 ![Creating event trigger in Hasura](/img/platform/hasura-create-event-trigger.png)
 
-Nhost's [environment variables](/platform/nhost/environment-variables) can be used in event trigger headers. For example, you can attach `NHOST_WEBHOOK_SECRET` to an outgoing webhook here.
+Nhost's [environment variables](/platform/environment-variables) can be used in event trigger headers. For example, you can attach `NHOST_WEBHOOK_SECRET` to an outgoing webhook here.
 
 ---
 
@@ -43,7 +43,7 @@ In your serverless function, you need to make sure the request actually comes fr
 - Check the header in the serverless function. It should match the environment variable `NHOST_WEBHOOK_SECRET`.
 
 ```js
-export default function async handler(req, res) {
+export default async function handler(req, res) {
 
   // Check webhook secret to make sure the request is valid
   if (

docs/docs/platform/storage/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Storage",
-  "position": 5
+  "position": 7
 }

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/01-sign-up.mdx

@@ -12,7 +12,7 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-j
 Use `signUp` to sign up users using email an password.
 
 ```ts
-auth.signIn({ email, password }) // email password
+auth.signUp({ email, password }) // email password
 ```
 
 ## Parameters

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/02-sign-in.mdx

@@ -4,7 +4,7 @@ title: signIn()
 sidebar_label: signIn()
 slug: /reference/javascript/auth/sign-in
 description: Use `signIn` to sign in users using email and password, passwordless (email or sms) or an external provider. `signIn` can be used in various ways depending on the parameters.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L166
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L171
 ---
 
 # `signIn()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/03-sign-out.mdx

@@ -4,7 +4,7 @@ title: signOut()
 sidebar_label: signOut()
 slug: /reference/javascript/auth/sign-out
 description: Use `signOut` to sign out a user
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L315
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L343
 ---
 
 # `signOut()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/04-reset-password.mdx

@@ -4,7 +4,7 @@ title: resetPassword()
 sidebar_label: resetPassword()
 slug: /reference/javascript/auth/reset-password
 description: Use `resetPassword` to reset a user's password.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L342
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L370
 ---
 
 # `resetPassword()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/05-change-password.mdx

@@ -4,7 +4,7 @@ title: changePassword()
 sidebar_label: changePassword()
 slug: /reference/javascript/auth/change-password
 description: Use `changePassword` to change a user's password.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L367
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L395
 ---
 
 # `changePassword()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/06-send-verification-email.mdx

@@ -4,7 +4,7 @@ title: sendVerificationEmail()
 sidebar_label: sendVerificationEmail()
 slug: /reference/javascript/auth/send-verification-email
 description: Use `sendVerificationEmail` to send a verification email to the specified email.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L393
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L421
 ---
 
 # `sendVerificationEmail()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/07-change-email.mdx

@@ -4,7 +4,7 @@ title: changeEmail()
 sidebar_label: changeEmail()
 slug: /reference/javascript/auth/change-email
 description: Use `changeEmail` to change a user's email
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L420
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L448
 ---
 
 # `changeEmail()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/08-deanonymize.mdx

@@ -4,7 +4,7 @@ title: deanonymize()
 sidebar_label: deanonymize()
 slug: /reference/javascript/auth/deanonymize
 description: Use `deanonymize` to deanonymize a user
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L445
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L473
 ---
 
 # `deanonymize()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/09-on-token-changed.mdx

@@ -4,7 +4,7 @@ title: onTokenChanged()
 sidebar_label: onTokenChanged()
 slug: /reference/javascript/auth/on-token-changed
 description: Use `onTokenChanged` to add a custom function that will trigger whenever the access and refresh token is changed.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L479
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L507
 ---
 
 # `onTokenChanged()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/10-on-auth-state-changed.mdx

@@ -4,7 +4,7 @@ title: onAuthStateChanged()
 sidebar_label: onAuthStateChanged()
 slug: /reference/javascript/auth/on-auth-state-changed
 description: Use `onAuthStateChanged` to add a custom function that will trigger whenever the state of the user changed. Ex from signed in to signed out or vice versa.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L516
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L544
 ---
 
 # `onAuthStateChanged()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/11-is-authenticated.mdx

@@ -4,7 +4,7 @@ title: isAuthenticated()
 sidebar_label: isAuthenticated()
 slug: /reference/javascript/auth/is-authenticated
 description: Use `isAuthenticated` to check if the user is authenticated or not.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L556
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L584
 ---
 
 # `isAuthenticated()`
@@ -12,9 +12,9 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-j
 Use `isAuthenticated` to check if the user is authenticated or not.
 
 ```ts
-const  = auth.isAuthenticated();
+const isAuthenticated = auth.isAuthenticated()
 
-if (authenticated) {
-  console.log('User is authenticated');
+if (isAuthenticated) {
+  console.log('User is authenticated')
 }
 ```

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/12-is-authenticated-async.mdx

@@ -4,7 +4,7 @@ title: isAuthenticatedAsync()
 sidebar_label: isAuthenticatedAsync()
 slug: /reference/javascript/auth/is-authenticated-async
 description: Use `isAuthenticatedAsync` to wait and check if the user is authenticated or not.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L574
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L602
 ---
 
 # `isAuthenticatedAsync()`
@@ -12,9 +12,9 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-j
 Use `isAuthenticatedAsync` to wait and check if the user is authenticated or not.
 
 ```ts
-const isAuthenticated  = awiat auth.isAuthenticatedAsync();
+const isAuthenticated = await auth.isAuthenticatedAsync()
 
 if (isAuthenticated) {
-  console.log('User is authenticated');
+  console.log('User is authenticated')
 }
 ```

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/13-get-authentication-status.mdx

@@ -4,7 +4,7 @@ title: getAuthenticationStatus()
 sidebar_label: getAuthenticationStatus()
 slug: /reference/javascript/auth/get-authentication-status
 description: Use `getAuthenticationStatus` to get the authentication status of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L601
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L629
 ---
 
 # `getAuthenticationStatus()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/14-get-jwt-token.mdx

@@ -5,7 +5,7 @@ sidebar_label: getJWTToken()
 slug: /reference/javascript/auth/get-jwt-token
 sidebar_class_name: deprecated
 description: No description provided.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L615
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L643
 ---
 
 # `getJWTToken()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/15-get-access-token.mdx

@@ -4,7 +4,7 @@ title: getAccessToken()
 sidebar_label: getAccessToken()
 slug: /reference/javascript/auth/get-access-token
 description: Use `getAccessToken` to get the logged in user's access token.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L629
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L657
 ---
 
 # `getAccessToken()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/16-get-decoded-access-token.mdx

@@ -4,7 +4,7 @@ title: getDecodedAccessToken()
 sidebar_label: getDecodedAccessToken()
 slug: /reference/javascript/auth/get-decoded-access-token
 description: Decode the current decoded access token (JWT), or return `null` if the user is not authenticated (no token)
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L637
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L665
 ---
 
 # `getDecodedAccessToken()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/17-get-hasura-claims.mdx

@@ -4,7 +4,7 @@ title: getHasuraClaims()
 sidebar_label: getHasuraClaims()
 slug: /reference/javascript/auth/get-hasura-claims
 description: Decode the Hasura claims from the current access token (JWT) located in the `https://hasura.io/jwt/claims` namespace, or return `null` if the user is not authenticated (no token)
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L647
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L675
 ---
 
 # `getHasuraClaims()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/18-get-hasura-claim.mdx

@@ -4,7 +4,7 @@ title: getHasuraClaim()
 sidebar_label: getHasuraClaim()
 slug: /reference/javascript/auth/get-hasura-claim
 description: Get the value of a given Hasura claim in the current access token (JWT). Returns null if the user is not authenticated, or if the claim is not in the token. Return `null` if the user is not authenticated (no token)
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L657
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L685
 ---
 
 # `getHasuraClaim()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/19-refresh-session.mdx

@@ -4,7 +4,7 @@ title: refreshSession()
 sidebar_label: refreshSession()
 slug: /reference/javascript/auth/refresh-session
 description: Use `refreshSession()` to refresh the current session or refresh the session with an provided `refreshToken`.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L676
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L704
 ---
 
 # `refreshSession()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/20-get-session.mdx

@@ -4,7 +4,7 @@ title: getSession()
 sidebar_label: getSession()
 slug: /reference/javascript/auth/get-session
 description: Use `getSession()` to get the current session.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L719
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L747
 ---
 
 # `getSession()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/21-get-user.mdx

@@ -4,7 +4,7 @@ title: getUser()
 sidebar_label: getUser()
 slug: /reference/javascript/auth/get-user
 description: Use `getUser()` to get the current user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L734
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L762
 ---
 
 # `getUser()`

docs/docs/reference/docgen/nextjs/content/nhost-client/index.mdx

@@ -4,7 +4,7 @@ title: NhostClient
 sidebar_label: NhostClient
 description: No description provided.
 slug: /reference/nextjs/nhost-client
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nextjs/src/index.ts#L16
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nextjs/src/index.ts#L17
 ---
 
 # `NhostClient`

docs/docs/reference/docgen/nextjs/content/use-provider-link.mdx

@@ -4,7 +4,7 @@ title: useProviderLink()
 sidebar_label: useProviderLink()
 slug: /reference/nextjs/use-provider-link
 description: Hook that returns OAuth provider URLs
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L393
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L450
 ---
 
 # `useProviderLink()`

docs/docs/reference/docgen/nextjs/content/use-sign-in-anonymous.mdx

@@ -4,7 +4,7 @@ title: useSignInAnonymous()
 sidebar_label: useSignInAnonymous()
 slug: /reference/nextjs/use-sign-in-anonymous
 description: No description provided.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L346
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L370
 ---
 
 # `useSignInAnonymous()`

docs/docs/reference/docgen/nextjs/content/use-sign-in-email-password.mdx

@@ -4,7 +4,7 @@ title: useSignInEmailPassword()
 sidebar_label: useSignInEmailPassword()
 slug: /reference/nextjs/use-sign-in-email-password
 description: Email and Password Sign-In
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L114
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L116
 ---
 
 # `useSignInEmailPassword()`

docs/docs/reference/docgen/nextjs/content/use-sign-in-email-passwordless.mdx

@@ -4,7 +4,7 @@ title: useSignInEmailPasswordless()
 sidebar_label: useSignInEmailPasswordless()
 slug: /reference/nextjs/use-sign-in-email-passwordless
 description: Passwordless email authentication hook
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L284
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L292
 ---
 
 # `useSignInEmailPasswordless()`

docs/docs/reference/docgen/nextjs/types/nhost-next-client-constructor-params.mdx

@@ -4,7 +4,7 @@ title: NhostNextClientConstructorParams
 sidebar_label: NhostNextClientConstructorParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nextjs/src/index.ts#L10
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nextjs/src/index.ts#L11
 ---
 
 # `NhostNextClientConstructorParams`

docs/docs/reference/docgen/nextjs/types/nhost-react-provider-props.mdx

@@ -17,6 +17,13 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/pro
 
 ---
 
-**<span className="parameter-name">initial</span>** <span className="optional-status">optional</span> `NhostSession`
+**<span className="parameter-name">initial</span>** <span className="optional-status">optional</span> [`NhostSession`](/reference/docgen/nextjs/types/nhost-session)
+
+| Property                                                                                                 | Type     | Required | Notes |
+| :------------------------------------------------------------------------------------------------------- | :------- | :------: | :---- |
+| <span className="parameter-name"><span className="light-grey">initial.</span>user</span>                 | `User`   |    ✔️    |       |
+| <span className="parameter-name"><span className="light-grey">initial.</span>refreshToken</span>         | `string` |    ✔️    |       |
+| <span className="parameter-name"><span className="light-grey">initial.</span>accessTokenExpiresIn</span> | `number` |    ✔️    |       |
+| <span className="parameter-name"><span className="light-grey">initial.</span>accessToken</span>          | `string` |    ✔️    |       |
 
 ---

docs/docs/reference/docgen/nextjs/types/nhost-session.mdx

@@ -0,0 +1,30 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: NhostSession
+sidebar_label: NhostSession
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/core/src/types.ts#L126
+---
+
+# `NhostSession`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">accessToken</span>** <span className="optional-status">required</span> `string`
+
+---
+
+**<span className="parameter-name">accessTokenExpiresIn</span>** <span className="optional-status">required</span> `number`
+
+---
+
+**<span className="parameter-name">refreshToken</span>** <span className="optional-status">required</span> `string`
+
+---
+
+**<span className="parameter-name">user</span>** <span className="optional-status">required</span> `User`
+
+---

docs/docs/reference/docgen/react/content/use-provider-link.mdx

@@ -4,7 +4,7 @@ title: useProviderLink()
 sidebar_label: useProviderLink()
 slug: /reference/react/use-provider-link
 description: Hook that returns OAuth provider URLs
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L393
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L450
 ---
 
 # `useProviderLink()`

docs/docs/reference/docgen/react/content/use-sign-in-anonymous.mdx

@@ -4,7 +4,7 @@ title: useSignInAnonymous()
 sidebar_label: useSignInAnonymous()
 slug: /reference/react/use-sign-in-anonymous
 description: No description provided.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L346
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L370
 ---
 
 # `useSignInAnonymous()`

docs/docs/reference/docgen/react/content/use-sign-in-email-password.mdx

@@ -4,7 +4,7 @@ title: useSignInEmailPassword()
 sidebar_label: useSignInEmailPassword()
 slug: /reference/react/use-sign-in-email-password
 description: Email and Password Sign-In
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L114
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L116
 ---
 
 # `useSignInEmailPassword()`

docs/docs/reference/docgen/react/content/use-sign-in-email-passwordless.mdx

@@ -4,7 +4,7 @@ title: useSignInEmailPasswordless()
 sidebar_label: useSignInEmailPasswordless()
 slug: /reference/react/use-sign-in-email-passwordless
 description: Passwordless email authentication hook
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L284
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L292
 ---
 
 # `useSignInEmailPasswordless()`

docs/docs/reference/nextjs/configuration.md

@@ -38,17 +38,12 @@ import type { AppProps } from 'next/app';
 
 import { NhostClient, NhostNextProvider } from '@nhost/nextjs';
 
-import Header from '../components/Header';
-
 const nhost = new NhostClient({ backendUrl: 'my-app.nhost.run' });
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <NhostNextProvider nhost={nhost} initial={pageProps.nhostSession}>
-      <div>
-        <Header />
-        <Component {...pageProps} />
-      </div>
+      <Component {...pageProps} />
     </NhostNextProvider>
   );
 }

docs/docusaurus.config.js

@@ -94,7 +94,7 @@ const config = {
             href: 'https://app.nhost.io',
             className: 'header-get-started-link',
             position: 'right',
-            label: 'Create an app',
+            label: 'Get started',
           },
         ],
       },

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/docs",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",

docs/src/css/custom.css

@@ -156,6 +156,10 @@
   color: var(--ifm-footer-link-hover-color);
 }
 
+article {
+  padding: 0 20px;
+}
+
 .header-github-link:hover {
   opacity: 0.6;
 }

examples/nextjs/.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  extends: [
+    '../../config/.eslintrc.js',
+    'plugin:react/jsx-runtime',
+    'plugin:@next/next/recommended'
+  ],
+  rules: {
+    'react/react-in-jsx-scope': 'off'
+  }
+}

examples/nextjs/.eslintrc.json

@@ -1,7 +0,0 @@
-{
-  "extends": ["plugin:@next/next/recommended"],
-  "rules": {
-    "react/react-in-jsx-scope": "off",
-    "react/prop-types": "off"
-  }
-}

examples/nextjs/components/AuthLink.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import React from 'react'
 
 import { Button, ButtonVariant } from '@mantine/core'
 

examples/nextjs/components/OauthLinks.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { FaFacebook, FaGithub, FaGoogle } from 'react-icons/fa'
 
 import { useProviderLink } from '@nhost/react'

examples/nextjs/components/SignUpServerlessForm.tsx

@@ -1,13 +1,13 @@
-import { useRouter } from 'next/router'
 import { useState } from 'react'
 
-import { Button, SimpleGrid, TextInput } from '@mantine/core'
+import { Button, Modal, SimpleGrid, TextInput } from '@mantine/core'
 import { showNotification } from '@mantine/notifications'
 import { useSignInEmailPasswordless } from '@nhost/nextjs'
 
 export const SignUpPasswordlessForm: React.FC = () => {
-  const router = useRouter()
-  const { signInEmailPasswordless } = useSignInEmailPasswordless()
+  const { signInEmailPasswordless } = useSignInEmailPasswordless({ redirectTo: '/guarded-ssr' })
+  const [emailVerificationToggle, setEmailVerificationToggle] = useState(false)
+
   const [email, setEmail] = useState('')
   const signIn = async () => {
     const result = await signInEmailPasswordless(email)
@@ -18,11 +18,23 @@ export const SignUpPasswordlessForm: React.FC = () => {
         message: result.error.message
       })
     } else {
-      router.replace('/')
+      setEmailVerificationToggle(true)
     }
   }
   return (
     <SimpleGrid cols={1} spacing={6}>
+      <Modal
+        title="Verification email sent"
+        centered
+        opened={emailVerificationToggle}
+        onClose={() => {
+          setEmailVerificationToggle(false)
+        }}
+      >
+        A verification email has been sent. Please check your inbox and follow the link to complete
+        authentication. This page will automatically redirect you to the authenticated home page
+        once the email has been verified.
+      </Modal>
       <TextInput
         type="email"
         placeholder="Email Address"

examples/nextjs/next.config.js

@@ -1,13 +1,8 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {}
 
-const pkg = require('./package.json')
-// * Only required to make it work with the monorepo. Is not required otherwise
-const withTM = require('next-transpile-modules')(
-  // * All references to workspace packages are transpiled
-  Object.entries(pkg.dependencies)
-    .filter(([name, version]) => version.startsWith('workspace'))
-    .map(([name]) => name)
-)
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true'
+})
 
-module.exports = withTM(nextConfig)
+module.exports = withBundleAnalyzer(nextConfig)

examples/nextjs/package.json

@@ -4,7 +4,8 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "ANALYZE=false next build",
+    "build:analyze": "ANALYZE=true next build",
     "start": "next start",
     "prettier": "prettier --check .",
     "prettier:fix": "prettier --write .",
@@ -19,12 +20,7 @@
     "@mantine/hooks": "^4.2.2",
     "@mantine/next": "^4.2.2",
     "@mantine/notifications": "^4.2.2",
-    "@nhost/apollo": "workspace:*",
-    "@nhost/core": "workspace:*",
-    "@nhost/hasura-auth-js": "workspace:*",
-    "@nhost/hasura-storage-js": "workspace:*",
     "@nhost/nextjs": "workspace:*",
-    "@nhost/nhost-js": "workspace:*",
     "@nhost/react": "workspace:*",
     "@nhost/react-apollo": "workspace:*",
     "graphql": "^16.3.0",
@@ -34,11 +30,11 @@
     "react-icons": "^4.3.1"
   },
   "devDependencies": {
+    "@next/bundle-analyzer": "^12.1.5",
     "@types/node": "17.0.23",
     "@types/react": "18.0.8",
     "@xstate/inspect": "^0.6.2",
     "eslint-config-next": "12.0.10",
-    "next-transpile-modules": "^9.0.0",
     "typescript": "4.5.5",
     "ws": "^8.5.0",
     "xstate": "^4.31.0"

examples/nextjs/pages/_app.tsx

@@ -1,6 +1,5 @@
 import type { AppProps } from 'next/app'
 import Head from 'next/head'
-import React from 'react'
 
 import { AppShell, Header, MantineProvider } from '@mantine/core'
 import { NotificationsProvider } from '@mantine/notifications'

examples/nextjs/pages/about.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import React from 'react'
 
 import { Container, Title } from '@mantine/core'
 

examples/nextjs/pages/guarded-csr.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Container, Title } from '@mantine/core'
 import { useAccessToken } from '@nhost/nextjs'
 

examples/nextjs/pages/guarded-ssr.tsx

@@ -1,9 +1,7 @@
 import { GetServerSideProps } from 'next'
-import React from 'react'
 
 import { Container, Title } from '@mantine/core'
-import { NhostSession } from '@nhost/core'
-import { getNhostSession, useAccessToken } from '@nhost/nextjs'
+import { getNhostSession, NhostSession, useAccessToken } from '@nhost/nextjs'
 
 import { authProtected } from '../components/protected-route'
 import { BACKEND_URL } from '../helpers'

examples/nextjs/pages/public-csr.tsx

@@ -1,5 +1,4 @@
 import { NextPage } from 'next'
-import React from 'react'
 
 import { Container, Title } from '@mantine/core'
 import { useAccessToken, useAuthenticated } from '@nhost/nextjs'

examples/nextjs/pages/public-ssr.tsx

@@ -1,9 +1,7 @@
 import { GetServerSideProps } from 'next'
-import React from 'react'
 
 import { Container, Title } from '@mantine/core'
-import { NhostSession } from '@nhost/core'
-import { getNhostSession, useAccessToken, useAuthenticated } from '@nhost/nextjs'
+import { getNhostSession, NhostSession, useAccessToken, useAuthenticated } from '@nhost/nextjs'
 
 import { BACKEND_URL } from '../helpers'
 
@@ -19,6 +17,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
 const PublicSSRPage: React.FC<{ initial: NhostSession }> = () => {
   const isAuthenticated = useAuthenticated()
   const accessToken = useAccessToken()
+
   return (
     <Container>
       <Title>Public Server-side Page</Title>

examples/nextjs/pages/sign-in/index.tsx

@@ -1,5 +1,4 @@
 import { NextPage } from 'next'
-import React from 'react'
 import { FaLock } from 'react-icons/fa'
 
 import { Divider } from '@mantine/core'

examples/nextjs/pages/sign-up/email-password.tsx

@@ -41,7 +41,6 @@ export const SignUpPasswordPage: NextPage = () => {
         transition="fade"
         centered
         transitionDuration={600}
-        transitionTimingFunction="ease"
         opened={emailVerificationToggle}
         onClose={() => {
           setEmailVerificationToggle(false)

examples/nextjs/pages/sign-up/index.tsx

@@ -1,5 +1,4 @@
 import { NextPage } from 'next'
-import React from 'react'
 import { FaLock } from 'react-icons/fa'
 
 import { Divider } from '@mantine/core'

examples/nextjs/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "../../config/tsconfig.base.json",
   "compilerOptions": {
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],

examples/react-apollo-crm/package.json

@@ -6,7 +6,6 @@
     "@apollo/client": "^3.5.10",
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.6",
-    "@nhost/nhost-js": "workspace:*",
     "@nhost/react": "workspace:*",
     "@nhost/react-apollo": "workspace:*",
     "@tailwindcss/forms": "^0.5.0",
@@ -61,11 +60,11 @@
     "@types/react": "^17.0.44",
     "@types/react-dom": "^17.0.15",
     "@types/express": "^4.17.13",
-    "@vitejs/plugin-react": "^1.3.1",
+    "@vitejs/plugin-react": "^1.3.2",
     "autoprefixer": "^10.4.4",
     "express": "^4.17.3",
     "postcss": "^8.4.12",
     "typescript": "^4.6.3",
-    "vite": "^2.9.5"
+    "vite": "^2.9.7"
   }
 }

examples/react-apollo-crm/tsconfig.json

@@ -1,9 +1,22 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../config/tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "dist",
-    "composite": true,
-    "module": "esnext"
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
   },
-  "include": ["src/**/*", "types/**/*", "../../types/**/*", "tests/**/*"]
+  "include": ["src"],
+  "references": [{ "path": "../../config/tsconfig.base.json" }]
 }

examples/react-apollo-crm/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+      "composite": true,
+      "module": "esnext",
+      "moduleResolution": "node"
+    },
+    "include": ["vite.config.ts"]
+  }
+