construct base layout (#14)

* replace font

* construct layout and theme

* add header menu handler

* fix webpack config for prod

Author: shoota

.eslintrc.js

@@ -44,7 +44,6 @@ module.exports = {
     'import/extensions': ['error', 'never'],
     'import/order': ['error', { 'newlines-between': 'always' }],
     'import/prefer-default-export': 0,
-    'import/no-default-export': 'error',
     'react-hooks/exhaustive-deps': 'warn',
     'react-hooks/rules-of-hooks': 'error',
     'react/jsx-filename-extension': [1, { extensions: ['.tsx'] }],

.gitignore

@@ -63,3 +63,33 @@ typings/
 # dist
 storybook-static
 public
+### https://raw.github.com/github/gitignore/21e9f06539cdbc1ccbbb2ce59cd667be3e172fc8/Global/macOS.gitignore
+
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+

.storybook/config.js

@@ -3,10 +3,6 @@ import { withKnobs } from '@storybook/addon-knobs'
 import '../src/index.less'
 
 // automatically import all files ending in *.stories.tsx
-const req = require.context('../src/components', true, /.stories.tsx$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
+const req = require.context('../src', true, /\.stories.tsx$/);
 addDecorator(withKnobs)
-configure(loadStories, module);
+configure(req, module);

.storybook/webpack.config.ts

@@ -1,4 +1,5 @@
-import darkTheme from '@ant-design/dark-theme'
+import path from 'path'
+
 const config = {
   module: {
     rules: [
@@ -20,14 +21,22 @@ const config = {
           {
             loader: 'less-loader',
              // https://github.com/ant-design/ant-design/issues/7927
-            options: { modifyVars: darkTheme, javascriptEnabled: true }
+            options: { javascriptEnabled: true }
           }
         ]
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|svg)$/,
+        loader: 'file-loader'
       }
     ]
   },
   resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.jsx']
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    modules: [
+      './node_modules',
+      path.resolve(__dirname, '..', 'src')
+    ]
   }
 }
 

package.json

@@ -38,6 +38,7 @@
     "@storybook/cli": "5.2.8",
     "@storybook/react": "5.2.8",
     "@types/clean-webpack-plugin": "0.1.3",
+    "@types/file-loader": "4.2.0",
     "@types/html-webpack-plugin": "3.2.1",
     "@types/jest": "24.0.24",
     "@types/mini-css-extract-plugin": "0.8.0",
@@ -66,6 +67,7 @@
     "eslint-plugin-prettier": "3.1.2",
     "eslint-plugin-react": "7.17.0",
     "eslint-plugin-react-hooks": "2.3.0",
+    "file-loader": "5.0.2",
     "html-loader": "0.5.5",
     "html-webpack-plugin": "3.2.0",
     "husky": "3.1.0",
@@ -85,7 +87,6 @@
     "webpack-dev-server": "3.10.0"
   },
   "dependencies": {
-    "@ant-design/dark-theme": "1.0.3",
     "antd": "3.26.3",
     "react": "16.12.0",
     "react-dom": "16.12.0",

src/assets/851MkPOP_002.ttf

@@ -0,0 +1,49 @@
+import React, { ComponentProps } from 'react'
+import { Layout, Menu } from 'antd'
+import styled from 'styled-components'
+
+const { Header: AntHeader } = Layout
+
+const StyledHeader = styled(AntHeader)`
+  display: flex;
+  padding: 0 24px;
+  align-items: center;
+`
+
+const HeaderTitle = styled.h1`
+  padding: 0;
+  margin: 0;
+`
+
+const StyledMenu = styled(Menu)`
+  line-height: 64px;
+  margin-right: 6vw;
+  margin-left: auto;
+`
+
+type Props = {
+  title: string
+  onTitleClick: () => void
+  onMenuClick: ComponentProps<typeof Menu>['onClick']
+}
+
+export const Header: React.FC<Props> = ({
+  onTitleClick,
+  onMenuClick,
+  title,
+}) => {
+  return (
+    <StyledHeader>
+      <HeaderTitle onClick={onTitleClick}>{title}</HeaderTitle>
+      <StyledMenu
+        mode="horizontal"
+        defaultSelectedKeys={['1']}
+        onClick={onMenuClick}
+      >
+        <Menu.Item key="1">日々</Menu.Item>
+        <Menu.Item key="2">写真</Menu.Item>
+        <Menu.Item key="3">私について</Menu.Item>
+      </StyledMenu>
+    </StyledHeader>
+  )
+}

src/components/button/index.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { actions } from '@storybook/addon-actions'
+
+import { Layout } from '.'
+
+export default { title: 'template/Layout' }
+
+export const withDefault = () => (
+  <Layout
+    title="日々是好日"
+    onTitleClick={() => actions('onTitleClick')}
+    onMenuClick={_clickParam => actions('onMenuClick')}
+  >
+    ここが描画部分です
+  </Layout>
+)

src/components/button/index.tsx

@@ -0,0 +1,33 @@
+import React, { ComponentProps } from 'react'
+import { Layout as AntLayout } from 'antd'
+import styled from 'styled-components'
+
+// import { Header } from '../../organisms/Header'
+
+import { Header } from 'components/organisms/Header'
+
+const { Content } = AntLayout
+
+const StyledContent = styled(Content)`
+  padding: 24px;
+`
+
+type Props = ComponentProps<typeof Header>
+
+export const Layout: React.FC<Props> = ({
+  children,
+  title,
+  onTitleClick,
+  onMenuClick,
+}) => {
+  return (
+    <AntLayout>
+      <Header
+        title={title}
+        onTitleClick={onTitleClick}
+        onMenuClick={onMenuClick}
+      />
+      <StyledContent>{children}</StyledContent>
+    </AntLayout>
+  )
+}