Update tests

nuxt-module/docs/components/Example.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="border focus-within:shadow-xl border-white/5 flex flex-col mt-6 divide-y divide-white/5 bg-white/[2%] rounded-lg transition-all">
+  <div class="border shadow-xl border-white/5 focus-within:shadow-2xl flex flex-col mt-6 divide-y divide-white/5 bg-white/[3%] rounded-lg transition-all">
     <slot />
   </div>
 </template>

nuxt-module/docs/components/content/Formatcurrency.vue

@@ -2,10 +2,12 @@
   <Example>
     <ExampleInputs>
       <FormInput label="Value" type="number" v-model="currency" />
-      <FormNumber label="Decimals" v-model="currencyDecimals" min="0" />
+      <FormNumber label="Decimals" v-model="currencyDecimals" :min="0" />
       <FormInput label="Currency" type="text" v-model="currencySymbol" />
     </ExampleInputs>
-    <ExampleResult :result="formatCurrency(currency, currencyDecimals, currencySymbol)" />
+    <ExampleResult>
+      {{ formatCurrency(currency, currencyDecimals, currencySymbol) }}
+    </ExampleResult>
   </Example>
 </template>
 

nuxt-module/docs/components/content/Pagefunction.vue

@@ -9,9 +9,9 @@
     @apply font-semibold text-3xl;
   }
   :deep(pre) {
-    @apply bg-white/[2%] rounded-lg p-4 mt-6 border border-white/5;
+    @apply bg-white/[4%] shadow-xl rounded-lg p-3 font-mono mt-6 border border-white/5;
   }
   :deep(p) {
-    @apply text-lg mt-3 first:text-xl text-zinc-400;
+    @apply text-lg mt-2.5 first:text-xl text-zinc-400;
   }
 </style>

nuxt-module/docs/components/example/Result.vue

@@ -3,22 +3,13 @@
     <div class="flex gap-3 items-center">
       <Icon name="ph:equals-bold" class="text-white/20 w-3" />
 
-      <div class="text-lg font-semibold">
-        {{ result }}
+      <div class="text-xl font-semibold">
+        <slot />
       </div>
     </div>
-    <div class="flex gap-2 items-center">
-      <div class="text-white/25 font-mono text-sm/none">Result</div>
-      <CopyToClipboard :copy="result" />
-    </div>
+
+    <div class="text-white/25 font-mono text-sm/none">Result</div>
   </div>
 </template>
 
-<script setup lang="ts">
-  const props = defineProps({
-    result: {
-      type: [String, Number],
-      default: ''
-    }
-  })
-</script>
+<script setup lang="ts"></script>

nuxt-module/docs/components/form/Input.vue

@@ -7,7 +7,7 @@
       :type="type"
       :placeholder="placeholder"
       :value="modelValue"
-      @input="$emit('update:modelValue', $event.target.value)" />
+      @input="$event.target && $emit('update:modelValue', ($event.target as HTMLInputElement).value)" />
   </div>
 </template>
 
@@ -25,6 +25,9 @@
     type: {
       type: String,
       default: 'text'
+    },
+    info: {
+      type: String
     }
   })
 </script>

nuxt-module/docs/components/form/Number.vue

@@ -9,7 +9,7 @@
         <button
           class="text-zinc-500 hover:text-white"
           @click="$emit('update:modelValue', Number(modelValue) - 1)"
-          :class="modelValue <= min ? 'opacity-30 hover:opacity-30 pointer-events-none cursor-not-allowed' : ''">
+          :class="String(modelValue) <= String(min) ? 'opacity-30 hover:opacity-30 pointer-events-none cursor-not-allowed' : ''">
           <Icon name="heroicons:minus-circle-20-solid" class="h-5 w-5" />
         </button>
         <button class="text-zinc-500 hover:text-white" @click="$emit('update:modelValue', Number(modelValue) + 1)">

nuxt-module/docs/layouts/default.vue

@@ -3,9 +3,9 @@
     <!-- Navigation -->
     <NavMain />
 
-    <div class="container relative mx-auto flex min-h-screen py-12 gap-12">
+    <div class="container relative mx-auto flex min-h-screen py-12 gap-20">
       <!-- Pages -->
-      <nav class="w-full -mt-2 shrink flex flex-col sticky h-fit top-4 max-w-[200px]">
+      <nav class="-mt-2 w-2/12 flex flex-col sticky h-fit top-4">
         <div v-for="section in sidebar" class="pb-12 flex flex-col first:text-xl">
           <NuxtLink v-for="link in section.children" :key="link._path" :to="link._path" class="py-2 flex font-medium text-gray-500 hover:text-white/75 gap-3" activeClass="active">
             {{ link.title }}
