feat(pill): message here

Author: bsdaoquang

example/src/App.tsx

@@ -1,31 +1,12 @@
-import * as React from 'react';
-
-import { StyleSheet, View, Text } from 'react-native';
-import { multiply } from 'react-native-components';
-
-export default function App() {
-  const [result, setResult] = React.useState<number | undefined>();
-
-  React.useEffect(() => {
-    multiply(3, 7).then(setResult);
-  }, []);
+import { View, Text } from 'react-native';
+import React from 'react';
 
+const App = () => {
   return (
-    <View style={styles.container}>
-      <Text>Result: {result}</Text>
+    <View>
+      <Text>App</Text>
     </View>
   );
-}
+};
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  box: {
-    width: 60,
-    height: 60,
-    marginVertical: 20,
-  },
-});
+export default App;

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-native-components",
-  "version": "0.1.0",
+  "name": "@bsdaoquang/rncomponent",
+  "version": "0.0.1",
   "description": "UI library for react native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -26,13 +26,14 @@
     "!**/.*"
   ],
   "scripts": {
-    "example": "yarn workspace react-native-components-example",
+    "example": "yarn workspace rncomponents-example",
     "test": "jest",
     "typecheck": "tsc --noEmit",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
     "prepare": "bob build",
-    "release": "release-it"
+    "release": "release-it",
+    "start": "npx react-native start"
   },
   "keywords": [
     "react-native",
@@ -161,5 +162,10 @@
     "name": "RNComponentsSpec",
     "type": "modules",
     "jsSrcsDir": "src"
+  },
+  "dependencies": {
+    "@react-native-community/checkbox": "^0.5.17",
+    "iconsax-react-native": "^0.0.8",
+    "react-native-svg": "^15.3.0"
   }
 }

src/colors/colors.ts

@@ -0,0 +1,31 @@
+export const colors = {
+  black: '#000',
+  white: '#fff',
+  blue100: '#cfe2ff',
+  blue200: '#9ec5fe',
+  blue300: '#6ea8fe',
+  blue400: '#3d8bfd',
+  blue500: '#0d6efd',
+  blue600: '#0a58ca',
+  blue700: '#084298',
+  blue800: '#052c65',
+  blue900: '#031633',
+  gray100: '#f8f9fa',
+  gray200: '#e9ecef',
+  gray300: '#dee2e6',
+  gray400: '#ced4da',
+  gray500: '#adb5bd',
+  gray600: '#6c757d',
+  gray700: '#495057',
+  gray800: '#343a40',
+  gray900: '#212529',
+  red100: '#f8d7da',
+  red200: '#f1aeb5',
+  red300: '#ea868f',
+  red400: '#e35d6a',
+  red500: '#dc3545',
+  red600: '#b02a37',
+  red700: '#842029',
+  red800: '',
+  red900: '',
+};

src/components/Badge.tsx

@@ -0,0 +1,113 @@
+import React, { type ReactNode } from 'react';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { colors } from '../colors/colors';
+import Label from './Label';
+import Row from './Row';
+
+type Props = {
+  children: ReactNode;
+  renderDot?: ReactNode;
+  dotColor?: string;
+  dotStylesProps?: StyleProp<ViewStyle>;
+  count?: number;
+  show?: boolean;
+  overflowCount?: number;
+};
+
+const Badge = (props: Props) => {
+  const {
+    children,
+    renderDot,
+    dotColor,
+    dotStylesProps,
+    count,
+    show,
+    overflowCount,
+  } = props;
+  const dotProps = (
+    <View
+      style={[
+        {
+          position: 'absolute',
+          top: -5,
+          right: -5,
+        },
+        dotStylesProps,
+      ]}
+    >
+      {renderDot ? (
+        renderDot
+      ) : (
+        <View
+          style={[
+            localStyles.dot,
+            {
+              backgroundColor: dotColor ?? colors.red500,
+            },
+            dotStylesProps,
+          ]}
+        />
+      )}
+    </View>
+  );
+
+  const renderCount = (
+    <View style={[localStyles.count]}>
+      <Label
+        size={12}
+        color="white"
+        text={`${
+          count
+            ? overflowCount
+              ? count >= overflowCount
+                ? `${overflowCount - 1}+`
+                : count
+              : count
+            : ''
+        }`}
+      />
+    </View>
+  );
+
+  return (
+    <Row>
+      <View>
+        {children}
+
+        {count ? (
+          count > 0 ? (
+            renderCount
+          ) : null
+        ) : show === false || count === 0 ? (
+          <></>
+        ) : (
+          dotProps
+        )}
+      </View>
+    </Row>
+  );
+};
+
+export default Badge;
+
+const localStyles = StyleSheet.create({
+  dot: {
+    width: 14,
+    height: 14,
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: 'white',
+  },
+  count: {
+    backgroundColor: colors.red500,
+    position: 'absolute',
+    top: -8,
+    // left: '70%',
+    right: -14,
+    paddingVertical: 2,
+    paddingHorizontal: 7,
+    borderRadius: 100,
+    borderWidth: 1,
+    borderColor: colors.white,
+  },
+});

src/components/Card.tsx

@@ -0,0 +1,53 @@
+import React, { type ReactNode } from 'react';
+import {
+  type StyleProp,
+  TouchableOpacity,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import { globalStyles } from '../styles/globalStyles';
+
+interface Props {
+  children: ReactNode;
+  color?: string;
+  onPress?: () => void;
+  styles?: StyleProp<ViewStyle>;
+  shadowed?: boolean;
+}
+const Card = (props: Props) => {
+  const { children, color, onPress, styles, shadowed } = props;
+
+  const localStyles: StyleProp<ViewStyle> = {
+    paddingVertical: 12,
+    marginBottom: 20,
+    marginHorizontal: 16,
+    paddingHorizontal: 16,
+    backgroundColor: color ?? 'white',
+    borderRadius: 4,
+  };
+
+  return onPress ? (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[
+        localStyles,
+        shadowed === false ? undefined : globalStyles.shadow,
+        styles,
+      ]}
+    >
+      {children}
+    </TouchableOpacity>
+  ) : (
+    <View
+      style={[
+        localStyles,
+        shadowed === false ? undefined : globalStyles.shadow,
+        styles,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
+
+export default Card;