Merge branch 'patch' of github.com:gluestack/gluestack-ui into patch

Author: Viraj Ajay Joshi

example/storybook-nativewind/.storybook/preview.js

@@ -3,12 +3,12 @@ import { DocsContainer } from '@storybook/addon-docs/blocks';
 import { OverlayProvider } from '@gluestack-ui/overlay';
 import { ToastProvider } from '@gluestack-ui/toast';
 
-import { GluestackUIProvider as GluestackUIWithNativewindProvider } from '../src/components-example/nativewind/GluestackUIProvider';
+import { GluestackUIProvider as GluestackUIWithNativewindProvider } from '../src/core-components/nativewind/gluestack-ui-provider';
 
 // global css getting resolved from babel.config.js
 import 'global.css';
 
-import { GluestackUIProvider as GluestackUIWithGluestackStyleProvider } from '../src/components-example/themed/GluestackUIProvider';
+import { GluestackUIProvider as GluestackUIWithGluestackStyleProvider } from '../src/core-components/themed/gluestack-ui-provider';
 
 import gstheme from './gstheme';
 import { themes } from '@storybook/theming';

example/storybook-nativewind/babel.config.js

@@ -14,8 +14,8 @@ module.exports = function (api) {
           alias: {
             '@/components/ui':
               process.env.STYLE_ENGINE === 'nativewind'
-                ? path.resolve(__dirname, './src/components-example/nativewind')
-                : path.resolve(__dirname, './src/components-example/themed'),
+                ? path.resolve(__dirname, './src/core-components/nativewind')
+                : path.resolve(__dirname, './src/core-components/themed'),
 
             'global.css':
               process.env.STYLE_ENGINE === 'nativewind'

example/storybook-nativewind/src/components-example/nativewind/index.ts

@@ -8,7 +8,7 @@ import {
   AccordionIcon,
   AccordionContent,
   AccordionContentText,
-} from '@/components/ui/Accordion';
+} from '@/components/ui/accordion';
 import {
   ChevronDownIcon,
   ChevronUpIcon,

example/storybook-nativewind/src/components-example/themed/index.ts

@@ -42,7 +42,7 @@ import { transformedCode } from '../../utils';
 
 <Meta title="common/components/Accordion" />
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Accordion** component.
 

example/storybook-nativewind/src/components/Accordion/Accordion.tsx

@@ -27,7 +27,7 @@ import {
   ChevronUpIcon,
   PlusIcon,
   MinusIcon,
-} from '../../components-example/themed';
+} from '../../core-components/themed';
 import {
   AppProvider,
   CodePreview,
@@ -39,8 +39,8 @@ import {
   Alert,
 } from '@gluestack/design-system';
 import { transformedCode } from '../../utils';
-import { config } from '../../components-example/themed/GluestackUIProvider/config';
-import Wrapper from '../../components-example/themed/Wrapper';
+import { config } from '../../core-components/themed/gluestack-ui-provider/config';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 # Accordion
 

example/storybook-nativewind/src/components/Accordion/index.stories.mdx

@@ -34,7 +34,7 @@ import {
   ActionsheetSectionList,
   ActionsheetSectionHeaderText,
   ActionsheetVirtualizedList,
-} from '@/components/ui/Actionsheet';
+} from '@/components/ui/actionsheet';
 
 const ActionsheetBasic = ({ showActionsheetProp, ...props }: any) => {
   const [showActionsheet, setShowActionsheet] = React.useState(false);

example/storybook-nativewind/src/components/Accordion/index.themed.stories.mdx

@@ -65,7 +65,7 @@ import {
   Alert,
 } from '@gluestack/design-system';
 import { config } from '@gluestack-ui/config';
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Actionsheet** component.
@@ -148,7 +148,11 @@ npm i @gluestack-ui/actionsheet
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/nativewind/Actionsheet/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/Actionsheet/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -158,7 +162,7 @@ npm i @gluestack-ui/actionsheet
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Actionsheet } from '@/components/ui/Actionsheet';
+import { Actionsheet } from '@/components/ui/actionsheet';
 ```
 
 ```jsx

example/storybook-nativewind/src/components/Actionsheet/Actionsheet.tsx

@@ -64,7 +64,7 @@ import {
   Alert,
 } from '@gluestack/design-system';
 import { config } from '@gluestack-ui/config';
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Actionsheet** component.
 

example/storybook-nativewind/src/components/Actionsheet/index.nw.storiesold.mdx

@@ -52,7 +52,7 @@ import {
   Icon,
   TrashIcon,
   ShareIcon
-} from '../../components-example/themed';
+} from '../../core-components/themed';
 import {
   KeyboardAvoidingView,
   Platform,
@@ -70,7 +70,7 @@ import {
   Alert,
 } from '@gluestack/design-system';
 import { config } from '@gluestack-ui/config';
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Actionsheet** component.
@@ -152,7 +152,11 @@ npm i @gluestack-ui/actionsheet
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Actionsheet/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/actionsheet/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -162,7 +166,7 @@ npm i @gluestack-ui/actionsheet
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Actionsheet } from '@/components/ui/Actionsheet';
+import { Actionsheet } from '@/components/ui/actionsheet';
 ```
 
 ```jsx

