From 69f0592f370387f9201598fab883970468fd7faf Mon Sep 17 00:00:00 2001
From: Meenu Makkar <meenumakkar@Meenus-MacBook-Pro.local>
Date: Mon, 9 Oct 2023 16:32:41 +0530
Subject: [PATCH] feat: stories description added

---
 example/storybook/src/components/DataDisplay/Badge/Badge.tsx | 3 +++
 .../storybook/src/components/DataDisplay/Divider/Divider.tsx | 3 +++
 .../src/components/Disclosure/Actionsheet/Actionsheet.tsx    | 3 +++
 .../Disclosure/Actionsheet/ActionsheetAvoidKeyboard.tsx      | 3 +++
 .../Actionsheet/ActionsheetAvoidKeyboardWithSnapPoints.tsx   | 3 +++
 .../Disclosure/Actionsheet/ActionsheetFlatList.tsx           | 3 +++
 .../components/Disclosure/Actionsheet/ActionsheetIcon.tsx    | 2 ++
 .../Disclosure/Actionsheet/ActionsheetScrollView.tsx         | 2 ++
 .../Disclosure/Actionsheet/ActionsheetSectionList.tsx        | 3 +++
 .../Disclosure/Actionsheet/ActionsheetVirtualizedList.tsx    | 3 +++
 example/storybook/src/components/Feedback/Alert/Alert.tsx    | 3 +++
 .../storybook/src/components/Feedback/Progress/Progress.tsx  | 3 +++
 .../storybook/src/components/Feedback/Spinner/Spinner.tsx    | 3 +++
 example/storybook/src/components/Feedback/Toast/Basic.tsx    | 3 +++
 .../src/components/Feedback/Toast/DuplicateToastPrevent.tsx  | 3 +++
 example/storybook/src/components/Feedback/Toast/Toast.tsx    | 3 +++
 example/storybook/src/components/Forms/Button/Button.tsx     | 3 +++
 .../storybook/src/components/Forms/Button/ButtonGroup.tsx    | 4 ++++
 .../storybook/src/components/Forms/Button/ButtonLoading.tsx  | 3 +++
 .../storybook/src/components/Forms/Button/ButtonWithIcon.tsx | 3 +++
 example/storybook/src/components/Forms/Checkbox/Checkbox.tsx | 2 ++
 .../src/components/Forms/FormControl/FormControl.tsx         | 3 +++
 example/storybook/src/components/Forms/Input/Input.tsx       | 3 +++
 example/storybook/src/components/Forms/Input/InputIcon.tsx   | 3 +++
 example/storybook/src/components/Forms/Link/Link.tsx         | 3 +++
 .../storybook/src/components/Forms/Pressable/Pressable.tsx   | 3 +++
 example/storybook/src/components/Forms/Radio/Radio.tsx       | 3 +++
 example/storybook/src/components/Forms/Radio/RadioGroup.tsx  | 3 +++
 example/storybook/src/components/Forms/Select/Select.tsx     | 3 +++
 .../storybook/src/components/Forms/Select/SelectFlatList.tsx | 3 +++
 .../src/components/Forms/Select/SelectFormControl.tsx        | 3 +++
 .../src/components/Forms/Select/SelectScrollView.tsx         | 3 +++
 .../src/components/Forms/Select/SelectSectionList.tsx        | 3 +++
 .../src/components/Forms/Select/SelectVirtualizedList.tsx    | 3 +++
 example/storybook/src/components/Forms/Slider/Slider.tsx     | 3 +++
 example/storybook/src/components/Forms/Switch/Switch.tsx     | 3 +++
 example/storybook/src/components/Forms/Textarea/Textarea.tsx | 3 +++
 example/storybook/src/components/Layout/Box/Box.tsx          | 2 ++
 example/storybook/src/components/Layout/Box/BoxWithRef.tsx   | 3 +++
 example/storybook/src/components/Layout/Center/Center.tsx    | 3 +++
 example/storybook/src/components/Layout/HStack/HStack.tsx    | 3 +++
 .../src/components/Layout/HStack/HStackReversed.tsx          | 5 ++++-
 .../src/components/Layout/LinearGradient/LinearGradient.tsx  | 3 +++
 example/storybook/src/components/Layout/VStack/VStack.tsx    | 3 +++
 .../storybook/src/components/MediaAndIcons/Avatar/Avatar.tsx | 3 +++
 .../src/components/MediaAndIcons/Avatar/AvatarGroup.tsx      | 3 +++
 .../src/components/MediaAndIcons/Avatar/AvatarSizes.tsx      | 3 +++
 example/storybook/src/components/MediaAndIcons/Icon/Icon.tsx | 3 +++
 .../storybook/src/components/MediaAndIcons/Image/Image.tsx   | 2 ++
 example/storybook/src/components/Others/Fab/Fab.tsx          | 3 +++
 .../src/components/Overlay/AlertDialog/AlertDialog.tsx       | 3 +++
 example/storybook/src/components/Overlay/Menu/Menu.tsx       | 3 +++
 example/storybook/src/components/Overlay/Modal/Modal.tsx     | 3 +++
 .../storybook/src/components/Overlay/Modal/MultipleModal.tsx | 2 ++
 example/storybook/src/components/Overlay/Popover/Popover.tsx | 2 ++
 example/storybook/src/components/Overlay/Tooltip/Tooltip.tsx | 3 +++
 .../storybook/src/components/Typography/Heading/Heading.tsx  | 3 +++
 example/storybook/src/components/Typography/Text/Text.tsx    | 3 +++
 58 files changed, 169 insertions(+), 1 deletion(-)

