@tailor-platform/erp-kit 0.6.0 → 0.8.0

package/templates/scaffold/app/frontend/src/pages/user-management/user/components/users-table.tsx

@@ -1,15 +1,5 @@
-import { Link } from "@tailor-platform/app-shell";
+import { Button, Link, Table, Badge } from "@tailor-platform/app-shell";
 import { graphql, type FragmentOf, readFragment } from "@/graphql";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { EmptyState } from "@/components/composed/empty-state";
 
 const UserRowFragment = graphql(`
@@ -18,7 +8,17 @@ const UserRowFragment = graphql(`
     name
     email
     status
-    createdAt
+    userRoles {
+      edges {
+        node {
+          id
+          role {
+            id
+            name
+          }
+        }
+      }
+    }
   }
 `);
 
@@ -41,20 +41,25 @@ interface UserRowProps {
 
 const UserRow = ({ user: userFragment }: UserRowProps) => {
   const user = readFragment(UserRowFragment, userFragment);
+  const roleNames = user.userRoles.edges
+    .map((edge) => edge.node.role?.name)
+    .filter(Boolean)
+    .join(", ");
+
   return (
-    <TableRow>
-      <TableCell>{user.name}</TableCell>
-      <TableCell>{user.email}</TableCell>
-      <TableCell>
-        <Badge variant={user.status === "ACTIVE" ? "default" : "secondary"}>{user.status}</Badge>
-      </TableCell>
-      <TableCell>{user.createdAt ? new Date(user.createdAt).toLocaleDateString() : "-"}</TableCell>
-      <TableCell>
-        <Button variant="ghost" size="sm" asChild>
-          <Link to={user.id}>View</Link>
+    <Table.Row>
+      <Table.Cell>{user.name}</Table.Cell>
+      <Table.Cell>{user.email}</Table.Cell>
+      <Table.Cell>
+        <Badge variant={user.status === "ACTIVE" ? "default" : "neutral"}>{user.status}</Badge>
+      </Table.Cell>
+      <Table.Cell>{roleNames || "-"}</Table.Cell>
+      <Table.Cell>
+        <Button variant="ghost" size="sm" render={<Link to={user.id} />}>
+          View
         </Button>
-      </TableCell>
-    </TableRow>
+      </Table.Cell>
+    </Table.Row>
   );
 };
 
@@ -70,32 +75,28 @@ export const UsersTable = ({ data }: UsersTableProps) => {
       <EmptyState
         title="No users"
         message="Get started by creating a new user."
-        action={
-          <Button asChild>
-            <Link to="create">Create User</Link>
-          </Button>
-        }
+        action={<Button render={<Link to="create" />}>Create User</Button>}
       />
     );
   }
 
   return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Name</TableHead>
-          <TableHead>Email</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Created At</TableHead>
-          <TableHead />
-        </TableRow>
-      </TableHeader>
-      <TableBody>
+    <Table.Root>
+      <Table.Header>
+        <Table.Row>
+          <Table.Head>Name</Table.Head>
+          <Table.Head>Email</Table.Head>
+          <Table.Head>Status</Table.Head>
+          <Table.Head>Roles</Table.Head>
+          <Table.Head />
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
         {connection.edges.map((edge) => {
           const { id } = readFragment(UserRowFragment, edge.node);
           return <UserRow key={id} user={edge.node} />;
         })}
-      </TableBody>
-    </Table>
+      </Table.Body>
+    </Table.Root>
   );
 };

package/templates/scaffold/app/frontend/src/pages/user-management/user/create/components/create-user-form.tsx

@@ -1,12 +1,11 @@
-import { useNavigate } from "@tailor-platform/app-shell";
-import { useMutation } from "urql";
+import { useState } from "react";
+import { Button, Dialog, Input, Select, useNavigate } from "@tailor-platform/app-shell";
+import { useMutation, useQuery } from "urql";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { graphql } from "@/graphql";
 import { useToast } from "@/hooks/use-toast";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import {
   Form,
   FormControl,
@@ -16,10 +15,27 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 
+const RolesForSelectQuery = graphql(`
+  query RolesForSelect {
+    roles {
+      edges {
+        node {
+          id
+          name
+        }
+      }
+    }
+  }
+`);
+
 const CreateUserMutation = graphql(`
