@tailor-platform/erp-kit 0.2.0 → 0.2.2

package/skills/erp-kit-app-1-requirements/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
-```

package/skills/erp-kit-app-2-breakdown/SKILL.md

@@ -1,95 +0,0 @@
----
-name: erp-kit-app-2-breakdown
-description: Create Tier 3 documentation (stories, screens) by breaking down business flows. Use after completing Tier 1-2 documentation with erp-kit-app-1-requirements.
----
-
-# Requirements Breakdown Workflow
-
-Break down Tier 2 business flows into Tier 3 documentation: User Stories and Screens.
-
-## Prerequisites
-
-Tier 1-2 documentation must exist:
-
-- `README.md` (requirements)
-- `docs/actors/*.md` (actor definitions)
-- `docs/business-flow/*/README.md` (business workflows)
-
-## Workflow Phases
-
-```
-ANALYZE → BREAKDOWN → CREATE → VALIDATE
-```
-
-### Phase 1: Analyze
-
-Review existing Tier 2 documentation:
-
-1. **Read** all business flow files in `docs/business-flow/`
-2. **Identify** flow steps that represent user actions
-3. **Map** each step to the responsible actor
-4. **Note** data inputs/outputs for each step
-
-### Phase 2: Breakdown
-
-For each business flow, decompose into stories and screens:
-
-| Flow Element     | Maps To     |
-| ---------------- | ----------- |
-| User action step | Story       |
-| UI requirement   | Screen      |
-| Actor in flow    | Story actor |
-
-### Phase 3: Create
-
-Generate documentation using `erp-kit` CLI:
-
-```bash
-# Tier 3: Stories
-erp-kit scaffold --app-root examples story <app> <flow>/<actor>--<story>
-
-# Tier 3: Screens
-erp-kit scaffold --app-root examples screen <app> <screen-name>
-```
-
-**Naming conventions:**
-
-- Story filename: `<actor>--<story-name>.md` (double-dash separator)
-- Story heading: Title Case of story name (after `--`)
-- Screen filename: kebab-case, noun-focused (e.g., `supplier-list.md`)
-
-**After creating stories**, update `## Stories` section in business flow README:
-
-```markdown
-- [Story Title](./story/<actor>--<story-name>.md)
-```
-
-### Phase 4: Validate
-
-```bash
-pnpm run app:doc:check
-```
-
-## Schema Reference
-
-| Schema       | Tier | Output Path                                          |
-| ------------ | ---- | ---------------------------------------------------- |
-| `story.yml`  | 3    | `docs/business-flow/<flow>/story/<actor>--<name>.md` |
-| `screen.yml` | 3    | `docs/screen/<name>.md`                              |
-
-## Tips
-
-- One business flow typically produces 3-8 stories
-- Stories should be completable in a single user session
-- Screens can be shared across multiple stories
-
-## Next Step
-
-After completing Tier 3, use `/erp-kit-app-3-doc-review` to validate documentation parity.
-
-## References
-
-- [Application structure](references/structure.md)
-- [ListView screen](references/screen-listview.md)
-- [Form screen](references/screen-form.md)
-- [DetailView screen](references/screen-detailview.md)

package/skills/erp-kit-app-2-breakdown/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-2-breakdown/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-2-breakdown/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-2-breakdown/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
-```

package/skills/erp-kit-app-3-doc-review/SKILL.md

@@ -1,116 +0,0 @@
----
-name: erp-kit-app-3-doc-review
-description: Review documentation parity between Tier 2 (business flows, actors) and Tier 3 (stories, screens). Use when validating that all business flow steps have corresponding stories, and that screens are properly linked.
----
-
-# Documentation Parity Review Workflow
-
-Review **documentation consistency** between Tier 2 and Tier 3 documentation.
-
-## Purpose
-
-```
-Business Flow (Tier 2)  →  Stories (Tier 3)  →  Screens (Tier 3)
-        ↓                        ↓                     ↓
-   Flow Steps              User Actions           UI Components
-   Actors Involved         Scenario Patterns      Screen Types
-```
-
-## When to Use
-
-- After writing Tier 3 documentation, check for gaps
-- Before proceeding to Tier 4 (implementation spec)
-- Quality check during documentation review
-
-## Workflow
-
-```
-READ DOCS → PARITY CHECKS → REPORT
-```
-
-### Step 1: Read All Documentation
-
-```
-examples/<app-name>/docs/business-flow/*/README.md    # Flows
-examples/<app-name>/docs/business-flow/*/story/*.md   # Stories
-examples/<app-name>/docs/screen/*.md                  # Screens
-examples/<app-name>/docs/actors/*.md                  # Actors
-```
-
-### Step 2: Parity Checks
-
-#### Business Flow → Story
-
-| Check           | Question                                        |
-| --------------- | ----------------------------------------------- |
-| Story existence | Does each flow step have a corresponding story? |
-| Actor coverage  | Are all actors in flow represented in stories?  |
-| Link validity   | Do story links in flow README resolve?          |
-
-#### Actor → Business Flow
-
-| Check          | Question                                  |
-| -------------- | ----------------------------------------- |
-| Flow existence | Do all flows in "Authorized Flows" exist? |
-| Link validity  | Do flow links resolve correctly?          |
-
-#### Story → Screen
-
-| Check            | Question                           |
-| ---------------- | ---------------------------------- |
-| Screen existence | Do all screens in story exist?     |
-| Link validity    | Do screen links resolve correctly? |
-
-#### Orphan Detection
-
-| Check          | Question                                   |
-| -------------- | ------------------------------------------ |
-| Orphan stories | Stories not linked from any business flow? |
-| Orphan screens | Screens not referenced by any story?       |
-| Orphan actors  | Actors not participating in any flow?      |
-
-### Step 3: Report
-
-```markdown
-## Documentation Parity Review Report
-
-**Application:** <app-name>
-
-### Summary
-
-| Aspect                | Status   | Details           |
-| --------------------- | -------- | ----------------- |
-| Business Flow → Story | ✅/⚠️/❌ | X/Y flows covered |
-| Actor → Flow          | ✅/⚠️/❌ | All links valid   |
-| Story → Screen        | ✅/⚠️/❌ | X missing screens |
-| Orphan Detection      | ✅/⚠️/❌ | N orphans found   |
-
-### Gaps Found
-
-- [ ] Missing: <item>
-- [ ] Broken link: <source> → <target>
-- [ ] Orphan: <file>
-
-### Recommendations
-
-1. Create missing: ...
-2. Fix broken links: ...
-3. Remove or link orphans: ...
-```
-
-## Link Format Reference
-
-| From          | To            | Format                              |
-| ------------- | ------------- | ----------------------------------- |
-| Business Flow | Story         | `./story/<actor>--<name>.md`        |
-| Business Flow | Actor         | `../../actors/<actor>.md`           |
-| Actor         | Business Flow | `../business-flow/<flow>/README.md` |
-| Story         | Screen        | `../../../screen/<screen>.md`       |
-
-## Next Step
-
-After fixing all issues, use `/erp-kit-app-4-design` to create visual UI mockups from screen specifications.
-
-## References
-
-- [Application structure](references/structure.md)

package/skills/erp-kit-app-3-doc-review/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
-```