sarcelle v1.0.6

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.

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.

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.

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.

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

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.

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

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

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

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!