src/@type/index.ts

declare global {
  export type Size = "xs" | "sm" | "md" | "lg" | "xl";
}

export {};

My Component’s index.d.ts

export type Variant = "static" | "standard" | "outlined";

export interface propTypes extends InputHTMLAttributes<HTMLInputElement> {
  size?: Size;
  variant?: Variant;

I Want to show Size Type like a “xs” “sm” “md” “lg” “xl”.
but storybook show “Size”

Variant show “static” “standard” “outlined” not “Variant”

.storybook/main.ts

import type { StorybookConfig } from "@storybook/nextjs";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@chromatic-com/storybook",
    "@storybook/addon-onboarding",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  typescript: {
    check: false,
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      // 👇 Default prop filter, which excludes props from node_modules
      propFilter: (prop) =>
        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
    },
  },
};
export default config;

How can type set as global be displayed as an Enum in storybook?

I try to this.. but not working….

add storybookConfig > typescript > compilerOptions

typescript: {
    check: false,
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      compilerOptions: {
        typeRoots: ["node_modules/@types", "src/@types"],
      },
      shouldExtractLiteralValuesFromEnum: true,
      // 👇 Default prop filter, which excludes props from node_modules
      propFilter: (prop) =>
        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
    },
  },