diff --git a/index.html b/index.html index 92304e9..0a32121 100644 --- a/index.html +++ b/index.html @@ -69,13 +69,13 @@ Setup, HTML, CSS, Javascript and Intro to React
  • - + Step 1
    Typescript Basics
  • - + Step 2
    UI Fabric     @@ -89,7 +89,7 @@
  • Step 4
    - UI Fabric: Theming and Styling + Testing with jest
  • diff --git a/step2-01/index.html b/step2-01/demo/index.html similarity index 100% rename from step2-01/index.html rename to step2-01/demo/index.html diff --git a/step2-01/src/async/index.ts b/step2-01/demo/src/async/index.ts similarity index 100% rename from step2-01/src/async/index.ts rename to step2-01/demo/src/async/index.ts diff --git a/step2-01/src/generics/index.ts b/step2-01/demo/src/generics/index.ts similarity index 100% rename from step2-01/src/generics/index.ts rename to step2-01/demo/src/generics/index.ts diff --git a/step2-01/src/index.tsx b/step2-01/demo/src/index.tsx similarity index 100% rename from step2-01/src/index.tsx rename to step2-01/demo/src/index.tsx diff --git a/step2-01/src/interfaces/index.ts b/step2-01/demo/src/interfaces/index.ts similarity index 100% rename from step2-01/src/interfaces/index.ts rename to step2-01/demo/src/interfaces/index.ts diff --git a/step2-01/src/modules/default.ts b/step2-01/demo/src/modules/default.ts similarity index 100% rename from step2-01/src/modules/default.ts rename to step2-01/demo/src/modules/default.ts diff --git a/step2-01/src/modules/index.ts b/step2-01/demo/src/modules/index.ts similarity index 100% rename from step2-01/src/modules/index.ts rename to step2-01/demo/src/modules/index.ts diff --git a/step2-01/src/modules/named.ts b/step2-01/demo/src/modules/named.ts similarity index 100% rename from step2-01/src/modules/named.ts rename to step2-01/demo/src/modules/named.ts diff --git a/step2-01/src/spread/index.ts b/step2-01/demo/src/spread/index.ts similarity index 100% rename from step2-01/src/spread/index.ts rename to step2-01/demo/src/spread/index.ts diff --git a/step2-01/src/types/index.ts b/step2-01/demo/src/types/index.ts similarity index 100% rename from step2-01/src/types/index.ts rename to step2-01/demo/src/types/index.ts diff --git a/step2-02/README.md b/step2-02/README.md index 430fbea..aa26cae 100644 --- a/step2-02/README.md +++ b/step2-02/README.md @@ -1,9 +1,24 @@ # Step 2.2 -Integrates Fabric +UI Fabric is a Component Library that is developed to reflect the latest Microsoft design language. It is used in many Microsoft web applications and is developed in the open: -Learn about Basic Components +https://github.com/officedev/office-ui-fabric-react + +Documentation can be found here: + +https://developer.microsoft.com/en-us/fabric/#/components + +## Learn about Components and How to Look up Documentation - Stack -- Text -- Show case some components +- Default Button / Primary Button + +# Exercise + +- Open up the TSX files inside `components/` +- Replace the DOM tags with Fabric components in those TSX files with these components: + - Stack + - DefaultButton + - Checkbox + - TextField + - Pivot (for the filter) diff --git a/step2-02/index.html b/step2-02/demo/index.html similarity index 100% rename from step2-02/index.html rename to step2-02/demo/index.html diff --git a/step2-02/src/components/TodoApp.tsx b/step2-02/demo/src/components/TodoApp.tsx similarity index 100% rename from step2-02/src/components/TodoApp.tsx rename to step2-02/demo/src/components/TodoApp.tsx diff --git a/step2-02/src/components/TodoFooter.tsx b/step2-02/demo/src/components/TodoFooter.tsx similarity index 100% rename from step2-02/src/components/TodoFooter.tsx rename to step2-02/demo/src/components/TodoFooter.tsx diff --git a/step2-02/src/components/TodoHeader.tsx b/step2-02/demo/src/components/TodoHeader.tsx similarity index 100% rename from step2-02/src/components/TodoHeader.tsx rename to step2-02/demo/src/components/TodoHeader.tsx diff --git a/step2-02/src/components/TodoList.tsx b/step2-02/demo/src/components/TodoList.tsx similarity index 100% rename from step2-02/src/components/TodoList.tsx rename to step2-02/demo/src/components/TodoList.tsx diff --git a/step2-02/src/components/TodoListItem.tsx b/step2-02/demo/src/components/TodoListItem.tsx similarity index 100% rename from step2-02/src/components/TodoListItem.tsx rename to step2-02/demo/src/components/TodoListItem.tsx diff --git a/step2-02/src/index.tsx b/step2-02/demo/src/index.tsx similarity index 100% rename from step2-02/src/index.tsx rename to step2-02/demo/src/index.tsx diff --git a/step2-02/src/store/index.ts b/step2-02/demo/src/store/index.ts similarity index 100% rename from step2-02/src/store/index.ts rename to step2-02/demo/src/store/index.ts diff --git a/step2-02/exercise/index.html b/step2-02/exercise/index.html new file mode 100644 index 0000000..454cef5 --- /dev/null +++ b/step2-02/exercise/index.html @@ -0,0 +1,6 @@ + + + +
    + + diff --git a/step2-02/exercise/src/components/TodoApp.tsx b/step2-02/exercise/src/components/TodoApp.tsx new file mode 100644 index 0000000..bfd5d51 --- /dev/null +++ b/step2-02/exercise/src/components/TodoApp.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Stack } from 'office-ui-fabric-react'; +import { TodoFooter } from './TodoFooter'; +import { TodoHeader } from './TodoHeader'; +import { TodoList } from './TodoList'; +import { Store } from '../store'; + +export class TodoApp extends React.Component { + render() { + return ( + + + + + + + + ); + } +} diff --git a/step2-02/exercise/src/components/TodoFooter.tsx b/step2-02/exercise/src/components/TodoFooter.tsx new file mode 100644 index 0000000..72b3300 --- /dev/null +++ b/step2-02/exercise/src/components/TodoFooter.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +export const TodoFooter = (props: any) => { + const itemCount = 3; + + return ( +
    + + {itemCount} item{itemCount > 1 ? 's' : ''} left + + +
    + ); +}; diff --git a/step2-02/exercise/src/components/TodoHeader.tsx b/step2-02/exercise/src/components/TodoHeader.tsx new file mode 100644 index 0000000..602f315 --- /dev/null +++ b/step2-02/exercise/src/components/TodoHeader.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { FilterTypes } from '../store'; + +export class TodoHeader extends React.Component<{}, {}> { + render() { + return ( +
    +

    todos

    + + +
    + + + +
    +
    + ); + } +} diff --git a/step2-02/exercise/src/components/TodoList.tsx b/step2-02/exercise/src/components/TodoList.tsx new file mode 100644 index 0000000..500e3d9 --- /dev/null +++ b/step2-02/exercise/src/components/TodoList.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { Stack } from 'office-ui-fabric-react'; +import { TodoListItem } from './TodoListItem'; + +export const TodoList = (props: any) => { + return ( + + ); +}; diff --git a/step2-02/exercise/src/components/TodoListItem.tsx b/step2-02/exercise/src/components/TodoListItem.tsx new file mode 100644 index 0000000..9e48ac0 --- /dev/null +++ b/step2-02/exercise/src/components/TodoListItem.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +export class TodoListItem extends React.Component { + render() { + return ( +
  • + +
    • + ); + } +} diff --git a/step2-02/exercise/src/index.tsx b/step2-02/exercise/src/index.tsx new file mode 100644 index 0000000..2587243 --- /dev/null +++ b/step2-02/exercise/src/index.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import { TodoApp } from './components/TodoApp'; +import { initializeIcons } from '@uifabric/icons'; + +// Initializes the UI Fabric icons that we can use +// Choose one from this list: https://developer.microsoft.com/en-us/fabric#/styles/icons +initializeIcons(); + +ReactDOM.render(, document.getElementById('app')); diff --git a/step2-02/exercise/src/store/index.ts b/step2-02/exercise/src/store/index.ts new file mode 100644 index 0000000..221b5f4 --- /dev/null +++ b/step2-02/exercise/src/store/index.ts @@ -0,0 +1,14 @@ +export type FilterTypes = 'all' | 'active' | 'completed'; + +export interface TodoItem { + label: string; + completed: boolean; +} + +export interface Store { + todos: { + [id: string]: TodoItem; + }; + + filter: FilterTypes; +}