docs: Show Code Open by default

[kschoi]

Hey team, I noticed the issue #8356 closed.
I'd only like to have an option to customize the story view (especially source code view), too.
Have you got any plan to resolve this issue?

addParameters({ docs: { previewSource: 'open' } })

[SimplyY]

@shilman has new progress？

[ldeveber]

This would be lovely, I was just searching the docs on how to do this!

[signal-intrusion]

🤞 my current workaround is to poll the page for show code buttons and click them. It's crazy janky.

[ron0115]

🤞 my current workaround is to poll the page for show code buttons and click them. It's crazy janky.

@signal-intrusion How can you solve the problem by this hacking tricks.Could you pls show the code?Thank you

[AshConnolly]

Any progress on this?

[signal-intrusion]

@ron0115 In preview.js I added this:

// this little bit of hacky code opens code samples
window.addEventListener('load', () => {
  let loc = window.location.href
  showCodeSamples()

  window.setInterval(() => {
    let newLoc = window.location.href

    if (newLoc !== loc) {
      loc = newLoc
      showCodeSamples()
    }
  }, 300)
})

function showCodeSamples() {
  try {
    const docs = document.querySelectorAll('.sbdocs')

    ;[].forEach.call(docs, (el) => {
      const buttons = el.querySelectorAll('button')
      const codeButton = [].find.call(buttons, (el) => el.textContent === 'Show code')
      if (codeButton) {
        codeButton.click()
      }
    })
  } catch (e) {
    console.warn(e)
  }
}

[frassinier]

I'm looking for a review, please👆🏻

[shilman]

Gadzooks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.17 containing PR #14729 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[tklives]

Leaving this here to hopefully help someone in the future...

If you are just looking to have the code block open for a single story, you just need to add withSource="open" to your <Canvas> tag that wraps the story:

<Canvas withSource="open">
  <Story name="Cool story bro">
    <>
  </Story>
</Canvas>

Hope this helps someone like myself, since this isn't documented anywhere that I could find.

Cheers!

[jared-christensen]

It has been added, took me a bit to find.
https://github.com/storybookjs/storybook/pull/14729/files/0fd1b67ae1c4017f5678bc7faa21407f0f48a1ed#showhide-code

[JUNNNI]

Based on shilman comment above, for those that are looking on how to implement it:

// .storybook/preview.ts

export const parameters = {
    docs: {
        source: {
            state: 'open',
        },
    }
}

[ryuheechul]

now with storybook 7, it seems to be changed to following and it works for me:

// .storybook/preview.js

export const parameters = {
  // ...
  docs: {
    canvas: {
      sourceState: 'shown'
    }
  }
};

Couldn't find a corresponding documentation on this though.

[kasperskov-pdk]

now with storybook 7, it seems to be changed to following and it works for me:

// .storybook/preview.js

export const parameters = {
  // ...
  docs: {
    canvas: {
      sourceState: 'shown'
    }
  }
};

Couldn't find a corresponding documentation on this though.

As I read the source code, your example is on story level, not global in preview.js. For example, the enum for SourceState is still close or open.

export enum SourceState {
  OPEN = 'open',
  CLOSED = 'closed',
  NONE = 'none',
}

But then again the function filtering the states is on story level with the "old" docs.source.state:
const states = stories.map((story) => story.parameters.docs?.source?.state).filter(Boolean);
Readme still refers to docs.source.state See here
I'm so confused.

Anyways neither solution works for me on storybook 7.4.0. Anyone else still having issues?

[jared-christensen]

I found the docs for it. https://storybook.js.org/docs/react/api/doc-block-canvas#sourcestate