npm - @jonsoc/web - Versions diffs - 1.1.34 - Mend

@jonsoc/web 1.1.34

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 (44) hide show

package/.env.example +3 -0
package/components.json +24 -0
package/index.html +13 -0
package/package.json +48 -0
package/public/apple-touch-icon-v3.png +1 -0
package/public/apple-touch-icon.png +1 -0
package/public/favicon-96x96-v3.png +1 -0
package/public/favicon-96x96.png +1 -0
package/public/favicon-v3.ico +1 -0
package/public/favicon-v3.svg +1 -0
package/public/favicon.ico +1 -0
package/public/favicon.svg +1 -0
package/public/robots.txt +6 -0
package/public/site.webmanifest +1 -0
package/public/social-share-zen.png +1 -0
package/public/social-share.png +1 -0
package/public/theme.json +183 -0
package/public/web-app-manifest-192x192.png +1 -0
package/public/web-app-manifest-512x512.png +1 -0
package/src/components/header.tsx +30 -0
package/src/components/loader.tsx +9 -0
package/src/components/mode-toggle.tsx +24 -0
package/src/components/sign-in-form.tsx +123 -0
package/src/components/sign-up-form.tsx +148 -0
package/src/components/theme-provider.tsx +8 -0
package/src/components/ui/button.tsx +51 -0
package/src/components/ui/card.tsx +72 -0
package/src/components/ui/checkbox.tsx +26 -0
package/src/components/ui/dropdown-menu.tsx +235 -0
package/src/components/ui/input.tsx +20 -0
package/src/components/ui/label.tsx +20 -0
package/src/components/ui/skeleton.tsx +7 -0
package/src/components/ui/sonner.tsx +39 -0
package/src/components/user-menu.tsx +50 -0
package/src/index.css +127 -0
package/src/lib/auth-client.ts +8 -0
package/src/lib/utils.ts +6 -0
package/src/main.tsx +42 -0
package/src/routeTree.gen.ts +77 -0
package/src/routes/__root.tsx +47 -0
package/src/routes/dashboard.tsx +39 -0
package/src/routes/index.tsx +46 -0
package/tsconfig.json +18 -0
package/vite.config.ts +17 -0

package/.env.example ADDED Viewed

@@ -0,0 +1,3 @@
+# Convex URLs
+VITE_CONVEX_URL=
+VITE_CONVEX_SITE_URL=

