Docs workflow kit data model update (#946)

* feat(docs): update Workflow Kit docs to better explain how to deal with its data model

* feat(docs): new illustrations for Prisma Pulse docs

* feat(docs): better highlight guide in Workflow Kit reference

* feat(docs): wording

pages/docs/guides/user-defined-workflows.mdx

@@ -59,7 +59,7 @@ Our users will be able to combine those tasks to build their custom workflows.
 After [installing and setup Inngest](/docs/getting-started/nextjs-quick-start) in our Next.js application, we will create the following [Workflow Actions definition](/docs/reference/workflow-kit/actions) file:
 
 ```ts {{ title: "lib/inngest/workflowActions.ts" }}
-import { type PublicEngineAction } from "@inngest/workflow/types";
+import { type PublicEngineAction } from "@inngest/workflow";
 
 export const actions: PublicEngineAction[] = [
   {
@@ -108,7 +108,11 @@ export const actions: PublicEngineAction[] = [
 
 ### 2. Updating our database schema
 
-To enable our users to configure the workflows, we will create the following `workflows` table:
+To enable our users to configure the workflows, we will create the following `workflows` table.
+
+The `workflows` tables stores the [Workflow instance object](/docs/reference/workflow-kit/workflow-instance) containing how the user ordered
+the different selected [Workflow actions](/docs/reference/workflow-kit/actions). Other columns are added to store extra properties specific to
+our application such as: the automation name and description, the event triggering the automation and its status (`enabled`).
 
 
 |Colunm name|Column type|Description|
@@ -173,7 +177,10 @@ export default async function Automation({
 
 ```
 
-The `<AutomationEditor>` component is instantiated with a [workflow instance](/docs/reference/workflow-kit/workflow-instance) loaded from the database:
+The `<AutomationEditor>` component is then rendered with the following required properties:
+- `workflow={}`:  [workflow instance](/docs/reference/workflow-kit/workflow-instance) loaded from the database along side 
+- `event={}`: the name of the event triggering the workflow
+- `availableActions={}`: [actions](/docs/reference/workflow-kit/actions#passing-actions-to-the-react-components-public-engine-action) that the user can select to build its automation
 
 
 ```tsx {{ title: "src/components/automation-editor.ts" }}
@@ -217,7 +224,10 @@ export const AutomationEditor = ({ workflow }: { workflow: Workflow }) => {
 };
 ```
 
-The [`<Provider>`](/docs/reference/workflow-kit/components-api) is a controlled component, relying on the `workflow={}` object to update.
+[`<Provider>`](/docs/reference/workflow-kit/components-api) is a [Controlled Component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components), relying on the `workflow={}` object to update its UI.
+
+Every change performed by the user will trigger the `onChange={}` callback to be called. This callback should update the object passed to the
+`workflow={}` prop and can be used to also implement an auto save mechanism.
 
 <Callout>
 

pages/docs/reference/workflow-kit/actions.mdx

@@ -11,7 +11,7 @@ Workflow actions are defined as two objects using the [`EngineAction`](#passing-
 
 
 ```ts {{ title: "src/inngest/actions-definition.ts" }}
-import { type PublicEngineAction } from "@inngest/workflow/types";
+import { type PublicEngineAction } from "@inngest/workflow";
 
 export const actionsDefinition: PublicEngineAction[] = [
   {

pages/docs/reference/workflow-kit/index.mdx

@@ -1,6 +1,7 @@
 import { Callout, CodeGroup, Card, CardGroup, ImageTheme } from "src/shared/Docs/mdx";
 
 import GithubIcon from "shared/Icons/Github"
+import NewspaperIcon from "shared/Icons/Newspaper"
 
 # Workflow Kit
 Workflow Kit enables you to build [user-defined workflows](/docs/guides/user-defined-workflows) with Inngest by providing a set of workflow actions to the **[Workflow Engine](/docs/reference/workflow-kit/engine)** while using the **[pre-built React components](/docs/reference/workflow-kit/components-api)** to build your Workflow Editor UI.
@@ -49,16 +50,28 @@ Our Workflow Kit is open source and available on Github: [**inngest/workflow-kit
 <iframe src="https://ghbtns.com/github-btn.html?user=inngest&repo=workflow-kit&type=star&count=true" frameborder="0" scrolling="0" width="150" height="20" title="GitHub"></iframe>
 </div>
 
-## Examples
-
-The [inngest/workflow-kit](https://github.com/inngest/workflow-kit/) repository features a ready-to-deploy Next.js demo using the Workflow Kit, Supabase, and OpenAI to power some AI content workflows:
-
-![workflow-kit-announcement-video-loop.gif](/assets/docs/reference/workflow-kit/workflow-demo.gif)
-
-<CardGroup cols={1}>
-
-<Card href={'https://github.com/inngest/workflow-kit/tree/main/examples/nextjs-blog-cms#readme'} title={"Clone or deploy the Next.js CMS AI workflows demo"} icon={<GithubIcon className="text-basis h-4 w-4" />}>
-     The Blog AI workflows demo app features AI workflows helping with grammar fixes, generating Table of Contents or Tweets, powered by the Workflow Kit.
-</Card>
+## Guides and examples
+
+Get started with Worflow Kit by exploring our guide or cloning our Next.js template:
+
+<CardGroup cols={2}>
+
+  <Card 
+    href={"/docs/guides/user-defined-workflows"}
+    title={"Guide: Build workflows configurable by your users"}
+    icon={<NewspaperIcon className="text-basis h-6 w-6" />}
+    iconPlacement="top"
+  >
+    Follow this step-by-step tutorial to learn how to use Workflow Kit to add automations to a CMS Next.js application.
+  </Card>
+
+  <Card
+    href={'https://github.com/inngest/workflow-kit/tree/main/examples/nextjs-blog-cms#readme'}
+    title={"Next.js template: CMS AI automation demo"}
+    icon={<GithubIcon className="text-basis h-6 w-6" />}
+    iconPlacement="top"
+    >
+      This Next.js template features AI workflows helping with grammar fixes, generating Table of Contents or Tweets.
+  </Card>
 
 </CardGroup>

shared/Icons/Newspaper.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import type { IconProps } from "./props";
+
+const Newspaper = ({
+  size = "1em",
+  fill = "currentColor",
+  className = "",
+}: IconProps) => (
+  <svg
+    width={size}
+    height={size}
+    className={className}
+    viewBox="0 0 25 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M16.1 19.2V4.8H5.3V18.3C5.3 18.5387 5.39482 18.7676 5.5636 18.9364C5.73239 19.1052 5.96131 19.2 6.2 19.2H16.1ZM18.8 21H6.2C5.48392 21 4.79716 20.7155 4.29081 20.2092C3.78446 19.7028 3.5 19.0161 3.5 18.3V3.9C3.5 3.66131 3.59482 3.43239 3.7636 3.2636C3.93239 3.09482 4.16131 3 4.4 3H17C17.2387 3 17.4676 3.09482 17.6364 3.2636C17.8052 3.43239 17.9 3.66131 17.9 3.9V10.2H21.5V18.3C21.5 19.0161 21.2155 19.7028 20.7092 20.2092C20.2028 20.7155 19.5161 21 18.8 21ZM17.9 12V18.3C17.9 18.5387 17.9948 18.7676 18.1636 18.9364C18.3324 19.1052 18.5613 19.2 18.8 19.2C19.0387 19.2 19.2676 19.1052 19.4364 18.9364C19.6052 18.7676 19.7 18.5387 19.7 18.3V12H17.9ZM7.1 6.6H12.5V12H7.1V6.6ZM8.9 8.4V10.2H10.7V8.4H8.9ZM7.1 12.9H14.3V14.7H7.1V12.9ZM7.1 15.6H14.3V17.4H7.1V15.6Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default Newspaper;