update package

.devcontainer/Dockerfile

@@ -0,0 +1,15 @@
+FROM node:21-slim
+
+ARG USERNAME=vscode
+ARG USER_UID=1100
+ARG USER_GID=$USER_UID
+
+RUN apt-get update \
+  && groupadd --gid $USER_GID $USERNAME \
+  && useradd -s /bin/bash --uid $USER_UID --gid $USER_GID -m $USERNAME \
+  && apt-get install -y sudo \
+  && echo $USERNAME ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME \
+  && chmod 0440 /etc/sudoers.d/$USERNAME
+
+RUN apt-get -y install curl git
+RUN npm install -g npm

.devcontainer/devcontainer.json

@@ -0,0 +1,24 @@
+{
+  "name": "docker-playground - node",
+  "dockerComposeFile": "docker-compose.yml",
+  "service": "rijtwi",
+  "workspaceFolder": "/workspace",
+  // Configure tool-specific properties.
+  "customizations": {
+    // Configure properties specific to VS Code.
+    "vscode": {
+      // Add the IDs of extensions you want installed when the container is created.
+      "extensions": [
+        "EditorConfig.EditorConfig",
+        "dbaeumer.vscode-eslint",
+        "stylelint.vscode-stylelint"
+      ]
+    }
+  },
+  // node_modulesをボリューム内のみに保存
+  "mounts": [
+    "source=try-node-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume"
+  ],
+  "postCreateCommand": "sudo chown vscode node_modules",
+  "remoteUser": "vscode"
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,11 @@
+version: '3'
+services:
+  rijtwi:
+    build: .
+    restart: always
+    working_dir: '/workspace'
+    tty: true
+    volumes:
+      - type: bind
+        source: ../
+        target: /workspace

eslint.config.mjs

@@ -0,0 +1,60 @@
+import { FlatCompat } from '@eslint/eslintrc';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import html from 'eslint-plugin-html';
+import js from '@eslint/js';
+import typeScriptESLint from '@typescript-eslint/eslint-plugin';
+import typeScriptESLintParser from '@typescript-eslint/parser';
+import globals from 'globals';
+
+const compat = new FlatCompat();
+
+export default [
+  {
+    ignores: ['**/node_modules/**', '**/build/**', 'webpack.config.ts', '*.mjs'],
+  },
+  js.configs.recommended,
+  eslintConfigPrettier,
+  ...compat.extends('plugin:@typescript-eslint/eslint-recommended', 'plugin:prettier/recommended', 'plugin:react/recommended', 'prettier'),
+  {
+    plugins: {
+      typeScriptESLint,
+      html,
+    },
+    languageOptions: {
+      globals: {
+        Atomics: 'readonly',
+        SharedArrayBuffer: 'readonly',
+        ...globals.browser,
+      },
+      parser: typeScriptESLintParser,
+      parserOptions: {
+        sourceType: 'module',
+        project: './tsconfig.json',
+        ecmaVersion: 2015,
+      },
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      'no-console': 'off',
+      'no-debugger': 'error',
+      'node/no-deprecated-api': 'off',
+      'node/no-unpublished-import': 'off',
+      'node/no-unpublished-require': 'off',
+      'node/no-unsupported-features/es-syntax': 'off',
+      'no-process-exit': 'off',
+      'node/no-missing-import': 'off',
+      'no-unused-vars': 'off',
+      'prettier/prettier': [
+        'error',
+        {
+          'singleQuote': true,
+          'printWidth': 180,
+        }
+      ],
+    },
+  },
+];

js/components/molecules/Modal/index.tsx

@@ -28,7 +28,7 @@ type ActionProps = {
 
 type PropsType = ComponentProps & ActionProps;
 
-const Modal: React.SFC<PropsType> = (props) => {
+const Modal: React.FC<PropsType> = (props) => {
   const classes = useStyles();
   const handleClose = () => {
     if (props.modalClose) props.modalClose();

js/components/molecules/SnackBar/index.tsx

@@ -69,7 +69,7 @@ export type CustomeProps = {
 };
 
 type PropsType = ReturnType<typeof mapStateToProps>;
-const CustomizedSnackbars: React.SFC<CustomeProps> = (props: CustomeProps & PropsType) => {
+const CustomizedSnackbars: React.FC<CustomeProps> = (props: CustomeProps & PropsType) => {
   const classes = innerStyle(props.theme);
   const Icon = variantIcon[props.variant];
 

js/components/molecules/Tweet/index.tsx

@@ -43,7 +43,7 @@ type ActionProps = {
 };
 
 type PropsType = ComponentProps & ActionProps;
-const Tweet: React.SFC<PropsType> = (props: PropsType) => {
+const Tweet: React.FC<PropsType> = (props: PropsType) => {
   const classes = useStyles();
 
   const handleReplyButton = (id: string) => () => {

js/components/molecules/TweetList/index.tsx

@@ -40,7 +40,7 @@ export type ActionProps = {
 
 type PropsType = ComponentProps & ActionProps;
 
-const TweetList: React.SFC<PropsType> = (props) => {
+const TweetList: React.FC<PropsType> = (props) => {
   const classes = useStyles();
 
   const label = {

js/components/organisms/Dialog/index.tsx

@@ -57,7 +57,7 @@ type ComponentProps = ReturnType<typeof mapStateToProps>;
 type ActionProps = typeof mapDispatchToProps;
 
 type PropsType = ComponentProps & ActionProps;
-const App: React.SFC<PropsType> = (props: PropsType) => {
+const App: React.FC<PropsType> = (props: PropsType) => {
   const classes = useStyles(props.theme);
 
   const label = {

js/components/organisms/NavTabs/index.tsx

@@ -17,6 +17,7 @@ const useStyles = makeStyles({
 });
 
 type ComponentProps = {
+  children: React.ReactNode;
   style: {
     top?: number;
     bottom?: number;
@@ -27,7 +28,7 @@ type ComponentProps = {
   }[];
 };
 
-const NavTabs: React.SFC<ComponentProps & React.Props<{}>> = (props) => {
+const NavTabs: React.FC<ComponentProps> = (props) => {
   const classes = useStyles();
   const [tabIndex, setTabIndex] = React.useState(0);
 

js/components/organisms/OtherInfo/index.tsx

@@ -22,15 +22,15 @@ type ActionProps = typeof mapDispatchToProps;
 
 type PropsType = ComponentProps & ActionProps;
 
-export const OtherInfo: React.SFC<PropsType> = (props) => {
+export const OtherInfo: React.FC<PropsType> = (props) => {
   const classes = useStyles();
   return (
     <div className={classes.root}>
       <List>
         {props.linkList.map((link, index) => {
           return (
             <div key={index}>
-              <ListItem button onClick={() => window.open(link.url)}>
+              <ListItem onClick={() => window.open(link.url)}>
                 <ListItemIcon>
                   <img src={link.iconUrl} height={30} />
                 </ListItemIcon>

js/components/organisms/Setting/index.tsx

@@ -25,7 +25,7 @@ type ComponentProps = ReturnType<typeof mapStateToProps>;
 type ActionProps = typeof mapDispatchToProps;
 
 type PropsType = ComponentProps & ActionProps;
-const TweetForm: React.SFC<PropsType> = (props: PropsType) => {
+const TweetForm: React.FC<PropsType> = (props: PropsType) => {
   const classes = useStyles();
   const lightTheme = customTheme('light');
   const darkTheme = customTheme('dark');