Update docs

BearStudio · Oct 24, 2024 · 4665917 · 4665917
1 parent f86107e
commit 4665917
Show file tree

Hide file tree

Showing 9 changed files with 317 additions and 41 deletions.
diff --git a/docs/pages/docs/Components/Lists/list.en-US.mdx b/docs/pages/docs/Components/Lists/list.en-US.mdx
@@ -2,8 +2,7 @@
 searchable: true
 ---
 
-import { ExpoDemo } from '@components/expo-demo';
-
+import { CodeEditor } from '@components/code-editor';
 
 # List
 
@@ -19,9 +18,29 @@ import { List } from 'react-native-ficus-ui';
 
 ## Usage
 
-<div className="mt-2">
-  <ExpoDemo id="@bearstudio/ficus-ui-list" />
-</div>
+<CodeEditor code={`<List
+  bg="gray.200"
+  p="xl"
+  data={[
+    {
+      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+      title: 'First Item',
+    },
+    {
+      id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+      title: 'Second Item',
+    },
+    {
+      id: '58694a0f-3da1-471f-bd96-145571e29d72',
+      title: 'Third Item',
+    },
+  ]}
+  renderItem={({ item }) => (
+    <Box p="lg">
+      <Text>{item.title}</Text>
+    </Box>
+  )}
+/>`} />
 
 ## Props
 

diff --git a/docs/pages/docs/Components/Lists/sectionlist.en-US.mdx b/docs/pages/docs/Components/Lists/sectionlist.en-US.mdx
@@ -2,8 +2,7 @@
 searchable: true
 ---
 
-import { ExpoDemo } from '@components/expo-demo';
-
+import { CodeEditor } from '@components/code-editor';
 
 # SectionList
 
@@ -17,9 +16,35 @@ import { SectionList } from 'react-native-ficus-ui';
 
 ## Usage
 
-<div className="mt-2">
-  <ExpoDemo id="@bearstudio/ficus-ui-sectionlist" />
-</div>
+<CodeEditor code={`<SectionList
+  bg="gray.200"
+  p="xl"
+  sections={[
+    {
+      title: 'Main dishes',
+      data: ['Pizza', 'Burger', 'Risotto'],
+    },
+    {
+      title: 'Sides',
+      data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
+    },
+    {
+      title: 'Drinks',
+      data: ['Water', 'Coke', 'Beer'],
+    },
+  ]}
+  keyExtractor={(item, index) => item + index}
+  renderItem={({ item }) => (
+    <Box p="sm">
+      <Text>{item}</Text>
+    </Box>
+  )}
+  renderSectionHeader={({ section: { title } }) => (
+    <Box bg="gray.300" p="sm">
+      <Text>{title}</Text>
+    </Box>
+  )}
+/>`} />
 
 ## Props
 

diff --git a/docs/pages/docs/Components/Touchables/button.en-US.mdx b/docs/pages/docs/Components/Touchables/button.en-US.mdx
@@ -2,8 +2,7 @@
 searchable: true
 ---
 
-import { ExpoDemo } from '@components/expo-demo';
-
+import { CodeEditor } from '@components/code-editor';
 
 # Button
 
@@ -17,9 +16,115 @@ import { Button } from 'react-native-ficus-ui';
 
 ## Usage
 
-<div className="mt-2">
-  <ExpoDemo id="@bearstudio/ficus-ui-button" />
-</div>
+### Default
+
+<CodeEditor code={`<VStack spacing={10}>
+  <Button onPress={() => console.log('PRESSED')}>Button</Button>
+  <Button colorScheme="red">Button</Button>
+  <Button colorScheme="orange">Button</Button>
+  <Button colorScheme="green">Button</Button>
+  <Button colorScheme="pink">Button</Button>
+  <Button colorScheme="pink" full>
+    Button
+  </Button>
+  <Button colorScheme="blue" full isLoading>
+    Button
+  </Button>
+</VStack>`} />
+
+### Button sizes
+
+<CodeEditor code={`<VStack spacing={10}>
+  <Button size="xs">Button</Button>
+  <Button colorScheme="red" size="sm">
+    Button
+  </Button>
+  <Button colorScheme="orange" size="md">
+    Button
+  </Button>
+  <Button colorScheme="green" size="lg">
+    Button
+  </Button>
+  <Button colorScheme="pink" size="xl">
+    Button
+  </Button>
+  <Button colorScheme="blue" size="2xl">
+    Button
+  </Button>
+</VStack>`} />
+
+### Round
+
+<CodeEditor code={`<VStack spacing={10}>
+  <Button size="xs" isRound>
+    Button
+  </Button>
+  <Button colorScheme="red" size="sm" isRound>
+    Button
+  </Button>
+  <Button colorScheme="orange" size="md" isRound>
+    Button
+  </Button>
+  <Button colorScheme="green" size="lg" isRound>
+    Button
+  </Button>
+  <Button colorScheme="pink" size="xl" isRound>
+    Button
+  </Button>
+</VStack>`} />
+
+### Variants
+
+<CodeEditor code={`<Box>
+  <HStack spacing={10}>
+    <Button colorScheme="teal">Button</Button>
+    <Button colorScheme="teal" variant="outline">
+      Button
+    </Button>
+    <Button colorScheme="teal" variant="ghost">
+      Button
+    </Button>
+    <Button colorScheme="teal" variant="link">
+      Button
+    </Button>
+  </HStack>
+  <VStack spacing={10} mt="xl">
+    <Button colorScheme="teal" full>
+      Button
+    </Button>
+    <Button colorScheme="teal" variant="outline" full>
+      Button
+    </Button>
+    <Button colorScheme="teal" variant="ghost" full>
+      Button
+    </Button>
+    <Button colorScheme="teal" variant="outline" full isLoading>
+      Button
+    </Button>
+  </VStack>
+</Box>`} />
+
+### Prefix and suffix
+
+<CodeEditor code={`<VStack spacing={10}>
+  <Button
+    colorScheme="green"
+    prefix={
+      <Icon name="android1" color="white" fontSize="xl" mr="sm" />
+    }
+  >
+    Button
+  </Button>
+  <Button
+    colorScheme="green"
+    suffix={
+      <Icon name="android1" color="white" fontSize="xl" ml="sm" />
+    }
+  >
+    Button
+  </Button>
+</VStack>`} />
+
 
 ## Props
 

