This repository has been archived by the owner on Dec 30, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 386
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* docs(storybook): add jsx addon * docs(storybook): add method to display correct component names * docs(storybook): add jsx usage to the stories * docs(storybook): update yarn.lock * docs(storybook): modify webpack config to fix build-storybook fail See storybookjs/storybook#1774 * docs(storybook): filter out unnecessary props * docs(storybook): updates after reviews on PR
- Loading branch information
1 parent
a3b233a
commit fbf098f
Showing
26 changed files
with
1,586 additions
and
814 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,64 @@ | ||
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { setAddon, storiesOf } from '@storybook/react'; | ||
| import { ClearAll, RefinementList } from '../packages/react-instantsearch/dom'; | ||
| import { withKnobs } from '@storybook/addon-knobs'; | ||
| import { WrapWithHits } from './util'; | ||
| import { displayName, filterProps, WrapWithHits } from './util'; | ||
| import JSXAddon from 'storybook-addon-jsx'; | ||
|
|
||
| const stories = storiesOf('ClearAll', module); | ||
| setAddon(JSXAddon); | ||
|
|
||
| stories.addDecorator(withKnobs); | ||
| const stories = storiesOf('ClearAll', module); | ||
|
|
||
| stories | ||
| .add('with refinements to clear', () => ( | ||
| <WrapWithHits linkedStoryGroup="ClearAll"> | ||
| <div> | ||
| <ClearAll /> | ||
| <div style={{ display: 'none' }}> | ||
| <RefinementList | ||
| attributeName="category" | ||
| defaultRefinement={['Dining']} | ||
| /> | ||
| .addDecorator(withKnobs) | ||
| .addWithJSX( | ||
| 'with refinements to clear', | ||
| () => ( | ||
| <WrapWithHits linkedStoryGroup="ClearAll"> | ||
| <div> | ||
| <ClearAll /> | ||
| <div style={{ display: 'none' }}> | ||
| <RefinementList | ||
| attributeName="category" | ||
| defaultRefinement={['Dining']} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </WrapWithHits> | ||
| )) | ||
| .add('nothing to clear', () => ( | ||
| <WrapWithHits linkedStoryGroup="ClearAll"> | ||
| <ClearAll /> | ||
| </WrapWithHits> | ||
| )) | ||
| .add('clear all refinements and the query', () => ( | ||
| <WrapWithHits linkedStoryGroup="ClearAll"> | ||
| <ClearAll | ||
| clearsQuery | ||
| translations={{ reset: 'Clear refinements and query' }} | ||
| /> | ||
| <RefinementList attributeName="category" defaultRefinement={['Dining']} /> | ||
| </WrapWithHits> | ||
| )); | ||
| </WrapWithHits> | ||
| ), | ||
| { | ||
| displayName, | ||
| filterProps, | ||
| } | ||
| ) | ||
| .addWithJSX( | ||
| 'nothing to clear', | ||
| () => ( | ||
| <WrapWithHits linkedStoryGroup="ClearAll"> | ||
| <ClearAll /> | ||
| </WrapWithHits> | ||
| ), | ||
| { | ||
| displayName, | ||
| filterProps, | ||
| } | ||
| ) | ||
| .addWithJSX( | ||
| 'clear all refinements and the query', | ||
| () => ( | ||
| <WrapWithHits linkedStoryGroup="ClearAll"> | ||
| <ClearAll | ||
| clearsQuery | ||
| translations={{ reset: 'Clear refinements and query' }} | ||
| /> | ||
| <RefinementList | ||
| attributeName="category" | ||
| defaultRefinement={['Dining']} | ||
| /> | ||
| </WrapWithHits> | ||
| ), | ||
| { | ||
| displayName, | ||
| filterProps, | ||
| } | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,61 +1,91 @@ | ||
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { setAddon, storiesOf } from '@storybook/react'; | ||
| import { | ||
| CurrentRefinements, | ||
| RefinementList, | ||
| Toggle, | ||
| Panel, | ||
| } from '../packages/react-instantsearch/dom'; | ||
| import { withKnobs } from '@storybook/addon-knobs'; | ||
| import { WrapWithHits } from './util'; | ||
| import { displayName, filterProps, WrapWithHits } from './util'; | ||
| import JSXAddon from 'storybook-addon-jsx'; | ||
| setAddon(JSXAddon); | ||
|
|
||
| const stories = storiesOf('CurrentRefinements', module); | ||
|
|
||
| stories.addDecorator(withKnobs); | ||
|
|
||
| stories | ||
| .add('default', () => ( | ||
| <WrapWithHits linkedStoryGroup="CurrentRefinements"> | ||
| <div> | ||
| <CurrentRefinements /> | ||
| <div style={{ display: 'none' }}> | ||
| <RefinementList | ||
| attributeName="category" | ||
| defaultRefinement={['Dining']} | ||
| /> | ||
| .addWithJSX( | ||
| 'default', | ||
| () => ( | ||
| <WrapWithHits linkedStoryGroup="CurrentRefinements"> | ||
| <div> | ||
| <CurrentRefinements /> | ||
| <div style={{ display: 'none' }}> | ||
| <RefinementList | ||
| attributeName="category" | ||
| defaultRefinement={['Dining']} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </WrapWithHits> | ||
| )) | ||
| .add('with toggle', () => ( | ||
| <WrapWithHits linkedStoryGroup="CurrentRefinements"> | ||
| <div> | ||
| <CurrentRefinements /> | ||
| <Toggle | ||
| attributeName="materials" | ||
| label="Made with solid pine" | ||
| value={'Solid pine'} | ||
| /> | ||
| </div> | ||
| </WrapWithHits> | ||
| )) | ||
| .add('with panel', () => ( | ||
| <WrapWithHits linkedStoryGroup="CurrentRefinements"> | ||
| <Panel title="Current Refinements"> | ||
| <CurrentRefinements /> | ||
| <div style={{ display: 'none' }}> | ||
| <RefinementList | ||
| attributeName="category" | ||
| defaultRefinement={['Dining']} | ||
| </WrapWithHits> | ||
| ), | ||
| { | ||
| displayName, | ||
| filterProps, | ||
| } | ||
| ) | ||
| .addWithJSX( | ||
| 'with toggle', | ||
| () => ( | ||
| <WrapWithHits linkedStoryGroup="CurrentRefinements"> | ||
| <div> | ||
| <CurrentRefinements /> | ||
| <Toggle | ||
| attributeName="materials" | ||
| label="Made with solid pine" | ||
| value={'Solid pine'} | ||
| /> | ||
| </div> | ||
| </Panel> | ||
| </WrapWithHits> | ||
| )) | ||
| .add('with panel but no refinement', () => ( | ||
| <WrapWithHits linkedStoryGroup="CurrentRefinements"> | ||
| <Panel title="Current Refinements"> | ||
| <CurrentRefinements /> | ||
| </Panel> | ||
| </WrapWithHits> | ||
| )); | ||
| </WrapWithHits> | ||
| ), | ||
| { | ||
| displayName, | ||
| filterProps, | ||
| } | ||
| ) | ||
| .addWithJSX( | ||
| 'with panel', | ||
| () => ( | ||
| <WrapWithHits linkedStoryGroup="CurrentRefinements"> | ||
| <Panel title="Current Refinements"> | ||
| <CurrentRefinements /> | ||
| <div style={{ display: 'none' }}> | ||
| <RefinementList | ||
| attributeName="category" | ||
| defaultRefinement={['Dining']} | ||
| /> | ||
| </div> | ||
| </Panel> | ||
| </WrapWithHits> | ||
| ), | ||
| { | ||
| displayName, | ||
| filterProps, | ||
| } | ||
| ) | ||
| .addWithJSX( | ||
| 'with panel but no refinement', | ||
| () => ( | ||
| <WrapWithHits linkedStoryGroup="CurrentRefinements"> | ||
| <Panel title="Current Refinements"> | ||
| <CurrentRefinements /> | ||
| </Panel> | ||
| </WrapWithHits> | ||
| ), | ||
| { | ||
| displayName, | ||
| filterProps, | ||
| } | ||
| ); |
Oops, something went wrong.