package/components.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-lyra",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>jonsoc</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,48 @@
+{
+  "name": "@jonsoc/web",
+  "version": "1.1.34",
+  "type": "module",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "serve": "vite preview",
+    "check-types": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@base-ui/react": "catalog:",
+    "@convex-dev/better-auth": "catalog:",
+    "@hookform/resolvers": "catalog:",
+    "@jonsoc/convex": "workspace:*",
+    "@jonsoc/env": "workspace:*",
+    "@tailwindcss/vite": "catalog:",
+    "@tanstack/react-form": "catalog:",
+    "@tanstack/react-router": "catalog:",
+    "better-auth": "catalog:",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "convex": "catalog:",
+    "lucide-react": "catalog:",
+    "next-themes": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "sonner": "catalog:",
+    "tailwind-merge": "^3.3.1",
+    "tw-animate-css": "^1.2.5",
+    "zod": "catalog:"
+  },
+  "devDependencies": {
+    "@jonsoc/config": "workspace:*",
+    "@tanstack/react-router-devtools": "catalog:",
+    "@tanstack/router-plugin": "catalog:",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:",
+    "vite": "catalog:"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/public/apple-touch-icon-v3.png ADDED Viewed

	@@ -0,0 +1 @@
1	+ ../../ui/src/assets/favicon/apple-touch-icon-v3.png

package/public/apple-touch-icon.png ADDED Viewed

	@@ -0,0 +1 @@
1	+ ../../ui/src/assets/favicon/apple-touch-icon.png

package/public/favicon-96x96-v3.png ADDED Viewed

	@@ -0,0 +1 @@
1	+ ../../ui/src/assets/favicon/favicon-96x96-v3.png

package/public/favicon-96x96.png ADDED Viewed

	@@ -0,0 +1 @@
1	+ ../../ui/src/assets/favicon/favicon-96x96.png

package/public/favicon-v3.ico ADDED Viewed

	@@ -0,0 +1 @@
1	+ ../../ui/src/assets/favicon/favicon-v3.ico

package/public/favicon-v3.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ ../../ui/src/assets/favicon/favicon-v3.svg

package/public/favicon.ico ADDED Viewed

	@@ -0,0 +1 @@
1	+ ../../ui/src/assets/favicon/favicon.ico

package/public/favicon.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ ../../ui/src/assets/favicon/favicon.svg

package/public/robots.txt ADDED Viewed

@@ -0,0 +1,6 @@
+User-agent: *
+Allow: /
+# Disallow shared content pages
+Disallow: /s/
+Disallow: /share/

package/public/site.webmanifest ADDED Viewed

	@@ -0,0 +1 @@
1	+ ../../ui/src/assets/favicon/site.webmanifest

package/public/social-share-zen.png ADDED Viewed

	@@ -0,0 +1 @@
1	+ ../../ui/src/assets/images/social-share-zen.png

package/public/social-share.png ADDED Viewed

	@@ -0,0 +1 @@
1	+ ../../ui/src/assets/images/social-share.png

package/public/theme.json ADDED Viewed

@@ -0,0 +1,183 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "$schema": {
+      "type": "string",
+      "description": "JSON schema reference for configuration validation"
+    },
+    "defs": {
+      "type": "object",
+      "description": "Color definitions that can be referenced in the theme",
+      "patternProperties": {
+        "^[a-zA-Z][a-zA-Z0-9_]*$": {
+          "oneOf": [
+            {
+              "type": "string",
+              "pattern": "^#[0-9a-fA-F]{6}$",
+              "description": "Hex color value"
+            },
+            {
+              "type": "integer",
+              "minimum": 0,
+              "maximum": 255,
+              "description": "ANSI color code (0-255)"
+            },
+            {
+              "type": "string",
+              "enum": ["none"],
+              "description": "No color (uses terminal default)"
+            }
+          ]
+        }
+      },
+      "additionalProperties": false
+    },
+    "theme": {
+      "type": "object",
+      "description": "Theme color definitions",
+      "properties": {
+        "primary": { "$ref": "#/definitions/colorValue" },
+        "secondary": { "$ref": "#/definitions/colorValue" },
+        "accent": { "$ref": "#/definitions/colorValue" },
+        "error": { "$ref": "#/definitions/colorValue" },
+        "warning": { "$ref": "#/definitions/colorValue" },
+        "success": { "$ref": "#/definitions/colorValue" },
+        "info": { "$ref": "#/definitions/colorValue" },
+        "text": { "$ref": "#/definitions/colorValue" },
+        "textMuted": { "$ref": "#/definitions/colorValue" },
+        "selectedListItemText": { "$ref": "#/definitions/colorValue" },
+        "background": { "$ref": "#/definitions/colorValue" },
+        "backgroundPanel": { "$ref": "#/definitions/colorValue" },
+        "backgroundElement": { "$ref": "#/definitions/colorValue" },
+        "border": { "$ref": "#/definitions/colorValue" },
+        "borderActive": { "$ref": "#/definitions/colorValue" },
+        "borderSubtle": { "$ref": "#/definitions/colorValue" },
+        "diffAdded": { "$ref": "#/definitions/colorValue" },
+        "diffRemoved": { "$ref": "#/definitions/colorValue" },
+        "diffContext": { "$ref": "#/definitions/colorValue" },
+        "diffHunkHeader": { "$ref": "#/definitions/colorValue" },
+        "diffHighlightAdded": { "$ref": "#/definitions/colorValue" },
+        "diffHighlightRemoved": { "$ref": "#/definitions/colorValue" },
+        "diffAddedBg": { "$ref": "#/definitions/colorValue" },
+        "diffRemovedBg": { "$ref": "#/definitions/colorValue" },
+        "diffContextBg": { "$ref": "#/definitions/colorValue" },
+        "diffLineNumber": { "$ref": "#/definitions/colorValue" },
+        "diffAddedLineNumberBg": { "$ref": "#/definitions/colorValue" },
+        "diffRemovedLineNumberBg": { "$ref": "#/definitions/colorValue" },
+        "markdownText": { "$ref": "#/definitions/colorValue" },
+        "markdownHeading": { "$ref": "#/definitions/colorValue" },
+        "markdownLink": { "$ref": "#/definitions/colorValue" },
+        "markdownLinkText": { "$ref": "#/definitions/colorValue" },
+        "markdownCode": { "$ref": "#/definitions/colorValue" },
+        "markdownBlockQuote": { "$ref": "#/definitions/colorValue" },
+        "markdownEmph": { "$ref": "#/definitions/colorValue" },
+        "markdownStrong": { "$ref": "#/definitions/colorValue" },
+        "markdownHorizontalRule": { "$ref": "#/definitions/colorValue" },
+        "markdownListItem": { "$ref": "#/definitions/colorValue" },
+        "markdownListEnumeration": { "$ref": "#/definitions/colorValue" },
+        "markdownImage": { "$ref": "#/definitions/colorValue" },
+        "markdownImageText": { "$ref": "#/definitions/colorValue" },
+        "markdownCodeBlock": { "$ref": "#/definitions/colorValue" },
+        "syntaxComment": { "$ref": "#/definitions/colorValue" },
+        "syntaxKeyword": { "$ref": "#/definitions/colorValue" },
+        "syntaxFunction": { "$ref": "#/definitions/colorValue" },
+        "syntaxVariable": { "$ref": "#/definitions/colorValue" },
+        "syntaxString": { "$ref": "#/definitions/colorValue" },
+        "syntaxNumber": { "$ref": "#/definitions/colorValue" },
+        "syntaxType": { "$ref": "#/definitions/colorValue" },
+        "syntaxOperator": { "$ref": "#/definitions/colorValue" },
+        "syntaxPunctuation": { "$ref": "#/definitions/colorValue" }
+      },
+      "required": ["primary", "secondary", "accent", "text", "textMuted", "background"],
+      "additionalProperties": false
+    }
+  },
+  "required": ["theme"],
+  "additionalProperties": false,
+  "definitions": {
+    "colorValue": {
+      "oneOf": [
+        {
+          "type": "string",
+          "pattern": "^#[0-9a-fA-F]{6}$",
+          "description": "Hex color value (same for dark and light)"
+        },
+        {
+          "type": "integer",
+          "minimum": 0,
+          "maximum": 255,
+          "description": "ANSI color code (0-255, same for dark and light)"
+        },
+        {
+          "type": "string",
+          "enum": ["none"],
+          "description": "No color (uses terminal default)"
+        },
+        {
+          "type": "string",
+          "pattern": "^[a-zA-Z][a-zA-Z0-9_]*$",
+          "description": "Reference to another color in the theme or defs"
+        },
+        {
+          "type": "object",
+          "properties": {
+            "dark": {
+              "oneOf": [
+                {
+                  "type": "string",
+                  "pattern": "^#[0-9a-fA-F]{6}$",
+                  "description": "Hex color value for dark mode"
+                },
+                {
+                  "type": "integer",
+                  "minimum": 0,
+                  "maximum": 255,
+                  "description": "ANSI color code for dark mode"
+                },
+                {
+                  "type": "string",
+                  "enum": ["none"],
+                  "description": "No color (uses terminal default)"
+                },
+                {
+                  "type": "string",
+                  "pattern": "^[a-zA-Z][a-zA-Z0-9_]*$",
+                  "description": "Reference to another color for dark mode"
+                }
+              ]
+            },
+            "light": {
+              "oneOf": [
+                {
+                  "type": "string",
+                  "pattern": "^#[0-9a-fA-F]{6}$",
+                  "description": "Hex color value for light mode"
+                },
+                {
+                  "type": "integer",
+                  "minimum": 0,
+                  "maximum": 255,
+                  "description": "ANSI color code for light mode"
+                },
+                {
+                  "type": "string",
+                  "enum": ["none"],
+                  "description": "No color (uses terminal default)"
+                },
+                {
+                  "type": "string",
+                  "pattern": "^[a-zA-Z][a-zA-Z0-9_]*$",
+                  "description": "Reference to another color for light mode"
+                }
+              ]
+            }
+          },
+          "required": ["dark", "light"],
+          "additionalProperties": false,
+          "description": "Separate colors for dark and light modes"
+        }
+      ]
+    }
+  }
+}

