@realpadsoftware/realpad-crm-frontend-lib NPM

1. Installation

1.1. Prerequisites

Access to Git repository
Node 18.16+ installed locally

1.2. Guide

Copy repository

git clone git@bitbucket.org:easycoremedia/realpad-crm-frontend-lib.git

Install dependencies
```
cd realpad-crm-frontend-lib
npm install
```

1.3. IntelliJ configuration

Activate and configure Stylelint

2. Development

Once you install the library, you can roll up your sleeves and get the "stuff" done.

We use multiple tools to simplify the whole process of developing and maintaining the front end. Aside from commonly known git, Bitbucket, and Jira, we use Figma, Storybook, Chromatic, npmjs.

2.1. Tools

2.1.1. Figma

Our designer creates the whole design system in Figma. Any new component or change assigned for development is designed there. Common Figma knowledge is explained in Notion

2.1.2. Storybook

Storybook is an open-source tool included in our library. You can run it with the command npm run storybook. The command runs a local server used for development. You can leverage HMR so any change in the code automatically shows the result in the browser. Check out the basic Storybook + Vuejs tutorial.

2.1.3. Chromatic

Chromatic handles the final UI review, which is considered a must for publishing the changes.

2.1.4. npmjs

We publish and obtain library code using npmjs as a private package registry.

2.2. Folder structure

2.2.1. Overview

.
├── assets
│   ├── components
│   │   └── index.css       # Component styling
│   ├── fonts
│   ├── symbols
│   └── utils
│       └── index.css       # Utility class CSS
├── docs
├── public
└── src
    ├── components          # JS component code
    └── stories             # Storybook stories

2.2.2. Rules

Every SFC component have its own folder e.g.: /src/components/ComponentName/ComponentName.vue
If possible, group related components to a single /src/components/ComponentName folder like ComponentNamte/ComponentNameA.vue and ComponentName/ComponentNameB.vue
If the component needs styling, use corresponding folder e.g.: /assets/components/ComponentName/index.css and load it within /assets/components/index.css
- Do not use SFC <style> tag
Every component style folder will have an index.css file. Imported file names will start with underscore _filename.css

2.3. Process

We have a long living master branch that represents currently built version of library
Use Chromatic UI review for UI review
For code reviews, we leverage Bitbucket pull request