Skip to content

Commit 13fcbb2

Browse files
vipzerovipzero
committed
storybook setup
1 parent 59b3c31 commit 13fcbb2

10 files changed

+1731
-97
lines changed

‎.eslintignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
webpack.config.js
2+
webpack.config.dev.js

‎.eslintrc

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
{
2-
"extends": ["nzap", "nzap/typescript", "nzap/react"],
2+
"extends": ["nzap", "nzap/typescript", "nzap/react", "nzap/jest"],
3+
4+
"parserOptions": {
5+
"createDefaultProgram": true
6+
},
37
"rules": {
48
"@typescript-eslint/explicit-function-return-type": 0,
59
"import/no-extraneous-dependencies": 0

‎.storybook/config.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { configure } from '@storybook/react'
2+
// automatically import all files ending in *.stories.tsx
3+
configure(require.context('../src', true, /\.stories\.tsx?$/), module)

‎.storybook/webpack.config.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
module.exports = ({ config }) => {
2+
config.module.rules.push({
3+
test: /\.(ts|tsx)$/,
4+
use: [
5+
{
6+
loader: require.resolve('awesome-typescript-loader'),
7+
},
8+
// Optional
9+
{
10+
loader: require.resolve('react-docgen-typescript-loader'),
11+
},
12+
],
13+
})
14+
config.resolve.extensions.push('.ts', '.tsx')
15+
return config
16+
}

‎package.json

+6
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,17 @@
2828
"devDependencies": {
2929
"@babel/core": "^7.6.4",
3030
"@storybook/addon-actions": "^5.2.3",
31+
"@storybook/addon-info": "^5.2.3",
3132
"@storybook/addon-links": "^5.2.3",
3233
"@storybook/addons": "^5.2.3",
3334
"@storybook/react": "^5.2.3",
35+
"@types/jest": "^24.0.18",
3436
"@types/lodash": "^4.14.141",
3537
"@types/react": "^16.9.5",
3638
"@types/react-dom": "^16.9.1",
3739
"@types/styled-components": "^4.1.19",
3840
"@types/webpack": "^4.39.2",
41+
"awesome-typescript-loader": "^5.2.1",
3942
"babel-loader": "^8.0.6",
4043
"bufferutil": "^4.0.1",
4144
"electron": "^6.0.11",
@@ -46,8 +49,11 @@
4649
"eslint": "^6.5.1",
4750
"eslint-config-nzap": "^1.2.3",
4851
"husky": "^3.0.8",
52+
"jest": "^24.9.0",
4953
"lint-staged": "^9.4.1",
54+
"react-docgen-typescript-loader": "^3.3.0",
5055
"spawn-sync": "^2.0.0",
56+
"ts-jest": "^24.1.0",
5157
"ts-loader": "^6.2.0",
5258
"typescript": "3.6.3",
5359
"utf-8-validate": "^5.0.2",

‎src/main.ts

+20-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
1+
import fs from 'fs'
12
import { client } from 'electron-connect'
23
import { app, BrowserWindow, ipcMain } from 'electron'
3-
import watch from 'chch/dist/watch'
4+
5+
// import watch from 'chch/dist/watch'
6+
// import _ from 'lodash'
7+
import { Post } from 'chch/dist/types'
48

59
let mainWindow: Electron.BrowserWindow | null
610

711
function createWindow() {
812
// Create the browser window.
913
mainWindow = new BrowserWindow({
14+
frame: true,
1015
height: 600,
1116
webPreferences: {
1217
// preload: path.join(__dirname, 'preload.js'),
@@ -19,9 +24,6 @@ function createWindow() {
1924
// and load the index.html of the app.
2025
mainWindow.loadFile('index.html')
2126

22-
// Open the DevTools.
23-
mainWindow.webContents.openDevTools()
24-
2527
client.create(mainWindow)
2628

2729
// Emitted when the window is closed.
@@ -63,9 +65,20 @@ ipcMain.on('watch', async (event, url) => {
6365
if (state.watchId) {
6466
clearInterval(state.watchId)
6567
}
66-
state.watchId = await watch(url, (posts, nth) => {
67-
event.sender.send('posts', posts, nth)
68-
})
68+
const data = fs.readFileSync('out.txt', 'utf-8')
69+
70+
const posts: Post[] = JSON.parse(data)
71+
72+
event.sender.send('posts', posts, 0)
73+
// state.watchId = await watch(url, (posts, nth) => {
74+
// const lastPost = _.last(posts)
75+
76+
// if (lastPost && state.watchId && lastPost.number >= 1000) {
77+
// clearInterval(state.watchId)
78+
// }
79+
80+
// event.sender.send('posts', posts, nth)
81+
// })
6982
})
7083

7184
ipcMain.on('unwatch', async () => {

‎src/pages/Home/ColTable.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
44
import Paper from '@material-ui/core/Paper'
55
import { FormGroup } from '@material-ui/core'
66
import styled from 'styled-components'
7-
import _ from 'lodash'
87
import { User } from '../../types'
98
import PostCard from './PostCard'
109

@@ -57,6 +56,7 @@ const WrapTable = styled.div<{ col: number }>`
5756
grid-gap: 2px 4px;
5857
background: #888;
5958
width: 100%;
59+
justify-content: space-evenly;
6060
`
6161

6262
type Props = {

‎src/stories/index.stories.tsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react'
2+
import { Post } from 'chch/dist/types'
3+
import { CssBaseline } from '@material-ui/core'
4+
import PostCard from '../pages/Home/PostCard'
5+
import { User } from '../types'
6+
7+
export default {
8+
title: 'MojiMojiChan',
9+
}
10+
11+
const user: User = {
12+
id: 'abcdefg',
13+
name: 'あの',
14+
}
15+
16+
const post: Post = {
17+
number: 999,
18+
name: '以下、5ちゃんねるからVIPがお送りします',
19+
userId: 'abcdefg',
20+
timestamp: 1570869053889,
21+
comma: 999,
22+
message:
23+
'ホットミルク久々に飲んでみるわ 子供の頃苦手だった 牛乳は好きだったけど \n ホットミルク久々に飲んでみるわ 子供の頃苦手だった 牛乳は好きだったけど',
24+
}
25+
26+
export const toStorybook = () => (
27+
<>
28+
<CssBaseline />
29+
<h3>Resonsive</h3>
30+
<div
31+
style={{
32+
display: 'grid',
33+
gridTemplateColumns: '1fr 2fr 3fr',
34+
justifyContent: 'space-evenly',
35+
gridGap: '12px',
36+
}}
37+
>
38+
<PostCard user={user} post={post} />
39+
<PostCard user={user} post={post} />
40+
<PostCard user={user} post={post} />
41+
</div>
42+
{[200, 350, 500].map(width => (
43+
<div key={width}>
44+
<h3>{width}px</h3>
45+
<div style={{ width: `${width}px` }}>
46+
<PostCard user={user} post={post} />
47+
</div>
48+
</div>
49+
))}
50+
</>
51+
)
52+
53+
toStorybook.story = {
54+
name: 'PostCard',
55+
}

‎tsconfig.json

+3-4
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,10 @@
77
"target": "es2015",
88
"module": "es2015",
99
"moduleResolution": "node",
10+
"types": ["react", "jest"],
1011
"esModuleInterop": true,
11-
"lib": [
12-
"dom",
13-
"esnext"
14-
],
12+
"lib": [ "dom", "esnext" ],
13+
"rootDirs": ["src", "src/stories"],
1514
"sourceMap": true,
1615
"strict": true,
1716
"jsx": "react"

0 commit comments

Comments
 (0)