Improve ui components migration

Author: xuesichao

src/components/sdk/LocalVideo/index.tsx

@@ -7,7 +7,6 @@ import styled from 'styled-components';
 import { useApplyVideoObjectFit } from '../../../hooks/useApplyVideoObjectFit';
 import { useAudioVideo } from '../../../providers/AudioVideoProvider';
 import { useLocalVideo } from '../../../providers/LocalVideoProvider';
-import { defaultStyledConfig } from '../../../utils/style';
 import VideoTile from '../../ui/VideoTile';
 import { BaseSdkProps } from '../Base';
 
@@ -16,7 +15,7 @@ interface Props extends BaseSdkProps {
   nameplate?: string;
 }
 
-const StyledLocalVideo = styled<any>(VideoTile).withConfig(defaultStyledConfig)`
+const StyledLocalVideo = styled<any>(VideoTile)`
   ${(props) => (!props.active ? 'display: none' : '')};
 `;
 

src/components/sdk/PreviewVideo/index.tsx

@@ -9,11 +9,10 @@ import { useVideoInputs } from '../../../providers/DevicesProvider';
 import { useLocalVideo } from '../../../providers/LocalVideoProvider';
 import { useLogger } from '../../../providers/LoggerProvider';
 import { useMeetingManager } from '../../../providers/MeetingProvider';
-import { defaultStyledConfig } from '../../../utils/style';
 import VideoTile from '../../ui/VideoTile';
 import { BaseSdkProps } from '../Base';
 
-const StyledPreview = styled(VideoTile).withConfig(defaultStyledConfig)`
+const StyledPreview = styled(VideoTile)`
   height: auto;
   background: unset;
 

src/components/ui/Chat/ChatBubble/EditableChatBubble.stories.tsx

@@ -42,7 +42,7 @@ export const _EditableChatBubble = (args) => {
         senderName={args.senderName}
         content="This messsage has typos that ned to be fixxed."
         showTail={args.showTail}
-        showName={args.boolean}
+        showName={args.showName}
         saveLabel={args.saveLabel}
         cancelLabel={args.cancelLabel}
         css={bubbleStyles}

src/components/ui/ContentTile/index.tsx

@@ -3,12 +3,9 @@
 
 import styled from 'styled-components';
 
-import { createStyledConfig } from '../../../utils/style';
 import { VideoTile } from '../../ui/VideoTile';
 
-export const ContentTile = styled(VideoTile).withConfig(
-  createStyledConfig(['nameplate'])
-)`
+export const ContentTile = styled(VideoTile)`
   background-color: ${({ theme }) => theme.colors.greys.grey80};
 `;
 

src/components/ui/Flex/docs/common.tsx

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { defaultStyledConfig } from '../../../../utils/style';
 import Flex from '..';
 
-export const Child = styled(Flex).withConfig(defaultStyledConfig)`
+export const Child = styled(Flex)`
   background-color: ${(props) => props.theme.colors.primary.lightest};
   color: ${(props) => props.theme.colors.primary.darkest};
   margin: 1vh;
@@ -15,14 +15,14 @@ export const Child = styled(Flex).withConfig(defaultStyledConfig)`
   width: 20vw;
 `;
 
-export const Block = styled(Flex).withConfig(defaultStyledConfig)`
+export const Block = styled(Flex)`
   background-color: ${(props) => props.theme.colors.primary.lightest};
   height: 5vh;
   margin: 1rem;
   border-radius: 4px;
 `;
 
-export const Stack = styled(Flex).withConfig(defaultStyledConfig)`
+export const Stack = styled(Flex)`
   padding: 1rem 20vw;
 `;
 

src/components/ui/Navbar/Styled.tsx

