diff --git a/.babelrc b/.babelrc index add93660..43cb2bc1 100644 --- a/.babelrc +++ b/.babelrc @@ -1,6 +1,7 @@ { "presets": [ "env", + "stage-0", "react" ] } diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 9cd3c89c..2999a541 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -12,14 +12,16 @@ Please **be nice** and read the following before contributing. Folders: - `/src` source code - `/tests` tests, including snapshots -- `/stories` stories for React Storybook - `/docs` source for the documentation/demo site ### Source Code All exports are handled in `src/index.js`. -The component styles and configuration is in `src/components.js`, which is passed to `src/create-library.js` to export the components. -The `src/create-component.js` function tags a component configuration object and returns a React styled component, adding two higher order components in the process. +Each component is its own module in the `src/` folder. +Be sure to familiarize yourself with +[styled-system](https://github.com/jxnblk/styled-system) +before making changes. + ### Tests diff --git a/README.md b/README.md index e9ff7d52..afc1a3db 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,17 @@ # Rebass -Functional React UI component library, built with [styled-components](https://www.styled-components.com) +React UI component library & design system, +built with [styled-components][sc] and [styled-system][system]. -[![Build Status](https://travis-ci.org/jxnblk/rebass.svg?branch=master)](https://travis-ci.org/jxnblk/rebass) +[![Build Status][badge]][travis] + +[badge]: https://img.shields.io/travis/jxnblk/rebass/master.svg?style=flat-square +[travis]: https://travis-ci.org/jxnblk/rebass http://jxnblk.com/rebass ```sh -npm i rebass +npm i rebass@next ``` Rebass is a library of highly-composable, primitive UI components for React, @@ -32,17 +36,32 @@ const App = props => ( ## Features +- Kickstart your own React component library +- Responsive style props from [styled-system][system] +- Flexbox grid with [grid-styled][gs] +- Style encapsulation with [styled-components][sc] - Functional stateless UI components -- Style encapsulation with styled-components -- No external CSS dependencies - Configurable theming - Extensible base components - Design-system based consistency - Built for responsive web design -- Reduces the need to write custom CSS -## Architectural Approach +> "One of the best React component libs out there" +> – [Max Stoiber](https://twitter.com/mxstbr/status/882657561111080960) + +> "Rebass is the Bootstrap of React." +> – [Jori Lallo](https://twitter.com/jorilallo/status/882990343225868289) + +> "A whopper component library built on styled-components. Responsive, systematic, scalable...the business!" +> – [Colm Tuite](https://twitter.com/colmtuite/status/882715087936606210) + + +## Documentation + +http://jxnblk.com/rebass + +### Architectural Approach Rebass is built around a component architectural approach inspired by Dan Abramov’s [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.ah4312963), @@ -60,327 +79,23 @@ See [Patterns for Style Composition in React](http://jxnblk.com/writing/posts/pa for more on some of the thought behind Rebass. -## Base Props - -All Rebass components are wrapped in a higher order component that handles -design-system-based responsive style props using [styled-system](https://github.com/jxnblk/styled-system). - -### Width - -```jsx -// Numbers from 0–1 are converted to percentage widths -// e.g. width 50% - - -// Numbers greater than 1 are converted to pixels - - -// Strings can be used for other values - - -// Arrays can be used for mobile-first responsive styles - - -// The shorthand `w` prop can be used instead of `width` - -``` - -### Font Size - -The `fontSize` prop makes referencing steps on the typographic scale -simple and helps promote consistent design. - -```jsx -// Numbers are used to reference steps on the typographic scale -// i.e. the `theme.fontSizes` array - - -// Numbers greater than the length of the typographic scale -// are converted to pixels - - -// Strings can be used for other values - - -// Arrays can be used for mobile-first responsive styles - - -// The shorthand `f` prop can be used instead of `fontSize` - -``` - -### Margin and Padding - -The margin and padding props make referencing steps on the spacing scale -(i.e. the `theme.space` array) simple and help promote consistency in -layout design without the need to add custom margin and padding declarations throughout an application. -The margin and padding props use a shorthand syntax. - -Prop | Meaning ----|--- -`m` | margin -`mt` | margin-top -`mr` | margin-right -`mb` | margin-bottom -`ml` | margin-left -`mx` | margin-left and margin-right -`my` | margin-top and margin-bottom -`p` | padding -`pt` | padding-top -`pr` | padding-right -`pb` | padding-bottom -`pl` | padding-left -`px` | padding-left and padding-right -`py` | padding-top and padding-bottom - -```jsx -// Numbers reference steps on the spacing scale -// e.g. 8px - - -// Numbers greater than the length of `theme.space.length` are converted to pixels - - -// Negative values can be used to add negative margins - - -// Strings can be used for other values - - -// Arrays can be used for mobile-first responsive styles - -``` - -### Colors - -The `color` and `bg` props make using colors from the color palette simple to help promote design consistency. - -```jsx -// Keys reference values in the color palette object - - -// Background color can be set with the `bg` prop -
Button
A Button
Button a
ButtonOutline
ButtonCircle
ButtonTransparent
Link
Link
NavLink
NavLink
BlockLink
BlockLink
Close
Text
Text
Text bold
Text bold
fontSize 9
fontSize 8
fontSize 7
fontSize 6
fontSize 5
fontSize 4
fontSize 3
fontSize 2
fontSize 1
fontSize 0
Font Sizes

