clerk / javascript

Official Javascript repository for Clerk authentication
https://clerk.com
MIT License
1.09k stars 241 forks source link

feat(ui): Implement `translateError` util within `makeLocalizeable` #3603

Closed alexcarpenter closed 3 months ago

alexcarpenter commented 3 months ago

Description

enUS default:

Screenshot 2024-06-20 at 4 51 23 PM

esMX example:

Screenshot 2024-06-20 at 4 50 53 PM

Future thought I noodled on, baking some of the logic into these common components with escape hatches.

EmailField example ```tsx import * as Common from '@clerk/elements/common'; import React from 'react'; import { useAttributes } from '~/hooks/use-attributes'; import { useLocalizations } from '~/hooks/use-localizations'; import * as Field from '../primitives/field'; const FIELD_NAME = 'emailAddress'; const ERROR_NAME = 'email_address'; export function EmailField({ alternativeFieldTrigger, label, name = FIELD_NAME, hintText, error, ...props }: { alternativeFieldTrigger?: React.ReactNode; label?: React.ReactNode; hintText?: string; error?: (message: string, code: string, name: string) => string; } & Omit, 'type'>) { const { t, translateError } = useLocalizations(); const { enabled, required } = useAttributes('email_address'); const renderLabel = label || t('formFieldLabel__emailAddress'); const renderHintText = () => { if (hintText) { return hintText; } if (!required) { return t('formFieldHintText__optional'); } return null; }; const renderError = error || translateError; if (!enabled) { return null; } return ( {renderLabel}{' '} {alternativeFieldTrigger ? ( {alternativeFieldTrigger} ) : renderHintText ? ( {renderHintText()} ) : null} {({ state }) => { return ( ); }} {({ message, code }) => { return {renderError(message, code, ERROR_NAME)}; }} ); } ``` Usage: ```tsx // BEFORE {emailAddressEnabled ? ( ) : null} // AFTER ```

https://linear.app/clerk/issue/SDKI-68/localization-implement-translateerror-util

Checklist

Type of change

changeset-bot[bot] commented 3 months ago

🦋 Changeset detected

Latest commit: e6be4dba708843789114f8e7142f53018ac81213

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR