0.1.4 • Published 4 years ago

component-ninetynine v0.1.4

Weekly downloads
3
License
ISC
Repository
github
Last release
4 years ago

Style Guide

Build Status codecov

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)

Library & Minimum Requirement (TODO)

  • node js 12+

    node js yang digunakan minimal menggunakan versi 12 keatas

  • webpack

    webpack digunakan untuk melakukan build asset untuk 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 8008

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 FilePenamaan FilePenamaan Class / Fungsi
Abstract Fileabstract-name.abstract.(ts/tsx)<nama-file>Abstract
Builder Filebuilder-name.builder.(ts/tsx)<nama-file>Builder
Config Fileconfig-name.config.ts-
Constant Fileconstant-name.const.ts-
Documentation TSX Componentcomponent-name.documentation.tsx<nama-file>Documentation
Helper Libraryhelper-name.helper.ts<nama-file>Helper
Interfacefile-name.interface.ts<nama-file>Interface
React Context Filecontext-name.context.ts<nama-file>Context
TSX Componentcomponent-name.component.tsx<nama-file>Component
Typings Filetypings-name.typings.d.ts<nama-file>Abstract
Unit Testing Filecomponent-name.spec.(ts/tsx)-
View Fileview-name.view.ts<nama-file>View

Penamaan File CSS / SCSS

Tipe FilePenamaan
CSS Componentstyle.css
SCSS Componentstyle.scss
Animation Styleanimation-name.animation.scss
Function Filefunction-name.function.scss
Helper Filehelper-name.helper.scss
Mixin Filemixin-name.mixin.scss
Transition Filetransition-name.transition.scss
Variable Filevariable-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
    ├── common                      # e.g. "button, text component"
    │   ├── atomic
    |   |    └── component
    │   |       ├── documentation
    │   |       ├── interface
    │   |       └── style
    │   ├── molecules
    │   └── organism
    ├── desktop                     # e.g. "desktop navbar component"
    ├── mobile                      # e.g. "mobile dialog component"
    ├── documentation               # e.g. "layout for documentation"
    │   ├── modules                 # e.g. "documentation modules & router"
    │   │   ├── common              # e.g. "documentation modules for common component"
    │   │   ├── desktop             # e.g. "documentation modules for desktop component"
    │   │   └── mobile              # e.g. "documentation modules for mobile component"
    │   └── core                    # e.g. "documentation view, router config, 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)
        ├── documentation
        |   └── (nama component).documentation.tsx
        ├── interface
        |   └── component.interface.ts
        ├── style
        |   └── style.scss
        └── (nama component).component.tsx
    Nama FileDirektoriFungsi
    (nama component).documentation.tsxdocumentationFile ini dibuat dengan tujuan untuk dokumentasi component tersebut.
    component.interface.tsinterfaceInterface yang akan digunakan pada component tersebut.
    style.scssstyleSCSS file component tersebut.
  • 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 dapat mendaftarkan di beberapa file ini:
    • common : src/documentation/modules/common/common.documentation.tsx
    • desktop : src/documentation/modules/desktop/desktop.documentation.tsx
    • mobile : src/documentation/modules/mobile/mobile.documentation.tsx
0.1.4

4 years ago

0.1.3

4 years ago

0.1.2

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago

0.0.15

4 years ago

0.0.12

4 years ago

0.0.13

4 years ago

0.0.14

4 years ago

0.0.11

4 years ago

0.0.10

4 years ago

0.0.8

4 years ago

0.0.7

4 years ago

0.0.5

4 years ago

0.0.6

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago