Merge branch 'main' into uwds-1631

.changeset/curly-gifts-tan.md

@@ -0,0 +1,5 @@
+---
+'@utilitywarehouse/native-ui': minor
+---
+
+Migrate `HStack` and `VStack` component's style library

.changeset/eighty-chefs-fold.md

@@ -0,0 +1,5 @@
+---
+'@utilitywarehouse/native-ui': patch
+---
+
+Adds `forwardRef` to components

.changeset/two-mails-fold.md

@@ -0,0 +1,5 @@
+---
+'@utilitywarehouse/native-ui': minor
+---
+
+Migrate `Actionsheet` component's style library and update API

.changeset/violet-islands-taste.md

@@ -0,0 +1,5 @@
+---
+'@utilitywarehouse/native-ui': minor
+---
+
+Migrate `Center` component's style library

apps/native-ui-storybook/App.tsx

@@ -1,4 +1,5 @@
 import StorybookUIRoot from './.ondevice';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 import React, { useEffect } from 'react';
 import { useFonts } from 'expo-font';
@@ -25,7 +26,11 @@ const App = () => {
   }, []);
 
   if (!loaded) return null;
-  return <StorybookUIRoot />;
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <StorybookUIRoot />
+    </GestureHandlerRootView>
+  );
 };
 
 export default App;

apps/native-ui-storybook/components/Alert/Alert.docs.mdx

@@ -103,7 +103,7 @@ If you need to use the Alert component in a more advanced way, you can use the p
   <NativeUIProvider>
     <Alert colorScheme="cyan">
       <AlertIcon />
-      <VStack flex={1} gap={4}>
+      <VStack space="lg" style={{flex: 1}}>
         <AlertTitle>Information</AlertTitle>
         <AlertText>Unlock the power of knowledge with the following information.</AlertText>
         <AlertLink onPress={() => console.log('Link clicked')}>
@@ -142,7 +142,7 @@ const MyComponent = () => {
   return (
     <Alert colorScheme="cyan">
       <AlertIcon as={InformationMediumContainedIcon} />
-      <VStack flex={1} gap={4}>
+      <VStack space="lg" style={{ flex: 1 }}>
         <AlertTitle>Information</AlertTitle>
         <AlertText>Unlock the power of knowledge with the following information.</AlertText>
 

apps/native-ui-storybook/components/Badge/Badge.docs.mdx

@@ -1,6 +1,6 @@
 import { Meta, Primary, Controls, Story, Canvas } from '@storybook/blocks';
 import * as BadgeStories from './Badge.stories';
-import { Badge, BadgeText, BadgeIcon, Center, NativeUIProvider } from '@utilitywarehouse/native-ui';
+import { Badge, BadgeText, Center, NativeUIProvider } from '@utilitywarehouse/native-ui';
 import { AddSmallIcon } from '@utilitywarehouse/react-native-icons';
 
 import { ViewFigmaButton, BackToTopButton } from '../../docs/components';
@@ -74,20 +74,17 @@ Although not recommended, the `Badge` component can be used to create more compl
   <NativeUIProvider>
     <Center>
       <Badge colorScheme="cyan">
-        <BadgeIcon as={AddSmallIcon} />
         <BadgeText>Add</BadgeText>
       </Badge>
     </Center>
   </NativeUIProvider>
 </Canvas>
 
 ```tsx
-import { Badge, BadgeIcon, BadgeText } from '@utilitywarehouse/native-ui';
-import { AddSmallIcon } from '@utilitywarehouse/react-native-icons';
+import { Badge, BadgeText } from '@utilitywarehouse/native-ui';
 
 const MyComponent = () => (
   <Badge colorScheme="cyan">
-    <BadgeIcon as={AddSmallIcon} />
     <BadgeText>Add</BadgeText>
   </Badge>
 );

apps/native-ui-storybook/components/Badge/Badge.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
-import { Badge, BadgeText, BadgeIcon } from '@utilitywarehouse/native-ui';
-import { AddSmallIcon } from '@utilitywarehouse/react-native-icons';
+import { Badge, BadgeText } from '@utilitywarehouse/native-ui';
 import { StoryFn } from '@storybook/react';
 
 const BadgeBasic: StoryFn<{
   text: string;
-  icon: boolean;
   colorScheme: 'cyan' | 'red' | 'green' | 'gold' | 'grey';
   borderless: boolean;
   strong: boolean;
   size: 'large' | 'small';
-}> = ({ text = 'NEW FEATURE', icon = false, ...props }) => {
+}> = ({ text = 'NEW FEATURE', ...props }) => {
   return (
     <Badge {...props}>
-      {icon && <BadgeIcon as={AddSmallIcon} />}
       <BadgeText>{text}</BadgeText>
     </Badge>
   );

apps/native-ui-storybook/components/Badge/Variants.tsx

@@ -5,8 +5,8 @@ import { VariantTitle } from '../../docs/components';
 
 const BadgeVariants: StoryFn = () => {
   return (
-    <HStack gap="$2">
-      <VStack gap="$2">
+    <HStack space="sm">
+      <VStack space="sm">
         <VariantTitle title="cyan">
           <Badge colorScheme="cyan">Cyan</Badge>
         </VariantTitle>
@@ -23,7 +23,7 @@ const BadgeVariants: StoryFn = () => {
           <Badge colorScheme="red">Red</Badge>
         </VariantTitle>
       </VStack>
-      <VStack gap="$2">
+      <VStack space="sm">
         <VariantTitle title="cyan strong">
           <Badge colorScheme="cyan" strong>
             Cyan Strong

apps/native-ui-storybook/components/HStack/HStack.docs.mdx

@@ -46,3 +46,4 @@ const MyComponent = () => (
 | -------- | ------- | ----------------------------------------------------------- | ------- |
 | space    | string  | It sets the space between children.                         | -       |
 | reversed | boolean | When true, it places the HStack items in reverse direction. | -       |
+| wrap     | boolean | When true, it wraps the children to the next line.          | -       |

apps/native-ui-storybook/components/HStack/HStack.tsx

@@ -8,7 +8,7 @@ const HStackBasic: StoryFn<{
   reversed: boolean;
 }> = ({ space, reversed, ...props }) => {
   return (
-    <HStack space={space} mt="$5" reversed={reversed} {...props}>
+    <HStack space={space} reversed={reversed} {...props}>
       <Box w={100} h={100} bg="$cyan300" />
       <Box w={100} h={100} bg="$cyan400" />
       <Box w={100} h={100} bg="$cyan500" />

apps/native-ui-storybook/components/HStack/HStackReversed.tsx

@@ -8,7 +8,7 @@ const HStackReversed: StoryFn<{
   reversed: boolean;
 }> = ({ space, ...props }) => {
   return (
-    <HStack space={space} mt="$5" {...props} reversed>
+    <HStack space={space} {...props} reversed>
       <Box w={100} h={100} bg="$cyan300" />
       <Box w={100} h={100} bg="$cyan400" />
       <Box w={100} h={100} bg="$cyan500" />

apps/native-ui-storybook/components/VStack/Docs.mdx

@@ -46,3 +46,4 @@ const MyComponent = () => (
 | -------- | ------- | ----------------------------------------------------------- | ------- |
 | space    | string  | It sets the space between children.                         | -       |
 | reversed | boolean | When true, it places the VStack items in reverse direction. | -       |
+| wrap     | boolean | When true, it wraps the children to the next line.          | -       |