diff --git a/docs/pages/docs/Components/Touchables/icon-button.en-US.mdx b/docs/pages/docs/Components/Touchables/icon-button.en-US.mdx
@@ -2,8 +2,7 @@
 searchable: true
 ---
 
-import { ExpoDemo } from '@components/expo-demo';
-
+import { CodeEditor } from '@components/code-editor';
 
 # IconButton
 
@@ -17,9 +16,104 @@ import { IconButton } from 'react-native-ficus-ui';
 
 ## Usage
 
-<div className="mt-2">
-  <ExpoDemo id="@bearstudio/ficus-ui-icon-button" />
-</div>
+### Default
+
+<CodeEditor code={`<VStack spacing={10}>
+  <IconButton icon={<Icon name="search1" />} size="xs" />
+  <IconButton
+    icon={<Icon name="search1" />}
+    colorScheme="pink"
+    size="sm"
+  />
+  <IconButton icon={<Icon name="search1" />} colorScheme="teal" />
+  <IconButton
+    icon={<Icon name="search1" />}
+    colorScheme="blue"
+    size="lg"
+  />
+  <IconButton
+    icon={<Icon name="search1" />}
+    colorScheme="red"
+    size="xl"
+  />
+  <IconButton
+    icon={<Icon name="search1" />}
+    colorScheme="orange"
+    size="2xl"
+  />
+</VStack>`} />
+
+### Round
+
+<CodeEditor code={`<VStack spacing={10}>
+  <IconButton icon={<Icon name="search1" />} size="xs" isRound />
+  <IconButton
+    icon={<Icon name="search1" />}
+    colorScheme="pink"
+    size="sm"
+    isRound
+  />
+  <IconButton
+    icon={<Icon name="search1" />}
+    colorScheme="teal"
+    isRound
+  />
+  <IconButton
+    icon={<Icon name="search1" />}
+    colorScheme="blue"
+    size="lg"
+    isRound
+  />
+  <IconButton
+    icon={<Icon name="search1" />}
+    colorScheme="red"
+    size="xl"
+    isRound
+  />
+  <IconButton
+    icon={<Icon name="search1" />}
+    colorScheme="orange"
+    size="2xl"
+    isRound
+  />
+</VStack>`} />
+
+### Variants
+
+<CodeEditor code={`<Box>
+  <HStack spacing={10}>
+    <IconButton icon={<Icon name="search1" />} colorScheme="teal" />
+    <IconButton
+      icon={<Icon name="search1" />}
+      colorScheme="teal"
+      variant="outline"
+    />
+    <IconButton
+      icon={<Icon name="search1" />}
+      colorScheme="teal"
+      variant="ghost"
+    />
+  </HStack>
+  <VStack spacing={10} mt="xl">
+    <IconButton
+      icon={<Icon name="search1" />}
+      colorScheme="teal"
+      full
+    />
+    <IconButton
+      icon={<Icon name="search1" />}
+      colorScheme="teal"
+      variant="outline"
+      full
+    />
+    <IconButton
+      icon={<Icon name="search1" />}
+      colorScheme="teal"
+      variant="ghost"
+      full
+    />
+  </VStack>
+</Box>`} />
 
 ## Props
 

diff --git a/docs/pages/docs/Components/Touchables/pressable.en-US.mdx b/docs/pages/docs/Components/Touchables/pressable.en-US.mdx
@@ -2,8 +2,7 @@
 searchable: true
 ---
 
-import { ExpoDemo } from '@components/expo-demo';
-
+import { CodeEditor } from '@components/code-editor';
 
 # Pressable
 
@@ -17,9 +16,14 @@ import { Pressable } from 'react-native-ficus-ui';
 
 ## Usage
 
-<div className="mt-2">
-  <ExpoDemo id="@bearstudio/ficus-ui-pressable" />
-</div>
+<CodeEditor code={`<Pressable
+  bg="red.300"
+  p="xl"
+  borderRadius="xl"
+  onPress={() => console.log('Pressed')}
+>
+  <Text>Test</Text>
+</Pressable>`} />
 
 ## Props