react-docgen | extract information from React component files | Frontend Framework library
kandi X-RAY | react-docgen Summary
kandi X-RAY | react-docgen Summary
A CLI and toolbox to extract information from React component files for documentation generation purposes.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- Traverses the contents of a file path .
- Writes result to stdout
- Writes an error to stderr
- ease in ease out
- Parse source .
- Collect a value in a memo array .
- Given a value a relative to a range .
- ease in t
react-docgen Key Features
react-docgen Examples and Code Snippets
Community Discussions
Trending Discussions on react-docgen
QUESTION
I'm building up some components for use with Storybook and hitting upon a small snag with Typescript inferred types.
For the sake of DRY code, I'd rather not have to define the options for a control within the story itsself, however it doesn't seem to be inferring the options correctly.
I have a Button component that has an 'option' prop. The available options are strings based on the values in a theme:
buttonTheme?: keyof Theme['palette']['button']
In VSCode this is showing correctly as a union of the string keys ("base" | "brand" | "default" | "ghost" | "ghostWhite" | "link"), however in storybook this is showing as a key type (string | number | symbol) and the control has Set object as the control type, rather than radio buttons, or a dropdown list:
If I change the Prop type from keyof Theme['palette']['button'] to the list of keys, then this works fine, however that adds another place to update the values should more get added, as does adding them explicitly into the story.
I've tried adding the shouldExtractValuesFromUnion option to the reactDocgenTypescriptOptions, but that just gives radio button options of string | number | symbol which is not what I want and actually breaks functionality (it also messes with boolean values and changes them from a toggle switch to true | false radio buttons).
My typescript config in the storybook's main.ts file is:
ANSWER
Answered 2022-Mar-02 at 23:26So it seems that some settings get changed as soon as you add a custom typescript section to the config.
I've removed the typescript entry in the config and everything is working again, but if I add it back in (even empty) it breaks. There must be some default settings somewhere that I can replicate and change one-by-one to see the culprit, but I couldn't find them when looking through the repo.
If I need any of the settings in future, I may look into it further, but for now this worked for me getting enums back in the code. Putting this here in case anyone stumbles across this in future.
QUESTION
ANSWER
Answered 2022-Feb-08 at 19:42Found the answer here -> https://github.com/storybookjs/storybook/issues/15336
The solution is simply to add the following to .storybook\main.js
QUESTION
In my vue.config.js file contains (ref: https://austingil.com/global-sass-vue-project/):
...ANSWER
Answered 2022-Jan-31 at 10:43As usual.. the rubber duck affect kicked in after posting the question. This was a very annoying one to resolve.
The following config worked for me, note the expansion of the rule for the sass-loader.
Additional note: webpack was fixed in the dev deps to "webpack":"^4.46.0"
QUESTION
At the moment I'm using react-docgen-typescript-loader to automatically generate docs
Downloads last 30 days: 1.2m
But this plugin is no longer supported and archived: https://github.com/strothj/react-docgen-typescript-loader
Also doesn't work with typescript ^4.3 (https://github.com/styleguidist/react-docgen-typescript/issues/356), because the loader uses the old version of the react-docgen-typescript
Is there any other way to automatically generate docs from TS?
...ANSWER
Answered 2021-Jun-29 at 11:02Actually, I didn't notice any difference after deleting react-docgen-typescript-loader and using react-docgen-typescript
https://storybook.js.org/docs/ember/configure/typescript#mainjs-configuration
QUESTION
I am using Storybook for a NextJS project and when I run it, it keeps rebuilding over and over and never stops. My CPU goes crazy and it drains my battery. After the build finishes, it immediately starts rebuilding. It's like it is hot reloading over and over.
...ANSWER
Answered 2021-Apr-10 at 17:43There is an issue on GitHub (Webpack Building Constantly) describing a similar behavior. They solved it by changing the glob of the stories (1) (2) (3).
QUESTION
Failed to compile.
/app/node_modules/@ant-design/icons/lib/components/AntdIcon.d.ts
TypeScript error in /app/node_modules/@ant-design/icons/lib/components/AntdIcon.d.ts(2,13):
'=' expected. TS1005
1 | import * as React from 'react';
> 2 | import type { IconDefinition } from '@ant-design/icons-svg/lib/types';
| ^
3 | import type { IconBaseProps } from './Icon';
4 | import { getTwoToneColor, TwoToneColor, setTwoToneColor } from './twoTonePrimaryColor';
5 | export interface AntdIconProps extends IconBaseProps {
ANSWER
Answered 2021-Feb-04 at 09:28Antd v4.2.4 uses TypeScript v3.9.2.
Feature import type which compiler complains is supported since TypeScript v3.8.
This feature is something most users may never have to think about; however, if you’ve hit issues under --isolatedModules, TypeScript’s transpileModule API, or Babel, this feature might be relevant.
QUESTION
I am trying to setup Storybook from scratch for a new project. I am hitting a wall and finding no useful information online around a babel/webpack issue that appears during build.
Note that I am able to correctly run Storybook locally, this issue only happens during build time.
The project has no webpack.config.js file as none came via the following commands.
How to diagnose further and fix the build issues?
Initial Set-up
- React Boilerplate: https://react-boilerplate.github.io/react-boilerplate-cra-template/
- Storybook out of the box set-up: https://storybook.js.org/docs/react/get-started/install
No issue running storybook locally
...npm run storybook --debug-webpack
ANSWER
Answered 2020-Dec-18 at 19:37By default the react template uses a webpack config which is in a different directory. Replacing the build directory app by stories fixed it.
internals\webpack\webpack.base.babel.js
QUESTION
I am trying to configure Storybook to work with Next.js, Ant Design, Less, and TypeScript. I have followed every tutorial I can possibly find and nothing has worked. I will post my configs and the error I'm getting below...
My .storybook/main.js looks like:
ANSWER
Answered 2020-Nov-10 at 05:15I figured out the issue is from using the original less webpack loader configuration. But removing it is not the only thing you make it working.
Here are a few steps you have to do:
- Remove the original less loader before adding yours:
QUESTION
I'm building app based on React, Typescript with build on Webpack. So basically everything is working ok when using webpack or webpack-dev-server. But then I wanted to use storybook, and I want to put some fonts that are inside my project directory. And in sotrybook I can't see my fonts, they're not working for some reason - I think that could be webpack related.
I'm using this to load fonts:
...ANSWER
Answered 2020-Mar-27 at 19:08I had a similar issue because my font wasn't being downloaded so I added the font link to a file preview-head.html inside .storybook folder.
Check https://storybook.js.org/docs/configurations/add-custom-head-tags/
QUESTION
I have written a set of React components which I wish to publish. However when I try to build them to commonjs format with babel before publishing I get the following error which I cannot find a resolution to.
The project is created and ejected from create-react-app
ANSWER
Answered 2020-Jan-10 at 17:03Evidently preset-flow was not enough for babel to transpile a flow type defined within a JS file. When I added the following line to devDependencies in my package.json the build worked perfectly.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install react-docgen
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
