chore: merge master into main (#1461)

* chore(deps): update minor and patch (#1451)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency rollup to v4.9.4 (#1452)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency caniuse-lite to v1.0.30001576 (#1453)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix: dark theme for listbox (#1449)

* chore: fix dark theme for listbox

* chore: add test

* chore: listbox search bg

* chore: add baseline

* chore: fix tests

* chore: use alpha shift for search bg

* chore: baseline

* chore(deps): update minor and patch (#1459)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency prettier to v3.2.2 (#1460)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* feat: add option to inlineDynamicImports (#1458)

* feat: add option to inlineDynamicImports

* fix: add documentation and run yarn spec

* fix: format readme

* chore(deps): bump follow-redirects in /examples/sn-hello-react (#1456)

Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.14.9 to 1.15.4.
- [Release notes](https://github.com/follow-redirects/follow-redirects/releases)
- [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.14.9...v1.15.4)

---
updated-dependencies:
- dependency-name: follow-redirects
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): bump follow-redirects from 1.15.1 to 1.15.4 (#1457)

Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.1 to 1.15.4.
- [Release notes](https://github.com/follow-redirects/follow-redirects/releases)
- [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.1...v1.15.4)

---
updated-dependencies:
- dependency-name: follow-redirects
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Elise <fdq@qlik.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
This commit is contained in:
Tobias Åström
2024-01-18 16:02:44 +01:00
committed by GitHub
parent c47c8090c8
commit eeba77d181
22 changed files with 491 additions and 438 deletions

View File

@@ -82,7 +82,7 @@ commands:
jobs:
validate:
docker:
- image: cimg/node:21.4.0
- image: cimg/node:21.5.0
working_directory: ~/project
steps:
- attach_workspace:
@@ -106,7 +106,7 @@ jobs:
build:
docker:
- image: cimg/node:21.4.0
- image: cimg/node:21.5.0
working_directory: ~/project
resource_class: large
@@ -130,7 +130,7 @@ jobs:
test-integration:
docker:
- image: cimg/node:21.4.0
- image: cimg/node:21.5.0
- image: browserless/chrome:1-puppeteer-7.1.0
working_directory: ~/project
@@ -161,7 +161,7 @@ jobs:
test-create:
docker:
- image: cimg/node:21.4.0
- image: cimg/node:21.5.0
- image: browserless/chrome:1-puppeteer-7.1.0
working_directory: ~/project

View File

@@ -9,11 +9,11 @@
},
"dependencies": {
"@nebula.js/stardust": "next",
"@nebula.js/sn-mekko-chart": "1.3.0",
"@nebula.js/sn-mekko-chart": "1.4.0",
"enigma.js": "2.12.0"
},
"devDependencies": {
"@babel/core": "7.23.7",
"parcel": "^2.10.3"
"parcel": "^2.11.0"
}
}

View File

@@ -6,8 +6,8 @@
"devDependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.2",
"@mui/material": "^5.15.2",
"@mui/icons-material": "^5.15.4",
"@mui/material": "^5.15.4",
"@nebula.js/conversion": "^5.0.0-alpha.2",
"@nebula.js/locale": "^5.0.0-alpha.2",
"@nebula.js/supernova": "^5.0.0-alpha.2",

View File

@@ -137,6 +137,12 @@ function getSearchColor(getListboxStyle) {
return color;
}
function getSearchBGColor(bgCol, getListboxStyle) {
const searchBgColorObj = new Color(getListboxStyle('', 'backgroundColor'));
searchBgColorObj.setAlpha(0.7);
return searchBgColorObj.isInvalid() ? bgCol : searchBgColorObj.toRGBA();
}
export default function getStyles({ app, themeApi, theme, components = [], checkboxes = false }) {
const overrides = getOverridesAsObject(components);
const getListboxStyle = (path, prop) => themeApi.getStyle('object.listBox', path, prop);
@@ -153,7 +159,9 @@ export default function getStyles({ app, themeApi, theme, components = [], check
? resolveBgImage({ bgImage: themeOverrides.background.image }, app)
: undefined;
const searchBgColor = 'rgba(255, 255, 255, 0.7)';
const bgColor = bgComponentColor || getListboxStyle('', 'backgroundColor') || theme.palette.background.default;
const searchBgColor = getSearchBGColor(bgColor, getListboxStyle);
const searchColor = getSearchColor(getListboxStyle);
const headerFontStyle = themeOverrides.header?.fontStyle || {};
@@ -165,7 +173,7 @@ export default function getStyles({ app, themeApi, theme, components = [], check
return {
background: {
backgroundColor: bgComponentColor || getListboxStyle('', 'backgroundColor') || theme.palette.background.default,
backgroundColor: bgColor,
backgroundImage: bgImage?.url && !bgImage?.url.startsWith('url(') ? `url('${bgImage.url}')` : undefined,
backgroundRepeat: 'no-repeat',
backgroundSize: bgImage?.size,

View File

@@ -1,8 +1,8 @@
{
"module": "esm/index.js",
"peerDependencies": {
"@mui/material": "^5.15.2",
"@mui/icons-material": "^5.15.2",
"@mui/material": "^5.15.4",
"@mui/icons-material": "^5.15.4",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"react": "^17.0.2 || ^18.1.0",

View File

@@ -46,8 +46,8 @@
"devDependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.2",
"@mui/material": "^5.15.2",
"@mui/icons-material": "^5.15.4",
"@mui/material": "^5.15.4",
"@nebula.js/conversion": "^5.0.0-alpha.2",
"@nebula.js/enigma-mocker": "^5.0.0-alpha.2",
"@nebula.js/locale": "^5.0.0-alpha.2",

View File

@@ -38,7 +38,7 @@ describe('set theme', () => {
});
create({ _inherit: false }, resolveMock);
expect(extendMock.mock.calls[0]).toEqual([true, {}, base, light, {}]);
expect(extendMock.mock.calls[0]).toEqual([true, {}, base, {}, light]);
});
test('should extend from dark theme when type is dark', () => {
@@ -47,7 +47,7 @@ describe('set theme', () => {
});
create({ type: 'dark', _inherit: false }, resolveMock);
expect(extendMock.mock.calls[0]).toEqual([true, {}, base, dark, {}]);
expect(extendMock.mock.calls[0]).toEqual([true, {}, base, {}, dark]);
});
test('should extend and add base inheritance', () => {
@@ -56,7 +56,7 @@ describe('set theme', () => {
});
create({}, resolveMock);
expect(extendMock.mock.calls[0]).toEqual([true, {}, base, light, baseIn]);
expect(extendMock.mock.calls[0]).toEqual([true, {}, base, baseIn, light]);
});
test('should not extend scales and palette arrays', () => {

View File

@@ -12,7 +12,7 @@ export default function setTheme(t, resolve) {
if (t._inherit === false || t._inherit === 'false') {
baseInherit = {};
}
const root = extend(true, {}, baseRawJSON, colorRawJSON, baseInherit);
const root = extend(true, {}, baseRawJSON, baseInherit, colorRawJSON);
// avoid merging known array objects as it could cause issues if they are of different types (pyramid vs class) or length
const rawThemeJSON = extend(true, {}, root, { scales: null, palettes: { data: null, ui: null } }, t);
if (!rawThemeJSON.palettes.data || !rawThemeJSON.palettes.data.length) {

View File

@@ -17,5 +17,21 @@
"@H6": "10px"
},
"type": "dark",
"color": "@B98"
"color": "@B98",
"object": {
"listBox": {
"backgroundColor": "@B20",
"title": {
"main": {
"color": "@B98",
"fontSize": "14px",
"fontWeight": "bold"
}
},
"content": {
"color": "#@B98",
"fontSize": "12px"
}
}
}
}

View File

@@ -16,18 +16,25 @@ nebula build
Build nebula.js visualization
Options:
--version Show version number [boolean]
--config, -c Path to a JavaScript config file
[string] [default: "nebula.config.js"]
--watch, -w Watch source files
[choices: "umd", "systemjs"] [default: "umd"]
--sourcemap, -m Generate source map [boolean] [default: true]
--mode Explicitly set mode
[string] [choices: "production", "development"]
--core Set a core build target [string] [default: "core"]
--typescript Enable typescript bundling [boolean] [default: false]
--preferBuiltins Configuration option that specifies whether to use Node.js built-in modules [boolean] [default: true]
--browser Instructs the build to use the browser module resolutions in package.json and adds 'browser' to exportConditions if it is not present so browser conditionals in exports are applied. [boolean] [default: false]
--version Show version number [boolean]
--config, -c Path to a JavaScript config file
[string] [default: "nebula.config.js"]
--watch, -w Watch source files
[choices: "umd", "systemjs"] [default: "umd"]
--sourcemap, -m Generate source map [boolean] [default: true]
--mode Explicitly set mode
[string] [choices: "production", "development"]
--core Set a core build target [string] [default: "core"]
--typescript Enable typescript bundling [boolean] [default: false]
--preferBuiltins Specify whether to use Node.js built-in modules.
[boolean] [default: true]
--browser Use the browser module resolutions in package.json and adds
'browser' to exportConditions if it is not present so browser
conditionals in exports are applied.
[boolean] [default: false]
--inlineDynamicImports Inlines dynamic imports, allowing for code-splitting
regardless of format.
[boolean] [default: false]
```
## Example

View File

@@ -61,7 +61,7 @@ const config = ({
mode = 'production',
format = 'umd',
cwd = process.cwd(),
argv = { sourcemap: true },
argv = { sourcemap: true, inlineDynamicImports: false },
core,
behaviours: {
getExternal = getExternalDefault,
@@ -175,6 +175,7 @@ const config = ({
output: {
banner,
format,
inlineDynamicImports: argv.inlineDynamicImports,
file: path.resolve(dir, outputFile),
name: outputName,
sourcemap,

View File

@@ -54,6 +54,12 @@ const options = {
type: 'boolean',
default: false,
},
inlineDynamicImports: {
description:
'In Rollup, inlineDynamicImports option is a configuration option that allows code-splitting while still creating a single bundle.',
type: 'boolean',
default: false,
},
};
// nebula build --watch - watch umd bundle

View File

@@ -24,7 +24,7 @@
"@babel/cli": "7.23.4",
"@babel/core": "7.23.7",
"@babel/plugin-transform-react-jsx": "7.23.4",
"@babel/preset-env": "7.23.7",
"@babel/preset-env": "7.23.8",
"@rollup/plugin-babel": "6.0.4",
"@rollup/plugin-commonjs": "25.0.7",
"@rollup/plugin-json": "6.1.0",
@@ -33,14 +33,14 @@
"@rollup/plugin-terser": "0.4.4",
"chalk": "4.1.2",
"extend": "3.0.2",
"postcss": "^8.4.32",
"rollup": "4.9.2",
"postcss": "^8.4.33",
"rollup": "4.9.5",
"rollup-plugin-postcss": "4.0.2",
"rollup-plugin-sourcemaps": "0.6.3",
"yargs": "17.7.2"
},
"devDependencies": {
"@rollup/plugin-typescript": "11.1.5",
"@rollup/plugin-typescript": "11.1.6",
"tslib": "*",
"typescript": ">=5.3.3"
}

View File

@@ -29,7 +29,7 @@
"dependencies": {
"@babel/cli": "7.23.4",
"@babel/core": "7.23.7",
"@babel/preset-env": "7.23.7",
"@babel/preset-env": "7.23.8",
"@nebula.js/stardust": "^4.9.0",
"@rollup/plugin-babel": "6.0.4",
"@rollup/plugin-commonjs": "25.0.7",
@@ -39,7 +39,7 @@
"extend": "3.0.2",
"fs-extra": "11.2.0",
"node-event-emitter": "0.0.1",
"rollup": "4.9.2",
"rollup": "4.9.5",
"yargs": "17.7.2"
}
}

View File

@@ -51,10 +51,10 @@
},
"devDependencies": {
"@babel/core": "7.23.7",
"@babel/preset-env": "7.23.7",
"@babel/preset-env": "7.23.8",
"@babel/preset-react": "7.23.3",
"@mui/material": "^5.15.2",
"@mui/system": "^5.15.2",
"@mui/material": "^5.15.4",
"@mui/system": "^5.15.4",
"@nebula.js/enigma-mocker": "^5.0.0-alpha.2",
"@nebula.js/nucleus": "^5.0.0-alpha.2",
"@nebula.js/snapshooter": "^5.0.0-alpha.2",
@@ -71,6 +71,6 @@
"monaco-editor-webpack-plugin": "7.1.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-router-dom": "6.21.1"
"react-router-dom": "6.21.2"
}
}

View File

@@ -3674,9 +3674,9 @@ flatted@^3.1.0:
integrity sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==
follow-redirects@^1.0.0:
version "1.14.9"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
version "1.15.4"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf"
integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==
for-each@^0.3.3:
version "0.3.3"

View File

@@ -42,10 +42,10 @@
"@babel/helper-plugin-utils": "7.22.5",
"@babel/plugin-proposal-object-rest-spread": "7.20.7",
"@babel/plugin-transform-react-jsx": "7.23.4",
"@babel/preset-env": "7.23.7",
"@babel/preset-env": "7.23.8",
"@babel/preset-react": "7.23.3",
"@commitlint/cli": "18.4.3",
"@commitlint/config-conventional": "18.4.3",
"@commitlint/cli": "18.4.4",
"@commitlint/config-conventional": "18.4.4",
"@playwright/test": "1.40.1",
"@rollup/plugin-babel": "6.0.4",
"@rollup/plugin-commonjs": "25.0.7",
@@ -53,23 +53,23 @@
"@rollup/plugin-node-resolve": "15.2.3",
"@rollup/plugin-replace": "5.0.5",
"@rollup/plugin-terser": "0.4.4",
"@testing-library/jest-dom": "^6.1.6",
"@testing-library/jest-dom": "^6.2.0",
"@testing-library/react": "^14.1.2",
"@testing-library/user-event": "^14.5.2",
"babel-loader": "9.1.3",
"babel-plugin-istanbul": "6.1.1",
"body-parser": "1.20.2",
"cross-env": "7.0.3",
"css-loader": "6.8.1",
"css-loader": "6.9.0",
"enigma.js": "2.12.0",
"eslint": "8.56.0",
"eslint-config-airbnb": "19.0.4",
"eslint-config-prettier": "9.1.0",
"eslint-plugin-import": "2.29.1",
"eslint-plugin-jest": "^27.6.0",
"eslint-plugin-jest": "^27.6.3",
"eslint-plugin-jsx-a11y": "6.8.0",
"eslint-plugin-mocha": "10.2.0",
"eslint-plugin-prettier": "5.1.2",
"eslint-plugin-prettier": "5.1.3",
"eslint-plugin-react": "7.33.2",
"express": "4.18.2",
"husky": "8.0.3",
@@ -78,23 +78,23 @@
"jest-junit": "^16.0.0",
"jest-location-mock": "^2.0.0",
"jimp": "0.22.10",
"lerna": "8.0.1",
"lerna": "8.0.2",
"lint-staged": "^15.2.0",
"mocha-junit-reporter": "2.2.1",
"picasso-plugin-q": "2.2.5",
"picasso.js": "2.2.5",
"prettier": "3.1.1",
"picasso-plugin-q": "2.2.7",
"picasso.js": "2.2.7",
"prettier": "3.2.2",
"puppeteer": "19.11.1",
"qix-faker": "0.3.0",
"rollup": "4.9.2",
"rollup": "4.9.5",
"rollup-plugin-dependency-flow": "0.3.0",
"rollup-plugin-sass": "1.12.21",
"style-loader": "3.3.3",
"style-loader": "3.3.4",
"whatwg-fetch": "^3.6.20",
"yargs": "17.7.2"
},
"resolutions": {
"**/caniuse-lite": "1.0.30001572",
"**/caniuse-lite": "1.0.30001576",
"**/react": "18.2.0",
"**/react-dom": "18.2.0",
"**/react-is": "18.2.0",

View File

@@ -10,16 +10,16 @@
"peerDependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.2",
"@mui/material": "^5.15.2",
"@mui/icons-material": "^5.15.4",
"@mui/material": "^5.15.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.2",
"@mui/material": "^5.15.2",
"@mui/icons-material": "^5.15.4",
"@mui/material": "^5.15.4",
"react": "18.2.0",
"react-dom": "18.2.0"
}

View File

@@ -26,14 +26,18 @@
};
}
const init = async (options = {}) => {
const init = async (options = {}, theme = 'light') => {
const element = window.document.querySelector('#object');
if (options?.fixtureFile?.customRenderTestElementSize) {
element.style.width = options.fixtureFile.customRenderTestElementSize.width;
element.style.height = options.fixtureFile.customRenderTestElementSize.height;
}
const { app } = getMocks(options);
const nebbie = window.stardust.embed(app);
const nebbie = window.stardust.embed(app, {
context: {
theme,
},
});
const listboxOptions = {
...options,
};
@@ -75,7 +79,7 @@
return sc;
};
const { scenario, fixture, ...options } = getOptions() || {};
const { scenario, fixture, theme, ...options } = getOptions() || {};
let fixtureFile;
@@ -85,9 +89,12 @@
const scenarioOptions = fixtureFile ? fixtureFile.options || {} : getScenarioOptions(scenario);
return init({
fixtureFile,
...scenarioOptions,
...options,
});
return init(
{
fixtureFile,
...scenarioOptions,
...options,
},
theme
);
})();

View File

@@ -82,6 +82,22 @@ test.describe('listbox mashup rendering test', () => {
return expect(image).toMatchSnapshot(FILE_NAME);
});
test('listbox search dark', async () => {
const FILE_NAME = 'listbox_search_dark_B.png';
const searchSelector = '.search input';
await page.goto(`${url}/listbox/listbox.html?scenario=standard&theme=dark`, { waitUntil: 'networkidle' });
const search = await page.waitForSelector(searchSelector, { visible: true });
await search.click();
await search.fill('B');
// Note that since we don't have a backend providing search results, we can't test highlighting and selected (green) rows.
const selector = await page.locator(listboxSelector);
const image = await selector.screenshot({ caret: 'hide' });
return expect(image).toMatchSnapshot(FILE_NAME);
});
test('hide toolbar', async () => {
const FILE_NAME = 'listbox_no_toolbar.png';

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

726
yarn.lock

File diff suppressed because it is too large Load Diff