mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
8675c7863e
* devDeps: pin @babel/core and @babel/runtime in resulotions
Without this: misses patch, lavamoat error
* storybook 6 to 7 migration
* devDeps: add @storybook/addon-mdx-gfm
* fix lint deps
* devDeps: remove unused require-from-string
* devDeps/resolutions: @types/react@^16.9.53
* devDeps: add @storybook/cli
* storybook: new-frameworks migration
* iyarc: remove resolved dependency advisory
* deps: set globalthis@1.0.1 in resolutions
This is required since a file is copied over from a set path in the dist
package subdirectory as of d13aabde2307af821b93ecb1b3221b07112e48b2 (#10014).
A future update should either vendor the shim, or update to
compatibility with a maintained upstream version.
* mdx2 migration fixes
* chore: bump ljharb packages
* devDeps: @storybook/*@^7.0.10->^7.0.11
* storybook: update preview.js to use v7 addon api
* ci/test/storybook: echo between storybook build&test
* ci/circleci: resources tweak
* info-tab: handle undefined global.platform
* update lavamoat build policy
* update lavamoat browserify policies
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="components-app-metamasktranslation--default-story" />
</Canvas>
## Props
{/*
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` |