Docs: Storybook clean up round 1 (#19673)

* delete internal stories

* more clean up

* more cleanup

* move to generic components

* clean up

* move body layout

* move story

* Move icon stories

* remove prefilled color

* Update icon.element.ts

* rename story

* Replace UUIFormControlMixin with UmbFormControlMixin

Refactors all relevant input and form control components to use the new UmbFormControlMixin from '@umbraco-cms/backoffice/validation' instead of the deprecated UUIFormControlMixin. This change improves consistency and aligns with updated validation handling in the codebase.

* Revert "Merge branch 'v16/bugfix/use-umb-form-control-mixin' into v16/docs/storybook-clean-up"

This reverts commit 7fa70b8, reversing
changes made to 8fe7391.

* simplify name

* Add discard changes modal stories

* add error viewer modal

* fix stories

* rename

* fix date story

* add story for input with alias

* add story for popover layout

* add story for dropdown

* add args

* register core manifests

* register entity action bundle + list

* add stack example

* clean up

* Create data-type-input.stories.ts

* change overview story to docs

* rename to docs

* rename to docs

* Update icon.stories.ts

* Update preview.js

* remove overview story

* rename default story

* load more manifests

* import all manifests

* Update preview.js

* Update preview.js

* provide all stores + global contexts

* Update data-type-input.stories.ts

* add user input and ref stories

* add storybook auth context

* set the initial storybook language

* use isoCode param

* fix input-language component

* delete broken stories

* fix icon picker story

* fix mock member ids

* Fix query parameter name in item handler

Changed the query parameter from 'paths' to 'path' in the item handler to correctly retrieve item paths from the request. This ensures the handler processes requests as expected.

* Update user item handler to use user mock DB

Replaces the document mock database with the user mock database in the user item handler to ensure correct data source is used for user-related requests.

* Add config to checkbox list story

Introduces a sample configuration to the checkbox list Storybook story, providing predefined options for demonstration and testing purposes.

* Add config to select property editor story

Introduces a sample UmbPropertyEditorConfigCollection to the select property editor Storybook story, providing predefined options for demonstration and testing purposes.

* Add config to radio button list Storybook story

Introduces a sample UmbPropertyEditorConfigCollection to the radio button list

* Refactor slider story to use config collection

Replaces inline config array with UmbPropertyEditorConfigCollection for the slider property editor story.

* Delete property-editor-ui-label.stories.ts

* Group releated UIs

* Remove multi-url picker Storybook file

* add input stylesheet story

* add back localization stories

* Delete property-editor-config.stories.ts

---------

Co-authored-by: Jacob Overgaard <[email protected]>

Author: madsrasmussen

src/Umbraco.Web.UI.Client/.storybook/preview.js

@@ -10,11 +10,8 @@ import { setCustomElements } from '@storybook/web-components-vite';
 import { startMockServiceWorker } from '../src/mocks';
 
 import '../src/libs/controller-api/controller-host-provider.element';
+import { UmbExtensionsApiInitializer } from '../src/libs/extension-api/index';
 import { UmbModalManagerContext } from '../src/packages/core/modal';
-import { UmbDataTypeTreeStore } from '../src/packages/data-type/tree/data-type-tree.store';
-import { UmbDocumentDetailStore } from '../src/packages/documents/documents/repository/detail/document-detail.store';
-import { UmbDocumentTreeStore } from '../src/packages/documents/documents/tree/document-tree.store';
-import { UmbCurrentUserStore } from '../src/packages/user/current-user/repository/current-user.store';
 import { umbExtensionsRegistry } from '../src/packages/core/extension-registry';
 import { UmbIconRegistry } from '../src/packages/core/icon-registry/icon.registry';
 import { UmbLitElement } from '../src/packages/core/lit-element';
@@ -25,27 +22,128 @@ import icons from '../src/packages/core/icon-registry/icons';
 import '../src/libs/context-api/provide/context-provider.element';
 import '../src/packages/core/components';
 
+import { manifests as blockManifests } from '../src/packages/block/manifests';
+import { manifests as clipboardManifests } from '../src/packages/clipboard/manifests';
+import { manifests as codeEditorManifests } from '../src/packages/code-editor/manifests';
+import { manifests as contentManifests } from '../src/packages/content/manifests';
+import { manifests as coreManifests } from '../src/packages/core/manifests';
+import { manifests as dataTypeManifests } from '../src/packages/data-type/manifests';
+import { manifests as dictionaryManifests } from '../src/packages/dictionary/manifests';
 import { manifests as documentManifests } from '../src/packages/documents/manifests';
-import { manifests as localizationManifests } from '../src/packages/core/localization/manifests';
+import { manifests as embeddedMediaManifests } from '../src/packages/embedded-media/manifests';
+import { manifests as extensionInsightsManifests } from '../src/packages/extension-insights/manifests';
+import { manifests as healthCheckManifests } from '../src/packages/health-check/manifests';
+import { manifests as helpManifests } from '../src/packages/help/manifests';
+import { manifests as languageManifests } from '../src/packages/language/manifests';
+import { manifests as logViewerManifests } from '../src/packages/log-viewer/manifests';
+import { manifests as markdownEditorManifests } from '../src/packages/markdown-editor/manifests';
+import { manifests as mediaManifests } from '../src/packages/media/manifests';
+import { manifests as memberManifests } from '../src/packages/members/manifests';
+import { manifests as modelsBuilderManifests } from '../src/packages/models-builder/manifests';
+import { manifests as multiUrlPickerManifests } from '../src/packages/multi-url-picker/manifests';
+import { manifests as packageManifests } from '../src/packages/packages/manifests';
+import { manifests as performanceProfilingManifests } from '../src/packages/performance-profiling/manifests';
+import { manifests as propertyEditorManifests } from '../src/packages/property-editors/manifests';
+import { manifests as publishCacheManifests } from '../src/packages/publish-cache/manifests';
+import { manifests as relationsManifests } from '../src/packages/relations/manifests';
+import { manifests as rteManifests } from '../src/packages/rte/manifests';
+import { manifests as searchManifests } from '../src/packages/search/manifests';
+import { manifests as segmentManifests } from '../src/packages/segment/manifests';
+import { manifests as settingsManifests } from '../src/packages/settings/manifests';
+import { manifests as staticFileManifests } from '../src/packages/static-file/manifests';
+import { manifests as sysInfoManifests } from '../src/packages/sysinfo/manifests';
+import { manifests as tagManifests } from '../src/packages/tags/manifests';
+import { manifests as telemetryManifests } from '../src/packages/telemetry/manifests';
+import { manifests as templatingManifests } from '../src/packages/templating/manifests';
+import { manifests as tipTapManifests } from '../src/packages/tiptap/manifests';
+import { manifests as translationManifests } from '../src/packages/translation/manifests';
+import { manifests as ufmManifests } from '../src/packages/ufm/manifests';
+//import { manifests as umbracoNewsManifests } from '../src/packages/umbraco-news/manifests';
+import { manifests as userManifests } from '../src/packages/user/manifests';
+import { manifests as webhookManifests } from '../src/packages/webhook/manifests';
+
 import { UmbNotificationContext } from '../src/packages/core/notification';
+import { UmbContextBase } from '../src/libs/class-api/index';
+import { UmbBooleanState } from '../src/libs/observable-api/index';
+import { UMB_APP_LANGUAGE_CONTEXT } from '../src/packages/language/constants';
 
 // MSW
 startMockServiceWorker({ serviceWorker: { url: (import.meta.env.VITE_BASE_PATH ?? '/') + 'mockServiceWorker.js' } });
 
+class UmbStoryBookAuthContext extends UmbContextBase {
+	#isAuthorized = new UmbBooleanState(true);
+	isAuthorized = this.#isAuthorized.asObservable();
+
+	constructor(host) {
+		super(host, 'UmbAuthContext');
+	}
+}
+
 class UmbStoryBookElement extends UmbLitElement {
 	_umbIconRegistry = new UmbIconRegistry();
 
+	#manifests = [
+		...blockManifests,
+		...clipboardManifests,
+		...codeEditorManifests,
+		...contentManifests,
+		...coreManifests,
+		...dataTypeManifests,
+		...dictionaryManifests,
+		...documentManifests,
+		...embeddedMediaManifests,
+		...extensionInsightsManifests,
+		...healthCheckManifests,
+		...helpManifests,
+		...languageManifests,
+		...logViewerManifests,
+		...markdownEditorManifests,
+		...mediaManifests,
+		...memberManifests,
+		...modelsBuilderManifests,
+		...multiUrlPickerManifests,
+		...packageManifests,
+		...performanceProfilingManifests,
+		...propertyEditorManifests,
+		...publishCacheManifests,
+		...relationsManifests,
+		...rteManifests,
+		...searchManifests,
+		...segmentManifests,
+		...settingsManifests,
+		...staticFileManifests,
+		...sysInfoManifests,
+		...tagManifests,
+		...telemetryManifests,
+		...templatingManifests,
+		...tipTapManifests,
+		...translationManifests,
+		...ufmManifests,
+		//...umbracoNewsManifests,
+		...userManifests,
+		...webhookManifests,
+	];
+
 	constructor() {
 		super();
+		new UmbExtensionsApiInitializer(this, umbExtensionsRegistry, 'globalContext', [this]);
+		new UmbExtensionsApiInitializer(this, umbExtensionsRegistry, 'store', [this]);
+		new UmbExtensionsApiInitializer(this, umbExtensionsRegistry, 'treeStore', [this]);
+		new UmbExtensionsApiInitializer(this, umbExtensionsRegistry, 'itemStore', [this]);
+
 		this._umbIconRegistry.setIcons(icons);
 		this._umbIconRegistry.attach(this);
-		this._registerExtensions(documentManifests);
+		this._registerExtensions(this.#manifests);
+
+		new UmbStoryBookAuthContext(this);
 		new UmbModalManagerContext(this);
-		new UmbCurrentUserStore(this);
 		new UmbNotificationContext(this);
 
-		this._registerExtensions(localizationManifests);
 		umbLocalizationRegistry.loadLanguage('en-us'); // register default language
+
+		this.consumeContext(UMB_APP_LANGUAGE_CONTEXT, (appLanguageContext) => {
+			appLanguageContext.setLanguage('en-us'); // set default language
+		});
 	}
 
 	_registerExtensions(manifests) {
@@ -66,26 +164,8 @@ customElements.define('umb-storybook', UmbStoryBookElement);
 
 const storybookProvider = (story) => html` <umb-storybook>${story()}</umb-storybook> `;
 
-const dataTypeStoreProvider = (story) => html`
-	<umb-controller-host-provider .create=${(host) => new UmbDataTypeTreeStore(host)}
-		>${story()}</umb-controller-host-provider
-	>
-`;
-
-const documentStoreProvider = (story) => html`
-	<umb-controller-host-provider .create=${(host) => new UmbDocumentDetailStore(host)}
-		>${story()}</umb-controller-host-provider
-	>
-`;
-
-const documentTreeStoreProvider = (story) => html`
-	<umb-controller-host-provider .create=${(host) => new UmbDocumentTreeStore(host)}
-		>${story()}</umb-controller-host-provider
-	>
-`;
-
 // Provide the MSW addon decorator globally
-export const decorators = [documentStoreProvider, documentTreeStoreProvider, dataTypeStoreProvider, storybookProvider];
+export const decorators = [storybookProvider];
 
 export const parameters = {
 	docs: {
@@ -98,28 +178,7 @@ export const parameters = {
 		storySort: {
 			method: 'alphabetical',
 			includeNames: true,
-			order: [
-				'Guides',
-				[
-					'Getting started',
-					'Extending the Backoffice',
-					[
-						'Intro',
-						'Registration',
-						'Header Apps',
-						'Sections',
-						['Intro', 'Sidebar', 'Views', '*'],
-						'Entity Actions',
-						'Workspaces',
-						['Intro', 'Views', 'Actions', '*'],
-						'Property Editors',
-						'Repositories',
-						'*',
-					],
-					'*',
-				],
-				'*',
-			],
+			order: ['Generic Components', 'Extension Type', 'Entity', 'Guides'],
 		},
 	},
 	controls: {