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 0000000000..e55095b983 Binary files /dev/null and b/examples/todo-app/public/favicon.ico differ diff --git a/examples/todo-app/public/merriweather.css b/examples/todo-app/public/merriweather.css deleted file mode 100644 index 3c536073ce..0000000000 --- a/examples/todo-app/public/merriweather.css +++ /dev/null @@ -1,501 +0,0 @@ -/* Auto-generated by vite-plugin-capsize-radix */ - -/* Override Radix variables */ -.radix-themes { - --default-font-family: Merriweather, "Merriweather Fallback", Arial; - --em-font-family: Merriweather, "Merriweather Fallback", Arial; - --quote-font-family: Merriweather, "Merriweather Fallback", Arial; - --heading-font-family: "Merriweather Sans", "Merriweather Sans Fallback", - Arial; - - /* Mobile */ - --font-size-1: 12.1131px; - --line-height-1: 19px; - --font-size-2: 12.1131px; - --line-height-2: 19px; - --font-size-3: 14.8048px; - --line-height-3: 23px; - --font-size-4: 16.1507px; - --line-height-4: 25px; - --font-size-5: 18.8425px; - --line-height-5: 28px; - --font-size-6: 24.2261px; - --line-height-6: 30px; - --font-size-7: 32.3015px; - --line-height-7: 36px; - --font-size-8: 48.4522px; - --line-height-8: 44px; - --font-size-9: 64.603px; - --line-height-9: 52px; - --font-size-10: 86.1373px; - --line-height-10: 64px; - - /* Larger devices */ - @media (min-width: 768px) { - --font-size-1: 12.1131px; - --line-height-1: 19px; - --font-size-2: 14.8048px; - --line-height-2: 23px; - --font-size-3: 16.1507px; - --line-height-3: 25px; - --font-size-4: 18.8425px; - --line-height-4: 28px; - --font-size-5: 24.2261px; - --line-height-5: 30px; - --font-size-6: 32.3015px; - --line-height-6: 36px; - --font-size-7: 48.4522px; - --line-height-7: 44px; - --font-size-8: 64.603px; - --line-height-8: 52px; - --font-size-9: 86.1373px; - --line-height-9: 64px; - } -} - -/* Otherwise links don't flow inline */ -.rt-Link { - display: inline-block; -} - -/* Default text styles */ - -.rt-Text { - font-size: 14.8048px; - line-height: 23px; -} - -.rt-Text::before { - content: ""; - margin-bottom: -0.3893em; - display: table; -} - -.rt-Text::after { - content: ""; - margin-top: -0.4213em; - display: table; -} -@media (min-width: 768px) { - .rt-Text { - font-size: 16.1507px; - line-height: 25px; - } - - .rt-Text::before { - content: ""; - margin-bottom: -0.3865em; - display: table; - } - - .rt-Text::after { - content: ""; - margin-top: -0.4185em; - display: table; - } -} - -/* Em text styles */ - -.rt-Em { - font-size: 14.8048px; - line-height: 23px; -} - -.rt-Em::before { - content: ""; - margin-bottom: -0.3893em; - display: table; -} - -.rt-Em::after { - content: ""; - margin-top: -0.4213em; - display: table; -} -@media (min-width: 768px) { - .rt-Em { - font-size: 16.1507px; - line-height: 25px; - } - - .rt-Em::before { - content: ""; - margin-bottom: -0.3865em; - display: table; - } - - .rt-Em::after { - content: ""; - margin-top: -0.4185em; - display: table; - } -} - -/* Quote text styles */ - -.rt-Quote { - font-size: 14.8048px; - line-height: 23px; -} - -.rt-Quote::before { - content: ""; - margin-bottom: -0.3893em; - display: table; -} - -.rt-Quote::after { - content: ""; - margin-top: -0.4213em; - display: table; -} -@media (min-width: 768px) { - .rt-Quote { - font-size: 16.1507px; - line-height: 25px; - } - - .rt-Quote::before { - content: ""; - margin-bottom: -0.3865em; - display: table; - } - - .rt-Quote::after { - content: ""; - margin-top: -0.4185em; - display: table; - } -} - -.rt-Em, -.rt-Quote { - display: inline-block; -} - -/* Class names for text elements */ - -.rt-r-size-1:not(.rt-DialogContent) { - font-size: 12.1131px; - line-height: 19px; -} - -.rt-r-size-1:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.3968em; - display: table; -} - -.rt-r-size-1:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.4288em; - display: table; -} - -.rt-r-size-2:not(.rt-DialogContent) { - font-size: 12.1131px; - line-height: 19px; -} - -.rt-r-size-2:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.3968em; - display: table; -} - -.rt-r-size-2:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.4288em; - display: table; -} - -.rt-r-size-3:not(.rt-DialogContent) { - font-size: 14.8048px; - line-height: 23px; -} - -.rt-r-size-3:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.3893em; - display: table; -} - -.rt-r-size-3:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.4213em; - display: table; -} - -.rt-r-size-4:not(.rt-DialogContent) { - font-size: 16.1507px; - line-height: 25px; -} - -.rt-r-size-4:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.3865em; - display: table; -} - -.rt-r-size-4:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.4185em; - display: table; -} - -.rt-r-size-5:not(.rt-DialogContent) { - font-size: 18.8425px; - line-height: 28px; -} - -.rt-r-size-5:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.3555em; - display: table; -} - -.rt-r-size-5:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.3875em; - display: table; -} - -.rt-r-size-6:not(.rt-DialogContent) { - font-size: 24.2261px; - line-height: 30px; -} - -.rt-r-size-6:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.2317em; - display: table; -} - -.rt-r-size-6:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.2637em; - display: table; -} - -.rt-r-size-7:not(.rt-DialogContent) { - font-size: 32.3015px; - line-height: 36px; -} - -.rt-r-size-7:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.1698em; - display: table; -} - -.rt-r-size-7:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.2018em; - display: table; -} - -.rt-r-size-8:not(.rt-DialogContent) { - font-size: 48.4522px; - line-height: 44px; -} - -.rt-r-size-8:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.0666em; - display: table; -} - -.rt-r-size-8:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.0986em; - display: table; -} - -.rt-r-size-9:not(.rt-DialogContent) { - font-size: 64.603px; - line-height: 52px; -} - -.rt-r-size-9:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.015em; - display: table; -} - -.rt-r-size-9:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.047em; - display: table; -} - -.rt-r-size-10:not(.rt-DialogContent) { - font-size: 86.1373px; - line-height: 64px; -} - -.rt-r-size-10:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: 0.016em; - display: table; -} - -.rt-r-size-10:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.016em; - display: table; -} -@media (min-width: 768px) { - .rt-r-size-1:not(.rt-DialogContent) { - font-size: 12.1131px; - line-height: 19px; - } - - .rt-r-size-1:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.3968em; - display: table; - } - - .rt-r-size-1:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.4288em; - display: table; - } - - .rt-r-size-2:not(.rt-DialogContent) { - font-size: 14.8048px; - line-height: 23px; - } - - .rt-r-size-2:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.3893em; - display: table; - } - - .rt-r-size-2:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.4213em; - display: table; - } - - .rt-r-size-3:not(.rt-DialogContent) { - font-size: 16.1507px; - line-height: 25px; - } - - .rt-r-size-3:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.3865em; - display: table; - } - - .rt-r-size-3:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.4185em; - display: table; - } - - .rt-r-size-4:not(.rt-DialogContent) { - font-size: 18.8425px; - line-height: 28px; - } - - .rt-r-size-4:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.3555em; - display: table; - } - - .rt-r-size-4:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.3875em; - display: table; - } - - .rt-r-size-5:not(.rt-DialogContent) { - font-size: 24.2261px; - line-height: 30px; - } - - .rt-r-size-5:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.2317em; - display: table; - } - - .rt-r-size-5:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.2637em; - display: table; - } - - .rt-r-size-6:not(.rt-DialogContent) { - font-size: 32.3015px; - line-height: 36px; - } - - .rt-r-size-6:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.1698em; - display: table; - } - - .rt-r-size-6:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.2018em; - display: table; - } - - .rt-r-size-7:not(.rt-DialogContent) { - font-size: 48.4522px; - line-height: 44px; - } - - .rt-r-size-7:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.0666em; - display: table; - } - - .rt-r-size-7:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.0986em; - display: table; - } - - .rt-r-size-8:not(.rt-DialogContent) { - font-size: 64.603px; - line-height: 52px; - } - - .rt-r-size-8:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.015em; - display: table; - } - - .rt-r-size-8:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.047em; - display: table; - } - - .rt-r-size-9:not(.rt-DialogContent) { - font-size: 86.1373px; - line-height: 64px; - } - - .rt-r-size-9:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: 0.016em; - display: table; - } - - .rt-r-size-9:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.016em; - display: table; - } -} diff --git a/examples/todo-app/public/robots.txt b/examples/todo-app/public/robots.txt new file mode 100644 index 0000000000..e9e57dc4d4 --- /dev/null +++ b/examples/todo-app/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/examples/todo-app/public/typography.css b/examples/todo-app/public/typography.css deleted file mode 100644 index 687f4dd6d0..0000000000 --- a/examples/todo-app/public/typography.css +++ /dev/null @@ -1,503 +0,0 @@ -/* Auto-generated by vite-plugin-capsize-radix */ - -/* Override Radix variables */ -.radix-themes { - --default-font-family: "Alegreya Sans", "Alegreya Sans Fallback", Arial; - --em-font-family: "Alegreya Sans", "Alegreya Sans Fallback", Arial; - --quote-font-family: "Alegreya Sans", "Alegreya Sans Fallback", Arial; - --heading-font-family: "Alegreya Sans", "Alegreya Sans Fallback", Arial; - - /* Mobile */ - --font-size-1: 14.0406px; - --line-height-1: 19px; - --font-size-2: 14.0406px; - --line-height-2: 19px; - --font-size-3: 17.1607px; - --line-height-3: 23px; - --font-size-4: 18.7207px; - --line-height-4: 25px; - --font-size-5: 21.8409px; - --line-height-5: 28px; - --font-size-6: 28.0811px; - --line-height-6: 30px; - --font-size-7: 37.4415px; - --line-height-7: 36px; - --font-size-8: 56.1622px; - --line-height-8: 44px; - --font-size-9: 74.883px; - --line-height-9: 52px; - --font-size-10: 99.844px; - --line-height-10: 64px; - - /* Larger devices */ - @media (min-width: 768px) { - --font-size-1: 14.0406px; - --line-height-1: 19px; - --font-size-2: 17.1607px; - --line-height-2: 23px; - --font-size-3: 18.7207px; - --line-height-3: 25px; - --font-size-4: 21.8409px; - --line-height-4: 28px; - --font-size-5: 28.0811px; - --line-height-5: 30px; - --font-size-6: 37.4415px; - --line-height-6: 36px; - --font-size-7: 56.1622px; - --line-height-7: 44px; - --font-size-8: 74.883px; - --line-height-8: 52px; - --font-size-9: 99.844px; - --line-height-9: 64px; - } -} - -/* Otherwise links don't flow inline */ -.rt-Link { - display: inline-block; -} - -/* Default text styles */ - -.rt-Text { - font-size: 17.1607px; - line-height: 23px; -} - -.rt-Text::before { - content: ""; - margin-bottom: -0.3291em; - display: table; -} - -.rt-Text::after { - content: ""; - margin-top: -0.3701em; - display: table; -} -@media (min-width: 768px) { - -.rt-Text { - font-size: 18.7207px; - line-height: 25px; -} - -.rt-Text::before { - content: ""; - margin-bottom: -0.3267em; - display: table; -} - -.rt-Text::after { - content: ""; - margin-top: -0.3677em; - display: table; -} -} - -/* Em text styles */ - -.rt-Em { - font-size: 17.1607px; - line-height: 23px; -} - -.rt-Em::before { - content: ""; - margin-bottom: -0.3291em; - display: table; -} - -.rt-Em::after { - content: ""; - margin-top: -0.3701em; - display: table; -} -@media (min-width: 768px) { - -.rt-Em { - font-size: 18.7207px; - line-height: 25px; -} - -.rt-Em::before { - content: ""; - margin-bottom: -0.3267em; - display: table; -} - -.rt-Em::after { - content: ""; - margin-top: -0.3677em; - display: table; -} -} - -/* Quote text styles */ - -.rt-Quote { - font-size: 17.1607px; - line-height: 23px; -} - -.rt-Quote::before { - content: ""; - margin-bottom: -0.3291em; - display: table; -} - -.rt-Quote::after { - content: ""; - margin-top: -0.3701em; - display: table; -} -@media (min-width: 768px) { - -.rt-Quote { - font-size: 18.7207px; - line-height: 25px; -} - -.rt-Quote::before { - content: ""; - margin-bottom: -0.3267em; - display: table; -} - -.rt-Quote::after { - content: ""; - margin-top: -0.3677em; - display: table; -} -} - -.rt-Em, .rt-Quote { - display: inline-block; -} - -/* Class names for text elements */ - -.rt-r-size-1:not(.rt-DialogContent) { - font-size: 14.0406px; - line-height: 19px; -} - -.rt-r-size-1:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.3356em; - display: table; -} - -.rt-r-size-1:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.3766em; - display: table; -} - -.rt-r-size-2:not(.rt-DialogContent) { - font-size: 14.0406px; - line-height: 19px; -} - -.rt-r-size-2:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.3356em; - display: table; -} - -.rt-r-size-2:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.3766em; - display: table; -} - -.rt-r-size-3:not(.rt-DialogContent) { - font-size: 17.1607px; - line-height: 23px; -} - -.rt-r-size-3:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.3291em; - display: table; -} - -.rt-r-size-3:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.3701em; - display: table; -} - -.rt-r-size-4:not(.rt-DialogContent) { - font-size: 18.7207px; - line-height: 25px; -} - -.rt-r-size-4:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.3267em; - display: table; -} - -.rt-r-size-4:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.3677em; - display: table; -} - -.rt-r-size-5:not(.rt-DialogContent) { - font-size: 21.8409px; - line-height: 28px; -} - -.rt-r-size-5:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.3em; - display: table; -} - -.rt-r-size-5:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.341em; - display: table; -} - -.rt-r-size-6:not(.rt-DialogContent) { - font-size: 28.0811px; - line-height: 30px; -} - -.rt-r-size-6:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.1932em; - display: table; -} - -.rt-r-size-6:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.2342em; - display: table; -} - -.rt-r-size-7:not(.rt-DialogContent) { - font-size: 37.4415px; - line-height: 36px; -} - -.rt-r-size-7:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.1398em; - display: table; -} - -.rt-r-size-7:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.1808em; - display: table; -} - -.rt-r-size-8:not(.rt-DialogContent) { - font-size: 56.1622px; - line-height: 44px; -} - -.rt-r-size-8:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.0507em; - display: table; -} - -.rt-r-size-8:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.0917em; - display: table; -} - -.rt-r-size-9:not(.rt-DialogContent) { - font-size: 74.883px; - line-height: 52px; -} - -.rt-r-size-9:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.0062em; - display: table; -} - -.rt-r-size-9:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.0472em; - display: table; -} - -.rt-r-size-10:not(.rt-DialogContent) { - font-size: 99.844px; - line-height: 64px; -} - -.rt-r-size-10:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: 0.0205em; - display: table; -} - -.rt-r-size-10:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.0205em; - display: table; -} -@media (min-width: 768px) { - -.rt-r-size-1:not(.rt-DialogContent) { - font-size: 14.0406px; - line-height: 19px; -} - -.rt-r-size-1:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.3356em; - display: table; -} - -.rt-r-size-1:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.3766em; - display: table; -} - -.rt-r-size-2:not(.rt-DialogContent) { - font-size: 17.1607px; - line-height: 23px; -} - -.rt-r-size-2:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.3291em; - display: table; -} - -.rt-r-size-2:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.3701em; - display: table; -} - -.rt-r-size-3:not(.rt-DialogContent) { - font-size: 18.7207px; - line-height: 25px; -} - -.rt-r-size-3:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.3267em; - display: table; -} - -.rt-r-size-3:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.3677em; - display: table; -} - -.rt-r-size-4:not(.rt-DialogContent) { - font-size: 21.8409px; - line-height: 28px; -} - -.rt-r-size-4:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.3em; - display: table; -} - -.rt-r-size-4:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.341em; - display: table; -} - -.rt-r-size-5:not(.rt-DialogContent) { - font-size: 28.0811px; - line-height: 30px; -} - -.rt-r-size-5:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.1932em; - display: table; -} - -.rt-r-size-5:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.2342em; - display: table; -} - -.rt-r-size-6:not(.rt-DialogContent) { - font-size: 37.4415px; - line-height: 36px; -} - -.rt-r-size-6:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.1398em; - display: table; -} - -.rt-r-size-6:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.1808em; - display: table; -} - -.rt-r-size-7:not(.rt-DialogContent) { - font-size: 56.1622px; - line-height: 44px; -} - -.rt-r-size-7:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.0507em; - display: table; -} - -.rt-r-size-7:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.0917em; - display: table; -} - -.rt-r-size-8:not(.rt-DialogContent) { - font-size: 74.883px; - line-height: 52px; -} - -.rt-r-size-8:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: -0.0062em; - display: table; -} - -.rt-r-size-8:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.0472em; - display: table; -} - -.rt-r-size-9:not(.rt-DialogContent) { - font-size: 99.844px; - line-height: 64px; -} - -.rt-r-size-9:not(.rt-DialogContent)::before { - content: ""; - margin-bottom: 0.0205em; - display: table; -} - -.rt-r-size-9:not(.rt-DialogContent)::after { - content: ""; - margin-top: -0.0205em; - display: table; -} -} diff --git a/examples/todo-app/server.js b/examples/todo-app/server.js index 1bbe9d349c..b4d5af09b4 100644 --- a/examples/todo-app/server.js +++ b/examples/todo-app/server.js @@ -2,10 +2,11 @@ import express from "express" import bodyParser from "body-parser" import cors from "cors" import pg from "pg" +import process from "process" import { z } from "zod" const { Pool } = pg -const pool = new Pool({connectionString: process.env.DATABASE_URL}) +const pool = new Pool({ connectionString: process.env.DATABASE_URL }) const port = 3010 diff --git a/examples/todo-app/src/assets/logo.svg b/examples/todo-app/src/assets/logo.svg new file mode 100644 index 0000000000..abd5d9c81b --- /dev/null +++ b/examples/todo-app/src/assets/logo.svg @@ -0,0 +1,13 @@ + + + + \ 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)