Talentlytica Design System

Design system berbasis Mantine 7.17.3 untuk produk-produk Talentlytica (Kelola Apps, Integro, dll.). Repo ini punya dua fungsi:

1. Catalog Storybook — dokumentasi komponen lengkap (Foundations · Atom · Molecule · Organisme · Custom) yang bisa dijalankan secara mandiri.
2. Package talentlytica-ds — package yang bisa di-install langsung di project konsumen via npm/pnpm.

Menjalankan Storybook

pnpm install
pnpm storybook       # http://localhost:6006

Apple Silicon: jika Vite gagal dengan Cannot find module @rollup/rollup-darwin-arm64, jalankan pnpm add @rollup/rollup-darwin-arm64 -D.

Install sebagai Package

Penting — pin versi peer. Design system ini dibangun di atas Mantine 7 + React 18. Tanpa @^7/@^18, npm/pnpm akan menarik Mantine 9 + React 19 (terbaru) yang tidak kompatibel.

pnpm add talentlytica-ds \
  "@mantine/core@^7.17.3" "@mantine/hooks@^7.17.3" \
  "react@^18" "react-dom@^18" "@tabler/icons-react@^3"

Peer opsional (install jika memakai fitur terkait):

# Komponen chart (ChartBar, ChartDonut, ChartCard, dll.)
pnpm add "@mantine/charts@^7.17.3" "recharts@^2.15.1"
# Form + validasi (ApiForm, util validate)
pnpm add "@mantine/form@^7.17.3" "zod@^3.24.2"

Pengguna npm perlu npm install ... --legacy-peer-deps jika project sudah punya versi peer yang berbeda.

Setup di project

import { MantineProvider } from '@mantine/core';
import { kelolaTheme } from 'talentlytica-ds';
import '@mantine/core/styles.css';
import 'talentlytica-ds/styles.css';

export default function App() {
  return (
    <MantineProvider theme={kelolaTheme}>
      {/* konten aplikasi */}
    </MantineProvider>
  );
}

Dokumentasi instalasi lengkap ada di halaman Installation Guide di Storybook.

Coba dulu sebelum install

Test case siap-jalan yang menginstal talentlytica-ds dari npm registry publik (bukan workspace lokal) ada di examples/basic-usage. Jalankan pnpm install && pnpm dev di folder itu untuk memverifikasi package resolve dan render dengan benar di project baru.

Untuk uji coba lebih jauh — membangun dashboard lengkap bernuansa Kelola Apps hanya dari komponen publik — lihat DASHBOARD-STRESS-TEST.md.

Contoh implementasi stretch-test nyata (halaman produksi lengkap: tabel sticky+inline-edit, drawer detail dengan tabs, notes modal, comment thread) ada di examples/detail-idp-admin — termasuk laporan gap DS yang ditemukan.

Build Package

pnpm build

Menghasilkan dist/ berisi:

• index.mjs — ESM
• index.cjs — CommonJS
• index.d.ts — TypeScript declarations (bundled)
• styles.css — utility classes + custom component styles

Komponen yang Tersedia

Bundle ESM ~154kB (gzip 36kB), tree-shakeable. Peer deps tidak di-bundle.

Foundations kelolaTheme · mainTheme · mantineColor · defaultShades · cardShadow

Atom — Tag DiscTag · StatusTag · ActionBadge (alias deprecated: DISCBadge · TeamBadge · TeamBadgeInitial · DevBadge · BetaTag · VacantBadge)

Atom — Avatar ProfileAvatar (alias deprecated: CareerProfilingAvatar)

Atom — Button & Navigasi ButtonLink · ButtonDropdown · Tab · TabItem · TabFlexible · Paginate

Atom — Feedback & Layout AlertBox · ContentSkeleton · ModalMain · ModalFooter · Title

Atom — Icon Icon · TenantLabel

Atom — Chart (peer: @mantine/charts + recharts) ChartBar · ChartDonut · ChartLine · ChartRadar · ChartTrend · ChartTooltip

Molecule — Card InfoCard · IndicatorCard · JobCard · PlanCard · HomeBannerCard · ProfileDataCompletionCard · CareerSuccessorProfilingCard · OrgChartCardV2 · RiskCountCard · CompanyCard

Molecule — Chart Card (peer: @mantine/charts + recharts) ChartCard · CompanyAspectCompetencyChartCard · CompanyAvgExternalScoreChartCard · ScoreExternalChartCard

Molecule — Form ColorPicker (alias deprecated: PopColorPicker · PopColorTMTR)

Molecule — Modal ModalConfirmation · ErrorModal · ProgressModal · DeviceCheckModal · CreateTemplateModal · ModalMoveToCluster · ModalDeleteEmployee · ModalCreateCategoryAspect · ModalEditCategoryAspect · NeedDevelopmentModal · SuccessionRiskModal

Molecule — Content BadgeGroup · PermissionItem · AspectScoreIndicator · DISCAvatar · TipeTeamDesc · InteractionInsight · DashboardWrapper · GamelikeProfileAvatar · SearchBox

Molecule — Feedback TrialExpiredAlert · NotificationAlert · PopoverNotification · EmptyMessage

Molecule — Misc NavigationButtons · StepIndicator · AccordionInfo · EditableCell · ApiForm

Struktur Folder

src/
├─ .storybook/     Konfigurasi Storybook + harness mock (Inertia/axios/Redux)
├─ Components/     Atom · Molecule · Organisme · Error
├─ stories/        Foundations · Atom · Molecule · Organisme · Custom
├─ config/         mantineTheme.ts — theme + design tokens
├─ utils/  hooks/  types/  Context/  shared/  Services/  assets/
└─ Pages/          Stub tipis (agar compile tanpa 203 halaman app)
css/               tailwind.css · font.css · app.css
public/assets/     Aset statis untuk Storybook

Alias @/* → src/* (tsconfig + vite config).

Publish ke npm

Lihat PUBLISH-GUIDE.md untuk instruksi lengkap publish ke npmjs.com.

Catatan Arsitektur

Repo ini di-lift-and-shift dari kelola-app-main. Banyak komponen (terutama Organisme) masih ber-kopling ke runtime app (Inertia, axios, Redux, Ziggy route()). Storybook bisa jalan mandiri karena ada harness mock di src/.storybook/:

• @inertiajs/react → alias ke mock
• axios → di-stub (resolve sukses-kosong)
• route() → di-mock; StoreProvider/SidebarProvider/TrialProvider membungkus tiap story

Package talentlytica-ds hanya mengekspor komponen yang sudah presentational (tanpa kopling runtime). Komponen ter-kopling masih di katalog Storybook tapi tidak di-ship ke package.

Roadmap

Decouple bertahap komponen Organisme dan sisa Molecule dari Inertia/axios/Redux → masuk ke package. Lihat ROADMAP-package.md.