@tailor-platform/erp-kit 0.2.0 → 0.2.1

package/skills/erp-kit-app-5-design-review/references/screen-detailview.md

@@ -1,106 +0,0 @@
-# DetailView Screen Implementation
-
-Implementation pattern for screens with `Screen Type: DetailView`.
-Assumes `page.md` and `component.md` rules.
-
-## File Structure
-
-```
-{screen-path}/[id]/
-├── components/
-│   ├── {screen-name}-detail.tsx     # Main content (left column)
-│   └── {screen-name}-actions.tsx    # Action sidebar (right column)
-├── edit/
-│   ├── components/
-│   │   └── edit-{screen-name}-form.tsx
-│   └── page.tsx
-└── page.tsx
-```
-
-## Layout
-
-- Two-column layout: main content on the left, actions on the right.
-
-```tsx
-const ResourcePage = () => {
-  const { id } = useParams();
-  const [{ data, error, fetching }, reexecuteQuery] = useQuery({
-    query: ResourceQuery,
-    variables: { id: id! },
-  });
-
-  if (fetching) return <Loading />;
-  if (error || !data?.resource) return <ErrorFallback ... />;
-
-  return (
-    <Layout columns={2} title="Resource Detail">
-      <Layout.Column>
-        <ResourceDetail resource={data.resource} />
-      </Layout.Column>
-      <Layout.Column>
-        <ResourceActions resource={data.resource} />
-      </Layout.Column>
-    </Layout>
-  );
-};
-```
-
-## Left Column: Detail Component
-
-Stack `DescriptionCard` and related tables vertically with `space-y-6`.
-
-- `DescriptionCard` (`@tailor-platform/app-shell`): renders key-value fields declaratively.
-- Complex content (tables, timelines): wrap in `<div className="rounded-lg border bg-card p-6">`.
-
-### DescriptionCard
-
-```tsx
-<DescriptionCard
-  data={resource}
-  title="Overview"
-  columns={3}
-  fields={[
-    { key: "name", label: "Name", meta: { copyable: true } },
-    {
-      key: "status",
-      label: "Status",
-      type: "badge",
-      meta: { badgeVariantMap: { ACTIVE: "success", PENDING: "warning" } },
-    },
-    { type: "divider" },
-    {
-      key: "createdAt",
-      label: "Created At",
-      type: "date",
-      meta: { dateFormat: "medium" },
-    },
-  ]}
-/>
-```
-
-Field types: `"text"` (default), `"badge"`, `"money"`, `"date"`, `"link"`, `"address"`, `"reference"`, `"divider"`
-
-## Right Column: Actions Component
-
-Wrap in a `Card` component. Use `Button variant="ghost"` for each action item.
-
-```tsx
-<Card>
-  <CardHeader>
-    <CardTitle>Actions</CardTitle>
-  </CardHeader>
-  <CardContent className="space-y-2">
-    <Button variant="ghost" className="w-full justify-start gap-2" asChild>
-      <Link to="edit">✎ Edit</Link>
-    </Button>
-    <Button variant="ghost" className="w-full justify-start gap-2" onClick={handler}>
-      ✓ Approve
-    </Button>
-  </CardContent>
-</Card>
-```
-
-- Navigation: `<Button variant="ghost" asChild><Link to="...">`
-- Mutation: `<Button variant="ghost" onClick={handler}>` with custom resolvers (see `backend/resolvers.md`)
-- Conditional: show/hide based on status
-- Multiple cards: stack with `<div className="space-y-6">`

package/skills/erp-kit-app-5-design-review/references/screen-form.md

@@ -1,139 +0,0 @@
-# Form Screen Implementation
-
-Implementation pattern for screens with `Screen Type: Form`.
-Assumes `page.md` and `component.md` rules.
-
-## File Structure
-
-```
-{screen-path}/
-├── components/
-│   └── {screen-name}-form.tsx    # Form component with validation
-└── page.tsx
-```
-
-## Page Component (page.tsx)
-
-Form pages delegate mutation logic to the form component.
-
-```tsx
-const ScreenNamePage = () => (
-  <Layout columns={1} title="Screen Title">
-    <Layout.Column>
-      <ScreenNameForm />
-    </Layout.Column>
-  </Layout>
-);
-```
-
-For edit forms that need existing data, co-locate data fetching in the page component:
-
-```tsx
-const EditPage = () => {
-  const { id } = useParams();
-  const [{ data, error, fetching }] = useQuery({
-    query: ResourceQuery,
-    variables: { id: id! },
-  });
-
-  if (fetching) return <Loading />;
-  if (error || !data?.resource) return <ErrorFallback ... />;
-
-  return (
-    <Layout columns={1} title="Edit Resource">
-      <Layout.Column>
-        <EditResourceForm resource={data.resource} />
-      </Layout.Column>
-    </Layout>
-  );
-};
-```
-
-## Form Component (components/{screen-name}-form.tsx)
-
-### Technology Stack
-
-- `react-hook-form` — form state management
-- `zod` + `@hookform/resolvers/zod` — validation
-- `useMutation` (urql) — GraphQL mutation
-- `useNavigate` (@tailor-platform/app-shell) — post-submit navigation
-
-### Pattern
-
-```tsx
-const formSchema = z.object({
-  title: z.string().min(1, "Title is required"),
-  description: z.string().optional(),
-});
-
-type FormValues = z.infer<typeof formSchema>;
-
-export const ScreenNameForm = () => {
-  const navigate = useNavigate();
-  const [, createResource] = useMutation(CreateMutation);
-
-  const form = useForm<FormValues>({
-    resolver: zodResolver(formSchema),
-    defaultValues: { title: "", description: "" },
-  });
-
-  const onSubmit = (values: FormValues) => {
-    void createResource({ input: values }).then((result) => {
-      if (!result.error) {
-        void navigate("..");
-      }
-    });
-  };
-
-  return (
-    <Form {...form}>
-      <form onSubmit={(e) => void form.handleSubmit(onSubmit)(e)} className="max-w-md space-y-4">
-        <FormField
-          control={form.control}
-          name="title"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Title</FormLabel>
-              <FormControl>
-                <Input placeholder="Enter title" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <div className="flex gap-2">
-          <Button type="submit">Create</Button>
-          <Button type="button" variant="outline" onClick={() => void navigate("..")}>
-            Cancel
-          </Button>
-        </div>
-      </form>
-    </Form>
-  );
-};
-```
-
-## Field Type Mapping
-
-| Field Type | Component                      | Zod Schema                      |
-| ---------- | ------------------------------ | ------------------------------- |
-| Text       | `<Input />`                    | `z.string()`                    |
-| Textarea   | `<textarea className="..." />` | `z.string()`                    |
-| Dropdown   | `<Select />`                   | `z.string()` or `z.enum([...])` |
-| Date       | `<Input type="date" />`        | `z.string()` (ISO format)       |
-| Number     | `<Input type="number" />`      | `z.coerce.number()`             |
-| Email      | `<Input type="email" />`       | `z.string().email()`            |
-| Checkbox   | `<Checkbox />`                 | `z.boolean()`                   |
-| Radio      | `<RadioGroup />`               | `z.enum([...])`                 |
-
-## Validation Mapping
-
-- **Required: Yes** → `.min(1, "Field is required")` (string) / `.positive()` (number)
-- **Required: No** → `.optional()`
-
-## Key Points
-
-- Set `defaultValues` for all fields (empty string, false, etc.)
-- Navigate to `".."` after successful mutation
-- Cancel button must use `type="button"` to prevent form submit
-- For edit forms, accept fragment data as props and pre-fill `defaultValues`

package/skills/erp-kit-app-5-design-review/references/screen-listview.md