diff --git a/example/storybook/src/components/DataDisplay/Badge/Badge.tsx b/example/storybook/src/components/DataDisplay/Badge/Badge.tsx
index 31953213b8..9e38b2c60b 100644
--- a/example/storybook/src/components/DataDisplay/Badge/Badge.tsx
+++ b/example/storybook/src/components/DataDisplay/Badge/Badge.tsx
@@ -75,6 +75,9 @@ const BadgeBasic = ({ text = 'NEW FEATURE', ...props }: any) => {
   );
 };
 
+BadgeBasic.description =
+  'This is a basic Badge component example. The badge component lets you quickly and easily add status indicators to your interface for improved usability. They are designed to be attention-grabbing and quickly convey important information.';
+
 export default BadgeBasic;
 
 export {
diff --git a/example/storybook/src/components/DataDisplay/Divider/Divider.tsx b/example/storybook/src/components/DataDisplay/Divider/Divider.tsx
index d705b6f24b..d7b4b3837e 100644
--- a/example/storybook/src/components/DataDisplay/Divider/Divider.tsx
+++ b/example/storybook/src/components/DataDisplay/Divider/Divider.tsx
@@ -50,6 +50,9 @@ const DividerBasic = ({ ...props }) => {
   );
 };
 
+DividerBasic.description =
+  'This is a basic Divider component example.  A divider is a thin line that groups content in lists and layouts.';
+
 export default DividerBasic;
 
 export {
diff --git a/example/storybook/src/components/Disclosure/Actionsheet/Actionsheet.tsx b/example/storybook/src/components/Disclosure/Actionsheet/Actionsheet.tsx
index 5157776cde..af4f5d7b04 100644
--- a/example/storybook/src/components/Disclosure/Actionsheet/Actionsheet.tsx
+++ b/example/storybook/src/components/Disclosure/Actionsheet/Actionsheet.tsx
@@ -151,6 +151,9 @@ function FigmaActionsheetStory({ ...props }: any) {
   );
 }
 
