Merge remote-tracking branch 'origin/fix/quill-global' into beta

# Conflicts:
#	package.json

cy/commands/ab-get-property.js

@@ -2,11 +2,42 @@
 
 /**
  * @method abGetProperty
- * @param {string} propertyPath
+ * @description
+ * ### Usage
+ *
+ * ```javascript
+ * // your property in AdminBro
+ * resourceOptions: {
+ *   properties: {
+ *     isAdmin: {...}
+ *   }
+ * }
+ * ```
+ *
+ * ```javascript
+ * // accessing it in test.
+ * cy.abGetProperty('isAdmin', 'input[type="checkbox"]')
+ * ```
+ *
+ * `abGetProperty` returns the wrapper Section for a given property. You can pass inner element
+ * which allows you to select `input`, `label`, `options`, etc. inside it.
+ *
+ * @memberof module:cy
+ * @param {string} path           path of the property
  * @param {string} [selector=null]
+ * @example
+ * it('shows disabled checkBox', () => {
+ *   cy.abGetProperty('isAdmin', 'input[type="checkbox"]')
+ *     .should('be.disabled')
+ *     .should('not.be.checked')
+ *
+ *   cy.abGetProperty('isAdmin', 'label')
+ *     .click()
+ *     .should('not.be.checked')
+ * })
  */
