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

Release/@gluestack UI/[email protected]

Author: ankit-tailor

README.md

@@ -35,7 +35,7 @@ particular component that you want to use.
 Here's how you can add `Button` package in your project.
 
 ```jsx
-npx gluestack-ui add button
+npx gluestack-ui@latest add button
 ```
 
 - Check if gluestack-ui is installed in project, if not it will create a gluestack.config.ts file which will have default theme.

example/storybook/.storybook/preview.js

@@ -16,7 +16,13 @@ export const parameters = {
         'Overview',
         ['Introduction', 'Accessibility'],
         'Getting Started',
-        ['Installation', 'Install in Expo', 'Install in Next.js', 'SSR'],
+        [
+          'Installation',
+          'Install in Expo',
+          'Install in Next.js',
+          'SSR',
+          'gluestack-ui CLI',
+        ],
         'Components',
         [
           'Provider',

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

@@ -19,8 +19,6 @@ import { transformedCode } from '../../../utils';
 import { AppProvider, CodePreview, Text } from '@gluestack/design-system';
 import Wrapper from '../../Wrapper';
 
-<br />
-
 ## Basic
 
 Following is the default implementation of the **Badge** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component.
@@ -49,14 +47,12 @@ Following is the default implementation of the **Badge** component without any a
   />
 </AppProvider>
 
-<br />
-
 ## Installation
 
 To install the component, run the following command in your terminal. This will add the component to your project's dependencies and allow you to use it in your project.
 
 ```bash
-npx gluestack-ui add badge
+npx gluestack-ui@latest add badge
 ```
 
 ### Import
@@ -91,9 +87,6 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
 
 It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text#props) component.
 
-<br />
-<br />
-
 ### Examples
 
 The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

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

@@ -50,14 +50,13 @@ Following is the default implementation of the **Divider** component without any
     }}
   />
 </AppProvider>
-<br />
 
 ## Installation
 
 To install the component, run the following command in your terminal. This will add the component to your project's dependencies and allow you to use it in your project.
 
 ```bash
-npx gluestack-ui add divider
+npx gluestack-ui@latest add divider
 ```
 
 ### Import
@@ -68,8 +67,6 @@ To use the component in your project, run the command below into your import sta
 import { Divider } from './components';
 ```
 
-<br />
-
 ### Anatomy
 
 The structure provided below can help you identify and understand a divider component's various parts.
@@ -86,9 +83,6 @@ The following section contains a comprehensive list of the component's reference
 
 It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.
 
-<br />
-<br />
-
 ### Examples
 
 The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
@@ -177,8 +171,6 @@ argsType: {},
 
 </AppProvider>
 
-<br />
-
 ## Advanced
 
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.

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

@@ -86,14 +86,12 @@ function App(){
   }}
 />
 
-<br />
-
 ## Installation
 
 To install the component, run the following command in your terminal. This will add the component to your project's dependencies and allow you to use it in your project.
 
 ```bash
-npx gluestack-ui add actionsheet
+npx gluestack-ui@latest add actionsheet
 ```
 
 ### Import
@@ -104,8 +102,6 @@ To use the component in your project, run the command below into your import sta
 import { Actionsheet } from './components';
 ```
 
-<br />
-
 ### Anatomy
 
 The structure provided below can help you identify and understand a actionsheet component's various parts.
@@ -442,9 +438,6 @@ The following are the lists of all the libraries and packages the component reli
 - `@react-native-aria/focus`
 - `@react-native-aria/dialog`
 
-<br />
-<br />
-
 ## Advanced
 
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.

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

@@ -58,14 +58,13 @@ Following is the default implementation of the **Alert** component without any a
     }}
   />
 </AppProvider>
-<br />
 
 ## Installation
 
 To install the component, run the following command in your terminal. This will add the component to your project's dependencies and allow you to use it in your project.
 
 ```bash
-npx gluestack-ui add alert
+npx gluestack-ui@latest add alert
 ```
 
 ### Import