@@ -1,153 +0,0 @@
-# ListView Screen Implementation
-
-Implementation pattern for screens with `Screen Type: ListView`.
-Assumes `page.md` and `component.md` rules.
-
-## File Structure
-
-```
-{screen-path}/
-├── components/
-│   └── {screen-name}-table.tsx     # Table component with fragments
-└── page.tsx
-```
-
-## Page Component (page.tsx)
-
-Data fetching and `Layout` must be co-located in the same page component.
-Do NOT split into an inner Content component — `Layout` requires `Layout.Column` as direct children.
-
-```tsx
-const ResourcesQuery = graphql(
-  `
-    query Resources {
-      resources {
-        ...ResourceTable
-      }
-    }
-  `,
-  [ResourceTableFragment],
-);
-
-const ResourcesPage = () => {
-  const [{ data, error, fetching }, reexecuteQuery] = useQuery({
-    query: ResourcesQuery,
-  });
-
-  if (fetching) return <Loading />;
-
-  if (error || !data) {
-    return (
-      <ErrorFallback
-        title="Failed to load resources"
-        message="An error occurred while fetching the list."
-        onReset={() => reexecuteQuery({ requestPolicy: "network-only" })}
-      />
-    );
-  }
-
-  return (
-    <Layout
-      columns={1}
-      title="Resources"
-      actions={[
-        <Button key="create" asChild>
-          <Link to="create">Create</Link>
-        </Button>,
-      ]}
-    >
-      <Layout.Column>
-        <ResourceTable data={data.resources} />
-      </Layout.Column>
-    </Layout>
-  );
-};
-```
-
-## Table Component (components/{screen-name}-table.tsx)
-
-### Fragment Collocation
-
-Define a row fragment and a table fragment wrapping the Connection type.
-
-```tsx
-const ResourceRowFragment = graphql(`
-  fragment ResourceRow on Resource {
-    id
-    title
-    status
-    createdAt
-  }
-`);
-
-export const ResourceTableFragment = graphql(
-  `
-    fragment ResourceTable on ResourceConnection {
-      edges {
-        node {
-          ...ResourceRow
-        }
-      }
-    }
-  `,
-  [ResourceRowFragment],
-);
-```
-
-### Row Component
-
-```tsx
-const ResourceRow = ({ resource: resourceFragment }: ResourceRowProps) => {
-  const resource = readFragment(ResourceRowFragment, resourceFragment);
-  return (
-    <TableRow>
-      <TableCell>{resource.title}</TableCell>
-      <TableCell>
-        <Badge variant={resource.status === "ACTIVE" ? "default" : "secondary"}>
-          {resource.status}
-        </Badge>
-      </TableCell>
-      <TableCell>
-        <Button variant="ghost" size="sm" asChild>
-          <Link to={resource.id}>View</Link>
-        </Button>
-      </TableCell>
-    </TableRow>
-  );
-};
-```
-
-### Empty State
-
-```tsx
-if (connection.edges.length === 0) {
-  return (
-    <EmptyState
-      title="No resources"
-      message="Get started by creating a new resource."
-      action={
-        <Button asChild>
-          <Link to="create">Create</Link>
-        </Button>
-      }
-    />
-  );
-}
-```
-
-## Column Property Mapping
-
-| Property        | Implementation                                              |
-| --------------- | ----------------------------------------------------------- |
-| Hideable: Yes   | Column visibility state to toggle show/hide                 |
-| Sortable: Yes   | Sort icon on `<TableHead>` + onClick to toggle query vars   |
-| Filterable: Yes | Filter UI above table (`<Select />`)                        |
-| Searchable: Yes | Search input above table (`<Input placeholder="Search" />`) |
-
-## Key Points
-
-- Use `<Badge />` for status columns
-- Format dates with `toLocaleDateString()`
-- Use `<EmptyState />` with Create action for empty lists
-- Add a View button per row to navigate to the detail page
-- Iterate data using Connection type `edges.node` pattern

package/skills/erp-kit-app-6-impl-spec/references/auth.md

