Add AuthProvider context story

src/components/AuthProvider/AuthProvider.stories.mdx

@@ -1,9 +1,132 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import AuthProvider from "./AuthProvider";
 
+<Meta 
+    title="Components/AuthProvider" 
+    component={AuthProvider}
+/>
 
-The AuthProvider component purpose is to give users access tokens on login and to refresh the tokens at set intervals of time. The users career account login information is used to determine if user can be authenticated.
-<Meta title="Components/AuthProvider" component={AuthProvider} />
+# Overview
 
-export const Template = (props) => <AuthProvider {...props} />
+A [context provider](https://reactjs.org/docs/context.html) exposing hooks to access and set login status and token data.
 
+## Basic Usage
+To use AuthProvider, wrap children elements inside it:
+```js
+import AuthProvider from "./AuthProvider";
 
+export default function App(){
+    return (
+        <AuthProvider>
+            <Child />
+        </AuthProvider>
+    );
+}
+```
+
+## Hooks
+| Name | Description | Type |
+| - | - | - |
+| `useLogin` | Indicates whether the client is logged in or not. | `boolean` |
+| `useLoginSetter` | A function to set the login value. | `function` |
+| `useToken` | The current access token. Will be `null` if there is no access token. | `String` |
+| `useLoginSetter` | A function to set the token value. | `function` |
+
+## Examples
+### Use Login Data
+```js
+// LoginMessage.js
+import { useLogin } from "./AuthProvider";
+
+export default function LoginMessage(){
+    const loggedIn = useLogin();
+    return <p>The user is {loggedIn ? "" : "not"} logged in.</p>
+}
+```
+```js
+// App.js
+import AuthProvider from "./AuthProvider";
+import LoginMessage from "./LoginMessage";
+
+export default function App(){
+    return (
+        <AuthProvider>
+            <LoginMessage />
+        </AuthProvider>
+    );
+}
+```
+
+### Set Login Data
+```js
+// LoginButton.js
+import { useLoginSetter } from "./AuthProvider";
+
+export default function Login(){
+    const setLogin = useLoginSetter();
+
+    return <button onClick={ _ => setLogin(true)}>Log In</button>
+}
+```
+```js
+// App.js
+import AuthProvider from "./AuthProvider";
+import LoginButton from "./LoginButton";
+
+export default function App(){
+    return (
+        <AuthProvider>
+            <LoginButton />
+        </AuthProvider>
+    );
+}
+```
+
+### Use Token Data
+```js
+// TokenMessage.js
+import { useToken } from "./AuthProvider";
+
+export default function TokenMessage(){
+    const token = useToken();
+    return <p>The user's token is {token ? token : "empty"}.</p>
+}
+```
+```js
+// App.js
+import AuthProvider from "./AuthProvider";
+import TokenMessage from "./TokenMessage";
+
+export default function App(){
+    return (
+        <AuthProvider>
+            <TokenMessage />
+        </AuthProvider>
+    );
+}
+```
+
+### Set Token Data
+```js
+// TokenMessage.js
+import { useTokenSetter } from "./AuthProvider";
+
+export default function SetTokenButton(){
+    const setToken = useTokenSetter();
+    const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c";
+    return <button onClick={ _ => setToken(token)}>Set Token</button>
+}
+```
+```js
+// App.js
+import AuthProvider from "./AuthProvider";
+import SetTokenButton from "./SetTokenButton";
+
+export default function App(){
+    return (
+        <AuthProvider>
+            <SetTokenButton />
+        </AuthProvider>
+    );
+}
+```