Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add function to get whether is in storycap #133

Merged
merged 3 commits into from
Oct 21, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions MIGRATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ $ zisui http://your.storybook.com
$ storycap http://your.storybook.com
```

All CLI options of _zisui_ are available with storycap.
All CLI options of _zisui_ are available with Storycap.

### Managed mode for React

Expand All @@ -195,7 +195,7 @@ You should replace it:
import 'storycap/register';
```

And You should edit `.storybook/config.js`:
And you should edit `.storybook/config.js`:

```js
/* .storybook/config.js */
Expand All @@ -221,7 +221,7 @@ addDecorator(withScreenshot({
});
```
**Remarks**: And storycap accepts [Storybook's global parameters notation](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#options-addon-deprecated), so using `addParameters` is recommended if you use Storybook v5.0 or later:
**Remarks**: Storycap accepts [Storybook's global parameters notation](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#options-addon-deprecated), so `addParameters` is recommended if you use Storybook v5.0 or later:
```js
/* .storybook/config.js */
Expand Down
17 changes: 13 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@

> A [Storybook][storybook] Addon, Save the screenshot image of your stories :camera: via [Puppeteer][puppeteer].

Storycap takes a screenshot and saves it.
It is primarily responsible for image generation necessary for Visual Testing such as `reg-viz`.
Storycap crawls your Storybook and takes screenshot images.
It is primarily responsible for image generation necessary for Visual Testing such as [reg-suit](https://github.com/reg-viz/reg-suit).

<!-- toc -->

Expand All @@ -24,9 +24,10 @@ It is primarily responsible for image generation necessary for Visual Testing su
- [Run `storycap` Command](#run-storycap-command)
- [API](#api)
- [`withScreenshot`](#withscreenshot)
- [type `ScreenohotOptions`](#type-screenohotoptions)
- [type `ScreenshotOptions`](#type-screenshotoptions)
- [type `Variants`](#type-variants)
- [type `Viewport`](#type-viewport)
- [function `isScreenshot`](#function-isscreenshot)
- [Command Line Options](#command-line-options)
- [Multiple PNGs from 1 story](#multiple-pngs-from-1-story)
- [Basic usage](#basic-usage)
Expand Down Expand Up @@ -190,7 +191,7 @@ A Storybook decorator to notify Storycap to captures stories.

**Note:** Using `withScreenshot` as function is deprecated. Use `addParameters` if you give screenshot options.

### type `ScreenohotOptions`
### type `ScreenshotOptions`

`ScreenshotOptions` object is available as the value of the key `screenshot` of `addParameters` argument or `withScreenshot` argument.

Expand Down Expand Up @@ -281,6 +282,14 @@ addParameters({
});
```

### function `isScreenshot`

```typescript
function isScreenshot(): boolean;
```

Returns whether current process runs in Storycap browser. It's useful to change your stories' behavior only in Storycap (e.g. disable JavaScript animation).

## Command Line Options

<!-- inject:clihelp -->
Expand Down
4 changes: 3 additions & 1 deletion examples/v5-managed-react/src/stories/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { Button, Welcome } from '@storybook/react/demo';
import MyButton from '../MyButton';
import MyInputText from '../MyInputText';

import { isScreenshot } from 'storycap';

storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
storiesOf('Welcome_override', module)
.add('to Storybook', () => <Welcome showApp={linkTo('Button')} />, {
Expand All @@ -23,7 +25,7 @@ storiesOf('Welcome_override', module)
});

storiesOf('Button', module)
.add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
.add('with text', () => <Button onClick={action('clicked')}>Hello { isScreenshot() ? 'Storycap' : 'Button'}</Button>)
.add('with some emoji', () => (
<Button onClick={action('clicked')}>
<span role="img" aria-label="so cool">
Expand Down
2 changes: 1 addition & 1 deletion packages/storycap/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
},
"scripts": {
"clean": "rimraf lib",
"build": "tsc --p tsconfig.build.json",
"build": "tsc --p tsconfig.build.json && tsc -p tsconfig.client.json",
"prepare": "yarn clean && yarn build",
"test": "jest",
"typedoc": "typedoc --out \"../../dist-pages/typedoc/storycap\" --ignoreCompilerErrors --tsconfig tsconfig.build.json src"
Expand Down
8 changes: 8 additions & 0 deletions packages/storycap/src/client/is-screenshot.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/**
*
* @returns Whether current process runs in Storycap browser.
*
**/
export function isScreenshot() {
return !!(window as any).emitCatpture;
}
1 change: 1 addition & 0 deletions packages/storycap/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export { withScreenshot } from './client/with-screenshot';
export { isScreenshot } from './client/is-screenshot';
export { ScreenshotOptions } from './shared/types';
10 changes: 10 additions & 0 deletions packages/storycap/tsconfig.client.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"target": "es5",
"downlevelIteration": true,
"rootDir": "./src",
"outDir": "./lib"
},
"exclude": ["node_modules", "lib", "src/node"]
}