From 711dd50f93308c720b8d4fad88e64be1acbbf5e2 Mon Sep 17 00:00:00 2001
From: Tiago Gimenes <tlgimenes@gmail.com>
Date: Thu, 9 Dec 2021 14:38:04 -0300
Subject: [PATCH 1/7] add automatic docs

---
 docs/docs/reference/ui/atoms/Badge.mdx        |  9 +--
 docs/docs/reference/ui/atoms/Button.mdx       |  9 +--
 docs/docs/reference/ui/atoms/Checkbox.mdx     | 11 +---
 docs/docs/reference/ui/atoms/Icon.mdx         | 18 +----
 docs/docs/reference/ui/atoms/Input.mdx        | 16 +----
 docs/docs/reference/ui/atoms/Label.mdx        |  9 +--
 docs/docs/reference/ui/atoms/List.mdx         | 17 +----
 docs/docs/reference/ui/atoms/Overlay.mdx      |  9 +--
 docs/docs/reference/ui/atoms/Popover.mdx      | 17 +----
 docs/docs/reference/ui/atoms/Price.mdx        | 40 ++----------
 docs/docs/reference/ui/atoms/Radio.mdx        |  9 +--
 docs/docs/reference/ui/atoms/Select.mdx       |  9 +--
 docs/docs/reference/ui/atoms/Skeleton.mdx     |  9 +--
 docs/docs/reference/ui/atoms/Slider.mdx       | 11 +---
 docs/docs/reference/ui/atoms/Spinner.mdx      |  9 +--
 docs/docs/reference/ui/atoms/TextArea.mdx     | 15 +----
 .../docs/reference/ui/molecules/Accordion.mdx | 54 ++-------------
 .../reference/ui/molecules/Breadcrumb.mdx     | 14 +---
 docs/docs/reference/ui/molecules/Bullets.mdx  | 45 +------------
 docs/docs/reference/ui/molecules/Carousel.mdx | 65 +------------------
 docs/docs/reference/ui/molecules/Form.mdx     | 13 ++--
 .../reference/ui/molecules/IconButton.mdx     | 21 ++----
 .../reference/ui/molecules/LoadingButton.mdx  | 15 +----
 docs/docs/reference/ui/molecules/Modal.mdx    | 25 +------
 .../reference/ui/molecules/PriceRange.mdx     | 54 +--------------
 .../reference/ui/molecules/RadioGroup.mdx     | 38 +----------
 .../reference/ui/molecules/SearchInput.mdx    | 30 ++-------
 docs/docs/reference/ui/molecules/Table.mdx    | 65 +++----------------
 docs/docusaurus.config.js                     | 22 ++++++-
 docs/package.json                             |  2 +
 .../PropsComponent/PropsComponent.tsx         | 12 ++--
 .../components/PropsSection/PropsSection.jsx  | 23 +++++++
 .../PropsSection/PropsSection.module.css      |  0
 yarn.lock                                     | 12 ++++
 34 files changed, 147 insertions(+), 580 deletions(-)
 create mode 100644 docs/src/components/PropsSection/PropsSection.jsx
 create mode 100644 docs/src/components/PropsSection/PropsSection.module.css

diff --git a/docs/docs/reference/ui/atoms/Badge.mdx b/docs/docs/reference/ui/atoms/Badge.mdx
index a247528155..ea7fc45dcf 100644
--- a/docs/docs/reference/ui/atoms/Badge.mdx
+++ b/docs/docs/reference/ui/atoms/Badge.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Badge
 
@@ -18,12 +18,7 @@ import { Badge } from '@faststore/ui'
 
 ## Props
 
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-badge"
-/>
+<PropsSection name="Badge" />
 
 ## Customization
 
diff --git a/docs/docs/reference/ui/atoms/Button.mdx b/docs/docs/reference/ui/atoms/Button.mdx
index 93f9893648..c84a6d9ed6 100644
--- a/docs/docs/reference/ui/atoms/Button.mdx
+++ b/docs/docs/reference/ui/atoms/Button.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Button
 
@@ -18,12 +18,7 @@ import { Button } from '@faststore/ui'
 
 ## Props
 
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-button"
-/>
+<PropsSection name="Button" />
 
 ## Customization
 
diff --git a/docs/docs/reference/ui/atoms/Checkbox.mdx b/docs/docs/reference/ui/atoms/Checkbox.mdx
index ae026640f9..119e77ce94 100644
--- a/docs/docs/reference/ui/atoms/Checkbox.mdx
+++ b/docs/docs/reference/ui/atoms/Checkbox.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Checkbox
 
@@ -21,13 +21,8 @@ import { Checkbox } from '@faststore/ui'
 
 ## Props
 
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-checkbox"
-/>
+<PropsSection name="Checkbox" />
 
 ## Customization
 
-`data-store-checkbox`
\ No newline at end of file
+`data-store-checkbox`
diff --git a/docs/docs/reference/ui/atoms/Icon.mdx b/docs/docs/reference/ui/atoms/Icon.mdx
index 3e5ed6231d..7275da9199 100644
--- a/docs/docs/reference/ui/atoms/Icon.mdx
+++ b/docs/docs/reference/ui/atoms/Icon.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Icon
 
@@ -18,20 +18,8 @@ import { Icon } from '@faststore/ui'
 
 ## Props
 
-<PropsComponent
-    name="component"
-    type= "ReactNode"
-    description="A React component that will be rendered as an icon."
-    required="true"
-/>
-
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-icon"
-/>
+<PropsSection name="Icon" />
 
 ## Customization
 
-`data-store-icon`
\ No newline at end of file
+`data-store-icon`
diff --git a/docs/docs/reference/ui/atoms/Input.mdx b/docs/docs/reference/ui/atoms/Input.mdx
index 8b9fa9502c..720eed7781 100644
--- a/docs/docs/reference/ui/atoms/Input.mdx
+++ b/docs/docs/reference/ui/atoms/Input.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Input
 
@@ -30,19 +30,7 @@ import { Input } from '@faststore/ui'
 
 ## Props
 
-<PropsComponent
-    name="variant"
-    type= "string"
-    description="Current variant of the input."
-    possibleValues="success | error"
-/>
-
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-input"
-/>
+<PropsSection name="Input" />
 
 ## Customization
 
