@asdp/ferryui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +198 -0
- package/dist/index.d.mts +54 -0
- package/dist/index.d.ts +54 -0
- package/dist/index.js +88 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +85 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +50 -0
package/README.md
ADDED
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
# @asdp/ferry-ui
|
|
2
|
+
|
|
3
|
+
ASDP Ferry UI Component Library - Internal npm package untuk komponen UI yang digunakan di aplikasi ASDP Integrated Ticketing System.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @asdp/ferry-ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Setup untuk Development
|
|
12
|
+
|
|
13
|
+
### 1. Clone Repository
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
git clone https://gitlab.swamedia.xyz/asdp/ferry-ui
|
|
17
|
+
cd ferry-ui
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
### 2. Install Dependencies
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### 3. Build Package
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
npm run build
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Components
|
|
33
|
+
|
|
34
|
+
### ModalRadius
|
|
35
|
+
|
|
36
|
+
Modal component untuk menampilkan pesan ketika user berada di luar area pemesanan.
|
|
37
|
+
|
|
38
|
+
#### Props
|
|
39
|
+
|
|
40
|
+
| Prop | Type | Default | Description |
|
|
41
|
+
| --------------- | ------------ | -------------------------------------------- | ---------------------------------------------------- |
|
|
42
|
+
| `open` | `boolean` | - | Whether the modal is open (required) |
|
|
43
|
+
| `onClose` | `() => void` | - | Callback when modal should close (required) |
|
|
44
|
+
| `title` | `string` | `"Anda berada di luar area pemesanan"` | Modal title |
|
|
45
|
+
| `message` | `string` | `"Pemesanan tiket tidak dapat dilakukan..."` | Modal message content |
|
|
46
|
+
| `imageSrc` | `string` | `"/assets/images/illustrations/radius.svg"` | Image source URL |
|
|
47
|
+
| `imageAlt` | `string` | `"Radius Illustration"` | Image alt text |
|
|
48
|
+
| `imageWidth` | `number` | `361` | Image width |
|
|
49
|
+
| `imageHeight` | `number` | `203` | Image height |
|
|
50
|
+
| `buttonText` | `string` | `"Tutup & Coba Lagi"` | Button text |
|
|
51
|
+
| `onButtonClick` | `() => void` | - | Button click handler (optional, defaults to onClose) |
|
|
52
|
+
|
|
53
|
+
#### Usage
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
import { ModalRadius } from "@asdp/ferry-ui";
|
|
57
|
+
|
|
58
|
+
function App() {
|
|
59
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
60
|
+
|
|
61
|
+
return (
|
|
62
|
+
<ModalRadius
|
|
63
|
+
open={isOpen}
|
|
64
|
+
onClose={() => setIsOpen(false)}
|
|
65
|
+
title="Anda berada di luar area pemesanan"
|
|
66
|
+
message="Pemesanan tiket tidak dapat dilakukan dari lokasi Anda saat ini."
|
|
67
|
+
imageSrc="/assets/images/illustrations/radius.svg"
|
|
68
|
+
buttonText="Tutup & Coba Lagi"
|
|
69
|
+
/>
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
#### With Custom Handler
|
|
75
|
+
|
|
76
|
+
```tsx
|
|
77
|
+
import { ModalRadius } from "@asdp/ferry-ui";
|
|
78
|
+
|
|
79
|
+
function App() {
|
|
80
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
81
|
+
|
|
82
|
+
const handleRetry = () => {
|
|
83
|
+
// Custom logic
|
|
84
|
+
checkLocation();
|
|
85
|
+
setIsOpen(false);
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
return (
|
|
89
|
+
<ModalRadius
|
|
90
|
+
open={isOpen}
|
|
91
|
+
onClose={() => setIsOpen(false)}
|
|
92
|
+
onButtonClick={handleRetry}
|
|
93
|
+
/>
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Menggunakan Package di Project Lain
|
|
99
|
+
|
|
100
|
+
### 1. Setup .npmrc
|
|
101
|
+
|
|
102
|
+
Buat file `.npmrc` di root project Anda:
|
|
103
|
+
|
|
104
|
+
```ini
|
|
105
|
+
@asdp:registry=https://gitlab.swamedia.xyz/api/v4/projects/285/packages/npm/
|
|
106
|
+
//gitlab.swamedia.xyz/api/v4/projects/285/packages/npm/:_authToken=${NPM_TOKEN}
|
|
107
|
+
registry=https://registry.npmjs.org/
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### 2. Set Environment Variable
|
|
111
|
+
|
|
112
|
+
**Windows (PowerShell):**
|
|
113
|
+
|
|
114
|
+
```powershell
|
|
115
|
+
$env:NPM_TOKEN="glpat-S6RrDvDBQx5kLzDLbn4W"
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
**Windows (CMD):**
|
|
119
|
+
|
|
120
|
+
```cmd
|
|
121
|
+
set NPM_TOKEN=glpat-S6RrDvDBQx5kLzDLbn4W
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
**Linux/Mac:**
|
|
125
|
+
|
|
126
|
+
```bash
|
|
127
|
+
export NPM_TOKEN=glpat-S6RrDvDBQx5kLzDLbn4W
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### 3. Install Package
|
|
131
|
+
|
|
132
|
+
```bash
|
|
133
|
+
npm install @asdp/ferry-ui
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### 4. Import dan Gunakan
|
|
137
|
+
|
|
138
|
+
```typescript
|
|
139
|
+
import { ModalRadius } from "@asdp/ferry-ui";
|
|
140
|
+
|
|
141
|
+
// Gunakan komponen
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
## Publishing Package (untuk Maintainers)
|
|
145
|
+
|
|
146
|
+
### 1. Update Version
|
|
147
|
+
|
|
148
|
+
```bash
|
|
149
|
+
# Patch release (0.1.0 → 0.1.1)
|
|
150
|
+
npm version patch
|
|
151
|
+
|
|
152
|
+
# Minor release (0.1.0 → 0.2.0)
|
|
153
|
+
npm version minor
|
|
154
|
+
|
|
155
|
+
# Major release (0.1.0 → 1.0.0)
|
|
156
|
+
npm version major
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### 2. Publish ke GitLab Registry
|
|
160
|
+
|
|
161
|
+
```bash
|
|
162
|
+
npm publish
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
## CI/CD Integration
|
|
166
|
+
|
|
167
|
+
Package ini bisa dipublish otomatis menggunakan GitLab CI/CD. Lihat `.gitlab-ci.yml` untuk konfigurasi.
|
|
168
|
+
|
|
169
|
+
## Development
|
|
170
|
+
|
|
171
|
+
```bash
|
|
172
|
+
# Install dependencies
|
|
173
|
+
npm install
|
|
174
|
+
|
|
175
|
+
# Build package
|
|
176
|
+
npm run build
|
|
177
|
+
|
|
178
|
+
# Watch mode for development
|
|
179
|
+
npm run dev
|
|
180
|
+
|
|
181
|
+
# Type checking
|
|
182
|
+
npm run typecheck
|
|
183
|
+
|
|
184
|
+
# Run tests
|
|
185
|
+
npm test
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
## Peer Dependencies
|
|
189
|
+
|
|
190
|
+
Package ini membutuhkan dependencies berikut di project consumer:
|
|
191
|
+
|
|
192
|
+
- `react` ^18.0.0
|
|
193
|
+
- `react-dom` ^18.0.0
|
|
194
|
+
- `@fluentui/react-components` ^9.0.0
|
|
195
|
+
|
|
196
|
+
## License
|
|
197
|
+
|
|
198
|
+
UNLICENSED - Internal use only
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
interface ModalRadiusProps {
|
|
4
|
+
/**
|
|
5
|
+
* Whether the modal is open
|
|
6
|
+
*/
|
|
7
|
+
open: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Callback when modal should close
|
|
10
|
+
*/
|
|
11
|
+
onClose: () => void;
|
|
12
|
+
/**
|
|
13
|
+
* Modal title
|
|
14
|
+
* @default "Anda berada di luar area pemesanan"
|
|
15
|
+
*/
|
|
16
|
+
title?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Modal message content
|
|
19
|
+
* @default "Pemesanan tiket tidak dapat dilakukan dari lokasi Anda saat ini..."
|
|
20
|
+
*/
|
|
21
|
+
message?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Image source URL
|
|
24
|
+
* @default "/assets/images/illustrations/radius.svg"
|
|
25
|
+
*/
|
|
26
|
+
imageSrc?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Image alt text
|
|
29
|
+
* @default "Radius Illustration"
|
|
30
|
+
*/
|
|
31
|
+
imageAlt?: string;
|
|
32
|
+
/**
|
|
33
|
+
* Image width
|
|
34
|
+
* @default 361
|
|
35
|
+
*/
|
|
36
|
+
imageWidth?: number;
|
|
37
|
+
/**
|
|
38
|
+
* Image height
|
|
39
|
+
* @default 203
|
|
40
|
+
*/
|
|
41
|
+
imageHeight?: number;
|
|
42
|
+
/**
|
|
43
|
+
* Button text
|
|
44
|
+
* @default "Tutup & Coba Lagi"
|
|
45
|
+
*/
|
|
46
|
+
buttonText?: string;
|
|
47
|
+
/**
|
|
48
|
+
* Button click handler (if not provided, uses onClose)
|
|
49
|
+
*/
|
|
50
|
+
onButtonClick?: () => void;
|
|
51
|
+
}
|
|
52
|
+
declare const ModalRadius: React.FC<ModalRadiusProps>;
|
|
53
|
+
|
|
54
|
+
export { ModalRadius, ModalRadius as ModalRadiusDefault, type ModalRadiusProps };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
interface ModalRadiusProps {
|
|
4
|
+
/**
|
|
5
|
+
* Whether the modal is open
|
|
6
|
+
*/
|
|
7
|
+
open: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Callback when modal should close
|
|
10
|
+
*/
|
|
11
|
+
onClose: () => void;
|
|
12
|
+
/**
|
|
13
|
+
* Modal title
|
|
14
|
+
* @default "Anda berada di luar area pemesanan"
|
|
15
|
+
*/
|
|
16
|
+
title?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Modal message content
|
|
19
|
+
* @default "Pemesanan tiket tidak dapat dilakukan dari lokasi Anda saat ini..."
|
|
20
|
+
*/
|
|
21
|
+
message?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Image source URL
|
|
24
|
+
* @default "/assets/images/illustrations/radius.svg"
|
|
25
|
+
*/
|
|
26
|
+
imageSrc?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Image alt text
|
|
29
|
+
* @default "Radius Illustration"
|
|
30
|
+
*/
|
|
31
|
+
imageAlt?: string;
|
|
32
|
+
/**
|
|
33
|
+
* Image width
|
|
34
|
+
* @default 361
|
|
35
|
+
*/
|
|
36
|
+
imageWidth?: number;
|
|
37
|
+
/**
|
|
38
|
+
* Image height
|
|
39
|
+
* @default 203
|
|
40
|
+
*/
|
|
41
|
+
imageHeight?: number;
|
|
42
|
+
/**
|
|
43
|
+
* Button text
|
|
44
|
+
* @default "Tutup & Coba Lagi"
|
|
45
|
+
*/
|
|
46
|
+
buttonText?: string;
|
|
47
|
+
/**
|
|
48
|
+
* Button click handler (if not provided, uses onClose)
|
|
49
|
+
*/
|
|
50
|
+
onButtonClick?: () => void;
|
|
51
|
+
}
|
|
52
|
+
declare const ModalRadius: React.FC<ModalRadiusProps>;
|
|
53
|
+
|
|
54
|
+
export { ModalRadius, ModalRadius as ModalRadiusDefault, type ModalRadiusProps };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var reactComponents = require('@fluentui/react-components');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
|
|
6
|
+
// src/components/ModalRadius/ModalRadius.tsx
|
|
7
|
+
var useStyles = reactComponents.makeStyles({
|
|
8
|
+
dialogSurface: {
|
|
9
|
+
maxWidth: "600px",
|
|
10
|
+
width: "100%"
|
|
11
|
+
},
|
|
12
|
+
iconContainer: {
|
|
13
|
+
display: "flex",
|
|
14
|
+
flexDirection: "column",
|
|
15
|
+
alignItems: "center",
|
|
16
|
+
gap: reactComponents.tokens.spacingVerticalL,
|
|
17
|
+
textAlign: "center",
|
|
18
|
+
paddingTop: reactComponents.tokens.spacingVerticalL,
|
|
19
|
+
paddingBottom: reactComponents.tokens.spacingVerticalL
|
|
20
|
+
},
|
|
21
|
+
image: {
|
|
22
|
+
maxWidth: "100%",
|
|
23
|
+
height: "auto"
|
|
24
|
+
},
|
|
25
|
+
infoText: {
|
|
26
|
+
marginTop: reactComponents.tokens.spacingVerticalM,
|
|
27
|
+
color: reactComponents.tokens.colorNeutralForeground3
|
|
28
|
+
},
|
|
29
|
+
buttonContainer: {
|
|
30
|
+
display: "flex",
|
|
31
|
+
width: "100%"
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
var ModalRadius = ({
|
|
35
|
+
open,
|
|
36
|
+
onClose,
|
|
37
|
+
title = "Anda berada di luar area pemesanan",
|
|
38
|
+
message = "Pemesanan tiket tidak dapat dilakukan dari lokasi Anda saat ini. Fitur pembatasan wilayah sedang aktif untuk mencegah pemesanan tidak sah.",
|
|
39
|
+
imageSrc = "/assets/images/illustrations/radius.svg",
|
|
40
|
+
imageAlt = "Radius Illustration",
|
|
41
|
+
imageWidth = 361,
|
|
42
|
+
imageHeight = 203,
|
|
43
|
+
buttonText = "Tutup & Coba Lagi",
|
|
44
|
+
onButtonClick
|
|
45
|
+
}) => {
|
|
46
|
+
const styles = useStyles();
|
|
47
|
+
const handleButtonClick = () => {
|
|
48
|
+
if (onButtonClick) {
|
|
49
|
+
onButtonClick();
|
|
50
|
+
} else {
|
|
51
|
+
onClose();
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Dialog, { open, modalType: "modal", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
|
|
55
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTitle, { children: title }),
|
|
56
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogContent, { children: [
|
|
57
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.iconContainer, children: [
|
|
58
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
59
|
+
"img",
|
|
60
|
+
{
|
|
61
|
+
src: imageSrc,
|
|
62
|
+
alt: imageAlt,
|
|
63
|
+
width: imageWidth,
|
|
64
|
+
height: imageHeight,
|
|
65
|
+
className: styles.image
|
|
66
|
+
}
|
|
67
|
+
),
|
|
68
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { style: { textAlign: "center" }, children: message })
|
|
69
|
+
] }),
|
|
70
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.buttonContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
71
|
+
reactComponents.Button,
|
|
72
|
+
{
|
|
73
|
+
style: { width: "100%" },
|
|
74
|
+
type: "button",
|
|
75
|
+
appearance: "primary",
|
|
76
|
+
onClick: handleButtonClick,
|
|
77
|
+
children: buttonText
|
|
78
|
+
}
|
|
79
|
+
) })
|
|
80
|
+
] })
|
|
81
|
+
] }) }) });
|
|
82
|
+
};
|
|
83
|
+
var ModalRadius_default = ModalRadius;
|
|
84
|
+
|
|
85
|
+
exports.ModalRadius = ModalRadius;
|
|
86
|
+
exports.ModalRadiusDefault = ModalRadius_default;
|
|
87
|
+
//# sourceMappingURL=index.js.map
|
|
88
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/ModalRadius/ModalRadius.tsx"],"names":["makeStyles","tokens","jsx","Dialog","DialogSurface","jsxs","DialogBody","DialogTitle","DialogContent","Body1","Button"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react';\r\nimport {\r\n Body1,\r\n Button,\r\n Dialog,\r\n DialogBody,\r\n DialogContent,\r\n DialogSurface,\r\n DialogTitle,\r\n makeStyles,\r\n tokens,\r\n} from '@fluentui/react-components';\r\n\r\nconst useStyles = makeStyles({\r\n dialogSurface: {\r\n maxWidth: '600px',\r\n width: '100%',\r\n },\r\n iconContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n gap: tokens.spacingVerticalL,\r\n textAlign: 'center',\r\n paddingTop: tokens.spacingVerticalL,\r\n paddingBottom: tokens.spacingVerticalL,\r\n },\r\n image: {\r\n maxWidth: '100%',\r\n height: 'auto',\r\n },\r\n infoText: {\r\n marginTop: tokens.spacingVerticalM,\r\n color: tokens.colorNeutralForeground3,\r\n },\r\n buttonContainer: {\r\n display: 'flex',\r\n width: '100%',\r\n },\r\n});\r\n\r\nexport interface ModalRadiusProps {\r\n /**\r\n * Whether the modal is open\r\n */\r\n open: boolean;\r\n \r\n /**\r\n * Callback when modal should close\r\n */\r\n onClose: () => void;\r\n \r\n /**\r\n * Modal title\r\n * @default \"Anda berada di luar area pemesanan\"\r\n */\r\n title?: string;\r\n \r\n /**\r\n * Modal message content\r\n * @default \"Pemesanan tiket tidak dapat dilakukan dari lokasi Anda saat ini...\"\r\n */\r\n message?: string;\r\n \r\n /**\r\n * Image source URL\r\n * @default \"/assets/images/illustrations/radius.svg\"\r\n */\r\n imageSrc?: string;\r\n \r\n /**\r\n * Image alt text\r\n * @default \"Radius Illustration\"\r\n */\r\n imageAlt?: string;\r\n \r\n /**\r\n * Image width\r\n * @default 361\r\n */\r\n imageWidth?: number;\r\n \r\n /**\r\n * Image height\r\n * @default 203\r\n */\r\n imageHeight?: number;\r\n \r\n /**\r\n * Button text\r\n * @default \"Tutup & Coba Lagi\"\r\n */\r\n buttonText?: string;\r\n \r\n /**\r\n * Button click handler (if not provided, uses onClose)\r\n */\r\n onButtonClick?: () => void;\r\n}\r\n\r\nexport const ModalRadius: React.FC<ModalRadiusProps> = ({\r\n open,\r\n onClose,\r\n title = 'Anda berada di luar area pemesanan',\r\n message = 'Pemesanan tiket tidak dapat dilakukan dari lokasi Anda saat ini. Fitur pembatasan wilayah sedang aktif untuk mencegah pemesanan tidak sah.',\r\n imageSrc = '/assets/images/illustrations/radius.svg',\r\n imageAlt = 'Radius Illustration',\r\n imageWidth = 361,\r\n imageHeight = 203,\r\n buttonText = 'Tutup & Coba Lagi',\r\n onButtonClick,\r\n}) => {\r\n const styles = useStyles();\r\n\r\n const handleButtonClick = () => {\r\n if (onButtonClick) {\r\n onButtonClick();\r\n } else {\r\n onClose();\r\n }\r\n };\r\n\r\n return (\r\n <Dialog open={open} modalType=\"modal\">\r\n <DialogSurface className={styles.dialogSurface}>\r\n <DialogBody>\r\n <DialogTitle>{title}</DialogTitle>\r\n <DialogContent>\r\n <div className={styles.iconContainer}>\r\n <img\r\n src={imageSrc}\r\n alt={imageAlt}\r\n width={imageWidth}\r\n height={imageHeight}\r\n className={styles.image}\r\n />\r\n <Body1 style={{ textAlign: 'center' }}>{message}</Body1>\r\n </div>\r\n <div className={styles.buttonContainer}>\r\n <Button\r\n style={{ width: '100%' }}\r\n type=\"button\"\r\n appearance=\"primary\"\r\n onClick={handleButtonClick}\r\n >\r\n {buttonText}\r\n </Button>\r\n </div>\r\n </DialogContent>\r\n </DialogBody>\r\n </DialogSurface>\r\n </Dialog>\r\n );\r\n};\r\n\r\nexport default ModalRadius;\r\n"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { makeStyles, tokens, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button } from '@fluentui/react-components';
|
|
2
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
// src/components/ModalRadius/ModalRadius.tsx
|
|
5
|
+
var useStyles = makeStyles({
|
|
6
|
+
dialogSurface: {
|
|
7
|
+
maxWidth: "600px",
|
|
8
|
+
width: "100%"
|
|
9
|
+
},
|
|
10
|
+
iconContainer: {
|
|
11
|
+
display: "flex",
|
|
12
|
+
flexDirection: "column",
|
|
13
|
+
alignItems: "center",
|
|
14
|
+
gap: tokens.spacingVerticalL,
|
|
15
|
+
textAlign: "center",
|
|
16
|
+
paddingTop: tokens.spacingVerticalL,
|
|
17
|
+
paddingBottom: tokens.spacingVerticalL
|
|
18
|
+
},
|
|
19
|
+
image: {
|
|
20
|
+
maxWidth: "100%",
|
|
21
|
+
height: "auto"
|
|
22
|
+
},
|
|
23
|
+
infoText: {
|
|
24
|
+
marginTop: tokens.spacingVerticalM,
|
|
25
|
+
color: tokens.colorNeutralForeground3
|
|
26
|
+
},
|
|
27
|
+
buttonContainer: {
|
|
28
|
+
display: "flex",
|
|
29
|
+
width: "100%"
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
var ModalRadius = ({
|
|
33
|
+
open,
|
|
34
|
+
onClose,
|
|
35
|
+
title = "Anda berada di luar area pemesanan",
|
|
36
|
+
message = "Pemesanan tiket tidak dapat dilakukan dari lokasi Anda saat ini. Fitur pembatasan wilayah sedang aktif untuk mencegah pemesanan tidak sah.",
|
|
37
|
+
imageSrc = "/assets/images/illustrations/radius.svg",
|
|
38
|
+
imageAlt = "Radius Illustration",
|
|
39
|
+
imageWidth = 361,
|
|
40
|
+
imageHeight = 203,
|
|
41
|
+
buttonText = "Tutup & Coba Lagi",
|
|
42
|
+
onButtonClick
|
|
43
|
+
}) => {
|
|
44
|
+
const styles = useStyles();
|
|
45
|
+
const handleButtonClick = () => {
|
|
46
|
+
if (onButtonClick) {
|
|
47
|
+
onButtonClick();
|
|
48
|
+
} else {
|
|
49
|
+
onClose();
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
return /* @__PURE__ */ jsx(Dialog, { open, modalType: "modal", children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
|
|
53
|
+
/* @__PURE__ */ jsx(DialogTitle, { children: title }),
|
|
54
|
+
/* @__PURE__ */ jsxs(DialogContent, { children: [
|
|
55
|
+
/* @__PURE__ */ jsxs("div", { className: styles.iconContainer, children: [
|
|
56
|
+
/* @__PURE__ */ jsx(
|
|
57
|
+
"img",
|
|
58
|
+
{
|
|
59
|
+
src: imageSrc,
|
|
60
|
+
alt: imageAlt,
|
|
61
|
+
width: imageWidth,
|
|
62
|
+
height: imageHeight,
|
|
63
|
+
className: styles.image
|
|
64
|
+
}
|
|
65
|
+
),
|
|
66
|
+
/* @__PURE__ */ jsx(Body1, { style: { textAlign: "center" }, children: message })
|
|
67
|
+
] }),
|
|
68
|
+
/* @__PURE__ */ jsx("div", { className: styles.buttonContainer, children: /* @__PURE__ */ jsx(
|
|
69
|
+
Button,
|
|
70
|
+
{
|
|
71
|
+
style: { width: "100%" },
|
|
72
|
+
type: "button",
|
|
73
|
+
appearance: "primary",
|
|
74
|
+
onClick: handleButtonClick,
|
|
75
|
+
children: buttonText
|
|
76
|
+
}
|
|
77
|
+
) })
|
|
78
|
+
] })
|
|
79
|
+
] }) }) });
|
|
80
|
+
};
|
|
81
|
+
var ModalRadius_default = ModalRadius;
|
|
82
|
+
|
|
83
|
+
export { ModalRadius, ModalRadius_default as ModalRadiusDefault };
|
|
84
|
+
//# sourceMappingURL=index.mjs.map
|
|
85
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/ModalRadius/ModalRadius.tsx"],"names":[],"mappings":";;;;AAaA,IAAM,YAAY,UAAA,CAAW;AAAA,EAC3B,aAAA,EAAe;AAAA,IACb,QAAA,EAAU,OAAA;AAAA,IACV,KAAA,EAAO;AAAA,GACT;AAAA,EACA,aAAA,EAAe;AAAA,IACb,OAAA,EAAS,MAAA;AAAA,IACT,aAAA,EAAe,QAAA;AAAA,IACf,UAAA,EAAY,QAAA;AAAA,IACZ,KAAK,MAAA,CAAO,gBAAA;AAAA,IACZ,SAAA,EAAW,QAAA;AAAA,IACX,YAAY,MAAA,CAAO,gBAAA;AAAA,IACnB,eAAe,MAAA,CAAO;AAAA,GACxB;AAAA,EACA,KAAA,EAAO;AAAA,IACL,QAAA,EAAU,MAAA;AAAA,IACV,MAAA,EAAQ;AAAA,GACV;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW,MAAA,CAAO,gBAAA;AAAA,IAClB,OAAO,MAAA,CAAO;AAAA,GAChB;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,MAAA;AAAA,IACT,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA;AA6DM,IAAM,cAA0C,CAAC;AAAA,EACtD,IAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,oCAAA;AAAA,EACR,OAAA,GAAU,4IAAA;AAAA,EACV,QAAA,GAAW,yCAAA;AAAA,EACX,QAAA,GAAW,qBAAA;AAAA,EACX,UAAA,GAAa,GAAA;AAAA,EACb,WAAA,GAAc,GAAA;AAAA,EACd,UAAA,GAAa,mBAAA;AAAA,EACb;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,SAAS,SAAA,EAAU;AAEzB,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAA,IAAI,aAAA,EAAe;AACjB,MAAA,aAAA,EAAc;AAAA,IAChB,CAAA,MAAO;AACL,MAAA,OAAA,EAAQ;AAAA,IACV;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAY,SAAA,EAAU,OAAA,EAC5B,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EAAW,MAAA,CAAO,aAAA,EAC/B,QAAA,kBAAA,IAAA,CAAC,UAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,eAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,yBACnB,aAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,aAAA,EACrB,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,QAAA;AAAA,YACL,GAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAO,UAAA;AAAA,YACP,MAAA,EAAQ,WAAA;AAAA,YACR,WAAW,MAAA,CAAO;AAAA;AAAA,SACpB;AAAA,4BACC,KAAA,EAAA,EAAM,KAAA,EAAO,EAAE,SAAA,EAAW,QAAA,IAAa,QAAA,EAAA,OAAA,EAAQ;AAAA,OAAA,EAClD,CAAA;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,eAAA,EACrB,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,EAAE,KAAA,EAAO,MAAA,EAAO;AAAA,UACvB,IAAA,EAAK,QAAA;AAAA,UACL,UAAA,EAAW,SAAA;AAAA,UACX,OAAA,EAAS,iBAAA;AAAA,UAER,QAAA,EAAA;AAAA;AAAA,OACH,EACF;AAAA,KAAA,EACF;AAAA,GAAA,EACF,GACF,CAAA,EACF,CAAA;AAEJ;AAEA,IAAO,mBAAA,GAAQ","file":"index.mjs","sourcesContent":["import React from 'react';\r\nimport {\r\n Body1,\r\n Button,\r\n Dialog,\r\n DialogBody,\r\n DialogContent,\r\n DialogSurface,\r\n DialogTitle,\r\n makeStyles,\r\n tokens,\r\n} from '@fluentui/react-components';\r\n\r\nconst useStyles = makeStyles({\r\n dialogSurface: {\r\n maxWidth: '600px',\r\n width: '100%',\r\n },\r\n iconContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n gap: tokens.spacingVerticalL,\r\n textAlign: 'center',\r\n paddingTop: tokens.spacingVerticalL,\r\n paddingBottom: tokens.spacingVerticalL,\r\n },\r\n image: {\r\n maxWidth: '100%',\r\n height: 'auto',\r\n },\r\n infoText: {\r\n marginTop: tokens.spacingVerticalM,\r\n color: tokens.colorNeutralForeground3,\r\n },\r\n buttonContainer: {\r\n display: 'flex',\r\n width: '100%',\r\n },\r\n});\r\n\r\nexport interface ModalRadiusProps {\r\n /**\r\n * Whether the modal is open\r\n */\r\n open: boolean;\r\n \r\n /**\r\n * Callback when modal should close\r\n */\r\n onClose: () => void;\r\n \r\n /**\r\n * Modal title\r\n * @default \"Anda berada di luar area pemesanan\"\r\n */\r\n title?: string;\r\n \r\n /**\r\n * Modal message content\r\n * @default \"Pemesanan tiket tidak dapat dilakukan dari lokasi Anda saat ini...\"\r\n */\r\n message?: string;\r\n \r\n /**\r\n * Image source URL\r\n * @default \"/assets/images/illustrations/radius.svg\"\r\n */\r\n imageSrc?: string;\r\n \r\n /**\r\n * Image alt text\r\n * @default \"Radius Illustration\"\r\n */\r\n imageAlt?: string;\r\n \r\n /**\r\n * Image width\r\n * @default 361\r\n */\r\n imageWidth?: number;\r\n \r\n /**\r\n * Image height\r\n * @default 203\r\n */\r\n imageHeight?: number;\r\n \r\n /**\r\n * Button text\r\n * @default \"Tutup & Coba Lagi\"\r\n */\r\n buttonText?: string;\r\n \r\n /**\r\n * Button click handler (if not provided, uses onClose)\r\n */\r\n onButtonClick?: () => void;\r\n}\r\n\r\nexport const ModalRadius: React.FC<ModalRadiusProps> = ({\r\n open,\r\n onClose,\r\n title = 'Anda berada di luar area pemesanan',\r\n message = 'Pemesanan tiket tidak dapat dilakukan dari lokasi Anda saat ini. Fitur pembatasan wilayah sedang aktif untuk mencegah pemesanan tidak sah.',\r\n imageSrc = '/assets/images/illustrations/radius.svg',\r\n imageAlt = 'Radius Illustration',\r\n imageWidth = 361,\r\n imageHeight = 203,\r\n buttonText = 'Tutup & Coba Lagi',\r\n onButtonClick,\r\n}) => {\r\n const styles = useStyles();\r\n\r\n const handleButtonClick = () => {\r\n if (onButtonClick) {\r\n onButtonClick();\r\n } else {\r\n onClose();\r\n }\r\n };\r\n\r\n return (\r\n <Dialog open={open} modalType=\"modal\">\r\n <DialogSurface className={styles.dialogSurface}>\r\n <DialogBody>\r\n <DialogTitle>{title}</DialogTitle>\r\n <DialogContent>\r\n <div className={styles.iconContainer}>\r\n <img\r\n src={imageSrc}\r\n alt={imageAlt}\r\n width={imageWidth}\r\n height={imageHeight}\r\n className={styles.image}\r\n />\r\n <Body1 style={{ textAlign: 'center' }}>{message}</Body1>\r\n </div>\r\n <div className={styles.buttonContainer}>\r\n <Button\r\n style={{ width: '100%' }}\r\n type=\"button\"\r\n appearance=\"primary\"\r\n onClick={handleButtonClick}\r\n >\r\n {buttonText}\r\n </Button>\r\n </div>\r\n </DialogContent>\r\n </DialogBody>\r\n </DialogSurface>\r\n </Dialog>\r\n );\r\n};\r\n\r\nexport default ModalRadius;\r\n"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@asdp/ferryui",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "ASDP Ferry UI Component Library",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.mjs",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist",
|
|
10
|
+
"README.md"
|
|
11
|
+
],
|
|
12
|
+
"scripts": {
|
|
13
|
+
"build": "tsup",
|
|
14
|
+
"dev": "tsup --watch",
|
|
15
|
+
"test": "echo 'Test script not configured yet'",
|
|
16
|
+
"typecheck": "tsc --noEmit",
|
|
17
|
+
"prepublishOnly": "npm run build",
|
|
18
|
+
"version": "npm run build && git add -A dist"
|
|
19
|
+
},
|
|
20
|
+
"publishConfig": {
|
|
21
|
+
"access": "public"
|
|
22
|
+
},
|
|
23
|
+
"repository": {
|
|
24
|
+
"type": "git",
|
|
25
|
+
"url": "https://gitlab.swamedia.xyz/asdp/ferry-ui.git"
|
|
26
|
+
},
|
|
27
|
+
"keywords": [
|
|
28
|
+
"asdp",
|
|
29
|
+
"ferry",
|
|
30
|
+
"ui",
|
|
31
|
+
"components",
|
|
32
|
+
"react",
|
|
33
|
+
"fluentui"
|
|
34
|
+
],
|
|
35
|
+
"author": "ASDP Team",
|
|
36
|
+
"license": "UNLICENSED",
|
|
37
|
+
"private": false,
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"@types/react": "^18.2.0",
|
|
40
|
+
"@types/react-dom": "^18.2.0",
|
|
41
|
+
"tsup": "^8.0.0",
|
|
42
|
+
"typescript": "^5.3.0"
|
|
43
|
+
},
|
|
44
|
+
"peerDependencies": {
|
|
45
|
+
"@fluentui/react-components": "^9.0.0",
|
|
46
|
+
"react": "^18.0.0",
|
|
47
|
+
"react-dom": "^18.0.0"
|
|
48
|
+
},
|
|
49
|
+
"dependencies": {}
|
|
50
|
+
}
|