Skip to content

Commit b2394f9

Browse files
unixunix
committed
feat: upgrade sample project for scaleable compatibility
1 parent 38ef3a5 commit b2394f9

20 files changed

+4448
-3914
lines changed

‎README.md

+19-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,22 @@
1-
## Typescript demo for Geist UI React
1+
# TypeScript demo for Geist UI
22

3-
### Guide
3+
## Getting Started
44

5-
1. Clone: `git clone [email protected]:geist-org/react-ts-getting-started.git`
6-
2. Install deps: `npm i` or `yarn`
7-
3. Start: `npm start` or `yarn start`
5+
First, run the development server:
86

9-
<br/>
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
```
12+
13+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14+
15+
You can start editing the page by modifying `src/app.js`. The page auto-updates as you edit the file.
16+
17+
## Learn More
18+
19+
To learn more about CRA, take a look at the following resources:
20+
21+
- [create-react-app](https://create-react-app.dev/docs/getting-started) - learn about create React App
22+
- [customize-cra](https://github.com/arackaf/customize-cra) - Learn how to customize the configs of the CRA

‎package.json

+13-19
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,12 @@
22
"name": "react-ts-demo",
33
"version": "0.1.0",
44
"private": true,
5+
"license": "MIT",
56
"scripts": {
6-
"start": "react-scripts start",
7-
"build": "react-scripts build",
8-
"test": "react-scripts test",
9-
"eject": "react-scripts eject"
10-
},
11-
"eslintConfig": {
12-
"extends": "react-app"
7+
"dev": "react-scripts start",
8+
"build": "react-scripts build"
139
},
10+
"prettier": "@geist-ui/prettier-config",
1411
"browserslist": {
1512
"production": [
1613
">0.2%",
@@ -24,19 +21,16 @@
2421
]
2522
},
2623
"dependencies": {
27-
"@geist-ui/react": "latest",
28-
"react": "^16.13.1",
29-
"react-dom": "^16.13.1",
30-
"react-scripts": "3.4.1"
24+
"@geist-ui/react": "^2.2.0-rc.7",
25+
"react": "^17.0.2",
26+
"react-dom": "^17.0.2",
27+
"react-scripts": "^4.0.3"
3128
},
3229
"devDependencies": {
33-
"@testing-library/jest-dom": "^4.2.4",
34-
"@testing-library/react": "^9.3.2",
35-
"@testing-library/user-event": "^7.1.2",
36-
"@types/jest": "^25.2.1",
37-
"@types/node": "^12.0.0",
38-
"@types/react": "^16.9.0",
39-
"@types/react-dom": "^16.9.0",
40-
"typescript": "~3.7.2"
30+
"@geist-ui/prettier-config": "^1.0.1",
31+
"@types/react": "^17.0.11",
32+
"@types/react-dom": "^17.0.8",
33+
"prettier": "^2.3.2",
34+
"typescript": "^4.3.4"
4135
}
4236
}

‎public/favicon.ico

37.6 KB
Binary file not shown.

‎public/geist-banner.png

41 KB
Loading

‎public/index.html

+2-30
Original file line numberDiff line numberDiff line change
@@ -5,39 +5,11 @@
55
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
14-
manifest.json provides metadata used when your web app is installed on a
15-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16-
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
19-
Notice the use of %PUBLIC_URL% in the tags above.
20-
It will be replaced with the URL of the `public` folder during the build.
21-
Only files inside the `public` folder can be referenced from the HTML.
22-
23-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24-
work correctly both with client-side routing and a non-root public URL.
25-
Learn how to configure a non-root public URL by running `npm run build`.
26-
-->
27-
<title>React App</title>
8+
<meta name="description" content="Web site created using create-react-app" />
9+
<title>Geist UI</title>
2810
</head>
2911
<body>
3012
<noscript>You need to enable JavaScript to run this app.</noscript>
3113
<div id="root"></div>
32-
<!--
33-
This HTML file is a template.
34-
If you open it directly in the browser, you will see an empty page.
35-
36-
You can add webfonts, meta tags, or analytics to this file.
37-
The build step will place the bundled scripts into the <body> tag.
38-
39-
To begin the development, run `npm start` or `yarn start`.
40-
To create a production bundle, use `npm run build` or `yarn build`.
41-
-->
4214
</body>
4315
</html>

‎public/logo192.png

-5.22 KB
Binary file not shown.

‎public/logo512.png

-9.44 KB
Binary file not shown.

‎public/manifest.json

-25
This file was deleted.

‎public/robots.txt

-3
This file was deleted.

‎src/App.css

-38
This file was deleted.

‎src/App.test.tsx

-9
This file was deleted.

‎src/App.tsx

-14
This file was deleted.

‎src/app.tsx

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react'
2+
import { Page, Text, Image, Display, Button, Grid } from '@geist-ui/react'
3+
4+
const App: React.FC<unknown> = () => {
5+
const gh = 'https://github.com/geist-org/react'
6+
const docs = 'https://react.geist-ui.dev'
7+
const redirect = (url: string) => {
8+
window.open(url)
9+
}
10+
11+
return (
12+
<Page dotBackdrop width="800px" padding={0}>
13+
<Display
14+
title="Geist UI"
15+
caption={
16+
<>
17+
Welcome to{' '}
18+
<Text span b>
19+
Geist UI
20+
</Text>{' '}
21+
and start learning more !
22+
</>
23+
}>
24+
<Image src="/geist-banner.png" draggable={false} />
25+
</Display>
26+
<Grid.Container justify="center" gap={3} mt="100px">
27+
<Grid xs={20} sm={7} justify="center">
28+
<Button shadow type="secondary-light" width="100%" onClick={() => redirect(gh)}>
29+
GitHub Repo
30+
</Button>
31+
</Grid>
32+
<Grid xs={0} sm={3} />
33+
<Grid xs={20} sm={7} justify="center">
34+
<Button width="100%" onClick={() => redirect(docs)}>
35+
Documentation Site
36+
</Button>
37+
</Grid>
38+
</Grid.Container>
39+
</Page>
40+
)
41+
}
42+
43+
export default App

‎src/index.css

-13
This file was deleted.

‎src/index.tsx

+6-13
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import './index.css';
4-
import App from './App';
5-
import * as serviceWorker from './serviceWorker';
6-
import { GeistProvider, CssBaseline } from '@geist-ui/react';
1+
import React from 'react'
2+
import ReactDOM from 'react-dom'
3+
import App from './app'
4+
import { GeistProvider, CssBaseline } from '@geist-ui/react'
75

86
ReactDOM.render(
97
<React.StrictMode>
@@ -12,10 +10,5 @@ ReactDOM.render(
1210
<App />
1311
</GeistProvider>
1412
</React.StrictMode>,
15-
document.getElementById('root')
16-
);
17-
18-
// If you want your app to work offline and load faster, you can change
19-
// unregister() to register() below. Note this comes with some pitfalls.
20-
// Learn more about service workers: https://bit.ly/CRA-PWA
21-
serviceWorker.unregister();
13+
document.getElementById('root'),
14+
)

‎src/logo.svg

-7
This file was deleted.

0 commit comments

Comments
 (0)