From 3a4dd0ef2d0886624e63f47fe9aa6fc2729ba2c3 Mon Sep 17 00:00:00 2001 From: James Tien Date: Tue, 1 Oct 2024 14:06:58 +0800 Subject: [PATCH 1/9] Add the skeleton of the marketing package, with `nps` as the 1st component. --- packages/marketing/CHANGELOG.md | 3 ++ packages/marketing/README.md | 3 ++ packages/marketing/jest.config.js | 6 ++++ packages/marketing/package.json | 43 ++++++++++++++++++++++++++++ packages/marketing/src/index.tsx | 1 + packages/marketing/src/nps/README.md | 3 ++ packages/marketing/src/nps/index.tsx | 5 ++++ packages/marketing/tsconfig-cjs.json | 7 +++++ packages/marketing/tsconfig.json | 11 +++++++ packages/tsconfig.json | 1 + yarn.lock | 36 +++++++++++++++++++++++ 11 files changed, 119 insertions(+) create mode 100644 packages/marketing/CHANGELOG.md create mode 100644 packages/marketing/README.md create mode 100644 packages/marketing/jest.config.js create mode 100644 packages/marketing/package.json create mode 100644 packages/marketing/src/index.tsx create mode 100644 packages/marketing/src/nps/README.md create mode 100644 packages/marketing/src/nps/index.tsx create mode 100644 packages/marketing/tsconfig-cjs.json create mode 100644 packages/marketing/tsconfig.json diff --git a/packages/marketing/CHANGELOG.md b/packages/marketing/CHANGELOG.md new file mode 100644 index 00000000000000..39dc6f8ea57d36 --- /dev/null +++ b/packages/marketing/CHANGELOG.md @@ -0,0 +1,3 @@ +## 1.0.0 + +The initial version. diff --git a/packages/marketing/README.md b/packages/marketing/README.md new file mode 100644 index 00000000000000..df6a355475d778 --- /dev/null +++ b/packages/marketing/README.md @@ -0,0 +1,3 @@ +# Marketing + +The package where the marketing components related to automattic products are located diff --git a/packages/marketing/jest.config.js b/packages/marketing/jest.config.js new file mode 100644 index 00000000000000..528ed4699cbd55 --- /dev/null +++ b/packages/marketing/jest.config.js @@ -0,0 +1,6 @@ +module.exports = { + preset: '../../test/packages/jest-preset.js', + testEnvironment: 'jsdom', + testMatch: [ '/**/__tests__/**/*.[jt]s?(x)', '!**/.eslintrc.*' ], + transformIgnorePatterns: [ 'node_modules/(?!gridicons)(?!.*\\.svg)' ], +}; diff --git a/packages/marketing/package.json b/packages/marketing/package.json new file mode 100644 index 00000000000000..6a684c571bbd79 --- /dev/null +++ b/packages/marketing/package.json @@ -0,0 +1,43 @@ +{ + "name": "@automattic/marketing", + "version": "1.0.0", + "description": "The package where the marketing components related to Automattic products are located.", + "homepage": "https://github.com/Automattic/wp-calypso", + "license": "GPL-2.0-or-later", + "author": "Automattic Inc.", + "main": "dist/cjs/index.js", + "module": "dist/esm/index.js", + "calypso:src": "src/index.tsx", + "sideEffects": [ + "*.css", + "*.scss" + ], + "repository": { + "type": "git", + "url": "git+https://github.com/Automattic/wp-calypso.git", + "directory": "packages/marketing" + }, + "publishConfig": { + "access": "public" + }, + "bugs": "https://github.com/Automattic/wp-calypso/issues", + "types": "dist/types", + "scripts": { + "clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && rm -rf dist", + "build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json && copy-assets", + "prepack": "yarn run clean && yarn run build", + "watch": "tsc --build ./tsconfig.json --watch" + }, + "peerDependencies": { + "postcss": "^8.4.5", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "tslib": "^2.3.0" + }, + "devDependencies": { + "@automattic/calypso-build": "workspace:^", + "@automattic/calypso-typescript-config": "workspace:^", + "typescript": "^4.7.4", + "webpack": "^5.94.0" + } +} diff --git a/packages/marketing/src/index.tsx b/packages/marketing/src/index.tsx new file mode 100644 index 00000000000000..f0b2c4b00dcd1a --- /dev/null +++ b/packages/marketing/src/index.tsx @@ -0,0 +1 @@ +export { default as Nps } from './nps'; diff --git a/packages/marketing/src/nps/README.md b/packages/marketing/src/nps/README.md new file mode 100644 index 00000000000000..6ea7ea799acee3 --- /dev/null +++ b/packages/marketing/src/nps/README.md @@ -0,0 +1,3 @@ +# Nps + +The NPS(Net Promoter Score) survey form. diff --git a/packages/marketing/src/nps/index.tsx b/packages/marketing/src/nps/index.tsx new file mode 100644 index 00000000000000..4cc5e2cdb72a26 --- /dev/null +++ b/packages/marketing/src/nps/index.tsx @@ -0,0 +1,5 @@ +const Nps = () => { + return null; +}; + +export default Nps; diff --git a/packages/marketing/tsconfig-cjs.json b/packages/marketing/tsconfig-cjs.json new file mode 100644 index 00000000000000..a3e788252a240f --- /dev/null +++ b/packages/marketing/tsconfig-cjs.json @@ -0,0 +1,7 @@ +{ + "extends": "./tsconfig", + "compilerOptions": { + "module": "commonjs", + "outDir": "dist/cjs" + } +} diff --git a/packages/marketing/tsconfig.json b/packages/marketing/tsconfig.json new file mode 100644 index 00000000000000..ce1866d68137e1 --- /dev/null +++ b/packages/marketing/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "@automattic/calypso-typescript-config/ts-package.json", + "compilerOptions": { + "declarationDir": "dist/types", + "outDir": "dist/esm", + "rootDir": "src", + "types": [] + }, + "include": [ "src", "src/*.json" ], + "exclude": [ "**/__tests__/*", "**/__mocks__/*" ] +} diff --git a/packages/tsconfig.json b/packages/tsconfig.json index b06ddca9a17c47..0db17db5218e92 100644 --- a/packages/tsconfig.json +++ b/packages/tsconfig.json @@ -40,6 +40,7 @@ { "path": "./languages" }, { "path": "./launchpad" }, { "path": "./launchpad-navigator" }, + { "path": "./marketing" }, { "path": "./mini-cart" }, { "path": "./odie-client" }, { "path": "./onboarding" }, diff --git a/yarn.lock b/yarn.lock index d74183831903e1..842e262f3eaed1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1373,6 +1373,22 @@ __metadata: languageName: unknown linkType: soft +"@automattic/marketing@workspace:packages/marketing": + version: 0.0.0-use.local + resolution: "@automattic/marketing@workspace:packages/marketing" + dependencies: + "@automattic/calypso-build": "workspace:^" + "@automattic/calypso-typescript-config": "workspace:^" + typescript: "npm:^4.7.4" + webpack: "npm:^5.94.0" + peerDependencies: + postcss: ^8.4.5 + react: ^18.3.1 + react-dom: ^18.3.1 + tslib: ^2.3.0 + languageName: unknown + linkType: soft + "@automattic/material-design-icons@workspace:^, @automattic/material-design-icons@workspace:packages/material-design-icons": version: 0.0.0-use.local resolution: "@automattic/material-design-icons@workspace:packages/material-design-icons" @@ -33212,6 +33228,16 @@ __metadata: languageName: node linkType: hard +"typescript@npm:^4.7.4": + version: 4.9.5 + resolution: "typescript@npm:4.9.5" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 5f6cad2e728a8a063521328e612d7876e12f0d8a8390d3b3aaa452a6a65e24e9ac8ea22beb72a924fd96ea0a49ea63bb4e251fb922b12eedfb7f7a26475e5c56 + languageName: node + linkType: hard + "typescript@npm:^5.3.3": version: 5.3.3 resolution: "typescript@npm:5.3.3" @@ -33222,6 +33248,16 @@ __metadata: languageName: node linkType: hard +"typescript@patch:typescript@npm%3A^4.7.4#optional!builtin": + version: 4.9.5 + resolution: "typescript@patch:typescript@npm%3A4.9.5#optional!builtin::version=4.9.5&hash=289587" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: e3333f887c6829dfe0ab6c1dbe0dd1e3e2aeb56c66460cb85c5440c566f900c833d370ca34eb47558c0c69e78ced4bfe09b8f4f98b6de7afed9b84b8d1dd06a1 + languageName: node + linkType: hard + "typescript@patch:typescript@npm%3A^5.3.3#optional!builtin": version: 5.3.3 resolution: "typescript@patch:typescript@npm%3A5.3.3#optional!builtin::version=5.3.3&hash=e012d7" From e19a532218515bf66c9d9093821b9c82d60f8e1b Mon Sep 17 00:00:00 2001 From: James Tien Date: Wed, 2 Oct 2024 11:23:25 +0800 Subject: [PATCH 2/9] Implement the foundational structure of Storybook setup for the marketing package. --- packages/marketing/.storybook/main.js | 1 + packages/marketing/package.json | 6 +++++- packages/marketing/src/nps/index.stories.tsx | 15 +++++++++++++++ yarn.lock | 3 +++ 4 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 packages/marketing/.storybook/main.js create mode 100644 packages/marketing/src/nps/index.stories.tsx diff --git a/packages/marketing/.storybook/main.js b/packages/marketing/.storybook/main.js new file mode 100644 index 00000000000000..fdbf72873125e7 --- /dev/null +++ b/packages/marketing/.storybook/main.js @@ -0,0 +1 @@ +module.exports = require( '@automattic/calypso-storybook' )(); diff --git a/packages/marketing/package.json b/packages/marketing/package.json index 6a684c571bbd79..e0a5a430ca9e7b 100644 --- a/packages/marketing/package.json +++ b/packages/marketing/package.json @@ -26,7 +26,8 @@ "clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && rm -rf dist", "build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json && copy-assets", "prepack": "yarn run clean && yarn run build", - "watch": "tsc --build ./tsconfig.json --watch" + "watch": "tsc --build ./tsconfig.json --watch", + "storybook": "sb dev" }, "peerDependencies": { "postcss": "^8.4.5", @@ -36,7 +37,10 @@ }, "devDependencies": { "@automattic/calypso-build": "workspace:^", + "@automattic/calypso-storybook": "workspace:^", "@automattic/calypso-typescript-config": "workspace:^", + "@storybook/cli": "^7.6.19", + "@storybook/react": "^7.6.19", "typescript": "^4.7.4", "webpack": "^5.94.0" } diff --git a/packages/marketing/src/nps/index.stories.tsx b/packages/marketing/src/nps/index.stories.tsx new file mode 100644 index 00000000000000..0050f88408e083 --- /dev/null +++ b/packages/marketing/src/nps/index.stories.tsx @@ -0,0 +1,15 @@ +import Nps from '.'; +import type { Meta, StoryObj } from '@storybook/react'; + +type NpsStory = StoryObj< typeof Nps >; + +const meta: Meta< typeof Nps > = { + title: 'Nps v2', + component: Nps, +}; + +export default meta; + +export const Default: NpsStory = { + args: {}, +}; diff --git a/yarn.lock b/yarn.lock index 842e262f3eaed1..f621ee59a7ad9c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1378,7 +1378,10 @@ __metadata: resolution: "@automattic/marketing@workspace:packages/marketing" dependencies: "@automattic/calypso-build": "workspace:^" + "@automattic/calypso-storybook": "workspace:^" "@automattic/calypso-typescript-config": "workspace:^" + "@storybook/cli": "npm:^7.6.19" + "@storybook/react": "npm:^7.6.19" typescript: "npm:^4.7.4" webpack: "npm:^5.94.0" peerDependencies: From 75f6bb7efe632af4f8c43c4e8018773b69c729a5 Mon Sep 17 00:00:00 2001 From: James Tien Date: Mon, 7 Oct 2024 09:49:05 +0800 Subject: [PATCH 3/9] Draft all the sections & components in using the standard HTML elements. --- packages/marketing/src/nps/index.tsx | 33 +++++++++++++++++++++++++--- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/packages/marketing/src/nps/index.tsx b/packages/marketing/src/nps/index.tsx index 4cc5e2cdb72a26..ee8ac7b3a31485 100644 --- a/packages/marketing/src/nps/index.tsx +++ b/packages/marketing/src/nps/index.tsx @@ -1,5 +1,32 @@ -const Nps = () => { - return null; -}; +function NpsScore( score: number ) { + return ( + + ); +} + +export function Nps() { + const scores = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]; + + return ( +
+

