dev: fix e2e and docs (#1388)

* docs: replace docz with docusaurus

.github/workflows/validate.yml

@@ -16,7 +16,7 @@ jobs:
     if: ${{ !contains(github.head_ref, 'all-contributors') }}
     strategy:
       matrix:
-        node: [12]
+        node: [16]
     runs-on: ubuntu-latest
     steps:
       - name: 🛑 Cancel Previous Runs

.gitignore

@@ -6,8 +6,6 @@ dist
 .DS_Store
 .next
 .eslintcache
-.docz
-storybook-static
 preact/
 
 cypress/videos
@@ -18,3 +16,18 @@ cypress/screenshots
 package-lock.json
 yarn.lock
 flow-coverage/
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*

.npmrc

@@ -1,2 +1,2 @@
-registry=http://registry.npmjs.org/
+registry=https://registry.npmjs.org/
 package-lock=false

.nvmrc

@@ -1 +1 @@
-v10
+16.14.0

.prettierignore

@@ -4,4 +4,3 @@ dist/
 preact/
 package-lock.json
 package.json
-docs/

.babelrc.js → babel.config.js

@@ -3,11 +3,13 @@ const customPreset = api => {
   api.cache(true)
   const evaluatedPreset = originalPreset(api)
   const plugins = [
+    require.resolve('babel-plugin-dynamic-import-node'),
     ['no-side-effect-class-properties'],
     ...evaluatedPreset.plugins,
   ]
+  const presets = [...evaluatedPreset.presets]
   return {
-    ...evaluatedPreset,
+    presets,
     plugins,
   }
 }

cypress.config.js

@@ -0,0 +1,8 @@
+const {defineConfig} = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:6006',
+    video: false,
+  },
+})

cypress/integration/combobox.js → cypress/e2e/combobox.cy.js

@@ -6,9 +6,7 @@ const bodyY = 500
 
 describe('combobox', () => {
   before(() => {
-    cy.visit('/')
-    cy.findByText(/^Tests$/).click()
-    cy.findByText(/^Combobox$/).click()
+    cy.visit('/combobox')
   })
 
   beforeEach(() => {
@@ -56,7 +54,7 @@ describe('combobox', () => {
       .type('{downarrow}{enter}') // open and select first item
       .should('have.value', 'Black')
       .get('body')
-      .click(bodyX, bodyY)
+      .click(bodyX, bodyY, {force: true})
       .findByTestId('combobox-input')
       .should('have.value', 'Black')
   })
@@ -76,12 +74,12 @@ describe('combobox', () => {
       .should('have.value', 'R')
       .click()
       .get('body')
-      .trigger('mouseup', bodyX, bodyY)
+      .trigger('mouseup', bodyX, bodyY, {force: true})
       .findByTestId('combobox-input')
       .should('have.value', 'R')
       .blur()
       .get('body')
-      .trigger('click', bodyX, bodyY)
+      .trigger('click', bodyX, bodyY, {force: true})
       .findByTestId('combobox-input')
       .should('have.value', 'Red')
   })
@@ -99,13 +97,13 @@ describe('combobox', () => {
 
   it('does not reset when tabbing from input to the toggle button', () => {
     cy.findByTestId('combobox-input').type('pu')
-    cy.findByTestId('toggle-button').focus()
+    cy.findByTestId('combobox-toggle-button').focus()
     cy.findByTestId('downshift-item-0').click()
     cy.findByTestId('combobox-input').should('have.value', 'Purple')
   })
 
   it('does not reset when tabbing from the toggle button to the input', () => {
-    cy.findByTestId('toggle-button').click()
+    cy.findByTestId('combobox-toggle-button').click()
     cy.findByTestId('combobox-input').focus()
     cy.findByTestId('downshift-item-0').click()
     cy.findByTestId('combobox-input').should('have.value', 'Black')
@@ -115,18 +113,18 @@ describe('combobox', () => {
     cy.findByTestId('combobox-input')
       .type('re')
       .get('body')
-      .trigger('touchstart', bodyX, bodyY)
-      .trigger('touchend', bodyX, bodyY)
+      .trigger('touchstart', bodyX, bodyY, {force: true})
+      .trigger('touchend', bodyX, bodyY, {force: true})
     cy.findByTestId('downshift-item-0', {timeout: 10}).should('not.exist')
   })
 
   it('does not reset when swiping outside to scroll a touch screen', () => {
     cy.findByTestId('combobox-input')
       .type('re')
       .get('body')
-      .trigger('touchstart', bodyX, bodyY)
-      .trigger('touchmove', bodyX, bodyY + 20)
-      .trigger('touchend', bodyX, bodyY + 20)
+      .trigger('touchstart', bodyX, bodyY, {force: true})
+      .trigger('touchmove', bodyX, bodyY + 20, {force: true})
+      .trigger('touchend', bodyX, bodyY + 20, {force: true})
     cy.findByTestId('downshift-item-0', {timeout: 10}).should('be.visible')
   })
 })

cypress/integration/useCombobox.js → cypress/e2e/useCombobox.cy.js

@@ -1,10 +1,6 @@
 describe('useCombobox', () => {
   before(() => {
-    cy.visit('/')
-    cy.findByText(/^Tests$/).click()
-    cy.findByText(/^useCombobox$/, {
-      selector: '[href="/tests/use-combobox"]',
-    }).click()
+    cy.visit('/useCombobox')
   })
 
   it('should keep focus on the input when selecting by click', () => {

cypress/integration/useSelect.js → cypress/e2e/useSelect.cy.js

@@ -1,8 +1,6 @@
 describe('useSelect', () => {
   before(() => {
-    cy.visit('/')
-    cy.findByText(/^Tests$/).click()
-    cy.findByText(/^useSelect$/, {selector: '[href="/tests/use-select"]'}).click()
+    cy.visit('/useSelect')
   })
 
   it('can open and close a menu', () => {