Comments (4)
Ladlescoop doesn't support generation controls from inherited props yet
Please consider controls autogeneration feature as top 🔝 priority.
⚡ Instant startup time is cool but syncing ladle controls manually on each component change is a boring 🥵 tedious task which outweights ⚖️ all developer's time saved by ladle optimisations. It breaks single-source-of-truth principle.
Because of this can't switch from Storybook to Ladle yet and can't advice switching to friends/colleagues 🤷♂️
from ladle.
Found https://github.com/lukifer/ladlescoop enthusiast project for that:
Automatically generate Ladle stories from existing React components, extracting Props definitions and default values, and automatically creating controls from types.
from ladle.
I did a little bit of discovery on the viability of this, and it looks like react-docgen
can reliably generate values depending on how the props are typed in the stories file.
❌ Does not generate type information
const Card: Story<Props> = ({ label }) => <p>Label: {label}</p>;
✅ Generates type information
const Card: Story<Props> = ({ label }: Props) => <p>Label: {label}</p>;
Considerations
react-docgen
is not a heavy dependency, but it is also not super lightweight, optional flag to enable?- Must work with hot reload
- Types that do not map cleanly to a control
@tajo do you have any opinion on if this is something that you'd like implemented? If so, could you provide a bit of direction on how you'd like this structured? Any info would be appreciated if you are interested in this, and I'd be happy to take a stab at an implementation.
from ladle.
It would nice to have this as an opt-in feature through config.mjs
. I guess you don't want to automatically add control everywhere just because you use TypeScript, so users need to consent to it. This way we can make react-docgen
dependency optional. It can be still in dependencies
but should be used dynamically (or just make sure it doesn't get bundled by default) and added into optimizeDeps.
Also, I assume, when enabled and args/argTypes are defined at the same time, args/argTypes should take the precedence.
from ladle.
Related Issues (20)
- Side navigation icons zIndex should not be above the stories
- HMR does not seem to work on .ladle/components.tsx HOT 1
- Allow for user defined query parameters HOT 12
- After the upgrade 2.17.2 -> 3.0.0 our Jest snapshots have a new prop HOT 6
- Chevron icons in sidebar seem switched
- Way to verify that all stories render without errors HOT 6
- Side panel story name not readable when using longer names or folder nesting HOT 1
- Version 3 supports only React 18+, it's an undocumented breaking change HOT 1
- Deno support HOT 1
- Allow duplicate story name HOT 2
- Missing Accessibility Report button with @ladle/react v3.1.0 and up HOT 2
- ladle.css leaks on @reach/dialog inside stories HOT 1
- Internal server error: Header name must be a valid HTTP token [":path"] HOT 2
- ladle build error HOT 3
- Should the msw implementation be created as an independent plugin? HOT 2
- RTL config using MDX code block breaks formatting HOT 1
- Stylesheet ordering bug with @mui/material and styled-components HOT 6
- Head elements not being synchronized between the iframe and its parent
- Range control with a default value of zero does not adopt default value
- Source maps are broken
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ladle.