Questions tagged [react-styleguidist]

React Styleguidist is a component development environment with hot reloaded dev server and a living style guide that you can share with your team. It lists component `propTypes` and shows live, editable usage examples based on Markdown files.

React Styleguidist is a component development environment with hot reloaded dev server and a living style guide that you can share with your team. It lists component propTypes and shows live, editable usage examples based on Markdown files.

85 questions
1
vote
0 answers

Importing propTypes from external file in React Styleguidist

I'd like to reuse a common set of PropTypes across several components. Something like: const textProps = { /** Header text */ children: PropTypes.node.isRequired, /** Weight of the text */ weight: PropTypes.oneOf(['thin', 'normal',…
Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184
1
vote
2 answers

How to configure using Styleguidist with Apollo/GraphQL

I'm trying to use GraphQL to populate fake data for Styleguidist. I'm using Express to make my GraphQL server but I'm unsure how to connect Apollo into Styleguidist? The examples use the index.js file and wrap the root component in an tag for…
Patricia Green
  • 495
  • 5
  • 14
0
votes
0 answers

react-styleguidist use of TS in examples in MD files

I would like to use TypeScript in Markdown files with React-Styleguidist, but I consistently encounter a SyntaxError. I would appreciate help in resolving this specific issue. Here are the steps I have taken: I set up a React project with…
0
votes
0 answers

How to create a wrapper for only a single specific component in styleguidist?

In the Styleguidist documentation I found the example for creating a wrapper that will wrap every one of my components. It looks something like this: styleguide.config.js: const path = require('path') module.exports = { ... …
Philipp Panik
  • 254
  • 1
  • 4
  • 15
0
votes
0 answers

React Styleguidist: How to async set up webpackConfig when using MDXv2 with ES module-based remark/rehype plugins?

In order to use MDX v2 with remark and rehype plugins in react applications created with Create React App v5 I have to use CRACO (v7) and especially its ability to handle a configuration that is returned as a promise/async function. The reason is…
TheDiveO
  • 2,183
  • 2
  • 19
  • 38
0
votes
0 answers

No changes getting reflected on changing the path of components in styleguide.config.js (react-styleguidist@13.0.0)

I am using react-styleguidist library for the documentation of my React App. This is my package.json ` { "name": "app", "version": "0.1.0", "private": true, "dependencies": { "@date-io/date-fns": "^1.3.13", "@emoji-mart/data":…
0
votes
1 answer

How to change the styling of a component in another component ? React

First I apologize if this question has been answered elsewhere. I'm still learning. Assuming we have a parent component that has children components inside of it, so : in App.js: <>
Emad
  • 3
  • 3
0
votes
0 answers

Is there a way where I can show the file hierarchy in styleguidist

I just started using styleguidist and have gone through the documentation but couldn't find a proper solution to show the hierarchy in the documentation. As of now, it is showing in glob level but I would like to show the components in the…
0
votes
1 answer

How to set where to save assets with webpack 5 using react-styleguidist

Im generating frontend documentation of a react project using react-styleguididst. I'm facing a problem related to webpack, which is mainly that during the build, assets files used on stylesheet (woff, woff2, eot, svg ...etc) are bundled and stored…
Javier
  • 428
  • 5
  • 12
0
votes
1 answer

Background Clip not working in react native

text const styles = StyleSheet.create({ text: { backgroundImage: "path-to-image", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" } }); it say 'Invalid…
0
votes
1 answer

React Functional Component - Styleguidist

I am using Styleguidist but unfortunately it ignores everything inside my functional components e.g: /** * Displays a pageable list of projects or a single (detailed) project if an ID is given via the router. * *…
0
votes
1 answer

How can I use absolute paths in my React styleguidist component library?

I have a React component library that is used in a React app. The component library is setup using Styleguidist and webpack. I've setup webpack to use absolute paths using: webpackConfig: { resolve: { modules: [path.resolve(__dirname, 'src/'),…
Michael Lynch
  • 2,682
  • 3
  • 31
  • 59
0
votes
1 answer

TextArea inside padding and new Line in React Native

i'm trying to make inside padding of textarea but can't do it. another poeblem is inside textarea when i start writing something it always go a single long long line doesn't make new line. Can anyone there who can help me by letting me know the…
megh
  • 171
  • 1
  • 1
  • 10
0
votes
0 answers

React Native Circle ProgressBar

Which property should I use to make this circle progress bar?
megh
  • 171
  • 1
  • 1
  • 10
0
votes
2 answers

React Native Border Css

I'm a very beginner at react-native. I'm trying to design like the image given below. But can't make the red marked part. Can anyone help me to solve this by saying what CSS property should I use to design this part? I know I have to use…
megh
  • 171
  • 1
  • 1
  • 10