Internationalization 🌎

[binajmen]

Hi,

I'm wondering if someone has already used this library in the context of i18n? How would you adapt the readme example with remix-i18next?

import { useForm } from '@conform-to/react';
import { parse } from '@conform-to/zod';
import { Form } from '@remix-run/react';
import { json } from '@remix-run/node';
import { z } from 'zod';
import { authenticate } from '~/auth';

const schema = z.object({
  email: z.string().min(1, 'Email is required').email('Email is invalid'), // i18n?
  password: z.string().min(1, 'Password is required'), // i18n?
});

export async function action({ params, request }: ActionArgs) {
  const formData = await request.formData();
  const submission = parse(formData, { schema });

  if (!submission.value || submission.intent !== 'submit') {
    return json(submission, { status: 400 });
  }

  return await authenticate(submission.value);
}

export default function LoginForm() {
  const lastSubmission = useActionData<typeof action>();
  const [form, { email, password }] = useForm({
    lastSubmission,
    onValidate({ formData }) {
      return parse(formData, { schema });
    },
  });

  return (
    <Form method="post" {...form.props}>
      <div>
        <label>Email</label>
        <input type="email" name={email.name} />
        <div>{email.error}</div>
      </div>
      <div>
        <label>Password</label>
        <input type="password" name={password.name} />
        <div>{password.error}</div>
      </div>
      <button>Login</button>
    </Form>
  );
}

I see two solutions:

1. Duplicate the schema in the action and the route component in order to define t() with useTranslation() and getFixedT() respectively.
2. Wrap the schema in a function that accept a t function and returns a schema using the t function (but I remember I already tried this technique on a large schema in the past, leading to VS code warming up my laptop..)

Did anyone already come up with a clever alternative?

[edmundhung]

I am also curious how people is approaching this as well. I see 3 possible solutions:

1. Translation key as error message

import { useForm } from '@conform-to/react';
import { parse } from '@conform-to/zod';
import { useTranslation } from "react-i18next";
import { Form } from '@remix-run/react';
import { json } from '@remix-run/node';
import { z } from 'zod';
import { authenticate } from '~/auth';

const schema = z.object({
   email: z.string().min(1, 'email.required').email('email.invalid'),
   password: z.string().min(1, 'password.required'),
});

export async function action({ params, request }: ActionArgs) {
  // Nothing changed
}

export default function LoginForm() {
  const lastSubmission = useActionData<typeof action>();
  const { t } = useTranslation();
  const [form, { email, password }] = useForm({
    lastSubmission,
    onValidate({ formData }) {
      return parse(formData, { schema });
    },
  });

  return (
    <Form method="post" {...form.props}>
      <div>
        <label>Email</label>
        <input type="email" name={email.name} />
        <div>{t(email.error)}</div>
      </div>
      <div>
        <label>Password</label>
        <input type="password" name={password.name} />
        <div>{t(password.error)}</div>
      </div>
      <button>Login</button>
    </Form>
  );
}

2. Direct translation on the schema (Basically what you suggested)

import { useForm } from '@conform-to/react';
import { parse } from '@conform-to/zod';
import { useTranslation } from "react-i18next";
import { Form } from '@remix-run/react';
import { json } from '@remix-run/node';
import { z } from 'zod';
import { authenticate } from '~/auth';

function createSchema(t) {
  return z.object({
    email: z.string().min(1, t('email.required')).email(t('email.invalid')),
    password: z.string().min(1, t('password.required')),
  });
}

export async function action({ params, request }: ActionArgs) {
  const t = await i18n.getFixedT(request);
  const formData = await request.formData();
  const submission = parse(formData, {
    schema: createSchema(t),
  });

  if (!submission.value || submission.intent !== 'submit') {
    return json(submission, { status: 400 });
  }

  return await authenticate(submission.value);
}

export default function LoginForm() {
  const lastSubmission = useActionData<typeof action>();
  const t = useTranslation();
  const [form, { email, password }] = useForm({
    lastSubmission,
    onValidate({ formData }) {
      return parse(formData, { schema: createSchema(t) });
    },
  });

  return (
    <Form method="post" {...form.props}>
      <div>
        <label>Email</label>
        <input type="email" name={email.name} />
        <div>{email.error}</div>
      </div>
      <div>
        <label>Password</label>
        <input type="password" name={password.name} />
        <div>{password.error}</div>
      </div>
      <button>Login</button>
    </Form>
  );
}

3. Custom zod error map
   We just add support of error map on v0.7.0. Maybe we can use it with zod-i18n.

[jbovenschen]

We are currently exploring the same thing but with format.js

Because a user can switch the locale in the front-end it's nice it would be great if the translations would also be translated if the user switches to another language. Due to this we decided to go forward with the approach as described as step 1.

However, if the key is only an identifier, we cannot receive the necessary meta information around the error message on the client to create a proper validation message. To address this, it would be beneficial to allow the resolve method on the parse function to return an object instead of just a string for the error message.

{
        "code": "invalid_type",
        "expected": "string",
        "received": "number",
}

We attempted to implement this, but the useForm hook currently only allows errors to be strings. @edmundhung, would you be open to changes in the library to accommodate this?