@@ -14,12 +14,12 @@
       </nav>
 
       <!-- Content -->
-      <div class="min-h-screen grow">
+      <div class="min-h-screen w-8/12">
         <NuxtPage class="w-full" />
       </div>
 
       <!-- Table of Contents -->
-      <nav class="w-full shrink max-w-[150px] h-fit top-4 sticky">
+      <nav class="shrink w-2/12 max-w-[150px] h-fit top-4 sticky">
         {{ toc }}
       </nav>
     </div>

nuxt-module/docs/utils/config.ts

@@ -0,0 +1,11 @@
+export const currencyLocales = {
+  USD: 'en-US',
+  EUR: 'de-DE',
+  GBP: 'en-GB',
+  CAD: 'en-CA',
+  AUD: 'en-AU',
+  JPY: 'ja-JP',
+  CNY: 'zh-CN',
+  INR: 'en-IN',
+  CHF: 'de-CH'
+}

package.json

@@ -2,6 +2,17 @@
   "name": "usemods",
   "version": "0.0.0",
   "description": "Zippy little modifiers and utilities for your frontend.",
+  "scripts": {
+    "dev": "bun run builder.mjs",
+    "build": "bun run build.mjs",
+    "test": "bun --watch test test/*",
+    "prepublishOnly": "bun run build",
+    "docs": "npm run docs:install && npm run module:dev",
+    "docs:install": "npm run module:install && npm i --prefix ./nuxt-module/docs",
+    "module:install": "npm i --prefix ./nuxt-module",
+    "module:dev": "npm run build && npm run dev --prefix ./nuxt-module",
+    "module:release:": "npm run release --prefix ./nuxt-module"
+  },
   "keywords": [
     "bun",
     "usemods",
@@ -38,17 +49,6 @@
     "type": "git",
     "url": "git+https://github.com/LittleFoxCompany/usemods.git"
   },
