storyshotsの導入

.circleci/config.yml

@@ -41,14 +41,6 @@ jobs:
             - ./vendor/bundle
           key: v1-dependencies-{{ checksum "Gemfile.lock" }}
 
-      # Frontend setup
-      - run:
-          name: build frontend
-          working_directory: frontend
-          command: |
-            yarn install
-            yarn build
-
       # Database setup
       - run: mv config/database.yml.ci config/database.yml
       - run: bundle exec rake db:create db:schema:load RAILS_ENV=test --trace
@@ -70,6 +62,23 @@ jobs:
           path: /tmp/test-results
           destination: test-results
 
+  frontend-build:
+    working_directory: ~/repo
+    docker:
+      - image: circleci/node:12.8.1
+    steps:
+      - checkout
+      - run:
+          name: Install test dependencies
+          command: |
+            cd frontend
+            yarn install --frozen-lockfile --prefer-offline
+      - run:
+          name: yarn test
+          command: |
+            cd frontend
+            yarn build
+
   frontend-test:
     working_directory: ~/repo
     docker:
@@ -80,7 +89,12 @@ jobs:
           name: Install test dependencies
           command: |
             cd frontend
-            yarn --frozen-lockfile --prefer-offline
+            yarn install --frozen-lockfile --prefer-offline
+      - run:
+          name: yarn storybook:build
+          command: |
+            cd frontend
+            yarn storybook:build
       - run:
           name: yarn test
           command: |
@@ -92,4 +106,5 @@ workflows:
   main:
     jobs:
       - build
+      - frontend-build
       - frontend-test

.gitignore

