Merge pull request #4 from npocccties/feat-ltiv1p3

Feat ltiv1p3

.eslintrc.yml

@@ -12,15 +12,18 @@ extends:
   - eslint:recommended
   - plugin:@typescript-eslint/eslint-recommended
   - plugin:@typescript-eslint/recommended
-  - plugin:jsx-a11y/recommended
-  - plugin:react-hooks/recommended
-  - plugin:react/recommended
+  - next
+  - next/core-web-vitals
   - prettier
 rules:
   "@typescript-eslint/explicit-module-boundary-types": "off"
   "@typescript-eslint/no-unused-vars":
     - "error"
     - varsIgnorePattern: "^_"
+      argsIgnorePattern: "^_"
+  "@next/next/no-img-element": "off"
+  import/no-anonymous-default-export: "off"
+  react/display-name: "off"
   react/react-in-jsx-scope: "off"
   filenames/match-exported: error
   tsc/config: [error, { configFile: "tsconfig.json" }]
@@ -42,3 +45,6 @@ overrides:
   - files: [types/**, server/types/**]
     rules:
       filenames/match-exported: [error, camel]
+  - files: [types/defaultTheme.d.ts]
+    rules:
+      "@typescript-eslint/no-empty-interface": "off"

.github/workflows/build.yml

@@ -27,7 +27,7 @@ jobs:
         run: |
           git -c "user.name=bot" -c "user.email=bot@example" commit -a -m "bot: lint:fix"
           git push origin HEAD
-      - uses: ataylorme/eslint-annotate-action@1.1.2
+      - uses: ataylorme/eslint-annotate-action@1.2.0
         with: { repo-token: "${{ github.token }}" }
       - name: format
         run: yarn format

.storybook/main.js

@@ -19,8 +19,21 @@ module.exports = {
           dir
         );
       });
+    // NOTE: https://github.com/mui-org/material-ui/issues/24282 が解決したら取り除いて
+    {
+      const path = resolve(
+        __dirname,
+        "..",
+        "node_modules",
+        "@emotion",
+        "react"
+      );
+      config.resolve.alias["@emotion/core"] = path;
+      config.resolve.alias["emotion-theming"] = path;
+    }
     return config;
   },
   stories: ["../components/**/*.stories.tsx"],
   addons: ["@storybook/addon-a11y", "@storybook/addon-essentials"],
+  core: { builder: "webpack5" },
 };

.storybook/preview.tsx

@@ -1,8 +1,11 @@
 import type { ReactNode } from "react";
 import type { Story } from "@storybook/react";
 import { Provider } from "jotai";
-import MuiThemeProvider from "@material-ui/styles/ThemeProvider";
-import CssBaseline from "@material-ui/core/CssBaseline";
+import {
+  ThemeProvider as MuiThemeProvider,
+  StyledEngineProvider,
+} from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
 import { ConfirmProvider } from "material-ui-confirm";
 import theme from "../theme";
 // NOTE: For VideoJs components.
@@ -11,10 +14,12 @@ import "videojs-seek-buttons/dist/videojs-seek-buttons.css";
 
 function ThemeProvider({ children }: { children: ReactNode }) {
   return (
-    <MuiThemeProvider theme={theme}>
-      <CssBaseline />
-      {children}
-    </MuiThemeProvider>
+    <StyledEngineProvider injectFirst>
+      <MuiThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </MuiThemeProvider>
+    </StyledEngineProvider>
   );
 }
 

ARCHITECTURE.md

@@ -40,7 +40,11 @@ REST API の仕様と権限の宣言、主要なリクエストの処理と制
 
 サーバー起動時の全般的な構成。Fastify インスタンスへのハンドラーの注入。
 
