Sync trello boards, edit card (name, description), and create card

package.json

@@ -231,8 +231,11 @@
     "@ant-design/icons": "^4.7.0",
     "@atlaskit/codemod-utils": "^4.2.4",
     "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration": "^1.2.0",
+    "@ckeditor/ckeditor5-react": "^9.3.0",
     "@electron/remote": "^2.0.8",
     "antd": "^4.20.3",
+    "axios": "^1.7.7",
+    "ckeditor5": "^43.2.0",
     "dateformat": "^5.0.3",
     "electron-debug": "^3.2.0",
     "electron-log": "^4.4.6",

src/api/nodes/NodeController.jsx

@@ -39,17 +39,31 @@ const NodeController = {
    * @param {string} nodeType - the type of node to create.
    * @param {string} nodeTitle - the title of the node.
    * @param {string} [parentId=``] - the Id of the parent of the node. Can be null or empty.
-   * @param iterationId
+   * @param iterationId - the Id of the iteration the node is associated with
+   * @param trelloData - the trello data to associate with the node
    * @returns {object} node - the newly created node
    * @permission {Modification}
    */
-  createNode(nodeType, nodeTitle, parentId = ``, iterationId = ``) {
+  createNode(
+    nodeType,
+    nodeTitle,
+    parentId = ``,
+    iterationId = ``,
+    trelloData = null,
+  ) {
+    const trelloAuth = {
+      key: localStorage.getItem(`trelloKey`),
+      token: localStorage.getItem(`trelloToken`),
+    };
+
     return ipcRenderer.sendSync(
       'api:createNode',
       nodeType,
       nodeTitle,
       parentId,
       iterationId,
+      trelloData,
+      trelloAuth,
     );
   },
 
@@ -58,11 +72,17 @@ const NodeController = {
   },
 
   updateNodeProperty(propertyToUpdate, nodeId, newValue) {
+    const trelloAuth = {
+      key: localStorage.getItem(`trelloKey`),
+      token: localStorage.getItem(`trelloToken`),
+    };
+
     return ipcRenderer.sendSync(
       'api:updateNodeProperty',
       propertyToUpdate,
       nodeId,
       newValue,
+      trelloAuth,
     );
   },
 };

src/api/parent/ParentController.jsx

@@ -37,8 +37,8 @@ const ParentController = {
    * @returns {object} parent - the newly created parent
    * @permission {Modification}
    */
-  createParent(parentTitle) {
-    return ipcRenderer.sendSync('api:createParent', parentTitle);
+  createParent(parentTitle, trelloData) {
+    return ipcRenderer.sendSync('api:createParent', parentTitle, trelloData);
   },
 
   deleteParent(parentId) {

src/api/project/ProjectController.jsx

@@ -1,5 +1,6 @@
 // eslint-disable-next-line import/no-cycle
+import { ipcRenderer } from 'electron';
 import projectService from '../../services/ProjectService';
 
 /**
  * @class ProjectController
@@ -65,6 +66,14 @@
       newValue,
     );
   },
+
+  setTrelloBoard(trelloBoard) {
+    return ipcRenderer.sendSync('api:setTrelloBoard', trelloBoard);
+  },
+
+  getProjectSettings() {
+    return ipcRenderer.sendSync('api:getProjectSettings');
+  },
 };
 
 export default ProjectController;

src/components/APIKeyInput/APIKeyInput.jsx

@@ -0,0 +1,42 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { Button, Input, Space } from 'antd';
+import React from 'react';
+
+function APIKeyInput() {
+  const [passwordVisible, setPasswordVisible] = React.useState(false);
+  const trelloToken = localStorage.getItem('trelloToken');
+
+  return (
+    <Space direction="vertical">
+      <Space direction="horizontal">
+        <Input.Password
+          placeholder="input trello API key"
+          defaultValue={trelloToken}
+          visibilityToggle={{
+            visible: passwordVisible,
+            onVisibleChange: setPasswordVisible,
+          }}
+          id="trelloAPIKey"
+        />
+        <Button
+          style={{
+            width: 80,
+          }}
+          onClick={() => {
+            localStorage.setItem(
+              'trelloToken',
+              document.getElementById('trelloAPIKey').value,
+            );
+            console.log(
+              'value : ',
+              document.getElementById('trelloAPIKey').value,
+            );
+          }}
+        >
+          Save
+        </Button>
+      </Space>
+    </Space>
+  );
+}
+export default APIKeyInput;

src/components/TextEditor/TextEditor.css

@@ -0,0 +1,157 @@
+@import url('https://fonts.googleapis.com/css2?family=Oswald&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
+@media print {
+  body {
+    margin: 0 !important;
+  }
+}
+
+.main-container {
+  font-family: 'Lato';
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.ck-content {
+  font-family: 'Lato';
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.editor-container_classic-editor .editor-container__editor {
+  min-width: 795px;
+  max-width: 795px;
+}
+
+.editor-container_include-block-toolbar {
+  margin-left: 42px;
+}
+
+.ck-content h3.category {
+  font-family: 'Oswald';
+  font-size: 20px;
+  font-weight: bold;
+  color: #555;
+  letter-spacing: 10px;
+  margin: 0;
+  padding: 0;
+}
+
+.ck-content h2.document-title {
+  font-family: 'Oswald';
+  font-size: 50px;
+  font-weight: bold;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.ck-content h3.document-subtitle {
+  font-family: 'Oswald';
+  font-size: 20px;
+  color: #555;
+  margin: 0 0 1em;
+  font-weight: bold;
+  padding: 0;
+}
+
+.ck-content p.info-box {
+  --background-size: 30px;
+  --background-color: #e91e63;
+  padding: 1.2em 2em;
+  border: 1px solid var(--background-color);
+  background: linear-gradient(
+    135deg,
+    var(--background-color) 0%,
+    var(--background-color) var(--background-size),
+    transparent var(--background-size)
+  ),
+  linear-gradient(
+    135deg,
+    transparent calc(100% - var(--background-size)),
+    var(--background-color) calc(100% - var(--background-size)),
+    var(--background-color)
+  );
+  border-radius: 10px;
+  margin: 1.5em 2em;
+  box-shadow: 5px 5px 0 #ffe6ef;
+}
+
+.ck-content blockquote.side-quote {
+  font-family: 'Oswald';
+  font-style: normal;
+  float: right;
+  width: 35%;
+  position: relative;
+  border: 0;
+  overflow: visible;
+  z-index: 1;
+  margin-left: 1em;
+}
+
+.ck-content blockquote.side-quote::before {
+  content: '“';
+  position: absolute;
+  top: -37px;
+  left: -10px;
+  display: block;
+  font-size: 200px;
+  color: #e7e7e7;
+  z-index: -1;
+  line-height: 1;
+}
+
+.ck-content blockquote.side-quote p {
+  font-size: 2em;
+  line-height: 1;
+}
+
+.ck-content blockquote.side-quote p:last-child:not(:first-child) {
+  font-size: 1.3em;
+  text-align: right;
+  color: #555;
+}
+
+.ck-content span.marker {
+  background: yellow;
+}
+
+.ck-content span.spoiler {
+  background: #000;
+  color: #000;
+}
+
+.ck-content span.spoiler:hover {
+  background: #000;
+  color: #fff;
+}
+
+.ck-content pre.fancy-code {
+  border: 0;
+  margin-left: 2em;
+  margin-right: 2em;
+  border-radius: 10px;
+}
+
+.ck-content pre.fancy-code::before {
+  content: '';
+  display: block;
+  height: 13px;
+  background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
+  margin-bottom: 8px;
+  background-repeat: no-repeat;
+}
+
+.ck-content pre.fancy-code-dark {
+  background: #272822;
+  color: #fff;
+  box-shadow: 5px 5px 0 #0000001f;
+}
+
+.ck-content pre.fancy-code-bright {
+  background: #dddfe0;
+  color: #000;
+  box-shadow: 5px 5px 0 #b3b3b3;
+}