style(prettier): format code style

lib/components/customization/codes.tsx

@@ -8,15 +8,15 @@ import useClipboard from 'components/utils/use-clipboard'
 import CopyIcon from 'components/snippet/snippet-icon'
 import { useConfigs } from 'lib/config-context'
 
-export const getDeepDifferents = <T extends MergeObject,>(source: T, target: T): T => {
+export const getDeepDifferents = <T extends MergeObject>(source: T, target: T): T => {
   if (!isObject(target) || !isObject(source)) return target
-  
+
   const sourceKeys = Object.keys(source) as Array<keyof T>
   let result = {} as T
   for (const key of sourceKeys) {
     const sourceValue = source[key]
     const targetValue = target[key]
-    
+
     if (isObject(sourceValue) && isObject(targetValue)) {
       const childrenDiff = getDeepDifferents(sourceValue, { ...targetValue })
       if (Object.keys(childrenDiff).length !== 0) {
@@ -36,10 +36,10 @@ const CustomizationCodes = () => {
   const { copy } = useClipboard()
   const [, setToast] = useToasts()
 
-  const deepDifferents = useMemo(
-    () => getDeepDifferents(DefaultTheme, theme),
-    [DefaultTheme, theme],
-  )
+  const deepDifferents = useMemo(() => getDeepDifferents(DefaultTheme, theme), [
+    DefaultTheme,
+    theme,
+  ])
   const userCodes = useMemo(() => {
     return `const myTheme = ${JSON.stringify(deepDifferents, null, 2)}
 
@@ -55,7 +55,7 @@ const CustomizationCodes = () => {
  *  }
  **/`
   }, [deepDifferents])
-  
+
   const copyCode = () => {
     copy(userCodes)
     setToast({ text: 'Theme code copied.' })
@@ -66,13 +66,19 @@ const CustomizationCodes = () => {
       <h3 className="title">{isChinese ? '主题代码' : 'Theme Codes'}</h3>
       <Spacer y={1} />
       {isChinese ? (
-        <Text>这里是你所有的变更，点击 <Code>copy</Code> 按钮即可使用在你自己的项目中。</Text>
+        <Text>
+          这里是你所有的变更，点击 <Code>copy</Code> 按钮即可使用在你自己的项目中。
+        </Text>
       ) : (
-        <Text>This is all your changes, click <Code>copy</Code> to use it in your own project.</Text>
+        <Text>
+          This is all your changes, click <Code>copy</Code> to use it in your own project.
+        </Text>
       )}
       <Spacer y={2} />
       <div className="codes">
-        <div className="copy" onClick={copyCode}><CopyIcon /></div>
+        <div className="copy" onClick={copyCode}>
+          <CopyIcon />
+        </div>
         <LiveProvider code={userCodes} disabled theme={codeTheme}>
           <LiveEditor />
         </LiveProvider>
@@ -86,7 +92,7 @@ const CustomizationCodes = () => {
           margin: 3rem auto 2.5rem;
           text-align: center;
         }
-        
+
         .title {
           text-align: center;
           width: 80%;
@@ -100,17 +106,17 @@ const CustomizationCodes = () => {
           text-transform: uppercase;
           letter-spacing: 1.5px;
         }
-        
+
         .codes {
           width: 80%;
           margin: 0 auto;
           border: 1px solid ${theme.palette.border};
           border-radius: ${theme.layout.radius};
           overflow: hidden;
-          padding: calc(.6 * ${theme.layout.gap}) ${theme.layout.gap};
+          padding: calc(0.6 * ${theme.layout.gap}) ${theme.layout.gap};
           position: relative;
         }
-        
+
         .copy {
           position: absolute;
           right: 1rem;
@@ -121,13 +127,14 @@ const CustomizationCodes = () => {
           user-select: none;
           transition: color 200ms ease;
         }
-        
+
         .copy:hover {
           color: ${theme.palette.accents_6};
         }
-        
+
         @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
-          .title, .codes {
+          .title,
+          .codes {
             width: 90vw;
           }
         }

lib/components/customization/colors.tsx

@@ -2,12 +2,22 @@ import React from 'react'
 import { Card, useTheme } from 'components'
 import { CardTypes } from 'components/utils/prop-types'
 
-const types = ['secondary', 'success', 'warning', 'error',
-  'dark', 'alert', 'purple', 'violet', 'cyan', 'lite']
+const types = [
+  'secondary',
+  'success',
+  'warning',
+  'error',
+  'dark',
+  'alert',
+  'purple',
+  'violet',
+  'cyan',
+  'lite',
+]
 
 const Colors: React.FC<React.PropsWithChildren<{}>> = () => {
   const theme = useTheme()
-  
+
   return (
     <div className="colors">
       {types.map((type, index) => {
@@ -22,7 +32,7 @@ const Colors: React.FC<React.PropsWithChildren<{}>> = () => {
           display: flex;
           flex-wrap: wrap;
         }
-        
+
         .color-card {
           display: flex;
           width: 9rem;

lib/components/customization/demo.tsx

@@ -6,42 +6,59 @@ import { useConfigs } from 'lib/config-context'
 const Demo: React.FC<React.PropsWithChildren<{}>> = () => {
   const theme = useTheme()
   const { isChinese } = useConfigs()
-  
+
   return (
     <div className="demo">
       <div className="content">
         {isChinese ? (
           <>
             <Text h3>预览</Text>
-            <Text>这里是你变更主题后的即时预览。此外，当你每次更新主题变量时，整个文档站点也会随之变化。</Text>
+            <Text>
+              这里是你变更主题后的即时预览。此外，当你每次更新主题变量时，整个文档站点也会随之变化。
+            </Text>
             <Text>你可以拷贝自动生成的代码，或是与任何人分享你自定义的主题样式。</Text>
           </>
         ) : (
           <>
             <Text h3>Preview</Text>
-            <Text>Here&#39;s a preview of your changes to the Theme. When you set the changes,
-              the entire document site will change with the theme.</Text>
-            <Text>You can copy automatically generated codes or share your custom theme with anyone.</Text>
+            <Text>
+              Here&#39;s a preview of your changes to the Theme. When you set the changes, the
+              entire document site will change with the theme.
+            </Text>
+            <Text>
+              You can copy automatically generated codes or share your custom theme with anyone.
+            </Text>
           </>
         )}
-  
+
         <Spacer y={1.7} />
         <Text h4>{isChinese ? '色彩' : 'Colors'}</Text>
         <Colors />
-        
+
         <Spacer y={1.7} />
         <Text h4>{isChinese ? '排版' : 'Typography'}</Text>
-        <Text><Code>inline codes</Code></Text>
-        <Text><a>Hyperlink Text</a> </Text>
-        <Text><Link href="#" color>Link Component</Link></Text>
-        <Text>Our mission is to make cloud computing accessible to everyone. We build products for developers and designers. And those who aspire to become one.</Text>
+        <Text>
+          <Code>inline codes</Code>
+        </Text>
+        <Text>
+          <a>Hyperlink Text</a>{' '}
+        </Text>
+        <Text>
+          <Link href="#" color>
+            Link Component
+          </Link>
+        </Text>
+        <Text>
+          Our mission is to make cloud computing accessible to everyone. We build products for
+          developers and designers. And those who aspire to become one.
+        </Text>
         <Text h6>Heading</Text>
         <Text h5>Heading</Text>
         <Text h4>Heading</Text>
         <Text h3>Heading</Text>
         <Text h2>Heading</Text>
         <Text h1>Heading</Text>
-  
+
         <Spacer y={1.7} />
         <Text h4>{isChinese ? '基础组件' : 'Basic Components'}</Text>
         <Select placeholder="Choose one" initialValue="1">
@@ -49,12 +66,18 @@ const Demo: React.FC<React.PropsWithChildren<{}>> = () => {
           <Select.Option value="2">Option 2</Select.Option>
         </Select>
         <Spacer y={1} />
-        <Button disabled auto size="small">Action</Button>
-        <Spacer inline x={.5} />
-        <Button auto size="small">Action</Button>
-        <Spacer inline x={.5} />
-        <Button auto type="secondary" size="small">Action</Button>
-        <Spacer y={.5} />
+        <Button disabled auto size="small">
+          Action
+        </Button>
+        <Spacer inline x={0.5} />
+        <Button auto size="small">
+          Action
+        </Button>
+        <Spacer inline x={0.5} />
+        <Button auto type="secondary" size="small">
+          Action
+        </Button>
+        <Spacer y={0.5} />
         <Button>Action</Button>
       </div>
       <style jsx>{`
@@ -68,11 +91,11 @@ const Demo: React.FC<React.PropsWithChildren<{}>> = () => {
           height: 100%;
           transition: width 200ms ease;
         }
-        
+
         .content {
           width: 100%;
         }
-        
+
         @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
           .demo {
             display: none;

lib/components/customization/editor-color-item.tsx

@@ -10,17 +10,16 @@ interface Props {
 }
 
 const getRandomColor = () => {
-  const hex = `00000${(Math.random() * 0x1000000 << 0).toString(16)}`
+  const hex = `00000${((Math.random() * 0x1000000) << 0).toString(16)}`
   return `#${hex.substr(-6)}`
 }
 
 const getRandomColors = () => {
   const kyes = Object.keys(DefaultTheme.palette) as Array<keyof ZeitUIThemesPalette>
-  const basicColors = new Array(5).fill('')
-    .map(() => {
-      const index = Math.round(Math.random() * (kyes.length)) + kyes.length
-      return DefaultTheme.palette[kyes[index]]
-    })
+  const basicColors = new Array(5).fill('').map(() => {
+    const index = Math.round(Math.random() * kyes.length) + kyes.length
+    return DefaultTheme.palette[kyes[index]]
+  })
   const deduplicatedColors = [...new Set(...basicColors)]
   const randomColors = new Array(10 - deduplicatedColors.length)
     .fill('')
@@ -28,9 +27,7 @@ const getRandomColors = () => {
   return deduplicatedColors.concat(randomColors)
 }
 
-const EditorColorItem: React.FC<React.PropsWithChildren<Props>> = ({
-  keyName,
-}) => {
+const EditorColorItem: React.FC<React.PropsWithChildren<Props>> = ({ keyName }) => {
   const theme = useTheme()
   const { updateCustomTheme } = useConfigs()
   const label = `${keyName}`
@@ -38,14 +35,17 @@ const EditorColorItem: React.FC<React.PropsWithChildren<Props>> = ({
   const randomColors = useMemo(() => getRandomColors(), [])
   const colorChangeHandler = ({ hex }: ColorResult) => {
     updateCustomTheme({
-      palette: { [keyName]: hex }
+      palette: { [keyName]: hex },
     })
   }
-  
+
   const popoverContent = (color: string) => (
-    <TwitterPicker triangle="hide" color={color}
+    <TwitterPicker
+      triangle="hide"
+      color={color}
       onChangeComplete={colorChangeHandler}
-      colors={randomColors} />
+      colors={randomColors}
+    />
   )
   return (
     <Popover content={() => popoverContent(mainColor)} portalClassName="editor-popover" offset={3}>
@@ -65,48 +65,49 @@ const EditorColorItem: React.FC<React.PropsWithChildren<Props>> = ({
             border: 1px solid ${theme.palette.border};
             border-radius: ${theme.layout.radius};
             color: ${theme.palette.accents_5};
-            margin-right: .75rem;
-            margin-bottom: .5rem;
+            margin-right: 0.75rem;
+            margin-bottom: 0.5rem;
             cursor: pointer;
             transition: color 200ms ease;
           }
-          
+
           :global(.editor-popover .inner) {
             padding: 0 !important;
           }
-          
+
           :global(.editor-popover .twitter-picker) {
             box-shadow: none !important;
             border: 0 !important;
             background: transparent !important;
           }
-          
+
           .editor-item:hover {
             color: ${theme.palette.accents_8};
           }
-          
+
           .editor-item:hover .dot {
             transform: scale(1);
           }
-          
-          .dot-box, .dot {
+
+          .dot-box,
+          .dot {
             display: inline-flex;
             justify-content: center;
             align-items: center;
           }
-          
+
           .dot-box {
             width: 1rem;
             height: 1rem;
-            margin-right: .75rem;
+            margin-right: 0.75rem;
           }
-          
+
           .dot {
             width: 100%;
             height: 100%;
             border-radius: 50%;
             background-color: ${mainColor};
-            transform: scale(.8);
+            transform: scale(0.8);
             transition: transform 200ms ease;
           }
         `}</style>

lib/components/customization/editor-input-item.tsx

@@ -8,9 +8,7 @@ type Props = {
   keyName: string
 }
 
-const EditorInputItem: React.FC<React.PropsWithChildren<Props>> = ({
-  groupName, keyName
-}) => {
+const EditorInputItem: React.FC<React.PropsWithChildren<Props>> = ({ groupName, keyName }) => {
   const theme = useTheme()
   const { updateCustomTheme } = useConfigs()
   const currentVal = useMemo(() => {
@@ -18,19 +16,22 @@ const EditorInputItem: React.FC<React.PropsWithChildren<Props>> = ({
     const key = keyName as keyof typeof group
     return theme[groupName][key]
   }, [theme.expressiveness, keyName])
-  const width = useMemo(() => `${currentVal}`.length > 15 ? '350px' : 'auto', [])
-  
+  const width = useMemo(() => (`${currentVal}`.length > 15 ? '350px' : 'auto'), [])
+
   const changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     updateCustomTheme({
       [groupName]: { [keyName]: event.target.value },
     })
   }
-  
+
   return (
     <div className="editor-item">
-      <Input value={currentVal as string} label={keyName}
+      <Input
+        value={currentVal as string}
+        label={keyName}
         onChange={changeHandler}
-        className="editor-input" />
+        className="editor-input"
+      />
       <style jsx>{`
         .editor-item {
           background-color: transparent;
@@ -40,12 +41,12 @@ const EditorInputItem: React.FC<React.PropsWithChildren<Props>> = ({
           display: inline-flex;
           align-items: center;
           color: ${theme.palette.accents_5};
-          margin-right: .75rem;
-          margin-bottom: .5rem;
+          margin-right: 0.75rem;
+          margin-bottom: 0.5rem;
           cursor: pointer;
           transition: color 200ms ease;
         }
-        
+
         .editor-item :global(.editor-input) {
           width: ${width};
         }

lib/components/customization/editor.tsx

@@ -1,46 +1,91 @@
 import React from 'react'
-import { Text, Button, useTheme, ZeitUIThemesPalette, ZeitUIThemesExpressiveness, ZeitUIThemesLayout } from 'components'
+import {
+  Text,
+  Button,
+  useTheme,
+  ZeitUIThemesPalette,
+  ZeitUIThemesExpressiveness,
+  ZeitUIThemesLayout,
+} from 'components'
 import EditorColorItem from './editor-color-item'
 import EditorInputItem from './editor-input-item'
 import DefaultTheme from 'components/styles/themes/default'
 import { useConfigs } from 'lib/config-context'
 
 const basicColors: Array<keyof ZeitUIThemesPalette> = [
-  'accents_1', 'accents_2', 'accents_3', 'accents_4', 'accents_5', 'accents_6',
-  'accents_7', 'accents_8', 'foreground', 'background',
+  'accents_1',
+  'accents_2',
+  'accents_3',
+  'accents_4',
+  'accents_5',
+  'accents_6',
+  'accents_7',
+  'accents_8',
+  'foreground',
+  'background',
 ]
 const statusColors: Array<keyof ZeitUIThemesPalette> = [
-  'success', 'successLight', 'successDark', 'error', 'errorLight', 'errorDark',
-  'warning', 'warningLight', 'warningDark',
+  'success',
+  'successLight',
+  'successDark',
+  'error',
+  'errorLight',
+  'errorDark',
+  'warning',
+  'warningLight',
+  'warningDark',
 ]
 const otherColors: Array<keyof ZeitUIThemesPalette> = [
-  'selection', 'secondary', 'link', 'border', 'code', 'cyan', 'purple', 'alert', 'violet'
+  'selection',
+  'secondary',
+  'link',
+  'border',
+  'code',
+  'cyan',
+  'purple',
+  'alert',
+  'violet',
 ]
 const expressiveness: Array<keyof ZeitUIThemesExpressiveness> = [
-  'linkStyle', 'linkHoverStyle', 'dropdownBoxShadow', 'shadowSmall',
-  'shadowMedium', 'shadowLarge',
+  'linkStyle',
+  'linkHoverStyle',
+  'dropdownBoxShadow',
+  'shadowSmall',
+  'shadowMedium',
+  'shadowLarge',
 ]
 const pageLayout: Array<keyof ZeitUIThemesLayout> = [
-  'pageWidth', 'pageWidthWithMargin', 'pageMargin', 'radius',
+  'pageWidth',
+  'pageWidthWithMargin',
+  'pageMargin',
+  'radius',
 ]
 const gapLayout: Array<keyof ZeitUIThemesLayout> = [
-  'gap', 'gapNegative', 'gapHalf', 'gapHalfNegative', 'gapQuarter', 'gapQuarterNegative',
+  'gap',
+  'gapNegative',
+  'gapHalf',
+  'gapHalfNegative',
+  'gapQuarter',
+  'gapQuarterNegative',
 ]
 
 const Editor = () => {
   const theme = useTheme()
   const { updateCustomTheme, isChinese } = useConfigs()
-  
+
   const resetLayout = () => updateCustomTheme({ layout: DefaultTheme.layout })
   const restColors = () => updateCustomTheme({ palette: DefaultTheme.palette })
   const resetExpressiveness = () => {
     updateCustomTheme({ expressiveness: DefaultTheme.expressiveness })
   }
-  
+
   return (
     <div className="editor">
-      <Text h3>{isChinese ? '色彩' : 'Colors'}
-        <Button type="abort" auto size="mini" onClick={restColors}>{isChinese ? '重置' : 'Reset'}</Button>
+      <Text h3>
+        {isChinese ? '色彩' : 'Colors'}
+        <Button type="abort" auto size="mini" onClick={restColors}>
+          {isChinese ? '重置' : 'Reset'}
+        </Button>
       </Text>
       <p className="subtitle">{isChinese ? '基础' : 'basic'}</p>
       <div className="content">
@@ -60,9 +105,12 @@ const Editor = () => {
           <EditorColorItem key={`${item}-${index}`} keyName={item} />
         ))}
       </div>
-  
-      <Text h3>{isChinese ? '表现力' : 'Expressiveness'}
-        <Button type="abort" auto size="mini" onClick={resetExpressiveness}>{isChinese ? '重置' : 'Reset'}</Button>
+
+      <Text h3>
+        {isChinese ? '表现力' : 'Expressiveness'}
+        <Button type="abort" auto size="mini" onClick={resetExpressiveness}>
+          {isChinese ? '重置' : 'Reset'}
+        </Button>
       </Text>
       <p className="subtitle">{isChinese ? '基础' : 'basic'}</p>
       <div className="content">
@@ -70,14 +118,20 @@ const Editor = () => {
           <EditorInputItem key={`${item}-${index}`} groupName="expressiveness" keyName={item} />
         ))}
       </div>
-  
-      <Text h3>{isChinese ? '布局' : 'Layout'}
-        <Button type="abort" auto size="mini" onClick={resetLayout}>{isChinese ? '重置' : 'Reset'}</Button>
+
+      <Text h3>
+        {isChinese ? '布局' : 'Layout'}
+        <Button type="abort" auto size="mini" onClick={resetLayout}>
+          {isChinese ? '重置' : 'Reset'}
+        </Button>
       </Text>
       {isChinese ? (
         <p>大多数的布局间距都依赖这些变量，不合理的更改可能会导致布局失衡。</p>
       ) : (
-        <p>Most layout spacing depends on these variables, unreasonable changes may cause layout imbalance.</p>
+        <p>
+          Most layout spacing depends on these variables, unreasonable changes may cause layout
+          imbalance.
+        </p>
       )}
       <p className="subtitle">{isChinese ? '基础' : 'basic'}</p>
       <div className="content">
@@ -101,15 +155,15 @@ const Editor = () => {
           margin: 0 auto;
           padding-left: ${theme.layout.gapQuarter};
         }
-        
+
         .editor :global(h3) {
           margin: 2rem 0 1rem 0;
         }
-        
+
         .subtitle {
           color: ${theme.palette.accents_4};
           text-transform: uppercase;
-          font-size: .75rem;
+          font-size: 0.75rem;
           margin-top: 2rem;
         }
       `}</style>

lib/components/customization/layout.tsx

@@ -3,9 +3,7 @@ import { useTheme, Row } from 'components'
 import CustomizationCodes from './codes'
 import Demo from './demo'
 
-const CustomizationLayout: React.FC<React.PropsWithChildren<{}>> = ({
-  children,
-}) => {
+const CustomizationLayout: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
   const theme = useTheme()
 
   return (
@@ -17,7 +15,7 @@ const CustomizationLayout: React.FC<React.PropsWithChildren<{}>> = ({
       <Row>
         <CustomizationCodes />
       </Row>
-      
+
       <style jsx>{`
         .layout {
           min-height: calc(100vh - 108px);
@@ -28,7 +26,7 @@ const CustomizationLayout: React.FC<React.PropsWithChildren<{}>> = ({
           flex-direction: column;
           box-sizing: border-box;
         }
-        
+
         .content {
           flex: 1;
           overflow: hidden;