Files
ComfyUI_frontend/src/components/install/HardwareOption.stories.ts
filtered df3060b8e2 [Backport 1.27] Rework desktop install / startup UX (#5292)
## Summary

Backporting #5292 to core/1.27 branch to fix desktop installation and
startup UX issues.

## What's Changed

This is a manual backport of commit
b0f81b2245 which reworks the desktop
install and startup user experience.

### Merge Conflicts Resolved

The automatic backport failed with conflicts in:
- `src/components/install/GpuPicker.vue` - Resolved by keeping the
changes made in the PR
- `src/components/install/MirrorsConfiguration.vue` - Resolved by
keeping the file deletion from the PR
- `src/components/install/mirror/MirrorItem.vue` - Resolved by
combination merge (all changes)
- `src/views/ServerStartView.vue` - Resolved by combination merge (all
changes)

## Original PR

- PR: #5292 
- Commit: b0f81b2245
- Title: Rework desktop install / startup UX

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5756-Backport-1-27-Rework-desktop-install-startup-UX-5292-2786d73d365081668f4dc16694c51185)
by [Unito](https://www.unito.io)
2025-09-24 17:12:35 -05:00

74 lines
1.6 KiB
TypeScript

// eslint-disable-next-line storybook/no-renderer-packages
import type { Meta, StoryObj } from '@storybook/vue3'
import HardwareOption from './HardwareOption.vue'
const meta: Meta<typeof HardwareOption> = {
title: 'Desktop/Components/HardwareOption',
component: HardwareOption,
parameters: {
layout: 'centered',
backgrounds: {
default: 'dark',
values: [{ name: 'dark', value: '#1a1a1a' }]
}
},
argTypes: {
selected: { control: 'boolean' },
imagePath: { control: 'text' },
placeholderText: { control: 'text' },
subtitle: { control: 'text' }
}
}
export default meta
type Story = StoryObj<typeof meta>
export const AppleMetalSelected: Story = {
args: {
imagePath: '/assets/images/apple-mps-logo.png',
placeholderText: 'Apple Metal',
subtitle: 'Apple Metal',
value: 'mps',
selected: true
}
}
export const AppleMetalUnselected: Story = {
args: {
imagePath: '/assets/images/apple-mps-logo.png',
placeholderText: 'Apple Metal',
subtitle: 'Apple Metal',
value: 'mps',
selected: false
}
}
export const CPUOption: Story = {
args: {
placeholderText: 'CPU',
subtitle: 'Subtitle',
value: 'cpu',
selected: false
}
}
export const ManualInstall: Story = {
args: {
placeholderText: 'Manual Install',
subtitle: 'Subtitle',
value: 'unsupported',
selected: false
}
}
export const NvidiaSelected: Story = {
args: {
imagePath: '/assets/images/nvidia-logo-square.jpg',
placeholderText: 'NVIDIA',
subtitle: 'NVIDIA',
value: 'nvidia',
selected: true
}
}