EMBIBE UI COMPONENTS

It's common UI components based on:

React

Styled System

Styled Components

TypeScript

Development

Active development and merge requests happen on the development branch.

Pre-requisites

• node > v16
• npm > 7

Steps to startup a local development environment

// Clone this repository
https://bitbucket.org/microservicesembibe/component-library/src/development/

// Make sure to use development branch
git checkout development

// Update npm to the latest version
npm install -g npm

// Install all project dependencies
npm install

// Starts the components libraries and watches for changes in storybook
npm run storybook

Git Workflow

After receiving bug/feature from jira board you need to do these steps:

Create new branch based on development branch with name related to jira ticket

• if it's feature, branch name should called like feature/{number-of-jira-ticket}_short_ticket_description

• if it's bug, branch name should called like bug/{number-of-jira-ticket}_short_ticket_description

• For example for jira ticket SEOT-2

• You need to create branch like feature/SEOT-2_init_project

Project Structure

Our project structure based on Atomic design

Single responsibility code splitting

With the purpose of keeping individual files short, concise and easily testable we want to ensure each file is entrusted with a particular responsibility. Files that are too large or are doing too much should be split up into smaller files. We understand that this is a very subjective requirement and as such is something that should be kept in mind during the testing / code review process.

Sample directory structure

A complete src directory structure would look something like this:

|  |––atoms/ // small components
|  | | ––[Name]/
|  | | | **tests**/ unit test
|  | | | | ––[Name].test.tsx // unit tests
|  | | | ––[Name].tsx // Component
|  | | | ––types.ts // types
|  | | | ––styled.ts // styled-components styles
|  | | | ––[Name].story.tsx // storybook story
|  | | | ––index.ts
|  | | ––index.ts // export all the atoms from the atoms folder
|  |––molecules/ // small logical components that contain atoms
|  | | ––[Name]/
|  | | | **tests**/ unit tests
|  | | | | ––[Name].test.tsx // unit test
|  | | | ––[Name].tsx // atom implementation
|  | | | ––types.ts // types
|  | | | ––styled.ts // styled-components styles
|  | | | ––[Name].tsx // storybook
|  | | | ––index.ts
|  | | ––index.ts // export all the molecules from the molecules folder
|  |––organisms/ // big components that contains molecules and atoms, can contain some local logic
|  | | ––[Name]/
|  | | | **tests**/ unit tests
|  | | | | ––[Name].test.tsx // unit test
|  | | | ––[Name].tsx // Component
|  | | | ––types.ts // types
|  | | | ––styled.ts // styled-components
|  | | | ––[Name].tsx // storybook story
|  | | | ––index.ts
|  | | ––index.ts // export all the molecules from the molecules folder
|  |––particles/ // logical components, hooks, styles that we need across the application
|  | | ––hooks/ // optional, shared hooks between atoms, molecules, organisms
|  | |––constants/ // shared constants between atoms, molecules, organisms
|  | |––interfaces/ // Typescript interfaces for atoms, molecules, organisms
|  | |––index.ts
|  |––index.ts // export all the components (atoms, molecules, organisms)
|––README.md
|––.gitignore
|––package.json
|––tsconfig.json

Testing

We are using Jest as testing framework, and React Testing Library

// Runs tests for all packages
npm run test

Linting & Code Quality

Linting is currently configured at the root level, and is uniformly applied to all packages. We are using a mix of Husky, ESlint and Prettier tools to automatically format and style the submitted code.

// Runs `eslint src` on all packages
npm run lint

Building

// Builds all packages
npm run build