@atom.io/template-react-node-backend 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/.turbo/turbo-build.log +6 -6
  2. package/CHANGELOG.md +13 -0
  3. package/dist/assets/index-CNf_2_tw.js +51 -0
  4. package/dist/assets/index-CqTfTEH3.css +1 -0
  5. package/dist/index.html +2 -2
  6. package/node/server.ts +139 -50
  7. package/package.json +3 -2
  8. package/src/App.tsx +229 -22
  9. package/src/index.css +136 -81
  10. package/src/main.tsx +1 -1
  11. package/tsconfig.app.json +1 -1
  12. package/tsconfig.node.json +1 -1
  13. package/dist/assets/index-By2j7w9s.css +0 -1
  14. package/dist/assets/index-CKoSUs2U.js +0 -19
package/src/index.css CHANGED
@@ -12,6 +12,18 @@
12
12
  -webkit-font-smoothing: antialiased;
13
13
  -moz-osx-font-smoothing: grayscale;
14
14
  }
15
+ @media (prefers-color-scheme: light) {
16
+ :root {
17
+ color: #213547;
18
+ background-color: #ffffff;
19
+ }
20
+ a:hover {
21
+ color: #747bff;
22
+ }
23
+ button {
24
+ background-color: #f9f9f9;
25
+ }
26
+ }
15
27
 