diff --git a/docs/docs/reference/ui/atoms/Label.mdx b/docs/docs/reference/ui/atoms/Label.mdx
index 84368b1838..0be63c6e38 100644
--- a/docs/docs/reference/ui/atoms/Label.mdx
+++ b/docs/docs/reference/ui/atoms/Label.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Label
 
@@ -18,12 +18,7 @@ import { Label } from '@faststore/ui'
 
 ## Props
 
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-label"
-/>
+<PropsSection name="Label" />
 
 ## Customization
 
diff --git a/docs/docs/reference/ui/atoms/List.mdx b/docs/docs/reference/ui/atoms/List.mdx
index 34e0e88f00..515687f03d 100644
--- a/docs/docs/reference/ui/atoms/List.mdx
+++ b/docs/docs/reference/ui/atoms/List.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # List
 
@@ -71,18 +71,7 @@ import { List } from '@faststore/ui'
 
 ## Props
 
-<PropsComponent
-    name="variant"
-    type= "string"
-    possibleValues="description | ordered | unordered | unordered"
-/>
-
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-list"
-/>
+<PropsSection name="List" />
 
 ## Customization
 
@@ -92,4 +81,4 @@ import { List } from '@faststore/ui'
 
 `data-ordered`
 
-`data-description`
\ No newline at end of file
+`data-description`
diff --git a/docs/docs/reference/ui/atoms/Overlay.mdx b/docs/docs/reference/ui/atoms/Overlay.mdx
index 1ec6561949..8ee8549dca 100644
--- a/docs/docs/reference/ui/atoms/Overlay.mdx
+++ b/docs/docs/reference/ui/atoms/Overlay.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Overlay
 
