{props.children};
}
- //className: "lang-jsx"
+ // className: "lang-jsx"
const language = props.className.split('-');
return 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.
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",