storybookjs/storybook
在 GitHub 查看[Bug]: Storybook cant handle imported types in components, svelte
Open
#27,238 创建于 2024年5月23日
bughelp wantedsveltetypescript
仓库指标
- Star
- (89,909 star)
- PR 合并指标
- (平均合并 7天 22小时) (30 天内合并 184 个 PR)
描述
Describe the bug
am tryin to have standartised options as type definition in my storybook. but even i not use this types in the stories, storybook has a problem when types are imported in the component.
tryin also full path imports and all types have the export flag
Reproduction link
localhost
Reproduction steps
see my additional content
System
Archlinux, Storybook 8.0.9 -> cant update to 8.1.2 because of my cli issue (see the other ticket:https://github.com/storybookjs/storybook/issues/27236)
Additional context
Komponent
import {headerClassType, headerType} from "../types";
export let header: headerType = 2
export let headerClass: headerClassType = "h"+header
export let classes: string = ""
export let overrideClasses: string = ""
export let value: string
</script>
<h1 class="atom-typography-title {headerClass} {classes} {overrideClasses}">{value}</h1>
Story
import type { Meta, StoryObj } from "@storybook/svelte";
import {headerClassTypeArr,headerTypeArr} from "../types";
const meta = {
// @ts-ignore
component: AtomTypographyTitle,
title: "Atoms/Typography/Title",
argTypes: {
// @ts-ignore
value: { control: "text" },
classes: { control: "text"},
overrideClasses: { control: "text"},
header: {
options: headerTypeArr,
control: "select",
},
headerClass: {
options: headerClassTypeArr,
control: "select" ,
},
},
} satisfies Meta<typeof AtomTypographyTitle>;
export default meta;
type Story = StoryObj<typeof meta>
export const H1: Story = {
args: {
header: 1,
headerClass: "h1",
value: "This is a Title"
},
}, H2: Story = {
args: {
...H1.args,
header: 2,
headerClass: "h2"
},
}, H3: Story = {
args: {
...H1.args,
header: 3,
headerClass: "h3"
},
}, H4: Story = {
args: {
...H1.args,
header: 4,
headerClass: "h4"
},
}, H5: Story = {
args: {
...H1.args,
header: 5,
headerClass: "h5"
},
}, H6: Story = {
args: {
...H1.args,
header: 6,
headerClass: "h6"
},
};
Types one folder up:
export type headerType = 1 | 2 | 3 | 4 | 5 | 6
export type headerClassType = "h1" | "h2" | "h3" | "h4" | "h5" |"h6"
export const headerTypeArr: headerType[] = [1, 2, 3, 4, 5, 6];
export const headerClassTypeArr: headerClassType[] = ["h1", "h2", "h3", "h4", "h5", "h6"];
Error:
The requested module 'http://localhost:6006/src/components/types.ts' doesn't provide an export named: `'headerClassType'`