Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/crazyfactory/storybook-props-mock-addon
Typescript storybook addon for mocking props
https://github.com/crazyfactory/storybook-props-mock-addon
Last synced: about 1 month ago
JSON representation
Typescript storybook addon for mocking props
- Host: GitHub
- URL: https://github.com/crazyfactory/storybook-props-mock-addon
- Owner: crazyfactory
- Created: 2019-11-08T02:34:07.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T11:31:55.000Z (about 2 years ago)
- Last Synced: 2024-11-06T08:18:03.826Z (3 months ago)
- Language: TypeScript
- Size: 1.47 MB
- Stars: 0
- Watchers: 8
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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
```javascript
loader: path.resolve('./node_modules/@crazyfactory/storybook-props-mock-addon/lib/reactTypescriptTranslationLoader.js')
```
config.js
```javascript
import {withMockedTranslation} from "@crazyfactory/storybook-props-mock-addon/lib/withMockedTranslation";
addDecorator(withMockedTranslation());
```
story files
```typescript
export const Simple = ({mockedTranslation}) => (
// pass mockedTranslation to translation prop
);
```
### Example
Age.tsx
```typescript jsx
import * as React from "react";
export interface AgeProps {
age: number;
translation: {
age: string;
};
}
export const Age = ({age, translation}: AgeProps) => (
{translation.age}: {age}
);
```
CustomerInfo.tsx
```typescript jsx
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 {
public render(): JSX.Element {
const {ageProps, firstName, lastName, translation} = this.props;
return (
{translation.firstName}: {firstName}
{translation.lastName}: {lastName}
);
}
}
```
CustomerInfo.stories.tsx
```typescript jsx
import * as React from "react";
import {CustomerInfo} from "./CustomerInfo";
export default {
component: CustomerInfo,
title: "CustomerInfo"
};
export const Simple = ({mockedTranslation}) => (
);
```
Then run storybook, the addon will generate translation for you by pascalizing translation keys
