initial commit of the nylas-react files

.gitignore

@@ -31,6 +31,9 @@ build/
 # Build dirs for FaaS systems (e.g. AWS Lambda)
 fn_build/
 
+# Ignore the output folder of the compiled TypeScript code
+lib
+
 
 ###### Python #####
 # Ignore common virtualenv names

README.md

@@ -1,2 +1,57 @@
-# StandardTemplate
-Standard template with branch protections
+# Nylas React SDK
+
+![npm](https://img.shields.io/npm/v/@nylas/nylas-react)
+
+This is the GitHub repository for the Nylas React SDK. The Nylas Communications Platform provides REST APIs for [Email](https://developer.nylas.com/docs/connectivity/email/), [Calendar](https://developer.nylas.com/docs/connectivity/calendar/), and [Contacts](https://developer.nylas.com/docs/connectivity/contacts/), and the Node SDK is the quickest way to build your integration using React.
+
+Here are some resources to help you get started:
+
+- [Quickstart](https://developer.nylas.com/docs/the-basics/quickstart/)
+- [Nylas API Reference](https://developer.nylas.com/docs/api/)
+
+
+# Install
+
+To install the Nylas React SDK, you will first need to have [npm](https://www.npmjs.com/get-npm) installed on your machine.
+
+Then, head to the nearest command line and run the following:
+```bash
+npm install @nylas/nylas-react
+```
+
+To install this package from source, clone this repo and run `npm install` from inside the project directory:
+
+```bash
+git clone https://github.com/nylas/nylas-react.git
+cd nylas-react
+npm install
+```
+
+# Usage
+
+The Nylas React SDK provides an easy way to implement authentication in your react application.
+
+### Components
+
+The Nylas React SDK provides the following component:
+
+* [NylasContainer](src/nylas-container.tsx) - This is a component that utilizes React Context API to maintain a state for authentication and the [Nylas JS](https://github.com/nylas/nylas-js) client. This context can be accessed via the [useNylas](https://github.com/nylas/nylas-react#useNylas) hook.
+
+### Hooks
+These are the following options that can be passed in to configure an instance of the Nylas JS SDK
+
+* useNylas - returns an object with the following:
+  * client - The Nylas JS client instance
+  * authState - The current authentication state
+  * authWithRedirect - The function for building, and redirecting to, the authentication URL
+  * exchangeCodeFromUrlForToken - The function for parsing the code from the authentication URL and exchanging it for an access token
+
+# Contributing
+
+Please refer to [Contributing](Contributing.md) for information about how to make contributions to this project. We welcome questions, bug reports, and pull requests.
+
+# License
+
+This project is licensed under the terms of the MIT license. Please refer to [LICENSE](LICENSE.txt) for the full terms. 
+
+

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@nylas/nylas-react",
+  "version": "0.1.0",
+  "description": "React SDK for the Nylas Platform API",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@nylas/nylas-js": "^0.1.0"
+  },
+  "devDependencies": {
+    "typescript": "^4.7.4",
+    "react": "^18.2.0",
+    "@types/react": "^18.0.12"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nylas/nylas-react.git"
+  },
+  "keywords": [
+    "email",
+    "contacts",
+    "calendar",
+    "nylas"
+  ],
+  "author": "Nylas, Inc.",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/nylas/nylas-react/issues"
+  },
+  "homepage": "https://github.com/nylas/nylas-react#readme"
+}

src/index.ts

@@ -0,0 +1,14 @@
+export {
+  default as NylasContainer,
+  NylasContainerOptions
+} from './nylas-container';
+export {
+  default as NylasContext,
+  NylasContextInterface,
+  useNylas
+} from './nylas-context';
+export {
+  NylasProps,
+  AuthUrlOptions,
+  ExchangeCodeOptions
+} from '@nylas/nylas-js';

src/nylas-container.tsx

@@ -0,0 +1,44 @@
+import React, { useCallback, useState } from "react";
+import NylasContext from "./nylas-context";
+import Nylas, { AuthUrlOptions, ExchangeCodeOptions } from "@nylas/nylas-js";
+
+export interface NylasContainerOptions {
+  serverBaseUrl: string;
+  children?: React.ReactNode;
+}
+
+const NylasContainer = (opts: NylasContainerOptions): JSX.Element => {
+  const {children, ...nylasProps} = opts;
+  const [client] = useState(() => new Nylas(nylasProps));
+  const [authState, setAuthState] = useState(false);
+
+  const authWithRedirect = useCallback(
+    async (opts: AuthUrlOptions): Promise<void|boolean> => client.authWithRedirect(opts),
+    [client]
+  );
+
+  const exchangeCodeFromUrlForToken = useCallback(
+    async (opts?: ExchangeCodeOptions): Promise<string | boolean> => {
+      const accessToken = await client.exchangeCodeFromUrlForToken(opts);
+      if(accessToken !== false) {
+        setAuthState(true);
+      }
+
+      return accessToken;
+    },
+    [client, authState]
+  )
+
+  return (
+    <NylasContext.Provider value={{
+      client,
+      authState,
+      authWithRedirect,
+      exchangeCodeFromUrlForToken
+    }}>
+      {children}
+    </NylasContext.Provider>
+  )
+}
+
+export default NylasContainer;

src/nylas-context.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import Nylas, {AuthUrlOptions, ExchangeCodeOptions} from "@nylas/nylas-js";
+
+export interface NylasContextInterface {
+  client: Nylas;
+  authState: boolean;
+  authWithRedirect(opts: AuthUrlOptions): Promise<void|boolean>;
+  exchangeCodeFromUrlForToken(opts?: ExchangeCodeOptions): Promise<string | boolean>;
+}
+
+const NylasContext = React.createContext<NylasContextInterface | null>(null);
+
+export const useNylas = (): NylasContextInterface => React.useContext(NylasContext) as NylasContextInterface;
+
+export default NylasContext;

tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "es2022",
+    "outDir": "./lib",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "declaration": true,
+    "allowSyntheticDefaultImports": true
+  }
+}