mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-09 00:19:13 +08:00
Set default color always && FIX indentation for code (even non-js) && REMOVE js-beautify
This commit is contained in:
Norbert de Langen
parent
b8a13586a8
commit
f0fc40d247
@ -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",
|
||||
|
||||
@ -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<WrapperProps>(
|
||||
{
|
||||
({ 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<typeof ReactSyntaxHighlighter>;
|
||||
|
||||
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()}
|
||||
</ReactSyntaxHighlighter>
|
||||
</Scroller>
|
||||
{copyable ? (
|
||||
|
||||
37
yarn.lock
37
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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user