Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Nov 24, 2025

Closes #33130

What I did

The ComponentDriven/csf repository is now inactive. Its README states the code lives in the Storybook monorepo. Updated documentation to replace broken GitHub repository links with internal documentation references using consistent markdown formatting.

Files updated:

  • docs/api/index.mdx - Removed link to "open standard" in API reference table
  • docs/api/csf/index.mdx - Removed link to "open standard" in CSF documentation intro
  • docs/get-started/why-storybook.mdx - Updated with internal markdown links:
    • "Stories" links to ../writing-stories/index.mdx
    • "Component Story Format" links to ../api/csf/index.mdx

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

No manual testing required. Documentation-only change updating links with internal references for better accessibility and maintainability.

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-storybook/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 publish.yml --field pr=<PR_NUMBER>

Original prompt

This section details on the original issue you should resolve

<issue_title>[Documentation]: Component Story Format Link Has Broken</issue_title>
<issue_description>### Describe the problem

check broken link in this section: This https://storybook.js.org/docs/api#stories

Context Paragraph: "Component Story Format (CSF) is the API for writing stories. It's an {{open standard - BROKEN LINK}} based on ES6 modules that is portable beyond Storybook."

Additional context

No response</issue_description>

<agent_instructions>Open a PR with a corrected link</agent_instructions>

Comments on the Issue (you are @copilot in this section)


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Summary by CodeRabbit

  • Documentation
    • Fixed capitalization for clearer prose in the API docs.
    • Removed hyperlink wrapping from "open standard" mentions to simplify terminology.
    • Replaced certain external GitHub links with local doc references for more consistent presentation and improved readability.

✏️ Tip: You can customize this high-level summary in your review settings.

Copilot AI changed the title [WIP] Fix broken link for Component Story Format documentation Fix broken CSF open standard link in documentation Nov 24, 2025
Copilot AI requested a review from Sidnioulz November 24, 2025 08:55
Copy link
Member

@Sidnioulz Sidnioulz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's remove the link if that repo is no longer maintained in the open. pointing to github provides little additional value to doc readers.

### Capture UI variations as “stories”

