From 3ded6ce73c93f6a87078e7fc6f5bb2420f9cbc63 Mon Sep 17 00:00:00 2001 From: Justin Busa Date: Thu, 6 May 2021 13:39:51 -0700 Subject: [PATCH 1/5] Subscription checks for pro in the plugin. --- package-lock.json | 18 +++++++++--------- src/apps/libraries/ui/libraries/list/index.js | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2900355a..4a2cdf64 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1216,9 +1216,9 @@ "integrity": "sha512-0Mz5PyGLQaDfwjqAKx9N/9E+9g/M57rOINsG78PSmcH5YTGRxU0y/j02562NP8tn76bNpc9+prp5lsOkr98GXw==" }, "@beaverbuilder/cloud": { - "version": "0.4.7", - "resolved": "https://registry.npmjs.org/@beaverbuilder/cloud/-/cloud-0.4.7.tgz", - "integrity": "sha512-4lfcgWud/um/MiHEd701lfTTPvCOpcJKHzhp3r+y8CsL1uHRsP/MIM0k6UqPnFBlRJBSdpcM4on+546AadCfFA==", + "version": "0.4.8", + "resolved": "https://registry.npmjs.org/@beaverbuilder/cloud/-/cloud-0.4.8.tgz", + "integrity": "sha512-6mWx6Ce/J8wshhoyrB/XU3xiJuN/wIfPVgA5b93HNuj4RPSLwCj9wVEHcTeTxwuJc58NQ8wt8HJu9i+q+JQOAw==", "requires": { "axios-mock-adapter": "^1.19.0", "cookie": "^0.4.1", @@ -1230,9 +1230,9 @@ } }, "@beaverbuilder/cloud-ui": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/@beaverbuilder/cloud-ui/-/cloud-ui-0.7.1.tgz", - "integrity": "sha512-75GkS0CPP7mByYJNt15q4S9JWRGhEM7Nr/Bbvx2oWCWQMAdq3EWGzGTyALq3Of/BQSo9TiZN3am003qwZgPvbg==", + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/@beaverbuilder/cloud-ui/-/cloud-ui-0.7.3.tgz", + "integrity": "sha512-Yb//Y2ylrjQQ8UYmzmW7uASDfHm5kwuVtVQV1AA6cGzQqPkD4ftVMIt49zp83VThXQDkl0TcxSKOOE1wnFN84w==", "requires": { "and": "0.0.3", "build": "^0.1.4", @@ -1582,9 +1582,9 @@ } }, "@beaverbuilder/forms": { - "version": "0.3.6", - "resolved": "https://registry.npmjs.org/@beaverbuilder/forms/-/forms-0.3.6.tgz", - "integrity": "sha512-tiFpZHQU5ftTfxqq36VhaUJVQ9pfdN1pZrE4cVqJ6z69Er4J/Ylf1O2T2nmJVBag6kwZQHVKVTWqXmA6Ie3EAw==", + "version": "0.3.7", + "resolved": "https://registry.npmjs.org/@beaverbuilder/forms/-/forms-0.3.7.tgz", + "integrity": "sha512-LZFPZenalFxmH/Kehnjr9wjzjRO1OwViCcEsElwdwgHuQIKjDdr0ebRuHQySJwp1KahTLeglXPuedtdnDCguWQ==", "requires": { "@wordpress/i18n": "^3.13.0", "camelcase": "^6.0.0" diff --git a/src/apps/libraries/ui/libraries/list/index.js b/src/apps/libraries/ui/libraries/list/index.js index 59fbc78c..10f7c234 100644 --- a/src/apps/libraries/ui/libraries/list/index.js +++ b/src/apps/libraries/ui/libraries/list/index.js @@ -41,7 +41,7 @@ export default ( { { isAddingNew && - + + ) } + + + + ) +} + +export default Dialog diff --git a/packages/@beaverbuilder/fluid/src/dialogs/dialog/style.scss b/packages/@beaverbuilder/fluid/src/dialogs/dialog/style.scss new file mode 100644 index 00000000..ddd4ee00 --- /dev/null +++ b/packages/@beaverbuilder/fluid/src/dialogs/dialog/style.scss @@ -0,0 +1,43 @@ +.fl-asst-dialog { + background-color: rgba(0,0,0,0.2); + display: flex; + align-items: center; + justify-content: center; + padding: var(--fluid-med-space); + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1000; +} + +.fl-asst-dialog-window { + background: var(--fluid-background); + border-radius: var(--fluid-radius); + box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); + padding: var(--fluid-lg-space); + max-width: 460px; + width: 100%; +} + +.fl-asst-dialog-title { + font-size: 20px; + margin-bottom: var(--fluid-med-space); +} + +.fl-asst-dialog-message { + font-size: 14px; + line-height: 1.6; + margin-bottom: var(--fluid-lg-space); +} + +.fl-asst-dialog-buttons { + display: flex; + justify-content: flex-end; + + button { + margin-left: var(--fluid-sm-space); + min-width: 70px !important; + } +} diff --git a/packages/@beaverbuilder/fluid/src/dialogs/hooks/index.js b/packages/@beaverbuilder/fluid/src/dialogs/hooks/index.js new file mode 100644 index 00000000..4ad43ab4 --- /dev/null +++ b/packages/@beaverbuilder/fluid/src/dialogs/hooks/index.js @@ -0,0 +1,60 @@ +import React, { useState } from 'react' +import Dialog from '../dialog' + +export const useDialog = ( options ) => { + const [ isShowing, setIsShowing ] = useState( false ) + + const showDialog = () => { + setIsShowing( true ) + } + + const DialogComponent = () => { + return ( + + ) + } + + return [ showDialog, DialogComponent ] +} + +export const useAlert = ( options ) => { + options.buttons = [ + { + label: 'Ok', + isSelected: true, + onClick: ( { closeDialog } ) => closeDialog(), + } + ] + + return useDialog( options ) +} + +export const useConfirm = ( { + onCancel = () => {}, + onConfirm = () => {}, + ...options +} ) => { + options.buttons = [ + { + label: 'Cancel', + onClick: ( { closeDialog } ) => { + closeDialog() + onCancel() + }, + }, + { + label: 'Ok', + isSelected: true, + onClick: ( { closeDialog } ) => { + closeDialog() + onConfirm() + }, + } + ] + + return useDialog( options ) +} diff --git a/packages/@beaverbuilder/fluid/src/dialogs/index.js b/packages/@beaverbuilder/fluid/src/dialogs/index.js new file mode 100644 index 00000000..bb9ba712 --- /dev/null +++ b/packages/@beaverbuilder/fluid/src/dialogs/index.js @@ -0,0 +1,8 @@ +import Dialog from './dialog' +import { useDialog, useAlert, useConfirm } from './hooks' + +Dialog.useDialog = useDialog +Dialog.useAlert = useAlert +Dialog.useConfirm = useConfirm + +export default Dialog diff --git a/packages/@beaverbuilder/fluid/src/index.js b/packages/@beaverbuilder/fluid/src/index.js index 03b3b86c..efd01bde 100644 --- a/packages/@beaverbuilder/fluid/src/index.js +++ b/packages/@beaverbuilder/fluid/src/index.js @@ -9,6 +9,7 @@ import Page from './page' import Button from './button' import Menu from './menu' import Collection from './collection' +import Dialog from './dialogs' export { Text, @@ -17,4 +18,5 @@ export { Menu, // Planning to have menu subsumed by button Layout, Collection, + Dialog, } diff --git a/src/system/ui/index.js b/src/system/ui/index.js index 21c6fbfe..4f3fc2ea 100644 --- a/src/system/ui/index.js +++ b/src/system/ui/index.js @@ -1,6 +1,6 @@ // Public API import './style.scss' -import { Text, Collection, Menu } from '@beaverbuilder/fluid' +import { Text, Collection, Menu, Dialog } from '@beaverbuilder/fluid' import App from './app' import Button from './button' import Icon from './icon' @@ -37,4 +37,5 @@ export { Text, Collection, Menu, + Dialog, } From b81a7b369403e4f7699713a2e67cb87eaaf1e8cf Mon Sep 17 00:00:00 2001 From: Justin Busa Date: Tue, 11 May 2021 13:31:54 -0700 Subject: [PATCH 3/5] Render dialogs with portals to prevent z-index issues. --- .../@beaverbuilder/fluid/src/dialogs/dialog/index.js | 10 ++++++++-- packages/@beaverbuilder/fluid/src/dialogs/index.js | 2 ++ .../@beaverbuilder/fluid/src/dialogs/root/index.js | 9 +++++++++ src/render/app/index.js | 3 ++- 4 files changed, 21 insertions(+), 3 deletions(-) create mode 100644 packages/@beaverbuilder/fluid/src/dialogs/root/index.js diff --git a/packages/@beaverbuilder/fluid/src/dialogs/dialog/index.js b/packages/@beaverbuilder/fluid/src/dialogs/dialog/index.js index 49ed2649..9e895651 100644 --- a/packages/@beaverbuilder/fluid/src/dialogs/dialog/index.js +++ b/packages/@beaverbuilder/fluid/src/dialogs/dialog/index.js @@ -1,4 +1,5 @@ import React from 'react' +import ReactDOM from 'react-dom' import classname from 'classnames' import Button from '../../button' import './style.scss' @@ -16,7 +17,12 @@ const Dialog = ( { return null } - return ( + const getRoot = () => { + const root = document.getElementById( 'fluid-dialog-root' ) + return root ? root : document.body + } + + return ReactDOM.createPortal( (
{ title && @@ -46,7 +52,7 @@ const Dialog = ( {
- ) + ), getRoot() ) } export default Dialog diff --git a/packages/@beaverbuilder/fluid/src/dialogs/index.js b/packages/@beaverbuilder/fluid/src/dialogs/index.js index bb9ba712..ee64edfc 100644 --- a/packages/@beaverbuilder/fluid/src/dialogs/index.js +++ b/packages/@beaverbuilder/fluid/src/dialogs/index.js @@ -1,6 +1,8 @@ import Dialog from './dialog' +import DialogRoot from './root' import { useDialog, useAlert, useConfirm } from './hooks' +Dialog.DialogRoot = DialogRoot Dialog.useDialog = useDialog Dialog.useAlert = useAlert Dialog.useConfirm = useConfirm diff --git a/packages/@beaverbuilder/fluid/src/dialogs/root/index.js b/packages/@beaverbuilder/fluid/src/dialogs/root/index.js new file mode 100644 index 00000000..5c9287a0 --- /dev/null +++ b/packages/@beaverbuilder/fluid/src/dialogs/root/index.js @@ -0,0 +1,9 @@ +import React from 'react' + +const DialogRoot = () => { + return ( +
+ ) +} + +export default DialogRoot diff --git a/src/render/app/index.js b/src/render/app/index.js index 1b7ce474..cad09d67 100644 --- a/src/render/app/index.js +++ b/src/render/app/index.js @@ -2,7 +2,7 @@ import React from 'react' import classname from 'classnames' import { useLocation } from 'react-router-dom' import { App } from '@beaverbuilder/app-core' -import { Page, Env } from 'assistant/ui' +import { Page, Env, Dialog } from 'assistant/ui' import { useSystemState } from 'assistant/data' import Sidebar from './side-bar' import './style.scss' @@ -39,6 +39,7 @@ const AppMain = () => { />
) } + ) } From 90fadd8d221316696114b1516ce7b77aebb6b0e4 Mon Sep 17 00:00:00 2001 From: Justin Busa Date: Tue, 11 May 2021 13:57:08 -0700 Subject: [PATCH 4/5] Refresh cached user data on page load to ensure subscription is current. --- src/system/data/system/index.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/system/data/system/index.js b/src/system/data/system/index.js index 588ae03c..3ca9fa21 100644 --- a/src/system/data/system/index.js +++ b/src/system/data/system/index.js @@ -33,6 +33,13 @@ registerStore( KEY, { selectors, } ) +if ( cloud.auth.isConnected() ) { + cloud.user.get().then( response => { + const { setCloudUser } = getDispatch( KEY ) + setCloudUser( response.data ) + } ) +} + export const getSystemStore = () => getStore( KEY ) export const useSystemState = shouldUpdate => useStore( KEY, shouldUpdate ) From d339afdcef4ec405cd41214a42dd57a753e2c373 Mon Sep 17 00:00:00 2001 From: Justin Busa Date: Tue, 11 May 2021 14:05:14 -0700 Subject: [PATCH 5/5] Published packages --- package.json | 6 +++--- packages/@beaverbuilder/fluid/package-lock.json | 2 +- packages/@beaverbuilder/fluid/package.json | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 49bf427d..1d9d776c 100644 --- a/package.json +++ b/package.json @@ -22,9 +22,9 @@ "dependencies": { "@beaverbuilder/app-core": "^0.2.2", "@beaverbuilder/box": "0.0.2", - "@beaverbuilder/cloud": "^0.4.8", - "@beaverbuilder/cloud-ui": "^0.7.3", - "@beaverbuilder/fluid": "^0.7.4", + "@beaverbuilder/cloud": "^0.4.9", + "@beaverbuilder/cloud-ui": "^0.7.4", + "@beaverbuilder/fluid": "^0.7.5", "@beaverbuilder/fluid-docs": "0.0.3", "@beaverbuilder/forms": "^0.3.7", "@beaverbuilder/icons": "0.0.2", diff --git a/packages/@beaverbuilder/fluid/package-lock.json b/packages/@beaverbuilder/fluid/package-lock.json index 01f98a99..1d59b6a8 100644 --- a/packages/@beaverbuilder/fluid/package-lock.json +++ b/packages/@beaverbuilder/fluid/package-lock.json @@ -1,6 +1,6 @@ { "name": "@beaverbuilder/fluid", - "version": "0.7.4", + "version": "0.7.5", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/@beaverbuilder/fluid/package.json b/packages/@beaverbuilder/fluid/package.json index 3a3e07fe..2a4d1243 100644 --- a/packages/@beaverbuilder/fluid/package.json +++ b/packages/@beaverbuilder/fluid/package.json @@ -1,6 +1,6 @@ { "name": "@beaverbuilder/fluid", - "version": "0.7.4", + "version": "0.7.5", "description": "Common UI environment for Beaver Builder and Assistant projects.", "author": "The Beaver Builder Team", "license": "GPL-2.0+",