From a2903ed62a8e4a15f85f2f3e39dde7cf679603c6 Mon Sep 17 00:00:00 2001 From: Stefanos Mousafeiris Date: Tue, 10 Dec 2024 13:04:01 +0200 Subject: [PATCH] Some styling fixups for the todo app (#2128) Some style fixups for the TODO app as requested. I didn't keep the actual Electric colors cause we are using shadcn themed components so I just went with a similar color. I also hardcoded dark mode as it looks better. Good enough for this IMO but let me know. Screenshot 2024-12-09 at 18 23 42 image --- examples/todo-app/index.html | 1 + examples/todo-app/package.json | 6 +- examples/todo-app/public/favicon.ico | Bin 0 -> 1659 bytes examples/todo-app/public/merriweather.css | 501 --------------------- examples/todo-app/public/robots.txt | 3 + examples/todo-app/public/typography.css | 503 ---------------------- examples/todo-app/server.js | 3 +- examples/todo-app/src/assets/logo.svg | 13 + examples/todo-app/src/main.tsx | 7 +- examples/todo-app/src/routes/index.tsx | 148 ++++--- examples/todo-app/src/routes/root.tsx | 4 +- examples/todo-app/src/style.css | 78 ++++ examples/todo-app/src/svg.d.ts | 5 + examples/todo-app/vite.config.ts | 14 +- pnpm-lock.yaml | 38 -- 15 files changed, 200 insertions(+), 1124 deletions(-) create mode 100644 examples/todo-app/public/favicon.ico delete mode 100644 examples/todo-app/public/merriweather.css create mode 100644 examples/todo-app/public/robots.txt delete mode 100644 examples/todo-app/public/typography.css create mode 100644 examples/todo-app/src/assets/logo.svg create mode 100644 examples/todo-app/src/style.css create mode 100644 examples/todo-app/src/svg.d.ts diff --git a/examples/todo-app/index.html b/examples/todo-app/index.html index 9326853502..2d3b55f8da 100644 --- a/examples/todo-app/index.html +++ b/examples/todo-app/index.html @@ -2,6 +2,7 @@ + ElectricSQL Starter diff --git a/examples/todo-app/package.json b/examples/todo-app/package.json index 47f46311d9..724c157a00 100644 --- a/examples/todo-app/package.json +++ b/examples/todo-app/package.json @@ -23,7 +23,6 @@ "zod": "^3.23.8" }, "devDependencies": { - "@capsizecss/metrics": "^3.2.0", "@databases/pg-migrations": "^5.0.3", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", @@ -41,8 +40,7 @@ "pg": "^8.12.0", "shelljs": "^0.8.5", "typescript": "^5.4.5", - "vite": "^5.3.1", - "vite-plugin-capsize-radix": "^0.0.9" + "vite": "^5.3.1" }, "homepage": "https://github.com/KyleAMathews/vite-react-router-electric-sql-starter#readme", "keywords": [ @@ -65,7 +63,7 @@ "backend:down": "PROJECT_NAME=todo-app pnpm -C ../../ run example-backend:down", "build": "vite build", "db:migrate": "dotenv -e ../../.env.dev -- pnpm exec pg-migrations apply --directory ./db/migrations", - "dev": "concurrently \"vite\" \"node server.js\"", + "dev": "dotenv -e .env -- concurrently \"vite\" \"node server.js\"", "typecheck": "tsc --noEmit" } } diff --git a/examples/todo-app/public/favicon.ico b/examples/todo-app/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..e55095b98323d3dd569e75945b47d612e02b620b GIT binary patch literal 1659 zcmXw32~<;88on=!frKpNJxJIR8d(Y=fdLIrlxPvehQ%o=ZNV5Ug31u2NIV1Py}AHu z6;q@rq6DNv1&^p$gSDC*sdaTbL*lx`(xzXgWV;9&!JbO!v|NNO!( ziI=jLg_BzLfq@3lUk@Ir!9YFfLK$oM65_>j=Eo7lO9xm{e!CW0p{uf5PR>4SK zLH-^i{Ct!x3?w%y8L6@C#Q~HP3i^gPgu`VA`cbNPvIG1m-xh%TYJ#qkzCMo7Sw;V1 z4Sk~o;kqF%Tte4(Y~O{HihSsH4Q*>G!gYsz7djlu1%^7%ucqa$M?5^h{W|DQ4J~&A z%;!7o%Yp8mggrfBKF_fv6XE(!iNy|%v7YZmx z@(_-jQ)V*Mdx9O{OV5zdH^dWeRyln04~8U$c=;gIbDYpoNv_}RBu#|9`7BWgGwvf+ zLh(8^1k|mQHl#srbx-)~mE{?W+ox|QO zu&;n}yol7imlY98I$z3M8A1H<5cA_mMv|D3vVyTbj{ezd$K9C@<=fc)K2zag+4DCk zFGxy-`Wh590FX8(#I8u)_3z1{><#c*WdA61rXh(Gq|>iUQ3ZPMDffvx$|@(nOl6RN+E$g#S4A=ZP zo@U9gy_u*Tq<3p}^l#zy#R#=x@-N9_V_6}labTV9WX9N)yjz>ql8efm{{n=1?coFH zM=CTvl&MAi4{IBb^}LNi-KvK7^Ocs-GQM&LUf_oxT;q<;2J`UdZL6NOK3P0y)V-s# zE8g$FPN^naTZR`6^07Z#Ec8D-W^d1mrZ`h_YUzlbyzI8kC9-Rq-#I9O1=U%TXi ztFK9;XpgprzDrw1tDh@6WAV=TU6u;o8Ixj*SN5p!)zsQ>e4`(}{Lh*)>2a+F6<>*I zf#0**@!@hbrClq}NxP!GM*9mj|A6l6=IbLnI*lIRn|cKPktM(|nIrd`Dck?{i}}ec zqnsD=&Hpjqw-CP$b;S*qTRw-iI6^}&oK^Kod%9ZR7nMnCQ0wI!?K8=#`sqc%xan*u zAxn96Z@=WU?a5b_V|wGwu1~^(mV+shkR$!z@x$$T(P*#UTY70|XdF3Y+uYtM%6lq! zs&7^+hDC!nK2>VIE;3KWOy>g4lkO9oIi*1>kAo3!!%Fq$&`Iv@gMg zwUjvh`XpUvkcWeK?QIY=w}3ePzmqiGfIJZU=i0md@(;1*^O>(iFm`cxHMpmQp|rPj zlA+4wo4J=1LzeO$ewmnWZt}pc$LN7|?j_kEl)g?U(1fYURVP5#K)EwbY_axAZ{13eVd)m2Gf<&Sm54VIA3slCitWUGh%Yq8 zpx6E!arMs%uMVg%VQa6m=cY&Uq1VZN*eU!L@x=^t=^L1#Zi|UJG6JHmb*nse8_`TC zXx1OmZ9xUlxmkafF3&at1(}5&x*}Tvbj~b<#Uf>a55;gevE%3nU|T;Svqq%?j6Eui z#%gN0oDpd_wk^+m^~fM-!x_%_DnhTRhw0tR7h$hFe@`&=(9}_FaknhbNFy_S)n^F~ zuWc^k8dL^$;AH5(e~eLBFX}kr1~d<-@JMJt9c!xt&GzT2wkg0;zSxKA{m8ZmOSkob zZ6j@|whD0nakbl7+z6!xv0caO=<2lH;6Vvi^hD|3mK7EB#Mq9vHq5n=( + + + \ No newline at end of file diff --git a/examples/todo-app/src/main.tsx b/examples/todo-app/src/main.tsx index 5e859242a3..a594dfe40e 100644 --- a/examples/todo-app/src/main.tsx +++ b/examples/todo-app/src/main.tsx @@ -2,10 +2,11 @@ import React from "react" import ReactDOM from "react-dom/client" import { createBrowserRouter, RouterProvider } from "react-router-dom" import ErrorPage from "./error-page" -import "@radix-ui/themes/styles.css" -import "../public/typography.css" + import { Theme } from "@radix-ui/themes" import "@fontsource/alegreya-sans/latin.css" +import "@radix-ui/themes/styles.css" +import "./style.css" import Index from "./routes/index" @@ -30,7 +31,7 @@ const router = createBrowserRouter([ async function render() { ReactDOM.createRoot(document.getElementById(`root`)!).render( - + diff --git a/examples/todo-app/src/routes/index.tsx b/examples/todo-app/src/routes/index.tsx index 93ae159ee5..114ff31a49 100644 --- a/examples/todo-app/src/routes/index.tsx +++ b/examples/todo-app/src/routes/index.tsx @@ -1,3 +1,4 @@ +import { useCallback, useState } from "react" import { Container, Flex, @@ -5,8 +6,11 @@ import { Heading, Text, TextField, - Link, + Card, + Button, + Box, } from "@radix-ui/themes" +import logo from "../assets/logo.svg" import { useShape } from "@electric-sql/react" import { v4 as uuidv4 } from "uuid" @@ -26,72 +30,88 @@ export default function Index() { token: import.meta.env.VITE_ELECTRIC_TOKEN, }, }) - todos.sort((a: ToDo, b: ToDo) => a.created_at - b.created_at) - console.log({ todos }) + todos.sort((a, b) => a.created_at - b.created_at) + + const [inputEnabled, setInputEnabled] = useState(false) + + const onTodoClicked = useCallback(async (todo: ToDo) => { + console.log(`completed`) + await fetch( + new URL(`${import.meta.env.VITE_SERVER_URL}/todos/${todo.id}`).href, + { + method: `PUT`, + headers: { + "Content-Type": `application/json`, + }, + body: JSON.stringify({ + completed: !todo.completed, + }), + } + ) + }, []) + + const onTodoDeleted = useCallback(async (todo: ToDo) => { + console.log(`deleted`) + await fetch( + new URL(`${import.meta.env.VITE_SERVER_URL}/todos/${todo.id}`).href, + { + method: `DELETE`, + } + ) + }, []) + return ( - Electric TODOS + + logo + Electric To-Dos + + + - {todos.map((todo: ToDo) => { - return ( - - - - { - console.log(`completed`) - await fetch( - new URL( - `${import.meta.env.VITE_SERVER_URL}/todos/${ - todo.id - }` - ).href, - { - method: `PUT`, - headers: { - "Content-Type": `application/json`, - }, - body: JSON.stringify({ - completed: !todo.completed, - }), - } - ) + {todos.length === 0 ? ( + + No to-dos to show - add one! + + ) : ( + todos.map((todo) => { + return ( + onTodoClicked(todo)}> + + + + + {todo.title} + + + - - { - console.log(`deleted`) - await fetch( - new URL( - `${import.meta.env.VITE_SERVER_URL}/todos/${todo.id}` - ).href, - { - method: `DELETE`, - } - ) - }} - > - x - - - ) - })} + + ) + }) + )}
{ + style={{ width: `100%` }} + onSubmit={async (event) => { event.preventDefault() + if (!inputEnabled) return const id = uuidv4() - const formData = Object.fromEntries( - new FormData(event.target as HTMLFormElement) - ) + const formElem = event.target as HTMLFormElement + const formData = Object.fromEntries(new FormData(formElem)) + formElem.reset() + const res = await fetch( new URL(`${import.meta.env.VITE_SERVER_URL}/todos`).href, { @@ -105,7 +125,19 @@ export default function Index() { console.log({ res }) }} > - + + setInputEnabled(e.currentTarget.value !== ``)} + type="text" + name="todo" + placeholder="New Todo" + mr="1" + style={{ width: `100%` }} + /> + +
diff --git a/examples/todo-app/src/routes/root.tsx b/examples/todo-app/src/routes/root.tsx index 51e3d50788..cfd5efd10d 100644 --- a/examples/todo-app/src/routes/root.tsx +++ b/examples/todo-app/src/routes/root.tsx @@ -1,7 +1,5 @@ import { Outlet } from "react-router-dom" export default function Root() { - return ( - - ) + return } diff --git a/examples/todo-app/src/style.css b/examples/todo-app/src/style.css new file mode 100644 index 0000000000..70cadf591f --- /dev/null +++ b/examples/todo-app/src/style.css @@ -0,0 +1,78 @@ +body { + margin: 0; + /* background-color: #1b1b1f; */ +} + +.dark, .dark-theme { + --violet-1: #1c1a23; + --violet-2: #201d28; + --violet-3: #2f2740; + --violet-4: #392d51; + --violet-5: #41345c; + --violet-6: #4b3e68; + --violet-7: #5a4b7a; + --violet-8: #6f5c95; + --violet-9: #d0bcff; + --violet-10: #c6b2f4; + --violet-11: #beaaec; + --violet-12: #e4def5; + + --violet-a1: #4f00ec05; + --violet-a2: #8f4af00b; + --violet-a3: #a26cfd26; + --violet-a4: #a26cff39; + --violet-a5: #a576fe46; + --violet-a6: #ad86fd54; + --violet-a7: #b691ff68; + --violet-a8: #ba96fe87; + --violet-a9: #d0bcff; + --violet-a10: #cfbafff3; + --violet-a11: #cdb7feea; + --violet-a12: #ede7fff4; + + --violet-contrast: #241d32; + --violet-surface: #251f3180; + --violet-indicator: #d0bcff; + --violet-track: #d0bcff; +} + +@supports (color: color(display-p3 1 1 1)) { + @media (color-gamut: p3) { + .dark, .dark-theme { + --violet-1: oklch(22.4% 0.018 298); + --violet-2: oklch(23.8% 0.0218 298); + --violet-3: oklch(29.2% 0.046 298); + --violet-4: oklch(32.8% 0.0645 298); + --violet-5: oklch(35.9% 0.0685 298); + --violet-6: oklch(39.6% 0.0709 298); + --violet-7: oklch(44.8% 0.077 298); + --violet-8: oklch(51.7% 0.0906 298); + --violet-9: oklch(83.5% 0.0946 298); + --violet-10: oklch(80.3% 0.0946 298); + --violet-11: oklch(77.8% 0.0946 298); + --violet-12: oklch(91.2% 0.0313 298); + + --violet-a1: color(display-p3 0.3882 0 0.9647 / 0.014); + --violet-a2: color(display-p3 0.5451 0.3255 0.9961 / 0.036); + --violet-a3: color(display-p3 0.6431 0.4471 1 / 0.139); + --violet-a4: color(display-p3 0.6196 0.4353 1 / 0.215); + --violet-a5: color(display-p3 0.651 0.4863 1 / 0.259); + --violet-a6: color(display-p3 0.6824 0.5412 1 / 0.313); + --violet-a7: color(display-p3 0.7176 0.5961 1 / 0.393); + --violet-a8: color(display-p3 0.7333 0.6157 1 / 0.509); + --violet-a9: color(display-p3 0.8196 0.7529 1 / 0.978); + --violet-a10: color(display-p3 0.8157 0.749 1 / 0.929); + --violet-a11: color(display-p3 0.8078 0.7373 1 / 0.893); + --violet-a12: color(display-p3 0.9373 0.9137 1 / 0.947); + + --violet-contrast: #241d32; + --violet-surface: color(display-p3 0.1333 0.1176 0.1804 / 0.5); + --violet-indicator: oklch(83.5% 0.0946 298); + --violet-track: oklch(83.5% 0.0946 298); + } + } +} + +.dark, .dark-theme, :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) { + --color-background: #1b1b1f; +} \ No newline at end of file diff --git a/examples/todo-app/src/svg.d.ts b/examples/todo-app/src/svg.d.ts new file mode 100644 index 0000000000..263681799a --- /dev/null +++ b/examples/todo-app/src/svg.d.ts @@ -0,0 +1,5 @@ +// eslint-disable-next-line quotes +declare module "*.svg" { + const content: string + export default content +} diff --git a/examples/todo-app/vite.config.ts b/examples/todo-app/vite.config.ts index 650644ff9b..fee0ea51f2 100644 --- a/examples/todo-app/vite.config.ts +++ b/examples/todo-app/vite.config.ts @@ -1,18 +1,6 @@ import { defineConfig } from "vite" import react from "@vitejs/plugin-react-swc" -import { capsizeRadixPlugin } from "vite-plugin-capsize-radix" -import alegreyaSans from "@capsizecss/metrics/alegreyaSans" -import arial from "@capsizecss/metrics/arial" export default defineConfig({ - plugins: [ - react(), - capsizeRadixPlugin({ - // Import this file into your app after you import Radix's CSS. - outputPath: `./public/typography.css`, - // Pass in Capsize font metric objects. - // eslint-disable-next-line @typescript-eslint/no-explicit-any - defaultFontStack: [alegreyaSans as any, arial as any], - }), - ], + plugins: [react()], }) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bcfeac5464..8b2b7148e3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -672,9 +672,6 @@ importers: specifier: ^3.23.8 version: 3.23.8 devDependencies: - '@capsizecss/metrics': - specifier: ^3.2.0 - version: 3.3.0 '@databases/pg-migrations': specifier: ^5.0.3 version: 5.0.3(typescript@5.6.3) @@ -729,9 +726,6 @@ importers: vite: specifier: ^5.3.1 version: 5.4.10(@types/node@20.17.6)(terser@5.36.0) - vite-plugin-capsize-radix: - specifier: ^0.0.9 - version: 0.0.9 examples/write-patterns: dependencies: @@ -1744,15 +1738,6 @@ packages: resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==} engines: {node: '>=6.9.0'} - '@capsizecss/core@4.1.2': - resolution: {integrity: sha512-5tMjLsVsaEEwJ816y3eTfhhTIyUWNFt58x6YcHni0eV5tta8MGDOAIe+CV5ICb5pguXgDpNGLprqhPqBWtkFSg==} - - '@capsizecss/metrics@2.2.0': - resolution: {integrity: sha512-DkFIser1KbGxWyG2hhQQeCit72TnOQDx5pr9bkA7+XlIy7qv+4lYtslH3bidVxm2qkY2guAgypSIPYuQQuk70A==} - - '@capsizecss/metrics@3.3.0': - resolution: {integrity: sha512-WAQtKgyz7fZDEMuERSLPmWXuV53O/HDJZLof8BMWEX1GTWYiiNdqGA6j56+GCSSeVyzYDxkBnm5taIh0YyW6fQ==} - '@cfaester/enzyme-adapter-react-18@0.8.0': resolution: {integrity: sha512-3Z3ThTUouHwz8oIyhTYQljEMNRFtlVyc3VOOHCbxs47U6cnXs8K9ygi/c1tv49s7MBlTXeIcuN+Ttd9aPtILFQ==} peerDependencies: @@ -6955,10 +6940,6 @@ packages: ms@2.1.3: resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} - mustache@4.2.0: - resolution: {integrity: sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==} - hasBin: true - mute-stream@1.0.0: resolution: {integrity: sha512-avsJQhyd+680gKXyG/sQc0nXaC6rBkPOfyHYcFb9+hdkqQkR9bdnkJ0AMZhke0oesPqIO+mFFJ+IdBc7mst4IA==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} @@ -8958,9 +8939,6 @@ packages: engines: {node: ^18.0.0 || >=20.0.0} hasBin: true - vite-plugin-capsize-radix@0.0.9: - resolution: {integrity: sha512-pd9qgkxyTXkWstMy5yri65mbgCZrmQm/VHcPzbfdLs0jUEP0/C6LUtupEMzxcjYP2jqQyic4tBNocyVf060Ccw==} - vite-plugin-pwa@0.21.0: resolution: {integrity: sha512-gnDE5sN2hdxA4vTl0pe6PCTPXqChk175jH8dZVVTBjFhWarZZoXaAdoTIKCIa8Zbx94sC0CnCOyERBWpxvry+g==} engines: {node: '>=16.0.0'} @@ -10204,14 +10182,6 @@ snapshots: '@babel/helper-string-parser': 7.25.9 '@babel/helper-validator-identifier': 7.25.9 - '@capsizecss/core@4.1.2': - dependencies: - csstype: 3.1.3 - - '@capsizecss/metrics@2.2.0': {} - - '@capsizecss/metrics@3.3.0': {} - '@cfaester/enzyme-adapter-react-18@0.8.0(enzyme@3.11.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: enzyme: 3.11.0 @@ -16013,8 +15983,6 @@ snapshots: ms@2.1.3: {} - mustache@4.2.0: {} - mute-stream@1.0.0: {} mz@2.7.0: @@ -18223,12 +18191,6 @@ snapshots: - supports-color - terser - vite-plugin-capsize-radix@0.0.9: - dependencies: - '@capsizecss/core': 4.1.2 - '@capsizecss/metrics': 2.2.0 - mustache: 4.2.0 - vite-plugin-pwa@0.21.0(vite@5.4.10(@types/node@20.17.6)(terser@5.36.0))(workbox-build@7.3.0(@types/babel__core@7.20.5))(workbox-window@7.3.0): dependencies: debug: 4.3.7(supports-color@5.5.0)