docs: add more usage examples & update theme guides (react-native-ele…

…ments#3723)
haeniya · Dec 28, 2022 · 54a14dc · 54a14dc
1 parent f5f5812
commit 54a14dc
Show file tree

Hide file tree

Showing 24 changed files with 733 additions and 301 deletions.
diff --git a/packages/base/src/Button/Button.usage.tsx b/packages/base/src/Button/Button.usage.tsx
@@ -11,15 +11,19 @@ meta({
   name: 'Button',
 });
 
-usage('Variants', '', () => (
-  <Stack row align="center" spacing={4}>
-    <Button title="Solid" />
-    <Button title="Outline" type="outline" />
-    <Button title="Clear" type="clear" />
-  </Stack>
-));
+usage(
+  'Variants',
+  'There are solid button, outline button and clear button types',
+  () => (
+    <Stack row align="center" spacing={4}>
+      <Button title="Solid" />
+      <Button title="Outline" type="outline" />
+      <Button title="Clear" type="clear" />
+    </Stack>
+  )
+);
 
-usage('Size', '', () => (
+usage('Size', 'Button can be small medium or large', () => (
   <Stack row align="center" spacing={4}>
     <Button size="sm">Small</Button>
     <Button size="md">Medium</Button>
@@ -36,6 +40,14 @@ usage('Colors', '', () => (
   </Stack>
 ));
 
+usage('Disabled', '', () => (
+  <Stack row align="center" spacing={4}>
+    <Button title="Solid" disabled />
+    <Button title="Outline" type="outline" disabled />
+    <Button title="Clear" type="clear" disabled />
+  </Stack>
+));
+
 usage('Linear Gradient', '', (LinearGradient) => (
   <Button
     ViewComponent={LinearGradient} // Don't forget this!
@@ -49,20 +61,17 @@ usage('Linear Gradient', '', (LinearGradient) => (
   </Button>
 ));
 
-usage('Button with icon', '', () => (
-  <Button type="solid">
-    <Icon name="home" color="white" />
-    Icon
-  </Button>
-));
-
-usage('Button with right icon', '', () => (
-  <Button type="solid">
-    Icon
-    <Icon name="home" color="white" />
-  </Button>
-));
+usage(
+  'Icon Button',
+  'Can contain an Icon by setting the icon prop or placing an Icon component within the Button.',
+  () => (
+    <Button radius={'sm'} type="solid">
+      Save
+      <Icon name="save" color="white" />
+    </Button>
+  )
+);
 
-usage('Button with loading spinner', '', () => (
+usage('Loading spinner', '', () => (
   <Button title="Solid" type="solid" loading />
 ));
diff --git a/packages/base/src/ButtonGroup/ButtonGroup.usage.tsx b/packages/base/src/ButtonGroup/ButtonGroup.usage.tsx
@@ -0,0 +1,54 @@
+import { info, usage } from '@rneui/doc-gen';
+import React from 'react';
+import { ButtonGroup, Icon } from '..';
+
+info(
+  'ButtonGroup is a linear set of segments, each of which function as a button that can display a different view/or perform a different action.',
+  'Use a ButtonGroup to offer choices that are closely related but mutually exclusive.',
+  'This component inherits [all native TouchableHighlight and TouchableOpacity props that come with React Native TouchableHighlight or TouchableOpacity elements](https://reactnative.dev/docs/touchablehighlight.html).'
+);
+
+usage(
+  'Icon',
+  '',
+  () =>
+    function () {
+      const [selectedIndex, setSelectedIndex] = React.useState(0);
+      return (
+        <ButtonGroup
+          buttonStyle={{ padding: 10 }}
+          selectedButtonStyle={{ backgroundColor: '#e2e2e2' }}
+          buttons={[
+            <Icon name="format-align-left" />,
+            <Icon name="format-align-center" />,
+            <Icon name="format-align-right" />,
+          ]}
+          selectedIndex={selectedIndex}
+          onPress={setSelectedIndex}
+        />
+      );
+    }
+);
+
+usage(
+  'Multi Select',
+  '',
+  () =>
+    function () {
+      const [selectedIndex, setSelectedIndex] = React.useState([]);
+      return (
+        <ButtonGroup
+          selectMultiple
+          buttonStyle={{ padding: 10 }}
+          selectedButtonStyle={{ backgroundColor: '#e2e2e2' }}
+          buttons={[
+            <Icon name="format-bold" />,
+            <Icon name="format-italic" />,
+            <Icon name="format-underline" />,
+          ]}
+          selectedIndexes={selectedIndex}
+          onPress={setSelectedIndex}
+        />
+      );
+    }
+);
diff --git a/packages/base/src/CheckBox/CheckBox.usage.tsx b/packages/base/src/CheckBox/CheckBox.usage.tsx
@@ -7,35 +7,107 @@ info(
 );
 
 usage(
-  'Simple CheckBox',
+  'Simple',
   '',
   () =>
-    function CheckBoxComponent() {
-      const [state, setState] = React.useState(false);
-      const toggleCheckbox = () => setState(!state);
+    function () {
+      const [checked, setChecked] = React.useState(true);
+      const toggleCheckbox = () => setChecked(!checked);
       return (
-        <Stack row align="center">
-          <CheckBox checked={state} onPress={toggleCheckbox} />
+        <Stack row align="center" spacing={1}>
+          <CheckBox
+            checked={checked}
+            onPress={toggleCheckbox}
+            // Use ThemeProvider to make change for all checkbox
+            iconType="material-community"
+            checkedIcon="checkbox-marked"
+            checkedColor="red"
+            uncheckedIcon={'checkbox-blank-outline'}
+          />
+          <CheckBox
+            checked={checked}
+            onPress={toggleCheckbox}
+            iconType="material-community"
+            checkedIcon="checkbox-outline"
+            uncheckedIcon={'checkbox-blank-outline'}
+          />
+          <CheckBox
+            checked={false}
+            disabled
+            iconType="material-community"
+            checkedIcon="checkbox-outline"
+            uncheckedIcon={'checkbox-blank-outline'}
+          />
+        </Stack>
+      );
+    }
+);
+
+usage('Label', '', () => (
+  <Stack row align="center" spacing={4}>
+    <CheckBox checked title="Label" />
+    <CheckBox checked disabled title="Label" />
+  </Stack>
+));
+
+usage(
+  'Radio',
+  '',
+  () =>
+    function () {
+      const [selectedIndex, setIndex] = React.useState(0);
+
+      return (
+        <Stack row align="center" spacing={4}>
           <CheckBox
-            checked
+            checked={selectedIndex === 0}
+            onPress={() => setIndex(0)}
             checkedIcon="dot-circle-o"
             uncheckedIcon="circle-o"
-            onPress={toggleCheckbox}
           />
           <CheckBox
-            center
-            checked
-            iconType="material"
-            checkedIcon="clear"
-            uncheckedIcon="add"
+            checked={selectedIndex === 1}
+            onPress={() => setIndex(1)}
+            checkedIcon="dot-circle-o"
+            uncheckedIcon="circle-o"
+          />
+        </Stack>
+      );
+    }
+);
+
+usage('Size', '', () => (
+  <Stack row align="center" spacing={4}>
+    <CheckBox checked size={18} />
+    <CheckBox checked size={24} />
+    <CheckBox checked size={32} />
+  </Stack>
+));
+
+usage(
+  'Custom icon',
+  '',
+  () =>
+    function () {
+      const [checked, setState] = React.useState(true);
+      const toggleCheckbox = () => setState(!checked);
+      return (
+        <Stack row align="center">
+          <CheckBox
+            checked={checked}
+            checkedIcon="heart"
+            uncheckedIcon="heart-o"
             checkedColor="red"
             onPress={toggleCheckbox}
           />
+          <CheckBox
+            checked={checked}
+            checkedIcon="bookmark"
+            uncheckedIcon="bookmark-o"
+            checkedColor="heart"
+            onPress={toggleCheckbox}
+          />
         </Stack>
       );
-    },
-  {
-    showCode: false,
-    live: true,
-  }
+    }
 );
diff --git a/packages/base/src/Text/Text.usage.tsx b/packages/base/src/Text/Text.usage.tsx
@@ -0,0 +1,14 @@
+import { info, usage, Stack } from '@rneui/doc-gen';
+import React from 'react';
+import { Text } from '..';
+
+info('Text displays words and characters of various sizes.');
+
+usage('Icon', '', () => (
+  <Stack>
+    <Text h1>Heading 1</Text>
+    <Text h2>Heading 2</Text>
+    <Text h3>Heading 3</Text>
+    <Text h4>Heading 4</Text>
+  </Stack>
+));
diff --git a/website/docs/component_usage/ButtonGroup.mdx b/website/docs/component_usage/ButtonGroup.mdx
@@ -1,36 +1,5 @@
 <!-- Example of ButtonGroup with React Component as prop input which is not into snack yet -->
 
-### Using components
-
-```js
-constructor () {
-  super()
-  this.state = {
-    selectedIndex: 2
-  }
-  this.updateIndex = this.updateIndex.bind(this)
-}
-updateIndex (selectedIndex) {
-  this.setState({selectedIndex})
-}
-
-const component1 = () => <Text>Hello</Text>
-const component2 = () => <Text>World</Text>
-const component3 = () => <Text>ButtonGroup</Text>
-
-render () {
-  const buttons = [{ element: component1 }, { element: component2 }, { element: component3 }]
-  const { selectedIndex } = this.state
-  return (
-    <ButtonGroup
-      onPress={this.updateIndex}
-      selectedIndex={selectedIndex}
-      buttons={buttons}
-      containerStyle={{height: 100}} />
-  )
-}
-```
-
 ```SnackPlayer name=RNE ButtonGroup
 import React, {useState} from 'react'
 import { ButtonGroup } from '@rneui/themed'

diff --git a/website/docs/component_usage/Text.mdx b/website/docs/component_usage/Text.mdx
@@ -1,7 +1,3 @@
-```tsx live
-<Text h2>Hello World</Text>
-```
-
 ### Using font-weight on android
 
 :::note

diff --git a/website/docs/components/Button.mdx b/website/docs/components/Button.mdx
@@ -39,6 +39,8 @@ Buttons are touchable elements used to interact with the screen and to perform a
 
 ### Variants
 
+There are solid button, outline button and clear button types
+
 ```tsx live
 <Stack row align="center" spacing={4}>
   <Button title="Solid" />
@@ -49,6 +51,8 @@ Buttons are touchable elements used to interact with the screen and to perform a
 
 ### Size
 
+Button can be small medium or large
+
 ```tsx live
 <Stack row align="center" spacing={4}>
   <Button size="sm">Small</Button>
@@ -68,6 +72,16 @@ Buttons are touchable elements used to interact with the screen and to perform a
 </Stack>
 ```
 
+### Disabled
+
+```tsx live
+<Stack row align="center" spacing={4}>
+  <Button title="Solid" disabled />
+  <Button title="Outline" type="outline" disabled />
+  <Button title="Clear" type="clear" disabled />
+</Stack>
+```
+
 ### Linear Gradient
 
 ```tsx live
@@ -83,25 +97,18 @@ Buttons are touchable elements used to interact with the screen and to perform a
 </Button>
 ```
 
-### Button with icon
-
-```tsx live
-<Button type="solid">
-  <Icon name="home" color="white" />
-  Icon
-</Button>
-```
+### Icon Button
 
-### Button with right icon
+Can contain an Icon by setting the icon prop or placing an Icon component within the Button.
 
 ```tsx live
-<Button type="solid">
-  Icon
-  <Icon name="home" color="white" />
+<Button radius={"sm"} type="solid">
+  Save
+  <Icon name="save" color="white" />
 </Button>
 ```
 
-### Button with loading spinner
+### Loading spinner
 
 ```tsx live
 <Button title="Solid" type="solid" loading />