-  "scripts": {
-    "dev": "bun run builder.mjs",
-    "build": "bun run build.mjs",
-    "test": "bun --watch test test/*",
-    "prepublishOnly": "bun run build",
-    "docs": "npm run docs:install && npm run module:dev",
-    "docs:install": "npm run module:install && npm i --prefix ./nuxt-module/docs",
-    "module:install": "npm i --prefix ./nuxt-module",
-    "module:dev": "npm run build && npm run dev --prefix ./nuxt-module",
-    "module:release:": "npm run release --prefix ./nuxt-module"
-  },
   "devDependencies": {
     "@types/web": "^0.0.119",
     "bun-plugin-dts": "^0.2.1",

src/2.formatters.test.ts

@@ -0,0 +1,8 @@
+import { expect, test } from 'bun:test'
+import { formatCurrency, formatDuration, formatPercentage, formatUnixTime, formatList } from '../src/2.formatters'
+
+test('formatPercentage', () => {
+  expect(formatPercentage(0.1234)).toBe('12%')
+  expect(formatPercentage(0.1234, 2)).toBe('12.34%')
+  // Add additional test cases here
+})

src/2.formatters.ts

@@ -23,40 +23,30 @@ export function formatNumber(value: number, decimals = 1): string {
  * Format numbers into local currency
  * @example formatCurrency()
  */
-export function formatCurrency(number: number, decimals = 0, currency = 'USD'): string {
-  const formatter = new Intl.NumberFormat('en-US', {
+export function formatCurrency(number: number, decimals: boolean | number = false, currency = 'USD'): string {
+  const fractionDigits = typeof decimals === 'number' ? decimals : decimals === true ? Number.POSITIVE_INFINITY : 0
+
+  return new Intl.NumberFormat(currency, {
     style: 'currency',
-    minimumFractionDigits: Math.max(0, decimals),
-    maximumFractionDigits: decimals,
-    currency
-  })
-  try {
-    return formatter.format(number)
-  } catch (error) {
-    console.error(error)
-    return ''
-  }
+    currency,
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits
+  }).format(number)
 }
 
 /**
  * Format numbers into valuations displayed in thousands, millions or billions
  * @example formatValuation()
  */
-export function formatValuation(value: number, decimals = 1, currency = 'USD'): string {
-  const formatter = new Intl.NumberFormat('en-US', {
+export function formatValuation(value: number, decimals: boolean | number = false, currency = 'USD'): string {
+  const fractionDigits = typeof decimals === 'number' ? decimals : decimals === true ? Number.POSITIVE_INFINITY : 0
+
+  return new Intl.NumberFormat(currency, {
     notation: 'compact',
     compactDisplay: 'short',
-    minimumFractionDigits: 0,
-    maximumFractionDigits: decimals,
-    style: 'currency',
-    currency
-  })
-
-  try {
-    return formatter.format(value)
-  } catch (error) {
-    return ''
-  }
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits
+  }).format(value)
 }
 
 /**
@@ -65,49 +55,53 @@ export function formatValuation(value: number, decimals = 1, currency = 'USD'):
  */
 export function formatDuration(seconds: number, labels = 'short'): string {
   const time = [
-    { unit: labels === 'short' ? 'yr' : 'year', secondsInUnit: 31536000 },
-    { unit: labels === 'short' ? 'mo' : 'month', secondsInUnit: 2628000 },
-    { unit: labels === 'short' ? 'wk' : 'week', secondsInUnit: 604800 },
-    { unit: labels === 'short' ? 'd' : 'day', secondsInUnit: 86400 },
-    { unit: labels === 'short' ? 'hr' : 'hour', secondsInUnit: 3600 },
-    { unit: labels === 'short' ? 'min' : 'minute', secondsInUnit: 60 },
-    { unit: labels === 'short' ? 's' : 'second', secondsInUnit: 1 }
+    { unit: labels === 'short' ? 'yr' : ' year', secondsInUnit: 31536000 },
+    { unit: labels === 'short' ? 'mo' : ' month', secondsInUnit: 2628000 },
+    { unit: labels === 'short' ? 'wk' : ' week', secondsInUnit: 604800 },
+    { unit: labels === 'short' ? 'd' : ' day', secondsInUnit: 86400 },
+    { unit: labels === 'short' ? 'hr' : ' hour', secondsInUnit: 3600 },
+    { unit: labels === 'short' ? 'min' : ' minute', secondsInUnit: 60 },
+    { unit: labels === 'short' ? 's' : ' second', secondsInUnit: 1 }
   ]
 
+  if (seconds === 0) return '0s'
+
   let remainingSeconds = seconds
   let formattedTime = ''
 
   for (const { unit, secondsInUnit } of time) {
     const count = Math.floor(remainingSeconds / secondsInUnit)
     if (count > 0) {
-      formattedTime += `${count}${unit} `
+      formattedTime += `${count}${count === 1 ? unit : unit + 's'}`
       remainingSeconds -= count * secondsInUnit
     }
   }
 
   return formattedTime.trim()
 }
 
-/**
- * Format Unix timestamp into a datetime string
- * @example formatUnixTime(1620000000)
- */
-export function formatUnixTime(timestamp: number): string {
-  return new Date(timestamp * 1000).toISOString().replace('T', ' ').replace('Z', '')
-}
-
 /**
  * Format a number into a percentage
  * @example formatPercentage(0.1234)
  */
-export function formatPercentage(number: number, decimals = 1): string {
+export function formatPercentage(number: number, decimals: boolean | number = false): string {
+  const fractionDigits = typeof decimals === 'number' ? decimals : decimals === true ? Number.POSITIVE_INFINITY : 0
+
   return new Intl.NumberFormat('en-US', {
     style: 'percent',
-    minimumFractionDigits: 0,
-    maximumFractionDigits: decimals
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits
   }).format(number)
 }
 
+/**
+ * Format Unix timestamp into a datetime string
+ * @example formatUnixTime()
+ */
+export function formatUnixTime(timestamp: number): string {
+  return new Date(timestamp * 1000).toISOString().replace('T', ' ').replace('Z', '')
+}
+
 /**
  * Create a string of comma-separated values from an array of strings with an optional conjunction.
  * @param items - The array of strings. strings.

src/3.modifiers.ts

@@ -1,7 +1,7 @@
 // title: Modifiers
 // description: Modifiers are a key feature of Mods that allow you to easily modify and enhance your content. They are small pieces of code that can be applied to your JS to add functionality, validation or style.
 
-import { formatDuration } from './1.formatters'
+import { formatDuration } from './2.formatters'
 
 /**
  * Adds a space between the last two words in a string.

src/index.ts

@@ -1,7 +1,7 @@
-export * from './actions'
-export * from './detections'
-export * from './1.formatters'
-export * from './generators'
-export * from './modifiers'
-export * from './numbers'
-export * from './validators'
+export * from './1.actions'
+export * from './2.formatters'
+export * from './3.modifiers'
+export * from './4.detections'
+export * from './5.generators'
+export * from './6.numbers'
+export * from './7.validators'

test/formatters.test.ts

@@ -1,11 +1,9 @@
 import { expect, test } from 'bun:test'
-import { formatCurrency, formatDuration, formatList } from '../src/1.formatters'
-
-// @vitest-environment nuxt
-// import * as mod from '@/utils/formatters'
+import { formatCurrency, formatDuration, formatPercentage, formatUnixTime, formatList, formatTitle } from '../src/2.formatters'
 
 test('formatCurrency', () => {
-  expect(formatCurrency(1000.95)).toBe('$1,000.95')
+  expect(formatCurrency(1000.95)).toBe('$1,001')
+  expect(formatCurrency(1000.95, 2)).toBe('$1,000.95')
   expect(formatCurrency(1000.95, 2, 'EUR')).toBe('€1,000.95')
   expect(formatCurrency(1000, 0, 'JPY')).toBe('¥1,000')
   expect(formatCurrency(1000.95, 2, 'GBP')).toBe('£1,000.95')
@@ -14,25 +12,31 @@ test('formatCurrency', () => {
 })
 
 test('formatDuration', () => {
+  expect(formatDuration(0)).toBe('0s')
   expect(formatDuration(3600)).toBe('1hr')
-  expect(formatDuration(3600 * 2 + 60)).toBe('2hr 1min')
-  expect(formatDuration(3600 * 2 + 60 + 1)).toBe('2hr 1min 1s')
+  expect(formatDuration(3600 * 2, 'long')).toBe('2 hours')
+  expect(formatDuration(3600 * 2 + 60)).toBe('2hrs 1min')
+  expect(formatDuration(3600 * 2 + 60 + 1)).toBe('2hrs 1min 1s')
+})
+
+test('formatPercentage', () => {
+  expect(formatPercentage(0.1234)).toBe('12%')
+  expect(formatPercentage(0.1234, 2)).toBe('12.34%')
+})
+
+test('formatUnixTime', () => {
+  expect(formatUnixTime(1620000000)).toBe('2021-05-03 00:00:00.000')
 })
 
 test('formatList', () => {
   expect(formatList(['Apple', 'Oranges'], 2)).toBe('Apple and Oranges')
-  // expect(formatList(['Apple', 'Oranges', 'Grapes', 'Bread', 'Milk'], 5)).toBe('Apple, Oranges, Grapes, Bread and Milk')
-  // expect(formatList(['Apple', 'Oranges', 'Grapes', 'Bread'], 5, 'or')).toBe('Apple, Oranges, Grapes or Bread')
-  // expect(formatList(['Apple', 'Oranges', 'Grapes', 'Bread', 'Milk'], 3)).toBe('Apple, Oranges, Grapes and 2 more')
-  // expect(formatList(['Apple', 'Oranges', 'Grapes', 'Bread', 'Milk'], 3, 'or')).toBe('Apple, Oranges, Grapes or 2 more')
+  expect(formatList(['Apple', 'Oranges', 'Bananas'], 2)).toBe('Apple, Oranges, and 1 more')
+  expect(formatList(['Apple', 'Oranges', 'Bananas', 'Pears'], 2)).toBe('Apple, Oranges, and 2 more')
 })
 
-// TODO: Make more robust
-// test('formatPhoneNumber', () => {
-//   expect(formatPhoneNumber('1234567890', 'US')).toBe('123-456-7890')
-//   expect(formatPhoneNumber('+447911123456', 'UK')).toBe('+44-7911-123456')
-//   expect(formatPhoneNumber('1234567890', 'CA')).toBe('123-456-7890')
-//   expect(formatPhoneNumber('1234567890', 'US')).toBe('123-456-7890')
-//   expect(formatPhoneNumber('+447911123456', 'UK')).toBe('+44-7911-123456')
-//   expect(formatPhoneNumber('1234567890', 'CA')).toBe('123-456-7890')
-// })
+test('formatTitle', () => {
+  expect(formatTitle('hello world')).toBe('Hello World')
+  expect(formatTitle('welcome to the jungle')).toBe('Welcome to the Jungle')
+  expect(formatTitle('the quick brown fox jumps over the lazy dog')).toBe('The Quick Brown Fox Jumps Over the Lazy Dog')
+  // expect(formatTitle('UseMods is cooler than a vegan leather jacket, it's offical')).toBe('UseMods Is Cooler than a Vegan Leather Jacket, it's Offical')
+})