-  mutation CreateUser($name: String!, $email: String!) {
-    createUser(name: $name, email: $email) {
-      message
+  mutation CreateUser($name: String!, $email: String!, $roleIds: [String!]) {
+    createUser(name: $name, email: $email, roleIds: $roleIds) {
+      id
+      name
+      email
+      status
+      initialPassword
     }
   }
 `);
@@ -27,6 +43,7 @@ const CreateUserMutation = graphql(`
 const formSchema = z.object({
   name: z.string().min(1, "Name is required"),
   email: z.email("Invalid email address"),
+  roleIds: z.array(z.string()),
 });
 
 type FormValues = z.infer<typeof formSchema>;
@@ -35,12 +52,17 @@ export const CreateUserForm = () => {
   const navigate = useNavigate();
   const toast = useToast();
   const [, createUser] = useMutation(CreateUserMutation);
+  const [{ data: rolesData }] = useQuery({ query: RolesForSelectQuery });
+  const [initialPassword, setInitialPassword] = useState<string | null>(null);
+
+  const roles = rolesData?.roles.edges.map((edge) => edge.node) ?? [];
 
   const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       name: "",
       email: "",
+      roleIds: [],
     },
   });
 
@@ -50,8 +72,7 @@ export const CreateUserForm = () => {
         toast.error(result.error);
         return;
       }
-      toast.success("User created successfully");
-      void navigate("..");
+      setInitialPassword(result.data?.createUser.initialPassword ?? null);
     });
   };
 
@@ -60,41 +81,95 @@ export const CreateUserForm = () => {
   };
 
   return (
-    <Form {...form}>
-      <form onSubmit={(e) => void form.handleSubmit(onSubmit)(e)} className="max-w-md space-y-4">
-        <FormField
-          control={form.control}
-          name="name"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Name</FormLabel>
-              <FormControl>
-                <Input placeholder="Enter name" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="email"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Email</FormLabel>
-              <FormControl>
-                <Input type="email" placeholder="Enter email" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <div className="flex gap-2">
-          <Button type="submit">Create</Button>
-          <Button type="button" variant="outline" onClick={onCancel}>
-            Cancel
-          </Button>
-        </div>
-      </form>
-    </Form>
+    <>
+      <Form {...form}>
+        <form onSubmit={(e) => void form.handleSubmit(onSubmit)(e)} className="max-w-md space-y-4">
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Name</FormLabel>
+                <FormControl>
+                  <Input placeholder="Enter name" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input type="email" placeholder="Enter email" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="roleIds"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Roles</FormLabel>
+                <FormControl>
+                  <Select
+                    multiple
+                    items={roles}
+                    value={roles.filter((r) => field.value.includes(r.id))}
+                    onValueChange={(selected) => field.onChange(selected.map((r) => r.id))}
+                    mapItem={(role) => ({ label: role.name, key: role.id })}
+                    placeholder="Select roles"
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <div className="flex gap-2">
+            <Button type="submit">Create</Button>
+            <Button type="button" variant="outline" onClick={onCancel}>
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </Form>
+      <Dialog.Root
+        open={initialPassword !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            setInitialPassword(null);
+            void navigate("..");
+          }
+        }}
+      >
+        <Dialog.Content>
+          <Dialog.Header>
+            <Dialog.Title>User Created</Dialog.Title>
+            <Dialog.Description>
+              The user has been created. Please copy the initial password and share it with the
+              user. This password will not be shown again.
+            </Dialog.Description>
+          </Dialog.Header>
+          <div className="py-4">
+            <Input readOnly value={initialPassword ?? ""} />
+          </div>
+          <Dialog.Footer>
+            <Button
+              onClick={() => {
+                setInitialPassword(null);
+                void navigate("..");
+              }}
+            >
+              Done
+            </Button>
+          </Dialog.Footer>
+        </Dialog.Content>
+      </Dialog.Root>
+    </>
   );
 };

package/templates/scaffold/app/frontend/src/pages/user-management/user/page.tsx

@@ -1,8 +1,7 @@
-import { Layout, Link, type AppShellPageProps } from "@tailor-platform/app-shell";
+import { Button, Layout, Link, type AppShellPageProps } from "@tailor-platform/app-shell";
 import { useQuery } from "urql";
 import { UsersTable, UsersTableFragment } from "./components/users-table";
 import { graphql } from "@/graphql";
-import { Button } from "@/components/ui/button";
 import { ErrorFallback } from "@/components/composed/error-fallback";
 import { Loading } from "@/components/composed/loading";
 
