Create spright-components package

change/@ni-spright-components-08e968ac-291f-4c66-949e-115ca77deef2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Create initial spright-components package",
+  "packageName": "@ni/spright-components",
+  "email": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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,39 @@
+# 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:
+
+|                        | `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\
+\*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. The Design System team will maintain infrastructure like pipelines and dependencies but may request assistance from contributing teams for component-specific issues.
+
+## 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,11 @@
+<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)
+
+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).

packages/spright-components/karma.conf.js

@@ -0,0 +1,156 @@
+// 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 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'
+];
+
+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'
+                            }
+                        ]
+                    }
+                ]
+            }
+        },
+        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);
+};