-
-
Notifications
You must be signed in to change notification settings - Fork 173
/
index.ts
120 lines (114 loc) · 3.22 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import { defaultColors } from 'histoire'
import type { Plugin } from 'histoire'
import type { StoryProps, Story, Variant, VariantProps } from '@histoire/shared'
import type { HstControlOption } from '@histoire/controls'
import type { SvelteComponentTyped } from 'svelte'
export function HstSvelte (): Plugin {
return {
name: '@histoire/plugin-svelte',
defaultConfig () {
return {
supportMatch: [
{
id: 'svelte',
patterns: ['**/*.svelte'],
pluginIds: ['svelte3'],
},
],
theme: {
colors: {
primary: defaultColors.orange,
},
logo: {
square: '@histoire/plugin-svelte/assets/histoire-svelte.svg',
light: '@histoire/plugin-svelte/assets/histoire-svelte-text.svg',
dark: '@histoire/plugin-svelte/assets/histoire-svelte-text.svg',
},
},
viteIgnorePlugins: [
'vite-plugin-svelte-kit',
],
}
},
supportPlugin: {
id: 'svelte3',
moduleName: '@histoire/plugin-svelte',
setupFn: 'setupSvelte3',
importStoryComponent: (file, index) => `import Comp${index} from ${JSON.stringify(file.moduleId)}`,
},
}
}
export type SvelteStorySetupHandler = (payload: {
app: any
story?: Story
variant?: Variant
}) => Promise<void> | void
export function defineSetupSvelte (handler: SvelteStorySetupHandler): SvelteStorySetupHandler {
return handler
}
export interface Hst {
// Main built-ins
Story: typeof SvelteComponentTyped<StoryProps>
Variant: typeof SvelteComponentTyped<VariantProps>
// Controls
Button: typeof SvelteComponentTyped
ButtonGroup: typeof SvelteComponentTyped<{
value: string
options: HstControlOption[]
title?: string
}>
Checkbox: typeof SvelteComponentTyped<{
value: boolean
title: string
}>
CheckboxList: typeof SvelteComponentTyped<{
value: string[]
options: HstControlOption[]
title?: string
}>
Text: typeof SvelteComponentTyped<{
value: string
title: string
}>
Number: typeof SvelteComponentTyped<{
value: number
title: string
}>
Slider: typeof SvelteComponentTyped<{
value: number
title: string
min: number
max: number
}>
TextArea: typeof SvelteComponentTyped<{
value: string
title: string
}>
Select: typeof SvelteComponentTyped<{
value: string
title: string
options: Record<string, any> | string[] | HstControlOption[]
}>
Radio: typeof SvelteComponentTyped<{
value: string
options: HstControlOption[]
title?: string
}>
Shades: typeof SvelteComponentTyped<{
shades: Record<string, any>
getName?: (key: string, color: string) => string
search?: string
}>
TokenList: typeof SvelteComponentTyped<{
tokens: Record<string, string | number | any[] | Record<string, any>>
getName?: (key: string, value: string | number | any[] | Record<string, any>) => string
}>
TokenGrid: typeof SvelteComponentTyped<{
tokens: Record<string, string | number | any[] | Record<string, any>>
getName?: (key: string, value: string | number | any[] | Record<string, any>) => string
colSize?: number
}>
CopyIcon: typeof SvelteComponentTyped<{
content: string
}>
}