Merge pull request #5 from bocan:feat/more-tools

Add new tools: Lorem Generator, Timestamp Converter, and UUID Generator

Author: bocan

.github/workflows/node.js.yml

@@ -5,13 +5,18 @@ name: CI & Deploy
 on:
   push:
     branches: [ "main" ]
+    paths-ignore:
+      - 'CHANGELOG.md'
+      - 'package.json'
+      - 'package-lock.json
   pull_request:
     branches: [ "main" ]
 
 permissions:
-  contents: read
+  contents: write
   pages: write
   id-token: write
+  pull-requests: writ
 
 concurrency:
   group: "pages"
@@ -22,21 +27,44 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v6
+
     - name: Use Node.js 24.x
       uses: actions/setup-node@v6
       with:
         node-version: 24.x
         cache: 'npm'
+
     - run: npm ci
     - run: npm run lint
     - run: npm test
     - run: npm run build
+
+    - name: Configure Git
+      run: |
+        git config user.name "github-actions[bot]"
+        git config user.email "github-actions[bot]@users.noreply.github.com
+
     - name: Upload Pages artifact
       if: github.ref == 'refs/heads/main' && github.event_name == 'push'
       uses: actions/upload-pages-artifact@v3
       with:
         path: dist/
 
+    - name: Extract version from package.json
+      id: extract_version
+      run: |
+        VERSION=$(node -p "require('./package.json').version")
+        echo "version=$VERSION" >> $GITHUB_OUTPUT
+
+    - name: Create GitHub Release
+      uses: softprops/action-gh-release@v2
+      with:
+        tag_name: v${{ steps.extract_version.outputs.version }}
+        name: Release v${{ steps.extract_version.outputs.version }}
+        generate_release_notes: true
+        draft: false
+        prerelease: false
+
   deploy:
     if: github.ref == 'refs/heads/main' && github.event_name == 'push'
     needs: build

src/App.tsx

@@ -9,6 +9,10 @@ import RegexTester from './pages/RegexTester';
 import UrlCodec from './pages/UrlCodec';
 import JwtDecoder from './pages/JwtDecoder';
 import ColorConverter from './pages/ColorConverter';