example/storybook-nativewind/src/components/Actionsheet/index.stories.mdx

@@ -1,16 +1,16 @@
 import React from 'react';
-import { Alert, AlertIcon, AlertText } from '@/components/ui/Alert';
+import { Alert, AlertIcon, AlertText } from '@/components/ui/alert';
 import {
   InfoIcon,
   CheckCircleIcon,
   CloseCircleIcon,
   BellIcon,
   AlertCircleIcon,
   Icon,
-} from '@/components/ui/Icon';
-import { VStack } from '@/components/ui/VStack';
-import { Center } from '@/components/ui/Center';
-import { HStack } from '@/components/ui/HStack';
+} from '@/components/ui/icon';
+import { VStack } from '@/components/ui/vstack';
+import { Center } from '@/components/ui/center';
+import { HStack } from '@/components/ui/hstack';
 
 const AlertBasic = ({ ...props }: any) => {
   return (

example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx

@@ -27,7 +27,7 @@ import {
   VStack,
   Center,
   HStack,
-} from '../../components-example/nativewind';
+} from '../../core-components/nativewind';
 
 
 import { transformedCode } from '../../utils';
@@ -39,7 +39,7 @@ import {
   TableContainer,
 } from '@gluestack/design-system';
 import { CollapsibleCode } from '@gluestack/design-system';
-import Wrapper from '../../components-example/nativewind/Wrapper';
+import Wrapper from '../../core-components/nativewind/Wrapper';
 
 This is an illustration of **Alert** component.
 
@@ -98,7 +98,11 @@ npm i @gluestack-ui/alert
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/nativewind/Alert/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/Alert/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -108,7 +112,7 @@ npm i @gluestack-ui/alert
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Alert, AlertIcon, AlertText } from '@/components/ui/Alert';
+import { Alert, AlertIcon, AlertText } from '@/components/ui/alert';
 ```
 
 ```jsx

example/storybook-nativewind/src/components/Alert/Alert.tsx

@@ -14,7 +14,7 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Feedback/Alert" />
 
-import { Alert, AlertIcon, AlertText } from '../../components-example/themed';
+import { Alert, AlertIcon, AlertText } from '../../core-components/themed';
 import {
   CheckCircleIcon,
   CloseCircleIcon,
@@ -24,9 +24,9 @@ import {
   Center,
   VStack,
   InfoIcon,
-} from '../../components-example/themed';
+} from '../../core-components/themed';
 
-import { HStack } from '../../components-example/themed';
+import { HStack } from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -37,7 +37,7 @@ import {
 } from '@gluestack/design-system';
 import { CollapsibleCode } from '@gluestack/design-system';
 
-import Wrapper from '../../components-example/themed/Wrapper';
+import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Alert** component.
 
@@ -96,7 +96,11 @@ npm i @gluestack-ui/alert
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: components-example/themed/Alert/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/alert/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -106,7 +110,7 @@ npm i @gluestack-ui/alert
 To use this component in your project, include the following import statement in your file.
 
 ```jsx
-import { Alert, AlertIcon, AlertText } from '@/components/ui/Alert';
+import { Alert, AlertIcon, AlertText } from '@/components/ui/alert';
 ```
 
 ```jsx

example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { Button, ButtonText } from '@/components/ui/Button';
-import { Text } from '@/components/ui/Text';
-import { Heading } from '@/components/ui/Heading';
+import { Button, ButtonText } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { Heading } from '@/components/ui/heading';
 import { X } from 'lucide-react-native';
 
 import {
@@ -12,7 +12,7 @@ import {
   AlertDialogCloseButton,
   AlertDialogFooter,
   AlertDialogBody,
-} from '@/components/ui/AlertDialog';
+} from '@/components/ui/alert-dialog';
 
 const AlertDialogBasic = ({ ...props }) => {
   const [showAlertDialog, setShowAlertDialog] = useState(false);