feat: add docs

tmm · tmm · commit 280c6f197224 · 2021-04-29T23:23:06.000-04:00
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,3 @@
 dist/
+docs/
 node_modules/
diff --git a/.eslintrc b/.eslintrc
@@ -35,6 +35,7 @@
                 "argsIgnorePattern": "^_"
             }
         ],
+        "@typescript-eslint/no-var-requires": "off",
         // `eslint-plugin-import`
         // https://github.com/benmosher/eslint-plugin-import
         "import/order": [
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,7 @@
 .DS_Store
 .eslintcache
 dist/
+docs/.next/*
 node_modules/
 yarn-debug.log*
 yarn-error.log*
diff --git a/README.md b/README.md
@@ -2,8 +2,6 @@
 
 `react-supabase` is a React Hooks library for [Supabase](https://supabase.io).
 
-With `react-supabase`, components can request and access data declaratively without needing to handle state updates on their own.
-
 <br/>
 
 ## Installation
@@ -57,82 +55,6 @@ const Todos = () => {
 
 <br/>
 
-### API
-
-#### Auth
-
-```js
-useAuthStateChange((event, session) => {
-  console.log(`Supbase auth event: ${event}`, session)
-})
-```
-
-```js
-const [{ error, fetching }, resetPassword] = useResetPassword({
-  options: {
-    redirectTo: 'https://example.com/welcome',
-  },
-})
-
-const { error } = await resetPassword('user@example.com', {
-  redirectTo: 'https://example.com/reset',
-})
-```
-
-```js
-const [{ error, fetching, user, session }, signIn] = useSignIn({
-  // provider: 'github',
-  options: {
-    redirectTo: 'https://example.com/dashboard',
-    // scopes: 'repo gist notifications',
-  },
-})
-
-const { error, session, user } = await signIn(
-  {
-    email: 'user@example.com',
-    password: 'foobarbaz', // omit for magic link
-    // provider: 'github',
-  },
-  {
-    redirectTo: 'https://example.com/dashboard',
-    // scopes: 'repo gist notifications',
-  },
-)
-```
-
-```js
-const [{ error, fetching }, signOut] = useSignOut()
-
-const { error } = await signOut()
-```
-
-```js
-const [{ error, fetching, user, session }, signUp] = useSignUp({
-  options: {
-    redirectTo: 'https://example.com/dashboard',
-  },
-})
-
-const { error, session, user } = await signUp(
-  {
-    email: 'user@example.com',
-    password: 'foobarbaz',
-  },
-  {
-    redirectTo: 'https://example.com/dashboard',
-  },
-)
-```
-
-#### Data
-
-#### Realtime
-
-#### Storage
-
-<br/>
-
 ## License
 
 The MIT License.
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,6 @@
+# `react-supabase` website
+
+```
+yarn
+yarn dev
+```
diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
diff --git a/docs/next.config.js b/docs/next.config.js
@@ -0,0 +1,2 @@
+const withNextra = require('nextra')('nextra-theme-docs', './theme.config.js')
+module.exports = withNextra()
diff --git a/docs/package.json b/docs/package.json
@@ -0,0 +1,22 @@
+{
+    "name": "docs",
+    "version": "1.0.0",
+    "main": "index.js",
+    "license": "MIT",
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build"
+    },
+    "dependencies": {
+        "next": "^10.2.0",
+        "nextra": "^0.4.4",
+        "nextra-theme-docs": "^1.1.6",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+    },
+    "devDependencies": {
+        "@types/react": "^17.0.4",
+        "@types/react-dom": "^17.0.3",
+        "typescript": "^4.2.4"
+    }
+}
diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx
@@ -0,0 +1,5 @@
+import 'nextra-theme-docs/style.css'
+
+export default function Nextra({ Component, pageProps }) {
+    return <Component {...pageProps} />
+}
diff --git a/docs/pages/documentation/auth/meta.json b/docs/pages/documentation/auth/meta.json
@@ -0,0 +1,7 @@
+{
+    "use-auth-state-change": "useAuthStateChange",
+    "use-reset-password": "useResetPassword",
+    "use-signin": "useSignIn",
+    "use-signout": "useSignOut",
+    "use-signup": "useSignUp"
+}
diff --git a/docs/pages/documentation/auth/use-auth-state-change.md b/docs/pages/documentation/auth/use-auth-state-change.md
@@ -0,0 +1,7 @@
+# useAuthStateChange
+
+```js
+useAuthStateChange((event, session) => {
+  console.log(`Supbase auth event: ${event}`, session)
+})
+```
diff --git a/docs/pages/documentation/auth/use-reset-password.md b/docs/pages/documentation/auth/use-reset-password.md
@@ -0,0 +1,13 @@
+# useResetPassword
+
+```js
+const [{ error, fetching }, resetPassword] = useResetPassword({
+  options: {
+    redirectTo: 'https://example.com/welcome',
+  },
+})
+
+const { error } = await resetPassword('user@example.com', {
+  redirectTo: 'https://example.com/reset',
+})
+```
diff --git a/docs/pages/documentation/auth/use-signin.md b/docs/pages/documentation/auth/use-signin.md
@@ -0,0 +1,23 @@
+# useSignIn
+
+```js
+const [{ error, fetching, user, session }, signIn] = useSignIn({
+  // provider: 'github',
+  options: {
+    redirectTo: 'https://example.com/dashboard',
+    // scopes: 'repo gist notifications',
+  },
+})
+
+const { error, session, user } = await signIn(
+  {
+    email: 'user@example.com',
+    password: 'foobarbaz', // omit for magic link
+    // provider: 'github',
+  },
+  {
+    redirectTo: 'https://example.com/dashboard',
+    // scopes: 'repo gist notifications',
+  },
+)
+```
diff --git a/docs/pages/documentation/auth/use-signout.md b/docs/pages/documentation/auth/use-signout.md
@@ -0,0 +1,7 @@
+# useSignOut
+
+```js
+const [{ error, fetching }, signOut] = useSignOut()
+
+const { error } = await signOut()
+```
diff --git a/docs/pages/documentation/auth/use-signup.md b/docs/pages/documentation/auth/use-signup.md
@@ -0,0 +1,19 @@
+# useSignUp
+
+```js
+const [{ error, fetching, user, session }, signUp] = useSignUp({
+  options: {
+    redirectTo: 'https://example.com/dashboard',
+  },
+})
+
+const { error, session, user } = await signUp(
+  {
+    email: 'user@example.com',
+    password: 'foobarbaz',
+  },
+  {
+    redirectTo: 'https://example.com/dashboard',
+  },
+)
+```
diff --git a/docs/pages/documentation/data/meta.json b/docs/pages/documentation/data/meta.json
@@ -0,0 +1,3 @@
+{
+    "use-delete": "useDelete"
+}
diff --git a/docs/pages/documentation/data/use-delete.md b/docs/pages/documentation/data/use-delete.md
@@ -0,0 +1 @@
+# useDelete
diff --git a/docs/pages/documentation/meta.json b/docs/pages/documentation/meta.json
@@ -0,0 +1,6 @@
+{
+    "provider": "Provider",
+    "use-client": "useClient",
+    "auth": "Auth",
+    "data": "Data"
+}
diff --git a/docs/pages/documentation/provider.md b/docs/pages/documentation/provider.md
@@ -0,0 +1 @@
+# Provider
diff --git a/docs/pages/documentation/use-client.md b/docs/pages/documentation/use-client.md
@@ -0,0 +1 @@
+# useClient
diff --git a/docs/pages/getting-started.md b/docs/pages/getting-started.md
@@ -0,0 +1,48 @@
+# Getting Started
+
+## Installation
+
+```
+yarn add react-supabase @supabase/supabase-js
+# or
+npm install --save react-supabase @supabase/supabase-js
+```
+
+## Quick Start
+
+Create a Supabase client and pass it to the `Provider`:
+
+```js
+import { createClient } from '@supabase/supabase-js'
+import { Provider } from 'react-supabase'
+
+const client = createClient('https://xyzcompany.supabase.co', 'public-anon-key')
+
+const App = () => (
+  <Provider value={client}>
+    <YourRoutes />
+  </Provider>
+)
+```
+
+Now every component inside and under the `Provider` can use the Supabase client:
+
+```js
+import { useSelect } from 'react-supabase'
+
+const Todos = () => {
+  const [result, reexecuteSelect] = useSelect('todos')
+
+  const { data, fetching, error } = result
+
+  if (fetching) return <p>Loading...</p>
+  if (error) return <p>Oh no... {error.message}</p>
+  return (
+    <ul>
+      {data.map((todo) => (
+        <li key={todo.id}>{todo.title}</li>
+      ))}
+    </ul>
+  )
+}
+```
diff --git a/docs/pages/index.md b/docs/pages/index.md
@@ -0,0 +1,7 @@
+---
+title: Introduction
+---
+
+# react-supabase
+
+`react-supabase` is a React Hooks library for [Supabase](https://supabase.io).
diff --git a/docs/pages/meta.json b/docs/pages/meta.json
@@ -0,0 +1,5 @@
+{
+    "index": "Introduction",
+    "getting-started": "Getting Started",
+    "documentation": "Documentation"
+}
diff --git a/docs/theme.config.js b/docs/theme.config.js
@@ -0,0 +1,29 @@
+export default {
+    repository: 'https://github.com/tmm/react-supabase', // project repo
+    docsRepository: 'https://github.com/tmm/react-supabase', // docs repo
+    branch: 'main', // branch of docs
+    path: '/docs/', // path of docs
+    titleSuffix: ' – react-supabase',
+    nextLinks: true,
+    prevLinks: true,
+    search: true,
+    customSearch: null, // customizable, you can use algolia for example
+    darkMode: true,
+    footer: true,
+    footerText: 'MIT 2020 © Tom Meagher.',
+    footerEditOnGitHubLink: true, // will link to the docs repo
+    logo: <span>react-supabase</span>,
+    head: (
+        <>
+            <meta
+                name="viewport"
+                content="width=device-width, initial-scale=1.0"
+            />
+            <meta
+                name="description"
+                content="React Hooks library for Supabase"
+            />
+            <meta name="og:title" content="react-supabase" />
+        </>
+    ),
+}
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": false,
+        "forceConsistentCasingInFileNames": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "preserve"
+    },
+    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+    "exclude": ["node_modules"]
+}
diff --git a/docs/yarn.lock b/docs/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`dist/`
	`2`	`+docs/`
`2`	`3`	`node_modules/`
Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@`
`35`	`35`	`"argsIgnorePattern": "^_"`
`36`	`36`	`}`
`37`	`37`	`],`
	`38`	`+ "@typescript-eslint/no-var-requires": "off",`
`38`	`39`	// `eslint-plugin-import`
`39`	`40`	`// https://github.com/benmosher/eslint-plugin-import`
`40`	`41`	`"import/order": [`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,6 @@ @@
 +# `react-supabase` website
++
 +```
 +yarn
 +yarn dev
 +```
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+/// <reference types="next" />`
	`2`	`+/// <reference types="next/types/global" />`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+const withNextra = require('nextra')('nextra-theme-docs', './theme.config.js')`
	`2`	`+module.exports = withNextra()`