Majalengka Design System0.1.0
Memulai

Next.js & React

Panduan integrasi Majalengka Design System di Next.js (App Router dan Pages Router) serta React.

Majalengka Design System dapat digunakan langsung di Next.js tanpa dependensi JavaScript tambahan. Anda bisa memilih menggunakan CSS siap pakai (@majalengka/css) atau mengintegrasikan token desain ke konfigurasi Tailwind CSS (@majalengka/tokens).

Pemasangan

Pasang paket yang dibutuhkan di proyek Next.js:

pnpm add @majalengka/css @majalengka/tokens

Konfigurasi Global CSS

Opsi A: Next.js App Router (app/layout.tsx)

Impor @majalengka/css pada root layout utama agar seluruh halaman dan komponen otomatis mendapatkan styling Majalengka:

app/layout.tsx
import type { Metadata } from 'next';
import '@majalengka/css';

export const metadata: Metadata = {
  title: 'Portal Layanan Publik Majalengka',
  description: 'Layanan terpadu masyarakat Kabupaten Majalengka',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="id">
      <body>
        {/* Skip link untuk aksesibilitas pembaca layar (WCAG 2.1 AA) */}
        <a href="#main-content" className="mjl-skip-link">
          Langsung ke konten utama
        </a>

        <main id="main-content" className="mjl-container">
          {children}
        </main>
      </body>
    </html>
  );
}

Opsi B: Next.js Pages Router (pages/_app.tsx)

Jika proyek Anda menggunakan arsitektur Pages Router lama:

pages/_app.tsx
import type { AppProps } from 'next/app';
import '@majalengka/css';

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

Integrasi dengan Tailwind CSS

Jika proyek Next.js Anda menggunakan Tailwind CSS, Anda bisa mendaftarkan palet warna dan radius Majalengka ke tailwind.config.ts:

tailwind.config.ts
import type { Config } from 'tailwindcss';
import { colors, spacing } from '@majalengka/tokens';

const config: Config = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        'mjl-primary': colors.primary,
        'mjl-neutral': colors.neutral,
      },
      borderRadius: {
        'mjl-sm': spacing.radius.sm.$value,
        'mjl-md': spacing.radius.md.$value,
        'mjl-lg': spacing.radius.lg.$value,
      },
    },
  },
  plugins: [],
};

export default config;

Contoh Komponen React

Berikut contoh implementasi komponen formulir layanan warga menggunakan kelas standar Majalengka:

components/FormPermohonan.tsx
'use client';

import { useState } from 'react';

export function FormPermohonan() {
  const [nik, setNik] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    // Logika kirim permohonan
  };

  return (
    <div className="mjl-card p-6 max-w-lg mx-auto mt-8">
      {/* Banner Kepercayaan Layanan Resmi */}
      <div className="mjl-trust-banner mb-6">
        <span className="font-semibold">Portal Resmi Majalengka</span>
        <p className="text-xs text-neutral-500">
          Dikelola bersama Diskominfo Kab. Majalengka
        </p>
      </div>

      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label htmlFor="nik" className="mjl-label">
            Nomor Induk Kependudukan (NIK)
          </label>
          <input
            id="nik"
            type="text"
            className="mjl-input"
            maxLength={16}
            value={nik}
            onChange={(e) => setNik(e.target.value)}
            placeholder="16 digit sesuai e-KTP"
            required
          />
        </div>

        <button
          type="submit"
          disabled={loading || nik.length < 16}
          className="mjl-btn mjl-btn--primary mjl-btn--md w-full"
        >
          {loading ? 'Memproses...' : 'Cek Status Dokumen'}
        </button>
      </form>
    </div>
  );
}

Preset UnoCSS

Panduan integrasi UnoCSS dengan @majalengka/tokens/preset untuk Vite, Nuxt, dan Astro.

Svelte & SvelteKit

Cara integrasi Majalengka Design System di proyek Svelte 5 dan SvelteKit.

Copyright © 2026