Upgrade to astro v4

astro/astro.config.mjs

@@ -8,12 +8,11 @@ import react from "@astrojs/react";
 // https://astro.build/config
 export default defineConfig({
   compressHTML: true,
+  server: { port: 3000 },
   build: {
     inlineStylesheets: "auto"
   },
-  experimental: {
+  viewTransitions: true,
-    viewTransitions: true
-  },
   integrations: [tailwind({
     config: {
       applyBaseStyles: false

astro/components.json

@@ -5,13 +5,14 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.cjs",
-    "css": "src/styles/globals.css",
+    "css": "@/styles/globals.css",
     "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""
   },
   "aliases": {
     "components": "@/components",
-    "utils": "@/utils"
+    "utils": "@/utils",
+    "styles": "@/styles"
   }
 }

astro/package.json

@@ -9,17 +9,17 @@
     "build": "astro build"
   },
   "dependencies": {
-    "@astrojs/image": "^0.17.3",
+    "@astrojs/image": "0.18.0",
-    "@astrojs/prefetch": "^0.3.0",
+    "@astrojs/prefetch": "0.4.1",
     "@astrojs/react": "^3.1.0",
-    "@astrojs/sitemap": "^2.0.2",
+    "@astrojs/sitemap": "3.1.2",
-    "@astrojs/tailwind": "4.0.0",
+    "@astrojs/tailwind": "5.1.0",
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
-    "astro": "^2.10.12",
+    "astro": "^4.5.13",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "css-select": "5.1.0",
@@ -32,6 +32,7 @@
     "tailwind-merge": "^2.2.2",
     "tailwindcss": "^3.3.3",
     "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.4.3",
     "zod": "^3.22.4"
   },
   "devDependencies": {

astro/src/components/AddRetailerForm.tsx

@@ -14,13 +14,15 @@ import {
 } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
 
-const formSchema = z.object({
-  username: z.string().min(2, {
-    message: "Username must be at least 2 characters.",
-  }),
-})
 
 export function AddRetailerForm() {
+
+  const formSchema = z.object({
+    username: z.string().min(2, {
+      message: "Username must be at least 2 characters.",
+    }),
+  })
+  
   
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -56,7 +58,7 @@ export function AddRetailerForm() {
               </FormItem>
             )}
           />
-          <Button type="submit">Submit</Button>
+          <Button variant={"default"} type="submit">Submit</Button>
         </form>
       </Form>
     </div>

astro/src/styles/global.css

@@ -2,70 +2,55 @@
 @tailwind components;
 @tailwind utilities;
 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
+    --foreground: 222.2 84% 4.9%;
-
     --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
+    --card-foreground: 222.2 84% 4.9%;
-
     --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
+    --popover-foreground: 222.2 84% 4.9%;
-
+    --primary: 221.2 83.2% 53.3%;
-    --primary: 0 0% 9%;
+    --primary-foreground: 210 40% 98%;
-    --primary-foreground: 0 0% 98%;
+    --secondary: 210 40% 96.1%;
-
+    --secondary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 0 0% 96.1%;
+    --muted: 210 40% 96.1%;
-    --secondary-foreground: 0 0% 9%;
+    --muted-foreground: 215.4 16.3% 46.9%;
-
+    --accent: 210 40% 96.1%;
-    --muted: 0 0% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
-    --muted-foreground: 0 0% 45.1%;
-
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
+    --destructive-foreground: 210 40% 98%;
-
+    --border: 214.3 31.8% 91.4%;
-    --border: 0 0% 89.8%;
+    --input: 214.3 31.8% 91.4%;
-    --input: 0 0% 89.8%;
+    --ring: 221.2 83.2% 53.3%;
-    --ring: 0 0% 3.9%;
-
     --radius: 0.5rem;
   }
 
   .dark {
-    --background: 0 0% 3.9%;
+    --background: 222.2 84% 4.9%;
-    --foreground: 0 0% 98%;
+    --foreground: 210 40% 98%;
-
+    --card: 222.2 84% 4.9%;
-    --card: 0 0% 3.9%;
+    --card-foreground: 210 40% 98%;
-    --card-foreground: 0 0% 98%;
+    --popover: 222.2 84% 4.9%;
-
+    --popover-foreground: 210 40% 98%;
-    --popover: 0 0% 3.9%;
+    --primary: 217.2 91.2% 59.8%;
-    --popover-foreground: 0 0% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
-
+    --secondary: 217.2 32.6% 17.5%;
-    --primary: 0 0% 98%;
+    --secondary-foreground: 210 40% 98%;
-    --primary-foreground: 0 0% 9%;
+    --muted: 217.2 32.6% 17.5%;
-
+    --muted-foreground: 215 20.2% 65.1%;
-    --secondary: 0 0% 14.9%;
+    --accent: 217.2 32.6% 17.5%;
-    --secondary-foreground: 0 0% 98%;
+    --accent-foreground: 210 40% 98%;
-
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
+    --destructive-foreground: 210 40% 98%;
-
+    --border: 217.2 32.6% 17.5%;
-    --border: 0 0% 14.9%;
+    --input: 217.2 32.6% 17.5%;
-    --input: 0 0% 14.9%;
+    --ring: 224.3 76.3% 48%;
-    --ring: 0 0% 83.1%;
   }
 }
 
+
 @layer base {
   * {
     @apply border-border;