Added Prettier and linter

.eslintignore

@@ -0,0 +1,7 @@
+dist
+node_modules
+.eslintrc.js
+jest.config.js
+jest.config.base.js
+scripts/
+examples/

.eslintrc.js

@@ -0,0 +1,32 @@
+const OFF = 0;
+const WARNING = 1;
+const ERROR = 2;
+
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    commonjs: true,
+    jest: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    allowImportExportEverywhere: true,
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: ['@typescript-eslint', 'prettier'],
+  rules: {
+    'func-names': OFF,
+    '@typescript-eslint/no-explicit-any': OFF,
+    '@typescript-eslint/explicit-module-boundary-types': OFF,
+    '@typescript-eslint/ban-types': WARNING,
+    '@typescript-eslint/ban-ts-comment': WARNING,
+  },
+};

.github/workflows/test-all-packages.yaml

@@ -28,6 +28,10 @@ jobs:
       - name: 🤔 Test
         run: yarn test
 
+        # Run Linter
+      - name: 🤖 Lint
+        run: yarn run lint
+
         # Build Packages for Testing
       - name: 🔨 Build Packages
         run: yarn run build

.gitignore

@@ -1,6 +1,7 @@
 node_modules/
 dist
 .yalc
+package-lock.json
 
 # Differs on each engine
 yalc.lock
@@ -13,6 +14,7 @@ yalc.lock
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.eslintcache
 
 # Editor directories and files
 .idea

.prettierignore

@@ -0,0 +1,2 @@
+dist
+node_modules

.prettierrc

@@ -0,0 +1,13 @@
+{
+  "_comment": "To apply prettier config to Webstorm https://intellij-support.jetbrains.com/hc/en-us/community/posts/360002745119-How-to-have-Reformat-Code-feature-behave-exactly-like-Prettier-",
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "proseWrap": "never",
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "endOfLine": "lf",
+  "semi": true
+}

