mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-08 11:11:53 +08:00
Merge remote-tracking branch 'origin/master' into core/presets
This commit is contained in:
igor-dv
commit
9ddb5a288a
@ -1,9 +1,11 @@
|
||||
defaults: &defaults
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
- image: circleci/node:8
|
||||
|
||||
version: 2
|
||||
|
||||
aliases:
|
||||
- &defaults
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
- image: circleci/node:8
|
||||
|
||||
dependencies:
|
||||
pre:
|
||||
- yarn global add npm
|
||||
@ -13,24 +15,25 @@ jobs:
|
||||
steps:
|
||||
- checkout
|
||||
- restore_cache:
|
||||
name: "Restore core dependencies cache"
|
||||
name: Restore core dependencies cache
|
||||
keys:
|
||||
- core-dependencies-{{ checksum "yarn.lock" }}
|
||||
- core-dependencies-v3-{{ checksum "yarn.lock" }}
|
||||
- run:
|
||||
name: "Install dependencies"
|
||||
command: |
|
||||
yarn install
|
||||
name: Install dependencies
|
||||
command: yarn install
|
||||
- run:
|
||||
name: "Dirty check"
|
||||
command: |
|
||||
yarn repo-dirty-check
|
||||
name: Check that yarn.lock is not corrupted
|
||||
command: yarn repo-dirty-check
|
||||
- run:
|
||||
name: "Bootstrap"
|
||||
command: |
|
||||
yarn bootstrap --core
|
||||
name: Bootstrap
|
||||
command: yarn bootstrap --core
|
||||
- save_cache:
|
||||
name: "Cache core dependencies"
|
||||
key: core-dependencies-v2-{{ checksum "yarn.lock" }}
|
||||
name: Cache core dependencies
|
||||
key: core-dependencies-v3-{{ checksum "yarn.lock" }}
|
||||
paths:
|
||||
- ~/.cache/yarn
|
||||
- persist_to_workspace:
|
||||
root: .
|
||||
paths:
|
||||
- node_modules
|
||||
- examples/angular-cli/node_modules
|
||||
@ -41,10 +44,8 @@ jobs:
|
||||
- examples/vue-kitchen-sink/node_modules
|
||||
- examples/svelte-kitchen-sink/node_modules
|
||||
- examples/marko-cli/node_modules
|
||||
- save_cache:
|
||||
name: "Cache core dist"
|
||||
key: core-dist-v2-{{ .Revision }}
|
||||
paths:
|
||||
- examples/html-kitchen-sink/node_modules
|
||||
- examples/riot-kitchen-sink/node_modules
|
||||
- addons
|
||||
- app
|
||||
- lib
|
||||
@ -52,59 +53,63 @@ jobs:
|
||||
<<: *defaults
|
||||
steps:
|
||||
- checkout
|
||||
- restore_cache:
|
||||
name: "Restore core dependencies cache"
|
||||
keys:
|
||||
- core-dependencies-v2-{{ checksum "yarn.lock" }}
|
||||
- restore_cache:
|
||||
name: "Restore core dist cache"
|
||||
keys:
|
||||
- core-dist-v2-{{ .Revision }}
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: Workaround for https://github.com/GoogleChrome/puppeteer/issues/290
|
||||
command: sh ./scripts/workaround-puppeteer-issue-290.sh
|
||||
- run:
|
||||
name: "Build react kitchen-sink"
|
||||
name: Build react kitchen-sink
|
||||
command: |
|
||||
cd examples/cra-kitchen-sink
|
||||
yarn build-storybook
|
||||
- run:
|
||||
name: "Build vue kitchen-sink"
|
||||
name: Build vue kitchen-sink
|
||||
command: |
|
||||
cd examples/vue-kitchen-sink
|
||||
yarn build-storybook
|
||||
- run:
|
||||
name: "Build svelte kitchen-sink"
|
||||
name: Build svelte kitchen-sink
|
||||
command: |
|
||||
cd examples/svelte-kitchen-sink
|
||||
yarn build-storybook
|
||||
- run:
|
||||
name: "Build angular-cli"
|
||||
name: Build angular-cli
|
||||
command: |
|
||||
cd examples/angular-cli
|
||||
yarn build-storybook
|
||||
- run:
|
||||
name: "Build polymer-cli"
|
||||
name: Build polymer-cli
|
||||
command: |
|
||||
cd examples/polymer-cli
|
||||
yarn build-storybook
|
||||
- run:
|
||||
name: "Build marko-cli"
|
||||
name: Build marko-cli
|
||||
command: |
|
||||
cd examples/marko-cli
|
||||
yarn build-storybook
|
||||
- run:
|
||||
name: "Build official-storybook"
|
||||
command: |
|
||||
cd examples/official-storybook
|
||||
yarn build-storybook
|
||||
- run:
|
||||
name: "Build mithril kitchen-sink"
|
||||
name: Build mithril kitchen-sink
|
||||
command: |
|
||||
cd examples/mithril-kitchen-sink
|
||||
yarn build-storybook
|
||||
- run:
|
||||
name: "Run image snapshots"
|
||||
name: Build html kitchen-sink
|
||||
command: |
|
||||
cd examples/html-kitchen-sink
|
||||
yarn build-storybook
|
||||
- run:
|
||||
name: Build riot kitchen-sink
|
||||
command: |
|
||||
cd examples/riot-kitchen-sink
|
||||
yarn build-storybook
|
||||
- run:
|
||||
name: Build official-storybook
|
||||
command: |
|
||||
cd examples/official-storybook
|
||||
yarn build-storybook
|
||||
- run:
|
||||
name: Run image snapshots
|
||||
command: yarn test --image
|
||||
- store_artifacts:
|
||||
path: examples/official-storybook/image-snapshots/__image_snapshots__
|
||||
@ -113,78 +118,74 @@ jobs:
|
||||
<<: *defaults
|
||||
steps:
|
||||
- checkout
|
||||
- restore_cache:
|
||||
name: "Restore core dependencies cache"
|
||||
keys:
|
||||
- core-dependencies-v2-{{ checksum "yarn.lock" }}
|
||||
- restore_cache:
|
||||
name: "Restore core dist cache"
|
||||
keys:
|
||||
- core-dist-v2-{{ .Revision }}
|
||||
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: "Run react kitchen-sink (smoke test)"
|
||||
name: Run react kitchen-sink (smoke test)
|
||||
command: |
|
||||
cd examples/cra-kitchen-sink
|
||||
yarn storybook --smoke-test
|
||||
- run:
|
||||
name: "Run vue kitchen-sink (smoke test)"
|
||||
name: Run vue kitchen-sink (smoke test)
|
||||
command: |
|
||||
cd examples/vue-kitchen-sink
|
||||
yarn storybook --smoke-test
|
||||
- run:
|
||||
name: "Run svelte kitchen-sink (smoke test)"
|
||||
name: Run svelte kitchen-sink (smoke test)
|
||||
command: |
|
||||
cd examples/svelte-kitchen-sink
|
||||
yarn storybook --smoke-test
|
||||
- run:
|
||||
name: "Run angular-cli (smoke test)"
|
||||
name: Run angular-cli (smoke test)
|
||||
command: |
|
||||
cd examples/angular-cli
|
||||
yarn storybook --smoke-test
|
||||
- run:
|
||||
name: "Run polymer-cli (smoke test)"
|
||||
name: Run polymer-cli (smoke test)
|
||||
command: |
|
||||
cd examples/polymer-cli
|
||||
yarn storybook --smoke-test
|
||||
- run:
|
||||
name: "Run official-storybook (smoke test)"
|
||||
name: Run marko-cli (smoke test)
|
||||
command: |
|
||||
cd examples/marko-cli
|
||||
yarn storybook --smoke-test
|
||||
- run:
|
||||
name: Run official-storybook (smoke test)
|
||||
command: |
|
||||
cd examples/official-storybook
|
||||
yarn storybook --smoke-test
|
||||
- run:
|
||||
name: "Run mithril kitchen-sink (smoke test)"
|
||||
name: Run mithril kitchen-sink (smoke test)
|
||||
command: |
|
||||
cd examples/mithril-kitchen-sink
|
||||
yarn storybook --smoke-test
|
||||
- run:
|
||||
name: Run riot kitchen-sink (smoke test)
|
||||
command: |
|
||||
cd examples/riot-kitchen-sink
|
||||
yarn storybook --smoke-test
|
||||
react-native:
|
||||
<<: *defaults
|
||||
steps:
|
||||
- checkout
|
||||
- restore_cache:
|
||||
name: "Restore core dependencies cache"
|
||||
keys:
|
||||
- core-dependencies-v2-{{ checksum "yarn.lock" }}
|
||||
- restore_cache:
|
||||
name: "Restore core dist cache"
|
||||
keys:
|
||||
- core-dist-v2-{{ .Revision }}
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: "Bootstrap"
|
||||
command: |
|
||||
yarn bootstrap --reactnative --reactnativeapp
|
||||
name: Bootstrap
|
||||
command: yarn bootstrap --reactnative --reactnativeapp
|
||||
- run:
|
||||
name: "Run React-Native example"
|
||||
name: Run React-Native example
|
||||
command: |
|
||||
cd examples/react-native-vanilla
|
||||
yarn storybook --smoke-test
|
||||
- run:
|
||||
name: "Run React-Native-App example"
|
||||
name: Run React-Native-App example
|
||||
command: |
|
||||
cd examples/crna-kitchen-sink
|
||||
yarn storybook --smoke-test
|
||||
- run:
|
||||
name: "Run React-Native unit tests"
|
||||
name: Run React-Native unit tests
|
||||
command: |
|
||||
yarn test --coverage --runInBand --reactnative
|
||||
yarn coverage
|
||||
@ -193,124 +194,98 @@ jobs:
|
||||
steps:
|
||||
- checkout
|
||||
- restore_cache:
|
||||
name: "Restore dependencies cache"
|
||||
name: Restore docs dependencies cache
|
||||
keys:
|
||||
- docs-dependencies-{{ checksum "docs/yarn.lock" }}
|
||||
- docs-dependencies-v2-{{ checksum "docs/yarn.lock" }}
|
||||
- run:
|
||||
name: "Install dependencies"
|
||||
name: Install dependencies
|
||||
command: |
|
||||
cd docs
|
||||
yarn install --frozen-lockfile
|
||||
yarn install
|
||||
- run:
|
||||
name: "Build docs"
|
||||
name: Build docs
|
||||
command: |
|
||||
cd docs
|
||||
yarn build
|
||||
- save_cache:
|
||||
name: "Cache dependencies"
|
||||
key: docs-dependencies-{{ checksum "docs/yarn.lock" }}
|
||||
name: Cache docs dependencies
|
||||
key: docs-dependencies-v2-{{ checksum "docs/yarn.lock" }}
|
||||
paths:
|
||||
- docs/node_modules
|
||||
- save_cache:
|
||||
name: "Cache built docs"
|
||||
key: built-docs-{{ .Revision }}
|
||||
- ~/.cache/yarn
|
||||
- persist_to_workspace:
|
||||
root: .
|
||||
paths:
|
||||
- docs/public
|
||||
- docs/node_modules
|
||||
lint:
|
||||
<<: *defaults
|
||||
steps:
|
||||
- checkout
|
||||
- restore_cache:
|
||||
name: "Restore core dependencies cache"
|
||||
keys:
|
||||
- core-dependencies-v2-{{ checksum "yarn.lock" }}
|
||||
- restore_cache:
|
||||
name: "Restore docs dependencies cache"
|
||||
keys:
|
||||
- docs-dependencies-{{ checksum "docs/yarn.lock" }}
|
||||
- restore_cache:
|
||||
name: "Restore core dist cache"
|
||||
keys:
|
||||
- core-dist-v2-{{ .Revision }}
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: "Lint"
|
||||
command: |
|
||||
yarn lint
|
||||
name: Lint
|
||||
command: yarn lint
|
||||
unit-test:
|
||||
<<: *defaults
|
||||
steps:
|
||||
- checkout
|
||||
- restore_cache:
|
||||
name: "Restore core dependencies cache"
|
||||
keys:
|
||||
- core-dependencies-v2-{{ checksum "yarn.lock" }}
|
||||
- restore_cache:
|
||||
name: "Restore core dist cache"
|
||||
keys:
|
||||
- core-dist-v2-{{ .Revision }}
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: "Run unit tests"
|
||||
command: |
|
||||
yarn test --coverage --runInBand --core
|
||||
yarn coverage
|
||||
name: Test
|
||||
command: yarn test --coverage --runInBand --core
|
||||
- persist_to_workspace:
|
||||
root: .
|
||||
paths:
|
||||
- coverage
|
||||
coverage:
|
||||
<<: *defaults
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: Upload coverage
|
||||
command: yarn coverage
|
||||
cli:
|
||||
working_directory: /tmp/storybook
|
||||
<<: *defaults
|
||||
docker:
|
||||
- image: andthensome/docker-node-rsync
|
||||
environment:
|
||||
BASH_ENV: ~/.bashrc
|
||||
steps:
|
||||
- checkout
|
||||
- restore_cache:
|
||||
name: "Restore core dependencies cache"
|
||||
keys:
|
||||
- core-dependencies-v2-{{ checksum "yarn.lock" }}
|
||||
- restore_cache:
|
||||
name: "Restore core dist cache"
|
||||
keys:
|
||||
- core-dist-v2-{{ .Revision }}
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: "Test CLI"
|
||||
command: |
|
||||
yarn test --cli
|
||||
name: Test
|
||||
command: yarn test --cli
|
||||
no_output_timeout: 1800
|
||||
cli-latest-cra:
|
||||
working_directory: /tmp/storybook
|
||||
<<: *defaults
|
||||
docker:
|
||||
- image: andthensome/docker-node-rsync
|
||||
environment:
|
||||
BASH_ENV: ~/.bashrc
|
||||
steps:
|
||||
- checkout
|
||||
- restore_cache:
|
||||
name: "Restore core dependencies cache"
|
||||
keys:
|
||||
- core-dependencies-v2-{{ checksum "yarn.lock" }}
|
||||
- restore_cache:
|
||||
name: "Restore core dist cache"
|
||||
keys:
|
||||
- core-dist-v2-{{ .Revision }}
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: "Test CLI with latest CR(N)A"
|
||||
command: |
|
||||
yarn test-latest-cra
|
||||
name: Test CLI with latest CR(N)A
|
||||
command: yarn test-latest-cra
|
||||
deploy:
|
||||
<<: *defaults
|
||||
steps:
|
||||
- checkout
|
||||
- restore_cache:
|
||||
name: "Restore docs dependencies cache"
|
||||
keys:
|
||||
- docs-dependencies-{{ checksum "docs/yarn.lock" }}
|
||||
- restore_cache:
|
||||
name: "Restore built docs"
|
||||
keys:
|
||||
- built-docs-{{ .Revision }}
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- add_ssh_keys:
|
||||
fingerprints:
|
||||
- "35:aa:b9:c3:b8:1c:27:1f:02:0a:73:1a:ac:58:77:df"
|
||||
- run:
|
||||
name: "Deploy"
|
||||
name: Deploy
|
||||
command: |
|
||||
cd docs
|
||||
git config --global user.email "gh-pages@localhost"
|
||||
@ -318,9 +293,14 @@ jobs:
|
||||
yarn deploy:ci
|
||||
workflows:
|
||||
version: 2
|
||||
build_accept_deploy:
|
||||
build_test_deploy:
|
||||
jobs:
|
||||
- build
|
||||
- docs
|
||||
- lint:
|
||||
requires:
|
||||
- docs
|
||||
- build
|
||||
- example-kitchen-sinks:
|
||||
requires:
|
||||
- build
|
||||
@ -330,14 +310,12 @@ workflows:
|
||||
- react-native:
|
||||
requires:
|
||||
- build
|
||||
- docs
|
||||
- lint:
|
||||
requires:
|
||||
- docs
|
||||
- build
|
||||
- unit-test:
|
||||
requires:
|
||||
- build
|
||||
- coverage:
|
||||
requires:
|
||||
- unit-test
|
||||
- cli:
|
||||
requires:
|
||||
- build
|
||||
@ -348,6 +326,7 @@ workflows:
|
||||
requires:
|
||||
- docs
|
||||
filters:
|
||||
tags:
|
||||
only: /^v[0-9]+\.[0-9]+\.[0-9]+/
|
||||
branches:
|
||||
only:
|
||||
- release/3.4
|
||||
ignore: /.*/
|
||||
|
||||
1
.github/stale.yml
vendored
1
.github/stale.yml
vendored
@ -10,6 +10,7 @@ exemptLabels:
|
||||
- 'do not merge'
|
||||
- 'needs review'
|
||||
- 'high priority'
|
||||
- 'good first issue'
|
||||
- dependencies:update
|
||||
|
||||
# Label to use when marking an issue as stale
|
||||
|
||||
@ -118,8 +118,10 @@ object Project : Project({
|
||||
]
|
||||
""".trimIndent())
|
||||
param("format", "duration")
|
||||
param("title", "New chart title")
|
||||
param("seriesTitle", "Serie")
|
||||
param("hideFilters", "")
|
||||
param("title", "Build Duration (all stages)")
|
||||
param("defaultFilters", "")
|
||||
}
|
||||
feature {
|
||||
type = "project-graphs"
|
||||
@ -136,11 +138,11 @@ object Project : Project({
|
||||
""".trimIndent())
|
||||
param("format", "percent")
|
||||
param("hideFilters", "")
|
||||
param("title", "New chart title")
|
||||
param("title", "Covered Percentage of JS Lines")
|
||||
param("defaultFilters", "")
|
||||
param("seriesTitle", "Serie")
|
||||
}
|
||||
feature {
|
||||
feature {
|
||||
type = "project-graphs"
|
||||
id = "PROJECT_EXT_308"
|
||||
param("series", """
|
||||
@ -154,7 +156,26 @@ feature {
|
||||
]
|
||||
""".trimIndent())
|
||||
param("format", "integer")
|
||||
param("title", "New chart title")
|
||||
param("seriesTitle", "Serie")
|
||||
param("hideFilters", "")
|
||||
param("title", "Total Number of JS Statements")
|
||||
param("defaultFilters", "")
|
||||
}
|
||||
feature {
|
||||
type = "project-graphs"
|
||||
id = "PROJECT_EXT_117"
|
||||
param("series", """
|
||||
[
|
||||
{
|
||||
"type": "valueType",
|
||||
"title": "Total Artifacts Size",
|
||||
"sourceBuildTypeId": "OpenSourceProjects_Storybook_CliTestLatestCra",
|
||||
"key": "ArtifactsSize"
|
||||
}
|
||||
]
|
||||
""".trimIndent())
|
||||
param("format", "text")
|
||||
param("title", "Total Artifacts Size")
|
||||
param("seriesTitle", "Serie")
|
||||
}
|
||||
feature {
|
||||
|
||||
@ -37,6 +37,7 @@ object OpenSourceProjects_Storybook_Build_2 : BuildType({
|
||||
}
|
||||
retryBuild {
|
||||
delaySeconds = 60
|
||||
enabled = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -4,6 +4,7 @@ import jetbrains.buildServer.configs.kotlin.v2017_2.*
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.buildFeatures.commitStatusPublisher
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.buildSteps.script
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.vcs
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.retryBuild
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.VcsTrigger
|
||||
|
||||
object OpenSourceProjects_Storybook_CliTest : BuildType({
|
||||
@ -36,7 +37,14 @@ object OpenSourceProjects_Storybook_CliTest : BuildType({
|
||||
vcs {
|
||||
quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
|
||||
triggerRules = "-:comment=^TeamCity change:**"
|
||||
branchFilter = """
|
||||
+:pull/*
|
||||
+:release/*
|
||||
+:master
|
||||
+:dependencies.io-*
|
||||
""".trimIndent()
|
||||
}
|
||||
retryBuild {}
|
||||
}
|
||||
|
||||
features {
|
||||
|
||||
@ -15,7 +15,8 @@ enum class StorybookApp(val appName: String, val exampleDir: String, val merged:
|
||||
HTML("HTML", "html-kitchen-sink"),
|
||||
MARKO("Marko", "marko-cli"),
|
||||
HYPERAPP("Hyperapp", "hyperapp-kitchen-sink", false),
|
||||
SVELTE("Svelte", "svelte-kitchen-sink");
|
||||
SVELTE("Svelte", "svelte-kitchen-sink"),
|
||||
RIOT("Riot", "riot-kitchen-sink");
|
||||
|
||||
val lowerName = appName.toLowerCase()
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
package OpenSourceProjects_Storybook.patches.buildTypes
|
||||
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.*
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.RetryBuildTrigger
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.retryBuild
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
|
||||
|
||||
/*
|
||||
This patch script was generated by TeamCity on settings change in UI.
|
||||
To apply the patch, change the buildType with uuid = '2b9c73e2-0a6e-47ca-95ae-729cac42be2b' (id = 'OpenSourceProjects_Storybook_Build_2')
|
||||
accordingly, and delete the patch script.
|
||||
*/
|
||||
changeBuildType("2b9c73e2-0a6e-47ca-95ae-729cac42be2b") {
|
||||
triggers {
|
||||
val trigger1 = find<RetryBuildTrigger> {
|
||||
retryBuild {
|
||||
delaySeconds = 60
|
||||
}
|
||||
}
|
||||
trigger1.apply {
|
||||
enabled = false
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,107 +0,0 @@
|
||||
package OpenSourceProjects_Storybook.patches.projects
|
||||
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.*
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.Project
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.ProjectFeature
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
|
||||
|
||||
/*
|
||||
This patch script was generated by TeamCity on settings change in UI.
|
||||
To apply the patch, change the project with uuid = '69382d9b-7791-418a-9ff6-1c83b86ed6b5' (id = 'OpenSourceProjects_Storybook')
|
||||
accordingly, and delete the patch script.
|
||||
*/
|
||||
changeProject("69382d9b-7791-418a-9ff6-1c83b86ed6b5") {
|
||||
features {
|
||||
val feature1 = find<ProjectFeature> {
|
||||
feature {
|
||||
type = "project-graphs"
|
||||
id = "PROJECT_EXT_306"
|
||||
param("format", "duration")
|
||||
param("series", """
|
||||
[
|
||||
{
|
||||
"type": "valueType",
|
||||
"title": "Build Duration (all stages)",
|
||||
"sourceBuildTypeId": "OpenSourceProjects_Storybook_Build_2",
|
||||
"key": "BuildDuration"
|
||||
}
|
||||
]
|
||||
""".trimIndent())
|
||||
param("seriesTitle", "Serie")
|
||||
param("title", "New chart title")
|
||||
}
|
||||
}
|
||||
feature1.apply {
|
||||
param("hideFilters", "")
|
||||
param("title", "Build Duration (all stages)")
|
||||
param("defaultFilters", "")
|
||||
}
|
||||
val feature2 = find<ProjectFeature> {
|
||||
feature {
|
||||
type = "project-graphs"
|
||||
id = "PROJECT_EXT_307"
|
||||
param("defaultFilters", "")
|
||||
param("format", "percent")
|
||||
param("hideFilters", "")
|
||||
param("series", """
|
||||
[
|
||||
{
|
||||
"type": "valueType",
|
||||
"title": "Covered Percentage of JS Lines",
|
||||
"sourceBuildTypeId": "OpenSourceProjects_Storybook_Test",
|
||||
"key": "Covered Percentage of JS Lines"
|
||||
}
|
||||
]
|
||||
""".trimIndent())
|
||||
param("seriesTitle", "Serie")
|
||||
param("title", "New chart title")
|
||||
}
|
||||
}
|
||||
feature2.apply {
|
||||
param("title", "Covered Percentage of JS Lines")
|
||||
}
|
||||
val feature3 = find<ProjectFeature> {
|
||||
feature {
|
||||
type = "project-graphs"
|
||||
id = "PROJECT_EXT_308"
|
||||
param("format", "integer")
|
||||
param("series", """
|
||||
[
|
||||
{
|
||||
"type": "valueType",
|
||||
"title": "Total Number of JS Statements",
|
||||
"sourceBuildTypeId": "OpenSourceProjects_Storybook_Test",
|
||||
"key": "Total Number of JS Statements"
|
||||
}
|
||||
]
|
||||
""".trimIndent())
|
||||
param("seriesTitle", "Serie")
|
||||
param("title", "New chart title")
|
||||
}
|
||||
}
|
||||
feature3.apply {
|
||||
param("hideFilters", "")
|
||||
param("title", "Total Number of JS Statements")
|
||||
param("defaultFilters", "")
|
||||
}
|
||||
add {
|
||||
feature {
|
||||
type = "project-graphs"
|
||||
id = "PROJECT_EXT_117"
|
||||
param("series", """
|
||||
[
|
||||
{
|
||||
"type": "valueType",
|
||||
"title": "Total Artifacts Size",
|
||||
"sourceBuildTypeId": "OpenSourceProjects_Storybook_CliTestLatestCra",
|
||||
"key": "ArtifactsSize"
|
||||
}
|
||||
]
|
||||
""".trimIndent())
|
||||
param("format", "text")
|
||||
param("title", "Total Artifacts Size")
|
||||
param("seriesTitle", "Serie")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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)|
|
||||
| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
|
||||
|[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) |+| |+|+|+|+|+|+|+|
|
||||
## 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) |+| |+|+|+|+|+|+|+|+|
|
||||
|
||||
78
CHANGELOG.md
78
CHANGELOG.md
@ -1,3 +1,81 @@
|
||||
# 4.0.0-alpha.20
|
||||
|
||||
2018-August-31
|
||||
|
||||
#### Breaking Changes
|
||||
|
||||
- Use `babelrc: false` only for custom config in `.storybook` directory [#4077](https://github.com/storybooks/storybook/pull/4077)
|
||||
|
||||
#### Features
|
||||
|
||||
- Riot support [#4070](https://github.com/storybooks/storybook/pull/4070)
|
||||
- Backgrounds addon: Allow setting background via name [#4081](https://github.com/storybooks/storybook/pull/4081)
|
||||
- Storysource addon: injectDecorator option custom stories [#4012](https://github.com/storybooks/storybook/pull/4012)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Disabled import for TabWrapper [#4100](https://github.com/storybooks/storybook/pull/4100)
|
||||
- Angular cli with projects assets: root dir not correctly used [#4058](https://github.com/storybooks/storybook/pull/4058)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Do not stale "good first issue" [#4092](https://github.com/storybooks/storybook/pull/4092)
|
||||
- Remove danger from circleci because it's not working for forked PRs [#4080](https://github.com/storybooks/storybook/pull/4080)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
- UPGRADE packages [#3996](https://github.com/storybooks/storybook/pull/3996)
|
||||
|
||||
# 4.0.0-alpha.19
|
||||
|
||||
2018-August-31
|
||||
|
||||
Not published to NPM
|
||||
|
||||
# 4.0.0-alpha.18
|
||||
|
||||
2018-August-25
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Add missing `@babel/plugin-proposal-class-properties` dependency [#4076](https://github.com/storybooks/storybook/pull/4076)
|
||||
- Don't display wrong warning when loading ".js" or ".json" [#4060](https://github.com/storybooks/storybook/pull/4060)
|
||||
- Fix autodetection of used components in info addon [#4004](https://github.com/storybooks/storybook/pull/4004)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Faster CircleCI [#4068](https://github.com/storybooks/storybook/pull/4068)
|
||||
|
||||
# 4.0.0-alpha.17
|
||||
|
||||
2018-August-24
|
||||
|
||||
#### Breaking Changes
|
||||
|
||||
- Babel 7 [#3746](https://github.com/storybooks/storybook/pull/3746)
|
||||
|
||||
#### Features
|
||||
|
||||
- Emit messages when stories fail to render [#3967](https://github.com/storybooks/storybook/pull/3967)
|
||||
- Svelte support [#3770](https://github.com/storybooks/storybook/pull/3770)
|
||||
- Allow extending extensions without a full control mode [#3976](https://github.com/storybooks/storybook/pull/3976)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Storyshots puppeteer images do not match [#4045](https://github.com/storybooks/storybook/pull/4045)
|
||||
- Storyshots puppeteer images do not match [#4037](https://github.com/storybooks/storybook/pull/4037)
|
||||
- Bring .jsx back [#4024](https://github.com/storybooks/storybook/pull/4024)
|
||||
- Fix custom webpack config warnings [#4009](https://github.com/storybooks/storybook/pull/4009)
|
||||
- sorting by kind and nested stories [#3963](https://github.com/storybooks/storybook/pull/3963)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Temp revert the 36a2676 [#4062](https://github.com/storybooks/storybook/pull/4062)
|
||||
- Remove deprecation of --db-path and --enable-db [#4030](https://github.com/storybooks/storybook/pull/4030)
|
||||
- Remove git info extraction [#4031](https://github.com/storybooks/storybook/pull/4031)
|
||||
- Fixed homepage links [skip ci] [#4008](https://github.com/storybooks/storybook/pull/4008)
|
||||
- CHANGE html-webpack-plugin for generate-page-plugin [#3919](https://github.com/storybooks/storybook/pull/3919)
|
||||
|
||||
# 4.0.0-alpha.16
|
||||
|
||||
2018-August-06
|
||||
|
||||
@ -53,7 +53,7 @@ You can use the `--update` flag to update snapshots or screenshots as needed.
|
||||
|
||||
You can also pick suites from CLI. Suites available are listed below.
|
||||
|
||||
##### Core & React & Vue & Svelte Tests
|
||||
##### Core & Examples Tests
|
||||
|
||||
`yarn test --core`
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
[](https://bettercodehub.com/results/storybooks/storybook)
|
||||
[](https://codecov.io/gh/storybooks/storybook)
|
||||
[](https://now-examples-slackin-rrirkqohko.now.sh/)
|
||||
[](#backers)
|
||||
[](#backers)
|
||||
[](#sponsors)
|
||||
[](https://github.com/storybooks/storybook/blob/master/LICENSE)
|
||||
<!-- [](https://www.browserstack.com/automate/public-build/<badge_key>) -->
|
||||
@ -87,6 +87,7 @@ For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqo
|
||||
- [Marko](app/marko) <sup>alpha</sup> [](app/marko)
|
||||
- [HTML](app/html) <sup>alpha</sup> [](app/html)
|
||||
- [Svelte](app/svelte) <sup>alpha</sup> [](app/svelte)
|
||||
- [Riot](app/riot) <sup>alpha</sup> [](app/riot)
|
||||
|
||||
### Sub Projects
|
||||
|
||||
@ -126,6 +127,7 @@ See [Addon / Framework Support Table](ADDONS_SUPPORT.md)
|
||||
- [Marko](https://storybooks-marko.netlify.com/)
|
||||
- [HTML](https://storybooks-html.netlify.com/)
|
||||
- [Svelte](https://storybooks-svelte.netlify.com/)
|
||||
- [Riot](https://storybooks-riot.netlify.com/)
|
||||
|
||||
### 3.4
|
||||
- [React Official](https://release-3-4--storybooks-official.netlify.com)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -25,14 +25,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-alpha.16",
|
||||
"@storybook/client-logger": "4.0.0-alpha.16",
|
||||
"@storybook/components": "4.0.0-alpha.16",
|
||||
"@storybook/core-events": "4.0.0-alpha.16",
|
||||
"@emotion/styled": "0.10.5",
|
||||
"@storybook/addons": "4.0.0-alpha.20",
|
||||
"@storybook/client-logger": "4.0.0-alpha.20",
|
||||
"@storybook/components": "4.0.0-alpha.20",
|
||||
"@storybook/core-events": "4.0.0-alpha.20",
|
||||
"axe-core": "^3.0.3",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-emotion": "^9.2.6"
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { STORY_RENDERED } from '@storybook/core-events';
|
||||
import { ActionBar, ActionButton } from '@storybook/components';
|
||||
@ -11,11 +11,11 @@ import { CHECK_EVENT_ID, RERUN_EVENT_ID, REQUEST_CHECK_EVENT_ID } from '../share
|
||||
import Tabs from './Tabs';
|
||||
import Report from './Report';
|
||||
|
||||
const Passes = styled('span')(({ theme }) => ({
|
||||
const Passes = styled.span(({ theme }) => ({
|
||||
color: theme.successColor,
|
||||
}));
|
||||
|
||||
const Violations = styled('span')(({ theme }) => ({
|
||||
const Violations = styled.span(({ theme }) => ({
|
||||
color: theme.failColor,
|
||||
}));
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import Rules from './Rules';
|
||||
|
||||
const Item = styled('li')({
|
||||
const Item = styled.li({
|
||||
fontWeight: 600,
|
||||
});
|
||||
const ItemTitle = styled('span')({
|
||||
const ItemTitle = styled.span({
|
||||
borderBottom: '1px solid rgb(130, 130, 130)',
|
||||
width: '100%',
|
||||
display: 'inline-block',
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const Wrapper = styled('div')(({ theme }) => ({
|
||||
const Wrapper = styled.div(({ theme }) => ({
|
||||
backgroundColor: theme.barFill,
|
||||
padding: '12px',
|
||||
marginBottom: '10px',
|
||||
}));
|
||||
const Help = styled('p')({
|
||||
const Help = styled.p({
|
||||
margin: '0 0 12px',
|
||||
});
|
||||
const Link = styled('a')({
|
||||
const Link = styled.a({
|
||||
marginTop: '12px',
|
||||
textDecoration: 'underline',
|
||||
color: 'inherit',
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
import { Icons } from '@storybook/components';
|
||||
|
||||
import Info from './Info';
|
||||
import Tags from './Tags';
|
||||
import Elements from './Elements';
|
||||
|
||||
const Wrapper = styled('div')(({ theme }) => ({
|
||||
const Wrapper = styled.div(({ theme }) => ({
|
||||
padding: '0 14px',
|
||||
cursor: 'pointer',
|
||||
borderBottom: theme.mainBorder,
|
||||
}));
|
||||
|
||||
const HeaderBar = styled('button')(({ theme }) => ({
|
||||
const HeaderBar = styled.button(({ theme }) => ({
|
||||
padding: '12px 0px',
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const impactColors = {
|
||||
minor: '#f1c40f',
|
||||
@ -11,24 +11,24 @@ const impactColors = {
|
||||
success: '#2ecc71',
|
||||
};
|
||||
|
||||
const List = styled('div')({
|
||||
const List = styled.div({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
padding: '4px',
|
||||
fontWeight: '400',
|
||||
});
|
||||
|
||||
const Item = styled('div')({
|
||||
const Item = styled.div({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
marginBottom: '6px',
|
||||
});
|
||||
|
||||
const Message = styled('div')({
|
||||
const Message = styled.div({
|
||||
paddingLeft: '6px',
|
||||
});
|
||||
|
||||
const Status = styled('div')(({ passes, impact }) => ({
|
||||
const Status = styled.div(({ passes, impact }) => ({
|
||||
height: '16px',
|
||||
width: '16px',
|
||||
borderRadius: '8px',
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const Wrapper = styled('div')({
|
||||
const Wrapper = styled.div({
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
margin: '12px 0',
|
||||
});
|
||||
|
||||
const Item = styled('div')(({ theme }) => ({
|
||||
const Item = styled.div(({ theme }) => ({
|
||||
margin: '0 6px',
|
||||
padding: '5px',
|
||||
border: theme.mainBorder,
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const Container = styled('div')({
|
||||
const Container = styled.div({
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
minHeight: '100%',
|
||||
});
|
||||
|
||||
const List = styled('div')(({ theme }) => ({
|
||||
const List = styled.div(({ theme }) => ({
|
||||
borderBottom: theme.mainBorder,
|
||||
flexWrap: 'wrap',
|
||||
display: 'flex',
|
||||
}));
|
||||
|
||||
const Item = styled('button')(
|
||||
const Item = styled.button(
|
||||
({ active }) =>
|
||||
active
|
||||
? {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -20,16 +20,17 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-alpha.16",
|
||||
"@storybook/components": "4.0.0-alpha.16",
|
||||
"@storybook/core-events": "4.0.0-alpha.16",
|
||||
"@emotion/core": "^0.13.0",
|
||||
"@emotion/provider": "0.11.1",
|
||||
"@emotion/styled": "0.10.5",
|
||||
"@storybook/addons": "4.0.0-alpha.20",
|
||||
"@storybook/components": "4.0.0-alpha.20",
|
||||
"@storybook/core-events": "4.0.0-alpha.20",
|
||||
"deep-equal": "^1.0.1",
|
||||
"emotion-theming": "^9.2.6",
|
||||
"global": "^4.3.2",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"make-error": "^1.3.4",
|
||||
"make-error": "^1.3.5",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-emotion": "^9.2.6",
|
||||
"react-inspector": "^2.3.0",
|
||||
"uuid": "^3.3.2"
|
||||
},
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import Inspector from 'react-inspector';
|
||||
import { withTheme } from 'emotion-theming';
|
||||
import { withCSSContext } from '@emotion/core';
|
||||
|
||||
import { ActionBar, ActionButton } from '@storybook/components';
|
||||
|
||||
import { Actions, Action, Wrapper, InspectorContainer, Countwrap, Counter } from './style';
|
||||
|
||||
const ActionLogger = withTheme(({ actions, onClear, theme }) => (
|
||||
const ActionLogger = withCSSContext(({ actions, onClear }, { theme }) => (
|
||||
<Wrapper>
|
||||
<Actions>
|
||||
{actions.map(action => (
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
export const Actions = styled('pre')({
|
||||
export const Actions = styled.pre({
|
||||
flex: 1,
|
||||
margin: 0,
|
||||
padding: '8px 2px 20px 0',
|
||||
@ -8,7 +8,7 @@ export const Actions = styled('pre')({
|
||||
color: '#666',
|
||||
});
|
||||
|
||||
export const Action = styled('div')({
|
||||
export const Action = styled.div({
|
||||
display: 'flex',
|
||||
padding: '3px 3px 3px 0',
|
||||
borderLeft: '5px solid transparent',
|
||||
@ -17,7 +17,7 @@ export const Action = styled('div')({
|
||||
alignItems: 'start',
|
||||
});
|
||||
|
||||
export const Counter = styled('div')({
|
||||
export const Counter = styled.div({
|
||||
margin: '0 5px 0 5px',
|
||||
backgroundColor: '#777777',
|
||||
color: '#ffffff',
|
||||
@ -25,16 +25,16 @@ export const Counter = styled('div')({
|
||||
borderRadius: '20px',
|
||||
});
|
||||
|
||||
export const Countwrap = styled('div')({
|
||||
export const Countwrap = styled.div({
|
||||
paddingBottom: 2,
|
||||
});
|
||||
|
||||
export const InspectorContainer = styled('div')({
|
||||
export const InspectorContainer = styled.div({
|
||||
flex: 1,
|
||||
padding: '0 0 0 5px',
|
||||
});
|
||||
|
||||
export const Wrapper = styled('div')({
|
||||
export const Wrapper = styled.div({
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
|
||||
@ -81,3 +81,5 @@ storiesOf('Button', module).add('with text', () => <button>Click me</button>, {
|
||||
backgrounds: { disable: true },
|
||||
});
|
||||
```
|
||||
|
||||
You can choose your background in a running storybook instance with the `background` query param and either set the background value or the name as the parameter value. E.g. `?background=twitter` or `?background=#00aced`.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,11 +24,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-alpha.16",
|
||||
"@storybook/core-events": "4.0.0-alpha.16",
|
||||
"@emotion/styled": "0.10.5",
|
||||
"@storybook/addons": "4.0.0-alpha.20",
|
||||
"@storybook/core-events": "4.0.0-alpha.20",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-emotion": "^9.2.6",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -2,20 +2,20 @@ import { document } from 'global';
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import Events from './constants';
|
||||
import Swatch from './Swatch';
|
||||
|
||||
const Wrapper = styled('div')({
|
||||
const Wrapper = styled.div({
|
||||
padding: 20,
|
||||
});
|
||||
|
||||
const Title = styled('h5')({
|
||||
const Title = styled.h5({
|
||||
fontSize: 16,
|
||||
});
|
||||
|
||||
const Pre = styled('pre')(({ theme }) => ({
|
||||
const Pre = styled.pre(({ theme }) => ({
|
||||
padding: '30px',
|
||||
display: 'block',
|
||||
background: theme.fillColor,
|
||||
@ -23,11 +23,11 @@ const Pre = styled('pre')(({ theme }) => ({
|
||||
lineHeight: '1.75em',
|
||||
}));
|
||||
|
||||
const List = styled('div')({
|
||||
const List = styled.div({
|
||||
display: 'inline-block',
|
||||
padding: 15,
|
||||
});
|
||||
const Item = styled('div')({
|
||||
const Item = styled.div({
|
||||
display: 'inline-block',
|
||||
padding: 5,
|
||||
});
|
||||
@ -99,8 +99,11 @@ export default class BackgroundPanel extends Component {
|
||||
|
||||
// debugger;
|
||||
|
||||
if (current && backgrounds.find(bg => bg.value === current)) {
|
||||
this.updateIframe(current);
|
||||
const foundBackground =
|
||||
current && backgrounds.find(bg => bg.name === decodeURI(current) || bg.value === current);
|
||||
|
||||
if (foundBackground) {
|
||||
this.updateIframe(foundBackground.value);
|
||||
} else if (defaultOrFirst) {
|
||||
this.updateIframe(defaultOrFirst.value);
|
||||
api.setQueryParams({ background: defaultOrFirst.value });
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const Button = styled('button')(({ theme }) => ({
|
||||
const Button = styled.button(({ theme }) => ({
|
||||
listStyle: 'none',
|
||||
backgroundColor: theme.barFill,
|
||||
textAlign: 'center',
|
||||
@ -19,7 +19,7 @@ const Button = styled('button')(({ theme }) => ({
|
||||
overflow: 'hidden',
|
||||
}));
|
||||
|
||||
const Block = styled('div')(({ bg, theme }) => ({
|
||||
const Block = styled.div(({ bg, theme }) => ({
|
||||
height: 80,
|
||||
transition: 'opacity 0.25s ease-in-out',
|
||||
borderBottom: theme.mainBorder,
|
||||
@ -28,17 +28,17 @@ const Block = styled('div')(({ bg, theme }) => ({
|
||||
backgroundPosition: 'center',
|
||||
}));
|
||||
|
||||
const Box = styled('div')({
|
||||
const Box = styled.div({
|
||||
listStyle: 'none',
|
||||
paddingLeft: 10,
|
||||
paddingRight: 10,
|
||||
});
|
||||
|
||||
const Name = styled('h4')({
|
||||
const Name = styled.h4({
|
||||
float: 'left',
|
||||
fontWeight: 'bold',
|
||||
});
|
||||
const Value = styled('h4')({
|
||||
const Value = styled.h4({
|
||||
float: 'right',
|
||||
fontWeight: 'normal',
|
||||
});
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Swatch should render the value of the swatch and set it to be the background 1`] = `
|
||||
<Styled(button)
|
||||
<ForwardRef
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
>
|
||||
<Styled(div)
|
||||
<ForwardRef
|
||||
bg="bar"
|
||||
/>
|
||||
<Styled(div)>
|
||||
<Styled(h4)>
|
||||
<ForwardRef>
|
||||
<ForwardRef>
|
||||
foo
|
||||
:
|
||||
</Styled(h4)>
|
||||
<Styled(h4)>
|
||||
</ForwardRef>
|
||||
<ForwardRef>
|
||||
<em>
|
||||
bar
|
||||
</em>
|
||||
</Styled(h4)>
|
||||
</Styled(div)>
|
||||
</Styled(button)>
|
||||
</ForwardRef>
|
||||
</ForwardRef>
|
||||
</ForwardRef>
|
||||
`;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "Storybook decorator to center components",
|
||||
"license": "MIT",
|
||||
"author": "Muhammed Thanish <mnmtanish@gmail.com>",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -19,11 +19,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-alpha.16",
|
||||
"@storybook/core-events": "4.0.0-alpha.16",
|
||||
"@emotion/styled": "0.10.5",
|
||||
"@storybook/addons": "4.0.0-alpha.20",
|
||||
"@storybook/core-events": "4.0.0-alpha.20",
|
||||
"format-json": "^1.0.3",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-emotion": "^9.2.6",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"react-textarea-autosize": "^7.0.4",
|
||||
"util-deprecate": "^1.0.2"
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
import json from 'format-json';
|
||||
|
||||
import Textarea from 'react-textarea-autosize';
|
||||
@ -38,7 +38,7 @@ const StyledTextarea = styled(Textarea)(
|
||||
: {}
|
||||
);
|
||||
|
||||
const Button = styled('button')({
|
||||
const Button = styled.button({
|
||||
display: 'table-cell',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '3.5px',
|
||||
@ -57,7 +57,7 @@ const Button = styled('button')({
|
||||
outline: 0,
|
||||
});
|
||||
|
||||
const Label = styled('label')({
|
||||
const Label = styled.label({
|
||||
display: 'table-cell',
|
||||
boxSizing: 'border-box',
|
||||
verticalAlign: 'top',
|
||||
@ -68,7 +68,7 @@ const Label = styled('label')({
|
||||
fontWeight: '600',
|
||||
});
|
||||
|
||||
const Wrapper = styled('div')({
|
||||
const Wrapper = styled.div({
|
||||
display: 'flex',
|
||||
padding: 5,
|
||||
alignItems: 'flex-start',
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { EVENTS } from '../constants';
|
||||
import Event from './Event';
|
||||
|
||||
const Wrapper = styled('div')({
|
||||
const Wrapper = styled.div({
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
padding: '10px',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -13,16 +13,16 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-alpha.16",
|
||||
"@storybook/client-logger": "4.0.0-alpha.16",
|
||||
"@storybook/components": "4.0.0-alpha.16",
|
||||
"@emotion/styled": "0.10.5",
|
||||
"@storybook/addons": "4.0.0-alpha.20",
|
||||
"@storybook/client-logger": "4.0.0-alpha.20",
|
||||
"@storybook/components": "4.0.0-alpha.20",
|
||||
"core-js": "2.5.7",
|
||||
"global": "^4.3.2",
|
||||
"marksy": "^6.0.3",
|
||||
"nested-object-assign": "^1.0.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-addons-create-fragment": "^15.5.3",
|
||||
"react-emotion": "^9.2.6",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -330,8 +330,8 @@ class Story extends Component {
|
||||
innerChildren.forEach(extract);
|
||||
return;
|
||||
}
|
||||
if (innerChildren.props && innerChildren.props.innerChildren) {
|
||||
extract(innerChildren.props.innerChildren);
|
||||
if (innerChildren.props && innerChildren.props.children) {
|
||||
extract(innerChildren.props.children);
|
||||
}
|
||||
if (
|
||||
typeof innerChildren === 'string' ||
|
||||
|
||||
@ -26,47 +26,47 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`PropTable multiLineText should include all propTypes by default 1`] = `
|
||||
<Table>
|
||||
<ForwardRef>
|
||||
<thead>
|
||||
<tr>
|
||||
<Th
|
||||
<ForwardRef
|
||||
bordered={true}
|
||||
>
|
||||
property
|
||||
</Th>
|
||||
<Th
|
||||
</ForwardRef>
|
||||
<ForwardRef
|
||||
bordered={true}
|
||||
>
|
||||
propType
|
||||
</Th>
|
||||
<Th
|
||||
</ForwardRef>
|
||||
<ForwardRef
|
||||
bordered={true}
|
||||
>
|
||||
required
|
||||
</Th>
|
||||
<Th
|
||||
</ForwardRef>
|
||||
<ForwardRef
|
||||
bordered={true}
|
||||
>
|
||||
default
|
||||
</Th>
|
||||
<Th
|
||||
</ForwardRef>
|
||||
<ForwardRef
|
||||
bordered={true}
|
||||
>
|
||||
description
|
||||
</Th>
|
||||
</ForwardRef>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
key="foo"
|
||||
>
|
||||
<Td
|
||||
<ForwardRef
|
||||
bordered={true}
|
||||
code={true}
|
||||
>
|
||||
foo
|
||||
</Td>
|
||||
<Td
|
||||
</ForwardRef>
|
||||
<ForwardRef
|
||||
bordered={true}
|
||||
code={true}
|
||||
>
|
||||
@ -78,21 +78,21 @@ exports[`PropTable multiLineText should include all propTypes by default 1`] = `
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Td>
|
||||
<Td
|
||||
</ForwardRef>
|
||||
<ForwardRef
|
||||
bordered={true}
|
||||
>
|
||||
-
|
||||
</Td>
|
||||
<Td
|
||||
</ForwardRef>
|
||||
<ForwardRef
|
||||
bordered={true}
|
||||
>
|
||||
-
|
||||
</Td>
|
||||
<Td
|
||||
</ForwardRef>
|
||||
<ForwardRef
|
||||
bordered={true}
|
||||
/>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
</ForwardRef>
|
||||
`;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const Button = styled('button')(
|
||||
const Button = styled.button(
|
||||
{
|
||||
overflow: 'hidden',
|
||||
border: '1px solid #eee',
|
||||
@ -27,7 +27,7 @@ const Button = styled('button')(
|
||||
({ styles }) => styles
|
||||
);
|
||||
|
||||
const ContentWrapper = styled('div')(
|
||||
const ContentWrapper = styled.div(
|
||||
{
|
||||
transition: 'transform .2s ease',
|
||||
height: 16,
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import CopyButton from './copyButton';
|
||||
import copy from './copy';
|
||||
|
||||
const TOGGLE_TIMEOUT = 1800;
|
||||
|
||||
const StyledPre = styled('pre')(
|
||||
const StyledPre = styled.pre(
|
||||
{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,11 +25,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-alpha.16",
|
||||
"@storybook/components": "4.0.0-alpha.16",
|
||||
"@emotion/styled": "0.10.5",
|
||||
"@storybook/addons": "4.0.0-alpha.20",
|
||||
"@storybook/components": "4.0.0-alpha.20",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-emotion": "^9.2.6",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const Indicator = styled('div')(
|
||||
const Indicator = styled.div(
|
||||
({ color, size }) => ({
|
||||
boxSizing: 'border-box',
|
||||
padding: `0 ${size / 2}px`,
|
||||
|
||||
@ -1,37 +1,37 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import Indicator from './Indicator';
|
||||
import Result, { FailedResult } from './Result';
|
||||
import provideJestResult from '../hoc/provideJestResult';
|
||||
import colors from '../colors';
|
||||
|
||||
const List = styled('ul')({
|
||||
const List = styled.ul({
|
||||
listStyle: 'none',
|
||||
fontSize: 14,
|
||||
padding: 0,
|
||||
margin: '10px 0',
|
||||
});
|
||||
|
||||
const Item = styled('li')({
|
||||
const Item = styled.li({
|
||||
display: 'block',
|
||||
margin: '10px 0',
|
||||
padding: 0,
|
||||
});
|
||||
|
||||
const NoTests = styled('div')({
|
||||
const NoTests = styled.div({
|
||||
padding: '10px 20px',
|
||||
flex: 1,
|
||||
});
|
||||
|
||||
const FileTitle = styled('h2')({
|
||||
const FileTitle = styled.h2({
|
||||
margin: 0,
|
||||
fontWeight: 500,
|
||||
fontSize: 18,
|
||||
});
|
||||
|
||||
const SuiteHead = styled('div')({
|
||||
const SuiteHead = styled.div({
|
||||
display: 'flex',
|
||||
alignItems: 'baseline',
|
||||
justifyContent: 'space-between',
|
||||
@ -89,7 +89,7 @@ const SuiteProgress = styled(({ successNumber, result, className }) => (
|
||||
},
|
||||
}));
|
||||
|
||||
const SuiteTitle = styled('div')({
|
||||
const SuiteTitle = styled.div({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import provideJestResult from '../hoc/provideJestResult';
|
||||
import Indicator from './Indicator';
|
||||
import colors from '../colors';
|
||||
|
||||
const Wrapper = styled('div')({
|
||||
const Wrapper = styled.div({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
});
|
||||
const PanelName = styled('div')({
|
||||
const PanelName = styled.div({
|
||||
paddingLeft: 5,
|
||||
});
|
||||
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
import { monoFonts } from '@storybook/components';
|
||||
|
||||
import Indicator from './Indicator';
|
||||
import colors from '../colors';
|
||||
|
||||
const Pre = styled('pre')({
|
||||
const Pre = styled.pre({
|
||||
margin: 0,
|
||||
...monoFonts,
|
||||
});
|
||||
|
||||
const FlexContainer = styled('div')({
|
||||
const FlexContainer = styled.div({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
});
|
||||
@ -20,11 +20,11 @@ const FlexContainer = styled('div')({
|
||||
/* eslint no-control-regex:0 */
|
||||
const patterns = [/^\x08+/, /^\x1b\[[012]?K/, /^\x1b\[?[\d;]{0,3}/];
|
||||
|
||||
const Positive = styled('strong')({
|
||||
const Positive = styled.strong({
|
||||
color: colors.success,
|
||||
fontWeight: 500,
|
||||
});
|
||||
const Negative = styled('strong')({
|
||||
const Negative = styled.strong({
|
||||
color: colors.error,
|
||||
fontWeight: 500,
|
||||
});
|
||||
@ -188,13 +188,13 @@ Message.propTypes = {
|
||||
msg: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
const Head = styled('header')({
|
||||
const Head = styled.header({
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
});
|
||||
|
||||
const Title = styled('h3')({
|
||||
const Title = styled.h3({
|
||||
padding: '10px 10px 0 10px',
|
||||
margin: 0,
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -13,9 +13,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-alpha.16",
|
||||
"@storybook/components": "4.0.0-alpha.16",
|
||||
"@storybook/core-events": "4.0.0-alpha.16",
|
||||
"@emotion/styled": "0.10.5",
|
||||
"@storybook/addons": "4.0.0-alpha.20",
|
||||
"@storybook/components": "4.0.0-alpha.20",
|
||||
"@storybook/core-events": "4.0.0-alpha.20",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"escape-html": "^1.0.3",
|
||||
"fast-deep-equal": "^2.0.1",
|
||||
@ -24,7 +25,6 @@
|
||||
"qs": "^6.5.2",
|
||||
"react-color": "^2.14.1",
|
||||
"react-datetime": "^2.15.0",
|
||||
"react-emotion": "^9.2.6",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import qs from 'qs';
|
||||
import { document } from 'global';
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
import copy from 'copy-to-clipboard';
|
||||
|
||||
import { Placeholder, TabWrapper, TabsState, ActionBar, ActionButton } from '@storybook/components';
|
||||
@ -14,7 +14,7 @@ const getTimestamp = () => +new Date();
|
||||
|
||||
const DEFAULT_GROUP_ID = 'ALL';
|
||||
|
||||
const PanelWrapper = styled('div')({
|
||||
const PanelWrapper = styled.div({
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { Field } from '@storybook/components';
|
||||
import TypeMap from './types';
|
||||
|
||||
const Form = styled('form')({
|
||||
const Form = styled.form({
|
||||
boxSizing: 'border-box',
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const Input = styled('input')({
|
||||
const Input = styled.input({
|
||||
display: 'table-cell',
|
||||
boxSizing: 'border-box',
|
||||
verticalAlign: 'top',
|
||||
|
||||
@ -3,18 +3,18 @@ import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { SketchPicker } from 'react-color';
|
||||
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { Button } from '@storybook/components';
|
||||
|
||||
const Swatch = styled('div')({
|
||||
const Swatch = styled.div({
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
right: 3,
|
||||
width: 28,
|
||||
});
|
||||
const Popover = styled('div')({
|
||||
const Popover = styled.div({
|
||||
position: 'absolute',
|
||||
zIndex: '2',
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import Datetime from 'react-datetime';
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { FileReader } from 'global';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { Input } from '@storybook/components';
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { Input } from '@storybook/components';
|
||||
|
||||
@ -16,17 +16,17 @@ const base = {
|
||||
color: '#444',
|
||||
};
|
||||
|
||||
const RangeInput = styled('input')(base, {
|
||||
const RangeInput = styled.input(base, {
|
||||
display: 'table-cell',
|
||||
flexGrow: 1,
|
||||
});
|
||||
const RangeLabel = styled('span')({
|
||||
const RangeLabel = styled.span({
|
||||
paddingLeft: 5,
|
||||
paddingRight: 5,
|
||||
fontSize: 12,
|
||||
whiteSpace: 'nowrap',
|
||||
});
|
||||
const RangeWrapper = styled('div')({
|
||||
const RangeWrapper = styled.div({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -20,9 +20,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-alpha.16",
|
||||
"@storybook/components": "4.0.0-alpha.16",
|
||||
"@storybook/core-events": "4.0.0-alpha.16",
|
||||
"@storybook/addons": "4.0.0-alpha.20",
|
||||
"@storybook/components": "4.0.0-alpha.20",
|
||||
"@storybook/core-events": "4.0.0-alpha.20",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,10 +18,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-alpha.16",
|
||||
"marked": "^0.4.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-emotion": "^9.2.6"
|
||||
"@emotion/styled": "0.10.5",
|
||||
"@storybook/addons": "4.0.0-alpha.20",
|
||||
"marked": "^0.5.0",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
|
||||
@ -2,9 +2,9 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import addons from '@storybook/addons';
|
||||
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const Panel = styled('div')({
|
||||
const Panel = styled.div({
|
||||
padding: 10,
|
||||
boxSizing: 'border-box',
|
||||
width: '100%',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "Options addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -19,7 +19,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-alpha.16"
|
||||
"@storybook/addons": "4.0.0-alpha.20"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -16,18 +16,18 @@
|
||||
"storybook": "start-storybook -p 6006"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.0.0-rc.2",
|
||||
"@storybook/addons": "4.0.0-alpha.16",
|
||||
"glob": "^7.1.2",
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@storybook/addons": "4.0.0-alpha.20",
|
||||
"glob": "^7.1.3",
|
||||
"global": "^4.3.2",
|
||||
"jest-specific-snapshot": "^1.0.0",
|
||||
"read-pkg-up": "^4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "4.0.0-alpha.16",
|
||||
"@storybook/addon-links": "4.0.0-alpha.16",
|
||||
"@storybook/addons": "4.0.0-alpha.16",
|
||||
"@storybook/react": "4.0.0-alpha.16",
|
||||
"@storybook/addon-actions": "4.0.0-alpha.20",
|
||||
"@storybook/addon-links": "4.0.0-alpha.20",
|
||||
"@storybook/addons": "4.0.0-alpha.20",
|
||||
"@storybook/react": "4.0.0-alpha.20",
|
||||
"enzyme-to-json": "^3.3.4",
|
||||
"react": "^16.4.2"
|
||||
}
|
||||
|
||||
@ -0,0 +1,35 @@
|
||||
import global from 'global';
|
||||
import hasDependency from '../hasDependency';
|
||||
import configure from '../configure';
|
||||
|
||||
function mockRiotToIncludeCompiler() {
|
||||
jest.mock('riot', () => require.requireActual('riot/riot.js'));
|
||||
}
|
||||
|
||||
function test(options) {
|
||||
return options.framework === 'riot' || (!options.framework && hasDependency('@storybook/riot'));
|
||||
}
|
||||
|
||||
function load(options) {
|
||||
global.STORYBOOK_ENV = 'riot';
|
||||
mockRiotToIncludeCompiler();
|
||||
|
||||
const { configPath, config } = options;
|
||||
const storybook = require.requireActual('@storybook/riot');
|
||||
|
||||
configure({ configPath, config, storybook });
|
||||
|
||||
return {
|
||||
framework: 'riot',
|
||||
renderTree: require.requireActual('./renderTree').default,
|
||||
renderShallowTree: () => {
|
||||
throw new Error('Shallow renderer is not supported for riot');
|
||||
},
|
||||
storybook,
|
||||
};
|
||||
}
|
||||
|
||||
export default {
|
||||
load,
|
||||
test,
|
||||
};
|
||||
@ -0,0 +1,33 @@
|
||||
import { document } from 'global';
|
||||
|
||||
const riotForStorybook = require.requireActual('@storybook/riot');
|
||||
|
||||
function bootstrapADocumentAndReturnANode() {
|
||||
const rootElement = document.createElement('div');
|
||||
rootElement.id = 'root';
|
||||
document.body = document.createElement('body');
|
||||
document.body.appendChild(rootElement);
|
||||
return rootElement;
|
||||
}
|
||||
|
||||
function makeSureThatResultIsRenderedSomehow({ context, result, rootElement }) {
|
||||
if (!rootElement.firstChild) {
|
||||
riotForStorybook.render({
|
||||
story: () => result,
|
||||
selectedKind: context.kind,
|
||||
selectedStory: context.story,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function getRenderedTree(story, context) {
|
||||
const rootElement = bootstrapADocumentAndReturnANode();
|
||||
|
||||
const result = story.render(context);
|
||||
|
||||
makeSureThatResultIsRenderedSomehow({ context, result, rootElement });
|
||||
|
||||
return rootElement;
|
||||
}
|
||||
|
||||
export default getRenderedTree;
|
||||
@ -1,273 +1,231 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Another Button with some emoji 1`] = `
|
||||
.emotion-0 {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 3px;
|
||||
background-color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
padding: 3px 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
<Button
|
||||
<ForwardRef
|
||||
onClick={[Function]}
|
||||
>
|
||||
<button
|
||||
className="emotion-0 emotion-1"
|
||||
<Styled(button)
|
||||
onClick={[Function]}
|
||||
>
|
||||
<span
|
||||
aria-label="so cool"
|
||||
role="img"
|
||||
<button
|
||||
className="emotion-0 emotion-1"
|
||||
onClick={[Function]}
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
<span
|
||||
aria-label="so cool"
|
||||
role="img"
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</button>
|
||||
</Styled(button)>
|
||||
</ForwardRef>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Another Button with text 1`] = `
|
||||
.emotion-0 {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 3px;
|
||||
background-color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
padding: 3px 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
<Button
|
||||
<ForwardRef
|
||||
onClick={[Function]}
|
||||
>
|
||||
<button
|
||||
className="emotion-0 emotion-1"
|
||||
<Styled(button)
|
||||
onClick={[Function]}
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
</Button>
|
||||
<button
|
||||
className="emotion-0 emotion-1"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
</Styled(button)>
|
||||
</ForwardRef>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button with some emoji 1`] = `
|
||||
.emotion-0 {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 3px;
|
||||
background-color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
padding: 3px 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
<Button
|
||||
<ForwardRef
|
||||
onClick={[Function]}
|
||||
>
|
||||
<button
|
||||
className="emotion-0 emotion-1"
|
||||
<Styled(button)
|
||||
onClick={[Function]}
|
||||
>
|
||||
<span
|
||||
aria-label="so cool"
|
||||
role="img"
|
||||
<button
|
||||
className="emotion-0 emotion-1"
|
||||
onClick={[Function]}
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
<span
|
||||
aria-label="so cool"
|
||||
role="img"
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</button>
|
||||
</Styled(button)>
|
||||
</ForwardRef>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button with text 1`] = `
|
||||
.emotion-0 {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 3px;
|
||||
background-color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
padding: 3px 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
<Button
|
||||
<ForwardRef
|
||||
onClick={[Function]}
|
||||
>
|
||||
<button
|
||||
className="emotion-0 emotion-1"
|
||||
<Styled(button)
|
||||
onClick={[Function]}
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
</Button>
|
||||
<button
|
||||
className="emotion-0 emotion-1"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
</Styled(button)>
|
||||
</ForwardRef>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
.emotion-18 {
|
||||
margin: 15px;
|
||||
max-width: 600px;
|
||||
line-height: 1.4;
|
||||
font-family: "Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
padding: 2px 5px;
|
||||
border: 1px solid #eae9e9;
|
||||
border-radius: 4px;
|
||||
background-color: #f3f2f2;
|
||||
color: #3a3a3a;
|
||||
}
|
||||
|
||||
.emotion-4 {
|
||||
color: #1474f3;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #1474f3;
|
||||
padding-bottom: 2px;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.emotion-12 {
|
||||
color: #1474f3;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #1474f3;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.emotion-16 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
<Welcome
|
||||
showApp={[Function]}
|
||||
>
|
||||
<Styled(article)>
|
||||
<article
|
||||
className="emotion-18 emotion-19"
|
||||
>
|
||||
<Styled(h1)>
|
||||
<h1
|
||||
className="emotion-0 emotion-1"
|
||||
>
|
||||
Welcome to storybook
|
||||
</h1>
|
||||
</Styled(h1)>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<Styled(code)>
|
||||
<code
|
||||
className="emotion-2 emotion-3"
|
||||
>
|
||||
src/stories
|
||||
</code>
|
||||
</Styled(code)>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<Styled(button)
|
||||
onClick={[Function]}
|
||||
>
|
||||
<button
|
||||
className="emotion-4 emotion-5"
|
||||
<ForwardRef>
|
||||
<Styled(article)>
|
||||
<article
|
||||
className="emotion-18 emotion-19"
|
||||
>
|
||||
<ForwardRef>
|
||||
<Styled(h1)>
|
||||
<h1
|
||||
className="emotion-0 emotion-1"
|
||||
>
|
||||
Welcome to storybook
|
||||
</h1>
|
||||
</Styled(h1)>
|
||||
</ForwardRef>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<ForwardRef>
|
||||
<Styled(code)>
|
||||
<code
|
||||
className="emotion-2 emotion-3"
|
||||
>
|
||||
src/stories
|
||||
</code>
|
||||
</Styled(code)>
|
||||
</ForwardRef>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<ForwardRef
|
||||
onClick={[Function]}
|
||||
>
|
||||
stories
|
||||
</button>
|
||||
</Styled(button)>
|
||||
for a component called
|
||||
|
||||
<Styled(code)>
|
||||
<code
|
||||
className="emotion-2 emotion-3"
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
</Styled(code)>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<Styled(code)>
|
||||
<code
|
||||
className="emotion-2 emotion-3"
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
</Styled(code)>
|
||||
stories located at
|
||||
|
||||
<Styled(code)>
|
||||
<code
|
||||
className="emotion-2 emotion-3"
|
||||
>
|
||||
src/stories/index.js
|
||||
</code>
|
||||
</Styled(code)>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
|
||||
<Styled(a)
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<a
|
||||
className="emotion-12 emotion-13"
|
||||
<Styled(button)
|
||||
onClick={[Function]}
|
||||
>
|
||||
<button
|
||||
className="emotion-4 emotion-5"
|
||||
onClick={[Function]}
|
||||
>
|
||||
stories
|
||||
</button>
|
||||
</Styled(button)>
|
||||
</ForwardRef>
|
||||
for a component called
|
||||
|
||||
<ForwardRef>
|
||||
<Styled(code)>
|
||||
<code
|
||||
className="emotion-2 emotion-3"
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
</Styled(code)>
|
||||
</ForwardRef>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<ForwardRef>
|
||||
<Styled(code)>
|
||||
<code
|
||||
className="emotion-2 emotion-3"
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
</Styled(code)>
|
||||
</ForwardRef>
|
||||
stories located at
|
||||
|
||||
<ForwardRef>
|
||||
<Styled(code)>
|
||||
<code
|
||||
className="emotion-2 emotion-3"
|
||||
>
|
||||
src/stories/index.js
|
||||
</code>
|
||||
</Styled(code)>
|
||||
</ForwardRef>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
|
||||
<ForwardRef
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
</Styled(a)>
|
||||
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Styled(p)>
|
||||
<p
|
||||
className="emotion-16 emotion-17"
|
||||
>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<Styled(code)>
|
||||
<code
|
||||
className="emotion-2 emotion-3"
|
||||
<Styled(a)
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
.storybook/webpack.config.js
|
||||
</code>
|
||||
</Styled(code)>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
<a
|
||||
className="emotion-12 emotion-13"
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
</Styled(a)>
|
||||
</ForwardRef>
|
||||
|
||||
section in our documentation.
|
||||
</p>
|
||||
</Styled(p)>
|
||||
</article>
|
||||
</Styled(article)>
|
||||
<ForwardRef>
|
||||
<Styled(p)>
|
||||
<p
|
||||
className="emotion-16 emotion-17"
|
||||
>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<ForwardRef>
|
||||
<Styled(code)>
|
||||
<code
|
||||
className="emotion-2 emotion-3"
|
||||
>
|
||||
.storybook/webpack.config.js
|
||||
</code>
|
||||
</Styled(code)>
|
||||
</ForwardRef>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</p>
|
||||
</Styled(p)>
|
||||
</ForwardRef>
|
||||
</article>
|
||||
</Styled(article)>
|
||||
</ForwardRef>
|
||||
</Welcome>
|
||||
`;
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Another Button with some emoji 1`] = `
|
||||
<button
|
||||
className="css-1qwzad5 eux70yo0"
|
||||
<Styled(button)
|
||||
onClick={[Function]}
|
||||
>
|
||||
<span
|
||||
@ -11,21 +10,19 @@ exports[`Storyshots Another Button with some emoji 1`] = `
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</button>
|
||||
</Styled(button)>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Another Button with text 1`] = `
|
||||
<button
|
||||
className="css-1qwzad5 eux70yo0"
|
||||
<Styled(button)
|
||||
onClick={[Function]}
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
</Styled(button)>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button with some emoji 1`] = `
|
||||
<button
|
||||
className="css-1qwzad5 eux70yo0"
|
||||
<Styled(button)
|
||||
onClick={[Function]}
|
||||
>
|
||||
<span
|
||||
@ -34,31 +31,30 @@ exports[`Storyshots Button with some emoji 1`] = `
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</button>
|
||||
</Styled(button)>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button with text 1`] = `
|
||||
<button
|
||||
className="css-1qwzad5 eux70yo0"
|
||||
<Styled(button)
|
||||
onClick={[Function]}
|
||||
>
|
||||
Hello Button
|
||||
</button>
|
||||
</Styled(button)>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<Styled(article)>
|
||||
<Styled(h1)>
|
||||
<ForwardRef>
|
||||
<ForwardRef>
|
||||
Welcome to storybook
|
||||
</Styled(h1)>
|
||||
</ForwardRef>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<Styled(code)>
|
||||
<ForwardRef>
|
||||
src/stories
|
||||
</Styled(code)>
|
||||
</ForwardRef>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
@ -67,16 +63,16 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<Styled(button)
|
||||
<ForwardRef
|
||||
onClick={[Function]}
|
||||
>
|
||||
stories
|
||||
</Styled(button)>
|
||||
</ForwardRef>
|
||||
for a component called
|
||||
|
||||
<Styled(code)>
|
||||
<ForwardRef>
|
||||
Button
|
||||
</Styled(code)>
|
||||
</ForwardRef>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
@ -85,14 +81,14 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<Styled(code)>
|
||||
<ForwardRef>
|
||||
Button
|
||||
</Styled(code)>
|
||||
</ForwardRef>
|
||||
stories located at
|
||||
|
||||
<Styled(code)>
|
||||
<ForwardRef>
|
||||
src/stories/index.js
|
||||
</Styled(code)>
|
||||
</ForwardRef>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
@ -100,26 +96,26 @@ exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<br />
|
||||
Have a look at the
|
||||
|
||||
<Styled(a)
|
||||
<ForwardRef
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</Styled(a)>
|
||||
</ForwardRef>
|
||||
|
||||
section in our documentation.
|
||||
</p>
|
||||
<Styled(p)>
|
||||
<ForwardRef>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<Styled(code)>
|
||||
<ForwardRef>
|
||||
.storybook/webpack.config.js
|
||||
</Styled(code)>
|
||||
</ForwardRef>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</Styled(p)>
|
||||
</Styled(article)>
|
||||
</ForwardRef>
|
||||
</ForwardRef>
|
||||
`;
|
||||
|
||||
@ -1,11 +1,121 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Another Button with some emoji 1`] = `"{\\"type\\":\\"button\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":{\\"type\\":\\"span\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"role\\":\\"img\\",\\"aria-label\\":\\"so cool\\",\\"children\\":\\"😀 😎 👍 💯\\"},\\"_owner\\":null,\\"_store\\":{}},\\"className\\":\\"css-1qwzad5 eux70yo0\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
|
||||
exports[`Storyshots Another Button with some emoji 1`] = `
|
||||
<Styled(button)
|
||||
onClick={[Function]}
|
||||
>
|
||||
<span
|
||||
aria-label="so cool"
|
||||
role="img"
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</Styled(button)>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Another Button with text 1`] = `"{\\"type\\":\\"button\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Hello Button\\",\\"className\\":\\"css-1qwzad5 eux70yo0\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
|
||||
exports[`Storyshots Another Button with text 1`] = `
|
||||
<Styled(button)
|
||||
onClick={[Function]}
|
||||
>
|
||||
Hello Button
|
||||
</Styled(button)>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button with some emoji 1`] = `"{\\"type\\":\\"button\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":{\\"type\\":\\"span\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"role\\":\\"img\\",\\"aria-label\\":\\"so cool\\",\\"children\\":\\"😀 😎 👍 💯\\"},\\"_owner\\":null,\\"_store\\":{}},\\"className\\":\\"css-1qwzad5 eux70yo0\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
|
||||
exports[`Storyshots Button with some emoji 1`] = `
|
||||
<Styled(button)
|
||||
onClick={[Function]}
|
||||
>
|
||||
<span
|
||||
aria-label="so cool"
|
||||
role="img"
|
||||
>
|
||||
😀 😎 👍 💯
|
||||
</span>
|
||||
</Styled(button)>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button with text 1`] = `"{\\"type\\":\\"button\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Hello Button\\",\\"className\\":\\"css-1qwzad5 eux70yo0\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
|
||||
exports[`Storyshots Button with text 1`] = `
|
||||
<Styled(button)
|
||||
onClick={[Function]}
|
||||
>
|
||||
Hello Button
|
||||
</Styled(button)>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome to Storybook 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Welcome to storybook\\"},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"This is a UI component dev environment for your app.\\"},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"We've added some basic stories inside the \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"src/stories\\"},\\"_owner\\":null,\\"_store\\":{}},\\" directory.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"A story is a single state of one or more UI components. You can have as many stories as you want.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"(Basically a story is like a visual test case.)\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"See these sample \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"stories\\"},\\"_owner\\":null,\\"_store\\":{}},\\" for a component called\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Button\\"},\\"_owner\\":null,\\"_store\\":{}},\\".\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"Just like that, you can add your own components as stories.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"You can also edit those components and see changes right away.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"(Try editing the \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Button\\"},\\"_owner\\":null,\\"_store\\":{}},\\" stories located at\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"src/stories/index.js\\"},\\"_owner\\":null,\\"_store\\":{}},\\".)\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"Usually we create stories with smaller UI components in the app.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"Have a look at the\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"href\\":\\"https://storybook.js.org/basics/writing-stories\\",\\"target\\":\\"_blank\\",\\"rel\\":\\"noopener noreferrer\\",\\"children\\":\\"Writing Stories\\"},\\"_owner\\":null,\\"_store\\":{}},\\" \\",\\"section in our documentation.\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[{\\"type\\":\\"b\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"NOTE:\\"},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"Have a look at the \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\".storybook/webpack.config.js\\"},\\"_owner\\":null,\\"_store\\":{}},\\" to add webpack loaders and plugins you are using in this project.\\"]},\\"_owner\\":null,\\"_store\\":{}}]},\\"_owner\\":null,\\"_store\\":{}}"`;
|
||||
exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
<ForwardRef>
|
||||
<ForwardRef>
|
||||
Welcome to storybook
|
||||
</ForwardRef>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<ForwardRef>
|
||||
src/stories
|
||||
</ForwardRef>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<ForwardRef
|
||||
onClick={[Function]}
|
||||
>
|
||||
stories
|
||||
</ForwardRef>
|
||||
for a component called
|
||||
|
||||
<ForwardRef>
|
||||
Button
|
||||
</ForwardRef>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<ForwardRef>
|
||||
Button
|
||||
</ForwardRef>
|
||||
stories located at
|
||||
|
||||
<ForwardRef>
|
||||
src/stories/index.js
|
||||
</ForwardRef>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
|
||||
<ForwardRef
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</ForwardRef>
|
||||
|
||||
section in our documentation.
|
||||
</p>
|
||||
<ForwardRef>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<ForwardRef>
|
||||
.storybook/webpack.config.js
|
||||
</ForwardRef>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</ForwardRef>
|
||||
</ForwardRef>
|
||||
`;
|
||||
|
||||
@ -7,8 +7,5 @@ initStoryshots({
|
||||
test: data =>
|
||||
shallowSnapshot({
|
||||
...data,
|
||||
options: {
|
||||
serializer: JSON.stringify,
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "Image snappshots addition to StoryShots base on puppeteer",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -13,9 +13,9 @@
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.0.0-rc.2",
|
||||
"@storybook/node-logger": "4.0.0-alpha.16",
|
||||
"jest-image-snapshot": "^2.4.3",
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@storybook/node-logger": "4.0.0-alpha.20",
|
||||
"jest-image-snapshot": "^2.5.0",
|
||||
"puppeteer": "^1.6.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -143,3 +143,29 @@ module.exports = {
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### injectDecorator
|
||||
Tell storysource whether you need inject decorator.If false, you need to add the decorator by yourself;
|
||||
|
||||
Defaults: true
|
||||
|
||||
Usage:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.stories\.jsx?$/,
|
||||
loaders: [
|
||||
{
|
||||
loader: require.resolve('@storybook/addon-storysource/loader'),
|
||||
options: { injectDecorator: false }
|
||||
}
|
||||
],
|
||||
enforce: 'pre',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "Stories addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -20,9 +20,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.0.0-rc.2",
|
||||
"@storybook/addons": "4.0.0-alpha.16",
|
||||
"@storybook/components": "4.0.0-alpha.16",
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@storybook/addons": "4.0.0-alpha.20",
|
||||
"@storybook/components": "4.0.0-alpha.20",
|
||||
"estraverse": "^4.2.0",
|
||||
"loader-utils": "^1.1.0",
|
||||
"prettier": "^1.14.0",
|
||||
|
||||
@ -1,5 +1,216 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`inject-decorator injectDecorator option is false - angular does not inject stories decorator after the all "storiesOf" functions 1`] = `
|
||||
"import { Component } from '@angular/core';
|
||||
import { storiesOf } from '@storybook/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'storybook-with-ng-content',
|
||||
template: \`<div style=\\"color: #1e88e5;\\"><ng-content></ng-content></div>\`,
|
||||
})
|
||||
class WithNgContentComponent {}
|
||||
|
||||
storiesOf('Custom|ng-content', module).add('Default', () => ({
|
||||
template: \`<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>\`,
|
||||
moduleMetadata: {
|
||||
declarations: [WithNgContentComponent],
|
||||
},
|
||||
}));
|
||||
"
|
||||
`;
|
||||
|
||||
exports[`inject-decorator injectDecorator option is false - ts does not inject stories decorator after the all "storiesOf" functions 1`] = `
|
||||
"import { Component } from '@angular/core';
|
||||
import { Store, StoreModule } from '@ngrx/store';
|
||||
import { storiesOf, moduleMetadata } from '@storybook/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'storybook-comp-with-store',
|
||||
template: '<div>{{this.getSotreState()}}</div>',
|
||||
})
|
||||
class WithStoreComponent {
|
||||
private store: Store<any>;
|
||||
|
||||
constructor(store: Store<any>) {
|
||||
this.store = store;
|
||||
}
|
||||
|
||||
getSotreState(): string {
|
||||
return this.store === undefined ? 'Store is NOT injected' : 'Store is injected';
|
||||
}
|
||||
}
|
||||
|
||||
storiesOf('ngrx|Store', module)
|
||||
.addDecorator(
|
||||
moduleMetadata({
|
||||
imports: [StoreModule.forRoot({})],
|
||||
declarations: [WithStoreComponent],
|
||||
})
|
||||
)
|
||||
.add('With component', () => {
|
||||
return {
|
||||
component: WithStoreComponent,
|
||||
};
|
||||
});"
|
||||
`;
|
||||
|
||||
exports[`inject-decorator injectDecorator option is false does not inject stories decorator after the all "storiesOf" functions 1`] = `
|
||||
"import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { withInfo } from '@storybook/addon-info';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import DocgenButton from '../components/DocgenButton';
|
||||
import FlowTypeButton from '../components/FlowTypeButton';
|
||||
import BaseButton from '../components/BaseButton';
|
||||
import TableComponent from '../components/TableComponent';
|
||||
|
||||
storiesOf('Addons|Info.React Docgen', module)
|
||||
.add(
|
||||
'Comments from PropType declarations',
|
||||
withInfo(
|
||||
'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
|
||||
)(() => <DocgenButton onClick={action('clicked')} label=\\"Docgen Button\\" />)
|
||||
)
|
||||
.add(
|
||||
'Comments from Flow declarations',
|
||||
withInfo(
|
||||
'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
|
||||
)(() => <FlowTypeButton onClick={action('clicked')} label=\\"Flow Typed Button\\" />)
|
||||
)
|
||||
.add(
|
||||
'Comments from component declaration',
|
||||
withInfo(
|
||||
'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading'
|
||||
)(() => <BaseButton onClick={action('clicked')} label=\\"Button\\" />)
|
||||
);
|
||||
|
||||
const markdownDescription = \`
|
||||
#### You can use markdown in your withInfo() description.
|
||||
|
||||
Sometimes you might want to manually include some code examples:
|
||||
~~~js
|
||||
const Button = () => <button />;
|
||||
~~~
|
||||
|
||||
Maybe include a [link](http://storybook.js.org) to your project as well.
|
||||
\`;
|
||||
|
||||
storiesOf('Addons|Info.Markdown', module).add(
|
||||
'Displays Markdown in description',
|
||||
withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label=\\"Button\\" />)
|
||||
);
|
||||
|
||||
storiesOf('Addons|Info.Options.inline', module).add(
|
||||
'Inlines component inside story',
|
||||
withInfo({
|
||||
text: 'Component should be inlined between description and PropType table',
|
||||
inline: true, // Displays info inline vs click button to view
|
||||
})(() => <BaseButton label=\\"Button\\" />)
|
||||
);
|
||||
|
||||
storiesOf('Addons|Info.Options.header', module).add(
|
||||
'Shows or hides Info Addon header',
|
||||
withInfo({
|
||||
text: 'The Info Addon header should be hidden',
|
||||
header: false, // Toggles display of header with component name and description
|
||||
})(() => <BaseButton label=\\"Button\\" />)
|
||||
);
|
||||
|
||||
storiesOf('Addons|Info.Options.source', module).add(
|
||||
'Shows or hides Info Addon source',
|
||||
withInfo({
|
||||
text: 'The Info Addon source section should be hidden',
|
||||
source: false, // Displays the source of story Component
|
||||
})(() => <BaseButton label=\\"Button\\" />)
|
||||
);
|
||||
|
||||
storiesOf('Addons|Info.Options.propTables', module).add(
|
||||
'Shows additional component prop tables',
|
||||
withInfo({
|
||||
text: 'There should be a prop table added for a component not included in the story',
|
||||
propTables: [FlowTypeButton],
|
||||
})(() => <BaseButton label=\\"Button\\" />)
|
||||
);
|
||||
|
||||
storiesOf('Addons|Info.Options.propTablesExclude', module).add(
|
||||
'Exclude component from prop tables',
|
||||
withInfo({
|
||||
text: 'This can exclude extraneous components from being displayed in prop tables.',
|
||||
propTablesExclude: [FlowTypeButton],
|
||||
})(() => (
|
||||
<div>
|
||||
<BaseButton label=\\"Button\\" />
|
||||
<FlowTypeButton label=\\"Flow Typed Button\\" />
|
||||
</div>
|
||||
))
|
||||
);
|
||||
|
||||
storiesOf('Addons|Info.Options.styles', module)
|
||||
.add(
|
||||
'Extend info styles with an object',
|
||||
withInfo({
|
||||
styles: {
|
||||
button: {
|
||||
base: {
|
||||
background: 'purple',
|
||||
},
|
||||
},
|
||||
header: {
|
||||
h1: {
|
||||
color: 'green',
|
||||
},
|
||||
},
|
||||
},
|
||||
})(() => <BaseButton label=\\"Button\\" />)
|
||||
)
|
||||
.add(
|
||||
'Full control over styles using a function',
|
||||
withInfo({
|
||||
styles: stylesheet => ({
|
||||
...stylesheet,
|
||||
header: {
|
||||
...stylesheet.header,
|
||||
h1: {
|
||||
...stylesheet.header.h1,
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
}),
|
||||
})(() => <BaseButton label=\\"Button\\" />)
|
||||
);
|
||||
|
||||
storiesOf('Addons|Info.Options.TableComponent', module).add(
|
||||
'Use a custom component for the table',
|
||||
withInfo({
|
||||
TableComponent,
|
||||
})(() => <BaseButton label=\\"Button\\" />)
|
||||
);
|
||||
|
||||
storiesOf('Addons|Info.Decorator', module)
|
||||
.addDecorator((story, context) =>
|
||||
withInfo('Info could be used as a global or local decorator as well.')(story)(context)
|
||||
)
|
||||
.add('Use Info as story decorator', () => <BaseButton label=\\"Button\\" />);
|
||||
|
||||
const hoc = WrapComponent => ({ ...props }) => <WrapComponent {...props} />;
|
||||
|
||||
const Input = hoc(() => <input type=\\"text\\" />);
|
||||
|
||||
const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
|
||||
|
||||
storiesOf('Addons|Info.GitHub issues', module).add(
|
||||
'#1814',
|
||||
withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => (
|
||||
<div>
|
||||
<Input />
|
||||
<TextArea />
|
||||
</div>
|
||||
))
|
||||
);
|
||||
"
|
||||
`;
|
||||
|
||||
exports[`inject-decorator positive - angular calculates "adds" map 1`] = `
|
||||
Object {
|
||||
"Custom|ng-content@Default": Object {
|
||||
|
||||
@ -69,6 +69,19 @@ export function generateSourceWithDecorators(source, decorator, parserType) {
|
||||
};
|
||||
}
|
||||
|
||||
export function generateSourceWithoutDecorators(source, parserType) {
|
||||
const parser = getParser(parserType);
|
||||
const ast = parser.parse(source);
|
||||
|
||||
const { comments = [] } = ast;
|
||||
|
||||
return {
|
||||
changed: true,
|
||||
source,
|
||||
comments,
|
||||
};
|
||||
}
|
||||
|
||||
export function generateAddsMap(source, parserType) {
|
||||
const parser = getParser(parserType);
|
||||
const ast = parser.parse(source);
|
||||
|
||||
@ -18,9 +18,9 @@ function transform(source) {
|
||||
const addsMap = JSON.stringify(result.addsMap);
|
||||
|
||||
return `
|
||||
var withStorySource = require('@storybook/addon-storysource').withStorySource;
|
||||
var __STORY__ = ${sourceJson};
|
||||
var __ADDS_MAP__ = ${addsMap};
|
||||
export var withStorySource = require('@storybook/addon-storysource').withStorySource;
|
||||
export var __STORY__ = ${sourceJson};
|
||||
export var __ADDS_MAP__ = ${addsMap};
|
||||
|
||||
${result.source}
|
||||
`;
|
||||
|
||||
@ -2,6 +2,7 @@ import defaultOptions from './default-options';
|
||||
|
||||
import {
|
||||
generateSourceWithDecorators,
|
||||
generateSourceWithoutDecorators,
|
||||
generateStorySource,
|
||||
generateAddsMap,
|
||||
} from './generate-helpers';
|
||||
@ -17,11 +18,11 @@ function extendOptions(source, comments, filepath, options) {
|
||||
}
|
||||
|
||||
function inject(source, decorator, filepath, options = {}) {
|
||||
const { changed, source: newSource, comments } = generateSourceWithDecorators(
|
||||
source,
|
||||
decorator,
|
||||
options.parser
|
||||
);
|
||||
const { injectDecorator = true } = options;
|
||||
const { changed, source: newSource, comments } =
|
||||
injectDecorator === true
|
||||
? generateSourceWithDecorators(source, decorator, options.parser)
|
||||
: generateSourceWithoutDecorators(source, options.parser);
|
||||
|
||||
if (!changed) {
|
||||
return {
|
||||
|
||||
@ -118,4 +118,58 @@ describe('inject-decorator', () => {
|
||||
expect(result.addsMap).toEqual({});
|
||||
expect(result.source).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe('injectDecorator option is false', () => {
|
||||
const mockFilePath = './__mocks__/inject-decorator.stories.txt';
|
||||
const source = fs.readFileSync(mockFilePath, 'utf-8');
|
||||
const result = injectDecorator(
|
||||
source,
|
||||
ADD_DECORATOR_STATEMENT,
|
||||
path.resolve(__dirname, mockFilePath),
|
||||
{
|
||||
injectDecorator: false,
|
||||
parser: 'javascript',
|
||||
}
|
||||
);
|
||||
|
||||
it('does not inject stories decorator after the all "storiesOf" functions', () => {
|
||||
expect(result.source).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('injectDecorator option is false - angular', () => {
|
||||
const mockFilePath = './__mocks__/inject-decorator.angular-stories.txt';
|
||||
const source = fs.readFileSync(mockFilePath, 'utf-8');
|
||||
const result = injectDecorator(
|
||||
source,
|
||||
ADD_DECORATOR_STATEMENT,
|
||||
path.resolve(__dirname, mockFilePath),
|
||||
{
|
||||
injectDecorator: false,
|
||||
parser: 'typescript',
|
||||
}
|
||||
);
|
||||
|
||||
it('does not inject stories decorator after the all "storiesOf" functions', () => {
|
||||
expect(result.source).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('injectDecorator option is false - ts', () => {
|
||||
const mockFilePath = './__mocks__/inject-decorator.ts.txt';
|
||||
const source = fs.readFileSync(mockFilePath, 'utf-8');
|
||||
const result = injectDecorator(
|
||||
source,
|
||||
ADD_DECORATOR_STATEMENT,
|
||||
path.resolve(__dirname, mockFilePath),
|
||||
{
|
||||
injectDecorator: false,
|
||||
parser: 'typescript',
|
||||
}
|
||||
);
|
||||
|
||||
it('does not inject stories decorator after the all "storiesOf" functions', () => {
|
||||
expect(result.source).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "Storybook addon to change the viewport size to mobile",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -11,12 +11,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-alpha.16",
|
||||
"@storybook/components": "4.0.0-alpha.16",
|
||||
"@storybook/core-events": "4.0.0-alpha.16",
|
||||
"@emotion/styled": "0.10.5",
|
||||
"@storybook/addons": "4.0.0-alpha.20",
|
||||
"@storybook/components": "4.0.0-alpha.20",
|
||||
"@storybook/core-events": "4.0.0-alpha.20",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-emotion": "^9.2.6",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { document } from 'global';
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { ActionBar, ActionButton, Button, Select, Field } from '@storybook/components';
|
||||
|
||||
@ -16,7 +16,7 @@ import {
|
||||
} from '../../shared';
|
||||
|
||||
const storybookIframe = 'storybook-preview-iframe';
|
||||
const Container = styled('div')({
|
||||
const Container = styled.div({
|
||||
padding: 15,
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/angular",
|
||||
"bugs": {
|
||||
@ -22,16 +22,17 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.0.0-rc.2",
|
||||
"@storybook/core": "4.0.0-alpha.16",
|
||||
"@storybook/node-logger": "4.0.0-alpha.16",
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@storybook/core": "4.0.0-alpha.20",
|
||||
"@storybook/node-logger": "4.0.0-alpha.20",
|
||||
"angular2-template-loader": "^0.6.2",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.4.2",
|
||||
"react-dom": "^16.4.2",
|
||||
"sass-loader": "^7.1.0",
|
||||
"ts-loader": "^4.4.2",
|
||||
"ts-loader": "^4.5.0",
|
||||
"webpack": "^4.17.1",
|
||||
"zone.js": "^0.8.26"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
4
app/angular/src/server/angular-cli_config.js
vendored
4
app/angular/src/server/angular-cli_config.js
vendored
@ -32,8 +32,8 @@ export function getAngularCliWebpackConfigOptions(dirToSearch) {
|
||||
);
|
||||
|
||||
return {
|
||||
root: project.root,
|
||||
projectRoot: dirToSearch,
|
||||
root: dirToSearch,
|
||||
projectRoot: path.resolve(dirToSearch, project.root),
|
||||
supportES2015: false,
|
||||
tsConfig: {
|
||||
options: {},
|
||||
|
||||
7
app/angular/src/server/wrapInitialConfig.js
vendored
7
app/angular/src/server/wrapInitialConfig.js
vendored
@ -1,3 +1,5 @@
|
||||
import path from 'path';
|
||||
import { ContextReplacementPlugin } from 'webpack';
|
||||
import loadTsConfig from './ts_config';
|
||||
|
||||
export default (config, configDir) => ({
|
||||
@ -35,4 +37,9 @@ export default (config, configDir) => ({
|
||||
...config.resolve,
|
||||
extensions: [...config.resolve.extensions, '.ts', '.tsx'],
|
||||
},
|
||||
plugins: [
|
||||
...config.plugins,
|
||||
// See https://github.com/angular/angular/issues/11580#issuecomment-401127742
|
||||
new ContextReplacementPlugin(/@angular(\\|\/)core(\\|\/)fesm5/, path.resolve(__dirname, '..')),
|
||||
],
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/html",
|
||||
"bugs": {
|
||||
@ -21,8 +21,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.0.0-rc.2",
|
||||
"@storybook/core": "4.0.0-alpha.16",
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@storybook/core": "4.0.0-alpha.20",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"html-loader": "^0.5.5",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/marko",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/marko",
|
||||
"bugs": {
|
||||
@ -22,8 +22,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.0.0-rc.2",
|
||||
"@storybook/core": "4.0.0-alpha.16",
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@storybook/core": "4.0.0-alpha.20",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"marko-loader": "^1.3.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/mithril",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/mithril",
|
||||
"bugs": {
|
||||
@ -22,9 +22,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.0.0-rc.2",
|
||||
"@babel/runtime": "^7.0.0-rc.2",
|
||||
"@storybook/core": "4.0.0-alpha.16",
|
||||
"@babel/plugin-transform-react-jsx": "^7.0.0",
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@storybook/core": "4.0.0-alpha.20",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.4.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/polymer",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/polymer",
|
||||
"bugs": {
|
||||
@ -21,14 +21,15 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/polyfill": "^7.0.0-rc.2",
|
||||
"@babel/runtime": "^7.0.0-rc.2",
|
||||
"@storybook/core": "4.0.0-alpha.16",
|
||||
"@babel/polyfill": "^7.0.0",
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@storybook/core": "4.0.0-alpha.20",
|
||||
"@webcomponents/webcomponentsjs": "^1.2.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.4.2",
|
||||
"react-dom": "^16.4.2"
|
||||
"react-dom": "^16.4.2",
|
||||
"webpack": "^4.17.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"lit-html": "^0.10.2",
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import { IgnorePlugin } from 'webpack';
|
||||
|
||||
export default config => ({
|
||||
...config,
|
||||
module: {
|
||||
@ -16,4 +18,9 @@ export default config => ({
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
...config.plugins,
|
||||
// See https://github.com/webcomponents/webcomponentsjs/issues/794#issuecomment-386554298
|
||||
new IgnorePlugin(/^vertx$/),
|
||||
],
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-native",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "A better way to develop React Native Components for your app",
|
||||
"keywords": [
|
||||
"react",
|
||||
@ -25,11 +25,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-alpha.16",
|
||||
"@storybook/channel-websocket": "4.0.0-alpha.16",
|
||||
"@storybook/core": "4.0.0-alpha.16",
|
||||
"@storybook/core-events": "4.0.0-alpha.16",
|
||||
"@storybook/ui": "4.0.0-alpha.16",
|
||||
"@storybook/addons": "4.0.0-alpha.20",
|
||||
"@storybook/channel-websocket": "4.0.0-alpha.20",
|
||||
"@storybook/core": "4.0.0-alpha.20",
|
||||
"@storybook/core-events": "4.0.0-alpha.20",
|
||||
"@storybook/ui": "4.0.0-alpha.20",
|
||||
"babel-loader": "^7.1.5",
|
||||
"babel-plugin-macros": "^2.3.0",
|
||||
"babel-plugin-syntax-async-functions": "^6.13.0",
|
||||
@ -52,18 +52,18 @@
|
||||
"find-cache-dir": "^2.0.0",
|
||||
"generate-page-webpack-plugin": "^1.0.0",
|
||||
"global": "^4.3.2",
|
||||
"json5": "^1.0.1",
|
||||
"json5": "^2.0.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"raw-loader": "^0.5.1",
|
||||
"react-dev-utils": "6.0.0-next.3e165448",
|
||||
"react-native-compat": "^1.0.0",
|
||||
"react-native-iphone-x-helper": "^1.0.3",
|
||||
"shelljs": "^0.8.2",
|
||||
"universal-dotenv": "^1.8.2",
|
||||
"universal-dotenv": "^1.9.0",
|
||||
"url-parse": "^1.4.3",
|
||||
"uuid": "^3.3.2",
|
||||
"webpack": "^4.16.4",
|
||||
"webpack-dev-middleware": "^3.1.3",
|
||||
"webpack": "^4.17.1",
|
||||
"webpack-dev-middleware": "^3.2.0",
|
||||
"webpack-hot-middleware": "^2.22.3",
|
||||
"ws": "^6.0.0"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "4.0.0-alpha.16",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/react",
|
||||
"bugs": {
|
||||
@ -22,18 +22,18 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/preset-flow": "^7.0.0-rc.2",
|
||||
"@babel/preset-react": "^7.0.0-rc.2",
|
||||
"@babel/runtime": "^7.0.0-rc.2",
|
||||
"@storybook/core": "4.0.0-alpha.16",
|
||||
"@babel/preset-flow": "^7.0.0",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@emotion/styled": "0.10.5",
|
||||
"@storybook/core": "4.0.0-alpha.20",
|
||||
"babel-plugin-react-docgen": "^2.0.0-babel7.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"emotion": "^9.2.6",
|
||||
"global": "^4.3.2",
|
||||
"lodash.flattendeep": "^4.4.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-dev-utils": "6.0.0-next.3e165448",
|
||||
"react-emotion": "^9.2.6"
|
||||
"react-dev-utils": "6.0.0-next.3e165448"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^7.0.0 || ^8.0.0 || ^8.0.0-beta.6",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const Button = styled('button')({
|
||||
const Button = styled.button({
|
||||
border: '1px solid #eee',
|
||||
borderRadius: 3,
|
||||
backgroundColor: '#FFFFFF',
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const Main = styled('article')({
|
||||
const Main = styled.article({
|
||||
margin: 15,
|
||||
maxWidth: 600,
|
||||
lineHeight: 1.4,
|
||||
fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
|
||||
});
|
||||
|
||||
const Title = styled('h1')({});
|
||||
const Title = styled.h1({});
|
||||
|
||||
const Note = styled('p')({
|
||||
const Note = styled.p({
|
||||
opacity: 0.5,
|
||||
});
|
||||
|
||||
const InlineCode = styled('code')({
|
||||
const InlineCode = styled.code({
|
||||
fontSize: 15,
|
||||
fontWeight: 600,
|
||||
padding: '2px 5px',
|
||||
@ -25,7 +25,7 @@ const InlineCode = styled('code')({
|
||||
color: '#3a3a3a',
|
||||
});
|
||||
|
||||
const Link = styled('a')({
|
||||
const Link = styled.a({
|
||||
color: '#1474f3',
|
||||
textDecoration: 'none',
|
||||
borderBottom: '1px solid #1474f3',
|
||||
|
||||
2
app/riot/.npmignore
Normal file
2
app/riot/.npmignore
Normal file
@ -0,0 +1,2 @@
|
||||
src
|
||||
.babelrc
|
||||
26
app/riot/README.md
Normal file
26
app/riot/README.md
Normal file
@ -0,0 +1,26 @@
|
||||
# Storybook for Riot <sup>alpha</sup>
|
||||
|
||||
* * *
|
||||
|
||||
Storybook for Riot is a UI development environment for the components written with riot.js.
|
||||
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.
|
||||
|
||||
## Getting Started
|
||||
|
||||
```sh
|
||||
npm i -g @storybook/cli
|
||||
cd my-app
|
||||
getstorybook --riot
|
||||
```
|
||||
|
||||
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.
|
||||
4
app/riot/bin/build.js
Executable file
4
app/riot/bin/build.js
Executable file
@ -0,0 +1,4 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
|
||||
require('../dist/server/build');
|
||||
3
app/riot/bin/index.js
Executable file
3
app/riot/bin/index.js
Executable file
@ -0,0 +1,3 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
require('../dist/server');
|
||||
49
app/riot/package.json
Normal file
49
app/riot/package.json
Normal file
@ -0,0 +1,49 @@
|
||||
{
|
||||
"name": "@storybook/riot",
|
||||
"version": "4.0.0-alpha.20",
|
||||
"description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/riot",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
"start-storybook": "./bin/index.js",
|
||||
"storybook-server": "./bin/index.js"
|
||||
},
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@storybook/core": "4.0.0-alpha.20",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"moment": "^2.22.2",
|
||||
"raw-loader": "^0.5.1",
|
||||
"react": "^16.4.2",
|
||||
"react-dom": "^16.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-transform-modules-commonjs": "^7.0.0",
|
||||
"@babel/plugin-transform-runtime": "^7.0.0",
|
||||
"@babel/preset-env": "^7.0.0",
|
||||
"@babel/preset-flow": "^7.0.0",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"cross-env": "^5.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^7.0.0 || ^8.0.0 || ^8.0.0-beta.6",
|
||||
"riot": "^3.0.0 || ^4.0.0",
|
||||
"riot-compiler": "^3.5.1 || ^4.0.0",
|
||||
"riot-hot-reload": "^1.0.0",
|
||||
"riot-tag-loader": "^2.0.0 || ^3.0.0"
|
||||
}
|
||||
}
|
||||
14
app/riot/src/client/index.js
Normal file
14
app/riot/src/client/index.js
Normal file
@ -0,0 +1,14 @@
|
||||
export {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
configure,
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
render,
|
||||
mount,
|
||||
tag,
|
||||
compileNow,
|
||||
asCompiledCode,
|
||||
} from './preview';
|
||||
@ -0,0 +1,5 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`render a riot element can nest several tags 1`] = `"<matriochka><div><tag1><div>Inside tag1:<ul><li><tag2><div>Inside tag2:<ul><li><tag3><div>Inside tag3:<ul><li><tag4><div>Inside tag4:<ul><li><tag5><div>Inside tag5:<ul><li>Content</li></ul></div></tag5></li></ul></div></tag4></li></ul></div></tag3></li></ul></div></tag2></li></ul></div></tag1></div></matriochka>"`;
|
||||
|
||||
exports[`render a riot element can template some vars 1`] = `"<simpletest test=\\"with a parameter\\"><div>simple test (with a parameter). Oh, by the way (value is mapped to riotValue)</div></simpletest>"`;
|
||||
13
app/riot/src/client/preview/compileNow.js
Normal file
13
app/riot/src/client/preview/compileNow.js
Normal file
@ -0,0 +1,13 @@
|
||||
import compiler from 'riot-compiler';
|
||||
|
||||
export function asCompiledCode(text) {
|
||||
return compiler
|
||||
.compile(text, {})
|
||||
.replace('var riot = require("riot")', '')
|
||||
.replace('riot.tag2(', 'tag2(');
|
||||
}
|
||||
|
||||
export function compileNow(tag2, text) {
|
||||
// eslint-disable-next-line no-eval
|
||||
return tag2 && eval(asCompiledCode(text));
|
||||
}
|
||||
3
app/riot/src/client/preview/globals.js
Normal file
3
app/riot/src/client/preview/globals.js
Normal file
@ -0,0 +1,3 @@
|
||||
import { window } from 'global';
|
||||
|
||||
window.STORYBOOK_ENV = 'riot';
|
||||
22
app/riot/src/client/preview/index.js
Normal file
22
app/riot/src/client/preview/index.js
Normal file
@ -0,0 +1,22 @@
|
||||
import { start } from '@storybook/core/client';
|
||||
|
||||
import './globals';
|
||||
import riot, { tag2, mount as vendorMount } from 'riot';
|
||||
import render from './render';
|
||||
import { compileNow as unboundCompileNow, asCompiledCode } from './compileNow';
|
||||
|
||||
const { clientApi, configApi, forceReRender } = start(render);
|
||||
|
||||
export const {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
clearDecorators,
|
||||
getStorybook,
|
||||
} = clientApi;
|
||||
|
||||
export const { configure } = configApi;
|
||||
const mount = vendorMount.bind(riot, '#root');
|
||||
const compileNow = unboundCompileNow.bind(null, tag2);
|
||||
export { forceReRender, render, tag2 as tag, mount, compileNow, asCompiledCode };
|
||||
91
app/riot/src/client/preview/render-riot.js
Normal file
91
app/riot/src/client/preview/render-riot.js
Normal file
@ -0,0 +1,91 @@
|
||||
import { document } from 'global';
|
||||
import { mount, unregister, tag2 as tag } from 'riot';
|
||||
import compiler from 'riot-compiler';
|
||||
|
||||
const alreadyCompiledMarker = "var riot = require('riot')";
|
||||
|
||||
function guessRootName(stringified) {
|
||||
const whiteSpaceLocation = stringified.indexOf(' ', stringified.indexOf('<') + 1);
|
||||
const firstWhitespace = whiteSpaceLocation === -1 ? stringified.length : whiteSpaceLocation;
|
||||
const supposedName = stringified.trim().match(/^<[^ >]+\/>$/)
|
||||
? stringified.trim().replace(/[<>/]/g, '')
|
||||
: stringified.substring(
|
||||
stringified.indexOf('<') + 1,
|
||||
Math.min(firstWhitespace, stringified.indexOf('>'))
|
||||
);
|
||||
const matchingBuiltInTag = document.createElement(supposedName).constructor.name;
|
||||
return matchingBuiltInTag === 'HTMLUnknownElement' ? supposedName : 'root';
|
||||
}
|
||||
|
||||
function compileText(code, rootName) {
|
||||
const sourceCodeEndOfHtml =
|
||||
(Math.min(code.indexOf('<style') + 1, code.indexOf('<script') + 1) || code.length + 1) - 1;
|
||||
const sourceCodeReformatted =
|
||||
code.substring(0, sourceCodeEndOfHtml).replace(/[\n\r\s]+/g, ' ') +
|
||||
code.substring(sourceCodeEndOfHtml);
|
||||
const sourceCode =
|
||||
rootName === 'root' ? `<root>${sourceCodeReformatted}</root>` : sourceCodeReformatted;
|
||||
return compiler
|
||||
.compile(sourceCode, {})
|
||||
.replace(alreadyCompiledMarker, '')
|
||||
.trim();
|
||||
}
|
||||
|
||||
const getRidOfRiotNoise = compiled =>
|
||||
compiled.replace(/riot\.tag2/g, 'tag2').replace(alreadyCompiledMarker, '');
|
||||
|
||||
function renderStringified({
|
||||
tags,
|
||||
template = `<${(tags[0] || []).boundAs || guessRootName(tags[0] || '')}/>`,
|
||||
}) {
|
||||
const tag2 = tag; // eslint-disable-line no-unused-vars
|
||||
tags.forEach(oneTag => {
|
||||
const rootName = oneTag.boundAs || guessRootName(oneTag);
|
||||
const { content } = oneTag || {};
|
||||
const code = content ? content.trim() : oneTag || '';
|
||||
const compiled =
|
||||
code.indexOf(alreadyCompiledMarker) !== -1 ? code : compileText(code, rootName);
|
||||
unregister(rootName);
|
||||
eval(getRidOfRiotNoise(`${compiled}`)); // eslint-disable-line no-eval
|
||||
});
|
||||
const sourceCode = `<root>${template}</root>`;
|
||||
if (template !== '<root/>') eval(getRidOfRiotNoise(`${compiler.compile(sourceCode, {})}`)); // eslint-disable-line no-eval
|
||||
|
||||
mount('*');
|
||||
}
|
||||
|
||||
function renderRaw(sourceCode) {
|
||||
const tag2 = tag; // eslint-disable-line no-unused-vars
|
||||
// eslint-disable-next-line no-eval
|
||||
eval(
|
||||
getRidOfRiotNoise(
|
||||
`${compiler.compile(sourceCode.replace(alreadyCompiledMarker, '').trim(), {})}`
|
||||
)
|
||||
);
|
||||
mount('root', /tag2\s*\(\s*'([^']+)'/.exec(sourceCode)[1], {});
|
||||
}
|
||||
|
||||
function renderCompiledButUnmounted(component) {
|
||||
mount('root', component.tagName, component.opts || {});
|
||||
}
|
||||
|
||||
export function render(component) {
|
||||
if (typeof component === 'string') {
|
||||
renderRaw(component);
|
||||
return true;
|
||||
}
|
||||
const { tags } = component || {};
|
||||
if (Array.isArray(tags)) {
|
||||
renderStringified(component);
|
||||
return true;
|
||||
}
|
||||
if (component && component.tagName) {
|
||||
renderCompiledButUnmounted(component);
|
||||
return true;
|
||||
}
|
||||
if (component && component.length) {
|
||||
// already rendered, nothing to do
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
97
app/riot/src/client/preview/render-riot.test.js
Normal file
97
app/riot/src/client/preview/render-riot.test.js
Normal file
@ -0,0 +1,97 @@
|
||||
import { document } from 'global';
|
||||
import { unregister, tag2, mount } from 'riot';
|
||||
import compiler from 'riot-compiler';
|
||||
import { render } from './render-riot';
|
||||
|
||||
const rootElement = document.createElement('div');
|
||||
rootElement.id = 'root';
|
||||
document.body = document.createElement('body');
|
||||
document.body.appendChild(rootElement);
|
||||
|
||||
const context = {
|
||||
unregister,
|
||||
compiler,
|
||||
tag2,
|
||||
mount,
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
unregister('#root');
|
||||
rootElement.dataset.is = 'root';
|
||||
});
|
||||
|
||||
describe('render a riot element', () => {
|
||||
it('should not work with nothing', () => {
|
||||
expect(render(null, context)).toBe(false);
|
||||
|
||||
expect(rootElement.innerHTML).toEqual('');
|
||||
});
|
||||
|
||||
it('can work with some text', () => {
|
||||
expect(render({ tags: ['<div><p>some tests</p></div>'] }, context)).toBe(true);
|
||||
|
||||
expect(rootElement.innerHTML).toEqual('<div><p>some tests</p></div>');
|
||||
});
|
||||
|
||||
it('can work with raw code', () => {
|
||||
expect(render("riot.tag2('root', '<div>raw code</div>', '', '', () => {})", context)).toBe(
|
||||
true
|
||||
);
|
||||
|
||||
expect(rootElement.innerHTML).toEqual('<div>raw code</div>');
|
||||
});
|
||||
|
||||
it('can work with compiled code', () => {
|
||||
expect(render([{}], context)).toBe(true);
|
||||
// does only work in true mode, and not in jest mode
|
||||
});
|
||||
|
||||
it('works with a json consisting in a tagName and opts', () => {
|
||||
tag2('hello', '<p>Hello { opts.suffix }</p>', '', '', () => {});
|
||||
|
||||
expect(render({ tagName: 'hello', opts: { suffix: 'World' } }, context)).toBe(true);
|
||||
|
||||
expect(rootElement.innerHTML).toEqual('<p>Hello World</p>');
|
||||
});
|
||||
|
||||
it('can nest several tags', () => {
|
||||
expect(
|
||||
render(
|
||||
{
|
||||
tags: [
|
||||
'<Tag1><div>Inside tag1:<ul><li><Tag2><yield/></Tag2></li></ul></div></Tag1>',
|
||||
'<Tag2><div>Inside tag2:<ul><li><Tag3><yield/></Tag3></li></ul></div></Tag2>',
|
||||
'<Tag3><div>Inside tag3:<ul><li><Tag4><yield/></Tag4></li></ul></div></Tag3>',
|
||||
'<Tag4><div>Inside tag4:<ul><li><Tag5><yield/></Tag5></li></ul></div></Tag4>',
|
||||
'<Tag5><div>Inside tag5:<ul><li><yield/></li></ul></div></Tag5>',
|
||||
],
|
||||
template: '<Matriochka><div><Tag1>Content</Tag1></div></Matriochka>',
|
||||
},
|
||||
context
|
||||
)
|
||||
).toBe(true);
|
||||
|
||||
expect(rootElement.innerHTML).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('can template some vars', () => {
|
||||
expect(
|
||||
render(
|
||||
{
|
||||
tags: [
|
||||
{
|
||||
content:
|
||||
"<SimpleTest><div>simple test ({opts.test || 'without parameter'}). Oh, by the way ({opts.riotValue || '... well, nothing'})</div></SimpleTest>",
|
||||
boundAs: 'mustBeUniquePlease',
|
||||
},
|
||||
],
|
||||
template:
|
||||
'<SimpleTest test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
|
||||
},
|
||||
context
|
||||
)
|
||||
).toBe(true);
|
||||
|
||||
expect(rootElement.innerHTML).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
29
app/riot/src/client/preview/render.js
Normal file
29
app/riot/src/client/preview/render.js
Normal file
@ -0,0 +1,29 @@
|
||||
import { document } from 'global';
|
||||
import { stripIndents } from 'common-tags';
|
||||
import { unregister } from 'riot';
|
||||
import { render as renderRiot } from './render-riot';
|
||||
|
||||
export default function renderMain({
|
||||
story,
|
||||
selectedKind,
|
||||
selectedStory,
|
||||
showMain = () => {},
|
||||
showError = () => {},
|
||||
}) {
|
||||
showMain();
|
||||
unregister('#root');
|
||||
const rootElement = document.getElementById('root');
|
||||
rootElement.innerHTML = '';
|
||||
rootElement.dataset.is = 'root';
|
||||
const component = story();
|
||||
const rendered = renderRiot(component);
|
||||
if (!rendered)
|
||||
showError({
|
||||
title: `Expecting a riot snippet or a riot component from the story: "${selectedStory}" of "${selectedKind}".`,
|
||||
description: stripIndents`
|
||||
Did you forget to return the component snippet from the story?
|
||||
Use "() => <your snippet or node>" or when defining the story.
|
||||
`,
|
||||
});
|
||||
return rendered;
|
||||
}
|
||||
4
app/riot/src/server/build.js
Normal file
4
app/riot/src/server/build.js
Normal file
@ -0,0 +1,4 @@
|
||||
import { buildStatic } from '@storybook/core/server';
|
||||
import options from './options';
|
||||
|
||||
buildStatic(options);
|
||||
5
app/riot/src/server/index.js
Normal file
5
app/riot/src/server/index.js
Normal file
@ -0,0 +1,5 @@
|
||||
import { buildDev } from '@storybook/core/server';
|
||||
|
||||
import options from './options';
|
||||
|
||||
buildDev(options);
|
||||
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