feat: refactor all component to ember v4

BREAKING CHANGE: This version drops support for Ember < v3.24 and
requires `ember-auto-import` v2. Please check [the migration
guide](/docs/migration-v5) for further instructions.

.eslintignore

@@ -13,9 +13,13 @@
 # misc
 /coverage/
 !.*
+.*/
 .eslintcache
 
 # ember-try
 /.node_modules.ember-try/
 /bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
 /package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try

.eslintrc.js

@@ -2,16 +2,7 @@
 
 module.exports = {
   extends: "@adfinis-sygroup/eslint-config/ember-addon",
-  rules: {
-    "ember/no-jquery": "error",
-    // https://github.com/adfinis-sygroup/ember-uikit/issues/238
-    "ember/no-new-mixins": "warn",
-    "ember/no-mixins": "warn",
-    // TODO: migrate to native classes
-    "ember/no-classic-classes": "warn",
-    "ember/no-actions-hash": "warn",
-    "ember/no-classic-components": "warn",
-    "ember/require-tagless-components": "warn",
-    "ember/no-component-lifecycle-hooks": "warn",
+  settings: {
+    "import/internal-regex": "^ember-uikit/",
   },
 };

.github/dependabot.yml

@@ -9,3 +9,8 @@ updates:
       timezone: "Europe/Zurich"
     open-pull-requests-limit: 10
     versioning-strategy: increase
+    ignore:
+      # https://github.com/ember-cli/ember-cli/issues/9307
+      - dependency-name: eslint
+        versions:
+          - ">= 8"

.github/workflows/test.yml

@@ -101,13 +101,14 @@ jobs:
     strategy:
       matrix:
         scenario:
+          - ember-lts-3.28
           - ember-lts-3.24
-          - ember-lts-3.20
           - ember-release
           - ember-beta
           - ember-canary
-          - ember-default-with-jquery
           - ember-classic
+          - embroider-safe
+          - embroider-optimized
 
     steps:
       - uses: actions/checkout@v2

.gitignore

@@ -27,4 +27,7 @@
 # ember-try
 /.node_modules.ember-try/
 /bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
 /package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try

.npmignore

@@ -14,7 +14,10 @@
 /.eslintignore
 /.eslintrc.js
 /.git/
+/.github/
 /.gitignore
+/.prettierignore
+/.prettierrc.js
 /.template-lintrc.js
 /.travis.yml
 /.watchmanconfig
@@ -24,10 +27,14 @@
 /ember-cli-build.js
 /testem.js
 /tests/
+/yarn-error.log
 /yarn.lock
 .gitkeep
 
 # ember-try
 /.node_modules.ember-try/
 /bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
 /package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try

.prettierignore

@@ -14,8 +14,12 @@
 /coverage/
 !.*
 .eslintcache
+.lint-todo/
 
 # ember-try
 /.node_modules.ember-try/
 /bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
 /package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try

.template-lintrc.js

@@ -1,13 +1,10 @@
 "use strict";
 
 module.exports = {
-  extends: "octane",
+  extends: ["recommended", "ember-template-lint-plugin-prettier:recommended"],
+  plugins: ["ember-template-lint-plugin-prettier"],
   rules: {
-    "no-action": "warn",
-    "no-implicit-this": "warn",
-    "no-curly-component-invocation": "warn",
-    "require-input-label": "warn",
-    "no-obsolete-elements": "warn",
-    "no-yield-only": "warn",
+    "require-input-label": false,
+    "no-obsolete-elements": false,
   },
 };

addon/-private/color.js

@@ -0,0 +1,34 @@
+import createDecorator from "ember-uikit/-private/decorator";
+import { validatedDecorator } from "ember-uikit/-private/validated";
+
+export const COLOR_OPTIONS = {
+  NONE: "",
+  DEFAULT: "default",
+  MUTED: "muted",
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  SUCCESS: "success",
+  WARNING: "warning",
+  DANGER: "danger",
+  LINK: "link",
+  TEXT: "text",
+};
+
+export default createDecorator(function (
+  target,
+  property,
+  descriptor,
+  {
+    template = "uk-$value$-background",
+    options = Object.values(COLOR_OPTIONS),
+    defaultValue = COLOR_OPTIONS.DEFAULT,
+    ...args
+  } = {}
+) {
+  return validatedDecorator(target, property, descriptor, {
+    template,
+    options,
+    defaultValue,
+    ...args,
+  });
+});

addon/-private/decorator.js

@@ -0,0 +1,24 @@
+export function isDescriptor(possibleDesc) {
+  const [target, key, desc] = possibleDesc;
+
+  return (
+    possibleDesc.length === 3 &&
+    typeof target === "object" &&
+    target !== null &&
+    typeof key === "string" &&
+    typeof desc === "object" &&
+    desc !== null &&
+    "enumerable" in desc &&
+    "configurable" in desc
+  );
+}
+
+export default function createDecorator(fn) {
+  return function (...args) {
+    if (isDescriptor(args)) {
+      return fn(...args);
+    }
+
+    return (...desc) => fn(...desc, ...args);
+  };
+}

addon/-private/flex.js

@@ -0,0 +1,104 @@
+import { camelize } from "@ember/string";
+
+import createDecorator from "ember-uikit/-private/decorator";
+import { validatedDecorator } from "ember-uikit/-private/validated";
+
+export const FLEX_HORIZONTAL_OPTIONS = {
+  LEFT: "left",
+  CENTER: "center",
+  RIGHT: "right",
+  BETWEEN: "between",
+  AROUND: "around",
+};
+
+export const FLEX_VERTICAL_OPTIONS = {
+  STRETCH: "stretch",
+  TOP: "top",
+  MIDDLE: "middle",
+  BOTTOM: "bottom",
+};
+
+export const FLEX_DIRECTION_OPTIONS = {
+  ROW: "row",
+  ROW_REVERSE: "row-reverse",
+  COLUMN: "column",
+  COLUMN_REVERSE: "column-reverse",
+};
+
+export const FLEX_WRAP_OPTIONS = {
+  WRAP: "wrap",
+  WRAP_REVERSE: "wrap-reverse",
+  NOWRAP: "nowrap",
+};
+
+export const FLEX_WRAP_ALIGNMENT_OPTIONS = {
+  STRETCH: "stretch",
+  BETWEEN: "between",
+  AROUND: "around",
+  TOP: "top",
+  MIDDLE: "middle",
+  BOTTOM: "bottom",
+};
+
+export default createDecorator(function (
+  target,
+  property,
+  descriptor,
+  { prefix = "flex" } = {}
+) {
+  const propConfig = [
+    {
+      name: camelize(`${prefix}-horizontal`),
+      options: Object.values(FLEX_HORIZONTAL_OPTIONS),
+    },
+    {
+      name: camelize(`${prefix}-vertical`),
+      options: Object.values(FLEX_VERTICAL_OPTIONS),
+    },
+    {
+      name: camelize(`${prefix}-direction`),
+      options: Object.values(FLEX_DIRECTION_OPTIONS),
+    },
+    {
+      name: camelize(`${prefix}-wrap`),
+      options: Object.values(FLEX_WRAP_OPTIONS),
+    },
+    {
+      name: camelize(`${prefix}-wrap-alignment`),
+      options: Object.values(FLEX_WRAP_ALIGNMENT_OPTIONS),
+      template: "uk-flex-wrap-$value$",
+    },
+  ];
+
+  propConfig.forEach(({ name, options, template }) => {
+    Object.defineProperty(
+      target,
+      name,
+      validatedDecorator(
+        target,
+        name,
+        {},
+        {
+          template: template ?? `uk-flex-$value$`,
+          options,
+        }
+      )
+    );
+  });
+
+  return {
+    get() {
+      const flex = this.args[property] ?? descriptor.initializer?.();
+      const inline = this.args[camelize(`${prefix}-inline`)];
+
+      return [
+        ...(flex ? ["uk-flex"] : []),
+        ...(inline ? ["uk-flex-inline"] : []),
+        ...propConfig.map(({ name }) => this[name]),
+      ]
+        .filter(Boolean)
+        .join(" ")
+        .trim();
+    },
+  };
+});

addon/-private/size.js

@@ -0,0 +1,20 @@
+import createDecorator from "ember-uikit/-private/decorator";
+import { validatedDecorator } from "ember-uikit/-private/validated";
+
+export const SIZE_OPTIONS = {
+  DEFAULT: "",
+  SMALL: "small",
+  LARGE: "large",
+};
+
+export default createDecorator(function (
+  target,
+  property,
+  descriptor,
+  { options = Object.values(SIZE_OPTIONS), ...args } = {}
+) {
+  return validatedDecorator(target, property, descriptor, {
+    options,
+    ...args,
+  });
+});