diff --git a/README.md b/README.md index 756d6f9893cc3d..e353e806ae3186 100644 --- a/README.md +++ b/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). diff --git a/ghdocs/Contributing/NewComponent.md b/ghdocs/Contributing/NewComponent.md index 0902671a9572d4..c6ffb651b524a1 100644 --- a/ghdocs/Contributing/NewComponent.md +++ b/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 { … 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 { … 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 { - public render() { + public render(): JSX.Element { return(
Hello World!
); } -}; // @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: [] + }); }); ``` diff --git a/scripts/templates/EmptyClassNames.mustache b/scripts/templates/EmptyClassNames.mustache index 69fbd0cbc7f87e..482801f6ea9f4f 100644 --- a/scripts/templates/EmptyClassNames.mustache +++ b/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: [] + }); }); diff --git a/scripts/templates/EmptyComponent.mustache b/scripts/templates/EmptyComponent.mustache index 207d68eac887f5..ee017d8dbb312f 100644 --- a/scripts/templates/EmptyComponent.mustache +++ b/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(
Hello World!
); } -}; \ No newline at end of file +} \ No newline at end of file diff --git a/scripts/templates/EmptyProps.mustache b/scripts/templates/EmptyProps.mustache index cdec473a5e7b2f..9bf949a03aa4f7 100644 --- a/scripts/templates/EmptyProps.mustache +++ b/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}} { }