dsaas-react-native-demo v1.1.1

Índice

1. Introduction
2. Structure
3. Installation
4. Components and Usage
5. Assets
6. Tokens

Introduction

We present the demonstration of the Design System as a Service, where we implemented significant structural changes to enhance the understanding of the library. Traditionally, the elements of a design system are distributed across three distinct repositories. In this demonstration, we chose to consolidate assets, tokens, and components into a single location, providing a comprehensive and simplified view of the entire system. Additionally, we have reduced the library's content, preserving only the essential elements, to facilitate its usage and comprehension.

Structure

Installation

Here are some essential settings to ensure the proper functioning of this library:

Run the following command:

npm install

Then run the following command:

cd ios/ && pod install && cd ..

Configure Babel by incorporating the following setting:

plugins: [
    'react-native-reanimated/plugin',
],

Components

The components section is where you will find the components, utilities, hooks, and configurations. Here's an overview of each part:

• Components: This is the self-explanatory part of the system, where the components are stored. They are organized so that there can be multiple components within a single component. We use Styled Components for styling, making use of their theme logic. You can find more information about this here.

• Utils: Here are the functions we use in building the components.

• Hooks: Here you'll find our provider and the layer of tokens around the application. The provider holds the theme that our application uses, and this theme contains our tokens.

• Config: This is where we create the theme object, mirroring the token library in the application.

Basically, to use all this in practice, all you need to do is wrap your application with the provider, and you can already use the components like this:

import React from 'react';
import {DsButton, DsProvider} from '@meiuca/dsaas-react-native-core';

function App() {
  return (
    <DsProvider theme="matriz_default">
            <DsButton label="TEST" onPress={() => {}} icon={'BackLine'} />   {' '}
    </DsProvider>
  );
}

export default App;

This approach allows you to take full advantage of the design system's functionality with ease in your application.

Assets

The project is organized into three distinct layers: assets, tokens, and components. In the assets layer, you'll find the media resources that will be used in projects consuming this design system. Within this layer, it's common to find three subcategories:

• Brands: This is where the logos of the brands that use this design system reside.
• Flags: This section houses the flags of credit cards.
• Icons: All other icons that will be used in the project are located here.

Tokens

In the tokens layer, we find an architecture that is divided into two main categories: globals and aliases. The aliases, in turn, are subdivided into dark and light. In the globals, we find the base values that serve as a foundation for the alias tokens, as well as generic values such as spacing and shape, which are tokens related to size and space. In the aliases, we find tokens intended for specific situations. For example, Color.negative.bgColor represents the negative background color, while Color.selected.onLabelColor is the color that the label assumes when it is inside a component with the selected color.

The directory structure is organized as follows:

├── tokens

│   ├── brands

│       ├── dark or light

		- Colors (Color tokens)
		- Default (Default tokens, for example: border-radius-default)
		- Mixins (Token sets)

│   ├── globals
		- Colors (Color tokens)
		- Shapes (Size tokens)
		- Motions (Animation tokens)
		- Typograph (Typography-related tokens)