From 5144bf0a7c2305077da529fe4b3501fad051979d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20M=20J=20Barata=20Ribeiro?= <122732773+Barata-Ribeiro@users.noreply.github.com> Date: Fri, 7 Aug 2026 11:20:21 -0300 Subject: [PATCH 1/5] docs: change UI primitives reference in README to Base UI --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 3eed79d..fc14f1c 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Utilities Web App A collection of focused utilities implemented as a modern Vite.js + React Router application using the `app` folder, and the `framework` mode for routing from React Router with TypeScript and Tailwind CSS. -Built with composable UI primitives (Radix + shadcn/ui), the project organizes converters, calculators and utilities +Built with composable UI primitives (Base UI + shadcn/ui), the project organizes converters, calculators and utilities into reusable components and routes for easy extension. Provides PWA/service worker support and light/dark theming. @@ -12,7 +12,7 @@ Demo: https://utilities-webapp.vercel.app/ - **Framework**: Vite.js + React Router (framework mode) — v8.x (see `package.json`) - **Language**: TypeScript + React — React v19.x - **Styling**: Tailwind CSS -- **UI primitives**: Radix UI + shadcn/ui +- **UI primitives**: Base UI + shadcn/ui - **Package manager**: pnpm (recommended) ## 📁 What this repository contains @@ -31,7 +31,7 @@ Demo: https://utilities-webapp.vercel.app/ Roman Converter, Text to Speech, URL Slug Generator - **Programming Utilities**: Image to Base64 - Light/dark theme switching (`next-themes`) -- Responsive layout with accessible UI primitives (Radix + custom shadcn/ui components) +- Responsive layout with accessible UI primitives (Base UI + custom shadcn/ui components) - Project built with modern tooling: Vite.js, React, TypeScript, Tailwind and ESLint/Prettier - Service Worker for offline support (experimental) and PWA features (workbox) From dea99d1a900b2b412df4b2391f87ef41cff4912f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20M=20J=20Barata=20Ribeiro?= <122732773+Barata-Ribeiro@users.noreply.github.com> Date: Fri, 7 Aug 2026 11:20:28 -0300 Subject: [PATCH 2/5] refactor: update Portal component to use @base-ui/react and enhance rendering logic --- app/components/portal.tsx | 20 ++++++++++++++------ app/routes/about.tsx | 2 +- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/app/components/portal.tsx b/app/components/portal.tsx index dece1d4..17fa206 100644 --- a/app/components/portal.tsx +++ b/app/components/portal.tsx @@ -1,10 +1,10 @@ -import { Slot as SlotPrimitive } from 'radix-ui'; +'use client'; + +import { useRender } from '@base-ui/react/use-render'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; -type SlotProps = React.ComponentProps; - -interface PortalProps extends SlotProps { +interface PortalProps extends useRender.ComponentProps<'div'> { container?: Element | DocumentFragment | null; } @@ -21,15 +21,23 @@ function getServerSnapshot() { } function Portal(props: PortalProps) { - const { container: containerProp, ...portalProps } = props; + const { container: containerProp, render, ...portalProps } = props; const mounted = React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); const container = containerProp ?? (mounted ? globalThis.document?.body : null); + const element = useRender({ + props: portalProps, + render, + state: { + slot: 'portal', + }, + }); + if (!container) return null; - return ReactDOM.createPortal(, container); + return ReactDOM.createPortal(element, container); } export { Portal }; diff --git a/app/routes/about.tsx b/app/routes/about.tsx index 64d8b77..ca88429 100644 --- a/app/routes/about.tsx +++ b/app/routes/about.tsx @@ -28,7 +28,7 @@ export default function About() {

Highlights

From 390b28968ac67a0ac2028c5e1e90cb6b07b5139f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20M=20J=20Barata=20Ribeiro?= <122732773+Barata-Ribeiro@users.noreply.github.com> Date: Fri, 7 Aug 2026 13:25:46 -0300 Subject: [PATCH 3/5] refactor: update button imports and enhance button usage in date calculators and base64-to-image component --- .../calculators/date/date-add-subtract.tsx | 30 +++++++---------- .../calculators/date/date-difference.tsx | 33 +++++++------------ .../pages/programming/base64-to-image.tsx | 25 +++++++------- 3 files changed, 37 insertions(+), 51 deletions(-) diff --git a/app/components/pages/calculators/date/date-add-subtract.tsx b/app/components/pages/calculators/date/date-add-subtract.tsx index 415bca1..c3fb8d4 100644 --- a/app/components/pages/calculators/date/date-add-subtract.tsx +++ b/app/components/pages/calculators/date/date-add-subtract.tsx @@ -5,7 +5,7 @@ import { floor, random } from 'mathjs'; import { useState } from 'react'; import { Controller, Resolver, useForm } from 'react-hook-form'; import { z } from 'zod/v4'; -import { Button } from '~/components/ui/button'; +import { Button, buttonVariants } from '~/components/ui/button'; import { Calendar } from '~/components/ui/calendar'; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '~/components/ui/card'; import { Field, FieldContent, FieldError, FieldGroup, FieldLabel } from '~/components/ui/field'; @@ -116,23 +116,17 @@ export default function DateAddSubtract() { - {field.value ? ( - format(field.value, 'PPP') - ) : ( - Pick a date - )} - - - } - /> + className={buttonVariants({ + variant: 'outline', + className: cn( + 'pl-3 text-left font-normal max-sm:max-w-60 sm:w-full', + !field.value && 'text-muted-foreground', + ), + })} + > + {field.value ? format(field.value, 'PPP') : Pick a date} + + - {field.value ? ( - format(field.value, 'PPP') - ) : ( - Pick a date - )} - - - } - /> + className={buttonVariants({ + variant: 'outline', + className: cn( + 'w-full max-w-60 pl-3 text-left font-normal', + !field.value && 'text-muted-foreground', + ), + })} + > + {field.value ? format(field.value, 'PPP') : Pick a date} + + -