@asdp/ferry-ui

ASDP Ferry UI Component Library - Internal npm package untuk komponen UI yang digunakan di aplikasi ASDP Integrated Ticketing System.

Installation

npm install @asdp/ferry-ui

Setup untuk Development

1. Clone Repository

git clone https://gitlab.swamedia.xyz/asdp/ferry-ui
cd ferry-ui

2. Install Dependencies

npm install

3. Build Package

npm run build

Components

ModalRadius

Modal component untuk menampilkan pesan ketika user berada di luar area pemesanan.

Props

| Prop | Type | Default | Description | | --------------- | ------------ | -------------------------------------------- | ---------------------------------------------------- | | open | boolean | - | Whether the modal is open (required) | | onClose | () => void | - | Callback when modal should close (required) | | title | string | "Anda berada di luar area pemesanan" | Modal title | | message | string | "Pemesanan tiket tidak dapat dilakukan..." | Modal message content | | imageSrc | string | "/assets/images/illustrations/radius.svg" | Image source URL | | imageAlt | string | "Radius Illustration" | Image alt text | | imageWidth | number | 361 | Image width | | imageHeight | number | 203 | Image height | | buttonText | string | "Tutup & Coba Lagi" | Button text | | onButtonClick | () => void | - | Button click handler (optional, defaults to onClose) |

Usage

import { ModalRadius } from "@asdp/ferry-ui";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <ModalRadius
      open={isOpen}
      onClose={() => setIsOpen(false)}
      title="Anda berada di luar area pemesanan"
      message="Pemesanan tiket tidak dapat dilakukan dari lokasi Anda saat ini."
      imageSrc="/assets/images/illustrations/radius.svg"
      buttonText="Tutup & Coba Lagi"
    />
  );
}

With Custom Handler

import { ModalRadius } from "@asdp/ferry-ui";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const handleRetry = () => {
    // Custom logic
    checkLocation();
    setIsOpen(false);
  };

  return (
    <ModalRadius
      open={isOpen}
      onClose={() => setIsOpen(false)}
      onButtonClick={handleRetry}
    />
  );
}

Using Assets

The ModalRadius component uses an illustration image by default. The asset is included in the published package. You have two options:

Option 1: Copy assets to your public directory (Recommended)

# Copy assets from the package to your public directory
cp -r node_modules/@asdp/ferryui/dist/assets public/

Or on Windows:

Copy-Item -Recurse node_modules/@asdp/ferryui/dist/assets -Destination public/

Option 2: Provide custom image

<ModalRadius
  open={isOpen}
  onClose={() => setIsOpen(false)}
  imageSrc="https://your-cdn.com/custom-image.svg"
/>

Menggunakan Package di Project Lain

1. Setup .npmrc

Buat file .npmrc di root project Anda:

@asdp:registry=https://gitlab.swamedia.xyz/api/v4/projects/285/packages/npm/
//gitlab.swamedia.xyz/api/v4/projects/285/packages/npm/:_authToken=${NPM_TOKEN}
registry=https://registry.npmjs.org/

2. Set Environment Variable

Windows (PowerShell):

$env:NPM_TOKEN="glpat-S6RrDvDBQx5kLzDLbn4W"

Windows (CMD):

set NPM_TOKEN=glpat-S6RrDvDBQx5kLzDLbn4W

Linux/Mac:

export NPM_TOKEN=glpat-S6RrDvDBQx5kLzDLbn4W

3. Install Package

npm install @asdp/ferry-ui

4. Import dan Gunakan

import { ModalRadius } from "@asdp/ferry-ui";

// Gunakan komponen

Publishing Package (untuk Maintainers)

1. Update Version

# Patch release (0.1.0 → 0.1.1)
npm version patch

# Minor release (0.1.0 → 0.2.0)
npm version minor

# Major release (0.1.0 → 1.0.0)
npm version major

2. Publish ke GitLab Registry

npm publish

CI/CD Integration

Package ini bisa dipublish otomatis menggunakan GitLab CI/CD. Lihat .gitlab-ci.yml untuk konfigurasi.

Development

# Install dependencies
npm install

# Build package
npm run build

# Watch mode for development
npm run dev

# Type checking
npm run typecheck

# Run tests
npm test

Peer Dependencies

Package ini membutuhkan dependencies berikut di project consumer:

• react ^18.0.0
• react-dom ^18.0.0
• @fluentui/react-components ^9.0.0

License

UNLICENSED - Internal use only