package/public/web-app-manifest-192x192.png ADDED Viewed

	@@ -0,0 +1 @@
1	+ ../../ui/src/assets/favicon/web-app-manifest-192x192.png

package/public/web-app-manifest-512x512.png ADDED Viewed

	@@ -0,0 +1 @@
1	+ ../../ui/src/assets/favicon/web-app-manifest-512x512.png

package/src/components/header.tsx ADDED Viewed

@@ -0,0 +1,30 @@
+import { Link } from "@tanstack/react-router"
+import { ModeToggle } from "./mode-toggle"
+export default function Header() {
+  const links = [
+    { to: "/", label: "Home" },
+    { to: "/dashboard", label: "Dashboard" },
+  ] as const
+  return (
+    <div>
+      <div className="flex flex-row items-center justify-between px-2 py-1">
+        <nav className="flex gap-4 text-lg">
+          {links.map(({ to, label }) => {
+            return (
+              <Link key={to} to={to}>
+                {label}
+              </Link>
+            )
+          })}
+        </nav>
+        <div className="flex items-center gap-2">
+          <ModeToggle />
+        </div>
+      </div>
+      <hr />
+    </div>
+  )
+}

package/src/components/loader.tsx ADDED Viewed

@@ -0,0 +1,9 @@
+import { Loader2 } from "lucide-react"
+export default function Loader() {
+  return (
+    <div className="flex h-full items-center justify-center pt-8">
+      <Loader2 className="animate-spin" />
+    </div>
+  )
+}