@@ -76,8 +75,6 @@ To use the component in your project, run the command below into your import sta
 import { Alert } from './components';
 ```
 
-<br />
-
 ### Anatomy
 
 The structure provided below can help you identify and understand a Alert component's various parts.
@@ -107,9 +104,6 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
 
 Contains all spinner related layout style props and actions. It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text#props) component.
 
-<br />
-<br />
-
 ### Examples
 
 The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
@@ -191,8 +185,6 @@ The Examples section provides visual representations of the different variants o
   />
 </AppProvider>
 
-<br />
-
 ## Advanced
 
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.

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

@@ -45,14 +45,13 @@ Following is the default implementation of the **Progress** component without an
     }}
   />
 </AppProvider>
-<br />
 
 ## Installation
 
 To install the component, run the following command in your terminal. This will add the component to your project's dependencies and allow you to use it in your project.
 
 ```bash
-npx gluestack-ui add progress
+npx gluestack-ui@latest add progress
 ```
 
 ### Import
@@ -63,8 +62,6 @@ To use the component in your project, run the command below into your import sta
 import { Progress } from './components';
 ```
 
-<br />
-
 ### Anatomy
 
 The structure provided below can help you identify and understand a Progress component's various parts.
@@ -90,9 +87,6 @@ It has a property `value` which is a number between 0 and 100. It is used to set
 
 It also inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.
 
-<br />
-<br />
-
 ## Advanced
 
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.

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

@@ -43,14 +43,13 @@ Following is the default implementation of the **Spinner** component without any
     }}
   />
 </AppProvider>
-<br />
 
 ## Installation
 
 To install the component, run the following command in your terminal. This will add the component to your project's dependencies and allow you to use it in your project.
 
 ```bash
-npx gluestack-ui add spinner
+npx gluestack-ui@latest add spinner
 ```
 
 ### Import
@@ -61,8 +60,6 @@ To use the component in your project, run the command below into your import sta
 import { Spinner } from './components';
 ```
 
-<br />
-
 ### Anatomy
 
 The structure provided below can help you identify and understand a Spinner component's various parts.
@@ -80,9 +77,6 @@ The following section contains a comprehensive list of the component's reference
 Contains all Spinner related layout style props and actions.
 It inherits all the properties of React Native's [ActivityIndicator](https://reactnative.dev/docs/activityindicator#props) component.
 
-<br />
-<br />
-
 ## Advanced
 
 We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.

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

@@ -80,14 +80,13 @@ function App() {
     }}
   />
 </AppProvider>
-<br />
 
 ## Installation
 
 To install the component, run the following command in your terminal. This will add the component to your project's dependencies and allow you to use it in your project.
 
 ```bash
-npx gluestack-ui add toast
+npx gluestack-ui@latest add toast
 ```
 
 ### Import
@@ -98,8 +97,6 @@ To use the component in your project, run the command below into your import sta
 import { useToast, Toast } from './components';
 ```
 
-<br />
-
 ### Anatomy
 
 The structure provided below can help you identify and understand a Toast component's various parts.

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

@@ -53,14 +53,13 @@ Following is the default implementation of the **Button** component without any
     }}
   />
 </AppProvider>
-<br />
 
 ## Installation
 
 To install the component, run the following command in your terminal. This will add the component to your project's dependencies and allow you to use it in your project.
 
 ```jsx
-npx gluestack-ui add button
+npx gluestack-ui@latest add button
 ```
 
 ### Import
@@ -71,8 +70,6 @@ To use the component in your project, run the command below into your import sta
 import { Button } from './components';
 ```
 
-<br />
-
 ### Anatomy
 
 The structure provided below can help you identify and understand a button component's various parts.
@@ -331,9 +328,6 @@ The following are the lists of all the libraries and packages the component reli
 - `@react-native-aria/focus`
 - `react-native-svg`
 
-<br />
-<br />
-
 ### Examples
 
 The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
@@ -370,8 +364,6 @@ Button component comes in different sizes, such as `xs`, `sm`, `md`, and `lg`, a
   />
 </AppProvider>
 
-<br />
-
 #### Button Styles
 
 To help you match the button component to your design system, it offers different styles such as solid, outline, and link that you can choose from.
@@ -401,8 +393,6 @@ To help you match the button component to your design system, it offers differen
   />
 </AppProvider>
 
-<br />
-
 #### Button Group
 
 The button group component allows users to group buttons and display them in a horizontal or vertical row for better visual representation and functionality.
@@ -434,8 +424,6 @@ The button group component allows users to group buttons and display them in a h
   />
 </AppProvider>
 
-<br />
-
 #### Button With Icon
 
 ButtonWithIcons is a variation of the button component that allows users to add icons or images to the buttons to enhance their visual appeal and improve user experience.