+ActionsheetBasic.description =
+  'This is a basic Actionsheet component example. Actionsheets are used to display a list of actions that can be performed on a page.';
+
 export default ActionsheetBasic;
 
 export {
diff --git a/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetAvoidKeyboard.tsx b/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetAvoidKeyboard.tsx
index 1cb6e8a52e..2eb32fe6ad 100644
--- a/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetAvoidKeyboard.tsx
+++ b/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetAvoidKeyboard.tsx
@@ -176,6 +176,9 @@ const ActionsheetWithKeyboardAvoidingView = ({
   );
 };
 
+ActionsheetWithKeyboardAvoidingView.description =
+  'This is an example of an Actionsheet component with KeyboardAvoidingView. This is used to avoid the keyboard when it is opened.';
+
 export default ActionsheetWithKeyboardAvoidingView;
 
 export {
diff --git a/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetAvoidKeyboardWithSnapPoints.tsx b/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetAvoidKeyboardWithSnapPoints.tsx
index 6408026dcf..9449eab850 100644
--- a/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetAvoidKeyboardWithSnapPoints.tsx
+++ b/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetAvoidKeyboardWithSnapPoints.tsx
@@ -186,6 +186,9 @@ const ActionsheetWithKeyboardAvoidingViewWithSnapPoints = ({
   );
 };
 
+ActionsheetWithKeyboardAvoidingViewWithSnapPoints.description =
+  'This is a basic Actionsheet component example. Actionsheets are used to display a list of actions that can be performed on a page.';
+
 export default ActionsheetWithKeyboardAvoidingViewWithSnapPoints;
 
 export {
diff --git a/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetFlatList.tsx b/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetFlatList.tsx
index 2117007f06..b9f4908340 100644
--- a/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetFlatList.tsx
+++ b/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetFlatList.tsx
@@ -85,6 +85,9 @@ const ActionsheetWithFlatList = ({
   );
 };
 
+ActionsheetWithFlatList.description =
+  'This is an example of actionsheet with items rendered using FlatList';
+
 export default ActionsheetWithFlatList;
 
 export { Actionsheet, Button };
diff --git a/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetIcon.tsx b/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetIcon.tsx
index 11c66102d2..56f3117447 100644
--- a/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetIcon.tsx
+++ b/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetIcon.tsx
@@ -169,6 +169,8 @@ const ActionsheetWithIcon = ({
   );
 };
 
+ActionsheetWithIcon.description = `This is an example of an Actionsheet component with Icons. This is to represent how to use icons in Actionsheet.`;
+
 export default ActionsheetWithIcon;
 
 export {
diff --git a/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetScrollView.tsx b/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetScrollView.tsx
index 30f28890a0..c90cabcfae 100644
--- a/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetScrollView.tsx
+++ b/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetScrollView.tsx
@@ -76,6 +76,8 @@ const ActionsheetWithScrollView = ({
     </Actionsheet>
   );
 };
+ActionsheetWithScrollView.description =
+  'This is an example of an Actionsheet with a list of items inside a ScrollView.';
 
 export default ActionsheetWithScrollView;
 
diff --git a/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetSectionList.tsx b/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetSectionList.tsx
index a9a7e714e6..677ce15c65 100644
--- a/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetSectionList.tsx
+++ b/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetSectionList.tsx
@@ -98,6 +98,9 @@ const ActionsheetWithSectionlist = ({
   );
 };
 
+ActionsheetWithSectionlist.description =
+  'This is an example of actionsheet with items rendered using SectionList ';
+
 export default ActionsheetWithSectionlist;
 
 export { Actionsheet, Button };
diff --git a/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetVirtualizedList.tsx b/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetVirtualizedList.tsx
index 026f1c44d5..7b3009f7af 100644
--- a/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetVirtualizedList.tsx
+++ b/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetVirtualizedList.tsx
@@ -89,6 +89,9 @@ const ActionsheetWithVirtualizedList = ({
   );
 };
 
+ActionsheetWithVirtualizedList.description =
+  'This is an example of actionsheet with items rendered using VirtualizedList ';
+
 export default ActionsheetWithVirtualizedList;
 
 export { Actionsheet, Button };
diff --git a/example/storybook/src/components/Feedback/Alert/Alert.tsx b/example/storybook/src/components/Feedback/Alert/Alert.tsx
index 53ac9edf12..d5cec82fba 100644
--- a/example/storybook/src/components/Feedback/Alert/Alert.tsx
+++ b/example/storybook/src/components/Feedback/Alert/Alert.tsx
@@ -42,6 +42,9 @@ const AlertBasic = ({ ...props }: any) => {
   );
 };
 
+AlertBasic.description =
+  'This is a basic Alert component example. Alerts are used to communicate a state that affects a system, feature or page';
+
 export default AlertBasic;
 
 export {
diff --git a/example/storybook/src/components/Feedback/Progress/Progress.tsx b/example/storybook/src/components/Feedback/Progress/Progress.tsx
index 0fe9406eeb..3d59c5fe52 100644
--- a/example/storybook/src/components/Feedback/Progress/Progress.tsx
+++ b/example/storybook/src/components/Feedback/Progress/Progress.tsx
@@ -29,6 +29,9 @@ const ProgressBasic = ({ value = 50, ...props }: any) => {
   );
 };
 
+ProgressBasic.description =
+  'This is a basic Progress component example. Progress components are used to show the progress of a task.';
+
 export default ProgressBasic;
 
 export { Progress, ProgressFilledTrack, VStack, Text, Box, Heading };
diff --git a/example/storybook/src/components/Feedback/Spinner/Spinner.tsx b/example/storybook/src/components/Feedback/Spinner/Spinner.tsx
index de7f0d71a5..a0ce00a66f 100644
--- a/example/storybook/src/components/Feedback/Spinner/Spinner.tsx
+++ b/example/storybook/src/components/Feedback/Spinner/Spinner.tsx
@@ -4,6 +4,9 @@ import { Spinner, HStack, Text, VStack } from '@gluestack-ui/themed';
 
 const SpinnerBasic = ({ ...props }) => <Spinner {...props} />;
 
+SpinnerBasic.description =
+  'This is a basic Spinner component example. Spinners are used to show a loading state of a component or page.';
+
 export default SpinnerBasic;
 
 export { Spinner, HStack, Text, VStack };
diff --git a/example/storybook/src/components/Feedback/Toast/Basic.tsx b/example/storybook/src/components/Feedback/Toast/Basic.tsx
index 2716608287..33a80a06f3 100644
--- a/example/storybook/src/components/Feedback/Toast/Basic.tsx
+++ b/example/storybook/src/components/Feedback/Toast/Basic.tsx
@@ -49,4 +49,7 @@ const ToastPlacement = ({ placement = 'top', ...props }: any) => {
   );
 };
 
+ToastPlacement.description =
+  'This is a basic Toast component example. Toasts are used to communicate a state that affects a system, feature or page';
+
 export default ToastPlacement;
diff --git a/example/storybook/src/components/Feedback/Toast/DuplicateToastPrevent.tsx b/example/storybook/src/components/Feedback/Toast/DuplicateToastPrevent.tsx
index ef1f4501e1..d408483fb0 100644
--- a/example/storybook/src/components/Feedback/Toast/DuplicateToastPrevent.tsx
+++ b/example/storybook/src/components/Feedback/Toast/DuplicateToastPrevent.tsx
@@ -54,4 +54,7 @@ const ToastDuplicatePrevent = ({ placement = 'top', ...props }: any) => {
   );
 };
 
+ToastDuplicatePrevent.description =
+  'This is an example for preventing duplicate toasts. Toasts are used to communicate a state that affects a system, feature or page';
+
 export default ToastDuplicatePrevent;
diff --git a/example/storybook/src/components/Feedback/Toast/Toast.tsx b/example/storybook/src/components/Feedback/Toast/Toast.tsx
index 53983c674c..09a92beef5 100644
--- a/example/storybook/src/components/Feedback/Toast/Toast.tsx
+++ b/example/storybook/src/components/Feedback/Toast/Toast.tsx
@@ -131,6 +131,9 @@ const ToastBasic = ({ placement = 'top', ...props }: any) => {
   );
 };
 
+ToastBasic.description =
+  'This is a basic Toast component example. Toasts are used to communicate a state that affects a system, feature or page';
+
 export default ToastBasic;
 
 export {
diff --git a/example/storybook/src/components/Forms/Button/Button.tsx b/example/storybook/src/components/Forms/Button/Button.tsx
index a5f1418bcc..15b8f357e9 100644
--- a/example/storybook/src/components/Forms/Button/Button.tsx
+++ b/example/storybook/src/components/Forms/Button/Button.tsx
@@ -40,6 +40,9 @@ const ButtonBasic = ({ ...props }: any) => {
   );
 };
 
