Merge pull request #20 from ph1p/feature/web-and-monorepo

Feature/web and monorepo

.eslintrc.js

@@ -6,16 +6,46 @@ module.exports = {
   extends: ['prettier'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
-    project: 'tsconfig.json',
+    project: ['tsconfig.json', './packages/*/tsconfig.json'],
     sourceType: 'module',
   },
   plugins: [
-    'eslint-plugin-import',
-    'eslint-plugin-prefer-arrow',
-    'eslint-plugin-react',
-    '@typescript-eslint'
+    'prefer-arrow',
+    'react',
+    '@typescript-eslint',
+    'react-app',
+    'import',
   ],
   rules: {
+    'react-hooks/exhaustive-deps': 0,
+    'import/order': [
+      'error',
+      {
+        pathGroups: [
+          {
+            pattern: '^[a-zA-Z]',
+            group: 'builtin',
+            position: 'after',
+          },
+          {
+            pattern: '@fc/shared/**',
+            group: 'external',
+            position: 'after',
+          },
+          {
+            pattern: '@/**',
+            group: 'internal',
+            position: 'after',
+          },
+        ],
+        pathGroupsExcludedImportTypes: ['builtin'],
+        groups: [['builtin', 'external'], 'internal', 'parent', 'sibling'],
+        'newlines-between': 'always',
+        alphabetize: {
+          order: 'asc',
+        },
+      },
+    ],
     '@typescript-eslint/adjacent-overload-signatures': 'error',
     '@typescript-eslint/array-type': [
       'error',
@@ -71,12 +101,6 @@ module.exports = {
     '@typescript-eslint/no-misused-new': 'error',
     '@typescript-eslint/no-namespace': 'error',
     '@typescript-eslint/no-parameter-properties': 'off',
-    '@typescript-eslint/no-shadow': [
-      'error',
-      {
-        hoist: 'all',
-      },
-    ],
     '@typescript-eslint/no-this-alias': 'error',
     '@typescript-eslint/no-unused-expressions': 'error',
     '@typescript-eslint/no-use-before-define': 'off',
@@ -117,9 +141,6 @@ module.exports = {
       'undefined',
     ],
     'id-match': 'error',
-    'import/no-extraneous-dependencies': 'error',
-    'import/no-internal-modules': 'off',
-    'import/order': 'error',
     'linebreak-style': 'off',
     'max-classes-per-file': ['error', 1],
     'max-len': 'off',
@@ -181,6 +202,6 @@ module.exports = {
       },
     ],
     'use-isnan': 'error',
-    'valid-typeof': 'off'
+    'valid-typeof': 'off',
   },
 };

.github/workflows/build.yml

@@ -13,11 +13,11 @@ jobs:
         with:
           node-version: 12
 
-      - name: npm install
-        run: npm install
+      - name: yarn install
+        run: yarn install
 
-      - name: npm run lint
-        run: npm run lint
+      - name: yarn lint
+        run: yarn lint
 
-      - name: npm run build
-        run: npm run build
+      - name: yarn build
+        run: yarn build:plugin && yarn build:server && yarn build:web

.gitignore

@@ -1,3 +1,7 @@
 Figma Chat/
 node_modules
-*.zip
+*.zip
+dist
+build
+release
+.DS_Store

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "arcanis.vscode-zipfs",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "search.exclude": {
+    "**/.yarn": true,
+    "**/.pnp.*": true
+  },
+  "eslint.nodePath": ".yarn/sdks",
+  "typescript.tsdk": ".yarn/sdks/typescript/lib",
+  "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

.yarnrc.yml

@@ -0,0 +1,5 @@
+nodeLinker: node-modules
+
+nmHoistingLimits: "none"
+
+yarnPath: .yarn/releases/yarn-berry.cjs

README.md

@@ -1,81 +1,27 @@
-# figma-chat ![](https://github.com/ph1p/figma-chat/workflows/Build%20Figma-Chat/badge.svg)
+# Figma Chat ![](https://github.com/ph1p/figma-chat/workflows/Build%20Figma-Chat/badge.svg)
 
-![](./assets/header.png)
+<img width="960" alt="header" src="https://user-images.githubusercontent.com/15351728/140660717-f48e4a08-9c9d-49d0-a753-13094f5cfd1b.png">
 
-A plugin to chat in figma files. Fully **encrypted**! (https://github.com/sehrope/node-simple-encryptor)
+## Monorepo
 
-### Installation
+- [Plugin](./packages/plugin/README.md)
+- [Web-Client](./packages/web/README.md)
+- [Server](./packages/server/README.md)
 
-There is no special installation process. Just install the plugin in figma.
-You can find it [**here**](https://www.figma.com/c/plugin/742073255743594050/Figma-Chat)
+## Development
 
-### What does it look like?
-
-![presentation](https://user-images.githubusercontent.com/15351728/110795249-ea161680-8276-11eb-8820-0f96ef4bf445.gif)
-(And yes, I have chatted with myself)
-
-### Encrypted? No login?
-
-Yes. When opening the plugin a **room** name and a **secret key** are randomly generated once
-and stored inside the `figma.root`. All editors within the file can access this attribute.
-
-```javascript
-figma.root.setPluginData('roomName', '');
-```
-
-All messages are en- and decrypted with the stored secret key and send to the server.
-
-### Server
-
-This plugins needs a server ([https://github.com/ph1p/figma-chat-server](https://github.com/ph1p/figma-chat-server)).
-This is a simple websocket server. **Messages are only forwarded and not stored!**
-
----
-
-At first I thought about saving the messages in one element inside the figma-file,
-but the plugin can't be notified when a new message arrives.
-The plugin must set an interval that asks for new updates every n milliseconds.
-
-### Todolist/Featurelist
-
-- [x] set custom server URL ([https://github.com/ph1p/figma-chat-server](https://github.com/ph1p/figma-chat-server))
-- [x] add leave and join message
-- [ ] add typing info
-- [x] notifications (first version)
-- [x] save local history
-- [x] create a shared history
-- [ ] users/instances can delete messages
-- [ ] regenerate new room name and secret key
-- [ ] create a random unique user name to detect returning users on server and inside a figma file
-- [x] remove all messages
-- [ ] add max message count to prevent a to large object inside the figma file
-- [x] pagination
-
-Feel free to open a feature request: https://github.com/ph1p/figma-chat/issues
-
-### Development
-
-```bash
-git clone git@github.com:ph1p/figma-chat.git
-cd figma-chat
-npm install
-```
+You can simple start or build all packages
 
 ```bash
-npm run build
+# start
+yarn start:server && yarn start:plugin && yarn start:web
+# build
+yarn build:server && yarn build:plugin && yarn build:web
 ```
 
-or
-
-```bash
-npm run dev
-```
+## Description
 
-- Open figma
-- Go to **Plugins**
-- Click the "+" next to **Development**
-- Choose the manifest.json inside `figma-chat/Figma Chat`
-- Ready to develop
+This is the monorepo of Figma-Chat. Inside the `packages` folder you will find all projects.
 
 ### Sound
 

package.json

@@ -2,11 +2,16 @@
   "name": "figma-chat",
   "version": "4.3.1",
   "description": "",
-  "main": "code.js",
+  "private": true,
   "scripts": {
-    "lint": "eslint --ext .ts --ext .tsx --ext .js -c .eslintrc.js ./src/",
-    "build": "NODE_ENV=production webpack --mode=production && rm ./Figma\\ Chat/ui.js*",
-    "dev": "DEBUG=* webpack --watch",
+    "build": "yarn build:plugin && yarn build:web && yarn build:server",
+    "start:plugin": "yarn workspace plugin start",
+    "start:web": "yarn workspace web start",
+    "start:server": "yarn workspace server dev",
+    "build:plugin": "yarn workspace plugin build",
+    "build:web": "yarn workspace web build",
+    "build:server": "yarn workspace server build",
+    "lint": "yarn workspace plugin lint && yarn workspace web lint && yarn workspace shared lint && yarn workspace server lint",
     "version": "conventional-changelog -p karma -i CHANGELOG.md -s -r 0 && git add ."
   },
   "author": "Philip Stapelfeldt <me@ph1p.dev>",
@@ -21,69 +26,7 @@
     "singleQuote": true
   },
   "license": "ISC",
-  "devDependencies": {
-    "@figma/plugin-typings": "^1.26.0",
-    "@types/react-transition-group": "^4.4.2",
-    "@types/react": "^17.0.14",
-    "@types/react-dom": "^17.0.9",
-    "@typescript-eslint/eslint-plugin": "^4.28.4",
-    "@typescript-eslint/parser": "^4.28.4",
-    "create-file-webpack": "^1.0.2",
-    "css-loader": "^6.2.0",
-    "esbuild-loader": "^2.13.1",
-    "eslint": "^7.31.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-prefer-arrow": "^1.2.3",
-    "eslint-plugin-react": "^7.24.0",
-    "html-webpack-plugin": "^5.3.2",
-    "style-loader": "^3.2.1",
-    "terser-webpack-plugin": "v5.1.4",
-    "typescript": "^4.3.5",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.46.0",
-    "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^4.7.2"
-  },
-  "figmaPlugin": {
-    "name": "Figma Chat",
-    "id": "742073255743594050",
-    "api": "1.0.0",
-    "main": "code.js",
-    "ui": "ui.html",
-    "enableProposedApi": false,
-    "relaunchButtons": [
-      {
-        "command": "open",
-        "name": "Open Figma-Chat"
-      },
-      {
-        "command": "relaunch",
-        "name": "Send selection to chat",
-        "multipleSelection": true
-      }
-    ]
-  },
-  "dependencies": {
-    "@popperjs/core": "^2.9.2",
-    "buffer": "^6.0.3",
-    "crypto-browserify": "^3.12.0",
-    "linkifyjs": "^2.1.9",
-    "mobx": "^6.3.2",
-    "mobx-react-lite": "^3.2.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-popper": "^2.2.5",
-    "react-router-dom": "^5.2.0",
-    "react-timeago": "^6.2.1",
-    "react-transition-group": "^4.4.2",
-    "simple-encryptor": "^4.0.0",
-    "socket.io-client": "^4.1.3",
-    "stream-browserify": "^3.0.0",
-    "styled-components": "^5.3.0",
-    "uniqid": "^5.3.0"
-  },
-  "resolutions": {
-    "bn.js": "5.2.0"
-  }
+  "workspaces": [
+    "packages/*"
+  ]
 }

packages/plugin/README.md

@@ -0,0 +1,56 @@
+# Figma Chat Plugin
+
+A plugin to chat in figma files. Fully **encrypted**! (https://github.com/sehrope/node-simple-encryptor)
+
+### Installation
+
+There is no special installation process. Just install the plugin in figma.
+You can find it [**here**](https://www.figma.com/c/plugin/742073255743594050/Figma-Chat)
+
+### What does it look like?
+
+![preview](https://user-images.githubusercontent.com/15351728/140659857-f45affff-2d36-43ce-810f-c4c6f9b04017.gif)
+(And yes, I have chatted with myself)
+
+### Encrypted? No login?
+
+Yes. When opening the plugin a **room** name and a **secret key** are randomly generated once
+and stored inside the `figma.root`. All editors within the file can access this attribute.
+
+```javascript
+figma.root.setPluginData('roomName', '');
+```
+
+All messages are en- and decrypted with the stored secret key and send to the server.
+
+### Development
+
+```bash
+git clone git@github.com:ph1p/figma-chat.git
+cd figma-chat
+yarn install
+```
+
+```bash
+yarn build:plugin
+```
+
+or
+
+```bash
+yarn start:plugin
+```
+
+- Open figma
+- Go to **Plugins**
+- Click the "+" next to **Development**
+- Choose the manifest.json inside `packages/plugin/Figma Chat`
+- Ready to develop
+
+### Bugs / Features
+
+Feel free to open a feature request or a bug report: https://github.com/ph1p/figma-chat/issues
+
+### Sound
+
+Thanks to [https://notificationsounds.com/notification-sounds/when-604](https://notificationsounds.com/notification-sounds/when-604)