ライブラリのアップデート

npocccties · Feb 5, 2025 · 1b995f7 · 1b995f7
1 parent aa24f98
commit 1b995f7
Show file tree

Hide file tree

Showing 14 changed files with 6,276 additions and 5,526 deletions.
diff --git a/components/atoms/Emoji.tsx b/components/atoms/Emoji.tsx
@@ -20,7 +20,6 @@ export default function Emoji({ emoji }: Props) {
     <span
       className={emojiClass}
       dangerouslySetInnerHTML={{
-        // @ts-expect-error twemojiの型定義が間違っている
         __html: twemoji.parse(emoji),
       }}
     />

diff --git a/components/atoms/TreeItem.stories.tsx b/components/atoms/TreeItem.stories.tsx
diff --git a/components/atoms/TreeItem.tsx b/components/atoms/TreeItem.tsx
diff --git a/components/molecules/DraggableSections.tsx b/components/molecules/DraggableSections.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck TODO: react-beautiful-dndの型定義がReact18系に対応していないため別途対応する
 import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
 import type { DraggableId, DropResult } from "react-beautiful-dnd";
 import clsx from "clsx";

diff --git a/components/molecules/SectionsTree.stories.tsx b/components/molecules/SectionsTree.stories.tsx
@@ -1,6 +1,7 @@
 import type { Story } from "@storybook/react";
 import SectionsTree from "./SectionsTree";
-import TreeView from "@mui/lab/TreeView";
+import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
+
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import { sections } from "$samples";
@@ -21,15 +22,17 @@ const Template: Story<Parameters<typeof SectionsTree>[0] & ArgTypes> = ({
   ...args
 }) => {
   return (
-    <TreeView
-      defaultCollapseIcon={<ExpandMoreIcon />}
-      defaultExpandIcon={<ChevronRightIcon />}
+    <SimpleTreeView
+      slots={{
+        collapseIcon: ChevronRightIcon,
+        expandIcon: ExpandMoreIcon,
+      }}
     >
       <SectionsTree
         {...args}
         onTreeChange={selectable ? onTreeChange : undefined}
       />
-    </TreeView>
+    </SimpleTreeView>
   );
 };
 

diff --git a/components/molecules/SectionsTree.tsx b/components/molecules/SectionsTree.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode, MouseEvent } from "react";
-import TreeItem from "@mui/lab/TreeItem";
+import { TreeItem } from "@mui/x-tree-view/TreeItem";
 import Checkbox from "@mui/material/Checkbox";
 import makeStyles from "@mui/styles/makeStyles";
 import PreviewButton from "$atoms/PreviewButton";
