diff --git a/.gitignore b/.gitignore index de18578..d0a9511 100644 --- a/.gitignore +++ b/.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 diff --git a/README.md b/README.md index 0802706..a23fd6d 100644 --- a/README.md +++ b/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. + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..e22bcde --- /dev/null +++ b/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" +} diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..7e0deba --- /dev/null +++ b/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'; \ No newline at end of file diff --git a/src/nylas-container.tsx b/src/nylas-container.tsx new file mode 100644 index 0000000..2c94461 --- /dev/null +++ b/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 => client.authWithRedirect(opts), + [client] + ); + + const exchangeCodeFromUrlForToken = useCallback( + async (opts?: ExchangeCodeOptions): Promise => { + const accessToken = await client.exchangeCodeFromUrlForToken(opts); + if(accessToken !== false) { + setAuthState(true); + } + + return accessToken; + }, + [client, authState] + ) + + return ( + + {children} + + ) +} + +export default NylasContainer; \ No newline at end of file diff --git a/src/nylas-context.ts b/src/nylas-context.ts new file mode 100644 index 0000000..9f3f25d --- /dev/null +++ b/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; + exchangeCodeFromUrlForToken(opts?: ExchangeCodeOptions): Promise; +} + +const NylasContext = React.createContext(null); + +export const useNylas = (): NylasContextInterface => React.useContext(NylasContext) as NylasContextInterface; + +export default NylasContext; \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..fe90d5d --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "target": "es6", + "module": "es2022", + "outDir": "./lib", + "jsx": "react", + "moduleResolution": "node", + "declaration": true, + "allowSyntheticDefaultImports": true + } +}