Addon-docs: Generate escape hatches automatically for blocks #9177

fraincs · 2019-12-17T21:55:58Z

What I did

Added a utility function to generate sbdocs escape hatches.

vercel · 2019-12-17T21:56:05Z

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

lib/components/src/escapeHatch.ts

patricklafrance · 2019-12-18T00:38:52Z

Have you done a search for "sbdocs" ?

You might have missed a few, please have a look at the file: https://github.com/fraincs/storybook/blob/next/lib/components/src/html.tsx

patricklafrance · 2019-12-18T00:41:03Z

Could you add escape hatches on the props table column (td elements)?

https://github.com/fraincs/storybook/blob/next/lib/components/src/blocks/PropsTable/PropRow.tsx

patricklafrance · 2019-12-18T15:09:05Z

lib/components/src/docsEscapeHatch.ts

+
+export function docsEscapeHatch(component: FunctionComponent, additionalClasses?: string): string {
+  const name = component.displayName || component.name || '';
+  const cleanName = `sbdocs sbdocs-${caml(name)}${additionalClassesFormatting(additionalClasses)}`;


What if name is empty?

The whole point of accepting additionalClasses is to output the proper formatting when we can't find a name for the component.

docsEscapeHatch should call docsEscapeHatchFromId

lib/components/src/docsEscapeHatch.ts

patricklafrance · 2019-12-18T20:58:28Z

@fraincs "now" can't deploy a preview because there is TypeScript error. Can you have a look please https://zeit.co/storybook/monorepo/o4k4ufaqa

fraincs

@fraincs "now" can't deploy a preview because there is TypeScript error. Can you have a look please https://zeit.co/storybook/monorepo/o4k4ufaqa

This seem to happen because some component are not aware that they should accept a className especially styled components.

lib/components/src/docsEscapeHatch.ts

patricklafrance · 2019-12-19T17:34:29Z

@shilman @ndelangen any idea how @fraincs could fix this? #9177 (review)

ndelangen · 2019-12-20T21:37:42Z

The error is correct, the component doesn't support the className prop:
https://github.com/fraincs/storybook/blob/next/lib/components/src/blocks/Description.tsx#L7

ndelangen · 2019-12-20T21:38:06Z

In order for the className to work, it will have to be added to the component to support it.

GeorgeTaveras1231 · 2019-12-22T20:42:33Z

Is there any chance that the "escape hatchets" feature can be extended beyond the docs?

I would like to at least be able to customize some of the core components -- some of which the docs blocks use indirectly. (I was personally looking to add support for this to the ActionBar component).

And probably a topic for a separate PR/Issue, but I would really like the component injection feature available in docs (ability to override Preview component for example) to be available for components used in the manager app. I've just found myself fighting against storybooks's theme API to get the desired results and in some cases have had little to no success

GeorgeTaveras1231 · 2019-12-22T20:46:08Z

Also. Is there any concern around the separation of concerns with this patch?

I just find it odd that the components package has awareness of the docs escape hatchet feature. Seems like something that should be scoped to the addon-docs package

patricklafrance · 2019-12-23T16:01:27Z

Hi @GeorgeTaveras1231, thanks for your input.

Not much of an explanation but we discusss this issue here #8986 (comment)

I am not sure why the docs block are in the components project instead of the docs addon.

Any idea @shilman ?

shilman · 2019-12-24T03:27:59Z

No good reason. The idea is that the doc blocks are "smart" components that rely on the docs context. The components themselves are "dumb" and simply receive props. I put them in lib/components per @ndelangen 's suggestion, in case other SB projects want to use them. Open to suggestions about how this might be better structured, but not super concerned about the current state of things (yet).

ndelangen · 2020-01-23T12:18:29Z

These presentational doc blocks components could live in a separate package at some point, so that they become easier to share / re-use outside the context of storybook?

GeorgeTaveras1231 · 2020-01-23T16:22:31Z

@ndelangen I can see that. Though I think there is a fine line between preparing for a likely future and premature optimization. As an outsider, it's hard to tell where this decision falls but it certainly confused me at first 😅

ndelangen · 2020-01-23T21:02:17Z

I see, if it helps speed up the dev iterations for now, I'm fine with packing the components into the addons/docs package.

One day, I'll move it though 😎

GeorgeTaveras1231 · 2020-01-24T15:36:58Z

@ndelangen I wouldn't go as far as to say that this change is necessary now. I'll defer to @fraincs who owns this PR. I just had a question about the code structure and you gave me a good answer so 👍

# Conflicts: # lib/components/src/blocks/PropsTable/PropValue.tsx # lib/components/src/index.ts

stale · 2020-02-20T10:18:02Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale · 2020-03-21T10:35:15Z

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

fraincs added 2 commits December 17, 2019 16:49

escape hatches on doc

1ee4c59

Merge branch 'next' of github.com:storybookjs/storybook into next

ea68487

fraincs requested review from ndelangen and tmeasday as code owners December 17, 2019 21:55

vercel bot had a problem deploying to staging December 17, 2019 21:56 Failure

patricklafrance requested review from shilman and domyen December 17, 2019 21:57

patricklafrance reviewed Dec 17, 2019

View reviewed changes

lib/components/src/escapeHatch.ts Outdated Show resolved Hide resolved

patricklafrance reviewed Dec 17, 2019

View reviewed changes

lib/components/src/escapeHatch.ts Outdated Show resolved Hide resolved

patricklafrance reviewed Dec 17, 2019

View reviewed changes

lib/components/src/escapeHatch.ts Outdated Show resolved Hide resolved

patricklafrance added addon: docs feature request labels Dec 18, 2019

fraincs added 2 commits December 18, 2019 10:01

pr comments fixes

49df9eb

Merge branch 'next' of github.com:storybookjs/storybook into next

6ccfe2c

vercel bot had a problem deploying to staging December 18, 2019 15:03 Failure

patricklafrance reviewed Dec 18, 2019

View reviewed changes

lib/components/src/docsEscapeHatch.ts Outdated Show resolved Hide resolved

escape hatch corrections

66cdd9f

vercel bot had a problem deploying to staging December 18, 2019 19:15 Failure

fraincs commented Dec 19, 2019

View reviewed changes

lib/components/src/docsEscapeHatch.ts Outdated Show resolved Hide resolved

shilman added this to the 6.0.0 milestone Dec 20, 2019

stale bot added the inactive label Jan 14, 2020

storybookjs deleted a comment from stale bot Jan 14, 2020

stale bot removed the inactive label Jan 14, 2020

ndelangen self-assigned this Jan 30, 2020

Merge branch 'next' into pr/fraincs/9177

f8a0424

# Conflicts: # lib/components/src/blocks/PropsTable/PropValue.tsx # lib/components/src/index.ts

stale bot added the inactive label Feb 20, 2020

stale bot closed this Mar 21, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Addon-docs: Generate escape hatches automatically for blocks #9177

Addon-docs: Generate escape hatches automatically for blocks #9177

fraincs commented Dec 17, 2019 •

edited by ndelangen

Loading

vercel bot commented Dec 17, 2019 •

edited

Loading

patricklafrance commented Dec 18, 2019

patricklafrance commented Dec 18, 2019

patricklafrance Dec 18, 2019

patricklafrance Dec 18, 2019

patricklafrance commented Dec 18, 2019 •

edited

Loading

fraincs left a comment

patricklafrance commented Dec 19, 2019

ndelangen commented Dec 20, 2019

ndelangen commented Dec 20, 2019

GeorgeTaveras1231 commented Dec 22, 2019

GeorgeTaveras1231 commented Dec 22, 2019

patricklafrance commented Dec 23, 2019

shilman commented Dec 24, 2019

ndelangen commented Jan 23, 2020

GeorgeTaveras1231 commented Jan 23, 2020

ndelangen commented Jan 23, 2020

GeorgeTaveras1231 commented Jan 24, 2020

stale bot commented Feb 20, 2020

stale bot commented Mar 21, 2020

Addon-docs: Generate escape hatches automatically for blocks #9177

Addon-docs: Generate escape hatches automatically for blocks #9177

Conversation

fraincs commented Dec 17, 2019 • edited by ndelangen Loading

What I did

vercel bot commented Dec 17, 2019 • edited Loading

patricklafrance commented Dec 18, 2019

patricklafrance commented Dec 18, 2019

patricklafrance Dec 18, 2019

Choose a reason for hiding this comment

patricklafrance Dec 18, 2019

Choose a reason for hiding this comment

patricklafrance commented Dec 18, 2019 • edited Loading

fraincs left a comment

Choose a reason for hiding this comment

patricklafrance commented Dec 19, 2019

ndelangen commented Dec 20, 2019

ndelangen commented Dec 20, 2019

GeorgeTaveras1231 commented Dec 22, 2019

GeorgeTaveras1231 commented Dec 22, 2019

patricklafrance commented Dec 23, 2019

shilman commented Dec 24, 2019

ndelangen commented Jan 23, 2020

GeorgeTaveras1231 commented Jan 23, 2020

ndelangen commented Jan 23, 2020

GeorgeTaveras1231 commented Jan 24, 2020

stale bot commented Feb 20, 2020

stale bot commented Mar 21, 2020

fraincs commented Dec 17, 2019 •

edited by ndelangen

Loading

vercel bot commented Dec 17, 2019 •

edited

Loading

patricklafrance commented Dec 18, 2019 •

edited

Loading