feat: manage project versions v2 (#5049)

* update add files copy and go to next step on just one file

* rename and reorder stages

* add metadata stage and update details stage

* implement files inside metadata stage

* use regular prettier instead of prettier eslint

* remove changelog stage config

* save button on details stage

* update edit buttons in versions table

* add collapse environment selector

* implement dependencies list in metadata step

* move dependencies into provider

* add suggested dependencies to metadata stage

* pnpm prepr

* fix unused var

* Revert "add collapse environment selector"

This reverts commit f90fabc7a57ff201f26e1b628eeced8e6ef75865.

* hide resource pack loader only when its the only loader

* fix no dependencies for modpack

* add breadcrumbs with hide breadcrumb option

* wider stages

* add proper horizonal scroll breadcrumbs

* fix titles

* handle save version in version page

* remove box shadow

* add notification provider to storybook

* add drop area for versions to drop file right into page

* fix mobile versions table buttons overflowing

* pnpm prepr

* fix drop file opening modal in wrong stage

* implement invalid file for dropping files

* allow horizontal scroll on breadcrumbs

* update infer.js as best as possible

* add create version button uploading version state

* add extractVersionFromFilename for resource pack and datapack

* allow jars for datapack project

* detect multiple loaders when possible

* iris means compatible with optifine too

* infer environment on loader change as well

* add tooltip

* prevent navigate forward when cannot go to next step

* larger breadcrumb click targets

* hide loaders and mc versions stage until files added

* fix max width in header

* fix add files from metadata step jumping steps

* define width in NewModal instead

* disable remove dependency in metadata stage

* switch metadata and details buttons positions

* fix remove button spacing

* do not allow duplicate suggested dependencies

* fix version detection for fabric minecraft version semvar

* better verion number detection based on filename

* show resource pack loader but uneditable

* remove vanilla shader detection

* refactor: break up large infer.js into ts and modules

* remove duplicated types

* add fill missing from file name step

* pnpm prepr

* fix neoforge loader parse failing and not adding neoforge loader

* add missing pack formats

* handle new pack format

* pnpm prepr

* add another regex where it is version in anywhere in filename

* only show resource pack or data pack options for filetype on datapack project

* add redundant zip folder check

* reject RP and DP if has redundant folder

* fix hide stage in breadcrumb

* add snapshot group key in case no release version. brings out 26.1 snapshots

* pnpm prepr

* open in group if has something selected

* fix resource pack loader uneditable if accidentally selected on different project type

* add new environment tags

* add unknown and not applicable environment tags

* pnpm prepr

* use shared constant on labels

* use ref for timeout

* remove console logs

* remove box shadow only for cm-content

* feat: xhr upload + fix wrangler prettierignore

* fix: upload content type fix

* fix dependencies version width

* fix already added dependencies logic

* add changelog minheight

* set progress percentage on button

* add legacy fabric detection logic

* lint

* small update on create version button label

---------

Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

packages/ui/.storybook/preview.ts

@@ -6,13 +6,21 @@ import { withThemeByClassName } from '@storybook/addon-themes'
 import type { Preview } from '@storybook/vue3-vite'
 import { setup } from '@storybook/vue3-vite'
 import FloatingVue from 'floating-vue'
+import { defineComponent, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
+import NotificationPanel from '../src/components/nav/NotificationPanel.vue'
 import {
 	buildLocaleMessages,
 	createMessageCompiler,
 	type CrowdinMessages,
 } from '../src/composables/i18n'
+import {
+	AbstractWebNotificationManager,
+	type NotificationPanelLocation,
+	provideNotificationManager,
+	type WebNotification,
+} from '../src/providers'
 
 // Load locale messages from the UI package's locales
 // @ts-ignore
@@ -31,6 +39,42 @@ const i18n = createI18n({
 	messages: buildLocaleMessages(localeModules),
 })
 
+class StorybookNotificationManager extends AbstractWebNotificationManager {
+	private readonly state = ref<WebNotification[]>([])
+	private readonly locationState = ref<NotificationPanelLocation>('right')
+
+	public getNotificationLocation(): NotificationPanelLocation {
+		return this.locationState.value
+	}
+
+	public setNotificationLocation(location: NotificationPanelLocation): void {
+		this.locationState.value = location
+	}
+
+	public getNotifications(): WebNotification[] {
+		return this.state.value
+	}
+
+	protected addNotificationToStorage(notification: WebNotification): void {
+		this.state.value.push(notification)
+	}
+
+	protected removeNotificationFromStorage(id: string | number): void {
+		const index = this.state.value.findIndex((n) => n.id === id)
+		if (index > -1) {
+			this.state.value.splice(index, 1)
+		}
+	}
+
+	protected removeNotificationFromStorageByIndex(index: number): void {
+		this.state.value.splice(index, 1)
+	}
+
+	protected clearAllNotificationsFromStorage(): void {
+		this.state.value.splice(0)
+	}
+}
+
 setup((app) => {
 	app.use(i18n)
 	app.use(FloatingVue, {
@@ -56,6 +100,14 @@ setup((app) => {
 	}
 })
 
+// Wrapper component that provides notification manager context
+const NotificationManagerProvider = defineComponent({
+	setup(_, { slots }) {
+		provideNotificationManager(new StorybookNotificationManager())
+		return () => slots.default?.()
+	},
+})
+
 const preview: Preview = {
 	parameters: {
 		controls: {
@@ -74,6 +126,16 @@ const preview: Preview = {
 			},
 			defaultTheme: 'dark',
 		}),
+		// Wrap stories with notification manager provider
+		(story) => ({
+			components: { story, NotificationManagerProvider, NotificationPanel },
+			template: /*html*/ `
+				<NotificationManagerProvider>
+					<NotificationPanel />
+					<story />
+				</NotificationManagerProvider>
+			`,
+		}),
 	],
 }