/storybook-props-mock-addon

Typescript storybook addon for mocking props

Primary LanguageTypeScript

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