Types: Fix type implementation for CompatibleString

[sni-J]

Fix issue from #27088 (which closed #23232)

What I did

Thanks to @valentinpalkovic, previous issue(#23232) is resolved in latest release 8.1.1,
but sadly issue didn't resolved.

Type 'string' is not assignable to type 'FrameworkName'

storybook/code/lib/types/src/modules/core-common.ts

Lines 575 to 585 in ba69532

	/**
	* Given a generic string type, returns that type but ensures that a string in general is compatible with it.
	* We use this construct to ensure that IDEs can provide better autocompletion for string types.
	* This is, for example, needed for main config fields, where we want to ensure that the user can provide
	* a custom string, but also a string that is compatible with the type.
	* @example
	* type Framework = CompatibleString<'@storybook/nextjs'>
	* const framework: Framework = '@storybook/nextjs'; // valid and will be autocompleted
	* const framework: Framework = path.dirname(require.resolve(path.join("@storybook/nextjs", "package.json"))) // valid
	*/
	export type CompatibleString<T extends string> = T | (string & Record<string, never>);

Looks like T | (string & Record<string, never>) instead of T | (string & {}) does not correctly do the trick, so checked code below on TS Playground with TS 5.4.5.

const emptyObjectTest: "bar" | (string & {}) = "foo";

// Type '"foo"' is not assignable to type '(string & Record<string, never>) | "bar"'.
const recordNeverTest: "bar" | (string & Record<string, never>) = "foo";

// ---

type EmptyObjectTest = "foo" extends ("bar" | (string & {})) ? "true" : "false"; // "true"
type RecordNeverTest = "foo" extends ("bar" | (string & Record<string, never>)) ? "true" : "false"; // "false"

Since current implementation cannot solve problem, I updated CompatibleString to T | (string & {}).

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

1. Run a sandbox yarn start
2. Define the framework field or framework.name field as a random string. This should be valid.
3. Make sure that @storybook/react-vite (or specific framework that sandbox is based on) gets autocompleted or suggested by the IDE

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 739cf3b. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build -c production --parallel=3

---

Sent with 💌 from NxCloud.

[valentinpalkovic]

LGTM! Thank you for your contribution. Indeed, my first attempt was to use string & {}, but ESLint wasn't really happy about it. Strangely, I could satisfy TypeScript with string & Record<string, never>. Potentially, not all TypeScript versions will understand this.

[sni-J]

@valentinpalkovic
Replying on closed PR might not be appropriate but just found something while digging on another issue from my own project so leaving it here for sharing.

Not sure exactly how 'ESLint wasn't really happy' in your case, but seems likely be related to @typescript-eslint/ban-types I think...?

According to typescript-eslint/typescript-eslint#6486, they are suggesting to use NonNullable<unknown> instead of {} for any non-nullish value, which is exactly what this fix wants (intersect string with any non-nullish value).

However, this works only on TS >= 4.8, tested on 4.7.4 in TS Playground and fail to autocomplete, since this change made NonNullable<unknown> equals to {}.

Enforcing minimum TS version might not be ideal to storybook or need extra discussion so I won't create PR on NonNullable<unknown> replacement, but hope this can help you and your team a little bit.

[valentinpalkovic]

Thanks for letting us know!