+import LoremGenerator from './pages/LoremGenerator';
+import HashGenerator from './pages/HashGenerator';
+import UuidGenerator from './pages/UuidGenerator';
+import TimestampConverter from './pages/TimestampConverter';
 
 export default function App() {
   return (
@@ -23,6 +27,10 @@ export default function App() {
         <Route path="url" element={<UrlCodec />} />
         <Route path="jwt" element={<JwtDecoder />} />
         <Route path="color" element={<ColorConverter />} />
+        <Route path="lorem" element={<LoremGenerator />} />
+        <Route path="hash" element={<HashGenerator />} />
+        <Route path="uuid" element={<UuidGenerator />} />
+        <Route path="timestamp" element={<TimestampConverter />} />
       </Route>
     </Routes>
   );

src/__tests__/HashGenerator.test.tsx

@@ -0,0 +1,75 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import HashGenerator from '../pages/HashGenerator';
+
+// Mock crypto.subtle for SHA hashes in jsdom
+const mockDigest = vi.fn(async (algo: string, data: ArrayBuffer) => {
+  // Return deterministic fake hashes based on algorithm
+  const len = algo === 'SHA-512' ? 64 : algo === 'SHA-256' ? 32 : 20;
+  const view = new Uint8Array(data as ArrayBuffer);
+  const buf = new ArrayBuffer(len);
+  const out = new Uint8Array(buf);
+  // Simple deterministic fill from input
+  for (let i = 0; i < len; i++) {
+    out[i] = (view[i % view.length] ?? 0) ^ (i * 7);
+  }
+  return buf;
+});
+
+Object.defineProperty(globalThis, 'crypto', {
+  value: {
+    subtle: { digest: mockDigest },
+    getRandomValues: (arr: Uint8Array) => {
+      for (let i = 0; i < arr.length; i++) arr[i] = Math.floor(Math.random() * 256);
+      return arr;
+    },
+  },
+  writable: true,
+});
+
+describe('HashGenerator', () => {
+  it('renders input area', () => {
+    render(<HashGenerator />);
+    expect(screen.getByLabelText(/text to hash/i)).toBeInTheDocument();
+  });
+
+  it('renders all algorithm cards', () => {
+    render(<HashGenerator />);
+    expect(screen.getByText('MD5')).toBeInTheDocument();
+    expect(screen.getByText('SHA-1')).toBeInTheDocument();
+    expect(screen.getByText('SHA-256')).toBeInTheDocument();
+    expect(screen.getByText('SHA-512')).toBeInTheDocument();
+  });
+
+  it('computes hashes when text is entered', async () => {
+    const user = userEvent.setup();
+    render(<HashGenerator />);
+    await user.type(screen.getByLabelText(/text to hash/i), 'hello');
+    await waitFor(() => {
+      const md5Card = screen.getByLabelText('MD5 hash value');
+      expect(md5Card.textContent).not.toBe('—');
+    });
+  });
+
+  it('shows empty state when input is cleared', async () => {
+    const user = userEvent.setup();
+    render(<HashGenerator />);
+    await user.type(screen.getByLabelText(/text to hash/i), 'test');
+    await user.click(screen.getByRole('button', { name: /clear/i }));
+    await waitFor(() => {
+      const md5Card = screen.getByLabelText('MD5 hash value');
+      expect(md5Card.textContent).toBe('—');
+    });
+  });
+
+  it('MD5 produces a 32-char hex string', async () => {
+    const user = userEvent.setup();
+    render(<HashGenerator />);
+    await user.type(screen.getByLabelText(/text to hash/i), 'test');
+    await waitFor(() => {
+      const md5Card = screen.getByLabelText('MD5 hash value');
+      expect(md5Card.textContent).toMatch(/^[0-9a-f]{32}$/);
+    });
+  });
+});

src/__tests__/Layout.test.tsx

@@ -24,15 +24,12 @@ describe('Layout', () => {
     expect(screen.getByText('UltraFormat')).toBeInTheDocument();
   });
 
-  it('renders navigation with all tool tabs', () => {
-    renderLayout();
-    const nav = screen.getByRole('navigation', { name: /developer tools/i });
+  it('renders navigation with all tool tabs', async () => {
+    const { user } = renderLayout();
+    // Open the dropdown to reveal the nav
+    await user.click(screen.getByRole('button', { name: /tools/i }));
+    const nav = screen.getByRole('listbox', { name: /developer tools/i });
     expect(nav).toBeInTheDocument();
-    expect(screen.getByLabelText('JSON Formatter')).toBeInTheDocument();
-    expect(screen.getByLabelText('Diff Checker')).toBeInTheDocument();
-    expect(screen.getByLabelText('Base64 Codec')).toBeInTheDocument();
-    expect(screen.getByLabelText('Code Beautify')).toBeInTheDocument();
-    expect(screen.getByLabelText('Regex Tester')).toBeInTheDocument();
   });
 
   it('renders the rotating privacy badge', () => {

src/__tests__/LoremGenerator.test.tsx

@@ -0,0 +1,61 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import LoremGenerator from '../pages/LoremGenerator';
+
+describe('LoremGenerator', () => {
+  it('renders style tabs', () => {
+    render(<LoremGenerator />);
+    expect(screen.getByRole('tab', { name: /classic/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /hipster/i })).toBeInTheDocument();
+  });
+
+  it('renders unit selector and count input', () => {
+    render(<LoremGenerator />);
+    expect(screen.getByLabelText(/text unit/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/count/i)).toBeInTheDocument();
+  });
+
+  it('generates classic lorem text', async () => {
+    const user = userEvent.setup();
+    render(<LoremGenerator />);
+    await user.click(screen.getByRole('button', { name: /generate/i }));
+    const output = screen.getByLabelText(/generated text output/i) as HTMLTextAreaElement;
+    expect(output.value.length).toBeGreaterThan(0);
+  });
+
+  it('generates hipster lorem text', async () => {
+    const user = userEvent.setup();
+    render(<LoremGenerator />);
+    await user.click(screen.getByRole('tab', { name: /hipster/i }));
+    await user.click(screen.getByRole('button', { name: /generate/i }));
+    const output = screen.getByLabelText(/generated text output/i) as HTMLTextAreaElement;
+    expect(output.value.length).toBeGreaterThan(0);
+  });
+
+  it('clears output', async () => {
+    const user = userEvent.setup();
+    render(<LoremGenerator />);
+    await user.click(screen.getByRole('button', { name: /generate/i }));
+    await user.click(screen.getByRole('button', { name: /clear/i }));
+    const output = screen.getByLabelText(/generated text output/i) as HTMLTextAreaElement;
+    expect(output.value).toBe('');
+  });
+
+  it('shows word count after generating', async () => {
+    const user = userEvent.setup();
+    render(<LoremGenerator />);
+    await user.click(screen.getByRole('button', { name: /generate/i }));
+    expect(screen.getByText(/\d+ words/i)).toBeInTheDocument();
+  });
+
+  it('generates different unit types', async () => {
+    const user = userEvent.setup();
+    render(<LoremGenerator />);
+    const select = screen.getByLabelText(/text unit/i);
+    await user.selectOptions(select, 'words');
+    await user.click(screen.getByRole('button', { name: /generate/i }));
+    const output = screen.getByLabelText(/generated text output/i) as HTMLTextAreaElement;
+    expect(output.value.length).toBeGreaterThan(0);
+  });
+});

src/__tests__/TimestampConverter.test.tsx

@@ -0,0 +1,69 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import TimestampConverter from '../pages/TimestampConverter';
+
+describe('TimestampConverter', () => {
+  beforeEach(() => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    vi.setSystemTime(new Date('2026-03-09T12:00:00Z'));
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('renders the live clock', () => {
+    render(<TimestampConverter />);
+    expect(screen.getByLabelText(/current unix timestamp/i)).toBeInTheDocument();
+  });
+
+  it('renders timestamp input', () => {
+    render(<TimestampConverter />);
+    expect(screen.getByLabelText(/timestamp or date input/i)).toBeInTheDocument();
+  });
+
+  it('shows empty state when no input', () => {
+    render(<TimestampConverter />);
+    expect(screen.getByText(/enter a timestamp or date above/i)).toBeInTheDocument();
+  });
+
+  it('converts unix timestamp (seconds)', async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    render(<TimestampConverter />);
+    await user.type(screen.getByLabelText(/timestamp or date input/i), '1000000000');
+    expect(screen.getByText('ISO 8601')).toBeInTheDocument();
+    expect(screen.getByText('2001-09-09T01:46:40.000Z')).toBeInTheDocument();
+  });
+
+  it('converts ISO date string', async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    render(<TimestampConverter />);
+    await user.type(screen.getByLabelText(/timestamp or date input/i), '2024-01-01T00:00:00Z');
+    expect(screen.getByText('1704067200')).toBeInTheDocument();
+  });
+
+  it('shows error for invalid input', async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    render(<TimestampConverter />);
+    await user.type(screen.getByLabelText(/timestamp or date input/i), 'not-a-date');
+    expect(screen.getByText(/could not parse/i)).toBeInTheDocument();
+  });
+
+  it('fills current timestamp on Now click', async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    render(<TimestampConverter />);
+    await user.click(screen.getByRole('button', { name: /now/i }));
+    const input = screen.getByLabelText(/timestamp or date input/i) as HTMLInputElement;
+    expect(input.value).toMatch(/^\d{10}$/);
+  });
+
+  it('clears input', async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    render(<TimestampConverter />);
+    await user.type(screen.getByLabelText(/timestamp or date input/i), '1000000000');
+    await user.click(screen.getByRole('button', { name: /clear/i }));
+    const input = screen.getByLabelText(/timestamp or date input/i) as HTMLInputElement;
+    expect(input.value).toBe('');
+  });
+});