@asdp/ferryui 0.1.20 → 0.1.22-dev.10038

package/README.md

@@ -2,228 +2,128 @@
 
 ASDP Ferry UI Component Library - Internal npm package untuk komponen UI yang digunakan di aplikasi ASDP Integrated Ticketing System.
 
-## Installation
+## 🚀 Getting Started
+
+### Installation
 
 ```bash
 npm install @asdp/ferry-ui
 ```
 
-## Setup untuk Development
+### Peer Dependencies
 
-### 1. Clone Repository
+Ensure your project has the following dependencies:
 
-```bash
-git clone https://gitlab.swamedia.xyz/asdp/ferry-ui
-cd ferry-ui
-```
+- `react` >= 18.0.0
+- `@fluentui/react-components` >= 9.0.0
 
-### 2. Install Dependencies
+---
 
-```bash
-npm install
-```
+## 🛠️ Development
 
-### 3. Build Package
+### Scripts
 
 ```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);
+# Install dependencies
+npm install
 
-  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"
-    />
-  );
-}
-```
+# Start development server (Watch mode)
+npm run dev
 
-#### With Custom Handler
+# Build package
+npm run build
 
-```tsx
-import { ModalRadius } from "@asdp/ferry-ui";
+# Run Storybook
+npm run storybook
 
-function App() {
-  const [isOpen, setIsOpen] = useState(false);
+# Build Storybook (Production)
+npm run build-storybook
 
-  const handleRetry = () => {
-    // Custom logic
-    checkLocation();
-    setIsOpen(false);
-  };
+# Serve Production Build
+npm run serve-storybook
 
-  return (
-    <ModalRadius
-      open={isOpen}
-      onClose={() => setIsOpen(false)}
-      onButtonClick={handleRetry}
-    />
-  );
-}
+# Type Checking
+npm run typecheck
 ```
 
-#### Using Assets
-
-The `ModalRadius` component uses an illustration image by default. The asset is included in the published package. You have two options:
+### Local Development Workflow (Important!)
 
-**Option 1: Copy assets to your public directory (Recommended)**
+We use **yalc** to simulate package publishing locally.
 
-```bash
-# Copy assets from the package to your public directory
-cp -r node_modules/@asdp/ferryui/dist/assets public/
-```
+1.  **Install yalc globally** (if not already installed):
 
-Or on Windows:
+    ```bash
+    npm install -g yalc
+    ```
 
-```powershell
-Copy-Item -Recurse node_modules/@asdp/ferryui/dist/assets -Destination public/
-```
+2.  **In `ferryui` directory:**
+    After making changes, publish them locally:
 
-**Option 2: Provide custom image**
+    ```bash
+    yalc publish --push
+    ```
 
-```tsx
-<ModalRadius
-  open={isOpen}
-  onClose={() => setIsOpen(false)}
-  imageSrc="https://your-cdn.com/custom-image.svg"
-/>
-```
+    _`--push` will automatically update projects that have added this package via yalc._
 
-## Menggunakan Package di Project Lain
+3.  **In Consumer Project (e.g., ferizy):**
+    If the package doesn't update automatically, run:
+    ```bash
+    yalc update
+    ```
 
-### 1. Setup .npmrc
+### CI/CD Deployment
 
-Buat file `.npmrc` di root project Anda:
+- **Development/Staging**: Automated deployment to GitLab Package Registry runs on every merge to the `dev` branch.
+- **Production**: Automated deployment runs when a new tag is created.
 
-```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/
-```
+**Note:** You do not need to manually run `npm publish`.
 
-### 2. Set Environment Variable
+---
 
-**Windows (PowerShell):**
+## 📂 Project Structure
 
-```powershell
-$env:NPM_TOKEN="glpat-S6RrDvDBQx5kLzDLbn4W"
 ```
-
-**Windows (CMD):**
-
-```cmd
-set NPM_TOKEN=glpat-S6RrDvDBQx5kLzDLbn4W
+src/
+├── components/          # Reusable UI Components
+│   ├── [ComponentName]/ # Self-contained component folders
+│   │   ├── index.ts     # Public API
+│   │   ├── [Name].tsx   # Implementation
+│   │   ├── [Name].stories.tsx # Documentation
+│   │   └── ...
+├── hooks/              # Shared hooks
+├── utils/              # Utility functions
+└── index.ts            # Main library export
 ```
 
-**Linux/Mac:**
+---
 
-```bash
-export NPM_TOKEN=glpat-S6RrDvDBQx5kLzDLbn4W
-```
+## 🧩 Components Usage
 
-### 3. Install Package
+This library is built on top of **Fluent UI React v9**.
 
-```bash
-npm install @asdp/ferry-ui
-```
-
-### 4. Import dan Gunakan
+### Example: ModalRadius
 
-```typescript
+```tsx
 import { ModalRadius } from "@asdp/ferry-ui";
+import { useState } from "react";
 
-// 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
+function App() {
+  const [isOpen, setIsOpen] = useState(false);
 
-# Run tests
-npm test
+  return (
+    <ModalRadius
+      open={isOpen}
+      onClose={() => setIsOpen(false)}
+      title="Outside Area"
+      message="You are outside the allowed booking radius."
+      buttonText="Retry"
+    />
+  );
+}
 ```
 
-## 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
+## 📄 License
 
-UNLICENSED - Internal use only
+**UNLICENSED** - Internal use only for ASDP Indonesia Ferry.

package/dist/index.css

@@ -0,0 +1,31 @@
+/* src/components/ModalSelectDate/modalSelectDate.css */
+.fui-Calendar {
+  width: 100% !important;
+}
+.fui-CalendarDay {
+  width: 100% !important;
+}
+.fui-CalendarDayGrid__table {
+  width: 100% !important;
+}
+.fui-Calendar__monthPickerWrapper {
+  width: 100% !important;
+}
+.fui-CalendarPicker {
+  width: 100% !important;
+}
+.fui-CalendarPicker__buttonRow {
+  justify-content: space-between !important;
+  display: flex !important;
+}
+.fui-CalendarPicker__selected {
+  background-color: var(--colorBrandBackground) !important;
+  color: var(--colorNeutralForegroundOnBrand) !important;
+}
+.fui-CalendarDayGrid__dayButton {
+  background-color: transparent !important;
+  :hover {
+    background-color: transparent !important;
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ModalSelectDate/modalSelectDate.css"],"sourcesContent":[".fui-Calendar {\n  width: 100% !important;\n}\n\n.fui-CalendarDay {\n  width: 100% !important;\n}\n\n.fui-CalendarDayGrid__table {\n  width: 100% !important;\n}\n\n.fui-Calendar__monthPickerWrapper {\n  width: 100% !important;\n}\n\n.fui-CalendarPicker {\n  width: 100% !important;\n}\n\n.fui-CalendarPicker__buttonRow {\n  justify-content: space-between !important;\n  display: flex !important;\n}\n.fui-CalendarPicker__selected{\n  background-color: var(--colorBrandBackground) !important;\n  color: var(--colorNeutralForegroundOnBrand) !important;\n}\n.fui-CalendarDayGrid__dayButton{\n  background-color: transparent !important;\n  :hover{\n    background-color: transparent !important;\n  }\n}"],"mappings":";AAAA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,mBAAiB;AACjB,WAAS;AACX;AACA,CAAC;AACC,oBAAkB,IAAI;AACtB,SAAO,IAAI;AACb;AACA,CAAC;AACC,oBAAkB;AAClB;AACE,sBAAkB;AACpB;AACF;","names":[]}