From dbb6edf6b0c734e2076aba6231ad227269a54bb4 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Thu, 18 Apr 2024 13:09:44 -0500
Subject: [PATCH 01/15] Create initial spright-components package
---
...-08e968ac-291f-4c66-949e-115ca77deef2.json | 7 +
package-lock.json | 82 +++++++++
package.json | 1 +
packages/spright-components/.eslintrc.js | 4 +
packages/spright-components/.npmignore | 9 +
packages/spright-components/.prettierignore | 29 +++
packages/spright-components/.prettierrc.json | 7 +
packages/spright-components/CONTRIBUTING.md | 31 ++++
packages/spright-components/README.md | 9 +
packages/spright-components/karma.conf.js | 169 ++++++++++++++++++
.../spright-components/karma.conf.verbose.js | 15 ++
packages/spright-components/package.json | 129 +++++++++++++
packages/spright-components/rollup.config.js | 62 +++++++
packages/spright-components/src/.eslintrc.js | 9 +
.../spright-components/src/accordion/index.ts | 27 +++
.../src/accordion/styles.ts | 35 ++++
.../src/accordion/template.ts | 9 +
.../src/accordion/tests/accordion.spec.ts | 13 ++
.../spright-components/src/all-components.ts | 7 +
.../utilities/tests/setup-configuration.ts | 7 +
.../src/utilities/tests/setup.ts | 12 ++
packages/spright-components/tsconfig.json | 29 +++
22 files changed, 702 insertions(+)
create mode 100644 change/@ni-spright-components-08e968ac-291f-4c66-949e-115ca77deef2.json
create mode 100644 packages/spright-components/.eslintrc.js
create mode 100644 packages/spright-components/.npmignore
create mode 100644 packages/spright-components/.prettierignore
create mode 100644 packages/spright-components/.prettierrc.json
create mode 100644 packages/spright-components/CONTRIBUTING.md
create mode 100644 packages/spright-components/README.md
create mode 100644 packages/spright-components/karma.conf.js
create mode 100644 packages/spright-components/karma.conf.verbose.js
create mode 100644 packages/spright-components/package.json
create mode 100644 packages/spright-components/rollup.config.js
create mode 100644 packages/spright-components/src/.eslintrc.js
create mode 100644 packages/spright-components/src/accordion/index.ts
create mode 100644 packages/spright-components/src/accordion/styles.ts
create mode 100644 packages/spright-components/src/accordion/template.ts
create mode 100644 packages/spright-components/src/accordion/tests/accordion.spec.ts
create mode 100644 packages/spright-components/src/all-components.ts
create mode 100644 packages/spright-components/src/utilities/tests/setup-configuration.ts
create mode 100644 packages/spright-components/src/utilities/tests/setup.ts
create mode 100644 packages/spright-components/tsconfig.json
diff --git a/change/@ni-spright-components-08e968ac-291f-4c66-949e-115ca77deef2.json b/change/@ni-spright-components-08e968ac-291f-4c66-949e-115ca77deef2.json
new file mode 100644
index 0000000000..919b2d6941
--- /dev/null
+++ b/change/@ni-spright-components-08e968ac-291f-4c66-949e-115ca77deef2.json
@@ -0,0 +1,7 @@
+{
+ "type": "none",
+ "comment": "Create initial spright-components package",
+ "packageName": "@ni/spright-components",
+ "email": "7282195+m-akinc@users.noreply.github.com",
+ "dependentChangeType": "none"
+}
diff --git a/package-lock.json b/package-lock.json
index 9658d2353a..2eb37eae50 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
"packages/xliff-to-json-converter",
"packages/nimble-tokens",
"packages/nimble-components",
+ "packages/spright-components",
"angular-workspace",
"angular-workspace/projects/ni/nimble-angular",
"packages/nimble-blazor",
@@ -5804,6 +5805,10 @@
"resolved": "packages/nimble-tokens",
"link": true
},
+ "node_modules/@ni/spright-components": {
+ "resolved": "packages/spright-components",
+ "link": true
+ },
"node_modules/@ni/xliff-to-json-converter": {
"resolved": "packages/xliff-to-json-converter",
"link": true
@@ -33982,6 +33987,83 @@
"vite": "^5.1.5"
}
},
+ "packages/spright-components": {
+ "version": "0.0.1",
+ "license": "MIT",
+ "dependencies": {
+ "@microsoft/fast-colors": "^5.3.1",
+ "@microsoft/fast-element": "^1.12.0",
+ "@microsoft/fast-foundation": "^2.49.6",
+ "@microsoft/fast-web-utilities": "^6.0.0",
+ "@ni/nimble-components": "^25.0.0",
+ "@ni/nimble-tokens": "^6.13.2",
+ "tslib": "^2.2.0"
+ },
+ "devDependencies": {
+ "@babel/cli": "^7.13.16",
+ "@babel/core": "^7.20.12",
+ "@chromatic-com/storybook": "^1.2.25",
+ "@microsoft/fast-react-wrapper": "^0.3.22",
+ "@ni-private/eslint-config-nimble": "^1.0.0",
+ "@ni/jasmine-parameterized": "^0.2.4",
+ "@rollup/plugin-commonjs": "^25.0.7",
+ "@rollup/plugin-json": "^6.0.0",
+ "@rollup/plugin-node-resolve": "^15.0.1",
+ "@rollup/plugin-replace": "^5.0.1",
+ "@rollup/plugin-terser": "^0.4.0",
+ "@storybook/addon-a11y": "^8.0.4",
+ "@storybook/addon-actions": "^8.0.4",
+ "@storybook/addon-docs": "^8.0.4",
+ "@storybook/addon-essentials": "^8.0.4",
+ "@storybook/addon-interactions": "^8.0.4",
+ "@storybook/addon-links": "^8.0.4",
+ "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+ "@storybook/cli": "^8.0.4",
+ "@storybook/csf": "^0.1.2",
+ "@storybook/html": "^8.0.4",
+ "@storybook/html-webpack5": "^8.0.4",
+ "@storybook/manager-api": "^8.0.4",
+ "@storybook/theming": "^8.0.4",
+ "@types/jasmine": "^5.1.4",
+ "@types/webpack-env": "^1.15.2",
+ "babel-loader": "^9.1.2",
+ "circular-dependency-plugin": "^5.2.0",
+ "css-loader": "^6.7.3",
+ "dotenv-webpack": "^8.0.1",
+ "eslint-plugin-jsdoc": "^48.2.0",
+ "eslint-plugin-storybook": "^0.8.0",
+ "html-webpack-plugin": "^5.3.1",
+ "jasmine-core": "^5.1.2",
+ "js-beautify": "^1.15.1",
+ "karma": "^6.3.0",
+ "karma-chrome-launcher": "^3.1.0",
+ "karma-firefox-launcher": "^2.1.0",
+ "karma-jasmine": "^5.1.0",
+ "karma-jasmine-html-reporter": "^2.0.0",
+ "karma-jasmine-spec-tags": "^2.0.0",
+ "karma-source-map-support": "^1.4.0",
+ "karma-sourcemap-loader": "^0.4.0",
+ "karma-spec-reporter": "^0.0.36",
+ "karma-webkit-launcher": "^2.1.0",
+ "karma-webpack": "^5.0.0",
+ "playwright": "1.42.0",
+ "prettier-eslint": "^16.3.0",
+ "prettier-eslint-cli": "^8.0.1",
+ "remark-gfm": "^4.0.0",
+ "rollup": "^4.12.0",
+ "rollup-plugin-polyfill-node": "^0.13.0",
+ "rollup-plugin-sourcemaps": "^0.6.3",
+ "source-map-loader": "^5.0.0",
+ "storybook": "^8.0.4",
+ "storybook-addon-pseudo-states": "^3.0.0",
+ "terser-webpack-plugin": "^5.3.10",
+ "ts-loader": "^9.2.5",
+ "typescript": "~5.1.6",
+ "webpack": "^5.75.0",
+ "webpack-cli": "^5.0.1",
+ "webpack-dev-middleware": "^7.0.0"
+ }
+ },
"packages/xliff-to-json-converter": {
"name": "@ni/xliff-to-json-converter",
"version": "1.1.6",
diff --git a/package.json b/package.json
index 2c7aa146f3..7e3e3ea58e 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
"packages/xliff-to-json-converter",
"packages/nimble-tokens",
"packages/nimble-components",
+ "packages/spright-components",
"angular-workspace",
"angular-workspace/projects/ni/nimble-angular",
"packages/nimble-blazor",
diff --git a/packages/spright-components/.eslintrc.js b/packages/spright-components/.eslintrc.js
new file mode 100644
index 0000000000..84d6b3f1e4
--- /dev/null
+++ b/packages/spright-components/.eslintrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+ root: true,
+ extends: '@ni-private/eslint-config-nimble/javascript'
+};
diff --git a/packages/spright-components/.npmignore b/packages/spright-components/.npmignore
new file mode 100644
index 0000000000..b758c14e33
--- /dev/null
+++ b/packages/spright-components/.npmignore
@@ -0,0 +1,9 @@
+*
+!/dist/*.*
+!/dist/esm/**
+/dist/esm/**/tests
+
+# The storybook build ends up making a duplicate
+# typescript build of spright-components inside the dist folder
+# See https://github.com/ni/nimble/issues/568
+/dist/esm/spright-components
diff --git a/packages/spright-components/.prettierignore b/packages/spright-components/.prettierignore
new file mode 100644
index 0000000000..5694e1a195
--- /dev/null
+++ b/packages/spright-components/.prettierignore
@@ -0,0 +1,29 @@
+# Visit and ignore all objects in the root.
+# Then explicitly allow all TypeScript, JavaScript, Markdown, and JSON files in the root, src, and .storybook folders.
+/*
+!*.ts
+!*.js
+!*.md
+!*.mdx
+!*.json
+!src/
+!/.storybook/
+
+/src/**/*.*
+!src/**/*.ts
+!src/**/*.js
+!src/**/*.md
+!src/**/*.mdx
+!src/**/*.json
+
+/.storybook/*.*
+!/.storybook/*.js
+
+# Explicitly exclude the below files and folders
+dist
+node_modules
+package.json
+CHANGELOG.*
+src/utilities/tests/tests/fixture.spec.ts
+src/utilities/tests/fixture.ts
+src/utilities/style/direction.ts
diff --git a/packages/spright-components/.prettierrc.json b/packages/spright-components/.prettierrc.json
new file mode 100644
index 0000000000..d29ec5d8dc
--- /dev/null
+++ b/packages/spright-components/.prettierrc.json
@@ -0,0 +1,7 @@
+{
+ "tabWidth": 4,
+ "useTabs": false,
+ "trailingComma": "none",
+ "singleQuote": true,
+ "endOfLine": "auto"
+}
diff --git a/packages/spright-components/CONTRIBUTING.md b/packages/spright-components/CONTRIBUTING.md
new file mode 100644
index 0000000000..907f304071
--- /dev/null
+++ b/packages/spright-components/CONTRIBUTING.md
@@ -0,0 +1,31 @@
+# Contributing to Spright Components
+
+This package generally uses the same tooling and policies as Nimble components. See the [`nimble-components` CONTRIBUTING doc](../nimble-components/CONTRIBUTING.md) for an overview. For details on whether a component belongs in Nimble or Spright, refer to the [README](./README.md). This document describes ways in which Spright development differs from Nimble.
+
+The following table compares the requirements for components developed in Spright vs Nimble:
+
+| | Approved Spec | Unit Tests | SB\* Visual Tests | SB\* API Docs | SB\* Usage Docs | Approved\*\* VxD | Approved\*\* IxD | Angular/Blazor Support | Proper a11y | Minimal Tech Debt | Mobile Support |
+| -------------------- | :-----------: | :--------: | :---------------: | :-----------: | :-------------: | :--------------: | :--------------: | :--------------------: | :---------: | :---------------: | :------------: |
+| `nimble-components` | 🟢 | 🟢 | 🟢 | 🟢 | 🟢 | 🟢 | 🟢 | 🟢 | 🟢 | 🟢 | 🟡 |
+| `spright-components` | 🟢 | 🟢 | 🟢 | 🟢 | 🟡 | 🟡 | 🟡 | 🟡 | 🟡 | 🟡 | 🟡 |
+
+🟢 = required\
+🟡 = optional\
+\*SB = Storybook\
+\*\*By an interaction and/or visual designer
+
+## Code ownership
+
+Code in Spright packages will be co-owned and reviewed by the Design System team and the contributing team.
+
+Design System team members remain as co-owners to enforce technical quality of implementation. They can (and will) give consulting on feature selection (api design for properties/attributes/methods/events, level of accessibility support for aria/keyboard/mouse, interaction design, visual design), while ultimately deferring to the Spright contributor for what to implement.
+
+Spright component bug fixes and new features should be contributed by the team that needs them.
+
+## Code quality
+
+Code should adhere to NI and Nimble standards for quality and test coverage. Spright components may choose to break from Nimble standards on aspects like visual design or API breadth, but should always have a level of quality suitable for use in production applications.
+
+## Documentation
+
+A Spright component's API must be fully documented in Storybook. It is recommended (but not required) that the documentation include a **Usage Guidance** section that explains what the component should and should not be used for. This could include information about feature gaps, guidance about when to use the component rather than a comparable Nimble component, and context about why the component is in Spright rather than Nimble.
diff --git a/packages/spright-components/README.md b/packages/spright-components/README.md
new file mode 100644
index 0000000000..8684ac6425
--- /dev/null
+++ b/packages/spright-components/README.md
@@ -0,0 +1,9 @@
+
+
+# Spright Components
+
+[](https://www.npmjs.com/package/@ni/spright-components)
+
+The `spright-components` package is intended for components that do not belong in `nimble-components` due to being: ["molecules"](https://atomicdesign.bradfrost.com/chapter-2/), product-specific, data-connected, or not "general utility". The primary component implementation should still be built on Nimble technologies (FAST, native web components, etc).
diff --git a/packages/spright-components/karma.conf.js b/packages/spright-components/karma.conf.js
new file mode 100644
index 0000000000..e84eef68da
--- /dev/null
+++ b/packages/spright-components/karma.conf.js
@@ -0,0 +1,169 @@
+// Based on fast-components configuration:
+// https://github.com/microsoft/fast/blob/6549309c1ed2dea838561d23fea6337ef16d7908/packages/web-components/fast-components/karma.conf.js
+// Coverage from the fast configuration removed due to lack of Webpack 5 support:
+// https://github.com/webpack-contrib/istanbul-instrumenter-loader/issues/110
+
+const playwright = require('playwright');
+
+process.env.WEBKIT_HEADLESS_BIN = playwright.webkit.executablePath();
+process.env.WEBKIT_BIN = playwright.webkit.executablePath();
+process.env.FIREFOX_BIN = playwright.firefox.executablePath();
+process.env.CHROME_BIN = playwright.chromium.executablePath();
+
+const path = require('path');
+const webpack = require('webpack');
+
+const basePath = path.resolve(__dirname);
+const commonChromeFlags = [
+ '--no-default-browser-check',
+ '--no-first-run',
+ '--no-sandbox',
+ '--no-managed-user-acknowledgment-check',
+ '--disable-background-timer-throttling',
+ '--disable-backing-store-limit',
+ '--disable-boot-animation',
+ '--disable-cloud-import',
+ '--disable-contextual-search',
+ '--disable-default-apps',
+ '--disable-extensions',
+ '--disable-infobars',
+ '--disable-translate',
+ '--force-prefers-reduced-motion',
+ '--lang=en-US',
+ '--time-zone-for-testing=America/Chicago'
+];
+
+// Create a webpack environment plugin to use while running tests so that
+// functionality that accesses the environment, such as the TanStack table
+// within the nimble-table, work correctly.
+// Note: Unless we run the tests twice, we have to choose to either run them
+// against the 'production' configuration or the 'development' configuration.
+// Because we expect shipping apps to use the 'production' configuration, we
+// have chosen to run tests aginst that configuration.
+const webpackEnvironmentPlugin = new webpack.EnvironmentPlugin({
+ NODE_ENV: 'production'
+});
+
+module.exports = (config) => {
+ const options = {
+ basePath,
+ browserDisconnectTimeout: 10000,
+ processKillTimeout: 10000,
+ frameworks: [
+ 'source-map-support',
+ 'jasmine',
+ 'webpack',
+ 'jasmine-spec-tags'
+ ],
+ plugins: [
+ 'karma-jasmine',
+ 'karma-jasmine-html-reporter',
+ 'karma-jasmine-spec-tags',
+ 'karma-webpack',
+ 'karma-source-map-support',
+ 'karma-sourcemap-loader',
+ 'karma-chrome-launcher',
+ 'karma-firefox-launcher',
+ 'karma-webkit-launcher'
+ ],
+ files: ['dist/esm/utilities/tests/setup.js'],
+ preprocessors: {
+ 'dist/esm/utilities/tests/setup.js': ['webpack', 'sourcemap']
+ },
+ webpackMiddleware: {
+ // webpack-dev-middleware configuration
+ // i. e.
+ stats: 'errors-only'
+ },
+ webpack: {
+ mode: 'none',
+ resolve: {
+ extensions: ['.js'],
+ modules: ['dist', 'node_modules'],
+ mainFields: ['module', 'main']
+ },
+ devtool: 'inline-source-map',
+ performance: {
+ hints: false
+ },
+ optimization: {
+ nodeEnv: false,
+ usedExports: true,
+ flagIncludedChunks: false,
+ sideEffects: true,
+ concatenateModules: true,
+ splitChunks: {
+ name: false
+ },
+ runtimeChunk: false,
+ checkWasmTypes: false,
+ minimize: false
+ },
+ module: {
+ rules: [
+ {
+ test: /\.js\.map$/,
+ use: ['ignore-loader']
+ },
+ {
+ test: /\.js$/,
+ enforce: 'pre',
+ use: [
+ {
+ loader: 'source-map-loader'
+ }
+ ]
+ }
+ ]
+ },
+ plugins: [webpackEnvironmentPlugin]
+ },
+ mime: {
+ 'text/x-typescript': ['ts']
+ },
+ reporters: ['kjhtml'],
+ browsers: ['ChromeHeadlessOpt'],
+ customLaunchers: {
+ ChromeDebugging: {
+ base: 'Chrome',
+ flags: [...commonChromeFlags, '--remote-debugging-port=9333'],
+ debug: true
+ },
+ ChromeHeadlessOpt: {
+ base: 'ChromeHeadless',
+ flags: [...commonChromeFlags]
+ },
+ FirefoxDebugging: {
+ base: 'Firefox',
+ debug: true
+ },
+ WebkitDebugging: {
+ base: 'Webkit',
+ debug: true
+ }
+ },
+ client: {
+ jasmine: {
+ stopSpecOnExpectationFailure: false
+ },
+ captureConsole: true
+ },
+ logLevel: config.LOG_ERROR, // to disable the WARN 404 for image requests
+ customHeaders: [
+ // Test under the OWASP Basic non-strict CSP Policy
+ // See: https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html#basic-non-strict-csp-policy
+ // Need script-src 'unsafe-inline' to support karma behavior
+ // See: https://github.com/karma-runner/karma/issues/3260
+ // Need style-src 'unsafe-inline' to support FAST
+ // See: https://github.com/microsoft/fast/issues/4510
+ // Need worker-src blob: to support current worker loading pattern
+ {
+ match: '\\.html',
+ name: 'Content-Security-Policy',
+ value: "default-src 'self'; frame-ancestors 'self'; form-action 'self'; object-src 'none'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; worker-src 'self' blob: ;"
+ }
+ ]
+ };
+
+ config.set(options);
+};
diff --git a/packages/spright-components/karma.conf.verbose.js b/packages/spright-components/karma.conf.verbose.js
new file mode 100644
index 0000000000..7a166d4bd5
--- /dev/null
+++ b/packages/spright-components/karma.conf.verbose.js
@@ -0,0 +1,15 @@
+/**
+ * A karma config file that adds verbose reporting to the base configuration
+ */
+
+const originalConfigFunction = require('./karma.conf');
+
+module.exports = (config) => {
+ originalConfigFunction(config);
+ const options = {
+ plugins: [...config.plugins, 'karma-spec-reporter'],
+ reporters: [...config.reporters, 'spec']
+ };
+
+ config.set(options);
+};
diff --git a/packages/spright-components/package.json b/packages/spright-components/package.json
new file mode 100644
index 0000000000..760505e370
--- /dev/null
+++ b/packages/spright-components/package.json
@@ -0,0 +1,129 @@
+{
+ "name": "@ni/spright-components",
+ "version": "0.0.1",
+ "description": "NI Spright Components",
+ "scripts": {
+ "build": "npm run build-components && npm run bundle-components",
+ "lint": "npm run eslint && npm run prettier",
+ "format": "npm run eslint-fix && npm run prettier-fix",
+ "eslint": "eslint .",
+ "eslint-fix": "eslint src --fix",
+ "prettier": "prettier-eslint \"**/*.*\" --list-different --prettier-ignore",
+ "prettier-fix": "prettier-eslint \"**/*.*\" --write --prettier-ignore",
+ "pack": "npm pack",
+ "invoke-publish": "npm publish",
+ "storybook": "storybook dev -p 6006",
+ "build-storybook": "storybook build -o dist/storybook --webpack-stats-json",
+ "storybook-open-webkit": "playwright wk http://localhost:6006",
+ "build-components": "tsc -p ./tsconfig.json",
+ "build-components:watch": "tsc -p ./tsconfig.json -w",
+ "bundle-components": "rollup --bundleConfigAsCjs --config",
+ "tdd": "npm run build-components && npm run test-chrome",
+ "tdd:watch": "npm run build-components:watch & npm run test-chrome:watch",
+ "tdd-firefox": "npm run build-components && npm run test-firefox",
+ "tdd-firefox:watch": "npm run build-components:watch & npm run test-firefox:watch",
+ "tdd-webkit": "npm run build-components && npm run test-webkit",
+ "tdd-webkit:watch": "npm run build-components:watch & npm run test-webkit:watch",
+ "test-chrome:debugger": "karma start karma.conf.js --browsers=ChromeDebugging --skip-tags SkipChrome",
+ "test-chrome:verbose": "karma start karma.conf.verbose.js --browsers=ChromeHeadlessOpt --single-run --skip-tags SkipChrome",
+ "test-chrome:watch": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --skip-tags SkipChrome --watch-extensions js",
+ "test-chrome": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --single-run --skip-tags SkipChrome",
+ "test-firefox:debugger": "karma start karma.conf.js --browsers=FirefoxDebugging --skip-tags SkipFirefox",
+ "test-firefox:verbose": "karma start karma.conf.verbose.js --browsers=FirefoxHeadless --single-run --skip-tags SkipFirefox",
+ "test-firefox:watch": "karma start karma.conf.js --browsers=FirefoxHeadless --skip-tags SkipFirefox --watch-extensions js",
+ "test-firefox": "karma start karma.conf.js --browsers=FirefoxHeadless --single-run --skip-tags SkipFirefox",
+ "test-webkit:debugger": "karma start karma.conf.js --browsers=WebkitDebugging --skip-tags SkipWebkit",
+ "test-webkit:verbose": "karma start karma.conf.verbose.js --browsers=WebkitHeadless --single-run --skip-tags SkipWebkit",
+ "test-webkit:watch": "karma start karma.conf.js --browsers=WebkitHeadless --skip-tags SkipWebkit --watch-extensions js",
+ "test-webkit": "karma start karma.conf.js --browsers=WebkitHeadless --single-run --skip-tags SkipWebkit",
+ "test": "npm run test-chrome:verbose && npm run test-firefox:verbose"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/ni/nimble.git"
+ },
+ "publishConfig": {
+ "access": "public"
+ },
+ "author": {
+ "name": "National Instruments"
+ },
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/ni/nimble/issues"
+ },
+ "homepage": "https://github.com/ni/nimble#readme",
+ "dependencies": {
+ "@microsoft/fast-colors": "^5.3.1",
+ "@microsoft/fast-element": "^1.12.0",
+ "@microsoft/fast-foundation": "^2.49.6",
+ "@microsoft/fast-web-utilities": "^6.0.0",
+ "@ni/nimble-components": "^25.0.0",
+ "@ni/nimble-tokens": "^6.13.2",
+ "tslib": "^2.2.0"
+ },
+ "devDependencies": {
+ "@babel/cli": "^7.13.16",
+ "@babel/core": "^7.20.12",
+ "@chromatic-com/storybook": "^1.2.25",
+ "@microsoft/fast-react-wrapper": "^0.3.22",
+ "@ni/jasmine-parameterized": "^0.2.4",
+ "@ni-private/eslint-config-nimble": "^1.0.0",
+ "@rollup/plugin-commonjs": "^25.0.7",
+ "@rollup/plugin-json": "^6.0.0",
+ "@rollup/plugin-node-resolve": "^15.0.1",
+ "@rollup/plugin-replace": "^5.0.1",
+ "@rollup/plugin-terser": "^0.4.0",
+ "@storybook/addon-a11y": "^8.0.4",
+ "@storybook/addon-actions": "^8.0.4",
+ "@storybook/addon-docs": "^8.0.4",
+ "@storybook/addon-essentials": "^8.0.4",
+ "@storybook/addon-interactions": "^8.0.4",
+ "@storybook/addon-links": "^8.0.4",
+ "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+ "@storybook/cli": "^8.0.4",
+ "@storybook/csf": "^0.1.2",
+ "@storybook/html": "^8.0.4",
+ "@storybook/html-webpack5": "^8.0.4",
+ "@storybook/manager-api": "^8.0.4",
+ "@storybook/theming": "^8.0.4",
+ "@types/jasmine": "^5.1.4",
+ "@types/webpack-env": "^1.15.2",
+ "babel-loader": "^9.1.2",
+ "circular-dependency-plugin": "^5.2.0",
+ "css-loader": "^6.7.3",
+ "dotenv-webpack": "^8.0.1",
+ "eslint-plugin-jsdoc": "^48.2.0",
+ "eslint-plugin-storybook": "^0.8.0",
+ "html-webpack-plugin": "^5.3.1",
+ "jasmine-core": "^5.1.2",
+ "js-beautify": "^1.15.1",
+ "karma": "^6.3.0",
+ "karma-chrome-launcher": "^3.1.0",
+ "karma-firefox-launcher": "^2.1.0",
+ "karma-jasmine": "^5.1.0",
+ "karma-jasmine-html-reporter": "^2.0.0",
+ "karma-jasmine-spec-tags": "^2.0.0",
+ "karma-source-map-support": "^1.4.0",
+ "karma-sourcemap-loader": "^0.4.0",
+ "karma-spec-reporter": "^0.0.36",
+ "karma-webkit-launcher": "^2.1.0",
+ "karma-webpack": "^5.0.0",
+ "playwright": "1.42.0",
+ "prettier-eslint": "^16.3.0",
+ "prettier-eslint-cli": "^8.0.1",
+ "remark-gfm": "^4.0.0",
+ "rollup": "^4.12.0",
+ "rollup-plugin-polyfill-node": "^0.13.0",
+ "rollup-plugin-sourcemaps": "^0.6.3",
+ "source-map-loader": "^5.0.0",
+ "storybook": "^8.0.4",
+ "storybook-addon-pseudo-states": "^3.0.0",
+ "terser-webpack-plugin": "^5.3.10",
+ "ts-loader": "^9.2.5",
+ "typescript": "~5.1.6",
+ "webpack": "^5.75.0",
+ "webpack-cli": "^5.0.1",
+ "webpack-dev-middleware": "^7.0.0"
+ }
+}
diff --git a/packages/spright-components/rollup.config.js b/packages/spright-components/rollup.config.js
new file mode 100644
index 0000000000..7953514127
--- /dev/null
+++ b/packages/spright-components/rollup.config.js
@@ -0,0 +1,62 @@
+import commonJS from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import sourcemaps from 'rollup-plugin-sourcemaps';
+import terser from '@rollup/plugin-terser';
+import replace from '@rollup/plugin-replace';
+import json from '@rollup/plugin-json';
+import nodePolyfills from 'rollup-plugin-polyfill-node';
+
+const umdDevelopmentPlugin = () =>
+ replace({
+ 'process.env.NODE_ENV': JSON.stringify('development'),
+ preventAssignment: true
+ });
+
+const umdProductionPlugin = () =>
+ replace({
+ 'process.env.NODE_ENV': JSON.stringify('production'),
+ preventAssignment: true
+ });
+
+// eslint-disable-next-line import/no-default-export
+export default [
+ {
+ input: 'dist/esm/all-components.js',
+ output: {
+ file: 'dist/all-components-bundle.js',
+ format: 'iife',
+ sourcemap: true
+ },
+ plugins: [
+ umdDevelopmentPlugin(),
+ nodePolyfills(),
+ sourcemaps(),
+ resolve(),
+ commonJS(),
+ json()
+ ]
+ },
+ {
+ input: 'dist/esm/all-components.js',
+ output: {
+ file: 'dist/all-components-bundle.min.js',
+ format: 'iife',
+ sourcemap: true,
+ plugins: [
+ terser({
+ output: {
+ semicolons: false
+ }
+ })
+ ]
+ },
+ plugins: [
+ umdProductionPlugin(),
+ nodePolyfills(),
+ sourcemaps(),
+ resolve(),
+ commonJS(),
+ json()
+ ]
+ }
+];
diff --git a/packages/spright-components/src/.eslintrc.js b/packages/spright-components/src/.eslintrc.js
new file mode 100644
index 0000000000..a8973adba3
--- /dev/null
+++ b/packages/spright-components/src/.eslintrc.js
@@ -0,0 +1,9 @@
+module.exports = {
+ root: true,
+ extends: '@ni-private/eslint-config-nimble/typescript',
+ parserOptions: {
+ project: '../tsconfig.json',
+ tsconfigRootDir: __dirname
+ },
+ ignorePatterns: ['.eslintrc.js'] // Avoids eslint error: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file
+};
diff --git a/packages/spright-components/src/accordion/index.ts b/packages/spright-components/src/accordion/index.ts
new file mode 100644
index 0000000000..a328f8dd88
--- /dev/null
+++ b/packages/spright-components/src/accordion/index.ts
@@ -0,0 +1,27 @@
+import {
+ DesignSystem,
+ Accordion as FoundationAccordion
+} from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'spright-accordion': Accordion;
+ }
+}
+
+/**
+ * A nimble-styled accordion
+ */
+export class Accordion extends FoundationAccordion {}
+
+const sprightAccordion = Accordion.compose({
+ baseName: 'accordion',
+ baseClass: FoundationAccordion,
+ template,
+ styles
+});
+
+DesignSystem.getOrCreate().withPrefix('spright').register(sprightAccordion());
+export const accordionTag = 'spright-accordion';
diff --git a/packages/spright-components/src/accordion/styles.ts b/packages/spright-components/src/accordion/styles.ts
new file mode 100644
index 0000000000..4d9b01d426
--- /dev/null
+++ b/packages/spright-components/src/accordion/styles.ts
@@ -0,0 +1,35 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import {
+ bodyFont,
+ bodyFontColor,
+ borderColor,
+ borderWidth,
+ sectionBackgroundColor,
+ standardPadding,
+ titleFont,
+ titleFontColor
+} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+
+export const styles = css`
+ ${display('flex')}
+
+ :host {
+ flex-direction: column;
+ gap: ${standardPadding};
+ padding: ${standardPadding};
+ border: ${borderWidth} solid ${borderColor};
+ font: ${bodyFont};
+ color: ${bodyFontColor};
+ background-color: ${sectionBackgroundColor};
+ }
+
+ section {
+ display: contents;
+ }
+
+ slot[name='title'] {
+ font: ${titleFont};
+ color: ${titleFontColor};
+ }
+`;
diff --git a/packages/spright-components/src/accordion/template.ts b/packages/spright-components/src/accordion/template.ts
new file mode 100644
index 0000000000..0f77f9bff2
--- /dev/null
+++ b/packages/spright-components/src/accordion/template.ts
@@ -0,0 +1,9 @@
+import { html } from '@microsoft/fast-element';
+import type { Accordion } from '.';
+
+export const template = html`
+
+`;
diff --git a/packages/spright-components/src/accordion/tests/accordion.spec.ts b/packages/spright-components/src/accordion/tests/accordion.spec.ts
new file mode 100644
index 0000000000..fd00f5475b
--- /dev/null
+++ b/packages/spright-components/src/accordion/tests/accordion.spec.ts
@@ -0,0 +1,13 @@
+import { Accordion, accordionTag } from '..';
+
+describe('Accordion', () => {
+ it('should export its tag', () => {
+ expect(accordionTag).toBe('spright-accordion');
+ });
+
+ it('can construct an element instance', () => {
+ expect(document.createElement('spright-accordion')).toBeInstanceOf(
+ Accordion
+ );
+ });
+});
diff --git a/packages/spright-components/src/all-components.ts b/packages/spright-components/src/all-components.ts
new file mode 100644
index 0000000000..aad1f43fac
--- /dev/null
+++ b/packages/spright-components/src/all-components.ts
@@ -0,0 +1,7 @@
+/**
+ * Import of all the web components available in Spright.
+ * Production applications are encouraged to import only components
+ * that are required instead of leveraging this file.
+ */
+
+import './accordion';
diff --git a/packages/spright-components/src/utilities/tests/setup-configuration.ts b/packages/spright-components/src/utilities/tests/setup-configuration.ts
new file mode 100644
index 0000000000..a51a52c496
--- /dev/null
+++ b/packages/spright-components/src/utilities/tests/setup-configuration.ts
@@ -0,0 +1,7 @@
+// Scripts that should run at the very beginning of jasmine tests
+
+// Elevate console errors and warnings to test failures
+// eslint-disable-next-line no-console, @typescript-eslint/no-explicit-any
+console.error = (data: any): void => fail(data);
+// eslint-disable-next-line no-console, @typescript-eslint/no-explicit-any
+console.warn = (data: any): void => fail(data);
diff --git a/packages/spright-components/src/utilities/tests/setup.ts b/packages/spright-components/src/utilities/tests/setup.ts
new file mode 100644
index 0000000000..017668edf4
--- /dev/null
+++ b/packages/spright-components/src/utilities/tests/setup.ts
@@ -0,0 +1,12 @@
+// Import all the test files to run in browser
+
+function importAll(r: __WebpackModuleApi.RequireContext): void {
+ r.keys().forEach(r);
+}
+
+// browser test configuration setup
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+require('./setup-configuration.js');
+
+// all browser test scripts
+importAll(require.context('../../', true, /\.spec\.js$/));
diff --git a/packages/spright-components/tsconfig.json b/packages/spright-components/tsconfig.json
new file mode 100644
index 0000000000..83bbfbf02d
--- /dev/null
+++ b/packages/spright-components/tsconfig.json
@@ -0,0 +1,29 @@
+{
+ "compilerOptions": {
+ "declaration": true,
+ "esModuleInterop": true,
+ "moduleResolution": "node",
+ "outDir": "dist/esm",
+ "strict": true,
+ "experimentalDecorators": true,
+ "target": "ES2020",
+ "module": "ES2020",
+ "allowJs": true,
+ "importHelpers": true,
+ "resolveJsonModule": true,
+ "sourceMap": true,
+ "inlineSources": true,
+ "lib": ["DOM", "ES2015", "ES2016.Array.Include", "ES2017.Object"],
+ // Whitelist imported @types instead of using them all
+ "types": ["jasmine", "webpack-env"],
+ // Require type only imports where possible
+ // so imports with side-effects are explicit
+ "importsNotUsedAsValues": "error",
+ "ignoreDeprecations": "5.0",
+ "noImplicitOverride": true,
+ "noUncheckedIndexedAccess": true,
+ "noPropertyAccessFromIndexSignature": false,
+ "jsx": "preserve"
+ },
+ "include": ["src"]
+}
From 3b815365a28b0e51ddde53fa35bb843158d6036e Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Thu, 18 Apr 2024 14:04:16 -0500
Subject: [PATCH 02/15] Lint fixes
---
packages/spright-components/karma.conf.js | 2 +-
.../spright-components/karma.conf.verbose.js | 2 +-
packages/spright-components/rollup.config.js | 18 ++++++++----------
3 files changed, 10 insertions(+), 12 deletions(-)
diff --git a/packages/spright-components/karma.conf.js b/packages/spright-components/karma.conf.js
index e84eef68da..d3878a5406 100644
--- a/packages/spright-components/karma.conf.js
+++ b/packages/spright-components/karma.conf.js
@@ -44,7 +44,7 @@ const webpackEnvironmentPlugin = new webpack.EnvironmentPlugin({
NODE_ENV: 'production'
});
-module.exports = (config) => {
+module.exports = config => {
const options = {
basePath,
browserDisconnectTimeout: 10000,
diff --git a/packages/spright-components/karma.conf.verbose.js b/packages/spright-components/karma.conf.verbose.js
index 7a166d4bd5..c147a108bd 100644
--- a/packages/spright-components/karma.conf.verbose.js
+++ b/packages/spright-components/karma.conf.verbose.js
@@ -4,7 +4,7 @@
const originalConfigFunction = require('./karma.conf');
-module.exports = (config) => {
+module.exports = config => {
originalConfigFunction(config);
const options = {
plugins: [...config.plugins, 'karma-spec-reporter'],
diff --git a/packages/spright-components/rollup.config.js b/packages/spright-components/rollup.config.js
index 7953514127..65398fe9b9 100644
--- a/packages/spright-components/rollup.config.js
+++ b/packages/spright-components/rollup.config.js
@@ -6,17 +6,15 @@ import replace from '@rollup/plugin-replace';
import json from '@rollup/plugin-json';
import nodePolyfills from 'rollup-plugin-polyfill-node';
-const umdDevelopmentPlugin = () =>
- replace({
- 'process.env.NODE_ENV': JSON.stringify('development'),
- preventAssignment: true
- });
+const umdDevelopmentPlugin = () => replace({
+ 'process.env.NODE_ENV': JSON.stringify('development'),
+ preventAssignment: true
+});
-const umdProductionPlugin = () =>
- replace({
- 'process.env.NODE_ENV': JSON.stringify('production'),
- preventAssignment: true
- });
+const umdProductionPlugin = () => replace({
+ 'process.env.NODE_ENV': JSON.stringify('production'),
+ preventAssignment: true
+});
// eslint-disable-next-line import/no-default-export
export default [
From 0fc07a799cba682a8d319c1bdf03370a4c195f86 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Thu, 18 Apr 2024 16:02:03 -0500
Subject: [PATCH 03/15] Replace accordion with demo component
---
.../spright-components/src/accordion/index.ts | 27 --------------
.../src/accordion/styles.ts | 35 -------------------
.../src/accordion/template.ts | 9 -----
.../src/accordion/tests/accordion.spec.ts | 13 -------
.../spright-components/src/all-components.ts | 2 +-
packages/spright-components/src/demo/index.ts | 28 +++++++++++++++
.../spright-components/src/demo/styles.ts | 33 +++++++++++++++++
.../spright-components/src/demo/template.ts | 22 ++++++++++++
.../src/demo/tests/demo.spec.ts | 11 ++++++
9 files changed, 95 insertions(+), 85 deletions(-)
delete mode 100644 packages/spright-components/src/accordion/index.ts
delete mode 100644 packages/spright-components/src/accordion/styles.ts
delete mode 100644 packages/spright-components/src/accordion/template.ts
delete mode 100644 packages/spright-components/src/accordion/tests/accordion.spec.ts
create mode 100644 packages/spright-components/src/demo/index.ts
create mode 100644 packages/spright-components/src/demo/styles.ts
create mode 100644 packages/spright-components/src/demo/template.ts
create mode 100644 packages/spright-components/src/demo/tests/demo.spec.ts
diff --git a/packages/spright-components/src/accordion/index.ts b/packages/spright-components/src/accordion/index.ts
deleted file mode 100644
index a328f8dd88..0000000000
--- a/packages/spright-components/src/accordion/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import {
- DesignSystem,
- Accordion as FoundationAccordion
-} from '@microsoft/fast-foundation';
-import { styles } from './styles';
-import { template } from './template';
-
-declare global {
- interface HTMLElementTagNameMap {
- 'spright-accordion': Accordion;
- }
-}
-
-/**
- * A nimble-styled accordion
- */
-export class Accordion extends FoundationAccordion {}
-
-const sprightAccordion = Accordion.compose({
- baseName: 'accordion',
- baseClass: FoundationAccordion,
- template,
- styles
-});
-
-DesignSystem.getOrCreate().withPrefix('spright').register(sprightAccordion());
-export const accordionTag = 'spright-accordion';
diff --git a/packages/spright-components/src/accordion/styles.ts b/packages/spright-components/src/accordion/styles.ts
deleted file mode 100644
index 4d9b01d426..0000000000
--- a/packages/spright-components/src/accordion/styles.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-import {
- bodyFont,
- bodyFontColor,
- borderColor,
- borderWidth,
- sectionBackgroundColor,
- standardPadding,
- titleFont,
- titleFontColor
-} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
-
-export const styles = css`
- ${display('flex')}
-
- :host {
- flex-direction: column;
- gap: ${standardPadding};
- padding: ${standardPadding};
- border: ${borderWidth} solid ${borderColor};
- font: ${bodyFont};
- color: ${bodyFontColor};
- background-color: ${sectionBackgroundColor};
- }
-
- section {
- display: contents;
- }
-
- slot[name='title'] {
- font: ${titleFont};
- color: ${titleFontColor};
- }
-`;
diff --git a/packages/spright-components/src/accordion/template.ts b/packages/spright-components/src/accordion/template.ts
deleted file mode 100644
index 0f77f9bff2..0000000000
--- a/packages/spright-components/src/accordion/template.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { html } from '@microsoft/fast-element';
-import type { Accordion } from '.';
-
-export const template = html`
-
-`;
diff --git a/packages/spright-components/src/accordion/tests/accordion.spec.ts b/packages/spright-components/src/accordion/tests/accordion.spec.ts
deleted file mode 100644
index fd00f5475b..0000000000
--- a/packages/spright-components/src/accordion/tests/accordion.spec.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Accordion, accordionTag } from '..';
-
-describe('Accordion', () => {
- it('should export its tag', () => {
- expect(accordionTag).toBe('spright-accordion');
- });
-
- it('can construct an element instance', () => {
- expect(document.createElement('spright-accordion')).toBeInstanceOf(
- Accordion
- );
- });
-});
diff --git a/packages/spright-components/src/all-components.ts b/packages/spright-components/src/all-components.ts
index aad1f43fac..e668877335 100644
--- a/packages/spright-components/src/all-components.ts
+++ b/packages/spright-components/src/all-components.ts
@@ -4,4 +4,4 @@
* that are required instead of leveraging this file.
*/
-import './accordion';
+import './demo';
diff --git a/packages/spright-components/src/demo/index.ts b/packages/spright-components/src/demo/index.ts
new file mode 100644
index 0000000000..d5a8310e66
--- /dev/null
+++ b/packages/spright-components/src/demo/index.ts
@@ -0,0 +1,28 @@
+import {
+ DesignSystem,
+ Avatar as FoundationAvatar
+} from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'spright-demo': Demo;
+ }
+}
+
+/**
+ * A Spright demo component (not for production use)
+ */
+export class Demo extends FoundationAvatar {}
+
+const sprightDemo = Demo.compose({
+ baseName: 'demo',
+ baseClass: FoundationAvatar,
+ // If FAST's template for this component is sufficient, you can just import and use that instead of defining your own.
+ template,
+ styles
+});
+
+DesignSystem.getOrCreate().withPrefix('spright').register(sprightDemo());
+export const demoTag = 'spright-demo';
diff --git a/packages/spright-components/src/demo/styles.ts b/packages/spright-components/src/demo/styles.ts
new file mode 100644
index 0000000000..c419684dfe
--- /dev/null
+++ b/packages/spright-components/src/demo/styles.ts
@@ -0,0 +1,33 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { iconColor } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+
+export const styles = css`
+ ${display('flex')}
+
+ :host {
+ position: relative;
+ height: 32px;
+ max-width: 32px;
+ ${iconColor.cssCustomProperty}: white;
+ }
+
+ .backplate {
+ position: relative;
+ display: flex;
+ }
+
+ .circle {
+ border-radius: 100%;
+ min-width: 100%;
+ overflow: hidden;
+ }
+
+ .link {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ min-width: 100%;
+ }
+`;
diff --git a/packages/spright-components/src/demo/template.ts b/packages/spright-components/src/demo/template.ts
new file mode 100644
index 0000000000..05633078bd
--- /dev/null
+++ b/packages/spright-components/src/demo/template.ts
@@ -0,0 +1,22 @@
+import { html } from '@microsoft/fast-element';
+import { iconUserTag } from '@ni/nimble-components/dist/esm/icons/user';
+import type { Demo } from '.';
+
+export const template = html`
+
+
+`;
diff --git a/packages/spright-components/src/demo/tests/demo.spec.ts b/packages/spright-components/src/demo/tests/demo.spec.ts
new file mode 100644
index 0000000000..9457fdf2f0
--- /dev/null
+++ b/packages/spright-components/src/demo/tests/demo.spec.ts
@@ -0,0 +1,11 @@
+import { Demo, demoTag } from '..';
+
+describe('Demo', () => {
+ it('should export its tag', () => {
+ expect(demoTag).toBe('spright-demo');
+ });
+
+ it('can construct an element instance', () => {
+ expect(document.createElement('spright-demo')).toBeInstanceOf(Demo);
+ });
+});
From 0adc270fc0625c82c508f57f83775eed1a15bdbb Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Thu, 18 Apr 2024 16:06:30 -0500
Subject: [PATCH 04/15] Remove webpack environment from karma config
---
packages/spright-components/karma.conf.js | 15 +--------------
1 file changed, 1 insertion(+), 14 deletions(-)
diff --git a/packages/spright-components/karma.conf.js b/packages/spright-components/karma.conf.js
index d3878a5406..22085b944d 100644
--- a/packages/spright-components/karma.conf.js
+++ b/packages/spright-components/karma.conf.js
@@ -11,7 +11,6 @@ process.env.FIREFOX_BIN = playwright.firefox.executablePath();
process.env.CHROME_BIN = playwright.chromium.executablePath();
const path = require('path');
-const webpack = require('webpack');
const basePath = path.resolve(__dirname);
const commonChromeFlags = [
@@ -33,17 +32,6 @@ const commonChromeFlags = [
'--time-zone-for-testing=America/Chicago'
];
-// Create a webpack environment plugin to use while running tests so that
-// functionality that accesses the environment, such as the TanStack table
-// within the nimble-table, work correctly.
-// Note: Unless we run the tests twice, we have to choose to either run them
-// against the 'production' configuration or the 'development' configuration.
-// Because we expect shipping apps to use the 'production' configuration, we
-// have chosen to run tests aginst that configuration.
-const webpackEnvironmentPlugin = new webpack.EnvironmentPlugin({
- NODE_ENV: 'production'
-});
-
module.exports = config => {
const options = {
basePath,
@@ -115,8 +103,7 @@ module.exports = config => {
]
}
]
- },
- plugins: [webpackEnvironmentPlugin]
+ }
},
mime: {
'text/x-typescript': ['ts']
From 023343b86df0ec2b164394c7957ca8f0ae79b950 Mon Sep 17 00:00:00 2001
From: m-akinc <7282195+m-akinc@users.noreply.github.com>
Date: Fri, 19 Apr 2024 11:16:21 -0500
Subject: [PATCH 05/15] Apply suggestions from code review
Co-authored-by: Jesse Attas
---
packages/spright-components/CONTRIBUTING.md | 4 ++--
packages/spright-components/README.md | 4 +++-
2 files changed, 5 insertions(+), 3 deletions(-)
diff --git a/packages/spright-components/CONTRIBUTING.md b/packages/spright-components/CONTRIBUTING.md
index 907f304071..8aabcd6976 100644
--- a/packages/spright-components/CONTRIBUTING.md
+++ b/packages/spright-components/CONTRIBUTING.md
@@ -18,9 +18,9 @@ The following table compares the requirements for components developed in Sprigh
Code in Spright packages will be co-owned and reviewed by the Design System team and the contributing team.
-Design System team members remain as co-owners to enforce technical quality of implementation. They can (and will) give consulting on feature selection (api design for properties/attributes/methods/events, level of accessibility support for aria/keyboard/mouse, interaction design, visual design), while ultimately deferring to the Spright contributor for what to implement.
+Design System team members remain as co-owners to enforce technical quality of implementation. They can (and will) give consulting on feature selection (API design for properties/attributes/methods/events, level of accessibility support for ARIA/keyboard/mouse, interaction design, visual design), while ultimately deferring to the Spright contributor for what to implement.
-Spright component bug fixes and new features should be contributed by the team that needs them.
+Spright component bug fixes and new features should be contributed by the team that needs them. The Design System team will maintain infrastructure like pipelines and dependencies but may request assistance from contributing teams for component-specific issues.
## Code quality
diff --git a/packages/spright-components/README.md b/packages/spright-components/README.md
index 8684ac6425..af9f146476 100644
--- a/packages/spright-components/README.md
+++ b/packages/spright-components/README.md
@@ -6,4 +6,6 @@
[](https://www.npmjs.com/package/@ni/spright-components)
-The `spright-components` package is intended for components that do not belong in `nimble-components` due to being: ["molecules"](https://atomicdesign.bradfrost.com/chapter-2/), product-specific, data-connected, or not "general utility". The primary component implementation should still be built on Nimble technologies (FAST, native web components, etc).
+NI-styled web components following [Nimble Design System](https://nimble.ni.dev) patterns but not part of the core design system.
+
+The `spright-components` package is intended for components that do not belong in [`nimble-components`](/packages/nimble-components) due to being: ["molecules"](https://atomicdesign.bradfrost.com/chapter-2/), product-specific, data-connected, or not "general utility". The primary component implementations are built on Nimble technologies (FAST, native web components, etc).
From ca61898b213a994f4aff2de81d6d79b3b1c53531 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Fri, 19 Apr 2024 11:21:43 -0500
Subject: [PATCH 06/15] Add empty changelog files
---
packages/spright-components/CHANGELOG.json | 0
packages/spright-components/CHANGELOG.md | 0
2 files changed, 0 insertions(+), 0 deletions(-)
create mode 100644 packages/spright-components/CHANGELOG.json
create mode 100644 packages/spright-components/CHANGELOG.md
diff --git a/packages/spright-components/CHANGELOG.json b/packages/spright-components/CHANGELOG.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/spright-components/CHANGELOG.md b/packages/spright-components/CHANGELOG.md
new file mode 100644
index 0000000000..e69de29bb2
From 1904c0efe1ca6f51f4541aa758ecf06383d61970 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Fri, 19 Apr 2024 11:38:30 -0500
Subject: [PATCH 07/15] Feedback
---
...-08e968ac-291f-4c66-949e-115ca77deef2.json | 4 ++--
packages/spright-components/CONTRIBUTING.md | 20 +++++++++++++------
2 files changed, 16 insertions(+), 8 deletions(-)
diff --git a/change/@ni-spright-components-08e968ac-291f-4c66-949e-115ca77deef2.json b/change/@ni-spright-components-08e968ac-291f-4c66-949e-115ca77deef2.json
index 919b2d6941..6ff20a268c 100644
--- a/change/@ni-spright-components-08e968ac-291f-4c66-949e-115ca77deef2.json
+++ b/change/@ni-spright-components-08e968ac-291f-4c66-949e-115ca77deef2.json
@@ -1,7 +1,7 @@
{
- "type": "none",
+ "type": "patch",
"comment": "Create initial spright-components package",
"packageName": "@ni/spright-components",
"email": "7282195+m-akinc@users.noreply.github.com",
- "dependentChangeType": "none"
+ "dependentChangeType": "patch"
}
diff --git a/packages/spright-components/CONTRIBUTING.md b/packages/spright-components/CONTRIBUTING.md
index 8aabcd6976..dfcab84312 100644
--- a/packages/spright-components/CONTRIBUTING.md
+++ b/packages/spright-components/CONTRIBUTING.md
@@ -4,15 +4,23 @@ This package generally uses the same tooling and policies as Nimble components.
The following table compares the requirements for components developed in Spright vs Nimble:
-| | Approved Spec | Unit Tests | SB\* Visual Tests | SB\* API Docs | SB\* Usage Docs | Approved\*\* VxD | Approved\*\* IxD | Angular/Blazor Support | Proper a11y | Minimal Tech Debt | Mobile Support |
-| -------------------- | :-----------: | :--------: | :---------------: | :-----------: | :-------------: | :--------------: | :--------------: | :--------------------: | :---------: | :---------------: | :------------: |
-| `nimble-components` | 🟢 | 🟢 | 🟢 | 🟢 | 🟢 | 🟢 | 🟢 | 🟢 | 🟢 | 🟢 | 🟡 |
-| `spright-components` | 🟢 | 🟢 | 🟢 | 🟢 | 🟡 | 🟡 | 🟡 | 🟡 | 🟡 | 🟡 | 🟡 |
+| | `nimble-components` | `spright-components` |
+| :--------------------: | :-----------------: | :------------------: |
+| Approved spec | 🟢 | 🟢 |
+| Unit tests | 🟢 | 🟢 |
+| Storybook visual tests | 🟢 | 🟢 |
+| Storybook API docs | 🟢 | 🟢 |
+| Storybook usage docs | 🟢 | 🟡 |
+| Approved VxD\* | 🟢 | 🟡 |
+| Approved IxD\* | 🟢 | 🟡 |
+| Angular/Blazor support | 🟢 | 🟡 |
+| Proper a11y | 🟢 | 🟡 |
+| Minimal tech debt | 🟢 | 🟡 |
+| Mobile support | 🟡 | 🟡 |
🟢 = required\
🟡 = optional\
-\*SB = Storybook\
-\*\*By an interaction and/or visual designer
+\*By an interaction and/or visual designer
## Code ownership
From 71ea9eb7baab2dc2a34c96c3ca65cb9443f238aa Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Fri, 19 Apr 2024 16:13:20 -0500
Subject: [PATCH 08/15] Address feedback
---
packages/spright-components/CHANGELOG.json | 0
packages/spright-components/CHANGELOG.md | 0
.../spright-components/src/all-components.ts | 6 ++--
packages/spright-components/src/demo/index.ts | 28 ----------------
.../spright-components/src/demo/styles.ts | 33 -------------------
.../spright-components/src/demo/template.ts | 22 -------------
.../src/demo/tests/demo.spec.ts | 11 -------
.../spright-components/src/rectangle/index.ts | 23 +++++++++++++
.../src/rectangle/styles.ts | 21 ++++++++++++
.../src/rectangle/template.ts | 3 ++
.../src/rectangle/tests/rectangle.spec.ts | 13 ++++++++
11 files changed, 64 insertions(+), 96 deletions(-)
delete mode 100644 packages/spright-components/CHANGELOG.json
delete mode 100644 packages/spright-components/CHANGELOG.md
delete mode 100644 packages/spright-components/src/demo/index.ts
delete mode 100644 packages/spright-components/src/demo/styles.ts
delete mode 100644 packages/spright-components/src/demo/template.ts
delete mode 100644 packages/spright-components/src/demo/tests/demo.spec.ts
create mode 100644 packages/spright-components/src/rectangle/index.ts
create mode 100644 packages/spright-components/src/rectangle/styles.ts
create mode 100644 packages/spright-components/src/rectangle/template.ts
create mode 100644 packages/spright-components/src/rectangle/tests/rectangle.spec.ts
diff --git a/packages/spright-components/CHANGELOG.json b/packages/spright-components/CHANGELOG.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/spright-components/CHANGELOG.md b/packages/spright-components/CHANGELOG.md
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/spright-components/src/all-components.ts b/packages/spright-components/src/all-components.ts
index e668877335..e89c77cf49 100644
--- a/packages/spright-components/src/all-components.ts
+++ b/packages/spright-components/src/all-components.ts
@@ -1,7 +1,9 @@
/**
- * Import of all the web components available in Spright.
+ * Import of all the web components available in Spright AND Nimble.
* Production applications are encouraged to import only components
* that are required instead of leveraging this file.
*/
-import './demo';
+import './rectangle';
+
+import '@ni/nimble-components/all-components';
diff --git a/packages/spright-components/src/demo/index.ts b/packages/spright-components/src/demo/index.ts
deleted file mode 100644
index d5a8310e66..0000000000
--- a/packages/spright-components/src/demo/index.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import {
- DesignSystem,
- Avatar as FoundationAvatar
-} from '@microsoft/fast-foundation';
-import { styles } from './styles';
-import { template } from './template';
-
-declare global {
- interface HTMLElementTagNameMap {
- 'spright-demo': Demo;
- }
-}
-
-/**
- * A Spright demo component (not for production use)
- */
-export class Demo extends FoundationAvatar {}
-
-const sprightDemo = Demo.compose({
- baseName: 'demo',
- baseClass: FoundationAvatar,
- // If FAST's template for this component is sufficient, you can just import and use that instead of defining your own.
- template,
- styles
-});
-
-DesignSystem.getOrCreate().withPrefix('spright').register(sprightDemo());
-export const demoTag = 'spright-demo';
diff --git a/packages/spright-components/src/demo/styles.ts b/packages/spright-components/src/demo/styles.ts
deleted file mode 100644
index c419684dfe..0000000000
--- a/packages/spright-components/src/demo/styles.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-import { iconColor } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
-
-export const styles = css`
- ${display('flex')}
-
- :host {
- position: relative;
- height: 32px;
- max-width: 32px;
- ${iconColor.cssCustomProperty}: white;
- }
-
- .backplate {
- position: relative;
- display: flex;
- }
-
- .circle {
- border-radius: 100%;
- min-width: 100%;
- overflow: hidden;
- }
-
- .link {
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- min-width: 100%;
- }
-`;
diff --git a/packages/spright-components/src/demo/template.ts b/packages/spright-components/src/demo/template.ts
deleted file mode 100644
index 05633078bd..0000000000
--- a/packages/spright-components/src/demo/template.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { html } from '@microsoft/fast-element';
-import { iconUserTag } from '@ni/nimble-components/dist/esm/icons/user';
-import type { Demo } from '.';
-
-export const template = html`
-
-
-`;
diff --git a/packages/spright-components/src/demo/tests/demo.spec.ts b/packages/spright-components/src/demo/tests/demo.spec.ts
deleted file mode 100644
index 9457fdf2f0..0000000000
--- a/packages/spright-components/src/demo/tests/demo.spec.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Demo, demoTag } from '..';
-
-describe('Demo', () => {
- it('should export its tag', () => {
- expect(demoTag).toBe('spright-demo');
- });
-
- it('can construct an element instance', () => {
- expect(document.createElement('spright-demo')).toBeInstanceOf(Demo);
- });
-});
diff --git a/packages/spright-components/src/rectangle/index.ts b/packages/spright-components/src/rectangle/index.ts
new file mode 100644
index 0000000000..128d8e70b8
--- /dev/null
+++ b/packages/spright-components/src/rectangle/index.ts
@@ -0,0 +1,23 @@
+import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'spright-rectangle': Rectangle;
+ }
+}
+
+/**
+ * A Spright demo component (not for production use)
+ */
+export class Rectangle extends FoundationElement {}
+
+const sprightRectangle = Rectangle.compose({
+ baseName: 'rectangle',
+ template,
+ styles
+});
+
+DesignSystem.getOrCreate().withPrefix('spright').register(sprightRectangle());
+export const rectangleTag = 'spright-rectangle';
diff --git a/packages/spright-components/src/rectangle/styles.ts b/packages/spright-components/src/rectangle/styles.ts
new file mode 100644
index 0000000000..aa3a640022
--- /dev/null
+++ b/packages/spright-components/src/rectangle/styles.ts
@@ -0,0 +1,21 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import {
+ bodyFont,
+ bodyFontColor,
+ borderColor,
+ borderWidth
+} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+
+export const styles = css`
+ ${display('inline-block')}
+
+ :host {
+ border: ${borderWidth} solid ${borderColor};
+ }
+
+ .slot {
+ font: ${bodyFont};
+ color: ${bodyFontColor};
+ }
+`;
diff --git a/packages/spright-components/src/rectangle/template.ts b/packages/spright-components/src/rectangle/template.ts
new file mode 100644
index 0000000000..3a853b0864
--- /dev/null
+++ b/packages/spright-components/src/rectangle/template.ts
@@ -0,0 +1,3 @@
+import { html } from '@microsoft/fast-element';
+
+export const template = html``;
diff --git a/packages/spright-components/src/rectangle/tests/rectangle.spec.ts b/packages/spright-components/src/rectangle/tests/rectangle.spec.ts
new file mode 100644
index 0000000000..b276343906
--- /dev/null
+++ b/packages/spright-components/src/rectangle/tests/rectangle.spec.ts
@@ -0,0 +1,13 @@
+import { Rectangle, rectangleTag } from '..';
+
+describe('Rectangle', () => {
+ it('should export its tag', () => {
+ expect(rectangleTag).toBe('spright-rectangle');
+ });
+
+ it('can construct an element instance', () => {
+ expect(document.createElement('spright-rectangle')).toBeInstanceOf(
+ Rectangle
+ );
+ });
+});
From 948ffdc51881877cbdb46227aff922c714fab35a Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Fri, 19 Apr 2024 16:41:25 -0500
Subject: [PATCH 09/15] Formatting fix
---
packages/spright-components/CONTRIBUTING.md | 24 ++++++++++-----------
1 file changed, 12 insertions(+), 12 deletions(-)
diff --git a/packages/spright-components/CONTRIBUTING.md b/packages/spright-components/CONTRIBUTING.md
index dfcab84312..289d2a6361 100644
--- a/packages/spright-components/CONTRIBUTING.md
+++ b/packages/spright-components/CONTRIBUTING.md
@@ -5,18 +5,18 @@ This package generally uses the same tooling and policies as Nimble components.
The following table compares the requirements for components developed in Spright vs Nimble:
| | `nimble-components` | `spright-components` |
-| :--------------------: | :-----------------: | :------------------: |
-| Approved spec | 🟢 | 🟢 |
-| Unit tests | 🟢 | 🟢 |
-| Storybook visual tests | 🟢 | 🟢 |
-| Storybook API docs | 🟢 | 🟢 |
-| Storybook usage docs | 🟢 | 🟡 |
-| Approved VxD\* | 🟢 | 🟡 |
-| Approved IxD\* | 🟢 | 🟡 |
-| Angular/Blazor support | 🟢 | 🟡 |
-| Proper a11y | 🟢 | 🟡 |
-| Minimal tech debt | 🟢 | 🟡 |
-| Mobile support | 🟡 | 🟡 |
+| ---------------------- | :-----------------: | :------------------: |
+| Approved spec | 🟢 | 🟢 |
+| Unit tests | 🟢 | 🟢 |
+| Storybook visual tests | 🟢 | 🟢 |
+| Storybook API docs | 🟢 | 🟢 |
+| Storybook usage docs | 🟢 | 🟡 |
+| Approved VxD\* | 🟢 | 🟡 |
+| Approved IxD\* | 🟢 | 🟡 |
+| Angular/Blazor support | 🟢 | 🟡 |
+| Proper a11y | 🟢 | 🟡 |
+| Minimal tech debt | 🟢 | 🟡 |
+| Mobile support | 🟡 | 🟡 |
🟢 = required\
🟡 = optional\
From 3d0110190a52706224077b2f3da9458f5a4f20fb Mon Sep 17 00:00:00 2001
From: m-akinc <7282195+m-akinc@users.noreply.github.com>
Date: Fri, 19 Apr 2024 16:42:10 -0500
Subject: [PATCH 10/15] Update
packages/spright-components/src/all-components.ts
Co-authored-by: Milan Raj
---
packages/spright-components/src/all-components.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/spright-components/src/all-components.ts b/packages/spright-components/src/all-components.ts
index e89c77cf49..888b09c6cd 100644
--- a/packages/spright-components/src/all-components.ts
+++ b/packages/spright-components/src/all-components.ts
@@ -4,6 +4,6 @@
* that are required instead of leveraging this file.
*/
-import './rectangle';
+import '@ni/nimble-components/dist/esm/all-components';
-import '@ni/nimble-components/all-components';
+import './rectangle';
From 99176676192ef1a81a9b08a0e8338475ac8cf582 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Fri, 19 Apr 2024 18:30:01 -0500
Subject: [PATCH 11/15] Fixes
---
packages/spright-components/CONTRIBUTING.md | 2 +-
packages/spright-components/src/rectangle/styles.ts | 7 +++----
2 files changed, 4 insertions(+), 5 deletions(-)
diff --git a/packages/spright-components/CONTRIBUTING.md b/packages/spright-components/CONTRIBUTING.md
index 289d2a6361..450efcebc0 100644
--- a/packages/spright-components/CONTRIBUTING.md
+++ b/packages/spright-components/CONTRIBUTING.md
@@ -1,6 +1,6 @@
# Contributing to Spright Components
-This package generally uses the same tooling and policies as Nimble components. See the [`nimble-components` CONTRIBUTING doc](../nimble-components/CONTRIBUTING.md) for an overview. For details on whether a component belongs in Nimble or Spright, refer to the [README](./README.md). This document describes ways in which Spright development differs from Nimble.
+This package generally uses the same tooling and policies as Nimble components. See the [`nimble-components` CONTRIBUTING doc](/packages/nimble-components/CONTRIBUTING.md) for an overview. For details on whether a component belongs in Nimble or Spright, refer to the [README](/packages/spright-components/README.md). This document describes ways in which Spright development differs from Nimble.
The following table compares the requirements for components developed in Spright vs Nimble:
diff --git a/packages/spright-components/src/rectangle/styles.ts b/packages/spright-components/src/rectangle/styles.ts
index aa3a640022..d6baeba241 100644
--- a/packages/spright-components/src/rectangle/styles.ts
+++ b/packages/spright-components/src/rectangle/styles.ts
@@ -3,18 +3,17 @@ import { display } from '@microsoft/fast-foundation';
import {
bodyFont,
bodyFontColor,
- borderColor,
- borderWidth
+ borderHoverColor
} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
export const styles = css`
${display('inline-block')}
:host {
- border: ${borderWidth} solid ${borderColor};
+ border: 2px solid ${borderHoverColor};
}
- .slot {
+ slot {
font: ${bodyFont};
color: ${bodyFontColor};
}
From 7c529a5f104662679f64bf2b09de9f91fdabc51b Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Mon, 22 Apr 2024 12:06:06 -0500
Subject: [PATCH 12/15] Add back circular dependency ignoring code
---
packages/spright-components/rollup.config.js | 33 ++++++++++++++++++--
1 file changed, 31 insertions(+), 2 deletions(-)
diff --git a/packages/spright-components/rollup.config.js b/packages/spright-components/rollup.config.js
index 65398fe9b9..3c594bea3a 100644
--- a/packages/spright-components/rollup.config.js
+++ b/packages/spright-components/rollup.config.js
@@ -16,6 +16,33 @@ const umdProductionPlugin = () => replace({
preventAssignment: true
});
+// Custom onwarn handler for ignoring specific warnings:
+// https://rollupjs.org/configuration-options/#onwarn
+const onwarn = (warning, defaultHandler) => {
+ const ignoredWarnings = [
+ // d3 has circular dependencies it won't remove:
+ // See https://github.com/d3/d3-selection/issues/168
+ {
+ code: 'CIRCULAR_DEPENDENCY',
+ file: 'node_modules/d3-'
+ },
+ // apache-arrow has circular dependencies:
+ // See https://github.com/apache/arrow/issues/40516
+ {
+ code: 'CIRCULAR_DEPENDENCY',
+ file: 'node_modules/apache-arrow'
+ }
+ ];
+
+ if (
+ !ignoredWarnings.some(
+ ({ code, file }) => warning.code === code && warning.message.includes(file)
+ )
+ ) {
+ defaultHandler(warning);
+ }
+};
+
// eslint-disable-next-line import/no-default-export
export default [
{
@@ -32,7 +59,8 @@ export default [
resolve(),
commonJS(),
json()
- ]
+ ],
+ onwarn
},
{
input: 'dist/esm/all-components.js',
@@ -55,6 +83,7 @@ export default [
resolve(),
commonJS(),
json()
- ]
+ ],
+ onwarn
}
];
From 4f758d98fe586c2ed112f277d62ce08b99c8a41c Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Mon, 22 Apr 2024 12:12:41 -0500
Subject: [PATCH 13/15] Name got added to pacakge in lock file
---
package-lock.json | 1 +
1 file changed, 1 insertion(+)
diff --git a/package-lock.json b/package-lock.json
index 2eb37eae50..118ee4637f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33988,6 +33988,7 @@
}
},
"packages/spright-components": {
+ "name": "@ni/spright-components",
"version": "0.0.1",
"license": "MIT",
"dependencies": {
From ffbaf6de8f986b8dc50c210e33290cf3c7ee16f5 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Mon, 22 Apr 2024 13:03:26 -0500
Subject: [PATCH 14/15] Minor dependency change
---
package-lock.json | 2 +-
packages/spright-components/package.json | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index a7a3e6c915..495ca0ebd3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33996,7 +33996,7 @@
"@microsoft/fast-element": "^1.12.0",
"@microsoft/fast-foundation": "^2.49.6",
"@microsoft/fast-web-utilities": "^6.0.0",
- "@ni/nimble-components": "^25.0.0",
+ "@ni/nimble-components": "*",
"@ni/nimble-tokens": "^6.13.2",
"tslib": "^2.2.0"
},
diff --git a/packages/spright-components/package.json b/packages/spright-components/package.json
index 760505e370..668f74db29 100644
--- a/packages/spright-components/package.json
+++ b/packages/spright-components/package.json
@@ -58,7 +58,7 @@
"@microsoft/fast-element": "^1.12.0",
"@microsoft/fast-foundation": "^2.49.6",
"@microsoft/fast-web-utilities": "^6.0.0",
- "@ni/nimble-components": "^25.0.0",
+ "@ni/nimble-components": "*",
"@ni/nimble-tokens": "^6.13.2",
"tslib": "^2.2.0"
},
From e2304ede0c7977e514ca477fd86c3c956aafaa53 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Mon, 22 Apr 2024 13:38:05 -0500
Subject: [PATCH 15/15] Fix dependency version
---
package-lock.json | 2 +-
packages/spright-components/package.json | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 495ca0ebd3..91d24d68de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33996,7 +33996,7 @@
"@microsoft/fast-element": "^1.12.0",
"@microsoft/fast-foundation": "^2.49.6",
"@microsoft/fast-web-utilities": "^6.0.0",
- "@ni/nimble-components": "*",
+ "@ni/nimble-components": "26.0.0",
"@ni/nimble-tokens": "^6.13.2",
"tslib": "^2.2.0"
},
diff --git a/packages/spright-components/package.json b/packages/spright-components/package.json
index 668f74db29..75f242f086 100644
--- a/packages/spright-components/package.json
+++ b/packages/spright-components/package.json
@@ -58,7 +58,7 @@
"@microsoft/fast-element": "^1.12.0",
"@microsoft/fast-foundation": "^2.49.6",
"@microsoft/fast-web-utilities": "^6.0.0",
- "@ni/nimble-components": "*",
+ "@ni/nimble-components": "26.0.0",
"@ni/nimble-tokens": "^6.13.2",
"tslib": "^2.2.0"
},