It will generate translation based on translation
prop's keys. Nested translation is also supported.
webpack.config.js
loader: path.resolve('./node_modules/@crazyfactory/storybook-props-mock-addon/lib/reactTypescriptTranslationLoader.js')
config.js
import {withMockedTranslation} from "@crazyfactory/storybook-props-mock-addon/lib/withMockedTranslation";
addDecorator(withMockedTranslation());
story files
export const Simple = ({mockedTranslation}) => (
// pass mockedTranslation to translation prop
);
Age.tsx
import * as React from "react";
export interface AgeProps {
age: number;
translation: {
age: string;
};
}
export const Age = ({age, translation}: AgeProps) => (
<div>
{translation.age}: {age}
</div>
);
CustomerInfo.tsx
import * as React from "react";
import {Age, AgeProps} from "./Age";
interface CustomerInfoProps {
ageProps: AgeProps;
firstName: string;
lastName: string;
translation: {
firstName: string;
lastName: string;
};
}
export class CustomerInfo extends React.Component<CustomerInfoProps> {
public render(): JSX.Element {
const {ageProps, firstName, lastName, translation} = this.props;
return (
<div>
<div>
{translation.firstName}: {firstName}
</div>
<div>
{translation.lastName}: {lastName}
</div>
<Age {...ageProps}/>
</div>
);
}
}
CustomerInfo.stories.tsx
import * as React from "react";
import {CustomerInfo} from "./CustomerInfo";
export default {
component: CustomerInfo,
title: "CustomerInfo"
};
export const Simple = ({mockedTranslation}) => (
<CustomerInfo
ageProps={{age: 10, translation: mockedTranslation}}
firstName={"John"}
lastName={"Lee"}
translation={mockedTranslation}
/>
);
Then run storybook, the addon will generate translation for you by pascalizing translation keys