@@ -1,72 +0,0 @@
-# Backend Auth Configuration
-
-Use Tailor SDK auth resources as the default pattern for backend authentication setup.
-
-## Standard Auth Shape
-
-In `tailor.config.ts`:
-
-- Define IdP with `defineIdp(...)`
-- Define Auth with `defineAuth(...)`
-- Define static website with `defineStaticWebSite(...)` when frontend is deployed as static hosting
-- Wire `idProvider` via `idp.provider(...)`
-- Set exactly one OAuth2 client for frontend login (default client name: `default`)
-- Export config with `auth: auth` and `idp: [idp]`
-- Include static website URL in CORS when using deployed frontend (for example, `cors: ["http://localhost:5173", website.url]`)
-
-Prefer this stable naming unless there is a clear reason to change:
-
-- Auth name: `default`
-- IdP name: `default`
-- OAuth2 client name: `default`
-
-## User Mapping
-
-Use `userProfile` to map authenticated identities to the application user type.
-
-- `type`: module-provided user type
-- `usernameField`: stable unique field (for example, `email`)
-- `attributes`: explicitly list required attributes
-
-Avoid implicit attribute assumptions.
-
-## CORS for Static Website Login
-
-When frontend is deployed via `staticWebsites`, OAuth metadata and query calls are cross-origin from `https://<name>-<workspace>.web.erp.dev` to app backend.
-
-- Always include the deployed static website origin via `website.url` in backend `cors`
-- Keep local development origin in `cors` as well (for example, `http://localhost:5173`)
-- If your template uses IP allow lists, set `allowedIpAddresses` appropriately for Tailor internal access
-
-If `website.url` is missing from `cors`, login may fail with browser CORS errors before authentication starts.
-
-## Seed Permission Alignment
-
-Seeded login users in `seed/data/User.jsonl` must receive module permissions required by guarded commands/resolvers.
-
-- Do not assume `ADMIN` is automatically privileged unless your permission evaluator explicitly supports it
-- Grant concrete permission keys defined by the module (for example, `user-management:createUser`)
-- Keep `User.jsonl` permissions aligned with the module currently wired in `src/modules.ts`
-
-## Workspace and CLI Inputs
-
-Use `TAILOR_PLATFORM_WORKSPACE_ID` in backend `.env` for CLI operations.
-
-Required for non-interactive resource lookup and automation:
-
-- `tailor-sdk oauth2client list`
-- `tailor-sdk oauth2client get <name>`
-
-Use `--env-file <backend/.env>` for deterministic command execution in local/dev scripts.
-
-## OAuth Client ID Source of Truth
-
-Frontend `VITE_TAILOR_CLIENT_ID` must come from backend-managed OAuth2 client data.
-
-Canonical retrieval flow:
-
-1. `tailor-sdk oauth2client get default --json`
-2. Copy `clientId` from command output
-3. Set it in frontend env
-
-Do not hardcode OAuth client IDs in source code.

package/skills/erp-kit-app-6-impl-spec/references/structure.md

@@ -1,27 +0,0 @@
-# Application Directory Structure
-
-```
-{app_name}/
-├── backend/
-│   ├── src/
-│   │   ├── modules.ts              # Declaring module usage
-│   │   ├── modules/
-│   │   │   └── {module-name}/      # Module-specific directory
-│   │   │       ├── resolvers/      # API Definition to expose graphql apis
-│   │   │       └── executors/      # PubSub Automation (one file per declaration)
-│   │   └── generated/              # Auto-generated code (do not edit)
-│   └── tailor.config.ts            # tailor application config
-│
-└── frontend/
-    └── src/
-        ├── pages/                  # File-based routing (auto-discovered by Vite plugin)
-        │   └── {page-path}/
-        │       ├── page.tsx
-        │       └── {page-path}/
-        │           ├── components/
-        │           └── page.tsx
-        ├── components/
-        │   └── ui/                 # Generic UI components
-        ├── graphql/                # gql.tada settings
-        └── providers/              # react providers
-```