Linting (geojupyter#15)

* Run linters

* Add lint check

* More linting

* Iterate

* Missing config files

* Update packages

* Separate commands

* Linting again

.eslintignore

@@ -0,0 +1,9 @@
+node_modules
+dist
+coverage
+**/*.d.ts
+**/*.js
+tests
+ui-tests
+**/build/
+examples/

.eslintrc.js

@@ -0,0 +1,39 @@
+module.exports = {
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "tsconfig.eslint.json",
+    sourceType: "module",
+  },
+  plugins: ["@typescript-eslint"],
+  rules: {
+    "@typescript-eslint/naming-convention": [
+      "error",
+      {
+        selector: "interface",
+        format: ["PascalCase"],
+        custom: {
+          regex: "^I[A-Z]",
+          match: true,
+        },
+      },
+    ],
+    "@typescript-eslint/no-unused-vars": ["warn", { args: "none" }],
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/ban-ts-comment": "warn",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/quotes": [
+      "error",
+      "single",
+      { avoidEscape: true, allowTemplateLiterals: false },
+    ],
+    curly: ["error", "all"],
+    eqeqeq: "error",
+    "prefer-arrow-callback": "error",
+  },
+};

.github/workflows/build.yml

@@ -171,6 +171,30 @@ jobs:
             ui-tests/test-results
             ui-tests/playwright-report
 
+  check_linting:
+    name: Lint check
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Conda environment with Micromamba
+        uses: mamba-org/setup-micromamba@v1
+        with:
+          environment-name: gis
+          create-args: >-
+            python=3.9
+            jupyterlab=4
+            yarn=3
+
+      - name: Lint
+        shell: bash -l {0}
+        run: |
+          jlpm install
+          jlpm run eslint:check
+          jlpm run prettier:check
+
   check_links:
     name: Check Links
     runs-on: ubuntu-latest

.prettierignore

@@ -0,0 +1,8 @@
+node_modules
+**/node_modules
+**/lib
+**/*.d.ts
+**/*.js
+yarn.lock
+*.jGIS
+playwright.config.js

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "none",
+  "arrowParens": "avoid",
+  "endOfLine": "auto"
+}

lerna.json

@@ -2,9 +2,5 @@
   "npmClient": "yarn",
   "version": "independent",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "packages": [
-    "packages/*",
-    "python/jupytergis_core",
-    "python/jupytergis_lab"
-  ]
+  "packages": ["packages/*", "python/jupytergis_core", "python/jupytergis_lab"]
 }

package.json

@@ -59,18 +59,13 @@
     "@typescript-eslint/eslint-plugin": "5.55.0",
     "@typescript-eslint/parser": "5.55.0",
     "copy-webpack-plugin": "^10.0.0",
-    "eslint": "8.36.0",
-    "eslint-config-prettier": "8.7.0",
-    "eslint-plugin-prettier": "5.0.1",
+    "eslint": "^8.36.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "lerna": "^7.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.0",
     "rimraf": "^3.0.2",
-    "stylelint": "^15.10.1",
-    "stylelint-config-recommended": "^13.0.0",
-    "stylelint-config-standard": "^34.0.0",
-    "stylelint-csstree-validator": "^3.0.0",
-    "stylelint-prettier": "^4.0.0",
     "typescript": "^5",
     "webpack": "^5.76.3"
   }

packages/base/src/commands.ts

@@ -5,7 +5,13 @@ import { ITranslator } from '@jupyterlab/translation';
 import { redoIcon, undoIcon } from '@jupyterlab/ui-components';
 
 import { JupyterGISWidget } from './widget';
-import { IDict, IJGISFormSchemaRegistry, IJGISLayer, IJGISSource, IJupyterGISModel } from '@jupytergis/schema';
+import {
+  IDict,
+  IJGISFormSchemaRegistry,
+  IJGISLayer,
+  IJGISSource,
+  IJupyterGISModel
+} from '@jupytergis/schema';
 import { FormDialog } from './formdialog';
 
 import RASTER_LAYER_GALLERY from '../rasterlayer_gallery/raster_layer_gallery.json';
