feat(docz-theme-default): add sidebar search

doczjs · Jul 3, 2018 · 8218dc1 · 8218dc1
1 parent 4f10a6d
commit 8218dc1
Show file tree

Hide file tree

Showing 13 changed files with 324 additions and 137 deletions.
diff --git a/packages/docz-theme-default/librc.js b/packages/docz-theme-default/librc.js
@@ -2,7 +2,7 @@ const svg = require('rollup-plugin-svg')
 
 module.exports = {
   plugins: [svg()],
-  external: ['docz', 'react', 'react-dom'],
+  external: ['docz', 'react', 'react-dom', 'react-router', 'react-router-dom'],
   commonjs: {
     namedExports: {
       '../../node_modules/react-spinners/index.js': ['HashLoader'],

diff --git a/packages/docz-theme-default/package.json b/packages/docz-theme-default/package.json
@@ -25,18 +25,18 @@
     "emotion-theming": "^9.2.4",
     "facepaint": "^1.2.1",
     "fast-deep-equal": "^2.0.1",
+    "fuse.js": "^3.2.1",
     "prismjs": "^1.15.0",
     "prop-types": "15.6.2",
     "react": "^16.4.1",
     "react-adopt": "^0.6.0",
     "react-breakpoints": "^3.0.0",
+    "react-content-loader": "^3.1.2",
     "react-dom": "^16.4.1",
     "react-emotion": "^9.2.4",
     "react-feather": "^1.1.0",
     "react-lightweight-tooltip": "^1.0.0",
     "react-powerplug": "^0.1.6",
-    "react-router-hash-link": "^1.2.0",
-    "react-spinners": "^0.3.2",
     "webfontloader": "^1.6.28"
   },
   "peerDependencies": {

diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Link.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Link.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { SFC } from 'react'
 import { Link as BaseLink, LinkProps as BaseLinkProps, Entry } from 'docz'
-import { NavHashLink } from 'react-router-hash-link'
 
 import styled, { css } from 'react-emotion'
 
@@ -36,30 +35,39 @@ interface LinkWrapperProps {
 }
 
 const activeWrapper = (p: LinkWrapperProps) => css`
+  padding-left: 16px;
+
   &:after {
-    position: absolute;
-    display: block;
-    content: '';
-    top: 0;
-    left: 0;
-    width: 2px;
-    height: 100%;
-    background: ${p.theme.colors.border};
+    width: 1px;
   }
 `
 
 const LinkWrapper = styled('div')`
   position: relative;
+  transition: padding 0.2s;
+
+  &:after {
+    position: absolute;
+    display: block;
+    content: '';
+    top: 3px;
+    left: 16px;
+    width: 0;
+    height: calc(100% - 10px);
+    background: ${p => p.theme.colors.border};
+    transition: width 0.2s;
+  }
+
   ${(p: LinkWrapperProps) => p.active && activeWrapper(p)};
 `
 
 const isActive = (doc: Entry, location: any) => {
   return doc.route === location.pathname
 }
 
-const SmallLink = styled(NavHashLink)`
+const SmallLink = styled(BaseLink)`
   font-size: 14px;
-  padding: 0 0 5px 26px;
+  padding: 0 0 5px 16px;
   text-decoration: none;
   opacity: 0.5;
   transition: opacity 0.2s;

diff --git 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 iconRotate = (p: IconProps) => (p.opened ? '-180deg' : '0deg')
 const Icon = styled('div')`
   position: absolute;
   top: 50%;
-  right: 20px;
+  right: 0;
   transform: translateY(-50%) rotate(${iconRotate});
   transform-origin: 50% 50%;
   transition: transform 0.3s;
@@ -39,11 +39,18 @@ export interface MenuProps {
   menu: string
   docs: Entry[]
   sidebarToggle: (ev: React.SyntheticEvent<any>) => void
+  collapseAll: boolean
 }
 
-export const Menu: SFC<MenuProps> = ({ menu, docs, sidebarToggle }) => (
+export const Menu: SFC<MenuProps> = ({
+  menu,
+  docs,
+  sidebarToggle,
+  collapseAll,
+}) => (
   <Toggle initial={false}>
     {({ on, toggle }: any) => {
+      const show = collapseAll || on
       const handleToggle = (ev: React.SyntheticEvent<any>) => {
         ev.preventDefault()
         toggle()
@@ -53,11 +60,11 @@ export const Menu: SFC<MenuProps> = ({ menu, docs, sidebarToggle }) => (
         <Wrapper>
           <MenuLink href="#" onClick={handleToggle}>
             {menu}
-            <Icon opened={on}>
+            <Icon opened={show}>
               <ChevronDown size={15} />
             </Icon>
           </MenuLink>
-          {on && (
+          {show && (
             <dl>
               {docs.map(doc => (
                 <dt key={doc.id}>

diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Search.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Search.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react'
+import { SFC } from 'react'
+import { Value } from 'react-powerplug'
+import styled from 'react-emotion'
+import SearchIcon from 'react-feather/dist/icons/search'
+
+interface WrapperProps {
+  showing: boolean
+}
+
+const Wrapper = styled('div')`
+  display: flex;
+  align-items: center;
+  padding: 5px 30px;
+  margin-bottom: 30px;
+  border-top: 1px solid ${p => p.theme.colors.border};
+  border-bottom: 1px solid ${p => p.theme.colors.border};
+  opacity: ${(p: WrapperProps) => (p.showing ? 1 : 0)};
+`
+
+const Icon = styled(SearchIcon)`
+  stroke: ${p => p.theme.colors.sidebarText};
+  width: 20px;
+  opacity: 0.5;
+`
+
+const Input = styled('input')`
+  outline: none;
+  width: 100%;
+  padding: 10px;
+  background: transparent;
+  border: none;
+  font-size: 14px;
+  color: ${p => p.theme.colors.sidebarText};
+`
+
+interface SearchProps {
+  showing: boolean
+  onSearch: (value: string) => void
+}
+
+export const Search: SFC<SearchProps> = ({ onSearch, showing }) => (
+  <Wrapper showing={showing}>
+    <Icon />
+    <Value>
+      {({ value, setValue }: any) => (
+        <Input
+          type="text"
+          value={value}
+          placeholder="Search here..."
+          onChange={ev => {
+            const value = ev.target.value
+
+            setValue(value)
+            onSearch && onSearch(value)
+          }}
+        />
+      )}
+    </Value>
+  </Wrapper>
+)