Add components (#14)

* Add number-field

* Refactor base field styles

* Apply common field style to search

* Set outline only in focus mode

* Add checkbox

* Add combobox

* Add data grid

* Add toolbar

* Add anchored region

* Add tooltip

* Add tree item

* Add tree view

* Compiles src manually for playwright

* Fix manifest

* Add react components

* Rename snapshot folders to match pretranspiled playwright tests

* Remove visual test timeout

* Correct path to snapshots

* Update snapshots

* Fix combobox test url

* Place snapshots in the correct folders

* Fix tooltip test

* Don't include playwright snapshot in python package

* Add tooltip snapshots

Author: fcollonval

.github/workflows/visual-test.yml

@@ -9,7 +9,7 @@ on:
 jobs:
   visual-test:
     runs-on: ubuntu-latest
-    timeout-minutes: 40
+    timeout-minutes: 60
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v2
@@ -55,4 +55,4 @@ jobs:
           name: jupyter-ui-test
           path: |
             packages/components/test-assets/
-            packages/components/src/**/*-snapshots/*
+            packages/components/tests-out/**/*-snapshots/*

.gitignore

@@ -132,3 +132,5 @@ temp
 # Visual testing
 packages/components/test-results
 lerna-debug.log
+packages/components/tests-out/**/*.js
+packages/components/tests-out/**/*.js.map

MANIFEST.in

@@ -20,10 +20,12 @@ include packages/components/playwright.config.ts
 include packages/components/rollup.config.js
 include packages/components/tsconfigbase.json
 include packages/components/tsconfig.json
+include packages/components/tsconfig.playwright.json
 include packages/components/tsconfig.storybook.json
 graft packages/components/.storybook
 graft packages/components/docs
 graft packages/components/src
+prune packages/components/tests-out
 include packages/react-components/README.md
 include packages/react-components/package.json
 include packages/react-components/tsconfig.json

packages/components/.storybook/main.js

@@ -2,7 +2,7 @@ module.exports = {
   core: {
     builder: 'webpack5'
   },
-  stories: ['../src/**/*.stories.ts'],
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.ts'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

packages/components/.storybook/preview-head.html

@@ -1,26 +1,31 @@
 <style>
-	html,
-	body {
-		margin: 0;
-		display: flex;
-		flex-direction: column;
-		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-			Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-			'Segoe UI Symbol';
-	}
+    html,
+    body {
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+            Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+            'Segoe UI Symbol';
+    }
 
-	#root {
-		display: flex;
-		width: 100%;
-	}
+    #root {
+        display: flex;
+        width: 100%;
+    }
 
-	/* For testing reaction to JupyterLab theme */
-	:root {
-		--jp-brand-color1: var(--md-blue-700);
-		--jp-border-width: 1px;
-		--jp-border-color1: var(--md-grey-400);
-		--jp-ui-font-size1: 13px;
-		--md-grey-400: #78909C;
-		--md-blue-700: #1976D2;
-	}
+    #root>jp-tree-item,
+    #root>jp-tree-view {
+        flex: 1 1 auto;
+    }
+
+    /* For testing reaction to JupyterLab theme */
+    :root {
+        --jp-brand-color1: var(--md-blue-700);
+        --jp-border-width: 1px;
+        --jp-border-color1: var(--md-grey-400);
+        --jp-ui-font-size1: 13px;
+        --md-grey-400: #78909C;
+        --md-blue-700: #1976D2;
+    }
 </style>

packages/components/package.json

@@ -26,6 +26,9 @@
     "start:ci": "start-storybook -p 6006 --ci --quiet",
     "build": "rollup -c && tsc -p ./tsconfig.json",
     "build:docs": "build-storybook",
+    "clean": "yarn clean:lib && yarn clean:test",
+    "clean:lib": "rimraf dist",
+    "clean:test": "rimraf test-results tests-out/**/*.js tests-out/**/*.js.map tsconfig.playwright.tsbuildinfo",
     "deploy:docs": "yarn run build:docs && gh-pages -d storybook-static",
     "doc": "api-extractor run --local",
     "prettier:check": "prettier --config ../../.prettierrc --check \"src/**/*.ts\"",
@@ -34,13 +37,14 @@
     "eslint": "eslint . --ext .ts --fix",
     "prepublishOnly": "rimraf README.md && cp ../../README.md . && yarn run build",
     "test": "jest --verbose --coverage",
-    "test:visual": "playwright test"
+    "test:visual": "tsc --incremental -p tsconfig.playwright.json && playwright test"
   },
   "dependencies": {
     "@microsoft/fast-colors": "^5.1.4",
     "@microsoft/fast-components": "^2.17.1",
     "@microsoft/fast-element": "^1.6.0",
-    "@microsoft/fast-foundation": "^2.21.0"
+    "@microsoft/fast-foundation": "^2.21.0",
+    "@microsoft/fast-web-utilities": "^5.1.0"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
@@ -71,6 +75,7 @@
     "gh-pages": "^3.1.0",
     "jest": "^27.2.4",
     "prettier": "^2.2.1",
+    "rimraf": "^3.0.2",
     "rollup": "^2.40.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-filesize": "^9.1.1",

packages/components/playwright.config.ts

@@ -3,7 +3,7 @@ import { PlaywrightTestConfig, devices } from '@playwright/test';
 const config: PlaywrightTestConfig = {
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  testMatch: '**/*.test.ts',
+  testMatch: 'tests-out/**/*.test.js',
   webServer: {
     command: 'yarn run start:ci',
     port: 6006,

packages/components/src/anchored-region/anchored-region.stories.mdx

@@ -0,0 +1,31 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+  AnchoredRegion,
+  anchoredRegionTemplate as template
+} from '@microsoft/fast-foundation';
+import { anchoredRegionStyles as styles } from '@microsoft/fast-components';
+
+/**
+ * A function that returns a {@link @microsoft/fast-foundation#AnchoredRegion} registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#anchoredRegionTemplate}
+ *
+ *
+ * @beta
+ * @remarks
+ * Generates HTML Element: `<jp-anchored-region>`
+ */
+export const jpAnchoredRegion = AnchoredRegion.compose({
+  baseName: 'anchored-region',
+  template,
+  styles
+});
+
+/**
+ * Base class for AnchoredRegion
+ * @public
+ */
+export { AnchoredRegion };
+
+export { styles as anchoredRegionStyles };