fix: InputLoginScreen, storybook subcomponent and update devdepende…

…ncies (non-major) (minor) (#383)

* chore(deps): update devdependencies (non-major)

* fix: type of some components and ItemLoginScreen

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: spaenleh <spaenleh@gmail.com>

package.json

@@ -101,9 +101,9 @@
     "@mui/lab": "5.0.0-alpha.134",
     "@mui/material": "5.13.6",
     "@rollup/plugin-babel": "5.3.1",
-    "@rollup/plugin-commonjs": "24.0.1",
+    "@rollup/plugin-commonjs": "24.1.0",
     "@rollup/plugin-node-resolve": "13.3.0",
-    "@rollup/plugin-typescript": "11.0.0",
+    "@rollup/plugin-typescript": "11.1.1",
     "@storybook/addon-a11y": "7.0.12",
     "@storybook/addon-actions": "7.0.12",
     "@storybook/addon-coverage": "0.0.8",
@@ -114,19 +114,19 @@
     "@storybook/jest": "0.1.0",
     "@storybook/react": "7.0.12",
     "@storybook/react-webpack5": "7.0.12",
-    "@storybook/test-runner": "0.10.0",
-    "@storybook/testing-library": "0.1.0",
+    "@storybook/test-runner": "0.11.0",
+    "@storybook/testing-library": "0.2.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
     "@trivago/prettier-plugin-sort-imports": "4.1.1",
     "@types/jest": "29.5.1",
     "@types/katex": "0.16.0",
     "@types/lodash.truncate": "4.4.7",
-    "@types/node": "20.2.3",
+    "@types/node": "20.3.2",
     "@types/qs": "6.9.7",
-    "@types/react": "18.0.10",
-    "@types/react-dom": "18.0.5",
+    "@types/react": "18.2.14",
+    "@types/react-dom": "18.2.6",
     "@types/react-router-dom": "5.3.3",
     "@types/react-text-mask": "5.4.11",
     "@types/uuid": "9.0.1",
@@ -156,15 +156,15 @@
     "react-dom": "17.0.2",
     "react-i18next": "11.18.6",
     "react-query": "3.39.3",
-    "react-router-dom": "6.11.2",
+    "react-router-dom": "6.14.0",
     "react-test-renderer": "18.2.0",
     "rimraf": "5.0.1",
     "rollup": "2.79.1",
     "rollup-jest": "2.0.0",
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-scss": "3.0.0",
-    "sass": "1.62.1",
+    "sass": "1.63.6",
     "storybook": "7.0.12",
     "ts-jest": "29.1.0",
     "ts-node": "10.9.1",
@@ -175,7 +175,7 @@
     "dist"
   ],
   "resolutions": {
-    "@types/react": "17.0.62"
+    "@types/react": "18.2.14"
   },
   "packageManager": "yarn@3.6.0"
 }

src/CustomInitialLoader/CustomInitialLoader.stories.tsx

@@ -17,9 +17,7 @@ const meta: Meta<typeof CustomInitialLoader> = {
     },
   ],
   argTypes: {},
-  render: (args) => (
-    <CustomInitialLoader {...args}>{args.children}</CustomInitialLoader>
-  ),
+  render: (args) => <CustomInitialLoader {...args} />,
 };
 
 export default meta;

src/CustomInitialLoader/CustomInitialLoader.tsx

@@ -35,7 +35,7 @@ const StyledLinearProgress = styled(LinearProgress)(({ theme }) => ({
   },
 }));
 
