rebassjs / rebass Goto Github PK

View Code? Open in Web Editor NEW

7.9K 60.0 658.0 15.31 MB

:atom_symbol: React primitive UI components built with styled-system.

Home Page: https://rebassjs.org

License: MIT License

JavaScript 100.00%

javascript react css ui styled-components rebass design-system react-components styled-system components

rebass's Introduction

Rebass

React primitive UI components built with Styled System. https://rebassjs.org

npm i rebass

Getting Started

import React from 'react'
import { Box, Heading, Button } from 'rebass'

export default props =>
  <Box>
    <Heading>Hello</Heading>
    <Button>Rebass</Button>
  </Box>

Features

Start your design system without boiling the ocean
Build consistent UI with design constraints and user-defined scales
Best-in-class developer ergonomics with Styled System props
First-class support for theming & fully compatible with Theme UI
Quick, mobile-first responsive styles with array-based syntax
Flexbox layout with the Box and Flex components
Flexibility built in for high design & development velocity
Minimal footprint at about 4KB

"One of the best React component libs out there"

– Max Stoiber

"Rebass is the Bootstrap of React."

– Jori Lallo

"A whopper component library built on styled-components. Responsive, systematic, scalable...the business!"

– Colm Tuite

Principles

Rebass is intended to be:

Minimal
Useful
Unopinionated
Flexible
Consistent
Extensible
Themeable

Do one thing, and do it well

– Unix philosophy

See Patterns for Style Composition in React for more on some of the thought behind Rebass.

Documentation

CodeSandbox

Try it out: https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/sandbox

Upgrading from v3

See the Migration Guide.

Previous Versions

Contributing | MIT License

rebass's People

Contributors

Stargazers

Watchers

Forkers

firedev chadedrupt jeroencoumans swolidity 1800joe coderabsolute yelled3 shipeng22022 reubenmiller bradparks corymsmith pandaduc jayfliz cganey fab-du artlantis keysethos springofteam rakesh-mohanta nishp1 kannans primozs jfilali queckezz marufsiddiqui charlesjavelona mmilo evilfaust jacobbubu dispalt mvanlonden jpiv markandrewj nfcampos kozaksystem carloscuatin andrewho83 johno discrete andrewfitzpatrick nwind21 martinklepsch ariesw tushaidan andrewsuzuki frankie-666 bentatum agtlucas eliot-akira cosmosdawn simeonc uxtx johnsonchandra mdenisov iamricard hackur npmcdn-to-unpkg-bot ptgolden dmackerman veenedu pabloboerr pcgilday blemoine167 davisshaver rileytomasek aretecode-forks lachlanjc theopak cuulee mauricionobrega modulexcite gyfis maxbeatty colbyr maxmurdoch jsolis lizraeli samjt hashtagbeauty bleikamp namuol synle hhy5277 kerumen bhageena kidjp85 nonking lyrl mengyou658 emmatown eddig williamtran29 deemajs greg-murray-volusion johnpolacek billgloff valpet praxxis zagorakiss zakzubair

rebass's Issues

Stat "instance overrides" styling of value, unit, label

If I am not missing something currently "instance styling" of value, unit and label is not possible with style proptype? Change of proptypes fontSize bold and scale for example.
Cheers

max height/width example for Media component?

First instinct was thinking that there should be props for it, but you probably know of a better way. Do you have an example of doing this?

Problem is super large images, or images of different sizes create crazy looking lists.

Is using reflexbox the solution here?

Broken link

There is a typo on link to jxnblk.com/rebass on https://github.com/jxnblk/rebass/blob/master/README.md .

colors.css isn't in package.json?

This line was giving me an error.

Adding "colors.css": "^2.3.0" to package.json fixed it

lists?

open to a PR for lists + different list items?

Warning: "Invalid prop `Component` supplied to `NavItem`" when using react-router Link

It looks like the Link component class supplied by React-Router (v2.0.0) doesn't pass the NavItem.propTypes.Component test (it's not a React.PropTypes.node, it's a class).

My code:

import { Link } from 'react-router';
// ...
<NavItem Component={Link} to='/'>Home</NavItem>

console warning:

Warning: Failed propType: Invalid prop `Component` supplied to `NavItem`, expected a ReactNode. Check the render method of `Root`.

