feat(docz-theme-default): use styled-components instead of emotion

doczjs · Feb 13, 2019 · 19047fd · 19047fd
1 parent f57f987
commit 19047fd
Show file tree

Hide file tree

Showing 64 changed files with 587 additions and 2,030 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<LogoProps> = ({ showBg }) => (
-  <ThemeConfig>
-    {({ title, linkComponent: Link, themeConfig: { logo } }) => (
-      <Wrapper showBg={showBg}>
-        <Link to="/">
-          {logo ? (
-            <LogoImg src={logo.src} width={logo.width} alt={title} />
-          ) : (
-            <LogoText>{title}</LogoText>
-          )}
-        </Link>
-      </Wrapper>
-    )}
-  </ThemeConfig>
-)
+export const Logo: SFC<LogoProps> = ({ showBg }) => {
+  const {
+    title,
+    linkComponent: Link,
+    themeConfig: { logo },
+  } = useConfig()
+  return (
+    <Wrapper showBg={showBg}>
+      <Link to="/">
+        {logo ? (
+          <LogoImg src={logo.src} width={logo.width} alt={title} />
+        ) : (
+          <LogoText>{title}</LogoText>
+        )}
+      </Link>
+    </Wrapper>
+  )
+}
diff --git 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<MainProps> = props => (
-  <Wrapper>
-    <Global styles={styles(props)} />
-    {props.children}
-  </Wrapper>
-)
diff --git 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,19 +24,14 @@ const Icon = styled(SearchIcon)`
   opacity: 0.5;
 `
 
-const Input = styled('input')`
+const Input = styled.input`
   outline: none;
   width: 100%;
   padding: 10px;
   background: transparent;
   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
@@ -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
@@ -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
@@ -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
@@ -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<any>) => styled(component)`
+const createSmallLink = (Link: React.ComponentType<any>) => 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<any>) => 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<any>
 }
 
-export const MenuHeadings: SFC<MenuHeadingsProps> = ({ route, onClick }) => (
-  <Docs>
-    {({ docs }) => {
-      const headings = getHeadings(route, docs)
+export const MenuHeadings: SFC<MenuHeadingsProps> = ({ route, onClick }) => {
+  const { linkComponent: Link } = useConfig()
+  const docs = useDocs()
+  const headings = docs && getHeadings(route, docs)
+  const SmallLink = React.useMemo(() => createSmallLink(Link), [Link])
 
-      return (
-        <ThemeConfig>
-          {({ linkComponent: Link }) => {
-            const SmallLink = createSmallLink(Link)
-            return (
-              headings.length > 0 && (
-                <Submenu>
-                  {headings.map((heading: any) => (
-                    <SmallLink
-                      key={heading.slug}
-                      onClick={onClick}
-                      to={`${route}#${heading.slug}`}
-                      isActive={isSmallLinkActive(heading.slug)}
-                    >
-                      {heading.value}
-                    </SmallLink>
-                  ))}
-                </Submenu>
-              )
-            )
-          }}
-        </ThemeConfig>
-      )
-    }}
-  </Docs>
-)
+  return headings && headings.length > 0 ? (
+    <Submenu>
+      {headings.map((heading: any) => (
+        <SmallLink
+          key={heading.slug}
+          onClick={onClick}
+          to={`${route}#${heading.slug}`}
+          isActive={isSmallLinkActive(heading.slug)}
+        >
+          {heading.value}
+        </SmallLink>
+      ))}
+    </Submenu>
+  ) : null
+}