Merge pull request #53 from damianricobelli/feature/add-examples

docs: improve docs with fumadocs and add examples
react: add index to current element and new match method

.changeset/fifty-rabbits-give.md

@@ -0,0 +1,6 @@
+---
+"docs": patch
+"@stepperize/react": patch
+---
+
+docs, react: add examples and index to current step

.changeset/young-buses-look.md

@@ -0,0 +1,7 @@
+---
+"docs": minor
+"react": minor
+---
+
+docs: improve docs with fumadocs and add examples with Stackblitz
+react: add index to current value and new match method

apps/docs/.gitignore

@@ -0,0 +1,28 @@
+# deps
+/node_modules
+
+# generated content
+.map.ts
+.contentlayer
+.content-collections
+
+# test & build
+/coverage
+/.next/
+/out/
+/build
+*.tsbuildinfo
+
+# misc
+.DS_Store
+*.pem
+/.pnp
+.pnp.js
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# others
+.env*.local
+.vercel
+next-env.d.ts

apps/docs/.source/index.d.ts

@@ -0,0 +1,3 @@
+import type { GetOutput } from "fumadocs-mdx/config"
+export declare const docs: GetOutput<typeof import("../source.config.ts").docs>
+export declare const meta: GetOutput<typeof import("../source.config.ts").meta>

apps/docs/.source/source.config.mjs

@@ -0,0 +1,25 @@
+// source.config.ts
+import { rehypeCodeDefaultOptions } from "fumadocs-core/mdx-plugins";
+import { defineConfig, defineDocs } from "fumadocs-mdx/config";
+import { transformerTwoslash } from "fumadocs-twoslash";
+var { docs, meta } = defineDocs();
+var source_config_default = defineConfig({
+  generateManifest: true,
+  lastModifiedTime: "git",
+  mdxOptions: {
+    rehypeCodeOptions: {
+      inline: "tailing-curly-colon",
+      themes: {
+        light: "catppuccin-latte",
+        dark: "catppuccin-mocha"
+      },
+      //@ts-ignore
+      transformers: [...rehypeCodeDefaultOptions.transformers ?? [], transformerTwoslash()]
+    }
+  }
+});
+export {
+  source_config_default as default,
+  docs,
+  meta
+};

apps/docs/README.md

