Skip to content

Commit e7b7040

Browse files
ValentinuszValentinusz
committed
update
1 parent 297e1ad commit e7b7040

33 files changed

+900
-623
lines changed

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"dev": "vite",
88
"build": "vite build",
99
"preview": "vite preview",
10-
"check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
10+
"check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.json"
1111
},
1212
"packageManager": "yarn@1.22.22",
1313
"devDependencies": {
@@ -17,7 +17,6 @@
1717
"@types/node": "^22.10.7",
1818
"@xyflow/svelte": "^0.1.28",
1919
"autoprefixer": "^10.4.20",
20-
"bits-ui": "^0.22.0",
2120
"clsx": "^2.1.1",
2221
"eslint": "^9.18.0",
2322
"mode-watcher": "^0.5.0",
@@ -31,6 +30,7 @@
3130
"tailwindcss": "^3.4.9",
3231
"typescript": "~5.6.2",
3332
"typescript-eslint": "^8.20.0",
33+
"bits-ui": "^0.22.0",
3434
"vite": "^6.0.5"
3535
},
3636
"dependencies": {

‎src/App.svelte

+28-32
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,36 @@
11
<script lang="ts">
2-
import {Background, type ColorMode, Controls, MiniMap, SvelteFlow} from "@xyflow/svelte";
3-
import '@xyflow/svelte/dist/style.css';
4-
import {writable} from "svelte/store";
5-
import Navbar from "@/components/Navbar.svelte";
6-
import {Toaster} from "$lib/components/ui/sonner";
7-
import {toast} from "svelte-sonner";
8-
import {on} from "svelte/events";
2+
import "@xyflow/svelte/dist/style.css";
3+
import { Toaster } from "$lib/components/ui/sonner";
4+
import { toast } from "svelte-sonner";
5+
import { on } from "svelte/events";
6+
import { ModeWatcher } from "mode-watcher";
7+
import Navbar from "$/components/navbar/Navbar.svelte";
8+
import Sidebar from "$/components/sidebar/Sidebar.svelte";
9+
import BreakdownFlow from "$/components/flow/BreakdownFlow.svelte";
910
10-
let colorMode: ColorMode = 'dark';
11-
const nodes = writable([]);
12-
const edges = writable([]);
11+
$effect(() => {
12+
on(document, "keydown", (event: KeyboardEvent) => {
13+
event.preventDefault();
1314
14-
$effect(() => {
15-
on(document, 'keydown', (event: KeyboardEvent) => {
16-
event.preventDefault()
15+
if (event.ctrlKey && event.key === "s") {
16+
toast("Saved");
17+
}
18+
});
19+
});
1720
18-
if (event.ctrlKey && event.key === "s") {
19-
toast("Saved")
20-
}
21-
})
22-
})
23-
24-
$effect(() => {
25-
// setInterval(() => {
26-
// toast("Saved")
27-
// }, 5000)
28-
})
21+
$effect(() => {
22+
// setInterval(() => {
23+
// toast("Saved")
24+
// }, 5000)
25+
});
2926
3027
</script>
3128

32-
<main class="h-[100vh]">
33-
<Navbar/>
34-
<SvelteFlow {nodes} {edges} fitView>
35-
<Background/>
36-
<Controls/>
37-
<MiniMap/>
38-
</SvelteFlow>
39-
<Toaster/>
29+
<ModeWatcher />
30+
<Navbar />
31+
<main class="flex h-[95vh]">
32+
<Sidebar />
33+
<BreakdownFlow />
34+
<Toaster />
4035
</main>
36+

‎src/components/Navbar.svelte

-22
This file was deleted.

‎src/components/Sidebar.svelte

Whitespace-only changes.

‎src/components/flow/BreakdownFlow.svelte

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script lang="ts">
2+
import { Background, Controls, MiniMap } from "@xyflow/svelte";
3+
import ColorSchemeAwareFlow from "$/components/flow/ColorSchemeAwareFlow.svelte";
4+
import { nodes } from "$/state/nodes.state";
5+
import { edges } from "$/state/edges.state";
6+
7+
$inspect(nodes)
8+
9+
</script>
10+
11+
<ColorSchemeAwareFlow {nodes} {edges} fitView>
12+
<Background/>
13+
<Controls/>
14+
<MiniMap/>
15+
</ColorSchemeAwareFlow>

‎src/components/flow/ColorSchemeAwareFlow.svelte

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script lang="ts">
2+
import { type ColorMode, SvelteFlow, type SvelteFlowProps } from "@xyflow/svelte";
3+
import { mode } from "mode-watcher";
4+
5+
let colorMode: ColorMode = $derived($mode ?? "system");
6+
7+
const {children, ...rest}: SvelteFlowProps = $props()
8+
</script>
9+
10+
<SvelteFlow colorMode={colorMode} {...rest} >
11+
{@render children?.()}
12+
</SvelteFlow>

‎src/components/navbar/ColorSchemeToggleButton.svelte

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script lang="ts">
2+
import Sun from "lucide-svelte/icons/sun";
3+
import Moon from "lucide-svelte/icons/moon";
4+
5+
import { toggleMode, mode } from "mode-watcher";
6+
import { Button, type ButtonProps } from "$lib/components/ui/button";
7+
8+
const props: ButtonProps = $props()
9+
</script>
10+
11+
<Button on:click={toggleMode} variant="outline" size="icon" {...props}>
12+
<Sun
13+
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
14+
/>
15+
<Moon
16+
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
17+
/>
18+
<span class="sr-only">Toggle theme</span>
19+
</Button>
20+

‎src/components/navbar/Navbar.svelte

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts">
2+
import { Button } from "$lib/components/ui/button";
3+
import { Download, Upload } from "lucide-svelte";
4+
import ColorSchemeToggleButton from "$/components/navbar/ColorSchemeToggleButton.svelte";
5+
</script>
6+
7+
<nav class="flex gap-4 p-2 items-center border-b">
8+
<span class="font-semibold">Breakdown visualizer</span>
9+
10+
<ColorSchemeToggleButton class="ml-auto"/>
11+
12+
<Button>
13+
<Upload class="mr-2 h-4 w-4" />
14+
Import
15+
</Button>
16+
17+
<Button>
18+
<Download class="mr-2 h-4 w-4" />
19+
Export
20+
</Button>
21+
</nav>

‎src/components/sidebar/Sidebar.svelte

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script lang="ts">
2+
import { BookMarked, ChevronRight, Plus, Zap } from "lucide-svelte";
3+
import SidebarButton from "./SidebarButton.svelte";
4+
</script>
5+
6+
<section class="flex w-16 p-2 border-r flex-col items-center gap-2">
7+
<SidebarButton tooltip="New task">
8+
<Plus />
9+
</SidebarButton>
10+
<SidebarButton tooltip="New story">
11+
<BookMarked />
12+
</SidebarButton>
13+
<SidebarButton tooltip="New epic">
14+
<Zap />
15+
</SidebarButton>
16+
</section>

‎src/components/sidebar/SidebarButton.svelte

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script lang="ts">
2+
import { Button, type ButtonProps } from "$lib/components/ui/button";
3+
import { Bug } from "lucide-svelte";
4+
import type { Component, Snippet } from "svelte";
5+
import * as Tooltip from "$lib/components/ui/tooltip";
6+
import { nodes } from "$/state/nodes.state";
7+
8+
interface SidebarButtonProps {
9+
children: Snippet;
10+
tooltip: string;
11+
}
12+
13+
const { children, tooltip }: SidebarButtonProps = $props();
14+
15+
function handeClick() {
16+
nodes.update(nodes => {
17+
nodes.push({
18+
id: Math.random().toString(36).substr(2, 9),
19+
type: "input",
20+
data: { label: "Input Node" },
21+
position: { x: 0, y: 0 }
22+
}
23+
)
24+
25+
return nodes;
26+
});
27+
}
28+
29+
</script>
30+
31+
<Tooltip.Root>
32+
<Tooltip.Trigger>
33+
<Button size="icon" variant="outline" on:click={handeClick}>
34+
{@render children?.()}
35+
</Button>
36+
</Tooltip.Trigger>
37+
<Tooltip.Content>
38+
{tooltip}
39+
</Tooltip.Content>
40+
</Tooltip.Root>

‎src/lib/components/ui/menubar/index.ts

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { Menubar as MenubarPrimitive } from "bits-ui";
2+
3+
import Root from "./menubar.svelte";
4+
import CheckboxItem from "./menubar-checkbox-item.svelte";
5+
import Content from "./menubar-content.svelte";
6+
import Item from "./menubar-item.svelte";
7+
import Label from "./menubar-label.svelte";
8+
import RadioItem from "./menubar-radio-item.svelte";
9+
import Separator from "./menubar-separator.svelte";
10+
import Shortcut from "./menubar-shortcut.svelte";
11+
import SubContent from "./menubar-sub-content.svelte";
12+
import SubTrigger from "./menubar-sub-trigger.svelte";
13+
import Trigger from "./menubar-trigger.svelte";
14+
15+
const Menu = MenubarPrimitive.Menu;
16+
const Group = MenubarPrimitive.Group;
17+
const Sub = MenubarPrimitive.Sub;
18+
const RadioGroup = MenubarPrimitive.RadioGroup;
19+
20+
export {
21+
Root,
22+
CheckboxItem,
23+
Content,
24+
Item,
25+
Label,
26+
RadioItem,
27+
Separator,
28+
Shortcut,
29+
SubContent,
30+
SubTrigger,
31+
Trigger,
32+
Menu,
33+
Group,
34+
Sub,
35+
RadioGroup,
36+
//
37+
Root as Menubar,
38+
CheckboxItem as MenubarCheckboxItem,
39+
Content as MenubarContent,
40+
Item as MenubarItem,
41+
Label as MenubarLabel,
42+
RadioItem as MenubarRadioItem,
43+
Separator as MenubarSeparator,
44+
Shortcut as MenubarShortcut,
45+
SubContent as MenubarSubContent,
46+
SubTrigger as MenubarSubTrigger,
47+
Trigger as MenubarTrigger,
48+
Menu as MenubarMenu,
49+
Group as MenubarGroup,
50+
Sub as MenubarSub,
51+
RadioGroup as MenubarRadioGroup,
52+
};

‎src/lib/components/ui/menubar/menubar-checkbox-item.svelte

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script lang="ts">
2+
import { Menubar as MenubarPrimitive } from "bits-ui";
3+
import Check from "lucide-svelte/icons/check";
4+
import { cn } from "$lib/utils.js";
5+
6+
type $$Props = MenubarPrimitive.CheckboxItemProps;
7+
type $$Events = MenubarPrimitive.CheckboxItemEvents;
8+
9+
let className: $$Props["class"] = undefined;
10+
export let checked: $$Props["checked"] = false;
11+
export { className as class };
12+
</script>
13+
14+
<MenubarPrimitive.CheckboxItem
15+
bind:checked
16+
class={cn(
17+
"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
18+
className
19+
)}
20+
on:click
21+
on:keydown
22+
on:focusin
23+
on:focusout
24+
on:pointerleave
25+
on:pointermove
26+
on:pointerdown
27+
{...$$restProps}
28+
>
29+
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
30+
<MenubarPrimitive.CheckboxIndicator>
31+
<Check class="h-4 w-4" />
32+
</MenubarPrimitive.CheckboxIndicator>
33+
</span>
34+
<slot />
35+
</MenubarPrimitive.CheckboxItem>

‎src/lib/components/ui/menubar/menubar-content.svelte

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script lang="ts">
2+
import { Menubar as MenubarPrimitive } from "bits-ui";
3+
import { cn, flyAndScale } from "$lib/utils.js";
4+
5+
type $$Props = MenubarPrimitive.ContentProps;
6+
type $$Events = MenubarPrimitive.ContentEvents;
7+
8+
let className: $$Props["class"] = undefined;
9+
export let sideOffset: $$Props["sideOffset"] = 8;
10+
export let alignOffset: $$Props["alignOffset"] = -4;
11+
export let align: $$Props["align"] = "start";
12+
export let side: $$Props["side"] = "bottom";
13+
export let transition: $$Props["transition"] = flyAndScale;
14+
export let transitionConfig: $$Props["transitionConfig"] = undefined;
15+
export { className as class };
16+
</script>
17+
18+
<MenubarPrimitive.Content
19+
{transition}
20+
{transitionConfig}
21+
{sideOffset}
22+
{align}
23+
{alignOffset}
24+
{side}
25+
class={cn(
26+
"bg-popover text-popover-foreground z-50 min-w-[12rem] rounded-md border p-1 shadow-md focus:outline-none",
27+
className
28+
)}
29+
{...$$restProps}
30+
on:keydown
31+
>
32+
<slot />
33+
</MenubarPrimitive.Content>

0 commit comments

Comments
 (0)