diff --git a/apps/recorder/package.json b/apps/recorder/package.json deleted file mode 100644 index 16efa0c..0000000 --- a/apps/recorder/package.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "name": "recorder", - "version": "1.0.0", - "type": "module", - "scripts": { - "dev": "rsbuild dev", - "build": "rsbuild build", - "preview": "rsbuild preview" - }, - "dependencies": { - "@graphiql/react": "^0.28.2", - "@graphiql/toolkit": "^0.11.1", - "graphiql": "^3.8.3", - "graphql-ws": "^6.0.4", - "observable-hooks": "^4.2.4", - "react": "^19.0.0", - "react-dom": "^19.0.0" - }, - "devDependencies": { - "@rsbuild/plugin-react": "^1.1.1", - "@types/react": "^19.0.7", - "@types/react-dom": "^19.0.3" - } -} diff --git a/apps/recorder/postcss.config.mjs b/apps/recorder/postcss.config.mjs deleted file mode 100644 index 8dc11a1..0000000 --- a/apps/recorder/postcss.config.mjs +++ /dev/null @@ -1,5 +0,0 @@ -export default { - plugins: { - '@tailwindcss/postcss': {}, - }, -}; diff --git a/apps/recorder/public/assets/favicon.ico b/apps/recorder/public/assets/favicon.ico deleted file mode 120000 index 94c6ee0..0000000 --- a/apps/recorder/public/assets/favicon.ico +++ /dev/null @@ -1 +0,0 @@ -../../../../assets/favicon.ico \ No newline at end of file diff --git a/apps/recorder/rsbuild.config.ts b/apps/recorder/rsbuild.config.ts deleted file mode 100644 index 0d1581f..0000000 --- a/apps/recorder/rsbuild.config.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { defineConfig } from '@rsbuild/core'; -import { pluginReact } from '@rsbuild/plugin-react'; -import { TanStackRouterRspack } from '@tanstack/router-plugin/rspack'; - -export default defineConfig({ - plugins: [pluginReact()], - html: { - favicon: './public/assets/favicon.ico', - // tags: [ - // { - // tag: 'script', - // attrs: { src: 'https://cdn.tailwindcss.com' }, - // }, - // ], - }, - tools: { - rspack: { - plugins: [TanStackRouterRspack()], - }, - }, - source: { - entry: { - index: './src/main.tsx', - }, - define: { - 'process.env.AUTH_TYPE': JSON.stringify(process.env.AUTH_TYPE), - 'process.env.OIDC_CLIENT_ID': JSON.stringify(process.env.OIDC_CLIENT_ID), - 'process.env.OIDC_CLIENT_SECRET': JSON.stringify( - process.env.OIDC_CLIENT_SECRET - ), - 'process.env.OIDC_ISSUER': JSON.stringify(process.env.OIDC_ISSUER), - 'process.env.OIDC_AUDIENCE': JSON.stringify(process.env.OIDC_AUDIENCE), - 'process.env.OIDC_EXTRA_SCOPES': JSON.stringify( - process.env.OIDC_EXTRA_SCOPES - ), - }, - }, - dev: { - client: { - path: '/api/playground/rsbuild-hmr', - }, - setupMiddlewares: [ - (middlewares) => { - middlewares.unshift((req, res, next) => { - if (process.env.AUTH_TYPE === 'basic') { - res.setHeader('WWW-Authenticate', 'Basic realm="konobangu"'); - - const authorization = - (req.headers.authorization || '').split(' ')[1] || ''; - const [user, password] = Buffer.from(authorization, 'base64') - .toString() - .split(':'); - - if ( - user !== process.env.BASIC_USER || - password !== process.env.BASIC_PASSWORD - ) { - res.statusCode = 401; - res.write('Unauthorized'); - res.end(); - return; - } - } - next(); - }); - return middlewares; - }, - ], - }, - server: { - base: '/api/playground/', - host: '0.0.0.0', - port: 5002, - }, -}); diff --git a/apps/recorder/src/env.d.ts b/apps/recorder/src/env.d.ts deleted file mode 100644 index b0ac762..0000000 --- a/apps/recorder/src/env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/apps/recorder/src/main.css b/apps/recorder/src/main.css deleted file mode 100644 index f1d8c73..0000000 --- a/apps/recorder/src/main.css +++ /dev/null @@ -1 +0,0 @@ -@import "tailwindcss"; diff --git a/apps/recorder/src/main.tsx b/apps/recorder/src/main.tsx deleted file mode 100644 index 48f3b2a..0000000 --- a/apps/recorder/src/main.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import '@abraham/reflection'; -import { type Injector, ReflectiveInjector } from '@outposts/injection-js'; -import { RouterProvider, createRouter } from '@tanstack/react-router'; -import { - OidcSecurityService, - provideAuth, - withCheckAuthResultEvent, - withDefaultFeatures, -} from 'oidc-client-rx'; -import { withTanstackRouter } from 'oidc-client-rx/adapters/@tanstack/react-router'; -import { - InjectorContextVoidInjector, - InjectorProvider, -} from 'oidc-client-rx/adapters/react'; -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import { buildOidcConfig, isBasicAuth } from './auth/config'; -import { useAuth } from './auth/hooks'; -import { routeTree } from './routeTree.gen'; -import './main.css'; - -const router = createRouter({ - routeTree, - basepath: '/api/playground', - defaultPreload: 'intent', - context: { - isAuthenticated: isBasicAuth, - injector: InjectorContextVoidInjector, - oidcSecurityService: {} as OidcSecurityService, - }, -}); - -// Register things for typesafety -declare module '@tanstack/react-router' { - interface Register { - router: typeof router; - } -} - -const injector: Injector = isBasicAuth - ? ReflectiveInjector.resolveAndCreate([]) - : ReflectiveInjector.resolveAndCreate( - provideAuth( - { - config: buildOidcConfig(), - }, - withDefaultFeatures({ - router: { enabled: false }, - securityStorage: { type: 'local-storage' }, - }), - withTanstackRouter(router), - withCheckAuthResultEvent() - ) - ); - -// if needed, check when init -let oidcSecurityService: OidcSecurityService | undefined; -if (!isBasicAuth) { - oidcSecurityService = injector.get(OidcSecurityService); - oidcSecurityService.checkAuth().subscribe(); -} - -const AppWithBasicAuth = () => { - return ; -}; - -const AppWithOidcAuth = () => { - const { isAuthenticated, oidcSecurityService, injector } = useAuth(); - return ( - - ); -}; - -const App = isBasicAuth ? AppWithBasicAuth : AppWithOidcAuth; - -const rootEl = document.getElementById('root'); - -if (rootEl) { - rootEl.classList.add('min-h-svh'); - const root = ReactDOM.createRoot(rootEl); - - root.render( - - - - - - ); -} diff --git a/apps/recorder/src/routeTree.gen.ts b/apps/recorder/src/routeTree.gen.ts deleted file mode 100644 index 86ba191..0000000 --- a/apps/recorder/src/routeTree.gen.ts +++ /dev/null @@ -1,134 +0,0 @@ -/* eslint-disable */ - -// @ts-nocheck - -// noinspection JSUnusedGlobalSymbols - -// This file was automatically generated by TanStack Router. -// You should NOT make any changes in this file as it will be overwritten. -// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified. - -// Import Routes - -import { Route as rootRoute } from './web/controller/__root' -import { Route as IndexImport } from './web/controller/index' -import { Route as GraphqlIndexImport } from './web/controller/graphql/index' -import { Route as OidcCallbackImport } from './web/controller/oidc/callback' - -// Create/Update Routes - -const IndexRoute = IndexImport.update({ - id: '/', - path: '/', - getParentRoute: () => rootRoute, -} as any) - -const GraphqlIndexRoute = GraphqlIndexImport.update({ - id: '/graphql/', - path: '/graphql/', - getParentRoute: () => rootRoute, -} as any) - -const OidcCallbackRoute = OidcCallbackImport.update({ - id: '/oidc/callback', - path: '/oidc/callback', - getParentRoute: () => rootRoute, -} as any) - -// Populate the FileRoutesByPath interface - -declare module '@tanstack/react-router' { - interface FileRoutesByPath { - '/': { - id: '/' - path: '/' - fullPath: '/' - preLoaderRoute: typeof IndexImport - parentRoute: typeof rootRoute - } - '/oidc/callback': { - id: '/oidc/callback' - path: '/oidc/callback' - fullPath: '/oidc/callback' - preLoaderRoute: typeof OidcCallbackImport - parentRoute: typeof rootRoute - } - '/graphql/': { - id: '/graphql/' - path: '/graphql' - fullPath: '/graphql' - preLoaderRoute: typeof GraphqlIndexImport - parentRoute: typeof rootRoute - } - } -} - -// Create and export the route tree - -export interface FileRoutesByFullPath { - '/': typeof IndexRoute - '/oidc/callback': typeof OidcCallbackRoute - '/graphql': typeof GraphqlIndexRoute -} - -export interface FileRoutesByTo { - '/': typeof IndexRoute - '/oidc/callback': typeof OidcCallbackRoute - '/graphql': typeof GraphqlIndexRoute -} - -export interface FileRoutesById { - __root__: typeof rootRoute - '/': typeof IndexRoute - '/oidc/callback': typeof OidcCallbackRoute - '/graphql/': typeof GraphqlIndexRoute -} - -export interface FileRouteTypes { - fileRoutesByFullPath: FileRoutesByFullPath - fullPaths: '/' | '/oidc/callback' | '/graphql' - fileRoutesByTo: FileRoutesByTo - to: '/' | '/oidc/callback' | '/graphql' - id: '__root__' | '/' | '/oidc/callback' | '/graphql/' - fileRoutesById: FileRoutesById -} - -export interface RootRouteChildren { - IndexRoute: typeof IndexRoute - OidcCallbackRoute: typeof OidcCallbackRoute - GraphqlIndexRoute: typeof GraphqlIndexRoute -} - -const rootRouteChildren: RootRouteChildren = { - IndexRoute: IndexRoute, - OidcCallbackRoute: OidcCallbackRoute, - GraphqlIndexRoute: GraphqlIndexRoute, -} - -export const routeTree = rootRoute - ._addFileChildren(rootRouteChildren) - ._addFileTypes() - -/* ROUTE_MANIFEST_START -{ - "routes": { - "__root__": { - "filePath": "__root.tsx", - "children": [ - "/", - "/oidc/callback", - "/graphql/" - ] - }, - "/": { - "filePath": "index.tsx" - }, - "/oidc/callback": { - "filePath": "oidc/callback.tsx" - }, - "/graphql/": { - "filePath": "graphql/index.tsx" - } - } -} -ROUTE_MANIFEST_END */ diff --git a/apps/recorder/src/web/controller/__root.tsx b/apps/recorder/src/web/controller/__root.tsx deleted file mode 100644 index 6a892f1..0000000 --- a/apps/recorder/src/web/controller/__root.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import type { Injector } from '@outposts/injection-js'; -import { - Outlet, - createRootRouteWithContext, -} from '@tanstack/react-router'; -import { TanStackRouterDevtools } from '@tanstack/router-devtools'; -import type { OidcSecurityService } from 'oidc-client-rx'; - -export type RouterContext = - | { - isAuthenticated: false; - injector: Injector; - oidcSecurityService: OidcSecurityService; - } - | { - isAuthenticated: true; - injector?: Injector; - oidcSecurityService?: OidcSecurityService; - }; - -export const Route = createRootRouteWithContext()({ - component: RootComponent, -}); - -function RootComponent() { - return ( - <> - - - - ); -} diff --git a/apps/recorder/src/web/controller/graphql/index.tsx b/apps/recorder/src/web/controller/graphql/index.tsx deleted file mode 100644 index 9e0ed9c..0000000 --- a/apps/recorder/src/web/controller/graphql/index.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { type Fetcher, createGraphiQLFetcher } from '@graphiql/toolkit'; -import { createFileRoute } from '@tanstack/react-router'; -import GraphiQL from 'graphiql'; -import { useMemo } from 'react'; -import { firstValueFrom } from 'rxjs'; -import { beforeLoadGuard } from '../../../auth/guard'; -import { useAuth } from '../../../auth/hooks'; -import 'graphiql/graphiql.css'; - -export const Route = createFileRoute('/graphql/')({ - component: RouteComponent, - beforeLoad: beforeLoadGuard, -}); - -function RouteComponent() { - const { oidcSecurityService } = useAuth(); - - const fetcher = useMemo( - (): Fetcher => async (props) => { - const accessToken = oidcSecurityService - ? await firstValueFrom(oidcSecurityService.getAccessToken()) - : undefined; - return createGraphiQLFetcher({ - url: '/api/graphql', - headers: accessToken - ? { - Authorization: `Bearer ${accessToken}`, - } - : undefined, - })(props); - }, - [oidcSecurityService] - ); - - return ; -} diff --git a/apps/recorder/src/web/controller/index.tsx b/apps/recorder/src/web/controller/index.tsx deleted file mode 100644 index 1731659..0000000 --- a/apps/recorder/src/web/controller/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { createFileRoute } from '@tanstack/react-router' - -export const Route = createFileRoute('/')({ - component: RouteComponent, -}) - -function RouteComponent() { - return
Hello to playground!
-} diff --git a/apps/recorder/src/web/controller/oidc/callback.tsx b/apps/recorder/src/web/controller/oidc/callback.tsx deleted file mode 100644 index 5ad6f3d..0000000 --- a/apps/recorder/src/web/controller/oidc/callback.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { createFileRoute, redirect } from '@tanstack/react-router'; -import { EventTypes } from 'oidc-client-rx'; -import { useAuth } from '../../../auth/hooks'; - -export const Route = createFileRoute('/oidc/callback')({ - component: RouteComponent, - beforeLoad: ({ context }) => { - if (!context.oidcSecurityService) { - throw redirect({ - to: '/', - }); - } - }, -}); - -function RouteComponent() { - const auth = useAuth(); - - if (!auth.checkAuthResultEvent) { - return
Loading...
; - } - - return ( -
- OpenID Connect Auth Callback:{' '} - {auth.checkAuthResultEvent?.type === - EventTypes.CheckingAuthFinishedWithError - ? auth.checkAuthResultEvent.value - : 'success'} -
- ); -} diff --git a/apps/recorder/tsconfig.json b/apps/recorder/tsconfig.json deleted file mode 100644 index d254fee..0000000 --- a/apps/recorder/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "rootDir": ".", - "composite": true, - "jsx": "react-jsx", - "module": "ESNext", - "moduleResolution": "Bundler", - "experimentalDecorators": true, - "emitDecoratorMetadata": true, - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true - }, - "include": ["src"] -} diff --git a/apps/recorder/tsr.config.json b/apps/recorder/tsr.config.json deleted file mode 100644 index e428e86..0000000 --- a/apps/recorder/tsr.config.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "routesDirectory": "./src/web/controller", - "generatedRouteTree": "./src/routeTree.gen.ts" -} diff --git a/apps/webui/package.json b/apps/webui/package.json index 72da532..e829ff9 100644 --- a/apps/webui/package.json +++ b/apps/webui/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@ark-ui/solid": "^4.10.2", - "@codemirror/language": "^6.10.8", + "@codemirror/language": "6.0.0", "@corvu/drawer": "^0.2.3", "@corvu/otp-field": "^0.1.4", "@corvu/resizable": "^0.2.4", @@ -26,14 +26,35 @@ "embla-carousel-solid": "^8.5.2", "graphiql": "^3.8.3", "lucide-solid": "^0.477.0", - "react": "^18", - "react-dom": "^18", + "react": "^18.0.0", + "react-dom": "^18.0.0", "solid-js": "^1.9.5", "solid-sonner": "^0.2.8", - "tailwindcss": "^3" + "tailwindcss": "^3.4.17", + "tailwind-merge": "^3.0.2", + "tailwindcss-animate": "^1.0.7", + "@tanstack/react-router": "^1.112.0", + "@tanstack/router-devtools": "^1.112.6", + "class-variance-authority": "^0.7.1", + "@abraham/reflection": "^0.12.0", + "@outposts/injection-js": "^2.5.1", + "arktype": "^2.1.2", + "clsx": "^2.1.1", + "oidc-client-rx": "0.1.0-alpha.8", + "rxjs": "^7.8.2" }, "devDependencies": { + "@rsbuild/core": "^1.2.14", + "@rsbuild/plugin-babel": "^1.0.4", + "chalk": "^5.4.1", + "commander": "^13.1.0", + "postcss": "^8.5.3", "@rsbuild/plugin-solid": "^1.0.5", - "@tanstack/react-router": "^1.112.0" + "@tanstack/react-router": "^1.112.0", + "@types/react": "^18.0.0", + "@types/react-dom": "^18.0.0", + "@tailwindcss/postcss": "^4.0.9", + "@tanstack/router-devtools": "^1.112.6", + "@tanstack/router-plugin": "^1.112.3" } } diff --git a/apps/webui/rsbuild.config.ts b/apps/webui/rsbuild.config.ts index e37dc29..78d34b8 100644 --- a/apps/webui/rsbuild.config.ts +++ b/apps/webui/rsbuild.config.ts @@ -5,6 +5,7 @@ import { TanStackRouterRspack } from '@tanstack/router-plugin/rspack'; export default defineConfig({ html: { + title: 'Konobangu', favicon: './public/assets/favicon.ico', }, plugins: [ diff --git a/apps/webui/src/auth/config.ts b/apps/webui/src/auth/config.ts index d14b5b2..1e5c00f 100644 --- a/apps/webui/src/auth/config.ts +++ b/apps/webui/src/auth/config.ts @@ -1,6 +1,7 @@ import { LogLevel, type OpenIdConfiguration } from 'oidc-client-rx'; export const isBasicAuth = process.env.AUTH_TYPE === 'basic'; +export const isOidcAuth = process.env.AUTH_TYPE === 'oidc'; export function buildOidcConfig(): OpenIdConfiguration { const origin = window.location.origin; diff --git a/apps/webui/src/auth/context.ts b/apps/webui/src/auth/context.ts index 320e7d4..e683480 100644 --- a/apps/webui/src/auth/context.ts +++ b/apps/webui/src/auth/context.ts @@ -1,12 +1,4 @@ -import type { Injector } from '@outposts/injection-js'; -import type { OidcSecurityService } from 'oidc-client-rx'; -import { type Accessor, createSignal } from 'solid-js'; +import { createSignal } from 'solid-js'; import { isBasicAuth } from './config'; export const [isAuthenticated, setIsAuthenticated] = createSignal(isBasicAuth); - -export type RouterContext = { - isAuthenticated: Accessor; - injector: Injector; - oidcSecurityService: OidcSecurityService; -}; diff --git a/apps/webui/src/auth/guard.ts b/apps/webui/src/auth/guard.ts index e7e6160..f5a37bf 100644 --- a/apps/webui/src/auth/guard.ts +++ b/apps/webui/src/auth/guard.ts @@ -1,7 +1,7 @@ import { runInInjectionContext } from '@outposts/injection-js'; import { autoLoginPartialRoutesGuard } from 'oidc-client-rx'; import { firstValueFrom } from 'rxjs'; -import type { RouterContext } from './context'; +import type { RouterContext } from '~/traits/router'; export const beforeLoadGuard = async ({ context, diff --git a/apps/webui/src/auth/hooks.ts b/apps/webui/src/auth/hooks.ts index cef921e..dd12229 100644 --- a/apps/webui/src/auth/hooks.ts +++ b/apps/webui/src/auth/hooks.ts @@ -5,7 +5,7 @@ import { } from 'oidc-client-rx/adapters/solid-js'; import { NEVER, of } from 'rxjs'; import { createMemo, from } from 'solid-js'; -import { isBasicAuth } from './config'; +import { isBasicAuth, isOidcAuth } from './config'; const BASIC_AUTH_IS_AUTHENTICATED$ = of({ isAuthenticated: true, @@ -17,11 +17,10 @@ const BASIC_AUTH_USER_DATA$ = of({ allUserData: [], }); +const useOidcClientExt = isOidcAuth ? useOidcClient : () => ({ oidcSecurityService: undefined, injector: InjectorContextVoidInjector }) + export function useAuth() { - const { oidcSecurityService, injector } = isBasicAuth - ? { oidcSecurityService: undefined, injector: InjectorContextVoidInjector } - : // biome-ignore lint/correctness/useHookAtTopLevel: - useOidcClient(); + const { oidcSecurityService, injector } = useOidcClientExt(); const isAuthenticatedObj = from( oidcSecurityService?.isAuthenticated$ ?? BASIC_AUTH_IS_AUTHENTICATED$ diff --git a/apps/webui/src/components/layout/app-layout.tsx b/apps/webui/src/components/layout/app-layout.tsx index 958275a..e2df074 100644 --- a/apps/webui/src/components/layout/app-layout.tsx +++ b/apps/webui/src/components/layout/app-layout.tsx @@ -1,4 +1,13 @@ -import { Outlet } from '@tanstack/solid-router'; +import { useMatches } from '@tanstack/solid-router'; +import { + type ComponentProps, + type FlowProps, + For, + Show, + createMemo, + splitProps, +} from 'solid-js'; +import { Dynamic } from 'solid-js/web'; import { AppSidebar } from '~/components/layout/app-sidebar'; import { Breadcrumb, @@ -13,8 +22,55 @@ import { SidebarProvider, SidebarTrigger, } from '~/components/ui/sidebar'; +import type { RouteStateDataOption } from '~/traits/router'; +import type { RouteBreadcrumbItem } from '~/traits/router'; +import { cn } from '~/utils/styles'; +import { ProLink } from '../ui/pro-link'; + +export type AppAsideBreadcrumbItem = RouteBreadcrumbItem; +export interface AppAsideProps extends FlowProps> { + breadcrumb?: AppAsideBreadcrumbItem[]; + extractBreadcrumbFromRoutes?: boolean; +} + +export function AppAside(props: AppAsideProps) { + const [local, other] = splitProps(props, [ + 'children', + 'class', + 'breadcrumb', + 'extractBreadcrumbFromRoutes', + ]); + + const matches = useMatches(); + + const breadcrumb = createMemo(() => { + if (local.breadcrumb) { + return local.breadcrumb; + } + if (local.extractBreadcrumbFromRoutes) { + return matches() + .map((m, i, arr) => { + const staticData = m.staticData as RouteStateDataOption; + if (staticData.breadcrumb) { + return { + link: + i + 1 >= arr.length + ? undefined + : { + to: m.pathname, + }, + ...staticData.breadcrumb, + } as AppAsideBreadcrumbItem; + } + return undefined; + }) + .filter((b): b is AppAsideBreadcrumbItem => !!b); + } + return []; + }); + + const breadcrumbLength = breadcrumb().length; -export function AppLayout() { return ( @@ -22,24 +78,47 @@ export function AppLayout() {
- - - - - - + + + + + + {(item, index) => { + const iconEl = ( + + + + ); + + const isCurrent = index() + 1 === breadcrumbLength; + + return ( + <> + {index() > 0 && ( + + + +
-
- +
+ {local.children}
diff --git a/apps/webui/src/components/layout/app-not-found.tsx b/apps/webui/src/components/layout/app-not-found.tsx new file mode 100644 index 0000000..68d961d --- /dev/null +++ b/apps/webui/src/components/layout/app-not-found.tsx @@ -0,0 +1,43 @@ +import { + type AnyRoute, + type ParsedLocation, + redirect, +} from '@tanstack/solid-router'; +import { ProLink } from '../ui/pro-link'; + +export function guardRouteIndexAsNotFound( + this: AnyRoute, + { location }: { location: ParsedLocation } +) { + // biome-ignore lint/performance/useTopLevelRegex: + if (location.pathname.replace(/\/+$/, '') === this.id) { + throw redirect({ + href: '/404', + replace: true, + reloadDocument: true, + }); + } +} + +export function AppNotFoundComponent() { + return ( +
+
+
+

+ 404 Page Not Found +

+

+ Sorry, we couldn't find the page you're looking for. +

+
+ + Return to website + +
+
+ ); +} diff --git a/apps/webui/src/components/layout/app-sidebar.tsx b/apps/webui/src/components/layout/app-sidebar.tsx index 611a536..ba5ffa9 100644 --- a/apps/webui/src/components/layout/app-sidebar.tsx +++ b/apps/webui/src/components/layout/app-sidebar.tsx @@ -1,6 +1,5 @@ import { BookOpen, - Bot, Folders, Settings2, SquareTerminal, @@ -52,40 +51,16 @@ const navMain = [ }, { title: 'Playground', - href: '#', icon: SquareTerminal, - isActive: true, - items: [ + link: { + to: '/playground', + }, + children: [ { - title: 'History', - href: '#', - }, - { - title: 'Starred', - href: '#', - }, - { - title: 'Settings', - href: '#', - }, - ], - }, - { - title: 'Models', - href: '#', - icon: Bot, - items: [ - { - title: 'Genesis', - href: '#', - }, - { - title: 'Explorer', - href: '#', - }, - { - title: 'Quantum', - href: '#', + title: 'GraphQL Api', + link: { + to: '/playground/graphql-api', + }, }, ], }, @@ -99,24 +74,16 @@ const navMain = [ }, { title: 'Settings', - href: '#', + link: { + to: '/settings', + }, icon: Settings2, - items: [ + children: [ { - title: 'General', - href: '#', - }, - { - title: 'Team', - href: '#', - }, - { - title: 'Billing', - href: '#', - }, - { - title: 'Limits', - href: '#', + title: 'Downloader', + link: { + to: '/settings/downloader', + }, }, ], }, diff --git a/apps/webui/src/components/layout/app-skeleton.tsx b/apps/webui/src/components/layout/app-skeleton.tsx new file mode 100644 index 0000000..052081f --- /dev/null +++ b/apps/webui/src/components/layout/app-skeleton.tsx @@ -0,0 +1,12 @@ +export function AppSkeleton() { + return ( + <> +
+
+
+
+
+
+ + ); +} diff --git a/apps/webui/src/components/ui/accordion.tsx b/apps/webui/src/components/ui/accordion.tsx index 2c00fad..9222210 100644 --- a/apps/webui/src/components/ui/accordion.tsx +++ b/apps/webui/src/components/ui/accordion.tsx @@ -1,40 +1,45 @@ -import type { JSX, ValidComponent } from "solid-js" -import { splitProps } from "solid-js" +import type { JSX, ValidComponent } from 'solid-js'; +import { splitProps } from 'solid-js'; -import * as AccordionPrimitive from "@kobalte/core/accordion" -import type { PolymorphicProps } from "@kobalte/core/polymorphic" +import * as AccordionPrimitive from '@kobalte/core/accordion'; +import type { PolymorphicProps } from '@kobalte/core/polymorphic'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; -const Accordion = AccordionPrimitive.Root +const Accordion = AccordionPrimitive.Root; -type AccordionItemProps = +type AccordionItemProps = AccordionPrimitive.AccordionItemProps & { - class?: string | undefined - } + class?: string | undefined; + }; -const AccordionItem = ( +const AccordionItem = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as AccordionItemProps, ["class"]) - return -} + const [local, others] = splitProps(props as AccordionItemProps, ['class']); + return ( + + ); +}; -type AccordionTriggerProps = +type AccordionTriggerProps = AccordionPrimitive.AccordionTriggerProps & { - class?: string | undefined - children?: JSX.Element - } + class?: string | undefined; + children?: JSX.Element; + }; -const AccordionTrigger = ( +const AccordionTrigger = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as AccordionTriggerProps, ["class", "children"]) + const [local, others] = splitProps(props as AccordionTriggerProps, [ + 'class', + 'children', + ]); return ( svg]:rotate-180", + 'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-expanded]>svg]:rotate-180', local.class )} {...others} @@ -54,30 +59,33 @@ const AccordionTrigger = ( - ) -} + ); +}; -type AccordionContentProps = +type AccordionContentProps = AccordionPrimitive.AccordionContentProps & { - class?: string | undefined - children?: JSX.Element - } + class?: string | undefined; + children?: JSX.Element; + }; -const AccordionContent = ( +const AccordionContent = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as AccordionContentProps, ["class", "children"]) + const [local, others] = splitProps(props as AccordionContentProps, [ + 'class', + 'children', + ]); return ( -
{local.children}
+
{local.children}
 - ) -} + ); +}; -export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; diff --git a/apps/webui/src/components/ui/alert-dialog.tsx b/apps/webui/src/components/ui/alert-dialog.tsx index 83e19c6..1d8f93d 100644 --- a/apps/webui/src/components/ui/alert-dialog.tsx +++ b/apps/webui/src/components/ui/alert-dialog.tsx @@ -1,57 +1,62 @@ -import type { JSX, ValidComponent } from "solid-js" -import { splitProps } from "solid-js" +import type { JSX, ValidComponent } from 'solid-js'; +import { splitProps } from 'solid-js'; -import * as AlertDialogPrimitive from "@kobalte/core/alert-dialog" -import type { PolymorphicProps } from "@kobalte/core/polymorphic" +import * as AlertDialogPrimitive from '@kobalte/core/alert-dialog'; +import type { PolymorphicProps } from '@kobalte/core/polymorphic'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; -const AlertDialog = AlertDialogPrimitive.Root -const AlertDialogTrigger = AlertDialogPrimitive.Trigger -const AlertDialogPortal = AlertDialogPrimitive.Portal +const AlertDialog = AlertDialogPrimitive.Root; +const AlertDialogTrigger = AlertDialogPrimitive.Trigger; +const AlertDialogPortal = AlertDialogPrimitive.Portal; -type AlertDialogOverlayProps = +type AlertDialogOverlayProps = AlertDialogPrimitive.AlertDialogOverlayProps & { - class?: string | undefined - } + class?: string | undefined; + }; -const AlertDialogOverlay = ( +const AlertDialogOverlay = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as AlertDialogOverlayProps, ["class"]) + const [local, others] = splitProps(props as AlertDialogOverlayProps, [ + 'class', + ]); return ( - ) -} + ); +}; -type AlertDialogContentProps = +type AlertDialogContentProps = AlertDialogPrimitive.AlertDialogContentProps & { - class?: string | undefined - children?: JSX.Element - } + class?: string | undefined; + children?: JSX.Element; + }; -const AlertDialogContent = ( +const AlertDialogContent = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as AlertDialogContentProps, ["class", "children"]) + const [local, others] = splitProps(props as AlertDialogContentProps, [ + 'class', + 'children', + ]); return ( {local.children} - + ( - ) -} + ); +}; -type AlertDialogTitleProps = +type AlertDialogTitleProps = AlertDialogPrimitive.AlertDialogTitleProps & { - class?: string | undefined - } + class?: string | undefined; + }; -const AlertDialogTitle = ( +const AlertDialogTitle = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as AlertDialogTitleProps, ["class"]) - return -} - -type AlertDialogDescriptionProps = - AlertDialogPrimitive.AlertDialogDescriptionProps & { - class?: string | undefined - } - -const AlertDialogDescription = ( - props: PolymorphicProps> -) => { - const [local, others] = splitProps(props as AlertDialogDescriptionProps, ["class"]) + const [local, others] = splitProps(props as AlertDialogTitleProps, ['class']); return ( - - ) -} + ); +}; + +type AlertDialogDescriptionProps = + AlertDialogPrimitive.AlertDialogDescriptionProps & { + class?: string | undefined; + }; + +const AlertDialogDescription = ( + props: PolymorphicProps> +) => { + const [local, others] = splitProps(props as AlertDialogDescriptionProps, [ + 'class', + ]); + return ( + + ); +}; export { AlertDialog, @@ -108,5 +120,5 @@ export { AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, - AlertDialogDescription -} + AlertDialogDescription, +}; diff --git a/apps/webui/src/components/ui/alert.tsx b/apps/webui/src/components/ui/alert.tsx index da0f173..b9fcb0c 100644 --- a/apps/webui/src/components/ui/alert.tsx +++ b/apps/webui/src/components/ui/alert.tsx @@ -1,50 +1,63 @@ -import type { Component, ComponentProps, ValidComponent } from "solid-js" -import { splitProps } from "solid-js" +import type { Component, ComponentProps, ValidComponent } from 'solid-js'; +import { splitProps } from 'solid-js'; -import * as AlertPrimitive from "@kobalte/core/alert" -import type { PolymorphicProps } from "@kobalte/core/polymorphic" -import type { VariantProps } from "class-variance-authority" -import { cva } from "class-variance-authority" +import * as AlertPrimitive from '@kobalte/core/alert'; +import type { PolymorphicProps } from '@kobalte/core/polymorphic'; +import type { VariantProps } from 'class-variance-authority'; +import { cva } from 'class-variance-authority'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; const alertVariants = cva( - "relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7", + 'relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:top-4 [&>svg]:left-4 [&>svg]:text-foreground [&>svg~*]:pl-7', { variants: { variant: { - default: "bg-background text-foreground", + default: 'bg-background text-foreground', destructive: - "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive" - } + 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive', + }, }, defaultVariants: { - variant: "default" - } + variant: 'default', + }, } -) +); -type AlertRootProps = AlertPrimitive.AlertRootProps & - VariantProps & { class?: string | undefined } +type AlertRootProps = + AlertPrimitive.AlertRootProps & + VariantProps & { class?: string | undefined }; -const Alert = (props: PolymorphicProps>) => { - const [local, others] = splitProps(props as AlertRootProps, ["class", "variant"]) +const Alert = ( + props: PolymorphicProps> +) => { + const [local, others] = splitProps(props as AlertRootProps, [ + 'class', + 'variant', + ]); return ( - ) -} + ); +}; -const AlertTitle: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) - return
-} +const AlertTitle: Component> = (props) => { + const [local, others] = splitProps(props, ['class']); + return ( +
+ ); +}; -const AlertDescription: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) - return
-} +const AlertDescription: Component> = (props) => { + const [local, others] = splitProps(props, ['class']); + return ( +
+ ); +}; -export { Alert, AlertTitle, AlertDescription } +export { Alert, AlertTitle, AlertDescription }; diff --git a/apps/webui/src/components/ui/avatar.tsx b/apps/webui/src/components/ui/avatar.tsx index 0918339..f33e7a9 100644 --- a/apps/webui/src/components/ui/avatar.tsx +++ b/apps/webui/src/components/ui/avatar.tsx @@ -1,51 +1,64 @@ -import type { ValidComponent } from "solid-js" -import { splitProps } from "solid-js" +import type { ValidComponent } from 'solid-js'; +import { splitProps } from 'solid-js'; -import * as ImagePrimitive from "@kobalte/core/image" -import type { PolymorphicProps } from "@kobalte/core/polymorphic" +import * as ImagePrimitive from '@kobalte/core/image'; +import type { PolymorphicProps } from '@kobalte/core/polymorphic'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; -type AvatarRootProps = ImagePrimitive.ImageRootProps & { - class?: string | undefined -} +type AvatarRootProps = + ImagePrimitive.ImageRootProps & { + class?: string | undefined; + }; -const Avatar = ( +const Avatar = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as AvatarRootProps, ["class"]) + const [local, others] = splitProps(props as AvatarRootProps, ['class']); return ( - ) -} + ); +}; -type AvatarImageProps = ImagePrimitive.ImageImgProps & { - class?: string | undefined -} +type AvatarImageProps = + ImagePrimitive.ImageImgProps & { + class?: string | undefined; + }; -const AvatarImage = ( +const AvatarImage = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as AvatarImageProps, ["class"]) - return -} - -type AvatarFallbackProps = - ImagePrimitive.ImageFallbackProps & { class?: string | undefined } - -const AvatarFallback = ( - props: PolymorphicProps> -) => { - const [local, others] = splitProps(props as AvatarFallbackProps, ["class"]) + const [local, others] = splitProps(props as AvatarImageProps, ['class']); return ( - - ) -} + ); +}; -export { Avatar, AvatarImage, AvatarFallback } +type AvatarFallbackProps = + ImagePrimitive.ImageFallbackProps & { class?: string | undefined }; + +const AvatarFallback = ( + props: PolymorphicProps> +) => { + const [local, others] = splitProps(props as AvatarFallbackProps, ['class']); + return ( + + ); +}; + +export { Avatar, AvatarImage, AvatarFallback }; diff --git a/apps/webui/src/components/ui/badge-delta.tsx b/apps/webui/src/components/ui/badge-delta.tsx index fd2d205..5a5221a 100644 --- a/apps/webui/src/components/ui/badge-delta.tsx +++ b/apps/webui/src/components/ui/badge-delta.tsx @@ -1,27 +1,36 @@ -import type { Component, JSXElement } from "solid-js" -import { createEffect, on, splitProps } from "solid-js" +import type { Component, JSXElement } from 'solid-js'; +import { createEffect, on, splitProps } from 'solid-js'; -import type { VariantProps } from "class-variance-authority" -import { cva } from "class-variance-authority" +import type { VariantProps } from 'class-variance-authority'; +import { cva } from 'class-variance-authority'; -import { cn } from "~/styles/utils" -import type { BadgeProps } from "~/components/ui/badge" -import { Badge } from "~/components/ui/badge" +import type { BadgeProps } from '~/components/ui/badge'; +import { Badge } from '~/components/ui/badge'; +import { cn } from '~/utils/styles'; -type DeltaType = "increase" | "moderateIncrease" | "unchanged" | "moderateDecrease" | "decrease" +type DeltaType = + | 'increase' + | 'moderateIncrease' + | 'unchanged' + | 'moderateDecrease' + | 'decrease'; -const badgeDeltaVariants = cva("", { +const badgeDeltaVariants = cva('', { variants: { variant: { - success: "bg-success text-success-foreground hover:bg-success", - warning: "bg-warning text-warning-foreground hover:bg-warning", - error: "bg-error text-error-foreground hover:bg-error" - } - } -}) -type DeltaVariant = NonNullable["variant"]> + success: 'bg-success text-success-foreground hover:bg-success', + warning: 'bg-warning text-warning-foreground hover:bg-warning', + error: 'bg-error text-error-foreground hover:bg-error', + }, + }, +}); +type DeltaVariant = NonNullable< + VariantProps['variant'] +>; -const iconMap: { [key in DeltaType]: (props: { class?: string }) => JSXElement } = { +const iconMap: { + [key in DeltaType]: (props: { class?: string }) => JSXElement; +} = { increase: (props) => ( JSXElement } - ) -} + ), +}; const variantMap: { [key in DeltaType]: DeltaVariant } = { - increase: "success", - moderateIncrease: "success", - unchanged: "warning", - moderateDecrease: "error", - decrease: "error" -} + increase: 'success', + moderateIncrease: 'success', + unchanged: 'warning', + moderateDecrease: 'error', + decrease: 'error', +}; -type BadgeDeltaProps = Omit & { - deltaType: DeltaType -} +type BadgeDeltaProps = Omit & { + deltaType: DeltaType; +}; const BadgeDelta: Component = (props) => { - const [local, others] = splitProps(props, ["class", "children", "deltaType"]) + const [local, others] = splitProps(props, ['class', 'children', 'deltaType']); // eslint-disable-next-line solid/reactivity - let Icon = iconMap[local.deltaType] + let Icon = iconMap[local.deltaType]; createEffect( on( () => local.deltaType, () => { - Icon = iconMap[local.deltaType] + Icon = iconMap[local.deltaType]; } ) - ) + ); return ( @@ -138,7 +150,7 @@ const BadgeDelta: Component = (props) => { {local.children} - ) -} + ); +}; -export { BadgeDelta } +export { BadgeDelta }; diff --git a/apps/webui/src/components/ui/badge.tsx b/apps/webui/src/components/ui/badge.tsx index 041a37c..cbf766c 100644 --- a/apps/webui/src/components/ui/badge.tsx +++ b/apps/webui/src/components/ui/badge.tsx @@ -1,48 +1,48 @@ -import type { Component, ComponentProps } from "solid-js" -import { splitProps } from "solid-js" +import type { Component, ComponentProps } from 'solid-js'; +import { splitProps } from 'solid-js'; -import type { VariantProps } from "class-variance-authority" -import { cva } from "class-variance-authority" +import type { VariantProps } from 'class-variance-authority'; +import { cva } from 'class-variance-authority'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; const badgeVariants = cva( - "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + 'inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', { variants: { variant: { - default: "border-transparent bg-primary text-primary-foreground", - secondary: "border-transparent bg-secondary text-secondary-foreground", - outline: "text-foreground", - success: "border-success-foreground bg-success text-success-foreground", - warning: "border-warning-foreground bg-warning text-warning-foreground", - error: "border-error-foreground bg-error text-error-foreground" - } + default: 'border-transparent bg-primary text-primary-foreground', + secondary: 'border-transparent bg-secondary text-secondary-foreground', + outline: 'text-foreground', + success: 'border-success-foreground bg-success text-success-foreground', + warning: 'border-warning-foreground bg-warning text-warning-foreground', + error: 'border-error-foreground bg-error text-error-foreground', + }, }, defaultVariants: { - variant: "default" - } + variant: 'default', + }, } -) +); -type BadgeProps = ComponentProps<"div"> & +type BadgeProps = ComponentProps<'div'> & VariantProps & { - round?: boolean - } + round?: boolean; + }; const Badge: Component = (props) => { - const [local, others] = splitProps(props, ["class", "variant", "round"]) + const [local, others] = splitProps(props, ['class', 'variant', 'round']); return (
- ) -} + ); +}; -export type { BadgeProps } -export { Badge, badgeVariants } +export type { BadgeProps }; +export { Badge, badgeVariants }; diff --git a/apps/webui/src/components/ui/bar-list.tsx b/apps/webui/src/components/ui/bar-list.tsx index 5dff5b2..e8ea05c 100644 --- a/apps/webui/src/components/ui/bar-list.tsx +++ b/apps/webui/src/components/ui/bar-list.tsx @@ -1,58 +1,64 @@ -import type { ComponentProps, JSX } from "solid-js" -import { For, mergeProps, Show, splitProps } from "solid-js" -import { Dynamic } from "solid-js/web" +import type { ComponentProps, JSX } from 'solid-js'; +import { For, Show, mergeProps, splitProps } from 'solid-js'; +import { Dynamic } from 'solid-js/web'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; type Bar = T & { - value: number - name: JSX.Element - icon?: (props: ComponentProps<"svg">) => JSX.Element - href?: string - target?: string -} + value: number; + name: JSX.Element; + icon?: (props: ComponentProps<'svg'>) => JSX.Element; + href?: string; + target?: string; +}; -type SortOrder = "ascending" | "descending" | "none" +type SortOrder = 'ascending' | 'descending' | 'none'; -type ValueFormatter = (value: number) => string +type ValueFormatter = (value: number) => string; -const defaultValueFormatter: ValueFormatter = (value: number) => value.toString() +const defaultValueFormatter: ValueFormatter = (value: number) => + value.toString(); -type BarListProps = ComponentProps<"div"> & { - data: Bar[] - valueFormatter?: ValueFormatter - sortOrder?: SortOrder -} +type BarListProps = ComponentProps<'div'> & { + data: Bar[]; + valueFormatter?: ValueFormatter; + sortOrder?: SortOrder; +}; const BarList = (rawProps: BarListProps) => { const props = mergeProps( { valueFormatter: defaultValueFormatter, - sortOrder: "descending" as SortOrder + sortOrder: 'descending' as SortOrder, }, rawProps - ) - const [local, others] = splitProps(props, ["class", "data", "valueFormatter", "sortOrder"]) + ); + const [local, others] = splitProps(props, [ + 'class', + 'data', + 'valueFormatter', + 'sortOrder', + ]); const sortedData = () => { - if (local.sortOrder === "none") { - return local.data + if (local.sortOrder === 'none') { + return local.data; } return local.data.sort((a, b) => - local.sortOrder === "ascending" ? a.value - b.value : b.value - a.value - ) - } + local.sortOrder === 'ascending' ? a.value - b.value : b.value - a.value + ); + }; const widths = () => { - const maxValue = Math.max(...sortedData().map((item) => item.value), 0) + const maxValue = Math.max(...sortedData().map((item) => item.value), 0); return sortedData().map((item) => item.value === 0 ? 0 : Math.max((item.value / maxValue) * 100, 2) - ) - } + ); + }; return (
@@ -62,19 +68,26 @@ const BarList = (rawProps: BarListProps) => {
- {(icon) => } + {(icon) => ( + + )} {bar.name}

}> {(href) => ( @@ -84,13 +97,15 @@ const BarList = (rawProps: BarListProps) => {
-
{local.valueFormatter(bar.value)}
+
+ {local.valueFormatter(bar.value)} +
- ) + ); }}
- ) -} + ); +}; -export { BarList } +export { BarList }; diff --git a/apps/webui/src/components/ui/breadcrumb.tsx b/apps/webui/src/components/ui/breadcrumb.tsx index 4fba21b..c647f27 100644 --- a/apps/webui/src/components/ui/breadcrumb.tsx +++ b/apps/webui/src/components/ui/breadcrumb.tsx @@ -1,61 +1,72 @@ -import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js" -import { Show, splitProps } from "solid-js" +import type { Component, ComponentProps, JSX, ValidComponent } from 'solid-js'; +import { Show, splitProps } from 'solid-js'; -import type { PolymorphicProps } from "@kobalte/core" -import * as BreadcrumbPrimitive from "@kobalte/core/breadcrumbs" +import type { PolymorphicProps } from '@kobalte/core'; +import * as BreadcrumbPrimitive from '@kobalte/core/breadcrumbs'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; -const Breadcrumb = BreadcrumbPrimitive.Root +const Breadcrumb = BreadcrumbPrimitive.Root; -const BreadcrumbList: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) +const BreadcrumbList: Component> = (props) => { + const [local, others] = splitProps(props, ['class']); return (
    - ) -} + ); +}; -const BreadcrumbItem: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) - return
  1. -} +const BreadcrumbItem: Component> = (props) => { + const [local, others] = splitProps(props, ['class']); + return ( +
  2. + ); +}; -type BreadcrumbLinkProps = - BreadcrumbPrimitive.BreadcrumbsLinkProps & { class?: string | undefined } +type BreadcrumbLinkProps = + BreadcrumbPrimitive.BreadcrumbsLinkProps & { class?: string | undefined }; -const BreadcrumbLink = ( +const BreadcrumbLink = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as BreadcrumbLinkProps, ["class"]) + const [local, others] = splitProps(props as BreadcrumbLinkProps, ['class']); return ( - ) -} + ); +}; -type BreadcrumbSeparatorProps = +type BreadcrumbSeparatorProps = BreadcrumbPrimitive.BreadcrumbsSeparatorProps & { - class?: string | undefined - children?: JSX.Element - } + class?: string | undefined; + children?: JSX.Element; + }; -const BreadcrumbSeparator = ( +const BreadcrumbSeparator = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as BreadcrumbSeparatorProps, ["class", "children"]) + const [local, others] = splitProps(props as BreadcrumbSeparatorProps, [ + 'class', + 'children', + ]); return ( - svg]:size-3.5", local.class)} {...others}> + svg]:size-3.5', local.class)} + {...others} + > ( {local.children} - ) -} + ); +}; -const BreadcrumbEllipsis: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) +const BreadcrumbEllipsis: Component> = (props) => { + const [local, others] = splitProps(props, ['class']); return ( - + > = (props) => { More - ) -} + ); +}; export { Breadcrumb, @@ -107,5 +121,5 @@ export { BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, - BreadcrumbEllipsis -} + BreadcrumbEllipsis, +}; diff --git a/apps/webui/src/components/ui/button.tsx b/apps/webui/src/components/ui/button.tsx index 3e29aa4..04ffd38 100644 --- a/apps/webui/src/components/ui/button.tsx +++ b/apps/webui/src/components/ui/button.tsx @@ -1,53 +1,67 @@ -import type { JSX, ValidComponent } from "solid-js" -import { splitProps } from "solid-js" +import type { JSX, ValidComponent } from 'solid-js'; +import { splitProps } from 'solid-js'; -import * as ButtonPrimitive from "@kobalte/core/button" -import type { PolymorphicProps } from "@kobalte/core/polymorphic" -import type { VariantProps } from "class-variance-authority" -import { cva } from "class-variance-authority" +import * as ButtonPrimitive from '@kobalte/core/button'; +import type { PolymorphicProps } from '@kobalte/core/polymorphic'; +import type { VariantProps } from 'class-variance-authority'; +import { cva } from 'class-variance-authority'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; const buttonVariants = cva( - "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", + 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', { variants: { variant: { - default: "bg-primary text-primary-foreground hover:bg-primary/90", - destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", - outline: "border border-input hover:bg-accent hover:text-accent-foreground", - secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", - ghost: "hover:bg-accent hover:text-accent-foreground", - link: "text-primary underline-offset-4 hover:underline" + default: 'bg-primary text-primary-foreground hover:bg-primary/90', + destructive: + 'bg-destructive text-destructive-foreground hover:bg-destructive/90', + outline: + 'border border-input hover:bg-accent hover:text-accent-foreground', + secondary: + 'bg-secondary text-secondary-foreground hover:bg-secondary/80', + ghost: 'hover:bg-accent hover:text-accent-foreground', + link: 'text-primary underline-offset-4 hover:underline', }, size: { - default: "h-10 px-4 py-2", - sm: "h-9 px-3 text-xs", - lg: "h-11 px-8", - icon: "size-10" - } + default: 'h-10 px-4 py-2', + sm: 'h-9 px-3 text-xs', + lg: 'h-11 px-8', + icon: 'size-10', + }, }, defaultVariants: { - variant: "default", - size: "default" - } + variant: 'default', + size: 'default', + }, } -) +); -type ButtonProps = ButtonPrimitive.ButtonRootProps & - VariantProps & { class?: string | undefined; children?: JSX.Element } +type ButtonProps = + ButtonPrimitive.ButtonRootProps & + VariantProps & { + class?: string | undefined; + children?: JSX.Element; + }; -const Button = ( +const Button = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as ButtonProps, ["variant", "size", "class"]) + const [local, others] = splitProps(props as ButtonProps, [ + 'variant', + 'size', + 'class', + ]); return ( - ) -} + ); +}; -export type { ButtonProps } -export { Button, buttonVariants } +export type { ButtonProps }; +export { Button, buttonVariants }; diff --git a/apps/webui/src/components/ui/callout.tsx b/apps/webui/src/components/ui/callout.tsx index da8575d..bc18dfa 100644 --- a/apps/webui/src/components/ui/callout.tsx +++ b/apps/webui/src/components/ui/callout.tsx @@ -1,40 +1,46 @@ -import type { Component, ComponentProps } from "solid-js" -import { splitProps } from "solid-js" +import type { Component, ComponentProps } from 'solid-js'; +import { splitProps } from 'solid-js'; -import type { VariantProps } from "class-variance-authority" -import { cva } from "class-variance-authority" +import type { VariantProps } from 'class-variance-authority'; +import { cva } from 'class-variance-authority'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; -const calloutVariants = cva("rounded-md border-l-4 p-2 pl-4", { +const calloutVariants = cva('rounded-md border-l-4 p-2 pl-4', { variants: { variant: { - default: "border-info-foreground bg-info text-info-foreground", - success: "border-success-foreground bg-success text-success-foreground", - warning: "border-warning-foreground bg-warning text-warning-foreground", - error: "border-error-foreground bg-error text-error-foreground" - } + default: 'border-info-foreground bg-info text-info-foreground', + success: 'border-success-foreground bg-success text-success-foreground', + warning: 'border-warning-foreground bg-warning text-warning-foreground', + error: 'border-error-foreground bg-error text-error-foreground', + }, }, defaultVariants: { - variant: "default" - } -}) + variant: 'default', + }, +}); -type CalloutProps = ComponentProps<"div"> & VariantProps +type CalloutProps = ComponentProps<'div'> & + VariantProps; const Callout: Component = (props) => { - const [local, others] = splitProps(props, ["class", "variant"]) - return
    -} + const [local, others] = splitProps(props, ['class', 'variant']); + return ( +
    + ); +}; -const CalloutTitle: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) - return

    -} +const CalloutTitle: Component> = (props) => { + const [local, others] = splitProps(props, ['class']); + return

    ; +}; -const CalloutContent: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) - return
    -} +const CalloutContent: Component> = (props) => { + const [local, others] = splitProps(props, ['class']); + return
    ; +}; -export { Callout, CalloutTitle, CalloutContent } +export { Callout, CalloutTitle, CalloutContent }; diff --git a/apps/webui/src/components/ui/card.tsx b/apps/webui/src/components/ui/card.tsx index d62ac75..d3c9595 100644 --- a/apps/webui/src/components/ui/card.tsx +++ b/apps/webui/src/components/ui/card.tsx @@ -1,43 +1,65 @@ -import type { Component, ComponentProps } from "solid-js" -import { splitProps } from "solid-js" +import type { Component, ComponentProps } from 'solid-js'; +import { splitProps } from 'solid-js'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; -const Card: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) +const Card: Component> = (props) => { + const [local, others] = splitProps(props, ['class']); return (
    - ) -} + ); +}; -const CardHeader: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) - return
    -} - -const CardTitle: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) +const CardHeader: Component> = (props) => { + const [local, others] = splitProps(props, ['class']); return ( -

    - ) -} +
    + ); +}; -const CardDescription: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) - return

    -} +const CardTitle: Component> = (props) => { + const [local, others] = splitProps(props, ['class']); + return ( +

    + ); +}; -const CardContent: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) - return
    -} +const CardDescription: Component> = (props) => { + const [local, others] = splitProps(props, ['class']); + return ( +

    + ); +}; -const CardFooter: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) - return

    -} +const CardContent: Component> = (props) => { + const [local, others] = splitProps(props, ['class']); + return
    ; +}; -export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } +const CardFooter: Component> = (props) => { + const [local, others] = splitProps(props, ['class']); + return ( +
    + ); +}; + +export { + Card, + CardHeader, + CardFooter, + CardTitle, + CardDescription, + CardContent, +}; diff --git a/apps/webui/src/components/ui/carousel.tsx b/apps/webui/src/components/ui/carousel.tsx index 22cb7d1..255a34f 100644 --- a/apps/webui/src/components/ui/carousel.tsx +++ b/apps/webui/src/components/ui/carousel.tsx @@ -1,4 +1,4 @@ -import type { Accessor, Component, ComponentProps, VoidProps } from "solid-js" +import type { Accessor, Component, ComponentProps, VoidProps } from 'solid-js'; import { createContext, createEffect, @@ -6,118 +6,122 @@ import { createSignal, mergeProps, splitProps, - useContext -} from "solid-js" + useContext, +} from 'solid-js'; -import type { CreateEmblaCarouselType } from "embla-carousel-solid" -import createEmblaCarousel from "embla-carousel-solid" +import type { CreateEmblaCarouselType } from 'embla-carousel-solid'; +import createEmblaCarousel from 'embla-carousel-solid'; -import { cn } from "~/styles/utils" -import type { ButtonProps } from "~/components/ui/button" -import { Button } from "~/components/ui/button" +import type { ButtonProps } from '~/components/ui/button'; +import { Button } from '~/components/ui/button'; +import { cn } from '~/utils/styles'; -export type CarouselApi = CreateEmblaCarouselType[1] +export type CarouselApi = CreateEmblaCarouselType[1]; -type UseCarouselParameters = Parameters -type CarouselOptions = NonNullable -type CarouselPlugin = NonNullable +type UseCarouselParameters = Parameters; +type CarouselOptions = NonNullable; +type CarouselPlugin = NonNullable; type CarouselProps = { - opts?: ReturnType - plugins?: ReturnType - orientation?: "horizontal" | "vertical" - setApi?: (api: CarouselApi) => void -} + opts?: ReturnType; + plugins?: ReturnType; + orientation?: 'horizontal' | 'vertical'; + setApi?: (api: CarouselApi) => void; +}; type CarouselContextProps = { - carouselRef: ReturnType[0] - api: ReturnType[1] - scrollPrev: () => void - scrollNext: () => void - canScrollPrev: Accessor - canScrollNext: Accessor -} & CarouselProps + carouselRef: ReturnType[0]; + api: ReturnType[1]; + scrollPrev: () => void; + scrollNext: () => void; + canScrollPrev: Accessor; + canScrollNext: Accessor; +} & CarouselProps; -const CarouselContext = createContext | null>(null) +const CarouselContext = createContext | null>( + null +); const useCarousel = () => { - const context = useContext(CarouselContext) + const context = useContext(CarouselContext); if (!context) { - throw new Error("useCarousel must be used within a ") + throw new Error('useCarousel must be used within a '); } - return context() -} + return context(); +}; -const Carousel: Component> = (rawProps) => { - const props = mergeProps<(CarouselProps & ComponentProps<"div">)[]>( - { orientation: "horizontal" }, +const Carousel: Component> = ( + rawProps +) => { + const props = mergeProps<(CarouselProps & ComponentProps<'div'>)[]>( + { orientation: 'horizontal' }, rawProps - ) + ); const [local, others] = splitProps(props, [ - "orientation", - "opts", - "setApi", - "plugins", - "class", - "children" - ]) + 'orientation', + 'opts', + 'setApi', + 'plugins', + 'class', + 'children', + ]); const [carouselRef, api] = createEmblaCarousel( () => ({ ...local.opts, - axis: local.orientation === "horizontal" ? "x" : "y" + axis: local.orientation === 'horizontal' ? 'x' : 'y', }), () => (local.plugins === undefined ? [] : local.plugins) - ) - const [canScrollPrev, setCanScrollPrev] = createSignal(false) - const [canScrollNext, setCanScrollNext] = createSignal(false) + ); + const [canScrollPrev, setCanScrollPrev] = createSignal(false); + const [canScrollNext, setCanScrollNext] = createSignal(false); const onSelect = (api: NonNullable>) => { - setCanScrollPrev(api.canScrollPrev()) - setCanScrollNext(api.canScrollNext()) - } + setCanScrollPrev(api.canScrollPrev()); + setCanScrollNext(api.canScrollNext()); + }; const scrollPrev = () => { - api()?.scrollPrev() - } + api()?.scrollPrev(); + }; const scrollNext = () => { - api()?.scrollNext() - } + api()?.scrollNext(); + }; const handleKeyDown = (event: KeyboardEvent) => { - if (event.key === "ArrowLeft") { - event.preventDefault() - scrollPrev() - } else if (event.key === "ArrowRight") { - event.preventDefault() - scrollNext() + if (event.key === 'ArrowLeft') { + event.preventDefault(); + scrollPrev(); + } else if (event.key === 'ArrowRight') { + event.preventDefault(); + scrollNext(); } - } + }; createEffect(() => { if (!api() || !local.setApi) { - return + return; } - local.setApi(api) - }) + local.setApi(api); + }); createEffect(() => { if (!api()) { - return + return; } - onSelect(api()!) - api()!.on("reInit", onSelect) - api()!.on("select", onSelect) + onSelect(api()!); + api()!.on('reInit', onSelect); + api()!.on('select', onSelect); return () => { - api()?.off("select", onSelect) - } - }) + api()?.off('select', onSelect); + }; + }); const value = createMemo( () => @@ -125,19 +129,21 @@ const Carousel: Component> = (rawProps) => carouselRef, api, opts: local.opts, - orientation: local.orientation || (local.opts?.axis === "y" ? "vertical" : "horizontal"), + orientation: + local.orientation || + (local.opts?.axis === 'y' ? 'vertical' : 'horizontal'), scrollPrev, scrollNext, canScrollPrev, - canScrollNext + canScrollNext, }) satisfies CarouselContextProps - ) + ); return (
    > = (rawProps) => {local.children}
    - ) -} + ); +}; -const CarouselContent: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) - const { carouselRef, orientation } = useCarousel() +const CarouselContent: Component> = (props) => { + const [local, others] = splitProps(props, ['class']); + const { carouselRef, orientation } = useCarousel(); return (
    - ) -} + ); +}; -const CarouselItem: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) - const { orientation } = useCarousel() +const CarouselItem: Component> = (props) => { + const [local, others] = splitProps(props, ['class']); + const { orientation } = useCarousel(); return (
    - ) -} + ); +}; -type CarouselButtonProps = VoidProps +type CarouselButtonProps = VoidProps; const CarouselPrevious: Component = (rawProps) => { - const props = mergeProps({ variant: "outline", size: "icon" }, rawProps) - const [local, others] = splitProps(props, ["class", "variant", "size"]) - const { orientation, scrollPrev, canScrollPrev } = useCarousel() + const props = mergeProps( + { variant: 'outline', size: 'icon' }, + rawProps + ); + const [local, others] = splitProps(props, ['class', 'variant', 'size']); + const { orientation, scrollPrev, canScrollPrev } = useCarousel(); return ( - ) -} + ); +}; const CarouselNext: Component = (rawProps) => { - const props = mergeProps({ variant: "outline", size: "icon" }, rawProps) - const [local, others] = splitProps(props, ["class", "variant", "size"]) - const { orientation, scrollNext, canScrollNext } = useCarousel() + const props = mergeProps( + { variant: 'outline', size: 'icon' }, + rawProps + ); + const [local, others] = splitProps(props, ['class', 'variant', 'size']); + const { orientation, scrollNext, canScrollNext } = useCarousel(); return ( - ) -} + ); +}; -export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } +export { + Carousel, + CarouselContent, + CarouselItem, + CarouselPrevious, + CarouselNext, +}; diff --git a/apps/webui/src/components/ui/checkbox.tsx b/apps/webui/src/components/ui/checkbox.tsx index 184d8d0..cbbb246 100644 --- a/apps/webui/src/components/ui/checkbox.tsx +++ b/apps/webui/src/components/ui/checkbox.tsx @@ -1,21 +1,21 @@ -import type { ValidComponent } from "solid-js" -import { Match, splitProps, Switch } from "solid-js" +import type { ValidComponent } from 'solid-js'; +import { Match, Switch, splitProps } from 'solid-js'; -import * as CheckboxPrimitive from "@kobalte/core/checkbox" -import type { PolymorphicProps } from "@kobalte/core/polymorphic" +import * as CheckboxPrimitive from '@kobalte/core/checkbox'; +import type { PolymorphicProps } from '@kobalte/core/polymorphic'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; -type CheckboxRootProps = - CheckboxPrimitive.CheckboxRootProps & { class?: string | undefined } +type CheckboxRootProps = + CheckboxPrimitive.CheckboxRootProps & { class?: string | undefined }; -const Checkbox = ( +const Checkbox = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as CheckboxRootProps, ["class"]) + const [local, others] = splitProps(props as CheckboxRootProps, ['class']); return ( @@ -54,7 +54,7 @@ const Checkbox = ( - ) -} + ); +}; -export { Checkbox } +export { Checkbox }; diff --git a/apps/webui/src/components/ui/combobox.tsx b/apps/webui/src/components/ui/combobox.tsx index d2b8617..aa28605 100644 --- a/apps/webui/src/components/ui/combobox.tsx +++ b/apps/webui/src/components/ui/combobox.tsx @@ -1,43 +1,46 @@ -import type { JSX, ValidComponent } from "solid-js" -import { Show, splitProps } from "solid-js" +import type { JSX, ValidComponent } from 'solid-js'; +import { Show, splitProps } from 'solid-js'; -import * as ComboboxPrimitive from "@kobalte/core/combobox" -import type { PolymorphicProps } from "@kobalte/core/polymorphic" +import * as ComboboxPrimitive from '@kobalte/core/combobox'; +import type { PolymorphicProps } from '@kobalte/core/polymorphic'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; -const Combobox = ComboboxPrimitive.Root -const ComboboxItemLabel = ComboboxPrimitive.ItemLabel -const ComboboxHiddenSelect = ComboboxPrimitive.HiddenSelect +const Combobox = ComboboxPrimitive.Root; +const ComboboxItemLabel = ComboboxPrimitive.ItemLabel; +const ComboboxHiddenSelect = ComboboxPrimitive.HiddenSelect; -type ComboboxItemProps = ComboboxPrimitive.ComboboxItemProps & { - class?: string | undefined -} +type ComboboxItemProps = + ComboboxPrimitive.ComboboxItemProps & { + class?: string | undefined; + }; -const ComboboxItem = ( +const ComboboxItem = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as ComboboxItemProps, ["class"]) + const [local, others] = splitProps(props as ComboboxItemProps, ['class']); return ( - ) -} + ); +}; -type ComboboxItemIndicatorProps = +type ComboboxItemIndicatorProps = ComboboxPrimitive.ComboboxItemIndicatorProps & { - children?: JSX.Element - } + children?: JSX.Element; + }; -const ComboboxItemIndicator = ( +const ComboboxItemIndicator = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as ComboboxItemIndicatorProps, ["children"]) + const [local, others] = splitProps(props as ComboboxItemIndicatorProps, [ + 'children', + ]); return ( ( {(children) => children()} - ) -} + ); +}; -type ComboboxSectionProps = - ComboboxPrimitive.ComboboxSectionProps & { class?: string | undefined } +type ComboboxSectionProps = + ComboboxPrimitive.ComboboxSectionProps & { class?: string | undefined }; -const ComboboxSection = ( +const ComboboxSection = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as ComboboxSectionProps, ["class"]) + const [local, others] = splitProps(props as ComboboxSectionProps, ['class']); return ( - ) -} + ); +}; type ComboboxControlProps< U, - T extends ValidComponent = "div" + T extends ValidComponent = 'div', > = ComboboxPrimitive.ComboboxControlProps & { - class?: string | undefined -} + class?: string | undefined; +}; -const ComboboxControl = ( +const ComboboxControl = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as ComboboxControlProps, ["class"]) + const [local, others] = splitProps(props as ComboboxControlProps, [ + 'class', + ]); return ( - ) -} + ); +}; -type ComboboxInputProps = - ComboboxPrimitive.ComboboxInputProps & { class?: string | undefined } +type ComboboxInputProps = + ComboboxPrimitive.ComboboxInputProps & { class?: string | undefined }; -const ComboboxInput = ( +const ComboboxInput = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as ComboboxInputProps, ["class"]) + const [local, others] = splitProps(props as ComboboxInputProps, ['class']); return ( - ) -} + ); +}; -type ComboboxTriggerProps = +type ComboboxTriggerProps = ComboboxPrimitive.ComboboxTriggerProps & { - class?: string | undefined - children?: JSX.Element - } + class?: string | undefined; + children?: JSX.Element; + }; -const ComboboxTrigger = ( +const ComboboxTrigger = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as ComboboxTriggerProps, ["class", "children"]) + const [local, others] = splitProps(props as ComboboxTriggerProps, [ + 'class', + 'children', + ]); return ( - + ( - ) -} + ); +}; -type ComboboxContentProps = - ComboboxPrimitive.ComboboxContentProps & { class?: string | undefined } +type ComboboxContentProps = + ComboboxPrimitive.ComboboxContentProps & { class?: string | undefined }; -const ComboboxContent = ( +const ComboboxContent = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as ComboboxContentProps, ["class"]) + const [local, others] = splitProps(props as ComboboxContentProps, ['class']); return ( ( - ) -} + ); +}; export { Combobox, @@ -188,5 +199,5 @@ export { ComboboxTrigger, ComboboxInput, ComboboxHiddenSelect, - ComboboxContent -} + ComboboxContent, +}; diff --git a/apps/webui/src/components/ui/command.tsx b/apps/webui/src/components/ui/command.tsx index ee3a6cf..40391a0 100644 --- a/apps/webui/src/components/ui/command.tsx +++ b/apps/webui/src/components/ui/command.tsx @@ -1,28 +1,35 @@ -import type { Component, ComponentProps, ParentProps, VoidProps } from "solid-js" -import { splitProps } from "solid-js" +import type { + Component, + ComponentProps, + ParentProps, + VoidProps, +} from 'solid-js'; +import { splitProps } from 'solid-js'; -import type { DialogRootProps } from "@kobalte/core/dialog" -import * as CommandPrimitive from "cmdk-solid" +import type { DialogRootProps } from '@kobalte/core/dialog'; +import * as CommandPrimitive from 'cmdk-solid'; -import { cn } from "~/styles/utils" -import { Dialog, DialogContent } from "~/components/ui/dialog" +import { Dialog, DialogContent } from '~/components/ui/dialog'; +import { cn } from '~/utils/styles'; -const Command: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) +const Command: Component> = ( + props +) => { + const [local, others] = splitProps(props, ['class']); return ( - ) -} + ); +}; const CommandDialog: Component> = (props) => { - const [local, others] = splitProps(props, ["children"]) + const [local, others] = splitProps(props, ['children']); return ( @@ -32,11 +39,13 @@ const CommandDialog: Component> = (props) => { - ) -} + ); +}; -const CommandInput: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) +const CommandInput: Component> = ( + props +) => { + const [local, others] = splitProps(props, ['class']); return (
    @@ -55,82 +64,100 @@ const CommandInput: Component> = (
    - ) -} + ); +}; -const CommandList: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) +const CommandList: Component> = ( + props +) => { + const [local, others] = splitProps(props, ['class']); return ( - ) -} + ); +}; -const CommandEmpty: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) +const CommandEmpty: Component< + ParentProps +> = (props) => { + const [local, others] = splitProps(props, ['class']); return ( - ) -} + ); +}; -const CommandGroup: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) +const CommandGroup: Component< + ParentProps +> = (props) => { + const [local, others] = splitProps(props, ['class']); return ( - ) -} + ); +}; -const CommandSeparator: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) +const CommandSeparator: Component< + VoidProps +> = (props) => { + const [local, others] = splitProps(props, ['class']); - return -} + return ( + + ); +}; -const CommandItem: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) +const CommandItem: Component> = ( + props +) => { + const [local, others] = splitProps(props, ['class']); return ( - ) -} + ); +}; -const CommandShortcut: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) +const CommandShortcut: Component> = (props) => { + const [local, others] = splitProps(props, ['class']); return ( - ) -} + ); +}; export { Command, @@ -141,5 +168,5 @@ export { CommandGroup, CommandItem, CommandShortcut, - CommandSeparator -} + CommandSeparator, +}; diff --git a/apps/webui/src/components/ui/context-menu.tsx b/apps/webui/src/components/ui/context-menu.tsx index c8d4bbc..2e0eb31 100644 --- a/apps/webui/src/components/ui/context-menu.tsx +++ b/apps/webui/src/components/ui/context-menu.tsx @@ -1,99 +1,113 @@ -import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js" -import { splitProps } from "solid-js" +import type { Component, ComponentProps, JSX, ValidComponent } from 'solid-js'; +import { splitProps } from 'solid-js'; -import * as ContextMenuPrimitive from "@kobalte/core/context-menu" -import type { PolymorphicProps } from "@kobalte/core/polymorphic" +import * as ContextMenuPrimitive from '@kobalte/core/context-menu'; +import type { PolymorphicProps } from '@kobalte/core/polymorphic'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; -const ContextMenuTrigger = ContextMenuPrimitive.Trigger -const ContextMenuPortal = ContextMenuPrimitive.Portal -const ContextMenuSub = ContextMenuPrimitive.Sub -const ContextMenuGroup = ContextMenuPrimitive.Group -const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup +const ContextMenuTrigger = ContextMenuPrimitive.Trigger; +const ContextMenuPortal = ContextMenuPrimitive.Portal; +const ContextMenuSub = ContextMenuPrimitive.Sub; +const ContextMenuGroup = ContextMenuPrimitive.Group; +const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup; -const ContextMenu: Component = (props) => { - return -} +const ContextMenu: Component = ( + props +) => { + return ; +}; -type ContextMenuContentProps = +type ContextMenuContentProps = ContextMenuPrimitive.ContextMenuContentProps & { - class?: string | undefined - } + class?: string | undefined; + }; -const ContextMenuContent = ( +const ContextMenuContent = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as ContextMenuContentProps, ["class"]) + const [local, others] = splitProps(props as ContextMenuContentProps, [ + 'class', + ]); return ( - ) -} + ); +}; -type ContextMenuItemProps = +type ContextMenuItemProps = ContextMenuPrimitive.ContextMenuItemProps & { - class?: string | undefined - } + class?: string | undefined; + }; -const ContextMenuItem = ( +const ContextMenuItem = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as ContextMenuItemProps, ["class"]) + const [local, others] = splitProps(props as ContextMenuItemProps, ['class']); return ( - ) -} + ); +}; -const ContextMenuShortcut: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) - return -} - -type ContextMenuSeparatorProps = - ContextMenuPrimitive.ContextMenuSeparatorProps & { - class?: string | undefined - } - -const ContextMenuSeparator = ( - props: PolymorphicProps> -) => { - const [local, others] = splitProps(props as ContextMenuSeparatorProps, ["class"]) +const ContextMenuShortcut: Component> = (props) => { + const [local, others] = splitProps(props, ['class']); return ( - - ) -} + ); +}; -type ContextMenuSubTriggerProps = +type ContextMenuSeparatorProps = + ContextMenuPrimitive.ContextMenuSeparatorProps & { + class?: string | undefined; + }; + +const ContextMenuSeparator = ( + props: PolymorphicProps> +) => { + const [local, others] = splitProps(props as ContextMenuSeparatorProps, [ + 'class', + ]); + return ( + + ); +}; + +type ContextMenuSubTriggerProps = ContextMenuPrimitive.ContextMenuSubTriggerProps & { - class?: string | undefined - children?: JSX.Element - } + class?: string | undefined; + children?: JSX.Element; + }; -const ContextMenuSubTrigger = ( +const ContextMenuSubTrigger = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as ContextMenuSubTriggerProps, ["class", "children"]) + const [local, others] = splitProps(props as ContextMenuSubTriggerProps, [ + 'class', + 'children', + ]); return ( ( - ) -} + ); +}; -type ContextMenuSubContentProps = +type ContextMenuSubContentProps = ContextMenuPrimitive.ContextMenuSubContentProps & { - class?: string | undefined - } + class?: string | undefined; + }; -const ContextMenuSubContent = ( +const ContextMenuSubContent = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as ContextMenuSubContentProps, ["class"]) + const [local, others] = splitProps(props as ContextMenuSubContentProps, [ + 'class', + ]); return ( - ) -} + ); +}; -type ContextMenuCheckboxItemProps = +type ContextMenuCheckboxItemProps = ContextMenuPrimitive.ContextMenuCheckboxItemProps & { - class?: string | undefined - children?: JSX.Element - } + class?: string | undefined; + children?: JSX.Element; + }; -const ContextMenuCheckboxItem = ( +const ContextMenuCheckboxItem = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as ContextMenuCheckboxItemProps, ["class", "children"]) + const [local, others] = splitProps(props as ContextMenuCheckboxItemProps, [ + 'class', + 'children', + ]); return ( ( {local.children} - ) -} + ); +}; -type ContextMenuGroupLabelProps = +type ContextMenuGroupLabelProps = ContextMenuPrimitive.ContextMenuGroupLabelProps & { - class?: string | undefined - } + class?: string | undefined; + }; -const ContextMenuGroupLabel = ( +const ContextMenuGroupLabel = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as ContextMenuGroupLabelProps, ["class"]) + const [local, others] = splitProps(props as ContextMenuGroupLabelProps, [ + 'class', + ]); return ( - ) -} + ); +}; -type ContextMenuRadioItemProps = +type ContextMenuRadioItemProps = ContextMenuPrimitive.ContextMenuRadioItemProps & { - class?: string | undefined - children?: JSX.Element - } + class?: string | undefined; + children?: JSX.Element; + }; -const ContextMenuRadioItem = ( +const ContextMenuRadioItem = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as ContextMenuRadioItemProps, ["class", "children"]) + const [local, others] = splitProps(props as ContextMenuRadioItemProps, [ + 'class', + 'children', + ]); return ( ( {local.children} - ) -} + ); +}; export { ContextMenu, @@ -245,5 +269,5 @@ export { ContextMenuGroup, ContextMenuGroupLabel, ContextMenuRadioGroup, - ContextMenuRadioItem -} + ContextMenuRadioItem, +}; diff --git a/apps/webui/src/components/ui/date-picker.tsx b/apps/webui/src/components/ui/date-picker.tsx index 9a95d0d..ed23a2a 100644 --- a/apps/webui/src/components/ui/date-picker.tsx +++ b/apps/webui/src/components/ui/date-picker.tsx @@ -1,53 +1,53 @@ -import { children, Show, splitProps } from "solid-js" +import { Show, children, splitProps } from 'solid-js'; -import { DatePicker as DatePickerPrimitive } from "@ark-ui/solid" +import { DatePicker as DatePickerPrimitive } from '@ark-ui/solid'; -import { cn } from "~/styles/utils" -import { buttonVariants } from "~/components/ui/button" +import { buttonVariants } from '~/components/ui/button'; +import { cn } from '~/utils/styles'; -const DatePicker = DatePickerPrimitive.Root -const DatePickerLabel = DatePickerPrimitive.Label -const DatePickerContext = DatePickerPrimitive.Context -const DatePickerTableHead = DatePickerPrimitive.TableHead -const DatePickerTableBody = DatePickerPrimitive.TableBody -const DatePickerYearSelect = DatePickerPrimitive.YearSelect -const DatePickerMonthSelect = DatePickerPrimitive.MonthSelect -const DatePickerPositioner = DatePickerPrimitive.Positioner +const DatePicker = DatePickerPrimitive.Root; +const DatePickerLabel = DatePickerPrimitive.Label; +const DatePickerContext = DatePickerPrimitive.Context; +const DatePickerTableHead = DatePickerPrimitive.TableHead; +const DatePickerTableBody = DatePickerPrimitive.TableBody; +const DatePickerYearSelect = DatePickerPrimitive.YearSelect; +const DatePickerMonthSelect = DatePickerPrimitive.MonthSelect; +const DatePickerPositioner = DatePickerPrimitive.Positioner; const DatePickerControl = (props: DatePickerPrimitive.ControlProps) => { - const [local, others] = splitProps(props, ["class"]) + const [local, others] = splitProps(props, ['class']); return ( - ) -} + ); +}; const DatePickerInput = (props: DatePickerPrimitive.InputProps) => { - const [local, others] = splitProps(props, ["class"]) + const [local, others] = splitProps(props, ['class']); return ( - ) -} + ); +}; const DatePickerTrigger = (props: DatePickerPrimitive.TriggerProps) => { - const [local, others] = splitProps(props, ["class", "children"]) + const [local, others] = splitProps(props, ['class', 'children']); // prevents rendering children twice - const resolvedChildren = children(() => local.children) - const hasChildren = () => resolvedChildren.toArray().length !== 0 + const resolvedChildren = children(() => local.children); + const hasChildren = () => resolvedChildren.toArray().length !== 0; return ( svg]:size-4", + 'flex min-h-9 min-w-9 items-center justify-center rounded-md border border-border bg-background transition-[box-shadow,background-color] hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>svg]:size-4', local.class )} {...others} @@ -73,54 +73,59 @@ const DatePickerTrigger = (props: DatePickerPrimitive.TriggerProps) => { - ) -} + ); +}; const DatePickerContent = (props: DatePickerPrimitive.ContentProps) => { - const [local, others] = splitProps(props, ["class", "children"]) + const [local, others] = splitProps(props, ['class', 'children']); return ( {local.children} - ) -} + ); +}; const DatePickerView = (props: DatePickerPrimitive.ViewProps) => { - const [local, others] = splitProps(props, ["class"]) - return -} - -const DatePickerViewControl = (props: DatePickerPrimitive.ViewControlProps) => { - const [local, others] = splitProps(props, ["class"]) + const [local, others] = splitProps(props, ['class']); return ( - - ) -} + ); +}; + +const DatePickerViewControl = (props: DatePickerPrimitive.ViewControlProps) => { + const [local, others] = splitProps(props, ['class']); + return ( + + ); +}; const DatePickerPrevTrigger = (props: DatePickerPrimitive.PrevTriggerProps) => { - const [local, others] = splitProps(props, ["class", "children"]) + const [local, others] = splitProps(props, ['class', 'children']); // prevents rendering children twice - const resolvedChildren = children(() => local.children) - const hasChildren = () => resolvedChildren.toArray().length !== 0 + const resolvedChildren = children(() => local.children); + const hasChildren = () => resolvedChildren.toArray().length !== 0; return ( { - ) -} + ); +}; const DatePickerNextTrigger = (props: DatePickerPrimitive.NextTriggerProps) => { - const [local, others] = splitProps(props, ["class", "children"]) + const [local, others] = splitProps(props, ['class', 'children']); // prevents rendering children twice - const resolvedChildren = children(() => local.children) - const hasChildren = () => resolvedChildren.toArray().length !== 0 + const resolvedChildren = children(() => local.children); + const hasChildren = () => resolvedChildren.toArray().length !== 0; return ( { - ) -} + ); +}; const DatePickerViewTrigger = (props: DatePickerPrimitive.ViewTriggerProps) => { - const [local, others] = splitProps(props, ["class"]) + const [local, others] = splitProps(props, ['class']); return ( - ) -} + ); +}; const DatePickerRangeText = (props: DatePickerPrimitive.RangeTextProps) => { - const [local, others] = splitProps(props, ["class"]) + const [local, others] = splitProps(props, ['class']); return ( - - ) -} + + ); +}; const DatePickerTable = (props: DatePickerPrimitive.TableProps) => { - const [local, others] = splitProps(props, ["class"]) + const [local, others] = splitProps(props, ['class']); return ( - ) -} + ); +}; const DatePickerTableRow = (props: DatePickerPrimitive.TableRowProps) => { - const [local, others] = splitProps(props, ["class"]) - return -} - -const DatePickerTableHeader = (props: DatePickerPrimitive.TableHeaderProps) => { - const [local, others] = splitProps(props, ["class"]) + const [local, others] = splitProps(props, ['class']); return ( - - ) -} + ); +}; + +const DatePickerTableHeader = (props: DatePickerPrimitive.TableHeaderProps) => { + const [local, others] = splitProps(props, ['class']); + return ( + + ); +}; const DatePickerTableCell = (props: DatePickerPrimitive.TableCellProps) => { - const [local, others] = splitProps(props, ["class"]) + const [local, others] = splitProps(props, ['class']); return ( - ) -} + ); +}; -const DatePickerTableCellTrigger = (props: DatePickerPrimitive.TableCellTriggerProps) => { - const [local, others] = splitProps(props, ["class"]) +const DatePickerTableCellTrigger = ( + props: DatePickerPrimitive.TableCellTriggerProps +) => { + const [local, others] = splitProps(props, ['class']); return ( - ) -} + ); +}; export { DatePicker, @@ -279,5 +297,5 @@ export { DatePickerTableCellTrigger, DatePickerYearSelect, DatePickerMonthSelect, - DatePickerPositioner -} + DatePickerPositioner, +}; diff --git a/apps/webui/src/components/ui/delta-bar.tsx b/apps/webui/src/components/ui/delta-bar.tsx index 0bc7682..97e1add 100644 --- a/apps/webui/src/components/ui/delta-bar.tsx +++ b/apps/webui/src/components/ui/delta-bar.tsx @@ -1,58 +1,75 @@ -import { mergeProps, Show, splitProps, type Component, type ComponentProps } from "solid-js" +import { + type Component, + type ComponentProps, + Show, + mergeProps, + splitProps, +} from 'solid-js'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; -type DeltaBarProps = ComponentProps<"div"> & { - value: number - isIncreasePositive?: boolean -} +type DeltaBarProps = ComponentProps<'div'> & { + value: number; + isIncreasePositive?: boolean; +}; const DeltaBar: Component = (rawProps) => { const props = mergeProps( { - isIncreasePositive: true + isIncreasePositive: true, }, rawProps - ) - const [local, others] = splitProps(props, ["value", "isIncreasePositive", "class"]) + ); + const [local, others] = splitProps(props, [ + 'value', + 'isIncreasePositive', + 'class', + ]); return (
    0 && local.isIncreasePositive) || (local.value < 0 && !local.isIncreasePositive) - ? "bg-success-foreground" - : "bg-error-foreground" + ? 'bg-success-foreground' + : 'bg-error-foreground' )} style={{ width: `${Math.abs(local.value)}%` }} />
    -
    +
    0}>
    0 && local.isIncreasePositive) || (local.value < 0 && !local.isIncreasePositive) - ? "bg-success-foreground" - : "bg-error-foreground" + ? 'bg-success-foreground' + : 'bg-error-foreground' )} style={{ width: `${Math.abs(local.value)}%` }} />
    - ) -} + ); +}; -export type { DeltaBarProps } -export { DeltaBar } +export type { DeltaBarProps }; +export { DeltaBar }; diff --git a/apps/webui/src/components/ui/dialog.tsx b/apps/webui/src/components/ui/dialog.tsx index 66c6afc..6ef5058 100644 --- a/apps/webui/src/components/ui/dialog.tsx +++ b/apps/webui/src/components/ui/dialog.tsx @@ -1,65 +1,68 @@ -import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js" -import { splitProps } from "solid-js" +import type { Component, ComponentProps, JSX, ValidComponent } from 'solid-js'; +import { splitProps } from 'solid-js'; -import * as DialogPrimitive from "@kobalte/core/dialog" -import type { PolymorphicProps } from "@kobalte/core/polymorphic" +import * as DialogPrimitive from '@kobalte/core/dialog'; +import type { PolymorphicProps } from '@kobalte/core/polymorphic'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; -const Dialog = DialogPrimitive.Root -const DialogTrigger = DialogPrimitive.Trigger +const Dialog = DialogPrimitive.Root; +const DialogTrigger = DialogPrimitive.Trigger; const DialogPortal: Component = (props) => { - const [, rest] = splitProps(props, ["children"]) + const [, rest] = splitProps(props, ['children']); return (
    {props.children}
    - ) -} + ); +}; -type DialogOverlayProps = - DialogPrimitive.DialogOverlayProps & { class?: string | undefined } +type DialogOverlayProps = + DialogPrimitive.DialogOverlayProps & { class?: string | undefined }; -const DialogOverlay = ( +const DialogOverlay = ( props: PolymorphicProps> ) => { - const [, rest] = splitProps(props as DialogOverlayProps, ["class"]) + const [, rest] = splitProps(props as DialogOverlayProps, ['class']); return ( - ) -} + ); +}; -type DialogContentProps = +type DialogContentProps = DialogPrimitive.DialogContentProps & { - class?: string | undefined - children?: JSX.Element - } + class?: string | undefined; + children?: JSX.Element; + }; -const DialogContent = ( +const DialogContent = ( props: PolymorphicProps> ) => { - const [, rest] = splitProps(props as DialogContentProps, ["class", "children"]) + const [, rest] = splitProps(props as DialogContentProps, [ + 'class', + 'children', + ]); return ( {props.children} - + ( - ) -} + ); +}; -const DialogHeader: Component> = (props) => { - const [, rest] = splitProps(props, ["class"]) - return ( -
    - ) -} - -const DialogFooter: Component> = (props) => { - const [, rest] = splitProps(props, ["class"]) +const DialogHeader: Component> = (props) => { + const [, rest] = splitProps(props, ['class']); return (
    - ) -} + ); +}; -type DialogTitleProps = DialogPrimitive.DialogTitleProps & { - class?: string | undefined -} +const DialogFooter: Component> = (props) => { + const [, rest] = splitProps(props, ['class']); + return ( +
    + ); +}; -const DialogTitle = ( +type DialogTitleProps = + DialogPrimitive.DialogTitleProps & { + class?: string | undefined; + }; + +const DialogTitle = ( props: PolymorphicProps> ) => { - const [, rest] = splitProps(props as DialogTitleProps, ["class"]) + const [, rest] = splitProps(props as DialogTitleProps, ['class']); return ( - ) -} + ); +}; -type DialogDescriptionProps = +type DialogDescriptionProps = DialogPrimitive.DialogDescriptionProps & { - class?: string | undefined - } + class?: string | undefined; + }; -const DialogDescription = ( +const DialogDescription = ( props: PolymorphicProps> ) => { - const [, rest] = splitProps(props as DialogDescriptionProps, ["class"]) + const [, rest] = splitProps(props as DialogDescriptionProps, ['class']); return ( - ) -} + ); +}; export { Dialog, @@ -137,5 +153,5 @@ export { DialogHeader, DialogFooter, DialogTitle, - DialogDescription -} + DialogDescription, +}; diff --git a/apps/webui/src/components/ui/drawer.tsx b/apps/webui/src/components/ui/drawer.tsx index 935a32c..ee59b92 100644 --- a/apps/webui/src/components/ui/drawer.tsx +++ b/apps/webui/src/components/ui/drawer.tsx @@ -1,61 +1,66 @@ -import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js" -import { splitProps } from "solid-js" +import type { Component, ComponentProps, JSX, ValidComponent } from 'solid-js'; +import { splitProps } from 'solid-js'; import type { ContentProps, DescriptionProps, DynamicProps, LabelProps, - OverlayProps -} from "@corvu/drawer" -import DrawerPrimitive from "@corvu/drawer" + OverlayProps, +} from '@corvu/drawer'; +import DrawerPrimitive from '@corvu/drawer'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; -const Drawer = DrawerPrimitive +const Drawer = DrawerPrimitive; -const DrawerTrigger = DrawerPrimitive.Trigger +const DrawerTrigger = DrawerPrimitive.Trigger; -const DrawerPortal = DrawerPrimitive.Portal +const DrawerPortal = DrawerPrimitive.Portal; -const DrawerClose = DrawerPrimitive.Close +const DrawerClose = DrawerPrimitive.Close; -type DrawerOverlayProps = OverlayProps & { class?: string } +type DrawerOverlayProps = OverlayProps & { + class?: string; +}; -const DrawerOverlay = ( +const DrawerOverlay = ( props: DynamicProps> ) => { - const [, rest] = splitProps(props as DrawerOverlayProps, ["class"]) - const drawerContext = DrawerPrimitive.useContext() + const [, rest] = splitProps(props as DrawerOverlayProps, ['class']); + const drawerContext = DrawerPrimitive.useContext(); return ( - ) -} + ); +}; -type DrawerContentProps = ContentProps & { - class?: string - children?: JSX.Element -} +type DrawerContentProps = ContentProps & { + class?: string; + children?: JSX.Element; +}; -const DrawerContent = ( +const DrawerContent = ( props: DynamicProps> ) => { - const [, rest] = splitProps(props as DrawerContentProps, ["class", "children"]) + const [, rest] = splitProps(props as DrawerContentProps, [ + 'class', + 'children', + ]); return ( ( {props.children} - ) -} + ); +}; -const DrawerHeader: Component> = (props) => { - const [, rest] = splitProps(props, ["class"]) - return
    -} +const DrawerHeader: Component> = (props) => { + const [, rest] = splitProps(props, ['class']); + return ( +
    + ); +}; -const DrawerFooter: Component> = (props) => { - const [, rest] = splitProps(props, ["class"]) - return
    -} +const DrawerFooter: Component> = (props) => { + const [, rest] = splitProps(props, ['class']); + return ( +
    + ); +}; -type DrawerTitleProps = LabelProps & { class?: string } +type DrawerTitleProps = LabelProps & { + class?: string; +}; -const DrawerTitle = ( +const DrawerTitle = ( props: DynamicProps> ) => { - const [, rest] = splitProps(props as DrawerTitleProps, ["class"]) + const [, rest] = splitProps(props as DrawerTitleProps, ['class']); return ( - ) -} + ); +}; -type DrawerDescriptionProps = DescriptionProps & { - class?: string -} +type DrawerDescriptionProps = + DescriptionProps & { + class?: string; + }; -const DrawerDescription = ( +const DrawerDescription = ( props: DynamicProps> ) => { - const [, rest] = splitProps(props as DrawerDescriptionProps, ["class"]) + const [, rest] = splitProps(props as DrawerDescriptionProps, ['class']); return ( - ) -} + ); +}; export { Drawer, @@ -117,5 +135,5 @@ export { DrawerHeader, DrawerFooter, DrawerTitle, - DrawerDescription -} + DrawerDescription, +}; diff --git a/apps/webui/src/components/ui/dropdown-menu.tsx b/apps/webui/src/components/ui/dropdown-menu.tsx index e6f3e53..47436a6 100644 --- a/apps/webui/src/components/ui/dropdown-menu.tsx +++ b/apps/webui/src/components/ui/dropdown-menu.tsx @@ -1,109 +1,125 @@ -import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js" -import { splitProps } from "solid-js" +import type { Component, ComponentProps, JSX, ValidComponent } from 'solid-js'; +import { splitProps } from 'solid-js'; -import * as DropdownMenuPrimitive from "@kobalte/core/dropdown-menu" -import type { PolymorphicProps } from "@kobalte/core/polymorphic" +import * as DropdownMenuPrimitive from '@kobalte/core/dropdown-menu'; +import type { PolymorphicProps } from '@kobalte/core/polymorphic'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; -const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger -const DropdownMenuPortal = DropdownMenuPrimitive.Portal -const DropdownMenuSub = DropdownMenuPrimitive.Sub -const DropdownMenuGroup = DropdownMenuPrimitive.Group -const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup +const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger; +const DropdownMenuPortal = DropdownMenuPrimitive.Portal; +const DropdownMenuSub = DropdownMenuPrimitive.Sub; +const DropdownMenuGroup = DropdownMenuPrimitive.Group; +const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup; -const DropdownMenu: Component = (props) => { - return -} +const DropdownMenu: Component = ( + props +) => { + return ; +}; -type DropdownMenuContentProps = +type DropdownMenuContentProps = DropdownMenuPrimitive.DropdownMenuContentProps & { - class?: string | undefined - } + class?: string | undefined; + }; -const DropdownMenuContent = ( +const DropdownMenuContent = ( props: PolymorphicProps> ) => { - const [, rest] = splitProps(props as DropdownMenuContentProps, ["class"]) + const [, rest] = splitProps(props as DropdownMenuContentProps, ['class']); return ( - ) -} + ); +}; -type DropdownMenuItemProps = +type DropdownMenuItemProps = DropdownMenuPrimitive.DropdownMenuItemProps & { - class?: string | undefined - } + class?: string | undefined; + }; -const DropdownMenuItem = ( +const DropdownMenuItem = ( props: PolymorphicProps> ) => { - const [, rest] = splitProps(props as DropdownMenuItemProps, ["class"]) + const [, rest] = splitProps(props as DropdownMenuItemProps, ['class']); return ( - ) -} + ); +}; -const DropdownMenuShortcut: Component> = (props) => { - const [, rest] = splitProps(props, ["class"]) - return -} +const DropdownMenuShortcut: Component> = (props) => { + const [, rest] = splitProps(props, ['class']); + return ( + + ); +}; -const DropdownMenuLabel: Component & { inset?: boolean }> = (props) => { - const [, rest] = splitProps(props, ["class", "inset"]) +const DropdownMenuLabel: Component< + ComponentProps<'div'> & { inset?: boolean } +> = (props) => { + const [, rest] = splitProps(props, ['class', 'inset']); return (
    - ) -} + ); +}; -type DropdownMenuSeparatorProps = +type DropdownMenuSeparatorProps = DropdownMenuPrimitive.DropdownMenuSeparatorProps & { - class?: string | undefined - } + class?: string | undefined; + }; -const DropdownMenuSeparator = ( +const DropdownMenuSeparator = ( props: PolymorphicProps> ) => { - const [, rest] = splitProps(props as DropdownMenuSeparatorProps, ["class"]) + const [, rest] = splitProps(props as DropdownMenuSeparatorProps, ['class']); return ( - ) -} + ); +}; -type DropdownMenuSubTriggerProps = +type DropdownMenuSubTriggerProps = DropdownMenuPrimitive.DropdownMenuSubTriggerProps & { - class?: string | undefined - children?: JSX.Element - } + class?: string | undefined; + children?: JSX.Element; + }; -const DropdownMenuSubTrigger = ( +const DropdownMenuSubTrigger = ( props: PolymorphicProps> ) => { - const [, rest] = splitProps(props as DropdownMenuSubTriggerProps, ["class", "children"]) + const [, rest] = splitProps(props as DropdownMenuSubTriggerProps, [ + 'class', + 'children', + ]); return ( ( - ) -} + ); +}; -type DropdownMenuSubContentProps = +type DropdownMenuSubContentProps = DropdownMenuPrimitive.DropdownMenuSubContentProps & { - class?: string | undefined - } + class?: string | undefined; + }; -const DropdownMenuSubContent = ( +const DropdownMenuSubContent = ( props: PolymorphicProps> ) => { - const [, rest] = splitProps(props as DropdownMenuSubContentProps, ["class"]) + const [, rest] = splitProps(props as DropdownMenuSubContentProps, ['class']); return ( - ) -} + ); +}; -type DropdownMenuCheckboxItemProps = +type DropdownMenuCheckboxItemProps = DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & { - class?: string | undefined - children?: JSX.Element - } + class?: string | undefined; + children?: JSX.Element; + }; -const DropdownMenuCheckboxItem = ( +const DropdownMenuCheckboxItem = ( props: PolymorphicProps> ) => { - const [, rest] = splitProps(props as DropdownMenuCheckboxItemProps, ["class", "children"]) + const [, rest] = splitProps(props as DropdownMenuCheckboxItemProps, [ + 'class', + 'children', + ]); return ( ( {props.children} - ) -} + ); +}; -type DropdownMenuGroupLabelProps = +type DropdownMenuGroupLabelProps = DropdownMenuPrimitive.DropdownMenuGroupLabelProps & { - class?: string | undefined - } + class?: string | undefined; + }; -const DropdownMenuGroupLabel = ( +const DropdownMenuGroupLabel = ( props: PolymorphicProps> ) => { - const [, rest] = splitProps(props as DropdownMenuGroupLabelProps, ["class"]) + const [, rest] = splitProps(props as DropdownMenuGroupLabelProps, ['class']); return ( - ) -} + ); +}; -type DropdownMenuRadioItemProps = +type DropdownMenuRadioItemProps = DropdownMenuPrimitive.DropdownMenuRadioItemProps & { - class?: string | undefined - children?: JSX.Element - } + class?: string | undefined; + children?: JSX.Element; + }; -const DropdownMenuRadioItem = ( +const DropdownMenuRadioItem = ( props: PolymorphicProps> ) => { - const [, rest] = splitProps(props as DropdownMenuRadioItemProps, ["class", "children"]) + const [, rest] = splitProps(props as DropdownMenuRadioItemProps, [ + 'class', + 'children', + ]); return ( ( {props.children} - ) -} + ); +}; export { DropdownMenu, @@ -256,5 +278,5 @@ export { DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuRadioGroup, - DropdownMenuRadioItem -} + DropdownMenuRadioItem, +}; diff --git a/apps/webui/src/components/ui/flex.tsx b/apps/webui/src/components/ui/flex.tsx index a6d9bd8..19d74a8 100644 --- a/apps/webui/src/components/ui/flex.tsx +++ b/apps/webui/src/components/ui/flex.tsx @@ -1,38 +1,44 @@ -import type { Component, ComponentProps } from "solid-js" -import { mergeProps, splitProps } from "solid-js" +import type { Component, ComponentProps } from 'solid-js'; +import { mergeProps, splitProps } from 'solid-js'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; -type JustifyContent = "start" | "end" | "center" | "between" | "around" | "evenly" -type AlignItems = "start" | "end" | "center" | "baseline" | "stretch" -type FlexDirection = "row" | "col" | "row-reverse" | "col-reverse" +type JustifyContent = + | 'start' + | 'end' + | 'center' + | 'between' + | 'around' + | 'evenly'; +type AlignItems = 'start' | 'end' | 'center' | 'baseline' | 'stretch'; +type FlexDirection = 'row' | 'col' | 'row-reverse' | 'col-reverse'; -type FlexProps = ComponentProps<"div"> & { - flexDirection?: FlexDirection - justifyContent?: JustifyContent - alignItems?: AlignItems -} +type FlexProps = ComponentProps<'div'> & { + flexDirection?: FlexDirection; + justifyContent?: JustifyContent; + alignItems?: AlignItems; +}; const Flex: Component = (rawProps) => { const props = mergeProps( { - flexDirection: "row", - justifyContent: "between", - alignItems: "center" + flexDirection: 'row', + justifyContent: 'between', + alignItems: 'center', } satisfies FlexProps, rawProps - ) + ); const [local, others] = splitProps(props, [ - "flexDirection", - "justifyContent", - "alignItems", - "class" - ]) + 'flexDirection', + 'justifyContent', + 'alignItems', + 'class', + ]); return (
    = (rawProps) => { )} {...others} /> - ) -} + ); +}; -export { Flex } +export { Flex }; const justifyContentClassNames: { [key in JustifyContent]: string } = { - start: "justify-start", - end: "justify-end", - center: "justify-center", - between: "justify-between", - around: "justify-around", - evenly: "justify-evenly" -} + start: 'justify-start', + end: 'justify-end', + center: 'justify-center', + between: 'justify-between', + around: 'justify-around', + evenly: 'justify-evenly', +}; const alignItemsClassNames: { [key in AlignItems]: string } = { - start: "items-start", - end: "items-end", - center: "items-center", - baseline: "items-baseline", - stretch: "items-stretch" -} + start: 'items-start', + end: 'items-end', + center: 'items-center', + baseline: 'items-baseline', + stretch: 'items-stretch', +}; const flexDirectionClassNames: { [key in FlexDirection]: string } = { - row: "flex-row", - col: "flex-col", - "row-reverse": "flex-row-reverse", - "col-reverse": "flex-col-reverse" -} + row: 'flex-row', + col: 'flex-col', + 'row-reverse': 'flex-row-reverse', + 'col-reverse': 'flex-col-reverse', +}; diff --git a/apps/webui/src/components/ui/grid.tsx b/apps/webui/src/components/ui/grid.tsx index 1604562..ea159d5 100644 --- a/apps/webui/src/components/ui/grid.tsx +++ b/apps/webui/src/components/ui/grid.tsx @@ -1,26 +1,32 @@ -import type { Component, ComponentProps } from "solid-js" -import { mergeProps, splitProps } from "solid-js" +import type { Component, ComponentProps } from 'solid-js'; +import { mergeProps, splitProps } from 'solid-js'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; -type Cols = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 -type Span = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 +type Cols = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; +type Span = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13; -type GridProps = ComponentProps<"div"> & { - cols?: Cols - colsSm?: Cols - colsMd?: Cols - colsLg?: Cols -} +type GridProps = ComponentProps<'div'> & { + cols?: Cols; + colsSm?: Cols; + colsMd?: Cols; + colsLg?: Cols; +}; const Grid: Component = (rawProps) => { - const props = mergeProps({ cols: 1 } satisfies GridProps, rawProps) - const [local, others] = splitProps(props, ["cols", "colsSm", "colsMd", "colsLg", "class"]) + const props = mergeProps({ cols: 1 } satisfies GridProps, rawProps); + const [local, others] = splitProps(props, [ + 'cols', + 'colsSm', + 'colsMd', + 'colsLg', + 'class', + ]); return (
    = (rawProps) => { )} {...others} /> - ) -} + ); +}; -type ColProps = ComponentProps<"div"> & { - span?: Span - spanSm?: Span - spanMd?: Span - spanLg?: Span -} +type ColProps = ComponentProps<'div'> & { + span?: Span; + spanSm?: Span; + spanMd?: Span; + spanLg?: Span; +}; const Col: Component = (rawProps) => { - const props = mergeProps({ span: 1 as Span }, rawProps) - const [local, others] = splitProps(props, ["span", "spanSm", "spanMd", "spanLg", "class"]) + const props = mergeProps({ span: 1 as Span }, rawProps); + const [local, others] = splitProps(props, [ + 'span', + 'spanSm', + 'spanMd', + 'spanLg', + 'class', + ]); return (
    = (rawProps) => { )} {...others} /> - ) -} + ); +}; -export { Grid, Col } +export { Grid, Col }; const gridCols: { [key in Cols]: string } = { - 0: "grid-cols-none", - 1: "grid-cols-1", - 2: "grid-cols-2", - 3: "grid-cols-3", - 4: "grid-cols-4", - 5: "grid-cols-5", - 6: "grid-cols-6", - 7: "grid-cols-7", - 8: "grid-cols-8", - 9: "grid-cols-9", - 10: "grid-cols-10", - 11: "grid-cols-11", - 12: "grid-cols-12" -} + 0: 'grid-cols-none', + 1: 'grid-cols-1', + 2: 'grid-cols-2', + 3: 'grid-cols-3', + 4: 'grid-cols-4', + 5: 'grid-cols-5', + 6: 'grid-cols-6', + 7: 'grid-cols-7', + 8: 'grid-cols-8', + 9: 'grid-cols-9', + 10: 'grid-cols-10', + 11: 'grid-cols-11', + 12: 'grid-cols-12', +}; const gridColsSm: { [key in Cols]: string } = { - 0: "sm:grid-cols-none", - 1: "sm:grid-cols-1", - 2: "sm:grid-cols-2", - 3: "sm:grid-cols-3", - 4: "sm:grid-cols-4", - 5: "sm:grid-cols-5", - 6: "sm:grid-cols-6", - 7: "sm:grid-cols-7", - 8: "sm:grid-cols-8", - 9: "sm:grid-cols-9", - 10: "sm:grid-cols-10", - 11: "sm:grid-cols-11", - 12: "sm:grid-cols-12" -} + 0: 'sm:grid-cols-none', + 1: 'sm:grid-cols-1', + 2: 'sm:grid-cols-2', + 3: 'sm:grid-cols-3', + 4: 'sm:grid-cols-4', + 5: 'sm:grid-cols-5', + 6: 'sm:grid-cols-6', + 7: 'sm:grid-cols-7', + 8: 'sm:grid-cols-8', + 9: 'sm:grid-cols-9', + 10: 'sm:grid-cols-10', + 11: 'sm:grid-cols-11', + 12: 'sm:grid-cols-12', +}; const gridColsMd: { [key in Cols]: string } = { - 0: "md:grid-cols-none", - 1: "md:grid-cols-1", - 2: "md:grid-cols-2", - 3: "md:grid-cols-3", - 4: "md:grid-cols-4", - 5: "md:grid-cols-5", - 6: "md:grid-cols-6", - 7: "md:grid-cols-7", - 8: "md:grid-cols-8", - 9: "md:grid-cols-9", - 10: "md:grid-cols-10", - 11: "md:grid-cols-11", - 12: "md:grid-cols-12" -} + 0: 'md:grid-cols-none', + 1: 'md:grid-cols-1', + 2: 'md:grid-cols-2', + 3: 'md:grid-cols-3', + 4: 'md:grid-cols-4', + 5: 'md:grid-cols-5', + 6: 'md:grid-cols-6', + 7: 'md:grid-cols-7', + 8: 'md:grid-cols-8', + 9: 'md:grid-cols-9', + 10: 'md:grid-cols-10', + 11: 'md:grid-cols-11', + 12: 'md:grid-cols-12', +}; const gridColsLg: { [key in Cols]: string } = { - 0: "lg:grid-cols-none", - 1: "lg:grid-cols-1", - 2: "lg:grid-cols-2", - 3: "lg:grid-cols-3", - 4: "lg:grid-cols-4", - 5: "lg:grid-cols-5", - 6: "lg:grid-cols-6", - 7: "lg:grid-cols-7", - 8: "lg:grid-cols-8", - 9: "lg:grid-cols-9", - 10: "lg:grid-cols-10", - 11: "lg:grid-cols-11", - 12: "lg:grid-cols-12" -} + 0: 'lg:grid-cols-none', + 1: 'lg:grid-cols-1', + 2: 'lg:grid-cols-2', + 3: 'lg:grid-cols-3', + 4: 'lg:grid-cols-4', + 5: 'lg:grid-cols-5', + 6: 'lg:grid-cols-6', + 7: 'lg:grid-cols-7', + 8: 'lg:grid-cols-8', + 9: 'lg:grid-cols-9', + 10: 'lg:grid-cols-10', + 11: 'lg:grid-cols-11', + 12: 'lg:grid-cols-12', +}; const colSpan: { [key in Span]: string } = { - 1: "col-span-1", - 2: "col-span-2", - 3: "col-span-3", - 4: "col-span-4", - 5: "col-span-5", - 6: "col-span-6", - 7: "col-span-7", - 8: "col-span-8", - 9: "col-span-9", - 10: "col-span-10", - 11: "col-span-11", - 12: "col-span-12", - 13: "col-span-13" -} + 1: 'col-span-1', + 2: 'col-span-2', + 3: 'col-span-3', + 4: 'col-span-4', + 5: 'col-span-5', + 6: 'col-span-6', + 7: 'col-span-7', + 8: 'col-span-8', + 9: 'col-span-9', + 10: 'col-span-10', + 11: 'col-span-11', + 12: 'col-span-12', + 13: 'col-span-13', +}; const colSpanSm: { [key in Span]: string } = { - 1: "sm:col-span-1", - 2: "sm:col-span-2", - 3: "sm:col-span-3", - 4: "sm:col-span-4", - 5: "sm:col-span-5", - 6: "sm:col-span-6", - 7: "sm:col-span-7", - 8: "sm:col-span-8", - 9: "sm:col-span-9", - 10: "sm:col-span-10", - 11: "sm:col-span-11", - 12: "sm:col-span-12", - 13: "sm:col-span-13" -} + 1: 'sm:col-span-1', + 2: 'sm:col-span-2', + 3: 'sm:col-span-3', + 4: 'sm:col-span-4', + 5: 'sm:col-span-5', + 6: 'sm:col-span-6', + 7: 'sm:col-span-7', + 8: 'sm:col-span-8', + 9: 'sm:col-span-9', + 10: 'sm:col-span-10', + 11: 'sm:col-span-11', + 12: 'sm:col-span-12', + 13: 'sm:col-span-13', +}; const colSpanMd: { [key in Span]: string } = { - 1: "md:col-span-1", - 2: "md:col-span-2", - 3: "md:col-span-3", - 4: "md:col-span-4", - 5: "md:col-span-5", - 6: "md:col-span-6", - 7: "md:col-span-7", - 8: "md:col-span-8", - 9: "md:col-span-9", - 10: "md:col-span-10", - 11: "md:col-span-11", - 12: "md:col-span-12", - 13: "md:col-span-13" -} + 1: 'md:col-span-1', + 2: 'md:col-span-2', + 3: 'md:col-span-3', + 4: 'md:col-span-4', + 5: 'md:col-span-5', + 6: 'md:col-span-6', + 7: 'md:col-span-7', + 8: 'md:col-span-8', + 9: 'md:col-span-9', + 10: 'md:col-span-10', + 11: 'md:col-span-11', + 12: 'md:col-span-12', + 13: 'md:col-span-13', +}; const colSpanLg: { [key in Span]: string } = { - 1: "lg:col-span-1", - 2: "lg:col-span-2", - 3: "lg:col-span-3", - 4: "lg:col-span-4", - 5: "lg:col-span-5", - 6: "lg:col-span-6", - 7: "lg:col-span-7", - 8: "lg:col-span-8", - 9: "lg:col-span-9", - 10: "lg:col-span-10", - 11: "lg:col-span-11", - 12: "lg:col-span-12", - 13: "lg:col-span-13" -} + 1: 'lg:col-span-1', + 2: 'lg:col-span-2', + 3: 'lg:col-span-3', + 4: 'lg:col-span-4', + 5: 'lg:col-span-5', + 6: 'lg:col-span-6', + 7: 'lg:col-span-7', + 8: 'lg:col-span-8', + 9: 'lg:col-span-9', + 10: 'lg:col-span-10', + 11: 'lg:col-span-11', + 12: 'lg:col-span-12', + 13: 'lg:col-span-13', +}; diff --git a/apps/webui/src/components/ui/hover-card.tsx b/apps/webui/src/components/ui/hover-card.tsx index 4e7f9e0..d42aa0e 100644 --- a/apps/webui/src/components/ui/hover-card.tsx +++ b/apps/webui/src/components/ui/hover-card.tsx @@ -1,37 +1,37 @@ -import type { Component, ValidComponent } from "solid-js" -import { splitProps } from "solid-js" +import type { Component, ValidComponent } from 'solid-js'; +import { splitProps } from 'solid-js'; -import * as HoverCardPrimitive from "@kobalte/core/hover-card" -import type { PolymorphicProps } from "@kobalte/core/polymorphic" +import * as HoverCardPrimitive from '@kobalte/core/hover-card'; +import type { PolymorphicProps } from '@kobalte/core/polymorphic'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; -const HoverCardTrigger = HoverCardPrimitive.Trigger +const HoverCardTrigger = HoverCardPrimitive.Trigger; const HoverCard: Component = (props) => { - return -} + return ; +}; -type HoverCardContentProps = +type HoverCardContentProps = HoverCardPrimitive.HoverCardContentProps & { - class?: string | undefined - } + class?: string | undefined; + }; -const HoverCardContent = ( +const HoverCardContent = ( props: PolymorphicProps> ) => { - const [local, others] = splitProps(props as HoverCardContentProps, ["class"]) + const [local, others] = splitProps(props as HoverCardContentProps, ['class']); return ( - ) -} + ); +}; -export { HoverCard, HoverCardTrigger, HoverCardContent } +export { HoverCard, HoverCardTrigger, HoverCardContent }; diff --git a/apps/webui/src/components/ui/label.tsx b/apps/webui/src/components/ui/label.tsx index f88b11d..9687bad 100644 --- a/apps/webui/src/components/ui/label.tsx +++ b/apps/webui/src/components/ui/label.tsx @@ -1,19 +1,19 @@ -import type { Component, ComponentProps } from "solid-js" -import { splitProps } from "solid-js" +import type { Component, ComponentProps } from 'solid-js'; +import { splitProps } from 'solid-js'; -import { cn } from "~/styles/utils" +import { cn } from '~/utils/styles'; -const Label: Component> = (props) => { - const [local, others] = splitProps(props, ["class"]) +const Label: Component> = (props) => { + const [local, others] = splitProps(props, ['class']); return (