├── .circleci └── config.yml ├── .eslintignore ├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── babel.config.js ├── examples ├── sandbox │ ├── README.md │ ├── package.json │ └── src │ │ └── index.js └── styled-components │ ├── .env │ ├── README.md │ ├── package.json │ └── src │ └── index.js ├── lerna.json ├── package.json ├── packages ├── bundler │ ├── index.js │ └── package.json ├── docs │ ├── .eslintrc.js │ ├── gatsby-browser.js │ ├── gatsby-config.js │ ├── gatsby-ssr.js │ ├── package.json │ ├── src │ │ ├── components │ │ │ ├── blocks.js │ │ │ ├── code.js │ │ │ ├── demo-provider.js │ │ │ ├── edit-link.js │ │ │ ├── footer.js │ │ │ ├── head.js │ │ │ ├── header.js │ │ │ ├── icon.js │ │ │ ├── layout.js │ │ │ ├── logo.js │ │ │ ├── nav.mdx │ │ │ ├── note.js │ │ │ ├── recipe-card.js │ │ │ ├── skip-link.js │ │ │ ├── twitter-card.js │ │ │ └── wrapper.js │ │ ├── gatsby-plugin-theme-ui │ │ │ ├── components.js │ │ │ └── index.js │ │ ├── index.js │ │ └── pages │ │ │ ├── 404.mdx │ │ │ ├── box.mdx │ │ │ ├── button.mdx │ │ │ ├── card.mdx │ │ │ ├── demo.mdx │ │ │ ├── extending.mdx │ │ │ ├── flex.mdx │ │ │ ├── forms │ │ │ ├── checkbox.mdx │ │ │ ├── index.mdx │ │ │ ├── input.mdx │ │ │ ├── label.mdx │ │ │ ├── radio.mdx │ │ │ ├── select.mdx │ │ │ ├── slider.mdx │ │ │ ├── switch.mdx │ │ │ └── textarea.mdx │ │ │ ├── getting-started.mdx │ │ │ ├── guides │ │ │ ├── css-grid.mdx │ │ │ ├── index.mdx │ │ │ ├── mdx.mdx │ │ │ ├── server-side-rendering.mdx │ │ │ ├── styled-components.mdx │ │ │ ├── theme-ui.mdx │ │ │ └── using-rebass-without-context.mdx │ │ │ ├── heading.mdx │ │ │ ├── image.mdx │ │ │ ├── index.mdx │ │ │ ├── layout │ │ │ └── index.mdx │ │ │ ├── link.mdx │ │ │ ├── migrating.mdx │ │ │ ├── props.mdx │ │ │ ├── recipes │ │ │ ├── avatar.mdx │ │ │ ├── background-image-card.mdx │ │ │ ├── badge.mdx │ │ │ ├── container.mdx │ │ │ ├── flexbox-align.mdx │ │ │ ├── flexbox-grid.mdx │ │ │ ├── flexbox-wrap.mdx │ │ │ ├── image-card.mdx │ │ │ ├── index.mdx │ │ │ ├── nav-bar.mdx │ │ │ ├── nav-link.mdx │ │ │ └── video-embed.mdx │ │ │ ├── reflexbox.mdx │ │ │ ├── space.mdx │ │ │ ├── text.mdx │ │ │ ├── theming.mdx │ │ │ └── variants.mdx │ └── static │ │ ├── _redirects │ │ ├── card.png │ │ ├── icon.png │ │ └── logo.svg ├── forms │ ├── .gitignore │ ├── .npmignore │ ├── README.md │ ├── package.json │ ├── src │ │ └── index.js │ └── test │ │ ├── __snapshots__ │ │ └── index.js.snap │ │ └── index.js ├── layout │ ├── .gitignore │ ├── .npmignore │ ├── README.md │ ├── package.json │ └── src │ │ └── index.js ├── preset-material │ ├── LICENSE.md │ ├── README.md │ ├── package.json │ ├── src │ │ └── index.js │ └── test │ │ ├── __snapshots__ │ │ └── index.js.snap │ │ └── index.js ├── preset │ ├── LICENSE.md │ ├── README.md │ ├── package.json │ ├── src │ │ └── index.js │ └── test │ │ ├── __snapshots__ │ │ └── index.js.snap │ │ └── index.js ├── rebass │ ├── .gitignore │ ├── .npmignore │ ├── README.md │ ├── package.json │ ├── src │ │ └── index.js │ └── test │ │ └── index.js ├── reflexbox │ ├── .gitignore │ ├── .npmignore │ ├── LICENSE.md │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ └── index.js │ └── test │ │ └── index.js └── space │ ├── README.md │ ├── package.json │ ├── src │ └── index.js │ └── test │ ├── __snapshots__ │ └── index.js.snap │ └── index.js └── yarn.lock /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | # Javascript Node CircleCI 2.0 configuration file 2 | # 3 | # Check https://circleci.com/docs/2.0/language-javascript/ for more details 4 | # 5 | version: 2 6 | jobs: 7 | build: 8 | docker: 9 | # specify the version you desire here 10 | - image: circleci/node:10 11 | 12 | # Specify service dependencies here if necessary 13 | # CircleCI maintains a library of pre-built images 14 | # documented at https://circleci.com/docs/2.0/circleci-images/ 15 | # - image: circleci/mongo:3.4.4 16 | 17 | working_directory: ~/repo 18 | 19 | steps: 20 | - checkout 21 | 22 | # Download and cache dependencies 23 | - restore_cache: 24 | keys: 25 | - v1-dependencies-{{ checksum "package.json" }} 26 | # fallback to using the latest cache if no exact match is found 27 | - v1-dependencies- 28 | 29 | - run: yarn install 30 | 31 | - save_cache: 32 | paths: 33 | - node_modules 34 | key: v1-dependencies-{{ checksum "package.json" }} 35 | 36 | # run tests! 37 | - run: yarn test 38 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | build 4 | .next 5 | artifacts 6 | .cache 7 | public 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .cache 5 | public 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | test 3 | babel.config.js 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 10 4 | script: 5 | - yarn test --coverage 6 | after_success: 7 | - yarn cover 8 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 2 | # Changelog 3 | 4 | ## Unreleased 5 | 6 | - Update dependencies 7 | 8 | ## 4.0.7 2019-10-28 9 | 10 | - Add missing `heading` variant to `Heading` #754 11 | 12 | ## 4.0.6 2019-09-21 13 | 14 | - Update dependencies 15 | - Add layout package 16 | - Add Slider and Switch to forms package 17 | 18 | ## 4.0.5 2019-08-21 19 | 20 | - Fix publish 21 | 22 | ## 4.0.4 2019-08-21 23 | 24 | - Add bundler setup & build for `@rebass/forms/styled-system` 25 | 26 | ## 4.0.3 2019-08-18 27 | 28 | - Add forms package 29 | - Update dependencies 30 | 31 | ## 4.0.2 2019-08-07 32 | ## 4.0.1 2019-08-06 33 | 34 | - Fix ignore files 35 | - Adjust build 36 | - Update dependencies 37 | 38 | ## 4.0.0 2019-08-04 39 | 40 | - New [`sx` prop](https://rebassjs.org/props/#sx-prop) for theme-based styles 41 | - Use the `css` prop for un-themed, raw CSS values 42 | - No additional Babel configuration required for the `sx` or `css` props 43 | - Use the `sx` prop in MDX documents 44 | - Built-in support for themeable component [variants](https://rebassjs.org/variants) 45 | - Fully compatible with [Theme UI](https://theme-ui.com) 46 | 47 | ### Breaking Changes 48 | 49 | - The default package now uses Emotion. To use Rebass with Styled Components, import the components from `rebass/styled-components` instead. 50 | - The undocumented theme keys for `Box`, `Flex`, `Text`, `Heading`, `Link`, `Button`, `Image`, and `Card` are no longer supported. Use variants instead. 51 | - The `@rebass/grid` package has been renamed (back to) `reflexbox` 52 | - Heading: default `fontWeight` is now set to `heading`. Add styles to `theme.fontWeights` to customize the `heading` font weight. 53 | - Button no longer supports the following props. Use the `sx` prop instead. 54 | `border`, `borderColor`, `borderWidth`, `borderStyle`, `borderRadius`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderX`, `borderY` 55 | - Image no longer supports the following props. Use the `sx` prop instead. 56 | `border`, `borderColor`, `borderWidth`, `borderStyle`, `borderRadius`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderX`, `borderY` 57 | - Link no longer includes default styles. Add styles to `theme.variants.link` to customize link styles. 58 | - Card no longer supports the following props. Use the `sx` prop instead. 59 | `border`, `borderColor`, `borderWidth`, `borderStyle`, `borderRadius`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderX`, `borderY`, `boxShadow`, `textShadow`, `background`, `backgroundImage`, `backgroundSize`, `backgroundPosition`, `backgroundRepeat`, 60 | 61 | 62 | ## [3.1.0] 2019-03-23 63 | 64 | - Update to Styled System v4 65 | 66 | ## [3.0.1] 2019-01-18 67 | 68 | - Update styled-system #555 69 | 70 | ## [3.0.0] 2018-12-01 71 | 72 | - Reduced package size 73 | - Reduced number of components to 8 74 | - Updated for Styled Components v4 and Emotion v10 75 | - Reduced dependencies 76 | - Removed default theme and colors 77 | - Removed Provider component 78 | - Added variant theme support for Button and Card components 79 | - Removed `is` prop in favor of Styled Components' and Emotion's `as` prop 80 | - Uses Box component as base for all other components 81 | - Removed `css` prop in favor of Styled Components' and Emotion's implementations 82 | 83 | ## [3.0.0-12] 2018-11-29 84 | 85 | - Removes `css` prop in favor of babel-plugin-styled-components 86 | - Adds build setup for Emotion 10 87 | 88 | ## [3.0.0-11] 2018-11-13 89 | 90 | - Update dependencies 91 | 92 | ## [3.0.0-10] 2018-11-12 93 | 94 | - Sets `box-sizing: border-box` on base Box component 95 | 96 | ## [3.0.0-9] 2018-09-22 97 | 98 | - Adds flexbox props back to Box component 99 | 100 | ## [3.0.0-6] 2018-09-13 101 | 102 | - Adds emotion package 103 | 104 | ## [3.0.0-2] 2018-09-11 105 | 106 | - Update styled-system 107 | - Update docs 108 | 109 | ## [3.0.0-1] 2018-09-10 110 | 111 | - Update docs for v3 112 | 113 | ## [3.0.0-0] 2018-09-08 114 | 115 | - Smaller package 116 | - Reduced number of components to 8 117 | - Upgraded for styled-components v4 118 | - Reduced dependencies to one 119 | - Removed default theme and colors 120 | - Removed Rebass Provider component 121 | - Added variant theme support to Button and Card 122 | - Removed `is` prop in favor of styled-components `as` prop 123 | - Uses Box component as the base for all other components 124 | 125 | ## [2.3.2] 2018-09-08 126 | 127 | - Update repo in package.json 128 | - Update readme 129 | 130 | ## [2.3.1] 2018-09-08 131 | 132 | - Fix bad prepublish build 133 | 134 | ## [2.3.0] 2018-09-08 135 | 136 | - Upgrade to @rebass/components, @rebass/grid, and styled-system v3 137 | 138 | ## [2.2.0] 2018-09-08 139 | 140 | - Use `polished` for color manipulation instead of `chroma-js` 141 | 142 | ## [2.1.1] 2018-09-08 143 | 144 | - Support `width` prop on Card 145 | - Update docs 146 | 147 | ## [2.1.0] 2018-08-14 148 | 149 | - Add Hide component 150 | 151 | ## [2.0.1] 2018-06-30 152 | 153 | - Add `fontFamily` to Heading and Text components 154 | - Update docs 155 | 156 | ## [2.0.0] 2018-06-24 157 | 158 | ### Added 159 | 160 | - Support for [emotion][emotion] 161 | 162 | ### Changed 163 | 164 | - [styled-system](https://github.com/jxnblk/styled-system) v2 165 | - [grid-styled](https://github.com/jxnblk/grid-styled) v4 166 | - Moves components to separate modules 167 | - Uses [system-components](https://github.com/jxnblk/styled-system/tree/master/system-components) 168 | - Updates docs site 169 | 170 | #### Breaking 171 | 172 | - Renamed components 173 | - TabItem -> Tab 174 | - DotButton -> Dot 175 | - PanelHeader -> Panel.Header 176 | - PanelFooter -> Panel.Footer 177 | - Default theme (changed to match styled-system) 178 | - The `colors` object no longer uses Palx 179 | - Array color values have been removed 180 | - `radius` has been replaced with `radii` 181 | - `font` has been replaced with `fonts` 182 | - `monospace` has been removed 183 | - Theme fields are no longer exposed as exports 184 | - Props 185 | - `width` is only available on Flex and Box 186 | - `fontSize` is only available on typographic components 187 | - `direction` is now `flexDirection` 188 | - Flex `align` is now `alignItems` 189 | - Flex `justify` is now `justifyContent` 190 | - Flex `wrap` is now `flexWrap` 191 | - Arrow `up` is now `direction='up'` 192 | - `active` props have been removed in favor of custom styles 193 | - Border now uses [styled-system border props](https://github.com/jxnblk/styled-system#borders) 194 | - Banner `image` is now `backgroundImage` 195 | - Absolute, Fixed, Relative, and Sticky now require values for `top`, `right`, `bottom`, and `left` props 196 | - Drawer `position` prop has been renamed to `side` 197 | - Drawer `size` prop has been replaced with `width` and `height` props 198 | 199 | ### Removed 200 | 201 | - Custom HOC `hoc` 202 | - `createLibrary` function 203 | - `util` 204 | - `createComponent` 205 | - Palx dependency 206 | - ScrollCarousel component 207 | - CarouselSlide component 208 | - Star comonent 209 | 210 | 211 | [emotion]: https://github.com/emotion-js/emotion 212 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at jxnblk@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 2 | # Contributing 3 | 4 | Issues and pull requests are welcome. 5 | 6 | Please **be nice** and read the following before contributing. 7 | 8 | - Test before submitting pull requests - `npm test` 9 | 10 | ## Codebase Overview 11 | 12 | Folders: 13 | - `/src` source code 14 | - `/tests` tests, including snapshots 15 | 16 | Be sure to familiarize yourself with [styled-system](https://github.com/jxnblk/styled-system) before making changes. 17 | 18 | Please ensure to test any new code added, and update snapshots when relevant. 19 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | 2 | # The MIT License (MIT) 3 | Copyright (c) 2015 – 2019 Brent Jackson 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | packages/rebass/README.md -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@babel/preset-env', 4 | '@babel/preset-react' 5 | ], 6 | env: { 7 | esm: { 8 | presets: [ 9 | [ 10 | '@babel/preset-env', 11 | { 12 | modules: false, 13 | } 14 | ] 15 | ], 16 | }, 17 | styled: { 18 | plugins: [ 19 | [ 20 | 'transform-rename-import', { 21 | original: '^reflexbox$', 22 | replacement: 'reflexbox/styled-components', 23 | } 24 | ] 25 | ] 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /examples/sandbox/README.md: -------------------------------------------------------------------------------- 1 | 2 | Open in [Code Sandbox](https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/sandbox) 3 | -------------------------------------------------------------------------------- /examples/sandbox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rebass-sandbox", 3 | "private": true, 4 | "version": "4.0.7", 5 | "main": "index.js", 6 | "license": "MIT", 7 | "scripts": { 8 | "start": "react-scripts start" 9 | }, 10 | "dependencies": { 11 | "@rebass/preset": "^4.0.5", 12 | "emotion-theming": "^10.0.14", 13 | "react": "^16.9.0", 14 | "react-dom": "^16.9.0", 15 | "rebass": "^4.0.7", 16 | "styled-components": "^4.3.2" 17 | }, 18 | "browserslist": { 19 | "production": [ 20 | ">0.2%", 21 | "not dead", 22 | "not op_mini all" 23 | ], 24 | "development": [ 25 | "last 1 chrome version", 26 | "last 1 firefox version", 27 | "last 1 safari version" 28 | ] 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /examples/sandbox/src/index.js: -------------------------------------------------------------------------------- 1 | /* eslint no-unused-vars: 0 */ 2 | import React from 'react' 3 | import { render } from 'react-dom' 4 | import preset from '@rebass/preset' 5 | import { ThemeProvider } from 'emotion-theming' 6 | // OR import { ThemeProvider } from 'styled-components' 7 | import { 8 | Box, 9 | Flex, 10 | Heading, 11 | Text, 12 | Button, 13 | Link, 14 | Image, 15 | Card, 16 | } from 'rebass' 17 | // OR use 'rebass/styled-components' 18 | 19 | const theme = { 20 | ...preset, 21 | } 22 | 23 | const App = props => { 24 | return ( 25 | 26 | 27 | 28 | Rebass Sandbox 29 | 30 | 33 | 36 | 37 | 38 | ) 39 | } 40 | 41 | render(, root) // eslint-disable-line no-undef 42 | -------------------------------------------------------------------------------- /examples/styled-components/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | -------------------------------------------------------------------------------- /examples/styled-components/README.md: -------------------------------------------------------------------------------- 1 | 2 | Open in [Code Sandbox](https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/styled-components) 3 | -------------------------------------------------------------------------------- /examples/styled-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@rebass/styled-components-example", 3 | "private": true, 4 | "version": "4.0.7", 5 | "main": "index.js", 6 | "license": "MIT", 7 | "scripts": { 8 | "start": "react-scripts start" 9 | }, 10 | "dependencies": { 11 | "@rebass/preset": "^4.0.5", 12 | "react": "^16.9.0", 13 | "react-dom": "^16.9.0", 14 | "react-scripts": "^3.1.1", 15 | "rebass": "^4.0.7", 16 | "styled-components": "^4.3.2" 17 | }, 18 | "browserslist": { 19 | "production": [ 20 | ">0.2%", 21 | "not dead", 22 | "not op_mini all" 23 | ], 24 | "development": [ 25 | "last 1 chrome version", 26 | "last 1 firefox version", 27 | "last 1 safari version" 28 | ] 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /examples/styled-components/src/index.js: -------------------------------------------------------------------------------- 1 | /* eslint no-unused-vars: 0 */ 2 | import React from 'react' 3 | import { render } from 'react-dom' 4 | import preset from '@rebass/preset' 5 | import { ThemeProvider } from 'styled-components' 6 | import { 7 | Box, 8 | Flex, 9 | Heading, 10 | Text, 11 | Button, 12 | Link, 13 | Image, 14 | Card, 15 | } from 'rebass/styled-components' 16 | 17 | const theme = { 18 | ...preset, 19 | } 20 | 21 | const App = props => { 22 | return ( 23 | 24 | 25 | 26 | Rebass Sandbox 27 | 28 | 31 | 34 | 35 | 36 | ) 37 | } 38 | 39 | render(, root) // eslint-disable-line no-undef 40 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "4.0.7", 3 | "npmClient": "yarn", 4 | "useWorkspaces": true, 5 | "packages": [ 6 | "packages/*" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "workspaces": [ 4 | "packages/*", 5 | "examples/*" 6 | ], 7 | "scripts": { 8 | "prepare": "lerna run prepare", 9 | "start": "yarn workspace docs start", 10 | "build": "yarn workspace docs build", 11 | "test": "jest", 12 | "cover": "npx codecov" 13 | }, 14 | "devDependencies": { 15 | "@babel/cli": "^7.5.5", 16 | "@babel/core": "^7.5.5", 17 | "@babel/preset-env": "^7.5.5", 18 | "@babel/preset-react": "^7.0.0", 19 | "@testing-library/react": "^10.0.4", 20 | "jest": "^25.2.4", 21 | "jest-emotion": "^10.0.14", 22 | "jest-styled-components": "^6.3.3", 23 | "lerna": "^3.16.4", 24 | "react": "^16.8.6", 25 | "react-dom": "^16.8.6", 26 | "react-test-renderer": "^16.8.6" 27 | }, 28 | "resolutions": { 29 | "@mdx-js/react": "^1.5.5" 30 | }, 31 | "jest": { 32 | "testMatch": [ 33 | "**/packages/**/test/*.js" 34 | ], 35 | "testPathIgnorePatterns": [ 36 | "/node_modules/" 37 | ], 38 | "coverageReporters": [ 39 | "lcov", 40 | "text", 41 | "html" 42 | ], 43 | "collectCoverageFrom": [ 44 | "packages/**/src/*.js", 45 | "!packages/docs/**/*.js" 46 | ], 47 | "coverageThreshold": { 48 | "global": { 49 | "branches": 90, 50 | "functions": 90, 51 | "lines": 90, 52 | "statements": 90 53 | } 54 | }, 55 | "setupFilesAfterEnv": [], 56 | "snapshotSerializers": [ 57 | "jest-emotion" 58 | ] 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /packages/bundler/index.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | const execa = require('execa') 3 | 4 | const babel = (env, ...args) => { 5 | return execa('babel', [ 6 | '--verbose', 7 | ...args.filter(Boolean), 8 | '--root-mode=upward', 9 | ], { 10 | stdio: 'inherit', 11 | env: { 12 | NODE_ENV: env, 13 | } 14 | }) 15 | } 16 | 17 | babel(null, 'src', '-d', 'dist') 18 | babel('esm', 'src', '-o', 'dist/index.esm.js') 19 | babel('styled', 'src', '-d', 'styled-components') 20 | -------------------------------------------------------------------------------- /packages/bundler/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@rebass/bundler", 3 | "version": "4.0.5", 4 | "bin": { 5 | "rebass-bundler": "./index.js" 6 | }, 7 | "main": "index.js", 8 | "license": "MIT", 9 | "dependencies": { 10 | "@babel/cli": "^7.5.5", 11 | "@babel/core": "^7.5.5", 12 | "@babel/preset-env": "^7.5.5", 13 | "@babel/preset-react": "^7.0.0" 14 | }, 15 | "gitHead": "f0f01843e9fb63ca69112d7e97a1451b27ee9e6c", 16 | "publishConfig": { 17 | "access": "public" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/docs/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | globals: { 3 | __PATH_PREFIX__: true, 4 | }, 5 | extends: 'react-app', 6 | } 7 | -------------------------------------------------------------------------------- /packages/docs/gatsby-browser.js: -------------------------------------------------------------------------------- 1 | export { wrapPageElement } from './src' 2 | -------------------------------------------------------------------------------- /packages/docs/gatsby-config.js: -------------------------------------------------------------------------------- 1 | const remarkPlugins = [ 2 | require('remark-slug'), 3 | ] 4 | 5 | module.exports = { 6 | plugins: [ 7 | { 8 | resolve: 'gatsby-plugin-mdx', 9 | options: { 10 | extensions: ['.mdx', '.md'], 11 | remarkPlugins, 12 | } 13 | }, 14 | 'gatsby-plugin-catch-links', 15 | 'gatsby-plugin-theme-ui', 16 | 'gatsby-plugin-react-helmet', 17 | ], 18 | } 19 | -------------------------------------------------------------------------------- /packages/docs/gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | export { wrapPageElement } from './src' 2 | -------------------------------------------------------------------------------- /packages/docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "docs", 4 | "version": "4.0.7", 5 | "main": "index.js", 6 | "license": "MIT", 7 | "scripts": { 8 | "start": "gatsby develop", 9 | "clean": "gatsby clean", 10 | "build": "gatsby build", 11 | "serve": "gatsby serve", 12 | "icon": "npx repng src/components/icon.js -d static -f icon.png -w 512 -h 512", 13 | "card": "npx repng src/components/twitter-card.js -d static -f card.png -w 1024 -h 512" 14 | }, 15 | "dependencies": { 16 | "@jxnblk/react-live": "^2.1.2-1", 17 | "@mdx-js/mdx": "^1.1.4", 18 | "@rebass/forms": "^4.0.6", 19 | "@rebass/layout": "^4.0.6", 20 | "@rebass/preset": "^4.0.5", 21 | "@rebass/preset-material": "^4.0.5", 22 | "@rebass/space": "^4.0.5", 23 | "@theme-ui/presets": "^0.3.0", 24 | "@theme-ui/prism": "^0.3.0", 25 | "@theme-ui/sidenav": "^0.3.1", 26 | "countries-list": "^2.4.3", 27 | "deepmerge": "^4.0.0", 28 | "gatsby": "^2.13.48", 29 | "gatsby-plugin-catch-links": "^2.1.2", 30 | "gatsby-plugin-mdx": "^1.0.22", 31 | "gatsby-plugin-react-helmet": "^3.1.3", 32 | "gatsby-plugin-theme-ui": "^0.3.0", 33 | "react": "^16.8.6", 34 | "react-dom": "^16.8.6", 35 | "react-helmet": "^6.0.0", 36 | "rebass": "^4.0.7", 37 | "remark-slug": "^5.1.2", 38 | "theme-ui": "^0.3.1" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /packages/docs/src/components/blocks.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Box } from 'rebass' 3 | 4 | export const Container = props => 5 | 13 | 14 | export const Banner = props => 15 | 21 | 41 | {props.children} 42 | 43 | 44 | 45 | export const LogoGrid = props => 46 | 59 | 60 | export const Grid = ({ 61 | width = 256, 62 | gap = 4, 63 | ...props 64 | }) => 65 | 81 | 82 | export const NavGrid = props => 83 | 124 | 125 | -------------------------------------------------------------------------------- /packages/docs/src/components/code.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from '@emotion/styled' 3 | import { 4 | LiveProvider, 5 | LivePreview, 6 | LiveEditor, 7 | LiveError, 8 | } from '@jxnblk/react-live' 9 | import { ThemeProvider } from 'theme-ui' 10 | import Prism from '@theme-ui/prism' 11 | import * as Rebass from 'rebass' 12 | import * as RebassForms from '@rebass/forms' 13 | import * as RebassLayout from '@rebass/layout' 14 | import { Flex, Box } from 'rebass' 15 | import { countries } from 'countries-list' 16 | 17 | const scope = { 18 | ...Rebass, 19 | ...RebassForms, 20 | ...RebassLayout, 21 | ThemeProvider, 22 | props: { 23 | image: 'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20', 24 | countries, 25 | } 26 | } 27 | 28 | scope.Switch = props => { 29 | const [active, setActive] = React.useState(true) 30 | const toggle = () => setActive(!active) 31 | 32 | return ( 33 | 38 | ) 39 | } 40 | 41 | const transformCode = code => `<>${code}` 42 | 43 | const Preview = ({ fullwidth, ...props }) => 44 | 51 | 52 | const Editor = props => 53 | 63 | 64 | const Err = props => 65 | 77 | 78 | export default ({ 79 | className, 80 | ...props 81 | }) => { 82 | const lang = 'jsx' 83 | 84 | if (props.preview) { 85 | const code = props.children 86 | return ( 87 | 92 | 93 | 94 | ) 95 | } 96 | 97 | if (props.live) { 98 | const code = props.children 99 | return ( 100 | `1px solid ${t.colors.muted}`, 104 | borderRadius: 2, 105 | }}> 106 | 111 | 112 | 116 | 119 | 120 | 132 | Live Demo 133 | 134 | 135 | 136 | 137 | ) 138 | } 139 | 140 | return ( 141 | 145 | ) 146 | } 147 | -------------------------------------------------------------------------------- /packages/docs/src/components/demo-provider.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { ThemeProvider } from 'theme-ui' 3 | import { Helmet } from 'react-helmet' 4 | import { Box, Flex } from 'rebass' 5 | import * as themeui from '@theme-ui/presets' 6 | import merge from 'lodash.merge' 7 | import rebass from '@rebass/preset' 8 | import material from '@rebass/preset-material' 9 | 10 | const presets = { 11 | ...themeui, 12 | rebass, 13 | material, 14 | } 15 | 16 | const themes = [ 17 | 'rebass', 18 | 'material', 19 | ...Object.keys(presets) 20 | ] 21 | 22 | export default props => { 23 | const [ theme, setTheme ] = useState('preset') 24 | 25 | const demoTheme = merge({}, rebass, presets[theme]) 26 | 27 | return ( 28 |
29 | {demoTheme.googleFonts && ( 30 | 31 | 32 | 33 | )} 34 | 35 | 36 | Theme: 37 | {' '} 38 | 49 | 50 | 51 | 52 | {props.children} 53 | 54 |
55 | ) 56 | } 57 | -------------------------------------------------------------------------------- /packages/docs/src/components/edit-link.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Location } from '@reach/router' 3 | import { Link } from 'rebass' 4 | 5 | const base = 'https://github.com/rebassjs/rebass/edit/master/packages/docs/src/pages' 6 | 7 | const getHREF = (location) => { 8 | if (location.pathname === '/') return false 9 | return base + location.pathname.replace(/\/+$/, '') + '.mdx' 10 | } 11 | 12 | export default props => 13 | { 15 | const href = getHREF(location) 16 | if (!href) return false 17 | 18 | return ( 19 | 28 | ) 29 | }} 30 | /> 31 | -------------------------------------------------------------------------------- /packages/docs/src/components/footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | Box, 4 | Flex, 5 | Link, 6 | } from 'rebass' 7 | 8 | export default props => 9 | 15 | 21 | Rebass 22 | Reflexbox 23 | Docs 24 | GitHub 25 | 26 | 27 | -------------------------------------------------------------------------------- /packages/docs/src/components/head.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Helmet } from 'react-helmet' 3 | import pkg from 'rebass/package.json' 4 | 5 | export default props => { 6 | const title = [props.title, 'Rebass'].filter(Boolean).join(' | ') 7 | 8 | return ( 9 | 13 | {title} 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | ) 23 | } 24 | -------------------------------------------------------------------------------- /packages/docs/src/components/header.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | Flex, 4 | Box, 5 | Link, 6 | Button, 7 | } from 'rebass' 8 | import { useColorMode } from 'theme-ui' 9 | 10 | const modes = [ 11 | 'lite', 12 | 'dark', 13 | 'gray', 14 | 'hack', 15 | 'pink', 16 | ] 17 | 18 | const Burger = ({ size = 24 }) => ( 19 | 30 | 31 | 32 | ) 33 | 34 | const Dot = props => 35 | 43 | 51 | 58 | 59 | 60 | export default ({ 61 | nav, 62 | menu, 63 | setMenu, 64 | fullwidth, 65 | }) => { 66 | const [ mode, setMode ] = useColorMode() 67 | 68 | const cycleMode = e => { 69 | const i = (modes.indexOf(mode) + 1) % modes.length 70 | setMode(modes[i]) 71 | } 72 | 73 | return ( 74 | 80 | {!fullwidth && ( 81 | 98 | )} 99 | Rebass 100 | 101 | 105 | GitHub 106 | 107 | 119 | 120 | ) 121 | } 122 | -------------------------------------------------------------------------------- /packages/docs/src/components/icon.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Logo from './Logo' 3 | 4 | export default props => ( 5 |
16 | 24 |
25 | ) 26 | -------------------------------------------------------------------------------- /packages/docs/src/components/layout.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef } from 'react' 2 | import { Box, Flex } from 'rebass' 3 | import { Pagination } from '@theme-ui/sidenav' 4 | import Head from './head' 5 | import SkipLink from './skip-link' 6 | import Header from './header' 7 | import Footer from './footer' 8 | import Nav from './nav' 9 | import EditLink from './edit-link' 10 | 11 | const Sidebar = props => 12 | 13 | { 17 | props.setMenu(false) 18 | }} 19 | onBlur={e => { 20 | props.setMenu(false) 21 | }} 22 | onFocus={e => { 23 | props.setMenu(true) 24 | }} 25 | style={{ 26 | transform: props.open ? 'translateX(0)' : 'translateX(-100%)', 27 | }} 28 | sx={{ 29 | position: [ 'fixed', 'sticky' ], 30 | zIndex: 1, 31 | top: 0, 32 | left: 0, 33 | bottom: [0, 'auto'], 34 | width: [ 256, 256, 320 ], 35 | minWidth: 0, 36 | maxHeight: ['100vh', 'none'], 37 | overflowY: 'auto', 38 | WebkitOverflowScrolling: 'touch', 39 | flex: 'none', 40 | px: 3, 41 | mt: [64, 0], 42 | pb: 3, 43 | bg: ['background', 'transparent'], 44 | transition: 'transform .2s ease-out', 45 | transform: [, 'none !important'], 46 | ul: { 47 | listStyle: 'none', 48 | padding: 0, 49 | }, 50 | a: { 51 | variant: 'links.nav', 52 | }, 53 | 'li > ul > li > a': { 54 | pl: '24px', 55 | } 56 | }}> 57 |