diff --git a/core/docz-rollup/src/index.js b/core/docz-rollup/src/index.js index d523317d1..e70610ab8 100644 --- a/core/docz-rollup/src/index.js +++ b/core/docz-rollup/src/index.js @@ -17,7 +17,7 @@ const output = (format, outputDir, { plugins = [], external, ...opts }) => ({ chunkFileNames: `[name]${format !== 'cjs' ? '.[format]' : ''}.js`, entryFileNames: `[name]${format !== 'cjs' ? '.[format]' : ''}.js`, }, - plugins: plugins.concat([ + plugins: [ babel({ exclude: 'node_modules/**', runtimeHelpers: false, @@ -26,7 +26,7 @@ const output = (format, outputDir, { plugins = [], external, ...opts }) => ({ rollupCommonJSResolveHack: true, }), sizePlugin(outputDir), - ]), + ].concat(plugins), }) exports.copy = copyPlugin diff --git a/core/docz-theme-default/.babelrc b/core/docz-theme-default/.babelrc index 0c8c04872..ed773b5ce 100644 --- a/core/docz-theme-default/.babelrc +++ b/core/docz-theme-default/.babelrc @@ -7,23 +7,17 @@ "extensions": [".ts", ".tsx"], "root": ["./src"], "alias": { + "@components": "./src/components", "@utils": "./src/utils", "@styles": "./src/styles" } } + ], + [ + "babel-plugin-styled-components", + { + "ssr": false + } ] - ], - "env": { - "production": { - "presets": ["@emotion/babel-preset-css-prop"] - }, - "development": { - "presets": [ - [ - "@emotion/babel-preset-css-prop", - { "sourceMap": true, "autoLabel": true } - ] - ] - } - } + ] } diff --git a/core/docz-theme-default/package.json b/core/docz-theme-default/package.json index e352577c8..92d53c21b 100644 --- a/core/docz-theme-default/package.json +++ b/core/docz-theme-default/package.json @@ -19,34 +19,27 @@ "tslint": "tslint --project ." }, "dependencies": { - "@emotion/cache": "^10.0.7", - "@emotion/core": "^10.0.7", - "@emotion/styled": "^10.0.7", "@tippy.js/react": "^2.0.2", - "codemirror": "^5.43.0", "copy-text-to-clipboard": "^1.0.4", "docz": "^0.13.5", - "emotion-theming": "^10.0.7", "facepaint": "^1.2.1", - "hotkeys-js": "^3.4.4", - "lodash.flattendepth": "^4.7.0", "lodash.get": "^4.4.2", - "match-sorter": "^2.3.0", - "polished": "^2.3.3", "prop-types": "15.7.1", "re-resizable": "^4.11.0", "react": "^16.8.1", - "react-codemirror2": "^5.1.0", "react-dom": "^16.8.1", "react-feather": "^1.1.6", "react-live": "^1.12.0", - "react-perfect-scrollbar": "^1.4.4", - "react-powerplug": "^1.0.0", - "react-sizes": "^1.0.4", + "styled-components": "^4.1.3", "webfontloader": "^1.6.28" }, "peerDependencies": { "react": "^16.2.0", "react-dom": "^16.2.0" + }, + "devDependencies": { + "@types/styled-components": "^4.1.9", + "babel-plugin-module-resolver": "^3.2.0", + "babel-plugin-styled-components": "^1.10.0" } } diff --git a/core/docz-theme-default/rollup.config.js b/core/docz-theme-default/rollup.config.js index 598b6bef1..7c2b7245f 100644 --- a/core/docz-theme-default/rollup.config.js +++ b/core/docz-theme-default/rollup.config.js @@ -6,6 +6,7 @@ export default config({ !id.startsWith('\0') && !id.startsWith('.') && !id.startsWith('/') && + !id.startsWith('@components') && !id.startsWith('@utils') && !id.startsWith('@styles'), }) diff --git a/core/docz-theme-default/src/components/shared/GithubLink/index.tsx b/core/docz-theme-default/src/components/shared/GithubLink/index.tsx index 5ca2835b7..933b35723 100644 --- a/core/docz-theme-default/src/components/shared/GithubLink/index.tsx +++ b/core/docz-theme-default/src/components/shared/GithubLink/index.tsx @@ -1,7 +1,7 @@ +import * as React from 'react' import { SFC } from 'react' -import { keyframes, jsx } from '@emotion/core' import { get } from '@utils/theme' -import styled from '@emotion/styled' +import styled, { keyframes } from 'styled-components' const octocatWave = keyframes` 0%, 100% { @@ -15,7 +15,7 @@ const octocatWave = keyframes` } ` -const Link = styled('a')` +const Link = styled.a` &:hover .octo-arm { animation: ${octocatWave} 560ms ease-in-out; } @@ -34,7 +34,7 @@ const Link = styled('a')` } ` -const Svg = styled('svg')` +const Svg = styled.svg` z-index: 99; fill: ${get('colors.primary')}; color: ${get('colors.background')}; diff --git a/core/docz-theme-default/src/components/shared/Logo/index.tsx b/core/docz-theme-default/src/components/shared/Logo/index.tsx index 1aa6400ee..d2d253b63 100644 --- a/core/docz-theme-default/src/components/shared/Logo/index.tsx +++ b/core/docz-theme-default/src/components/shared/Logo/index.tsx @@ -1,7 +1,7 @@ -import { jsx } from '@emotion/core' +import * as React from 'react' import { SFC } from 'react' -import { ThemeConfig } from 'docz' -import styled from '@emotion/styled' +import { useConfig } from 'docz' +import styled from 'styled-components' import { breakpoints } from '@styles/responsive' import { get } from '@utils/theme' @@ -62,18 +62,21 @@ interface LogoProps { showBg: boolean } -export const Logo: SFC = ({ showBg }) => ( - - {({ title, linkComponent: Link, themeConfig: { logo } }) => ( - - - {logo ? ( - - ) : ( - {title} - )} - - - )} - -) +export const Logo: SFC = ({ showBg }) => { + const { + title, + linkComponent: Link, + themeConfig: { logo }, + } = useConfig() + return ( + + + {logo ? ( + + ) : ( + {title} + )} + + + ) +} diff --git a/core/docz-theme-default/src/components/shared/Main/index.tsx b/core/docz-theme-default/src/components/shared/Main/index.tsx index e23790856..6a7846224 100644 --- a/core/docz-theme-default/src/components/shared/Main/index.tsx +++ b/core/docz-theme-default/src/components/shared/Main/index.tsx @@ -1,21 +1,5 @@ -import { SFC } from 'react' -import { Global, jsx } from '@emotion/core' -import styled from '@emotion/styled' +import styled from 'styled-components' -import { styles } from '../../../styles/global' - -const Wrapper = styled('div')` +export const Main = styled.div` display: flex; - max-width: 100vw; ` - -interface MainProps { - config: any -} - -export const Main: SFC = props => ( - - - {props.children} - -) diff --git a/core/docz-theme-default/src/components/shared/Search/index.tsx b/core/docz-theme-default/src/components/shared/Search/index.tsx index 7c188a49f..0b994a6f1 100644 --- a/core/docz-theme-default/src/components/shared/Search/index.tsx +++ b/core/docz-theme-default/src/components/shared/Search/index.tsx @@ -1,16 +1,14 @@ +import * as React from 'react' import { SFC } from 'react' -import { jsx } from '@emotion/core' -import styled from '@emotion/styled' +import styled from 'styled-components' import SearchIcon from 'react-feather/dist/icons/search' -import placeholder from 'polished/lib/mixins/placeholder' -import rgba from 'polished/lib/color/rgba' import { get } from '@utils/theme' const sidebarBorder = get('colors.sidebarBorder', '#CED4DE') const sidebarText = get('colors.sidebarText', '#13161F') -const Wrapper = styled('div')` +const Wrapper = styled.div` display: flex; align-items: center; padding: 5px 24px; @@ -26,7 +24,7 @@ const Icon = styled(SearchIcon)` opacity: 0.5; ` -const Input = styled('input')` +const Input = styled.input` outline: none; width: 100%; padding: 10px; @@ -34,11 +32,6 @@ const Input = styled('input')` border: none; font-size: 16px; color: ${sidebarText}; - - ${p => - placeholder({ - color: rgba(sidebarText(p), 0.5), - })}; ` interface SearchProps { diff --git a/core/docz-theme-default/src/components/shared/Sidebar/Docz.tsx b/core/docz-theme-default/src/components/shared/Sidebar/Docz.tsx index 237755f18..b0c7fe5fc 100644 --- a/core/docz-theme-default/src/components/shared/Sidebar/Docz.tsx +++ b/core/docz-theme-default/src/components/shared/Sidebar/Docz.tsx @@ -1,4 +1,4 @@ -import { jsx } from '@emotion/core' +import * as React from 'react' import { SFC } from 'react' interface DoczProps { diff --git a/core/docz-theme-default/src/components/shared/Sidebar/Hamburguer.tsx b/core/docz-theme-default/src/components/shared/Sidebar/Hamburguer.tsx index 9f25e1df7..e1b9158b1 100644 --- a/core/docz-theme-default/src/components/shared/Sidebar/Hamburguer.tsx +++ b/core/docz-theme-default/src/components/shared/Sidebar/Hamburguer.tsx @@ -1,6 +1,6 @@ +import * as React from 'react' import { SFC } from 'react' -import { jsx } from '@emotion/core' -import styled from '@emotion/styled' +import styled from 'styled-components' import { get } from '@utils/theme' import { mq } from '@styles/responsive' diff --git a/core/docz-theme-default/src/components/shared/Sidebar/Menu.tsx b/core/docz-theme-default/src/components/shared/Sidebar/Menu.tsx index 739872d15..1d2bfbcdf 100644 --- a/core/docz-theme-default/src/components/shared/Sidebar/Menu.tsx +++ b/core/docz-theme-default/src/components/shared/Sidebar/Menu.tsx @@ -1,8 +1,8 @@ -import { jsx } from '@emotion/core' +import * as React from 'react' import { Component } from 'react' import { MenuItem } from 'docz' import ChevronDown from 'react-feather/dist/icons/chevron-down' -import styled from '@emotion/styled' +import styled from 'styled-components' import { MenuLink, getActiveFromClass } from './MenuLink' import { get } from '@utils/theme' diff --git a/core/docz-theme-default/src/components/shared/Sidebar/MenuHeadings.tsx b/core/docz-theme-default/src/components/shared/Sidebar/MenuHeadings.tsx index cab6327e6..ff057b3c4 100644 --- a/core/docz-theme-default/src/components/shared/Sidebar/MenuHeadings.tsx +++ b/core/docz-theme-default/src/components/shared/Sidebar/MenuHeadings.tsx @@ -1,7 +1,7 @@ -import { jsx } from '@emotion/core' -import { SFC, ComponentType } from 'react' -import { Docs, Entry, ThemeConfig } from 'docz' -import styled from '@emotion/styled' +import * as React from 'react' +import { SFC } from 'react' +import { Entry, useDocs, useConfig } from 'docz' +import styled from 'styled-components' import get from 'lodash.get' import { get as themeGet } from '@utils/theme' @@ -15,24 +15,21 @@ const Submenu = styled.div` margin: 5px 0 0 24px; ` -const createSmallLink = (component: ComponentType) => styled(component)` +const createSmallLink = (Link: React.ComponentType) => styled(Link)` position: relative; font-size: 14px; padding: 0 0 5px 16px; text-decoration: none; opacity: 0.5; transition: opacity 0.2s; - &, &:visited, &.active { color: ${themeGet('colors.sidebarText')}; } - &.active { opacity: 1; } - &:before { z-index: 1; position: absolute; @@ -45,7 +42,6 @@ const createSmallLink = (component: ComponentType) => styled(component)` background: ${p => sidebarPrimary(p) || primaryColor(p)}; transition: width 0.2s; } - &.active:before { width: 2px; } @@ -57,7 +53,6 @@ const isSmallLinkActive = (slug: string) => (m: any, location: any) => const getHeadings = (route: string, docs: Entry[]) => { const doc = docs.find(doc => doc.route === route) const headings = get(doc, 'headings') - return headings ? headings.filter(heading => heading.depth === 2) : [] } @@ -66,34 +61,24 @@ interface MenuHeadingsProps { onClick?: React.MouseEventHandler } -export const MenuHeadings: SFC = ({ route, onClick }) => ( - - {({ docs }) => { - const headings = getHeadings(route, docs) +export const MenuHeadings: SFC = ({ route, onClick }) => { + const { linkComponent: Link } = useConfig() + const docs = useDocs() + const headings = docs && getHeadings(route, docs) + const SmallLink = React.useMemo(() => createSmallLink(Link), [Link]) - return ( - - {({ linkComponent: Link }) => { - const SmallLink = createSmallLink(Link) - return ( - headings.length > 0 && ( - - {headings.map((heading: any) => ( - - {heading.value} - - ))} - - ) - ) - }} - - ) - }} - -) + return headings && headings.length > 0 ? ( + + {headings.map((heading: any) => ( + + {heading.value} + + ))} + + ) : null +} diff --git a/core/docz-theme-default/src/components/shared/Sidebar/MenuLink.tsx b/core/docz-theme-default/src/components/shared/Sidebar/MenuLink.tsx index 8f6385222..fa52752da 100644 --- a/core/docz-theme-default/src/components/shared/Sidebar/MenuLink.tsx +++ b/core/docz-theme-default/src/components/shared/Sidebar/MenuLink.tsx @@ -1,7 +1,7 @@ -import { Component } from 'react' -import { MenuItem, ThemeConfig } from 'docz' -import { css, jsx } from '@emotion/core' -import styled from '@emotion/styled' +import * as React from 'react' +import { useMemo, useEffect, useRef, useState, SFC } from 'react' +import { MenuItem, useConfig, usePrevious } from 'docz' +import styled, { css } from 'styled-components' import { MenuHeadings } from './MenuHeadings' import { get } from '@utils/theme' @@ -13,7 +13,6 @@ interface WrapperProps { const activeWrapper = css` padding-left: 0; - &:after { width: 1px; } @@ -22,7 +21,6 @@ const activeWrapper = css` const Wrapper = styled.div` position: relative; transition: padding 0.2s; - &:after { position: absolute; display: block; @@ -34,36 +32,31 @@ const Wrapper = styled.div` border-left: 1px dashed ${get('colors.sidebarBorder')}; transition: width 0.2s; } - ${p => p.active && activeWrapper}; ` -export const linkStyle = ({ colors }: any) => css` +export const createLink = (Link: React.ComponentType) => styled(Link)` position: relative; display: block; padding: 4px 24px; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; - color: ${colors.sidebarText}; + color: ${get('colors.sidebarText')}; text-decoration: none; transition: color 0.2s; - &:hover, &:visited { - color: ${colors.sidebarText}; + color: ${get('colors.sidebarText')}; } - &:hover, &.active { - color: ${colors.sidebarPrimary || colors.primary}; + color: ${p => get('colors.sidebarPrimary')(p) || get('colors.primary')(p)}; font-weight: 600; } ` -const LinkAnchor = styled('a')` - ${p => linkStyle(p.theme.docz)}; -` +const LinkAnchor = createLink(styled.a``) export const getActiveFromClass = (el: HTMLElement | null) => Boolean(el && el.classList.contains('active')) @@ -75,70 +68,46 @@ interface LinkProps { innerRef?: (node: any) => void } -interface LinkState { - active: boolean -} - -export class MenuLink extends Component { - public $el: HTMLElement | null - public state: LinkState = { - active: false, - } - - constructor(props: LinkProps) { - super(props) - this.$el = null - } - - public componentDidUpdate(prevProps: LinkProps, prevState: LinkState): void { - this.updateActive(prevState.active) - } - - public componentDidMount(): void { - this.updateActive(this.state.active) +export const MenuLink: SFC = ({ + item, + children, + onClick, + innerRef, +}) => { + const { linkComponent } = useConfig() + const [active, setActive] = useState(false) + const prevActive = usePrevious(active) + const $el = useRef(null) + const Link = useMemo(() => createLink(linkComponent), [linkComponent]) + + const linkProps = { + children, + onClick, } - public render(): React.ReactNode { - const { active } = this.state - const { item, children, onClick, innerRef } = this.props - - const commonProps = (config: any) => ({ - children, - onClick, - css: linkStyle(config.themeConfig) as any, - }) - - const refFn = (node: any) => { - innerRef && innerRef(node) - this.$el = node - } - - return ( - - - {({ linkComponent: Link, ...config }) => { - const route: any = item.route === '/' ? '/' : item.route - const props = { ...commonProps(config) } - - return item.route ? ( - - ) : ( - - ) - }} - - {active && item.route && } - - ) + const refFn = (node: any) => { + innerRef && innerRef(node) + $el.current = node } - private updateActive = (prevActive: boolean): void => { - const active = getActiveFromClass(this.$el) - if (prevActive !== active) this.setState({ active }) - } + useEffect(() => { + const isActive = getActiveFromClass($el.current) + if (prevActive !== isActive) setActive(isActive) + }) + + return ( + + {item.route ? ( + + ) : ( + + )} + {active && item.route && } + + ) } diff --git a/core/docz-theme-default/src/components/shared/Sidebar/index.tsx b/core/docz-theme-default/src/components/shared/Sidebar/index.tsx index 644b67644..390503e43 100644 --- a/core/docz-theme-default/src/components/shared/Sidebar/index.tsx +++ b/core/docz-theme-default/src/components/shared/Sidebar/index.tsx @@ -1,10 +1,7 @@ -import { jsx } from '@emotion/core' -import { Fragment, Component } from 'react' -import { Menu as DocsMenu, MenuItem } from 'docz' -import withSizes from 'react-sizes' -import styled from '@emotion/styled' -import match from 'match-sorter' -import flattendepth from 'lodash.flattendepth' +import * as React from 'react' +import { Fragment, SFC, useState, useEffect } from 'react' +import { useMenus, useWindowSize, usePrevious } from 'docz' +import styled from 'styled-components' import { Logo } from '../Logo' import { Search } from '../Search' @@ -33,7 +30,6 @@ const Wrapper = styled.div` transition: transform 0.2s, background 0.3s; z-index: 1000; - ${get('styles.sidebar')}; ${mq({ position: ['absolute', 'absolute', 'absolute', 'relative'], })}; @@ -50,9 +46,11 @@ const Wrapper = styled.div` @media screen and (max-width: ${breakpoints.desktop - 1}px) { transform: translateX(${p => (p.opened ? '-100%' : '0')}); } + + ${get('styles.sidebar')}; ` -const Content = styled('div')` +const Content = styled.div` position: fixed; top: 0; left: 0; @@ -62,23 +60,22 @@ const Content = styled('div')` min-width: 280px; height: 100%; max-height: 100vh; - background: ${sidebarBg}; ` -const Menus = styled('nav')` +const Menus = styled.nav` flex: 1; overflow-y: auto; margin-bottom: 10px; ` -const Empty = styled('div')` +const Empty = styled.div` flex: 1; opacity: 0.7; padding: 0 24px; color: ${sidebarText}; ` -const Footer = styled('div')` +const Footer = styled.div` padding: 10px 0; display: flex; align-items: center; @@ -88,13 +85,13 @@ const Footer = styled('div')` border-top: 1px dashed ${sidebarBorder}; ` -const FooterLink = styled('a')` +const FooterLink = styled.a` padding: 0; margin: 0; margin-left: 5px; ` -const FooterLogo = styled(Docz as any)<{ width: number }>` +const FooterLogo = styled(Docz)<{ width: number }>` fill: ${sidebarText}; ` @@ -117,144 +114,67 @@ const ToggleBackground = styled.div` z-index: 99; ` -interface SidebarState { - menus: MenuItem[] | null - searching: boolean - lastVal: string - hidden: boolean -} - -interface SidebarProps { - isDesktop: boolean -} - -class SidebarBase extends Component { - public state = { - lastVal: '', - menus: null, - searching: false, - hidden: true, - } - - public componentDidUpdate(pProps: SidebarProps, pState: SidebarState): void { - const { isDesktop } = this.props - const { hidden } = this.state - - if (pState.hidden !== this.state.hidden) { - this.toggleOverlayClass() - } - if (pProps.isDesktop !== isDesktop && !hidden && isDesktop) { - this.setState({ hidden: true }) - this.removeOverlayClass() +export const Sidebar: SFC = () => { + const [hidden, setHidden] = useState(true) + const [query, setQuery] = useState('') + const menus = useMenus({ query }) + const windowSize = useWindowSize() + const isDesktop = windowSize.outerWidth >= breakpoints.desktop + const prevIsDesktop = usePrevious(isDesktop) + + useEffect(() => { + if (!hidden && !prevIsDesktop && isDesktop) { + setHidden(true) + document.documentElement!.classList.remove('with-overlay') } - } + }) - public componentDidMount(): void { - this.toggleOverlayClass() - } - - public render(): React.ReactNode { - const { hidden } = this.state - - return ( - - {initial => { - const menus = this.state.menus || initial - - return ( - - - - - - - - {menus.length === 0 ? ( - No documents found. - ) : ( - - {menus.map(menu => ( - - ))} - - )} -
- Built with - - - -
- - - - - ) - }} - - ) - } - - private toggleOverlayClass = () => { - const { isDesktop } = this.props - const { hidden } = this.state - const method = !hidden ? this.addOverlayClass : this.removeOverlayClass + const addOverlayClass = (isHidden: boolean) => { + const method = !isHidden ? 'add' : 'remove' if (window && typeof window !== 'undefined' && !isDesktop) { - method() + document.documentElement!.classList[method]('with-overlay') } } - private removeOverlayClass(): void { - document.documentElement!.classList.remove('with-overlay') + const handleSidebarToggle = () => { + if (isDesktop) return + setHidden(s => !s) + addOverlayClass(!hidden) } - private addOverlayClass(): void { - document.documentElement!.classList.add('with-overlay') - } - - private match = (val: string, menu: MenuItem[]) => { - const items = menu.map(item => [item].concat(item.menu || [])) - const flattened = flattendepth(items, 2) - return match(flattened, val, { keys: ['name'] }) - } - - private search = (initial: MenuItem[], menus: MenuItem[], val: string) => { - const change = !val.startsWith(this.state.lastVal) - - this.setState({ lastVal: val }) - return this.match(val, change ? initial : menus) - } - - private handleSearchDocs = (initial: MenuItem[], menus: MenuItem[]) => ( - val: string - ) => { - const isEmpty = val.length === 0 - - this.setState({ - menus: isEmpty ? initial : this.search(initial, menus, val), - searching: !isEmpty, - }) - } - - private handleSidebarToggle = () => { - if (this.props.isDesktop) return - this.setState({ hidden: !this.state.hidden }) - } + return ( + + + + + + + + {menus && menus.length === 0 ? ( + No documents found. + ) : ( + + {menus && + menus.map(menu => ( + + ))} + + )} +
+ Built with + + + +
+ + + + + ) } - -const mapSizesToProps = ({ width }: { width: number }) => ({ - isDesktop: width >= breakpoints.desktop, -}) - -export const Sidebar = withSizes(mapSizesToProps)(SidebarBase) diff --git a/core/docz-theme-default/src/components/ui/Blockquote.tsx b/core/docz-theme-default/src/components/ui/Blockquote.tsx index b944345c5..fa1e516a0 100644 --- a/core/docz-theme-default/src/components/ui/Blockquote.tsx +++ b/core/docz-theme-default/src/components/ui/Blockquote.tsx @@ -1,7 +1,7 @@ -import styled from '@emotion/styled' +import styled from 'styled-components' import { get } from '@utils/theme' -export const Blockquote = styled('blockquote')` +export const Blockquote = styled.blockquote` background: ${get('colors.blockquoteBg')}; border-left: 5px solid ${get('colors.blockquoteBorder')}; color: ${get('colors.blockquoteColor')}; diff --git a/core/docz-theme-default/src/components/ui/Button.tsx b/core/docz-theme-default/src/components/ui/Button.tsx index 504b38302..115a9e404 100644 --- a/core/docz-theme-default/src/components/ui/Button.tsx +++ b/core/docz-theme-default/src/components/ui/Button.tsx @@ -1,8 +1,6 @@ -import { SFC, ComponentType } from 'react' -import { jsx } from '@emotion/core' -import styled from '@emotion/styled' +import styled from 'styled-components' -const BaseButton = styled('button')` +const Button = styled.button` cursor: pointer; display: flex; align-items: center; @@ -10,15 +8,6 @@ const BaseButton = styled('button')` border: none; ` -interface ButtonProps { - as?: ComponentType | string -} - -export const Button: SFC = ({ - as: Component = BaseButton, - ...props -}) => - -export const ButtonLink = styled(Button as any)` +export const ButtonLink = styled(Button)` background: transparent; ` diff --git a/core/docz-theme-default/src/components/ui/ButtonSwap.tsx b/core/docz-theme-default/src/components/ui/ButtonSwap.tsx deleted file mode 100644 index dbfb39e34..000000000 --- a/core/docz-theme-default/src/components/ui/ButtonSwap.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import * as React from 'react' -import { jsx } from '@emotion/core' -import { SFC } from 'react' -import { Toggle } from 'react-powerplug' - -import { Button as BaseButton } from './Button' - -export type AnimatedButtonProps = React.ButtonHTMLAttributes & { - as?: React.ComponentType> - swap?: React.ReactNode -} - -export const ButtonSwap: SFC = ({ - as: Button = BaseButton, - onClick, - swap, - children, - ...props -}) => ( - - {({ toggle, on }: any) => { - const Btn: any = Button - const hasSwap = Boolean(swap) - const handleClick = (ev: any) => { - hasSwap && toggle() - onClick && onClick(ev) - hasSwap && setTimeout(toggle, 500) - } - - return ( - - {on ? swap : children} - - ) - }} - -) diff --git a/core/docz-theme-default/src/components/ui/CodeMirror/index.tsx b/core/docz-theme-default/src/components/ui/CodeMirror/index.tsx deleted file mode 100644 index f2dfe960e..000000000 --- a/core/docz-theme-default/src/components/ui/CodeMirror/index.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { jsx } from '@emotion/core' -import { SFC } from 'react' -import { ThemeConfig } from 'docz' -import { Controlled as BaseCodeMirror } from 'react-codemirror2' -import PerfectScrollbar from 'react-perfect-scrollbar' -import styled from '@emotion/styled' - -import * as themes from '@styles/codemirror' -import { get } from '@utils/theme' -import { global } from './ps-scrollbar' -import { mq } from '@styles/responsive' - -import 'codemirror/mode/markdown/markdown' -import 'codemirror/mode/javascript/javascript' -import 'codemirror/mode/jsx/jsx' -import 'codemirror/mode/css/css' -import 'codemirror/addon/edit/matchbrackets' -import 'codemirror/addon/edit/closetag' -import 'codemirror/addon/fold/xml-fold' - -const Scrollbar = styled(PerfectScrollbar)` - overflow: auto; - position: relative; - max-height: ${p => 25 * p.linesToScroll}px; - - .ps__rail-y { - z-index: 9; - opacity: 0.4; - } -` - -const preStyles = get('styles.pre') -const EditorStyled = styled(BaseCodeMirror)` - ${themes.dark()}; - ${themes.light()}; - ${p => mq(preStyles(p))}; - position: relative; - flex: 1; - - .CodeMirror { - max-width: 100%; - height: 100%; - } - - .CodeMirror pre { - ${p => mq(preStyles(p))}; - } - - .CodeMirror-gutters { - left: 1px !important; - } - - .CodeMirror-lines { - padding: 10px 0; - box-sizing: content-box; - } - - .CodeMirror-line { - padding: 0 10px; - } - - .CodeMirror-linenumber { - padding: 0 7px 0 5px; - } -` - -const scrollbarOpts = { - wheelSpeed: 2, - wheelPropagation: true, - minScrollbarLength: 20, - suppressScrollX: true, -} - -export const CodeMirror: SFC = props => ( - - {({ themeConfig }) => ( - - {global} - - - )} - -) diff --git a/core/docz-theme-default/src/components/ui/CodeMirror/ps-scrollbar.tsx b/core/docz-theme-default/src/components/ui/CodeMirror/ps-scrollbar.tsx deleted file mode 100644 index 0b231ef0e..000000000 --- a/core/docz-theme-default/src/components/ui/CodeMirror/ps-scrollbar.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { Global, css, jsx } from '@emotion/core' - -export const global = ( -