server-time-timer-yolabs-ui 1.0.1 → 1.0.3

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.
Files changed (2) hide show
  1. package/README.md +100 -76
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,85 +1,60 @@
1
- Perfect! Here’s a **professional README** for your `server-time-timer-ui` package, fully detailed for enterprise usage:
1
+
2
+
3
+ # ⏱️ server-time-timer-yolabs-ui
4
+
5
+ ** SharePoint styled React countdown timer UI for `server-time-timer-yolabs`**
6
+
7
+ Professional, **enterprise-grade React UI** for server-synchronized countdowns. Fully dynamic, customizable, and framework-agnostic core logic.
2
8
 
3
9
  ---
4
10
 
5
- # ⏱️ server-time-timer-ui
11
+ ## 🚀 Why Use This UI?
12
+
13
+ Unlike traditional timers relying on the **client clock**:
6
14
 
7
- **Enterprise-grade server-synchronized countdown timer UI for React and Next.js**
8
- Designed for **consistent countdown across all devices**, with optional **customization, layouts, and progress display**.
15
+ * 🔒 **Server time is the single source of truth** → accurate across devices
16
+ * 🌍 **Same countdown across all platforms**
17
+ * 🧩 **Dynamic sizes, layouts, themes, and colors**
18
+ * ⚡ **Optional progress bar**
19
+ * 🕒 **Optional units** (days, hours, minutes, seconds)
20
+ * 🏢 **Enterprise-ready design** with FluentUI / SharePoint style
9
21
 
10
22
  ---
11
23
 
12
- ## 🚀 Key Features
24
+ ### ⚡ Difference From Other Timers
13
25
 
14
- * 🔒 **Server time is the single source of truth** (uses `server-time-timer-yoLabs`)
15
- * 🌍 Same countdown across **all platforms**
16
- * 🧩 **Dynamic sizes**: `sm`, `md`, `lg`
17
- * 🖌️ **Custom themes and colors**: light, dark, brand, or custom colors
18
- * ⚡ Optional **progress bar**
19
- * 🕒 Optional **unit display**: days, hours, minutes, seconds
20
- * 🏢 **Enterprise-ready, React / Next.js / Telegram Mini Apps compatible**
26
+ | Feature | Normal Timers | `server-time-timer-yolabs-ui` |
27
+ | -------------------------- | --------------- | --------------------------------- |
28
+ | Source of Time | Client | Server (trusted) |
29
+ | Consistency Across Devices | ❌ Can differ | ✅ Always same |
30
+ | Drift Handling | ❌ None | ✅ Automatic correction |
31
+ | Layouts | ❌ Fixed | ✅ Horizontal / Vertical / Compact |
32
+ | Unit Display | ❌ Fixed | ✅ Optional per unit |
33
+ | Progress Bar | ❌ Not built-in | ✅ Optional & dynamic |
34
+ | Enterprise UI | ❌ Simple | ✅ SharePoint style |
35
+ | Security | ❌ Easy to cheat | ✅ Resistant to manipulation |
21
36
 
22
37
  ---
23
38
 
24
39
  ## 📦 Installation
25
40
 
26
41
  ```bash
27
- npm install server-time-timer-ui server-time-timer-yoLabs
42
+ npm install server-time-timer-yolabs-ui
28
43
  ```
29
44
 
30
45
  or
31
46
 
32
47
  ```bash
33
- yarn add server-time-timer-ui server-time-timer-yoLabs
48
+ yarn add server-time-timer-yolabs-ui
34
49
  ```
35
50
 
36
51
  ---
37
52
 
38
- ## 🧠 How It Works
39
-
40
- 1️⃣ Server sends the **current time** (`serverNow`)
41
- 2️⃣ Client calculates **offset**
42
- 3️⃣ Countdown runs locally using offset
43
- 4️⃣ Optional **re-sync** keeps everything accurate
44
-
45
- ✅ Result: perfect synchronized countdown across devices.
46
-
47
- ---
48
-
49
- ## 🔧 Props / Options
50
-
51
- ```ts
52
- export interface ServerTimerUIProps {
53
- serverNow: string; // Current server time (UTC)
54
- endTime: string; // Countdown target time (UTC)
55
- size?: 'sm' | 'md' | 'lg'; // Default: 'md'
56
- layout?: 'horizontal' | 'vertical' | 'compact'; // Default: 'horizontal'
57
- theme?: 'light' | 'dark' | 'brand'; // Default: 'light'
58
- showProgress?: boolean; // Show progress bar, default true
59
- onEnd?: () => void; // Callback when countdown ends
60
- className?: string; // Optional wrapper className
61
- customColors?: { // Optional colors
62
- background?: string;
63
- text?: string;
64
- unitBackground?: string;
65
- progress?: string;
66
- };
67
- showUnits?: { // Optional unit display
68
- days?: boolean;
69
- hours?: boolean;
70
- minutes?: boolean;
71
- seconds?: boolean;
72
- };
73
- }
74
- ```
75
-
76
- ---
77
-
78
- ## 🔧 Basic Usage
53
+ ## 🔧 React / Next.js Usage
79
54
 