When developing a component variation in isolation, save it as a story. [Stories](https://github.com/ComponentDriven/csf) are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior.
When developing a component variation in isolation, save it as a story. [Stories](https://github.com/storybookjs/storybook/tree/next/code/core/src/csf) are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
When developing a component variation in isolation, save it as a story. [Stories](https://github.com/storybookjs/storybook/tree/next/code/core/src/csf) are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior.
When developing a component variation in isolation, save it as a story. [Stories](https://storybook.js.org/docs/writing-stories) are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated in commit 5d8acc0. The link now points to the Storybook documentation for writing stories.

## Write stories once, reuse everywhere

Storybook is powered by [Component Story Format](https://github.com/ComponentDriven/csf), an open standard based on JavaScript ES6 modules. This enables stories to interoperate between development, testing, and design tools. Each story is exported as a JavaScript function enabling you to reuse it with other tools. No vendor lock-in.
Storybook is powered by [Component Story Format](https://github.com/storybookjs/storybook/tree/next/code/core/src/csf), an open standard based on JavaScript ES6 modules. This enables stories to interoperate between development, testing, and design tools. Each story is exported as a JavaScript function enabling you to reuse it with other tools. No vendor lock-in.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Storybook is powered by [Component Story Format](https://github.com/storybookjs/storybook/tree/next/code/core/src/csf), an open standard based on JavaScript ES6 modules. This enables stories to interoperate between development, testing, and design tools. Each story is exported as a JavaScript function enabling you to reuse it with other tools. No vendor lock-in.
Storybook is powered by [Component Story Format](https://storybook.js.org/docs/api/csf/index), an open standard based on JavaScript ES6 modules. This enables stories to interoperate between development, testing, and design tools. Each story is exported as a JavaScript function enabling you to reuse it with other tools. No vendor lock-in.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated in commit 5d8acc0. The link now points to the Storybook CSF API documentation.

<Td>
Component Story Format (CSF) is the API for writing stories. It's an
<a href="https://github.com/ComponentDriven/csf">open standard</a> based on ES6 modules that
<a href="https://github.com/storybookjs/storybook/tree/next/code/core/src/csf">open standard</a> based on ES6 modules that
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<a href="https://github.com/storybookjs/storybook/tree/next/code/core/src/csf">open standard</a> based on ES6 modules that
open standard based on ES6 modules that

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated in commit 5d8acc0. The link has been removed as suggested.

---

Component Story Format (CSF) is the recommended way to [write stories](../../writing-stories/index.mdx). It's an [open standard](https://github.com/ComponentDriven/csf) based on ES6 modules that is portable beyond Storybook.
Component Story Format (CSF) is the recommended way to [write stories](../../writing-stories/index.mdx). It's an [open standard](https://github.com/storybookjs/storybook/tree/next/code/core/src/csf) based on ES6 modules that is portable beyond Storybook.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Component Story Format (CSF) is the recommended way to [write stories](../../writing-stories/index.mdx). It's an [open standard](https://github.com/storybookjs/storybook/tree/next/code/core/src/csf) based on ES6 modules that is portable beyond Storybook.
Component Story Format (CSF) is the recommended way to [write stories](../../writing-stories/index.mdx). It's an open standard based on ES6 modules that is portable beyond Storybook.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated in commit 5d8acc0. The link has been removed as suggested.

Copilot AI changed the title Fix broken CSF open standard link in documentation Fix broken CSF link in documentation Nov 24, 2025
Copilot AI requested a review from Sidnioulz November 24, 2025 10:46
@Sidnioulz Sidnioulz added ci:docs Run the CI jobs for documentation checks only. documentation labels Nov 24, 2025
Copy link
Member

@Sidnioulz Sidnioulz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@Sidnioulz Sidnioulz changed the title Fix broken CSF link in documentation Docs: Replace or remove broken CSF links in documentation Nov 24, 2025
@Sidnioulz Sidnioulz marked this pull request as ready for review November 24, 2025 10:57
@Sidnioulz Sidnioulz force-pushed the copilot/fix-broken-csf-link branch from 5d8acc0 to c6ef3f9 Compare November 24, 2025 10:57
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 24, 2025

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

📝 Walkthrough

Walkthrough

Minor documentation edits: a capitalization fix in the CSF doc, removal of an "open standard" hyperlink in the API index, and replacement of two external GitHub CSF links with local MDX links in the getting-started guide.

Changes

Cohort / File(s) Change Summary
Capitalization fix
docs/api/csf/index.mdx
Corrected sentence-start capitalization: "it's" → "It's".
Hyperlink removal
docs/api/index.mdx
Removed the hyperlink wrapping the phrase "open standard" in two places, leaving plain text.
Local MDX link updates
docs/get-started/why-storybook.mdx
Replaced two external GitHub CSF links with local MDX references: one now links to ../writing-stories/index.mdx, the other to ../api/csf/index.mdx.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

  • Review focus: verify capitalization and link targets render correctly.

Possibly related PRs


📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fa8067d and 320d135.

📒 Files selected for processing (1)
  • docs/get-started/why-storybook.mdx (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • docs/get-started/why-storybook.mdx

Comment @coderabbitai help to get the list of available commands and usage tips.

@nx-cloud
Copy link

nx-cloud bot commented Nov 24, 2025

View your CI Pipeline Execution ↗ for commit 91a70ab

Command Status Duration Result
nx run-many -t build --parallel=3 ✅ Succeeded 1m 1s View ↗

☁️ Nx Cloud last updated this comment at 2025-11-24 18:45:11 UTC

Copy link
Contributor

@jonniebigodes jonniebigodes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot apply the suggestions when able

### Capture UI variations as “stories”

When developing a component variation in isolation, save it as a story. [Stories](https://github.com/ComponentDriven/csf) are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior.
When developing a component variation in isolation, save it as a story. [Stories](https://storybook.js.org/docs/writing-stories) are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot adjust this sentence based on the suggestion

Suggested change
When developing a component variation in isolation, save it as a story. [Stories](https://storybook.js.org/docs/writing-stories) are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior.
When developing a component variation in isolation, save it as a story. [Stories](../writing-stories/index.mdx) are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated in commit fa8067d. Changed to use plain <a> tag without href.

## Write stories once, reuse everywhere

Storybook is powered by [Component Story Format](https://github.com/ComponentDriven/csf), an open standard based on JavaScript ES6 modules. This enables stories to interoperate between development, testing, and design tools. Each story is exported as a JavaScript function enabling you to reuse it with other tools. No vendor lock-in.
Storybook is powered by [Component Story Format](https://storybook.js.org/docs/api/csf/index), an open standard based on JavaScript ES6 modules. This enables stories to interoperate between development, testing, and design tools. Each story is exported as a JavaScript function enabling you to reuse it with other tools. No vendor lock-in.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot adjust this based on the suggestion

Suggested change
Storybook is powered by [Component Story Format](https://storybook.js.org/docs/api/csf/index), an open standard based on JavaScript ES6 modules. This enables stories to interoperate between development, testing, and design tools. Each story is exported as a JavaScript function enabling you to reuse it with other tools. No vendor lock-in.
Storybook is powered by [Component Story Format](../api/csf/index.mdx), an open standard based on JavaScript ES6 modules. This enables stories to interoperate between development, testing, and design tools. Each story is exported as a JavaScript function enabling you to reuse it with other tools. No vendor lock-in.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated in commit fa8067d. Changed to use plain <a> tag without href.

Copilot AI changed the title Docs: Replace or remove broken CSF links in documentation Docs: Remove broken CSF links in documentation Nov 24, 2025
Copilot AI requested a review from jonniebigodes November 24, 2025 16:38
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

♻️ Duplicate comments (1)
docs/get-started/why-storybook.mdx (1)

103-103: ---

Fix bare <a> tags without href attributes on lines 32 and 103.

Both instances use invalid HTML. Replace with markdown syntax:

  • Line 32: [Stories](...)
  • Line 103: [Component Story Format](../api/csf/index.mdx)

Or remove the <a> tags entirely if no link is intended.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c6ef3f9 and fa8067d.

📒 Files selected for processing (1)
  • docs/get-started/why-storybook.mdx (2 hunks)
🧰 Additional context used
🧠 Learnings (7)
📚 Learning: 2025-11-05T09:38:47.712Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Applied to files:

  • docs/get-started/why-storybook.mdx
📚 Learning: 2025-11-05T09:37:25.920Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.

Applied to files:

  • docs/get-started/why-storybook.mdx
📚 Learning: 2025-10-01T15:24:01.060Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.

Applied to files:

  • docs/get-started/why-storybook.mdx
📚 Learning: 2025-09-29T13:20:23.346Z
Learnt from: mrginglymus
Repo: storybookjs/storybook PR: 32556
File: code/core/package.json:309-313
Timestamp: 2025-09-29T13:20:23.346Z
Learning: The `fast-printf` dependency in Storybook's core package is bundled into the final distribution during the build process, so it should remain in devDependencies rather than being moved to dependencies, following the same pattern as other bundled dependencies like `open`.

Applied to files:

  • docs/get-started/why-storybook.mdx
📚 Learning: 2025-09-17T07:31:04.432Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32484
File: code/core/package.json:326-326
Timestamp: 2025-09-17T07:31:04.432Z
Learning: In Storybook's core package, dependencies like `open` are bundled into the final distribution during the build process, so they should remain in devDependencies rather than being moved to dependencies. End users don't need these packages as separate runtime dependencies since they're included in the bundled code.

Applied to files:

  • docs/get-started/why-storybook.mdx
📚 Learning: 2025-09-18T20:51:06.618Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/viewport/components/Tool.tsx:38-39
Timestamp: 2025-09-18T20:51:06.618Z
Learning: In viewport tool code, when using the `useGlobals` hook from storybook/manager-api, the third returned value `storyGlobals` is guaranteed by TypeScript to be defined (not undefined/null), making the `in` operator safe to use without additional null checks.

Applied to files:

  • docs/get-started/why-storybook.mdx
📚 Learning: 2025-09-24T09:39:39.233Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.

Applied to files:

  • docs/get-started/why-storybook.mdx

@jonniebigodes
Copy link
Contributor

@copilot In docs/get-started/why-storybook.mdx around lines 32 and 103, replace the bare
HTML tags without hrefs with proper markdown links: change the text at line
32 to Stories and the text at line 103 to
Component Story Format so links use consistent Markdown
internal paths and improve accessibility.

Copy link
Contributor Author

Copilot AI commented Nov 24, 2025

@copilot In docs/get-started/why-storybook.mdx around lines 32 and 103, replace the bare
HTML tags without hrefs with proper markdown links: change the text at line
32 to [Stories](../writing-st...

Updated in commit 320d135. Replaced bare <a> tags with proper markdown links using internal relative paths:

  • Line 32: [Stories](../writing-stories/index.mdx)
  • Line 103: [Component Story Format](../api/csf/index.mdx)

Copilot AI changed the title Docs: Remove broken CSF links in documentation Docs: Fix broken CSF links with internal documentation references Nov 24, 2025
@jonniebigodes jonniebigodes merged commit cf54bc4 into next Nov 24, 2025
13 checks passed
@jonniebigodes jonniebigodes deleted the copilot/fix-broken-csf-link branch November 24, 2025 19:29
@github-actions github-actions bot mentioned this pull request Nov 24, 2025
9 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ci:docs Run the CI jobs for documentation checks only. documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Documentation]: Component Story Format Link Has Broken

3 participants