Improve component docs (#35)

* Update component docstrings
* Remove transitions libs
* Add span component
* Add lock files

.gitignore

@@ -1,10 +1,4 @@
-**/*.pyc
 **/.DS_Store
-**/*.swp
-**/.web
-**/*.db
-**/node_modules/**
-bun.lockb
-poetry.lock
+**/*.pyc
 dist/*
 examples/

pynecone/components/component.py

@@ -241,7 +241,7 @@ class Component(Base, ABC):
         Returns:
             The unique fields.
         """
-        return set(cls.get_fields()) - set(Component.get_fields())
+        return set(cls.get_fields()) - set(Component.get_fields()) - {"library", "tag"}
 
     @classmethod
     def create(cls, *children, **props) -> Component:

pynecone/components/datadisplay/code.py

@@ -18,7 +18,7 @@ class CodeBlock(Component):
 
     tag = "Prism"
 
-    # The theme to use.
+    # The theme to use ("light" or "dark").
     theme: Var[str]
 
     # The language to use.

pynecone/components/datadisplay/datatable.py

@@ -19,6 +19,7 @@ class DataTable(Gridjs):
 
     tag = "Grid"
 
+    # The dataframe to use.
     df: Var[Any]
 
     # The data to display. EIther a list of lists or a pandas dataframe.

pynecone/components/datadisplay/list.py

@@ -6,7 +6,7 @@ from pynecone.var import Var
 
 
 class List(ChakraComponent):
-    """List component is used to display list items. It renders a ul element by default."""
+    """Display a list of items."""
 
     tag = "List"
 
@@ -21,18 +21,18 @@ class List(ChakraComponent):
 
 
 class ListItem(ChakraComponent):
-    """ListItem composes Box so you can pass all style and pseudo style props."""
+    """A single list item."""
 
     tag = "ListItem"
 
 
 class OrderedList(ChakraComponent):
-    """An ordered list component."""
+    """An ordered list component with numbers."""
 
     tag = "OrderedList"
 
 
 class UnorderedList(ChakraComponent):
-    """An unordered list component."""
+    """An unordered list component with bullets."""
 
     tag = "UnorderedList"

pynecone/components/feedback/alert.py

@@ -5,7 +5,7 @@ from pynecone.var import Var
 
 
 class Alert(ChakraComponent):
-    """Container to stack elements with spacing."""
+    """An alert feedback box."""
 
     tag = "Alert"
 
@@ -17,13 +17,13 @@ class Alert(ChakraComponent):
 
 
 class AlertIcon(ChakraComponent):
-    """AlertIcon composes Icon and changes the icon based on the status prop."""
+    """An icon displayed in the alert."""
 
     tag = "AlertIcon"
 
 
 class AlertTitle(ChakraComponent):
-    """AlertTitle composes the Box component."""
+    """The title of the alert."""
 
     tag = "AlertTitle"
 

pynecone/components/forms/formcontrol.py

@@ -5,7 +5,7 @@ from pynecone.var import Var
 
 
 class FormControl(ChakraComponent):
-    """FormControl provides context such as isInvalid, isDisabled, and isRequired to form elements."""
+    """Provide context to form components."""
 
     tag = "FormControl"
 

pynecone/components/forms/iconbutton.py

@@ -1,11 +1,11 @@
-"""A button component."""
+"""An icon button component."""
 
 from pynecone.components.typography.text import Text
 from pynecone.var import Var
 
 
 class IconButton(Text):
-    """A button that can be clicked."""
+    """A button with an icon."""
 
     tag = "IconButton"
 

pynecone/components/forms/rangeslider.py

@@ -1,4 +1,4 @@
-"""A button component."""
+"""A range slider component."""
 
 from typing import List, Set
 
@@ -80,20 +80,21 @@ class RangeSlider(ChakraComponent):
 
 
 class RangeSliderTrack(ChakraComponent):
-    """A button component."""
+    """A range slider track."""
 
     tag = "RangeSliderTrack"
 
 
 class RangeSliderFilledTrack(ChakraComponent):
-    """A button component."""
+    """A filled range slider track."""
 
     tag = "RangeSliderFilledTrack"
 
 
 class RangeSliderThumb(ChakraComponent):
-    """A button component."""
+    """A range slider thumb."""
 
     tag = "RangeSliderThumb"
 
+    # The position of the thumb.
     index: Var[int]

pynecone/components/forms/select.py

@@ -83,7 +83,7 @@ class Select(ChakraComponent):
 
 
 class Option(Text):
-    """A button component."""
+    """A select option."""
 
     tag = "option"
 

pynecone/components/layout/box.py

@@ -8,7 +8,7 @@ from pynecone.var import Var
 
 
 class Box(ChakraComponent):
-    """Renders a box component that can contain other components."""
+    """A generic container component that can contain other components."""
 
     tag = "Box"
 
@@ -16,10 +16,10 @@ class Box(ChakraComponent):
     element: Var[str]
 
     # The source of the content.
-    src: Optional[str] = None
+    src: Var[str]
 
     # The alt text of the content.
-    alt: Optional[str] = None
+    alt: Var[str]
 
     def _render(self) -> Tag:
         return (

pynecone/components/layout/center.py

@@ -4,18 +4,18 @@ from pynecone.components.libs.chakra import ChakraComponent
 
 
 class Center(ChakraComponent):
-    """Center is a layout component that centers its child within itself. It's useful for centering text, images, and other elements. All box can be used on center to style."""
+    """A box that centers its contents."""
 
     tag = "Center"
 
 
 class Square(ChakraComponent):
-    """Square centers its child given size (width and height). All box props can be used on Square."""
+    """A centered square container."""
 
     tag = "Square"
 
 
 class Circle(ChakraComponent):
-    """Circle a Square with round border-radius. All box props can be used on Circle."""
+    """A square container with round border-radius."""
 
     tag = "Circle"

pynecone/components/layout/cond.py

@@ -12,7 +12,7 @@ from pynecone.var import Var
 
 
 class Cond(Component):
-    """Display a conditional render."""
+    """Render one of two components based on a condition."""
 
     # The cond to determine which component to render.
     cond: Var[bool]

pynecone/components/layout/container.py

@@ -5,7 +5,7 @@ from pynecone.var import Var
 
 
 class Container(ChakraComponent):
-    """Container composes Box so you can pass all Box related props in addition to this."""
+    """A flexbox container that centers its children and sets a max width."""
 
     tag = "Container"
 

pynecone/components/layout/flex.py

@@ -5,7 +5,7 @@ from pynecone.var import Var
 
 
 class Flex(ChakraComponent):
-    """Flex is Box with display, flex and comes with helpful style shorthand. It renders a div element."""
+    """A reflexive container component."""
 
     tag = "Flex"
 

pynecone/components/layout/foreach.py

@@ -9,7 +9,7 @@ from pynecone.var import BaseVar, Var
 
 
 class Foreach(Component):
-    """Display a foreach."""
+    """A component that takes in an iterable and a render function and renders a list of components."""
 
     # The iterable to create components from.
     iterable: Var[List]

pynecone/components/layout/grid.py

@@ -7,7 +7,7 @@ from pynecone.var import Var
 
 
 class Grid(ChakraComponent):
-    """The main wrapper of th egrid component."""
+    """A grid component."""
 
     tag = "Grid"
 

pynecone/components/layout/spacer.py

@@ -4,6 +4,6 @@ from pynecone.components.libs.chakra import ChakraComponent
 
 
 class Spacer(ChakraComponent):
-    """Display a flexible space."""
+    """A flexible space component."""
 
     tag = "Spacer"

pynecone/components/layout/stack.py

@@ -5,7 +5,7 @@ from pynecone.var import Var
 
 
 class Stack(ChakraComponent):
-    """Display a square box."""
+    """Container to stack elements with spacing."""
 
     tag = "Stack"
 
@@ -35,12 +35,12 @@ class Stack(ChakraComponent):
 
 
 class Hstack(Stack):
-    """The HStack component is a component which is only facing the horizontal direction. Additionally you can add a divider and horizontal spacing between the items."""
+    """Stack items horizontally."""
 
     tag = "HStack"
 
 
 class Vstack(Stack):
-    """The VStack component is a component which is only facing the vertical direction. Additionally you can add a divider and vertical spacing between the items."""
+    """Stack items vertically."""
 
     tag = "VStack"

pynecone/components/layout/wrap.py

@@ -4,7 +4,7 @@ from pynecone.components.libs.chakra import ChakraComponent
 
 
 class Wrap(ChakraComponent):
-    """Layout component used to add space between elements and wraps automatically if there isn't enough space."""
+    """Layout component used to add space between elements and wrap automatically if there isn't enough space."""
 
     tag = "Wrap"
 

pynecone/components/media/icon.py

@@ -4,12 +4,12 @@ from pynecone.components.component import Component
 
 
 class ChakraIconComponent(Component):
-    """A component that wraps a chakra icon component."""
+    """A component that wraps a Chakra icon component."""
 
     library = "@chakra-ui/icons"
 
 
 class Icon(ChakraIconComponent):
-    """The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon."""
+    """An image icon."""
 
     tag = "None"

pynecone/components/media/image.py

@@ -9,7 +9,7 @@ from pynecone.var import Var
 
 
 class Image(ChakraComponent):
-    """The Image component is used to display images. Image composes Box so you can use all the style props and add responsive styles as well."""
+    """Display an image."""
 
     tag = "Image"
 

pynecone/components/navigation/link.py

@@ -7,7 +7,7 @@ from pynecone.var import Var
 
 
 class Link(ChakraComponent):
-    """Component the provides a link."""
+    """Link to another page."""
 
     tag = "Link"
 

pynecone/components/navigation/linkoverlay.py

@@ -5,7 +5,7 @@ from pynecone.var import Var
 
 
 class LinkOverlay(ChakraComponent):
-    """Wraps cild componet in a link."""
+    """Wraps child component in a link."""
 
     tag = "LinkOverlay"
 

pynecone/components/navigation/nextlink.py

@@ -4,15 +4,11 @@ from pynecone.components.component import Component
 from pynecone.var import Var
 
 
-class NextLinkLib(Component):
-    """A component that inherits from next/link."""
+class NextLink(Component):
+    """Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink and semantically renders an <a>."""
 
     library = "next/link"
 
-
-class NextLink(NextLinkLib):
-    """Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink and semantically renders an <a>."""
-
     tag = "NextLink"
 
     # The page to link to.

pynecone/components/overlay/menu.py

@@ -74,8 +74,10 @@ class MenuButton(ChakraComponent):
 
     tag = "MenuButton"
 
+    # The variant of the menu button.
     variant: Var[str]
 
+    # The tag to use for the menu button.
     as_: Var[str]
 
 

pynecone/components/transitions/__init__.py

@@ -1 +0,0 @@
-"""Overlay components."""

pynecone/components/transitions/observer.py

@@ -1,15 +0,0 @@
-"""Container to observer element."""
-
-from pynecone.components.component import Component
-
-
-class Observer(Component):
-    """A component that wraps a react-visibility-sensor component."""
-
-    library = "react-visibility-sensor"
-
-
-class VisibilitySensor(Observer):
-    """Display a square box."""
-
-    tag = "VisibilitySensor"

pynecone/components/transitions/transitions.py

@@ -1,29 +0,0 @@
-"""Container to stack elements with spacing."""
-
-from pynecone.components.libs.chakra import ChakraComponent
-from pynecone.components.tags import Tag
-from pynecone.var import Var
-
-
-class Fade(ChakraComponent):
-    """Display a square box."""
-
-    tag = "Fade"
-
-
-class ScaleFade(ChakraComponent):
-    """Display a square box."""
-
-    tag = "ScaleFade"
-
-
-class Slide(ChakraComponent):
-    """Display a square box."""
-
-    tag = "Slide"
-
-
-class SlideFade(ChakraComponent):
-    """Display a square box."""
-
-    tag = "SlideFade"

pynecone/components/typography/__init__.py

@@ -4,20 +4,7 @@ from pynecone.components.component import Component
 
 from .heading import Heading
 from .markdown import Markdown
+from .span import Span
 from .text import Text
 
-
-def span(text: str, **kwargs) -> Component:
-    """Create a span component.
-
-    Args:
-        text: The text to display.
-        **kwargs: The keyword arguments to pass to the Text component.
-
-    Returns:
-        The span component.
-    """
-    return Text.create(text, as_="span", **kwargs)
-
-
 __all__ = [f for f in dir() if f[0].isupper() or f in ("span",)]  # type: ignore

pynecone/components/typography/heading.py

@@ -5,7 +5,7 @@ from pynecone.var import Var
 
 
 class Heading(ChakraComponent):
-    """Heading composes Box so you can use all the style props and add responsive styles as well. It renders an h2 tag by default."""
+    """A page heading."""
 
     tag = "Heading"
 

pynecone/components/typography/markdown.py

@@ -14,6 +14,7 @@ class Markdown(Component):
 
     tag = "ReactMarkdown"
 
+    # The source of the markdown.
     src: Var[str]
 
     def _get_imports(self):

pynecone/components/typography/span.py

@@ -0,0 +1,14 @@
+"""A text component."""
+from __future__ import annotations
+
+from pynecone.components.libs.chakra import ChakraComponent
+from pynecone.var import Var
+
+
+class Span(ChakraComponent):
+    """Render an inline span of text."""
+
+    tag = "Text"
+
+    # Override the tag. The default tag is `<span>`.
+    as_: Var[str] = "span"  # type: ignore

pynecone/components/typography/text.py

@@ -2,26 +2,13 @@
 from __future__ import annotations
 
 from pynecone.components.libs.chakra import ChakraComponent
-from pynecone.components.tags import Tag
 from pynecone.var import Var
 
 
 class Text(ChakraComponent):
-    """Text component is the used to render text and paragraphs within an interface. It renders a p tag by default."""
+    """Render a paragraph of text."""
 
     tag = "Text"
 
-    # The text to display.
-    text: Var[str]
-
-    # The CSS `text-align` property
-    text_align: Var[str]
-
-    # The CSS `text-transform` property
-    casing: Var[str]
-
-    # The CSS `text-decoration` property
-    decoration: Var[str]
-
-    # Override the text element. Tpyes are b, strong, i, em, mark, small, del, ins, sub, and sup.
+    # Override the tag. The default tag is `<p>`.
     as_: Var[str]