devex: storybook for UI Package (#4984)

* add storybook

* clean up stories

* small fix

* add stories for all components

* add vintl

* default to dark mode

* fix  teleport

* add theme addon

* add new modal story

* delete broken stories

* move all stories to central stories folder

* fix paths

* add pnpm run storybook

* remove chromatic

* add add-stories.md

* fix types

* fix unncessary args field

* cover more addordion states

* pt2

* remove old vintl

* fix: missing style + ctx

---------

Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>

packages/ui/src/stories/base/OverflowMenu.stories.ts

@@ -0,0 +1,81 @@
+import { MoreHorizontalIcon } from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import OverflowMenu from '../../components/base/OverflowMenu.vue'
+
+const meta = {
+	title: 'Base/OverflowMenu',
+	component: OverflowMenu,
+	render: (args) => ({
+		components: { OverflowMenu, MoreHorizontalIcon, ButtonStyled },
+		setup() {
+			return { args }
+		},
+		template: /*html*/ `
+			<ButtonStyled circular type="transparent">
+				<OverflowMenu v-bind="args">
+					<MoreHorizontalIcon class="h-5 w-5" />
+					<template #edit>Edit</template>
+					<template #delete>Delete</template>
+					<template #share>Share</template>
+				</OverflowMenu>
+			</ButtonStyled>
+		`,
+	}),
+} satisfies Meta<typeof OverflowMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		options: [
+			{ id: 'edit', action: () => console.log('Edit clicked') },
+			{ id: 'share', action: () => console.log('Share clicked') },
+			{ divider: true },
+			{ id: 'delete', action: () => console.log('Delete clicked'), color: 'danger' },
+		],
+	},
+}
+
+export const WithDifferentPlacements: StoryObj = {
+	render: () => ({
+		components: { OverflowMenu, MoreHorizontalIcon, ButtonStyled },
+		template: /*html*/ `
+			<div class="flex gap-8 items-start">
+				<div class="flex flex-col items-center gap-2">
+					<span class="text-sm text-secondary">bottom-end (default)</span>
+					<ButtonStyled circular type="transparent">
+						<OverflowMenu
+							:options="[
+								{ id: 'edit', action: () => {} },
+								{ id: 'delete', action: () => {}, color: 'danger' },
+							]"
+						>
+							<MoreHorizontalIcon class="h-5 w-5" />
+							<template #edit>Edit</template>
+							<template #delete>Delete</template>
+						</OverflowMenu>
+					</ButtonStyled>
+				</div>
+				<div class="flex flex-col items-center gap-2">
+					<span class="text-sm text-secondary">bottom-start</span>
+					<ButtonStyled circular type="transparent">
+						<OverflowMenu
+							direction="left"
+							:options="[
+								{ id: 'edit', action: () => {} },
+								{ id: 'delete', action: () => {}, color: 'danger' },
+							]"
+						>
+							<MoreHorizontalIcon class="h-5 w-5" />
+							<template #edit>Edit</template>
+							<template #delete>Delete</template>
+						</OverflowMenu>
+					</ButtonStyled>
+				</div>
+			</div>
+		`,
+	}),
+}