storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.08k stars 9.25k forks source link

[Bug]: Storybook cant handle imported types in components, svelte #27238

Open alemNative opened 4 months ago

alemNative commented 4 months ago

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'`

xeho91 commented 4 months ago

I don't have the sandbox, but could you verify if one of these changes will help?

- import {headerClassTypeArr,headerTypeArr} from "../types";
+ import type {headerClassTypeArr,headerTypeArr} from "../types"; 

Or:

- import {headerClassTypeArr,headerTypeArr} from "../types"; 
+ import type {headerClassTypeArr,headerTypeArr} from "../types.js";