{user.nickname}
diff --git a/client/cms/src/components/theme-provider.tsx b/client/cms/src/components/theme-provider.tsx
index 14bc663..9a03852 100644
--- a/client/cms/src/components/theme-provider.tsx
+++ b/client/cms/src/components/theme-provider.tsx
@@ -36,7 +36,6 @@ export function ThemeProvider({
root.classList.add(theme);
}, [theme]);
- // eslint-disable-next-line react/no-unstable-context-value
const value = {
theme,
setTheme: (theme: Theme) => {
diff --git a/client/cms/src/components/ui/combobox.tsx b/client/cms/src/components/ui/combobox.tsx
new file mode 100644
index 0000000..2f9df6d
--- /dev/null
+++ b/client/cms/src/components/ui/combobox.tsx
@@ -0,0 +1,310 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+ InputGroup,
+ InputGroupAddon,
+ InputGroupButton,
+ InputGroupInput,
+} from "@/components/ui/input-group"
+
+const Combobox = ComboboxPrimitive.Root
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+ return
+}
+
+function ComboboxTrigger({
+ className,
+ children,
+ ...props
+}: ComboboxPrimitive.Trigger.Props) {
+ return (
+
+ {children}
+
+
+ )
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+ return (
+
}
+ className={cn(className)}
+ {...props}
+ >
+
+
+ )
+}
+
+function ComboboxInput({
+ className,
+ children,
+ disabled = false,
+ showTrigger = true,
+ showClear = false,
+ ...props
+}: ComboboxPrimitive.Input.Props & {
+ showTrigger?: boolean
+ showClear?: boolean
+}) {
+ return (
+
+ }
+ {...props}
+ />
+
+ {showTrigger && (
+
+
+
+ )}
+ {showClear && }
+
+ {children}
+
+ )
+}
+
+function ComboboxContent({
+ className,
+ side = "bottom",
+ sideOffset = 6,
+ align = "start",
+ alignOffset = 0,
+ anchor,
+ ...props
+}: ComboboxPrimitive.Popup.Props &
+ Pick<
+ ComboboxPrimitive.Positioner.Props,
+ "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+ >) {
+ return (
+
+
+
+
+
+ )
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+ return (
+
+ )
+}
+
+function ComboboxItem({
+ className,
+ children,
+ ...props
+}: ComboboxPrimitive.Item.Props) {
+ return (
+
+ {children}
+
+ }
+ >
+
+
+
+ )
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+ return (
+
+ )
+}
+
+function ComboboxLabel({
+ className,
+ ...props
+}: ComboboxPrimitive.GroupLabel.Props) {
+ return (
+
+ )
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+ return (
+
+ )
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+ return (
+
+ )
+}
+
+function ComboboxSeparator({
+ className,
+ ...props
+}: ComboboxPrimitive.Separator.Props) {
+ return (
+
+ )
+}
+
+function ComboboxChips({
+ className,
+ ...props
+}: React.ComponentPropsWithRef
&
+ ComboboxPrimitive.Chips.Props) {
+ return (
+
+ )
+}
+
+function ComboboxChip({
+ className,
+ children,
+ showRemove = true,
+ ...props
+}: ComboboxPrimitive.Chip.Props & {
+ showRemove?: boolean
+}) {
+ return (
+
+ {children}
+ {showRemove && (
+ }
+ className="-ml-1 opacity-50 hover:opacity-100"
+ data-slot="combobox-chip-remove"
+ >
+
+
+ )}
+
+ )
+}
+
+function ComboboxChipsInput({
+ className,
+ children,
+ ...props
+}: ComboboxPrimitive.Input.Props) {
+ return (
+
+ )
+}
+
+function useComboboxAnchor() {
+ return React.useRef(null)
+}
+
+export {
+ Combobox,
+ ComboboxInput,
+ ComboboxContent,
+ ComboboxList,
+ ComboboxItem,
+ ComboboxGroup,
+ ComboboxLabel,
+ ComboboxCollection,
+ ComboboxEmpty,
+ ComboboxSeparator,
+ ComboboxChips,
+ ComboboxChip,
+ ComboboxChipsInput,
+ ComboboxTrigger,
+ ComboboxValue,
+ useComboboxAnchor,
+}
diff --git a/client/cms/src/components/ui/input-group.tsx b/client/cms/src/components/ui/input-group.tsx
new file mode 100644
index 0000000..6db1784
--- /dev/null
+++ b/client/cms/src/components/ui/input-group.tsx
@@ -0,0 +1,168 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ textarea]:h-auto",
+
+ // Variants based on alignment.
+ "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+ "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+ "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+ "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+ // Focus state.
+ "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+
+ // Error state.
+ "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+const inputGroupAddonVariants = cva(
+ "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+ {
+ variants: {
+ align: {
+ "inline-start":
+ "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+ "inline-end":
+ "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+ "block-start":
+ "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+ "block-end":
+ "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
+ },
+ },
+ defaultVariants: {
+ align: "inline-start",
+ },
+ }
+)
+
+function InputGroupAddon({
+ className,
+ align = "inline-start",
+ ...props
+}: React.ComponentProps<"div"> & VariantProps
) {
+ return (
+ {
+ if ((e.target as HTMLElement).closest("button")) {
+ return
+ }
+ e.currentTarget.parentElement?.querySelector("input")?.focus()
+ }}
+ {...props}
+ />
+ )
+}
+
+const inputGroupButtonVariants = cva(
+ "text-sm shadow-none flex gap-2 items-center",
+ {
+ variants: {
+ size: {
+ xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+ sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+ "icon-xs":
+ "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+ "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+ },
+ },
+ defaultVariants: {
+ size: "xs",
+ },
+ }
+)
+
+function InputGroupButton({
+ className,
+ type = "button",
+ variant = "ghost",
+ size = "xs",
+ ...props
+}: Omit
, "size"> &
+ VariantProps) {
+ return (
+
+ )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+ return (
+
+ )
+}
+
+function InputGroupInput({
+ className,
+ ...props
+}: React.ComponentProps<"input">) {
+ return (
+
+ )
+}
+
+function InputGroupTextarea({
+ className,
+ ...props
+}: React.ComponentProps<"textarea">) {
+ return (
+
+ )
+}
+
+export {
+ InputGroup,
+ InputGroupAddon,
+ InputGroupButton,
+ InputGroupText,
+ InputGroupInput,
+ InputGroupTextarea,
+}
diff --git a/client/cms/src/components/ui/switch.tsx b/client/cms/src/components/ui/switch.tsx
new file mode 100644
index 0000000..f4ffc3e
--- /dev/null
+++ b/client/cms/src/components/ui/switch.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+ className,
+ size = "default",
+ ...props
+}: React.ComponentProps & {
+ size?: "sm" | "default"
+}) {
+ return (
+
+
+
+ )
+}
+
+export { Switch }
diff --git a/client/cms/src/components/ui/textarea.tsx b/client/cms/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..7f21b5e
--- /dev/null
+++ b/client/cms/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+ return (
+
+ )
+}
+
+export { Textarea }
diff --git a/client/cms/src/hooks/data/useExchangeToken.ts b/client/cms/src/hooks/data/useExchangeToken.ts
index 99c5df8..92f153d 100644
--- a/client/cms/src/hooks/data/useExchangeToken.ts
+++ b/client/cms/src/hooks/data/useExchangeToken.ts
@@ -1,6 +1,6 @@
-import { postAuthExchangeMutation } from "@/client/@tanstack/react-query.gen";
-import { useMutation } from "@tanstack/react-query";
-import { toast } from "sonner";
+import { useMutation } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { postAuthExchangeMutation } from '@/client/@tanstack/react-query.gen';
export function useExchangeToken() {
return useMutation({
@@ -10,7 +10,7 @@ export function useExchangeToken() {
},
onError: (error) => {
console.error(error);
- toast("An error occurred while exchanging the token. Please login manually.");
- }
- })
+ toast('An error occurred while exchanging the token. Please login manually.');
+ },
+ });
}
diff --git a/client/cms/src/hooks/data/useGetMagicLink.ts b/client/cms/src/hooks/data/useGetMagicLink.ts
index 0fc0e61..64484dc 100644
--- a/client/cms/src/hooks/data/useGetMagicLink.ts
+++ b/client/cms/src/hooks/data/useGetMagicLink.ts
@@ -1,8 +1,8 @@
-import { postAuthMagicMutation } from '@/client/@tanstack/react-query.gen';
import { useMutation } from '@tanstack/react-query';
+import { postAuthMagicMutation } from '@/client/@tanstack/react-query.gen';
export function useGetMagicLink() {
return useMutation({
- ...postAuthMagicMutation()
- })
+ ...postAuthMagicMutation(),
+ });
}
diff --git a/client/cms/src/hooks/data/useUpdateUser.ts b/client/cms/src/hooks/data/useUpdateUser.ts
index 6988dca..9fe2efe 100644
--- a/client/cms/src/hooks/data/useUpdateUser.ts
+++ b/client/cms/src/hooks/data/useUpdateUser.ts
@@ -1,5 +1,5 @@
-import { getUserInfoQueryKey, patchUserUpdateMutation } from '@/client/@tanstack/react-query.gen';
import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { getUserInfoQueryKey, patchUserUpdateMutation } from '@/client/@tanstack/react-query.gen';
export function useUpdateUser() {
const queryClient = useQueryClient();
@@ -8,5 +8,5 @@ export function useUpdateUser() {
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: getUserInfoQueryKey() });
},
- })
+ });
}
diff --git a/client/cms/src/hooks/data/useUserInfo.ts b/client/cms/src/hooks/data/useUserInfo.ts
index fde0174..db64bd6 100644
--- a/client/cms/src/hooks/data/useUserInfo.ts
+++ b/client/cms/src/hooks/data/useUserInfo.ts
@@ -1,9 +1,9 @@
-import { getUserInfoOptions } from '@/client/@tanstack/react-query.gen';
import { useSuspenseQuery } from '@tanstack/react-query';
+import { getUserInfoOptions } from '@/client/@tanstack/react-query.gen';
export function useUserInfo() {
return useSuspenseQuery({
...getUserInfoOptions(),
- staleTime: 10 * 60 * 1000
+ staleTime: 10 * 60 * 1000,
});
}
diff --git a/client/cms/src/lib/client.ts b/client/cms/src/lib/client.ts
index be66d6d..452fb0d 100644
--- a/client/cms/src/lib/client.ts
+++ b/client/cms/src/lib/client.ts
@@ -1,15 +1,14 @@
+import { isEmpty, isNil } from 'lodash-es';
+import { client } from '@/client/client.gen';
+import { router } from './router';
import {
- getToken,
- getRefreshToken,
- setToken,
- setRefreshToken,
clearTokens,
- doRefreshToken
-} from "./token";
-import { router } from "./router";
-import { isEmpty,
- isNil } from "lodash-es";
-import { client } from "@/client/client.gen";
+ doRefreshToken,
+ getRefreshToken,
+ getToken,
+ setRefreshToken,
+ setToken,
+} from './token';
export function configInternalApiClient() {
client.setConfig({
@@ -50,7 +49,8 @@ export function configInternalApiClient() {
signal: request.signal,
});
}
- } catch (e) {
+ }
+ catch (e) {
clearTokens();
await router.navigate({ to: '/authorize' });
return response;
@@ -59,5 +59,4 @@ export function configInternalApiClient() {
}
return response;
});
-
}
diff --git a/client/cms/src/lib/token.ts b/client/cms/src/lib/token.ts
index e671f98..469a54e 100644
--- a/client/cms/src/lib/token.ts
+++ b/client/cms/src/lib/token.ts
@@ -1,4 +1,5 @@
-import { postAuthRefresh, type ServiceAuthTokenResponse } from '@/client';
+import type { ServiceAuthTokenResponse } from '@/client';
+import { postAuthRefresh } from '@/client';
export function setToken(token: string) {
localStorage.setItem('token', token);
@@ -32,8 +33,8 @@ export function clearTokens() {
export async function doRefreshToken(): Promise {
const { data } = await postAuthRefresh({
body: {
- refresh_token: getRefreshToken()!
- }
+ refresh_token: getRefreshToken()!,
+ },
});
return data?.data;
}
diff --git a/client/cms/src/routes/authorize.tsx b/client/cms/src/routes/authorize.tsx
index 0688fb4..f8ed2ed 100644
--- a/client/cms/src/routes/authorize.tsx
+++ b/client/cms/src/routes/authorize.tsx
@@ -1,13 +1,12 @@
import { createFileRoute } from '@tanstack/react-router';
import { zodValidator } from '@tanstack/zod-adapter';
import { isNil } from 'lodash-es';
+import { useEffect } from 'react';
import z from 'zod';
import { LoginForm } from '@/components/login-form';
+import { useExchangeToken } from '@/hooks/data/useExchangeToken';
import { generateOAuthState } from '@/lib/random';
import { getToken } from '@/lib/token';
-import { useExchangeToken } from '@/hooks/data/useExchangeToken';
-import { useEffect } from 'react';
-
const baseUrl = import.meta.env.VITE_APP_BASE_URL;
@@ -39,7 +38,7 @@ function RouteComponent() {
client_id: oauthParams.client_id,
redirect_uri: oauthParams.redirect_uri,
state: oauthParams.state,
- }
+ },
});
}
}, [token, mutation.isIdle]);
diff --git a/client/cms/src/routes/token.tsx b/client/cms/src/routes/token.tsx
index 0f6fdb7..b2c26dd 100644
--- a/client/cms/src/routes/token.tsx
+++ b/client/cms/src/routes/token.tsx
@@ -1,10 +1,11 @@
+import { useMutation } from '@tanstack/react-query';
import { createFileRoute, useNavigate } from '@tanstack/react-router';
import {
useEffect,
- useState } from 'react';
+ useState,
+} from 'react';
import z from 'zod';
import { postAuthTokenMutation } from '@/client/@tanstack/react-query.gen';
-import { useMutation } from '@tanstack/react-query';
import { setRefreshToken, setToken } from '@/lib/token';
const tokenCodeSchema = z.object({
@@ -24,20 +25,20 @@ function RouteComponent() {
const mutation = useMutation({
...postAuthTokenMutation(),
onSuccess: (data) => {
- setToken(data.data?.access_token!)
- setRefreshToken(data.data?.refresh_token!)
+ setToken(data.data?.access_token!);
+ setRefreshToken(data.data?.refresh_token!);
void navigate({ to: '/' });
},
onError: () => {
setStatus('Error getting token');
- }
- })
+ },
+ });
useEffect(() => {
if (mutation.isIdle) {
- mutation.mutate({ body: { code } })
+ mutation.mutate({ body: { code } });
}
- }, [])
+ }, []);
return {status}
;
}
diff --git a/client/cms/src/vite.env.d.ts b/client/cms/src/vite.env.d.ts
index ff2503a..4e2b574 100644
--- a/client/cms/src/vite.env.d.ts
+++ b/client/cms/src/vite.env.d.ts
@@ -1,11 +1,11 @@
interface ViteTypeOptions {
- strictImportMetaEnv: unknown
+ strictImportMetaEnv: unknown;
}
interface ImportMetaEnv {
- readonly VITE_APP_BASE_URL: string
+ readonly VITE_APP_BASE_URL: string;
}
interface ImportMeta {
- readonly env: ImportMetaEnv
+ readonly env: ImportMetaEnv;
}