feat: server management in app (#5628)
* start new server settings tabs * update properties tab to match design * better stying in general tab * feat: add suffix input for hostname field * implement tables for allocations and DNS records * add tags for dns record type * small gap adjustment * polish advanced page * adjust properties page hierarchy * fix searching properties, empty state and projection radius appearing * pnpm prepr * update copy to match designs * fix suffix input component * style fixes and match heading size * small fix * fix search allocations placeholder * adjust table styles * move all installation settings helper text to below input * update icon to use overflow menu buttons * fix modal to be consistent * open advanced properties when search * remove other and custom properties, and update styles * remove hide/show all java versions * handle mc 26 * refactor: move server settings pages into /ui and add app ServerSettingsModal * hook up server pages for app * add server page header to app * hook up server settings modal * use large size * fix card box shadow style * fix hostname input for app * fix app/website card containers * implement external tabs for billing and admin billing * fix save banner fixed to parent instead of page body * remove unused prop to FriendsList causing warning in app * fix client-only not available for app * fix bottom cut off * wire node auth * implement full copy buttons * dedup copy button tailwind styles * fix hover class not working in @apply * fix spacing * fix error validation styles * apply consistent styles and spacing * feat: update hosting server card (#5609) * fix type errors * fix some stylesheets not imported for storybook * add server listing stories * add fix for frontend stylesheet imports * remove props. * convert copy code to use tailwind * update server listing component styles * update server info label styles * start status/player count info label, more style updates and fixes * add new server card buttons * hook up server cards and implement updated styles * hook up on download button * fix tauri throwing error when api returns 204 No Content * hook up purchase server modal in app * fix upgrading state loading icon * pnpm prepr * filter out servers past 30 days after cancellation * do not apply opacity on lock or spiner icons * fix disabled server icon background * update pending change stage * handle known suspension states * refactor: reduce code duplication for server listing * update disabled state text color * fix loading icon color * clean up copy * fix disabled opacity for server card * update server listing files kept to be countdown * implement resubscribe modal * implement proper provisioning state for resubscribe * fix duplicate attribute and pnpm prepr * feat: add shared UI package auth DI * feat: update purchase server flow (#5714) * implement server list empty state component * fix stories and adjust spacing * implement select plan design refresh * implement auth for empty server list * use refs instead of reactive * pnpm prepr * fix auth usage for empty servers list * move app auth provider setup to src/providers/setup * pnpm prepr * fix max height * style fix * fix getCreds no auth is blocking api client * implement servers guest plan modal and signin which redirects back to modal's next step * refactor guest plan select logic into provider * implement sign in or create account popup * remove force empty serverList * add download button for suspended mod and generic * add handling for when user logs out * QA pass style fixes * more consistent page styles * fix duplicate export * refactor: remove all fallback stuff from resubscribe modal * implement shared download latest backup util * i18n pass * pnpm prepr * fix region being selected if ping failed * pnpm prepr * feat: servers in app finalization (#5744) * feat: start on shared console implementation into logs and overview pages * fix: terminal gap issues * feat: swap word wrap for full screen * fix: stats cards alignment * fix: stats * feat: fix console clear + remove copy * fix: lint * fix: use reset not clear * feat: shared server header & overview page for app and website (#5736) * feat: implement shared server header for app and website * feat: implement wrapped overview page with shared composable and hook it up * pnpm prepr * fix: bugs * qa: cleanup * feat: root.vue shared layout * feat: delete old options pages + fix discovery frontend * fix: discovery * fix: misc style/layout issues * fix page padding * fix: modal height jankiness * feat: implement server install content in app and server setup modal with DI * fix: spacing * remove servers in app feature flag * Revert "remove servers in app feature flag" This reverts commit 86e284c4bdd6fa42c3c8fbaf1efbec41f4d1c6d2. * fix: qa * feat: remove legacy components from apps/frontend/src/components/ui/servers --------- Co-authored-by: Calum H. (IMB11) <contact@cal.engineer> * qa pass (#5738) * fix: qa * feat: qa * fix: server icon fetch fails due to global node auth race condition overriding each other * fix: lint * fix: server icon upload/sync and centralize logic * fix: server settings modal not closing for server reset * fix: better server sorting * feat: copy address in server listing card * fix: notification panel in modal and when overlapping with action bar * fix: empty server list empty state flashing when refresh, fixed by adding isReady auth flag * feat: use floating action bar for save banner * fix: saving state in save bar * fix: edit server icon styling * fix: confirm modal to have consistent buttons * feat: loading animation for server panel + caching improvements for app * pnpm prepr * feat: search page deduplication (#5754) * fix: action bar behind modal * fix: remove warning modal for stopping * fix: server cards states * we hate webkit we hate webkit * fix: update allocation creation to not use modal * fix: properties tab spacing and styles * feat: add files tab copy * fix: advanced properties icon * fix: remove back to all servers link * feat: add files tab link in copy * fix: server header styles to be consistent with instance * fix: add header icons back * feat: update instance settings icon to be consistent * fix: icon container * feat: upload state persistence across tabs * fix: server labels text wrapping * fix: use surface-5 border * fix: loading spinner showing with onboarding below * feat: new server button shows purchase modal in website * fix: billing page not showing quarterly interval * fix: server downgrade not showing updated subscription notification * fix: server settings invalidate saved state and remove server context provider since its already provided in the page * pnpm prepr * add stripe publishable key to app build * feat: console highlighting * fix: rename servers title to modrinth hosting * feat: search fix * fix: qa/styles * fix: ip click active and remove power dont ask again * fix: qa * feat: highlighting fix console * fix: disable conflicts action * fix: error dismiss bug * feat: modal clarification * fix: files perms issue * fix: lint * feat: modal fix * enable show uptime * fix: add loading state to edit server icon * fix: notification panel take in has sidebar from settings * fix: consistency pass on app settings * fix: consistency pass on instance settings * pnpm prepr * fix: nagivate to billing button in app to go to website * fix: stripe return url in app causing app to open modrinth.com in tauri * refactor: better show polling UI code * fix: new server polling comparison to use server ids instead of length * fix: buttonstyled story * fix: button styling * fix: content.vue regression * feat: project url redirects * fix: breadcrumbs * fix: purchase with newly added card * fix: console ordering problems * fix: app-frontend missing env config and staging environment * fix: log syncing for instances and server panel accidentally * fix: QA issues * fix: server page loading state * fix: stats card logic * fix: lint * fix: qa * fix: console height padding * fix: terminal padding + loading indicator * feat: update medal server listing styling * fix: no upgrade button for medal server listing in app * fix: go to overview instead of content tab after onboarding * fix: qa * fix: teleport modals to body * fix: logs tab + qa * fix: local storage for user preferences * fix: qa loading indic * feat: considitonal debug and trace * fix: jump to top on install bug * feat: swap out server hard drive icon to server stack icon * feat: servers in app feature flag default true * fix: highlight row ufll * fix: webkit thing onto a tag * fix: input field * fix: clear fix * fix: lint * fix: fmt * feat: improve share modal and bring it back for sharing log * pnpm prepr * fix: menu overflowing * feat: remove servers in app feature flag * fix: server stat charts no longer showing color * fix: library nav no primary state * fix: better modal height and width * fix: highlighting bugs * fix: empty states * fix: delay import to fix overview page slow load on MacOS * fix: medal server listing too bright on light mode * fix: admon analysis + fix logs * fix: bug * fix: clear purchase intent from sign-in after closing modal * performance: improve server manage stats loading by splitting reactivity * fix: deploy + admon + disable highlighting * fix: clippy --------- Co-authored-by: tdgao <mr.trumgao@gmail.com> Co-authored-by: Truman Gao <106889354+tdgao@users.noreply.github.com> * feat: temp wrangler * fix: lint * fix: logs upload * fix: console empty state and admon regressions * fix: fields * feat: log deleting + prefetch for Logs.vue * feat: move delete before share * feat: clear endpoint * feat: we ball! --------- Co-authored-by: Calum H. <calum@modrinth.com> Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>
This commit is contained in:
Truman Gao
@@ -1,18 +1,68 @@
|
||||
import { DownloadIcon, HeartIcon, SettingsIcon } from '@modrinth/assets'
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
|
||||
import ButtonStyled from '../../components/base/ButtonStyled.vue'
|
||||
|
||||
const colors = ['standard', 'brand', 'red', 'orange', 'green', 'blue', 'purple'] as const
|
||||
const types = [
|
||||
'standard',
|
||||
'outlined',
|
||||
'transparent',
|
||||
'highlight',
|
||||
'highlight-colored-text',
|
||||
'chip',
|
||||
] as const
|
||||
const sizes = ['small', 'standard', 'large'] as const
|
||||
|
||||
const meta = {
|
||||
title: 'Base/ButtonStyled',
|
||||
component: ButtonStyled,
|
||||
argTypes: {
|
||||
color: {
|
||||
control: 'select',
|
||||
options: [...colors, 'medal-promo'],
|
||||
},
|
||||
size: {
|
||||
control: 'select',
|
||||
options: [...sizes],
|
||||
},
|
||||
type: {
|
||||
control: 'select',
|
||||
options: [...types],
|
||||
},
|
||||
circular: { control: 'boolean' },
|
||||
colorFill: {
|
||||
control: 'select',
|
||||
options: ['auto', 'background', 'text', 'none'],
|
||||
},
|
||||
hoverColorFill: {
|
||||
control: 'select',
|
||||
options: ['auto', 'background', 'text', 'none'],
|
||||
},
|
||||
highlighted: { control: 'boolean' },
|
||||
highlightedStyle: {
|
||||
control: 'select',
|
||||
options: ['main-nav-primary', 'main-nav-secondary'],
|
||||
},
|
||||
},
|
||||
args: {
|
||||
color: 'standard',
|
||||
size: 'standard',
|
||||
type: 'standard',
|
||||
circular: false,
|
||||
colorFill: 'auto',
|
||||
hoverColorFill: 'auto',
|
||||
highlighted: false,
|
||||
highlightedStyle: 'main-nav-primary',
|
||||
},
|
||||
render: (args) => ({
|
||||
components: { ButtonStyled },
|
||||
components: { ButtonStyled, DownloadIcon },
|
||||
setup() {
|
||||
return { args }
|
||||
},
|
||||
template: /*html*/ `
|
||||
<ButtonStyled v-bind="args">
|
||||
<button @click="()=>{}">Button</button>
|
||||
<button><DownloadIcon /> Button</button>
|
||||
</ButtonStyled>
|
||||
`,
|
||||
}),
|
||||
@@ -21,53 +71,155 @@ const meta = {
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {}
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
type: 'standard',
|
||||
},
|
||||
}
|
||||
|
||||
// All colors showcase
|
||||
export const AllColors: Story = {
|
||||
export const AllVariants: Story = {
|
||||
render: () => ({
|
||||
components: { ButtonStyled },
|
||||
setup() {
|
||||
return { colors, types }
|
||||
},
|
||||
template: /*html*/ `
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;">
|
||||
<ButtonStyled color="standard"><button>Standard</button></ButtonStyled>
|
||||
<ButtonStyled color="brand"><button>Brand</button></ButtonStyled>
|
||||
<ButtonStyled color="red"><button>Red</button></ButtonStyled>
|
||||
<ButtonStyled color="orange"><button>Orange</button></ButtonStyled>
|
||||
<ButtonStyled color="green"><button>Green</button></ButtonStyled>
|
||||
<ButtonStyled color="blue"><button>Blue</button></ButtonStyled>
|
||||
<ButtonStyled color="purple"><button>Purple</button></ButtonStyled>
|
||||
<div style="overflow-x: auto;">
|
||||
<table style="border-collapse: collapse; width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="padding: 0.5rem 1rem; text-align: left; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">Color / Type</th>
|
||||
<th v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">{{ type }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="color in colors" :key="color" style="border-top: 1px solid var(--color-surface-5);">
|
||||
<td style="padding: 0.5rem 1rem; font-weight: 600; font-size: 0.875rem;">{{ color }}</td>
|
||||
<td v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center;">
|
||||
<ButtonStyled :color="color" :type="type">
|
||||
<button>Button</button>
|
||||
</ButtonStyled>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
// All sizes showcase
|
||||
export const AllSizes: Story = {
|
||||
export const AllVariantsHighlighted: Story = {
|
||||
render: () => ({
|
||||
components: { ButtonStyled },
|
||||
setup() {
|
||||
return { colors, types }
|
||||
},
|
||||
template: /*html*/ `
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;">
|
||||
<ButtonStyled size="small" color="standard"><button>Small</button></ButtonStyled>
|
||||
<ButtonStyled size="standard" color="standard"><button>Standard</button></ButtonStyled>
|
||||
<ButtonStyled size="large" color="standard"><button>Large</button></ButtonStyled>
|
||||
<div style="overflow-x: auto;">
|
||||
<table style="border-collapse: collapse; width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="padding: 0.5rem 1rem; text-align: left; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">Color / Type</th>
|
||||
<th v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">{{ type }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="color in colors" :key="color" style="border-top: 1px solid var(--color-surface-5);">
|
||||
<td style="padding: 0.5rem 1rem; font-weight: 600; font-size: 0.875rem;">{{ color }}</td>
|
||||
<td v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center;">
|
||||
<ButtonStyled :color="color" :type="type" highlighted>
|
||||
<button>Button</button>
|
||||
</ButtonStyled>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
// All types showcase
|
||||
export const AllTypes: Story = {
|
||||
export const Sizes: Story = {
|
||||
render: () => ({
|
||||
components: { ButtonStyled },
|
||||
setup() {
|
||||
return { sizes, types }
|
||||
},
|
||||
template: /*html*/ `
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;">
|
||||
<ButtonStyled type="standard" color="standard"><button>Standard</button></ButtonStyled>
|
||||
<ButtonStyled type="outlined" color="standard"><button>Outlined</button></ButtonStyled>
|
||||
<ButtonStyled type="transparent" color="standard"><button>Transparent</button></ButtonStyled>
|
||||
<ButtonStyled type="highlight" color="standard"><button>Highlight</button></ButtonStyled>
|
||||
<ButtonStyled type="highlight-colored-text" color="standard"><button>Highlight Colored</button></ButtonStyled>
|
||||
<ButtonStyled type="chip" color="standard"><button>Chip</button></ButtonStyled>
|
||||
<ButtonStyled color="standard"><button disabled>Disabled</button></ButtonStyled>
|
||||
<div style="overflow-x: auto;">
|
||||
<table style="border-collapse: collapse; width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="padding: 0.5rem 1rem; text-align: left; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">Size / Type</th>
|
||||
<th v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">{{ type }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="size in sizes" :key="size" style="border-top: 1px solid var(--color-surface-5);">
|
||||
<td style="padding: 0.5rem 1rem; font-weight: 600; font-size: 0.875rem;">{{ size }}</td>
|
||||
<td v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center;">
|
||||
<ButtonStyled :size="size" :type="type" color="brand">
|
||||
<button>Button</button>
|
||||
</ButtonStyled>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const WithIcons: Story = {
|
||||
render: () => ({
|
||||
components: { ButtonStyled, DownloadIcon, HeartIcon, SettingsIcon },
|
||||
setup() {
|
||||
return { types }
|
||||
},
|
||||
template: /*html*/ `
|
||||
<div style="overflow-x: auto;">
|
||||
<table style="border-collapse: collapse; width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="padding: 0.5rem 1rem; text-align: left; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">Variant</th>
|
||||
<th v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">{{ type }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr style="border-top: 1px solid var(--color-surface-5);">
|
||||
<td style="padding: 0.5rem 1rem; font-weight: 600; font-size: 0.875rem;">Icon + text</td>
|
||||
<td v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center;">
|
||||
<ButtonStyled :type="type" color="brand">
|
||||
<button><DownloadIcon /> Download</button>
|
||||
</ButtonStyled>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="border-top: 1px solid var(--color-surface-5);">
|
||||
<td style="padding: 0.5rem 1rem; font-weight: 600; font-size: 0.875rem;">Icon only</td>
|
||||
<td v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center;">
|
||||
<ButtonStyled :type="type" color="brand" circular>
|
||||
<button><HeartIcon /></button>
|
||||
</ButtonStyled>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const Disabled: Story = {
|
||||
render: () => ({
|
||||
components: { ButtonStyled },
|
||||
setup() {
|
||||
return { types }
|
||||
},
|
||||
template: /*html*/ `
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;">
|
||||
<ButtonStyled v-for="type in types" :key="type" :type="type" color="brand">
|
||||
<button disabled>{{ type }}</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
|
||||
67
packages/ui/src/stories/modal/ShareModal.stories.ts
Normal file
67
packages/ui/src/stories/modal/ShareModal.stories.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
import type { StoryObj } from '@storybook/vue3-vite'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import ButtonStyled from '../../components/base/ButtonStyled.vue'
|
||||
import ShareModal from '../../components/modal/ShareModal.vue'
|
||||
|
||||
const meta = {
|
||||
title: 'Modal/ShareModal',
|
||||
component: ShareModal,
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof ShareModal>
|
||||
|
||||
export const LinkShare: Story = {
|
||||
args: {
|
||||
header: 'Share link',
|
||||
shareTitle: 'Modrinth',
|
||||
shareText: 'Check this out on Modrinth',
|
||||
link: true,
|
||||
},
|
||||
render: (args) => ({
|
||||
components: { ShareModal, ButtonStyled },
|
||||
setup() {
|
||||
const modalRef = ref<InstanceType<typeof ShareModal> | null>(null)
|
||||
const openModal = () => {
|
||||
modalRef.value?.show('https://modrinth.com')
|
||||
}
|
||||
return { args, modalRef, openModal }
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<ButtonStyled color="brand">
|
||||
<button @click="openModal">Open Link Share Modal</button>
|
||||
</ButtonStyled>
|
||||
<ShareModal ref="modalRef" v-bind="args" />
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const TextShare: Story = {
|
||||
args: {
|
||||
header: 'Share text',
|
||||
shareTitle: 'Modrinth',
|
||||
shareText: 'Invite your friends to try Modrinth.',
|
||||
link: false,
|
||||
},
|
||||
render: (args) => ({
|
||||
components: { ShareModal, ButtonStyled },
|
||||
setup() {
|
||||
const modalRef = ref<InstanceType<typeof ShareModal> | null>(null)
|
||||
const openModal = () => {
|
||||
modalRef.value?.show('https://modrinth.com')
|
||||
}
|
||||
return { args, modalRef, openModal }
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<ButtonStyled color="brand">
|
||||
<button @click="openModal">Open Text Share Modal</button>
|
||||
</ButtonStyled>
|
||||
<ShareModal ref="modalRef" v-bind="args" />
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
95
packages/ui/src/stories/modal/UploadProgressModal.stories.ts
Normal file
95
packages/ui/src/stories/modal/UploadProgressModal.stories.ts
Normal file
@@ -0,0 +1,95 @@
|
||||
import type { UploadHandle, UploadProgress } from '@modrinth/api-client'
|
||||
import type { StoryObj } from '@storybook/vue3-vite'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import ButtonStyled from '../../components/base/ButtonStyled.vue'
|
||||
import UploadProgressModal from '../../components/modal/UploadProgressModal.vue'
|
||||
|
||||
const meta = {
|
||||
title: 'Modal/UploadProgressModal',
|
||||
component: UploadProgressModal,
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof UploadProgressModal>
|
||||
|
||||
function createMockUploadHandle(totalBytes: number, durationMs: number): UploadHandle<void> {
|
||||
let progressCallback: ((progress: UploadProgress) => void) | null = null
|
||||
let cancelled = false
|
||||
|
||||
const promise = new Promise<void>((resolve, reject) => {
|
||||
const startTime = Date.now()
|
||||
const interval = setInterval(() => {
|
||||
if (cancelled) {
|
||||
clearInterval(interval)
|
||||
reject(new Error('Upload cancelled'))
|
||||
return
|
||||
}
|
||||
const elapsed = Date.now() - startTime
|
||||
const progress = Math.min(elapsed / durationMs, 1)
|
||||
const loaded = Math.round(totalBytes * progress)
|
||||
progressCallback?.({ loaded, total: totalBytes, progress })
|
||||
if (progress >= 1) {
|
||||
clearInterval(interval)
|
||||
resolve()
|
||||
}
|
||||
}, 50)
|
||||
})
|
||||
|
||||
const handle: UploadHandle<void> = {
|
||||
promise,
|
||||
onProgress(callback) {
|
||||
progressCallback = callback
|
||||
return handle
|
||||
},
|
||||
cancel() {
|
||||
cancelled = true
|
||||
},
|
||||
}
|
||||
|
||||
return handle
|
||||
}
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => ({
|
||||
components: { UploadProgressModal, ButtonStyled },
|
||||
setup() {
|
||||
const modalRef = ref<InstanceType<typeof UploadProgressModal> | null>(null)
|
||||
const startUpload = () => {
|
||||
const handle = createMockUploadHandle(50 * 1024 * 1024, 3000)
|
||||
modalRef.value?.track(handle)
|
||||
}
|
||||
return { modalRef, startUpload }
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<ButtonStyled color="brand">
|
||||
<button @click="startUpload">Upload 50MB file (3s)</button>
|
||||
</ButtonStyled>
|
||||
<UploadProgressModal ref="modalRef" />
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const LargeFile: Story = {
|
||||
render: () => ({
|
||||
components: { UploadProgressModal, ButtonStyled },
|
||||
setup() {
|
||||
const modalRef = ref<InstanceType<typeof UploadProgressModal> | null>(null)
|
||||
const startUpload = () => {
|
||||
const handle = createMockUploadHandle(500 * 1024 * 1024, 8000)
|
||||
modalRef.value?.track(handle)
|
||||
}
|
||||
return { modalRef, startUpload }
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<ButtonStyled color="brand">
|
||||
<button @click="startUpload">Upload 500MB file (8s)</button>
|
||||
</ButtonStyled>
|
||||
<UploadProgressModal ref="modalRef" />
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
94
packages/ui/src/stories/servers/EditServerIcon.stories.ts
Normal file
94
packages/ui/src/stories/servers/EditServerIcon.stories.ts
Normal file
@@ -0,0 +1,94 @@
|
||||
import type { Archon, UploadState } from '@modrinth/api-client'
|
||||
import type { Stats } from '@modrinth/utils'
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
|
||||
import EditServerIcon from '../../components/servers/edit-server-icon/EditServerIcon.vue'
|
||||
import { provideModrinthServerContext } from '../../providers'
|
||||
import type { ModrinthServerContext } from '../../providers/server-context'
|
||||
|
||||
const meta = {
|
||||
title: 'Servers/EditServerIcon',
|
||||
component: EditServerIcon,
|
||||
parameters: {
|
||||
layout: 'padded',
|
||||
},
|
||||
decorators: [
|
||||
(story) => ({
|
||||
components: { story },
|
||||
setup() {
|
||||
const server = ref({
|
||||
server_id: 'story-server-id',
|
||||
upstream: null,
|
||||
} as Archon.Servers.v0.Server)
|
||||
|
||||
const stats = ref<Stats>({
|
||||
current: {
|
||||
cpu_percent: 0,
|
||||
ram_usage_bytes: 0,
|
||||
ram_total_bytes: 1,
|
||||
storage_usage_bytes: 0,
|
||||
storage_total_bytes: 0,
|
||||
},
|
||||
past: {
|
||||
cpu_percent: 0,
|
||||
ram_usage_bytes: 0,
|
||||
ram_total_bytes: 1,
|
||||
storage_usage_bytes: 0,
|
||||
storage_total_bytes: 0,
|
||||
},
|
||||
graph: {
|
||||
cpu: [],
|
||||
ram: [],
|
||||
},
|
||||
})
|
||||
|
||||
const uploadState = ref<UploadState>({
|
||||
isUploading: false,
|
||||
currentFileName: null,
|
||||
currentFileProgress: 0,
|
||||
uploadedBytes: 0,
|
||||
totalBytes: 0,
|
||||
completedFiles: 0,
|
||||
totalFiles: 0,
|
||||
})
|
||||
|
||||
const serverContext: ModrinthServerContext = {
|
||||
get serverId() {
|
||||
return 'story-server-id'
|
||||
},
|
||||
worldId: ref(null),
|
||||
server,
|
||||
isConnected: ref(true),
|
||||
isWsAuthIncorrect: ref(false),
|
||||
powerState: ref('running'),
|
||||
powerStateDetails: ref(undefined),
|
||||
isServerRunning: computed(() => true),
|
||||
stats,
|
||||
uptimeSeconds: ref(0),
|
||||
backupsState: reactive(new Map()),
|
||||
markBackupCancelled: () => {},
|
||||
isSyncingContent: ref(false),
|
||||
busyReasons: computed(() => []),
|
||||
fsAuth: ref(null),
|
||||
fsOps: ref<Archon.Websocket.v0.FilesystemOperation[]>([]),
|
||||
fsQueuedOps: ref<Archon.Websocket.v0.QueuedFilesystemOp[]>([]),
|
||||
refreshFsAuth: async () => {},
|
||||
uploadState,
|
||||
cancelUpload: ref(null),
|
||||
activeOperations: computed(() => []),
|
||||
dismissOperation: async () => {},
|
||||
}
|
||||
|
||||
provideModrinthServerContext(serverContext)
|
||||
},
|
||||
template: '<div style="max-width: 320px;"><story /></div>',
|
||||
}),
|
||||
],
|
||||
} satisfies Meta<typeof EditServerIcon>
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {}
|
||||
@@ -0,0 +1,85 @@
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
|
||||
import MedalServerListing from '../../components/servers/marketing/MedalServerListing.vue'
|
||||
|
||||
const baseMedalServer = {
|
||||
server_id: '8759b459-6f9e-49e0-aa70-dfab5b2abb2f',
|
||||
name: 'Medal Trial Server',
|
||||
status: 'available',
|
||||
game: 'Minecraft',
|
||||
mc_version: '1.21.5',
|
||||
loader: 'Fabric',
|
||||
loader_version: '0.16.14',
|
||||
net: {
|
||||
ip: '203.0.113.42',
|
||||
port: 25565,
|
||||
domain: 'play',
|
||||
},
|
||||
medal_expires: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
} as const
|
||||
|
||||
const meta = {
|
||||
title: 'Servers/MedalServerListing',
|
||||
component: MedalServerListing,
|
||||
parameters: {
|
||||
layout: 'padded',
|
||||
},
|
||||
decorators: [
|
||||
(story) => ({
|
||||
components: { story },
|
||||
template: '<div style="max-width: 920px;"><story /></div>',
|
||||
}),
|
||||
],
|
||||
} satisfies Meta<typeof MedalServerListing>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
...baseMedalServer,
|
||||
},
|
||||
}
|
||||
|
||||
export const ConfiguringNewServer: Story = {
|
||||
args: {
|
||||
...baseMedalServer,
|
||||
name: 'New Medal Server',
|
||||
flows: { intro: true },
|
||||
},
|
||||
}
|
||||
|
||||
export const SuspendedUpgrading: Story = {
|
||||
args: {
|
||||
...baseMedalServer,
|
||||
name: 'Upgrading Server',
|
||||
status: 'suspended',
|
||||
suspension_reason: 'upgrading',
|
||||
},
|
||||
}
|
||||
|
||||
export const SuspendedCancelled: Story = {
|
||||
args: {
|
||||
...baseMedalServer,
|
||||
name: 'Expired Trial Server',
|
||||
status: 'suspended',
|
||||
suspension_reason: 'cancelled',
|
||||
},
|
||||
}
|
||||
|
||||
export const SuspendedWithReason: Story = {
|
||||
args: {
|
||||
...baseMedalServer,
|
||||
name: 'Suspended Server',
|
||||
status: 'suspended',
|
||||
suspension_reason: 'moderated',
|
||||
},
|
||||
}
|
||||
|
||||
export const SuspendedGeneric: Story = {
|
||||
args: {
|
||||
...baseMedalServer,
|
||||
name: 'Suspended Server',
|
||||
status: 'suspended',
|
||||
},
|
||||
}
|
||||
37
packages/ui/src/stories/servers/SaveBanner.stories.ts
Normal file
37
packages/ui/src/stories/servers/SaveBanner.stories.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
|
||||
import SaveBanner from '../../components/servers/SaveBanner.vue'
|
||||
|
||||
const meta = {
|
||||
title: 'Servers/SaveBanner',
|
||||
component: SaveBanner,
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
args: {
|
||||
isVisible: true,
|
||||
isUpdating: false,
|
||||
restart: false,
|
||||
serverId: 'server_123',
|
||||
save: () => {},
|
||||
reset: () => {},
|
||||
},
|
||||
} satisfies Meta<typeof SaveBanner>
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {}
|
||||
|
||||
export const Saving: Story = {
|
||||
args: {
|
||||
isUpdating: true,
|
||||
},
|
||||
}
|
||||
|
||||
export const WithRestart: Story = {
|
||||
args: {
|
||||
restart: true,
|
||||
},
|
||||
}
|
||||
16
packages/ui/src/stories/servers/ServerListEmpty.stories.ts
Normal file
16
packages/ui/src/stories/servers/ServerListEmpty.stories.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
|
||||
import ServerListEmpty from '../../components/servers/server-list-empty/ServerListEmpty.vue'
|
||||
|
||||
const meta = {
|
||||
title: 'Servers/ServerListEmpty',
|
||||
component: ServerListEmpty,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
} satisfies Meta<typeof ServerListEmpty>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {}
|
||||
158
packages/ui/src/stories/servers/ServerListing.stories.ts
Normal file
158
packages/ui/src/stories/servers/ServerListing.stories.ts
Normal file
@@ -0,0 +1,158 @@
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
|
||||
import ServerListing from '../../components/servers/ServerListing.vue'
|
||||
|
||||
const baseServer = {
|
||||
server_id: '8759b459-6f9e-49e0-aa70-dfab5b2abb2f',
|
||||
name: 'Survival SMP',
|
||||
status: 'available',
|
||||
game: 'Minecraft',
|
||||
mc_version: '1.21.5',
|
||||
loader: 'Fabric',
|
||||
loader_version: '0.16.14',
|
||||
net: {
|
||||
ip: '203.0.113.42',
|
||||
port: 25565,
|
||||
domain: 'play',
|
||||
},
|
||||
} as const
|
||||
|
||||
const pendingChange = {
|
||||
planSize: 'Performance 8 GB',
|
||||
cpu: 4,
|
||||
cpuBurst: 6,
|
||||
ramGb: 8,
|
||||
storageGb: 80,
|
||||
date: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
verb: 'Upgrade',
|
||||
} as const
|
||||
|
||||
const meta = {
|
||||
title: 'Servers/ServerListing',
|
||||
component: ServerListing,
|
||||
parameters: {
|
||||
layout: 'padded',
|
||||
},
|
||||
decorators: [
|
||||
(story) => ({
|
||||
components: { story },
|
||||
template: '<div style="max-width: 920px;"><story /></div>',
|
||||
}),
|
||||
],
|
||||
} satisfies Meta<typeof ServerListing>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
},
|
||||
}
|
||||
|
||||
export const ConfiguringNewServer: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
name: 'Fresh Vanilla World',
|
||||
status: 'installing',
|
||||
flows: { intro: true },
|
||||
loader: 'Vanilla',
|
||||
loader_version: null,
|
||||
},
|
||||
}
|
||||
|
||||
export const WithPendingDowngrade: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
name: 'Competitive UHC',
|
||||
pendingChange: {
|
||||
...pendingChange,
|
||||
planSize: 'Small',
|
||||
ramGb: 4,
|
||||
storageGb: 40,
|
||||
cpuBurst: 4,
|
||||
verb: 'Downgrade',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const SuspendedUpgrading: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
name: 'Creative Build Team',
|
||||
status: 'suspended',
|
||||
suspension_reason: 'upgrading',
|
||||
},
|
||||
}
|
||||
|
||||
export const Provisioning: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
name: 'My New Server',
|
||||
isProvisioning: true,
|
||||
},
|
||||
}
|
||||
|
||||
export const SetToCancel: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
name: 'Survival SMP',
|
||||
cancellationDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
onResubscribe: () => alert('Resubscribe clicked'),
|
||||
onDownloadBackup: () => alert('Download backup clicked'),
|
||||
},
|
||||
}
|
||||
|
||||
export const SuspendedCancelled: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
name: 'Old Event Server',
|
||||
status: 'suspended',
|
||||
suspension_reason: 'cancelled',
|
||||
cancellationDate: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
onResubscribe: () => alert('Resubscribe clicked'),
|
||||
onDownloadBackup: () => alert('Download backup clicked'),
|
||||
},
|
||||
}
|
||||
|
||||
export const SuspendedCancelledFilesExpired: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
onDownloadBackup: null,
|
||||
name: 'Old Event Server',
|
||||
status: 'suspended',
|
||||
suspension_reason: 'cancelled',
|
||||
cancellationDate: new Date(2025, 1, 17).toISOString(),
|
||||
onResubscribe: () => alert('Resubscribe clicked'),
|
||||
},
|
||||
}
|
||||
|
||||
export const SuspendedPaymentFailed: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
name: 'Minigames Network',
|
||||
status: 'suspended',
|
||||
suspension_reason: 'paymentfailed',
|
||||
cancellationDate: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
onDownloadBackup: () => alert('Download backup clicked'),
|
||||
},
|
||||
}
|
||||
|
||||
export const SuspendedModerated: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
name: 'Banned Server',
|
||||
status: 'suspended',
|
||||
suspension_reason: 'moderated',
|
||||
onDownloadBackup: () => alert('Download backup clicked'),
|
||||
},
|
||||
}
|
||||
|
||||
export const SuspendedGeneric: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
name: 'Server with other suspension reason',
|
||||
status: 'suspended',
|
||||
onDownloadBackup: () => alert('Download backup clicked'),
|
||||
},
|
||||
}
|
||||
Reference in New Issue
Block a user