Sabago

sabago/README.md

@@ -0,0 +1,51 @@
+# ToDos
+
+- [x] Create a subfolder according to my GitHub username
+- [x] Re-use the content from `../` for `README.md` and modify as needed.
+- [x] Contribute code in this folder
+- [x] Put a pull request when done
+
+# Flowchart Designer (Frontend/UX)
+
+> Ideal candidate: skilled front-end developer with UI/UX chops.
+
+# Overview
+
+Create a drag-and-drop flowchart designer close to a basic programming flowchart editor that is purpose-built for dealing with certain types of data.
+
+Front-end developers: use Meteor and React.js and minimalistic UX/UI.
+Pure UI/UX designers: create high fidelity mockups.
+
+# Requirements
+
+1. Implement basic arithmetic units as flowchart elements: increment, decrement, multiply, divide
+2. Implement conditions
+3. Implement 2 viewer components:
+   - flowchart
+   - underlying data structure (JSON)
+4. Make JSON data structure to update reactively based on flowchart content
+
+# Expectations
+
+1. up and running application OR high fidelity clickable mockups
+2. drag-and-drop flowchart builder with support for basic arithmetics
+3. clean and documented code
+4. tests
+
+# Timeline
+
+We leave exact timing to the candidate. Must fit Within 5 days total.
+
+# Notes
+
+- use a designated github repo for version control and submission
+
+# Examples
+
+We recommend reviewing the following:
+
+- Introduction to Flowcharts: https://www.geeksforgeeks.org/an-introduction-to-flowcharts/
+- An example convergence workflow: https://docs.mat3ra.com/models/auxiliary-concepts/reciprocal-space/convergence/
+- ReactFlow library examples: https://reactflow.dev/docs/examples/overview/ and https://pro.reactflow.dev/pro-examples
+
+To discuss this task more in details, please [contact us](README.md).

sabago/flowchart-designer/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/env", ["@babel/preset-react", { "runtime": "automatic" }], "@babel/preset-typescript"]
+}

sabago/flowchart-designer/.eslintrc.json

@@ -0,0 +1,131 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "ignorePatterns": [".cache/**/*", "build/**/*", "dist/**/*", "node_modules/**/*", "public/**/*"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "import", "prettier", "react", "react-hooks"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": ["prettier"],
+  "rules": {
+    "import/order": "off",
+    "prettier/prettier": "error",
+    "complexity": "off",
+    "constructor-super": "error",
+    "curly": "error",
+    "dot-notation": "error",
+    "quotes": "off",
+    "eqeqeq": ["error", "smart"],
+    "guard-for-in": "error",
+    "id-match": "error",
+    "no-async-promise-executor": "error",
+    "no-bitwise": "error",
+    "no-caller": "error",
+    "no-cond-assign": "error",
+    "no-console": "warn",
+    "no-debugger": "warn",
+    "no-empty": "error",
+    "no-eval": "error",
+    "no-fallthrough": "off",
+    "no-invalid-this": "error",
+    "no-new-wrappers": "error",
+    "no-return-await": "error",
+    "no-shadow": "error",
+    "no-throw-literal": "error",
+    "no-undef-init": "error",
+    "no-unneeded-ternary": [
+      "error",
+      {
+        "defaultAssignment": false
+      }
+    ],
+    "no-unsafe-finally": "error",
+    "no-unused-expressions": "warn",
+    "no-unused-labels": "error",
+    "no-unused-vars": "warn",
+    "no-var": "error",
+    "object-shorthand": "error",
+    "one-var": ["error", "never"],
+    "prefer-const": "error",
+    "radix": "error",
+    "require-await": "error",
+    "spaced-comment": "error",
+    "use-isnan": "error",
+    "valid-typeof": "off",
+    "react-hooks/exhaustive-deps": "error"
+  },
+  "overrides": [
+    {
+      "files": ["*.jsx", "*.tsx"],
+      "rules": {
+        "react/jsx-boolean-value": "error",
+        "react/jsx-key": "error",
+        "react/jsx-no-constructed-context-values": "error",
+        "react/jsx-uses-react": "error",
+        "react/jsx-uses-vars": "error",
+        "react/self-closing-comp": "error",
+        "react-hooks/rules-of-hooks": "error"
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "@typescript-eslint/adjacent-overload-signatures": "error",
+        "@typescript-eslint/array-type": "error",
+        "@typescript-eslint/ban-types": "error",
+        "@typescript-eslint/consistent-type-assertions": "error",
+        "@typescript-eslint/consistent-type-definitions": "error",
+        "@typescript-eslint/member-ordering": "error",
+        "@typescript-eslint/naming-convention": [
+          "error",
+          {
+            "selector": "class",
+            "format": ["PascalCase"]
+          }
+        ],
+        "@typescript-eslint/no-empty-interface": "error",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-invalid-this": "error",
+        "@typescript-eslint/no-misused-new": "error",
+        "@typescript-eslint/no-namespace": "error",
+        "@typescript-eslint/no-parameter-properties": "off",
+        "@typescript-eslint/no-shadow": "error",
+        "@typescript-eslint/no-unused-expressions": [
+          "warn",
+          {
+            "enforceForJSX": true
+          }
+        ],
+        "@typescript-eslint/no-unused-vars": [
+          "warn",
+          {
+            "vars": "all",
+            "args": "all",
+            "ignoreRestSiblings": true,
+            "argsIgnorePattern": "^_"
+          }
+        ],
+        "@typescript-eslint/no-use-before-declare": "off",
+        "@typescript-eslint/no-var-requires": "error",
+        "@typescript-eslint/prefer-for-of": "error",
+        "@typescript-eslint/prefer-function-type": "error",
+        "@typescript-eslint/prefer-namespace-keyword": "error",
+        "@typescript-eslint/prefer-optional-chain": "error",
+        "@typescript-eslint/triple-slash-reference": "error",
+        "@typescript-eslint/unified-signatures": "error",
+        "no-invalid-this": "off",
+        "no-shadow": "off",
+        "no-unused-expressions": "off",
+        "no-unused-vars": "off"
+      }
+    }
+  ]
+}

