From e14d57e63c7bb9243af43cb84e333a92224fb731 Mon Sep 17 00:00:00 2001 From: RGR Date: Mon, 25 Mar 2019 21:55:44 +0100 Subject: [PATCH 001/162] fix(webpack-dev-server) : enable webpack to rebuild changes in node_modules by default --- lib/core/src/server/dev-server.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/core/src/server/dev-server.js b/lib/core/src/server/dev-server.js index 9962d613d89..9bd19f080f7 100644 --- a/lib/core/src/server/dev-server.js +++ b/lib/core/src/server/dev-server.js @@ -99,7 +99,6 @@ export default function(options) { publicPath: previewConfig.output.publicPath, watchOptions: { aggregateTimeout: 1, - ignored: /node_modules/, ...(previewConfig.watchOptions || {}), }, // this actually causes 0 (regular) output from wdm & webpack From 924626363dfec4323f1f1b8017070e08c4c510be Mon Sep 17 00:00:00 2001 From: Filipp Riabchun Date: Sat, 13 Apr 2019 20:55:42 +0200 Subject: [PATCH 002/162] Watch `node_modules` in manager config --- lib/core/src/server/dev-server.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/core/src/server/dev-server.js b/lib/core/src/server/dev-server.js index 9bd19f080f7..0645bbe6ee7 100644 --- a/lib/core/src/server/dev-server.js +++ b/lib/core/src/server/dev-server.js @@ -45,7 +45,6 @@ export default function(options) { webpack(config).watch( { aggregateTimeout: 1, - ignored: /node_modules/, }, (err, stats) => { managerTotalTime = process.hrtime(startTime); From 60a085065be6db6459ed64d2d1cdfabbb49d6d2e Mon Sep 17 00:00:00 2001 From: Kai Roeder Date: Sat, 20 Apr 2019 15:54:27 +0200 Subject: [PATCH 003/162] WIP; Migrate @storybook/angular to typescript --- app/angular/package.json | 2 + app/angular/src/client/{index.js => index.ts} | 1 + ...ular-polyfills.js => angular-polyfills.ts} | 0 .../client/preview/{globals.js => globals.ts} | 0 .../src/client/preview/{index.js => index.ts} | 0 .../client/preview/{render.js => render.ts} | 3 +- .../angular-cli_config.test.ts} | 4 +- app/angular/src/server/__tests__/angular.json | 108 ++++++++++++++++++ .../create-fork-ts-checker-plugin.test.ts} | 10 +- .../ts_config.test.ts} | 2 +- ...ar-cli_config.js => angular-cli_config.ts} | 35 ++++-- ...ular-cli_utils.js => angular-cli_utils.ts} | 29 +++-- app/angular/src/server/{build.js => build.ts} | 0 ...in.js => create-fork-ts-checker-plugin.ts} | 3 +- ...cli.js => framework-preset-angular-cli.ts} | 3 +- ...angular.js => framework-preset-angular.ts} | 3 +- app/angular/src/server/index.js | 4 - app/angular/src/server/index.ts | 11 ++ .../src/server/{options.js => options.ts} | 0 .../src/server/{ts_config.js => ts_config.ts} | 19 ++- app/angular/src/typings.d.ts | 2 + app/angular/tsconfig.json | 11 +- tsconfig.json | 10 +- yarn.lock | 11 +- 24 files changed, 210 insertions(+), 61 deletions(-) rename app/angular/src/client/{index.js => index.ts} (85%) rename app/angular/src/client/preview/{angular-polyfills.js => angular-polyfills.ts} (100%) rename app/angular/src/client/preview/{globals.js => globals.ts} (100%) rename app/angular/src/client/preview/{index.js => index.ts} (100%) rename app/angular/src/client/preview/{render.js => render.ts} (84%) rename app/angular/src/server/{angular-cli_config.test.js => __tests__/angular-cli_config.test.ts} (84%) create mode 100644 app/angular/src/server/__tests__/angular.json rename app/angular/src/server/{create-fork-ts-checker-plugin.test.js => __tests__/create-fork-ts-checker-plugin.test.ts} (77%) rename app/angular/src/server/{ts_config.test.js => __tests__/ts_config.test.ts} (94%) rename app/angular/src/server/{angular-cli_config.js => angular-cli_config.ts} (82%) rename app/angular/src/server/{angular-cli_utils.js => angular-cli_utils.ts} (75%) rename app/angular/src/server/{build.js => build.ts} (100%) rename app/angular/src/server/{create-fork-ts-checker-plugin.js => create-fork-ts-checker-plugin.ts} (81%) rename app/angular/src/server/{framework-preset-angular-cli.js => framework-preset-angular-cli.ts} (82%) rename app/angular/src/server/{framework-preset-angular.js => framework-preset-angular.ts} (93%) delete mode 100644 app/angular/src/server/index.js create mode 100644 app/angular/src/server/index.ts rename app/angular/src/server/{options.js => options.ts} (100%) rename app/angular/src/server/{ts_config.js => ts_config.ts} (59%) create mode 100644 app/angular/src/typings.d.ts diff --git a/app/angular/package.json b/app/angular/package.json index 5a11254ea38..f9a2fa06fea 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -39,6 +39,8 @@ "webpack": "^4.28.0" }, "devDependencies": { + "@types/autoprefixer": "^9.4.0", + "@types/webpack-env": "^1.13.9", "zone.js": "^0.8.29" }, "peerDependencies": { diff --git a/app/angular/src/client/index.js b/app/angular/src/client/index.ts similarity index 85% rename from app/angular/src/client/index.js rename to app/angular/src/client/index.ts index ae0b8377b4d..182833b61ac 100644 --- a/app/angular/src/client/index.js +++ b/app/angular/src/client/index.ts @@ -11,6 +11,7 @@ export { export { moduleMetadata } from './preview/angular/decorators'; +declare const module: __WebpackModuleApi.Module; if (module && module.hot && module.hot.decline) { module.hot.decline(); } diff --git a/app/angular/src/client/preview/angular-polyfills.js b/app/angular/src/client/preview/angular-polyfills.ts similarity index 100% rename from app/angular/src/client/preview/angular-polyfills.js rename to app/angular/src/client/preview/angular-polyfills.ts diff --git a/app/angular/src/client/preview/globals.js b/app/angular/src/client/preview/globals.ts similarity index 100% rename from app/angular/src/client/preview/globals.js rename to app/angular/src/client/preview/globals.ts diff --git a/app/angular/src/client/preview/index.js b/app/angular/src/client/preview/index.ts similarity index 100% rename from app/angular/src/client/preview/index.js rename to app/angular/src/client/preview/index.ts diff --git a/app/angular/src/client/preview/render.js b/app/angular/src/client/preview/render.ts similarity index 84% rename from app/angular/src/client/preview/render.js rename to app/angular/src/client/preview/render.ts index c84fd11dec3..51957cf10d2 100644 --- a/app/angular/src/client/preview/render.js +++ b/app/angular/src/client/preview/render.ts @@ -1,6 +1,7 @@ import { renderNgApp } from './angular/helpers'; -export default function render({ storyFn, showMain, forceRender }) { +// add proper types +export default function render({ storyFn, showMain, forceRender }: any) { showMain(); renderNgApp(storyFn, forceRender); } diff --git a/app/angular/src/server/angular-cli_config.test.js b/app/angular/src/server/__tests__/angular-cli_config.test.ts similarity index 84% rename from app/angular/src/server/angular-cli_config.test.js rename to app/angular/src/server/__tests__/angular-cli_config.test.ts index ba312df8179..510c1e1c651 100644 --- a/app/angular/src/server/angular-cli_config.test.js +++ b/app/angular/src/server/__tests__/angular-cli_config.test.ts @@ -1,5 +1,5 @@ -import { getAngularCliWebpackConfigOptions } from './angular-cli_config'; -import angularJson from '../../../../examples/angular-cli/angular.json'; +import { getAngularCliWebpackConfigOptions } from '../angular-cli_config'; +import angularJson from './angular.json'; // eslint-disable-next-line global-require jest.mock('fs', () => require('../../../../__mocks__/fs')); diff --git a/app/angular/src/server/__tests__/angular.json b/app/angular/src/server/__tests__/angular.json new file mode 100644 index 00000000000..1280b032aea --- /dev/null +++ b/app/angular/src/server/__tests__/angular.json @@ -0,0 +1,108 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "angular-cli": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/angular-cli", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": ["src/favicon.ico", "src/assets"], + "styles": ["src/styles.css", "src/styles.scss"], + "stylePreprocessorOptions": { + "includePaths": ["src/commons"] + }, + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "angular-cli:build" + }, + "configurations": { + "production": { + "browserTarget": "angular-cli:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "angular-cli:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/karma.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.spec.json", + "karmaConfig": "src/karma.conf.js", + "styles": ["styles.css"], + "scripts": [], + "assets": ["src/favicon.ico", "src/assets"] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"], + "exclude": ["**/node_modules/**"] + } + } + } + }, + "angular-cli-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "angular-cli:serve" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": "e2e/tsconfig.e2e.json", + "exclude": ["**/node_modules/**"] + } + } + } + } + }, + "defaultProject": "angular-cli" +} diff --git a/app/angular/src/server/create-fork-ts-checker-plugin.test.js b/app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts similarity index 77% rename from app/angular/src/server/create-fork-ts-checker-plugin.test.js rename to app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts index bb1c869b5f9..de7f9558a4e 100644 --- a/app/angular/src/server/create-fork-ts-checker-plugin.test.js +++ b/app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts @@ -1,9 +1,9 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; -import getTsLoaderOptions from './ts_config'; -import createForkTsCheckerInstance from './create-fork-ts-checker-plugin'; +import getTsLoaderOptions from '../ts_config'; +import createForkTsCheckerInstance from '../create-fork-ts-checker-plugin'; // eslint-disable-next-line global-require -jest.mock('fs', () => require('../../../../__mocks__/fs')); +jest.mock('fs', () => require('./fs')); jest.mock('path', () => ({ resolve: () => 'tsconfig.json', })); @@ -18,7 +18,9 @@ describe('create-fork-ts-checker-plugin.test', () => { setupFiles({ 'tsconfig.json': '{}' }); const tsLoaderOptions = getTsLoaderOptions('.foo'); - const instance = createForkTsCheckerInstance(tsLoaderOptions); + + // todo resolve any + const instance: any = createForkTsCheckerInstance(tsLoaderOptions); expect(instance).toBeInstanceOf(ForkTsCheckerWebpackPlugin); expect(instance.tsconfig).toEqual(tsLoaderOptions.configFile); diff --git a/app/angular/src/server/ts_config.test.js b/app/angular/src/server/__tests__/ts_config.test.ts similarity index 94% rename from app/angular/src/server/ts_config.test.js rename to app/angular/src/server/__tests__/ts_config.test.ts index b8e42921a23..4eeb38ae9a1 100644 --- a/app/angular/src/server/ts_config.test.js +++ b/app/angular/src/server/__tests__/ts_config.test.ts @@ -1,4 +1,4 @@ -import getTsLoaderOptions from './ts_config'; +import getTsLoaderOptions from '../ts_config'; // eslint-disable-next-line global-require jest.mock('fs', () => require('../../../../__mocks__/fs')); diff --git a/app/angular/src/server/angular-cli_config.js b/app/angular/src/server/angular-cli_config.ts similarity index 82% rename from app/angular/src/server/angular-cli_config.js rename to app/angular/src/server/angular-cli_config.ts index cff7b81aca5..02aa50de027 100644 --- a/app/angular/src/server/angular-cli_config.js +++ b/app/angular/src/server/angular-cli_config.ts @@ -9,8 +9,26 @@ import { getAngularCliParts, } from './angular-cli_utils'; -function getTsConfigOptions(tsConfigPath) { - const basicOptions = { +// todo add more accurate typings +interface BasicOptions { + options: { + baseUrl?: string | undefined; + }; + raw: object; + fileNames: string[]; + errors: any[]; +} + +interface TsConfig { + compilerOptions: TsConfigCompilerOptions | undefined; +} + +interface TsConfigCompilerOptions { + baseUrl: string | undefined; +} + +function getTsConfigOptions(tsConfigPath: Path) { + const basicOptions: BasicOptions = { options: {}, raw: {}, fileNames: [], @@ -21,8 +39,9 @@ function getTsConfigOptions(tsConfigPath) { return basicOptions; } - const tsConfig = JSON.parse(fs.readFileSync(tsConfigPath, 'utf8')); - const { baseUrl } = tsConfig.compilerOptions || {}; + const tsConfig: TsConfig = JSON.parse(fs.readFileSync(tsConfigPath, 'utf8')); + + const { baseUrl } = tsConfig.compilerOptions; if (baseUrl) { const tsConfigDirName = path.dirname(tsConfigPath); @@ -32,7 +51,7 @@ function getTsConfigOptions(tsConfigPath) { return basicOptions; } -export function getAngularCliWebpackConfigOptions(dirToSearch) { +export function getAngularCliWebpackConfigOptions(dirToSearch: string) { const fname = path.join(dirToSearch, 'angular.json'); if (!fs.existsSync(fname)) { @@ -79,7 +98,8 @@ export function getAngularCliWebpackConfigOptions(dirToSearch) { }; } -export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions) { +// todo add types +export function applyAngularCliWebpackConfig(baseConfig: any, cliWebpackConfigOptions: any) { if (!cliWebpackConfigOptions) { return baseConfig; } @@ -105,9 +125,10 @@ export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions const rulesExcludingStyles = filterOutStylingRules(baseConfig); // cliStyleConfig.entry adds global style files to the webpack context + // todo add type for acc const entry = [ ...baseConfig.entry, - ...Object.values(cliStyleConfig.entry).reduce((acc, item) => acc.concat(item), []), + ...Object.values(cliStyleConfig.entry).reduce((acc: any, item) => acc.concat(item), []), ]; const module = { diff --git a/app/angular/src/server/angular-cli_utils.js b/app/angular/src/server/angular-cli_utils.ts similarity index 75% rename from app/angular/src/server/angular-cli_utils.js rename to app/angular/src/server/angular-cli_utils.ts index 3129fa49109..3d7b46279a4 100644 --- a/app/angular/src/server/angular-cli_utils.js +++ b/app/angular/src/server/angular-cli_utils.ts @@ -1,7 +1,18 @@ import fs from 'fs'; import { basename, dirname, normalize, relative, resolve } from '@angular-devkit/core'; -function isDirectory(assetPath) { +// todo check if there's already a correct type for this +interface Rule { + test: RegExp; +} + +interface Config { + module: { + rules: Rule[]; + }; +} + +function isDirectory(assetPath: string) { try { return fs.statSync(assetPath).isDirectory(); } catch (e) { @@ -9,7 +20,7 @@ function isDirectory(assetPath) { } } -function getAssetsParts(resolvedAssetPath, assetPath) { +function getAssetsParts(resolvedAssetPath: Path, assetPath: Path) { if (isDirectory(resolvedAssetPath)) { return { glob: '**/*', // Folders get a recursive star glob. @@ -23,7 +34,7 @@ function getAssetsParts(resolvedAssetPath, assetPath) { }; } -function isStylingRule(rule) { +function isStylingRule(rule: Rule) { const { test } = rule; if (!test) { @@ -37,7 +48,7 @@ function isStylingRule(rule) { return test.test('.css') || test.test('.scss') || test.test('.sass'); } -export function filterOutStylingRules(config) { +export function filterOutStylingRules(config: Config) { return config.module.rules.filter(rule => !isStylingRule(rule)); } @@ -50,8 +61,10 @@ export function isBuildAngularInstalled() { } } -export function getAngularCliParts(cliWebpackConfigOptions) { +// todo add type +export function getAngularCliParts(cliWebpackConfigOptions: any) { // eslint-disable-next-line global-require, import/no-extraneous-dependencies + // tslint:disable-next-line: no-implicit-dependencies const ngCliConfigFactory = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs'); try { @@ -64,12 +77,14 @@ export function getAngularCliParts(cliWebpackConfigOptions) { } } -export function normalizeAssetPatterns(assetPatterns, dirToSearch, sourceRoot) { +// todo fix any +export function normalizeAssetPatterns(assetPatterns: any, dirToSearch: Path, sourceRoot: Path) { if (!assetPatterns || !assetPatterns.length) { return []; } - return assetPatterns.map(assetPattern => { + // todo fix any + return assetPatterns.map((assetPattern: any) => { if (typeof assetPattern === 'object') { return assetPattern; } diff --git a/app/angular/src/server/build.js b/app/angular/src/server/build.ts similarity index 100% rename from app/angular/src/server/build.js rename to app/angular/src/server/build.ts diff --git a/app/angular/src/server/create-fork-ts-checker-plugin.js b/app/angular/src/server/create-fork-ts-checker-plugin.ts similarity index 81% rename from app/angular/src/server/create-fork-ts-checker-plugin.js rename to app/angular/src/server/create-fork-ts-checker-plugin.ts index 40c8624ffab..3347c07d386 100644 --- a/app/angular/src/server/create-fork-ts-checker-plugin.js +++ b/app/angular/src/server/create-fork-ts-checker-plugin.ts @@ -1,7 +1,8 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import { logger } from '@storybook/node-logger'; +import { TsLoaderOptions } from '.'; -export default function(tsLoaderOptions) { +export default function(tsLoaderOptions: TsLoaderOptions) { if (tsLoaderOptions && tsLoaderOptions.configFile) { return new ForkTsCheckerWebpackPlugin({ tsconfig: tsLoaderOptions.configFile, diff --git a/app/angular/src/server/framework-preset-angular-cli.js b/app/angular/src/server/framework-preset-angular-cli.ts similarity index 82% rename from app/angular/src/server/framework-preset-angular-cli.js rename to app/angular/src/server/framework-preset-angular-cli.ts index d837c54e4c8..03aae97488d 100644 --- a/app/angular/src/server/framework-preset-angular-cli.js +++ b/app/angular/src/server/framework-preset-angular-cli.ts @@ -4,8 +4,9 @@ import { getAngularCliWebpackConfigOptions, applyAngularCliWebpackConfig, } from './angular-cli_config'; +import { WebpackConfig } from '.'; -export function webpackFinal(config) { +export function webpackFinal(config: WebpackConfig) { const cwd = process.cwd(); const cliWebpackConfigOptions = getAngularCliWebpackConfigOptions(cwd); diff --git a/app/angular/src/server/framework-preset-angular.js b/app/angular/src/server/framework-preset-angular.ts similarity index 93% rename from app/angular/src/server/framework-preset-angular.js rename to app/angular/src/server/framework-preset-angular.ts index 08949ce1851..03f2bee3831 100644 --- a/app/angular/src/server/framework-preset-angular.js +++ b/app/angular/src/server/framework-preset-angular.ts @@ -3,8 +3,9 @@ import { ContextReplacementPlugin } from 'webpack'; import autoprefixer from 'autoprefixer'; import getTsLoaderOptions from './ts_config'; import createForkTsCheckerInstance from './create-fork-ts-checker-plugin'; +import { WebpackConfig } from '.'; -export function webpack(config, { configDir }) { +export function webpack(config: WebpackConfig, { configDir }: { configDir: string }) { const tsLoaderOptions = getTsLoaderOptions(configDir); return { ...config, diff --git a/app/angular/src/server/index.js b/app/angular/src/server/index.js deleted file mode 100644 index 774d96025a8..00000000000 --- a/app/angular/src/server/index.js +++ /dev/null @@ -1,4 +0,0 @@ -import { buildDev } from '@storybook/core/server'; -import options from './options'; - -buildDev(options); diff --git a/app/angular/src/server/index.ts b/app/angular/src/server/index.ts new file mode 100644 index 00000000000..c3a1164e9dd --- /dev/null +++ b/app/angular/src/server/index.ts @@ -0,0 +1,11 @@ +import { buildDev } from '@storybook/core/server'; +import options from './options'; + +// todo add correct type +export type WebpackConfig = any; + +export interface TsLoaderOptions { + configFile: string; +} + +buildDev(options); diff --git a/app/angular/src/server/options.js b/app/angular/src/server/options.ts similarity index 100% rename from app/angular/src/server/options.js rename to app/angular/src/server/options.ts diff --git a/app/angular/src/server/ts_config.js b/app/angular/src/server/ts_config.ts similarity index 59% rename from app/angular/src/server/ts_config.js rename to app/angular/src/server/ts_config.ts index 6e643922760..7b7d6b0ec51 100644 --- a/app/angular/src/server/ts_config.js +++ b/app/angular/src/server/ts_config.ts @@ -2,9 +2,9 @@ import fs from 'fs'; import path from 'path'; import { logger } from '@storybook/node-logger'; -function resolveTsConfig(tsConfigPath) { +function resolveTsConfig(tsConfigPath: string): string | undefined { if (!fs.existsSync(tsConfigPath)) { - return null; + return; } logger.info('=> Found custom tsconfig.json'); @@ -12,15 +12,10 @@ function resolveTsConfig(tsConfigPath) { return tsConfigPath; } -export default function(configDir) { - const tsLoaderOptions = { - transpileOnly: true, - }; +export default function(configDir: string) { const configFilePath = resolveTsConfig(path.resolve(configDir, 'tsconfig.json')); - - if (configFilePath) { - tsLoaderOptions.configFile = configFilePath; - } - - return tsLoaderOptions; + return { + transpileOnly: true, + configFile: configFilePath ? configFilePath : undefined, + }; } diff --git a/app/angular/src/typings.d.ts b/app/angular/src/typings.d.ts new file mode 100644 index 00000000000..6288cba4b09 --- /dev/null +++ b/app/angular/src/typings.d.ts @@ -0,0 +1,2 @@ +declare module '@storybook/core/*'; +declare module 'global'; diff --git a/app/angular/tsconfig.json b/app/angular/tsconfig.json index 48b8f369e8e..043624ff5ea 100644 --- a/app/angular/tsconfig.json +++ b/app/angular/tsconfig.json @@ -1,18 +1,9 @@ { "extends": "../../tsconfig.json", - "include": [ - "src/**/*.ts" - ], "compileOnSave": false, "compilerOptions": { "outDir": "dist", - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "declaration": true, "rootDir": "./src", - "lib": [ - "es2017", - "dom" - ] + "resolveJsonModule": true } } diff --git a/tsconfig.json b/tsconfig.json index 2261ec059c1..a2454a3af84 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,14 +13,8 @@ "allowSyntheticDefaultImports": true, "esModuleInterop": true, "target": "es5", - "types": [ - "node", - "jest" - ], - "lib": [ - "es2017", - "dom" - ] + "types": ["node", "jest"], + "lib": ["es2017", "dom"] }, "exclude": [ "**/dist", diff --git a/yarn.lock b/yarn.lock index b5130fbdaf3..fb934cb3b17 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2728,6 +2728,13 @@ resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a" integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA== +"@types/autoprefixer@^9.4.0": + version "9.4.0" + resolved "https://registry.yarnpkg.com/@types/autoprefixer/-/autoprefixer-9.4.0.tgz#b72589130765cf8f7f403b9cec8ea81e507e759b" + integrity sha512-dN3gnhzPnDNmL0JckzmwPoEvqNTmIuvb/bRv73ku/TDqFBciBr4KtijA42Zbghkgxp5YomANvPphHOPeBQg+xw== + dependencies: + postcss "7.x.x" + "@types/babel__core@^7.1.0": version "7.1.0" resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.0.tgz#710f2487dda4dcfd010ca6abb2b4dc7394365c51" @@ -3120,7 +3127,7 @@ "@types/unist" "*" "@types/vfile-message" "*" -"@types/webpack-env@*", "@types/webpack-env@^1.13.7": +"@types/webpack-env@*", "@types/webpack-env@^1.13.7", "@types/webpack-env@^1.13.9": version "1.13.9" resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.13.9.tgz#a67287861c928ebf4159a908d1fb1a2a34d4097a" integrity sha512-p8zp5xqkly3g4cCmo2mKOHI9+Z/kObmDj0BmjbDDJQlgDTiEGTbm17MEwTAusV6XceCy+bNw9q/ZHXHyKo3zkg== @@ -20379,7 +20386,7 @@ postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1: indexes-of "^1.0.1" uniq "^1.0.1" -postcss@7.0.14, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.5, postcss@^7.0.6: +postcss@7.0.14, postcss@7.x.x, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.5, postcss@^7.0.6: version "7.0.14" resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.14.tgz#4527ed6b1ca0d82c53ce5ec1a2041c2346bbd6e5" integrity sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg== From 58ae0520c07570ddb43ad43fc69f89b611c23a90 Mon Sep 17 00:00:00 2001 From: Kai Roeder Date: Sun, 21 Apr 2019 08:31:33 +0200 Subject: [PATCH 004/162] Use require instead of import tsc wants all imports to be under rootDir --- app/angular/src/server/options.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/angular/src/server/options.ts b/app/angular/src/server/options.ts index 6ddc4098b20..75a84f17d3f 100644 --- a/app/angular/src/server/options.ts +++ b/app/angular/src/server/options.ts @@ -1,4 +1,5 @@ -import packageJson from '../../package.json'; +// tslint:disable-next-line: no-var-requires +const packageJson = require('../../package.json'); export default { packageJson, From e863b44ddb944b6c3c3bec0b5f1a0da7a85473cd Mon Sep 17 00:00:00 2001 From: Kai Roeder Date: Sun, 21 Apr 2019 15:19:07 +0200 Subject: [PATCH 005/162] Fix tsc build errors --- app/angular/src/client/index.ts | 3 ++- app/angular/src/server/angular-cli_config.ts | 5 +++-- app/angular/src/server/angular-cli_utils.ts | 2 +- app/angular/src/server/framework-preset-angular-cli.ts | 3 ++- app/angular/tsconfig.json | 3 ++- 5 files changed, 10 insertions(+), 6 deletions(-) diff --git a/app/angular/src/client/index.ts b/app/angular/src/client/index.ts index 182833b61ac..b235d2b3b63 100644 --- a/app/angular/src/client/index.ts +++ b/app/angular/src/client/index.ts @@ -11,7 +11,8 @@ export { export { moduleMetadata } from './preview/angular/decorators'; -declare const module: __WebpackModuleApi.Module; +// tsc wants to use NodeModule instead of WebpackModule +declare const module: any; if (module && module.hot && module.hot.decline) { module.hot.decline(); } diff --git a/app/angular/src/server/angular-cli_config.ts b/app/angular/src/server/angular-cli_config.ts index 02aa50de027..4d3d79ffee3 100644 --- a/app/angular/src/server/angular-cli_config.ts +++ b/app/angular/src/server/angular-cli_config.ts @@ -8,6 +8,7 @@ import { filterOutStylingRules, getAngularCliParts, } from './angular-cli_utils'; +import { Path } from '@angular-devkit/core'; // todo add more accurate typings interface BasicOptions { @@ -51,7 +52,7 @@ function getTsConfigOptions(tsConfigPath: Path) { return basicOptions; } -export function getAngularCliWebpackConfigOptions(dirToSearch: string) { +export function getAngularCliWebpackConfigOptions(dirToSearch: Path) { const fname = path.join(dirToSearch, 'angular.json'); if (!fs.existsSync(fname)) { @@ -80,7 +81,7 @@ export function getAngularCliWebpackConfigOptions(dirToSearch: string) { ); const projectRoot = path.resolve(dirToSearch, project.root); - const tsConfigPath = path.resolve(dirToSearch, projectOptions.tsConfig); + const tsConfigPath = path.resolve(dirToSearch, projectOptions.tsConfig) as Path; const tsConfig = getTsConfigOptions(tsConfigPath); return { diff --git a/app/angular/src/server/angular-cli_utils.ts b/app/angular/src/server/angular-cli_utils.ts index 3d7b46279a4..0aa924c2cb9 100644 --- a/app/angular/src/server/angular-cli_utils.ts +++ b/app/angular/src/server/angular-cli_utils.ts @@ -1,5 +1,5 @@ import fs from 'fs'; -import { basename, dirname, normalize, relative, resolve } from '@angular-devkit/core'; +import { basename, dirname, normalize, relative, resolve, Path } from '@angular-devkit/core'; // todo check if there's already a correct type for this interface Rule { diff --git a/app/angular/src/server/framework-preset-angular-cli.ts b/app/angular/src/server/framework-preset-angular-cli.ts index 03aae97488d..ee8e7192352 100644 --- a/app/angular/src/server/framework-preset-angular-cli.ts +++ b/app/angular/src/server/framework-preset-angular-cli.ts @@ -5,9 +5,10 @@ import { applyAngularCliWebpackConfig, } from './angular-cli_config'; import { WebpackConfig } from '.'; +import { Path } from '@angular-devkit/core'; export function webpackFinal(config: WebpackConfig) { - const cwd = process.cwd(); + const cwd = process.cwd() as Path; const cliWebpackConfigOptions = getAngularCliWebpackConfigOptions(cwd); if (cliWebpackConfigOptions) { diff --git a/app/angular/tsconfig.json b/app/angular/tsconfig.json index 043624ff5ea..79d0ba2f4b9 100644 --- a/app/angular/tsconfig.json +++ b/app/angular/tsconfig.json @@ -4,6 +4,7 @@ "compilerOptions": { "outDir": "dist", "rootDir": "./src", - "resolveJsonModule": true + "resolveJsonModule": true, + "types": [] } } From 3811cd1bf815e8bf46de9ddc4c99d6f7aeaddc16 Mon Sep 17 00:00:00 2001 From: Kai Roeder Date: Mon, 22 Apr 2019 14:16:21 +0200 Subject: [PATCH 006/162] Add types from webpack, ts-loader and typescript --- app/angular/package.json | 1 + .../create-fork-ts-checker-plugin.test.ts | 6 ++++-- app/angular/src/server/angular-cli_config.ts | 14 ++++---------- app/angular/src/server/angular-cli_utils.ts | 15 +++------------ .../src/server/create-fork-ts-checker-plugin.ts | 5 +++-- .../src/server/framework-preset-angular-cli.ts | 4 ++-- .../src/server/framework-preset-angular.ts | 8 +++++--- app/angular/src/server/index.ts | 7 ------- yarn.lock | 5 +++++ 9 files changed, 27 insertions(+), 38 deletions(-) diff --git a/app/angular/package.json b/app/angular/package.json index f9a2fa06fea..87a0ecb96ab 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -41,6 +41,7 @@ "devDependencies": { "@types/autoprefixer": "^9.4.0", "@types/webpack-env": "^1.13.9", + "typescript": "^3.4.4", "zone.js": "^0.8.29" }, "peerDependencies": { diff --git a/app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts b/app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts index de7f9558a4e..7e670749d7a 100644 --- a/app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts +++ b/app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts @@ -17,7 +17,8 @@ describe('create-fork-ts-checker-plugin.test', () => { it('should create a ForkTsCheckerWebpackPlugin instance', () => { setupFiles({ 'tsconfig.json': '{}' }); - const tsLoaderOptions = getTsLoaderOptions('.foo'); + // todo add proper typing + const tsLoaderOptions: any = getTsLoaderOptions('.foo'); // todo resolve any const instance: any = createForkTsCheckerInstance(tsLoaderOptions); @@ -27,7 +28,8 @@ describe('create-fork-ts-checker-plugin.test', () => { }); it('should create a ForkTsCheckerWebpackPlugin instance without passing options', () => { - const instance = createForkTsCheckerInstance({}); + // add proper typing + const instance = createForkTsCheckerInstance({} as any); expect(instance).toBeInstanceOf(ForkTsCheckerWebpackPlugin); }); }); diff --git a/app/angular/src/server/angular-cli_config.ts b/app/angular/src/server/angular-cli_config.ts index 4d3d79ffee3..fdc33054dc7 100644 --- a/app/angular/src/server/angular-cli_config.ts +++ b/app/angular/src/server/angular-cli_config.ts @@ -10,6 +10,8 @@ import { } from './angular-cli_utils'; import { Path } from '@angular-devkit/core'; +import { CompilerOptions } from 'typescript'; + // todo add more accurate typings interface BasicOptions { options: { @@ -20,14 +22,6 @@ interface BasicOptions { errors: any[]; } -interface TsConfig { - compilerOptions: TsConfigCompilerOptions | undefined; -} - -interface TsConfigCompilerOptions { - baseUrl: string | undefined; -} - function getTsConfigOptions(tsConfigPath: Path) { const basicOptions: BasicOptions = { options: {}, @@ -40,9 +34,9 @@ function getTsConfigOptions(tsConfigPath: Path) { return basicOptions; } - const tsConfig: TsConfig = JSON.parse(fs.readFileSync(tsConfigPath, 'utf8')); + const tsConfig = JSON.parse(fs.readFileSync(tsConfigPath, 'utf8')); - const { baseUrl } = tsConfig.compilerOptions; + const { baseUrl } = tsConfig.compilerOptions as CompilerOptions; if (baseUrl) { const tsConfigDirName = path.dirname(tsConfigPath); diff --git a/app/angular/src/server/angular-cli_utils.ts b/app/angular/src/server/angular-cli_utils.ts index 0aa924c2cb9..9c955a40ab3 100644 --- a/app/angular/src/server/angular-cli_utils.ts +++ b/app/angular/src/server/angular-cli_utils.ts @@ -1,16 +1,7 @@ import fs from 'fs'; import { basename, dirname, normalize, relative, resolve, Path } from '@angular-devkit/core'; -// todo check if there's already a correct type for this -interface Rule { - test: RegExp; -} - -interface Config { - module: { - rules: Rule[]; - }; -} +import { RuleSetRule, Configuration } from 'webpack'; function isDirectory(assetPath: string) { try { @@ -34,7 +25,7 @@ function getAssetsParts(resolvedAssetPath: Path, assetPath: Path) { }; } -function isStylingRule(rule: Rule) { +function isStylingRule(rule: RuleSetRule) { const { test } = rule; if (!test) { @@ -48,7 +39,7 @@ function isStylingRule(rule: Rule) { return test.test('.css') || test.test('.scss') || test.test('.sass'); } -export function filterOutStylingRules(config: Config) { +export function filterOutStylingRules(config: Configuration) { return config.module.rules.filter(rule => !isStylingRule(rule)); } diff --git a/app/angular/src/server/create-fork-ts-checker-plugin.ts b/app/angular/src/server/create-fork-ts-checker-plugin.ts index 3347c07d386..afc61cc6129 100644 --- a/app/angular/src/server/create-fork-ts-checker-plugin.ts +++ b/app/angular/src/server/create-fork-ts-checker-plugin.ts @@ -1,8 +1,9 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import { logger } from '@storybook/node-logger'; -import { TsLoaderOptions } from '.'; -export default function(tsLoaderOptions: TsLoaderOptions) { +import { Options } from 'ts-loader'; + +export default function(tsLoaderOptions: Options) { if (tsLoaderOptions && tsLoaderOptions.configFile) { return new ForkTsCheckerWebpackPlugin({ tsconfig: tsLoaderOptions.configFile, diff --git a/app/angular/src/server/framework-preset-angular-cli.ts b/app/angular/src/server/framework-preset-angular-cli.ts index ee8e7192352..6f91e9a5bdd 100644 --- a/app/angular/src/server/framework-preset-angular-cli.ts +++ b/app/angular/src/server/framework-preset-angular-cli.ts @@ -4,10 +4,10 @@ import { getAngularCliWebpackConfigOptions, applyAngularCliWebpackConfig, } from './angular-cli_config'; -import { WebpackConfig } from '.'; import { Path } from '@angular-devkit/core'; +import { Configuration } from 'webpack'; -export function webpackFinal(config: WebpackConfig) { +export function webpackFinal(config: Configuration) { const cwd = process.cwd() as Path; const cliWebpackConfigOptions = getAngularCliWebpackConfigOptions(cwd); diff --git a/app/angular/src/server/framework-preset-angular.ts b/app/angular/src/server/framework-preset-angular.ts index 03f2bee3831..c4a25fc63b4 100644 --- a/app/angular/src/server/framework-preset-angular.ts +++ b/app/angular/src/server/framework-preset-angular.ts @@ -1,11 +1,13 @@ import path from 'path'; -import { ContextReplacementPlugin } from 'webpack'; +import { ContextReplacementPlugin, Configuration } from 'webpack'; import autoprefixer from 'autoprefixer'; import getTsLoaderOptions from './ts_config'; import createForkTsCheckerInstance from './create-fork-ts-checker-plugin'; -import { WebpackConfig } from '.'; -export function webpack(config: WebpackConfig, { configDir }: { configDir: string }) { +export function webpack( + config: Configuration, + { configDir }: { configDir: string } +): Configuration { const tsLoaderOptions = getTsLoaderOptions(configDir); return { ...config, diff --git a/app/angular/src/server/index.ts b/app/angular/src/server/index.ts index c3a1164e9dd..774d96025a8 100644 --- a/app/angular/src/server/index.ts +++ b/app/angular/src/server/index.ts @@ -1,11 +1,4 @@ import { buildDev } from '@storybook/core/server'; import options from './options'; -// todo add correct type -export type WebpackConfig = any; - -export interface TsLoaderOptions { - configFile: string; -} - buildDev(options); diff --git a/yarn.lock b/yarn.lock index fb934cb3b17..26c89d4fb4a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -25573,6 +25573,11 @@ typescript@^3.4.1: resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.4.3.tgz#0eb320e4ace9b10eadf5bc6103286b0f8b7c224f" integrity sha512-FFgHdPt4T/duxx6Ndf7hwgMZZjZpB+U0nMNGVCYPq0rEzWKjEDobm4J6yb3CS7naZ0yURFqdw9Gwc7UOh/P9oQ== +typescript@^3.4.4: + version "3.4.4" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.4.4.tgz#aac4a08abecab8091a75f10842ffa0631818f785" + integrity sha512-xt5RsIRCEaf6+j9AyOBgvVuAec0i92rgCaS3S+UVf5Z/vF2Hvtsw08wtUTJqp4djwznoAgjSxeCcU4r+CcDBJA== + ua-parser-js@^0.7.18, ua-parser-js@^0.7.19: version "0.7.19" resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b" From d81d6717694b5c09e83c49fc7e283f2b8d8dab17 Mon Sep 17 00:00:00 2001 From: Kai Roeder Date: Mon, 22 Apr 2019 18:59:41 +0200 Subject: [PATCH 007/162] Fix tsLoader type issue --- .../src/server/__tests__/create-fork-ts-checker-plugin.test.ts | 3 +-- app/angular/src/server/create-fork-ts-checker-plugin.ts | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts b/app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts index 7e670749d7a..a65ba622f7a 100644 --- a/app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts +++ b/app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts @@ -17,8 +17,7 @@ describe('create-fork-ts-checker-plugin.test', () => { it('should create a ForkTsCheckerWebpackPlugin instance', () => { setupFiles({ 'tsconfig.json': '{}' }); - // todo add proper typing - const tsLoaderOptions: any = getTsLoaderOptions('.foo'); + const tsLoaderOptions = getTsLoaderOptions('.foo'); // todo resolve any const instance: any = createForkTsCheckerInstance(tsLoaderOptions); diff --git a/app/angular/src/server/create-fork-ts-checker-plugin.ts b/app/angular/src/server/create-fork-ts-checker-plugin.ts index afc61cc6129..f8881492f3d 100644 --- a/app/angular/src/server/create-fork-ts-checker-plugin.ts +++ b/app/angular/src/server/create-fork-ts-checker-plugin.ts @@ -3,7 +3,7 @@ import { logger } from '@storybook/node-logger'; import { Options } from 'ts-loader'; -export default function(tsLoaderOptions: Options) { +export default function(tsLoaderOptions: Partial) { if (tsLoaderOptions && tsLoaderOptions.configFile) { return new ForkTsCheckerWebpackPlugin({ tsconfig: tsLoaderOptions.configFile, From 12fd8067e338d1ba42e026ebdf6fe7e021772835 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andre=CC=81=20Neves?= Date: Wed, 15 May 2019 15:33:07 +0100 Subject: [PATCH 008/162] Ensure unique knob names across knob groups --- addons/knobs/src/KnobManager.js | 17 ++++++++++------- addons/knobs/src/KnobManager.test.js | 2 ++ addons/knobs/src/components/PropForm.js | 2 +- .../__snapshots__/addon-knobs.stories.storyshot | 6 ++++++ .../stories/addon-knobs.stories.js | 4 ++++ 5 files changed, 23 insertions(+), 8 deletions(-) diff --git a/addons/knobs/src/KnobManager.js b/addons/knobs/src/KnobManager.js index dc76bd5ef47..afad9bd3d64 100644 --- a/addons/knobs/src/KnobManager.js +++ b/addons/knobs/src/KnobManager.js @@ -58,8 +58,10 @@ export default class KnobManager { knob(name, options) { this._mayCallChannel(); + const knobName = options.groupId ? `${name}_${options.groupId}` : name; + const { knobStore } = this; - const existingKnob = knobStore.get(name); + const existingKnob = knobStore.get(knobName); // We need to return the value set by the knob editor via this. // Normally the knobs are reset and so re-use is safe as long as the types match @@ -77,22 +79,23 @@ export default class KnobManager { const knobInfo = { ...options, - name, + name: knobName, + label: name, }; - if (knobValuesFromUrl[name]) { - const value = deserializers[options.type](knobValuesFromUrl[name]); + if (knobValuesFromUrl[knobName]) { + const value = deserializers[options.type](knobValuesFromUrl[knobName]); knobInfo.defaultValue = value; knobInfo.value = value; - delete knobValuesFromUrl[name]; + delete knobValuesFromUrl[knobName]; } else { knobInfo.defaultValue = options.value; } - knobStore.set(name, knobInfo); - return this.getKnobValue(knobStore.get(name)); + knobStore.set(knobName, knobInfo); + return this.getKnobValue(knobStore.get(knobName)); } _mayCallChannel() { diff --git a/addons/knobs/src/KnobManager.test.js b/addons/knobs/src/KnobManager.test.js index f6a9e6db1db..afb46034f51 100644 --- a/addons/knobs/src/KnobManager.test.js +++ b/addons/knobs/src/KnobManager.test.js @@ -56,6 +56,7 @@ describe('KnobManager', () => { const newKnob = { ...defaultKnob, + label: 'foo', defaultValue: defaultKnob.value, }; @@ -86,6 +87,7 @@ describe('KnobManager', () => { const newKnob = { ...defaultKnob, + label: 'foo', defaultValue: defaultKnob.value, }; diff --git a/addons/knobs/src/components/PropForm.js b/addons/knobs/src/components/PropForm.js index a477f502fbf..2e984c1a46d 100644 --- a/addons/knobs/src/components/PropForm.js +++ b/addons/knobs/src/components/PropForm.js @@ -26,7 +26,7 @@ export default class PropForm extends Component { const InputType = TypeMap[knob.type] || InvalidType; return ( - + ); diff --git a/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot index 51c97243f72..af49726bbcd 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot @@ -143,6 +143,9 @@ exports[`Storyshots Addons|Knobs.withKnobs tweaks static values organized in gro

Years in NY: 9

+

+ Notes: +

Favorites @@ -173,6 +176,9 @@ exports[`Storyshots Addons|Knobs.withKnobs tweaks static values organized in gro

When I'm by myself, I say: "Mumble"

+

+ Notes: +

`; diff --git a/examples/official-storybook/stories/addon-knobs.stories.js b/examples/official-storybook/stories/addon-knobs.stories.js index 932df0c432e..25622355aac 100644 --- a/examples/official-storybook/stories/addon-knobs.stories.js +++ b/examples/official-storybook/stories/addon-knobs.stories.js @@ -138,12 +138,14 @@ storiesOf('Addons|Knobs.withKnobs', module) GROUP_IDS.GENERAL ); const years = number('Years in NY', 9, {}, GROUP_IDS.GENERAL); + const generalNotes = text('Notes', '', GROUP_IDS.GENERAL); // Favorites const nice = boolean('Nice', true, GROUP_IDS.FAVORITES); const fruit = select('Fruit', fruits, 'apple', GROUP_IDS.FAVORITES); const otherFruit = radios('Other Fruit', otherFruits, 'watermelon', GROUP_IDS.FAVORITES); const items = array('Items', ['Laptop', 'Book', 'Whiskey'], ',', GROUP_IDS.FAVORITES); + const favoritesNotes = text('Notes', '', GROUP_IDS.FAVORITES); // Display const backgroundColor = color('Color', 'rgba(126, 211, 33, 0.22)', GROUP_IDS.DISPLAY); @@ -170,6 +172,7 @@ storiesOf('Addons|Knobs.withKnobs', module)

Birthday: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}

Account Balance: {dollars}

Years in NY: {years}

+

Notes: {generalNotes}

Favorites

Catchphrase: {salutation}

@@ -182,6 +185,7 @@ storiesOf('Addons|Knobs.withKnobs', module) ))}

When I'm by myself, I say: "{ungrouped}"

+

Notes: {favoritesNotes}

); }) From c6fa7f8add9266b853ebfea64d387c8740a9a484 Mon Sep 17 00:00:00 2001 From: Kai Roeder Date: Mon, 20 May 2019 14:05:15 +0200 Subject: [PATCH 009/162] Compile angular using tsc --- scripts/compile-babel.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/scripts/compile-babel.js b/scripts/compile-babel.js index eaa97968e4c..a2c150f4512 100644 --- a/scripts/compile-babel.js +++ b/scripts/compile-babel.js @@ -4,6 +4,11 @@ const path = require('path'); const shell = require('shelljs'); function getCommand(watch) { + // Compile anuglar with tsc + if (process.cwd().includes(path.join('app', 'angular'))) { + return ''; + } + const babel = path.join(__dirname, '..', 'node_modules', '.bin', 'babel'); const ignore = [ @@ -31,10 +36,7 @@ function getCommand(watch) { * runtime errors because of the the babel decorators plugin * Only transpile .js and let tsc do the job for .ts files */ - if ( - process.cwd().includes(path.join('app', 'angular')) || - process.cwd().includes(path.join('addons', 'storyshots')) - ) { + if (process.cwd().includes(path.join('addons', 'storyshots'))) { args.push(`--extensions ".js"`); } else { args.push(`--extensions ".js,.jsx,.ts,.tsx"`); @@ -68,9 +70,10 @@ function babelify(options = {}) { } const command = getCommand(watch); - const { code, stderr } = shell.exec(command, { silent }); - - handleExit(code, stderr, errorCallback); + if (command !== '') { + const { code, stderr } = shell.exec(command, { silent }); + handleExit(code, stderr, errorCallback); + } } module.exports = { From eb6d173750c2bde1e243a51dfc0a460002650d58 Mon Sep 17 00:00:00 2001 From: Kai Roeder Date: Mon, 20 May 2019 14:45:00 +0200 Subject: [PATCH 010/162] yarn.lock --- yarn.lock | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/yarn.lock b/yarn.lock index 006d6d69bd4..eb44ef580aa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -23355,6 +23355,15 @@ postcss@7.0.14: source-map "^0.6.1" supports-color "^6.1.0" +postcss@7.x.x, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.5, postcss@^7.0.6: + version "7.0.16" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.16.tgz#48f64f1b4b558cb8b52c88987724359acb010da2" + integrity sha512-MOo8zNSlIqh22Uaa3drkdIAgUGEL+AD1ESiSdmElLUmE2uVDo1QloiT/IfW9qRw8Gw+Y/w69UVMGwbufMSftxA== + dependencies: + chalk "^2.4.2" + source-map "^0.6.1" + supports-color "^6.1.0" + postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.16: version "5.2.18" resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5" @@ -23374,15 +23383,6 @@ postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13, postcss@^6.0.23, postcss@^6.0.9 source-map "^0.6.1" supports-color "^5.4.0" -postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.5, postcss@^7.0.6: - version "7.0.16" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.16.tgz#48f64f1b4b558cb8b52c88987724359acb010da2" - integrity sha512-MOo8zNSlIqh22Uaa3drkdIAgUGEL+AD1ESiSdmElLUmE2uVDo1QloiT/IfW9qRw8Gw+Y/w69UVMGwbufMSftxA== - dependencies: - chalk "^2.4.2" - source-map "^0.6.1" - supports-color "^6.1.0" - pouchdb-collections@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/pouchdb-collections/-/pouchdb-collections-1.0.1.tgz#fe63a17da977611abef7cb8026cb1a9553fd8359" From 0e9f7264f50ab15a6d9579a6e06e23e93d76ee99 Mon Sep 17 00:00:00 2001 From: Kai Roeder Date: Mon, 20 May 2019 14:45:13 +0200 Subject: [PATCH 011/162] fix path to mock fs --- app/angular/src/server/__tests__/angular-cli_config.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/angular/src/server/__tests__/angular-cli_config.test.ts b/app/angular/src/server/__tests__/angular-cli_config.test.ts index 2490d2315bd..918b4048c68 100644 --- a/app/angular/src/server/__tests__/angular-cli_config.test.ts +++ b/app/angular/src/server/__tests__/angular-cli_config.test.ts @@ -2,7 +2,7 @@ import { getAngularCliWebpackConfigOptions } from '../angular-cli_config'; import angularJson from './angular.json'; // eslint-disable-next-line global-require -jest.mock('fs', () => require('../../../../__mocks__/fs')); +jest.mock('fs', () => require('../../../../../__mocks__/fs')); jest.mock('path', () => ({ join: () => 'angular.json', resolve: () => 'tsconfig.json', From a8e6d1bcd90c0869a803110a79b13226086e59c8 Mon Sep 17 00:00:00 2001 From: Jimmy Somsanith Date: Fri, 31 May 2019 09:45:42 +0200 Subject: [PATCH 012/162] feat: disable option for addon tab --- addons/a11y/src/register.tsx | 3 ++- addons/actions/src/constants.ts | 1 + addons/actions/src/manager.tsx | 3 ++- addons/events/src/constants.js | 2 ++ addons/events/src/manager.js | 3 ++- addons/jest/src/register.tsx | 3 ++- addons/jest/src/shared.ts | 1 + addons/knobs/src/register.js | 3 ++- addons/knobs/src/shared.js | 1 + addons/ondevice-actions/src/index.tsx | 3 ++- addons/ondevice-backgrounds/src/constants.js | 1 + addons/ondevice-backgrounds/src/register.js | 3 ++- addons/ondevice-knobs/src/index.js | 1 + addons/ondevice-notes/src/register.js | 1 + lib/addons/src/index.ts | 1 + lib/ui/src/containers/panel.js | 19 ++++++++++++++++++- 16 files changed, 41 insertions(+), 8 deletions(-) diff --git a/addons/a11y/src/register.tsx b/addons/a11y/src/register.tsx index a0995ab4fce..9b360ec97d4 100644 --- a/addons/a11y/src/register.tsx +++ b/addons/a11y/src/register.tsx @@ -2,7 +2,7 @@ import React, { Fragment, FunctionComponent } from 'react'; import { styled } from '@storybook/theming'; import { addons, types } from '@storybook/addons'; -import { ADDON_ID, PANEL_ID } from './constants'; +import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants'; import { ColorBlindness } from './components/ColorBlindness'; import { A11YPanel } from './components/A11YPanel'; @@ -94,6 +94,7 @@ addons.register(ADDON_ID, api => { title: 'Accessibility', type: types.PANEL, render: ({ active, key }) => , + paramKey: PARAM_KEY, }); addons.add(PANEL_ID, { diff --git a/addons/actions/src/constants.ts b/addons/actions/src/constants.ts index 1bc018e8d9b..9bc6f11ef5c 100644 --- a/addons/actions/src/constants.ts +++ b/addons/actions/src/constants.ts @@ -1,3 +1,4 @@ +export const PARAM_KEY = 'actions'; export const ADDON_ID = 'storybook/actions'; export const PANEL_ID = `${ADDON_ID}/panel`; export const EVENT_ID = `${ADDON_ID}/action-event`; diff --git a/addons/actions/src/manager.tsx b/addons/actions/src/manager.tsx index be1e6f8e126..d77272be077 100644 --- a/addons/actions/src/manager.tsx +++ b/addons/actions/src/manager.tsx @@ -1,13 +1,14 @@ import React from 'react'; import addons from '@storybook/addons'; import ActionLogger from './containers/ActionLogger'; -import { ADDON_ID, PANEL_ID } from '.'; +import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants'; export function register() { addons.register(ADDON_ID, api => { addons.addPanel(PANEL_ID, { title: 'Actions', render: ({ active, key }) => , + paramKey: PARAM_KEY, }); }); } diff --git a/addons/events/src/constants.js b/addons/events/src/constants.js index cf57a257090..3d765994293 100644 --- a/addons/events/src/constants.js +++ b/addons/events/src/constants.js @@ -1,3 +1,5 @@ +export const PARAM_KEY = 'events'; + export const ADDON_ID = 'storybook/events'; export const PANEL_ID = `${ADDON_ID}/panel`; diff --git a/addons/events/src/manager.js b/addons/events/src/manager.js index 6d8bea63468..d7cab5bfc33 100644 --- a/addons/events/src/manager.js +++ b/addons/events/src/manager.js @@ -2,7 +2,7 @@ import React from 'react'; import addons from '@storybook/addons'; import Panel from './components/Panel'; -import { ADDON_ID, PANEL_ID } from './constants'; +import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants'; export function register() { addons.register(ADDON_ID, api => { @@ -10,6 +10,7 @@ export function register() { title: 'Events', // eslint-disable-next-line react/prop-types render: ({ active, key }) => , + paramKey: PARAM_KEY, }); }); } diff --git a/addons/jest/src/register.tsx b/addons/jest/src/register.tsx index b3058d321dd..a8d3b2c97ba 100644 --- a/addons/jest/src/register.tsx +++ b/addons/jest/src/register.tsx @@ -1,6 +1,6 @@ import React from 'react'; import addons from '@storybook/addons'; -import { ADDON_ID, PANEL_ID } from './shared'; +import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared'; import Panel from './components/Panel'; @@ -8,5 +8,6 @@ addons.register(ADDON_ID, api => { addons.addPanel(PANEL_ID, { title: 'tests', render: ({ active, key }) => , + paramKey: PARAM_KEY, }); }); diff --git a/addons/jest/src/shared.ts b/addons/jest/src/shared.ts index 48e804cefe0..7028ab5ce2a 100644 --- a/addons/jest/src/shared.ts +++ b/addons/jest/src/shared.ts @@ -1,4 +1,5 @@ // addons, panels and events get unique names using a prefix +export const PARAM_KEY = 'test'; export const ADDON_ID = 'storybooks/test'; export const PANEL_ID = `${ADDON_ID}/panel`; diff --git a/addons/knobs/src/register.js b/addons/knobs/src/register.js index e8eeddb512c..2808815b395 100644 --- a/addons/knobs/src/register.js +++ b/addons/knobs/src/register.js @@ -1,12 +1,13 @@ import React from 'react'; import addons from '@storybook/addons'; import Panel from './components/Panel'; -import { ADDON_ID, PANEL_ID } from './shared'; +import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared'; addons.register(ADDON_ID, api => { addons.addPanel(PANEL_ID, { title: 'Knobs', // eslint-disable-next-line react/prop-types render: ({ active, key }) => , + paramKey: PARAM_KEY, }); }); diff --git a/addons/knobs/src/shared.js b/addons/knobs/src/shared.js index 6aca6fe000f..f8e3bfc0312 100644 --- a/addons/knobs/src/shared.js +++ b/addons/knobs/src/shared.js @@ -1,4 +1,5 @@ // addons, panels and events get unique names using a prefix +export const PARAM_KEY = 'knobs'; export const ADDON_ID = 'storybooks/knobs'; export const PANEL_ID = `${ADDON_ID}/panel`; diff --git a/addons/ondevice-actions/src/index.tsx b/addons/ondevice-actions/src/index.tsx index 76602d22ae9..63b71d68a67 100644 --- a/addons/ondevice-actions/src/index.tsx +++ b/addons/ondevice-actions/src/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import addons from '@storybook/addons'; -import { ADDON_ID, PANEL_ID } from '@storybook/addon-actions'; +import { ADDON_ID, PANEL_ID, PARAM_KEY } from '@storybook/addon-actions'; import ActionLogger from './containers/ActionLogger'; export function register() { @@ -8,6 +8,7 @@ export function register() { addons.addPanel(PANEL_ID, { title: 'Actions', render: ({ active, key }) => , + paramKey: PARAM_KEY, }); }); } diff --git a/addons/ondevice-backgrounds/src/constants.js b/addons/ondevice-backgrounds/src/constants.js index 7e0fcc42dae..4c8f0925914 100644 --- a/addons/ondevice-backgrounds/src/constants.js +++ b/addons/ondevice-backgrounds/src/constants.js @@ -1,3 +1,4 @@ +export const PARAM_KEY = 'background'; export const ADDON_ID = 'storybook-addon-background'; export const PANEL_ID = `${ADDON_ID}/background-panel`; diff --git a/addons/ondevice-backgrounds/src/register.js b/addons/ondevice-backgrounds/src/register.js index 0bd614430da..2714689abb2 100644 --- a/addons/ondevice-backgrounds/src/register.js +++ b/addons/ondevice-backgrounds/src/register.js @@ -1,7 +1,7 @@ import React from 'react'; import addons from '@storybook/addons'; -import { ADDON_ID, PANEL_ID } from './constants'; +import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants'; import BackgroundPanel from './BackgroundPanel'; addons.register(ADDON_ID, api => { @@ -10,5 +10,6 @@ addons.register(ADDON_ID, api => { title: 'Backgrounds', // eslint-disable-next-line react/prop-types render: ({ active }) => , + paramKey: PARAM_KEY, }); }); diff --git a/addons/ondevice-knobs/src/index.js b/addons/ondevice-knobs/src/index.js index 8286083ad1e..9e46af4a407 100644 --- a/addons/ondevice-knobs/src/index.js +++ b/addons/ondevice-knobs/src/index.js @@ -9,6 +9,7 @@ export function register() { title: 'Knobs', // eslint-disable-next-line react/prop-types render: ({ active, key }) => , + paramKey: 'knobs', }); }); } diff --git a/addons/ondevice-notes/src/register.js b/addons/ondevice-notes/src/register.js index 1ed3a38bfcd..530eaac2354 100644 --- a/addons/ondevice-notes/src/register.js +++ b/addons/ondevice-notes/src/register.js @@ -50,5 +50,6 @@ addons.register('storybook/notes', api => { addons.addPanel('storybook/notes/panel', { title: 'Notes', render: ({ active, key }) => , + paramKey: PARAM_KEY, }); }); diff --git a/lib/addons/src/index.ts b/lib/addons/src/index.ts index 4e593d6e8c3..14f077b686d 100644 --- a/lib/addons/src/index.ts +++ b/lib/addons/src/index.ts @@ -24,6 +24,7 @@ export interface Addon { route?: (routeOptions: RouteOptions) => string; match?: (matchOptions: MatchOptions) => boolean; render: (renderOptions: RenderOptions) => ReactElement; + paramKey?: string; } export type Loader = (api: API) => void; diff --git a/lib/ui/src/containers/panel.js b/lib/ui/src/containers/panel.js index de4d62f233f..2c8e60bfa04 100644 --- a/lib/ui/src/containers/panel.js +++ b/lib/ui/src/containers/panel.js @@ -10,8 +10,25 @@ const createPanelActions = memoize(1)(api => ({ togglePosition: () => api.togglePanelPosition(), })); +const filterPanel = (panels, storyParameters) => { + if (!panels || !storyParameters) { + return panels; + } + + const filteredPanels = {}; + Object.entries(panels).forEach(([id, panel]) => { + const { paramKey } = panel; + const panelParameters = paramKey && storyParameters[paramKey]; + if (!panelParameters || !panelParameters.disabled) { + filteredPanels[id] = panel; + } + }); + + return filteredPanels; +}; + const mapper = ({ state, api }) => ({ - panels: api.getPanels(), + panels: filterPanel(api.getPanels(), api.getParameters(state.storyId)), selectedPanel: api.getSelectedPanel(), panelPosition: state.layout.panelPosition, actions: createPanelActions(api), From ce20b514766569e488fd4cea1f28c653daaf3489 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Fri, 31 May 2019 15:24:21 +0200 Subject: [PATCH 013/162] Fix lint errors --- app/angular/package.json | 3 ++- .../__tests__/create-fork-ts-checker-plugin.test.ts | 2 +- app/angular/src/server/__tests__/ts_config.test.ts | 2 +- app/angular/src/server/angular-cli_config.ts | 5 ++--- app/angular/src/server/angular-cli_utils.ts | 12 ++++++------ .../src/server/framework-preset-angular-cli.ts | 4 ++-- 6 files changed, 14 insertions(+), 14 deletions(-) diff --git a/app/angular/package.json b/app/angular/package.json index 3719cbee53f..cdb8717d78a 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -41,7 +41,6 @@ "devDependencies": { "@types/autoprefixer": "^9.4.0", "@types/webpack-env": "^1.13.9", - "typescript": "^3.4.4", "zone.js": "^0.8.29" }, "peerDependencies": { @@ -52,9 +51,11 @@ "@angular/forms": ">=6.0.0", "@angular/platform-browser": ">=6.0.0", "@angular/platform-browser-dynamic": ">=6.0.0", + "@angular-devkit/build-angular": ">=6.0.0", "autoprefixer": "^8.1.0", "babel-loader": "^7.0.0 || ^8.0.0", "rxjs": "^6.0.0", + "typescript": "^3.4.4", "zone.js": "^0.8.29" }, "engines": { diff --git a/app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts b/app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts index a65ba622f7a..f51bdd1e098 100644 --- a/app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts +++ b/app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts @@ -3,7 +3,7 @@ import getTsLoaderOptions from '../ts_config'; import createForkTsCheckerInstance from '../create-fork-ts-checker-plugin'; // eslint-disable-next-line global-require -jest.mock('fs', () => require('./fs')); +jest.mock('fs', () => require('../../../../../__mocks__/fs')); jest.mock('path', () => ({ resolve: () => 'tsconfig.json', })); diff --git a/app/angular/src/server/__tests__/ts_config.test.ts b/app/angular/src/server/__tests__/ts_config.test.ts index 4eeb38ae9a1..f282bbbd37b 100644 --- a/app/angular/src/server/__tests__/ts_config.test.ts +++ b/app/angular/src/server/__tests__/ts_config.test.ts @@ -1,7 +1,7 @@ import getTsLoaderOptions from '../ts_config'; // eslint-disable-next-line global-require -jest.mock('fs', () => require('../../../../__mocks__/fs')); +jest.mock('fs', () => require('../../../../../__mocks__/fs')); jest.mock('path', () => ({ resolve: () => 'tsconfig.json', })); diff --git a/app/angular/src/server/angular-cli_config.ts b/app/angular/src/server/angular-cli_config.ts index 67c94bfced8..b08d79a2b3f 100644 --- a/app/angular/src/server/angular-cli_config.ts +++ b/app/angular/src/server/angular-cli_config.ts @@ -1,3 +1,5 @@ +import { CompilerOptions } from 'typescript'; +import { Path } from '@angular-devkit/core'; import path from 'path'; import fs from 'fs'; import { logger } from '@storybook/node-logger'; @@ -8,9 +10,6 @@ import { filterOutStylingRules, getAngularCliParts, } from './angular-cli_utils'; -import { Path } from '@angular-devkit/core'; - -import { CompilerOptions } from 'typescript'; // todo add more accurate typings interface BasicOptions { diff --git a/app/angular/src/server/angular-cli_utils.ts b/app/angular/src/server/angular-cli_utils.ts index 9c955a40ab3..1335d3ea447 100644 --- a/app/angular/src/server/angular-cli_utils.ts +++ b/app/angular/src/server/angular-cli_utils.ts @@ -1,5 +1,9 @@ import fs from 'fs'; import { basename, dirname, normalize, relative, resolve, Path } from '@angular-devkit/core'; +import { + getCommonConfig, + getStylesConfig, +} from '@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs'; import { RuleSetRule, Configuration } from 'webpack'; @@ -54,14 +58,10 @@ export function isBuildAngularInstalled() { // todo add type export function getAngularCliParts(cliWebpackConfigOptions: any) { - // eslint-disable-next-line global-require, import/no-extraneous-dependencies - // tslint:disable-next-line: no-implicit-dependencies - const ngCliConfigFactory = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs'); - try { return { - cliCommonConfig: ngCliConfigFactory.getCommonConfig(cliWebpackConfigOptions), - cliStyleConfig: ngCliConfigFactory.getStylesConfig(cliWebpackConfigOptions), + cliCommonConfig: getCommonConfig(cliWebpackConfigOptions), + cliStyleConfig: getStylesConfig(cliWebpackConfigOptions), }; } catch (e) { return null; diff --git a/app/angular/src/server/framework-preset-angular-cli.ts b/app/angular/src/server/framework-preset-angular-cli.ts index 6f91e9a5bdd..4d34f5f22de 100644 --- a/app/angular/src/server/framework-preset-angular-cli.ts +++ b/app/angular/src/server/framework-preset-angular-cli.ts @@ -1,11 +1,11 @@ +import { Configuration } from 'webpack'; +import { Path } from '@angular-devkit/core'; import { logger } from '@storybook/node-logger'; import { getAngularCliWebpackConfigOptions, applyAngularCliWebpackConfig, } from './angular-cli_config'; -import { Path } from '@angular-devkit/core'; -import { Configuration } from 'webpack'; export function webpackFinal(config: Configuration) { const cwd = process.cwd() as Path; From 89fb8d41abd6921d76ba4076a8fd73320eece578 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Fri, 31 May 2019 15:51:06 +0200 Subject: [PATCH 014/162] yarn.lock --- yarn.lock | 5 ----- 1 file changed, 5 deletions(-) diff --git a/yarn.lock b/yarn.lock index eb44ef580aa..ca2b4bf5be7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -29188,11 +29188,6 @@ typescript@^3.4.1: resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.4.5.tgz#2d2618d10bb566572b8d7aad5180d84257d70a99" integrity sha512-YycBxUb49UUhdNMU5aJ7z5Ej2XGmaIBL0x34vZ82fn3hGvD+bgrMrVDpatgz2f7YxUMJxMkbWxJZeAvDxVe7Vw== -typescript@^3.4.4: - version "3.4.4" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.4.4.tgz#aac4a08abecab8091a75f10842ffa0631818f785" - integrity sha512-xt5RsIRCEaf6+j9AyOBgvVuAec0i92rgCaS3S+UVf5Z/vF2Hvtsw08wtUTJqp4djwznoAgjSxeCcU4r+CcDBJA== - ua-parser-js@^0.7.18, ua-parser-js@^0.7.19: version "0.7.19" resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b" From c6bafec5853f1d384d1c95efade14bbb77a77a91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Wed, 5 Jun 2019 20:53:56 +0200 Subject: [PATCH 015/162] yarn.lock --- yarn.lock | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index c0dec201f3e..2768c9fd590 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3338,6 +3338,14 @@ resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a" integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA== +"@types/autoprefixer@^9.4.0": + version "9.5.0" + resolved "https://registry.yarnpkg.com/@types/autoprefixer/-/autoprefixer-9.5.0.tgz#aaf489be1bda03650717ef9cb01b8fc4d5eb1ad4" + integrity sha512-V5p6QSFDMlsNUOfRgCSbXcolHNkYgW0VsxBWg2RzZ3ckOSGvkmyCxj7cEkEM3GAJmepItITHhvHSXC0bLkrT9g== + dependencies: + "@types/browserslist" "*" + postcss "7.x.x" + "@types/babel__core@^7.1.0": version "7.1.2" resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.2.tgz#608c74f55928033fce18b99b213c16be4b3d114f" @@ -3371,6 +3379,11 @@ dependencies: "@babel/types" "^7.3.0" +"@types/browserslist@*": + version "4.4.0" + resolved "https://registry.yarnpkg.com/@types/browserslist/-/browserslist-4.4.0.tgz#e2a5f7f8c7e97afb39f50812a77e5230d3ca2353" + integrity sha512-hrIjWSu7Hh96/rKlpChe58qHEwIZ0+F5Zf4QNdvSVP5LUXbaJM04g9tBjo702VTNqPZr5znEJeqNR3nAV3vJPg== + "@types/cheerio@*": version "0.22.11" resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.11.tgz#61c0facf9636d14ba5f77fc65ed8913aa845d717" @@ -3707,7 +3720,7 @@ "@types/unist" "*" "@types/vfile-message" "*" -"@types/webpack-env@^1.13.7": +"@types/webpack-env@^1.13.7", "@types/webpack-env@^1.13.9": version "1.13.9" resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.13.9.tgz#a67287861c928ebf4159a908d1fb1a2a34d4097a" integrity sha512-p8zp5xqkly3g4cCmo2mKOHI9+Z/kObmDj0BmjbDDJQlgDTiEGTbm17MEwTAusV6XceCy+bNw9q/ZHXHyKo3zkg== @@ -23165,6 +23178,15 @@ postcss@7.0.14: source-map "^0.6.1" supports-color "^6.1.0" +postcss@7.x.x: + version "7.0.17" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f" + integrity sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ== + dependencies: + chalk "^2.4.2" + source-map "^0.6.1" + supports-color "^6.1.0" + postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.16: version "5.2.18" resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5" From 4fa23b9a801bed6ff1c1eea3539481f5720687ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Wed, 5 Jun 2019 20:54:53 +0200 Subject: [PATCH 016/162] WIP: Fix lint errors; add public_api for storybook/angular --- app/angular/index.d.ts | 74 ---------------------------- app/angular/package.json | 4 +- app/angular/src/public_api.ts | 76 +++++++++++++++++++++++++++++ app/angular/src/server/ts_config.ts | 12 ++--- scripts/compile-tsc.js | 11 +++-- 5 files changed, 90 insertions(+), 87 deletions(-) delete mode 100644 app/angular/index.d.ts create mode 100644 app/angular/src/public_api.ts diff --git a/app/angular/index.d.ts b/app/angular/index.d.ts deleted file mode 100644 index 6675e335816..00000000000 --- a/app/angular/index.d.ts +++ /dev/null @@ -1,74 +0,0 @@ -/* - * ATTENTION: - * - moduleMetadata - * - NgModuleMetadata - * - ICollection - * - * These typings are coped out of decorators.d.ts and types.d.ts in order to fix a bug with tsc - * It was imported out of dist before which was not the proper way of exporting public API - * - * This can be fixed by migrating app/angular to typescript - */ -export declare const moduleMetadata: ( - metadata: Partial -) => (storyFn: () => any) => any; - -export interface NgModuleMetadata { - declarations?: any[]; - entryComponents?: any[]; - imports?: any[]; - schemas?: any[]; - providers?: any[]; -} -export interface ICollection { - [p: string]: any; -} - -export interface IStorybookStory { - name: string; - render: () => any; -} - -/** @todo typo in Storibook */ -export interface IStoribookSection { - kind: string; - stories: IStorybookStory[]; -} - -export interface IStoryContext { - kind: string; - name: string; - parameters: any; -} - -export interface IStory { - props?: ICollection; - moduleMetadata?: Partial; - component?: any; - template?: string; -} - -export type IGetStory = (context: IStoryContext) => IStory; - -export interface IApi { - kind: string; - addDecorator: (decorator: any) => IApi; - addParameters: (parameters: any) => IApi; - add: (storyName: string, getStory: IGetStory, parameters?: any) => IApi; -} - -declare module '@storybook/angular' { - export function storiesOf(kind: string, module: NodeModule): IApi; - - export function setAddon(addon: any): void; - - export function addDecorator(decorator: any): IApi; - - export function addParameters(parameters: any): IApi; - - export function configure(loaders: () => void, module: NodeModule): void; - - export function getStorybook(): IStoribookSection[]; - - export function forceReRender(): void; -} diff --git a/app/angular/package.json b/app/angular/package.json index 6d9d988a991..d8b0077e08d 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -15,8 +15,8 @@ "directory": "app/angular" }, "license": "MIT", - "main": "dist/client/index.js", - "jsnext:main": "src/client/index.js", + "main": "dist/index.js", + "types": "dist/public_api.d.ts", "bin": { "build-storybook": "./bin/build.js", "start-storybook": "./bin/index.js", diff --git a/app/angular/src/public_api.ts b/app/angular/src/public_api.ts new file mode 100644 index 00000000000..e376ea9b0fb --- /dev/null +++ b/app/angular/src/public_api.ts @@ -0,0 +1,76 @@ +export * from './client'; + +/* + * ATTENTION: + * - moduleMetadata + * - NgModuleMetadata + * - ICollection + * + * These typings are coped out of decorators.d.ts and types.d.ts in order to fix a bug with tsc + * It was imported out of dist before which was not the proper way of exporting public API + * + * This can be fixed by migrating app/angular to typescript + */ +// export declare const moduleMetadata: ( +// metadata: Partial +// ) => (storyFn: () => any) => any; +// +// export interface NgModuleMetadata { +// declarations?: any[]; +// entryComponents?: any[]; +// imports?: any[]; +// schemas?: any[]; +// providers?: any[]; +// } +// export interface ICollection { +// [p: string]: any; +// } +// +// export interface IStorybookStory { +// name: string; +// render: () => any; +// } +// +// /** @todo typo in Storibook */ +// export interface IStoribookSection { +// kind: string; +// stories: IStorybookStory[]; +// } +// +// export interface IStoryContext { +// kind: string; +// name: string; +// parameters: any; +// } +// +// export interface IStory { +// props?: ICollection; +// moduleMetadata?: Partial; +// component?: any; +// template?: string; +// } +// +// export type IGetStory = (context: IStoryContext) => IStory; +// +// export interface IApi { +// kind: string; +// addDecorator: (decorator: any) => IApi; +// addParameters: (parameters: any) => IApi; +// add: (storyName: string, getStory: IGetStory, parameters?: any) => IApi; +// } + +// declare module '@storybook/angular' { +// export function storiesOf(kind: string, module: NodeModule): IApi; +// +// export function setAddon(addon: any): void; +// +// export function addDecorator(decorator: any): IApi; +// +// export function addParameters(parameters: any): IApi; +// +// export function configure(loaders: () => void, module: NodeModule): void; +// +// export function getStorybook(): IStoribookSection[]; +// +// export function forceReRender(): void; +// } diff --git a/app/angular/src/server/ts_config.ts b/app/angular/src/server/ts_config.ts index 7b7d6b0ec51..2613f61db33 100644 --- a/app/angular/src/server/ts_config.ts +++ b/app/angular/src/server/ts_config.ts @@ -3,19 +3,17 @@ import path from 'path'; import { logger } from '@storybook/node-logger'; function resolveTsConfig(tsConfigPath: string): string | undefined { - if (!fs.existsSync(tsConfigPath)) { - return; + if (fs.existsSync(tsConfigPath)) { + logger.info('=> Found custom tsconfig.json'); + return tsConfigPath; } - - logger.info('=> Found custom tsconfig.json'); - - return tsConfigPath; + return undefined; } export default function(configDir: string) { const configFilePath = resolveTsConfig(path.resolve(configDir, 'tsconfig.json')); return { transpileOnly: true, - configFile: configFilePath ? configFilePath : undefined, + configFile: configFilePath || undefined, }; } diff --git a/scripts/compile-tsc.js b/scripts/compile-tsc.js index 402ed63649d..121abf167ff 100644 --- a/scripts/compile-tsc.js +++ b/scripts/compile-tsc.js @@ -13,13 +13,16 @@ function getCommand(watch) { * Currently, angular and storyshots (that contains an angular component) need to be compiled * with tsc. (see comments in compile-babel.js) */ - if ( - !process.cwd().includes(path.join('app', 'angular')) && - !process.cwd().includes(path.join('addons', 'storyshots')) - ) { + const isAngular = process.cwd().includes(path.join('app', 'angular')); + const isStoryshots = process.cwd().includes(path.join('addons', 'storyshots')); + if (!isAngular && !isStoryshots) { args.push('--emitDeclarationOnly --declaration true'); } + if (isAngular) { + args.push('--declaration true'); + } + if (watch) { args.push('-w'); } From caaf5d5857d9a8f70546c31306e0dd0d33c06435 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Fri, 7 Jun 2019 23:07:40 +0200 Subject: [PATCH 017/162] Fix path to "main" in app/angular/package.json --- app/angular/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/angular/package.json b/app/angular/package.json index d8b0077e08d..e357fef1d9d 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -15,7 +15,7 @@ "directory": "app/angular" }, "license": "MIT", - "main": "dist/index.js", + "main": "dist/client/index.js", "types": "dist/public_api.d.ts", "bin": { "build-storybook": "./bin/build.js", From 36a99faa8a541467baba8a34158119223bd227e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Fri, 7 Jun 2019 23:17:00 +0200 Subject: [PATCH 018/162] Fix lint errors --- .../src/server/__tests__/angular-cli_config.test.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/app/angular/src/server/__tests__/angular-cli_config.test.ts b/app/angular/src/server/__tests__/angular-cli_config.test.ts index 918b4048c68..fdd01cc52f9 100644 --- a/app/angular/src/server/__tests__/angular-cli_config.test.ts +++ b/app/angular/src/server/__tests__/angular-cli_config.test.ts @@ -1,5 +1,7 @@ +import { Path } from '@angular-devkit/core'; import { getAngularCliWebpackConfigOptions } from '../angular-cli_config'; -import angularJson from './angular.json'; + +const angularJson = require('./angular.json'); // eslint-disable-next-line global-require jest.mock('fs', () => require('../../../../../__mocks__/fs')); @@ -8,7 +10,7 @@ jest.mock('path', () => ({ resolve: () => 'tsconfig.json', })); -const setupFiles = files => { +const setupFiles = (files: any) => { // eslint-disable-next-line no-underscore-dangle, global-require require('fs').__setMockFiles(files); }; @@ -18,7 +20,7 @@ describe('angualr-cli_config', () => { it('should return have empty `buildOptions.sourceMap` and `buildOptions.optimization` by default', () => { setupFiles({ 'angular.json': JSON.stringify(angularJson) }); - const config = getAngularCliWebpackConfigOptions('/'); + const config = getAngularCliWebpackConfigOptions('/' as Path); expect(config).toMatchObject({ buildOptions: { @@ -45,7 +47,7 @@ describe('angualr-cli_config', () => { setupFiles({ 'angular.json': JSON.stringify(overrideAngularJson) }); - const config = getAngularCliWebpackConfigOptions('/'); + const config = getAngularCliWebpackConfigOptions('/' as Path); // Assure configuration matches values from `storybook` project expect(config).toMatchObject({ From c8a26a2c1faecea409c72df6ebcfc55952cc3398 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Fri, 7 Jun 2019 23:19:50 +0200 Subject: [PATCH 019/162] Fix lint errors --- .../src/server/__tests__/create-fork-ts-checker-plugin.test.ts | 2 +- app/angular/src/server/__tests__/ts_config.test.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts b/app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts index f51bdd1e098..3fc34f4d84d 100644 --- a/app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts +++ b/app/angular/src/server/__tests__/create-fork-ts-checker-plugin.test.ts @@ -8,7 +8,7 @@ jest.mock('path', () => ({ resolve: () => 'tsconfig.json', })); -const setupFiles = files => { +const setupFiles = (files: any) => { // eslint-disable-next-line no-underscore-dangle, global-require require('fs').__setMockFiles(files); }; diff --git a/app/angular/src/server/__tests__/ts_config.test.ts b/app/angular/src/server/__tests__/ts_config.test.ts index f282bbbd37b..1ce21e30c47 100644 --- a/app/angular/src/server/__tests__/ts_config.test.ts +++ b/app/angular/src/server/__tests__/ts_config.test.ts @@ -6,7 +6,7 @@ jest.mock('path', () => ({ resolve: () => 'tsconfig.json', })); -const setupFiles = files => { +const setupFiles = (files: any) => { // eslint-disable-next-line no-underscore-dangle, global-require require('fs').__setMockFiles(files); }; From 3bbb1cc7e7c03fb4fbbc1001efc4ebbd099409c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Fri, 7 Jun 2019 23:33:08 +0200 Subject: [PATCH 020/162] yarn.lock --- yarn.lock | 33 +++++++++++++++++++++++---------- 1 file changed, 23 insertions(+), 10 deletions(-) diff --git a/yarn.lock b/yarn.lock index 3de24a16bfd..6b17cc1e207 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3447,6 +3447,14 @@ resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a" integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA== +"@types/autoprefixer@^9.4.0": + version "9.5.0" + resolved "https://registry.yarnpkg.com/@types/autoprefixer/-/autoprefixer-9.5.0.tgz#aaf489be1bda03650717ef9cb01b8fc4d5eb1ad4" + integrity sha512-V5p6QSFDMlsNUOfRgCSbXcolHNkYgW0VsxBWg2RzZ3ckOSGvkmyCxj7cEkEM3GAJmepItITHhvHSXC0bLkrT9g== + dependencies: + "@types/browserslist" "*" + postcss "7.x.x" + "@types/babel__core@^7.1.0": version "7.1.2" resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.2.tgz#608c74f55928033fce18b99b213c16be4b3d114f" @@ -3480,6 +3488,11 @@ dependencies: "@babel/types" "^7.3.0" +"@types/browserslist@*": + version "4.4.0" + resolved "https://registry.yarnpkg.com/@types/browserslist/-/browserslist-4.4.0.tgz#e2a5f7f8c7e97afb39f50812a77e5230d3ca2353" + integrity sha512-hrIjWSu7Hh96/rKlpChe58qHEwIZ0+F5Zf4QNdvSVP5LUXbaJM04g9tBjo702VTNqPZr5znEJeqNR3nAV3vJPg== + "@types/cheerio@*": version "0.22.11" resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.11.tgz#61c0facf9636d14ba5f77fc65ed8913aa845d717" @@ -3816,7 +3829,7 @@ "@types/unist" "*" "@types/vfile-message" "*" -"@types/webpack-env@^1.13.7": +"@types/webpack-env@^1.13.7", "@types/webpack-env@^1.13.9": version "1.13.9" resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.13.9.tgz#a67287861c928ebf4159a908d1fb1a2a34d4097a" integrity sha512-p8zp5xqkly3g4cCmo2mKOHI9+Z/kObmDj0BmjbDDJQlgDTiEGTbm17MEwTAusV6XceCy+bNw9q/ZHXHyKo3zkg== @@ -21642,6 +21655,15 @@ postcss@7.0.14: source-map "^0.6.1" supports-color "^6.1.0" +postcss@7.x.x, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.2, postcss@^7.0.5, postcss@^7.0.6: + version "7.0.17" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f" + integrity sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ== + dependencies: + chalk "^2.4.2" + source-map "^0.6.1" + supports-color "^6.1.0" + postcss@^6.0.9: version "6.0.23" resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324" @@ -21651,15 +21673,6 @@ postcss@^6.0.9: source-map "^0.6.1" supports-color "^5.4.0" -postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.2, postcss@^7.0.5, postcss@^7.0.6: - version "7.0.17" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f" - integrity sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ== - dependencies: - chalk "^2.4.2" - source-map "^0.6.1" - supports-color "^6.1.0" - pouchdb-collections@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/pouchdb-collections/-/pouchdb-collections-1.0.1.tgz#fe63a17da977611abef7cb8026cb1a9553fd8359" From f49918fa9e14b8107bc4ebb9b9faadffe5fb1a6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Fri, 7 Jun 2019 23:54:03 +0200 Subject: [PATCH 021/162] Remove index.d.ts in favor of interfaces --- app/angular/src/client/preview/index.d.ts | 12 ----- app/angular/src/client/preview/index.ts | 15 +++++- app/angular/src/client/preview/types.ts | 50 ++++++++++++++++++ app/angular/src/public_api.ts | 63 ----------------------- 4 files changed, 64 insertions(+), 76 deletions(-) delete mode 100644 app/angular/src/client/preview/index.d.ts create mode 100644 app/angular/src/client/preview/types.ts diff --git a/app/angular/src/client/preview/index.d.ts b/app/angular/src/client/preview/index.d.ts deleted file mode 100644 index 335479b0529..00000000000 --- a/app/angular/src/client/preview/index.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -/* eslint-disable import/no-unresolved */ -/* eslint-disable import/extensions */ -import { IApi, IStoribookSection } from '../../../index'; - -export function storiesOf(kind: string, module: NodeModule): IApi; -export function setAddon(addon: any): void; -export function addDecorator(decorator: any): IApi; -export function addParameters(parameter: any): IApi; -export function configure(loaders: () => void, module: NodeModule): void; -export function getStorybook(): IStoribookSection[]; -export function clearDecorators(): void; -export function forceReRender(): void; diff --git a/app/angular/src/client/preview/index.ts b/app/angular/src/client/preview/index.ts index 877b04bca12..0fbd3710630 100644 --- a/app/angular/src/client/preview/index.ts +++ b/app/angular/src/client/preview/index.ts @@ -2,6 +2,19 @@ import { start } from '@storybook/core/client'; import './globals'; import render from './render'; +import { IApi, IStoribookSection } from './types'; + +interface ClientApi { + storiesOf(kind: string, module: NodeModule): IApi; + setAddon(addon: any): void; + addDecorator(decorator: any): IApi; + addParameters(parameter: any): IApi; + configure(loaders: () => void, module: NodeModule): void; + getStorybook(): IStoribookSection[]; + clearDecorators(): void; + forceReRender(): void; + raw: any; // todo add type +} const { clientApi, configApi, forceReRender } = start(render); @@ -13,7 +26,7 @@ export const { clearDecorators, getStorybook, raw, -} = clientApi; +}: ClientApi = clientApi; export const { configure } = configApi; export { forceReRender }; diff --git a/app/angular/src/client/preview/types.ts b/app/angular/src/client/preview/types.ts new file mode 100644 index 00000000000..d9cfd2b5254 --- /dev/null +++ b/app/angular/src/client/preview/types.ts @@ -0,0 +1,50 @@ +export declare const moduleMetadata: ( + metadata: Partial +) => (storyFn: () => any) => any; + +export interface NgModuleMetadata { + declarations?: any[]; + entryComponents?: any[]; + imports?: any[]; + schemas?: any[]; + providers?: any[]; +} +export interface ICollection { + [p: string]: any; +} + +export interface IStorybookStory { + name: string; + render: () => any; +} + +// @deprecated Use IStorybookSection instead +// eslint-disable-next-line @typescript-eslint/no-empty-interface +export interface IStoribookSection extends IStorybookSection {} + +export interface IStorybookSection { + kind: string; + stories: IStorybookStory[]; +} + +export interface IStoryContext { + kind: string; + name: string; + parameters: any; +} + +export interface IStory { + props?: ICollection; + moduleMetadata?: Partial; + component?: any; + template?: string; +} + +export type IGetStory = (context: IStoryContext) => IStory; + +export interface IApi { + kind: string; + addDecorator: (decorator: any) => IApi; + addParameters: (parameters: any) => IApi; + add: (storyName: string, getStory: IGetStory, parameters?: any) => IApi; +} diff --git a/app/angular/src/public_api.ts b/app/angular/src/public_api.ts index e376ea9b0fb..a2a0c8493b1 100644 --- a/app/angular/src/public_api.ts +++ b/app/angular/src/public_api.ts @@ -11,66 +11,3 @@ export * from './client'; * * This can be fixed by migrating app/angular to typescript */ -// export declare const moduleMetadata: ( -// metadata: Partial -// ) => (storyFn: () => any) => any; -// -// export interface NgModuleMetadata { -// declarations?: any[]; -// entryComponents?: any[]; -// imports?: any[]; -// schemas?: any[]; -// providers?: any[]; -// } -// export interface ICollection { -// [p: string]: any; -// } -// -// export interface IStorybookStory { -// name: string; -// render: () => any; -// } -// -// /** @todo typo in Storibook */ -// export interface IStoribookSection { -// kind: string; -// stories: IStorybookStory[]; -// } -// -// export interface IStoryContext { -// kind: string; -// name: string; -// parameters: any; -// } -// -// export interface IStory { -// props?: ICollection; -// moduleMetadata?: Partial; -// component?: any; -// template?: string; -// } -// -// export type IGetStory = (context: IStoryContext) => IStory; -// -// export interface IApi { -// kind: string; -// addDecorator: (decorator: any) => IApi; -// addParameters: (parameters: any) => IApi; -// add: (storyName: string, getStory: IGetStory, parameters?: any) => IApi; -// } - -// declare module '@storybook/angular' { -// export function storiesOf(kind: string, module: NodeModule): IApi; -// -// export function setAddon(addon: any): void; -// -// export function addDecorator(decorator: any): IApi; -// -// export function addParameters(parameters: any): IApi; -// -// export function configure(loaders: () => void, module: NodeModule): void; -// -// export function getStorybook(): IStoribookSection[]; -// -// export function forceReRender(): void; -// } From b4e47768ef8a838fbd98871e843a88cb0ab3e842 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Sat, 8 Jun 2019 10:06:14 +0200 Subject: [PATCH 022/162] Move webpack to peerDependencies instead of devDependencies --- app/angular/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/angular/package.json b/app/angular/package.json index bf799e55d01..6cca5803f3a 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -39,8 +39,7 @@ }, "devDependencies": { "@types/autoprefixer": "^9.4.0", - "@types/webpack-env": "^1.13.9", - "webpack": "^4.32.2" + "@types/webpack-env": "^1.13.9" }, "peerDependencies": { "@angular-devkit/core": "^0.6.1 || >=7.0.0", @@ -55,6 +54,7 @@ "babel-loader": "^7.0.0 || ^8.0.0", "rxjs": "^6.0.0", "typescript": "^3.4.4", + "webpack": "^4.32.2", "zone.js": "^0.8.29 || ^0.9.0" }, "engines": { From e722bc659349a86272907961a273eda1838b978d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Sat, 8 Jun 2019 10:09:30 +0200 Subject: [PATCH 023/162] try to fix angular.json import in test file --- app/angular/src/server/__tests__/angular-cli_config.test.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/angular/src/server/__tests__/angular-cli_config.test.ts b/app/angular/src/server/__tests__/angular-cli_config.test.ts index fdd01cc52f9..3cfa2293467 100644 --- a/app/angular/src/server/__tests__/angular-cli_config.test.ts +++ b/app/angular/src/server/__tests__/angular-cli_config.test.ts @@ -1,7 +1,8 @@ import { Path } from '@angular-devkit/core'; import { getAngularCliWebpackConfigOptions } from '../angular-cli_config'; -const angularJson = require('./angular.json'); +// @ts-ignore +import angularJson from './angular.json'; // eslint-disable-next-line global-require jest.mock('fs', () => require('../../../../../__mocks__/fs')); From 1d28365a5acea02609ac6d197e3022717b6e29bf Mon Sep 17 00:00:00 2001 From: Matt Tingen Date: Sat, 8 Jun 2019 16:01:26 -0400 Subject: [PATCH 024/162] Improve actions type If they need to be expanded, the `ActionsFunction` overloads can be generated with the following code: ```js function buildActionsFactoryOverloads(numParams) { const overloads = []; for (let n = 0; n < numParams; n++) { const handlerParams = []; for (let i = 1; i <= n + 1; i++) { handlerParams.push(`handler${i}: T`); } overloads.push( `(${handlerParams.join( ', ', )}, options?: ActionOptions): ActionsMap;`, ); } return overloads.join('\n'); } console.log(buildActionsFactoryOverloads(10)); ``` --- addons/actions/src/models/ActionsFunction.ts | 85 ++++++++++++++++++++ addons/actions/src/models/ActionsMap.ts | 4 +- addons/actions/src/models/index.ts | 1 + addons/actions/src/preview/actions.ts | 6 +- 4 files changed, 90 insertions(+), 6 deletions(-) create mode 100644 addons/actions/src/models/ActionsFunction.ts diff --git a/addons/actions/src/models/ActionsFunction.ts b/addons/actions/src/models/ActionsFunction.ts new file mode 100644 index 00000000000..6a096f97fee --- /dev/null +++ b/addons/actions/src/models/ActionsFunction.ts @@ -0,0 +1,85 @@ +import { ActionOptions } from './ActionOptions'; +import { ActionsMap } from './ActionsMap'; +import { HandlerFunction } from './HandlerFunction'; + +export interface ActionsFunction { + (handlerMap: Record, options?: ActionOptions): ActionsMap; + (...handlers: T[]): ActionsMap; + + (handler1: T, options?: ActionOptions): ActionsMap; + (handler1: T, handler2: T, options?: ActionOptions): ActionsMap; + (handler1: T, handler2: T, handler3: T, options?: ActionOptions): Record< + T, + HandlerFunction + >; + ( + handler1: T, + handler2: T, + handler3: T, + handler4: T, + options?: ActionOptions + ): ActionsMap; + ( + handler1: T, + handler2: T, + handler3: T, + handler4: T, + handler5: T, + options?: ActionOptions + ): ActionsMap; + ( + handler1: T, + handler2: T, + handler3: T, + handler4: T, + handler5: T, + handler6: T, + options?: ActionOptions + ): ActionsMap; + ( + handler1: T, + handler2: T, + handler3: T, + handler4: T, + handler5: T, + handler6: T, + handler7: T, + options?: ActionOptions + ): ActionsMap; + ( + handler1: T, + handler2: T, + handler3: T, + handler4: T, + handler5: T, + handler6: T, + handler7: T, + handler8: T, + options?: ActionOptions + ): ActionsMap; + ( + handler1: T, + handler2: T, + handler3: T, + handler4: T, + handler5: T, + handler6: T, + handler7: T, + handler8: T, + handler9: T, + options?: ActionOptions + ): ActionsMap; + ( + handler1: T, + handler2: T, + handler3: T, + handler4: T, + handler5: T, + handler6: T, + handler7: T, + handler8: T, + handler9: T, + handler10: T, + options?: ActionOptions + ): ActionsMap; +} diff --git a/addons/actions/src/models/ActionsMap.ts b/addons/actions/src/models/ActionsMap.ts index d7d1b6f05a3..7dde0c7c0dd 100644 --- a/addons/actions/src/models/ActionsMap.ts +++ b/addons/actions/src/models/ActionsMap.ts @@ -1,5 +1,3 @@ import { HandlerFunction } from './HandlerFunction'; -export interface ActionsMap { - [key: string]: HandlerFunction; -} +export type ActionsMap = Record; diff --git a/addons/actions/src/models/index.ts b/addons/actions/src/models/index.ts index eb72774241b..d8c7de6271d 100644 --- a/addons/actions/src/models/index.ts +++ b/addons/actions/src/models/index.ts @@ -1,4 +1,5 @@ export * from './ActionDisplay'; +export * from './ActionsFunction'; export * from './ActionOptions'; export * from './ActionsMap'; export * from './DecoratorFunction'; diff --git a/addons/actions/src/preview/actions.ts b/addons/actions/src/preview/actions.ts index 416440a66ce..41c6d077a6a 100644 --- a/addons/actions/src/preview/actions.ts +++ b/addons/actions/src/preview/actions.ts @@ -1,8 +1,8 @@ import { action } from './action'; -import { ActionOptions, ActionsMap } from '../models'; +import { ActionsFunction, ActionOptions, ActionsMap } from '../models'; import { config } from './configureActions'; -export function actions(...args: any[]): ActionsMap { +export const actions: ActionsFunction = (...args: any[]) => { let options: ActionOptions = config; const names = args; // last argument can be options @@ -26,4 +26,4 @@ export function actions(...args: any[]): ActionsMap { actionsObject[name] = action(namesObject[name], options); }); return actionsObject; -} +}; From 952bcc056f4d14c67665e2501065460b9c5e5165 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 10 Jun 2019 11:41:47 -0700 Subject: [PATCH 025/162] Fix failing CLI test --- .../src/server/__tests__/angular-cli_config.test.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/angular/src/server/__tests__/angular-cli_config.test.ts b/app/angular/src/server/__tests__/angular-cli_config.test.ts index 3cfa2293467..f9e916c8b1f 100644 --- a/app/angular/src/server/__tests__/angular-cli_config.test.ts +++ b/app/angular/src/server/__tests__/angular-cli_config.test.ts @@ -7,8 +7,11 @@ import angularJson from './angular.json'; // eslint-disable-next-line global-require jest.mock('fs', () => require('../../../../../__mocks__/fs')); jest.mock('path', () => ({ - join: () => 'angular.json', - resolve: () => 'tsconfig.json', + join: (...args) => + args[args.length - 1] === 'angular.json' + ? 'angular.json' + : jest.requireActual('path').join(...args), + resolve: (...args) => 'tsconfig.json', })); const setupFiles = (files: any) => { From 7d6598c97951638c801b650956bfedc0d324d3d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Tue, 11 Jun 2019 20:51:29 +0200 Subject: [PATCH 026/162] Set typescript version to ^3.4.0 --- app/angular/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/angular/package.json b/app/angular/package.json index 6cca5803f3a..de01c8adf89 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -53,7 +53,7 @@ "autoprefixer": "^8.1.0", "babel-loader": "^7.0.0 || ^8.0.0", "rxjs": "^6.0.0", - "typescript": "^3.4.4", + "typescript": "^3.4.0", "webpack": "^4.32.2", "zone.js": "^0.8.29 || ^0.9.0" }, From 8926239fb2f89f5ce6f85092aca7946ee8b973c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kai=20R=C3=B6der?= Date: Tue, 11 Jun 2019 22:19:13 +0200 Subject: [PATCH 027/162] Migrate app-react to typescript cra-config.test.ts needs to be fixed next --- app/react/package.json | 8 +++- app/react/src/client/{index.js => index.ts} | 0 ...t_check.test.js => element_check.test.tsx} | 4 +- .../{element_check.js => element_check.ts} | 6 +-- .../client/preview/{globals.js => globals.ts} | 0 .../preview/{index.test.js => index.test.ts} | 14 +++--- .../src/client/preview/{index.js => index.ts} | 0 .../client/preview/{render.js => render.tsx} | 5 ++- app/react/src/client/preview/types.ts | 15 +++++++ app/react/src/demo/{Button.js => Button.tsx} | 8 +++- .../src/demo/{Welcome.js => Welcome.tsx} | 43 ++++++++++++++++--- .../{mockConfig.js => mockConfig.ts} | 0 .../__mocks__/{mockRules.js => mockRules.ts} | 0 app/react/src/server/{build.js => build.ts} | 0 ...{cra-config.test.js => cra-config.test.ts} | 6 ++- .../server/{cra-config.js => cra-config.ts} | 17 ++++---- ...-preset-cra.js => framework-preset-cra.ts} | 7 +-- ... => framework-preset-react-docgen.test.ts} | 5 ++- ...en.js => framework-preset-react-docgen.ts} | 4 +- ...set-react.js => framework-preset-react.ts} | 4 +- app/react/src/server/{index.js => index.ts} | 0 .../src/server/{options.js => options.ts} | 0 app/react/src/typings.d.ts | 4 ++ app/react/tsconfig.json | 14 ++++++ yarn.lock | 14 +++++- 25 files changed, 140 insertions(+), 38 deletions(-) rename app/react/src/client/{index.js => index.ts} (100%) rename app/react/src/client/preview/{element_check.test.js => element_check.test.tsx} (97%) rename app/react/src/client/preview/{element_check.js => element_check.ts} (86%) rename app/react/src/client/preview/{globals.js => globals.ts} (100%) rename app/react/src/client/preview/{index.test.js => index.test.ts} (73%) rename app/react/src/client/preview/{index.js => index.ts} (100%) rename app/react/src/client/preview/{render.js => render.tsx} (93%) create mode 100644 app/react/src/client/preview/types.ts rename app/react/src/demo/{Button.js => Button.tsx} (78%) rename app/react/src/demo/{Welcome.js => Welcome.tsx} (74%) rename app/react/src/server/__mocks__/{mockConfig.js => mockConfig.ts} (100%) rename app/react/src/server/__mocks__/{mockRules.js => mockRules.ts} (100%) rename app/react/src/server/{build.js => build.ts} (100%) mode change 100755 => 100644 rename app/react/src/server/{cra-config.test.js => cra-config.test.ts} (95%) rename app/react/src/server/{cra-config.js => cra-config.ts} (90%) rename app/react/src/server/{framework-preset-cra.js => framework-preset-cra.ts} (81%) rename app/react/src/server/{framework-preset-react-docgen.test.js => framework-preset-react-docgen.test.ts} (93%) rename app/react/src/server/{framework-preset-react-docgen.js => framework-preset-react-docgen.ts} (84%) rename app/react/src/server/{framework-preset-react.js => framework-preset-react.ts} (77%) rename app/react/src/server/{index.js => index.ts} (100%) mode change 100755 => 100644 rename app/react/src/server/{options.js => options.ts} (100%) create mode 100644 app/react/src/typings.d.ts create mode 100644 app/react/tsconfig.json diff --git a/app/react/package.json b/app/react/package.json index 0b981f6cafa..0cd149f01b3 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -16,7 +16,7 @@ }, "license": "MIT", "main": "dist/client/index.js", - "jsnext:main": "src/client/index.js", + "types": "dist/public_api.d.ts", "bin": { "build-storybook": "./bin/build.js", "start-storybook": "./bin/index.js", @@ -48,9 +48,15 @@ }, "peerDependencies": { "babel-loader": "^7.0.0 || ^8.0.0", + "@babel/core": "^7.0.1", "react": "*", "react-dom": "*" }, + "devDependencies": { + "@types/mini-css-extract-plugin": "^0.2.1", + "@types/node": "^12.0.8", + "@types/webpack": "^4.4.32" + }, "engines": { "node": ">=8.0.0" }, diff --git a/app/react/src/client/index.js b/app/react/src/client/index.ts similarity index 100% rename from app/react/src/client/index.js rename to app/react/src/client/index.ts diff --git a/app/react/src/client/preview/element_check.test.js b/app/react/src/client/preview/element_check.test.tsx similarity index 97% rename from app/react/src/client/preview/element_check.test.js rename to app/react/src/client/preview/element_check.test.tsx index 293446612a6..862eee2a548 100644 --- a/app/react/src/client/preview/element_check.test.js +++ b/app/react/src/client/preview/element_check.test.tsx @@ -60,10 +60,11 @@ describe('element_check.isReactRenderable', () => { const number = 1337; const element = what's up; const array = [string, number, element]; - const object = { key: null }; + const object = { key: null } as any; it('allows rendering React elements only prior to React Fiber', () => { // mutate version for the purpose of the test + // @ts-ignore React.version = '15.5.4'; expect(isReactRenderable(string)).toBe(false); @@ -75,6 +76,7 @@ describe('element_check.isReactRenderable', () => { it('allows rendering string, numbers, arrays and React elements with React Fiber', () => { // mutate version for the purpose of the test + // @ts-ignore React.version = '16.0.0-alpha.13'; expect(isReactRenderable(string)).toBe(true); diff --git a/app/react/src/client/preview/element_check.js b/app/react/src/client/preview/element_check.ts similarity index 86% rename from app/react/src/client/preview/element_check.js rename to app/react/src/client/preview/element_check.ts index 185281bb3b3..42f6b551c45 100644 --- a/app/react/src/client/preview/element_check.js +++ b/app/react/src/client/preview/element_check.ts @@ -2,17 +2,17 @@ import React from 'react'; import flattenDeep from 'lodash/flattenDeep'; // return true if the element is renderable with react fiber -export const isValidFiberElement = element => +export const isValidFiberElement = (element: React.ReactElement) => typeof element === 'string' || typeof element === 'number' || React.isValidElement(element); -export const isPriorToFiber = version => { +export const isPriorToFiber = (version: string) => { const [majorVersion] = version.split('.'); return Number(majorVersion) < 16; }; // accepts an element and return true if renderable else return false -const isReactRenderable = element => { +const isReactRenderable = (element: React.ReactElement): boolean => { // storybook is running with a version prior to fiber, // run a simple check on the element if (isPriorToFiber(React.version)) { diff --git a/app/react/src/client/preview/globals.js b/app/react/src/client/preview/globals.ts similarity index 100% rename from app/react/src/client/preview/globals.js rename to app/react/src/client/preview/globals.ts diff --git a/app/react/src/client/preview/index.test.js b/app/react/src/client/preview/index.test.ts similarity index 73% rename from app/react/src/client/preview/index.test.js rename to app/react/src/client/preview/index.test.ts index cba87bb5e2d..bd25fc3ca82 100644 --- a/app/react/src/client/preview/index.test.js +++ b/app/react/src/client/preview/index.test.ts @@ -4,7 +4,7 @@ describe('preview', () => { jest.resetModules(); }); - const isFunction = value => typeof value === 'function'; + const isFunction = (value: unknown) => typeof value === 'function'; it('should return the client api in a browser environment', () => { const api = require('.'); @@ -13,10 +13,14 @@ describe('preview', () => { }); it('should return the client api in a node.js environment', () => { - jest.mock('global', () => ({ - document: undefined, - window: undefined, - })); + jest.mock( + 'global', + () => + ({ + document: undefined, + window: undefined, + } as any) + ); const api = require('.'); expect(Object.keys(api).length).toBeGreaterThan(0); expect(Object.values(api).every(isFunction)).toEqual(true); diff --git a/app/react/src/client/preview/index.js b/app/react/src/client/preview/index.ts similarity index 100% rename from app/react/src/client/preview/index.js rename to app/react/src/client/preview/index.ts diff --git a/app/react/src/client/preview/render.js b/app/react/src/client/preview/render.tsx similarity index 93% rename from app/react/src/client/preview/render.js rename to app/react/src/client/preview/render.tsx index bf5fe9c139a..373edb0706d 100644 --- a/app/react/src/client/preview/render.js +++ b/app/react/src/client/preview/render.tsx @@ -3,10 +3,11 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { stripIndents } from 'common-tags'; import isReactRenderable from './element_check'; +import { RenderMainArgs } from './types'; const rootEl = document ? document.getElementById('root') : null; -function render(node, el) { +function render(node: React.ReactElement, el: Element) { ReactDOM.render( process.env.STORYBOOK_EXAMPLE_APP ? {node} : node, el @@ -20,7 +21,7 @@ export default function renderMain({ showMain, showError, forceRender, -}) { +}: RenderMainArgs) { const element = storyFn(); if (!element) { diff --git a/app/react/src/client/preview/types.ts b/app/react/src/client/preview/types.ts new file mode 100644 index 00000000000..11d992f8d13 --- /dev/null +++ b/app/react/src/client/preview/types.ts @@ -0,0 +1,15 @@ +import React from 'react'; + +export interface ShowErrorArgs { + title: string; + description: string; +} + +export interface RenderMainArgs { + storyFn: () => React.ReactElement | undefined; + selectedKind: string; + selectedStory: string; + showMain: () => void; + showError: (args: ShowErrorArgs) => void; + forceRender: boolean; +} diff --git a/app/react/src/demo/Button.js b/app/react/src/demo/Button.tsx similarity index 78% rename from app/react/src/demo/Button.js rename to app/react/src/demo/Button.tsx index 901d0e8aa7e..33811af2d28 100644 --- a/app/react/src/demo/Button.js +++ b/app/react/src/demo/Button.tsx @@ -11,7 +11,13 @@ const styles = { margin: 10, }; -const Button = ({ children, onClick }) => ( +const Button = ({ + children, + onClick, +}: { + children: React.ReactChildren; + onClick: (event: React.MouseEvent) => void; +}) => ( diff --git a/app/react/src/demo/Welcome.js b/app/react/src/demo/Welcome.tsx similarity index 74% rename from app/react/src/demo/Welcome.js rename to app/react/src/demo/Welcome.tsx index 0c5a4cafaf5..78c87898d66 100644 --- a/app/react/src/demo/Welcome.js +++ b/app/react/src/demo/Welcome.tsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -const Main = props => ( +const Main = (props?: React.DetailedHTMLProps, HTMLElement>) => (
( /> ); -const Title = ({ children, ...props }) =>

{children}

; +const Title = ({ + children, + ...props +}: { + children: string; + props?: React.DetailedHTMLProps, HTMLHeadingElement>; +}) =>

{children}

; Title.propTypes = { children: PropTypes.node, }; @@ -21,7 +27,9 @@ Title.defaultProps = { children: undefined, }; -const Note = props => ( +const Note = ( + props?: React.DetailedHTMLProps, HTMLParagraphElement> +) => (

( /> ); -const InlineCode = props => ( +const InlineCode = ( + props?: React.DetailedHTMLProps, HTMLElement> +) => ( ( /> ); -const Link = ({ children, href, ...props }) => ( +const Link = ({ + children, + href, + target, + ...props +}: { + children: string; + href: string; + target: string; + rel: string; + props?: React.DetailedHTMLProps, HTMLAnchorElement>; +}) => ( ( +const NavButton = ({ + children, + onClick, + ...props +}: { + children: string; + onClick: (event: React.MouseEvent) => void; + props?: React.DetailedHTMLProps, HTMLButtonElement>; +}) => ( + ), + { notes: { disabled: true } } +); +``` + ## Global Configuration Sometimes you might want to configure an addon globally, as in the case of collocating stories with components, or just simply to keep your stories file cleaner. To do that, you can add your decorators to a config file, typically in `.storybook/config.js`. Here's an example of how you might do that. diff --git a/docs/src/pages/addons/writing-addons/index.md b/docs/src/pages/addons/writing-addons/index.md index eaa34bd3662..e634cd22402 100644 --- a/docs/src/pages/addons/writing-addons/index.md +++ b/docs/src/pages/addons/writing-addons/index.md @@ -110,6 +110,7 @@ addons.register(ADDON_ID, api => { type: types.PANEL, title, render, + paramKey: PARAM_KEY, }); }); ``` @@ -259,6 +260,34 @@ storiesOf('Button', module) }); ``` +### Disabling an addon panel + +It's possible to disable an addon panel for a particular story. + +To offer that capability, you need to pass the paramKey when you register the panel +```js +addons.register(ADDON_ID, () => { + addons.add(PANEL_ID, { + type: types.PANEL, + title: 'My Addon', + render: () =>

, + paramKey: 'myAddon', + }); +}); +``` + +While adding a story, you can then pass a `disabled` parameter. + +```js +storiesOf('Button', module) + .add('with text', () => , { + myAddon: { + disabled: true, + }, + }); +``` + + ## Styling your addon We use [emotion](https://emotion.sh) for styling, AND we provide a theme which can be set by the user! diff --git a/lib/addons/src/index.ts b/lib/addons/src/index.ts index 14f077b686d..4e593d6e8c3 100644 --- a/lib/addons/src/index.ts +++ b/lib/addons/src/index.ts @@ -24,7 +24,6 @@ export interface Addon { route?: (routeOptions: RouteOptions) => string; match?: (matchOptions: MatchOptions) => boolean; render: (renderOptions: RenderOptions) => ReactElement; - paramKey?: string; } export type Loader = (api: API) => void; diff --git a/lib/api/src/modules/addons.ts b/lib/api/src/modules/addons.ts index d3ef5704a00..67e06a9ce14 100644 --- a/lib/api/src/modules/addons.ts +++ b/lib/api/src/modules/addons.ts @@ -29,6 +29,7 @@ export interface Addon { route?: (routeOptions: RouteOptions) => string; match?: (matchOptions: MatchOptions) => boolean; render: (renderOptions: RenderOptions) => ReactElement; + paramKey: string; } export interface Collection { [key: string]: Addon; @@ -41,10 +42,15 @@ interface Panels { export interface SubAPI { getElements: (type: Types) => Collection; getPanels: () => Collection; + getPanelsForStory: (storyParameters: StoryParameters) => Collection; getSelectedPanel: () => string; setSelectedPanel: (panelName: string) => void; } +interface StoryParameters { + [key: string]: any; +} + export function ensurePanel(panels: Panels, selectedPanel?: string, currentPanel?: string) { const keys = Object.keys(panels); @@ -62,6 +68,23 @@ export default ({ provider, store }: Module) => { const api: SubAPI = { getElements: type => provider.getElements(type), getPanels: () => api.getElements(types.PANEL), + getPanelsForStory: (storyParameters: StoryParameters) => { + const panels = api.getPanels(); + if (!panels || !storyParameters) { + return panels; + } + + const filteredPanels: Collection = {}; + Object.entries(panels).forEach(([id, panel]) => { + const { paramKey } = panel; + if (paramKey && storyParameters[paramKey] && storyParameters[paramKey].disabled) { + return; + } + filteredPanels[id] = panel; + }); + + return filteredPanels; + }, getSelectedPanel: () => { const { selectedPanel } = store.getState(); return ensurePanel(api.getPanels(), selectedPanel, selectedPanel); diff --git a/lib/api/src/tests/addons.test.js b/lib/api/src/tests/addons.test.js new file mode 100644 index 00000000000..0053f44471f --- /dev/null +++ b/lib/api/src/tests/addons.test.js @@ -0,0 +1,147 @@ +import initAddons, { types } from '../modules/addons'; + +const PANELS = { + a11y: { + title: 'Accessibility', + paramKey: 'a11y', + }, + actions: { + title: 'Actions', + paramKey: 'actions', + }, + knobs: { + title: 'Knobs', + paramKey: 'knobs', + }, +}; + +const provider = { + getElements(type) { + if (type === types.PANEL) { + return PANELS; + } + return null; + }, +}; + +const store = { + getState: () => ({ + selectedPanel: '', + }), + setState: jest.fn(), +}; + +describe('Addons API', () => { + describe('#getElements', () => { + it('should return provider elements', () => { + // given + const { api } = initAddons({ provider, store }); + + // when + const panels = api.getElements(types.PANEL); + + // then + expect(panels).toBe(PANELS); + }); + }); + + describe('#getPanels', () => { + it('should return provider panels', () => { + // given + const { api } = initAddons({ provider, store }); + + // when + const panels = api.getPanels(); + + // then + expect(panels).toBe(PANELS); + }); + }); + + describe('#getPanelsForStory', () => { + it('should return all panels by default', () => { + // given + const { api } = initAddons({ provider, store }); + + // when + const filteredPanels = api.getPanelsForStory(); + + // then + expect(filteredPanels).toBe(PANELS); + }); + + it('should filter disabled addons', () => { + // given + const { api } = initAddons({ provider, store }); + const storyParameters = { + a11y: { disabled: true }, + }; + + // when + const filteredPanels = api.getPanelsForStory(storyParameters); + + // then + expect(filteredPanels).toEqual({ + actions: PANELS.actions, + knobs: PANELS.knobs, + }); + }); + }); + + describe('#getSelectedPanel', () => { + it('should return provider panels', () => { + // given + const storeWithSelectedPanel = { + getState: () => ({ + selectedPanel: 'actions', + }), + setState: jest.fn(), + }; + const { api } = initAddons({ provider, store: storeWithSelectedPanel }); + + // when + const selectedPanel = api.getSelectedPanel(); + + // then + expect(selectedPanel).toBe('actions'); + }); + + it('should return first panel when selected is not a panel', () => { + // given + const storeWithSelectedPanel = { + getState: () => ({ + selectedPanel: 'unknown', + }), + setState: jest.fn(), + }; + const { api } = initAddons({ provider, store: storeWithSelectedPanel }); + + // when + const selectedPanel = api.getSelectedPanel(); + + // then + expect(selectedPanel).toBe('a11y'); + }); + }); + + describe('#setSelectedPanel', () => { + it('should set value inn store', () => { + // given + const setState = jest.fn(); + const storeWithSelectedPanel = { + getState: () => ({ + selectedPanel: 'actions', + }), + setState, + }; + const { api } = initAddons({ provider, store: storeWithSelectedPanel }); + expect(setState).not.toHaveBeenCalled(); + + // when + api.setSelectedPanel('knobs'); + + // then + expect(setState).toHaveBeenCalledWith({ selectedPanel: 'knobs' }, { persistence: 'session' }); + }); + }); +}); diff --git a/lib/ui/src/containers/panel.js b/lib/ui/src/containers/panel.js index 2c8e60bfa04..6e6a5ceaafb 100644 --- a/lib/ui/src/containers/panel.js +++ b/lib/ui/src/containers/panel.js @@ -10,25 +10,8 @@ const createPanelActions = memoize(1)(api => ({ togglePosition: () => api.togglePanelPosition(), })); -const filterPanel = (panels, storyParameters) => { - if (!panels || !storyParameters) { - return panels; - } - - const filteredPanels = {}; - Object.entries(panels).forEach(([id, panel]) => { - const { paramKey } = panel; - const panelParameters = paramKey && storyParameters[paramKey]; - if (!panelParameters || !panelParameters.disabled) { - filteredPanels[id] = panel; - } - }); - - return filteredPanels; -}; - const mapper = ({ state, api }) => ({ - panels: filterPanel(api.getPanels(), api.getParameters(state.storyId)), + panels: api.getPanelsForStory(api.getParameters(state.storyId)), selectedPanel: api.getSelectedPanel(), panelPosition: state.layout.panelPosition, actions: createPanelActions(api), diff --git a/lib/ui/src/containers/panel.stories.js b/lib/ui/src/containers/panel.stories.js new file mode 100644 index 00000000000..f920d6639ff --- /dev/null +++ b/lib/ui/src/containers/panel.stories.js @@ -0,0 +1,22 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; + +storiesOf('UI|Addon Panel', module) + .add('default', () =>
By default all addon panels are rendered
) + .add( + 'disable panel', + () => ( +
+ This story disables Actions and Accessibility panels + 
+          {`storiesOf('UI|Addon Panel', module)
+  .add(
+    'my story',
+    ,
+    { a11y: { disable: true }, actions: { disable: true } }
+  );`}
+
+
+ ), + { a11y: { disabled: true }, actions: { disabled: true } } + ); From da1a64c1c2a98c9413b62c8dc833d8775e87ae58 Mon Sep 17 00:00:00 2001 From: Jimmy Somsanith Date: Wed, 12 Jun 2019 21:37:18 +0200 Subject: [PATCH 029/162] Make getStoryPanels a full api method --- lib/api/src/modules/addons.ts | 5 +++-- lib/api/src/tests/addons.test.js | 27 ++++++++++++++++++++------- lib/ui/src/containers/panel.js | 2 +- 3 files changed, 24 insertions(+), 10 deletions(-) diff --git a/lib/api/src/modules/addons.ts b/lib/api/src/modules/addons.ts index 67e06a9ce14..f8732bb1581 100644 --- a/lib/api/src/modules/addons.ts +++ b/lib/api/src/modules/addons.ts @@ -42,7 +42,7 @@ interface Panels { export interface SubAPI { getElements: (type: Types) => Collection; getPanels: () => Collection; - getPanelsForStory: (storyParameters: StoryParameters) => Collection; + getStoryPanels: (storyId: string) => Collection; getSelectedPanel: () => string; setSelectedPanel: (panelName: string) => void; } @@ -68,7 +68,8 @@ export default ({ provider, store }: Module) => { const api: SubAPI = { getElements: type => provider.getElements(type), getPanels: () => api.getElements(types.PANEL), - getPanelsForStory: (storyParameters: StoryParameters) => { + getStoryPanels: storyId => { + const storyParameters = provider.getParameters(storyId); const panels = api.getPanels(); if (!panels || !storyParameters) { return panels; diff --git a/lib/api/src/tests/addons.test.js b/lib/api/src/tests/addons.test.js index 0053f44471f..95a016a7150 100644 --- a/lib/api/src/tests/addons.test.js +++ b/lib/api/src/tests/addons.test.js @@ -58,13 +58,17 @@ describe('Addons API', () => { }); }); - describe('#getPanelsForStory', () => { + describe('#getStoryPanels', () => { it('should return all panels by default', () => { // given - const { api } = initAddons({ provider, store }); + const providerWithStoryParameters = { + ...provider, + getParameters: () => {}, + }; + const { api } = initAddons({ provider: providerWithStoryParameters, store }); // when - const filteredPanels = api.getPanelsForStory(); + const filteredPanels = api.getStoryPanels(); // then expect(filteredPanels).toBe(PANELS); @@ -72,13 +76,22 @@ describe('Addons API', () => { it('should filter disabled addons', () => { // given - const { api } = initAddons({ provider, store }); - const storyParameters = { - a11y: { disabled: true }, + const storyId = 'story 1'; + const providerWithStoryParameters = { + ...provider, + getParameters: id => { + if (id === storyId) { + return { + a11y: { disabled: true }, + }; + } + return null; + }, }; + const { api } = initAddons({ provider: providerWithStoryParameters, store }); // when - const filteredPanels = api.getPanelsForStory(storyParameters); + const filteredPanels = api.getStoryPanels(storyId); // then expect(filteredPanels).toEqual({ diff --git a/lib/ui/src/containers/panel.js b/lib/ui/src/containers/panel.js index 6e6a5ceaafb..fcf2e7eca28 100644 --- a/lib/ui/src/containers/panel.js +++ b/lib/ui/src/containers/panel.js @@ -11,7 +11,7 @@ const createPanelActions = memoize(1)(api => ({ })); const mapper = ({ state, api }) => ({ - panels: api.getPanelsForStory(api.getParameters(state.storyId)), + panels: api.getStoryPanels(state.storyId), selectedPanel: api.getSelectedPanel(), panelPosition: state.layout.panelPosition, actions: createPanelActions(api), From 78722470216bf193ddb672f40afc150599297e1c Mon Sep 17 00:00:00 2001 From: Jimmy Somsanith Date: Wed, 12 Jun 2019 23:05:17 +0200 Subject: [PATCH 030/162] Fix type --- lib/addons/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/addons/src/index.ts b/lib/addons/src/index.ts index 046b59d403c..c0ccd03ed4d 100644 --- a/lib/addons/src/index.ts +++ b/lib/addons/src/index.ts @@ -24,6 +24,7 @@ export interface Addon { route?: (routeOptions: RouteOptions) => string; match?: (matchOptions: MatchOptions) => boolean; render: (renderOptions: RenderOptions) => ReactElement; + paramKey: string; } export type Loader = (api: API) => void; From ae3484bb97d0b2081da20e108d2a5c6d9a19f4a4 Mon Sep 17 00:00:00 2001 From: Jimmy Somsanith Date: Fri, 14 Jun 2019 21:43:16 +0200 Subject: [PATCH 031/162] Add param key in graphql addon --- addons/graphql/src/register.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/addons/graphql/src/register.ts b/addons/graphql/src/register.ts index d69b5af6361..68d41a5dd20 100644 --- a/addons/graphql/src/register.ts +++ b/addons/graphql/src/register.ts @@ -1,7 +1,7 @@ import { addons, types } from '@storybook/addons'; import GQL from './manager'; -import { ADDON_ID } from '.'; +import { ADDON_ID, PARAM_KEY } from '.'; export const register = () => { addons.register(ADDON_ID, () => { @@ -11,6 +11,7 @@ export const register = () => { route: ({ storyId }) => `/graphql/${storyId}`, match: ({ viewMode }) => viewMode === 'graphql', render: GQL, + paramKey: PARAM_KEY, }); }); }; From f04b6e8191287a919774973b8d141e499976e230 Mon Sep 17 00:00:00 2001 From: Jimmy Somsanith Date: Fri, 14 Jun 2019 22:40:07 +0200 Subject: [PATCH 032/162] Fix type --- addons/design-assets/src/register.tsx | 3 ++- lib/addons/src/index.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/addons/design-assets/src/register.tsx b/addons/design-assets/src/register.tsx index 61fda7a988d..fb903ec514e 100644 --- a/addons/design-assets/src/register.tsx +++ b/addons/design-assets/src/register.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { addons, types } from '@storybook/addons'; import { AddonPanel } from '@storybook/components'; -import { ADDON_ID, PANEL_ID } from './constants'; +import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants'; import { Panel } from './panel'; addons.register(ADDON_ID, () => { @@ -14,5 +14,6 @@ addons.register(ADDON_ID, () => { ), + paramKey: PARAM_KEY, }); }); diff --git a/lib/addons/src/index.ts b/lib/addons/src/index.ts index c0ccd03ed4d..5e4843cbaf1 100644 --- a/lib/addons/src/index.ts +++ b/lib/addons/src/index.ts @@ -24,7 +24,7 @@ export interface Addon { route?: (routeOptions: RouteOptions) => string; match?: (matchOptions: MatchOptions) => boolean; render: (renderOptions: RenderOptions) => ReactElement; - paramKey: string; + paramKey?: string; } export type Loader = (api: API) => void; From 4ef875198695de3a7e07e5c21665a18c3537e875 Mon Sep 17 00:00:00 2001 From: Jimmy Somsanith Date: Fri, 14 Jun 2019 23:25:39 +0200 Subject: [PATCH 033/162] Cleann --- lib/api/src/modules/addons.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/lib/api/src/modules/addons.ts b/lib/api/src/modules/addons.ts index d84525a1899..35db70f0475 100644 --- a/lib/api/src/modules/addons.ts +++ b/lib/api/src/modules/addons.ts @@ -1,6 +1,6 @@ import { ReactElement } from 'react'; -import { Module, State } from '../index'; +import { Module } from '../index'; import { Options } from '../store'; export enum types { @@ -31,7 +31,7 @@ export interface Addon { route?: (routeOptions: RouteOptions) => string; match?: (matchOptions: MatchOptions) => boolean; render: (renderOptions: RenderOptions) => ReactElement; - paramKey: string; + paramKey?: string; } export interface Collection { [key: string]: Addon; @@ -57,10 +57,6 @@ export interface SubAPI { getAddonState(addonId: string): S; } -interface StoryParameters { - [key: string]: any; -} - export function ensurePanel(panels: Panels, selectedPanel?: string, currentPanel?: string) { const keys = Object.keys(panels); From 521b2b0f228d5942db01b139158d519add6289c2 Mon Sep 17 00:00:00 2001 From: Jimmy Somsanith Date: Sat, 15 Jun 2019 00:00:50 +0200 Subject: [PATCH 034/162] Add snapshots of panel story --- .../__snapshots__/panel.stories.storyshot | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 lib/ui/src/containers/__snapshots__/panel.stories.storyshot diff --git a/lib/ui/src/containers/__snapshots__/panel.stories.storyshot b/lib/ui/src/containers/__snapshots__/panel.stories.storyshot new file mode 100644 index 00000000000..9ec192c6ca7 --- /dev/null +++ b/lib/ui/src/containers/__snapshots__/panel.stories.storyshot @@ -0,0 +1,21 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots UI|Addon Panel default 1`] = ` +
+ By default all addon panels are rendered +
+`; + +exports[`Storyshots UI|Addon Panel disable panel 1`] = ` +
+ This story disables Actions and Accessibility panels + 
+    storiesOf('UI|Addon Panel', module)
+  .add(
+    'my story',
+    <MyComponent />,
+    { a11y: { disable: true }, actions: { disable: true } }
+  );
+
+
+`; From ff0453400bf86f58278475a05c99dd75e8990182 Mon Sep 17 00:00:00 2001 From: Jimmy Somsanith Date: Mon, 17 Jun 2019 23:51:22 +0200 Subject: [PATCH 035/162] Fix addon api --- lib/api/src/modules/addons.ts | 26 +++++++++++++++++-------- lib/api/src/tests/addons.test.js | 33 ++++++++++++++++---------------- lib/ui/src/containers/panel.js | 2 +- 3 files changed, 35 insertions(+), 26 deletions(-) diff --git a/lib/api/src/modules/addons.ts b/lib/api/src/modules/addons.ts index 35db70f0475..ce95b9765bd 100644 --- a/lib/api/src/modules/addons.ts +++ b/lib/api/src/modules/addons.ts @@ -43,10 +43,16 @@ interface Panels { type StateMerger = (input: S) => S; +interface StoryInput { + parameters: { + [parameterName: string]: any; + }; +} + export interface SubAPI { getElements: (type: Types) => Collection; getPanels: () => Collection; - getStoryPanels: (storyId: string) => Collection; + getStoryPanels: () => Collection; getSelectedPanel: () => string; setSelectedPanel: (panelName: string) => void; setAddonState( @@ -74,17 +80,21 @@ export default ({ provider, store }: Module) => { const api: SubAPI = { getElements: type => provider.getElements(type), getPanels: () => api.getElements(types.PANEL), - getStoryPanels: storyId => { - const storyParameters = provider.getParameters(storyId); - const panels = api.getPanels(); - if (!panels || !storyParameters) { - return panels; + getStoryPanels: () => { + const allPanels = api.getPanels(); + const { storyId, storiesHash } = store.getState(); + const storyInput = storyId && (storiesHash[storyId] as StoryInput); + + if (!allPanels || !storyInput) { + return allPanels; } + const { parameters } = storyInput; + const filteredPanels: Collection = {}; - Object.entries(panels).forEach(([id, panel]) => { + Object.entries(allPanels).forEach(([id, panel]) => { const { paramKey } = panel; - if (paramKey && storyParameters[paramKey] && storyParameters[paramKey].disabled) { + if (paramKey && parameters[paramKey] && parameters[paramKey].disabled) { return; } filteredPanels[id] = panel; diff --git a/lib/api/src/tests/addons.test.js b/lib/api/src/tests/addons.test.js index 95a016a7150..c17c485518e 100644 --- a/lib/api/src/tests/addons.test.js +++ b/lib/api/src/tests/addons.test.js @@ -61,11 +61,7 @@ describe('Addons API', () => { describe('#getStoryPanels', () => { it('should return all panels by default', () => { // given - const providerWithStoryParameters = { - ...provider, - getParameters: () => {}, - }; - const { api } = initAddons({ provider: providerWithStoryParameters, store }); + const { api } = initAddons({ provider, store }); // when const filteredPanels = api.getStoryPanels(); @@ -77,21 +73,24 @@ describe('Addons API', () => { it('should filter disabled addons', () => { // given const storyId = 'story 1'; - const providerWithStoryParameters = { - ...provider, - getParameters: id => { - if (id === storyId) { - return { - a11y: { disabled: true }, - }; - } - return null; - }, + const storeWithStory = { + getState: () => ({ + storyId, + storiesHash: { + [storyId]: { + parameters: { + a11y: { disabled: true }, + }, + }, + }, + }), + setState: jest.fn(), }; - const { api } = initAddons({ provider: providerWithStoryParameters, store }); + + const { api } = initAddons({ provider, store: storeWithStory }); // when - const filteredPanels = api.getStoryPanels(storyId); + const filteredPanels = api.getStoryPanels(); // then expect(filteredPanels).toEqual({ diff --git a/lib/ui/src/containers/panel.js b/lib/ui/src/containers/panel.js index fcf2e7eca28..88821840822 100644 --- a/lib/ui/src/containers/panel.js +++ b/lib/ui/src/containers/panel.js @@ -11,7 +11,7 @@ const createPanelActions = memoize(1)(api => ({ })); const mapper = ({ state, api }) => ({ - panels: api.getStoryPanels(state.storyId), + panels: api.getStoryPanels(), selectedPanel: api.getSelectedPanel(), panelPosition: state.layout.panelPosition, actions: createPanelActions(api), From fcbff29ffdb6dcd6b025a031851560d13432cc98 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 13 Jun 2019 00:50:44 +0200 Subject: [PATCH 036/162] CHANGE versions again, sorry, CLI tests use published version, we should really fix that! --- addons/a11y/package.json | 14 +- addons/actions/package.json | 12 +- addons/backgrounds/package.json | 14 +- addons/centered/package.json | 2 +- addons/contexts/package.json | 10 +- addons/cssresources/package.json | 10 +- addons/design-assets/package.json | 14 +- addons/events/package.json | 8 +- addons/google-analytics/package.json | 6 +- addons/graphql/package.json | 6 +- addons/info/package.json | 10 +- addons/jest/package.json | 12 +- addons/knobs/package.json | 12 +- addons/links/package.json | 8 +- addons/notes/package.json | 16 +- addons/ondevice-actions/package.json | 8 +- addons/ondevice-backgrounds/package.json | 4 +- addons/ondevice-knobs/package.json | 8 +- addons/ondevice-notes/package.json | 4 +- addons/options/package.json | 4 +- addons/queryparams/package.json | 14 +- .../storyshots/storyshots-core/package.json | 4 +- .../storyshots-puppeteer/package.json | 8 +- addons/storysource/package.json | 10 +- addons/viewport/package.json | 12 +- app/angular/package.json | 6 +- app/ember/package.json | 4 +- app/html/package.json | 4 +- app/marko/package.json | 4 +- app/mithril/package.json | 4 +- app/polymer/package.json | 4 +- app/preact/package.json | 4 +- app/rax/package.json | 4 +- app/react-native-server/package.json | 14 +- app/react-native/package.json | 12 +- app/react/package.json | 6 +- app/riot/package.json | 4 +- app/svelte/package.json | 4 +- app/vue/package.json | 4 +- dev-kits/addon-parameter/package.json | 14 +- dev-kits/addon-roundtrip/package.json | 14 +- docs/package.json | 4 +- docs/src/versions/latest.json | 2 +- .../crna-kitchen-sink/package.json | 18 +- examples/angular-cli/package.json | 28 +- examples/cra-kitchen-sink/package.json | 34 +- examples/cra-react15/package.json | 10 +- examples/cra-ts-kitchen-sink/package.json | 14 +- examples/dev-kits/package.json | 18 +- examples/ember-cli/package.json | 26 +- examples/html-kitchen-sink/package.json | 36 +- examples/marko-cli/package.json | 16 +- examples/mithril-kitchen-sink/package.json | 28 +- examples/official-storybook/package.json | 54 +-- examples/polymer-cli/package.json | 22 +- examples/preact-kitchen-sink/package.json | 30 +- examples/rax-kitchen-sink/package.json | 34 +- examples/riot-kitchen-sink/package.json | 28 +- examples/svelte-kitchen-sink/package.json | 28 +- examples/vue-kitchen-sink/package.json | 30 +- lerna.json | 2 +- lib/addons/package.json | 8 +- lib/api/package.json | 12 +- lib/channel-postmessage/package.json | 6 +- lib/channel-websocket/package.json | 4 +- lib/channels/package.json | 2 +- lib/cli/package.json | 58 +-- lib/client-api/package.json | 11 +- ...{client_api.test.js => client_api.test.ts} | 0 .../src/{client_api.js => client_api.ts} | 20 +- .../src/{config_api.js => config_api.ts} | 42 ++- lib/client-api/src/{index.js => index.ts} | 0 .../src/{pathToId.js => pathToId.ts} | 2 +- .../{pathToid.test.js => pathToid.test.ts} | 0 .../src/{queryparams.js => queryparams.ts} | 3 +- ...tory_store.test.js => story_store.test.ts} | 0 .../src/{story_store.js => story_store.ts} | 99 +++-- lib/client-api/src/subscriptions_store.js | 34 -- ...re.test.js => subscriptions_store.test.ts} | 2 +- lib/client-api/src/subscriptions_store.ts | 34 ++ lib/client-api/src/types.ts | 355 ++++++++++++++++++ lib/client-api/src/typings.d.ts | 1 + lib/client-api/tsconfig.json | 8 + lib/client-logger/package.json | 2 +- lib/codemod/package.json | 2 +- lib/components/package.json | 6 +- lib/core-events/package.json | 2 +- lib/core/package.json | 20 +- lib/node-logger/package.json | 2 +- lib/router/package.json | 2 +- lib/theming/package.json | 4 +- lib/ui/package.json | 16 +- package.json | 2 +- 93 files changed, 1001 insertions(+), 556 deletions(-) rename lib/client-api/src/{client_api.test.js => client_api.test.ts} (100%) rename lib/client-api/src/{client_api.js => client_api.ts} (92%) rename lib/client-api/src/{config_api.js => config_api.ts} (73%) rename lib/client-api/src/{index.js => index.ts} (100%) rename lib/client-api/src/{pathToId.js => pathToId.ts} (77%) rename lib/client-api/src/{pathToid.test.js => pathToid.test.ts} (100%) rename lib/client-api/src/{queryparams.js => queryparams.ts} (85%) rename lib/client-api/src/{story_store.test.js => story_store.test.ts} (100%) rename lib/client-api/src/{story_store.js => story_store.ts} (75%) delete mode 100644 lib/client-api/src/subscriptions_store.js rename lib/client-api/src/{subscriptions_store.test.js => subscriptions_store.test.ts} (99%) create mode 100644 lib/client-api/src/subscriptions_store.ts create mode 100644 lib/client-api/src/types.ts create mode 100644 lib/client-api/src/typings.d.ts create mode 100644 lib/client-api/tsconfig.json diff --git a/addons/a11y/package.json b/addons/a11y/package.json index f6c9dabf612..6462f86c1a8 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "a11y addon for storybook", "keywords": [ "a11y", @@ -26,12 +26,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/api": "5.2.0-unreleased.0", - "@storybook/client-logger": "5.2.0-unreleased.0", - "@storybook/components": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/api": "5.2.0-alpha.23", + "@storybook/client-logger": "5.2.0-alpha.23", + "@storybook/components": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "axe-core": "^3.2.2", "common-tags": "^1.8.0", "core-js": "^3.0.1", diff --git a/addons/actions/package.json b/addons/actions/package.json index 670f225bf37..9231d6135f4 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Action Logger addon for storybook", "keywords": [ "storybook" @@ -21,11 +21,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/api": "5.2.0-unreleased.0", - "@storybook/components": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/api": "5.2.0-alpha.23", + "@storybook/components": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "core-js": "^3.0.1", "fast-deep-equal": "^2.0.1", "global": "^4.3.2", diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json index 3e7be73e597..273d598a0d1 100644 --- a/addons/backgrounds/package.json +++ b/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "A storybook addon to show different backgrounds for your preview", "keywords": [ "addon", @@ -25,12 +25,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/api": "5.2.0-unreleased.0", - "@storybook/client-logger": "5.2.0-unreleased.0", - "@storybook/components": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/api": "5.2.0-alpha.23", + "@storybook/client-logger": "5.2.0-alpha.23", + "@storybook/components": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "core-js": "^3.0.1", "memoizerific": "^1.11.3", "react": "^16.8.3", diff --git a/addons/centered/package.json b/addons/centered/package.json index f5a9cb21aaf..da975b3c42a 100644 --- a/addons/centered/package.json +++ b/addons/centered/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-centered", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook decorator to center components", "keywords": [ "addon", diff --git a/addons/contexts/package.json b/addons/contexts/package.json index 24751544e9b..4796b46bb4f 100644 --- a/addons/contexts/package.json +++ b/addons/contexts/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-contexts", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook Addon Contexts", "keywords": [ "storybook", @@ -28,10 +28,10 @@ "dev:check-types": "tsc --noEmit" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/api": "5.2.0-unreleased.0", - "@storybook/components": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0" + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/api": "5.2.0-alpha.23", + "@storybook/components": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23" }, "peerDependencies": { "global": "*", diff --git a/addons/cssresources/package.json b/addons/cssresources/package.json index aa17a9af483..2acdafdd173 100644 --- a/addons/cssresources/package.json +++ b/addons/cssresources/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-cssresources", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "A storybook addon to switch between css resources at runtime for your story", "keywords": [ "addon", @@ -25,10 +25,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/api": "5.2.0-unreleased.0", - "@storybook/components": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/api": "5.2.0-alpha.23", + "@storybook/components": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", "core-js": "^3.0.1", "global": "^4.3.2", "react": "^16.8.3" diff --git a/addons/design-assets/package.json b/addons/design-assets/package.json index 7d48245248f..659b71f4053 100644 --- a/addons/design-assets/package.json +++ b/addons/design-assets/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-design-assets", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Design asset preview for storybook", "keywords": [ "addon", @@ -27,12 +27,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/api": "5.2.0-unreleased.0", - "@storybook/client-logger": "5.2.0-unreleased.0", - "@storybook/components": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/api": "5.2.0-alpha.23", + "@storybook/client-logger": "5.2.0-alpha.23", + "@storybook/components": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "common-tags": "^1.8.0", "core-js": "^2.6.5", "global": "^4.3.2", diff --git a/addons/events/package.json b/addons/events/package.json index bb6cd5d43dc..9857a865a34 100644 --- a/addons/events/package.json +++ b/addons/events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-events", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Add events to your Storybook stories.", "keywords": [ "addon", @@ -24,9 +24,9 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "core-js": "^3.0.1", "format-json": "^1.0.3", "prop-types": "^15.7.2", diff --git a/addons/google-analytics/package.json b/addons/google-analytics/package.json index 54e32ed12cf..8597020c20f 100644 --- a/addons/google-analytics/package.json +++ b/addons/google-analytics/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-google-analytics", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook addon for google analytics", "keywords": [ "addon", @@ -20,8 +20,8 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", "core-js": "^3.0.1", "global": "^4.3.2", "react-ga": "^2.5.7" diff --git a/addons/graphql/package.json b/addons/graphql/package.json index 4c88b163dca..e4a38145ee8 100644 --- a/addons/graphql/package.json +++ b/addons/graphql/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-graphql", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook addon to display the GraphiQL IDE", "keywords": [ "addon", @@ -22,8 +22,8 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/api": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/api": "5.2.0-alpha.23", "core-js": "^3.0.1", "global": "^4.3.2", "graphiql": "^0.13.0", diff --git a/addons/info/package.json b/addons/info/package.json index 775e80c0b4f..1dd2b8e3a6f 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-info", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "A Storybook addon to show additional information for your stories.", "keywords": [ "addon", @@ -22,10 +22,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/client-logger": "5.2.0-unreleased.0", - "@storybook/components": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/client-logger": "5.2.0-alpha.23", + "@storybook/components": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "core-js": "^3.0.1", "global": "^4.3.2", "marksy": "^7.0.0", diff --git a/addons/jest/package.json b/addons/jest/package.json index 254d62ceba2..3997f1a073d 100644 --- a/addons/jest/package.json +++ b/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "React storybook addon that show component jest report", "keywords": [ "addon", @@ -28,11 +28,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/api": "5.2.0-unreleased.0", - "@storybook/components": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/api": "5.2.0-alpha.23", + "@storybook/components": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "core-js": "^3.0.1", "global": "^4.3.2", "react": "^16.8.3", diff --git a/addons/knobs/package.json b/addons/knobs/package.json index c4b0525751e..0d282c2187d 100644 --- a/addons/knobs/package.json +++ b/addons/knobs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-knobs", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook Addon Prop Editor Component", "keywords": [ "addon", @@ -22,11 +22,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/client-api": "5.2.0-unreleased.0", - "@storybook/components": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/client-api": "5.2.0-alpha.23", + "@storybook/components": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "copy-to-clipboard": "^3.0.8", "core-js": "^3.0.1", "escape-html": "^1.0.3", diff --git a/addons/links/package.json b/addons/links/package.json index 04ff1dc4dbc..520f10cb7fa 100644 --- a/addons/links/package.json +++ b/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Story Links addon for storybook", "keywords": [ "addon", @@ -22,9 +22,9 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/router": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/router": "5.2.0-alpha.23", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/addons/notes/package.json b/addons/notes/package.json index d5cbe7a5e07..acf67698144 100644 --- a/addons/notes/package.json +++ b/addons/notes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-notes", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Write notes for your Storybook stories.", "keywords": [ "addon", @@ -23,13 +23,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/api": "5.2.0-unreleased.0", - "@storybook/client-logger": "5.2.0-unreleased.0", - "@storybook/components": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/router": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/api": "5.2.0-alpha.23", + "@storybook/client-logger": "5.2.0-alpha.23", + "@storybook/components": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/router": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "core-js": "^3.0.1", "global": "^4.3.2", "markdown-to-jsx": "^6.9.3", diff --git a/addons/ondevice-actions/package.json b/addons/ondevice-actions/package.json index 5bdbcdaa513..e1c5743b866 100644 --- a/addons/ondevice-actions/package.json +++ b/addons/ondevice-actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-actions", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Action Logger addon for react-native storybook", "keywords": [ "storybook" @@ -19,13 +19,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", "core-js": "^2.5.7", "fast-deep-equal": "^2.0.1" }, "devDependencies": { - "@storybook/addon-actions": "5.2.0-unreleased.0" + "@storybook/addon-actions": "5.2.0-alpha.23" }, "peerDependencies": { "@storybook/addon-actions": "*", diff --git a/addons/ondevice-backgrounds/package.json b/addons/ondevice-backgrounds/package.json index 37ea02fb975..fb008630355 100644 --- a/addons/ondevice-backgrounds/package.json +++ b/addons/ondevice-backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-backgrounds", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "A react-native storybook addon to show different backgrounds for your preview", "keywords": [ "addon", @@ -24,7 +24,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", "core-js": "^3.0.1", "prop-types": "^15.7.2" }, diff --git a/addons/ondevice-knobs/package.json b/addons/ondevice-knobs/package.json index 2ed70641c0d..fbab2758ad0 100644 --- a/addons/ondevice-knobs/package.json +++ b/addons/ondevice-knobs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-knobs", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Display storybook story knobs on your deviced.", "keywords": [ "addon", @@ -21,8 +21,8 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", "core-js": "^3.0.1", "deep-equal": "^1.0.1", "prop-types": "^15.7.2", @@ -32,7 +32,7 @@ "react-native-switch": "^1.5.0" }, "peerDependencies": { - "@storybook/addon-knobs": "5.2.0-unreleased.0", + "@storybook/addon-knobs": "5.2.0-alpha.23", "react": "*", "react-native": "*" }, diff --git a/addons/ondevice-notes/package.json b/addons/ondevice-notes/package.json index db042a2c85c..2f83a8ae86a 100644 --- a/addons/ondevice-notes/package.json +++ b/addons/ondevice-notes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-notes", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Write notes for your react-native Storybook stories.", "keywords": [ "addon", @@ -20,7 +20,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", "core-js": "^3.0.1", "prop-types": "^15.7.2", "react-native-simple-markdown": "^1.1.0" diff --git a/addons/options/package.json b/addons/options/package.json index 4f7442a31f2..c16a073f195 100644 --- a/addons/options/package.json +++ b/addons/options/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-options", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Options addon for storybook", "keywords": [ "addon", @@ -22,7 +22,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", "core-js": "^3.0.1", "util-deprecate": "^1.0.2" }, diff --git a/addons/queryparams/package.json b/addons/queryparams/package.json index 12d85468efb..854adf15c50 100644 --- a/addons/queryparams/package.json +++ b/addons/queryparams/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-queryparams", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "parameter addon for storybook", "keywords": [ "addon", @@ -23,12 +23,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/api": "5.2.0-unreleased.0", - "@storybook/client-logger": "5.2.0-unreleased.0", - "@storybook/components": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/api": "5.2.0-alpha.23", + "@storybook/client-logger": "5.2.0-alpha.23", + "@storybook/components": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "common-tags": "^1.8.0", "core-js": "^2.6.5", "global": "^4.3.2", diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json index 80105b9f0e6..fd0354d15b3 100644 --- a/addons/storyshots/storyshots-core/package.json +++ b/addons/storyshots/storyshots-core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.", "keywords": [ "addon", @@ -25,7 +25,7 @@ "storybook": "start-storybook -p 6006" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", "core-js": "^3.0.1", "glob": "^7.1.3", "global": "^4.3.2", diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json index e2da7555ea2..10142f3faa3 100644 --- a/addons/storyshots/storyshots-puppeteer/package.json +++ b/addons/storyshots/storyshots-puppeteer/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots-puppeteer", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Image snappshots addition to StoryShots base on puppeteer", "keywords": [ "addon", @@ -22,15 +22,15 @@ "prepare": "node ../../../scripts/prepare.js" }, "dependencies": { - "@storybook/node-logger": "5.2.0-unreleased.0", - "@storybook/router": "5.2.0-unreleased.0", + "@storybook/node-logger": "5.2.0-alpha.23", + "@storybook/router": "5.2.0-alpha.23", "core-js": "^3.0.1", "jest-image-snapshot": "^2.8.2", "puppeteer": "^1.12.2", "regenerator-runtime": "^0.12.1" }, "peerDependencies": { - "@storybook/addon-storyshots": "5.2.0-unreleased.0" + "@storybook/addon-storyshots": "5.2.0-alpha.23" }, "publishConfig": { "access": "public" diff --git a/addons/storysource/package.json b/addons/storysource/package.json index c7e83d29e25..5acbe8de1a9 100644 --- a/addons/storysource/package.json +++ b/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Stories addon for storybook", "keywords": [ "addon", @@ -22,10 +22,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/components": "5.2.0-unreleased.0", - "@storybook/router": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/components": "5.2.0-alpha.23", + "@storybook/router": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "core-js": "^3.0.1", "estraverse": "^4.2.0", "loader-utils": "^1.2.3", diff --git a/addons/viewport/package.json b/addons/viewport/package.json index 91021298695..a4957060493 100644 --- a/addons/viewport/package.json +++ b/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook addon to change the viewport size to mobile", "keywords": [ "addon", @@ -21,11 +21,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/client-logger": "5.2.0-unreleased.0", - "@storybook/components": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/client-logger": "5.2.0-alpha.23", + "@storybook/components": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "core-js": "^3.0.1", "global": "^4.3.2", "memoizerific": "^1.11.3", diff --git a/app/angular/package.json b/app/angular/package.json index 8d3ea8c6354..a20e71f389b 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -26,8 +26,8 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "5.2.0-unreleased.0", - "@storybook/node-logger": "5.2.0-unreleased.0", + "@storybook/core": "5.2.0-alpha.23", + "@storybook/node-logger": "5.2.0-alpha.23", "angular2-template-loader": "^0.6.2", "core-js": "^3.0.1", "fork-ts-checker-webpack-plugin": "^1.3.4", diff --git a/app/ember/package.json b/app/ember/package.json index 3d6f0a8fa53..462b200a39a 100644 --- a/app/ember/package.json +++ b/app/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember", "bugs": { @@ -24,7 +24,7 @@ }, "dependencies": { "@ember/test-helpers": "^1.5.0", - "@storybook/core": "5.2.0-unreleased.0", + "@storybook/core": "5.2.0-alpha.23", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/app/html/package.json b/app/html/package.json index e42de31509f..c59d4a049e2 100644 --- a/app/html/package.json +++ b/app/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -25,7 +25,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "5.2.0-unreleased.0", + "@storybook/core": "5.2.0-alpha.23", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/app/marko/package.json b/app/marko/package.json index f5ff0d84a97..324ab8edded 100644 --- a/app/marko/package.json +++ b/app/marko/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/marko", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -26,7 +26,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "5.2.0-unreleased.0", + "@storybook/core": "5.2.0-alpha.23", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/app/mithril/package.json b/app/mithril/package.json index 06035b7e77d..732e6ad3ee8 100644 --- a/app/mithril/package.json +++ b/app/mithril/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/mithril", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook for Mithril: Develop Mithril Component in isolation.", "keywords": [ "storybook" @@ -27,7 +27,7 @@ }, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.3.0", - "@storybook/core": "5.2.0-unreleased.0", + "@storybook/core": "5.2.0-alpha.23", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/app/polymer/package.json b/app/polymer/package.json index 4dfcb425587..9904ee95911 100644 --- a/app/polymer/package.json +++ b/app/polymer/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/polymer", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -25,7 +25,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "5.2.0-unreleased.0", + "@storybook/core": "5.2.0-alpha.23", "@webcomponents/webcomponentsjs": "^1.2.0", "common-tags": "^1.8.0", "core-js": "^3.0.1", diff --git a/app/preact/package.json b/app/preact/package.json index 1a554163b29..c673df82f16 100644 --- a/app/preact/package.json +++ b/app/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" @@ -27,7 +27,7 @@ }, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.3.0", - "@storybook/core": "5.2.0-unreleased.0", + "@storybook/core": "5.2.0-alpha.23", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/app/rax/package.json b/app/rax/package.json index 16a90ded1ce..f76c26c8a9f 100644 --- a/app/rax/package.json +++ b/app/rax/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/rax", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook for Rax: Develop Rax Component in isolation.", "keywords": [ "storybook", @@ -28,7 +28,7 @@ }, "dependencies": { "babel-preset-rax": "^1.0.0-beta.0", - "@storybook/core": "5.2.0-unreleased.0", + "@storybook/core": "5.2.0-alpha.23", "common-tags": "^1.8.0", "core-js": "^2.6.2", "global": "^4.3.2", diff --git a/app/react-native-server/package.json b/app/react-native-server/package.json index f49bcc32959..17acc550449 100644 --- a/app/react-native-server/package.json +++ b/app/react-native-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native-server", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "A better way to develop React Native Components for your app", "keywords": [ "react", @@ -24,12 +24,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/api": "5.2.0-unreleased.0", - "@storybook/channel-websocket": "5.2.0-unreleased.0", - "@storybook/core": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/ui": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/api": "5.2.0-alpha.23", + "@storybook/channel-websocket": "5.2.0-alpha.23", + "@storybook/core": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/ui": "5.2.0-alpha.23", "commander": "^2.19.0", "global": "^4.3.2", "react": "^16.6.0", diff --git a/app/react-native/package.json b/app/react-native/package.json index 2f65f177c9d..75e7cbf73b7 100644 --- a/app/react-native/package.json +++ b/app/react-native/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "A better way to develop React Native Components for your app", "keywords": [ "react", @@ -23,11 +23,11 @@ }, "dependencies": { "@emotion/native": "^10.0.10", - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/channel-websocket": "5.2.0-unreleased.0", - "@storybook/channels": "5.2.0-unreleased.0", - "@storybook/client-api": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/channel-websocket": "5.2.0-alpha.23", + "@storybook/channels": "5.2.0-alpha.23", + "@storybook/client-api": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", "core-js": "^3.0.1", "react-native-swipe-gestures": "^1.0.3", "rn-host-detect": "^1.1.5" diff --git a/app/react/package.json b/app/react/package.json index dde303705f8..af64149fb8d 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -29,8 +29,8 @@ "@babel/plugin-transform-react-constant-elements": "^7.2.0", "@babel/preset-flow": "^7.0.0", "@babel/preset-react": "^7.0.0", - "@storybook/core": "5.2.0-unreleased.0", - "@storybook/node-logger": "5.2.0-unreleased.0", + "@storybook/core": "5.2.0-alpha.23", + "@storybook/node-logger": "5.2.0-alpha.23", "@svgr/webpack": "^4.0.3", "babel-plugin-named-asset-import": "^0.3.1", "babel-plugin-react-docgen": "^3.0.0", diff --git a/app/riot/package.json b/app/riot/package.json index 89e0ca73843..e89be376a7e 100644 --- a/app/riot/package.json +++ b/app/riot/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/riot", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -25,7 +25,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "5.2.0-unreleased.0", + "@storybook/core": "5.2.0-alpha.23", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/app/svelte/package.json b/app/svelte/package.json index 8cd79a7da44..b2abc4521c5 100644 --- a/app/svelte/package.json +++ b/app/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -26,7 +26,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "5.2.0-unreleased.0", + "@storybook/core": "5.2.0-alpha.23", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/app/vue/package.json b/app/vue/package.json index 54a98c3f480..a0c164c698a 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -26,7 +26,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "5.2.0-unreleased.0", + "@storybook/core": "5.2.0-alpha.23", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/dev-kits/addon-parameter/package.json b/dev-kits/addon-parameter/package.json index f602ddbe580..50f40cdf3ee 100644 --- a/dev-kits/addon-parameter/package.json +++ b/dev-kits/addon-parameter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-parameter", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "parameter addon for storybook", "keywords": [ "devkit", @@ -24,12 +24,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/api": "5.2.0-unreleased.0", - "@storybook/client-logger": "5.2.0-unreleased.0", - "@storybook/components": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/api": "5.2.0-alpha.23", + "@storybook/client-logger": "5.2.0-alpha.23", + "@storybook/components": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "common-tags": "^1.8.0", "core-js": "^2.6.5", "global": "^4.3.2", diff --git a/dev-kits/addon-roundtrip/package.json b/dev-kits/addon-roundtrip/package.json index bcb1be65170..5aa76046825 100644 --- a/dev-kits/addon-roundtrip/package.json +++ b/dev-kits/addon-roundtrip/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-roundtrip", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "roundtrip addon for storybook", "keywords": [ "devkit", @@ -24,12 +24,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/api": "5.2.0-unreleased.0", - "@storybook/client-logger": "5.2.0-unreleased.0", - "@storybook/components": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/api": "5.2.0-alpha.23", + "@storybook/client-logger": "5.2.0-alpha.23", + "@storybook/components": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "common-tags": "^1.8.0", "core-js": "^2.6.5", "global": "^4.3.2", diff --git a/docs/package.json b/docs/package.json index d87c8666ff6..412f5fa79ba 100644 --- a/docs/package.json +++ b/docs/package.json @@ -15,8 +15,8 @@ "serve": "gatsby serve" }, "dependencies": { - "@storybook/components": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/components": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "babel-loader": "^6.4.1", "babel-plugin-styled-components": "^1.10.0", "bootstrap": "^4.3.1", diff --git a/docs/src/versions/latest.json b/docs/src/versions/latest.json index dcba5389aa3..c0e4f2a14ad 100644 --- a/docs/src/versions/latest.json +++ b/docs/src/versions/latest.json @@ -1 +1 @@ -{"version":"5.2.0-unreleased.0","info":{"plain":"Storybook 5.1 is a juicy upgrade including:\n\n- 📱 Mobile: Standalone package architecture for React Native\n- 🎟 A11y addon: Realtime accessibility checks and visual feedback\n- 🛠 Context addon: New UI for themes, internationalization, & more\n- 🎛 Presets: One-line configuration for babel, webpack, & addons\n\n5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.1.0-alpha.*`, `5.1.0-beta.*`, and `5.1.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to ugprade from `5.0` or earlier."}} \ No newline at end of file +{"version":"5.2.0-alpha.23","info":{"plain":"Storybook 5.1 is a juicy upgrade including:\n\n- 📱 Mobile: Standalone package architecture for React Native\n- 🎟 A11y addon: Realtime accessibility checks and visual feedback\n- 🛠 Context addon: New UI for themes, internationalization, & more\n- 🎛 Presets: One-line configuration for babel, webpack, & addons\n\n5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.1.0-alpha.*`, `5.1.0-beta.*`, and `5.1.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to ugprade from `5.0` or earlier."}} \ No newline at end of file diff --git a/examples-native/crna-kitchen-sink/package.json b/examples-native/crna-kitchen-sink/package.json index 8387d9ab5ea..6f9371f2654 100644 --- a/examples-native/crna-kitchen-sink/package.json +++ b/examples-native/crna-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "crna-kitchen-sink", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "private": true, "main": "node_modules/expo/AppEntry.js", "scripts": { @@ -24,14 +24,14 @@ "devDependencies": { "@babel/core": "^7.2.2", "@babel/plugin-transform-react-jsx-source": "^7.2.0", - "@storybook/addon-actions": "5.2.0-unreleased.0", - "@storybook/addon-knobs": "5.2.0-unreleased.0", - "@storybook/addon-ondevice-actions": "5.2.0-unreleased.0", - "@storybook/addon-ondevice-backgrounds": "5.2.0-unreleased.0", - "@storybook/addon-ondevice-knobs": "5.2.0-unreleased.0", - "@storybook/addon-ondevice-notes": "5.2.0-unreleased.0", - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/react-native": "5.2.0-unreleased.0", + "@storybook/addon-actions": "5.2.0-alpha.23", + "@storybook/addon-knobs": "5.2.0-alpha.23", + "@storybook/addon-ondevice-actions": "5.2.0-alpha.23", + "@storybook/addon-ondevice-backgrounds": "5.2.0-alpha.23", + "@storybook/addon-ondevice-knobs": "5.2.0-alpha.23", + "@storybook/addon-ondevice-notes": "5.2.0-alpha.23", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/react-native": "5.2.0-alpha.23", "babel-loader": "^8.0.4", "babel-plugin-module-resolver": "^3.2.0", "babel-preset-expo": "^5.1.1", diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json index a497483faf4..2b17909bceb 100644 --- a/examples/angular-cli/package.json +++ b/examples/angular-cli/package.json @@ -1,6 +1,6 @@ { "name": "angular-cli", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "private": true, "license": "MIT", "scripts": { @@ -34,19 +34,19 @@ "@angular-devkit/build-angular": "^0.13.4", "@angular/cli": "^7.3.6", "@angular/compiler-cli": "^7.2.6", - "@storybook/addon-a11y": "5.2.0-unreleased.0", - "@storybook/addon-actions": "5.2.0-unreleased.0", - "@storybook/addon-backgrounds": "5.2.0-unreleased.0", - "@storybook/addon-centered": "5.2.0-unreleased.0", - "@storybook/addon-jest": "5.2.0-unreleased.0", - "@storybook/addon-knobs": "5.2.0-unreleased.0", - "@storybook/addon-links": "5.2.0-unreleased.0", - "@storybook/addon-notes": "5.2.0-unreleased.0", - "@storybook/addon-options": "5.2.0-unreleased.0", - "@storybook/addon-storyshots": "5.2.0-unreleased.0", - "@storybook/addon-storysource": "5.2.0-unreleased.0", - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/angular": "5.2.0-unreleased.0", + "@storybook/addon-a11y": "5.2.0-alpha.23", + "@storybook/addon-actions": "5.2.0-alpha.23", + "@storybook/addon-backgrounds": "5.2.0-alpha.23", + "@storybook/addon-centered": "5.2.0-alpha.23", + "@storybook/addon-jest": "5.2.0-alpha.23", + "@storybook/addon-knobs": "5.2.0-alpha.23", + "@storybook/addon-links": "5.2.0-alpha.23", + "@storybook/addon-notes": "5.2.0-alpha.23", + "@storybook/addon-options": "5.2.0-alpha.23", + "@storybook/addon-storyshots": "5.2.0-alpha.23", + "@storybook/addon-storysource": "5.2.0-alpha.23", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/angular": "5.2.0-alpha.23", "@types/core-js": "^2.5.0", "@types/jest": "^24.0.11", "@types/node": "~12.0.2", diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json index f55592a0fec..cdc1c2c38ca 100644 --- a/examples/cra-kitchen-sink/package.json +++ b/examples/cra-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "cra-kitchen-sink", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "private": true, "scripts": { "build": "react-scripts build", @@ -19,22 +19,22 @@ "react-lifecycles-compat": "^3.0.4" }, "devDependencies": { - "@storybook/addon-a11y": "5.2.0-unreleased.0", - "@storybook/addon-actions": "5.2.0-unreleased.0", - "@storybook/addon-backgrounds": "5.2.0-unreleased.0", - "@storybook/addon-centered": "5.2.0-unreleased.0", - "@storybook/addon-events": "5.2.0-unreleased.0", - "@storybook/addon-info": "5.2.0-unreleased.0", - "@storybook/addon-jest": "5.2.0-unreleased.0", - "@storybook/addon-knobs": "5.2.0-unreleased.0", - "@storybook/addon-links": "5.2.0-unreleased.0", - "@storybook/addon-notes": "5.2.0-unreleased.0", - "@storybook/addon-options": "5.2.0-unreleased.0", - "@storybook/addon-storyshots": "5.2.0-unreleased.0", - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/client-logger": "5.2.0-unreleased.0", - "@storybook/react": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/addon-a11y": "5.2.0-alpha.23", + "@storybook/addon-actions": "5.2.0-alpha.23", + "@storybook/addon-backgrounds": "5.2.0-alpha.23", + "@storybook/addon-centered": "5.2.0-alpha.23", + "@storybook/addon-events": "5.2.0-alpha.23", + "@storybook/addon-info": "5.2.0-alpha.23", + "@storybook/addon-jest": "5.2.0-alpha.23", + "@storybook/addon-knobs": "5.2.0-alpha.23", + "@storybook/addon-links": "5.2.0-alpha.23", + "@storybook/addon-notes": "5.2.0-alpha.23", + "@storybook/addon-options": "5.2.0-alpha.23", + "@storybook/addon-storyshots": "5.2.0-alpha.23", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/client-logger": "5.2.0-alpha.23", + "@storybook/react": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "react-scripts": "^3.0.1" } } diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json index 6ed222bc70a..39af8718daf 100644 --- a/examples/cra-react15/package.json +++ b/examples/cra-react15/package.json @@ -1,6 +1,6 @@ { "name": "cra-react15", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "private": true, "dependencies": { "babel-loader": "8.0.6", @@ -19,10 +19,10 @@ "build-storybook": "build-storybook -s public" }, "devDependencies": { - "@storybook/addon-actions": "5.2.0-unreleased.0", - "@storybook/addon-links": "5.2.0-unreleased.0", - "@storybook/react": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/addon-actions": "5.2.0-alpha.23", + "@storybook/addon-links": "5.2.0-alpha.23", + "@storybook/react": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "babel-core": "6", "babel-runtime": "6" } diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json index 05d56418ecd..344b2e251fc 100644 --- a/examples/cra-ts-kitchen-sink/package.json +++ b/examples/cra-ts-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "cra-ts-kitchen-sink", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "private": true, "scripts": { "build-storybook": "build-storybook -s public", @@ -14,12 +14,12 @@ "react-dom": "^16.8.3" }, "devDependencies": { - "@storybook/addon-a11y": "5.2.0-unreleased.0", - "@storybook/addon-actions": "5.2.0-unreleased.0", - "@storybook/addon-info": "5.2.0-unreleased.0", - "@storybook/addon-options": "5.2.0-unreleased.0", - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/react": "5.2.0-unreleased.0", + "@storybook/addon-a11y": "5.2.0-alpha.23", + "@storybook/addon-actions": "5.2.0-alpha.23", + "@storybook/addon-info": "5.2.0-alpha.23", + "@storybook/addon-options": "5.2.0-alpha.23", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/react": "5.2.0-alpha.23", "@types/enzyme": "^3.9.0", "@types/react": "^16.8.3", "@types/react-dom": "^16.8.2", diff --git a/examples/dev-kits/package.json b/examples/dev-kits/package.json index c2f97a78c62..5b8d3e94ba4 100644 --- a/examples/dev-kits/package.json +++ b/examples/dev-kits/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/example-devkits", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "private": true, "scripts": { "build-storybook": "build-storybook -c ./ -s built-storybooks", @@ -8,14 +8,14 @@ "storybook": "start-storybook -p 9011 -c ./" }, "devDependencies": { - "@storybook/addon-roundtrip": "5.2.0-unreleased.0", - "@storybook/addon-parameter": "5.2.0-unreleased.0", - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/components": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/node-logger": "5.2.0-unreleased.0", - "@storybook/react": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/addon-roundtrip": "5.2.0-alpha.23", + "@storybook/addon-parameter": "5.2.0-alpha.23", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/components": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/node-logger": "5.2.0-alpha.23", + "@storybook/react": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "cors": "^2.8.5", "cross-env": "^5.2.0", "enzyme-to-json": "^3.3.5", diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json index 124d4fcf76d..6425b7f9072 100644 --- a/examples/ember-cli/package.json +++ b/examples/ember-cli/package.json @@ -1,6 +1,6 @@ { "name": "ember-example", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "private": true, "scripts": { "build": "ember build", @@ -15,18 +15,18 @@ }, "devDependencies": { "@babel/core": "^7.3.4", - "@storybook/addon-a11y": "5.2.0-unreleased.0", - "@storybook/addon-actions": "5.2.0-unreleased.0", - "@storybook/addon-backgrounds": "5.2.0-unreleased.0", - "@storybook/addon-centered": "5.2.0-unreleased.0", - "@storybook/addon-knobs": "5.2.0-unreleased.0", - "@storybook/addon-links": "5.2.0-unreleased.0", - "@storybook/addon-notes": "5.2.0-unreleased.0", - "@storybook/addon-options": "5.2.0-unreleased.0", - "@storybook/addon-storysource": "5.2.0-unreleased.0", - "@storybook/addon-viewport": "5.2.0-unreleased.0", - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/ember": "5.2.0-unreleased.0", + "@storybook/addon-a11y": "5.2.0-alpha.23", + "@storybook/addon-actions": "5.2.0-alpha.23", + "@storybook/addon-backgrounds": "5.2.0-alpha.23", + "@storybook/addon-centered": "5.2.0-alpha.23", + "@storybook/addon-knobs": "5.2.0-alpha.23", + "@storybook/addon-links": "5.2.0-alpha.23", + "@storybook/addon-notes": "5.2.0-alpha.23", + "@storybook/addon-options": "5.2.0-alpha.23", + "@storybook/addon-storysource": "5.2.0-alpha.23", + "@storybook/addon-viewport": "5.2.0-alpha.23", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/ember": "5.2.0-alpha.23", "babel-loader": "^8", "broccoli-asset-rev": "^3.0.0", "cross-env": "^5.2.0", diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json index fd89d4162c0..ff3ce8a491d 100644 --- a/examples/html-kitchen-sink/package.json +++ b/examples/html-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "html-kitchen-sink", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "private": true, "description": "", "keywords": [], @@ -14,23 +14,23 @@ "storybook": "start-storybook -p 9006" }, "devDependencies": { - "@storybook/addon-a11y": "5.2.0-unreleased.0", - "@storybook/addon-actions": "5.2.0-unreleased.0", - "@storybook/addon-backgrounds": "5.2.0-unreleased.0", - "@storybook/addon-centered": "5.2.0-unreleased.0", - "@storybook/addon-events": "5.2.0-unreleased.0", - "@storybook/addon-jest": "5.2.0-unreleased.0", - "@storybook/addon-knobs": "5.2.0-unreleased.0", - "@storybook/addon-links": "5.2.0-unreleased.0", - "@storybook/addon-notes": "5.2.0-unreleased.0", - "@storybook/addon-options": "5.2.0-unreleased.0", - "@storybook/addon-storyshots": "5.2.0-unreleased.0", - "@storybook/addon-storysource": "5.2.0-unreleased.0", - "@storybook/addon-viewport": "5.2.0-unreleased.0", - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/core": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/html": "5.2.0-unreleased.0", + "@storybook/addon-a11y": "5.2.0-alpha.23", + "@storybook/addon-actions": "5.2.0-alpha.23", + "@storybook/addon-backgrounds": "5.2.0-alpha.23", + "@storybook/addon-centered": "5.2.0-alpha.23", + "@storybook/addon-events": "5.2.0-alpha.23", + "@storybook/addon-jest": "5.2.0-alpha.23", + "@storybook/addon-knobs": "5.2.0-alpha.23", + "@storybook/addon-links": "5.2.0-alpha.23", + "@storybook/addon-notes": "5.2.0-alpha.23", + "@storybook/addon-options": "5.2.0-alpha.23", + "@storybook/addon-storyshots": "5.2.0-alpha.23", + "@storybook/addon-storysource": "5.2.0-alpha.23", + "@storybook/addon-viewport": "5.2.0-alpha.23", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/core": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/html": "5.2.0-alpha.23", "eventemitter3": "^3.1.0", "format-json": "^1.0.3", "global": "^4.3.2" diff --git a/examples/marko-cli/package.json b/examples/marko-cli/package.json index 6585798da66..57d3538ab5c 100644 --- a/examples/marko-cli/package.json +++ b/examples/marko-cli/package.json @@ -1,6 +1,6 @@ { "name": "marko-cli", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "private": true, "description": "Demo of how to build an app using marko-starter", "repository": { @@ -24,13 +24,13 @@ "marko-starter": "^2.0.4" }, "devDependencies": { - "@storybook/addon-a11y": "5.2.0-unreleased.0", - "@storybook/addon-actions": "5.2.0-unreleased.0", - "@storybook/addon-knobs": "5.2.0-unreleased.0", - "@storybook/addon-options": "5.2.0-unreleased.0", - "@storybook/addon-storysource": "5.2.0-unreleased.0", - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/marko": "5.2.0-unreleased.0", + "@storybook/addon-a11y": "5.2.0-alpha.23", + "@storybook/addon-actions": "5.2.0-alpha.23", + "@storybook/addon-knobs": "5.2.0-alpha.23", + "@storybook/addon-options": "5.2.0-alpha.23", + "@storybook/addon-storysource": "5.2.0-alpha.23", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/marko": "5.2.0-alpha.23", "prettier": "^1.16.4", "webpack": "^4.33.0" } diff --git a/examples/mithril-kitchen-sink/package.json b/examples/mithril-kitchen-sink/package.json index 4ac42b770b4..ea7802446a9 100644 --- a/examples/mithril-kitchen-sink/package.json +++ b/examples/mithril-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "mithril-example", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "private": true, "scripts": { "build-storybook": "build-storybook", @@ -11,19 +11,19 @@ "mithril": "^1.1.6" }, "devDependencies": { - "@storybook/addon-a11y": "5.2.0-unreleased.0", - "@storybook/addon-actions": "5.2.0-unreleased.0", - "@storybook/addon-backgrounds": "5.2.0-unreleased.0", - "@storybook/addon-centered": "5.2.0-unreleased.0", - "@storybook/addon-knobs": "5.2.0-unreleased.0", - "@storybook/addon-links": "5.2.0-unreleased.0", - "@storybook/addon-notes": "5.2.0-unreleased.0", - "@storybook/addon-options": "5.2.0-unreleased.0", - "@storybook/addon-storyshots": "5.2.0-unreleased.0", - "@storybook/addon-storysource": "5.2.0-unreleased.0", - "@storybook/addon-viewport": "5.2.0-unreleased.0", - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/mithril": "5.2.0-unreleased.0", + "@storybook/addon-a11y": "5.2.0-alpha.23", + "@storybook/addon-actions": "5.2.0-alpha.23", + "@storybook/addon-backgrounds": "5.2.0-alpha.23", + "@storybook/addon-centered": "5.2.0-alpha.23", + "@storybook/addon-knobs": "5.2.0-alpha.23", + "@storybook/addon-links": "5.2.0-alpha.23", + "@storybook/addon-notes": "5.2.0-alpha.23", + "@storybook/addon-options": "5.2.0-alpha.23", + "@storybook/addon-storyshots": "5.2.0-alpha.23", + "@storybook/addon-storysource": "5.2.0-alpha.23", + "@storybook/addon-viewport": "5.2.0-alpha.23", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/mithril": "5.2.0-alpha.23", "webpack": "^4.33.0" } } diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json index 61448ccdc04..da0b260ec49 100644 --- a/examples/official-storybook/package.json +++ b/examples/official-storybook/package.json @@ -1,6 +1,6 @@ { "name": "official-storybook", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "private": true, "scripts": { "build-storybook": "build-storybook -c ./ -s built-storybooks", @@ -13,32 +13,32 @@ "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ -s built-storybooks --no-dll" }, "devDependencies": { - "@storybook/addon-a11y": "5.2.0-unreleased.0", - "@storybook/addon-actions": "5.2.0-unreleased.0", - "@storybook/addon-backgrounds": "5.2.0-unreleased.0", - "@storybook/addon-centered": "5.2.0-unreleased.0", - "@storybook/addon-contexts": "5.2.0-unreleased.0", - "@storybook/addon-cssresources": "5.2.0-unreleased.0", - "@storybook/addon-design-assets": "5.2.0-unreleased.0", - "@storybook/addon-events": "5.2.0-unreleased.0", - "@storybook/addon-graphql": "5.2.0-unreleased.0", - "@storybook/addon-info": "5.2.0-unreleased.0", - "@storybook/addon-jest": "5.2.0-unreleased.0", - "@storybook/addon-knobs": "5.2.0-unreleased.0", - "@storybook/addon-links": "5.2.0-unreleased.0", - "@storybook/addon-notes": "5.2.0-unreleased.0", - "@storybook/addon-options": "5.2.0-unreleased.0", - "@storybook/addon-queryparams": "5.2.0-unreleased.0", - "@storybook/addon-storyshots": "5.2.0-unreleased.0", - "@storybook/addon-storyshots-puppeteer": "5.2.0-unreleased.0", - "@storybook/addon-storysource": "5.2.0-unreleased.0", - "@storybook/addon-viewport": "5.2.0-unreleased.0", - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/components": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/node-logger": "5.2.0-unreleased.0", - "@storybook/react": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/addon-a11y": "5.2.0-alpha.23", + "@storybook/addon-actions": "5.2.0-alpha.23", + "@storybook/addon-backgrounds": "5.2.0-alpha.23", + "@storybook/addon-centered": "5.2.0-alpha.23", + "@storybook/addon-contexts": "5.2.0-alpha.23", + "@storybook/addon-cssresources": "5.2.0-alpha.23", + "@storybook/addon-design-assets": "5.2.0-alpha.23", + "@storybook/addon-events": "5.2.0-alpha.23", + "@storybook/addon-graphql": "5.2.0-alpha.23", + "@storybook/addon-info": "5.2.0-alpha.23", + "@storybook/addon-jest": "5.2.0-alpha.23", + "@storybook/addon-knobs": "5.2.0-alpha.23", + "@storybook/addon-links": "5.2.0-alpha.23", + "@storybook/addon-notes": "5.2.0-alpha.23", + "@storybook/addon-options": "5.2.0-alpha.23", + "@storybook/addon-queryparams": "5.2.0-alpha.23", + "@storybook/addon-storyshots": "5.2.0-alpha.23", + "@storybook/addon-storyshots-puppeteer": "5.2.0-alpha.23", + "@storybook/addon-storysource": "5.2.0-alpha.23", + "@storybook/addon-viewport": "5.2.0-alpha.23", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/components": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/node-logger": "5.2.0-alpha.23", + "@storybook/react": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "cors": "^2.8.5", "cross-env": "^5.2.0", "enzyme-to-json": "^3.3.5", diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json index 2eb16aa14b1..ba93e8862d4 100644 --- a/examples/polymer-cli/package.json +++ b/examples/polymer-cli/package.json @@ -1,6 +1,6 @@ { "name": "polymer-cli", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "private": true, "scripts": { "build-storybook": "build-storybook", @@ -10,16 +10,16 @@ }, "dependencies": { "@polymer/polymer": "^2.6.0", - "@storybook/addon-a11y": "5.2.0-unreleased.0", - "@storybook/addon-actions": "5.2.0-unreleased.0", - "@storybook/addon-backgrounds": "5.2.0-unreleased.0", - "@storybook/addon-knobs": "5.2.0-unreleased.0", - "@storybook/addon-links": "5.2.0-unreleased.0", - "@storybook/addon-notes": "5.2.0-unreleased.0", - "@storybook/addon-options": "5.2.0-unreleased.0", - "@storybook/addon-storysource": "5.2.0-unreleased.0", - "@storybook/addon-viewport": "5.2.0-unreleased.0", - "@storybook/polymer": "5.2.0-unreleased.0", + "@storybook/addon-a11y": "5.2.0-alpha.23", + "@storybook/addon-actions": "5.2.0-alpha.23", + "@storybook/addon-backgrounds": "5.2.0-alpha.23", + "@storybook/addon-knobs": "5.2.0-alpha.23", + "@storybook/addon-links": "5.2.0-alpha.23", + "@storybook/addon-notes": "5.2.0-alpha.23", + "@storybook/addon-options": "5.2.0-alpha.23", + "@storybook/addon-storysource": "5.2.0-alpha.23", + "@storybook/addon-viewport": "5.2.0-alpha.23", + "@storybook/polymer": "5.2.0-alpha.23", "@webcomponents/webcomponentsjs": "^1.2.0", "global": "^4.3.2", "lit-html": "^1.0.0", diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json index 94be4175589..5b3d6aa7a81 100644 --- a/examples/preact-kitchen-sink/package.json +++ b/examples/preact-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "preact-example", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "private": true, "scripts": { "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", @@ -16,20 +16,20 @@ "devDependencies": { "@babel/core": "^7.3.4", "@babel/plugin-transform-runtime": "^7.2.0", - "@storybook/addon-a11y": "5.2.0-unreleased.0", - "@storybook/addon-actions": "5.2.0-unreleased.0", - "@storybook/addon-backgrounds": "5.2.0-unreleased.0", - "@storybook/addon-centered": "5.2.0-unreleased.0", - "@storybook/addon-contexts": "5.2.0-unreleased.0", - "@storybook/addon-knobs": "5.2.0-unreleased.0", - "@storybook/addon-links": "5.2.0-unreleased.0", - "@storybook/addon-notes": "5.2.0-unreleased.0", - "@storybook/addon-options": "5.2.0-unreleased.0", - "@storybook/addon-storyshots": "5.2.0-unreleased.0", - "@storybook/addon-storysource": "5.2.0-unreleased.0", - "@storybook/addon-viewport": "5.2.0-unreleased.0", - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/preact": "5.2.0-unreleased.0", + "@storybook/addon-a11y": "5.2.0-alpha.23", + "@storybook/addon-actions": "5.2.0-alpha.23", + "@storybook/addon-backgrounds": "5.2.0-alpha.23", + "@storybook/addon-centered": "5.2.0-alpha.23", + "@storybook/addon-contexts": "5.2.0-alpha.23", + "@storybook/addon-knobs": "5.2.0-alpha.23", + "@storybook/addon-links": "5.2.0-alpha.23", + "@storybook/addon-notes": "5.2.0-alpha.23", + "@storybook/addon-options": "5.2.0-alpha.23", + "@storybook/addon-storyshots": "5.2.0-alpha.23", + "@storybook/addon-storysource": "5.2.0-alpha.23", + "@storybook/addon-viewport": "5.2.0-alpha.23", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/preact": "5.2.0-alpha.23", "babel-loader": "^8.0.4", "cross-env": "^5.2.0", "file-loader": "^3.0.1", diff --git a/examples/rax-kitchen-sink/package.json b/examples/rax-kitchen-sink/package.json index daf251cafd6..98ca817db91 100644 --- a/examples/rax-kitchen-sink/package.json +++ b/examples/rax-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "rax-kitchen-sink", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "private": true, "scripts": { "test:generate-output": "jest --json --outputFile=jest-test-results.json --config=./jest-addon.config.js", @@ -24,22 +24,22 @@ "rax-view": "^0.6.5" }, "devDependencies": { - "@storybook/addon-a11y": "5.2.0-unreleased.0", - "@storybook/addon-actions": "5.2.0-unreleased.0", - "@storybook/addon-backgrounds": "5.2.0-unreleased.0", - "@storybook/addon-centered": "5.2.0-unreleased.0", - "@storybook/addon-events": "5.2.0-unreleased.0", - "@storybook/addon-info": "5.2.0-unreleased.0", - "@storybook/addon-jest": "5.2.0-unreleased.0", - "@storybook/addon-knobs": "5.2.0-unreleased.0", - "@storybook/addon-links": "5.2.0-unreleased.0", - "@storybook/addon-notes": "5.2.0-unreleased.0", - "@storybook/addon-options": "5.2.0-unreleased.0", - "@storybook/addon-storyshots": "5.2.0-unreleased.0", - "@storybook/addon-storysource": "5.2.0-unreleased.0", - "@storybook/addon-viewport": "5.2.0-unreleased.0", - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/rax": "5.2.0-unreleased.0", + "@storybook/addon-a11y": "5.2.0-alpha.23", + "@storybook/addon-actions": "5.2.0-alpha.23", + "@storybook/addon-backgrounds": "5.2.0-alpha.23", + "@storybook/addon-centered": "5.2.0-alpha.23", + "@storybook/addon-events": "5.2.0-alpha.23", + "@storybook/addon-info": "5.2.0-alpha.23", + "@storybook/addon-jest": "5.2.0-alpha.23", + "@storybook/addon-knobs": "5.2.0-alpha.23", + "@storybook/addon-links": "5.2.0-alpha.23", + "@storybook/addon-notes": "5.2.0-alpha.23", + "@storybook/addon-options": "5.2.0-alpha.23", + "@storybook/addon-storyshots": "5.2.0-alpha.23", + "@storybook/addon-storysource": "5.2.0-alpha.23", + "@storybook/addon-viewport": "5.2.0-alpha.23", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/rax": "5.2.0-alpha.23", "babel-eslint": "^8.2.2", "babel-preset-rax": "^1.0.0-beta.0", "rax-scripts": "^1.0.0-beta.10", diff --git a/examples/riot-kitchen-sink/package.json b/examples/riot-kitchen-sink/package.json index c9470651f08..cf3f892e738 100644 --- a/examples/riot-kitchen-sink/package.json +++ b/examples/riot-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "riot-example", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "private": true, "scripts": { "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", @@ -16,19 +16,19 @@ }, "devDependencies": { "@babel/core": "^7.3.4", - "@storybook/addon-a11y": "5.2.0-unreleased.0", - "@storybook/addon-actions": "5.2.0-unreleased.0", - "@storybook/addon-backgrounds": "5.2.0-unreleased.0", - "@storybook/addon-centered": "5.2.0-unreleased.0", - "@storybook/addon-knobs": "5.2.0-unreleased.0", - "@storybook/addon-links": "5.2.0-unreleased.0", - "@storybook/addon-notes": "5.2.0-unreleased.0", - "@storybook/addon-options": "5.2.0-unreleased.0", - "@storybook/addon-storyshots": "5.2.0-unreleased.0", - "@storybook/addon-storysource": "5.2.0-unreleased.0", - "@storybook/addon-viewport": "5.2.0-unreleased.0", - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/riot": "5.2.0-unreleased.0", + "@storybook/addon-a11y": "5.2.0-alpha.23", + "@storybook/addon-actions": "5.2.0-alpha.23", + "@storybook/addon-backgrounds": "5.2.0-alpha.23", + "@storybook/addon-centered": "5.2.0-alpha.23", + "@storybook/addon-knobs": "5.2.0-alpha.23", + "@storybook/addon-links": "5.2.0-alpha.23", + "@storybook/addon-notes": "5.2.0-alpha.23", + "@storybook/addon-options": "5.2.0-alpha.23", + "@storybook/addon-storyshots": "5.2.0-alpha.23", + "@storybook/addon-storysource": "5.2.0-alpha.23", + "@storybook/addon-viewport": "5.2.0-alpha.23", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/riot": "5.2.0-alpha.23", "babel-loader": "^8.0.4", "cross-env": "^5.2.0", "file-loader": "^3.0.1", diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json index 6fbb4fc4d24..4eac0f34f86 100644 --- a/examples/svelte-kitchen-sink/package.json +++ b/examples/svelte-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "svelte-example", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "private": true, "scripts": { "build-storybook": "build-storybook -s public", @@ -11,18 +11,18 @@ "global": "^4.3.2" }, "devDependencies": { - "@storybook/addon-a11y": "5.2.0-unreleased.0", - "@storybook/addon-actions": "5.2.0-unreleased.0", - "@storybook/addon-backgrounds": "5.2.0-unreleased.0", - "@storybook/addon-centered": "5.2.0-unreleased.0", - "@storybook/addon-knobs": "5.2.0-unreleased.0", - "@storybook/addon-links": "5.2.0-unreleased.0", - "@storybook/addon-notes": "5.2.0-unreleased.0", - "@storybook/addon-options": "5.2.0-unreleased.0", - "@storybook/addon-storyshots": "5.2.0-unreleased.0", - "@storybook/addon-storysource": "5.2.0-unreleased.0", - "@storybook/addon-viewport": "5.2.0-unreleased.0", - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/svelte": "5.2.0-unreleased.0" + "@storybook/addon-a11y": "5.2.0-alpha.23", + "@storybook/addon-actions": "5.2.0-alpha.23", + "@storybook/addon-backgrounds": "5.2.0-alpha.23", + "@storybook/addon-centered": "5.2.0-alpha.23", + "@storybook/addon-knobs": "5.2.0-alpha.23", + "@storybook/addon-links": "5.2.0-alpha.23", + "@storybook/addon-notes": "5.2.0-alpha.23", + "@storybook/addon-options": "5.2.0-alpha.23", + "@storybook/addon-storyshots": "5.2.0-alpha.23", + "@storybook/addon-storysource": "5.2.0-alpha.23", + "@storybook/addon-viewport": "5.2.0-alpha.23", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/svelte": "5.2.0-alpha.23" } } diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json index 9741736637e..5ee3052f862 100644 --- a/examples/vue-kitchen-sink/package.json +++ b/examples/vue-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "vue-example", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "private": true, "scripts": { "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", @@ -15,20 +15,20 @@ }, "devDependencies": { "@babel/core": "^7.3.4", - "@storybook/addon-a11y": "5.2.0-unreleased.0", - "@storybook/addon-actions": "5.2.0-unreleased.0", - "@storybook/addon-backgrounds": "5.2.0-unreleased.0", - "@storybook/addon-centered": "5.2.0-unreleased.0", - "@storybook/addon-contexts": "5.2.0-unreleased.0", - "@storybook/addon-knobs": "5.2.0-unreleased.0", - "@storybook/addon-links": "5.2.0-unreleased.0", - "@storybook/addon-notes": "5.2.0-unreleased.0", - "@storybook/addon-options": "5.2.0-unreleased.0", - "@storybook/addon-storyshots": "5.2.0-unreleased.0", - "@storybook/addon-storysource": "5.2.0-unreleased.0", - "@storybook/addon-viewport": "5.2.0-unreleased.0", - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/vue": "5.2.0-unreleased.0", + "@storybook/addon-a11y": "5.2.0-alpha.23", + "@storybook/addon-actions": "5.2.0-alpha.23", + "@storybook/addon-backgrounds": "5.2.0-alpha.23", + "@storybook/addon-centered": "5.2.0-alpha.23", + "@storybook/addon-contexts": "5.2.0-alpha.23", + "@storybook/addon-knobs": "5.2.0-alpha.23", + "@storybook/addon-links": "5.2.0-alpha.23", + "@storybook/addon-notes": "5.2.0-alpha.23", + "@storybook/addon-options": "5.2.0-alpha.23", + "@storybook/addon-storyshots": "5.2.0-alpha.23", + "@storybook/addon-storysource": "5.2.0-alpha.23", + "@storybook/addon-viewport": "5.2.0-alpha.23", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/vue": "5.2.0-alpha.23", "babel-core": "^7.0.0-bridge.0", "babel-loader": "^8.0.5", "cross-env": "^5.2.0", diff --git a/lerna.json b/lerna.json index 89fd11c7e60..0305f8a07fd 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "npmClient": "yarn", "useWorkspaces": true, "registry": "https://registry.npmjs.org", - "version": "5.2.0-unreleased.0" + "version": "5.2.0-alpha.23" } diff --git a/lib/addons/package.json b/lib/addons/package.json index d8004980009..8d360840d0b 100644 --- a/lib/addons/package.json +++ b/lib/addons/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addons", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook addons store", "keywords": [ "storybook" @@ -21,9 +21,9 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/api": "5.2.0-unreleased.0", - "@storybook/channels": "5.2.0-unreleased.0", - "@storybook/client-logger": "5.2.0-unreleased.0", + "@storybook/api": "5.2.0-alpha.23", + "@storybook/channels": "5.2.0-alpha.23", + "@storybook/client-logger": "5.2.0-alpha.23", "core-js": "^3.0.1", "global": "^4.3.2", "util-deprecate": "^1.0.2" diff --git a/lib/api/package.json b/lib/api/package.json index a51fd91b26f..fd4301db46e 100644 --- a/lib/api/package.json +++ b/lib/api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/api", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Core Storybook API & Context", "keywords": [ "storybook" @@ -20,11 +20,11 @@ "prepare": "node ./scripts/generateVersion.js && node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/channels": "5.2.0-unreleased.0", - "@storybook/client-logger": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/router": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/channels": "5.2.0-alpha.23", + "@storybook/client-logger": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/router": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "core-js": "^3.0.1", "fast-deep-equal": "^2.0.1", "global": "^4.3.2", diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json index df17808a51e..812f92ca9ba 100644 --- a/lib/channel-postmessage/package.json +++ b/lib/channel-postmessage/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-postmessage", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "", "keywords": [ "storybook" @@ -21,8 +21,8 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/channels": "5.2.0-unreleased.0", - "@storybook/client-logger": "5.2.0-unreleased.0", + "@storybook/channels": "5.2.0-alpha.23", + "@storybook/client-logger": "5.2.0-alpha.23", "core-js": "^3.0.1", "global": "^4.3.2", "telejson": "^2.2.1" diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json index b5e069e699a..86047f7ea80 100644 --- a/lib/channel-websocket/package.json +++ b/lib/channel-websocket/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-websocket", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "", "keywords": [ "storybook" @@ -21,7 +21,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/channels": "5.2.0-unreleased.0", + "@storybook/channels": "5.2.0-alpha.23", "core-js": "^3.0.1", "global": "^4.3.2", "json-fn": "^1.1.1" diff --git a/lib/channels/package.json b/lib/channels/package.json index 1f3c87bbef3..faf47c26ac5 100644 --- a/lib/channels/package.json +++ b/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "", "keywords": [ "storybook" diff --git a/lib/cli/package.json b/lib/cli/package.json index 3235fad74b2..bcbfdf04090 100644 --- a/lib/cli/package.json +++ b/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook's CLI - easiest method of adding storybook to your projects", "keywords": [ "cli", @@ -30,7 +30,7 @@ "@babel/core": "^7.4.5", "@babel/preset-env": "^7.4.5", "@babel/register": "^7.0.0", - "@storybook/codemod": "5.2.0-unreleased.0", + "@storybook/codemod": "5.2.0-alpha.23", "chalk": "^2.4.1", "commander": "^2.19.0", "core-js": "^3.0.1", @@ -44,33 +44,33 @@ "update-notifier": "^3.0.0" }, "devDependencies": { - "@storybook/addon-actions": "5.2.0-unreleased.0", - "@storybook/addon-centered": "5.2.0-unreleased.0", - "@storybook/addon-graphql": "5.2.0-unreleased.0", - "@storybook/addon-info": "5.2.0-unreleased.0", - "@storybook/addon-knobs": "5.2.0-unreleased.0", - "@storybook/addon-links": "5.2.0-unreleased.0", - "@storybook/addon-notes": "5.2.0-unreleased.0", - "@storybook/addon-options": "5.2.0-unreleased.0", - "@storybook/addon-storyshots": "5.2.0-unreleased.0", - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/angular": "5.2.0-unreleased.0", - "@storybook/channel-postmessage": "5.2.0-unreleased.0", - "@storybook/channel-websocket": "5.2.0-unreleased.0", - "@storybook/channels": "5.2.0-unreleased.0", - "@storybook/ember": "5.2.0-unreleased.0", - "@storybook/html": "5.2.0-unreleased.0", - "@storybook/marko": "5.2.0-unreleased.0", - "@storybook/mithril": "5.2.0-unreleased.0", - "@storybook/polymer": "5.2.0-unreleased.0", - "@storybook/preact": "5.2.0-unreleased.0", - "@storybook/rax": "5.2.0-unreleased.0", - "@storybook/react": "5.2.0-unreleased.0", - "@storybook/react-native": "5.2.0-unreleased.0", - "@storybook/riot": "5.2.0-unreleased.0", - "@storybook/svelte": "5.2.0-unreleased.0", - "@storybook/ui": "5.2.0-unreleased.0", - "@storybook/vue": "5.2.0-unreleased.0" + "@storybook/addon-actions": "5.2.0-alpha.23", + "@storybook/addon-centered": "5.2.0-alpha.23", + "@storybook/addon-graphql": "5.2.0-alpha.23", + "@storybook/addon-info": "5.2.0-alpha.23", + "@storybook/addon-knobs": "5.2.0-alpha.23", + "@storybook/addon-links": "5.2.0-alpha.23", + "@storybook/addon-notes": "5.2.0-alpha.23", + "@storybook/addon-options": "5.2.0-alpha.23", + "@storybook/addon-storyshots": "5.2.0-alpha.23", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/angular": "5.2.0-alpha.23", + "@storybook/channel-postmessage": "5.2.0-alpha.23", + "@storybook/channel-websocket": "5.2.0-alpha.23", + "@storybook/channels": "5.2.0-alpha.23", + "@storybook/ember": "5.2.0-alpha.23", + "@storybook/html": "5.2.0-alpha.23", + "@storybook/marko": "5.2.0-alpha.23", + "@storybook/mithril": "5.2.0-alpha.23", + "@storybook/polymer": "5.2.0-alpha.23", + "@storybook/preact": "5.2.0-alpha.23", + "@storybook/rax": "5.2.0-alpha.23", + "@storybook/react": "5.2.0-alpha.23", + "@storybook/react-native": "5.2.0-alpha.23", + "@storybook/riot": "5.2.0-alpha.23", + "@storybook/svelte": "5.2.0-alpha.23", + "@storybook/ui": "5.2.0-alpha.23", + "@storybook/vue": "5.2.0-alpha.23" }, "publishConfig": { "access": "public" diff --git a/lib/client-api/package.json b/lib/client-api/package.json index 35b5013e530..33702eaffb6 100644 --- a/lib/client-api/package.json +++ b/lib/client-api/package.json @@ -1,10 +1,11 @@ { "name": "@storybook/client-api", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook Client API", "keywords": [ "storybook" ], + "types": "dist/public_api.d.ts", "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/client-api", "bugs": { "url": "https://github.com/storybookjs/storybook/issues" @@ -20,10 +21,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/client-logger": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/router": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/client-logger": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/router": "5.2.0-alpha.23", "common-tags": "^1.8.0", "core-js": "^3.0.1", "eventemitter3": "^3.1.0", diff --git a/lib/client-api/src/client_api.test.js b/lib/client-api/src/client_api.test.ts similarity index 100% rename from lib/client-api/src/client_api.test.js rename to lib/client-api/src/client_api.test.ts diff --git a/lib/client-api/src/client_api.js b/lib/client-api/src/client_api.ts similarity index 92% rename from lib/client-api/src/client_api.js rename to lib/client-api/src/client_api.ts index 28781896a81..7910a4ff5e9 100644 --- a/lib/client-api/src/client_api.js +++ b/lib/client-api/src/client_api.ts @@ -1,5 +1,4 @@ /* eslint no-underscore-dangle: 0 */ - import isPlainObject from 'is-plain-object'; import { logger } from '@storybook/client-logger'; import addons from '@storybook/addons'; @@ -9,11 +8,12 @@ import { toId } from '@storybook/router/utils'; import mergeWith from 'lodash/mergeWith'; import isEqual from 'lodash/isEqual'; import get from 'lodash/get'; - +import StoryStore from './story_store'; +import { ClientApiParams, IDecoratorParams, IHierarchyObj } from './types'; import subscriptionsStore from './subscriptions_store'; // merge with concatenating arrays, but no duplicates -const merge = (a, b) => +const merge = (a: IHierarchyObj, b: IHierarchyObj) => mergeWith({}, a, b, (objValue, srcValue) => { if (Array.isArray(srcValue) && Array.isArray(objValue)) { srcValue.forEach(s => { @@ -69,7 +69,9 @@ const withSubscriptionTracking = storyFn => { }; export default class ClientApi { - constructor({ storyStore, decorateStory = defaultDecorateStory } = {}) { + _storyStore: StoryStore; + + constructor({ storyStore, decorateStory = defaultDecorateStory }: ClientApiParams) { this._storyStore = storyStore; this._addons = {}; this._globalDecorators = []; @@ -102,7 +104,8 @@ export default class ClientApi { this._globalDecorators.push(decorator); }; - addParameters = parameters => { + addParameters = (parameters: IDecoratorParams[] | { globalParameter: 'string' }) => { + console.log('parameters: ', parameters); this._globalParameters = { ...this._globalParameters, ...parameters, @@ -116,7 +119,8 @@ export default class ClientApi { this._globalDecorators = []; }; - storiesOf = (kind, m) => { + // what are the occasions that "m" is simply a boolean, vs an obj + storiesOf = (kind: string, m: any) => { if (!kind && typeof kind !== 'string') { throw new Error('Invalid or missing kind provided for stories, should be a string'); } @@ -126,7 +130,7 @@ export default class ClientApi { `Missing 'module' parameter for story with a kind of '${kind}'. It will break your HMR` ); } - + console.log('storyStore: ', this._storyStore); if (m && m.hot && m.hot.dispose) { m.hot.dispose(() => { const { _storyStore } = this; @@ -223,7 +227,7 @@ export default class ClientApi { return api; }; - api.addDecorator = decorator => { + api.addDecorator = (decorator: () => void) => { if (hasAdded) { logger.warn(`You have added a decorator to the kind '${kind}' after a story has already been added. In Storybook 4 this applied the decorator only to subsequent stories. In Storybook 5+ it applies to all stories. diff --git a/lib/client-api/src/config_api.js b/lib/client-api/src/config_api.ts similarity index 73% rename from lib/client-api/src/config_api.js rename to lib/client-api/src/config_api.ts index a59226a84a9..fb5036c0920 100644 --- a/lib/client-api/src/config_api.js +++ b/lib/client-api/src/config_api.ts @@ -3,9 +3,43 @@ import { location } from 'global'; import Events from '@storybook/core-events'; import { logger } from '@storybook/client-logger'; +import { PostmsgTransport } from '@storybook/channel-postmessage'; +import Channel from '@storybook/channels'; +import { StoryStore, ClientApi } from '@storybook/client-api'; +import { IModule } from './types'; + +interface IChannel { + events: { + forceReRender: []; + registerSubscription: []; + setCurrentStory: []; + 'storybook/a11y/request': []; + }; + isAsync: boolean; + sender: string; + transport: PostmsgTransport; +} export default class ConfigApi { - constructor({ channel, storyStore, clearDecorators, clientApi }) { + _channel: Channel; + + _storyStore: StoryStore; + + _clearDecorators: () => void; + + clientApi: ClientApi; + + constructor({ + channel, + storyStore, + clearDecorators, + clientApi, + }: { + channel: Channel | null; + storyStore: StoryStore; + clearDecorators: any; + clientApi: ClientApi; + }) { // channel can be null when running in node // always check whether channel is available this._channel = channel; @@ -19,13 +53,13 @@ export default class ConfigApi { this._storyStore.emit(Events.STORY_INIT); } - _renderError(e) { - const { stack, message } = e; + _renderError(err: Error) { + const { stack, message } = err; const error = { stack, message }; this._storyStore.setSelection({ error }); } - configure = (loaders, module) => { + configure = (loaders: () => void, module: IModule) => { const render = () => { const errors = []; diff --git a/lib/client-api/src/index.js b/lib/client-api/src/index.ts similarity index 100% rename from lib/client-api/src/index.js rename to lib/client-api/src/index.ts diff --git a/lib/client-api/src/pathToId.js b/lib/client-api/src/pathToId.ts similarity index 77% rename from lib/client-api/src/pathToId.js rename to lib/client-api/src/pathToId.ts index 818eeff63b5..fe534f5dfdd 100644 --- a/lib/client-api/src/pathToId.js +++ b/lib/client-api/src/pathToId.ts @@ -1,4 +1,4 @@ -export default function pathToId(path) { +export default function pathToId(path: string) { const match = (path || '').match(/^\/story\/(.+)/); if (!match) { throw new Error(`Invalid path '${path}', must start with '/story/'`); diff --git a/lib/client-api/src/pathToid.test.js b/lib/client-api/src/pathToid.test.ts similarity index 100% rename from lib/client-api/src/pathToid.test.js rename to lib/client-api/src/pathToid.test.ts diff --git a/lib/client-api/src/queryparams.js b/lib/client-api/src/queryparams.ts similarity index 85% rename from lib/client-api/src/queryparams.js rename to lib/client-api/src/queryparams.ts index 14948489081..d7717a5fb75 100644 --- a/lib/client-api/src/queryparams.js +++ b/lib/client-api/src/queryparams.ts @@ -9,7 +9,8 @@ export const getQueryParams = () => { return {}; }; -export const getQueryParam = key => { +export const getQueryParam = (key: string): string | void => { const params = getQueryParams(); + return params[key]; }; diff --git a/lib/client-api/src/story_store.test.js b/lib/client-api/src/story_store.test.ts similarity index 100% rename from lib/client-api/src/story_store.test.js rename to lib/client-api/src/story_store.test.ts diff --git a/lib/client-api/src/story_store.js b/lib/client-api/src/story_store.ts similarity index 75% rename from lib/client-api/src/story_store.js rename to lib/client-api/src/story_store.ts index 52848511bf5..9d319186428 100644 --- a/lib/client-api/src/story_store.js +++ b/lib/client-api/src/story_store.ts @@ -10,25 +10,26 @@ import Events from '@storybook/core-events'; import { logger } from '@storybook/client-logger'; import { toId } from '@storybook/router/utils'; +import { Channel } from '@storybook/channels'; import pathToId from './pathToId'; import { getQueryParams } from './queryparams'; +import { IData, IDecorator } from './types'; // TODO: these are copies from components/nav/lib // refactor to DRY - -const toKey = input => +const toKey = (input: string) => input.replace(/[^a-z0-9]+([a-z0-9])/gi, (...params) => params[1].toUpperCase()); -const toChild = it => ({ ...it }); +const toChild = (it: {}) => ({ ...it }); let count = 0; -function getId() { +const getId = (): number => { count += 1; return count; -} +}; -const toExtracted = obj => +const toExtracted = (obj: T) => Object.entries(obj).reduce((acc, [key, value]) => { if (typeof value === 'function') { return acc; @@ -39,11 +40,29 @@ const toExtracted = obj => return Object.assign(acc, { [key]: value }); }, {}); -const getIdFromLegacyQuery = ({ path, selectedKind, selectedStory }) => +const getIdFromLegacyQuery = ({ + path, + selectedKind, + selectedStory, +}: { + path: string; + selectedKind: string; + selectedStory: string; +}) => (path && pathToId(path)) || (selectedKind && selectedStory && toId(selectedKind, selectedStory)); export default class StoryStore extends EventEmitter { - constructor(params) { + _legacydata: {}; + + _data: IData; + + _revision: number; + + _selection: {}; + + _channel: Channel; + + constructor(params: { channel: Channel }) { super(); this._legacydata = {}; @@ -66,7 +85,7 @@ export default class StoryStore extends EventEmitter { }); } - setChannel = channel => { + setChannel = (channel: Channel) => { this._channel = channel; }; @@ -77,12 +96,12 @@ export default class StoryStore extends EventEmitter { return id; }; - setPath = (storyId, params = {}) => { + setPath = (storyId: string, params = {}) => { const path = `${document.location.pathname}?${qs.stringify({ ...params, id: storyId })}`; history.replaceState({}, '', path); }; - fromId = id => { + fromId = (id: string) => { try { const data = this._data[id]; @@ -98,13 +117,12 @@ export default class StoryStore extends EventEmitter { } }; - setSeparators(data) { - this.separators = data; - } - raw() { return Object.values(this._data) - .filter(i => !!i.getDecorated) + .filter(i => { + console.log('this is unknown??? --> i: ', i); + return !!i.getDecorated; + }) .map(({ id }) => this.fromId(id)); } @@ -116,22 +134,29 @@ export default class StoryStore extends EventEmitter { ); } - setSelection = data => { + setSelection = (data: U) => { this._selection = data; setTimeout(() => this.emit(Events.STORY_RENDER), 1); }; getSelection = () => this._selection; - remove = id => { + remove = (id: string): void => { const { _data } = this; delete _data[id]; }; addStory( - { id, kind, name, storyFn: original, parameters = {} }, + { id, kind, name, storyFn: original, parameters = {} }: {id: string, kind: string, name: string, storyFn?: () => any, parameters: }, { getDecorators, applyDecorators } ) { + console.log('id: ', id); + console.log('kind: ', kind); + console.log('name: ', name); + console.log('storyFn: ', storyFn); + console.log('parameters: ', parameters); + console.log('getDecorators: ', getDecorators); + console.log('applyDecorators: ', applyDecorators); const { _data } = this; if (_data[id]) { @@ -156,7 +181,9 @@ export default class StoryStore extends EventEmitter { // lazily decorate the story when it's loaded const getDecorated = memoize(1)(() => applyDecorators(getOriginal(), getDecorators())); - const storyFn = p => getDecorated()({ ...identification, parameters: { ...parameters, ...p } }); + const storyFn = p => { + return getDecorated()({ ...identification, parameters: { ...parameters, ...p } }); + }; _data[id] = toChild({ ...identification, @@ -193,7 +220,17 @@ export default class StoryStore extends EventEmitter { this._revision += 1; } - addLegacyStory({ kind, name, storyFn, parameters = {} }) { + addLegacyStory({ + kind, + name, + storyFn, + parameters = {}, + }: { + kind: string; + name: string; + storyFn: () => any; + parameters: { fileName: string } | {}; + }) { const k = toKey(kind); if (!this._legacydata[k]) { this._legacydata[k] = { @@ -220,8 +257,12 @@ export default class StoryStore extends EventEmitter { .map(info => info.kind); } - getStories(kind) { + getStories(kind: string) { const key = toKey(kind); + console.log('-------------------- getStories'); + console.log('kind: ', kind); + console.log(' getStories--------------------'); + if (!this._legacydata[key]) { return []; } @@ -232,7 +273,7 @@ export default class StoryStore extends EventEmitter { .map(info => info.name); } - getStoryFileName(kind) { + getStoryFileName(kind: string) { const key = toKey(kind); const storiesKind = this._legacydata[key]; if (!storiesKind) { @@ -242,7 +283,7 @@ export default class StoryStore extends EventEmitter { return storiesKind.fileName; } - getStoryAndParameters(kind, name) { + getStoryAndParameters(kind: string, name: string) { if (!kind || !name) { return null; } @@ -264,12 +305,12 @@ export default class StoryStore extends EventEmitter { }; } - getStory(kind, name) { + getStory(kind: string, name: string) { const data = this.getStoryAndParameters(kind, name); return data && data.story; } - getStoryWithContext(kind, name) { + getStoryWithContext(kind: string, name: string) { const data = this.getStoryAndParameters(kind, name); if (!data) { return null; @@ -279,17 +320,17 @@ export default class StoryStore extends EventEmitter { return story; } - removeStoryKind(kind) { + removeStoryKind(kind: string) { if (this.hasStoryKind(kind)) { this._legacydata[toKey(kind)].stories = {}; } } - hasStoryKind(kind) { + hasStoryKind(kind: string) { return Boolean(this._legacydata[toKey(kind)]); } - hasStory(kind, name) { + hasStory(kind: string, name: string) { return Boolean(this.getStory(kind, name)); } diff --git a/lib/client-api/src/subscriptions_store.js b/lib/client-api/src/subscriptions_store.js deleted file mode 100644 index 4a817afee68..00000000000 --- a/lib/client-api/src/subscriptions_store.js +++ /dev/null @@ -1,34 +0,0 @@ -export const createSubscriptionsStore = () => { - const subscripions = new Map(); - - return { - register(subscribe) { - let subscription = subscripions.get(subscribe); - if (!subscription) { - subscription = { - unsubscribe: subscribe(), - }; - subscripions.set(subscribe, subscription); - } - subscription.used = true; - }, - - markAllAsUnused() { - subscripions.forEach(subscription => { - // eslint-disable-next-line no-param-reassign - subscription.used = false; - }); - }, - - clearUnused() { - subscripions.forEach((subscripion, key) => { - if (subscripion.used) return; - - subscripion.unsubscribe(); - subscripions.delete(key); - }); - }, - }; -}; - -export default createSubscriptionsStore(); diff --git a/lib/client-api/src/subscriptions_store.test.js b/lib/client-api/src/subscriptions_store.test.ts similarity index 99% rename from lib/client-api/src/subscriptions_store.test.js rename to lib/client-api/src/subscriptions_store.test.ts index 33a9cfa554d..f19ca3729eb 100644 --- a/lib/client-api/src/subscriptions_store.test.js +++ b/lib/client-api/src/subscriptions_store.test.ts @@ -12,7 +12,7 @@ const mockSubscription = () => { listening = false; }; }, - trigger(value) { + trigger(value?) { if (listening) { listener(value); } diff --git a/lib/client-api/src/subscriptions_store.ts b/lib/client-api/src/subscriptions_store.ts new file mode 100644 index 00000000000..7cf418f1799 --- /dev/null +++ b/lib/client-api/src/subscriptions_store.ts @@ -0,0 +1,34 @@ +export const createSubscriptionsStore = () => { + const subscriptions = new Map(); + + return { + register(subscribe: () => void): void { + let subscription = subscriptions.get(subscribe); + if (!subscription) { + subscription = { + unsubscribe: subscribe(), + }; + subscriptions.set(subscribe, subscription); + } + subscription.used = true; + }, + + markAllAsUnused(): void { + subscriptions.forEach(subscription => { + // eslint-disable-next-line no-param-reassign + subscription.used = false; + }); + }, + + clearUnused(): void { + subscriptions.forEach((subscription, key) => { + if (subscription.used) return; + + subscription.unsubscribe(); + subscriptions.delete(key); + }); + }, + }; +}; + +export default createSubscriptionsStore(); diff --git a/lib/client-api/src/types.ts b/lib/client-api/src/types.ts new file mode 100644 index 00000000000..9d5dcb094c5 --- /dev/null +++ b/lib/client-api/src/types.ts @@ -0,0 +1,355 @@ +type DataIndices = + | 'addons-a11y-basebutton--default' + | 'addons-a11y-basebutton--delayed-render' + | 'addons-a11y-basebutton--disabled' + | 'addons-a11y-basebutton--invalid-contrast' + | 'addons-a11y-basebutton--label' + | 'addons-a11y-button--content' + | 'addons-a11y-button--default' + | 'addons-a11y-button--disabled' + | 'addons-a11y-button--invalid-contrast' + | 'addons-a11y-button--label' + | 'addons-a11y-form--with-label' + | 'addons-a11y-form--with-placeholder' + | 'addons-a11y-form--without-label' + | 'addons-a11y-image--presentation' + | 'addons-a11y-image--with-alt' + | 'addons-a11y-image--without-alt' + | 'addons-a11y-image--without-alt-but-unchecked' + | 'addons-a11y-typography--correct' + | 'addons-a11y-typography--empty-heading' + | 'addons-a11y-typography--empty-link' + | 'addons-a11y-typography--empty-paragraph' + | 'addons-a11y-typography--link-without-href' + | 'addons-actions--all-types' + | 'addons-actions--basic-example' + | 'addons-actions--circular-payload' + | 'addons-actions--configureactionsdepth' + | 'addons-actions--decorated-action' + | 'addons-actions--decorated-action-config' + | 'addons-actions--decorated-actions' + | 'addons-actions--decorated-actions-config' + | 'addons-actions--limit-action-output' + | 'addons-actions--multiple-actions' + | 'addons-actions--multiple-actions-as-object' + | 'addons-actions--multiple-actions-config' + | 'addons-actions--multiple-actions-object-config' + | 'addons-actions--persisting-the-action-logger' + | 'addons-actions--reserved-keyword-as-name' + | 'addons-actions-deprecated--decorated-action' + | 'addons-backgrounds--disabled-via' + | 'addons-backgrounds--overriden' + | 'addons-backgrounds--skipped-via-disable-true' + | 'addons-backgrounds--story-1' + | 'addons-backgrounds--story-2' + | 'addons-centered--story-1' + | 'addons-contexts--languages' + | 'addons-contexts--simple-css-theming' + | 'addons-cssresources--camera-icon' + | 'addons-cssresources--primary-large-button' + | 'addons-design-assets--multiple-images' + | 'addons-design-assets--named-assets' + | 'addons-design-assets--single-image' + | 'addons-design-assets--single-webpage' + | 'addons-design-assets--url-replacement' + | 'addons-design-assets--youtube-video' + | 'addons-events--logger' + | 'addons-events-deprecated--logger' + | 'addons-graphql--get-pickachu' + | 'addons-info-decorator--use-info-as-story-decorator' + | 'addons-info-deprecated--displays-markdown-in-description' + | 'addons-info-forwardref--displays-forwarded-ref-components-correctly' + | 'addons-info-forwardref--uses-forwardref-displayname-if-available' + | 'addons-info-github-issues--1814' + | 'addons-info-jsx--displays-jsx-in-description' + | 'addons-info-markdown--displays-markdown-in-description' + | 'addons-info-markdown--from-external-markdown-file' + | 'addons-info-markdown--from-internal-markdown-file' + | 'addons-info-options-excludedproptypes--excludes-proptypes-that-are-in-the-excludedproptypes-array' + | 'addons-info-options-header--shows-or-hides-info-addon-header' + | 'addons-info-options-inline--inlines-component-inside-story' + | 'addons-info-options-proptables--shows-additional-component-prop-tables' + | 'addons-info-options-proptablesexclude--exclude-component-from-prop-tables' + | 'addons-info-options-source--shows-or-hides-info-addon-source' + | 'addons-info-options-styles--extend-info-styles-with-an-object' + | 'addons-info-options-styles--full-control-over-styles-using-a-function' + | 'addons-info-options-tablecomponent--use-a-custom-component-for-the-table' + | 'addons-info-parameters--disable-the-addon-entirely' + | 'addons-info-parameters--overwrite-the-parameters-with-markdown-variable' + | 'addons-info-parameters--overwrite-the-text-parameter-with-markdown-inline' + | 'addons-info-parameters--overwriting-and-extending-the-parameters-and-options-set-stories-wise' + | 'addons-info-parameters--using-paramaters-across-all-stories' + | 'addons-info-react-docgen--comments-from-component-declaration' + | 'addons-info-react-docgen--comments-from-flow-declarations' + | 'addons-info-react-docgen--comments-from-named-export-component-declaration' + | 'addons-info-react-docgen--comments-from-proptype-declarations' + | 'addons-info-story-source--array-prop' + | 'addons-info-story-source--children' + | 'addons-info-story-source--many-props' + | 'addons-info-story-source--object-prop' + | 'addons-info-story-source--one-prop' + | 'addons-jest--withtests' + | 'addons-knobs-withknobs--accepts-story-parameters' + | 'addons-knobs-withknobs--complex-select' + | 'addons-knobs-withknobs--dynamic-knobs' + | 'addons-knobs-withknobs--optionsknob' + | 'addons-knobs-withknobs--triggers-actions-via-button' + | 'addons-knobs-withknobs--tweaks-static-values' + | 'addons-knobs-withknobs--tweaks-static-values-organized-in-groups' + | 'addons-knobs-withknobs--xss-safety' + | 'addons-knobs-withknobs-using-options--accepts-options' + | 'addons-links-button--first' + | 'addons-links-button--second' + | 'addons-links-href--log' + | 'addons-links-link--first' + | 'addons-links-link--second' + | 'addons-links-scroll-position--first' + | 'addons-links-scroll-position--second' + | 'addons-links-select--first' + | 'addons-links-select--index' + | 'addons-links-select--second' + | 'addons-links-select--third' + | 'addons-notes--addon-notes' + | 'addons-notes--addon-notes-rendering-imported-markdown' + | 'addons-notes--addon-notes-rendering-inline-github-flavored-markdown' + | 'addons-notes--with-a-markdown-giphy' + | 'addons-notes--with-a-markdown-table' + | 'addons-options--hiding-addon-panel' + | 'addons-options--setting-name' + | 'addons-queryparams--mock-is-4' + | 'addons-queryparams--mock-is-true' + | 'addons-storyshots--block' + | 'addons-viewport--default' + | 'addons-viewport-custom-default-kindle-fire-2--disabled' + | 'addons-viewport-custom-default-kindle-fire-2--inherited' + | 'addons-viewport-custom-default-kindle-fire-2--overridden-via-withviewport-parameterized-decorator' + | 'app-acceptance--angular-cli' + | 'app-acceptance--cra-kitchen-sink' + | 'app-acceptance--cra-react15' + | 'app-acceptance--cra-ts-kitchen-sink' + | 'app-acceptance--html-kitchen-sink' + | 'app-acceptance--mithril-kitchen-sink' + | 'app-acceptance--polymer-cli' + | 'app-acceptance--preact-kitchen-sink' + | 'app-acceptance--riot-kitchen-sink' + | 'app-acceptance--svelte-kitchen-sink' + | 'app-acceptance--vue-kitchen-sink' + | 'basics-actionbar--manyitems' + | 'basics-actionbar--singleitem' + | 'basics-badge--all-badges' + | 'basics-brand-storybookicon--default' + | 'basics-brand-storybooklogo--normal' + | 'basics-button--all-buttons' + | 'basics-documentformatting--withdom' + | 'basics-documentformatting--withmarkdown' + | 'basics-form-button--sizes' + | 'basics-form-button--validations' + | 'basics-form-field--field' + | 'basics-form-input--alignment' + | 'basics-form-input--sizes' + | 'basics-form-input--validations' + | 'basics-form-select--sizes' + | 'basics-form-select--validations' + | 'basics-form-textarea--alignment' + | 'basics-form-textarea--sizes' + | 'basics-form-textarea--validations' + | 'basics-icon--labels' + | 'basics-icon--no-labels' + | 'basics-link--cancel-w-href' + | 'basics-link--cancel-w-onclick' + | 'basics-link--no-cancel-w-href' + | 'basics-link--no-cancel-w-onclick' + | 'basics-link--styled-links' + | 'basics-placeholder--singlechild' + | 'basics-placeholder--twochildren' + | 'basics-scrollarea--both' + | 'basics-scrollarea--horizontal' + | 'basics-scrollarea--vertical' + | 'basics-scrollarea--withouterborder' + | 'basics-spaced--col' + | 'basics-spaced--col-outer' + | 'basics-spaced--row' + | 'basics-spaced--row-multiply' + | 'basics-spaced--row-outer' + | 'basics-syntaxhighlighter--bash' + | 'basics-syntaxhighlighter--bordered-copy-able' + | 'basics-syntaxhighlighter--dark-unsupported' + | 'basics-syntaxhighlighter--jsx' + | 'basics-syntaxhighlighter--padded' + | 'basics-syntaxhighlighter--showlinenumbers' + | 'basics-syntaxhighlighter--story' + | 'basics-syntaxhighlighter--unsupported' + | 'basics-tabs--stateful-dynamic' + | 'basics-tabs--stateful-no-initial' + | 'basics-tabs--stateful-static' + | 'basics-tabs--stateless-absolute' + | 'basics-tabs--stateless-bordered' + | 'basics-tabs--stateless-empty' + | 'basics-tabs--stateless-with-tools' + | 'basics-tooltip-listitem--active-icon' + | 'basics-tooltip-listitem--all' + | 'basics-tooltip-listitem--default' + | 'basics-tooltip-listitem--default-icon' + | 'basics-tooltip-listitem--disabled' + | 'basics-tooltip-listitem--loading' + | 'basics-tooltip-listitem--w-positions' + | 'basics-tooltip-listitem--w-positions-active' + | 'basics-tooltip-tooltip--basic-default' + | 'basics-tooltip-tooltip--basic-default-bottom' + | 'basics-tooltip-tooltip--basic-default-left' + | 'basics-tooltip-tooltip--basic-default-right' + | 'basics-tooltip-tooltip--no-chrome' + | 'basics-tooltip-tooltiplinklist--links' + | 'basics-tooltip-tooltiplinklist--links-and-callback' + | 'basics-tooltip-tooltipmessage--default' + | 'basics-tooltip-tooltipmessage--minimal-message' + | 'basics-tooltip-tooltipmessage--with-link' + | 'basics-tooltip-tooltipmessage--with-links' + | 'basics-tooltip-tooltipnote--default' + | 'basics-tooltip-withtooltip--no-chrome' + | 'basics-tooltip-withtooltip--simple-click' + | 'basics-tooltip-withtooltip--simple-click-closeonclick' + | 'basics-tooltip-withtooltip--simple-click-start-open' + | 'basics-tooltip-withtooltip--simple-hover' + | 'basics-tooltip-withtooltip--simple-hover-functional' + | 'basics-typography--all' + | 'core-decorators--all' + | 'core-errors--story-errors' + | 'core-errors--story-throws-exception' + | 'core-events--force-re-render' + | 'core-parameters--passed-to-story' + | 'core-scroll--story-with-100vh-padding-1' + | 'core-scroll--story-with-100vh-padding-2' + | 'core-unicode--кнопки' + | 'core-unicode--바보x`' + | 'core-unicode--😀' + | 'other-demo-button--with-some-emoji' + | 'other-demo-button--with-text' + | 'other-demo-welcome--to-storybook' + | 'other-stories-dirname-example--story-1' + | 'other-stories-dirname-example--story-2' + | 'ui-layout-desktop--bottom-panel' + | 'ui-layout-desktop--default' + | 'ui-layout-desktop--full' + | 'ui-layout-desktop--no-nav' + | 'ui-layout-desktop--no-panel' + | 'ui-layout-desktop--no-panel-no-nav' + | 'ui-layout-desktop--page' + | 'ui-layout-mobile--initial-0' + | 'ui-layout-mobile--initial-1' + | 'ui-layout-mobile--initial-2' + | 'ui-layout-mobile--page' + | 'ui-notifications-item--longtext' + | 'ui-notifications-item--simple' + | 'ui-notifications-item--withlink' + | 'ui-notifications-notifications--all' + | 'ui-notifications-notifications--placement' + | 'ui-notifications-notifications--single' + | 'ui-panel--default' + | 'ui-panel--no-panels' + | 'ui-preview-iframe--errorstory' + | 'ui-preview-iframe--missingstory' + | 'ui-preview-iframe--workingstory' + | 'ui-preview-preview--no-tabs' + | 'ui-preview-preview--with-tabs' + | 'ui-settings-aboutscreen--failed-to-fetch-new-version' + | 'ui-settings-aboutscreen--new-version-required' + | 'ui-settings-aboutscreen--up-to-date' + | 'ui-settings-settingsfooter--basic' + | 'ui-settings-shortcutsscreen--default-shortcuts' + | 'ui-sidebar-listitemicon--all' + | 'ui-sidebar-sidebar--loading' + | 'ui-sidebar-sidebar--simple' + | 'ui-sidebar-sidebarheading--custombrandimage' + | 'ui-sidebar-sidebarheading--linkandtext' + | 'ui-sidebar-sidebarheading--longtext' + | 'ui-sidebar-sidebarheading--menuhighlighted' + | 'ui-sidebar-sidebarheading--onlytext' + | 'ui-sidebar-sidebarheading--standard' + | 'ui-sidebar-sidebarheading--standardnolink' + | 'ui-sidebar-sidebaritem--component' + | 'ui-sidebar-sidebaritem--componentexpanded' + | 'ui-sidebar-sidebaritem--group' + | 'ui-sidebar-sidebaritem--loading' + | 'ui-sidebar-sidebaritem--nesteddepths' + | 'ui-sidebar-sidebaritem--story' + | 'ui-sidebar-sidebaritem--storyselected' + | 'ui-sidebar-sidebaritem--with-long-name' + | 'ui-sidebar-sidebarsearch--filledin' + | 'ui-sidebar-sidebarsearch--focussed' + | 'ui-sidebar-sidebarsearch--simple' + | 'ui-sidebar-sidebarstories--empty' + | 'ui-sidebar-sidebarstories--loading' + | 'ui-sidebar-sidebarstories--noroot' + | 'ui-sidebar-sidebarstories--withroot' + | 'ui-sidebar-sidebarsubheading--default'; + +export interface IDecoratorParams { + default?: boolean; + name: string; + value: string; +} + +export interface IDecoratorParamA11y { + config: {}; + options: { [key: string]: string }; +} + +export interface IHierarchyObj { + hierarchyRootSeparator: string; + hierarchySeparator: RegExp; + theme?: { base: string; brandTitle: string }; +} +export interface IDecoratorParamOptions { + hierarchyRootSeparator: string; + hierarchySeparator: RegExp; + theme: { + base: string; + brandTitle: string; + }; +} +export interface IDecoratorParameters { + a11y: IDecoratorParamA11y; + backgrounds: []; + fileName?: string; + options: IDecoratorParamOptions; +} + +export interface IDecorator { + getDecorated: () => any; + getOriginal: () => any; + id: string; + kind: string; + name: string; + parameters: IDecoratorParameters; + story: string; + storyFn: (p: any) => any; + [key: string]: IDecorator[keyof IDecorator]; +} + +export type IData = { [K in DataIndices]: IDecorator }; +export interface IModule { + exports: any; + id: string; + loaded: boolean; + webpackPolyfill: number; + hot: any; +} + +export interface IClientApi { + add: (storyName: string, storyFn: () => any, parameters: any) => void; + addDecorator: (decorator: any) => any; + addDecorators: (parameters: any) => any; + kind: string; +} +export interface ClientApiParams { + storyStore: StoryStore; + decorateStory: (storyFn: any, decorators: any) => any; +} + +export interface ClientApi {} +export interface StoryStore { + fromId: (id: string) => any; + getIdOnPath: () => any; + getSelection: () => void; +} diff --git a/lib/client-api/src/typings.d.ts b/lib/client-api/src/typings.d.ts new file mode 100644 index 00000000000..2f4eb9cf4fd --- /dev/null +++ b/lib/client-api/src/typings.d.ts @@ -0,0 +1 @@ +declare module 'global'; diff --git a/lib/client-api/tsconfig.json b/lib/client-api/tsconfig.json new file mode 100644 index 00000000000..4894223ce82 --- /dev/null +++ b/lib/client-api/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src" + }, + "include": ["src/**/*"], + "exclude": ["src/**/*.test.ts"] +} diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json index 2efd927b72c..ee741c4c72e 100644 --- a/lib/client-logger/package.json +++ b/lib/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "", "keywords": [ "storybook" diff --git a/lib/codemod/package.json b/lib/codemod/package.json index 65164f8aa83..a7adaa35a17 100644 --- a/lib/codemod/package.json +++ b/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/lib/components/package.json b/lib/components/package.json index 86093a6a420..850c8da3118 100644 --- a/lib/components/package.json +++ b/lib/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Core Storybook Components", "keywords": [ "storybook" @@ -21,8 +21,8 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/client-logger": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/client-logger": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "core-js": "^3.0.1", "global": "^4.3.2", "markdown-to-jsx": "^6.9.1", diff --git a/lib/core-events/package.json b/lib/core-events/package.json index 65cfb33e561..a81023ad614 100644 --- a/lib/core-events/package.json +++ b/lib/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/lib/core/package.json b/lib/core/package.json index 4ad432f4aad..3a48f831ba2 100644 --- a/lib/core/package.json +++ b/lib/core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -25,15 +25,15 @@ "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/plugin-transform-react-constant-elements": "^7.2.0", "@babel/preset-env": "^7.4.5", - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/channel-postmessage": "5.2.0-unreleased.0", - "@storybook/client-api": "5.2.0-unreleased.0", - "@storybook/client-logger": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/node-logger": "5.2.0-unreleased.0", - "@storybook/router": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", - "@storybook/ui": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/channel-postmessage": "5.2.0-alpha.23", + "@storybook/client-api": "5.2.0-alpha.23", + "@storybook/client-logger": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/node-logger": "5.2.0-alpha.23", + "@storybook/router": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", + "@storybook/ui": "5.2.0-alpha.23", "airbnb-js-shims": "^1 || ^2", "autoprefixer": "^9.4.9", "babel-plugin-add-react-displayname": "^0.0.5", diff --git a/lib/node-logger/package.json b/lib/node-logger/package.json index 394893e9d44..a528c78fe19 100644 --- a/lib/node-logger/package.json +++ b/lib/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "", "keywords": [ "storybook" diff --git a/lib/router/package.json b/lib/router/package.json index 8308f486b75..40af241733f 100644 --- a/lib/router/package.json +++ b/lib/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/lib/theming/package.json b/lib/theming/package.json index 5361bdb4e36..abd05eb752f 100644 --- a/lib/theming/package.json +++ b/lib/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Core Storybook Components", "keywords": [ "storybook" @@ -23,7 +23,7 @@ "dependencies": { "@emotion/core": "^10.0.9", "@emotion/styled": "^10.0.7", - "@storybook/client-logger": "5.2.0-unreleased.0", + "@storybook/client-logger": "5.2.0-alpha.23", "common-tags": "^1.8.0", "core-js": "^3.0.1", "deep-object-diff": "^1.1.0", diff --git a/lib/ui/package.json b/lib/ui/package.json index 5e26ff06b0e..afb6284864a 100644 --- a/lib/ui/package.json +++ b/lib/ui/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ui", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "description": "Core Storybook UI", "keywords": [ "storybook" @@ -22,13 +22,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-unreleased.0", - "@storybook/api": "5.2.0-unreleased.0", - "@storybook/client-logger": "5.2.0-unreleased.0", - "@storybook/components": "5.2.0-unreleased.0", - "@storybook/core-events": "5.2.0-unreleased.0", - "@storybook/router": "5.2.0-unreleased.0", - "@storybook/theming": "5.2.0-unreleased.0", + "@storybook/addons": "5.2.0-alpha.23", + "@storybook/api": "5.2.0-alpha.23", + "@storybook/client-logger": "5.2.0-alpha.23", + "@storybook/components": "5.2.0-alpha.23", + "@storybook/core-events": "5.2.0-alpha.23", + "@storybook/router": "5.2.0-alpha.23", + "@storybook/theming": "5.2.0-alpha.23", "copy-to-clipboard": "^3.0.8", "core-js": "^3.0.1", "core-js-pure": "^3.0.1", diff --git a/package.json b/package.json index 30003863bdd..8150f2f3034 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "5.2.0-unreleased.0", + "version": "5.2.0-alpha.23", "private": true, "description": "Storybook is an open source tool for developing UI components in isolation for React, Vue and Angular. It makes building stunning UIs organized and efficient.", "keywords": [ From 063792bfcf0aac9504eeaa6dcf55ddf74bfd0428 Mon Sep 17 00:00:00 2001 From: lonyele Date: Fri, 21 Jun 2019 11:32:28 +0900 Subject: [PATCH 037/162] chore: add tsconfig to addon-events --- addons/events/tsconfig.json | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 addons/events/tsconfig.json diff --git a/addons/events/tsconfig.json b/addons/events/tsconfig.json new file mode 100644 index 00000000000..8876bb6737a --- /dev/null +++ b/addons/events/tsconfig.json @@ -0,0 +1,13 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "types": ["webpack-env"] + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "src/__tests__/**/*" + ] +} From 1d0821f4c14cb276ea81769cb0b81b8c1929b4b7 Mon Sep 17 00:00:00 2001 From: lonyele Date: Fri, 21 Jun 2019 12:01:50 +0900 Subject: [PATCH 038/162] chore: migrate src of addon-events to Typescript --- addons/events/package.json | 2 +- .../src/components/{Event.js => Event.tsx} | 18 +++++++++--------- .../src/components/{Panel.js => Panel.tsx} | 10 +++++----- .../events/src/{constants.js => constants.ts} | 0 addons/events/src/{index.js => index.ts} | 14 +++++++------- addons/events/src/{manager.js => manager.tsx} | 3 +-- addons/events/src/typings.d.ts | 2 ++ 7 files changed, 25 insertions(+), 24 deletions(-) rename addons/events/src/components/{Event.js => Event.tsx} (92%) rename addons/events/src/components/{Panel.js => Panel.tsx} (85%) rename addons/events/src/{constants.js => constants.ts} (100%) rename addons/events/src/{index.js => index.ts} (79%) rename addons/events/src/{manager.js => manager.tsx} (68%) create mode 100644 addons/events/src/typings.d.ts diff --git a/addons/events/package.json b/addons/events/package.json index 146314582b9..ebe6edc27aa 100644 --- a/addons/events/package.json +++ b/addons/events/package.json @@ -19,7 +19,7 @@ }, "license": "MIT", "main": "dist/index.js", - "jsnext:main": "src/index.js", + "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, diff --git a/addons/events/src/components/Event.js b/addons/events/src/components/Event.tsx similarity index 92% rename from addons/events/src/components/Event.js rename to addons/events/src/components/Event.tsx index 7e363495947..4ac0732b88e 100644 --- a/addons/events/src/components/Event.js +++ b/addons/events/src/components/Event.tsx @@ -24,7 +24,7 @@ const StyledTextarea = styled(Textarea)( minHeight: '32px', resize: 'vertical', }, - ({ shown }) => + ({ shown }: any) => shown ? {} : { @@ -67,7 +67,7 @@ const Label = styled.label({ textAlign: 'right', width: 100, fontWeight: '600', -}); +} as any); const Wrapper = styled.div({ display: 'flex', @@ -77,7 +77,7 @@ const Wrapper = styled.div({ width: '100%', }); -function getJSONFromString(str) { +function getJSONFromString(str: any) { try { return JSON.parse(str); } catch (e) { @@ -85,7 +85,7 @@ function getJSONFromString(str) { } } -class Item extends Component { +class Item extends Component { static propTypes = { name: PropTypes.string.isRequired, title: PropTypes.string.isRequired, @@ -98,12 +98,12 @@ class Item extends Component { payload: {}, }; - state = { + state: any = { isTextAreaShowed: false, }; - onChange = ({ target: { value } }) => { - const newState = { + onChange = ({ target: { value } }: any) => { + const newState: any = { payloadString: value, }; @@ -128,12 +128,12 @@ class Item extends Component { }; onToggleEditClick = () => { - this.setState(({ isTextAreaShowed }) => ({ + this.setState(({ isTextAreaShowed }: any) => ({ isTextAreaShowed: !isTextAreaShowed, })); }; - static getDerivedStateFromProps = ({ payload }, { prevPayload }) => { + static getDerivedStateFromProps = ({ payload }: any, { prevPayload }: any) => { if (!isEqual(payload, prevPayload)) { const payloadString = json.plain(payload); const refinedPayload = getJSONFromString(payloadString); diff --git a/addons/events/src/components/Panel.js b/addons/events/src/components/Panel.tsx similarity index 85% rename from addons/events/src/components/Panel.js rename to addons/events/src/components/Panel.tsx index 4c37e0727a5..38b391c0098 100644 --- a/addons/events/src/components/Panel.js +++ b/addons/events/src/components/Panel.tsx @@ -13,7 +13,7 @@ const Wrapper = styled.div({ minHeight: '100%', }); -export default class EventsPanel extends Component { +export default class EventsPanel extends Component { static propTypes = { active: PropTypes.bool.isRequired, api: PropTypes.shape({ @@ -23,7 +23,7 @@ export default class EventsPanel extends Component { }).isRequired, }; - state = { + state: any = { events: [], }; @@ -39,11 +39,11 @@ export default class EventsPanel extends Component { api.off(EVENTS.ADD, this.onAdd); } - onAdd = events => { + onAdd = (events: any) => { this.setState({ events }); }; - onEmit = event => { + onEmit = (event: any) => { const { api } = this.props; api.emit(EVENTS.EMIT, event); @@ -54,7 +54,7 @@ export default class EventsPanel extends Component { const { active } = this.props; return active ? ( - {events.map(event => ( + {events.map((event: any) => ( ))} diff --git a/addons/events/src/constants.js b/addons/events/src/constants.ts similarity index 100% rename from addons/events/src/constants.js rename to addons/events/src/constants.ts diff --git a/addons/events/src/index.js b/addons/events/src/index.ts similarity index 79% rename from addons/events/src/index.js rename to addons/events/src/index.ts index 31eb1960e36..4c77147d4cd 100644 --- a/addons/events/src/index.js +++ b/addons/events/src/index.ts @@ -4,10 +4,10 @@ import deprecate from 'util-deprecate'; import { EVENTS } from './constants'; -let prevEvents; -let currentEmit; +let prevEvents: any; +let currentEmit: any; -const onEmit = event => { +const onEmit = (event: any) => { currentEmit(event.name, event.payload); }; @@ -21,7 +21,7 @@ const subscription = () => { }; }; -const addEvents = ({ emit, events }) => { +const addEvents = ({ emit, events }: any) => { if (prevEvents !== events) { addons.getChannel().emit(EVENTS.ADD, events); prevEvents = events; @@ -30,16 +30,16 @@ const addEvents = ({ emit, events }) => { addons.getChannel().emit(CoreEvents.REGISTER_SUBSCRIPTION, subscription); }; -const WithEvents = deprecate(({ children, ...options }) => { +const WithEvents = deprecate(({ children, ...options }: any) => { addEvents(options); return children; }, ` usage is deprecated, use .addDecorator(withEvents({emit, events})) instead`); -export default options => { +export default (options: any) => { if (options.children) { return WithEvents(options); } - return storyFn => { + return (storyFn: any) => { addEvents(options); return storyFn(); }; diff --git a/addons/events/src/manager.js b/addons/events/src/manager.tsx similarity index 68% rename from addons/events/src/manager.js rename to addons/events/src/manager.tsx index 6d8bea63468..f6ebba0f92b 100644 --- a/addons/events/src/manager.js +++ b/addons/events/src/manager.tsx @@ -8,8 +8,7 @@ export function register() { addons.register(ADDON_ID, api => { addons.addPanel(PANEL_ID, { title: 'Events', - // eslint-disable-next-line react/prop-types - render: ({ active, key }) => , + render: ({ active, key }: any) => , }); }); } diff --git a/addons/events/src/typings.d.ts b/addons/events/src/typings.d.ts new file mode 100644 index 00000000000..d6932d989ba --- /dev/null +++ b/addons/events/src/typings.d.ts @@ -0,0 +1,2 @@ +declare module 'react-lifecycles-compat'; +declare module 'format-json'; From 5d2f9b92563c6130bb238b45be254458f2613302 Mon Sep 17 00:00:00 2001 From: Jessica Koch Date: Sat, 22 Jun 2019 18:41:04 -0700 Subject: [PATCH 039/162] broken...need to rebuild, sorry --- README.md | 2 +- lib/client-api/src/types.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e04eb43cf78..b306e2ef41d 100644 --- a/README.md +++ b/README.md @@ -163,7 +163,7 @@ Looking for a first issue to tackle? ### Development scripts -Storybook is organized as a monorepo using [Lerna](https://lernajs.io). Useful scripts include: +Storybook is organized as a monorepo using [Lerna](https://lerna.js.org/). Useful scripts include: #### `yarn bootstrap` diff --git a/lib/client-api/src/types.ts b/lib/client-api/src/types.ts index a5ef6c37d14..7a3fa6269a5 100644 --- a/lib/client-api/src/types.ts +++ b/lib/client-api/src/types.ts @@ -344,7 +344,7 @@ export interface Decorator { name: string; parameters: DecoratorParameters; story: string; - storyFn: storyFn; + storyFn: StoryFn; } export type DecoratorData = { [K in Keys]: Decorator }; From 33f1960b64662740bf986c51f6c5a886cd9a84e9 Mon Sep 17 00:00:00 2001 From: lonyele Date: Tue, 25 Jun 2019 14:08:33 +0900 Subject: [PATCH 040/162] refactor: improve types of index.ts, manager.tsx --- addons/events/src/index.ts | 33 ++++++++++++++++++++++++++------- addons/events/src/manager.tsx | 2 +- 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/addons/events/src/index.ts b/addons/events/src/index.ts index 4c77147d4cd..db09b493cad 100644 --- a/addons/events/src/index.ts +++ b/addons/events/src/index.ts @@ -1,13 +1,20 @@ +import { ReactNode } from 'react'; + import addons from '@storybook/addons'; import CoreEvents from '@storybook/core-events'; import deprecate from 'util-deprecate'; import { EVENTS } from './constants'; -let prevEvents: any; -let currentEmit: any; +let prevEvents: Event[]; +let currentEmit: (name: string, payload: unknown) => void; -const onEmit = (event: any) => { +export interface OnEmitEvent { + name: string; + payload: unknown; +} + +const onEmit = (event: OnEmitEvent) => { currentEmit(event.name, event.payload); }; @@ -21,7 +28,7 @@ const subscription = () => { }; }; -const addEvents = ({ emit, events }: any) => { +const addEvents = ({ emit, events }: Options) => { if (prevEvents !== events) { addons.getChannel().emit(EVENTS.ADD, events); prevEvents = events; @@ -30,16 +37,28 @@ const addEvents = ({ emit, events }: any) => { addons.getChannel().emit(CoreEvents.REGISTER_SUBSCRIPTION, subscription); }; -const WithEvents = deprecate(({ children, ...options }: any) => { +export interface Event { + name: string; + title: string; + payload: unknown; +} + +interface Options { + children?: ReactNode; + emit: (eventName: string, ...args: any) => void; + events: Event[]; +} + +const WithEvents = deprecate(({ children, ...options }: Options) => { addEvents(options); return children; }, ` usage is deprecated, use .addDecorator(withEvents({emit, events})) instead`); -export default (options: any) => { +export default (options: Options) => { if (options.children) { return WithEvents(options); } - return (storyFn: any) => { + return (storyFn: () => ReactNode) => { addEvents(options); return storyFn(); }; diff --git a/addons/events/src/manager.tsx b/addons/events/src/manager.tsx index f6ebba0f92b..d5c818fe3bc 100644 --- a/addons/events/src/manager.tsx +++ b/addons/events/src/manager.tsx @@ -8,7 +8,7 @@ export function register() { addons.register(ADDON_ID, api => { addons.addPanel(PANEL_ID, { title: 'Events', - render: ({ active, key }: any) => , + render: ({ active, key }) => , }); }); } From fa27db5a6d15c8c786de0a67b07d3bc1c8f5b507 Mon Sep 17 00:00:00 2001 From: lonyele Date: Tue, 25 Jun 2019 14:38:14 +0900 Subject: [PATCH 041/162] refactor: improve types of Event component --- addons/events/src/components/Event.tsx | 47 +++++++++++++++++++------- 1 file changed, 35 insertions(+), 12 deletions(-) diff --git a/addons/events/src/components/Event.tsx b/addons/events/src/components/Event.tsx index 4ac0732b88e..427ba7b37fa 100644 --- a/addons/events/src/components/Event.tsx +++ b/addons/events/src/components/Event.tsx @@ -5,10 +5,15 @@ import isEqual from 'lodash/isEqual'; import { styled } from '@storybook/theming'; import json from 'format-json'; - import Textarea from 'react-textarea-autosize'; +import { OnEmitEvent } from '../index'; -const StyledTextarea = styled(Textarea)( +interface StyledTextareaProps { + shown: boolean; + failed: boolean; +} + +const StyledTextarea = styled(Textarea)( { flex: '1 0 0', boxSizing: 'border-box', @@ -24,7 +29,7 @@ const StyledTextarea = styled(Textarea)( minHeight: '32px', resize: 'vertical', }, - ({ shown }: any) => + ({ shown }) => shown ? {} : { @@ -77,15 +82,29 @@ const Wrapper = styled.div({ width: '100%', }); -function getJSONFromString(str: any) { +function getJSONFromString(str: string) { try { return JSON.parse(str); } catch (e) { return str; } } +interface ItemProps { + name: string; + title: string; + onEmit: (event: OnEmitEvent) => void; + payload: unknown; +} -class Item extends Component { +interface ItemState { + isTextAreaShowed: boolean; + failed: boolean; + payload: unknown; + payloadString: string; + prevPayload: unknown; +} + +class Item extends Component { static propTypes = { name: PropTypes.string.isRequired, title: PropTypes.string.isRequired, @@ -98,12 +117,17 @@ class Item extends Component { payload: {}, }; - state: any = { + state: ItemState = { isTextAreaShowed: false, + failed: false, + payload: null, + payloadString: '', + // eslint-disable-next-line react/no-unused-state, + prevPayload: null, }; - onChange = ({ target: { value } }: any) => { - const newState: any = { + onChange = ({ target: { value } }: React.ChangeEvent) => { + const newState: Partial = { payloadString: value, }; @@ -114,7 +138,7 @@ class Item extends Component { newState.failed = true; } - this.setState(newState); + this.setState(newState as ItemState); }; onEmitClick = () => { @@ -128,12 +152,12 @@ class Item extends Component { }; onToggleEditClick = () => { - this.setState(({ isTextAreaShowed }: any) => ({ + this.setState(({ isTextAreaShowed }) => ({ isTextAreaShowed: !isTextAreaShowed, })); }; - static getDerivedStateFromProps = ({ payload }: any, { prevPayload }: any) => { + static getDerivedStateFromProps = ({ payload }: ItemProps, { prevPayload }: ItemState) => { if (!isEqual(payload, prevPayload)) { const payloadString = json.plain(payload); const refinedPayload = getJSONFromString(payloadString); @@ -150,7 +174,6 @@ class Item extends Component { render() { const { title, name } = this.props; const { failed, isTextAreaShowed, payloadString } = this.state; - return ( From f420cbbaaa009173b3f2526aa327394243eefd35 Mon Sep 17 00:00:00 2001 From: lonyele Date: Tue, 25 Jun 2019 14:41:17 +0900 Subject: [PATCH 042/162] refactor: improve types of Panel component --- addons/events/package.json | 1 + addons/events/src/components/Panel.tsx | 21 +++++++++++++++------ 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/addons/events/package.json b/addons/events/package.json index ebe6edc27aa..3b0d640dbfb 100644 --- a/addons/events/package.json +++ b/addons/events/package.json @@ -25,6 +25,7 @@ }, "dependencies": { "@storybook/addons": "5.2.0-alpha.23", + "@storybook/api": "^5.1.9", "@storybook/core-events": "5.2.0-alpha.23", "@storybook/theming": "5.2.0-alpha.23", "core-js": "^3.0.1", diff --git a/addons/events/src/components/Panel.tsx b/addons/events/src/components/Panel.tsx index 38b391c0098..6c79a5ff2e5 100644 --- a/addons/events/src/components/Panel.tsx +++ b/addons/events/src/components/Panel.tsx @@ -2,9 +2,11 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { styled } from '@storybook/theming'; +import { API } from '@storybook/api'; import { EVENTS } from '../constants'; import Event from './Event'; +import { Event as EventType, OnEmitEvent } from '../index'; const Wrapper = styled.div({ width: '100%', @@ -13,7 +15,15 @@ const Wrapper = styled.div({ minHeight: '100%', }); -export default class EventsPanel extends Component { +interface EventsPanelProps { + active: boolean; + api: API; +} +interface EventsPanelState { + events: EventType[]; +} + +export default class EventsPanel extends Component { static propTypes = { active: PropTypes.bool.isRequired, api: PropTypes.shape({ @@ -23,7 +33,7 @@ export default class EventsPanel extends Component { }).isRequired, }; - state: any = { + state: EventsPanelState = { events: [], }; @@ -39,13 +49,12 @@ export default class EventsPanel extends Component { api.off(EVENTS.ADD, this.onAdd); } - onAdd = (events: any) => { + onAdd = (events: EventType[]) => { this.setState({ events }); }; - onEmit = (event: any) => { + onEmit = (event: OnEmitEvent) => { const { api } = this.props; - api.emit(EVENTS.EMIT, event); }; @@ -54,7 +63,7 @@ export default class EventsPanel extends Component { const { active } = this.props; return active ? ( - {events.map((event: any) => ( + {events.map(event => ( ))} From 220b17e8aaacbd266ce8418a4b57a8737b1c59b4 Mon Sep 17 00:00:00 2001 From: lonyele Date: Tue, 25 Jun 2019 15:41:27 +0900 Subject: [PATCH 043/162] fix: remove receiving non-boolean attribute console warning --- addons/events/src/components/Event.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/addons/events/src/components/Event.tsx b/addons/events/src/components/Event.tsx index 427ba7b37fa..1cc500725b7 100644 --- a/addons/events/src/components/Event.tsx +++ b/addons/events/src/components/Event.tsx @@ -11,9 +11,13 @@ import { OnEmitEvent } from '../index'; interface StyledTextareaProps { shown: boolean; failed: boolean; + value?: string; + onChange?: (event: React.ChangeEvent) => void; } -const StyledTextarea = styled(Textarea)( +const StyledTextarea = styled(({ shown, failed, ...rest }: StyledTextareaProps) => ( + ); - -storiesOf('Addons|Info.GitHub issues', module).add( - '#1814', - withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => ( -
- - ); - -storiesOf('Addons|Info.GitHub issues', module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__)).add( - '#1814', - withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => ( -
- - -
-
- -
-
- -
-
-`; - -exports[`Storyshots Basics|Form/Textarea sizes 1`] = ` -.emotion-6 > * { - margin-top: 10px; -} - -.emotion-6 > *:first-of-type { - margin-top: 0; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.emotion-0 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: 0; - box-sizing: inherit; - display: block; - margin: 0; - background: #FFFFFF; - padding: .42em 1em; - font-size: 13px; - position: relative; - -webkit-transition: all 200ms ease-out; - transition: all 200ms ease-out; - color: #333333; - box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset; - border-radius: 4px; - line-height: 20px; - display: inline; - text-align: left; - overflow: visible; -} - -.emotion-0:focus { - box-shadow: #1EA7FD 0 0 0 1px inset; -} - -.emotion-0[disabled] { - cursor: not-allowed; - opacity: 0.5; -} - -.emotion-0:-webkit-autofill { - -webkit-box-shadow: 0 0 0 3em #FFFFFF inset; -} - -.emotion-0::-webkit-input-placeholder { - color: #999999; -} - -.emotion-0::-moz-placeholder { - color: #999999; -} - -.emotion-0:-ms-input-placeholder { - color: #999999; -} - -.emotion-0::placeholder { - color: #999999; -} - -.emotion-2 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: 0; - box-sizing: inherit; - display: block; - margin: 0; - background: #FFFFFF; - padding: .42em 1em; - font-size: 13px; - position: relative; - -webkit-transition: all 200ms ease-out; - transition: all 200ms ease-out; - color: #333333; - box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset; - border-radius: 4px; - line-height: 20px; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: left; - overflow: visible; -} - -.emotion-2:focus { - box-shadow: #1EA7FD 0 0 0 1px inset; -} - -.emotion-2[disabled] { - cursor: not-allowed; - opacity: 0.5; -} - -.emotion-2:-webkit-autofill { - -webkit-box-shadow: 0 0 0 3em #FFFFFF inset; -} - -.emotion-2::-webkit-input-placeholder { - color: #999999; -} - -.emotion-2::-moz-placeholder { - color: #999999; -} - -.emotion-2:-ms-input-placeholder { - color: #999999; -} - -.emotion-2::placeholder { - color: #999999; -} - -.emotion-4 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: 0; - box-sizing: inherit; - display: block; - margin: 0; - background: #FFFFFF; - padding: .42em 1em; - font-size: 13px; - position: relative; - -webkit-transition: all 200ms ease-out; - transition: all 200ms ease-out; - color: #333333; - box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset; - border-radius: 4px; - line-height: 20px; - width: 100%; - text-align: left; - overflow: visible; -} - -.emotion-4:focus { - box-shadow: #1EA7FD 0 0 0 1px inset; -} - -.emotion-4[disabled] { - cursor: not-allowed; - opacity: 0.5; -} - -.emotion-4:-webkit-autofill { - -webkit-box-shadow: 0 0 0 3em #FFFFFF inset; -} - -.emotion-4::-webkit-input-placeholder { - color: #999999; -} - -.emotion-4::-moz-placeholder { - color: #999999; -} - -.emotion-4:-ms-input-placeholder { - color: #999999; -} - -.emotion-4::placeholder { - color: #999999; -} - -
-
- -
-
- -
-
- -
-
-`; - -exports[`Storyshots Basics|Form/Textarea validations 1`] = ` -.emotion-8 > * { - margin-top: 10px; -} - -.emotion-8 > *:first-of-type { - margin-top: 0; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.emotion-6 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: 0; - box-sizing: inherit; - display: block; - margin: 0; - background: #FFFFFF; - padding: .42em 1em; - font-size: 13px; - position: relative; - -webkit-transition: all 200ms ease-out; - transition: all 200ms ease-out; - color: #333333; - box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset; - border-radius: 4px; - line-height: 20px; - width: 100%; - text-align: left; - overflow: visible; -} - -.emotion-6:focus { - box-shadow: #1EA7FD 0 0 0 1px inset; -} - -.emotion-6[disabled] { - cursor: not-allowed; - opacity: 0.5; -} - -.emotion-6:-webkit-autofill { - -webkit-box-shadow: 0 0 0 3em #FFFFFF inset; -} - -.emotion-6::-webkit-input-placeholder { - color: #999999; -} - -.emotion-6::-moz-placeholder { - color: #999999; -} - -.emotion-6:-ms-input-placeholder { - color: #999999; -} - -.emotion-6::placeholder { - color: #999999; -} - -.emotion-0 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: 0; - box-sizing: inherit; - display: block; - margin: 0; - background: #FFFFFF; - padding: .42em 1em; - font-size: 13px; - position: relative; - -webkit-transition: all 200ms ease-out; - transition: all 200ms ease-out; - color: #333333; - box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset; - border-radius: 4px; - line-height: 20px; - width: 100%; - text-align: left; - box-shadow: #FF4400 0 0 0 1px inset !important; - overflow: visible; -} - -.emotion-0:focus { - box-shadow: #1EA7FD 0 0 0 1px inset; -} - -.emotion-0[disabled] { - cursor: not-allowed; - opacity: 0.5; -} - -.emotion-0:-webkit-autofill { - -webkit-box-shadow: 0 0 0 3em #FFFFFF inset; -} - -.emotion-0::-webkit-input-placeholder { - color: #999999; -} - -.emotion-0::-moz-placeholder { - color: #999999; -} - -.emotion-0:-ms-input-placeholder { - color: #999999; -} - -.emotion-0::placeholder { - color: #999999; -} - -.emotion-2 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: 0; - box-sizing: inherit; - display: block; - margin: 0; - background: #FFFFFF; - padding: .42em 1em; - font-size: 13px; - position: relative; - -webkit-transition: all 200ms ease-out; - transition: all 200ms ease-out; - color: #333333; - box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset; - border-radius: 4px; - line-height: 20px; - width: 100%; - text-align: left; - box-shadow: #E69D00 0 0 0 1px inset; - overflow: visible; -} - -.emotion-2:focus { - box-shadow: #1EA7FD 0 0 0 1px inset; -} - -.emotion-2[disabled] { - cursor: not-allowed; - opacity: 0.5; -} - -.emotion-2:-webkit-autofill { - -webkit-box-shadow: 0 0 0 3em #FFFFFF inset; -} - -.emotion-2::-webkit-input-placeholder { - color: #999999; -} - -.emotion-2::-moz-placeholder { - color: #999999; -} - -.emotion-2:-ms-input-placeholder { - color: #999999; -} - -.emotion-2::placeholder { - color: #999999; -} - -.emotion-4 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: 0; - box-sizing: inherit; - display: block; - margin: 0; - background: #FFFFFF; - padding: .42em 1em; - font-size: 13px; - position: relative; - -webkit-transition: all 200ms ease-out; - transition: all 200ms ease-out; - color: #333333; - box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset; - border-radius: 4px; - line-height: 20px; - width: 100%; - text-align: left; - box-shadow: #66BF3C 0 0 0 1px inset !important; - overflow: visible; -} - -.emotion-4:focus { - box-shadow: #1EA7FD 0 0 0 1px inset; -} - -.emotion-4[disabled] { - cursor: not-allowed; - opacity: 0.5; -} - -.emotion-4:-webkit-autofill { - -webkit-box-shadow: 0 0 0 3em #FFFFFF inset; -} - -.emotion-4::-webkit-input-placeholder { - color: #999999; -} - -.emotion-4::-moz-placeholder { - color: #999999; -} - -.emotion-4:-ms-input-placeholder { - color: #999999; -} - -.emotion-4::placeholder { - color: #999999; -} - -
-
- -
-
- -
-
- -
-
- -
-
-`; diff --git a/lib/components/src/icon/__snapshots__/icon.stories.storyshot b/lib/components/src/icon/__snapshots__/icon.stories.storyshot deleted file mode 100644 index 0c674a0fdae..00000000000 --- a/lib/components/src/icon/__snapshots__/icon.stories.storyshot +++ /dev/null @@ -1,4960 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Basics|Icon labels 1`] = ` -.emotion-1 { - shape-rendering: inherit; - -webkit-transform: translate3d(0,0,0); - -ms-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); - display: block; -} - -.emotion-0 { - fill: currentColor; -} - -.emotion-604 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-flow: row wrap; - -ms-flex-flow: row wrap; - flex-flow: row wrap; -} - -.emotion-3 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex: 0 1 20%; - -ms-flex: 0 1 20%; - flex: 0 1 20%; - min-width: 120px; - padding: 0px 7.5px 20px; -} - -.emotion-3 svg { - margin-right: 10px; - width: 24px; - height: 24px; -} - -.emotion-2 { - color: #333; - font-size: 12px; -} - -
-
- - - - -
- add -
-
-
- - - - -
- admin -
-
-
- - - - -
- alert -
-
-
- - - - -
- arrowdown -
-
-
- - - - -
- arrowleft -
-
-
- - - - -
- arrowleftalt -
-
-
- - - - -
- arrowright -
-
-
- - - - -
- arrowrightalt -
-
-
- - - - -
- arrowup -
-
-
- - - - -
- back -
-
-
- - - - -
- basket -
-
-
- - - - -
- batchaccept -
-
-
- - - - -
- batchdeny -
-
-
- - - - -
- beaker -
-
-
- - - - -
- bell -
-
-
- - - - -
- bitbucket -
-
-
- - - - -
- book -
-
-
- - - - -
- bookmark -
-
-
- - - - -
- bookmarkhollow -
-
-
- - - - -
- bottombar -
-
-
- - - - -
- box -
-
-
- - - - -
- branch -
-
-
- - - - -
- browser -
-
-
- - - - -
- button -
-
-
- - - - -
- calendar -
-
-
- - - - -
- camera -
-
-
- - - - -
- category -
-
-
- - - - -
- certificate -
-
-
- - - - -
- check -
-
-
- - - - -
- chevrondown -
-
-
- - - - -
- chroma -
-
-
- - - - -
- circle -
-
-
- - - - -
- circlehollow -
-
-
- - - - -
- close -
-
-
- - - - -
- closeAlt -
-
-
- - - - -
- cog -
-
-
- - - - -
- comment -
-
-
- - - - -
- commit -
-
-
- - - - -
- compass -
-
-
- - - - -
- component -
-
-
- - - - -
- copy -
-
-
- - - - -
- cpu -
-
-
- - - - -
- credit -
-
-
- - - - -
- cross -
-
-
- - - - -
- dashboard -
-
-
- - - - -
- database -
-
-
- - - - -
- delete -
-
-
- - - - -
- discord -
-
-
- - - - -
- docchart -
-
-
- - - - -
- doclist -
-
-
- - - - -
- document -
-
-
- - - - -
- download -
-
-
- - - - -
- edit -
-
-
- - - - -
- ellipsis -
-
-
- - - - -
- email -
-
-
- - - - -
- expand -
-
-
- - - - -
- expandalt -
-
-
- - - - -
- eye -
-
-
- - - - -
- eyeclose -
-
-
- - - - -
- facebook -
-
-
- - - - -
- facehappy -
-
-
- - - - -
- faceneutral -
-
-
- - - - -
- facesad -
-
-
- - - - -
- filter -
-
-
- - - - -
- flag -
-
-
- - - - -
- folder -
-
-
- - - - -
- form -
-
-
- - - - -
- gdrive -
-
-
- - - - -
- github -
-
-
- - - - -
- gitlab -
-
-
- - - - -
- globe -
-
-
- - - - -
- google -
-
-
- - - - -
- graphbar -
-
-
- - - - -
- graphline -
-
-
- - - - -
- graphql -
-
-
- - - - -
- grid -
-
-
- - - - -
- grow -
-
-
- - - - -
- heart -
-
-
- - - - -
- hearthollow -
-
-
- - - - -
- home -
-
-
- - - - -
- hourglass -
-
-
- - - - -
- info -
-
-
- - - - -
- key -
-
-
- - - - -
- lightning -
-
-
- - - - -
- link -
-
-
- - - - -
- listunordered -
-
-
- - - - -
- location -
-
-
- - - - -
- lock -
-
-
- - - - -
- medium -
-
-
- - - - -
- memory -
-
-
- - - - -
- menu -
-
-
- - - - -
- merge -
-
-
- - - - -
- mirror -
-
-
- - - - -
- mobile -
-
-
- - - - -
- nut -
-
-
- - - - -
- outbox -
-
-
- - - - -
- paintbrush -
-
-
- - - - -
- paperclip -
-
-
- - - - -
- paragraph -
-
-
- - - - -
- phone -
-
-
- - - - -
- photo -
-
-
- - - - -
- pin -
-
-
- - - - -
- play -
-
-
- - - - -
- plus -
-
-
- - - - -
- power -
-
-
- - - - -
- print -
-
-
- - - - -
- proceed -
-
-
- - - - -
- profile -
-
-
- - - - -
- pullrequest -
-
-
- - - - -
- question -
-
-
- - - - -
- redirect -
-
-
- - - - -
- redux -
-
-
- - - - -
- reply -
-
-
- - - - -
- repository -
-
-
- - - - -
- requestchange -
-
-
- - - - -
- rss -
-
-
- - - - -
- search -
-
-
- - - - -
- share -
-
-
- - - - -
- shield -
-
-
- - - - -
- sidebar -
-
-
- - - - -
- sidebaralt -
-
-
- - - - -
- speaker -
-
-
- - - - -
- star -
-
-
- - - - -
- starhollow -
-
-
- - - - -
- stop -
-
-
- - - - -
- structure -
-
-
- - - - -
- subtract -
-
-
- - - - -
- support -
-
-
- - - - -
- switchalt -
-
-
- - - - -
- sync -
-
-
- - - - -
- tablet -
-
-
- - - - -
- thumbsup -
-
-
- - - - -
- time -
-
-
- - - - -
- timer -
-
-
- - - - -
- transfer -
-
-
- - - - -
- trash -
-
-
- - - - -
- twitter -
-
-
- - - - -
- undo -
-
-
- - - - -
- unlock -
-
-
- - - - -
- upload -
-
-
- - - - -
- user -
-
-
- - - - -
- useradd -
-
-
- - - - -
- useralt -
-
-
- - - - -
- users -
-
-
- - - - -
- video -
-
-
- - - - -
- watch -
-
-
- - - - -
- wrench -
-
-
- - - - -
- youtube -
-
-
- - - - -
- zoom -
-
-
- - - - -
- zoomout -
-
-
- - - - -
- zoomreset -
-
-
-`; - -exports[`Storyshots Basics|Icon no labels 1`] = ` -.emotion-1 { - shape-rendering: inherit; - -webkit-transform: translate3d(0,0,0); - -ms-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); - display: block; -} - -.emotion-0 { - fill: currentColor; -} - -.emotion-453 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-flow: row wrap; - -ms-flex-flow: row wrap; - flex-flow: row wrap; -} - -.emotion-2 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex: 0 1 20%; - -ms-flex: 0 1 20%; - flex: 0 1 20%; - min-width: 120px; - padding: 0px 7.5px 20px; - -webkit-flex: none; - -ms-flex: none; - flex: none; - min-width: auto; - padding: 0; - background: #fff; - border: 1px solid #666; -} - -.emotion-2 svg { - margin-right: 10px; - width: 24px; - height: 24px; -} - -.emotion-2 svg { - display: block; - margin-right: 0; - width: 48px; - height: 48px; -} - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
-`; diff --git a/lib/components/src/spaced/__snapshots__/Spaced.stories.storyshot b/lib/components/src/spaced/__snapshots__/Spaced.stories.storyshot deleted file mode 100644 index 38ceb1d92be..00000000000 --- a/lib/components/src/spaced/__snapshots__/Spaced.stories.storyshot +++ /dev/null @@ -1,249 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Basics|Spaced col 1`] = ` -.emotion-0 { - background: silver; - display: inline-block; - padding: 20px; -} - -.emotion-4 { - display: inline-block; - vertical-align: inherit; -} - -.emotion-4 > * { - margin-left: 10px; - vertical-align: inherit; -} - -.emotion-4 > *:first-of-type { - margin-left: 0; -} - -.emotion-1 { - background: hotpink; - display: inline-block; - padding: 20px; -} - -
- -
- - - -
- -
-`; - -exports[`Storyshots Basics|Spaced col outer 1`] = ` -.emotion-0 { - background: silver; - display: inline-block; - padding: 20px; -} - -.emotion-1 { - background: hotpink; - display: inline-block; - padding: 20px; -} - -.emotion-4 { - display: inline-block; - vertical-align: inherit; - margin-left: 10px; - margin-right: 10px; -} - -.emotion-4 > * { - margin-left: 10px; - vertical-align: inherit; -} - -.emotion-4 > *:first-of-type { - margin-left: 0; -} - -
- -
- - - -
- -
-`; - -exports[`Storyshots Basics|Spaced row 1`] = ` -.emotion-4 > * { - margin-top: 10px; -} - -.emotion-4 > *:first-of-type { - margin-top: 0; -} - -.emotion-0 { - background: silver; - padding: 20px; -} - -.emotion-1 { - background: hotpink; - padding: 20px; -} - -
-
-
-
-
-
-
-
-
-`; - -exports[`Storyshots Basics|Spaced row multiply 1`] = ` -.emotion-0 { - background: silver; - padding: 20px; -} - -.emotion-1 { - background: hotpink; - padding: 20px; -} - -.emotion-4 { - margin-top: 5px; - margin-bottom: 5px; -} - -.emotion-4 > * { - margin-top: 30px; -} - -.emotion-4 > *:first-of-type { - margin-top: 0; -} - -
-
-
-
-
-
-
-
-
-`; - -exports[`Storyshots Basics|Spaced row outer 1`] = ` -.emotion-0 { - background: silver; - padding: 20px; -} - -.emotion-1 { - background: hotpink; - padding: 20px; -} - -.emotion-4 { - margin-top: 10px; - margin-bottom: 10px; -} - -.emotion-4 > * { - margin-top: 10px; -} - -.emotion-4 > *:first-of-type { - margin-top: 0; -} - -
-
-
-
-
-
-
-
-
-`; diff --git a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot b/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot deleted file mode 100644 index 94659147058..00000000000 --- a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot +++ /dev/null @@ -1,3974 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Basics|SyntaxHighlighter bash 1`] = ` -.emotion-2 { - overflow-y: auto; - height: 100%; - overflow-x: auto; - width: 100%; - position: relative; -} - -.emotion-2 code { - padding-right: 10px; -} - -.emotion-2 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-2 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.string { - color: #A31515; -} - -.emotion-2 * .token.punctuation { - color: #393A34; -} - -.emotion-2 * .token.operator { - color: #393A34; -} - -.emotion-2 * .token.url { - color: #36acaa; -} - -.emotion-2 * .token.symbol { - color: #36acaa; -} - -.emotion-2 * .token.number { - color: #36acaa; -} - -.emotion-2 * .token.boolean { - color: #36acaa; -} - -.emotion-2 * .token.variable { - color: #36acaa; -} - -.emotion-2 * .token.constant { - color: #36acaa; -} - -.emotion-2 * .token.inserted { - color: #36acaa; -} - -.emotion-2 * .token.atrule { - color: #0000ff; -} - -.emotion-2 * .token.keyword { - color: #0000ff; -} - -.emotion-2 * .token.attr-value { - color: #0000ff; -} - -.emotion-2 * .token.function { - color: #393A34; -} - -.emotion-2 * .token.deleted { - color: #9a050f; -} - -.emotion-2 * .token.important { - font-weight: bold; -} - -.emotion-2 * .token.bold { - font-weight: bold; -} - -.emotion-2 * .token.italic { - font-style: italic; -} - -.emotion-2 * .token.class-name { - color: #2B91AF; -} - -.emotion-2 * .token.tag { - color: #800000; -} - -.emotion-2 * .token.selector { - color: #800000; -} - -.emotion-2 * .token.attr-name { - color: #ff0000; -} - -.emotion-2 * .token.property { - color: #ff0000; -} - -.emotion-2 * .token.regex { - color: #ff0000; -} - -.emotion-2 * .token.entity { - color: #ff0000; -} - -.emotion-2 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-2 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-2 * .language-json .token.number { - color: #0000ff; -} - -.emotion-2 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-2 * .namespace { - opacity: 0.7; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-3 { - position: relative; - overflow: hidden; - color: #333333; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -
-
-
-
-
-
-
-
-
-
- 
-                
-                  npx npm-check-updates 
-                  
-                    '/storybook/'
-                  
-                   -u 
-                  
-                    &&
-                  
-                   
-                  
-                    npm
-                  
-                   
-                  
-                    install
-                  
-                
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`; - -exports[`Storyshots Basics|SyntaxHighlighter bordered & copy-able 1`] = ` -.emotion-5 { - position: relative; - overflow: hidden; - color: #333333; - border: 1px solid rgba(0,0,0,.1); - background: #FFFFFF; -} - -.emotion-2 { - overflow-y: auto; - height: 100%; - overflow-x: auto; - width: 100%; - position: relative; -} - -.emotion-2 code { - padding-right: 10px; -} - -.emotion-2 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-2 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.string { - color: #A31515; -} - -.emotion-2 * .token.punctuation { - color: #393A34; -} - -.emotion-2 * .token.operator { - color: #393A34; -} - -.emotion-2 * .token.url { - color: #36acaa; -} - -.emotion-2 * .token.symbol { - color: #36acaa; -} - -.emotion-2 * .token.number { - color: #36acaa; -} - -.emotion-2 * .token.boolean { - color: #36acaa; -} - -.emotion-2 * .token.variable { - color: #36acaa; -} - -.emotion-2 * .token.constant { - color: #36acaa; -} - -.emotion-2 * .token.inserted { - color: #36acaa; -} - -.emotion-2 * .token.atrule { - color: #0000ff; -} - -.emotion-2 * .token.keyword { - color: #0000ff; -} - -.emotion-2 * .token.attr-value { - color: #0000ff; -} - -.emotion-2 * .token.function { - color: #393A34; -} - -.emotion-2 * .token.deleted { - color: #9a050f; -} - -.emotion-2 * .token.important { - font-weight: bold; -} - -.emotion-2 * .token.bold { - font-weight: bold; -} - -.emotion-2 * .token.italic { - font-style: italic; -} - -.emotion-2 * .token.class-name { - color: #2B91AF; -} - -.emotion-2 * .token.tag { - color: #800000; -} - -.emotion-2 * .token.selector { - color: #800000; -} - -.emotion-2 * .token.attr-name { - color: #ff0000; -} - -.emotion-2 * .token.property { - color: #ff0000; -} - -.emotion-2 * .token.regex { - color: #ff0000; -} - -.emotion-2 * .token.entity { - color: #ff0000; -} - -.emotion-2 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-2 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-2 * .language-json .token.number { - color: #0000ff; -} - -.emotion-2 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-2 * .namespace { - opacity: 0.7; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 10px; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-4 { - position: absolute; - bottom: 0; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background: #FFFFFF; - z-index: 1; -} - -.emotion-3 { - border: 0 none; - padding: 4px 10px; - cursor: pointer; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: #333333; - background: #FFFFFF; - font-size: 12px; - line-height: 16px; - font-weight: 700; - border-top: 1px solid rgba(0,0,0,.1); - border-left: 1px solid rgba(0,0,0,.1); - margin-left: -1px; - border-radius: 4px 0 0 0; -} - -.emotion-3:not(:last-child) { - border-right: 1px solid rgba(0,0,0,.1); -} - -.emotion-3 + * { - border-left: 1px solid rgba(0,0,0,.1); - border-radius: 0; -} - -.emotion-3:focus { - box-shadow: #1EA7FD 0 -3px 0 0 inset; - outline: 0 none; -} - -
-
-
-
-
-
-
-
-
-
- 
-                
-                  
-                    import
-                  
-                   
-                  
-                    {
-                  
-                   Good
-                  
-                    ,
-                  
-                   Things 
-                  
-                    }
-                  
-                   
-                  
-                    from
-                  
-                   
-                  
-                    'life'
-                  
-                  
-                    ;
-                  
-                  
-
-
-                  
-                    const
-                  
-                   
-                  
-                    result
-                  
-                   
-                  
-                    =
-                  
-                   
-                  
-                    (
-                  
-                  
-                    )
-                  
-                   
-                  
-                    =>
-                  
-                   
-                  
-                    
-                      
-                        <
-                      
-                      
-                        Good
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    
-                      
-                        <
-                      
-                      
-                        Things
-                      
-                    
-                     
-                    
-                      />
-                    
-                  
-                  
-                    
-                      
-                        </
-                      
-                      
-                        Good
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    ;
-                  
-                  
-
-
-                  
-                    export
-                  
-                   
-                  
-                    {
-                  
-                   result 
-                  
-                    as
-                  
-                   
-                  
-                    default
-                  
-                   
-                  
-                    }
-                  
-                  
-                    ;
-                  
-                
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-`; - -exports[`Storyshots Basics|SyntaxHighlighter dark unsupported 1`] = ` -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 10px; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-2 { - overflow-y: auto; - height: 100%; - overflow-x: auto; - width: 100%; - position: relative; -} - -.emotion-2 code { - padding-right: 10px; -} - -.emotion-2 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-2 * .token.comment { - color: #7C7C7C; - font-style: italic; -} - -.emotion-2 * .token.prolog { - color: #7C7C7C; - font-style: italic; -} - -.emotion-2 * .token.doctype { - color: #7C7C7C; - font-style: italic; -} - -.emotion-2 * .token.cdata { - color: #7C7C7C; - font-style: italic; -} - -.emotion-2 * .token.string { - color: #92C379; -} - -.emotion-2 * .token.punctuation { - color: #EDEDED; -} - -.emotion-2 * .token.operator { - color: #EDEDED; -} - -.emotion-2 * .token.url { - color: #C6C5FE; -} - -.emotion-2 * .token.symbol { - color: #C6C5FE; -} - -.emotion-2 * .token.number { - color: #C6C5FE; -} - -.emotion-2 * .token.boolean { - color: #C6C5FE; -} - -.emotion-2 * .token.variable { - color: #C6C5FE; -} - -.emotion-2 * .token.constant { - color: #C6C5FE; -} - -.emotion-2 * .token.inserted { - color: #C6C5FE; -} - -.emotion-2 * .token.atrule { - color: #B474DD; -} - -.emotion-2 * .token.keyword { - color: #B474DD; -} - -.emotion-2 * .token.attr-value { - color: #B474DD; -} - -.emotion-2 * .token.function { - color: #EDEDED; -} - -.emotion-2 * .token.deleted { - color: #9a050f; -} - -.emotion-2 * .token.important { - font-weight: bold; -} - -.emotion-2 * .token.bold { - font-weight: bold; -} - -.emotion-2 * .token.italic { - font-style: italic; -} - -.emotion-2 * .token.class-name { - color: #FFFFB6; -} - -.emotion-2 * .token.tag { - color: #A8FF60; -} - -.emotion-2 * .token.selector { - color: #A8FF60; -} - -.emotion-2 * .token.attr-name { - color: #96CBFE; -} - -.emotion-2 * .token.property { - color: #96CBFE; -} - -.emotion-2 * .token.regex { - color: #96CBFE; -} - -.emotion-2 * .token.entity { - color: #96CBFE; -} - -.emotion-2 * .token.directive.tag .tag { - background: #ffff00; - color: #EDEDED; -} - -.emotion-2 * .language-json .token.boolean { - color: #B474DD; -} - -.emotion-2 * .language-json .token.number { - color: #B474DD; -} - -.emotion-2 * .language-json .token.property { - color: #FFFFB6; -} - -.emotion-2 * .namespace { - opacity: 0.7; -} - -.emotion-4 { - position: absolute; - bottom: 0; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background: #333; - z-index: 1; -} - -.emotion-3 { - border: 0 none; - padding: 4px 10px; - cursor: pointer; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: #FFFFFF; - background: #333; - font-size: 12px; - line-height: 16px; - font-weight: 700; - border-top: 1px solid rgba(255,255,255,.1); - border-left: 1px solid rgba(255,255,255,.1); - margin-left: -1px; - border-radius: 4px 0 0 0; -} - -.emotion-3:not(:last-child) { - border-right: 1px solid rgba(255,255,255,.1); -} - -.emotion-3 + * { - border-left: 1px solid rgba(255,255,255,.1); - border-radius: 0; -} - -.emotion-3:focus { - box-shadow: #1EA7FD 0 -3px 0 0 inset; - outline: 0 none; -} - -.emotion-5 { - position: relative; - overflow: hidden; - color: #FFFFFF; - border: 1px solid rgba(255,255,255,.1); - background: #333333; -} - -
-
-
-
-
-
-
-
-
-
- 
-                
-                  // A Hello World! program in C#.
-using System;
-namespace HelloWorld
-{
-  class Hello
-  {
-    static void Main()
-    {
-      Console.WriteLine("Hello World!");
-
-      // Keep the console window open in debug mode.
-      Console.WriteLine("Press any key to exit.");
-      Console.ReadKey();
-    }
-  }
-}
-                
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-`; - -exports[`Storyshots Basics|SyntaxHighlighter jsx 1`] = ` -.emotion-2 { - overflow-y: auto; - height: 100%; - overflow-x: auto; - width: 100%; - position: relative; -} - -.emotion-2 code { - padding-right: 10px; -} - -.emotion-2 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-2 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.string { - color: #A31515; -} - -.emotion-2 * .token.punctuation { - color: #393A34; -} - -.emotion-2 * .token.operator { - color: #393A34; -} - -.emotion-2 * .token.url { - color: #36acaa; -} - -.emotion-2 * .token.symbol { - color: #36acaa; -} - -.emotion-2 * .token.number { - color: #36acaa; -} - -.emotion-2 * .token.boolean { - color: #36acaa; -} - -.emotion-2 * .token.variable { - color: #36acaa; -} - -.emotion-2 * .token.constant { - color: #36acaa; -} - -.emotion-2 * .token.inserted { - color: #36acaa; -} - -.emotion-2 * .token.atrule { - color: #0000ff; -} - -.emotion-2 * .token.keyword { - color: #0000ff; -} - -.emotion-2 * .token.attr-value { - color: #0000ff; -} - -.emotion-2 * .token.function { - color: #393A34; -} - -.emotion-2 * .token.deleted { - color: #9a050f; -} - -.emotion-2 * .token.important { - font-weight: bold; -} - -.emotion-2 * .token.bold { - font-weight: bold; -} - -.emotion-2 * .token.italic { - font-style: italic; -} - -.emotion-2 * .token.class-name { - color: #2B91AF; -} - -.emotion-2 * .token.tag { - color: #800000; -} - -.emotion-2 * .token.selector { - color: #800000; -} - -.emotion-2 * .token.attr-name { - color: #ff0000; -} - -.emotion-2 * .token.property { - color: #ff0000; -} - -.emotion-2 * .token.regex { - color: #ff0000; -} - -.emotion-2 * .token.entity { - color: #ff0000; -} - -.emotion-2 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-2 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-2 * .language-json .token.number { - color: #0000ff; -} - -.emotion-2 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-2 * .namespace { - opacity: 0.7; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-3 { - position: relative; - overflow: hidden; - color: #333333; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -
-
-
-
-
-
-
-
-
-
- 
-                
-                  
-                    import
-                  
-                   
-                  
-                    {
-                  
-                   Good
-                  
-                    ,
-                  
-                   Things 
-                  
-                    }
-                  
-                   
-                  
-                    from
-                  
-                   
-                  
-                    'life'
-                  
-                  
-                    ;
-                  
-                  
-
-
-                  
-                    const
-                  
-                   
-                  
-                    result
-                  
-                   
-                  
-                    =
-                  
-                   
-                  
-                    (
-                  
-                  
-                    )
-                  
-                   
-                  
-                    =>
-                  
-                   
-                  
-                    
-                      
-                        <
-                      
-                      
-                        Good
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    
-                      
-                        <
-                      
-                      
-                        Things
-                      
-                    
-                     
-                    
-                      all
-                    
-                    
-                      
-                        =
-                      
-                      
-                        {
-                      
-                      
-                        true
-                      
-                      
-                        }
-                      
-                    
-                     
-                    
-                      />
-                    
-                  
-                  
-                    
-                      
-                        </
-                      
-                      
-                        Good
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    ;
-                  
-                  
-
-
-                  
-                    export
-                  
-                   
-                  
-                    {
-                  
-                   result 
-                  
-                    as
-                  
-                   
-                  
-                    default
-                  
-                   
-                  
-                    }
-                  
-                  
-                    ;
-                  
-                
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`; - -exports[`Storyshots Basics|SyntaxHighlighter padded 1`] = ` -.emotion-2 { - overflow-y: auto; - height: 100%; - overflow-x: auto; - width: 100%; - position: relative; -} - -.emotion-2 code { - padding-right: 10px; -} - -.emotion-2 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-2 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.string { - color: #A31515; -} - -.emotion-2 * .token.punctuation { - color: #393A34; -} - -.emotion-2 * .token.operator { - color: #393A34; -} - -.emotion-2 * .token.url { - color: #36acaa; -} - -.emotion-2 * .token.symbol { - color: #36acaa; -} - -.emotion-2 * .token.number { - color: #36acaa; -} - -.emotion-2 * .token.boolean { - color: #36acaa; -} - -.emotion-2 * .token.variable { - color: #36acaa; -} - -.emotion-2 * .token.constant { - color: #36acaa; -} - -.emotion-2 * .token.inserted { - color: #36acaa; -} - -.emotion-2 * .token.atrule { - color: #0000ff; -} - -.emotion-2 * .token.keyword { - color: #0000ff; -} - -.emotion-2 * .token.attr-value { - color: #0000ff; -} - -.emotion-2 * .token.function { - color: #393A34; -} - -.emotion-2 * .token.deleted { - color: #9a050f; -} - -.emotion-2 * .token.important { - font-weight: bold; -} - -.emotion-2 * .token.bold { - font-weight: bold; -} - -.emotion-2 * .token.italic { - font-style: italic; -} - -.emotion-2 * .token.class-name { - color: #2B91AF; -} - -.emotion-2 * .token.tag { - color: #800000; -} - -.emotion-2 * .token.selector { - color: #800000; -} - -.emotion-2 * .token.attr-name { - color: #ff0000; -} - -.emotion-2 * .token.property { - color: #ff0000; -} - -.emotion-2 * .token.regex { - color: #ff0000; -} - -.emotion-2 * .token.entity { - color: #ff0000; -} - -.emotion-2 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-2 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-2 * .language-json .token.number { - color: #0000ff; -} - -.emotion-2 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-2 * .namespace { - opacity: 0.7; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 10px; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-3 { - position: relative; - overflow: hidden; - color: #333333; -} - -
-
-
-
-
-
-
-
-
-
- 
-                
-                  
-                    import
-                  
-                   
-                  
-                    {
-                  
-                   Good
-                  
-                    ,
-                  
-                   Things 
-                  
-                    }
-                  
-                   
-                  
-                    from
-                  
-                   
-                  
-                    'life'
-                  
-                  
-                    ;
-                  
-                  
-
-
-                  
-                    const
-                  
-                   
-                  
-                    result
-                  
-                   
-                  
-                    =
-                  
-                   
-                  
-                    (
-                  
-                  
-                    )
-                  
-                   
-                  
-                    =>
-                  
-                   
-                  
-                    
-                      
-                        <
-                      
-                      
-                        Good
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    
-                      
-                        <
-                      
-                      
-                        Things
-                      
-                    
-                     
-                    
-                      />
-                    
-                  
-                  
-                    
-                      
-                        </
-                      
-                      
-                        Good
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    ;
-                  
-                  
-
-
-                  
-                    export
-                  
-                   
-                  
-                    {
-                  
-                   result 
-                  
-                    as
-                  
-                   
-                  
-                    default
-                  
-                   
-                  
-                    }
-                  
-                  
-                    ;
-                  
-                
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`; - -exports[`Storyshots Basics|SyntaxHighlighter showLineNumbers 1`] = ` -.emotion-2 { - overflow-y: auto; - height: 100%; - overflow-x: auto; - width: 100%; - position: relative; -} - -.emotion-2 code { - padding-right: 10px; -} - -.emotion-2 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-2 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.string { - color: #A31515; -} - -.emotion-2 * .token.punctuation { - color: #393A34; -} - -.emotion-2 * .token.operator { - color: #393A34; -} - -.emotion-2 * .token.url { - color: #36acaa; -} - -.emotion-2 * .token.symbol { - color: #36acaa; -} - -.emotion-2 * .token.number { - color: #36acaa; -} - -.emotion-2 * .token.boolean { - color: #36acaa; -} - -.emotion-2 * .token.variable { - color: #36acaa; -} - -.emotion-2 * .token.constant { - color: #36acaa; -} - -.emotion-2 * .token.inserted { - color: #36acaa; -} - -.emotion-2 * .token.atrule { - color: #0000ff; -} - -.emotion-2 * .token.keyword { - color: #0000ff; -} - -.emotion-2 * .token.attr-value { - color: #0000ff; -} - -.emotion-2 * .token.function { - color: #393A34; -} - -.emotion-2 * .token.deleted { - color: #9a050f; -} - -.emotion-2 * .token.important { - font-weight: bold; -} - -.emotion-2 * .token.bold { - font-weight: bold; -} - -.emotion-2 * .token.italic { - font-style: italic; -} - -.emotion-2 * .token.class-name { - color: #2B91AF; -} - -.emotion-2 * .token.tag { - color: #800000; -} - -.emotion-2 * .token.selector { - color: #800000; -} - -.emotion-2 * .token.attr-name { - color: #ff0000; -} - -.emotion-2 * .token.property { - color: #ff0000; -} - -.emotion-2 * .token.regex { - color: #ff0000; -} - -.emotion-2 * .token.entity { - color: #ff0000; -} - -.emotion-2 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-2 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-2 * .language-json .token.number { - color: #0000ff; -} - -.emotion-2 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-2 * .namespace { - opacity: 0.7; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-3 { - position: relative; - overflow: hidden; - color: #333333; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -
-
-
-
-
-
-
-
-
-
- 
-                
-                  
-                    1
-
-                  
-                  
-                    2
-
-                  
-                  
-                    3
-
-                  
-                  
-                    4
-
-                  
-                  
-                    5
-
-                  
-                
-                
-                  
-                    import
-                  
-                   
-                  
-                    {
-                  
-                   Good
-                  
-                    ,
-                  
-                   Things 
-                  
-                    }
-                  
-                   
-                  
-                    from
-                  
-                   
-                  
-                    'life'
-                  
-                  
-                    ;
-                  
-                  
-
-
-                  
-                    const
-                  
-                   
-                  
-                    result
-                  
-                   
-                  
-                    =
-                  
-                   
-                  
-                    (
-                  
-                  
-                    )
-                  
-                   
-                  
-                    =>
-                  
-                   
-                  
-                    
-                      
-                        <
-                      
-                      
-                        Good
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    
-                      
-                        <
-                      
-                      
-                        Things
-                      
-                    
-                     
-                    
-                      />
-                    
-                  
-                  
-                    
-                      
-                        </
-                      
-                      
-                        Good
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    ;
-                  
-                  
-
-
-                  
-                    export
-                  
-                   
-                  
-                    {
-                  
-                   result 
-                  
-                    as
-                  
-                   
-                  
-                    default
-                  
-                   
-                  
-                    }
-                  
-                  
-                    ;
-                  
-                
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`; - -exports[`Storyshots Basics|SyntaxHighlighter story 1`] = ` -.emotion-2 { - overflow-y: auto; - height: 100%; - overflow-x: auto; - width: 100%; - position: relative; -} - -.emotion-2 code { - padding-right: 10px; -} - -.emotion-2 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-2 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.string { - color: #A31515; -} - -.emotion-2 * .token.punctuation { - color: #393A34; -} - -.emotion-2 * .token.operator { - color: #393A34; -} - -.emotion-2 * .token.url { - color: #36acaa; -} - -.emotion-2 * .token.symbol { - color: #36acaa; -} - -.emotion-2 * .token.number { - color: #36acaa; -} - -.emotion-2 * .token.boolean { - color: #36acaa; -} - -.emotion-2 * .token.variable { - color: #36acaa; -} - -.emotion-2 * .token.constant { - color: #36acaa; -} - -.emotion-2 * .token.inserted { - color: #36acaa; -} - -.emotion-2 * .token.atrule { - color: #0000ff; -} - -.emotion-2 * .token.keyword { - color: #0000ff; -} - -.emotion-2 * .token.attr-value { - color: #0000ff; -} - -.emotion-2 * .token.function { - color: #393A34; -} - -.emotion-2 * .token.deleted { - color: #9a050f; -} - -.emotion-2 * .token.important { - font-weight: bold; -} - -.emotion-2 * .token.bold { - font-weight: bold; -} - -.emotion-2 * .token.italic { - font-style: italic; -} - -.emotion-2 * .token.class-name { - color: #2B91AF; -} - -.emotion-2 * .token.tag { - color: #800000; -} - -.emotion-2 * .token.selector { - color: #800000; -} - -.emotion-2 * .token.attr-name { - color: #ff0000; -} - -.emotion-2 * .token.property { - color: #ff0000; -} - -.emotion-2 * .token.regex { - color: #ff0000; -} - -.emotion-2 * .token.entity { - color: #ff0000; -} - -.emotion-2 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-2 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-2 * .language-json .token.number { - color: #0000ff; -} - -.emotion-2 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-2 * .namespace { - opacity: 0.7; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-3 { - position: relative; - overflow: hidden; - color: #333333; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -
-
-
-
-
-
-
-
-
-
- 
-                
-                  
-                    import
-                  
-                   React 
-                  
-                    from
-                  
-                   
-                  
-                    'react'
-                  
-                  
-                    ;
-                  
-                  
-
-                  
-                    import
-                  
-                   
-                  
-                    {
-                  
-                   storiesOf 
-                  
-                    }
-                  
-                   
-                  
-                    from
-                  
-                   
-                  
-                    '@storybook/react'
-                  
-                  
-                    ;
-                  
-                  
-
-                  
-                    import
-                  
-                   
-                  
-                    {
-                  
-                   styled 
-                  
-                    }
-                  
-                   
-                  
-                    from
-                  
-                   
-                  
-                    '@storybook/theming'
-                  
-                  
-                    ;
-                  
-                  
-
-
-                  
-                    import
-                  
-                   Heading 
-                  
-                    from
-                  
-                   
-                  
-                    './heading'
-                  
-                  
-                    ;
-                  
-                  
-
-
-                  
-                    const
-                  
-                   Holder 
-                  
-                    =
-                  
-                   styled
-                  
-                    .
-                  
-                  
-                    div
-                  
-                  
-                    (
-                  
-                  
-                    {
-                  
-                  
-  margin
-                  
-                    :
-                  
-                   
-                  
-                    10
-                  
-                  
-                    ,
-                  
-                  
-  border
-                  
-                    :
-                  
-                   
-                  
-                    '1px dashed deepskyblue'
-                  
-                  
-                    ,
-                  
-                  
-  
-                  
-                    // overflow: 'hidden',
-                  
-                  
-
-                  
-                    }
-                  
-                  
-                    )
-                  
-                  
-                    ;
-                  
-                  
-
-
-                  
-                    storiesOf
-                  
-                  
-                    (
-                  
-                  
-                    'Basics|Heading'
-                  
-                  
-                    ,
-                  
-                   module
-                  
-                    )
-                  
-                  
-                    .
-                  
-                  
-                    add
-                  
-                  
-                    (
-                  
-                  
-                    'types'
-                  
-                  
-                    ,
-                  
-                   
-                  
-                    (
-                  
-                  
-                    )
-                  
-                   
-                  
-                    =>
-                  
-                   
-                  
-                    (
-                  
-                  
-  
-                  
-                    
-                      
-                        <
-                      
-                      div
-                    
-                    
-                      >
-                    
-                  
-                  
-                    
-    
-                  
-                  
-                    
-                      
-                        <
-                      
-                      
-                        Holder
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    
-      
-                  
-                  
-                    
-                      
-                        <
-                      
-                      
-                        Heading
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    DEFAULT WITH ALL CAPS
-                  
-                  
-                    
-                      
-                        </
-                      
-                      
-                        Heading
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    
-    
-                  
-                  
-                    
-                      
-                        </
-                      
-                      
-                        Holder
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    
-    
-                  
-                  
-                    
-                      
-                        <
-                      
-                      
-                        Holder
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    
-      
-                  
-                  
-                    
-                      
-                        <
-                      
-                      
-                        Heading
-                      
-                    
-                     
-                    
-                      sub
-                    
-                    
-                      
-                        =
-                      
-                      
-                        "
-                      
-                      With a great sub
-                      
-                        "
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    THIS LONG DEFAULT WITH ALL CAPS & SUB
-                  
-                  
-                    
-                      
-                        </
-                      
-                      
-                        Heading
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    
-    
-                  
-                  
-                    
-                      
-                        </
-                      
-                      
-                        Holder
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    
-    
-                  
-                  
-                    
-                      
-                        <
-                      
-                      
-                        Holder
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    
-      
-                  
-                  
-                    
-                      
-                        <
-                      
-                      
-                        Heading
-                      
-                    
-                     
-                    
-                      type
-                    
-                    
-                      
-                        =
-                      
-                      
-                        "
-                      
-                      page
-                      
-                        "
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    page type
-                  
-                  
-                    
-                      
-                        </
-                      
-                      
-                        Heading
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    
-    
-                  
-                  
-                    
-                      
-                        </
-                      
-                      
-                        Holder
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    
-    
-                  
-                  
-                    
-                      
-                        <
-                      
-                      
-                        Holder
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    
-      
-                  
-                  
-                    
-                      
-                        <
-                      
-                      
-                        Heading
-                      
-                    
-                     
-                    
-                      type
-                    
-                    
-                      
-                        =
-                      
-                      
-                        "
-                      
-                      page
-                      
-                        "
-                      
-                    
-                     
-                    
-                      sub
-                    
-                    
-                      
-                        =
-                      
-                      
-                        "
-                      
-                      With a sub
-                      
-                        "
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    
-        page type
-      
-                  
-                  
-                    
-                      
-                        </
-                      
-                      
-                        Heading
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    
-    
-                  
-                  
-                    
-                      
-                        </
-                      
-                      
-                        Holder
-                      
-                    
-                    
-                      >
-                    
-                  
-                  
-                    
-  
-                  
-                  
-                    
-                      
-                        </
-                      
-                      div
-                    
-                    
-                      >
-                    
-                  
-                  
-
-                  
-                    )
-                  
-                  
-                    )
-                  
-                  
-                    ;
-                  
-                
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`; - -exports[`Storyshots Basics|SyntaxHighlighter unsupported 1`] = ` -.emotion-5 { - position: relative; - overflow: hidden; - color: #333333; - border: 1px solid rgba(0,0,0,.1); - background: #FFFFFF; -} - -.emotion-2 { - overflow-y: auto; - height: 100%; - overflow-x: auto; - width: 100%; - position: relative; -} - -.emotion-2 code { - padding-right: 10px; -} - -.emotion-2 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-2 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-2 * .token.string { - color: #A31515; -} - -.emotion-2 * .token.punctuation { - color: #393A34; -} - -.emotion-2 * .token.operator { - color: #393A34; -} - -.emotion-2 * .token.url { - color: #36acaa; -} - -.emotion-2 * .token.symbol { - color: #36acaa; -} - -.emotion-2 * .token.number { - color: #36acaa; -} - -.emotion-2 * .token.boolean { - color: #36acaa; -} - -.emotion-2 * .token.variable { - color: #36acaa; -} - -.emotion-2 * .token.constant { - color: #36acaa; -} - -.emotion-2 * .token.inserted { - color: #36acaa; -} - -.emotion-2 * .token.atrule { - color: #0000ff; -} - -.emotion-2 * .token.keyword { - color: #0000ff; -} - -.emotion-2 * .token.attr-value { - color: #0000ff; -} - -.emotion-2 * .token.function { - color: #393A34; -} - -.emotion-2 * .token.deleted { - color: #9a050f; -} - -.emotion-2 * .token.important { - font-weight: bold; -} - -.emotion-2 * .token.bold { - font-weight: bold; -} - -.emotion-2 * .token.italic { - font-style: italic; -} - -.emotion-2 * .token.class-name { - color: #2B91AF; -} - -.emotion-2 * .token.tag { - color: #800000; -} - -.emotion-2 * .token.selector { - color: #800000; -} - -.emotion-2 * .token.attr-name { - color: #ff0000; -} - -.emotion-2 * .token.property { - color: #ff0000; -} - -.emotion-2 * .token.regex { - color: #ff0000; -} - -.emotion-2 * .token.entity { - color: #ff0000; -} - -.emotion-2 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-2 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-2 * .language-json .token.number { - color: #0000ff; -} - -.emotion-2 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-2 * .namespace { - opacity: 0.7; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 10px; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-4 { - position: absolute; - bottom: 0; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background: #FFFFFF; - z-index: 1; -} - -.emotion-3 { - border: 0 none; - padding: 4px 10px; - cursor: pointer; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: #333333; - background: #FFFFFF; - font-size: 12px; - line-height: 16px; - font-weight: 700; - border-top: 1px solid rgba(0,0,0,.1); - border-left: 1px solid rgba(0,0,0,.1); - margin-left: -1px; - border-radius: 4px 0 0 0; -} - -.emotion-3:not(:last-child) { - border-right: 1px solid rgba(0,0,0,.1); -} - -.emotion-3 + * { - border-left: 1px solid rgba(0,0,0,.1); - border-radius: 0; -} - -.emotion-3:focus { - box-shadow: #1EA7FD 0 -3px 0 0 inset; - outline: 0 none; -} - -
-
-
-
-
-
-
-
-
-
- 
-                
-                  // A Hello World! program in C#.
-using System;
-namespace HelloWorld
-{
-  class Hello
-  {
-    static void Main()
-    {
-      Console.WriteLine("Hello World!");
-
-      // Keep the console window open in debug mode.
-      Console.WriteLine("Press any key to exit.");
-      Console.ReadKey();
-    }
-  }
-}
-                
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-`; diff --git a/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot b/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot deleted file mode 100644 index a936ac0a198..00000000000 --- a/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot +++ /dev/null @@ -1,2029 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = ` -.emotion-9 { - overflow-y: hidden; - overflow-x: auto; - width: 100%; - color: #999999; - width: 100%; - height: 40px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; - background: #FFFFFF; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - position: relative; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - height: 40px; -} - -.emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - white-space: nowrap; - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.emotion-7 > * { - margin-left: 15px; -} - -.emotion-6 { - overflow: hidden; -} - -.emotion-6:first-of-type { - margin-left: 0; -} - -.emotion-0 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: inherit; - border-bottom-color: transparent; -} - -.emotion-0:empty { - display: none; -} - -.emotion-0:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-2 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: #1EA7FD; - border-bottom-color: #1EA7FD; -} - -.emotion-2:empty { - display: none; -} - -.emotion-2:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-12 { - display: block; -} - -.emotion-11 { - display: block; - position: relative; - font-size: 13px; -} - -.emotion-10 { - display: none; -} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- CONTENT 6 -
-
-
-
-
-`; - -exports[`Storyshots Basics|Tabs stateful - no initial 1`] = ` -.emotion-9 { - overflow-y: hidden; - overflow-x: auto; - width: 100%; - color: #999999; - width: 100%; - height: 40px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; - background: #FFFFFF; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - position: relative; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - height: 40px; -} - -.emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - white-space: nowrap; - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.emotion-7 > * { - margin-left: 15px; -} - -.emotion-6 { - overflow: hidden; -} - -.emotion-6:first-of-type { - margin-left: 0; -} - -.emotion-1 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: inherit; - border-bottom-color: transparent; -} - -.emotion-1:empty { - display: none; -} - -.emotion-1:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-0 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: #1EA7FD; - border-bottom-color: #1EA7FD; -} - -.emotion-0:empty { - display: none; -} - -.emotion-0:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-12 { - display: block; -} - -.emotion-11 { - display: block; - position: relative; - font-size: 13px; -} - -.emotion-10 { - display: none; -} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- CONTENT 1 -
- -
-
- CONTENT 6 -
-
-
-
-
-`; - -exports[`Storyshots Basics|Tabs stateful - static 1`] = ` -.emotion-5 { - overflow-y: hidden; - overflow-x: auto; - width: 100%; - color: #999999; - width: 100%; - height: 40px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; - background: #FFFFFF; -} - -.emotion-4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - position: relative; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - height: 40px; -} - -.emotion-3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - white-space: nowrap; - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.emotion-3 > * { - margin-left: 15px; -} - -.emotion-2 { - overflow: hidden; -} - -.emotion-2:first-of-type { - margin-left: 0; -} - -.emotion-0 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: inherit; - border-bottom-color: transparent; -} - -.emotion-0:empty { - display: none; -} - -.emotion-0:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-1 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: #1EA7FD; - border-bottom-color: #1EA7FD; -} - -.emotion-1:empty { - display: none; -} - -.emotion-1:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-6 { - display: block; -} - -.emotion-7 { - display: block; - position: relative; - font-size: 13px; -} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- test2 is always active (but visually hidden) -
-
-
-
-
-`; - -exports[`Storyshots Basics|Tabs stateless - absolute 1`] = ` -.emotion-9 { - overflow-y: hidden; - overflow-x: auto; - width: 100%; - color: #999999; - width: 100%; - height: 40px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; - background: #FFFFFF; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - position: relative; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - height: 40px; -} - -.emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - white-space: nowrap; - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.emotion-7 > * { - margin-left: 15px; -} - -.emotion-6 { - overflow: hidden; -} - -.emotion-6:first-of-type { - margin-left: 0; -} - -.emotion-0 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: inherit; - border-bottom-color: transparent; -} - -.emotion-0:empty { - display: none; -} - -.emotion-0:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-2 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: #1EA7FD; - border-bottom-color: #1EA7FD; -} - -.emotion-2:empty { - display: none; -} - -.emotion-2:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-11 { - display: block; - position: relative; - font-size: 13px; - height: calc(100% - 40px); - position: absolute; - left: 0; - right: 0; - bottom: 0; - top: 40px; - overflow: auto; -} - -.emotion-11 > *:first-child { - position: absolute; - left: 0; - right: 0; - bottom: 0; - top: 0; - height: 100%; - overflow: auto; -} - -.emotion-10 { - display: none; -} - -.emotion-12 { - background-clip: padding-box; - border: 1px solid rgba(0,0,0,.1); - border-radius: 4px; - overflow: hidden; - width: 100%; - height: 100%; - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- CONTENT 6 -
-
-
-
-
-`; - -exports[`Storyshots Basics|Tabs stateless - bordered 1`] = ` -.emotion-9 { - overflow-y: hidden; - overflow-x: auto; - width: 100%; - color: #999999; - width: 100%; - height: 40px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; - background: #FFFFFF; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - position: relative; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - height: 40px; -} - -.emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - white-space: nowrap; - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.emotion-7 > * { - margin-left: 15px; -} - -.emotion-6 { - overflow: hidden; -} - -.emotion-6:first-of-type { - margin-left: 0; -} - -.emotion-0 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: inherit; - border-bottom-color: transparent; -} - -.emotion-0:empty { - display: none; -} - -.emotion-0:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-2 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: #1EA7FD; - border-bottom-color: #1EA7FD; -} - -.emotion-2:empty { - display: none; -} - -.emotion-2:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-11 { - display: block; - position: relative; - font-size: 13px; -} - -.emotion-10 { - display: none; -} - -.emotion-12 { - background-clip: padding-box; - border: 1px solid rgba(0,0,0,.1); - border-radius: 4px; - overflow: hidden; - display: block; -} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- CONTENT 6 -
-
-
-
-
-`; - -exports[`Storyshots Basics|Tabs stateless - empty 1`] = ` -.emotion-1 { - padding: 30px; - text-align: center; - color: #333333; - font-size: 13px; -} - -.emotion-0 { - font-weight: 700; -} - -
-
-
- Nothing found -
-
-
-`; - -exports[`Storyshots Basics|Tabs stateless - with tools 1`] = ` -.emotion-10 { - overflow-y: hidden; - overflow-x: auto; - width: 100%; - color: #999999; - width: 100%; - height: 40px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; - background: #FFFFFF; -} - -.emotion-9 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - position: relative; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - height: 40px; -} - -.emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - white-space: nowrap; - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.emotion-7 > * { - margin-left: 15px; -} - -.emotion-6 { - overflow: hidden; -} - -.emotion-6:first-of-type { - margin-left: 0; -} - -.emotion-0 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: inherit; - border-bottom-color: transparent; -} - -.emotion-0:empty { - display: none; -} - -.emotion-0:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-2 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: #1EA7FD; - border-bottom-color: #1EA7FD; -} - -.emotion-2:empty { - display: none; -} - -.emotion-2:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - white-space: nowrap; - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - margin-left: 30px; -} - -.emotion-8 > * { - margin-right: 15px; -} - -.emotion-13 { - display: block; -} - -.emotion-12 { - display: block; - position: relative; - font-size: 13px; -} - -.emotion-11 { - display: none; -} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - -
-
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- CONTENT 6 -
-
-
-
-
-`; diff --git a/lib/components/src/tooltip/__snapshots__/ListItem.stories.storyshot b/lib/components/src/tooltip/__snapshots__/ListItem.stories.storyshot deleted file mode 100644 index a65a0547e46..00000000000 --- a/lib/components/src/tooltip/__snapshots__/ListItem.stories.storyshot +++ /dev/null @@ -1,1212 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots basics|Tooltip/ListItem active icon 1`] = ` -.emotion-3 { - shape-rendering: inherit; - -webkit-transform: translate3d(0,0,0); - -ms-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); - display: block; -} - -.emotion-2 { - fill: currentColor; -} - -.emotion-5 { - font-size: 12px; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - color: rgba(51,51,51,0.5); - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - line-height: 18px; - padding: 7px 15px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.emotion-5 > * + * { - padding-left: 10px; -} - -.emotion-5:hover { - background: rgba(0,0,0,.05); -} - -.emotion-5:hover svg { - opacity: 1; -} - -.emotion-1 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: left; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.emotion-1 > * + * { - padding-left: 10px; -} - -.emotion-0 { - color: #333333; - font-weight: 400; - color: #FF4785; - font-weight: 700; -} - -.emotion-4 svg { - -webkit-transition: all 200ms ease-out; - transition: all 200ms ease-out; - opacity: 0; - height: 12px; - width: 12px; - margin: 3px 0; - vertical-align: top; -} - -.emotion-4 path { - fill: inherit; -} - -.emotion-4 svg { - opacity: 1; -} - -.emotion-4 path { - fill: #FF4785; -} - - - - - active icon - - - - - - - - -`; - -exports[`Storyshots basics|Tooltip/ListItem all 1`] = ` -@keyframes animation-0 { - 0%, 100% { - opacity: 1; - } - - 50% { - opacity: .4; - } -} - -@keyframes animation-0 { - 0%, 100% { - opacity: 1; - } - - 50% { - opacity: .4; - } -} - -@keyframes animation-0 { - 0%, 100% { - opacity: 1; - } - - 50% { - opacity: .4; - } -} - -@keyframes animation-0 { - 0%, 100% { - opacity: 1; - } - - 50% { - opacity: .4; - } -} - -@keyframes animation-0 { - 0%, 100% { - opacity: 1; - } - - 50% { - opacity: .4; - } -} - -.emotion-9 { - shape-rendering: inherit; - -webkit-transform: translate3d(0,0,0); - -ms-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); - display: block; -} - -.emotion-8 { - fill: currentColor; -} - -.emotion-2 { - font-size: 12px; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - color: rgba(51,51,51,0.5); - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - line-height: 18px; - padding: 7px 15px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.emotion-2 > * + * { - padding-left: 10px; -} - -.emotion-2:hover { - background: rgba(0,0,0,.05); -} - -.emotion-2:hover svg { - opacity: 1; -} - -.emotion-1 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: left; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.emotion-1 > * + * { - padding-left: 10px; -} - -.emotion-3 { - color: #333333; - font-weight: 400; -} - -.emotion-0 { - color: #333333; - font-weight: 400; - -webkit-animation: animation-0 1.5s ease-in-out infinite; - animation: animation-0 1.5s ease-in-out infinite; - color: transparent; - cursor: progress; -} - -.emotion-10 svg { - -webkit-transition: all 200ms ease-out; - transition: all 200ms ease-out; - opacity: 0; - height: 12px; - width: 12px; - margin: 3px 0; - vertical-align: top; -} - -.emotion-10 path { - fill: inherit; -} - -.emotion-14 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: center; -} - -.emotion-18 svg { - opacity: 1; -} - -.emotion-18 path { - fill: #FF4785; -} - -.emotion-19 { - color: #333333; - font-weight: 400; - color: #FF4785; - font-weight: 700; -} - -.emotion-20 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: center; - color: #FF4785; -} - -.emotion-22 svg { - -webkit-transition: all 200ms ease-out; - transition: all 200ms ease-out; - opacity: 0; - height: 12px; - width: 12px; - margin: 3px 0; - vertical-align: top; -} - -.emotion-22 path { - fill: inherit; -} - -.emotion-22 svg { - opacity: 1; -} - -.emotion-22 path { - fill: #FF4785; -} - -.emotion-37 { - font-size: 12px; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - color: rgba(51,51,51,0.5); - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - line-height: 18px; - padding: 7px 15px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: not-allowed; -} - -.emotion-37 > * + * { - padding-left: 10px; -} - -.emotion-37:hover { - background: rgba(0,0,0,.05); -} - -.emotion-37:hover svg { - opacity: 1; -} - -.emotion-33 { - color: #333333; - font-weight: 400; - color: rgba(51,51,51,0.3); -} - -.emotion-34 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: center; - color: #999999; -} - - -`; - -exports[`Storyshots basics|Tooltip/ListItem default 1`] = ` -.emotion-2 { - font-size: 12px; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - color: rgba(51,51,51,0.5); - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - line-height: 18px; - padding: 7px 15px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.emotion-2 > * + * { - padding-left: 10px; -} - -.emotion-2:hover { - background: rgba(0,0,0,.05); -} - -.emotion-2:hover svg { - opacity: 1; -} - -.emotion-1 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: left; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.emotion-1 > * + * { - padding-left: 10px; -} - -.emotion-0 { - color: #333333; - font-weight: 400; -} - - - - - Default - - - -`; - -exports[`Storyshots basics|Tooltip/ListItem default icon 1`] = ` -.emotion-3 { - shape-rendering: inherit; - -webkit-transform: translate3d(0,0,0); - -ms-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); - display: block; -} - -.emotion-2 { - fill: currentColor; -} - -.emotion-5 { - font-size: 12px; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - color: rgba(51,51,51,0.5); - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - line-height: 18px; - padding: 7px 15px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.emotion-5 > * + * { - padding-left: 10px; -} - -.emotion-5:hover { - background: rgba(0,0,0,.05); -} - -.emotion-5:hover svg { - opacity: 1; -} - -.emotion-1 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: left; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.emotion-1 > * + * { - padding-left: 10px; -} - -.emotion-0 { - color: #333333; - font-weight: 400; -} - -.emotion-4 svg { - -webkit-transition: all 200ms ease-out; - transition: all 200ms ease-out; - opacity: 0; - height: 12px; - width: 12px; - margin: 3px 0; - vertical-align: top; -} - -.emotion-4 path { - fill: inherit; -} - - - - - Default icon - - - - - - - - -`; - -exports[`Storyshots basics|Tooltip/ListItem disabled 1`] = ` -.emotion-3 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: left; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.emotion-3 > * + * { - padding-left: 10px; -} - -.emotion-4 svg { - -webkit-transition: all 200ms ease-out; - transition: all 200ms ease-out; - opacity: 0; - height: 12px; - width: 12px; - margin: 3px 0; - vertical-align: top; -} - -.emotion-4 path { - fill: inherit; -} - -.emotion-5 { - font-size: 12px; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - color: rgba(51,51,51,0.5); - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - line-height: 18px; - padding: 7px 15px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: not-allowed; -} - -.emotion-5 > * + * { - padding-left: 10px; -} - -.emotion-5:hover { - background: rgba(0,0,0,.05); -} - -.emotion-5:hover svg { - opacity: 1; -} - -.emotion-1 { - color: #333333; - font-weight: 400; - color: rgba(51,51,51,0.3); -} - -.emotion-2 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: center; - color: #999999; -} - - - - left - - - - disabled - - - center - - - - right - - -`; - -exports[`Storyshots basics|Tooltip/ListItem loading 1`] = ` -@keyframes animation-0 { - 0%, 100% { - opacity: 1; - } - - 50% { - opacity: .4; - } -} - -@keyframes animation-0 { - 0%, 100% { - opacity: 1; - } - - 50% { - opacity: .4; - } -} - -@keyframes animation-0 { - 0%, 100% { - opacity: 1; - } - - 50% { - opacity: .4; - } -} - -@keyframes animation-0 { - 0%, 100% { - opacity: 1; - } - - 50% { - opacity: .4; - } -} - -@keyframes animation-0 { - 0%, 100% { - opacity: 1; - } - - 50% { - opacity: .4; - } -} - -.emotion-2 { - font-size: 12px; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - color: rgba(51,51,51,0.5); - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - line-height: 18px; - padding: 7px 15px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.emotion-2 > * + * { - padding-left: 10px; -} - -.emotion-2:hover { - background: rgba(0,0,0,.05); -} - -.emotion-2:hover svg { - opacity: 1; -} - -.emotion-1 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: left; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.emotion-1 > * + * { - padding-left: 10px; -} - -.emotion-0 { - color: #333333; - font-weight: 400; - -webkit-animation: animation-0 1.5s ease-in-out infinite; - animation: animation-0 1.5s ease-in-out infinite; - color: transparent; - cursor: progress; -} - - - - - - Loading state - - - - -`; - -exports[`Storyshots basics|Tooltip/ListItem w/positions 1`] = ` -.emotion-5 { - font-size: 12px; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - color: rgba(51,51,51,0.5); - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - line-height: 18px; - padding: 7px 15px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.emotion-5 > * + * { - padding-left: 10px; -} - -.emotion-5:hover { - background: rgba(0,0,0,.05); -} - -.emotion-5:hover svg { - opacity: 1; -} - -.emotion-3 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: left; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.emotion-3 > * + * { - padding-left: 10px; -} - -.emotion-1 { - color: #333333; - font-weight: 400; -} - -.emotion-4 svg { - -webkit-transition: all 200ms ease-out; - transition: all 200ms ease-out; - opacity: 0; - height: 12px; - width: 12px; - margin: 3px 0; - vertical-align: top; -} - -.emotion-4 path { - fill: inherit; -} - -.emotion-2 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: center; -} - - - - left - - - - title - - - center - - - - right - - -`; - -exports[`Storyshots basics|Tooltip/ListItem w/positions active 1`] = ` -.emotion-5 { - font-size: 12px; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - color: rgba(51,51,51,0.5); - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - line-height: 18px; - padding: 7px 15px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.emotion-5 > * + * { - padding-left: 10px; -} - -.emotion-5:hover { - background: rgba(0,0,0,.05); -} - -.emotion-5:hover svg { - opacity: 1; -} - -.emotion-3 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: left; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.emotion-3 > * + * { - padding-left: 10px; -} - -.emotion-0 svg { - opacity: 1; -} - -.emotion-0 path { - fill: #FF4785; -} - -.emotion-1 { - color: #333333; - font-weight: 400; - color: #FF4785; - font-weight: 700; -} - -.emotion-2 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: center; - color: #FF4785; -} - -.emotion-4 svg { - -webkit-transition: all 200ms ease-out; - transition: all 200ms ease-out; - opacity: 0; - height: 12px; - width: 12px; - margin: 3px 0; - vertical-align: top; -} - -.emotion-4 path { - fill: inherit; -} - -.emotion-4 svg { - opacity: 1; -} - -.emotion-4 path { - fill: #FF4785; -} - - - - left - - - - active - - - center - - - - right - - -`; diff --git a/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot b/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot deleted file mode 100644 index baeb3ec4662..00000000000 --- a/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot +++ /dev/null @@ -1,269 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots basics/Tooltip/Tooltip basic, default 1`] = ` -.emotion-2 { - display: inline-block; - z-index: 2147483647; - margin-bottom: 10px; - margin-top: 0px; - margin-left: 0px; - margin-right: 0px; - background: rgba(255,255,255,0.95); - -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - border-radius: 8px; - font-size: 12px; -} - -.emotion-0 { - position: absolute; - border-style: solid; - margin-bottom: 0px; - margin-top: 8px; - margin-right: 8px; - margin-left: 8px; - bottom: -8px; - top: autopx; - right: autopx; - left: autopx; - border-bottom-width: 0px; - border-top-width: 8px; - border-right-width: 8px; - border-left-width: 8px; - border-top-color: rgba(255,255,255,0.95); - border-bottom-color: transparent; - border-left-color: transparent; - border-right-color: transparent; -} - -.emotion-1 { - width: 100px; - height: 100px; - font-size: 16px; - text-align: center; - line-height: 100px; -} - -
-
-
- Text -
-
-`; - -exports[`Storyshots basics/Tooltip/Tooltip basic, default, bottom 1`] = ` -.emotion-1 { - width: 100px; - height: 100px; - font-size: 16px; - text-align: center; - line-height: 100px; -} - -.emotion-2 { - display: inline-block; - z-index: 2147483647; - margin-bottom: 0px; - margin-top: 10px; - margin-left: 0px; - margin-right: 0px; - background: rgba(255,255,255,0.95); - -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - border-radius: 8px; - font-size: 12px; -} - -.emotion-0 { - position: absolute; - border-style: solid; - margin-bottom: 8px; - margin-top: 0px; - margin-right: 8px; - margin-left: 8px; - bottom: autopx; - top: -8px; - right: autopx; - left: autopx; - border-bottom-width: 8px; - border-top-width: 0px; - border-right-width: 8px; - border-left-width: 8px; - border-top-color: transparent; - border-bottom-color: rgba(255,255,255,0.95); - border-left-color: transparent; - border-right-color: transparent; -} - -
-
-
- Text -
-
-`; - -exports[`Storyshots basics/Tooltip/Tooltip basic, default, left 1`] = ` -.emotion-1 { - width: 100px; - height: 100px; - font-size: 16px; - text-align: center; - line-height: 100px; -} - -.emotion-2 { - display: inline-block; - z-index: 2147483647; - margin-bottom: 0px; - margin-top: 0px; - margin-left: 0px; - margin-right: 10px; - background: rgba(255,255,255,0.95); - -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - border-radius: 8px; - font-size: 12px; -} - -.emotion-0 { - position: absolute; - border-style: solid; - margin-bottom: 8px; - margin-top: 8px; - margin-right: 0px; - margin-left: 8px; - bottom: autopx; - top: autopx; - right: -8px; - left: autopx; - border-bottom-width: 8px; - border-top-width: 8px; - border-right-width: 0px; - border-left-width: 8px; - border-top-color: transparent; - border-bottom-color: transparent; - border-left-color: rgba(255,255,255,0.95); - border-right-color: transparent; -} - -
-
-
- Text -
-
-`; - -exports[`Storyshots basics/Tooltip/Tooltip basic, default, right 1`] = ` -.emotion-1 { - width: 100px; - height: 100px; - font-size: 16px; - text-align: center; - line-height: 100px; -} - -.emotion-2 { - display: inline-block; - z-index: 2147483647; - margin-bottom: 0px; - margin-top: 0px; - margin-left: 10px; - margin-right: 0px; - background: rgba(255,255,255,0.95); - -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - border-radius: 8px; - font-size: 12px; -} - -.emotion-0 { - position: absolute; - border-style: solid; - margin-bottom: 8px; - margin-top: 8px; - margin-right: 8px; - margin-left: 0px; - bottom: autopx; - top: autopx; - right: autopx; - left: -8px; - border-bottom-width: 8px; - border-top-width: 8px; - border-right-width: 8px; - border-left-width: 0px; - border-top-color: transparent; - border-bottom-color: transparent; - border-left-color: transparent; - border-right-color: rgba(255,255,255,0.95); -} - -
-
-
- Text -
-
-`; - -exports[`Storyshots basics/Tooltip/Tooltip no chrome 1`] = ` -.emotion-0 { - width: 100px; - height: 100px; - font-size: 16px; - text-align: center; - line-height: 100px; -} - -.emotion-1 { - display: inline-block; - z-index: 2147483647; - margin-bottom: 8px; - margin-top: 0px; - margin-left: 0px; - margin-right: 0px; -} - -
-
- Text -
-
-`; diff --git a/lib/components/src/tooltip/__snapshots__/TooltipLinkList.stories.storyshot b/lib/components/src/tooltip/__snapshots__/TooltipLinkList.stories.storyshot deleted file mode 100644 index 7a2cc780cf9..00000000000 --- a/lib/components/src/tooltip/__snapshots__/TooltipLinkList.stories.storyshot +++ /dev/null @@ -1,326 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots basics/Tooltip/TooltipLinkList links 1`] = ` -.emotion-8 { - min-width: 180px; - overflow: hidden; - border-radius: 8px; -} - -.emotion-4 { - font-size: 12px; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - color: rgba(51,51,51,0.5); - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - line-height: 18px; - padding: 7px 15px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.emotion-4 > * + * { - padding-left: 10px; -} - -.emotion-4:hover { - background: rgba(0,0,0,.05); -} - -.emotion-4:hover svg { - opacity: 1; -} - -.emotion-3 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: left; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.emotion-3 > * + * { - padding-left: 10px; -} - -.emotion-2 { - color: #333333; - font-weight: 400; -} - -.emotion-0 { - display: inline-block; - cursor: pointer; -} - -.emotion-9 { - display: inline-block; - z-index: 2147483647; - margin-bottom: 10px; - margin-top: 0px; - margin-left: 0px; - margin-right: 0px; - background: rgba(255,255,255,0.95); - -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - border-radius: 8px; - font-size: 12px; -} - -.emotion-1 { - position: absolute; - border-style: solid; - margin-bottom: 0px; - margin-top: 8px; - margin-right: 8px; - margin-left: 8px; - bottom: -8px; - top: autopx; - right: autopx; - left: autopx; - border-bottom-width: 0px; - border-top-width: 8px; - border-right-width: 8px; - border-left-width: 8px; - border-top-color: rgba(255,255,255,0.95); - border-bottom-color: transparent; - border-left-color: transparent; - border-right-color: transparent; -} - -
-
-
- Tooltip -
-
-
-
-
- - - - Link - - - - - - - Link - - - -
-
-
-`; - -exports[`Storyshots basics/Tooltip/TooltipLinkList links and callback 1`] = ` -.emotion-11 { - min-width: 180px; - overflow: hidden; - border-radius: 8px; -} - -.emotion-4 { - font-size: 12px; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - color: rgba(51,51,51,0.5); - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - line-height: 18px; - padding: 7px 15px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.emotion-4 > * + * { - padding-left: 10px; -} - -.emotion-4:hover { - background: rgba(0,0,0,.05); -} - -.emotion-4:hover svg { - opacity: 1; -} - -.emotion-3 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: left; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.emotion-3 > * + * { - padding-left: 10px; -} - -.emotion-2 { - color: #333333; - font-weight: 400; -} - -.emotion-0 { - display: inline-block; - cursor: pointer; -} - -.emotion-12 { - display: inline-block; - z-index: 2147483647; - margin-bottom: 10px; - margin-top: 0px; - margin-left: 0px; - margin-right: 0px; - background: rgba(255,255,255,0.95); - -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - border-radius: 8px; - font-size: 12px; -} - -.emotion-1 { - position: absolute; - border-style: solid; - margin-bottom: 0px; - margin-top: 8px; - margin-right: 8px; - margin-left: 8px; - bottom: -8px; - top: autopx; - right: autopx; - left: autopx; - border-bottom-width: 0px; - border-top-width: 8px; - border-right-width: 8px; - border-left-width: 8px; - border-top-color: rgba(255,255,255,0.95); - border-bottom-color: transparent; - border-left-color: transparent; - border-right-color: transparent; -} - -
-
-
- Tooltip -
-
-
-
-
- - - - Link - - - - - - - Link - - - - - - - callback - - - -
-
-
-`; diff --git a/lib/components/src/tooltip/__snapshots__/TooltipMessage.stories.storyshot b/lib/components/src/tooltip/__snapshots__/TooltipMessage.stories.storyshot deleted file mode 100644 index b38f7898aa3..00000000000 --- a/lib/components/src/tooltip/__snapshots__/TooltipMessage.stories.storyshot +++ /dev/null @@ -1,514 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots basics/Tooltip/TooltipMessage default 1`] = ` -.emotion-0 { - display: inline-block; - cursor: pointer; -} - -.emotion-6 { - display: inline-block; - z-index: 2147483647; - margin-bottom: 10px; - margin-top: 0px; - margin-left: 0px; - margin-right: 0px; - background: rgba(255,255,255,0.95); - -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - border-radius: 8px; - font-size: 12px; -} - -.emotion-1 { - position: absolute; - border-style: solid; - margin-bottom: 0px; - margin-top: 8px; - margin-right: 8px; - margin-left: 8px; - bottom: -8px; - top: autopx; - right: autopx; - left: autopx; - border-bottom-width: 0px; - border-top-width: 8px; - border-right-width: 8px; - border-left-width: 8px; - border-top-color: rgba(255,255,255,0.95); - border-bottom-color: transparent; - border-left-color: transparent; - border-right-color: transparent; -} - -.emotion-5 { - padding: 15px; - width: 280px; - box-sizing: border-box; -} - -.emotion-4 { - color: #444444; - line-height: 18px; -} - -.emotion-2 { - font-weight: 900; -} - -
-
-
- Tooltip -
-
-
-
-
-
-
- Lorem ipsum dolor sit -
- - Amet consectatur vestibulum concet durum politu coret weirom - -
-
-
-
-`; - -exports[`Storyshots basics/Tooltip/TooltipMessage minimal message 1`] = ` -.emotion-0 { - display: inline-block; - cursor: pointer; -} - -.emotion-5 { - display: inline-block; - z-index: 2147483647; - margin-bottom: 10px; - margin-top: 0px; - margin-left: 0px; - margin-right: 0px; - background: rgba(255,255,255,0.95); - -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - border-radius: 8px; - font-size: 12px; -} - -.emotion-1 { - position: absolute; - border-style: solid; - margin-bottom: 0px; - margin-top: 8px; - margin-right: 8px; - margin-left: 8px; - bottom: -8px; - top: autopx; - right: autopx; - left: autopx; - border-bottom-width: 0px; - border-top-width: 8px; - border-right-width: 8px; - border-left-width: 8px; - border-top-color: rgba(255,255,255,0.95); - border-bottom-color: transparent; - border-left-color: transparent; - border-right-color: transparent; -} - -.emotion-4 { - padding: 15px; - width: 280px; - box-sizing: border-box; -} - -.emotion-3 { - color: #444444; - line-height: 18px; -} - -
-
-
- Tooltip -
-
-
-
-
-
- - Amet consectatur vestibulum concet durum politu coret weirom - -
-
-
-
-`; - -exports[`Storyshots basics/Tooltip/TooltipMessage with link 1`] = ` -.emotion-0 { - display: inline-block; - cursor: pointer; -} - -.emotion-6 { - display: inline-block; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - -webkit-text-decoration: none; - text-decoration: none; - color: #1EA7FD; -} - -.emotion-6 svg path { - fill: #1EA7FD; -} - -.emotion-6:hover, -.emotion-6:focus { - cursor: pointer; - color: #0297f5; -} - -.emotion-6:hover svg path, -.emotion-6:focus svg path { - fill: #0297f5; -} - -.emotion-6:active { - color: #028ee6; -} - -.emotion-6:active svg path { - fill: #028ee6; -} - -.emotion-6 svg { - display: inline-block; - height: 1em; - width: 1em; - vertical-align: text-top; - position: relative; - bottom: -0.125em; - margin-right: 0.4em; -} - -.emotion-9 { - display: inline-block; - z-index: 2147483647; - margin-bottom: 10px; - margin-top: 0px; - margin-left: 0px; - margin-right: 0px; - background: rgba(255,255,255,0.95); - -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - border-radius: 8px; - font-size: 12px; -} - -.emotion-1 { - position: absolute; - border-style: solid; - margin-bottom: 0px; - margin-top: 8px; - margin-right: 8px; - margin-left: 8px; - bottom: -8px; - top: autopx; - right: autopx; - left: autopx; - border-bottom-width: 0px; - border-top-width: 8px; - border-right-width: 8px; - border-left-width: 8px; - border-top-color: rgba(255,255,255,0.95); - border-bottom-color: transparent; - border-left-color: transparent; - border-right-color: transparent; -} - -.emotion-8 { - padding: 15px; - width: 280px; - box-sizing: border-box; -} - -.emotion-4 { - color: #444444; - line-height: 18px; -} - -.emotion-2 { - font-weight: 900; -} - -.emotion-7 { - margin-top: 8px; - text-align: center; -} - -.emotion-7 > * { - margin: 0 8px; - font-weight: 900; -} - -
-
-
- Tooltip -
-
-
-
-
-
-
- Lorem ipsum dolor sit -
- - Amet consectatur vestibulum concet durum politu coret weirom - -
-
- - - Continue - - -
-
-
-
-`; - -exports[`Storyshots basics/Tooltip/TooltipMessage with links 1`] = ` -.emotion-0 { - display: inline-block; - cursor: pointer; -} - -.emotion-6 { - display: inline-block; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - -webkit-text-decoration: none; - text-decoration: none; - color: #1EA7FD; -} - -.emotion-6 svg path { - fill: #1EA7FD; -} - -.emotion-6:hover, -.emotion-6:focus { - cursor: pointer; - color: #0297f5; -} - -.emotion-6:hover svg path, -.emotion-6:focus svg path { - fill: #0297f5; -} - -.emotion-6:active { - color: #028ee6; -} - -.emotion-6:active svg path { - fill: #028ee6; -} - -.emotion-6 svg { - display: inline-block; - height: 1em; - width: 1em; - vertical-align: text-top; - position: relative; - bottom: -0.125em; - margin-right: 0.4em; -} - -.emotion-11 { - display: inline-block; - z-index: 2147483647; - margin-bottom: 10px; - margin-top: 0px; - margin-left: 0px; - margin-right: 0px; - background: rgba(255,255,255,0.95); - -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - border-radius: 8px; - font-size: 12px; -} - -.emotion-1 { - position: absolute; - border-style: solid; - margin-bottom: 0px; - margin-top: 8px; - margin-right: 8px; - margin-left: 8px; - bottom: -8px; - top: autopx; - right: autopx; - left: autopx; - border-bottom-width: 0px; - border-top-width: 8px; - border-right-width: 8px; - border-left-width: 8px; - border-top-color: rgba(255,255,255,0.95); - border-bottom-color: transparent; - border-left-color: transparent; - border-right-color: transparent; -} - -.emotion-10 { - padding: 15px; - width: 280px; - box-sizing: border-box; -} - -.emotion-4 { - color: #444444; - line-height: 18px; -} - -.emotion-2 { - font-weight: 900; -} - -.emotion-9 { - margin-top: 8px; - text-align: center; -} - -.emotion-9 > * { - margin: 0 8px; - font-weight: 900; -} - -
-
-
- Tooltip -
-
-
-
-
-
-
- Lorem ipsum dolor sit -
- - Amet consectatur vestibulum concet durum politu coret weirom - -
-
- - - Get more tips - - - - - Done - - -
-
-
-
-`; diff --git a/lib/components/src/tooltip/__snapshots__/TooltipNote.stories.storyshot b/lib/components/src/tooltip/__snapshots__/TooltipNote.stories.storyshot deleted file mode 100644 index 0eea0521232..00000000000 --- a/lib/components/src/tooltip/__snapshots__/TooltipNote.stories.storyshot +++ /dev/null @@ -1,54 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots basics/Tooltip/TooltipNote default 1`] = ` -.emotion-0 { - display: inline-block; - cursor: pointer; -} - -.emotion-2 { - display: inline-block; - z-index: 2147483647; - margin-bottom: 8px; - margin-top: 0px; - margin-left: 0px; - margin-right: 0px; -} - -.emotion-1 { - padding: 2px 6px; - line-height: 16px; - font-size: 10px; - font-weight: 700; - color: #FFFFFF; - box-shadow: 0 0 5px 0 rgba(0,0,0,0.3); - border-radius: 4px; - white-space: nowrap; - pointer-events: none; - z-index: -1; - background: rgba(0,0,0,0.4); - margin: 6px; -} - -
-
-
- Tooltip -
-
-
-
- Lorem ipsum dolor -
-
-
-`; diff --git a/lib/components/src/tooltip/__snapshots__/WithTooltip.stories.storyshot b/lib/components/src/tooltip/__snapshots__/WithTooltip.stories.storyshot deleted file mode 100644 index 5faba31ab23..00000000000 --- a/lib/components/src/tooltip/__snapshots__/WithTooltip.stories.storyshot +++ /dev/null @@ -1,448 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots basics/Tooltip/WithTooltip no chrome 1`] = ` -.emotion-2 { - display: inline-block; - cursor: pointer; -} - -.emotion-4 { - height: 300px; -} - -.emotion-3 { - width: 500px; - height: 500px; - overflow-y: scroll; - background: #eee; - position: relative; -} - -.emotion-0 { - height: 100px; -} - -.emotion-1 { - width: 200px; - height: 100px; - background-color: red; - color: white; -} - -
-
-
-
-
- Click me! -
-
-
-
-`; - -exports[`Storyshots basics/Tooltip/WithTooltip simple click 1`] = ` -.emotion-2 { - display: inline-block; - cursor: pointer; -} - -.emotion-4 { - height: 300px; -} - -.emotion-3 { - width: 500px; - height: 500px; - overflow-y: scroll; - background: #eee; - position: relative; -} - -.emotion-0 { - height: 100px; -} - -.emotion-1 { - width: 200px; - height: 100px; - background-color: red; - color: white; -} - -
-
-
-
-
- Click me! -
-
-
-
-`; - -exports[`Storyshots basics/Tooltip/WithTooltip simple click closeOnClick 1`] = ` -.emotion-2 { - display: inline-block; - cursor: pointer; -} - -.emotion-4 { - height: 300px; -} - -.emotion-3 { - width: 500px; - height: 500px; - overflow-y: scroll; - background: #eee; - position: relative; -} - -.emotion-0 { - height: 100px; -} - -.emotion-1 { - width: 200px; - height: 100px; - background-color: red; - color: white; -} - -
-
-
-
-
- Click me! -
-
-
-
-`; - -exports[`Storyshots basics/Tooltip/WithTooltip simple click start open 1`] = ` -.emotion-2 { - display: inline-block; - cursor: pointer; -} - -.emotion-8 { - display: inline-block; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - -webkit-text-decoration: none; - text-decoration: none; - color: #1EA7FD; -} - -.emotion-8 svg path { - fill: #1EA7FD; -} - -.emotion-8:hover, -.emotion-8:focus { - cursor: pointer; - color: #0297f5; -} - -.emotion-8:hover svg path, -.emotion-8:focus svg path { - fill: #0297f5; -} - -.emotion-8:active { - color: #028ee6; -} - -.emotion-8:active svg path { - fill: #028ee6; -} - -.emotion-8 svg { - display: inline-block; - height: 1em; - width: 1em; - vertical-align: text-top; - position: relative; - bottom: -0.125em; - margin-right: 0.4em; -} - -.emotion-11 { - display: inline-block; - z-index: 2147483647; - margin-bottom: 10px; - margin-top: 0px; - margin-left: 0px; - margin-right: 0px; - background: rgba(255,255,255,0.95); - -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)); - border-radius: 8px; - font-size: 12px; -} - -.emotion-3 { - position: absolute; - border-style: solid; - margin-bottom: 0px; - margin-top: 8px; - margin-right: 8px; - margin-left: 8px; - bottom: -8px; - top: autopx; - right: autopx; - left: autopx; - border-bottom-width: 0px; - border-top-width: 8px; - border-right-width: 8px; - border-left-width: 8px; - border-top-color: rgba(255,255,255,0.95); - border-bottom-color: transparent; - border-left-color: transparent; - border-right-color: transparent; -} - -.emotion-10 { - padding: 15px; - width: 280px; - box-sizing: border-box; -} - -.emotion-6 { - color: #444444; - line-height: 18px; -} - -.emotion-4 { - font-weight: 900; -} - -.emotion-9 { - margin-top: 8px; - text-align: center; -} - -.emotion-9 > * { - margin: 0 8px; - font-weight: 900; -} - -.emotion-13 { - height: 300px; -} - -.emotion-12 { - width: 500px; - height: 500px; - overflow-y: scroll; - background: #eee; - position: relative; -} - -.emotion-0 { - height: 100px; -} - -.emotion-1 { - width: 200px; - height: 100px; - background-color: red; - color: white; -} - -
-
-
-
-
- Click me! -
-
-
-
-
-
-
- Lorem ipsum dolor sit -
- - Amet consectatur vestibulum concet durum politu coret weirom - -
-
- - - Continue - - -
-
-
-
-
-`; - -exports[`Storyshots basics/Tooltip/WithTooltip simple hover 1`] = ` -.emotion-2 { - display: inline-block; - cursor: pointer; -} - -.emotion-4 { - height: 300px; -} - -.emotion-3 { - width: 500px; - height: 500px; - overflow-y: scroll; - background: #eee; - position: relative; -} - -.emotion-0 { - height: 100px; -} - -.emotion-1 { - width: 200px; - height: 100px; - background-color: red; - color: white; -} - -
-
-
-
-
- Hover me! -
-
-
-
-`; - -exports[`Storyshots basics/Tooltip/WithTooltip simple hover, functional 1`] = ` -.emotion-2 { - display: inline-block; - cursor: pointer; -} - -.emotion-4 { - height: 300px; -} - -.emotion-3 { - width: 500px; - height: 500px; - overflow-y: scroll; - background: #eee; - position: relative; -} - -.emotion-0 { - height: 100px; -} - -.emotion-1 { - width: 200px; - height: 100px; - background-color: red; - color: white; -} - -
-
-
-
-
- Hover me! -
-
-
-
-`; diff --git a/lib/components/src/typography/__snapshots__/typography.stories.storyshot b/lib/components/src/typography/__snapshots__/typography.stories.storyshot deleted file mode 100644 index 5d48136bc13..00000000000 --- a/lib/components/src/typography/__snapshots__/typography.stories.storyshot +++ /dev/null @@ -1,186 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Basics|typography all 1`] = ` -.emotion-16 { - padding: 3rem; -} - -.emotion-0 { - margin-bottom: 3rem; -} - -.emotion-15 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; -} - -.emotion-15 > * { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 40px; -} - -.emotion-10 { - font-weight: 900; -} - -.emotion-10 > * { - margin-bottom: 1rem; -} - -.emotion-1 { - font-size: 48px; -} - -.emotion-2 { - font-size: 40px; -} - -.emotion-3 { - font-size: 32px; -} - -.emotion-4 { - font-size: 28px; -} - -.emotion-6 { - font-size: 20px; -} - -.emotion-7 { - font-size: 16px; -} - -.emotion-8 { - font-size: 14px; -} - -.emotion-9 { - font-size: 12px; -} - -.emotion-14 > * { - margin-bottom: 1rem; -} - -
-
-
- - Font-family: - - "Nunito sans", Apple system font ... sans-serif -
-
- - UI text size: - - 13px -
-
- - Document/Markdown text size: - - 14px -
-
- - Code font: - - - - Operator Mono, Fira Code, Consolas ... monospace - -
-
- - Weights: - - 400(normal), 600(bold), 900(black) -
-
-
-
-
- 48 heading -
-
- 40 heading -
-
- 32 heading -
-
- 28 heading -
-
- 24 heading -
-
- 20 heading -
-
- 16 heading -
-
- 14 heading -
-
- 12 heading -
-
-
-
- 16 The quick brown fox jumps over the lazy dog -
-
- 14 The quick brown fox jumps over the lazy dog -
-
- 12 The quick brown fox jumps over the lazy dog -
-
-
-
-`; diff --git a/lib/components/src/typography/link/__snapshots__/link.stories.storyshot b/lib/components/src/typography/link/__snapshots__/link.stories.storyshot deleted file mode 100644 index d43a0dd939d..00000000000 --- a/lib/components/src/typography/link/__snapshots__/link.stories.storyshot +++ /dev/null @@ -1,664 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Basics|Link cancel w/ href 1`] = ` -.emotion-1 { - display: inline-block; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - -webkit-text-decoration: none; - text-decoration: none; - color: #1EA7FD; -} - -.emotion-1 svg path { - fill: #1EA7FD; -} - -.emotion-1:hover, -.emotion-1:focus { - cursor: pointer; - color: #0297f5; -} - -.emotion-1:hover svg path, -.emotion-1:focus svg path { - fill: #0297f5; -} - -.emotion-1:active { - color: #028ee6; -} - -.emotion-1:active svg path { - fill: #028ee6; -} - -.emotion-1 svg { - display: inline-block; - height: 1em; - width: 1em; - vertical-align: text-top; - position: relative; - bottom: -0.125em; - margin-right: 0.4em; -} - - - - Link - - -`; - -exports[`Storyshots Basics|Link cancel w/ onClick 1`] = ` -.emotion-1 { - display: inline-block; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - -webkit-text-decoration: none; - text-decoration: none; - color: #1EA7FD; -} - -.emotion-1 svg path { - fill: #1EA7FD; -} - -.emotion-1:hover, -.emotion-1:focus { - cursor: pointer; - color: #0297f5; -} - -.emotion-1:hover svg path, -.emotion-1:focus svg path { - fill: #0297f5; -} - -.emotion-1:active { - color: #028ee6; -} - -.emotion-1:active svg path { - fill: #028ee6; -} - -.emotion-1 svg { - display: inline-block; - height: 1em; - width: 1em; - vertical-align: text-top; - position: relative; - bottom: -0.125em; - margin-right: 0.4em; -} - - - - Try clicking with different mouse buttons and modifier keys (shift/ctrl/alt/cmd) - - -`; - -exports[`Storyshots Basics|Link no-cancel w/ href 1`] = ` -.emotion-1 { - display: inline-block; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - -webkit-text-decoration: none; - text-decoration: none; - color: #1EA7FD; -} - -.emotion-1 svg path { - fill: #1EA7FD; -} - -.emotion-1:hover, -.emotion-1:focus { - cursor: pointer; - color: #0297f5; -} - -.emotion-1:hover svg path, -.emotion-1:focus svg path { - fill: #0297f5; -} - -.emotion-1:active { - color: #028ee6; -} - -.emotion-1:active svg path { - fill: #028ee6; -} - -.emotion-1 svg { - display: inline-block; - height: 1em; - width: 1em; - vertical-align: text-top; - position: relative; - bottom: -0.125em; - margin-right: 0.4em; -} - - - - Link - - -`; - -exports[`Storyshots Basics|Link no-cancel w/ onClick 1`] = ` -.emotion-1 { - display: inline-block; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - -webkit-text-decoration: none; - text-decoration: none; - color: #1EA7FD; -} - -.emotion-1 svg path { - fill: #1EA7FD; -} - -.emotion-1:hover, -.emotion-1:focus { - cursor: pointer; - color: #0297f5; -} - -.emotion-1:hover svg path, -.emotion-1:focus svg path { - fill: #0297f5; -} - -.emotion-1:active { - color: #028ee6; -} - -.emotion-1:active svg path { - fill: #028ee6; -} - -.emotion-1 svg { - display: inline-block; - height: 1em; - width: 1em; - vertical-align: text-top; - position: relative; - bottom: -0.125em; - margin-right: 0.4em; -} - - - - any click will go through - - -`; - -exports[`Storyshots Basics|Link styled links 1`] = ` -.emotion-9 { - shape-rendering: inherit; - -webkit-transform: translate3d(0,0,0); - -ms-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); - display: block; -} - -.emotion-8 { - fill: currentColor; -} - -.emotion-1 { - display: inline-block; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - -webkit-text-decoration: none; - text-decoration: none; - color: #1EA7FD; -} - -.emotion-1 svg path { - fill: #1EA7FD; -} - -.emotion-1:hover, -.emotion-1:focus { - cursor: pointer; - color: #0297f5; -} - -.emotion-1:hover svg path, -.emotion-1:focus svg path { - fill: #0297f5; -} - -.emotion-1:active { - color: #028ee6; -} - -.emotion-1:active svg path { - fill: #028ee6; -} - -.emotion-1 svg { - display: inline-block; - height: 1em; - width: 1em; - vertical-align: text-top; - position: relative; - bottom: -0.125em; - margin-right: 0.4em; -} - -.emotion-3 { - display: inline-block; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - -webkit-text-decoration: none; - text-decoration: none; - color: #1EA7FD; - color: #999999; -} - -.emotion-3 svg path { - fill: #1EA7FD; -} - -.emotion-3:hover, -.emotion-3:focus { - cursor: pointer; - color: #0297f5; -} - -.emotion-3:hover svg path, -.emotion-3:focus svg path { - fill: #0297f5; -} - -.emotion-3:active { - color: #028ee6; -} - -.emotion-3:active svg path { - fill: #028ee6; -} - -.emotion-3 svg { - display: inline-block; - height: 1em; - width: 1em; - vertical-align: text-top; - position: relative; - bottom: -0.125em; - margin-right: 0.4em; -} - -.emotion-3 svg path { - fill: #999999; -} - -.emotion-3:hover { - color: #666666; -} - -.emotion-3:hover svg path { - fill: #666666; -} - -.emotion-3:active { - color: #444444; -} - -.emotion-3:active svg path { - fill: #444444; -} - -.emotion-5 { - display: inline-block; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - -webkit-text-decoration: none; - text-decoration: none; - color: #1EA7FD; - color: #666666; -} - -.emotion-5 svg path { - fill: #1EA7FD; -} - -.emotion-5:hover, -.emotion-5:focus { - cursor: pointer; - color: #0297f5; -} - -.emotion-5:hover svg path, -.emotion-5:focus svg path { - fill: #0297f5; -} - -.emotion-5:active { - color: #028ee6; -} - -.emotion-5:active svg path { - fill: #028ee6; -} - -.emotion-5 svg { - display: inline-block; - height: 1em; - width: 1em; - vertical-align: text-top; - position: relative; - bottom: -0.125em; - margin-right: 0.4em; -} - -.emotion-5 svg path { - fill: #666666; -} - -.emotion-5:hover { - color: #333333; -} - -.emotion-5:hover svg path { - fill: #333333; -} - -.emotion-5:active { - color: #999999; -} - -.emotion-5:active svg path { - fill: #999999; -} - -.emotion-7 { - display: inline-block; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - -webkit-text-decoration: none; - text-decoration: none; - color: #1EA7FD; - color: inherit; -} - -.emotion-7 svg path { - fill: #1EA7FD; -} - -.emotion-7:hover, -.emotion-7:focus { - cursor: pointer; - color: #0297f5; -} - -.emotion-7:hover svg path, -.emotion-7:focus svg path { - fill: #0297f5; -} - -.emotion-7:active { - color: #028ee6; -} - -.emotion-7:active svg path { - fill: #028ee6; -} - -.emotion-7 svg { - display: inline-block; - height: 1em; - width: 1em; - vertical-align: text-top; - position: relative; - bottom: -0.125em; - margin-right: 0.4em; -} - -.emotion-7:hover, -.emotion-7:active { - color: inherit; - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.emotion-14 svg { - height: 1em; - width: 1em; - vertical-align: middle; - position: relative; - bottom: 0; - margin-right: 0; -} - -.emotion-18 > svg:last-of-type { - height: 0.7em; - width: 0.7em; - margin-right: 0; - margin-left: 0.25em; - bottom: auto; - vertical-align: inherit; -} - -.emotion-18 svg { - height: 1em; - width: 1em; - vertical-align: middle; - position: relative; - bottom: 0; - margin-right: 0; -} - -.emotion-21 { - display: inline-block; - -webkit-transition: all 150ms ease-out; - transition: all 150ms ease-out; - -webkit-text-decoration: none; - text-decoration: none; - color: #1EA7FD; - color: #FFFFFF; -} - -.emotion-21 svg path { - fill: #1EA7FD; -} - -.emotion-21:hover, -.emotion-21:focus { - cursor: pointer; - color: #0297f5; -} - -.emotion-21:hover svg path, -.emotion-21:focus svg path { - fill: #0297f5; -} - -.emotion-21:active { - color: #028ee6; -} - -.emotion-21:active svg path { - fill: #028ee6; -} - -.emotion-21 svg { - display: inline-block; - height: 1em; - width: 1em; - vertical-align: text-top; - position: relative; - bottom: -0.125em; - margin-right: 0.4em; -} - -.emotion-21 svg path { - fill: #FFFFFF; -} - -.emotion-21:hover { - color: #F8F8F8; -} - -.emotion-21:hover svg path { - fill: #F8F8F8; -} - -.emotion-21:active { - color: #F3F3F3; -} - -.emotion-21:active svg path { - fill: #F3F3F3; -} - - -`; diff --git a/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot b/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot deleted file mode 100644 index 8d1cebbbd65..00000000000 --- a/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot +++ /dev/null @@ -1,3221 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots UI|Layout/Desktop bottom Panel 1`] = ` -.emotion-0 { - z-index: 10; - position: absolute; - top: 0; - left: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: rgba(0,0,0,.1); - overflow: hidden; - -webkit-transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear; - transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear; - cursor: col-resize; - height: 100%; - width: 10px; - margin-left: 0; - background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%); - background-size: 50px 100%; - background-position: 10px 50%; - background-repeat: no-repeat; -} - -.emotion-0:hover { - color: #1EA7FD; -} - -.emotion-0:hover { - background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%); - background-size: 50px 100%; - background-position: 0 50%; - background-repeat: no-repeat; -} - -.emotion-3 { - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 1; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; - transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; -} - -.emotion-2 { - background: hotpink; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-5 { - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 1; - z-index: 9; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; - transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; -} - -.emotion-8 { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: #FFFFFF; - border-radius: 4px; - overflow: hidden; - box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1); -} - -.emotion-4 { - background: deepskyblue; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-6 { - background: orangered; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-1 { - z-index: 10; - position: absolute; - top: 0; - left: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: rgba(0,0,0,.1); - overflow: hidden; - -webkit-transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear; - transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear; - cursor: row-resize; - height: 10px; - width: 100%; - margin-top: 0; - background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%); - background-size: 100% 50px; - background-position: 50% 10px; - background-repeat: no-repeat; -} - -.emotion-1:hover { - color: #1EA7FD; -} - -.emotion-1:hover { - background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%); - background-size: 100% 50px; - background-position: 50% 0; - background-repeat: no-repeat; -} - -.emotion-7 { - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 1; - border-top: 1px solid rgba(0,0,0,.1); - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; - transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; -} - -
-
-
-
-
-

- 1 -

- 
-        {
-  "debug": {
-    "animate": true,
-    "hidden": false,
-    "position": {
-      "height": 768,
-      "left": 0,
-      "top": 0,
-      "width": 210
-    }
-  }
-}
-
-
-
-
-
-
-
-

- 1 -

- 
-            {
-  "id": "main",
-  "debug": {
-    "animate": true,
-    "isFullscreen": false,
-    "position": {
-      "height": 451,
-      "left": 0,
-      "top": 0,
-      "width": 804
-    }
-  }
-}
-
-
-
-
-
-

- 1 -

- 
-            {
-  "debug": {
-    "animate": true,
-    "align": "bottom",
-    "hidden": false,
-    "position": {
-      "height": 297,
-      "left": 0,
-      "top": 451,
-      "width": 804
-    }
-  }
-}
-
-
-
-
-
-
-`; - -exports[`Storyshots UI|Layout/Desktop default 1`] = ` -.emotion-0 { - z-index: 10; - position: absolute; - top: 0; - left: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: rgba(0,0,0,.1); - overflow: hidden; - -webkit-transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear; - transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear; - cursor: col-resize; - height: 100%; - width: 10px; - margin-left: 0; - background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%); - background-size: 50px 100%; - background-position: 10px 50%; - background-repeat: no-repeat; -} - -.emotion-0:hover { - color: #1EA7FD; -} - -.emotion-0:hover { - background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%); - background-size: 50px 100%; - background-position: 0 50%; - background-repeat: no-repeat; -} - -.emotion-3 { - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 1; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; - transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; -} - -.emotion-2 { - background: hotpink; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-5 { - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 1; - z-index: 9; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; - transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; -} - -.emotion-8 { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: #FFFFFF; - border-radius: 4px; - overflow: hidden; - box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1); -} - -.emotion-4 { - background: deepskyblue; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-7 { - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 1; - border-left: 1px solid rgba(0,0,0,.1); - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; - transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; -} - -.emotion-6 { - background: orangered; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -
-
-
-
-
-

- 1 -

- 
-        {
-  "debug": {
-    "animate": true,
-    "hidden": false,
-    "position": {
-      "height": 768,
-      "left": 0,
-      "top": 0,
-      "width": 210
-    }
-  }
-}
-
-
-
-
-
-
-
-

- 1 -

- 
-            {
-  "id": "main",
-  "debug": {
-    "animate": true,
-    "isFullscreen": false,
-    "position": {
-      "height": 748,
-      "left": 0,
-      "top": 0,
-      "width": 414
-    }
-  }
-}
-
-
-
-
-
-

- 1 -

- 
-            {
-  "debug": {
-    "animate": true,
-    "align": "right",
-    "hidden": false,
-    "position": {
-      "height": 748,
-      "left": 414,
-      "top": 0,
-      "width": 390
-    }
-  }
-}
-
-
-
-
-
-
-`; - -exports[`Storyshots UI|Layout/Desktop full 1`] = ` -.emotion-1 { - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 1; - z-index: 9; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; - transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; -} - -.emotion-0 { - background: deepskyblue; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-3 { - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 1; - border-left: 1px solid rgba(0,0,0,.1); - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; - transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; -} - -.emotion-2 { - background: orangered; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-4 { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - box-shadow: none; - border-radius: 0; -} - -
-
-
-
-
-

- 1 -

- 
-            {
-  "id": "main",
-  "debug": {
-    "animate": true,
-    "isFullscreen": true,
-    "position": {}
-  }
-}
-
-
-
-
-
-

- 1 -

- 
-            {
-  "debug": {
-    "animate": true,
-    "align": "right",
-    "hidden": true,
-    "position": {
-      "height": 748,
-      "left": 614,
-      "top": 0,
-      "width": 390
-    }
-  }
-}
-
-
-
-
-
-
-`; - -exports[`Storyshots UI|Layout/Desktop no Nav 1`] = ` -.emotion-0 { - z-index: 10; - position: absolute; - top: 0; - left: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: rgba(0,0,0,.1); - overflow: hidden; - -webkit-transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear; - transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear; - cursor: col-resize; - height: 100%; - width: 10px; - margin-left: 0; - background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%); - background-size: 50px 100%; - background-position: 10px 50%; - background-repeat: no-repeat; -} - -.emotion-0:hover { - color: #1EA7FD; -} - -.emotion-0:hover { - background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%); - background-size: 50px 100%; - background-position: 0 50%; - background-repeat: no-repeat; -} - -.emotion-2 { - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 1; - z-index: 9; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; - transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; -} - -.emotion-5 { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: #FFFFFF; - border-radius: 4px; - overflow: hidden; - box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1); -} - -.emotion-1 { - background: deepskyblue; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-4 { - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 1; - border-left: 1px solid rgba(0,0,0,.1); - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; - transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; -} - -.emotion-3 { - background: orangered; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -
-
-
-
-
-
-

- 1 -

- 
-            {
-  "id": "main",
-  "debug": {
-    "animate": true,
-    "isFullscreen": false,
-    "position": {
-      "height": 748,
-      "left": 0,
-      "top": 0,
-      "width": 614
-    }
-  }
-}
-
-
-
-
-
-

- 1 -

- 
-            {
-  "debug": {
-    "animate": true,
-    "align": "right",
-    "hidden": false,
-    "position": {
-      "height": 748,
-      "left": 614,
-      "top": 0,
-      "width": 390
-    }
-  }
-}
-
-
-
-
-
-
-`; - -exports[`Storyshots UI|Layout/Desktop no Panel 1`] = ` -.emotion-0 { - z-index: 10; - position: absolute; - top: 0; - left: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: rgba(0,0,0,.1); - overflow: hidden; - -webkit-transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear; - transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear; - cursor: col-resize; - height: 100%; - width: 10px; - margin-left: 0; - background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%); - background-size: 50px 100%; - background-position: 10px 50%; - background-repeat: no-repeat; -} - -.emotion-0:hover { - color: #1EA7FD; -} - -.emotion-0:hover { - background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%); - background-size: 50px 100%; - background-position: 0 50%; - background-repeat: no-repeat; -} - -.emotion-2 { - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 1; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; - transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; -} - -.emotion-1 { - background: hotpink; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-4 { - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 1; - z-index: 9; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; - transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; -} - -.emotion-7 { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: #FFFFFF; - border-radius: 4px; - overflow: hidden; - box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1); -} - -.emotion-3 { - background: deepskyblue; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-6 { - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 1; - border-left: 1px solid rgba(0,0,0,.1); - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; - transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; -} - -.emotion-5 { - background: orangered; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -
-
-
-
-

- 1 -

- 
-        {
-  "debug": {
-    "animate": true,
-    "hidden": false,
-    "position": {
-      "height": 768,
-      "left": 0,
-      "top": 0,
-      "width": 210
-    }
-  }
-}
-
-
-
-
-
-
-
-

- 1 -

- 
-            {
-  "id": "main",
-  "debug": {
-    "animate": true,
-    "isFullscreen": false,
-    "position": {}
-  }
-}
-
-
-
-
-
-

- 1 -

- 
-            {
-  "debug": {
-    "animate": true,
-    "align": "right",
-    "hidden": true,
-    "position": {
-      "height": 748,
-      "left": 414,
-      "top": 0,
-      "width": 390
-    }
-  }
-}
-
-
-
-
-
-
-`; - -exports[`Storyshots UI|Layout/Desktop no Panel, no Nav 1`] = ` -.emotion-1 { - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 1; - z-index: 9; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; - transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; -} - -.emotion-0 { - background: deepskyblue; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-3 { - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 1; - border-left: 1px solid rgba(0,0,0,.1); - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; - transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; -} - -.emotion-2 { - background: orangered; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-4 { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - box-shadow: none; - border-radius: 0; -} - -
-
-
-
-
-

- 1 -

- 
-            {
-  "id": "main",
-  "debug": {
-    "animate": true,
-    "isFullscreen": true,
-    "position": {}
-  }
-}
-
-
-
-
-
-

- 1 -

- 
-            {
-  "debug": {
-    "animate": true,
-    "align": "right",
-    "hidden": true,
-    "position": {
-      "height": 748,
-      "left": 614,
-      "top": 0,
-      "width": 390
-    }
-  }
-}
-
-
-
-
-
-
-`; - -exports[`Storyshots UI|Layout/Desktop page 1`] = ` -.emotion-0 { - z-index: 10; - position: absolute; - top: 0; - left: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: rgba(0,0,0,.1); - overflow: hidden; - -webkit-transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear; - transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear; - cursor: col-resize; - height: 100%; - width: 10px; - margin-left: 0; - background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%); - background-size: 50px 100%; - background-position: 10px 50%; - background-repeat: no-repeat; -} - -.emotion-0:hover { - color: #1EA7FD; -} - -.emotion-0:hover { - background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%); - background-size: 50px 100%; - background-position: 0 50%; - background-repeat: no-repeat; -} - -.emotion-2 { - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 1; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; - transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; -} - -.emotion-1 { - background: hotpink; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-9 { - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 1; - z-index: 9; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; - transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; -} - -.emotion-8 { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: #FFFFFF; - border-radius: 4px; - overflow: hidden; - box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1); -} - -.emotion-3 { - background: deepskyblue; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-5 { - background: orangered; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-4 { - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0; - z-index: 9; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; - transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; -} - -.emotion-6 { - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0; - border-left: 1px solid rgba(0,0,0,.1); - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out; - -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; - transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out; -} - -.emotion-7 { - background: cyan; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -
-
-
-
-

- 1 -

- 
-        {
-  "debug": {
-    "animate": true,
-    "hidden": false,
-    "position": {
-      "height": 768,
-      "left": 0,
-      "top": 0,
-      "width": 210
-    }
-  }
-}
-
-
-
-
-
- - -
-

- 1 -

- 
-          {}
-
-
-
-
-
-`; - -exports[`Storyshots UI|Layout/Mobile initial 0 1`] = ` -.emotion-8 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: inherit; - border-bottom-color: transparent; -} - -.emotion-8:empty { - display: none; -} - -.emotion-8:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-7 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: #1EA7FD; - border-bottom-color: #1EA7FD; -} - -.emotion-7:empty { - display: none; -} - -.emotion-7:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-0 { - background: hotpink; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-2 { - background: deepskyblue; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-4 { - background: orangered; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-11 { - position: fixed; - left: 0; - top: 0; - width: 100vw; - height: 100vh; - overflow: hidden; -} - -.emotion-6 { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: calc(100% - 40px); -} - -.emotion-1 { - -webkit-transition: -webkit-transform .2s ease; - -webkit-transition: transform .2s ease; - transition: transform .2s ease; - position: absolute; - top: 0; - height: 100%; - overflow: auto; - background: #FFFFFF; - width: 80vw; - -webkit-transform: translateX(-80vw); - -ms-transform: translateX(-80vw); - transform: translateX(-80vw); - left: 0; - -webkit-transform: translateX(-0px); - -ms-transform: translateX(-0px); - transform: translateX(-0px); -} - -.emotion-1:nth-of-type(1) { - border-right: 1px solid rgba(0,0,0,.1); -} - -.emotion-1:nth-of-type(3) { - border-left: 1px solid rgba(0,0,0,.1); -} - -.emotion-3 { - -webkit-transition: -webkit-transform .2s ease; - -webkit-transition: transform .2s ease; - transition: transform .2s ease; - position: absolute; - top: 0; - height: 100%; - overflow: auto; - background: #FFFFFF; - width: 100%; - -webkit-transform: translateX(0) scale(1); - -ms-transform: translateX(0) scale(1); - transform: translateX(0) scale(1); - left: 0; - -webkit-transform: translateX(40vw) translateY(-42.5vh) translateY(40px) scale(0.2); - -ms-transform: translateX(40vw) translateY(-42.5vh) translateY(40px) scale(0.2); - transform: translateX(40vw) translateY(-42.5vh) translateY(40px) scale(0.2); -} - -.emotion-3:nth-of-type(1) { - border-right: 1px solid rgba(0,0,0,.1); -} - -.emotion-3:nth-of-type(3) { - border-left: 1px solid rgba(0,0,0,.1); -} - -.emotion-5 { - -webkit-transition: -webkit-transform .2s ease; - -webkit-transition: transform .2s ease; - transition: transform .2s ease; - position: absolute; - top: 0; - height: 100%; - overflow: auto; - background: #FFFFFF; - width: 80vw; - -webkit-transform: translateX(80vw); - -ms-transform: translateX(80vw); - transform: translateX(80vw); - right: 0; -} - -.emotion-5:nth-of-type(1) { - border-right: 1px solid rgba(0,0,0,.1); -} - -.emotion-5:nth-of-type(3) { - border-left: 1px solid rgba(0,0,0,.1); -} - -.emotion-10 { - position: fixed; - bottom: 0; - left: 0; - width: 100vw; - height: 40px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1); - background: #FFFFFF; -} - -.emotion-10 > * { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; -} - -
-
-
-
-

- 1 -

- 
-          {}
-
-
-
-
-
-
-
-

- 1 -

- 
-              {
-  "id": "main",
-  "viewMode": "story",
-  "debug": {
-    "initialActive": 0
-  }
-}
-
-
-
-
-
-
-
-

- 1 -

- 
-          {
-  "hidden": false
-}
-
-
-
-
- -
-`; - -exports[`Storyshots UI|Layout/Mobile initial 1 1`] = ` -.emotion-7 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: inherit; - border-bottom-color: transparent; -} - -.emotion-7:empty { - display: none; -} - -.emotion-7:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-8 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: #1EA7FD; - border-bottom-color: #1EA7FD; -} - -.emotion-8:empty { - display: none; -} - -.emotion-8:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-0 { - background: hotpink; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-2 { - background: deepskyblue; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-4 { - background: orangered; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-11 { - position: fixed; - left: 0; - top: 0; - width: 100vw; - height: 100vh; - overflow: hidden; -} - -.emotion-6 { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: calc(100% - 40px); -} - -.emotion-5 { - -webkit-transition: -webkit-transform .2s ease; - -webkit-transition: transform .2s ease; - transition: transform .2s ease; - position: absolute; - top: 0; - height: 100%; - overflow: auto; - background: #FFFFFF; - width: 80vw; - -webkit-transform: translateX(80vw); - -ms-transform: translateX(80vw); - transform: translateX(80vw); - right: 0; -} - -.emotion-5:nth-of-type(1) { - border-right: 1px solid rgba(0,0,0,.1); -} - -.emotion-5:nth-of-type(3) { - border-left: 1px solid rgba(0,0,0,.1); -} - -.emotion-10 { - position: fixed; - bottom: 0; - left: 0; - width: 100vw; - height: 40px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1); - background: #FFFFFF; -} - -.emotion-10 > * { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; -} - -.emotion-1 { - -webkit-transition: -webkit-transform .2s ease; - -webkit-transition: transform .2s ease; - transition: transform .2s ease; - position: absolute; - top: 0; - height: 100%; - overflow: auto; - background: #FFFFFF; - width: 80vw; - -webkit-transform: translateX(-80vw); - -ms-transform: translateX(-80vw); - transform: translateX(-80vw); - left: 0; -} - -.emotion-1:nth-of-type(1) { - border-right: 1px solid rgba(0,0,0,.1); -} - -.emotion-1:nth-of-type(3) { - border-left: 1px solid rgba(0,0,0,.1); -} - -.emotion-3 { - -webkit-transition: -webkit-transform .2s ease; - -webkit-transition: transform .2s ease; - transition: transform .2s ease; - position: absolute; - top: 0; - height: 100%; - overflow: auto; - background: #FFFFFF; - width: 100%; - -webkit-transform: translateX(0) scale(1); - -ms-transform: translateX(0) scale(1); - transform: translateX(0) scale(1); - left: 0; -} - -.emotion-3:nth-of-type(1) { - border-right: 1px solid rgba(0,0,0,.1); -} - -.emotion-3:nth-of-type(3) { - border-left: 1px solid rgba(0,0,0,.1); -} - -
-
-
-
-

- 1 -

- 
-          {}
-
-
-
-
-
-
-
-

- 1 -

- 
-              {
-  "id": "main",
-  "viewMode": "story",
-  "debug": {
-    "initialActive": 1
-  }
-}
-
-
-
-
-
-
-
-

- 1 -

- 
-          {
-  "hidden": false
-}
-
-
-
-
- -
-`; - -exports[`Storyshots UI|Layout/Mobile initial 2 1`] = ` -.emotion-7 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: inherit; - border-bottom-color: transparent; -} - -.emotion-7:empty { - display: none; -} - -.emotion-7:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-9 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: #1EA7FD; - border-bottom-color: #1EA7FD; -} - -.emotion-9:empty { - display: none; -} - -.emotion-9:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-0 { - background: hotpink; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-2 { - background: deepskyblue; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-4 { - background: orangered; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-11 { - position: fixed; - left: 0; - top: 0; - width: 100vw; - height: 100vh; - overflow: hidden; -} - -.emotion-6 { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: calc(100% - 40px); -} - -.emotion-10 { - position: fixed; - bottom: 0; - left: 0; - width: 100vw; - height: 40px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1); - background: #FFFFFF; -} - -.emotion-10 > * { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; -} - -.emotion-1 { - -webkit-transition: -webkit-transform .2s ease; - -webkit-transition: transform .2s ease; - transition: transform .2s ease; - position: absolute; - top: 0; - height: 100%; - overflow: auto; - background: #FFFFFF; - width: 80vw; - -webkit-transform: translateX(-80vw); - -ms-transform: translateX(-80vw); - transform: translateX(-80vw); - left: 0; -} - -.emotion-1:nth-of-type(1) { - border-right: 1px solid rgba(0,0,0,.1); -} - -.emotion-1:nth-of-type(3) { - border-left: 1px solid rgba(0,0,0,.1); -} - -.emotion-3 { - -webkit-transition: -webkit-transform .2s ease; - -webkit-transition: transform .2s ease; - transition: transform .2s ease; - position: absolute; - top: 0; - height: 100%; - overflow: auto; - background: #FFFFFF; - width: 100%; - -webkit-transform: translateX(0) scale(1); - -ms-transform: translateX(0) scale(1); - transform: translateX(0) scale(1); - left: 0; - -webkit-transform: translateX(-40vw) translateY(-42.5vh) translateY(40px) scale(0.2); - -ms-transform: translateX(-40vw) translateY(-42.5vh) translateY(40px) scale(0.2); - transform: translateX(-40vw) translateY(-42.5vh) translateY(40px) scale(0.2); -} - -.emotion-3:nth-of-type(1) { - border-right: 1px solid rgba(0,0,0,.1); -} - -.emotion-3:nth-of-type(3) { - border-left: 1px solid rgba(0,0,0,.1); -} - -.emotion-5 { - -webkit-transition: -webkit-transform .2s ease; - -webkit-transition: transform .2s ease; - transition: transform .2s ease; - position: absolute; - top: 0; - height: 100%; - overflow: auto; - background: #FFFFFF; - width: 80vw; - -webkit-transform: translateX(80vw); - -ms-transform: translateX(80vw); - transform: translateX(80vw); - right: 0; - -webkit-transform: translateX(0px); - -ms-transform: translateX(0px); - transform: translateX(0px); -} - -.emotion-5:nth-of-type(1) { - border-right: 1px solid rgba(0,0,0,.1); -} - -.emotion-5:nth-of-type(3) { - border-left: 1px solid rgba(0,0,0,.1); -} - -
-
-
-
-

- 1 -

- 
-          {}
-
-
-
-
-
-
-
-

- 1 -

- 
-              {
-  "id": "main",
-  "viewMode": "story",
-  "debug": {
-    "initialActive": 2
-  }
-}
-
-
-
-
-
-
-
-

- 1 -

- 
-          {
-  "hidden": false
-}
-
-
-
-
- -
-`; - -exports[`Storyshots UI|Layout/Mobile page 1`] = ` -.emotion-8 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: inherit; - border-bottom-color: transparent; -} - -.emotion-8:empty { - display: none; -} - -.emotion-8:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-9 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: #1EA7FD; - border-bottom-color: #1EA7FD; -} - -.emotion-9:empty { - display: none; -} - -.emotion-9:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-0 { - background: hotpink; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-2 { - background: deepskyblue; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-5 { - background: orangered; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-3 { - background: cyan; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; -} - -.emotion-12 { - position: fixed; - left: 0; - top: 0; - width: 100vw; - height: 100vh; - overflow: hidden; -} - -.emotion-7 { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: calc(100% - 40px); -} - -.emotion-6 { - -webkit-transition: -webkit-transform .2s ease; - -webkit-transition: transform .2s ease; - transition: transform .2s ease; - position: absolute; - top: 0; - height: 100%; - overflow: auto; - background: #FFFFFF; - width: 80vw; - -webkit-transform: translateX(80vw); - -ms-transform: translateX(80vw); - transform: translateX(80vw); - right: 0; -} - -.emotion-6:nth-of-type(1) { - border-right: 1px solid rgba(0,0,0,.1); -} - -.emotion-6:nth-of-type(3) { - border-left: 1px solid rgba(0,0,0,.1); -} - -.emotion-11 { - position: fixed; - bottom: 0; - left: 0; - width: 100vw; - height: 40px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1); - background: #FFFFFF; -} - -.emotion-11 > * { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; -} - -.emotion-1 { - -webkit-transition: -webkit-transform .2s ease; - -webkit-transition: transform .2s ease; - transition: transform .2s ease; - position: absolute; - top: 0; - height: 100%; - overflow: auto; - background: #FFFFFF; - width: 80vw; - -webkit-transform: translateX(-80vw); - -ms-transform: translateX(-80vw); - transform: translateX(-80vw); - left: 0; -} - -.emotion-1:nth-of-type(1) { - border-right: 1px solid rgba(0,0,0,.1); -} - -.emotion-1:nth-of-type(3) { - border-left: 1px solid rgba(0,0,0,.1); -} - -.emotion-4 { - -webkit-transition: -webkit-transform .2s ease; - -webkit-transition: transform .2s ease; - transition: transform .2s ease; - position: absolute; - top: 0; - height: 100%; - overflow: auto; - background: #FFFFFF; - width: 100%; - -webkit-transform: translateX(0) scale(1); - -ms-transform: translateX(0) scale(1); - transform: translateX(0) scale(1); - left: 0; -} - -.emotion-4:nth-of-type(1) { - border-right: 1px solid rgba(0,0,0,.1); -} - -.emotion-4:nth-of-type(3) { - border-left: 1px solid rgba(0,0,0,.1); -} - -
-
-
-
-

- 1 -

- 
-          {}
-
-
-
-
-
-
-
-

- 1 -

- 
-              {
-  "id": "main",
-  "viewMode": "settings",
-  "debug": {
-    "initialActive": 1
-  }
-}
-
-
-
-
-

- 1 -

- 
-            {}
-
-
-
-
-
-
-

- 1 -

- 
-          {
-  "hidden": false
-}
-
-
-
-
- -
-`; diff --git a/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot b/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot deleted file mode 100644 index e47ade3cbf0..00000000000 --- a/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot +++ /dev/null @@ -1,394 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots UI|Panel default 1`] = ` -.emotion-14 { - width: 100%; - height: 100%; - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.emotion-12 { - overflow-y: hidden; - overflow-x: auto; - width: 100%; - color: #999999; - width: 100%; - height: 40px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; - background: #FFFFFF; -} - -.emotion-11 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - position: relative; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - height: 40px; -} - -.emotion-3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - white-space: nowrap; - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.emotion-3 > * { - margin-left: 15px; -} - -.emotion-2 { - overflow: hidden; -} - -.emotion-2:first-of-type { - margin-left: 0; -} - -.emotion-0 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: inherit; - border-bottom-color: transparent; -} - -.emotion-0:empty { - display: none; -} - -.emotion-0:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-1 { - white-space: normal; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - overflow: hidden; - vertical-align: top; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - padding: 0 15px; - text-transform: capitalize; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; - height: 40px; - line-height: 12px; - cursor: pointer; - background: transparent; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - font-weight: bold; - font-size: 13px; - color: #1EA7FD; - border-bottom-color: #1EA7FD; -} - -.emotion-1:empty { - display: none; -} - -.emotion-1:focus { - outline: 0 none; - border-bottom-color: #1EA7FD; -} - -.emotion-10 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - white-space: nowrap; - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - margin-left: 30px; -} - -.emotion-10 > * { - margin-right: 15px; -} - -.emotion-6 { - height: 40px; - background: none; - color: inherit; - padding: 0; - cursor: pointer; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; -} - -.emotion-6:hover, -.emotion-6:focus { - outline: 0 none; - color: #1EA7FD; -} - -.emotion-6 > svg { - width: 15px; -} - -@media (max-width:599px) { - .emotion-6 { - display: none; - } -} - -.emotion-5 { - shape-rendering: inherit; - -webkit-transform: translate3d(0,0,0); - -ms-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); - display: block; -} - -.emotion-4 { - fill: currentColor; -} - -.emotion-13 { - display: block; - position: relative; - font-size: 13px; - height: calc(100% - 40px); - position: absolute; - left: 0; - right: 0; - bottom: 0; - top: 40px; - overflow: auto; -} - -.emotion-13 > *:first-child { - position: absolute; - left: 0; - right: 0; - bottom: 0; - top: 0; - height: 100%; - overflow: auto; -} - -
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- TEST 2 -
-
-
-`; - -exports[`Storyshots UI|Panel no panels 1`] = ` -.emotion-1 { - padding: 30px; - text-align: center; - color: #333333; - font-size: 13px; -} - -.emotion-0 { - font-weight: 700; -} - -
-
- Nothing found -
-
-`; diff --git a/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot b/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot deleted file mode 100644 index 728662d428f..00000000000 --- a/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot +++ /dev/null @@ -1,800 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots UI|Preview/Preview no tabs 1`] = ` -Array [ - .emotion-25 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - position: relative; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - height: 40px; -} - -.emotion-13 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - white-space: nowrap; - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.emotion-13 > * { - margin-left: 15px; -} - -.emotion-24 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - white-space: nowrap; - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - margin-left: 30px; -} - -.emotion-24 > * { - margin-right: 15px; -} - -.emotion-1 { - shape-rendering: inherit; - -webkit-transform: translate3d(0,0,0); - -ms-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); - display: block; -} - -.emotion-0 { - fill: currentColor; -} - -.emotion-26 { - overflow-y: hidden; - overflow-x: auto; - width: 100%; - color: #999999; - width: 100%; - height: 40px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; - background: #FFFFFF; - position: absolute; - left: 0; - right: 0; - top: 0; - -webkit-transition: -webkit-transform .2s linear; - -webkit-transition: transform .2s linear; - transition: transform .2s linear; - -webkit-tranform: translateY(0px); - tranform: translateY(0px); -} - -.emotion-2 { - height: 40px; - background: none; - color: inherit; - padding: 0; - cursor: pointer; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear; - transition: color 0.2s linear,border-bottom-color 0.2s linear; -} - -.emotion-2:hover, -.emotion-2:focus { - outline: 0 none; - color: #1EA7FD; -} - -.emotion-2 > svg { - width: 15px; -} - -.emotion-9 { - width: 1px; - height: 24px; - background: rgba(0,0,0,.1); - margin-top: 8px; -} - -.emotion-9 + .emotion-9 { - display: none; -} - -@media (max-width:599px) { - .emotion-17 { - display: none; - } -} - -
-
-
-
-
-
-
-
-
-
-
- - - - - -
-
- - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
, - .emotion-1 { - position: absolute; - overflow: auto; - left: 0; - right: 0; - bottom: 0; - top: 40px; - z-index: 3; - -webkit-transition: all 0.1s linear; - transition: all 0.1s linear; - height: calc(100% - 40px); - background: transparent; -} - -.emotion-0 { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - -webkit-transition: background .1s linear; - transition: background .1s linear; - background: #FFFFFF; -} - -.emotion-0 iframe { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - border: 0 none; -} - -
-
-
-