Fix create-component script to build successfully and documentation to align

README.md

@@ -127,7 +127,7 @@ In Jest:
 
 For advanced usage including info about module vs. path-based imports, using an AMD bundler like Require, and deployment features, see our [advanced documentation](./ghdocs/BestPractices/Advanced.md).
 
-## Contribute to Office UI Fabric React
+## Contribute to Fabric React
 
 Please take a look at our [contribution guidelines](./ghdocs/Contributing/Contributing.md) for more info. Also read [Contribute Bug fixes](./ghdocs/Contributing/BugFixes.md) and [Contribute New component](./ghdocs/Contributing/NewComponent.md).
 

ghdocs/Contributing/NewComponent.md

@@ -60,26 +60,24 @@ Fundamental components are the official React representation of our [Adobe XD To
 
 #### Creating a component via the command line
 1. This is the recommended way of creating a new component.
-3. Open a command prompt in the root directory of your project directory.
-2. Run `npm run create-component -- --name ExcitingNewComponent`.
+2. Open a command prompt in the root directory of your project.
+3. Run `npm run create-component -- --name ExcitingNewComponent`.
 
 #### Creating a component manually
 1. From the root of the project, navigate to `packages/experiments/src/components/`
 2. Create a new folder here with your component name
-  * Our components use the Pascal Case naming convention.
-  * In this example the component will be called `ExcitingNewComponent`.
+   * Our components use the Pascal Case naming convention.
+   * In this example the component will be called `ExcitingNewComponent`.
 3. Create a `ExcitingNewComponent.types.ts` file that will contain an interface for your component props
-
-  * Import React
-    * `import * as React from 'react'`;
-  * Import ExcitingNewComponent
-    * `import { ExcitingNewComponent } from './ExcitingNewComponent'`;
-    * Note: This class and file don't exist yet but they will during step 4 of this small tutorial.
-  * Create an empty interface `IExcitingNewComponent`
-    * `export interface IExcitingNewComponent {}`
-  * Add your props interface to this file.
-    * `export interface IExcitingNewComponentProps extends React.Props<ExcitingNewComponent> { … Props }`
-  * Create and export an interface for ExcitingNewComponent styles.
+   * Import React
+     * `import * as React from 'react'`;
+   * Import ExcitingNewComponent
+     * `import { ExcitingNewComponent } from './ExcitingNewComponent'`;
+     * Note: This class and file don't exist yet but they will during step 4 of this small tutorial.
+   * Create an empty interface `IExcitingNewComponent`
+     * `export interface IExcitingNewComponent {}`
+   * Add your props interface to this file.
+     * `export interface IExcitingNewComponentProps extends React.Props<ExcitingNewComponent> { … Props }`
 
 4. Create a react file, `ExcitingNewComponent.tsx`.
 
@@ -89,19 +87,19 @@ import { BaseComponent } from '../../Utilities';
 import { IExcitingNewComponentProps } from './ExcitingNewComponent.types';
 
 export class ExcitingNewComponent extends BaseComponent <IExcitingNewComponentProps, {}> {
-  public render() {
+  public render(): JSX.Element {
     return(
       <div>Hello World!</div>
     );
   }
-}; // @todo: this ; needs to be removed
+}
 ```
 
-5. Create a class names file `ExcitingNewComponent.classNames.ts`
+5. Create a class names file `ExcitingNewComponent.styles.ts`
 
 ```ts
 import { memoizeFunction } from '../../Utilities';
-import { mergeStyleSets} from '../../Styling';
+import { mergeStyleSets, IStyle } from '../../Styling';
 
 export interface IExcitingNewComponentStyles {
    /**
@@ -111,16 +109,16 @@ export interface IExcitingNewComponentStyles {
 }
 
 export interface IExcitingNewComponentNames {
-	/**
-	* Root html container for this component.
-	*/
-	root?: string;
+  /**
+   * Root html container for this component.
+   */
+  root?: string;
 }
 
 export const getClassNames = memoizeFunction((): IExcitingNewComponentNames => {
-	return mergeStyleSets({
-		root: []
-	});
+  return mergeStyleSets({
+    root: []
+  });
 });
 ```
 

scripts/templates/EmptyClassNames.mustache

@@ -1,5 +1,5 @@
 import { memoizeFunction } from '../../Utilities';
-import { mergeStyleSets} from '../../Styling';
+import { mergeStyleSets, IStyle } from '../../Styling';
 
 export interface I{{componentName}}Styles {
    /**
@@ -9,14 +9,14 @@ export interface I{{componentName}}Styles {
 }
 
 export interface I{{componentName}}Names {
-	/**
-	* Root html container for this component.
-	*/
-	root?: string;
+  /**
+   * Root html container for this component.
+   */
+  root?: string;
 }
 
 export const getClassNames = memoizeFunction((): I{{componentName}}Names => {
-	return mergeStyleSets({
-		root: []
-	});
+  return mergeStyleSets({
+    root: []
+  });
 });

scripts/templates/EmptyComponent.mustache

@@ -3,9 +3,9 @@ import { BaseComponent } from '../../Utilities';
 import { I{{componentName}}Props } from './{{componentName}}.types';
 
 export class {{componentName}} extends BaseComponent < I{{componentName}}Props, {} > {
-  public render() {
+  public render(): JSX.Element {
     return(
       <div>Hello World!</div>
     );
   }
-};
+}

scripts/templates/EmptyProps.mustache

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { {{componentName}} } from './{{componentName}}';
-import { IStyle } from '../../Styling';
 
 export interface I{{componentName}} {
 }