Skip to content

Commit 3d2ad07

Browse files
SyndesiSyndesi
authored
Merge pull request #56 from ember-nexus/feature/refactor-to-use-app-core
Feature/refactor to use app core
2 parents c794e18 + c548731 commit 3d2ad07

File tree

138 files changed

+3249
-1511
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

138 files changed

+3249
-1511
lines changed

‎.github/workflows/ci-test.yml‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,13 @@ jobs:
4545
key: ${{ runner.os }}-node-v${{ matrix.node-version }}-${{ hashFiles('**/package.json') }}
4646
restore-keys: |
4747
${{ runner.os }}-node-v${{ matrix.node-version }}-
48+
- name: Update yarn
49+
run: |
50+
corepack enable
51+
yarn config set -H enableImmutableInstalls false
52+
yarn install
4853
- name: Install dependencies
49-
run: yarn install --dev
54+
run: yarn install
5055
- name: Run syntax linter
5156
run: yarn cs
5257

@@ -72,8 +77,13 @@ jobs:
7277
key: ${{ runner.os }}-node-v${{ matrix.node-version }}-${{ hashFiles('**/package.json') }}
7378
restore-keys: |
7479
${{ runner.os }}-node-v${{ matrix.node-version }}-
80+
- name: Update yarn
81+
run: |
82+
corepack enable
83+
yarn config set -H enableImmutableInstalls false
84+
yarn install
7585
- name: Install dependencies
76-
run: yarn install --dev
86+
run: yarn install
7787
- name: Run unit tests
7888
run: yarn test:unit
7989

@@ -144,10 +154,15 @@ jobs:
144154
with:
145155
node-version: '23'
146156
- uses: actions/checkout@v4
157+
- name: Update yarn
158+
run: |
159+
corepack enable
160+
yarn config set -H enableImmutableInstalls false
161+
yarn install
147162
- name: Install dependencies
148-
run: yarn install --dev
163+
run: yarn install
149164
- name: Build app
150-
run: yarn build && yarn build-storybook
165+
run: yarn build && yarn storybook:build
151166
- uses: actions/upload-artifact@v4
152167
name: storybook-static
153168
with:

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ dist/
2828

2929
# Misc
3030
.DS_Store
31+
.yarn
3132

3233
*.tgz
3334

‎.storybook/main.ts‎

Lines changed: 5 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,16 @@
1-
import type { StorybookConfig } from '@storybook/web-components-webpack5';
2-
3-
import projectWebpackConfig from '../webpack.config.cjs';
1+
import type { StorybookConfig } from '@storybook/web-components-vite';
42

53
const config: StorybookConfig = {
64
stories: ['../storybook/**/*.mdx', '../storybook/**/*.stories.ts'],
5+
staticDirs: [{ from: '../dist/', to: '/dist' }],
76
addons: [
8-
'@storybook/addon-webpack5-compiler-swc',
9-
'@storybook/addon-essentials',
107
'@storybook/addon-themes',
118
'@storybook/addon-a11y',
9+
'@storybook/addon-docs'
1210
],
1311
framework: {
14-
name: '@storybook/web-components-webpack5',
12+
name: '@storybook/web-components-vite',
1513
options: {},
16-
},
17-
webpackFinal: async (config) =>
18-
{
19-
let rules = [...config.module.rules, ...projectWebpackConfig.module.rules];
20-
let filteredRules = [];
21-
for (let i = 0; i < rules.length; i++) {
22-
let rule = rules[i];
23-
if (!('test' in rule)){
24-
continue;
25-
}
26-
if (rule.test.toString().includes('css')) {
27-
continue;
28-
}
29-
filteredRules.push(rule);
30-
}
31-
32-
filteredRules.push({
33-
test: /\.css$/,
34-
oneOf: [
35-
{
36-
resourceQuery: /style/,
37-
use: [ 'style-loader', 'css-loader' ],
38-
},
39-
{
40-
type: 'asset/source',
41-
},
42-
]
43-
});
44-
45-
46-
47-
return {
48-
...config,
49-
module: { ...config.module, rules: filteredRules }
50-
}
51-
},
14+
}
5215
};
5316
export default config;

‎.storybook/preview-head.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
2-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
1+
<link rel="stylesheet" href="/dist/browser/index.css">
32
<link rel="preconnect" href="https://fonts.googleapis.com">
43
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
5-
<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">
4+
<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‎

Lines changed: 73 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,70 @@
1-
import type { Preview, WebComponentsRenderer } from '@storybook/web-components';
2-
import { withThemeByClassName } from '@storybook/addon-themes';
1+
import type {Preview} from '@storybook/web-components-vite';
32

4-
import * as tmp from '../dist/browser/index';
5-
console.log(tmp);
6-
7-
8-
import * as EmberNexus from '@ember-nexus/web-sdk';
93
import './style.css?style';
104
import './preview.css?style';
11-
import {init} from '@ember-nexus/app-core';
125