package/src/components/mode-toggle.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "@/components/theme-provider"
+import { Button } from "@/components/ui/button"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={<Button variant="outline" size="icon" />}>
+        <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+        <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+        <span className="sr-only">Toggle theme</span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/components/sign-in-form.tsx ADDED Viewed

@@ -0,0 +1,123 @@
+import { useForm } from "@tanstack/react-form"
+import { useNavigate } from "@tanstack/react-router"
+import { toast } from "sonner"
+import z from "zod"
+import { authClient } from "@/lib/auth-client"
+import { Button } from "./ui/button"
+import { Input } from "./ui/input"
+import { Label } from "./ui/label"
+export default function SignInForm({ onSwitchToSignUp }: { onSwitchToSignUp: () => void }) {
+  const navigate = useNavigate({
+    from: "/",
+  })
+  const form = useForm({
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+    onSubmit: async ({ value }) => {
+      await authClient.signIn.email(
+        {
+          email: value.email,
+          password: value.password,
+        },
+        {
+          onSuccess: () => {
+            navigate({
+              to: "/dashboard",
+            })
+            toast.success("Sign in successful")
+          },
+          onError: (error) => {
+            toast.error(error.error.message || error.error.statusText)
+          },
+        },
+      )
+    },
+    validators: {
+      onSubmit: z.object({
+        email: z.email("Invalid email address"),
+        password: z.string().min(8, "Password must be at least 8 characters"),
+      }),
+    },
+  })
+  return (
+    <div className="mx-auto w-full mt-10 max-w-md p-6">
+      <h1 className="mb-6 text-center text-3xl font-bold">Welcome Back</h1>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          form.handleSubmit()
+        }}
+        className="space-y-4"
+      >
+        <div>
+          <form.Field name="email">
+            {(field) => (
+              <div className="space-y-2">
+                <Label htmlFor={field.name}>Email</Label>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  type="email"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                {field.state.meta.errors.map((error) => (
+                  <p key={error?.message} className="text-red-500">
+                    {error?.message}
+                  </p>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </div>
+        <div>
+          <form.Field name="password">
+            {(field) => (
+              <div className="space-y-2">
+                <Label htmlFor={field.name}>Password</Label>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  type="password"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                {field.state.meta.errors.map((error) => (
+                  <p key={error?.message} className="text-red-500">
+                    {error?.message}
+                  </p>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </div>
+        <form.Subscribe>
+          {(state) => (
+            <Button type="submit" className="w-full" disabled={!state.canSubmit || state.isSubmitting}>
+              {state.isSubmitting ? "Submitting..." : "Sign In"}
+            </Button>
+          )}
+        </form.Subscribe>
+      </form>
+      <div className="mt-4 text-center">
+        <Button variant="link" onClick={onSwitchToSignUp} className="text-indigo-600 hover:text-indigo-800">
+          Need an account? Sign Up
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/components/sign-up-form.tsx ADDED Viewed

@@ -0,0 +1,148 @@
+import { useForm } from "@tanstack/react-form"
+import { useNavigate } from "@tanstack/react-router"
+import { toast } from "sonner"
+import z from "zod"
+import { authClient } from "@/lib/auth-client"
+import { Button } from "./ui/button"
+import { Input } from "./ui/input"
+import { Label } from "./ui/label"
+export default function SignUpForm({ onSwitchToSignIn }: { onSwitchToSignIn: () => void }) {
+  const navigate = useNavigate({
+    from: "/",
+  })
+  const form = useForm({
+    defaultValues: {
+      email: "",
+      password: "",
+      name: "",
+    },
+    onSubmit: async ({ value }) => {
+      await authClient.signUp.email(
+        {
+          email: value.email,
+          password: value.password,
+          name: value.name,
+        },
+        {
+          onSuccess: () => {
+            navigate({
+              to: "/dashboard",
+            })
+            toast.success("Sign up successful")
+          },
+          onError: (error) => {
+            toast.error(error.error.message || error.error.statusText)
+          },
+        },
+      )
+    },
+    validators: {
+      onSubmit: z.object({
+        name: z.string().min(2, "Name must be at least 2 characters"),
+        email: z.email("Invalid email address"),
+        password: z.string().min(8, "Password must be at least 8 characters"),
+      }),
+    },
+  })
+  return (
+    <div className="mx-auto w-full mt-10 max-w-md p-6">
+      <h1 className="mb-6 text-center text-3xl font-bold">Create Account</h1>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          form.handleSubmit()
+        }}
+        className="space-y-4"
+      >
+        <div>
+          <form.Field name="name">
+            {(field) => (
+              <div className="space-y-2">
+                <Label htmlFor={field.name}>Name</Label>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                {field.state.meta.errors.map((error) => (
+                  <p key={error?.message} className="text-red-500">
+                    {error?.message}
+                  </p>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </div>
+        <div>
+          <form.Field name="email">
+            {(field) => (
+              <div className="space-y-2">
+                <Label htmlFor={field.name}>Email</Label>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  type="email"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                {field.state.meta.errors.map((error) => (
+                  <p key={error?.message} className="text-red-500">
+                    {error?.message}
+                  </p>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </div>
+        <div>
+          <form.Field name="password">
+            {(field) => (
+              <div className="space-y-2">
+                <Label htmlFor={field.name}>Password</Label>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  type="password"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                {field.state.meta.errors.map((error) => (
+                  <p key={error?.message} className="text-red-500">
+                    {error?.message}
+                  </p>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </div>
+        <form.Subscribe>
+          {(state) => (
+            <Button type="submit" className="w-full" disabled={!state.canSubmit || state.isSubmitting}>
+              {state.isSubmitting ? "Submitting..." : "Sign Up"}
+            </Button>
+          )}
+        </form.Subscribe>
+      </form>
+      <div className="mt-4 text-center">
+        <Button variant="link" onClick={onSwitchToSignIn} className="text-indigo-600 hover:text-indigo-800">
+          Already have an account? Sign In
+        </Button>
+      </div>
+    </div>
+  )
+}