It looks like the Link is rendered correctly, however, so I think it's just a matter of changing the propTypes rule to accept a component class?

Error: Cannot find module "colors.css"

I include a module:

import {Button} from 'rebass'

When I try to build this with webpack, I get this error:

Error: Cannot find module "colors.css"

node_modules/rebass/dist/Button.js requires colors.js, which in turn requires colors.css. However, this file is not packaged in the dist directory, thus causing the error.

Any suggestions on how to solve this?

Cannot find module '.'

This happens on Node 0.12.7 + Babel 6
Seems to be resolved after switching to Node 5.7

I think it has to do with the way things are exported in index.js

var _ = require('.');

Rebass doesn't work with React 0.15

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@^15.0.1
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0

I'm getting this error while I'm trying install rebass to my React project. Is there any chance to fix this?

Subcomponents in examples don't show parent component

Item should be Dropdown.Item. See: http://jxnblk.com/rebass/docs/components#Dropdown

Using font from npm module

Hi,

i was wondering if there is any way to use a font from a npm module?

Greetz,
boristian

@jxnblk: Thank you for sharing your work., it's awesome.

Even tho the components you've written are all stateless components, they are still not treated as pure by React; which means that React will re-render them all even tho their props did not change.

See facebook/react#5677

I understand that Layout components like Container, Box should not behave this way otherwise child components would not be rendered at all. but leaf components such as Button etc would benefit from it ?

On way we could get around this here would be to implement the shouldComponentUpdate method and do a shallowCompare of the props.

Use Babel (and ES6)

Using Babel and ES6 is awesome. Rebass should use it! Happy to provide a PR if it's a direction you'd like to take it.

Layout Components

Object.assign is not a function 😞

Chromium (37) and Firefox (31) on Travis are oldish and complain that Object.assign is not a function: https://travis-ci.org/the-grid/ed/builds/115555196#L962

I'll see if this polyfill helps: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill

InputRange Should Have a Callback Function

Firstly, love what you've done here and really appreciate your efforts. I can see this being very useful. I'd love to see a react-native version.

For things like InputRange, shouldn't there be a callback function, something like onValueChange={ val => console.log(val) } to report the value back up to the parent component?

Overlay component has invalid inline css property zIndex

Should be z-index

Made a fork to submit PR but was trying to get the demo to run to check but was getting

ERROR in ../src/index.js
Module not found: Error: Cannot resolve module 'babel'

events on input like `onChange`, `onBlur` get called twice

Hey @jxnblk, awesome library!

When using the <Input /> component, event handlers always get called twice. This is because you capture all events into rootProps and after that you apply them to two <Base />components

  const {
    rounded,
    backgroundColor,
    theme,
    inverted,
    // event handlers go into this variable
    ...rootProps
  } = props

// later
<Base
  // applies onClick, onBlur etc.
  {...rootProps}
>
  // applies onClick, onBlur etc. again
  <Base
    {...props}
    type='input'
  >
  </Base>
</Base>

My best advice is to switch to something like a rootProps prop on Input and then delegate the rest of the props to the Input component. I can create a pull request if you agree with that.

const Input = ({
  label,
  name,
  type,
  message,
  hideLabel,
  children,
  rootProps,
  ...props
}, { rebass }) => {
  const {
    rounded,
    backgroundColor,
    theme,
    inverted
  } = props

  return (
    <Base
      {...rootProps}
      >

      <Base
        {...props}
      />
        {message && <Text small children={message} />}
    </Base>
  )
}

Another option would be to filter out all events and delegate them to the second <Base />. This would require a list of events though.

EDIT: Same problem exists for <Select />

Build still failing

When executing , you still have some import failing, i think due to wrong package.json in other repos

README example wrong/confusing

The example in the README declares class App and uses root element of . This is confusing! Maybe it should use <Container> instead?

