Retrieve the latest blog posts from Storybook's Medium.

This package might help:
https://github.com/nikolaevra/medium-get-latest-posts

This is a general request to help improve site speed and performance. You can find the deploy preview of master 👉here👈

We get a lot of stuff out of the box from Gatsby, but I'm sure inefficiencies remain.

PageSpeed Insights score
Update 12/19: 91/100
Update 1/28: 92/100

Describe the bug

Go to https://storybook.js.org/docs/react/get-started/introduction on Chrome 87 and scroll.

See screengif.

Maybe it's just my machine?

Lets's highlight sub-area maintainers on the Community page.

Proposal

In storybookjs/storybook#6509 I added a config file automention.yml that maps github labels to maintainers who are willing to review PRs and provide user support around specific project areas, ranging from view layers such as react/vue/angular to addons like knobs/storysource to features like typescript/theming.

Proposal:

• Select a subset of these areas to highlight
• Read latest automention.yml
• Display avatars/profile links for the maintainers in each area

NOTE: needs design @domyen

Clicking on 'Use cases' shows a <title> of 'Use cases | undefined'.

There is a StaticQuery error wherever we use useSiteMetadata() which queries GraphQL. This appears like best practices in Gatsby but is not working in our Storybook.

Error

The result of this StaticQuery could not be fetched. This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues

In Gatsby's issue tracker 👉 gatsbyjs/gatsby#10662

Repro

1. Clone /frontpage
2. yarn install && yarn build && yarn run storybook
3. Go to IndexScreen:default in Storybook
4. See error

More context
The strange thing is that this behavior doesn't appear when Chromatic renders the component for some reason.

Anyone seen this before? cc @tmeasday @dakebl @isaac-martin

When attempting to visit https://storybook.js.org/docs/data, I get a 404 redirect page instead.

When I type in headings from the "Configure" section (e.g. Webpack, Theming, Sidebar, etc.) I only see results from the other sections. It doesn't look like any of those pages are indexed by Algolia?

Storybook docs had an examples page which was a community-contributed gallery of storybooks. We removed this in favor of /use-cases but people want to see more examples with source code etc. Let's restore /examples but update it to match the new aesthetic.

Describe the bug

• When clicking every addon card item in addon page, it return 404 error page

Steps to reproduce the behavior

1. Go to addon page
2. Click on any addon card item.
3. Then, you can find out 404 error page

Expected behavior

• When clicking the card item, it should be linked to the proper documentation page.

Screenshots and/or logs

Environment

• Browser (if applicable): chrome (desktop)

The fonts in the code blocks of many pages (e.g. Standalone Options) alternate between Ubuntu Mono and Fira Code for me.

It appears that the #docs-content .markdown code selector sets font-family to Consolas, Liberation Mono, Menlo, Courier, monospace. I do not have any of those font families installed so the fallback monospace font is chosen, which for me is Ubuntu Mono.

However, the CSS token class appears to set font-family to "Operator Mono", "Fira Code Retina", "Fira Code", "FiraCode-Retina", "Andale Mono", "Lucida Console", Consolas, Monaco, monospace. I happen to have Fira Code installed so that's the font family that is chosen.

The effect that this creates for me is that in a single code block, text enclosed in a span with class token is rendered in Fira Code while other text is rendered in Ubuntu Mono. Depending on the fonts installed by other users, their code blocks may alternate between other font families.

I think a good solution would be to only set font-family in the #docs-content .markdown code selector (perhaps to what the token class currently set font-family to) and not to set font-family at all in the token class.

Would appreciate a Gatsby audit.

• Are there low-hanging fruits we can do for speed/perf?
• Are there best practices that we should definitely adhere to?

Deploy preview here. PRs definitely welcome.

No images are using gatsby image - this will help with performance in #12
Docs are here. https://www.gatsbyjs.org/packages/gatsby-image/

i'm opening this but probably won't have time to look at it for the next little while.

Describe the bug

While triaging broken links in the documentation i've encountered a broken link to one of the addons, more specifically the queryparams one.

Steps to reproduce the behavior