@@ -52,9 +52,7 @@ export const StyledNavbarItem = styled.div.withConfig(defaultStyledConfig)<
   }
 `;
 
-export const StyledNavbar = styled(Flex).withConfig(
-  defaultStyledConfig
-)<NavbarProps>`
+export const StyledNavbar = styled(Flex)<NavbarProps>`
   display: flex;
   flex-direction: column;
   height: 100%;

src/components/ui/Notification/Styled.tsx

@@ -14,12 +14,8 @@ interface StyledNotificationProps extends NotificationProps {
   severity: Severity;
 }
 
-export const StyledCloseIconButton = styled(IconButton).withConfig(
-  defaultStyledConfig
-)``;
-export const StyledNotificationButton = styled(SecondaryButton).withConfig(
-  defaultStyledConfig
-)``;
+export const StyledCloseIconButton = styled(IconButton)``;
+export const StyledNotificationButton = styled(SecondaryButton)``;
 
 export const StyledNotification = styled.div.withConfig(
   defaultStyledConfig

src/components/ui/NotificationGroup/NotificationGroup.stories.tsx

@@ -54,6 +54,7 @@ const AddNotificationButtonGroup = () => {
     message:
       'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.',
     autoClose: true,
+    autoCloseDelay: 2000,
   };
   return (
     <StyledWrapper>

src/components/ui/PopOver/Styled.tsx

@@ -87,9 +87,7 @@ export const StyledPopOverItem = styled.li.withConfig(defaultStyledConfig)`
   }
 `;
 
-export const StyledSubMenu = styled(StyledPopOverItem).withConfig(
-  defaultStyledConfig
-)`
+export const StyledSubMenu = styled(StyledPopOverItem)`
   > span {
     width: 100%;
     height: 100%;

src/components/ui/Radio/Styled.tsx

@@ -43,9 +43,7 @@ export const StyledRadio = styled.div.withConfig(defaultStyledConfig)<any>`
   }
 `;
 
-export const StyledRadioLabel = styled(StyledRadio).withConfig(
-  defaultStyledConfig
-)<any>`
+export const StyledRadioLabel = styled(StyledRadio)<any>`
   display: inline-block;
   height: 1rem;
   position: relative;
@@ -66,9 +64,7 @@ export const StyledRadioLabel = styled(StyledRadio).withConfig(
   }
 `;
 
-export const StyledRadioIcon = styled(StyledRadio).withConfig(
-  defaultStyledConfig
-)<any>`
+export const StyledRadioIcon = styled(StyledRadio)<any>`
   display: flex;
   align-items: center;
   justify-content: center;

src/components/ui/icons/Microphone/Microphone.stories.tsx

@@ -15,12 +15,16 @@ _Microphone.argTypes = {
   width: { control: 'text' },
   poorConnection: { control: 'boolean' },
   muted: { control: 'boolean' },
+  mutedTitle: { control: 'text' },
+  unmutedTitle: { control: 'text' },
 };
 
 _Microphone.args = {
   width: '2rem',
   poorConnection: false,
   muted: false,
+  mutedTitle: 'Muted microphone',
+  unmutedTitle: 'Microphone',
 };
 
 _Microphone.story = {

src/utils/style.ts

@@ -26,12 +26,12 @@ export const absoluteCenter = css`
   transform: translate(-50%, -50%);
 `;
 
-export const isValidCSSHex = (hex: string) => {
+export const isValidCSSHex = (hex: string): boolean => {
   // matches 6 digit characters prefixed with a '#'.
   return /^#[0-9A-F]{6}$/i.test(hex);
 };
 
-export const hexTorgba = (hex: string, alpha: number = 1) => {
+export const hexTorgba = (hex: string, alpha: number = 1): string => {
   if (!isValidCSSHex(hex)) {
     return '';
   }
@@ -52,12 +52,13 @@ export const hexTorgba = (hex: string, alpha: number = 1) => {
  */
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export const createStyledConfig = (additionalProps: string[] = []) => ({
-  shouldForwardProp: (prop: string) =>
-    // Native HTML props is forwarded
-    isPropValid(prop) ||
-    // Allow additional non-HTML/custom props to be forwarded
-    additionalProps.includes(prop),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  shouldForwardProp: (prop: string) => {
+    // Forward custom props
+    if (additionalProps.includes(prop)) return true;
+
+    return isPropValid(prop);
+  },
 });
 
-// Default styled config with no additional props
 export const defaultStyledConfig = createStyledConfig();