Merge pull request #237 from gluestack/release/@gluestack-ui/[email protected]

release: @gluestack-ui/input version 0.1.1

Author: Viraj-10

example/storybook/src/components/DataDisplay/Badge/index.stories.mdx

@@ -1,11 +1,11 @@
 ---
 title: gluestack-ui Badge Component | Installation, Usage, and API
 
-description: Badges allow the highlighting of an item’s status. This provides quick recognition.
+description: 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.
 
 pageTitle: Badge
 
-pageDescription: Badges allow the highlighting of an item’s status. This provides quick recognition.
+pageDescription: 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.
 
 showHeader: true
 ---

example/storybook/src/components/DataDisplay/Divider/index.stories.mdx

@@ -1,11 +1,11 @@
 ---
 title: gluestack-ui Divider Component | Installation, Usage, and API
 
-description: Divider can visually separate content in a given list or group.
+description: Revamp your content organization with the Divider component! Use it to visually separate different sections of a list or group for a more structured and easy-to-read interface.
 
 pageTitle: Divider
 
-pageDescription: Divider can visually separate content in a given list or group.
+pageDescription: Revamp your content organization with the Divider component! Use it to visually separate different sections of a list or group for a more structured and easy-to-read interface.
 
 showHeader: true
 ---

example/storybook/src/components/Disclosure/Actionsheet/index.stories.mdx

@@ -1,11 +1,11 @@
 ---
 title: gluestack-ui Actionsheet Component | Installation, Usage, and API
 
-description: The ActionSheet is a UI element that displays a list of options or actions. It's commonly used in mobile apps to provide a contextual menu of actions. The component appears as a modal dialog that slides up from the bottom of the screen and can be customized with different styles and triggers.
+description: The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view.
 
 pageTitle: Actionsheet
 
-pageDescription: An Actionsheet is a dialog that displays a set of options. It appears on top of the app's content.
+pageDescription: The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view.
 
 showHeader: true
 ---

example/storybook/src/components/Feedback/Alert/index.stories.mdx

@@ -1,11 +1,11 @@
 ---
 title: gluestack-ui Slider Alert | Installation, Usage, and API
 
-description: Alerts convey a state that can influence a system, feature, or page.
+description: Alerts are used to communicate the status of a system, feature, or page. They indicate a specific state that may require attention from the user.
 
 pageTitle: Alert
 
-pageDescription: Alerts convey a state that can influence a system, feature, or page.
+pageDescription: Alerts are used to communicate the status of a system, feature, or page. They indicate a specific state that may require attention from the user.
 
 showHeader: true
 ---

example/storybook/src/components/Feedback/Progress/index.stories.mdx

@@ -1,11 +1,11 @@
 ---
 title: gluestack-ui Progress Component | Installation, Usage, and API
 
-description: Progress helps show the progress status for a time-consuming task that consists of several steps.
+description: The Progress component is designed to display the progress of a task that involves multiple steps and takes some time to complete. It helps users stay informed about the current status of a lengthy process.
 
 pageTitle: Progress
 
-pageDescription: Progress helps show the progress status for a time-consuming task that consists of several steps.
+pageDescription: The Progress component is designed to display the progress of a task that involves multiple steps and takes some time to complete. It helps users stay informed about the current status of a lengthy process.
 
 showHeader: true
 ---

example/storybook/src/components/Feedback/Spinner/index.stories.mdx

@@ -1,11 +1,11 @@
 ---
 title: gluestack-ui Spinner Component | Installation, Usage, and API
 
-description: Spinners gives visual cues to actions that are processing or awaiting a course change or results.
+description: Spinners are designed to give visual cues to users that an action is being processed or that a change or result is expected. They are useful for improving the user experience by reducing frustration and uncertainty.
 
 pageTitle: Spinner
 
-pageDescription: Spinners gives visual cues to actions that are processing or awaiting a course change or results.
+pageDescription: Spinners are designed to give visual cues to users that an action is being processed or that a change or result is expected. They are useful for improving the user experience by reducing frustration and uncertainty.
 
 showHeader: true
 ---

example/storybook/src/components/Feedback/Toast/index.stories.mdx

@@ -1,11 +1,11 @@
 ---
 title: gluestack-ui Toast Component | Installation, Usage, and API
 
-description: Toast displays alerts on top of an overlay.
+description: Toast is a component that can display alerts, notifications, or messages on top of an overlay layer. It is commonly used to inform users of important information or actions.
 
 pageTitle: Toast
 
-pageDescription: Toast displays alerts on top of an overlay.
+pageDescription: Toast is a component that can display alerts, notifications, or messages on top of an overlay layer. It is commonly used to inform users of important information or actions.
 
 showHeader: true
 ---

example/storybook/src/components/Forms/Button/index.stories.mdx

@@ -1,11 +1,11 @@
 ---
 title: gluestack-ui Button Component | Installation, Usage, and API
 
-description: The Button component triggers an event or an action.
+description: A button component is a graphical user interface element that enables users to act by clicking or tapping. It can be customized in size, shape, color, and behavior to fit the design of the application or website.
 
 pageTitle: Button
 