13-
const WebSdkConfiguration = EmberNexus.Service.WebSdkConfiguration;
14-
const container = EmberNexus.Container;
15-
container.get(WebSdkConfiguration).setApiHost('https://reference-dataset.ember-nexus.dev');
16-
container.get(WebSdkConfiguration).setToken('secret-token:PIPeJGUt7c00ENn8a5uDlc' as EmberNexus.Type.Definition.Token);
17-
container.get(EmberNexus.BrowserEvent.BrowserEventHandler).addBrowserEventListeners(document.body as HTMLElement);
18-
console.log(document.body);
6+
import {init as appPluginExperimentalInit} from '../dist/browser/index.js';
7+
// import * as appPluginExperimental from '../dist/browser/index.js';
8+
// console.log(appPluginExperimental);
9+
10+
// import appPluginExperimental = require('../dist/browser/index.js');
11+
// console.log(appPluginExperimental);
12+
//
13+
// const appPluginExperimentalInit = appPluginExperimental.init;
14+
1915

20-
const serviceResolver = init(document.body);
16+
// import {init as appPluginExperimentalInit} from '../dist/browser/index';
17+
18+
19+
import {init as appCoreInit} from '@ember-nexus/app-core';
20+
import {ApiConfiguration} from "@ember-nexus/app-core/Service";
21+
import {withTheme} from "./withTheme.decorator";
22+
23+
const serviceResolver = appCoreInit(document.body);
2124
(window as any).serviceResolver = serviceResolver;
2225

26+
const apiConfiguration = serviceResolver.getServiceOrFail<ApiConfiguration>(ApiConfiguration.identifier);
27+
apiConfiguration.setApiHost('https://reference-dataset.ember-nexus.dev');
28+
apiConfiguration.setToken('secret-token:PIPeJGUt7c00ENn8a5uDlc' as any);
29+
30+
appPluginExperimentalInit(serviceResolver);
31+
32+
const themeService = serviceResolver.getServiceOrFail('ember-nexus.app-plugin-experimental.service.theme-service');
33+
const languageService = serviceResolver.getServiceOrFail('ember-nexus.app-plugin-experimental.service.language-service');
34+
35+
36+
const globalTypes = {
37+
locale: {
38+
name: "Language",
39+
defaultValue: "en",
40+
toolbar: {
41+
icon: "globe",
42+
items: [
43+
// default language
44+
{ value: "en", right: "EN", title: "English" },
45+
46+
// core languages
47+
{ value: "de", right: "DE", title: "German" },
48+
{ value: "no", right: "NO", title: "Norwegian" },
49+
{ value: "ko", right: "KO", title: "Korean" },
50+
51+
// additional languages
52+
{ value: "ar", right: "AR", title: "Arabic" },
53+
{ value: "zh-CN", right: "ZH-CN", title: "Chinese" },
54+
{ value: "fr", right: "FR", title: "French" },
55+
{ value: "hi", right: "HI", title: "Hindi" },
56+
{ value: "it", right: "IT", title: "Italian" },
57+
{ value: "ja", right: "JA", title: "Japanese" },
58+
{ value: "ru", right: "RU", title: "Russian" },
59+
{ value: "es", right: "ES", title: "Spanish" },
60+
{ value: "sw", right: "SW", title: "Swahili" },
61+
],
62+
title: "Language",
63+
dynamicTitle: true
64+
}
65+
}
66+
};
67+
2368
const preview: Preview = {
2469
parameters: {
2570
controls: {
@@ -30,21 +75,29 @@ const preview: Preview = {
3075
},
3176
options: {
3277
storySort: (a, b) => {
33-
return a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true });
78+
return a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, {numeric: true});
3479
}
3580
},
3681
layout: 'centered',
3782
},
3883
decorators: [
39-
withThemeByClassName<WebComponentsRenderer>({
84+
withTheme({
4085
themes: {
41-
light: '',
86+
light: 'light',
4287
dark: 'dark',
43-
'high contrast': 'high-contrast'
88+
emerald: 'emerald',
89+
dim: 'dim',
4490
},
4591
defaultTheme: 'light',
92+
themeService: themeService
4693
}),
94+
(story, context) => {
95+
const { locale } = context.globals;
96+
// @ts-ignore
97+
languageService.applyLanguage(locale);
98+
return story();
99+
}
47100
],
48101
};
49-
102+
export {globalTypes};
50103
export default preview;

‎.storybook/style.css‎

Lines changed: 0 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,4 @@
1-
/*@import url('@ember-nexus/uix/Style/index.css');*/
2-
3-
html {
4-
font-size: 20px;
5-
font-family: "Roboto";
6-
font-weight: 300;
7-
}
8-
91
body {
102
margin: 0;
113
padding: 0;
12-
13-
--border-radius-none: 0;
14-
--border-radius-thin: 3px;
15-
--border-radius: 10px;
16-
--border-radius-thick: 20px;
17-
18-
--border-width-none: 0;
19-
--border-width: 1px;
20-
--color-content-background: #fff;
21-
--color-border: #000;
22-
--color-shadow: 220 3% 15%;
23-
--shadow-strength: 1%;
24-
--shadow-1: 0 1px 2px -1px hsl(var(--color-shadow) /
25-
calc(var(--shadow-strength) + 9%));
26-
--shadow-2: 0 3px 5px -2px hsl(var(--color-shadow) /
27-
calc(var(--shadow-strength) + 3%)),
28-
0 7px 14px -5px hsl(var(--color-shadow) /
29-
calc(var(--shadow-strength) + 5%));
30-
--shadow-3: 0 -1px 3px 0 hsl(var(--color-shadow) /
31-
calc(var(--shadow-strength) + 2%)),
32-
0 1px 2px -5px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 2%)),
33-
0 2px 5px -5px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 4%)),
34-
0 4px 12px -5px hsl(var(--color-shadow) /
35-
calc(var(--shadow-strength) + 5%)),
36-
0 12px 15px -5px hsl(var(--color-shadow) /
37-
calc(var(--shadow-strength) + 7%));
38-
--shadow-4: 0 -2px 5px 0 hsl(var(--color-shadow) /
39-
calc(var(--shadow-strength) + 2%)),
40-
0 1px 1px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 3%)),
41-
0 2px 2px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 3%)),
42-
0 5px 5px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 4%)),
43-
0 9px 9px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 5%)),
44-
0 16px 16px -2px hsl(var(--color-shadow) /
45-
calc(var(--shadow-strength) + 6%));
46-
--shadow-5: 0 -1px 2px 0 hsl(var(--color-shadow) /
47-
calc(var(--shadow-strength) + 2%)),
48-
0 2px 1px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 3%)),
49-
0 5px 5px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 3%)),
50-
0 10px 10px -2px hsl(var(--color-shadow) /
51-
calc(var(--shadow-strength) + 4%)),
52-
0 20px 20px -2px hsl(var(--color-shadow) /
53-
calc(var(--shadow-strength) + 5%)),
54-
0 40px 40px -2px hsl(var(--color-shadow) /
55-
calc(var(--shadow-strength) + 7%));
56-
--shadow-6: 0 -1px 2px 0 hsl(var(--color-shadow) /
57-
calc(var(--shadow-strength) + 2%)),
58-
0 3px 2px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 3%)),
59-
0 7px 5px -2px hsl(var(--color-shadow) / calc(var(--shadow-strength) + 3%)),
60-
0 12px 10px -2px hsl(var(--color-shadow) /
61-
calc(var(--shadow-strength) + 4%)),
62-
0 22px 18px -2px hsl(var(--color-shadow) /
63-
calc(var(--shadow-strength) + 5%)),
64-
0 41px 33px -2px hsl(var(--color-shadow) /
65-
calc(var(--shadow-strength) + 6%)),
66-
0 100px 80px -2px hsl(var(--color-shadow) /
67-
calc(var(--shadow-strength) + 7%));
68-
--card-background: var(--color-content-background);
69-
--card-border-radius: var(--border-radius);
70-
--card-border-width: var(--border-width-none);
71-
--card-border-color: var(--color-border);
72-
--card-border-style: solid;
73-
--card-shadow: var(--shadow-2);
744
}

