Merge pull request #4350 from storybooks/tech/ui-overhaul_master

Tech/ui overhaul master
storybookjs · Oct 11, 2018 · a7bbbfd · a7bbbfd
2 parents 8674a24 + d44fe07
commit a7bbbfd
Show file tree

Hide file tree

Showing 345 changed files with 9,577 additions and 17,897 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -37,6 +37,7 @@ jobs:
  paths:
  - node_modules
  - examples/angular-cli/node_modules
+ - examples/ember-cli/node_modules
  - examples/cra-kitchen-sink/node_modules
  - examples/mithril-kitchen-sink/node_modules
  - examples/official-storybook/node_modules
@@ -78,6 +79,11 @@ jobs:
  command: |
  cd examples/angular-cli
  yarn build-storybook
+ - run:
+ name: Build ember-cli
+ command: |
+ cd examples/ember-cli
+ yarn build-storybook
  - run:
  name: Build polymer-cli
  command: |
@@ -140,6 +146,11 @@ jobs:
  command: |
  cd examples/angular-cli
  yarn storybook --smoke-test
+ - run:
+ name: Run ember-cli (smoke test)
+ command: |
+ cd examples/ember-cli
+ yarn storybook --smoke-test
  - run:
  name: Run polymer-cli (smoke test)
  command: |
@@ -173,22 +184,12 @@ jobs:
  at: .
  - run:
  name: Bootstrap
- command: yarn bootstrap --reactnative --reactnativeapp
- - run:
- name: Run React-Native example
- command: |
- cd examples/react-native-vanilla
- yarn storybook --smoke-test
+ command: yarn bootstrap --reactnativeapp
  - run:
  name: Run React-Native-App example
  command: |
  cd examples/crna-kitchen-sink
  yarn storybook --smoke-test
- - run:
- name: Run React-Native unit tests
- command: |
- yarn test --coverage --runInBand --reactnative
- yarn coverage
  docs:
  <<: *defaults
  steps:
@@ -250,8 +251,6 @@ jobs:
  command: yarn coverage
  cli:
  <<: *defaults
- docker:
- - image: andthensome/docker-node-rsync
  environment:
  BASH_ENV: ~/.bashrc
  steps:
@@ -264,8 +263,6 @@ jobs:
  no_output_timeout: 1800
  cli-latest-cra:
  <<: *defaults
- docker:
- - image: andthensome/docker-node-rsync
  environment:
  BASH_ENV: ~/.bashrc
  steps:

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -31,7 +31,6 @@
 /examples/crna-kitchen-sink/ @Gongreg @danielduan
 /examples/official-storybook/ @hypnosphi @danielduan @UsulPro
 /examples/polymer-cli/ @naipath @igor-dv
-/examples/react-native-vanilla/ @tmeasday @danielduan
 /examples/vue-kitchen-sink/ @igor-dv @alexandrebodin
 /examples/svelte-kitchen-sink/ @plumpNation
 

diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_CliTest.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_CliTest.kt
@@ -26,12 +26,12 @@ object OpenSourceProjects_Storybook_CliTest : BuildType({
  yarn
  yarn bootstrap --core
  """.trimIndent()
- dockerImage = "andthensome/docker-node-rsync"
+ dockerImage = "node:%docker.node.version%"
  }
  script {
  name = "Test"
  scriptContent = "yarn test --cli"
- dockerImage = "andthensome/docker-node-rsync"
+ dockerImage = "node:%docker.node.version%"
  }
  }
 

diff --git a/.../OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_CliTestLatestCra.kt b/.../OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_CliTestLatestCra.kt
@@ -21,15 +21,17 @@ object OpenSourceProjects_Storybook_CliTestLatestCra : BuildType({
  script {
  name = "Bootstrap"
  scriptContent = """
+ set -e -x
+
  yarn
  yarn bootstrap --core
  """.trimIndent()
- dockerImage = "andthensome/docker-node-rsync"
+ dockerImage = "node:%docker.node.version%"
  }
  script {
  name = "Test"
  scriptContent = "yarn test-latest-cra"
- dockerImage = "andthensome/docker-node-rsync"
+ dockerImage = "node:%docker.node.version%"
  }
  }
 

diff --git a/...mcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_ReactNative.kt b/...mcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_ReactNative.kt
@@ -9,8 +9,6 @@ object OpenSourceProjects_Storybook_ReactNative : BuildType({
  id = "OpenSourceProjects_Storybook_ReactNative"
  name = "React Native"
 
- artifactRules = "examples/react-native-vanilla/coverage/lcov-report => coverage.zip"
-
  params {
  param("env.PUPPETEER_SKIP_CHROMIUM_DOWNLOAD", "true")
  }
@@ -26,15 +24,7 @@ object OpenSourceProjects_Storybook_ReactNative : BuildType({
  name = "Bootstrap"
  scriptContent = """
  yarn
- yarn bootstrap --core --reactnative --reactnativeapp
- """.trimIndent()
- dockerImage = "node:%docker.node.version%"
- }
- script {
- name = "react-native-vanilla"
- scriptContent = """
- cd examples/react-native-vanilla
- yarn storybook --smoke-test
+ yarn bootstrap --core --reactnativeapp
  """.trimIndent()
  dockerImage = "node:%docker.node.version%"
  }
@@ -46,14 +36,6 @@ object OpenSourceProjects_Storybook_ReactNative : BuildType({
  """.trimIndent()
  dockerImage = "node:%docker.node.version%"
  }
- script {
- name = "Test"
- scriptContent = """
- yarn test --reactnative --coverage --runInBand --teamcity
- yarn coverage
- """.trimIndent()
- dockerImage = "node:%docker.node.version%"
- }
  }
 
  features {

diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt
@@ -14,9 +14,10 @@ enum class StorybookApp(val appName: String, val exampleDir: String, val merged:
  MITHRIL("Mithril", "mithril-kitchen-sink"),
  HTML("HTML", "html-kitchen-sink"),
  MARKO("Marko", "marko-cli"),
- HYPERAPP("Hyperapp", "hyperapp-kitchen-sink", false),
  SVELTE("Svelte", "svelte-kitchen-sink"),
- RIOT("Riot", "riot-kitchen-sink");
+ RIOT("Riot", "riot-kitchen-sink"),
+ HYPERAPP("Hyperapp", "hyperapp-kitchen-sink", false),
+ EMBER("Ember", "ember-cli");
 
  val lowerName = appName.toLowerCase()
 

diff --git a/ADDONS_SUPPORT.md b/ADDONS_SUPPORT.md
@@ -1,19 +1,19 @@
 ## Addon / Framework Support Table
 
-| | [React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)| [Svelte](app/svelte)| [Riot](app/riot)|
-| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
-|[a11y](addons/a11y) |+| |+|+|+|+|+|+| | |
-|[actions](addons/actions) |+|+|+|+|+|+|+|+|+|+|
-|[backgrounds](addons/backgrounds) |+| |+|+|+|+|+|+|+|+|
-|[centered](addons/centered) |+| |+|+| |+|+| |+| |
-|[events](addons/events) |+| |+|+|+|+|+|+| | |
-|[graphql](addons/graphql) |+| | | | | | | | | |
-|[info](addons/info) |+| | | | | | | | | |
-|[jest](addons/jest) |+| | |+| | |+| | | |
-|[knobs](addons/knobs) |+|+|+|+|+|+|+|+|+|+|
-|[links](addons/links) |+|+|+|+|+|+|+| |+|+|
-|[notes](addons/notes) |+| |+|+|+|+|+| |+|+|
-|[options](addons/options) |+|+|+|+|+|+|+| |+|+|
-|[storyshots](addons/storyshots) |+|+|+|+| | |+| |+|+|
-|[storysource](addons/storysource)|+| |+|+|+|+|+|+|+|+|
-|[viewport](addons/viewport) |+| |+|+|+|+|+|+|+|+|
+| | [React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)| [Svelte](app/svelte)| [Riot](app/riot)| [Ember](app/ember)|
+| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
+|[a11y](addons/a11y) |+| |+|+|+|+|+|+| | |+|
+|[actions](addons/actions) |+|+|+|+|+|+|+|+|+|+|+|
+|[backgrounds](addons/backgrounds)|+| |+|+|+|+|+|+|+|+|+|
+|[centered](addons/centered) |+| |+|+| |+|+| |+| |+|
+|[events](addons/events) |+| |+|+|+|+|+|+| | |+|
+|[graphql](addons/graphql) |+| | | | | | | | | | |
+|[info](addons/info) |+| | | | | | | | | | |
+|[jest](addons/jest) |+| | |+| | |+| | | | |
+|[knobs](addons/knobs) |+|+|+|+|+|+|+|+|+|+|+|
+|[links](addons/links) |+|+|+|+|+|+|+| |+|+|+|
+|[notes](addons/notes) |+| |+|+|+|+|+| |+|+|+|
+|[options](addons/options) |+|+|+|+|+|+|+| |+|+|+|
+|[storyshots](addons/storyshots) |+|+|+|+| | |+| |+|+| |
+|[storysource](addons/storysource)|+| |+|+|+|+|+|+|+|+|+|
+|[viewport](addons/viewport) |+| |+|+|+|+|+|+|+|+|+|
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,20 @@
+# 4.0.0-alpha.24
+
+2018-October-04
+
+#### Features
+
+- Ember: add ember support [#4237](https://github.com/storybooks/storybook/pull/4237)
+- Riot: support the tagConstructor option [#4258](https://github.com/storybooks/storybook/pull/4258)
+- Presets: Add "addons" and "config" to preset extensions [#4240](https://github.com/storybooks/storybook/pull/4240)
+
+#### Bug Fixes
+
+- Webpack: Fix broken SVGs [#4260](https://github.com/storybooks/storybook/pull/4260)
+- Babel/minify: use `builtIns: false` [#4262](https://github.com/storybooks/storybook/pull/4262)
+- Addon-Notes: Fix how markdownOptions are passed to marked [#4242](https://github.com/storybooks/storybook/pull/4242)
+- Addon-Knobs: Fix broken colorpicker [#4222](https://github.com/storybooks/storybook/pull/4222)
+
 # 4.0.0-alpha.23
 
 2018-September-25

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -60,13 +60,6 @@ You can also pick suites from CLI. Suites available are listed below.
 This option executes test from `<rootdir>/app/react`, `<rootdir>/app/vue`, and `<rootdir>/lib`.
 Before the tests are ran, the project must be bootstrapped with core. You can accomplish this with `yarn bootstrap --core`
 
-##### React-Native example Tests
-
-`yarn test --reactnative`
-
-This option executes tests from `<rootdir>/app/react-native`.
-Before these tests are ran, the project must be bootstrapped with the React Native example enabled. You can accomplish this by running `yarn bootstrap --reactnative`
-
 ##### CRA-kitchen-sink - Image snapshots using Storyshots
 
 `yarn test --image`

diff --git a/MIGRATION.md b/MIGRATION.md
@@ -5,10 +5,13 @@
 - [From version 3.4.x to 4.0.x](#from-version-34x-to-40x)
  - [Keyboard shortcuts moved](#keyboard-shortcuts-moved)
  - [Removed addWithInfo](#removed-add-with-info)
+ - [Removed RN packager](#removed-rn-packager)
  - [Removed RN addons](#removed-rn-addons)
  - [Storyshots changes](#storyshots-changes)
  - [Webpack 4](#webpack-4)
  - [Babel 7](#babel-7)
+ - [Create-react-app](#create-react-app)
+ - [CLI rename](#cli-rename)
 - [From version 3.3.x to 3.4.x](#from-version-33x-to-34x)
 - [From version 3.2.x to 3.3.x](#from-version-32x-to-33x)
  - [Refactored Knobs](#refactored-knobs)
@@ -24,9 +27,9 @@
  - [Packages renaming](#packages-renaming)
  - [Deprecated embedded addons](#deprecated-embedded-addons)
 
-## From 3.4.x to 4.0
+## From version 3.4.x to 4.0.x
 
-With 4.0 as our first major release in over a year, we've collected a lot of cleanup tasks. All deprecations have been marked for months, so we hope that there will be no significant impact on your project.
+With 4.0 as our first major release in over a year, we've collected a lot of cleanup tasks. Most of the deprecations have been marked for months, so we hope that there will be no significant impact on your project.
 
 ### Generic addons
 
@@ -57,6 +60,14 @@ import { number } from "@storybook/addon-knobs";
 
 `Addon-info`'s `addWithInfo` has been marked deprecated since 3.2. In 4.0 we've removed it completely. See the package [README](https://github.com/storybooks/storybook/blob/master/addons/info/README.md) for the proper usage.
 
+### Removed RN packager
+
+Since storybook version v4.0 packager is removed from storybook. The suggested storybook usage is to include it inside your app.
+If you want to keep the old behaviour, you have to start the packager yourself with a different project root.
+`npm run storybook start -p 7007 | react-native start --projectRoot storybook`
+
+Removed cli options: `--packager-port --root --projectRoots -r, --reset-cache --skip-packager --haul --platform --metro-config`
+
 ### Removed RN addons
 
 The `@storybook/react-native` had built-in addons (`addon-actions` and `addon-links`) that have been marked as deprecated since 3.x. They have been fully removed in 4.x. If your project still uses the built-ins, you'll need to add explicit dependencies on `@storybook/addon-actions` and/or `@storybook/addon-links` and import directly from those packages.
@@ -82,16 +93,56 @@ Storybook now uses webpack 4. If you have a [custom webpack config](https://stor
 
 Storybook now uses Babel 7. There's a couple of cases when it can break with your app:
 
-* If you aren't using Babel yourself, and don't have .babelrc, install following dependencies:
+- If you aren't using Babel yourself, and don't have .babelrc, install following dependencies:
  ```
  npm i -D @babel/core babel-loader@next
  ```
-* If you're using Babel 6, make sure that you have direct dependencies on `babel-core@6` and `babel-loader@7`.
+- If you're using Babel 6, make sure that you have direct dependencies on `babel-core@6` and `babel-loader@7` and that you have a `.babelrc` in your project directory.
+
+### Create-react-app
+
+If you are using `create-react-app` (aka CRA), you may need to do some manual steps to upgrade, depending on the setup.
+
+- `create-react-app@1` may require manual migrations.
+ - If you're adding storybook for the first time, it should just work: `storybook init` should add the correct dependencies.
+ - If you've upgrading an existing project, your `package.json` probably already uses Babel 6, making it incompatible with `@storybook/react@4` which uses Babel 7. There are two ways to make it compatible, each of which is spelled out in detail in the next section:
+ - Upgrade to Babel 7 if you are not dependent on Babel 6-specific features.
+ - Migrate Babel 6 if you're heavily dependent on some Babel 6-specific features).
+- `create-react-app@2` should be compatible as is, since it uses babel 7.
+
+#### Upgrade CRA1 to babel 7
+
+```
+yarn remove babel-core babel-runtime
+yarn add @babel/core babel-loader --dev
+```
+
+#### Migrate CRA1 while keeping babel 6
+
+```
+yarn add babel-loader@7
+```
+
+Also make sure you have a `.babelrc` in your project directory. You probably already do if you are using Babel 6 features (otherwise you should consider upgrading to Babel 7 instead). If you don't have one, here's a simple one that works:
+
+```json
+{
+ "presets": ["env", "react"]
+}
+```
 
 ### start-storybook opens browser automatically
 
 If you're using `start-storybook` on CI, you may need to opt out of this using the new `--ci` flag.
 
+### CLI Rename
+
+We've deprecated the `getstorybook` CLI in 4.0. The new way to install storybook is `sb init`. We recommend using `npx` for convenience and to make sure you're always using the latest version of the CLI:
+
+```
+npx -p @storybook/cli sb init
+```
+
 ## From version 3.3.x to 3.4.x
 
 There are no expected breaking changes in the 3.4.x release, but 3.4 contains a major refactor to make it easier to support new frameworks, and we will document any breaking changes here if they arise.