nitro-web 0.0.109 → 0.0.111

package/client/css/components.css

@@ -81,4 +81,18 @@
 
 .__PrivateStripeElementLoader {
   display: none !important;
+}
+
+/* ---- Animation ------------------------- */
+
+@keyframes dots {
+  0%, 20% { content: ""; }
+  40% { content: "."; }
+  60% { content: ".."; }
+  80%, 100% { content: "..."; }
+}
+
+.loading-dots::after {
+  content: "";
+  animation: dots 2s steps(1, end) infinite;
 }

package/components/partials/element/table.tsx

@@ -42,6 +42,7 @@ export type TableProps<T> = {
   columnHeaderClassName?: string
   checkboxClassName?: string
   checkboxSize?: number
+  isLoading?:boolean
 }
 
 export function Table<T extends TableRow>({ 
@@ -67,6 +68,7 @@ export function Table<T extends TableRow>({
   columnHeaderClassName,
   checkboxClassName,
   checkboxSize=16,
+  isLoading=false,
 }: TableProps<T>) {
   const location = useLocation()
   const [selectedRowIds, setSelectedRowIds] = useState<string[]>([])
@@ -87,7 +89,7 @@ export function Table<T extends TableRow>({
 
   const onSelect = useCallback((idOrAll: string, checked: boolean) => {
     setSelectedRowIds((o) => {
-      if (idOrAll == 'all' && checked) return rows.map(row => row?._id||'')
+      if (idOrAll == 'all' && checked) return (rows ?? []).map(row => row?._id||'')
       else if (idOrAll == 'all' && !checked) return []
       else if (o.includes(idOrAll) && !checked) return o.filter(id => id != idOrAll)
       else if (!o.includes(idOrAll) && checked) return [...o, idOrAll]
@@ -101,7 +103,7 @@ export function Table<T extends TableRow>({
   }, [])
 
   // Reset selected rows when the location changes, or the number of rows changed (e.g. when a row is removed)
-  useEffect(() => setSelectedRowIds([]), [location.key, rows.map(row => row?._id||'').join(',')])
+  useEffect(() => setSelectedRowIds([]), [location.key, (rows ?? []).map(row => row?._id||'').join(',')])
 
   // --- Sorting ---
 
@@ -287,11 +289,12 @@ export function Table<T extends TableRow>({
                   >
                     <div
                       className={twMerge(
-                        'absolute top-0 h-full flex items-center justify-center text-sm text-gray-500',
+                        'absolute top-0 h-full flex items-center justify-center text-sm',
+                        isLoading ? '' : 'text-gray-500',
                         col.innerClassName
                       )}
                     >
-                      { j == 0 && 'No records found.' }
+                      { j == 0 && (isLoading ? <>Loading<span className="relative ml-[2px] loading-dots" /></> : 'No records found.') }
                     </div>
                   </div>
                 )

package/components/partials/form/field-currency.tsx

@@ -98,6 +98,16 @@ export function FieldCurrency({ currency='nzd', currencies, format, onChange, va
     let _format = format || defaultFormat
     const _currencies = currencies ?? defaultCurrencies
     const currencyObject = _currencies[currency as keyof typeof _currencies]
+    if (!currencyObject && currencies) {
+      console.error(
+        `The currency field "${props.name}" is using the currency "${currency}" which is not found in your currencies object`
+      )
+    } else if (!currencyObject && !currencies) {
+      console.error(
+        `The currency field "${props.name}" is using the currency "${currency}" which is not found in the 
+        default currencies, please provide a currencies object.`
+      )
+    }
     const symbol = currencyObject ? currencyObject.symbol : ''
     const digits = currencyObject ? currencyObject.digits : 2
 
@@ -160,13 +170,59 @@ export function FieldCurrency({ currency='nzd', currencies, format, onChange, va
   )
 }
 
-const defaultCurrencies = {
-  nzd: { symbol: '$', digits: 2 },
-  aud: { symbol: '$', digits: 2 },
-  usd: { symbol: '$', digits: 2 },
-  eur: { symbol: '€', digits: 2 },
-  gbp: { symbol: '£', digits: 2 },
-  btc: { symbol: '₿', digits: 8 },
+export const defaultCurrencies: { [key: string]: { name: string, symbol: string, digits: number } } = {
+  nzd: { name: 'New Zealand Dollar', symbol: '$', digits: 2 },
+  aud: { name: 'Australian Dollar', symbol: '$', digits: 2 },
+  usd: { name: 'US Dollar', symbol: '$', digits: 2 },
+  btc: { name: 'Bitcoin', symbol: '₿', digits: 8 },
+  aed: { name: 'UAE Dirham', symbol: 'د.إ', digits: 2 },
+  ars: { name: 'Argentine Peso', symbol: '$', digits: 2 },
+  bdt: { name: 'Bangladeshi Taka', symbol: '৳', digits: 2 },
+  bhd: { name: 'Bahraini Dinar', symbol: '.د.ب', digits: 3 },
+  brl: { name: 'Brazilian Real', symbol: 'R$', digits: 2 },
+  cad: { name: 'Canadian Dollar', symbol: '$', digits: 2 },
+  chf: { name: 'Swiss Franc', symbol: 'Fr', digits: 2 },
+  clp: { name: 'Chilean Peso', symbol: '$', digits: 0 },
+  cny: { name: 'Chinese Yuan', symbol: '¥', digits: 2 },
+  cop: { name: 'Colombian Peso', symbol: '$', digits: 2 },
+  czk: { name: 'Czech Koruna', symbol: 'Kč', digits: 2 },
+  dkk: { name: 'Danish Krone', symbol: 'kr', digits: 2 },
+  egp: { name: 'Egyptian Pound', symbol: '£', digits: 2 },
+  eur: { name: 'Euro', symbol: '€', digits: 2 },
+  gbp: { name: 'Great Britain Pound', symbol: '£', digits: 2 },
+  hkd: { name: 'Hong Kong Dollar', symbol: '$', digits: 2 },
+  huf: { name: 'Hungarian Forint', symbol: 'Ft', digits: 0 },
+  idr: { name: 'Indonesian Rupiah', symbol: 'Rp', digits: 0 },
+  ils: { name: 'Israeli Shekel', symbol: '₪', digits: 2 },
+  inr: { name: 'Indian Rupee', symbol: '₹', digits: 2 },
+  jod: { name: 'Jordanian Dinar', symbol: 'د.ا', digits: 3 },
+  jpy: { name: 'Japanese Yen', symbol: '¥', digits: 0 },
+  kes: { name: 'Kenyan Shilling', symbol: 'Sh', digits: 2 },
+  krw: { name: 'South Korean Won', symbol: '₩', digits: 0 },
+  kwd: { name: 'Kuwaiti Dinar', symbol: 'د.ك', digits: 3 },
+  lkr: { name: 'Sri Lankan Rupee', symbol: 'Rs', digits: 2 },
+  mad: { name: 'Moroccan Dirham', symbol: 'د.م.', digits: 2 },
+  mxn: { name: 'Mexican Peso', symbol: '$', digits: 2 },
+  myr: { name: 'Malaysian Ringgit', symbol: 'RM', digits: 2 },
+  ngn: { name: 'Nigerian Naira', symbol: '₦', digits: 2 },
+  nok: { name: 'Norwegian Krone', symbol: 'kr', digits: 2 },
+  omr: { name: 'Omani Rial', symbol: '﷼', digits: 3 },
+  pen: { name: 'Peruvian Sol', symbol: 'S/', digits: 2 },
+  php: { name: 'Philippine Peso', symbol: '₱', digits: 2 },
+  pkt: { name: 'Pakistani Rupee', symbol: '₨', digits: 2 },
+  pln: { name: 'Polish Zloty', symbol: 'zł', digits: 2 },
+  qar: { name: 'Qatari Riyal', symbol: '﷼', digits: 2 },
+  ron: { name: 'Romanian Leu', symbol: 'lei', digits: 2 },
+  rub: { name: 'Russian Ruble', symbol: '₽', digits: 2 },
+  sar: { name: 'Saudi Riyal', symbol: '﷼', digits: 2 },
+  sek: { name: 'Swedish Krona', symbol: 'kr', digits: 2 },
+  sgd: { name: 'Singapore Dollar', symbol: '$', digits: 2 },
+  thb: { name: 'Thai Baht', symbol: '฿', digits: 2 },
+  try: { name: 'Turkish Lira', symbol: '₺', digits: 2 },
+  twd: { name: 'New Taiwan Dollar', symbol: 'NT$', digits: 2 },
+  uah: { name: 'Ukrainian Hryvnia', symbol: '₴', digits: 2 },
+  vnd: { name: 'Vietnamese Dong', symbol: '₫', digits: 0 },
+  zar: { name: 'South African Rand', symbol: 'R', digits: 2 },
 }
 
 const defaultFormat = '¤#,##0.00'

package/components/partials/styleguide.tsx

@@ -505,6 +505,15 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
           generateTd={generateTd}
           className="mb-6"
         />
+        <Table
+          rows={[]}
+          columns={thead}
+          rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
+          generateCheckboxActions={generateCheckboxActions}
+          generateTd={generateTd}
+          className="mb-6"
+          isLoading={true}
+        />
         <Table
           rows={rows.slice(0, 2).map(row => ({ ...row, _id: row._id + '1' }))}
           columns={thead}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.109",
+  "version": "0.0.111",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",