class App extends React.Component {
  render () {
    return (
      <App> ...

Two pane interface

List of items on left
Selecting item shows detail in right pane
Should collapse into a single window drilldown

See http://designinginterfaces.com/patterns/two-panel-selector/

Icon?

http://jxnblk.com/rebass/#ButtonCircle demo uses <Icon> ... a link to http://jxnblk.com/react-geomicons/ in the ButtonCircle docs would be helpful.

React Router

How does one create a NavItem with a react-router Link? Excuse my n00b-ness, I'm quite new to react.

Calendar Visualization/Date-Picker

With support for:

Multiple months
Date range picking (a la GA)
Size options (compact, large, etc.)

npm snafu

I installed and poked a bit before seeing that 1.5 (from npm install rebass and github) doesn't match the docs (0.2.0-beta7). Then I had to npm install colors.css

Basic Components

Form Components

Add tests

propTypes

Just seems like the right thing to do: https://facebook.github.io/react/docs/reusable-components.html#prop-validation

Warning: "Invalid prop `Component` supplied to `LinkBlock`" when using react-router Link

same as #48, but for LinkBlock instead of NavItem

import { Link } from 'react-router';
// ...
<LinkBlock Component={Link} to='/'>Home</LinkBlock>

console warning:

Warning: Failed propType: Invalid prop `Component` supplied to `LinkBlock`, expected a ReactNode. Check the render method of `Root`.

make styles object accessible on each component

it would be nice to be able to do this

import { Input } from 'rebass'

// blah blah
<CustomInput
  type='whatever'
  style={{
    ...Input.style,
    customThing: 123
  }}
/>

CHANGES.md

Is there a place to look to see changes?

Issues during build

First issue is that in package.json you reference

"basscss.github.io": "github:basscss/basscss.github.io"

but since its ssh version only you get access. So npm install will only work if changed to:

"basscss.github.io": "https://github.com/basscss/basscss.git"

then npm start fails on some docs.css, here is the paste bin http://pastebin.com/DQhkDdDp

Transparent Btn option

Dropdown menu on demo not opening

Chrome 49.0.2623.75 (Official Build) (64-bit)

Dumb and Smart Components

All UI (visually styled) components should be dumb/stateless
Smart components should be used to handle progressive disclosure, removing elements, etc.

Docs MVP

Introduce shorthand properties

I really like the minimalist approach of this lib after ditching material-ui.

I have a proposal to make the components even more easier to read:

Given the current state

<Flex
  align="center"
  justify="space-between"
  wrap={true}
>

What do you think about:

<Flex center space-between wrap>

Would that make sense?

Documentation examples are all minified

All code examples show minified tags, e.g. http://jxnblk.com/rebass/#Col:

<t>
  <t
    sm={6}
    md={4}
    lg={3}>
    Col sm6 md4 lg3
  </t>
  <t
    sm={6}
    md={4}
    lg={3}>
    Col sm6 md4 lg3
  </t>
  <t
    sm={6}
    md={4}
    lg={3}>
    Col sm6 md4 lg3
  </t>
  <t
    sm={6}
    md={4}
    lg={3}>
    Col sm6 md4 lg3
  </t>
  <t
    sm={6}
    md={4}
    lg={3}>
    Col sm6 md4 lg3
  </t>
  <t
    sm={6}
    md={4}
    lg={3}>
    Col sm6 md4 lg3
  </t>
</t>

Use children instead of steps prop for SequenceMap

Would you be open to a component called Step (or something similar) that can be used as children to SequenceMap instead of a steps property with a custom DSL?

Client side use

Seems clear how to use rebass in the node environment, but I'd like it made clearer how to use it on the client side.

Default styles for complex components

What is the best approach for setting a default style on complex components? In other words, how do I add a global style for the help text underneath an <Input /> control?

Are you opened to pull request?

if yes, there is a bit of work to make it work since you make internal ref to github repos we dont have access to. Also half of npm deps are out-of date. Basically its unbuildable in the current state.
Do you think you can make it ready for PRs ?
I'd love to propose you some new components :p

Classname prop

Would it not be nice to be able to pass down classNames on components so you don't have to wrap the components with another block just to put a className on it?

For example:

<Toolbar className="Nav" color="white"></Toolbar>

instead of:

<nav className="Nav">
  <Toolbar color="white"></Toolbar>
</nav>

I would be willing to submit a PR to address this if this is a legitimate issue and not just how you explicitly designed the components.

Thanks!

Andy

Tab Completion (Textarea)

Tab completion with syntax dictionary