feat(new tool): ULID generator (#623)

src/tools/index.ts

@@ -1,6 +1,7 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as ulidGenerator } from './ulid-generator';
 import { tool as ibanValidatorAndParser } from './iban-validator-and-parser';
 import { tool as stringObfuscator } from './string-obfuscator';
 import { tool as textDiff } from './text-diff';
@@ -74,7 +75,7 @@ import { tool as xmlFormatter } from './xml-formatter';
 export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Crypto',
-    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser],
+    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, ulidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser],
   },
   {
     name: 'Converter',

src/tools/ulid-generator/index.ts

@@ -0,0 +1,12 @@
+import { SortDescendingNumbers } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'ULID generator',
+  path: '/ulid-generator',
+  description: 'Generate random Universally Unique Lexicographically Sortable Identifier (ULID).',
+  keywords: ['ulid', 'generator', 'random', 'id', 'alphanumeric', 'identity', 'token', 'string', 'identifier', 'unique'],
+  component: () => import('./ulid-generator.vue'),
+  icon: SortDescendingNumbers,
+  createdAt: new Date('2023-09-11'),
+});

src/tools/ulid-generator/ulid-generator.e2e.spec.ts

@@ -0,0 +1,23 @@
+import { expect, test } from '@playwright/test';
+
+const ULID_REGEX = /[0-9A-Z]{26}/;
+
+test.describe('Tool - ULID generator', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/ulid-generator');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('ULID generator - IT Tools');
+  });
+
+  test('the refresh button generates a new ulid', async ({ page }) => {
+    const ulid = await page.getByTestId('ulids').textContent();
+    expect(ulid?.trim()).toMatch(ULID_REGEX);
+
+    await page.getByTestId('refresh').click();
+    const newUlid = await page.getByTestId('ulids').textContent();
+    expect(ulid?.trim()).not.toBe(newUlid?.trim());
+    expect(newUlid?.trim()).toMatch(ULID_REGEX);
+  });
+});

src/tools/ulid-generator/ulid-generator.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ulid } from 'ulid';
+import _ from 'lodash';
+import { computedRefreshable } from '@/composable/computedRefreshable';
+import { useCopy } from '@/composable/copy';
+
+const amount = useStorage('ulid-generator-amount', 1);
+const formats = [{ label: 'Raw', value: 'raw' }, { label: 'JSON', value: 'json' }] as const;
+const format = useStorage<typeof formats[number]['value']>('ulid-generator-format', formats[0].value);
+
+const [ulids, refreshUlids] = computedRefreshable(() => {
+  const ids = _.times(amount.value, () => ulid());
+
+  if (format.value === 'json') {
+    return JSON.stringify(ids, null, 2);
+  }
+
+  return ids.join('\n');
+});
+
+const { copy } = useCopy({ source: ulids, text: 'ULIDs copied to the clipboard' });
+</script>
+
+<template>
+  <div flex flex-col justify-center gap-2>
+    <div flex items-center>
+      <label w-75px> Quantity:</label>
+      <n-input-number v-model:value="amount" min="1" max="100" flex-1 />
+    </div>
+
+    <c-buttons-select v-model:value="format" :options="formats" label="Format: " label-width="75px" />
+
+    <c-card mt-5 flex data-test-id="ulids">
+      <pre m-0 m-x-auto>{{ ulids }}</pre>
+    </c-card>
+
+    <div flex justify-center gap-2>
+      <c-button data-test-id="refresh" @click="refreshUlids()">
+        Refresh
+      </c-button>
+      <c-button @click="copy()">
+        Copy
+      </c-button>
+    </div>
+  </div>
+</template>