Spotlibs — Design System Component Library

Shared UI component library untuk ekosistem BRISPOT microfrontend.

Package name: spotlibs-components
Storybook: spotlibs-ui.bspt-dev.bri.co.id

Getting Started

# Install dependencies
pnpm install

# Run Storybook (dev mode)
pnpm storybook

# Build library
pnpm build

# Lint
pnpm lint

Architecture

• Atomic Design: atoms → molecules → organisms
• Build: tsup (ESM, tree-shakeable, "use client" auto-prepend)
• Styling: Tailwind CSS v4 + MUI Emotion (hybrid)
• Forms: react-hook-form + Yup validation
• Testing: Vitest + Storybook test addon + Playwright
• Documentation: Storybook 9 with versioned deployment

Usage in Microfrontend

pnpm add spotlibs-components

import { BaseButton, BaseTextField, BaseDropdown } from 'spotlibs-components';
import { IconPlus } from 'spotlibs-components/icons';
import { Box, Stack } from 'spotlibs-components/mui';

Exports

| Entry Point | Content | |-------------|---------| | spotlibs-components | All components (atoms + molecules + organisms) | | spotlibs-components/icons | Tabler icons + legacy BRISPOT icons | | spotlibs-components/mui | MUI layout utilities (Box, Stack, Grid, etc.) | | spotlibs-components/utils | Shared utilities (crypto, formatters, etc.) | | spotlibs-components/layout | Layout components (Sidebar, Header, etc.) | | spotlibs-components/types | TypeScript types |

Versioning & Storybook Deployment

Setiap release menghasilkan versioned Storybook deployment:

• spotlibs-ui.bspt-dev.bri.co.id/ → Landing page (daftar versi)
• spotlibs-ui.bspt-dev.bri.co.id/v0.1.32/ → Storybook versi spesifik

Version Workflow

1. Bump version di package.json
2. Push ke master
3. Bamboo CI: Docker build → push image → helm deploy

Changelog di versions.html

Changelog otomatis di-generate dari commit messages dengan format:

[add]: Deskripsi penambahan component baru
[update]: Deskripsi update component
[fix]: Deskripsi fix bug
[delete]: Deskripsi penghapusan component

Commit tanpa format di atas tidak masuk changelog.

Retention Policy

• Maksimal 5 versi retained di versions.json
• Helm releases lama otomatis di-uninstall saat deploy

Storybook — Marking Changes

Gunakan withChangeNote decorator untuk menandai story yang baru/berubah:

import { withChangeNote } from "@/../.storybook/decorators/change-note";

export const MyNewStory = {
  tags: ["new"],  // dot indicator di sidebar
  decorators: [withChangeNote("0.1.32", "Deskripsi perubahan")],
  render: () => <MyComponent />,
};

Scripts

| Command | Description | |---------|-------------| | pnpm storybook | Run Storybook dev server (port 6006) | | pnpm build | Build library (tsup → dist/) | | pnpm build-storybook | Build static Storybook | | pnpm lint | ESLint check | | pnpm lint:fix | ESLint auto-fix |

Project Structure

src/
├── components/
│   ├── atoms/          (button, chip, icon, typography, etc.)
│   ├── molecules/      (dropdown, textfield, datatable, etc.)
│   ├── organisms/      (forms, modals, layout)
│   ├── legacy/         (deprecated — bugfix only)
│   └── mui/            (MUI layout re-exports)
├── helpers/            (API, session, cookies)
├── styles/             (globals.css, fonts)
└── utils/              (crypto, formatters, schema, etc.)

.storybook/
├── main.js             (Storybook config)
├── preview.jsx         (decorators, theme)
├── manager.js          (sidebar config, version-switcher)
├── decorators/         (withChangeNote helper)
└── addons/             (version-switcher)

scripts/
├── generate-versions.js   (auto-generate versions.json)
├── cleanup-old-versions.js (helm uninstall old releases)
└── deploy-storybook.sh    (reference deploy script)