Skip to content

Commit a445672

Browse files
LuckyPigeonLuckyPigeon
authored
Add rest examples (pmndrs#117)
* Add rest examples * Fix clock with nextjs * Fix clock with nextjs * Fix clock with nextjs * Remove click with nextjs from examples * Rename todos with atomFamily example Rename todos_with_atomFamily_and_localStorage to todos_with_atomFamily
1 parent b50f0b2 commit a445672

30 files changed

+35485
-0
lines changed

‎examples/hacker_news/.env.development

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
SKIP_PREFLIGHT_CHECK=true
2+
ALIAS_PP = true

‎examples/hacker_news/README.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Explore Examples
2+
3+
```bash
4+
git clone https://github.com/pmndrs/jotai
5+
6+
# install project dependencies & build the library
7+
cd jotai && yarn
8+
9+
# move to the examples folder & install dependencies
10+
cd examples/hacker_news && yarn
11+
12+
# start the dev server
13+
yarn start
14+
```

‎examples/hacker_news/config-overrides.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const {
2+
addWebpackAlias,
3+
removeModuleScopePlugin,
4+
babelInclude,
5+
override,
6+
} = require('customize-cra')
7+
const { addReactRefresh } = require('customize-cra-react-refresh')
8+
const path = require('path')
9+
10+
module.exports = (config, env) => {
11+
config.resolve.extensions = [...config.resolve.extensions, '.ts', '.tsx']
12+
return override(
13+
addReactRefresh(),
14+
removeModuleScopePlugin(),
15+
babelInclude([path.resolve('src'), path.resolve('../../src')]),
16+
process.env.ALIAS_PP &&
17+
addWebpackAlias({
18+
jotai: path.resolve('../../src/index'),
19+
react: path.resolve('node_modules/react'),
20+
'react-dom': path.resolve('node_modules/react-dom'),
21+
})
22+
)(config, env)
23+
}

‎examples/hacker_news/package.json

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "jotai-demo",
3+
"version": "1.0.0",
4+
"description": "An async-read demo with Jotai",
5+
"keywords": [],
6+
"main": "src/index.js",
7+
"dependencies": {
8+
"@react-spring/web": "9.0.0-rc.3",
9+
"jotai": "0.4.1",
10+
"react": "16.13.1",
11+
"react-dom": "16.13.1",
12+
"react-scripts": "3.0.1"
13+
},
14+
"devDependencies": {
15+
"customize-cra": "^1.0.0",
16+
"customize-cra-react-refresh": "^1.1.0",
17+
"raw-loader": "^4.0.1",
18+
"react-app-rewired": "^2.1.6",
19+
"typescript": "3.8.3",
20+
"serve": "^11.3.2"
21+
},
22+
"scripts": {
23+
"start": "react-scripts start",
24+
"build": "react-scripts build",
25+
"test": "react-scripts test --env=jsdom",
26+
"eject": "react-scripts eject"
27+
},
28+
"browserslist": {
29+
"production": [
30+
">0.2%",
31+
"not dead",
32+
"not op_mini all"
33+
],
34+
"development": [
35+
"last 1 chrome version",
36+
"last 1 firefox version",
37+
"last 1 safari version"
38+
]
39+
}
40+
}

‎examples/hacker_news/public/index.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8+
/>
9+
<meta name="theme-color" content="#000000" />
10+
<!--
11+
manifest.json provides metadata used when your web app is added to the
12+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
13+
-->
14+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
16+
<!--
17+
Notice the use of %PUBLIC_URL% in the tags above.
18+
It will be replaced with the URL of the `public` folder during the build.
19+
Only files inside the `public` folder can be referenced from the HTML.
20+
21+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22+
work correctly both with client-side routing and a non-root public URL.
23+
Learn how to configure a non-root public URL by running `npm run build`.
24+
-->
25+
<title>Jotai Demo</title>
26+
</head>
27+
28+
<body>
29+
<noscript>
30+
You need to enable JavaScript to run this app.
31+
</noscript>
32+
<div id="root"></div>
33+
<!--
34+
This HTML file is a template.
35+
If you open it directly in the browser, you will see an empty page.
36+
37+
You can add webfonts, meta tags, or analytics to this file.
38+
The build step will place the bundled scripts into the <body> tag.
39+
40+
To begin the development, run `npm start` or `yarn start`.
41+
To create a production bundle, use `npm run build` or `yarn build`.
42+
-->
43+
</body>
44+
</html>

