diff --git a/routes/dashboard/widget-dashboard/stories/index.story.tsx b/routes/dashboard/widget-dashboard/stories/index.story.tsx
deleted file mode 100644
index 0764c8fc84c849..00000000000000
--- a/routes/dashboard/widget-dashboard/stories/index.story.tsx
+++ /dev/null
@@ -1,362 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentProps, ComponentType } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { brush, home } from '@wordpress/icons';
-import { EmptyState } from '@wordpress/ui';
-
-/**
- * Internal dependencies
- */
-import { WidgetDashboard } from '../widget-dashboard';
-import type {
- ResolveWidgetModule,
- DashboardWidget,
- WidgetRenderProps,
- WidgetType,
-} from '../types';
-
-/*
- * Mock widget modules
- *
- * Widgets are resolved at render time via `resolveWidgetModule`. In
- * production this maps a script-module id to a React component; here we
- * keep it in-memory and introduce a small delay so the `Suspense`
- * fallback is observable.
- */
-
-type HelloAttrs = { greeting: string };
-
-function HelloWidget( {
- attributes,
- setAttributes,
-}: WidgetRenderProps< HelloAttrs > ) {
- return (
-
-
Hello widget
-
{ attributes.greeting }
-
- setAttributes?.( { greeting: event.target.value } )
- }
- aria-label="Greeting"
- style={ { padding: 4 } }
- />
-
-
Counter widget
-
{ attributes.count }
-
-
- Static content
-
- );
-}
-
-const MOCK_MODULES: Record< string, { default: ComponentType< any > } > = {
- 'mock/hello': { default: HelloWidget },
- 'mock/counter': { default: CounterWidget },
- 'mock/static': { default: StaticWidget },
-};
-
-const resolveWidgetModule: ResolveWidgetModule = ( moduleId ) =>
- new Promise( ( resolve, reject ) => {
- setTimeout( () => {
- const mod = MOCK_MODULES[ moduleId ];
- if ( ! mod ) {
- reject( new Error( `Unknown mock module: ${ moduleId }` ) );
- return;
- }
- resolve( mod );
- }, 200 );
- } );
-
-const widgetTypes: WidgetType[] = [
- {
- apiVersion: 1,
- name: 'mock/hello',
- title: 'Hello',
- renderModule: 'mock/hello',
- example: { attributes: { greeting: 'Hi there' } },
- },
- {
- apiVersion: 1,
- name: 'mock/counter',
- title: 'Counter',
- renderModule: 'mock/counter',
- example: { attributes: { count: 0 } },
- },
- {
- apiVersion: 1,
- name: 'mock/static',
- title: 'Static',
- renderModule: 'mock/static',
- },
-];
-
-const defaultLayout: DashboardWidget[] = [
- {
- uuid: 'w1',
- type: 'mock/hello',
- attributes: { greeting: 'Good morning' },
- placement: { width: 2, height: 2 },
- },
- {
- uuid: 'w2',
- type: 'mock/counter',
- attributes: { count: 3 },
- placement: { width: 2, height: 2 },
- },
- {
- uuid: 'w3',
- type: 'mock/static',
- placement: { width: 'fill', height: 2 },
- },
- {
- uuid: 'w4',
- type: 'mock/static',
- placement: { width: 'full', height: 1 },
- },
-];
-
-function StatefulDashboard( props: ComponentProps< typeof WidgetDashboard > ) {
- const [ layout, setLayout ] = useState( props.layout );
-
- return (
-
- {
- setLayout( next );
- props.onLayoutChange?.( next );
- } }
- />
-
- );
-}
-
-const meta: Meta< typeof WidgetDashboard > = {
- title: 'Dashboard/WidgetDashboard',
- component: WidgetDashboard,
- render: ( args ) => ,
- args: {
- widgetTypes,
- resolveWidgetModule,
- editMode: false,
- gridSettings: { columns: 6, spacing: 2, rowHeight: 120 },
- },
- argTypes: {
- children: { control: false },
- layout: { control: false },
- widgetTypes: { control: false },
- resolveWidgetModule: { control: false },
- gridSettings: { control: false },
- onLayoutChange: { action: 'onLayoutChange' },
- onEditChange: { action: 'onEditChange' },
- editMode: { control: { type: 'boolean' } },
- },
- parameters: {
- layout: 'fullscreen',
- },
-};
-export default meta;
-
-type Story = StoryObj< typeof WidgetDashboard >;
-
-export const Default: Story = {
- args: {
- layout: defaultLayout,
- },
-};
-
-export const EditMode: Story = {
- args: {
- layout: defaultLayout,
- editMode: true,
- },
-};
-
-export const NoWidgets: Story = {
- args: {
- layout: [],
- },
-};
-
-export const NoWidgetsCustom: Story = {
- args: {
- layout: [],
- children: (
- <>
-
-
-
-
- Make this dashboard yours
-
-
-
- Pass any children
- { ' ' }
- to NoWidgetsState to replace the
- built-in placeholder.
-
-
-
-
-
- ),
- },
-};
-
-export const Responsive: Story = {
- args: {
- layout: defaultLayout,
- gridSettings: { minColumnWidth: 220, spacing: 2, rowHeight: 120 },
- },
-};
-
-/*
- * Demonstrates that `` is just a container around its
- * children. Consumers can interleave the compound parts (`NoWidgetsState`,
- * `Widgets`) with any other markup — headers, sidebars, stats, footers —
- * to compose richer surfaces without losing the engine's behaviour.
- */
-export const Composition: Story = {
- args: {
- layout: defaultLayout,
- editMode: true,
- children: (
-
-
-
-
-
-
-
- Your dashboard is empty
-
-
- Add widgets to start customizing your dashboard.
-
-
-
-
-
-
-
-