diff --git a/.editorconfig b/.editorconfig index 1d658f5d..2cbaaa17 100644 --- a/.editorconfig +++ b/.editorconfig @@ -13,7 +13,7 @@ insert_final_newline = true trim_trailing_whitespace = true indent_style = tab -[*.{js}] +[*.{js,scss}] indent_style = space indent_size = 2 diff --git a/.eslintrc.js b/.eslintrc.js index 413f81e1..9e26051a 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -5,7 +5,7 @@ module.exports = { root: true, parser: '@typescript-eslint/parser', parserOptions: { - project: [ './jsconfig.json', 'jsconfig.eslint.json' ], + project: [ './tsconfig.json', 'tsconfig.eslint.json' ], }, extends: [ 'plugin:@wordpress/eslint-plugin/recommended' ], settings: { @@ -15,7 +15,7 @@ module.exports = { 'import/resolver': { typescript: { alwaysTryTypes: true, - project: [ './jsconfig.json', 'jsconfig.eslint.json' ], + project: [ './tsconfig.json', 'tsconfig.eslint.json' ], }, }, }, diff --git a/.lintstagedrc b/.lintstagedrc index 8444a777..cc18341a 100644 --- a/.lintstagedrc +++ b/.lintstagedrc @@ -1,5 +1,6 @@ { "**/*.(json|yml|yaml)": "prettier --write", + "**/*.(css|scss|sass)": "stylelint --fix", "**/*.(js|jsx|cjs|mjs|ts|tsx)": "eslint --ext .js,.jsx,.cjs,.mjs,.ts,.tsx --fix", "**/*.php": "php vendor/bin/phpcbf --standard=phpcs.xml.dist -s --report=summary" } diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 00000000..8b9eb42a --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,3 @@ +{ + "extends": [ "@wordpress/stylelint-config/scss" ] +} diff --git a/includes/demo.php b/includes/demo.php index d28bc33f..4cabd51d 100644 --- a/includes/demo.php +++ b/includes/demo.php @@ -11,7 +11,7 @@ use WP_List_Table; /** - * Adds WP Notify icon after the user avatar in the top admin bar in the "secondary" position + * Adds WP Notifications icon after the user avatar in the top admin bar in the "secondary" position * * @param WP_Admin_Bar $wp_admin_bar Toolbar instance. */ @@ -20,22 +20,11 @@ function admin_bar_item( WP_Admin_Bar $wp_admin_bar ) { return; } - $aside = sprintf( - '', - __( 'Notifications' ) - ); - $args = array( - 'id' => 'wp-notify', - 'title' => sprintf( "%s", __( 'Notifications' ) ), + 'id' => 'wp-notification-hub', + 'title' => __( 'loading' ), 'parent' => 'top-secondary', 'meta' => array( - 'html' => $aside, 'tabindex' => 0, ), ); @@ -44,30 +33,31 @@ function admin_bar_item( WP_Admin_Bar $wp_admin_bar ) { add_action( 'admin_bar_menu', '\WP\Notifications\admin_bar_item', 1 ); /** - * Adds WP Notify area at the top of the dashboard + * Adds WP Notifications area at the top of the dashboard */ function admin_notice() { - echo '
'; + echo '
'; } add_action( 'admin_notices', '\WP\Notifications\admin_notice' ); /** - * Register and enqueue a wp notify scripts and stylesheet in WordPress admin. + * Register and enqueue a wp-notifications scripts and stylesheet in WordPress admin. */ function enqueue_admin_assets() { /* Load styles */ - wp_register_style( 'wp_notify_css', WP_FEATURE_NOTIFICATION_PLUGIN_DIR_URL . '/build/wp-notify.css', array(), WP_FEATURE_NOTIFICATION_PLUGIN_VERSION ); - wp_enqueue_style( 'wp_notify_css' ); + wp_register_style( 'wp_notifications', WP_FEATURE_NOTIFICATION_PLUGIN_DIR_URL . '/build/wp-notifications.css', array(), WP_FEATURE_NOTIFICATION_PLUGIN_VERSION ); + wp_enqueue_style( 'wp_notifications' ); /* Load scripts */ - $asset = include WP_FEATURE_NOTIFICATION_PLUGIN_DIR . '/build/wp-notify.asset.php'; - wp_register_script( 'wp_notify_js', WP_FEATURE_NOTIFICATION_PLUGIN_DIR_URL . '/build/wp-notify.js', $asset['dependencies'], WP_FEATURE_NOTIFICATION_PLUGIN_VERSION, true ); - wp_enqueue_script( 'wp_notify_js' ); + $asset = include WP_FEATURE_NOTIFICATION_PLUGIN_DIR . '/build/wp-notifications.asset.php'; + wp_register_script( 'wp_notifications', WP_FEATURE_NOTIFICATION_PLUGIN_DIR_URL . '/build/wp-notifications.js', $asset['dependencies'], WP_FEATURE_NOTIFICATION_PLUGIN_VERSION, true ); + wp_enqueue_script( 'wp_notifications' ); + wp_localize_script( - 'wp_notify_js', - 'wp_notify_data', + 'wp_notifications', + 'wp_notifications_data', array( - 'settingsPage' => esc_url( admin_url( 'options-general.php?page=wp-notify' ) ), + 'settingsPage' => esc_url( admin_url( 'options-general.php?page=notifications' ) ), ) ); } @@ -81,7 +71,7 @@ function enqueue_admin_assets() { * @return void */ function add_admin_options_page() { - add_options_page( 'Notifications', 'Notifications', 'manage_options', 'wp-notify', '\WP\Notifications\render_admin_options_page' ); + add_options_page( 'Notifications', 'Notifications', 'manage_options', 'notifications', '\WP\Notifications\render_admin_options_page' ); } add_action( 'admin_menu', '\WP\Notifications\add_admin_options_page' ); @@ -233,7 +223,7 @@ function init_table() { * Registers our dashboard widget. */ function dashboard_widget() { - add_meta_box( 'wp_notify', __( 'WP Notify' ), '\WP\Notifications\render_dashboard_widget', 'dashboard', 'side', 'high' ); + add_meta_box( 'wp_notifications', __( 'WP Notifications Feature' ), '\WP\Notifications\render_dashboard_widget', 'dashboard', 'side', 'high' ); } add_action( 'wp_dashboard_setup', '\WP\Notifications\dashboard_widget' ); @@ -257,8 +247,8 @@ function render_dashboard_widget() {

- - + +

diff --git a/includes/restapi/fake_api.json b/includes/restapi/fake_api.json index 485f45e6..1b192ae2 100644 --- a/includes/restapi/fake_api.json +++ b/includes/restapi/fake_api.json @@ -1,102 +1,71 @@ [ { - "id": 1, + "id": 15, "context": "dashboard", "title": "Try this new Notification feature", "source": "#WP-Notify", - "date": 1664992015, - "message": "We have just added a wonderful feature! You might want to give it a try so click on the bell icon on the right side of the adminbar.", + "date": 1680974130, + "message": "👋 Hello from the WP Feature Notifications team! Thank you for testing out the plugin. You might want to give it a try so click on the bell icon on the right side of the adminbar.", + "dismissible": false, "icon": { "src": "https://raw.githubusercontent.com/erikyo/wp-notify/design_implementation/src/images/i.svg" }, "action": { - "acceptMessage": "Try this new feature", - "acceptLink": "https://github.com/WordPress/wp-notify", - "dismissible": false - } - }, - { - "id": 2, - "context": "dashboard", - "title": "Message variant #1", - "date": 1654866071, - "message": "This is an example of on-page message variant #1. It has a title, a message, an image, an action button with a URL, is dismissable.", - "source": "#Test", - "icon": { - "src": "https://source.unsplash.com/random/400×400/?notify" - }, - "action": { - "acceptMessage": "TEST", - "acceptLink": "https://github.com/WordPress/wp-notify", - "dismissible": true, - "unread": true + "acceptMessage": "Check out the source", + "acceptLink": "https://github.com/WordPress/wp-feature-notifications" } }, { - "id": 3, + "id": 14, "title": "Message variant #1 (copy)", - "date": 1654866081, + "date": 1680799521, + "dismissible": true, "action": { - "acceptMessage": "TEST", - "acceptLink": "https://github.com/WordPress/wp-notify" + "acceptMessage": "Test", + "acceptLink": "#" } }, { - "id": 4, + "id": 13, "context": "adminbar", "title": "Message variant #2", "source": "#WP-Notify", - "date": 1654866091, + "date": 1680744049, "message": "This is an example of on-page message variant #2. It has a title, a message, a custom date, an action button with a URL, is dismissable, but has no images.", + "dismissible": true, + "status": "new", "action": { - "acceptMessage": "OK", - "acceptLink": "https://github.com/WordPress/wp-notify", - "dismissible": true, - "unread": true - } - }, - { - "id": 5, - "context": "dashboard", - "date": 1654866101, - "title": "Message variant #3", - "message": "if you're wondering where notice #2 is try looking at the adminbar at the top right near the bell icon 😉.", - "icon": { - "src": "https://gifimage.net/wp-content/uploads/2018/10/animation-notification-gif-2.gif" - }, - "action": { - "acceptLink": "https://github.com/WordPress/wp-notify", - "dismissible": true, - "unread": true + "acceptMessage": "Ok", + "acceptLink": "#" } }, { - "id": 6, + "id": 12, "title": "WordPress", "message": "WordPress was successfully updated to version 6.1", - "date": 1664992015, + "date": 1680702629, "source": "WordPress", + "status": "new", "action": { "acceptMessage": "Read what's new in 6.1", - "acceptLink": "#", - "unread": true + "acceptLink": "#" } }, { - "id": 7, + "id": 11, "message": "WordPress was successfully updated to version 5.9.", "source": "WordPress", - "date": 1654866081, + "date": 1680699690, "image": { "svg": "" } }, { - "id": 8, + "id": 10, "title": "WordPress", "message": "WordPress was successfully updated to version 6.1", "source": "WordPress", - "date": 1654850000, + "date": 1680652801, "action": { "acceptMessage": "Read what's new in 6.1", "acceptLink": "#" @@ -106,31 +75,31 @@ "id": 9, "title": "WordPress", "message": "WordPress was successfully updated to version 6.1", + "source": "WordPress", + "date": 1680406684, "action": { "acceptMessage": "Read what's new in 6.1", - "acceptLink": "#", - "source": "WordPress", - "date": 1654840000 + "acceptLink": "#" } }, { - "id": 10, + "id": 8, "message": "There is a new version of Contact Form 7 available.", - "date": 1654830000, + "source": "Plugins Updates", + "date": 1680296658, "icon": { "src": "https://ps.w.org/contact-form-7/assets/icon-256x256.png" }, "action": { "acceptMessage": "Update now", - "acceptLink": "#", - "source": "Plugins Updates" + "acceptLink": "#" } }, { - "id": 11, + "id": 7, "title": "Akismet", "source": "Akismet", - "date": 1654820000, + "date": 1680155149, "icon": { "src": "https://ps.w.org/akismet/assets/icon-256x256.png" }, @@ -140,61 +109,61 @@ } }, { - "id": 12, + "id": 6, "title": "Default", "acceptLink": "#", "source": "Wordpress", - "date": 1654800000, + "date": 1680126176, "icon": { "dashicons": "paperclip" } }, { - "id": 13, + "id": 5, "severity": "alert", "title": "Site Health status", "message": "Your site has critical issues that should be addressed", "source": "Wordpress", - "date": 1654800000, + "date": 1680106280, "icon": { "dashicons": "sos" } }, { - "id": 14, + "id": 4, "severity": "warning", "title": "Some plugins needs to be updated", "source": "Wordpress", - "date": 1654800000, + "date": 1679953118, "icon": { "dashicons": "admin-plugins" } }, { - "id": 15, + "id": 3, "severity": "success", "title": "Word Camp Europe 2023", "message": "Word Camp was successfully updated to version 2023", "source": "Wordpress", - "date": 1654800000, + "date": 1679915144, "icon": { "dashicons": "megaphone" } }, { - "id": 16, + "id": 2, "message": "WordPress User has left a message on Lorem Ipsum.", "source": "Comment", - "date": 1654400000, + "date": 1679903259, "icon": { "src": "https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y" } }, { - "id": 17, + "id": 1, "message": "WordPress User has left a message on Lorem Ipsum.", "source": "Comment", - "date": 1654000000, + "date": 1679863907, "icon": { "src": "https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y" } diff --git a/jsconfig.json b/jsconfig.json deleted file mode 100644 index c8d11b3a..00000000 --- a/jsconfig.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "compilerOptions": { - "checkJs": true, - "types": [ "jest" ], - "baseUrl": "./src" - }, - "include": [ "./src/**/*.js", "./src/**/*.jsx" ], - "exclude": [ "./node_modules" ] -} diff --git a/package-lock.json b/package-lock.json index e5cfe82a..8e864acd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "@wordpress/wp-feature-notifications", + "name": "wp-feature-notifications", "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "@wordpress/wp-feature-notifications", + "name": "wp-feature-notifications", "version": "0.1.0", "license": "GPL-2.0-or-later", "dependencies": { @@ -14,11 +14,13 @@ "devDependencies": { "@types/jest": "^29.5.0", "@wordpress/api-fetch": "^6.27.0", + "@wordpress/components": "^23.7.0", "@wordpress/data": "^9.0.0", "@wordpress/e2e-test-utils": "^10.1.0", "@wordpress/env": "^5.15.0", "@wordpress/i18n": "^4.30.0", "@wordpress/icons": "^9.21.0", + "@wordpress/keyboard-shortcuts": "^4.7.0", "@wordpress/scripts": "^26.1.0", "classnames": "^2.3.2", "eslint-import-resolver-typescript": "^3.5.5", @@ -27,6 +29,8 @@ "lint-staged": "^13.2.0", "moment": "^2.29.3", "prettier": "npm:wp-prettier@^2.8.5", + "re-resizable": "^6.9.9", + "react-resizable": "^3.0.5", "typescript": "^5.0.3" }, "engines": { @@ -1972,6 +1976,174 @@ "node": ">=10.0.0" } }, + "node_modules/@emotion/babel-plugin": { + "version": "11.10.6", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz", + "integrity": "sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==", + "dev": true, + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.0", + "@emotion/memoize": "^0.8.0", + "@emotion/serialize": "^1.1.1", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.1.3" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@emotion/cache": { + "version": "11.10.7", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.7.tgz", + "integrity": "sha512-VLl1/2D6LOjH57Y8Vem1RoZ9haWF4jesHDGiHtKozDQuBIkJm2gimVo0I02sWCuzZtVACeixTVB4jeE8qvCBoQ==", + "dev": true, + "dependencies": { + "@emotion/memoize": "^0.8.0", + "@emotion/sheet": "^1.2.1", + "@emotion/utils": "^1.2.0", + "@emotion/weak-memoize": "^0.3.0", + "stylis": "4.1.3" + } + }, + "node_modules/@emotion/css": { + "version": "11.10.6", + "resolved": "https://registry.npmjs.org/@emotion/css/-/css-11.10.6.tgz", + "integrity": "sha512-88Sr+3heKAKpj9PCqq5A1hAmAkoSIvwEq1O2TwDij7fUtsJpdkV4jMTISSTouFeRvsGvXIpuSuDQ4C1YdfNGXw==", + "dev": true, + "dependencies": { + "@emotion/babel-plugin": "^11.10.6", + "@emotion/cache": "^11.10.5", + "@emotion/serialize": "^1.1.1", + "@emotion/sheet": "^1.2.1", + "@emotion/utils": "^1.2.0" + } + }, + "node_modules/@emotion/hash": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz", + "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==", + "dev": true + }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz", + "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==", + "dev": true, + "dependencies": { + "@emotion/memoize": "^0.8.0" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==", + "dev": true + }, + "node_modules/@emotion/react": { + "version": "11.10.6", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.6.tgz", + "integrity": "sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.10.6", + "@emotion/cache": "^11.10.5", + "@emotion/serialize": "^1.1.1", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", + "@emotion/utils": "^1.2.0", + "@emotion/weak-memoize": "^0.3.0", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/serialize": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz", + "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==", + "dev": true, + "dependencies": { + "@emotion/hash": "^0.9.0", + "@emotion/memoize": "^0.8.0", + "@emotion/unitless": "^0.8.0", + "@emotion/utils": "^1.2.0", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/sheet": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz", + "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==", + "dev": true + }, + "node_modules/@emotion/styled": { + "version": "11.10.6", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.6.tgz", + "integrity": "sha512-OXtBzOmDSJo5Q0AFemHCfl+bUueT8BIcPSxu0EGTpGk6DmI5dnhSzQANm1e1ze0YZL7TDyAyy6s/b/zmGOS3Og==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.10.6", + "@emotion/is-prop-valid": "^1.2.0", + "@emotion/serialize": "^1.1.1", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", + "@emotion/utils": "^1.2.0" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0-rc.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/unitless": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", + "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==", + "dev": true + }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz", + "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==", + "dev": true, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@emotion/utils": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz", + "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==", + "dev": true + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz", + "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==", + "dev": true + }, "node_modules/@es-joy/jsdoccomment": { "version": "0.36.1", "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.36.1.tgz", @@ -2099,6 +2271,34 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.6.tgz", + "integrity": "sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==", + "dev": true + }, + "node_modules/@floating-ui/dom": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.6.tgz", + "integrity": "sha512-02vxFDuvuVPs22iJICacezYJyf7zwwOCWkPNkWNBr1U0Qt1cKFYzWvxts0AmqcOQGwt/3KJWcWIgtbUU38keyw==", + "dev": true, + "dependencies": { + "@floating-ui/core": "^1.2.6" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-1.0.0.tgz", + "integrity": "sha512-uiOalFKPG937UCLm42RxjESTWUVpbbatvlphQAU6bsv+ence6IoVG8JOUZcy8eW81NkU+Idiwvx10WFLmR4MIg==", + "dev": true, + "dependencies": { + "@floating-ui/dom": "^1.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -2609,6 +2809,70 @@ "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==", "dev": true }, + "node_modules/@motionone/animation": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.15.1.tgz", + "integrity": "sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==", + "dev": true, + "dependencies": { + "@motionone/easing": "^10.15.1", + "@motionone/types": "^10.15.1", + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/dom": { + "version": "10.15.5", + "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.15.5.tgz", + "integrity": "sha512-Xc5avlgyh3xukU9tydh9+8mB8+2zAq+WlLsC3eEIp7Ax7DnXgY7Bj/iv0a4X2R9z9ZFZiaXK3BO0xMYHKbAAdA==", + "dev": true, + "dependencies": { + "@motionone/animation": "^10.15.1", + "@motionone/generators": "^10.15.1", + "@motionone/types": "^10.15.1", + "@motionone/utils": "^10.15.1", + "hey-listen": "^1.0.8", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/easing": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.15.1.tgz", + "integrity": "sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==", + "dev": true, + "dependencies": { + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/generators": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.15.1.tgz", + "integrity": "sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==", + "dev": true, + "dependencies": { + "@motionone/types": "^10.15.1", + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/types": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.15.1.tgz", + "integrity": "sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA==", + "dev": true + }, + "node_modules/@motionone/utils": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.15.1.tgz", + "integrity": "sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==", + "dev": true, + "dependencies": { + "@motionone/types": "^10.15.1", + "hey-listen": "^1.0.8", + "tslib": "^2.3.1" + } + }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -2779,6 +3043,16 @@ "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==", "dev": true }, + "node_modules/@popperjs/core": { + "version": "2.11.7", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", + "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@puppeteer/browsers": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-0.3.2.tgz", @@ -3996,6 +4270,24 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/@use-gesture/core": { + "version": "10.2.26", + "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.2.26.tgz", + "integrity": "sha512-NyFpQ3iID9iFBROXyyvU1D0NK+t+dP+WAVByhCvqHUenpxLD2NlRLVRpoK3XGGwksr6mU3PvZ2Nm4q0q+gLJPA==", + "dev": true + }, + "node_modules/@use-gesture/react": { + "version": "10.2.26", + "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.2.26.tgz", + "integrity": "sha512-0QhaE5mhaQbFlip4MX7n1nwCX8gax6Da1LsP2fZ/BU6xW9zyEmV6NX7DPelDxq1rr2NiBJh30vx9RIp80YeA/A==", + "dev": true, + "dependencies": { + "@use-gesture/core": "10.2.26" + }, + "peerDependencies": { + "react": ">= 16.8.0" + } + }, "node_modules/@webassemblyjs/ast": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", @@ -4178,6 +4470,20 @@ } } }, + "node_modules/@wordpress/a11y": { + "version": "3.30.0", + "resolved": "https://registry.npmjs.org/@wordpress/a11y/-/a11y-3.30.0.tgz", + "integrity": "sha512-bNsYcoUWzREbjDjeHnhD6b74x+xQ9e6kGn9LIT5DILoPOM1S4NqMvJTnBnvSakfLZx2ZjAFJ0VLUOUIOJRmZxw==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.16.0", + "@wordpress/dom-ready": "^3.30.0", + "@wordpress/i18n": "^4.30.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/@wordpress/api-fetch": { "version": "6.27.0", "resolved": "https://registry.npmjs.org/@wordpress/api-fetch/-/api-fetch-6.27.0.tgz", @@ -4242,6 +4548,75 @@ "node": ">=14" } }, + "node_modules/@wordpress/components": { + "version": "23.7.0", + "resolved": "https://registry.npmjs.org/@wordpress/components/-/components-23.7.0.tgz", + "integrity": "sha512-iLEbly3J7E8VAtIKSRz0YAIzVpeA2Cvdl1NKaG8SYcToTLH1K6AVlIfiezYnL5l16Mo5gUEV9IPmOLWd7smMZQ==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.16.0", + "@emotion/cache": "^11.7.1", + "@emotion/css": "^11.7.1", + "@emotion/react": "^11.7.1", + "@emotion/serialize": "^1.0.2", + "@emotion/styled": "^11.6.0", + "@emotion/utils": "^1.0.0", + "@floating-ui/react-dom": "1.0.0", + "@use-gesture/react": "^10.2.24", + "@wordpress/a11y": "^3.30.0", + "@wordpress/compose": "^6.7.0", + "@wordpress/date": "^4.30.0", + "@wordpress/deprecated": "^3.30.0", + "@wordpress/dom": "^3.30.0", + "@wordpress/element": "^5.7.0", + "@wordpress/escape-html": "^2.30.0", + "@wordpress/hooks": "^3.30.0", + "@wordpress/html-entities": "^3.30.0", + "@wordpress/i18n": "^4.30.0", + "@wordpress/icons": "^9.21.0", + "@wordpress/is-shallow-equal": "^4.30.0", + "@wordpress/keycodes": "^3.30.0", + "@wordpress/primitives": "^3.28.0", + "@wordpress/private-apis": "^0.12.0", + "@wordpress/rich-text": "^6.7.0", + "@wordpress/warning": "^2.30.0", + "change-case": "^4.1.2", + "classnames": "^2.3.1", + "colord": "^2.7.0", + "date-fns": "^2.28.0", + "deepmerge": "^4.3.0", + "dom-scroll-into-view": "^1.2.1", + "downshift": "^6.0.15", + "fast-deep-equal": "^3.1.3", + "framer-motion": "^7.6.1", + "gradient-parser": "^0.1.5", + "highlight-words-core": "^1.2.2", + "is-plain-object": "^5.0.0", + "lodash": "^4.17.21", + "memize": "^1.1.0", + "path-to-regexp": "^6.2.1", + "re-resizable": "^6.4.0", + "react-colorful": "^5.3.1", + "reakit": "^1.3.8", + "remove-accents": "^0.4.2", + "use-lilius": "^2.0.1", + "uuid": "^8.3.0", + "valtio": "1.7.0" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, + "node_modules/@wordpress/components/node_modules/path-to-regexp": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz", + "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==", + "dev": true + }, "node_modules/@wordpress/compose": { "version": "6.7.0", "resolved": "https://registry.npmjs.org/@wordpress/compose/-/compose-6.7.0.tgz", @@ -4297,6 +4672,21 @@ "react": "^18.0.0" } }, + "node_modules/@wordpress/date": { + "version": "4.30.0", + "resolved": "https://registry.npmjs.org/@wordpress/date/-/date-4.30.0.tgz", + "integrity": "sha512-Ip//fBmaYS8F6P933EXpjWmblX7KMs/f9WJ7E3B5tfuNLRETDUq0CTTEimtoEicdBowDAQeY0sRLPd+zLXqLfw==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.16.0", + "@wordpress/deprecated": "^3.30.0", + "moment": "^2.29.4", + "moment-timezone": "^0.5.40" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/@wordpress/dependency-extraction-webpack-plugin": { "version": "4.13.0", "resolved": "https://registry.npmjs.org/@wordpress/dependency-extraction-webpack-plugin/-/dependency-extraction-webpack-plugin-4.13.0.tgz", @@ -4339,6 +4729,18 @@ "node": ">=12" } }, + "node_modules/@wordpress/dom-ready": { + "version": "3.30.0", + "resolved": "https://registry.npmjs.org/@wordpress/dom-ready/-/dom-ready-3.30.0.tgz", + "integrity": "sha512-9vsuxCr3CbXajOck4SXZJWD0+Xq5d9XCP5niQgTJgFqNbvLjmBbN2vtmUAQNNYKzemqBMMqoy/RaNzCTDHdwVg==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.16.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/@wordpress/e2e-test-utils": { "version": "10.1.0", "resolved": "https://registry.npmjs.org/@wordpress/e2e-test-utils/-/e2e-test-utils-10.1.0.tgz", @@ -4496,6 +4898,18 @@ "node": ">=12" } }, + "node_modules/@wordpress/html-entities": { + "version": "3.30.0", + "resolved": "https://registry.npmjs.org/@wordpress/html-entities/-/html-entities-3.30.0.tgz", + "integrity": "sha512-Hzqn4WSbL2gYBssMruMadJo9LTrupK+RQLMNO87Zx6sDADu1e4sSLrsfLVvX9hMNmDp3SQxUpt2CHWLxzlVf3g==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.16.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/@wordpress/i18n": { "version": "4.30.0", "resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-4.30.0.tgz", @@ -4575,6 +4989,25 @@ "jest": ">=29" } }, + "node_modules/@wordpress/keyboard-shortcuts": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/@wordpress/keyboard-shortcuts/-/keyboard-shortcuts-4.7.0.tgz", + "integrity": "sha512-+/+CkkZKRYza1A3mmL7peC1HRlhBqe8RFMXIlyIP+lpEtpN5Ogt/AlVq/ECP1XNy4PP0wpBihrDqb2HkjDhA+w==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.16.0", + "@wordpress/data": "^9.0.0", + "@wordpress/element": "^5.7.0", + "@wordpress/keycodes": "^3.30.0", + "rememo": "^4.0.0" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, "node_modules/@wordpress/keycodes": { "version": "3.30.0", "resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-3.30.0.tgz", @@ -4686,6 +5119,31 @@ "redux": ">=4" } }, + "node_modules/@wordpress/rich-text": { + "version": "6.7.0", + "resolved": "https://registry.npmjs.org/@wordpress/rich-text/-/rich-text-6.7.0.tgz", + "integrity": "sha512-OYgQx7C2c1TP1ofYOkH1u7mFESGY2R0HOJazIP3vZbDCRRVsA3FSgR4jzvo3rZD+pj6HIjknnTtKXd7TkGwK6A==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.16.0", + "@wordpress/a11y": "^3.30.0", + "@wordpress/compose": "^6.7.0", + "@wordpress/data": "^9.0.0", + "@wordpress/deprecated": "^3.30.0", + "@wordpress/element": "^5.7.0", + "@wordpress/escape-html": "^2.30.0", + "@wordpress/i18n": "^4.30.0", + "@wordpress/keycodes": "^3.30.0", + "memize": "^1.1.0", + "rememo": "^4.0.0" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, "node_modules/@wordpress/scripts": { "version": "26.1.0", "resolved": "https://registry.npmjs.org/@wordpress/scripts/-/scripts-26.1.0.tgz", @@ -5449,6 +5907,21 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, + "node_modules/babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + } + }, "node_modules/babel-plugin-polyfill-corejs2": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz", @@ -5662,6 +6135,12 @@ "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", "dev": true }, + "node_modules/body-scroll-lock": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz", + "integrity": "sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==", + "dev": true + }, "node_modules/bonjour-service": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.1.1.tgz", @@ -6306,6 +6785,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -6445,6 +6933,12 @@ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "dev": true }, + "node_modules/compute-scroll-into-view": { + "version": "1.0.20", + "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz", + "integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==", + "dev": true + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -7083,6 +7577,19 @@ "node": ">=12" } }, + "node_modules/date-fns": { + "version": "2.29.3", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz", + "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==", + "dev": true, + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -7472,6 +7979,12 @@ "node": ">=6.0.0" } }, + "node_modules/dom-scroll-into-view": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/dom-scroll-into-view/-/dom-scroll-into-view-1.2.1.tgz", + "integrity": "sha512-LwNVg3GJOprWDO+QhLL1Z9MMgWe/KAFLxVWKzjRTxNSPn8/LLDIfmuG71YHznXCqaqTjvHJDYO1MEAgX6XCNbQ==", + "dev": true + }, "node_modules/dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -7563,6 +8076,28 @@ "tslib": "^2.0.3" } }, + "node_modules/downshift": { + "version": "6.1.12", + "resolved": "https://registry.npmjs.org/downshift/-/downshift-6.1.12.tgz", + "integrity": "sha512-7XB/iaSJVS4T8wGFT3WRXmSF1UlBHAA40DshZtkrIscIN+VC+Lh363skLxFTvJwtNgHxAMDGEHT4xsyQFWL+UA==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.14.8", + "compute-scroll-into-view": "^1.0.17", + "prop-types": "^15.7.2", + "react-is": "^17.0.2", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "react": ">=16.12.0" + } + }, + "node_modules/downshift/node_modules/react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", + "dev": true + }, "node_modules/duplexer": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", @@ -9122,6 +9657,12 @@ "find-process": "bin/find-process.js" } }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==", + "dev": true + }, "node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -9243,6 +9784,47 @@ "url": "https://www.patreon.com/infusion" } }, + "node_modules/framer-motion": { + "version": "7.10.3", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-7.10.3.tgz", + "integrity": "sha512-k2ccYeZNSpPg//HTaqrU+4pRq9f9ZpaaN7rr0+Rx5zA4wZLbk547wtDzge2db1sB+1mnJ6r59P4xb+aEIi/W+w==", + "dev": true, + "dependencies": { + "@motionone/dom": "^10.15.3", + "hey-listen": "^1.0.8", + "tslib": "2.4.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, + "node_modules/framer-motion/node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "dev": true, + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/framer-motion/node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "dev": true, + "optional": true + }, + "node_modules/framer-motion/node_modules/tslib": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==", + "dev": true + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -9609,6 +10191,15 @@ "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", "dev": true }, + "node_modules/gradient-parser": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/gradient-parser/-/gradient-parser-0.1.5.tgz", + "integrity": "sha512-+uPlcVbjrKOnTzvz0MjTj7BfACj8OmxIa1moIjJV7btvhUMSJk0D47RfDCgDrZE3dYMz9Cf5xKJwnrKLjUq0KQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/grapheme-splitter": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz", @@ -9736,6 +10327,33 @@ "tslib": "^2.0.3" } }, + "node_modules/hey-listen": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", + "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==", + "dev": true + }, + "node_modules/highlight-words-core": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/highlight-words-core/-/highlight-words-core-1.2.2.tgz", + "integrity": "sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg==", + "dev": true + }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dev": true, + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "dev": true + }, "node_modules/homedir-polyfill": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz", @@ -12918,6 +13536,18 @@ "node": "*" } }, + "node_modules/moment-timezone": { + "version": "0.5.43", + "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.43.tgz", + "integrity": "sha512-72j3aNyuIsDxdF1i7CEgV2FfxM1r6aaqJyLB2vwb33mXYyoyLly+F1zbWqhA3/bVIoJ4szlUoMbUnVdid32NUQ==", + "dev": true, + "dependencies": { + "moment": "^2.29.4" + }, + "engines": { + "node": "*" + } + }, "node_modules/mousetrap": { "version": "1.6.5", "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz", @@ -14721,6 +15351,12 @@ "node": ">= 0.10" } }, + "node_modules/proxy-compare": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.3.0.tgz", + "integrity": "sha512-c3L2CcAi7f7pvlD0D7xsF+2CQIW8C3HaYx2Pfgq8eA4HAl3GAH6/dVYsyBbYF/0XJs2ziGLrzmz5fmzPm6A0pQ==", + "dev": true + }, "node_modules/proxy-from-env": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", @@ -14987,6 +15623,16 @@ "node": ">=0.10.0" } }, + "node_modules/re-resizable": { + "version": "6.9.9", + "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.9.tgz", + "integrity": "sha512-l+MBlKZffv/SicxDySKEEh42hR6m5bAHfNu3Tvxks2c4Ah+ldnWjfnVRwxo/nxF27SsUsxDS0raAzFuJNKABXA==", + "dev": true, + "peerDependencies": { + "react": "^16.13.1 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", @@ -14999,6 +15645,16 @@ "node": ">=0.10.0" } }, + "node_modules/react-colorful": { + "version": "5.6.1", + "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz", + "integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==", + "dev": true, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -15012,6 +15668,20 @@ "react": "^18.2.0" } }, + "node_modules/react-draggable": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz", + "integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==", + "dev": true, + "dependencies": { + "clsx": "^1.1.1", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": ">= 16.3.0", + "react-dom": ">= 16.3.0" + } + }, "node_modules/react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", @@ -15027,6 +15697,19 @@ "node": ">=0.10.0" } }, + "node_modules/react-resizable": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.5.tgz", + "integrity": "sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==", + "dev": true, + "dependencies": { + "prop-types": "15.x", + "react-draggable": "^4.0.3" + }, + "peerDependencies": { + "react": ">= 16.3" + } + }, "node_modules/read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -15168,6 +15851,62 @@ "node": ">=8.10.0" } }, + "node_modules/reakit": { + "version": "1.3.11", + "resolved": "https://registry.npmjs.org/reakit/-/reakit-1.3.11.tgz", + "integrity": "sha512-mYxw2z0fsJNOQKAEn5FJCPTU3rcrY33YZ/HzoWqZX0G7FwySp1wkCYW79WhuYMNIUFQ8s3Baob1RtsEywmZSig==", + "dev": true, + "dependencies": { + "@popperjs/core": "^2.5.4", + "body-scroll-lock": "^3.1.5", + "reakit-system": "^0.15.2", + "reakit-utils": "^0.15.2", + "reakit-warning": "^0.6.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/ariakit" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.8.0 || ^17.0.0" + } + }, + "node_modules/reakit/node_modules/reakit-system": { + "version": "0.15.2", + "resolved": "https://registry.npmjs.org/reakit-system/-/reakit-system-0.15.2.tgz", + "integrity": "sha512-TvRthEz0DmD0rcJkGamMYx+bATwnGNWJpe/lc8UV2Js8nnPvkaxrHk5fX9cVASFrWbaIyegZHCWUBfxr30bmmA==", + "dev": true, + "dependencies": { + "reakit-utils": "^0.15.2" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.8.0 || ^17.0.0" + } + }, + "node_modules/reakit/node_modules/reakit-utils": { + "version": "0.15.2", + "resolved": "https://registry.npmjs.org/reakit-utils/-/reakit-utils-0.15.2.tgz", + "integrity": "sha512-i/RYkq+W6hvfFmXw5QW7zvfJJT/K8a4qZ0hjA79T61JAFPGt23DsfxwyBbyK91GZrJ9HMrXFVXWMovsKBc1qEQ==", + "dev": true, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.8.0 || ^17.0.0" + } + }, + "node_modules/reakit/node_modules/reakit-warning": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/reakit-warning/-/reakit-warning-0.6.2.tgz", + "integrity": "sha512-z/3fvuc46DJyD3nJAUOto6inz2EbSQTjvI/KBQDqxwB0y02HDyeP8IWOJxvkuAUGkWpeSx+H3QWQFSNiPcHtmw==", + "dev": true, + "dependencies": { + "reakit-utils": "^0.15.2" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0" + } + }, "node_modules/rechoir": { "version": "0.7.1", "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz", @@ -15290,6 +16029,12 @@ "jsesc": "bin/jsesc" } }, + "node_modules/rememo": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/rememo/-/rememo-4.0.2.tgz", + "integrity": "sha512-NVfSP9NstE3QPNs/TnegQY0vnJnstKQSpcrsI2kBTB3dB2PkdfKdTa+abbjMIDqpc63fE5LfjLgfMst0ULMFxQ==", + "dev": true + }, "node_modules/remove-accents": { "version": "0.4.4", "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.4.tgz", @@ -16741,6 +17486,12 @@ "node": ">=10" } }, + "node_modules/stylis": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz", + "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==", + "dev": true + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -17583,6 +18334,19 @@ "requires-port": "^1.0.0" } }, + "node_modules/use-lilius": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/use-lilius/-/use-lilius-2.0.3.tgz", + "integrity": "sha512-+Q7nspdv+QGnyHGVMd6yAdLrqv5EGB4n3ix4GJH0JEE27weKCLCLmZSuAr5Nw+yPBCZn/iZ+KjL5+UykLCWXrw==", + "dev": true, + "dependencies": { + "date-fns": "^2.29.2" + }, + "peerDependencies": { + "react": "*", + "react-dom": "*" + } + }, "node_modules/use-memo-one": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz", @@ -17592,6 +18356,15 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "dev": true, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -17646,6 +18419,47 @@ "spdx-expression-parse": "^3.0.0" } }, + "node_modules/valtio": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/valtio/-/valtio-1.7.0.tgz", + "integrity": "sha512-3Tnix66EERwMcrl1rfB3ylcewOcL5L/GiPmC3FlVNreQzqf2jufEeqlNmgnLgSGchkEmH3WYVtS+x6Qw4r+yzQ==", + "dev": true, + "dependencies": { + "proxy-compare": "2.3.0", + "use-sync-external-store": "1.2.0" + }, + "engines": { + "node": ">=12.7.0" + }, + "peerDependencies": { + "@babel/helper-module-imports": ">=7.12", + "@babel/types": ">=7.13", + "aslemammad-vite-plugin-macro": ">=1.0.0-alpha.1", + "babel-plugin-macros": ">=3.0", + "react": ">=16.8", + "vite": ">=2.8.6" + }, + "peerDependenciesMeta": { + "@babel/helper-module-imports": { + "optional": true + }, + "@babel/types": { + "optional": true + }, + "aslemammad-vite-plugin-macro": { + "optional": true + }, + "babel-plugin-macros": { + "optional": true + }, + "react": { + "optional": true + }, + "vite": { + "optional": true + } + } + }, "node_modules/vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index a2e92398..525b342a 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "@wordpress/wp-feature-notifications", + "name": "wp-feature-notifications", "version": "0.1.0", "description": "A notification center for WordPress.", "keywords": [ @@ -42,7 +42,7 @@ "test": "jest", "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook", - "docGen": "npx docgen src/scripts/wp-notify.js", + "docGen": "npx docgen src/scripts/wp-notifications.js", "wp-env:start": "wp-env start", "wp-env:stop": "wp-env stop", "wp-env:destroy": "wp-env destroy", @@ -59,11 +59,13 @@ "devDependencies": { "@types/jest": "^29.5.0", "@wordpress/api-fetch": "^6.27.0", + "@wordpress/components": "^23.7.0", "@wordpress/data": "^9.0.0", "@wordpress/e2e-test-utils": "^10.1.0", "@wordpress/env": "^5.15.0", "@wordpress/i18n": "^4.30.0", "@wordpress/icons": "^9.21.0", + "@wordpress/keyboard-shortcuts": "^4.7.0", "@wordpress/scripts": "^26.1.0", "classnames": "^2.3.2", "eslint-import-resolver-typescript": "^3.5.5", @@ -72,6 +74,7 @@ "lint-staged": "^13.2.0", "moment": "^2.29.3", "prettier": "npm:wp-prettier@^2.8.5", + "re-resizable": "^6.9.9", "typescript": "^5.0.3" }, "dependencies": { diff --git a/src/scripts/components/Drawer.js b/src/scripts/components/Drawer.js new file mode 100644 index 00000000..ce42d118 --- /dev/null +++ b/src/scripts/components/Drawer.js @@ -0,0 +1,32 @@ +import { __ } from '@wordpress/i18n'; +import { NoticesArea } from './NoticesArea'; +import { Resizable } from 're-resizable'; +import { useState } from '@wordpress/element'; + +export const Drawer = ( { focus, blur, instance } ) => { + const [ width, setWidth ] = useState( 320 ); + return ( + + ); +}; diff --git a/src/scripts/components/Notice.js b/src/scripts/components/Notice.js index 00c84cbd..6fcaec9c 100644 --- a/src/scripts/components/Notice.js +++ b/src/scripts/components/Notice.js @@ -9,38 +9,38 @@ import { NoticeIcon } from './NoticeImage'; import { NoticeActions } from './NoticeAction'; // Import utilities +// @ts-ignore import classnames from 'classnames'; import { purify } from '../utils/sanitization'; -import moment from 'moment'; -import { __ } from '@wordpress/i18n'; import { defaultContext, NOTIFY_NAMESPACE } from '../store/constants'; import { dispatch } from '@wordpress/data'; +import { NoticeMeta } from './NoticeMeta'; +import { delay, nowInSeconds } from '../utils'; -export const NoticeMeta = ( { date, source } ) => ( -

- { source } { '\u2022 ' } - { moment( date ).fromNow() } -

-); +/** + * @typedef {import('../store').Notice} Notice + */ /** * It renders a single notice * - * @param {Object} props + * @param {Notice} props * @return {JSX.Element} Notice - the single notice */ export const Notice = ( props ) => { const { - id, - title, - status, + action, context = defaultContext, - source = 'WordPress', - date = __( 'Just now' ), + date = nowInSeconds(), + dismissLabel, + dismissible, + icon, + id, message, severity, - dismissible, - unread, + source = 'WordPress', + status, + title, } = props; /** @@ -49,9 +49,12 @@ export const Notice = ( props ) => { function dismissNotice() { dispatch( NOTIFY_NAMESPACE ).updateNotice( { id, - status: 'dismissing', + status: 'dismissed', } ); - dispatch( NOTIFY_NAMESPACE ).removeNotice( id ); + // TODO missing exit animation + delay( 500 ).then( () => + dispatch( NOTIFY_NAMESPACE ).removeNotice( id ) + ); } return ( @@ -59,27 +62,29 @@ export const Notice = ( props ) => { className={ classnames( 'wp-notification', 'wp-notice-' + id, - dismissible, + dismissible ? 'dismissible' : null, severity ? severity : null, - unread ? 'unread' : null, status ) } >

{ title }

- { message ?? ( -

- ) } + { message ? ( +

+ ) : null } - +
- + ); }; diff --git a/src/scripts/components/NoticeAction.js b/src/scripts/components/NoticeAction.js index f90612c5..8013bf38 100644 --- a/src/scripts/components/NoticeAction.js +++ b/src/scripts/components/NoticeAction.js @@ -2,39 +2,53 @@ import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { defaultContext } from '../store/constants'; +/** + * @typedef {Object} Action + * @property {string=} acceptLink The url of the action. + * @property {string=} acceptMessage The label of the action. + * @property {string=} dismissLabel The label of the dismiss action. + * @property {boolean=} dismissible Predicate of whether the notification can be dismissed. + */ + /** * Renders an image or icon based on the type of notification * - * @param {Object} param - * @param {Object} param.action - * @param {string} param.context - * @param {string} param.onDismiss - callback to be called when the notice is dismissed - * @param {boolean} param.dismissible - whether the notice is dismissible or not + * @param {Object} param + * @param {Action} param.action + * @param {string} param.context + * @param {Function} param.onDismiss - callback to be called when the notice is dismissed * @return {JSX.Element} NoticeImage - the image or the icon wrapped into a div */ -const NoticeActions = ( { - action, - context, - dismissible = false, - onDismiss, -} ) => { +export const NoticeActions = ( { action, context, onDismiss } ) => { const { acceptLink = '#', acceptMessage = __( 'Accept' ), dismissLabel = __( 'Dismiss' ), + dismissible = false, } = action; if ( context === defaultContext ) { - return acceptMessage ? ( - - ) : null; + return ( +
+ + { dismissible ? ( + + ) : null } +
+ ); } return ( @@ -46,7 +60,7 @@ const NoticeActions = ( { > { acceptMessage } - { dismissible && ( + { dismissible ? ( - ) } + ) : null } ); }; - -export { NoticeActions }; diff --git a/src/scripts/components/NoticeEmpty.js b/src/scripts/components/NoticeEmpty.js index 68725dca..b5a69b64 100644 --- a/src/scripts/components/NoticeEmpty.js +++ b/src/scripts/components/NoticeEmpty.js @@ -1,10 +1,18 @@ import { comment, Icon } from '@wordpress/icons'; +/** + * @param {Object} props + * @param {number} props.size The size of the icon. + * @param {string} props.message The message of the notification. + */ export const NoticeEmpty = ( props ) => { return ( -
+

{ props.message }

-
+ ); }; diff --git a/src/scripts/components/NoticeHubFooter.js b/src/scripts/components/NoticeHubFooter.js index 6cdfe456..f9b48827 100644 --- a/src/scripts/components/NoticeHubFooter.js +++ b/src/scripts/components/NoticeHubFooter.js @@ -5,6 +5,7 @@ import { settingsPageUrl } from '../store/constants'; /** * The footer for the notices section drawer. + * Has a button that links to the settings page. * * @return {JSX.Element} NoticeHubFooter * @function Object() { [native code] } @@ -12,8 +13,10 @@ import { settingsPageUrl } from '../store/constants'; export const NoticeHubFooter = () => (