‎examples/hacker_news/src/App.js

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React, { Suspense } from "react"
2+
import { Provider, atom, useAtom } from "jotai"
3+
import { a, useSpring } from "@react-spring/web"
4+
5+
const postId = atom(9001)
6+
const postData = atom(async (get) => {
7+
const id = get(postId)
8+
const response = await fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json`)
9+
return await response.json()
10+
})
11+
12+
function Id() {
13+
const [id] = useAtom(postId)
14+
const props = useSpring({ from: { id: 0 }, id, reset: true })
15+
return <a.h1>{props.id.to(Math.round)}</a.h1>
16+
}
17+
18+
function Next() {
19+
const [, set] = useAtom(postId)
20+
return (
21+
<button onClick={() => set((x) => x + 1)}>
22+
<div>→</div>
23+
</button>
24+
)
25+
}
26+
27+
function PostTitle() {
28+
const [{ by, title, url, text, time }] = useAtom(postData)
29+
return (
30+
<>
31+
<h2>{by}</h2>
32+
<h6>{new Date(time * 1000).toLocaleDateString("en-US")}</h6>
33+
{title && <h4>{title}</h4>}
34+
<a href={url}>{url}</a>
35+
<p>{text}</p>
36+
</>
37+
)
38+
}
39+
40+
export default function App() {
41+
return (
42+
<Provider>
43+
<Id />
44+
<div>
45+
<Suspense fallback={<h2>Loading...</h2>}>
46+
<PostTitle />
47+
</Suspense>
48+
</div>
49+
<Next />
50+
</Provider>
51+
)
52+
}

‎examples/hacker_news/src/index.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from "react"
2+
import ReactDOM from "react-dom"
3+
import "./styles.css"
4+
import App from "./App"
5+
6+
const rootElement = document.getElementById("root")
7+
ReactDOM.render(
8+
<React.StrictMode>
9+
<App />
10+
</React.StrictMode>,
11+
rootElement,
12+
)

‎examples/hacker_news/src/styles.css

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
@import url("https://rsms.me/inter/inter.css");
2+
3+
* {
4+
box-sizing: border-box;
5+
outline: none !important;
6+
}
7+
8+
html,
9+
body,
10+
#root {
11+
width: 100%;
12+
height: 100%;
13+
margin: 0;
14+
padding: 0;
15+
}
16+
17+
body {
18+
background: white;
19+
color: black;
20+
font-family: "Inter", sans-serif;
21+
-webkit-font-smoothing: antialiased;
22+
-moz-osx-font-smoothing: grayscale;
23+
}
24+
25+
#root {
26+
display: grid;
27+
grid-template-columns: auto 1fr auto;
28+
}
29+
30+
h1 {
31+
writing-mode: tb-rl;
32+
font-variant-numeric: tabular-nums;
33+
font-weight: 700;
34+
font-size: 10em;
35+
letter-spacing: -10px;
36+
text-align: left;
37+
margin: 0;
38+
padding: 50px 0px 0px 20px;
39+
}
40+
41+
h2 {
42+
margin-bottom: 0.2em;
43+
}
44+
45+
h4 {
46+
font-weight: 500;
47+
}
48+
49+
h6 {
50+
margin-top: 0;
51+
}
52+
53+
#root > div {
54+
padding: 50px 20px;
55+
overflow: hidden;
56+
word-wrap: break-word;
57+
position: relative;
58+
}
59+
60+
#root > div > div {
61+
position: absolute;
62+
}
63+
64+
p {
65+
color: #474747;
66+
}
67+
68+
button {
69+
text-decoration: none;
70+
background: transparent;
71+
border: none;
72+
cursor: pointer;
73+
font-family: "Inter", sans-serif;
74+
font-weight: 200;
75+
font-size: 6em;
76+
padding: 0px 30px 20px 0px;
77+
display: flex;
78+
align-items: flex-end;
79+
color: inherit;
80+
}
81+
82+
button:focus {
83+
outline: 0;
84+
}
85+
86+
a {
87+
color: inherit;
88+
}

‎examples/hacker_news/tsconfig.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"extends": "../../tsconfig.json",
3+
"compilerOptions": {
4+
"allowSyntheticDefaultImports": true,
5+
"strict": true,
6+
"module": "esnext",
7+
"noEmit": true,
8+
"lib": [
9+
"dom",
10+
"dom.iterable",
11+
"esnext"
12+
],
13+
"allowJs": true,
14+
"forceConsistentCasingInFileNames": true,
15+
"resolveJsonModule": true,
16+
"isolatedModules": true,
17+
"skipLibCheck": true
18+
}
19+
}

0 commit comments

Comments
 (0)