diff --git a/.vscode/settings.json b/.vscode/settings.json index bc31e15..7b55faa 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,7 @@ { "files.associations": { "*.css": "tailwindcss" - } + }, + "typescript.enablePromptUseWorkspaceTsdk": true, + "typescript.tsdk": "node_modules/typescript/lib" } diff --git a/bun.lockb b/bun.lockb index 02e6815..4294014 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 228392e..f768ec1 100644 --- a/package.json +++ b/package.json @@ -15,12 +15,12 @@ "drizzle:migrate": "bun ./src/contrib/migrate.ts" }, "devDependencies": { - "@sveltejs/kit": "^2.5.21", - "@sveltejs/vite-plugin-svelte": "^3.1.1", + "@sveltejs/kit": "^2.5.22", + "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6", "@types/eslint": "^9.6.0", "autoprefixer": "^10.4.20", "bun-types": "^1.1.22", - "drizzle-kit": "^0.23.2", + "drizzle-kit": "^0.24.0", "eslint": "^9.9.0", "eslint-plugin-svelte": "^2.43.0", "globals": "^15.9.0", @@ -28,12 +28,12 @@ "prettier": "^3.3.3", "prettier-plugin-svelte": "^3.2.6", "prettier-plugin-tailwindcss": "^0.6.6", - "svelte": "^4.2.18", + "svelte": "^5.0.0-next.218", "svelte-adapter-bun": "^0.5.2", "svelte-check": "^3.8.5", "tailwindcss": "^3.4.9", - "typescript": "^5.5.4", - "typescript-eslint": "^8.0.1", + "typescript": "^5.6.0-dev.20240812", + "typescript-eslint": "^8.1.0", "vite": "^5.4.0" }, "type": "module", @@ -45,11 +45,11 @@ "dependencies": { "bits-ui": "^0.21.13", "clsx": "^2.1.1", - "drizzle-orm": "^0.32.2", - "lucide-svelte": "^0.424.0", + "drizzle-orm": "^0.33.0", + "lucide-svelte": "^0.427.0", "mode-watcher": "^0.4.1", "svelte-radix": "^1.1.0", - "tailwind-merge": "^2.5.0", + "tailwind-merge": "^2.5.2", "tailwind-variants": "^0.2.1" } } diff --git a/src/lib/components/headers/app-header.svelte b/src/lib/components/headers/app-header.svelte new file mode 100644 index 0000000..f78d4a9 --- /dev/null +++ b/src/lib/components/headers/app-header.svelte @@ -0,0 +1,24 @@ + + +
+
+
+ + + {APPLICATION_NAME} +
+ + +
+
diff --git a/src/lib/components/headers/index.ts b/src/lib/components/headers/index.ts new file mode 100644 index 0000000..30d808c --- /dev/null +++ b/src/lib/components/headers/index.ts @@ -0,0 +1,4 @@ +import Icons from "../../icons"; + +export const APPLICATION_NAME = "Jail Bird"; +export const APPLICATION_ICON = Icons.Lock; diff --git a/src/lib/components/headers/landing-header.svelte b/src/lib/components/headers/landing-header.svelte new file mode 100644 index 0000000..b31c542 --- /dev/null +++ b/src/lib/components/headers/landing-header.svelte @@ -0,0 +1,23 @@ + + +
+
+
+ + + {APPLICATION_NAME} +
+ + +
+
diff --git a/src/lib/components/main.svelte b/src/lib/components/main.svelte index b63e4ed..88a1249 100644 --- a/src/lib/components/main.svelte +++ b/src/lib/components/main.svelte @@ -1,3 +1,10 @@ + +
diff --git a/src/lib/components/theme-toggle.svelte b/src/lib/components/theme-toggle.svelte index 9dbd12b..232e082 100644 --- a/src/lib/components/theme-toggle.svelte +++ b/src/lib/components/theme-toggle.svelte @@ -8,6 +8,13 @@ import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js"; + + - setMode("light")} - class="data-[highlighted]:bg-destructive" - > + setMode("light")}> Light setMode("dark")}> diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte index 86827f3..a9143b3 100644 --- a/src/lib/components/ui/button/button.svelte +++ b/src/lib/components/ui/button/button.svelte @@ -1,25 +1,33 @@ + + - + {@render children()} diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts index 3a708f7..bf6d3f6 100644 --- a/src/lib/components/ui/button/index.ts +++ b/src/lib/components/ui/button/index.ts @@ -1,5 +1,6 @@ import type { Button as ButtonPrimitive } from "bits-ui"; import { type VariantProps, tv } from "tailwind-variants"; +import type { Snippet } from "svelte"; import Root from "./button.svelte"; const buttonVariants = tv({ @@ -34,6 +35,7 @@ type Size = VariantProps["size"]; type Props = ButtonPrimitive.Props & { variant?: Variant; size?: Size; + children: Snippet; }; type Events = ButtonPrimitive.Events; diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte index b28ba7b..03ee620 100644 --- a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte @@ -3,12 +3,14 @@ import Check from "lucide-svelte/icons/check"; import { cn } from "$lib/utils.js"; - type $$Props = DropdownMenuPrimitive.CheckboxItemProps; - type $$Events = DropdownMenuPrimitive.CheckboxItemEvents; + import type { CheckBoxItemProps } from "."; - let className: $$Props["class"] = undefined; - export let checked: $$Props["checked"] = undefined; - export { className as class }; + let { + class: className = undefined, + checked = $bindable(undefined), + children, + ...rest + }: CheckBoxItemProps = $props(); - + {@render children()} diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte index b10173c..581d50c 100644 --- a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte @@ -2,14 +2,16 @@ import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; import { cn, flyAndScale } from "$lib/utils.js"; - type $$Props = DropdownMenuPrimitive.ContentProps; - type $$Events = DropdownMenuPrimitive.ContentEvents; + import type { ContentProps } from "."; - let className: $$Props["class"] = undefined; - export let sideOffset: $$Props["sideOffset"] = 4; - export let transition: $$Props["transition"] = flyAndScale; - export let transitionConfig: $$Props["transitionConfig"] = undefined; - export { className as class }; + const { + class: className = undefined, + sideOffset = 4, + transition = flyAndScale, + transitionConfig = undefined, + children, + ...rest + }: ContentProps = $props(); - + {@render children()} diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte index 03aa634..7aad276 100644 --- a/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte @@ -2,14 +2,14 @@ import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; import { cn } from "$lib/utils.js"; - type $$Props = DropdownMenuPrimitive.ItemProps & { - inset?: boolean; - }; - type $$Events = DropdownMenuPrimitive.ItemEvents; + import type { ItemProps } from "."; - let className: $$Props["class"] = undefined; - export let inset: $$Props["inset"] = undefined; - export { className as class }; + const { + class: className = undefined, + inset = false, + children, + ...rest + }: ItemProps = $props(); - + {@render children()} diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte index 43f1527..68bfc0d 100644 --- a/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte @@ -2,18 +2,19 @@ import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; import { cn } from "$lib/utils.js"; - type $$Props = DropdownMenuPrimitive.LabelProps & { - inset?: boolean; - }; + import type { LabelProps } from "."; - let className: $$Props["class"] = undefined; - export let inset: $$Props["inset"] = undefined; - export { className as class }; + const { + class: className = undefined, + inset = false, + children, + ...rest + }: LabelProps = $props(); - + {@render children()} diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte index 1c74ae1..af915e0 100644 --- a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte @@ -1,11 +1,14 @@ - - + + {@render children()} diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte index d8e807b..b05b7bd 100644 --- a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte @@ -3,12 +3,14 @@ import Circle from "lucide-svelte/icons/circle"; import { cn } from "$lib/utils.js"; - type $$Props = DropdownMenuPrimitive.RadioItemProps; - type $$Events = DropdownMenuPrimitive.RadioItemEvents; + import type { RadioItemProps } from "."; - let className: $$Props["class"] = undefined; - export let value: $$Props["value"]; - export { className as class }; + let { + class: className = undefined, + value = $bindable(), + children, + ...rest + }: RadioItemProps = $props(); - + {@render children()} diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte index e14d078..2ebe304 100644 --- a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte @@ -2,13 +2,12 @@ import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; import { cn } from "$lib/utils.js"; - type $$Props = DropdownMenuPrimitive.SeparatorProps; + import type { SeparatorProps } from "."; - let className: $$Props["class"] = undefined; - export { className as class }; + const { class: className, ...rest }: SeparatorProps = $props(); diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte index 10f225b..dd118ca 100644 --- a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte @@ -1,16 +1,18 @@ - + {@render children()} diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte index 830ef2f..222d84c 100644 --- a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte @@ -2,16 +2,15 @@ import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; import { cn, flyAndScale } from "$lib/utils.js"; - type $$Props = DropdownMenuPrimitive.SubContentProps; - type $$Events = DropdownMenuPrimitive.SubContentEvents; + import type { SubContentProps } from "."; - let className: $$Props["class"] = undefined; - export let transition: $$Props["transition"] = flyAndScale; - export let transitionConfig: $$Props["transitionConfig"] = { - x: -10, - y: 0, - }; - export { className as class }; + const { + class: className = undefined, + transition = flyAndScale, + transitionConfig = { x: -10, y: 0 }, + children, + ...rest + }: SubContentProps = $props(); - + {@render children()} diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte index 62392e9..f390449 100644 --- a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte @@ -3,14 +3,14 @@ import ChevronRight from "lucide-svelte/icons/chevron-right"; import { cn } from "$lib/utils.js"; - type $$Props = DropdownMenuPrimitive.SubTriggerProps & { - inset?: boolean; - }; - type $$Events = DropdownMenuPrimitive.SubTriggerEvents; + import type { SubTriggerProps } from "."; - let className: $$Props["class"] = undefined; - export let inset: $$Props["inset"] = undefined; - export { className as class }; + const { + class: className = undefined, + inset = false, + children, + ...rest + }: SubTriggerProps = $props(); - + {@render children()} diff --git a/src/lib/components/ui/dropdown-menu/index.ts b/src/lib/components/ui/dropdown-menu/index.ts index c1749e9..657646b 100644 --- a/src/lib/components/ui/dropdown-menu/index.ts +++ b/src/lib/components/ui/dropdown-menu/index.ts @@ -1,4 +1,7 @@ import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; +import type { HTMLAttributes } from "svelte/elements"; +import type { Snippet } from "svelte"; + import Item from "./dropdown-menu-item.svelte"; import Label from "./dropdown-menu-label.svelte"; import Content from "./dropdown-menu-content.svelte"; @@ -15,6 +18,29 @@ const Root = DropdownMenuPrimitive.Root; const Trigger = DropdownMenuPrimitive.Trigger; const Group = DropdownMenuPrimitive.Group; +type ChildrenProp = { children: Snippet }; + +export type CheckBoxItemProps = DropdownMenuPrimitive.CheckboxItemProps & + ChildrenProp; +export type ContentProps = DropdownMenuPrimitive.ContentProps & ChildrenProp; +export type ItemProps = DropdownMenuPrimitive.ItemProps & { + inset?: boolean; +} & ChildrenProp; +export type LabelProps = DropdownMenuPrimitive.LabelProps & { + inset?: boolean; +} & ChildrenProp; +export type RadioGroupProps = DropdownMenuPrimitive.RadioGroupProps & + ChildrenProp; +export type RadioItemProps = DropdownMenuPrimitive.RadioItemProps & + ChildrenProp; +export type SeparatorProps = DropdownMenuPrimitive.SeparatorProps; // no children +export type ShortcutProps = HTMLAttributes & ChildrenProp; +export type SubContentProps = DropdownMenuPrimitive.SubContentProps & + ChildrenProp; +export type SubTriggerProps = DropdownMenuPrimitive.SubTriggerProps & { + inset?: boolean; +} & ChildrenProp; + export { Sub, Root, diff --git a/src/lib/icons/index.ts b/src/lib/icons/index.ts index 9096b63..24ce130 100644 --- a/src/lib/icons/index.ts +++ b/src/lib/icons/index.ts @@ -1,5 +1,5 @@ import Lock from "./lock.svelte"; export default { - lock: Lock, + Lock, }; diff --git a/src/lib/icons/lock.svelte b/src/lib/icons/lock.svelte index 3a9ca6a..6dce3c5 100644 --- a/src/lib/icons/lock.svelte +++ b/src/lib/icons/lock.svelte @@ -1,3 +1,9 @@ + + - import ThemeToggle from "@/theme-toggle.svelte"; + import AppHeader from "@/headers/app-header.svelte"; - import Icons from "$lib/icons"; - + import type { Snippet } from "svelte"; + + interface Props { + children: Snippet; + } -
-
-
- - Jail Bird -
+ const { children }: Props = $props(); + - -
- +
- + {@render children()}
- - diff --git a/src/routes/(app)/app/+page.svelte b/src/routes/(app)/app/+page.svelte index ed08677..0fe05bc 100644 --- a/src/routes/(app)/app/+page.svelte +++ b/src/routes/(app)/app/+page.svelte @@ -1,17 +1,20 @@ -

