From 611e582ddbe2bba4152b756d507deb5b85f6f4d2 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sat, 9 Mar 2019 01:21:02 +0100 Subject: [PATCH] SYNC prettier printWidth with eslint && FIX resulting linting warnings --- .../src/components/ActionLogger/index.tsx | 11 ++- addons/actions/src/preview/decorateAction.ts | 4 +- addons/actions/src/preview/withActions.ts | 3 +- .../backgrounds/src/components/ColorIcon.tsx | 2 +- .../src/containers/BackgroundSelector.tsx | 73 ++++++++++++------- addons/notes/src/Panel.tsx | 20 ++++- addons/notes/src/index.ts | 36 +++++---- .../src/frameworks/angular/helpers.ts | 8 +- .../src/client/preview/angular/decorators.ts | 5 +- .../src/client/preview/angular/helpers.ts | 8 +- app/angular/src/demo/welcome.component.ts | 28 ++++--- examples/angular-cli/src/karma.ts | 5 +- .../src/stories/addon-background.stories.ts | 10 ++- .../src/stories/addon-knobs.stories.ts | 13 +++- .../src/stories/all-knobs.component.ts | 4 +- .../stories/component-with-di/di.component.ts | 6 +- .../src/components/Button.stories.tsx | 10 ++- lib/addons/src/index.ts | 4 +- lib/addons/src/make-decorator.test.ts | 6 +- lib/addons/src/make-decorator.ts | 6 +- lib/channels/src/index.test.ts | 3 +- lib/router/src/utils.ts | 58 ++++++++------- lib/theming/src/create.ts | 8 +- lib/theming/src/global.ts | 10 ++- lib/ui/src/keyboard/keyCodes.ts | 22 +++++- lib/ui/src/keyboard/platform.ts | 6 +- lib/ui/src/keyboard/scanCode.ts | 20 +++-- lib/ui/src/libs/shortcut.ts | 12 ++- tslint.json | 2 +- 29 files changed, 285 insertions(+), 118 deletions(-) diff --git a/addons/actions/src/components/ActionLogger/index.tsx b/addons/actions/src/components/ActionLogger/index.tsx index 180981ce6991..ad3e8611a56d 100644 --- a/addons/actions/src/components/ActionLogger/index.tsx +++ b/addons/actions/src/components/ActionLogger/index.tsx @@ -16,7 +16,9 @@ export const Wrapper = styled(({ children, className }) => ( padding: '10px 5px 20px', }); -const ThemedInspector = withTheme(({ theme, ...props }) => ); +const ThemedInspector = withTheme(({ theme, ...props }) => ( + +)); interface ActionLoggerProps { actions: ActionDisplay[]; @@ -30,7 +32,12 @@ export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => ( {action.count > 1 && {action.count}} - + ))} diff --git a/addons/actions/src/preview/decorateAction.ts b/addons/actions/src/preview/decorateAction.ts index c60afc6d73c1..817e7af1f29e 100644 --- a/addons/actions/src/preview/decorateAction.ts +++ b/addons/actions/src/preview/decorateAction.ts @@ -10,7 +10,9 @@ const applyDecorators = (decorators: DecoratorFunction[], actionCallback: Handle }; }; -export const decorateAction = (decorators: DecoratorFunction[]): ((name: string, options?: ActionOptions) => HandlerFunction) => { +export const decorateAction = ( + decorators: DecoratorFunction[] +): ((name: string, options?: ActionOptions) => HandlerFunction) => { return (name: string, options?: ActionOptions) => { const callAction = action(name, options); return applyDecorators(decorators, callAction); diff --git a/addons/actions/src/preview/withActions.ts b/addons/actions/src/preview/withActions.ts index 17ccf48ae04f..0b34623bffbf 100644 --- a/addons/actions/src/preview/withActions.ts +++ b/addons/actions/src/preview/withActions.ts @@ -50,7 +50,8 @@ const actionsSubscription = (...args: any[]) => { const handlers = createHandlers(...args); lastSubscription = () => { handlers.forEach(({ eventName, handler }) => root.addEventListener(eventName, handler)); - return () => handlers.forEach(({ eventName, handler }) => root.removeEventListener(eventName, handler)); + return () => + handlers.forEach(({ eventName, handler }) => root.removeEventListener(eventName, handler)); }; } return lastSubscription; diff --git a/addons/backgrounds/src/components/ColorIcon.tsx b/addons/backgrounds/src/components/ColorIcon.tsx index 00da34e6fd1a..e654c408b204 100644 --- a/addons/backgrounds/src/components/ColorIcon.tsx +++ b/addons/backgrounds/src/components/ColorIcon.tsx @@ -10,5 +10,5 @@ export const ColorIcon = styled.span( }), ({ theme }) => ({ boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`, - }), + }) ); diff --git a/addons/backgrounds/src/containers/BackgroundSelector.tsx b/addons/backgrounds/src/containers/BackgroundSelector.tsx index 7a3f634017a7..ef364b28f254 100644 --- a/addons/backgrounds/src/containers/BackgroundSelector.tsx +++ b/addons/backgrounds/src/containers/BackgroundSelector.tsx @@ -31,7 +31,10 @@ const createBackgroundSelectorItem = memoize(1000)( }) ); -const getSelectedBackgroundColor = (list: BackgroundConfig[], currentSelectedValue: string): string => { +const getSelectedBackgroundColor = ( + list: BackgroundConfig[], + currentSelectedValue: string +): string => { if (!list.length) { return 'transparent'; } @@ -51,30 +54,36 @@ const getSelectedBackgroundColor = (list: BackgroundConfig[], currentSelectedVal return 'transparent'; }; -const getDisplayableState = memoize(10)((props: BackgroundToolProps, state: BackgroundToolState, change) => { - const data = props.api.getCurrentStoryData(); - const list: BackgroundConfig[] = (data && data.parameters && data.parameters[PARAM_KEY]) || []; - - const selectedBackgroundColor = getSelectedBackgroundColor(list, state.selected); - - let availableBackgroundSelectorItems: BackgroundSelectorItem[] = []; - - if (selectedBackgroundColor !== 'transparent') { - availableBackgroundSelectorItems.push(createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change)); - } - - if (list.length) { - availableBackgroundSelectorItems = [ - ...availableBackgroundSelectorItems, - ...list.map(({ name, value }) => createBackgroundSelectorItem(null, name, value, true, change)), - ]; +const getDisplayableState = memoize(10)( + (props: BackgroundToolProps, state: BackgroundToolState, change) => { + const data = props.api.getCurrentStoryData(); + const list: BackgroundConfig[] = (data && data.parameters && data.parameters[PARAM_KEY]) || []; + + const selectedBackgroundColor = getSelectedBackgroundColor(list, state.selected); + + let availableBackgroundSelectorItems: BackgroundSelectorItem[] = []; + + if (selectedBackgroundColor !== 'transparent') { + availableBackgroundSelectorItems.push( + createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change) + ); + } + + if (list.length) { + availableBackgroundSelectorItems = [ + ...availableBackgroundSelectorItems, + ...list.map(({ name, value }) => + createBackgroundSelectorItem(null, name, value, true, change) + ), + ]; + } + + return { + items: availableBackgroundSelectorItems, + selectedBackgroundColor, + }; } - - return { - items: availableBackgroundSelectorItems, - selectedBackgroundColor, - }; -}); +); interface BackgroundToolProps { api: { @@ -119,7 +128,11 @@ export class BackgroundSelector extends Component @@ -136,11 +149,17 @@ export class BackgroundSelector extends Component this.setState({ expanded: newVisibility })} + onVisibilityChange={(newVisibility: boolean) => + this.setState({ expanded: newVisibility }) + } tooltip={} closeOnClick > - + diff --git a/addons/notes/src/Panel.tsx b/addons/notes/src/Panel.tsx index 543ea9f61357..0faade462daa 100644 --- a/addons/notes/src/Panel.tsx +++ b/addons/notes/src/Panel.tsx @@ -4,7 +4,12 @@ import { types } from '@storybook/addons'; import { styled } from '@storybook/theming'; import { STORY_RENDERED } from '@storybook/core-events'; -import { SyntaxHighlighter as SyntaxHighlighterBase, Placeholder, DocumentFormatting, Link } from '@storybook/components'; +import { + SyntaxHighlighter as SyntaxHighlighterBase, + Placeholder, + DocumentFormatting, + Link, +} from '@storybook/components'; import Giphy from './giphy'; import Markdown from 'markdown-to-jsx'; @@ -46,7 +51,7 @@ export const SyntaxHighlighter = (props: any) => { if (props.className === undefined) { return {props.children}; } - //className: "lang-jsx" + // className: "lang-jsx" const language = props.className.split('-'); return ; }; @@ -112,7 +117,10 @@ export default class NotesPanel extends React.Component } // TODO: memoize - const extraElements = Object.entries(api.getElements(types.NOTES_ELEMENT)).reduce((acc, [k, v]) => ({ ...acc, [k]: v.render }), {}); + const extraElements = Object.entries(api.getElements(types.NOTES_ELEMENT)).reduce( + (acc, [k, v]) => ({ ...acc, [k]: v.render }), + {} + ); const options = { ...defaultOptions, overrides: { ...defaultOptions.overrides, ...extraElements }, @@ -129,7 +137,11 @@ export default class NotesPanel extends React.Component No notes yet Learn how to{' '} - + document components in Markdown diff --git a/addons/notes/src/index.ts b/addons/notes/src/index.ts index 674c4ba93489..f1ed9aea6602 100644 --- a/addons/notes/src/index.ts +++ b/addons/notes/src/index.ts @@ -8,26 +8,32 @@ export const withNotes = makeDecorator({ skipIfNoParametersOrOptions: true, allowDeprecatedUsage: true, - wrapper: deprecate((getStory: StoryGetter, context: StoryContext, { options, parameters }: WrapperSettings) => { - const storyOptions = parameters || options; + wrapper: deprecate( + (getStory: StoryGetter, context: StoryContext, { options, parameters }: WrapperSettings) => { + const storyOptions = parameters || options; - const { text, markdown } = - typeof storyOptions === 'string' - ? { - text: storyOptions, - markdown: undefined, - } - : storyOptions; + const { text, markdown } = + typeof storyOptions === 'string' + ? { + text: storyOptions, + markdown: undefined, + } + : storyOptions; - if (!text && !markdown) { - throw new Error(`Parameter 'notes' must must be a string or an object with 'text' or 'markdown' properties`); - } + if (!text && !markdown) { + throw new Error( + `Parameter 'notes' must must be a string or an object with 'text' or 'markdown' properties` + ); + } - return getStory(context); - }, 'withNotes is deprecated'), + return getStory(context); + }, + 'withNotes is deprecated' + ), }); -export const withMarkdownNotes = deprecate((text: string, options: any) => {}, 'withMarkdownNotes is deprecated'); +export const withMarkdownNotes = deprecate((text: string, options: any) => {}, +'withMarkdownNotes is deprecated'); if (module && module.hot && module.hot.decline) { module.hot.decline(); diff --git a/addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts b/addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts index 7c417339adac..d8786390a4cd 100644 --- a/addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts +++ b/addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts @@ -43,7 +43,13 @@ export const initModuleData = (storyObj: NgStory): any => { props, }; - const moduleMeta = getModuleMeta([AppComponent, AnnotatedComponent], [AnnotatedComponent], [AppComponent], story, moduleMetadata); + const moduleMeta = getModuleMeta( + [AppComponent, AnnotatedComponent], + [AnnotatedComponent], + [AppComponent], + story, + moduleMetadata + ); return { AppComponent, diff --git a/app/angular/src/client/preview/angular/decorators.ts b/app/angular/src/client/preview/angular/decorators.ts index d40312ae3384..7897d6f0c380 100644 --- a/app/angular/src/client/preview/angular/decorators.ts +++ b/app/angular/src/client/preview/angular/decorators.ts @@ -9,7 +9,10 @@ export const moduleMetadata = (metadata: Partial) => (storyFn: ...story, moduleMetadata: { declarations: [...(metadata.declarations || []), ...(storyMetadata.declarations || [])], - entryComponents: [...(metadata.entryComponents || []), ...(storyMetadata.entryComponents || [])], + entryComponents: [ + ...(metadata.entryComponents || []), + ...(storyMetadata.entryComponents || []), + ], imports: [...(metadata.imports || []), ...(storyMetadata.imports || [])], schemas: [...(metadata.schemas || []), ...(storyMetadata.schemas || [])], providers: [...(metadata.providers || []), ...(storyMetadata.providers || [])], diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts index f5e218d75b33..8cabe40c1aa3 100644 --- a/app/angular/src/client/preview/angular/helpers.ts +++ b/app/angular/src/client/preview/angular/helpers.ts @@ -51,7 +51,13 @@ const initModule = (storyFn: IStoryFn) => { props, }; - return getModule([AppComponent, AnnotatedComponent], [AnnotatedComponent], [AppComponent], story, moduleMetadata); + return getModule( + [AppComponent, AnnotatedComponent], + [AnnotatedComponent], + [AppComponent], + story, + moduleMetadata + ); }; const staticRoot = document.getElementById('root'); diff --git a/app/angular/src/demo/welcome.component.ts b/app/angular/src/demo/welcome.component.ts index 18b464a4e644..c8348edbcec8 100644 --- a/app/angular/src/demo/welcome.component.ts +++ b/app/angular/src/demo/welcome.component.ts @@ -7,29 +7,39 @@ import { Component, Output, EventEmitter } from '@angular/core';

Welcome to storybook

This is a UI component dev environment for your app.

- We've added some basic stories inside the src/stories directory.
- A story is a single state of one or more UI components. You can have as many stories as you want.
+ We've added some basic stories inside the + src/stories directory.
+ A story is a single state of one or more UI components. You can have as many stories as you + want.
(Basically a story is like a visual test case.)

- See these sample stories for a component called - Button . + See these sample + stories for a component + called Button .

Just like that, you can add your own components as stories.
You can also edit those components and see changes right away.
- (Try editing the Button stories located at src/stories/index.js.) + (Try editing the Button stories located at + src/stories/index.js.)

Usually we create stories with smaller UI components in the app.
Have a look at the - Writing Stories section in - our documentation. + + Writing Stories + + section in our documentation.

NOTE:
- Have a look at the .storybook/webpack.config.js to add webpack loaders and plugins you are using in - this project. + Have a look at the .storybook/webpack.config.js to add + webpack loaders and plugins you are using in this project.

`, diff --git a/examples/angular-cli/src/karma.ts b/examples/angular-cli/src/karma.ts index e9e2959bea36..08df8a4aa9c3 100644 --- a/examples/angular-cli/src/karma.ts +++ b/examples/angular-cli/src/karma.ts @@ -7,7 +7,10 @@ import 'zone.js/dist/jasmine-patch'; import 'zone.js/dist/async-test'; import 'zone.js/dist/fake-async-test'; import { getTestBed } from '@angular/core/testing'; -import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting, +} from '@angular/platform-browser-dynamic/testing'; // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. declare const __karma__: any; diff --git a/examples/angular-cli/src/stories/addon-background.stories.ts b/examples/angular-cli/src/stories/addon-background.stories.ts index 43415c382235..aa1f808d6eaa 100644 --- a/examples/angular-cli/src/stories/addon-background.stories.ts +++ b/examples/angular-cli/src/stories/addon-background.stories.ts @@ -4,7 +4,10 @@ import { AppComponent } from '../app/app.component'; storiesOf('Addon|Background', module) .addParameters({ - backgrounds: [{ name: 'twitter', value: '#00aced', default: true }, { name: 'facebook', value: '#3b5998' }], + backgrounds: [ + { name: 'twitter', value: '#00aced', default: true }, + { name: 'facebook', value: '#3b5998' }, + ], }) .add('background component', () => ({ component: AppComponent, @@ -18,7 +21,10 @@ storiesOf('Addon|Background', module) }) ) .addParameters({ - backgrounds: [{ name: 'twitter', value: '#00aced', default: true }, { name: 'facebook', value: '#3b5998' }], + backgrounds: [ + { name: 'twitter', value: '#00aced', default: true }, + { name: 'facebook', value: '#3b5998' }, + ], }) .add('background template', () => ({ template: ``, diff --git a/examples/angular-cli/src/stories/addon-knobs.stories.ts b/examples/angular-cli/src/stories/addon-knobs.stories.ts index 4dc1a9804347..602feb23299a 100644 --- a/examples/angular-cli/src/stories/addon-knobs.stories.ts +++ b/examples/angular-cli/src/stories/addon-knobs.stories.ts @@ -1,7 +1,18 @@ import { storiesOf } from '@storybook/angular'; import { action } from '@storybook/addon-actions'; -import { withKnobs, text, number, boolean, array, select, radios, color, date, button } from '@storybook/addon-knobs'; +import { + withKnobs, + text, + number, + boolean, + array, + select, + radios, + color, + date, + button, +} from '@storybook/addon-knobs'; import { SimpleKnobsComponent } from './knobs.component'; import { AllKnobsComponent } from './all-knobs.component'; diff --git a/examples/angular-cli/src/stories/all-knobs.component.ts b/examples/angular-cli/src/stories/all-knobs.component.ts index 70b83b1b6095..4b36a9dea1c9 100644 --- a/examples/angular-cli/src/stories/all-knobs.component.ts +++ b/examples/angular-cli/src/stories/all-knobs.component.ts @@ -3,7 +3,9 @@ import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/cor @Component({ selector: 'storybook-simple-knobs-component', template: ` -
+

My name is {{ name }},

today is {{ today | date }}

I have a stock of {{ stock }} {{ fruit }}, costing $ {{ price }} each.

diff --git a/examples/angular-cli/src/stories/component-with-di/di.component.ts b/examples/angular-cli/src/stories/component-with-di/di.component.ts index c2cae8f869c2..96e61b42de66 100644 --- a/examples/angular-cli/src/stories/component-with-di/di.component.ts +++ b/examples/angular-cli/src/stories/component-with-di/di.component.ts @@ -11,7 +11,11 @@ export class DiComponent { @Input() title: string; - constructor(protected injector: Injector, protected elRef: ElementRef, @Inject(TEST_TOKEN) protected testToken: number) {} + constructor( + protected injector: Injector, + protected elRef: ElementRef, + @Inject(TEST_TOKEN) protected testToken: number + ) {} isAllDeps(): boolean { return Boolean(this.testToken && this.elRef && this.injector && this.title); diff --git a/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx b/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx index 697006450402..4c32f441fcd3 100644 --- a/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx +++ b/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx @@ -3,6 +3,10 @@ import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import Button from './Button'; -storiesOf('Button', module).add('simple button', () => , { - info: { inline: true }, -}); +storiesOf('Button', module).add( + 'simple button', + () => , + { + info: { inline: true }, + } +); diff --git a/lib/addons/src/index.ts b/lib/addons/src/index.ts index 71fabb10a87b..b2b08f1166a5 100644 --- a/lib/addons/src/index.ts +++ b/lib/addons/src/index.ts @@ -48,7 +48,9 @@ export class AddonStore { getChannel = (): Channel => { // this.channel should get overwritten by setChannel. If it wasn't called (e.g. in non-browser environment), throw. if (!this.channel) { - throw new Error('Accessing non-existent addons channel, see https://storybook.js.org/basics/faq/#why-is-there-no-addons-channel'); + throw new Error( + 'Accessing non-existent addons channel, see https://storybook.js.org/basics/faq/#why-is-there-no-addons-channel' + ); } return this.channel; diff --git a/lib/addons/src/make-decorator.test.ts b/lib/addons/src/make-decorator.test.ts index f44dd858be89..8c473994cba4 100644 --- a/lib/addons/src/make-decorator.test.ts +++ b/lib/addons/src/make-decorator.test.ts @@ -5,7 +5,11 @@ import { makeDecorator, StoryContext, StoryGetter } from './make-decorator'; type DecoratorFn = (fn: StoryGetter, context: StoryContext) => any; export const defaultDecorateStory = (getStory: StoryGetter, decorators: DecoratorFn[]) => - decorators.reduce((decorated, decorator) => (context: StoryContext) => decorator(() => decorated(context), context), getStory); + decorators.reduce( + (decorated, decorator) => (context: StoryContext) => + decorator(() => decorated(context), context), + getStory + ); jest.mock('util-deprecate'); let deprecatedFns: any[] = []; diff --git a/lib/addons/src/make-decorator.ts b/lib/addons/src/make-decorator.ts index 6172e79e6197..2347c3b32e49 100644 --- a/lib/addons/src/make-decorator.ts +++ b/lib/addons/src/make-decorator.ts @@ -19,7 +19,11 @@ export interface WrapperSettings { export type StoryGetter = (context: StoryContext) => any; -export type StoryWrapper = (getStory: StoryGetter, context: StoryContext, settings: WrapperSettings) => any; +export type StoryWrapper = ( + getStory: StoryGetter, + context: StoryContext, + settings: WrapperSettings +) => any; type MakeDecoratorResult = (...args: any) => any; diff --git a/lib/channels/src/index.test.ts b/lib/channels/src/index.test.ts index 1a01d164b396..201a8aabf32a 100644 --- a/lib/channels/src/index.test.ts +++ b/lib/channels/src/index.test.ts @@ -189,7 +189,8 @@ describe('Channel', () => { const eventName = 'event1'; const listenerToBeRemoved = jest.fn(); const listeners = [jest.fn(), jest.fn()]; - const findListener = (listener: Listener) => channel.listeners(eventName).find(_listener => _listener === listener); + const findListener = (listener: Listener) => + channel.listeners(eventName).find(_listener => _listener === listener); listeners.forEach(fn => channel.addListener(eventName, fn)); channel.addListener(eventName, listenerToBeRemoved); diff --git a/lib/router/src/utils.ts b/lib/router/src/utils.ts index dffd64cff86c..9a126db2fc26 100644 --- a/lib/router/src/utils.ts +++ b/lib/router/src/utils.ts @@ -27,37 +27,43 @@ const sanitizeSafe = (string: string, part: string) => { return sanitized; }; -export const toId = (kind: string, name: string) => `${sanitizeSafe(kind, 'kind')}--${sanitizeSafe(name, 'name')}`; - -export const storyDataFromString: (path: string) => StoryData = memoize(1000)((path: string | undefined | null) => { - const result: StoryData = { - viewMode: undefined, - storyId: undefined, - }; - - if (path) { - const [, viewMode, storyId] = path.match(splitPath) || [undefined, undefined, undefined]; - if (viewMode && viewMode.match(knownViewModesRegex)) { - Object.assign(result, { - viewMode, - storyId, - }); +export const toId = (kind: string, name: string) => + `${sanitizeSafe(kind, 'kind')}--${sanitizeSafe(name, 'name')}`; + +export const storyDataFromString: (path: string) => StoryData = memoize(1000)( + (path: string | undefined | null) => { + const result: StoryData = { + viewMode: undefined, + storyId: undefined, + }; + + if (path) { + const [, viewMode, storyId] = path.match(splitPath) || [undefined, undefined, undefined]; + if (viewMode && viewMode.match(knownViewModesRegex)) { + Object.assign(result, { + viewMode, + storyId, + }); + } } + return result; } - return result; -}); +); export const queryFromString = memoize(1000)(s => qs.parse(s, { ignoreQueryPrefix: true })); export const queryFromLocation = (location: { search: string }) => queryFromString(location.search); -export const stringifyQuery = (query: object) => qs.stringify(query, { addQueryPrefix: true, encode: false }); +export const stringifyQuery = (query: object) => + qs.stringify(query, { addQueryPrefix: true, encode: false }); -export const getMatch = memoize(1000)((current: string, target: string, startsWith: boolean = true) => { - const startsWithTarget = current && startsWith && current.startsWith(target); - const currentIsTarget = typeof target === 'string' && current === target; - const matchTarget = current && target && current.match(target); +export const getMatch = memoize(1000)( + (current: string, target: string, startsWith: boolean = true) => { + const startsWithTarget = current && startsWith && current.startsWith(target); + const currentIsTarget = typeof target === 'string' && current === target; + const matchTarget = current && target && current.match(target); - if (startsWithTarget || currentIsTarget || matchTarget) { - return { path: current }; + if (startsWithTarget || currentIsTarget || matchTarget) { + return { path: current }; + } + return null; } - return null; -}); +); diff --git a/lib/theming/src/create.ts b/lib/theming/src/create.ts index a4d44f016a3d..bb9dcc1f6f52 100644 --- a/lib/theming/src/create.ts +++ b/lib/theming/src/create.ts @@ -9,7 +9,10 @@ import { Theme, color, Color, background, typography, ThemeVars } from './base'; import { easing, animation } from './animation'; import { create as createSyntax } from './modules/syntax'; -const themes: { light: ThemeVars; dark: ThemeVars } = { light: lightThemeVars, dark: darkThemeVars }; +const themes: { light: ThemeVars; dark: ThemeVars } = { + light: lightThemeVars, + dark: darkThemeVars, +}; interface Rest { [key: string]: any; @@ -127,7 +130,8 @@ export const convert = (inherit: ThemeVars = lightThemeVars): Theme => { background: { app: appBg, content: appContentBg, - hoverable: base === 'light' ? 'rgba(0,0,0,.05)' : 'rgba(250,250,252,.1)' || background.hoverable, + hoverable: + base === 'light' ? 'rgba(0,0,0,.05)' : 'rgba(250,250,252,.1)' || background.hoverable, positive: background.positive, negative: background.negative, diff --git a/lib/theming/src/global.ts b/lib/theming/src/global.ts index bcc4d122ed87..cb46eeec33a4 100644 --- a/lib/theming/src/global.ts +++ b/lib/theming/src/global.ts @@ -87,7 +87,15 @@ export const createReset = memoize(1)( ); export const createGlobal = memoize(1)( - ({ color, background, typography }: { color: Color; background: Background; typography: Typography }): Return => { + ({ + color, + background, + typography, + }: { + color: Color; + background: Background; + typography: Typography; + }): Return => { const resetStyles = createReset({ typography }); return { ...resetStyles, diff --git a/lib/ui/src/keyboard/keyCodes.ts b/lib/ui/src/keyboard/keyCodes.ts index 5eb6b81ddcb5..d6f810d361ae 100644 --- a/lib/ui/src/keyboard/keyCodes.ts +++ b/lib/ui/src/keyboard/keyCodes.ts @@ -416,7 +416,13 @@ export class SimpleKeybinding { public readonly keyCode: KeyCode; - constructor(ctrlKey: boolean, shiftKey: boolean, altKey: boolean, metaKey: boolean, keyCode: KeyCode) { + constructor( + ctrlKey: boolean, + shiftKey: boolean, + altKey: boolean, + metaKey: boolean, + keyCode: KeyCode + ) { this.ctrlKey = ctrlKey; this.shiftKey = shiftKey; this.altKey = altKey; @@ -492,7 +498,10 @@ export function createKeyBinding(keybinding: number, OS: OperatingSystem): Keybi const chordPart = (keybinding & 0xffff0000) >>> 16; if (chordPart !== 0) { - return new ChordKeybinding(createSimpleKeybinding(firstPart, OS), createSimpleKeybinding(chordPart, OS)); + return new ChordKeybinding( + createSimpleKeybinding(firstPart, OS), + createSimpleKeybinding(chordPart, OS) + ); } return createSimpleKeybinding(firstPart, OS); @@ -525,7 +534,14 @@ export class ResolveKeybindingPart { readonly keyAriaLabel: string | null; - constructor(ctrlKey: boolean, shiftKey: boolean, altKey: boolean, metaKey: boolean, kbLabel: string | null, kbAriaLabel: string | null) { + constructor( + ctrlKey: boolean, + shiftKey: boolean, + altKey: boolean, + metaKey: boolean, + kbLabel: string | null, + kbAriaLabel: string | null + ) { this.ctrlKey = ctrlKey; this.shiftKey = shiftKey; this.altKey = altKey; diff --git a/lib/ui/src/keyboard/platform.ts b/lib/ui/src/keyboard/platform.ts index 6e651e0fc15c..563a5e488f37 100644 --- a/lib/ui/src/keyboard/platform.ts +++ b/lib/ui/src/keyboard/platform.ts @@ -31,4 +31,8 @@ export const enum OperatingSystem { Linux = 3, } -export const OS = _isMacintosh ? OperatingSystem.Macintosh : _isWindows ? OperatingSystem.Windows : OperatingSystem.Linux; +export const OS = _isMacintosh + ? OperatingSystem.Macintosh + : _isWindows + ? OperatingSystem.Windows + : OperatingSystem.Linux; diff --git a/lib/ui/src/keyboard/scanCode.ts b/lib/ui/src/keyboard/scanCode.ts index 2dfd5b8698fe..1b0b4498762d 100644 --- a/lib/ui/src/keyboard/scanCode.ts +++ b/lib/ui/src/keyboard/scanCode.ts @@ -229,7 +229,13 @@ export class ScanCodeBinding { public readonly metaKey: boolean; public readonly scanCode: ScanCode; - constructor(ctrlKey: boolean, shiftKey: boolean, altKey: boolean, metaKey: boolean, scanCode: ScanCode) { + constructor( + ctrlKey: boolean, + shiftKey: boolean, + altKey: boolean, + metaKey: boolean, + scanCode: ScanCode + ) { this.ctrlKey = ctrlKey; this.shiftKey = shiftKey; this.altKey = altKey; @@ -252,10 +258,14 @@ export class ScanCodeBinding { */ public isDuplicateModifierCase(): boolean { return ( - (this.ctrlKey && (this.scanCode === ScanCode.ControlLeft || this.scanCode === ScanCode.ControlRight)) || - (this.shiftKey && (this.scanCode === ScanCode.ShiftLeft || this.scanCode === ScanCode.ShiftRight)) || - (this.altKey && (this.scanCode === ScanCode.AltLeft || this.scanCode === ScanCode.AltRight)) || - (this.metaKey && (this.scanCode === ScanCode.MetaLeft || this.scanCode === ScanCode.MetaRight)) + (this.ctrlKey && + (this.scanCode === ScanCode.ControlLeft || this.scanCode === ScanCode.ControlRight)) || + (this.shiftKey && + (this.scanCode === ScanCode.ShiftLeft || this.scanCode === ScanCode.ShiftRight)) || + (this.altKey && + (this.scanCode === ScanCode.AltLeft || this.scanCode === ScanCode.AltRight)) || + (this.metaKey && + (this.scanCode === ScanCode.MetaLeft || this.scanCode === ScanCode.MetaRight)) ); } } diff --git a/lib/ui/src/libs/shortcut.ts b/lib/ui/src/libs/shortcut.ts index ec4fbdeb88b9..da691c6ac577 100644 --- a/lib/ui/src/libs/shortcut.ts +++ b/lib/ui/src/libs/shortcut.ts @@ -3,12 +3,14 @@ import { navigator } from 'global'; // The shortcut is our JSON-ifiable representation of a shortcut combination type Shortcut = string[]; -export const isMacLike = () => (navigator && navigator.platform ? !!navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i) : false); +export const isMacLike = () => + navigator && navigator.platform ? !!navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i) : false; export const controlOrMetaSymbol = () => (isMacLike() ? '⌘' : 'ctrl'); export const controlOrMetaKey = () => (isMacLike() ? 'meta' : 'control'); export const optionOrAltSymbol = () => (isMacLike() ? '⌥' : 'alt'); -export const isShortcutTaken = (arr1: string[], arr2: string[]): boolean => JSON.stringify(arr1) === JSON.stringify(arr2); +export const isShortcutTaken = (arr1: string[], arr2: string[]): boolean => + JSON.stringify(arr1) === JSON.stringify(arr2); // Map a keyboard event to a keyboard shortcut // NOTE: if we change the fields on the event that we need, we'll need to update the serialization in core/preview/start.js @@ -58,7 +60,11 @@ export const eventToShortcut = (e: KeyboardEvent): Shortcut | null => { }; export const shortcutMatchesShortcut = (inputShortcut: Shortcut, shortcut: Shortcut): boolean => { - return inputShortcut && inputShortcut.length === shortcut.length && !inputShortcut.find((key, i) => key !== shortcut[i]); + return ( + inputShortcut && + inputShortcut.length === shortcut.length && + !inputShortcut.find((key, i) => key !== shortcut[i]) + ); }; // Should this keyboard event trigger this keyboard shortcut? diff --git a/tslint.json b/tslint.json index 82457a182acb..6133784fb3c8 100644 --- a/tslint.json +++ b/tslint.json @@ -5,7 +5,7 @@ "prettier": { "severity": "warning", "options": { - "printWidth": 140, + "printWidth": 100, "tabWidth": 2, "bracketSpacing": true, "trailingComma": "es5",