Start building Jupyter dedicated components (#4)

* Start Jupyter work

* Use outline to highlight button focus, hover and active

* Add margin on button to display properly the outline

* Trial custom button

* Use ts-loader for storybook

* Add select

* Fix outline highlight for outline appearance

* Add fontawesome license

* Add text-field

* Embed more styling

* Tune style for jp-option focus

* Tune style for jp-select focus

* Tune style for jp-text-field style

* Add minimal attribute to button for toolbar

* Add accent choice in toolbar

* Add minimal style for select

* Improve border contrast

* Make minimal more dense

* Upgrade yarn.lock

* Restore react-component and lab example

* Trim CSS variable value before converting it

* Fix linter and add some snapshots

* Update all snapshots

* Fix MANIFEST.in

* Fix snapshot

* Add slow motion

* Update snapshots

Author: fcollonval

.github/workflows/ci.yml

@@ -1,6 +1,10 @@
 name: toolkit-ci
 
-on: pull_request
+on:
+  push:
+    branches: main
+  pull_request:
+    branches: main
 
 jobs:
   test:
@@ -34,56 +38,6 @@ jobs:
         run: yarn run test
         working-directory: packages/components
 
-  visual-test:
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-    steps:
-      - name: Checkout 🛎️
-        uses: actions/checkout@v2
-
-      - name: Setup Node 💾
-        uses: actions/setup-node@v2
-        with:
-          node-version: '14'
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Setup yarn cache
-        uses: actions/cache@v2
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            yarn-
-
-      - name: Install Dependencies 📥
-        run: yarn install
-
-      - name: Install Playwright Browsers
-        run: yarn run playwright install --with-deps
-        working-directory: packages/components
-
-      - name: Run Visual Tests 🧪
-        run: yarn run test:visual
-        working-directory: packages/components
-
-      - name: Update Snapshots
-        if: ${{ failure() }}
-        run: |
-          mv test-results test-assets
-          yarn run test:visual -u
-        working-directory: packages/components
-
-      - uses: actions/upload-artifact@v2
-        if: ${{ failure() }}
-        with:
-          name: jupyter-ui-test
-          path: |
-            packages/components/test-assets/
-            packages/components/src/**/*-snapshots/*
-
   lint:
     runs-on: ubuntu-latest
     timeout-minutes: 10

.github/workflows/visual-test.yml

@@ -0,0 +1,58 @@
+name: Toolkit Visual Test
+
+on:
+  push:
+    branches: main
+  pull_request:
+    branches: main
+
+jobs:
+  visual-test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v2
+
+      - name: Setup Node 💾
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - name: Setup yarn cache
+        uses: actions/cache@v2
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            yarn-
+
+      - name: Install Dependencies 📥
+        run: yarn install
+
+      - name: Install Playwright Browsers
+        run: yarn run playwright install --with-deps
+        working-directory: packages/components
+
+      - name: Run Visual Tests 🧪
+        run: yarn run test:visual
+        working-directory: packages/components
+
+      - name: Update Snapshots
+        if: ${{ failure() }}
+        run: |
+          mv test-results test-assets
+          yarn run test:visual -u
+        working-directory: packages/components
+
+      - uses: actions/upload-artifact@v2
+        if: ${{ failure() }}
+        with:
+          name: jupyter-ui-test
+          path: |
+            packages/components/test-assets/
+            packages/components/src/**/*-snapshots/*

MANIFEST.in

@@ -17,7 +17,9 @@ include packages/components/package.json
 include packages/components/jest.config.js
 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.storybook.json
 graft packages/components/.storybook
 graft packages/components/docs
 graft packages/components/src