@@ -29,3 +29,5 @@
 
 /frontend/node_modules/*
 /frontend/yarn-error.log
+
+/frontend/storybook-static/

README.md

@@ -3,6 +3,7 @@
 [![CircleCI](https://circleci.com/gh/kure-kosen/cho_kure_web/tree/feature%2Fdev.svg?style=svg)](https://circleci.com/gh/kure-kosen/cho_kure_web/tree/feature%2Fdev)
 [![Maintainability](https://api.codeclimate.com/v1/badges/cef3c1298621fa26dd1c/maintainability)](https://codeclimate.com/github/kure-kosen/cho_kure_web/maintainability)
 [![Test Coverage](https://api.codeclimate.com/v1/badges/cef3c1298621fa26dd1c/test_coverage)](https://codeclimate.com/github/kure-kosen/cho_kure_web/test_coverage)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/52294771-4cc8-449a-9d67-3016d98b03b0/deploy-status)](https://app.netlify.com/sites/cho-kure-web-storybook/deploys)
 
 ## Ruby version
 
@@ -45,6 +46,28 @@ $ docker-compose run backend bin/rails db:create db:schema:load db:seed_fu
 
 refer to [/frontend/README.md](/frontend/README.md)
 
+## CircleCI
+
+[CircleCI Local CLI](https://circleci.com/docs/2.0/local-cli/#quick-installation)
+
+```bash
+... installed CircleCI Local CLI
+$ circleci local execute --job build
+$ circleci local execute --job frontend-build
+$ circleci local execute --job frontend-test
+```
+
+## SSL
+
+```bash
+... in production server
+certbot-auto certificates
+certbot-auto renew
+# certbot-auto renew --dry-run
+# certbot-auto renew --force-renew
+service nginx restart
+```
+
 ## その他
 
 - 開発中にアプリケーションが送信したメールは `/letter_opener` で確認できます。

app/helpers/application_helper.rb

@@ -1,12 +1,7 @@
 module ApplicationHelper
   def webpack_javascript_include_tag(path)
     path = "#{path}.js" unless path.ends_with?(".js")
-    path = if ENV["USE_WEBPACK_DEV_SERVER"].to_b
-             "http://localhost:5000/#{path}"
-           else
-             "/assets/build/#{find_hash_name(path)}"
-           end
-
+    path = ENV["USE_WEBPACK_DEV_SERVER"].to_b ? "http://localhost:5000/#{path}" : "/assets/build/#{find_hash_name(path)}"
     javascript_include_tag(path)
   end
 

config/initializers/assets_manifest.rb

@@ -1,13 +1,15 @@
 Rails.application.config.assets_manifest =
-  if File.exist?(Rails.root.join("public", "assets", "build", "manifest.json"))
-    JSON.parse(File.read(Rails.root.join("public", "assets", "build", "manifest.json")))
-  else
-    unless ENV["USE_WEBPACK_DEV_SERVER"].to_b
-      raise "\n
-        +--------------------------------------------------+
-        | public/assets/build/manifest.jsonが存在しません. |
-        | $ yarn build を実行してください.                 |
-        +--------------------------------------------------+
-      "
+  unless Rails.env.test?
+    if File.exist?(Rails.root.join("public", "assets", "build", "manifest.json"))
+      JSON.parse(File.read(Rails.root.join("public", "assets", "build", "manifest.json")))
+    else
+      unless ENV["USE_WEBPACK_DEV_SERVER"].to_b
+        raise "\n
+          +--------------------------------------------------+
+          | public/assets/build/manifest.jsonが存在しません. |
+          | $ yarn build を実行してください.                 |
+          +--------------------------------------------------+
+        "
+      end
     end
   end

frontend/.babelrc

@@ -0,0 +1,19 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "env": {
+    "test": {
+      "plugins": ["require-context-hook"]
+    }
+  }
+}

frontend/.jest/fileMock.js

@@ -0,0 +1 @@
+module.exports = '';

frontend/.jest/register-context.ts

@@ -0,0 +1,2 @@
+import registerRequireContextHook from "babel-plugin-require-context-hook/register";
+registerRequireContextHook();

frontend/.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

frontend/.storybook/chkDecorator.tsx

@@ -0,0 +1,21 @@
+import "normalize.css";
+
+import React from "react";
+import { BrowserRouter } from "react-router-dom";
+import { makeDecorator } from "@storybook/addons";
+import GlobalStyle from "../src/constants/styles/global";
+
+export const chkDecorator = makeDecorator({
+  name: "withSomething",
+  parameterName: "something",
+  wrapper: (storyFn, context) => {
+    return (
+      <BrowserRouter>
+        <>
+          {storyFn(context)}
+          <GlobalStyle />
+        </>
+      </BrowserRouter>
+    );
+  }
+});

frontend/.storybook/config.js

@@ -0,0 +1,8 @@
+import {configure, addDecorator} from '@storybook/react';
+
+import { chkDecorator } from "./chkDecorator";
+
+// automatically import all files ending in *.stories.tsx
+configure(require.context('../stories', true, /\.stories\.tsx$/), module);
+
+addDecorator(chkDecorator);

frontend/.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

frontend/.storybook/webpack.config.js

@@ -0,0 +1,29 @@
+'use strict'
+
+const path = require('path');
+
+module.exports = ({config}) => {
+  config.module.rules.push(
+      {
+        test: /\.(ts|tsx)?$/,
+        loader: require.resolve('ts-loader'),
+        exclude: /node_modules/,
+        options: {transpileOnly: true}
+      },
+      {
+        test: /\.(ts|tsx)?$/,
+        loader: require.resolve('react-docgen-typescript-loader'),
+        exclude: /node_modules/
+      });
+  // {
+  //   test: /\.stories\.tsx?$/,
+  //   loader: require.resolve('@storybook/source-loader'),
+  //   options: { injectParameters: true },
+  //   enforce: 'pre',
+  // }
+
+  config.resolve.extensions.push('.js', '.ts', '.tsx');
+  config.resolve.alias = {'@': path.resolve(__dirname, '../src')};
+
+  return config;
+};

frontend/README.md

@@ -3,15 +3,21 @@
 [![CircleCI](https://circleci.com/gh/kure-kosen/cho_kure_web/tree/feature%2Fdev.svg?style=svg)](https://circleci.com/gh/kure-kosen/cho_kure_web/tree/feature%2Fdev)
 [![Maintainability](https://api.codeclimate.com/v1/badges/cef3c1298621fa26dd1c/maintainability)](https://codeclimate.com/github/kure-kosen/cho_kure_web/maintainability)
 [![Test Coverage](https://api.codeclimate.com/v1/badges/cef3c1298621fa26dd1c/test_coverage)](https://codeclimate.com/github/kure-kosen/cho_kure_web/test_coverage)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/52294771-4cc8-449a-9d67-3016d98b03b0/deploy-status)](https://app.netlify.com/sites/cho-kure-web-storybook/deploys)
 
 ## How to Dev
 
 ```bash
 $ yarn install
 
 # Commands
-$ yarn start  # Start webpack-dev-server, open http://localhost:3000/app
-$ yarn dev    # same as $ yarn start
-$ yarn build  # Build to /public/assets/build/
-$ yarn lint   # Check type and syntax, auto fix
+$ yarn start           # Start webpack-dev-server, open http://localhost:3000/app
+$ yarn dev             # same as $ yarn start
+$ yarn build           # Build to /public/assets/build/
+$ yarn lint            # Check type and syntax, auto fix
+$ yarn test            # Test
+$ yarn test:console    # Test with console.log
+$ yarn test:clean      # Clear cache
+$ yarn storybook       # Start storybook
+$ yarn storybook:build # Build to /frontend/storybook-static/
 ```

frontend/jest.config.js

@@ -1,13 +1,11 @@
 module.exports = {
   verbose: true,
-  transform: {
-    ".*\\.(ts|tsx)$": "./node_modules/ts-jest"
-  },
+  setupFiles: ["<rootDir>/.jest/register-context.ts"],
+  testMatch: ["**/*.test.(ts|tsx)"],
   moduleNameMapper: {
-    "^@/(.*)$": '<rootDir>/src/$1',
-  },
-  testMatch: [
-    "**/*.spec.(ts|tsx)"
-  ],
-  moduleFileExtensions: ["js", "ts", "tsx"]
+    "^@/(.*)$": "<rootDir>/src/$1",
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+        "<rootDir>/.jest/fileMock.js",
+    "\\.(css|less|scss|sss|styl)$": "<rootDir>/node_modules/jest-css-modules"
+  }
 };

