Skip to content

crazyfactory/storybook-props-mock-addon

Repository files navigation

Only translation can be mocked for now

It will generate translation based on translation prop's keys. Nested translation is also supported.

Usage

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
  );

Example

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 image