-Cypress.Commands.add('abGetProperty', (propertyPath, selector = null) => {
-  let propertySelector = `[data-testid$="-${propertyPath}"]`
+Cypress.Commands.add('abGetProperty', (path, selector = null) => {
+  let propertySelector = `[data-testid$="-${path}"]`
   if (selector) {
     propertySelector = [propertySelector, selector].join(' ')
   }

cy/commands/ab-keep-logged-in.js

@@ -2,6 +2,7 @@
 
 /**
  * @method abKeepLoggedIn
+ * @memberof module:cy
  * @param {object} [options]
  * @param {object} [options.cookie]   session cookie name: default to Cypress.env('AB_COOKIE_NAME')
  * @example

cy/commands/ab-login-api.js

@@ -1,7 +1,12 @@
 /// <reference types="cypress" />
 
 /**
- * @method abLogin
+ * @method abLoginAPI
+ * @memberof module:cy
+ * @description
+ * Comparing to {@link module:cy.abLogin} it doesn't render page - just performs an API call
+ * and logs you in by storing the cookie. In order to preserve this cookie between the `it()`
+ * calls you have to use {@link module:cy.abKeepLoggedIn} helper.
  * @param {object} [options]
  * @param {object} [options.email]          login email: default to Cypress.env('AB_EMAIL')
  * @param {object} [options.password]       login password: default to Cypress.env('AB_PASSWORD')

cy/commands/ab-login.js

@@ -2,6 +2,10 @@
 
 /**
  * @method abLogin
+ * @description
+ * logs you to the AdminBro. Since the system uses cookie for storing the session information, you
+ * can use {@link module:cy.abKeepLoggedIn} helper to keep it between test cases.
+ * @memberof module:cy
  * @param {object} [options]
  * @param {object} [options.email]          login email: default to Cypress.env('AB_EMAIL')
  * @param {object} [options.password]       login password: default to Cypress.env('AB_PASSWORD')

cy/cypress.doc.md

@@ -0,0 +1,38 @@
+### Cypress helpers
+
+This module gathers helpers which can be used when you E2E test your AdminBro dashboard with
+{@link https://www.cypress.io/} as we do.
+
+### Usage
+
+First, you have to import helpers to your cypress project. You can do this in:
+
+`/support/index.js` or `/support/commands.js`
+```javascript
+require('admin-bro/cy')
+```
+
+and now you can use our helpers
+
+```javascript
+/// <reference types="cypress" />
+/// <reference types="admin-bro/cy" />
+
+context('resources/Company/actions/new', () => {
+  before(() => {
+    cy.abLoginAPI({ password: Cypress.env('ADMIN_PASSWORD'), email: Cypress.env('ADMIN_EMAIL') })
+  })
+
+  beforeEach(() => {
+    cy.abKeepLoggedIn({ cookie: Cypress.env('COOKIE_NAME') })
+    cy.visit('resources/Company/actions/new')
+  })
+
+  //...
+})
+```
+
+### What we have
+
+Cypress helpers project is currently in the WIP/POC phase, that is why there are not much helpers
+here. But you can expect that gradually we will add more.

cy/index.js

@@ -1,3 +1,9 @@
+/**
+ * @module cy
+ * @load ./cypress.doc.md
+ * @new in version 3.3
+ */
+
 require('./commands/ab-login')
 require('./commands/ab-login-api')
 require('./commands/ab-keep-logged-in')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "admin-bro",
-  "version": "3.3.0-beta.39",
+  "version": "3.3.1",
   "description": "Admin panel for apps written in node.js",
   "main": "index.js",
   "types": "index.d.ts",
@@ -75,7 +75,7 @@
   },
   "homepage": "https://github.com/SoftwareBrothers/admin-bro#readme",
   "dependencies": {
-    "@admin-bro/design-system": "^1.7.0-beta.22",
+    "@admin-bro/design-system": "^1.7.0-beta.24",
     "@babel/core": "^7.10.2",
     "@babel/parser": "^7.10.2",
     "@babel/plugin-transform-runtime": "^7.10.1",
@@ -113,7 +113,7 @@
     "styled-components": "^5.1.0"
   },
   "devDependencies": {
-    "@admin-bro/design-system": "^1.7.0-beta.22",
+    "@admin-bro/design-system": "^1.7.0-beta.24",
     "@babel/cli": "^7.4.4",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",

packages/admin-bro-demo/package.json

@@ -32,16 +32,16 @@
     "wait-on": "^5.2.0"
   },
   "dependencies": {
-    "admin-bro": "^3.3.0-beta.33",
-    "@admin-bro/design-system": "1.7.0-beta.21",
+    "admin-bro": "^3.3.1",
+    "@admin-bro/design-system": "1.7.0",
     "@admin-bro/express": "^3.0.1",
     "@admin-bro/firebase-functions": "^3.1.0",
     "@admin-bro/passwords": "^1.0.3",
     "@admin-bro/sequelize": "1.1.1",
-    "@admin-bro/upload": "^1.2.0-beta.8",
+    "@admin-bro/upload": "^1.2.0",
     "@sentry/node": "^5.26.0",
     "@sentry/tracing": "^5.26.0",
-    "@softwarebrothers/admin-bro-blog": "^1.0.0-beta.4",
+    "@softwarebrothers/admin-bro-blog": "1.0.1",
     "@types/quill": "^2.0.4",
     "argon2": "^0.27.0",
     "connect-session-sequelize": "^7.0.3",

packages/admin-bro-demo/src/admin/components/dashboard.tsx

@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from 'react'
+import { ApiClient } from 'admin-bro'
+import { Box } from '@admin-bro/design-system'
+
+const api = new ApiClient()
+
+const Dashboard = () => {
+  const [data, setData] = useState({})
+
+  useEffect(() => {
+    api.getDashboard().then((response) => {
+      setData(response.data)
+    })
+  }, [])
+
+  return (
+    <Box variant="grey">
+      <Box variant="white">
+        some dashboard
+      </Box>
+    </Box>
+  )
+}
+
+export default Dashboard

packages/admin-bro-demo/src/admin/options.ts

@@ -1,4 +1,4 @@
-import { AdminBroOptions } from 'admin-bro'
+import AdminBro, { AdminBroOptions } from 'admin-bro'
 import * as UserAdmin from './resources/user'
 import * as BlogPostAdmin from './resources/blog-post'
 import * as MediaAdmin from './resources/media'
@@ -13,6 +13,12 @@ export const options: AdminBroOptions = {
   version: {
     admin: true,
   },
+  dashboard: {
+    handler: async () => {
+      return { some: 'output' }
+    },
+    component: AdminBro.bundle('../../../src/admin/components/dashboard')
+  },
   resources: [
     UserAdmin,
     ProductAdmin,

packages/admin-bro-demo/src/admin/resources/product/product-resource.ts

@@ -11,6 +11,17 @@ export const ProductResource: ResourceOptions = {
     photos: {
       type: 'mixed',
     },
+    description: {
+      type: 'richtext',
+      props: {
+        quill: {
+          theme: 'bubble',
+          modules: {
+            toolbar: [['bold', 'italic'], ['link', 'image']],
+          }
+        }
+      }
+    },
   },
   actions: {
     exporter: {