refactor: various improvements (#1296)

* refactor: various improvements

- enable no-use-before-define eslint rule
- shuffle code to conform to no-use-before-define eslint rule
- remove btoa dependency which is deprecated and replace with Buffer.from(string).toString('base64')
- convert some any types into useful ones
- add type annotations where possible
- remove unused @types/expect.js
- install @types/semver and ts-node which were missing
- repair and rewrite add-crowdin-contributors script
- remove export keyword from variables which are never consumed in another file
- remove unity indicator hack where linked issue was closed
- remove module declaration for kebab-case which is unused
- add missing state interface for certain components
- remove default exports for files which already have a named export
- export IRecipePreview so it can be used throughout codebase
- remove unused removeCacheForCallWith method from CachedRequest.ts
- cleanup unused colors and styles inside legacy theme

* - improve ColorPickerInput
- fix invalid DOM nesting with div inside p in EditSettingsForm
- fix progressbarAccentColor color picker not updating input when using slider
- install missing @types/react-color dependency

.eslintrc.js

@@ -47,6 +47,9 @@ module.exports = {
       parser: '@typescript-eslint/parser',
       plugins: [],
       rules: {
+        // eslint
+        'no-use-before-define': 2,
+
         // @typescript-eslint
         // This is necessary as workaround for window.ferdium vs window['ferdium']
         '@typescript-eslint/dot-notation': 0,

package.json

@@ -69,7 +69,6 @@
     "@sentry/electron": "4.1.2",
     "@superwf/mobx-react-router": "7.4.0",
     "auto-launch": "5.0.6",
-    "btoa": "1.2.1",
     "classnames": "2.3.2",
     "color": "4.2.3",
     "csstype": "3.1.2",
@@ -137,18 +136,19 @@
     "@formatjs/cli": "6.1.3",
     "@jest/types": "29.6.1",
     "@types/color": "3.0.3",
-    "@types/expect.js": "0.3.29",
     "@types/fs-extra": "11.0.1",
     "@types/jest": "29.5.3",
     "@types/lodash": "4.14.195",
     "@types/ms": "0.7.31",
     "@types/node": "18.15.3",
     "@types/prop-types": "15.7.5",
     "@types/react": "18.2.12",
+    "@types/react-color": "3.0.6",
     "@types/react-dom": "18.2.5",
     "@types/react-loader": "2.4.5",
     "@types/react-transition-group": "4.4.6",
     "@types/route-parser": "0.1.4",
+    "@types/semver": "7.5.0",
     "@types/tar": "6.1.5",
     "@types/uuid": "9.0.2",
     "@types/validator": "13.7.17",
@@ -184,6 +184,7 @@
     "rimraf": "5.0.1",
     "simple-git": "3.19.1",
     "tiny-glob": "0.2.9",
+    "ts-node": "10.9.1",
     "typescript": "5.0.4",
     "wait-on": "7.0.1"
   },

scripts/add-crowdin-contributors.ts

@@ -53,7 +53,7 @@ console.log(JSON.stringify(members));
  * 5. Regenerate the README table using the CLI ('all-contributors generate')
  * Please check if the generated data is ok and no data is lost.
 */
-const list: any[] = [
+const list: { name: string; login: string; avatar_url: string }[] = [
   {
     name: 'vantezzen_',
     login: 'vantezzen_',
@@ -1064,21 +1064,27 @@ const list: any[] = [
   },
 ];
 
-const infoPath = path.join(__dirname, '..', '.all-contributorsrc');
-const info = fs.readJSONSync(infoPath);
-for (const user of list) {
-  if (user.login) {
-    info.contributors = allContributors.addContributorWithDetails({
-      ...user,
-      contributions: ['translation'],
-      profile: `https://crowdin.com/profile/${user.login}`,
-      options: {
-        contributors: info.contributors,
-      },
-    });
-  }
-}
+const allContributorsFile = path.join(__dirname, '..', '.all-contributorsrc');
+const allContributorsJSON = fs.readJSONSync(allContributorsFile);
 
-fs.writeJSONSync(infoPath, info, {
-  spaces: 2,
-});
+// eslint-disable-next-line unicorn/prefer-top-level-await
+(async () => {
+  allContributorsJSON.contributors = await Promise.all(
+    list
+      .filter(user => user.login)
+      .map(user => {
+        return allContributors.addContributorWithDetails({
+          ...user,
+          contributions: ['translation'],
+          profile: `https://crowdin.com/profile/${user.login}`,
+          options: {
+            contributors: allContributorsJSON.contributors,
+          },
+        });
+      }),
+  );
+
+  fs.writeJSONSync(allContributorsFile, allContributorsJSON, {
+    spaces: 2,
+  });
+})();

src/@types/mobx-form.types.ts

@@ -1,17 +1,17 @@
-import { File } from 'electron-dl';
 import { ChangeEventHandler, FocusEventHandler } from 'react';
 import { GlobalError } from './ferdium-components.types';
 
-export interface FormFieldOptions {
-  value?: string;
-  label?: string;
+interface SelectOptions {
   disabled?: boolean;
+  label?: string;
+  value?: string;
 }
 
-export interface FormFields {
-  fields: {
-    [key: string]: Field;
-  };
+interface Listeners {
+  onChange?: ChangeEventHandler<HTMLInputElement | HTMLSelectElement>;
+  onBlur?: FocusEventHandler<HTMLElement>;
+  onFocus?: FocusEventHandler<HTMLElement>;
+  onDrop?: (file: File) => void;
 }
 
 export interface Field extends Listeners {
@@ -29,16 +29,8 @@ export interface Field extends Listeners {
   set?: (value: any) => void;
   [key: string]: any;
 }
-
-export interface SelectOptions {
-  disabled?: boolean;
-  label?: string;
-  value?: string;
-}
-
-export interface Listeners {
-  onChange?: ChangeEventHandler<HTMLInputElement | HTMLSelectElement>;
-  onBlur?: FocusEventHandler<HTMLElement>;
-  onFocus?: FocusEventHandler<HTMLElement>;
-  onDrop?: (file: File) => void;
+export interface FormFields {
+  fields: {
+    [key: string]: Field;
+  };
 }

src/@types/stores.types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-use-before-define */
 import Workspace from '../features/workspaces/models/Workspace';
 import Recipe from '../models/Recipe';
 import Service from '../models/Service';
@@ -201,7 +202,7 @@ interface RouterStore {
   replace: () => void;
 }
 
-export interface ServicesStore extends TypedStore {
+interface ServicesStore extends TypedStore {
   clearCacheRequest: () => void;
   createServiceRequest: CachedRequest;
   deleteServiceRequest: () => void;
@@ -227,7 +228,7 @@ interface ISettings {
   [key: string]: any;
 }
 
-export interface SettingsStore extends TypedStore {
+interface SettingsStore extends TypedStore {
   update: (value: any) => void;
   remove: (value: any) => void;
   fileSystemSettingsTypes: any[];
@@ -288,7 +289,7 @@ interface UIStore extends TypedStore {
   theme: () => void;
 }
 
-export interface UserStore extends TypedStore {
+interface UserStore extends TypedStore {
   BASE_ROUTE: '/auth';
   CHANGE_SERVER_ROUTE: '/auth/server';
   IMPORT_ROUTE: '/auth/signup/import';
@@ -338,7 +339,7 @@ export interface UserStore extends TypedStore {
   team: () => void;
 }
 
-export interface WorkspacesStore extends TypedStore {
+interface WorkspacesStore extends TypedStore {
   activeWorkspace: () => void;
   delete: ({ workspace }) => void;
   update: ({ workspace }) => void;

src/actions/index.ts

@@ -10,7 +10,7 @@ import user from './user';
 import settings from './settings';
 import requests from './requests';
 import workspaces from '../features/workspaces/actions';
-import todos from '../features/todos/actions';
+import { todoActions } from '../features/todos/actions';
 
 const actions = {
   service,
@@ -26,5 +26,5 @@ const actions = {
 export default Object.assign(
   defineActions(actions, PropTypes.checkPropTypes),
   { workspaces },
-  { todos },
+  { todos: todoActions },
 );