sabago/flowchart-designer/.gitignore

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

sabago/flowchart-designer/.meteor/.finished-upgraders

@@ -0,0 +1,19 @@
+# This file contains information which helps Meteor properly upgrade your
+# app when you run 'meteor update'. You should check it into version control
+# with your project.
+
+notices-for-0.9.0
+notices-for-0.9.1
+0.9.4-platform-file
+notices-for-facebook-graph-api-2
+1.2.0-standard-minifiers-package
+1.2.0-meteor-platform-split
+1.2.0-cordova-changes
+1.2.0-breaking-changes
+1.3.0-split-minifiers-package
+1.4.0-remove-old-dev-bundle-link
+1.4.1-add-shell-server-package
+1.4.3-split-account-service-packages
+1.5-add-dynamic-import-package
+1.7-split-underscore-from-meteor-base
+1.8.3-split-jquery-from-blaze

sabago/flowchart-designer/.meteor/.gitignore

@@ -0,0 +1 @@
+local

sabago/flowchart-designer/.meteor/.id

@@ -0,0 +1,7 @@
+# This file contains a token that is unique to your project.
+# Check it into your repository along with the rest of this directory.
+# It can be used for purposes such as:
+#   - ensuring you don't accidentally deploy one app on top of another
+#   - providing package authors with aggregated statistics
+
+w4h7kq8dm0tt.g2wtq9n7jvdl

sabago/flowchart-designer/.meteor/packages

@@ -0,0 +1,23 @@
+# Meteor packages used by this project, one per line.
+# Check this file (and the other files in this directory) into your repository.
+#
+# 'meteor add' and 'meteor remove' will edit this file for you,
+# but you can also edit it by hand.
+
+[email protected]             # Packages every Meteor app needs to have
+[email protected]       # Packages for a great mobile UX
+[email protected]                   # The database Meteor supports right now
+[email protected]            # Reactive variable for tracker
+
+[email protected]   # CSS minifier run for production mode
+[email protected]    # JS minifier run for production mode
+[email protected]                # ECMAScript 5 compatibility for older browsers
+[email protected]              # Enable ECMAScript2015+ syntax in app code
+[email protected]              # Enable TypeScript syntax in .ts and .tsx modules
+[email protected]            # Server-side component of the `meteor shell` command
+[email protected]  # Update client in development without reloading the page
+
+
+[email protected]             # Define static page content in .html files
+react-meteor-data       # React higher-order component for reactively tracking Meteor data
+zodern:types            # Pull in type declarations from other Meteor packages

sabago/flowchart-designer/.meteor/platforms

@@ -0,0 +1,2 @@
+server
+browser

sabago/flowchart-designer/.meteor/release

@@ -0,0 +1 @@
+[email protected]

sabago/flowchart-designer/.meteor/versions

@@ -0,0 +1,77 @@
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+meteortesting:[email protected]
+meteortesting:[email protected]
+meteortesting:[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+zodern:[email protected]

sabago/flowchart-designer/.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "printWidth": 120
+}

sabago/flowchart-designer/README.md

@@ -0,0 +1,17 @@
+This app was built with love using MeteorJS, ReactJS, ReactFlow and Typescript.
+
+# How to run the app
+
+- Navigate to the `flowchart_designer` folder.
+- Run `npm install`.
+- Start the app with `npm run start`
+
+## For product development, the following scripts are available:
+
+- typechecker: `npm run typecheck`
+- linter: `npm run lint --fix`
+- formatter: `npm run format`
+- Mocha/Metoer tests: `npm run test`
+- Jest unit tests: `npm run test:jest`
+
+For more details about the app itself, please see `/flowchart-designer/flowchartdesigner.md`

sabago/flowchart-designer/client/main.css

@@ -0,0 +1,4 @@
+body {
+  padding: 10px;
+  font-family: sans-serif;
+}

sabago/flowchart-designer/client/main.html

@@ -0,0 +1,8 @@
+<head>
+  <title>flowchart-designer</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+</head>
+
+<body>
+  <div id="react-target"></div>
+</body>

sabago/flowchart-designer/client/main.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { Meteor } from 'meteor/meteor';
+import App from '../imports/ui/App';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
+Meteor.startup(() => {
+  const container = document.getElementById('react-target');
+  const root = createRoot(container!);
+  root.render(
+    <DndProvider backend={HTML5Backend}>
+      <App />
+    </DndProvider>,
+  );
+});