@underverse-ui/underverse 0.1.4 → 0.1.5
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 +59 -3
- package/dist/index.cjs +273 -307
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +248 -9
- package/dist/index.d.ts +248 -9
- package/dist/index.js +259 -294
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -57,15 +57,71 @@ function App() {
|
|
|
57
57
|
- `Table`, `DataTable`
|
|
58
58
|
|
|
59
59
|
### Media Components
|
|
60
|
-
- `SmartImage`, `ImageUpload`, `
|
|
60
|
+
- `SmartImage`, `ImageUpload`, `Carousel`
|
|
61
61
|
|
|
62
62
|
### Utilities
|
|
63
63
|
- `ClientOnly`, `Loading`, `NotificationModal`, `FloatingContacts`, `AccessDenied`
|
|
64
64
|
- Utility functions: `cn`, `DateUtils`, style constants
|
|
65
65
|
|
|
66
66
|
## Important Notes
|
|
67
|
-
-
|
|
68
|
-
-
|
|
67
|
+
- Library is i18n‑agnostic: components have sensible English defaults and accept text via props.
|
|
68
|
+
- If your app uses `next-intl`, you can merge our ready‑made messages to localize built‑in texts.
|
|
69
|
+
- `NotificationBell` is not exported (depends on project‑specific API/socket implementations).
|
|
70
|
+
|
|
71
|
+
## next-intl Integration (Next.js App Router)
|
|
72
|
+
|
|
73
|
+
1) Configure plugin and time zone (to avoid `ENVIRONMENT_FALLBACK`):
|
|
74
|
+
|
|
75
|
+
```ts
|
|
76
|
+
// next.config.ts
|
|
77
|
+
import createNextIntlPlugin from 'next-intl/plugin';
|
|
78
|
+
|
|
79
|
+
const withNextIntl = createNextIntlPlugin({
|
|
80
|
+
locales: ['vi', 'en'],
|
|
81
|
+
defaultLocale: 'vi',
|
|
82
|
+
timeZone: 'Asia/Ho_Chi_Minh' // important for SSR
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
export default withNextIntl({
|
|
86
|
+
// your other Next config
|
|
87
|
+
});
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
2) Merge underverse messages with your app messages:
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
// app/layout.tsx (simplified)
|
|
94
|
+
import {NextIntlClientProvider, getMessages} from 'next-intl/server';
|
|
95
|
+
import {underverseMessages} from '@underverse-ui/underverse';
|
|
96
|
+
|
|
97
|
+
export default async function RootLayout({children}:{children: React.ReactNode}) {
|
|
98
|
+
const appMessages = await getMessages();
|
|
99
|
+
const locale = 'vi'; // derive from params/headers
|
|
100
|
+
const uv = underverseMessages[locale] || underverseMessages.en;
|
|
101
|
+
const messages = {...uv, ...appMessages}; // app overrides uv if overlaps
|
|
102
|
+
|
|
103
|
+
return (
|
|
104
|
+
<html lang={locale}>
|
|
105
|
+
<body>
|
|
106
|
+
<NextIntlClientProvider locale={locale} messages={messages}>
|
|
107
|
+
{children}
|
|
108
|
+
</NextIntlClientProvider>
|
|
109
|
+
</body>
|
|
110
|
+
</html>
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
3) Use components normally. Any built‑in texts (DatePicker/Pagination/DataTable/Alert/ImageUpload…) will use merged messages. You can still override labels via props if desired.
|
|
116
|
+
|
|
117
|
+
## Message Keys Summary
|
|
118
|
+
|
|
119
|
+
- `Common`: close, closeAlert, notifications, newNotification, readStatus, openLink, theme, lightTheme, darkTheme, systemTheme, density, compact, normal, comfortable, columns
|
|
120
|
+
- `ValidationInput`: required, typeMismatch, pattern, tooShort, tooLong, rangeUnderflow, rangeOverflow, stepMismatch, badInput, invalid
|
|
121
|
+
- `Loading`: loadingPage, pleaseWait
|
|
122
|
+
- `DatePicker`: placeholder, today, clear
|
|
123
|
+
- `Pagination`: navigationLabel, showingResults ({startItem},{endItem},{totalItems}), firstPage, previousPage, previous, nextPage, next, lastPage, pageNumber ({page}), itemsPerPage, search, noOptions
|
|
124
|
+
- `OCR.imageUpload`: dragDropText, browseFiles, supportedFormats
|
|
69
125
|
|
|
70
126
|
## License
|
|
71
127
|
|