Sarcelle 🚀

Introduction

Sarcelle is the design system for the Rise mobile application.

Installation

>$ yarn install sarcelle

Components

• Button
• Text
• Checkbox
• RadioButton
• Retry
• Input
• Tabs
• Switch

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!