@@ -39,8 +38,8 @@ const UsersPage = () => {
       columns={1}
       title="Users"
       actions={[
-        <Button key="create" asChild>
-          <Link to="create">Create User</Link>
+        <Button key="create" render={<Link to="create" />}>
+          Create User
         </Button>,
       ]}
     >

package/templates/scaffold/app/frontend/src/providers/graphql-provider.tsx

@@ -9,10 +9,17 @@ interface GraphQLProviderProps {
 
 export const GraphQLProvider = ({ authClient, children }: GraphQLProviderProps) => {
   const client = useMemo(() => {
+    const appUrl = import.meta.env.VITE_TAILOR_APP_URL as string | undefined;
+    if (!appUrl) {
+      throw new Error("VITE_TAILOR_APP_URL must be set");
+    }
+    const url = `${appUrl}/query`;
+
     return createClient({
-      url: `${authClient.getAppUri()}/query`,
+      url,
       exchanges: [cacheExchange, fetchExchange],
       requestPolicy: "cache-first",
+      preferGetMethod: false,
       fetch: authClient.fetch,
     });
   }, [authClient]);

package/templates/scaffold/module/eslint.config.js

@@ -28,4 +28,12 @@ export default defineConfig([
       "import-x/order": "error",
     },
   },
+  {
+    files: ["**/command/update*.ts"],
+    ignores: ["**/*.test.ts"],
+    rules: {
+      // Update command inputs intentionally use type aliases to support lookup-key unions.
+      "@typescript-eslint/consistent-type-definitions": "off",
+    },
+  },
 ]);

package/templates/scaffold/project/__dot__gitignore

@@ -0,0 +1 @@
+node_modules/

package/templates/scaffold/project/__pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - apps/**
+  - modules/**

package/templates/scaffold/project/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "template-project",
+  "private": true,
+  "scripts": {
+    "module:doc:check": "erp-kit module check --path modules",
+    "module:doc:sync-check": "erp-kit module sync-check --path modules",
+    "app:doc:check": "for d in apps/*/; do erp-kit app check --path \"$d\"; done",
+    "app:doc:sync-check": "for d in apps/*/; do erp-kit app sync-check --path \"$d\"; done",
+    "license:check": "erp-kit license check --config license.config.json"
+  },
+  "devDependencies": {
+    "@tailor-platform/erp-kit": "workspace:*"
+  },
+  "packageManager": "pnpm@10.32.1"
+}

package/templates/workflows/erp-kit-check.yml

@@ -27,11 +27,17 @@ jobs:
 
       - run: pnpm install --frozen-lockfile
 
+      - name: Validate module documentation
+        run: pnpm run module:doc:check
+
+      - name: Validate module source-doc correspondence
+        run: pnpm run module:doc:sync-check
+
       - name: Validate app documentation
-        run: npx @tailor-platform/erp-kit app check --path .
+        run: pnpm run app:doc:check
 
-      - name: Validate source-doc correspondence
-        run: npx @tailor-platform/erp-kit app sync-check --path .
+      - name: Validate app source-doc correspondence
+        run: pnpm run app:doc:sync-check
 
       - name: Check licenses
-        run: npx @tailor-platform/erp-kit license check --config license.config.json
+        run: pnpm run license:check

package/src/generator/generate-stubs.ts

@@ -1,35 +0,0 @@
-import { renderStub } from "./stub-templates";
-
-export function generateCommandStub(doc: { commandName: string }): string {
-  return renderStub("command", doc.commandName);
-}
-
-export function generateTestStub(doc: { commandName: string }): string {
-  return renderStub("commandTest", doc.commandName);
-}
-
-export function generateQueryStub(doc: { commandName: string }): string {
-  return renderStub("query", doc.commandName);
-}
-
-export function generateQueryTestStub(doc: { commandName: string }): string {
-  return renderStub("queryTest", doc.commandName);
-}
-
-export function generateDbStub(modelName: string): string {
-  return renderStub("db", modelName);
-}
-
-export function generateResolverStub(resolverName: string): string {
-  return renderStub("resolver", resolverName);
-}
-
-export function generateResolverTestStub(resolverName: string): string {
-  return renderStub("resolverTest", resolverName);
-}
-
-export function generateStoryTestStub(name: string, testCases: string[]): string {
-  return renderStub("storyTest", name, testCases);
-}
-
-export { renderStub, type StubType } from "./stub-templates";

package/templates/scaffold/app/frontend/src/components/ui/badge.tsx

@@ -1,39 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "../../lib/utils";
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span";
-
-  return (
-    <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
-}
-
-export { Badge, badgeVariants };

package/templates/scaffold/app/frontend/src/components/ui/button.tsx

@@ -1,60 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "../../lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      data-slot="button"
-      data-variant={variant}
-      data-size={size}
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-export { Button, buttonVariants };

package/templates/scaffold/app/frontend/src/components/ui/card.tsx

@@ -1,75 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
-      {...props}
-    />
-  );
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="card-content" className={cn("px-6", className)} {...props} />;
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  );
-}
-
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };