Feature/refactor to use app core

.github/workflows/ci-test.yml

@@ -45,8 +45,13 @@ jobs:
           key: ${{ runner.os }}-node-v${{ matrix.node-version }}-${{ hashFiles('**/package.json') }}
           restore-keys: |
             ${{ runner.os }}-node-v${{ matrix.node-version }}-
+      - name: Update yarn
+        run: |
+          corepack enable
+          yarn config set -H enableImmutableInstalls false
+          yarn install
       - name: Install dependencies
-        run: yarn install --dev
+        run: yarn install
       - name: Run syntax linter
         run: yarn cs
 
@@ -72,8 +77,13 @@ jobs:
           key: ${{ runner.os }}-node-v${{ matrix.node-version }}-${{ hashFiles('**/package.json') }}
           restore-keys: |
             ${{ runner.os }}-node-v${{ matrix.node-version }}-
+      - name: Update yarn
+        run: |
+          corepack enable
+          yarn config set -H enableImmutableInstalls false
+          yarn install
       - name: Install dependencies
-        run: yarn install --dev
+        run: yarn install
       - name: Run unit tests
         run: yarn test:unit
 
@@ -144,10 +154,15 @@ jobs:
         with:
           node-version: '23'
       - uses: actions/checkout@v4
+      - name: Update yarn
+        run: |
+          corepack enable
+          yarn config set -H enableImmutableInstalls false
+          yarn install
       - name: Install dependencies
-        run: yarn install --dev
+        run: yarn install
       - name: Build app
-        run: yarn build && yarn build-storybook
+        run: yarn build && yarn storybook:build
       - uses: actions/upload-artifact@v4
         name: storybook-static
         with:

.gitignore

@@ -28,6 +28,7 @@ dist/
 
 # Misc
 .DS_Store
+.yarn
 
 *.tgz
 

.storybook/main.ts

@@ -1,53 +1,16 @@
-import type { StorybookConfig } from '@storybook/web-components-webpack5';
-
-import projectWebpackConfig from '../webpack.config.cjs';
+import type { StorybookConfig } from '@storybook/web-components-vite';
 
 const config: StorybookConfig = {
   stories: ['../storybook/**/*.mdx', '../storybook/**/*.stories.ts'],
+  staticDirs: [{ from: '../dist/', to: '/dist' }],
   addons: [
-    '@storybook/addon-webpack5-compiler-swc',
-    '@storybook/addon-essentials',
     '@storybook/addon-themes',
     '@storybook/addon-a11y',
+    '@storybook/addon-docs'
   ],
   framework: {
-    name: '@storybook/web-components-webpack5',
+    name: '@storybook/web-components-vite',
     options: {},
-  },
-  webpackFinal: async (config) =>
-  {
-    let rules = [...config.module.rules, ...projectWebpackConfig.module.rules];
-    let filteredRules = [];
-    for (let i = 0; i < rules.length; i++) {
-      let rule = rules[i];
-      if (!('test' in rule)){
-        continue;
-      }
-      if (rule.test.toString().includes('css')) {
-        continue;
-      }
-      filteredRules.push(rule);
-    }
-
-    filteredRules.push({
-      test: /\.css$/,
-      oneOf: [
-        {
-          resourceQuery: /style/,
-          use: [ 'style-loader', 'css-loader' ],
-        },
-        {
-          type: 'asset/source',
-        },
-      ]
-    });
-
-
-
-    return {
-      ...config,
-      module: { ...config.module, rules: filteredRules }
-    }
-  },
+  }
 };
 export default config;

.storybook/preview-head.html

@@ -1,5 +1,4 @@
-<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="/dist/browser/index.css">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet">

.storybook/preview.ts

@@ -1,25 +1,70 @@
-import type { Preview, WebComponentsRenderer } from '@storybook/web-components';
-import { withThemeByClassName } from '@storybook/addon-themes';
+import type {Preview} from '@storybook/web-components-vite';
 
-import * as tmp from '../dist/browser/index';
-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;
-container.get(WebSdkConfiguration).setApiHost('https://reference-dataset.ember-nexus.dev');
-container.get(WebSdkConfiguration).setToken('secret-token:PIPeJGUt7c00ENn8a5uDlc' as EmberNexus.Type.Definition.Token);
-container.get(EmberNexus.BrowserEvent.BrowserEventHandler).addBrowserEventListeners(document.body as HTMLElement);
-console.log(document.body);
+import {init as appPluginExperimentalInit} from '../dist/browser/index.js';
+// import * as appPluginExperimental from '../dist/browser/index.js';
+// console.log(appPluginExperimental);
+
+// import appPluginExperimental = require('../dist/browser/index.js');
+// console.log(appPluginExperimental);
+//
+// const appPluginExperimentalInit = appPluginExperimental.init;
+
 
