diff --git a/CHANGELOG.md b/CHANGELOG.md index f0a6e6537..f134b6af7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,44 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25) + + +### Bug Fixes + +* **docz-theme-default:** prettier format ([cb5643d](https://github.com/pedronauck/docz/commit/cb5643d)) + + + + + +# [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25) + + +### Bug Fixes + +* **docz-theme-default:** change background based on toggle ([2241f8b](https://github.com/pedronauck/docz/commit/2241f8b)) +* **docz-theme-default:** change chevronDown to burguer icon with animation ([8649938](https://github.com/pedronauck/docz/commit/8649938)) +* **docz-theme-default:** include breakpoints as const ([43490bb](https://github.com/pedronauck/docz/commit/43490bb)) +* **docz-theme-default:** lint code ([7c97a41](https://github.com/pedronauck/docz/commit/7c97a41)) +* **docz-theme-default:** made container responsive ([ddf078d](https://github.com/pedronauck/docz/commit/ddf078d)) +* **docz-theme-default:** responsive position for wrapper ([bb56449](https://github.com/pedronauck/docz/commit/bb56449)) +* **docz-theme-default:** sidebar toggle for links and sub-links ([9cd6321](https://github.com/pedronauck/docz/commit/9cd6321)) + + +### Features + +* **docz-theme-default:** add dark mode 🌚 ([#81](https://github.com/pedronauck/docz/issues/81)) ([964cf4d](https://github.com/pedronauck/docz/commit/964cf4d)) +* **docz-theme-default:** include breakpoints reactive on sidebar ([d3911b4](https://github.com/pedronauck/docz/commit/d3911b4)) +* **docz-theme-default:** include media queries facepaint ([5f78734](https://github.com/pedronauck/docz/commit/5f78734)) +* **docz-theme-default:** include toggle to sidebar ([a94e517](https://github.com/pedronauck/docz/commit/a94e517)) +* **docz-theme-default:** include ToggleBackground ([cac7ecd](https://github.com/pedronauck/docz/commit/cac7ecd)) +* **docz-theme-default:** table responsive ([0580a77](https://github.com/pedronauck/docz/commit/0580a77)) + + + + ## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22) diff --git a/examples/babel6/CHANGELOG.md b/examples/babel6/CHANGELOG.md index 854e2b3d5..ece28a231 100644 --- a/examples/babel6/CHANGELOG.md +++ b/examples/babel6/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25) + + + + +**Note:** Version bump only for package docz-example-babel6 + + +# [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25) + + + + +**Note:** Version bump only for package docz-example-babel6 + ## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22) diff --git a/examples/babel6/package.json b/examples/babel6/package.json index 30dabe537..bb3899474 100644 --- a/examples/babel6/package.json +++ b/examples/babel6/package.json @@ -1,13 +1,13 @@ { "name": "docz-example-babel6", - "version": "0.2.11", + "version": "0.3.0", "license": "MIT", "scripts": { "dev": "docz dev", "build": "docz build" }, "dependencies": { - "docz": "^0.2.11", + "docz": "^0.3.0", "docz-core": "^0.2.11", "emotion": "^9.2.3", "prop-types": "^15.6.2", diff --git a/examples/basic/CHANGELOG.md b/examples/basic/CHANGELOG.md index 2c265fb78..737ed235e 100644 --- a/examples/basic/CHANGELOG.md +++ b/examples/basic/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25) + + + + +**Note:** Version bump only for package docz-example-basic + + +# [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25) + + + + +**Note:** Version bump only for package docz-example-basic + ## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22) diff --git a/examples/basic/package.json b/examples/basic/package.json index 749821e68..44f73068d 100644 --- a/examples/basic/package.json +++ b/examples/basic/package.json @@ -1,13 +1,13 @@ { "name": "docz-example-basic", - "version": "0.2.11", + "version": "0.3.0", "license": "MIT", "scripts": { "dev": "docz dev", "build": "docz build" }, "dependencies": { - "docz": "^0.2.11", + "docz": "^0.3.0", "docz-core": "^0.2.11", "emotion": "^9.2.3", "prop-types": "^15.6.2", diff --git a/examples/css-less/CHANGELOG.md b/examples/css-less/CHANGELOG.md index 9699296da..64fa35af8 100644 --- a/examples/css-less/CHANGELOG.md +++ b/examples/css-less/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25) + + + + +**Note:** Version bump only for package docz-example-css-less + + +# [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25) + + + + +**Note:** Version bump only for package docz-example-css-less + ## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22) diff --git a/examples/css-less/package.json b/examples/css-less/package.json index 7fe29f228..91a42ba47 100644 --- a/examples/css-less/package.json +++ b/examples/css-less/package.json @@ -1,6 +1,6 @@ { "name": "docz-example-css-less", - "version": "0.2.11", + "version": "0.3.0", "license": "MIT", "scripts": { "dev": "docz dev", @@ -8,7 +8,7 @@ }, "dependencies": { "classnames": "^2.2.6", - "docz": "^0.2.11", + "docz": "^0.3.0", "docz-core": "^0.2.11", "prop-types": "^15.6.2", "react": "^16.4.1", diff --git a/examples/css-postcss/CHANGELOG.md b/examples/css-postcss/CHANGELOG.md index 9699296da..27e1ac5c3 100644 --- a/examples/css-postcss/CHANGELOG.md +++ b/examples/css-postcss/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25) + + + + +**Note:** Version bump only for package docz-example-css-postcss + + +# [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25) + + + + +**Note:** Version bump only for package docz-example-css-postcss + ## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22) diff --git a/examples/css-postcss/package.json b/examples/css-postcss/package.json index bf9a420da..08f69c493 100644 --- a/examples/css-postcss/package.json +++ b/examples/css-postcss/package.json @@ -1,6 +1,6 @@ { "name": "docz-example-css-postcss", - "version": "0.2.11", + "version": "0.3.0", "license": "MIT", "scripts": { "dev": "docz dev", @@ -8,7 +8,7 @@ }, "dependencies": { "classnames": "^2.2.6", - "docz": "^0.2.11", + "docz": "^0.3.0", "docz-core": "^0.2.11", "prop-types": "^15.6.2", "react": "^16.4.1", diff --git a/examples/css-sass/CHANGELOG.md b/examples/css-sass/CHANGELOG.md index 9699296da..be89649f9 100644 --- a/examples/css-sass/CHANGELOG.md +++ b/examples/css-sass/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25) + + + + +**Note:** Version bump only for package docz-example-css-sass + + +# [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25) + + + + +**Note:** Version bump only for package docz-example-css-sass + ## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22) diff --git a/examples/css-sass/package.json b/examples/css-sass/package.json index d650d00b9..0c86f1ad8 100644 --- a/examples/css-sass/package.json +++ b/examples/css-sass/package.json @@ -1,6 +1,6 @@ { "name": "docz-example-css-sass", - "version": "0.2.11", + "version": "0.3.0", "license": "MIT", "scripts": { "dev": "docz dev", @@ -8,7 +8,7 @@ }, "dependencies": { "classnames": "^2.2.6", - "docz": "^0.2.11", + "docz": "^0.3.0", "docz-core": "^0.2.11", "prop-types": "^15.6.2", "react": "^16.4.1", diff --git a/examples/css-stylus/CHANGELOG.md b/examples/css-stylus/CHANGELOG.md index 9699296da..ddb4a6c16 100644 --- a/examples/css-stylus/CHANGELOG.md +++ b/examples/css-stylus/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25) + + + + +**Note:** Version bump only for package docz-example-css-stylus + + +# [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25) + + + + +**Note:** Version bump only for package docz-example-css-stylus + ## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22) diff --git a/examples/css-stylus/package.json b/examples/css-stylus/package.json index 701883d63..3654d1875 100644 --- a/examples/css-stylus/package.json +++ b/examples/css-stylus/package.json @@ -1,6 +1,6 @@ { "name": "docz-example-css-stylus", - "version": "0.2.11", + "version": "0.3.0", "license": "MIT", "scripts": { "dev": "docz dev", @@ -8,7 +8,7 @@ }, "dependencies": { "classnames": "^2.2.6", - "docz": "^0.2.11", + "docz": "^0.3.0", "docz-core": "^0.2.11", "prop-types": "^15.6.2", "react": "^16.4.1", diff --git a/examples/flow/CHANGELOG.md b/examples/flow/CHANGELOG.md index 3133fcf5b..4f94ae483 100644 --- a/examples/flow/CHANGELOG.md +++ b/examples/flow/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25) + + + + +**Note:** Version bump only for package docz-example-flow + + +# [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25) + + + + +**Note:** Version bump only for package docz-example-flow + ## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22) diff --git a/examples/flow/package.json b/examples/flow/package.json index 03b74f79e..3653708f1 100644 --- a/examples/flow/package.json +++ b/examples/flow/package.json @@ -1,6 +1,6 @@ { "name": "docz-example-flow", - "version": "0.2.11", + "version": "0.3.0", "license": "MIT", "scripts": { "dev": "docz dev", @@ -8,7 +8,7 @@ }, "dependencies": { "@babel/preset-flow": "^7.0.0-beta.51", - "docz": "^0.2.11", + "docz": "^0.3.0", "emotion": "^9.2.3", "prop-types": "^15.6.2", "react": "^16.4.1", diff --git a/examples/typescript/CHANGELOG.md b/examples/typescript/CHANGELOG.md index e91702acd..0d6df52f0 100644 --- a/examples/typescript/CHANGELOG.md +++ b/examples/typescript/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25) + + + + +**Note:** Version bump only for package docz-example-typescript + + +# [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25) + + + + +**Note:** Version bump only for package docz-example-typescript + ## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22) diff --git a/examples/typescript/package.json b/examples/typescript/package.json index e60742a66..f3adcbf03 100644 --- a/examples/typescript/package.json +++ b/examples/typescript/package.json @@ -1,13 +1,13 @@ { "name": "docz-example-typescript", - "version": "0.2.11", + "version": "0.3.0", "license": "MIT", "scripts": { "dev": "docz dev", "build": "docz build" }, "dependencies": { - "docz": "^0.2.11", + "docz": "^0.3.0", "emotion": "^9.2.3", "react": "^16.4.1", "react-dom": "^16.4.1", diff --git a/lerna.json b/lerna.json index ae955f251..d8f6c7513 100644 --- a/lerna.json +++ b/lerna.json @@ -3,7 +3,7 @@ "packages": [ "packages/**/*" ], - "version": "0.2.11", + "version": "0.3.0", "npmClient": "yarn", "useWorkspaces": true } diff --git a/packages/docz-theme-default/CHANGELOG.md b/packages/docz-theme-default/CHANGELOG.md index e39e08ee7..8deedb639 100644 --- a/packages/docz-theme-default/CHANGELOG.md +++ b/packages/docz-theme-default/CHANGELOG.md @@ -3,6 +3,44 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25) + + +### Bug Fixes + +* **docz-theme-default:** prettier format ([cb5643d](https://github.com/pedronauck/docz/commit/cb5643d)) + + + + + +# [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25) + + +### Bug Fixes + +* **docz-theme-default:** change background based on toggle ([2241f8b](https://github.com/pedronauck/docz/commit/2241f8b)) +* **docz-theme-default:** change chevronDown to burguer icon with animation ([8649938](https://github.com/pedronauck/docz/commit/8649938)) +* **docz-theme-default:** include breakpoints as const ([43490bb](https://github.com/pedronauck/docz/commit/43490bb)) +* **docz-theme-default:** lint code ([7c97a41](https://github.com/pedronauck/docz/commit/7c97a41)) +* **docz-theme-default:** made container responsive ([ddf078d](https://github.com/pedronauck/docz/commit/ddf078d)) +* **docz-theme-default:** responsive position for wrapper ([bb56449](https://github.com/pedronauck/docz/commit/bb56449)) +* **docz-theme-default:** sidebar toggle for links and sub-links ([9cd6321](https://github.com/pedronauck/docz/commit/9cd6321)) + + +### Features + +* **docz-theme-default:** add dark mode 🌚 ([#81](https://github.com/pedronauck/docz/issues/81)) ([964cf4d](https://github.com/pedronauck/docz/commit/964cf4d)) +* **docz-theme-default:** include breakpoints reactive on sidebar ([d3911b4](https://github.com/pedronauck/docz/commit/d3911b4)) +* **docz-theme-default:** include media queries facepaint ([5f78734](https://github.com/pedronauck/docz/commit/5f78734)) +* **docz-theme-default:** include toggle to sidebar ([a94e517](https://github.com/pedronauck/docz/commit/a94e517)) +* **docz-theme-default:** include ToggleBackground ([cac7ecd](https://github.com/pedronauck/docz/commit/cac7ecd)) +* **docz-theme-default:** table responsive ([0580a77](https://github.com/pedronauck/docz/commit/0580a77)) + + + + ## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22) diff --git a/packages/docz-theme-default/package.json b/packages/docz-theme-default/package.json index 763e2060b..124e5dd5f 100644 --- a/packages/docz-theme-default/package.json +++ b/packages/docz-theme-default/package.json @@ -1,6 +1,6 @@ { "name": "docz-theme-default", - "version": "0.2.11", + "version": "0.3.0", "license": "MIT", "main": "dist/index.js", "umd:main": "dist/index.umd.js", @@ -20,13 +20,16 @@ "tslint": "tslint --project ." }, "dependencies": { - "docz": "^0.2.11", + "docz": "^0.3.0", "emotion": "^9.2.3", "emotion-theming": "^9.2.3", + "facepaint": "^1.2.1", "fast-deep-equal": "^2.0.1", "prismjs": "^1.15.0", "prop-types": "15.6.2", "react": "^16.4.1", + "react-adopt": "^0.6.0", + "react-breakpoints": "^3.0.0", "react-dom": "^16.4.1", "react-emotion": "^9.2.3", "react-feather": "^1.1.0", diff --git a/packages/docz-theme-default/src/components/shared/Main/index.tsx b/packages/docz-theme-default/src/components/shared/Main/index.tsx index 9a3f400e0..060d4351b 100644 --- a/packages/docz-theme-default/src/components/shared/Main/index.tsx +++ b/packages/docz-theme-default/src/components/shared/Main/index.tsx @@ -3,7 +3,6 @@ import { Component } from 'react' import styled from 'react-emotion' import equals from 'fast-deep-equal' import { base } from '../../../styles/base' -import webfont from 'webfontloader' const Wrapper = styled('div')` display: flex; @@ -14,13 +13,6 @@ interface MainProps { config: any } -const loadfonts = () => - webfont.load({ - google: { - families: ['Inconsolata', 'Source Sans Pro:300,400,600,700'], - }, - }) - export class Main extends Component { public componentDidUpdate(prevProps: MainProps): void { const { config } = this.props @@ -32,7 +24,6 @@ export class Main extends Component { public componentDidMount(): void { base(this.props.config) - loadfonts() } public render(): React.ReactNode { diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Docz.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Docz.tsx new file mode 100644 index 000000000..b0c7fe5fc --- /dev/null +++ b/packages/docz-theme-default/src/components/shared/Sidebar/Docz.tsx @@ -0,0 +1,18 @@ +import * as React from 'react' +import { SFC } from 'react' + +interface DoczProps { + width?: number + className?: string +} + +export const Docz: SFC = ({ width = 100, className }) => ( + + + +) diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Hamburguer.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Hamburguer.tsx new file mode 100644 index 000000000..cc704b55b --- /dev/null +++ b/packages/docz-theme-default/src/components/shared/Sidebar/Hamburguer.tsx @@ -0,0 +1,87 @@ +import * as React from 'react' +import { SFC } from 'react' +import styled from 'react-emotion' + +interface OpenProps { + opened: boolean +} + +const IconFirst = (p: OpenProps) => (p.opened ? '0px' : '10px') +const IconMiddle = (p: OpenProps) => (p.opened ? '1' : '0') +const IconLast = (p: OpenProps) => (p.opened ? '0px' : '-6px') +const IconRotate = (p: OpenProps) => (p.opened ? '0deg' : '45deg') + +const Icon = styled('div')` + position: relative; + width: 23px; + height: 32px; + transform: translateX(-2px); +` + +const IconLine = styled('span')` + content: ''; + display: block; + position: absolute; + width: 100%; + height: 2px; + left: 0; + right: 0; + background: ${p => p.theme.colors.text}; + transition: transform 0.3s, opacity 0.3s; + + &:nth-child(1) { + top: 0; + transform: translateY(${IconFirst}) rotate(${IconRotate}); + } + + &:nth-child(2) { + top: 8px; + opacity: ${IconMiddle}; + } + + &:nth-child(3) { + top: 16px; + transform: translateY(${IconLast}) rotate(-${IconRotate}); + } +` + +const translateX = (p: OpenProps) => (p.opened ? '10px' : '-6px') +const translateY = (p: OpenProps) => (p.opened ? '4px' : '0px') + +const ToggleButton = styled('button')` + cursor: pointer; + position: absolute; + display: flex; + align-items: center; + justify-content: center; + padding: 5px 6px; + width: 33px; + height: 30px; + top: ${(p: OpenProps) => (!p.opened ? '4px' : '2px')}; + right: 0; + transform: translateX(${translateX}) translateY(${translateY}); + transition: transform 0.3s; + outline: none; + border: none; + background: ${p => (!p.opened ? 'transparent' : p.theme.colors.background)}; + border-radius: 3px; + + ${p => + p.theme.mq({ + display: ['block', 'block', 'block', 'none'], + })}; +` + +interface HamburguerProps extends OpenProps { + onClick: (ev: React.SyntheticEvent) => void +} + +export const Hamburguer: SFC = ({ opened, onClick }) => ( + + + + + + + +) diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx index bf1170eef..0ffbd2f11 100644 --- a/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx +++ b/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx @@ -16,7 +16,7 @@ interface IconProps { const iconRotate = (p: IconProps) => (p.opened ? '-180deg' : '0deg') -const Icon = styled.div` +const Icon = styled('div')` position: absolute; top: 50%; right: 20px; @@ -25,16 +25,17 @@ const Icon = styled.div` transition: transform 0.3s; & svg { - stroke: ${p => p.theme.colors.main}; + stroke: ${p => p.theme.colors.text}; } ` export interface MenuProps { menu: string docs: Entry[] + sidebarToggle: (ev: React.SyntheticEvent) => void } -export const Menu: SFC = ({ menu, docs }) => ( +export const Menu: SFC = ({ menu, docs, sidebarToggle }) => ( {({ on, toggle }: any) => { const handleToggle = (ev: React.SyntheticEvent) => { @@ -54,7 +55,9 @@ export const Menu: SFC = ({ menu, docs }) => (
{docs.map(doc => (
- {doc.name} + + {doc.name} +
))}
diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx index 60bb78985..c0b792835 100644 --- a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx +++ b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx @@ -1,15 +1,44 @@ import React from 'react' -import { Docs, Link, Entry, ThemeConfig } from 'docz' +import { Docs, Link, Entry, ThemeConfig, DocsRenderProps } from 'docz' +import { Toggle } from 'react-powerplug' +import { Media } from 'react-breakpoints' +import { adopt } from 'react-adopt' import styled from 'react-emotion' import { Menu } from './Menu' -import logo from '../../../images/docz.svg' +import { Docz } from './Docz' +import { Hamburguer } from './Hamburguer' + +interface Wrapper { + opened: boolean + desktop: boolean + theme?: any +} + +interface OpenProps { + opened: boolean +} + +const toggle = (p: Wrapper) => (p.opened && !p.desktop ? '-90%' : '0') +const background = (p: Wrapper) => + toggle(p) !== '0' ? 'transparent' : p.theme.colors.sidebarBg const Wrapper = styled('div')` display: flex; flex-direction: column; + padding: 20px; + width: 300px; height: 100%; - background: ${p => p.theme.colors.grayLight}; + background: ${background}; + transition: transform 0.2s, background 0.3s; + transform: translateX(${toggle}); + z-index: 100; + + ${p => + p.theme.mq({ + position: ['absolute', 'absolute', 'absolute', 'relative'], + })}; + ${p => p.theme.styles.sidebar}; a { @@ -17,12 +46,13 @@ const Wrapper = styled('div')` display: block; padding: 6px 16px; font-weight: 600; - color: ${p => p.theme.colors.main}; + color: ${p => p.theme.colors.sidebarText}; + text-decoration: none; } a:hover, a:visited { - color: ${p => p.theme.colors.main}; + color: ${p => p.theme.colors.sidebarText}; } a:hover, @@ -51,6 +81,7 @@ const LogoText = styled('h1')` margin: 24px 16px 64px; padding: 0; font-size: 32px; + color: ${p => p.theme.colors.text}; &:before { position: absolute; @@ -73,50 +104,110 @@ const Footer = styled('div')` align-items: center; justify-content: center; font-size: 14px; - color: ${p => p.theme.colors.grayDark}; - border-top: 1px dashed ${p => p.theme.colors.gray}; + color: ${p => p.theme.colors.footerText}; + border-top: 1px dashed ${p => p.theme.colors.border}; - a { + & > a { padding: 0; margin-left: 5px; } ` +const ToggleBackground = styled('div')` + content: ''; + display: ${(p: OpenProps) => (p.opened ? 'none' : 'block')}; + position: fixed; + background-color: rgba(0, 0, 0, 0.4); + width: 100vw; + height: 100vh; + top: 0; + bottom: 0; + left: 0; + right: 0; + cursor: pointer; + z-index: 99; +` + +const FooterLogo = styled(Docz)` + fill: ${p => p.theme.colors.footerText}; +` + +interface RenderProps { + docs: DocsRenderProps + media: { + breakpoints: any + currentBreakpoint: string + } + toggle: { + on: boolean + toggle: () => void + } + config: { + title: string + logo: { src: string; width: any } + } +} + +const Composed = adopt({ + docs: , + media: , + toggle: , + config: , +}) + export const Sidebar = () => ( - - {({ docs, menus }) => { + + {(props: RenderProps) => { + const { + media: { currentBreakpoint }, + toggle: { on, toggle }, + docs: { docs, menus }, + config: { title, logo }, + } = props + + const isDesktop = currentBreakpoint === 'desktop' ? true : false const docsWithoutMenu = docs.filter((doc: Entry) => !doc.menu) const fromMenu = (menu: string) => docs.filter(doc => doc.menu === menu) + const handleSidebarToggle = (ev: React.SyntheticEvent) => { + if (isDesktop) return + toggle() + } + return ( - - - {({ title, logo }) => - logo ? ( - - ) : ( - {title} - ) - } - - - {docsWithoutMenu.map(doc => ( - - {doc.name} - - ))} - {menus.map(menu => ( - - ))} - - - + + + + {logo ? ( + + ) : ( + {title} + )} + + {docsWithoutMenu.map(doc => ( + + {doc.name} + + ))} + {menus.map(menu => ( + + ))} + + + + + ) }} - + ) diff --git a/packages/docz-theme-default/src/components/ui/H1.tsx b/packages/docz-theme-default/src/components/ui/H1.tsx index 6a8b6fc76..25c9ddc11 100644 --- a/packages/docz-theme-default/src/components/ui/H1.tsx +++ b/packages/docz-theme-default/src/components/ui/H1.tsx @@ -3,7 +3,9 @@ import styled from 'react-emotion' export const H1 = styled('h1')` position: relative; display: table; - ${p => p.theme.styles.h1}; + margin: 30px 0; + font-weight: 600; + ${p => p.theme.mq(p.theme.styles.h1)}; &:before { position: absolute; diff --git a/packages/docz-theme-default/src/components/ui/H2.tsx b/packages/docz-theme-default/src/components/ui/H2.tsx index 05726ae4b..57d8e994a 100644 --- a/packages/docz-theme-default/src/components/ui/H2.tsx +++ b/packages/docz-theme-default/src/components/ui/H2.tsx @@ -2,7 +2,8 @@ import styled from 'react-emotion' export const H2 = styled('h2')` position: relative; - ${p => p.theme.styles.h2}; + margin: 50px 0 20px; + ${p => p.theme.mq(p.theme.styles.h2)}; .icon-link { position: absolute; diff --git a/packages/docz-theme-default/src/components/ui/H3.tsx b/packages/docz-theme-default/src/components/ui/H3.tsx index eab95345f..7867f2a8b 100644 --- a/packages/docz-theme-default/src/components/ui/H3.tsx +++ b/packages/docz-theme-default/src/components/ui/H3.tsx @@ -1,5 +1,5 @@ import styled from 'react-emotion' export const H3 = styled('h3')` - ${p => p.theme.styles.h3}; + ${p => p.theme.mq(p.theme.styles.h3)}; ` diff --git a/packages/docz-theme-default/src/components/ui/H4.tsx b/packages/docz-theme-default/src/components/ui/H4.tsx index 087e819ba..673ebe1e4 100644 --- a/packages/docz-theme-default/src/components/ui/H4.tsx +++ b/packages/docz-theme-default/src/components/ui/H4.tsx @@ -1,5 +1,5 @@ import styled from 'react-emotion' export const H4 = styled('h4')` - ${p => p.theme.styles.h4}; + ${p => p.theme.mq(p.theme.styles.h4)}; ` diff --git a/packages/docz-theme-default/src/components/ui/H5.tsx b/packages/docz-theme-default/src/components/ui/H5.tsx index ba287554f..b0686085f 100644 --- a/packages/docz-theme-default/src/components/ui/H5.tsx +++ b/packages/docz-theme-default/src/components/ui/H5.tsx @@ -1,5 +1,5 @@ import styled from 'react-emotion' export const H5 = styled('h5')` - ${p => p.theme.styles.h5}; + ${p => p.theme.mq(p.theme.styles.h5)}; ` diff --git a/packages/docz-theme-default/src/components/ui/H6.tsx b/packages/docz-theme-default/src/components/ui/H6.tsx index 80f23cd47..6088996f9 100644 --- a/packages/docz-theme-default/src/components/ui/H6.tsx +++ b/packages/docz-theme-default/src/components/ui/H6.tsx @@ -1,5 +1,5 @@ import styled from 'react-emotion' export const H6 = styled('h6')` - ${p => p.theme.styles.h6}; + ${p => p.theme.mq(p.theme.styles.h6)}; ` diff --git a/packages/docz-theme-default/src/components/ui/InlineCode.tsx b/packages/docz-theme-default/src/components/ui/InlineCode.tsx new file mode 100644 index 000000000..37905531f --- /dev/null +++ b/packages/docz-theme-default/src/components/ui/InlineCode.tsx @@ -0,0 +1,7 @@ +import styled from 'react-emotion' + +export const InlineCode = styled('code')` + background: ${p => p.theme.colors.codeBg}; + color: ${p => p.theme.colors.codeColor}; + ${p => p.theme.mq(p.theme.styles.code)}; +` diff --git a/packages/docz-theme-default/src/components/ui/Link.tsx b/packages/docz-theme-default/src/components/ui/Link.tsx new file mode 100644 index 000000000..9012560c1 --- /dev/null +++ b/packages/docz-theme-default/src/components/ui/Link.tsx @@ -0,0 +1,14 @@ +import styled from 'react-emotion' + +export const Link = styled('a')` + &, + &:visited, + &:active { + text-decoration: none; + color: ${p => p.theme.colors.link}; + } + + &:hover { + color: ${p => p.theme.colors.link}; + } +` diff --git a/packages/docz-theme-default/src/components/ui/List.tsx b/packages/docz-theme-default/src/components/ui/List.tsx index 2fe4da0fc..b51c5b75a 100644 --- a/packages/docz-theme-default/src/components/ui/List.tsx +++ b/packages/docz-theme-default/src/components/ui/List.tsx @@ -1,5 +1,5 @@ import styled from 'react-emotion' export const List = styled('ul')` - ${p => p.theme.styles.list}; + ${p => p.theme.mq(p.theme.styles.list)}; ` diff --git a/packages/docz-theme-default/src/components/ui/Page.tsx b/packages/docz-theme-default/src/components/ui/Page.tsx index f44be3f88..c283f91a3 100644 --- a/packages/docz-theme-default/src/components/ui/Page.tsx +++ b/packages/docz-theme-default/src/components/ui/Page.tsx @@ -5,13 +5,17 @@ import styled from 'react-emotion' export const Container = styled('div')` margin: 0 auto; - ${p => p.theme.styles.container}; + width: 960px; + max-width: 100%; + ${p => p.theme.mq(p.theme.styles.container)}; ` const Wrapper = styled('div')` flex: 1; height: 100%; overflow-y: auto; + color: ${p => p.theme.colors.text}; + background: ${p => p.theme.colors.background}; ` export const Page: SFC = ({ children, ...props }) => ( diff --git a/packages/docz-theme-default/src/components/ui/Paragraph.tsx b/packages/docz-theme-default/src/components/ui/Paragraph.tsx new file mode 100644 index 000000000..32df1e5de --- /dev/null +++ b/packages/docz-theme-default/src/components/ui/Paragraph.tsx @@ -0,0 +1,5 @@ +import styled from 'react-emotion' + +export const Paragraph = styled('p')` + color: ${p => p.theme.colors.text}; +` diff --git a/packages/docz-theme-default/src/components/ui/Pre.tsx b/packages/docz-theme-default/src/components/ui/Pre.tsx index 34c163bb1..70f7e34c1 100644 --- a/packages/docz-theme-default/src/components/ui/Pre.tsx +++ b/packages/docz-theme-default/src/components/ui/Pre.tsx @@ -7,7 +7,11 @@ import styled, { cx } from 'react-emotion' const PreStyled = styled('pre')` border: 1px solid ${p => p.theme.colors.border}; - ${p => p.theme.styles.pre}; + margin: 2em 0; + border-radius: 5px; + background: ${p => p.theme.colors.preBg}; + ${p => p.theme.prismTheme}; + ${p => p.theme.mq(p.theme.styles.pre)}; ` interface PreProps { @@ -22,7 +26,6 @@ export class Pre extends PureComponent { const { children } = this.props const childrenProps = children.props.props const childrenClassName = childrenProps && childrenProps.className - const className = cx('react-prism', this.props.className, childrenClassName) return ( diff --git a/packages/docz-theme-default/src/components/ui/Render.tsx b/packages/docz-theme-default/src/components/ui/Render.tsx index e328efe34..197359b5d 100644 --- a/packages/docz-theme-default/src/components/ui/Render.tsx +++ b/packages/docz-theme-default/src/components/ui/Render.tsx @@ -4,16 +4,23 @@ import { RenderComponent } from 'docz' import styled from 'react-emotion' const Playground = styled('div')` - background: transparent; + background: 'render'; border: 1px solid ${p => p.theme.colors.border}; border-bottom: 0; border-radius: 5px 5px 0 0; - ${p => p.theme.styles.playground}; + ${p => p.theme.mq(p.theme.styles.playground)}; ` const Code = styled('div')` - pre { + & code[class*='language-'], + & pre[class*='language-'] { + margin: 0; border-radius: 0 0 5px 5px; + + ${p => + p.theme.mq({ + overflowY: ['hidden', 'hidden', 'hidden', 'initial'], + })}; } ` diff --git a/packages/docz-theme-default/src/components/ui/Table.tsx b/packages/docz-theme-default/src/components/ui/Table.tsx index e74591e0c..2d8733aa7 100644 --- a/packages/docz-theme-default/src/components/ui/Table.tsx +++ b/packages/docz-theme-default/src/components/ui/Table.tsx @@ -12,17 +12,51 @@ export const Table = styled('table')` border-style: hidden; border-radius: 5px; font-size: 14px; - color: ${p => p.theme.colors.grayDark}; + color: ${p => p.theme.colors.tableColor}; + + ${p => + p.theme.mq({ + overflowY: ['hidden', 'hidden', 'hidden', 'initial'], + display: ['block', 'block', 'block', 'table'], + })}; & thead { - color: ${p => p.theme.colors.grayDark}; - background: ${p => p.theme.colors.grayLight}; + color: ${p => p.theme.colors.theadColor}; + background: ${p => p.theme.colors.theadBg}; } & thead th { text-align: left; font-weight: 400; padding: 20px 20px; + + &:nth-child(1) { + ${p => + p.theme.mq({ + width: ['20%', '20%', '20%', 'auto'], + })}; + } + + &:nth-child(2) { + ${p => + p.theme.mq({ + width: ['10%', '10%', '10%', 'auto'], + })}; + } + + &:nth-child(3) { + ${p => + p.theme.mq({ + width: ['10%', '10%', '10%', 'auto'], + })}; + } + + &:nth-child(4) { + ${p => + p.theme.mq({ + width: ['20%', '20%', '20%', 'auto'], + })}; + } } & tbody td { @@ -36,5 +70,5 @@ export const Table = styled('table')` border-top: 1px solid ${p => p.theme.colors.border}; } - ${p => p.theme.styles.table}; + ${p => p.theme.mq(p.theme.styles.table)}; ` diff --git a/packages/docz-theme-default/src/components/ui/Tooltip.tsx b/packages/docz-theme-default/src/components/ui/Tooltip.tsx index 5f18042ec..05b36bb87 100644 --- a/packages/docz-theme-default/src/components/ui/Tooltip.tsx +++ b/packages/docz-theme-default/src/components/ui/Tooltip.tsx @@ -3,6 +3,29 @@ import { ThemeConfig } from 'docz' import { SFC, ReactNode } from 'react' import { Tooltip as BaseTooltip } from 'react-lightweight-tooltip' +const getStyles = (colors: any) => ({ + wrapper: { + color: colors.primary, + }, + content: { + backgroundColor: colors.tooltipBg, + color: colors.tooltipColor, + }, + tooltip: { + display: 'flex', + alignItems: 'center', + width: 220, + maxWidth: 220, + padding: 5, + backgroundColor: colors.tooltipBg, + borderRadius: '3px', + fontSize: 16, + }, + arrow: { + borderTop: `solid ${colors.tooltipBg} 5px`, + }, +}) + interface TooltipProps { text: ReactNode children: ReactNode @@ -11,7 +34,7 @@ interface TooltipProps { export const Tooltip: SFC = ({ text, children }) => ( {config => ( - + {children} )} diff --git a/packages/docz-theme-default/src/components/ui/index.tsx b/packages/docz-theme-default/src/components/ui/index.tsx index fb0288f2e..e81290634 100644 --- a/packages/docz-theme-default/src/components/ui/index.tsx +++ b/packages/docz-theme-default/src/components/ui/index.tsx @@ -4,9 +4,12 @@ export { H3 } from './H3' export { H4 } from './H4' export { H5 } from './H5' export { H6 } from './H6' +export { InlineCode } from './InlineCode' +export { Link } from './Link' export { List } from './List' export { Loading } from './Loading' export { NotFound } from './NotFound' +export { Paragraph } from './Paragraph' export { Page } from './Page' export { Pre } from './Pre' export { Render } from './Render' diff --git a/packages/docz-theme-default/src/config.ts b/packages/docz-theme-default/src/config.ts index 3b15b2b9e..3a48dace2 100644 --- a/packages/docz-theme-default/src/config.ts +++ b/packages/docz-theme-default/src/config.ts @@ -1,9 +1,8 @@ import { styles } from './styles' import * as colors from './styles/colors' -import { prismTheme } from './styles/prism-theme' export const config = { + mode: 'light', colors, styles, - prismTheme, } diff --git a/packages/docz-theme-default/src/images/docz.svg b/packages/docz-theme-default/src/images/docz.svg deleted file mode 100644 index 4cc5af2a1..000000000 --- a/packages/docz-theme-default/src/images/docz.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - Group 2 - Created with Sketch. - - - - - \ No newline at end of file diff --git a/packages/docz-theme-default/src/index.tsx b/packages/docz-theme-default/src/index.tsx index d46745f1f..b6f77e264 100644 --- a/packages/docz-theme-default/src/index.tsx +++ b/packages/docz-theme-default/src/index.tsx @@ -1,39 +1,63 @@ +import './styles/global' + import * as React from 'react' import { theme, DocPreview, ThemeConfig } from 'docz' import { ThemeProvider } from 'emotion-theming' +import webfont from 'webfontloader' +import ReactBreakpoints from 'react-breakpoints' import { config } from './config' import { Sidebar, Main } from './components/shared' +import { mq, breakpoints } from './styles/responsive' import * as components from './components/ui' +import * as modes from './styles/modes' +import * as prismThemes from './styles/prism' const Theme = () => ( {config => ( - -
- - -
+ + +
+ + +
+ )} ) -export default theme(config)(Theme) +webfont.load({ + google: { + families: ['Inconsolata', 'Source Sans Pro:300,400,600,700'], + }, +}) + +const transform = ({ mode, ...config }: any) => ({ + ...config, + prismTheme: (prismThemes as any)[mode], + colors: (modes as any)[mode], +}) + +export default theme(config, transform)(Theme) diff --git a/packages/docz-theme-default/src/styles/base.ts b/packages/docz-theme-default/src/styles/base.ts index e2be617f7..49a5c7f13 100644 --- a/packages/docz-theme-default/src/styles/base.ts +++ b/packages/docz-theme-default/src/styles/base.ts @@ -1,83 +1,11 @@ -import { css, injectGlobal } from 'emotion' - -const selection = (color: string) => css` - background: ${color}; - color: white; -` +import { injectGlobal } from 'emotion' // tslint:disable -export const base = (config: any) => { +export const base = (config: any) => injectGlobal` - @import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css'); - ${css(config.prismTheme)}; - - *, *:before, *:after { - box-sizing: border-box; - } - - .icon-link { - display: none; - } - - ::-moz-selection { - ${selection(config.colors.link)} - } - - ::selection { - ${selection(config.colors.link)} - } - body { - margin: 0; - padding: 0; font-family: ${config.styles.body.fontFamily}; font-size: ${config.styles.body.fontSize}; line-height: ${config.styles.body.lineHeight}; - background: ${config.colors.background}; - overflow: hidden; - } - - body { - color: transparent; - } - - body > *, #root { - color: ${config.colors.text}; - } - - html, body, #root { - height: 100vh; - min-height: 100vh; - } - - a, a:visited, a:active { - text-decoration: none; - color: ${config.colors.link}; - } - - a:hover { - color: ${config.colors.link}; - } - - input:-webkit-autofill, - input:-webkit-autofill:hover, - input:-webkit-autofill:focus, - input:-webkit-autofill:active { - transition: color 9999s ease-out, background-color 9999s ease-out; - transition-delay: 9999s; - } - - input:required, - input:invalid { - box-shadow: none; - } - - button:focus { - outline: none !important; - } - - select { - color: ${config.colors.text}; } ` -} diff --git a/packages/docz-theme-default/src/styles/colors.ts b/packages/docz-theme-default/src/styles/colors.ts index 6069c3cd0..908d2f8ab 100644 --- a/packages/docz-theme-default/src/styles/colors.ts +++ b/packages/docz-theme-default/src/styles/colors.ts @@ -1,11 +1,10 @@ -export const main = '#272833' -export const primary = '#0B5FFF' export const white = '#FFFFFF' -export const grayLight = '#F5F7FF' -export const gray = '#D3DCE6' -export const grayDark = '#8492A6' +export const grayExtraLight = '#EEF1F5' +export const grayLight = '#CED4DE' +export const gray = '#7D899C' +export const grayDark = '#2D3747' +export const grayExtraDark = '#1D2330' +export const dark = '#13161F' -export const text = main -export const link = primary -export const background = white -export const border = gray +export const blue = '#0B5FFF' +export const skyBlue = '#1FB6FF' diff --git a/packages/docz-theme-default/src/styles/global.ts b/packages/docz-theme-default/src/styles/global.ts new file mode 100644 index 000000000..61d82ff68 --- /dev/null +++ b/packages/docz-theme-default/src/styles/global.ts @@ -0,0 +1,29 @@ +import { injectGlobal } from 'emotion' + +// tslint:disable +injectGlobal` + @import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css'); + + *, *:before, *:after { + box-sizing: border-box; + } + + .icon-link { + display: none; + } + + body { + margin: 0; + padding: 0; + overflow: hidden; + } + + body { + color: transparent; + } + + html, body, #root { + height: 100vh; + min-height: 100vh; + } +` diff --git a/packages/docz-theme-default/src/styles/index.ts b/packages/docz-theme-default/src/styles/index.ts index 69c45b610..259afb847 100644 --- a/packages/docz-theme-default/src/styles/index.ts +++ b/packages/docz-theme-default/src/styles/index.ts @@ -1,32 +1,28 @@ -import * as colors from './colors' - export const styles = { body: { fontFamily: "'Source Sans Pro', Helvetica, sans-serif", fontSize: '16px', lineHeight: 1.5, }, - sidebar: { - padding: 20, - width: 320, - }, container: { - padding: '50px 50px 100px', width: 960, + maxWidth: '100%', + padding: ['20px 30px', '50px 50px 100px'], }, h1: { margin: '30px 0', - fontSize: 48, + fontSize: [36, 48], fontWeight: 600, }, h2: { - margin: '50px 0 20px', - fontSize: 32, + margin: ['25px 0 20px', '50px 0 20px'], + lineHeight: ['1.2em', '1.5em'], + fontSize: [30, 32], fontWeight: 400, }, h3: { margin: '30px 0 20px', - fontSize: 24, + fontSize: [22, 24], fontWeight: 400, }, h4: { @@ -46,9 +42,17 @@ export const styles = { margin: '10px 0 10px 20px', }, playground: { - padding: '2rem', + padding: ['1.5em', '2em'], + }, + code: { + margin: '0 3px', + padding: '4px 6px', + borderRadius: '3px', + fontFamily: "'Inconsolata', monospace", + fontSize: 16, }, pre: { + padding: ['1.5em', '2em'], fontFamily: "'Inconsolata', monospace", fontSize: 16, }, @@ -56,26 +60,4 @@ export const styles = { fontFamily: "'Inconsolata', monospace", fontSize: 16, }, - tooltip: { - wrapper: { - color: colors.primary, - }, - content: { - backgroundColor: colors.main, - color: colors.grayLight, - }, - tooltip: { - display: 'flex', - alignItems: 'center', - width: 220, - maxWidth: 220, - padding: 5, - backgroundColor: colors.main, - borderRadius: '3px', - fontSize: 16, - }, - arrow: { - borderTop: `solid ${colors.main} 5px`, - }, - }, } diff --git a/packages/docz-theme-default/src/styles/modes.ts b/packages/docz-theme-default/src/styles/modes.ts new file mode 100644 index 000000000..a0b157d00 --- /dev/null +++ b/packages/docz-theme-default/src/styles/modes.ts @@ -0,0 +1,41 @@ +import * as colors from './colors' + +export const light = { + ...colors, + primary: colors.blue, + text: colors.dark, + link: colors.blue, + footerText: colors.grayDark, + sidebarBg: colors.grayExtraLight, + sidebarText: colors.dark, + background: colors.white, + border: colors.grayLight, + theadColor: colors.gray, + theadBg: colors.grayExtraLight, + tableColor: colors.dark, + tooltipBg: colors.dark, + tooltipColor: colors.grayExtraLight, + codeBg: colors.grayExtraLight, + codeColor: colors.gray, + preBg: colors.grayExtraLight, +} + +export const dark = { + ...colors, + primary: colors.skyBlue, + text: colors.grayExtraLight, + link: colors.skyBlue, + footerText: colors.grayLight, + sidebarBg: colors.dark, + sidebarText: colors.grayLight, + background: colors.grayExtraDark, + border: colors.grayDark, + theadColor: colors.gray, + theadBg: colors.grayDark, + tableColor: colors.grayExtraLight, + tooltipBg: colors.dark, + tooltipColor: colors.grayExtraLight, + codeBg: colors.gray, + codeColor: colors.grayExtraLight, + preBg: colors.grayDark, +} diff --git a/packages/docz-theme-default/src/styles/prism/dark.ts b/packages/docz-theme-default/src/styles/prism/dark.ts new file mode 100644 index 000000000..0178a7c2a --- /dev/null +++ b/packages/docz-theme-default/src/styles/prism/dark.ts @@ -0,0 +1,138 @@ +export const theme = ` +/** + * atom-dark theme for prism.js + * Based on Atom's atom-dark theme: https://github.com/atom/atom-dark-syntax + * @author Joe Gibson (@gibsjose) + */ + +code[class*="language-"], +pre[class*="language-"] { + color: #c5c8c6; + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +/* Code blocks */ +pre[class*="language-"] { + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #141D28; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #7C7C7C; +} + +.token.punctuation { + color: #c5c8c6; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.keyword, +.token.tag { + color: #96CBFE; +} + +.token.class-name { + color: #FFFFB6; + text-decoration: underline; +} + +.token.boolean, +.token.constant { + color: #99CC99; +} + +.token.symbol, +.token.deleted { + color: #f92672; +} + +.token.number { + color: #FF73FD; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #A8FF60; +} + +.token.variable { + color: #C6C5FE; +} + +.token.operator { + color: #EDEDED; +} + +.token.entity { + color: #FFFFB6; + /* text-decoration: underline; */ +} + +.token.url { + color: #96CBFE; +} + +.language-css .token.string, +.style .token.string { + color: #87C38A; +} + +.token.atrule, +.token.attr-value { + color: #F9EE98; +} + +.token.function { + color: #DAD085; +} + +.token.regex { + color: #E9C062; +} + +.token.important { + color: #fd971f; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} +` diff --git a/packages/docz-theme-default/src/styles/prism/index.ts b/packages/docz-theme-default/src/styles/prism/index.ts new file mode 100644 index 000000000..0145fff2b --- /dev/null +++ b/packages/docz-theme-default/src/styles/prism/index.ts @@ -0,0 +1,2 @@ +export { theme as dark } from './dark' +export { theme as light } from './light' diff --git a/packages/docz-theme-default/src/styles/prism-theme.ts b/packages/docz-theme-default/src/styles/prism/light.ts similarity index 93% rename from packages/docz-theme-default/src/styles/prism-theme.ts rename to packages/docz-theme-default/src/styles/prism/light.ts index 2c822be56..514259d34 100644 --- a/packages/docz-theme-default/src/styles/prism-theme.ts +++ b/packages/docz-theme-default/src/styles/prism/light.ts @@ -1,4 +1,4 @@ -export const prismTheme = ` +export const theme = ` code[class*="language-"], pre[class*="language-"] { direction: ltr; @@ -32,16 +32,9 @@ export const prismTheme = ` /* Code blocks */ pre[class*="language-"] { - padding: 2rem; - margin: 0; overflow: auto; } - /* Inline code */ - :not(pre) > code[class*="language-"] { - padding: .1rem; - } - .token.comment, .token.prolog, .token.doctype, @@ -98,10 +91,6 @@ export const prismTheme = ` color: #ac9739; } - .attr-value { - padding-right: 5px; - } - .token.statement, .token.regex, .token.atrule { diff --git a/packages/docz-theme-default/src/styles/responsive.ts b/packages/docz-theme-default/src/styles/responsive.ts new file mode 100644 index 000000000..0ccc68d14 --- /dev/null +++ b/packages/docz-theme-default/src/styles/responsive.ts @@ -0,0 +1,13 @@ +import facepaint from 'facepaint' + +export const breakpoints = { + mobile: 420, + tablet: 920, + desktop: 1120, +} + +export const mq = facepaint([ + `@media(min-width: ${breakpoints.mobile}px)`, + `@media(min-width: ${breakpoints.tablet}px)`, + `@media(min-width: ${breakpoints.desktop}px)`, +]) diff --git a/packages/docz-theme-default/src/types.d.ts b/packages/docz-theme-default/src/types.d.ts index c5981efdd..1e2757204 100644 --- a/packages/docz-theme-default/src/types.d.ts +++ b/packages/docz-theme-default/src/types.d.ts @@ -4,8 +4,36 @@ declare module 'react-lightweight-tooltip' declare module 'react-feather/dist/icons/chevron-down' declare module 'react-spinners' declare module 'webfontloader' +declare module 'react-breakpoints' declare module '*.svg' { const content: any export default content } + +declare module 'facepaint' { + interface Styles { + [key: string]: string | number | Styles + } + + interface MqStyles { + [key: string]: string | string[] | number | number[] | Styles + } + + type Mq = (styles: object) => Styles + + interface FacepaintSettings { + literal?: boolean + overlap?: boolean + } + + type Facepaint = ( + /** media queries to be applied across */ + mediaQueries: string[], + settings?: FacepaintSettings + ) => Mq + + const facepaint: Facepaint + + export = facepaint +} diff --git a/packages/docz/CHANGELOG.md b/packages/docz/CHANGELOG.md index 561c57b30..47059e3ab 100644 --- a/packages/docz/CHANGELOG.md +++ b/packages/docz/CHANGELOG.md @@ -3,6 +3,25 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25) + + + + +**Note:** Version bump only for package docz + + +# [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25) + + +### Features + +* **docz-theme-default:** add dark mode 🌚 ([#81](https://github.com/pedronauck/docz/issues/81)) ([964cf4d](https://github.com/pedronauck/docz/commit/964cf4d)) + + + + ## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22) diff --git a/packages/docz/package.json b/packages/docz/package.json index 73faf376b..f3e499298 100644 --- a/packages/docz/package.json +++ b/packages/docz/package.json @@ -1,6 +1,6 @@ { "name": "docz", - "version": "0.2.11", + "version": "0.3.0", "main": "dist/index.js", "umd:main": "dist/index.umd.js", "module": "dist/index.m.js", @@ -28,7 +28,7 @@ "@sindresorhus/slugify": "^0.3.0", "deepmerge": "^2.1.1", "docz-core": "^0.2.11", - "docz-theme-default": "^0.2.11", + "docz-theme-default": "^0.3.0", "invariant": "^2.2.4", "loadable-components": "^2.2.2", "pascalcase": "^0.1.1", diff --git a/packages/docz/src/theme.tsx b/packages/docz/src/theme.tsx index 32024334a..670f72b38 100644 --- a/packages/docz/src/theme.tsx +++ b/packages/docz/src/theme.tsx @@ -63,9 +63,13 @@ export interface ThemeProps extends DataContext { children(WrappedComponent: CT): JSX.Element } +export type TransformFn = (config: ThemeConfig) => ThemeConfig export type ThemeReturn = (WrappedComponent: CT) => CT -export function theme(defaultConfig?: ThemeConfig): ThemeReturn { +export function theme( + defaultConfig?: ThemeConfig, + transform?: TransformFn +): ThemeReturn { return WrappedComponent => { const Theme: CT = ({ wrapper: Wrapper = DefaultWrapper, @@ -74,9 +78,13 @@ export function theme(defaultConfig?: ThemeConfig): ThemeReturn { config = {}, hashRouter = false, }) => { - const newConfig = merge(defaultConfig, config) - const value = { entries, imports, config: newConfig } const Router = hashRouter ? HashRouter : BrowserRouter + const newConfig = merge(defaultConfig, config) + const value = { + entries, + imports, + config: transform ? transform(newConfig) : newConfig, + } return ( diff --git a/yarn.lock b/yarn.lock index d2b6a9384..f15d999b7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3857,6 +3857,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4: safe-buffer "^5.0.1" sha.js "^2.4.8" +create-react-context@0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.1.tgz#425a3d96f4b7690c2fbf20aed5aeae2e2007a959" + dependencies: + fbjs "^0.8.0" + gud "^1.0.0" + cross-env@^5.1.6: version "5.1.6" resolved "https://registry.npmjs.org/cross-env/-/cross-env-5.1.6.tgz#0dc05caf945b24e4b9e3b12871fe0e858d08b38d" @@ -4887,6 +4894,10 @@ extsprintf@^1.2.0: version "1.4.0" resolved "https://registry.npmjs.org/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f" +facepaint@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/facepaint/-/facepaint-1.2.1.tgz#89929e601b15227278c53c516f764fc462b09c33" + fast-deep-equal@^1.0.0: version "1.1.0" resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614" @@ -4930,6 +4941,18 @@ faye-websocket@~0.11.0: dependencies: websocket-driver ">=0.5.1" +fbjs@^0.8.0: + version "0.8.17" + resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" + dependencies: + core-js "^1.0.0" + isomorphic-fetch "^2.1.1" + loose-envify "^1.0.0" + object-assign "^4.1.0" + promise "^7.1.1" + setimmediate "^1.0.5" + ua-parser-js "^0.7.18" + fbjs@^0.8.1, fbjs@^0.8.16: version "0.8.16" resolved "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" @@ -5646,6 +5669,10 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, version "4.1.11" resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658" +gud@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0" + gzip-size@3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520" @@ -5841,7 +5868,7 @@ hoek@2.x.x: version "2.16.3" resolved "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed" -hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0: +hoist-non-react-statics@2.5.0, hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0: version "2.5.0" resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40" @@ -7177,7 +7204,7 @@ lodash.clonedeep@^4.3.2, lodash.clonedeep@^4.5.0: version "4.5.0" resolved "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef" -lodash.debounce@^4.0.8: +lodash.debounce@4.0.8, lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" @@ -9160,6 +9187,22 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7: minimist "^1.2.0" strip-json-comments "~2.0.1" +react-adopt@^0.6.0: + version "0.6.0" + resolved "https://registry.npmjs.org/react-adopt/-/react-adopt-0.6.0.tgz#e5ff903a655d3082217f82bc9d5033a4b64fafad" + dependencies: + hoist-non-react-statics "^2.5.0" + react "^16.3.2" + react-display-name "^0.2.4" + +react-breakpoints@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/react-breakpoints/-/react-breakpoints-3.0.0.tgz#b57d18dc7ad73a7c00c1949e689360af9cac6759" + dependencies: + create-react-context "0.2.1" + hoist-non-react-statics "2.5.0" + lodash.debounce "4.0.8" + react-dev-utils@^5.0.1: version "5.0.1" resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-5.0.1.tgz#1f396e161fe44b595db1b186a40067289bf06613" @@ -9183,6 +9226,10 @@ react-dev-utils@^5.0.1: strip-ansi "3.0.1" text-table "0.2.0" +react-display-name@^0.2.4: + version "0.2.4" + resolved "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.4.tgz#e2a670b81d79a2204335510c01246f4c92ff12cf" + react-docgen-typescript-loader@^2.1.1: version "2.1.1" resolved "https://registry.npmjs.org/react-docgen-typescript-loader/-/react-docgen-typescript-loader-2.1.1.tgz#8ba68dcc0d913c1fe82b2dfb8a837b02a23df74e" @@ -9292,7 +9339,7 @@ react-spinners@^0.3.2: react-emotion "^9.1.1" recompose "0.26.0" -react@^16.4.1: +react@^16.3.2, react@^16.4.1: version "16.4.1" resolved "https://registry.npmjs.org/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32" dependencies: @@ -11124,6 +11171,10 @@ typescript@^2.9.2: version "2.9.2" resolved "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz#1cbf61d05d6b96269244eb6a3bce4bd914e0f00c" +ua-parser-js@^0.7.18: + version "0.7.18" + resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed" + ua-parser-js@^0.7.9: version "0.7.17" resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"