How are we doing so far?

+
+ + On a scale from 0–10, how likely are you to recommend WordPress.com to a friend or + colleague? + +
+ Not likely +
{ scores.map( ( score ) => NpsScore( score ) ) }
+ Definitely +
+
+ +
+ ); +} export default Nps; From 4a2579534703112f41eb322e9f8b3a7e52ee3a7f Mon Sep 17 00:00:00 2001 From: James Tien Date: Mon, 7 Oct 2024 09:56:45 +0800 Subject: [PATCH 4/9] Separate and extend the stories into "Desktop" & "Mobile" --- packages/marketing/src/nps/index.stories.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/marketing/src/nps/index.stories.tsx b/packages/marketing/src/nps/index.stories.tsx index 0050f88408e083..e7308894944748 100644 --- a/packages/marketing/src/nps/index.stories.tsx +++ b/packages/marketing/src/nps/index.stories.tsx @@ -10,6 +10,13 @@ const meta: Meta< typeof Nps > = { export default meta; -export const Default: NpsStory = { +export const Desktop: NpsStory = { args: {}, }; + +export const Mobile: NpsStory = { + args: {}, + parameters: { + viewport: { defaultViewport: 'mobile1' }, + }, +}; From dd219e63fae4b344e0d66c8297b089f2ccc0bafd Mon Sep 17 00:00:00 2001 From: James Tien Date: Mon, 7 Oct 2024 10:12:13 +0800 Subject: [PATCH 5/9] Add an empty submit handler --- packages/marketing/src/nps/index.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/marketing/src/nps/index.tsx b/packages/marketing/src/nps/index.tsx index ee8ac7b3a31485..d1690c227e6d24 100644 --- a/packages/marketing/src/nps/index.tsx +++ b/packages/marketing/src/nps/index.tsx @@ -1,3 +1,5 @@ +import { FormEvent } from 'react'; + function NpsScore( score: number ) { return (