diff --git a/example/storybook-nativewind/src/home/overview/Upgrade to v2/index.nw.stories.mdx b/example/storybook-nativewind/src/home/overview/Upgrade to v2/index.nw.stories.mdx
index a65617552..f363b58a6 100644
--- a/example/storybook-nativewind/src/home/overview/Upgrade to v2/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/home/overview/Upgrade to v2/index.nw.stories.mdx
@@ -14,14 +14,19 @@ import { Meta } from '@storybook/addon-docs';
-import { Tabs, CollapsibleCode } from '@gluestack/design-system';
+import {
+ Tabs,
+ CollapsibleCode,
+ CodePreview,
+ Table,
+ TableContainer,
+ InlineCode,
+} from "@gluestack/design-system";
# Upgrade to v2
-
-
-## **Installation**
+## Installation
Run the below command to setup the project:
@@ -41,46 +46,35 @@ Above command will override certain files and add `gluestack-ui-provider`,
Add the following code at the root of your project:
-**Before :**
+## Before :
```jsx
-import { GluestackUIProvider } from '@gluestack-ui/themed';
-export default function App() {
- return (
-
- {/* Your code */}
-
- );
+import { GluestackUIProvider } from "@gluestack-ui/themed";
+export default function App() {
+ return {/* Your code */};
}
```
-**After :**
+## After :
```jsx
-import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
- export default function App() {
- return (
-
- {/* Your code */}
-
- ); }
+import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
+export default function App() {
+ return {/* Your code */};
+}
```
-## **Setup tailwind CSS:**
+## Setup tailwind CSS:
Import `global.css` / `globals.css` where Tailwind directives are defined.
```jsx
- import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
- import "@/global.css"
-
- export default function App() {
- return (
-
- {/* Your code */}
-
- );
- }
+import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
+import "@/global.css";
+
+export default function App() {
+ return {/* Your code */};
+}
```
## Component addition:
@@ -99,17 +93,17 @@ npx gluestack-ui@latest add heading
## Update config :
-### 1. If you are using `@gluestack-ui/config-v2`
+### 1. If you are using @gluestack-ui/config-v2
- If you are using `@gluestack-ui/config-v2`, there's no need to make any changes since the default NativeWind configuration is already similar.
-### 2 . If you are using `@gluestack-ui/config` or custom config or ejected config
+### 2 . If you are using @gluestack-ui/config or custom config or ejected config
- In both of the cases, we should manually change the tailwind config respective to the style changes we made in the `gluestack-ui` configuration.
For config conversion, the changes will be made to the config which is being passed to the provider in v2.
-### **Config conversion :**
+### Config conversion :
```jsx
// Gluestack-UI v1
@@ -168,30 +162,30 @@ For Tailwind config configuration please refer to [this](https://tailwindcss.com
- We made a codemod that will turn all your stylings in v1 code to v2 compatibility styles.
- All the styles will be converted matching the appropriate styling for that in NativeWind.
- Limitations:
- - Descendant Styling ( As it’s not supported in NativeWind at the moment.)
- - Value of `sx` prop is variable
+ - Descendant Styling ( As it’s not supported in NativeWind at the moment.)
+ - Value of `sx` prop is variable
### Descendant Styling :
- Descendant styling will not be resolved and we’ll keep it as it is.
-- You can update it manually by moving it to the respective element where the style is required
+- You can update it manually by moving it to the respective element where the style is required
```jsx
// Before:
-import { Box,Text } from "@gluestack-ui/themed";
+import { Box, Text } from "@gluestack-ui/themed";
-
- Simple Text
-
+
+ Simple Text
+;
// After:
import { Box } from "@/components/ui/box";
import { Text } from "@/components/ui/text";
// descendant style will remain as it is.
-
- Simple Text
-
+
+ Simple Text
+;
// Update the descendant styling:
import { Box } from "@/components/ui/box";
@@ -199,10 +193,10 @@ import { Text } from "@/components/ui/text";
// descendant style will remain as it is.
-// color:'white' --> text-white
+// color:'white' --> text-white
- Simple Text
-
+ Simple Text
+;
```
### Usage :
@@ -219,85 +213,701 @@ To manually change the styling of any respective v1 specific style we can follow
In this property mapper table you can find all the properties of v1 and how they can be written in v2
-| Gluestack-UI v1 | Gluestack-UI v2 |
-| --- | --- |
-| underline={true} | className=”underline” |
-| bold={true} | className=”font-*” |
-| size={'*'} | className=”text-*” |
-| bg=”*” / bgColor=”*” | className=”bg-*” |
-| p=”*” | className=”p-*” |
-| color=”*” | className=”color-*” / className=”text-*” |
-| h={"*"} | className=”h-*” |
-| w={"*"} | className=”w-*” |
-| fontWeight=”*” | className=”font-*” |
-| my=”*” | className=”my-*” |
-| justifyContent=”*” | className=”justify-*” |
-| alignItems=”*” | className=”items-*” |
-| mx=”*” | className=”mx-*” |
-| $dark={{ "*" :"*"}} | className=”dark:*” |
-| px=”*” | className=”px-*” |
-| borderColor=”*” | className=”border-*” |
-| borderWidth=”*” | className=”border-*” |
-| borderRightWidth=”*” | className=”border-r-*” |
-| borderLeftWidth=”*” | className=”border-l-*” |
-| borderTopWidth=”*” | className=”border-t-*” |
-| borderBottomWidth=”*” | className=”border-b-*” |
-| borderRadius=”*” / rounded=”*” | className=”rounded-*” |
-| mt=”*” | className=”mt-*” |
-| mb=”*” | className=”mb-*” |
-| m=”*” | className=”m-*” |
-| py=”*” | className=”py-*” |
-| pt=”*” | className=”pt-*” |
-| pb=”*” | className=”pb-*” |
-| pl=”*” | className=”pl-*” |
-| pr=”*” | className=”pr-*” |
-| ml=”*” | className=”ml-*” |
-| mr=”*” | className=”mr-*” |
-| flex={"*"} | className=”flex-*” |
-| flexDirection={"*"} | className=”flex-*” |
-| lineHeight=”*” | className=”leading-*” |
-| h={value} | className=’h-[value]’ |
-| alignSelf=”*” | className=”self-*” |
-| position=”*” | className=”position-*” |
-| maxWidth={"*"} | className=”max-w-*” |
-| maxHeight={"*"} | className=”max-h-*” |
-| minWidth={"*"} | className=”min-w-*” |
-| minHeight={"*"} | className=”min-h-*” |
-| fontFamily=”*” | className=”font-*” |
-| fontStyle=”*” | className=”*” |
-| fontSize=”*” | className=”text-*” |
-| top={"*"} | className=”top-*” |
-| bottom={"*"} | className=”bottom-*” |
-| left={"*"} | className=”left-*” |
-| right={"*"} | className=”right-*” |
-| zIndex={"*"} | className=”z-*” |
-| shadowColor=”*” | className=”shadow-*” |
-| overflow=”*” | className=”overflow-*” |
-| textAlign=”*” | className=”text-*” |
-| display=”*” | className=”hidden / flex / block / inline” |
-| $sm={"*"} | className=”sm:*” |
-| $md={"*"} | className=”md:*” |
-| $lg={"*"} | className=”lg:*” |
+<>
+
+
+
+
+
+ Gluestack-UI v1
+
+
+ Gluestack-UI v2
+
+
+
+
+
+
+
+ {`underline={true}`}
+
+
+
+ {`className=”underline”`}
+
+
+
+
+
+ {`bold={true}`}
+
+
+
+ {`className=”font-”`}
+
+
+
+
+
+ {`size={"value"}`}
+
+
+
+ {`className=”text-value”`}
+
+
+
+
+
+ {`bg="value" / bgColor="value"`}
+
+
+
+ {`className="bg-value"`}
+
+
+
+
+
+ {`p="value"`}
+
+
+
+ {`className="p-value"`}
+
+
+
+
+
+ {`color="value"`}
+
+
+
+ {`className="color-value" / className="text-value"`}
+
+
+
+
+
+ {`h={"value"}`}
+
+
+
+ {`className="h-value"`}
+
+
+
+
+
+ {`w={"value"}`}
+
+
+
+ {`className="w-value"`}
+
+
+
+
+
+ {`fontWeight="value"`}
+
+
+
+ {`className="font-value"`}
+
+
+
+
+
+ {`my="value"`}
+
+
+
+ {`className="my-value"`}
+
+
+
+
+
+ {`justifyContent="value"`}
+
+
+
+ {`className="justify-value"`}
+
+
+
+
+
+ {`alignItems="value"`}
+
+
+
+ {`className="items-value"`}
+
+
+
+
+
+ {`mx="value"`}
+
+
+
+ {`className="mx-value"`}
+
+
+
+
+
+ {`$dark={{ "prop" :"value"}}`}
+
+
+
+ {`className="dark:prop-value"`}
+
+
+
+
+
+ {`px="value"`}
+
+
+
+ {`className="px-value"`}
+
+
+
+
+
+ {`borderColor="value"`}
+
+
+
+ {`className="border-value"`}
+
+
+
+
+
+ {`borderWidth="value"`}
+
+
+
+ {`className="border-value"`}
+
+
+
+
+
+ {`borderRightWidth="value"`}
+
+
+
+ {`className="border-r-value"`}
+
+
+
+
+
+ {`borderLeftWidth="value"`}
+
+
+
+ {`className="border-l-value"`}
+
+
+
+
+
+ {`borderTopWidth="value"`}
+
+
+
+ {`className="border-t-value"`}
+
+
+
+
+
+ {`borderBottomWidth="value"`}
+
+
+
+ {`className="border-b-value"`}
+
+
+
+
+
+ {`borderRadius="value" / rounded="value"`}
+
+
+
+ {`className="rounded-value"`}
+
+
+
+
+
+ {`mt="value"`}
+
+
+
+ {`className="mt-value"`}
+
+
+
+
+
+ {`mb="value"`}
+
+
+
+ {`className="mb-value"`}
+
+
+
+
+
+ {`m="value"`}
+
+
+
+ {`className="m-value"`}
+
+
+
+
+
+ {`py="value"`}
+
+
+
+ {`className="py-value"`}
+
+
+
+
+
+ {`pt="value"`}
+
+
+
+ {`className="pt-value"`}
+
+
+
+
+
+ {`pb="value"`}
+
+
+
+ {`className="pb-value"`}
+
+
+
+
+
+ {`pl="value"`}
+
+
+
+ {`className="pl-value"`}
+
+
+
+
+
+ {`pr="value"`}
+
+
+
+ {`className="pr-value"`}
+
+
+
+
+
+ {`ml="value"`}
+
+
+
+ {`className="ml-value"`}
+
+
+
+
+
+ {`mr="value"`}
+
+
+
+ {`className="mr-value"`}
+
+
+
+
+
+ {`flex={"value"}`}
+
+
+
+ {`className="flex-value"`}
+
+
+
+
+
+ {`flexDirection={"value"}`}
+
+
+
+ {`className="flex-value"`}
+
+
+
+
+
+ {`lineHeight="value"`}
+
+
+
+ {`className="leading-value"`}
+
+
+
+
+
+ {`h={"value"}`}
+
+
+
+ {`className="h-[value]"`}
+
+
+
+
+
+ {`alignSelf="value"`}
+
+
+
+ {`className="self-value"`}
+
+
+
+
+
+ {`position="value"`}
+
+
+
+ {`className="position-value"`}
+
+
+
+
+
+ {`maxWidth={"value"}`}
+
+
+
+ {`className="max-w-value"`}
+
+
+
+
+
+ {`maxHeight={"value"}`}
+
+
+
+ {`className="max-h-value"`}
+
+
+
+
+
+ {`minWidth={"value"}`}
+
+
+
+ {`className="min-w-value"`}
+
+
+
+
+
+ {`minHeight={"value"}`}
+
+
+
+ {`className="min-h-value"`}
+
+
+
+
+
+ {`fontFamily="value"`}
+
+
+
+ {`className="font-value"`}
+
+
+
+
+
+ {`fontStyle="value"`}
+
+
+
+ {`className="value"`}
+
+
+
+
+
+ {`fontSize="value"`}
+
+
+
+ {`className="text-value"`}
+
+
+
+
+
+ {`top={"value"}`}
+
+
+
+ {`className="top-value"`}
+
+
+
+
+
+ {`bottom={"value"}`}
+
+
+
+ {`className="bottom-value"`}
+
+
+
+
+
+ {`left={"value"}`}
+
+
+
+ {`className="left-value"`}
+
+
+
+
+
+ {`right={"value"}`}
+
+
+
+ {`className="right-value"`}
+
+
+
+
+
+ {`zIndex={"value"}`}
+
+
+
+ {`className="z-value"`}
+
+
+
+
+
+ {`shadowColor="value"`}
+
+
+
+ {`className="shadow-value"`}
+
+
+
+
+
+ {`overflow="value"`}
+
+
+
+ {`className="overflow-value"`}
+
+
+
+
+
+ {`textAlign="value"`}
+
+
+
+ {`className="text-value"`}
+
+
+
+
+
+ {`display="value"`}
+
+
+
+ {`className="hidden / flex / block / inline"`}
+
+
+
+
+
+ {`$sm={"value"}`}
+
+
+
+ {`className="sm:value"`}
+
+
+
+
+
+ {`$md={"value"}`}
+
+
+
+ {`className="md:value"`}
+
+
+
+
+
+ {`$lg={"value"}`}
+
+
+
+ {`className="lg:value"`}
+
+
+
+
+
+
### Property Combinations :
-
-| Gluestack-UI v1 | Gluestack-UI v2 |
-| --- | --- |
-| `$sm-`=`` / `$sm-bg`=`red500` | className=`sm:*` |
-| `$sm-dark-`=`` / `$sm-dark-bg`= `*` | className=`sm:dark:-` |
-| sx=`{{: }}` | className=`-` |
-| `$dark-bg`=”*” / `$dark-color`=”*” / `$dark-%`=”*” | className=`dark:bg-*` / className=`dark:color-*` / className=`dark:%-*` |
-| `$-property`=`value` | className=`mode::value` |
-| sx=`{{ _dark: { :} }}` | className=`dark::` |
-| sx=`{{_ios: {property: },_android: {property: }}}` | className=`ios:property- android:property-` |
-| sx=`{{"@base": {_light: {property:},_dark: { property: }},"@md": {_light: { property: },_dark: { property: }}}` | className=”property-value dark:property-value md:property-value md:dark:property-value” |
+<>
+
+
+
+
+
+ Gluestack-UI v1
+
+
+ Gluestack-UI v2
+
+
+
+
+
+
+
+ {`$sm-= / $sm-bg=red500`}
+
+
+
+ {`className="sm:*"`}
+
+
+
+
+
+ {`$sm-dark-= / $sm-dark-bg=*`}
+
+
+
+ {`className="sm:dark:-"`}
+
+
+
+
+
+ {`sx={{: }}`}
+
+
+
+ {`className="-"`}
+
+
+
+
+
+ {`$dark-bg="_" / $dark-color="_" / $dark-%="*"`}
+
+
+
+ {`className="dark:bg-*" / className="dark:color-*" / className="dark:%-*"`}
+
+
+
+
+
+ {`$-property=value`}
+
+
+
+ {`className="mode::value"`}
+
+
+
+
+
+ {`sx={{ _dark: { :} }}`}
+
+
+
+ {`className="dark::"`}
+
+
+
+
+
+ {`sx={{_ios: {property: },_android: {property: }}}`}
+
+
+
+ {`className="ios:property- android:property-"`}
+
+
+
+
+
+ {`sx={{"@base": {_light: {property:},_dark: { property: }},"@md": {_light: { property: },_dark: { property: }}}`}
+
+
+
+ {`className="property-value dark:property-value md:property-value md:dark:property-value"`}
+
+
+
+
+
+
## Examples of some property combinations :
-**Applying styles in different color modes ( light/dark ) :**
+Applying styles in different color modes ( light/dark ) :
-**Before:**
+Before:
```jsx
import { Box } from "@gluestack-ui/themed";
@@ -311,7 +921,7 @@ export default function App() {
}
```
-**After:**
+After:
```jsx
import { Box } from "@/components/ui/box";
@@ -321,9 +931,9 @@ export default function App() {
}
```
-**Applying styles for different media queries ( sm/md/lg ) using `@`:**
+Applying styles for different media queries ( sm/md/lg ) using `@`:
-**Before:**
+Before:
```jsx
import { Box } from "@gluestack-ui/themed";
@@ -337,7 +947,7 @@ export default function App() {
}
```
-**After:**
+After:
```jsx
import { Box } from "@/components/ui/box";
@@ -347,12 +957,11 @@ export default function App() {
Simple Box
);
}
-
```
-**Applying styles for different media queries ( sm/md/lg ) using `$` :**
+Applying styles for different media queries ( sm/md/lg ) using `$` :
-**Before:**
+Before:
```jsx
import { Box } from "@gluestack-ui/themed";
@@ -366,7 +975,7 @@ export default function App() {
}
```
-**After:**
+After:
```jsx
import { Box } from "@/components/ui/box";
@@ -378,9 +987,9 @@ export default function App() {
}
```
-**Applying basic layout stylings :**
+Applying basic layout stylings :
-**Before:**
+Before:
```jsx
import { Box } from "@gluestack-ui/themed";
@@ -394,7 +1003,7 @@ export default function App() {
}
```
-**After:**
+After:
```jsx
import { Box } from "@/components/ui/box";
@@ -404,9 +1013,9 @@ export default function App() {
}
```
-**Applying basic layout stylings in different color modes :**
+Applying basic layout stylings in different color modes :
-**Before:**
+Before:
```jsx
import { Box } from "@gluestack-ui/themed";
@@ -420,10 +1029,9 @@ export default function App() {
}
```
-**After:**
+After:
```jsx
-
import { Box } from "@/components/ui/box";
//By default if you don't mention any mode it's take light mode.
@@ -432,9 +1040,9 @@ export default function App() {
}
```
-**Applying styles for different action states ( hover/active etc..,) :**
+Applying styles for different action states ( hover/active etc..,) :
-**Before:**
+Before:
```jsx
import { Box } from "@gluestack-ui/themed";
@@ -448,7 +1056,7 @@ export default function App() {
}
```
-**After:**
+After:
```jsx
import { Box } from "@/components/ui/box";
@@ -463,9 +1071,9 @@ export default function App() {
}
```
-**Applying styles for different platforms ( mobile/web/android/ios) :**
+Applying styles for different platforms ( mobile/web/android/ios) :
-**Before:**
+Before:
```jsx
import { Text } from "@gluestack-ui/themed";
@@ -488,7 +1096,7 @@ export default function App() {
}
```
-**After:**
+After:
```jsx
import { Text } from "@/components/text";
@@ -498,9 +1106,9 @@ export default function App() {
}
```
-**Applying styles for different color modes at different media queries :**
+Applying styles for different color modes at different media queries :
-**Before:**
+Before:
```jsx
import { Center } from "@gluestack-ui/themed";
@@ -527,7 +1135,7 @@ export default function App() {
}
```
-**After:**
+After:
```jsx
import { Center } from "@/components/center";
@@ -539,12 +1147,12 @@ export default function App() {
}
```
-**`Descendant Styling` ( we need to manually change these styling as this is not available in NativeWind) :**
+`Descendant Styling` ( we need to manually change these styling as this is not available in NativeWind) :
-**Before:**
+Before:
```jsx
-import { CheckboxLabel,Text } from "@gluestack-ui/themed";
+import { CheckboxLabel, Text } from "@gluestack-ui/themed";
export default function App() {
return (
@@ -563,13 +1171,13 @@ export default function App() {
}
```
-**After:**
+After:
```jsx
import { CheckboxLabel } from "@/components/checkbox";
import { Text } from "@/components/text";
-// we need to remove the descendant styling from parent element and add that
+// we need to remove the descendant styling from parent element and add that
// styling to all the child elements
export default function App() {
return (
@@ -578,4 +1186,4 @@ export default function App() {
);
}
-```
\ No newline at end of file
+```