diff --git a/app/angular/demo.d.ts b/app/angular/demo.d.ts index 7ff09737fcd0..c2deaa98dbb3 100644 --- a/app/angular/demo.d.ts +++ b/app/angular/demo.d.ts @@ -1,4 +1,4 @@ declare module '@storybook/angular/demo' { - export const Button: any; - export const Welcome: any; -} \ No newline at end of file + export const Button: any; + export const Welcome: any; +} diff --git a/app/angular/index.d.ts b/app/angular/index.d.ts index 96e06d245966..5f5e08db0dd3 100644 --- a/app/angular/index.d.ts +++ b/app/angular/index.d.ts @@ -1,31 +1,31 @@ -import {NgModuleMetadata, ICollection} from './dist/client/preview/angular/types'; +import { NgModuleMetadata, ICollection } from './dist/client/preview/angular/types'; export interface IStorybookStory { - name: string, - render: () => any + name: string; + render: () => any; } export interface IStoribookSection { - kind: string, - stories: IStorybookStory[] + kind: string; + stories: IStorybookStory[]; } export type IGetStory = () => { - props?: ICollection; - moduleMetadata?: Partial; - component: any + props?: ICollection; + moduleMetadata?: Partial; + component: any; }; export interface IApi { - kind: string; - addDecorator: (decorator: any) => IApi; - add: (storyName: string, getStory: IGetStory ) => IApi; + kind: string; + addDecorator: (decorator: any) => IApi; + add: (storyName: string, getStory: IGetStory) => IApi; } declare module '@storybook/angular' { - export function storiesOf(kind: string, module: NodeModule): IApi; - export function setAddon(addon: any): void; - export function addDecorator(decorator: any): IApi; - export function configure(loaders: () => NodeRequire, module: NodeModule): void; - export function getStorybook(): IStoribookSection[]; + export function storiesOf(kind: string, module: NodeModule): IApi; + export function setAddon(addon: any): void; + export function addDecorator(decorator: any): IApi; + export function configure(loaders: () => NodeRequire, module: NodeModule): void; + export function getStorybook(): IStoribookSection[]; } diff --git a/app/angular/src/client/preview/angular/app.token.ts b/app/angular/src/client/preview/angular/app.token.ts index bf45fcd7720f..3e4753b21c11 100644 --- a/app/angular/src/client/preview/angular/app.token.ts +++ b/app/angular/src/client/preview/angular/app.token.ts @@ -1,4 +1,4 @@ -import { InjectionToken } from "@angular/core"; -import { NgStory } from "./types"; +import { InjectionToken } from '@angular/core'; +import { NgStory } from './types'; -export const STORY = new InjectionToken("story"); +export const STORY = new InjectionToken('story'); diff --git a/app/angular/src/client/preview/angular/components/app.component.ts b/app/angular/src/client/preview/angular/components/app.component.ts index ff4d463bf9ea..bfd812edb96c 100644 --- a/app/angular/src/client/preview/angular/components/app.component.ts +++ b/app/angular/src/client/preview/angular/components/app.component.ts @@ -13,22 +13,19 @@ import { OnDestroy, EventEmitter, SimpleChanges, - SimpleChange + SimpleChange, } from '@angular/core'; import { STORY } from '../app.token'; import { NgStory, ICollection } from '../types'; @Component({ selector: 'storybook-dynamic-app-root', - template: '' + template: '', }) export class AppComponent implements AfterViewInit, OnDestroy { @ViewChild('target', { read: ViewContainerRef }) target: ViewContainerRef; - constructor( - private cfr: ComponentFactoryResolver, - @Inject(STORY) private data: NgStory - ) {} + constructor(private cfr: ComponentFactoryResolver, @Inject(STORY) private data: NgStory) {} ngAfterViewInit(): void { this.putInMyHtml(); @@ -49,7 +46,7 @@ export class AppComponent implements AfterViewInit, OnDestroy { /** * Set inputs and outputs */ - private setProps(instance: any, {props = {}, propsMeta = {}}: NgStory): void { + private setProps(instance: any, { props = {}, propsMeta = {} }: NgStory): void { const changes: SimpleChanges = {}; const hasNgOnChangesHook = _.has(instance, 'ngOnChanges'); @@ -62,7 +59,7 @@ export class AppComponent implements AfterViewInit, OnDestroy { if (hasNgOnChangesHook) { changes[key] = new SimpleChange(undefined, value, instanceProperty === undefined); } - } else if (_.isFunction(value) && (key !== 'ngModelChange')) { + } else if (_.isFunction(value) && key !== 'ngModelChange') { instanceProperty.subscribe(value); } }); @@ -90,7 +87,7 @@ export class AppComponent implements AfterViewInit, OnDestroy { } if (_.isFunction(props.ngModelChange)) { - _.invoke(instance, 'registerOnChange', props.ngModelChange); + _.invoke(instance, 'registerOnChange', props.ngModelChange); } } } diff --git a/app/angular/src/client/preview/angular/components/error.component.ts b/app/angular/src/client/preview/angular/components/error.component.ts index e5c2588036d8..f19d679b11c8 100644 --- a/app/angular/src/client/preview/angular/components/error.component.ts +++ b/app/angular/src/client/preview/angular/components/error.component.ts @@ -1,6 +1,6 @@ -import { Component, Inject } from "@angular/core"; -import { STORY } from "../app.token"; -import { NgError } from "../types"; +import { Component, Inject } from '@angular/core'; +import { STORY } from '../app.token'; +import { NgError } from '../types'; @Component({ selector: 'storybook-dynamic-app-root', @@ -40,9 +40,9 @@ import { NgError } from "../types"; width: 100vw; overflow: auto; } - ` - ] + `, + ], }) export class ErrorComponent { constructor(@Inject(STORY) public error: NgError) {} -} \ No newline at end of file +} diff --git a/app/angular/src/client/preview/angular/components/no-preview.component.ts b/app/angular/src/client/preview/angular/components/no-preview.component.ts index 73a0d0c205e6..3e220b28cc29 100644 --- a/app/angular/src/client/preview/angular/components/no-preview.component.ts +++ b/app/angular/src/client/preview/angular/components/no-preview.component.ts @@ -1,7 +1,7 @@ -import { Component } from "@angular/core"; +import { Component } from '@angular/core'; @Component({ selector: 'storybook-dynamic-app-root', - template: "

No Preview Available!

" + template: '

No Preview Available!

', }) export class NoPreviewComponent {} diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts index 847654083b68..71cc939b4189 100644 --- a/app/angular/src/client/preview/angular/helpers.ts +++ b/app/angular/src/client/preview/angular/helpers.ts @@ -1,12 +1,5 @@ -import { - Type, - enableProdMode, - NgModule, - Component, - NgModuleRef -} from '@angular/core'; -import {FormsModule} from '@angular/forms'; - +import { Type, enableProdMode, NgModule, Component, NgModuleRef } from '@angular/core'; +import { FormsModule } from '@angular/forms'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './components/app.component'; @@ -33,13 +26,16 @@ interface IComponent extends Type { // Taken from https://davidwalsh.name/javascript-debounce-function // We don't want to pull underscore -const debounce = (func: IRenderStoryFn | IRenderErrorFn, - wait: number = 100, - immediate: boolean = false): () => void => { +const debounce = ( + func: IRenderStoryFn | IRenderErrorFn, + wait: number = 100, + immediate: boolean = false +): (() => void) => { let timeout: any; - return function () { - const context = this, args = arguments; - const later = function () { + return function() { + const context = this, + args = arguments; + const later = function() { timeout = null; if (!immediate) { func.apply(context, args); @@ -54,14 +50,17 @@ const debounce = (func: IRenderStoryFn | IRenderErrorFn, }; }; -const getComponentMetadata = ( - { component, props = {}, propsMeta = {}, moduleMetadata = { +const getComponentMetadata = ({ + component, + props = {}, + propsMeta = {}, + moduleMetadata = { imports: [], schemas: [], declarations: [], - providers: [] - } }: NgStory -) => { + providers: [], + }, +}: NgStory) => { if (!component || typeof component !== 'function') { throw new Error('No valid component provided'); } @@ -71,15 +70,10 @@ const getComponentMetadata = ( const paramsMetadata = getParameters(component); Object.keys(propsMeta).map(key => { - (propsMetadata)[key] = (propsMeta)[key]; + (propsMetadata)[key] = (propsMeta)[key]; }); - const { - imports = [], - schemas = [], - declarations = [], - providers = [] - } = moduleMetadata; + const { imports = [], schemas = [], declarations = [], providers = [] } = moduleMetadata; return { component, @@ -91,16 +85,18 @@ const getComponentMetadata = ( imports, schemas, declarations, - providers - } + providers, + }, }; }; -const getAnnotatedComponent = (meta: NgModule, - component: any, - propsMeta: { [p: string]: any }, - params: any[]): IComponent => { - const NewComponent: any = function NewComponent(...args: any[]) { +const getAnnotatedComponent = ( + meta: NgModule, + component: any, + propsMeta: { [p: string]: any }, + params: any[] +): IComponent => { + const NewComponent: any = function(...args: any[]) { component.call(this, ...args); }; @@ -112,55 +108,54 @@ const getAnnotatedComponent = (meta: NgModule, return NewComponent; }; -const getModule = (declarations: Array | any[]>, -entryComponents: Array | any[]>, -bootstrap: Array | any[]>, -data: NgProvidedData, -moduleMetadata: NgModuleMetadata = { - imports: [], - schemas: [], - declarations: [], - providers: [] -}): IModule => { +const getModule = ( + declarations: Array | any[]>, + entryComponents: Array | any[]>, + bootstrap: Array | any[]>, + data: NgProvidedData, + moduleMetadata: NgModuleMetadata = { + imports: [], + schemas: [], + declarations: [], + providers: [], + } +): IModule => { const moduleMeta = new NgModule({ declarations: [...declarations, ...moduleMetadata.declarations], imports: [BrowserModule, FormsModule, ...moduleMetadata.imports], providers: [{ provide: STORY, useValue: Object.assign({}, data) }, ...moduleMetadata.providers], entryComponents: [...entryComponents], schemas: [...moduleMetadata.schemas], - bootstrap: [...bootstrap] + bootstrap: [...bootstrap], }); - const NewModule: any = function NewModule() {}; + const NewModule: any = function() {}; (NewModule).annotations = [moduleMeta]; return NewModule; }; -const initModule = (currentStory: IGetStoryWithContext, context: IContext, reRender: boolean): IModule => { - const { - component, - componentMeta, - props, - propsMeta, - params, - moduleMeta - } = getComponentMetadata(currentStory(context)); +const initModule = ( + currentStory: IGetStoryWithContext, + context: IContext, + reRender: boolean +): IModule => { + const { component, componentMeta, props, propsMeta, params, moduleMeta } = getComponentMetadata( + currentStory(context) + ); if (!componentMeta) { throw new Error('No component metadata available'); } - const AnnotatedComponent = getAnnotatedComponent( - componentMeta, - component, - propsMeta, - [...params, ...moduleMeta.providers.map(provider => [provider])] - ); + const AnnotatedComponent = getAnnotatedComponent(componentMeta, component, propsMeta, [ + ...params, + ...moduleMeta.providers.map(provider => [provider]), + ]); const story = { component: AnnotatedComponent, props, - propsMeta + propsMeta, }; return getModule( @@ -181,23 +176,22 @@ const draw = (newModule: IModule, reRender: boolean = true): void => { platform = platformBrowserDynamic(); promises.push(platform.bootstrapModule(newModule)); } else { - Promise.all(promises) - .then((modules) => { - modules.forEach(mod => mod.destroy()); - - const body = document.body; - const app = document.createElement('storybook-dynamic-app-root'); - body.appendChild(app); - promises = []; - promises.push(platform.bootstrapModule(newModule)); - }); + Promise.all(promises).then(modules => { + modules.forEach(mod => mod.destroy()); + + const body = document.body; + const app = document.createElement('storybook-dynamic-app-root'); + body.appendChild(app); + promises = []; + promises.push(platform.bootstrapModule(newModule)); + }); } }; export const renderNgError = debounce((error: Error) => { const errorData = { message: error.message, - stack: error.stack + stack: error.stack, }; const Module = getModule([ErrorComponent], [], [ErrorComponent], errorData); @@ -206,15 +200,10 @@ export const renderNgError = debounce((error: Error) => { }); export const renderNoPreview = debounce(() => { - const Module = getModule( - [NoPreviewComponent], - [], - [NoPreviewComponent], - { - message: 'No Preview available.', - stack: '' - } - ); + const Module = getModule([NoPreviewComponent], [], [NoPreviewComponent], { + message: 'No Preview available.', + stack: '', + }); draw(Module); }); diff --git a/app/angular/src/client/preview/angular/types.ts b/app/angular/src/client/preview/angular/types.ts index ae1501e3e995..d77d4284a9f4 100644 --- a/app/angular/src/client/preview/angular/types.ts +++ b/app/angular/src/client/preview/angular/types.ts @@ -1,8 +1,8 @@ export interface NgModuleMetadata { - declarations: Array; - imports: Array; - schemas: Array; - providers: Array; + declarations: Array; + imports: Array; + schemas: Array; + providers: Array; } export interface ICollection { @@ -10,21 +10,21 @@ export interface ICollection { } export interface NgStory { - component: any; - props: ICollection; - propsMeta: ICollection; - moduleMetadata?: NgModuleMetadata; + component: any; + props: ICollection; + propsMeta: ICollection; + moduleMetadata?: NgModuleMetadata; } export interface NgError { - message: string; - stack: string; + message: string; + stack: string; } export type NgProvidedData = NgStory | NgError; export interface IContext { - [p: string]: any; + [p: string]: any; } export type IGetStoryWithContext = (context: IContext) => NgStory; diff --git a/app/angular/src/client/preview/angular/utils.ts b/app/angular/src/client/preview/angular/utils.ts index fe83324fa0de..48ef75b953dc 100644 --- a/app/angular/src/client/preview/angular/utils.ts +++ b/app/angular/src/client/preview/angular/utils.ts @@ -35,4 +35,4 @@ export function getParameters(component: any) { } return params; -} \ No newline at end of file +} diff --git a/app/angular/src/demo/button.component.ts b/app/angular/src/demo/button.component.ts index cc03d44f7432..bb292c9793af 100644 --- a/app/angular/src/demo/button.component.ts +++ b/app/angular/src/demo/button.component.ts @@ -1,12 +1,12 @@ import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ - selector: 'button-component', + selector: 'storybook-button-component', template: ` `, styles: [ - ` + ` button { border: 1px solid #eee; border-radius: 3px; @@ -16,10 +16,10 @@ import { Component, Input, Output, EventEmitter } from '@angular/core'; padding: 3px 10px; margin: 10px; } - ` - ] + `, + ], }) export default class ButtonComponent { - @Input() text = ''; - @Output() onClick = new EventEmitter(); -} \ No newline at end of file + @Input() text = ''; + @Output() onClick = new EventEmitter(); +} diff --git a/app/angular/src/demo/welcome.component.ts b/app/angular/src/demo/welcome.component.ts index 99c240ce5669..ca7a7c2f9fbb 100644 --- a/app/angular/src/demo/welcome.component.ts +++ b/app/angular/src/demo/welcome.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; @Component({ - selector: 'welcome-component', + selector: 'storybook-welcome-component', template: `

Welcome to storybook

@@ -15,7 +15,8 @@ import { Component } from '@angular/core'; (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. @@ -38,12 +39,13 @@ import { Component } from '@angular/core';

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.

`, styles: [ - ` + ` main { margin: 15px; max-width: 600; @@ -71,9 +73,9 @@ import { Component } from '@angular/core'; border-bottom: 1px solid #1474f3; padding-bottom: 2px; } - ` - ] + `, + ], }) export default class WelcomeComponent { - displayName = 'Welcome'; -} \ No newline at end of file + displayName = 'Welcome'; +} diff --git a/examples/angular-cli/e2e/app.e2e-spec.ts b/examples/angular-cli/e2e/app.e2e-spec.ts index 626e67bd1b3c..a62d4d0620f3 100644 --- a/examples/angular-cli/e2e/app.e2e-spec.ts +++ b/examples/angular-cli/e2e/app.e2e-spec.ts @@ -10,6 +10,6 @@ describe('ng5test App', () => { it('should display welcome message', () => { page.navigateTo(); - expect((page.getParagraphText())).toEqual('Welcome to app!'); + expect(page.getParagraphText()).toEqual('Welcome to app!'); }); }); diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json index 2a0a9e2ba701..b5fbeeb1cd9b 100644 --- a/examples/angular-cli/package.json +++ b/examples/angular-cli/package.json @@ -7,7 +7,6 @@ "start": "ng serve", "build": "ng build", "test": "ng test", - "lint": "ng lint", "e2e": "ng e2e", "storybook": "start-storybook -p 9008 -s src/assets", "build-storybook": "build-storybook -s src" @@ -38,7 +37,6 @@ "@storybook/angular": "^3.3.6", "@types/jasmine": "~2.8.3", "@types/node": "~6.0.96", - "codelyzer": "^3.1.2", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~1.7.0", @@ -49,7 +47,6 @@ "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.2.2", "ts-node": "~3.3.0", - "tslint": "~5.8.0", "typescript": "^2.4.0" } } diff --git a/examples/angular-cli/src/app/app.component.spec.ts b/examples/angular-cli/src/app/app.component.spec.ts index fe5d07ecaf8d..32ab9b0638a1 100644 --- a/examples/angular-cli/src/app/app.component.spec.ts +++ b/examples/angular-cli/src/app/app.component.spec.ts @@ -4,30 +4,39 @@ import 'jasmine'; import { AppComponent } from './app.component'; describe('AppComponent', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], - }).compileComponents(); - })); + beforeEach( + async(() => { + TestBed.configureTestingModule({ + declarations: [AppComponent], + }).compileComponents(); + }) + ); - it('should create the app', async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app).toBeTruthy(); - })); + it( + 'should create the app', + async(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.debugElement.componentInstance; + expect(app).toBeTruthy(); + }) + ); - it(`should have as title 'app'`, async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app.title).toEqual('app'); - })); + it( + `should have as title 'app'`, + async(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.debugElement.componentInstance; + expect(app.title).toEqual('app'); + }) + ); - it('should render title in a h1 tag', async(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!'); - })); + it( + 'should render title in a h1 tag', + async(() => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.debugElement.nativeElement; + expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!'); + }) + ); }); diff --git a/examples/angular-cli/src/app/app.component.ts b/examples/angular-cli/src/app/app.component.ts index 7b0f67283151..ee0aae14ef30 100644 --- a/examples/angular-cli/src/app/app.component.ts +++ b/examples/angular-cli/src/app/app.component.ts @@ -1,9 +1,9 @@ import { Component } from '@angular/core'; @Component({ - selector: 'app-root', + selector: 'storybook-app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], }) export class AppComponent { title = 'app'; diff --git a/examples/angular-cli/src/app/app.module.ts b/examples/angular-cli/src/app/app.module.ts index f65716351aa5..5ce7811a4c03 100644 --- a/examples/angular-cli/src/app/app.module.ts +++ b/examples/angular-cli/src/app/app.module.ts @@ -4,13 +4,9 @@ import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule - ], + declarations: [AppComponent], + imports: [BrowserModule], providers: [], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/examples/angular-cli/src/environments/environment.prod.ts b/examples/angular-cli/src/environments/environment.prod.ts index 3612073bc31c..c9669790be17 100644 --- a/examples/angular-cli/src/environments/environment.prod.ts +++ b/examples/angular-cli/src/environments/environment.prod.ts @@ -1,3 +1,3 @@ export const environment = { - production: true + production: true, }; diff --git a/examples/angular-cli/src/environments/environment.ts b/examples/angular-cli/src/environments/environment.ts index b7f639aecac5..cf6bba0df389 100644 --- a/examples/angular-cli/src/environments/environment.ts +++ b/examples/angular-cli/src/environments/environment.ts @@ -4,5 +4,5 @@ // The list of which env maps to which file can be found in `.angular-cli.json`. export const environment = { - production: false + production: false, }; diff --git a/examples/angular-cli/src/polyfills.ts b/examples/angular-cli/src/polyfills.ts index 7831e97b79a4..fbd11b818513 100644 --- a/examples/angular-cli/src/polyfills.ts +++ b/examples/angular-cli/src/polyfills.ts @@ -41,21 +41,16 @@ import 'core-js/es6/reflect'; import 'core-js/es7/reflect'; - /** * Required to support Web Animations `@angular/animation`. * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation **/ // import 'web-animations-js'; // Run `npm install --save web-animations-js`. - - /*************************************************************************************************** * Zone JS is required by Angular itself. */ -import 'zone.js/dist/zone'; // Included with Angular CLI. - - +import 'zone.js/dist/zone'; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS diff --git a/examples/angular-cli/src/stories/addon-actions.stories.ts b/examples/angular-cli/src/stories/addon-actions.stories.ts index 8154940d7232..6820b38ce4cb 100644 --- a/examples/angular-cli/src/stories/addon-actions.stories.ts +++ b/examples/angular-cli/src/stories/addon-actions.stories.ts @@ -7,8 +7,8 @@ storiesOf('Addon Actions', module) component: Button, props: { text: 'Action only', - onClick: action('log 1') - } + onClick: action('log 1'), + }, })) .add('Action and method', () => ({ component: Button, @@ -18,6 +18,6 @@ storiesOf('Addon Actions', module) console.log(e); e.preventDefault(); action('log2')(e.target); - } - } + }, + }, })); diff --git a/examples/angular-cli/src/stories/addon-knobs.stories.ts b/examples/angular-cli/src/stories/addon-knobs.stories.ts index 7f18bf98584a..9671aa8fc1fc 100644 --- a/examples/angular-cli/src/stories/addon-knobs.stories.ts +++ b/examples/angular-cli/src/stories/addon-knobs.stories.ts @@ -28,8 +28,8 @@ storiesOf('Addon Knobs', module) props: { name, age, - phoneNumber - } + phoneNumber, + }, }; }) .add('All knobs', () => { @@ -64,7 +64,7 @@ storiesOf('Addon Knobs', module) border, today, items, - nice - } + nice, + }, }; }); diff --git a/examples/angular-cli/src/stories/addon-notes.stories.ts b/examples/angular-cli/src/stories/addon-notes.stories.ts index bee7284d04ee..64468bb5e256 100644 --- a/examples/angular-cli/src/stories/addon-notes.stories.ts +++ b/examples/angular-cli/src/stories/addon-notes.stories.ts @@ -10,7 +10,7 @@ storiesOf('Addon Notes', module) props: { text: 'Notes on some Button', onClick: () => {}, - } + }, })) ) .add( @@ -28,6 +28,6 @@ storiesOf('Addon Notes', module) props: { text: 'Notes with HTML', onClick: () => {}, - } + }, })) ); diff --git a/examples/angular-cli/src/stories/all-knobs.component.ts b/examples/angular-cli/src/stories/all-knobs.component.ts index 52c4976b6948..56574f004478 100644 --- a/examples/angular-cli/src/stories/all-knobs.component.ts +++ b/examples/angular-cli/src/stories/all-knobs.component.ts @@ -1,8 +1,7 @@ -import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core'; -import { NgStyle } from '@angular/common'; +import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core'; @Component({ - selector: 'simple-knobs-component', + selector: 'storybook-simple-knobs-component', template: `

My name is {{ name }},

@@ -18,15 +17,9 @@ import { NgStyle } from '@angular/common';

Nice to meet you!

Leave me alone!

- ` + `, }) export class AllKnobsComponent implements OnChanges, OnInit { - ngOnInit(): void { - console.log('on init, user component'); - } - ngOnChanges(changes: SimpleChanges): void { - console.log(changes); - } @Input() price; @Input() border; @Input() fruit; @@ -39,4 +32,11 @@ export class AllKnobsComponent implements OnChanges, OnInit { constructor() { console.log('constructor'); } + + ngOnInit(): void { + console.log('on init, user component'); + } + ngOnChanges(changes: SimpleChanges): void { + console.log(changes); + } } diff --git a/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts b/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts index e3bb1396b8a6..e17f46d47c23 100644 --- a/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts +++ b/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts @@ -6,14 +6,13 @@ storiesOf('Component dependencies', module) .add('inputs and inject dependencies', () => ({ component: DiComponent, props: { - title: 'Component dependencies' - } + title: 'Component dependencies', + }, })) .addDecorator(withKnobs) .add('inputs and inject dependencies with knobs', () => ({ component: DiComponent, props: { - title: text('title', 'Component dependencies') - } + title: text('title', 'Component dependencies'), + }, })); - 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 e3bb5df5dec1..2c96f1b107b6 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 @@ -3,11 +3,9 @@ import { Component, Input, InjectionToken, Injector, ElementRef, Inject } from ' export const TEST_TOKEN = new InjectionToken('test'); @Component({ - selector: 'di-component', + selector: 'storybook-di-component', templateUrl: './di.component.html', - providers: [ - { provide: TEST_TOKEN, useValue: 123} - ] + providers: [{ provide: TEST_TOKEN, useValue: 123 }], }) export class DiComponent { @Input() title: string; diff --git a/examples/angular-cli/src/stories/custom-metadata.stories.ts b/examples/angular-cli/src/stories/custom-metadata.stories.ts index 80e014205ae0..2d5a2d2b2181 100644 --- a/examples/angular-cli/src/stories/custom-metadata.stories.ts +++ b/examples/angular-cli/src/stories/custom-metadata.stories.ts @@ -4,21 +4,20 @@ import { withKnobs, text } from '@storybook/addon-knobs/angular'; import { NameComponent } from './name.component'; import { CustomPipePipe } from './custom.pipe'; import { DummyService } from './moduleMetadata/dummy.service'; -import { ServiceComponent } from './moduleMetadata/service.component' +import { ServiceComponent } from './moduleMetadata/service.component'; -storiesOf('Custom Pipe', module) - .add('Default', () => ({ - component: NameComponent, - props: { - field: 'foobar', - }, - moduleMetadata: { - imports: [], - schemas: [], - declarations: [CustomPipePipe], - providers: [] - } - })); +storiesOf('Custom Pipe', module).add('Default', () => ({ + component: NameComponent, + props: { + field: 'foobar', + }, + moduleMetadata: { + imports: [], + schemas: [], + declarations: [CustomPipePipe], + providers: [], + }, +})); storiesOf('Custom Pipe/With Knobs', module) .addDecorator(withKnobs) @@ -31,22 +30,22 @@ storiesOf('Custom Pipe/With Knobs', module) imports: [], schemas: [], declarations: [CustomPipePipe], - providers: [] - } + providers: [], + }, })); storiesOf('Custom ngModule metadata', module) .add('simple', () => ({ component: ServiceComponent, props: { - name: 'Static name' + name: 'Static name', }, moduleMetadata: { imports: [], schemas: [], declarations: [], - providers: [DummyService] - } + providers: [DummyService], + }, })) .addDecorator(withKnobs) .add('with knobs', () => { @@ -55,13 +54,13 @@ storiesOf('Custom ngModule metadata', module) return { component: ServiceComponent, props: { - name + name, }, moduleMetadata: { imports: [], schemas: [], declarations: [], - providers: [DummyService] - } + providers: [DummyService], + }, }; }); diff --git a/examples/angular-cli/src/stories/custom.pipe.ts b/examples/angular-cli/src/stories/custom.pipe.ts index 7c72cbc89bd7..0e55d112c41e 100644 --- a/examples/angular-cli/src/stories/custom.pipe.ts +++ b/examples/angular-cli/src/stories/custom.pipe.ts @@ -1,7 +1,7 @@ import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ - name: 'customPipe' + name: 'customPipe', }) export class CustomPipePipe implements PipeTransform { transform(value: any, args?: any): any { diff --git a/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts b/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts index 214235d7be17..441aa4459edc 100644 --- a/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts +++ b/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts @@ -1,17 +1,19 @@ -import {storiesOf} from '@storybook/angular'; -import {action} from '@storybook/addon-actions'; -import {withNotes} from '@storybook/addon-notes'; -import {CustomCvaComponent} from './custom-cva.component'; +import { storiesOf } from '@storybook/angular'; +import { action } from '@storybook/addon-actions'; +import { withNotes } from '@storybook/addon-notes'; +import { CustomCvaComponent } from './custom-cva.component'; -const description = ` +const description = ` This is an example of component that implements ControlValueAccessor interface `; -storiesOf('ngModel', module) - .add('custom ControlValueAccessor', withNotes(description)(() => ({ +storiesOf('ngModel', module).add( + 'custom ControlValueAccessor', + withNotes(description)(() => ({ component: CustomCvaComponent, props: { ngModel: 'Type anything', - ngModelChange: action('ngModelChnange') - } - }))); \ No newline at end of file + ngModelChange: action('ngModelChnange'), + }, + })) +); diff --git a/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva.component.ts b/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva.component.ts index 095c5254938c..48a959aa4743 100644 --- a/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva.component.ts +++ b/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva.component.ts @@ -4,7 +4,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; const NOOP = () => {}; @Component({ - selector: 'custom-cva-component', + selector: 'storybook-custom-cva-component', template: `
{{value}}
@@ -14,8 +14,8 @@ const NOOP = () => {}; provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomCvaComponent), multi: true, - } - ] + }, + ], }) export class CustomCvaComponent implements ControlValueAccessor { disabled: boolean; diff --git a/examples/angular-cli/src/stories/index.ts b/examples/angular-cli/src/stories/index.ts index 08847b245744..6a58aba9fa28 100644 --- a/examples/angular-cli/src/stories/index.ts +++ b/examples/angular-cli/src/stories/index.ts @@ -4,40 +4,36 @@ import { linkTo } from '@storybook/addon-links'; import { Welcome, Button } from '@storybook/angular/demo'; import { AppComponent } from '../app/app.component'; -storiesOf('Welcome', module) - .add('to Storybook', () => ({ - component: Welcome, - props: {} - })); +storiesOf('Welcome', module).add('to Storybook', () => ({ + component: Welcome, + props: {}, +})); storiesOf('Button', module) .add('with text', () => ({ component: Button, props: { text: 'Hello Button', - onClick: () => {} - } + onClick: () => {}, + }, })) .add('with some emoji', () => ({ component: Button, props: { text: '😀 😎 👍 💯', - onClick: () => {} - } - })); - -storiesOf('Another Button', module) - .add('button with link to another story', () => ({ - component: Button, - props: { - text: 'Go to Welcome Story', - onClick: linkTo('Welcome') - } + onClick: () => {}, + }, })); -storiesOf('App Component', module) - .add('Component with separate template', () => ({ - component: AppComponent, - props: {} - })); +storiesOf('Another Button', module).add('button with link to another story', () => ({ + component: Button, + props: { + text: 'Go to Welcome Story', + onClick: linkTo('Welcome'), + }, +})); +storiesOf('App Component', module).add('Component with separate template', () => ({ + component: AppComponent, + props: {}, +})); diff --git a/examples/angular-cli/src/stories/knobs.component.ts b/examples/angular-cli/src/stories/knobs.component.ts index 922f552b3090..170137c965cc 100644 --- a/examples/angular-cli/src/stories/knobs.component.ts +++ b/examples/angular-cli/src/stories/knobs.component.ts @@ -1,14 +1,14 @@ -import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { Component, Input } from '@angular/core'; @Component({ - selector: 'simple-knobs-component', + selector: 'storybook-simple-knobs-component', template: `
I am {{ name }} and I'm {{ age }} years old.
Phone Number: {{ phoneNumber }}
- ` + `, }) export class SimpleKnobsComponent { - @Input() name; - @Input() age; - @Input() phoneNumber; + @Input() name; + @Input() age; + @Input() phoneNumber; } diff --git a/examples/angular-cli/src/stories/moduleMetadata/dummy.service.ts b/examples/angular-cli/src/stories/moduleMetadata/dummy.service.ts index 2bc0173e0d95..fb2c3e894b17 100644 --- a/examples/angular-cli/src/stories/moduleMetadata/dummy.service.ts +++ b/examples/angular-cli/src/stories/moduleMetadata/dummy.service.ts @@ -2,16 +2,13 @@ import { Injectable } from '@angular/core'; @Injectable() export class DummyService { - constructor() { } + constructor() {} getItems() { - return new Promise((resolve) => { + return new Promise(resolve => { setTimeout(() => { - resolve([ - "Joe", - "Jane" - ]) - }, 2000) - }) + resolve(['Joe', 'Jane']); + }, 2000); + }); } } diff --git a/examples/angular-cli/src/stories/moduleMetadata/service.component.ts b/examples/angular-cli/src/stories/moduleMetadata/service.component.ts index 78c02750fddc..d9a8b931e142 100644 --- a/examples/angular-cli/src/stories/moduleMetadata/service.component.ts +++ b/examples/angular-cli/src/stories/moduleMetadata/service.component.ts @@ -1,8 +1,8 @@ -import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { DummyService } from './dummy.service'; @Component({ - selector: 'simple-service-component', + selector: 'storybook-simple-service-component', template: `

{{ name }}:

    @@ -10,9 +10,9 @@ import { DummyService } from './dummy.service'; {{ item }}
- ` + `, }) -export class ServiceComponent { +export class ServiceComponent implements OnInit { items; @Input() name; diff --git a/examples/angular-cli/src/stories/name.component.ts b/examples/angular-cli/src/stories/name.component.ts index 79a6e95e21ee..b357d8612b96 100644 --- a/examples/angular-cli/src/stories/name.component.ts +++ b/examples/angular-cli/src/stories/name.component.ts @@ -1,8 +1,8 @@ import { Component, Input } from '@angular/core'; @Component({ - selector: 'name', - template: `

{{ field | customPipe }}

` + selector: 'storybook-name', + template: `

{{ field | customPipe }}

`, }) export class NameComponent { @Input() field; diff --git a/examples/angular-cli/src/test.ts b/examples/angular-cli/src/test.ts index cd612eeb0e2f..fe4ee8c6c320 100644 --- a/examples/angular-cli/src/test.ts +++ b/examples/angular-cli/src/test.ts @@ -9,7 +9,7 @@ import 'zone.js/dist/fake-async-test'; import { getTestBed } from '@angular/core/testing'; import { BrowserDynamicTestingModule, - platformBrowserDynamicTesting + platformBrowserDynamicTesting, } from '@angular/platform-browser-dynamic/testing'; // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. @@ -17,13 +17,10 @@ declare const __karma__: any; declare const require: any; // Prevent Karma from running prematurely. -__karma__.loaded = function () {}; +__karma__.loaded = function() {}; // First, initialize the Angular testing environment. -getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting() -); +getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); // Then we find all the tests. const context = require.context('./', true, /\.spec\.ts$/); // And load the modules. diff --git a/examples/angular-cli/tslint.json b/examples/angular-cli/tslint.json deleted file mode 100644 index 0db5751c7847..000000000000 --- a/examples/angular-cli/tslint.json +++ /dev/null @@ -1,142 +0,0 @@ -{ - "rulesDirectory": [ - "node_modules/codelyzer" - ], - "rules": { - "arrow-return-shorthand": true, - "callable-types": true, - "class-name": true, - "comment-format": [ - true, - "check-space" - ], - "curly": true, - "eofline": true, - "forin": true, - "import-blacklist": [ - true, - "rxjs" - ], - "import-spacing": true, - "indent": [ - true, - "spaces" - ], - "interface-over-type-literal": true, - "label-position": true, - "max-line-length": [ - true, - 140 - ], - "member-access": false, - "member-ordering": [ - true, - { - "order": [ - "static-field", - "instance-field", - "static-method", - "instance-method" - ] - } - ], - "no-arg": true, - "no-bitwise": true, - "no-console": [ - true, - "debug", - "info", - "time", - "timeEnd", - "trace" - ], - "no-construct": true, - "no-debugger": true, - "no-duplicate-super": true, - "no-empty": false, - "no-empty-interface": true, - "no-eval": true, - "no-inferrable-types": [ - true, - "ignore-params" - ], - "no-misused-new": true, - "no-non-null-assertion": true, - "no-shadowed-variable": true, - "no-string-literal": false, - "no-string-throw": true, - "no-switch-case-fall-through": true, - "no-trailing-whitespace": true, - "no-unnecessary-initializer": true, - "no-unused-expression": true, - "no-use-before-declare": true, - "no-var-keyword": true, - "object-literal-sort-keys": false, - "one-line": [ - true, - "check-open-brace", - "check-catch", - "check-else", - "check-whitespace" - ], - "prefer-const": true, - "quotemark": [ - true, - "single" - ], - "radix": true, - "semicolon": [ - true, - "always" - ], - "triple-equals": [ - true, - "allow-null-check" - ], - "typedef-whitespace": [ - true, - { - "call-signature": "nospace", - "index-signature": "nospace", - "parameter": "nospace", - "property-declaration": "nospace", - "variable-declaration": "nospace" - } - ], - "typeof-compare": true, - "unified-signatures": true, - "variable-name": false, - "whitespace": [ - true, - "check-branch", - "check-decl", - "check-operator", - "check-separator", - "check-type" - ], - "directive-selector": [ - true, - "attribute", - "app", - "camelCase" - ], - "component-selector": [ - true, - "element", - "app", - "kebab-case" - ], - "use-input-property-decorator": true, - "use-output-property-decorator": true, - "use-host-property-decorator": true, - "no-input-rename": true, - "no-output-rename": true, - "use-life-cycle-interface": true, - "use-pipe-transform-interface": true, - "component-class-suffix": true, - "directive-class-suffix": true, - "no-access-missing-member": true, - "templates-use-public": true, - "invoke-injectable": true - } -} diff --git a/package.json b/package.json index 45bb6ff6d945..f87efd68f424 100644 --- a/package.json +++ b/package.json @@ -21,8 +21,9 @@ "docs:deploy:manual": "npm --prefix docs run deploy:manual", "docs:dev": "npm --prefix docs run dev", "github-release": "github-release-from-changelog", - "lint": "yarn lint:js . && yarn lint:md .", + "lint": "yarn lint:js . && yarn lint:ts && yarn lint:md .", "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.json", + "lint:ts": "tslint -p . -t stylish -e '{**/node_modules/**,**/dist/**,lib/cli/test/**,**/storybook-static/**}' **/*.ts", "lint:md": "remark", "publish": "lerna publish", "postpublish": "yarn --cwd lib/cli test -o", @@ -45,6 +46,7 @@ "babel-preset-stage-0": "^6.24.1", "chalk": "^2.3.0", "codecov": "^3.0.0", + "codelyzer": "^3.1.2", "commander": "^2.12.2", "cross-env": "^5.1.3", "danger": "^2.1.6", @@ -89,7 +91,10 @@ "remark-lint-code-eslint": "^2.0.0", "remark-preset-lint-recommended": "^3.0.1", "shelljs": "^0.7.8", - "symlink-dir": "^1.1.1" + "symlink-dir": "^1.1.1", + "tslint": "~5.8.0", + "tslint-config-prettier": "^1.6.0", + "tslint-plugin-prettier": "^1.3.0" }, "engines": { "node": ">=8.0.0", @@ -106,6 +111,10 @@ "yarn lint:js --fix", "git add" ], + "*.ts": [ + "yarn lint:ts --fix", + "git add" + ], "*.json": [ "yarn lint:js --fix", "git add" diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 000000000000..85db264eac0b --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "skipLibCheck": true, + "noImplicitAny": true, + "lib": [ + "es2016", + "dom" + ] + } +} \ No newline at end of file diff --git a/app/angular/tslint.json b/tslint.json similarity index 88% rename from app/angular/tslint.json rename to tslint.json index d7a4fdd18456..7ab31c67093e 100644 --- a/app/angular/tslint.json +++ b/tslint.json @@ -1,8 +1,22 @@ { + "extends": [ + "tslint-plugin-prettier", + "tslint-config-prettier" + ], "rulesDirectory": [ "node_modules/codelyzer" ], "rules": { + "prettier": { + "severity": "warning", + "options": { + "printWidth": 100, + "tabWidth": 2, + "bracketSpacing": true, + "trailingComma": "es5", + "singleQuote": true + } + }, "arrow-return-shorthand": true, "callable-types": true, "class-name": true, @@ -20,7 +34,8 @@ "import-spacing": true, "indent": [ true, - "spaces" + "spaces", + 2 ], "interface-over-type-literal": true, "label-position": true, @@ -71,6 +86,7 @@ "no-unused-expression": true, "no-use-before-declare": true, "no-var-keyword": true, + "no-unused-variable": true, "object-literal-sort-keys": false, "one-line": [ true, @@ -106,14 +122,6 @@ "typeof-compare": true, "unified-signatures": true, "variable-name": false, - "whitespace": [ - true, - "check-branch", - "check-decl", - "check-operator", - "check-separator", - "check-type" - ], "directive-selector": [ true, "attribute", diff --git a/yarn.lock b/yarn.lock index dec7ec526c9d..541d0fcb07d4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4635,7 +4635,7 @@ eslint-plugin-jsx-a11y@^6.0.3: emoji-regex "^6.1.0" jsx-ast-utils "^2.0.0" -eslint-plugin-prettier@^2.4.0: +eslint-plugin-prettier@^2.2.0, eslint-plugin-prettier@^2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.4.0.tgz#85cab0775c6d5e3344ef01e78d960f166fb93aae" dependencies: @@ -13671,6 +13671,17 @@ tslib@^1.7.1, tslib@^1.8.1: version "1.8.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.8.1.tgz#6946af2d1d651a7b1863b531d6e5afa41aa44eac" +tslint-config-prettier@^1.6.0: + version "1.6.0" + resolved "https://registry.yarnpkg.com/tslint-config-prettier/-/tslint-config-prettier-1.6.0.tgz#fec1ee8fb07e8f033c63fed6b135af997f31962a" + +tslint-plugin-prettier@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/tslint-plugin-prettier/-/tslint-plugin-prettier-1.3.0.tgz#7eb65d19ea786a859501a42491b78c5de2031a3f" + dependencies: + eslint-plugin-prettier "^2.2.0" + tslib "^1.7.1" + tslint@~5.8.0: version "5.8.0" resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.8.0.tgz#1f49ad5b2e77c76c3af4ddcae552ae4e3612eb13"