feat(v2): Button component

CONTRIBUTING.md

@@ -145,7 +145,7 @@ The `package.json` file contains various scripts for common tasks:
 
 - `pnpm typecheck`: type-check files with TypeScript.
 - `pnpm lint`: lint files with ESLint.
-- `pnpm test:components`: run the library's components unit tests with Jest.
+- `pnpm test`: run the library's components unit tests with Jest.
 - `pnpm examples start`: start the Metro server for the example app.
 - `pnpm examples android`: run the example app on Android.
 - `pnpm examples ios`: run the example app on iOS.

apps/docs/pages/docs/v2/Components/Touchables/button.en-US.mdx

@@ -0,0 +1,162 @@
+---
+searchable: true
+---
+
+import { CodeEditor } from '@components/code-editor';
+import PropsTable from '@components/docs/props-table';
+
+
+# Button
+
+Button component that is based on react native `Button` component.
+
+## Import
+
+```js
+import { Button } from 'react-native-ficus-ui';
+```
+
+## Usage
+
+### Default
+
+<CodeEditor code={`<VStack spacing={10}>
+  <Button onPress={() => console.log('PRESSED')}>Button</Button>
+  <Button colorScheme="red">Button</Button>
+  <Button colorScheme="orange">Button</Button>
+  <Button colorScheme="green">Button</Button>
+  <Button colorScheme="pink">Button</Button>
+  <Button colorScheme="pink" full>
+    Button
+  </Button>
+  <Button colorScheme="blue" full isLoading>
+    Button
+  </Button>
+</VStack>`} />
+
+### Button sizes
+
+<CodeEditor code={`<VStack spacing={10}>
+  <Button size="xs">Button</Button>
+  <Button colorScheme="red" size="sm">
+    Button
+  </Button>
+  <Button colorScheme="orange" size="md">
+    Button
+  </Button>
+  <Button colorScheme="green" size="lg">
+    Button
+  </Button>
+  <Button colorScheme="pink" size="xl">
+    Button
+  </Button>
+  <Button colorScheme="blue" size="2xl">
+    Button
+  </Button>
+</VStack>`} />
+
+### Round
+
+<CodeEditor code={`<VStack spacing={10}>
+  <Button size="xs" isRound>
+    Button
+  </Button>
+  <Button colorScheme="red" size="sm" isRound>
+    Button
+  </Button>
+  <Button colorScheme="orange" size="md" isRound>
+    Button
+  </Button>
+  <Button colorScheme="green" size="lg" isRound>
+    Button
+  </Button>
+  <Button colorScheme="pink" size="xl" isRound>
+    Button
+  </Button>
+</VStack>`} />
+
+### Variants
+
+<CodeEditor code={`<Box>
+  <HStack spacing={10}>
+    <Button colorScheme="teal">Button</Button>
+    <Button colorScheme="teal" variant="outline">
+      Button
+    </Button>
+    <Button colorScheme="teal" variant="ghost">
+      Button
+    </Button>
+    <Button colorScheme="teal" variant="link">
+      Button
+    </Button>
+  </HStack>
+  <VStack spacing={10} mt="xl">
+    <Button colorScheme="teal" full>
+      Button
+    </Button>
+    <Button colorScheme="teal" variant="outline" full>
+      Button
+    </Button>
+    <Button colorScheme="teal" variant="ghost" full>
+      Button
+    </Button>
+    <Button colorScheme="teal" variant="outline" full isLoading>
+      Button
+    </Button>
+  </VStack>
+</Box>`} />
+
+### Prefix and suffix
+
+<CodeEditor code={`<VStack spacing={10}>
+  <Button colorScheme="green">
+    <Icon name="android1" color="white" fontSize="xl" mr="sm" />
+    Button
+  </Button>
+  <Button colorScheme="green">
+    Button
+    <Icon name="android1" color="white" fontSize="xl" ml="sm" />
+  </Button>
+</VStack>`} />
+
+## Props
+
+Extends every `Box` props and react native `Button` component.
+
+https://reactnative.dev/docs/button#props
+
+### `style`
+<PropsTable
+description="The style prop from React Native. Unlike the regular Pressable component, it does not accept a function."
+ prop={{ type: "StyleProp<ViewStyle>", required: false, default: "-" }}
+/>
+
+### `colorScheme`
+<PropsTable
+description="The colorScheme property, will define background color and overlay color."
+ prop={{ type: "string", required: false, default: "blue" }}
+/>
+
+### `size`
+<PropsTable
+  description="The size property, will define the size of the button."
+  prop={{ type: "string", required: false, default: "md" }}
+/>
+
+### `full`
+<PropsTable
+description="The full property, if true, then the button takes all the width."
+ prop={{ type: "boolean", required: false, default: "false" }}
+/>
+
+### `isRound`
+<PropsTable
+description="The isRound property, if true, then the button will have a `borderRadius` fully round."
+ prop={{ type: "boolean", required: false, default: "false" }}
+/>
+
+### `_pressed`
+<PropsTable
+  description="The properties to apply when `pressed` is true."
+  prop={{ type: "CustomStyleObject", required: false, default: "-" }}
+/>

