[HIGH] Incorporated PR comments of 4846 (#4857)

* Rename to OrgSchema from SchemaOrg

* Rename to OrgSchema

* Remove unnecessary handleXXX

* Remove unnecessary typings

* Remove unnecessary undefined

* Remove commented CSS

* Remove unnecessary handleXXX

* Add CSSTokens and rename to CSS custom properties

* Rename to CSSTokens and CSS custom properties

* Type out useStyleSet

* Add entry

* Freeze arrays

* Typo

* Remove as const

* Move typecasting outside

Author: compulim

CHANGELOG.md

@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Resolves [#4840](https://github.com/microsoft/BotFramework-WebChat/issues/4840). Added feedback buttons in activity status, by [@compulim](https://github.com/compulim), in PR [#4846](https://github.com/microsoft/BotFramework-WebChat/pull/4846)
 -  Resolves [#4841](https://github.com/microsoft/BotFramework-WebChat/issues/4841). Added link definitions UI in Markdown, by [@compulim](https://github.com/compulim), in PR [#4846](https://github.com/microsoft/BotFramework-WebChat/pull/4846)
 -  Resolves [#4842](https://github.com/microsoft/BotFramework-WebChat/issues/4842). Added provenance in activity status, by [@compulim](https://github.com/compulim), in PR [#4846](https://github.com/microsoft/BotFramework-WebChat/pull/4846)
+-  Resolves [#4856](https://github.com/microsoft/BotFramework-WebChat/issues/4856). Added types for `useStyleSet`, by [@compulim](https://github.com/compulim), in PR [#4857](https://github.com/microsoft/BotFramework-WebChat/pull/4857)
 
 ## [4.15.9] - 2023-08-25
 

packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardRenderer.tsx

@@ -25,10 +25,11 @@ import useAdaptiveCardsPackage from '../hooks/useAdaptiveCardsPackage';
 import useDisabledModEffect from './AdaptiveCardHacks/useDisabledModEffect';
 import usePersistValuesModEffect from './AdaptiveCardHacks/usePersistValuesModEffect';
 import useRoleModEffect from './AdaptiveCardHacks/useRoleModEffect';
+import useStyleSet from '../../hooks/useStyleSet';
 import useValueRef from './AdaptiveCardHacks/private/useValueRef';
 
 const { ErrorBox } = Components;
-const { useDisabled, useLocalizer, usePerformCardAction, useRenderMarkdownAsHTML, useScrollToEnd, useStyleSet } = hooks;
+const { useDisabled, useLocalizer, usePerformCardAction, useRenderMarkdownAsHTML, useScrollToEnd } = hooks;
 
 const node_env = process.env.node_env || process.env.NODE_ENV;
 

packages/bundle/src/adaptiveCards/Attachment/AnimationCardContent.tsx

@@ -1,14 +1,14 @@
 /* eslint react/no-array-index-key: "off" */
 
-import { Components, hooks } from 'botframework-webchat-component';
+import { Components } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
 import React, { FC } from 'react';
 import type { DirectLineAnimationCard } from 'botframework-webchat-core';
 
 import CommonCard from './CommonCard';
+import useStyleSet from '../../hooks/useStyleSet';
 
 const { ImageContent, VideoContent } = Components;
-const { useStyleSet } = hooks;
 
 type AnimationCardContentProps = {
   actionPerformedClassName?: string;

packages/bundle/src/adaptiveCards/Attachment/AudioCardContent.tsx

@@ -1,14 +1,14 @@
 /* eslint react/no-array-index-key: "off" */
 
-import { Components, hooks } from 'botframework-webchat-component';
+import { Components } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
 import React, { FC } from 'react';
 import type { DirectLineAudioCard } from 'botframework-webchat-core';
 
 import CommonCard from './CommonCard';
+import useStyleSet from '../../hooks/useStyleSet';
 
 const { AudioContent } = Components;
-const { useStyleSet } = hooks;
 
 type AudioCardContentProps = {
   actionPerformedClassName?: string;

packages/bundle/src/adaptiveCards/Attachment/SignInCardContent.tsx

@@ -1,11 +1,9 @@
-import { hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
 import React, { FC } from 'react';
 import type { DirectLineSignInCard } from 'botframework-webchat-core';
 
 import CommonCard from './CommonCard';
-
-const { useStyleSet } = hooks;
+import useStyleSet from '../../hooks/useStyleSet';
 
 type SignInCardContentProps = {
   actionPerformedClassName?: string;

packages/bundle/src/adaptiveCards/Attachment/VideoCardContent.tsx

@@ -1,13 +1,13 @@
 /* eslint react/no-array-index-key: "off" */
 
-import { Components, hooks } from 'botframework-webchat-component';
+import { Components } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
 import React, { FC } from 'react';
 import type { DirectLineVideoCard } from 'botframework-webchat-core';
 
 import CommonCard from './CommonCard';
+import useStyleSet from '../../hooks/useStyleSet';
 
-const { useStyleSet } = hooks;
 const { VideoContent } = Components;
 
 type VideoCardContentProps = {

packages/bundle/src/hooks/useStyleSet.ts

@@ -0,0 +1,13 @@
+import { hooks } from 'botframework-webchat-component';
+
+import type AdaptiveCardsStyleSet from '../adaptiveCards/AdaptiveCardsStyleSet';
+
+const useMinimalStyleSet = hooks.useStyleSet;
+
+type MinimalStyleSet = ReturnType<typeof useMinimalStyleSet>[0];
+
+export default function useStyleSet(): readonly [MinimalStyleSet & AdaptiveCardsStyleSet] {
+  const [styleOptions] = useMinimalStyleSet();
+
+  return Object.freeze([styleOptions as MinimalStyleSet & AdaptiveCardsStyleSet] as const);
+}

packages/bundle/src/index.ts

@@ -28,6 +28,7 @@ import ThumbnailCardContent from './adaptiveCards/Attachment/ThumbnailCardConten
 import useAdaptiveCardsHostConfig from './adaptiveCards/hooks/useAdaptiveCardsHostConfig';
 import useAdaptiveCardsPackage from './adaptiveCards/hooks/useAdaptiveCardsPackage';
 import useStyleOptions from './hooks/useStyleOptions';
+import useStyleSet from './hooks/useStyleSet';
 import VideoCardContent from './adaptiveCards/Attachment/VideoCardContent';
 
 const renderWebChat = coreRenderWebChat.bind(null, ReactWebChat);
@@ -56,7 +57,8 @@ const patchedHooks = {
   ...hooks,
   useAdaptiveCardsHostConfig,
   useAdaptiveCardsPackage,
-  useStyleOptions
+  useStyleOptions,
+  useStyleSet
 };
 
 const AdditionalComponents = {

packages/component/src/ActivityStatus/OthersActivityStatus.tsx

@@ -2,9 +2,9 @@ import { type WebChatActivity } from 'botframework-webchat-core';
 import classNames from 'classnames';
 import React, { memo, type ReactNode, useMemo } from 'react';
 
-import { isReplyAction, type ReplyAction } from '../types/external/SchemaOrg/ReplyAction';
-import { isThing, type Thing } from '../types/external/SchemaOrg/Thing';
-import { isVoteAction, type VoteAction } from '../types/external/SchemaOrg/VoteAction';
+import { isReplyAction, type ReplyAction } from '../types/external/OrgSchema/ReplyAction';
+import { isThing, type Thing } from '../types/external/OrgSchema/Thing';
+import { isVoteAction, type VoteAction } from '../types/external/OrgSchema/VoteAction';
 import { type TypeOfArray } from '../types/internal/TypeOfArray';
 import Feedback from './private/Feedback/Feedback';
 import Originator from './private/Originator';

packages/component/src/ActivityStatus/private/Feedback/Feedback.tsx

@@ -1,8 +1,8 @@
 import { hooks } from 'botframework-webchat-api';
 import { useRefFrom } from 'use-ref-from';
-import React, { Fragment, memo, type PropsWithChildren, useCallback, useState, useEffect } from 'react';
+import React, { Fragment, memo, type PropsWithChildren, useState, useEffect } from 'react';
 
-import { type VoteAction } from '../../../types/external/SchemaOrg/VoteAction';
+import { type VoteAction } from '../../../types/external/OrgSchema/VoteAction';
 import FeedbackVoteButton from './private/VoteButton';
 
 const { usePonyfill, usePostActivity } = hooks;
@@ -15,14 +15,9 @@ const DEBOUNCE_TIMEOUT = 500;
 
 const Feedback = memo(({ voteActions }: Props) => {
   const [{ clearTimeout, setTimeout }] = usePonyfill();
-  const [selectedVoteAction, setSelectedVoteAction] = useState<VoteAction | undefined>(undefined);
+  const [selectedVoteAction, setSelectedVoteAction] = useState<VoteAction | undefined>();
   const postActivity = usePostActivity();
 
-  const handleChange = useCallback<(voteAction: VoteAction) => void>(
-    voteAction => setSelectedVoteAction(voteAction),
-    [setSelectedVoteAction]
-  );
-
   const postActivityRef = useRefFrom(postActivity);
 
   useEffect(() => {
@@ -48,7 +43,7 @@ const Feedback = memo(({ voteActions }: Props) => {
       {Array.from(voteActions).map((voteAction, index) => (
         <FeedbackVoteButton
           key={voteAction['@id'] || voteAction.actionOption || index}
-          onClick={handleChange}
+          onClick={setSelectedVoteAction}
           pressed={selectedVoteAction === voteAction}
           voteAction={voteAction}
         />