Lead

Lead
Caps
Caps
Small
Small
Pre
Pre
Code
Code
Samp
Samp
Blockquote
Blockquote
Measure
Measure
Truncate
Truncate
Label
Input
Select
Textarea
Radio
Checkbox
Slider
Image
BackgroundImage
Avatar
Progress
Divider
Container
Container
Row
Column
Row
Column
Column
Border
Border
Card
Card
Message
Message
Group
Toolbar
LinkLink
Toolbar
Badge
Badge
A
Circle
Relative
Relative
Relative
Absolute
Absolute
Fixed
Fixed
TabsTabTab
Tabs
Dot
Drawer
Drawer
Tooltip
Tooltip
Embed
Panel.Header
Panel
Panel.Footer
Panel
Modal
Donut
 \ No newline at end of file diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index 6b57136c..00000000 --- a/docs/index.html +++ /dev/null @@ -1,29 +0,0 @@ - - -Rebass - - - - - - - - -
- - diff --git a/docs/package.json b/docs/package.json index 35dc12d2..f1070bcb 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,22 +1,33 @@ { "scripts": { - "start": "webpack-dev-server", - "build": "NODE_ENV=production webpack -p", + "start": "x0 dev src/App.js -op 9000", + "build": "x0 build src/App.js --basename='/rebass' -d .", + "demo-build": "x0 build src/Kit.js -d demo", + "demo": "x0 dev src/Kit.js -p 9009", "card": "repng src/Card.js -d 1 -w 1024 -h 512 -o . -f card", "card-dev": "repng src/Card.js --dev -P 8081" }, "devDependencies": { - "babel-loader": "^7.1.2", - "hidden-styled": "^1.0.0-0", + "@compositor/kit": "^1.0.0-1", + "@compositor/markdown": "0.0.25", + "@compositor/x0": "^3.2.1", + "ok-webfont": "^1.0.0-1", "raw-loader": "^0.5.1", - "react-live": "^1.7.1", - "react-markdown": "^3.1.4", - "react-x-ray": "^1.0.0-4", - "refunk": "^1.0.0-2", + "react-loadable": "^5.3.1", + "react-markdown": "^3.2.0", + "react-measure": "^2.0.2", + "react-router": "^4.2.0", + "react-router-dom": "^4.2.2", + "refunk": "^2.2.4", "reline": "^1.0.0-beta.3", "repng": "^2.0.0-alpha.1", - "rrx": "^1.0.0-3", - "webpack": "^3.10.0", - "webpack-dev-server": "^2.10.0" + "styled-components": "^3.1.6" + }, + "x0": { + "cssLibrary": "styled-components", + "config": "webpack.config.js", + "routes": [ + "/" + ] } } diff --git a/docs/src/About.js b/docs/src/About.js deleted file mode 100644 index 13fc5d7f..00000000 --- a/docs/src/About.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react' -import { - Container, - Lead, -} from 'rebass' - -const About = props => ( - - - Rebass is a library of highly-composable, primitive UI components for React, - built with styled-components to keep styles isolated and reduce the need to write custom CSS in your application. - Based upon a configurable design system, - Rebass‘s props API makes building consistent, responsive web apps simpler and faster. - - -) - -export default About diff --git a/docs/src/App.js b/docs/src/App.js index 767efcce..2f77939d 100644 --- a/docs/src/App.js +++ b/docs/src/App.js @@ -1,7 +1,14 @@ import React from 'react' import styled from 'styled-components' -import { createProvider } from 'refunk' -import { createRouter, Link } from 'rrx' +import connect from 'refunk' +import { + BrowserRouter, + StaticRouter, + Route +} from 'react-router-dom' +import Loadable from 'react-loadable' +import pkg from '../../package.json' + import { Provider, Sticky, @@ -9,86 +16,93 @@ import { Flex, Box, Border, + theme, } from 'rebass' -import NavBar from './NavBar' -import Home from './Home' -import GettingStarted from './GettingStarted' -import PropsView from './PropsView' -import GridSystem from './GridSystem' -import Theming from './Theming' -import Extending from './Extending' -import ServerSide from './ServerSide' -import ComponentList from './ComponentList' -import Component from './Component' -import SideNav from './SideNav' -const StickySide = styled(Box)` - // display: none; +import Head from './Head' +import Menu from './Menu' +import ScrollTop from './ScrollTop' +import NavBar from './NavBar' +import Scripts from './Scripts' - @media screen and (min-width: 32em) { - flex: none; - order: 0; - display: block; - position: -webkit-sticky; - position: sticky; - top: 0; - bottom: 0; - height: 100vh; - overflow: auto; - } -` +const isServer = typeof document === undefined +const Router = isServer ? StaticRouter : BrowserRouter +const loading = () => false -const App = props => { - const { pathname } = props.location +const Home = Loadable({ loading, loader: () => import('./Home') }) +const GettingStarted = Loadable({ loading, loader: () => import('./GettingStarted') }) +const PropsView = Loadable({ loading, loader: () => import('./PropsView') }) +const GridSystem = Loadable({ loading, loader: () => import('./GridSystem') }) +const Theming = Loadable({ loading, loader: () => import('./Theming') }) +const Extending = Loadable({ loading, loader: () => import('./Extending') }) +const ServerSide = Loadable({ loading, loader: () => import('./ServerSide') }) +const ComponentList = Loadable({ loading, loader: () => import('./ComponentList') }) +const Component = Loadable({ loading, loader: () => import('./Component') }) - return ( - - - - - - - - - - - - - - - - - {pathname !== '/' && ( - - - - - - )} - - - ) -} +const App = connect(class extends React.Component { + render () { + const { + update, + basename, + pathname, + pkg, + theme, + menu, + } = this.props -const theme = { - maxWidth: 1280 -} + return ( + + + + + + + +
update({ menu: false })}> + } + /> + + + + + + + + + + +
+ + + + + + ) + } +}) -const state = { +App.defaultProps = { + pkg, + menu: false, xray: false, - overlay: false, + modal: false, drawer: false, checked: false, fixed: false, + theme: { + ...theme, + maxWidths: [ + 1280 + ] + }, } -export default createProvider(state)(createRouter(App)) +export default App diff --git a/docs/src/CTA.js b/docs/src/CTA.js deleted file mode 100644 index 351a1943..00000000 --- a/docs/src/CTA.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' -import { Link } from 'rrx' -import { - Flex, - Box, - Text, - Pre, - Button, -} from 'rebass' -import Section from './Section' - -const CTA = props => ( -
- - Read the docs to get started - - - 
-        npm i rebass
-
-
-) - -export default CTA diff --git a/docs/src/Card.js b/docs/src/Card.js index da98b029..0a967c1e 100644 --- a/docs/src/Card.js +++ b/docs/src/Card.js @@ -1,24 +1,22 @@ import React from 'react' -import { Provider, Banner } from '../src' import Logo from './Logo' const photo = 'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20' const Card = props => ( - - - - - +
+ +
) export default Card diff --git a/docs/src/Colors.js b/docs/src/Colors.js deleted file mode 100644 index 775bf018..00000000 --- a/docs/src/Colors.js +++ /dev/null @@ -1,68 +0,0 @@ -import React from 'react' -import { - Flex, - Box, - Text, - Link, - Pre, - colors -} from 'rebass' -import Section from './Section' - -const keys = Object.keys(colors) - .filter(key => !/black|white|base|[0-9]$/.test(key)) -const ten = Array.from({ length: 10 }).map((n, i) => i) - -const Card = props => ( - - - - {ten.map(n => ( - - ))} - - 
-      {props.name} {props.value}
-
- -) - -const Colors = props => ( -
- - Rebass includes a default color palette generated by - {' '} - - Palx - , - which includes 12 hues, grays, and luminance-scaled variations of each hue for nuanced UI color design. - - - {keys.map(key => ( - - ))} - -
-) - -export default Colors diff --git a/docs/src/Component.js b/docs/src/Component.js index f358f8c1..968ea7c1 100644 --- a/docs/src/Component.js +++ b/docs/src/Component.js @@ -1,5 +1,4 @@ import React from 'react' -import { createView } from 'rrx' import { Flex, Box, @@ -9,8 +8,10 @@ import Example from './Example' import Pagination from './Pagination' import { components } from './examples' +console.log('Component') + const Component = props => { - const { name } = props.params + const { name } = props.match.params const index = components.indexOf(name) const previousName = components[index - 1] const nextName = components[index + 1] @@ -31,7 +32,7 @@ const Component = props => { {name} @@ -47,4 +48,4 @@ const Component = props => { ) } -export default createView(Component) +export default Component diff --git a/docs/src/ComponentList.js b/docs/src/ComponentList.js index 21b80c18..8f3a51e3 100644 --- a/docs/src/ComponentList.js +++ b/docs/src/ComponentList.js @@ -1,10 +1,12 @@ import React from 'react' -import { createView, Link } from 'rrx' +import { Link } from 'react-router-dom' import { Flex, + Box, Heading, BlockLink, Card, + Border, Divider, Pre, } from 'rebass' @@ -13,7 +15,7 @@ import PageTitle from './PageTitle' import Preview from './Preview' const CompCard = props => ( - + ( overflow: 'hidden' }} /> - - 
{props.name}
- + + 
{props.name}
+ ) const ComponentList = props => ( @@ -32,17 +34,14 @@ const ComponentList = props => ( {components.length} Components + flexWrap='wrap' + my={4}> {components.map(name => ( + width={[ 1/2, 1/2, 1/3, 1/4 ]}> ( ) -export default createView(ComponentList) +export default ComponentList diff --git a/docs/src/Components.js b/docs/src/Components.js deleted file mode 100644 index 6acd49ed..00000000 --- a/docs/src/Components.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react' -import { Link } from 'rrx' -import { - Flex, - Box, - Text, - Code, - NavLink, -} from 'rebass' -import Section from './Section' -import { components } from './examples' - -const ComponentsSection = props => ( -
- - Rebass includes {components.length} stateless functional components. - - - {components.map(name => ( - - - - ))} - -
-) - -export default ComponentsSection diff --git a/docs/src/Configuration.js b/docs/src/Configuration.js deleted file mode 100644 index 5270588e..00000000 --- a/docs/src/Configuration.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react' -import { - Text, - Code, -} from 'rebass' -import Section from './Section' -import Live from './Live' - -const Configuration = props => ( -
- - {`The core design system in Rebass can be configured using the `} - component. - - -
-) - -const code = ` - - Hello - - -` - -export default Configuration diff --git a/docs/src/Container.js b/docs/src/Container.js new file mode 100644 index 00000000..d53cef8a --- /dev/null +++ b/docs/src/Container.js @@ -0,0 +1,9 @@ +import React from 'react' +import { Container } from 'rebass' + +export default props => + diff --git a/docs/src/Customizing.js b/docs/src/Customizing.js deleted file mode 100644 index 64339e40..00000000 --- a/docs/src/Customizing.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react' -import { - Text, - Code, -} from 'rebass' -import Section from './Section' -import Live from './Live' - -const Customizing = props => ( -
- - Any component can be customized by passing it to the styled function from styled-components. - - -
-) - -const code = `const CustomButton = styled(Button)\` - border: 1px solid rgba(0, 0, 0, .25); - background-image: linear-gradient(transparent, rgba(0, 0, 0, .125)); - box-shadow: 0 0 4px rgba(0, 0, 0, .25) -\` - -const App = () => ( - - Hello - -) - -render() -` - -export default Customizing diff --git a/docs/src/Demo.js b/docs/src/Demo.js deleted file mode 100644 index 52213547..00000000 --- a/docs/src/Demo.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' -import { Box } from 'grid-styled' -import Section from './Section' -import Live from './Live' - -const Demo = props => ( -
- - - -
-) - -const code = `
- - Hello - - - Beep - - - - - - - - - - - - - -
` - -export default Demo diff --git a/docs/src/Example.js b/docs/src/Example.js index 303c07ac..a1668737 100644 --- a/docs/src/Example.js +++ b/docs/src/Example.js @@ -1,6 +1,7 @@ import React from 'react' -import { connect } from 'refunk' -import Rebass, { +import connect from 'refunk' +import * as Rebass from 'rebass' +import { Flex, Box, Heading, @@ -19,7 +20,7 @@ const Example = props => {
props.update(toggleXray)} children='X-Ray' /> @@ -27,4 +28,4 @@ const Example = props => { ) } -export default connect()(Example) +export default connect(Example) diff --git a/docs/src/Extending.js b/docs/src/Extending.js index 866b1044..ddf5503f 100644 --- a/docs/src/Extending.js +++ b/docs/src/Extending.js @@ -1,5 +1,4 @@ import React from 'react' -import { createView } from 'rrx' import src from 'raw-loader!../EXTENDING.md' import Markdown from './Markdown' import Pagination from './Pagination' @@ -20,4 +19,4 @@ const Extending = props => (
) -export default createView(Extending) +export default Extending diff --git a/docs/src/Features.js b/docs/src/Features.js deleted file mode 100644 index e90dbf86..00000000 --- a/docs/src/Features.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react' -import { - Flex, - Box, - Text, - Pre -} from 'rebass' -import Section from './Section' - -const Features = props => ( -
- - {features.map(text => ( - - - {text} - - - ))} - -
-) - -const features = [ - 'Functional stateless UI components', - 'Style encapsulation with CSS-in-JS and styled-components', - 'No external CSS dependencies', - 'Configurable theming', - 'Extensible base components', - 'Design-system based consistency', - 'Built for responsive web design', - 'Write less custom CSS', -] - -export default Features diff --git a/docs/src/Footer.js b/docs/src/Footer.js index d63e77b6..f32ccaa5 100644 --- a/docs/src/Footer.js +++ b/docs/src/Footer.js @@ -1,6 +1,7 @@ import React from 'react' -import { Flex, Container } from 'rebass' +import { Flex } from 'rebass' import { NavLink } from 'rebass' +import Container from './Container' const Footer = props => (