@ttdk-design-system/library-svelte 1.0.0 → 1.0.1
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 +103 -0
- package/package.json +2 -1
package/README.md
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
# @ttdk-design-system/library-svelte
|
|
2
|
+
|
|
3
|
+
Official Svelte component library for **TTDK Design System**, developed for the Digital Transformation Office (DTO) Kementerian Kesehatan Republik Indonesia (SATUSEHAT ecosystem).
|
|
4
|
+
|
|
5
|
+
Built with Mitosis for seamless cross-framework consistency, strong TypeScript typings, and mobile webview readiness.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 📦 Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @ttdk-design-system/library-svelte
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## 🚀 Quick Start
|
|
18
|
+
|
|
19
|
+
### 1. Import Design Tokens (CSS)
|
|
20
|
+
|
|
21
|
+
Import the base design tokens (colors, typography, radii, spacing) in your root layout or entry file (e.g., `+layout.svelte` or `App.svelte`):
|
|
22
|
+
|
|
23
|
+
```typescript
|
|
24
|
+
import "@ttdk-design-system/library-svelte/theme/tokens.css";
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### 2. Import Component Stylesheets & Components
|
|
28
|
+
|
|
29
|
+
Each component comes with modular styling for optimal bundle sizes:
|
|
30
|
+
|
|
31
|
+
```svelte
|
|
32
|
+
<script lang="ts">
|
|
33
|
+
import Button from "@ttdk-design-system/library-svelte/web/button";
|
|
34
|
+
import "@ttdk-design-system/library-svelte/web/button/button.css";
|
|
35
|
+
|
|
36
|
+
import Input from "@ttdk-design-system/library-svelte/web/input";
|
|
37
|
+
import "@ttdk-design-system/library-svelte/web/input/input.css";
|
|
38
|
+
|
|
39
|
+
import BottomSheet from "@ttdk-design-system/library-svelte/webview/bottomsheet";
|
|
40
|
+
import "@ttdk-design-system/library-svelte/webview/bottomsheet/bottomsheet.css";
|
|
41
|
+
|
|
42
|
+
let sheetOpen = false;
|
|
43
|
+
let name = "";
|
|
44
|
+
</script>
|
|
45
|
+
|
|
46
|
+
<div style="padding: 24px; display: flex; flex-direction: column; gap: 16px;">
|
|
47
|
+
<Input
|
|
48
|
+
bind:value={name}
|
|
49
|
+
label="Nama Pasien"
|
|
50
|
+
placeholder="Masukkan nama lengkap"
|
|
51
|
+
/>
|
|
52
|
+
|
|
53
|
+
<Button variant="primary" on:click={() => (sheetOpen = true)}>
|
|
54
|
+
Buka Detail (BottomSheet)
|
|
55
|
+
</Button>
|
|
56
|
+
|
|
57
|
+
<BottomSheet
|
|
58
|
+
open={sheetOpen}
|
|
59
|
+
mode="auto"
|
|
60
|
+
height="md"
|
|
61
|
+
title="Detail Rekam Medis"
|
|
62
|
+
description="Hasil pemeriksaan laboratorium pasien"
|
|
63
|
+
close={true}
|
|
64
|
+
onClose={() => (sheetOpen = false)}
|
|
65
|
+
>
|
|
66
|
+
<p>Halo, {name || "Pasien"}! Data medis Anda telah terverifikasi di SATUSEHAT.</p>
|
|
67
|
+
</BottomSheet>
|
|
68
|
+
</div>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
## 📱 Modules
|
|
74
|
+
|
|
75
|
+
TTDK Design System is split into two specialized modules:
|
|
76
|
+
|
|
77
|
+
1. **`web`**: Components designed for desktop & mobile responsive web applications (Accordion, Alert, Avatar, Badge, Button, Calendar, Card, Checkbox, Chip, Dropdown, Modal, Pagination, Popover, Selectbox, Sonner, Table, Tabs, Text, Textarea, Tooltip).
|
|
78
|
+
2. **`webview`**: Components optimized for mobile in-app webviews (e.g., SATUSEHAT Mobile), featuring native Apple HIG & Material 3 aesthetics, notch safe-area insets, swipe gestures, and pull-to-dismiss behavior (BottomSheet, ButtonIos, ButtonMaterial).
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
## 🎨 Tailwind CSS Integration
|
|
83
|
+
|
|
84
|
+
Include the TTDK preset in your `tailwind.config.js`:
|
|
85
|
+
|
|
86
|
+
```javascript
|
|
87
|
+
module.exports = {
|
|
88
|
+
presets: [
|
|
89
|
+
require("@ttdk-design-system/library-svelte/tailwind-preset.cjs")
|
|
90
|
+
],
|
|
91
|
+
content: [
|
|
92
|
+
"./src/**/*.{svelte,js,ts,jsx,tsx}",
|
|
93
|
+
"./node_modules/@ttdk-design-system/library-svelte/**/*.{svelte,js,ts,jsx,tsx}"
|
|
94
|
+
]
|
|
95
|
+
};
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## 📄 License
|
|
101
|
+
|
|
102
|
+
MIT © DTO Kementerian Kesehatan Republik Indonesia.
|
|
103
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ttdk-design-system/library-svelte",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public",
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -684,6 +684,7 @@
|
|
|
684
684
|
"ttdk-manifest.json",
|
|
685
685
|
"AI_GUIDE.md",
|
|
686
686
|
"llms.txt",
|
|
687
|
+
"README.md",
|
|
687
688
|
"!dist/**/*.test.*",
|
|
688
689
|
"!dist/**/*.spec.*"
|
|
689
690
|
],
|