-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update storybook to the latest version #663
Merged
Merged
Changes from all commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
d21845f
feat(Storybook): update storybook to v4
fgameiro 3eda1e7
chore(Storybook): add babel-loader dev dependency
fgameiro 85fd430
refactor(Storybook): add withInfo decorator as global config
fgameiro c5c8c6b
refactor(Storybook): remove deprecated withInfo function from story f…
fgameiro a225f74
chore(Storyshots): add babel plugin required to run storyshots
fgameiro 5490698
test(Storyshots): update
fgameiro d149d54
fix(Storybook): use action function from @storybook/addon-actions
fgameiro bfd8342
fix(Storybook): fix 'Failed prop type' warning when using styled-comp…
fgameiro 0c562e7
chore(Snapshots): avoid withInfo decorator when running tests
fgameiro 2513859
chore(Babel): update to v7
fgameiro f6e154f
chore(Babel): allow each package to be built following the babel root…
fgameiro c1ad578
chore(Scaffold): update scaffold tool to generate package.json with u…
fgameiro 58cc129
fix(Card): fix cardTypes exports
fgameiro b06c364
chore(Scaffold): remove withInfo import from story template
fgameiro File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
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 |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| import registerRequireContextHook from "babel-plugin-require-context-hook/register"; | ||
| registerRequireContextHook(); |
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 |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| module.exports = api => { | ||
| api.cache(true); | ||
| return { | ||
| presets: ["@babel/preset-env", "@babel/preset-react"], | ||
| plugins: [ | ||
| // Stage 2 plugins | ||
| ["@babel/plugin-proposal-decorators", { legacy: true }], | ||
| "@babel/plugin-proposal-function-sent", | ||
| "@babel/plugin-proposal-export-namespace-from", | ||
| "@babel/plugin-proposal-numeric-separator", | ||
| "@babel/plugin-proposal-throw-expressions", | ||
| // Stage 3 plugins | ||
| "@babel/plugin-syntax-dynamic-import", | ||
| "@babel/plugin-syntax-import-meta", | ||
| ["@babel/plugin-proposal-class-properties", { loose: false }], | ||
| "@babel/plugin-proposal-json-strings" | ||
| ], | ||
| env: { | ||
| test: { | ||
| plugins: ["babel-plugin-require-context-hook"] | ||
| } | ||
| }, | ||
| //allow imports from transpiled farmblocks packages | ||
| sourceType: "unambiguous" | ||
| }; | ||
| }; |
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
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,118 +1,91 @@ | ||
| import React from "react"; | ||
| import styled from "styled-components"; | ||
| import { storiesOf } from "@storybook/react"; | ||
| import { withInfo } from "@storybook/addon-info"; | ||
| import { action } from "@storybook/addon-actions"; | ||
|
|
||
| import Alert from "."; | ||
| import { POSITIVE, NEWS, NEGATIVE, ATTENTION } from "./constants/alertTypes"; | ||
|
|
||
| const ExtendedAlert = styled(Alert)` | ||
| const StyledAlert = styled(Alert)` | ||
| transform: rotate(5deg); | ||
| `; | ||
|
|
||
| const ExtendedAlert = props => <StyledAlert {...props} />; | ||
|
|
||
| storiesOf("Alert", module) | ||
| .add( | ||
| "default", | ||
| withInfo()(() => ( | ||
| <Alert text="Default is set to news type, and have default onDismiss function that hides the alert." /> | ||
| )) | ||
| ) | ||
| .add( | ||
| "default at bottom", | ||
| withInfo()(() => ( | ||
| <Alert | ||
| bottomAligned | ||
| text="Default is set to news type, and have default onDismiss function that hides the alert." | ||
| /> | ||
| )) | ||
| ) | ||
| .add( | ||
| "visibleTime 2 seconds", | ||
| withInfo()(() => ( | ||
| <Alert | ||
| text="This message will self-destruct in 2 seconds" | ||
| visibleTime={2000} | ||
| /> | ||
| )) | ||
| ) | ||
| .add( | ||
| "non dismissable", | ||
| withInfo()(() => <Alert dismissable={false} text="I can't be dismissed!" />) | ||
| ) | ||
| .add( | ||
| "with custom z-index", | ||
| withInfo()(() => ( | ||
| <div> | ||
| <div | ||
| style={{ | ||
| width: 120, | ||
| height: 120, | ||
| position: "absolute", | ||
| zIndex: 10, | ||
| background: "gray" | ||
| }} | ||
| /> | ||
| <div | ||
| style={{ | ||
| width: 100, | ||
| height: 100, | ||
| position: "absolute", | ||
| zIndex: 12, | ||
| background: "rgba(0, 0, 0, 0.7)" | ||
| }} | ||
| /> | ||
| <Alert text="should display between the two" zIndex={11} /> | ||
| </div> | ||
| )) | ||
| ) | ||
| .add( | ||
| "type positive", | ||
| withInfo()(() => ( | ||
| <Alert | ||
| dismissable | ||
| type={POSITIVE} | ||
| text="Positive alert!" | ||
| onDismiss={action("dismiss triggered")} | ||
| /> | ||
| )) | ||
| ) | ||
| .add( | ||
| "type news", | ||
| withInfo()(() => ( | ||
| <Alert | ||
| dismissable | ||
| type={NEWS} | ||
| text="New alert!" | ||
| onDismiss={action("dismiss triggered")} | ||
| /> | ||
| )) | ||
| ) | ||
| .add( | ||
| "type negative", | ||
| withInfo()(() => ( | ||
| <Alert | ||
| dismissable | ||
| type={NEGATIVE} | ||
| text="Negative alert!" | ||
| onDismiss={action("dismiss triggered")} | ||
| .add("default", () => ( | ||
| <Alert text="Default is set to news type, and have default onDismiss function that hides the alert." /> | ||
| )) | ||
| .add("default at bottom", () => ( | ||
| <Alert | ||
| bottomAligned | ||
| text="Default is set to news type, and have default onDismiss function that hides the alert." | ||
| /> | ||
| )) | ||
| .add("visibleTime 2 seconds", () => ( | ||
| <Alert | ||
| text="This message will self-destruct in 2 seconds" | ||
| visibleTime={2000} | ||
| /> | ||
| )) | ||
| .add("non dismissable", () => ( | ||
| <Alert dismissable={false} text="I can't be dismissed!" /> | ||
| )) | ||
| .add("with custom z-index", () => ( | ||
| <div> | ||
| <div | ||
| style={{ | ||
| width: 120, | ||
| height: 120, | ||
| position: "absolute", | ||
| zIndex: 10, | ||
| background: "gray" | ||
| }} | ||
| /> | ||
| )) | ||
| ) | ||
| .add( | ||
| "type attention", | ||
| withInfo()(() => ( | ||
| <Alert | ||
| dismissable | ||
| type={ATTENTION} | ||
| text="Attention alert!" | ||
| onDismiss={action("dismiss triggered")} | ||
| <div | ||
| style={{ | ||
| width: 100, | ||
| height: 100, | ||
| position: "absolute", | ||
| zIndex: 12, | ||
| background: "rgba(0, 0, 0, 0.7)" | ||
| }} | ||
| /> | ||
| )) | ||
| ) | ||
| .add( | ||
| "extended style", | ||
| withInfo()(() => ( | ||
| <ExtendedAlert text="Extended with 'transform: rotate(5deg)'" /> | ||
| )) | ||
| ); | ||
| <Alert text="should display between the two" zIndex={11} /> | ||
| </div> | ||
| )) | ||
| .add("type positive", () => ( | ||
| <Alert | ||
| dismissable | ||
| type={POSITIVE} | ||
| text="Positive alert!" | ||
| onDismiss={action("dismiss triggered")} | ||
| /> | ||
| )) | ||
| .add("type news", () => ( | ||
| <Alert | ||
| dismissable | ||
| type={NEWS} | ||
| text="New alert!" | ||
| onDismiss={action("dismiss triggered")} | ||
| /> | ||
| )) | ||
| .add("type negative", () => ( | ||
| <Alert | ||
| dismissable | ||
| type={NEGATIVE} | ||
| text="Negative alert!" | ||
| onDismiss={action("dismiss triggered")} | ||
| /> | ||
| )) | ||
| .add("type attention", () => ( | ||
| <Alert | ||
| dismissable | ||
| type={ATTENTION} | ||
| text="Attention alert!" | ||
| onDismiss={action("dismiss triggered")} | ||
| /> | ||
| )) | ||
| .add("extended style", () => ( | ||
| <ExtendedAlert text="Extended with 'transform: rotate(5deg)'" /> | ||
| )); | ||
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,23 +1,16 @@ | ||
| import React from "react"; | ||
| import { storiesOf } from "@storybook/react"; | ||
| import { withInfo } from "@storybook/addon-info"; | ||
|
|
||
| import BrieflyDisplay from "./BrieflyDisplay"; | ||
|
|
||
| storiesOf("Alert (private)/BrieflyDisplay", module) | ||
| .add( | ||
| "default", | ||
| withInfo()(() => ( | ||
| <BrieflyDisplay> | ||
| <p>this text should be displayed for the default time</p> | ||
| </BrieflyDisplay> | ||
| )) | ||
| ) | ||
| .add( | ||
| "display for 5 seconds", | ||
| withInfo()(() => ( | ||
| <BrieflyDisplay time={5000}> | ||
| <p>This text should be displayed for 5 seconds</p> | ||
| </BrieflyDisplay> | ||
| )) | ||
| ); | ||
| .add("default", () => ( | ||
| <BrieflyDisplay> | ||
| <p>this text should be displayed for the default time</p> | ||
| </BrieflyDisplay> | ||
| )) | ||
| .add("display for 5 seconds", () => ( | ||
| <BrieflyDisplay time={5000}> | ||
| <p>This text should be displayed for 5 seconds</p> | ||
| </BrieflyDisplay> | ||
| )); |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do know why the previous version won't work? I wonder if this is the best approach to handle this, because the
styled(Alert)should produce a valid component 🤔There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, I found this to be strange too.
Actually this is just a workaround to avoid this warning:
According to this (storybookjs/storybook#4817) it seems that storybook can't access the components' propTypes through the
styledwrapper, which raises the warning.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ouch...