Fluent: update source code structure (#5144)

* WIP

* Remove redundant babel config

* Remove unrelated changes

packages/fluent-theme/src/components/dropZone/index.tsx → packages/fluent-theme/src/components/dropZone/DropZone.tsx

@@ -3,9 +3,9 @@ import cx from 'classnames';
 import React, { memo, useCallback, useEffect, useRef, useState, type DragEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
 
-import { AddDocumentIcon } from '../../icons/AddDocumentIcon';
+import { AddDocumentIcon } from '../../icons';
 import testIds from '../../testIds';
-import styles from './index.module.css';
+import styles from './DropZone.module.css';
 import { useStyles } from '../../styles';
 
 const { useLocalizer } = hooks;

packages/fluent-theme/src/components/dropZone/index.ts

@@ -0,0 +1 @@
+export { default as DropZone } from './DropZone';

packages/fluent-theme/src/components/sendbox/AddAttachmentButton.tsx → packages/fluent-theme/src/components/sendBox/AddAttachmentButton.tsx

@@ -1,7 +1,7 @@
 import { hooks } from 'botframework-webchat-component';
 import React, { useCallback, useRef, type ChangeEventHandler, memo } from 'react';
 import { useRefFrom } from 'use-ref-from';
-import { AttachmentIcon } from '../../icons/AttachmentIcon';
+import { AttachmentIcon } from '../../icons';
 import testIds from '../../testIds';
 import { ToolbarButton } from './Toolbar';
 import styles from './AddAttachmentButton.module.css';

packages/fluent-theme/src/components/sendbox/index.tsx → packages/fluent-theme/src/components/sendBox/SendBox.tsx

@@ -2,11 +2,11 @@ import { hooks, type SendBoxFocusOptions } from 'botframework-webchat-component'
 import cx from 'classnames';
 import React, { memo, useCallback, useRef, useState, type FormEventHandler, type MouseEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
-import { SendIcon } from '../../icons/SendIcon';
+import { SendIcon } from '../../icons';
 import testIds from '../../testIds';
-import DropZone from '../DropZone';
-import SuggestedActions from '../SuggestedActions';
-import { TelephoneKeypadSurrogate, useTelephoneKeypadShown, type DTMF } from '../TelephoneKeypad';
+import { DropZone } from '../dropZone';
+import { SuggestedActions } from '../suggestedActions';
+import { TelephoneKeypadSurrogate, useTelephoneKeypadShown, type DTMF } from '../telephoneKeypad';
 import AddAttachmentButton from './AddAttachmentButton';
 import Attachments from './Attachments';
 import ErrorMessage from './ErrorMessage';
@@ -15,7 +15,7 @@ import TextArea from './TextArea';
 import { Toolbar, ToolbarButton, ToolbarSeparator } from './Toolbar';
 import useSubmitError from './private/useSubmitError';
 import useUniqueId from './private/useUniqueId';
-import styles from './index.module.css';
+import styles from './SendBox.module.css';
 import { useStyles } from '../../styles';
 
 const {

packages/fluent-theme/src/components/sendbox/TelephoneKeypadToolbarButton.tsx → packages/fluent-theme/src/components/sendBox/TelephoneKeypadToolbarButton.tsx

@@ -1,9 +1,9 @@
 import React, { memo, useCallback } from 'react';
 
 import { hooks } from 'botframework-webchat-component';
-import { TelephoneKeypadIcon } from '../../icons/TelephoneKeypad';
+import { TelephoneKeypadIcon } from '../../icons';
 import testIds from '../../testIds';
-import { useTelephoneKeypadShown } from '../TelephoneKeypad';
+import { useTelephoneKeypadShown } from '../telephoneKeypad';
 import { ToolbarButton } from './Toolbar';
 
 const { useLocalizer } = hooks;

packages/fluent-theme/src/components/sendBox/index.tsx

@@ -0,0 +1 @@
+export { default as SendBox } from './SendBox';

packages/fluent-theme/src/components/suggestedActions/index.tsx → packages/fluent-theme/src/components/suggestedActions/SuggestedActions.tsx

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import React, { memo, type ReactNode } from 'react';
 import SuggestedAction from './SuggestedAction';
 import computeSuggestedActionText from './private/computeSuggestedActionText';
-import styles from './index.module.css';
+import styles from './SuggestedActions.module.css';
 import { useStyles } from '../../styles';
 
 const { useLocalizer, useStyleOptions, useStyleSet, useSuggestedActions } = hooks;

packages/fluent-theme/src/components/suggestedActions/index.ts

@@ -0,0 +1 @@
+export { default as SuggestedActions } from './SuggestedActions';

packages/fluent-theme/src/components/telephoneKeypad/Surrogate.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 
-import type { PropsOf } from '../../types/PropsOf';
+import type { PropsOf } from '../../types';
 import TelephoneKeypad from './private/TelephoneKeypad';
 import useShown from './useShown';
 

packages/fluent-theme/src/components/telephoneKeypad/private/TelephoneKeypad.tsx

@@ -5,12 +5,12 @@ import { useRefFrom } from 'use-ref-from';
 
 import Button from './Button';
 // import HorizontalDialPadController from './HorizontalDialPadController';
-import InfoSmallIcon from '../../../icons/InfoSmallIcon';
-import { useStyles } from '../../../styles';
 import testIds from '../../../testIds';
 import { type DTMF } from '../types';
 import useShown from '../useShown';
 import styles from './TelephoneKeypad.module.css';
+import { useStyles } from '../../../styles';
+import { InfoSmallIcon } from '../../../icons';
 
 const { LocalizedString } = Components;
 

packages/fluent-theme/src/components/Theme.tsx → packages/fluent-theme/src/components/theme/Theme.tsx

@@ -1,7 +1,7 @@
 import React, { type ReactNode } from 'react';
 import cx from 'classnames';
 import styles from './Theme.module.css';
-import { useStyles } from '../styles';
+import { useStyles } from '../../styles';
 
 export const rootClassName = 'webchat-fluent';
 

packages/fluent-theme/src/components/theme/index.ts

@@ -0,0 +1 @@
+export { default as WebChatTheme } from './Theme';

packages/fluent-theme/src/icons/AddDocumentIcon.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { memo } from 'react';
 
-export function AddDocumentIcon(props: Readonly<{ readonly className?: string }>) {
+function AddDocumentIcon(props: Readonly<{ readonly className?: string }>) {
   return (
     <svg
       aria-hidden="true"
@@ -17,3 +17,5 @@ export function AddDocumentIcon(props: Readonly<{ readonly className?: string }>
     </svg>
   );
 }
+
+export default memo(AddDocumentIcon);

packages/fluent-theme/src/icons/AttachmentIcon.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { memo } from 'react';
 
-export function AttachmentIcon(props: Readonly<{ readonly className?: string }>) {
+function AttachmentIcon(props: Readonly<{ readonly className?: string }>) {
   return (
     <svg
       aria-hidden="true"
@@ -17,3 +17,5 @@ export function AttachmentIcon(props: Readonly<{ readonly className?: string }>)
     </svg>
   );
 }
+
+export default memo(AttachmentIcon);

packages/fluent-theme/src/icons/InfoSmallIcon.tsx

@@ -1,17 +1,21 @@
 import React, { memo } from 'react';
 
-export default memo((props: Readonly<{ readonly className?: string }>) => (
-  <svg
-    aria-hidden="true"
-    className={props.className}
-    height="1em"
-    viewBox="0 0 16 16"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M8.5 7.5a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3Zm.25-2a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"
-      fill="currentColor"
-    />
-  </svg>
-));
+function InfoSmallIcon(props: Readonly<{ readonly className?: string }>) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={props.className}
+      height="1em"
+      viewBox="0 0 16 16"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.5 7.5a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3Zm.25-2a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default memo(InfoSmallIcon);

packages/fluent-theme/src/icons/SendIcon.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { memo } from 'react';
 
-export function SendIcon(props: Readonly<{ readonly className?: string }>) {
+function SendIcon(props: Readonly<{ readonly className?: string }>) {
   return (
     <svg
       aria-hidden="true"
@@ -17,3 +17,5 @@ export function SendIcon(props: Readonly<{ readonly className?: string }>) {
     </svg>
   );
 }
+
+export default memo(SendIcon);

packages/fluent-theme/src/icons/TelephoneKeypad.tsx → packages/fluent-theme/src/icons/TelephoneKeypadIcon.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { memo } from 'react';
 
-export function TelephoneKeypadIcon(props: Readonly<{ readonly className?: string }>) {
+function TelephoneKeypadIcon(props: Readonly<{ readonly className?: string }>) {
   return (
     <svg
       aria-hidden="true"
@@ -17,3 +17,5 @@ export function TelephoneKeypadIcon(props: Readonly<{ readonly className?: strin
     </svg>
   );
 }
+
+export default memo(TelephoneKeypadIcon);

packages/fluent-theme/src/icons/index.ts

@@ -0,0 +1,5 @@
+export { default as AddDocumentIcon } from './AddDocumentIcon';
+export { default as AttachmentIcon } from './AttachmentIcon';
+export { default as InfoSmallIcon } from './InfoSmallIcon';
+export { default as SendIcon } from './SendIcon';
+export { default as TelephoneKeypadIcon } from './TelephoneKeypadIcon';

packages/fluent-theme/src/private/FluentThemeProvider.tsx

@@ -1,9 +1,9 @@
 import { Components } from 'botframework-webchat-component';
 import React, { memo, type ReactNode } from 'react';
 
-import { TelephoneKeypadProvider } from '../components/TelephoneKeypad';
-import WebChatTheme from '../components/Theme';
-import SendBox from '../components/SendBox';
+import { TelephoneKeypadProvider } from '../components/telephoneKeypad';
+import { WebChatTheme } from '../components/theme';
+import { SendBox } from '../components/sendBox';
 
 const { ThemeProvider } = Components;
 

packages/fluent-theme/src/styles/index.ts

@@ -0,0 +1,4 @@
+import injectStyle from './injectStyle';
+import useStyles from './useStyles';
+
+export { injectStyle, useStyles };

packages/fluent-theme/src/types/index.ts

@@ -0,0 +1 @@
+export * from './PropsOf';