react-native-bikram-sambat 0.1.1 → 0.1.2
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 +24 -271
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,33 +1,19 @@
|
|
|
1
1
|
# react-native-bikram-sambat
|
|
2
2
|
|
|
3
|
-
A
|
|
3
|
+
A TypeScript-first Bikram Sambat calendar toolkit for React Native.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
`react-native-bikram-sambat` provides BS date conversion utilities and ready-to-use React Native components for Nepali calendar UIs. It includes date pickers, range pickers, formatting and parsing helpers, locale support, numeral conversion, theming, dark mode support, and accessibility-friendly calendar interactions.
|
|
6
6
|
|
|
7
|
-
##
|
|
7
|
+
## How to Use
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
npm install react-native-bikram-sambat
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
or
|
|
14
|
-
|
|
15
|
-
```sh
|
|
16
|
-
yarn add react-native-bikram-sambat
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Quick Start
|
|
20
|
-
|
|
21
|
-
### Date Picker
|
|
22
|
-
|
|
23
|
-
The simplest way to let users pick a BS date:
|
|
9
|
+
### Date picker
|
|
24
10
|
|
|
25
11
|
```tsx
|
|
26
12
|
import React, { useState } from 'react';
|
|
27
13
|
import { SafeAreaView } from 'react-native';
|
|
28
14
|
import {
|
|
29
15
|
NepaliDatePicker,
|
|
30
|
-
type BSDateValue
|
|
16
|
+
type BSDateValue,
|
|
31
17
|
} from 'react-native-bikram-sambat';
|
|
32
18
|
|
|
33
19
|
export default function App() {
|
|
@@ -47,69 +33,35 @@ export default function App() {
|
|
|
47
33
|
}
|
|
48
34
|
```
|
|
49
35
|
|
|
50
|
-
### Calendar
|
|
51
|
-
|
|
52
|
-
For inline calendar display:
|
|
36
|
+
### Calendar
|
|
53
37
|
|
|
54
38
|
```tsx
|
|
55
39
|
import React, { useState } from 'react';
|
|
56
40
|
import { SafeAreaView } from 'react-native';
|
|
57
|
-
import { NepaliCalendar, type BSDateValue } from 'react-native-bikram-sambat';
|
|
58
|
-
|
|
59
|
-
export default function App() {
|
|
60
|
-
const [date, setDate] = useState<BSDateValue | null>(null);
|
|
61
|
-
|
|
62
|
-
return (
|
|
63
|
-
<SafeAreaView style={{ flex: 1 }}>
|
|
64
|
-
<NepaliCalendar value={date} onChange={setDate} />
|
|
65
|
-
</SafeAreaView>
|
|
66
|
-
);
|
|
67
|
-
}
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
### Date Picker Modal
|
|
71
|
-
|
|
72
|
-
For custom modal control:
|
|
73
|
-
|
|
74
|
-
```tsx
|
|
75
|
-
import React, { useState } from 'react';
|
|
76
|
-
import { Button, SafeAreaView } from 'react-native';
|
|
77
41
|
import {
|
|
78
|
-
|
|
79
|
-
type BSDateValue
|
|
42
|
+
NepaliCalendar,
|
|
43
|
+
type BSDateValue,
|
|
80
44
|
} from 'react-native-bikram-sambat';
|
|
81
45
|
|
|
82
46
|
export default function App() {
|
|
83
|
-
const [visible, setVisible] = useState(false);
|
|
84
47
|
const [date, setDate] = useState<BSDateValue | null>(null);
|
|
85
48
|
|
|
86
49
|
return (
|
|
87
|
-
<SafeAreaView style={{ flex: 1
|
|
88
|
-
<
|
|
89
|
-
|
|
90
|
-
<DatePickerModal
|
|
91
|
-
visible={visible}
|
|
92
|
-
value={date}
|
|
93
|
-
onChange={setDate}
|
|
94
|
-
onClose={() => setVisible(false)}
|
|
95
|
-
locale="ne"
|
|
96
|
-
numerals="devanagari"
|
|
97
|
-
/>
|
|
50
|
+
<SafeAreaView style={{ flex: 1 }}>
|
|
51
|
+
<NepaliCalendar value={date} onChange={setDate} />
|
|
98
52
|
</SafeAreaView>
|
|
99
53
|
);
|
|
100
54
|
}
|
|
101
55
|
```
|
|
102
56
|
|
|
103
|
-
### Range
|
|
104
|
-
|
|
105
|
-
For selecting a date range:
|
|
57
|
+
### Range picker
|
|
106
58
|
|
|
107
59
|
```tsx
|
|
108
60
|
import React, { useState } from 'react';
|
|
109
61
|
import { SafeAreaView } from 'react-native';
|
|
110
62
|
import {
|
|
111
63
|
NepaliRangePicker,
|
|
112
|
-
type DateRangeValue
|
|
64
|
+
type DateRangeValue,
|
|
113
65
|
} from 'react-native-bikram-sambat';
|
|
114
66
|
|
|
115
67
|
export default function App() {
|
|
@@ -132,227 +84,28 @@ export default function App() {
|
|
|
132
84
|
}
|
|
133
85
|
```
|
|
134
86
|
|
|
135
|
-
###
|
|
87
|
+
### Core utilities
|
|
136
88
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
```tsx
|
|
140
|
-
import React, { useState } from 'react';
|
|
141
|
-
import { Button, SafeAreaView } from 'react-native';
|
|
89
|
+
```ts
|
|
142
90
|
import {
|
|
143
|
-
|
|
144
|
-
|
|
91
|
+
toBS,
|
|
92
|
+
toAD,
|
|
93
|
+
formatBS,
|
|
94
|
+
parseBS,
|
|
95
|
+
toNepaliNumerals,
|
|
96
|
+
toLatinNumerals,
|
|
145
97
|
} from 'react-native-bikram-sambat';
|
|
146
98
|
|
|
147
|
-
export default function App() {
|
|
148
|
-
const [visible, setVisible] = useState(false);
|
|
149
|
-
const [range, setRange] = useState<DateRangeValue>({
|
|
150
|
-
start: null,
|
|
151
|
-
end: null,
|
|
152
|
-
});
|
|
153
|
-
|
|
154
|
-
return (
|
|
155
|
-
<SafeAreaView style={{ flex: 1, padding: 16 }}>
|
|
156
|
-
<Button title="Open range picker" onPress={() => setVisible(true)} />
|
|
157
|
-
|
|
158
|
-
<RangePickerModal
|
|
159
|
-
visible={visible}
|
|
160
|
-
value={range}
|
|
161
|
-
onChange={setRange}
|
|
162
|
-
onClose={() => setVisible(false)}
|
|
163
|
-
locale="ne"
|
|
164
|
-
numerals="devanagari"
|
|
165
|
-
/>
|
|
166
|
-
</SafeAreaView>
|
|
167
|
-
);
|
|
168
|
-
}
|
|
169
|
-
```
|
|
170
|
-
|
|
171
|
-
## Core Utilities
|
|
172
|
-
|
|
173
|
-
### BS ⇄ AD Conversion
|
|
174
|
-
|
|
175
|
-
```ts
|
|
176
|
-
import { toBS, toAD, isValidBSDate, isValidADDate } from 'react-native-bikram-sambat';
|
|
177
|
-
|
|
178
99
|
const bs = toBS({ calendar: 'AD', year: 2024, month: 4, day: 13 });
|
|
179
100
|
const ad = toAD({ calendar: 'BS', year: 2081, month: 1, day: 1 });
|
|
180
101
|
|
|
181
|
-
const
|
|
182
|
-
const
|
|
183
|
-
```
|
|
184
|
-
|
|
185
|
-
### Formatting and Parsing
|
|
186
|
-
|
|
187
|
-
```ts
|
|
188
|
-
import { formatBS, parseBS, toNepaliNumerals, toLatinNumerals } from 'react-native-bikram-sambat';
|
|
189
|
-
|
|
190
|
-
const date = { calendar: 'BS', year: 2081, month: 1, day: 5 };
|
|
191
|
-
|
|
192
|
-
formatBS(date, 'yyyy-MM-dd'); // '2081-01-05'
|
|
193
|
-
formatBS(date, 'dd MMMM yyyy'); // '05 Baisakh 2081'
|
|
194
|
-
formatBS(date, 'dd MMMM yyyy', { locale: 'ne', numerals: 'devanagari' }); // '०५ बैशाख २०८१'
|
|
195
|
-
|
|
196
|
-
parseBS('2081-01-05', 'yyyy-MM-dd'); // { calendar: 'BS', year: 2081, month: 1, day: 5 }
|
|
197
|
-
|
|
198
|
-
toNepaliNumerals('2081'); // '२०८१'
|
|
199
|
-
toLatinNumerals('२०८१'); // '2081'
|
|
200
|
-
```
|
|
201
|
-
|
|
202
|
-
### Date Arithmetic
|
|
203
|
-
|
|
204
|
-
```ts
|
|
205
|
-
import { compareBS, addBSDays, subBSDays, todayBS } from 'react-native-bikram-sambat';
|
|
206
|
-
|
|
207
|
-
const today = todayBS();
|
|
208
|
-
const future = addBSDays(today, 30);
|
|
209
|
-
const past = subBSDays(today, 30);
|
|
210
|
-
const cmp = compareBS(future, past); // > 0
|
|
211
|
-
```
|
|
212
|
-
|
|
213
|
-
### Date Keys
|
|
214
|
-
|
|
215
|
-
```ts
|
|
216
|
-
import { createBSDateKey, parseBSDateKey } from 'react-native-bikram-sambat';
|
|
217
|
-
|
|
218
|
-
const key = createBSDateKey({ calendar: 'BS', year: 2081, month: 1, day: 1 });
|
|
219
|
-
// '2081-01-01'
|
|
220
|
-
|
|
221
|
-
const parsed = parseBSDateKey('2081-01-01');
|
|
222
|
-
// { calendar: 'BS', year: 2081, month: 1, day: 1 }
|
|
223
|
-
```
|
|
224
|
-
|
|
225
|
-
### Supported Range
|
|
226
|
-
|
|
227
|
-
```ts
|
|
228
|
-
import { getSupportedBSRange, isBSDateInSupportedRange } from 'react-native-bikram-sambat';
|
|
229
|
-
|
|
230
|
-
const range = getSupportedBSRange(); // { start: 2081, end: 2081 }
|
|
231
|
-
const inRange = isBSDateInSupportedRange({ calendar: 'BS', year: 2081, month: 1, day: 1 });
|
|
232
|
-
```
|
|
233
|
-
|
|
234
|
-
### Calendar Grid
|
|
235
|
-
|
|
236
|
-
```ts
|
|
237
|
-
import { getCalendarMonthGrid } from 'react-native-bikram-sambat';
|
|
238
|
-
|
|
239
|
-
const grid = getCalendarMonthGrid({
|
|
240
|
-
year: 2081,
|
|
241
|
-
month: 1,
|
|
242
|
-
weekStartsOn: 0, // 0 = Sunday
|
|
243
|
-
minDate: { calendar: 'BS', year: 2081, month: 1, day: 1 },
|
|
244
|
-
maxDate: { calendar: 'BS', year: 2081, month: 12, day: 30 },
|
|
245
|
-
});
|
|
246
|
-
|
|
247
|
-
// grid.weeks is a 2D array of cells
|
|
248
|
-
```
|
|
249
|
-
|
|
250
|
-
## TypeScript Usage
|
|
251
|
-
|
|
252
|
-
All public APIs are fully typed:
|
|
253
|
-
|
|
254
|
-
```ts
|
|
255
|
-
import {
|
|
256
|
-
type BSDateValue,
|
|
257
|
-
type ADDateValue,
|
|
258
|
-
type DateRangeValue,
|
|
259
|
-
type CalendarTheme,
|
|
260
|
-
type CalendarMarkedDate,
|
|
261
|
-
type NepaliCalendarProps,
|
|
262
|
-
type NepaliDatePickerProps,
|
|
263
|
-
type DatePickerModalProps,
|
|
264
|
-
type NepaliRangePickerProps,
|
|
265
|
-
type RangePickerModalProps,
|
|
266
|
-
type CalendarLocale,
|
|
267
|
-
type LocaleCode,
|
|
268
|
-
type NumeralSystem,
|
|
269
|
-
} from 'react-native-bikram-sambat';
|
|
270
|
-
```
|
|
271
|
-
|
|
272
|
-
## Theme Customization
|
|
273
|
-
|
|
274
|
-
### Light and Dark Mode
|
|
275
|
-
|
|
276
|
-
```tsx
|
|
277
|
-
import { NepaliCalendar } from 'react-native-bikram-sambat';
|
|
278
|
-
|
|
279
|
-
// System default (auto-detects device theme)
|
|
280
|
-
<NepaliCalendar colorScheme="system" />
|
|
281
|
-
|
|
282
|
-
// Force dark mode
|
|
283
|
-
<NepaliCalendar colorScheme="dark" />
|
|
284
|
-
|
|
285
|
-
// Force light mode
|
|
286
|
-
<NepaliCalendar colorScheme="light" />
|
|
287
|
-
```
|
|
288
|
-
|
|
289
|
-
### Custom Theme Override
|
|
290
|
-
|
|
291
|
-
```tsx
|
|
292
|
-
import { NepaliDatePicker, type CalendarTheme } from 'react-native-bikram-sambat';
|
|
293
|
-
|
|
294
|
-
const customTheme: Partial<CalendarTheme> = {
|
|
295
|
-
colors: {
|
|
296
|
-
primary: '#7c3aed',
|
|
297
|
-
primaryText: '#ffffff',
|
|
298
|
-
},
|
|
299
|
-
radius: {
|
|
300
|
-
day: 16,
|
|
301
|
-
calendar: 16,
|
|
302
|
-
},
|
|
303
|
-
};
|
|
304
|
-
|
|
305
|
-
<NepaliDatePicker theme={customTheme} />
|
|
306
|
-
```
|
|
307
|
-
|
|
308
|
-
## Local Package Testing
|
|
102
|
+
const formatted = formatBS(bs, 'yyyy-MM-dd');
|
|
103
|
+
const parsed = parseBS('2081-01-05', 'yyyy-MM-dd');
|
|
309
104
|
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
```sh
|
|
313
|
-
npm run typecheck
|
|
314
|
-
npm test
|
|
315
|
-
npm run build
|
|
316
|
-
npm pack --dry-run
|
|
317
|
-
npm pack
|
|
105
|
+
const devanagari = toNepaliNumerals('2081');
|
|
106
|
+
const latin = toLatinNumerals('२०८१');
|
|
318
107
|
```
|
|
319
108
|
|
|
320
|
-
This produces a `.tgz` file. Test it in another React Native CLI app:
|
|
321
|
-
|
|
322
|
-
```sh
|
|
323
|
-
cd /path/to/your/app
|
|
324
|
-
npm install ../Calender/react-native-bikram-sambat-0.1.0.tgz
|
|
325
|
-
```
|
|
326
|
-
|
|
327
|
-
## Supported BS Range
|
|
328
|
-
|
|
329
|
-
The package currently supports the verified BS date range included in its data table. Dates outside the supported range will throw or return `false` depending on the API.
|
|
330
|
-
|
|
331
|
-
Core conversion functions throw `RangeError` for out-of-range dates.
|
|
332
|
-
UI components handle invalid dates gracefully without crashing.
|
|
333
|
-
|
|
334
|
-
## Publishing
|
|
335
|
-
|
|
336
|
-
Publishing is handled by GitHub Actions when code is pushed to `main`.
|
|
337
|
-
|
|
338
|
-
Before publishing, add an npm automation token in GitHub:
|
|
339
|
-
|
|
340
|
-
- Repository settings → Secrets and variables → Actions
|
|
341
|
-
- Add secret named `NPM_TOKEN`
|
|
342
|
-
|
|
343
|
-
To publish a new version:
|
|
344
|
-
|
|
345
|
-
```sh
|
|
346
|
-
npm version patch
|
|
347
|
-
git push origin main --follow-tags
|
|
348
|
-
```
|
|
349
|
-
|
|
350
|
-
The workflow publishes only if the current package version is not already on npm.
|
|
351
|
-
|
|
352
109
|
## Screenshot
|
|
353
110
|
|
|
354
111
|

|
|
355
|
-
|
|
356
|
-
## License
|
|
357
|
-
|
|
358
|
-
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-bikram-sambat",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "A production-grade Bikram Sambat calendar engine and React Native date picker for React Native.",
|
|
5
5
|
"main": "./lib/commonjs/index.js",
|
|
6
6
|
"module": "./lib/module/index.js",
|