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

1. Add the data from your git repository

2. 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

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:

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:

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

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.