valkyr/boilerplate
Template
1
0
Fork 0
Code Issues Wiki Activity

feat: add payment module

Browse Source
This commit is contained in:
kodemon
2025-12-05 01:56:42 +01:00
parent a818f3135a
commit be9b8e9e55
160 changed files with 8615 additions and 1158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/react/index.html
View File

@@ -8,7 +8,7 @@
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<div id="root" class="w-full"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

10
apps/react/package.json
View File

@@ -31,20 +31,20 @@
"clsx": "^2.1.1",
"fast-equals": "5.2.2",
"lucide-react": "^0.554.0",
"react": "19.1.1",
"react-dom": "19.1.1",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"tailwind-merge": "^3.4.0",
"tailwindcss": "4.1.13",
"tailwindcss-animate": "^1.0.7",
"tw-animate-css": "1.4.0",
"zod": "4.1.12"
"zod": "4.1.13"
},
"devDependencies": {
"@eslint/js": "9.35.0",
"@tailwindcss/vite": "4.1.13",
"@tanstack/react-router-devtools": "1.131.47",
"@types/react": "19.1.13",
"@types/react-dom": "19.1.9",
"@types/react": "^19.2.7",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "4.7.0",
"eslint": "9.35.0",
"eslint-plugin-react-hooks": "5.2.0",

11
apps/react/src/components/nav-user.controller.ts
View File

@@ -1,8 +1,8 @@
import { Controller } from "../libraries/controller.ts";
import { Controller } from "../libraries/controller.tsx";
import { type User as ZitadelUser, zitadel } from "../services/zitadel.ts";
export class NavUserController extends Controller<{
user?: User;
user: User;
}> {
async onInit() {
return {
@@ -10,11 +10,12 @@ export class NavUserController extends Controller<{
};
}
async #getAuthenticatedUser(): Promise<User | undefined> {
async #getAuthenticatedUser(): Promise<User> {
const user = await zitadel.userManager.getUser();
if (user !== null) {
return getUserProfile(user);
if (user === null) {
throw new Error("Failed to resolve user session");
}
return getUserProfile(user);
}
signout() {

71
apps/react/src/components/nav-user.tsx
View File

@@ -13,10 +13,78 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "@/components/ui/sidebar";
import { useController } from "@/libraries/controller.ts";
import { makeControllerComponent } from "../libraries/controller.tsx";
import { NavUserController } from "./nav-user.controller.ts";
export const NavUser = makeControllerComponent(NavUserController, ({ user, signout }) => {
const { isMobile } = useSidebar();
return (
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<SidebarMenuButton
size="lg"
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<Avatar className="h-8 w-8 rounded-lg grayscale">
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
</Avatar>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-medium">{user.name}</span>
<span className="text-muted-foreground truncate text-xs">{user.email}</span>
</div>
<IconDotsVertical className="ml-auto size-4" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
side={isMobile ? "bottom" : "right"}
align="end"
sideOffset={4}
>
<DropdownMenuLabel className="p-0 font-normal">
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar className="h-8 w-8 rounded-lg">
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
</Avatar>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-medium">{user.name}</span>
<span className="text-muted-foreground truncate text-xs">{user.email}</span>
</div>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<IconUserCircle />
Account
</DropdownMenuItem>
<DropdownMenuItem>
<IconCreditCard />
Billing
</DropdownMenuItem>
<DropdownMenuItem>
<IconNotification />
Notifications
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={() => signout()}>
<IconLogout />
Log out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
</SidebarMenu>
);
});
/*
export function NavUser() {
const [{ user }, loading, { signout }] = useController(NavUserController);
const { isMobile } = useSidebar();
@@ -87,3 +155,4 @@ export function NavUser() {
</SidebarMenu>
);
}
*/

90
apps/react/src/components/ui/breadcrumb.tsx Normal file
View File

@@ -0,0 +1,90 @@
import { Slot } from "@radix-ui/react-slot";
import { ChevronRight, MoreHorizontal } from "lucide-react";
import * as React from "react";
import { cn } from "@/libraries/utils";
const Breadcrumb = React.forwardRef<
HTMLElement,
React.ComponentPropsWithoutRef<"nav"> & {
separator?: React.ReactNode;
}
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
Breadcrumb.displayName = "Breadcrumb";
const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
({ className, ...props }, ref) => (
<ol
ref={ref}
className={cn(
"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
className,
)}
{...props}
/>
),
);
BreadcrumbList.displayName = "BreadcrumbList";
const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
({ className, ...props }, ref) => (
<li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
),
);
BreadcrumbItem.displayName = "BreadcrumbItem";
const BreadcrumbLink = React.forwardRef<
HTMLAnchorElement,
React.ComponentPropsWithoutRef<"a"> & {
asChild?: boolean;
}
>(({ asChild, className, ...props }, ref) => {
const Comp = asChild ? Slot : "a";
return <Comp ref={ref} className={cn("transition-colors hover:text-foreground", className)} {...props} />;
});
BreadcrumbLink.displayName = "BreadcrumbLink";
const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
({ className, ...props }, ref) => (
<span
ref={ref}
role="link"
aria-disabled="true"
aria-current="page"
className={cn("font-normal text-foreground", className)}
{...props}
/>
),
);
BreadcrumbPage.displayName = "BreadcrumbPage";
const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
<li role="presentation" aria-hidden="true" className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)} {...props}>
{children ?? <ChevronRight />}
</li>
);
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
<span
role="presentation"
aria-hidden="true"
className={cn("flex h-9 w-9 items-center justify-center", className)}
{...props}
>
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">More</span>
</span>
);
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
export {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbPage,
BreadcrumbSeparator,
BreadcrumbEllipsis,
};