80
55
  ```tsx
81
56
  import React from 'react';
82
- import { ServerTimerUI } from 'server-time-timer-ui';
57
+ import { ServerTimerUI } from 'server-time-timer-yolabs-ui';
83
58
 
84
59
  export default function App() {
85
60
  return (
@@ -87,6 +62,7 @@ export default function App() {
87
62
  serverNow="2025-12-25T12:00:00Z"
88
63
  endTime="2025-12-25T12:10:00Z"
89
64
  size="lg"
65
+ layout="horizontal"
90
66
  theme="brand"
91
67
  showProgress={true}
92
68
  customColors={{
@@ -95,7 +71,7 @@ export default function App() {
95
71
  unitBackground: '#fffbdd',
96
72
  progress: '#0078d4'
97
73
  }}
98
- showUnits={{ days: false, hours: true, minutes: true, seconds: true }}
74
+ showUnits={{ days: true, hours: true, minutes: true, seconds: true }}
99
75
  onEnd={() => alert('Time is up!')}
100
76
  />
101
77
  );
@@ -104,22 +80,46 @@ export default function App() {
104
80
 
105
81
  ---
106
82
 
107
- ## 🎨 Layouts
108
-
109
- * **Horizontal (default)**: Units aligned in a row
110
- * **Vertical**: Units stacked in a column
111
- * **Compact**: Smaller units for tight spaces
83
+ ## 🧩 Props / Options
112
84
 
113
- ```tsx
114
- <ServerTimerUI layout="vertical" />
115
- <ServerTimerUI layout="compact" />
85
+ ```ts
86
+ export interface ServerTimerUIProps {
87
+ serverNow: string;
88
+ endTime: string;
89
+ size?: 'sm' | 'md' | 'lg';
90
+ layout?: 'horizontal' | 'vertical' | 'compact';
91
+ theme?: 'light' | 'dark' | 'brand';
92
+ showProgress?: boolean;
93
+ onEnd?: () => void;
94
+ className?: string;
95
+ customColors?: {
96
+ background?: string;
97
+ text?: string;
98
+ unitBackground?: string;
99
+ progress?: string;
100
+ };
101
+ showUnits?: {
102
+ days?: boolean;
103
+ hours?: boolean;
104
+ minutes?: boolean;
105
+ seconds?: boolean;
106
+ };
107
+ }
116
108
  ```
117
109
 
118
110
  ---
119
111
 
112
+ ## 🎨 Layouts
113
+
114
+ * **Horizontal** – units in a row
115
+ * **Vertical** – units stacked
116
+ * **Compact** – small, space-saving units
117
+
118
+ ---
119
+
120
120
  ## ⚡ Custom Colors
121
121
 
122
- ```tsx
122
+ ```ts
123
123
  customColors={{
124
124
  background: '#fff8f0',
125
125
  text: '#333',
@@ -128,45 +128,69 @@ customColors={{
128
128
  }}
129
129
  ```
130
130
 
131
- ✅ Fully optional; uses theme defaults if not provided.
131
+ ✅ Optional, fallback to theme defaults.
132
132
 
133
133
  ---
134
134
 
135
135
  ## 🕒 Optional Units
136
136
 
137
- ```tsx
137
+ ```ts
138
138
  showUnits={{ days: false, hours: true, minutes: true, seconds: true }}
139
139
  ```
140
140
 
141
- ✅ Hide days, hours, minutes, or seconds dynamically based on UI needs.
141
+ ✅ Hide or show units dynamically.
142
142
 
143
143
  ---
144
144
 
145
- ## 🔁 Resync (Recommended for long timers)
145
+ ## 🔁 Resync for Long Timers
146
146
 
147
147
  ```ts
148
148
  setInterval(async () => {
149
149
  const res = await fetch('/api/server-time');
150
150
  const data = await res.json();
151
151
  timer.sync(data.now);
152
- }, 30000);
152
+ }, 30000); // every 30 seconds
153
+ ```
154
+
155
+ ---
156
+
157
+ ## 🔧 Angular / Framework-Agnostic Usage
158
+
159
+ Use the **core package** (`server-time-timer-yolabs`) for Angular or Vanilla JS:
160
+
161
+ ```ts
162
+ import { createServerTimer } from 'server-time-timer-yolabs';
163
+
164
+ const timer = createServerTimer({
165
+ serverNow: new Date().toISOString(),
166
+ endTime: new Date(Date.now() + 10*60*1000).toISOString()
167
+ });
168
+
169
+ timer.onTick((t) => {
170
+ console.log(`${t.hours}h ${t.minutes}m ${t.seconds}s`);
171
+ });
172
+
173
+ timer.start();
153
174
  ```
154
175
 
176
+ ✅ Wrap values in your own Angular components for UI.
177
+
155
178
  ---
156
179
 
157
180
  ## 🏢 Use Cases
158
181
 
159
- * 🎟️ Lottery & raffle countdowns
182
+ * 🎟️ Lottery & raffle systems
160
183
  * 🛒 Flash sales & limited offers
161
- * 📝 Online exams
162
- * 🎮 Games & event timers
184
+ * 📝 Online exams & quizzes
185
+ * 🎮 Games & events
163
186
  * 📱 Telegram Mini Apps
164
- * 🌐 Distributed systems
187
+ * 🌐 Distributed enterprise apps
165
188
 
166
189
  ---
167
190
 
168
191
  ## 📜 License
169
192
 
170
- YonasLabs
193
+ yolabs © Yonas
171
194
 
172
195
  ---
196
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "server-time-timer-yolabs-ui",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "description": "FluentUI/SharePoint styled React countdown timer UI for server-time-timer-yoLabs",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",