fix(docz-theme-default): lint code

doczjs · Jun 24, 2018 · 7c97a41 · 7c97a41
1 parent 8649938
commit 7c97a41
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 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
@@ -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,27 +121,32 @@ 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;
 `
 
 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 = () => (
                 <Wrapper opened={on}>
                   <ToggleBlock opened={on} onClick={handleToggle}>
                     <Icon opened={on}>
-                      <span className="icon__line"></span>
-                      <span className="icon__line"></span>
-                      <span className="icon__line"></span>
+                      <span className="icon__line" />
+                      <span className="icon__line" />
+                      <span className="icon__line" />
                     </Icon>
                   </ToggleBlock>
                   <ThemeConfig>
                     {({ title, logo }) =>
                       logo ? (
-                        <LogoImg src={logo.src} width={logo.width} alt={title} />
+                        <LogoImg
+                          src={logo.src}
+                          width={logo.width}
+                          alt={title}
+                        />
                       ) : (
                         <LogoText>{title}</LogoText>
                       )
@@ -223,7 +236,7 @@ export const Sidebar = () => (
                     </a>
                   </Footer>
                 </Wrapper>
-                <ToggleBackground opened={on} onClick={handleToggle}/>
+                <ToggleBackground opened={on} onClick={handleToggle} />
               </React.Fragment>
             )
           }}

diff --git 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
@@ -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
 }