From 7a4e2fce5cc69f3c80d868a56698e68661139bc1 Mon Sep 17 00:00:00 2001 From: Igor Zinovyev Date: Fri, 30 Aug 2024 20:36:18 +0300 Subject: [PATCH] Added the skeleton packages for the Odie-based Jetpackcom support UI app. --- apps/jetpackme-support/README.md | 1 + apps/jetpackme-support/index.js | 29 +++++++ apps/jetpackme-support/package.json | 58 +++++++++++++ apps/jetpackme-support/webpack.config.js | 100 +++++++++++++++++++++++ yarn.lock | 53 +++++++++++- 5 files changed, 240 insertions(+), 1 deletion(-) create mode 100644 apps/jetpackme-support/README.md create mode 100644 apps/jetpackme-support/index.js create mode 100644 apps/jetpackme-support/package.json create mode 100644 apps/jetpackme-support/webpack.config.js diff --git a/apps/jetpackme-support/README.md b/apps/jetpackme-support/README.md new file mode 100644 index 0000000000000..e071150a594ae --- /dev/null +++ b/apps/jetpackme-support/README.md @@ -0,0 +1 @@ +### The Odie bot interface for Jetpack.com diff --git a/apps/jetpackme-support/index.js b/apps/jetpackme-support/index.js new file mode 100644 index 0000000000000..24356b4bd8113 --- /dev/null +++ b/apps/jetpackme-support/index.js @@ -0,0 +1,29 @@ +import OdieAssistantProvider, { + OdieAssistant, + EllipsisMenu, + useOdieAssistantContext, +} from '@automattic/odie-client'; + +const OdieBot = () => { + const { clearChat } = useOdieAssistantContext(); + return ( + +
+ + clearChat() } + onKeyPress={ () => clearChat() } + className="menu-item-class" + > + Start a New Chat + + +
+ + + ); +}; + +window.JetpackSupportBot = OdieBot(); diff --git a/apps/jetpackme-support/package.json b/apps/jetpackme-support/package.json new file mode 100644 index 0000000000000..178d6bddf6e4f --- /dev/null +++ b/apps/jetpackme-support/package.json @@ -0,0 +1,58 @@ +{ + "name": "@automattic/jetpackme-support", + "version": "1.0.0", + "description": "A Jetpack.com Odie bot interface application.", + "homepage": "https://github.com/Automattic/wp-calypso", + "license": "GPL-2.0-or-later", + "author": "Automattic Inc.", + "sideEffects": [ + "*.css", + "*.scss", + "./config.js" + ], + "repository": { + "type": "git", + "url": "git+https://github.com/Automattic/wp-calypso.git", + "directory": "apps/help-center" + }, + "publishConfig": { + "access": "public" + }, + "bugs": "https://github.com/Automattic/wp-calypso/issues", + "types": "dist/types", + "scripts": { + "clean": "rm -rf dist", + "teamcity:build-app": "yarn run build", + "build": "NODE_ENV=production yarn dev", + "build:app": "calypso-build", + "dev": "yarn run calypso-apps-builder --localPath dist --remotePath /home/wpcom/public_html/widgets.wp.com/help-center", + "prepack": "yarn run clean && yarn run build", + "watch": "tsc --build ./tsconfig.json --watch", + "translate": "rm -rf dist/strings && wp-babel-makepot './dist/*.{js,jsx,ts,tsx}' --ignore '**/node_modules/**,**/test/**,**/*.d.ts' --base './dist' --dir './dist/strings' --output './dist/help-center.pot' && build-app-languages --stringsFilePath='./dist/help-center.pot' --outputPath='./dist/languages' --outputFormat='JS'" + }, + "dependencies": { + "@automattic/components": "workspace:^", + "@automattic/i18n-utils": "workspace:^", + "@automattic/odie-client": "workspace:^", + "@wordpress/components": "^28.2.0", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@automattic/calypso-apps-builder": "workspace:^", + "@automattic/calypso-build": "workspace:^", + "@automattic/calypso-typescript-config": "workspace:^", + "@automattic/wp-babel-makepot": "workspace:^", + "@wordpress/dependency-extraction-webpack-plugin": "5.9.0", + "@wordpress/readable-js-assets-webpack-plugin": "3.0.0", + "autoprefixer": "^10.4.20", + "copy-webpack-plugin": "^10.2.4", + "typescript": "^5.3.3", + "webpack": "^5.91.0" + }, + "peerDependencies": { + "@wordpress/data": "^10.2.0", + "postcss": "*" + }, + "private": true +} diff --git a/apps/jetpackme-support/webpack.config.js b/apps/jetpackme-support/webpack.config.js new file mode 100644 index 0000000000000..99c393cb88a2a --- /dev/null +++ b/apps/jetpackme-support/webpack.config.js @@ -0,0 +1,100 @@ +const path = require( 'path' ); +const FileConfig = require( '@automattic/calypso-build/webpack/file-loader' ); +const SassConfig = require( '@automattic/calypso-build/webpack/sass' ); +const TranspileConfig = require( '@automattic/calypso-build/webpack/transpile' ); +const { shouldTranspileDependency } = require( '@automattic/calypso-build/webpack/util' ); +const getBaseWebpackConfig = require( '@automattic/calypso-build/webpack.config.js' ); +const ReadableJsAssetsWebpackPlugin = require( '@wordpress/readable-js-assets-webpack-plugin' ); +const autoprefixerPlugin = require( 'autoprefixer' ); +const webpack = require( 'webpack' ); +const cacheIdentifier = require( '../../build-tools/babel/babel-loader-cache-identifier' ); +const GenerateChunksMapPlugin = require( '../../build-tools/webpack/generate-chunks-map-plugin' ); +const isDevelopment = process.env.NODE_ENV !== 'production'; +const extraPath = 'fallback'; +const cachePath = path.resolve( '.cache', extraPath ); + +/* Arguments to this function replicate webpack's so this config can be used on the command line, + * with individual options overridden by command line args. + * @see {@link https://webpack.js.org/configuration/configuration-types/#exporting-a-function} + * @see {@link https://webpack.js.org/api/cli/} + * @param {Object} env environment options + * @param {string} env.source plugin slugs, comma separated list + * @param {Object} argv options map + * @param {string} argv.entry entry path + * @returns {Object} webpack config + */ +function getWebpackConfig( env = { source: '' }, argv = {} ) { + env.WP = true; + const outputPath = path.join( __dirname, 'dist' ); + + const webpackConfig = getBaseWebpackConfig( env, argv ); + + return { + ...webpackConfig, + mode: isDevelopment ? 'development' : 'production', + entry: { + 'jetpackme-support': path.join( __dirname, 'index.js' ), + }, + output: { + ...webpackConfig.output, + path: outputPath, + filename: '[name].min.js', // dynamic filename + library: 'jetpackme-support', + }, + optimization: { + ...webpackConfig.optimization, + // disable module concatenation so that instances of `__()` are not renamed + concatenateModules: false, + }, + module: { + rules: [ + TranspileConfig.loader( { + workerCount: 2, + configFile: path.resolve( '../../babel.config.js' ), + cacheDirectory: path.resolve( cachePath, 'babel-client' ), + cacheIdentifier, + cacheCompression: false, + exclude: /node_modules\//, + } ), + TranspileConfig.loader( { + workerCount: 2, + presets: [ require.resolve( '@automattic/calypso-babel-config/presets/dependencies' ) ], + cacheDirectory: path.resolve( cachePath, 'babel-client' ), + cacheIdentifier, + cacheCompression: false, + include: shouldTranspileDependency, + } ), + SassConfig.loader( { + includePaths: [ __dirname ], + postCssOptions: { + // Do not use postcss.config.js. This ensure we have the final say on how PostCSS is used in calypso. + // This is required because Calypso imports `@automattic/notifications` and that package defines its + // own `postcss.config.js` that they use for their webpack bundling process. + config: false, + plugins: [ autoprefixerPlugin() ], + }, + prelude: `@use '${ require.resolve( + 'calypso/assets/stylesheets/shared/_utils.scss' + ) }' as *;`, + } ), + FileConfig.loader(), + ], + }, + plugins: [ + new webpack.DefinePlugin( { + 'process.env.NODE_DEBUG': JSON.stringify( process.env.NODE_DEBUG || false ), + } ), + new GenerateChunksMapPlugin( { + output: path.resolve( './dist/chunks-map.json' ), + } ), + ...SassConfig.plugins( { + filename: '[name].min.css', + chunkFilename: '[contenthash].css', + minify: ! isDevelopment, + } ), + new ReadableJsAssetsWebpackPlugin(), + ], + }; +} + +module.exports = getWebpackConfig; diff --git a/yarn.lock b/yarn.lock index 6338854bbe8aa..ea368482aaeb8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1236,6 +1236,32 @@ __metadata: languageName: unknown linkType: soft +"@automattic/jetpackme-support@workspace:apps/jetpackme-support": + version: 0.0.0-use.local + resolution: "@automattic/jetpackme-support@workspace:apps/jetpackme-support" + dependencies: + "@automattic/calypso-apps-builder": "workspace:^" + "@automattic/calypso-build": "workspace:^" + "@automattic/calypso-typescript-config": "workspace:^" + "@automattic/components": "workspace:^" + "@automattic/i18n-utils": "workspace:^" + "@automattic/odie-client": "workspace:^" + "@automattic/wp-babel-makepot": "workspace:^" + "@wordpress/components": "npm:^28.2.0" + "@wordpress/dependency-extraction-webpack-plugin": "npm:5.9.0" + "@wordpress/readable-js-assets-webpack-plugin": "npm:3.0.0" + autoprefixer: "npm:^10.4.20" + copy-webpack-plugin: "npm:^10.2.4" + react: "npm:^18.2.0" + react-dom: "npm:^18.2.0" + typescript: "npm:^5.3.3" + webpack: "npm:^5.91.0" + peerDependencies: + "@wordpress/data": ^10.2.0 + postcss: "*" + languageName: unknown + linkType: soft + "@automattic/js-utils@workspace:^, @automattic/js-utils@workspace:packages/js-utils": version: 0.0.0-use.local resolution: "@automattic/js-utils@workspace:packages/js-utils" @@ -11623,6 +11649,24 @@ __metadata: languageName: node linkType: hard +"autoprefixer@npm:^10.4.20": + version: 10.4.20 + resolution: "autoprefixer@npm:10.4.20" + dependencies: + browserslist: "npm:^4.23.3" + caniuse-lite: "npm:^1.0.30001646" + fraction.js: "npm:^4.3.7" + normalize-range: "npm:^0.1.2" + picocolors: "npm:^1.0.1" + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.1.0 + bin: + autoprefixer: bin/autoprefixer + checksum: e1f00978a26e7c5b54ab12036d8c13833fad7222828fc90914771b1263f51b28c7ddb5803049de4e77696cbd02bb25cfc3634e80533025bb26c26aacdf938940 + languageName: node + linkType: hard + "autosize@npm:^4.0.2, autosize@npm:^4.0.4": version: 4.0.4 resolution: "autosize@npm:4.0.4" @@ -12255,7 +12299,7 @@ __metadata: languageName: node linkType: hard -"browserslist@npm:^4.0.0, browserslist@npm:^4.12.0, browserslist@npm:^4.16.0, browserslist@npm:^4.16.3, browserslist@npm:^4.16.6, browserslist@npm:^4.21.10, browserslist@npm:^4.23.0, browserslist@npm:^4.23.1, browserslist@npm:^4.8.2": +"browserslist@npm:^4.0.0, browserslist@npm:^4.12.0, browserslist@npm:^4.16.0, browserslist@npm:^4.16.3, browserslist@npm:^4.16.6, browserslist@npm:^4.21.10, browserslist@npm:^4.23.0, browserslist@npm:^4.23.1, browserslist@npm:^4.23.3, browserslist@npm:^4.8.2": version: 4.23.3 resolution: "browserslist@npm:4.23.3" dependencies: @@ -18394,6 +18438,13 @@ __metadata: languageName: node linkType: hard +"fraction.js@npm:^4.3.7": + version: 4.3.7 + resolution: "fraction.js@npm:4.3.7" + checksum: df291391beea9ab4c263487ffd9d17fed162dbb736982dee1379b2a8cc94e4e24e46ed508c6d278aded9080ba51872f1bc5f3a5fd8d7c74e5f105b508ac28711 + languageName: node + linkType: hard + "fragment-cache@npm:^0.2.1": version: 0.2.1 resolution: "fragment-cache@npm:0.2.1"