-const serviceResolver = init(document.body);
+// import {init as appPluginExperimentalInit} from '../dist/browser/index';
+
+
+import {init as appCoreInit} from '@ember-nexus/app-core';
+import {ApiConfiguration} from "@ember-nexus/app-core/Service";
+import {withTheme} from "./withTheme.decorator";
+
+const serviceResolver = appCoreInit(document.body);
 (window as any).serviceResolver = serviceResolver;
 
+const apiConfiguration = serviceResolver.getServiceOrFail<ApiConfiguration>(ApiConfiguration.identifier);
+apiConfiguration.setApiHost('https://reference-dataset.ember-nexus.dev');
+apiConfiguration.setToken('secret-token:PIPeJGUt7c00ENn8a5uDlc' as any);
+
+appPluginExperimentalInit(serviceResolver);
+
+const themeService = serviceResolver.getServiceOrFail('ember-nexus.app-plugin-experimental.service.theme-service');
+const languageService = serviceResolver.getServiceOrFail('ember-nexus.app-plugin-experimental.service.language-service');
+
+
+const globalTypes = {
+  locale: {
+    name: "Language",
+    defaultValue: "en",
+    toolbar: {
+      icon: "globe",
+      items: [
+        // default language
+        { value: "en", right: "EN", title: "English" },
+
+        // core languages
+        { value: "de", right: "DE", title: "German" },
+        { value: "no", right: "NO", title: "Norwegian" },
+        { value: "ko", right: "KO", title: "Korean" },
+
+        // additional languages
+        { value: "ar", right: "AR", title: "Arabic" },
+        { value: "zh-CN", right: "ZH-CN", title: "Chinese" },
+        { value: "fr", right: "FR", title: "French" },
+        { value: "hi", right: "HI", title: "Hindi" },
+        { value: "it", right: "IT", title: "Italian" },
+        { value: "ja", right: "JA", title: "Japanese" },
+        { value: "ru", right: "RU", title: "Russian" },
+        { value: "es", right: "ES", title: "Spanish" },
+        { value: "sw", right: "SW", title: "Swahili" },
+      ],
+      title: "Language",
+      dynamicTitle: true
+    }
+  }
+};
+
 const preview: Preview = {
   parameters: {
     controls: {
@@ -30,21 +75,29 @@ const preview: Preview = {
     },
     options: {
       storySort: (a, b) => {
-        return a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true });
+        return a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, {numeric: true});
       }
     },
     layout: 'centered',
   },
   decorators: [
-    withThemeByClassName<WebComponentsRenderer>({
+    withTheme({
       themes: {
-        light: '',
+        light: 'light',
         dark: 'dark',
-        'high contrast': 'high-contrast'
+        emerald: 'emerald',
+        dim: 'dim',
       },
       defaultTheme: 'light',
+      themeService: themeService
     }),
+    (story, context) => {
+      const { locale } = context.globals;
+      // @ts-ignore
+      languageService.applyLanguage(locale);
+      return story();
+    }
   ],
 };
-
+export {globalTypes};
 export default preview;

.storybook/style.css

@@ -1,74 +1,4 @@
-/*@import url('@ember-nexus/uix/Style/index.css');*/
-
-html {
-    font-size: 20px;
-    font-family: "Roboto";
-    font-weight: 300;
-}
-
 body {
     margin: 0;
     padding: 0;
-
-    --border-radius-none: 0;
-    --border-radius-thin: 3px;
-    --border-radius: 10px;
-    --border-radius-thick: 20px;
-
-    --border-width-none: 0;
-    --border-width: 1px;
-    --color-content-background: #fff;
-    --color-border: #000;
-    --color-shadow: 220 3% 15%;
-    --shadow-strength: 1%;
-    --shadow-1: 0 1px 2px -1px hsl(var(--color-shadow) /
-          calc(var(--shadow-strength) + 9%));
-    --shadow-2: 0 3px 5px -2px hsl(var(--color-shadow) /
-            calc(var(--shadow-strength) + 3%)),
-    0 7px 14px -5px hsl(var(--color-shadow) /
-            calc(var(--shadow-strength) + 5%));
-    --shadow-3: 0 -1px 3px 0 hsl(var(--color-shadow) /
-            calc(var(--shadow-strength) + 2%)),
-    0 1px 2px -5px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 2%)),
-    0 2px 5px -5px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 4%)),
-    0 4px 12px -5px hsl(var(--color-shadow) /
-            calc(var(--shadow-strength) + 5%)),
-    0 12px 15px -5px hsl(var(--color-shadow) /
-            calc(var(--shadow-strength) + 7%));
-    --shadow-4: 0 -2px 5px 0 hsl(var(--color-shadow) /
-            calc(var(--shadow-strength) + 2%)),
-    0 1px 1px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 3%)),
-    0 2px 2px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 3%)),
-    0 5px 5px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 4%)),
-    0 9px 9px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 5%)),
-    0 16px 16px -2px hsl(var(--color-shadow) /
-            calc(var(--shadow-strength) + 6%));
-    --shadow-5: 0 -1px 2px 0 hsl(var(--color-shadow) /
-            calc(var(--shadow-strength) + 2%)),
-    0 2px 1px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 3%)),
-    0 5px 5px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 3%)),
-    0 10px 10px -2px hsl(var(--color-shadow) /
-            calc(var(--shadow-strength) + 4%)),
-    0 20px 20px -2px hsl(var(--color-shadow) /
-            calc(var(--shadow-strength) + 5%)),
-    0 40px 40px -2px hsl(var(--color-shadow) /
-            calc(var(--shadow-strength) + 7%));
-    --shadow-6: 0 -1px 2px 0 hsl(var(--color-shadow) /
-            calc(var(--shadow-strength) + 2%)),
-    0 3px 2px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 3%)),
-    0 7px 5px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 3%)),
-    0 12px 10px -2px hsl(var(--color-shadow) /
-            calc(var(--shadow-strength) + 4%)),
-    0 22px 18px -2px hsl(var(--color-shadow) /
-            calc(var(--shadow-strength) + 5%)),
-    0 41px 33px -2px hsl(var(--color-shadow) /
-            calc(var(--shadow-strength) + 6%)),
-    0 100px 80px -2px hsl(var(--color-shadow) /
-            calc(var(--shadow-strength) + 7%));
-    --card-background: var(--color-content-background);
-    --card-border-radius: var(--border-radius);
-    --card-border-width: var(--border-width-none);
-    --card-border-color: var(--color-border);
-    --card-border-style: solid;
-    --card-shadow: var(--shadow-2);
 }

