c8r / lab

React UI component design tool

Compositor Lab beta

• Download
• Documentation

lab's Issues

Base font issues

I set the base font in the theme, but the exported components have no reference of it:

Setting base font

Heading component

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

Result

Am I missing something?

EDIT: I am using ThemeProvider from styled-components.

Cannot annotate external components with Flow

We have some external components that have flow annotations in them. Looks like those annotations aren't being stripped out before being interpreted.

On Version 0.6.7 exporting components is not working..

On Version 0.6.7 exporting components is not working..

feature request: ability to annotate components

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.

Typescript Support

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!

Updating published style guides

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.

Rearrange Examples

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.

Reporting bugs

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:

• When you rename an existing component, some reference doesn't get updated, so you get ReferenceError: NewComponentName is not defined
• After you rename it back, and sometimes when reloading, padding does not get auto-applied back - you have to edit some value for it to re-appear.

Use with babel-plugin-styled-components when ssr is enabled

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.

Support for multiple themes?

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?

[Feature request] Reference images in project folder

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.

[Feature request] Delete erroneous imported components

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)

Can't reference spacing from within style object

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,
}

Invariant Violation: Minified React error #130;

Running macOS High Sierra and Lab version 0.0.46 and when trying to compose multiple components I get this error. React is installed globally. Any ideas?

Import components from npm?

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>

@compositor/mono npm package not found

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

[Feature request] Import untranspiled 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)

I can't cancel my Lab subscription

Deleted

Can't compose composite components

I am unable to import existing composite components when creating a new composite component.

Is this by design?

Questions/Feedback

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.

Pseudoclasses not applied to Button Component in 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.

Unable to find license key in the purchase email

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?

Creating a new project leads to a blank screen

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

cannot export to `cxs`

I see documentation for exporting to cxs, but that is not an option for me.

How do I enable this?

Can't name color "bluegreen" after color "blue"

I'm trying to name a color for our theme with the name "bluegreen" and its blocking me from typing anything after the "u" in "bluegreen".

I can force it by typing "blugreen" then inserting the "e" in. I'm assuming this is to prevent duplication of names.

[Bug] Theme > Base Font > selection is missing fonts

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!

No license key or email response

I have not received a license key email. Further, no one responds to my emails to hello and support addresses. Please advise.

Style composed components

What's the expected way to style composed components? I want to use flexbox inside this FilterBar, for example:

no one answers support email to stop billing

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.

[Bug] lab uses React in production mode which means bad error messages

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.

Next.js with generated component from lab.

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

Using props to determine styles

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.

Unable to find license key in the purchase email

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