Welcome

Welcome to Firs Factory React's Components Library, this library have customized designs made specifically for First Factory.

This component library can be found at Bitbucket > First Factory > Core > component-library-react.

If you want to check the versioning of this npm package, please check this link.

Instalation

The instalation process is quite simple, just open the project and on the terminal go to the directory where the package.json and /node_modules directory are located.

Then execute the following command:

npm i ff-component-library-react

This will install this package on your project [installation might take a few seconds].

Implementation

At the moment of implementing this library's components in your project notice to make the imports as following:

import {Component} from 'ff-component-library-react';

Please take into account that Component make reference to one of the following ones:

AlertNote, BasicDatePicker, KeyboardDatePicker, StaticDatePicker, TextDatePicker, YearMonthDatePicker, YearDatePicker, AppHeader, AutoCheckBox, AvatarProfile, BarChart, CheckBox, Button, TableWithCheckBox, Chip, TableCollapsible, ComboBox, CopyToClipboardModal, CustomizedHook, DonutChart, FixedTab, Icon, Input, LineChart, ButtonsModal, Peer, PieChart, Profile, RadioButton, Modal, Table, Searchbar, Slider, Snackbar, Stepper, TextField, Toggle, ViewImagesModal, DeductionTable, LeftNavBar, DragAndDropModal

Usage

The way this component should be called at your jsx or tsx files should be as following:

<Component {...args}/>

Please remember that Component make reference to one of the previous listed components.

But. also remember that {...args} is a reference of the different props that are need for the component to work propertly, some of them might be optional, so pay attention to the interfaces

Example:

import React from 'react';
import './App.css';
import { AlertNote} from 'ff-component-library-react';

function App() {
 return (
  <AlertNote
   initialMessage={"You are"}
   warningMessage={"missing last week's hour report."}
   finalMessage={"Please take a look on your Timesheet"}
  />
 );
}

export default App;