diff --git a/.eslintignore b/.eslintignore index 93e974542d01..e2549766926e 100644 --- a/.eslintignore +++ b/.eslintignore @@ -3,7 +3,7 @@ build coverage node_modules **/example/** -**/demo/** +app/**/demo/** docs/public *.bundle.js diff --git a/.eslintrc.js b/.eslintrc.js index e30a1b5fde05..27d5285d1af4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -53,6 +53,8 @@ module.exports = { ], 'import/prefer-default-export': ignore, 'react/jsx-wrap-multilines': ignore, + 'react/jsx-indent-props': ignore, + 'react/jsx-closing-bracket-location': ignore, 'react/jsx-uses-react': error, 'react/jsx-uses-vars': error, 'react/react-in-jsx-scope': error, diff --git a/.gitignore b/.gitignore index 3b78d318d47d..cbaf6162bbd4 100644 --- a/.gitignore +++ b/.gitignore @@ -14,3 +14,5 @@ packages/examples/automated-* yarn.lock /**/LICENSE docs/public +packs/*.tgz +package-lock.json diff --git a/.travis.yml b/.travis.yml index 6865e1508a98..b7eada8bd776 100644 --- a/.travis.yml +++ b/.travis.yml @@ -17,15 +17,17 @@ script: - npm run lint - npm run test -- --coverage - npm run coverage +- ([ -z "$DANGER_GITHUB_API_TOKEN" ] && echo "DANGER_GITHUB_API_TOKEN not set") || npm run danger git: depth: 1 env: global: - - CXX=g++-4.8 - - secure: cAde4wBX75KtTWcyOOLAG3Z9ODdqvmbkL7+8fVNj/+QkZZWE8pFa3deaTIHF9NyVO2h6/jutSkzmsz/nOyBYVPHhGsxBTmsyXoko48Wg+iNm7epoH5uts/kmAPiwpzaWGXwuiAvsOGZjYYFzM335jyaOAcZW3f0C5gIJ5XCCdWBQRaFFLq+ZLKsLSME6xTfV2OMVH24hxXvbF9wvO0aj6p/GaT0cS8Rpg4sQ9eeih2IM/uLiqWzp9UUM2m8SUiFfveqYJFkBtzqAus9pbwsoQjnAT5e3CKJUpPiruCAe5FOt57Hl+mH1N1xqP1ei8j2ZNF+E6zuDdAcMpArTIMM69L+D7wzJYDoF2PuF+jeet7ytAFxSgnZHSTsBJn5cZMPh2tuX7aWwgrpMknVe3bdoINwkyVCaIW+Ur6vc37l/Kuw25eiMBtRDyMhUf4V3FAFi3PV1XKn+34cR4kvpOHt6vk8v5CobBHfQdwU+6FMZMo3GFIkDBcLydLn3WLQ3jKa4OcLqWws6o85k+bHZkLhlADjbiX/PzG23D+sT7Inzj//Tef93SIL02yN+ooZdIUtDus3+qZzhcSrDeSb2octjLXRzPiGn5cFNI86HVcu7qF0+4zCPconhM4+mfAh5S19fmnRdTQctQQxbsObuT9jcMvgJdhIX89aA7Ry3pAx2b6Q= + - CXX=g++-4.8 + - secure: cAde4wBX75KtTWcyOOLAG3Z9ODdqvmbkL7+8fVNj/+QkZZWE8pFa3deaTIHF9NyVO2h6/jutSkzmsz/nOyBYVPHhGsxBTmsyXoko48Wg+iNm7epoH5uts/kmAPiwpzaWGXwuiAvsOGZjYYFzM335jyaOAcZW3f0C5gIJ5XCCdWBQRaFFLq+ZLKsLSME6xTfV2OMVH24hxXvbF9wvO0aj6p/GaT0cS8Rpg4sQ9eeih2IM/uLiqWzp9UUM2m8SUiFfveqYJFkBtzqAus9pbwsoQjnAT5e3CKJUpPiruCAe5FOt57Hl+mH1N1xqP1ei8j2ZNF+E6zuDdAcMpArTIMM69L+D7wzJYDoF2PuF+jeet7ytAFxSgnZHSTsBJn5cZMPh2tuX7aWwgrpMknVe3bdoINwkyVCaIW+Ur6vc37l/Kuw25eiMBtRDyMhUf4V3FAFi3PV1XKn+34cR4kvpOHt6vk8v5CobBHfQdwU+6FMZMo3GFIkDBcLydLn3WLQ3jKa4OcLqWws6o85k+bHZkLhlADjbiX/PzG23D+sT7Inzj//Tef93SIL02yN+ooZdIUtDus3+qZzhcSrDeSb2octjLXRzPiGn5cFNI86HVcu7qF0+4zCPconhM4+mfAh5S19fmnRdTQctQQxbsObuT9jcMvgJdhIX89aA7Ry3pAx2b6Q= + - secure: 1iZAjDqikmJaXvql/bpNZay9u5yyQCwNyz3OmcvhJDds6lIKUUU24S3srsYatmE2lkpUuRertieGtzMPkhNx/rFRePD7SZAnSMADyA+lxW9SWu8LHEBcjgsDY89iJH6+4BiYIrldP0vjORYJDwtiEKB3bSJX88zkLpTVTS/L5EHS9kQ/xtQsvoNB69C1ExCt7EVgSL9cDVccFvrU1FhC8w4eH5j3fNikQduaPhF+iqoTo8GW/m22/95Xhmngcu7n6Fm8G/YA2xmkvdCBLL7rLSwccwG9j9MRei704NrBOux7xN/2euVg5jYbFCaDQNjuu4UrvVB2YFxqvpsjYByktfqNMTheqcGdVuh3Jd7cMGmkMSBhUgmUW5KPH4v73mLUlHroywQUU3iiMiCvVMmTd5Xy0o0X0ks5mvXAXWHTmnQkvPyy/V6cwcUfgJC5k3M/V1hDCRMeMVPZsmh73lZffwpAkfx3xJsNf46f7h9aN9Q++danf9JryoS9YsdRBtjfJTtNaO2uH+iUMNSNzAbJmgxtsi3NuX+G+2N02mtaUCzN/SOmKKoZsuPfKVcpHgVa41mgio6QJs7wy9/VWYYASNZddj2HnvLGLBLnJpv+uKKpdSB0Xe6k8dOl1MbaWJT4Xy0/NUD3gawLCvhfN9qL0+QnlJAXCbOoms6EoAyc6fY= addons: apt: sources: - - ubuntu-toolchain-r-test + - ubuntu-toolchain-r-test packages: - - g++-4.8 + - g++-4.8 diff --git a/CHANGELOG.md b/CHANGELOG.md index ff70762b234c..34df28e74f42 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,108 @@ +# 3.1.8 + +2017-July-06 + +#### Documentation + +- Updated addon knob readme. [#1406](https://github.com/storybooks/storybook/pull/1406) +- Add a FAQ entry for shared config with next [#1390](https://github.com/storybooks/storybook/pull/1390) +- Documented webpack customization example for typescript [#1386](https://github.com/storybooks/storybook/pull/1386) + +#### Maintenance + +- Removed empty array, since webpack 2 doesn't support them anymore. [#1381](https://github.com/storybooks/storybook/pull/1381) + +#### Dependency Upgrades + +- Support webpack 3.0.0 [#1410](https://github.com/storybooks/storybook/pull/1410) +- Update react inspector to fix #1385 [#1408](https://github.com/storybooks/storybook/pull/1408) + +# 3.1.7 + +2017-June-28 + +#### Bug Fixes + +- Exit storybook build non-zero on stats errors (e.g. errors in the transpilation pipeline) [#1372](https://github.com/storybooks/storybook/pull/1372) +- Fixed regression: CSS entries were not picked up for storybook pages (e.g. when using exract-text-webpack-plugin) [#1363](https://github.com/storybooks/storybook/pull/1363) + +#### Documentation + +- Document Storybook release process [#1348](https://github.com/storybooks/storybook/pull/1348) + +# 3.1.6 + +2017-June-26 + +#### Bug Fixes + +- Remove the `cacheDirectory` option from babel config [#1350](https://github.com/storybooks/storybook/pull/1350) +- websockets (ws) removed `socket.upgradeReq`, so use `req` instead [#1337](https://github.com/storybooks/storybook/pull/1337) +- Ensure we add the correct version of `react-dom` [#1349](https://github.com/storybooks/storybook/pull/1349) +- Addon Info: Fix invalid prop `node.type` supplied to 'Props' [#1351](https://github.com/storybooks/storybook/pull/1351) +- Addon Info: Omit empty inline info header [#1306](https://github.com/storybooks/storybook/pull/1306) +- Addon Actions: Use uuid for action IDs instead of Math.random (fixes #1109) [#1347](https://github.com/storybooks/storybook/pull/1347) + +#### Documentation + +- Fix welcome instructions to reflect current `getstorybook` [#1358](https://github.com/storybooks/storybook/pull/1358) +- Addon Info: Update README with configuration instructions [#1326](https://github.com/storybooks/storybook/pull/1326) + +#### Dependency Upgrades + +- Update lint-staged to the latest version 🚀 [#1315](https://github.com/storybooks/storybook/pull/1315) + +# 3.1.5 + +2017-June-22 + +#### Features + +- Added flow support to getstorybook upgrade [#1289](https://github.com/storybooks/storybook/pull/1289) +- Added support for the `haul` react-native packager [#1294](https://github.com/storybooks/storybook/pull/1294) + +#### Bug Fixes + +- Fixed addon knobs proptypes deserialization [#1290](https://github.com/storybooks/storybook/pull/1290) + +#### Documentation + +- Added search to docs [#1256](https://github.com/storybooks/storybook/pull/1256) +- snapshot testing inverse regex example documentation [#1317](https://github.com/storybooks/storybook/pull/1317) + +#### Maintenance + +- Refactored storybook component library [#1266](https://github.com/storybooks/storybook/pull/1266) +- Created CRA kitchen sink addons example [#1288](https://github.com/storybooks/storybook/pull/1288) +- Use a pack -> install technique to recreate local packages [#1332](https://github.com/storybooks/storybook/pull/1332) +- Import demo components from @storybook/react [#1303](https://github.com/storybooks/storybook/pull/1303) + +# 3.1.4 + +2017-June-15 + +#### Features + +- IMPROVE design of addon-events [#1249](https://github.com/storybooks/storybook/pull/1249) +- Add a `shallowSnapshot` option for storyshots `test` functions [#1232](https://github.com/storybooks/storybook/pull/1232) + +#### Bug Fixes + +- Fix app entry bug in RN gestorybook [#1280](https://github.com/storybooks/storybook/pull/1280) +- fix(addons/info): Cannot read property 'props' of undefined [#1258](https://github.com/storybooks/storybook/pull/1258) + +#### Documentation + +- Add versions plugin to docs [#1269](https://github.com/storybooks/storybook/pull/1269) + +# 3.1.3 + +2017-June-10 + +#### Bug Fixes + +- Fix `storybook-build` manager-head.html bug [#1248](https://github.com/storybooks/storybook/pull/1248) + # 3.1.2 Minor features including a new "events" addon, as well as the usual bugfixes, cleanup, etc. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 61fbc1a619e2..06cdc399d360 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -9,6 +9,7 @@ Please review this document to help to streamline the process and save everyone' No software is bug free. So, if you got an issue, follow these steps: - Search the [issue list](https://github.com/storybooks/storybook/issues?utf8=%E2%9C%93&q=) for current and old issues. + - If you find an existing issue, please UPVOTE the issue by adding a "thumbs-up reaction". We use this to help prioritize issues! - If none of that is helping, create an issue with with following information: - Clear title (make is shorter if possible). - Describe the issue in clear language. @@ -28,11 +29,11 @@ To test your project against the current latest version of storybook, you can cl 2. Link `storybook` and any other required dependencies - cd packages/react-storybook + cd app/react npm link cd - npm link @kadira/storybook + npm link @storybook/react # repeat with whichever other parts of the monorepo you are using. @@ -127,7 +128,7 @@ If an issue is a `bug`, and it doesn't have a clear reproduction that you have p ## Development Guide -> If you want to work on a UI feature, refer to the [Storybook UI](https://github.com/storybooks/storybook/tree/master/packages/storybook-ui) project. +> If you want to work on a UI feature, refer to the [Storybook UI](https://github.com/storybooks/storybook/tree/master/lib/ui) page. This project written in ES2016+ syntax so, we need to transpile it before use. So run the following command: diff --git a/README.md b/README.md index 7b2212e9250b..62fa53896c39 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,8 @@ It allows you to browse a component library, view the different states of each c Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies. +Here are some featured examples that you can reference to see how Storybook works: https://storybook.js.org/examples/ + Storybook comes with a lot of [addons](https://storybook.js.org/addons/introduction/) for component design, documentation, testing, interactivity, and so on. Storybook's easy-to-use API makes it easy to configure and extend in various ways. It has even been extended to support React Native development for mobile. ## Table of contents @@ -45,6 +47,14 @@ getstorybook Once it's installed, you can `npm run storybook` and it will run the development server on your local machine, and give you a URL to browse some sample stories. +**Storybook v2.x migration note**: If you're using Storybook v2.x and want to shift to 3.x version the easiest way is: +```sh +npm i -g @storybook/cli +cd my-storybook-v2-app +getstorybook +``` +It runs a codemod to update all package names. Read all migration details in our [Migration Guide](MIGRATION.md) + For full documentation on using Storybook visit: [storybook.js.org](https://storybook.js.org) ## Projects @@ -63,6 +73,7 @@ For full documentation on using Storybook visit: [storybook.js.org](https://stor - [storyshots](addons/storyshots) - Easy snapshot testing for storybook - [actions](addons/actions/) - Log actions as users interact with components in storybook +- [links](addons/links/) - Create links between stories - [comments](addons/comments/) - Comment on storybook stories - [graphql](addons/graphql/) - Query a GraphQL server within Storybook stories - [info](addons/info/) - Annotate stories with extra component usage information diff --git a/RELEASES.md b/RELEASES.md new file mode 100644 index 000000000000..96bd423248df --- /dev/null +++ b/RELEASES.md @@ -0,0 +1,117 @@ +# Release Process + +A Storybook release process based on [Semver](http://semver.org/). In short: + +1. Merge bugfix PRs directly into master automatically release (~daily) + +2. Merge feature and breaking PRs into a release branch (e.g. `release/3.2`) and release features in groups along with a marketing push after a preview period (~monthly) + +3. Consensus on critical infrastructure/bugs that are needed before we can do a minor release, so that we pay down our tech debt as we go. + +## Motivation + +During the Storybook 3.x transition we've undergone a series of growing pains as +we've opened up the development process. We've had questions about: + +1. how to adhere to semver? +2. how to do marketing releases (while adhering to semver)? +3. how to introduce significant new features (e.g. vue support, story hierarchy)? +4. how to converge on key design decisions (e.g. new addons API)? +5. how to schedule releases? +6. how to maintain quality/stability through the process? +7. how to pay down tech debt as we go? + +This process attempts to address all these concerns in one shot. + +## Semver + +[Semver](http://semver.org/) dictates three types of release: + +1. MAJOR version when you make incompatible API changes, +2. MINOR version when you add functionality in a backwards-compatible manner, and +3. PATCH version when you make backwards-compatible bug fixes. + +We'll do our best to adhere to Semver, but won't be religious about it. In +particular, we may occasionally release small bits of new functionality in PATCH +releases. We'll try our best to restrict breaking changes to MAJOR releases. + +## PATCH releases + +Every bugfix should go out as soon as we've verified the fix, and based on the +current rate of contribution, we should be issuing PATCH releases multiple times per week. +Soon we'll automate the process so that a release will go out every time a PR is +merged into `master`, and we've already laid most of the groundwork for this. + +## MINOR releases + +Every new feature, particularly significant ones (e.g. Vue support, deep +hierarchy for stories) deserves more attention: + +1. They should be well-tested by the community before we release. +2. They often have architectural implications for the entire Storybook ecosystem, so should be discussed thoroughly before release. Doing `alpha` releases allow us to test in the community without necessarily achieving agreement. For example, currently `Vue` support is in `alpha`, although it contains potentially controversial changes to addons. +3. They often deserve proper marketing treatment (blog posts, release announcement, podcast, etc.) + +Therefore we merge these into a release branch of the form `release/MAJOR.MINOR` +and we create preview releases and get them tested by the community before +merging those branches into `master`. + +> NOTE: it is possible to edit the `base` branch in a PR, so we can expect users to issue PRs to `master`, but as maintainers as we see feature releases we should set them to merge into the appropriate release branch. + +In general we should release 2-3 headline features per minor release for +marketing purposes. Each headline feature should get its own blog post on the +Storybook medium publication, and the release itself should also get a blog +post. + +## MAJOR releases + +We should avoid major releases, and should try to do these at most 1-2x per +year. Ideally each breaking change would have been agreed upon by the +maintainers and validated in backwards-compatible feature releases. At some +point once a change has been thoroughly vetted, we deprecate the old way and +give some time for people to upgrade to the new way. Finally MAJOR releases +should have killer features that reward users for upgrading, and should not be +used to scratch our own architectural itches -- unless those itches are really +killing development in some meaningful way. + +## Blocking bugs + +Most PATCH releases come from community members, who generously fix problems as +they come up. However, there are also bugs that never get picked up and just sit +there gathering upvotes and "me too" comments. We need a way to make sure that +these bugs get addressed. + +For every non-PATCH release, we nominate a small number of bugs that must be +addressed before a release can go out by adding them to the milestone. For example, here's a list of blocking bugs [for the 3.2 milestone](https://github.com/storybooks/storybook/milestone/3). + +Adding bugs to the milestone helps people looking for good ways to contribute, +or to understand what is blocking the release so they can actually do something +about it. Discussion about which bugs are critical happens in the `#maintenance` +channel [in our Slack](https://storybooks-slackin.herokuapp.com/). + +If you're experiencing a bug, the best way to make sure that it gets attention +is to upvote it by adding a "thumbs-up" reaction in Github. This way important +bugs quickly bubble to the top [with a +search](https://github.com/storybooks/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20sort%3Areactions-%2B1-desc%20label%3Abug). + +And of course, the best way to make sure a bug gets addressed quickly is to fix +it yourself and issue a PR. If the fix is good, we'll try to release it quickly +in a patch release. + +## Decision-making + +- For PATCH changes, all discussion can occur in issue/PR comments (and random slack chat as needed). +- For MINOR feature changes, there are multiple stages of discussion: + - The feature may be discussed in an issue before it is implemented (ex: ) + - Once it's implemented, the discussion may be occur on the PR (ex: ) + - If people disagree on an implementation and it can't be resolved in discussion, they may issue alternative PR's with different ideas + - Ultimately the maintainers will reach a consensus before merging the changes. There is no set process for this, but we're all adults. + - Since MINOR features are released in alpha before they are fully released, new issues may be created by end users, etc. +- For MAJOR infrastructural changes, the discussion may take place over time, in gists like this one, issues, slack discussions, etc. + - Once the breaking changes have been reduced to an actual implementation, it looks pretty much like a feature release (only with higher stakes and probably a longer stabilization process). + +## FAQ's + +#### How does my PR get merged? + +- For PATCH PR's, any maintainer can review, test, approve, and merge it. +- For MINOR/MAJOR PR's, once a maintainer reviews, tests, and approves it, s/he should clear it with the other maintainers before merging it into the release branch. diff --git a/ROADMAP.md b/ROADMAP.md index ccd591e22396..225d6dc83e8b 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -10,7 +10,7 @@ - [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) + - [Vue](#vue) (*in development*) - [Angular](#angular) - [Webcomponents](#webcomponents) - [Polymer](#polymer) diff --git a/addons/actions/README.md b/addons/actions/README.md index 7038dd0aca34..19117bc40d4e 100644 --- a/addons/actions/README.md +++ b/addons/actions/README.md @@ -23,6 +23,10 @@ Install: npm i -D @storybook/addon-actions ``` +Then, add following content to `.storybook/addons.js` + + import '@storybook/addon-actions/register'; + Import the `action` function and use it to create actions handlers. When creating action handlers, provide a **name** to make it easier to identify. > _Note: Make sure NOT to use reserved words as function names. [issues#29](https://github.com/storybooks/storybook-addon-actions/issues/29#issuecomment-288274794)_ diff --git a/addons/actions/package.json b/addons/actions/package.json index 1c59b48e4e5c..3e0c43141ac3 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "3.1.2", + "version": "3.1.8", "description": "Action Logger addon for storybook", "keywords": [ "storybook" @@ -21,11 +21,12 @@ "storybook": "start-storybook -p 9001" }, "dependencies": { - "@storybook/addons": "^3.1.2", + "@storybook/addons": "^3.1.6", "deep-equal": "^1.0.1", "json-stringify-safe": "^5.0.1", "prop-types": "^15.5.8", - "react-inspector": "^2.0.0" + "react-inspector": "^2.1.1", + "uuid": "^3.1.0" }, "devDependencies": { "react": "^15.5.4", diff --git a/addons/actions/src/preview.js b/addons/actions/src/preview.js index 0e8a0a85d7d2..fa722f3effe6 100644 --- a/addons/actions/src/preview.js +++ b/addons/actions/src/preview.js @@ -2,6 +2,7 @@ import addons from '@storybook/addons'; import stringify from 'json-stringify-safe'; +import uuid from 'uuid/v1'; import { EVENT_ID } from './'; function _format(arg) { @@ -16,9 +17,9 @@ export function action(name) { const handler = function(..._args) { const args = Array.from(_args).map(_format); const channel = addons.getChannel(); - const randomId = Math.random().toString(16).slice(2); + const id = uuid(); channel.emit(EVENT_ID, { - id: randomId, + id, data: { name, args }, }); }; @@ -29,7 +30,7 @@ export function action(name) { // the same. // // Ref: https://bocoup.com/weblog/whats-in-a-function-name - const fnName = name ? name.replace(/\W+/g, '_') : 'action'; + const fnName = name && typeof name === 'string' ? name.replace(/\W+/g, '_') : 'action'; // eslint-disable-next-line no-eval const named = eval(`(function ${fnName}() { return handler.apply(this, arguments) })`); return named; diff --git a/addons/actions/src/preview.test.js b/addons/actions/src/preview.test.js new file mode 100644 index 000000000000..be8154c2971a --- /dev/null +++ b/addons/actions/src/preview.test.js @@ -0,0 +1,27 @@ +import addons from '@storybook/addons'; +import uuid from 'uuid/v1'; +import { action } from './preview'; + +jest.mock('uuid/v1'); +jest.mock('@storybook/addons'); + +describe('preview', () => { + describe('action()', () => { + it('should use a uuid for action ids', () => { + const channel = { emit: jest.fn() }; + const uuidGenerator = (function*() { + yield '42'; + yield '24'; + })(); + uuid.mockImplementation(() => uuidGenerator.next().value); + addons.getChannel.mockReturnValue(channel); + const fn = action('foo'); + + fn(); + fn(); + expect(channel.emit).toHaveBeenCalledTimes(2); + expect(channel.emit.mock.calls[0][1].id).toBe('42'); + expect(channel.emit.mock.calls[1][1].id).toBe('24'); + }); + }); +}); diff --git a/addons/comments/package.json b/addons/comments/package.json index 977a06dc406a..8b9c26e5ac80 100644 --- a/addons/comments/package.json +++ b/addons/comments/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-comments", - "version": "3.1.2", + "version": "3.1.6", "description": "Comments addon for Storybook", "keywords": [ "storybook" @@ -23,7 +23,7 @@ "storybook-remote": "start-storybook -p 3006" }, "dependencies": { - "@storybook/addons": "^3.1.2", + "@storybook/addons": "^3.1.6", "babel-runtime": "^6.23.0", "deep-equal": "^1.0.1", "events": "^1.1.1", diff --git a/addons/events/package.json b/addons/events/package.json index 44397bcf5efe..e56d576f0ea1 100644 --- a/addons/events/package.json +++ b/addons/events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-events", - "version": "3.1.1", + "version": "3.1.6", "description": "Add events to your Storybook stories.", "keywords": [ "addon", @@ -20,7 +20,7 @@ "storybook": "start-storybook -p 6006" }, "dependencies": { - "@storybook/addons": "^3.1.1", + "@storybook/addons": "^3.1.6", "babel-runtime": "^6.5.0", "format-json": "^1.0.3", "prop-types": "^15.5.10", diff --git a/addons/events/src/components/Event.js b/addons/events/src/components/Event.js index 35c93f3d607c..df107a8b3b75 100644 --- a/addons/events/src/components/Event.js +++ b/addons/events/src/components/Event.js @@ -4,37 +4,64 @@ import Textarea from 'react-textarea-autosize'; import PropTypes from 'prop-types'; const styles = { - item: { - padding: '10 0', - }, - buttonWrapper: { - textAlign: 'center', + label: { + display: 'table-cell', + boxSizing: 'border-box', + verticalAlign: 'top', + paddingRight: '5px', + paddingTop: '7px', + textAlign: 'right', + width: '100px', + fontSize: '12px', + color: 'rgb(68, 68, 68)', + fontWeight: '600', }, button: { - display: 'inline-block', - fontFamily: ` - -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", - "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif - `, - fontSize: 14, - padding: 10, - margin: 10, - width: '40%', + display: 'table-cell', + textTransform: 'uppercase', + letterSpacing: '3.5px', + fontSize: 12, + fontWeight: 'bolder', + color: 'rgb(130, 130, 130)', + border: '1px solid rgb(193, 193, 193)', + textAlign: 'center', + borderRadius: 2, + padding: 5, + cursor: 'pointer', + paddingLeft: 8, + margin: '0 0 0 5px', + backgroundColor: 'inherit', + verticalAlign: 'top', + outline: 0, }, textArea: { - display: 'block', + flex: '1 0 0', boxSizing: 'border-box', - margin: 0, - width: '100%', - maxWidth: '100%', - verticalAlign: 'middle', + margin: '0 0 0 5px', + verticalAlign: 'top', outline: 'none', border: '1px solid #c7c7c7', borderRadius: 2, fontSize: 13, - padding: '5px', + padding: '8px 5px 7px 8px', color: 'rgb(51, 51, 51)', fontFamily: 'Arial, sans-serif', + minHeight: '32px', + resize: 'vertical', + }, + item: { + display: 'flex', + padding: '5px', + alignItems: 'flex-start', + boxSizing: 'border-box', + width: '100%', + }, + hidden: { + display: 'none', + }, + failed: { + border: '1px solid #fadddd', + backgroundColor: '#fff5f5', }, }; @@ -100,37 +127,44 @@ export default class Item extends Component { }; render() { + const { title, name } = this.props; const { failed, isTextAreaShowed } = this.state; - const extraStyle = { - display: isTextAreaShowed ? 'block' : 'none', - }; - if (failed) { - extraStyle.border = '1px solid #fadddd'; - extraStyle.backgroundColor = '#fff5f5'; - } + const extraStyle = {}; + Object.assign(extraStyle, isTextAreaShowed ? {} : { ...styles.hidden }); + Object.assign(extraStyle, failed ? { ...styles.failed } : {}); return ( -
-

{this.props.title}

-
- - -
- +
+ +