c8r / lab Goto Github PK
View Code? Open in Web Editor NEWReact UI component design tool
Home Page: https://compositor.io/lab
React UI component design tool
Home Page: https://compositor.io/lab
After setting pseudoclasses, should :hover and :active styles be applied within Lab? As far as I can tell, the default styles are applied, but the component (in this case a button), isn't picking up the other styles.
Not sure if this is more of a feature request than a bug, but thought I'd ask.
We have some external components that have flow annotations in them. Looks like those annotations aren't being stripped out before being interpreted.
Hi,
I just bought a Lab subscription but I'm having an hard time finding license key on my email.
Can I ask you an hint on where to find it
I just have an invoice and a receipt number like these below
Example:
Invoice #XXXXXXX-XXXX
Receipt #XXXX-XXXX
When an important error has an error, there is no way to delete that component using the UI until the error is resolved.
(modifying lab.json
file is a workaround that works)
Along with 2 colleagues, I'm experiencing the same problem mentioned in the closed issue, #35.
Over the last month, my colleagues and I have all made independent $8 purchases, but none of us have never received a license key, so we can't use the product. Moreover, none of us have received any response from the [email protected]
, even of an automated form.
Gotta assume you've lost a lot of prospective customers, but maybe that's not the concern here?
I'm trying to find more information about whether there is support for multiple themes?
We're already using Rebass in a project where we use themes as a way to white-label our product. I was wondering whether with compositor lab it's possible to easily switch between different themes?
Use case:
If there is an error while importing a component, lab shows the error message that React throws. This was the error message that I saw:
Invariant Violation: Minified React error #130;
visit http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=object&args[]=
for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
If I use component that is generated by Lab, the styled is not adapted.
This is only in next.js dev server.
and requesting the site for first time works fine. However, from the second time I am getting the waring
Warning: Prop `className` did not match. Server: "sc-fjdhpX ciJqcy sc-jTzLTM jgfilH" Client: "sc-bZQynM eBqvSF sc-EHOje hEhXUj"
By the way I am using basic nextjs styled-component example.
https://github.com/zeit/next.js/tree/canary/examples/with-styled-components
Any Idea how to fix this?
Thanks
I set the base font in the theme, but the exported components have no reference of it:
import styled from 'styled-components'
import { space, fontSize, width, color } from 'styled-system'
const Heading = styled('h1')([], props => ({}), space, fontSize, width, color)
Heading.defaultProps = {
fontSize: 8,
m: 0,
fontWeight: 'bold'
}
export default Heading
Am I missing something?
EDIT: I am using ThemeProvider
from styled-components
.
Importing the source file does not work right now, I simple get a syntax error because of import
statements and jsx
This also open another feature request which is to resolve component dependencies in the case of composite components. (the import/require statement depicts the relative path)
It seems like we can't refer to files (e.g. images for backgrounds) using a relative path. The only workaround I found is to use file://
urls. This does make project sharing hard because of absolute file paths, though.
Hi,
Is there a way to use props values to determine styles?
I would have expected the following to work color: this.props.stuff? 'red': 'blue'
. But it doesn't.
Can you explain how would one can achieve such a thing? Thanks.
I've noticed that theBase Font
selection field in the Theme
view, does not include fonts defined in my system. More specifically, all of my 'User' defined fonts in font-book are missing.
Is the selection being imported from a particular path?
Using 2015 MacbookPro, OSX 10.12.6.
Thanks for all the help!
It would be nice to be able to reference the spacing values when styling components.
Consider the below example.
I'd like to be able to reference the third step in the spacing scale so that changes in the scale will propagate down to the component.
Maybe a cheap solution would be to allow users to specify default props other than those set in the visual editor.
# props
{
mr: 3,
ml: 3,
}
Is there a way to import the Flex
and Box
components from the grid-styled
package to use in a composite component? Seems possible based on the docs and screenshot here -- https://github.com/c8r/lab/blob/master/docs/importing.md
Like:
<Div {...props}>
<Flex>
{props.foo.map(bar =>
<Box>
...
</Box>
)}
</Flex>
</Div>
Hey! Didn't buy a license yet but the tool looks awesome!
Does the tool support typescript? Would be awesome if it would create typings automatically!
Cheers!
Hi, Lab folks,
In building components, I find myself, of course, using the "Examples" feature to not only ensure my props are working as intended, but also to test different, anticipated situations for my components.
As such, though it's super easy to hit Add Example and go on with my tweaking, I can't find any way to rearrange my examples without manually editing the example code blocks.
Any plans for drag-dop to rearrange examples?
Thanks!
PS: Using Lab is fun. Looking forward to Zero.
On Version 0.6.7 exporting components is not working..
I got a 404 error when I tried to install compositor/mono
npm ERR! 404 Not found : @compositor/mono
npm ERR! 404
npm ERR! 404 '@compositor/mono' is not in the npm registry.
I looked at it in npmjs.com to be sure and got a 404 again
Thanks for your help
I have not received a license key email. Further, no one responds to my emails to hello and support addresses. Please advise.
Great work with Lab so far! Had some questions/feedback:
Is it possible to use JSX in children
prop? This would allow users to create more complex examples.
Is it possible to provide default props? Some styles seem to generate this, but it might be helpful to provide defaults for other props too.
rem
instead of px
for units would be a nice.
Can we specify element type
as a prop or is
prop like rebass uses? For example I canβt make a generic heading component. This might be out of scope which is understandable. For now I ended up using withComponent
https://github.com/winkerVSbecks/triangle-lab-demo/blob/master/src/designSystem/index.js
I was using Lab with a create-react-app project. CRA doesn't allow imports from outside src
so, theme.json
can't be imported. Had to manually copy it into src
.
It would be helpful to get some more documentation/examples of importing components. I just wasn't able get that working. import
, JSX
, etc. kept breaking it.
If there is any context that can not be inferred from the component and its existing configuration settings, it would be nice to have a way to annotate the component.
For example, a PM could annotate components with feedback.
Maybe that is beyond the scope of this tool? Not sure. Just a thought.
Hello, wanted to get started with compositor lab, but I ran into a blank screen after clicking new project. When I open up the devtools, I get this error:
The documentation makes it sound like lab.json
is supposed to be generated by the app, but it looks like that's not happening for some reason.
version: 0.0.67
No one answers support email to stop billing.. Sorry for doing this here. Next steps is to either have my bank block you or I have to cancel the card you are billing.
I've noticed that babel-plugin-styled-components
does not recognize styled components written without template literals, e.g.
styled('button')([], space)
rather than
styled('button')`${space}`
In my case, components generated with lab are not given componentIds when the babel plugin's ssr mode is enabled.
For this reason, would it be possible to add an option to choose which syntax is used to export components from lab?
Thank you for your work on this project.
Deleted
I see documentation for exporting to cxs
, but that is not an option for me.
How do I enable this?
Hola π
Huge fan of Lab. The more I play with it, the more I love.
Is there a way to update an existing style guide? Or to remove old ones? I love that feature, I just want to clean up the previous versions that I published.
Hi there, Lab looks like a promising tool for prototyping!
Do you guys have an existing database for bugs / things that aren't working? As it's a beta, I'm sure there's plenty that you are aware of, so I rather not pollute Github issues with stuff that you're already aware of.
Either case, two issues I encountered in 0.0.55:
ReferenceError: NewComponentName is not defined
I am unable to import existing composite components when creating a new composite component.
Is this by design?
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.