@@ -44,7 +44,7 @@ function SectionTree({
   if (!isNamedSection(section)) return <>{children}</>;
   return (
     <TreeItem
-      nodeId={nodeId}
+      itemId={nodeId}
       classes={treeItemClasses}
       label={
         <>
@@ -118,7 +118,7 @@ export default function SectionsTree(props: Props) {
             return (
               <TreeItem
                 key={nodeId}
-                nodeId={nodeId}
+                itemId={nodeId}
                 classes={treeItemClasses}
                 label={
                   <>

diff --git a/components/organisms/BookTree.stories.tsx b/components/organisms/BookTree.stories.tsx
@@ -1,6 +1,6 @@
 import type { Story } from "@storybook/react";
 import BookTree from "./BookTree";
-import TreeView from "@mui/lab/TreeView";
+import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import { book } from "$samples";
@@ -12,12 +12,14 @@ export default {
 
 const Template: Story<Parameters<typeof BookTree>[0]> = (args) => {
   return (
-    <TreeView
-      defaultCollapseIcon={<ExpandMoreIcon />}
-      defaultExpandIcon={<ChevronRightIcon />}
+    <SimpleTreeView
+      slots={{
+        collapseIcon: ChevronRightIcon,
+        expandIcon: ExpandMoreIcon,
+      }}
     >
       <BookTree {...args} />
-    </TreeView>
+    </SimpleTreeView>
   );
 };
 

diff --git a/components/organisms/BookTree.tsx b/components/organisms/BookTree.tsx
@@ -1,4 +1,4 @@
-import TreeItem from "@mui/lab/TreeItem";
+import { TreeItem } from "@mui/x-tree-view/TreeItem";
 import makeStyles from "@mui/styles/makeStyles";
 import PreviewButton from "$atoms/PreviewButton";
 import EditButton from "$atoms/EditButton";
@@ -60,7 +60,7 @@ export default function BookTree(props: Props) {
   */
   return (
     <TreeItem
-      nodeId={nodeId}
+      itemId={nodeId}
       classes={treeItemClasses}
       label={
         <>

diff --git a/components/organisms/CourseTree.stories.tsx b/components/organisms/CourseTree.stories.tsx
@@ -1,6 +1,6 @@
 import type { Story } from "@storybook/react";
 import CourseTree from "./CourseTree";
-import TreeView from "@mui/lab/TreeView";
+import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import { ltiResourceLink, book } from "$samples";
@@ -12,12 +12,14 @@ export default {
 
 const Template: Story<Parameters<typeof CourseTree>[0]> = (args) => {
   return (
-    <TreeView
-      defaultCollapseIcon={<ExpandMoreIcon />}
-      defaultExpandIcon={<ChevronRightIcon />}
+    <SimpleTreeView
+      slots={{
+        collapseIcon: ChevronRightIcon,
+        expandIcon: ExpandMoreIcon,
+      }}
     >
       <CourseTree {...args} />
-    </TreeView>
+    </SimpleTreeView>
   );
 };
 

diff --git a/components/organisms/CourseTree.tsx b/components/organisms/CourseTree.tsx
@@ -1,5 +1,6 @@
 import type { Dispatch, SetStateAction } from "react";
-import TreeItem from "@mui/lab/TreeItem";
+import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
+import { TreeItem } from "@mui/x-tree-view/TreeItem";
 import Checkbox from "@mui/material/Checkbox";
 import PreviewButton from "$atoms/PreviewButton";
 import EditButton from "$atoms/EditButton";
@@ -13,7 +14,6 @@ import { useSessionAtom } from "$store/session";
 import { isDisplayableBook } from "$utils/displayableBook";
 import getLocaleDateTimeString from "$utils/getLocaleDateTimeString";
 import Accordion from "./Accordion";
-import TreeView from "@mui/lab/TreeView";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import { Box } from "@mui/material";
@@ -69,14 +69,16 @@ function LinksTree({
           .join(":");
 
         return (
-          <TreeView
+          <SimpleTreeView
             key={nodeId}
-            defaultExpanded={[nodeId]}
-            defaultCollapseIcon={<ExpandMoreIcon />}
-            defaultExpandIcon={<ChevronRightIcon />}
+            defaultExpandedItems={[nodeId]}
+            slots={{
+              expandIcon: ExpandMoreIcon,
+              collapseIcon: ChevronRightIcon,
+            }}
           >
             <TreeItem
-              nodeId={nodeId}
+              itemId={nodeId}
               onClick={(event) => {
                 event.stopPropagation();
                 (
@@ -169,7 +171,7 @@ function LinksTree({
                 </>
               }
             />
-          </TreeView>
+          </SimpleTreeView>
         );
       })}
     </>

diff --git a/components/organisms/SectionsEdit.tsx b/components/organisms/SectionsEdit.tsx
@@ -2,7 +2,7 @@ import clsx from "clsx";
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import Divider from "@mui/material/Divider";
-import TreeView from "@mui/lab/TreeView";
+import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
 import Alert from "@mui/material/Alert";
 import Switch from "@mui/material/Switch";
 import FormControlLabel from "@mui/material/FormControlLabel";
@@ -199,9 +199,11 @@ export default function SectionsEdit(props: Props) {
         </p>
       )}
       {!sortable && sections.length > 0 && (
-        <TreeView
-          defaultCollapseIcon={<ExpandMoreIcon />}
-          defaultExpandIcon={<ChevronRightIcon />}
+        <SimpleTreeView
+          slots={{
+            expandIcon: ChevronRightIcon,
+            collapseIcon: ExpandMoreIcon,
+          }}
           disableSelection
         >
           <SectionsTree
@@ -210,7 +212,7 @@ export default function SectionsEdit(props: Props) {
             onItemEditClick={handleItem(onTopicEditClick)}
             isContentEditable={isContentEditable}
           />
-        </TreeView>
+        </SimpleTreeView>
       )}
     </Card>
   );

diff --git a/components/templates/BookImport.tsx b/components/templates/BookImport.tsx
@@ -4,7 +4,7 @@ import Skeleton from "@mui/material/Skeleton";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
-import TreeView from "@mui/lab/TreeView";
+import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import TopicPreviewDialog from "$organisms/TopicPreviewDialog";
@@ -126,9 +126,11 @@ export default function BookImport(props: Props) {
       </ActionHeader>
       <FilterColumn sx={{ gridArea: "side" }} variant="book" />
       <Box gridArea="items">
-        <TreeView
-          defaultCollapseIcon={<ExpandMoreIcon />}
-          defaultExpandIcon={<ChevronRightIcon />}
+        <SimpleTreeView
+          slots={{
+            expandIcon: ChevronRightIcon,
+            collapseIcon: ExpandMoreIcon,
+          }}
         >
           {contents.map((content) => {
             if (content.type !== "book") return null;
@@ -152,7 +154,7 @@ export default function BookImport(props: Props) {
               />
             );
           })}
-        </TreeView>
+        </SimpleTreeView>
         {loading &&
           [...Array(5)].map((_, i) => <Skeleton key={i} height={40} />)}
       </Box>

diff --git a/package.json b/package.json
@@ -18,16 +18,17 @@
     "@meikidd/videojs-hlsjs-plugin": "^1.0.18",
     "@mui/base": "^5.0.0-beta.20",
     "@mui/icons-material": "^5.14.7",
-    "@mui/lab": "^5.0.0-alpha.142",
     "@mui/material": "^5.14.7",
     "@mui/styles": "^5.14.7",
     "@mui/x-date-pickers": "^6.12.1",
+    "@mui/x-tree-view": "^7.25.0",
     "@openapitools/openapi-generator-cli": "^2.7.0",
     "@rooks/use-previous": "^4.11.2",
     "@storybook/addon-a11y": "^7.4.0",
     "@storybook/addon-essentials": "^7.4.0",
     "@storybook/nextjs": "^7.4.0",
     "@storybook/react": "^7.4.0",
+    "@twemoji/api": "^15.1.0",
     "@types/events": "^3.0.0",
     "@types/flat": "^5.0.2",
     "@types/hh-mm-ss": "^1.2.1",
@@ -38,6 +39,7 @@
     "@types/node": "^20.5.9",
     "@types/react": "^18.2.21",
     "@types/react-beautiful-dnd": "^13.1.4",
+    "@types/react-dom": "^18.2.21",
     "@types/vimeo__player": "^2.18.0",
     "@typescript-eslint/eslint-plugin": "^6.6.0",
     "@typescript-eslint/parser": "^6.6.0",
@@ -70,10 +72,10 @@
     "outdent": "^0.8.0",
     "pathpida": "^0.22.0",
     "prettier": "^3.0.3",
-    "react": "^18.2.0",
+    "react": "^18.2.21",
     "react-beautiful-dnd": "^13.1.1",
     "react-d3-cloud": "^1.0.6",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.2.21",
     "react-hook-form": "^7.46.1",
     "react-infinite-scroll-hook": "^4.1.1",
     "react-markdown": "^8.0.7",
@@ -122,8 +124,5 @@
   },
   "engines": {
     "node": "^18.12.0 || ^20.0.0 || ^22.13.1"
-  },
-  "dependencies": {
-    "@twemoji/api": "^15.0.3"
   }
 }