+ButtonBasic.description =
+  'This is a basic Button component example.  A button is a component that users can tap to trigger an action.';
+
 export default ButtonBasic;
 
 export {
diff --git a/example/storybook/src/components/Forms/Button/ButtonGroup.tsx b/example/storybook/src/components/Forms/Button/ButtonGroup.tsx
index 2ef0f5986a..39573c2774 100644
--- a/example/storybook/src/components/Forms/Button/ButtonGroup.tsx
+++ b/example/storybook/src/components/Forms/Button/ButtonGroup.tsx
@@ -1,5 +1,6 @@
 import { Button, ButtonGroup, ButtonText } from '@gluestack-ui/themed';
 import React from 'react';
+
 const ButtonGroupBasic = ({ ...props }) => {
   return (
     // @ts-ignore
@@ -17,4 +18,7 @@ const ButtonGroupBasic = ({ ...props }) => {
   );
 };
 
+ButtonGroupBasic.description =
+  'This is a basic ButtonGroup component example. ButtonGroups are used to group related buttons together.';
+
 export default ButtonGroupBasic;
diff --git a/example/storybook/src/components/Forms/Button/ButtonLoading.tsx b/example/storybook/src/components/Forms/Button/ButtonLoading.tsx
index ee1563e233..8a9d8202e8 100644
--- a/example/storybook/src/components/Forms/Button/ButtonLoading.tsx
+++ b/example/storybook/src/components/Forms/Button/ButtonLoading.tsx
@@ -37,4 +37,7 @@ const ButtonIsLoading = ({}) => {
   );
 };
 
+ButtonIsLoading.description =
+  'This is an example of a Button with a loading state.  A button is a component that users can tap to trigger an action.';
+
 export default ButtonIsLoading;
diff --git a/example/storybook/src/components/Forms/Button/ButtonWithIcon.tsx b/example/storybook/src/components/Forms/Button/ButtonWithIcon.tsx
index b0cca5c2ee..807270ddc4 100644
--- a/example/storybook/src/components/Forms/Button/ButtonWithIcon.tsx
+++ b/example/storybook/src/components/Forms/Button/ButtonWithIcon.tsx
@@ -17,4 +17,7 @@ const ButtonWithIcons = ({}) => {
   );
 };
 
+ButtonWithIcons.description =
+  'This is an example of a Button with icons.  A button is a component that users can tap to trigger an action.';
+
 export default ButtonWithIcons;
diff --git a/example/storybook/src/components/Forms/Checkbox/Checkbox.tsx b/example/storybook/src/components/Forms/Checkbox/Checkbox.tsx
index 111cffdb2d..6b1b999db5 100644
--- a/example/storybook/src/components/Forms/Checkbox/Checkbox.tsx
+++ b/example/storybook/src/components/Forms/Checkbox/Checkbox.tsx
@@ -107,6 +107,8 @@ const FigmaCheckboxStory = ({ ...props }: any) => {
   );
 };
 
+CheckboxGroupBasic.description = 'This is a basic Checkbox component example';
+
 export default CheckboxGroupBasic;
 
 export {
diff --git a/example/storybook/src/components/Forms/FormControl/FormControl.tsx b/example/storybook/src/components/Forms/FormControl/FormControl.tsx
index e708297853..cb5dc03e21 100644
--- a/example/storybook/src/components/Forms/FormControl/FormControl.tsx
+++ b/example/storybook/src/components/Forms/FormControl/FormControl.tsx
@@ -89,6 +89,9 @@ const FormControlBasic = ({ ...props }) => {
   );
 };
 
+FormControlBasic.description =
+  'This is a basic FormControl component example.  A form control is a component that users can interact with to enter or select data.';
+
 export default FormControlBasic;
 
 export {
diff --git a/example/storybook/src/components/Forms/Input/Input.tsx b/example/storybook/src/components/Forms/Input/Input.tsx
index 317d070056..07aa863d50 100644
--- a/example/storybook/src/components/Forms/Input/Input.tsx
+++ b/example/storybook/src/components/Forms/Input/Input.tsx
@@ -70,6 +70,9 @@ const InputBasic = ({ ...props }: any) => {
   );
 };
 
+InputBasic.description =
+  'This is a basic Input component example. Inputs are used to capture data from users.';
+
 export default InputBasic;
 
 export {
diff --git a/example/storybook/src/components/Forms/Input/InputIcon.tsx b/example/storybook/src/components/Forms/Input/InputIcon.tsx
index 250dc61227..37ed7ab660 100644
--- a/example/storybook/src/components/Forms/Input/InputIcon.tsx
+++ b/example/storybook/src/components/Forms/Input/InputIcon.tsx
@@ -71,6 +71,9 @@ const InputWithIcon = ({ ...props }: any) => {
   );
 };
 
+InputWithIcon.description =
+  'This is an example of Input component with icon. Inputs are used to capture data from users.';
+
 export default InputWithIcon;
 
 export { Input, VStack, Icon, SearchIcon, EyeIcon, EyeOffIcon };
diff --git a/example/storybook/src/components/Forms/Link/Link.tsx b/example/storybook/src/components/Forms/Link/Link.tsx
index e485949424..4d80a0fdb2 100644
--- a/example/storybook/src/components/Forms/Link/Link.tsx
+++ b/example/storybook/src/components/Forms/Link/Link.tsx
@@ -22,6 +22,9 @@ const LinkBasic = ({ ...props }: any) => {
   );
 };
 
+LinkBasic.description =
+  'This is a basic Link component example.  A link is a component that users can tap to navigate to a new page.';
+
 export default LinkBasic;
 
 export { Link, LinkText, ArrowUpRightIcon, Icon, HStack, Text };
diff --git a/example/storybook/src/components/Forms/Pressable/Pressable.tsx b/example/storybook/src/components/Forms/Pressable/Pressable.tsx
index 334984fb2f..71f1749558 100644
--- a/example/storybook/src/components/Forms/Pressable/Pressable.tsx
+++ b/example/storybook/src/components/Forms/Pressable/Pressable.tsx
@@ -22,6 +22,9 @@ const PressableBasic = ({ ...props }: any) => {
   );
 };
 
