mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 08:01:20 +08:00
Merge branch 'master' into addon-channel-warning
This commit is contained in:
Norbert de Langen
GitHub
commit
de06581c23
@ -2,7 +2,7 @@ dist
|
||||
build
|
||||
coverage
|
||||
node_modules
|
||||
**/example/**
|
||||
addons/**/example/**
|
||||
app/**/demo/**
|
||||
docs/public
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@ module.exports = {
|
||||
singleQuote: true,
|
||||
},
|
||||
],
|
||||
quotes: [warn, 'single'],
|
||||
quotes: [warn, 'single', { avoidEscape: true }],
|
||||
'class-methods-use-this': ignore,
|
||||
'arrow-parens': [warn, 'as-needed'],
|
||||
'space-before-function-paren': ignore,
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -16,3 +16,4 @@ yarn.lock
|
||||
docs/public
|
||||
packs/*.tgz
|
||||
package-lock.json
|
||||
.nvmrc
|
||||
|
||||
44
CHANGELOG.md
44
CHANGELOG.md
@ -1,6 +1,41 @@
|
||||
# 3.2.3
|
||||
|
||||
2017-August-01
|
||||
|
||||
#### Features
|
||||
|
||||
- Use the React Native packager's host by default [#1568](https://github.com/storybooks/storybook/pull/1568)
|
||||
- Make onDeviceUI default for RN getstorybook [#1571](https://github.com/storybooks/storybook/pull/1571)
|
||||
|
||||
#### Documentation
|
||||
|
||||
- Add short description to addon-options readme [#1566](https://github.com/storybooks/storybook/pull/1566)
|
||||
|
||||
# 3.2.2
|
||||
|
||||
2017-July-31
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Fixed build-storybook for vue [#1564](https://github.com/storybooks/storybook/pull/1564)
|
||||
|
||||
# 3.2.1
|
||||
|
||||
2017-July-31
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Check if hierarchySeparator presents in the options object [#1561](https://github.com/storybooks/storybook/pull/1561)
|
||||
- React Native <0.43 support [#1555](https://github.com/storybooks/storybook/pull/1555)
|
||||
|
||||
#### Documentation
|
||||
|
||||
- Fix typo with Vue README referring to react [#1556](https://github.com/storybooks/storybook/pull/1556)
|
||||
- Add state-setting FAQ [#1559](https://github.com/storybooks/storybook/pull/1559)
|
||||
|
||||
# 3.2.0
|
||||
|
||||
2017-July-27
|
||||
2017-July-31
|
||||
|
||||
Storybook 3.2 is filled with new features to help make your components shine! Headline features:
|
||||
|
||||
@ -15,17 +50,12 @@ Plus many more features, documentation improvements, and bugfixes below!
|
||||
- Vue support [#1267](https://github.com/storybooks/storybook/pull/1267)
|
||||
- Add support for vue in addon-notes [#1278](https://github.com/storybooks/storybook/pull/1278)
|
||||
- CLI support for Vue [#1287](https://github.com/storybooks/storybook/pull/1287)
|
||||
|
||||
|
||||
- Story Hierarchy [#1329](https://github.com/storybooks/storybook/pull/1329)
|
||||
- Story Hierarchy UI improvements [#1387](https://github.com/storybooks/storybook/pull/1387) [#1356](https://github.com/storybooks/storybook/pull/1356)
|
||||
- Story Hierarchy - keyboard accessibility [#1427](https://github.com/storybooks/storybook/pull/1427)
|
||||
|
||||
|
||||
- React Native - On Device UI [#1413](https://github.com/storybooks/storybook/pull/1413)
|
||||
- Show first story on RN OnDeviceUI startup [#1510](https://github.com/storybooks/storybook/pull/1510)
|
||||
|
||||
|
||||
- Added collapsible RN OnDeviceUI navigation [#1544](https://github.com/storybooks/storybook/pull/1544)
|
||||
- Add warning when module is missing in storiesOf [#1525](https://github.com/storybooks/storybook/pull/1525)
|
||||
- Provide styling hook for Addon Info story body [#1308](https://github.com/storybooks/storybook/pull/1308)
|
||||
- Implement filtering on story-level [#1432](https://github.com/storybooks/storybook/pull/1432)
|
||||
|
||||
36
MIGRATION.md
36
MIGRATION.md
@ -2,6 +2,9 @@
|
||||
|
||||
## Table of contents
|
||||
|
||||
- [From version 3.1.x to 3.2.x](#from-version-31x-to-32x)
|
||||
- [Moved TypeScript addons definitions](#moved-typescript-addons-definitions)
|
||||
- [Updated Addons API](#updated-addons-api)
|
||||
- [From version 3.0.x to 3.1.x](#from-version-30x-to-31x)
|
||||
- [Moved TypeScript definitions](#moved-typescript-definitions)
|
||||
- [Deprecated head.html](#deprecated-headhtml)
|
||||
@ -10,6 +13,39 @@
|
||||
- [Packages renaming](#packages-renaming)
|
||||
- [Deprecated embedded addons](#deprecated-embedded-addons)
|
||||
|
||||
## From version 3.1.x to 3.2.x
|
||||
|
||||
**NOTE:** technically this is a breaking change, but only if you use TypeScript. Sorry people!
|
||||
|
||||
### Moved TypeScript addons definitions
|
||||
|
||||
TypeScript users: we've moved the rest of our addons type definitions into [DefinitelyTyped](http://definitelytyped.org/). Starting in 3.2.0 make sure to use the right addons types:
|
||||
|
||||
```sh
|
||||
npm install @types/storybook__addon-notes @types/storybook__addon-options @types/storybook__addon-knobs @types/storybook__addon-links --save-dev
|
||||
```
|
||||
|
||||
See also [TypeScript definitions in 3.1.x](#moved-typescript-definitions).
|
||||
|
||||
### Updated Addons API
|
||||
|
||||
We're in the process of upgrading our addons APIs. As a first step, we've upgraded the Info and Notes addons. The old API will still work with your existing projects, but will be deprecated soon and removed in Storybook 4.0.
|
||||
|
||||
Here's an example of using Notes and Info in 3.2 with the new API.
|
||||
|
||||
```js
|
||||
storiesOf('composition', module)
|
||||
.add('new addons api',
|
||||
withInfo('see Notes panel for composition info')(
|
||||
withNotes({ notes: 'Composition: Info(Notes())' })(context =>
|
||||
<MyComponent name={context.story} />
|
||||
)
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
It's not beautiful, but we'll be adding a more convenient/idiomatic way of using these [withX primitives](https://gist.github.com/shilman/792dc25550daa9c2bf37238f4ef7a398) in Storybook 3.3.
|
||||
|
||||
## From version 3.0.x to 3.1.x
|
||||
|
||||
**NOTE:** technically this is a breaking change and should be a 4.0.0 release according to semver. However, we're still figuring things out, and didn't think this change necessitated a major release. Please bear with us!
|
||||
|
||||
15
ROADMAP.md
15
ROADMAP.md
@ -10,8 +10,8 @@
|
||||
- [See multiple (or all) stories in 1 preview.](#see-multiple-or-all-stories-in-1-preview)
|
||||
- [Deeper level hierarchy](#deeper-level-hierarchy)
|
||||
- [Supporting other frameworks and libraries](#supporting-other-frameworks-and-libraries)
|
||||
- [Vue](#vue) (*in alpha*)
|
||||
- [Angular](#angular) (*in development*)
|
||||
- [Vue](#vue)
|
||||
- [Angular](#angular)
|
||||
- [Webcomponents](#webcomponents)
|
||||
- [Polymer](#polymer)
|
||||
- [Aurelia](#aurelia)
|
||||
@ -20,7 +20,7 @@
|
||||
- [API for adding stories](#api-for-adding-stories)
|
||||
- [Documentation](#documentation)
|
||||
- [Better design](#better-design)
|
||||
- [Record videos and write blog post on how to tweak storybook](#record-videos-and-write-blog-post-on-how-to-tweak-storybook)
|
||||
- [Record videos and write blog post on how to use, tweak & develop storybook](#record-videos-and-write-blog-post-on-how-to-use-tweak--develop-storybook)
|
||||
|
||||
## New features
|
||||
|
||||
@ -110,8 +110,7 @@ We have a new logo, so next step is a overhaul of our documentation site.
|
||||
|
||||
### Record videos and write blog post on how to use, tweak & develop storybook
|
||||
|
||||
- writing addons,
|
||||
- choosing the right addons.
|
||||
- how to start developing on our codebase.
|
||||
- how to use storybook itself and the CLI.
|
||||
|
||||
- writing addons,
|
||||
- choosing the right addons.
|
||||
- how to start developing on our codebase.
|
||||
- how to use storybook itself and the CLI.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "3.2.0-alpha.10",
|
||||
"version": "3.2.0",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -21,7 +21,7 @@
|
||||
"storybook": "start-storybook -p 9001"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "^3.2.0-alpha.10",
|
||||
"@storybook/addons": "^3.2.0",
|
||||
"deep-equal": "^1.0.1",
|
||||
"json-stringify-safe": "^5.0.1",
|
||||
"prop-types": "^15.5.10",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "3.2.0-alpha.8",
|
||||
"version": "3.2.0",
|
||||
"description": "Storybook decorator to center components",
|
||||
"license": "MIT",
|
||||
"author": "Muhammed Thanish <mnmtanish@gmail.com>",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-comments",
|
||||
"version": "3.2.0-alpha.10",
|
||||
"version": "3.2.0",
|
||||
"description": "Comments addon for Storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -23,7 +23,7 @@
|
||||
"storybook-remote": "start-storybook -p 3006"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "^3.2.0-alpha.10",
|
||||
"@storybook/addons": "^3.2.0",
|
||||
"babel-runtime": "^6.23.0",
|
||||
"deep-equal": "^1.0.1",
|
||||
"events": "^1.1.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "3.2.0-alpha.10",
|
||||
"version": "3.2.0",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,7 +20,7 @@
|
||||
"storybook": "start-storybook -p 6006"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "^3.2.0-alpha.10",
|
||||
"@storybook/addons": "^3.2.0",
|
||||
"babel-runtime": "^6.23.0",
|
||||
"format-json": "^1.0.3",
|
||||
"prop-types": "^15.5.10",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "3.2.0-alpha.10",
|
||||
"version": "3.2.0",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -15,7 +15,7 @@ This addon works with Storybook for:
|
||||
|
||||
|
||||
|
||||
## Usage
|
||||
## Installation
|
||||
|
||||
Install the following npm module:
|
||||
|
||||
@ -23,7 +23,76 @@ Install the following npm module:
|
||||
npm i -D @storybook/addon-info
|
||||
```
|
||||
|
||||
Then set the addon in the place you configure storybook like this:
|
||||
## Basic usage
|
||||
|
||||
Then wrap your story with the `withInfo`, which is a function that takes either
|
||||
documentation text or an options object:
|
||||
|
||||
```js
|
||||
import { configure, setAddon } from '@storybook/react';
|
||||
import { withInfo } from '@storybook/addon-info';
|
||||
|
||||
storiesOf('Component', module)
|
||||
.add('simple info',
|
||||
withInfo('doc string about my component')(() =>
|
||||
<Component>Click the "?" mark at top-right to view the info.</Component>
|
||||
)
|
||||
)
|
||||
```
|
||||
|
||||
## Usage with options
|
||||
|
||||
`withInfo` can also take an options object in case you want to configure how
|
||||
the info panel looks on a per-story basis:
|
||||
|
||||
```js
|
||||
import { configure, setAddon } from '@storybook/react';
|
||||
import { withInfo } from '@storybook/addon-info';
|
||||
|
||||
storiesOf('Component', module)
|
||||
.add('simple info',
|
||||
withInfo({
|
||||
text: 'doc string about my component',
|
||||
maxPropsIntoLine: 1,
|
||||
maxPropObjectKeys: 10,
|
||||
maxPropArrayLength: 10,
|
||||
)(() =>
|
||||
<Component>Click the "?" mark at top-right to view the info.</Component>
|
||||
)
|
||||
)
|
||||
```
|
||||
|
||||
## Usage as decorator
|
||||
|
||||
It is possible to add infos by default to all components by using a global or story decorator. The drawback is you won't be able to display a distinct info message per story.
|
||||
|
||||
It is important to declare this decorator as **the first decorator**, otherwise it won't work well.
|
||||
|
||||
```
|
||||
addDecorator((story, context) => withInfo('common info')(story)(context));
|
||||
```
|
||||
|
||||
## Global options
|
||||
|
||||
To configure default options for all usage of the info option, use `setDefaults` in `.storybook/config.js`:
|
||||
|
||||
```js
|
||||
// config.js
|
||||
import { setDefaults } from '@storybook/addon-info';
|
||||
|
||||
// addon-info
|
||||
setDefaults({
|
||||
inline: true,
|
||||
maxPropsIntoLine: 1,
|
||||
maxPropObjectKeys: 10,
|
||||
maxPropArrayLength: 10,
|
||||
maxPropStringLength: 100,
|
||||
});
|
||||
```
|
||||
|
||||
## Deprecated usage
|
||||
|
||||
There is also a deprecated API that is slated for removal in Storybook 4.0.
|
||||
|
||||
```js
|
||||
import { configure, setAddon } from '@storybook/react';
|
||||
@ -55,23 +124,6 @@ storiesOf('Component')
|
||||
|
||||
> Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API.
|
||||
|
||||
To customize your defaults:
|
||||
|
||||
```js
|
||||
// config.js
|
||||
import infoAddon, { setDefaults } from '@storybook/addon-info';
|
||||
|
||||
// addon-info
|
||||
setDefaults({
|
||||
inline: true,
|
||||
maxPropsIntoLine: 1,
|
||||
maxPropObjectKeys: 10,
|
||||
maxPropArrayLength: 10,
|
||||
maxPropStringLength: 100,
|
||||
});
|
||||
setAddon(infoAddon);
|
||||
```
|
||||
|
||||
## The FAQ
|
||||
|
||||
**Components lose their names on static build**
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "3.2.0-alpha.10",
|
||||
"version": "3.2.0",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -14,7 +14,7 @@
|
||||
"storybook": "start-storybook -p 9010"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "^3.2.0-alpha.10",
|
||||
"@storybook/addons": "^3.2.0",
|
||||
"babel-runtime": "^6.23.0",
|
||||
"global": "^4.3.2",
|
||||
"marksy": "^2.0.0",
|
||||
|
||||
@ -1,14 +1,8 @@
|
||||
import React from 'react';
|
||||
import deprecate from 'util-deprecate';
|
||||
import _Story from './components/Story';
|
||||
import Story from './components/Story';
|
||||
import { H1, H2, H3, H4, H5, H6, Code, P, UL, A, LI } from './components/markdown';
|
||||
|
||||
function addonCompose(addonFn) {
|
||||
return storyFn => context => addonFn(storyFn, context);
|
||||
}
|
||||
|
||||
export const Story = _Story;
|
||||
|
||||
const defaultOptions = {
|
||||
inline: false,
|
||||
header: true,
|
||||
@ -34,20 +28,10 @@ const defaultMarksyConf = {
|
||||
ul: UL,
|
||||
};
|
||||
|
||||
export function addInfo(storyFn, context, info, _options) {
|
||||
if (typeof storyFn !== 'function') {
|
||||
if (typeof info === 'function') {
|
||||
_options = storyFn; // eslint-disable-line
|
||||
storyFn = info; // eslint-disable-line
|
||||
info = ''; // eslint-disable-line
|
||||
} else {
|
||||
throw new Error('No story defining function has been specified');
|
||||
}
|
||||
}
|
||||
|
||||
function addInfo(storyFn, context, infoOptions) {
|
||||
const options = {
|
||||
...defaultOptions,
|
||||
..._options,
|
||||
...infoOptions,
|
||||
};
|
||||
|
||||
// props.propTables can only be either an array of components or null
|
||||
@ -62,7 +46,7 @@ export function addInfo(storyFn, context, info, _options) {
|
||||
Object.assign(marksyConf, options.marksyConf);
|
||||
}
|
||||
const props = {
|
||||
info,
|
||||
info: options.text,
|
||||
context,
|
||||
showInline: Boolean(options.inline),
|
||||
showHeader: Boolean(options.header),
|
||||
@ -83,12 +67,25 @@ export function addInfo(storyFn, context, info, _options) {
|
||||
);
|
||||
}
|
||||
|
||||
export const withInfo = (info, _options) =>
|
||||
addonCompose((storyFn, context) => addInfo(storyFn, context, info, _options));
|
||||
export const withInfo = textOrOptions => {
|
||||
const options = typeof textOrOptions === 'string' ? { text: textOrOptions } : textOrOptions;
|
||||
return storyFn => context => addInfo(storyFn, context, options);
|
||||
};
|
||||
|
||||
export { Story };
|
||||
|
||||
export default {
|
||||
addWithInfo: deprecate(function addWithInfo(storyName, info, storyFn, _options) {
|
||||
return this.add(storyName, withInfo(info, _options)(storyFn));
|
||||
addWithInfo: deprecate(function addWithInfo(storyName, text, storyFn, options) {
|
||||
if (typeof storyFn !== 'function') {
|
||||
if (typeof text === 'function') {
|
||||
options = storyFn; // eslint-disable-line
|
||||
storyFn = text; // eslint-disable-line
|
||||
text = ''; // eslint-disable-line
|
||||
} else {
|
||||
throw new Error('No story defining function has been specified');
|
||||
}
|
||||
}
|
||||
return this.add(storyName, withInfo({ text, ...options })(storyFn));
|
||||
}, '@storybook/addon-info .addWithInfo() addon is deprecated, use withInfo() from the same package instead. \nSee https://github.com/storybooks/storybook/tree/master/addons/info'),
|
||||
};
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import AddonInfo, { withInfo, setDefaults, addInfo } from './';
|
||||
import AddonInfo, { withInfo, setDefaults } from './';
|
||||
|
||||
/* eslint-disable */
|
||||
const TestComponent = ({ func, obj, array, number, string, bool, empty }) =>
|
||||
@ -48,9 +48,14 @@ describe('addon Info', () => {
|
||||
)(story);
|
||||
ReactDOM.render(<Info />, document.createElement('div'));
|
||||
});
|
||||
it('should render with text options', () => {
|
||||
const Info = withInfo({ text: 'some text here' })(story);
|
||||
ReactDOM.render(<Info />, document.createElement('div'));
|
||||
});
|
||||
it('should render with missed info', () => {
|
||||
setDefaults(testOptions);
|
||||
addInfo(null, testContext, story, testOptions);
|
||||
const Info = withInfo()(story);
|
||||
ReactDOM.render(<Info />, document.createElement('div'));
|
||||
});
|
||||
it('should show deprecation warning', () => {
|
||||
const addWithInfo = AddonInfo.addWithInfo.bind(api);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "3.2.0-alpha.10",
|
||||
"version": "3.2.0",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -15,7 +15,7 @@
|
||||
"storybook": "start-storybook -p 9010"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "^3.2.0-alpha.10",
|
||||
"@storybook/addons": "^3.2.0",
|
||||
"babel-runtime": "^6.23.0",
|
||||
"deep-equal": "^1.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "3.2.0-alpha.10",
|
||||
"version": "3.2.0",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -21,7 +21,7 @@
|
||||
"storybook": "start-storybook -p 9001"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "^3.2.0-alpha.10"
|
||||
"@storybook/addons": "^3.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react": "^15.6.1",
|
||||
|
||||
@ -37,5 +37,5 @@ import { withNotes } from '@storybook/addon-notes';
|
||||
import Component from './Component';
|
||||
|
||||
storiesOf('Component', module)
|
||||
.add('with some emoji', withNotes({ notes: 'A very simple component'})(() => <Component></Component>));
|
||||
.add('with some emoji', withNotes('A very simple component')(() => <Component></Component>));
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "3.2.0-alpha.10",
|
||||
"version": "3.2.0",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -19,7 +19,7 @@
|
||||
"storybook": "start-storybook -p 9010"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "^3.2.0-alpha.10",
|
||||
"@storybook/addons": "^3.2.0",
|
||||
"babel-runtime": "^6.23.0",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
|
||||
@ -2,12 +2,13 @@ import deprecate from 'util-deprecate';
|
||||
import addons from '@storybook/addons';
|
||||
import { WithNotes as ReactWithNotes } from './react';
|
||||
|
||||
export const withNotes = ({ notes }) => {
|
||||
export const withNotes = textOrOptions => {
|
||||
const channel = addons.getChannel();
|
||||
const options = typeof textOrOptions === 'string' ? { text: textOrOptions } : textOrOptions;
|
||||
|
||||
return getStory => context => {
|
||||
// send the notes to the channel before the story is rendered
|
||||
channel.emit('storybook/notes/add_notes', notes);
|
||||
channel.emit('storybook/notes/add_notes', options.text);
|
||||
return getStory(context);
|
||||
};
|
||||
};
|
||||
|
||||
@ -35,16 +35,64 @@ Import and use the `setOptions` function in your config.js file.
|
||||
import * as storybook from '@storybook/react';
|
||||
import { setOptions } from '@storybook/addon-options';
|
||||
|
||||
// Option defaults:
|
||||
setOptions({
|
||||
name: 'My Storybook',
|
||||
url: 'https://example.com',
|
||||
/**
|
||||
* name to display in the top left corner
|
||||
* @type {String}
|
||||
*/
|
||||
name: 'Storybook',
|
||||
/**
|
||||
* URL for name in top left corner to link to
|
||||
* @type {String}
|
||||
*/
|
||||
url: '#',
|
||||
/**
|
||||
* show story component as full screen
|
||||
* @type {Boolean}
|
||||
*/
|
||||
goFullScreen: false,
|
||||
showLeftPanel: false,
|
||||
showDownPanel: false,
|
||||
/**
|
||||
* display left panel that shows a list of stories
|
||||
* @type {Boolean}
|
||||
*/
|
||||
showLeftPanel: true,
|
||||
/**
|
||||
* display horizontal panel that displays addon configurations
|
||||
* @type {Boolean}
|
||||
*/
|
||||
showDownPanel: true,
|
||||
/**
|
||||
* display floating search box to search through stories
|
||||
* @type {Boolean}
|
||||
*/
|
||||
showSearchBox: false,
|
||||
/**
|
||||
* show horizontal addons panel as a vertical panel on the right
|
||||
* @type {Boolean}
|
||||
*/
|
||||
downPanelInRight: false,
|
||||
/**
|
||||
* sorts stories
|
||||
* @type {Boolean}
|
||||
*/
|
||||
sortStoriesByKind: false,
|
||||
hierarchySeparator: /\//,
|
||||
/**
|
||||
* regex for finding the hierarchy separator
|
||||
* @example:
|
||||
* null - turn off hierarchy
|
||||
* /\// - split by `/`
|
||||
* /\./ - split by `.`
|
||||
* /\/|\./ - split by `/` or `.`
|
||||
* @type {Regex}
|
||||
*/
|
||||
hierarchySeparator: null,
|
||||
|
||||
/**
|
||||
* sidebar tree animations
|
||||
* @type {Boolean}
|
||||
*/
|
||||
sidebarAnimations: true,
|
||||
});
|
||||
|
||||
storybook.configure(() => require('./stories'), module);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "3.2.0-alpha.10",
|
||||
"version": "3.2.3",
|
||||
"description": "Options addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -20,7 +20,7 @@
|
||||
"storybook": "start-storybook -p 9001"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "^3.2.0-alpha.10"
|
||||
"@storybook/addons": "^3.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react": "^15.6.1",
|
||||
|
||||
@ -7,14 +7,32 @@ export function init() {
|
||||
// NOTE nothing to do here
|
||||
}
|
||||
|
||||
function regExpStringify(exp) {
|
||||
if (typeof exp === 'string') return exp;
|
||||
if (Object.prototype.toString.call(exp) === '[object RegExp]') return exp.source;
|
||||
return null;
|
||||
}
|
||||
|
||||
// setOptions function will send Storybook UI options when the channel is
|
||||
// ready. If called before, options will be cached until it can be sent.
|
||||
export function setOptions(options) {
|
||||
export function setOptions(newOptions) {
|
||||
const channel = addons.getChannel();
|
||||
if (!channel) {
|
||||
throw new Error(
|
||||
'Failed to find addon channel. This may be due to https://github.com/storybooks/storybook/issues/1192.'
|
||||
);
|
||||
}
|
||||
|
||||
let options = newOptions;
|
||||
|
||||
// since 'undefined' and 'null' are the valid values we don't want to
|
||||
// override the hierarchySeparator if the prop is missing
|
||||
if (Object.prototype.hasOwnProperty.call(newOptions, 'hierarchySeparator')) {
|
||||
options = {
|
||||
...newOptions,
|
||||
hierarchySeparator: regExpStringify(newOptions.hierarchySeparator),
|
||||
};
|
||||
}
|
||||
|
||||
channel.emit(EVENT_ID, { options });
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "3.2.0-alpha.11",
|
||||
"version": "3.2.3",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -20,9 +20,9 @@
|
||||
"read-pkg-up": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addons": "^3.2.0-alpha.10",
|
||||
"@storybook/channels": "^3.2.0-alpha.10",
|
||||
"@storybook/react": "^3.2.0-alpha.11",
|
||||
"@storybook/addons": "^3.2.0",
|
||||
"@storybook/channels": "^3.2.0",
|
||||
"@storybook/react": "^3.2.3",
|
||||
"babel-cli": "^6.24.1",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
@ -31,9 +31,9 @@
|
||||
"react-dom": "^15.6.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addons": "^3.2.0-alpha.10",
|
||||
"@storybook/channels": "^3.2.0-alpha.10",
|
||||
"@storybook/react": "^3.2.0-alpha.11",
|
||||
"@storybook/addons": "^3.2.0",
|
||||
"@storybook/channels": "^3.2.0",
|
||||
"@storybook/react": "^3.2.3",
|
||||
"babel-core": "^6.25.0",
|
||||
"react": "*",
|
||||
"react-test-renderer": "*"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-native",
|
||||
"version": "3.2.0-alpha.11",
|
||||
"version": "3.2.3",
|
||||
"description": "A better way to develop React Native Components for your app",
|
||||
"keywords": [
|
||||
"react",
|
||||
@ -24,11 +24,11 @@
|
||||
"prepublish": "node ../../scripts/prepublish.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "^3.2.0-alpha.10",
|
||||
"@storybook/addon-links": "^3.2.0-alpha.10",
|
||||
"@storybook/addons": "^3.2.0-alpha.10",
|
||||
"@storybook/channel-websocket": "^3.2.0-alpha.10",
|
||||
"@storybook/ui": "^3.2.0-alpha.11",
|
||||
"@storybook/addon-actions": "^3.2.0",
|
||||
"@storybook/addon-links": "^3.2.0",
|
||||
"@storybook/addons": "^3.2.0",
|
||||
"@storybook/channel-websocket": "^3.2.0",
|
||||
"@storybook/ui": "^3.2.3",
|
||||
"autoprefixer": "^7.1.1",
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-loader": "^7.0.0",
|
||||
@ -56,9 +56,11 @@
|
||||
"json-loader": "^0.5.4",
|
||||
"json5": "^0.5.1",
|
||||
"postcss-loader": "^2.0.5",
|
||||
"react-native-compat": "0.0.2",
|
||||
"shelljs": "^0.7.8",
|
||||
"style-loader": "^0.17.0",
|
||||
"url-loader": "^0.5.8",
|
||||
"url-parse": "^1.1.9",
|
||||
"util-deprecate": "^1.0.2",
|
||||
"uuid": "^3.1.0",
|
||||
"webpack": "^2.5.1 || ^3.0.0",
|
||||
|
||||
@ -72,6 +72,9 @@ For RN apps:
|
||||
|
||||
Once your app is started, changing the selected story in web browser will update the story displayed within your mobile app.
|
||||
|
||||
If you are using Android and you get the following error after running the app: `'websocket: connection error', 'Failed to connect to localhost/127.0.0.1:7007'`, you have to forward the port 7007 on your device/emulator to port 7007 on your local machine with the following command:
|
||||
`adb reverse tcp:7007 tcp:7007`
|
||||
|
||||
## Using Haul-cli
|
||||
|
||||
[Haul](https://github.com/callstack-io/haul) is an alternative to the react-native packager and has several advantages in that it allows you to define your own loaders, and handles symlinks better.
|
||||
|
||||
@ -1,24 +1,147 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import { View } from 'react-native';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import {
|
||||
Animated,
|
||||
Easing,
|
||||
View,
|
||||
TouchableWithoutFeedback,
|
||||
Image,
|
||||
Text,
|
||||
StatusBar,
|
||||
} from 'react-native';
|
||||
import style from './style';
|
||||
import StoryListView from '../StoryListView';
|
||||
import StoryView from '../StoryView';
|
||||
|
||||
export default function OnDeviceUI(props) {
|
||||
const { stories, events, url } = props;
|
||||
export default class OnDeviceUI extends Component {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
|
||||
return (
|
||||
<View style={style.main}>
|
||||
<View style={style.leftPanel}>
|
||||
<StoryListView stories={stories} events={events} />
|
||||
</View>
|
||||
<View style={style.rightPanel}>
|
||||
<View style={style.preview}>
|
||||
<StoryView url={url} events={events} />
|
||||
this.state = {
|
||||
menuAnimation: new Animated.Value(0),
|
||||
isMenuOpen: false,
|
||||
selectedKind: null,
|
||||
selectedStory: null,
|
||||
menuWidth: 0,
|
||||
};
|
||||
|
||||
this.storyChangedHandler = this.handleStoryChanged.bind(this);
|
||||
this.menuToggledHandler = this.handleToggleMenu.bind(this);
|
||||
this.menuLayoutHandler = this.handleMenuLayout.bind(this);
|
||||
|
||||
this.props.events.on('story', this.storyChangedHandler);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.props.events.removeListener('story', this.storyChangedHandler);
|
||||
}
|
||||
|
||||
handleStoryChanged(storyFn, selection) {
|
||||
const { kind, story } = selection;
|
||||
this.setState({
|
||||
selectedKind: kind,
|
||||
selectedStory: story,
|
||||
});
|
||||
}
|
||||
|
||||
handleToggleMenu() {
|
||||
const isMenuOpen = !this.state.isMenuOpen;
|
||||
|
||||
Animated.timing(this.state.menuAnimation, {
|
||||
toValue: isMenuOpen ? 1 : 0,
|
||||
duration: 150,
|
||||
easing: Easing.linear,
|
||||
}).start();
|
||||
|
||||
this.setState({
|
||||
isMenuOpen,
|
||||
});
|
||||
}
|
||||
|
||||
handleMenuLayout(e) {
|
||||
this.setState({
|
||||
menuWidth: e.nativeEvent.layout.width,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { stories, events, url } = this.props;
|
||||
const { menuAnimation, selectedKind, selectedStory, menuWidth } = this.state;
|
||||
|
||||
const menuStyles = [
|
||||
style.menuContainer,
|
||||
{
|
||||
transform: [
|
||||
{
|
||||
translateX: menuAnimation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [menuWidth * -1, 0],
|
||||
}),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const menuSpacerStyles = [
|
||||
{
|
||||
width: menuAnimation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [0, menuWidth],
|
||||
}),
|
||||
},
|
||||
];
|
||||
|
||||
const headerStyles = [
|
||||
style.headerContainer,
|
||||
{
|
||||
opacity: menuAnimation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [1, 0],
|
||||
}),
|
||||
},
|
||||
];
|
||||
|
||||
/* eslint-disable global-require */
|
||||
const openMenuImage = require('./menu_open.png');
|
||||
const closeMenuImage = require('./menu_close.png');
|
||||
/* eslint-enable global-require */
|
||||
|
||||
return (
|
||||
<View style={style.main}>
|
||||
<StatusBar hidden />
|
||||
<Animated.View style={menuSpacerStyles} />
|
||||
<View style={style.previewContainer}>
|
||||
<Animated.View style={headerStyles}>
|
||||
<TouchableWithoutFeedback onPress={this.menuToggledHandler}>
|
||||
<View>
|
||||
<Image source={openMenuImage} style={style.icon} />
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
<Text style={style.headerText} numberOfLines={1}>
|
||||
{selectedKind} / {selectedStory}
|
||||
</Text>
|
||||
</Animated.View>
|
||||
<View style={style.previewWrapper}>
|
||||
<View style={style.preview}>
|
||||
<StoryView url={url} events={events} />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<Animated.View style={menuStyles} onLayout={this.menuLayoutHandler}>
|
||||
<TouchableWithoutFeedback onPress={this.menuToggledHandler}>
|
||||
<View style={style.closeButton}>
|
||||
<Image source={closeMenuImage} style={style.icon} />
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
<StoryListView
|
||||
stories={stories}
|
||||
events={events}
|
||||
selectedKind={selectedKind}
|
||||
selectedStory={selectedStory}
|
||||
/>
|
||||
</Animated.View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
OnDeviceUI.propTypes = {
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 313 B |
BIN
app/react-native/src/preview/components/OnDeviceUI/menu_open.png
Normal file
BIN
app/react-native/src/preview/components/OnDeviceUI/menu_open.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 184 B |
@ -1,26 +1,41 @@
|
||||
import { StyleSheet } from 'react-native';
|
||||
import { StyleSheet } from 'react-native-compat';
|
||||
|
||||
export default {
|
||||
main: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
paddingTop: 20,
|
||||
backgroundColor: 'rgba(247, 247, 247, 1)',
|
||||
backgroundColor: 'rgba(255, 255, 255, 1)',
|
||||
},
|
||||
leftPanel: {
|
||||
flex: 1,
|
||||
maxWidth: 250,
|
||||
icon: {
|
||||
width: 20,
|
||||
height: 20,
|
||||
opacity: 0.5,
|
||||
},
|
||||
headerContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
margin: 5,
|
||||
},
|
||||
headerText: {
|
||||
marginLeft: 5,
|
||||
fontSize: 14,
|
||||
color: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
menuContainer: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
right: null,
|
||||
paddingHorizontal: 8,
|
||||
paddingBottom: 8,
|
||||
backgroundColor: 'rgba(247, 247, 247, 1)',
|
||||
},
|
||||
rightPanel: {
|
||||
previewContainer: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(255, 255, 255, 1)',
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: 'rgba(236, 236, 236, 1)',
|
||||
borderRadius: 4,
|
||||
marginBottom: 8,
|
||||
marginHorizontal: 8,
|
||||
},
|
||||
previewWrapper: {
|
||||
flex: 1,
|
||||
},
|
||||
closeButton: {
|
||||
marginVertical: 5,
|
||||
},
|
||||
preview: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { SectionList, View, Text, TouchableOpacity } from 'react-native';
|
||||
import { ListView, View, Text, TouchableOpacity } from 'react-native';
|
||||
import { MinMaxView } from 'react-native-compat';
|
||||
import style from './style';
|
||||
|
||||
const SectionHeader = ({ title, selected }) =>
|
||||
@ -30,18 +31,20 @@ ListItem.propTypes = {
|
||||
export default class StoryListView extends Component {
|
||||
constructor(props, ...args) {
|
||||
super(props, ...args);
|
||||
|
||||
const ds = new ListView.DataSource({
|
||||
rowHasChanged: (r1, r2) => r1 !== r2,
|
||||
sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
|
||||
});
|
||||
|
||||
this.state = {
|
||||
sections: [],
|
||||
selectedKind: null,
|
||||
selectedStory: null,
|
||||
dataSource: ds.cloneWithRowsAndSections({}),
|
||||
};
|
||||
|
||||
this.storyAddedHandler = this.handleStoryAdded.bind(this);
|
||||
this.storyChangedHandler = this.handleStoryChanged.bind(this);
|
||||
this.changeStoryHandler = this.changeStory.bind(this);
|
||||
|
||||
this.props.stories.on('storyAdded', this.storyAddedHandler);
|
||||
this.props.events.on('story', this.storyChangedHandler);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
@ -54,59 +57,56 @@ export default class StoryListView extends Component {
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.props.stories.removeListener('storyAdded', this.storiesHandler);
|
||||
this.props.events.removeListener('story', this.storyChangedHandler);
|
||||
this.props.stories.removeListener('storyAdded', this.storyAddedHandler);
|
||||
}
|
||||
|
||||
handleStoryAdded() {
|
||||
if (this.props.stories) {
|
||||
const data = this.props.stories.dumpStoryBook();
|
||||
this.setState({
|
||||
sections: data.map(section => ({
|
||||
key: section.kind,
|
||||
title: section.kind,
|
||||
data: section.stories.map(story => ({
|
||||
|
||||
const sections = data.reduce(
|
||||
(map, section) => ({
|
||||
...map,
|
||||
[section.kind]: section.stories.map(story => ({
|
||||
key: story,
|
||||
kind: section.kind,
|
||||
name: story,
|
||||
kind: section.kind,
|
||||
})),
|
||||
})),
|
||||
}),
|
||||
{}
|
||||
);
|
||||
this.setState({
|
||||
dataSource: this.state.dataSource.cloneWithRowsAndSections(sections),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleStoryChanged(storyFn, selection) {
|
||||
const { kind, story } = selection;
|
||||
this.setState({
|
||||
selectedKind: kind,
|
||||
selectedStory: story,
|
||||
});
|
||||
}
|
||||
|
||||
changeStory(kind, story) {
|
||||
this.props.events.emit('setCurrentStory', { kind, story });
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SectionList
|
||||
style={style.list}
|
||||
renderItem={({ item }) =>
|
||||
<ListItem
|
||||
title={item.name}
|
||||
selected={
|
||||
item.kind === this.state.selectedKind && item.name === this.state.selectedStory
|
||||
}
|
||||
onPress={() => this.changeStory(item.kind, item.name)}
|
||||
/>}
|
||||
renderSectionHeader={({ section }) =>
|
||||
<SectionHeader
|
||||
title={section.title}
|
||||
selected={section.title === this.state.selectedKind}
|
||||
/>}
|
||||
sections={this.state.sections}
|
||||
stickySectionHeadersEnabled={false}
|
||||
/>
|
||||
<MinMaxView maxWidth={250}>
|
||||
<ListView
|
||||
style={style.list}
|
||||
renderRow={item =>
|
||||
<ListItem
|
||||
title={item.name}
|
||||
selected={
|
||||
item.kind === this.props.selectedKind && item.name === this.props.selectedStory
|
||||
}
|
||||
onPress={() => this.changeStory(item.kind, item.name)}
|
||||
/>}
|
||||
renderSectionHeader={(sectionData, sectionName) =>
|
||||
<SectionHeader
|
||||
title={sectionName}
|
||||
selected={sectionName === this.props.selectedKind}
|
||||
/>}
|
||||
dataSource={this.state.dataSource}
|
||||
stickySectionHeadersEnabled={false}
|
||||
/>
|
||||
</MinMaxView>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -123,4 +123,11 @@ StoryListView.propTypes = {
|
||||
emit: PropTypes.func.isRequired,
|
||||
removeListener: PropTypes.func.isRequired,
|
||||
}).isRequired,
|
||||
selectedKind: PropTypes.string,
|
||||
selectedStory: PropTypes.string,
|
||||
};
|
||||
|
||||
StoryListView.defaultProps = {
|
||||
selectedKind: null,
|
||||
selectedStory: null,
|
||||
};
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
export default {
|
||||
list: {
|
||||
flex: 1,
|
||||
maxWidth: 250,
|
||||
},
|
||||
header: {
|
||||
paddingTop: 24,
|
||||
paddingTop: 4,
|
||||
paddingBottom: 4,
|
||||
},
|
||||
headerText: {
|
||||
|
||||
5
app/react-native/src/preview/index.js
vendored
5
app/react-native/src/preview/index.js
vendored
@ -1,6 +1,8 @@
|
||||
/* eslint no-underscore-dangle: 0 */
|
||||
|
||||
import React from 'react';
|
||||
import { NativeModules } from 'react-native';
|
||||
import parse from 'url-parse';
|
||||
import addons from '@storybook/addons';
|
||||
import createChannel from '@storybook/channel-websocket';
|
||||
import { EventEmitter } from 'events';
|
||||
@ -63,8 +65,7 @@ export default class Preview {
|
||||
}
|
||||
|
||||
if (params.resetStorybook || !channel) {
|
||||
const host = params.host || 'localhost';
|
||||
|
||||
const host = params.host || parse(NativeModules.SourceCode.scriptURL).hostname;
|
||||
const port = params.port !== false ? `:${params.port || 7007}` : '';
|
||||
|
||||
const query = params.query || '';
|
||||
|
||||
@ -36,11 +36,6 @@ export default function(publicPath, options) {
|
||||
.btn:hover{
|
||||
background-color: #eee
|
||||
}
|
||||
|
||||
/* Remove blue outline defined by the user argent*/
|
||||
:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="margin: 0;">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "3.2.0-alpha.11",
|
||||
"version": "3.2.3",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/apps/react",
|
||||
"bugs": {
|
||||
@ -22,11 +22,11 @@
|
||||
"prepublish": "node ../../scripts/prepublish.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "^3.2.0-alpha.10",
|
||||
"@storybook/addon-links": "^3.2.0-alpha.10",
|
||||
"@storybook/addons": "^3.2.0-alpha.10",
|
||||
"@storybook/channel-postmessage": "^3.2.0-alpha.10",
|
||||
"@storybook/ui": "^3.2.0-alpha.11",
|
||||
"@storybook/addon-actions": "^3.2.0",
|
||||
"@storybook/addon-links": "^3.2.0",
|
||||
"@storybook/addons": "^3.2.0",
|
||||
"@storybook/channel-postmessage": "^3.2.0",
|
||||
"@storybook/ui": "^3.2.3",
|
||||
"airbnb-js-shims": "^1.1.1",
|
||||
"autoprefixer": "^7.1.1",
|
||||
"babel-core": "^6.25.0",
|
||||
|
||||
@ -67,11 +67,6 @@ export default function({ assets, publicPath, headHtml }) {
|
||||
.btn:hover{
|
||||
background-color: #eee
|
||||
}
|
||||
|
||||
/* Remove blue outline defined by the user argent*/
|
||||
:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
</style>
|
||||
${headHtml}
|
||||
</head>
|
||||
|
||||
@ -10,10 +10,10 @@
|
||||
|
||||
* * *
|
||||
|
||||
Storybook for Vue is a UI development environment for your React components.
|
||||
Storybook for Vue is a UI development environment for your Vue components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
@ -33,8 +33,6 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.
|
||||
|
||||
|
||||
## Vue Notes
|
||||
|
||||
- When using global custom components or extension (e.g `Vue.use`). You will need to declare those in the `./storybook/config.js`.
|
||||
|
||||
- When using global custom components or extension (e.g `Vue.use`). You will need to declare those in the `./storybook/config.js`.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "3.2.0-alpha.11",
|
||||
"version": "3.2.3",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/apps/vue",
|
||||
"bugs": {
|
||||
@ -22,11 +22,11 @@
|
||||
"prepublish": "node ../../scripts/prepublish.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "^3.2.0-alpha.10",
|
||||
"@storybook/addon-links": "^3.2.0-alpha.10",
|
||||
"@storybook/addons": "^3.2.0-alpha.10",
|
||||
"@storybook/channel-postmessage": "^3.2.0-alpha.10",
|
||||
"@storybook/ui": "^3.2.0-alpha.11",
|
||||
"@storybook/addon-actions": "^3.2.0",
|
||||
"@storybook/addon-links": "^3.2.0",
|
||||
"@storybook/addons": "^3.2.0",
|
||||
"@storybook/channel-postmessage": "^3.2.0",
|
||||
"@storybook/ui": "^3.2.3",
|
||||
"airbnb-js-shims": "^1.1.1",
|
||||
"autoprefixer": "^7.1.1",
|
||||
"babel-core": "^6.25.0",
|
||||
|
||||
@ -45,6 +45,11 @@ export default function() {
|
||||
include: includePaths,
|
||||
exclude: excludePaths,
|
||||
},
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: require.resolve('vue-loader'),
|
||||
options: {},
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
|
||||
@ -23,6 +23,11 @@ squarespace:
|
||||
title: Squarespace
|
||||
description: Component design and development at Squarespace
|
||||
site: http://squarespace.com
|
||||
dbsbank:
|
||||
logo: ./logos/dbsbank.svg
|
||||
title: DBS Bank
|
||||
description: DBS Bank consumer products improves performance and maintainability with Storybook!
|
||||
site: https://www.dbs.com
|
||||
coursera:
|
||||
logo: ./logos/coursera.svg
|
||||
title: Coursera
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
---
|
||||
* * *
|
||||
|
||||
id: 'faq'
|
||||
title: 'Frequently Asked Questions'
|
||||
---
|
||||
|
||||
## title: 'Frequently Asked Questions'
|
||||
|
||||
Here are some answers to frequently asked questions. If you have a question, you can ask it by opening an issue on the [Storybook Repository](https://github.com/storybooks/storybook/).
|
||||
|
||||
@ -29,3 +30,27 @@ You can generally reuse webpack rules fairly easily by placing them in a file th
|
||||
A common error is that an addon tries to access the "channel", but the channel is not set. This can happen in a few different cases:
|
||||
1. In storybook/addon development, it can be an NPM version problem. If there are two versions of the addons NPM package, it will cause problems. In this case, make sure there is only a single version of `@storybook/addons` being used by your project.
|
||||
2. In React Native, it's a special case that's documented in [#1192](https://github.com/storybooks/storybook/issues/1192)
|
||||
|
||||
### Can I modify React component state in stories?
|
||||
|
||||
Not directly. If you control the component source, you can do something like this:
|
||||
|
||||
```js
|
||||
import React, { Component} from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
class MyComponent extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.setState({
|
||||
someVar: 'defaultValue',
|
||||
...props.initialState
|
||||
})
|
||||
}
|
||||
// ...
|
||||
}
|
||||
|
||||
storiesOf('MyComponent', module)
|
||||
.add('default', () => <MyComponent />)
|
||||
.add('other', () => <MyComponent initialState={{ someVar: 'otherVal' }});
|
||||
```
|
||||
|
||||
@ -105,34 +105,29 @@ configure(function () {
|
||||
}, module);
|
||||
```
|
||||
|
||||
## Managing stories
|
||||
## Nesting stories
|
||||
|
||||
Storybook has a very simple API to write stories.
|
||||
With that, you can’t display nested stories.
|
||||
|
||||
But you might ask, how do I manage stories If I have many of them?
|
||||
We're currently very much interested in changing our api to support this!
|
||||
|
||||
Until that's implemented, here's how different developers address this issue, right now:
|
||||
|
||||
### Prefix with dots
|
||||
|
||||
For example, you can prefix story names with a dot (`.`):
|
||||
You can organize your stories in a nesting structures using "/" as a separator:
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/react';
|
||||
// file: src/stories/index.js
|
||||
|
||||
storiesOf('core.Button', module);
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import Button from '../components/Button';
|
||||
|
||||
storiesOf('My App/Buttons/Simple', module)
|
||||
.add('with text', () => (
|
||||
<Button onClick={action('clicked')}>Hello Button</Button>
|
||||
));
|
||||
|
||||
storiesOf('My App/Buttons/Emoji', module)
|
||||
.add('with some emoji', () => (
|
||||
<Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
|
||||
));
|
||||
```
|
||||
|
||||
Then you can filter stories to display only the stories you want to see.
|
||||
|
||||
### [Chapters](https://github.com/yangshun/react-storybook-addon-chapters)
|
||||
|
||||
With this addon, you can showcase multiple components (or varying component states) within 1 story.
|
||||
Break your stories down into smaller categories (chapters) and subcategories (sections) for more organizational goodness.
|
||||
|
||||
### Run multiple storybooks
|
||||
## Run multiple storybooks
|
||||
|
||||
You can run multiple storybooks for different kinds of stories (or components). To do that, you can create different NPM scripts to start different stories. See:
|
||||
|
||||
|
||||
5
docs/pages/logos/dbsbank.svg
Normal file
5
docs/pages/logos/dbsbank.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="13.49 12.03 110.47 33.24">
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M19.486 18.034H40.74v21.254H19.486z" clip-rule="evenodd"/>
|
||||
<path fill="#C00" d="M43.652 28.658v-.003c0-2.094.086-3.962 1.64-7.26.452-.955 1.442-2.357-.02-3.98-1.183-1.185-2.538-.986-3.446-.467.52-.908.72-2.263-.467-3.448-1.63-1.462-3.03-.47-3.99-.022-3.29 1.56-5.16 1.646-7.26 1.646-2.1 0-3.97-.086-7.26-1.646-.96-.448-2.36-1.44-3.98.022-1.19 1.186-.99 2.54-.47 3.448-.91-.522-2.26-.718-3.45.466-1.46 1.624-.47 3.026-.02 3.98 1.55 3.3 1.63 5.164 1.63 7.264 0 2.1-.09 3.972-1.64 7.264-.45.956-1.45 2.358.02 3.987 1.18 1.18 2.53.98 3.44.46-.52.9-.72 2.26.47 3.44 1.62 1.46 3.02.47 3.98.01 3.29-1.55 5.16-1.64 7.26-1.64 2.1 0 3.97.09 7.26 1.64.96.45 2.36 1.44 3.98-.02 1.18-1.19.98-2.54.46-3.45.91.52 2.26.72 3.45-.47 1.46-1.63.47-3.04.01-3.99-1.55-3.3-1.64-5.17-1.64-7.27zM40.05 38.62l-7.715-6.474s-1.04-1.017-2.223-1.017c-1.178 0-2.225 1.01-2.225 1.01l-7.71 6.47-.03-.03 6.48-7.72s1.015-1.05 1.015-2.23-1.016-2.22-1.016-2.22l-6.48-7.72.03-.03 7.713 6.47s1.04 1.02 2.22 1.02c1.18 0 2.22-1.02 2.22-1.02l7.71-6.478.02.027-6.47 7.72s-1.02 1.04-1.02 2.22c0 1.18 1.02 2.22 1.02 2.22l6.47 7.71-.02.02z"/>
|
||||
<path fill="#000" d="M121.32 14.57l.275-.002.1 5.052-.307-.004c-.498-2.05-2.475-3.995-6.436-4.2-4.686-.244-6.715 2.547-6.736 5.183-.027 3.51 2.707 4.23 6.76 5.22 1.914.46 8.994 1.39 8.428 9.35-.394 5.56-5.19 8.2-11.984 7.99 0 0-2.82-.1-6.766-1.19-.738-.21-.922.04-1.225.58l-.32.01.01-5.45.31.02c.16.55.2 1.57 1.19 2.45.74.64 2.44 2.22 6.19 2.26 3.68.04 6.74-1.52 7.15-5.64.11-1.12-.02-3.66-2.5-4.83-1.95-.91-7.34-1.51-9.96-3.8 0 0-3.1-2.16-2.61-6.2.69-5.7 5.45-7.13 9.72-7.22 0 0 3.83-.03 6.87.76 0 0 .75.2 1.38-.037.24-.083.36-.24.43-.34zM94.597 27.693c6.947 1.724 7.367 6.738 7.266 8.146-.31 6.27-5.64 6.99-7.78 6.99H77.7l.017-.32c1.19-.16 2.082-.82 2.082-2.9l.1-21.62c.02-2.35-.6-3.06-1.9-3.22l-.03-.3h12.4c2.27 0 9.11-.46 9.7 5.84.46 5.03-5.07 7.14-5.48 7.36zm1.824 8.186c.13-6.09-4.34-7.71-8.96-7.96-.09-.01-.05-.24.01-.25 1.51-.06 7.49-.75 7.24-6.46-.24-5.56-4.46-5.68-6-5.7-1.26-.02-1.53-.02-2.06.01-.89.03-1.12.1-1.11 1.07 0 .12-.2 10.01-.31 16.97-.06 3.78-.07 6.7-.07 6.7.02.68-.07 1.39 1.64 1.47 1.76.08 4.04.15 5.62-.18 1.46-.32 3.94-1.37 4.03-5.68zm-32.65-21.4c5.9-.03 13.67 4.02 13.65 14.13-.02 8.79-6.37 14.21-12.24 14.21H50.29l.017-.32c.847-.14 1.776-.67 1.93-1.23.497-2.12.39-21.51.08-24.7-.09-1-.872-1.64-1.84-1.8l-.02-.31H63.78zm2.7 26.51c2.64-.95 5.92-5.46 5.38-12.57-.52-6.88-3.14-12.27-10.12-12.78 0 0-1.32-.1-2.43-.11-1.18-.01-1.44-.05-1.53 1.21-.16 2.37-.2 20.85-.05 23.53.03.36.07 1.24 1.59 1.39 2.78.27 5.08.05 7.17-.7z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@ -11,7 +11,7 @@ setOptions({
|
||||
showSearchBox: false,
|
||||
downPanelInRight: true,
|
||||
sortStoriesByKind: false,
|
||||
hierarchySeparator: '\\/|\\.|¯\\\\_\\(ツ\\)_\\/¯'
|
||||
hierarchySeparator: /\/|\./,
|
||||
});
|
||||
|
||||
setAddon(infoAddon);
|
||||
|
||||
@ -435,7 +435,7 @@ exports[`Storyshots Button with knobs 1`] = `
|
||||
</p>
|
||||
<p>
|
||||
My birthday is:
|
||||
2017-1-20
|
||||
January 20, 2017
|
||||
</p>
|
||||
<p>
|
||||
My wallet contains: $
|
||||
@ -1605,6 +1605,22 @@ exports[`Storyshots Cells/Molecules with text 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Cells/Molecules.Atoms/simple with some emoji 1`] = `
|
||||
<button
|
||||
className="css-1yjiefr"
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Cells/Molecules.Atoms/simple with text 1`] = `
|
||||
<button
|
||||
className="css-1yjiefr"
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Cells/Molecules/Atoms.more with some emoji2 1`] = `
|
||||
<button
|
||||
className="css-1yjiefr"
|
||||
@ -1621,22 +1637,6 @@ exports[`Storyshots Cells/Molecules/Atoms.more with text2 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Cells¯\\_(ツ)_/¯Molecules.Atoms/simple with some emoji 1`] = `
|
||||
<button
|
||||
className="css-1yjiefr"
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Cells¯\\_(ツ)_/¯Molecules.Atoms/simple with text 1`] = `
|
||||
<button
|
||||
className="css-1yjiefr"
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Centered Button with text 1`] = `
|
||||
<div
|
||||
style={
|
||||
|
||||
@ -89,6 +89,7 @@ storiesOf('Button', module)
|
||||
const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}.`;
|
||||
const style = { backgroundColor, ...otherStyles };
|
||||
const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
|
||||
const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
|
||||
|
||||
return (
|
||||
<div style={style}>
|
||||
@ -96,7 +97,7 @@ storiesOf('Button', module)
|
||||
{intro}
|
||||
</p>
|
||||
<p>
|
||||
My birthday is: {new Date(birthday).toLocaleDateString()}
|
||||
My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}
|
||||
</p>
|
||||
<p>
|
||||
My wallet contains: ${dollars.toFixed(2)}
|
||||
@ -136,7 +137,7 @@ storiesOf('Button', module)
|
||||
.add(
|
||||
'addons composition',
|
||||
withInfo('see Notes panel for composition info')(
|
||||
withNotes({ notes: 'Composition: Info(Notes())' })(context =>
|
||||
withNotes('Composition: Info(Notes())')(context =>
|
||||
<div>
|
||||
click the <InfoButton /> label in top right for info about "{context.story}"
|
||||
</div>
|
||||
@ -208,11 +209,11 @@ storiesOf('WithEvents', module)
|
||||
.add('Logger', () => <Logger emiter={emiter} />);
|
||||
|
||||
storiesOf('withNotes', module)
|
||||
.add('with some text', withNotes({ notes: 'Hello guys' })(() => <div>Hello guys</div>))
|
||||
.add('with some emoji', withNotes({ notes: 'My notes on emojies' })(() => <p>🤔😳😯😮</p>))
|
||||
.add('with some text', withNotes('Hello guys')(() => <div>Hello guys</div>))
|
||||
.add('with some emoji', withNotes('My notes on emojies')(() => <p>🤔😳😯😮</p>))
|
||||
.add(
|
||||
'with a button and some emoji',
|
||||
withNotes({ notes: 'My notes on a button with emojies' })(() =>
|
||||
withNotes('My notes on a button with emojies')(() =>
|
||||
<Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
|
||||
)
|
||||
)
|
||||
@ -265,7 +266,7 @@ storiesOf('component.Button', module)
|
||||
|
||||
// Atomic
|
||||
|
||||
storiesOf('Cells¯\\_(ツ)_/¯Molecules.Atoms/simple', module)
|
||||
storiesOf('Cells/Molecules.Atoms/simple', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('with text', () =>
|
||||
<Button>
|
||||
|
||||
8
examples/crna-kitchen-sink/.babelrc
Normal file
8
examples/crna-kitchen-sink/.babelrc
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"presets": ["babel-preset-expo"],
|
||||
"env": {
|
||||
"development": {
|
||||
"plugins": ["transform-react-jsx-source"]
|
||||
}
|
||||
}
|
||||
}
|
||||
63
examples/crna-kitchen-sink/.flowconfig
Normal file
63
examples/crna-kitchen-sink/.flowconfig
Normal file
@ -0,0 +1,63 @@
|
||||
[ignore]
|
||||
; We fork some components by platform
|
||||
.*/*[.]android.js
|
||||
|
||||
; Ignore "BUCK" generated dirs
|
||||
<PROJECT_ROOT>/\.buckd/
|
||||
|
||||
; Ignore unexpected extra "@providesModule"
|
||||
.*/node_modules/.*/node_modules/fbjs/.*
|
||||
|
||||
; Ignore duplicate module providers
|
||||
; For RN Apps installed via npm, "Libraries" folder is inside
|
||||
; "node_modules/react-native" but in the source repo it is in the root
|
||||
.*/Libraries/react-native/React.js
|
||||
.*/Libraries/react-native/ReactNative.js
|
||||
|
||||
; Additional create-react-native-app ignores
|
||||
|
||||
; Ignore duplicate module providers
|
||||
.*/node_modules/fbemitter/lib/*
|
||||
|
||||
; Ignore misbehaving dev-dependencies
|
||||
.*/node_modules/xdl/build/*
|
||||
.*/node_modules/reqwest/tests/*
|
||||
|
||||
; Ignore missing expo-sdk dependencies (temporarily)
|
||||
; https://github.com/expo/expo/issues/162
|
||||
.*/node_modules/expo/src/*
|
||||
|
||||
; Ignore react-native-fbads dependency of the expo sdk
|
||||
.*/node_modules/react-native-fbads/*
|
||||
|
||||
[include]
|
||||
|
||||
[libs]
|
||||
node_modules/react-native/Libraries/react-native/react-native-interface.js
|
||||
node_modules/react-native/flow
|
||||
flow/
|
||||
|
||||
[options]
|
||||
module.system=haste
|
||||
|
||||
emoji=true
|
||||
|
||||
experimental.strict_type_args=true
|
||||
|
||||
munge_underscores=true
|
||||
|
||||
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
|
||||
|
||||
suppress_type=$FlowIssue
|
||||
suppress_type=$FlowFixMe
|
||||
suppress_type=$FixMe
|
||||
|
||||
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-7]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)
|
||||
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-7]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+
|
||||
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
|
||||
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
|
||||
|
||||
unsafe.enable_getters_and_setters=true
|
||||
|
||||
[version]
|
||||
^0.47.0
|
||||
3
examples/crna-kitchen-sink/.gitignore
vendored
Normal file
3
examples/crna-kitchen-sink/.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
node_modules/
|
||||
.expo/
|
||||
npm-debug.*
|
||||
1
examples/crna-kitchen-sink/.watchmanconfig
Normal file
1
examples/crna-kitchen-sink/.watchmanconfig
Normal file
@ -0,0 +1 @@
|
||||
{}
|
||||
29
examples/crna-kitchen-sink/App.js
Normal file
29
examples/crna-kitchen-sink/App.js
Normal file
@ -0,0 +1,29 @@
|
||||
export default from './storybook';
|
||||
|
||||
// NOTE: The code below is what CRNA generates out of the box. We currently
|
||||
// have no clever way of replacing this with Storybook's UI (Vanilla RN does!)
|
||||
// so for now we just replace the code outright. Keeping this here for clarity.
|
||||
//
|
||||
// import React from 'react';
|
||||
// import { StyleSheet, Text, View } from 'react-native';
|
||||
//
|
||||
// export default class App extends React.Component {
|
||||
// render() {
|
||||
// return (
|
||||
// <View style={styles.container}>
|
||||
// <Text>Open up App.js to start working on your app!</Text>
|
||||
// <Text>Changes you make will automatically reload.</Text>
|
||||
// <Text>Shake your phone to open the developer menu.</Text>
|
||||
// </View>
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// const styles = StyleSheet.create({
|
||||
// container: {
|
||||
// flex: 1,
|
||||
// backgroundColor: '#fff',
|
||||
// alignItems: 'center',
|
||||
// justifyContent: 'center',
|
||||
// },
|
||||
// });
|
||||
9
examples/crna-kitchen-sink/App.test.js
Normal file
9
examples/crna-kitchen-sink/App.test.js
Normal file
@ -0,0 +1,9 @@
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
import React from 'react';
|
||||
import App from './App';
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const rendered = renderer.create(<App />).toJSON();
|
||||
expect(rendered).toBeTruthy();
|
||||
});
|
||||
3
examples/crna-kitchen-sink/README.md
Normal file
3
examples/crna-kitchen-sink/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
# CRNA Kitchen Sink
|
||||
|
||||
This project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app) and storybook using [getstorybook](https://www.npmjs.com/package/@storybook/cli).
|
||||
5
examples/crna-kitchen-sink/app.json
Normal file
5
examples/crna-kitchen-sink/app.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"expo": {
|
||||
"sdkVersion": "19.0.0"
|
||||
}
|
||||
}
|
||||
36
examples/crna-kitchen-sink/package.json
Normal file
36
examples/crna-kitchen-sink/package.json
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "crna-kitchen-sink",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "file:../../addons/actions",
|
||||
"@storybook/addon-links": "file:../../addons/links",
|
||||
"@storybook/addon-options": "file:../../addons/options",
|
||||
"@storybook/addon-storyshots": "file:../../addons/storyshots",
|
||||
"@storybook/addons": "file:../../lib/addons",
|
||||
"@storybook/channels": "file:../../lib/channels",
|
||||
"@storybook/channel-postmessage": "file:../../lib/channel-postmessage",
|
||||
"@storybook/react-native": "file:../../app/react-native",
|
||||
"@storybook/ui": "file:../../lib/ui",
|
||||
"react-native-scripts": "1.1.0",
|
||||
"jest-expo": "~19.0.0",
|
||||
"react-test-renderer": "16.0.0-alpha.12"
|
||||
},
|
||||
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
|
||||
"scripts": {
|
||||
"start": "react-native-scripts start",
|
||||
"eject": "react-native-scripts eject",
|
||||
"android": "react-native-scripts android",
|
||||
"ios": "react-native-scripts ios",
|
||||
"test": "node node_modules/jest/bin/jest.js --watch",
|
||||
"storybook": "storybook start -p 7007"
|
||||
},
|
||||
"jest": {
|
||||
"preset": "jest-expo"
|
||||
},
|
||||
"dependencies": {
|
||||
"expo": "^19.0.0",
|
||||
"react": "16.0.0-alpha.12",
|
||||
"react-native": "^0.46.1"
|
||||
}
|
||||
}
|
||||
3
examples/crna-kitchen-sink/storybook/addons.js
Normal file
3
examples/crna-kitchen-sink/storybook/addons.js
Normal file
@ -0,0 +1,3 @@
|
||||
import '@storybook/addon-actions/register';
|
||||
import '@storybook/addon-links/register';
|
||||
import '@storybook/addon-options/register';
|
||||
24
examples/crna-kitchen-sink/storybook/index.js
Normal file
24
examples/crna-kitchen-sink/storybook/index.js
Normal file
@ -0,0 +1,24 @@
|
||||
import { getStorybookUI, configure } from '@storybook/react-native';
|
||||
import { setOptions } from '@storybook/addon-options';
|
||||
|
||||
// import stories
|
||||
configure(() => {
|
||||
// eslint-disable-next-line global-require
|
||||
require('./stories');
|
||||
}, module);
|
||||
|
||||
const StorybookUI = getStorybookUI({
|
||||
port: 7007,
|
||||
onDeviceUI: true,
|
||||
});
|
||||
|
||||
setTimeout(
|
||||
() =>
|
||||
setOptions({
|
||||
name: 'CRNA React Native App',
|
||||
onDeviceUI: true,
|
||||
}),
|
||||
100
|
||||
);
|
||||
|
||||
export default StorybookUI;
|
||||
@ -0,0 +1,22 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
|
||||
|
||||
import React, { PropTypes } from 'react';
|
||||
import { TouchableNativeFeedback } from 'react-native';
|
||||
|
||||
export default function Button(props) {
|
||||
return (
|
||||
<TouchableNativeFeedback onPress={props.onPress}>
|
||||
{props.children}
|
||||
</TouchableNativeFeedback>
|
||||
);
|
||||
}
|
||||
|
||||
Button.defaultProps = {
|
||||
children: null,
|
||||
onPress: () => {},
|
||||
};
|
||||
|
||||
Button.propTypes = {
|
||||
children: PropTypes.node,
|
||||
onPress: PropTypes.func,
|
||||
};
|
||||
@ -0,0 +1,22 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
|
||||
|
||||
import React, { PropTypes } from 'react';
|
||||
import { TouchableHighlight } from 'react-native';
|
||||
|
||||
export default function Button(props) {
|
||||
return (
|
||||
<TouchableHighlight onPress={props.onPress}>
|
||||
{props.children}
|
||||
</TouchableHighlight>
|
||||
);
|
||||
}
|
||||
|
||||
Button.defaultProps = {
|
||||
children: null,
|
||||
onPress: () => {},
|
||||
};
|
||||
|
||||
Button.propTypes = {
|
||||
children: PropTypes.node,
|
||||
onPress: PropTypes.func,
|
||||
};
|
||||
@ -0,0 +1,21 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
|
||||
|
||||
import React, { PropTypes } from 'react';
|
||||
import { View } from 'react-native';
|
||||
import style from './style';
|
||||
|
||||
export default function CenterView(props) {
|
||||
return (
|
||||
<View style={style.main}>
|
||||
{props.children}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
CenterView.defaultProps = {
|
||||
children: null,
|
||||
};
|
||||
|
||||
CenterView.propTypes = {
|
||||
children: PropTypes.node,
|
||||
};
|
||||
@ -0,0 +1,8 @@
|
||||
export default {
|
||||
main: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F5FCFF',
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,54 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
|
||||
|
||||
import React, { PropTypes } from 'react';
|
||||
import { View, Text } from 'react-native';
|
||||
|
||||
export default class Welcome extends React.Component {
|
||||
styles = {
|
||||
wrapper: {
|
||||
flex: 1,
|
||||
padding: 24,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
header: {
|
||||
fontSize: 18,
|
||||
marginBottom: 18,
|
||||
},
|
||||
content: {
|
||||
fontSize: 12,
|
||||
marginBottom: 10,
|
||||
lineHeight: 18,
|
||||
},
|
||||
};
|
||||
|
||||
showApp(event) {
|
||||
event.preventDefault();
|
||||
if (this.props.showApp) this.props.showApp();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={this.styles.wrapper}>
|
||||
<Text style={this.styles.header}>Welcome to React Native Storybook</Text>
|
||||
<Text style={this.styles.content}>
|
||||
This is a UI Component development environment for your React Native app. Here you can
|
||||
display and interact with your UI components as stories. A story is a single state of one
|
||||
or more UI components. You can have as many stories as you want. In other words a story is
|
||||
like a visual test case.
|
||||
</Text>
|
||||
<Text style={this.styles.content}>
|
||||
We have added some stories inside the "storybook/stories" directory for examples. Try
|
||||
editing the "storybook/stories/Welcome.js" file to edit this message.
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Welcome.defaultProps = {
|
||||
showApp: null,
|
||||
};
|
||||
|
||||
Welcome.propTypes = {
|
||||
showApp: PropTypes.func,
|
||||
};
|
||||
29
examples/crna-kitchen-sink/storybook/stories/index.js
Normal file
29
examples/crna-kitchen-sink/storybook/stories/index.js
Normal file
@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import { Text } from 'react-native';
|
||||
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
|
||||
import Button from './Button';
|
||||
import CenterView from './CenterView';
|
||||
import Welcome from './Welcome';
|
||||
|
||||
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
|
||||
|
||||
storiesOf('Button', module)
|
||||
.addDecorator(getStory =>
|
||||
<CenterView>
|
||||
{getStory()}
|
||||
</CenterView>
|
||||
)
|
||||
.add('with text', () =>
|
||||
<Button onPress={action('clicked-text')}>
|
||||
<Text>Hello Button</Text>
|
||||
</Button>
|
||||
)
|
||||
.add('with some emoji', () =>
|
||||
<Button onPress={action('clicked-emoji')}>
|
||||
<Text>😀 😎 👍 💯</Text>
|
||||
</Button>
|
||||
);
|
||||
@ -10,9 +10,7 @@ configure(() => {
|
||||
|
||||
const StorybookUI = getStorybookUI({
|
||||
port: 7007,
|
||||
host: 'localhost',
|
||||
onDeviceUI: true,
|
||||
resetStorybook: true,
|
||||
});
|
||||
|
||||
setTimeout(
|
||||
|
||||
@ -1,2 +1,3 @@
|
||||
import '@storybook/addon-actions/register';
|
||||
import '@storybook/addon-options/register';
|
||||
import '@storybook/addon-links/register';
|
||||
|
||||
@ -1,4 +1,9 @@
|
||||
import { configure } from '@storybook/react';
|
||||
import { setOptions } from '@storybook/addon-options';
|
||||
|
||||
setOptions({
|
||||
sidebarAnimations: false,
|
||||
});
|
||||
|
||||
function loadStories() {
|
||||
require('../src/stories');
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<h1>Welcome to Storybook for Vue</h1>
|
||||
|
||||
@ -137,7 +137,7 @@ storiesOf('Addon Actions', module)
|
||||
storiesOf('Addon Notes', module)
|
||||
.add(
|
||||
'Simple note',
|
||||
withNotes({ notes: 'My notes on some bold text' })(() => ({
|
||||
withNotes({ text: 'My notes on some bold text' })(() => ({
|
||||
template:
|
||||
'<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>',
|
||||
}))
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
"commands": {
|
||||
"bootstrap": {
|
||||
"ignore": [
|
||||
"crna-kitchen-sink",
|
||||
"test-cra",
|
||||
"react-native-vanilla"
|
||||
]
|
||||
@ -10,6 +11,7 @@
|
||||
"publish": {
|
||||
"ignore": [
|
||||
"cra-kitchen-sink",
|
||||
"crna-kitchen-sink",
|
||||
"test-cra",
|
||||
"react-native-vanilla",
|
||||
"vue-example",
|
||||
@ -24,5 +26,5 @@
|
||||
"examples/*"
|
||||
],
|
||||
"concurrency": 1,
|
||||
"version": "3.2.0-alpha.11"
|
||||
"version": "3.2.3"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addons",
|
||||
"version": "3.2.0-alpha.10",
|
||||
"version": "3.2.0",
|
||||
"description": "Storybook addons store",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channel-postmessage",
|
||||
"version": "3.2.0-alpha.10",
|
||||
"version": "3.2.0",
|
||||
"description": "",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -8,7 +8,7 @@
|
||||
"prepublish": "node ../../scripts/prepublish.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/channels": "^3.2.0-alpha.10",
|
||||
"@storybook/channels": "^3.2.0",
|
||||
"global": "^4.3.2",
|
||||
"json-stringify-safe": "^5.0.1"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channel-websocket",
|
||||
"version": "3.2.0-alpha.10",
|
||||
"version": "3.2.0",
|
||||
"description": "",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -8,7 +8,7 @@
|
||||
"prepublish": "node ../../scripts/prepublish.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/channels": "^3.2.0-alpha.10",
|
||||
"@storybook/channels": "^3.2.0",
|
||||
"global": "^4.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channels",
|
||||
"version": "3.2.0-alpha.10",
|
||||
"version": "3.2.0",
|
||||
"description": "",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@ -8,6 +8,8 @@ configure(() => {
|
||||
require('./stories');
|
||||
}, module);
|
||||
|
||||
const StorybookUI = getStorybookUI({ port: 7007, host: 'localhost' });
|
||||
// This assumes that storybook is running on the same host as your RN packager,
|
||||
// to set manually use, e.g. host: 'localhost' option
|
||||
const StorybookUI = getStorybookUI({ port: 7007, onDeviceUI: true });
|
||||
AppRegistry.registerComponent('%APP_NAME%', () => StorybookUI);
|
||||
export default StorybookUI;
|
||||
|
||||
@ -5,5 +5,7 @@ configure(() => {
|
||||
require('./stories');
|
||||
}, module);
|
||||
|
||||
const StorybookUI = getStorybookUI({ port: 7007, host: 'localhost' });
|
||||
// This assumes that storybook is running on the same host as your RN packager,
|
||||
// to set manually use, e.g. host: 'localhost' option
|
||||
const StorybookUI = getStorybookUI({ port: 7007, onDeviceUI: true });
|
||||
export default StorybookUI;
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
<style>
|
||||
.button-styles {
|
||||
border: 1px solid #eee;
|
||||
border-radiuas: 3px;
|
||||
border-radius: 3px;
|
||||
background-color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
font-size: 15pt;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/cli",
|
||||
"version": "3.2.0-alpha.10",
|
||||
"version": "3.2.3",
|
||||
"description": "Storybook's CLI - easiest method of adding storybook to your projects",
|
||||
"keywords": [
|
||||
"cli",
|
||||
@ -24,7 +24,7 @@
|
||||
"postinstall": "opencollective postinstall --collective=storybook"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/codemod": "^3.2.0-alpha.10",
|
||||
"@storybook/codemod": "^3.2.0",
|
||||
"chalk": "^2.0.1",
|
||||
"child-process-promise": "^2.2.1",
|
||||
"commander": "^2.9.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/codemod",
|
||||
"version": "3.2.0-alpha.10",
|
||||
"version": "3.2.0",
|
||||
"description": "A collection of codemod scripts written with JSCodeshift",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import renderStorybookUI from '../../src/index.js';
|
||||
import { document } from 'global';
|
||||
import renderStorybookUI from '../../src/index';
|
||||
import Provider from './provider';
|
||||
|
||||
const rootEl = document.getElementById('root');
|
||||
|
||||
@ -25,6 +25,9 @@ export default class Preview extends React.Component {
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
this.jump = this.jump.bind(this);
|
||||
this.toggleFullscreen = this.toggleFullscreen.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
@ -36,8 +39,7 @@ export default class Preview extends React.Component {
|
||||
}
|
||||
|
||||
jump() {
|
||||
const { kind, story } = this.state;
|
||||
this.globalState.emit('jump', 'Component 2', 'State b');
|
||||
this.globalState.emit('jump', 'some/name/Component 2', 'State b');
|
||||
}
|
||||
|
||||
toggleFullscreen() {
|
||||
@ -52,10 +54,10 @@ export default class Preview extends React.Component {
|
||||
{kind} => {story}
|
||||
<ul>
|
||||
<li>
|
||||
<button onClick={this.jump.bind(this)}>Jump to Component2:State b</button>
|
||||
<button onClick={this.jump}>Jump to some/name/Component2:State b</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onClick={this.toggleFullscreen.bind(this)}>Go FullScreen</button>
|
||||
<button onClick={this.toggleFullscreen}>Go FullScreen</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import { document } from 'global';
|
||||
import React from 'react';
|
||||
import Preview from './preview';
|
||||
import keycode from 'keycode';
|
||||
import { EventEmitter } from 'events';
|
||||
import parseKeyEvent from '../../src/libs/key_events';
|
||||
import { Provider } from '../../src';
|
||||
|
||||
const id = 0;
|
||||
import Preview from './preview';
|
||||
|
||||
const style = {
|
||||
flex: 1,
|
||||
@ -65,7 +64,7 @@ export default class ReactProvider extends Provider {
|
||||
renderPreview(selectedKind, selectedStory) {
|
||||
// We need to do this here to avoid memory leaks in the globalState.
|
||||
// That's because renderPreview can be called multiple times.
|
||||
this._handlePreviewEvents();
|
||||
this.handlePreviewEvents();
|
||||
|
||||
// create preview React component.
|
||||
const preview = new Preview(this.globalState);
|
||||
@ -132,10 +131,10 @@ export default class ReactProvider extends Provider {
|
||||
kind: 'anotherComponent in the middle',
|
||||
stories: ['State a', 'State b'],
|
||||
},
|
||||
]
|
||||
];
|
||||
}
|
||||
|
||||
_handlePreviewEvents() {
|
||||
handlePreviewEvents() {
|
||||
this.globalState.removeAllListeners();
|
||||
|
||||
// jumping to an story.
|
||||
@ -145,7 +144,9 @@ export default class ReactProvider extends Provider {
|
||||
|
||||
// calling a shortcut functionality.
|
||||
this.globalState.on('toggleFullscreen', () => {
|
||||
const target = document.createElement('div');
|
||||
const event = {
|
||||
target,
|
||||
ctrlKey: true,
|
||||
shiftKey: true,
|
||||
keyCode: keycode('F'),
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
"webpack-dev-server": "^2.4.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"global": "^4.3.2",
|
||||
"keycode": "^2.1.8",
|
||||
"react": "^15.6.1",
|
||||
"react-dom": "^15.6.1"
|
||||
|
||||
@ -9,5 +9,5 @@ new WebpackDevServer(webpack(config), {
|
||||
}).listen(
|
||||
9999,
|
||||
'localhost',
|
||||
err => (err ? console.log(err) : console.log('Listening at http://localhost:9999/')),
|
||||
err => (err ? console.log(err) : console.log('Listening at http://localhost:9999/'))
|
||||
);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ui",
|
||||
"version": "3.2.0-alpha.11",
|
||||
"version": "3.2.3",
|
||||
"description": "Core Storybook UI",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -22,6 +22,7 @@
|
||||
"global": "^4.3.2",
|
||||
"json-stringify-safe": "^5.0.1",
|
||||
"keycode": "^2.1.8",
|
||||
"lodash.debounce": "4.0.8",
|
||||
"lodash.pick": "^4.4.0",
|
||||
"lodash.sortby": "^4.7.0",
|
||||
"mantra-core": "^1.7.0",
|
||||
|
||||
@ -8,7 +8,7 @@ export const features = {
|
||||
ESCAPE: 5,
|
||||
NEXT_STORY: 6,
|
||||
PREV_STORY: 7,
|
||||
SEARCH: 8,
|
||||
SHOW_SEARCH: 8,
|
||||
DOWN_PANEL_IN_RIGHT: 9,
|
||||
};
|
||||
|
||||
@ -54,7 +54,7 @@ export default function handle(e) {
|
||||
return features.PREV_STORY;
|
||||
case keycode('P'):
|
||||
e.preventDefault();
|
||||
return features.SEARCH;
|
||||
return features.SHOW_SEARCH;
|
||||
case keycode('J'):
|
||||
e.preventDefault();
|
||||
return features.DOWN_PANEL_IN_RIGHT;
|
||||
|
||||
@ -9,6 +9,7 @@ export default {
|
||||
url: 'https://github.com/storybooks/storybook',
|
||||
sortStoriesByKind: false,
|
||||
hierarchySeparator: '/',
|
||||
sidebarAnimations: true,
|
||||
},
|
||||
},
|
||||
load({ clientStore, provider }, _actions) {
|
||||
|
||||
@ -10,8 +10,8 @@ export function keyEventToOptions(currentOptions, event) {
|
||||
return { showDownPanel: !currentOptions.showDownPanel };
|
||||
case features.LEFT_PANEL:
|
||||
return { showLeftPanel: !currentOptions.showLeftPanel };
|
||||
case features.SEARCH:
|
||||
return { showSearchBox: !currentOptions.showSearchBox };
|
||||
case features.SHOW_SEARCH:
|
||||
return { showSearchBox: true };
|
||||
case features.DOWN_PANEL_IN_RIGHT:
|
||||
return { downPanelInRight: !currentOptions.downPanelInRight };
|
||||
default:
|
||||
|
||||
@ -21,6 +21,8 @@ const storyProps = [
|
||||
'selectedHierarchy',
|
||||
'selectedStory',
|
||||
'onSelectStory',
|
||||
'storyFilter',
|
||||
'sidebarAnimations',
|
||||
];
|
||||
|
||||
const LeftPanel = props =>
|
||||
|
||||
@ -3,11 +3,10 @@ import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import deepEqual from 'deep-equal';
|
||||
import treeNodeTypes from './tree_node_type';
|
||||
import createTreeDecorators from './tree_decorators';
|
||||
import treeDecorators from './tree_decorators';
|
||||
import treeStyle from './tree_style';
|
||||
|
||||
const namespaceSeparator = '@';
|
||||
const keyCodeEnter = 13;
|
||||
|
||||
function createNodeKey({ namespaces, type }) {
|
||||
return [...namespaces, [type]].join(namespaceSeparator);
|
||||
@ -35,28 +34,54 @@ function getSelectedNodes(selectedHierarchy) {
|
||||
.reduce((nodesMap, node) => ({ ...nodesMap, [createNodeKey(node)]: true }), {});
|
||||
}
|
||||
|
||||
function getStoryFilterRegex(storyFilter) {
|
||||
if (!storyFilter) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const validFilter = storyFilter.replace(/[$^*()+[\]{}|\\.?<>'"/;`%]/g, '\\$&');
|
||||
|
||||
if (!validFilter) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return new RegExp(`(${validFilter})`, 'i');
|
||||
}
|
||||
|
||||
class Stories extends React.Component {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
this.onToggle = this.onToggle.bind(this);
|
||||
this.onKeyDown = this.onKeyDown.bind(this);
|
||||
|
||||
const { selectedHierarchy } = this.props;
|
||||
const { selectedHierarchy, storyFilter } = this.props;
|
||||
|
||||
this.state = {
|
||||
storyFilter: getStoryFilterRegex(storyFilter),
|
||||
overriddenFilteredNodes: {},
|
||||
nodes: getSelectedNodes(selectedHierarchy),
|
||||
};
|
||||
this.treeDecorators = createTreeDecorators(this);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const { selectedHierarchy: nextSelectedHierarchy = [] } = nextProps;
|
||||
const { selectedHierarchy: currentSelectedHierarchy = [] } = this.props;
|
||||
const {
|
||||
selectedHierarchy: nextSelectedHierarchy = [],
|
||||
storyFilter: nextStoryFilter,
|
||||
} = nextProps;
|
||||
|
||||
if (!deepEqual(nextSelectedHierarchy, currentSelectedHierarchy)) {
|
||||
const {
|
||||
selectedHierarchy: currentSelectedHierarchy = [],
|
||||
storyFilter: currentStoryFilter,
|
||||
} = this.props;
|
||||
|
||||
const shouldClearFilteredNodes = nextStoryFilter !== currentStoryFilter;
|
||||
const selectedHierarchyChanged = !deepEqual(nextSelectedHierarchy, currentSelectedHierarchy);
|
||||
|
||||
if (selectedHierarchyChanged || shouldClearFilteredNodes) {
|
||||
const selectedNodes = getSelectedNodes(nextSelectedHierarchy);
|
||||
|
||||
this.setState(prevState => ({
|
||||
storyFilter: getStoryFilterRegex(nextStoryFilter),
|
||||
overriddenFilteredNodes: shouldClearFilteredNodes ? {} : prevState.overriddenFilteredNodes,
|
||||
nodes: {
|
||||
...prevState.nodes,
|
||||
...selectedNodes,
|
||||
@ -68,7 +93,7 @@ class Stories extends React.Component {
|
||||
onToggle(node, toggled) {
|
||||
if (node.story) {
|
||||
this.fireOnKindAndStory(node.kind, node.story);
|
||||
} else if (node.kind) {
|
||||
} else if (node.kind && toggled) {
|
||||
this.fireOnKind(node.kind);
|
||||
}
|
||||
|
||||
@ -81,15 +106,13 @@ class Stories extends React.Component {
|
||||
...prevState.nodes,
|
||||
[node.key]: toggled,
|
||||
},
|
||||
overriddenFilteredNodes: {
|
||||
...prevState.overriddenFilteredNodes,
|
||||
[node.key]: !toggled,
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
onKeyDown(event, node) {
|
||||
if (event.keyCode === keyCodeEnter) {
|
||||
this.onToggle(node, !node.toggled);
|
||||
}
|
||||
}
|
||||
|
||||
fireOnKind(kind) {
|
||||
const { onSelectStory } = this.props;
|
||||
if (onSelectStory) onSelectStory(kind, null);
|
||||
@ -101,6 +124,8 @@ class Stories extends React.Component {
|
||||
}
|
||||
|
||||
mapStoriesHierarchy(storiesHierarchy) {
|
||||
const { storyFilter } = this.state;
|
||||
|
||||
const treeModel = {
|
||||
namespaces: storiesHierarchy.namespaces,
|
||||
name: storiesHierarchy.name,
|
||||
@ -125,8 +150,9 @@ class Stories extends React.Component {
|
||||
treeModel.type = treeNodeTypes.COMPONENT;
|
||||
|
||||
treeModel.children = storiesHierarchy.stories.map(story => ({
|
||||
kind: storiesHierarchy.kind,
|
||||
story,
|
||||
storyFilter,
|
||||
kind: storiesHierarchy.kind,
|
||||
name: story,
|
||||
active: selectedStory === story && selectedKind === storiesHierarchy.kind,
|
||||
type: treeNodeTypes.STORY,
|
||||
@ -134,17 +160,29 @@ class Stories extends React.Component {
|
||||
}
|
||||
|
||||
treeModel.key = createNodeKey(treeModel);
|
||||
treeModel.toggled = this.state.nodes[treeModel.key];
|
||||
treeModel.toggled = this.isToggled(treeModel);
|
||||
treeModel.storyFilter = storyFilter;
|
||||
|
||||
return treeModel;
|
||||
}
|
||||
|
||||
isToggled(treeModel) {
|
||||
return this.state.nodes[treeModel.key] || this.isFilteredNode(treeModel.key);
|
||||
}
|
||||
|
||||
isFilteredNode(key) {
|
||||
if (!this.state.storyFilter) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return !this.state.overriddenFilteredNodes[key];
|
||||
}
|
||||
|
||||
render() {
|
||||
const { storiesHierarchy } = this.props;
|
||||
const { storiesHierarchy, sidebarAnimations } = this.props;
|
||||
|
||||
const data = this.mapStoriesHierarchy(storiesHierarchy);
|
||||
data.toggled = true;
|
||||
data.name = 'stories';
|
||||
data.root = true;
|
||||
|
||||
return (
|
||||
@ -152,7 +190,8 @@ class Stories extends React.Component {
|
||||
style={treeStyle}
|
||||
data={data}
|
||||
onToggle={this.onToggle}
|
||||
decorators={this.treeDecorators}
|
||||
animations={sidebarAnimations ? undefined : false}
|
||||
decorators={treeDecorators}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -161,9 +200,12 @@ class Stories extends React.Component {
|
||||
Stories.defaultProps = {
|
||||
onSelectStory: null,
|
||||
storiesHierarchy: null,
|
||||
storyFilter: null,
|
||||
sidebarAnimations: true,
|
||||
};
|
||||
|
||||
Stories.propTypes = {
|
||||
storyFilter: PropTypes.string,
|
||||
storiesHierarchy: PropTypes.shape({
|
||||
namespaces: PropTypes.arrayOf(PropTypes.string),
|
||||
name: PropTypes.string,
|
||||
@ -173,6 +215,7 @@ Stories.propTypes = {
|
||||
selectedKind: PropTypes.string.isRequired,
|
||||
selectedStory: PropTypes.string.isRequired,
|
||||
onSelectStory: PropTypes.func,
|
||||
sidebarAnimations: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default Stories;
|
||||
|
||||
@ -1,15 +1,46 @@
|
||||
import { shallow, mount } from 'enzyme';
|
||||
import React from 'react';
|
||||
import Stories from './index';
|
||||
import { setContext } from '../../../../../compose';
|
||||
import { createHierarchy } from '../../../libs/hierarchy';
|
||||
|
||||
const leftClick = { button: 0 };
|
||||
|
||||
describe('manager.ui.components.left_panel.stories', () => {
|
||||
beforeEach(() =>
|
||||
setContext({
|
||||
clientStore: {
|
||||
getAll() {
|
||||
return { shortcutOptions: {} };
|
||||
},
|
||||
subscribe() {},
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
afterEach(() => setContext(null));
|
||||
|
||||
const data = createHierarchy([
|
||||
{ kind: 'a', stories: ['a1', 'a2'] },
|
||||
{ kind: 'b', stories: ['b1', 'b2'] },
|
||||
]);
|
||||
const dataWithoutSeparator = createHierarchy([
|
||||
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
|
||||
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
|
||||
]);
|
||||
const dataWithSeparator = createHierarchy(
|
||||
[
|
||||
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
|
||||
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
|
||||
],
|
||||
'\\.'
|
||||
);
|
||||
|
||||
describe('render', () => {
|
||||
test('should render stories - empty', () => {
|
||||
const data = createHierarchy([]);
|
||||
const wrap = shallow(
|
||||
<Stories
|
||||
storiesHierarchy={data}
|
||||
storiesHierarchy={createHierarchy([])}
|
||||
selectedKind={''}
|
||||
selectedStory={''}
|
||||
selectedHierarchy={[]}
|
||||
@ -22,36 +53,25 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
});
|
||||
|
||||
test('should render stories', () => {
|
||||
const data = createHierarchy([
|
||||
{ kind: 'a', stories: ['a1', 'a2'] },
|
||||
{ kind: '20', stories: ['b1', 'b2'] },
|
||||
]);
|
||||
const wrap = shallow(
|
||||
<Stories
|
||||
storiesHierarchy={data}
|
||||
selectedKind="20"
|
||||
selectedKind="b"
|
||||
selectedStory="b2"
|
||||
selectedHierarchy={['20']}
|
||||
selectedHierarchy={['b']}
|
||||
/>
|
||||
);
|
||||
|
||||
const output = wrap.html();
|
||||
|
||||
expect(output).toMatch(/20/);
|
||||
expect(output).toMatch(/b/);
|
||||
expect(output).toMatch(/b2/);
|
||||
});
|
||||
|
||||
test('should render stories with hierarchy - hierarchySeparator is defined', () => {
|
||||
const data = createHierarchy(
|
||||
[
|
||||
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
|
||||
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
|
||||
],
|
||||
'\\.'
|
||||
);
|
||||
const wrap = shallow(
|
||||
<Stories
|
||||
storiesHierarchy={data}
|
||||
storiesHierarchy={dataWithSeparator}
|
||||
selectedKind="another.space.20"
|
||||
selectedStory="b2"
|
||||
selectedHierarchy={['another', 'space', '20']}
|
||||
@ -61,7 +81,7 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
const output = wrap.html();
|
||||
|
||||
expect(output).toMatch(/some/);
|
||||
expect(output).not.toMatch(/name/);
|
||||
expect(output).not.toMatch(/>name</);
|
||||
expect(output).not.toMatch(/item1/);
|
||||
expect(output).not.toMatch(/a1/);
|
||||
expect(output).not.toMatch(/a2/);
|
||||
@ -73,13 +93,9 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
});
|
||||
|
||||
test('should render stories without hierarchy - hierarchySeparator is not defined', () => {
|
||||
const data = createHierarchy([
|
||||
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
|
||||
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
|
||||
]);
|
||||
const wrap = shallow(
|
||||
<Stories
|
||||
storiesHierarchy={data}
|
||||
storiesHierarchy={dataWithoutSeparator}
|
||||
selectedKind="another.space.20"
|
||||
selectedStory="b2"
|
||||
selectedHierarchy={['another.space.20']}
|
||||
@ -97,16 +113,9 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
});
|
||||
|
||||
test('should render stories with initially selected nodes according to the selectedHierarchy', () => {
|
||||
const data = createHierarchy(
|
||||
[
|
||||
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
|
||||
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
|
||||
],
|
||||
'\\.'
|
||||
);
|
||||
const wrap = shallow(
|
||||
<Stories
|
||||
storiesHierarchy={data}
|
||||
storiesHierarchy={dataWithSeparator}
|
||||
selectedKind="another.space.20"
|
||||
selectedStory="b2"
|
||||
selectedHierarchy={['another', 'space', '20']}
|
||||
@ -123,24 +132,17 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
});
|
||||
|
||||
test('should contain state with all selected nodes after clicking on the nodes', () => {
|
||||
const data = createHierarchy(
|
||||
[
|
||||
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
|
||||
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
|
||||
],
|
||||
'\\.'
|
||||
);
|
||||
const wrap = mount(
|
||||
<Stories
|
||||
storiesHierarchy={data}
|
||||
storiesHierarchy={dataWithSeparator}
|
||||
selectedKind="another.space.20"
|
||||
selectedStory="b2"
|
||||
selectedHierarchy={['another', 'space', '20']}
|
||||
/>
|
||||
);
|
||||
|
||||
const kind = wrap.find('a').filterWhere(el => el.text() === 'some').last();
|
||||
kind.simulate('click');
|
||||
const kind = wrap.find('[data-name="some"]');
|
||||
kind.simulate('click', leftClick);
|
||||
|
||||
const { nodes } = wrap.state();
|
||||
|
||||
@ -153,16 +155,9 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
});
|
||||
|
||||
test('should recalculate selected nodes after selectedHierarchy changes', () => {
|
||||
const data = createHierarchy(
|
||||
[
|
||||
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
|
||||
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
|
||||
],
|
||||
'\\.'
|
||||
);
|
||||
const wrap = mount(
|
||||
<Stories
|
||||
storiesHierarchy={data}
|
||||
storiesHierarchy={dataWithSeparator}
|
||||
selectedKind="another.space.20"
|
||||
selectedStory="b2"
|
||||
selectedHierarchy={[]}
|
||||
@ -181,16 +176,9 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
});
|
||||
|
||||
test('should add selected nodes to the state after selectedHierarchy changes with a new value', () => {
|
||||
const data = createHierarchy(
|
||||
[
|
||||
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
|
||||
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
|
||||
],
|
||||
'\\.'
|
||||
);
|
||||
const wrap = mount(
|
||||
<Stories
|
||||
storiesHierarchy={data}
|
||||
storiesHierarchy={dataWithSeparator}
|
||||
selectedKind="another.space.20"
|
||||
selectedStory="b2"
|
||||
selectedHierarchy={['another', 'space', '20']}
|
||||
@ -213,16 +201,9 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
|
||||
test('should not call setState when selectedHierarchy prop changes with the same value', () => {
|
||||
const selectedHierarchy = ['another', 'space', '20'];
|
||||
const data = createHierarchy(
|
||||
[
|
||||
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
|
||||
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
|
||||
],
|
||||
'\\.'
|
||||
);
|
||||
const wrap = mount(
|
||||
<Stories
|
||||
storiesHierarchy={data}
|
||||
storiesHierarchy={dataWithSeparator}
|
||||
selectedKind="another.space.20"
|
||||
selectedStory="b2"
|
||||
selectedHierarchy={selectedHierarchy}
|
||||
@ -236,14 +217,26 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
|
||||
expect(setState).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('should render stories with with highlighting when storiesFilter is provided', () => {
|
||||
const wrap = mount(
|
||||
<Stories
|
||||
storiesHierarchy={dataWithSeparator}
|
||||
selectedKind="another.space.20"
|
||||
selectedStory="b2"
|
||||
selectedHierarchy={['another', 'space', '20']}
|
||||
storyFilter="th"
|
||||
/>
|
||||
);
|
||||
|
||||
const highlightedElements = wrap.find('strong');
|
||||
|
||||
expect(highlightedElements.text()).toBe('th');
|
||||
});
|
||||
});
|
||||
|
||||
describe('events', () => {
|
||||
test('should call the onSelectStory prop when a kind is clicked', () => {
|
||||
const data = createHierarchy([
|
||||
{ kind: 'a', stories: ['a1', 'a2'] },
|
||||
{ kind: 'b', stories: ['b1', 'b2'] },
|
||||
]);
|
||||
test('should call the onSelectStory prop when a collapsed kind is clicked', () => {
|
||||
const onSelectStory = jest.fn();
|
||||
const wrap = mount(
|
||||
<Stories
|
||||
@ -255,17 +248,13 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
/>
|
||||
);
|
||||
|
||||
const kind = wrap.find('a').filterWhere(el => el.text() === 'a').last();
|
||||
kind.simulate('click');
|
||||
const kind = wrap.find('[data-name="a"]');
|
||||
kind.simulate('click', leftClick);
|
||||
|
||||
expect(onSelectStory).toHaveBeenCalledWith('a', null);
|
||||
});
|
||||
|
||||
test('should call the onSelectStory prop when a story is clicked', () => {
|
||||
const data = createHierarchy([
|
||||
{ kind: 'a', stories: ['a1', 'a2'] },
|
||||
{ kind: 'b', stories: ['b1', 'b2'] },
|
||||
]);
|
||||
test("shouldn't call the onSelectStory prop when an expanded kind is clicked", () => {
|
||||
const onSelectStory = jest.fn();
|
||||
const wrap = mount(
|
||||
<Stories
|
||||
@ -277,25 +266,38 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
/>
|
||||
);
|
||||
|
||||
const kind = wrap.find('a').filterWhere(el => el.text() === 'b1').last();
|
||||
const kind = wrap.find('[data-name="a"]').filterWhere(el => el.text() === 'a').last();
|
||||
kind.simulate('click');
|
||||
|
||||
onSelectStory.mockClear();
|
||||
kind.simulate('click');
|
||||
|
||||
expect(onSelectStory).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('should call the onSelectStory prop when a story is clicked', () => {
|
||||
const onSelectStory = jest.fn();
|
||||
const wrap = mount(
|
||||
<Stories
|
||||
storiesHierarchy={data}
|
||||
selectedKind="b"
|
||||
selectedStory="b2"
|
||||
selectedHierarchy={['b']}
|
||||
onSelectStory={onSelectStory}
|
||||
/>
|
||||
);
|
||||
|
||||
const kind = wrap.find('[data-name="b1"]');
|
||||
kind.simulate('click', leftClick);
|
||||
|
||||
expect(onSelectStory).toHaveBeenCalledWith('b', 'b1');
|
||||
});
|
||||
|
||||
test('should call the onSelectStory prop when a story is clicked - hierarchySeparator is defined', () => {
|
||||
const data = createHierarchy(
|
||||
[
|
||||
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
|
||||
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
|
||||
],
|
||||
'\\.'
|
||||
);
|
||||
|
||||
const onSelectStory = jest.fn();
|
||||
const wrap = mount(
|
||||
<Stories
|
||||
storiesHierarchy={data}
|
||||
storiesHierarchy={dataWithSeparator}
|
||||
selectedKind="some.name.item1"
|
||||
selectedStory="a2"
|
||||
selectedHierarchy={['some', 'name', 'item1']}
|
||||
@ -303,30 +305,22 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
/>
|
||||
);
|
||||
|
||||
wrap.find('a').filterWhere(el => el.text() === 'another').last().simulate('click');
|
||||
wrap.find('a').filterWhere(el => el.text() === 'space').last().simulate('click');
|
||||
wrap.find('a').filterWhere(el => el.text() === '20').last().simulate('click');
|
||||
wrap.find('[data-name="another"]').simulate('click', leftClick);
|
||||
wrap.find('[data-name="space"]').simulate('click', leftClick);
|
||||
wrap.find('[data-name="20"]').simulate('click', leftClick);
|
||||
|
||||
expect(onSelectStory).toHaveBeenCalledWith('another.space.20', null);
|
||||
|
||||
wrap.find('a').filterWhere(el => el.text() === 'b2').last().simulate('click');
|
||||
wrap.find('[data-name="b2"]').simulate('click', leftClick);
|
||||
|
||||
expect(onSelectStory).toHaveBeenCalledWith('another.space.20', 'b2');
|
||||
});
|
||||
|
||||
test('should call the onSelectStory prop when a story is selected with enter key', () => {
|
||||
const data = createHierarchy(
|
||||
[
|
||||
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
|
||||
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
|
||||
],
|
||||
'\\.'
|
||||
);
|
||||
|
||||
const onSelectStory = jest.fn();
|
||||
const wrap = mount(
|
||||
<Stories
|
||||
storiesHierarchy={data}
|
||||
storiesHierarchy={dataWithSeparator}
|
||||
selectedKind="some.name.item1"
|
||||
selectedStory="a2"
|
||||
selectedHierarchy={['some', 'name', 'item1']}
|
||||
@ -334,23 +328,12 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
/>
|
||||
);
|
||||
|
||||
wrap
|
||||
.find('a')
|
||||
.filterWhere(el => el.text() === 'another')
|
||||
.last()
|
||||
.simulate('keyDown', { keyCode: 13 });
|
||||
wrap.find('[data-name="another"]').simulate('keyDown', { keyCode: 13 });
|
||||
|
||||
wrap
|
||||
.find('a')
|
||||
.filterWhere(el => el.text() === 'space')
|
||||
.last()
|
||||
.simulate('keyDown', { keyCode: 13 });
|
||||
wrap.find('[data-name="space"]').simulate('keyDown', { keyCode: 13 });
|
||||
|
||||
wrap
|
||||
.find('a')
|
||||
.filterWhere(el => el.text() === '20')
|
||||
.last()
|
||||
.simulate('keyDown', { keyCode: 13 });
|
||||
// enter press on native link triggers click event
|
||||
wrap.find('[data-name="20"]').simulate('click', leftClick);
|
||||
|
||||
expect(onSelectStory).toHaveBeenCalledWith('another.space.20', null);
|
||||
});
|
||||
|
||||
@ -2,6 +2,11 @@ import { decorators } from 'react-treebeard';
|
||||
import { IoChevronRight } from 'react-icons/lib/io';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import RoutedLink from '../../../containers/routed_link';
|
||||
import MenuItem from '../../menu_item';
|
||||
import treeNodeTypes from './tree_node_type';
|
||||
|
||||
function noop() {}
|
||||
|
||||
function ToggleDecorator({ style }) {
|
||||
const { height, width, arrow } = style;
|
||||
@ -24,74 +29,130 @@ ToggleDecorator.propTypes = {
|
||||
};
|
||||
|
||||
function ContainerDecorator(props) {
|
||||
const { node } = props;
|
||||
const { node, style, onClick } = props;
|
||||
const { container, ...restStyles } = style;
|
||||
|
||||
if (node.root) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <decorators.Container {...props} />;
|
||||
let containerStyle = container.reduce((acc, styles) => ({ ...acc, ...styles }), {});
|
||||
const innerContainer = <decorators.Container {...props} style={restStyles} onClick={noop} />;
|
||||
|
||||
if (node.type !== treeNodeTypes.STORY) {
|
||||
return (
|
||||
<MenuItem style={containerStyle} onClick={onClick} data-name={node.name}>
|
||||
{innerContainer}
|
||||
</MenuItem>
|
||||
);
|
||||
}
|
||||
|
||||
const overrideParams = {
|
||||
selectedKind: node.kind,
|
||||
selectedStory: node.story,
|
||||
};
|
||||
|
||||
containerStyle = {
|
||||
...style.nativeLink,
|
||||
...containerStyle,
|
||||
};
|
||||
|
||||
return (
|
||||
<RoutedLink
|
||||
overrideParams={overrideParams}
|
||||
style={containerStyle}
|
||||
onClick={onClick}
|
||||
data-name={node.name}
|
||||
>
|
||||
{innerContainer}
|
||||
</RoutedLink>
|
||||
);
|
||||
}
|
||||
|
||||
ContainerDecorator.propTypes = {
|
||||
style: PropTypes.shape({
|
||||
container: PropTypes.array.isRequired,
|
||||
}).isRequired,
|
||||
node: PropTypes.shape({
|
||||
root: PropTypes.bool,
|
||||
type: PropTypes.oneOf([treeNodeTypes.NAMESPACE, treeNodeTypes.COMPONENT, treeNodeTypes.STORY])
|
||||
.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
kind: PropTypes.string,
|
||||
story: PropTypes.string,
|
||||
}).isRequired,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
function createHeaderDecoratorScope(parent) {
|
||||
class HeaderDecorator extends React.Component {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
this.onKeyDown = this.onKeyDown.bind(this);
|
||||
class HeaderDecorator extends React.Component {
|
||||
decorateNameMatchedToSearchTerm(node, style) {
|
||||
const { storyFilter, name } = node;
|
||||
|
||||
if (!storyFilter) {
|
||||
return name;
|
||||
}
|
||||
|
||||
onKeyDown(event) {
|
||||
const { onKeyDown } = parent;
|
||||
const { node } = this.props;
|
||||
const nameParts = name.split(storyFilter);
|
||||
|
||||
onKeyDown(event, node);
|
||||
}
|
||||
return nameParts.filter(part => part).map((part, index) => {
|
||||
const key = `${part}-${index}`;
|
||||
|
||||
render() {
|
||||
const { style, node } = this.props;
|
||||
|
||||
const newStyleTitle = {
|
||||
...style.title,
|
||||
};
|
||||
|
||||
if (!node.children || !node.children.length) {
|
||||
newStyleTitle.fontSize = '13px';
|
||||
if (!storyFilter.test(part)) {
|
||||
return (
|
||||
<span key={key}>
|
||||
{part}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={style.base} role="menuitem" tabIndex="0" onKeyDown={this.onKeyDown}>
|
||||
<a style={newStyleTitle}>
|
||||
{node.name}
|
||||
</a>
|
||||
</div>
|
||||
<strong key={key} style={style.highLightText}>
|
||||
{part}
|
||||
</strong>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
HeaderDecorator.propTypes = {
|
||||
style: PropTypes.shape({
|
||||
title: PropTypes.object.isRequired,
|
||||
base: PropTypes.object.isRequired,
|
||||
}).isRequired,
|
||||
node: PropTypes.shape({
|
||||
name: PropTypes.string.isRequired,
|
||||
}).isRequired,
|
||||
};
|
||||
render() {
|
||||
const { style, node, ...restProps } = this.props;
|
||||
|
||||
return HeaderDecorator;
|
||||
let newStyle = style;
|
||||
|
||||
if (node.type === treeNodeTypes.STORY) {
|
||||
newStyle = {
|
||||
...style,
|
||||
title: {
|
||||
...style.title,
|
||||
...style.storyTitle,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const name = this.decorateNameMatchedToSearchTerm(node, style);
|
||||
|
||||
const newNode = {
|
||||
...node,
|
||||
name,
|
||||
};
|
||||
|
||||
return <decorators.Header style={newStyle} node={newNode} {...restProps} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default function(parent) {
|
||||
return {
|
||||
...decorators,
|
||||
Header: createHeaderDecoratorScope(parent),
|
||||
Container: ContainerDecorator,
|
||||
Toggle: ToggleDecorator,
|
||||
};
|
||||
}
|
||||
HeaderDecorator.propTypes = {
|
||||
style: PropTypes.shape({
|
||||
title: PropTypes.object.isRequired,
|
||||
base: PropTypes.object.isRequired,
|
||||
}).isRequired,
|
||||
node: PropTypes.shape({
|
||||
type: PropTypes.oneOf([treeNodeTypes.NAMESPACE, treeNodeTypes.COMPONENT, treeNodeTypes.STORY]),
|
||||
storyFilter: PropTypes.instanceOf(RegExp),
|
||||
}).isRequired,
|
||||
};
|
||||
|
||||
export default {
|
||||
...decorators,
|
||||
Header: HeaderDecorator,
|
||||
Container: ContainerDecorator,
|
||||
Toggle: ToggleDecorator,
|
||||
};
|
||||
|
||||
@ -7,7 +7,7 @@ export default {
|
||||
base: {
|
||||
listStyle: 'none',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
padding: '5px',
|
||||
fontFamily: baseFonts.fontFamily,
|
||||
fontSize: '15px',
|
||||
minWidth: '200px',
|
||||
@ -20,12 +20,19 @@ export default {
|
||||
link: {
|
||||
cursor: 'pointer',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
padding: '0px 5px',
|
||||
display: 'block',
|
||||
zIndex: 1,
|
||||
},
|
||||
activeLink: {
|
||||
fontWeight: 'bold',
|
||||
backgroundColor: '#EEE',
|
||||
zIndex: 0,
|
||||
},
|
||||
nativeLink: {
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
},
|
||||
toggle: {
|
||||
base: {
|
||||
@ -67,6 +74,13 @@ export default {
|
||||
lineHeight: '24px',
|
||||
verticalAlign: 'middle',
|
||||
},
|
||||
storyTitle: {
|
||||
fontSize: '13px',
|
||||
},
|
||||
highLightText: {
|
||||
backgroundColor: '#FFFEAA',
|
||||
fontWeight: 'inherit',
|
||||
},
|
||||
},
|
||||
subtree: {
|
||||
paddingLeft: '19px',
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import debounce from 'lodash.debounce';
|
||||
import { baseFonts } from '../theme';
|
||||
|
||||
const mainStyle = {
|
||||
@ -9,6 +10,39 @@ const mainStyle = {
|
||||
position: 'relative',
|
||||
};
|
||||
|
||||
const textWrapStyle = {
|
||||
background: '#F7F7F7',
|
||||
};
|
||||
|
||||
const textStyle = {
|
||||
fontSize: 12,
|
||||
color: '#828282',
|
||||
padding: 5,
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
outline: 'none',
|
||||
border: 0,
|
||||
height: 26,
|
||||
};
|
||||
|
||||
const clearButtonStyle = {
|
||||
position: 'absolute',
|
||||
backgroundColor: 'transparent',
|
||||
color: '#868686',
|
||||
border: 'none',
|
||||
width: 25,
|
||||
height: 26,
|
||||
right: 1,
|
||||
top: 0,
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
lineHeight: '23px',
|
||||
fontSize: 20,
|
||||
};
|
||||
|
||||
const debounceFilterChangeTimeout = 500;
|
||||
|
||||
export default class TextFilter extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -19,54 +53,34 @@ export default class TextFilter extends React.Component {
|
||||
|
||||
this.onChange = this.onChange.bind(this);
|
||||
this.fireOnClear = this.fireOnClear.bind(this);
|
||||
this.setInputRef = this.setInputRef.bind(this);
|
||||
this.changeFilter = debounce(this.changeFilter, debounceFilterChangeTimeout);
|
||||
}
|
||||
|
||||
onChange(event) {
|
||||
const text = event.target.value;
|
||||
this.setState({ query: text });
|
||||
const { onChange } = this.props;
|
||||
if (onChange) onChange(text);
|
||||
this.changeFilter(text);
|
||||
}
|
||||
|
||||
setInputRef(input) {
|
||||
this.inputRef = input;
|
||||
this.inputRef.value = this.props.text || '';
|
||||
}
|
||||
|
||||
fireOnClear() {
|
||||
this.inputRef.value = '';
|
||||
this.setState({ query: '' });
|
||||
|
||||
const { onClear } = this.props;
|
||||
if (onClear) onClear();
|
||||
}
|
||||
|
||||
changeFilter(text) {
|
||||
const { onChange } = this.props;
|
||||
if (onChange) onChange(text);
|
||||
}
|
||||
|
||||
render() {
|
||||
const textWrapStyle = {
|
||||
background: '#F7F7F7',
|
||||
};
|
||||
|
||||
const textStyle = {
|
||||
fontSize: 12,
|
||||
color: '#828282',
|
||||
padding: 5,
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
outline: 'none',
|
||||
border: 0,
|
||||
height: 26,
|
||||
};
|
||||
|
||||
const clearButtonStyle = {
|
||||
position: 'absolute',
|
||||
backgroundColor: 'transparent',
|
||||
color: '#868686',
|
||||
border: 'none',
|
||||
width: 25,
|
||||
height: 26,
|
||||
right: 1,
|
||||
top: 0,
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
lineHeight: '23px',
|
||||
fontSize: 20,
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={mainStyle}>
|
||||
<div style={textWrapStyle}>
|
||||
@ -75,7 +89,7 @@ export default class TextFilter extends React.Component {
|
||||
type="text"
|
||||
placeholder="Filter"
|
||||
name="filter-text"
|
||||
value={this.props.text || ''}
|
||||
ref={this.setInputRef}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import { shallow } from 'enzyme';
|
||||
import { shallow, mount } from 'enzyme';
|
||||
import React from 'react';
|
||||
import TextFilter from './text_filter';
|
||||
|
||||
jest.mock('lodash.debounce', () => jest.fn(fn => fn));
|
||||
|
||||
describe('manager.ui.components.left_panel.test_filter', () => {
|
||||
describe('render', () => {
|
||||
test('should render input without filterText', () => {
|
||||
@ -12,17 +14,17 @@ describe('manager.ui.components.left_panel.test_filter', () => {
|
||||
});
|
||||
|
||||
test('should render input with filterText', () => {
|
||||
const wrap = shallow(<TextFilter text="Filter Text" />);
|
||||
const wrap = mount(<TextFilter text="Filter Text" />);
|
||||
const input = wrap.find('input').first();
|
||||
|
||||
expect(input).toHaveProp('value', 'Filter Text');
|
||||
expect(input.node.value).toBe('Filter Text');
|
||||
});
|
||||
});
|
||||
|
||||
describe('functions', () => {
|
||||
test('should call the onChange prop when input changes', () => {
|
||||
const onChange = jest.fn();
|
||||
const wrap = shallow(<TextFilter onChange={onChange} />);
|
||||
const wrap = mount(<TextFilter onChange={onChange} />);
|
||||
|
||||
const input = wrap.find('input').first();
|
||||
input.value = 'new value';
|
||||
@ -33,7 +35,7 @@ describe('manager.ui.components.left_panel.test_filter', () => {
|
||||
|
||||
test('should call the onClear prop when the button is clicked', () => {
|
||||
const onClear = jest.fn();
|
||||
const wrap = shallow(<TextFilter onClear={onClear} />);
|
||||
const wrap = mount(<TextFilter onClear={onClear} />);
|
||||
wrap.setState({ query: 'hello' });
|
||||
|
||||
const clear = wrap.find('.clear');
|
||||
|
||||
43
lib/ui/src/modules/ui/components/menu_item.js
Normal file
43
lib/ui/src/modules/ui/components/menu_item.js
Normal file
@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const keyCodeEnter = 13;
|
||||
|
||||
export default class MenuItem extends React.Component {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
this.onKeyDown = this.onKeyDown.bind(this);
|
||||
}
|
||||
|
||||
// Prevent focusing on mousedown
|
||||
onMouseDown(event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
onKeyDown(e) {
|
||||
if (e.keyCode === keyCodeEnter) {
|
||||
this.props.onClick(e);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children, ...restProps } = this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
role="menuitem"
|
||||
tabIndex="0"
|
||||
onKeyDown={this.onKeyDown}
|
||||
onMouseDown={this.onMouseDown}
|
||||
{...restProps}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
MenuItem.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
};
|
||||
59
lib/ui/src/modules/ui/components/menu_item.test.js
Normal file
59
lib/ui/src/modules/ui/components/menu_item.test.js
Normal file
@ -0,0 +1,59 @@
|
||||
import { shallow } from 'enzyme';
|
||||
import React from 'react';
|
||||
import MenuItem from './menu_item';
|
||||
|
||||
const keyCodeEnter = 13;
|
||||
|
||||
describe('manager.ui.components.menu_item', () => {
|
||||
describe('render', () => {
|
||||
test('should use "a" tag', () => {
|
||||
const wrap = shallow(<MenuItem title="title">Content</MenuItem>);
|
||||
|
||||
expect(
|
||||
wrap.matchesElement(
|
||||
<div role="menuitem" tabIndex="0" title="title">
|
||||
Content
|
||||
</div>
|
||||
)
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('events', () => {
|
||||
let onClick;
|
||||
let wrap;
|
||||
|
||||
beforeEach(() => {
|
||||
onClick = jest.fn();
|
||||
wrap = shallow(<MenuItem onClick={onClick} />);
|
||||
});
|
||||
|
||||
test('should call onClick on a click', () => {
|
||||
wrap.simulate('click');
|
||||
|
||||
expect(onClick).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('should call onClick on enter key', () => {
|
||||
const e = { keyCode: keyCodeEnter };
|
||||
wrap.simulate('keyDown', e);
|
||||
|
||||
expect(onClick).toHaveBeenCalledWith(e);
|
||||
});
|
||||
|
||||
test("shouldn't call onClick on other keys", () => {
|
||||
wrap.simulate('keyDown', {});
|
||||
|
||||
expect(onClick).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('should prevent default on mousedown', () => {
|
||||
const e = {
|
||||
preventDefault: jest.fn(),
|
||||
};
|
||||
wrap.simulate('mouseDown', e);
|
||||
|
||||
expect(e.preventDefault).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
46
lib/ui/src/modules/ui/components/routed_link.js
Normal file
46
lib/ui/src/modules/ui/components/routed_link.js
Normal file
@ -0,0 +1,46 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
const LEFT_BUTTON = 0;
|
||||
|
||||
// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks
|
||||
function isPlainLeftClick(e) {
|
||||
return e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
|
||||
}
|
||||
|
||||
export default class RoutedLink extends React.Component {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
this.onClick = this.onClick.bind(this);
|
||||
}
|
||||
|
||||
onClick(e) {
|
||||
if (this.props.onClick && isPlainLeftClick(e)) {
|
||||
e.preventDefault();
|
||||
this.props.onClick(e);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { onClick, href, children, overrideParams, ...restProps } = this.props;
|
||||
return (
|
||||
<a onClick={this.onClick} href={href} {...restProps}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
RoutedLink.defaultProps = {
|
||||
onClick: null,
|
||||
href: '#',
|
||||
children: null,
|
||||
overrideParams: null,
|
||||
};
|
||||
|
||||
RoutedLink.propTypes = {
|
||||
onClick: PropTypes.func,
|
||||
href: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
overrideParams: PropTypes.shape({}),
|
||||
};
|
||||
97
lib/ui/src/modules/ui/components/routed_link.test.js
Normal file
97
lib/ui/src/modules/ui/components/routed_link.test.js
Normal file
@ -0,0 +1,97 @@
|
||||
import { shallow } from 'enzyme';
|
||||
import React from 'react';
|
||||
import RoutedLink from './routed_link';
|
||||
|
||||
const LEFT_BUTTON = 0;
|
||||
const MIDDLE_BUTTON = 1;
|
||||
const RIGHT_BUTTON = 2;
|
||||
|
||||
describe('manager.ui.components.routed_link', () => {
|
||||
describe('render', () => {
|
||||
test('should use "a" tag', () => {
|
||||
const wrap = shallow(
|
||||
<RoutedLink href="href" title="title">
|
||||
Content
|
||||
</RoutedLink>
|
||||
);
|
||||
|
||||
expect(
|
||||
wrap.matchesElement(
|
||||
<a href="href" title="title">
|
||||
Content
|
||||
</a>
|
||||
)
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('events', () => {
|
||||
let e;
|
||||
let onClick;
|
||||
let wrap;
|
||||
|
||||
beforeEach(() => {
|
||||
e = {
|
||||
button: LEFT_BUTTON,
|
||||
preventDefault: jest.fn(),
|
||||
};
|
||||
onClick = jest.fn();
|
||||
wrap = shallow(<RoutedLink onClick={onClick} />);
|
||||
});
|
||||
|
||||
test('should call onClick on a plain left click', () => {
|
||||
wrap.simulate('click', e);
|
||||
|
||||
expect(onClick).toHaveBeenCalledWith(e);
|
||||
expect(e.preventDefault).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("shouldn't call onClick on a middle click", () => {
|
||||
e.button = MIDDLE_BUTTON;
|
||||
wrap.simulate('click', e);
|
||||
|
||||
expect(onClick).not.toHaveBeenCalled();
|
||||
expect(e.preventDefault).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("shouldn't call onClick on a right click", () => {
|
||||
e.button = RIGHT_BUTTON;
|
||||
wrap.simulate('click', e);
|
||||
|
||||
expect(onClick).not.toHaveBeenCalled();
|
||||
expect(e.preventDefault).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("shouldn't call onClick on alt+click", () => {
|
||||
e.altKey = true;
|
||||
wrap.simulate('click', e);
|
||||
|
||||
expect(onClick).not.toHaveBeenCalled();
|
||||
expect(e.preventDefault).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("shouldn't call onClick on ctrl+click", () => {
|
||||
e.ctrlKey = true;
|
||||
wrap.simulate('click', e);
|
||||
|
||||
expect(onClick).not.toHaveBeenCalled();
|
||||
expect(e.preventDefault).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("shouldn't call onClick on cmd+click / win+click", () => {
|
||||
e.metaKey = true;
|
||||
wrap.simulate('click', e);
|
||||
|
||||
expect(onClick).not.toHaveBeenCalled();
|
||||
expect(e.preventDefault).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("shouldn't call onClick on shift+click", () => {
|
||||
e.shiftKey = true;
|
||||
wrap.simulate('click', e);
|
||||
|
||||
expect(onClick).not.toHaveBeenCalled();
|
||||
expect(e.preventDefault).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,17 +1,26 @@
|
||||
import { document } from 'global';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ReactModal from 'react-modal';
|
||||
import FuzzySearch from '@storybook/react-fuzzy';
|
||||
|
||||
import { features } from '../../../libs/key_events';
|
||||
import { baseFonts } from './theme';
|
||||
|
||||
const searchBoxStyle = {
|
||||
position: 'absolute',
|
||||
backgroundColor: '#FFF',
|
||||
top: '100px',
|
||||
left: '50%',
|
||||
marginLeft: '-215px',
|
||||
...baseFonts,
|
||||
const modalStyle = {
|
||||
content: {
|
||||
top: '100px',
|
||||
right: 'auto',
|
||||
bottom: 'auto',
|
||||
left: '50%',
|
||||
marginLeft: '-215px',
|
||||
border: 'none',
|
||||
padding: 0,
|
||||
overflow: 'visible',
|
||||
...baseFonts,
|
||||
},
|
||||
overlay: {
|
||||
background: 'transparent',
|
||||
},
|
||||
};
|
||||
|
||||
const formatStories = stories => {
|
||||
@ -61,11 +70,19 @@ export default class SearchBox extends React.Component {
|
||||
this.fireOnKind = this.fireOnKind.bind(this);
|
||||
}
|
||||
|
||||
// TODO: Remove this if and when https://github.com/reactjs/react-modal/issues/464 resolves
|
||||
componentDidUpdate(prevProps) {
|
||||
// remove current focus on opening to prevent firing 'enter' keyDowns on it when modal closes
|
||||
if (this.props.showSearchBox && !prevProps.showSearchBox && document.activeElement) {
|
||||
document.activeElement.blur();
|
||||
}
|
||||
}
|
||||
|
||||
onSelect(selected) {
|
||||
const { handleEvent } = this.props;
|
||||
const { onClose } = this.props;
|
||||
if (selected.type === 'story') this.fireOnStory(selected.value, selected.kind);
|
||||
else this.fireOnKind(selected.value);
|
||||
handleEvent(features.SEARCH);
|
||||
onClose();
|
||||
}
|
||||
|
||||
fireOnKind(kind) {
|
||||
@ -80,16 +97,20 @@ export default class SearchBox extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={searchBoxStyle}>
|
||||
{this.props.showSearchBox &&
|
||||
<FuzzySearch
|
||||
list={formatStories(this.props.stories)}
|
||||
onSelect={this.onSelect}
|
||||
keys={['value', 'type']}
|
||||
resultsTemplate={suggestionTemplate}
|
||||
autoFocus
|
||||
/>}
|
||||
</div>
|
||||
<ReactModal
|
||||
isOpen={this.props.showSearchBox}
|
||||
onRequestClose={this.props.onClose}
|
||||
style={modalStyle}
|
||||
contentLabel="Search"
|
||||
>
|
||||
<FuzzySearch
|
||||
list={formatStories(this.props.stories)}
|
||||
onSelect={this.onSelect}
|
||||
keys={['value', 'type']}
|
||||
resultsTemplate={suggestionTemplate}
|
||||
autoFocus
|
||||
/>
|
||||
</ReactModal>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -100,5 +121,5 @@ SearchBox.propTypes = {
|
||||
showSearchBox: PropTypes.bool.isRequired,
|
||||
stories: PropTypes.arrayOf(PropTypes.object),
|
||||
onSelectStory: PropTypes.func.isRequired,
|
||||
handleEvent: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
99
lib/ui/src/modules/ui/components/search_box.test.js
Normal file
99
lib/ui/src/modules/ui/components/search_box.test.js
Normal file
@ -0,0 +1,99 @@
|
||||
import { shallow } from 'enzyme';
|
||||
import React from 'react';
|
||||
import ReactModal from 'react-modal';
|
||||
import FuzzySearch from '@storybook/react-fuzzy';
|
||||
|
||||
import SearchBox from './search_box';
|
||||
|
||||
describe('manager.ui.components.search_box', () => {
|
||||
describe('render', () => {
|
||||
test('should render FuzzySearch inside ReactModal', () => {
|
||||
const wrap = shallow(<SearchBox showSearchBox />);
|
||||
|
||||
const modal = wrap.find(ReactModal);
|
||||
expect(modal).toBePresent();
|
||||
expect(modal).toHaveProp('isOpen', true);
|
||||
expect(modal).toHaveProp('contentLabel', 'Search');
|
||||
|
||||
const search = modal.find(FuzzySearch);
|
||||
expect(search).toBePresent();
|
||||
expect(search).toHaveProp('keys', ['value', 'type']);
|
||||
expect(search).toHaveProp('autoFocus', true);
|
||||
});
|
||||
|
||||
test('should format stories', () => {
|
||||
const stories = [
|
||||
{
|
||||
kind: 'a',
|
||||
stories: ['b', 'c'],
|
||||
},
|
||||
];
|
||||
const wrap = shallow(<SearchBox stories={stories} />);
|
||||
const search = wrap.find(FuzzySearch);
|
||||
|
||||
const expectedList = [
|
||||
{
|
||||
type: 'kind',
|
||||
value: 'a',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
type: 'story',
|
||||
value: 'b',
|
||||
id: 2,
|
||||
kind: 'a',
|
||||
},
|
||||
{
|
||||
type: 'story',
|
||||
value: 'c',
|
||||
id: 3,
|
||||
kind: 'a',
|
||||
},
|
||||
];
|
||||
expect(search).toHaveProp('list', expectedList);
|
||||
});
|
||||
});
|
||||
|
||||
describe('events', () => {
|
||||
test('should call the onClose prop when modal requests it', () => {
|
||||
const onClose = jest.fn();
|
||||
const wrap = shallow(<SearchBox onClose={onClose} />);
|
||||
|
||||
const modal = wrap.find(ReactModal);
|
||||
modal.simulate('requestClose');
|
||||
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('should handle selecting a kind', () => {
|
||||
const onSelectStory = jest.fn();
|
||||
const onClose = jest.fn();
|
||||
const wrap = shallow(<SearchBox onSelectStory={onSelectStory} onClose={onClose} />);
|
||||
|
||||
const modal = wrap.find(FuzzySearch);
|
||||
modal.simulate('select', {
|
||||
type: 'kind',
|
||||
value: 'a',
|
||||
});
|
||||
|
||||
expect(onSelectStory).toHaveBeenCalledWith('a', null);
|
||||
expect(onClose).toHaveBeenCalledWith();
|
||||
});
|
||||
|
||||
test('should handle selecting a story', () => {
|
||||
const onSelectStory = jest.fn();
|
||||
const onClose = jest.fn();
|
||||
const wrap = shallow(<SearchBox onSelectStory={onSelectStory} onClose={onClose} />);
|
||||
|
||||
const modal = wrap.find(FuzzySearch);
|
||||
modal.simulate('select', {
|
||||
type: 'story',
|
||||
value: 'a',
|
||||
kind: 'b',
|
||||
});
|
||||
|
||||
expect(onSelectStory).toHaveBeenCalledWith('b', 'a');
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user