├── .gitignore ├── 01-debug ├── 01-vscode-chrome │ ├── .eslintrc.js │ ├── .gitignore │ ├── .stylelintrc.js │ ├── .vscode │ │ ├── extensions.json │ │ ├── launch.json │ │ └── settings.json │ ├── README.md │ ├── images.d.ts │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── App.css │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── actions │ │ │ ├── github.ts │ │ │ ├── githubConstants.ts │ │ │ └── index.d.ts │ │ ├── components │ │ │ ├── Companies │ │ │ │ ├── Members.css │ │ │ │ ├── Members.tsx │ │ │ │ ├── index.css │ │ │ │ └── index.tsx │ │ │ ├── Home.tsx │ │ │ ├── Repositories │ │ │ │ ├── Form.css │ │ │ │ ├── Form.tsx │ │ │ │ ├── List.css │ │ │ │ ├── List.tsx │ │ │ │ ├── Search.css │ │ │ │ └── Search.tsx │ │ │ └── common │ │ │ │ ├── HtmlTitle.tsx │ │ │ │ ├── Spinner.css │ │ │ │ └── Spinner.tsx │ │ ├── containers │ │ │ ├── Companies │ │ │ │ └── Members.tsx │ │ │ └── Repositories │ │ │ │ ├── Form.tsx │ │ │ │ └── List.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── logo.svg │ │ ├── pages.ts │ │ ├── react-app-env.d.ts │ │ ├── reducer.ts │ │ ├── sagas │ │ │ └── github.ts │ │ ├── serviceWorker.ts │ │ ├── services │ │ │ └── github │ │ │ │ ├── api.ts │ │ │ │ └── models.ts │ │ └── styles │ │ │ ├── semantic.min.css │ │ │ └── themes │ │ │ └── default │ │ │ └── assets │ │ │ ├── fonts │ │ │ ├── brand-icons.eot │ │ │ ├── brand-icons.svg │ │ │ ├── brand-icons.ttf │ │ │ ├── brand-icons.woff │ │ │ ├── brand-icons.woff2 │ │ │ ├── icons.eot │ │ │ ├── icons.otf │ │ │ ├── icons.svg │ │ │ ├── icons.ttf │ │ │ ├── icons.woff │ │ │ ├── icons.woff2 │ │ │ ├── outline-icons.eot │ │ │ ├── outline-icons.svg │ │ │ ├── outline-icons.ttf │ │ │ ├── outline-icons.woff │ │ │ └── outline-icons.woff2 │ │ │ └── images │ │ │ └── flags.png │ ├── tsconfig.json │ └── yarn.lock └── 03-redux-devtool │ ├── .eslintrc.js │ ├── .gitignore │ ├── .stylelintrc.js │ ├── .vscode │ ├── extensions.json │ ├── launch.json │ └── settings.json │ ├── README.md │ ├── images.d.ts │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── actions │ │ ├── github.ts │ │ ├── githubConstants.ts │ │ └── index.d.ts │ ├── components │ │ ├── Companies │ │ │ ├── Members.css │ │ │ ├── Members.tsx │ │ │ ├── index.css │ │ │ └── index.tsx │ │ ├── Home.tsx │ │ ├── Repositories │ │ │ ├── Form.css │ │ │ ├── Form.tsx │ │ │ ├── List.css │ │ │ ├── List.tsx │ │ │ ├── Search.css │ │ │ └── Search.tsx │ │ └── common │ │ │ ├── HtmlTitle.tsx │ │ │ ├── Spinner.css │ │ │ └── Spinner.tsx │ ├── containers │ │ ├── Companies │ │ │ └── Members.tsx │ │ └── Repositories │ │ │ ├── Form.tsx │ │ │ └── List.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── pages.ts │ ├── react-app-env.d.ts │ ├── reducer.ts │ ├── sagas │ │ └── github.ts │ ├── serviceWorker.ts │ ├── services │ │ └── github │ │ │ ├── api.ts │ │ │ └── models.ts │ └── styles │ │ ├── semantic.min.css │ │ └── themes │ │ └── default │ │ └── assets │ │ ├── fonts │ │ ├── brand-icons.eot │ │ ├── brand-icons.svg │ │ ├── brand-icons.ttf │ │ ├── brand-icons.woff │ │ ├── brand-icons.woff2 │ │ ├── icons.eot │ │ ├── icons.otf │ │ ├── icons.svg │ │ ├── icons.ttf │ │ ├── icons.woff │ │ ├── icons.woff2 │ │ ├── outline-icons.eot │ │ ├── outline-icons.svg │ │ ├── outline-icons.ttf │ │ ├── outline-icons.woff │ │ └── outline-icons.woff2 │ │ └── images │ │ └── flags.png │ ├── tsconfig.json │ └── yarn.lock ├── 02-css ├── 02-css-modules │ ├── .eslintrc.js │ ├── .gitignore │ ├── .stylelintrc.js │ ├── .vscode │ │ ├── extensions.json │ │ ├── launch.json │ │ └── settings.json │ ├── README.md │ ├── global.d.ts │ ├── images.d.ts │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── App.tsx │ │ ├── actions │ │ │ ├── github.ts │ │ │ ├── githubConstants.ts │ │ │ └── index.ts │ │ ├── app.module.css │ │ ├── components │ │ │ ├── Companies │ │ │ │ ├── Members.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── members.module.css │ │ │ ├── Home.tsx │ │ │ ├── Repositories │ │ │ │ ├── Form.tsx │ │ │ │ ├── List.tsx │ │ │ │ ├── Search.tsx │ │ │ │ ├── form.module.css │ │ │ │ ├── list.module.css │ │ │ │ └── search.module.css │ │ │ └── common │ │ │ │ ├── HtmlTitle.tsx │ │ │ │ ├── Spinner.tsx │ │ │ │ ├── list.module.css │ │ │ │ └── spinner.module.css │ │ ├── containers │ │ │ ├── Companies │ │ │ │ └── Members.tsx │ │ │ └── Repositories │ │ │ │ ├── Form.tsx │ │ │ │ └── List.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── logo.svg │ │ ├── pages.ts │ │ ├── react-app-env.d.ts │ │ ├── reducer.ts │ │ ├── sagas │ │ │ └── github.ts │ │ ├── serviceWorker.ts │ │ ├── services │ │ │ └── github │ │ │ │ ├── api.ts │ │ │ │ └── models.ts │ │ └── styles │ │ │ ├── semantic.min.css │ │ │ └── themes │ │ │ └── default │ │ │ └── assets │ │ │ ├── fonts │ │ │ ├── brand-icons.eot │ │ │ ├── brand-icons.svg │ │ │ ├── brand-icons.ttf │ │ │ ├── brand-icons.woff │ │ │ ├── brand-icons.woff2 │ │ │ ├── icons.eot │ │ │ ├── icons.otf │ │ │ ├── icons.svg │ │ │ ├── icons.ttf │ │ │ ├── icons.woff │ │ │ ├── icons.woff2 │ │ │ ├── outline-icons.eot │ │ │ ├── outline-icons.svg │ │ │ ├── outline-icons.ttf │ │ │ ├── outline-icons.woff │ │ │ └── outline-icons.woff2 │ │ │ └── images │ │ │ └── flags.png │ ├── tsconfig.json │ └── yarn.lock └── 04-emotion │ ├── .eslintrc.js │ ├── .gitignore │ ├── .stylelintrc.js │ ├── .vscode │ ├── extensions.json │ ├── launch.json │ └── settings.json │ ├── README.md │ ├── images.d.ts │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ ├── src │ ├── App.tsx │ ├── actions │ │ ├── github.ts │ │ ├── githubConstants.ts │ │ └── index.ts │ ├── components │ │ ├── Companies │ │ │ ├── Members.tsx │ │ │ └── index.tsx │ │ ├── Home.tsx │ │ ├── Repositories │ │ │ ├── Form.tsx │ │ │ ├── List.tsx │ │ │ └── Search.tsx │ │ └── common │ │ │ ├── HtmlTitle.tsx │ │ │ ├── Spinner.tsx │ │ │ ├── heading.ts │ │ │ └── list.ts │ ├── containers │ │ ├── Companies │ │ │ └── Members.tsx │ │ └── Repositories │ │ │ ├── Form.tsx │ │ │ └── List.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── pages.ts │ ├── react-app-env.d.ts │ ├── reducer.ts │ ├── sagas │ │ └── github.ts │ ├── serviceWorker.ts │ ├── services │ │ └── github │ │ │ ├── api.ts │ │ │ └── models.ts │ └── styles │ │ ├── semantic.min.css │ │ └── themes │ │ └── default │ │ └── assets │ │ ├── fonts │ │ ├── brand-icons.eot │ │ ├── brand-icons.svg │ │ ├── brand-icons.ttf │ │ ├── brand-icons.woff │ │ ├── brand-icons.woff2 │ │ ├── icons.eot │ │ ├── icons.otf │ │ ├── icons.svg │ │ ├── icons.ttf │ │ ├── icons.woff │ │ ├── icons.woff2 │ │ ├── outline-icons.eot │ │ ├── outline-icons.svg │ │ ├── outline-icons.ttf │ │ ├── outline-icons.woff │ │ └── outline-icons.woff2 │ │ └── images │ │ └── flags.png │ ├── tsconfig.json │ └── yarn.lock ├── 03-styleguide └── 03-storybook │ ├── .eslintrc.js │ ├── .gitignore │ ├── .storybook │ ├── addons.js │ ├── config.js │ └── webpack.config.js │ ├── .stylelintrc.js │ ├── .vscode │ ├── extensions.json │ ├── launch.json │ └── settings.json │ ├── README.md │ ├── images.d.ts │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ ├── src │ ├── App.test.tsx │ ├── App.tsx │ ├── actions │ │ ├── github.ts │ │ ├── githubConstants.ts │ │ └── index.ts │ ├── components │ │ ├── Companies │ │ │ ├── Members.tsx │ │ │ ├── index.story.tsx │ │ │ └── index.tsx │ │ ├── Home.tsx │ │ ├── Repositories │ │ │ ├── Form.tsx │ │ │ ├── Formr.story.tsx │ │ │ ├── Result.tsx │ │ │ └── Search.tsx │ │ └── common │ │ │ ├── HtmlTitle.tsx │ │ │ ├── RepositoryList.story.tsx │ │ │ ├── RepositoryList.tsx │ │ │ ├── Spinner.story.tsx │ │ │ ├── Spinner.tsx │ │ │ ├── UserList.story.tsx │ │ │ ├── UserList.tsx │ │ │ ├── heading.ts │ │ │ └── list.ts │ ├── containers │ │ ├── Companies │ │ │ └── Members.tsx │ │ └── Repositories │ │ │ ├── Form.tsx │ │ │ └── Result.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── pages.ts │ ├── react-app-env.d.ts │ ├── reducer.ts │ ├── sagas │ │ └── github.ts │ ├── serviceWorker.ts │ ├── services │ │ └── github │ │ │ ├── __mocks__ │ │ │ ├── repositories.json │ │ │ └── users.json │ │ │ ├── api.ts │ │ │ └── models.ts │ └── styles │ │ ├── semantic.min.css │ │ └── themes │ ├── tsconfig.json │ └── yarn.lock ├── 04-unit-test ├── 02-jest │ ├── .eslintrc.js │ ├── .gitignore │ ├── .storybook │ │ ├── addons.js │ │ ├── config.js │ │ └── webpack.config.js │ ├── .stylelintrc.js │ ├── .vscode │ │ ├── extensions.json │ │ ├── launch.json │ │ └── settings.json │ ├── README.md │ ├── images.d.ts │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── App.tsx │ │ ├── actions │ │ │ ├── github.ts │ │ │ ├── githubConstants.ts │ │ │ └── index.ts │ │ ├── components │ │ │ ├── Companies │ │ │ │ ├── Members.tsx │ │ │ │ ├── index.story.tsx │ │ │ │ └── index.tsx │ │ │ ├── Home.tsx │ │ │ ├── Repositories │ │ │ │ ├── Form.tsx │ │ │ │ ├── Formr.story.tsx │ │ │ │ ├── Result.tsx │ │ │ │ └── Search.tsx │ │ │ └── common │ │ │ │ ├── HtmlTitle.tsx │ │ │ │ ├── RepositoryList.story.tsx │ │ │ │ ├── RepositoryList.tsx │ │ │ │ ├── Spinner.story.tsx │ │ │ │ ├── Spinner.tsx │ │ │ │ ├── UserList.story.tsx │ │ │ │ ├── UserList.tsx │ │ │ │ ├── heading.ts │ │ │ │ └── list.ts │ │ ├── containers │ │ │ ├── Companies │ │ │ │ └── Members.tsx │ │ │ └── Repositories │ │ │ │ ├── Form.tsx │ │ │ │ └── Result.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── logo.svg │ │ ├── pages.ts │ │ ├── react-app-env.d.ts │ │ ├── reducer.ts │ │ ├── sagas │ │ │ └── github.ts │ │ ├── serviceWorker.ts │ │ ├── services │ │ │ └── github │ │ │ │ ├── __mocks__ │ │ │ │ ├── repositories.json │ │ │ │ └── users.json │ │ │ │ ├── api.spec.ts │ │ │ │ ├── api.ts │ │ │ │ └── models.ts │ │ └── styles │ │ │ ├── semantic.min.css │ │ │ └── themes │ │ │ └── default │ │ │ └── assets │ │ │ ├── fonts │ │ │ ├── brand-icons.eot │ │ │ ├── brand-icons.svg │ │ │ ├── brand-icons.ttf │ │ │ ├── brand-icons.woff │ │ │ ├── brand-icons.woff2 │ │ │ ├── icons.eot │ │ │ ├── icons.otf │ │ │ ├── icons.svg │ │ │ ├── icons.ttf │ │ │ ├── icons.woff │ │ │ ├── icons.woff2 │ │ │ ├── outline-icons.eot │ │ │ ├── outline-icons.svg │ │ │ ├── outline-icons.ttf │ │ │ ├── outline-icons.woff │ │ │ └── outline-icons.woff2 │ │ │ └── images │ │ │ └── flags.png │ ├── tsconfig.json │ └── yarn.lock ├── 03-saga-test │ ├── .eslintrc.js │ ├── .gitignore │ ├── .storybook │ │ ├── addons.js │ │ ├── config.js │ │ └── webpack.config.js │ ├── .stylelintrc.js │ ├── .vscode │ │ ├── extensions.json │ │ ├── launch.json │ │ └── settings.json │ ├── README.md │ ├── images.d.ts │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── App.tsx │ │ ├── actions │ │ │ ├── github.ts │ │ │ ├── githubConstants.ts │ │ │ └── index.ts │ │ ├── components │ │ │ ├── Companies │ │ │ │ ├── Members.tsx │ │ │ │ ├── index.story.tsx │ │ │ │ └── index.tsx │ │ │ ├── Home.tsx │ │ │ ├── Repositories │ │ │ │ ├── Form.tsx │ │ │ │ ├── Formr.story.tsx │ │ │ │ ├── Result.tsx │ │ │ │ └── Search.tsx │ │ │ └── common │ │ │ │ ├── HtmlTitle.tsx │ │ │ │ ├── RepositoryList.story.tsx │ │ │ │ ├── RepositoryList.tsx │ │ │ │ ├── Spinner.story.tsx │ │ │ │ ├── Spinner.tsx │ │ │ │ ├── UserList.story.tsx │ │ │ │ ├── UserList.tsx │ │ │ │ ├── heading.ts │ │ │ │ └── list.ts │ │ ├── containers │ │ │ ├── Companies │ │ │ │ └── Members.tsx │ │ │ └── Repositories │ │ │ │ ├── Form.tsx │ │ │ │ └── Result.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── logo.svg │ │ ├── pages.ts │ │ ├── react-app-env.d.ts │ │ ├── reducer.ts │ │ ├── sagas │ │ │ ├── github.spec.ts │ │ │ └── github.ts │ │ ├── serviceWorker.ts │ │ ├── services │ │ │ └── github │ │ │ │ ├── __mocks__ │ │ │ │ ├── repositories.json │ │ │ │ └── users.json │ │ │ │ ├── api.spec.ts │ │ │ │ ├── api.ts │ │ │ │ └── models.ts │ │ └── styles │ │ │ ├── semantic.min.css │ │ │ └── themes │ │ │ └── default │ │ │ └── assets │ │ │ ├── fonts │ │ │ ├── brand-icons.eot │ │ │ ├── brand-icons.svg │ │ │ ├── brand-icons.ttf │ │ │ ├── brand-icons.woff │ │ │ ├── brand-icons.woff2 │ │ │ ├── icons.eot │ │ │ ├── icons.otf │ │ │ ├── icons.svg │ │ │ ├── icons.ttf │ │ │ ├── icons.woff │ │ │ ├── icons.woff2 │ │ │ ├── outline-icons.eot │ │ │ ├── outline-icons.svg │ │ │ ├── outline-icons.ttf │ │ │ ├── outline-icons.woff │ │ │ └── outline-icons.woff2 │ │ │ └── images │ │ │ └── flags.png │ ├── tsconfig.json │ └── yarn.lock └── 04-storyshots │ ├── .eslintrc.js │ ├── .gitignore │ ├── .storybook │ ├── addons.js │ ├── config.js │ └── webpack.config.js │ ├── .stylelintrc.js │ ├── .vscode │ ├── extensions.json │ ├── launch.json │ └── settings.json │ ├── README.md │ ├── images.d.ts │ ├── package.json │ ├── patches │ └── semantic-ui-react+0.86.0.patch │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ ├── src │ ├── App.tsx │ ├── actions │ │ ├── github.ts │ │ ├── githubConstants.ts │ │ └── index.ts │ ├── components │ │ ├── Companies │ │ │ ├── Members.tsx │ │ │ ├── index.story.tsx │ │ │ └── index.tsx │ │ ├── Home.tsx │ │ ├── Repositories │ │ │ ├── Form.tsx │ │ │ ├── Formr.story.tsx │ │ │ ├── Result.tsx │ │ │ └── Search.tsx │ │ ├── common │ │ │ ├── HtmlTitle.tsx │ │ │ ├── RepositoryList.story.tsx │ │ │ ├── RepositoryList.tsx │ │ │ ├── Spinner.story.tsx │ │ │ ├── Spinner.tsx │ │ │ ├── UserList.story.tsx │ │ │ ├── UserList.tsx │ │ │ ├── heading.ts │ │ │ └── list.ts │ │ └── storyshots.test.ts │ ├── containers │ │ ├── Companies │ │ │ └── Members.tsx │ │ └── Repositories │ │ │ ├── Form.tsx │ │ │ └── Result.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── pages.ts │ ├── react-app-env.d.ts │ ├── reducer.ts │ ├── sagas │ │ ├── github.spec.ts │ │ └── github.ts │ ├── serviceWorker.ts │ ├── services │ │ └── github │ │ │ ├── __mocks__ │ │ │ ├── repositories.json │ │ │ └── users.json │ │ │ ├── api.spec.ts │ │ │ ├── api.ts │ │ │ └── models.ts │ └── styles │ │ ├── semantic.min.css │ │ └── themes │ │ └── default │ │ └── assets │ │ ├── fonts │ │ ├── brand-icons.eot │ │ ├── brand-icons.svg │ │ ├── brand-icons.ttf │ │ ├── brand-icons.woff │ │ ├── brand-icons.woff2 │ │ ├── icons.eot │ │ ├── icons.otf │ │ ├── icons.svg │ │ ├── icons.ttf │ │ ├── icons.woff │ │ ├── icons.woff2 │ │ ├── outline-icons.eot │ │ ├── outline-icons.svg │ │ ├── outline-icons.ttf │ │ ├── outline-icons.woff │ │ └── outline-icons.woff2 │ │ └── images │ │ └── flags.png │ ├── tsconfig.json │ └── yarn.lock ├── 05-e2e-test └── 02-cypress │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── .storybook │ ├── addons.js │ ├── config.js │ └── webpack.config.js │ ├── .stylelintrc.js │ ├── .vscode │ ├── extensions.json │ ├── launch.json │ └── settings.json │ ├── README.md │ ├── cypress.json │ ├── cypress │ ├── fixtures │ │ └── example.json │ ├── integration │ │ ├── getMembers.spec.ts │ │ └── searchRepositories.spec.ts │ ├── plugins │ │ └── index.js │ ├── support │ │ ├── commands.js │ │ └── index.js │ └── tsconfig.json │ ├── images.d.ts │ ├── package.json │ ├── patches │ └── semantic-ui-react+0.86.0.patch │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ ├── src │ ├── App.tsx │ ├── actions │ │ ├── github.ts │ │ ├── githubConstants.ts │ │ └── index.ts │ ├── components │ │ ├── Companies │ │ │ ├── Members.tsx │ │ │ ├── index.story.tsx │ │ │ └── index.tsx │ │ ├── Home.tsx │ │ ├── Repositories │ │ │ ├── Form.tsx │ │ │ ├── Formr.story.tsx │ │ │ ├── Result.tsx │ │ │ └── Search.tsx │ │ ├── __snapshots__ │ │ │ └── storyshots.test.ts.snap │ │ ├── common │ │ │ ├── HtmlTitle.tsx │ │ │ ├── RepositoryList.story.tsx │ │ │ ├── RepositoryList.tsx │ │ │ ├── Spinner.story.tsx │ │ │ ├── Spinner.tsx │ │ │ ├── UserList.story.tsx │ │ │ ├── UserList.tsx │ │ │ ├── heading.ts │ │ │ └── list.ts │ │ └── storyshots.test.ts │ ├── containers │ │ ├── Companies │ │ │ └── Members.tsx │ │ └── Repositories │ │ │ ├── Form.tsx │ │ │ └── Result.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── pages.ts │ ├── react-app-env.d.ts │ ├── reducer.ts │ ├── sagas │ │ ├── github.spec.ts │ │ └── github.ts │ ├── serviceWorker.ts │ ├── services │ │ └── github │ │ │ ├── __mocks__ │ │ │ ├── repositories.json │ │ │ └── users.json │ │ │ ├── api.spec.ts │ │ │ ├── api.ts │ │ │ └── models.ts │ └── styles │ │ ├── semantic.min.css │ │ └── themes │ │ └── default │ │ └── assets │ │ ├── fonts │ │ ├── brand-icons.eot │ │ ├── brand-icons.svg │ │ ├── brand-icons.ttf │ │ ├── brand-icons.woff │ │ ├── brand-icons.woff2 │ │ ├── icons.eot │ │ ├── icons.otf │ │ ├── icons.svg │ │ ├── icons.ttf │ │ ├── icons.woff │ │ ├── icons.woff2 │ │ ├── outline-icons.eot │ │ ├── outline-icons.svg │ │ ├── outline-icons.ttf │ │ ├── outline-icons.woff │ │ └── outline-icons.woff2 │ │ └── images │ │ └── flags.png │ ├── tsconfig.json │ └── yarn.lock ├── LICENSE ├── README.md └── samples └── react-otj-sample.pdf /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # TypeScript 7 | /lib 8 | 9 | # testing 10 | coverage 11 | lib-cov 12 | 13 | # production 14 | /build 15 | 16 | # logs 17 | logs 18 | *.log 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | 23 | # Optional npm cache directory 24 | .npm 25 | 26 | # Yarn Integrity file 27 | .yarn-integrity 28 | 29 | # Optional eslint cache 30 | .eslintcache 31 | 32 | # IDE 33 | .idea/ 34 | .*.swp 35 | 36 | # misc 37 | .DS_Store 38 | .env 39 | .env.local 40 | .env.development.local 41 | .env.test.local 42 | .env.production.local 43 | 44 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # TypeScript 7 | /lib 8 | 9 | # testing 10 | coverage 11 | lib-cov 12 | 13 | # production 14 | /build 15 | 16 | # logs 17 | logs 18 | *.log 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | 23 | # Optional npm cache directory 24 | .npm 25 | 26 | # Yarn Integrity file 27 | .yarn-integrity 28 | 29 | # Optional eslint cache 30 | .eslintcache 31 | 32 | # IDE 33 | .idea/ 34 | .*.swp 35 | .vscode/chrome 36 | 37 | # misc 38 | .DS_Store 39 | .env 40 | .env.local 41 | .env.development.local 42 | .env.test.local 43 | .env.production.local 44 | 45 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/.stylelintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: ['stylelint-order'], 3 | extends: [ 4 | 'stylelint-config-standard', 5 | './node_modules/prettier-stylelint/config.js' 6 | ], 7 | ignoreFiles: [ 8 | '**/node_modules/**', 9 | 'src/styles/**' 10 | ], 11 | rules: { 12 | 'indentation': 2, 13 | 'string-quotes': 'single', 14 | 'order/properties-alphabetical-order': true 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. 3 | // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp 4 | 5 | // List of extensions which should be recommended for users of this workspace. 6 | "recommendations": [ 7 | "coenraads.bracket-pair-colorizer", 8 | "dbaeumer.vscode-eslint", 9 | "esbenp.prettier-vscode", 10 | "msjsdiag.debugger-for-chrome", 11 | "ms-vsliveshare.vsliveshare", 12 | "oderwat.indent-rainbow", 13 | "shinnn.stylelint", 14 | "VisualStudioExptTeam.vscodeintellicode", 15 | "vscode-icons-team.vscode-icons" 16 | ], 17 | // List of extensions recommended by VS Code that should not be recommended for users of this workspace. 18 | "unwantedRecommendations": [] 19 | } 20 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "name": "Launch Chrome against localhost", 9 | "type": "chrome", 10 | "request": "launch", 11 | "url": "http://localhost:3000", 12 | "webRoot": "${workspaceRoot}/src", 13 | "userDataDir": "${workspaceRoot}/.vscode/chrome", 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*" 16 | } 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "css.validate": true, 3 | "editor.formatOnSave": true, 4 | "eslint.autoFixOnSave": true, 5 | "eslint.enable": true, 6 | "eslint.validate": [ 7 | { 8 | "language": "javascript", 9 | "autoFix": true 10 | }, 11 | { 12 | "language": "javascriptreact", 13 | "autoFix": true 14 | }, 15 | { 16 | "language": "typescript", 17 | "autoFix": true 18 | }, 19 | { 20 | "language": "typescriptreact", 21 | "autoFix": true 22 | } 23 | ], 24 | "files.insertFinalNewline": true, 25 | "files.trimTrailingWhitespace": true, 26 | "prettier.eslintIntegration": true, 27 | "prettier.stylelintIntegration": true, 28 | "stylelint.enable": true, 29 | "typescript.tsserver.trace": "verbose", 30 | "[markdown]": { 31 | "files.trimTrailingWhitespace": false 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/images.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.svg'; 2 | declare module '*.png'; 3 | declare module '*.jpg'; 4 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/01-vscode-chrome/public/favicon.ico -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | margin: 2.5em auto 0; 3 | max-width: 930px; 4 | } 5 | 6 | .container { 7 | font-size: 1rem !important; 8 | max-width: none !important; 9 | width: 700px !important; 10 | } 11 | 12 | .App-header { 13 | background-color: #222; 14 | color: white; 15 | margin-bottom: 4em; 16 | padding: 20px; 17 | text-align: center; 18 | } 19 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/actions/githubConstants.ts: -------------------------------------------------------------------------------- 1 | export const GET_MEMBERS_START = 'GITHUB/GET_MEMBERS_START'; 2 | export const GET_MEMBERS_SUCCEED = 'GITHUB/GET_MEMBERS_SUCCEED'; 3 | export const GET_MEMBERS_FAIL = 'GITHUB/GET_MEMBERS_FAIL'; 4 | export const SEARCH_REPOSITORIES_START = 'GITHUB/SEARCH_REPOSITORIES_START'; 5 | export const SEARCH_REPOSITORIES_SUCCEED = 'GITHUB/SEARCH_REPOSITORIES_SUCCEED'; 6 | export const SEARCH_REPOSITORIES_FAIL = 'GITHUB/SEARCH_REPOSITORIES_FAIL'; 7 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/actions/index.d.ts: -------------------------------------------------------------------------------- 1 | export interface Action { 2 | type: string; 3 | payload?: Payload; 4 | error?: boolean; 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 6 | meta?: { [key: string]: any } | null; 7 | } 8 | 9 | export interface ActionStart { 10 | type: ActionType; 11 | payload?: Params; 12 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 13 | meta?: { [key: string]: any } | null; 14 | } 15 | 16 | export interface ActionSucceed { 17 | type: ActionType; 18 | payload: { 19 | params: Params; 20 | result: Result; 21 | }; 22 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 23 | meta?: { [key: string]: any } | null; 24 | } 25 | 26 | export interface ActionFail { 27 | type: ActionType; 28 | payload: { 29 | params: Params; 30 | error: AnyError; 31 | }; 32 | error: boolean; 33 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 34 | meta?: { [key: string]: any } | null; 35 | } 36 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/components/Companies/Members.css: -------------------------------------------------------------------------------- 1 | .members { 2 | margin: 2em 1em; 3 | } 4 | 5 | .members > .ui.header { 6 | margin-bottom: 1.25em; 7 | text-align: center; 8 | } 9 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/components/Companies/index.css: -------------------------------------------------------------------------------- 1 | .list-item { 2 | padding: 1em 0 !important; 3 | } 4 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/components/Companies/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import capitalize from 'lodash/capitalize'; 4 | import { List } from 'semantic-ui-react'; 5 | 6 | import './index.css'; 7 | 8 | const companies = ['facebook', 'airbnb', 'netflix']; 9 | 10 | const Companies: FC = () => ( 11 | <> 12 | 13 | {companies.map(companyName => ( 14 | 15 | 16 | 17 | 18 | {capitalize(companyName)}のメンバー 19 | 20 | 21 | 22 | ))} 23 | 24 | 25 | ); 26 | 27 | export default Companies; 28 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/components/Home.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import { List } from 'semantic-ui-react'; 4 | 5 | import pages from '../pages'; 6 | 7 | const Home: FC = () => ( 8 | <> 9 | 10 | 11 | 16 | 17 | 18 | {pages.companies.index.title} 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | {pages.repositories.search.title} 27 | 28 | 29 | 30 | 31 | 32 | ); 33 | 34 | export default Home; 35 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/components/Repositories/Form.css: -------------------------------------------------------------------------------- 1 | .repository-form { 2 | margin: 2em 0 4em; 3 | text-align: center; 4 | } 5 | 6 | .repository-form > .ui.input { 7 | margin: 0.5em; 8 | width: 30em; 9 | } 10 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/components/Repositories/List.css: -------------------------------------------------------------------------------- 1 | .stats { 2 | margin-right: 1em; 3 | } 4 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/components/Repositories/Search.css: -------------------------------------------------------------------------------- 1 | .repositories { 2 | margin: 2em 1em; 3 | } 4 | 5 | .repositories > .ui.header { 6 | margin-bottom: 1.25em; 7 | text-align: center; 8 | } 9 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/components/Repositories/Search.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { Helmet } from 'react-helmet'; 3 | import { Header } from 'semantic-ui-react'; 4 | import RepositoryForm from '../../containers/Repositories/Form'; 5 | import RepositoryList from '../../containers/Repositories/List'; 6 | import pages from '../../pages'; 7 | 8 | import './Search.css'; 9 | 10 | const RepositorySearch: FC = () => ( 11 | <> 12 | 13 | {pages.repositories.search.title} 14 | 15 |
16 |
{pages.repositories.search.title}
17 | 18 | 19 |
20 | 21 | ); 22 | 23 | export default RepositorySearch; 24 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/components/common/HtmlTitle.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { Helmet } from 'react-helmet'; 3 | 4 | const HtmlTitle: FC<{ title: string }> = ({ title = '' }) => 5 | title ? ( 6 | 7 | {title} 8 | 9 | ) : ( 10 |
11 | ); 12 | 13 | export default HtmlTitle; 14 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/components/common/Spinner.css: -------------------------------------------------------------------------------- 1 | .spinner { 2 | box-shadow: 0 !important; 3 | height: 30em; 4 | } 5 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/components/common/Spinner.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { Dimmer, Loader, Segment } from 'semantic-ui-react'; 3 | 4 | import './Spinner.css'; 5 | 6 | const Spinner: FC = () => ( 7 | 8 | 9 | 読み込み中... 10 | 11 | 12 | ); 13 | 14 | export default Spinner; 15 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/containers/Repositories/List.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { connect } from 'react-redux'; 3 | 4 | import RepositoriesSearch, { 5 | RepositoryListProps, 6 | } from '../../components/Repositories/List'; 7 | import { Repository } from '../../services/github/models'; 8 | import { GithubState } from '../../reducer'; 9 | 10 | interface StateProps { 11 | repositories: Repository[]; 12 | isLoading: boolean; 13 | } 14 | 15 | type EnhancedRepositoryListProps = RepositoryListProps & StateProps; 16 | 17 | const mapStateToProps = (state: GithubState): StateProps => ({ 18 | repositories: state.repositories, 19 | isLoading: state.isLoading, 20 | }); 21 | 22 | const RepositoryListContainer: FC = ({ 23 | repositories, 24 | isLoading, 25 | }) => ; 26 | 27 | export default connect(mapStateToProps)(RepositoryListContainer); 28 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: sans-serif; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { Provider } from 'react-redux'; 4 | import { createStore, applyMiddleware } from 'redux'; 5 | import { BrowserRouter } from 'react-router-dom'; 6 | import createSagaMiddleware from 'redux-saga'; 7 | 8 | import App from './App'; 9 | import reducer from './reducer'; 10 | import rootSaga from './sagas/github'; 11 | import * as serviceWorker from './serviceWorker'; 12 | 13 | import './index.css'; 14 | import './styles/semantic.min.css'; 15 | 16 | const sagaMiddleWare = createSagaMiddleware(); 17 | const store = createStore(reducer, applyMiddleware(sagaMiddleWare)); 18 | 19 | ReactDOM.render( 20 | 21 | 22 | 23 | 24 | , 25 | document.getElementById('root') as HTMLElement, 26 | ); 27 | 28 | serviceWorker.unregister(); 29 | sagaMiddleWare.run(rootSaga); 30 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/pages.ts: -------------------------------------------------------------------------------- 1 | /* 2 | type PageScheme = 3 | | { 4 | path: string; 5 | title: string; 6 | } 7 | | Pages; 8 | 9 | interface Pages { 10 | [x: string]: PageScheme; 11 | } 12 | */ 13 | 14 | const pages = { 15 | index: { 16 | path: '/', 17 | title: 'GitHub API サンプルアプリ', 18 | }, 19 | companies: { 20 | index: { 21 | path: '/companies', 22 | title: 'いろんな会社のメンバー', 23 | }, 24 | members: { 25 | path: '/:companyName/members', 26 | title: '%s のメンバー', 27 | }, 28 | }, 29 | repositories: { 30 | search: { 31 | path: '/repositories/search', 32 | title: 'リポジトリ検索', 33 | }, 34 | }, 35 | }; 36 | 37 | export default pages; 38 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | // 2 | -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/brand-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/brand-icons.eot -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/brand-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/brand-icons.ttf -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/brand-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/brand-icons.woff -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/brand-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/brand-icons.woff2 -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/icons.eot -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/icons.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/icons.otf -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/icons.ttf -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/icons.woff -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/icons.woff2 -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/outline-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/outline-icons.eot -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/outline-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/outline-icons.ttf -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/outline-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/outline-icons.woff -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/outline-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/01-vscode-chrome/src/styles/themes/default/assets/fonts/outline-icons.woff2 -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/src/styles/themes/default/assets/images/flags.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/01-vscode-chrome/src/styles/themes/default/assets/images/flags.png -------------------------------------------------------------------------------- /01-debug/01-vscode-chrome/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "plugins": [{"name": "css-module-types"}], 6 | "allowJs": true, 7 | "skipLibCheck": true, 8 | "esModuleInterop": true, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "incremental": true, 18 | "tsBuildInfoFile": "./buildcache/tsbuildinfo", 19 | "jsx": "preserve", 20 | "outDir": "build", 21 | "rootDirs": ["src"] 22 | }, 23 | "include": ["src"], 24 | "exclude": [ 25 | "node_modules", 26 | "build", 27 | "dist", 28 | "scripts" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # TypeScript 7 | /lib 8 | 9 | # testing 10 | coverage 11 | lib-cov 12 | 13 | # production 14 | /build 15 | 16 | # logs 17 | logs 18 | *.log 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | 23 | # Optional npm cache directory 24 | .npm 25 | 26 | # Yarn Integrity file 27 | .yarn-integrity 28 | 29 | # Optional eslint cache 30 | .eslintcache 31 | 32 | # IDE 33 | .idea/ 34 | .*.swp 35 | .vscode/chrome 36 | 37 | # misc 38 | .DS_Store 39 | .env 40 | .env.local 41 | .env.development.local 42 | .env.test.local 43 | .env.production.local 44 | 45 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/.stylelintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: ['stylelint-order'], 3 | extends: [ 4 | 'stylelint-config-standard', 5 | './node_modules/prettier-stylelint/config.js' 6 | ], 7 | ignoreFiles: [ 8 | '**/node_modules/**', 9 | 'src/styles/**' 10 | ], 11 | rules: { 12 | 'indentation': 2, 13 | 'string-quotes': 'single', 14 | 'order/properties-alphabetical-order': true 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. 3 | // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp 4 | 5 | // List of extensions which should be recommended for users of this workspace. 6 | "recommendations": [ 7 | "coenraads.bracket-pair-colorizer", 8 | "dbaeumer.vscode-eslint", 9 | "esbenp.prettier-vscode", 10 | "msjsdiag.debugger-for-chrome", 11 | "ms-vsliveshare.vsliveshare", 12 | "oderwat.indent-rainbow", 13 | "shinnn.stylelint", 14 | "VisualStudioExptTeam.vscodeintellicode", 15 | "vscode-icons-team.vscode-icons" 16 | ], 17 | // List of extensions recommended by VS Code that should not be recommended for users of this workspace. 18 | "unwantedRecommendations": [] 19 | } 20 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "name": "Launch Chrome against localhost", 9 | "type": "chrome", 10 | "request": "launch", 11 | "url": "http://localhost:3000", 12 | "webRoot": "${workspaceRoot}/src", 13 | "userDataDir": "${workspaceRoot}/.vscode/chrome", 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*" 16 | } 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "css.validate": true, 3 | "editor.formatOnSave": true, 4 | "eslint.autoFixOnSave": true, 5 | "eslint.enable": true, 6 | "eslint.validate": [ 7 | { 8 | "language": "javascript", 9 | "autoFix": true 10 | }, 11 | { 12 | "language": "javascriptreact", 13 | "autoFix": true 14 | }, 15 | { 16 | "language": "typescript", 17 | "autoFix": true 18 | }, 19 | { 20 | "language": "typescriptreact", 21 | "autoFix": true 22 | } 23 | ], 24 | "files.insertFinalNewline": true, 25 | "files.trimTrailingWhitespace": true, 26 | "prettier.eslintIntegration": true, 27 | "prettier.stylelintIntegration": true, 28 | "stylelint.enable": true, 29 | "typescript.tsserver.trace": "verbose", 30 | "[markdown]": { 31 | "files.trimTrailingWhitespace": false 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/images.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.svg'; 2 | declare module '*.png'; 3 | declare module '*.jpg'; 4 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/03-redux-devtool/public/favicon.ico -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | margin: 2.5em auto 0; 3 | max-width: 930px; 4 | } 5 | 6 | .container { 7 | font-size: 1rem !important; 8 | max-width: none !important; 9 | width: 700px !important; 10 | } 11 | 12 | .App-header { 13 | background-color: #222; 14 | color: white; 15 | margin-bottom: 4em; 16 | padding: 20px; 17 | text-align: center; 18 | } 19 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/actions/githubConstants.ts: -------------------------------------------------------------------------------- 1 | export const GET_MEMBERS_START = 'GITHUB/GET_MEMBERS_START'; 2 | export const GET_MEMBERS_SUCCEED = 'GITHUB/GET_MEMBERS_SUCCEED'; 3 | export const GET_MEMBERS_FAIL = 'GITHUB/GET_MEMBERS_FAIL'; 4 | export const SEARCH_REPOSITORIES_START = 'GITHUB/SEARCH_REPOSITORIES_START'; 5 | export const SEARCH_REPOSITORIES_SUCCEED = 'GITHUB/SEARCH_REPOSITORIES_SUCCEED'; 6 | export const SEARCH_REPOSITORIES_FAIL = 'GITHUB/SEARCH_REPOSITORIES_FAIL'; 7 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/actions/index.d.ts: -------------------------------------------------------------------------------- 1 | export interface Action { 2 | type: string; 3 | payload?: Payload; 4 | error?: boolean; 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 6 | meta?: { [key: string]: any } | null; 7 | } 8 | 9 | export interface ActionStart { 10 | type: ActionType; 11 | payload?: Params; 12 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 13 | meta?: { [key: string]: any } | null; 14 | } 15 | 16 | export interface ActionSucceed { 17 | type: ActionType; 18 | payload: { 19 | params: Params; 20 | result: Result; 21 | }; 22 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 23 | meta?: { [key: string]: any } | null; 24 | } 25 | 26 | export interface ActionFail { 27 | type: ActionType; 28 | payload: { 29 | params: Params; 30 | error: AnyError; 31 | }; 32 | error: boolean; 33 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 34 | meta?: { [key: string]: any } | null; 35 | } 36 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/components/Companies/Members.css: -------------------------------------------------------------------------------- 1 | .members { 2 | margin: 2em 1em; 3 | } 4 | 5 | .members > .ui.header { 6 | margin-bottom: 1.25em; 7 | text-align: center; 8 | } 9 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/components/Companies/index.css: -------------------------------------------------------------------------------- 1 | .list-item { 2 | padding: 1em 0 !important; 3 | } 4 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/components/Companies/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import capitalize from 'lodash/capitalize'; 4 | import { List } from 'semantic-ui-react'; 5 | 6 | import './index.css'; 7 | 8 | const companies = ['facebook', 'airbnb', 'netflix']; 9 | 10 | const Companies: FC = () => ( 11 | <> 12 | 13 | {companies.map(companyName => ( 14 | 15 | 16 | 17 | 18 | {capitalize(companyName)}のメンバー 19 | 20 | 21 | 22 | ))} 23 | 24 | 25 | ); 26 | 27 | export default Companies; 28 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/components/Home.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import { List } from 'semantic-ui-react'; 4 | 5 | import pages from '../pages'; 6 | 7 | const Home: FC = () => ( 8 | <> 9 | 10 | 11 | 16 | 17 | 18 | {pages.companies.index.title} 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | {pages.repositories.search.title} 27 | 28 | 29 | 30 | 31 | 32 | ); 33 | 34 | export default Home; 35 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/components/Repositories/Form.css: -------------------------------------------------------------------------------- 1 | .repository-form { 2 | margin: 2em 0 4em; 3 | text-align: center; 4 | } 5 | 6 | .repository-form > .ui.input { 7 | margin: 0.5em; 8 | width: 30em; 9 | } 10 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/components/Repositories/List.css: -------------------------------------------------------------------------------- 1 | .stats { 2 | margin-right: 1em; 3 | } 4 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/components/Repositories/Search.css: -------------------------------------------------------------------------------- 1 | .repositories { 2 | margin: 2em 1em; 3 | } 4 | 5 | .repositories > .ui.header { 6 | margin-bottom: 1.25em; 7 | text-align: center; 8 | } 9 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/components/Repositories/Search.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { Helmet } from 'react-helmet'; 3 | import { Header } from 'semantic-ui-react'; 4 | import RepositoryForm from '../../containers/Repositories/Form'; 5 | import RepositoryList from '../../containers/Repositories/List'; 6 | import pages from '../../pages'; 7 | 8 | import './Search.css'; 9 | 10 | const RepositorySearch: FC = () => ( 11 | <> 12 | 13 | {pages.repositories.search.title} 14 | 15 |
16 |
{pages.repositories.search.title}
17 | 18 | 19 |
20 | 21 | ); 22 | 23 | export default RepositorySearch; 24 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/components/common/HtmlTitle.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { Helmet } from 'react-helmet'; 3 | 4 | const HtmlTitle: FC<{ title: string }> = ({ title = '' }) => 5 | title ? ( 6 | 7 | {title} 8 | 9 | ) : ( 10 |
11 | ); 12 | 13 | export default HtmlTitle; 14 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/components/common/Spinner.css: -------------------------------------------------------------------------------- 1 | .spinner { 2 | box-shadow: 0 !important; 3 | height: 30em; 4 | } 5 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/components/common/Spinner.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { Dimmer, Loader, Segment } from 'semantic-ui-react'; 3 | 4 | import './Spinner.css'; 5 | 6 | const Spinner: FC = () => ( 7 | 8 | 9 | 読み込み中... 10 | 11 | 12 | ); 13 | 14 | export default Spinner; 15 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/containers/Repositories/List.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { connect } from 'react-redux'; 3 | 4 | import RepositoriesSearch, { 5 | RepositoryListProps, 6 | } from '../../components/Repositories/List'; 7 | import { Repository } from '../../services/github/models'; 8 | import { GithubState } from '../../reducer'; 9 | 10 | interface StateProps { 11 | repositories: Repository[]; 12 | isLoading: boolean; 13 | } 14 | 15 | type EnhancedRepositoryListProps = RepositoryListProps & StateProps; 16 | 17 | const mapStateToProps = (state: GithubState): StateProps => ({ 18 | repositories: state.repositories, 19 | isLoading: state.isLoading, 20 | }); 21 | 22 | const RepositoryListContainer: FC = ({ 23 | repositories, 24 | isLoading, 25 | }) => ; 26 | 27 | export default connect(mapStateToProps)(RepositoryListContainer); 28 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: sans-serif; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/pages.ts: -------------------------------------------------------------------------------- 1 | /* 2 | type PageScheme = 3 | | { 4 | path: string; 5 | title: string; 6 | } 7 | | Pages; 8 | 9 | interface Pages { 10 | [x: string]: PageScheme; 11 | } 12 | */ 13 | 14 | const pages = { 15 | index: { 16 | path: '/', 17 | title: 'GitHub API サンプルアプリ', 18 | }, 19 | companies: { 20 | index: { 21 | path: '/companies', 22 | title: 'いろんな会社のメンバー', 23 | }, 24 | members: { 25 | path: '/:companyName/members', 26 | title: '%s のメンバー', 27 | }, 28 | }, 29 | repositories: { 30 | search: { 31 | path: '/repositories/search', 32 | title: 'リポジトリ検索', 33 | }, 34 | }, 35 | }; 36 | 37 | export default pages; 38 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | // 2 | -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/brand-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/brand-icons.eot -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/brand-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/brand-icons.ttf -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/brand-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/brand-icons.woff -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/brand-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/brand-icons.woff2 -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/icons.eot -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/icons.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/icons.otf -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/icons.ttf -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/icons.woff -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/icons.woff2 -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/outline-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/outline-icons.eot -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/outline-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/outline-icons.ttf -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/outline-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/outline-icons.woff -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/outline-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/03-redux-devtool/src/styles/themes/default/assets/fonts/outline-icons.woff2 -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/src/styles/themes/default/assets/images/flags.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/01-debug/03-redux-devtool/src/styles/themes/default/assets/images/flags.png -------------------------------------------------------------------------------- /01-debug/03-redux-devtool/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "plugins": [{"name": "css-module-types"}], 6 | "allowJs": true, 7 | "skipLibCheck": true, 8 | "esModuleInterop": true, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "incremental": true, 18 | "tsBuildInfoFile": "./buildcache/tsbuildinfo", 19 | "jsx": "preserve", 20 | "outDir": "build", 21 | "rootDirs": ["src"] 22 | }, 23 | "include": ["src"], 24 | "exclude": [ 25 | "node_modules", 26 | "build", 27 | "dist", 28 | "scripts" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /02-css/02-css-modules/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # TypeScript 7 | /lib 8 | 9 | # testing 10 | coverage 11 | lib-cov 12 | 13 | # production 14 | /build 15 | 16 | # logs 17 | logs 18 | *.log 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | 23 | # Optional npm cache directory 24 | .npm 25 | 26 | # Yarn Integrity file 27 | .yarn-integrity 28 | 29 | # Optional eslint cache 30 | .eslintcache 31 | 32 | # IDE 33 | .idea/ 34 | .*.swp 35 | .vscode/chrome 36 | 37 | # misc 38 | .DS_Store 39 | .env 40 | .env.local 41 | .env.development.local 42 | .env.test.local 43 | .env.production.local 44 | 45 | -------------------------------------------------------------------------------- /02-css/02-css-modules/.stylelintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: ['stylelint-order'], 3 | extends: [ 4 | 'stylelint-config-standard', 5 | './node_modules/prettier-stylelint/config.js' 6 | ], 7 | ignoreFiles: [ 8 | '**/node_modules/**', 9 | 'src/styles/**' 10 | ], 11 | rules: { 12 | 'indentation': 2, 13 | 'string-quotes': 'single', 14 | 'order/properties-alphabetical-order': true 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /02-css/02-css-modules/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. 3 | // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp 4 | 5 | // List of extensions which should be recommended for users of this workspace. 6 | "recommendations": [ 7 | "coenraads.bracket-pair-colorizer", 8 | "dbaeumer.vscode-eslint", 9 | "esbenp.prettier-vscode", 10 | "msjsdiag.debugger-for-chrome", 11 | "ms-vsliveshare.vsliveshare", 12 | "oderwat.indent-rainbow", 13 | "shinnn.stylelint", 14 | "VisualStudioExptTeam.vscodeintellicode", 15 | "vscode-icons-team.vscode-icons" 16 | ], 17 | // List of extensions recommended by VS Code that should not be recommended for users of this workspace. 18 | "unwantedRecommendations": [] 19 | } 20 | -------------------------------------------------------------------------------- /02-css/02-css-modules/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "name": "Launch Chrome against localhost", 9 | "type": "chrome", 10 | "request": "launch", 11 | "url": "http://localhost:3000", 12 | "webRoot": "${workspaceRoot}/src", 13 | "userDataDir": "${workspaceRoot}/.vscode/chrome", 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*" 16 | } 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /02-css/02-css-modules/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "css.validate": true, 3 | "editor.formatOnSave": true, 4 | "eslint.autoFixOnSave": true, 5 | "eslint.enable": true, 6 | "eslint.validate": [ 7 | { 8 | "language": "javascript", 9 | "autoFix": true 10 | }, 11 | { 12 | "language": "javascriptreact", 13 | "autoFix": true 14 | }, 15 | { 16 | "language": "typescript", 17 | "autoFix": true 18 | }, 19 | { 20 | "language": "typescriptreact", 21 | "autoFix": true 22 | } 23 | ], 24 | "files.insertFinalNewline": true, 25 | "files.trimTrailingWhitespace": true, 26 | "prettier.eslintIntegration": true, 27 | "prettier.stylelintIntegration": true, 28 | "stylelint.enable": true, 29 | "typescript.tsserver.trace": "verbose", 30 | "[markdown]": { 31 | "files.trimTrailingWhitespace": false 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /02-css/02-css-modules/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.css' { 2 | const exports: { [exportName: string]: string }; 3 | export = exports; 4 | } 5 | -------------------------------------------------------------------------------- /02-css/02-css-modules/images.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.svg'; 2 | declare module '*.png'; 3 | declare module '*.jpg'; 4 | -------------------------------------------------------------------------------- /02-css/02-css-modules/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/02-css-modules/public/favicon.ico -------------------------------------------------------------------------------- /02-css/02-css-modules/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /02-css/02-css-modules/src/actions/githubConstants.ts: -------------------------------------------------------------------------------- 1 | export const GET_MEMBERS_START = 'GITHUB/GET_MEMBERS_START'; 2 | export const GET_MEMBERS_SUCCEED = 'GITHUB/GET_MEMBERS_SUCCEED'; 3 | export const GET_MEMBERS_FAIL = 'GITHUB/GET_MEMBERS_FAIL'; 4 | export const SEARCH_REPOSITORIES_START = 'GITHUB/SEARCH_REPOSITORIES_START'; 5 | export const SEARCH_REPOSITORIES_SUCCEED = 'GITHUB/SEARCH_REPOSITORIES_SUCCEED'; 6 | export const SEARCH_REPOSITORIES_FAIL = 'GITHUB/SEARCH_REPOSITORIES_FAIL'; 7 | -------------------------------------------------------------------------------- /02-css/02-css-modules/src/actions/index.ts: -------------------------------------------------------------------------------- 1 | export interface Action { 2 | type: string; 3 | payload?: Payload; 4 | error?: boolean; 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 6 | meta?: { [key: string]: any } | null; 7 | } 8 | 9 | export interface ActionStart { 10 | type: ActionType; 11 | payload?: Params; 12 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 13 | meta?: { [key: string]: any } | null; 14 | } 15 | 16 | export interface ActionSucceed { 17 | type: ActionType; 18 | payload: { 19 | params: Params; 20 | result: Result; 21 | }; 22 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 23 | meta?: { [key: string]: any } | null; 24 | } 25 | 26 | export interface ActionFail { 27 | type: ActionType; 28 | payload: { 29 | params: Params; 30 | error: AnyError; 31 | }; 32 | error: boolean; 33 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 34 | meta?: { [key: string]: any } | null; 35 | } 36 | -------------------------------------------------------------------------------- /02-css/02-css-modules/src/app.module.css: -------------------------------------------------------------------------------- 1 | .appHeader { 2 | background-color: #222; 3 | color: white; 4 | margin-bottom: 4em; 5 | padding: 20px; 6 | text-align: center; 7 | } 8 | -------------------------------------------------------------------------------- /02-css/02-css-modules/src/components/Companies/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import capitalize from 'lodash/capitalize'; 4 | import { List } from 'semantic-ui-react'; 5 | 6 | import styles from '../common/list.module.css'; 7 | 8 | const companies = ['facebook', 'airbnb', 'netflix']; 9 | 10 | const Companies: FC = () => ( 11 | <> 12 | 13 | {companies.map(companyName => ( 14 | 15 | 16 | 17 | 18 | {capitalize(companyName)}のメンバー 19 | 20 | 21 | 22 | ))} 23 | 24 | 25 | ); 26 | 27 | export default Companies; 28 | -------------------------------------------------------------------------------- /02-css/02-css-modules/src/components/Companies/members.module.css: -------------------------------------------------------------------------------- 1 | .members { 2 | margin: 2em 1em; 3 | } 4 | 5 | .header { 6 | margin-bottom: 1.25em !important; 7 | text-align: center; 8 | } 9 | -------------------------------------------------------------------------------- /02-css/02-css-modules/src/components/Repositories/Search.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { Helmet } from 'react-helmet'; 3 | import { Header } from 'semantic-ui-react'; 4 | import RepositoryForm from '../../containers/Repositories/Form'; 5 | import RepositoryList from '../../containers/Repositories/List'; 6 | import pages from '../../pages'; 7 | 8 | import styles from './search.module.css'; 9 | 10 | const RepositorySearch: FC = () => ( 11 | <> 12 | 13 | {pages.repositories.search.title} 14 | 15 |
16 |
17 | {pages.repositories.search.title} 18 |
19 | 20 | 21 |
22 | 23 | ); 24 | 25 | export default RepositorySearch; 26 | -------------------------------------------------------------------------------- /02-css/02-css-modules/src/components/Repositories/form.module.css: -------------------------------------------------------------------------------- 1 | .form { 2 | margin: 2em 0 4em; 3 | text-align: center; 4 | } 5 | 6 | .input { 7 | margin: 0.5em; 8 | width: 30em; 9 | } 10 | -------------------------------------------------------------------------------- /02-css/02-css-modules/src/components/Repositories/list.module.css: -------------------------------------------------------------------------------- 1 | .stats { 2 | margin-right: 1em; 3 | } 4 | -------------------------------------------------------------------------------- /02-css/02-css-modules/src/components/Repositories/search.module.css: -------------------------------------------------------------------------------- 1 | .repositories { 2 | margin: 2em 1em; 3 | } 4 | 5 | .header { 6 | margin-bottom: 1.25em; 7 | text-align: center; 8 | } 9 | -------------------------------------------------------------------------------- /02-css/02-css-modules/src/components/common/HtmlTitle.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { Helmet } from 'react-helmet'; 3 | 4 | const HtmlTitle: FC<{ title: string }> = ({ title = '' }) => 5 | title ? ( 6 | 7 | {title} 8 | 9 | ) : ( 10 |
11 | ); 12 | 13 | export default HtmlTitle; 14 | -------------------------------------------------------------------------------- /02-css/02-css-modules/src/components/common/Spinner.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { Dimmer, Loader, Segment } from 'semantic-ui-react'; 3 | 4 | import styles from './spinner.module.css'; 5 | 6 | const Spinner: FC = () => ( 7 | 8 | 9 | 読み込み中... 10 | 11 | 12 | ); 13 | 14 | export default Spinner; 15 | -------------------------------------------------------------------------------- /02-css/02-css-modules/src/components/common/list.module.css: -------------------------------------------------------------------------------- 1 | .item { 2 | padding: 1em 0 !important; 3 | } 4 | -------------------------------------------------------------------------------- /02-css/02-css-modules/src/components/common/spinner.module.css: -------------------------------------------------------------------------------- 1 | .spinner { 2 | border: none !important; 3 | box-shadow: none !important; 4 | height: 20em; 5 | } 6 | -------------------------------------------------------------------------------- /02-css/02-css-modules/src/containers/Repositories/List.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { connect } from 'react-redux'; 3 | 4 | import RepositoriesSearch, { 5 | RepositoryListProps, 6 | } from '../../components/Repositories/List'; 7 | import { Repository } from '../../services/github/models'; 8 | import { GithubState } from '../../reducer'; 9 | 10 | interface StateProps { 11 | repositories: Repository[]; 12 | isLoading: boolean; 13 | } 14 | 15 | type EnhancedRepositoryListProps = RepositoryListProps & StateProps; 16 | 17 | const mapStateToProps = (state: GithubState): StateProps => ({ 18 | repositories: state.repositories, 19 | isLoading: state.isLoading, 20 | }); 21 | 22 | const RepositoryListContainer: FC = ({ 23 | repositories, 24 | isLoading, 25 | }) => ; 26 | 27 | export default connect(mapStateToProps)(RepositoryListContainer); 28 | -------------------------------------------------------------------------------- /02-css/02-css-modules/src/index.css: -------------------------------------------------------------------------------- 1 | #root { 2 | margin: 2.5em auto 0; 3 | max-width: 930px; 4 | } 5 | -------------------------------------------------------------------------------- /02-css/02-css-modules/src/pages.ts: -------------------------------------------------------------------------------- 1 | /* 2 | type PageScheme = 3 | | { 4 | path: string; 5 | title: string; 6 | } 7 | | Pages; 8 | 9 | interface Pages { 10 | [x: string]: PageScheme; 11 | } 12 | */ 13 | 14 | const pages = { 15 | index: { 16 | path: '/', 17 | title: 'GitHub API サンプルアプリ', 18 | }, 19 | companies: { 20 | index: { 21 | path: '/companies', 22 | title: 'いろんな会社のメンバー', 23 | }, 24 | members: { 25 | path: '/:companyName/members', 26 | title: '%s のメンバー', 27 | }, 28 | }, 29 | repositories: { 30 | search: { 31 | path: '/repositories/search', 32 | title: 'リポジトリ検索', 33 | }, 34 | }, 35 | }; 36 | 37 | export default pages; 38 | -------------------------------------------------------------------------------- /02-css/02-css-modules/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | // 2 | -------------------------------------------------------------------------------- /02-css/02-css-modules/src/styles/themes/default/assets/fonts/brand-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/02-css-modules/src/styles/themes/default/assets/fonts/brand-icons.eot -------------------------------------------------------------------------------- /02-css/02-css-modules/src/styles/themes/default/assets/fonts/brand-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/02-css-modules/src/styles/themes/default/assets/fonts/brand-icons.ttf -------------------------------------------------------------------------------- /02-css/02-css-modules/src/styles/themes/default/assets/fonts/brand-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/02-css-modules/src/styles/themes/default/assets/fonts/brand-icons.woff -------------------------------------------------------------------------------- /02-css/02-css-modules/src/styles/themes/default/assets/fonts/brand-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/02-css-modules/src/styles/themes/default/assets/fonts/brand-icons.woff2 -------------------------------------------------------------------------------- /02-css/02-css-modules/src/styles/themes/default/assets/fonts/icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/02-css-modules/src/styles/themes/default/assets/fonts/icons.eot -------------------------------------------------------------------------------- /02-css/02-css-modules/src/styles/themes/default/assets/fonts/icons.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/02-css-modules/src/styles/themes/default/assets/fonts/icons.otf -------------------------------------------------------------------------------- /02-css/02-css-modules/src/styles/themes/default/assets/fonts/icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/02-css-modules/src/styles/themes/default/assets/fonts/icons.ttf -------------------------------------------------------------------------------- /02-css/02-css-modules/src/styles/themes/default/assets/fonts/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/02-css-modules/src/styles/themes/default/assets/fonts/icons.woff -------------------------------------------------------------------------------- /02-css/02-css-modules/src/styles/themes/default/assets/fonts/icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/02-css-modules/src/styles/themes/default/assets/fonts/icons.woff2 -------------------------------------------------------------------------------- /02-css/02-css-modules/src/styles/themes/default/assets/fonts/outline-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/02-css-modules/src/styles/themes/default/assets/fonts/outline-icons.eot -------------------------------------------------------------------------------- /02-css/02-css-modules/src/styles/themes/default/assets/fonts/outline-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/02-css-modules/src/styles/themes/default/assets/fonts/outline-icons.ttf -------------------------------------------------------------------------------- /02-css/02-css-modules/src/styles/themes/default/assets/fonts/outline-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/02-css-modules/src/styles/themes/default/assets/fonts/outline-icons.woff -------------------------------------------------------------------------------- /02-css/02-css-modules/src/styles/themes/default/assets/fonts/outline-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/02-css-modules/src/styles/themes/default/assets/fonts/outline-icons.woff2 -------------------------------------------------------------------------------- /02-css/02-css-modules/src/styles/themes/default/assets/images/flags.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/02-css-modules/src/styles/themes/default/assets/images/flags.png -------------------------------------------------------------------------------- /02-css/02-css-modules/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "plugins": [{ "name": "css-module-types" }], 6 | "allowJs": true, 7 | "skipLibCheck": true, 8 | "esModuleInterop": true, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "incremental": true, 18 | "tsBuildInfoFile": "./buildcache/tsbuildinfo", 19 | "jsx": "preserve", 20 | "outDir": "build", 21 | "rootDirs": ["src"] 22 | }, 23 | "include": [ 24 | "src", 25 | "global.d.ts" 26 | ], 27 | "exclude": [ 28 | "node_modules", 29 | "build", 30 | "dist", 31 | "scripts" 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /02-css/04-emotion/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # TypeScript 7 | /lib 8 | 9 | # testing 10 | coverage 11 | lib-cov 12 | 13 | # production 14 | /build 15 | 16 | # logs 17 | logs 18 | *.log 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | 23 | # Optional npm cache directory 24 | .npm 25 | 26 | # Yarn Integrity file 27 | .yarn-integrity 28 | 29 | # Optional eslint cache 30 | .eslintcache 31 | 32 | # IDE 33 | .idea/ 34 | .*.swp 35 | .vscode/chrome 36 | 37 | # misc 38 | .DS_Store 39 | .env 40 | .env.local 41 | .env.development.local 42 | .env.test.local 43 | .env.production.local 44 | 45 | -------------------------------------------------------------------------------- /02-css/04-emotion/.stylelintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: ['stylelint-order'], 3 | extends: [ 4 | 'stylelint-config-standard', 5 | './node_modules/prettier-stylelint/config.js' 6 | ], 7 | ignoreFiles: [ 8 | '**/node_modules/**', 9 | 'src/styles/**' 10 | ], 11 | rules: { 12 | 'indentation': 2, 13 | 'string-quotes': 'single', 14 | 'order/properties-alphabetical-order': true 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /02-css/04-emotion/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. 3 | // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp 4 | 5 | // List of extensions which should be recommended for users of this workspace. 6 | "recommendations": [ 7 | "coenraads.bracket-pair-colorizer", 8 | "dbaeumer.vscode-eslint", 9 | "esbenp.prettier-vscode", 10 | "msjsdiag.debugger-for-chrome", 11 | "ms-vsliveshare.vsliveshare", 12 | "oderwat.indent-rainbow", 13 | "shinnn.stylelint", 14 | "VisualStudioExptTeam.vscodeintellicode", 15 | "vscode-icons-team.vscode-icons" 16 | ], 17 | // List of extensions recommended by VS Code that should not be recommended for users of this workspace. 18 | "unwantedRecommendations": [] 19 | } 20 | -------------------------------------------------------------------------------- /02-css/04-emotion/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "name": "Launch Chrome against localhost", 9 | "type": "chrome", 10 | "request": "launch", 11 | "url": "http://localhost:3000", 12 | "webRoot": "${workspaceRoot}/src", 13 | "userDataDir": "${workspaceRoot}/.vscode/chrome", 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*" 16 | } 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /02-css/04-emotion/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "css.validate": true, 3 | "editor.formatOnSave": true, 4 | "eslint.autoFixOnSave": true, 5 | "eslint.enable": true, 6 | "eslint.validate": [ 7 | { 8 | "language": "javascript", 9 | "autoFix": true 10 | }, 11 | { 12 | "language": "javascriptreact", 13 | "autoFix": true 14 | }, 15 | { 16 | "language": "typescript", 17 | "autoFix": true 18 | }, 19 | { 20 | "language": "typescriptreact", 21 | "autoFix": true 22 | } 23 | ], 24 | "files.insertFinalNewline": true, 25 | "files.trimTrailingWhitespace": true, 26 | "prettier.eslintIntegration": true, 27 | "prettier.stylelintIntegration": true, 28 | "stylelint.enable": true, 29 | "typescript.tsserver.trace": "verbose", 30 | "[markdown]": { 31 | "files.trimTrailingWhitespace": false 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /02-css/04-emotion/images.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.svg'; 2 | declare module '*.png'; 3 | declare module '*.jpg'; 4 | -------------------------------------------------------------------------------- /02-css/04-emotion/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/04-emotion/public/favicon.ico -------------------------------------------------------------------------------- /02-css/04-emotion/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /02-css/04-emotion/src/actions/githubConstants.ts: -------------------------------------------------------------------------------- 1 | export const GET_MEMBERS_START = 'GITHUB/GET_MEMBERS_START'; 2 | export const GET_MEMBERS_SUCCEED = 'GITHUB/GET_MEMBERS_SUCCEED'; 3 | export const GET_MEMBERS_FAIL = 'GITHUB/GET_MEMBERS_FAIL'; 4 | export const SEARCH_REPOSITORIES_START = 'GITHUB/SEARCH_REPOSITORIES_START'; 5 | export const SEARCH_REPOSITORIES_SUCCEED = 'GITHUB/SEARCH_REPOSITORIES_SUCCEED'; 6 | export const SEARCH_REPOSITORIES_FAIL = 'GITHUB/SEARCH_REPOSITORIES_FAIL'; 7 | -------------------------------------------------------------------------------- /02-css/04-emotion/src/actions/index.ts: -------------------------------------------------------------------------------- 1 | export interface Action { 2 | type: string; 3 | payload?: Payload; 4 | error?: boolean; 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 6 | meta?: { [key: string]: any } | null; 7 | } 8 | 9 | export interface ActionStart { 10 | type: ActionType; 11 | payload?: Params; 12 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 13 | meta?: { [key: string]: any } | null; 14 | } 15 | 16 | export interface ActionSucceed { 17 | type: ActionType; 18 | payload: { 19 | params: Params; 20 | result: Result; 21 | }; 22 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 23 | meta?: { [key: string]: any } | null; 24 | } 25 | 26 | export interface ActionFail { 27 | type: ActionType; 28 | payload: { 29 | params: Params; 30 | error: AnyError; 31 | }; 32 | error: boolean; 33 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 34 | meta?: { [key: string]: any } | null; 35 | } 36 | -------------------------------------------------------------------------------- /02-css/04-emotion/src/components/Companies/index.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { Link } from 'react-router-dom'; 4 | import { jsx } from '@emotion/core'; 5 | import capitalize from 'lodash/capitalize'; 6 | import { List } from 'semantic-ui-react'; 7 | 8 | import { listItem } from '../common/list'; 9 | 10 | const companies = ['facebook', 'airbnb', 'netflix']; 11 | 12 | const Companies: FC = () => ( 13 |
14 | 15 | {companies.map(companyName => ( 16 | 17 | 18 | 19 | 20 | {capitalize(companyName)}のメンバー 21 | 22 | 23 | 24 | ))} 25 | 26 |
27 | ); 28 | 29 | export default Companies; 30 | -------------------------------------------------------------------------------- /02-css/04-emotion/src/components/Repositories/Search.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { css, jsx } from '@emotion/core'; 4 | import { Helmet } from 'react-helmet'; 5 | import { Header } from 'semantic-ui-react'; 6 | 7 | import RepositoryForm from '../../containers/Repositories/Form'; 8 | import RepositoryList from '../../containers/Repositories/List'; 9 | import pages from '../../pages'; 10 | import { menuHeader } from '../common/heading'; 11 | 12 | const wrapper = css` 13 | margin: 2em 1em; 14 | `; 15 | 16 | const RepositorySearch: FC = () => ( 17 |
18 | 19 | {pages.repositories.search.title} 20 | 21 |
22 |
23 | {pages.repositories.search.title} 24 |
25 | 26 | 27 |
28 |
29 | ); 30 | 31 | export default RepositorySearch; 32 | -------------------------------------------------------------------------------- /02-css/04-emotion/src/components/common/HtmlTitle.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { jsx } from '@emotion/core'; 4 | import { Helmet } from 'react-helmet'; 5 | 6 | const HtmlTitle: FC<{ title: string }> = ({ title = '' }) => 7 | title ? ( 8 | 9 | {title} 10 | 11 | ) : ( 12 |
13 | ); 14 | 15 | export default HtmlTitle; 16 | -------------------------------------------------------------------------------- /02-css/04-emotion/src/components/common/Spinner.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { css, jsx } from '@emotion/core'; 4 | import { Dimmer, Loader, Segment } from 'semantic-ui-react'; 5 | 6 | const wrapper = css` 7 | border: none !important; 8 | box-shadow: none !important; 9 | height: 20em; 10 | `; 11 | 12 | const Spinner: FC = () => ( 13 | 14 | 15 | 読み込み中... 16 | 17 | 18 | ); 19 | 20 | export default Spinner; 21 | -------------------------------------------------------------------------------- /02-css/04-emotion/src/components/common/heading.ts: -------------------------------------------------------------------------------- 1 | import { css } from '@emotion/core'; 2 | 3 | export const menuHeader = css` 4 | margin-bottom: 1.25em; 5 | text-align: center; 6 | `; 7 | -------------------------------------------------------------------------------- /02-css/04-emotion/src/components/common/list.ts: -------------------------------------------------------------------------------- 1 | import { css } from '@emotion/core'; 2 | 3 | export const listItem = css` 4 | padding: 1.35em 0 1em !important; 5 | `; 6 | -------------------------------------------------------------------------------- /02-css/04-emotion/src/containers/Repositories/List.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { connect } from 'react-redux'; 4 | import { jsx } from '@emotion/core'; 5 | 6 | import RepositoriesSearch, { 7 | RepositoryListProps, 8 | } from '../../components/Repositories/List'; 9 | import { Repository } from '../../services/github/models'; 10 | import { GithubState } from '../../reducer'; 11 | 12 | interface StateProps { 13 | repositories: Repository[]; 14 | isLoading: boolean; 15 | } 16 | 17 | type EnhancedRepositoryListProps = RepositoryListProps & StateProps; 18 | 19 | const mapStateToProps = (state: GithubState): StateProps => ({ 20 | repositories: state.repositories, 21 | isLoading: state.isLoading, 22 | }); 23 | 24 | const RepositoryListContainer: FC = ({ 25 | repositories, 26 | isLoading, 27 | }) => ; 28 | 29 | export default connect(mapStateToProps)(RepositoryListContainer); 30 | -------------------------------------------------------------------------------- /02-css/04-emotion/src/index.css: -------------------------------------------------------------------------------- 1 | #root { 2 | margin: 2.5em auto 0; 3 | max-width: 930px; 4 | } 5 | -------------------------------------------------------------------------------- /02-css/04-emotion/src/pages.ts: -------------------------------------------------------------------------------- 1 | /* 2 | type PageScheme = 3 | | { 4 | path: string; 5 | title: string; 6 | } 7 | | Pages; 8 | 9 | interface Pages { 10 | [x: string]: PageScheme; 11 | } 12 | */ 13 | 14 | const pages = { 15 | index: { 16 | path: '/', 17 | title: 'GitHub API サンプルアプリ', 18 | }, 19 | companies: { 20 | index: { 21 | path: '/companies', 22 | title: 'いろんな会社のメンバー', 23 | }, 24 | members: { 25 | path: '/:companyName/members', 26 | title: '%s のメンバー', 27 | }, 28 | }, 29 | repositories: { 30 | search: { 31 | path: '/repositories/search', 32 | title: 'リポジトリ検索', 33 | }, 34 | }, 35 | }; 36 | 37 | export default pages; 38 | -------------------------------------------------------------------------------- /02-css/04-emotion/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | // 2 | -------------------------------------------------------------------------------- /02-css/04-emotion/src/styles/themes/default/assets/fonts/brand-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/04-emotion/src/styles/themes/default/assets/fonts/brand-icons.eot -------------------------------------------------------------------------------- /02-css/04-emotion/src/styles/themes/default/assets/fonts/brand-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/04-emotion/src/styles/themes/default/assets/fonts/brand-icons.ttf -------------------------------------------------------------------------------- /02-css/04-emotion/src/styles/themes/default/assets/fonts/brand-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/04-emotion/src/styles/themes/default/assets/fonts/brand-icons.woff -------------------------------------------------------------------------------- /02-css/04-emotion/src/styles/themes/default/assets/fonts/brand-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/04-emotion/src/styles/themes/default/assets/fonts/brand-icons.woff2 -------------------------------------------------------------------------------- /02-css/04-emotion/src/styles/themes/default/assets/fonts/icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/04-emotion/src/styles/themes/default/assets/fonts/icons.eot -------------------------------------------------------------------------------- /02-css/04-emotion/src/styles/themes/default/assets/fonts/icons.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/04-emotion/src/styles/themes/default/assets/fonts/icons.otf -------------------------------------------------------------------------------- /02-css/04-emotion/src/styles/themes/default/assets/fonts/icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/04-emotion/src/styles/themes/default/assets/fonts/icons.ttf -------------------------------------------------------------------------------- /02-css/04-emotion/src/styles/themes/default/assets/fonts/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/04-emotion/src/styles/themes/default/assets/fonts/icons.woff -------------------------------------------------------------------------------- /02-css/04-emotion/src/styles/themes/default/assets/fonts/icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/04-emotion/src/styles/themes/default/assets/fonts/icons.woff2 -------------------------------------------------------------------------------- /02-css/04-emotion/src/styles/themes/default/assets/fonts/outline-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/04-emotion/src/styles/themes/default/assets/fonts/outline-icons.eot -------------------------------------------------------------------------------- /02-css/04-emotion/src/styles/themes/default/assets/fonts/outline-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/04-emotion/src/styles/themes/default/assets/fonts/outline-icons.ttf -------------------------------------------------------------------------------- /02-css/04-emotion/src/styles/themes/default/assets/fonts/outline-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/04-emotion/src/styles/themes/default/assets/fonts/outline-icons.woff -------------------------------------------------------------------------------- /02-css/04-emotion/src/styles/themes/default/assets/fonts/outline-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/04-emotion/src/styles/themes/default/assets/fonts/outline-icons.woff2 -------------------------------------------------------------------------------- /02-css/04-emotion/src/styles/themes/default/assets/images/flags.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/02-css/04-emotion/src/styles/themes/default/assets/images/flags.png -------------------------------------------------------------------------------- /02-css/04-emotion/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "plugins": [{"name": "css-module-types"}], 6 | "allowJs": true, 7 | "skipLibCheck": true, 8 | "esModuleInterop": true, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "incremental": true, 18 | "tsBuildInfoFile": "./buildcache/tsbuildinfo", 19 | "jsx": "preserve", 20 | "outDir": "build", 21 | "rootDirs": ["src"] 22 | }, 23 | "include": ["src"], 24 | "exclude": [ 25 | "node_modules", 26 | "build", 27 | "dist", 28 | "scripts" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # TypeScript 7 | /lib 8 | 9 | # testing 10 | coverage 11 | lib-cov 12 | 13 | # build 14 | /build 15 | /buildcache 16 | /dist 17 | 18 | # logs 19 | logs 20 | *.log 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | # Optional npm cache directory 26 | .npm 27 | 28 | # Yarn Integrity file 29 | .yarn-integrity 30 | 31 | # Optional eslint cache 32 | .eslintcache 33 | 34 | # IDE 35 | .idea/ 36 | .*.swp 37 | .vscode/chrome 38 | 39 | # misc 40 | .DS_Store 41 | .env 42 | .env.local 43 | .env.development.local 44 | .env.test.local 45 | .env.production.local 46 | 47 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-a11y/register'; 2 | import '@storybook/addon-actions/register'; 3 | import '@storybook/addon-knobs/register'; 4 | import '@storybook/addon-links/register'; 5 | 6 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure, addDecorator } from '@storybook/react'; 2 | import { withInfo } from '@storybook/addon-info'; 3 | import { withKnobs } from '@storybook/addon-knobs'; 4 | 5 | import '../src/styles/semantic.min.css'; 6 | import '../src/index.css'; 7 | 8 | const req = require.context('../src/components', true, /.(story|stories).tsx$/); 9 | 10 | function loadStories() { 11 | addDecorator(withInfo); 12 | addDecorator(withKnobs); 13 | req.keys().forEach(req); 14 | } 15 | 16 | configure(loadStories, module); 17 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const SRC_PATH = path.join(__dirname, '../src'); 3 | 4 | module.exports = ({ config }) => { 5 | config.module.rules.push({ 6 | test: /\.(ts|tsx)$/, 7 | include: [SRC_PATH], 8 | use: [ 9 | { 10 | loader: require.resolve('babel-loader'), 11 | options: { 12 | presets: [['react-app', { flow: false, typescript: true }]], 13 | } 14 | }, 15 | { loader: require.resolve('react-docgen-typescript-loader') } 16 | ] 17 | }); 18 | config.resolve.extensions.push('.ts', '.tsx'); 19 | return config; 20 | }; 21 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/.stylelintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: ['stylelint-order'], 3 | extends: [ 4 | 'stylelint-config-standard', 5 | './node_modules/prettier-stylelint/config.js' 6 | ], 7 | ignoreFiles: [ 8 | '**/node_modules/**', 9 | 'src/styles/**' 10 | ], 11 | rules: { 12 | 'indentation': 2, 13 | 'string-quotes': 'single', 14 | 'order/properties-alphabetical-order': true 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. 3 | // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp 4 | 5 | // List of extensions which should be recommended for users of this workspace. 6 | "recommendations": [ 7 | "coenraads.bracket-pair-colorizer", 8 | "dbaeumer.vscode-eslint", 9 | "esbenp.prettier-vscode", 10 | "msjsdiag.debugger-for-chrome", 11 | "ms-vsliveshare.vsliveshare", 12 | "oderwat.indent-rainbow", 13 | "shinnn.stylelint", 14 | "VisualStudioExptTeam.vscodeintellicode", 15 | "vscode-icons-team.vscode-icons" 16 | ], 17 | // List of extensions recommended by VS Code that should not be recommended for users of this workspace. 18 | "unwantedRecommendations": [] 19 | } 20 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "name": "Launch Chrome against localhost", 9 | "type": "chrome", 10 | "request": "launch", 11 | "url": "http://localhost:3000", 12 | "webRoot": "${workspaceRoot}/src", 13 | "userDataDir": "${workspaceRoot}/.vscode/chrome", 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*" 16 | } 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "css.validate": true, 3 | "editor.formatOnSave": true, 4 | "eslint.autoFixOnSave": true, 5 | "eslint.enable": true, 6 | "eslint.validate": [ 7 | { 8 | "language": "javascript", 9 | "autoFix": true 10 | }, 11 | { 12 | "language": "javascriptreact", 13 | "autoFix": true 14 | }, 15 | { 16 | "language": "typescript", 17 | "autoFix": true 18 | }, 19 | { 20 | "language": "typescriptreact", 21 | "autoFix": true 22 | } 23 | ], 24 | "files.insertFinalNewline": true, 25 | "files.trimTrailingWhitespace": true, 26 | "prettier.eslintIntegration": true, 27 | "prettier.stylelintIntegration": true, 28 | "stylelint.enable": true, 29 | "typescript.tsserver.trace": "verbose", 30 | "[markdown]": { 31 | "files.trimTrailingWhitespace": false 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/images.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.svg'; 2 | declare module '*.png'; 3 | declare module '*.jpg'; 4 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/03-styleguide/03-storybook/public/favicon.ico -------------------------------------------------------------------------------- /03-styleguide/03-storybook/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/actions/githubConstants.ts: -------------------------------------------------------------------------------- 1 | export const GET_MEMBERS_START = 'GITHUB/GET_MEMBERS_START'; 2 | export const GET_MEMBERS_SUCCEED = 'GITHUB/GET_MEMBERS_SUCCEED'; 3 | export const GET_MEMBERS_FAIL = 'GITHUB/GET_MEMBERS_FAIL'; 4 | export const SEARCH_REPOSITORIES_START = 'GITHUB/SEARCH_REPOSITORIES_START'; 5 | export const SEARCH_REPOSITORIES_SUCCEED = 'GITHUB/SEARCH_REPOSITORIES_SUCCEED'; 6 | export const SEARCH_REPOSITORIES_FAIL = 'GITHUB/SEARCH_REPOSITORIES_FAIL'; 7 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/actions/index.ts: -------------------------------------------------------------------------------- 1 | export interface Action { 2 | type: string; 3 | payload?: Payload; 4 | error?: boolean; 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 6 | meta?: { [key: string]: any } | null; 7 | } 8 | 9 | export interface ActionStart { 10 | type: ActionType; 11 | payload?: Params; 12 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 13 | meta?: { [key: string]: any } | null; 14 | } 15 | 16 | export interface ActionSucceed { 17 | type: ActionType; 18 | payload: { 19 | params: Params; 20 | result: Result; 21 | }; 22 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 23 | meta?: { [key: string]: any } | null; 24 | } 25 | 26 | export interface ActionFail { 27 | type: ActionType; 28 | payload: { 29 | params: Params; 30 | error: AnyError; 31 | }; 32 | error: boolean; 33 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 34 | meta?: { [key: string]: any } | null; 35 | } 36 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/components/Companies/index.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { BrowserRouter } from 'react-router-dom'; 3 | import { jsx } from '@emotion/core'; 4 | import { storiesOf } from '@storybook/react'; 5 | import { array } from '@storybook/addon-knobs'; 6 | 7 | import Companies from './index'; 8 | 9 | const companies = ['google', 'apple', 'amazon', 'microsoft', 'twitter']; 10 | 11 | storiesOf('Companies/index', module) 12 | .addDecorator(story => {story()}) 13 | .add('default', () => ) 14 | .add('with data', () => ( 15 | 16 | )); 17 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/components/Companies/index.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { Link } from 'react-router-dom'; 4 | import { jsx } from '@emotion/core'; 5 | import capitalize from 'lodash/capitalize'; 6 | import { List } from 'semantic-ui-react'; 7 | 8 | import { listItem } from '../common/list'; 9 | 10 | const givenCompanies = ['facebook', 'airbnb', 'netflix']; 11 | 12 | const Companies: FC<{ companies?: string[] }> = ({ 13 | companies = givenCompanies, 14 | }) => ( 15 |
16 | 17 | {companies.map(companyName => ( 18 | 19 | 20 | 21 | 22 | {capitalize(companyName)}のメンバー 23 | 24 | 25 | 26 | ))} 27 | 28 |
29 | ); 30 | 31 | export default Companies; 32 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/components/Repositories/Formr.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from '@emotion/core'; 3 | import { storiesOf } from '@storybook/react'; 4 | import { boolean, object } from '@storybook/addon-knobs'; 5 | 6 | import Form from './Form'; 7 | 8 | const match = ''; 9 | 10 | storiesOf('Repository Search/Form', module).add('default', () => ( 11 |
15 | )); 16 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/components/Repositories/Result.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { jsx } from '@emotion/core'; 4 | 5 | import RepositoryList from '../common/RepositoryList'; 6 | import Spinner from '../common/Spinner'; 7 | import { Repository } from '../../services/github/models'; 8 | 9 | export interface RepositoryResultProps { 10 | repositories?: Repository[]; 11 | isLoading?: boolean; 12 | } 13 | 14 | const RepositoryResult: FC = ({ 15 | repositories = [], 16 | isLoading = false, 17 | }) => ( 18 |
19 | {isLoading ? : } 20 |
21 | ); 22 | 23 | export default RepositoryResult; 24 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/components/Repositories/Search.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { css, jsx } from '@emotion/core'; 4 | import { Helmet } from 'react-helmet'; 5 | import { Header } from 'semantic-ui-react'; 6 | 7 | import RepositoryForm from '../../containers/Repositories/Form'; 8 | import RepositoryResult from '../../containers/Repositories/Result'; 9 | import pages from '../../pages'; 10 | import { menuHeader } from '../common/heading'; 11 | 12 | const wrapper = css` 13 | margin: 2em 1em; 14 | `; 15 | 16 | const RepositorySearch: FC = () => ( 17 |
18 | 19 | {pages.repositories.search.title} 20 | 21 |
22 |
23 | {pages.repositories.search.title} 24 |
25 | 26 | 27 |
28 |
29 | ); 30 | 31 | export default RepositorySearch; 32 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/components/common/HtmlTitle.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { jsx } from '@emotion/core'; 4 | import { Helmet } from 'react-helmet'; 5 | 6 | const HtmlTitle: FC<{ title: string }> = ({ title = '' }) => 7 | title ? ( 8 | 9 | {title} 10 | 11 | ) : ( 12 |
13 | ); 14 | 15 | export default HtmlTitle; 16 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/components/common/RepositoryList.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from '@emotion/core'; 3 | import { storiesOf } from '@storybook/react'; 4 | import { object } from '@storybook/addon-knobs'; 5 | import camelcaseKeys from 'camelcase-keys'; 6 | 7 | import RepositoryList from './RepositoryList'; 8 | import { Repository } from '../../services/github/models'; 9 | import data from '../../services/github/__mocks__/repositories.json'; 10 | 11 | const repositories = camelcaseKeys(data, { 12 | deep: true, 13 | }) as Repository[]; 14 | 15 | storiesOf('Common/RepositoryList', module).add('with data', () => ( 16 | 17 | )); 18 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/components/common/Spinner.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from '@emotion/core'; 3 | import { storiesOf } from '@storybook/react'; 4 | import { text } from '@storybook/addon-knobs'; 5 | 6 | import Spinner from './Spinner'; 7 | 8 | storiesOf('Common/Spinner', module) 9 | .add('default', () => ) 10 | .add('with custom text', () => ( 11 | 12 | )); 13 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/components/common/Spinner.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { css, jsx } from '@emotion/core'; 4 | import { Dimmer, Loader, Segment } from 'semantic-ui-react'; 5 | 6 | const wrapper = css` 7 | border: none !important; 8 | box-shadow: none !important; 9 | height: 20em; 10 | `; 11 | 12 | const Spinner: FC<{ message?: string }> = ({ message = '読み込み中...' }) => ( 13 | 14 | 15 | {message} 16 | 17 | 18 | ); 19 | 20 | export default Spinner; 21 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/components/common/UserList.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from '@emotion/core'; 3 | import { storiesOf } from '@storybook/react'; 4 | import { object } from '@storybook/addon-knobs'; 5 | import camelcaseKeys from 'camelcase-keys'; 6 | 7 | import UserList from './UserList'; 8 | import { User } from '../../services/github/models'; 9 | import data from '../../services/github/__mocks__/users.json'; 10 | 11 | const users = camelcaseKeys(data, { deep: true }) as User[]; 12 | 13 | storiesOf('Common/UserList', module).add('with data', () => ( 14 | 15 | )); 16 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/components/common/UserList.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { jsx } from '@emotion/core'; 4 | import { Card, Image } from 'semantic-ui-react'; 5 | 6 | import { User } from '../../services/github/models'; 7 | 8 | export interface UserListProps { 9 | users: User[]; 10 | } 11 | 12 | const UserList: FC = ({ users = [] }) => ( 13 | 14 | {users.map(user => ( 15 | 16 | 17 | 18 | {user.login} 19 | GitHub ID: {user.id} 20 | 21 | 22 | ))} 23 | 24 | ); 25 | 26 | export default UserList; 27 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/components/common/heading.ts: -------------------------------------------------------------------------------- 1 | import { css } from '@emotion/core'; 2 | 3 | export const menuHeader = css` 4 | margin-bottom: 1.25em; 5 | text-align: center; 6 | `; 7 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/components/common/list.ts: -------------------------------------------------------------------------------- 1 | import { css } from '@emotion/core'; 2 | 3 | export const listItem = css` 4 | padding: 1.35em 0 1em !important; 5 | `; 6 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/containers/Repositories/Result.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { connect } from 'react-redux'; 4 | import { jsx } from '@emotion/core'; 5 | 6 | import RepositoriesSearch, { 7 | RepositoryResultProps, 8 | } from '../../components/Repositories/Result'; 9 | import { Repository } from '../../services/github/models'; 10 | import { GithubState } from '../../reducer'; 11 | 12 | interface StateProps { 13 | repositories: Repository[]; 14 | isLoading: boolean; 15 | } 16 | 17 | type EnhancedRepositoryResultProps = RepositoryResultProps & StateProps; 18 | 19 | const mapStateToProps = (state: GithubState): StateProps => ({ 20 | repositories: state.repositories, 21 | isLoading: state.isLoading, 22 | }); 23 | 24 | const RepositoryResultContainer: FC = ({ 25 | repositories, 26 | isLoading, 27 | }) => ; 28 | 29 | export default connect(mapStateToProps)(RepositoryResultContainer); 30 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/index.css: -------------------------------------------------------------------------------- 1 | #root { 2 | margin: 2.5em auto 0; 3 | max-width: 930px; 4 | } 5 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/pages.ts: -------------------------------------------------------------------------------- 1 | /* 2 | type PageScheme = 3 | | { 4 | path: string; 5 | title: string; 6 | } 7 | | Pages; 8 | 9 | interface Pages { 10 | [x: string]: PageScheme; 11 | } 12 | */ 13 | 14 | const pages = { 15 | index: { 16 | path: '/', 17 | title: 'GitHub API サンプルアプリ', 18 | }, 19 | companies: { 20 | index: { 21 | path: '/companies', 22 | title: 'いろんな会社のメンバー', 23 | }, 24 | members: { 25 | path: '/:companyName/members', 26 | title: '%s のメンバー', 27 | }, 28 | }, 29 | repositories: { 30 | search: { 31 | path: '/repositories/search', 32 | title: 'リポジトリ検索', 33 | }, 34 | }, 35 | }; 36 | 37 | export default pages; 38 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | // 2 | -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/styles/semantic.min.css: -------------------------------------------------------------------------------- 1 | ../../node_modules/semantic-ui-css/semantic.min.css -------------------------------------------------------------------------------- /03-styleguide/03-storybook/src/styles/themes: -------------------------------------------------------------------------------- 1 | ../../node_modules/semantic-ui-css/themes -------------------------------------------------------------------------------- /03-styleguide/03-storybook/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "plugins": [{"name": "css-module-types"}], 6 | "allowJs": true, 7 | "skipLibCheck": true, 8 | "esModuleInterop": true, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "incremental": true, 18 | "tsBuildInfoFile": "./buildcache/tsbuildinfo", 19 | "jsx": "preserve", 20 | "outDir": "build", 21 | "rootDirs": ["src"] 22 | }, 23 | "include": ["src"], 24 | "exclude": [ 25 | "node_modules", 26 | "build", 27 | "dist", 28 | "scripts" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # TypeScript 7 | /lib 8 | 9 | # testing 10 | coverage 11 | lib-cov 12 | 13 | # build 14 | /build 15 | /buildcache 16 | /dist 17 | 18 | # logs 19 | logs 20 | *.log 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | # Optional npm cache directory 26 | .npm 27 | 28 | # Yarn Integrity file 29 | .yarn-integrity 30 | 31 | # Optional eslint cache 32 | .eslintcache 33 | 34 | # IDE 35 | .idea/ 36 | .*.swp 37 | .vscode/chrome 38 | 39 | # misc 40 | .DS_Store 41 | .env 42 | .env.local 43 | .env.development.local 44 | .env.test.local 45 | .env.production.local 46 | 47 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-a11y/register'; 2 | import '@storybook/addon-actions/register'; 3 | import '@storybook/addon-knobs/register'; 4 | import '@storybook/addon-links/register'; 5 | 6 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure, addDecorator } from '@storybook/react'; 2 | import { withInfo } from '@storybook/addon-info'; 3 | import { withKnobs } from '@storybook/addon-knobs'; 4 | 5 | import '../src/styles/semantic.min.css'; 6 | import '../src/index.css'; 7 | 8 | const req = require.context('../src/components', true, /.(story|stories).tsx$/); 9 | 10 | function loadStories() { 11 | addDecorator(withInfo); 12 | addDecorator(withKnobs); 13 | req.keys().forEach(req); 14 | } 15 | 16 | configure(loadStories, module); 17 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const SRC_PATH = path.join(__dirname, '../src'); 3 | 4 | module.exports = ({ config }) => { 5 | config.module.rules.push({ 6 | test: /\.(ts|tsx)$/, 7 | include: [SRC_PATH], 8 | use: [ 9 | { 10 | loader: require.resolve('babel-loader'), 11 | options: { 12 | presets: [['react-app', { flow: false, typescript: true }]], 13 | } 14 | }, 15 | { loader: require.resolve('react-docgen-typescript-loader') } 16 | ] 17 | }); 18 | config.resolve.extensions.push('.ts', '.tsx'); 19 | return config; 20 | }; 21 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/.stylelintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: ['stylelint-order'], 3 | extends: [ 4 | 'stylelint-config-standard', 5 | './node_modules/prettier-stylelint/config.js' 6 | ], 7 | ignoreFiles: [ 8 | '**/node_modules/**', 9 | 'src/styles/**' 10 | ], 11 | rules: { 12 | 'indentation': 2, 13 | 'string-quotes': 'single', 14 | 'order/properties-alphabetical-order': true 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. 3 | // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp 4 | 5 | // List of extensions which should be recommended for users of this workspace. 6 | "recommendations": [ 7 | "coenraads.bracket-pair-colorizer", 8 | "dbaeumer.vscode-eslint", 9 | "esbenp.prettier-vscode", 10 | "msjsdiag.debugger-for-chrome", 11 | "ms-vsliveshare.vsliveshare", 12 | "oderwat.indent-rainbow", 13 | "shinnn.stylelint", 14 | "VisualStudioExptTeam.vscodeintellicode", 15 | "vscode-icons-team.vscode-icons" 16 | ], 17 | // List of extensions recommended by VS Code that should not be recommended for users of this workspace. 18 | "unwantedRecommendations": [] 19 | } 20 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "name": "Launch Chrome against localhost", 9 | "type": "chrome", 10 | "request": "launch", 11 | "url": "http://localhost:3000", 12 | "webRoot": "${workspaceRoot}/src", 13 | "userDataDir": "${workspaceRoot}/.vscode/chrome", 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*" 16 | } 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "css.validate": true, 3 | "editor.formatOnSave": true, 4 | "eslint.autoFixOnSave": true, 5 | "eslint.enable": true, 6 | "eslint.validate": [ 7 | { 8 | "language": "javascript", 9 | "autoFix": true 10 | }, 11 | { 12 | "language": "javascriptreact", 13 | "autoFix": true 14 | }, 15 | { 16 | "language": "typescript", 17 | "autoFix": true 18 | }, 19 | { 20 | "language": "typescriptreact", 21 | "autoFix": true 22 | } 23 | ], 24 | "files.insertFinalNewline": true, 25 | "files.trimTrailingWhitespace": true, 26 | "prettier.eslintIntegration": true, 27 | "prettier.stylelintIntegration": true, 28 | "stylelint.enable": true, 29 | "typescript.tsserver.trace": "verbose", 30 | "[markdown]": { 31 | "files.trimTrailingWhitespace": false 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/images.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.svg'; 2 | declare module '*.png'; 3 | declare module '*.jpg'; 4 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/02-jest/public/favicon.ico -------------------------------------------------------------------------------- /04-unit-test/02-jest/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/actions/githubConstants.ts: -------------------------------------------------------------------------------- 1 | export const GET_MEMBERS_START = 'GITHUB/GET_MEMBERS_START'; 2 | export const GET_MEMBERS_SUCCEED = 'GITHUB/GET_MEMBERS_SUCCEED'; 3 | export const GET_MEMBERS_FAIL = 'GITHUB/GET_MEMBERS_FAIL'; 4 | export const SEARCH_REPOSITORIES_START = 'GITHUB/SEARCH_REPOSITORIES_START'; 5 | export const SEARCH_REPOSITORIES_SUCCEED = 'GITHUB/SEARCH_REPOSITORIES_SUCCEED'; 6 | export const SEARCH_REPOSITORIES_FAIL = 'GITHUB/SEARCH_REPOSITORIES_FAIL'; 7 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/actions/index.ts: -------------------------------------------------------------------------------- 1 | export interface Action { 2 | type: string; 3 | payload?: Payload; 4 | error?: boolean; 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 6 | meta?: { [key: string]: any } | null; 7 | } 8 | 9 | export interface ActionStart { 10 | type: ActionType; 11 | payload?: Params; 12 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 13 | meta?: { [key: string]: any } | null; 14 | } 15 | 16 | export interface ActionSucceed { 17 | type: ActionType; 18 | payload: { 19 | params: Params; 20 | result: Result; 21 | }; 22 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 23 | meta?: { [key: string]: any } | null; 24 | } 25 | 26 | export interface ActionFail { 27 | type: ActionType; 28 | payload: { 29 | params: Params; 30 | error: AnyError; 31 | }; 32 | error: boolean; 33 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 34 | meta?: { [key: string]: any } | null; 35 | } 36 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/components/Companies/index.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { BrowserRouter } from 'react-router-dom'; 3 | import { jsx } from '@emotion/core'; 4 | import { storiesOf } from '@storybook/react'; 5 | import { array } from '@storybook/addon-knobs'; 6 | 7 | import Companies from './index'; 8 | 9 | const companies = ['google', 'apple', 'amazon', 'microsoft', 'twitter']; 10 | 11 | storiesOf('Companies/index', module) 12 | .addDecorator(story => {story()}) 13 | .add('default', () => ) 14 | .add('with data', () => ( 15 | 16 | )); 17 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/components/Companies/index.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { Link } from 'react-router-dom'; 4 | import { jsx } from '@emotion/core'; 5 | import capitalize from 'lodash/capitalize'; 6 | import { List } from 'semantic-ui-react'; 7 | 8 | import { listItem } from '../common/list'; 9 | 10 | const givenCompanies = ['facebook', 'airbnb', 'netflix']; 11 | 12 | const Companies: FC<{ companies?: string[] }> = ({ 13 | companies = givenCompanies, 14 | }) => ( 15 |
16 | 17 | {companies.map(companyName => ( 18 | 19 | 20 | 21 | 22 | {capitalize(companyName)}のメンバー 23 | 24 | 25 | 26 | ))} 27 | 28 |
29 | ); 30 | 31 | export default Companies; 32 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/components/Repositories/Formr.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from '@emotion/core'; 3 | import { storiesOf } from '@storybook/react'; 4 | import { boolean, object } from '@storybook/addon-knobs'; 5 | 6 | import Form from './Form'; 7 | 8 | const match = ''; 9 | 10 | storiesOf('Repository Search/Form', module).add('default', () => ( 11 | 15 | )); 16 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/components/Repositories/Result.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { jsx } from '@emotion/core'; 4 | 5 | import RepositoryList from '../common/RepositoryList'; 6 | import Spinner from '../common/Spinner'; 7 | import { Repository } from '../../services/github/models'; 8 | 9 | export interface RepositoryResultProps { 10 | repositories?: Repository[]; 11 | isLoading?: boolean; 12 | } 13 | 14 | const RepositoryResult: FC = ({ 15 | repositories = [], 16 | isLoading = false, 17 | }) => ( 18 |
19 | {isLoading ? : } 20 |
21 | ); 22 | 23 | export default RepositoryResult; 24 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/components/Repositories/Search.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { css, jsx } from '@emotion/core'; 4 | import { Helmet } from 'react-helmet'; 5 | import { Header } from 'semantic-ui-react'; 6 | 7 | import RepositoryForm from '../../containers/Repositories/Form'; 8 | import RepositoryResult from '../../containers/Repositories/Result'; 9 | import pages from '../../pages'; 10 | import { menuHeader } from '../common/heading'; 11 | 12 | const wrapper = css` 13 | margin: 2em 1em; 14 | `; 15 | 16 | const RepositorySearch: FC = () => ( 17 |
18 | 19 | {pages.repositories.search.title} 20 | 21 |
22 |
23 | {pages.repositories.search.title} 24 |
25 | 26 | 27 |
28 |
29 | ); 30 | 31 | export default RepositorySearch; 32 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/components/common/HtmlTitle.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { jsx } from '@emotion/core'; 4 | import { Helmet } from 'react-helmet'; 5 | 6 | const HtmlTitle: FC<{ title: string }> = ({ title = '' }) => 7 | title ? ( 8 | 9 | {title} 10 | 11 | ) : ( 12 |
13 | ); 14 | 15 | export default HtmlTitle; 16 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/components/common/RepositoryList.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from '@emotion/core'; 3 | import { storiesOf } from '@storybook/react'; 4 | import { object } from '@storybook/addon-knobs'; 5 | import camelcaseKeys from 'camelcase-keys'; 6 | 7 | import RepositoryList from './RepositoryList'; 8 | import { Repository } from '../../services/github/models'; 9 | import data from '../../services/github/__mocks__/repositories.json'; 10 | 11 | const repositories = camelcaseKeys(data, { 12 | deep: true, 13 | }) as Repository[]; 14 | 15 | storiesOf('Common/RepositoryList', module).add('with data', () => ( 16 | 17 | )); 18 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/components/common/Spinner.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from '@emotion/core'; 3 | import { storiesOf } from '@storybook/react'; 4 | import { text } from '@storybook/addon-knobs'; 5 | 6 | import Spinner from './Spinner'; 7 | 8 | storiesOf('Common/Spinner', module) 9 | .add('default', () => ) 10 | .add('with custom text', () => ( 11 | 12 | )); 13 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/components/common/Spinner.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { css, jsx } from '@emotion/core'; 4 | import { Dimmer, Loader, Segment } from 'semantic-ui-react'; 5 | 6 | const wrapper = css` 7 | border: none !important; 8 | box-shadow: none !important; 9 | height: 20em; 10 | `; 11 | 12 | const Spinner: FC<{ message?: string }> = ({ message = '読み込み中...' }) => ( 13 | 14 | 15 | {message} 16 | 17 | 18 | ); 19 | 20 | export default Spinner; 21 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/components/common/UserList.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from '@emotion/core'; 3 | import { storiesOf } from '@storybook/react'; 4 | import { object } from '@storybook/addon-knobs'; 5 | import camelcaseKeys from 'camelcase-keys'; 6 | 7 | import UserList from './UserList'; 8 | import { User } from '../../services/github/models'; 9 | import data from '../../services/github/__mocks__/users.json'; 10 | 11 | const users = camelcaseKeys(data, { deep: true }) as User[]; 12 | 13 | storiesOf('Common/UserList', module).add('with data', () => ( 14 | 15 | )); 16 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/components/common/UserList.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { jsx } from '@emotion/core'; 4 | import { Card, Image } from 'semantic-ui-react'; 5 | 6 | import { User } from '../../services/github/models'; 7 | 8 | export interface UserListProps { 9 | users: User[]; 10 | } 11 | 12 | const UserList: FC = ({ users = [] }) => ( 13 | 14 | {users.map(user => ( 15 | 16 | 17 | 18 | {user.login} 19 | GitHub ID: {user.id} 20 | 21 | 22 | ))} 23 | 24 | ); 25 | 26 | export default UserList; 27 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/components/common/heading.ts: -------------------------------------------------------------------------------- 1 | import { css } from '@emotion/core'; 2 | 3 | export const menuHeader = css` 4 | margin-bottom: 1.25em; 5 | text-align: center; 6 | `; 7 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/components/common/list.ts: -------------------------------------------------------------------------------- 1 | import { css } from '@emotion/core'; 2 | 3 | export const listItem = css` 4 | padding: 1.35em 0 1em !important; 5 | `; 6 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/containers/Repositories/Result.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { connect } from 'react-redux'; 4 | import { jsx } from '@emotion/core'; 5 | 6 | import RepositoriesSearch, { 7 | RepositoryResultProps, 8 | } from '../../components/Repositories/Result'; 9 | import { Repository } from '../../services/github/models'; 10 | import { GithubState } from '../../reducer'; 11 | 12 | interface StateProps { 13 | repositories: Repository[]; 14 | isLoading: boolean; 15 | } 16 | 17 | type EnhancedRepositoryResultProps = RepositoryResultProps & StateProps; 18 | 19 | const mapStateToProps = (state: GithubState): StateProps => ({ 20 | repositories: state.repositories, 21 | isLoading: state.isLoading, 22 | }); 23 | 24 | const RepositoryResultContainer: FC = ({ 25 | repositories, 26 | isLoading, 27 | }) => ; 28 | 29 | export default connect(mapStateToProps)(RepositoryResultContainer); 30 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/index.css: -------------------------------------------------------------------------------- 1 | #root { 2 | margin: 2.5em auto 0; 3 | max-width: 930px; 4 | } 5 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/pages.ts: -------------------------------------------------------------------------------- 1 | /* 2 | type PageScheme = 3 | | { 4 | path: string; 5 | title: string; 6 | } 7 | | Pages; 8 | 9 | interface Pages { 10 | [x: string]: PageScheme; 11 | } 12 | */ 13 | 14 | const pages = { 15 | index: { 16 | path: '/', 17 | title: 'GitHub API サンプルアプリ', 18 | }, 19 | companies: { 20 | index: { 21 | path: '/companies', 22 | title: 'いろんな会社のメンバー', 23 | }, 24 | members: { 25 | path: '/:companyName/members', 26 | title: '%s のメンバー', 27 | }, 28 | }, 29 | repositories: { 30 | search: { 31 | path: '/repositories/search', 32 | title: 'リポジトリ検索', 33 | }, 34 | }, 35 | }; 36 | 37 | export default pages; 38 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | // 2 | -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/styles/themes/default/assets/fonts/brand-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/02-jest/src/styles/themes/default/assets/fonts/brand-icons.eot -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/styles/themes/default/assets/fonts/brand-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/02-jest/src/styles/themes/default/assets/fonts/brand-icons.ttf -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/styles/themes/default/assets/fonts/brand-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/02-jest/src/styles/themes/default/assets/fonts/brand-icons.woff -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/styles/themes/default/assets/fonts/brand-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/02-jest/src/styles/themes/default/assets/fonts/brand-icons.woff2 -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/styles/themes/default/assets/fonts/icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/02-jest/src/styles/themes/default/assets/fonts/icons.eot -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/styles/themes/default/assets/fonts/icons.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/02-jest/src/styles/themes/default/assets/fonts/icons.otf -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/styles/themes/default/assets/fonts/icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/02-jest/src/styles/themes/default/assets/fonts/icons.ttf -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/styles/themes/default/assets/fonts/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/02-jest/src/styles/themes/default/assets/fonts/icons.woff -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/styles/themes/default/assets/fonts/icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/02-jest/src/styles/themes/default/assets/fonts/icons.woff2 -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/styles/themes/default/assets/fonts/outline-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/02-jest/src/styles/themes/default/assets/fonts/outline-icons.eot -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/styles/themes/default/assets/fonts/outline-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/02-jest/src/styles/themes/default/assets/fonts/outline-icons.ttf -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/styles/themes/default/assets/fonts/outline-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/02-jest/src/styles/themes/default/assets/fonts/outline-icons.woff -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/styles/themes/default/assets/fonts/outline-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/02-jest/src/styles/themes/default/assets/fonts/outline-icons.woff2 -------------------------------------------------------------------------------- /04-unit-test/02-jest/src/styles/themes/default/assets/images/flags.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/02-jest/src/styles/themes/default/assets/images/flags.png -------------------------------------------------------------------------------- /04-unit-test/02-jest/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "plugins": [{"name": "css-module-types"}], 6 | "allowJs": true, 7 | "skipLibCheck": true, 8 | "esModuleInterop": true, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "incremental": true, 18 | "tsBuildInfoFile": "./buildcache/tsbuildinfo", 19 | "jsx": "preserve", 20 | "outDir": "build", 21 | "rootDirs": ["src"] 22 | }, 23 | "include": ["src"], 24 | "exclude": [ 25 | "node_modules", 26 | "build", 27 | "dist", 28 | "scripts" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # TypeScript 7 | /lib 8 | 9 | # testing 10 | coverage 11 | lib-cov 12 | 13 | # build 14 | /build 15 | /buildcache 16 | /dist 17 | 18 | # logs 19 | logs 20 | *.log 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | # Optional npm cache directory 26 | .npm 27 | 28 | # Yarn Integrity file 29 | .yarn-integrity 30 | 31 | # Optional eslint cache 32 | .eslintcache 33 | 34 | # IDE 35 | .idea/ 36 | .*.swp 37 | .vscode/chrome 38 | 39 | # misc 40 | .DS_Store 41 | .env 42 | .env.local 43 | .env.development.local 44 | .env.test.local 45 | .env.production.local 46 | 47 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-a11y/register'; 2 | import '@storybook/addon-actions/register'; 3 | import '@storybook/addon-knobs/register'; 4 | import '@storybook/addon-links/register'; 5 | 6 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure, addDecorator } from '@storybook/react'; 2 | import { withInfo } from '@storybook/addon-info'; 3 | import { withKnobs } from '@storybook/addon-knobs'; 4 | 5 | import '../src/styles/semantic.min.css'; 6 | import '../src/index.css'; 7 | 8 | const req = require.context('../src/components', true, /.(story|stories).tsx$/); 9 | 10 | function loadStories() { 11 | addDecorator(withInfo); 12 | addDecorator(withKnobs); 13 | req.keys().forEach(req); 14 | } 15 | 16 | configure(loadStories, module); 17 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const SRC_PATH = path.join(__dirname, '../src'); 3 | 4 | module.exports = ({ config }) => { 5 | config.module.rules.push({ 6 | test: /\.(ts|tsx)$/, 7 | include: [SRC_PATH], 8 | use: [ 9 | { 10 | loader: require.resolve('babel-loader'), 11 | options: { 12 | presets: [['react-app', { flow: false, typescript: true }]], 13 | } 14 | }, 15 | { loader: require.resolve('react-docgen-typescript-loader') } 16 | ] 17 | }); 18 | config.resolve.extensions.push('.ts', '.tsx'); 19 | return config; 20 | }; 21 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/.stylelintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: ['stylelint-order'], 3 | extends: [ 4 | 'stylelint-config-standard', 5 | './node_modules/prettier-stylelint/config.js' 6 | ], 7 | ignoreFiles: [ 8 | '**/node_modules/**', 9 | 'src/styles/**' 10 | ], 11 | rules: { 12 | 'indentation': 2, 13 | 'string-quotes': 'single', 14 | 'order/properties-alphabetical-order': true 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. 3 | // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp 4 | 5 | // List of extensions which should be recommended for users of this workspace. 6 | "recommendations": [ 7 | "coenraads.bracket-pair-colorizer", 8 | "dbaeumer.vscode-eslint", 9 | "esbenp.prettier-vscode", 10 | "msjsdiag.debugger-for-chrome", 11 | "ms-vsliveshare.vsliveshare", 12 | "oderwat.indent-rainbow", 13 | "shinnn.stylelint", 14 | "VisualStudioExptTeam.vscodeintellicode", 15 | "vscode-icons-team.vscode-icons" 16 | ], 17 | // List of extensions recommended by VS Code that should not be recommended for users of this workspace. 18 | "unwantedRecommendations": [] 19 | } 20 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "name": "Launch Chrome against localhost", 9 | "type": "chrome", 10 | "request": "launch", 11 | "url": "http://localhost:3000", 12 | "webRoot": "${workspaceRoot}/src", 13 | "userDataDir": "${workspaceRoot}/.vscode/chrome", 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*" 16 | } 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "css.validate": true, 3 | "editor.formatOnSave": true, 4 | "eslint.autoFixOnSave": true, 5 | "eslint.enable": true, 6 | "eslint.validate": [ 7 | { 8 | "language": "javascript", 9 | "autoFix": true 10 | }, 11 | { 12 | "language": "javascriptreact", 13 | "autoFix": true 14 | }, 15 | { 16 | "language": "typescript", 17 | "autoFix": true 18 | }, 19 | { 20 | "language": "typescriptreact", 21 | "autoFix": true 22 | } 23 | ], 24 | "files.insertFinalNewline": true, 25 | "files.trimTrailingWhitespace": true, 26 | "prettier.eslintIntegration": true, 27 | "prettier.stylelintIntegration": true, 28 | "stylelint.enable": true, 29 | "typescript.tsserver.trace": "verbose", 30 | "[markdown]": { 31 | "files.trimTrailingWhitespace": false 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/images.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.svg'; 2 | declare module '*.png'; 3 | declare module '*.jpg'; 4 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/03-saga-test/public/favicon.ico -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/actions/githubConstants.ts: -------------------------------------------------------------------------------- 1 | export const GET_MEMBERS_START = 'GITHUB/GET_MEMBERS_START'; 2 | export const GET_MEMBERS_SUCCEED = 'GITHUB/GET_MEMBERS_SUCCEED'; 3 | export const GET_MEMBERS_FAIL = 'GITHUB/GET_MEMBERS_FAIL'; 4 | export const SEARCH_REPOSITORIES_START = 'GITHUB/SEARCH_REPOSITORIES_START'; 5 | export const SEARCH_REPOSITORIES_SUCCEED = 'GITHUB/SEARCH_REPOSITORIES_SUCCEED'; 6 | export const SEARCH_REPOSITORIES_FAIL = 'GITHUB/SEARCH_REPOSITORIES_FAIL'; 7 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/actions/index.ts: -------------------------------------------------------------------------------- 1 | export interface Action { 2 | type: string; 3 | payload?: Payload; 4 | error?: boolean; 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 6 | meta?: { [key: string]: any } | null; 7 | } 8 | 9 | export interface ActionStart { 10 | type: ActionType; 11 | payload?: Params; 12 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 13 | meta?: { [key: string]: any } | null; 14 | } 15 | 16 | export interface ActionSucceed { 17 | type: ActionType; 18 | payload: { 19 | params: Params; 20 | result: Result; 21 | }; 22 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 23 | meta?: { [key: string]: any } | null; 24 | } 25 | 26 | export interface ActionFail { 27 | type: ActionType; 28 | payload: { 29 | params: Params; 30 | error: AnyError; 31 | }; 32 | error: boolean; 33 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 34 | meta?: { [key: string]: any } | null; 35 | } 36 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/components/Companies/index.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { BrowserRouter } from 'react-router-dom'; 3 | import { jsx } from '@emotion/core'; 4 | import { storiesOf } from '@storybook/react'; 5 | import { array } from '@storybook/addon-knobs'; 6 | 7 | import Companies from './index'; 8 | 9 | const companies = ['google', 'apple', 'amazon', 'microsoft', 'twitter']; 10 | 11 | storiesOf('Companies/index', module) 12 | .addDecorator(story => {story()}) 13 | .add('default', () => ) 14 | .add('with data', () => ( 15 | 16 | )); 17 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/components/Companies/index.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { Link } from 'react-router-dom'; 4 | import { jsx } from '@emotion/core'; 5 | import capitalize from 'lodash/capitalize'; 6 | import { List } from 'semantic-ui-react'; 7 | 8 | import { listItem } from '../common/list'; 9 | 10 | const givenCompanies = ['facebook', 'airbnb', 'netflix']; 11 | 12 | const Companies: FC<{ companies?: string[] }> = ({ 13 | companies = givenCompanies, 14 | }) => ( 15 |
16 | 17 | {companies.map(companyName => ( 18 | 19 | 20 | 21 | 22 | {capitalize(companyName)}のメンバー 23 | 24 | 25 | 26 | ))} 27 | 28 |
29 | ); 30 | 31 | export default Companies; 32 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/components/Repositories/Formr.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from '@emotion/core'; 3 | import { storiesOf } from '@storybook/react'; 4 | import { boolean, object } from '@storybook/addon-knobs'; 5 | 6 | import Form from './Form'; 7 | 8 | const match = ''; 9 | 10 | storiesOf('Repository Search/Form', module).add('default', () => ( 11 | 15 | )); 16 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/components/Repositories/Result.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { jsx } from '@emotion/core'; 4 | 5 | import RepositoryList from '../common/RepositoryList'; 6 | import Spinner from '../common/Spinner'; 7 | import { Repository } from '../../services/github/models'; 8 | 9 | export interface RepositoryResultProps { 10 | repositories?: Repository[]; 11 | isLoading?: boolean; 12 | } 13 | 14 | const RepositoryResult: FC = ({ 15 | repositories = [], 16 | isLoading = false, 17 | }) => ( 18 |
19 | {isLoading ? : } 20 |
21 | ); 22 | 23 | export default RepositoryResult; 24 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/components/Repositories/Search.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { css, jsx } from '@emotion/core'; 4 | import { Helmet } from 'react-helmet'; 5 | import { Header } from 'semantic-ui-react'; 6 | 7 | import RepositoryForm from '../../containers/Repositories/Form'; 8 | import RepositoryResult from '../../containers/Repositories/Result'; 9 | import pages from '../../pages'; 10 | import { menuHeader } from '../common/heading'; 11 | 12 | const wrapper = css` 13 | margin: 2em 1em; 14 | `; 15 | 16 | const RepositorySearch: FC = () => ( 17 |
18 | 19 | {pages.repositories.search.title} 20 | 21 |
22 |
23 | {pages.repositories.search.title} 24 |
25 | 26 | 27 |
28 |
29 | ); 30 | 31 | export default RepositorySearch; 32 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/components/common/HtmlTitle.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { jsx } from '@emotion/core'; 4 | import { Helmet } from 'react-helmet'; 5 | 6 | const HtmlTitle: FC<{ title: string }> = ({ title = '' }) => 7 | title ? ( 8 | 9 | {title} 10 | 11 | ) : ( 12 |
13 | ); 14 | 15 | export default HtmlTitle; 16 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/components/common/RepositoryList.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from '@emotion/core'; 3 | import { storiesOf } from '@storybook/react'; 4 | import { object } from '@storybook/addon-knobs'; 5 | import camelcaseKeys from 'camelcase-keys'; 6 | 7 | import RepositoryList from './RepositoryList'; 8 | import { Repository } from '../../services/github/models'; 9 | import data from '../../services/github/__mocks__/repositories.json'; 10 | 11 | const repositories = camelcaseKeys(data, { 12 | deep: true, 13 | }) as Repository[]; 14 | 15 | storiesOf('Common/RepositoryList', module).add('with data', () => ( 16 | 17 | )); 18 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/components/common/Spinner.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from '@emotion/core'; 3 | import { storiesOf } from '@storybook/react'; 4 | import { text } from '@storybook/addon-knobs'; 5 | 6 | import Spinner from './Spinner'; 7 | 8 | storiesOf('Common/Spinner', module) 9 | .add('default', () => ) 10 | .add('with custom text', () => ( 11 | 12 | )); 13 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/components/common/Spinner.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { css, jsx } from '@emotion/core'; 4 | import { Dimmer, Loader, Segment } from 'semantic-ui-react'; 5 | 6 | const wrapper = css` 7 | border: none !important; 8 | box-shadow: none !important; 9 | height: 20em; 10 | `; 11 | 12 | const Spinner: FC<{ message?: string }> = ({ message = '読み込み中...' }) => ( 13 | 14 | 15 | {message} 16 | 17 | 18 | ); 19 | 20 | export default Spinner; 21 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/components/common/UserList.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from '@emotion/core'; 3 | import { storiesOf } from '@storybook/react'; 4 | import { object } from '@storybook/addon-knobs'; 5 | import camelcaseKeys from 'camelcase-keys'; 6 | 7 | import UserList from './UserList'; 8 | import { User } from '../../services/github/models'; 9 | import data from '../../services/github/__mocks__/users.json'; 10 | 11 | const users = camelcaseKeys(data, { deep: true }) as User[]; 12 | 13 | storiesOf('Common/UserList', module).add('with data', () => ( 14 | 15 | )); 16 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/components/common/UserList.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { jsx } from '@emotion/core'; 4 | import { Card, Image } from 'semantic-ui-react'; 5 | 6 | import { User } from '../../services/github/models'; 7 | 8 | export interface UserListProps { 9 | users: User[]; 10 | } 11 | 12 | const UserList: FC = ({ users = [] }) => ( 13 | 14 | {users.map(user => ( 15 | 16 | 17 | 18 | {user.login} 19 | GitHub ID: {user.id} 20 | 21 | 22 | ))} 23 | 24 | ); 25 | 26 | export default UserList; 27 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/components/common/heading.ts: -------------------------------------------------------------------------------- 1 | import { css } from '@emotion/core'; 2 | 3 | export const menuHeader = css` 4 | margin-bottom: 1.25em; 5 | text-align: center; 6 | `; 7 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/components/common/list.ts: -------------------------------------------------------------------------------- 1 | import { css } from '@emotion/core'; 2 | 3 | export const listItem = css` 4 | padding: 1.35em 0 1em !important; 5 | `; 6 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/containers/Repositories/Result.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { connect } from 'react-redux'; 4 | import { jsx } from '@emotion/core'; 5 | 6 | import RepositoriesSearch, { 7 | RepositoryResultProps, 8 | } from '../../components/Repositories/Result'; 9 | import { Repository } from '../../services/github/models'; 10 | import { GithubState } from '../../reducer'; 11 | 12 | interface StateProps { 13 | repositories: Repository[]; 14 | isLoading: boolean; 15 | } 16 | 17 | type EnhancedRepositoryResultProps = RepositoryResultProps & StateProps; 18 | 19 | const mapStateToProps = (state: GithubState): StateProps => ({ 20 | repositories: state.repositories, 21 | isLoading: state.isLoading, 22 | }); 23 | 24 | const RepositoryResultContainer: FC = ({ 25 | repositories, 26 | isLoading, 27 | }) => ; 28 | 29 | export default connect(mapStateToProps)(RepositoryResultContainer); 30 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/index.css: -------------------------------------------------------------------------------- 1 | #root { 2 | margin: 2.5em auto 0; 3 | max-width: 930px; 4 | } 5 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/pages.ts: -------------------------------------------------------------------------------- 1 | /* 2 | type PageScheme = 3 | | { 4 | path: string; 5 | title: string; 6 | } 7 | | Pages; 8 | 9 | interface Pages { 10 | [x: string]: PageScheme; 11 | } 12 | */ 13 | 14 | const pages = { 15 | index: { 16 | path: '/', 17 | title: 'GitHub API サンプルアプリ', 18 | }, 19 | companies: { 20 | index: { 21 | path: '/companies', 22 | title: 'いろんな会社のメンバー', 23 | }, 24 | members: { 25 | path: '/:companyName/members', 26 | title: '%s のメンバー', 27 | }, 28 | }, 29 | repositories: { 30 | search: { 31 | path: '/repositories/search', 32 | title: 'リポジトリ検索', 33 | }, 34 | }, 35 | }; 36 | 37 | export default pages; 38 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | // 2 | -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/brand-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/brand-icons.eot -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/brand-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/brand-icons.ttf -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/brand-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/brand-icons.woff -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/brand-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/brand-icons.woff2 -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/icons.eot -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/icons.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/icons.otf -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/icons.ttf -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/icons.woff -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/icons.woff2 -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/outline-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/outline-icons.eot -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/outline-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/outline-icons.ttf -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/outline-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/outline-icons.woff -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/outline-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/03-saga-test/src/styles/themes/default/assets/fonts/outline-icons.woff2 -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/src/styles/themes/default/assets/images/flags.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/03-saga-test/src/styles/themes/default/assets/images/flags.png -------------------------------------------------------------------------------- /04-unit-test/03-saga-test/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "plugins": [{"name": "css-module-types"}], 6 | "allowJs": true, 7 | "skipLibCheck": true, 8 | "esModuleInterop": true, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "incremental": true, 18 | "tsBuildInfoFile": "./buildcache/tsbuildinfo", 19 | "jsx": "preserve", 20 | "outDir": "build", 21 | "rootDirs": ["src"] 22 | }, 23 | "include": ["src"], 24 | "exclude": [ 25 | "node_modules", 26 | "build", 27 | "dist", 28 | "scripts" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # TypeScript 7 | /lib 8 | 9 | # testing 10 | coverage 11 | lib-cov 12 | 13 | # build 14 | /build 15 | /buildcache 16 | /dist 17 | 18 | # logs 19 | logs 20 | *.log 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | # Optional npm cache directory 26 | .npm 27 | 28 | # Yarn Integrity file 29 | .yarn-integrity 30 | 31 | # Optional eslint cache 32 | .eslintcache 33 | 34 | # IDE 35 | .idea/ 36 | .*.swp 37 | .vscode/chrome 38 | 39 | # misc 40 | .DS_Store 41 | .env 42 | .env.local 43 | .env.development.local 44 | .env.test.local 45 | .env.production.local 46 | 47 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-a11y/register'; 2 | import '@storybook/addon-actions/register'; 3 | import '@storybook/addon-knobs/register'; 4 | import '@storybook/addon-links/register'; 5 | 6 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/.storybook/config.js: -------------------------------------------------------------------------------- 1 | import {configure, addDecorator} from '@storybook/react'; 2 | import {withInfo} from '@storybook/addon-info'; 3 | import {withKnobs} from '@storybook/addon-knobs'; 4 | import requireContext from 'require-context.macro'; 5 | 6 | import '../src/styles/semantic.min.css'; 7 | import '../src/index.css'; 8 | 9 | const req = requireContext('../src/components', true, /.(story|stories).tsx$/); 10 | 11 | function loadStories() { 12 | addDecorator(withInfo); 13 | addDecorator(withKnobs); 14 | req.keys().forEach(req); 15 | } 16 | 17 | configure(loadStories, module); 18 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const SRC_PATH = path.join(__dirname, '../src'); 3 | 4 | module.exports = ({ config }) => { 5 | config.module.rules.push({ 6 | test: /\.(ts|tsx)$/, 7 | include: [SRC_PATH], 8 | use: [ 9 | { 10 | loader: require.resolve('babel-loader'), 11 | options: { 12 | presets: [['react-app', { flow: false, typescript: true }]], 13 | } 14 | }, 15 | { loader: require.resolve('react-docgen-typescript-loader') } 16 | ] 17 | }); 18 | config.resolve.extensions.push('.ts', '.tsx'); 19 | return config; 20 | }; 21 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/.stylelintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: ['stylelint-order'], 3 | extends: [ 4 | 'stylelint-config-standard', 5 | './node_modules/prettier-stylelint/config.js' 6 | ], 7 | ignoreFiles: [ 8 | '**/node_modules/**', 9 | 'src/styles/**' 10 | ], 11 | rules: { 12 | 'indentation': 2, 13 | 'string-quotes': 'single', 14 | 'order/properties-alphabetical-order': true 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. 3 | // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp 4 | 5 | // List of extensions which should be recommended for users of this workspace. 6 | "recommendations": [ 7 | "coenraads.bracket-pair-colorizer", 8 | "dbaeumer.vscode-eslint", 9 | "esbenp.prettier-vscode", 10 | "msjsdiag.debugger-for-chrome", 11 | "ms-vsliveshare.vsliveshare", 12 | "oderwat.indent-rainbow", 13 | "shinnn.stylelint", 14 | "VisualStudioExptTeam.vscodeintellicode", 15 | "vscode-icons-team.vscode-icons" 16 | ], 17 | // List of extensions recommended by VS Code that should not be recommended for users of this workspace. 18 | "unwantedRecommendations": [] 19 | } 20 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "name": "Launch Chrome against localhost", 9 | "type": "chrome", 10 | "request": "launch", 11 | "url": "http://localhost:3000", 12 | "webRoot": "${workspaceRoot}/src", 13 | "userDataDir": "${workspaceRoot}/.vscode/chrome", 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*" 16 | } 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "css.validate": true, 3 | "editor.formatOnSave": true, 4 | "eslint.autoFixOnSave": true, 5 | "eslint.enable": true, 6 | "eslint.validate": [ 7 | { 8 | "language": "javascript", 9 | "autoFix": true 10 | }, 11 | { 12 | "language": "javascriptreact", 13 | "autoFix": true 14 | }, 15 | { 16 | "language": "typescript", 17 | "autoFix": true 18 | }, 19 | { 20 | "language": "typescriptreact", 21 | "autoFix": true 22 | } 23 | ], 24 | "files.insertFinalNewline": true, 25 | "files.trimTrailingWhitespace": true, 26 | "prettier.eslintIntegration": true, 27 | "prettier.stylelintIntegration": true, 28 | "stylelint.enable": true, 29 | "typescript.tsserver.trace": "verbose", 30 | "[markdown]": { 31 | "files.trimTrailingWhitespace": false 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/images.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.svg'; 2 | declare module '*.png'; 3 | declare module '*.jpg'; 4 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/patches/semantic-ui-react+0.86.0.patch: -------------------------------------------------------------------------------- 1 | diff --git a/node_modules/semantic-ui-react/dist/commonjs/modules/Dimmer/DimmerInner.js b/node_modules/semantic-ui-react/dist/commonjs/modules/Dimmer/DimmerInner.js 2 | index 1de721e..bf901b1 100644 3 | --- a/node_modules/semantic-ui-react/dist/commonjs/modules/Dimmer/DimmerInner.js 4 | +++ b/node_modules/semantic-ui-react/dist/commonjs/modules/Dimmer/DimmerInner.js 5 | @@ -89,7 +89,7 @@ function (_Component) { 6 | key: "toggleStyles", 7 | value: function toggleStyles(active) { 8 | var containerRef = this.containerRef.current; 9 | - if (!containerRef) return; 10 | + if (!containerRef || !containerRef.style) return 11 | 12 | if (active) { 13 | containerRef.style.setProperty('display', 'flex', 'important'); 14 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/04-storyshots/public/favicon.ico -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/actions/githubConstants.ts: -------------------------------------------------------------------------------- 1 | export const GET_MEMBERS_START = 'GITHUB/GET_MEMBERS_START'; 2 | export const GET_MEMBERS_SUCCEED = 'GITHUB/GET_MEMBERS_SUCCEED'; 3 | export const GET_MEMBERS_FAIL = 'GITHUB/GET_MEMBERS_FAIL'; 4 | export const SEARCH_REPOSITORIES_START = 'GITHUB/SEARCH_REPOSITORIES_START'; 5 | export const SEARCH_REPOSITORIES_SUCCEED = 'GITHUB/SEARCH_REPOSITORIES_SUCCEED'; 6 | export const SEARCH_REPOSITORIES_FAIL = 'GITHUB/SEARCH_REPOSITORIES_FAIL'; 7 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/components/Companies/index.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { BrowserRouter } from 'react-router-dom'; 3 | import { jsx } from '@emotion/core'; 4 | import { storiesOf } from '@storybook/react'; 5 | import { array } from '@storybook/addon-knobs'; 6 | 7 | import Companies from './index'; 8 | 9 | const companies = ['google', 'apple', 'amazon', 'microsoft', 'twitter']; 10 | 11 | storiesOf('Companies/index', module) 12 | .addDecorator(story => {story()}) 13 | .add('default', () => ) 14 | .add('with data', () => ( 15 | 16 | )); 17 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/components/Companies/index.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { Link } from 'react-router-dom'; 4 | import { jsx } from '@emotion/core'; 5 | import capitalize from 'lodash/capitalize'; 6 | import { List } from 'semantic-ui-react'; 7 | 8 | import { listItem } from '../common/list'; 9 | 10 | const givenCompanies = ['facebook', 'airbnb', 'netflix']; 11 | 12 | const Companies: FC<{ companies?: string[] }> = ({ 13 | companies = givenCompanies, 14 | }) => ( 15 |
16 | 17 | {companies.map(companyName => ( 18 | 19 | 20 | 21 | 22 | {capitalize(companyName)}のメンバー 23 | 24 | 25 | 26 | ))} 27 | 28 |
29 | ); 30 | 31 | export default Companies; 32 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/components/Repositories/Formr.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from '@emotion/core'; 3 | import { storiesOf } from '@storybook/react'; 4 | import { boolean, object } from '@storybook/addon-knobs'; 5 | 6 | import Form from './Form'; 7 | 8 | const match = ''; 9 | 10 | storiesOf('Repository Search/Form', module).add('default', () => ( 11 | 15 | )); 16 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/components/Repositories/Result.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { jsx } from '@emotion/core'; 4 | 5 | import RepositoryList from '../common/RepositoryList'; 6 | import Spinner from '../common/Spinner'; 7 | import { Repository } from '../../services/github/models'; 8 | 9 | export interface RepositoryResultProps { 10 | repositories?: Repository[]; 11 | isLoading?: boolean; 12 | } 13 | 14 | const RepositoryResult: FC = ({ 15 | repositories = [], 16 | isLoading = false, 17 | }) => ( 18 |
19 | {isLoading ? : } 20 |
21 | ); 22 | 23 | export default RepositoryResult; 24 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/components/Repositories/Search.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { css, jsx } from '@emotion/core'; 4 | import { Helmet } from 'react-helmet'; 5 | import { Header } from 'semantic-ui-react'; 6 | 7 | import RepositoryForm from '../../containers/Repositories/Form'; 8 | import RepositoryResult from '../../containers/Repositories/Result'; 9 | import pages from '../../pages'; 10 | import { menuHeader } from '../common/heading'; 11 | 12 | const wrapper = css` 13 | margin: 2em 1em; 14 | `; 15 | 16 | const RepositorySearch: FC = () => ( 17 |
18 | 19 | {pages.repositories.search.title} 20 | 21 |
22 |
23 | {pages.repositories.search.title} 24 |
25 | 26 | 27 |
28 |
29 | ); 30 | 31 | export default RepositorySearch; 32 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/components/common/HtmlTitle.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { jsx } from '@emotion/core'; 4 | import { Helmet } from 'react-helmet'; 5 | 6 | const HtmlTitle: FC<{ title: string }> = ({ title = '' }) => 7 | title ? ( 8 | 9 | {title} 10 | 11 | ) : ( 12 |
13 | ); 14 | 15 | export default HtmlTitle; 16 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/components/common/RepositoryList.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from '@emotion/core'; 3 | import { storiesOf } from '@storybook/react'; 4 | import { object } from '@storybook/addon-knobs'; 5 | import camelcaseKeys from 'camelcase-keys'; 6 | 7 | import RepositoryList from './RepositoryList'; 8 | import { Repository } from '../../services/github/models'; 9 | import data from '../../services/github/__mocks__/repositories.json'; 10 | 11 | const repositories = camelcaseKeys(data, { 12 | deep: true, 13 | }) as Repository[]; 14 | 15 | storiesOf('Common/RepositoryList', module).add('with data', () => ( 16 | 17 | )); 18 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/components/common/Spinner.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from '@emotion/core'; 3 | import { storiesOf } from '@storybook/react'; 4 | import { text } from '@storybook/addon-knobs'; 5 | 6 | import Spinner from './Spinner'; 7 | 8 | storiesOf('Common/Spinner', module) 9 | .add('default', () => ) 10 | .add('with custom text', () => ( 11 | 12 | )); 13 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/components/common/Spinner.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { css, jsx } from '@emotion/core'; 4 | import { Dimmer, Loader, Segment } from 'semantic-ui-react'; 5 | 6 | const wrapper = css` 7 | border: none !important; 8 | box-shadow: none !important; 9 | height: 20em; 10 | `; 11 | 12 | const Spinner: FC<{ message?: string }> = ({ message = '読み込み中...' }) => ( 13 | 14 | 15 | {message} 16 | 17 | 18 | ); 19 | 20 | export default Spinner; 21 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/components/common/UserList.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from '@emotion/core'; 3 | import { storiesOf } from '@storybook/react'; 4 | import { object } from '@storybook/addon-knobs'; 5 | import camelcaseKeys from 'camelcase-keys'; 6 | 7 | import UserList from './UserList'; 8 | import { User } from '../../services/github/models'; 9 | import data from '../../services/github/__mocks__/users.json'; 10 | 11 | const users = camelcaseKeys(data, { deep: true }) as User[]; 12 | 13 | storiesOf('Common/UserList', module).add('with data', () => ( 14 | 15 | )); 16 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/components/common/UserList.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { jsx } from '@emotion/core'; 4 | import { Card, Image } from 'semantic-ui-react'; 5 | 6 | import { User } from '../../services/github/models'; 7 | 8 | export interface UserListProps { 9 | users: User[]; 10 | } 11 | 12 | const UserList: FC = ({ users = [] }) => ( 13 | 14 | {users.map(user => ( 15 | 16 | 17 | 18 | {user.login} 19 | GitHub ID: {user.id} 20 | 21 | 22 | ))} 23 | 24 | ); 25 | 26 | export default UserList; 27 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/components/common/heading.ts: -------------------------------------------------------------------------------- 1 | import { css } from '@emotion/core'; 2 | 3 | export const menuHeader = css` 4 | margin-bottom: 1.25em; 5 | text-align: center; 6 | `; 7 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/components/common/list.ts: -------------------------------------------------------------------------------- 1 | import { css } from '@emotion/core'; 2 | 3 | export const listItem = css` 4 | padding: 1.35em 0 1em !important; 5 | `; 6 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/components/storyshots.test.ts: -------------------------------------------------------------------------------- 1 | import initStoryshots from '@storybook/addon-storyshots'; 2 | 3 | initStoryshots({}); 4 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/containers/Repositories/Result.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { connect } from 'react-redux'; 4 | import { jsx } from '@emotion/core'; 5 | 6 | import RepositoriesSearch, { 7 | RepositoryResultProps, 8 | } from '../../components/Repositories/Result'; 9 | import { Repository } from '../../services/github/models'; 10 | import { GithubState } from '../../reducer'; 11 | 12 | interface StateProps { 13 | repositories: Repository[]; 14 | isLoading: boolean; 15 | } 16 | 17 | type EnhancedRepositoryResultProps = RepositoryResultProps & StateProps; 18 | 19 | const mapStateToProps = (state: GithubState): StateProps => ({ 20 | repositories: state.repositories, 21 | isLoading: state.isLoading, 22 | }); 23 | 24 | const RepositoryResultContainer: FC = ({ 25 | repositories, 26 | isLoading, 27 | }) => ; 28 | 29 | export default connect(mapStateToProps)(RepositoryResultContainer); 30 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/index.css: -------------------------------------------------------------------------------- 1 | #root { 2 | margin: 2.5em auto 0; 3 | max-width: 930px; 4 | } 5 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/pages.ts: -------------------------------------------------------------------------------- 1 | /* 2 | type PageScheme = 3 | | { 4 | path: string; 5 | title: string; 6 | } 7 | | Pages; 8 | 9 | interface Pages { 10 | [x: string]: PageScheme; 11 | } 12 | */ 13 | 14 | const pages = { 15 | index: { 16 | path: '/', 17 | title: 'GitHub API サンプルアプリ', 18 | }, 19 | companies: { 20 | index: { 21 | path: '/companies', 22 | title: 'いろんな会社のメンバー', 23 | }, 24 | members: { 25 | path: '/:companyName/members', 26 | title: '%s のメンバー', 27 | }, 28 | }, 29 | repositories: { 30 | search: { 31 | path: '/repositories/search', 32 | title: 'リポジトリ検索', 33 | }, 34 | }, 35 | }; 36 | 37 | export default pages; 38 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | // 2 | -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/brand-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/brand-icons.eot -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/brand-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/brand-icons.ttf -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/brand-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/brand-icons.woff -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/brand-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/brand-icons.woff2 -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/icons.eot -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/icons.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/icons.otf -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/icons.ttf -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/icons.woff -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/icons.woff2 -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/outline-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/outline-icons.eot -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/outline-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/outline-icons.ttf -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/outline-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/outline-icons.woff -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/outline-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/04-storyshots/src/styles/themes/default/assets/fonts/outline-icons.woff2 -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/src/styles/themes/default/assets/images/flags.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/04-unit-test/04-storyshots/src/styles/themes/default/assets/images/flags.png -------------------------------------------------------------------------------- /04-unit-test/04-storyshots/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "plugins": [{"name": "css-module-types"}], 6 | "allowJs": true, 7 | "skipLibCheck": true, 8 | "esModuleInterop": true, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "incremental": true, 18 | "tsBuildInfoFile": "./buildcache/tsbuildinfo", 19 | "jsx": "preserve", 20 | "outDir": "build", 21 | "rootDirs": ["src"] 22 | }, 23 | "include": ["src"], 24 | "exclude": [ 25 | "node_modules", 26 | "build", 27 | "dist", 28 | "scripts" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | cypress/plugins/ 3 | cypress/integration/examples 4 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # TypeScript 7 | /lib 8 | 9 | # testing 10 | coverage 11 | lib-cov 12 | /cypress/videos 13 | 14 | # build 15 | /build 16 | /buildcache 17 | /dist 18 | 19 | # logs 20 | logs 21 | *.log 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | 26 | # samples 27 | examples 28 | 29 | # Optional npm cache directory 30 | .npm 31 | 32 | # Yarn Integrity file 33 | .yarn-integrity 34 | 35 | # Optional eslint cache 36 | .eslintcache 37 | 38 | # IDE 39 | .idea/ 40 | .*.swp 41 | .vscode/chrome 42 | 43 | # misc 44 | .DS_Store 45 | .env 46 | .env.local 47 | .env.development.local 48 | .env.test.local 49 | .env.production.local 50 | 51 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-a11y/register'; 2 | import '@storybook/addon-actions/register'; 3 | import '@storybook/addon-knobs/register'; 4 | import '@storybook/addon-links/register'; 5 | 6 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/.storybook/config.js: -------------------------------------------------------------------------------- 1 | import {configure, addDecorator} from '@storybook/react'; 2 | import {withInfo} from '@storybook/addon-info'; 3 | import {withKnobs} from '@storybook/addon-knobs'; 4 | import requireContext from 'require-context.macro'; 5 | 6 | import '../src/styles/semantic.min.css'; 7 | import '../src/index.css'; 8 | 9 | const req = requireContext('../src/components', true, /.(story|stories).tsx$/); 10 | 11 | function loadStories() { 12 | addDecorator(withInfo); 13 | addDecorator(withKnobs); 14 | req.keys().forEach(req); 15 | } 16 | 17 | configure(loadStories, module); 18 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const SRC_PATH = path.join(__dirname, '../src'); 3 | 4 | module.exports = ({ config }) => { 5 | config.module.rules.push({ 6 | test: /\.(ts|tsx)$/, 7 | include: [SRC_PATH], 8 | use: [ 9 | { 10 | loader: require.resolve('babel-loader'), 11 | options: { 12 | presets: [['react-app', { flow: false, typescript: true }]], 13 | } 14 | }, 15 | { loader: require.resolve('react-docgen-typescript-loader') } 16 | ] 17 | }); 18 | config.resolve.extensions.push('.ts', '.tsx'); 19 | return config; 20 | }; 21 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/.stylelintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: ['stylelint-order'], 3 | extends: [ 4 | 'stylelint-config-standard', 5 | './node_modules/prettier-stylelint/config.js' 6 | ], 7 | ignoreFiles: [ 8 | '**/node_modules/**', 9 | 'src/styles/**' 10 | ], 11 | rules: { 12 | 'indentation': 2, 13 | 'string-quotes': 'single', 14 | 'order/properties-alphabetical-order': true 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. 3 | // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp 4 | 5 | // List of extensions which should be recommended for users of this workspace. 6 | "recommendations": [ 7 | "coenraads.bracket-pair-colorizer", 8 | "dbaeumer.vscode-eslint", 9 | "esbenp.prettier-vscode", 10 | "msjsdiag.debugger-for-chrome", 11 | "ms-vsliveshare.vsliveshare", 12 | "oderwat.indent-rainbow", 13 | "shinnn.stylelint", 14 | "VisualStudioExptTeam.vscodeintellicode", 15 | "vscode-icons-team.vscode-icons" 16 | ], 17 | // List of extensions recommended by VS Code that should not be recommended for users of this workspace. 18 | "unwantedRecommendations": [] 19 | } 20 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "name": "Launch Chrome against localhost", 9 | "type": "chrome", 10 | "request": "launch", 11 | "url": "http://localhost:3000", 12 | "webRoot": "${workspaceRoot}/src", 13 | "userDataDir": "${workspaceRoot}/.vscode/chrome", 14 | "sourceMapPathOverrides": { 15 | "webpack:///src/*": "${webRoot}/*" 16 | } 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "css.validate": true, 3 | "editor.formatOnSave": true, 4 | "eslint.autoFixOnSave": true, 5 | "eslint.enable": true, 6 | "eslint.validate": [ 7 | { 8 | "language": "javascript", 9 | "autoFix": true 10 | }, 11 | { 12 | "language": "javascriptreact", 13 | "autoFix": true 14 | }, 15 | { 16 | "language": "typescript", 17 | "autoFix": true 18 | }, 19 | { 20 | "language": "typescriptreact", 21 | "autoFix": true 22 | } 23 | ], 24 | "files.insertFinalNewline": true, 25 | "files.trimTrailingWhitespace": true, 26 | "prettier.eslintIntegration": true, 27 | "prettier.stylelintIntegration": true, 28 | "stylelint.enable": true, 29 | "typescript.tsserver.trace": "verbose", 30 | "[markdown]": { 31 | "files.trimTrailingWhitespace": false 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "baseUrl": "http://localhost:3000" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/cypress/integration/getMembers.spec.ts: -------------------------------------------------------------------------------- 1 | describe('Get organization members', () => { 2 | const baseUrl = Cypress.env('baseUrl'); 3 | 4 | it('Can see facebook members', () => { 5 | const companyName = 'facebook'; 6 | const memberName = 'acdlite'; 7 | 8 | cy.visit(baseUrl); 9 | 10 | cy.get('[data-testid=companies-page]').click(); 11 | cy.location('pathname').should('eq', '/companies'); 12 | 13 | cy.get(`[data-testid=${companyName}-page]`).click(); 14 | cy.location('pathname').should('eq', `/${companyName}/members`); 15 | 16 | cy.get(`[data-testid=${memberName}] > .header`).should( 17 | 'have.text', 18 | memberName, 19 | ); 20 | 21 | cy.get('[data-testid=companies-link]').click(); 22 | cy.location('pathname').should('eq', '/companies'); 23 | 24 | cy.get('[data-testid=home-link]').click(); 25 | cy.location('pathname').should('eq', '/'); 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/cypress/plugins/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example plugins/index.js can be used to load plugins 3 | // 4 | // You can change the location of this file or turn off loading 5 | // the plugins file with the 'pluginsFile' configuration option. 6 | // 7 | // You can read more here: 8 | // https://on.cypress.io/plugins-guide 9 | // *********************************************************** 10 | 11 | // This function is called when a project is opened or re-opened (e.g. due to 12 | // the project's config changing) 13 | 14 | module.exports = (on, config) => { 15 | // `on` is used to hook into various events Cypress emits 16 | // `config` is the resolved Cypress config 17 | }; 18 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This is will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/cypress/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands'; 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/cypress/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strict": true, 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "baseUrl": "../node_modules", 7 | "target": "es5", 8 | "lib": ["esnext", "dom"], 9 | "types": ["cypress"] 10 | }, 11 | "include": [ 12 | "**/*.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/images.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.svg'; 2 | declare module '*.png'; 3 | declare module '*.jpg'; 4 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/patches/semantic-ui-react+0.86.0.patch: -------------------------------------------------------------------------------- 1 | diff --git a/node_modules/semantic-ui-react/dist/commonjs/modules/Dimmer/DimmerInner.js b/node_modules/semantic-ui-react/dist/commonjs/modules/Dimmer/DimmerInner.js 2 | index 1de721e..bf901b1 100644 3 | --- a/node_modules/semantic-ui-react/dist/commonjs/modules/Dimmer/DimmerInner.js 4 | +++ b/node_modules/semantic-ui-react/dist/commonjs/modules/Dimmer/DimmerInner.js 5 | @@ -89,7 +89,7 @@ function (_Component) { 6 | key: "toggleStyles", 7 | value: function toggleStyles(active) { 8 | var containerRef = this.containerRef.current; 9 | - if (!containerRef) return; 10 | + if (!containerRef || !containerRef.style) return 11 | 12 | if (active) { 13 | containerRef.style.setProperty('display', 'flex', 'important'); 14 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/05-e2e-test/02-cypress/public/favicon.ico -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/actions/githubConstants.ts: -------------------------------------------------------------------------------- 1 | export const GET_MEMBERS_START = 'GITHUB/GET_MEMBERS_START'; 2 | export const GET_MEMBERS_SUCCEED = 'GITHUB/GET_MEMBERS_SUCCEED'; 3 | export const GET_MEMBERS_FAIL = 'GITHUB/GET_MEMBERS_FAIL'; 4 | export const SEARCH_REPOSITORIES_START = 'GITHUB/SEARCH_REPOSITORIES_START'; 5 | export const SEARCH_REPOSITORIES_SUCCEED = 'GITHUB/SEARCH_REPOSITORIES_SUCCEED'; 6 | export const SEARCH_REPOSITORIES_FAIL = 'GITHUB/SEARCH_REPOSITORIES_FAIL'; 7 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/actions/index.ts: -------------------------------------------------------------------------------- 1 | export interface Action { 2 | type: string; 3 | payload?: Payload; 4 | error?: boolean; 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 6 | meta?: { [key: string]: any } | null; 7 | } 8 | 9 | export interface ActionStart { 10 | type: ActionType; 11 | payload?: Params; 12 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 13 | meta?: { [key: string]: any } | null; 14 | } 15 | 16 | export interface ActionSucceed { 17 | type: ActionType; 18 | payload: { 19 | params: Params; 20 | result: Result; 21 | }; 22 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 23 | meta?: { [key: string]: any } | null; 24 | } 25 | 26 | export interface ActionFail { 27 | type: ActionType; 28 | payload: { 29 | params: Params; 30 | error: AnyError; 31 | }; 32 | error: boolean; 33 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 34 | meta?: { [key: string]: any } | null; 35 | } 36 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/components/Companies/index.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { BrowserRouter } from 'react-router-dom'; 3 | import { jsx } from '@emotion/core'; 4 | import { storiesOf } from '@storybook/react'; 5 | import { array } from '@storybook/addon-knobs'; 6 | 7 | import Companies from './index'; 8 | 9 | const companies = ['google', 'apple', 'amazon', 'microsoft', 'twitter']; 10 | 11 | storiesOf('Companies/index', module) 12 | .addDecorator(story => {story()}) 13 | .add('default', () => ) 14 | .add('with data', () => ( 15 | 16 | )); 17 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/components/Repositories/Formr.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from '@emotion/core'; 3 | import { storiesOf } from '@storybook/react'; 4 | import { boolean, object } from '@storybook/addon-knobs'; 5 | 6 | import Form from './Form'; 7 | 8 | storiesOf('Repository Search/Form', module).add('default', () => ( 9 | 13 | )); 14 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/components/Repositories/Result.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { jsx } from '@emotion/core'; 4 | 5 | import RepositoryList from '../common/RepositoryList'; 6 | import Spinner from '../common/Spinner'; 7 | import { Repository } from '../../services/github/models'; 8 | 9 | export interface RepositoryResultProps { 10 | repositories?: Repository[]; 11 | isLoading?: boolean; 12 | } 13 | 14 | const RepositoryResult: FC = ({ 15 | repositories = [], 16 | isLoading = false, 17 | }) => ( 18 |
19 | {isLoading ? : } 20 |
21 | ); 22 | 23 | export default RepositoryResult; 24 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/components/common/HtmlTitle.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { jsx } from '@emotion/core'; 4 | import { Helmet } from 'react-helmet'; 5 | 6 | const HtmlTitle: FC<{ title: string }> = ({ title = '' }) => 7 | title ? ( 8 | 9 | {title} 10 | 11 | ) : ( 12 |
13 | ); 14 | 15 | export default HtmlTitle; 16 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/components/common/RepositoryList.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from '@emotion/core'; 3 | import { storiesOf } from '@storybook/react'; 4 | import { object } from '@storybook/addon-knobs'; 5 | import camelcaseKeys from 'camelcase-keys'; 6 | 7 | import RepositoryList from './RepositoryList'; 8 | import { Repository } from '../../services/github/models'; 9 | import data from '../../services/github/__mocks__/repositories.json'; 10 | 11 | const repositories = camelcaseKeys(data, { 12 | deep: true, 13 | }) as Repository[]; 14 | 15 | storiesOf('Common/RepositoryList', module).add('with data', () => ( 16 | 17 | )); 18 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/components/common/Spinner.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from '@emotion/core'; 3 | import { storiesOf } from '@storybook/react'; 4 | import { text } from '@storybook/addon-knobs'; 5 | 6 | import Spinner from './Spinner'; 7 | 8 | storiesOf('Common/Spinner', module) 9 | .add('default', () => ) 10 | .add('with custom text', () => ( 11 | 12 | )); 13 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/components/common/Spinner.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { css, jsx } from '@emotion/core'; 4 | import { Dimmer, Loader, Segment } from 'semantic-ui-react'; 5 | 6 | const wrapper = css` 7 | border: none !important; 8 | box-shadow: none !important; 9 | height: 20em; 10 | `; 11 | 12 | const Spinner: FC<{ message?: string }> = ({ message = '読み込み中...' }) => ( 13 | 14 | 15 | {message} 16 | 17 | 18 | ); 19 | 20 | export default Spinner; 21 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/components/common/UserList.story.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from '@emotion/core'; 3 | import { storiesOf } from '@storybook/react'; 4 | import { object } from '@storybook/addon-knobs'; 5 | import camelcaseKeys from 'camelcase-keys'; 6 | 7 | import UserList from './UserList'; 8 | import { User } from '../../services/github/models'; 9 | import data from '../../services/github/__mocks__/users.json'; 10 | 11 | const users = camelcaseKeys(data, { deep: true }) as User[]; 12 | 13 | storiesOf('Common/UserList', module).add('with data', () => ( 14 | 15 | )); 16 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/components/common/UserList.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { jsx } from '@emotion/core'; 4 | import { Card, Image } from 'semantic-ui-react'; 5 | 6 | import { User } from '../../services/github/models'; 7 | 8 | export interface UserListProps { 9 | users: User[]; 10 | } 11 | 12 | const UserList: FC = ({ users = [] }) => ( 13 | 14 | {users.map(user => ( 15 | 16 | 17 | 18 | {user.login} 19 | GitHub ID: {user.id} 20 | 21 | 22 | ))} 23 | 24 | ); 25 | 26 | export default UserList; 27 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/components/common/heading.ts: -------------------------------------------------------------------------------- 1 | import { css } from '@emotion/core'; 2 | 3 | export const menuHeader = css` 4 | margin-bottom: 1.25em; 5 | text-align: center; 6 | `; 7 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/components/common/list.ts: -------------------------------------------------------------------------------- 1 | import { css } from '@emotion/core'; 2 | 3 | export const listItem = css` 4 | padding: 1.35em 0 1em !important; 5 | `; 6 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/components/storyshots.test.ts: -------------------------------------------------------------------------------- 1 | import initStoryshots from '@storybook/addon-storyshots'; 2 | 3 | initStoryshots({}); 4 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/containers/Repositories/Result.tsx: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React, { FC } from 'react'; 3 | import { connect } from 'react-redux'; 4 | import { jsx } from '@emotion/core'; 5 | 6 | import RepositoriesSearch, { 7 | RepositoryResultProps, 8 | } from '../../components/Repositories/Result'; 9 | import { Repository } from '../../services/github/models'; 10 | import { GithubState } from '../../reducer'; 11 | 12 | interface StateProps { 13 | repositories: Repository[]; 14 | isLoading: boolean; 15 | } 16 | 17 | type EnhancedRepositoryResultProps = RepositoryResultProps & StateProps; 18 | 19 | const mapStateToProps = (state: GithubState): StateProps => ({ 20 | repositories: state.repositories, 21 | isLoading: state.isLoading, 22 | }); 23 | 24 | const RepositoryResultContainer: FC = ({ 25 | repositories, 26 | isLoading, 27 | }) => ; 28 | 29 | export default connect(mapStateToProps)(RepositoryResultContainer); 30 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/index.css: -------------------------------------------------------------------------------- 1 | #root { 2 | margin: 2.5em auto 0; 3 | max-width: 930px; 4 | } 5 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/pages.ts: -------------------------------------------------------------------------------- 1 | /* 2 | type PageScheme = 3 | | { 4 | path: string; 5 | title: string; 6 | } 7 | | Pages; 8 | 9 | interface Pages { 10 | [x: string]: PageScheme; 11 | } 12 | */ 13 | 14 | const pages = { 15 | index: { 16 | path: '/', 17 | title: 'GitHub API サンプルアプリ', 18 | }, 19 | companies: { 20 | index: { 21 | path: '/companies', 22 | title: 'いろんな会社のメンバー', 23 | }, 24 | members: { 25 | path: '/:companyName/members', 26 | title: '%s のメンバー', 27 | }, 28 | }, 29 | repositories: { 30 | search: { 31 | path: '/repositories/search', 32 | title: 'リポジトリ検索', 33 | }, 34 | }, 35 | }; 36 | 37 | export default pages; 38 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | // 2 | -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/brand-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/brand-icons.eot -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/brand-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/brand-icons.ttf -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/brand-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/brand-icons.woff -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/brand-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/brand-icons.woff2 -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/icons.eot -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/icons.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/icons.otf -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/icons.ttf -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/icons.woff -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/icons.woff2 -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/outline-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/outline-icons.eot -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/outline-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/outline-icons.ttf -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/outline-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/outline-icons.woff -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/outline-icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/05-e2e-test/02-cypress/src/styles/themes/default/assets/fonts/outline-icons.woff2 -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/src/styles/themes/default/assets/images/flags.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/05-e2e-test/02-cypress/src/styles/themes/default/assets/images/flags.png -------------------------------------------------------------------------------- /05-e2e-test/02-cypress/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "plugins": [{"name": "css-module-types"}], 6 | "allowJs": true, 7 | "skipLibCheck": true, 8 | "esModuleInterop": true, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "incremental": true, 18 | "tsBuildInfoFile": "./buildcache/tsbuildinfo", 19 | "jsx": "preserve", 20 | "outDir": "build", 21 | "rootDirs": ["src"] 22 | }, 23 | "include": ["src"], 24 | "exclude": [ 25 | "node_modules", 26 | "build", 27 | "dist", 28 | "scripts" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ReactOnTheJob 2 | 『りあクト！ TypeScriptで極める現場のReact開発』のサンプルコードページ 3 | -------------------------------------------------------------------------------- /samples/react-otj-sample.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oukayuka/ReactOnTheJob/eb970565bd4b812063ffbf4f70ebb77712438300/samples/react-otj-sample.pdf --------------------------------------------------------------------------------