chore: update structure

.gitignore

@@ -0,0 +1 @@
+node_modules/

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "react-vdo",
+  "private": true,
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "bootstrap": "lerna bootstrap",
+    "build": "lerna run build",
+    "start": "lerna run start --stream",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^11.0.0",
+    "@commitlint/config-conventional": "^11.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.24.0",
+    "@typescript-eslint/parser": "^4.24.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.26.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-xo": "^0.36.0",
+    "eslint-plugin-import": "^2.23.2",
+    "eslint-plugin-prettier": "^3.4.0",
+    "husky": "^6.0.0",
+    "lerna": "^4.0.0",
+    "prettier": "^2.3.0",
+    "typescript": "^4.2.4",
+    "@figma/plugin-typings": "^1.23.0"
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+      "pre-commit": "yarn lint"
+    }
+  }
+}

p1/tsconfig.json → packages/p1/tsconfig.json

@@ -2,8 +2,8 @@
   "compilerOptions": {
     "target": "es6",
     "typeRoots": [
-      "./node_modules/@types",
-      "./node_modules/@figma"
+      "../../node_modules/@types",
+      "../../node_modules/@figma"
     ]
   }
 }

packages/p2/README.md

@@ -0,0 +1,40 @@
+Below are the steps to get your plugin running. You can also find instructions at:
+
+  https://www.figma.com/plugin-docs/setup/
+
+This plugin template uses Typescript and NPM, two standard tools in creating JavaScript applications.
+
+First, download Node.js which comes with NPM. This will allow you to install TypeScript and other
+libraries. You can find the download link here:
+
+  https://nodejs.org/en/download/
+
+Next, install TypeScript using the command:
+
+  npm install -g typescript
+
+Finally, in the directory of your plugin, get the latest type definitions for the plugin API by running:
+
+  npm install --save-dev @figma/plugin-typings
+
+If you are familiar with JavaScript, TypeScript will look very familiar. In fact, valid JavaScript code
+is already valid Typescript code.
+
+TypeScript adds type annotations to variables. This allows code editors such as Visual Studio Code
+to provide information about the Figma API while you are writing code, as well as help catch bugs
+you previously didn't notice.
+
+For more information, visit https://www.typescriptlang.org/
+
+Using TypeScript requires a compiler to convert TypeScript (code.ts) into JavaScript (code.js)
+for the browser to run.
+
+We recommend writing TypeScript code using Visual Studio code:
+
+1. Download Visual Studio Code if you haven't already: https://code.visualstudio.com/.
+2. Open this directory in Visual Studio Code.
+3. Compile TypeScript to JavaScript: Run the "Terminal > Run Build Task..." menu item,
+    then select "tsc: watch - tsconfig.json". You will have to do this again every time
+    you reopen Visual Studio Code.
+
+That's it! Visual Studio Code will regenerate the JavaScript file every time you save.

packages/p2/code.js

@@ -0,0 +1,32 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+function traverse(node) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if ("children" in node) {
+            if (node.type !== "INSTANCE") {
+                for (const child of node.children) {
+                    traverse(child);
+                }
+            }
+            else if (node.name === '_Specification') {
+                const spaceComp = node.children.find(element => /^(size|space)\/(width|height)/.test(element.name));
+                const textNode = node.children.find(element => element.type === "TEXT");
+                const valueToDisplay = /^(size|space)\/(width)/.test(spaceComp.name) ? spaceComp === null || spaceComp === void 0 ? void 0 : spaceComp.width : spaceComp === null || spaceComp === void 0 ? void 0 : spaceComp.height;
+                const textToDisplay = String(`${valueToDisplay}px`);
+                let len = textNode.characters.length;
+                yield figma.loadFontAsync(textNode.getRangeFontName(0, 1));
+                textNode.deleteCharacters(0, len);
+                textNode.insertCharacters(0, textToDisplay);
+            }
+        }
+    });
+}
+traverse(figma.root);
+figma.closePlugin();

packages/p2/code.ts

@@ -0,0 +1,29 @@
+const ColorLuminance = (hex: string, lums: Array<number>) => {
+	if (/[^0-9a-f]/gi.test(hex)) {
+    throw new Error ('Invalid color')
+  }
+  const colors = []
+
+	if (hex.length < 6) {
+		hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
+	}
+
+  for (const lum of lums) {
+    let color = "#"
+
+    for (let i = 0; i < 3; i++) {
+      let cNumber = parseInt(hex.substr(i*2,2), 16);
+      const colorParh = Math.round(Math.min(Math.max(0, cNumber + (cNumber * lum)), 255)).toString(16);
+      color += ('00'+colorParh).substr(colorParh.length);
+    }
+
+    colors.push(color)
+  }
+
+	return colors;
+}
+
+// console.log(ColorLuminance("6699C", [0, 1, 2]))
+
+
+figma.closePlugin()

packages/p2/manifest.json

@@ -0,0 +1,5 @@
+{
+  "name": "p",
+  "api": "1.0.0",
+  "main": "code.js"
+}

packages/p2/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@react-vdo/ui",
+  "version": "0.0.1",
+  "main": "./code.ts",
+  "license": "MIT",
+  "dependencies": {
+    "@emotion/styled": "^11.3.0",
+    "@react-vdo/core": "^0.0.1",
+    "framer-motion": "^4.1.17"
+  }
+}

packages/p2/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "typeRoots": [
+      "../../node_modules/@types",
+      "../../node_modules/@figma"
+    ]
+  }
+}

packages/p2/yarn.lock

@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@figma/plugin-typings@^1.23.0":
+  version "1.23.0"
+  resolved "https://registry.yarnpkg.com/@figma/plugin-typings/-/plugin-typings-1.23.0.tgz#e82774264d2f72604856562cd7b021bd32e60852"
+  integrity sha512-hKSQSyE4Lwb9GI0sL92YX8QvBAwsCkKGSIxLkEn3CDLSTtOjtTs/GKsQ8zUAFtcrr0KQLEYW0rBkGU3UVpPq/Q==

tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "lib": ["es5", "es6", "es7", "es2017", "dom"],
+    "removeComments": true
+  },
+  "include": [
+    "./packages"
+  ],
+  "exclude": ["node_modules"]
+}

yarn.lock

@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@figma/plugin-typings@^1.23.0":
+  version "1.23.0"
+  resolved "https://registry.yarnpkg.com/@figma/plugin-typings/-/plugin-typings-1.23.0.tgz#e82774264d2f72604856562cd7b021bd32e60852"
+  integrity sha512-hKSQSyE4Lwb9GI0sL92YX8QvBAwsCkKGSIxLkEn3CDLSTtOjtTs/GKsQ8zUAFtcrr0KQLEYW0rBkGU3UVpPq/Q==