fix(storybook): add staticDirs object schema

[leon]

Storybook has renamed staticDir to staticDirs.

The have also added a way to specify an object:

module.exports = {
  staticDirs: [{ from: '../my-custom-assets/images', to: '/assets' }],
};

This PR adds the schema for staticDirs, and x-deprecates staticDir.
I don't know if we should do this, because they just fallback if they find staticDir

https://github.com/storybookjs/storybook/blob/92b23c080d03433765cbc7a60553d036a612a501/lib/core-server/src/utils/server-statics.ts#L30

Background

I needed to copy multiple directories and rename them.
the current string[] makes this impossible.

Questions

• Should we deprecate staticDir?

[nx-cloud]

☁️ Nx Cloud Report

CI ran the following commands for commit 85491cf. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 7 targets

• nx affected --target=build --base=6c9995939deb53bab3850060467d0c4986a802d2 --head=85491cfc0ffb9ce2377b32c8ea290b9bef49ebe7 --parallel=3
• nx affected --target=e2e --base=6c9995939deb53bab3850060467d0c4986a802d2 --head=85491cfc0ffb9ce2377b32c8ea290b9bef49ebe7 --exclude=e2e-detox,e2e-js,e2e-next,e2e-workspace-create,e2e-workspace-integrations,e2e-workspace-core,e2e-react,e2e-web,e2e-angular-extensions,e2e-angular-core,e2e-cli,e2e-nx-plugin,e2e-cypress,e2e-node,e2e-linter,e2e-jest,e2e-a...
• nx affected --target=e2e --base=6c9995939deb53bab3850060467d0c4986a802d2 --head=85491cfc0ffb9ce2377b32c8ea290b9bef49ebe7 --exclude=e2e-storybook,e2e-react-native,e2e-detox --parallel=1
• nx affected --target=lint --base=6c9995939deb53bab3850060467d0c4986a802d2 --head=85491cfc0ffb9ce2377b32c8ea290b9bef49ebe7 --parallel=3
• nx affected --target=test --base=6c9995939deb53bab3850060467d0c4986a802d2 --head=85491cfc0ffb9ce2377b32c8ea290b9bef49ebe7 --parallel=1
• nx build typedoc-theme
• nx run-many --target=build --all --parallel=8 --exclude=docs,nx-dev-data-access-documents,nx-dev-e2e,nx-dev,nx-dev-feature-analytics,nx-dev-feature-conf,nx-dev-feature-doc-viewer,nx-dev-feature-search,nx-dev-feature-storage,nx-dev-feature-versions-and-flavors,nx-dev-ui-commands,nx-dev-ui-common,nx-dev-ui-home,nx-dev-ui-member-card,nx-dev-ui-sponsor...

---

Sent with 💌 from NxCloud.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/nrwl/nx-dev/BtuHZKe3uGpZ1eNgQoEthqUtnQsj
✅ Preview: https://nx-dev-git-fork-leon-fix-storybook-static-dir-objec-1a60a9-nrwl.vercel.app

[ChazUK]

Would be nice if this went in as they have added features that would be nice to use in the storybook executor

[mandarini]

Hi all! @leon sorry for some reason I just saw this. Can you please rebase and push again, and I will approve!

[leon]

@mandarini done :)

[ChazUK]

@leon I think the staticDirs can also take a plain string instead of the { from: '', to: ''} pattern. https://storybook.js.org/docs/react/configure/images-and-assets#serving-static-files-via-storybook-configuration

[leon]

@ChazUK Yes, this is accounted for by having the "oneOf" here
https://github.com/leon/nx/blob/fix/storybook-static-dir-object-schema/packages/storybook/src/executors/storybook/schema.json#L166

[ChazUK]

My bad, missed that line, thank you!

[ChazUK]

@mandarini I've noticed the build has not passed, will this effect the auto-merge?

[leon]

@mandarini I don't know why my PR didn't want to build.
I tried pushing to the branch to trigger a new build, but now it says the auto merge has been disabled.
so you will have to have a look at it :)

let me know if you want me to do something.

[leon]

Yeey 🥳🙌

[iamrommel]

This thing breaks my storybook. The storybooks even encourage the use of main.js for staticDirs and deprecated the CLI

Currently I'm using the main.js for my staticDirs, but it got conflicts with the project.json storybook config

my project.json config has not used any staticDir config

[mandarini]

Ooops! Thanks @iamrommel ! @leon do you want to look into this? Or should I?

[leon]

@mandarini @iamrommel

When I did the PR it was only to fix that you could not pass along multiple strings via the nx storybook plugin.

It's up to you to choose where you want to add the staticDirs setting.

the reason for nx having the option in their config, is so you can have multiple configurations and setup different staticDirs depending on stage, prod environments.

but I generally think it's better to keep it as close to the authors standard as possible, because their documentation is often better kept.

So to your problem.
just choose where you want to add it and remove it from the other place and you will be fine 👍🏻

[iamrommel]

I chose to add it on the main.js, and as you can see from the project.json (as shown from the previous image), there is nothing there defined about staticDirs, but still I have issues. It was working fine on 13.8.5 and not on 13.8.7 *Rommel C. Manalo*

…

On Fri, Mar 11, 2022 at 10:15 PM Leon Radley ***@***.***> wrote: @mandarini <https://github.com/mandarini> @iamrommel <https://github.com/iamrommel> When I did the PR it was only to fix that you could not pass along multiple strings via the nx storybook plugin. It's up to you to choose where you want to add the staticDirs setting. the reason for nx having the option in their config, is so you can have multiple configurations and setup different staticDirs depending on stage, prod environments. but I generally think it's better to keep it as close to the authors standard as possible, because their documentation is often better kept. So to your problem. just choose where you want to add it and remove it from the other place and you will be fine 👍🏻 — Reply to this email directly, view it on GitHub <#8885 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABLI4NX6TKQOFWNTWIX4ITU7NIRVANCNFSM5NXO4H6Q> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[vrady]

@leon

The same happens for me.
Property staticDir is always empty array
So storybook checks for deprecated and new properties from config, and deprecated field always return true in this if statement (empty array is not false)

When I trying to pass null in project.json for deprecated field, the executor pass default value (empty array)

So its impossible to use not deprecated filed staticDirs, cause deprecated field staticDir always return true in if statement

Please fix it or just remove default value from $schema for deprecated field

[github-actions]

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.