Implement Trans component

[DRFR0ST]

📜 Description

This PR adds a new feature to the project: the Trans component. The Trans component is a custom translation component that can interpolate variables and parse HTML elements.

The Trans component takes three props:

• children - The translation string to be rendered.
• values - An object containing values to be interpolated in the translation string.
• components - An object containing custom React components or HTML tags to be parsed and rendered.

This PR also includes an updated version of package.json.

🧪 How to test this?

To test this PR, follow these steps:

1. Clone the repository.
2. Checkout the trans-component branch.
3. Install dependencies with yarn install.
4. Run tests with yarn test.
5. Link littera package with yarn link while in the root directory.
6. Set up an example React app with npx create-react-app ./PlaygroundApp --template=typescript
7. Link littera with the example app and complete basic setup. Link with yarn link @assembless/react-littera while in the apps root directory.
8. Run the app and navigate to http://localhost:3000 to see the Trans component in action.

🚀 Examples

Here are a few examples of how to use the Trans component:

import React from 'react';
import { Trans, useLittera } from '@assembless/react-littera';

const translations = {
  welcome: {
    en_US: "Welcome <strong>{name}</strong>!",
    de_DE: "Willkommen <strong>{name}</strong>!",
    pl_PL: "Witaj <strong>{name}</strong>!",
  },
};

function App() {
  const translated = useLittera(translations);

  return (
    <Trans values={{ name: "Jack" }}>
      {translated.welcome}
    </Trans>
  );
}

import React from 'react';
import { Trans, useLittera } from '@assembless/react-littera';

const translations = {
  about: {
    en_US: "This is the <a href='/about'>about</a> page.",
    de_DE: "Dies ist die <a href='/about'>Über uns</a>-Seite.",
    pl_PL: "To jest <a href='/about'>strona o nas</a>.",
  },
};

function AboutPage() {
  const translated = useLittera(translations);

  return (
    <Trans components={{ a: Link }}>
      {translated.about}
    </Trans>
  );
}

[codesandbox[bot]]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[abhagsain]

[DRFR0ST]

We have pushed a nightly release that includes the Trans component. https://www.npmjs.com/package/@assembless/react-littera/v/2.5.0-nightly.0

To update run: yarn upgrade @assembless/react-littera@nightly

[DRFR0ST]

/reviewpad summarize

[reviewpad[bot]]

Reviewpad Report

:bangbang: Errors

• Unconventional commit detected: ':sparkles: Implement the Trans component' (bf884d3dbb198b48522888b2f843abd707fafd50)
• Unconventional commit detected: ':arrow_up: Update packages

React from 16.X to 18.X Webpack from 4.X to 5.X' (d2cf7168948a728435e860b7a5fbda75983f6a79)

• Unconventional commit detected: ':white_check_mark: Add Trans component tests' (6d14d1261bedf378336e81c8ee60603b28f028f4)
• Unconventional commit detected: ':fire: Remove failing and abandoned tests

Only for withLittera HOC that is suggested not to be used' (50dfbba04f4d3e8905d97fef08c6bdc691749676)

• Unconventional commit detected: ':arrow_up: Update Jest and cleanup tests' (829320054ace4b324bfba0fbdc544957b16ce2b3)
• Unconventional commit detected: ':zap: Optimize Trans component' (a5adcae98ad40a62dd7059f2fef130a6f1fb6f31)
• Unconventional commit detected: ':white_check_mark: Implement more tests' (9958124ac5a2fa8b951db780a33f9b6853ee7e86)
• Unconventional commit detected: ':camera_flash: Update snapshots' (e7f52fdb840c0aeef4b9975393e476b2c0c7b88b)
• Unconventional commit detected: ':memo: Update README.md' (ea2a46bc01ed659b686997e6045b6c185f14bcb9)
• Unconventional commit detected: ':memo: Update CHANGELOG.md' (b61b494c73e220b818192a92bc9dbc1c5b6e2dfd)
• Unconventional commit detected: ':memo: Update LICENSE' (2d2dd9f6f349d6b887ee0b4e1b4efcd1d2b102d0)
• Unconventional commit detected: ':arrow_up: Update dependencies' (6296233e0ddda2f887a47a21d472dd39d729cac2)
• Unconventional commit detected: ':memo: Update jsdocs comments' (0a74d4c7d8d9de1c060250f46d922230a4393c93)
• Unconventional commit detected: ':recycle: Sync yarn.lock' (5459ecdae1dcf2ce28c21f3b6622176246fc69f7)
• Unconventional commit detected: ':wrench: Update tsconfig.json' (7110ffa4a36fbd8ffcc0104860296fab9a60eb10)
• Unconventional commit detected: ':wrench: Fix critical issue crashing React

• Clean up code and dependencies' (1fb736b3cbc559bb43ab629b0fb5c4ebc7d83e70)

• Unconventional title detected: 'Implement Trans component' illegal 'I' character in commit message type: col=00

:warning: Warnings

• Please link an issue to the pull request

Fatal

• License files cannot be modified