@idds/react

v1.2.22

Published

3 days ago

**INA Digital Design System** adalah pustaka komponen UI berbasis React dan Tailwind CSS v4 yang siap di-publish ke NPM dan di‑consume oleh berbagai proyek.

0High
0Medium
0Low

muhammad.iqbal17

umarfaruqb

INA Digital Design System

INA Digital Design System adalah pustaka komponen UI berbasis React dan Tailwind CSS v4 yang siap di-publish ke NPM dan di‑consume oleh berbagai proyek.

Daftar Isi Cara Menggunakan Project Design System

Instalasi Design System

Instalasi Design System

# Pasang Tailwind CSS v4 beserta plugin Vite dan @tabler/icons-react yang digunakan untuk keperluan penggunaan icons agar lebih mudah
npm install @idds/react [email protected] @tailwindcss/[email protected] @tabler/icons-react
# atau menggunakan Yarn
yarn add @idds/react [email protected] @tailwindcss/[email protected] @tabler/icons-react

A. Astro Project

Pastikan anda telah menginstall @astrojs/react^4.2.7, react^18.0.0, dan react-dom^18.0.0

Buat file tailwind.config, lalu import createPreset serta input nama brand yang hendak Anda pilih. Misal : BGN

import createPreset from '@idds/react/tailwind.preset.js';
export default {
  darkMode: 'class',
  presets: [createPreset({ brand: 'BGN' })],
  theme: {
    // anda tetap diperbolehkan untuk melakukan customization variable yang belum tercover di design-system
    extend: {
      spacing: {
        '0.5': '2px',
        '1.5': '6px',
        '2.5': '10px',
        '3.5': '14px',
      },
    },
  },
  plugins: [],
};

Di file global CSS anda, misal di src/styles/global.css, import plugin Tailwind agar utilitas tailwind bisa di gunakan sertakan juga @config dari tailwind.config nya agar custom theme & preset design system yang telah kita definisikan bisa terpakai.
```
 @import "tailwindcss";
 @config '../../tailwind.config.ts';
```
Import file CSS dari design system pada root file .astro Anda (yang terdapat tag <html></html> nya). Misal di src/layout/BaseLayout.astro. Pastikan Anda mengimport nya sebelum global CSS

  ---
  import { SITE_TITLE, SITE_DESCRIPTION } from '../constants';
  import '@idds/react/style.css';
  import '../styles/global.css';
  ---

  <!doctype html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>{SITE_TITLE}</title>

      <meta name="generator" content={Astro.generator} />
      <meta name="description" content={SITE_DESCRIPTION} />
      <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
      <link rel="sitemap" type="application/xml" href="/sitemap-index.xml" />
    </head>
    <body
      class:list={[
        'pb-10',
        'bg-gray-50 dark:bg-gray-800',
        'scrollbar scrollbar-w-3 scrollbar-thumb-rounded-[0.25rem]',
        'scrollbar-track-slate-200  scrollbar-thumb-gray-400',
        'dark:scrollbar-track-gray-900 dark:scrollbar-thumb-gray-700',
      ]}
    >
      <slot />
    </body>
  </html>

  <script></script>

  <style is:global>
    @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
  </style>

B. React Project

Pastikan anda telah menginstall react^18.0.0, dan react-dom^18.0.0

Buat file tailwind.config, lalu import createPreset serta input nama brand yang hendak Anda pilih. Misal : BGN

// tailwind.config.js
import createPreset from '@idds/react/tailwind.preset.js';

/** @type {import('tailwindcss').Config} */
export default {
  presets: [createPreset({ brand: 'BGN' })],
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    './*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      backgroundImage: {},
      colors: {},
      fontSize: {},
    },
  },
  plugins: [],
};

Di file global CSS anda, misal di src/index.css, import plugin Tailwind agar utilitas tailwind bisa di gunakan sertakan juga @config dari tailwind.config nya agar custom theme & preset design system yang telah kita definisikan bisa terpakai.
```
 @import "tailwindcss";
 @config '../../tailwind.config.ts';
```
Import file CSS dari design system pada root file .jsx/.tsx dari project React Anda. Misal menggunakan vite, maka ada di src/main.jsx seperti contoh dibawah ini :

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import '@idds/react/style.css';
import './index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Daftar Isi Penjelasan Project Design System

