From 55e37ecd005274048caefdac82fa11b3e46998f8 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 May 2019 14:02:29 +0200 Subject: [PATCH 1/7] ADD stories for syntaxhighlighter --- .../syntaxhighlighter.stories.tsx | 52 ++++++++++++++++++- 1 file changed, 51 insertions(+), 1 deletion(-) diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx index 7e3e32e4d1c1..a3340479966d 100644 --- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx +++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx @@ -1,5 +1,6 @@ -import React from 'react'; +import * as React from 'react'; import { storiesOf } from '@storybook/react'; +import { ThemeProvider, themes, convert, ensure } from '@storybook/theming'; import { SyntaxHighlighter } from './syntaxhighlighter'; storiesOf('Basics|SyntaxHighlighter', module) @@ -18,6 +19,55 @@ storiesOf('Basics|SyntaxHighlighter', module) `} )) + .add('unsupported', () => ( + + {` + // 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(); + } + } + } + `} + + )) + .add('themed unsupported', () => { + const theme = ensure(themes.dark); + return ( + + + {` + // 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(); + } + } + } + `} + + + ); + }) .add('story', () => ( {` From b8a13586a8bf08326b08b86ac55f497a5b461ff2 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 May 2019 18:14:10 +0200 Subject: [PATCH 2/7] FIX issue with SyntaxHighlighter in dark theme --- examples/cra-ts-kitchen-sink/package.json | 3 --- .../syntaxhighlighter.stories.tsx | 2 +- .../syntaxhighlighter/syntaxhighlighter.tsx | 1 + lib/theming/src/convert.ts | 2 +- yarn.lock | 23 +------------------ 5 files changed, 4 insertions(+), 27 deletions(-) diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json index ca935b18e829..7338c6d91ac0 100644 --- a/examples/cra-ts-kitchen-sink/package.json +++ b/examples/cra-ts-kitchen-sink/package.json @@ -23,9 +23,6 @@ "@types/enzyme": "^3.9.0", "@types/react": "^16.8.4", "@types/react-dom": "^16.8.2", - "@types/storybook__addon-actions": "^3.4.1", - "@types/storybook__addon-info": "^4.1.0", - "@types/storybook__react": "^4.0.0", "enzyme": "^3.9.0", "enzyme-adapter-react-16": "^1.9.1", "enzyme-to-json": "^3.3.5", diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx index a3340479966d..478a0de76d62 100644 --- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx +++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx @@ -41,7 +41,7 @@ storiesOf('Basics|SyntaxHighlighter', module) `} )) - .add('themed unsupported', () => { + .add('dark unsupported', () => { const theme = ensure(themes.dark); return ( diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx index c0a564ebaf3f..20fa0fabe72e 100644 --- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx +++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx @@ -39,6 +39,7 @@ const Wrapper = styled.div( border: `1px solid ${theme.appBorderColor}`, borderRadius: theme.borderRadius, background: theme.background.bar, + color: theme.color.defaultText, } : {} ); diff --git a/lib/theming/src/convert.ts b/lib/theming/src/convert.ts index a544f7c004ab..a7b89338521f 100644 --- a/lib/theming/src/convert.ts +++ b/lib/theming/src/convert.ts @@ -107,7 +107,7 @@ export const convert = (inherit: ThemeVars = lightThemeVars): Theme => { color: createColors(inherit), background: { app: appBg, - bar: background.bar, + bar: barBg, content: appContentBg, gridCellSize: gridCellSize || background.gridCellSize, hoverable: diff --git a/yarn.lock b/yarn.lock index 168a4bb4a911..20dca0a37a2b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3599,27 +3599,6 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e" integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw== -"@types/storybook__addon-actions@^3.4.1": - version "3.4.2" - resolved "https://registry.yarnpkg.com/@types/storybook__addon-actions/-/storybook__addon-actions-3.4.2.tgz#1d08689cc3259269ddb3479a2307c9d16944309e" - integrity sha512-CWxGz2pXav9PHcwrtXmkuH+xJL7sAu2AmIGEbkdT3Xs5jzBPZUEDEN//ZF7o6IOPP/tdXU37K1hrVMt9TDO0Bw== - -"@types/storybook__addon-info@^4.1.0": - version "4.1.1" - resolved "https://registry.yarnpkg.com/@types/storybook__addon-info/-/storybook__addon-info-4.1.1.tgz#8b05daa1cae8f6bfa252c9fa5d67aa648dfdf28c" - integrity sha512-ugk/BXBBZl0c8xhvIBIVFCF/WLxQhK6Mh8V4st6nbouLXA07SQMLtF1Fcuo2fLdDr1Ao1smABaQUiC2L2UwZwA== - dependencies: - "@types/react" "*" - "@types/storybook__react" "*" - -"@types/storybook__react@*", "@types/storybook__react@^4.0.0": - version "4.0.1" - resolved "https://registry.yarnpkg.com/@types/storybook__react/-/storybook__react-4.0.1.tgz#b6320c9d027b8ee7ef1445fef8b4cba196d48ace" - integrity sha512-knkZErqv8Iy2QbebqBa5tsy2itIMKdO6bcQ7C19nmgTc+j1pnQhXCGcVyARzAQ1/NAuSYudSWQAKG+plgK7hyQ== - dependencies: - "@types/react" "*" - "@types/webpack-env" "*" - "@types/symlink-or-copy@^1.2.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@types/symlink-or-copy/-/symlink-or-copy-1.2.0.tgz#4151a81b4052c80bc2becbae09f3a9ec010a9c7a" @@ -3681,7 +3660,7 @@ "@types/unist" "*" "@types/vfile-message" "*" -"@types/webpack-env@*", "@types/webpack-env@^1.13.7": +"@types/webpack-env@^1.13.7": 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== From f0fc40d247462f7b8b28f62844891f9b031badfc Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 May 2019 21:16:51 +0200 Subject: [PATCH 3/7] Set default color always && FIX indentation for code (even non-js) && REMOVE js-beautify --- lib/components/package.json | 2 - .../syntaxhighlighter/syntaxhighlighter.tsx | 56 ++++++++++--------- yarn.lock | 37 +----------- 3 files changed, 32 insertions(+), 63 deletions(-) diff --git a/lib/components/package.json b/lib/components/package.json index ee6c003c11ee..33dc8ca9d891 100644 --- a/lib/components/package.json +++ b/lib/components/package.json @@ -25,7 +25,6 @@ "@storybook/theming": "5.1.0-beta.1", "core-js": "^3.0.1", "global": "^4.3.2", - "js-beautify": "^1.8.9", "markdown-to-jsx": "^6.9.1", "memoizerific": "^1.11.3", "polished": "^3.0.0", @@ -42,7 +41,6 @@ "simplebar-react": "^1.0.0-alpha.6" }, "devDependencies": { - "@types/js-beautify": "^1.8.0", "@types/react-syntax-highlighter": "^10.1.0", "@types/react-textarea-autosize": "^4.3.3", "@types/recompose": "^0.30.5", diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx index 20fa0fabe72e..9b4b66b85435 100644 --- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx +++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx @@ -10,7 +10,6 @@ import html from 'react-syntax-highlighter/languages/prism/markup'; import ReactSyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light'; -import { js as beautify } from 'js-beautify'; import { ActionBar } from '../ActionBar/ActionBar'; import { ScrollArea } from '../ScrollArea/ScrollArea'; @@ -29,17 +28,17 @@ interface WrapperProps { } const Wrapper = styled.div( - { + ({ theme }) => ({ position: 'relative', overflow: 'hidden', - }, + color: theme.color.defaultText, + }), ({ theme, bordered }) => bordered ? { border: `1px solid ${theme.appBorderColor}`, borderRadius: theme.borderRadius, background: theme.background.bar, - color: theme.color.defaultText, } : {} ); @@ -92,6 +91,31 @@ export interface SyntaxHighlighterState { type ReactSyntaxHighlighterProps = React.ComponentProps; +const formatter = memoize(2)((code: string) => { + // code provided to the component is often coming from template literals, which preserve whitespace. + // sometimes the first line doesn't have padding, but the second does. + // we split the code-string into lines, then if we find padding on line 0 or 1, + // we assume that padding is bad, and remove that much padding on all following lines + return code + .split(/\n/) + .reduce( + (acc, i, index) => { + const match = i.match(/^((:?\s|\t)+)/); + const padding = match ? match[1] : ''; + + if (acc.firstIndent === '' && padding && index < 3) { + return { result: `${acc.result}\n${i.replace(padding, '')}`, firstIndent: padding }; + } + return { + result: `${acc.result}\n${i.replace(acc.firstIndent, '')}`, + firstIndent: acc.firstIndent, + }; + }, + { firstIndent: '', result: '' } + ) + .result.trim(); +}); + export class SyntaxHighlighter extends Component< SyntaxHighlighterProps & ReactSyntaxHighlighterProps, SyntaxHighlighterState @@ -107,26 +131,6 @@ export class SyntaxHighlighter extends Component< state = { copied: false }; - formatCode = memoize(2)((language: string, code: string) => { - let formattedCode = code; - if (language === 'jsx') { - try { - // eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion - formattedCode = beautify(code, { - indent_size: 2, - brace_style: 'collapse-preserve-inline', - end_with_newline: true, - wrap_line_length: 80, - e4x: true, // e4x is not available in JsBeautify types for now - } as JsBeautifyOptions); - } catch (error) { - // eslint-disable-next-line no-console - console.warn("Couldn't format code", formattedCode); - } - } - return formattedCode; - }); - onClick = (e: React.MouseEvent) => { const { children } = this.props; @@ -172,9 +176,7 @@ export class SyntaxHighlighter extends Component< lineNumberContainerStyle={{}} {...rest} > - {format - ? this.formatCode(language, (children as string).trim()) - : (children as string).trim()} + {format ? formatter((children as string).trim()) : (children as string).trim()} {copyable ? ( diff --git a/yarn.lock b/yarn.lock index 20dca0a37a2b..064a83c46855 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3407,11 +3407,6 @@ dependencies: "@types/jest-diff" "*" -"@types/js-beautify@^1.8.0": - version "1.8.0" - resolved "https://registry.yarnpkg.com/@types/js-beautify/-/js-beautify-1.8.0.tgz#0369d3d0e1f35a6aec07cb4da2ee2bcda111367c" - integrity sha512-/siF86XrwDKLuHe8l7h6NhrAWgLdgqbxmjZv9NvGWmgYRZoTipkjKiWb0SQHy/jcR+ee0GvbG6uGd+LEBMGNvA== - "@types/json5@^0.0.29": version "0.0.29" resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" @@ -8702,7 +8697,7 @@ concurrently@^4.0.1: tree-kill "^1.1.0" yargs "^12.0.1" -config-chain@^1.1.11, config-chain@^1.1.12: +config-chain@^1.1.11: version "1.1.12" resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa" integrity sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA== @@ -10422,16 +10417,6 @@ editions@^1.1.1: resolved "https://registry.yarnpkg.com/editions/-/editions-1.3.4.tgz#3662cb592347c3168eb8e498a0ff73271d67f50b" integrity sha512-gzao+mxnYDzIysXKMQi/+M1mjy/rjestjg6OPoYTtI+3Izp23oiGZitsl9lPDPiTGXbcSIk1iJWhliSaglxnUg== -editorconfig@^0.15.3: - version "0.15.3" - resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5" - integrity sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g== - dependencies: - commander "^2.19.0" - lru-cache "^4.1.5" - semver "^5.6.0" - sigmund "^1.0.1" - ee-first@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" @@ -17096,17 +17081,6 @@ js-base64@^2.1.8, js-base64@^2.1.9: resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121" integrity sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw== -js-beautify@^1.8.9: - version "1.10.0" - resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.10.0.tgz#9753a13c858d96828658cd18ae3ca0e5783ea672" - integrity sha512-OMwf/tPDpE/BLlYKqZOhqWsd3/z2N3KOlyn1wsCRGFwViE8LOQTcDtathQvHvZc+q+zWmcNAbwKSC+iJoMaH2Q== - dependencies: - config-chain "^1.1.12" - editorconfig "^0.15.3" - glob "^7.1.3" - mkdirp "~0.5.1" - nopt "~4.0.1" - js-levenshtein@^1.1.3: version "1.1.6" resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d" @@ -18813,7 +18787,7 @@ lowlight@~1.9.1: fault "^1.0.2" highlight.js "~9.12.0" -lru-cache@^4.0.1, lru-cache@^4.1.1, lru-cache@^4.1.2, lru-cache@^4.1.3, lru-cache@^4.1.5: +lru-cache@^4.0.1, lru-cache@^4.1.1, lru-cache@^4.1.2, lru-cache@^4.1.3: version "4.1.5" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd" integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g== @@ -20487,7 +20461,7 @@ noop-logger@^0.1.1: dependencies: abbrev "1" -nopt@^4.0.1, nopt@~4.0.1: +nopt@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d" integrity sha1-0NRoWv1UFRk8jHUFYC0NF81kR00= @@ -26347,11 +26321,6 @@ shorthash@0.0.2: resolved "https://registry.yarnpkg.com/shorthash/-/shorthash-0.0.2.tgz#59b268eecbde59038b30da202bcfbddeb2c4a4eb" integrity sha1-WbJo7sveWQOLMNogK8+93rLEpOs= -sigmund@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590" - integrity sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA= - signal-exit@^3.0.0, signal-exit@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d" From ebfe20038689a17ca550ca92b2f3f8238689beaa Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 May 2019 21:25:42 +0200 Subject: [PATCH 4/7] FIX snapshots --- .../addon-info.stories.storyshot | 4 + .../syntaxhighlighter.stories.storyshot | 1674 ++++++++++++----- .../__snapshots__/about.stories.storyshot | 1 + 3 files changed, 1165 insertions(+), 514 deletions(-) diff --git a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot index 38d1c48e41de..a08a938a0c2f 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot @@ -1246,6 +1246,7 @@ exports[`Storyshots Addons|Info/Markdown Displays Markdown in description 1`] = .emotion-5 { position: relative; overflow: hidden; + color: #333333; border: 1px solid rgba(0,0,0,.1); background: #FFFFFF; } @@ -4608,6 +4609,7 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the parameters with markdow .emotion-5 { position: relative; overflow: hidden; + color: #333333; border: 1px solid rgba(0,0,0,.1); background: #FFFFFF; } @@ -5256,6 +5258,7 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with mar .emotion-5 { position: relative; overflow: hidden; + color: #333333; border: 1px solid rgba(0,0,0,.1); background: #FFFFFF; } @@ -9500,6 +9503,7 @@ exports[`Storyshots Addons|Info/deprecated Displays Markdown in description 1`] .emotion-5 { position: relative; overflow: hidden; + color: #333333; border: 1px solid rgba(0,0,0,.1); background: #FFFFFF; } diff --git a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot b/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot index 93be86c3fca9..735c5b1caf15 100644 --- a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot +++ b/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot @@ -170,6 +170,7 @@ exports[`Storyshots Basics|SyntaxHighlighter bash 1`] = ` .emotion-3 { position: relative; overflow: hidden; + color: #333333; } .emotion-1 { @@ -276,6 +277,7 @@ 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; } @@ -733,8 +735,6 @@ exports[`Storyshots Basics|SyntaxHighlighter bordered & copy-able 1`] = ` > ; - - @@ -772,7 +772,36 @@ exports[`Storyshots Basics|SyntaxHighlighter bordered & copy-able 1`] = ` `; -exports[`Storyshots Basics|SyntaxHighlighter jsx 1`] = ` +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-5 { + position: relative; + overflow: hidden; + color: #FFFFFF; + border: 1px solid rgba(255,255,255,.1); + background: #333333; +} + .emotion-2 { overflow-y: auto; height: 100%; @@ -791,79 +820,79 @@ exports[`Storyshots Basics|SyntaxHighlighter jsx 1`] = ` } .emotion-2 * .token.comment { - color: #008000; + color: #7C7C7C; font-style: italic; } .emotion-2 * .token.prolog { - color: #008000; + color: #7C7C7C; font-style: italic; } .emotion-2 * .token.doctype { - color: #008000; + color: #7C7C7C; font-style: italic; } .emotion-2 * .token.cdata { - color: #008000; + color: #7C7C7C; font-style: italic; } .emotion-2 * .token.string { - color: #A31515; + color: #92C379; } .emotion-2 * .token.punctuation { - color: #393A34; + color: #EDEDED; } .emotion-2 * .token.operator { - color: #393A34; + color: #EDEDED; } .emotion-2 * .token.url { - color: #36acaa; + color: #C6C5FE; } .emotion-2 * .token.symbol { - color: #36acaa; + color: #C6C5FE; } .emotion-2 * .token.number { - color: #36acaa; + color: #C6C5FE; } .emotion-2 * .token.boolean { - color: #36acaa; + color: #C6C5FE; } .emotion-2 * .token.variable { - color: #36acaa; + color: #C6C5FE; } .emotion-2 * .token.constant { - color: #36acaa; + color: #C6C5FE; } .emotion-2 * .token.inserted { - color: #36acaa; + color: #C6C5FE; } .emotion-2 * .token.atrule { - color: #0000ff; + color: #B474DD; } .emotion-2 * .token.keyword { - color: #0000ff; + color: #B474DD; } .emotion-2 * .token.attr-value { - color: #0000ff; + color: #B474DD; } .emotion-2 * .token.function { - color: #393A34; + color: #EDEDED; } .emotion-2 * .token.deleted { @@ -883,82 +912,105 @@ exports[`Storyshots Basics|SyntaxHighlighter jsx 1`] = ` } .emotion-2 * .token.class-name { - color: #2B91AF; + color: #FFFFB6; } .emotion-2 * .token.tag { - color: #800000; + color: #A8FF60; } .emotion-2 * .token.selector { - color: #800000; + color: #A8FF60; } .emotion-2 * .token.attr-name { - color: #ff0000; + color: #96CBFE; } .emotion-2 * .token.property { - color: #ff0000; + color: #96CBFE; } .emotion-2 * .token.regex { - color: #ff0000; + color: #96CBFE; } .emotion-2 * .token.entity { - color: #ff0000; + color: #96CBFE; } .emotion-2 * .token.directive.tag .tag { background: #ffff00; - color: #393A34; + color: #EDEDED; } .emotion-2 * .language-json .token.boolean { - color: #0000ff; + color: #B474DD; } .emotion-2 * .language-json .token.number { - color: #0000ff; + color: #B474DD; } .emotion-2 * .language-json .token.property { - color: #2B91AF; + color: #FFFFB6; } .emotion-2 * .namespace { opacity: 0.7; } -.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: #333; } .emotion-3 { - position: relative; - overflow: hidden; -} - -.emotion-1 { + border: 0 none; + padding: 4px 10px; + cursor: pointer; 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; + -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; }
- - import - - - - { - - Good - - , - - Things - - } - - - - from - - - - 'life' - - - ; - - + // 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(); + } + } +} + + +
+
+ + +
+
+
+
+
+
+
+
+
+
+ +
+
+`; - - - 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; -} +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; @@ -1401,19 +1256,6 @@ exports[`Storyshots Basics|SyntaxHighlighter padded 1`] = ` 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; @@ -1425,6 +1267,20 @@ exports[`Storyshots Basics|SyntaxHighlighter padded 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; }
+ + all + + + + = + + + { + + + true + + + } + + + @@ -1652,8 +1538,6 @@ exports[`Storyshots Basics|SyntaxHighlighter padded 1`] = ` > ; - -
@@ -1682,7 +1566,7 @@ exports[`Storyshots Basics|SyntaxHighlighter padded 1`] = ` `; -exports[`Storyshots Basics|SyntaxHighlighter showLineNumbers 1`] = ` +exports[`Storyshots Basics|SyntaxHighlighter padded 1`] = ` .emotion-2 { overflow-y: auto; height: 100%; @@ -1841,6 +1725,19 @@ exports[`Storyshots Basics|SyntaxHighlighter showLineNumbers 1`] = ` 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; @@ -1852,19 +1749,7 @@ exports[`Storyshots Basics|SyntaxHighlighter showLineNumbers 1`] = ` .emotion-3 { position: relative; overflow: hidden; -} - -.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; + color: #333333; }
- + - 1 - + import - - 2 - - - - 3 - - - - 4 - - - - 5 - - - - - - import - - + @@ -2124,8 +1977,6 @@ exports[`Storyshots Basics|SyntaxHighlighter showLineNumbers 1`] = ` > ; - -
@@ -2154,7 +2005,7 @@ exports[`Storyshots Basics|SyntaxHighlighter showLineNumbers 1`] = ` `; -exports[`Storyshots Basics|SyntaxHighlighter story 1`] = ` +exports[`Storyshots Basics|SyntaxHighlighter showLineNumbers 1`] = ` .emotion-2 { overflow-y: auto; height: 100%; @@ -2324,6 +2175,7 @@ exports[`Storyshots Basics|SyntaxHighlighter story 1`] = ` .emotion-3 { position: relative; overflow: hidden; + color: #333333; } .emotion-1 { @@ -2371,81 +2223,59 @@ exports[`Storyshots Basics|SyntaxHighlighter story 1`] = ` 
-                
-                  
-                    import
-                  
-                   React 
+                
                   
-                    from
+                    1
+
                   
-                   
                   
-                    'react'
+                    2
+
                   
                   
-                    ;
-                  
-                  
+                    3
 
-                  
-                    import
                   
-                   
                   
-                    {
+                    4
+
                   
-                   storiesOf 
                   
-                    }
+                    5
+
                   
-                   
+                
+                
                   
-                    from
+                    import
                   
                    
-                  
-                    '@storybook/react'
-                  
                   
-                    ;
-                  
-                  
-
-                  
-                    import
+                    {
                   
-                   
+                   Good
                   
-                    {
+                    ,
                   
-                   styled 
+                   Things 
                   
@@ -2461,7 +2291,7 @@ exports[`Storyshots Basics|SyntaxHighlighter story 1`] = `
                   
-                    '@storybook/theming'
+                    'life'
                   
                   
-                    import
+                    const
                   
-                   Heading 
+                   
                   
-                    from
+                    result
                   
                    
                   
-                    './heading'
+                    =
                   
+                   
                   
-                    ;
+                    (
                   
-                  
-
-
                   
-                    const
+                    )
                   
-                   Holder 
+                   
                   
-                    =
+                    =>
                   
-                   styled
+                   
                   
-                    .
+                    
+                      
+                        <
+                      
+                      
+                        Good
+                      
+                    
+                    
+                      >
+                    
                   
                   
-                    div
+                    
+                      
+                        <
+                      
+                      
+                        Things
+                      
+                    
+                     
+                    
+                      />
+                    
                   
                   
-                    (
+                    
+                      
+                        </
+                      
+                      
+                        Good
+                      
+                    
+                    
+                      >
+                    
                   
                   
-                    {
+                    ;
                   
                   
-  margin
+
+
                   
-                    :
+                    export
                   
                    
-                  
-                    10
-                  
                   
-                    ,
+                    {
                   
-                  
-  border
+                   result 
                   
-                    :
+                    as
                   
                    
                   
-                    '1px dashed deepskyblue'
-                  
-                  
-                    ,
-                  
-                  
-  
-                  
-                    // overflow: 'hidden',
+                    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',
+                  
+                  
+
+                  
+                    }
+                  
+                  
+                    )
+                  
+                  
+                    ;
+                  
+                  
+
+
                   
@@ -2690,7 +3013,7 @@ exports[`Storyshots Basics|SyntaxHighlighter story 1`] = `
                     class="token plain-text"
                   >
                     
-            
+    
                   
                   
                     
-              
+      
                   
                   
                     
-            
+    
                   
                   
                     
-            
+    
                   
                   
                     
-              
+      
                   
                   
                     
-            
+    
                   
                   
                     
-            
+    
                   
                   
                     
-              
+      
                   
                   
                     
-            
+    
                   
                   
                     
-            
+    
                   
                   
                     
-              
+      
                   
                   
                     
-                page type
-              
+        page type
+      
                   
                   
                     
-            
+    
                   
                   
                     
-          
+  
                   
                   
                   
 
-                  
-                    )
-                  
-                  
-                    )
-                  
-                  
-                    ;
-                  
-                  
+                  
+                    )
+                  
+                  
+                    )
+                  
+                  
+                    ;
+                  
+                
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +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; +} + +.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();
+    }
+  }
+}
@@ -3321,5 +3958,14 @@ exports[`Storyshots Basics|SyntaxHighlighter story 1`] = ` />
+
+ +
`; diff --git a/lib/ui/src/settings/__snapshots__/about.stories.storyshot b/lib/ui/src/settings/__snapshots__/about.stories.storyshot index 59762040f62c..2ded1a62284e 100644 --- a/lib/ui/src/settings/__snapshots__/about.stories.storyshot +++ b/lib/ui/src/settings/__snapshots__/about.stories.storyshot @@ -1442,6 +1442,7 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = ` .emotion-23 { position: relative; overflow: hidden; + color: #333333; border: 1px solid rgba(0,0,0,.1); background: #FFFFFF; } From c74334065f4f97fe0b469090a736526a52af3d3c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 May 2019 22:03:47 +0200 Subject: [PATCH 5/7] FIX some bs --- examples/cra-ts-kitchen-sink/tsconfig.json | 2 ++ .../types/@storybook/react.d.ts | 8 +++++ lib/components/src/StoryLinkWrapper.ts | 34 ------------------- .../src/tooltip/TooltipLinkList.stories.tsx | 30 ++++++++++++++-- 4 files changed, 38 insertions(+), 36 deletions(-) create mode 100644 examples/cra-ts-kitchen-sink/types/@storybook/react.d.ts delete mode 100644 lib/components/src/StoryLinkWrapper.ts diff --git a/examples/cra-ts-kitchen-sink/tsconfig.json b/examples/cra-ts-kitchen-sink/tsconfig.json index 69d9d5934107..c96a8072f85a 100644 --- a/examples/cra-ts-kitchen-sink/tsconfig.json +++ b/examples/cra-ts-kitchen-sink/tsconfig.json @@ -1,5 +1,7 @@ { "compilerOptions": { + "baseUrl": ".", + "paths": { "*": ["types/*"] }, "target": "es5", "module": "esnext", "lib" : ["esnext", "dom"], diff --git a/examples/cra-ts-kitchen-sink/types/@storybook/react.d.ts b/examples/cra-ts-kitchen-sink/types/@storybook/react.d.ts new file mode 100644 index 000000000000..942a8398e7b5 --- /dev/null +++ b/examples/cra-ts-kitchen-sink/types/@storybook/react.d.ts @@ -0,0 +1,8 @@ +export const addDecorator: any; +export const addParameters: any; +export const configure: any; +export const forceReRender: any; +export const getStorybook: any; +export const raw: any; +export const setAddon: any; +export const storiesOf: any; diff --git a/lib/components/src/StoryLinkWrapper.ts b/lib/components/src/StoryLinkWrapper.ts deleted file mode 100644 index 1d5779cbf4cc..000000000000 --- a/lib/components/src/StoryLinkWrapper.ts +++ /dev/null @@ -1,34 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies */ -// This is allows us to test whether the link works via the actions addon -import React, { Children, FunctionComponent, ReactElement, ReactNode } from 'react'; -import PropTypes from 'prop-types'; -import { action } from '@storybook/addon-actions'; - -const onLinkClick = action('onLinkClick'); - -interface StoryLinkWrapperProps { - href: string; - passHref?: boolean; -} - -const StoryLinkWrapper: FunctionComponent = ({ - href, - passHref, - children, -}) => { - const child = Children.only(children) as ReactElement; - - return React.cloneElement(child, { - href: passHref && href, - onClick: (e: React.MouseEvent) => { - e.preventDefault(); - onLinkClick(href); - }, - }); -}; - -StoryLinkWrapper.defaultProps = { - passHref: false, -}; - -export default StoryLinkWrapper; diff --git a/lib/components/src/tooltip/TooltipLinkList.stories.tsx b/lib/components/src/tooltip/TooltipLinkList.stories.tsx index bfa9f629c7e4..e34ad4aa9ffb 100644 --- a/lib/components/src/tooltip/TooltipLinkList.stories.tsx +++ b/lib/components/src/tooltip/TooltipLinkList.stories.tsx @@ -1,10 +1,36 @@ -import React from 'react'; +import React, { Children, FunctionComponent, ReactElement, ReactNode } from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { WithTooltip } from './WithTooltip'; import { TooltipLinkList } from './TooltipLinkList'; -import StoryLinkWrapper from '../StoryLinkWrapper'; + +const onLinkClick = action('onLinkClick'); + +interface StoryLinkWrapperProps { + href: string; + passHref?: boolean; +} + +const StoryLinkWrapper: FunctionComponent = ({ + href, + passHref, + children, +}) => { + const child = Children.only(children) as ReactElement; + + return React.cloneElement(child, { + href: passHref && href, + onClick: (e: React.MouseEvent) => { + e.preventDefault(); + onLinkClick(href); + }, + }); +}; + +StoryLinkWrapper.defaultProps = { + passHref: false, +}; export const links = [ { id: '1', title: 'Link', href: 'http://google.com' }, From 014655d1d4ecf0119600fe779d3f418b90dbcbde Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 20 May 2019 11:59:50 +0200 Subject: [PATCH 6/7] Extract formatter into it's own file and write tests --- .../src/syntaxhighlighter/formatter.test.js | 90 +++++++++++++++++++ .../src/syntaxhighlighter/formatter.ts | 26 ++++++ .../syntaxhighlighter/syntaxhighlighter.tsx | 27 +----- 3 files changed, 118 insertions(+), 25 deletions(-) create mode 100644 lib/components/src/syntaxhighlighter/formatter.test.js create mode 100644 lib/components/src/syntaxhighlighter/formatter.ts diff --git a/lib/components/src/syntaxhighlighter/formatter.test.js b/lib/components/src/syntaxhighlighter/formatter.test.js new file mode 100644 index 000000000000..14a3d78375d4 --- /dev/null +++ b/lib/components/src/syntaxhighlighter/formatter.test.js @@ -0,0 +1,90 @@ +import { stripIndents } from 'common-tags'; + +import { formatter } from './formatter'; + +test('handles empty string', () => { + const input = ''; + const result = formatter(input); + + expect(result).toBe(input); +}); + +test('handles single line', () => { + const input = 'console.log("hello world")'; + const result = formatter(input); + + expect(result).toBe(input); +}); + +test('does not transform correct code', () => { + const input = stripIndents` + console.log("hello"); + console.log("world"); + `; + const result = formatter(input); + + expect(result).toBe(input); +}); + +test('does transform incorrect code', () => { + const input = ` + console.log("hello"); + console.log("world"); + `; + const result = formatter(input); + + expect(result).toBe(`console.log("hello"); +console.log("world");`); +}); + +test('more indentations - skip first line', () => { + const input = ` + test('handles empty string', () => { + const input = ''; + const result = formatter(input); + + expect(result).toBe(input); + }); + `; + const result = formatter(input); + + expect(result).toBe(`test('handles empty string', () => { + const input = ''; + const result = formatter(input); + + expect(result).toBe(input); +});`); +}); + +test('more indentations - code on first line', () => { + const input = `// some comment + test('handles empty string', () => { + const input = ''; + const result = formatter(input); + + expect(result).toBe(input); + }); + `; + const result = formatter(input); + + expect(result).toBe(`// some comment +test('handles empty string', () => { + const input = ''; + const result = formatter(input); + + expect(result).toBe(input); +});`); +}); + +test('removes whitespace in empty line completely', () => { + const input = ` + console.log("hello"); + + console.log("world"); + `; + const result = formatter(input); + + expect(result).toBe(`console.log("hello"); + +console.log("world");`); +}); diff --git a/lib/components/src/syntaxhighlighter/formatter.ts b/lib/components/src/syntaxhighlighter/formatter.ts new file mode 100644 index 000000000000..cb2f406fb710 --- /dev/null +++ b/lib/components/src/syntaxhighlighter/formatter.ts @@ -0,0 +1,26 @@ +import memoize from 'memoizerific'; + +export const formatter = memoize(2)((code: string) => { + // code provided to the component is often coming from template literals, which preserve whitespace. + // sometimes the first line doesn't have padding, but the second does. + // we split the code-string into lines, then if we find padding on line 0 or 1, + // we assume that padding is bad, and remove that much padding on all following lines + return code + .split(/\n/) + .reduce( + (acc, i, index) => { + const match = i.match(/^((:?\s|\t)+)/); + const padding = match ? match[1] : ''; + + if (acc.firstIndent === '' && padding && index < 3) { + return { result: `${acc.result}\n${i.replace(padding, '')}`, firstIndent: padding }; + } + return { + result: `${acc.result}\n${i.replace(acc.firstIndent, '').replace(/\s*$/, '')}`, + firstIndent: acc.firstIndent, + }; + }, + { firstIndent: '', result: '' } + ) + .result.trim(); +}); diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx index 9b4b66b85435..a3e3dceb8d5e 100644 --- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx +++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx @@ -13,6 +13,8 @@ import ReactSyntaxHighlighter, { registerLanguage } from 'react-syntax-highlight import { ActionBar } from '../ActionBar/ActionBar'; import { ScrollArea } from '../ScrollArea/ScrollArea'; +import { formatter } from './formatter'; + registerLanguage('jsx', jsx); registerLanguage('bash', bash); registerLanguage('css', css); @@ -91,31 +93,6 @@ export interface SyntaxHighlighterState { type ReactSyntaxHighlighterProps = React.ComponentProps; -const formatter = memoize(2)((code: string) => { - // code provided to the component is often coming from template literals, which preserve whitespace. - // sometimes the first line doesn't have padding, but the second does. - // we split the code-string into lines, then if we find padding on line 0 or 1, - // we assume that padding is bad, and remove that much padding on all following lines - return code - .split(/\n/) - .reduce( - (acc, i, index) => { - const match = i.match(/^((:?\s|\t)+)/); - const padding = match ? match[1] : ''; - - if (acc.firstIndent === '' && padding && index < 3) { - return { result: `${acc.result}\n${i.replace(padding, '')}`, firstIndent: padding }; - } - return { - result: `${acc.result}\n${i.replace(acc.firstIndent, '')}`, - firstIndent: acc.firstIndent, - }; - }, - { firstIndent: '', result: '' } - ) - .result.trim(); -}); - export class SyntaxHighlighter extends Component< SyntaxHighlighterProps & ReactSyntaxHighlighterProps, SyntaxHighlighterState From fcc12c4d8c331fe42d06218e4444e303cc37667b Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 20 May 2019 12:59:05 +0200 Subject: [PATCH 7/7] FIX snapshots and & error from react-scripts --- .../{ => src}/types/@storybook/react.d.ts | 0 examples/cra-ts-kitchen-sink/tsconfig.json | 2 +- .../__snapshots__/syntaxhighlighter.stories.storyshot | 8 ++++---- 3 files changed, 5 insertions(+), 5 deletions(-) rename examples/cra-ts-kitchen-sink/{ => src}/types/@storybook/react.d.ts (100%) diff --git a/examples/cra-ts-kitchen-sink/types/@storybook/react.d.ts b/examples/cra-ts-kitchen-sink/src/types/@storybook/react.d.ts similarity index 100% rename from examples/cra-ts-kitchen-sink/types/@storybook/react.d.ts rename to examples/cra-ts-kitchen-sink/src/types/@storybook/react.d.ts diff --git a/examples/cra-ts-kitchen-sink/tsconfig.json b/examples/cra-ts-kitchen-sink/tsconfig.json index c96a8072f85a..99ef5691b724 100644 --- a/examples/cra-ts-kitchen-sink/tsconfig.json +++ b/examples/cra-ts-kitchen-sink/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "baseUrl": ".", + "baseUrl": "src", "paths": { "*": ["types/*"] }, "target": "es5", "module": "esnext", diff --git a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot b/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot index 735c5b1caf15..20c557b10151 100644 --- a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot +++ b/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot @@ -1048,9 +1048,9 @@ exports[`Storyshots Basics|SyntaxHighlighter dark unsupported 1`] = ` using System; namespace HelloWorld { - class Hello + class Hello { - static void Main() + static void Main() { Console.WriteLine("Hello World!"); @@ -3921,9 +3921,9 @@ exports[`Storyshots Basics|SyntaxHighlighter unsupported 1`] = ` using System; namespace HelloWorld { - class Hello + class Hello { - static void Main() + static void Main() { Console.WriteLine("Hello World!");