Merge branch 'patch' of https://github.com/gluestack/gluestack-ui int…

…o feat/icons-example

.github/workflows/trigger-ui-update-docs.yml

@@ -0,0 +1,25 @@
+name: Trigger gluestack-style-website | Create PR when pushed to master
+
+on:
+  pull_request:
+    branches:
+      - patch
+
+jobs:
+  build:
+    name: Dispatch to 'gluestack-style-website'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Emit repository_dispatch
+        uses: mvasigh/dispatch-action@main
+        with:
+          # You should create a personal access token and store it in your repository
+          token: ${{ secrets.MY_GITHUB_TOKEN }}
+          repo: ui-website
+          owner: gluestack
+          event_type: build_ui_docs
+          message: |
+            {
+              "repo": "ui",
+              "branch": "${{ github.head_ref }}"
+            }

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'
@@ -46,6 +46,10 @@ module.exports = function (api) {
               __dirname,
               '../../packages/unstyled/button/src'
             ),
+            '@gluestack-ui/link': path.resolve(
+              __dirname,
+              '../../packages/unstyled/link/src'
+            ),
             '@gluestack-ui/accordion': path.resolve(
               __dirname,
               '../../packages/unstyled/accordion/src'

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

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

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

@@ -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/index.themed.stories.mdx

@@ -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/Actionsheet/Actionsheet.tsx

@@ -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/Actionsheet/index.nw.storiesold.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/index.stories.mdx

@@ -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.themed.stories.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