Create initial spright-components package

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"
+}

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",

packages/spright-components/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+    root: true,
+    extends: '@ni-private/eslint-config-nimble/javascript'
+};

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

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

packages/spright-components/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+    "tabWidth": 4,
+    "useTabs": false,
+    "trailingComma": "none",
+    "singleQuote": true,
+    "endOfLine": "auto"
+}

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.

packages/spright-components/README.md

@@ -0,0 +1,9 @@
+<div align="center">
+    <p><b>ni | spright</b></p>
+</div>
+
+# Spright Components
+
+[![NPM Version](https://img.shields.io/npm/v/@ni/spright-components.svg)](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).

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);
+};

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);
+};