1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/metamask-translation
Mark Stacey 3732c5f71e
Add JSDoc ESLint rules (#12112)
ESLint rules have been added to enforce our JSDoc conventions. These
rules were introduced by updating `@metamask/eslint-config` to v9.

Some of the rules have been disabled because the effort to fix all lint
errors was too high. It might be easiest to enable these rules one
directory at a time, or one rule at a time.

Most of the changes in this PR were a result of running
`yarn lint:fix`. There were a handful of manual changes that seemed
obvious and simple to make. Anything beyond that and the rule was left
disabled.
2022-01-07 12:27:33 -03:30
..
index.js remove the ui/app and ui/lib folders (#10911) 2021-04-28 14:53:59 -05:00
metamask-translation.js Add JSDoc ESLint rules (#12112) 2022-01-07 12:27:33 -03:30
metamask-translation.stories.js Fix metamask-translation component for new Storybook format (#12892) 2021-12-07 14:29:12 -08:00
README.mdx Fix metamask-translation component for new Storybook format (#12892) 2021-12-07 14:29:12 -08:00

import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';

import MetaMaskTranslation from '.';

# MetaMask Translation

MetaMaskTranslation is a simple helper component for adding full translation
support to the template system. We do pass the translation function to the
template getValues function, but passing it React components as variables
would require React to be in scope, and breaks the object pattern paradigm.

This component gets around that by converting variables that are templates
themselves into tiny React trees. This component does additional validation
to make sure that the tree has a single root node, with maximum two leaves.
Each subnode can have a maximum of one child that must be a string.

This enforces a maximum recursion depth of 2, preventing translation strings
from being performance hogs. We could further limit this, and also attenuate
the safeComponentList for what kind of components we allow these special
trees to contain.

<Canvas>
  <Story id="ui-components-app-metamask-translation-metamask-translation-stories-js--default-story" />
</Canvas>

## Component API

<!--
ArgsTable doesn't work with SectionShape
<ArgsTable of={MetaMaskTranslation} />
-->

| Name             | Description                                                                                             |
| ---------------- | ------------------------------------------------------------------------------------------------------- |
| `translationKey` | Translation object key `string`                                                                         |
| `variables`      | Array of variables for the MetaMaskTranslation. Can be an array of `string`, `number` or `SectionShape` |