Add badge component (#33)

docs/pages/docs/Components/_meta.en-US.json

@@ -1,5 +1,6 @@
 {
   "text": "Text",
+  "badge": "Badge",
   "divider": "Divider",
   "image": "Image",
   "icon": "Icon",

docs/pages/docs/Components/badge.en-US.mdx

@@ -0,0 +1,42 @@
+---
+searchable: true
+---
+
+import { ExpoDemo } from '@components/expo-demo';
+
+
+# Badge
+
+Component to highlight an item's status for quick recognition.
+
+## Import
+
+```js
+import { Badge } from 'react-native-ficus-ui';
+```
+
+## Usage
+
+<div className="mt-2">
+  <ExpoDemo id="@bearstudio/ficus-ui-text" />
+</div>
+
+## Props
+
+Extends every `Box` and `Text` props.
+
+### `colorScheme`
+
+The colorScheme property, will define background color and text color.
+
+| Type   | Required | Default |
+| ------ | -------- | ------- |
+| string | Yes      | gray    |
+
+### `variant`
+
+The variant of the Badge.
+
+| Type           | Required | Default |
+| -------------- | -------- | ------- |
+| "solid" | "subtle" | "outline" | No       | "subtle"    |

example/app/components/Badge.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { SafeAreaView } from 'react-native';
+import { Badge, ScrollBox, Text, VStack } from 'react-native-ficus-ui';
+import ExampleSection from '@/src/ExampleSection';
+
+const BadgeComponent = () => {
+  return (
+    <SafeAreaView>
+      <Text mx="xl" fontSize="4xl">
+        Badge component
+      </Text>
+      <ScrollBox>
+        <ExampleSection name="color scheme">
+          <VStack spacing="md">
+            <Badge>New</Badge>
+            <Badge colorScheme="green">New</Badge>
+            <Badge colorScheme="red">New</Badge>
+            <Badge colorScheme="orange">New</Badge>
+            <Badge colorScheme="purple">New</Badge>
+            <Badge colorScheme="pink">New</Badge>
+          </VStack>
+        </ExampleSection>
+        <ExampleSection name="font size">
+          <VStack spacing="md">
+            <Badge fontSize="xs">New</Badge>
+            <Badge colorScheme="green" fontSize="sm">
+              New
+            </Badge>
+            <Badge colorScheme="red" fontSize="md">
+              New
+            </Badge>
+            <Badge colorScheme="orange" fontSize="lg">
+              New
+            </Badge>
+            <Badge colorScheme="purple" fontSize="xl">
+              New
+            </Badge>
+            <Badge colorScheme="pink" fontSize="2xl">
+              New
+            </Badge>
+          </VStack>
+        </ExampleSection>
+
+        <ExampleSection name="variants">
+          <VStack spacing="md">
+            <Badge variant="outline" colorScheme="green" fontSize="2xl">
+              Outline
+            </Badge>
+            <Badge variant="solid" colorScheme="green" fontSize="2xl">
+              Solid
+            </Badge>
+            <Badge variant="subtle" colorScheme="green" fontSize="2xl">
+              Subtle
+            </Badge>
+          </VStack>
+        </ExampleSection>
+      </ScrollBox>
+    </SafeAreaView>
+  );
+};
+
+export default BadgeComponent;

example/app/items.ts

@@ -25,6 +25,7 @@ import FlashListComponent from './components/FlashList';
 import SafeAreaBoxComponent from './components/SafeAreaBox';
 import DividerComponent from './components/Divider';
 import ScrollBoxComponent from './components/ScrollBox';
+import BadgeComponent from './components/Badge';
 
 type ExampleComponentType = {
   onScreenName: string;
@@ -39,6 +40,7 @@ export const components: ExampleComponentType[] = [
     component: TextComponent,
   },
   { navigationPath: 'Box', onScreenName: 'Box', component: BoxComponent },
+  { navigationPath: 'Badge', onScreenName: 'Badge', component: BadgeComponent },
   {
     navigationPath: 'ScrollBox',
     onScreenName: 'ScrollBox',

src/components/badge/badge.component.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import { View as RNView, Text } from 'react-native';
+
+import { getStyle } from './badge.style';
+import type { BadgeProps } from './badge.type';
+import { useTheme } from '../../theme/theme.hook';
+import { useDefaultProps } from '../../utilities/useDefaultProps';
+import { handleResponsiveProps } from '../../types';
+
+const Badge: React.FunctionComponent<BadgeProps> = (incomingProps) => {
+  const { theme, windowWidth } = useTheme();
+  const props = useDefaultProps(
+    'Badge',
+    handleResponsiveProps(incomingProps, theme, windowWidth),
+    {
+      colorScheme: 'gray',
+      flexDirection: 'column',
+      flexWrap: 'nowrap',
+      borderRadius: 'sm',
+      shadow: 'none',
+      position: 'relative',
+      bgMode: 'cover',
+      pointerEvents: 'auto',
+      borderStyle: 'solid',
+      textTransform: 'uppercase',
+      fontWeight: 'bold',
+      alignSelf: 'flex-start',
+      paddingHorizontal: 4,
+      paddingVertical: 2,
+      variant: 'subtle',
+    }
+  );
+
+  const {
+    bg,
+    h,
+    w,
+    m,
+    mt,
+    mr,
+    mb,
+    ml,
+    ms,
+    p,
+    pr,
+    pt,
+    pb,
+    pl,
+    minH,
+    minW,
+    maxW,
+    maxH,
+    position,
+    style,
+    flexDirection,
+    direction,
+    borderRadius,
+    borderTopRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderLeftRadius,
+    borderRightRadius,
+    borderBottomRadius,
+    children,
+    bgImg,
+    bgMode,
+    alignItems,
+    align,
+    justifyContent,
+    justify,
+    borderColor,
+    borderBottomColor,
+    borderLeftColor,
+    borderTopColor,
+    borderRightColor,
+    borderWidth,
+    borderLeftWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderTopWidth,
+    borderEndWidth,
+    flexWrap,
+    wrap,
+    flexGrow,
+    grow,
+    flexBasis,
+    basis,
+    flexShrink,
+    shrink,
+    shadow,
+    shadowColor,
+    opacity,
+    overflow,
+    top,
+    left,
+    right,
+    bottom,
+    zIndex,
+    color,
+    fontSize,
+    textAlign,
+    fontWeight,
+    lineHeight,
+    letterSpacing,
+    textTransform,
+    textDecorColor,
+    textDecorStyle,
+    fontStyle,
+    textDecorLine,
+    textAlignVertical,
+    colorScheme,
+    variant,
+    ...rest
+  } = props;
+  const computedStyle = getStyle(theme, props);
+
+  return (
+    <RNView style={computedStyle.badge} {...rest}>
+      <Text style={computedStyle.text}>{children}</Text>
+    </RNView>
+  );
+};
+
+// Badge.defaultProps = {
+//   bg: 'transparent',
+//   flexDirection: 'column',
+//   flexWrap: 'nowrap',
+//   borderRadius: 'none',
+//   shadow: 'none',
+//   shadowColor: 'gray900',
+//   position: 'relative',
+//   bgMode: 'cover',
+//   pointerEvents: 'auto',
+//   borderStyle: 'solid',
+// };
+
+export { Badge };

src/components/badge/badge.spec.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react-native';
+
+import { Badge } from './badge.component';
+import type { BadgeProps } from './badge.type';
+import { ThemeProvider } from '../../theme/theme.provider';
+
+jest.mock('react-native-toast-message', () => 'Toast');
+
+describe('Badge component', () => {
+  const TestBadge: React.FC<BadgeProps> = (props) => (
+    <ThemeProvider>
+      <Badge {...props} />
+    </ThemeProvider>
+  );
+
+  it('should render component passed to children', () => {
+    render(<TestBadge>I love Ficus UI (forked from Magnus UI)</TestBadge>);
+
+    expect(
+      screen.getByText('I love Ficus UI (forked from Magnus UI)')
+    ).toBeTruthy();
+  });
+});