wip

Author: Syndesi

.storybook/preview.ts

@@ -8,6 +8,7 @@ console.log(tmp);
 import * as EmberNexus from '@ember-nexus/web-sdk';
 import './style.css?style';
 import './preview.css?style';
+import {init} from '@ember-nexus/app-core';
 
 const WebSdkConfiguration = EmberNexus.Service.WebSdkConfiguration;
 const container = EmberNexus.Container;
@@ -16,6 +17,9 @@ container.get(WebSdkConfiguration).setToken('secret-token:PIPeJGUt7c00ENn8a5uDlc
 container.get(EmberNexus.BrowserEvent.BrowserEventHandler).addBrowserEventListeners(document.body as HTMLElement);
 console.log(document.body);
 
+const serviceResolver = init(document.body);
+(window as any).serviceResolver = serviceResolver;
+
 const preview: Preview = {
   parameters: {
     controls: {

eslint.config.mjs

@@ -88,5 +88,6 @@ export default [{
                 caseInsensitive: true,
             },
         }],
+        "no-duplicate-imports": "error",
     },
-}];
+}];

package.json

@@ -14,9 +14,8 @@
     "build:esm": "yarn tsc -b tsconfig.esm.json",
     "cs": "eslint ./src",
     "cs:fix": "eslint ./src --fix",
-    "test:unit": "jest ./test/Unit",
-    "test:feature": "jest ./test/Feature",
-    "test:example": "yarn build && jest ./test/Example",
+    "test:unit": "vitest run ./test/Unit",
+    "test:unit:coverage": "vitest run ./test/Unit --coverage",
     "prepare": "ts-patch install",
     "typedoc": "typedoc --tsconfig tsconfig.release.json",
     "storybook": "storybook dev -p 6006 -h 0.0.0.0",
@@ -25,6 +24,7 @@
   "author": "Syndesi <info@ember-nexus.dev>",
   "license": "MIT",
   "dependencies": {
+    "@ember-nexus/app-core": "^0.0.1",
     "@ember-nexus/uix": "^0.0.4",
     "@ember-nexus/web-sdk": "^0.0.59",
     "apca-w3": "^0.1.9",
@@ -48,16 +48,14 @@
     "@storybook/test": "^8.4.7",
     "@storybook/web-components": "^8.4.7",
     "@storybook/web-components-webpack5": "^8.4.7",
-    "@types/chai": "^4.3.4",
-    "@types/chai-as-promised": "^7.1.5",
     "@types/color-hash": "^2.0.0",
-    "@types/jest": "^29.5.12",
     "@types/node": "^20.8.10",
     "@types/sinon": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^7.14",
     "@typescript-eslint/parser": "^7.14",
-    "chai": "^5.1",
-    "chai-as-promised": "^8.0",
+    "@vitest/coverage-v8": "^3.1.4",
+    "@vitest/eslint-plugin": "^1.2.1",
+    "@vitest/ui": "^3.1.4",
     "copyfiles": "^2.4.1",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.0",
@@ -70,7 +68,6 @@
     "globals": "^15.6.0",
     "http-server": "^14.1.1",
     "ignore-loader": "^0.1.2",
-    "jest": "^29.7.0",
     "lost-pixel": "^3.22.0",
     "mini-css-extract-plugin": "^2.9.2",
     "msw": "^2.0.2",
@@ -80,7 +77,6 @@
     "storybook": "^8.4.7",
     "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.3.10",
-    "ts-jest": "^29.1.2",
     "ts-loader": "^9.5.1",
     "ts-mockito": "^2.6.1",
     "ts-node": "^10.9.2",
@@ -91,13 +87,10 @@
     "typedoc-plugin-mdn-links": "^3.1.9",
     "typedoc-theme-hierarchy": "^5.0",
     "typescript": "^5.5",
-    "uri-js-replace": "^1.0.0",
+    "vitest": "^3.1.4",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4"
   },
