ConduitIO · jayjayjpg · Apr 27, 2023 · Apr 26, 2023 · Apr 26, 2023 · Apr 26, 2023
diff --git a/.changeset/eight-pens-approve.md b/.changeset/eight-pens-approve.md
@@ -0,0 +1,5 @@
+---
+"mx-ui-components": minor
+---
+
+deps(ember): upgrade app to ember@4.12 + export of ember-modifier as direct dependency
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,13 +2,19 @@
 
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   parserOptions: {
-    ecmaVersion: 2018,
+    ecmaVersion: 'latest',
     sourceType: 'module',
     ecmaFeatures: {
       legacyDecorators: true
     }
+    requireConfigFile: false,
+    babelOptions: {
+      plugins: [
+        ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
+      ],
+    },
   },
   plugins: ['ember'],
   extends: ['eslint:recommended', 'plugin:ember/recommended', 'plugin:prettier/recommended', 'plugin:storybook/recommended'],
@@ -17,12 +23,29 @@ module.exports = {
   },
   rules: {},
   overrides: [
-  // node files
-  {
-    files: ['./.eslintrc.js', './.prettierrc.js', './.template-lintrc.js', './ember-cli-build.js', './index.js', './testem.js', './blueprints/*/index.js', './config/**/*.js', './tests/dummy/config/**/*.js'],
-    excludedFiles: ['addon/**', 'addon-test-support/**', 'app/**', 'tests/dummy/app/**'],
-    parserOptions: {
-      sourceType: 'script'
+    // node files
+    {
+      files: [
+        './.eslintrc.js',
+        './.prettierrc.js',
+        './.stylelintrc.js',
+        './.template-lintrc.js',
+        './ember-cli-build.js',
+        './index.js',
+        './testem.js',
+        './blueprints/*/index.js',
+        './config/**/*.js',
+        './tests/dummy/config/**/*.js',
+      ],
+      excludedFiles: ['addon/**', 'addon-test-support/**', 'app/**', 'tests/dummy/app/**'],
+      parserOptions: {
+        sourceType: 'script',
+      },
+      env: {
+        browser: false,
+        node: true,
+      },
+      extends: ['plugin:n/recommended'],
     },
     env: {
       browser: false,
@@ -35,4 +58,4 @@ module.exports = {
     files: ['tests/**/*-test.{js,ts}'],
     extends: ['plugin:qunit/recommended']
   }]
-};
+};
diff --git a/.npmignore b/.npmignore
@@ -18,6 +18,8 @@
 /.gitignore
 /.prettierignore
 /.prettierrc.js
+/.stylelintignore
+/.stylelintrc.js
 /.template-lintrc.js
 /.travis.yml
 /.watchmanconfig

diff --git a/.prettierrc.js b/.prettierrc.js
@@ -3,6 +3,12 @@
 module.exports = {
   singleQuote: true,
   overrides: [
+    {
+      files: '*.{js,ts}',
+      options: {
+        singleQuote: true,
+      },
+    },
     {
       files: '*.hbs',
       options: {

diff --git a/.stylelintignore b/.stylelintignore
@@ -0,0 +1,8 @@
+# unconventional files
+/blueprints/*/files/
+
+# compiled output
+/dist/
+
+# addons
+/.node_modules.ember-try/
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
+};
diff --git a/README.md b/README.md
@@ -4,9 +4,10 @@ Meroxa UI component library.
 
 ## Compatibility
 
-- Ember.js v4.0 or above
-- Ember CLI v4.0 or above
-- Node.js v16 or above
+* Ember.js v4.4 or above
+* Ember CLI v4.4 or above
+* Node.js v16 or above
+
 
 ## Installation
 

diff --git a/package.json b/package.json
@@ -18,6 +18,8 @@
   "scripts": {
     "build": "ember build --environment=production",
     "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
+    "lint:css": "stylelint \"**/*.css\"",
+    "lint:css:fix": "concurrently \"npm:lint:css -- --fix\"",
     "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
     "lint:hbs": "ember-template-lint .",
     "lint:hbs:fix": "ember-template-lint . --fix",
@@ -35,22 +37,26 @@
     "build-storybook": "yarn run build:prod --"
   },
   "dependencies": {
-    "ember-auto-import": "^2.5.0",
+    "ember-auto-import": "^2.6.3",
     "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.1.1",
+    "ember-cli-htmlbars": "^6.2.0",
     "ember-keyboard": "8.2.0",
+    "ember-modifier": "^4.1.0",
     "ember-named-blocks-polyfill": "^0.2.5",
     "ember-root-url": "^1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.21.4",
+    "@babel/eslint-parser": "^7.21.3",
+    "@babel/plugin-proposal-decorators": "^7.21.0",
     "@babel/preset-env": "^7.20.2",
     "@changesets/changelog-github": "^0.4.6",
     "@changesets/cli": "^2.24.4",
     "@ember/optional-features": "^2.0.0",
     "@ember/render-modifiers": "^2.0.3",
-    "@ember/test-helpers": "^2.8.1",
-    "@embroider/test-setup": "^2.0.2",
+    "@ember/string": "^3.0.1",
+    "@ember/test-helpers": "^2.9.3",
+    "@embroider/test-setup": "^2.1.1",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
     "@meroxa/ui-base": "https://github.com/meroxa/ui-base.git#v2.0.0",
@@ -66,16 +72,15 @@
     "@storybook/manager-webpack5": "^6.5.15",
     "@tailwindcss/forms": "^0.4.0",
     "autoprefixer": "^10.4.2",
-    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-ember-modules-api-polyfill": "^2.12.0",
     "babel-plugin-htmlbars-inline-precompile": "3",
     "broccoli-asset-rev": "^3.0.0",
     "chromatic": "^6.17.3",
-    "concurrently": "^7.6.0",
+    "concurrently": "^8.0.1",
     "core-js": "^3.9.1",
     "ember-a11y-testing": "^4.0.6",
-    "ember-cli": "~4.9.2",
+    "ember-cli": "~4.12.1",
     "ember-cli-code-coverage": "^1.0.2",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-deprecation-workflow": "^2.1.0",
@@ -85,42 +90,48 @@
     "ember-cli-terser": "^4.0.2",
     "ember-concurrency": "^2.0.3",
     "ember-load-initializers": "^2.1.2",
-    "ember-modifier": "^3.1.0",
     "ember-page-title": "^7.0.0",
-    "ember-qunit": "^6.0.0",
-    "ember-resolver": "^8.0.3",
-    "ember-source": "~4.9.1",
+    "ember-qunit": "^6.2.0",
+    "ember-resolver": "^10.0.0",
+    "ember-source": "~4.12.0",
     "ember-source-channel-url": "^3.0.0",
-    "ember-template-lint": "^5.2.0",
+    "ember-template-lint": "^5.7.2",
     "ember-tooltips": "^3.5.1",
     "ember-truth-helpers": "^3.0.0",
     "ember-try": "^2.0.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-ember": "^11.2.1",
-    "eslint-plugin-node": "^11.1.0",
+    "eslint": "^8.37.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-ember": "^11.5.0",
+    "eslint-plugin-n": "^15.7.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-qunit": "^7.3.4",
     "eslint-plugin-storybook": "^0.6.8",
     "loader.js": "^4.7.0",
     "postcss-import": "^14.0.2",
-    "prettier": "^2.8.1",
-    "qunit": "^2.19.3",
+    "prettier": "^2.8.7",
+    "qunit": "^2.19.4",
     "qunit-dom": "^2.0.0",
     "sinon": "^9.2.4",
+    "stylelint": "^15.4.0",
+    "stylelint-config-standard": "^32.0.0",
+    "stylelint-prettier": "^3.0.0",
     "tailwindcss": "^3.0.22",
-    "webpack": "^5.76.0"
+    "webpack": "^5.78.0"
   },
   "peerDependencies": {
-    "ember-source": "^3.28.0 || ^4.0.0"
+    "ember-source": "^4.0.0"
   },
   "engines": {
     "node": "14.* || 16.* || >= 18"
   },
   "resolutions": {
     "minimist": "^1.2.6",
     "hawk": "^8.0.1",
-    "ansi-html": "^0.0.8"
+    "ansi-html": "^0.0.8",
+    "@embroider/macros": "^1.10.0",
+    "@embroider/util": "^1.10.0",
+    "ember-cli-babel": "^7.26.11",
+    "ember-modifier": "^4.1.0"
   },
   "ember": {
     "edition": "octane"

diff --git a/tests/dummy/app/styles/app.css b/tests/dummy/app/styles/app.css
@@ -1,3 +1,5 @@
+/* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
+
 @import 'tailwindcss/base';
 
 @import 'tailwindcss/components';

diff --git a/tests/dummy/config/ember-cli-update.json b/tests/dummy/config/ember-cli-update.json
@@ -3,7 +3,7 @@
   "packages": [
     {
       "name": "ember-cli",
-      "version": "4.9.2",
+      "version": "4.12.1",
       "blueprints": [
         {
           "name": "addon",

diff --git a/tests/dummy/config/ember-try.js b/tests/dummy/config/ember-try.js
@@ -8,18 +8,18 @@ module.exports = async function () {
     useYarn: true,
     scenarios: [
       {
-        name: 'ember-lts-3.28',
+        name: 'ember-lts-4.4',
         npm: {
           devDependencies: {
-            'ember-source': '~3.28.0',
+            'ember-source': '~4.4.0',
           },
         },
       },
       {
-        name: 'ember-lts-4.4',
+        name: 'ember-lts-4.8',
         npm: {
           devDependencies: {
-            'ember-source': '~4.4.0',
+            'ember-source': '~4.8.0',
           },
         },
       },
@@ -47,24 +47,6 @@ module.exports = async function () {
           },
         },
       },
-      {
-        name: 'ember-classic',
-        env: {
-          EMBER_OPTIONAL_FEATURES: JSON.stringify({
-            'application-template-wrapper': true,
-            'default-async-observers': false,
-            'template-only-glimmer-components': false,
-          }),
-        },
-        npm: {
-          devDependencies: {
-            'ember-source': '~3.28.0',
-          },
-          ember: {
-            edition: 'classic',
-          },
-        },
-      },
       embroiderSafe(),
       embroiderOptimized(),
     ],