@@ -36,12 +36,7 @@ function Component () {
 
 ## Props
 
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-overlay"
-/>
+<PropsSection name="Overlay" />
 
 ## Customization
 
diff --git a/docs/docs/reference/ui/atoms/Popover.mdx b/docs/docs/reference/ui/atoms/Popover.mdx
index d1079ee8ca..5f81ffaa19 100644
--- a/docs/docs/reference/ui/atoms/Popover.mdx
+++ b/docs/docs/reference/ui/atoms/Popover.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Popover
 
@@ -36,20 +36,7 @@ function() {
 
 ## Props
 
-<PropsComponent
-    name="targetRef"
-    type= "string"
-    description="Ref for the component initial position."
-    possibleValues="RefObject<PossibleNode>"
-    required="true"
-/>
-
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-popover"
-/>
+<PropsSection name="Popover" />
 
 ## Customization
 
diff --git a/docs/docs/reference/ui/atoms/Price.mdx b/docs/docs/reference/ui/atoms/Price.mdx
index 809337371e..bfe39d96bf 100644
--- a/docs/docs/reference/ui/atoms/Price.mdx
+++ b/docs/docs/reference/ui/atoms/Price.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Price
 
@@ -13,8 +13,8 @@ import { Price } from '@faststore/ui'
 ## Usage
 
 ```tsx live
-<Price 
-  value={62.5} 
+<Price
+  value={62.5}
 />
 ```
 
@@ -89,37 +89,7 @@ import { Price } from '@faststore/ui'
 
 ## Props
 
-<PropsComponent
-    name="value"
-    type= "number"
-    description="The raw price value."
-    required="true"
-/>
-<PropsComponent
-    name="as"
-    type= "string"
-    description="Set the HTML element tag of this component."
-    possibleValues="ElementType<any>"
-/>
-<PropsComponent
-    name="formatter"
-    type= "PriceFormatter"
-    description="Formatter function that transforms the raw price value and render the result."
-    defaultValue="price => price"
-/>
-<PropsComponent
-    name="variant"
-    type= "string"
-    description="The current use case variant for prices."
-    defaultValue="selling"
-    possibleValues="selling | listing | spot | savings | installment"
-/>
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-price"
-/>
+<PropsSection name="Price" />
 
 ## Customization
 
@@ -136,4 +106,4 @@ function customFormatter(price: number) {
 
   return formattedPrice
 },
-```
\ No newline at end of file
+```
diff --git a/docs/docs/reference/ui/atoms/Radio.mdx b/docs/docs/reference/ui/atoms/Radio.mdx
index 151e66aa97..82989c56d2 100644
--- a/docs/docs/reference/ui/atoms/Radio.mdx
+++ b/docs/docs/reference/ui/atoms/Radio.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Radio
 
@@ -18,12 +18,7 @@ import { Radio } from '@faststore/ui'
 
 ## Props
 
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-radio"
-/>
+<PropsSection name="Radio" />
 
 ## Customization
 
diff --git a/docs/docs/reference/ui/atoms/Select.mdx b/docs/docs/reference/ui/atoms/Select.mdx
index e09ae3e678..15950bc760 100644
--- a/docs/docs/reference/ui/atoms/Select.mdx
+++ b/docs/docs/reference/ui/atoms/Select.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Select
 
@@ -78,12 +78,7 @@ import { Select } from '@faststore/ui'
 
 ## Props
 
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-select"
-/>
+<PropsSection name="Select" />
 
 ## Customization
 
diff --git a/docs/docs/reference/ui/atoms/Skeleton.mdx b/docs/docs/reference/ui/atoms/Skeleton.mdx
index 22260fce62..cdc3f4463b 100644
--- a/docs/docs/reference/ui/atoms/Skeleton.mdx
+++ b/docs/docs/reference/ui/atoms/Skeleton.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Skeleton
 
@@ -18,12 +18,7 @@ import { Skeleton } from '@faststore/ui'
 
 ## Props
 
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-skeleton"
-/>
+<PropsSection name="Skeleton" />
 
 ## Customization
 
diff --git a/docs/docs/reference/ui/atoms/Slider.mdx b/docs/docs/reference/ui/atoms/Slider.mdx
index ef1e4d6d53..bfd9de0b1e 100644
--- a/docs/docs/reference/ui/atoms/Slider.mdx
+++ b/docs/docs/reference/ui/atoms/Slider.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Slider
 
@@ -21,12 +21,7 @@ import { Slider } from '@faststore/ui'
 
 ## Props
 
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-slider"
-/>
+<PropsSection name="Slider" />
 
 ## Customization
 
@@ -34,4 +29,4 @@ import { Slider } from '@faststore/ui'
 
 `data-store-slider-range`
 
-`data-store-slider-thumb='(left|right)'`
\ No newline at end of file
+`data-store-slider-thumb='(left|right)'`
diff --git a/docs/docs/reference/ui/atoms/Spinner.mdx b/docs/docs/reference/ui/atoms/Spinner.mdx
index 51bfb5a19f..8d7b032ab2 100644
--- a/docs/docs/reference/ui/atoms/Spinner.mdx
+++ b/docs/docs/reference/ui/atoms/Spinner.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Spinner
 
@@ -18,12 +18,7 @@ import { Spinner } from '@faststore/ui'
 
 ## Props
 
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-spinner"
-/>
+<PropsSection name="Spinner" />
 
 ## Customization
 
diff --git a/docs/docs/reference/ui/atoms/TextArea.mdx b/docs/docs/reference/ui/atoms/TextArea.mdx
index cfba0580d9..6aa56d6320 100644
--- a/docs/docs/reference/ui/atoms/TextArea.mdx
+++ b/docs/docs/reference/ui/atoms/TextArea.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # TextArea
 
@@ -36,18 +36,7 @@ import { TextArea } from '@faststore/ui'
 
 ## Props
 
-<PropsComponent
-    name="variant"
-    type= "string"
-    description="Current variant of the input."
-    possibleValues= "success | error"
-/>
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-textarea"
-/>
+<PropsSection name="TextArea" />
 
 ## Customization
 
diff --git a/docs/docs/reference/ui/molecules/Accordion.mdx b/docs/docs/reference/ui/molecules/Accordion.mdx
index 62f9f73a68..0877015e83 100644
--- a/docs/docs/reference/ui/molecules/Accordion.mdx
+++ b/docs/docs/reference/ui/molecules/Accordion.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Accordion
 
@@ -165,7 +165,7 @@ function() {
         </ul>
       </AccordionPanel>
     </AccordionItem>
-  </Accordion>  
+  </Accordion>
   );
 }
 ```
@@ -178,57 +178,15 @@ Besides those attributes, the following props are also supported:
 
 ### Accordion
 
-<PropsComponent
-    name="onChange"
-    type= "(index: number) => void"
-    description="Function that is triggered when an accordion item is opened/closed."
-    required="true"
-/>
-<PropsComponent
-    name="indices"
-    type= "Iterable<number>"
-    description="Indices that indicate which accordion items are opened."
-    required="true"
-/>
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-accordion"
-/>
+<PropsSection name="Accordion" />
 
 ### AccordionItem
 
-<PropsComponent
-    name="index"
-    type= "number"
-    description="Index of the current accordion item within the accordion."
-    defaultValue="0"
-/>
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-accordion-item"
-/>
-
-### AccordionButton
-
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-accordion-button"
-/>
+<PropsSection name="AccordionItem" />
 
 ### AccordionPanel
 
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-accordion-panel"
-/>
+<PropsSection name="AccordionPanel" />
 
 ## Customization
 
@@ -240,4 +198,4 @@ Besides those attributes, the following props are also supported:
 
 `data-store-accordion-panel`
 
-The `AccordionButton` component inherits [Button](/reference/ui/atoms/Button) css selectors.
\ No newline at end of file
+The `AccordionButton` component inherits [Button](/reference/ui/atoms/Button) css selectors.
diff --git a/docs/docs/reference/ui/molecules/Breadcrumb.mdx b/docs/docs/reference/ui/molecules/Breadcrumb.mdx
index 27f6ffe379..0df1c9896a 100644
--- a/docs/docs/reference/ui/molecules/Breadcrumb.mdx
+++ b/docs/docs/reference/ui/molecules/Breadcrumb.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Breadcrumb
 
@@ -31,17 +31,7 @@ import { Breadcrumb } from '@faststore/ui'
 
 ## Props
 
-<PropsComponent
-    name="divider"
-    type= "ReactNode"
-    description="A ReactNode that will be rendered as the Divider icon."
-/>
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-breadcrumb"
-/>
+<PropsSection name="Breadcrumb" />
 
 ## Customization
 
diff --git a/docs/docs/reference/ui/molecules/Bullets.mdx b/docs/docs/reference/ui/molecules/Bullets.mdx
index 930c62b902..76100f3a9b 100644
--- a/docs/docs/reference/ui/molecules/Bullets.mdx
+++ b/docs/docs/reference/ui/molecules/Bullets.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Bullets
 
@@ -22,46 +22,7 @@ import { Bullets } from '@faststore/ui'
 
 ## Props
 
-<PropsComponent
-    name="totalQuantity"
-    type= "number"
-    description="Number of bullets that should be rendered."
-    required="true"
-/>
-<PropsComponent
-    name="activeBullet"
-    type= "number"
-    description="The currently active bullet (zero-indexed)."
-    required="true"
-/>
-<PropsComponent
-    name="onClick"
-    type= "(e: MouseEvent<Element, MouseEvent>, bulletIdx: number) => void"
-    description="Event handler for clicks on each bullet. The handler will be called with the index of the bullet that received the click."
-    required="true"
-/>
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-bullets"
-/>
-<PropsComponent
-    name="ariaLabelGenerator"
-    type= "((index: number, isActive: boolean) => string)"
-    description="Function that should be used to generate the aria-label attribute added to each bullet that is inactive. It receives the bullet index as an argument so that it can be interpolated in the generated string."
-    defaultValue="(idx: number, isActive: boolean) => isActive ? 'Current page' : `Go to page ${idx + 1}`"
-/><PropsComponent
-    name="ariaControlsGenerator"
-    type= "((index: number) => string)"
-    description="Function that should be used to generate the aria-controls attribute added to each bullet. It receives the bullet index as argument and should return a string."
-/>
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-bullets"
-/>
+<PropsSection name="Bullets" />
 
 ## Customization
 
@@ -69,4 +30,4 @@ import { Bullets } from '@faststore/ui'
 
 `data-bullet-item`
 
-`[data-bullet-item][aria-selected="true"]`
\ No newline at end of file
+`[data-bullet-item][aria-selected="true"]`
diff --git a/docs/docs/reference/ui/molecules/Carousel.mdx b/docs/docs/reference/ui/molecules/Carousel.mdx
index ea44ed2637..4fe04091b9 100644
--- a/docs/docs/reference/ui/molecules/Carousel.mdx
+++ b/docs/docs/reference/ui/molecules/Carousel.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Carousel
 
@@ -37,66 +37,7 @@ import { Carousel } from '@faststore/ui'
 
 ## Props
 
-<PropsComponent
-    name="id"
-    type= "string"
-    defaultValue="store-carousel"
-/>
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-carousel"
-/>
-<PropsComponent
-    name="infiniteMode"
-    type= "boolean"
-    defaultValue="true"
-/>
-<PropsComponent
-    name="controls"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    possibleValues="complete | navigationArrows | paginationBullets"
-    defaultValue="complete"
-/>
-<PropsComponent
-    name="transition"
-    type= "{ duration: number; property: string; delay?: number; timing?: string; } | undefined"
-    defaultValue="{ duration: 400, property: 'transform' }"
-/>
-<PropsComponent
-    name="onSwipeStart"
-    type= "SwipeCallback"
-/>
-<PropsComponent
-    name="onSwiped"
-    type= "SwipeCallback"
-/>
-<PropsComponent
-    name="onSwipedDown"
-    type= "SwipeCallback"
-/>
-<PropsComponent
-    name="onSwipedLeft"
-    type= "SwipeCallback"
-/>
-<PropsComponent
-    name="onSwipedRight"
-    type= "SwipeCallback"
-/>
-<PropsComponent
-    name="onSwipedUp"
-    type= "SwipeCallback"
-/>
-<PropsComponent
-    name="onSwiping"
-    type= "SwipeCallback"
-/>
-<PropsComponent
-    name="onTap"
-    type= "TapCallback"
-/>
+<PropsSection name="Carousel" />
 
 ## Customization
 
@@ -114,4 +55,4 @@ import { Carousel } from '@faststore/ui'
 
 `data-carousel-bullets`
 
-`[data-carousel-bullets] [data-store-bullets]`
\ No newline at end of file
+`[data-carousel-bullets] [data-store-bullets]`
diff --git a/docs/docs/reference/ui/molecules/Form.mdx b/docs/docs/reference/ui/molecules/Form.mdx
index ea09d85bf6..14a080f8be 100644
--- a/docs/docs/reference/ui/molecules/Form.mdx
+++ b/docs/docs/reference/ui/molecules/Form.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Form
 
@@ -62,13 +62,8 @@ import { Form } from '@faststore/ui'
 
 The Form component supports all attributes also supported by the `<form>` HTML tag. Besides those attributes, the following prop is also supported:
 
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-form"
-/>
+<PropsSection name="Form" />
 
-## Customization 
+## Customization
 
-`data-store-form`
\ No newline at end of file
+`data-store-form`
diff --git a/docs/docs/reference/ui/molecules/IconButton.mdx b/docs/docs/reference/ui/molecules/IconButton.mdx
index 7a87f9d84a..d7c590cc7c 100644
--- a/docs/docs/reference/ui/molecules/IconButton.mdx
+++ b/docs/docs/reference/ui/molecules/IconButton.mdx
@@ -1,8 +1,8 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # IconButton
 
-Icon Buttons are icons that trigger some sort of action, such as adding an item to the cart. 
+Icon Buttons are icons that trigger some sort of action, such as adding an item to the cart.
 
 ## Import
 
@@ -29,21 +29,10 @@ import { IconButton } from '@faststore/ui'
 
 ## Props
 
-<PropsComponent
-    name="icon"
-    type= "ReactNode"
-    description="A React component that will be rendered as an icon."
-    required="true"
-/>
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-icon-button"
-/>
+<PropsSection name="IconButton" />
 
-## Customization 
+## Customization
 
 `data-store-icon-button`
 
-This component inherits [Button](/reference/ui/atoms/Button) css selectors.
\ No newline at end of file
+This component inherits [Button](/reference/ui/atoms/Button) css selectors.
diff --git a/docs/docs/reference/ui/molecules/LoadingButton.mdx b/docs/docs/reference/ui/molecules/LoadingButton.mdx
index d15888dfaa..57c6d13e82 100644
--- a/docs/docs/reference/ui/molecules/LoadingButton.mdx
+++ b/docs/docs/reference/ui/molecules/LoadingButton.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # LoadingButton
 
@@ -20,18 +20,7 @@ import { LoadingButton } from '@faststore/ui'
 
 ## Props
 
-<PropsComponent
-    name="loading"
-    type= "boolean"
-    description="The current loading state of the button."
-    required="true"
-/>
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-loading-button"
-/>
+<PropsSection name="LoadingButton" />
 
 ## Customization
 
diff --git a/docs/docs/reference/ui/molecules/Modal.mdx b/docs/docs/reference/ui/molecules/Modal.mdx
index 70334c9839..27b82b07ae 100644
--- a/docs/docs/reference/ui/molecules/Modal.mdx
+++ b/docs/docs/reference/ui/molecules/Modal.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Modal
 
@@ -34,28 +34,7 @@ function Component() {
 
 ## Props
 
-<PropsComponent
-    name="isOpen"
-    type= "boolean"
-    description="Controls whether or not the dialog is open."
-    required="true"
-/>
-<PropsComponent
-    name="aria-labelledby"
-    type= "string"
-    description="Identifies the element (or elements) that labels the current element."
-/>
-<PropsComponent
-    name="onDismiss"
-    type= "((event: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>) => void)"
-    description="This function is called whenever the user hits Escape or clicks outside the dialog."
-/>
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-modal"
-/>
+<PropsSection name="Modal" />
 
 ## Customization
 
diff --git a/docs/docs/reference/ui/molecules/PriceRange.mdx b/docs/docs/reference/ui/molecules/PriceRange.mdx
index cf0e40b3c5..e38162f1db 100644
--- a/docs/docs/reference/ui/molecules/PriceRange.mdx
+++ b/docs/docs/reference/ui/molecules/PriceRange.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # PriceRange
 
@@ -31,57 +31,7 @@ function Component () {
 
 ## Props
 
-<PropsComponent
-    name="min"
-    type= "number"
-    description="The minimum value of the slider."
-    required="true"
-/>
-<PropsComponent
-    name="max"
-    type= "number"
-    description="The maximum value of the slider."
-    required="true"
-/>
-<PropsComponent
-    name="formatter"
-    type= "string"
-    description="Formatter function that transforms the raw price value and render the result."
-    required="true"
-    possibleValues="PriceFormatter | undefined"
-/>
-<PropsComponent
-    name="onChange"
-    type= "((value: { min: number; max: number; }) => void)"
-    description="Callback that fires when the slider value changes."
-/>
-<PropsComponent
-    name="getAriaValueText"
-    type= '((value: number, thumb?: "max" | "min") => string)'
-    description="A function used to set a human-readable value text based on the slider's current value."
-/>
-<PropsComponent
-    name="className"
-    type= "string"
-    description="Returns the value of element's class content attribute."
-/>
-<PropsComponent
-    name="variant"
-    type= "string"
-    description="The current use case variant for prices."
-    possibleValues="selling | listing | spot | savings | installment"
-/>
-<PropsComponent
-    name="aria-label"
-    type= "string"
-    description="Defines a string value that labels the current element."
-/>
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-price-range"
-/>
+<PropsSection name="PriceRange" />
 
 ## Customization
 
diff --git a/docs/docs/reference/ui/molecules/RadioGroup.mdx b/docs/docs/reference/ui/molecules/RadioGroup.mdx
index 44851a9b07..13c74745ee 100644
--- a/docs/docs/reference/ui/molecules/RadioGroup.mdx
+++ b/docs/docs/reference/ui/molecules/RadioGroup.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # RadioGroup
 
@@ -36,44 +36,12 @@ function Component () {
 ## Props
 
 ### RadioGroup
-<PropsComponent
-    name="name"
-    type= "string"
-    description="Name to link children by context."
-    required="true"
-/>
-<PropsComponent
-    name="selectedValue"
-    type= "string | number"
-    description="Value of checked child."
-/>
-<PropsComponent
-    name="onChange"
-    type= "ChangeEventHandler<HTMLInputElement>"
-    description="Function that is triggered when any children is checked."
-/>
 
+<PropsSection name="RadioGroup" />
 
 ### RadioOption
 
-<PropsComponent
-    name="label"
-    type= "string"
-    description="Attribute to set aria-label option as required."
-    required="true"
-/>
-<PropsComponent
-    name="value"
-    type= "string | number"
-    description="Value to be emitted when radio is clicked."
-    required="true"
-/>
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-radio-option"
-/>
+<PropsSection name="RadioOption" />
 
 ## Customization
 
diff --git a/docs/docs/reference/ui/molecules/SearchInput.mdx b/docs/docs/reference/ui/molecules/SearchInput.mdx
index 4ba497c699..36bc7c6d93 100644
--- a/docs/docs/reference/ui/molecules/SearchInput.mdx
+++ b/docs/docs/reference/ui/molecules/SearchInput.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # SearchInput
 
@@ -30,32 +30,10 @@ import { SearchInput } from '@faststore/ui'
 
 ## Props
 
-<PropsComponent
-    name="onSubmit"
-    type= "(value: string) => void"
-    description="Callback function when submitted."
-    required="true"
-/>
-<PropsComponent
-    name="icon"
-    type= "ReactNode"
-    description="Custom icon inside the submit button."
-    required="true"
-/>
-<PropsComponent
-    name="aria-label"
-    type= "string"
-    description="Custom aria-label for input and button."
-/>
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-search-input"
-/>
+<PropsSection name="SearchInput" />
 
-## Customization 
+## Customization
 
 `data-store-search-input`
 
-This component inherits [Input](/reference/ui/atoms/Input), [Button](/reference/ui/atoms/Button), [Icon](/reference/ui/atoms/Icon) css selectors.
\ No newline at end of file
+This component inherits [Input](/reference/ui/atoms/Input), [Button](/reference/ui/atoms/Button), [Icon](/reference/ui/atoms/Icon) css selectors.
diff --git a/docs/docs/reference/ui/molecules/Table.mdx b/docs/docs/reference/ui/molecules/Table.mdx
index a2bad1c70f..c00c526ca0 100644
--- a/docs/docs/reference/ui/molecules/Table.mdx
+++ b/docs/docs/reference/ui/molecules/Table.mdx
@@ -1,4 +1,4 @@
-import PropsComponent from "@site/src/components/PropsComponent/PropsComponent";
+import PropsSection from "@site/src/components/PropsSection/PropsSection";
 
 # Table
 
@@ -94,72 +94,25 @@ All table-related components support all attributes also supported by their resp
 
 ### Table
 
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-table"
-/>
-
-### TableHead
-
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-table-head"
-/>
+<PropsSection name="Table" />
 
 ### TableBody
 
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-table-body"
-/>
+<PropsSection name="TableBody" />
 
 ### TableRow
 
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-table-row"
-/>
+<PropsSection name="TableRow" />
 
 ### TableFooter
 
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-table-footer"
-/>
+<PropsSection name="TableFooter" />
 
 ### TableCell
 
-<PropsComponent
-    name="variant"
-    type= "string"
-    description="Specify if this component should be rendered as a header (<th>) or as a data cell (<td>)."
-    defaultValue="data"
-    possibleValues="data | header"
-/>
-<PropsComponent
-    name="scope"
-    type= "string"
-    description="	Defines the cells that the header element (<th>) relates to.."
-    possibleValues="col | row | rowgroup | colgroup"
-/>
-<PropsComponent
-    name="testId"
-    type= "string"
-    description="ID to find this component in testing tools (e.g.: cypress, testing library, and jest)."
-    defaultValue="store-table-cell"
-/>
-
-## Customization 
+<PropsSection name="TableCell" />
+
+## Customization
 
 `data-store-table`
 
@@ -173,4 +126,4 @@ All table-related components support all attributes also supported by their resp
 
 `data-store-table-cell='head'`
 
-`data-store-table-cell='data'`
\ No newline at end of file
+`data-store-table-cell='data'`
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 4bcc5bd67d..6267d5e07e 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -2,7 +2,7 @@
 module.exports = {
   title: 'FastStore',
   tagline: 'Documentation Portal',
-  url: 'https://faststore.netlify.app',
+  url: 'https://faststore.dev',
   baseUrl: '/',
   trailingSlash: false,
   onBrokenLinks: 'throw',
@@ -184,6 +184,24 @@ module.exports = {
   ],
   plugins: [
     'docusaurus-tailwindcss-loader',
-    require.resolve('docusaurus-plugin-image-zoom')
+    require.resolve('docusaurus-plugin-image-zoom'),
+    [
+      'docusaurus-plugin-react-docgen-typescript',
+      {
+          // pass in a single string or an array of strings
+          src: ['../packages/ui/src/**/*.tsx', '!../packages/ui/src/**/*.test.*', '!../packages/ui/src/**/*.stories.*'],
+          parserOptions: {
+              // pass parserOptions to react-docgen-typescript
+              // here is a good starting point which filters all .tsx files
+              propFilter: (prop, component) => {
+                  if (prop.declarations[0]) {
+                      return prop.declarations[0].fileName.endsWith('.tsx')
+                  }
+
+                  return false;
+              },
+          },
+      },
+    ]
   ],
 };
diff --git a/docs/package.json b/docs/package.json
index c8de4d7754..bddbfee9aa 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -25,6 +25,7 @@
     "babel-loader": "^8.2.2",
     "clsx": "^1.1.1",
     "docusaurus-plugin-image-zoom": "^0.0.2",
+    "docusaurus-plugin-react-docgen-typescript": "^0.1.0",
     "docusaurus-tailwindcss-loader": "file:plugins/docusaurus-tailwindcss-loader",
     "file-loader": "^6.2.0",
     "postcss": "^8.3.11",
@@ -33,6 +34,7 @@
     "prism-react-renderer": "^1.2.1",
     "purgecss": "^4.0.3",
     "react": "^17.0.2",
+    "react-docgen-typescript": "^2.2.1",
     "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",
     "react-spring": "^9.2.4",
diff --git a/docs/src/components/PropsComponent/PropsComponent.tsx b/docs/src/components/PropsComponent/PropsComponent.tsx
index 2b30d5d24a..ee67509952 100644
--- a/docs/src/components/PropsComponent/PropsComponent.tsx
+++ b/docs/src/components/PropsComponent/PropsComponent.tsx
@@ -17,26 +17,26 @@ const PropsComponent = ({
       <code className={styles.propsType}>{type}</code>
     </div>
     <div>
-      <div className={styles.propsDetails}>
+      {description && <div className={styles.propsDetails}>
         <div className={styles.propsDetailsTitle}>Description</div>
         <div className={styles.propsDetailsDescription}>
           <p>{description}</p>
         </div>
-      </div>
-      {defaultValue ?
+      </div>}
+      {defaultValue &&
       <div className={styles.propsDetails}>
         <div className={styles.propsDetailsTitle}>Default value</div>
         <div className={styles.propsDetailsDescription}>
           <code>{defaultValue}</code>
         </div>
-      </div>: false}
-      {possibleValues ?
+      </div>}
+      {possibleValues &&
       <div className={styles.propsDetails}>
         <div className={styles.propsDetailsTitle}>Possible values</div>
         <div className={styles.propsDetailsDescription}>
           <code>{possibleValues}</code>
         </div>
-      </div>: false}
+      </div>}
     </div>
   </div>
 )
diff --git a/docs/src/components/PropsSection/PropsSection.jsx b/docs/src/components/PropsSection/PropsSection.jsx
new file mode 100644
index 0000000000..e6171ea7de
--- /dev/null
+++ b/docs/src/components/PropsSection/PropsSection.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { useDynamicImport } from 'docusaurus-plugin-react-docgen-typescript/pkg/dist-src/hooks/useDynamicImport';
+
+import PropsComponent from '../PropsComponent/PropsComponent'
+
+const PropsSection = ({ name }) => {
+  const props = useDynamicImport(name);
+
+  if (!props) {
+    return null;
+  }
+
+  return Object.keys(props).map(key => (
+    <PropsComponent
+      name={key}
+      type={`${props[key].type?.name}${props[key].required ? '!' : ''}`}
+      defaultValue={props[key].defaultValue?.value ?? null}
+      description={props[key].description}
+    />
+  ))
+};
+
+export default PropsSection
diff --git a/docs/src/components/PropsSection/PropsSection.module.css b/docs/src/components/PropsSection/PropsSection.module.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/yarn.lock b/yarn.lock
index b670ec9384..d503c1a022 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13100,6 +13100,13 @@ docusaurus-plugin-image-zoom@^0.0.2:
   dependencies:
     medium-zoom "^1.0.6"
 
+docusaurus-plugin-react-docgen-typescript@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/docusaurus-plugin-react-docgen-typescript/-/docusaurus-plugin-react-docgen-typescript-0.1.0.tgz#4a377a3ee54ed898c7cc5e84787ee450ec45a62c"
+  integrity sha512-1TFBV2ouah6OA8ISJ0wgfzzYXBpfKeowyF1eTfr9KsS/6Ki98xdOei7nGgD56MHW+cg3fDm5W4UUWvO72B7KWQ==
+  dependencies:
+    globby "^11.0.0"
+
 "docusaurus-tailwindcss-loader@file:docs/plugins/docusaurus-tailwindcss-loader":
   version "0.0.0"
 
@@ -24498,6 +24505,11 @@ react-docgen-typescript@^2.0.0:
   resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.0.0.tgz#0f684350159ae4d2d556f8bc241a74669753944b"
   integrity sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw==
 
+react-docgen-typescript@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.2.1.tgz#608ef48bd54661c2e59cc094ce5726c9e9636e30"
+  integrity sha512-ycVaidV55GOeDOKRP6PCw1i1502dElQ1KG/IInj8sOg50imG+Pmv6LY6DG2xlAF0asd8zXLcyFlWNnICKWP1LA==
+
 react-docgen@^5.0.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-5.3.1.tgz#940b519646a6c285c2950b96512aed59e8f90934"

From 97f181d5adf3ec09a24f4558508a5e19c443685c Mon Sep 17 00:00:00 2001
From: Tiago Gimenes <tlgimenes@gmail.com>
Date: Fri, 10 Dec 2021 12:36:46 -0300
Subject: [PATCH 2/7] fix list props

---
 packages/ui/src/atoms/List/List.test.tsx      | 37 ++++++++++
 packages/ui/src/atoms/List/List.tsx           | 69 +++++--------------
 packages/ui/src/atoms/List/stories/List.mdx   |  4 +-
 .../src/atoms/List/stories/List.stories.tsx   |  4 +-
 4 files changed, 59 insertions(+), 55 deletions(-)

diff --git a/packages/ui/src/atoms/List/List.test.tsx b/packages/ui/src/atoms/List/List.test.tsx
index 041c3da7a4..9e29b746db 100644
--- a/packages/ui/src/atoms/List/List.test.tsx
+++ b/packages/ui/src/atoms/List/List.test.tsx
@@ -84,6 +84,43 @@ describe('List', () => {
     expect(getByTestId('store-list')).toBeInstanceOf(HTMLDListElement)
   })
 
+  it('should respect the HTML tag passed as "as" prop', () => {
+    const { getByTestId, rerender } = render(
+      <List variant="unordered" as="div">
+        {optionsArray.map((value) => {
+          return <li key={value}>{value}</li>
+        })}
+      </List>
+    )
+
+    expect(getByTestId('store-list')).toBeInstanceOf(HTMLDivElement)
+
+    rerender(
+      <List variant="ordered" as="div">
+        {optionsArray.map((value) => {
+          return <li key={value}>{value}</li>
+        })}
+      </List>
+    )
+
+    expect(getByTestId('store-list')).toBeInstanceOf(HTMLDivElement)
+
+    rerender(
+      <List variant="description" as="div">
+        {optionsArray.map((value, index) => {
+          return (
+            <Fragment key={index}>
+              <dt key={`${index}--term`}>{value}</dt>
+              <dd key={`${index}--details`}>option</dd>
+            </Fragment>
+          )
+        })}
+      </List>
+    )
+
+    expect(getByTestId('store-list')).toBeInstanceOf(HTMLDivElement)
+  })
+
   describe('Accessibility', () => {
     it('should have no violations when rendering the default variant', async () => {
       const { getByTestId } = render(
diff --git a/packages/ui/src/atoms/List/List.tsx b/packages/ui/src/atoms/List/List.tsx
index 7c0539d58e..d22471c962 100644
--- a/packages/ui/src/atoms/List/List.tsx
+++ b/packages/ui/src/atoms/List/List.tsx
@@ -1,55 +1,29 @@
-import type {
-  ElementType,
-  ComponentPropsWithRef,
-  ReactElement,
-  FC,
-} from 'react'
 import React, { forwardRef } from 'react'
+import type { ElementType, HTMLAttributes } from 'react'
 
-import type { PolymorphicComponentPropsWithRef } from '../../typings'
-
-export type ListVariant = 'description' | 'ordered' | 'unordered'
-
-const variantToType = (variant: ListVariant) => {
-  switch (variant) {
-    case 'description':
-      return 'dl'
-
-    case 'unordered':
-      return 'ul'
-
-    case 'ordered':
-      return 'ol'
-
-    default:
-      return 'ul'
-  }
+const variantToElement = {
+  description: 'dl',
+  unordered: 'ul',
+  ordered: 'ol',
 }
 
-interface Props {
+export interface ListProps<T = HTMLElement> extends HTMLAttributes<T> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
   testId?: string
-  variant?: ListVariant
+  variant?: 'description' | 'ordered' | 'unordered'
+  as?: ElementType
 }
 
-export type ListProps<C extends ElementType> = PolymorphicComponentPropsWithRef<
-  C,
-  Props
->
-
-type ListComponent = <C extends ElementType = 'ul'>(
-  props: ListProps<C>
-) => ReactElement | null
-
-const List: ListComponent = forwardRef(function List<
-  C extends ElementType = 'ul'
->(
+const List = forwardRef<HTMLUListElement, ListProps>(function List(
   {
     testId = 'store-list',
     variant = 'unordered',
-    as,
-    ...rawProps
-  }: ListProps<C>,
-  ref: ComponentPropsWithRef<C>['ref']
+    as: MaybeComponent = 'ul',
+    ...otherProps
+  },
+  ref
 ) {
   const dataAttributes = {
     'data-testid': testId,
@@ -57,16 +31,9 @@ const List: ListComponent = forwardRef(function List<
     [`data-${variant}`]: true,
   }
 
-  const Component = as ?? variantToType(variant)
+  const Component = MaybeComponent ?? variantToElement[variant] ?? 'ul'
 
-  return <Component ref={ref} {...dataAttributes} {...rawProps} />
+  return <Component ref={ref} {...dataAttributes} {...otherProps} />
 })
 
-/**
- * This is only being exported to make it easier to use in Storybook.
- * **DON'T** import this directly to use this component, use the default export
- * instead.
- */
-export const StorybookList = List as FC<Props>
-
 export default List
diff --git a/packages/ui/src/atoms/List/stories/List.mdx b/packages/ui/src/atoms/List/stories/List.mdx
index 70df6df9ba..b46534edbb 100644
--- a/packages/ui/src/atoms/List/stories/List.mdx
+++ b/packages/ui/src/atoms/List/stories/List.mdx
@@ -1,5 +1,5 @@
 import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import { StorybookList } from '../List'
+import List from '../List'
 
 # List
 
@@ -23,7 +23,7 @@ import { StorybookList } from '../List'
 
 ## Props
 
-<ArgsTable of={StorybookList} />
+<ArgsTable of={List} />
 
 ## CSS Selectors
 
diff --git a/packages/ui/src/atoms/List/stories/List.stories.tsx b/packages/ui/src/atoms/List/stories/List.stories.tsx
index c3d3259901..b46aef663f 100644
--- a/packages/ui/src/atoms/List/stories/List.stories.tsx
+++ b/packages/ui/src/atoms/List/stories/List.stories.tsx
@@ -6,8 +6,8 @@ import type { ListProps } from '../List'
 import Component from '../List'
 import mdx from './List.mdx'
 
-type ListStoryProps = ListProps<'ul'> & { options: string[] }
-type DescriptionListStoryProps = ListProps<'dl'> & { options: string[][] }
+type ListStoryProps = ListProps & { options: string[] }
+type DescriptionListStoryProps = ListProps & { options: string[][] }
 
 const ListTemplate: Story<ListStoryProps> = ({ options, ...props }) => {
   return (

From 5a89792db04ee82fa5c966f669dcc8a76d7a238f Mon Sep 17 00:00:00 2001
From: Tiago Gimenes <tlgimenes@gmail.com>
Date: Fri, 10 Dec 2021 13:12:22 -0300
Subject: [PATCH 3/7] fix tests

---
 packages/ui/src/atoms/List/List.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/atoms/List/List.tsx b/packages/ui/src/atoms/List/List.tsx
index d22471c962..301bc11fd8 100644
--- a/packages/ui/src/atoms/List/List.tsx
+++ b/packages/ui/src/atoms/List/List.tsx
@@ -20,7 +20,7 @@ const List = forwardRef<HTMLUListElement, ListProps>(function List(
   {
     testId = 'store-list',
     variant = 'unordered',
-    as: MaybeComponent = 'ul',
+    as: MaybeComponent,
     ...otherProps
   },
   ref

From 8ba8185dd624b3d5a89b253566abf2ff3929c71e Mon Sep 17 00:00:00 2001
From: Tiago Gimenes <tlgimenes@gmail.com>
Date: Fri, 10 Dec 2021 13:17:20 -0300
Subject: [PATCH 4/7] fix required

---
 docs/src/components/PropsSection/PropsSection.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/src/components/PropsSection/PropsSection.jsx b/docs/src/components/PropsSection/PropsSection.jsx
index e6171ea7de..7fae19f911 100644
--- a/docs/src/components/PropsSection/PropsSection.jsx
+++ b/docs/src/components/PropsSection/PropsSection.jsx
@@ -13,7 +13,8 @@ const PropsSection = ({ name }) => {
   return Object.keys(props).map(key => (
     <PropsComponent
       name={key}
-      type={`${props[key].type?.name}${props[key].required ? '!' : ''}`}
+      required={props[key].required}
+      type={props[key].type?.name}
       defaultValue={props[key].defaultValue?.value ?? null}
       description={props[key].description}
     />

From 98e9311e44a597f0b998911b905b377d808a09e0 Mon Sep 17 00:00:00 2001
From: Tiago Gimenes <tlgimenes@gmail.com>
Date: Fri, 10 Dec 2021 13:19:01 -0300
Subject: [PATCH 5/7] fix required

---
 docs/src/components/PropsSection/PropsSection.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/components/PropsSection/PropsSection.jsx b/docs/src/components/PropsSection/PropsSection.jsx
index 7fae19f911..530f8ce20d 100644
--- a/docs/src/components/PropsSection/PropsSection.jsx
+++ b/docs/src/components/PropsSection/PropsSection.jsx
@@ -13,10 +13,10 @@ const PropsSection = ({ name }) => {
   return Object.keys(props).map(key => (
     <PropsComponent
       name={key}
-      required={props[key].required}
       type={props[key].type?.name}
       defaultValue={props[key].defaultValue?.value ?? null}
       description={props[key].description}
+      required={props[key].required}
     />
   ))
 };

From ffdd3d6a6d9d206809575d4adc0556222750a4ab Mon Sep 17 00:00:00 2001
From: Tiago Gimenes <tlgimenes@gmail.com>
Date: Fri, 10 Dec 2021 13:23:56 -0300
Subject: [PATCH 6/7] possible values

---
 docs/src/components/PropsComponent/PropsComponent.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/docs/src/components/PropsComponent/PropsComponent.tsx b/docs/src/components/PropsComponent/PropsComponent.tsx
index ee67509952..95b46319f9 100644
--- a/docs/src/components/PropsComponent/PropsComponent.tsx
+++ b/docs/src/components/PropsComponent/PropsComponent.tsx
@@ -7,7 +7,6 @@ const PropsComponent = ({
   type,
   description,
   defaultValue,
-  possibleValues,
   required,
 }) => (
   <div className={styles.propsComponent}>
@@ -30,13 +29,6 @@ const PropsComponent = ({
           <code>{defaultValue}</code>
         </div>
       </div>}
-      {possibleValues &&
-      <div className={styles.propsDetails}>
-        <div className={styles.propsDetailsTitle}>Possible values</div>
-        <div className={styles.propsDetailsDescription}>
-          <code>{possibleValues}</code>
-        </div>
-      </div>}
     </div>
   </div>
 )

From f44a2d4cefc09a68a21419fb8865cb335e663686 Mon Sep 17 00:00:00 2001
From: Carolina Menezes <60782333+carolinamenezes@users.noreply.github.com>
Date: Fri, 10 Dec 2021 13:35:05 -0300
Subject: [PATCH 7/7] Update sidebars.js

---
 docs/sidebars.js | 36 ++++++++----------------------------
 1 file changed, 8 insertions(+), 28 deletions(-)

diff --git a/docs/sidebars.js b/docs/sidebars.js
index e737e7b064..bb027a60d8 100644
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@@ -69,22 +69,10 @@ module.exports = {
           label: 'Atoms',
           collapsed: false,
           items: [
-            'reference/ui/atoms/Badge',
-            'reference/ui/atoms/Button',
-            'reference/ui/atoms/Checkbox',
-            'reference/ui/atoms/Icon',
-            'reference/ui/atoms/Input',
-            'reference/ui/atoms/Label',
-            'reference/ui/atoms/List',
-            'reference/ui/atoms/Overlay',
-            'reference/ui/atoms/Popover',
-            'reference/ui/atoms/Price',
-            'reference/ui/atoms/Radio',
-            'reference/ui/atoms/Select',
-            'reference/ui/atoms/Skeleton',
-            'reference/ui/atoms/Slider',
-            'reference/ui/atoms/Spinner',
-            'reference/ui/atoms/TextArea',
+            {
+              type: 'autogenerated',
+              dirName: 'reference/ui/atoms',
+            },
           ],
         },
         {
@@ -92,18 +80,10 @@ module.exports = {
           label: 'Molecules',
           collapsed: false,
           items: [
-            'reference/ui/molecules/Accordion',
-            'reference/ui/molecules/Breadcrumb',
-            'reference/ui/molecules/Bullets',
-            'reference/ui/molecules/Carousel',
-            'reference/ui/molecules/Form',
-            'reference/ui/molecules/IconButton',
-            'reference/ui/molecules/LoadingButton',
-            'reference/ui/molecules/Modal',
-            'reference/ui/molecules/PriceRange',
-            'reference/ui/molecules/RadioGroup',
-            'reference/ui/molecules/SearchInput',
-            'reference/ui/molecules/Table',
+            {
+              type: 'autogenerated',
+              dirName: 'reference/ui/molecules',
+            },
           ],
         },
       ],