feat(v2): Badge component

apps/docs/components/docs/props-table.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+interface Property {
+  type: string;
+  required: boolean;
+  defaultValue?: string;
+}
+
+interface PropsTableProps {
+  description: string;
+  prop: Property;
+}
+
+const PropsTable: React.FC<PropsTableProps> = ({ description, prop }) => {
+  return (
+    <div>
+      <p className="mb-2 mt-2">{description}</p>
+      <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
+        <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+          <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+            <tr>
+              <th scope="col" className="px-6 py-3">
+                Type
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Required
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Default
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200 text-center">
+              <th
+                className="px-6 py-4"
+              >
+                {prop.type}
+              </th>
+              <td className="px-6 py-4">{prop.required ? 'Yes' : 'No'}</td>
+              <td className="px-6 py-4">{prop.defaultValue}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default PropsTable;

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

@@ -0,0 +1,83 @@
+---
+searchable: true
+---
+
+import { CodeEditor } from '@components/code-editor';
+import PropsTable from "@components/docs/props-table";
+
+
+# Badge
+
+Component to highlight an item's status for quick recognition.
+
+## Import
+
+```js
+import { Badge } from 'react-native-ficus-ui';
+```
+
+## Usage
+
+### Change color scheme
+
+<CodeEditor code={`<HStack 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>
+</HStack>`} />
+
+### Change font size
+
+<CodeEditor code={`<HStack 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>
+</HStack>`}
+/>
+
+### Variants
+
+<CodeEditor code={`<HStack spacing="md">
+  <Badge variant="outline" colorScheme="green" fontSize="xl">
+    Outline
+  </Badge>
+  <Badge variant="solid" colorScheme="green" fontSize="xl">
+    Solid
+  </Badge>
+  <Badge variant="subtle" colorScheme="green" fontSize="xl">
+    Subtle
+  </Badge>
+</HStack>`} />
+
+## Props
+
+Extends every `Box` and `Text` props.
+
+### `colorScheme`
+<PropsTable
+  description="The colorScheme property, will define background color and text color."
+  prop={{ type: "string", required: false, defaultValue: "`gray`" }}
+/>
+
+### `variant`
+<PropsTable
+  description="The variant of the Badge."
+  prop={{ type: "`solid` |`subtle` |`outline`", required: false, defaultValue: "`outline`" }}
+/>
+

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

@@ -0,0 +1,62 @@
+import { SafeAreaView } from "react-native";
+import { ScrollBox, Text, VStack } from "react-native-ficus-ui";
+import ExampleSection from "@/src/ExampleSection";
+import { Badge } from "@ficus-ui/native";
+
+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">
+              Outline
+            </Badge>
+            <Badge variant="solid">
+              Solid
+            </Badge>
+            <Badge variant="subtle">
+              Subtle
+            </Badge>
+          </VStack>
+        </ExampleSection>
+      </ScrollBox>
+    </SafeAreaView>
+  );
+};
+
+export default BadgeComponent;

apps/examples/app/items-v2.ts

@@ -1,5 +1,6 @@
 import { ComponentType } from 'react';
 import BoxComponent from './components-v2/Box';