+PressableBasic.description =
+  'This is a basic Pressable component example. Pressable components are used to show a loading state of a component or page.';
+
 export default PressableBasic;
 
 export { Pressable, Center };
diff --git a/example/storybook/src/components/Forms/Radio/Radio.tsx b/example/storybook/src/components/Forms/Radio/Radio.tsx
index 5be9de68ee..b9d9cbfbb5 100644
--- a/example/storybook/src/components/Forms/Radio/Radio.tsx
+++ b/example/storybook/src/components/Forms/Radio/Radio.tsx
@@ -71,6 +71,9 @@ const RadioBasic = ({ ...props }: any) => {
   );
 };
 
+RadioBasic.description =
+  'This is a basic Radio component example. Radio buttons are used to select a single option from a list of options.';
+
 export default RadioBasic;
 
 export {
diff --git a/example/storybook/src/components/Forms/Radio/RadioGroup.tsx b/example/storybook/src/components/Forms/Radio/RadioGroup.tsx
index ea2fc2204e..e622892c49 100644
--- a/example/storybook/src/components/Forms/Radio/RadioGroup.tsx
+++ b/example/storybook/src/components/Forms/Radio/RadioGroup.tsx
@@ -77,4 +77,7 @@ const RadioGroupBasic = ({
   );
 };
 
+RadioGroupBasic.description =
+  'This is a basic RadioGroup component example. RadioGroups are form elements that allow users to select one option from a set.';
+
 export default RadioGroupBasic;
diff --git a/example/storybook/src/components/Forms/Select/Select.tsx b/example/storybook/src/components/Forms/Select/Select.tsx
index 733f3ddf79..2f3a9ba347 100644
--- a/example/storybook/src/components/Forms/Select/Select.tsx
+++ b/example/storybook/src/components/Forms/Select/Select.tsx
@@ -75,6 +75,9 @@ const SelectBasic = ({ size = 'md', variant = 'outline', ...props }: any) => {
   );
 };
 
+SelectBasic.description =
+  'This is a basic Select component example. Selects are used to select an option from a list of options.';
+
 export default SelectBasic;
 
 export {
diff --git a/example/storybook/src/components/Forms/Select/SelectFlatList.tsx b/example/storybook/src/components/Forms/Select/SelectFlatList.tsx
index 92c09d653e..5ba6a12e7d 100644
--- a/example/storybook/src/components/Forms/Select/SelectFlatList.tsx
+++ b/example/storybook/src/components/Forms/Select/SelectFlatList.tsx
@@ -63,6 +63,9 @@ const SelectWithFlatList = ({ isDisabled, isInvalid, ...props }: any) => {
   );
 };
 
+SelectWithFlatList.description =
+  'This is an example of Select component with FlatList. Selects with flatlist can be used when you have a large number of options and you want to optimize the performance of the list by using FlatList.';
+
 export default SelectWithFlatList;
 
 export { Center, Select, Icon, ChevronDownIcon };
diff --git a/example/storybook/src/components/Forms/Select/SelectFormControl.tsx b/example/storybook/src/components/Forms/Select/SelectFormControl.tsx
index 0ecd229146..69ca9059fb 100644
--- a/example/storybook/src/components/Forms/Select/SelectFormControl.tsx
+++ b/example/storybook/src/components/Forms/Select/SelectFormControl.tsx
@@ -87,6 +87,9 @@ const SelectWithFormControl = ({ size, variant, ...props }: any) => {
   );
 };
 
+SelectWithFormControl.description =
+  'This is a Select component example used with formcontrol to show error and helper text.';
+
 export default SelectWithFormControl;
 
 export {
diff --git a/example/storybook/src/components/Forms/Select/SelectScrollView.tsx b/example/storybook/src/components/Forms/Select/SelectScrollView.tsx
index 44326a70bf..de84f1d04b 100644
--- a/example/storybook/src/components/Forms/Select/SelectScrollView.tsx
+++ b/example/storybook/src/components/Forms/Select/SelectScrollView.tsx
@@ -53,6 +53,9 @@ const SelectWithScrollView = ({ isDisabled, isInvalid, ...props }: any) => {
   );
 };
 
+SelectWithScrollView.displayName =
+  'SelectWithScrollView is an example of how to use Select with list that uses ScrollView on native';
+
 export default SelectWithScrollView;
 
 export { Center, Select, Icon, ChevronDownIcon };
diff --git a/example/storybook/src/components/Forms/Select/SelectSectionList.tsx b/example/storybook/src/components/Forms/Select/SelectSectionList.tsx
index e7a33072a9..7aca6bb3a7 100644
--- a/example/storybook/src/components/Forms/Select/SelectSectionList.tsx
+++ b/example/storybook/src/components/Forms/Select/SelectSectionList.tsx
@@ -72,6 +72,9 @@ const SelectWithSectionList = ({ isDisabled, isInvalid, ...props }: any) => {
   );
 };
 
+SelectWithSectionList.displayName =
+  'SelectWithSectionList is an example of how to use Select with list that uses SectionList on native';
+
 export default SelectWithSectionList;
 
 export { Center, Select, Icon, ChevronDownIcon };
diff --git a/example/storybook/src/components/Forms/Select/SelectVirtualizedList.tsx b/example/storybook/src/components/Forms/Select/SelectVirtualizedList.tsx
index beaae61991..9dd64f09fb 100644
--- a/example/storybook/src/components/Forms/Select/SelectVirtualizedList.tsx
+++ b/example/storybook/src/components/Forms/Select/SelectVirtualizedList.tsx
@@ -70,6 +70,9 @@ const SelectWithVirtualizedList = ({
   );
 };
 
