diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9b8c6fdd7a0c..e3a371425c76 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3878,6 +3878,9 @@ importers: '@wordpress/icons': specifier: ^13.0.0 version: 13.1.0(react@18.3.1) + '@wordpress/primitives': + specifier: 4.46.0 + version: 4.46.0(react@18.3.1) '@wordpress/route': specifier: 0.12.0 version: 0.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -3891,15 +3894,30 @@ importers: '@babel/core': specifier: 7.29.0 version: 7.29.0 + '@storybook/react': + specifier: 10.3.6 + version: 10.3.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@10.3.6(@testing-library/dom@10.4.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.9.3) + '@testing-library/dom': + specifier: 10.4.1 + version: 10.4.1 '@typescript/native-preview': specifier: 7.0.0-dev.20260225.1 version: 7.0.0-dev.20260225.1 '@wordpress/build': specifier: 0.14.0 version: 0.14.0(@babel/core@7.29.0)(@wordpress/boot@0.13.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@wordpress/route@0.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(browserslist@4.28.2) + '@wordpress/ui': + specifier: 0.13.0 + version: 0.13.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) browserslist: specifier: 4.28.2 version: 4.28.2 + storybook: + specifier: 10.3.6 + version: 10.3.6(@testing-library/dom@10.4.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + typescript: + specifier: 5.9.3 + version: 5.9.3 projects/packages/protect-models: {} diff --git a/projects/js-packages/storybook/changelog/wooa7s-1314-integrate-icons-package-into-analytics b/projects/js-packages/storybook/changelog/wooa7s-1314-integrate-icons-package-into-analytics new file mode 100644 index 000000000000..bdc3a8c71b97 --- /dev/null +++ b/projects/js-packages/storybook/changelog/wooa7s-1314-integrate-icons-package-into-analytics @@ -0,0 +1,4 @@ +Significance: patch +Type: added + +Add premium-analytics internal packages stories diff --git a/projects/js-packages/storybook/storybook/projects.js b/projects/js-packages/storybook/storybook/projects.js index f135ee0569bb..6601798f40a9 100644 --- a/projects/js-packages/storybook/storybook/projects.js +++ b/projects/js-packages/storybook/storybook/projects.js @@ -13,6 +13,7 @@ export const projects = [ 'projects/js-packages/scan/src', 'projects/js-packages/social-logos/src/react', 'projects/packages/my-jetpack/_inc/components', + 'projects/packages/premium-analytics/packages', 'projects/packages/publicize/_inc/components', 'projects/packages/search/src/dashboard/components', 'projects/packages/videopress/src/client/admin/components', diff --git a/projects/packages/premium-analytics/changelog/wooa7s-1314-integrate-icons-package-into-analytics b/projects/packages/premium-analytics/changelog/wooa7s-1314-integrate-icons-package-into-analytics new file mode 100644 index 000000000000..71608dab69f3 --- /dev/null +++ b/projects/packages/premium-analytics/changelog/wooa7s-1314-integrate-icons-package-into-analytics @@ -0,0 +1,4 @@ +Significance: patch +Type: added + +Port icons package (illustrated WPDS icons + @wordpress/icons re-exports) as an internal package from next-woocommerce-analytics. diff --git a/projects/packages/premium-analytics/package.json b/projects/packages/premium-analytics/package.json index 31d5de969868..22ec71926161 100644 --- a/projects/packages/premium-analytics/package.json +++ b/projects/packages/premium-analytics/package.json @@ -6,6 +6,7 @@ "scripts": { "build": "wp-build && mkdir -p build/modules/boot && cp shims/boot-asset.php build/modules/boot/index.min.asset.php", "build-production": "NODE_ENV=production wp-build && mkdir -p build/modules/boot && cp shims/boot-asset.php build/modules/boot/index.min.asset.php", + "storybook": "cd ../../js-packages/storybook && pnpm run storybook:dev", "typecheck": "tsgo --noEmit", "watch": "wp-build --watch" }, @@ -33,14 +34,20 @@ "@wordpress/data": "10.46.0", "@wordpress/i18n": "^6.9.0", "@wordpress/icons": "^13.0.0", + "@wordpress/primitives": "4.46.0", "@wordpress/route": "0.12.0", "react": "18.3.1", "react-dom": "18.3.1" }, "devDependencies": { "@babel/core": "7.29.0", + "@storybook/react": "10.3.6", + "@testing-library/dom": "10.4.1", "@typescript/native-preview": "7.0.0-dev.20260225.1", "@wordpress/build": "0.14.0", - "browserslist": "4.28.2" + "@wordpress/ui": "0.13.0", + "browserslist": "4.28.2", + "storybook": "10.3.6", + "typescript": "5.9.3" } } diff --git a/projects/packages/premium-analytics/packages/icons/README.md b/projects/packages/premium-analytics/packages/icons/README.md new file mode 100644 index 000000000000..142115fc4ff0 --- /dev/null +++ b/projects/packages/premium-analytics/packages/icons/README.md @@ -0,0 +1,34 @@ +# @automattic/jetpack-premium-analytics-icons + +Illustrated WPDS icons used by Premium Analytics widgets and navigation. + +## Overview + +13 branded multi-fill SVG illustrations (fills driven by +`var(--wpds-color-*)` tokens). + +The illustrated icons are intentionally distinct from upstream +`@wordpress/icons`, which ships 24×24 monochrome glyphs intended for +`fill: currentColor` styling. Where a glyph is enough, import it directly +from `@wordpress/icons` rather than adding a re-export here — keeping this +package focused on the genuinely-custom illustrations and free of upstream +names we'd otherwise have to track across `@wordpress/icons` bumps. + +## Usage + +```ts +import { Icon } from '@wordpress/icons'; +import { calendar, search } from '@jetpack-premium-analytics/icons'; + +; +``` + +## Exports + +`calendar`, `channel`, `coupon`, `customer`, `device`, `goal`, `location`, +`megaphone`, `payment`, `paymentReturn`, `productBlouse`, `reports`, +`search` + +## Dependencies + +- `@wordpress/primitives` — `SVG`, `Path`, `Circle` diff --git a/projects/packages/premium-analytics/packages/icons/package.json b/projects/packages/premium-analytics/packages/icons/package.json new file mode 100644 index 000000000000..e36ad12bcbad --- /dev/null +++ b/projects/packages/premium-analytics/packages/icons/package.json @@ -0,0 +1,16 @@ +{ + "private": true, + "name": "@automattic/jetpack-premium-analytics-icons", + "version": "0.1.0", + "type": "module", + "main": "src/index.ts", + "types": "src/index.ts", + "sideEffects": false, + "dependencies": { + "@wordpress/primitives": "4.46.0" + }, + "devDependencies": { + "@storybook/react": "10.3.6", + "@wordpress/ui": "0.13.0" + } +} diff --git a/projects/packages/premium-analytics/packages/icons/src/calendar/index.tsx b/projects/packages/premium-analytics/packages/icons/src/calendar/index.tsx new file mode 100644 index 000000000000..9472ebfa007b --- /dev/null +++ b/projects/packages/premium-analytics/packages/icons/src/calendar/index.tsx @@ -0,0 +1,75 @@ +/** + * External dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +export const calendar = ( + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/projects/packages/premium-analytics/packages/icons/src/channel/index.tsx b/projects/packages/premium-analytics/packages/icons/src/channel/index.tsx new file mode 100644 index 000000000000..ead4881eb553 --- /dev/null +++ b/projects/packages/premium-analytics/packages/icons/src/channel/index.tsx @@ -0,0 +1,17 @@ +/** + * External dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +export const channel = ( + + + + +); diff --git a/projects/packages/premium-analytics/packages/icons/src/coupon/index.tsx b/projects/packages/premium-analytics/packages/icons/src/coupon/index.tsx new file mode 100644 index 000000000000..3b7820c4d6e3 --- /dev/null +++ b/projects/packages/premium-analytics/packages/icons/src/coupon/index.tsx @@ -0,0 +1,21 @@ +/** + * External dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +export const coupon = ( + + + + + +); diff --git a/projects/packages/premium-analytics/packages/icons/src/customer/index.tsx b/projects/packages/premium-analytics/packages/icons/src/customer/index.tsx new file mode 100644 index 000000000000..c5e858f2227f --- /dev/null +++ b/projects/packages/premium-analytics/packages/icons/src/customer/index.tsx @@ -0,0 +1,21 @@ +/** + * External dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +export const customer = ( + + + + + +); diff --git a/projects/packages/premium-analytics/packages/icons/src/device/index.tsx b/projects/packages/premium-analytics/packages/icons/src/device/index.tsx new file mode 100644 index 000000000000..ac0c5a611a60 --- /dev/null +++ b/projects/packages/premium-analytics/packages/icons/src/device/index.tsx @@ -0,0 +1,37 @@ +/** + * External dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +export const device = ( + + + + + + + + + +); diff --git a/projects/packages/premium-analytics/packages/icons/src/goal/index.tsx b/projects/packages/premium-analytics/packages/icons/src/goal/index.tsx new file mode 100644 index 000000000000..14c807057c43 --- /dev/null +++ b/projects/packages/premium-analytics/packages/icons/src/goal/index.tsx @@ -0,0 +1,33 @@ +/** + * External dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +export const goal = ( + + + + + + + + +); diff --git a/projects/packages/premium-analytics/packages/icons/src/index.ts b/projects/packages/premium-analytics/packages/icons/src/index.ts new file mode 100644 index 000000000000..97d525458ec2 --- /dev/null +++ b/projects/packages/premium-analytics/packages/icons/src/index.ts @@ -0,0 +1,13 @@ +export { reports } from './reports'; +export { productBlouse } from './product-blouse'; +export { goal } from './goal'; +export { device } from './device'; +export { location } from './location'; +export { calendar } from './calendar'; +export { megaphone } from './megaphone'; +export { channel } from './channel'; +export { coupon } from './coupon'; +export { customer } from './customer'; +export { paymentReturn } from './payment-return'; +export { search } from './search'; +export { payment } from './payment'; diff --git a/projects/packages/premium-analytics/packages/icons/src/location/index.tsx b/projects/packages/premium-analytics/packages/icons/src/location/index.tsx new file mode 100644 index 000000000000..48beba17dbdd --- /dev/null +++ b/projects/packages/premium-analytics/packages/icons/src/location/index.tsx @@ -0,0 +1,20 @@ +/** + * External dependencies + */ +import { SVG, Path, Circle } from '@wordpress/primitives'; + +export const location = ( + + + + + +); diff --git a/projects/packages/premium-analytics/packages/icons/src/megaphone/index.tsx b/projects/packages/premium-analytics/packages/icons/src/megaphone/index.tsx new file mode 100644 index 000000000000..1d8ed207e02e --- /dev/null +++ b/projects/packages/premium-analytics/packages/icons/src/megaphone/index.tsx @@ -0,0 +1,25 @@ +/** + * External dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +export const megaphone = ( + + + + + + +); diff --git a/projects/packages/premium-analytics/packages/icons/src/payment-return/index.tsx b/projects/packages/premium-analytics/packages/icons/src/payment-return/index.tsx new file mode 100644 index 000000000000..0d4cdf101d17 --- /dev/null +++ b/projects/packages/premium-analytics/packages/icons/src/payment-return/index.tsx @@ -0,0 +1,25 @@ +/** + * External dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +export const paymentReturn = ( + + + + + + +); diff --git a/projects/packages/premium-analytics/packages/icons/src/payment/index.tsx b/projects/packages/premium-analytics/packages/icons/src/payment/index.tsx new file mode 100644 index 000000000000..9b5fdced89fd --- /dev/null +++ b/projects/packages/premium-analytics/packages/icons/src/payment/index.tsx @@ -0,0 +1,29 @@ +/** + * External dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +export const payment = ( + + + + + + + +); diff --git a/projects/packages/premium-analytics/packages/icons/src/product-blouse/index.tsx b/projects/packages/premium-analytics/packages/icons/src/product-blouse/index.tsx new file mode 100644 index 000000000000..2475619305d8 --- /dev/null +++ b/projects/packages/premium-analytics/packages/icons/src/product-blouse/index.tsx @@ -0,0 +1,17 @@ +/** + * External dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +export const productBlouse = ( + + + + +); diff --git a/projects/packages/premium-analytics/packages/icons/src/reports/index.tsx b/projects/packages/premium-analytics/packages/icons/src/reports/index.tsx new file mode 100644 index 000000000000..f543d31c59ba --- /dev/null +++ b/projects/packages/premium-analytics/packages/icons/src/reports/index.tsx @@ -0,0 +1,22 @@ +/** + * External dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +export const reports = ( + + + + + + + +); diff --git a/projects/packages/premium-analytics/packages/icons/src/search/index.tsx b/projects/packages/premium-analytics/packages/icons/src/search/index.tsx new file mode 100644 index 000000000000..fb333ca4785f --- /dev/null +++ b/projects/packages/premium-analytics/packages/icons/src/search/index.tsx @@ -0,0 +1,21 @@ +/** + * External dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +export const search = ( + + + + + +); diff --git a/projects/packages/premium-analytics/packages/icons/src/stories/icons.stories.tsx b/projects/packages/premium-analytics/packages/icons/src/stories/icons.stories.tsx new file mode 100644 index 000000000000..c3b6f9130aed --- /dev/null +++ b/projects/packages/premium-analytics/packages/icons/src/stories/icons.stories.tsx @@ -0,0 +1,46 @@ +import { Icon, Stack } from '@wordpress/ui'; +import * as icons from '../index'; +import type { Meta, StoryObj } from '@storybook/react'; + +const meta: Meta< typeof Icon > = { + title: 'Packages/Premium Analytics/Icons', + component: Icon, + parameters: { + layout: 'padded', + }, +}; + +export default meta; +type Story = StoryObj< typeof Icon >; + +const iconEntries = Object.entries( icons ); + +export const AllIcons: Story = { + render: () => ( +
+ { iconEntries.map( ( [ name, icon ] ) => ( + + + { name } + + ) ) } +
+ ), +};