Merge pull request #35 from damianricobelli/jon/update-types

Rewire API for maximum extendability

.changeset/curvy-apricots-work.md

@@ -0,0 +1,6 @@
+---
+"docs": major
+"@stepperize/react": major
+---
+
+Rewire API for maximum extendability

biome.json

@@ -12,6 +12,9 @@
 	"organizeImports": {
 		"enabled": true
 	},
+	"formatter": {
+		"lineWidth": 120
+	},
 	"linter": {
 		"enabled": true,
 		"rules": {
@@ -31,7 +34,8 @@
 			},
 			"correctness": {
 				"noUnusedVariables": "error",
-				"noUnusedImports": "error"
+				"noUnusedImports": "error",
+				"useExhaustiveDependencies": "off"
 			}
 		}
 	}

docs/components/features.tsx

@@ -11,7 +11,7 @@ import {
 const features = [
 	{
 		title: "Lightweight",
-		description: "It's only 5kb in size and has no dependencies.",
+		description: "It's only ~1kb in size and has no dependencies.",
 		icon: Expand,
 	},
 	{

docs/examples/first-stepper.tsx

@@ -1,66 +1,49 @@
-import { Button } from "@/components/ui/button";
-import { Stepper, defineSteps, useStepper } from "@stepperize/react";
+import { Button } from "@/components/ui/button"
+import { defineStepper } from "@stepperize/react"
 
-const steps = defineSteps(
-	{ id: "first" },
-	{ id: "second" },
-	{ id: "third" },
-	{ id: "last" },
-);
-
-type Steps = typeof steps;
+const { useStepper } = defineStepper(
+	{ id: "first", title: "First" },
+	{ id: "second", title: "Second" },
+	{ id: "third", title: "Third" },
+	{ id: "last", title: "Last" },
+)
 
 export const MyFirstStepper = () => {
-	return (
-		<Stepper steps={steps}>
-			<MySteps />
-		</Stepper>
-	);
-};
-
-const MySteps = () => {
-	const {
-		when,
-		goToNextStep,
-		goToPrevStep,
-		isLastStep,
-		reset,
-		isFirstStep,
-		currentStep,
-	} = useStepper<Steps>();
+	const stepper = useStepper()
 
 	return (
 		<div className="flex flex-col gap-4 bg-gray-3 p-4 my-4 rounded-md">
-			{when("first").render((step) => (
-				<p>This is the {step.id}</p>
+			{stepper.when("first", (step) => (
+				<p>This is the {step.title} step.</p>
 			))}
 
-			{when("second").render((step) => (
-				<p>This is the {step.id}</p>
+			{stepper.when("second", (step) => (
+				<p>This is the {step.title} step.</p>
 			))}
 
-			{when("third").render((step) => (
-				<p>This is the {step.id}</p>
+			{stepper.when("third", (step) => (
+				<p>This is the {step.title} step.</p>
 			))}
 
-			{when("last").render(() => (
-				<p>You have reached the end of the stepper</p>
+			{stepper.when("last", (step) => (
+				<p>You have reached the {step.title} step.</p>
 			))}
 
-			{!isLastStep ? (
+			{!stepper.isLastStep ? (
 				<div className="flex items-center gap-2">
-					<Button onClick={goToPrevStep} disabled={isFirstStep}>
+					<Button onClick={stepper.goToPrevStep} disabled={stepper.isFirstStep}>
 						Previous
 					</Button>
-					<Button onClick={goToNextStep}>
-						{currentStep.id === "third" ? "Finish" : "Next"}
+
+					<Button onClick={stepper.goToNextStep}>
+						{stepper.when("third", () => "Finish", () => "Next")}
 					</Button>
 				</div>
 			) : (
 				<div className="flex items-center gap-2">
-					<Button onClick={reset}>Reset</Button>
+					<Button onClick={stepper.reset}>Reset</Button>
 				</div>
 			)}
 		</div>
-	);
-};
+	)
+}

docs/examples/multi-scoped-stepper.tsx

@@ -0,0 +1,116 @@
+import { Button } from "@/components/ui/button";
+import { defineStepper } from "@stepperize/react";
+
+const GlobalStepper = defineStepper(
+	{ id: "first", title: "First" },
+	{ id: "second", title: "Second" },
+	{ id: "last", title: "Last" },
+);
+
+const LocalStepper = defineStepper(
+	{ id: "first", title: "First" },
+	{ id: "second", title: "Second" },
+	{ id: "last", title: "Last" },
+);
+
+export const MyMultiScopedStepper = () => {
+	return (
+		<GlobalStepper.Scoped>
+			<MySteps />
+			<MyActions />
+		</GlobalStepper.Scoped>
+	);
+};
+
+const MySteps = () => {
+	const stepper = GlobalStepper.useStepper();
+
+	return (
+		<div className="flex flex-col gap-4 bg-gray-3 p-4 my-4 rounded-md">
+			{stepper.when("first", (step) => (
+				<p>This is the global {step.id} step. So it begins.</p>
+			))}
+
+			<MyLocalStepper />
+
+			{stepper.when("last", (step) => (
+				<p>This is the {step.id} step. So it ends.</p>
+			))}
+		</div>
+	);
+};
+
+const MyLocalStepper = () => {
+	const globalStepper = GlobalStepper.useStepper();
+	const localStepper = LocalStepper.useStepper();
+
+	return (
+		<>
+			{globalStepper.when("second", (step) => (
+				<div className="flex flex-col gap-4">
+					<p>This is the global {step.id} step.</p>
+					<div className="flex flex-col gap-4 border p-4 rounded-md">
+						{localStepper.when("first", (step) => (
+							<p>This is the local {step.id} step.</p>
+						))}
+						{localStepper.when("second", (step) => (
+							<p>This is the local {step.id} step.</p>
+						))}
+						{localStepper.when("last", (step) => (
+							<p>This is the local {step.id} step.</p>
+						))}
+						<MyLocalActions />
+					</div>
+				</div>
+			))}
+		</>
+	);
+};
+
+const MyActions = () => {
+	const stepper = GlobalStepper.useStepper();
+
+	return !stepper.isLastStep ? (
+		<div className="flex items-center gap-2">
+			<Button onClick={stepper.goToPrevStep} disabled={stepper.isFirstStep}>
+				Previous
+			</Button>
+
+			<Button onClick={stepper.goToNextStep}>
+				{stepper.when(
+					"second",
+					() => "Finish",
+					() => "Next",
+				)}
+			</Button>
+		</div>
+	) : (
+		<div className="flex items-center gap-2">
+			<Button onClick={stepper.reset}>Reset</Button>
+		</div>
+	);
+};
+
+const MyLocalActions = () => {
+	const stepper = LocalStepper.useStepper();
+
+	return !stepper.isLastStep ? (
+		<div className="flex items-center gap-2">
+			<Button onClick={stepper.goToPrevStep} disabled={stepper.isFirstStep}>
+				Previous
+			</Button>
+
+			<Button onClick={stepper.goToNextStep}>
+				{stepper.when(
+					"second",
+					() => "Finish",
+					() => "Next",
+				)}
+			</Button>
+		</div>
+	) : (
+		<div className="flex items-center gap-2">
+			<Button onClick={stepper.reset}>Reset</Button>
+		</div>
+	);
+};

docs/examples/scoped-stepper.tsx

@@ -0,0 +1,68 @@
+import { Button } from "@/components/ui/button";
+import { defineStepper } from "@stepperize/react";
+
+const { useStepper, Scoped } = defineStepper(
+	{ id: "first", title: "First" },
+	{ id: "second", title: "Second" },
+	{ id: "third", title: "Third" },
+	{ id: "last", title: "Last" },
+);
+
+export const MyScopedStepper = () => {
+	return (
+		<div className="flex flex-col gap-4 bg-gray-3 p-4 my-4 rounded-md">
+			<Scoped>
+				<MySteps />
+				<MyActions />
+			</Scoped>
+		</div>
+	);
+};
+
+const MySteps = () => {
+	const stepper = useStepper();
+
+	return (
+		<>
+			{stepper.when("first", (step) => (
+				<p>This is the {step.id} step. So it begins.</p>
+			))}
+
+			{stepper.when("second", (step) => (
+				<p>This is the {step.id} step.</p>
+			))}
+
+			{stepper.when("third", (step) => (
+				<p>This is the {step.id} step.</p>
+			))}
+
+			{stepper.when("last", (step) => (
+				<p>This is the {step.id} step. So it ends.</p>
+			))}
+		</>
+	);
+};
+
+const MyActions = () => {
+	const stepper = useStepper();
+
+	return !stepper.isLastStep ? (
+		<div className="flex items-center gap-2">
+			<Button onClick={stepper.goToPrevStep} disabled={stepper.isFirstStep}>
+				Previous
+			</Button>
+
+			<Button onClick={stepper.goToNextStep}>
+				{stepper.when(
+					"third",
+					() => "Finish",
+					() => "Next",
+				)}
+			</Button>
+		</div>
+	) : (
+		<div className="flex items-center gap-2">
+			<Button onClick={stepper.reset}>Reset</Button>
+		</div>
+	);
+};

docs/pages/docs/_meta.json

@@ -1,5 +1,6 @@
 {
 	"introduction": "Introduction",
+	"migrating-from-v1-to-v2": "Migrating from v1 to v2",
 	"getting-started": "Getting started",
 	"examples": "Examples"
 }

docs/pages/docs/examples/_meta.json

@@ -1,6 +1,6 @@
 {
-	"forms": "Forms",
 	"dialog": "Dialogs",
+	"forms": "Forms",
 	"query-params": "Query params",
 	"shareable-data": "Shareable data"
 }

docs/pages/docs/getting-started/_meta.json

@@ -1,7 +1,7 @@
 {
 	"installation": "Installation",
-	"creating-steps": "Creating steps",
-	"stepper": "Stepper",
+	"define-stepper": "Define Stepper",
 	"use-stepper": "useStepper()",
+	"scoped-stepper": "Scoped stepper",
 	"our-first-stepper": "Our first stepper"
 }