+import BadgeComponent from './components-v2/Badge';
 
 type ExampleComponentType = {
   onScreenName: string;
@@ -8,7 +9,6 @@ type ExampleComponentType = {
 };
 
 export const components: ExampleComponentType[] = [
-
   { navigationPath: 'Box', onScreenName: 'Box', component: BoxComponent },
-
+  { navigationPath: 'Badge', onScreenName: 'Badge', component: BadgeComponent },
 ];

packages/components/src/badge/index.tsx

@@ -0,0 +1,31 @@
+import {
+  TextStyleProps,
+  ThemingProps,
+  omitThemingProps,
+  splitTextProps,
+} from '@ficus-ui/style-system';
+
+import {
+  type NativeFicusProps,
+  ficus,
+  forwardRef,
+  useStyleConfig,
+} from '../system';
+
+export interface BadgeProps
+  extends NativeFicusProps<'View'>,
+    TextStyleProps,
+    ThemingProps<'Badge'> {}
+
+export const Badge = forwardRef<BadgeProps, 'View'>(function Badge(props, ref) {
+  const styles = useStyleConfig('Badge', props);
+
+  const { children, ...rest } = omitThemingProps(props);
+  const [textStyles, restStyles] = splitTextProps(styles);
+
+  return (
+    <ficus.View ref={ref} {...rest} __styles={restStyles}>
+      <ficus.Text __styles={textStyles}>{children}</ficus.Text>
+    </ficus.View>
+  );
+});

packages/components/src/index.ts

@@ -1,2 +1,4 @@
 export * from './box';
+export * from './badge';
+
 export { ThemeProvider } from '@ficus-ui/theme';

packages/components/src/system/system.ts

@@ -61,17 +61,18 @@ export function styled<
 
   const ficusComponent = forwardRef<any, any>(
     function FicusComponent(props, ref) {
-      const { children, style, as, ...rest } = props;
+      const { children, style, as, __styles, ...rest } = props;
       const { theme } = useTheme();
 
-      const restProps = splitProps(rest, isStyleProp)[1];
+      const [styleProps, restProps] = splitProps(rest, isStyleProp);
 
       const AsComponent = as ? getComponent(as) : Component;
 
       const propsWithTheme = {
         style,
         theme,
-        ...rest,
+        __styles,
+        ...styleProps,
       };
 
       const computedStyle = styleObject(propsWithTheme);

packages/components/src/system/use-style-config.ts

@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 
-import { compact, get, mergeWith, omit } from '@chakra-ui/utils';
+import { compact, memoizedGet as get, mergeWith, omit } from '@chakra-ui/utils';
 import {
   Dict,
   type SystemStyleObject,
@@ -14,7 +14,7 @@ type StylesRef = SystemStyleObject | Record<string, SystemStyleObject>;
 
 function useStyleConfigFn(
   themeKey: string | null,
-  props: ThemingProps & Record<string, any> = {}
+  props: ThemingProps & Dict = {}
 ) {
   const { styleConfig: styleConfigProp, ...rest } = props;
 

packages/style-system/src/config/background.ts

@@ -3,8 +3,10 @@ import { Config } from '../utils/prop-config';
 
 export const background: Config<BackgroundProps> = {
   bg: t.colors('backgroundColor'),
+  backgroundColor: t.colors('backgroundColor'),
 };
 
 export interface BackgroundProps {
   bg?: string;
+  backgroundColor?: string;
 }

packages/style-system/src/config/colors.ts

@@ -2,13 +2,11 @@ import { t } from '../utils';
 import { Config } from '../utils/prop-config';
 
 export const color: Config<ColorProps> = {
-  color: t.colors('color'),
   overlayColor: t.colors('overlayColor'),
   shadowColor: t.colors('shadowColor'),
 };
 
 export interface ColorProps {
-  color?: string;
   overlayColor?: string;
   shadowColor?: string;
 }

packages/style-system/src/config/radius.ts

@@ -3,6 +3,7 @@ import { Config } from '../utils/prop-config';
 import { ResponsiveValue } from '../utils/types';
 
 export const radius: Config<RadiusProps> = {
+  rounded: t.radius('borderRadius'),
   borderRadius: t.radius('borderRadius'),
   borderTopLeftRadius: t.radius('borderTopLeftRadius'),
   borderTopRightRadius: t.radius('borderTopRightRadius'),
@@ -21,6 +22,7 @@ export const radius: Config<RadiusProps> = {
 };
 
 export interface RadiusProps {
+  rounded?: ResponsiveValue<string | number>;
   borderRadius?: ResponsiveValue<string | number>;
   borderTopLeftRadius?: ResponsiveValue<string | number>;
   borderTopRightRadius?: ResponsiveValue<string | number>;

packages/style-system/src/config/text.ts

@@ -6,6 +6,7 @@ import { transforms } from '../utils/transform-functions';
 import { ResponsiveValue } from '../utils/types';
 
 export const text: Config<TextStyleProps> = {
+  color: t.colors('color'),
   textColor: t.colors('color'),
   fontSize: t.prop('fontSize', 'fontSizes', transforms.getThemeProp),
   textDecorLine: t.prop('textDecorationLine'),
@@ -35,11 +36,12 @@ export const text: Config<TextStyleProps> = {
  * Only for React native Text Component
  */
 export interface TextStyleProps {
+  color?: string;
   textColor?: string;
   fontSize?: ResponsiveValue<string | number>;
   textDecorLine?: ResponsiveValue<TextStyle['textDecorationLine']>;
   textDecorStyle?: ResponsiveValue<TextStyle['textDecorationStyle']>;
-  fontStyle?: ResponsiveValue<TextStyle['fontSize']>;
+  fontStyle?: ResponsiveValue<TextStyle['fontStyle']>;
   textDecorColor?: ResponsiveValue<string>;
   fontWeight?: ResponsiveValue<TextStyle['fontWeight']>;
   fontFamily?: ResponsiveValue<'heading' | 'mono' | (string & {})>;

packages/style-system/src/style-config.ts

@@ -1,5 +1,6 @@
-import { isObject, mergeWith, runIfFn } from '@chakra-ui/utils';
+import { isObject, mergeWith, runIfFn, splitProps } from '@chakra-ui/utils';
 
+import { isStyleProp } from './system';
 import { Dict, ResponsiveValue } from './utils';
 import { expandResponsive } from './utils';
 
@@ -84,12 +85,13 @@ export function resolveStyleConfig(config: Config) {
     const { variant, size, theme, ...rest } = props;
     const recipe = createResolver(theme);
 
+    const [restStyles] = splitProps(rest, isStyleProp);
     return mergeWith(
       {},
       runIfFn(config.baseStyle ?? {}, props),
       recipe(config, 'sizes', size, props),
       recipe(config, 'variants', variant, props),
-      rest
+      restStyles
     );
   };
 }

packages/style-system/src/style-sheet.ts

@@ -28,9 +28,17 @@ export function getStyleSheet({ configs = {}, theme }: GetStyleSheetOptions) {
         config = { property: key } as PropConfig;
       }
 
+      /**
+       * Useful for objects containing styles.
+       * E.g: React Native `style` prop
+       */
       if (isObject(value)) {
         computedStyles[key] = computedStyles[key] ?? {};
-        computedStyles = mergeWith({}, computedStyles[key], styleSheet(value));
+        computedStyles[key] = mergeWith(
+          {},
+          computedStyles[key],
+          styleSheet(value)
+        );
         continue;
       }