(Just For Knowledge & Documentation Purpose, Don't Implement It In Your Project)

Prasyarat

Node.js ≥ 16
NPM / Yarn
React & ReactDOM

Instalasi

# Pasang Tailwind CSS v4 dan plugin Vite
npm install tailwindcss@latest @tailwindcss/vite @tabler/icons-react
# atau menggunakan Yarn
yarn add tailwindcss@latest @tailwindcss/vite @tabler/icons-react

Konfigurasi Vite & Tailwind

1. Install Tailwind & Plugin

Jalankan perintah instalasi di atas.
Di file vite.config.ts, import plugin Tailwind untuk Vite:
```
import tailwindcss from '@tailwindcss/vite';
```

2. Setup `vite.config.ts`

“Externalizing React” artinya menandai paket React (dan runtime JSX‑nya) sebagai external dalam build library-mu, sehingga tidak dibundel ke dalam output final. Sebagai gantinya, library-mu akan mengandalkan React yang diinstal oleh consumer (proyek yang menggunakan library). Ini mencegah duplikasi React di bundle, menghindari mismatched internals seperti error ReactCurrentDispatcher di Astro, dan menjaga ukuran bundle tetap kecil.

Mengapa perlu externalize React?

Duplikasi React Jika library dan aplikasi utama sama‑sama membundel React, akan ada dua instance React di page yang dapat memicu hook/context breakage (mis. ReactCurrentDispatcher undefined) .
Ukuran Bundle Eksternalisasi mencegah React ditambahkan ke package output, membuat library ringan dan berpindah‑pindah antar proyek tanpa membawa React.
Single source of React Consumer project bertanggung jawab menginstal versi React mereka sendiri, menjaga kompatibilitas dan konsistensi.

Tambahkan konfigurasi build dan external dependency React/ReactDOM:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
  build: {
    lib: {
      entry: './src/index.ts',
      name: 'INADigitalDesignSystem',
      formats: ['es', 'umd'],
      fileName: (format) => `@idds/react.${format}.js`,
    },
    rollupOptions: {
      external: [
        'react',
        'react-dom',
        'react/jsx-runtime',
        'react-dom/client', // untuk React 18+ jika kamu pakai createRoot
      ],
      output: {
        // ② Beri tahu global names untuk UMD/IIFE (jika dipakai)
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
          'react/jsx-runtime': 'jsxRuntime',
          'react-dom/client': 'ReactDOMClient',
        },
      },
    },
  },
});

3. Prettier & VS Code Settings

Aktifkan ekstensi Prettier di VS Code.

(Opsional) Buat file .vscode/settings.json di root project untuk custom language support Tailwind:

{
  "tailwindCSS.includeLanguages": {
    "typescript": "javascript",
    "typescriptreact": "javascriptreact"
  },
  "editor.formatOnSave": true,
  "tailwindCSS.classAttributes": ["class", "class:list", "className"],
  // Suruh Tailwind IntelliSense mem-parse file global.css sebagai config
  "tailwindCSS.experimental.configFile": "src/index.css"
}

Struktur Tailwind Config

Kita menggunakan dua file konfigurasi:

tailwind.preset.ts
- Digunakan sebagai preset eksternal.
- Definisikan brand colors, font family, spacing, dll.
- File ini akan di-export dan dikonsumsi oleh project lain.
tailwind.config.ts
- Konfigurasi internal project Design System.
- Merujuk ke tailwind.preset.ts sebagai source of truth agar tidak duplikasi (DRY).

Contoh tailwind.preset.ts:

import { Preset } from 'tailwindcss';

const preset: Preset = {
  theme: {
    colors: {
      primary: '#1DA1F2',
      secondary: '#14171A',
      // … lainnya
    },
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
    },
  },
};

export default preset;

Contoh tailwind.config.ts:

import preset from './tailwind.preset';

export default {
  presets: [preset],
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
};

TypeScript Config

Pisahkan tsconfig menjadi dua:

tsconfig.app.json Untuk build aplikasi React (pastikan module & moduleResolution = nodenext).
tsconfig.node.json Untuk keperluan scripts atau build tools di Node.js.

Asset Font Internal

Kami menyertakan file font .woff2 di dalam project:

src/
└── assets/
    └── fonts/
        └── Inter/
            ├── Inter-Regular.woff2
            ├── Inter-Bold.woff2
            └── … lainnya

Global CSS

Buat file src/assets/fonts.css untuk @font-face:

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
/* … weight lainnya */

Di src/index.css:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import './assets/fonts.css';

/* Link ke konfigurasi Tailwind */
@config './tailwind.config.ts';

Publikasi ke NPM

Pastikan di package.json terdapat field berikut:

{
  "name": "@idds/react",
  "version": "0.6.21",
  "type": "module",
  "main": "dist/@idds/react.umd.js",
  "module": "dist/@idds/react.es.js",
  "types": "dist/types/index.d.ts",
  "files": ["dist", "dist/tailwind.preset.js"],
  "scripts": {
    "build:css": "npx @tailwindcss/cli -i src/index.css -o dist/style.css --minify",
    "build:preset": "tsc --project tsconfig.preset.json",
    "build": "tsc --project tsconfig.app.json && vite build && npm run build:preset && npm run build:css"
  },
  "peerDependencies": {
    "react": ">=18.0.0", // gunakan >= untuk meminimalisir error missmatch react version antara design-system and consumer project
    "react-dom": ">=18.0.0"
  },
  "style": "dist/style.css", // agar saat consumer import "@idds/react/style.css" maka akan di arahkan ke file yang ada didalam folder dist/style.css
  "exports": {
    ".": {
      "import": "./dist/@idds/react.es.js",
      "require": "./dist/@idds/react.umd.js",
      "types": "./dist/types/index.d.ts"
    },
    "./tailwind.preset.js": {
      "import": "./dist/tailwind.preset.js",
      "require": "./dist/tailwind.preset.js"
    },
    "./style.css": {
      "import": "./dist/style.css",
      "require": "./dist/style.css"
    },
    "./*": "./dist/*"
  }
}

Publikasi:

npm run build
npm version patch
npm publish --access public