[Bug]: Storybook 7, Lit, Vite - can't write stories in TS

[alexgagnon]

Describe the bug

With a basic Vite, Lit, and SB7 install (with @storybook/web-components-vite), I can't seem to get TS stories to work. JS stories work just fine though. From a couple other issues with SB and Lit, it appears it's an issue with a mismatch in decorators between babel and typescript. Based on what I've read I've tried to add in the Lit specific stuff for decorators (https://lit.dev/docs/components/decorators/), but it seems it's getting lost on it's way through Vite/SB.

Here's a version using an extended .babelrc file under .storybook/, from npx sb@next babelrc

{
  "sourceType": "unambiguous",
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": 100
        }
      }
    ],
    "@babel/preset-typescript"
  ],
  "assumptions": {
    "setPublicClassFields": true
  },
  "plugins": [
    [
      "@babel/plugin-transform-typescript",
      {
        "allowDeclareFields": true
      }
    ],
    [
      "@babel/plugin-proposal-decorators",
      {
        "version": "2018-09",
        "decoratorsBeforeExport": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties"
    ]
  ]
}

and my main.js file

/** @type { import('@storybook/web-components-vite').StorybookConfig } */
const config = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  framework: {
    name: "@storybook/web-components-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  features: {
    babelModeV7: true
  }
};
export default config;

and my tsconfig.json file

{
    "compilerOptions": {
      "module": "ESNext",
      "lib": ["ES2020", "DOM", "DOM.Iterable"],
      "target": "ES5",
      "declaration": true,
      "emitDeclarationOnly": true,
      "outDir": "./out-tsc",
      "strict": true,
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "noImplicitReturns": true,
      "noFallthroughCasesInSwitch": true,
      "moduleResolution": "Node",
      "isolatedModules": true,
      "allowSyntheticDefaultImports": true,
      "experimentalDecorators": true,
      "useDefineForClassFields": false,
      "forceConsistentCasingInFileNames": true,
      "skipLibCheck": true
    },
    "include": ["src/**/*.ts"],
    "references": [{ "path": "./tsconfig.node.json" }]
  }

the addition vite.config.js and tsconfig.node.json are the same as output from the lit-vite template.

To Reproduce

The sandbox command doesn't really work for this case. The output from the lit-vite template includes stories for the basic lit-html functions, but not the my-element.ts component which contains the decorators

System

System:
    OS: Linux 5.10 Ubuntu 20.04.5 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    npm: 9.3.1 - ~/.nvm/versions/node/v18.13.0/bin/npm

Additional context

No response