16
28
  a {
17
29
  font-weight: 500;
@@ -25,121 +37,164 @@ a:hover {
25
37
  body {
26
38
  margin: 0;
27
39
  display: flex;
40
+ flex-flow: column;
28
41
  place-items: center;
29
42
  min-width: 320px;
30
43
  min-height: 100vh;
31
44
  #root {
32
- display: flex;
33
45
  width: 100%;
34
- > main {
46
+ height: 100%;
47
+ display: flex;
48
+ flex-flow: column;
49
+ place-items: center;
50
+
51
+ > header {
52
+ position: fixed;
53
+ z-index: 100;
54
+ top: 0;
55
+ left: 0;
35
56
  display: flex;
36
57
  width: 100%;
37
- place-items: center;
58
+ box-sizing: border-box;
59
+ padding: 20px;
60
+ justify-content: flex-end;
61
+ align-items: center;
62
+ gap: 10px;
63
+ > .spacer {
64
+ flex-grow: 1;
65
+ }
66
+ > .pfp {
67
+ position: relative;
68
+ display: flex;
69
+ place-items: center;
70
+ place-content: center;
71
+ border: 1px solid #ccc3;
72
+ width: 40px;
73
+ height: 40px;
74
+ border-radius: 50%;
75
+ &.signed-in::before {
76
+ content: "👤";
77
+ }
78
+ }
79
+ }
80
+
81
+ > main {
82
+ position: relative;
83
+ display: flex;
38
84
  flex-direction: column;
85
+ width: 100%;
86
+ max-width: 600px;
87
+ gap: 10px;
88
+ height: 100%;
39
89
  > header {
40
- position: fixed;
41
- top: 0;
42
- left: 0;
90
+ height: 200px;
43
91
  display: flex;
44
- width: 100%;
45
- box-sizing: border-box;
46
- padding: 20px;
92
+ flex-flow: column;
47
93
  justify-content: flex-end;
48
- gap: 10px;
49
- > .pfp {
50
- position: relative;
94
+ > h1 {
95
+ font-size: 72px;
96
+ line-height: 72px;
97
+ padding: 0;
98
+ margin: 0;
99
+ }
100
+ }
101
+ > main {
102
+ position: relative;
103
+ display: flex;
104
+ flex-flow: column;
105
+ gap: 5px;
106
+ height: 100%;
107
+ > .todo {
51
108
  display: flex;
109
+ height: 29px;
110
+ width: 100%;
111
+ flex-flow: row;
52
112
  place-items: center;
53
- place-content: center;
113
+ font-size: 18px;
114
+ position: relative;
54
115
  border: 1px solid #ccc3;
55
- width: 40px;
56
- height: 40px;
57
- border-radius: 50%;
58
- &.signed-in::before {
59
- content: "👤";
116
+ box-sizing: border-box;
117
+ text-align: center;
118
+ gap: 5px;
119
+ padding: 0 3px;
120
+ > span,
121
+ input[type="text"] {
122
+ flex-grow: 1;
123
+ font-size: 18px;
124
+ font-family: Charter, serif;
125
+ text-align: left;
126
+ }
127
+ > button.delete {
128
+ &:disabled {
129
+ opacity: 0.5;
130
+ background: transparent;
131
+ }
132
+ &::after {
133
+ content: "×";
134
+ }
60
135
  }
61
136
  }
62
137
  }
63
- > .data {
64
- font-size: 30px;
65
- position: relative;
66
- border: 1px solid #ccc3;
67
- width: 60px;
68
- text-align: center;
69
- &.loading {
70
- color: #ccc3;
71
- }
72
- }
138
+ }
73
139
 
74
- > .takeover {
75
- z-index: 100;
76
- position: fixed;
77
- top: 0;
78
- left: 0;
79
- width: 100svw;
80
- height: 100svh;
81
- background-color: rgba(0, 0, 0, 0.5);
140
+ > .takeover {
141
+ z-index: 100;
142
+ position: fixed;
143
+ top: 0;
144
+ left: 0;
145
+ width: 100svw;
146
+ height: 100svh;
147
+ background-color: rgba(0, 0, 0, 0.5);
148
+ display: flex;
149
+ place-items: center;
150
+ place-content: center;
151
+ box-sizing: border-box;
152
+ padding-bottom: 60px;
153
+ > main.card {
82
154
  display: flex;
155
+ flex-direction: column;
83
156
  place-items: center;
84
- place-content: center;
85
- box-sizing: border-box;
86
- padding-bottom: 60px;
87
- > main.card {
88
- display: flex;
89
- flex-direction: column;
90
- place-items: center;
91
- gap: 10px;
92
- background-color: #444;
93
- @media (prefers-color-scheme: light) {
94
- background-color: #fff;
95
- }
96
- width: 100%;
97
- max-width: 200px;
98
- padding: 20px;
99
- border-radius: 8px;
157
+ gap: 10px;
158
+ background-color: #444;
159
+ @media (prefers-color-scheme: light) {
160
+ background-color: #fff;
100
161
  }
162
+ width: 100%;
163
+ max-width: 200px;
164
+ padding: 20px;
165
+ border-radius: 8px;
101
166
  }
102
167
  }
103
168
  }
104
169
  }
105
170
 
106
- .loading::after {
107
- content: "⏳";
108
- position: absolute;
109
- top: -5px;
110
- right: -5px;
111
- font-size: 10px;
112
- color: #fff;
171
+ .loading {
172
+ background: linear-gradient(90deg, #7773, #7771, #7773);
173
+ background-size: 200% 100%;
174
+ animation: pulse 4s ease-in-out infinite;
175
+ &::after {
176
+ content: "⏳";
177
+ position: absolute;
178
+ top: -5px;
179
+ right: -5px;
180
+ font-size: 10px;
181
+ color: #fff;
182
+ }
113
183
  }
114
184
 
115
185
  button {
116
186
  border-radius: 8px;
117
187
  border: 1px solid transparent;
118
- padding: 0.6em 1.2em;
119
- font-size: 1em;
120
- font-weight: 500;
121
- font-family: inherit;
122
- background-color: #1a1a1a;
123
- cursor: pointer;
124
- transition: border-color 0.25s;
125
- &:hover {
126
- border-color: #646cff;
127
- }
128
- &:focus,
129
- &:focus-visible {
130
- outline: 4px auto -webkit-focus-ring-color;
131
- }
132
188
  }
133
189
 
134
- @media (prefers-color-scheme: light) {
135
- :root {
136
- color: #213547;
137
- background-color: #ffffff;
190
+ @keyframes pulse {
191
+ 0% {
192
+ background-position: 200% 0;
138
193
  }
139
- a:hover {
140
- color: #747bff;
194
+ 50% {
195
+ background-position: 0% 0;
141
196
  }
142
- button {
143
- background-color: #f9f9f9;
197
+ 100% {
198
+ background-position: 200% 0;
144
199
  }
145
200
  }
package/src/main.tsx CHANGED
@@ -3,7 +3,7 @@ import "./index.css"
3
3
  import { StrictMode } from "react"
4
4
  import { createRoot } from "react-dom/client"
5
5
 
6
- import App from "./App.tsx"
6
+ import { App } from "./App.tsx"
7
7
 
8
8
  createRoot(document.getElementById(`root`)!).render(
9
9
  <StrictMode>
package/tsconfig.app.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
4
4
  "target": "ES2022",
5
5
  "useDefineForClassFields": true,
6
- "lib": ["ES2022", "DOM", "DOM.Iterable"],
6
+ "lib": ["ESNext", "DOM", "DOM.Iterable"],
7
7
  "module": "ESNext",
8
8
  "types": ["vite/client"],
9
9
  "skipLibCheck": true,
package/tsconfig.node.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "compilerOptions": {
3
3
  "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
4
4
  "target": "ES2023",
5
- "lib": ["ES2023"],
5
+ "lib": ["ESNext"],
6
6
  "module": "ESNext",
7
7
  "types": ["node"],
8
8
  "skipLibCheck": true,
package/dist/assets/index-By2j7w9s.css DELETED
@@ -1 +0,0 @@
1
- :root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:Charter,serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}a{color:#646cff;-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:#535bf2}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex}body #root{width:100%;display:flex}body #root>main{flex-direction:column;place-items:center;width:100%;display:flex}body #root>main>header{box-sizing:border-box;justify-content:flex-end;gap:10px;width:100%;padding:20px;display:flex;position:fixed;top:0;left:0}body #root>main>header>.pfp{border:1px solid #ccc3;border-radius:50%;place-content:center;place-items:center;width:40px;height:40px;display:flex;position:relative}body #root>main>header>.pfp.signed-in:before{content:"👤"}body #root>main>.data{text-align:center;border:1px solid #ccc3;width:60px;font-size:30px;position:relative}body #root>main>.data.loading{color:#ccc3}body #root>main>.takeover{z-index:100;box-sizing:border-box;background-color:#00000080;place-content:center;place-items:center;width:100svw;height:100svh;padding-bottom:60px;display:flex;position:fixed;top:0;left:0}body #root>main>.takeover>main.card{background-color:#444;flex-direction:column;place-items:center;gap:10px;display:flex}@media (prefers-color-scheme:light){body #root>main>.takeover>main.card{background-color:#fff}}body #root>main>.takeover>main.card{border-radius:8px;width:100%;max-width:200px;padding:20px}.loading:after{content:"⏳";color:#fff;font-size:10px;position:absolute;top:-5px;right:-5px}button{cursor:pointer;background-color:#1a1a1a;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}