Merge pull request #2029 from gluestack/release/fix-ref-typing

Release/fix ref typing
gluestack · Apr 3, 2024 · 5d27a66 · 5d27a66
2 parents dcd4352 + 4d694ab
commit 5d27a66
Show file tree

Hide file tree

Showing 140 changed files with 4,469 additions and 1,383 deletions.
diff --git a/example/storybook-nativewind/.storybook/preview.js b/example/storybook-nativewind/.storybook/preview.js
@@ -31,11 +31,13 @@ export const parameters = {
       method: '',
       order: [
         'Overview',
-        ['Introduction'],
+        ['Introduction', 'All Components'],
         'Getting Started',
-        ['Installation', 'Tooling Setup'],
+        ['Installation', 'Tooling Setup', 'Figma UI Kit'],
         'Core Concepts',
         ['Accessibility', 'Universal'],
+        'Theme Configuration',
+        ['Default Tokens', 'Customizing Theme'],
         'Components',
         [
           'Typography',

diff --git a/example/storybook-nativewind/babel.config.js b/example/storybook-nativewind/babel.config.js
@@ -95,6 +95,18 @@ module.exports = function (api) {
               __dirname,
               '../../packages/nativewind/utils/'
             ),
+            '@gluestack-ui/overlay': path.join(
+              __dirname,
+              '../../packages/unstyled/overlay/src'
+            ),
+            '@gluestack-ui/toast': path.join(
+              __dirname,
+              '../../packages/unstyled/toast/src'
+            ),
+            'tailwind.config': path.join(
+              __dirname,
+              '../../example/storybook-nativewind/tailwind.config.js'
+            ),
           },
         },
       ],

diff --git a/example/storybook-nativewind/package.json b/example/storybook-nativewind/package.json
@@ -29,7 +29,7 @@
     "@geometricpanda/storybook-addon-iframe": "^0.2.2",
     "@gluestack-style/react": "^1.0.52",
     "@gluestack-ui/config": "^1.1.17",
-    "@gluestack-ui/themed": "^1.1.17",
+    "@gluestack-ui/themed": "^1.1.19",
     "@gluestack/design-system": "^0.5.36",
     "@legendapp/motion": "^2.2.0",
     "@react-aria/button": "^3.7.0",

diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx
@@ -61,6 +61,7 @@ import {
   AddIcon,
   InfoIcon,
   Alert,
+  Tabs
 } from '@gluestack/design-system';
 import {Platform, KeyboardAvoidingView,} from 'react-native';
 import {CreditCardIcon} from 'lucide-react-native';
