Merge pull request #13 from gridaco/staging

Staging

core-nodes/README.md

@@ -0,0 +1 @@
+# TODO

core-nodes/package.json

@@ -0,0 +1,4 @@
+{
+    "name": "@design-sdk/core-nodes",
+    "version": "0.0.0"
+}

core-types/design-provider.ts

@@ -0,0 +1,6 @@
+export type DesignProvider =
+  | "grida"
+  | "nothing"
+  | "figma"
+  | "sketch"
+  | "unknown";

core-types/index.ts

@@ -0,0 +1 @@
+export * from "./design-provider";

core-types/package.json

@@ -0,0 +1,8 @@
+{
+    "name": "@design-sdk/core-types",
+    "description": "Core typings for design representetives",
+    "authors": "Grida.co",
+    "version": "0.0.0",
+    "main": "index.ts",
+    "dependencies": {}
+}

core-types/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist"
+  },
+  "include": ["."],
+  "exclude": ["dist", "node_modules", "__test__"]
+}

core/utils/node-width-height.ts

@@ -89,8 +89,8 @@ export function nodeWidthHeight(
     let hPadding = 0;
     let vPadding = 0;
     if ("layoutMode" in node) {
-      hPadding = node.padding.left + node.padding.right;
-      vPadding = node.padding.top + node.padding.bottom;
+      hPadding = node.padding?.left ?? 0 + node.padding?.right ?? 0;
+      vPadding = node.padding?.top ?? 0 + node.padding?.bottom ?? 0;
     }
 
     // set them independently, in case w is equal but h isn't

figma-oauth/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Grida
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

figma-oauth/README.md

@@ -0,0 +1,34 @@
+# `Figma-OAuth` _(`@design-sdk/Figma-OAuth`)_
+
+> Figma OAuth, ready to use.
+
+## Installation
+
+```sh
+yarn add @design-sdk/figma-oauth
+
+# or with npm
+npm i @design-sdk/figma-oauth
+```
+
+## Usage
+
+```ts
+import { urls, request } from "@design-sdk/figma-oauth";
+
+const oauthTokenRequestUrl = urls.oauth_token_request_url({
+  client_id,
+  client_secret,
+  redirect_uri,
+  code,
+});
+
+const oauthAuthenticationResult = request.authenticationoauth_token_request_url(
+  {
+    client_id,
+    client_secret,
+    redirect_uri,
+    code,
+  }
+);
+```

figma-oauth/__test__/.env.defaults

@@ -0,0 +1,2 @@
+# dummy client secret (safe to be exposed)
+FIGMA_APP_CLIENT_SECRET=pk4D9pwAMWqvOHCI8oor

figma-oauth/__test__/token-handling.test.ts

@@ -0,0 +1,3 @@
+test("request token", () => {
+  expect("").toBe(""); // pass - todo
+});

figma-oauth/__test__/url-build.test.ts

@@ -0,0 +1,26 @@
+import { oauthBrowserUrl, oauthTokenRequestUrl } from "../";
+
+test("oauth link building with params", () => {
+  expect(
+    oauthBrowserUrl({
+      client_id: "USz3HnKVO6Y2HUED98ZEzf",
+      redirect_uri: "https://accounts.grida.co/callback/figma-app-oauth",
+      state: "",
+    }),
+  ).toBe(
+    "https://www.figma.com/oauth?client_id=USz3HnKVO6Y2HUED98ZEzf&redirect_uri=https%3A%2F%2Faccounts.grida.co%2Fcallback%2Ffigma-app-oauth&scope=file_read&state=&response_type=code",
+  );
+});
+
+test("oauth token request url building with params", () => {
+  expect(
+    oauthTokenRequestUrl({
+      client_id: "USz3HnKVO6Y2HUED98ZEzf",
+      client_secret: "pk4D9pwAMWqvOHCI8oor", // this is dummy client sefret - no worry
+      redirect_uri: "https://accounts.grida.co/callback/figma-app-oauth",
+      code: "r5RpCppGRwFpflPZ0suP9xRRu", // code generated from previous browser auth. (this is also a dummy code)
+    }),
+  ).toBe(
+    "https://www.figma.com/api/oauth/token?client_id=USz3HnKVO6Y2HUED98ZEzf&client_secret=pk4D9pwAMWqvOHCI8oor&grant_type=authorization_code&redirect_uri=https%3A%2F%2Faccounts.grida.co%2Fcallback%2Ffigma-app-oauth&code=r5RpCppGRwFpflPZ0suP9xRRu",
+  );
+});

figma-oauth/index.ts

@@ -0,0 +1 @@
+export * from "./lib";

figma-oauth/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  transform: {
+    "^.+\\.tsx?$": "ts-jest",
+  },
+  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
+  testPathIgnorePatterns: ["/lib/", "/node_modules/"],
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+  collectCoverage: true,
+};

figma-oauth/lib/index.ts

@@ -0,0 +1,3 @@
+export * from "./types";
+export * from "./request";
+export * from "./urls";

figma-oauth/lib/request.ts