.storybook/withTheme.decorator.ts

@@ -0,0 +1,22 @@
+import { DecoratorHelpers } from '@storybook/addon-themes';
+import type { DecoratorFunction, Renderer } from 'storybook/internal/types';
+import {useEffect} from 'storybook/preview-api';
+
+const { initializeThemeState, pluckThemeFromContext } = DecoratorHelpers;
+
+export const withTheme = <TRenderer extends Renderer = any>({ themes, defaultTheme, themeService }): DecoratorFunction<TRenderer> => {
+  initializeThemeState(Object.keys(themes), defaultTheme);
+
+  return (story, context) => {
+    const selected = pluckThemeFromContext(context);
+    const { themeOverride } = context.parameters.themes ?? {};
+
+    useEffect(() => {
+      const themeKey = themeOverride || selected || defaultTheme;
+
+      themeService.applyTheme(themeKey);
+    }, [themeOverride, selected]);
+
+    return story();
+  };
+};

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

CHANGELOG.md

@@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Unreleased
+### Changed
+- Refactor app plugin experimental to use app-core instead of web-sdk.
 
 ## 0.0.12 - 2024-12-16
 ### Added

sync-translation.sh → bin/sync-translation.sh

@@ -9,13 +9,15 @@ updateTermRequest=$(curl -s -X POST https://api.poeditor.com/v2/projects/upload
      -F updating="terms" \
      -F language="en" \
      -F sync_terms="1" \
-     -F file=@"./src/Asset/Translation/en.json")
+     -F file=@"../src/Asset/Translation/en.json")
 
 echo "Downloading list of available languages."
 languagesRequest=$(curl -s -X POST https://api.poeditor.com/v2/languages/list \
      -d api_token="${POEDITOR_API_KEY}" \
      -d id="${POEDITOR_PROJECT_ID}")
 
+echo $languagesRequest
+
 echo "Downloading language files for available languages"
 for language in $(echo $languagesRequest | jq -r '.result.languages[].code'); do
     echo "Downloading file for language '$language'."