dumtruck/konobangu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: merge playground into webui

Browse Source
This commit is contained in:
master
2025-03-07 01:50:53 +08:00
parent 383e6340ea
commit 27cdcdef58
100 changed files with 4119 additions and 3757 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/webui/src/routes/404.tsx Normal file
View File

@@ -0,0 +1,6 @@
import { createFileRoute } from '@tanstack/solid-router';
import { AppNotFoundComponent } from '~/components/layout/app-not-found';
export const Route = createFileRoute('/404')({
component: AppNotFoundComponent,
});

12
apps/webui/src/routes/__root.tsx
View File

@@ -1,8 +1,12 @@
import { Outlet, createRootRouteWithContext } from '@tanstack/solid-router';
import type { RouterContext } from '../auth/context';
import { Home } from 'lucide-solid';
import type { RouteStateDataOption, RouterContext } from '~/traits/router';
export const Route = createRootRouteWithContext<RouterContext>()({
component: () => {
return <Outlet />;
},
component: Outlet,
staticData: {
breadcrumb: {
icon: Home,
},
} satisfies RouteStateDataOption,
});

14
apps/webui/src/routes/_app.tsx
View File

@@ -1,8 +1,16 @@
import { createFileRoute } from '@tanstack/solid-router';
import { Outlet, createFileRoute } from '@tanstack/solid-router';
import { beforeLoadGuard } from '~/auth/guard';
import { AppLayout } from '~/components/layout/app-layout';
import { AppAside } from '~/components/layout/app-layout';
export const Route = createFileRoute('/_app')({
component: AppLayout,
component: AppLayoutRoute,
beforeLoad: beforeLoadGuard,
});
function AppLayoutRoute() {
return (
<AppAside extractBreadcrumbFromRoutes>
<Outlet />
</AppAside>
);
}

10
apps/webui/src/routes/_app/explore.tsx
View File

@@ -1,9 +1,15 @@
import { createFileRoute } from '@tanstack/solid-router';
import type { RouteStateDataOption } from '~/traits/router';
export const Route = createFileRoute('/_app/explore')({
component: RouteComponent,
component: ExploreRouteComponent,
staticData: {
breadcrumb: {
label: 'Explore',
},
} satisfies RouteStateDataOption,
});
function RouteComponent() {
function ExploreRouteComponent() {
return <div>Hello "/_app/explore"!</div>;
}

54
apps/webui/src/routes/_app/playground/graphql-api.lazy.tsx Normal file
View File

@@ -0,0 +1,54 @@
import { type Fetcher, createGraphiQLFetcher } from '@graphiql/toolkit';
import { createLazyFileRoute } from '@tanstack/solid-router';
import GraphiQL from 'graphiql';
import React from 'react';
import { createRoot } from 'react-dom/client';
import { onCleanup, onMount } from 'solid-js';
import { isOidcAuth } from '~/auth/config';
import { useAuth } from '~/auth/hooks';
import 'graphiql/graphiql.css';
import { firstValueFrom } from 'rxjs';
export const Route = createLazyFileRoute('/_app/playground/graphql-api')({
component: PlaygroundGraphQLApiRouteComponent,
});
function PlaygroundGraphQLApiRouteComponent() {
const auth = useAuth();
let containerRef: HTMLDivElement | undefined;
onMount(() => {
if (containerRef) {
const reactRoot = createRoot(containerRef);
if (reactRoot) {
const fetcher: Fetcher = async (props) => {
const accessToken = isOidcAuth
? await firstValueFrom(auth.oidcSecurityService!.getAccessToken())
: undefined;
return createGraphiQLFetcher({
url: '/api/graphql',
headers: accessToken
? {
Authorization: `Bearer ${accessToken}`,
}
: undefined,
})(props);
};
const g = React.createElement(GraphiQL, {
fetcher,
});
reactRoot.render(g);
onCleanup(() => reactRoot.unmount());
}
}
});
return (
<div
data-id="graphiql-playground-container"
class="h-full"
ref={containerRef}
/>
);
}

11
apps/webui/src/routes/_app/playground/graphql-api.tsx
View File

@@ -1,9 +1,6 @@
import { createFileRoute } from '@tanstack/solid-router'
import { createFileRoute } from '@tanstack/solid-router';
import { buildLeafRouteStaticData } from '~/utils/route';
export const Route = createFileRoute('/_app/playground/graphql-api')({
component: RouteComponent,
})
function RouteComponent() {
return <div>Hello "/_app/playground/group-api"!</div>
}
staticData: buildLeafRouteStaticData({ title: 'GraphQL Api' }),
});

8
apps/webui/src/routes/_app/playground/route.tsx Normal file
View File

