Merge pull request #169 from unix/pkg

docs(icons): add icons for chinese

lib/components/displays/icons.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { Card, Input, useInput, Modal, useModal, Snippet } from 'components'
 import * as Icon from '@zeit-ui/react-icons'
 import IconsCell, { getImportString } from './icons-cell'
+import { useConfigs } from 'lib/config-context'
 
 const ImportSnippet: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
   return (
@@ -17,6 +18,7 @@ const ImportSnippet: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
 }
 
 const Icons: React.FC = () => {
+  const { isChinese } = useConfigs()
   const { setVisible, bindings: modalBindings } = useModal()
   const { state: query, bindings } = useInput('')
   const [importStr, setImportStr] = useState({ title: '', single: '', normal: '' })
@@ -31,9 +33,9 @@ const Icons: React.FC = () => {
 
   return (
     <>
-      <h3 className="title">Icons Gallery</h3>
+      <h3 className="title">{isChinese ? '图标画廊' : 'Icons Gallery'}</h3>
       <Card>
-        <Input width="100%" icon={<Icon.Search />} placeholder="Search" {...bindings} />
+        <Input width="100%" icon={<Icon.Search />} placeholder={isChinese ? '搜索' : 'Search'} {...bindings} />
         <div className="icons-grid">
           {icons.map(([name, component], index) => (
             <IconsCell name={name} component={component} key={`${name}-${index}`}
@@ -43,9 +45,9 @@ const Icons: React.FC = () => {
         <Modal {...modalBindings}>
           <Modal.Title>{importStr.title}</Modal.Title>
           <Modal.Content>
-            <p>Import:</p>
+            <p>{isChinese ? '引入:' : 'Import:'}</p>
             <ImportSnippet>{importStr.normal}</ImportSnippet>
-            <p>Import single component:</p>
+            <p>{isChinese ? '引入单个组件:' : 'Import single component:'}</p>
             <ImportSnippet>{importStr.single}</ImportSnippet>
           </Modal.Content>
         </Modal>

lib/data/metadata-zh-cn.json

@@ -1 +1 @@
-[{"name":"guide","children":[{"name":"快速上手","children":[{"name":"什么是 ZEIT UI","url":"/zh-cn/guide/introduction","index":5,"group":"快速上手"},{"name":"安装","url":"/zh-cn/guide/installation","index":10,"group":"快速上手"},{"name":"服务端渲染","url":"/zh-cn/guide/server-render","index":15,"group":"快速上手"}]},{"name":"定制化","children":[{"name":"色彩","url":"/zh-cn/guide/colors","index":100,"group":"定制化"},{"name":"主题","url":"/zh-cn/guide/themes","index":100,"group":"定制化"}]}],"localeName":"上手指南"},{"name":"components","children":[{"name":"通用","children":[{"name":"文本 Text","url":"/zh-cn/components/text","index":10,"group":"通用"},{"name":"按钮 Button","url":"/zh-cn/components/button","index":100,"group":"通用"},{"name":"代码 Code","url":"/zh-cn/components/code","index":100,"group":"通用"}]},{"name":"布局","children":[{"name":"布局 Layout","url":"/zh-cn/components/layout","index":100,"group":"布局"},{"name":"间距 Spacer","url":"/zh-cn/components/spacer","index":100,"group":"布局"}]},{"name":"表面","children":[{"name":"卡片 Card","url":"/zh-cn/components/card","index":100,"group":"表面"},{"name":"折叠框 Collapse","url":"/zh-cn/components/collapse","index":100,"group":"表面"},{"name":"控件组 Fieldset","url":"/zh-cn/components/fieldset","index":100,"group":"表面"}]},{"name":"数据录入","children":[{"name":"复选框 Checkbox","url":"/zh-cn/components/checkbox","index":100,"group":"数据录入"},{"name":"输入框 Input","url":"/zh-cn/components/input","index":100,"group":"数据录入"},{"name":"单选框 Radio","url":"/zh-cn/components/radio","index":100,"group":"数据录入"},{"name":"选择器 Select","url":"/zh-cn/components/select","index":100,"group":"数据录入"},{"name":"滑动输入 Slider","url":"/zh-cn/components/slider","index":100,"group":"数据录入"},{"name":"文本输入框 Textarea","url":"/zh-cn/components/textarea","index":100,"group":"数据录入"},{"name":"开关 Toggle","url":"/zh-cn/components/toggle","index":100,"group":"数据录入"},{"name":"自动完成 Auto-Complete","url":"/zh-cn/components/auto-complete","index":104,"group":"数据录入"}]},{"name":"数据展示","children":[{"name":"头像 Avatar","url":"/zh-cn/components/avatar","index":100,"group":"数据展示"},{"name":"徽章 Badge","url":"/zh-cn/components/badge","index":100,"group":"数据展示"},{"name":"容量 Capacity","url":"/zh-cn/components/capacity","index":100,"group":"数据展示"},{"name":"描述 Description","url":"/zh-cn/components/description","index":100,"group":"数据展示"},{"name":"陈列框 Display","url":"/zh-cn/components/display","index":100,"group":"数据展示"},{"name":"点 Dot","url":"/zh-cn/components/dot","index":100,"group":"数据展示"},{"name":"文件树 File Tree","url":"/zh-cn/components/file-tree","index":100,"group":"数据展示"},{"name":"图片 Image","url":"/zh-cn/components/image","index":100,"group":"数据展示"},{"name":"键盘 keyboard","url":"/zh-cn/components/keyboard","index":100,"group":"数据展示"},{"name":"气泡卡片 Popover","url":"/zh-cn/components/popover","index":100,"group":"数据展示"},{"name":"表格 Table","url":"/zh-cn/components/table","index":100,"group":"数据展示"},{"name":"标签 Tag","url":"/zh-cn/components/tag","index":100,"group":"数据展示"},{"name":"文字提示 Tooltip","url":"/zh-cn/components/tooltip","index":100,"group":"数据展示"},{"name":"用户 User","url":"/zh-cn/components/user","index":100,"group":"数据展示"}]},{"name":"反馈","children":[{"name":"加载中 Loading","url":"/zh-cn/components/loading","index":100,"group":"反馈"},{"name":"对话框 Modal","url":"/zh-cn/components/modal","index":100,"group":"反馈"},{"name":"提示 Note","url":"/zh-cn/components/note","index":100,"group":"反馈"},{"name":"进度条 Progress","url":"/zh-cn/components/progress","index":100,"group":"反馈"},{"name":"指示器 Spinner","url":"/zh-cn/components/spinner","index":100,"group":"反馈"},{"name":"通知 Toast","url":"/zh-cn/components/toast","index":100,"group":"反馈"}]},{"name":"导航","children":[{"name":"链接 Link","url":"/zh-cn/components/link","index":100,"group":"导航"},{"name":"选项卡 Tabs","url":"/zh-cn/components/tabs","index":100,"group":"导航"},{"name":"下拉按钮 Btn Dropdown","url":"/zh-cn/components/button-dropdown","index":105,"group":"导航"}]},{"name":"其他","children":[{"name":"分割线 Divider","url":"/zh-cn/components/divider","index":100,"group":"其他"},{"name":"片段 Snippet","url":"/zh-cn/components/snippet","index":100,"group":"其他"}]},{"name":"工具包","children":[{"name":"锁定滚动 useBodyScroll","url":"/zh-cn/components/use-body-scroll","index":100,"group":"工具包"},{"name":"点击他处 useClickAway","url":"/zh-cn/components/use-click-away","index":100,"group":"工具包"},{"name":"剪切板 useClipboard","url":"/zh-cn/components/use-clipboard","index":100,"group":"工具包"},{"name":" 当前值 useCurrentState","url":"/zh-cn/components/use-current-state","index":100,"group":"工具包"}]}],"localeName":"所有组件"},{"name":"customization","children":[],"localeName":"定制化"}]
+[{"name":"guide","children":[{"name":"快速上手","children":[{"name":"什么是 ZEIT UI","url":"/zh-cn/guide/introduction","index":5,"group":"快速上手"},{"name":"安装","url":"/zh-cn/guide/installation","index":10,"group":"快速上手"},{"name":"服务端渲染","url":"/zh-cn/guide/server-render","index":15,"group":"快速上手"}]},{"name":"定制化","children":[{"name":"色彩","url":"/zh-cn/guide/colors","index":100,"group":"定制化"},{"name":"主题","url":"/zh-cn/guide/themes","index":100,"group":"定制化"}]}],"localeName":"上手指南"},{"name":"components","children":[{"name":"通用","children":[{"name":"文本 Text","url":"/zh-cn/components/text","index":10,"group":"通用"},{"name":"按钮 Button","url":"/zh-cn/components/button","index":100,"group":"通用"},{"name":"代码 Code","url":"/zh-cn/components/code","index":100,"group":"通用"},{"name":"图标 Icons","url":"/zh-cn/components/icons","index":100,"group":"通用"}]},{"name":"布局","children":[{"name":"布局 Layout","url":"/zh-cn/components/layout","index":100,"group":"布局"},{"name":"间距 Spacer","url":"/zh-cn/components/spacer","index":100,"group":"布局"}]},{"name":"表面","children":[{"name":"卡片 Card","url":"/zh-cn/components/card","index":100,"group":"表面"},{"name":"折叠框 Collapse","url":"/zh-cn/components/collapse","index":100,"group":"表面"},{"name":"控件组 Fieldset","url":"/zh-cn/components/fieldset","index":100,"group":"表面"}]},{"name":"数据录入","children":[{"name":"复选框 Checkbox","url":"/zh-cn/components/checkbox","index":100,"group":"数据录入"},{"name":"输入框 Input","url":"/zh-cn/components/input","index":100,"group":"数据录入"},{"name":"单选框 Radio","url":"/zh-cn/components/radio","index":100,"group":"数据录入"},{"name":"选择器 Select","url":"/zh-cn/components/select","index":100,"group":"数据录入"},{"name":"滑动输入 Slider","url":"/zh-cn/components/slider","index":100,"group":"数据录入"},{"name":"文本输入框 Textarea","url":"/zh-cn/components/textarea","index":100,"group":"数据录入"},{"name":"开关 Toggle","url":"/zh-cn/components/toggle","index":100,"group":"数据录入"},{"name":"自动完成 Auto-Complete","url":"/zh-cn/components/auto-complete","index":104,"group":"数据录入"}]},{"name":"数据展示","children":[{"name":"头像 Avatar","url":"/zh-cn/components/avatar","index":100,"group":"数据展示"},{"name":"徽章 Badge","url":"/zh-cn/components/badge","index":100,"group":"数据展示"},{"name":"容量 Capacity","url":"/zh-cn/components/capacity","index":100,"group":"数据展示"},{"name":"描述 Description","url":"/zh-cn/components/description","index":100,"group":"数据展示"},{"name":"陈列框 Display","url":"/zh-cn/components/display","index":100,"group":"数据展示"},{"name":"点 Dot","url":"/zh-cn/components/dot","index":100,"group":"数据展示"},{"name":"文件树 File Tree","url":"/zh-cn/components/file-tree","index":100,"group":"数据展示"},{"name":"图片 Image","url":"/zh-cn/components/image","index":100,"group":"数据展示"},{"name":"键盘 keyboard","url":"/zh-cn/components/keyboard","index":100,"group":"数据展示"},{"name":"气泡卡片 Popover","url":"/zh-cn/components/popover","index":100,"group":"数据展示"},{"name":"表格 Table","url":"/zh-cn/components/table","index":100,"group":"数据展示"},{"name":"标签 Tag","url":"/zh-cn/components/tag","index":100,"group":"数据展示"},{"name":"文字提示 Tooltip","url":"/zh-cn/components/tooltip","index":100,"group":"数据展示"},{"name":"用户 User","url":"/zh-cn/components/user","index":100,"group":"数据展示"}]},{"name":"反馈","children":[{"name":"加载中 Loading","url":"/zh-cn/components/loading","index":100,"group":"反馈"},{"name":"对话框 Modal","url":"/zh-cn/components/modal","index":100,"group":"反馈"},{"name":"提示 Note","url":"/zh-cn/components/note","index":100,"group":"反馈"},{"name":"进度条 Progress","url":"/zh-cn/components/progress","index":100,"group":"反馈"},{"name":"指示器 Spinner","url":"/zh-cn/components/spinner","index":100,"group":"反馈"},{"name":"通知 Toast","url":"/zh-cn/components/toast","index":100,"group":"反馈"}]},{"name":"导航","children":[{"name":"链接 Link","url":"/zh-cn/components/link","index":100,"group":"导航"},{"name":"选项卡 Tabs","url":"/zh-cn/components/tabs","index":100,"group":"导航"},{"name":"下拉按钮 Btn Dropdown","url":"/zh-cn/components/button-dropdown","index":105,"group":"导航"}]},{"name":"其他","children":[{"name":"分割线 Divider","url":"/zh-cn/components/divider","index":100,"group":"其他"},{"name":"片段 Snippet","url":"/zh-cn/components/snippet","index":100,"group":"其他"}]},{"name":"工具包","children":[{"name":"锁定滚动 useBodyScroll","url":"/zh-cn/components/use-body-scroll","index":100,"group":"工具包"},{"name":"点击他处 useClickAway","url":"/zh-cn/components/use-click-away","index":100,"group":"工具包"},{"name":"剪切板 useClipboard","url":"/zh-cn/components/use-clipboard","index":100,"group":"工具包"},{"name":" 当前值 useCurrentState","url":"/zh-cn/components/use-current-state","index":100,"group":"工具包"}]}],"localeName":"所有组件"},{"name":"customization","children":[],"localeName":"定制化"}]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeit-ui/react",
-  "version": "1.0.0-rc.11",
+  "version": "1.0.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -104,4 +104,4 @@
   "dependencies": {
     "styled-jsx": "^3.2.5"
   }
-}
+}

pages/zh-cn/components/button.mdx

@@ -89,7 +89,7 @@ export const meta = {
 <Attributes.Title>Button.Props</Attributes.Title>
 
 | 属性 | 描述 | 类型 | 推荐值 | 默认
-| ---------- | ---------- | ---- |  -------------- | ------ |
+| ---------- | ---------- | ---- | -------------- | ------ |
 | **type** | 按钮的类型 | `ButtonTypes` | `'default', 'secondary', 'success', 'warning', 'error', 'abort'` | `default` |
 | **size** | 按钮的大小 | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` |
 | **ghost** | 是否为反色按钮 | `boolean` | - | `false` |

pages/zh-cn/components/icons.mdx

@@ -0,0 +1,82 @@
+import { Layout, Playground, Attributes } from 'lib/components'
+import Title from 'lib/components/playground/title'
+import { Spacer, Tabs, Snippet } from 'components'
+import * as Icon from '@zeit-ui/react-icons'
+import Github from '@zeit-ui/react-icons/github'
+import IconsGallery from 'lib/components/displays/icons'
+
+export const meta = {
+  title: '图标 Icons',
+  group: '通用',
+}
+
+## Icons / 图标
+
+显示 SVG 格式的标准向量图形。
+
+<Title title="安装" desc="安装图标库到你的项目中。" />
+<Tabs initialValue="yarn">
+  <Tabs.Item label="Yarn" value="yarn">
+    <Spacer y={0.6} />
+    <Snippet width="400px">yarn add @zeit-ui/react-icons</Snippet>
+  </Tabs.Item>
+  <Tabs.Item label="npm" value="npm">
+    <Spacer y={0.6} />
+    <Snippet width="400px">npm i @zeit-ui/react-icons</Snippet>
+  </Tabs.Item>
+</Tabs>
+
+<Playground
+  title="引入图标库"
+  scope={{ Icon, Github, Spacer }}
+  code={`
+// import * as Icon from '@zeit-ui/react-icons'
+// 或是
+// import { Github } from '@zeit-ui/react-icons'
+// 或是引入单个
+// import Github from '@zeit-ui/react-icons/github'
+
+<>
+  <Icon.Github />
+  <Spacer x={1} inline />
+  <Github />
+</>
+`} />
+
+<Playground
+  title="色彩"
+  scope={{ Github }}
+  code={`
+<Github color="red" />
+`}
+/>
+
+<Playground
+  title="大小"
+  scope={{ Github, Spacer }}
+  code={`
+<>
+  <Github size={16} /> <Spacer inline x={.35} />
+  <Github size={20} /> <Spacer inline x={.35} />
+  <Github size={24} /> <Spacer inline x={.35} />
+  <Github size={28} /> <Spacer inline x={.35} />
+  <Github size={32} /> <Spacer inline x={.35} />
+  <Github size={36} />
+</>
+`}
+/>
+
+<IconsGallery />
+
+<Attributes edit="/pages/zh-cn/components/icons.mdx">
+<Attributes.Title>Icon.Props</Attributes.Title>
+
+| 属性 | 描述 | 类型 | 推荐值 | 默认
+| --------- | ------ | ---- | -------------- | ------ |
+| **color** | 图标颜色 | `string`        | - | -       |
+| **size**  | 图标大小 | `number`        | - | -       |
+| ...       | 原生属性 | `SVGAttributes` | `'id', 'name', 'className', ...` | - |
+
+</Attributes>
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>