mirror of
https://github.com/zhigang1992/react.git
synced 2026-03-27 22:54:38 +08:00
Merge pull request #260 from unix/examples
chore: upgrade examples and add extends components
This commit is contained in:
witt
@@ -1,3 +1,16 @@
|
||||
## Custom styles
|
||||
|
||||
This is an example of **how to override styles in `zeit-ui`**.
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm i && npm run dev
|
||||
# or
|
||||
yarn && yarn dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
"build": "react-scripts build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@zeit-ui/react": "^0.0.1-beta.25",
|
||||
"@zeit-ui/react": "latest",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1"
|
||||
},
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import React from 'react'
|
||||
import ReactDom from 'react-dom'
|
||||
import { ZEITUIProvider, CSSBaseline } from '@zeit-ui/react'
|
||||
import { ZeitProvider, CssBaseline } from '@zeit-ui/react'
|
||||
import Home from './home'
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<ZEITUIProvider>
|
||||
<CSSBaseline />
|
||||
<ZeitProvider>
|
||||
<CssBaseline />
|
||||
<Home />
|
||||
</ZEITUIProvider>
|
||||
</ZeitProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,3 +1,15 @@
|
||||
## Custom themes example
|
||||
## Custom themes
|
||||
|
||||
This is an example of **how to custom Themes in `zeit-ui`**.
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm i && npm run dev
|
||||
# or
|
||||
yarn && yarn dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
"build": "react-scripts build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@zeit-ui/react": "^0.0.1-beta.17",
|
||||
"@zeit-ui/react": "latest",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1"
|
||||
},
|
||||
|
||||
@@ -5,7 +5,7 @@ const Home = () => {
|
||||
const theme = useTheme()
|
||||
|
||||
return (
|
||||
<Card shadow style={{ width: '500px', margin: '100px auto' }}>
|
||||
<Card shadow>
|
||||
<Text>Modern and minimalist React UI library.</Text>
|
||||
<Text type={'success'}>
|
||||
Modern and minimalist React UI library. <Tag>{theme.palette.success}</Tag>
|
||||
|
||||
@@ -1,15 +1,17 @@
|
||||
import React from 'react'
|
||||
import ReactDom from 'react-dom'
|
||||
import { ZEITUIProvider, CSSBaseline } from '@zeit-ui/react'
|
||||
import { ZeitProvider, CssBaseline, Page } from '@zeit-ui/react'
|
||||
import Home from './home'
|
||||
import Theme from './theme'
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<ZEITUIProvider theme={Theme}>
|
||||
<CSSBaseline />
|
||||
<Home />
|
||||
</ZEITUIProvider>
|
||||
<ZeitProvider theme={Theme}>
|
||||
<CssBaseline />
|
||||
<Page size="mini">
|
||||
<Home />
|
||||
</Page>
|
||||
</ZeitProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
15
examples/extends-components/README.md
Normal file
15
examples/extends-components/README.md
Normal file
@@ -0,0 +1,15 @@
|
||||
## Extends Components
|
||||
|
||||
This is an example of **how to inherit components in `zeit-ui`**.
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm i && npm run dev
|
||||
# or
|
||||
yarn && yarn dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
26
examples/extends-components/package.json
Normal file
26
examples/extends-components/package.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "zeit-ui-react-extends-components",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"dependencies": {
|
||||
"@zeit-ui/react": "latest",
|
||||
"react": "^16.12.0",
|
||||
"react-dom": "^16.12.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "16.9.19",
|
||||
"@types/react-dom": "16.9.5",
|
||||
"react-scripts": "^3.4.1",
|
||||
"typescript": "3.7.5"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "react-scripts start",
|
||||
"build": "react-scripts build"
|
||||
},
|
||||
"browserslist": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not ie <= 11",
|
||||
"not op_mini all"
|
||||
]
|
||||
}
|
||||
11
examples/extends-components/public/index.html
Normal file
11
examples/extends-components/public/index.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Extends Components</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
14
examples/extends-components/src/app.tsx
Normal file
14
examples/extends-components/src/app.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import * as React from 'react'
|
||||
import MyInput from './my-input'
|
||||
import { ZeitProvider, CssBaseline, Page } from '@zeit-ui/react'
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<ZeitProvider>
|
||||
<CssBaseline />
|
||||
<Page size="mini">
|
||||
<MyInput error="this is required" placeholder="my input" />
|
||||
</Page>
|
||||
</ZeitProvider>
|
||||
)
|
||||
}
|
||||
7
examples/extends-components/src/index.tsx
Normal file
7
examples/extends-components/src/index.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import * as React from 'react'
|
||||
import { render } from 'react-dom'
|
||||
|
||||
import App from './app'
|
||||
|
||||
const rootElement = document.getElementById('app')
|
||||
render(<App />, rootElement)
|
||||
29
examples/extends-components/src/my-input.tsx
Normal file
29
examples/extends-components/src/my-input.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import React, { ReactElement } from 'react'
|
||||
import { Input, Spacer, Text } from '@zeit-ui/react'
|
||||
|
||||
type InputErrorType = {
|
||||
error?: string
|
||||
}
|
||||
|
||||
const MyInput: React.FC<InputErrorType & React.ComponentProps<typeof Input>> = ({
|
||||
error = null,
|
||||
...inputProps
|
||||
}): ReactElement => {
|
||||
const hasError = Boolean(error)
|
||||
const { status } = inputProps
|
||||
return (
|
||||
<>
|
||||
<Input status={hasError ? 'error' : status} {...inputProps} />
|
||||
{hasError && (
|
||||
<>
|
||||
<Spacer y={0.4} />
|
||||
<Text small type="error" size="var(--size-xs2)">
|
||||
{error}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default MyInput
|
||||
1
examples/extends-components/src/react-app-env.d.ts
vendored
Normal file
1
examples/extends-components/src/react-app-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="react-scripts" />
|
||||
24
examples/extends-components/tsconfig.json
Normal file
24
examples/extends-components/tsconfig.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"include": [
|
||||
"./src/*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"lib": [
|
||||
"dom",
|
||||
"es2015"
|
||||
],
|
||||
"jsx": "react",
|
||||
"target": "es5",
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true
|
||||
}
|
||||
}
|
||||
@@ -9,7 +9,7 @@
|
||||
"analyze": "source-map-explorer 'build/static/js/*.js'"
|
||||
},
|
||||
"dependencies": {
|
||||
"@zeit-ui/react": "^1.5.0-rc.0",
|
||||
"@zeit-ui/react": "latest",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1"
|
||||
},
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -21,7 +21,7 @@
|
||||
"webpack-dev-server": "^3.11.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@zeit-ui/react": "^1.5.0-rc.0",
|
||||
"@zeit-ui/react": "latest",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1"
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user