-### server/config/roles.ts ([code](https://github.com/npocccties/chibichilo/blob/master/server/config/roles.ts))
+### server/config/roleUrns.ts ([code](https://github.com/npocccties/chibichilo/blob/master/server/config/roleUrns.ts))
+
+利用者と [LTI v1.3 Roles Claim](https://www.imsglobal.org/spec/lti/v1p3/#roles-claim) との対応関係。権限の制御に利用。
+
+### server/config/roleUrns.ts ([code](https://github.com/npocccties/chibichilo/blob/master/server/config/roleUrns.ts))
 
 利用者と LTI v1.1 ロールの完全修飾 URN との対応関係。権限の制御に利用。
 

INSTALL-en.md

@@ -21,10 +21,10 @@ When changing the information of the connection destination of API, .env must be
 
 ### Prerequisites
 
-As of 2020-06-10, confirm the build in the following environment.
+As of 2021-09-03, confirm the build in the following environment.
 
-- Node.js v14.3.0
-- Yarn 1.22.4
+- Node.js v16.8.0
+- Yarn 1.22.11
 
 ### Build
 
@@ -50,6 +50,16 @@ Customize the logo image which layout in AppBar be able by overwrite the `./publ
 
 Consider the logo image will be resized in a range of width 100px / height 48px with keeping aspect ratio.
 
+### Favicon
+
+Customize the favicon image which layout in tab be able by overwrite the `./public/favicon.ico` .
+
+The sizes are as follows.
+
+- 16px × 16px
+- 32px × 32px
+- 48px × 48px
+
 ### Video player
 
 Some video player has scroll-follow and has been applied height limitation by css.

INSTALL-ja.md

@@ -31,10 +31,10 @@ API の接続先の情報を変更する場合 .env を適宜書き換える必
 
 ### 前提条件
 
-2021-03-09 現在、以下の環境でビルドを確認。
+2021-09-03 現在、以下の環境でビルドを確認。
 
-- Node.js v14.16.0
-- Yarn 1.22.10
+- Node.js v16.8.0
+- Yarn 1.22.11
 
 ### ビルド
 
@@ -78,6 +78,16 @@ yarn build:license
 
 ロゴ画像は最大幅 100px、最大高さ 48px の範囲でアスペクト比を維持してリサイズされます。
 
+### Favicon
+
+tab に表示する favicoon 画像を変更するには`public/favicon.ico` を上書き後、ビルドします。
+
+サイズは下記の通り
+
+- 16px × 16px
+- 32px × 32px
+- 48px × 48px
+
 ### 動画プレイヤー
 
 スクロール追従する動画プレイヤーに高さ制限のスタイルを付与しています。

README.md

@@ -1,5 +1,6 @@
-# CHiBi-CHiLO
+#  GakuNinLMS-LTI-MC
 
 [English](README-en.md) | [日本語](README-ja.md)
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fnpocccties%2Fchibichilo&env=SESSION_SECRET,DATABASE_URL)
+LMSと外部接続する[LTIツールプロバイダー](https://www.imsglobal.org/activity/learning-tools-interoperability) です．
+ビデオを共有・再利用することを目的に開発されました．YoutubeやVimeoなどのインターネット上のビデオを組み合わせ，「ブック」と呼ばれる形式のビデオ教材としてLMSで配信することができます．

components/atoms/AppBarNavButton.stories.tsx

@@ -1,5 +1,5 @@
 import type { Story } from "@storybook/react";
-import MenuBookOutlinedIcon from "@material-ui/icons/MenuBookOutlined";
+import MenuBookOutlinedIcon from "@mui/icons-material/MenuBookOutlined";
 import AppBarNavButton from "./AppBarNavButton";
 
 export default {

components/atoms/AppBarNavButton.tsx

@@ -1,9 +1,9 @@
 import { ComponentProps, ReactNode } from "react";
-import Button from "@material-ui/core/Button";
-import makeStyles from "@material-ui/styles/makeStyles";
+import Button from "@mui/material/Button";
+import makeStyles from "@mui/styles/makeStyles";
 
 const useButtonStyles = makeStyles({
-  label: {
+  root: {
     flexDirection: "column",
     lineHeight: 1.5,
   },

components/atoms/Autocomplete.stories.tsx

@@ -0,0 +1,22 @@
+import type { Story } from "@storybook/react";
+import Autocomplete from "./Autocomplete";
+import TextField from "$atoms/TextField";
+
+export default {
+  title: "atoms/Autocomplete",
+  component: Autocomplete,
+};
+
+const Template: Story<Parameters<typeof Autocomplete>[0]> = (args) => (
+  <Autocomplete {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  options: [
+    {
+      label: "ラベル",
+    },
+  ],
+  renderInput: (params) => <TextField {...params} />,
+};

components/atoms/Autocomplete.tsx

@@ -0,0 +1,11 @@
+import Autocomplete from "@mui/material/Autocomplete";
+import { styled } from "@mui/material/styles";
+
+export default styled(Autocomplete)(({ theme }) => ({
+  "& .MuiOutlinedInput-root": {
+    padding: 0,
+    "& .MuiAutocomplete-input": {
+      padding: theme.spacing(1.25, 1.75),
+    },
+  },
+}));

components/atoms/BackButton.tsx

@@ -1,7 +1,7 @@
 import { ComponentProps } from "react";
-import Button from "@material-ui/core/Button";
-import ArrowBackIcon from "@material-ui/icons/ArrowBack";
-import { makeStyles } from "@material-ui/core/styles";
+import Button from "@mui/material/Button";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import makeStyles from "@mui/styles/makeStyles";
 
 const useStyles = makeStyles((theme) => ({
   icon: {

components/atoms/Button.stories.tsx

@@ -1,10 +1,10 @@
 export default { title: "atoms/Button" };
 
-import Button from "@material-ui/core/Button";
-import { makeStyles } from "@material-ui/core/styles";
-import AddIcon from "@material-ui/icons/Add";
-import LinkIcon from "@material-ui/icons/Link";
-import DragIndicatorIcon from "@material-ui/icons/DragIndicator";
+import Button from "@mui/material/Button";
+import makeStyles from "@mui/styles/makeStyles";
+import AddIcon from "@mui/icons-material/Add";
+import LinkIcon from "@mui/icons-material/Link";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
 
 const useStyles = makeStyles((theme) => ({
   margin: {

components/atoms/CourseChip.tsx

@@ -1,7 +1,7 @@
 import { MouseEvent, useCallback, useState } from "react";
-import Chip from "@material-ui/core/Chip";
-import Popover from "@material-ui/core/Popover";
-import { makeStyles } from "@material-ui/core/styles";
+import Chip from "@mui/material/Chip";
+import Popover from "@mui/material/Popover";
+import makeStyles from "@mui/styles/makeStyles";
 import { LtiResourceLinkSchema } from "$server/models/ltiResourceLink";
 
 const useStyles = makeStyles((theme) => ({

components/atoms/CreatorFilter.tsx

@@ -1,8 +1,8 @@
 import { useCallback } from "react";
-import RadioGroup from "@material-ui/core/RadioGroup";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import Radio from "@material-ui/core/Radio";
-import { makeStyles } from "@material-ui/core/styles";
+import RadioGroup from "@mui/material/RadioGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Radio from "@mui/material/Radio";
+import makeStyles from "@mui/styles/makeStyles";
 import { gray } from "$theme/colors";
 import { Filter } from "$types/filter";
 

components/atoms/DescriptionList.tsx

@@ -1,7 +1,8 @@
 import clsx from "clsx";
-import { makeStyles, createStyles } from "@material-ui/core/styles";
-import type { Theme } from "@material-ui/core/styles";
-import grey from "@material-ui/core/colors/grey";
+import makeStyles from "@mui/styles/makeStyles";
+import createStyles from "@mui/styles/createStyles";
+import type { Theme } from "@mui/material/styles";
+import { grey } from "@mui/material/colors";
 
 type StyleProps = {
   color: string;

components/atoms/EditButton.tsx

@@ -1,4 +1,4 @@
-import EditOutlinedIcon from "@material-ui/icons/EditOutlined";
+import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
 import IconButton from "$atoms/IconButton";
 
 type Props = Omit<Parameters<typeof IconButton>[0], "tooltipProps"> & {