‎.storybook/withTheme.decorator.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { DecoratorHelpers } from '@storybook/addon-themes';
2+
import type { DecoratorFunction, Renderer } from 'storybook/internal/types';
3+
import {useEffect} from 'storybook/preview-api';
4+
5+
const { initializeThemeState, pluckThemeFromContext } = DecoratorHelpers;
6+
7+
export const withTheme = <TRenderer extends Renderer = any>({ themes, defaultTheme, themeService }): DecoratorFunction<TRenderer> => {
8+
initializeThemeState(Object.keys(themes), defaultTheme);
9+
10+
return (story, context) => {
11+
const selected = pluckThemeFromContext(context);
12+
const { themeOverride } = context.parameters.themes ?? {};
13+
14+
useEffect(() => {
15+
const themeKey = themeOverride || selected || defaultTheme;
16+
17+
themeService.applyTheme(themeKey);
18+
}, [themeOverride, selected]);
19+
20+
return story();
21+
};
22+
};

‎.yarnrc.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
nodeLinker: node-modules

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
55
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
66

77
## Unreleased
8+
### Changed
9+
- Refactor app plugin experimental to use app-core instead of web-sdk.
810

911
## 0.0.12 - 2024-12-16
1012
### Added

sync-translation.sh renamed to bin/sync-translation.sh

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,15 @@ updateTermRequest=$(curl -s -X POST https://api.poeditor.com/v2/projects/upload
99
-F updating="terms" \
1010
-F language="en" \
1111
-F sync_terms="1" \
12-
-F file=@"./src/Asset/Translation/en.json")
12+
-F file=@"../src/Asset/Translation/en.json")
1313

1414
echo "Downloading list of available languages."
1515
languagesRequest=$(curl -s -X POST https://api.poeditor.com/v2/languages/list \
1616
-d api_token="${POEDITOR_API_KEY}" \
1717
-d id="${POEDITOR_PROJECT_ID}")
1818

19+
echo $languagesRequest
20+
1921
echo "Downloading language files for available languages"
2022
for language in $(echo $languagesRequest | jq -r '.result.languages[].code'); do
2123
echo "Downloading file for language '$language'."

0 commit comments

Comments
 (0)