+SelectWithVirtualizedList.displayName =
+  'SelectWithVirtualizedList is an example of how to use Select with list that uses VirtualizedList on native';
+
 export default SelectWithVirtualizedList;
 
 export { Center, Select, Icon, ChevronDownIcon };
diff --git a/example/storybook/src/components/Forms/Slider/Slider.tsx b/example/storybook/src/components/Forms/Slider/Slider.tsx
index 28c276f6bb..e7d1e4439b 100644
--- a/example/storybook/src/components/Forms/Slider/Slider.tsx
+++ b/example/storybook/src/components/Forms/Slider/Slider.tsx
@@ -43,6 +43,9 @@ const SliderBasic = ({ value: valueProp = 60, ...props }: any) => {
   );
 };
 
+SliderBasic.description =
+  'This is a basic Slider component example. Sliders are used to select a value from a range of values.';
+
 export default SliderBasic;
 
 export {
diff --git a/example/storybook/src/components/Forms/Switch/Switch.tsx b/example/storybook/src/components/Forms/Switch/Switch.tsx
index 47bb214375..e6dded51ba 100644
--- a/example/storybook/src/components/Forms/Switch/Switch.tsx
+++ b/example/storybook/src/components/Forms/Switch/Switch.tsx
@@ -5,6 +5,9 @@ const SwitchBasic = ({ ...props }: any) => {
   return <Switch defaultValue={true} value={props.isEnabled} {...props} />;
 };
 
+SwitchBasic.description =
+  'This is a basic Switch component example. Switches are used to toggle between two states.';
+
 export default SwitchBasic;
 
 export { Switch, VStack, Text, HStack };
diff --git a/example/storybook/src/components/Forms/Textarea/Textarea.tsx b/example/storybook/src/components/Forms/Textarea/Textarea.tsx
index 1ce91b100f..a42fbf4f7a 100644
--- a/example/storybook/src/components/Forms/Textarea/Textarea.tsx
+++ b/example/storybook/src/components/Forms/Textarea/Textarea.tsx
@@ -18,6 +18,9 @@ const TextareaBasic = ({ ...props }: any) => {
   );
 };
 
+TextareaBasic.description =
+  'This is a basic Textarea component example. Textareas are used to get multiline input from the user.';
+
 export default TextareaBasic;
 
 export {
diff --git a/example/storybook/src/components/Layout/Box/Box.tsx b/example/storybook/src/components/Layout/Box/Box.tsx
index 6d23188527..433fe1d7bc 100644
--- a/example/storybook/src/components/Layout/Box/Box.tsx
+++ b/example/storybook/src/components/Layout/Box/Box.tsx
@@ -33,6 +33,8 @@ const BoxBasic: any = ({
   );
 };
 
+BoxBasic.description = 'This is a basic Box component example.';
+
 export default BoxBasic;
 
 export { Text, Box };
diff --git a/example/storybook/src/components/Layout/Box/BoxWithRef.tsx b/example/storybook/src/components/Layout/Box/BoxWithRef.tsx
index 02a5732e3d..2456aefac2 100644
--- a/example/storybook/src/components/Layout/Box/BoxWithRef.tsx
+++ b/example/storybook/src/components/Layout/Box/BoxWithRef.tsx
@@ -18,4 +18,7 @@ const BoxWithRef = ({ ...props }: any) => {
   return <Box {...props} sx={{ h: 100, w: 100, bg: '$red500' }} ref={myRef} />;
 };
 
+BoxWithRef.description =
+  'This is a basic Box component example with styling using ref. Box is a primitive component.';
+
 export default BoxWithRef;
diff --git a/example/storybook/src/components/Layout/Center/Center.tsx b/example/storybook/src/components/Layout/Center/Center.tsx
index ef114e44f0..4fb6923384 100644
--- a/example/storybook/src/components/Layout/Center/Center.tsx
+++ b/example/storybook/src/components/Layout/Center/Center.tsx
@@ -21,6 +21,9 @@ const CenterBasic = () => {
   );
 };
 
+CenterBasic.description =
+  'This is a basic Center component example. A center is a layout component that centers its children.';
+
 export default CenterBasic;
 
 export { Text, Center };
diff --git a/example/storybook/src/components/Layout/HStack/HStack.tsx b/example/storybook/src/components/Layout/HStack/HStack.tsx
index c520d37d55..6f0ed0ff0b 100644
--- a/example/storybook/src/components/Layout/HStack/HStack.tsx
+++ b/example/storybook/src/components/Layout/HStack/HStack.tsx
@@ -12,6 +12,9 @@ const HStackBasic = ({ space, reversed, ...props }: any) => {
   );
 };
 
+HStackBasic.description =
+  'This is a basic HStack component example. HStack is a primitive component.';
+
 export default HStackBasic;
 
 export { Box, HStack };
diff --git a/example/storybook/src/components/Layout/HStack/HStackReversed.tsx b/example/storybook/src/components/Layout/HStack/HStackReversed.tsx
index 3b6c1189db..ea60a46ec1 100644
--- a/example/storybook/src/components/Layout/HStack/HStackReversed.tsx
+++ b/example/storybook/src/components/Layout/HStack/HStackReversed.tsx
@@ -2,7 +2,7 @@ import { HStack } from '@gluestack-ui/themed';
 import { Box } from '@gluestack-ui/themed';
 import React from 'react';
 