-const CustomInitialLoader: React.FC<CustomInitialLoaderProps> = ({ id }) => {
+const CustomInitialLoader = ({ id }: CustomInitialLoaderProps): JSX.Element => {
   const theme = useTheme();
   return (
     <StyledContainer id={id}>

src/MainMenu/MainMenu.stories.tsx

@@ -13,7 +13,6 @@ import MenuItem from './MenuItem';
 const meta: Meta<typeof MainMenu> = {
   title: 'Common/MainMenu',
   component: MainMenu,
-  subcomponents: { MenuItem },
 
   argTypes: {
     children: {

src/TextEditor/TextEditor.stories.tsx

@@ -16,7 +16,7 @@ const FORMULA =
 const meta: Meta<typeof TextEditor> = {
   title: 'Common/TextEditor',
   component: TextEditor,
-  render: (args) => <TextEditor {...args}>{args.children}</TextEditor>,
+  render: (args) => <TextEditor {...args} />,
 };
 
 export default meta;

src/TextEditor/TextEditor.tsx

@@ -6,7 +6,7 @@ import 'quill-emoji/dist/quill-emoji.css';
 
 import { styled } from '@mui/material';
 
-import React, { FC, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import ReactQuill, { Quill } from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
 
@@ -97,7 +97,7 @@ const Div = styled('div')(
   }),
 );
 
-const TextEditor: FC<TextEditorProps> = ({
+const TextEditor = ({
   cancelButtonId,
   cancelButtonText = 'Cancel',
   edit = false,
@@ -113,7 +113,7 @@ const TextEditor: FC<TextEditorProps> = ({
   showActions = true,
   styles,
   value: initialValue = '',
-}) => {
+}: TextEditorProps): JSX.Element | null => {
   // keep current content
   const [content, setContent] = useState(initialValue ?? '');
 

src/buttons/CopyButton/CopyButton.stories.tsx

@@ -38,7 +38,7 @@ const meta: Meta<typeof CopyButton> = {
       },
     },
   },
-  render: (args) => <CopyButton {...args}>{args.children}</CopyButton>,
+  render: (args) => <CopyButton {...args} />,
 };
 
 export default meta;

src/buttons/CopyButton/CopyButton.tsx

@@ -4,7 +4,7 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import MenuItem from '@mui/material/MenuItem';
 import Tooltip from '@mui/material/Tooltip';
 
-import React, { FC, MouseEventHandler } from 'react';
+import React, { MouseEventHandler } from 'react';
 
 import { ActionButton, ActionButtonVariant } from '../../types';
 
@@ -18,15 +18,15 @@ export type Props = {
   type?: ActionButtonVariant;
 };
 
-const CopyButton: FC<Props> = ({
+const CopyButton = ({
   color = 'default',
   iconClassName,
   id = '',
   menuItemClassName,
   onClick,
   text = 'Copy',
   type = 'icon',
-}) => {
+}: Props): JSX.Element => {
   switch (type) {
     case ActionButton.MENU_ITEM:
       return (

src/itemLogin/ForbiddenContent.stories.tsx

@@ -2,12 +2,10 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { TABLE_CATEGORIES } from '../utils/storybook';
 import ForbiddenContent from './ForbiddenContent';
-import ForbiddenText from './ForbiddenText';
 
 const meta: Meta<typeof ForbiddenContent> = {
   title: 'Common/ForbiddenContent',
   component: ForbiddenContent,
-  subcomponents: { ForbiddenText },
 
   argTypes: {
     id: {

src/itemLogin/ItemLoginScreen.stories.tsx

@@ -6,13 +6,11 @@ import { ItemLoginSchemaType } from '@graasp/sdk';
 
 import { TABLE_CATEGORIES } from '../utils/storybook';
 import ItemLoginScreen from './ItemLoginScreen';
-import MemberIdTextField from './MemberIdTextField';
 import { FORBIDDEN_TEXT } from './constants';
 
 const meta: Meta<typeof ItemLoginScreen> = {
   title: 'Actions/ItemLogin/ItemLoginScreen',
   component: ItemLoginScreen,
-  subcomponents: { MemberIdTextField },
 
   argTypes: {
     memberIdInputId: {

src/itemLogin/ItemLoginScreen.tsx

@@ -1,27 +1,16 @@
 import InfoIcon from '@mui/icons-material/Info';
 import {
   Container,
-  InputBaseComponentProps,
   SelectChangeEvent,
   TextField,
   Tooltip,
   styled,
 } from '@mui/material';
-import FormControl from '@mui/material/FormControl';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
-import OutlinedInput from '@mui/material/OutlinedInput';
 import Select from '@mui/material/Select';
 
-import React, {
-  ElementType,
-  FC,
-  ReactElement,
-  ReactNode,
-  useRef,
-  useState,
-} from 'react';
+import React, { FC, ReactElement, ReactNode, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { ItemLoginSchemaType, UUID } from '@graasp/sdk';
@@ -49,15 +38,9 @@ const WrapperContainer = styled(Container)({
 const StyledTextField = styled(TextField)(({ theme }) => ({
   margin: theme.spacing(1, 0),
 }));
-const StyledOutlinedInput = styled(OutlinedInput)(({ theme }) => ({
+const StyledOutlinedInput = styled(TextField)(({ theme }) => ({
   margin: theme.spacing(1, 0),
 }));
-const MemberIdFormControl = styled(FormControl)({
-  width: '100%',
-});
-const MemberIdInputLabel = styled(InputLabel)(({ theme }) => ({
-  marginLeft: theme.spacing(2),
-}));
 const UsernameAndMemberIdContainer = styled('div')({
   display: 'flex',
   alignItems: 'center',
@@ -165,7 +148,7 @@ const ItemLoginScreen: FC<ItemLoginScreenProps> = ({
       (!username?.length || isMemberIdValid(username));
     const memberIdError =
       signInMode === SETTINGS.ITEM_LOGIN.SIGN_IN_MODE.MEMBER_ID &&
-      !isMemberIdValid(memberId);
+      (!memberId?.length || !isMemberIdValid(memberId));
     const passwordError = withPassword && !password?.length;
     return usernameError || passwordError || memberIdError;
   };
@@ -176,26 +159,28 @@ const ItemLoginScreen: FC<ItemLoginScreenProps> = ({
     }
 
     const error = memberId?.length && !isMemberIdValid(memberId);
-
+    console.log(error, memberId);
     return (
-      <MemberIdFormControl>
-        <MemberIdInputLabel error={Boolean(error)} shrink>
-          {t('Member Id')}
-        </MemberIdInputLabel>
-        <StyledOutlinedInput
-          autoFocus
-          error={Boolean(error)}
-          onChange={onMemberIdChange}
-          label={t('Member Id')}
-          inputComponent={
-            MemberIdTextField as ElementType<InputBaseComponentProps>
-          }
-          color='primary'
-          fullWidth
-          id={memberIdInputId}
-          value={memberId}
-        />
-      </MemberIdFormControl>
+      // <MemberIdFormControl>
+      // {/* <MemberIdInputLabel error={Boolean(error)} shrink>
+      //   {t('Member Id')}
+      // </MemberIdInputLabel> */}
+      <StyledOutlinedInput
+        variant='outlined'
+        autoFocus
+        error={Boolean(error)}
+        onChange={onMemberIdChange}
+        label={t('Member Id')}
+        InputProps={{
+          inputComponent: MemberIdTextField,
+        }}
+        InputLabelProps={{ shrink: true }}
+        color='primary'
+        fullWidth
+        id={memberIdInputId}
+        value={memberId}
+      />
+      // </MemberIdFormControl>
     );
   };
 

src/itemLogin/MemberIdTextField.tsx

@@ -1,11 +1,11 @@
-import React, { FC } from 'react';
+import React, { InputHTMLAttributes } from 'react';
 import MaskedInput from 'react-text-mask';
 
-interface Props {
+type Props = {
   showMask?: boolean;
-}
+} & InputHTMLAttributes<HTMLInputElement>;
 
-const MemberIdTextField: FC<Props> = (props) => {
+const MemberIdTextField = (props: Props): JSX.Element => {
   const { showMask, ...other } = props;
 
   return (
@@ -26,7 +26,7 @@ const MemberIdTextField: FC<Props> = (props) => {
         /[0-9a-f]/,
         /[0-9a-f]/,
         '-',
-        /[0-9a-f]/,
+        /[4]/,
         /[0-9a-f]/,
         /[0-9a-f]/,
         /[0-9a-f]/,
@@ -51,7 +51,7 @@ const MemberIdTextField: FC<Props> = (props) => {
       ]}
       placeholderChar='_'
       showMask={showMask}
-      placeholder=' '
+      placeholder=''
     />
   );
 };