126
apps/react/src/components/ui/field.tsx
View File

@@ -1,9 +1,9 @@
import { useMemo } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cva, type VariantProps } from "class-variance-authority";
import { useMemo } from "react";
import { cn } from "@/libraries/utils"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/libraries/utils";
function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
return (
@@ -12,11 +12,11 @@ function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
className={cn(
"flex flex-col gap-6",
"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
className
className,
)}
{...props}
/>
)
);
}
function FieldLegend({
@@ -28,15 +28,10 @@ function FieldLegend({
<legend
data-slot="field-legend"
data-variant={variant}
className={cn(
"mb-3 font-medium",
"data-[variant=legend]:text-base",
"data-[variant=label]:text-sm",
className
)}
className={cn("mb-3 font-medium", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", className)}
{...props}
/>
)
);
}
function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
@@ -45,36 +40,33 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
data-slot="field-group"
className={cn(
"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
className
className,
)}
{...props}
/>
)
);
}
const fieldVariants = cva(
"group/field data-[invalid=true]:text-destructive flex w-full gap-3",
{
variants: {
orientation: {
vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
horizontal: [
"flex-row items-center",
"[&>[data-slot=field-label]]:flex-auto",
"has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start",
],
responsive: [
"@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
],
},
const fieldVariants = cva("group/field data-[invalid=true]:text-destructive flex w-full gap-3", {
variants: {
orientation: {
vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
horizontal: [
"flex-row items-center",
"[&>[data-slot=field-label]]:flex-auto",
"has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start",
],
responsive: [
"@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
],
},
defaultVariants: {
orientation: "vertical",
},
}
)
},
defaultVariants: {
orientation: "vertical",
},
});
function Field({
className,
@@ -89,26 +81,20 @@ function Field({
className={cn(fieldVariants({ orientation }), className)}
{...props}
/>
)
);
}
function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="field-content"
className={cn(
"group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
className
)}
className={cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className)}
{...props}
/>
)
);
}
function FieldLabel({
className,
...props
}: React.ComponentProps<typeof Label>) {
function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
return (
<Label
data-slot="field-label"
@@ -116,11 +102,11 @@ function FieldLabel({
"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4",
"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
className
className,
)}
{...props}
/>
)
);
}
function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -129,11 +115,11 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
data-slot="field-label"
className={cn(
"flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50",
className
className,
)}
{...props}
/>
)
);
}
function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
@@ -144,11 +130,11 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
"text-muted-foreground text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
"nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
className
className,
)}
{...props}
/>
)
);
}
function FieldSeparator({
@@ -156,16 +142,13 @@ function FieldSeparator({
className,
...props
}: React.ComponentProps<"div"> & {
children?: React.ReactNode
children?: React.ReactNode;
}) {
return (
<div
data-slot="field-separator"
data-content={!!children}
className={cn(
"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
className
)}
className={cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className)}
{...props}
>
<Separator className="absolute inset-0 top-1/2" />
@@ -178,7 +161,7 @@ function FieldSeparator({
</span>
)}
</div>
)
);
}
function FieldError({
@@ -187,33 +170,30 @@ function FieldError({
errors,
...props
}: React.ComponentProps<"div"> & {
errors?: Array<{ message?: string } | undefined>
errors?: Array<{ message?: string } | undefined>;
}) {
const content = useMemo(() => {
if (children) {
return children
return children;
}
if (!errors) {
return null
return null;
}
if (errors?.length === 1 && errors[0]?.message) {
return errors[0].message
return errors[0].message;
}
return (
<ul className="ml-4 flex list-disc flex-col gap-1">
{errors.map(
(error, index) =>
error?.message && <li key={index}>{error.message}</li>
)}
{errors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
</ul>
)
}, [children, errors])
);
}, [children, errors]);
if (!content) {
return null
return null;
}
return (
@@ -225,7 +205,7 @@ function FieldError({
>
{content}
</div>
)
);
}
export {
@@ -239,4 +219,4 @@ export {
FieldSet,
FieldContent,
FieldTitle,
}
};

17
apps/react/src/components/ui/label.tsx
View File

@@ -1,22 +1,19 @@
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import * as LabelPrimitive from "@radix-ui/react-label";
import type * as React from "react";
import { cn } from "@/libraries/utils"
import { cn } from "@/libraries/utils";
function Label({
className,
...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
return (
<LabelPrimitive.Root
data-slot="label"
className={cn(
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
className
className,
)}
{...props}
/>
)
);
}
export { Label }
export { Label };

8
apps/react/src/index.css
View File

@@ -68,7 +68,7 @@
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar: oklch(98.511% 0.00011 271.152);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
@@ -79,13 +79,13 @@
}
.dark {
--background: oklch(0.145 0 0);
--background: oklch(14.479% 0.00002 271.152);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary: oklch(92.191% 0.0001 271.152);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
@@ -101,7 +101,7 @@
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--chart-5: oklch(64.346% 0.24522 16.485);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);

