8000 Adding ui-react-dom components · tinyplex/vite-tinybase-react@5afe703 · GitHub
[go: up one dir, main page]
Skip to content

Commit 5afe703

Browse files
jamesgpearcejamesgpearce
committed
Adding ui-react-dom components
1 parent a5842fe commit 5afe703

File tree

7 files changed

+90
-28
lines changed

7 files changed

+90
-28
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
# vite-tinybase-react
22

33
This is a [Vite](https://vitejs.dev/) template for a simple
4-
[TinyBase](https://tinybase.org/) app, using React.
4+
[TinyBase](https://tinybase.org/) app, using React, and also demonstrating the
5+
TinyBase ui-react-dom module UI components.
56

67
## Instructions
78

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"name": "vite-tinybase-react",
3-
"version": "1.0.0",
3+
"version": "1.1.0",
44
"scripts": {
5-
"dev": "vite",
5+
"dev": "vite --force",
66
"build": "vite build",
77
"preview": "vite preview"
88
},
@@ -15,4 +15,4 @@
1515
"react-dom": "^18.2.0",
1616
"tinybase": "^4.1.0"
1717
}
18-
}
18+
}

‎src/App.jsx

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { createStore } from 'tinybase';
2+
import { Provider, useCreateStore } from 'tinybase/debug/ui-react';
23
import {
3-
Provider,
4-
useCreateStore,
5-
useTables,
6-
useValues,
7-
} from 'tinybase/ui-react';
4+
SortedTableInHtmlTable,
5+
StoreInspector,
6+
ValuesInHtmlTable,
7+
} from 'tinybase/debug/ui-react-dom';
88
import { Buttons } from './Buttons';
9-
import { Details } from './Details';
109

1110
export const App = () => {
1211
const store = useCreateStore(() => {
@@ -26,8 +25,30 @@ export const App = () => {
2625
return (
2726
<Provider store={store}>
2827
<Buttons />
29-
<Details label='Values' hook={useValues} />
30-
<Details label='Tables' hook={useTables} />
28+
<div>
29+
<h2>Values</h2>
30+
<ValuesInHtmlTable />
31+
</div>
32+
<div>
33+
<h2>Species Table</h2>
34+
<SortedTableInHtmlTable
35+
tableId='species'
36+
cellId='price'
37+
descending={true}
38+
sortOnClick={true}
39+
className='sortedTable'
40+
/>
41+
<h2>Pets Table</h2>
42+
<SortedTableInHtmlTable
43+
tableId='pets'
44+
cellId='name'
45+
limit={5}
46+
sortOnClick={true}
47+
className='sortedTable'
48+
paginator={true}
49+
/>
50+
</div>
51+
<StoreInspector />
3152
</Provider>
3253
);
3354
};

‎src/Buttons.jsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
import { useAddRowCallback, useSetValueCallback } from 'tinybase/ui-react';
1+
import {
2+
useAddRowCallback,
3+
useSetValueCallback,
4+
} from 'tinybase/debug/ui-react';
25

36
// Convenience function for generating a random integer
47
const getRandom = (max = 100) => Math.floor(Math.random() * max);

‎src/Details.jsx

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/index.css

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ body {
22
color: #bbb;
33
background: #111;
44
font-family: 'Inter', sans-serif;
5+
user-select: none;
56
}
67

78
#logo {
@@ -15,13 +16,21 @@ h1 {
1516
font-weight: 800;
1617
}
1718

19+
h2 {
20+
text-align: center;
21+
font-weight: 800;
22+
font-size: 1.3rem;
23+
margin: 1rem 0 0;
24+
}
25+
1826
#app {
1927
max-width: 40rem;
2028
margin: 2rem auto;
2129
display: grid;
2230
grid-template-columns: 1fr;
2331
column-gap: 2rem;
24-
row-gap: 2rem;
32+
align-items: start;
33+
row-gap: 1rem;
2534
}
2635

2736
#buttons {
@@ -30,7 +39,7 @@ h1 {
3039
text-align: center;
3140
}
3241

33-
button {
42+
#buttons button {
3443
border: 1px solid #666;
3544
border-radius: 1rem;
3645
padding: 0.5rem 1rem;
@@ -42,12 +51,48 @@ button {
4251
width: 10rem;
4352
margin: 1rem;
4453
}
45-
button:hover {
54+
#buttons button:hover {
4655
border-color: #d81b60;
4756
}
4857

49-
summary {
50-
color: #fff;
58+
table {
59+
border-collapse: collapse;
60+
font-size: inherit;
61+
line-height: inherit;
62+
margin-top: 0.5rem;
63+
table-layout: fixed;
64+
width: 100%;
65+
margin-bottom: 2rem;
66+
}
67+
table caption {
68+
text-align: left;
69+
button {
70+
border: 0;
71+
margin-right: 0.25rem;
72+
}
73+
}
74+
table caption button {
75+
line-height: 0.7rem;
76+
margin: 0 0.25rem 0 0;
77+
vertical-align: middle;
78+
}
79+
th,
80+
td {
81+
padding: 0.25rem 0.5rem 0.25rem 0;
82+
text-align: left;
83+
}
84+
thead th,
85+
thead td {
86+
border: solid #999;
87+
border-width: 1px 0;
88+
}
89+
tbody th,
90+
tbody td {
91+
border-bottom: 1px solid #333;
92+
}
93+
94+
table.sortedTable thead th {
95+
cursor: pointer;
5196
}
5297

5398
@media (min-width: 40rem) {

0 commit comments

Comments
 (0)
0