Skip to content

Commit a5af042

Browse files
author
username
committed
first commit
0 parents  commit a5af042

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+9825
-0
lines changed

‎.editorconfig

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Editor configuration, see http://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.md]
12+
max_line_length = off
13+
trim_trailing_whitespace = false

‎.env

Whitespace-only changes.

‎.gitignore

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
### https://raw.github.com/github/gitignore/656f766bfc75f912d611a973158be0fe9e2ba2f2/Node.gitignore
2+
3+
# Logs
4+
logs
5+
*.log
6+
npm-debug.log*
7+
8+
# Runtime data
9+
pids
10+
*.pid
11+
*.seed
12+
13+
# Directory for instrumented libs generated by jscoverage/JSCover
14+
lib-cov
15+
16+
# Coverage directory used by tools like istanbul
17+
coverage
18+
19+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
20+
.grunt
21+
22+
# node-waf configuration
23+
.lock-wscript
24+
25+
# Compiled binary addons (http://nodejs.org/api/addons.html)
26+
build/Release
27+
28+
# Dependency directory
29+
# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
30+
node_modules
31+
32+
# Optional npm cache directory
33+
.npm
34+
35+
# Optional REPL history
36+
.node_repl_history
37+
38+
39+
## Application
40+
.next
41+
.now

‎.prettierrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"singleQuote": false,
3+
"trailingComma": "es5",
4+
"semi": false
5+
}

‎.vscode/settings.json

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"files.exclude": {
3+
"**/.DS_Store": true,
4+
"**/node_modules": true
5+
},
6+
"search.exclude": {
7+
"**/node_modules": true,
8+
".next": true
9+
},
10+
"files.insertFinalNewline": true,
11+
"javascript.format.enable": false,
12+
"editor.codeActionsOnSave": {
13+
"source.fixAll.tslint": true
14+
},
15+
"[javascript]": {
16+
"editor.formatOnSave": true,
17+
"editor.formatOnPaste": true,
18+
"editor.codeActionsOnSave": {
19+
"source.organizeImports": true
20+
}
21+
},
22+
"[typescript]": {
23+
"editor.formatOnSave": true,
24+
"editor.formatOnPaste": true,
25+
"editor.codeActionsOnSave": {
26+
"source.organizeImports": true
27+
}
28+
},
29+
"[typescriptreact]": {
30+
"editor.formatOnSave": true,
31+
"editor.formatOnPaste": true,
32+
"editor.codeActionsOnSave": {
33+
"source.organizeImports": true
34+
}
35+
},
36+
"[jsonc]": {
37+
"editor.formatOnSave": true,
38+
"editor.formatOnPaste": true
39+
}
40+
}

‎README.md

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# typescript-nextjs-redux-toolkit-material-ui-example
2+
3+
This is a sample for `server-side rendering` using `TypeScript` , `Next.js` , `Redux Toolkit` , and `Material-UI` .
4+
5+
`VSCode` , `prettier` and `TSLint` provide real-time formatting, syntax checking and organizing of unused imports.
6+
7+
これは、 `TypeScript` , `Next.js` , `Redux Toolkit` , `Material-UI` を使った `サーバーサイドレンダリング` に対応したサンプルです。
8+
9+
`VSCode` と `prettier` と `TSLint` によって、リアルタイムに整形と構文チェックと未使用 import の整理が行われます。
10+
11+
## Live demo
12+
13+
[live demo](https://typescript-nextjs-redux-toolkit-material-ui-example.now.sh/)
14+
15+
## Features
16+
17+
- [Visual Studio Code](https://code.visualstudio.com/)
18+
- [Typescript](https://www.typescriptlang.org/)
19+
- [Next.js](https://nextjs.org/)
20+
- [Material-UI](https://material-ui.com/)
21+
- [Redux](https://redux.js.org/)
22+
- [Redux Toolkit](https://redux-toolkit.js.org/)
23+
- [TSLint](https://palantir.github.io/tslint/)
24+
25+
## Requirement
26+
27+
- [Google Chrome](https://www.google.com/intl/ja_ALL/chrome/)
28+
- [Visual Studio Code](https://code.visualstudio.com/)
29+
- TypeScript v3.7 or higher( [require Optional Chaining](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining) )
30+
31+
## Install Google Chrome addon
32+
33+
- [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ja)
34+
35+
## Recommended VSCode addons
36+
37+
- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
38+
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
39+
- [TSLint](https://marketplace.visualstudio.com/items?itemName=eg2.tslint)
40+
41+
## Usage
42+
43+
### Download and install
44+
45+
```bash
46+
git clone https://github.com/treetips/typescript-nextjs-redux-toolkit-material-ui-example.git
47+
cd typescript-nextjs-redux-toolkit-material-ui-example
48+
npm i
49+
```
50+
51+
### Start local
52+
53+
```bash
54+
npm run dev
55+
```
56+
57+
### Build and start production express server
58+
59+
```bash
60+
npm run build
61+
npm start
62+
```
63+
64+
## Related repository
65+
66+
* [typescript-nextjs-redux-material-ui-example](https://github.com/treetips/typescript-nextjs-redux-material-ui-example)

‎components/AppContext.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { DocumentContext } from "next/document"
2+
import { Store } from "redux"
3+
4+
/**
5+
* NextDocumentContext with redux store context
6+
* @tree
7+
*/
8+
export type AppContext = DocumentContext & {
9+
readonly store: Store
10+
}

‎components/MuiTheme.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import green from "@material-ui/core/colors/green"
2+
import grey from "@material-ui/core/colors/grey"
3+
import { createMuiTheme } from "@material-ui/core/styles"
4+
5+
/**
6+
* material-ui theme color pallete
7+
* @see https://material-ui.com/style/color/
8+
*/
9+
export const MuiTheme = createMuiTheme({
10+
palette: {
11+
primary: {
12+
light: grey[700],
13+
main: grey[800],
14+
dark: grey[900],
15+
},
16+
secondary: {
17+
light: green[300],
18+
main: green[500],
19+
dark: green[700],
20+
},
21+
},
22+
})

‎components/atoms/SpacingPaper.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Paper } from "@material-ui/core"
2+
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
3+
4+
const useStyles = makeStyles<Theme, Props>((theme: Theme) =>
5+
createStyles({
6+
root: (props: Props) => ({
7+
padding: props.noPadding === true ? theme.spacing(0) : theme.spacing(2),
8+
marginBottom: theme.spacing(2),
9+
}),
10+
})
11+
)
12+
13+
type Props = {
14+
/**
15+
* shildren
16+
*/
17+
children: React.ReactNode
18+
/**
19+
* zero-padding flag
20+
*/
21+
noPadding?: boolean
22+
}
23+
24+
/**
25+
* Paper with spacing
26+
* @param props IProps
27+
*/
28+
export const SpacingPaper = (props: Props) => {
29+
const { children } = props
30+
const classes = useStyles(props)
31+
return (
32+
<Paper className={classes.root} elevation={6}>
33+
{children}
34+
</Paper>
35+
)
36+
}

‎components/atoms/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./SpacingPaper"

‎components/molecules/NextListItem.tsx

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import {
2+
Avatar,
3+
ListItem,
4+
ListItemAvatar,
5+
ListItemText,
6+
} from "@material-ui/core"
7+
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
8+
import Link from "next/link"
9+
import React from "react"
10+
11+
const useStyles = makeStyles((theme: Theme) =>
12+
createStyles({
13+
root: {},
14+
anchorLink: {
15+
width: "100%",
16+
textDecoration: "none",
17+
},
18+
listItemPrimary: {
19+
color: theme.palette.primary.contrastText,
20+
fontWeight: "bold",
21+
fontSize: "20px",
22+
},
23+
listItemSecondary: {
24+
color: theme.palette.primary.contrastText,
25+
},
26+
})
27+
)
28+
29+
type Props = {
30+
/**
31+
* <Link href="/">
32+
*/
33+
href: string
34+
/**
35+
* <ListItemText primary="redux"/>
36+
*/
37+
primary: React.ReactNode
38+
/**
39+
* <ListItemText secondary="description"/>
40+
*/
41+
secondary?: React.ReactNode
42+
/**
43+
* List item icon
44+
*/
45+
icon: JSX.Element
46+
/**
47+
* class
48+
*/
49+
className?: string
50+
/**
51+
* onClick event
52+
*/
53+
onClick?: (event: React.MouseEvent<HTMLElement>) => void
54+
}
55+
56+
/**
57+
* Next.js optimized <ListItem>
58+
* @param props Props
59+
*/
60+
export const NextListItem = function(props: Props) {
61+
const { className, href, icon, primary, secondary, onClick } = props
62+
const classes = useStyles(props)
63+
const AvatorIcon = () => icon
64+
return (
65+
<Link href={href}>
66+
<a className={classes.anchorLink} onClick={onClick}>
67+
<ListItem alignItems="center" divider={true} className={className}>
68+
<ListItemAvatar>
69+
<Avatar>
70+
<AvatorIcon />
71+
</Avatar>
72+
</ListItemAvatar>
73+
<ListItemText
74+
primary={<span className={classes.listItemPrimary}>{primary}</span>}
75+
secondary={
76+
<span className={classes.listItemSecondary}>{secondary}</span>
77+
}
78+
/>
79+
</ListItem>
80+
</a>
81+
</Link>
82+
)
83+
}

‎components/molecules/PageHeader.tsx

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Paper, Typography } from "@material-ui/core"
2+
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
3+
import React from "react"
4+
import { usePage } from "../../hooks"
5+
6+
const useStyles = makeStyles((theme: Theme) =>
7+
createStyles({
8+
root: {
9+
backgroundColor: theme.palette.primary.main,
10+
color: theme.palette.primary.contrastText,
11+
padding: theme.spacing(2),
12+
textAlign: "center",
13+
},
14+
title: {
15+
display: "flex",
16+
justifyContent: "center",
17+
alignItems: "center",
18+
fontWeight: "bold",
19+
fontSize: "3em",
20+
padding: theme.spacing(2),
21+
},
22+
description: {},
23+
})
24+
)
25+
26+
type Props = {}
27+
28+
/**
29+
* Page header component
30+
* @param props Props
31+
*/
32+
export const PageHeader = function (props: Props) {
33+
const classes = useStyles(props)
34+
const { selectedPage } = usePage()
35+
36+
return (
37+
<Paper square={true} className={classes.root}>
38+
<Typography variant="h1" color="inherit" className={classes.title}>
39+
{selectedPage.pageTitle}
40+
</Typography>
41+
<Typography
42+
variant="subtitle1"
43+
color="inherit"
44+
className={classes.description}
45+
>
46+
{selectedPage.metaDescription}
47+
</Typography>
48+
</Paper>
49+
)
50+
}

‎components/molecules/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from "./NextListItem"
2+
export * from "./PageHeader"

0 commit comments

Comments
 (0)