Style Guide

Tujuan dibuat repositori ini adalah untuk mengumpulkan component berupa atom, molekul, organism pada website portal 99.co indonesia. diharapkan dengan membuat component ini mengurangi duplikasi kode pada website tersebut.

Cara Instalasi

Jika anda ingin menggunakan library ini anda dapat menginstal menggunakan yarn atau npm dengan cara

yarn add component-ninetynine@<version-library>

npm install --save component-ninetynine@<version-library>

Design Pattern (TODO)

atomic design pattern
abstract factory pattern
repository pattern
builder pattern

Library & Minimum Requirement (TODO)

node js 12+

node js yang digunakan minimal menggunakan versi 12 keatas
storybook

storybook digunakan untuk melakukan build asset dan showcase dokumentasi dihalaman github pages
gulp

gulp digunakan untuk melakukan build asset styling berupa file css
rollup

rollup digunakan untuk melakukan build asset javascript dan dts (jika menggunakan typescript)

Cara Pengerjaan (TODO)

jalankan perintah di dalam terminal make init-dev hanya pada saat awal pengerjaan saja
lalu jika suda selesai anda dapat menjalankan make run-dev
lalu jalankan port 5000

Cara Build Library

apabila anda ingin mencoba build library anda dapat menggunakan cara dibawah ini:

Build Asset Library (TODO)

make build-asset

Build Asset Dokumentasi (TODO)

make build-documentation

Penamaan File

Jika anda ingin membuat suatu modules / file maka anda dapat mengacu pada aturan nama yang telah tersedia seperti dibawah ini:

Penamaan File TS / TSX

Tipe File	Penamaan File	Penamaan Class / Fungsi
Abstract File	`abstract-name.abstract.(ts/tsx)`	`<nama-file>Abstract`
Builder File	`builder-name.builder.(ts/tsx)`	`<nama-file>Builder`
Config File	`config-name.config.ts`	`-`
Constant File	`constant-name.const.ts`	`-`
Documentation TSX Component	`component-name.stories.tsx`	`-`
Template Documentation	`template-name.stories.tsx`	`-`
Section Documentation	`section-name.stories.tsx`	`-`
Helper Library	`helper-name.helper.ts`	`<nama-file>Helper`
Interface	`file-name.interface.ts`	`<nama-file>Interface`
React Context File	`context-name.context.ts`	`<nama-file>Context`
TSX Component	`component-name.component.tsx`	`<nama-file>Component`
Typings File	`typings-name.typings.d.ts`	`<nama-file>Abstract`
Unit Testing File	`component-name.spec.(ts/tsx)`	`-`
Fixture Testing File	`fixture-name.spec.(ts/tsx)`	`-`
View File	`view-name.view.ts`	`<nama-file>View`

Penamaan File CSS / SCSS

Tipe File	Penamaan
CSS Component	`style.css`
SCSS Component	`style.scss`
Animation Style	`animation-name.animation.scss`
Function File	`function-name.function.scss`
Helper File	`helper-name.helper.scss`
Mixin File	`mixin-name.mixin.scss`
Transition File	`transition-name.transition.scss`
Variable File	`variable-name.variable.scss`

Cara Penulisan

Jika anda ingin menambahkan atau merubah source code component yang ada anda dapat mengikuti rules yang sudah ada seperti dibawah ini:

Pure Class Component

import * as React from 'react';
import { Component, ReactNode } from 'react';

import { ComponentPropsInterface } from './interface/component-name.component.interface';

/**
 * Component-Name Component
 * @author author-name <author-email@99.co>
 * @since 2020.03.09
 */
class ComponentNameComponent extends Component<ComponentPropsInterface> {
    render(): ReactNode {
        return <div />;
    }
}

export default ComponentNameComponent;

Stateless Component

import * as React from 'react';
import { SFC, ReactNode } from 'react';

import { ComponentPropsInterface } from './interface/component-name.component.interface';

/**
 * Component-Name Component
 * @author author-name <author-email@99.co>
 * @since 2020.03.09
 */
export const ComponentNameComponent: SFC<ComponentPropsInterface> = (props: ComponentPropsInterface) => {
    return (
        <div />
    )
}

export default ComponentNameComponent;

Struktur Direktori

Untuk saat ini pada library ini menggunakan sturktur folder seperti ini, Jika ada yang merasa implementasi saat ini tidak seperti dibawah ini, jangan ragu untuk mengoreksi hal ini.

├── etc
│   ├── git-hooks
│   ├── gulp
│   ├── jest
│   ├── rollup
│   └── webpack
│       └── library
└── src
    ├── .storybook
    │      ├── builder
    │      └── component
    │          ├── atomic
    │          ├── molecules
    │          └── templates
    ├── common                      # e.g. "button, text component"
    │   ├── atomic
    |   |    └── component
    │   |       ├── storybook
    │   |       ├── interface
    │   |       ├── style
    │   |       └── test
    │   ├── molecules
    │   └── organism
    ├── desktop                     # e.g. "desktop navbar component"
    ├── mobile                      # e.g. "mobile dialog component"
    ├── shared
    │   ├── abstract
    │   ├── builder
    │   ├── config
    │   ├── constant
    │   ├── helper
    │   ├── interface
    │   └── typings
    └── style
        ├── animation
        ├── function
        ├── helper
        ├── mixin
        ├── transition
        └── variable

Cara Membuat Component

Apabila anda ingin membuat component maka berikut hal yang anda harus ikuti adalah sebagai berikut:

buatlah component pada direktori common, desktop atau mobile dengan format sebagai berikut:

└── (nama component)
    ├── storybook
    |   ├── templates
    |   |    ├── template-(nama template1).stories.tsx
    |   |    └── template-(nama template2).stories.tsx
    |   ├── section
    |   |    ├── section-(nama section1).stories.tsx
    |   |    └── section-(nama section2).stories.tsx
    |   ├── markdown
    |   |    └── (nama-component).documentation.md
    |   └── (nama component).stories.tsx
    ├── interface
    |   └── component.interface.ts
    ├── style
    |   └── style.scss
    ├── test
    |   └── (nama-component).spec.tsx
    |   └── fixture-(nama-component).spec.tsx
    └── (nama component).component.tsx

Nama File	Direktori	Fungsi
(nama component).stories.tsx	`storybook`	File ini dibuat dengan tujuan untuk dokumentasi component tersebut.
template-(nama template).stories.tsx	`storybook/template`	File ini dibuat dengan tujuan untuk membuat mock file yang berisi array yang digunakan pada storybook file maupun section
section-(nama section).stories.tsx	`storybook/section`	File ini dibuat dengan tujuan untuk menjelaskan beberapa section berupa props maupun lainya
(nama-component).documentation.md	`storybook/markdown`	File ini dibuat dengan tujuan untuk membuat informasi berupa tabel props dan cara implementasi component tersebut
component.interface.ts	`interface`	Interface yang akan digunakan pada component tersebut.
style.scss	`style`	SCSS file component tersebut.
(nama-component)).spec.tsx	`test`	unit test file component tersebut.
fixture-(nama-component)).spec.tsx	`test`	berisi constanta array yang sesuai dengan props component tersebut yang bertujuan untuk melakukan mocking props .

Daftarkan file component yang telah anda buat pada etc/rollup/constant entah common, desktop atau mobile component.
Jika anda ingin mendaftarkan component anda pada dokumentasi yang telah tersedia maka anda hanya membuat file <nama-component>.stories.tsx pada folder storybook.

irfanandriansyah1997/thesis