Improved react-albus context types

types/react-albus/index.d.ts

@@ -2,6 +2,7 @@
 // Project: https://github.com/americanexpress/react-albus#readme
 // Definitions by: Sindre Seppola <https://github.com/sseppola>
 //                 Conrad Reuter <https://github.com/conradreuter>
+//                 Jonas Kugelmann <https://github.com/kuirak>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -23,19 +24,31 @@ export interface WizardContext {
     replace: (id?: string) => void;
 }
 
-export const Wizard: React.ComponentType<{
+export interface WizardComponentProps {
+    wizard: WizardContext;
+}
+
+export const withWizard: <P>(
+    component: React.ComponentType<P & WizardComponentProps>
+) => React.ComponentType<P>;
+
+export interface WizardProps {
     onNext?: (wizard: WizardContext) => void;
     render?: (wizard: WizardContext) => React.ReactNode;
     history?: History;
-}>;
+    basename?: string;
+}
 
-export const Steps: React.ComponentType<{
+export const Wizard: React.ComponentType<WizardProps>;
+
+export interface StepsProps {
     step?: WizardStepObject;
-}>;
+}
 
-export const Step: React.ComponentType<{
-    id: string;
-} & (
-    | { render?: (wizard: WizardContext) => React.ReactNode; }
-    | { children: (wizard: WizardContext) => React.ReactNode; }
-)>;
+export const Steps: React.ComponentType<StepsProps>;
+
+export type StepProps = { id: string } & (
+    | { render?: (wizard: WizardContext) => React.ReactNode }
+    | { children: (wizard: WizardContext) => React.ReactNode });
+
+export const Step: React.ComponentType<StepProps>;

types/react-albus/react-albus-tests.tsx

@@ -1,8 +1,10 @@
 import * as React from "react";
-import { Wizard, Step, Steps } from "react-albus";
+import { Wizard, Step, Steps, withWizard } from "react-albus";
+import { ButtonHTMLAttributes } from "react";
 
 const Example = () => (
     <Wizard
+        basename="path"
         onNext={wiz => {
             wiz.go(0);
             const location = wiz.history.location;
@@ -46,6 +48,12 @@ const Example = () => (
                         </div>
                     )}
                 </Step>
+                <Step id="hermione">
+                    <div>
+                        <h1>Hermoine</h1>
+                        <NextButton label="Next" />
+                    </div>
+                </Step>
                 <Step id="harry">
                     <div>
                         <h1>Harry</h1>
@@ -55,3 +63,8 @@ const Example = () => (
         )}
     />
 );
+
+export const NextButton = withWizard<{ label: string }>(props => {
+    const { wizard, label } = props;
+    return <button onClick={() => wizard.next()}>{label}</button>;
+});