-const HStackReversed = ({ space, ...props }) => {
+const HStackReversed = ({ space, ...props }: any) => {
   return (
     <HStack space={space} mt="$5" {...props} reversed>
       <Box sx={{ w: 100, h: 100, bg: '$blue300' }} />
@@ -13,4 +13,7 @@ const HStackReversed = ({ space, ...props }) => {
   );
 };
 
+HStackReversed.description =
+  'This is a basic HStack component example. HStack is a primitive component to layout its children horizontally.';
+
 export default HStackReversed;
diff --git a/example/storybook/src/components/Layout/LinearGradient/LinearGradient.tsx b/example/storybook/src/components/Layout/LinearGradient/LinearGradient.tsx
index 6b5c527520..b188cc2c2d 100644
--- a/example/storybook/src/components/Layout/LinearGradient/LinearGradient.tsx
+++ b/example/storybook/src/components/Layout/LinearGradient/LinearGradient.tsx
@@ -20,6 +20,9 @@ const LinearGradientStory = ({ ...props }: any) => {
   );
 };
 
+LinearGradientStory.description =
+  'This is a basic LinearGradient component example. LinearGradients are used to add gradients to components.';
+
 export default LinearGradientStory;
 
 export {
diff --git a/example/storybook/src/components/Layout/VStack/VStack.tsx b/example/storybook/src/components/Layout/VStack/VStack.tsx
index 09f99b9fd2..52e88d5e43 100644
--- a/example/storybook/src/components/Layout/VStack/VStack.tsx
+++ b/example/storybook/src/components/Layout/VStack/VStack.tsx
@@ -19,6 +19,9 @@ const VStackBasic = ({ space, reversed, ...props }: any) => {
   );
 };
 
+VStackBasic.description =
+  'This is a basic VStack component example. VStack is a primitive component to layout its children vertically.';
+
 export default VStackBasic;
 
 export { Box, VStack };
diff --git a/example/storybook/src/components/MediaAndIcons/Avatar/Avatar.tsx b/example/storybook/src/components/MediaAndIcons/Avatar/Avatar.tsx
index fd729ecbc4..f02ed3cc76 100644
--- a/example/storybook/src/components/MediaAndIcons/Avatar/Avatar.tsx
+++ b/example/storybook/src/components/MediaAndIcons/Avatar/Avatar.tsx
@@ -53,6 +53,9 @@ const AvatarBasic = ({
   );
 };
 
+AvatarBasic.description =
+  'This is a basic Avatar component example. An avatar is a graphical representation of a user.';
+
 export default AvatarBasic;
 
 export {
diff --git a/example/storybook/src/components/MediaAndIcons/Avatar/AvatarGroup.tsx b/example/storybook/src/components/MediaAndIcons/Avatar/AvatarGroup.tsx
index 13d7bdf2e4..b00c29f2ee 100644
--- a/example/storybook/src/components/MediaAndIcons/Avatar/AvatarGroup.tsx
+++ b/example/storybook/src/components/MediaAndIcons/Avatar/AvatarGroup.tsx
@@ -102,4 +102,7 @@ const AvatarGroupBasic = ({ size = 'md', badge, ...props }: any) => {
   );
 };
 
+AvatarGroupBasic.description =
+  'This is a basic AvatarGroup component example. AvatarGroup is a wrapper component that renders a group of avatars.';
+
 export default AvatarGroupBasic;
diff --git a/example/storybook/src/components/MediaAndIcons/Avatar/AvatarSizes.tsx b/example/storybook/src/components/MediaAndIcons/Avatar/AvatarSizes.tsx
index 0cdf3a3133..08582d34b1 100644
--- a/example/storybook/src/components/MediaAndIcons/Avatar/AvatarSizes.tsx
+++ b/example/storybook/src/components/MediaAndIcons/Avatar/AvatarSizes.tsx
@@ -44,4 +44,7 @@ const AvatarSizes = () => {
   );
 };
 
+AvatarSizes.description =
+  'This is a basic Avatar component example. An avatar is a graphical representation of a user with different sizes.';
+
 export default AvatarSizes;
diff --git a/example/storybook/src/components/MediaAndIcons/Icon/Icon.tsx b/example/storybook/src/components/MediaAndIcons/Icon/Icon.tsx
index 598cf33a69..8800120925 100644
--- a/example/storybook/src/components/MediaAndIcons/Icon/Icon.tsx
+++ b/example/storybook/src/components/MediaAndIcons/Icon/Icon.tsx
@@ -66,6 +66,9 @@ const IconBasic = ({ size, name, ...props }: any) => {
   return <Icon as={name} size={size} {...props} />;
 };
 
