Unless you have specific needs from storybook, I'd say it's easier to just use https://github.com/cjohansen/portfolio 🙂

what is your setup? kinda hard to comment without knowing what you did

shadow-cljs.edn

{:deps true

 :http {:port 9633}
 :nrepl {:port 4005}

 :builds
 {:stories {:target     :npm-module
            :entries    [acme.storybook.button.stories
                         acme.storybook.test.stories]
            :output-dir "stories-output-js"
            :devtools {:enabled false}}
  :app
  {:target          :browser
   :output-dir      "resources/public/js"
   :asset-path      "js"
   :modules         {:app {:entries [acme.cljs.core]}}}}}

"devDependencies": {
  "@babel/preset-env": "7.23.7",
  "@babel/preset-react": "7.23.3",
  "@babel/preset-typescript": "^7.23.3",
  "@storybook/react": "7.6.7",
  "@storybook/react-webpack5": "7.6.7",
  "shadow-cljs": "2.26.2",
  "storybook": "7.6.7"
}

{
  "sourceType": "unambiguous",
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": 100,
          "safari": 15,
          "firefox": 91
        },
        "modules": "commonjs"
      }
    ],
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": []
}

module.exports = {
    stories: ["../stories-output-js/**/*.stories.js"],

    framework: {
        name: "@storybook/react-webpack5",
        options: {}
    },

    docs: {
        autodocs: true
    }
};

and the cljs code?

looks good so far

(ns acme.storybook.test.stories
  (:require [reagent.core :as r]))

(def button [:button.button "My button"])

(def ^:export default
  #js {:title     "LOL"
       :component (r/reactify-component button)})

(defn ^:export HelloWorldHeader []
  (r/as-element button))

looks good. what does the stories-output-js/acme.storybook.test.stories.js look like? I suspect there is a munging problem

there should be a exports.default = ... but that might be a exports.default$ = ...

var $CLJS = require("./cljs_env");
var $jscomp = $CLJS.$jscomp;
var COMPILED = false;
require("./cljs.core.js");
require("./reagent.core.js");
var cognitect=$CLJS.cognitect || ($CLJS.cognitect = {});
var cljc=$CLJS.cljc || ($CLJS.cljc = {});
var tick=$CLJS.tick || ($CLJS.tick = {});
var re_frame=$CLJS.re_frame || ($CLJS.re_frame = {});
var module$shadow_js_shim_module$react=$CLJS.module$shadow_js_shim_module$react || ($CLJS.module$shadow_js_shim_module$react = {});
var clojure=$CLJS.clojure || ($CLJS.clojure = {});
var devtools=$CLJS.devtools || ($CLJS.devtools = {});
var cljs=$CLJS.cljs || ($CLJS.cljs = {});
var time_literals=$CLJS.time_literals || ($CLJS.time_literals = {});
var bec_cljs_common=$CLJS.bec_cljs_common || ($CLJS.bec_cljs_common = {});
var ajax=$CLJS.ajax || ($CLJS.ajax = {});
var java=$CLJS.java || ($CLJS.java = {});
var shadow=$CLJS.shadow || ($CLJS.shadow = {});
var module$shadow_js_shim_module$$formkit$auto_animate$react=$CLJS.module$shadow_js_shim_module$$formkit$auto_animate$react || ($CLJS.module$shadow_js_shim_module$$formkit$auto_animate$react = {});
var goog=$CLJS.goog || ($CLJS.goog = {});
var reagent=$CLJS.reagent || ($CLJS.reagent = {});
var module$shadow_js_shim_module$$js_joda$core=$CLJS.module$shadow_js_shim_module$$js_joda$core || ($CLJS.module$shadow_js_shim_module$$js_joda$core = {});
var lambdaisland=$CLJS.lambdaisland || ($CLJS.lambdaisland = {});
var taoensso=$CLJS.taoensso || ($CLJS.taoensso = {});
var com=$ || ($ = {});
var acme=$CLJS.acme || ($CLJS.acme = {});

$CLJS.SHADOW_ENV.setLoaded("acme.storybook.test.stories.js");

goog.provide('acme.storybook.test.stories');
acme.storybook.test.stories.button = new cljs.core.PersistentVector(null, 2, 5, cljs.core.PersistentVector.EMPTY_NODE, [new cljs.core.Keyword(null,"button.button","button.button",1464242525),"My button"], null);
acme.storybook.test.stories.default$ = ({"title": "LOL", "component": reagent.core.reactify_component.cljs$core$IFn$_invoke$arity$1(acme.storybook.test.stories.button)});
acme.storybook.test.stories.HelloWorldHeader = (function acme$storybook$test$stories$HelloWorldHeader(){
    return reagent.core.as_element.cljs$core$IFn$_invoke$arity$1(acme.storybook.test.stories.button);
});
Object.defineProperty(module.exports, "default", { enumerable: true, get: function() { return acme.storybook.test.stories.default$; } });
Object.defineProperty(module.exports, "HelloWorldHeader", { enumerable: true, get: function() { return acme.storybook.test.stories.HelloWorldHeader; } });
//# sourceMappingURL=acme.storybook.test.stories.js.map

Not sure if this was the best but that is the contents of storybook.test.stories

ah right that is a dev file

so

Object.defineProperty(module.exports, "default", { enumerable: true, get: function() { return acme.storybook.test.stories.default$; } });

looks fine to me but I suspect storybook is now doing some kind of source processing, instead of just runtime things it used to do

and it might not recognize that maybe?

been a while since I looked at storybook, but it all looks good to me

I think so. This post may give some hints to that: https://github.com/storybookjs/storybook/issues/21703

// This works 👇
// const meta = {
//   title: 'Example/Button',
//   component: Button,
//   tags: ['autodocs'],
//   argTypes: {
//     backgroundColor: { control: 'color' },
//   },
// };

// This doesn't 👇
const meta = getMeta('Button', Button);

export default meta;

> SB7 statically analyzes the story files for performance reasons and we can't statically analyze functions.

yep thats what I suspected

Any workaround? Or just go back to storybook v6?

maybe https://github.com/storybookjs/storybook/issues/21703#issuecomment-1517276207 ?

@storybook/cli v7.6.7

WARN storyStoreV6 is deprecated, please migrate to storyStoreV7 instead.
WARN - Refer to the migration guide at 
info => Starting manager..
info => Starting preview..
info Using Babel compiler
info => Using implicit CSS loaders
info => Using default Webpack5 setup
 [webpack-dev-middleware] wait until bundle finished
WARN export 'default' (imported as 'previewAnnotations') was not found in '/home/dev/src/mono/bec-core-client/node_modules/@storybook/react/dist/entry-preview-docs.mjs' (possible exports: applyDecorators, argTypesEnhancers, decorators, parameters)
WARN export 'default' (imported as 'previewAnnotations') was not found in '/home/dev/src/mono/bec-core-client/node_modules/@storybook/react/dist/entry-preview.mjs' (possible exports: parameters, render, renderToCanvas)