From a94e517a30261a24af73c28d4f07c8423dc5a6c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcelo=20Forment=C3=A3o?= Date: Thu, 21 Jun 2018 16:04:05 -0300 Subject: [PATCH 01/18] feat(docz-theme-default): include toggle to sidebar --- .../src/components/shared/Sidebar/index.tsx | 123 +++++++++++++----- 1 file changed, 90 insertions(+), 33 deletions(-) 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 0e04b5dfe..389037b34 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,28 @@ import React from 'react' import { Docs, Link, Entry, ThemeConfig } from 'docz' import styled from 'react-emotion' +import { Toggle } from 'react-powerplug' +import ChevronDown from 'react-feather/dist/icons/chevron-down' import { Menu } from './Menu' import logo from '../../../images/docz.svg' +interface Wrapper { + opened: boolean +} + +const wrapperToggle = (p: Wrapper) => (p.opened ? '-90%' : '0') + const Wrapper = styled('div')` display: flex; + position: relative; flex-direction: column; height: 100%; background: ${p => p.theme.colors.grayLight}; + transition: transform 0.3s, background 0.3s; + transform: translateX(${wrapperToggle}); + z-index: 99; + ${p => p.theme.styles.sidebar}; a { @@ -82,41 +95,85 @@ const Footer = styled('div')` } ` -export const Sidebar = () => ( - - {({ docs, menus }) => { - const docsWithoutMenu = docs.filter((doc: Entry) => !doc.menu) - const fromMenu = (menu: string) => docs.filter(doc => doc.menu === menu) +const ToggleBlock = styled('div')` + position: absolute; + width: 32px; + height: 32px; + top: 0; + right: 0; + cursor: pointer; +` + +interface IconProps { + opened: boolean +} + +const iconRotate = (p: IconProps) => (p.opened ? '-90deg' : '90deg') +const Icon = styled('div')` + position: relative; + top: 50%; + transform: translateY(-50%) rotate(${iconRotate}); + transform-origin: 50% 50%; + transition: transform 0.3s; + + & svg { + display: block; + margin: auto; + stroke: ${p => p.theme.colors.main}; + } +` + +export const Sidebar = () => ( + + {({ on, toggle }: any) => { + const handleToggle = (ev: React.SyntheticEvent) => { + ev.preventDefault() + toggle() + } return ( - - - {({ title, logo }) => - logo ? ( - - ) : ( - {title} - ) - } - - - {docsWithoutMenu.map(doc => ( - - {doc.name} - - ))} - {menus.map(menu => ( - - ))} - - - + + {({ docs, menus }) => { + const docsWithoutMenu = docs.filter((doc: Entry) => !doc.menu) + const fromMenu = (menu: string) => docs.filter(doc => doc.menu === menu) + + return ( + + + + + + + + {({ title, logo }) => + logo ? ( + + ) : ( + {title} + ) + } + + + {docsWithoutMenu.map(doc => ( + + {doc.name} + + ))} + {menus.map(menu => ( + + ))} + + + + ) + }} + ) }} - + ) From ddf078dc9f2f14c321bedf415e732b11dd2d5ab3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcelo=20Forment=C3=A3o?= Date: Thu, 21 Jun 2018 16:04:42 -0300 Subject: [PATCH 02/18] fix(docz-theme-default): made container responsive --- packages/docz-theme-default/src/styles/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/docz-theme-default/src/styles/index.ts b/packages/docz-theme-default/src/styles/index.ts index 9d0811f6d..98fc32c66 100644 --- a/packages/docz-theme-default/src/styles/index.ts +++ b/packages/docz-theme-default/src/styles/index.ts @@ -17,6 +17,7 @@ export const styles = { container: { padding: '50px 50px 100px', width: 960, + maxWidth: '100%' }, h1: { margin: '30px 0', From 2241f8b91d18bdb888cde6ca00846252aca7aadd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcelo=20Forment=C3=A3o?= Date: Thu, 21 Jun 2018 16:58:26 -0300 Subject: [PATCH 03/18] fix(docz-theme-default): change background based on toggle --- .../docz-theme-default/src/components/shared/Sidebar/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 389037b34..a174c01ac 100644 --- a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx +++ b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx @@ -18,7 +18,7 @@ const Wrapper = styled('div')` position: relative; flex-direction: column; height: 100%; - background: ${p => p.theme.colors.grayLight}; + background: ${p => wrapperToggle(p) !== '0' ? p.theme.colors.white : p.theme.colors.grayLight}; transition: transform 0.3s, background 0.3s; transform: translateX(${wrapperToggle}); z-index: 99; From 1e984010776342cdf5e2855e8e3989c40b2285e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcelo=20Forment=C3=A3o?= Date: Thu, 21 Jun 2018 16:58:46 -0300 Subject: [PATCH 04/18] chore(docz-theme-plugin): add facepaint package --- packages/docz-theme-default/package.json | 1 + yarn.lock | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/packages/docz-theme-default/package.json b/packages/docz-theme-default/package.json index 5aba71f2a..b93462452 100644 --- a/packages/docz-theme-default/package.json +++ b/packages/docz-theme-default/package.json @@ -23,6 +23,7 @@ "docz": "^0.2.7", "emotion": "^9.2.1", "emotion-theming": "^9.2.1", + "facepaint": "^1.2.1", "fast-deep-equal": "^2.0.1", "prismjs": "^1.14.0", "prop-types": "15.6.1", diff --git a/yarn.lock b/yarn.lock index 3c2f68920..8b3b20031 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4203,6 +4203,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" From 5f7873455a99f33be5302b5091ddbd8bf277a819 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcelo=20Forment=C3=A3o?= Date: Fri, 22 Jun 2018 14:06:36 -0300 Subject: [PATCH 05/18] feat(docz-theme-default): include media queries facepaint --- packages/docz-theme-default/src/config.ts | 2 ++ .../src/styles/responsive.ts | 7 +++++ packages/docz-theme-default/src/types.d.ts | 28 +++++++++++++++++++ 3 files changed, 37 insertions(+) create mode 100644 packages/docz-theme-default/src/styles/responsive.ts diff --git a/packages/docz-theme-default/src/config.ts b/packages/docz-theme-default/src/config.ts index 3b15b2b9e..90c0c766c 100644 --- a/packages/docz-theme-default/src/config.ts +++ b/packages/docz-theme-default/src/config.ts @@ -1,9 +1,11 @@ import { styles } from './styles' import * as colors from './styles/colors' import { prismTheme } from './styles/prism-theme' +import { mq } from './styles/responsive' export const config = { colors, styles, prismTheme, + mq, } 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..fe83e9a6e --- /dev/null +++ b/packages/docz-theme-default/src/styles/responsive.ts @@ -0,0 +1,7 @@ +import facepaint from 'facepaint' + +export const mq = facepaint([ + '@media(min-width: 420px)', + '@media(min-width: 920px)', + '@media(min-width: 1120px)' +]) diff --git a/packages/docz-theme-default/src/types.d.ts b/packages/docz-theme-default/src/types.d.ts index 44f5ae1a9..ef1ecc16e 100644 --- a/packages/docz-theme-default/src/types.d.ts +++ b/packages/docz-theme-default/src/types.d.ts @@ -8,3 +8,31 @@ declare module '*.svg' { const content: any export default content } + +declare module "facepaint" { + + interface Styles { + [ruleOrSelector: string]: string | number | Styles; + } + + interface MqStyles { + [ruleOrSelector: 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, string, string], + settings?: FacepaintSettings + ) => Mq; + + const facepaint: Facepaint; + + export = facepaint; +} From bb56449edfa6afe441287be2de8654bf8ce63429 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcelo=20Forment=C3=A3o?= Date: Fri, 22 Jun 2018 14:08:04 -0300 Subject: [PATCH 06/18] fix(docz-theme-default): responsive position for wrapper --- .../src/components/shared/Sidebar/index.tsx | 12 ++++++++---- packages/docz-theme-default/src/styles/index.ts | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) 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 a174c01ac..f2e5bec1c 100644 --- a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx +++ b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx @@ -14,14 +14,17 @@ interface Wrapper { const wrapperToggle = (p: Wrapper) => (p.opened ? '-90%' : '0') const Wrapper = styled('div')` + ${p => p.theme.mq({ + position: ['absolute', 'absolute', 'relative'] + })}; display: flex; - position: relative; flex-direction: column; height: 100%; - background: ${p => wrapperToggle(p) !== '0' ? p.theme.colors.white : p.theme.colors.grayLight}; + background: ${p => + wrapperToggle(p) !== '0' ? p.theme.colors.white : p.theme.colors.grayLight}; transition: transform 0.3s, background 0.3s; transform: translateX(${wrapperToggle}); - z-index: 99; + z-index: 100; ${p => p.theme.styles.sidebar}; @@ -135,7 +138,8 @@ export const Sidebar = () => ( {({ docs, menus }) => { const docsWithoutMenu = docs.filter((doc: Entry) => !doc.menu) - const fromMenu = (menu: string) => docs.filter(doc => doc.menu === menu) + const fromMenu = (menu: string) => + docs.filter(doc => doc.menu === menu) return ( diff --git a/packages/docz-theme-default/src/styles/index.ts b/packages/docz-theme-default/src/styles/index.ts index 98fc32c66..4c75161a7 100644 --- a/packages/docz-theme-default/src/styles/index.ts +++ b/packages/docz-theme-default/src/styles/index.ts @@ -17,7 +17,7 @@ export const styles = { container: { padding: '50px 50px 100px', width: 960, - maxWidth: '100%' + maxWidth: '100%', }, h1: { margin: '30px 0', From 43490bb65156076c10c17359860776ba86dacefe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcelo=20Forment=C3=A3o?= Date: Fri, 22 Jun 2018 15:32:00 -0300 Subject: [PATCH 07/18] fix(docz-theme-default): include breakpoints as const --- packages/docz-theme-default/src/styles/responsive.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/docz-theme-default/src/styles/responsive.ts b/packages/docz-theme-default/src/styles/responsive.ts index fe83e9a6e..fb3954df8 100644 --- a/packages/docz-theme-default/src/styles/responsive.ts +++ b/packages/docz-theme-default/src/styles/responsive.ts @@ -1,7 +1,13 @@ import facepaint from 'facepaint' +export const breakpoints = { + mobile: 420, + tablet: 920, + desktop: 1120, +} + export const mq = facepaint([ - '@media(min-width: 420px)', - '@media(min-width: 920px)', - '@media(min-width: 1120px)' + `@media(min-width: ${breakpoints.mobile}px)`, + `@media(min-width: ${breakpoints.tablet}px)`, + `@media(min-width: ${breakpoints.desktop}px)` ]) From cac7ecd4f4e8975ff7a9e52d874cd17ba82fdafe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcelo=20Forment=C3=A3o?= Date: Fri, 22 Jun 2018 15:32:38 -0300 Subject: [PATCH 08/18] feat(docz-theme-default): include ToggleBackground --- .../src/components/shared/Sidebar/index.tsx | 89 ++++++++++++------- 1 file changed, 56 insertions(+), 33 deletions(-) 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 f2e5bec1c..64c88cf27 100644 --- a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx +++ b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx @@ -15,7 +15,7 @@ const wrapperToggle = (p: Wrapper) => (p.opened ? '-90%' : '0') const Wrapper = styled('div')` ${p => p.theme.mq({ - position: ['absolute', 'absolute', 'relative'] + position: ['absolute', 'absolute', 'absolute', 'relative'] })}; display: flex; flex-direction: column; @@ -99,6 +99,9 @@ const Footer = styled('div')` ` const ToggleBlock = styled('div')` + ${p => p.theme.mq({ + display: ['block', 'block', 'block', 'none'] + })}; position: absolute; width: 32px; height: 32px; @@ -107,6 +110,23 @@ const ToggleBlock = styled('div')` cursor: pointer; ` +interface ToggleBackgroundProps { + opened: boolean +} + +const ToggleBackgroundAppear = (p: ToggleBackgroundProps) => (p.opened ? 'none' : 'block') + +const ToggleBackground = styled('div')` + display: ${ToggleBackgroundAppear}; + content: ''; + background-color: rgba(0, 0, 0, .2); + position: fixed; + width: 100%; + height: 100%; + top: 0; bottom: 0; left: 0; right: 0; + z-index: 99; +` + interface IconProps { opened: boolean } @@ -142,38 +162,41 @@ export const Sidebar = () => ( docs.filter(doc => doc.menu === menu) return ( - - - - - - - - {({ title, logo }) => - logo ? ( - - ) : ( - {title} - ) - } - - - {docsWithoutMenu.map(doc => ( - - {doc.name} - - ))} - {menus.map(menu => ( - - ))} - - - + + + + + + + + + {({ title, logo }) => + logo ? ( + + ) : ( + {title} + ) + } + + + {docsWithoutMenu.map(doc => ( + + {doc.name} + + ))} + {menus.map(menu => ( + + ))} + + + + + ) }} From 86499385db82c5f33ca6dd0f3a767b5dbdf54f9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcelo=20Forment=C3=A3o?= Date: Fri, 22 Jun 2018 16:58:45 -0300 Subject: [PATCH 09/18] fix(docz-theme-default): change chevronDown to burguer icon with animation --- .../src/components/shared/Sidebar/index.tsx | 78 +++++++++++++------ 1 file changed, 53 insertions(+), 25 deletions(-) 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 64c88cf27..9deff34a3 100644 --- a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx +++ b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx @@ -2,16 +2,35 @@ import React from 'react' import { Docs, Link, Entry, ThemeConfig } from 'docz' import styled from 'react-emotion' import { Toggle } from 'react-powerplug' -import ChevronDown from 'react-feather/dist/icons/chevron-down' import { Menu } from './Menu' import logo from '../../../images/docz.svg' + interface Wrapper { opened: boolean } +interface IconProps { + opened: boolean +} + +interface ToggleBlockProps { + opened: boolean +} + +interface ToggleBackgroundProps { + opened: boolean +} + const wrapperToggle = (p: Wrapper) => (p.opened ? '-90%' : '0') +const IconFirst = (p: IconProps) => (p.opened ? '0px' : '12px') +const IconMiddle = (p: IconProps) => (p.opened ? '1' : '0') +const IconLast = (p: IconProps) => (p.opened ? '0px' : '-4px') +const IconRotate = (p: IconProps) => (p.opened ? '0deg' : '45deg') +const toggleBlockTranslateX = (p: ToggleBlockProps) => (p.opened ? '10px' : '-6px') +const toggleBlockTranslateY = (p: ToggleBlockProps) => (p.opened ? '4px' : '0px') +const toggleBackgroundAppear = (p: ToggleBackgroundProps) => (p.opened ? 'none' : 'block') const Wrapper = styled('div')` ${p => p.theme.mq({ @@ -104,46 +123,53 @@ const ToggleBlock = styled('div')` })}; position: absolute; width: 32px; - height: 32px; + height: 36px; top: 0; right: 0; cursor: pointer; + transform: translateX(${toggleBlockTranslateX}) translateY(${toggleBlockTranslateY}); + transition: transform 0.3s; ` -interface ToggleBackgroundProps { - opened: boolean -} - -const ToggleBackgroundAppear = (p: ToggleBackgroundProps) => (p.opened ? 'none' : 'block') - const ToggleBackground = styled('div')` - display: ${ToggleBackgroundAppear}; content: ''; - background-color: rgba(0, 0, 0, .2); + display: ${toggleBackgroundAppear}; position: fixed; + background-color: rgba(0, 0, 0, .2); width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; + cursor: pointer; z-index: 99; ` -interface IconProps { - opened: boolean -} - -const iconRotate = (p: IconProps) => (p.opened ? '-90deg' : '90deg') - const Icon = styled('div')` position: relative; - top: 50%; - transform: translateY(-50%) rotate(${iconRotate}); - transform-origin: 50% 50%; - transition: transform 0.3s; + width: 28px; + height: 32px; + margin: auto; - & svg { + & .icon__line { + content: ''; display: block; - margin: auto; - stroke: ${p => p.theme.colors.main}; + position: absolute; + width: 100%; + height: 2px; + left: 0; right: 0; + background: ${p => p.theme.colors.main}; + transition: transform 0.3s, opacity 0.3s; + & :nth-child(1) { + top: 10px; + transform: translateY(${IconFirst}) rotate(${IconRotate}); + } + & :nth-child(2) { + top: 18px; + opacity: ${IconMiddle} + } + & :nth-child(3) { + top: 26px; + transform: translateY(${IconLast}) rotate(-${IconRotate}); + } } ` @@ -164,9 +190,11 @@ export const Sidebar = () => ( return ( - + - + + + From 7c97a41b289d61504c4cc731cf554c8767c13d5f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcelo=20Forment=C3=A3o?= Date: Sun, 24 Jun 2018 17:31:41 -0300 Subject: [PATCH 10/18] fix(docz-theme-default): lint code --- .../src/components/shared/Sidebar/index.tsx | 53 ++++++++++++------- .../src/styles/responsive.ts | 2 +- packages/docz-theme-default/src/types.d.ts | 19 ++++--- 3 files changed, 43 insertions(+), 31 deletions(-) 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 9deff34a3..98f2eef5f 100644 --- a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx +++ b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx @@ -6,7 +6,6 @@ import { Toggle } from 'react-powerplug' import { Menu } from './Menu' import logo from '../../../images/docz.svg' - interface Wrapper { opened: boolean } @@ -28,14 +27,18 @@ const IconFirst = (p: IconProps) => (p.opened ? '0px' : '12px') const IconMiddle = (p: IconProps) => (p.opened ? '1' : '0') const IconLast = (p: IconProps) => (p.opened ? '0px' : '-4px') const IconRotate = (p: IconProps) => (p.opened ? '0deg' : '45deg') -const toggleBlockTranslateX = (p: ToggleBlockProps) => (p.opened ? '10px' : '-6px') -const toggleBlockTranslateY = (p: ToggleBlockProps) => (p.opened ? '4px' : '0px') -const toggleBackgroundAppear = (p: ToggleBackgroundProps) => (p.opened ? 'none' : 'block') +const toggleBlockTranslateX = (p: ToggleBlockProps) => + p.opened ? '10px' : '-6px' +const toggleBlockTranslateY = (p: ToggleBlockProps) => + p.opened ? '4px' : '0px' +const toggleBackgroundAppear = (p: ToggleBackgroundProps) => + p.opened ? 'none' : 'block' const Wrapper = styled('div')` - ${p => p.theme.mq({ - position: ['absolute', 'absolute', 'absolute', 'relative'] - })}; + ${p => + p.theme.mq({ + position: ['absolute', 'absolute', 'absolute', 'relative'], + })}; display: flex; flex-direction: column; height: 100%; @@ -118,16 +121,18 @@ const Footer = styled('div')` ` const ToggleBlock = styled('div')` - ${p => p.theme.mq({ - display: ['block', 'block', 'block', 'none'] - })}; + ${p => + p.theme.mq({ + display: ['block', 'block', 'block', 'none'], + })}; position: absolute; width: 32px; height: 36px; top: 0; right: 0; cursor: pointer; - transform: translateX(${toggleBlockTranslateX}) translateY(${toggleBlockTranslateY}); + transform: translateX(${toggleBlockTranslateX}) + translateY(${toggleBlockTranslateY}); transition: transform 0.3s; ` @@ -135,10 +140,13 @@ const ToggleBackground = styled('div')` content: ''; display: ${toggleBackgroundAppear}; position: fixed; - background-color: rgba(0, 0, 0, .2); + background-color: rgba(0, 0, 0, 0.2); width: 100%; height: 100%; - top: 0; bottom: 0; left: 0; right: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; cursor: pointer; z-index: 99; ` @@ -155,7 +163,8 @@ const Icon = styled('div')` position: absolute; width: 100%; height: 2px; - left: 0; right: 0; + left: 0; + right: 0; background: ${p => p.theme.colors.main}; transition: transform 0.3s, opacity 0.3s; & :nth-child(1) { @@ -164,7 +173,7 @@ const Icon = styled('div')` } & :nth-child(2) { top: 18px; - opacity: ${IconMiddle} + opacity: ${IconMiddle}; } & :nth-child(3) { top: 26px; @@ -192,15 +201,19 @@ export const Sidebar = () => ( - - - + + + {({ title, logo }) => logo ? ( - + ) : ( {title} ) @@ -223,7 +236,7 @@ export const Sidebar = () => ( - + ) }} diff --git a/packages/docz-theme-default/src/styles/responsive.ts b/packages/docz-theme-default/src/styles/responsive.ts index fb3954df8..0ccc68d14 100644 --- a/packages/docz-theme-default/src/styles/responsive.ts +++ b/packages/docz-theme-default/src/styles/responsive.ts @@ -9,5 +9,5 @@ export const breakpoints = { export const mq = facepaint([ `@media(min-width: ${breakpoints.mobile}px)`, `@media(min-width: ${breakpoints.tablet}px)`, - `@media(min-width: ${breakpoints.desktop}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 ef1ecc16e..d84060a3d 100644 --- a/packages/docz-theme-default/src/types.d.ts +++ b/packages/docz-theme-default/src/types.d.ts @@ -9,30 +9,29 @@ declare module '*.svg' { export default content } -declare module "facepaint" { - +declare module 'facepaint' { interface Styles { - [ruleOrSelector: string]: string | number | Styles; + [ruleOrSelector: string]: string | number | Styles } interface MqStyles { - [ruleOrSelector: string]: string | string[] | number | number[] | Styles; + [ruleOrSelector: string]: string | string[] | number | number[] | Styles } - type Mq = (styles: object) => Styles; + type Mq = (styles: object) => Styles interface FacepaintSettings { - literal?: boolean; - overlap?: boolean; + literal?: boolean + overlap?: boolean } type Facepaint = ( /** media queries to be applied across */ mediaQueries: [string, string, string], settings?: FacepaintSettings - ) => Mq; + ) => Mq - const facepaint: Facepaint; + const facepaint: Facepaint - export = facepaint; + export = facepaint } From 0580a779d03dfe5ddea69ed8d2261366fe8d786c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcelo=20Forment=C3=A3o?= Date: Sun, 24 Jun 2018 18:49:22 -0300 Subject: [PATCH 11/18] feat(docz-theme-default): table responsive --- .../src/components/ui/Table.tsx | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/packages/docz-theme-default/src/components/ui/Table.tsx b/packages/docz-theme-default/src/components/ui/Table.tsx index e74591e0c..9c9caf6b3 100644 --- a/packages/docz-theme-default/src/components/ui/Table.tsx +++ b/packages/docz-theme-default/src/components/ui/Table.tsx @@ -1,6 +1,11 @@ import styled from 'react-emotion' export const Table = styled('table')` +${p => + p.theme.mq({ + overflowY: ['hidden', 'hidden', 'hidden', 'initial'], + display: ['block', 'block', 'block', 'table'] + })}; width: 100%; padding: 0; margin-bottom: 50px; @@ -23,6 +28,30 @@ export const Table = styled('table')` 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 { From 9cd6321899c4287d9cc1938c13b00db84d699361 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcelo=20Forment=C3=A3o?= Date: Sun, 24 Jun 2018 20:36:07 -0300 Subject: [PATCH 12/18] fix(docz-theme-default): sidebar toggle for links and sub-links --- .../src/components/shared/Sidebar/Menu.tsx | 5 +++-- .../src/components/shared/Sidebar/index.tsx | 11 +++++------ 2 files changed, 8 insertions(+), 8 deletions(-) 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..c1bd9da3c 100644 --- a/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx +++ b/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx @@ -32,9 +32,10 @@ const Icon = styled.div` 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,7 @@ 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 98f2eef5f..5f38541ea 100644 --- a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx +++ b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx @@ -185,8 +185,7 @@ const Icon = styled('div')` export const Sidebar = () => ( {({ on, toggle }: any) => { - const handleToggle = (ev: React.SyntheticEvent) => { - ev.preventDefault() + const handleSidebarToggle = (ev: React.SyntheticEvent) => { toggle() } return ( @@ -199,7 +198,7 @@ export const Sidebar = () => ( return ( - + @@ -221,12 +220,12 @@ export const Sidebar = () => ( {docsWithoutMenu.map(doc => ( - + {doc.name} ))} {menus.map(menu => ( - + ))}
@@ -236,7 +235,7 @@ export const Sidebar = () => (
- + ) }} From d3911b4e1cb40da238603668967be24efbe958d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcelo=20Forment=C3=A3o?= Date: Sun, 24 Jun 2018 23:06:08 -0300 Subject: [PATCH 13/18] feat(docz-theme-default): include breakpoints reactive on sidebar --- packages/docz-theme-default/package.json | 1 + .../src/components/shared/Sidebar/Menu.tsx | 4 +- .../src/components/shared/Sidebar/index.tsx | 132 ++++++++++-------- .../src/components/ui/Table.tsx | 26 ++-- packages/docz-theme-default/src/config.ts | 3 +- packages/docz-theme-default/src/index.tsx | 45 +++--- packages/docz-theme-default/src/types.d.ts | 1 + yarn.lock | 41 +++++- 8 files changed, 161 insertions(+), 92 deletions(-) diff --git a/packages/docz-theme-default/package.json b/packages/docz-theme-default/package.json index b93462452..eab095d2e 100644 --- a/packages/docz-theme-default/package.json +++ b/packages/docz-theme-default/package.json @@ -28,6 +28,7 @@ "prismjs": "^1.14.0", "prop-types": "15.6.1", "react": "^16.4.0", + "react-breakpoints": "^3.0.0", "react-dom": "^16.4.0", "react-emotion": "^9.2.1", "react-feather": "^1.1.0", 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 c1bd9da3c..6cf144275 100644 --- a/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx +++ b/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx @@ -55,7 +55,9 @@ export const Menu: SFC = ({ menu, docs, sidebarToggle }) => (
{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 5f38541ea..0cf999644 100644 --- a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx +++ b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx @@ -2,12 +2,14 @@ import React from 'react' import { Docs, Link, Entry, ThemeConfig } from 'docz' import styled from 'react-emotion' import { Toggle } from 'react-powerplug' +import { Media } from 'react-breakpoints' import { Menu } from './Menu' import logo from '../../../images/docz.svg' interface Wrapper { opened: boolean + desktop: boolean } interface IconProps { @@ -22,7 +24,7 @@ interface ToggleBackgroundProps { opened: boolean } -const wrapperToggle = (p: Wrapper) => (p.opened ? '-90%' : '0') +const wrapperToggle = (p: Wrapper) => (p.opened && !p.desktop ? '-90%' : '0') const IconFirst = (p: IconProps) => (p.opened ? '0px' : '12px') const IconMiddle = (p: IconProps) => (p.opened ? '1' : '0') const IconLast = (p: IconProps) => (p.opened ? '0px' : '-4px') @@ -183,64 +185,84 @@ const Icon = styled('div')` ` export const Sidebar = () => ( - - {({ on, toggle }: any) => { - const handleSidebarToggle = (ev: React.SyntheticEvent) => { - toggle() - } + + {({ currentBreakpoint }: any) => { return ( - - {({ docs, menus }) => { - const docsWithoutMenu = docs.filter((doc: Entry) => !doc.menu) - const fromMenu = (menu: string) => - docs.filter(doc => doc.menu === menu) - + + {({ on, toggle }: any) => { + const isDesktop = currentBreakpoint === 'desktop' ? true : false + const handleSidebarToggle = (ev: React.SyntheticEvent) => { + if (isDesktop) return + toggle() + } return ( - - - - - - - - - - - {({ title, logo }) => - logo ? ( - - ) : ( - {title} - ) - } - - - {docsWithoutMenu.map(doc => ( - - {doc.name} - - ))} - {menus.map(menu => ( - - ))} - - - - - + + {({ docs, menus }) => { + const docsWithoutMenu = docs.filter((doc: Entry) => !doc.menu) + const fromMenu = (menu: string) => + docs.filter(doc => doc.menu === menu) + + return ( + + + + + + + + + + + {({ title, logo }) => + logo ? ( + + ) : ( + {title} + ) + } + + + {docsWithoutMenu.map(doc => ( + + {doc.name} + + ))} + {menus.map(menu => ( + + ))} + + + + + + ) + }} + ) }} - + ) }} - + ) diff --git a/packages/docz-theme-default/src/components/ui/Table.tsx b/packages/docz-theme-default/src/components/ui/Table.tsx index 9c9caf6b3..51bdc88eb 100644 --- a/packages/docz-theme-default/src/components/ui/Table.tsx +++ b/packages/docz-theme-default/src/components/ui/Table.tsx @@ -1,11 +1,11 @@ import styled from 'react-emotion' export const Table = styled('table')` -${p => - p.theme.mq({ - overflowY: ['hidden', 'hidden', 'hidden', 'initial'], - display: ['block', 'block', 'block', 'table'] - })}; + ${p => + p.theme.mq({ + overflowY: ['hidden', 'hidden', 'hidden', 'initial'], + display: ['block', 'block', 'block', 'table'], + })}; width: 100%; padding: 0; margin-bottom: 50px; @@ -31,26 +31,26 @@ ${p => & :nth-child(1) { ${p => p.theme.mq({ - width: ['20%', '20%', '20%', 'auto'] - })}; + width: ['20%', '20%', '20%', 'auto'], + })}; } & :nth-child(2) { ${p => p.theme.mq({ - width: ['10%', '10%', '10%', 'auto'] - })}; + width: ['10%', '10%', '10%', 'auto'], + })}; } & :nth-child(3) { ${p => p.theme.mq({ - width: ['10%', '10%', '10%', 'auto'] - })}; + width: ['10%', '10%', '10%', 'auto'], + })}; } & :nth-child(4) { ${p => p.theme.mq({ - width: ['20%', '20%', '20%', 'auto'] - })}; + width: ['20%', '20%', '20%', 'auto'], + })}; } } diff --git a/packages/docz-theme-default/src/config.ts b/packages/docz-theme-default/src/config.ts index 90c0c766c..7c7cb1f73 100644 --- a/packages/docz-theme-default/src/config.ts +++ b/packages/docz-theme-default/src/config.ts @@ -1,11 +1,12 @@ import { styles } from './styles' import * as colors from './styles/colors' import { prismTheme } from './styles/prism-theme' -import { mq } from './styles/responsive' +import { mq, breakpoints } from './styles/responsive' export const config = { colors, styles, prismTheme, mq, + breakpoints, } diff --git a/packages/docz-theme-default/src/index.tsx b/packages/docz-theme-default/src/index.tsx index d46745f1f..313f10b59 100644 --- a/packages/docz-theme-default/src/index.tsx +++ b/packages/docz-theme-default/src/index.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import { theme, DocPreview, ThemeConfig } from 'docz' import { ThemeProvider } from 'emotion-theming' +import ReactBreakpoints from 'react-breakpoints' import { config } from './config' import { Sidebar, Main } from './components/shared' @@ -10,27 +11,29 @@ const Theme = () => ( {config => ( -
- - -
+ +
+ + +
+ )} diff --git a/packages/docz-theme-default/src/types.d.ts b/packages/docz-theme-default/src/types.d.ts index d84060a3d..a33537753 100644 --- a/packages/docz-theme-default/src/types.d.ts +++ b/packages/docz-theme-default/src/types.d.ts @@ -3,6 +3,7 @@ declare module 'react-powerplug' declare module 'react-lightweight-tooltip' declare module 'react-feather/dist/icons/chevron-down' declare module 'react-spinners' +declare module 'react-breakpoints' declare module '*.svg' { const content: any diff --git a/yarn.lock b/yarn.lock index 8b3b20031..58c7f1ccc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3341,6 +3341,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" @@ -4246,6 +4253,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" @@ -4800,6 +4819,10 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9: 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" @@ -4971,7 +4994,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" @@ -5961,6 +5984,10 @@ lodash.assign@^4.0.3, lodash.assign@^4.0.6: version "4.2.0" resolved "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7" +lodash.debounce@4.0.8: + version "4.0.8" + resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" + lodash.deburr@^4.1.0: version "4.1.0" resolved "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz#ddb1bbb3ef07458c0177ba07de14422cb033ff9b" @@ -7355,6 +7382,14 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7: minimist "^1.2.0" strip-json-comments "~2.0.1" +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" @@ -9019,6 +9054,10 @@ typescript@2.9.1, typescript@^2.9.1: version "2.9.1" resolved "https://registry.npmjs.org/typescript/-/typescript-2.9.1.tgz#fdb19d2c67a15d11995fd15640e373e09ab09961" +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" From 964cf4db7d407c98e17e39ae8c548ca6d54d7dc2 Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Sun, 24 Jun 2018 23:32:58 -0300 Subject: [PATCH 14/18] =?UTF-8?q?feat(docz-theme-default):=20add=20dark=20?= =?UTF-8?q?mode=20=F0=9F=8C=9A=20(#81)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * SAVEPOINT * feat(docz-theme-default): add dark mode 🌚 --- .../src/components/shared/Main/index.tsx | 9 -- .../src/components/shared/Sidebar/Docz.tsx | 18 +++ .../src/components/shared/Sidebar/Menu.tsx | 2 +- .../src/components/shared/Sidebar/index.tsx | 22 ++- .../src/components/ui/InlineCode.tsx | 7 + .../src/components/ui/Link.tsx | 12 ++ .../src/components/ui/Page.tsx | 2 + .../src/components/ui/Paragraph.tsx | 5 + .../src/components/ui/Pre.tsx | 6 +- .../src/components/ui/Render.tsx | 6 +- .../src/components/ui/Table.tsx | 6 +- .../src/components/ui/Tooltip.tsx | 25 +++- .../src/components/ui/index.tsx | 3 + packages/docz-theme-default/src/config.ts | 3 +- .../docz-theme-default/src/images/docz.svg | 31 ---- packages/docz-theme-default/src/index.tsx | 22 ++- .../docz-theme-default/src/styles/base.ts | 76 +--------- .../docz-theme-default/src/styles/colors.ts | 17 +-- .../docz-theme-default/src/styles/global.ts | 29 ++++ .../docz-theme-default/src/styles/index.ts | 31 +--- .../docz-theme-default/src/styles/modes.ts | 41 ++++++ .../src/styles/prism/dark.ts | 138 ++++++++++++++++++ .../src/styles/prism/index.ts | 2 + .../styles/{prism-theme.ts => prism/light.ts} | 13 +- packages/docz/src/theme.tsx | 14 +- 25 files changed, 359 insertions(+), 181 deletions(-) create mode 100644 packages/docz-theme-default/src/components/shared/Sidebar/Docz.tsx create mode 100644 packages/docz-theme-default/src/components/ui/InlineCode.tsx create mode 100644 packages/docz-theme-default/src/components/ui/Link.tsx create mode 100644 packages/docz-theme-default/src/components/ui/Paragraph.tsx delete mode 100644 packages/docz-theme-default/src/images/docz.svg create mode 100644 packages/docz-theme-default/src/styles/global.ts create mode 100644 packages/docz-theme-default/src/styles/modes.ts create mode 100644 packages/docz-theme-default/src/styles/prism/dark.ts create mode 100644 packages/docz-theme-default/src/styles/prism/index.ts rename packages/docz-theme-default/src/styles/{prism-theme.ts => prism/light.ts} (93%) 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/Menu.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx index bf1170eef..26cc09d8a 100644 --- a/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx +++ b/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx @@ -25,7 +25,7 @@ const Icon = styled.div` transition: transform 0.3s; & svg { - stroke: ${p => p.theme.colors.main}; + stroke: ${p => p.theme.colors.text}; } ` 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..a7faa542c 100644 --- a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx +++ b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx @@ -3,13 +3,13 @@ import { Docs, Link, Entry, ThemeConfig } from 'docz' import styled from 'react-emotion' import { Menu } from './Menu' -import logo from '../../../images/docz.svg' +import { Docz } from './Docz' const Wrapper = styled('div')` display: flex; flex-direction: column; height: 100%; - background: ${p => p.theme.colors.grayLight}; + background: ${p => p.theme.colors.sidebarBg}; ${p => p.theme.styles.sidebar}; a { @@ -17,12 +17,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 +52,7 @@ const LogoText = styled('h1')` margin: 24px 16px 64px; padding: 0; font-size: 32px; + color: ${p => p.theme.colors.text}; &:before { position: absolute; @@ -73,15 +75,19 @@ 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 FooterLogo = styled(Docz)` + fill: ${p => p.theme.colors.footerText}; +` + export const Sidebar = () => ( {({ docs, menus }) => { @@ -112,7 +118,7 @@ export const Sidebar = () => ( 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..af3acd48c --- /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.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..572fab477 --- /dev/null +++ b/packages/docz-theme-default/src/components/ui/Link.tsx @@ -0,0 +1,12 @@ +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}; + } +` \ No newline at end of file diff --git a/packages/docz-theme-default/src/components/ui/Page.tsx b/packages/docz-theme-default/src/components/ui/Page.tsx index f44be3f88..1c19f2a88 100644 --- a/packages/docz-theme-default/src/components/ui/Page.tsx +++ b/packages/docz-theme-default/src/components/ui/Page.tsx @@ -12,6 +12,8 @@ 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..af8f327c1 100644 --- a/packages/docz-theme-default/src/components/ui/Pre.tsx +++ b/packages/docz-theme-default/src/components/ui/Pre.tsx @@ -7,6 +7,11 @@ import styled, { cx } from 'react-emotion' const PreStyled = styled('pre')` border: 1px solid ${p => p.theme.colors.border}; + padding: 2em; + margin: 2em 0; + border-radius: 5px; + background: ${p => p.theme.colors.preBg}; + ${p => p.theme.prismTheme}; ${p => p.theme.styles.pre}; ` @@ -22,7 +27,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..a2220fee4 100644 --- a/packages/docz-theme-default/src/components/ui/Render.tsx +++ b/packages/docz-theme-default/src/components/ui/Render.tsx @@ -4,7 +4,7 @@ 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; @@ -12,7 +12,9 @@ const Playground = styled('div')` ` const Code = styled('div')` - pre { + & code[class*='language-'], + & pre[class*='language-'] { + margin: 0; border-radius: 0 0 5px 5px; } ` diff --git a/packages/docz-theme-default/src/components/ui/Table.tsx b/packages/docz-theme-default/src/components/ui/Table.tsx index e74591e0c..ff284e2e4 100644 --- a/packages/docz-theme-default/src/components/ui/Table.tsx +++ b/packages/docz-theme-default/src/components/ui/Table.tsx @@ -12,11 +12,11 @@ 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}; & 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 { 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..caa220d85 100644 --- a/packages/docz-theme-default/src/index.tsx +++ b/packages/docz-theme-default/src/index.tsx @@ -1,10 +1,15 @@ +import './styles/global' + import * as React from 'react' import { theme, DocPreview, ThemeConfig } from 'docz' import { ThemeProvider } from 'emotion-theming' +import webfont from 'webfontloader' import { config } from './config' import { Sidebar, Main } from './components/shared' import * as components from './components/ui' +import * as modes from './styles/modes' +import * as prismThemes from './styles/prism' const Theme = () => ( @@ -24,6 +29,9 @@ const Theme = () => ( h5: components.H5, h6: components.H6, ul: components.List, + p: components.Paragraph, + a: components.Link, + inlineCode: components.InlineCode, loading: components.Loading, table: components.Table, pre: components.Pre, @@ -36,4 +44,16 @@ const Theme = () => ( ) -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..ad28418ba 100644 --- a/packages/docz-theme-default/src/styles/index.ts +++ b/packages/docz-theme-default/src/styles/index.ts @@ -1,5 +1,3 @@ -import * as colors from './colors' - export const styles = { body: { fontFamily: "'Source Sans Pro', Helvetica, sans-serif", @@ -48,6 +46,13 @@ export const styles = { playground: { padding: '2rem', }, + code: { + margin: '0 3px', + padding: '4px 6px', + borderRadius: '3px', + fontFamily: "'Inconsolata', monospace", + fontSize: 16, + }, pre: { fontFamily: "'Inconsolata', monospace", fontSize: 16, @@ -56,26 +61,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/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 ( From 09298f99b4fb5312c1c023e44ffd2abe4910440a Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Mon, 25 Jun 2018 02:13:58 -0300 Subject: [PATCH 15/18] chore(docz-theme-default): some responsive adjustments --- packages/docz-theme-default/package.json | 3 +- .../components/shared/Sidebar/Hamburguer.tsx | 87 +++++++ .../src/components/shared/Sidebar/Menu.tsx | 2 +- .../src/components/shared/Sidebar/index.tsx | 238 +++++++----------- .../src/components/ui/H1.tsx | 4 +- .../src/components/ui/H2.tsx | 3 +- .../src/components/ui/H3.tsx | 2 +- .../src/components/ui/H4.tsx | 2 +- .../src/components/ui/H5.tsx | 2 +- .../src/components/ui/H6.tsx | 2 +- .../src/components/ui/InlineCode.tsx | 2 +- .../src/components/ui/List.tsx | 2 +- .../src/components/ui/Page.tsx | 4 +- .../src/components/ui/Pre.tsx | 3 +- .../src/components/ui/Render.tsx | 2 +- .../src/components/ui/Table.tsx | 2 +- packages/docz-theme-default/src/config.ts | 3 - packages/docz-theme-default/src/index.tsx | 5 +- .../docz-theme-default/src/styles/index.ts | 18 +- yarn.lock | 14 +- 20 files changed, 219 insertions(+), 181 deletions(-) create mode 100644 packages/docz-theme-default/src/components/shared/Sidebar/Hamburguer.tsx diff --git a/packages/docz-theme-default/package.json b/packages/docz-theme-default/package.json index 6ac524f92..cb46aa0b7 100644 --- a/packages/docz-theme-default/package.json +++ b/packages/docz-theme-default/package.json @@ -28,9 +28,10 @@ "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-breakpoints": "^3.0.0", "react-feather": "^1.1.0", "react-lightweight-tooltip": "^1.0.0", "react-powerplug": "^0.1.6", 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 fd3edb210..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; 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 8c9ec01e6..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,32 +1,37 @@ import React from 'react' -import { Docs, Link, Entry, ThemeConfig } from 'docz' -import styled from 'react-emotion' +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 { Docz } from './Docz' +import { Hamburguer } from './Hamburguer' interface Wrapper { opened: boolean desktop: boolean + theme?: any } interface OpenProps { opened: boolean } -const wrapperToggle = (p: Wrapper) => (p.opened && !p.desktop ? '-90%' : '0') +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.sidebarBg}; - background: ${p => - wrapperToggle(p) !== '0' ? p.theme.colors.white : p.theme.colors.sidebarBg}; - transition: transform 0.3s, background 0.3s; - transform: translateX(${wrapperToggle}); + background: ${background}; + transition: transform 0.2s, background 0.3s; + transform: translateX(${toggle}); z-index: 100; ${p => @@ -108,35 +113,13 @@ const Footer = styled('div')` } ` -const toggleBlockTranslateX = (p: OpenProps) => (p.opened ? '10px' : '-6px') -const toggleBlockTranslateY = (p: OpenProps) => (p.opened ? '4px' : '0px') - -const ToggleBlock = styled('div')` - cursor: pointer; - position: absolute; - width: 32px; - height: 36px; - top: 0; - right: 0; - transform: translateX(${toggleBlockTranslateX}) - translateY(${toggleBlockTranslateY}); - transition: transform 0.3s; - - ${p => - p.theme.mq({ - display: ['block', 'block', 'block', 'none'], - })}; -` - -const toggleBackgroundAppear = (p: OpenProps) => (p.opened ? 'none' : 'block') - const ToggleBackground = styled('div')` content: ''; - display: ${toggleBackgroundAppear}; + display: ${(p: OpenProps) => (p.opened ? 'none' : 'block')}; position: fixed; - background-color: rgba(0, 0, 0, 0.2); - width: 100%; - height: 100%; + background-color: rgba(0, 0, 0, 0.4); + width: 100vw; + height: 100vh; top: 0; bottom: 0; left: 0; @@ -145,131 +128,86 @@ const ToggleBackground = styled('div')` z-index: 99; ` -const IconFirst = (p: OpenProps) => (p.opened ? '0px' : '12px') -const IconMiddle = (p: OpenProps) => (p.opened ? '1' : '0') -const IconLast = (p: OpenProps) => (p.opened ? '0px' : '-4px') -const IconRotate = (p: OpenProps) => (p.opened ? '0deg' : '45deg') - -const Icon = styled('div')` - position: relative; - width: 23px; - height: 32px; - margin: auto; - transform: translateX(-2px); +const FooterLogo = styled(Docz)` + fill: ${p => p.theme.colors.footerText}; ` -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: 10px; - transform: translateY(${IconFirst}) rotate(${IconRotate}); +interface RenderProps { + docs: DocsRenderProps + media: { + breakpoints: any + currentBreakpoint: string } - - &:nth-child(2) { - top: 18px; - opacity: ${IconMiddle}; + toggle: { + on: boolean + toggle: () => void } - - &:nth-child(3) { - top: 26px; - transform: translateY(${IconLast}) rotate(-${IconRotate}); + config: { + title: string + logo: { src: string; width: any } } -` +} -const FooterLogo = styled(Docz)` - fill: ${p => p.theme.colors.footerText}; -` +const Composed = adopt({ + docs: , + media: , + toggle: , + config: , +}) export const Sidebar = () => ( - - {({ currentBreakpoint }: any) => { - return ( - - {({ on, toggle }: any) => { - const isDesktop = currentBreakpoint === 'desktop' ? true : false - - const handleSidebarToggle = (ev: React.SyntheticEvent) => { - if (isDesktop) return - toggle() - } + + {(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 ( - - {({ docs, menus }) => { - const docsWithoutMenu = docs.filter((doc: Entry) => !doc.menu) - const fromMenu = (menu: string) => - docs.filter(doc => doc.menu === menu) - - return ( - - - - - - - - - - - {({ title, logo }) => - logo ? ( - - ) : ( - {title} - ) - } - - - {docsWithoutMenu.map(doc => ( - - {doc.name} - - ))} - {menus.map(menu => ( - - ))} - - - - - - ) - }} - - ) - }} - + return ( + + + + {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 index af3acd48c..37905531f 100644 --- a/packages/docz-theme-default/src/components/ui/InlineCode.tsx +++ b/packages/docz-theme-default/src/components/ui/InlineCode.tsx @@ -3,5 +3,5 @@ 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.styles.code}; + ${p => p.theme.mq(p.theme.styles.code)}; ` 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 1c19f2a88..c283f91a3 100644 --- a/packages/docz-theme-default/src/components/ui/Page.tsx +++ b/packages/docz-theme-default/src/components/ui/Page.tsx @@ -5,7 +5,9 @@ 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')` diff --git a/packages/docz-theme-default/src/components/ui/Pre.tsx b/packages/docz-theme-default/src/components/ui/Pre.tsx index af8f327c1..70f7e34c1 100644 --- a/packages/docz-theme-default/src/components/ui/Pre.tsx +++ b/packages/docz-theme-default/src/components/ui/Pre.tsx @@ -7,12 +7,11 @@ import styled, { cx } from 'react-emotion' const PreStyled = styled('pre')` border: 1px solid ${p => p.theme.colors.border}; - padding: 2em; margin: 2em 0; border-radius: 5px; background: ${p => p.theme.colors.preBg}; ${p => p.theme.prismTheme}; - ${p => p.theme.styles.pre}; + ${p => p.theme.mq(p.theme.styles.pre)}; ` interface PreProps { diff --git a/packages/docz-theme-default/src/components/ui/Render.tsx b/packages/docz-theme-default/src/components/ui/Render.tsx index 64ce40299..197359b5d 100644 --- a/packages/docz-theme-default/src/components/ui/Render.tsx +++ b/packages/docz-theme-default/src/components/ui/Render.tsx @@ -8,7 +8,7 @@ const Playground = styled('div')` 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')` diff --git a/packages/docz-theme-default/src/components/ui/Table.tsx b/packages/docz-theme-default/src/components/ui/Table.tsx index a60dd288f..2d8733aa7 100644 --- a/packages/docz-theme-default/src/components/ui/Table.tsx +++ b/packages/docz-theme-default/src/components/ui/Table.tsx @@ -70,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/config.ts b/packages/docz-theme-default/src/config.ts index d217e984f..3a48dace2 100644 --- a/packages/docz-theme-default/src/config.ts +++ b/packages/docz-theme-default/src/config.ts @@ -1,11 +1,8 @@ import { styles } from './styles' import * as colors from './styles/colors' -import { mq, breakpoints } from './styles/responsive' export const config = { mode: 'light', colors, styles, - breakpoints, - mq, } diff --git a/packages/docz-theme-default/src/index.tsx b/packages/docz-theme-default/src/index.tsx index a529b02c5..b6f77e264 100644 --- a/packages/docz-theme-default/src/index.tsx +++ b/packages/docz-theme-default/src/index.tsx @@ -8,6 +8,7 @@ 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' @@ -15,8 +16,8 @@ import * as prismThemes from './styles/prism' const Theme = () => ( {config => ( - - + +
Date: Mon, 25 Jun 2018 02:36:10 -0300 Subject: [PATCH 16/18] v0.3.0-beta.0 --- CHANGELOG.md | 27 ++++++++++++++++++++++++ examples/babel6/CHANGELOG.md | 8 +++++++ examples/babel6/package.json | 4 ++-- examples/basic/CHANGELOG.md | 8 +++++++ examples/basic/package.json | 4 ++-- examples/css-less/CHANGELOG.md | 8 +++++++ examples/css-less/package.json | 4 ++-- examples/css-postcss/CHANGELOG.md | 8 +++++++ examples/css-postcss/package.json | 4 ++-- examples/css-sass/CHANGELOG.md | 8 +++++++ examples/css-sass/package.json | 4 ++-- examples/css-stylus/CHANGELOG.md | 8 +++++++ examples/css-stylus/package.json | 4 ++-- examples/flow/CHANGELOG.md | 8 +++++++ examples/flow/package.json | 4 ++-- examples/typescript/CHANGELOG.md | 8 +++++++ examples/typescript/package.json | 4 ++-- lerna.json | 2 +- packages/docz-theme-default/CHANGELOG.md | 27 ++++++++++++++++++++++++ packages/docz-theme-default/package.json | 4 ++-- packages/docz/CHANGELOG.md | 11 ++++++++++ packages/docz/package.json | 4 ++-- 22 files changed, 150 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f0a6e6537..c09377133 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,33 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [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..01f7cffae 100644 --- a/examples/babel6/CHANGELOG.md +++ b/examples/babel6/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [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..fb15ee4c4 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-beta.0", "license": "MIT", "scripts": { "dev": "docz dev", "build": "docz build" }, "dependencies": { - "docz": "^0.2.11", + "docz": "^0.3.0-beta.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..09c28a193 100644 --- a/examples/basic/CHANGELOG.md +++ b/examples/basic/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [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..5e2dcd84e 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-beta.0", "license": "MIT", "scripts": { "dev": "docz dev", "build": "docz build" }, "dependencies": { - "docz": "^0.2.11", + "docz": "^0.3.0-beta.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..4b92d545a 100644 --- a/examples/css-less/CHANGELOG.md +++ b/examples/css-less/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [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..c3d34dbeb 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-beta.0", "license": "MIT", "scripts": { "dev": "docz dev", @@ -8,7 +8,7 @@ }, "dependencies": { "classnames": "^2.2.6", - "docz": "^0.2.11", + "docz": "^0.3.0-beta.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..36154b962 100644 --- a/examples/css-postcss/CHANGELOG.md +++ b/examples/css-postcss/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [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..e8cec074b 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-beta.0", "license": "MIT", "scripts": { "dev": "docz dev", @@ -8,7 +8,7 @@ }, "dependencies": { "classnames": "^2.2.6", - "docz": "^0.2.11", + "docz": "^0.3.0-beta.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..d23dcb23a 100644 --- a/examples/css-sass/CHANGELOG.md +++ b/examples/css-sass/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [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..37beb595b 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-beta.0", "license": "MIT", "scripts": { "dev": "docz dev", @@ -8,7 +8,7 @@ }, "dependencies": { "classnames": "^2.2.6", - "docz": "^0.2.11", + "docz": "^0.3.0-beta.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..5c18b9264 100644 --- a/examples/css-stylus/CHANGELOG.md +++ b/examples/css-stylus/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [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..2033cd144 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-beta.0", "license": "MIT", "scripts": { "dev": "docz dev", @@ -8,7 +8,7 @@ }, "dependencies": { "classnames": "^2.2.6", - "docz": "^0.2.11", + "docz": "^0.3.0-beta.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..2e0136ded 100644 --- a/examples/flow/CHANGELOG.md +++ b/examples/flow/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [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..6617bdf95 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-beta.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-beta.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..aac616177 100644 --- a/examples/typescript/CHANGELOG.md +++ b/examples/typescript/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [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..6e2d48759 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-beta.0", "license": "MIT", "scripts": { "dev": "docz dev", "build": "docz build" }, "dependencies": { - "docz": "^0.2.11", + "docz": "^0.3.0-beta.0", "emotion": "^9.2.3", "react": "^16.4.1", "react-dom": "^16.4.1", diff --git a/lerna.json b/lerna.json index ae955f251..ca4b64b25 100644 --- a/lerna.json +++ b/lerna.json @@ -3,7 +3,7 @@ "packages": [ "packages/**/*" ], - "version": "0.2.11", + "version": "0.3.0-beta.0", "npmClient": "yarn", "useWorkspaces": true } diff --git a/packages/docz-theme-default/CHANGELOG.md b/packages/docz-theme-default/CHANGELOG.md index e39e08ee7..92069684c 100644 --- a/packages/docz-theme-default/CHANGELOG.md +++ b/packages/docz-theme-default/CHANGELOG.md @@ -3,6 +3,33 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [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 cb46aa0b7..fa16d448d 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-beta.0", "license": "MIT", "main": "dist/index.js", "umd:main": "dist/index.umd.js", @@ -20,7 +20,7 @@ "tslint": "tslint --project ." }, "dependencies": { - "docz": "^0.2.11", + "docz": "^0.3.0-beta.0", "emotion": "^9.2.3", "emotion-theming": "^9.2.3", "facepaint": "^1.2.1", diff --git a/packages/docz/CHANGELOG.md b/packages/docz/CHANGELOG.md index 561c57b30..a22d38c7e 100644 --- a/packages/docz/CHANGELOG.md +++ b/packages/docz/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# [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..457584f80 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-beta.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-beta.0", "invariant": "^2.2.4", "loadable-components": "^2.2.2", "pascalcase": "^0.1.1", From cb5643d635172668742c9d56cdfa2ac0d427b28e Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Mon, 25 Jun 2018 03:50:27 -0300 Subject: [PATCH 17/18] fix(docz-theme-default): prettier format --- packages/docz-theme-default/src/components/ui/Link.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/docz-theme-default/src/components/ui/Link.tsx b/packages/docz-theme-default/src/components/ui/Link.tsx index 572fab477..9012560c1 100644 --- a/packages/docz-theme-default/src/components/ui/Link.tsx +++ b/packages/docz-theme-default/src/components/ui/Link.tsx @@ -1,7 +1,9 @@ import styled from 'react-emotion' export const Link = styled('a')` - &, &:visited, &:active { + &, + &:visited, + &:active { text-decoration: none; color: ${p => p.theme.colors.link}; } @@ -9,4 +11,4 @@ export const Link = styled('a')` &:hover { color: ${p => p.theme.colors.link}; } -` \ No newline at end of file +` From 3a9f6c3bd9f6cd903797738a0cc0fe87811989f1 Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Mon, 25 Jun 2018 11:27:28 -0300 Subject: [PATCH 18/18] v0.3.0 --- CHANGELOG.md | 11 +++++++++++ examples/babel6/CHANGELOG.md | 8 ++++++++ examples/babel6/package.json | 4 ++-- examples/basic/CHANGELOG.md | 8 ++++++++ examples/basic/package.json | 4 ++-- examples/css-less/CHANGELOG.md | 8 ++++++++ examples/css-less/package.json | 4 ++-- examples/css-postcss/CHANGELOG.md | 8 ++++++++ examples/css-postcss/package.json | 4 ++-- examples/css-sass/CHANGELOG.md | 8 ++++++++ examples/css-sass/package.json | 4 ++-- examples/css-stylus/CHANGELOG.md | 8 ++++++++ examples/css-stylus/package.json | 4 ++-- examples/flow/CHANGELOG.md | 8 ++++++++ examples/flow/package.json | 4 ++-- examples/typescript/CHANGELOG.md | 8 ++++++++ examples/typescript/package.json | 4 ++-- lerna.json | 2 +- packages/docz-theme-default/CHANGELOG.md | 11 +++++++++++ packages/docz-theme-default/package.json | 4 ++-- packages/docz/CHANGELOG.md | 8 ++++++++ packages/docz/package.json | 4 ++-- 22 files changed, 115 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c09377133..f134b6af7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,17 @@ 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) diff --git a/examples/babel6/CHANGELOG.md b/examples/babel6/CHANGELOG.md index 01f7cffae..ece28a231 100644 --- a/examples/babel6/CHANGELOG.md +++ b/examples/babel6/CHANGELOG.md @@ -3,6 +3,14 @@ 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) diff --git a/examples/babel6/package.json b/examples/babel6/package.json index fb15ee4c4..bb3899474 100644 --- a/examples/babel6/package.json +++ b/examples/babel6/package.json @@ -1,13 +1,13 @@ { "name": "docz-example-babel6", - "version": "0.3.0-beta.0", + "version": "0.3.0", "license": "MIT", "scripts": { "dev": "docz dev", "build": "docz build" }, "dependencies": { - "docz": "^0.3.0-beta.0", + "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 09c28a193..737ed235e 100644 --- a/examples/basic/CHANGELOG.md +++ b/examples/basic/CHANGELOG.md @@ -3,6 +3,14 @@ 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) diff --git a/examples/basic/package.json b/examples/basic/package.json index 5e2dcd84e..44f73068d 100644 --- a/examples/basic/package.json +++ b/examples/basic/package.json @@ -1,13 +1,13 @@ { "name": "docz-example-basic", - "version": "0.3.0-beta.0", + "version": "0.3.0", "license": "MIT", "scripts": { "dev": "docz dev", "build": "docz build" }, "dependencies": { - "docz": "^0.3.0-beta.0", + "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 4b92d545a..64fa35af8 100644 --- a/examples/css-less/CHANGELOG.md +++ b/examples/css-less/CHANGELOG.md @@ -3,6 +3,14 @@ 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) diff --git a/examples/css-less/package.json b/examples/css-less/package.json index c3d34dbeb..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.3.0-beta.0", + "version": "0.3.0", "license": "MIT", "scripts": { "dev": "docz dev", @@ -8,7 +8,7 @@ }, "dependencies": { "classnames": "^2.2.6", - "docz": "^0.3.0-beta.0", + "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 36154b962..27e1ac5c3 100644 --- a/examples/css-postcss/CHANGELOG.md +++ b/examples/css-postcss/CHANGELOG.md @@ -3,6 +3,14 @@ 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) diff --git a/examples/css-postcss/package.json b/examples/css-postcss/package.json index e8cec074b..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.3.0-beta.0", + "version": "0.3.0", "license": "MIT", "scripts": { "dev": "docz dev", @@ -8,7 +8,7 @@ }, "dependencies": { "classnames": "^2.2.6", - "docz": "^0.3.0-beta.0", + "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 d23dcb23a..be89649f9 100644 --- a/examples/css-sass/CHANGELOG.md +++ b/examples/css-sass/CHANGELOG.md @@ -3,6 +3,14 @@ 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) diff --git a/examples/css-sass/package.json b/examples/css-sass/package.json index 37beb595b..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.3.0-beta.0", + "version": "0.3.0", "license": "MIT", "scripts": { "dev": "docz dev", @@ -8,7 +8,7 @@ }, "dependencies": { "classnames": "^2.2.6", - "docz": "^0.3.0-beta.0", + "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 5c18b9264..ddb4a6c16 100644 --- a/examples/css-stylus/CHANGELOG.md +++ b/examples/css-stylus/CHANGELOG.md @@ -3,6 +3,14 @@ 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) diff --git a/examples/css-stylus/package.json b/examples/css-stylus/package.json index 2033cd144..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.3.0-beta.0", + "version": "0.3.0", "license": "MIT", "scripts": { "dev": "docz dev", @@ -8,7 +8,7 @@ }, "dependencies": { "classnames": "^2.2.6", - "docz": "^0.3.0-beta.0", + "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 2e0136ded..4f94ae483 100644 --- a/examples/flow/CHANGELOG.md +++ b/examples/flow/CHANGELOG.md @@ -3,6 +3,14 @@ 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) diff --git a/examples/flow/package.json b/examples/flow/package.json index 6617bdf95..3653708f1 100644 --- a/examples/flow/package.json +++ b/examples/flow/package.json @@ -1,6 +1,6 @@ { "name": "docz-example-flow", - "version": "0.3.0-beta.0", + "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.3.0-beta.0", + "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 aac616177..0d6df52f0 100644 --- a/examples/typescript/CHANGELOG.md +++ b/examples/typescript/CHANGELOG.md @@ -3,6 +3,14 @@ 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) diff --git a/examples/typescript/package.json b/examples/typescript/package.json index 6e2d48759..f3adcbf03 100644 --- a/examples/typescript/package.json +++ b/examples/typescript/package.json @@ -1,13 +1,13 @@ { "name": "docz-example-typescript", - "version": "0.3.0-beta.0", + "version": "0.3.0", "license": "MIT", "scripts": { "dev": "docz dev", "build": "docz build" }, "dependencies": { - "docz": "^0.3.0-beta.0", + "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 ca4b64b25..d8f6c7513 100644 --- a/lerna.json +++ b/lerna.json @@ -3,7 +3,7 @@ "packages": [ "packages/**/*" ], - "version": "0.3.0-beta.0", + "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 92069684c..8deedb639 100644 --- a/packages/docz-theme-default/CHANGELOG.md +++ b/packages/docz-theme-default/CHANGELOG.md @@ -3,6 +3,17 @@ 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) diff --git a/packages/docz-theme-default/package.json b/packages/docz-theme-default/package.json index fa16d448d..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.3.0-beta.0", + "version": "0.3.0", "license": "MIT", "main": "dist/index.js", "umd:main": "dist/index.umd.js", @@ -20,7 +20,7 @@ "tslint": "tslint --project ." }, "dependencies": { - "docz": "^0.3.0-beta.0", + "docz": "^0.3.0", "emotion": "^9.2.3", "emotion-theming": "^9.2.3", "facepaint": "^1.2.1", diff --git a/packages/docz/CHANGELOG.md b/packages/docz/CHANGELOG.md index a22d38c7e..47059e3ab 100644 --- a/packages/docz/CHANGELOG.md +++ b/packages/docz/CHANGELOG.md @@ -3,6 +3,14 @@ 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) diff --git a/packages/docz/package.json b/packages/docz/package.json index 457584f80..f3e499298 100644 --- a/packages/docz/package.json +++ b/packages/docz/package.json @@ -1,6 +1,6 @@ { "name": "docz", - "version": "0.3.0-beta.0", + "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.3.0-beta.0", + "docz-theme-default": "^0.3.0", "invariant": "^2.2.4", "loadable-components": "^2.2.2", "pascalcase": "^0.1.1",