adorthecool/pages
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

devex: storybook for UI Package (#4984)

Browse Source 
* 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>
This commit is contained in:
Truman Gao
2026-01-01 16:32:58 -08:00
committed by GitHub
parent 477d77cdc1
commit daf804947c
65 changed files with 5526 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
packages/ui/src/stories/base/ProgressBar.stories.ts Normal file
View File

@@ -0,0 +1,73 @@
import type { Meta, StoryObj } from '@storybook/vue3-vite'
import ProgressBar from '../../components/base/ProgressBar.vue'
const meta = {
title: 'Base/ProgressBar',
component: ProgressBar,
} satisfies Meta<typeof ProgressBar>
export default meta
type Story = StoryObj<typeof meta>
export const Default: Story = {
args: {
progress: 0.5,
},
}
export const WithLabel: Story = {
args: {
progress: 0.75,
label: 'Uploading...',
showProgress: true,
},
}
export const AllColors: StoryObj = {
render: () => ({
components: { ProgressBar },
template: /*html*/ `
<div style="display: flex; flex-direction: column; gap: 1rem;">
<ProgressBar :progress="0.6" color="brand" label="Brand" />
<ProgressBar :progress="0.6" color="green" label="Green" />
<ProgressBar :progress="0.6" color="red" label="Red" />
<ProgressBar :progress="0.6" color="orange" label="Orange" />
<ProgressBar :progress="0.6" color="blue" label="Blue" />
<ProgressBar :progress="0.6" color="purple" label="Purple" />
<ProgressBar :progress="0.6" color="gray" label="Gray" />
</div>
`,
}),
}
export const Striped: Story = {
args: {
progress: 0.5,
striped: true,
},
}
export const AllStripedColors: StoryObj = {
render: () => ({
components: { ProgressBar },
template: /*html*/ `
<div style="display: flex; flex-direction: column; gap: 1rem;">
<ProgressBar :progress="0.6" color="brand" striped label="Brand Striped" />
<ProgressBar :progress="0.6" color="green" striped label="Green Striped" />
<ProgressBar :progress="0.6" color="red" striped label="Red Striped" />
<ProgressBar :progress="0.6" color="orange" striped label="Orange Striped" />
<ProgressBar :progress="0.6" color="blue" striped label="Blue Striped" />
<ProgressBar :progress="0.6" color="purple" striped label="Purple Striped" />
<ProgressBar :progress="0.6" color="gray" striped label="Gray Striped" />
</div>
`,
}),
}
export const FullWidth: Story = {
args: {
progress: 0.5,
fullWidth: true,
},
}