diff --git a/README.md b/README.md index 777cec8..6ae0b8e 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ CircleCI npm (scoped)

- + > Modern and minimalist React UI library, originating from Vercel's design. @@ -20,13 +20,13 @@ 2. import into project: ```jsx -import { CSSBaseline, ZEITUIProvider } from '@zeit-ui/react' +import { ZeitProvider, CssBaseline } from '@zeit-ui/react' const Application = () => ( - // ---> Base provider - // ---> normalize styles + // ---> Base provider + // ---> normalize styles // ---> Your App Component - + ) ``` @@ -41,7 +41,7 @@ const Application = () => ( ## Development -- [Contributing Guide](https://github.com/zeit-ui/react/blob/master/.github/CONTRIBUTING.md) +- [Contributing Guide](https://github.com/zeit-ui/react/blob/master/.github/CONTRIBUTING.md)
diff --git a/lib/components/playground/editor.tsx b/lib/components/playground/editor.tsx index 3a0a50e..4faa158 100644 --- a/lib/components/playground/editor.tsx +++ b/lib/components/playground/editor.tsx @@ -1,10 +1,9 @@ import React, { useState } from 'react' import { LiveEditor } from 'react-live' import { useConfigs } from 'lib/config-context' -import { useTheme, useToasts, Row, Col, Utils } from 'components' +import { useTheme, useToasts, Row, Col, useClipboard } from 'components' import CopyIcon from '@zeit-ui/react-icons/copy' import RightIcon from '@zeit-ui/react-icons/chevronRight' -const { useClipboard } = Utils interface Props { code: string diff --git a/pages/_app.tsx b/pages/_app.tsx index 0c2de6a..315c833 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -2,7 +2,7 @@ import Head from 'next/head' import { NextPage } from 'next' import { AppProps } from 'next/app' import React, { useEffect, useState } from 'react' -import { CSSBaseline, ZEITUIProvider, useTheme, ZeitUIThemes } from 'components' +import { CssBaseline, ZeitProvider, useTheme, ZeitUIThemes } from 'components' import Menu from 'lib/components/menu' import ConfigContext from 'lib/config-provider' import useDomClean from 'lib/use-dom-clean' @@ -54,8 +54,8 @@ const Application: NextPage> = ({ Component, pageProps }) => { content="initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover" /> - - + + @@ -111,7 +111,7 @@ const Application: NextPage> = ({ Component, pageProps }) => { border-radius: ${theme.layout.radius}; } `} - + ) } diff --git a/pages/en-us/components/grid.mdx b/pages/en-us/components/grid.mdx index 23d7db6..b4ed13c 100644 --- a/pages/en-us/components/grid.mdx +++ b/pages/en-us/components/grid.mdx @@ -117,10 +117,10 @@ const breakpoints: ZeitUIThemesBreakpoints = { } const App = () => ( - - + + - + ) ``` diff --git a/pages/en-us/components/use-body-scroll.mdx b/pages/en-us/components/use-body-scroll.mdx index 5bdf080..3b9ab31 100644 --- a/pages/en-us/components/use-body-scroll.mdx +++ b/pages/en-us/components/use-body-scroll.mdx @@ -1,5 +1,5 @@ import { Layout, Playground, Attributes } from 'lib/components' -import { Button, Spacer, Utils, Text, Link } from 'components' +import { Button, Spacer, Text, Link, useBodyScroll } from 'components' export const meta = { title: 'use-body-scroll', @@ -12,29 +12,19 @@ Disable scrolling behavior for body or any element, it is useful for displaying This is custom React Hooks, you need to follow the Basic Rules when you use it. - - -### Import - -```jsx -import { Utils } from '@zeit-ui/react' -const { useBodyScroll } = Utils -``` - { - const { useBodyScroll } = Utils const [hidden, setHidden] = useBodyScroll() return ( <> {hidden ? 'Body disabled.' : 'Body can be scrolled.'} - + - + ) } diff --git a/pages/en-us/components/use-click-away.mdx b/pages/en-us/components/use-click-away.mdx index 345a645..67c1111 100644 --- a/pages/en-us/components/use-click-away.mdx +++ b/pages/en-us/components/use-click-away.mdx @@ -1,5 +1,5 @@ import { Layout, Playground, Attributes } from 'lib/components' -import { Utils, Link, Card, Spacer } from 'components' +import { Link, Card, Spacer, useClickAway } from 'components' export const meta = { title: 'use-click-away', @@ -12,21 +12,11 @@ Detect if a click event happened outside of an element. This is custom React Hooks, you need to follow the Basic Rules when you use it. - - -### Import - -```jsx -import { Utils } from '@zeit-ui/react' -const { useClickAway } = Utils -``` - { - const { useClickAway } = Utils const ref = React.useRef() const [count, setCount] = React.useState(0) useClickAway(ref, () => setCount(last => last + 1)) diff --git a/pages/en-us/components/use-clipboard.mdx b/pages/en-us/components/use-clipboard.mdx index b6ad386..e6530d8 100644 --- a/pages/en-us/components/use-clipboard.mdx +++ b/pages/en-us/components/use-clipboard.mdx @@ -1,5 +1,5 @@ import { Layout, Playground, Attributes } from 'lib/components' -import { Utils, Link, Button, useToasts, Spacer } from 'components' +import { useClipboard, Link, Button, useToasts, Spacer } from 'components' export const meta = { title: 'use-clipboard', @@ -12,21 +12,11 @@ Copy string to clipboard. This is custom React Hooks, you need to follow the Basic Rules when you use it. - - -### Import - -```jsx -import { Utils } from '@zeit-ui/react' -const { useClipboard } = Utils -``` - { const [, setToast] = useToasts() - const { useClipboard } = Utils const { copy } = useClipboard() const handler = () => { copy('hello, zeit-ui') diff --git a/pages/en-us/components/use-current-state.mdx b/pages/en-us/components/use-current-state.mdx index 98aad58..e234533 100644 --- a/pages/en-us/components/use-current-state.mdx +++ b/pages/en-us/components/use-current-state.mdx @@ -1,5 +1,5 @@ import { Layout, Playground, Attributes } from 'lib/components' -import { Utils, Link, Button, Spacer } from 'components' +import { useCurrentState, Link, Button, Spacer } from 'components' export const meta = { title: 'use-current-state', @@ -17,20 +17,10 @@ try Basic Rules when you use it. - - -### Import - -```jsx -import { Utils } from '@zeit-ui/react' -const { useCurrentState } = Utils -``` - { - const { useCurrentState } = Utils const [value, setValue] = React.useState(0) const [value2, setValue2, value2Ref] = useCurrentState(0) const handler = () => { @@ -40,9 +30,7 @@ const { useCurrentState } = Utils alert(str) } return ( - <> - - + ) } `} /> diff --git a/pages/en-us/components/use-media-query.mdx b/pages/en-us/components/use-media-query.mdx index 6b3577c..7b8caa4 100644 --- a/pages/en-us/components/use-media-query.mdx +++ b/pages/en-us/components/use-media-query.mdx @@ -1,5 +1,5 @@ import { Layout, Playground, Attributes } from 'lib/components' -import { Utils, Link, Code, Spacer } from 'components' +import { useMediaQuery, Link, Code, Spacer } from 'components' import NextLink from 'next/link' import PlaygroundTitle from 'lib/components/playground/title' @@ -15,20 +15,10 @@ If you just want to build the layout, try Basic Rules when you use it. - - -### Import - -```jsx -import { Utils } from '@zeit-ui/react' -const { useMediaQuery } = Utils -``` - { - const { useMediaQuery } = Utils const isXS = useMediaQuery('xs') const isSM = useMediaQuery('sm') const isMD = useMediaQuery('md') @@ -45,10 +35,9 @@ const { useMediaQuery } = Utils { - const { useMediaQuery } = Utils const upMD = useMediaQuery('md', { match: 'up' }) return ( <> @@ -71,10 +60,10 @@ const breakpoints: ZeitUIThemesBreakpoints = { } const App = () => ( - - + + - + ) ``` diff --git a/pages/en-us/guide/installation.mdx b/pages/en-us/guide/installation.mdx index fa091ce..9ff672c 100644 --- a/pages/en-us/guide/installation.mdx +++ b/pages/en-us/guide/installation.mdx @@ -34,13 +34,13 @@ and a package manager: NPM or ```jsx -import { ZEITUIProvider, CSSBaseline } from '@zeit-ui/react' +import { ZeitProvider, CssBaseline } from '@zeit-ui/react' const Application = () => ( - // ---> Base provider - // ---> normalize styles + // ---> Base provider + // ---> normalize styles // ---> Your App Component - + ) ``` diff --git a/pages/en-us/guide/server-render.mdx b/pages/en-us/guide/server-render.mdx index 4ed7acd..3afa1da 100644 --- a/pages/en-us/guide/server-render.mdx +++ b/pages/en-us/guide/server-render.mdx @@ -44,12 +44,12 @@ Then we add the following codes to the file: ```js import Document, { Html, Head, Main, NextScript } from 'next/document' -import { CSSBaseline } from '@zeit-ui/react' +import { CssBaseline } from '@zeit-ui/react' class MyDocument extends Document { static async getInitialProps (ctx) { const initialProps = await Document.getInitialProps(ctx) - const styles = CSSBaseline.flush() + const styles = CssBaseline.flush() return { ...initialProps, diff --git a/pages/en-us/guide/themes.mdx b/pages/en-us/guide/themes.mdx index a60dad2..d5ab7d3 100644 --- a/pages/en-us/guide/themes.mdx +++ b/pages/en-us/guide/themes.mdx @@ -14,21 +14,21 @@ export const meta = { ### Switch themes -Before using any Components, you must add ZEITUIProvider to the root node. +Before using any Components, you must add ZeitProvider to the root node. -CSSBaseline provides basic CSS support, which is similar to normalize. +CssBaseline provides basic CSS support, which is similar to normalize. **Now you can change the theme as follows:** - 1. Make sure `ZEITUIProvider` and `CSSBaseline` are already on the root component. + 1. Make sure `ZeitProvider` and `CssBaseline` are already on the root component. 2. Get the current theme of the page through hook `useTheme`. 3. Update the value of `theme.type`, and the theme of all components will follow automatically. ```jsx -import { CSSBaseline, ZEITUIProvider } from '@zeit-ui/react' +import { CssBaseline, ZeitProvider } from '@zeit-ui/react' const App = () => { const [themeType, setThemeType] = useState('dark') @@ -36,10 +36,10 @@ const App = () => { setThemeType(lastThemeType => lastThemeType === 'dark' ? 'light' : 'dark') } return ( - - + + - + ) } ``` @@ -58,7 +58,7 @@ Of course, if a *component* doesn't use your customize variables, it doesn't mak The more changes you custom, the more Components Re-Render. ```jsx -import { CSSBaseline, ZEITUIProvider } from '@zeit-ui/react' +import { CssBaseline, ZeitProvider } from '@zeit-ui/react' const myTheme = { palette: { @@ -67,10 +67,10 @@ const myTheme = { } const App = () => ( - - - - + + + + ) ``` diff --git a/pages/zh-cn/components/grid.mdx b/pages/zh-cn/components/grid.mdx index 38f01f4..c0b178b 100644 --- a/pages/zh-cn/components/grid.mdx +++ b/pages/zh-cn/components/grid.mdx @@ -117,10 +117,10 @@ const breakpoints: ZeitUIThemesBreakpoints = { } const App = () => ( - - + + - + ) ``` diff --git a/pages/zh-cn/components/use-body-scroll.mdx b/pages/zh-cn/components/use-body-scroll.mdx index 5a78059..7e85f07 100644 --- a/pages/zh-cn/components/use-body-scroll.mdx +++ b/pages/zh-cn/components/use-body-scroll.mdx @@ -1,5 +1,5 @@ import { Layout, Playground, Attributes } from 'lib/components' -import { Button, Spacer, Utils, Text, Link } from 'components' +import { Button, Spacer, useBodyScroll, Text, Link } from 'components' export const meta = { title: '锁定滚动 useBodyScroll', @@ -12,21 +12,11 @@ export const meta = { 这是一个自定义的 React Hooks，你需要在使用时遵循 钩子的基础规则。 - - -### 引入工具 - -```jsx -import { Utils } from '@zeit-ui/react' -const { useBodyScroll } = Utils -``` - { - const { useBodyScroll } = Utils const [hidden, setHidden] = useBodyScroll() return ( <> diff --git a/pages/zh-cn/components/use-click-away.mdx b/pages/zh-cn/components/use-click-away.mdx index 0143b65..4d177ce 100644 --- a/pages/zh-cn/components/use-click-away.mdx +++ b/pages/zh-cn/components/use-click-away.mdx @@ -1,5 +1,5 @@ import { Layout, Playground, Attributes } from 'lib/components' -import { Utils, Link, Card, Spacer } from 'components' +import { useClickAway, Link, Card, Spacer } from 'components' export const meta = { title: '点击他处 useClickAway', @@ -12,21 +12,11 @@ export const meta = { 这是一个自定义的 React Hooks，你需要在使用时遵循 钩子的基础规则。 - - -### 引入工具 - -```jsx -import { Utils } from '@zeit-ui/react' -const { useClickAway } = Utils -``` - { - const { useClickAway } = Utils const ref = React.useRef() const [count, setCount] = React.useState(0) useClickAway(ref, () => setCount(last => last + 1)) diff --git a/pages/zh-cn/components/use-clipboard.mdx b/pages/zh-cn/components/use-clipboard.mdx index 31ed20d..5b29e23 100644 --- a/pages/zh-cn/components/use-clipboard.mdx +++ b/pages/zh-cn/components/use-clipboard.mdx @@ -1,5 +1,5 @@ import { Layout, Playground, Attributes } from 'lib/components' -import { Utils, Link, Button, useToasts, Spacer } from 'components' +import { useClipboard, Link, Button, useToasts, Spacer } from 'components' export const meta = { title: '剪切板 useClipboard', @@ -12,30 +12,18 @@ export const meta = { 这是一个自定义的 React Hooks，你需要在使用时遵循 钩子的基础规则。 - - -### 引入工具 - -```jsx -import { Utils } from '@zeit-ui/react' -const { useClipboard } = Utils -``` - { const [, setToast] = useToasts() - const { useClipboard } = Utils const { copy } = useClipboard() const handler = () => { copy('hello, zeit-ui') setToast({ text: '文字已拷贝。' }) } return ( - <> - - + ) } `} /> diff --git a/pages/zh-cn/components/use-current-state.mdx b/pages/zh-cn/components/use-current-state.mdx index ac9cab7..559fa16 100644 --- a/pages/zh-cn/components/use-current-state.mdx +++ b/pages/zh-cn/components/use-current-state.mdx @@ -1,5 +1,5 @@ import { Layout, Playground, Attributes } from 'lib/components' -import { Utils, Link, Button, Spacer } from 'components' +import { useCurrentState, Link, Button, Spacer } from 'components' export const meta = { title: ' 当前值 useCurrentState', @@ -15,20 +15,10 @@ export const meta = { 这是一个自定义的 React Hooks，你需要在使用时遵循 钩子的基础规则。 - - -### 引入工具 - -```jsx -import { Utils } from '@zeit-ui/react' -const { useCurrentState } = Utils -``` - { - const { useCurrentState } = Utils const [value, setValue] = React.useState(0) const [value2, setValue2, value2Ref] = useCurrentState(0) const handler = () => { @@ -38,9 +28,7 @@ const { useCurrentState } = Utils alert(str) } return ( - <> - - + ) } `} /> diff --git a/pages/zh-cn/components/use-media-query.mdx b/pages/zh-cn/components/use-media-query.mdx index 0aa2525..6bd1bfd 100644 --- a/pages/zh-cn/components/use-media-query.mdx +++ b/pages/zh-cn/components/use-media-query.mdx @@ -1,5 +1,5 @@ import { Layout, Playground, Attributes } from 'lib/components' -import { Utils, Link, Code, Spacer } from 'components' +import { useMediaQuery, Link, Code, Spacer } from 'components' import NextLink from 'next/link' import PlaygroundTitle from 'lib/components/playground/title' @@ -15,20 +15,10 @@ export const meta = { 这是一个自定义的 React Hooks，你需要在使用时遵循 钩子的基础规则。 - - -### 引入工具 - -```jsx -import { Utils } from '@zeit-ui/react' -const { useMediaQuery } = Utils -``` - { - const { useMediaQuery } = Utils const isXS = useMediaQuery('xs') const isSM = useMediaQuery('sm') const isMD = useMediaQuery('md') @@ -45,10 +35,9 @@ const { useMediaQuery } = Utils { - const { useMediaQuery } = Utils const upMD = useMediaQuery('md', { match: 'up' }) return ( <> @@ -70,10 +59,10 @@ const breakpoints: ZeitUIThemesBreakpoints = { } const App = () => ( - - + + - + ) ``` diff --git a/pages/zh-cn/guide/installation.mdx b/pages/zh-cn/guide/installation.mdx index 3e86967..a736e9f 100644 --- a/pages/zh-cn/guide/installation.mdx +++ b/pages/zh-cn/guide/installation.mdx @@ -34,13 +34,13 @@ export const meta = { ```jsx -import { ZEITUIProvider, CSSBaseline } from '@zeit-ui/react' +import { ZeitProvider, CssBaseline } from '@zeit-ui/react' const Application = () => ( - // ---> Base provider - // ---> normalize styles + // ---> Base provider + // ---> normalize styles // ---> Your App Component - + ) ``` diff --git a/pages/zh-cn/guide/server-render.mdx b/pages/zh-cn/guide/server-render.mdx index 729ecb0..386661c 100644 --- a/pages/zh-cn/guide/server-render.mdx +++ b/pages/zh-cn/guide/server-render.mdx @@ -44,12 +44,12 @@ export const meta = { ```js import Document, { Html, Head, Main, NextScript } from 'next/document' -import { CSSBaseline } from '@zeit-ui/react' +import { CssBaseline } from '@zeit-ui/react' class MyDocument extends Document { static async getInitialProps (ctx) { const initialProps = await Document.getInitialProps(ctx) - const styles = CSSBaseline.flush() + const styles = CssBaseline.flush() return { ...initialProps, diff --git a/pages/zh-cn/guide/themes.mdx b/pages/zh-cn/guide/themes.mdx index 2fdcbce..38680c6 100644 --- a/pages/zh-cn/guide/themes.mdx +++ b/pages/zh-cn/guide/themes.mdx @@ -15,21 +15,21 @@ export const meta = { ### 切换主题 -在使用任何组件前，请确保已添加 ZEITUIProvider 至应用的根节点。 +在使用任何组件前，请确保已添加 ZeitProvider 至应用的根节点。 -CSSBaseline 提供了基础的 CSS 样式，这和你熟悉的 normalize 有些类似。 +CssBaseline 提供了基础的 CSS 样式，这和你熟悉的 normalize 有些类似。 **现在你可以根据如下所示步骤切换主题：** - 1. 确保 `ZEITUIProvider` 与 `CSSBaseline` 已经添加至根节点。 + 1. 确保 `ZeitProvider` 与 `CssBaseline` 已经添加至根节点。 2. (可选的) 通过钩子 `useTheme` 获取所有可用的主题变量。 3. 更新 `theme.type` 的值，所有的组件都会随之自动变化。 ```jsx -import { CSSBaseline, ZEITUIProvider } from '@zeit-ui/react' +import { CssBaseline, ZeitProvider } from '@zeit-ui/react' const App = () => { const [themeType, setThemeType] = useState('dark') @@ -37,10 +37,10 @@ const App = () => { setThemeType(lastThemeType => lastThemeType === 'dark' ? 'light' : 'dark') } return ( - - + + - + ) } ``` @@ -49,7 +49,7 @@ const App = () => { ### 自定义主题 -自定义主题样式在 `@zeit-ui/react` 中是非常简单的，你只需要提供一个新的样式对象给 `ZEITUIProvider`，所有的组件都会自然变化以适应你自定义的属性。 +自定义主题样式在 `@zeit-ui/react` 中是非常简单的，你只需要提供一个新的样式对象给 `ZeitProvider`，所有的组件都会自然变化以适应你自定义的属性。 这里有 一个完整的示例项目 可供参考。 @@ -59,7 +59,7 @@ const App = () => { 自定义越多的主题，就会有越多的 重新渲染 发生。 ```jsx -import { CSSBaseline, ZEITUIProvider } from '@zeit-ui/react' +import { CssBaseline, ZeitProvider } from '@zeit-ui/react' const myTheme = { palette: { @@ -68,10 +68,10 @@ const myTheme = { } const App = () => ( - - + + - + ) ```