This repository has been archived by the owner on Nov 16, 2023. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
194 changed files
with
103,939 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,4 +4,3 @@ lib | |
*.log | ||
.DS_Store | ||
tmp.json | ||
/build |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
html { | ||
box-sizing: border-box; | ||
} | ||
*, | ||
*:before, | ||
*:after { | ||
box-sizing: inherit; | ||
} | ||
|
||
body { | ||
background-color: #f3f2f1; | ||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjxzdmcgIHdpZHRoPSI2MDAiICBoZWlnaHQ9IjYwMCIgIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMCwzMDApIj4gICAgPHBhdGggZD0iTTEyMi42LC0xMTQuOEMxNzAuMywtNzUsMjI4LjEsLTM3LjUsMjM0LjQsNi4yQzI0MC42LDUwLDE5NS4zLDk5LjksMTQ3LjYsMTI5LjZDOTkuOSwxNTkuMyw1MCwxNjguNiw0LjcsMTYzLjlDLTQwLjUsMTU5LjIsLTgxLjEsMTQwLjQsLTExNS43LDExMC43Qy0xNTAuNCw4MS4xLC0xNzkuMiw0MC41LC0xOTMuOCwtMTQuNkMtMjA4LjQsLTY5LjgsLTIwOC45LC0xMzkuNSwtMTc0LjIsLTE3OS40Qy0xMzkuNSwtMjE5LjIsLTY5LjgsLTIyOS4xLC0xNi4xLC0yMTNDMzcuNSwtMTk2LjgsNzUsLTE1NC42LDEyMi42LC0xMTQuOFoiIGZpbGw9IiMzZDk3ZTMiIC8+ICA8L2c+PC9zdmc+); | ||
background-attachment: fixed; | ||
background-position: 50% 50%; | ||
background-repeat: no-repeat; | ||
background-size: 900px 740px; | ||
} | ||
|
||
.Container { | ||
justify-content: center; | ||
padding: 20px 0; | ||
max-width: 1040px; | ||
margin: 0 auto; | ||
} | ||
|
||
.Tiles { | ||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); | ||
grid-gap: 20px; | ||
display: grid; | ||
list-style-type: none; | ||
margin: 0; | ||
padding: 0; | ||
} | ||
|
||
.Tile { | ||
background-color: white; | ||
border-radius: 2px; | ||
box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108); | ||
opacity: 0.96; | ||
transition: all 0.15s linear; | ||
} | ||
|
||
.Tile:not(.Tile--intro):hover { | ||
box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108); | ||
opacity: 1; | ||
} | ||
|
||
.Tile-link { | ||
align-items: center; | ||
color: #323130; | ||
display: flex; | ||
flex-direction: column; | ||
height: 148px; | ||
justify-content: center; | ||
text-align: center; | ||
text-decoration: none; | ||
} | ||
|
||
.Tile-link i { | ||
font-size: 32px; | ||
margin-bottom: 12px; | ||
color: #605e5c; | ||
} | ||
|
||
.Tile--intro { | ||
grid-column: span 2; | ||
padding: 20px; | ||
} | ||
|
||
.Tile--intro h1 { | ||
font-size: 24px; | ||
font-weight: 300; | ||
margin: 8px 0; | ||
padding: 0; | ||
} | ||
|
||
.Tile--intro p { | ||
font-size: 14px; | ||
margin: 0; | ||
} | ||
|
||
.Tile--intro a, | ||
.Tile--intro a:visited { | ||
color: #0078d4; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,147 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css" /> | ||
<link rel="stylesheet" href="./assets/shared.css" /> | ||
</head> | ||
<body class="ms-Fabric"> | ||
<div class="Container"> | ||
<h1>Frontend Bootcamp</h1> | ||
<a href="https://github.com/kenotron/bootcamp">github sources</a> | ||
</div> | ||
<div class="Container"> | ||
<ul class="Tiles"> | ||
<li class="Tile Tile--intro"> | ||
<h2>Day 1</h2> | ||
Setup, HTML, CSS, Javascript and Intro to React | ||
</li> | ||
<li class="Tile"> | ||
<a target="_blank" href="/step1-00/" class="Tile-link"> | ||
Step 0 <br /> | ||
HTML/CSS/JS | ||
</a> | ||
</li> | ||
<li class="Tile"> | ||
<a target="_blank" href="/step1-01/" class="Tile-link"> | ||
Step 1 <br /> | ||
Todo HTML | ||
</a> | ||
</li> | ||
<li class="Tile"> | ||
<a target="_blank" href="/step1-02/" class="Tile-link"> | ||
Step 2 <br /> | ||
Todo CSS | ||
</a> | ||
</li> | ||
<li class="Tile"> | ||
<a target="_blank" href="/step1-03/" class="Tile-link"> | ||
Step 3 <br /> | ||
Todo JS | ||
</a> | ||
</li> | ||
<li class="Tile"> | ||
<a target="_blank" href="/step1-04/" class="Tile-link"> | ||
Step 4 <br /> | ||
React Intro | ||
</a> | ||
</li> | ||
<li class="Tile"> | ||
<a target="_blank" href="/step1-05/" class="Tile-link"> | ||
Step 5 <br /> | ||
React Components | ||
</a> | ||
</li> | ||
<li class="Tile"> | ||
<a target="_blank" href="/step1-06/" class="Tile-link"> | ||
Step 6 <br /> | ||
State Driven UI | ||
</a> | ||
</li> | ||
<li class="Tile"> | ||
<a target="_blank" href="/step1-07/" class="Tile-link"> | ||
Step 7 <br /> | ||
UI Driven State | ||
</a> | ||
</li> | ||
</ul> | ||
</div> | ||
<div class="Container"> | ||
<ul class="Tiles"> | ||
<li class="Tile Tile--intro"> | ||
<h2>Day 2</h2> | ||
UI Fabric and Redux Deep Dive | ||
</li> | ||
<li class="Tile"> | ||
<div class="Tile-link"> | ||
Step 1<br /> | ||
Typescript Basics | ||
<div><a target="_blank" href="/step2-01/demo/">demo</a> | <a target="_blank" href="/step2-01/exercise/">exercise</a></div> | ||
</div> | ||
</li> | ||
<li class="Tile"> | ||
<div class="Tile-link"> | ||
Step 2<br /> | ||
UI Fabric | ||
<div><a target="_blank" href="/step2-02/demo/">demo</a> | <a target="_blank" href="/step2-02/exercise/">exercise</a></div> | ||
</div> | ||
</li> | ||
<li class="Tile"> | ||
<div class="Tile-link"> | ||
Step 3<br /> | ||
Theming and Styling | ||
<div><a target="_blank" href="/step2-03/demo/">demo</a> | <a target="_blank" href="/step2-03/exercise/">exercise</a></div> | ||
</div> | ||
</li> | ||
<li class="Tile"> | ||
<div class="Tile-link"> | ||
Step 4<br /> | ||
Testing with jest | ||
<div><a target="_blank" href="/step2-04/demo/">demo</a> | <a target="_blank" href="/step2-04/exercise/">exercise</a></div> | ||
</div> | ||
</li> | ||
<li class="Tile"> | ||
<div class="Tile-link"> | ||
Step 5<br /> | ||
Redux: Reducers | ||
<div><a target="_blank" href="/step2-05/demo/">demo</a> | <a target="_blank" href="/step2-05/exercise/">exercise</a></div> | ||
</div> | ||
</li> | ||
<li class="Tile"> | ||
<div class="Tile-link"> | ||
Step 6<br /> | ||
Redux: Dispatch Actions | ||
<div><a target="_blank" href="/step2-06/demo/">demo</a> | <a target="_blank" href="/step2-06/exercise/">exercise</a></div> | ||
</div> | ||
</li> | ||
<li class="Tile"> | ||
<div class="Tile-link"> | ||
Step 7<br /> | ||
Redux: Connect to UI | ||
<div><a target="_blank" href="/step2-07/demo/">demo</a> | <a target="_blank" href="/step2-07/exercise/">exercise</a></div> | ||
</div> | ||
</li> | ||
<li class="Tile"> | ||
<a target="_blank" href="/step2-08/" class="Tile-link"> | ||
Step 8<br /> | ||
Redux: Combine Reducers | ||
</a> | ||
</li> | ||
<li class="Tile"> | ||
<a target="_blank" href="/step2-09/" class="Tile-link"> | ||
Step 9<br /> | ||
Redux: Service Calls | ||
</a> | ||
</li> | ||
</ul> | ||
</div> | ||
<div class="Container"> | ||
<ul class="Tiles"> | ||
<li class="Tile Tile--intro"> | ||
<h2>Playground</h2> | ||
</li> | ||
<li class="Tile"><a target="_blank" href="/playground/" class="Tile-link">Playground</a></li> | ||
</ul> | ||
</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<body> | ||
<div id="app"></div> | ||
<script type="text/javascript" src="../playground/playground.js"></script></body> | ||
</html> |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
import { action, GenericActionTypes, GenericAction, GenericActionLookup } from '../redux-utils/action'; | ||
import { Dispatch } from 'redux'; | ||
import { Store } from '../store'; | ||
import uuid from 'uuid/v4'; | ||
import * as todosService from '../service/todosService'; | ||
|
||
export const actions = { | ||
add: (label: string) => action('add', { id: uuid(), label }), | ||
remove: (id: string) => action('remove', { id }), | ||
edit: (id: string, label: string) => action('edit', { id, label }), | ||
complete: (id: string) => action('complete', { id }), | ||
clear: () => action('clear'), | ||
setFilter: (filter: string) => action('setFilter', { filter }) | ||
}; | ||
|
||
export const actionsWithService = { | ||
add: (label: string) => { | ||
return async (dispatch: Dispatch<TodoAction>, getState: () => Store) => { | ||
const addAction = actions.add(label); | ||
const id = addAction.id; | ||
dispatch(addAction); | ||
await todosService.add(id, getState().todos[id]); | ||
}; | ||
}, | ||
|
||
edit: (id: string, label: string) => { | ||
return async (dispatch: Dispatch<TodoAction>, getState: () => Store) => { | ||
dispatch(actions.edit(id, label)); | ||
await todosService.edit(id, getState().todos[id]); | ||
}; | ||
}, | ||
|
||
remove: (id: string) => { | ||
return async (dispatch: Dispatch<TodoAction>, getState: () => Store) => { | ||
dispatch(actions.remove(id)); | ||
await todosService.remove(id); | ||
}; | ||
}, | ||
|
||
complete: (id: string) => { | ||
return async (dispatch: Dispatch<TodoAction>, getState: () => Store) => { | ||
dispatch(actions.complete(id)); | ||
await todosService.edit(id, getState().todos[id]); | ||
}; | ||
}, | ||
|
||
clear: () => { | ||
return async (dispatch: Dispatch<TodoAction>, getState: () => Store) => { | ||
dispatch(actions.clear()); | ||
await todosService.editBulk(getState().todos); | ||
}; | ||
} | ||
}; | ||
|
||
export type ActionTypes = GenericActionTypes<typeof actions>; | ||
export type TodoAction = GenericAction<typeof actions>; | ||
export type TodoActionWithService = GenericAction<typeof actionsWithService>; | ||
export type TodoActionLookup = GenericActionLookup<typeof actions>; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import React from 'react'; | ||
import { Stack } from 'office-ui-fabric-react'; | ||
import { TodoFooter } from './TodoFooter'; | ||
import { TodoHeader } from './TodoHeader'; | ||
import { TodoList } from './TodoList'; | ||
|
||
export const TodoApp = (props: {}) => ( | ||
<Stack horizontalAlign="center"> | ||
<Stack style={{ width: 400 }} gap={25}> | ||
<TodoHeader /> | ||
<TodoList /> | ||
<TodoFooter /> | ||
</Stack> | ||
</Stack> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import React from 'react'; | ||
import { Text } from '@uifabric/experiments'; | ||
import { Stack } from 'office-ui-fabric-react'; | ||
import { Store } from '../store'; | ||
import { DefaultButton } from 'office-ui-fabric-react'; | ||
import { actionsWithService } from '../actions'; | ||
import { connect } from 'react-redux'; | ||
|
||
// Redux Container | ||
export function mapStateToProps({ todos, filter }: Store) { | ||
return { | ||
todos, | ||
filter | ||
}; | ||
} | ||
|
||
export function mapDispatchToProps(dispatch: any) { | ||
return { | ||
clear: () => dispatch(actionsWithService.clear()) | ||
}; | ||
} | ||
|
||
type TodoFooterProps = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>; | ||
|
||
export const TodoFooter = connect( | ||
mapStateToProps, | ||
mapDispatchToProps | ||
)((props: TodoFooterProps) => { | ||
const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length; | ||
|
||
return ( | ||
<Stack horizontal horizontalAlign="space-between"> | ||
<Text> | ||
{itemCount} item{itemCount > 1 ? 's' : ''} left | ||
</Text> | ||
<DefaultButton onClick={() => props.clear()}>Clear Completed</DefaultButton> | ||
</Stack> | ||
); | ||
}); |
Oops, something went wrong.