Repository: rebassjs/rebass Branch: master Commit: 31726a00fc81 Files: 136 Total size: 150.6 KB Directory structure: gitextract_a45pl85k/ ├── .circleci/ │ └── config.yml ├── .eslintignore ├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE.md ├── babel.config.js ├── examples/ │ ├── sandbox/ │ │ ├── README.md │ │ ├── package.json │ │ └── src/ │ │ └── index.js │ └── styled-components/ │ ├── 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 ├── 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/ │ ├── LICENSE.md │ ├── README.md │ ├── package.json │ ├── src/ │ │ └── index.js │ └── test/ │ ├── __snapshots__/ │ │ └── index.js.snap │ └── index.js ├── preset-material/ │ ├── 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 ================================================ FILE CONTENTS ================================================ ================================================ FILE: .circleci/config.yml ================================================ # Javascript Node CircleCI 2.0 configuration file # # Check https://circleci.com/docs/2.0/language-javascript/ for more details # version: 2 jobs: build: docker: # specify the version you desire here - image: circleci/node:10 # Specify service dependencies here if necessary # CircleCI maintains a library of pre-built images # documented at https://circleci.com/docs/2.0/circleci-images/ # - image: circleci/mongo:3.4.4 working_directory: ~/repo steps: - checkout # Download and cache dependencies - restore_cache: keys: - v1-dependencies-{{ checksum "package.json" }} # fallback to using the latest cache if no exact match is found - v1-dependencies- - run: yarn install - save_cache: paths: - node_modules key: v1-dependencies-{{ checksum "package.json" }} # run tests! - run: yarn test ================================================ FILE: .eslintignore ================================================ node_modules dist build .next artifacts .cache public ================================================ FILE: .gitignore ================================================ node_modules dist coverage .cache public ================================================ FILE: .npmignore ================================================ src test babel.config.js ================================================ FILE: .travis.yml ================================================ language: node_js node_js: - 10 script: - yarn test --coverage after_success: - yarn cover ================================================ FILE: CHANGELOG.md ================================================ # Changelog ## Unreleased - Update dependencies ## 4.0.7 2019-10-28 - Add missing `heading` variant to `Heading` #754 ## 4.0.6 2019-09-21 - Update dependencies - Add layout package - Add Slider and Switch to forms package ## 4.0.5 2019-08-21 - Fix publish ## 4.0.4 2019-08-21 - Add bundler setup & build for `@rebass/forms/styled-system` ## 4.0.3 2019-08-18 - Add forms package - Update dependencies ## 4.0.2 2019-08-07 ## 4.0.1 2019-08-06 - Fix ignore files - Adjust build - Update dependencies ## 4.0.0 2019-08-04 - New [`sx` prop](https://rebassjs.org/props/#sx-prop) for theme-based styles - Use the `css` prop for un-themed, raw CSS values - No additional Babel configuration required for the `sx` or `css` props - Use the `sx` prop in MDX documents - Built-in support for themeable component [variants](https://rebassjs.org/variants) - Fully compatible with [Theme UI](https://theme-ui.com) ### Breaking Changes - The default package now uses Emotion. To use Rebass with Styled Components, import the components from `rebass/styled-components` instead. - The undocumented theme keys for `Box`, `Flex`, `Text`, `Heading`, `Link`, `Button`, `Image`, and `Card` are no longer supported. Use variants instead. - The `@rebass/grid` package has been renamed (back to) `reflexbox` - Heading: default `fontWeight` is now set to `heading`. Add styles to `theme.fontWeights` to customize the `heading` font weight. - Button no longer supports the following props. Use the `sx` prop instead. `border`, `borderColor`, `borderWidth`, `borderStyle`, `borderRadius`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderX`, `borderY` - Image no longer supports the following props. Use the `sx` prop instead. `border`, `borderColor`, `borderWidth`, `borderStyle`, `borderRadius`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderX`, `borderY` - Link no longer includes default styles. Add styles to `theme.variants.link` to customize link styles. - Card no longer supports the following props. Use the `sx` prop instead. `border`, `borderColor`, `borderWidth`, `borderStyle`, `borderRadius`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderX`, `borderY`, `boxShadow`, `textShadow`, `background`, `backgroundImage`, `backgroundSize`, `backgroundPosition`, `backgroundRepeat`, ## [3.1.0] 2019-03-23 - Update to Styled System v4 ## [3.0.1] 2019-01-18 - Update styled-system #555 ## [3.0.0] 2018-12-01 - Reduced package size - Reduced number of components to 8 - Updated for Styled Components v4 and Emotion v10 - Reduced dependencies - Removed default theme and colors - Removed Provider component - Added variant theme support for Button and Card components - Removed `is` prop in favor of Styled Components' and Emotion's `as` prop - Uses Box component as base for all other components - Removed `css` prop in favor of Styled Components' and Emotion's implementations ## [3.0.0-12] 2018-11-29 - Removes `css` prop in favor of babel-plugin-styled-components - Adds build setup for Emotion 10 ## [3.0.0-11] 2018-11-13 - Update dependencies ## [3.0.0-10] 2018-11-12 - Sets `box-sizing: border-box` on base Box component ## [3.0.0-9] 2018-09-22 - Adds flexbox props back to Box component ## [3.0.0-6] 2018-09-13 - Adds emotion package ## [3.0.0-2] 2018-09-11 - Update styled-system - Update docs ## [3.0.0-1] 2018-09-10 - Update docs for v3 ## [3.0.0-0] 2018-09-08 - Smaller package - Reduced number of components to 8 - Upgraded for styled-components v4 - Reduced dependencies to one - Removed default theme and colors - Removed Rebass Provider component - Added variant theme support to Button and Card - Removed `is` prop in favor of styled-components `as` prop - Uses Box component as the base for all other components ## [2.3.2] 2018-09-08 - Update repo in package.json - Update readme ## [2.3.1] 2018-09-08 - Fix bad prepublish build ## [2.3.0] 2018-09-08 - Upgrade to @rebass/components, @rebass/grid, and styled-system v3 ## [2.2.0] 2018-09-08 - Use `polished` for color manipulation instead of `chroma-js` ## [2.1.1] 2018-09-08 - Support `width` prop on Card - Update docs ## [2.1.0] 2018-08-14 - Add Hide component ## [2.0.1] 2018-06-30 - Add `fontFamily` to Heading and Text components - Update docs ## [2.0.0] 2018-06-24 ### Added - Support for [emotion][emotion] ### Changed - [styled-system](https://github.com/jxnblk/styled-system) v2 - [grid-styled](https://github.com/jxnblk/grid-styled) v4 - Moves components to separate modules - Uses [system-components](https://github.com/jxnblk/styled-system/tree/master/system-components) - Updates docs site #### Breaking - Renamed components - TabItem -> Tab - DotButton -> Dot - PanelHeader -> Panel.Header - PanelFooter -> Panel.Footer - Default theme (changed to match styled-system) - The `colors` object no longer uses Palx - Array color values have been removed - `radius` has been replaced with `radii` - `font` has been replaced with `fonts` - `monospace` has been removed - Theme fields are no longer exposed as exports - Props - `width` is only available on Flex and Box - `fontSize` is only available on typographic components - `direction` is now `flexDirection` - Flex `align` is now `alignItems` - Flex `justify` is now `justifyContent` - Flex `wrap` is now `flexWrap` - Arrow `up` is now `direction='up'` - `active` props have been removed in favor of custom styles - Border now uses [styled-system border props](https://github.com/jxnblk/styled-system#borders) - Banner `image` is now `backgroundImage` - Absolute, Fixed, Relative, and Sticky now require values for `top`, `right`, `bottom`, and `left` props - Drawer `position` prop has been renamed to `side` - Drawer `size` prop has been replaced with `width` and `height` props ### Removed - Custom HOC `hoc` - `createLibrary` function - `util` - `createComponent` - Palx dependency - ScrollCarousel component - CarouselSlide component - Star comonent [emotion]: https://github.com/emotion-js/emotion ================================================ FILE: CODE_OF_CONDUCT.md ================================================ # Contributor Covenant Code of Conduct ## Our Pledge 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. ## Our Standards Examples of behavior that contributes to creating a positive environment include: * Using welcoming and inclusive language * Being respectful of differing viewpoints and experiences * Gracefully accepting constructive criticism * Focusing on what is best for the community * Showing empathy towards other community members Examples of unacceptable behavior by participants include: * The use of sexualized language or imagery and unwelcome sexual attention or advances * Trolling, insulting/derogatory comments, and personal or political attacks * Public or private harassment * Publishing others' private information, such as a physical or electronic address, without explicit permission * Other conduct which could reasonably be considered inappropriate in a professional setting ## Our Responsibilities 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. 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. ## Scope 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. ## Enforcement 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. 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. ## Attribution This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] [homepage]: http://contributor-covenant.org [version]: http://contributor-covenant.org/version/1/4/ ================================================ FILE: CONTRIBUTING.md ================================================ # Contributing Issues and pull requests are welcome. Please **be nice** and read the following before contributing. - Test before submitting pull requests - `npm test` ## Codebase Overview Folders: - `/src` source code - `/tests` tests, including snapshots Be sure to familiarize yourself with [styled-system](https://github.com/jxnblk/styled-system) before making changes. Please ensure to test any new code added, and update snapshots when relevant. ================================================ FILE: LICENSE.md ================================================ # The MIT License (MIT) Copyright (c) 2015 – 2019 Brent Jackson 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: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 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. ================================================ FILE: babel.config.js ================================================ module.exports = { presets: [ '@babel/preset-env', '@babel/preset-react' ], env: { esm: { presets: [ [ '@babel/preset-env', { modules: false, } ] ], }, styled: { plugins: [ [ 'transform-rename-import', { original: '^reflexbox$', replacement: 'reflexbox/styled-components', } ] ] } } } ================================================ FILE: examples/sandbox/README.md ================================================ Open in [Code Sandbox](https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/sandbox) ================================================ FILE: examples/sandbox/package.json ================================================ { "name": "rebass-sandbox", "private": true, "version": "4.0.7", "main": "index.js", "license": "MIT", "scripts": { "start": "react-scripts start" }, "dependencies": { "@rebass/preset": "^4.0.5", "emotion-theming": "^10.0.14", "react": "^16.9.0", "react-dom": "^16.9.0", "rebass": "^4.0.7", "styled-components": "^4.3.2" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } ================================================ FILE: examples/sandbox/src/index.js ================================================ /* eslint no-unused-vars: 0 */ import React from 'react' import { render } from 'react-dom' import preset from '@rebass/preset' import { ThemeProvider } from 'emotion-theming' // OR import { ThemeProvider } from 'styled-components' import { Box, Flex, Heading, Text, Button, Link, Image, Card, } from 'rebass' // OR use 'rebass/styled-components' const theme = { ...preset, } const App = props => { return ( Rebass Sandbox ) } render(, root) // eslint-disable-line no-undef ================================================ FILE: examples/styled-components/README.md ================================================ Open in [Code Sandbox](https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/styled-components) ================================================ FILE: examples/styled-components/package.json ================================================ { "name": "@rebass/styled-components-example", "private": true, "version": "4.0.7", "main": "index.js", "license": "MIT", "scripts": { "start": "react-scripts start" }, "dependencies": { "@rebass/preset": "^4.0.5", "react": "^16.9.0", "react-dom": "^16.9.0", "react-scripts": "^3.1.1", "rebass": "^4.0.7", "styled-components": "^4.3.2" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } ================================================ FILE: examples/styled-components/src/index.js ================================================ /* eslint no-unused-vars: 0 */ import React from 'react' import { render } from 'react-dom' import preset from '@rebass/preset' import { ThemeProvider } from 'styled-components' import { Box, Flex, Heading, Text, Button, Link, Image, Card, } from 'rebass/styled-components' const theme = { ...preset, } const App = props => { return ( Rebass Sandbox ) } render(, root) // eslint-disable-line no-undef ================================================ FILE: lerna.json ================================================ { "version": "4.0.7", "npmClient": "yarn", "useWorkspaces": true, "packages": [ "packages/*" ] } ================================================ FILE: package.json ================================================ { "private": true, "workspaces": [ "packages/*", "examples/*" ], "scripts": { "prepare": "lerna run prepare", "start": "yarn workspace docs start", "build": "yarn workspace docs build", "test": "jest", "cover": "npx codecov" }, "devDependencies": { "@babel/cli": "^7.5.5", "@babel/core": "^7.5.5", "@babel/preset-env": "^7.5.5", "@babel/preset-react": "^7.0.0", "@testing-library/react": "^10.0.4", "jest": "^25.2.4", "jest-emotion": "^10.0.14", "jest-styled-components": "^6.3.3", "lerna": "^3.16.4", "react": "^16.8.6", "react-dom": "^16.8.6", "react-test-renderer": "^16.8.6" }, "resolutions": { "@mdx-js/react": "^1.5.5" }, "jest": { "testMatch": [ "**/packages/**/test/*.js" ], "testPathIgnorePatterns": [ "/node_modules/" ], "coverageReporters": [ "lcov", "text", "html" ], "collectCoverageFrom": [ "packages/**/src/*.js", "!packages/docs/**/*.js" ], "coverageThreshold": { "global": { "branches": 90, "functions": 90, "lines": 90, "statements": 90 } }, "setupFilesAfterEnv": [], "snapshotSerializers": [ "jest-emotion" ] } } ================================================ FILE: packages/bundler/index.js ================================================ #!/usr/bin/env node const execa = require('execa') const babel = (env, ...args) => { return execa('babel', [ '--verbose', ...args.filter(Boolean), '--root-mode=upward', ], { stdio: 'inherit', env: { NODE_ENV: env, } }) } babel(null, 'src', '-d', 'dist') babel('esm', 'src', '-o', 'dist/index.esm.js') babel('styled', 'src', '-d', 'styled-components') ================================================ FILE: packages/bundler/package.json ================================================ { "name": "@rebass/bundler", "version": "4.0.5", "bin": { "rebass-bundler": "./index.js" }, "main": "index.js", "license": "MIT", "dependencies": { "@babel/cli": "^7.5.5", "@babel/core": "^7.5.5", "@babel/preset-env": "^7.5.5", "@babel/preset-react": "^7.0.0" }, "gitHead": "f0f01843e9fb63ca69112d7e97a1451b27ee9e6c", "publishConfig": { "access": "public" } } ================================================ FILE: packages/docs/.eslintrc.js ================================================ module.exports = { globals: { __PATH_PREFIX__: true, }, extends: 'react-app', } ================================================ FILE: packages/docs/gatsby-browser.js ================================================ export { wrapPageElement } from './src' ================================================ FILE: packages/docs/gatsby-config.js ================================================ const remarkPlugins = [ require('remark-slug'), ] module.exports = { plugins: [ { resolve: 'gatsby-plugin-mdx', options: { extensions: ['.mdx', '.md'], remarkPlugins, } }, 'gatsby-plugin-catch-links', 'gatsby-plugin-theme-ui', 'gatsby-plugin-react-helmet', ], } ================================================ FILE: packages/docs/gatsby-ssr.js ================================================ export { wrapPageElement } from './src' ================================================ FILE: packages/docs/package.json ================================================ { "private": true, "name": "docs", "version": "4.0.7", "main": "index.js", "license": "MIT", "scripts": { "start": "gatsby develop", "clean": "gatsby clean", "build": "gatsby build", "serve": "gatsby serve", "icon": "npx repng src/components/icon.js -d static -f icon.png -w 512 -h 512", "card": "npx repng src/components/twitter-card.js -d static -f card.png -w 1024 -h 512" }, "dependencies": { "@jxnblk/react-live": "^2.1.2-1", "@mdx-js/mdx": "^1.1.4", "@rebass/forms": "^4.0.6", "@rebass/layout": "^4.0.6", "@rebass/preset": "^4.0.5", "@rebass/preset-material": "^4.0.5", "@rebass/space": "^4.0.5", "@theme-ui/presets": "^0.3.0", "@theme-ui/prism": "^0.3.0", "@theme-ui/sidenav": "^0.3.1", "countries-list": "^2.4.3", "deepmerge": "^4.0.0", "gatsby": "^2.13.48", "gatsby-plugin-catch-links": "^2.1.2", "gatsby-plugin-mdx": "^1.0.22", "gatsby-plugin-react-helmet": "^3.1.3", "gatsby-plugin-theme-ui": "^0.3.0", "react": "^16.8.6", "react-dom": "^16.8.6", "react-helmet": "^6.0.0", "rebass": "^4.0.7", "remark-slug": "^5.1.2", "theme-ui": "^0.3.1" } } ================================================ FILE: packages/docs/src/components/blocks.js ================================================ import React from 'react' import { Box } from 'rebass' export const Container = props => export const Banner = props => {props.children} export const LogoGrid = props => export const Grid = ({ width = 256, gap = 4, ...props }) => export const NavGrid = props => ================================================ FILE: packages/docs/src/components/code.js ================================================ import React from 'react' import styled from '@emotion/styled' import { LiveProvider, LivePreview, LiveEditor, LiveError, } from '@jxnblk/react-live' import { ThemeProvider } from 'theme-ui' import Prism from '@theme-ui/prism' import * as Rebass from 'rebass' import * as RebassForms from '@rebass/forms' import * as RebassLayout from '@rebass/layout' import { Flex, Box } from 'rebass' import { countries } from 'countries-list' const scope = { ...Rebass, ...RebassForms, ...RebassLayout, ThemeProvider, props: { image: 'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20', countries, } } scope.Switch = props => { const [active, setActive] = React.useState(true) const toggle = () => setActive(!active) return ( ) } const transformCode = code => `<>${code}` const Preview = ({ fullwidth, ...props }) => const Editor = props => const Err = props => export default ({ className, ...props }) => { const lang = 'jsx' if (props.preview) { const code = props.children return ( ) } if (props.live) { const code = props.children return ( `1px solid ${t.colors.muted}`, borderRadius: 2, }}> Live Demo ) } return ( ) } ================================================ FILE: packages/docs/src/components/demo-provider.js ================================================ import React, { useState } from 'react' import { ThemeProvider } from 'theme-ui' import { Helmet } from 'react-helmet' import { Box, Flex } from 'rebass' import * as themeui from '@theme-ui/presets' import merge from 'lodash.merge' import rebass from '@rebass/preset' import material from '@rebass/preset-material' const presets = { ...themeui, rebass, material, } const themes = [ 'rebass', 'material', ...Object.keys(presets) ] export default props => { const [ theme, setTheme ] = useState('preset') const demoTheme = merge({}, rebass, presets[theme]) return (
{demoTheme.googleFonts && ( )} Theme: {' '} {props.children}
) } ================================================ FILE: packages/docs/src/components/edit-link.js ================================================ import React from 'react' import { Location } from '@reach/router' import { Link } from 'rebass' const base = 'https://github.com/rebassjs/rebass/edit/master/packages/docs/src/pages' const getHREF = (location) => { if (location.pathname === '/') return false return base + location.pathname.replace(/\/+$/, '') + '.mdx' } export default props => { const href = getHREF(location) if (!href) return false return ( ) }} /> ================================================ FILE: packages/docs/src/components/footer.js ================================================ import React from 'react' import { Box, Flex, Link, } from 'rebass' export default props => Rebass Reflexbox Docs GitHub ================================================ FILE: packages/docs/src/components/head.js ================================================ import React from 'react' import { Helmet } from 'react-helmet' import pkg from 'rebass/package.json' export default props => { const title = [props.title, 'Rebass'].filter(Boolean).join(' | ') return ( {title} ) } ================================================ FILE: packages/docs/src/components/header.js ================================================ import React from 'react' import { Flex, Box, Link, Button, } from 'rebass' import { useColorMode } from 'theme-ui' const modes = [ 'lite', 'dark', 'gray', 'hack', 'pink', ] const Burger = ({ size = 24 }) => ( ) const Dot = props => export default ({ nav, menu, setMenu, fullwidth, }) => { const [ mode, setMode ] = useColorMode() const cycleMode = e => { const i = (modes.indexOf(mode) + 1) % modes.length setMode(modes[i]) } return ( {!fullwidth && ( )} Rebass GitHub ) } ================================================ FILE: packages/docs/src/components/icon.js ================================================ import React from 'react' import Logo from './Logo' export default props => (
) ================================================ FILE: packages/docs/src/components/layout.js ================================================ import React, { useState, useRef } from 'react' import { Box, Flex } from 'rebass' import { Pagination } from '@theme-ui/sidenav' import Head from './head' import SkipLink from './skip-link' import Header from './header' import Footer from './footer' import Nav from './nav' import EditLink from './edit-link' const Sidebar = props => { props.setMenu(false) }} onBlur={e => { props.setMenu(false) }} onFocus={e => { props.setMenu(true) }} style={{ transform: props.open ? 'translateX(0)' : 'translateX(-100%)', }} sx={{ position: [ 'fixed', 'sticky' ], zIndex: 1, top: 0, left: 0, bottom: [0, 'auto'], width: [ 256, 256, 320 ], minWidth: 0, maxHeight: ['100vh', 'none'], overflowY: 'auto', WebkitOverflowScrolling: 'touch', flex: 'none', px: 3, mt: [64, 0], pb: 3, bg: ['background', 'transparent'], transition: 'transform .2s ease-out', transform: [, 'none !important'], ul: { listStyle: 'none', padding: 0, }, a: { variant: 'links.nav', }, 'li > ul > li > a': { pl: '24px', } }}>