I have met skidding last February when this was project was in its early stages. We walked through Cosmos and it definitely was an inspiration to Carte blanche. Skidding even helped us to design the initial props form: https://github.com/carteb/carte-blanche/issues/47
Cosmos in my opinion is a fantastic tool and covers even some areas we haven't touch yet, but planning to do soon like injecting/manipulating the internal state of a component.
While there a many more differences these are probably the most interesting ones:
- The core of Carte blanche is a Webpack plugin. By hooking into the main compilation of Webpack Carte blanche can identify your components and list them in an application living within your running server on different URL path. The coolest part from my perspective is that we inherit all your webpack settings by default. No need to configure your loaders. Cosmos in comparison is a separate app.
- In Cosmos your need to write your examples by hand. Carte blanche reads out your propTypes/Flow types and allows us to generate a form input for each of your properties including nested structures like a person object containing an avatarUrl, firstName & lastName. This approach allowed us to create some kind of UI fuzz-testing feature in the interface. While I believe that it's important to focus your efforts designing/developing for the most likely cases it's also relevant to cover edge-cases. Fuzz-testing is a great way to discover them.
I hope this help. Let me know if you any other questions :)
Do you only support autogenerated inputs? Is there also a way to create scenario-like examples?
I say this because I'm working on an app with a large drawing canvas component at the moment, and being able to produce hand crafted examples of specific drawing scenarios is really powerful.
I'm doing with this devboard[1] and I've created a mini-DSL within my cards to describe a series of mouse interactions, which can either be played back immediately or one-at-a-time to display the interaction and animations.
Being able to combine this with fuzz-testing would be really cool!
This is not yet implemented, but since the core of CarteBlanche is a plugin system[0] making this happen is definitely possible!
We're happy to provide any support you need to create this, we'd love to see the ecosystem around CarteBlanche thrive to all sorts of different use cases.
I haven't tested it yet, but it should. The magic behind redux-undo is a reducer enhancer (higher order reducer) - it returns a function that processes undo/redo and then (if appropriate) calls your reducer. If your reducer uses immutable data-structures, redux-undo will simply store your data (immutable or not) in the history.
redux-undo itself doesn't use immutable data structures, though (for dependency reasons). However, I do make sure not to change any data directly. (you know, the usual redux reducer guidelines)
Hey Iwein, there are couple fundamental issue with the way we style HTML elements today. CSS is exposing every declaration into a global namespace. This makes it to eliminate dead code as it is hard to figure out where it is used. Many techniques like BEM were invented and declared as "the right way" to do styling.
I don't know if inline-styles defined in JS are the end-game, but working with it in combination with building components turned out to be working way better for us than using CSS.
A boilerplate including user authentication & authorization
Tech: Automerge, tRPC, Prisma and deployment on fly.io and vercel.com Bonus: includes explanation videos on the website