+IconBasic.description =
+  'This is a basic Icon component example. Icons are used to communicate a state that affects a system, feature or page';
+
 export default IconBasic;
 
 export {
diff --git a/example/storybook/src/components/MediaAndIcons/Image/Image.tsx b/example/storybook/src/components/MediaAndIcons/Image/Image.tsx
index 8eb221a307..9fe6a1470d 100644
--- a/example/storybook/src/components/MediaAndIcons/Image/Image.tsx
+++ b/example/storybook/src/components/MediaAndIcons/Image/Image.tsx
@@ -14,6 +14,8 @@ const ImageBasic = ({
   );
 };
 
+ImageBasic.description = 'This is a basic Image component example.';
+
 export default ImageBasic;
 
 export { Image };
diff --git a/example/storybook/src/components/Others/Fab/Fab.tsx b/example/storybook/src/components/Others/Fab/Fab.tsx
index 9cf4f7b6cc..6a11312d8e 100644
--- a/example/storybook/src/components/Others/Fab/Fab.tsx
+++ b/example/storybook/src/components/Others/Fab/Fab.tsx
@@ -87,6 +87,9 @@ const FigmaFabStory = ({
   );
 };
 
+FabBasic.description =
+  'This is a basic Fab component example. The Floating Action Button (FAB) is a dynamic button that stays visible and provides access to a primary action throughout the users journey in the application. It is a powerful UI element that adds a touch of elegance and convenience to the user experience.';
+
 export default FabBasic;
 
 export {
diff --git a/example/storybook/src/components/Overlay/AlertDialog/AlertDialog.tsx b/example/storybook/src/components/Overlay/AlertDialog/AlertDialog.tsx
index 982f7598db..06940abb5e 100644
--- a/example/storybook/src/components/Overlay/AlertDialog/AlertDialog.tsx
+++ b/example/storybook/src/components/Overlay/AlertDialog/AlertDialog.tsx
@@ -228,6 +228,9 @@ const FigmaAlertDialogStory = ({
   );
 };
 
+AlertDialogBasic.description =
+  'This is a basic AlertDialog component example. Alerts are used to communicate a state that affects a system, feature or page';
+
 export default AlertDialogBasic;
 
 export {
diff --git a/example/storybook/src/components/Overlay/Menu/Menu.tsx b/example/storybook/src/components/Overlay/Menu/Menu.tsx
index add2e34be1..28742fd79d 100644
--- a/example/storybook/src/components/Overlay/Menu/Menu.tsx
+++ b/example/storybook/src/components/Overlay/Menu/Menu.tsx
@@ -161,6 +161,9 @@ const FigmaMenuStory = ({ ...props }) => {
   );
 };
 
+MenuBasic.description =
+  'This is a basic Menu component example.The Menu component creates a user-friendly dropdown interface that can be utilized to present a range of options or actions. This feature ensures accessibility and ease of use for the user.';
+
 export default MenuBasic;
 
 export {
diff --git a/example/storybook/src/components/Overlay/Modal/Modal.tsx b/example/storybook/src/components/Overlay/Modal/Modal.tsx
index c3cca32b4c..9c75cb4e66 100644
--- a/example/storybook/src/components/Overlay/Modal/Modal.tsx
+++ b/example/storybook/src/components/Overlay/Modal/Modal.tsx
@@ -189,6 +189,9 @@ const FigmaModalStory = ({ _showModal, ...props }: any) => {
   );
 };
 
+FigmaModalStory.description =
+  'This is a basic Modal component example. A Modal is a window on top of the primary content to draw the users attention to important information or actions. It provides a focused and interruptive way to interact with the application.';
+
 export default ModalBasic;
 
 export {
diff --git a/example/storybook/src/components/Overlay/Modal/MultipleModal.tsx b/example/storybook/src/components/Overlay/Modal/MultipleModal.tsx
index ecb7545c14..8e2953a527 100644
--- a/example/storybook/src/components/Overlay/Modal/MultipleModal.tsx
+++ b/example/storybook/src/components/Overlay/Modal/MultipleModal.tsx
@@ -118,4 +118,6 @@ const MultipleModals = ({ ...props }: any) => {
   );
 };
 
+MultipleModals.description =
+  'This is an example of multiple modals. Multiple modals can be opened at the same time. Here we have two modals where second modal is opened from first modal.';
 export default MultipleModals;
diff --git a/example/storybook/src/components/Overlay/Popover/Popover.tsx b/example/storybook/src/components/Overlay/Popover/Popover.tsx
index 435d692b70..fa60d69675 100644
--- a/example/storybook/src/components/Overlay/Popover/Popover.tsx
+++ b/example/storybook/src/components/Overlay/Popover/Popover.tsx
@@ -171,6 +171,8 @@ const FigmaPopoverStory = ({
   );
 };
 
+PopoverBasic.description = `Popover is a non-modal dialog that floats around a trigger element. It is used to display contextual information or UI. It is triggered by clicking, tapping, or hovering on an element.`;
+
 export default PopoverBasic;
 
 export {
diff --git a/example/storybook/src/components/Overlay/Tooltip/Tooltip.tsx b/example/storybook/src/components/Overlay/Tooltip/Tooltip.tsx
index 34832fe8d6..176c67926a 100644
--- a/example/storybook/src/components/Overlay/Tooltip/Tooltip.tsx
+++ b/example/storybook/src/components/Overlay/Tooltip/Tooltip.tsx
@@ -75,6 +75,9 @@ const FigmaTooltipStory = ({
   );
 };
 
+TooltipBasic.description =
+  'This is a basic Tooltip component example.  A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.';
+
 export default TooltipBasic;
 
 export {
diff --git a/example/storybook/src/components/Typography/Heading/Heading.tsx b/example/storybook/src/components/Typography/Heading/Heading.tsx
index a8b2242bae..dca9aec37b 100644
--- a/example/storybook/src/components/Typography/Heading/Heading.tsx
+++ b/example/storybook/src/components/Typography/Heading/Heading.tsx
@@ -5,6 +5,9 @@ const HeadingBasic = ({ text = "I'm the heading", ...props }) => {
   return <Heading {...props}>{text}</Heading>;
 };
 
+HeadingBasic.description =
+  'This is a basic Heading component example. Headings are used to show the title of a section or page.';
+
 export default HeadingBasic;
 
 export { Center, Heading };
diff --git a/example/storybook/src/components/Typography/Text/Text.tsx b/example/storybook/src/components/Typography/Text/Text.tsx
index 26d40e591f..d6e48177cd 100644
--- a/example/storybook/src/components/Typography/Text/Text.tsx
+++ b/example/storybook/src/components/Typography/Text/Text.tsx
@@ -14,6 +14,9 @@ const TextBasic = ({
   );
 };
 
+TextBasic.description =
+  'This is a basic Text component example. Texts are used to show the content of a section or page.';
+
 export default TextBasic;
 
 export { Text, Center };