Technical documentation

e8ff7f82 · Shafiya Adzhani · 0cee7f48 · e8ff7f82 · e8ff7f82 · e8ff7f82
Commit e8ff7f82 authored Jun 28, 2021 by Shafiya Adzhani
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -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:

--- a/.netlify/state.json
+++ b/.netlify/state.json
+{}
\ No newline at end of file
--- a/documentation/.gitignore
+++ b/documentation/.gitignore
+# 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*
--- a/documentation/README.md
+++ b/documentation/README.md
+# 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.
--- a/documentation/babel.config.js
+++ b/documentation/babel.config.js
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};
--- a/documentation/blog/2019-05-28-hola.md
+++ b/documentation/blog/2019-05-28-hola.md
+---
+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
--- a/documentation/blog/2019-05-29-hello-world.md
+++ b/documentation/blog/2019-05-29-hello-world.md
+---
+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.
--- a/documentation/blog/2019-05-30-welcome.md
+++ b/documentation/blog/2019-05-30-welcome.md
+---
+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!
--- a/documentation/docs/basic-rule/_category_.json
+++ b/documentation/docs/basic-rule/_category_.json
+{
+  "label": "Basic Rule",
+  "position": 2
+}
--- a/documentation/docs/basic-rule/directory-and-file-naming.md
+++ b/documentation/docs/basic-rule/directory-and-file-naming.md
+---
+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
--- a/documentation/docs/basic-rule/directory-structure.md
+++ b/documentation/docs/basic-rule/directory-structure.md
+---
+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
--- a/documentation/docs/basic-rule/introduction.md
+++ b/documentation/docs/basic-rule/introduction.md
+---
+sidebar_position: 1
+---
+
+# Introduction
+
+In this section, we will explain about directories structure, files, and naming
+rules.
--- a/documentation/docs/button/_category_.json
+++ b/documentation/docs/button/_category_.json
+{
+    "label": "Button",
+    "position": 4
+  }
+  
\ No newline at end of file
--- a/documentation/docs/button/font.mdx
+++ b/documentation/docs/button/font.mdx
+---
+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
--- a/documentation/docs/color-palette/_category_.json
+++ b/documentation/docs/color-palette/_category_.json
+{
+    "label": "Color Palette",
+    "position": 2
+  }
+  
\ No newline at end of file
--- a/documentation/docs/color-palette/color-palette.mdx
+++ b/documentation/docs/color-palette/color-palette.mdx
+---
+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
--- a/documentation/docs/components/_category_.json
+++ b/documentation/docs/components/_category_.json
+{
+  "label": "Components",
+  "position": 4
+}
--- a/documentation/docs/components/benefits.mdx
+++ b/documentation/docs/components/benefits.mdx
+---
+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
--- a/documentation/docs/components/card.mdx
+++ b/documentation/docs/components/card.mdx
+---
+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
--- a/documentation/docs/components/dropdown.mdx
+++ b/documentation/docs/components/dropdown.mdx
+---
+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.
+
+---