@@ -0,0 +1,26 @@
+# docs-2
+
+This is a Next.js application generated with
+[Create Fumadocs](https://github.com/fuma-nama/fumadocs).
+
+Run development server:
+
+```bash
+npm run dev
+# or
+pnpm dev
+# or
+yarn dev
+```
+
+Open http://localhost:3000 with your browser to see the result.
+
+## Learn More
+
+To learn more about Next.js and Fumadocs, take a look at the following
+resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
+  features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- [Fumadocs](https://fumadocs.vercel.app) - learn about Fumadocs

apps/docs/app/(home)/layout.tsx

@@ -0,0 +1,11 @@
+import { HomeLayout } from "fumadocs-ui/home-layout";
+import type { ReactNode } from "react";
+import { baseOptions } from "../layout.config";
+
+export default function Layout({
+	children,
+}: {
+	children: ReactNode;
+}): React.ReactElement {
+	return <HomeLayout {...baseOptions}>{children}</HomeLayout>;
+}

apps/docs/app/(home)/page.tsx

@@ -0,0 +1,74 @@
+import { HeroStepper } from "@/components/hero";
+import { HowItWorks } from "@/components/how-it-works";
+import Link from "next/link";
+
+export default function HomePage() {
+	return (
+		<main className="flex flex-col pt-24 lg:pt-32 gap-24 lg:gap-48 min-h-screen">
+			<section className="container px-4 md:px-6">
+				<div className="grid gap-12 lg:grid-cols-[1fr_400px] xl:grid-cols-[1fr_600px]">
+					<div className="flex flex-col justify-center gap-y-4">
+						<div className="space-y-4">
+							<h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
+								The library for building step-by-step workflows
+							</h1>
+							<p className="max-w-[600px] text-muted-foreground md:text-xl">
+								Create and customize step flows for your web and mobile apps easily and 100% typesafe.
+							</p>
+						</div>
+						<div className="flex flex-col gap-2 min-[400px]:flex-row">
+							<Link
+								className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-8 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+								href="docs/react"
+							>
+								Get Started
+							</Link>
+							<Link
+								className="inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-8 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+								href="https://github.com/damianricobelli/stepperize"
+							>
+								GitHub
+							</Link>
+						</div>
+					</div>
+					<div className="flex items-center justify-center">
+						<div className="w-full space-y-4">
+							<HeroStepper />
+						</div>
+					</div>
+				</div>
+			</section>
+			<HowItWorks />
+			<section className="container px-4 md:px-6">
+				<div className="text-center space-y-4">
+					<h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">Ready to simplify your flows?</h2>
+					<p className="max-w-[600px] mx-auto text-muted-foreground md:text-lg">
+						Start building intuitive, step-by-step workflows for your applications today. Stepperize makes it easy and
+						type-safe.
+					</p>
+					<div className="flex flex-col gap-2 min-[400px]:flex-row justify-center mt-6">
+						<Link
+							className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-8 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+							href="docs/react"
+						>
+							Get Started
+						</Link>
+						<Link
+							className="inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-8 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+							href="https://github.com/damianricobelli/stepperize"
+						>
+							GitHub
+						</Link>
+					</div>
+				</div>
+			</section>
+			<footer className="mt-auto py-6 bg-gray-100 dark:bg-transparent border-t border-gray-200 dark:border-gray-800">
+				<div className="container px-4 md:px-6">
+					<p className="text-sm text-gray-600 dark:text-gray-100 text-center">
+						© {new Date().getFullYear()} Stepperize. All rights reserved.
+					</p>
+				</div>
+			</footer>
+		</main>
+	);
+}

apps/docs/app/api/search/route.ts

@@ -0,0 +1,12 @@
+import { source } from "@/app/source";
+import { createSearchAPI } from "fumadocs-core/search/server";
+
+export const { GET } = createSearchAPI("advanced", {
+	indexes: source.getPages().map((page) => ({
+		title: page.data.title,
+		description: page.data.description,
+		structuredData: page.data.structuredData,
+		id: page.url,
+		url: page.url,
+	})),
+});

apps/docs/app/docs/[[...slug]]/page.tsx

@@ -0,0 +1,79 @@
+import { source } from "@/app/source";
+import { useMDXComponents } from "@/mdx-components";
+import { createMetadata, metadataImage } from "@/utils/metadata";
+import defaultMdxComponents from "fumadocs-ui/mdx";
+import { DocsBody, DocsDescription, DocsPage, DocsTitle } from "fumadocs-ui/page";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+
+interface Param {
+	slug: string[];
+}
+
+export default async function Page({
+	params,
+}: {
+	params: Param;
+}) {
+	const page = source.getPage(params.slug);
+	if (!page) {
+		notFound();
+	}
+
+	const MDX = page.data.body;
+
+	const components = useMDXComponents(defaultMdxComponents);
+
+	const path = `apps/docs/content/docs/${page.file.path}`;
+
+	return (
+		<DocsPage
+			toc={page.data.toc}
+			lastUpdate={page.data.lastModified}
+			full={page.data.full}
+			tableOfContent={{
+				style: "clerk",
+				single: false,
+			}}
+			editOnGithub={{
+				repo: "stepperize",
+				owner: "damianricobelli",
+				sha: "main",
+				path,
+			}}
+		>
+			<DocsTitle>{page.data.title}</DocsTitle>
+			<DocsDescription>{page.data.description}</DocsDescription>
+			<DocsBody>
+				<MDX components={{ ...components }} />
+			</DocsBody>
+		</DocsPage>
+	);
+}
+
+export async function generateStaticParams() {
+	return source.generateParams();
+}
+
+export function generateMetadata({ params }: { params: Param }): Metadata {
+	const page = source.getPage(params.slug);
+
+	if (!page) {
+		notFound();
+	}
+
+	const description = page.data.description ?? "The library for building step-by-step workflows.";
+
+	return createMetadata(
+		metadataImage.withImage(page.slugs, {
+			title: page.data.title,
+			description,
+			openGraph: {
+				url: `/docs/${page.slugs.join("/")}`,
+			},
+			icons: {
+				icon: "/icon.png",
+			},
+		}),
+	);
+}

apps/docs/app/docs/layout.tsx

@@ -0,0 +1,7 @@
+import { DocsLayout } from "fumadocs-ui/layout";
+import type { ReactNode } from "react";
+import { docsOptions } from "../layout.config";
+
+export default function Layout({ children }: { children: ReactNode }) {
+	return <DocsLayout {...docsOptions}>{children}</DocsLayout>;
+}

apps/docs/app/global.css

@@ -0,0 +1,84 @@
+@import "@radix-ui/colors/black-alpha.css";
+@import "@radix-ui/colors/white-alpha.css";
+
+@import "@radix-ui/colors/slate.css";
+@import "@radix-ui/colors/slate-dark.css";
+@import "@radix-ui/colors/green.css";
+@import "@radix-ui/colors/green-dark.css";
+@import "@radix-ui/colors/yellow.css";
+@import "@radix-ui/colors/yellow-dark.css";
+@import "@radix-ui/colors/red.css";
+@import "@radix-ui/colors/red-dark.css";
+@import "@radix-ui/colors/blue.css";
+@import "@radix-ui/colors/blue-dark.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 240 10% 3.9%;
+		--card: 0 0% 100%;
+		--card-foreground: 240 10% 3.9%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 240 10% 3.9%;
+		--primary: 240 5.9% 10%;
+		--primary-foreground: 0 0% 98%;
+		--secondary: 240 4.8% 95.9%;
+		--secondary-foreground: 240 5.9% 10%;
+		--muted: 240 4.8% 95.9%;
+		--muted-foreground: 240 3.8% 46.1%;
+		--accent: 240 4.8% 95.9%;
+		--accent-foreground: 240 5.9% 10%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 240 5.9% 90%;
+		--input: 240 5.9% 90%;
+		--ring: 240 10% 3.9%;
+		--radius: 0.5rem;
+		--chart-1: 12 76% 61%;
+		--chart-2: 173 58% 39%;
+		--chart-3: 197 37% 24%;
+		--chart-4: 43 74% 66%;
+		--chart-5: 27 87% 67%;
+		--fd-layout-width: 1400px;
+	}
+
+	.dark {
+		--background: 240 10% 3.9%;
+		--foreground: 0 0% 98%;
+		--card: 240 10% 3.9%;
+		--card-foreground: 0 0% 98%;
+		--popover: 240 10% 3.9%;
+		--popover-foreground: 0 0% 98%;
+		--primary: 0 0% 98%;
+		--primary-foreground: 240 5.9% 10%;
+		--secondary: 240 3.7% 15.9%;
+		--secondary-foreground: 0 0% 98%;
+		--muted: 240 3.7% 15.9%;
+		--muted-foreground: 240 5% 64.9%;
+		--accent: 240 3.7% 15.9%;
+		--accent-foreground: 0 0% 98%;
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 240 3.7% 15.9%;
+		--input: 240 3.7% 15.9%;
+		--ring: 240 4.9% 83.9%;
+		--chart-1: 220 70% 50%;
+		--chart-2: 160 60% 45%;
+		--chart-3: 30 80% 55%;
+		--chart-4: 280 65% 60%;
+		--chart-5: 340 75% 55%;
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}