Welcome to SvelteKit

+
+

Welcome to SvelteKit

-

- Visit kit.svelte.dev - to read the documentation -

+

+ Visit kit.svelte.dev + to read the documentation +

- - + + +
diff --git a/src/routes/auth/login/+page.svelte b/src/routes/(auth)/login/+page.svelte similarity index 100% rename from src/routes/auth/login/+page.svelte rename to src/routes/(auth)/login/+page.svelte diff --git a/src/routes/(landing)/+layout.svelte b/src/routes/(landing)/+layout.svelte new file mode 100644 index 0000000..212fcac --- /dev/null +++ b/src/routes/(landing)/+layout.svelte @@ -0,0 +1,15 @@ + + + + +{@render children()} diff --git a/src/routes/+page.svelte b/src/routes/(landing)/+page.svelte similarity index 100% rename from src/routes/+page.svelte rename to src/routes/(landing)/+page.svelte diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index a5dedff..aa2f795 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,9 +1,17 @@ - +{@render children()} diff --git a/svelte.config.js b/svelte.config.js index 07ad643..f29ae3b 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -12,7 +12,7 @@ const config = { // If your environment is not supported, or you settled on a specific environment, switch out the adapter. // See https://kit.svelte.dev/docs/adapters for more information about adapters. adapter: adapter(), - // aliases, used primarily for properly setting up ther shadcn components + // aliases, used primarily for properly setting up the shadcn components alias: { "@": "./src/lib/components/*", },