feat: stories description added

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 {

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 {

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 {

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 {

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 {

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 };

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 {

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;
 

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 };

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 };

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 {

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 };

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 };

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;

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;

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 {

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 {

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;

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;

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;

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 {

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 {

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 {

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 };

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 };

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 };

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 {

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;

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 {

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 };

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 {

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 };

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 };

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 };

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 {

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 };

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 {

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 };

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;

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 };

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 };