@@ -45,7 +51,6 @@ function getRasterLayerGallery(): IRasterLayerGalleryEntry[] {
   return gallery;
 }
 
-
 /**
  * Add the commands to the application's command registry.
  */
@@ -117,7 +122,6 @@ export namespace CommandIDs {
   export const newRasterLayer = 'jupytergis:newRasterLayer';
 }
 
-
 namespace Private {
   export const FORM_SCHEMA = {};
 
@@ -156,7 +160,7 @@ namespace Private {
         default: (model: IJupyterGISModel) => {
           return {
             name: 'RasterSource',
-            url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+            url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
             maxZoom: 24,
             minZoom: 0
           };
@@ -186,7 +190,7 @@ namespace Private {
         context: current.context,
         title: form.title,
         sourceData: form.default(current.context.model),
-        schema: FORM_SCHEMA["RasterSource"],
+        schema: FORM_SCHEMA['RasterSource'],
         syncData: (props: IDict) => {
           const sharedModel = current.context.model.sharedModel;
           if (!sharedModel) {
@@ -198,7 +202,7 @@ namespace Private {
           const sourceId = UUID.uuid4();
 
           const sourceModel: IJGISSource = {
-            type: "RasterSource",
+            type: 'RasterSource',
             name,
             parameters: {
               url: parameters.url,
@@ -208,15 +212,15 @@ namespace Private {
           };
 
           const layerModel: IJGISLayer = {
-            type: "RasterLayer",
+            type: 'RasterLayer',
             parameters: {
               source: sourceId
             },
             visible: true,
-            name: name + " Layer"
+            name: name + ' Layer'
           };
 
-          sharedModel.addSource(sourceId, sourceModel)
+          sharedModel.addSource(sourceId, sourceModel);
           sharedModel.addLayer(UUID.uuid4(), layerModel);
         },
         cancelButton: () => {
@@ -227,5 +231,4 @@ namespace Private {
       await dialog.launch();
     };
   }
-
 }

packages/base/src/mainview/mainview.tsx

@@ -4,7 +4,7 @@ import {
   IJupyterGISClientState,
   IJupyterGISDoc,
   IJupyterGISModel,
-  IRasterSource,
+  IRasterSource
 } from '@jupytergis/schema';
 import { IObservableMap, ObservableMap } from '@jupyterlab/observables';
 import { User } from '@jupyterlab/services';
@@ -32,7 +32,6 @@ interface IStates {
   firstLoad: boolean;
 }
 
-
 export class MainView extends React.Component<IProps, IStates> {
   constructor(props: IProps) {
     super(props);
@@ -51,10 +50,7 @@ export class MainView extends React.Component<IProps, IStates> {
       this
     );
 
-    this._model.sharedLayersChanged.connect(
-      this._onLayersChanged,
-      this
-    );
+    this._model.sharedLayersChanged.connect(this._onLayersChanged, this);
 
     this.state = {
       id: this._mainViewModel.id,
@@ -139,8 +135,8 @@ export class MainView extends React.Component<IProps, IStates> {
         continue;
       }
 
-      switch(layer.type) {
-        case 'RasterLayer':
+      switch (layer.type) {
+        case 'RasterLayer': {
           const sourceId = layer.parameters?.source;
           const source = this.getSource<IRasterSource>(sourceId);
 
@@ -156,7 +152,7 @@ export class MainView extends React.Component<IProps, IStates> {
             this._Map.addSource(sourceId, {
               type: 'raster',
               tiles: [source.url],
-              tileSize: 256,
+              tileSize: 256
             });
           } else {
             // TODO If the source already existed, update it
@@ -167,8 +163,9 @@ export class MainView extends React.Component<IProps, IStates> {
             type: 'raster',
             source: sourceId,
             minzoom: source.minZoom || 0,
-            maxzoom: source.maxZoom || 24,
+            maxzoom: source.maxZoom || 24
           });
+        }
       }
     }
   }

packages/base/src/mainview/mainviewmodel.ts

@@ -1,13 +1,12 @@
 import {
   IJGISLayerDocChange,
   IJupyterGISDoc,
-  IJupyterGISModel,
+  IJupyterGISModel
 } from '@jupytergis/schema';
 import { ObservableMap } from '@jupyterlab/observables';
 import { JSONValue } from '@lumino/coreutils';
 import { IDisposable } from '@lumino/disposable';
 
-
 export class MainViewModel implements IDisposable {
   constructor(options: MainViewModel.IOptions) {
     this._jGISModel = options.jGISModel;

packages/base/src/panelview/leftpanel.tsx

@@ -1,13 +1,9 @@
-import {
-  JupyterGISDoc,
-  IJupyterGISTracker
-} from '@jupytergis/schema';
+import { JupyterGISDoc, IJupyterGISTracker } from '@jupytergis/schema';
 import { SidePanel } from '@jupyterlab/ui-components';
 
 import { IControlPanelModel } from '../types';
 import { ControlPanelHeader } from './header';
 
-
 export class LeftPanelWidget extends SidePanel {
   constructor(options: LeftPanelWidget.IOptions) {
     super();
@@ -16,7 +12,7 @@ export class LeftPanelWidget extends SidePanel {
     const header = new ControlPanelHeader();
     this.header.addWidget(header);
 
-    console.log(this._model)
+    console.log(this._model);
     // const datasources = new DataSourceList({ controlPanelModel: this._model });
     // this.addWidget(datasources);
 

packages/base/src/panelview/objectproperties.tsx

@@ -13,10 +13,7 @@ import { Panel } from '@lumino/widgets';
 import * as React from 'react';
 import { v4 as uuid } from 'uuid';
 
-import {
-  focusInputField,
-  removeStyleFromProperty
-} from '../tools';
+import { focusInputField, removeStyleFromProperty } from '../tools';
 import { IControlPanelModel } from '../types';
 import { ObjectPropertiesForm } from './formbuilder';
 import { JupyterGISWidget } from '../widget';
@@ -139,7 +136,10 @@ class ObjectPropertiesReact extends React.Component<IProps, IStates> {
   ): void => {
     this.setState(old => {
       if (old.selectedObject) {
-        const selectedObject = this.props.cpModel.jGISModel?.sharedModel.getObject(old.selectedObject);
+        const selectedObject =
+          this.props.cpModel.jGISModel?.sharedModel.getObject(
+            old.selectedObject
+          );
         if (selectedObject) {
           const selectedObjectData = selectedObject.parameters;
           return {

packages/base/src/panelview/rightpanel.tsx

@@ -9,7 +9,6 @@ import { IControlPanelModel } from '../types';
 import { ControlPanelHeader } from './header';
 import { ObjectProperties } from './objectproperties';
 
-
 export class RightPanelWidget extends SidePanel {
   constructor(options: RightPanelWidget.IOptions) {
     super();

packages/base/src/svg.d.ts

@@ -1,4 +1,4 @@
-declare module '*.svg' {
+declare module "*.svg" {
   const value: string; // @ts-ignore
   export default value;
 }

packages/base/src/tools.ts

@@ -2,7 +2,6 @@ import { URLExt } from '@jupyterlab/coreutils';
 import { ServerConnection } from '@jupyterlab/services';
 import * as d3Color from 'd3-color';
 
-
 export const debounce = (
   func: CallableFunction,
   timeout = 100

packages/base/src/widget.tsx

@@ -9,7 +9,6 @@ import * as React from 'react';
 import { MainView } from './mainview';
 import { MainViewModel } from './mainview/mainviewmodel';
 
-
 export class JupyterGISWidget
   extends DocumentWidget<JupyterGISPanel, IJupyterGISModel>
   implements IJupyterGISWidget
@@ -39,9 +38,7 @@ export class JupyterGISPanel extends ReactWidget {
    *
    * @param context - The documents context.
    */
-  constructor(options: {
-    model: IJupyterGISModel;
-  }) {
+  constructor(options: { model: IJupyterGISModel }) {
     super();
     this.addClass('jp-jupytergis-panel');
     this._view = new ObservableMap<JSONValue>();