Add Chakra Stepper Component (#1142)

pynecone/components/__init__.py

@@ -183,6 +183,15 @@ link = Link.create
 link_box = LinkBox.create
 link_overlay = LinkOverlay.create
 next_link = NextLink.create
+step = Step.create
+step_description = StepDescription.create
+step_icon = StepIcon.create
+step_indicator = StepIndicator.create
+step_number = StepNumber.create
+step_separator = StepSeparator.create
+step_status = StepStatus.create
+step_title = StepTitle.create
+stepper = Stepper.create
 alert_dialog = AlertDialog.create
 alert_dialog_body = AlertDialogBody.create
 alert_dialog_content = AlertDialogContent.create

pynecone/components/navigation/__init__.py

@@ -4,5 +4,16 @@ from .breadcrumb import Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSe
 from .link import Link
 from .linkoverlay import LinkBox, LinkOverlay
 from .nextlink import NextLink
+from .stepper import (
+    Step,
+    StepDescription,
+    StepIcon,
+    StepIndicator,
+    StepNumber,
+    Stepper,
+    StepSeparator,
+    StepStatus,
+    StepTitle,
+)
 
 __all__ = [f for f in dir() if f[0].isupper()]  # type: ignore

pynecone/components/navigation/stepper.py

@@ -0,0 +1,111 @@
+"""A component to indicate progress through a multi-step process."""
+
+from typing import List, Optional, Tuple
+
+from pynecone.components.component import Component
+from pynecone.components.libs.chakra import ChakraComponent
+from pynecone.vars import Var
+
+
+class Stepper(ChakraComponent):
+    """The parent container for a stepper."""
+
+    tag = "Stepper"
+
+    # The color scheme to use for the stepper; default is blue.
+    colorScheme: Var[str]
+
+    # Chakra provides a useSteps hook to control the stepper.
+    # Instead, use an integer state value to set progress in the stepper.
+
+    # The index of the current step.
+    index: Var[int]
+
+    # The size of the steps in the stepper.
+    size: Var[str]
+
+    @classmethod
+    def create(
+        cls, *children, items: Optional[List[Tuple]] = None, **props
+    ) -> Component:
+        """Create a Stepper component.
+
+        If the kw-args `items` is provided and is a list, they will be added as children.
+
+        Args:
+            children: The children of the component.
+            items (list): The child components for each step.
+            props: The properties of the component.
+
+        Returns:
+            The stepper component.
+        """
+        if len(children) == 0:
+            children = []
+            for indicator, layout, separator in items or []:
+                children.append(
+                    Step.create(
+                        StepIndicator.create(indicator),
+                        layout,
+                        StepSeparator.create(separator),
+                    )
+                )
+        return super().create(*children, **props)
+
+
+class Step(ChakraComponent):
+    """A component for an individual step in the stepper."""
+
+    tag = "Step"
+
+
+class StepDescription(ChakraComponent):
+    """The description text for a step component."""
+
+    tag = "StepDescription"
+
+
+class StepIcon(ChakraComponent):
+    """The icon displayed in a step indicator component."""
+
+    tag = "StepIcon"
+
+
+class StepIndicator(ChakraComponent):
+    """The component displaying the status of a step."""
+
+    tag = "StepIndicator"
+
+
+class StepNumber(ChakraComponent):
+    """The number of a step displayed in a step indicator component."""
+
+    tag = "StepNumber"
+
+
+class StepSeparator(ChakraComponent):
+    """The component separting steps."""
+
+    tag = "StepSeparator"
+
+
+class StepStatus(ChakraComponent):
+    """A component that displays a number or icon based on the status of a step."""
+
+    # [not working yet]
+    # active, complete, and incomplete should also be able to accept StepIcon or StepNumber components
+    # currently, these props only support strings
+
+    active: Var[str]
+
+    complete: Var[str]
+
+    incomplete: Var[str]
+
+    tag = "StepStatus"
+
+
+class StepTitle(ChakraComponent):
+    """The title text for a step component."""
+
+    tag = "StepTitle"