172
apps/react/src/libraries/controller.ts → apps/react/src/libraries/controller.tsx
View File

@@ -1,21 +1,25 @@
import { useEffect, useMemo, useRef, useState } from "react";
import { type FunctionComponent, memo, type PropsWithChildren, useEffect, useRef, useState } from "react";
/**
* Minimal Controller for managing component state and lifecycle.
*/
export class Controller<TState extends Record<string, unknown> = {}, TProps extends Record<string, unknown> = {}> {
export abstract class Controller<
TState extends Record<string, unknown> = {},
TProps extends Record<string, unknown> = {},
> {
state: TState = {} as TState;
props: TProps = {} as TProps;
#resolved = false;
#initiated = false;
#destroyed = false;
#setState: (state: Partial<TState>) => void;
#setLoading: (state: boolean) => void;
constructor(setState: (state: Partial<TState>) => void, setLoading: (state: boolean) => void) {
declare readonly $state: TState;
declare readonly $props: TProps;
constructor(setState: (state: Partial<TState>) => void) {
this.#setState = setState;
this.#setLoading = setLoading;
}
/**
@@ -25,8 +29,10 @@ export class Controller<TState extends Record<string, unknown> = {}, TProps exte
this: TController,
setState: any,
setLoading: any,
setError: any,
): InstanceType<TController> {
return new this(setState, setLoading) as InstanceType<TController>;
// biome-ignore lint/complexity/noThisInStatic: should return new instance of child class
return new (this as any)(setState, setLoading, setError) as InstanceType<TController>;
}
/*
@@ -35,45 +41,35 @@ export class Controller<TState extends Record<string, unknown> = {}, TProps exte
|--------------------------------------------------------------------------------
*/
/**
* Resolves the controller with given props.
* - First time: Runs onInit() then onResolve()
* - Subsequent times: Runs only onResolve()
*/
async $resolve(props: TProps): Promise<void> {
async $init(props: TProps): Promise<void> {
if (this.#destroyed === true) {
return;
}
this.props = props;
let state: Partial<TState> = {};
try {
if (this.#resolved === false) {
const initState = await this.onInit();
if (initState) {
state = { ...state, ...initState };
}
}
const resolveState = await this.onResolve();
if (resolveState) {
state = { ...state, ...resolveState };
}
} catch (error) {
console.error("Controller resolve error:", error);
throw error;
if (this.onInit === undefined) {
return;
}
this.#resolved = true;
const state = await this.onInit();
if (this.#destroyed === false) {
this.setState(state);
}
this.#initiated = true;
}
async $resolve(props: TProps): Promise<void> {
if (this.#initiated === false || this.#destroyed === true) {
return;
}
this.props = props;
if (this.onResolve === undefined) {
return;
}
const state: Partial<TState> = await this.onResolve();
if (this.#destroyed === false) {
this.setState({ ...this.state, ...state });
}
}
/**
* Destroys the controller and cleans up resources.
*/
async $destroy(): Promise<void> {
this.#destroyed = true;
await this.onDestroy();
@@ -86,16 +82,16 @@ export class Controller<TState extends Record<string, unknown> = {}, TProps exte
*/
/**
* Called once when the controller is first initialized.
* Called every time props change (including first mount).
*/
async onInit(): Promise<Partial<TState> | void> {
async onInit(): Promise<Partial<TState>> {
return {};
}
/**
* Called every time props change (including first mount).
*/
async onResolve(): Promise<Partial<TState> | void> {
async onResolve(): Promise<Partial<TState>> {
return {};
}
@@ -129,7 +125,6 @@ export class Controller<TState extends Record<string, unknown> = {}, TProps exte
}
this.#setState(this.state);
this.#setLoading(false);
}
/*
@@ -164,59 +159,72 @@ export class Controller<TState extends Record<string, unknown> = {}, TProps exte
/*
|--------------------------------------------------------------------------------
| Hook
| Component
|--------------------------------------------------------------------------------
*/
/**
* React hook for using a controller.
*
* @example
* ```tsx
* function LoginView() {
* const [state, actions] = useController(LoginController);
*
* return (
* <button onClick={actions.login}>
* {state.authenticated ? "Logout" : "Login"}
* </button>
* );
* }
* ```
*/
export function useController<TController extends new (...args: any[]) => Controller<any, any>>(
export function makeControllerComponent<TController extends new (...args: any[]) => Controller<any, any>>(
ControllerClass: TController,
props?: InstanceType<TController>["props"],
): [InstanceType<TController>["state"], boolean, ControllerActions<InstanceType<TController>>] {
const [state, setState] = useState<any>({});
const [loading, setLoading] = useState<boolean>(true);
Component: FunctionComponent<
PropsWithChildren<
InstanceType<TController>["$props"] &
InstanceType<TController>["$state"] &
ControllerActions<InstanceType<TController>>
>
>,
LoadingComponent?: FunctionComponent<PropsWithChildren>,
ErrorComponent?: FunctionComponent<PropsWithChildren<{ error: Error }>>,
) {
const container: FunctionComponent<PropsWithChildren> = (props: any) => {
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<any>();
const [state, setState] = useState<any>();
const controllerRef = useRef<InstanceType<TController> | null>(null);
const actionsRef = useRef<ControllerActions<InstanceType<TController>> | null>(null);
const propsRef = useRef(props);
const controller = useRef<InstanceType<TController> | null>(null);
const actions = useRef<ControllerActions<InstanceType<TController>> | null>(null);
// Resolve only once after creation
useMemo(() => {
const instance = (ControllerClass as any).make(setState, setLoading);
controllerRef.current = instance;
actionsRef.current = instance.toActions();
// biome-ignore lint/correctness/useExhaustiveDependencies: should only execute once
useEffect(() => {
const instance = (ControllerClass as any).make(setState);
instance.$resolve(props || {});
controller.current = instance;
actions.current = instance.toActions();
return () => {
instance.$destroy();
};
}, [controllerRef]);
instance
.$init(props || {})
.then(() => {
setLoading(false);
})
.catch((error: unknown) => {
setError(error);
setLoading(false);
});
// Resolve on props change
useEffect(() => {
if (propsRef.current !== props) {
propsRef.current = props;
controllerRef.current?.$resolve(props || {});
return () => {
instance.$destroy();
};
}, []);
useEffect(() => {
controller.current?.$resolve(props || {}).catch((error) => {
setError(error);
});
}, [props]);
if (loading === true || state === undefined) {
return LoadingComponent ? <LoadingComponent {...props} /> : null;
}
}, [props]);
return [state, loading, actionsRef.current!];
if (error !== undefined) {
return ErrorComponent ? <ErrorComponent {...props} error={error} /> : null;
}
return <Component {...props} {...state} {...actions.current} />;
};
container.displayName = `${ControllerClass.name}Component`;
return memo(container);
}
/*

3
apps/react/src/main.tsx
View File

@@ -4,7 +4,8 @@ import { RouterProvider } from "@tanstack/react-router";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { ThemeProvider } from "./components/theme-provider.tsx";
import { ThemeProvider } from "@/components/theme-provider.tsx";
import { router } from "./router.tsx";
declare module "@tanstack/react-router" {

2
apps/react/src/router.tsx
View File

@@ -10,7 +10,7 @@ const root = createRootRoute();
const callback = createRoute({
getParentRoute: () => root,
path: "/callback",
path: "/auth/callback",
component: CallbackView,
});

9
apps/react/src/services/zitadel.ts
View File

@@ -1,12 +1,13 @@
import { createZitadelAuth, type ZitadelConfig } from "@zitadel/react";
const config: ZitadelConfig = {
authority: "https://auth.valkyrjs.com",
client_id: "348172463709945862",
redirect_uri: "http://localhost:5173/callback",
authority: "https://iam.valkyrjs.com",
project_resource_id: "348389288439709700",
client_id: "348389308220112900",
redirect_uri: "http://localhost:5173/auth/callback",
post_logout_redirect_uri: "http://localhost:5173",
response_type: "code",
scope: "openid profile email",
scope: "openid profile email urn:zitadel:iam:org:id:348388915649970180",
};
export const zitadel = createZitadelAuth(config);

105
apps/react/src/theme.css
View File

@@ -1,105 +0,0 @@
body {
@apply overscroll-none bg-transparent;
}
:root {
--font-sans: var(--font-inter);
--header-height: calc(var(--spacing) * 12 + 1px);
}
.theme-scaled {
@media (min-width: 1024px) {
--radius: 0.6rem;
--text-lg: 1.05rem;
--text-base: 0.85rem;
--text-sm: 0.8rem;
--spacing: 0.222222rem;
}
[data-slot="card"] {
--spacing: 0.16rem;
}
[data-slot="select-trigger"],
[data-slot="toggle-group-item"] {
--spacing: 0.222222rem;
}
}
.theme-default,
.theme-default-scaled {
--primary: var(--color-neutral-600);
--primary-foreground: var(--color-neutral-50);
@variant dark {
--primary: var(--color-neutral-500);
--primary-foreground: var(--color-neutral-50);
}
}
.theme-blue,
.theme-blue-scaled {
--primary: var(--color-blue-600);
--primary-foreground: var(--color-blue-50);
@variant dark {
--primary: var(--color-blue-500);
--primary-foreground: var(--color-blue-50);
}
}
.theme-green,
.theme-green-scaled {
--primary: var(--color-lime-600);
--primary-foreground: var(--color-lime-50);
@variant dark {
--primary: var(--color-lime-600);
--primary-foreground: var(--color-lime-50);
}
}
.theme-amber,
.theme-amber-scaled {
--primary: var(--color-amber-600);
--primary-foreground: var(--color-amber-50);
@variant dark {
--primary: var(--color-amber-500);
--primary-foreground: var(--color-amber-50);
}
}
.theme-mono,
.theme-mono-scaled {
--font-sans: var(--font-mono);
--primary: var(--color-neutral-600);
--primary-foreground: var(--color-neutral-50);
@variant dark {
--primary: var(--color-neutral-500);
--primary-foreground: var(--color-neutral-50);
}
.rounded-xs,
.rounded-sm,
.rounded-md,
.rounded-lg,
.rounded-xl {
@apply !rounded-none;
border-radius: 0;
}
.shadow-xs,
.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl {
@apply !shadow-none;
}
[data-slot="toggle-group"],
[data-slot="toggle-group-item"] {
@apply !rounded-none !shadow-none;
}
}

120
apps/react/src/themes.css Normal file
View File

@@ -0,0 +1,120 @@
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@theme inline {
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
}
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}

63
apps/react/src/views/app.view.tsx
View File

@@ -1,30 +1,49 @@
import { Outlet } from "@tanstack/react-router";
import { AppSidebar } from "@/components/app-sidebar.tsx";
import { SiteHeader } from "@/components/site-header.tsx";
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar.tsx";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar.tsx";
import { Separator } from "../components/ui/separator.tsx";
export function AppView() {
return (
<SidebarProvider
style={
{
"--sidebar-width": "calc(var(--spacing) * 72)",
"--header-height": "calc(var(--spacing) * 12)",
} as React.CSSProperties
}
>
<AppSidebar variant="inset" />
<SidebarInset>
<SiteHeader />
<div className="flex flex-1 flex-col">
<div className="@container/main flex flex-1 flex-col gap-2">
<div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
<Outlet />
<div className="flex min-h-screen w-full">
<SidebarProvider>
<AppSidebar />
<SidebarInset className="min-w-0">
<header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
<div className="flex items-center gap-2 px-4">
<SidebarTrigger className="-ml-1" />
<Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem className="hidden md:block">
<BreadcrumbLink href="#">Building Your Application</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator className="hidden md:block" />
<BreadcrumbItem>
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
</header>
<div className="flex flex-1 flex-col gap-4 p-4 pt-0">
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
<div className="bg-muted/50 aspect-video rounded-xl" />
<div className="bg-muted/50 aspect-video rounded-xl" />
<div className="bg-muted/50 aspect-video rounded-xl" />
</div>
<div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
</div>
</div>
</SidebarInset>
</SidebarProvider>
</SidebarInset>
</SidebarProvider>
</div>
);
}