frontend/package.json

@@ -10,8 +10,13 @@
     "build": "webpack --color --progress --config ./config/webpack.config.prod.js",
     "dev": "webpack-dev-server --config ./config/webpack.config.dev.js",
     "start": "yarn dev",
-    "lint": "tslint --fix -c ./tslint.json 'src/**/*{.ts,.tsx}'",
-    "test": "jest --colors"
+    "lint": "tslint --fix -c ./tslint.json '@(src|stories)/**/*.{ts,tsx}'",
+    "test": "jest --colors",
+    "test:update": "yarn test -u",
+    "test:console": "yarn test --silent=false --verbose false",
+    "test:clean": "jest --clearCache",
+    "storybook": "start-storybook -p 6006",
+    "storybook:build": "build-storybook"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": [
@@ -20,23 +25,41 @@
     ]
   },
   "devDependencies": {
-    "@types/jest": "^24.0.17",
+    "@babel/core": "^7.6.0",
+    "@babel/preset-env": "^7.6.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.6.0",
+    "@storybook/addon-actions": "^5.2.1",
+    "@storybook/addon-links": "^5.2.1",
+    "@storybook/addon-storyshots": "^5.2.1",
+    "@storybook/addon-storyshots-puppeteer": "^5.2.1",
+    "@storybook/addon-viewport": "^5.2.1",
+    "@storybook/addons": "^5.2.1",
+    "@storybook/react": "^5.2.1",
+    "@types/jest": "^24.0.18",
     "@types/react": "^16.8.17",
     "@types/react-dom": "^16.8.4",
     "@types/react-router-dom": "^4.3.3",
     "@types/react-slick": "^0.23.4",
+    "@types/storybook__addon-storyshots-puppeteer": "^5.1.0",
     "@types/styled-components": "^4.1.15",
+    "babel-jest": "^24.9.0",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-require-context-hook": "^1.0.0",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.0.3",
     "css-loader": "^2.1.1",
     "file-loader": "^3.0.1",
     "fork-ts-checker-webpack-plugin": "^1.2.0",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^24.9.0",
+    "jest-css-modules": "^2.1.0",
     "prettier": "^1.17.0",
+    "react-docgen-typescript-loader": "^3.2.1",
+    "react-test-renderer": "^16.9.0",
     "style-loader": "^0.23.1",
-    "ts-jest": "^24.0.2",
-    "ts-loader": "^6.0.2",
+    "ts-loader": "6.1.2",
     "tslint": "^5.16.0",
     "tslint-config-prettier": "^1.18.0",
     "tslint-loader": "^3.5.4",
@@ -54,8 +77,8 @@
     "mobx": "^5.9.4",
     "mobx-react-lite": "^1.3.2",
     "normalize.css": "^8.0.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
     "react-router-dom": "^5.0.0",
     "react-slick": "^0.24.0",
     "react-twitter-widgets": "^1.7.1",

frontend/src/api/PersonalityApi.ts

@@ -8,7 +8,7 @@ export interface IPersonality {
   description: string;
   image: string;
   tag_list: string[];
-  radios: Exclude<IRadio, "personalities">;
+  radios?: Exclude<IRadio, "personalities">;
 }
 
 export default class PersonalityApi {