-pageDescription: The Button component triggers an event or an action.
+pageDescription: A button component is a graphical user interface element that enables users to act by clicking or tapping. It can be customized in size, shape, color, and behavior to fit the design of the application or website.
 
 showHeader: true
 ---

example/storybook/src/components/Forms/Checkbox/index.stories.mdx

@@ -1,11 +1,11 @@
 ---
 title: gluestack-ui Checkbox Component | Installation, Usage, and API
 
-description: The Checkbox component allows a user to select multiple values from various options in a form.
+description: Whether you're building a simple form or a complex data collection system, the Checkbox component offers a user-friendly way for users to select multiple options from a list.
 
 pageTitle: Checkbox
 
-pageDescription: The Checkbox component allows a user to select multiple values from various options in a form.
+pageDescription: Whether you're building a simple form or a complex data collection system, the Checkbox component offers a user-friendly way for users to select multiple options from a list.
 
 showHeader: true
 ---

example/storybook/src/components/Forms/FormControl/index.stories.mdx

@@ -1,11 +1,11 @@
 ---
 title: gluestack-ui FormControl Component | Installation, Usage, and API
 
-description: FormControl is used to form elements by providing context such as isInvalid, isDisabled, and isRequired.
+description: By using FormControl, developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required.
 
 pageTitle: FormControl
 
-pageDescription: FormControl is used to form elements by providing context such as isInvalid, isDisabled, and isRequired.
+pageDescription: By using FormControl, developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required.
 
 showHeader: true
 ---

example/storybook/src/components/Forms/Input/Input.stories.tsx

@@ -1,5 +1,6 @@
 import type { ComponentMeta } from '@storybook/react-native';
 import { InputStory as Input } from './Input';
+import { InputStory as InputIcon } from './InputIcon';
 
 const MyInputMeta: ComponentMeta<typeof Input> = {
   title: 'stories/FORMS/Input',
@@ -27,4 +28,4 @@ const MyInputMeta: ComponentMeta<typeof Input> = {
 
 export default MyInputMeta;
 
-export { Input };
+export { Input, InputIcon };

example/storybook/src/components/Forms/Input/Input.tsx

@@ -1,32 +1,25 @@
 import React from 'react';
 import Wrapper from '../../Wrapper';
-import { Center, Input } from '../../../ui-components';
+import { Input, Center } from '../../../ui-components';
 
-export const InputStory = ({
-  // variant,
-  // isInvalid,
-  // isDisabled,
-  // size,
-  ...props
-}: any) => {
-  const [value, setValue] = React.useState('Some Random Text');
+const InputStory = ({ ...props }: any) => {
+  const [value, setValue] = React.useState('');
 
   return (
     <Wrapper>
-      <Center justifyContent="center" w="50%" alignItems="center">
+      <Center justifyContent="center" w="50%" alignItems="center" h={300}>
         <Input {...props}>
           <Input.Input
             onChange={(e: any) => {
               setValue(e.nativeEvent.text);
             }}
             value={value}
             placeholder="Enter Text here"
-            placeholderTextColor={'$textLight900'}
           />
         </Input>
       </Center>
     </Wrapper>
   );
 };
 
-export { Input };
+export { InputStory, Input, Center };

example/storybook/src/components/Forms/Input/InputIcon.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import Wrapper from '../../Wrapper';
+import { Input, VStack, Icon, SearchIcon } from '../../../ui-components';
+
+const InputStory = ({ ...props }: any) => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <Wrapper>
+      <VStack
+        justifyContent="center"
+        w="50%"
+        alignItems="center"
+        h={300}
+        space="md"
+      >
+        <Input {...props} size="sm">
+          <Input.Input
+            onChange={(e: any) => {
+              setValue(e.nativeEvent.text);
+            }}
+            value={value}
+            placeholder="Enter Text here"
+          />
+          <Input.Icon pr="$4">
+            <Icon as={SearchIcon} />
+          </Input.Icon>
+        </Input>
+
+        <Input {...props} size="md">
+          <Input.Input
+            onChange={(e: any) => {
+              setValue(e.nativeEvent.text);
+            }}
+            value={value}
+            placeholder="Enter Text here"
+          />
+          <Input.Icon pr="$4">
+            <Icon as={SearchIcon} />
+          </Input.Icon>
+        </Input>
+
+        <Input {...props} size="lg" isDisabled>
+          <Input.Input
+            onChange={(e: any) => {
+              setValue(e.nativeEvent.text);
+            }}
+            value={value}
+            placeholder="Enter Text here"
+          />
+          <Input.Icon pr="$4">
+            <Icon as={SearchIcon} />
+          </Input.Icon>
+        </Input>
+
+        <Input {...props} size="xl" isInvalid>
+          <Input.Input
+            onChange={(e: any) => {
+              setValue(e.nativeEvent.text);
+            }}
+            value={value}
+            placeholder="Enter Text here"
+          />
+          <Input.Icon pr="$4">
+            <Icon as={SearchIcon} />
+          </Input.Icon>
+        </Input>
+      </VStack>
+    </Wrapper>
+  );
+};
+
+export { InputStory, Input, VStack, Icon, SearchIcon };