# Custom React libraries

## Overview

Uncodie will allow the creation of React component libraries (and other frameworks later) through a GIT repository that is easily integrated into new advanced projects regardless of its backend.

## Setup

1. When creating a project, the user chooses component libraries as the type of project

* In Web Application within the configuration section of the project
* When creating a project in the modal within the web app
* In the Uncodie Plugin when creating a new project

2. Add the data from your git repository
3. When compiling, a storybook project is generated, dependencies are installed, built is done, your git repository is updated and a project in storybook development is hosted (this must be hosted only temporarily))

## Features

### Modularization

The components can be imported as modules in another project

### Preview

You can preview the components in the "Code Inspector" section of the uncodie App

### Usage 

The components can be used in any React project as any other React component

```
import MY_COMPONENT

<MY_COMPONENT... 
```

### Version Control

&#x20;The library versions can be seen as any other project git in your repository or uncodie "Version Control" section in the app

### Continuous Integration

The generated code can be used with **CI** without requiring additional modifications to the code generated by Uncodie or in your project

### Clean code

The system will generate code as usable and readable as possible to comply with the readability standards of international equipment

### Storybook

The system will generate folders for each component with their corresponding variants for better organization

### Automatic shutdown

When compiling a component library project, the hosting must be automatically turned off 60 minutes after its last compilation

## Component API

Components must expose all their IDE functionalities, such as properties, functions, events, states, variants, and styles, for easy use in projects

### States and Local Context

To bind your Figma component props and values use data binding and local variables in the Uncodie Plugin, for more information see:

{% embed url="<https://docs.uncodie.com/1.0/basic-concepts/variables>" %}

Once you have added some props and bindings in your component you can use react states:

```
import MY_COMPONENT

var title = app.title
var list = data.users_list

<MY_COMPONENT state={title:title, list:list}> ...
```

You can use repeat componet to display dynamic data as arrays, for more information see:

{% embed url="<https://docs.uncodie.com/1.0/basic-concepts/components>" %}

### Props

Any prop of the children can be modified, overwriting its value from the instance, for example:

```
import MY_COMPONENT

<MY_COMPONENT title={title} ...
```

You must list the properties of the component and publish them in an information document in the Code Inspector section.

### Functions Access

```
import MY_COMPONENT

MyComponnet.RefeshData()
```

### Styles Access

You can delcare any additional style to your component using the "**style**" object in your component and component chidlren´s. Simply send a JSON conataining the key value props for any W3C CSS value and your component will handle the rest.

```
import MY_COMPONENT

var background = "blue";

<MY_COMPONENT style={"background-color": background} ...
```

When changing the style property, you can change the style of the parent component or children´s using the same logic.

### Variants Access and Settings

Variant name is the component variant in figma

```
import MY_COMPONENT

//example using variants for theme handling
var current_variant = theme.color

<MY_COMPONENT variant=current_variant ...
```

You must be able to change the variant of the component through the variant attribute

### Access to native events

You can access to any of the React and Javascript native events in your component or component children's

```
import MY_COMPONENT

<MY_COMPONENT onClick={()=>{
//my code
}}
```

### Access to external component events

```
import MY_COMPONENT

<MY_COMPONENT onSubmitSuccess={(e)=>{ }} ...
```

In case the component is configured as an external component, you must be able to list and access the events of the same

### Comonent children´s access

```
import MY_COMPONENT

<MY_COMPONENT>
    ....
</MY_COMPONENT>
```

##

## Use Cases

### GIT Setup

The system will detect when the user does not have GIT and take him to the tutorial, explaining its relevance and the configuration section

### Generate Component Library

Create a git library of my components  in figma and uncodie and use them with continuous integration in my main code project

#### 1. Compile figma file

As a git component library with a build of the library so that it can be used as a component

#### 2. Library commit and push

&#x20;Each time it is compiled, a new version of the components must be generated in git

#### 3. Library preview

You must be able to access the hosted storybook of the project

1. Compile your project
2. Navigate to the domain of the project where the storybook of thecomponentes

```
project_name.uncodie.com
```

### Integrate components into a React project already in progress

1. Git Setup
2. Compile library in Figma
3. Integrate your git repository in your project as a new dependency
4. Import your components
5. Run your project

### Visualize behaviors of components

1. Setup Library
2. Configure component by adding actions, etc..
3. Compile library
4. Navigate to the domain of the project where the storybook of the components will be displayed
5. Visualize APIs, modifying props, states, functions, seeing the responses generated by the component, etc..

### Project Start/Stop

1. Navigate to your project
2. Click on turn off/on

## Known Limitations

### Gitlab

The CLI only works with gitalb at the moment

## Considerations

### Git Setup

A Gitlab account is required to export and import the generated library using your own account, Uncodie will provide a general git, the best practice is to setup your own.