-  "resolutions": {
-    "uri-js": "npm:uri-js-replace"
-  },
   "eslintConfig": {
     "extends": [
       "plugin:storybook/recommended"

src/Component/Default/EmberNexusDefaultCard.ts

@@ -6,9 +6,13 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { Actor, createActor } from 'xstate';
 
-import { findBestFontWeightColor, getNameFromElementOrId, getTitleFromElementOrId } from '../../Helper';
-import { getColorFromElementOrId } from '../../Helper/ColorHelper';
-import { getIconForElement } from '../../Helper/IconHelper';
+import {
+  findBestFontWeightColor,
+  getColorFromElementOrId,
+  getIconForElement,
+  getNameFromElementOrId,
+  getTitleFromElementOrId,
+} from '../../Helper';
 import { singleElementMachine } from '../../Machine';
 import { tmpStyle } from '../../Style';
 import { colorWarning } from '../../Type';
@@ -138,6 +142,7 @@ class EmberNexusDefaultCard extends LitElement {
       </div>
       <div class="description font-sans">
         <p>${description}</p>
+        <p>blub blab :D</p>
       </div>
     </div>`;
   }

src/Component/Default/EmberNexusDefaultIcon.ts

@@ -4,11 +4,14 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { Actor, createActor } from 'xstate';
 
-import { findBestFontWeightColor, getInitialsFromElementOrId, getTitleFromElementOrId } from '../../Helper';
-import { getColorFromElementOrId } from '../../Helper/ColorHelper';
+import {
+  findBestFontWeightColor,
+  getColorFromElementOrId,
+  getInitialsFromElementOrId,
+  getTitleFromElementOrId,
+} from '../../Helper';
 import { singleElementMachine } from '../../Machine';
-import { fontStyle, shadowStyle } from '../../Style';
-import { iconComponentStyle } from '../../Style';
+import { fontStyle, iconComponentStyle, shadowStyle } from '../../Style';
 import { colorWarning } from '../../Type';
 
 @customElement('ember-nexus-default-icon')

src/Component/Default/EmberNexusDefaultPill.ts

@@ -6,13 +6,13 @@ import { Actor, createActor } from 'xstate';
 
 import {
   findBestFontWeightColor,
+  getColorFromElement,
+  getColorFromElementOrId,
   getNameFromElementOrId,
   getNameOrFirstLettersFromIdFromElementOrId,
 } from '../../Helper';
-import { getColorFromElement, getColorFromElementOrId } from '../../Helper/ColorHelper';
 import { singleElementMachine } from '../../Machine';
-import { fontStyle, shadowStyle } from '../../Style';
-import { pillComponentStyle } from '../../Style';
+import { fontStyle, pillComponentStyle, shadowStyle } from '../../Style';
 import { colorWarning } from '../../Type';
 
 @customElement('ember-nexus-default-pill')

src/Component/Default/EmberNexusDefaultThumbnail.ts

@@ -6,13 +6,12 @@ import { Actor, createActor } from 'xstate';
 
 import {
   findBestFontWeightColor,
+  getColorFromElementOrId,
   getNameFromElementOrId,
   getNameOrFirstLettersFromIdFromElementOrId,
 } from '../../Helper';
-import { getColorFromElementOrId } from '../../Helper/ColorHelper';
 import { singleElementMachine } from '../../Machine';
-import { fontStyle, shadowStyle } from '../../Style';
-import { thumbnailComponentStyle } from '../../Style';
+import { fontStyle, shadowStyle, thumbnailComponentStyle } from '../../Style';
 import { colorWarning } from '../../Type';
 
 @customElement('ember-nexus-default-thumbnail')

src/Helper/index.ts

@@ -1,3 +1,5 @@
+export * from './ColorHelper';
+export * from './IconHelper';
+export * from './NameHelper';
 export * from './TextContrastOptimizer';
 export * from './TitleHelper';
-export * from './NameHelper';

test/Unit/Index.test.ts

@@ -1,4 +1,4 @@
-import {expect, test} from '@jest/globals';
+import { expect, test } from 'vitest';
 
 test('a placeholder', () => {
   expect(true).toBeTruthy();