@asdp/ferryui 0.1.16 → 0.1.19

package/README.md

@@ -1,225 +1,229 @@
-# @asdp/ferry-ui
-
-ASDP Ferry UI Component Library - Internal npm package untuk komponen UI yang digunakan di aplikasi ASDP Integrated Ticketing System.
-
-## Installation
-
-```bash
-npm install @asdp/ferry-ui
-```
-
-## Setup untuk Development
-
-### 1. Clone Repository
-
-```bash
-git clone https://gitlab.swamedia.xyz/asdp/ferry-ui
-cd ferry-ui
-```
-
-### 2. Install Dependencies
-
-```bash
-npm install
-```
-
-### 3. Build Package
-
-```bash
-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
-
-```tsx
-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
-
-```tsx
-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)**
-
-```bash
-# Copy assets from the package to your public directory
-cp -r node_modules/@asdp/ferryui/dist/assets public/
-```
-
-Or on Windows:
-
-```powershell
-Copy-Item -Recurse node_modules/@asdp/ferryui/dist/assets -Destination public/
-```
-
-**Option 2: Provide custom image**
-
-```tsx
-<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:
-
-```ini
-@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):**
-
-```powershell
-$env:NPM_TOKEN="glpat-S6RrDvDBQx5kLzDLbn4W"
-```
-
-**Windows (CMD):**
-
-```cmd
-set NPM_TOKEN=glpat-S6RrDvDBQx5kLzDLbn4W
-```
-
-**Linux/Mac:**
-
-```bash
-export NPM_TOKEN=glpat-S6RrDvDBQx5kLzDLbn4W
-```
-
-### 3. Install Package
-
-```bash
-npm install @asdp/ferry-ui
-```
-
-### 4. Import dan Gunakan
-
-```typescript
-import { ModalRadius } from "@asdp/ferry-ui";
-
-// Gunakan komponen
-```
-
-## Publishing Package (untuk Maintainers)
-
-### 1. Update Version
-
-```bash
-# 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
-
-```bash
-npm publish
-```
-
-## CI/CD Integration
-
-Package ini bisa dipublish otomatis menggunakan GitLab CI/CD. Lihat `.gitlab-ci.yml` untuk konfigurasi.
-
-## Development
-
-```bash
-# 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
+# @asdp/ferry-ui
+
+ASDP Ferry UI Component Library - Internal npm package untuk komponen UI yang digunakan di aplikasi ASDP Integrated Ticketing System.
+
+## Installation
+
+```bash
+npm install @asdp/ferry-ui
+```
+
+## Setup untuk Development
+
+### 1. Clone Repository
+
+```bash
+git clone https://gitlab.swamedia.xyz/asdp/ferry-ui
+cd ferry-ui
+```
+
+### 2. Install Dependencies
+
+```bash
+npm install
+```
+
+### 3. Build Package
+
+```bash
+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
+
+```tsx
+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
+
+```tsx
+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)**
+
+```bash
+# Copy assets from the package to your public directory
+cp -r node_modules/@asdp/ferryui/dist/assets public/
+```
+
+Or on Windows:
+
+```powershell
+Copy-Item -Recurse node_modules/@asdp/ferryui/dist/assets -Destination public/
+```
+
+**Option 2: Provide custom image**
+
+```tsx
+<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:
+
+```ini
+@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):**
+
+```powershell
+$env:NPM_TOKEN="glpat-S6RrDvDBQx5kLzDLbn4W"
+```
+
+**Windows (CMD):**
+
+```cmd
+set NPM_TOKEN=glpat-S6RrDvDBQx5kLzDLbn4W
+```
+
+**Linux/Mac:**
+
+```bash
+export NPM_TOKEN=glpat-S6RrDvDBQx5kLzDLbn4W
+```
+
+### 3. Install Package
+
+```bash
+npm install @asdp/ferry-ui
+```
+
+### 4. Import dan Gunakan
+
+```typescript
+import { ModalRadius } from "@asdp/ferry-ui";
+
+// Gunakan komponen
+```
+
+## Publishing Package (untuk Maintainers)
+
+### 1. Update Version
+
+```bash
+# 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
+
+```bash
+npm publish
+```
+
+## CI/CD Integration
+
+Package ini bisa dipublish otomatis menggunakan GitLab CI/CD. Lihat `.gitlab-ci.yml` untuk konfigurasi.
+
+## Local Development
+
+## Development
+
+yalc publish
+
+```bash
+# 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