@ttdk-design-system/library-react 0.0.0-stage → 1.0.1

package/README.md

@@ -1,3 +1,107 @@
-# Temporary Holding Version
+# @ttdk-design-system/library-react
+
+Official React component library for **TTDK Design System**, developed for the Digital Transformation Office (DTO) Kementerian Kesehatan Republik Indonesia (SATUSEHAT ecosystem).
+
+Built with Mitosis for seamless cross-framework consistency, strong TypeScript typings, and mobile webview readiness.
+
+---
+
+## 📦 Installation
+
+```bash
+npm install @ttdk-design-system/library-react
+```
+
+---
+
+## 🚀 Quick Start
+
+### 1. Import Design Tokens (CSS)
+
+Import the base design tokens (colors, typography, radii, spacing) in your application entry file (e.g., `main.tsx`, `index.tsx`, or `App.tsx`):
+
+```typescript
+import "@ttdk-design-system/library-react/theme/tokens.css";
+```
+
+### 2. Import Component Stylesheets & Components
+
+Each component comes with modular styling for optimal bundle sizes:
+
+```tsx
+import React, { useState } from "react";
+import Button from "@ttdk-design-system/library-react/web/button";
+import "@ttdk-design-system/library-react/web/button/button.css";
+
+import Input from "@ttdk-design-system/library-react/web/input";
+import "@ttdk-design-system/library-react/web/input/input.css";
+
+import BottomSheet from "@ttdk-design-system/library-react/webview/bottomsheet";
+import "@ttdk-design-system/library-react/webview/bottomsheet/bottomsheet.css";
+
+export function ExamplePage() {
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [name, setName] = useState("");
+
+  return (
+    <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 16 }}>
+      <Input
+        label="Nama Pasien"
+        placeholder="Masukkan nama lengkap"
+        value={name}
+        onChange={(e: any) => setName(e.target.value)}
+      />
+
+      <Button variant="primary" onClick={() => setSheetOpen(true)}>
+        Buka Detail (BottomSheet)
+      </Button>
+
+      <BottomSheet
+        open={sheetOpen}
+        mode="auto"
+        height="md"
+        title="Detail Rekam Medis"
+        description="Hasil pemeriksaan laboratorium pasien"
+        close
+        onClose={() => setSheetOpen(false)}
+      >
+        <p>Halo, {name || "Pasien"}! Data medis Anda telah terverifikasi di SATUSEHAT.</p>
+      </BottomSheet>
+    </div>
+  );
+}
+```
+
+---
+
+## 📱 Modules
+
+TTDK Design System is split into two specialized modules:
+
+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).
+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).
+
+---
+
+## 🎨 Tailwind CSS Integration
+
+Include the TTDK preset in your `tailwind.config.js`:
+
+```javascript
+module.exports = {
+  presets: [
+    require("@ttdk-design-system/library-react/tailwind-preset.cjs")
+  ],
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@ttdk-design-system/library-react/**/*.{js,ts,jsx,tsx}"
+  ]
+};
+```
+
+---
+
+## 📄 License
+
+MIT &copy; DTO Kementerian Kesehatan Republik Indonesia.
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.