rebassjs / components Goto Github PK

Hello everyone.

Im trying to build component library using rebass grid, styled-components, styled system and rebass/components.

I created a Text component using rebassjs/components as in here

`
/**
*

• Text

*/

import system from '@rebass/components';
const Text = system(
{
as: 'p',
},
'space',
'width',
'textAlign',
'fontFamily',
'lineHeight',
'fontWeight',
'letterSpacing',
);
Text.displayName = 'Text';

export default Text;
`

When im adding into into storybook, with @storybook/addon-info, it throws an error, when the addon is trying to generate the props table.

checkPropTypes.js:19 Warning: Failed prop type: Invalid prop type of type object supplied to PropTable, expected function.
in PropTable
in Unknown (created by Story)
in div (created by Story)
in div (created by Story)
in div (created by Story)
in div (created by Story)
in div (created by Story)
in ThemeProvider (created by Story)
in Story
in ThemeProvider

I assume its due to the fact it can not find the propType for 'is' property, it shows it as unknown.

Is there a way to fix this in code, or it will require change to the rebassjs/components?

I'm getting a slew of styled-component errors when I try to render a component created the the system-component helper.

The top level error is:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Here are the rest of the errors:

I should also mention that i I create a styled component from scratch like so:

const Text = styled.div`
  color: ${props => props.theme.colors.silver};
`

it works just fine.

Here is the output when I render the component created from system-component console.lo('ext', <Text />)

Any tips would be greatly appreciate. Thanks for a great library!

system({
  blacklist:['whatever']
});

vs

system({
  extend: Something,
  blacklist:['whatever']
});

Will wait until it's officially released, of course

Currently when doing something like this where Link is a system component,

import { Link as AppLink } from '@reach/router'

<Link is={AppLink}>Some Link</Link>

it will show this warning

Received a `object` for a string attribute `is`. If this is expected, cast the value to a string.

Is this the expected behaviour?

Hey,

I was wondering if anyone could help me understand why this super basic example is not working?

Code Sandbox link: https://codesandbox.io/s/mjvrlvvw4y

import system from "@rebass/components";

const Title = system({
  p: 5
});

function App() {
  return <Title>Hello, world!</Title>;
}

I am aware I can pass extra arguments, and indeed if I pass space as a second argument, it works. Is this by design?

I noticed that setting 'is' to View worked for me, but I never saw the docs saying anything about it, or about passing elements directly into 'is', rather than strings. FYI

Thanks for building @rebass/components, it has cleaned up a lot of code in a project my team is working on.

My only concern is that the current status is pre-release, with no roadmap or indication on the stability of the code's current state. I was curious is there is any insight/discussion on what will make this a stable release, and when that can be expected.

While rebass is using styled-components@4

https://github.com/rebassjs/rebass/blob/master/package.json#L46

This package is still under v3 release, so is not possible use both packages together :((

@jxnblk I'm currently building a component library at my company, after I was massively inspired by your work. Naturally I was using system-components with each of my components as a base, since it provided great utility functions. I noticed you moved system-components out to its own project repo, and removed the use of it from Rebass.

Would you still recommend the use of system-components to users building component libraries? Or was the use case for it in rebass just not worth it? Also, Could one use the 8 Rebass primitives as Bases in a component library, and then extend them with the functionality that system-components provide?

Anyways, love your work as always!

@rebass/components is not compatible with emotion 10

Hello,

I'm migrating from rebass@2 and styled-system to rebass@3 and rebass/components.

Because rebass/components implementation is not exactly styled-system I found a piece of code that is working fine in the old setup but no under the new stack.

The thing that I'm trying to achieve is pretty simple: Just I want to extend Flex component from rebass to accept more props values:

import system from '@rebass/components'
import { Flex as FlexBase } from 'rebass'

const Flex = system(
  { tag: FlexBase },
  'alignContent',
  'justifyContent',
  'flexDirection',
  'alignItems',
  'flexWrap',
  'maxWidth',
  'lineHeight',
  'borderRadius',
  'boxShadow'
)

Flex.displayName = 'Flex'

export default Flex

The thing I noted is the new component is not inheritance the base (Flex) component properly.

Specifically, the new component doesn't have the inheritance of the componentStyle from the base component.

I understand this could be an speficif internal related with styled-components, but actually I have no idea.

This is happening because under @rebass/components the implementation to determinate the tag component is using forwardRef and it's a bit smarter than the original implementation that is using a simple styled-components constructor.

Although looks it's not working properly as I expected, I suppose the approach of use this new implementation have advantages in terms of perfomance, so I'm interested why this change.

Feel it's related with styled-components/styled-components#1209

I upgraded to rebass 2.3.4, and moved from using system-components to @rebass/components and was still using is to extend other components, e.g.:

import system from '@rebass/components'
import { Box } from 'rebass'
export const GrowBox = system(
  {
    is: Box,
    flexGrow: 1
  }
);

Changing the is to extend fixes it. 😃

Took a little while to figure out what was causing it, so thought I'd mention it in case anyone else ran into it too. Also wondering if it's worth adding a warning in a future release?

Package versions:

• [email protected]
• [email protected]
• @rebass/[email protected]
• [email protected]