Update docs

BearStudio · Oct 24, 2024 · 0c535af · 0c535af
1 parent 2f7e232
commit 0c535af
Show file tree

Hide file tree

Showing 27 changed files with 240 additions and 20 deletions.
diff --git a/docs/middleware.js b/docs/middleware.js
@@ -3,7 +3,7 @@ import { locales } from 'nextra/locales'
 export const middleware = request => {
   const { nextUrl } = request
 
-  if (nextUrl.pathname.startsWith('/remote/')) {
+  if (nextUrl.pathname.startsWith('/remote/') || nextUrl.pathname.startsWith('/fonts/')) {
     // The middleware must not handle dynamic routes.
     return
   }

diff --git a/docs/package.json b/docs/package.json
@@ -27,6 +27,7 @@
     "react-live": "^4.1.7",
     "react-native": "^0.75.2",
     "react-native-ficus-ui": "1.2.0",
+    "react-native-vector-icons": "^10.2.0",
     "react-native-web": "^0.19.12"
   },
   "dependenciesMeta": {

diff --git a/docs/pages/docs/Components/avatar.en-US.mdx b/docs/pages/docs/Components/avatar.en-US.mdx
@@ -2,8 +2,7 @@
 searchable: true
 ---
 
-import { ExpoDemo } from '@components/expo-demo';
-
+import { CodeEditor } from '@components/code-editor';
 
 # Avatar
 
@@ -17,9 +16,115 @@ import { Avatar, AvatarBadge, AvatarGroup } from 'react-native-ficus-ui';
 
 ## Usage
 
-<div className="mt-2">
-  <ExpoDemo id="@bearstudio/ficus-ui-avatar?platform=ios" />
-</div>
+### Avatar with photo
+
+<CodeEditor code={`<Avatar
+  name="Nicolas Torion"
+  src="https://avatars.githubusercontent.com/u/53612278?v=4"
+/>`} />
+
+### Avatar with icon
+
+<CodeEditor code={`<HStack spacing="md">
+  <Avatar />
+  <Avatar fontFamily="AntDesign" icon="user" />
+</HStack>`} />
+
+### 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
 

diff --git a/docs/pages/docs/Components/divider.en-US.mdx b/docs/pages/docs/Components/divider.en-US.mdx
@@ -2,7 +2,7 @@
 searchable: true
 ---
 
-import { ExpoDemo } from '@components/expo-demo';
+import { CodeEditor } from '@components/code-editor';
 
 
 # Divider
@@ -17,9 +17,45 @@ import { Divider } from 'react-native-ficus-ui';
 
 ## Usage
 
-<div className="mt-2">
-  <ExpoDemo id="@bearstudio/ficus-ui-divider" />
-</div>
+### Horizontal
+
+<CodeEditor code={`<Box>
+  <Text>Test text</Text>
+  <Divider my="md" />
+  <Text>Test text</Text>
+</Box>`} />
+
+### Vertical
+
+<CodeEditor code={`<Box h={40} flexDirection="row">
+  <Divider orientation="vertical" />
+  <Box m="md">
+    <Text>Test text</Text>
+  </Box>
+</Box>`} />
+
+### Custom color
+
+<CodeEditor code={`<Box>
+  <Text>Test text</Text>
+  <Divider colorScheme="blue" my="md" />
+  <Text>Test text</Text>
+</Box>`} />
+
+### Custom size
+
+<CodeEditor code={`<Box>
+  <Text>Test text</Text>
+  <Divider size={10} my="md" />
+  <Text>Test text</Text>
+
+  <Box mt="xl" h={40} flexDirection="row">
+    <Divider size={10} orientation="vertical" />
+    <Box m="md">
+      <Text>Test text</Text>
+    </Box>
+  </Box>
+</Box>`} />
 
 ## Props
 

diff --git a/docs/pages/docs/Components/icon.en-US.mdx b/docs/pages/docs/Components/icon.en-US.mdx
@@ -2,8 +2,7 @@
 searchable: true
 ---
 
-import { ExpoDemo } from '@components/expo-demo';
-
+import { CodeEditor } from '@components/code-editor';
 
 # Icon
 
@@ -17,9 +16,37 @@ import { Icon } from 'react-native-ficus-ui';
 
 ## Usage
 
-<div className="mt-2">
-  <ExpoDemo id="@bearstudio/ficus-ui-icon" />
-</div>
+### Examples
+
+<CodeEditor code={`<HStack spacing={10}>
+  <Icon name="like1" color="blue.700" fontSize="6xl" />
+  <Icon
+    name="star"
+    color="yellow.700"
+    fontSize="6xl"
+    fontFamily="FontAwesome"
+  />
+  <Icon name="codesquare" color="red.500" fontSize="6xl" />
+  <Icon name="android1" color="teal.500" fontSize="6xl" />
+  <Icon name="heart" color="red.500" fontSize="6xl" />
+  <Icon name="apple1" color="blue.700" fontSize="6xl" />
+  <Icon name="appstore1" color="teal.500" fontSize="6xl" />
+  <Icon name="slack" color="yellow.700" fontSize="6xl" />
+</HStack>`} />
+
+### Custom style
+
+<CodeEditor code={`<Icon
+  bg="yellow.400"
+  p={15}
+  borderRadius="full"
+  name="star"
+  color="yellow.700"
+  fontSize="2xl"
+  fontFamily="FontAwesome"
+  h={50}
+  w={50}
+/>`} />
 
 ## Props
 

diff --git a/docs/pages/docs/Components/image.en-US.mdx b/docs/pages/docs/Components/image.en-US.mdx
@@ -2,8 +2,7 @@
 searchable: true
 ---
 
-import { ExpoDemo } from '@components/expo-demo';
-
+import { CodeEditor } from '@components/code-editor';
 
 # Image
 
@@ -17,9 +16,15 @@ import { Image } from 'react-native-ficus-ui';
 
 ## Usage
 
-<div className="mt-2">
-  <ExpoDemo id="@bearstudio/ficus-ui-image" />
-</div>
+<CodeEditor code={`<Image
+  h={200}
+  w={300}
+  borderRadius={10}
+  source={{
+    uri:
+      'https://www.picturethisai.com/wiki-image/1080/153400456440184865.jpeg',
+  }}
+/>`} />
 
 ## Props
 

diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
diff --git a/docs/public/fonts/AntDesign.ttf b/docs/public/fonts/AntDesign.ttf
diff --git a/docs/public/fonts/Entypo.ttf b/docs/public/fonts/Entypo.ttf
diff --git a/docs/public/fonts/EvilIcons.ttf b/docs/public/fonts/EvilIcons.ttf
diff --git a/docs/public/fonts/Feather.ttf b/docs/public/fonts/Feather.ttf
diff --git a/docs/public/fonts/FontAwesome.ttf b/docs/public/fonts/FontAwesome.ttf
diff --git a/docs/public/fonts/FontAwesome5_Brands.ttf b/docs/public/fonts/FontAwesome5_Brands.ttf
diff --git a/docs/public/fonts/FontAwesome5_Regular.ttf b/docs/public/fonts/FontAwesome5_Regular.ttf
diff --git a/docs/public/fonts/FontAwesome5_Solid.ttf b/docs/public/fonts/FontAwesome5_Solid.ttf
diff --git a/docs/public/fonts/FontAwesome6_Brands.ttf b/docs/public/fonts/FontAwesome6_Brands.ttf
diff --git a/docs/public/fonts/FontAwesome6_Regular.ttf b/docs/public/fonts/FontAwesome6_Regular.ttf
diff --git a/docs/public/fonts/FontAwesome6_Solid.ttf b/docs/public/fonts/FontAwesome6_Solid.ttf
diff --git a/docs/public/fonts/Fontisto.ttf b/docs/public/fonts/Fontisto.ttf
diff --git a/docs/public/fonts/Foundation.ttf b/docs/public/fonts/Foundation.ttf
diff --git a/docs/public/fonts/Ionicons.ttf b/docs/public/fonts/Ionicons.ttf
diff --git a/docs/public/fonts/MaterialCommunityIcons.ttf b/docs/public/fonts/MaterialCommunityIcons.ttf
diff --git a/docs/public/fonts/MaterialIcons.ttf b/docs/public/fonts/MaterialIcons.ttf
diff --git a/docs/public/fonts/Octicons.ttf b/docs/public/fonts/Octicons.ttf
diff --git a/docs/public/fonts/SimpleLineIcons.ttf b/docs/public/fonts/SimpleLineIcons.ttf
diff --git a/docs/public/fonts/Zocial.ttf b/docs/public/fonts/Zocial.ttf
diff --git a/docs/styles.css b/docs/styles.css
@@ -16,3 +16,38 @@
 .dark .invert-on-dark {
   filter: invert(1) brightness(1.8);
 }
+
+@font-face {
+  font-family: 'AntDesign';
+  src: url('/fonts/AntDesign.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('/fonts/FontAwesome.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Feather';
+  src: url('/fonts/Feather.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Ionicons';
+  src: url('/fonts/Ionicons.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'MaterialIcons';
+  src: url('/fonts/MaterialIcons.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}