diff --git a/.agents/rules/widgets.md b/.agents/rules/widgets.md index 35b6469561cc..4d8107cf606c 100644 --- a/.agents/rules/widgets.md +++ b/.agents/rules/widgets.md @@ -4,8 +4,8 @@ A registered dashboard widget is a folder under `widgets/`, auto-discovered by c (no registration): - `package.json` — workspace package for the lazy-loaded render bundle. -- `widget.json` — static metadata (name, title, description, category, presentation). -- `widget.ts` — live metadata (default export: title, icon, attributes, example). +- `widget.json` — static metadata (name, title, description, help, category, presentation). +- `widget.ts` — live, non-serializable metadata (default export: icon, attributes, example). - `render.tsx` — default-export React component. - `style.module.css` — optional; CSS Modules, tokens from `@wordpress/theme` (`--wpds-*`). diff --git a/projects/packages/premium-analytics/AGENTS.md b/projects/packages/premium-analytics/AGENTS.md index 743f46b0031b..6a3ca7c8ca6a 100644 --- a/projects/packages/premium-analytics/AGENTS.md +++ b/projects/packages/premium-analytics/AGENTS.md @@ -197,16 +197,16 @@ Each new widget MUST ship as a self-contained folder with these files: ```text widgets// ├── package.json # workspace package; link: deps on widgets-toolkit -├── widget.json # declarative metadata (name, title, description, category) -├── widget.ts # runtime widget type definition (icon + translatable strings) +├── widget.json # declarative metadata (name, title, description, help, category, presentation) +├── widget.ts # runtime-only definition (icon, attributes, example) ├── render.tsx # the React component, wrapped in from widgets-toolkit └── stories/-widget.stories.tsx ``` Notes: -- `name` in both `widget.json` and `widget.ts` MUST use the `jpa/` prefix - (e.g. `jpa/`). +- `name` lives in `widget.json` and MUST use the `jpa/` prefix + (e.g. `jpa/`). `widget.ts` no longer declares it. - Keep `render.tsx` thin: compose toolkit primitives (`WidgetRoot`, `OrderMetricWidget`, etc.) rather than reimplementing data fetching, chart wiring, or theming. @@ -318,10 +318,12 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import MyWidgetRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -377,7 +379,7 @@ function MyWidgetDashboardStory( dashboardArgs: WidgetDashboardWithWidgetControl return ( > } attributes={ { reportParams: getDefaultQueryParams( true ) } } @@ -476,8 +478,10 @@ stories so it hits the mock fresh instead of reading their cached success. See legacy widgets that haven't been migrated yet. - Using the legacy `withWidgetRoot()` decorator for new stories — new widgets render via the real `WidgetDashboard` through the shared story helper instead. -- Declaring `presentation` in `widget.ts` — `widget.json` is the source of truth for that - field; omit it from `widget.ts` entirely. +- Declaring `name`, `title`, `help`, `description`, `category`, or `presentation` in + `widget.ts` — `widget.json` is the source of truth for all declarative metadata; the + `widget.ts` default export carries only `icon`, `attributes`, and `example`. Stories read + those declarative fields from `widget.json` via `createStoryWidgetType()`. - Re-declaring the attribute type in `render.tsx` — the shape is declared once in `widget.ts` and imported in `render.tsx`; render-only types may compose that imported shape with host fields like `Partial`, but must not duplicate the shape. diff --git a/projects/packages/premium-analytics/changelog/update-widget-metadata-json b/projects/packages/premium-analytics/changelog/update-widget-metadata-json new file mode 100644 index 000000000000..be9f6ce38bdf --- /dev/null +++ b/projects/packages/premium-analytics/changelog/update-widget-metadata-json @@ -0,0 +1,3 @@ +Significance: patch +Type: changed +Comment: Widgets: author declarative metadata (name, title, help) in widget.json instead of widget.ts, and build story widget types from the manifest via a shared createStoryWidgetType() helper. The widget.ts default export now carries only icon, attributes, and example. No user-facing change. diff --git a/projects/packages/premium-analytics/widgets/all-time-stats/stories/all-time-stats-widget.stories.tsx b/projects/packages/premium-analytics/widgets/all-time-stats/stories/all-time-stats-widget.stories.tsx index 1a8bb0fb66ce..d07d99761ec8 100644 --- a/projects/packages/premium-analytics/widgets/all-time-stats/stories/all-time-stats-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/all-time-stats/stories/all-time-stats-widget.stories.tsx @@ -24,14 +24,16 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import AllTimeStatsRender from '../render'; import widgetDefinition, { DEFAULT_ALL_TIME_STATS_METRICS, type AllTimeStatsMetricId, } from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; -import type { WidgetRenderProps, WidgetType } from '@wordpress/widget-primitives'; +import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; registerReportMocks(); @@ -39,17 +41,10 @@ registerReportMocks(); const ALL_TIME_STATS_RENDER_MODULE = 'storybook/all-time-stats'; // Carry the widget's metadata, including the metric-visibility attribute schema -// so the dashboard story's settings drawer renders the real checkboxes. The -// attribute schema is typed loosely on the widget definition, so it is cast to -// the WidgetType shape. -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - icon: widgetDefinition.icon, - presentation: 'framed' as const, - attributes: widgetDefinition.attributes as WidgetType[ 'attributes' ], - example: widgetDefinition.example, -}; +// so the dashboard story's settings drawer renders the real checkboxes. +// `presentation` comes from widget.json ( 'framed' ), so the host frames the +// widget and renders its identity (title + icon). +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); interface AllTimeStatsStoryControls { /** diff --git a/projects/packages/premium-analytics/widgets/all-time-stats/widget.json b/projects/packages/premium-analytics/widgets/all-time-stats/widget.json index 0513eb7895fe..f25c65c9c288 100644 --- a/projects/packages/premium-analytics/widgets/all-time-stats/widget.json +++ b/projects/packages/premium-analytics/widgets/all-time-stats/widget.json @@ -2,6 +2,9 @@ "name": "jpa/all-time-stats", "title": "All-time stats", "description": "Lifetime totals for your site — views, visitors, posts, and comments.", + "help": { + "content": "Lifetime totals for your site — views, visitors, posts, and comments." + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/all-time-stats/widget.ts b/projects/packages/premium-analytics/widgets/all-time-stats/widget.ts index f46aec09a389..6fb3b32b4b5d 100644 --- a/projects/packages/premium-analytics/widgets/all-time-stats/widget.ts +++ b/projects/packages/premium-analytics/widgets/all-time-stats/widget.ts @@ -58,14 +58,6 @@ export const DEFAULT_ALL_TIME_STATS_METRICS: AllTimeStatsMetricId[] = ALL_TIME_S * doubles as the defaults applied to new instances: every metric enabled. */ export default { - name: 'jpa/all-time-stats', - title: __( 'All-time stats', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Lifetime totals for your site — views, visitors, posts, and comments.', - 'jetpack-premium-analytics' - ), - }, icon: trendingUp, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/annual-highlights/stories/annual-highlights-widget.stories.tsx b/projects/packages/premium-analytics/widgets/annual-highlights/stories/annual-highlights-widget.stories.tsx index b51e8b9f4cd3..8479f58ee551 100644 --- a/projects/packages/premium-analytics/widgets/annual-highlights/stories/annual-highlights-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/annual-highlights/stories/annual-highlights-widget.stories.tsx @@ -16,6 +16,7 @@ import { type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; import { withStoryRouter } from '../../stories/with-story-router'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -23,8 +24,9 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import AnnualHighlightsRender from '../render'; import widgetDefinition, { DEFAULT_HIGHLIGHT_METRICS, type AnnualHighlightMetric } from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; -import type { WidgetRenderProps, WidgetType } from '@wordpress/widget-primitives'; +import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; registerReportMocks(); @@ -33,16 +35,9 @@ const ANNUAL_HIGHLIGHTS_RENDER_MODULE = 'storybook/annual-highlights'; // Carry the widget's metadata, including the metric-visibility attribute schema // so the dashboard story's settings drawer renders the real checkboxes. -// Presentation is left unset so the host frames the widget and renders its -// identity (title + icon), matching widget.json. The attribute schema is typed -// loosely on the widget definition, so it is cast to the WidgetType shape. -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - icon: widgetDefinition.icon, - attributes: widgetDefinition.attributes as WidgetType[ 'attributes' ], - example: widgetDefinition.example, -}; +// `presentation` comes from widget.json ( 'framed' ), so the host frames the +// widget and renders its identity (title + icon). +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); interface AnnualHighlightsStoryControls { /** diff --git a/projects/packages/premium-analytics/widgets/annual-highlights/widget.json b/projects/packages/premium-analytics/widgets/annual-highlights/widget.json index 054dea8dfb19..b31da24353ed 100644 --- a/projects/packages/premium-analytics/widgets/annual-highlights/widget.json +++ b/projects/packages/premium-analytics/widgets/annual-highlights/widget.json @@ -2,6 +2,9 @@ "name": "jpa/annual-highlights", "title": "Annual highlights", "description": "Your totals for the year at a glance — posts, words, likes, and comments.", + "help": { + "content": "Your totals for the year at a glance — posts, words, likes, and comments." + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/annual-highlights/widget.ts b/projects/packages/premium-analytics/widgets/annual-highlights/widget.ts index 061bc095d2a7..935bc906ad86 100644 --- a/projects/packages/premium-analytics/widgets/annual-highlights/widget.ts +++ b/projects/packages/premium-analytics/widgets/annual-highlights/widget.ts @@ -40,14 +40,6 @@ export const DEFAULT_HIGHLIGHT_METRICS: AnnualHighlightMetric[] = [ * metric enabled. */ export default { - name: 'jpa/annual-highlights', - title: __( 'Annual highlights', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Your totals for the year at a glance — posts, words, likes, and comments.', - 'jetpack-premium-analytics' - ), - }, icon: calendar, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/authors/stories/authors-widget.stories.tsx b/projects/packages/premium-analytics/widgets/authors/stories/authors-widget.stories.tsx index 0e9285313d8b..db726ba55f85 100644 --- a/projects/packages/premium-analytics/widgets/authors/stories/authors-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/authors/stories/authors-widget.stories.tsx @@ -5,6 +5,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -12,6 +13,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import AuthorsRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -20,12 +22,7 @@ registerReportMocks(); const AUTHORS_RENDER_MODULE = 'storybook/authors'; -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - icon: widgetDefinition.icon, - presentation: 'framed' as const, -}; +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); interface AuthorsStoryControls { withComparison: boolean; diff --git a/projects/packages/premium-analytics/widgets/authors/widget.json b/projects/packages/premium-analytics/widgets/authors/widget.json index 81328fbd4aeb..3ba277441502 100644 --- a/projects/packages/premium-analytics/widgets/authors/widget.json +++ b/projects/packages/premium-analytics/widgets/authors/widget.json @@ -2,6 +2,15 @@ "name": "jpa/authors", "title": "Authors", "description": "Top authors by views, with their most viewed posts.", + "help": { + "content": "The authors whose content received the most views.", + "links": [ + { + "label": "Learn more", + "href": "https://jetpack.com/support/jetpack-stats/" + } + ] + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/authors/widget.ts b/projects/packages/premium-analytics/widgets/authors/widget.ts index b05e2ca340b8..a70941a2628d 100644 --- a/projects/packages/premium-analytics/widgets/authors/widget.ts +++ b/projects/packages/premium-analytics/widgets/authors/widget.ts @@ -21,20 +21,6 @@ export type AuthorsAttributes = { * Widget type definition. */ export default { - name: 'jpa/authors', - title: __( 'Authors', 'jetpack-premium-analytics' ), - help: { - content: __( - 'The authors whose content received the most views.', - 'jetpack-premium-analytics' - ), - links: [ - { - label: __( 'Learn more', 'jetpack-premium-analytics' ), - href: 'https://jetpack.com/support/jetpack-stats/', - }, - ], - }, icon: postAuthor, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/average-items-per-order/stories/average-items-per-order-widget.stories.tsx b/projects/packages/premium-analytics/widgets/average-items-per-order/stories/average-items-per-order-widget.stories.tsx index 606dab61eb1f..0ecefb28b8ef 100644 --- a/projects/packages/premium-analytics/widgets/average-items-per-order/stories/average-items-per-order-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/average-items-per-order/stories/average-items-per-order-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -13,6 +14,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import AverageItemsPerOrderRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -100,7 +102,7 @@ function AverageItemsPerOrderDashboardStory( { return ( > diff --git a/projects/packages/premium-analytics/widgets/average-items-per-order/widget.json b/projects/packages/premium-analytics/widgets/average-items-per-order/widget.json index 8936a40bad51..9f2024a0ed06 100644 --- a/projects/packages/premium-analytics/widgets/average-items-per-order/widget.json +++ b/projects/packages/premium-analytics/widgets/average-items-per-order/widget.json @@ -2,6 +2,9 @@ "name": "jpa/average-items-per-order", "title": "Average items per order", "description": "Show the average number of products per order over a set period of time.", + "help": { + "content": "Show the average number of products per order over a set period of time." + }, "category": "orders", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/average-items-per-order/widget.ts b/projects/packages/premium-analytics/widgets/average-items-per-order/widget.ts index 4c9c1bdb6c9c..430414f9898a 100644 --- a/projects/packages/premium-analytics/widgets/average-items-per-order/widget.ts +++ b/projects/packages/premium-analytics/widgets/average-items-per-order/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type AverageItemsPerOrderAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/average-items-per-order', - title: __( 'Average items per order', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Show the average number of products per order over a set period of time.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/average-order-value/stories/average-order-value-widget.stories.tsx b/projects/packages/premium-analytics/widgets/average-order-value/stories/average-order-value-widget.stories.tsx index 8bf16ddf4bbd..c38b1e26e89a 100644 --- a/projects/packages/premium-analytics/widgets/average-order-value/stories/average-order-value-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/average-order-value/stories/average-order-value-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -13,6 +14,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import AverageOrderValueRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -94,7 +96,7 @@ function AverageOrderValueDashboardStory( { return ( > } attributes={ getAverageOrderValueAttributes( withComparison, preset ) } diff --git a/projects/packages/premium-analytics/widgets/average-order-value/widget.json b/projects/packages/premium-analytics/widgets/average-order-value/widget.json index 3691d7499fcf..a0399f2e9a76 100644 --- a/projects/packages/premium-analytics/widgets/average-order-value/widget.json +++ b/projects/packages/premium-analytics/widgets/average-order-value/widget.json @@ -2,6 +2,9 @@ "name": "jpa/average-order-value", "title": "Average order value", "description": "Track the average value of each order over a set period of time.", + "help": { + "content": "Track the average value of each order over a set period of time." + }, "category": "orders", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/average-order-value/widget.ts b/projects/packages/premium-analytics/widgets/average-order-value/widget.ts index 87a8f59573d9..2ad3d76f87e9 100644 --- a/projects/packages/premium-analytics/widgets/average-order-value/widget.ts +++ b/projects/packages/premium-analytics/widgets/average-order-value/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type AverageOrderValueAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/average-order-value', - title: __( 'Average order value', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Track the average value of each order over a set period of time.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/bookings-by-device/stories/bookings-by-device-widget.stories.tsx b/projects/packages/premium-analytics/widgets/bookings-by-device/stories/bookings-by-device-widget.stories.tsx index 7518d99ba085..18f90f157a68 100644 --- a/projects/packages/premium-analytics/widgets/bookings-by-device/stories/bookings-by-device-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/bookings-by-device/stories/bookings-by-device-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -13,6 +14,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import BookingsByDeviceRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -94,7 +96,7 @@ function BookingsByDeviceDashboardStory( { return ( > } attributes={ getBookingsByDeviceAttributes( withComparison, preset ) } diff --git a/projects/packages/premium-analytics/widgets/bookings-by-device/widget.json b/projects/packages/premium-analytics/widgets/bookings-by-device/widget.json index 964066e3bbdb..c83cbae87f6d 100644 --- a/projects/packages/premium-analytics/widgets/bookings-by-device/widget.json +++ b/projects/packages/premium-analytics/widgets/bookings-by-device/widget.json @@ -2,6 +2,9 @@ "name": "jpa/bookings-by-device", "title": "Bookings by device", "description": "See which devices your customers are using to make bookings in your store.", + "help": { + "content": "See which devices your customers are using to make bookings in your store." + }, "category": "bookings", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/bookings-by-device/widget.ts b/projects/packages/premium-analytics/widgets/bookings-by-device/widget.ts index c3217354f442..88dfd9a1d33a 100644 --- a/projects/packages/premium-analytics/widgets/bookings-by-device/widget.ts +++ b/projects/packages/premium-analytics/widgets/bookings-by-device/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type BookingsByDeviceAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/bookings-by-device', - title: __( 'Bookings by device', 'jetpack-premium-analytics' ), - help: { - content: __( - 'See which devices your customers are using to make bookings in your store.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/bookings-by-status/stories/bookings-by-status-widget.stories.tsx b/projects/packages/premium-analytics/widgets/bookings-by-status/stories/bookings-by-status-widget.stories.tsx index f4d5a46748a9..62e0d1fe95f9 100644 --- a/projects/packages/premium-analytics/widgets/bookings-by-status/stories/bookings-by-status-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/bookings-by-status/stories/bookings-by-status-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -13,6 +14,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import BookingsByStatusRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -94,7 +96,7 @@ function BookingsByStatusDashboardStory( { return ( > } attributes={ { diff --git a/projects/packages/premium-analytics/widgets/bookings-by-status/widget.json b/projects/packages/premium-analytics/widgets/bookings-by-status/widget.json index 58e73ef6d28f..f59fc98bf6c2 100644 --- a/projects/packages/premium-analytics/widgets/bookings-by-status/widget.json +++ b/projects/packages/premium-analytics/widgets/bookings-by-status/widget.json @@ -2,6 +2,9 @@ "name": "jpa/bookings-by-status", "title": "Bookings by status", "description": "Number of bookings by status over the selected time period.", + "help": { + "content": "Number of bookings by status over the selected time period." + }, "category": "bookings", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/bookings-by-status/widget.ts b/projects/packages/premium-analytics/widgets/bookings-by-status/widget.ts index 67f5f36492b0..96140114dcd1 100644 --- a/projects/packages/premium-analytics/widgets/bookings-by-status/widget.ts +++ b/projects/packages/premium-analytics/widgets/bookings-by-status/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type BookingsByStatusAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/bookings-by-status', - title: __( 'Bookings by status', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Number of bookings by status over the selected time period.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/bookings-over-time/stories/bookings-over-time-widget.stories.tsx b/projects/packages/premium-analytics/widgets/bookings-over-time/stories/bookings-over-time-widget.stories.tsx index 65acfd16aeb9..61ead77b2ff7 100644 --- a/projects/packages/premium-analytics/widgets/bookings-over-time/stories/bookings-over-time-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/bookings-over-time/stories/bookings-over-time-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import LineChart from '../../../../../js-packages/charts/src/charts/line-chart/line-chart'; import { @@ -14,6 +15,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import BookingsOverTimeRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -104,7 +106,7 @@ function BookingsOverTimeDashboardStory( { return ( > } attributes={ getBookingsOverTimeAttributes( withComparison, preset ) } diff --git a/projects/packages/premium-analytics/widgets/bookings-over-time/widget.json b/projects/packages/premium-analytics/widgets/bookings-over-time/widget.json index d3a50d3afb21..54cf455c8a98 100644 --- a/projects/packages/premium-analytics/widgets/bookings-over-time/widget.json +++ b/projects/packages/premium-analytics/widgets/bookings-over-time/widget.json @@ -2,6 +2,9 @@ "name": "jpa/bookings-over-time", "title": "Bookings over time", "description": "See a breakdown of when bookings are placed to identify peak selling periods.", + "help": { + "content": "See a breakdown of when bookings are placed to identify peak selling periods." + }, "category": "bookings", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/bookings-over-time/widget.ts b/projects/packages/premium-analytics/widgets/bookings-over-time/widget.ts index bd7338a0313b..263ecf115a4a 100644 --- a/projects/packages/premium-analytics/widgets/bookings-over-time/widget.ts +++ b/projects/packages/premium-analytics/widgets/bookings-over-time/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type BookingsOverTimeAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/bookings-over-time', - title: __( 'Bookings over time', 'jetpack-premium-analytics' ), - help: { - content: __( - 'See a breakdown of when bookings are placed to identify peak selling periods.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/bookings-revenue-by-customer-type/stories/bookings-revenue-by-customer-type-widget.stories.tsx b/projects/packages/premium-analytics/widgets/bookings-revenue-by-customer-type/stories/bookings-revenue-by-customer-type-widget.stories.tsx index 5a0d1f6875d9..6e858937f917 100644 --- a/projects/packages/premium-analytics/widgets/bookings-revenue-by-customer-type/stories/bookings-revenue-by-customer-type-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/bookings-revenue-by-customer-type/stories/bookings-revenue-by-customer-type-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -13,6 +14,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import BookingsRevenueByCustomerTypeRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -107,7 +109,7 @@ function BookingsRevenueByCustomerTypeDashboardStory( { return ( > diff --git a/projects/packages/premium-analytics/widgets/bookings-revenue-by-customer-type/widget.json b/projects/packages/premium-analytics/widgets/bookings-revenue-by-customer-type/widget.json index 420d05e24f51..f77e999d2903 100644 --- a/projects/packages/premium-analytics/widgets/bookings-revenue-by-customer-type/widget.json +++ b/projects/packages/premium-analytics/widgets/bookings-revenue-by-customer-type/widget.json @@ -2,6 +2,9 @@ "name": "jpa/bookings-revenue-by-customer-type", "title": "Bookings revenue by customer type", "description": "Revenue breakdown from new customers vs returning customers for bookings over the selected time period.", + "help": { + "content": "Revenue breakdown from new customers vs returning customers for bookings over the selected time period." + }, "category": "bookings", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/bookings-revenue-by-customer-type/widget.ts b/projects/packages/premium-analytics/widgets/bookings-revenue-by-customer-type/widget.ts index f951414290f6..3be8bb7b75b9 100644 --- a/projects/packages/premium-analytics/widgets/bookings-revenue-by-customer-type/widget.ts +++ b/projects/packages/premium-analytics/widgets/bookings-revenue-by-customer-type/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type BookingsRevenueByCustomerTypeAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/bookings-revenue-by-customer-type', - title: __( 'Bookings revenue by customer type', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Revenue breakdown from new customers vs returning customers for bookings over the selected time period.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/clicks/stories/clicks-widget.stories.tsx b/projects/packages/premium-analytics/widgets/clicks/stories/clicks-widget.stories.tsx index 115845eb3352..36c39402a04c 100644 --- a/projects/packages/premium-analytics/widgets/clicks/stories/clicks-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/clicks/stories/clicks-widget.stories.tsx @@ -15,9 +15,11 @@ import { type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; import { withStoryRouter } from '../../stories/with-story-router'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import ClicksRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -27,12 +29,7 @@ registerStatsMocks(); const CLICKS_RENDER_MODULE = 'storybook/clicks'; -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - icon: widgetDefinition.icon, - presentation: 'framed' as const, -}; +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); interface ClicksStoryControls { withComparison: boolean; diff --git a/projects/packages/premium-analytics/widgets/clicks/widget.json b/projects/packages/premium-analytics/widgets/clicks/widget.json index 801692f1317f..2961da87d27a 100644 --- a/projects/packages/premium-analytics/widgets/clicks/widget.json +++ b/projects/packages/premium-analytics/widgets/clicks/widget.json @@ -2,6 +2,15 @@ "name": "jpa/clicks", "title": "Clicks", "description": "Most clicked external links on your site.", + "help": { + "content": "The external links your visitors clicked most often, sorted by clicks.", + "links": [ + { + "label": "Learn more", + "href": "https://jetpack.com/support/jetpack-stats/" + } + ] + }, "category": "traffic", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/clicks/widget.ts b/projects/packages/premium-analytics/widgets/clicks/widget.ts index 627c38ba7b29..43d26be8d83a 100644 --- a/projects/packages/premium-analytics/widgets/clicks/widget.ts +++ b/projects/packages/premium-analytics/widgets/clicks/widget.ts @@ -22,20 +22,6 @@ export type ClicksAttributes = { * via the PA proxy at `stats/clicks`. */ export default { - name: 'jpa/clicks', - title: __( 'Clicks', 'jetpack-premium-analytics' ), - help: { - content: __( - 'The external links your visitors clicked most often, sorted by clicks.', - 'jetpack-premium-analytics' - ), - links: [ - { - label: __( 'Learn more', 'jetpack-premium-analytics' ), - href: 'https://jetpack.com/support/jetpack-stats/', - }, - ], - }, icon: link, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/comments/stories/comments-widget.stories.tsx b/projects/packages/premium-analytics/widgets/comments/stories/comments-widget.stories.tsx index aa1eedd37118..c3ce92f3f10a 100644 --- a/projects/packages/premium-analytics/widgets/comments/stories/comments-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/comments/stories/comments-widget.stories.tsx @@ -6,6 +6,7 @@ import { type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; import { withStoryRouter } from '../../stories/with-story-router'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -13,25 +14,19 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import CommentsRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { CommentsView } from '../widget'; import type { Meta, StoryObj } from '@storybook/react'; -import type { WidgetRenderProps, WidgetType } from '@wordpress/widget-primitives'; +import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; registerReportMocks(); const COMMENTS_RENDER_MODULE = 'storybook/comments'; -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - icon: widgetDefinition.icon, - // attributes/example let the dashboard host render the real "View by" header - // control for the `relevance: 'high'` attribute, as in Top Platforms. - attributes: widgetDefinition.attributes as WidgetType[ 'attributes' ], - example: widgetDefinition.example, - presentation: 'framed' as const, -}; +// attributes/example let the dashboard host render the real "View by" header +// control for the `relevance: 'high'` attribute, as in Top Platforms. +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); const VIEW_CONTROL = { control: 'inline-radio' as const, diff --git a/projects/packages/premium-analytics/widgets/comments/widget.json b/projects/packages/premium-analytics/widgets/comments/widget.json index 1b10daaddc1c..21274e773691 100644 --- a/projects/packages/premium-analytics/widgets/comments/widget.json +++ b/projects/packages/premium-analytics/widgets/comments/widget.json @@ -2,6 +2,15 @@ "name": "jpa/comments", "title": "Comments", "description": "The authors and posts that receive the most comments on your site.", + "help": { + "content": "A breakdown of comments, grouped by author and by post or page.", + "links": [ + { + "label": "Learn more", + "href": "https://jetpack.com/support/jetpack-stats/" + } + ] + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/comments/widget.ts b/projects/packages/premium-analytics/widgets/comments/widget.ts index a8d5b64114ec..2049cd6aff20 100644 --- a/projects/packages/premium-analytics/widgets/comments/widget.ts +++ b/projects/packages/premium-analytics/widgets/comments/widget.ts @@ -41,20 +41,6 @@ export type CommentsAttributes = { * the dashboard date range. */ export default { - name: 'jpa/comments', - title: __( 'Comments', 'jetpack-premium-analytics' ), - help: { - content: __( - 'A breakdown of comments, grouped by author and by post or page.', - 'jetpack-premium-analytics' - ), - links: [ - { - label: __( 'Learn more', 'jetpack-premium-analytics' ), - href: 'https://jetpack.com/support/jetpack-stats/', - }, - ], - }, icon: comment, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/conversion-rate/stories/conversion-rate-widget.stories.tsx b/projects/packages/premium-analytics/widgets/conversion-rate/stories/conversion-rate-widget.stories.tsx index 25bb85ec0f8d..49d964fcf040 100644 --- a/projects/packages/premium-analytics/widgets/conversion-rate/stories/conversion-rate-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/conversion-rate/stories/conversion-rate-widget.stories.tsx @@ -7,11 +7,13 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import { forceStatsMockState } from '../../stories/force-stats-mock-state'; import ConversionRateRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { APIFetchMiddleware } from '@wordpress/api-fetch'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; @@ -150,7 +152,7 @@ function ConversionRateDashboardStory( { return ( > } attributes={ getConversionRateAttributes( withComparison, preset ) } diff --git a/projects/packages/premium-analytics/widgets/conversion-rate/widget.json b/projects/packages/premium-analytics/widgets/conversion-rate/widget.json index 6f1062968c4a..8fd29cc476c2 100644 --- a/projects/packages/premium-analytics/widgets/conversion-rate/widget.json +++ b/projects/packages/premium-analytics/widgets/conversion-rate/widget.json @@ -2,6 +2,9 @@ "name": "jpa/conversion-rate", "title": "Store conversion rate", "description": "Store conversion rate over the selected time period.", + "help": { + "content": "Conversion funnel from visitors to completed purchases over the selected time period." + }, "category": "store", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/conversion-rate/widget.ts b/projects/packages/premium-analytics/widgets/conversion-rate/widget.ts index 9ccae6c43745..8af663b398fb 100644 --- a/projects/packages/premium-analytics/widgets/conversion-rate/widget.ts +++ b/projects/packages/premium-analytics/widgets/conversion-rate/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -22,13 +21,5 @@ export type ConversionRateAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/conversion-rate', - title: __( 'Store conversion rate', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Conversion funnel from visitors to completed purchases over the selected time period.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/coupon-usage-over-time/stories/coupon-usage-over-time-widget.stories.tsx b/projects/packages/premium-analytics/widgets/coupon-usage-over-time/stories/coupon-usage-over-time-widget.stories.tsx index a99826d563c5..d4ad7fc03241 100644 --- a/projects/packages/premium-analytics/widgets/coupon-usage-over-time/stories/coupon-usage-over-time-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/coupon-usage-over-time/stories/coupon-usage-over-time-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -13,6 +14,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import CouponUsageOverTimeRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -97,7 +99,7 @@ function CouponUsageOverTimeDashboardStory( { return ( > } attributes={ getCouponUsageOverTimeAttributes( withComparison, preset ) } diff --git a/projects/packages/premium-analytics/widgets/coupon-usage-over-time/widget.json b/projects/packages/premium-analytics/widgets/coupon-usage-over-time/widget.json index 26624f4d1e13..b54bb67187a6 100644 --- a/projects/packages/premium-analytics/widgets/coupon-usage-over-time/widget.json +++ b/projects/packages/premium-analytics/widgets/coupon-usage-over-time/widget.json @@ -2,6 +2,9 @@ "name": "jpa/coupon-usage-over-time", "title": "Coupon usage over time", "description": "Coupon usage over the selected time period.", + "help": { + "content": "Track how effective your discounts and promotions have been over a set period of time." + }, "category": "coupons", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/coupon-usage-over-time/widget.ts b/projects/packages/premium-analytics/widgets/coupon-usage-over-time/widget.ts index 7b2dbdd66a08..e01a2d56a8d6 100644 --- a/projects/packages/premium-analytics/widgets/coupon-usage-over-time/widget.ts +++ b/projects/packages/premium-analytics/widgets/coupon-usage-over-time/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -22,13 +21,5 @@ export type CouponUsageOverTimeAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/coupon-usage-over-time', - title: __( 'Coupon usage over time', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Track how effective your discounts and promotions have been over a set period of time.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/devices/stories/devices-widget.stories.tsx b/projects/packages/premium-analytics/widgets/devices/stories/devices-widget.stories.tsx index 7e0c553bbb9b..dbf02713e2a9 100644 --- a/projects/packages/premium-analytics/widgets/devices/stories/devices-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/devices/stories/devices-widget.stories.tsx @@ -5,12 +5,14 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import { registerStatsMocks } from '../../../packages/widgets-toolkit/src/stories/mocks/register-stats-mocks'; import { forceStatsMockState } from '../../stories/force-stats-mock-state'; import DevicesRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -20,14 +22,9 @@ registerStatsMocks(); const DEVICES_RENDER_MODULE = 'storybook/devices'; -// Pick only the fields that StoryWidgetMetadata accepts — the attribute schema -// and example arrays are typed differently in WidgetType and cause a type error. -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - icon: widgetDefinition.icon, - presentation: 'framed' as const, -}; +// Carry the widget's metadata. `presentation` comes from widget.json ( 'framed' ), +// so the host frames the widget and renders its identity (title + icon). +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); interface DevicesStoryControls { withComparison: boolean; diff --git a/projects/packages/premium-analytics/widgets/devices/widget.json b/projects/packages/premium-analytics/widgets/devices/widget.json index fc14616084a2..624f6ab881a5 100644 --- a/projects/packages/premium-analytics/widgets/devices/widget.json +++ b/projects/packages/premium-analytics/widgets/devices/widget.json @@ -2,6 +2,15 @@ "name": "jpa/devices", "title": "Devices", "description": "Top device types and screen sizes for your visitors.", + "help": { + "content": "A breakdown of the device types your visitors used, sorted by views.", + "links": [ + { + "label": "Learn more", + "href": "https://jetpack.com/support/jetpack-stats/" + } + ] + }, "category": "traffic", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/devices/widget.ts b/projects/packages/premium-analytics/widgets/devices/widget.ts index c8065963fe64..c7305605441d 100644 --- a/projects/packages/premium-analytics/widgets/devices/widget.ts +++ b/projects/packages/premium-analytics/widgets/devices/widget.ts @@ -23,20 +23,6 @@ export type DevicesAttributes = { * reportParams (the shared dashboard date picker). */ export default { - name: 'jpa/devices', - title: __( 'Devices', 'jetpack-premium-analytics' ), - help: { - content: __( - 'A breakdown of the device types your visitors used, sorted by views.', - 'jetpack-premium-analytics' - ), - links: [ - { - label: __( 'Learn more', 'jetpack-premium-analytics' ), - href: 'https://jetpack.com/support/jetpack-stats/', - }, - ], - }, icon: desktop, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/email-breakdown/stories/email-breakdown-widget.stories.tsx b/projects/packages/premium-analytics/widgets/email-breakdown/stories/email-breakdown-widget.stories.tsx index b39dc1ebfb44..8bcb88940082 100644 --- a/projects/packages/premium-analytics/widgets/email-breakdown/stories/email-breakdown-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/email-breakdown/stories/email-breakdown-widget.stories.tsx @@ -26,9 +26,11 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import EmailBreakdownRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { EmailBreakdownMetric, EmailBreakdownView } from '../widget'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; @@ -212,7 +214,7 @@ function EmailBreakdownDashboardStory( { return ( > } attributes={ { diff --git a/projects/packages/premium-analytics/widgets/email-breakdown/widget.json b/projects/packages/premium-analytics/widgets/email-breakdown/widget.json index 6b9893a76628..04ed86db2eb8 100644 --- a/projects/packages/premium-analytics/widgets/email-breakdown/widget.json +++ b/projects/packages/premium-analytics/widgets/email-breakdown/widget.json @@ -2,6 +2,9 @@ "name": "jpa/email-breakdown", "title": "Email breakdown", "description": "Breaks a sent email down by countries, devices, email clients, or clicked links.", + "help": { + "content": "Breaks a sent email down by countries, devices, email clients, or clicked links." + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/email-breakdown/widget.ts b/projects/packages/premium-analytics/widgets/email-breakdown/widget.ts index a6f533053e31..be949be5c41f 100644 --- a/projects/packages/premium-analytics/widgets/email-breakdown/widget.ts +++ b/projects/packages/premium-analytics/widgets/email-breakdown/widget.ts @@ -66,14 +66,6 @@ export type EmailBreakdownAttributes = { * range or comparison period. */ export default { - name: 'jpa/email-breakdown', - title: __( 'Email breakdown', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Breaks a sent email down by countries, devices, email clients, or clicked links.', - 'jetpack-premium-analytics' - ), - }, icon: envelope, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/email-time-series/stories/email-time-series-widget.stories.tsx b/projects/packages/premium-analytics/widgets/email-time-series/stories/email-time-series-widget.stories.tsx index c7826a8aaf82..d0d2001d7d96 100644 --- a/projects/packages/premium-analytics/widgets/email-time-series/stories/email-time-series-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/email-time-series/stories/email-time-series-widget.stories.tsx @@ -28,9 +28,11 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import EmailTimeSeriesRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { EmailTimeSeriesGranularity, EmailTimeSeriesMetric } from '../widget'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; @@ -233,7 +235,7 @@ function EmailTimeSeriesDashboardStory( { return ( > } attributes={ { diff --git a/projects/packages/premium-analytics/widgets/email-time-series/widget.json b/projects/packages/premium-analytics/widgets/email-time-series/widget.json index 0b89f663e8a0..8fa269ff8d37 100644 --- a/projects/packages/premium-analytics/widgets/email-time-series/widget.json +++ b/projects/packages/premium-analytics/widgets/email-time-series/widget.json @@ -2,6 +2,9 @@ "name": "jpa/email-time-series", "title": "Email performance", "description": "A single email's opens or clicks over time since it was sent.", + "help": { + "content": "How a single email performed over time: opens or clicks per day since it was sent, following the dashboard date range. Weekly and monthly grouping aggregate the daily buckets." + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/email-time-series/widget.ts b/projects/packages/premium-analytics/widgets/email-time-series/widget.ts index f862c7c7c979..f8a27e2ea1c1 100644 --- a/projects/packages/premium-analytics/widgets/email-time-series/widget.ts +++ b/projects/packages/premium-analytics/widgets/email-time-series/widget.ts @@ -47,15 +47,7 @@ export type EmailTimeSeriesAttributes = { * the timeline spans the dashboard date range. */ export default { - name: 'jpa/email-time-series', - title: __( 'Email performance', 'jetpack-premium-analytics' ), icon: envelope, - help: { - content: __( - 'How a single email performed over time: opens or clicks per day since it was sent, following the dashboard date range. Weekly and monthly grouping aggregate the daily buckets.', - 'jetpack-premium-analytics' - ), - }, attributes: [ { id: 'metric', diff --git a/projects/packages/premium-analytics/widgets/email-top-row/stories/email-top-row-widget.stories.tsx b/projects/packages/premium-analytics/widgets/email-top-row/stories/email-top-row-widget.stories.tsx index f8f683daf6e2..8b20546d78e4 100644 --- a/projects/packages/premium-analytics/widgets/email-top-row/stories/email-top-row-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/email-top-row/stories/email-top-row-widget.stories.tsx @@ -25,9 +25,11 @@ import { registerReportMocks, setReportMockState, } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import EmailTopRowRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { EmailMetric } from '../widget'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; @@ -166,7 +168,7 @@ function EmailTopRowDashboardStory( { metric, ...dashboardArgs }: EmailTopRowDas return ( > } attributes={ { diff --git a/projects/packages/premium-analytics/widgets/email-top-row/widget.json b/projects/packages/premium-analytics/widgets/email-top-row/widget.json index 933885a23b46..d6b0ebf1a0e1 100644 --- a/projects/packages/premium-analytics/widgets/email-top-row/widget.json +++ b/projects/packages/premium-analytics/widgets/email-top-row/widget.json @@ -2,6 +2,9 @@ "name": "jpa/email-top-row", "title": "Email highlights", "description": "Headline open and click totals for a single email, split into Opens and Clicks views.", + "help": { + "content": "Headline stats for a single email. The Opens view shows total sends, unique opens, total opens, and open rate; the Clicks view shows total sends, unique opens, total clicks, and click rate. Rates are measured against total sends. Figures are all-time and are not affected by the dashboard date range." + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/email-top-row/widget.ts b/projects/packages/premium-analytics/widgets/email-top-row/widget.ts index 17db61ba3e25..1a828fa3881e 100644 --- a/projects/packages/premium-analytics/widgets/email-top-row/widget.ts +++ b/projects/packages/premium-analytics/widgets/email-top-row/widget.ts @@ -57,15 +57,7 @@ export type EmailTopRowAttributes = { * ignores the dashboard date range and never shows period-over-period deltas. */ export default { - name: 'jpa/email-top-row', - title: __( 'Email highlights', 'jetpack-premium-analytics' ), icon: envelope, - help: { - content: __( - 'Headline stats for a single email. The Opens view shows total sends, unique opens, total opens, and open rate; the Clicks view shows total sends, unique opens, total clicks, and click rate. Rates are measured against total sends. Figures are all-time and are not affected by the dashboard date range.', - 'jetpack-premium-analytics' - ), - }, attributes: [ { id: 'metric', diff --git a/projects/packages/premium-analytics/widgets/emails/stories/emails-widget.stories.tsx b/projects/packages/premium-analytics/widgets/emails/stories/emails-widget.stories.tsx index a67137e1f892..7131fe2f3367 100644 --- a/projects/packages/premium-analytics/widgets/emails/stories/emails-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/emails/stories/emails-widget.stories.tsx @@ -22,9 +22,11 @@ import { type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; import { withStoryRouter } from '../../stories/with-story-router'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import EmailsRender, { EmailsLeaderboard, type EmailRow } from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj, Decorator } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentType } from 'react'; @@ -246,12 +248,7 @@ function EmailsDashboardStory( props: WidgetDashboardWithWidgetControls ) { return ( > } attributes={ { max: 6, metric: 'opens' } } diff --git a/projects/packages/premium-analytics/widgets/emails/widget.json b/projects/packages/premium-analytics/widgets/emails/widget.json index 03242bc0be01..faad90c74ccc 100644 --- a/projects/packages/premium-analytics/widgets/emails/widget.json +++ b/projects/packages/premium-analytics/widgets/emails/widget.json @@ -2,6 +2,9 @@ "name": "jpa/stats-emails", "title": "Emails", "description": "Open and click rates for your latest emails.", + "help": { + "content": "Your most recently sent emails, including their open and click rates." + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/emails/widget.ts b/projects/packages/premium-analytics/widgets/emails/widget.ts index 00b282b8aa59..512768fb3269 100644 --- a/projects/packages/premium-analytics/widgets/emails/widget.ts +++ b/projects/packages/premium-analytics/widgets/emails/widget.ts @@ -42,14 +42,6 @@ export type EmailsAttributes = { * there is no date range or comparison period. */ export default { - name: 'jpa/stats-emails', - title: __( 'Emails', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Your most recently sent emails, including their open and click rates.', - 'jetpack-premium-analytics' - ), - }, icon: envelope, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/file-downloads/stories/file-downloads-widget.stories.tsx b/projects/packages/premium-analytics/widgets/file-downloads/stories/file-downloads-widget.stories.tsx index 7c09377eaeb9..72cba73f6133 100644 --- a/projects/packages/premium-analytics/widgets/file-downloads/stories/file-downloads-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/file-downloads/stories/file-downloads-widget.stories.tsx @@ -15,9 +15,11 @@ import { type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; import { withStoryRouter } from '../../stories/with-story-router'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import FileDownloadsRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -27,12 +29,7 @@ registerStatsMocks(); const FILE_DOWNLOADS_RENDER_MODULE = 'storybook/file-downloads'; -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - icon: widgetDefinition.icon, - presentation: 'framed' as const, -}; +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); interface FileDownloadsStoryControls { withComparison: boolean; diff --git a/projects/packages/premium-analytics/widgets/file-downloads/widget.json b/projects/packages/premium-analytics/widgets/file-downloads/widget.json index 840204d682f1..8ce1ed193070 100644 --- a/projects/packages/premium-analytics/widgets/file-downloads/widget.json +++ b/projects/packages/premium-analytics/widgets/file-downloads/widget.json @@ -2,6 +2,15 @@ "name": "jpa/file-downloads", "title": "File downloads", "description": "Most downloaded files on your site.", + "help": { + "content": "The files your visitors downloaded most often, sorted by number of downloads.", + "links": [ + { + "label": "Learn more", + "href": "https://jetpack.com/support/jetpack-stats/" + } + ] + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/file-downloads/widget.ts b/projects/packages/premium-analytics/widgets/file-downloads/widget.ts index 99da20e43fc9..80fd24654e93 100644 --- a/projects/packages/premium-analytics/widgets/file-downloads/widget.ts +++ b/projects/packages/premium-analytics/widgets/file-downloads/widget.ts @@ -23,20 +23,6 @@ export type FileDownloadsAttributes = { * (the shared dashboard date picker). */ export default { - name: 'jpa/file-downloads', - title: __( 'File downloads', 'jetpack-premium-analytics' ), - help: { - content: __( - 'The files your visitors downloaded most often, sorted by number of downloads.', - 'jetpack-premium-analytics' - ), - links: [ - { - label: __( 'Learn more', 'jetpack-premium-analytics' ), - href: 'https://jetpack.com/support/jetpack-stats/', - }, - ], - }, icon: download, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/gross-sales-over-time/stories/gross-sales-over-time-widget.stories.tsx b/projects/packages/premium-analytics/widgets/gross-sales-over-time/stories/gross-sales-over-time-widget.stories.tsx index 77a039f834af..91ce7c90e93b 100644 --- a/projects/packages/premium-analytics/widgets/gross-sales-over-time/stories/gross-sales-over-time-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/gross-sales-over-time/stories/gross-sales-over-time-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import LineChart from '../../../../../js-packages/charts/src/charts/line-chart/line-chart'; import { @@ -14,6 +15,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import GrossSalesOverTimeRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -105,7 +107,7 @@ function GrossSalesOverTimeDashboardStory( { return ( > } attributes={ getGrossSalesOverTimeAttributes( withComparison, preset ) } diff --git a/projects/packages/premium-analytics/widgets/gross-sales-over-time/widget.json b/projects/packages/premium-analytics/widgets/gross-sales-over-time/widget.json index 72c93df4a3c5..ffe743cf605d 100644 --- a/projects/packages/premium-analytics/widgets/gross-sales-over-time/widget.json +++ b/projects/packages/premium-analytics/widgets/gross-sales-over-time/widget.json @@ -2,6 +2,9 @@ "name": "jpa/gross-sales-over-time", "title": "Gross sales over time", "description": "Gross sales over the selected time period.", + "help": { + "content": "Monitor your total revenue — before any discounts, returns, or adjustments — over a set period of time." + }, "category": "store", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/gross-sales-over-time/widget.ts b/projects/packages/premium-analytics/widgets/gross-sales-over-time/widget.ts index 21d4f6dc32cb..d12d3a83e0fd 100644 --- a/projects/packages/premium-analytics/widgets/gross-sales-over-time/widget.ts +++ b/projects/packages/premium-analytics/widgets/gross-sales-over-time/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type GrossSalesOverTimeAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/gross-sales-over-time', - title: __( 'Gross sales over time', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Monitor your total revenue — before any discounts, returns, or adjustments — over a set period of time.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/hello-world/widget.ts b/projects/packages/premium-analytics/widgets/hello-world/widget.ts index 6fac9e939762..d57e32b898c7 100644 --- a/projects/packages/premium-analytics/widgets/hello-world/widget.ts +++ b/projects/packages/premium-analytics/widgets/hello-world/widget.ts @@ -16,8 +16,6 @@ export type HelloWorldAttributes = { * Widget type definition. */ export default { - name: 'jpa/hello-world', - title: __( 'Hello World', 'jetpack-premium-analytics' ), icon: wordpress, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/latest-post/stories/latest-post-widget.stories.tsx b/projects/packages/premium-analytics/widgets/latest-post/stories/latest-post-widget.stories.tsx index 838c7f95fbd2..a5aa9fcb444a 100644 --- a/projects/packages/premium-analytics/widgets/latest-post/stories/latest-post-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/latest-post/stories/latest-post-widget.stories.tsx @@ -25,9 +25,11 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import LatestPostRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { APIFetchMiddleware, APIFetchOptions } from '@wordpress/api-fetch'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; @@ -218,7 +220,7 @@ function LatestPostDashboardStory( dashboardArgs: WidgetDashboardWithWidgetContr return ( > } attributes={ { reportParams: getDefaultQueryParams( true ) } } diff --git a/projects/packages/premium-analytics/widgets/latest-post/widget.json b/projects/packages/premium-analytics/widgets/latest-post/widget.json index afbdf5ecf34a..668f1fcaddc2 100644 --- a/projects/packages/premium-analytics/widgets/latest-post/widget.json +++ b/projects/packages/premium-analytics/widgets/latest-post/widget.json @@ -2,6 +2,9 @@ "name": "jpa/latest-post", "title": "Latest post", "description": "Your most recently published post with its views, likes, and comments.", + "help": { + "content": "Your most recently published post with its views, likes, and comments." + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/latest-post/widget.ts b/projects/packages/premium-analytics/widgets/latest-post/widget.ts index df37ff017e42..206cae43032a 100644 --- a/projects/packages/premium-analytics/widgets/latest-post/widget.ts +++ b/projects/packages/premium-analytics/widgets/latest-post/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { postList } from '@wordpress/icons'; import type { WidgetAttributeField } from '@wordpress/widget-primitives'; @@ -22,14 +21,6 @@ export type LatestPostAttributes = Record< never, never >; * period. */ export default { - name: 'jpa/latest-post', - title: __( 'Latest post', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Your most recently published post with its views, likes, and comments.', - 'jetpack-premium-analytics' - ), - }, icon: postList, attributes: [] as WidgetAttributeField< LatestPostAttributes >[], example: { diff --git a/projects/packages/premium-analytics/widgets/locations/stories/locations-widget.stories.tsx b/projects/packages/premium-analytics/widgets/locations/stories/locations-widget.stories.tsx index 8ab5c6b02f1b..f1eea601d24d 100644 --- a/projects/packages/premium-analytics/widgets/locations/stories/locations-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/locations/stories/locations-widget.stories.tsx @@ -5,14 +5,16 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import { registerStatsMocks } from '../../../packages/widgets-toolkit/src/stories/mocks/register-stats-mocks'; import { forceStatsMockState } from '../../stories/force-stats-mock-state'; import LocationsRender from '../render'; import widgetDefinition, { type LocationsAttributes } from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; -import type { WidgetRenderProps, WidgetType } from '@wordpress/widget-primitives'; +import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; registerReportMocks(); @@ -20,14 +22,7 @@ registerStatsMocks(); const LOCATIONS_RENDER_MODULE = 'storybook/locations'; -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - icon: widgetDefinition.icon, - attributes: widgetDefinition.attributes as WidgetType[ 'attributes' ], - example: widgetDefinition.example, - presentation: 'framed' as const, -}; +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); interface LocationsStoryControls { withComparison: boolean; diff --git a/projects/packages/premium-analytics/widgets/locations/widget.json b/projects/packages/premium-analytics/widgets/locations/widget.json index fc00254829bd..8b7b18397bbe 100644 --- a/projects/packages/premium-analytics/widgets/locations/widget.json +++ b/projects/packages/premium-analytics/widgets/locations/widget.json @@ -2,6 +2,15 @@ "name": "jpa/locations", "title": "Locations", "description": "Where your visitors are viewing from — by country, region, or city.", + "help": { + "content": "The countries, regions, and cities where your visitors came from, sorted by views.", + "links": [ + { + "label": "Learn more", + "href": "https://jetpack.com/support/jetpack-stats/" + } + ] + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/locations/widget.ts b/projects/packages/premium-analytics/widgets/locations/widget.ts index 71b2b749c421..6479f59a0b0b 100644 --- a/projects/packages/premium-analytics/widgets/locations/widget.ts +++ b/projects/packages/premium-analytics/widgets/locations/widget.ts @@ -32,20 +32,6 @@ export type LocationsAttributes = { * highlighting the country on the world map. */ export default { - name: 'jpa/locations', - title: __( 'Locations', 'jetpack-premium-analytics' ), - help: { - content: __( - 'The countries, regions, and cities where your visitors came from, sorted by views.', - 'jetpack-premium-analytics' - ), - links: [ - { - label: __( 'Learn more', 'jetpack-premium-analytics' ), - href: 'https://jetpack.com/support/jetpack-stats/', - }, - ], - }, icon: mapMarker, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/most-popular-day/stories/most-popular-day-widget.stories.tsx b/projects/packages/premium-analytics/widgets/most-popular-day/stories/most-popular-day-widget.stories.tsx index 033fa3a46a6b..40b3cc4b1fd3 100644 --- a/projects/packages/premium-analytics/widgets/most-popular-day/stories/most-popular-day-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/most-popular-day/stories/most-popular-day-widget.stories.tsx @@ -17,6 +17,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -24,6 +25,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import MostPopularDayRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -138,7 +140,7 @@ function MostPopularDayDashboardStory( dashboardArgs: WidgetDashboardWithWidgetC return ( > } attributes={ { reportParams: getDefaultQueryParams( true ) } } diff --git a/projects/packages/premium-analytics/widgets/most-popular-day/widget.json b/projects/packages/premium-analytics/widgets/most-popular-day/widget.json index 9626903890ec..a75c5bafb070 100644 --- a/projects/packages/premium-analytics/widgets/most-popular-day/widget.json +++ b/projects/packages/premium-analytics/widgets/most-popular-day/widget.json @@ -2,6 +2,9 @@ "name": "jpa/most-popular-day", "title": "Most popular day", "description": "The day your site received the most views.", + "help": { + "content": "The day your site received the most views." + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/most-popular-day/widget.ts b/projects/packages/premium-analytics/widgets/most-popular-day/widget.ts index 326536821619..6264cf665be7 100644 --- a/projects/packages/premium-analytics/widgets/most-popular-day/widget.ts +++ b/projects/packages/premium-analytics/widgets/most-popular-day/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { calendar } from '@wordpress/icons'; /** @@ -18,10 +17,5 @@ export type MostPopularDayAttributes = Record< never, never >; * drew the most views, with that day's view count and its share of all views. */ export default { - name: 'jpa/most-popular-day', - title: __( 'Most popular day', 'jetpack-premium-analytics' ), - help: { - content: __( 'The day your site received the most views.', 'jetpack-premium-analytics' ), - }, icon: calendar, }; diff --git a/projects/packages/premium-analytics/widgets/most-popular-time/stories/most-popular-time-widget.stories.tsx b/projects/packages/premium-analytics/widgets/most-popular-time/stories/most-popular-time-widget.stories.tsx index a31d571bf231..70c8efc9b5b5 100644 --- a/projects/packages/premium-analytics/widgets/most-popular-time/stories/most-popular-time-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/most-popular-time/stories/most-popular-time-widget.stories.tsx @@ -21,9 +21,11 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import MostPopularTimeRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -137,12 +139,7 @@ function MostPopularTimeDashboardStory( dashboardArgs: WidgetDashboardWithWidget return ( > } attributes={ { reportParams: getDefaultQueryParams( true ) } } diff --git a/projects/packages/premium-analytics/widgets/most-popular-time/widget.json b/projects/packages/premium-analytics/widgets/most-popular-time/widget.json index 7f06ad47aac4..69cfd5e6056e 100644 --- a/projects/packages/premium-analytics/widgets/most-popular-time/widget.json +++ b/projects/packages/premium-analytics/widgets/most-popular-time/widget.json @@ -2,6 +2,9 @@ "name": "jpa/most-popular-time", "title": "Most popular time", "description": "The day of week and hour of day when your site gets the most views.", + "help": { + "content": "The day of week and hour of day when your site gets the most views." + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/most-popular-time/widget.ts b/projects/packages/premium-analytics/widgets/most-popular-time/widget.ts index 6302afb26ddd..339d1df59af0 100644 --- a/projects/packages/premium-analytics/widgets/most-popular-time/widget.ts +++ b/projects/packages/premium-analytics/widgets/most-popular-time/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { scheduled } from '@wordpress/icons'; /** @@ -20,13 +19,5 @@ export type MostPopularTimeAttributes = Record< never, never >; * total. */ export default { - name: 'jpa/most-popular-time', - title: __( 'Most popular time', 'jetpack-premium-analytics' ), - help: { - content: __( - 'The day of week and hour of day when your site gets the most views.', - 'jetpack-premium-analytics' - ), - }, icon: scheduled, }; diff --git a/projects/packages/premium-analytics/widgets/net-sales-over-time/stories/net-sales-over-time-widget.stories.tsx b/projects/packages/premium-analytics/widgets/net-sales-over-time/stories/net-sales-over-time-widget.stories.tsx index 343f547233bd..eda825beadeb 100644 --- a/projects/packages/premium-analytics/widgets/net-sales-over-time/stories/net-sales-over-time-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/net-sales-over-time/stories/net-sales-over-time-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import LineChart from '../../../../../js-packages/charts/src/charts/line-chart/line-chart'; import { @@ -14,6 +15,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import NetSalesOverTimeRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -103,7 +105,7 @@ function NetSalesOverTimeDashboardStory( { return ( > } attributes={ getNetSalesOverTimeAttributes( withComparison, preset ) } diff --git a/projects/packages/premium-analytics/widgets/net-sales-over-time/widget.json b/projects/packages/premium-analytics/widgets/net-sales-over-time/widget.json index fbbd8b3e9d78..28383670c6ad 100644 --- a/projects/packages/premium-analytics/widgets/net-sales-over-time/widget.json +++ b/projects/packages/premium-analytics/widgets/net-sales-over-time/widget.json @@ -2,6 +2,9 @@ "name": "jpa/net-sales-over-time", "title": "Net sales over time", "description": "Monitor your total revenue after discounts, returns, or adjustments over a set period of time.", + "help": { + "content": "Monitor your total revenue — after any discounts, returns, or adjustments — over a set period of time." + }, "category": "orders", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/net-sales-over-time/widget.ts b/projects/packages/premium-analytics/widgets/net-sales-over-time/widget.ts index a370a006d10d..4a95ae92c96f 100644 --- a/projects/packages/premium-analytics/widgets/net-sales-over-time/widget.ts +++ b/projects/packages/premium-analytics/widgets/net-sales-over-time/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type NetSalesOverTimeAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/net-sales-over-time', - title: __( 'Net sales over time', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Monitor your total revenue — after any discounts, returns, or adjustments — over a set period of time.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/new-vs-returning-customer/stories/new-vs-returning-customer-widget.stories.tsx b/projects/packages/premium-analytics/widgets/new-vs-returning-customer/stories/new-vs-returning-customer-widget.stories.tsx index 83395cb900db..fe8433858c52 100644 --- a/projects/packages/premium-analytics/widgets/new-vs-returning-customer/stories/new-vs-returning-customer-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/new-vs-returning-customer/stories/new-vs-returning-customer-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -13,6 +14,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import NewVsReturningCustomerRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -102,7 +104,7 @@ function NewVsReturningCustomerDashboardStory( { return ( > diff --git a/projects/packages/premium-analytics/widgets/new-vs-returning-customer/widget.json b/projects/packages/premium-analytics/widgets/new-vs-returning-customer/widget.json index ebdf13973a0f..40186d50e6a7 100644 --- a/projects/packages/premium-analytics/widgets/new-vs-returning-customer/widget.json +++ b/projects/packages/premium-analytics/widgets/new-vs-returning-customer/widget.json @@ -2,6 +2,9 @@ "name": "jpa/new-vs-returning-customer", "title": "New vs returning customer", "description": "Unique customer counts broken down by new vs returning customers over the selected time period.", + "help": { + "content": "Unique customer counts broken down by new vs returning customers over the selected time period." + }, "category": "store", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/new-vs-returning-customer/widget.ts b/projects/packages/premium-analytics/widgets/new-vs-returning-customer/widget.ts index 85935b3bc88d..057979ad3231 100644 --- a/projects/packages/premium-analytics/widgets/new-vs-returning-customer/widget.ts +++ b/projects/packages/premium-analytics/widgets/new-vs-returning-customer/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type NewVsReturningCustomerAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/new-vs-returning-customer', - title: __( 'New vs returning customer', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Unique customer counts broken down by new vs returning customers over the selected time period.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/orders-fulfillment/stories/orders-fulfillment-widget.stories.tsx b/projects/packages/premium-analytics/widgets/orders-fulfillment/stories/orders-fulfillment-widget.stories.tsx index 04bfa7e18c3d..f9fb151d6467 100644 --- a/projects/packages/premium-analytics/widgets/orders-fulfillment/stories/orders-fulfillment-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/orders-fulfillment/stories/orders-fulfillment-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -13,6 +14,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import OrdersFulfillmentRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -94,7 +96,7 @@ function OrdersFulfillmentDashboardStory( { return ( > } attributes={ getOrdersFulfillmentAttributes( withComparison, preset ) } diff --git a/projects/packages/premium-analytics/widgets/orders-fulfillment/widget.json b/projects/packages/premium-analytics/widgets/orders-fulfillment/widget.json index cdc91a6823bc..c913a9fca06d 100644 --- a/projects/packages/premium-analytics/widgets/orders-fulfillment/widget.json +++ b/projects/packages/premium-analytics/widgets/orders-fulfillment/widget.json @@ -2,6 +2,9 @@ "name": "jpa/orders-fulfillment", "title": "Orders fulfillment", "description": "Shows the breakdown of fulfilled vs unfulfilled order counts over the selected time period.", + "help": { + "content": "Shows the breakdown of fulfilled vs unfulfilled order counts over the selected time period." + }, "category": "store", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/orders-fulfillment/widget.ts b/projects/packages/premium-analytics/widgets/orders-fulfillment/widget.ts index 059be2b93067..e3edf9fdc544 100644 --- a/projects/packages/premium-analytics/widgets/orders-fulfillment/widget.ts +++ b/projects/packages/premium-analytics/widgets/orders-fulfillment/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type OrdersFulfillmentAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/orders-fulfillment', - title: __( 'Orders fulfillment', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Shows the breakdown of fulfilled vs unfulfilled order counts over the selected time period.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/orders-over-time/stories/orders-over-time-widget.stories.tsx b/projects/packages/premium-analytics/widgets/orders-over-time/stories/orders-over-time-widget.stories.tsx index 7fbb6d2da5be..f454d4b88f92 100644 --- a/projects/packages/premium-analytics/widgets/orders-over-time/stories/orders-over-time-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/orders-over-time/stories/orders-over-time-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import LineChart from '../../../../../js-packages/charts/src/charts/line-chart/line-chart'; import { @@ -14,6 +15,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import OrdersOverTimeRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -102,7 +104,7 @@ function OrdersOverTimeDashboardStory( { return ( > } attributes={ getOrdersOverTimeAttributes( withComparison, preset ) } diff --git a/projects/packages/premium-analytics/widgets/orders-over-time/widget.json b/projects/packages/premium-analytics/widgets/orders-over-time/widget.json index a0b31b3a67f3..7485955c7860 100644 --- a/projects/packages/premium-analytics/widgets/orders-over-time/widget.json +++ b/projects/packages/premium-analytics/widgets/orders-over-time/widget.json @@ -2,6 +2,9 @@ "name": "jpa/orders-over-time", "title": "Orders over time", "description": "See a breakdown of when orders are placed to identify peak selling periods.", + "help": { + "content": "See a breakdown of when orders are placed to identify peak selling periods." + }, "category": "orders", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/orders-over-time/widget.ts b/projects/packages/premium-analytics/widgets/orders-over-time/widget.ts index b5133e52b6b4..ebbab892d6e7 100644 --- a/projects/packages/premium-analytics/widgets/orders-over-time/widget.ts +++ b/projects/packages/premium-analytics/widgets/orders-over-time/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type OrdersOverTimeAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/orders-over-time', - title: __( 'Orders over time', 'jetpack-premium-analytics' ), - help: { - content: __( - 'See a breakdown of when orders are placed to identify peak selling periods.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/payment-status/stories/payment-status-widget.stories.tsx b/projects/packages/premium-analytics/widgets/payment-status/stories/payment-status-widget.stories.tsx index 9777b23b82e3..2700e05996ae 100644 --- a/projects/packages/premium-analytics/widgets/payment-status/stories/payment-status-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/payment-status/stories/payment-status-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -13,6 +14,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import PaymentStatusRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -92,7 +94,7 @@ function PaymentStatusDashboardStory( { return ( > } attributes={ getPaymentStatusAttributes( withComparison, preset ) } diff --git a/projects/packages/premium-analytics/widgets/payment-status/widget.json b/projects/packages/premium-analytics/widgets/payment-status/widget.json index aea54d02b0cd..7fa90532c73f 100644 --- a/projects/packages/premium-analytics/widgets/payment-status/widget.json +++ b/projects/packages/premium-analytics/widgets/payment-status/widget.json @@ -2,6 +2,9 @@ "name": "jpa/payment-status", "title": "Payment status", "description": "Shows the breakdown of paid vs unpaid order revenue over the selected time period.", + "help": { + "content": "Shows the breakdown of paid vs unpaid order revenue over the selected time period." + }, "category": "store", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/payment-status/widget.ts b/projects/packages/premium-analytics/widgets/payment-status/widget.ts index 137d2342ebec..d27e5bb211ce 100644 --- a/projects/packages/premium-analytics/widgets/payment-status/widget.ts +++ b/projects/packages/premium-analytics/widgets/payment-status/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type PaymentStatusAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/payment-status', - title: __( 'Payment status', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Shows the breakdown of paid vs unpaid order revenue over the selected time period.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/plan-usage/stories/plan-usage-widget.stories.tsx b/projects/packages/premium-analytics/widgets/plan-usage/stories/plan-usage-widget.stories.tsx index 721378601928..123434c2f605 100644 --- a/projects/packages/premium-analytics/widgets/plan-usage/stories/plan-usage-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/plan-usage/stories/plan-usage-widget.stories.tsx @@ -24,9 +24,11 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import PlanUsageRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -204,7 +206,7 @@ function PlanUsageDashboardStory( dashboardArgs: WidgetDashboardWithWidgetContro return ( > } attributes={ { reportParams: getDefaultQueryParams( true ) } } diff --git a/projects/packages/premium-analytics/widgets/plan-usage/widget.json b/projects/packages/premium-analytics/widgets/plan-usage/widget.json index 926bec9118d3..793d5386b5cd 100644 --- a/projects/packages/premium-analytics/widgets/plan-usage/widget.json +++ b/projects/packages/premium-analytics/widgets/plan-usage/widget.json @@ -2,6 +2,15 @@ "name": "jpa/plan-usage", "title": "Plan usage", "description": "How your billable views compare to your plan's monthly limit.", + "help": { + "content": "Billable views are your total views minus your two highest-traffic days each billing cycle, so big spikes won't count against your limit. You'll only need to upgrade if you exceed your limit for three cycles in a row.", + "links": [ + { + "label": "Learn more", + "href": "https://jetpack.com/support/jetpack-stats/free-or-paid/" + } + ] + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/plan-usage/widget.ts b/projects/packages/premium-analytics/widgets/plan-usage/widget.ts index b0034d203e49..81498ef154a8 100644 --- a/projects/packages/premium-analytics/widgets/plan-usage/widget.ts +++ b/projects/packages/premium-analytics/widgets/plan-usage/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { percent } from '@wordpress/icons'; /** @@ -25,21 +24,7 @@ export type PlanUsageAttributes = Record< never, never >; * how billable views are counted and when an upgrade is needed. */ export default { - name: 'jpa/plan-usage', - title: __( 'Plan usage', 'jetpack-premium-analytics' ), icon: percent, - help: { - content: __( - "Billable views are your total views minus your two highest-traffic days each billing cycle, so big spikes won't count against your limit. You'll only need to upgrade if you exceed your limit for three cycles in a row.", - 'jetpack-premium-analytics' - ), - links: [ - { - label: __( 'Learn more', 'jetpack-premium-analytics' ), - href: 'https://jetpack.com/support/jetpack-stats/free-or-paid/', - }, - ], - }, attributes: [], example: { attributes: {}, diff --git a/projects/packages/premium-analytics/widgets/post-comments/stories/post-comments-widget.stories.tsx b/projects/packages/premium-analytics/widgets/post-comments/stories/post-comments-widget.stories.tsx index 594fd2186123..76d8deb83bb4 100644 --- a/projects/packages/premium-analytics/widgets/post-comments/stories/post-comments-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/post-comments/stories/post-comments-widget.stories.tsx @@ -12,9 +12,11 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import PostCommentsRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -90,7 +92,7 @@ function PostCommentsDashboardStory( { return ( > } attributes={ getPostCommentsAttributes( { hasPostScope } ) } diff --git a/projects/packages/premium-analytics/widgets/post-comments/widget.json b/projects/packages/premium-analytics/widgets/post-comments/widget.json index b4c1ec0b7f54..e67b55ac77af 100644 --- a/projects/packages/premium-analytics/widgets/post-comments/widget.json +++ b/projects/packages/premium-analytics/widgets/post-comments/widget.json @@ -2,6 +2,9 @@ "name": "jpa/post-comments", "title": "Latest comments", "description": "The latest comments on the post or page being viewed.", + "help": { + "content": "The latest comments on the post or page being viewed." + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/post-comments/widget.ts b/projects/packages/premium-analytics/widgets/post-comments/widget.ts index 821c66d2275c..2af90cdf74f7 100644 --- a/projects/packages/premium-analytics/widgets/post-comments/widget.ts +++ b/projects/packages/premium-analytics/widgets/post-comments/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { comment } from '@wordpress/icons'; import type { WidgetAttributeField } from '@wordpress/widget-primitives'; @@ -16,14 +15,6 @@ export type PostCommentsAttributes = Record< never, never >; * card. The list is a lifetime roster and is not date-scoped. */ export default { - name: 'jpa/post-comments', - title: __( 'Latest comments', 'jetpack-premium-analytics' ), - help: { - content: __( - 'The latest comments on the post or page being viewed.', - 'jetpack-premium-analytics' - ), - }, icon: comment, attributes: [] as WidgetAttributeField< PostCommentsAttributes >[], example: { diff --git a/projects/packages/premium-analytics/widgets/post-detail-highlights/stories/post-detail-highlights-widget.stories.tsx b/projects/packages/premium-analytics/widgets/post-detail-highlights/stories/post-detail-highlights-widget.stories.tsx index 6dd3d928f1fa..a3880ed0c4ad 100644 --- a/projects/packages/premium-analytics/widgets/post-detail-highlights/stories/post-detail-highlights-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/post-detail-highlights/stories/post-detail-highlights-widget.stories.tsx @@ -25,9 +25,11 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import PostDetailHighlightsRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -159,7 +161,7 @@ function PostDetailHighlightsDashboardStory( { return ( > diff --git a/projects/packages/premium-analytics/widgets/post-detail-highlights/widget.json b/projects/packages/premium-analytics/widgets/post-detail-highlights/widget.json index 5a21bd42060a..9c5ba47cdd1b 100644 --- a/projects/packages/premium-analytics/widgets/post-detail-highlights/widget.json +++ b/projects/packages/premium-analytics/widgets/post-detail-highlights/widget.json @@ -2,6 +2,9 @@ "name": "jpa/post-detail-highlights", "title": "Post highlights", "description": "Views, comments, and likes for the post or page being viewed.", + "help": { + "content": "Views, comments, and likes for the post or page being viewed." + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/post-detail-highlights/widget.ts b/projects/packages/premium-analytics/widgets/post-detail-highlights/widget.ts index 2f533b0eece7..cfa0ebfc27d2 100644 --- a/projects/packages/premium-analytics/widgets/post-detail-highlights/widget.ts +++ b/projects/packages/premium-analytics/widgets/post-detail-highlights/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { starEmpty } from '@wordpress/icons'; import type { WidgetAttributeField } from '@wordpress/widget-primitives'; @@ -26,14 +25,6 @@ export type PostDetailHighlightsAttributes = Record< never, never >; * summary header, not repeated here. */ export default { - name: 'jpa/post-detail-highlights', - title: __( 'Post highlights', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Views, comments, and likes for the post or page being viewed.', - 'jetpack-premium-analytics' - ), - }, icon: starEmpty, attributes: [] as WidgetAttributeField< PostDetailHighlightsAttributes >[], example: { diff --git a/projects/packages/premium-analytics/widgets/post-likes/stories/post-likes-widget.stories.tsx b/projects/packages/premium-analytics/widgets/post-likes/stories/post-likes-widget.stories.tsx index 1957f990c9f1..2a9041c1084d 100644 --- a/projects/packages/premium-analytics/widgets/post-likes/stories/post-likes-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/post-likes/stories/post-likes-widget.stories.tsx @@ -23,9 +23,11 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import PostLikesRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -132,7 +134,7 @@ function PostLikesDashboardStory( { return ( > } attributes={ getPostLikesAttributes( { hasPostScope } ) } diff --git a/projects/packages/premium-analytics/widgets/post-likes/widget.json b/projects/packages/premium-analytics/widgets/post-likes/widget.json index a3cd00494118..0ba61c9e6fb9 100644 --- a/projects/packages/premium-analytics/widgets/post-likes/widget.json +++ b/projects/packages/premium-analytics/widgets/post-likes/widget.json @@ -2,6 +2,9 @@ "name": "jpa/post-likes", "title": "Latest likes", "description": "The people who liked the post or page being viewed.", + "help": { + "content": "The people who liked the post or page being viewed." + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/post-likes/widget.ts b/projects/packages/premium-analytics/widgets/post-likes/widget.ts index c0822b6b295a..2f8122e437cc 100644 --- a/projects/packages/premium-analytics/widgets/post-likes/widget.ts +++ b/projects/packages/premium-analytics/widgets/post-likes/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { starEmpty } from '@wordpress/icons'; import type { WidgetAttributeField } from '@wordpress/widget-primitives'; @@ -23,14 +22,6 @@ export type PostLikesAttributes = Record< never, never >; * shown. The list is a lifetime roster and is not date-scoped. */ export default { - name: 'jpa/post-likes', - title: __( 'Latest likes', 'jetpack-premium-analytics' ), - help: { - content: __( - 'The people who liked the post or page being viewed.', - 'jetpack-premium-analytics' - ), - }, icon: starEmpty, attributes: [] as WidgetAttributeField< PostLikesAttributes >[], example: { diff --git a/projects/packages/premium-analytics/widgets/post-traffic-activity/stories/post-traffic-activity-widget.stories.tsx b/projects/packages/premium-analytics/widgets/post-traffic-activity/stories/post-traffic-activity-widget.stories.tsx index 7a0bfa33b812..245e3068335b 100644 --- a/projects/packages/premium-analytics/widgets/post-traffic-activity/stories/post-traffic-activity-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/post-traffic-activity/stories/post-traffic-activity-widget.stories.tsx @@ -25,9 +25,11 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import PostTrafficActivityRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -155,7 +157,7 @@ function PostTrafficActivityDashboardStory( { return ( > } attributes={ getPostTrafficActivityAttributes( { hasPostScope, preset }, true ) } diff --git a/projects/packages/premium-analytics/widgets/post-traffic-activity/widget.json b/projects/packages/premium-analytics/widgets/post-traffic-activity/widget.json index 369eec1c02ae..4ba9edb1e031 100644 --- a/projects/packages/premium-analytics/widgets/post-traffic-activity/widget.json +++ b/projects/packages/premium-analytics/widgets/post-traffic-activity/widget.json @@ -2,6 +2,9 @@ "name": "jpa/post-traffic-activity", "title": "Traffic activity", "description": "Daily views for the post or page being viewed, as a calendar heatmap.", + "help": { + "content": "Daily views for the post or page being viewed, as a calendar heatmap." + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/post-traffic-activity/widget.ts b/projects/packages/premium-analytics/widgets/post-traffic-activity/widget.ts index f279c0e69c57..18d00f2f70a8 100644 --- a/projects/packages/premium-analytics/widgets/post-traffic-activity/widget.ts +++ b/projects/packages/premium-analytics/widgets/post-traffic-activity/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { calendar } from '@wordpress/icons'; import type { WidgetAttributeField } from '@wordpress/widget-primitives'; @@ -24,14 +23,6 @@ export type PostTrafficActivityAttributes = Record< never, never >; * traffic stay blank cells, per the design, while the grid stays complete. */ export default { - name: 'jpa/post-traffic-activity', - title: __( 'Traffic activity', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Daily views for the post or page being viewed, as a calendar heatmap.', - 'jetpack-premium-analytics' - ), - }, icon: calendar, attributes: [] as WidgetAttributeField< PostTrafficActivityAttributes >[], example: { diff --git a/projects/packages/premium-analytics/widgets/post-views/stories/post-views-widget.stories.tsx b/projects/packages/premium-analytics/widgets/post-views/stories/post-views-widget.stories.tsx index 79d63113d191..3b21d2ba0ffe 100644 --- a/projects/packages/premium-analytics/widgets/post-views/stories/post-views-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/post-views/stories/post-views-widget.stories.tsx @@ -24,9 +24,11 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import PostViewsRender from '../render'; import widgetDefinition, { type PostViewsGranularity } from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -163,7 +165,7 @@ function PostViewsDashboardStory( { return ( > } attributes={ getPostViewsAttributes( { withComparison, hasPostScope, granularity } ) } diff --git a/projects/packages/premium-analytics/widgets/post-views/widget.json b/projects/packages/premium-analytics/widgets/post-views/widget.json index 95258eb2bd2e..2a93dc9b02e6 100644 --- a/projects/packages/premium-analytics/widgets/post-views/widget.json +++ b/projects/packages/premium-analytics/widgets/post-views/widget.json @@ -2,6 +2,9 @@ "name": "jpa/post-views", "title": "Post views", "description": "The view trend of the post or page being viewed over the selected period.", + "help": { + "content": "The view trend of the post or page being viewed over the selected period." + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/post-views/widget.ts b/projects/packages/premium-analytics/widgets/post-views/widget.ts index bf742bee2a0b..611722f9c7c6 100644 --- a/projects/packages/premium-analytics/widgets/post-views/widget.ts +++ b/projects/packages/premium-analytics/widgets/post-views/widget.ts @@ -36,14 +36,6 @@ export type PostViewsAttributes = { * `granularity` attribute (`relevance: 'high'`) chooses the bucket size. */ export default { - name: 'jpa/post-views', - title: __( 'Post views', 'jetpack-premium-analytics' ), - help: { - content: __( - 'The view trend of the post or page being viewed over the selected period.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/posting-activity/stories/posting-activity-widget.stories.tsx b/projects/packages/premium-analytics/widgets/posting-activity/stories/posting-activity-widget.stories.tsx index 9c3e04b52bd4..041de33fd91d 100644 --- a/projects/packages/premium-analytics/widgets/posting-activity/stories/posting-activity-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/posting-activity/stories/posting-activity-widget.stories.tsx @@ -15,9 +15,11 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import PostingActivityRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { APIFetchMiddleware, APIFetchOptions } from '@wordpress/api-fetch'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; @@ -184,7 +186,7 @@ function PostingActivityDashboardStory( dashboardArgs: WidgetDashboardWithWidget return ( > } attributes={ { reportParams: getDefaultQueryParams( true ) } } diff --git a/projects/packages/premium-analytics/widgets/posting-activity/widget.json b/projects/packages/premium-analytics/widgets/posting-activity/widget.json index b9f2bffd1275..efded06c971b 100644 --- a/projects/packages/premium-analytics/widgets/posting-activity/widget.json +++ b/projects/packages/premium-analytics/widgets/posting-activity/widget.json @@ -2,6 +2,9 @@ "name": "jpa/posting-activity", "title": "Posting activity", "description": "How often you publish — a calendar heatmap of posts per day.", + "help": { + "content": "Your posting activity, shown as a heatmap to help you spot your most and least active days." + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/posting-activity/widget.ts b/projects/packages/premium-analytics/widgets/posting-activity/widget.ts index a0e35d84d636..8da36073e5de 100644 --- a/projects/packages/premium-analytics/widgets/posting-activity/widget.ts +++ b/projects/packages/premium-analytics/widgets/posting-activity/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { calendar } from '@wordpress/icons'; /** @@ -19,13 +18,5 @@ export type PostingActivityAttributes = Record< never, never >; * `stats/streak` endpoint has no comparison period, so no delta is shown. */ export default { - name: 'jpa/posting-activity', - title: __( 'Posting activity', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Your posting activity, shown as a heatmap to help you spot your most and least active days.', - 'jetpack-premium-analytics' - ), - }, icon: calendar, }; diff --git a/projects/packages/premium-analytics/widgets/react-query-dev-tool/widget.ts b/projects/packages/premium-analytics/widgets/react-query-dev-tool/widget.ts index 16c8b2d4e719..4bdebb28b897 100644 --- a/projects/packages/premium-analytics/widgets/react-query-dev-tool/widget.ts +++ b/projects/packages/premium-analytics/widgets/react-query-dev-tool/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { bug } from '@wordpress/icons'; /** @@ -19,7 +18,5 @@ export type ReactQueryDevToolAttributes = Record< never, never >; * dashboard's widget picker. */ export default { - name: 'jpa/react-query-dev-tool', - title: __( 'React Query Devtools', 'jetpack-premium-analytics' ), icon: bug, }; diff --git a/projects/packages/premium-analytics/widgets/referrers/stories/referrers-widget.stories.tsx b/projects/packages/premium-analytics/widgets/referrers/stories/referrers-widget.stories.tsx index 20f8d47f80f9..58b7d7ea8713 100644 --- a/projects/packages/premium-analytics/widgets/referrers/stories/referrers-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/referrers/stories/referrers-widget.stories.tsx @@ -15,9 +15,11 @@ import { type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; import { withStoryRouter } from '../../stories/with-story-router'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import ReferrersRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -27,12 +29,7 @@ registerStatsMocks(); const REFERRERS_RENDER_MODULE = 'storybook/referrers'; -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - icon: widgetDefinition.icon, - presentation: 'framed' as const, -}; +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); interface ReferrersStoryControls { withComparison: boolean; diff --git a/projects/packages/premium-analytics/widgets/referrers/widget.json b/projects/packages/premium-analytics/widgets/referrers/widget.json index 0a08c4d5ca2c..015cc20b1830 100644 --- a/projects/packages/premium-analytics/widgets/referrers/widget.json +++ b/projects/packages/premium-analytics/widgets/referrers/widget.json @@ -2,6 +2,15 @@ "name": "jpa/referrers", "title": "Referrers", "description": "Websites and search engines referring visitors to your site.", + "help": { + "content": "The sources that sent the most visitors to your site, sorted by clicks.", + "links": [ + { + "label": "Learn more", + "href": "https://jetpack.com/support/jetpack-stats/" + } + ] + }, "category": "traffic", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/referrers/widget.ts b/projects/packages/premium-analytics/widgets/referrers/widget.ts index 30850649493e..6b72cb282837 100644 --- a/projects/packages/premium-analytics/widgets/referrers/widget.ts +++ b/projects/packages/premium-analytics/widgets/referrers/widget.ts @@ -21,20 +21,6 @@ export type ReferrersAttributes = { * dashboard date range via the PA proxy at `stats/referrers`. */ export default { - name: 'jpa/referrers', - title: __( 'Referrers', 'jetpack-premium-analytics' ), - help: { - content: __( - 'The sources that sent the most visitors to your site, sorted by clicks.', - 'jetpack-premium-analytics' - ), - links: [ - { - label: __( 'Learn more', 'jetpack-premium-analytics' ), - href: 'https://jetpack.com/support/jetpack-stats/', - }, - ], - }, icon: globe, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/revenue-by-customer-type/stories/revenue-by-customer-type-widget.stories.tsx b/projects/packages/premium-analytics/widgets/revenue-by-customer-type/stories/revenue-by-customer-type-widget.stories.tsx index 033226c8e2ae..0ed4071a6a1c 100644 --- a/projects/packages/premium-analytics/widgets/revenue-by-customer-type/stories/revenue-by-customer-type-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/revenue-by-customer-type/stories/revenue-by-customer-type-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -13,6 +14,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import RevenueByCustomerTypeRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -102,7 +104,7 @@ function RevenueByCustomerTypeDashboardStory( { return ( > diff --git a/projects/packages/premium-analytics/widgets/revenue-by-customer-type/widget.json b/projects/packages/premium-analytics/widgets/revenue-by-customer-type/widget.json index e5fc849d2502..69b8d4fb669b 100644 --- a/projects/packages/premium-analytics/widgets/revenue-by-customer-type/widget.json +++ b/projects/packages/premium-analytics/widgets/revenue-by-customer-type/widget.json @@ -2,6 +2,9 @@ "name": "jpa/revenue-by-customer-type", "title": "Revenue by customer type", "description": "Shows the breakdown of order revenue from new and returning customers over the selected time period.", + "help": { + "content": "Revenue breakdown from new customers vs returning customers over the selected time period." + }, "category": "store", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/revenue-by-customer-type/widget.ts b/projects/packages/premium-analytics/widgets/revenue-by-customer-type/widget.ts index d053790fef71..bb04977462ba 100644 --- a/projects/packages/premium-analytics/widgets/revenue-by-customer-type/widget.ts +++ b/projects/packages/premium-analytics/widgets/revenue-by-customer-type/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type RevenueByCustomerTypeAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/revenue-by-customer-type', - title: __( 'Revenue by customer type', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Revenue breakdown from new customers vs returning customers over the selected time period.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/sales-by-coupon-usage/stories/sales-by-coupon-usage-widget.stories.tsx b/projects/packages/premium-analytics/widgets/sales-by-coupon-usage/stories/sales-by-coupon-usage-widget.stories.tsx index 6ebb8a6857c1..aa010c258358 100644 --- a/projects/packages/premium-analytics/widgets/sales-by-coupon-usage/stories/sales-by-coupon-usage-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/sales-by-coupon-usage/stories/sales-by-coupon-usage-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -13,6 +14,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import SalesByCouponUsageRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -96,7 +98,7 @@ function SalesByCouponUsageDashboardStory( { return ( > } attributes={ getSalesByCouponUsageAttributes( withComparison, preset ) } diff --git a/projects/packages/premium-analytics/widgets/sales-by-coupon-usage/widget.json b/projects/packages/premium-analytics/widgets/sales-by-coupon-usage/widget.json index bf3321bdfe96..418521089d0a 100644 --- a/projects/packages/premium-analytics/widgets/sales-by-coupon-usage/widget.json +++ b/projects/packages/premium-analytics/widgets/sales-by-coupon-usage/widget.json @@ -2,6 +2,9 @@ "name": "jpa/sales-by-coupon-usage", "title": "Sales by coupon usage", "description": "Sales by coupon usage over the selected time period.", + "help": { + "content": "Compare sales with and without coupons." + }, "category": "coupons", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/sales-by-coupon-usage/widget.ts b/projects/packages/premium-analytics/widgets/sales-by-coupon-usage/widget.ts index 66c5461a063e..574356e388c3 100644 --- a/projects/packages/premium-analytics/widgets/sales-by-coupon-usage/widget.ts +++ b/projects/packages/premium-analytics/widgets/sales-by-coupon-usage/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,10 +22,5 @@ export type SalesByCouponUsageAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/sales-by-coupon-usage', - title: __( 'Sales by coupon usage', 'jetpack-premium-analytics' ), - help: { - content: __( 'Compare sales with and without coupons.', 'jetpack-premium-analytics' ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/sales-by-coupon/stories/sales-by-coupon-widget.stories.tsx b/projects/packages/premium-analytics/widgets/sales-by-coupon/stories/sales-by-coupon-widget.stories.tsx index 6c4beab2ef20..06b875fd2b69 100644 --- a/projects/packages/premium-analytics/widgets/sales-by-coupon/stories/sales-by-coupon-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/sales-by-coupon/stories/sales-by-coupon-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -13,6 +14,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import SalesByCouponRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -85,7 +87,7 @@ function SalesByCouponDashboardStory( { return ( > } attributes={ getSalesByCouponAttributes( withComparison, preset ) } diff --git a/projects/packages/premium-analytics/widgets/sales-by-coupon/widget.json b/projects/packages/premium-analytics/widgets/sales-by-coupon/widget.json index 780fce68b55e..c33668058bad 100644 --- a/projects/packages/premium-analytics/widgets/sales-by-coupon/widget.json +++ b/projects/packages/premium-analytics/widgets/sales-by-coupon/widget.json @@ -2,6 +2,9 @@ "name": "jpa/sales-by-coupon", "title": "Sales by coupon", "description": "Shows the top coupon codes by order revenue over the selected time period.", + "help": { + "content": "Revenue from physical product sales using coupons over the selected time period." + }, "category": "store", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/sales-by-coupon/widget.ts b/projects/packages/premium-analytics/widgets/sales-by-coupon/widget.ts index e20f3910fded..bca0e7c954b0 100644 --- a/projects/packages/premium-analytics/widgets/sales-by-coupon/widget.ts +++ b/projects/packages/premium-analytics/widgets/sales-by-coupon/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type SalesByCouponAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/sales-by-coupon', - title: __( 'Sales by coupon', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Revenue from physical product sales using coupons over the selected time period.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/sales-by-device/stories/sales-by-device-widget.stories.tsx b/projects/packages/premium-analytics/widgets/sales-by-device/stories/sales-by-device-widget.stories.tsx index 98b758ca86bb..cf8eb197dae5 100644 --- a/projects/packages/premium-analytics/widgets/sales-by-device/stories/sales-by-device-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/sales-by-device/stories/sales-by-device-widget.stories.tsx @@ -10,9 +10,11 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import SalesByDeviceRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -104,7 +106,7 @@ function SalesByDeviceDashboardStory( { return ( > } attributes={ getSalesByDeviceAttributes( withComparison, preset ) } diff --git a/projects/packages/premium-analytics/widgets/sales-by-device/widget.json b/projects/packages/premium-analytics/widgets/sales-by-device/widget.json index 1b5a19558f08..a399917b1db8 100644 --- a/projects/packages/premium-analytics/widgets/sales-by-device/widget.json +++ b/projects/packages/premium-analytics/widgets/sales-by-device/widget.json @@ -2,6 +2,9 @@ "name": "jpa/sales-by-device", "title": "Sales by device", "description": "Shows the sales breakdown by device type over the selected time period.", + "help": { + "content": "See which devices your customers are using to make purchases in your store." + }, "category": "store", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/sales-by-device/widget.ts b/projects/packages/premium-analytics/widgets/sales-by-device/widget.ts index bbdec432677a..052c3a75391f 100644 --- a/projects/packages/premium-analytics/widgets/sales-by-device/widget.ts +++ b/projects/packages/premium-analytics/widgets/sales-by-device/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type SalesByDeviceAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/sales-by-device', - title: __( 'Sales by device', 'jetpack-premium-analytics' ), - help: { - content: __( - 'See which devices your customers are using to make purchases in your store.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/sales-by-utm-campaign/stories/sales-by-utm-campaign-widget.stories.tsx b/projects/packages/premium-analytics/widgets/sales-by-utm-campaign/stories/sales-by-utm-campaign-widget.stories.tsx index eedb74901b3a..fe806cb73443 100644 --- a/projects/packages/premium-analytics/widgets/sales-by-utm-campaign/stories/sales-by-utm-campaign-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/sales-by-utm-campaign/stories/sales-by-utm-campaign-widget.stories.tsx @@ -10,9 +10,11 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import SalesByUtmCampaignRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -108,7 +110,7 @@ function SalesByUtmCampaignDashboardStory( { return ( > } attributes={ getSalesByUtmCampaignAttributes( withComparison, preset ) } diff --git a/projects/packages/premium-analytics/widgets/sales-by-utm-campaign/widget.json b/projects/packages/premium-analytics/widgets/sales-by-utm-campaign/widget.json index b925f029494c..2a254f5c48f2 100644 --- a/projects/packages/premium-analytics/widgets/sales-by-utm-campaign/widget.json +++ b/projects/packages/premium-analytics/widgets/sales-by-utm-campaign/widget.json @@ -2,6 +2,9 @@ "name": "jpa/sales-by-utm-campaign", "title": "Sales by UTM campaign", "description": "Shows the top UTM campaigns by order revenue over the selected time period.", + "help": { + "content": "See which marketing campaigns are driving sales in your store." + }, "category": "store", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/sales-by-utm-campaign/widget.ts b/projects/packages/premium-analytics/widgets/sales-by-utm-campaign/widget.ts index d334cae42128..c2a913d69162 100644 --- a/projects/packages/premium-analytics/widgets/sales-by-utm-campaign/widget.ts +++ b/projects/packages/premium-analytics/widgets/sales-by-utm-campaign/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type SalesByUtmCampaignAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/sales-by-utm-campaign', - title: __( 'Sales by UTM campaign', 'jetpack-premium-analytics' ), - help: { - content: __( - 'See which marketing campaigns are driving sales in your store.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/sales-by-utm-channel/stories/sales-by-utm-channel-widget.stories.tsx b/projects/packages/premium-analytics/widgets/sales-by-utm-channel/stories/sales-by-utm-channel-widget.stories.tsx index 0ef9a91f2a8e..aea19b6945fe 100644 --- a/projects/packages/premium-analytics/widgets/sales-by-utm-channel/stories/sales-by-utm-channel-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/sales-by-utm-channel/stories/sales-by-utm-channel-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -13,6 +14,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import SalesByUtmChannelRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -66,7 +68,7 @@ function SalesByUtmChannelDashboardStory( { return ( > } attributes={ getSalesByUtmChannelAttributes( withComparison, preset ) } diff --git a/projects/packages/premium-analytics/widgets/sales-by-utm-channel/widget.json b/projects/packages/premium-analytics/widgets/sales-by-utm-channel/widget.json index 12b33ed7d8ae..f0c2a53c5e13 100644 --- a/projects/packages/premium-analytics/widgets/sales-by-utm-channel/widget.json +++ b/projects/packages/premium-analytics/widgets/sales-by-utm-channel/widget.json @@ -2,6 +2,9 @@ "name": "jpa/sales-by-utm-channel", "title": "Sales by UTM channel", "description": "Shows the top UTM channels by order revenue over the selected time period.", + "help": { + "content": "See which marketing channels are driving sales in your store." + }, "category": "store", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/sales-by-utm-channel/widget.ts b/projects/packages/premium-analytics/widgets/sales-by-utm-channel/widget.ts index 197e13207e5d..06616c77330e 100644 --- a/projects/packages/premium-analytics/widgets/sales-by-utm-channel/widget.ts +++ b/projects/packages/premium-analytics/widgets/sales-by-utm-channel/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type SalesByUtmChannelAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/sales-by-utm-channel', - title: __( 'Sales by UTM channel', 'jetpack-premium-analytics' ), - help: { - content: __( - 'See which marketing channels are driving sales in your store.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/sales-by-utm-source/stories/sales-by-utm-source-widget.stories.tsx b/projects/packages/premium-analytics/widgets/sales-by-utm-source/stories/sales-by-utm-source-widget.stories.tsx index 1b64370479e7..72300bd8bb82 100644 --- a/projects/packages/premium-analytics/widgets/sales-by-utm-source/stories/sales-by-utm-source-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/sales-by-utm-source/stories/sales-by-utm-source-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -13,6 +14,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import SalesByUtmSourceRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -94,7 +96,7 @@ function SalesByUtmSourceDashboardStory( { return ( > } attributes={ getSalesByUtmSourceAttributes( withComparison, preset ) } diff --git a/projects/packages/premium-analytics/widgets/sales-by-utm-source/widget.json b/projects/packages/premium-analytics/widgets/sales-by-utm-source/widget.json index 232713c1f218..23b3ff2a6dcd 100644 --- a/projects/packages/premium-analytics/widgets/sales-by-utm-source/widget.json +++ b/projects/packages/premium-analytics/widgets/sales-by-utm-source/widget.json @@ -2,6 +2,9 @@ "name": "jpa/sales-by-utm-source", "title": "Sales by UTM source", "description": "Shows the top UTM sources by order revenue over the selected time period.", + "help": { + "content": "See which referral sources are driving sales in your store." + }, "category": "store", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/sales-by-utm-source/widget.ts b/projects/packages/premium-analytics/widgets/sales-by-utm-source/widget.ts index 722e9bec954f..093c5b50f9da 100644 --- a/projects/packages/premium-analytics/widgets/sales-by-utm-source/widget.ts +++ b/projects/packages/premium-analytics/widgets/sales-by-utm-source/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type SalesByUtmSourceAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/sales-by-utm-source', - title: __( 'Sales by UTM source', 'jetpack-premium-analytics' ), - help: { - content: __( - 'See which referral sources are driving sales in your store.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/search-terms/stories/search-terms-widget.stories.tsx b/projects/packages/premium-analytics/widgets/search-terms/stories/search-terms-widget.stories.tsx index 5a78e2400040..22a2eac86518 100644 --- a/projects/packages/premium-analytics/widgets/search-terms/stories/search-terms-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/search-terms/stories/search-terms-widget.stories.tsx @@ -6,6 +6,7 @@ import { type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; import { withStoryRouter } from '../../stories/with-story-router'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -13,6 +14,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import SearchTermsRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -21,14 +23,9 @@ registerReportMocks(); const SEARCH_TERMS_RENDER_MODULE = 'storybook/search-terms'; -// Pick only the fields that StoryWidgetMetadata accepts; the attribute schema -// and example arrays are typed differently in WidgetType and cause a type error. -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - icon: widgetDefinition.icon, - presentation: 'framed' as const, -}; +// Build the story widget type from its manifest and module. `presentation` +// comes from widget.json ( 'framed' ), so the host frames the widget. +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); interface SearchTermsStoryControls { withComparison: boolean; diff --git a/projects/packages/premium-analytics/widgets/search-terms/widget.json b/projects/packages/premium-analytics/widgets/search-terms/widget.json index 0e8df37c5e81..bef7c9e35933 100644 --- a/projects/packages/premium-analytics/widgets/search-terms/widget.json +++ b/projects/packages/premium-analytics/widgets/search-terms/widget.json @@ -2,6 +2,15 @@ "name": "jpa/search-terms", "title": "Search Terms", "description": "The search terms visitors use to find your site.", + "help": { + "content": "The most popular search terms visitors used to find your site.", + "links": [ + { + "label": "Learn more", + "href": "https://jetpack.com/support/jetpack-stats/" + } + ] + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/search-terms/widget.ts b/projects/packages/premium-analytics/widgets/search-terms/widget.ts index f46befd4ba38..d5ca6979893a 100644 --- a/projects/packages/premium-analytics/widgets/search-terms/widget.ts +++ b/projects/packages/premium-analytics/widgets/search-terms/widget.ts @@ -22,20 +22,6 @@ export type SearchTermsAttributes = { * Date range comes from WidgetRoot's reportParams (the shared dashboard date picker). */ export default { - name: 'jpa/search-terms', - title: __( 'Search Terms', 'jetpack-premium-analytics' ), - help: { - content: __( - 'The most popular search terms visitors used to find your site.', - 'jetpack-premium-analytics' - ), - links: [ - { - label: __( 'Learn more', 'jetpack-premium-analytics' ), - href: 'https://jetpack.com/support/jetpack-stats/', - }, - ], - }, icon: search, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/sessions-by-device/stories/sessions-by-device-widget.stories.tsx b/projects/packages/premium-analytics/widgets/sessions-by-device/stories/sessions-by-device-widget.stories.tsx index 7c1eb4532909..38cd0bc52351 100644 --- a/projects/packages/premium-analytics/widgets/sessions-by-device/stories/sessions-by-device-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/sessions-by-device/stories/sessions-by-device-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -13,6 +14,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import SessionsByDeviceRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -94,7 +96,7 @@ function SessionsByDeviceDashboardStory( { return ( > } attributes={ getSessionsByDeviceAttributes( withComparison, preset ) } diff --git a/projects/packages/premium-analytics/widgets/sessions-by-device/widget.json b/projects/packages/premium-analytics/widgets/sessions-by-device/widget.json index 9b576e6c04aa..7c81e6d75bc2 100644 --- a/projects/packages/premium-analytics/widgets/sessions-by-device/widget.json +++ b/projects/packages/premium-analytics/widgets/sessions-by-device/widget.json @@ -2,6 +2,9 @@ "name": "jpa/sessions-by-device", "title": "Sessions by device", "description": "Shows the sessions breakdown by device type over the selected time period.", + "help": { + "content": "See which devices visitors are using to browse your store." + }, "category": "store", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/sessions-by-device/widget.ts b/projects/packages/premium-analytics/widgets/sessions-by-device/widget.ts index f3744e3640a2..cd69d9db5e63 100644 --- a/projects/packages/premium-analytics/widgets/sessions-by-device/widget.ts +++ b/projects/packages/premium-analytics/widgets/sessions-by-device/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type SessionsByDeviceAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/sessions-by-device', - title: __( 'Sessions by device', 'jetpack-premium-analytics' ), - help: { - content: __( - 'See which devices visitors are using to browse your store.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/shares/stories/shares-widget.stories.tsx b/projects/packages/premium-analytics/widgets/shares/stories/shares-widget.stories.tsx index ebdda7725ddf..a346e3373de3 100644 --- a/projects/packages/premium-analytics/widgets/shares/stories/shares-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/shares/stories/shares-widget.stories.tsx @@ -17,6 +17,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -24,6 +25,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import SharesRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -53,14 +55,9 @@ function forceSiteSummaryState( state: 'loading' | 'error' | 'empty' ) { }; } -// Pick only the fields that StoryWidgetMetadata accepts; the attribute schema and -// example arrays are typed differently in WidgetType and cause a type error. -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - icon: widgetDefinition.icon, - presentation: 'framed' as const, -}; +// Build the story widget type from its manifest and module. `presentation` +// comes from widget.json ( 'framed' ), so the host frames the widget. +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); function renderShares() { return ; diff --git a/projects/packages/premium-analytics/widgets/shares/widget.json b/projects/packages/premium-analytics/widgets/shares/widget.json index f098494e11eb..0e3a64263684 100644 --- a/projects/packages/premium-analytics/widgets/shares/widget.json +++ b/projects/packages/premium-analytics/widgets/shares/widget.json @@ -2,6 +2,9 @@ "name": "jpa/shares", "title": "Shares", "description": "The number of times your content was shared to social networks.", + "help": { + "content": "The platforms where your content was shared most often, sorted by number of shares." + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/shares/widget.ts b/projects/packages/premium-analytics/widgets/shares/widget.ts index f30f38d46509..38eb67aaaaf8 100644 --- a/projects/packages/premium-analytics/widgets/shares/widget.ts +++ b/projects/packages/premium-analytics/widgets/shares/widget.ts @@ -23,14 +23,6 @@ export type SharesAttributes = { * and has no comparison period, so the widget ignores the dashboard date range. */ export default { - name: 'jpa/shares', - title: __( 'Shares', 'jetpack-premium-analytics' ), - help: { - content: __( - 'The platforms where your content was shared most often, sorted by number of shares.', - 'jetpack-premium-analytics' - ), - }, icon: share, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/site-overview/stories/site-overview-widget.stories.tsx b/projects/packages/premium-analytics/widgets/site-overview/stories/site-overview-widget.stories.tsx index 1dfbdb4315b7..16fa11dc57e4 100644 --- a/projects/packages/premium-analytics/widgets/site-overview/stories/site-overview-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/site-overview/stories/site-overview-widget.stories.tsx @@ -24,14 +24,16 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import SiteOverviewRender from '../render'; import widgetDefinition, { DEFAULT_SITE_OVERVIEW_METRICS, type SiteOverviewMetricId, } from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; -import type { WidgetRenderProps, WidgetType } from '@wordpress/widget-primitives'; +import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; registerReportMocks(); @@ -39,16 +41,8 @@ registerReportMocks(); const SITE_OVERVIEW_RENDER_MODULE = 'storybook/site-overview'; // Carry the widget's metadata, including the metric-visibility attribute schema, -// so the dashboard story's settings drawer renders the real checkboxes. The -// attribute schema is typed loosely on the widget definition, so it is cast to -// the WidgetType shape. -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - icon: widgetDefinition.icon, - attributes: widgetDefinition.attributes as WidgetType[ 'attributes' ], - example: widgetDefinition.example, -}; +// so the dashboard story's settings drawer renders the real checkboxes. +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); interface SiteOverviewStoryControls { /** diff --git a/projects/packages/premium-analytics/widgets/site-overview/widget.json b/projects/packages/premium-analytics/widgets/site-overview/widget.json index 449f9659c3d6..169770688e30 100644 --- a/projects/packages/premium-analytics/widgets/site-overview/widget.json +++ b/projects/packages/premium-analytics/widgets/site-overview/widget.json @@ -2,6 +2,9 @@ "name": "jpa/site-overview", "title": "Site overview", "description": "Views, visitors, likes, and comments for the selected period, with period-over-period change.", + "help": { + "content": "A summary of your site's views, visitors, likes, and comments, with period-over-period change." + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/site-overview/widget.ts b/projects/packages/premium-analytics/widgets/site-overview/widget.ts index 032f5bcecf3e..3ee64ad27981 100644 --- a/projects/packages/premium-analytics/widgets/site-overview/widget.ts +++ b/projects/packages/premium-analytics/widgets/site-overview/widget.ts @@ -57,14 +57,6 @@ export const DEFAULT_SITE_OVERVIEW_METRICS: SiteOverviewMetricId[] = SITE_OVERVI * instances: every metric enabled. */ export default { - name: 'jpa/site-overview', - title: __( 'Site overview', 'jetpack-premium-analytics' ), - help: { - content: __( - "A summary of your site's views, visitors, likes, and comments, with period-over-period change.", - 'jetpack-premium-analytics' - ), - }, icon: globe, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/store-conversion-rate-bookings/stories/store-conversion-rate-bookings-widget.stories.tsx b/projects/packages/premium-analytics/widgets/store-conversion-rate-bookings/stories/store-conversion-rate-bookings-widget.stories.tsx index 630a86dbfdf3..f9ae9057aaa6 100644 --- a/projects/packages/premium-analytics/widgets/store-conversion-rate-bookings/stories/store-conversion-rate-bookings-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/store-conversion-rate-bookings/stories/store-conversion-rate-bookings-widget.stories.tsx @@ -8,10 +8,12 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { forceStatsMockState } from '../../stories/force-stats-mock-state'; import StoreConversionRateBookingsRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { APIFetchMiddleware } from '@wordpress/api-fetch'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; @@ -182,7 +184,7 @@ function StoreConversionRateBookingsDashboardStory( { return ( > diff --git a/projects/packages/premium-analytics/widgets/store-conversion-rate-bookings/widget.json b/projects/packages/premium-analytics/widgets/store-conversion-rate-bookings/widget.json index 5cff5b9991b5..884a1a5cff8e 100644 --- a/projects/packages/premium-analytics/widgets/store-conversion-rate-bookings/widget.json +++ b/projects/packages/premium-analytics/widgets/store-conversion-rate-bookings/widget.json @@ -2,6 +2,9 @@ "name": "jpa/store-conversion-rate-bookings", "title": "Store conversion rate - Bookings", "description": "Store conversion rate for booking products over the selected time period.", + "help": { + "content": "Track your booking conversion funnel from sessions to completed bookings over the selected time period." + }, "category": "bookings", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/store-conversion-rate-bookings/widget.ts b/projects/packages/premium-analytics/widgets/store-conversion-rate-bookings/widget.ts index bb01d86a2177..2b1d75c99ac0 100644 --- a/projects/packages/premium-analytics/widgets/store-conversion-rate-bookings/widget.ts +++ b/projects/packages/premium-analytics/widgets/store-conversion-rate-bookings/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -22,13 +21,5 @@ export type StoreConversionRateBookingsAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/store-conversion-rate-bookings', - title: __( 'Store conversion rate - Bookings', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Track your booking conversion funnel from sessions to completed bookings over the selected time period.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/store-performance/stories/store-performance-widget.stories.tsx b/projects/packages/premium-analytics/widgets/store-performance/stories/store-performance-widget.stories.tsx index 104a1c026089..22c809e7e637 100644 --- a/projects/packages/premium-analytics/widgets/store-performance/stories/store-performance-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/store-performance/stories/store-performance-widget.stories.tsx @@ -11,12 +11,14 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { DEFAULT_STORE_PERFORMANCE_METRICS, type StorePerformanceMetricId } from '../metrics'; import StorePerformanceRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; -import type { WidgetRenderProps, WidgetType } from '@wordpress/widget-primitives'; +import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; registerReportMocks(); @@ -29,17 +31,9 @@ const ensureLineChartComposition = () => LineChart.Legend; // Carry the widget's metadata, including the metric-visibility attribute schema // so the dashboard story's settings drawer renders the real checkboxes. -// Presentation is left unset so the host frames the widget and renders its -// identity (title + icon), matching widget.json. The attribute schema is typed -// loosely on the widget definition, so it is cast to the WidgetType shape. -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - help: widgetDefinition.help, - icon: widgetDefinition.icon, - attributes: widgetDefinition.attributes as WidgetType[ 'attributes' ], - example: widgetDefinition.example, -}; +// Presentation is left unset in widget.json, so the host frames the widget and +// renders its identity (title + icon). +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); type StorePerformanceRenderProps = ComponentProps< typeof StorePerformanceRender >; diff --git a/projects/packages/premium-analytics/widgets/store-performance/widget.json b/projects/packages/premium-analytics/widgets/store-performance/widget.json index a249edb9f92d..b193993a3e4b 100644 --- a/projects/packages/premium-analytics/widgets/store-performance/widget.json +++ b/projects/packages/premium-analytics/widgets/store-performance/widget.json @@ -2,5 +2,8 @@ "name": "jpa/store-performance", "title": "Store performance", "description": "Shows key store performance metrics at a glance.", + "help": { + "content": "Shows key store performance metrics at a glance." + }, "category": "store" } diff --git a/projects/packages/premium-analytics/widgets/store-performance/widget.ts b/projects/packages/premium-analytics/widgets/store-performance/widget.ts index 501570373bd3..8702bb177304 100644 --- a/projects/packages/premium-analytics/widgets/store-performance/widget.ts +++ b/projects/packages/premium-analytics/widgets/store-performance/widget.ts @@ -39,11 +39,6 @@ export type StorePerformanceAttributes = { * instances: every metric enabled. */ export default { - name: 'jpa/store-performance', - title: __( 'Store performance', 'jetpack-premium-analytics' ), - help: { - content: __( 'Shows key store performance metrics at a glance.', 'jetpack-premium-analytics' ), - }, icon: store, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/stories/create-story-widget-type.ts b/projects/packages/premium-analytics/widgets/stories/create-story-widget-type.ts new file mode 100644 index 000000000000..87ea8150d05c --- /dev/null +++ b/projects/packages/premium-analytics/widgets/stories/create-story-widget-type.ts @@ -0,0 +1,74 @@ +/** + * WordPress dependencies + */ +import type { WidgetType } from '@wordpress/widget-primitives'; + +/** + * Identity and declarative metadata a widget authors in `widget.json` — the + * fields the dashboard reads from the REST manifest rather than from the + * lazily-imported module. + */ +export interface StoryWidgetManifest { + name: string; + title: string; + description?: string; + help?: WidgetType[ 'help' ]; + category?: string; + presentation?: string; + keywords?: string[]; +} + +/** + * Runtime-only fields a widget declares in `widget.ts` (its default export): + * the ones that cannot live in JSON because they hold a React element or + * component references. Typed loosely so any widget module is accepted without + * a per-call-site cast. + */ +interface StoryWidgetModule { + icon?: unknown; + attributes?: unknown; + example?: unknown; +} + +/** + * The widget type a story hands to ``: identity plus + * any authoring metadata, with the module's runtime-only fields. + */ +export type StoryWidgetType = { + name: string; + title: string; +} & Partial< Omit< WidgetType, 'apiVersion' | 'name' | 'renderModule' | 'title' > >; + +/** + * Combine a widget's `widget.json` manifest (identity + declarative metadata) + * with its `widget.ts` module export (icon, attributes, example) into the + * widget type a Storybook story hands to the dashboard helper. + * + * This mirrors what the dashboard does at runtime — merge the REST manifest + * over the lazily-imported module — which Storybook has no REST layer to + * perform. `name`/`title`/`help` and the other declarative fields come from the + * manifest; `icon`, `attributes`, and `example` come from the module. The + * attribute list is typed against the widget's own `Item`, so it is widened + * here once instead of at every call site. + */ +export function createStoryWidgetType( + manifest: StoryWidgetManifest, + moduleDefinition: StoryWidgetModule +): StoryWidgetType { + return { + name: manifest.name, + title: manifest.title, + icon: moduleDefinition.icon as WidgetType[ 'icon' ], + attributes: moduleDefinition.attributes as WidgetType[ 'attributes' ], + example: moduleDefinition.example as WidgetType[ 'example' ], + ...( manifest.description ? { description: manifest.description } : {} ), + ...( manifest.category ? { category: manifest.category } : {} ), + ...( manifest.keywords ? { keywords: manifest.keywords } : {} ), + ...( manifest.help ? { help: manifest.help } : {} ), + ...( manifest.presentation + ? { + presentation: manifest.presentation as WidgetType[ 'presentation' ], + } + : {} ), + }; +} diff --git a/projects/packages/premium-analytics/widgets/subscriber-highlights/stories/subscriber-highlights-widget.stories.tsx b/projects/packages/premium-analytics/widgets/subscriber-highlights/stories/subscriber-highlights-widget.stories.tsx index 85482308f1f2..f7fbc535a425 100644 --- a/projects/packages/premium-analytics/widgets/subscriber-highlights/stories/subscriber-highlights-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/subscriber-highlights/stories/subscriber-highlights-widget.stories.tsx @@ -11,6 +11,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -18,8 +19,9 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import SubscriberHighlightsRender from '../render'; import widgetDefinition, { DEFAULT_SUBSCRIBER_METRICS, type SubscriberMetricId } from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; -import type { WidgetRenderProps, WidgetType } from '@wordpress/widget-primitives'; +import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; registerReportMocks(); @@ -29,15 +31,8 @@ const SUBSCRIBER_HIGHLIGHTS_RENDER_MODULE = 'storybook/subscriber-highlights'; // Carry the widget's metadata, including the metric-visibility attribute schema // so the dashboard story's settings drawer renders the real checkboxes. // Presentation is left unset so the host frames the widget and renders its -// identity (title + icon), matching widget.json. The attribute schema is typed -// loosely on the widget definition, so it is cast to the WidgetType shape. -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - icon: widgetDefinition.icon, - attributes: widgetDefinition.attributes as WidgetType[ 'attributes' ], - example: widgetDefinition.example, -}; +// identity (title + icon), matching widget.json. +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); interface SubscriberHighlightsStoryControls { /** diff --git a/projects/packages/premium-analytics/widgets/subscriber-highlights/widget.json b/projects/packages/premium-analytics/widgets/subscriber-highlights/widget.json index a6c93b1c50f6..d64d0af14911 100644 --- a/projects/packages/premium-analytics/widgets/subscriber-highlights/widget.json +++ b/projects/packages/premium-analytics/widgets/subscriber-highlights/widget.json @@ -2,6 +2,9 @@ "name": "jpa/subscriber-highlights", "title": "Subscriber highlights", "description": "Your subscriber totals at a glance — total, paid, free, and social followers.", + "help": { + "content": "A summary of your subscribers — total, paid, free, and social followers." + }, "category": "subscribers", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/subscriber-highlights/widget.ts b/projects/packages/premium-analytics/widgets/subscriber-highlights/widget.ts index c2b719ad622f..a6a839e551fa 100644 --- a/projects/packages/premium-analytics/widgets/subscriber-highlights/widget.ts +++ b/projects/packages/premium-analytics/widgets/subscriber-highlights/widget.ts @@ -54,14 +54,6 @@ export const DEFAULT_SUBSCRIBER_METRICS: SubscriberMetricId[] = SUBSCRIBER_METRI * metric enabled. */ export default { - name: 'jpa/subscriber-highlights', - title: __( 'Subscriber highlights', 'jetpack-premium-analytics' ), - help: { - content: __( - 'A summary of your subscribers — total, paid, free, and social followers.', - 'jetpack-premium-analytics' - ), - }, icon: people, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/subscribers-chart/stories/subscribers-chart-widget.stories.tsx b/projects/packages/premium-analytics/widgets/subscribers-chart/stories/subscribers-chart-widget.stories.tsx index 03ec8ce51a8b..cd474e197b94 100644 --- a/projects/packages/premium-analytics/widgets/subscribers-chart/stories/subscribers-chart-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/subscribers-chart/stories/subscribers-chart-widget.stories.tsx @@ -11,6 +11,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -21,8 +22,9 @@ import widgetDefinition, { DEFAULT_SUBSCRIBERS_CHART_METRICS, type SubscribersChartMetricId, } from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; -import type { WidgetRenderProps, WidgetType } from '@wordpress/widget-primitives'; +import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; registerReportMocks(); @@ -30,16 +32,8 @@ registerReportMocks(); const SUBSCRIBERS_CHART_RENDER_MODULE = 'storybook/subscribers-chart'; // Carry the widget's metadata, including the metric-visibility attribute schema -// so the dashboard story's settings drawer renders the real controls. The -// attribute schema is typed loosely on the widget definition, so it is cast to -// the WidgetType shape. -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - icon: widgetDefinition.icon, - attributes: widgetDefinition.attributes as WidgetType[ 'attributes' ], - example: widgetDefinition.example, -}; +// so the dashboard story's settings drawer renders the real controls. +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); interface SubscribersChartStoryControls { withComparison: boolean; diff --git a/projects/packages/premium-analytics/widgets/subscribers-chart/widget.json b/projects/packages/premium-analytics/widgets/subscribers-chart/widget.json index d9b93db76bae..6d773d6ea079 100644 --- a/projects/packages/premium-analytics/widgets/subscribers-chart/widget.json +++ b/projects/packages/premium-analytics/widgets/subscribers-chart/widget.json @@ -2,6 +2,9 @@ "name": "jpa/subscribers-chart", "title": "Subscribers", "description": "Track subscriber growth over time, with paid subscribers and the previous period overlaid for comparison.", + "help": { + "content": "A summary of your subscriber growth over time, with paid subscribers and the previous period overlaid for comparison." + }, "category": "subscribers", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/subscribers-chart/widget.ts b/projects/packages/premium-analytics/widgets/subscribers-chart/widget.ts index 0298cd62599d..4627c0899cf3 100644 --- a/projects/packages/premium-analytics/widgets/subscribers-chart/widget.ts +++ b/projects/packages/premium-analytics/widgets/subscribers-chart/widget.ts @@ -65,14 +65,6 @@ export const DEFAULT_SUBSCRIBERS_CHART_METRICS: SubscribersChartMetricId[] = * as the defaults applied to new instances. */ export default { - name: 'jpa/subscribers-chart', - title: __( 'Subscribers', 'jetpack-premium-analytics' ), - help: { - content: __( - 'A summary of your subscriber growth over time, with paid subscribers and the previous period overlaid for comparison.', - 'jetpack-premium-analytics' - ), - }, icon: trendingUp, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/subscribers-list/stories/subscribers-list-widget.stories.tsx b/projects/packages/premium-analytics/widgets/subscribers-list/stories/subscribers-list-widget.stories.tsx index 6f0b822443b1..e1732bebc927 100644 --- a/projects/packages/premium-analytics/widgets/subscribers-list/stories/subscribers-list-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/subscribers-list/stories/subscribers-list-widget.stories.tsx @@ -7,6 +7,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -14,6 +15,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import SubscribersListRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentType } from 'react'; @@ -108,7 +110,7 @@ export const WidgetDashboardWithWidget: DashboardStory = { render: args => ( > } attributes={ { num: 6 } } diff --git a/projects/packages/premium-analytics/widgets/subscribers-list/widget.json b/projects/packages/premium-analytics/widgets/subscribers-list/widget.json index 38aa2e277d29..799eaa2ab067 100644 --- a/projects/packages/premium-analytics/widgets/subscribers-list/widget.json +++ b/projects/packages/premium-analytics/widgets/subscribers-list/widget.json @@ -2,6 +2,9 @@ "name": "jpa/subscribers-list", "title": "Latest Subscribers", "description": "Your most recent subscribers.", + "help": { + "content": "Your most recent subscribers." + }, "category": "subscribers", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/subscribers-list/widget.ts b/projects/packages/premium-analytics/widgets/subscribers-list/widget.ts index 37112ef243e5..b8d044449ea4 100644 --- a/projects/packages/premium-analytics/widgets/subscribers-list/widget.ts +++ b/projects/packages/premium-analytics/widgets/subscribers-list/widget.ts @@ -24,11 +24,6 @@ export type SubscribersListAttributes = { * six most recent subscribers. */ export default { - name: 'jpa/subscribers-list', - title: __( 'Latest Subscribers', 'jetpack-premium-analytics' ), - help: { - content: __( 'Your most recent subscribers.', 'jetpack-premium-analytics' ), - }, icon: people, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/tags/stories/tags-widget.stories.tsx b/projects/packages/premium-analytics/widgets/tags/stories/tags-widget.stories.tsx index d66a9150f188..f734bcfefa9a 100644 --- a/projects/packages/premium-analytics/widgets/tags/stories/tags-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/tags/stories/tags-widget.stories.tsx @@ -6,6 +6,7 @@ import { type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; import { withStoryRouter } from '../../stories/with-story-router'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -13,6 +14,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import TagsRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -21,14 +23,9 @@ registerReportMocks(); const TAGS_RENDER_MODULE = 'storybook/tags'; -// Pick only the fields that StoryWidgetMetadata accepts; the attribute schema -// and example arrays are typed differently in WidgetType and cause a type error. -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - icon: widgetDefinition.icon, - presentation: 'framed' as const, -}; +// Build the story widget type from its manifest and module. `presentation` +// comes from widget.json ( 'framed' ), so the host frames the widget. +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); function renderTags() { return ; diff --git a/projects/packages/premium-analytics/widgets/tags/widget.json b/projects/packages/premium-analytics/widgets/tags/widget.json index 78e14efdd1ad..c804f7cad115 100644 --- a/projects/packages/premium-analytics/widgets/tags/widget.json +++ b/projects/packages/premium-analytics/widgets/tags/widget.json @@ -2,6 +2,15 @@ "name": "jpa/tags", "title": "Tags & categories", "description": "Your most visited tags and categories, ranked by views.", + "help": { + "content": "The tags and categories associated with your most-viewed content, sorted by views.", + "links": [ + { + "label": "Learn more", + "href": "https://jetpack.com/support/jetpack-stats/" + } + ] + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/tags/widget.ts b/projects/packages/premium-analytics/widgets/tags/widget.ts index 0b49ceca20de..44313768a3f3 100644 --- a/projects/packages/premium-analytics/widgets/tags/widget.ts +++ b/projects/packages/premium-analytics/widgets/tags/widget.ts @@ -23,20 +23,6 @@ export type TagsAttributes = { * archive URL and drill down to their individual members instead. */ export default { - name: 'jpa/tags', - title: __( 'Tags & categories', 'jetpack-premium-analytics' ), - help: { - content: __( - 'The tags and categories associated with your most-viewed content, sorted by views.', - 'jetpack-premium-analytics' - ), - links: [ - { - label: __( 'Learn more', 'jetpack-premium-analytics' ), - href: 'https://jetpack.com/support/jetpack-stats/', - }, - ], - }, icon: tag, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/top-performing-bookings/stories/top-performing-bookings-widget.stories.tsx b/projects/packages/premium-analytics/widgets/top-performing-bookings/stories/top-performing-bookings-widget.stories.tsx index ab1cbcc3533b..aa63441dffc1 100644 --- a/projects/packages/premium-analytics/widgets/top-performing-bookings/stories/top-performing-bookings-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/top-performing-bookings/stories/top-performing-bookings-widget.stories.tsx @@ -8,10 +8,12 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { forceStatsMockState } from '../../stories/force-stats-mock-state'; import TopPerformingBookingsRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { APIFetchMiddleware } from '@wordpress/api-fetch'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; @@ -229,7 +231,7 @@ function TopPerformingBookingsDashboardStory( { return ( > diff --git a/projects/packages/premium-analytics/widgets/top-performing-bookings/widget.json b/projects/packages/premium-analytics/widgets/top-performing-bookings/widget.json index c3bbc45a25ca..4d05356cbf0a 100644 --- a/projects/packages/premium-analytics/widgets/top-performing-bookings/widget.json +++ b/projects/packages/premium-analytics/widgets/top-performing-bookings/widget.json @@ -2,6 +2,9 @@ "name": "jpa/top-performing-bookings", "title": "Top performing bookings", "description": "Shows the top booking products by net revenue over the selected time period.", + "help": { + "content": "Your best-selling bookings by revenue over the selected time period." + }, "category": "store", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/top-performing-bookings/widget.ts b/projects/packages/premium-analytics/widgets/top-performing-bookings/widget.ts index ed0a78e75bcd..be055e5719d8 100644 --- a/projects/packages/premium-analytics/widgets/top-performing-bookings/widget.ts +++ b/projects/packages/premium-analytics/widgets/top-performing-bookings/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type TopPerformingBookingsAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/top-performing-bookings', - title: __( 'Top performing bookings', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Your best-selling bookings by revenue over the selected time period.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/top-performing-products/stories/top-performing-products-widget.stories.tsx b/projects/packages/premium-analytics/widgets/top-performing-products/stories/top-performing-products-widget.stories.tsx index f96a8af2364f..37866d282bfb 100644 --- a/projects/packages/premium-analytics/widgets/top-performing-products/stories/top-performing-products-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/top-performing-products/stories/top-performing-products-widget.stories.tsx @@ -8,10 +8,12 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { forceStatsMockState } from '../../stories/force-stats-mock-state'; import TopPerformingProductsRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { APIFetchMiddleware } from '@wordpress/api-fetch'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; @@ -221,7 +223,7 @@ function TopPerformingProductsDashboardStory( { return ( > diff --git a/projects/packages/premium-analytics/widgets/top-performing-products/widget.json b/projects/packages/premium-analytics/widgets/top-performing-products/widget.json index 2bf55acc9f7d..68bb93c2e7e1 100644 --- a/projects/packages/premium-analytics/widgets/top-performing-products/widget.json +++ b/projects/packages/premium-analytics/widgets/top-performing-products/widget.json @@ -2,6 +2,9 @@ "name": "jpa/top-performing-products", "title": "Top performing products", "description": "Shows the top products by net revenue over the selected time period.", + "help": { + "content": "Your best-selling products by revenue over the selected time period." + }, "category": "store", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/top-performing-products/widget.ts b/projects/packages/premium-analytics/widgets/top-performing-products/widget.ts index 0864fd664cd9..801445c684a9 100644 --- a/projects/packages/premium-analytics/widgets/top-performing-products/widget.ts +++ b/projects/packages/premium-analytics/widgets/top-performing-products/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type TopPerformingProductsAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/top-performing-products', - title: __( 'Top performing products', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Your best-selling products by revenue over the selected time period.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/top-platforms/stories/top-platforms-widget.stories.tsx b/projects/packages/premium-analytics/widgets/top-platforms/stories/top-platforms-widget.stories.tsx index 888b375d5241..d772bf1c6f57 100644 --- a/projects/packages/premium-analytics/widgets/top-platforms/stories/top-platforms-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/top-platforms/stories/top-platforms-widget.stories.tsx @@ -5,14 +5,16 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import { registerStatsMocks } from '../../../packages/widgets-toolkit/src/stories/mocks/register-stats-mocks'; import { forceStatsMockState } from '../../stories/force-stats-mock-state'; import TopPlatformsRender from '../render'; import widgetDefinition, { type TopPlatformsAttributes } from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; -import type { WidgetRenderProps, WidgetType } from '@wordpress/widget-primitives'; +import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; registerReportMocks(); @@ -20,16 +22,10 @@ registerStatsMocks(); const TOP_PLATFORMS_RENDER_MODULE = 'storybook/top-platforms'; -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - icon: widgetDefinition.icon, - // attributes/example let the dashboard host render the real "View by" - // toolbar control for the `relevance: 'high'` attribute, as in Locations. - attributes: widgetDefinition.attributes as WidgetType[ 'attributes' ], - example: widgetDefinition.example, - presentation: 'framed' as const, -}; +// attributes/example flow through from the module so the dashboard host renders +// the real "View by" toolbar control for the `relevance: 'high'` attribute, as +// in Locations. `presentation` comes from widget.json ( 'framed' ). +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); interface TopPlatformsStoryControls { withComparison: boolean; diff --git a/projects/packages/premium-analytics/widgets/top-platforms/widget.json b/projects/packages/premium-analytics/widgets/top-platforms/widget.json index 25d29df3e877..e1948ef7adde 100644 --- a/projects/packages/premium-analytics/widgets/top-platforms/widget.json +++ b/projects/packages/premium-analytics/widgets/top-platforms/widget.json @@ -2,6 +2,15 @@ "name": "jpa/top-platforms", "title": "Top Platforms", "description": "Top browsers and operating systems your visitors use.", + "help": { + "content": "A breakdown of the operating systems and browsers your visitors used, sorted by views.", + "links": [ + { + "label": "Learn more", + "href": "https://jetpack.com/support/jetpack-stats/" + } + ] + }, "category": "traffic", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/top-platforms/widget.ts b/projects/packages/premium-analytics/widgets/top-platforms/widget.ts index ec925d46a14c..d580828578b9 100644 --- a/projects/packages/premium-analytics/widgets/top-platforms/widget.ts +++ b/projects/packages/premium-analytics/widgets/top-platforms/widget.ts @@ -29,20 +29,6 @@ export type TopPlatformsAttributes = { * so the widget host renders its control. */ export default { - name: 'jpa/top-platforms', - title: __( 'Top Platforms', 'jetpack-premium-analytics' ), - help: { - content: __( - 'A breakdown of the operating systems and browsers your visitors used, sorted by views.', - 'jetpack-premium-analytics' - ), - links: [ - { - label: __( 'Learn more', 'jetpack-premium-analytics' ), - href: 'https://jetpack.com/support/jetpack-stats/', - }, - ], - }, icon: chartBar, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/top-posts/stories/top-posts.stories.tsx b/projects/packages/premium-analytics/widgets/top-posts/stories/top-posts.stories.tsx index 4bc3f98c38b7..ef228e8a039f 100644 --- a/projects/packages/premium-analytics/widgets/top-posts/stories/top-posts.stories.tsx +++ b/projects/packages/premium-analytics/widgets/top-posts/stories/top-posts.stories.tsx @@ -15,11 +15,13 @@ import { } from '../../stories/widget-dashboard-with-widget'; import { forceStatsMockState } from '../../stories/force-stats-mock-state'; import { withStoryRouter } from '../../stories/with-story-router'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import TopPostsRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Decorator, Meta, StoryObj } from '@storybook/react'; -import type { WidgetRenderProps, WidgetType } from '@wordpress/widget-primitives'; +import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; registerReportMocks(); @@ -27,16 +29,10 @@ registerStatsMocks(); const TOP_POSTS_RENDER_MODULE = 'storybook/top-posts'; -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - icon: widgetDefinition.icon, - // Attribute metadata drives the host-rendered chrome: the high-relevance - // `contentView` control in the framed header and the settings fields. - attributes: widgetDefinition.attributes as WidgetType[ 'attributes' ], - example: widgetDefinition.example, - presentation: 'framed' as const, -}; +// Attribute metadata flows through from the module to drive the host-rendered +// chrome: the high-relevance `contentView` control in the framed header and the +// settings fields. `presentation` comes from widget.json ( 'framed' ). +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); interface TopPostsStoryControls { withComparison: boolean; diff --git a/projects/packages/premium-analytics/widgets/top-posts/widget.json b/projects/packages/premium-analytics/widgets/top-posts/widget.json index 392632d5eebd..c6ca6603e5be 100644 --- a/projects/packages/premium-analytics/widgets/top-posts/widget.json +++ b/projects/packages/premium-analytics/widgets/top-posts/widget.json @@ -2,6 +2,15 @@ "name": "jpa/stats-top-posts", "title": "Most viewed", "description": "Your most viewed posts, pages, and archives.", + "help": { + "content": "Your most popular posts and pages, sorted by views.", + "links": [ + { + "label": "Learn more", + "href": "https://jetpack.com/support/jetpack-stats/" + } + ] + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/top-posts/widget.ts b/projects/packages/premium-analytics/widgets/top-posts/widget.ts index 73ed6cdb1813..0fd3db807811 100644 --- a/projects/packages/premium-analytics/widgets/top-posts/widget.ts +++ b/projects/packages/premium-analytics/widgets/top-posts/widget.ts @@ -21,6 +21,7 @@ export type TopPostsAttributes = { * Maximum number of rows to display. */ num?: number; + /** * Which report the widget shows: published posts and pages (including the * homepage entry, via `skip_archives=1`), or archive pages (taxonomy, @@ -41,20 +42,6 @@ export type TopPostsAttributes = { * rows, Posts & pages view. The date range comes from the dashboard picker. */ export default { - name: 'jpa/stats-top-posts', - title: __( 'Most viewed', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Your most popular posts and pages, sorted by views.', - 'jetpack-premium-analytics' - ), - links: [ - { - label: __( 'Learn more', 'jetpack-premium-analytics' ), - href: 'https://jetpack.com/support/jetpack-stats/', - }, - ], - }, icon: postList, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/total-returns/stories/total-returns-widget.stories.tsx b/projects/packages/premium-analytics/widgets/total-returns/stories/total-returns-widget.stories.tsx index 4629972e2b4f..5467d2a5fde2 100644 --- a/projects/packages/premium-analytics/widgets/total-returns/stories/total-returns-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/total-returns/stories/total-returns-widget.stories.tsx @@ -10,9 +10,11 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import TotalReturnsRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -73,7 +75,7 @@ function TotalReturnsDashboardStory( { return ( > } attributes={ getTotalReturnsAttributes( withComparison, preset ) } diff --git a/projects/packages/premium-analytics/widgets/total-returns/widget.json b/projects/packages/premium-analytics/widgets/total-returns/widget.json index 736f0cacb965..71c82efee096 100644 --- a/projects/packages/premium-analytics/widgets/total-returns/widget.json +++ b/projects/packages/premium-analytics/widgets/total-returns/widget.json @@ -2,6 +2,9 @@ "name": "jpa/total-returns", "title": "Total returns", "description": "Shows refunds and net sales over the selected time period.", + "help": { + "content": "Total value of returns issued for physical products over the selected time period." + }, "category": "store", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/total-returns/widget.ts b/projects/packages/premium-analytics/widgets/total-returns/widget.ts index e725468e5871..dd6e4bd54fa8 100644 --- a/projects/packages/premium-analytics/widgets/total-returns/widget.ts +++ b/projects/packages/premium-analytics/widgets/total-returns/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type TotalReturnsAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/total-returns', - title: __( 'Total returns', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Total value of returns issued for physical products over the selected time period.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/total-sales-over-time/stories/total-sales-over-time-widget.stories.tsx b/projects/packages/premium-analytics/widgets/total-sales-over-time/stories/total-sales-over-time-widget.stories.tsx index a65a3b1d205c..90f1d63289e0 100644 --- a/projects/packages/premium-analytics/widgets/total-sales-over-time/stories/total-sales-over-time-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/total-sales-over-time/stories/total-sales-over-time-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -14,6 +15,7 @@ import { import LineChart from '../../../../../js-packages/charts/src/charts/line-chart/line-chart'; import TotalSalesOverTimeRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -105,7 +107,7 @@ function TotalSalesOverTimeDashboardStory( { return ( > } attributes={ { diff --git a/projects/packages/premium-analytics/widgets/total-sales-over-time/widget.json b/projects/packages/premium-analytics/widgets/total-sales-over-time/widget.json index 127b859446f0..336bce975be7 100644 --- a/projects/packages/premium-analytics/widgets/total-sales-over-time/widget.json +++ b/projects/packages/premium-analytics/widgets/total-sales-over-time/widget.json @@ -2,6 +2,9 @@ "name": "jpa/total-sales-over-time", "title": "Total sales over time", "description": "Track total sales including all orders and transactions.", + "help": { + "content": "Track total sales including all orders and transactions." + }, "category": "store", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/total-sales-over-time/widget.ts b/projects/packages/premium-analytics/widgets/total-sales-over-time/widget.ts index 37770542363c..245de4811791 100644 --- a/projects/packages/premium-analytics/widgets/total-sales-over-time/widget.ts +++ b/projects/packages/premium-analytics/widgets/total-sales-over-time/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type TotalSalesOverTimeAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/total-sales-over-time', - title: __( 'Total sales over time', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Track total sales including all orders and transactions.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, }; diff --git a/projects/packages/premium-analytics/widgets/traffic-chart/stories/traffic-chart-widget.stories.tsx b/projects/packages/premium-analytics/widgets/traffic-chart/stories/traffic-chart-widget.stories.tsx index 1a887311812c..c0036fecad1b 100644 --- a/projects/packages/premium-analytics/widgets/traffic-chart/stories/traffic-chart-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/traffic-chart/stories/traffic-chart-widget.stories.tsx @@ -8,6 +8,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -18,8 +19,9 @@ import widgetDefinition, { DEFAULT_TRAFFIC_CHART_METRICS, type TrafficChartMetricId, } from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; -import type { WidgetRenderProps, WidgetType } from '@wordpress/widget-primitives'; +import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; registerReportMocks(); @@ -27,16 +29,8 @@ registerReportMocks(); const TRAFFIC_CHART_RENDER_MODULE = 'storybook/traffic-chart'; // Carry the widget's metadata, including the metric-visibility attribute schema -// so the dashboard story's settings drawer renders the real controls. The -// attribute schema is typed loosely on the widget definition, so it is cast to -// the WidgetType shape. -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - icon: widgetDefinition.icon, - attributes: widgetDefinition.attributes as WidgetType[ 'attributes' ], - example: widgetDefinition.example, -}; +// so the dashboard story's settings drawer renders the real controls. +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); interface TrafficChartStoryControls { withComparison: boolean; diff --git a/projects/packages/premium-analytics/widgets/traffic-chart/widget.json b/projects/packages/premium-analytics/widgets/traffic-chart/widget.json index 2ecb94b50466..f08cc136cd33 100644 --- a/projects/packages/premium-analytics/widgets/traffic-chart/widget.json +++ b/projects/packages/premium-analytics/widgets/traffic-chart/widget.json @@ -2,6 +2,9 @@ "name": "jpa/traffic-chart", "title": "Traffic", "description": "Compare views, visitors, likes, and comments over the selected period, with the previous period overlaid for comparison.", + "help": { + "content": "A summary of your site's views, visitors, likes, and comments, with the previous period overlaid for comparison." + }, "category": "traffic", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/traffic-chart/widget.ts b/projects/packages/premium-analytics/widgets/traffic-chart/widget.ts index 03ccc0f9ca8b..f8645096a2b6 100644 --- a/projects/packages/premium-analytics/widgets/traffic-chart/widget.ts +++ b/projects/packages/premium-analytics/widgets/traffic-chart/widget.ts @@ -68,14 +68,6 @@ export const DEFAULT_TRAFFIC_CHART_METRICS: TrafficChartMetricId[] = TRAFFIC_CHA * `example.attributes` doubles as the defaults applied to new instances. */ export default { - name: 'jpa/traffic-chart', - title: __( 'Traffic', 'jetpack-premium-analytics' ), - help: { - content: __( - "A summary of your site's views, visitors, likes, and comments, with the previous period overlaid for comparison.", - 'jetpack-premium-analytics' - ), - }, icon: chartBar, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/utm-insights/stories/utm-insights-widget.stories.tsx b/projects/packages/premium-analytics/widgets/utm-insights/stories/utm-insights-widget.stories.tsx index 11fff2047c27..4ef94b27f16a 100644 --- a/projects/packages/premium-analytics/widgets/utm-insights/stories/utm-insights-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/utm-insights/stories/utm-insights-widget.stories.tsx @@ -6,12 +6,14 @@ import { type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; import { withStoryRouter } from '../../stories/with-story-router'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import { registerStatsMocks } from '../../../packages/widgets-toolkit/src/stories/mocks/register-stats-mocks'; import { forceStatsMockState } from '../../stories/force-stats-mock-state'; import UtmInsightsRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -21,12 +23,7 @@ registerStatsMocks(); const UTM_INSIGHTS_RENDER_MODULE = 'storybook/utm-insights'; -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - icon: widgetDefinition.icon, - presentation: 'framed' as const, -}; +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); interface UtmInsightsStoryControls { withComparison: boolean; diff --git a/projects/packages/premium-analytics/widgets/utm-insights/widget.json b/projects/packages/premium-analytics/widgets/utm-insights/widget.json index 7ba6ec80e633..5c8218b5f6f1 100644 --- a/projects/packages/premium-analytics/widgets/utm-insights/widget.json +++ b/projects/packages/premium-analytics/widgets/utm-insights/widget.json @@ -2,6 +2,15 @@ "name": "jpa/utm-insights", "title": "UTM Insights", "description": "Traffic breakdown by UTM parameters — source, medium, campaign, and combinations.", + "help": { + "content": "Your top UTM campaigns, sorted by views.", + "links": [ + { + "label": "Learn more", + "href": "https://jetpack.com/support/jetpack-stats/" + } + ] + }, "category": "traffic", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/utm-insights/widget.ts b/projects/packages/premium-analytics/widgets/utm-insights/widget.ts index 438a56e60540..2fc22cd43cbb 100644 --- a/projects/packages/premium-analytics/widgets/utm-insights/widget.ts +++ b/projects/packages/premium-analytics/widgets/utm-insights/widget.ts @@ -31,17 +31,6 @@ export type UtmInsightsAttributes = { * shared dashboard date picker). */ export default { - name: 'jpa/utm-insights', - title: __( 'UTM Insights', 'jetpack-premium-analytics' ), - help: { - content: __( 'Your top UTM campaigns, sorted by views.', 'jetpack-premium-analytics' ), - links: [ - { - label: __( 'Learn more', 'jetpack-premium-analytics' ), - href: 'https://jetpack.com/support/jetpack-stats/', - }, - ], - }, icon: trendingUp, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/video-detail-embeds/stories/video-detail-embeds-widget.stories.tsx b/projects/packages/premium-analytics/widgets/video-detail-embeds/stories/video-detail-embeds-widget.stories.tsx index 03c68113178f..7d7b1c58265c 100644 --- a/projects/packages/premium-analytics/widgets/video-detail-embeds/stories/video-detail-embeds-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/video-detail-embeds/stories/video-detail-embeds-widget.stories.tsx @@ -15,9 +15,11 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import VideoDetailEmbedsRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -156,7 +158,7 @@ function VideoDetailEmbedsDashboardStory( dashboardArgs: WidgetDashboardWithWidg return ( > } attributes={ { reportParams: reportParamsForVideo( undefined, true ) } } diff --git a/projects/packages/premium-analytics/widgets/video-detail-embeds/widget.json b/projects/packages/premium-analytics/widgets/video-detail-embeds/widget.json index 7a6034eb1a03..4e678789ae38 100644 --- a/projects/packages/premium-analytics/widgets/video-detail-embeds/widget.json +++ b/projects/packages/premium-analytics/widgets/video-detail-embeds/widget.json @@ -2,6 +2,15 @@ "name": "jpa/video-detail-embeds", "title": "Video embeds", "description": "Pages where the selected video is embedded, sourced from Jetpack Stats.", + "help": { + "content": "Lists every page on your site where the selected video is embedded, so you can see where it is being watched.", + "links": [ + { + "label": "Learn more", + "href": "https://jetpack.com/support/jetpack-stats/" + } + ] + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/video-detail-embeds/widget.ts b/projects/packages/premium-analytics/widgets/video-detail-embeds/widget.ts index d3d9f782fb02..904ed1bc36ef 100644 --- a/projects/packages/premium-analytics/widgets/video-detail-embeds/widget.ts +++ b/projects/packages/premium-analytics/widgets/video-detail-embeds/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { video } from '@wordpress/icons'; /** @@ -24,19 +23,5 @@ export type VideoDetailEmbedsAttributes = Record< never, never >; * than a widget attribute. */ export default { - name: 'jpa/video-detail-embeds', - title: __( 'Video embeds', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Lists every page on your site where the selected video is embedded, so you can see where it is being watched.', - 'jetpack-premium-analytics' - ), - links: [ - { - label: __( 'Learn more', 'jetpack-premium-analytics' ), - href: 'https://jetpack.com/support/jetpack-stats/', - }, - ], - }, icon: video, }; diff --git a/projects/packages/premium-analytics/widgets/video-detail-highlights/stories/video-detail-highlights-widget.stories.tsx b/projects/packages/premium-analytics/widgets/video-detail-highlights/stories/video-detail-highlights-widget.stories.tsx index 3cf07f7a2f5a..789065d033c6 100644 --- a/projects/packages/premium-analytics/widgets/video-detail-highlights/stories/video-detail-highlights-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/video-detail-highlights/stories/video-detail-highlights-widget.stories.tsx @@ -25,9 +25,11 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import VideoDetailHighlightsRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -158,7 +160,7 @@ function VideoDetailHighlightsDashboardStory( { return ( > diff --git a/projects/packages/premium-analytics/widgets/video-detail-highlights/widget.json b/projects/packages/premium-analytics/widgets/video-detail-highlights/widget.json index 550690dd56af..551e79723bc4 100644 --- a/projects/packages/premium-analytics/widgets/video-detail-highlights/widget.json +++ b/projects/packages/premium-analytics/widgets/video-detail-highlights/widget.json @@ -2,6 +2,9 @@ "name": "jpa/video-detail-highlights", "title": "Video highlights", "description": "Views, impressions, hours watched, and retention rate for the video being viewed.", + "help": { + "content": "Views, impressions, hours watched, and retention rate for the video being viewed." + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/video-detail-highlights/widget.ts b/projects/packages/premium-analytics/widgets/video-detail-highlights/widget.ts index 2e2040b3864f..b7fabf1e2246 100644 --- a/projects/packages/premium-analytics/widgets/video-detail-highlights/widget.ts +++ b/projects/packages/premium-analytics/widgets/video-detail-highlights/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { video } from '@wordpress/icons'; import type { WidgetAttributeField } from '@wordpress/widget-primitives'; @@ -15,14 +14,6 @@ export type VideoDetailHighlightsAttributes = Record< never, never >; * Widget type definition for the selected video's complete Stats metrics. */ export default { - name: 'jpa/video-detail-highlights', - title: __( 'Video highlights', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Views, impressions, hours watched, and retention rate for the video being viewed.', - 'jetpack-premium-analytics' - ), - }, icon: video, attributes: [] as WidgetAttributeField< VideoDetailHighlightsAttributes >[], example: { diff --git a/projects/packages/premium-analytics/widgets/videopress/stories/videopress-widget.stories.tsx b/projects/packages/premium-analytics/widgets/videopress/stories/videopress-widget.stories.tsx index 3971131c60a0..e88bbdbc3102 100644 --- a/projects/packages/premium-analytics/widgets/videopress/stories/videopress-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/videopress/stories/videopress-widget.stories.tsx @@ -16,9 +16,11 @@ import { type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; import { withStoryRouter } from '../../stories/with-story-router'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import VideoPressRender from '../render'; import widgetDefinition, { DEFAULT_MAX } from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -162,7 +164,7 @@ function VideoPressDashboardStory( { return ( > } attributes={ { max: DEFAULT_MAX, reportParams: getDefaultQueryParams( withComparison ) } } diff --git a/projects/packages/premium-analytics/widgets/videopress/widget.json b/projects/packages/premium-analytics/widgets/videopress/widget.json index 6f780369c942..94e228f378b6 100644 --- a/projects/packages/premium-analytics/widgets/videopress/widget.json +++ b/projects/packages/premium-analytics/widgets/videopress/widget.json @@ -2,6 +2,15 @@ "name": "jpa/videopress", "title": "VideoPress", "description": "Your most played VideoPress videos, sourced from Jetpack Stats.", + "help": { + "content": "The published videos your visitors watched most often, sorted by views.", + "links": [ + { + "label": "Learn more", + "href": "https://jetpack.com/support/jetpack-stats/" + } + ] + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/videopress/widget.ts b/projects/packages/premium-analytics/widgets/videopress/widget.ts index a3506c344733..a8563114f0ce 100644 --- a/projects/packages/premium-analytics/widgets/videopress/widget.ts +++ b/projects/packages/premium-analytics/widgets/videopress/widget.ts @@ -28,20 +28,6 @@ export type VideoPressAttributes = { * Widget type definition. */ export default { - name: 'jpa/videopress', - title: __( 'VideoPress', 'jetpack-premium-analytics' ), - help: { - content: __( - 'The published videos your visitors watched most often, sorted by views.', - 'jetpack-premium-analytics' - ), - links: [ - { - label: __( 'Learn more', 'jetpack-premium-analytics' ), - href: 'https://jetpack.com/support/jetpack-stats/', - }, - ], - }, icon: video, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/visitors-by-location/stories/visitors-by-location-widget.stories.tsx b/projects/packages/premium-analytics/widgets/visitors-by-location/stories/visitors-by-location-widget.stories.tsx index 12aa5809a007..0dd3e90fe21c 100644 --- a/projects/packages/premium-analytics/widgets/visitors-by-location/stories/visitors-by-location-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/visitors-by-location/stories/visitors-by-location-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { WidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -13,6 +14,7 @@ import { } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; import VisitorsByLocationRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Decorator, Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -107,7 +109,7 @@ function VisitorsByLocationDashboardStory( { > diff --git a/projects/packages/premium-analytics/widgets/visitors-by-location/widget.json b/projects/packages/premium-analytics/widgets/visitors-by-location/widget.json index 84afa6f0684d..26caca0f8e85 100644 --- a/projects/packages/premium-analytics/widgets/visitors-by-location/widget.json +++ b/projects/packages/premium-analytics/widgets/visitors-by-location/widget.json @@ -2,6 +2,9 @@ "name": "jpa/visitors-by-location", "title": "Visitors by location", "description": "See where your store visitors are located geographically.", + "help": { + "content": "See where your store visitors are located geographically." + }, "category": "visitors", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/visitors-by-location/widget.ts b/projects/packages/premium-analytics/widgets/visitors-by-location/widget.ts index 149068359d23..44abb4f701e7 100644 --- a/projects/packages/premium-analytics/widgets/visitors-by-location/widget.ts +++ b/projects/packages/premium-analytics/widgets/visitors-by-location/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { mapMarker } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type VisitorsByLocationAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/visitors-by-location', - title: __( 'Visitors by location', 'jetpack-premium-analytics' ), - help: { - content: __( - 'See where your store visitors are located geographically.', - 'jetpack-premium-analytics' - ), - }, icon: mapMarker, }; diff --git a/projects/packages/premium-analytics/widgets/visitors-over-time/stories/visitors-over-time-widget.stories.tsx b/projects/packages/premium-analytics/widgets/visitors-over-time/stories/visitors-over-time-widget.stories.tsx index 6b104a00a0b0..2faa7b8faf30 100644 --- a/projects/packages/premium-analytics/widgets/visitors-over-time/stories/visitors-over-time-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/visitors-over-time/stories/visitors-over-time-widget.stories.tsx @@ -6,6 +6,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { registerReportMocks, @@ -14,6 +15,7 @@ import { import LineChart from '../../../../../js-packages/charts/src/charts/line-chart/line-chart'; import VisitorsOverTimeRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -110,7 +112,7 @@ function VisitorsOverTimeDashboardStory( { return ( > } attributes={ getVisitorsOverTimeAttributes( withComparison, preset ) } diff --git a/projects/packages/premium-analytics/widgets/visitors-over-time/widget.json b/projects/packages/premium-analytics/widgets/visitors-over-time/widget.json index 405f264a8481..c8ab0dc1fdfc 100644 --- a/projects/packages/premium-analytics/widgets/visitors-over-time/widget.json +++ b/projects/packages/premium-analytics/widgets/visitors-over-time/widget.json @@ -2,6 +2,9 @@ "name": "jpa/visitors-over-time", "title": "Visitors over time", "description": "Track website visitor trends and monitor traffic patterns over time.", + "help": { + "content": "Track website visitor trends and monitor traffic patterns over time." + }, "category": "visitors", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/visitors-over-time/widget.ts b/projects/packages/premium-analytics/widgets/visitors-over-time/widget.ts index a555b56fe7e0..0e8c8165edc2 100644 --- a/projects/packages/premium-analytics/widgets/visitors-over-time/widget.ts +++ b/projects/packages/premium-analytics/widgets/visitors-over-time/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { seen } from '@wordpress/icons'; /** @@ -23,13 +22,5 @@ export type VisitorsOverTimeAttributes = Record< never, never >; * dashboards can opt in. */ export default { - name: 'jpa/visitors-over-time', - title: __( 'Visitors over time', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Track website visitor trends and monitor traffic patterns over time.', - 'jetpack-premium-analytics' - ), - }, icon: seen, }; diff --git a/projects/packages/premium-analytics/widgets/wordads-adjustments-history/stories/wordads-adjustments-history-widget.stories.tsx b/projects/packages/premium-analytics/widgets/wordads-adjustments-history/stories/wordads-adjustments-history-widget.stories.tsx index 6735e9933b89..053227da0a16 100644 --- a/projects/packages/premium-analytics/widgets/wordads-adjustments-history/stories/wordads-adjustments-history-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/wordads-adjustments-history/stories/wordads-adjustments-history-widget.stories.tsx @@ -27,9 +27,11 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import WordAdsAdjustmentsHistoryRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentType } from 'react'; @@ -98,7 +100,7 @@ function WordAdsAdjustmentsHistoryDashboardStory( return ( > diff --git a/projects/packages/premium-analytics/widgets/wordads-adjustments-history/widget.json b/projects/packages/premium-analytics/widgets/wordads-adjustments-history/widget.json index 2f85bc707b50..fd83142cfbea 100644 --- a/projects/packages/premium-analytics/widgets/wordads-adjustments-history/widget.json +++ b/projects/packages/premium-analytics/widgets/wordads-adjustments-history/widget.json @@ -2,6 +2,9 @@ "name": "jpa/wordads-adjustments-history", "title": "Adjustments History", "description": "WordAds earnings adjustments by period, with amounts, ads served, and payment status.", + "help": { + "content": "Ads Served is the number of ads we attempted to display (page impressions × available ad slots). Not every ad served results in a paid impression." + }, "category": "stats", "presentation": "content-bleed" } diff --git a/projects/packages/premium-analytics/widgets/wordads-adjustments-history/widget.ts b/projects/packages/premium-analytics/widgets/wordads-adjustments-history/widget.ts index 62375d3b907e..b052ba0efa72 100644 --- a/projects/packages/premium-analytics/widgets/wordads-adjustments-history/widget.ts +++ b/projects/packages/premium-analytics/widgets/wordads-adjustments-history/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; import type { WidgetAttributeField } from '@wordpress/widget-primitives'; @@ -21,14 +20,6 @@ export type WordAdsAdjustmentsHistoryAttributes = Record< never, never >; * site. */ export default { - name: 'jpa/wordads-adjustments-history', - title: __( 'Adjustments History', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Ads Served is the number of ads we attempted to display (page impressions × available ad slots). Not every ad served results in a paid impression.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, attributes: [] as WidgetAttributeField< WordAdsAdjustmentsHistoryAttributes >[], example: { diff --git a/projects/packages/premium-analytics/widgets/wordads-chart-tabs/stories/wordads-chart-tabs-widget.stories.tsx b/projects/packages/premium-analytics/widgets/wordads-chart-tabs/stories/wordads-chart-tabs-widget.stories.tsx index ac14d641a1cc..1d4a90b43f6f 100644 --- a/projects/packages/premium-analytics/widgets/wordads-chart-tabs/stories/wordads-chart-tabs-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/wordads-chart-tabs/stories/wordads-chart-tabs-widget.stories.tsx @@ -12,10 +12,12 @@ import { registerReportMocks, setReportMockState, } from '../../../packages/widgets-toolkit/src/stories/mocks/register-report-mocks'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { DEFAULT_WORDADS_CHART_METRICS, type WordAdsChartMetricId } from '../metrics'; import WordAdsChartTabsRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; @@ -155,7 +157,7 @@ function WordAdsChartTabsDashboardStory( { return ( > } attributes={ { reportParams: getDefaultQueryParams( withComparison ), metrics } } diff --git a/projects/packages/premium-analytics/widgets/wordads-chart-tabs/widget.json b/projects/packages/premium-analytics/widgets/wordads-chart-tabs/widget.json index e3f48413bd45..3295abf55763 100644 --- a/projects/packages/premium-analytics/widgets/wordads-chart-tabs/widget.json +++ b/projects/packages/premium-analytics/widgets/wordads-chart-tabs/widget.json @@ -2,6 +2,9 @@ "name": "jpa/wordads-chart-tabs", "title": "WordAds", "description": "Compare ads served, average CPM, and revenue over the selected period, with the previous period overlaid for comparison.", + "help": { + "content": "Compare ads served, average CPM, and revenue over the selected period, with the previous period overlaid for comparison." + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/wordads-chart-tabs/widget.ts b/projects/packages/premium-analytics/widgets/wordads-chart-tabs/widget.ts index 75b681b712ea..d6fd99a4179b 100644 --- a/projects/packages/premium-analytics/widgets/wordads-chart-tabs/widget.ts +++ b/projects/packages/premium-analytics/widgets/wordads-chart-tabs/widget.ts @@ -51,14 +51,6 @@ export type WordAdsChartTabsAttributes = { * site. */ export default { - name: 'jpa/wordads-chart-tabs', - title: __( 'WordAds', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Compare ads served, average CPM, and revenue over the selected period, with the previous period overlaid for comparison.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, attributes: [ { diff --git a/projects/packages/premium-analytics/widgets/wordads-earnings-history/stories/wordads-earnings-history-widget.stories.tsx b/projects/packages/premium-analytics/widgets/wordads-earnings-history/stories/wordads-earnings-history-widget.stories.tsx index 930bde0f85c1..da07a8665d85 100644 --- a/projects/packages/premium-analytics/widgets/wordads-earnings-history/stories/wordads-earnings-history-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/wordads-earnings-history/stories/wordads-earnings-history-widget.stories.tsx @@ -25,9 +25,11 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import WordAdsEarningsHistoryRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentType } from 'react'; @@ -94,7 +96,7 @@ function WordAdsEarningsHistoryDashboardStory( dashboardArgs: WidgetDashboardWit return ( > diff --git a/projects/packages/premium-analytics/widgets/wordads-earnings-history/widget.json b/projects/packages/premium-analytics/widgets/wordads-earnings-history/widget.json index 61dcffeb6486..6194185d6f5e 100644 --- a/projects/packages/premium-analytics/widgets/wordads-earnings-history/widget.json +++ b/projects/packages/premium-analytics/widgets/wordads-earnings-history/widget.json @@ -2,6 +2,9 @@ "name": "jpa/wordads-earnings-history", "title": "Earnings History", "description": "Your WordAds earnings by period, with amounts, ads served, and payment status.", + "help": { + "content": "Ads Served is the number of ads we attempted to display (page impressions × available ad slots). Not every ad served results in a paid impression." + }, "category": "stats", "presentation": "content-bleed" } diff --git a/projects/packages/premium-analytics/widgets/wordads-earnings-history/widget.ts b/projects/packages/premium-analytics/widgets/wordads-earnings-history/widget.ts index a63d8b6d8244..c87b1f6b2c10 100644 --- a/projects/packages/premium-analytics/widgets/wordads-earnings-history/widget.ts +++ b/projects/packages/premium-analytics/widgets/wordads-earnings-history/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; import type { WidgetAttributeField } from '@wordpress/widget-primitives'; @@ -21,14 +20,6 @@ export type WordAdsEarningsHistoryAttributes = Record< never, never >; * site. */ export default { - name: 'jpa/wordads-earnings-history', - title: __( 'Earnings History', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Ads Served is the number of ads we attempted to display (page impressions × available ad slots). Not every ad served results in a paid impression.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, attributes: [] as WidgetAttributeField< WordAdsEarningsHistoryAttributes >[], example: { diff --git a/projects/packages/premium-analytics/widgets/wordads-highlights/stories/wordads-highlights-widget.stories.tsx b/projects/packages/premium-analytics/widgets/wordads-highlights/stories/wordads-highlights-widget.stories.tsx index 27687d2dad8f..bc9509433c79 100644 --- a/projects/packages/premium-analytics/widgets/wordads-highlights/stories/wordads-highlights-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/wordads-highlights/stories/wordads-highlights-widget.stories.tsx @@ -11,6 +11,7 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import { forceWordAdsEarningsState, @@ -21,8 +22,9 @@ import widgetDefinition, { DEFAULT_WORDADS_EARNINGS_METRICS, type WordAdsEarningsMetricId, } from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; -import type { WidgetRenderProps, WidgetType } from '@wordpress/widget-primitives'; +import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentProps, ComponentType } from 'react'; registerReportMocks(); @@ -31,16 +33,9 @@ const WORDADS_HIGHLIGHTS_RENDER_MODULE = 'storybook/wordads-highlights'; // Carry the widget's metadata, including the metric-visibility attribute schema // so the dashboard story's settings drawer renders the real checkboxes. -// Presentation is left unset so the host frames the widget and renders its -// identity (title + icon), matching widget.json. -const storyWidgetType = { - name: widgetDefinition.name, - title: widgetDefinition.title, - icon: widgetDefinition.icon, - help: widgetDefinition.help, - attributes: widgetDefinition.attributes as WidgetType[ 'attributes' ], - example: widgetDefinition.example, -}; +// `presentation` comes from widget.json ( 'framed' ), so the host frames the +// widget and renders its identity (title + icon). +const storyWidgetType = createStoryWidgetType( widgetManifest, widgetDefinition ); interface WordAdsHighlightsStoryControls { /** diff --git a/projects/packages/premium-analytics/widgets/wordads-highlights/widget.json b/projects/packages/premium-analytics/widgets/wordads-highlights/widget.json index bac8e1827001..77f9590372c4 100644 --- a/projects/packages/premium-analytics/widgets/wordads-highlights/widget.json +++ b/projects/packages/premium-analytics/widgets/wordads-highlights/widget.json @@ -2,6 +2,9 @@ "name": "jpa/wordads-highlights", "title": "WordAds highlights", "description": "Your WordAds earnings at a glance — total earnings, amount paid, and outstanding balance.", + "help": { + "content": "Payment is made once your outstanding balance reaches $100, approximately 45 days after the end of the month in which it was earned." + }, "category": "stats", "presentation": "framed" } diff --git a/projects/packages/premium-analytics/widgets/wordads-highlights/widget.ts b/projects/packages/premium-analytics/widgets/wordads-highlights/widget.ts index d9d6e46e7acb..c22dfd949ce2 100644 --- a/projects/packages/premium-analytics/widgets/wordads-highlights/widget.ts +++ b/projects/packages/premium-analytics/widgets/wordads-highlights/widget.ts @@ -50,15 +50,7 @@ export const DEFAULT_WORDADS_EARNINGS_METRICS: WordAdsEarningsMetricId[] = * card enabled. */ export default { - name: 'jpa/wordads-highlights', - title: __( 'WordAds highlights', 'jetpack-premium-analytics' ), icon: megaphone, - help: { - content: __( - 'Payment is made once your outstanding balance reaches $100, approximately 45 days after the end of the month in which it was earned.', - 'jetpack-premium-analytics' - ), - }, attributes: [ { id: 'metrics', diff --git a/projects/packages/premium-analytics/widgets/wordads-sponsored-content-history/stories/wordads-sponsored-content-history-widget.stories.tsx b/projects/packages/premium-analytics/widgets/wordads-sponsored-content-history/stories/wordads-sponsored-content-history-widget.stories.tsx index ae339656d126..1b9d4b5df9eb 100644 --- a/projects/packages/premium-analytics/widgets/wordads-sponsored-content-history/stories/wordads-sponsored-content-history-widget.stories.tsx +++ b/projects/packages/premium-analytics/widgets/wordads-sponsored-content-history/stories/wordads-sponsored-content-history-widget.stories.tsx @@ -27,9 +27,11 @@ import { widgetDashboardWithWidgetArgTypes, type WidgetDashboardWithWidgetControls, } from '../../stories/widget-dashboard-with-widget'; +import { createStoryWidgetType } from '../../stories/create-story-widget-type'; import { withWidgetCanvas } from '../../stories/with-widget-canvas'; import WordAdsSponsoredContentHistoryRender from '../render'; import widgetDefinition from '../widget'; +import widgetManifest from '../widget.json'; import type { Meta, StoryObj } from '@storybook/react'; import type { WidgetRenderProps } from '@wordpress/widget-primitives'; import type { ComponentType } from 'react'; @@ -98,7 +100,7 @@ function WordAdsSponsoredContentHistoryDashboardStory( return ( > diff --git a/projects/packages/premium-analytics/widgets/wordads-sponsored-content-history/widget.json b/projects/packages/premium-analytics/widgets/wordads-sponsored-content-history/widget.json index fba9b69296e8..e70097cc756e 100644 --- a/projects/packages/premium-analytics/widgets/wordads-sponsored-content-history/widget.json +++ b/projects/packages/premium-analytics/widgets/wordads-sponsored-content-history/widget.json @@ -2,6 +2,9 @@ "name": "jpa/wordads-sponsored-content-history", "title": "Sponsored Content History", "description": "Your WordAds sponsored-content earnings by period, with amounts, ads served, and payment status.", + "help": { + "content": "Ads Served is the number of ads we attempted to display (page impressions × available ad slots). Not every ad served results in a paid impression." + }, "category": "stats", "presentation": "content-bleed" } diff --git a/projects/packages/premium-analytics/widgets/wordads-sponsored-content-history/widget.ts b/projects/packages/premium-analytics/widgets/wordads-sponsored-content-history/widget.ts index f834a1b9adda..7238d84e8fcf 100644 --- a/projects/packages/premium-analytics/widgets/wordads-sponsored-content-history/widget.ts +++ b/projects/packages/premium-analytics/widgets/wordads-sponsored-content-history/widget.ts @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { chartBar } from '@wordpress/icons'; import type { WidgetAttributeField } from '@wordpress/widget-primitives'; @@ -21,14 +20,6 @@ export type WordAdsSponsoredContentHistoryAttributes = Record< never, never >; * site. */ export default { - name: 'jpa/wordads-sponsored-content-history', - title: __( 'Sponsored Content History', 'jetpack-premium-analytics' ), - help: { - content: __( - 'Ads Served is the number of ads we attempted to display (page impressions × available ad slots). Not every ad served results in a paid impression.', - 'jetpack-premium-analytics' - ), - }, icon: chartBar, attributes: [] as WidgetAttributeField< WordAdsSponsoredContentHistoryAttributes >[], example: {