apps/examples/app/components-v2/Button.tsx

@@ -0,0 +1,117 @@
+import { Button, HStack, SafeAreaBox, ScrollBox, Stack, Text } from '@ficus-ui/native';
+import { Icon } from 'react-native-ficus-ui';
+
+import ExampleSection from '@/src/ExampleSection';
+
+
+const ButtonComponent = () => {
+  return (
+    <SafeAreaBox>
+      <Text mx="xl" fontSize="4xl">
+        Button component
+      </Text>
+      <ScrollBox>
+        <ExampleSection name="default">
+          <Stack spacing={10}>
+            <Button onPress={() => console.log('PRESSED')}>Button</Button>
+            <Button colorScheme="red">Button</Button>
+            <Button colorScheme="yellow">Button</Button>
+            <Button colorScheme="green">Button</Button>
+            <Button colorScheme="pink" isDisabled>Button Disabled</Button>
+            <Button colorScheme="pink" full>
+              Button
+            </Button>
+            <Button colorScheme="blue" isLoading>
+              Button
+            </Button>
+            <Button colorScheme="blue" loadingText='Loading...' isLoading>
+              Button
+            </Button>
+          </Stack>
+        </ExampleSection>
+
+        <ExampleSection name="sizes">
+          <Stack spacing={10}>
+            <Button size="xs">Button</Button>
+            <Button colorScheme="red" size="sm">
+              Button
+            </Button>
+            <Button colorScheme="orange" size="md">
+              Button
+            </Button>
+            <Button colorScheme="green" size="lg">
+              Button
+            </Button>
+            <Button colorScheme="pink" size="xl">
+              Button
+            </Button>
+          </Stack>
+        </ExampleSection>
+
+        <ExampleSection name="round">
+          <Stack spacing={10}>
+            <Button size="xs" rounded="full">
+              Button
+            </Button>
+            <Button colorScheme="red" size="sm" rounded="full">
+              Button
+            </Button>
+            <Button colorScheme="orange" size="md" rounded="full">
+              Button
+            </Button>
+            <Button colorScheme="green" size="lg" rounded="full">
+              Button
+            </Button>
+            <Button colorScheme="pink" size="xl" rounded="full">
+              Button
+            </Button>
+          </Stack>
+        </ExampleSection>
+
+        <ExampleSection name="variants">
+          <HStack spacing={10}>
+            <Button colorScheme="teal">Button</Button>
+            <Button colorScheme="teal" variant="outline">
+              Button
+            </Button>
+            <Button colorScheme="teal" variant="ghost">
+              Button
+            </Button>
+            <Button colorScheme="teal" variant="link">
+              Button
+            </Button>
+          </HStack>
+          <Stack spacing={10} mt="xl">
+            <Button colorScheme="teal" full>
+              Button
+            </Button>
+            <Button colorScheme="teal" variant="outline" full>
+              Button
+            </Button>
+            <Button colorScheme="teal" variant="ghost" full>
+              Button
+            </Button>
+            <Button colorScheme="teal" variant="outline" full isLoading>
+              Button
+            </Button>
+          </Stack>
+        </ExampleSection>
+
+        <ExampleSection name="prefix and suffix">
+          <Stack spacing={10}>
+            <Button colorScheme="green">
+              <Icon name="android1" color="white" fontSize="xl" mr="sm" />
+              Button
+            </Button>
+            <Button colorScheme="green">
+              Button
+              <Icon name="android1" color="white" fontSize="xl" ml="sm" />
+            </Button>
+          </Stack>
+        </ExampleSection>
+      </ScrollBox>
+    </SafeAreaBox>
+  );
+};
+
+export default ButtonComponent;

apps/examples/app/items-v2.ts

@@ -12,6 +12,7 @@ import TouchableOpacityComponent from './components-v2/TouchableOpacity';
 import TouchableWithoutFeedbackComponent from './components-v2/TouchableWithoutFeedback';
 import ImageComponent from '@/app/components-v2/Image';
 import PressableComponent from './components-v2/Pressable';
+import ButtonComponent from './components-v2/Button';
 import DividerComponent from '@/app/components-v2/Divider';
 import SpinnerComponent from '@/app/components-v2/Spinner';
 import SliderComponent from '@/app/components-v2/Slider';
@@ -42,6 +43,7 @@ export const components: ExampleComponentType[] = [
   { navigationPath: 'TouchableOpacity', onScreenName: 'TouchableOpacity', component: TouchableOpacityComponent },
   { navigationPath: 'TouchableWithoutFeedback', onScreenName: 'TouchableWithoutFeedback', component: TouchableWithoutFeedbackComponent },
   { navigationPath: 'Image', onScreenName: 'Image', component: ImageComponent },
+  { navigationPath: 'Button', onScreenName: 'Button', component: ButtonComponent },
   { navigationPath: 'Divider', onScreenName: 'Divider', component: DividerComponent },
   { navigationPath: 'Spinner', onScreenName: 'Spinner', component: SpinnerComponent },
   { navigationPath: 'Pressable', onScreenName: 'Pressable', component: PressableComponent },