markalfred / react-generate-props Goto Github PK
View Code? Open in Web Editor NEWGenerate default props based on your React component's PropTypes
License: MIT License
Generate default props based on your React component's PropTypes
License: MIT License
We're using react-redux and would like to use our reducer's initialState for generated props.
I'm thinking if the shape generator took the prop name or ideally a path, we could decide whether to return initialState from the reducer or to recursively call generateProps as the library normally would.
Interested in hearing if this would be a welcomed PR. Or maybe it's possible today and I just didn't catch it.
Complex types are:
Actually not complex. Set these up first:
Could be an option during invokation
I would love to request just a bit more information when a generator is called so that the function can have some context around the property being generated.
For instance, one of the use cases I have is that I want to generate function props for our storybook callbacks using the action
method supplied by Storybook. I would love to have the value of this action represent the property name. E.g., if I have a prop called onBlur
, I would like to generate a function prop that would look like: action('onBlur')
.
To be more clear, ultimately it would be great to do this:
generateProps(..., {
generators: {
func: (propName) => { action.bind(this, propName); },
},
});
I think this would open up a lot of functionality for the other generators, too :)
I cannot seem to get any oneOfType
, oneOf
, etc complex propTypes to be correctly wrapped. The wrapped function always seems to be returning undefined for its type
, and therefore never gets a generated value.
Currently using prop-types ^15.5.8
.
{ string: (n) => `Countr Product Number ${n}` }
Simple types are:
shape = {
shapeProp: PropTypes.shape({
optionalProp: PropTypes.any,
requiredProp: PropTypes.any.isRequired
})
}
generateProps(shape, { optional: true })
// Expected:
{ shapeProp: { optionalProp: 'any', requiredProp: 'any' } }
// Actual:
{ shapeProp: { requiredProp: 'any' } }
Note to self: likely that shape generator isn't forwarding opts
to recursive generateProps
calls.
When providing custom generators, there is no way to distinguish which propType in particular it is being generated in each execution, and so if there are multiple properties of the same kind that need to be generated differently (for example two numbers where one of them is an ID while the other is a decimal value) it is not possible to do it.
Could it be possible to provide the propType name to the generator function as a second argument?
generateProps(PropTypes.string.isRequired)
// Expected: => 'string'
// Actual: => TypeError: generateProps expected a propType object or a React Component
This is a valid usecase, there's no good reason to throw an error here.
Airbnb created a number of custom prop types (https://github.com/airbnb/prop-types), and we should allow for the generation of these (and any other) custom types. For instance, using their empty
validator:
const customGenerators = { empty: () => null }
generateProps.init({ generators: customGenerators })
// Note: init doesn't currently take any options
import { empty } from 'airbnb-prop-types'
Component.propTypes = { alwaysEmpty: empty.isRequired }
generateProps(Component)
// => Current: {}
// => Proposed: { alwaysEmpty: null }
A real world example that I'd like right now:
generateProps.init({ generators: { dateString: () => moment().format() } })
import { dateString } from 'lib/custom-prop-types'
Component.propTypes = { insertedAt: dateString.isRequired }
generateProps(Component)
// => Current: {}
// => Proposed: { insertedAt: '2019-06-12T17:23:27-04:00' }
When I have a high order component that wraps the Component I want to test, I get an error when generating the props.
generateProps expected a propType object or a React Component
const Dropdown = WithToggle({ toggledOn, show, hide }) =>
<div>whatever</div>
const props = generateProps(Dropdown);
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.