Add automatic linting check

This uses prettier and all of the opinionated defaults from prettier.
I'm not always a fan of some of the decisions, but it allows us to not
think about code style.

This enables CircleCI checks on branches and pull requests. It's also
usable locally.

Also drop fomantic-ui dependency to avoid building sui and pin node for CircleCI

Author: agjohnson

.circleci/config.yml

@@ -0,0 +1,43 @@
+version: 2.1
+
+commands:
+  run-lint:
+    description: "Run code linter"
+    steps:
+      - checkout
+      - run: npm ci
+      - run: npm run lint
+  run-build:
+    description: "Ensure built assets are up to date"
+    steps:
+      - checkout
+      - run: npm ci
+      - run: npm run build
+      - run:
+          name: Ensure built assets are up to date
+          command: |
+            if [[ `git status dist/ --porcelain` ]]
+            then
+              echo "ERROR: assets are out of date. Make sure to run 'npm run build' on your branch."
+              git status dist/ --porcelain
+              exit 1
+            fi
+
+jobs:
+  lint:
+    docker:
+      - image: 'cimg/node:14.18'
+    steps:
+      - run-lint: {}
+  build:
+    docker:
+      - image: 'cimg/node:14.18'
+    steps:
+      - run-build: {}
+
+workflows:
+  version: 2
+  tests:
+    jobs:
+      - lint
+      - build

.gitignore

@@ -1,5 +1,2 @@
 node_modules/
 .node-version
-
-semantic/
-semantic.json

.prettierignore

@@ -0,0 +1,8 @@
+dist/
+examples/
+*.rst
+*.eot
+*.woff
+*.woff2
+*.ttf
+*.svg

README.rst

@@ -49,7 +49,7 @@ You should be able to execute the various npm commands below at this point.
 Running the development server
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-You can run the development server with::
+You can run the development server with:
 
 .. code:: console
 
@@ -61,6 +61,25 @@ http://localhost:8080/
 You can view some of the test HTML on the development server as well, for
 example http://localhost:8080/examples/theme/
 
+Running linting and formatting
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Similar to other front end projects, and our Python code, we use automatic
+linting and formatting for styling code to a unified format. For CSS/JS, we use
+``prettier``, which is opinionated but mostly makes good code style choices.
+
+To run linting checks, which will only report errors:
+
+.. code:: console
+
+    $ npm run lint
+
+To automatically format code:
+
+.. code:: console
+
+    $ npm run format
+
 Build production assets
 ~~~~~~~~~~~~~~~~~~~~~~~
 

package-lock.json

@@ -7,8 +7,8 @@
     "clean": "rm -rfv dist/*; exit 0",
     "build": "npm run clean && webpack --mode=production --progress --colors",
     "dev": "webpack-dev-server --mode=development",
-    "lint": "prettier -c src/",
-    "format": "prettier --write src/",
+    "lint": "prettier --check 'src/**' '*.js' '*.json'",
+    "format": "prettier --write 'src/**' '*.js' '*.json'",
     "test": "jest src/js/tests/"
   },
   "repository": {
@@ -25,7 +25,9 @@
     "node": "<15.0.0",
     "npm": "<7.0.0"
   },
-  "dependencies": {},
+  "dependencies": {
+    "prettier": "^2.5.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.16.0",
     "@babel/plugin-transform-modules-commonjs": "^7.16.0",
@@ -34,7 +36,6 @@
     "create-fomantic-icons": "^1.0.4",
     "css-loader": "^3.1.0",
     "file-loader": "^3.0.1",
-    "fomantic-ui": "^2.8.8",
     "fomantic-ui-less": "^2.8.8",
     "imports-loader": "^0.8.0",
     "jest": "^26.4.2",
@@ -45,7 +46,6 @@
     "matchdep": "~1.0.1",
     "mini-css-extract-plugin": "^0.6.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "prettier": "^2.0.5",
     "resolve-url-loader": "^2.2.1",
     "sanitize-html": "^1.23.0",
     "style-loader": "^0.23.1",
@@ -70,5 +70,19 @@
     "globals": {
       "__webpack_public_path__": null
     }
+  },
+  "prettier": {
+    "overrides": [
+      {
+        "files": [
+          "src/**/*.overrides",
+          "src/**/*.variables",
+          "src/sui/theme.config"
+        ],
+        "options": {
+          "parser": "less"
+        }
+      }
+    ]
   }
 }

package.json

@@ -1 +1,24 @@
-import "fomantic-ui";
+import "fomantic-ui-less/definitions/modules/nag";
+import "fomantic-ui-less/definitions/modules/tab";
+import "fomantic-ui-less/definitions/modules/transition";
+import "fomantic-ui-less/definitions/modules/rating";
+import "fomantic-ui-less/definitions/modules/modal";
+import "fomantic-ui-less/definitions/modules/search";
+import "fomantic-ui-less/definitions/modules/sticky";
+import "fomantic-ui-less/definitions/modules/shape";
+import "fomantic-ui-less/definitions/modules/accordion";
+import "fomantic-ui-less/definitions/modules/dropdown";
+import "fomantic-ui-less/definitions/modules/sidebar";
+import "fomantic-ui-less/definitions/modules/dimmer";
+import "fomantic-ui-less/definitions/modules/checkbox";
+import "fomantic-ui-less/definitions/modules/slider";
+import "fomantic-ui-less/definitions/modules/calendar";
+import "fomantic-ui-less/definitions/modules/popup";
+import "fomantic-ui-less/definitions/modules/embed";
+import "fomantic-ui-less/definitions/modules/progress";
+import "fomantic-ui-less/definitions/modules/toast";
+import "fomantic-ui-less/definitions/behaviors/visibility";
+import "fomantic-ui-less/definitions/behaviors/form";
+import "fomantic-ui-less/definitions/behaviors/state";
+import "fomantic-ui-less/definitions/behaviors/api";
+import "fomantic-ui-less/definitions/globals/site";