sethor-library v1.0.0

Library Frontend Sethor

Welcome to the Sethor Library!

This is Sethor's private library, which houses a collection of components, icons, images and other essential resources used in our applications. Developed with the purpose of centralizing and sharing common elements between projects, the Sethor Library makes it easy to create and maintain consistent experiences across all of our applications.

Table of contents

• Featured Content
• Requirements
• Getting Started
• Contribution to Sethor Library
• Pull Contribution Request

Featured Content

Reusable Components: Find a variety of ready-to-use components designed to improve consistency and efficiency in user interface development.

Custom Icons: Explore our collection of exclusive icons that complement and enrich the visual aesthetics of our applications.

Graphic Resources: Access images and graphic resources that enhance the visual presentation of our applications.

Storybook: This project is made with Storybook to preview and document the created elements, in the official repository they have some examples of how to document the components

Requirements

• Have yalc installed globally npm install -g yalc

Getting Started

To incorporate the Sethor Library into a project, follow the installation and link instructions detailed below.

• Clone the project

git clone https://github.com/Sethor-W/Frontend-Library.git

• Install dependencies

npm install

IMPORTANT: Before building the project you must make sure that these lines are as follows.

    // tsconfig.json
    
    //"extends": "expo/tsconfig.base"

    // package.json
    "main": "dist/index.js",

• Build the project and publish it to the local store

npm run build

• Open the project where it will be used and add the library

yalc add sethor-library

Contribution to Sethor Library

Below are some guidelines on how you can add or modify items to this private library.

Project Structure

The library follows an organized structure to maintain consistency and facilitate development. Here are some key folders you can contribute to:

• src/components/: Contains reusable components.
• src/icons/: Stores custom icons.
• src/images/: Contains graphic resources and images.
• If you want to add any element outside of these folders please follow the same structure

Para poder correr el proyecto tiene 2 opciones una usando expo y otra usando Storybook

• Expo: Dependiendo del entorno debe ejecutar los siguientes comandos
  • npm start
  • npm run android
  • npm run ios
  • npm run web

• Storybook: Dependiendo del entorno debe ejecutar los siguientes comandos

  • npm run storybook
  • npm run storybook:android
  • npm run storybook:ios
  • npm run storybook:web

• Note: To run the project you must make sure that these lines are correct and active.

      // tsconfig.json
      "extends": "expo/tsconfig.base"

      // package.json
        "main": "node_modules/expo/AppEntry.js",

Add or Modify Components/Elements

1. Adding a New Element:

   • If you want to add a new item, create a new file in the src/[folder]/ folder.

   • Import and export the element in src/[folder]/index.tsx.

     // src/[folder]/index.tsx
     export { default as NewElement } from './NewElement';

   • Make sure you are importing and exporting the root file of all src/index.tsx elements.

        // src/index.tsx
        export * from './[folder]';

2. Modifying an Existing Element:

   • If you are modifying an existing component, be sure to perform extensive testing.
   • Updates documentation and adds details about changes made.

Example

1. Create a New Component:

   // src/components/Button/index.tsx
   import React from 'react'
   import { Text, TouchableHighlight } from 'react-native'
   
   interface ButtonProps {
       title: string;
       onPress: ()=>void,
   }
   
   export default function index(props:ButtonProps) {
       return (
           <TouchableHighlight onPress={props.onPress} style={{backgroundColor: "#fff"}}>
               <Text>{props.title}</Text>
           </TouchableHighlight>
       )
   }

2. Add the new created component to the import and export:

   // src/components/index.tsx
   export { default as Button } from './Button';

3. Make sure the components folder is being imported and exported:

   // src/index.tsx
   export * from './components';

Pull Contribution Request

All contributions must be made in the dev branch of each contributor, not in the develop branch or main or master.

1. Make sure you have a dev branch to contribute to.
2. Make the necessary changes and tests.
3. Make a commit with a descriptive message: git commit -m "Add/Modify/Fix [component name/icon]".
4. Push your branch: git push my-contribution.
5. Open a Pull Request to the develop branch explaining your changes.