@@ -0,0 +1,74 @@
+import Axios from "axios";
+import {
+  FigmaOAuthTokenRequestParam,
+  FigmaOAuthTokenResponse,
+  FigmaOAuthTokenRefreshResponse,
+  FigmaOAuthTokenRefreshParam,
+} from "./types";
+import { oauthTokenRefreshUrl, oauthTokenRequestUrl } from "./urls";
+
+/**
+ * The format of the response body is:
+ * ```json
+ *  {
+      "access_token": "<TOKEN>",
+      "expires_in": "<EXPIRATION (in seconds)>",
+      "refresh_token": "<REFRESH TOKEN>"
+    }
+ * ``` 
+ */
+export async function requestOauthToken({
+  client_id,
+  client_secret,
+  grant_type = "authorization_code",
+  redirect_uri,
+  code,
+}: FigmaOAuthTokenRequestParam): Promise<FigmaOAuthTokenResponse> {
+  const res = await Axios.post<FigmaOAuthTokenResponse>(
+    oauthTokenRequestUrl({
+      client_id,
+      client_secret,
+      redirect_uri,
+      grant_type,
+      code,
+    })
+  );
+
+  return res.data;
+}
+
+/**
+ * [Refreshing OAuth tokens](https://www.figma.com/developers/api#refresh-oauth2)
+ * 
+ * ```
+    POST https://www.figma.com/api/oauth/refresh?
+    client_id=:client_id&
+    client_secret=:client_secret&
+    refresh_token=:refresh_token
+
+    {
+        "access_token": <TOKEN>,
+        "expires_in": <EXPIRATION (in seconds)>,
+    }
+ * ```
+ */
+export async function refreshOauthToken({
+  client_id,
+  client_secret,
+  refresh_token,
+}: FigmaOAuthTokenRefreshParam): Promise<FigmaOAuthTokenRefreshResponse> {
+  const res = await Axios.post<FigmaOAuthTokenRefreshResponse>(
+    oauthTokenRefreshUrl({
+      client_id,
+      client_secret,
+      refresh_token,
+    })
+  );
+
+  return res.data;
+}
+
+export const request = {
+  authentication: requestOauthToken,
+  tokenrefresh: refreshOauthToken,
+};

figma-oauth/lib/types.ts

@@ -0,0 +1,56 @@
+export interface FigmaOAuthUrlParam {
+  client_id: string;
+
+  redirect_uri: string;
+
+  /**
+   * Currently this value can only be file_read signifying
+   * read-only access to the user's files.
+   */
+  scope?: "file_read";
+
+  /**
+   * This is a value that you should randomly generate and store.
+   * When we call back to your callback endpoint,
+   * you should check that the state value we pass back to you matches the state value that you initially used in your request.
+   */
+  state: string;
+
+  /**
+   * Currently we only support the authorization code flow for OAuth 2,
+   * so the only valid value here is code.
+   * We may support other values in the future.
+   */
+  response_type?: "code";
+}
+
+export interface FigmaOAuthTokenRequestParam {
+  client_id: string;
+  client_secret: string;
+  grant_type?: string;
+  redirect_uri: string;
+  code: string;
+}
+
+export interface FigmaOAuthTokenRefreshParam {
+  client_id: string;
+  client_secret: string;
+  refresh_token: string;
+}
+
+/**
+ * [Authenticate users](https://www.figma.com/developers/api#auth-oauth2)
+ */
+export interface FigmaOAuthTokenResponse {
+  access_token: string;
+  expires_in: number;
+  refresh_token: string;
+}
+
+/**
+ * [Refreshing OAuth tokens](https://www.figma.com/developers/api#refresh-oauth2)
+ */
+export interface FigmaOAuthTokenRefreshResponse {
+  access_token: string;
+  expires_in: number;
+}

figma-oauth/lib/urls.ts

@@ -0,0 +1,77 @@
+import {
+  FigmaOAuthUrlParam,
+  FigmaOAuthTokenRequestParam,
+  FigmaOAuthTokenRefreshParam,
+} from "./types";
+
+/**
+ * example:
+ *
+ * `https://www.figma.com/api/oauth/token?`
+ * - `client_id=:client_id&`
+ * - `client_secret=:client_secret&`
+ * - `redirect_uri=:callback&`
+ * - `code=:code&`
+ * - `grant_type=authorization_code`
+ *
+ * will return : https://accounts.grida.co/callback/figma-app-oauth?code=K3p9uhqlntNDrbLe2HMPAFgwf&state=
+ */
+export function oauthBrowserUrl({
+  client_id,
+  redirect_uri,
+  state,
+  scope = "file_read",
+  response_type = "code",
+}: FigmaOAuthUrlParam) {
+  const params = {
+    client_id: client_id,
+    redirect_uri: redirect_uri,
+    scope: scope,
+    state: state,
+    response_type: response_type,
+  };
+
+  const _q_str = new URLSearchParams(params).toString();
+  return `https://www.figma.com/oauth?${_q_str}`;
+}
+
+/**
+ *
+ */
+export function oauthTokenRequestUrl({
+  client_id,
+  client_secret,
+  grant_type = "authorization_code",
+  redirect_uri,
+  code,
+}: FigmaOAuthTokenRequestParam) {
+  const params = {
+    client_id: client_id,
+    client_secret: client_secret,
+    grant_type: grant_type,
+    redirect_uri: redirect_uri,
+    code: code,
+  };
+  const _q_str = new URLSearchParams(params).toString();
+  return `https://www.figma.com/api/oauth/token?${_q_str}`;
+}
+
+export function oauthTokenRefreshUrl({
+  client_id,
+  client_secret,
+  refresh_token,
+}: FigmaOAuthTokenRefreshParam): string {
+  const params = {
+    client_id: client_id,
+    client_secret: client_secret,
+    refresh_token: refresh_token,
+  };
+  const _q_str = new URLSearchParams(params).toString();
+  return `https://www.figma.com/api/oauth/refresh?${_q_str}`;
+}
+
+export const urls = {
+  oauth_token_request_url: oauthTokenRequestUrl,
+  oauth_token_refresh_url: oauthTokenRefreshUrl,
+  oauth_browser_url: oauthBrowserUrl,
+};