Skip to content

Commit b391ab5

Browse files
rubinovitzfolzcrs48
authored
refactor(examples): move examples and their history into this repo (#46)
Co-authored-by: Rodney Folz <rodney@nextdoor.com> Co-authored-by: Chris Smothers <chris.smothers@gmail.com>
1 parent 31b4fb8 commit b391ab5

30 files changed

+35962
-1
lines changed

‎.npmignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,10 @@ pom.xml.asc
2929

3030
.hgignore
3131
.hg/
32+
33+
examples/
34+
35+
types/
36+
src/
37+
public/
38+
js/

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ yarn add homebase-react
4444
You can see our hosted live demos [here](https://homebaseio.github.io/homebase-react)
4545

4646
### Code Examples
47-
You can clone and run our React code examples [here](https://github.com/homebaseio/homebase-react-examples).
47+
You can clone and run our React code examples [here](examples/).
4848

4949
## API Overview
5050

‎examples/README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Homebase React Examples
2+
3+
You can clone this repo to have ready to run [homebase-react](https://github.com/homebaseio/homebase-react) examples.
4+
5+
## Examples
6+
[Counter Example](counter/)
7+
8+
[Todo Example](todo/)
9+
10+
[Typescript Firebase Todo Example](typescript-firebase-todo/)
11+
12+
## Contributing
13+
We'd love to see your examples. PR them and we will add them to the repo if they show an application of Homebase not displayed in our current demos.

‎examples/counter/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎examples/counter/README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Counter-example
2+
3+
Heavily adopted from `create-react-app` bootstrapping, here's a our Counter example bundled in a React application.
4+
5+
## Installation
6+
```
7+
yarn install
8+
```
9+
10+
## Run it
11+
```
12+
yarn start
13+
```

‎examples/counter/package.json

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "homebase-react-counter-example",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@testing-library/jest-dom": "^5.11.4",
7+
"@testing-library/react": "^11.1.0",
8+
"@testing-library/user-event": "^12.1.10",
9+
"homebase-react": "^0.1.0",
10+
"react": "^17.0.1",
11+
"react-dom": "^17.0.1",
12+
"react-scripts": "4.0.0",
13+
"web-vitals": "^0.2.4"
14+
},
15+
"scripts": {
16+
"start": "react-scripts start",
17+
"build": "react-scripts build",
18+
"test": "react-scripts test",
19+
"eject": "react-scripts eject"
20+
},
21+
"eslintConfig": {
22+
"extends": [
23+
"react-app",
24+
"react-app/jest"
25+
]
26+
},
27+
"browserslist": {
28+
"production": [
29+
">0.2%",
30+
"not dead",
31+
"not op_mini all"
32+
],
33+
"development": [
34+
"last 1 chrome version",
35+
"last 1 firefox version",
36+
"last 1 safari version"
37+
]
38+
}
39+
}

‎examples/counter/public/favicon.ico

3.78 KB
Binary file not shown.

‎examples/counter/public/index.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<title>Homebase Counter Example</title>
9+
</head>
10+
<body>
11+
<noscript>You need to enable JavaScript to run this app.</noscript>
12+
<div id="root"></div>
13+
<!--
14+
This HTML file is a template.
15+
If you open it directly in the browser, you will see an empty page.
16+
17+
You can add webfonts, meta tags, or analytics to this file.
18+
The build step will place the bundled scripts into the <body> tag.
19+
20+
To begin the development, run `npm start` or `yarn start`.
21+
To create a production bundle, use `npm run build` or `yarn build`.
22+
-->
23+
</body>
24+
</html>

‎examples/counter/src/App.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
html {
2+
padding: 20px;
3+
display: flex;
4+
flex-direction: column;
5+
align-items: center;
6+
}

‎examples/counter/src/App.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react'
2+
import { HomebaseProvider, useEntity, useTransact } from 'homebase-react'
3+
import './App.css'
4+
5+
const config = {
6+
initialData: [{
7+
counter: {
8+
identity: 'counter',
9+
count: 0
10+
}
11+
}]
12+
}
13+
14+
export default function App() {
15+
return (
16+
<HomebaseProvider config={config}>
17+
<Counter/>
18+
</HomebaseProvider>
19+
)
20+
}
21+
22+
const Counter = () => {
23+
const [counter] = useEntity({ identity: 'counter' })
24+
const [transact] = useTransact()
25+
return (
26+
<div>
27+
Count: {counter.get('count')}
28+
<div>
29+
<button onClick={() => transact([{
30+
counter: {
31+
id: counter.get('id'),
32+
count: counter.get('count') + 1
33+
}
34+
}])}>
35+
Increment
36+
</button>
37+
</div>
38+
</div>
39+
)
40+
}

0 commit comments

Comments
 (0)