1. Go to Feature support for frameworks
2. Click on query-params addon
3. Leads to 404 in GitHub, with the following url (https://github.com/storybookjs/storybook/tree/next/addons/query-params).

Expected behavior

It should point to the correct GitHub page for the addon in question. In this case (https://github.com/storybookjs/storybook/tree/next/addons/queryparams)

Feel free to provide feedback

Add addons from docs to the community addons section. Make sure they're still maintained (will omit if they're not up to date).

• storybook as submodule (on release/5.0 branch for now)
• build the docs under /docs on each deploy
  • storybookjs/storybook#5632
  • #27
• redirects for the old top-level URLs
  • start with 302
  • change to 301 once tested
• trigger a build by webhook on each storybook commit

In the page: https://storybook.js.org/releases/6.0

the link to changelogs is https://github.com/storybookjs/storybook/blob/next/CHANGELOG when it should be https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md

PS: this problem doesn't exist in https://github.com/storybookjs/frontpage/blob/master/src/content/releases/6.0.md

https://twitter.com/pkcodes/status/1288606244626993153?s=21

https://twitter.com/pkcodes/status/1288609560014532612?s=21

New Storybook website

🎉Storybook is getting a brand new website. This ticket documents the project.

If you want to help with the buildout let folks know in the comments.

🖼 Design in Invision

• It is interactive. You can click on links or just page through with arrow keys.
• There are videos/gifs in the design, but alas they don’t work in Invision. Those assets are linked in situ to give you an idea of what the interaction will be. (🎥Hero, Build, Test, Share)
• Storybook screenshots and animations are taken from the UI overhaul in v5

📄 Brief in Google docs

Old	New

Goal

The goal is to help developers learn and understand why to use Storybook. Developers who land on the site are unfamiliar with Storybook, we need to convince them that using Storybook improves their lives and helps them ship great UI components faster.

In 2018 52% of JavaScript developers have not heard of Storybook and 83% haven't tried it. This project updates the website to showcase how developers build UI components with Storybook.

The text and illustrations showcase Storybook's biggest benefits. These benefits are sourced from meetups, presentations, books, and blog posts from the community at large.

Deliverables

Doing: /index, /addons, /community, /use-cases, /support
Not doing: /docs

• Static site: an interactive responsive website
• Design system: a reusable and extendable UI component library to make developing future websites straightforward

Tech stack

• Storybook
• React
• Gatsby
• Styled-components
• Netlify

Contributors

• @domyen (me)
• @tmeasday
• @christopherstat (interested)
• @alexandrebodin (interested)
• @kylemh (interested)
• @dakebl (interested)
• You?

Reviewers

Designed in collaboration with core maintainers @igor-dv, @ndelangen, @shilman, and @tmeasday. (Thanks for giving me the opportunity!)

Cross-posted from Discord #maintainers (11/16) and #design (11/20).

💬Say hi in Discord #design.

Shoutouts

• @SachaG, the creator of the current logo and awesome designer for helping review these designs
• @aparajita, for great copy edits
• @orta for reviewing designs and excellent feedback

The link
https://storybook.js.org/docs/angular/configure/user-interface
is broken.

Steps To Reproduce

1. Visit https://storybook.js.org/docs/basics/introduction/
2. See console error

After about 5 minutes, it started working again. I'm guessing there's some intermittent-ness with that CDN link for docsearch. Maybe the page can be more resilient if that fails and you're only not able to search? The entire screen was white when this happened.

https://www.loom.com/share/8fd73c013248491cb224b19caecdf0f3

Repro

• Navigate to deploy preview
• Click on Releases link
• See 404 flash into view (right before the content resolves)

• Setup the hierarchy for the what's new page & the various versions
• Link to the what's new page from the header
• Setup page template/component for each version
• Document how to use/add new version docs
• Allow switching between versions
• Setup logic to alter state when shown in an iframe
• Do not index on Google when in iframe

Behavior
There are videos on the site at two quality levels. For smaller/mobile screens I want to load the lighter-weight video to decrease page load time. For larger/desktop screens I want to load the normal video because it's higher quality.

Request
Some way to load a specific video source depending on viewport size. Currently, I've exported videos at two quality levels:

• High: videos/storybook-workflow-build-optimized-lg.mp4
• Low: videos/storybook-workflow-build-optimized-sm.mp4

Example stories

• UseCasesScreen

gatsby-source-github-repo is not available on npm so the builds are failing. Seems like we need to find a replacement.

Example: https://circleci.com/gh/storybookjs/frontpage/501?utm_campaign=vcs-integration-link&utm_medium=referral&utm_source=github-checks-link

The Gatsby medium integration no longer works due to an upstream change at Medium. gatsbyjs/gatsby#17335

I removed it in this PR but hope that we can reenable it with help from the community. Anyone want to take this on?

@tmeasday volunteered to help out 🙏

• Make MailinglistSubscribeForm submission and errors self-contained
  - [ ] Setup mocks for StaticQuery in Gatsby. Or if that's not the right way to do things, please recommend a way :D
• Setup eslint
• fix eslint errors and turn on for yarn test
• Turn pure pages from Storybook into Gatsby pages
• Setup Chromatic (this doesn't seem to work Dec 17 5:00PM ET)
• Setup Netlify for SB deploy

When navigating to the page above, it initially shows up and then disappears after a second or so.
Tested on:
MacBook Pro 2018 10.14.6
Chrome Version 79.0.3945.130 (Official Build) (64-bit)
Safari Version 13.0.4 (14608.4.9.1.4)
See attached logs
storybook.js.org-1579614792123.log

Behavior

• Get contributor count from GitHub asynchronously

Relevant Storybook local URL

Describe the bug

In this page the link of community-addon info is broken (404)

Expected behavior

Should be changed or removed if addon is deprecated

Screenshots and/or logs

Behavior

• When you click on a logo it should load a new animated gif that corresponds with the brand (already exported)

Storybook local URL

In https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project there are links to a custom webpack and babel configuration that are broken

Webpack

text: "webpackFinal - custom webpack configuration"
link: https://storybook.js.org/docs/react/configure/integration#extending-link: storybooks-webpack-config

Babel

text: babel - custom babel configuration.
link: https://storybook.js.org/docs/react/configure/integration#babel

On the toolbars page. Lower down on the same page:

Behavior

• Get/calculate monthly installs from NPM

Relevant Storybook URL

Describe the bug
The page which displays naming and hierarchy is broken:
https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy

To Reproduce
Steps to reproduce the behavior:

1. Go to https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy
2. See JS error

Expected behavior
Ability to read the documentation

Screenshots

Environment

• OS: [e.g. iOS] Windows
• Node.js version: [e.g. v12.17.0] N/A
• NPM version: [e.g. 6.14.4] N/A
• Browser (if applicable): [e.g. chrome, safari] Edge
• Browser version (if applicable): [e.g. 22] 85
• Device (if applicable): [e.g. iPhone6] Laptop

Additional context

Shouldn't this be covered through Cypress or something else?
If you disable JS, you can still access it.

They have a new brand https://twitter.com/FormidableLabs/status/1242858783925088258

The following link is broken. I followed the link from another storybook page, styling and css but it gave me 404 error.

Detail page

• "View on GitHub" button doesn't link to the Readme
• Relative urls in Readme's don't work – we need to transform the paths like we did with Storybook Documentation
• Change spacing from 16px to 24px here
  
• Table elements extend beyond the readme layout
  

Homepage

• Filter out essential addons from popular list because users can't actually install them (and to make the popular list more dynamic)

Authors

• All the addons in storybookjs/storybook have the same authors.
  

Search

• Searching takes multiple seconds, can we make this faster? As a user, I'd expect "instant" (sub-150ms) search.

Behavior

• Load 9 sponsors from open collective

Relevant story in local SB

Just noticed in the docs the SVG logo is missing: https://storybook.js.org/docs/basics/introduction/

SVG url: https://storybook.js.org/images/logos/logo-storybook.svg

Had a quick poke around to see if I could see what caused it, maybe was introduced by #47?

The /addons path of the website doesn't generate a Twitter card.

When I go here https://cards-dev.twitter.com/validator there is an error.

You can also reproduce by going to twitter, adding the url to a tweet, and seeing if twitter automatically generates a card (it doesn't).

Thanks for reporting this @PaulieScanlon

Behavior

• When you click on a logo it should switch out the component items with images that correspond to the brand. These are already exported in a directory.

Storybook local url

Describe the bug

The Paddings addon metadata has been updated in rbardini/storybook-addon-paddings@43382f5, but those changes have not been reflected in the addon catalog a month after.

Steps to reproduce the behavior

1. Run npm view storybook-addon-paddings description keywords storybook to see the package's current metadata.
2. Go to Paddings addon catalog page.
3. See missing icon and outdated description and category.

Expected behavior

The page displays the up-to-date icon, description and category from the package's metadata.

Screenshots and/or logs

$ npm view storybook-addon-paddings description keywords storybook
description = 'Add paddings to view components under different white space settings'
keywords =
[
  'storybook-addons',
  'style',
  'padding',
  'margin',
  'spacing',
  'whitespace'
]
storybook =
{
  displayName: 'Paddings',
  icon: 'https://raw.githubusercontent.com/rbardini/storybook-addon-paddings/HEAD/icon.svg'
}

Environment

N/A

Additional context

Paddings addon was previously added to the old addons page in #89, and I could find it in addons.yml file until removed in #201.

It looks like there is either a configuration error or a DNS change that hasn't propagated properly yet for https://storybook.js.org/. As of 4/26 you're getting this error from Chrome:

Audit components and fix console errors and warnings.

I freshly cloned the repository and ran yarn install -> yarn run storybook as per the documentation, but was faced with the following errors:

ERROR in ./.storybook/addons.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/keraito/OS/frontpage/.storybook/addons.js: Cannot find module '/Users/keraito/OS/frontpage/.cache/babelState.json' (While processing: "/Users/keraito/OS/frontpage/node_modules/babel-preset-gatsby/index.js")
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:587:15)
    at Function.Module._load (internal/modules/cjs/loader.js:513:25)
    at Module.require (internal/modules/cjs/loader.js:643:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at loadCachedConfig (/Users/keraito/OS/frontpage/node_modules/babel-preset-gatsby/index.js:11:25)
    at preset (/Users/keraito/OS/frontpage/node_modules/babel-preset-gatsby/index.js:20:29)
    at loadDescriptor (/Users/keraito/OS/frontpage/node_modules/@babel/core/lib/config/full.js:165:14)
    at cachedFunction (/Users/keraito/OS/frontpage/node_modules/@babel/core/lib/config/caching.js:33:19)
    at loadPresetDescriptor (/Users/keraito/OS/frontpage/node_modules/@babel/core/lib/config/full.js:235:63)
    at config.presets.reduce (/Users/keraito/OS/frontpage/node_modules/@babel/core/lib/config/full.js:77:21)
    at Array.reduce (<anonymous>)
    at recurseDescriptors (/Users/keraito/OS/frontpage/node_modules/@babel/core/lib/config/full.js:74:38)
    at loadFullConfig (/Users/keraito/OS/frontpage/node_modules/@babel/core/lib/config/full.js:108:6)
    at process.nextTick (/Users/keraito/OS/frontpage/node_modules/@babel/core/lib/transform.js:28:33)
    at process.internalTickCallback (internal/process/next_tick.js:70:11)
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./.storybook/addons.js ./node_modules/@storybook/core/dist/client/manager/index.js manager[1]

ERROR in ./.storybook/config.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/keraito/OS/frontpage/.storybook/config.js: Cannot find module '/Users/keraito/OS/frontpage/.cache/babelState.json' (While processing: "/Users/keraito/OS/frontpage/node_modules/babel-preset-gatsby/index.js")
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:587:15)
    at Function.Module._load (internal/modules/cjs/loader.js:513:25)
    at Module.require (internal/modules/cjs/loader.js:643:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at loadCachedConfig (/Users/keraito/OS/frontpage/node_modules/babel-preset-gatsby/index.js:11:25)
    at preset (/Users/keraito/OS/frontpage/node_modules/babel-preset-gatsby/index.js:20:29)
    at loadDescriptor (/Users/keraito/OS/frontpage/node_modules/@babel/core/lib/config/full.js:165:14)
    at cachedFunction (/Users/keraito/OS/frontpage/node_modules/@babel/core/lib/config/caching.js:33:19)
    at loadPresetDescriptor (/Users/keraito/OS/frontpage/node_modules/@babel/core/lib/config/full.js:235:63)
    at config.presets.reduce (/Users/keraito/OS/frontpage/node_modules/@babel/core/lib/config/full.js:77:21)
    at Array.reduce (<anonymous>)
    at recurseDescriptors (/Users/keraito/OS/frontpage/node_modules/@babel/core/lib/config/full.js:74:38)
    at loadFullConfig (/Users/keraito/OS/frontpage/node_modules/@babel/core/lib/config/full.js:108:6)
    at process.nextTick (/Users/keraito/OS/frontpage/node_modules/@babel/core/lib/transform.js:28:33)
    at process.internalTickCallback (internal/process/next_tick.js:70:11)
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true iframe[2]

Starting the gatsby server via yarn start works correctly though.

I tried removing node_modules and run yarn install again, but that didn't fix it. Using npm install -> npm run storybook succeeds though. After correctly launching via NPM, doing so via Yarn works as well without error even after deleting the node_modules and installing the dependencies via Yarn again. There were changes in the package-lock.json after using NPM, but I stashed those before trying with yarn again.

Information:

• yarn v1.12.3
• NPM v6.4.1

(Note: I would have made a pull request, but I couldn't get Gatsby working on my laptop. I suspect the laptop is too old.)

Context

A common project setup for mono-repos is to make use of the NodeJS module resolution algorithm to avoid needing relative file paths by having a deeper node_modules folder that holds project libraries.

Typically that looks something like this:

repo/
  |- README.md # or whatever else at your typical project root
  \- app/
      \- node_modules/
          \- @app/
              |- library1/
              |   \- file1.js
              |- library2/
                  \- file2.js

Then inside file2.js instead of needing to know relative file paths, aka require('../library1/file1.js') you can simply use require('@app/library1/file1.js') and it will resolve correctly.

Problems with WebpackDevServer

Unfortunately, some libraries don't "play nice" out of the box. For example, the WebpackDevServer setup has an exclude rule of /node_modules/ which means changes to things inside app/node_modules/@app/** won't get picked up as changed.

Where does Storybook come in?

In practice, this means if you store your components inside e.g. app/node_modules/@app/components/** and try to set up Storybook to watch those:

// .storybook/main.js
module.exports = {
    stories: [
        '../app/node_modules/@app/stories/**/*.stories.mdx'
        // etc., note the "node_modules" in the path
    ]
}

When you run start-storybook -p 8080 it will build correctly, but changing a component inside your project won't get picked up by the watcher.

Solution?

I don't know that it makes sense to try to fix this within Storybook--although it's becoming a more common design pattern, it's still not mainstream.

In any case, I think developers who run into this issue will likely be familiar enough with the described problem that they'll go searching in the docs, so adding something to the Storybook docs is probably a better solution, at least for now.

With many thanks to this Stack Overflow answer, the solution is relatively straightforward:

Inside your .storybook/main.js file, you'll need to modify the Webpack settings, like this:

module.exports = {
    webpackFinal: (config) => {
        // If the `watchOptions` isn't set yet, we'll add it:
        config.watchOptions = config.watchOptions || {}

        // If the `ignored` list hasn't been created yet, we'll add it:
        config.watchOptions.ignored = config.watchOptions.ignored || []

        // Then, we'll update that ignore list to filter out anything that
        // indiscriminately ignores 'node_modules' folder:
        config.watchOptions.ignored = config.watchOptions.ignored.filter(
            ignore => !ignore.toString().includes('node_modules')
        )

        // Finally, we'll add this regex which, by using the ?! regex syntax,
        // says to ignore all 'node_modules' *except* where it is immediately
        // followed by '@app' (change to your folder, of course).
        config.watchOptions.ignored.push(
            /node_modules\/(?!@app\/.+)/
        )

        // The rest of your custom Webpack config, if you have any, and then:
        return config
    },
    // ... the rest of your configuration as before
}

Proposal

Add the above solution (or some version of it, of course) to the docs, so other people can find a canonical help text instead of needing to turn to Stack Overflow or the internet at large.

Thanks!!!

Figure out where and how to do this in Gatsby

Follow up to #149

Needs an icon