Fakultas Ilmu Komputer UI

Commit cc8c8025 authored by Shafiya Adzhani's avatar Shafiya Adzhani

Merge branch 'technical-documentation' into 'staging'

Technical documentation

See merge request !17
parents 0cee7f48 e8ff7f82
Pipeline #83946 failed with stages
in 7 minutes and 28 seconds
......@@ -56,19 +56,18 @@ build:
paths:
- node_modules/
integration:
image: cypress/browsers:node12.16.2-chrome81-ff75
build-docusaurus:
stage: test-build
script:
- apt-get install xvfb
- npm run cypress:install
- npm run start:gitlab
- npm run cypress:gitlab
cache:
key: dependency
policy: pull
- cd documentation
- npm install
- npm run build-dir
artifacts:
expire_in: 1 hour
paths:
- node_modules/
- documentation/build/
only:
- staging
SonarScanner Dev:
image:
......@@ -115,6 +114,17 @@ deploy-staging:
only:
- staging
deploy-docusaurus:
stage: deploy
script:
- npm install netlify-cli -g --unsafe-perm=true
- cd documentation
- netlify deploy --site $NETLIFY_DOCS --auth $NETLIFY_AUTH_TOKEN --prod
dependencies:
- build-docusaurus
only:
- staging
deploy-master:
stage: deploy
script:
......
{}
\ No newline at end of file
# Dependencies
/node_modules
# Production
/build
# Generated files
.docusaurus
.cache-loader
# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Website
This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
## Installation
```console
yarn install
```
## Local Development
```console
yarn start
```
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
## Build
```console
yarn build
```
This command generates static content into the `build` directory and can be served using any static contents hosting service.
## Deployment
```console
GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
```
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
};
---
slug: hola
title: Hola
author: Gao Wei
author_title: Docusaurus Core Team
author_url: https://github.com/wgao19
author_image_url: https://avatars1.githubusercontent.com/u/2055384?v=4
tags: [hola, docusaurus]
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
---
slug: hello-world
title: Hello
author: Endilie Yacop Sucipto
author_title: Maintainer of Docusaurus
author_url: https://github.com/endiliey
author_image_url: https://avatars1.githubusercontent.com/u/17883920?s=460&v=4
tags: [hello, docusaurus]
---
Welcome to this blog. This blog is created with [**Docusaurus 2**](https://docusaurus.io/).
<!--truncate-->
This is a test post.
A whole bunch of other information.
---
slug: welcome
title: Welcome
author: Yangshun Tay
author_title: Front End Engineer @ Facebook
author_url: https://github.com/yangshun
author_image_url: https://avatars0.githubusercontent.com/u/1315101?s=400&v=4
tags: [facebook, hello, docusaurus]
---
Blog features are powered by the blog plugin. Simply add files to the `blog` directory. It supports tags as well!
Delete the whole directory if you don't want the blog features. As simple as that!
{
"label": "Basic Rule",
"position": 2
}
---
sidebar_position: 3
---
# Directory and File Naming
## Directory Namimg
All directories are written in lowercase, except for directories in components and fonts, they are capitalized at the beginning of the words. Directory names must not contain spaces, but it's allowed to use uderscore as a separator between words for fonts's directories. For the examples: `Card` and `Open_Sans` directory.
## File Naming
All files are written in lowercase, except for files in the components directory and files from React App, they are capitalized at the beginning of the words. The file name must not contain spaces. For the example: `CardProyekBaru.js`
Especially for the test file, it is named accordingly as follows:`[TestedFileName].test.js`
Another rule of the file name, if it contains more than one word, use lowercase in the first word and capitalcase at the beginning of the next word. For the example: `authSlice.js`
\ No newline at end of file
---
sidebar_position: 2
---
# Directory Structure
Here, directory structure of Justika UMKM Legal Platform's at the Frontend Side.
```
📦 justika-umkm-legal-frontend
┣ 📂 cypress
┃ ┗ 📂 fixtures
┃ ┗ 📂 integration
┃ ┗ 📂 plugins
┃ ┗ 📂 support
┣ 📂 public
┣ 📂 src
┃ ┗ 📂 api
┃ ┗ 📂 assets
┃ ┗ 📂 components
┃ ┃ ┗ 📂 Autentikasi
┃ ┃ ┗ 📂 Benefits
┃ ┃ ┗ 📂 Card
┃ ┃ ┗ 📂 Dropdown
┃ ┃ ┗ 📂 Footer
┃ ┃ ┗ 📂 FormIUMK
┃ ┃ ┗ 📂 FormPendirianPT
┃ ┃ ┗ 📂 Modal
┃ ┃ ┗ 📂 Navbar
┃ ┃ ┗ 📂 Registrasi
┃ ┃ ┗ 📂 Stepper
┃ ┃ ┗ 📂 Tab
┃ ┗ 📂 data
┃ ┗ 📂 fonts
┃ ┃ ┗ 📂 Lato
┃ ┃ ┗ 📂 Open_Sans
┃ ┗ 📂 pages
┃ ┗ 📂 store
┃ ┃ ┗ 📂 auth
```
## 📝 Directory Note
* cypress → containing integration test files.
* public → default folder from React App.
* src → containing all files used in development of the website.
* api → containing environment selection file.
* assets → containing assets, such as logos and icons.
* components → containing files as components used in development of the website.
* data → containing data files for website display.
* fonts → containing font family assets.
* pages → containing files as website pages.
* store → containing files that store and maintain authentication sessions.
\ No newline at end of file
---
sidebar_position: 1
---
# Introduction
In this section, we will explain about directories structure, files, and naming
rules.
{
"label": "Button",
"position": 4
}
\ No newline at end of file
---
sidebar_position: 1
---
# Buttons
There are mainly two styles of buttons used throughout the platform. Its length could be adjusted according to needs.
![](https://i.imgur.com/h2MYNgt.png)
```jsx
// blue button
<button className="heading-3 text-white bg-popblue hover:bg-popblue-hover py-2 px-12 rounded-lg">
Button
</button>
// orange button
<button className="heading-3 text-white bg-poporange hover:bg-poporange-hover py-2 px-12 rounded-lg">
Button
</button>
\ No newline at end of file
{
"label": "Color Palette",
"position": 2
}
\ No newline at end of file
---
sidebar_position: 1
---
# Color Palette
export const ColorBlock = ({color}) => (
<span style={{ backgroundColor: color }}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
);
Here, we use the following palette design to maintain color uniformity on Justika UMKM Legal Platform’s. This palette design is available on `tailwind.config.js` and `tailwind.output.css`.
| Color Type | Color | Color Code (Hex) | Usage |
| ----------- | ----- | ---------------- | ----- |
| BG Light Grey |<ColorBlock color="#F9F9F9" />| #F9F9F9 | `<element classname="[option]-lightgrey">` |
| BG Grey | <ColorBlock color="#E6E6E6" /> | #E6E6E6 | `<element classname="bg-grey">` |
| Gray 5 |<ColorBlock color="#E0E0E0" /> | #E0E0E0 | `<element classname="[option]-gray-200">` |
| Grey Shadow | <ColorBlock color="#CCCCCC" /> | #CCCCCC | `<element classname="shadow-lg">` |
| Gray 4 | <ColorBlock color="#BDBDBD" /> | #BDBDBD | `<element classname="[option]-gray-400">` |
| Text Grey | <ColorBlock color="#808080" /> | #808080 | `<element classname="text-grey">` |
| Text Charchoal | <ColorBlock color="#444444" />| #444444 | `<element classname="[option]-charchoal">` |
| Text Black | <ColorBlock color="#000000" /> | #000000 |`<element classname="[option]-black">` |
| BG Soft Blue 200 | <ColorBlock color="#BFDBFE" />| #BFDBFE |`<element classname="[option]-blue-200">` |
| BG Soft Blue | <ColorBlock color="#B9CFEB" /> | #B9CFEB | `<element classname="[option]-blue-100">` |
| BG Soft Blue Hover | <ColorBlock color="#3B82F6" />| #3B82F6 | `<element classname="[option]-blue-50">` |
| Pop Blue | <ColorBlock color="#2B50CB" /> | #2B50CB | `<element classname="[option]-popblue">` |
| Pop Blue Hover |<ColorBlock color="#2B50A0" />| #2B50A0 | `<element classname="[option]-popblue-hover">` |
| BG Dark Blue | <ColorBlock color="#122060" /> | #122060 |`<element classname="[option]-darkblue">` |
| BG Soft Gold | <ColorBlock color="#FFF1D7" />| #FFF1D7 | `<element classname="[option]-yellow-100">` |
| Yellow |<ColorBlock color="#F2C94C" />| #F2C94C | `<element classname="[option]-yellow-400">` |
| Pop Yellow |<ColorBlock color="#F4C916" /> | #F4C916 | `<element classname="[option]-popyellow">` |
| Pop Orange | <ColorBlock color="#F55D25" /> | #F55D25 | `<element classname="[option]-poporange">` |
| Pop Orange Hover |<ColorBlock color="#D75D25" />| #D75D25 | `<element classname="[option]-poporange-hover">` |
| Pink | <ColorBlock color="#FCE7F3" /> | #FCE7F3 | `<element classname="[option]-pink-100">` |
| Pop Red | <ColorBlock color="#EA0420" />| #EA0420 | `<element classname="[option]-popred">` |
| BG white | <ColorBlock color="#FFFFFF" />| #FFFFFF | `<element classname="[option]-white">` |
You can replace `[option]` by `bg`, `text`, `border`, etc. according to `tailwind.output.css`.
\ No newline at end of file
{
"label": "Components",
"position": 4
}
---
sidebar_position: 3
---
# Benefits
Implemented in the Homepage, this component aims to convince users about the credibility of services.
#### Import
```jsx
import Benefits from '../components/Benefits/Benefits'
```
#### Usage
![](https://i.imgur.com/A8sBLhd.png)
```jsx
{dataBenefits.map((value, index) => (
<Benefits
key={index}
index={index}
image={value.image}
title={value.title}
text={value.text}
/>
))}
```
\ No newline at end of file
---
sidebar_position: 1
---
# Card
## Menu Card
This component consists of 3 cards. Each card contains an explanation about main features of the website, there are 'Konsultasi', 'IUMK', and 'Pendirian PT'. You will find this component in the Homepage.
#### Import
```jsx
import Card from '../components/Card/Card'
```
#### Usage
![](https://i.imgur.com/N1I6Ui1.png)
```jsx
{data.map((value, index) => (
<Card
key={index}
index={index}
image={value.image}
title={value.title}
text={value.text}
url={value.url}
/>
))}
```
## New Project Card
This component acts as a quick access to 'IUMK' and 'Pendirian PT' feature from the ‘Riwayat’ page.
#### Import
```jsx
import CardProyekBaru from '../components/Card/CardProyekBaru'
```
#### Usage
![](https://i.imgur.com/zvB0Oqz.png)
```jsx
<CardProyekBaru />
```
## Pesanan Card
This component contains information about the history of service orders that have been made by the user. This component is implemented in the 'Riwayat' page.
#### Import
``` jsx
import CardPesanan from '../components/Card/CardPesanan'
```
#### Usage
![](https://i.imgur.com/srqis3w.png)
```jsx
{data?.length
? data.map((value, index) => (
<CardPesanan
index={index}
key={index}
kode={value.id}
type={value.type}
nama={value.nama_usaha}
harga="8.500.000"
waktu="19"
status={value.status}
/>
))
: ''}
```
\ No newline at end of file
---
sidebar_position: 7
---
# Dropdown
## Employee Dropdown
The dropdown you see in the 'Jumlah Karyawan' input inside 'IUMK' and 'Pendirian PT' forms.
##### Import
```jsx
import EmployeeDropdown from '../Dropdown/EmployeeDropdown'
```
##### Usage
![](https://i.imgur.com/NXgmyPh.png)
```jsx
<EmployeeDropdown
setEmployeeData={setEmployeeData}
defaultValue={data.karyawan}
dataTestId="form-iumk-2-dropdown"
/>
```
## Service Dropdown
This is the dropdown that lists all the available services from navbar.
##### Import
```jsx
import ServiceDropdown from '../Dropdown/ServiceDropdown'
```
##### Usage
![](https://i.imgur.com/DwH8ors.png)
```jsx
<ServiceDropdown dataTest="service-dropdown" />
```
---
📝 `dataTest` in ServiceDropdown has the same use as `dataTestId` in EmployeeDropdown.
---
---
sidebar_position: 10
---
# Extras
## Toast Bar
This element is useful to give system feedback to the users using the library [react-hot-toast](https://react-hot-toast.com/).
#### Import
```jsx
import toast, {Toaster} from 'react-hot-toast'
```
#### Success
![](https://i.imgur.com/xTmjrjn.png)
```jsx
// success toast bar
const Page = () => {
toast.success('Successful!')
...
return (
...
<Toaster
toastOptions={{
icon: '',
style: {
background: '#2B50CB',
borderRadius: '0',
padding: '21px',
color: 'white',
margin: '0',
width: '100vw',
fontFamily: 'Lato',
fontWeight: '700',
},
}}
/>
...
)
}
```
#### Error
![](https://i.imgur.com/AMImFgF.png)
```jsx
// error toast bar
const Page = () => {
toast.error('Oops!')
...
return (
...
<Toaster
toastOptions={{
icon: '',
style: {
background: '#FF3333',
borderRadius: '0',
padding: '21px',
color: 'white',
margin: '0',
width: '100vw',
fontFamily: 'Lato',
fontWeight: '700',
},
}}
/>
...
)
}
```
\ No newline at end of file
---
sidebar_position: 4
---
# Footer
Implemented in the Homepage, this component contains information about Justika Customer Services.
#### Import
```jsx
import Footer from '../components/Footer/Footer'
```
#### Usage
![](https://i.imgur.com/2hOocic.png)
```jsx
<Footer />
```
\ No newline at end of file
---
sidebar_position: 5
---
# Form
## IUMK & Pendirian PT
This component is used to show up the forms needed in the 'IUMK' and 'Pendirian PT' feature. It's divided into 3 parts corresponding to each of the steps in the process.
##### Imports
```jsx
import FormIUMK1 from '../components/FormIUMK/FormIUMK1'
import FormIUMK2 from '../components/FormIUMK/FormIUMK2'
import FormIUMK3 from '../components/FormIUMK/FormIUMK3'
```
##### Usage
```jsx
// Part 1
<FormIUMK1
register={register}
errors={errors}
handleSubmit={handleSubmit}
onSubmit={onSubmit}
data={data}
currentPage={pageNumber}
setCurrentPage={setPageNumber}
setValue={setValue}
/>
// Part 2
<FormIUMK2
register={register}
errors={errors}
handleSubmit={handleSubmit}
onSubmit={onSubmit}
setEmployeeData={setEmployeeData}
data={data}
setValue={setValue}
/>
// Part 3
<FormIUMK3
data={data}
konstan={konstan}
onSubmit={onSubmit}
handleSubmit={handleSubmit}
setValue={setValue}
/>
```
\ No newline at end of file
---
sidebar_position: 9
---
# Modal
This is the modal that acts as a quick access to services from the 'Riwayat' page.
#### Import
```jsx
import ModalCreatePB from '../Modal/ModalCreatePB'
```
#### Usage
![](https://i.imgur.com/6BcbLYZ.png)
```jsx
<ModalCreatePB show={show} handleClose={hideModal} />
```
\ No newline at end of file
---
sidebar_position: 2
---
# Navbar
## Navbar
Almost every page in the website shows Navbar. Navbar acts as quick access to the services.