Feat/v2 avatar

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

@@ -0,0 +1,163 @@
+---
+searchable: true
+---
+
+import { CodeEditor } from '@components/code-editor';
+import PropsTable from "@components/docs/props-table";
+
+# Avatar
+
+Component to represent user, and displays the profile picture, initials or fallback icon.
+
+## Import
+
+```js
+import { Avatar, AvatarGroup } from "@ficus-ui/native";
+```
+
+## Usage
+
+### Avatar with photo
+
+<CodeEditor code={`<Avatar
+  name="Nicolas Torion"
+  src="https://avatars.githubusercontent.com/u/53612278?v=4"
+/>`} />
+
+### Generated color
+
+<CodeEditor code={`<HStack spacing="md">
+  <Avatar name="Nicolas Torion" size="xs" />
+  <Avatar name="Omar Borji" size="sm" />
+  <Avatar name="Deelan" size="md" />
+  <Avatar name="Mark Cavendish" size="lg" />
+  <Avatar name="Antoine Dupont" size="xl" />
+</HStack>`} />
+
+### Color scheme
+
+<CodeEditor code={`<HStack spacing="md">
+  <Avatar name="Nicolas Torion" size="xs" colorScheme="blue" />
+  <Avatar name="Omar Borji" size="sm" colorScheme="orange" />
+  <Avatar name="Deelan" size="md" colorScheme="green" />
+  <Avatar name="Mark Cavendish" size="lg" colorScheme="red" />
+  <Avatar name="Antoine Dupont" size="xl" colorScheme="purple" />
+</HStack>`} />
+
+### Avatar group
+
+<CodeEditor code={`<VStack spacing="md">
+  <AvatarGroup>
+    <Avatar
+      name="Nicolas Torion"
+      src="https://avatars.githubusercontent.com/u/53612278?v=4"
+    />
+    <Avatar
+      name="Omar Borji"
+      src="https://avatars.githubusercontent.com/u/80390318?s=60&v=4"
+    />
+    <Avatar name="Deelan" colorScheme="green" />
+    <Avatar name="Mark Cavendish" colorScheme="red" />
+    <Avatar name="Antoine Dupont" colorScheme="purple" />
+    <Avatar name="Zinédine Zidane" colorScheme="pink" />
+  </AvatarGroup>
+
+  <AvatarGroup size="lg" max={2}>
+    <Avatar
+      name="Nicolas Torion"
+      src="https://avatars.githubusercontent.com/u/53612278?v=4"
+    />
+    <Avatar
+      name="Omar Borji"
+      src="https://avatars.githubusercontent.com/u/80390318?s=60&v=4"
+    />
+    <Avatar name="Deelan" colorScheme="green" />
+    <Avatar name="Mark Cavendish" colorScheme="red" />
+    <Avatar name="Antoine Dupont" colorScheme="purple" />
+    <Avatar name="Zinédine Zidane" colorScheme="pink" />
+  </AvatarGroup>
+</VStack>`} />
+
+### Avatar badge
+
+<CodeEditor code={`<HStack spacing="md">
+  <Avatar
+    name="Nicolas Torion"
+    src="https://avatars.githubusercontent.com/u/53612278?v=4"
+  >
+    <AvatarBadge />
+  </Avatar>
+  <Avatar
+    name="Omar Borji"
+    src="https://avatars.githubusercontent.com/u/80390318?s=60&v=4"
+  >
+    <AvatarBadge bg="orange.500" borderColor="orange.100" />
+  </Avatar>
+  <Avatar name="Deelan" colorScheme="green">
+    <AvatarBadge bg="orange.500" borderColor="orange.100" />
+  </Avatar>
+</HStack>`} />
+
+### Avatar badge and group
+
+<CodeEditor code={`<HStack spacing="md">
+  <AvatarGroup size="lg">
+    <Avatar
+      name="Nicolas Torion"
+      src="https://avatars.githubusercontent.com/u/53612278?v=4"
+    >
+      <AvatarBadge />
+    </Avatar>
+    <Avatar
+      name="Omar Borji"
+      src="https://avatars.githubusercontent.com/u/80390318?s=60&v=4"
+    >
+      <AvatarBadge bg="orange.500" borderColor="orange.100" />
+    </Avatar>
+    <Avatar name="Deelan" colorScheme="green">
+      <AvatarBadge bg="orange.500" borderColor="orange.100" />
+    </Avatar>
+  </AvatarGroup>
+</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`" }}
+/>
+
+### `name`
+<PropsTable
+  description="The name property representing the name of the person in the avatar. If src has loaded, the name will be used as the alt attribute of the img, else, the name will be used to create the initials."
+  prop={{ type: "string", required: true }}
+/>
+
+### `size`
+<PropsTable
+  description="The size property, defining the size of the avatar."
+  prop={{ type: "number", required: false }}
+/>
+
+### `src`
+<PropsTable
+  description="The src property. The source of the avatar image."
+  prop={{ type: "string", required: false }}
+/>
+
+### AvatarGroup props
+
+### `size`
+<PropsTable
+  description="The size property, defining the size of Avatar children."
+  prop={{ type: "string", required: false }}
+/>
+
+### `max`
+<PropsTable
+  description="The max property, defining the max number of Avatar children that should be displayed. If there are more to display, an item indicating the number of other avatars will be displayed."
+  prop={{ type: "number", required: false }}
+/>

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

@@ -0,0 +1,126 @@
+import { SafeAreaView } from 'react-native';
+
+import ExampleSection from '@/src/ExampleSection';
+import { Avatar, AvatarBadge, AvatarGroup, HStack, ScrollBox, Text } from '@ficus-ui/native';
+
+const AvatarComponent = () => {
+  return (
+    <SafeAreaView style={{ flex: 1 }} >
+      <ScrollBox bg="white">
+      <Text mx="xl" fontSize="4xl">
+        Avatar component
+      </Text>
+        <ExampleSection name="avatar with photo">
+          <HStack spacing="md">
+            <Avatar
+              name="Nicolas Torion"
+              src="https://avatars.githubusercontent.com/u/53612278?v=4"
+            />
+          </HStack>
+        </ExampleSection>
+
+        {/* <ExampleSection name="avatar with icon">
+          <HStack spacing="md">
+            <Avatar />
+            <Avatar fontFamily="AntDesign" icon="user" />
+          </HStack>
+        </ExampleSection> */}
+
+        <ExampleSection name="avatar color generated">
+          <HStack spacing="md">
+            <Avatar name="Nicolas Torion" size="xs" />
+            <Avatar name="Omar Borji" size="sm" />
+            <Avatar name="Deelan" size="md" />
+            <Avatar name="Mark Cavendish" size="lg" />
+            <Avatar name="Antoine Dupont" size="xl" />
+          </HStack>
+        </ExampleSection>
+
+        <ExampleSection name="avatar color scheme">
+          <HStack spacing="md">
+            <Avatar name="Nicolas Torion" size="xs" colorScheme="blue" />
+            <Avatar name="Omar Borji" size="sm" colorScheme="orange" />
+            <Avatar name="Deelan" size="md" colorScheme="green" />
+            <Avatar name="Mark Cavendish" size="lg" colorScheme="red" />
+            <Avatar name="Antoine Dupont" size="xl" colorScheme="purple" />
+          </HStack>
+        </ExampleSection>
+
+        <ExampleSection name="avatar group">
+          <AvatarGroup>
+            <Avatar
+              name="Nicolas Torion"
+              src="https://avatars.githubusercontent.com/u/53612278?v=4"
+            />
+            <Avatar
+              name="Omar Borji"
+              src="https://avatars.githubusercontent.com/u/80390318?s=60&v=4"
+            />
+            <Avatar name="Deelan" colorScheme="green" />
+            <Avatar name="Mark Cavendish" colorScheme="red" />
+            <Avatar name="Antoine Dupont" colorScheme="purple" />
+            <Avatar name="Zinédine Zidane" colorScheme="pink" />
+          </AvatarGroup>
+
+          <AvatarGroup size="lg" max={2}>
+            <Avatar
+              name="Nicolas Torion"
+              src="https://avatars.githubusercontent.com/u/53612278?v=4"
+            />
+            <Avatar
+              name="Omar Borji"
+              src="https://avatars.githubusercontent.com/u/80390318?s=60&v=4"
+            />
+            <Avatar name="Deelan" colorScheme="green" />
+            <Avatar name="Mark Cavendish" colorScheme="red" />
+            <Avatar name="Antoine Dupont" colorScheme="purple" />
+            <Avatar name="Zinédine Zidane" colorScheme="pink" />
+          </AvatarGroup>
+        </ExampleSection>
+        <ExampleSection name="avatar badge">
+          <HStack spacing="md">
+            <Avatar
+              name="Nicolas Torion"
+              src="https://avatars.githubusercontent.com/u/53612278?v=4"
+            >
+              <AvatarBadge />
+            </Avatar>
+            <Avatar
+              name="Omar Borji"
+              src="https://avatars.githubusercontent.com/u/80390318?s=60&v=4"
+            >
+              <AvatarBadge />
+            </Avatar>
+            <Avatar name="Deelan" colorScheme="green">
+              <AvatarBadge />
+            </Avatar>
+          </HStack>
+        </ExampleSection>
+
+        <ExampleSection name="avatar badge and group">
+          <HStack spacing="md">
+            <AvatarGroup size="lg">
+              <Avatar
+                name="Nicolas Torion"
+                src="https://avatars.githubusercontent.com/u/53612278?v=4"
+              >
+                <AvatarBadge />
+              </Avatar>
+              <Avatar
+                name="Omar Borji"
+                src="https://avatars.githubusercontent.com/u/80390318?s=60&v=4"
+              >
+                <AvatarBadge bg='yellow' />
+              </Avatar>
+              <Avatar name="Deelan" colorScheme="green">
+                <AvatarBadge bg='red' />
+              </Avatar>
+            </AvatarGroup>
+          </HStack>
+        </ExampleSection>
+      </ScrollBox>
+    </SafeAreaView>
+  );
+};
+
+export default AvatarComponent;

apps/examples/app/items-v2.ts

@@ -21,6 +21,7 @@ import SectionListComponent from '@/app/components-v2/SectionList';
 import FlashListComponent from '@/app/components-v2/FlashList';
 import ModalComponent from '@/app/components-v2/Modal';
 import DraggableModalComponent from '@/app/components-v2/DraggableModal';
+import AvatarComponent from '@/app/components-v2/Avatar';
 
 type ExampleComponentType = {
   onScreenName: string;
@@ -51,5 +52,5 @@ export const components: ExampleComponentType[] = [
   { navigationPath: 'FlashList', onScreenName: 'FlashList', component: FlashListComponent },
   { navigationPath: 'Modal', onScreenName: 'Modal', component: ModalComponent },
   { navigationPath: 'DraggableModal', onScreenName: 'DraggableModal', component: DraggableModalComponent },
+  { navigationPath: 'Avatar', onScreenName: 'Avatar', component: AvatarComponent }
 ];
-

packages/components/src/avatar/avatar-badge.tsx

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+
+import { NativeFicusProps, ficus, forwardRef } from '../system';
+
+export interface AvatarBadgeProps extends NativeFicusProps<'View'> {}
+
+export const AvatarBadge = forwardRef<AvatarBadgeProps, 'View'>((props) => {
+  const { __styles } = props;
+
+  const badgeStyles = useMemo(
+    () => ({
+      position: 'absolute',
+      ...__styles,
+    }),
+    [__styles]
+  );
+
+  return <ficus.View {...props} __styles={badgeStyles} />;
+});