@@ -134,6 +135,28 @@ function App(){
 
 ## Installation
 
+<Tabs value="cli" type="section">
+  <Tabs.TabList>
+      <Tabs.Tab value="cli">
+        <Tabs.TabTitle>CLI</Tabs.TabTitle>
+      </Tabs.Tab>
+     <Tabs.Tab value="manual">
+        <Tabs.TabTitle>Manual</Tabs.TabTitle>
+     </Tabs.Tab>
+  </Tabs.TabList>
+  <Tabs.TabPanels>
+    <Tabs.TabPanel value="cli">
+<>
+
+### Run the following command:
+  ```bash
+  npx gluestack-ui add actionsheet
+  ```
+</>
+    </Tabs.TabPanel>
+    <Tabs.TabPanel value="manual"> 
+<>
+
 ### Step 1: Install the following dependencies:
 ```bash
 npm i @gluestack-ui/actionsheet
@@ -146,6 +169,12 @@ npm i @gluestack-ui/actionsheet
 ```
 </CollapsibleCode>
 
+### Step 3: Update the import paths to match your project setup.
+</>
+    </Tabs.TabPanel>
+  </Tabs.TabPanels>
+</Tabs>
+
 ## API Reference
 
 To use this component in your project, include the following import statement in your file.

diff --git a/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx b/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx
@@ -385,22 +385,6 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
             <Table.TText>{`If true, the keyboard can dismiss the AlertDialog`}</Table.TText>
           </Table.TD>
         </Table.TR>
-        <Table.TR>
-          <Table.TD>
-            <Table.TText>
-              <InlineCode>animationPreset</InlineCode>
-            </Table.TText>
-          </Table.TD>
-          <Table.TD>
-            <Table.TText>slide &#124; fade</Table.TText>
-          </Table.TD>
-          <Table.TD>
-            <Table.TText>slide</Table.TText>
-          </Table.TD>
-          <Table.TD>
-            <Table.TText>{`Specifies the animation preset for the AlertDialog`}</Table.TText>
-          </Table.TD>
-        </Table.TR>
       </Table.TBody>
     </Table>
   </TableContainer>

diff --git a/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx b/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx
@@ -391,22 +391,6 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
             <Table.TText>{`If true, the keyboard can dismiss the AlertDialog`}</Table.TText>
           </Table.TD>
         </Table.TR>
-        <Table.TR>
-          <Table.TD>
-            <Table.TText>
-              <InlineCode>animationPreset</InlineCode>
-            </Table.TText>
-          </Table.TD>
-          <Table.TD>
-            <Table.TText>slide &#124; fade</Table.TText>
-          </Table.TD>
-          <Table.TD>
-            <Table.TText>slide</Table.TText>
-          </Table.TD>
-          <Table.TD>
-            <Table.TText>{`Specifies the animation preset for the AlertDialog`}</Table.TText>
-          </Table.TD>
-        </Table.TR>
       </Table.TBody>
     </Table>
   </TableContainer>

diff --git a/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx
@@ -80,15 +80,33 @@ This is an illustration of **Box** component.
     <Tabs.TabPanel value="manual"> 
 <>
 
-### Step 1: Copy and paste the following code into your project.
+### Step 1: Copy and paste the following code into index.tsx in your project.
 <CollapsibleCode>
 
 ```jsx 
 %%-- File: core-components/nativewind/box/index.tsx --%% 
 ```
 </CollapsibleCode>
 
-### Step 2: Update the import paths to match your project setup.
+> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
+
+### Step 2: Copy and paste the following code into index.web.tsx in your project.
+<CollapsibleCode>
+
+```jsx 
+%%-- File: core-components/nativewind/box/index.web.tsx --%% 
+```
+</CollapsibleCode>
+
+### Step 3: Copy and paste the following code into styles.tsx in your project.
+<CollapsibleCode>
+
+```jsx 
+%%-- File: core-components/nativewind/box/styles.tsx --%% 
+```
+</CollapsibleCode>
+
+### Step 4: Update the import paths to match your project setup.
 </>
     </Tabs.TabPanel>
   </Tabs.TabPanels>

diff --git a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx
@@ -112,15 +112,33 @@ This is an illustration of a **Card** component.
     <Tabs.TabPanel value="manual"> 
 <>
 
-### Step 1: Copy and paste the following code into your project.
+### Step 1: Copy and paste the following code into index.tsx in your project.
 <CollapsibleCode>
 
 ```jsx 
 %%-- File: core-components/nativewind/card/index.tsx --%% 
 ```
 </CollapsibleCode>
 
-### Step 2: Update the import paths to match your project setup.
+> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
+
+### Step 2: Copy and paste the following code into index.web.tsx in your project.
+<CollapsibleCode>
+
+```jsx 
+%%-- File: core-components/nativewind/card/index.web.tsx --%% 
+```
+</CollapsibleCode>
+
+### Step 3: Copy and paste the following code into styles.tsx in your project.
+<CollapsibleCode>
+
+```jsx 
+%%-- File: core-components/nativewind/card/styles.tsx --%% 
+```
+</CollapsibleCode>
+
+### Step 4: Update the import paths to match your project setup.
 </>
     </Tabs.TabPanel>
   </Tabs.TabPanels>

diff --git a/example/storybook-nativewind/src/components/Center/Center.tsx b/example/storybook-nativewind/src/components/Center/Center.tsx
@@ -4,10 +4,8 @@ import React from 'react';
 
 const CenterBasic = () => {
   return (
-    <Center bg="$primary500" h={200} w={300}>
-      <Text color="white" fontWeight="$bold">
-        This is the center.
-      </Text>
+    <Center className="bg-primary-500 h-[200] w-[300]">
+      <Text className="color-white font-bold">This is the center.</Text>
     </Center>
   );
 };

diff --git a/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx
@@ -78,15 +78,33 @@ This is an illustration of **Center** component.
     <Tabs.TabPanel value="manual"> 
 <>
 
-### Step 1: Copy and paste the following code into your project.
+### Step 1: Copy and paste the following code into index.tsx in your project.
 <CollapsibleCode>
 
 ```jsx 
 %%-- File: core-components/nativewind/center/index.tsx --%% 
 ```
 </CollapsibleCode>
 
-### Step 2: Update the import paths to match your project setup.
+> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
+
+### Step 2: Copy and paste the following code into index.web.tsx in your project.
+<CollapsibleCode>
+
+```jsx 
+%%-- File: core-components/nativewind/center/index.web.tsx --%% 
+```
+</CollapsibleCode>
+
+### Step 3: Copy and paste the following code into styles.tsx in your project.
+<CollapsibleCode>
+
+```jsx 
+%%-- File: core-components/nativewind/center/styles.tsx --%% 
+```
+</CollapsibleCode>
+
+### Step 4: Update the import paths to match your project setup.
 </>
     </Tabs.TabPanel>
   </Tabs.TabPanels>

diff --git a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx
@@ -89,15 +89,33 @@ This is an illustration of **HStack** component.
     <Tabs.TabPanel value="manual"> 
 <>
 
-### Step 1: Copy and paste the following code into your project.
+### Step 1: Copy and paste the following code into index.tsx in your project.
 <CollapsibleCode>
 
 ```jsx 
 %%-- File: core-components/nativewind/hstack/index.tsx --%% 
 ```
 </CollapsibleCode>
 
-### Step 2: Update the import paths to match your project setup.
+> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
+
+### Step 2: Copy and paste the following code into index.web.tsx in your project.
+<CollapsibleCode>
+
+```jsx 
+%%-- File: core-components/nativewind/hstack/index.web.tsx --%% 
+```
+</CollapsibleCode>
+
+### Step 3: Copy and paste the following code into styles.tsx in your project.
+<CollapsibleCode>
+
+```jsx 
+%%-- File: core-components/nativewind/hstack/styles.tsx --%% 
+```
+</CollapsibleCode>
+
+### Step 4: Update the import paths to match your project setup.
 </>
     </Tabs.TabPanel>
   </Tabs.TabPanels>

diff --git a/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx
@@ -77,20 +77,33 @@ This is an illustration of **Heading** component.
     <Tabs.TabPanel value="manual"> 
 <>
 
-### Step 1: Install the following dependencies:
-```bash
-npm i @expo/html-elements
+### Step 1: Copy and paste the following code into index.tsx in your project.
+<CollapsibleCode>
+
+```jsx 
+%%-- File: core-components/nativewind/heading/index.tsx --%% 
 ```
+</CollapsibleCode>
+
+> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
 
-### Step 2: Copy and paste the following code into your project.
+### Step 2: Copy and paste the following code into index.web.tsx in your project.
 <CollapsibleCode>
 
 ```jsx 
-%%-- File: core-components/nativewind/heading/index.tsx --%% 
+%%-- File: core-components/nativewind/heading/index.web.tsx --%% 
+```
+</CollapsibleCode>
+
+### Step 3: Copy and paste the following code into styles.tsx in your project.
+<CollapsibleCode>
+
+```jsx 
+%%-- File: core-components/nativewind/heading/styles.tsx --%% 
 ```
 </CollapsibleCode>
 
-### Step 3: Update the import paths to match your project setup.
+### Step 4: Update the import paths to match your project setup.
 </>
     </Tabs.TabPanel>
   </Tabs.TabPanels>

diff --git a/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx
@@ -82,7 +82,7 @@ This is an illustration of **Modal** component.
                   <ModalHeader>
                     <Heading size='lg'>Engage with Modals</Heading>
                     <ModalCloseButton >
-                      <Icon as={CloseIcon} size={20}
+                      <Icon as={CloseIcon} size="md"
                 className="stroke-background-400 group-[:hover]/modal-close-button:stroke-background-700 group-[:active]/modal-close-button:stroke-background-900 group-[:focus-visible]/modal-close-button:stroke-background-900"/>
                     </ModalCloseButton>
                   </ModalHeader>
@@ -762,7 +762,7 @@ A versatile modal component offering different sizes to accommodate various cont
                     <ModalHeader>
                       <Heading size='lg'>Delete Folder</Heading>
                       <ModalCloseButton>
-                        <Icon as={CloseIcon} size={20}
+                        <Icon as={CloseIcon} size="md"
                 className="stroke-background-400 group-[:hover]/modal-close-button:stroke-background-700 group-[:active]/modal-close-button:stroke-background-900 group-[:focus-visible]/modal-close-button:stroke-background-900"/>
                       </ModalCloseButton>
                     </ModalHeader>

diff --git a/example/storybook-nativewind/src/components/Select/Select.tsx b/example/storybook-nativewind/src/components/Select/Select.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-
-import { Center, ChevronDownIcon, Icon } from '@gluestack-ui/themed';
-
+import { Center } from '@/components/ui/center';
+import { Icon, ChevronDownIcon } from '@/components/ui/icon';
 import {
   Select,
   SelectIcon,
@@ -20,11 +19,7 @@ const SelectBasic = ({ size = 'md', variant = 'outline', ...props }: any) => {
     <Select {...props}>
       <SelectTrigger size={size} variant={variant}>
         <SelectInput placeholder="Select option" />
-        <SelectIcon
-          pr={variant === 'underlined' ? 0 : '$3'}
-          pl={variant === 'underlined' ? '$3' : 0}
-          as={ChevronDownIcon}
-        />
+        <SelectIcon className="mr-3" as={ChevronDownIcon} color="red" />
       </SelectTrigger>
       <SelectPortal>
         <SelectBackdrop />