Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Remove TypistEditor reference from Storybook #703

Merged
merged 1 commit into from Mar 20, 2024

Conversation

rfgamaral
Copy link
Member

Overview

From Storybook's blog post about Storybook 8:

One of Storybook’s signature features is auto-generated UI controls that let you modify component inputs interactively to explore new component states.

For React and Vue projects, Storybook 8 introduces major improvements to controls autogeneration, by upgrading the libraries we use to analyze your components (also known as “docgen”).

For React users, Storybook 8 switches to a significantly faster docgen library: react-docgen. Unlike our current TypeScript-based solution, react-docgen produces a shallower analysis that is way faster and good enough for virtually all components.

But this change presented a problem for us...

Before After
image image

I asked about it here, and the suggested solution was to fallback to the previous default for component analysis: react-docgen-typescript. However, this does not seem to be working as expected:

❯ npm run storybook:start                           

> @doist/typist@5.0.0 storybook:start
> storybook dev --port 6006 --ci

@storybook/cli v8.0.0

info => Serving static files from ././.storybook/public at /
info => Starting manager..
info => Starting preview..
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
info Using tsconfig paths for react-docgen
/home/Ricardo/Workspace/Doist/Frontend/typist/node_modules/@storybook/cli/bin/index.js:23
  throw error;
  ^

ReferenceError: exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/home/Ricardo/Workspace/Doist/Frontend/typist/node_modules/react-docgen-typescript/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///home/Ricardo/Workspace/Doist/Frontend/typist/node_modules/react-docgen-typescript/lib/index.js:2:23
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:431:15)
    at async getUtils (/home/Ricardo/Workspace/Doist/Frontend/typist/node_modules/@joshwooding/vite-plugin-react-docgen-typescript/dist/index.cjs:21:18)

Node.js v20.11.1

So, for the time being, we are reverting to react-docgen, and hiding the TypistEditor component reference from Storybook. This way we can continue to run Storybook locally, at the expense of not showing the TypistEditor component arguments table (with types and descriptions). As a workaround, consumers can rely on the JSDoc itself (it's the same information anyway).

PR Checklist

@rfgamaral rfgamaral added the ⛴ Ship PR Used for PRs that don't need a review and can be merged when CI is green. label Mar 20, 2024
@rfgamaral rfgamaral self-assigned this Mar 20, 2024
Copy link

netlify bot commented Mar 20, 2024

Deploy Preview for doist-typist ready!

Name Link
🔨 Latest commit 733b31d
🔍 Latest deploy log https://app.netlify.com/sites/doist-typist/deploys/65fb2d36de8335000889bd56
😎 Deploy Preview https://deploy-preview-703--doist-typist.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@rfgamaral rfgamaral enabled auto-merge (squash) March 20, 2024 18:39
@rfgamaral rfgamaral merged commit 2765d98 into main Mar 20, 2024
9 checks passed
@rfgamaral rfgamaral deleted the ricardo/remove-component-reference-from-storybook branch March 20, 2024 18:42
@doistbot
Copy link
Member

🎉 This PR is included in version 5.0.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@doistbot doistbot added the released Pull requests that have been released to production label Apr 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
released Pull requests that have been released to production ⛴ Ship PR Used for PRs that don't need a review and can be merged when CI is green.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants