.gitignore

@@ -95,3 +95,5 @@ Temporary Items
 .apdisk
 
 
+src/graphql/api.ts
+src/graphql/introspection-result.ts

.storybook/main.js

@@ -0,0 +1,19 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  framework: '@storybook/react',
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.less$/,
+      use: [
+        'style-loader',
+        'css-loader',
+        {
+          loader: 'less-loader',
+          options: { javascriptEnabled: true },
+        },
+      ],
+    })
+    return config
+  },
+}

.storybook/preview.js

@@ -0,0 +1,11 @@
+import '../src/index.less'
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

babel.config.js

@@ -10,9 +10,4 @@ module.exports = {
     '@babel/typescript',
     '@babel/react',
   ],
-  plugins: [
-    '@babel/plugin-proposal-optional-chaining',
-    '@babel/proposal-class-properties',
-    '@babel/proposal-object-rest-spread',
-  ],
 }

codegen.yml

@@ -0,0 +1,18 @@
+schema: http://localhost:8080/v1/graphql
+documents: ./**/*.graphql
+generates:
+  ./src/graphql/api.ts:
+    plugins:
+      - typescript
+      - typescript-operations
+      - typescript-react-apollo
+    config:
+      withComponent: false
+      withHOC: false
+      withHooks: true
+      withRefetchFn: true
+  ./src/graphql/introspection-result.ts:
+    plugins:
+      - fragment-matcher
+    config:
+      apolloClientVersion: 3

docker-compose.yml

@@ -0,0 +1,32 @@
+version: "3.6"
+services:
+  postgres:
+    image: postgres:12
+    restart: always
+    volumes:
+      - db_data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_PASSWORD: postgrespassword
+  graphql-engine:
+    image: hasura/graphql-engine:v2.0.10
+    ports:
+      - "8080:8080"
+    depends_on:
+      - "postgres"
+    restart: always
+    environment:
+      ## postgres database to store Hasura metadata
+      HASURA_GRAPHQL_METADATA_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
+      ## this env var can be used to add the above postgres database to Hasura as a data source. this can be removed/updated based on your needs
+      PG_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
+      ## link heroku environment
+      DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
+      ## enable the console served by server
+      HASURA_GRAPHQL_ENABLE_CONSOLE: "true" # set to "false" to disable console
+      ## enable debugging mode. It is recommended to disable this in production
+      HASURA_GRAPHQL_DEV_MODE: "true"
+      HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log
+      ## uncomment next line to set an admin secret
+      # HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey
+volumes:
+  db_data:

package.json

@@ -1,5 +1,6 @@
 {
   "name": "react-playground",
+  "version": "1.0.0",
   "description": "よりうまい肉を食うぞ",
   "license": "MIT",
   "author": "",
@@ -11,45 +12,51 @@
   "bugs": {
     "url": "https://github.com/shoota/react-playground/issues"
   },
-  "version": "1.0.0",
   "main": "index.js",
   "scripts": {
     "build": "webpack --mode=production",
-    "build-storybook": "build-storybook",
+    "codegen": "graphql-codegen --config codegen.yml",
     "lint": "eslint 'src/**/*.ts{,x}' --cache",
     "start": "webpack-dev-server",
+    "test": "tsc -p ./tsconfig.json",
     "storybook": "start-storybook -p 6006",
-    "test": "tsc -p ./tsconfig.json"
+    "build-storybook": "build-storybook"
+  },
+  "resolutions": {
+    "@types/react": "16.14.20",
+    "@types/react-dom": "16.9.10"
   },
   "dependencies": {
+    "@ant-design/icons": "4.7.0",
+    "@apollo/client": "3.3.21",
     "antd": "4.11.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-hot-loader": "4.13.0",
     "react-router": "5.1.2",
     "react-router-dom": "5.1.2",
     "styled-components": "5.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.12.10",
-    "@babel/plugin-proposal-class-properties": "7.12.1",
-    "@babel/plugin-proposal-object-rest-spread": "7.12.1",
-    "@babel/plugin-proposal-optional-chaining": "7.12.7",
-    "@babel/preset-env": "7.12.11",
-    "@babel/preset-react": "7.12.10",
-    "@babel/preset-typescript": "7.12.7",
+    "@babel/core": "7.14.6",
+    "@babel/preset-env": "7.14.7",
+    "@babel/preset-react": "7.14.5",
+    "@babel/preset-typescript": "7.14.5",
+    "@graphql-codegen/add": "2.0.2",
+    "@graphql-codegen/cli": "1.21.7",
+    "@graphql-codegen/fragment-matcher": "2.0.1",
+    "@graphql-codegen/typescript": "1.23.0",
+    "@graphql-codegen/typescript-operations": "1.18.4",
+    "@graphql-codegen/typescript-react-apollo": "2.3.1",
     "@hot-loader/react-dom": "16.13.0",
-    "@storybook/addon-actions": "5.3.18",
-    "@storybook/addon-knobs": "5.3.18",
-    "@storybook/addon-links": "5.3.18",
-    "@storybook/addons": "5.3.18",
-    "@storybook/cli": "5.3.18",
-    "@storybook/react": "5.3.18",
+    "@storybook/addon-actions": "^6.4.5",
+    "@storybook/addon-essentials": "^6.4.5",
+    "@storybook/addon-links": "^6.4.5",
+    "@storybook/react": "^6.4.5",
     "@types/clean-webpack-plugin": "0.1.3",
     "@types/html-webpack-plugin": "3.2.4",
     "@types/jest": "25.2.3",
     "@types/mini-css-extract-plugin": "0.9.1",
-    "@types/react": "16.14.2",
+    "@types/react": "16.14.20",
     "@types/react-dom": "16.9.10",
     "@types/react-router": "5.1.5",
     "@types/react-router-dom": "5.1.7",
@@ -74,6 +81,8 @@
     "eslint-plugin-prettier": "3.3.1",
     "eslint-plugin-react": "7.19.0",
     "eslint-plugin-react-hooks": "4.2.0",
+    "graphql": "15.5.1",
+    "graphql-codegen-typescript-mock-data": "1.5.7",
     "html-loader": "1.1.0",
     "html-webpack-plugin": "4.5.0",
     "husky": "4.3.8",
@@ -124,9 +133,5 @@
       "prettier --write",
       "git add"
     ]
-  },
-  "resolutions": {
-    "@types/react": "16.14.2",
-    "@types/react-dom": "16.9.10"
   }
 }

src/App.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { hot } from 'react-hot-loader/root'
 
 import { Routes } from './routes'
 
-export const App = hot(() => <Routes />)
+export const App = () => <Routes />

src/components/Todos/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { List, Typography, Space } from 'antd'
+import { CheckCircleTwoTone } from '@ant-design/icons'
+
+type Todo = {
+  id: number
+  contents: string
+  finished: boolean
+}
+
+type Props = {
+  isLoading?: boolean
+  todos: Todo[]
+}
+
+export const Todos: React.VFC<Props> = ({ todos, isLoading }) => {
+  return (
+    <List
+      size="large"
+      loading={isLoading}
+      dataSource={todos}
+      renderItem={({ id, contents, finished }) => (
+        <List.Item key={id}>
+          <Typography.Title>
+            <Space>
+              <CheckCircleTwoTone
+                twoToneColor={finished ? '#52c41a' : '#e3e3e3'}
+              />
+              {contents}
+            </Space>
+          </Typography.Title>
+          {/* <Typography.Title level={5}>{contents}</Typography.Title> */}
+        </List.Item>
+      )}
+    />
+  )
+}

src/components/story/index.stories.tsx

@@ -1,19 +1,31 @@
-import { text } from '@storybook/addon-knobs'
-import { storiesOf } from '@storybook/react'
-import { Button } from 'antd'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
 import * as React from 'react'
 
-import { MarginCard, Wrapper } from '../common'
+import { Todos } from '../Todos'
 
-storiesOf('story/usage', module).add('default', () => {
-  return (
-    <Wrapper>
-      <MarginCard title="First">
-        <Button>{text('first', '1st')}</Button>
-      </MarginCard>
-      <MarginCard title="Second">
-        <Button>{text('second', '2nd')}</Button>
-      </MarginCard>
-    </Wrapper>
-  )
-})
+const todos = [
+  {
+    id: 1,
+    contents: 'should do',
+    finished: false,
+  },
+  {
+    id: 2,
+    contents: 'done is better',
+    finished: true,
+  },
+]
+
+const meta: ComponentMeta<typeof Todos> = {
+  title: 'Example/Todos',
+  component: Todos,
+  args: {
+    todos,
+  },
+}
+
+export default meta
+
+const Template: ComponentStory<typeof Todos> = (args) => <Todos {...args} />
+
+export const Main = Template.bind({})

src/graphql/todos.graphql

@@ -0,0 +1,7 @@
+query Todos {
+  todos {
+    id
+    finished
+    contents
+  }
+}