Ajax Davis
8b8612a1cf
refactor(ui): convert all remaining components from createElement to JSX syntax
...
- Convert Button, Card, CodeBlock, Container, Input, Label, ProgressBar, Tabs, and Header components to JSX
- Convert all test files to JSX syntax with direct element rendering
- Replace createElement calls with cleaner JSX syntax for better readability
- Update tsup config to handle .tsx files
- Maintain all functionality, accessibility, and TypeScript types
- All 370 tests passing
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-26 03:14:34 +10:00
Ajax Davis
b17349c071
refactor(ui): convert Icon and Badge components to JSX syntax
...
- Convert Icon component from createElement to JSX (Icon.tsx)
- Convert Icon tests to JSX (24 tests passing)
- Convert Icon stories to JSX (Icon.stories.tsx)
- Convert Badge component from createElement to JSX (Badge.tsx)
- Convert Badge tests to JSX (34 tests passing)
- Rename files from .ts to .tsx
- Remove createElement imports, use native JSX syntax
- All tests passing (58/58)
Part of broader effort to convert entire codebase from createElement to JSX.
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-26 02:10:18 +10:00
Ajax Davis
a6753cd8e6
feat: add light/dark theme system and full homepage with comprehensive UI components
...
Implement theme system:
- Add next-themes for theme management with light mode as default
- Swap CSS variable definitions in globals.css (light in :root, dark in .dark class)
- Create ThemeProvider component wrapping next-themes
- Create ThemeToggle component with sun/moon icons
- Update root layout with ThemeProvider
Build full homepage:
- Add Header component with navigation and theme toggle
- Create hero section with gradient background and search
- Add Featured Tools section with 6 tool cards (icons, badges, usage stats)
- Add Browse by Category section with 12 colored category tiles
- Add Platform Statistics section with 4 metric cards
- Add footer with copyright and links
- Create homePageData.ts with comprehensive mock data
Add Storybook stories:
- Icon.stories.ts (AllIcons, AllSizes, WithColors)
- Badge.stories.ts (Default, AllVariants, AllSizes, WithLongText)
- Input.stories.ts (Default, WithLabel, AllStates, AllSizes, PasswordInput)
- ProgressBar.stories.ts (Default, AllVariants, AllSizes, WithLabel, edge cases)
- CodeBlock.stories.ts (Default, multiple languages, LongCode)
- Tabs.stories.ts (Default, AllSizes, WithCounts, ManyTabs)
Fix production build issues:
- Export IconName type from Icon.ts
- Add sun and moon icons to icons.ts
- Fix Icon prop naming (icon not name)
- Fix Icon size constraints (remove xl, use lg)
- Update ThemeProvider types using ComponentProps
- Add explicit return types where needed
- Remove unused imports
- Replace forEach with for...of in variants system
- Fix template literals in storybook stories
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-26 01:29:28 +10:00
Ajax Davis
aaf6d788c3
chore: version packages
2025-11-25 22:23:10 +10:00
Ajax Davis
4f81564c49
fix: add testing-library/jest-dom matchers for UI tests
...
- Add @testing-library/jest-dom as dev dependency
- Create test-setup.ts to import jest-dom matchers
- Configure Vitest to use setup file
- All UI package tests now passing
Fixes test failures with toHaveTextContent and other DOM matchers.
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-25 22:22:35 +10:00
Ajax Davis
03021682ce
chore: version packages for initial release
2025-11-25 22:00:53 +10:00
Ajax Davis
78e6b9f4b5
feat: add complete monorepo structure and all packages
...
This completes the initial monorepo setup with all packages and configuration.
Packages added:
- @tpmjs/ui - React component library with .ts-only components
- @tpmjs/utils - Utility functions (cn, format)
- @tpmjs/types - TypeScript types and Zod schemas
- @tpmjs/env - Environment variable validation
- @tpmjs/test - Shared Vitest configuration
- @tpmjs/mocks - MSW mock server
- @tpmjs/config - Shared configurations (Biome, ESLint, Tailwind, TypeScript)
Applications added:
- @tpmjs/web - Next.js 16 App Router
Infrastructure:
- Turborepo configuration with build pipeline
- pnpm workspace setup
- GitHub Actions CI/CD
- Changesets for versioning
- Lefthook pre-commit hooks
- VSCode workspace settings
- Comprehensive documentation
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-25 21:59:40 +10:00
Ajax Davis
bc2f4a01cf
feat: initial monorepo setup with Turborepo, Next.js 16, and .ts-only components
...
- Set up Turborepo monorepo with pnpm workspaces
- Configure shared configs (Biome, ESLint, Tailwind, TypeScript)
- Create @tpmjs/ui package with .ts-only React components (Button, Card)
- Create @tpmjs/utils package with utility functions
- Create @tpmjs/types package with Zod schemas
- Create @tpmjs/env package for environment validation
- Set up Next.js 16 App Router application
- Configure Storybook in separate package
- Add GitHub Actions CI/CD workflows
- Configure Changesets for versioning and publishing
- Set up Lefthook pre-commit hooks
- Add comprehensive documentation
Key architecture decisions:
- All React components use .ts extension with createElement (no JSX)
- No barrel exports (index.ts) - direct imports required
- Module boundaries enforced via ESLint
- tsup for package builds with ESM + types
- Tailwind CSS with shared design tokens
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-25 21:59:15 +10:00