@@ -0,0 +1,8 @@
import { createFileRoute } from '@tanstack/solid-router';
import { buildVirtualBranchRouteOptions } from '~/utils/route';
export const Route = createFileRoute('/_app/playground')(
buildVirtualBranchRouteOptions({
title: 'Playground',
})
);

8
apps/webui/src/routes/_app/settings/route.tsx Normal file
View File

@@ -0,0 +1,8 @@
import { createFileRoute } from '@tanstack/solid-router';
import { buildVirtualBranchRouteOptions } from '~/utils/route';
export const Route = createFileRoute('/_app/settings')(
buildVirtualBranchRouteOptions({
title: 'Settings',
})
);

8
apps/webui/src/routes/_app/subscriptions/create.tsx
View File

@@ -1,9 +1,13 @@
import { createFileRoute } from '@tanstack/solid-router';
import type { RouteStateDataOption } from '~/traits/router';
export const Route = createFileRoute('/_app/subscriptions/create')({
component: RouteComponent,
component: SubscriptionCreateRouteComponent,
staticData: {
breadcrumb: { label: 'Create' },
} satisfies RouteStateDataOption,
});
function RouteComponent() {
function SubscriptionCreateRouteComponent() {
return <div>Hello "/subscriptions/create"!</div>;
}

15
apps/webui/src/routes/_app/subscriptions/edit.$subscription-id.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { createFileRoute } from '@tanstack/solid-router';
import type { RouteStateDataOption } from '~/traits/router';
export const Route = createFileRoute(
'/_app/subscriptions/edit/$subscription-id'
)({
component: RouteComponent,
staticData: {
breadcrumb: { label: 'Edit' },
} satisfies RouteStateDataOption,
});
function RouteComponent() {
return <div>Hello "/subscriptions/edit/$subscription-id"!</div>;
}

9
apps/webui/src/routes/_app/subscriptions/edit/$subscription-id.tsx
View File

@@ -1,9 +0,0 @@
import { createFileRoute } from '@tanstack/solid-router'
export const Route = createFileRoute('/_app/subscriptions/edit/$subscription-id')({
component: RouteComponent,
})
function RouteComponent() {
return <div>Hello "/subscriptions/edit/$subscription-id"!</div>
}

8
apps/webui/src/routes/_app/subscriptions/manage.tsx
View File

@@ -1,9 +1,13 @@
import { createFileRoute } from '@tanstack/solid-router';
import type { RouteStateDataOption } from '~/traits/router';
export const Route = createFileRoute('/_app/subscriptions/manage')({
component: SubscriptionDashboard,
component: SubscriptionManage,
staticData: {
breadcrumb: { label: 'Manage' },
} satisfies RouteStateDataOption,
});
function SubscriptionDashboard() {
function SubscriptionManage() {
return <div>Hello "/subscriptions/manage"!</div>;
}

8
apps/webui/src/routes/_app/subscriptions/route.tsx Normal file
View File

@@ -0,0 +1,8 @@
import { createFileRoute } from '@tanstack/solid-router';
import { buildVirtualBranchRouteOptions } from '~/utils/route';
export const Route = createFileRoute('/_app/subscriptions')(
buildVirtualBranchRouteOptions({
title: 'Subscriptions',
})
);

56
apps/webui/src/routes/index.tsx
View File

@@ -1,57 +1,15 @@
import { createFileRoute } from '@tanstack/solid-router';
import { AppSidebar } from '~/components/layout/app-sidebar';
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbSeparator,
} from '~/components/ui/breadcrumb';
import { Separator } from '~/components/ui/separator';
import {
SidebarInset,
SidebarProvider,
SidebarTrigger,
} from '~/components/ui/sidebar';
import { AppAside } from '~/components/layout/app-layout';
import { AppSkeleton } from '~/components/layout/app-skeleton';
export const Route = createFileRoute('/')({
component: Home,
beforeLoad: async () => {},
component: HomeRouteComponent,
});
function Home() {
function HomeRouteComponent() {
return (
<SidebarProvider>
<AppSidebar />
<SidebarInset>
<header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
<div class="flex items-center gap-2 px-4">
<SidebarTrigger class="-ml-1" />
<Separator orientation="vertical" class="mr-2 h-4" />
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem class="hidden md:block">
<BreadcrumbLink href="#">
Building Your Application
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator class="hidden md:block" />
<BreadcrumbItem>
<BreadcrumbLink current>Data Fetching</BreadcrumbLink>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
</header>
<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="aspect-video rounded-xl bg-muted/50" />
<div class="aspect-video rounded-xl bg-muted/50" />
<div class="aspect-video rounded-xl bg-muted/50" />
</div>
<div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
</div>
</SidebarInset>
</SidebarProvider>
<AppAside class="flex flex-1 flex-col gap-4" extractBreadcrumbFromRoutes>
<AppSkeleton />
</AppAside>
);
}