mirror of
https://github.com/katanemo/plano.git
synced 2026-04-25 00:36:34 +02:00
0c3efdbef2
* feat: redesign archgw -> plano + website * feat(www): refactor landing page sections, add new diagrams and UI improvements * feat(www): sections enhanced for clarify & diagrams added * feat(www): improvements to mobile design, layout of diagrams * feat(www): clean + typecheck * feat(www): feedback loop changes * feat(www): fix type error * fix lib/utils error * feat(www): ran biome formatting * feat(www): graphic changes * feat(www): web analytics * fea(www): changes * feat(www): introduce monorepo This change brings Turborepo monorepo to independently handle the marketing website, the docs website and any other future use cases for mutli-platform support. They are using internal @katanemo package handlers for the design system and logic. * fix(www): transpiler failure * fix(www): tsconfig issue * fix(www): next.config issue * feat(docs): hold off on docs * Delete next.config.ts * feat(www): content fix * feat(www): introduce blog * feat(www): content changes * Update package-lock.json * feat: update text * Update IntroSection.tsx * feat: Turbopack issue * fix * Update IntroSection.tsx * feat: updated Research page * refactor(www): text clarity, padding adj. * format(www) * fix: add missing lib/ files to git - fixes Vercel GitHub deployment - Updated .gitignore to properly exclude Python lib/ but include Next.js lib/ directories - Added packages/ui/src/lib/utils.ts (cn utility function) - Added apps/www/src/lib/sanity.ts (Sanity client configuration) - Fixes module resolution errors in Vercel GitHub deployments (case-sensitive filesystem) * Update .gitignore * style(www): favicon + metadata * fix(www): links * fix(www): add analytics * fix(www): add * fix(www): fix links + image * fix(www): fix links + image * fix(www): fix links * fix(www): remove from tools testing.md
59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
import { createFlowDiagram, FlowStep } from "@/utils/asciiBuilder";
|
|
|
|
/**
|
|
* Easy-to-use diagram templates that automatically handle spacing
|
|
* Perfect for non-coders who just want to define their flow
|
|
*/
|
|
|
|
// Example: Simple 3-step process
|
|
export const createSimpleProcess = (steps: string[]) => {
|
|
return createFlowDiagram({
|
|
title: "Process Flow",
|
|
width: 60,
|
|
steps: steps.map((label) => ({
|
|
label,
|
|
type: "regular" as const,
|
|
shadow: true,
|
|
})),
|
|
});
|
|
};
|
|
|
|
// Example: Create a nested container diagram
|
|
export const createNestedDiagram = (
|
|
title: string,
|
|
innerContent: FlowStep[],
|
|
width: number = 70,
|
|
) => {
|
|
return createFlowDiagram({
|
|
title,
|
|
width,
|
|
steps: innerContent,
|
|
});
|
|
};
|
|
|
|
// Pre-built templates
|
|
export const templates = {
|
|
simpleFlow: createSimpleProcess(["Start", "Process", "End"]),
|
|
|
|
apiFlow: createFlowDiagram({
|
|
title: "API Request Flow",
|
|
width: 65,
|
|
steps: [
|
|
{ label: "Client Request", type: "regular", shadow: true },
|
|
{ label: "API Gateway", type: "container", shadow: true },
|
|
{ label: "Process", type: "inner", shadow: true },
|
|
{ label: "Response", type: "regular", shadow: true },
|
|
],
|
|
}),
|
|
|
|
dataPipeline: createFlowDiagram({
|
|
title: "Data Pipeline",
|
|
width: 70,
|
|
steps: [
|
|
{ label: "Input Data", type: "regular", shadow: true },
|
|
{ label: "Transform", type: "inner", shadow: true },
|
|
{ label: "Validate", type: "regular", shadow: true },
|
|
{ label: "Store", type: "regular", shadow: true },
|
|
],
|
|
}),
|
|
};
|