akiver/cs-demo-manager/i18n

// ✅ Good - uses macro
import { Trans } from '@lingui/react/macro';
// ❌ Avoid - runtime only
import { Trans } from '@lingui/react';

// ❌ Bad - loses context
<Trans>Hello {user.name.toUpperCase()}</Trans>;
// Extracted as: "Hello {0}"
// ✅ Good - clear variable name
const userName = user.name.toUpperCase();
<Trans>Hello {userName}</Trans>;
// Extracted as: "Hello {userName}"

import { Trans } from "@lingui/react/macro";
// Simple text
<Trans>Hello World</Trans>
// With variables
<Trans>Hello {userName}</Trans>
// With components (rich text)
<Trans>
  Read the <a href="/docs">documentation</a> for more info.
</Trans>
// Extracted as: "Read the <0>documentation</0> for more info."

import { useLingui } from '@lingui/react/macro';
function MyComponent() {
  const { t } = useLingui();
  const handleClick = () => {
    alert(t`Action completed!`);
  };
  return (
    <div>
      <img src="..." alt={t`Image description`} />
      <button onClick={handleClick}>{t`Click me`}</button>
    </div>
  );
}

import { msg } from '@lingui/core/macro';
import { useLingui } from '@lingui/react';
function StatusList() {
  const { _ } = useLingui();
  const statuses = {
    active: msg`Active`,
    inactive: msg`Inactive`,
    pending: msg`Pending`,
  };
  return Object.entries(statuses).map(([key, message]) => <div key={key}>{_(message)}</div>);
}

import { Plural } from '@lingui/react/macro';
<Plural value={messageCount} one="You have # message" other="You have # messages" />;

<Plural value={count} _0="No messages" one="One message" other="# messages" />

<Plural
  value={count}
  one={`You have # message, ${userName}`}
  other={
    <Trans>
      You have <strong>#</strong> messages, {userName}
    </Trans>
  }
/>

import { useFormatDate } from 'csdm/ui/hooks/use-format-date';
function MyComponent() {
  const formatDate = useFormatDate();
  const lastLogin = new Date();
  return <Trans>Last login: {formatDate(lastLogin)}</Trans>;
}

import { useLocale } from 'csdm/ui/settings/ui/use-locale';
function MyComponent({ score }: { score: number }) {
  const locale = useLocale();
  const formatted = new Intl.NumberFormat(locale).format(score);
  return <Trans>Score: {formatted}</Trans>;
}

// ✅ electron-main only
t({ id: 'notification.download.complete', message: 'Download complete' });
// ❌ Never in src/ui/ — let the macro generate the ID
<Trans id="some.id">Download complete</Trans>;

<Trans context="direction">right</Trans>
<Trans context="correctness">right</Trans>

<Trans comment="Greeting shown on homepage">Hello World</Trans>

vp run i18n:extract