examples/AwesomeTSProject/App.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import {SafeAreaView, Text, StatusBar, Button} from 'react-native';
-import {useAgile} from '@agile-ts/react';
-import {MY_EVENT, MY_STATE} from './core';
+import { SafeAreaView, Text, StatusBar, Button } from 'react-native';
+import { useAgile } from '@agile-ts/react';
+import { MY_EVENT, MY_STATE } from './core';
 
 const App = () => {
   const myState = useAgile(MY_STATE);
@@ -10,7 +10,7 @@ const App = () => {
     <>
       <StatusBar barStyle="dark-content" />
       <SafeAreaView>
-        <Text style={{fontWeight: 'bold'}}>{myState}</Text>
+        <Text style={{ fontWeight: 'bold' }}>{myState}</Text>
         <Button
           title={'Change State'}
           onPress={() => {
@@ -20,7 +20,7 @@ const App = () => {
         <Button
           title={'Trigger Event'}
           onPress={() => {
-            MY_EVENT.trigger({name: 'Jeff'});
+            MY_EVENT.trigger({ name: 'Jeff' });
           }}
         />
       </SafeAreaView>

examples/AwesomeTSProject/core/index.ts

@@ -1,5 +1,5 @@
-import {Agile, Collection} from '@agile-ts/core';
-import {Alert} from 'react-native';
+import { Agile } from '@agile-ts/core';
+import { Alert } from 'react-native';
 
 export const App = new Agile({
   logJobs: true,
@@ -31,16 +31,16 @@ export const MY_COLLECTION = App.Collection<collectionValueInterface>(
     selectors: {
       mySelector: collection.Selector('id3'),
     },
-  }),
+  })
 ).persist();
-MY_COLLECTION.collect({id: 'id1', name: 'test'});
-MY_COLLECTION.collect({id: 'id2', name: 'test2'}, 'myGroup');
-MY_COLLECTION.update('id1', {id: 'id1Updated', name: 'testUpdated'});
-MY_COLLECTION.getGroup('myGroup')?.persist({followCollectionPattern: true});
+MY_COLLECTION.collect({ id: 'id1', name: 'test' });
+MY_COLLECTION.collect({ id: 'id2', name: 'test2' }, 'myGroup');
+MY_COLLECTION.update('id1', { id: 'id1Updated', name: 'testUpdated' });
+MY_COLLECTION.getGroup('myGroup')?.persist({ followCollectionPattern: true });
 
 console.log('Initial: myCollection ', MY_COLLECTION);
 
-export const MY_EVENT = App.Event<{name: string}>();
+export const MY_EVENT = App.Event<{ name: string }>();
 
 MY_EVENT.on('Test', (payload) => {
   Alert.alert(
@@ -52,8 +52,8 @@ MY_EVENT.on('Test', (payload) => {
         onPress: () => console.log('Cancel Pressed'),
         style: 'cancel',
       },
-      {text: 'OK', onPress: () => console.log('OK Pressed')},
+      { text: 'OK', onPress: () => console.log('OK Pressed') },
     ],
-    {cancelable: false},
+    { cancelable: false }
   );
 });

examples/AwesomeTSProject/index.js

@@ -2,8 +2,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import App from './App';
-import {name as appName} from './app.json';
+import { name as appName } from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

examples/multieditor-with-react/src/core/agile.ts

@@ -1,4 +1,4 @@
-import { Agile, globalBind } from "@agile-ts/core";
+import { Agile, globalBind } from '@agile-ts/core';
 
 const App = new Agile({
   logConfig: {
@@ -9,4 +9,4 @@ const App = new Agile({
 export default App;
 
 // Create global Instance of SignUpEditor (for better debugging)
-globalBind("__signUpEditor__", require("./signUpEditor"));
+globalBind('__signUpEditor__', require('./signUpEditor'));

examples/multieditor-with-react/src/core/signUpEditor.ts

@@ -1,24 +1,24 @@
-import MultiEditor, { Validator } from "@agile-ts/multieditor";
-import App from "./agile";
-import { generateColor, generateId, isLight } from "./utils";
+import MultiEditor, { Validator } from '@agile-ts/multieditor';
+import App from './agile';
+import { generateColor, generateId, isLight } from './utils';
 
 export const isValidNameValidator = new Validator()
   .required()
   .string()
   .min(2)
   .max(10)
-  .matches(/^([^0-9]*)$/, "No Numbers allowed!");
+  .matches(/^([^0-9]*)$/, 'No Numbers allowed!');
 
 export const signUpEditor = new MultiEditor(
   (editor) => ({
     data: {
-      id: "myCoolId",
-      firstName: "Jeff",
-      lastName: "",
+      id: 'myCoolId',
+      firstName: 'Jeff',
+      lastName: '',
       gender: undefined,
-      userName: "",
-      email: "",
-      aboutYou: "",
+      userName: '',
+      email: '',
+      aboutYou: '',
       age: undefined,
       image: {
         id: generateId(),
@@ -34,12 +34,12 @@ export const signUpEditor = new MultiEditor(
       userName: isValidNameValidator
         .clone()
         .addValidationMethod(async (key, value, editor) => {
-          const isValid = value === "Jeff";
+          const isValid = value === 'Jeff';
           if (!isValid)
             editor.setStatus(
               key,
-              "error",
-              "Sry only the name Jeff is allowed!"
+              'error',
+              'Sry only the name Jeff is allowed!'
             );
           return isValid;
         }),
@@ -50,9 +50,9 @@ export const signUpEditor = new MultiEditor(
         .string()
         .min(10)
         .addValidationMethod(async (key, value, editor) => {
-          const isValid = typeof value === "string" && !value.includes("fuck");
+          const isValid = typeof value === 'string' && !value.includes('fuck');
           if (!isValid)
-            editor.setStatus(key, "error", "The word fuck is not allowed!");
+            editor.setStatus(key, 'error', 'The word fuck is not allowed!');
           return isValid;
         }),
       age: editor.Validator().required().number().min(18).max(100),
@@ -62,20 +62,20 @@ export const signUpEditor = new MultiEditor(
         .required()
         .addValidationMethod(async (key, value, editor) => {
           const isValid = isLight(value.color);
-          if (!isValid) editor.setStatus(key, "error", "The Image is to dark!");
+          if (!isValid) editor.setStatus(key, 'error', 'The Image is to dark!');
           return isValid;
         }),
     },
     computeMethods: {
       lastName: (value) => {
-        return value && typeof value === "string" ? value.toUpperCase() : value;
+        return value && typeof value === 'string' ? value.toUpperCase() : value;
       },
       age: (value) => {
         return Number(value) || value;
       },
     },
-    fixedProperties: ["id"],
-    reValidateMode: "afterFirstSubmit",
+    fixedProperties: ['id'],
+    reValidateMode: 'afterFirstSubmit',
   }),
   App
 );

examples/multieditor-with-react/src/core/utils.ts

@@ -1,5 +1,5 @@
 export const generateColor = (): string => {
-  return "#" + ((Math.random() * 0xffffff) << 0).toString(16).padStart(6, "0");
+  return '#' + ((Math.random() * 0xffffff) << 0).toString(16).padStart(6, '0');
 };
 
 export const generateId = () => {
@@ -12,7 +12,7 @@ export const generateId = () => {
 };
 
 export const isLight = (color: string): boolean => {
-  const hex = color.replace("#", "");
+  const hex = color.replace('#', '');
   const c_r = parseInt(hex.substr(0, 2), 16);
   const c_g = parseInt(hex.substr(2, 2), 16);
   const c_b = parseInt(hex.substr(4, 2), 16);