Sarcelle 🚀
Introduction
Sarcelle is the design system for the Rise mobile application.
Installation
>$ yarn install sarcelleComponents
Button
This is the generic button component provided by Sarcelle.
- Example usage
import { Button } from 'sarcelle/src/components';
const MyButtonComponent = () => {
const handleSubmit = () => {
console.log('I have been pressed');
};
return (
<Button onPress={handleSubmit} variant="primary" isLoading={false} disabled={false}>
This is a sign in button
</Button>
);
};Props
The Button component inherits all of the props of a TouchableOpacity, with the addition of the following.
| Prop name | Type | Required |
|---|---|---|
| variant | Variant |
Yes |
| children | React.ReactNode |
Yes |
| isLoading | boolean |
Yes |
| textStyle | StyleProp<ViewStyle> |
No |
| iconPosition | left - right |
No |
| containerStyle | StyleProp<ViewStyle> |
No |
| Icon | React.ComponentType |
Yes |
Note: Possible values for the Variant type are primary, secondary, transparent, danger
Text
This is the text component provided by Sarcelle.
- Example usage
import { Text } from 'sarcelle/src/components';
const MyComponent = () => {
return (
<Text variant="light" type="Header" fontSize={40}>
This is a Header Text
</Text>
);
};Props
The Text component inherits all of the props of a Text component from React Native, with the addition of the following.
| Prop name | Type | Required |
|---|---|---|
| children | React.ReactNode |
Yes |
| type | TextT |
Yes |
| textStyle | TextStyle |
No |
Checkbox
This is the checkbox component provided by Sarcelle.
- Example usage
import { Checkbox } from 'sarcelle/src/components';
import { View } from 'react-native';
import React from 'react';
const MyComponent = () => {
const [options, setOptions] = React.useState([]);
const onPress = (selectedOption) => {
const updatedOptions = options.includes(option)
? options.filter((option) => option !== selectedOption)
: options.concat(selectedOption);
setOptions(updatedOptions);
};
return (
<View>
<Checkbox checked={options.includes('first')} onPress={() => onPress('first')}>
First
</Checkbox>
<Checkbox checked={options.includes('second')} onPress={() => onPress('second')}>
Second
</Checkbox>
</View>
);
};Props
The Checkbox component inherits all of the props of a TouchableOpacity component from React Native, with the addition of the following.
| Prop name | Type | Required |
|---|---|---|
| checked | boolean |
Yes |
| children | React.ReactNode |
Yes |
| textStyle | TextStyle |
No |
| isClickable | boolean |
No |
| checkmarkColor | string |
No |
| containerStyle | StyleProp<ViewStyle> |
No |
| checkboxStyle | StyleProp<ViewStyle> |
No |
RadioButton
This is the RadioButton component provided by Sarcelle.
- Example usage
import { RadioButton } from 'sarcelle/src/components';
import { View } from 'react-native';
import React from 'react';
const MyComponent = () => {
const [options, setOptions] = React.useState();
const onPress = (selectedOption) => {
setOptions(selectedOption);
};
return (
<View>
<RadioButton checked={options === 'first'} onPress={() => onPress('first')}>
First option
</RadioButton>
<RadioButton checked={options === 'second'} onPress={() => onPress('second')}>
Second option
</RadioButton>
</View>
);
};Props
The RadioButton component inherits all of the props of a TouchableOpacity component from React Native, with the addition of the following.
| Prop name | Type | Required |
|---|---|---|
| checked | boolean |
Yes |
| text | string |
Yes |
| children | React.ReactNode |
Yes |
| textStyle | TextStyle |
No |
| containerStyle | StyleProp<ViewStyle> |
No |
| radioButtonSize | number |
No |
Retry
This is the Retry component provided by Sarcelle.
- Example usage
import { Retry } from 'sarcelle/src/components';
import { View } from 'react-native';
const MyComponent = () => {
const onRetry = () => {
console.log('Triggered a retry');
};
return (
<View>
<Retry text="Failed to complete your request" onRetry={onRetry} />
</View>
);
};Props
| Prop name | Type | Required |
|---|---|---|
| text | string |
Yes |
| onRetry | function |
Yes |
Input
This is the Input component provided by Sarcelle.
- Example usage
import { Input } from 'sarcelle/src/components';
import { View } from 'react-native';
import React from 'react';
const MyComponent = () => {
const [inputValue, setValue] = React.useState('');
const onChange = (value) => {
setValue(value);
};
return (
<View>
<Input value={inputValue} onChangeText={onChange} label="First Name" placeholder="First Name (e.g Kolade)" />
</View>
);
};Props
The Input component inherits all of the props of a TextInput component from React Native, with the addition of the following.
| Prop name | Type | Required |
|---|---|---|
| inputType | regular, phone, icon-input |
Yes |
| label | string |
Yes |
| hasLabel | boolean |
No |
| leftText | string |
No |
| Icon | React.ComponentType |
No |
| handleBlur | function |
No |
| hasPlaceholder | boolean |
No |
| hasError | boolean |
No |
| countryCallingCode | string |
No |
Header
This is the Header component provided by Sarcelle.
- Example usage
import { Header } from 'sarcelle/src/components';
import { View } from 'react-native';
import React from 'react';
const MyComponent = () => {
return (
<View>
<Header
navigation={navigation}
LeftComponent={{ text: 'Left Text', style: { marginTop: 5 } }}
RightComponent={() => <CustomComponent />}
CenterComponent={{ text: 'Center Component' }}
/>
</View>
);
};Props
| Prop name | Type | Required |
|---|---|---|
| navigation | any |
Yes |
| type | no-icon, with-back-icon-only |
Yes |
| LeftComponent | React.ComponentType, ComponentShape |
No |
| RightComponent | React.ComponentType, ComponentShape |
No |
| CenterComponent | React.ComponentType, ComponentShape |
No |
| containerStyle | StyleView<ViewProp> |
No |
| barStyle | default, light-content, dark-content |
No |
| backgroundColor | string |
No |
Tabs
This is the Tabs component provided by Sarcelle.
- Example usage
import { Tabs } from 'sarcelle/src/components';
import { View } from 'react-native';
import React from 'react';
import {FirstComponent, SecondComponent} from './someDir'
const MyComponent = () => {
return (
<View>
<Tabs
routes={[{
key: 'first', title: 'First',
key: 'second', title:'Second'
}]}
components={[{
key: 'first',
component: <FirstComponent />
}, {
key: 'second',
component: <SecondComponent />
}]}
/>
</View>
);
};Props
| Prop name | Type | Required |
|---|---|---|
| routes | RouteObject |
Yes |
| components | RouteComponent |
Yes |
Switch
This is the Switch component provided by Sarcelle.
- Example usage
import { Switch } from 'sarcelle/src/components';
import { View } from 'react-native';
import React from 'react';
const MyComponent = () => {
return (
<View>
<Switch
value={false}
onValueChange={() => console.log('switch toggled')}
/>
</View>
);
};Props
| Prop name | Type | Required |
|---|---|---|
| value | boolean |
Yes |
| onValueChange | function |
Yes |
| containerStyle | StyleProp<ViewStyle> |
No |
| disabled | boolean |
No |
Development
This project is still in active development stage. The end goal is to have a design system where designers and developers can easily collaborate. The notion of Component Driven Development (CDD) should make developing and maintaining re-usable components easier. Also, it will clean up the current project. PRs and contributions are welcomed!