Introduction

This is a collection of components, utility functions and config based on react for Virtual Space application

Docs

Storybook S3

Installation vspace-labs

prerequisite

yarn ^v1.22.11
node ^v14.17.6

Local Setup

Follow these steps to get the documentation / playground running on locally:

1. Clone this repository git clone [email protected]:virtualspirit/vspace-labs.git
2. Navigate into the directory with cd vspace-labs
3. Install dependencies with yarn install
4. Start up the documentation/playground locally with yarn storybook

Development Locally

Basically there are several approach to develop component and test in real repo locally something like yarn link yarn workspace github branch and yalc. but we will recomend using yalc because it's closely prod env instead of other options

how to use it?

1. please make sure already install yalc, if you don't have -> https://github.com/wclr/yalc
2. or we can install directly using npm or yarn npm i yalc -g
3. go to the repo that we want to linking in this case we are using vspace-labs -> cd ./vspace-labs
4. then build the code yarn build
5. after build creation finished let's yalc publish
6. going to other repo that we want to linked e.g cd ./vspace-web-chat
7. then run yalc add @virtualspirit/vspace-labs

wathing the new changes?

• we can use --watch to watch new change from vspace-lab, but I'm not recomen because it will face issue memory usage :(
• or we can back to iteration above from point 3 until 6
• then for the next process is yalc update @virtualspirit/vspace-labs

Github

PR Process

for most PRs, remember always:

• merge to develop, never to main,
• mention a ticket number (if there's no relevant ticket number, please create a new one),
• add the label "Ready for review" (use Work in progress) until you're ready to have it reviewed,
• make sure every comment was resolved and every reviewer approved the PR before merging,
• merge using the Squash option

for deployment:

• create a PR to main branch
• all of iteration automatically by semantic-release-bot just waiting response few minutes
• it will triggered label releases each PR was merged and generate notes release on tag page github

Git Flow Usage

  // pull from develop branch
  git pull origin develop --ff
  // create a new branch
  git checkout -b feature/new-feature develop

All Pull Request needed a review at least one person before merged.

Add new icon

here's the step to add our icon

1. Install s3 client to upload (Cyberduck)
2. Login using our cred, please reach out admin in this project to get credential
3. Then the folder will show up when successfully to login
4. Select /virtualspirit-frontend bucket
5. Upload image icon with drag n drop on /virtualspirit-frontend/icons/**

Add new color

here's the step to add new color code

1. Put the color code into /src/styles/colors.scss
2. Add new color code with variable scss e.g $systemText: #1234FC
3. Then generate the color run yarn extract:colors
4. Ensure the result has been generated into file /constants/colors.ts

Conventions

Commits

All commit messages should conform to the conventional commit format and should use following syntax: type(scope): subject. While the type is mandatory, the scope is optional. Examples:

docs: add README.md

fix(Header): fix padding issue

feat: create Home view

Main types are fix and feat, however it is possible to also use:

• chore
• docs
• style
• refactor
• perf
• test

Components vs Views

To decide which one is components and views, you can differentiate them with how they works. If you have a simple component that just work without any state you can put it in components folder -- example: Button, Label, Field, etc. But if you have a big component that contains logic or specific to some page view and states, it's better to put it inside views folder --example Timelinee

Constants

All the action types should be store in constants to prevent type in the code editor

Import

We use relative import here for simplicity - more detail it shown on .babelrc

Maintainer

MIT © tomibudis