Add typings for Adaptive Cards

CHANGELOG.md

@@ -40,7 +40,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
       -  `"any"` will show when there are any offscreen messages;
       -  `false` will always hide the button.
    -  Added new [`scrollToEndButtonMiddleware`](https://github.com/microsoft/BotFramework-WebChat/blob/main/packages/api/src/types/scrollToEndButtonMiddleware.ts) to customize the appearance of the scroll to end button.
--  Resolves [#3752](https://github.com/microsoft/BotFramework-WebChat/issues/3752). Added typings (`*.d.ts`) for all public interfaces, by [@compulim](https://github.com), in PR [#3931](https://github.com/microsoft/BotFramework-WebChat/pull/3931)
+-  Resolves [#3752](https://github.com/microsoft/BotFramework-WebChat/issues/3752). Added typings (`*.d.ts`) for all public interfaces, by [@compulim](https://github.com), in PR [#3931](https://github.com/microsoft/BotFramework-WebChat/pull/3931) and [#3946](https://github.com/microsoft/BotFramework-WebChat/pull/3946)
 
 ### Fixed
 

__tests__/types/__typescript__/fail-once/invalid-type-for-use-style-options.tsx

@@ -0,0 +1,5 @@
+import { hooks } from '../../../../packages/bundle';
+
+const [styleOptions] = hooks.useStyleOptions();
+
+styleOptions.cardEmphasisBackgroundColor = 123;

__tests__/types/__typescript__/fail-once/no-full-bundle-style-options-in-minimal-for-hooks.ts

@@ -0,0 +1,5 @@
+import { hooks } from '../../../../packages/bundle/lib/index-minimal';
+
+const [styleOptions] = hooks.useStyleOptions();
+
+styleOptions.cardEmphasisBackgroundColor = 'black';

__tests__/types/__typescript__/pass/use-style-options-with-full-bundle.ts

@@ -0,0 +1,5 @@
+import { hooks } from '../../../../packages/bundle';
+
+const [styleOptions] = hooks.useStyleOptions();
+
+styleOptions.cardEmphasisBackgroundColor = 'black';

packages/bundle/src/adaptiveCards/AdaptiveCardsStyleOptions.ts

@@ -1,7 +1,9 @@
+/**
+ * Adaptive Cards styling
+ */
 type AdaptiveCardsStyleOptions = {
-  /**
-   * Adaptive Cards styling
-   */
+  /** Adaptive Cards: Specify the maximum schema version supported by the Adaptive Card serializer. */
+  adaptiveCardsParserMaxVersion?: string;
 
   /**
    * Adaptive Cards styling for 'emphasis' container style

packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardBuilder.ts

@@ -17,6 +17,8 @@ import {
 } from 'adaptivecards';
 
 import { CardAction } from 'botframework-directlinejs';
+import AdaptiveCardsPackage from '../../types/AdaptiveCardsPackage';
+import AdaptiveCardsStyleOptions from '../AdaptiveCardsStyleOptions';
 
 export interface BotFrameworkCardAction {
   __isBotFrameworkCardAction: boolean;
@@ -54,9 +56,13 @@ function addCardAction(cardAction: CardAction, includesOAuthButtons?: boolean) {
 export default class AdaptiveCardBuilder {
   card: AdaptiveCard;
   container: Container;
-  styleOptions: any;
+  styleOptions: AdaptiveCardsStyleOptions;
 
-  constructor(adaptiveCards, styleOptions, direction = 'ltr') {
+  constructor(
+    adaptiveCards: AdaptiveCardsPackage,
+    styleOptions: AdaptiveCardsStyleOptions,
+    direction: 'ltr' | 'rtl' | 'auto' = 'ltr'
+  ) {
     this.card = new adaptiveCards.AdaptiveCard();
     this.container = new Container();
     this.container.rtl = direction === 'rtl';

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

@@ -1,5 +1,6 @@
 /* eslint react/no-array-index-key: "off" */
 
+import { DirectLineAnimationCard } from 'botframework-webchat-core';
 import { Components, hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
 import React, { FC } from 'react';
@@ -11,7 +12,7 @@ const { useStyleSet } = hooks;
 
 type AnimationCardContentProps = {
   actionPerformedClassName?: string;
-  content: any;
+  content: DirectLineAnimationCard;
   disabled?: boolean;
 };
 

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

@@ -1,5 +1,6 @@
 /* eslint react/no-array-index-key: "off" */
 
+import { DirectLineAudioCard } from 'botframework-webchat-core';
 import { Components, hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
 import React, { FC } from 'react';
@@ -11,7 +12,7 @@ const { useStyleSet } = hooks;
 
 type AudioCardContentProps = {
   actionPerformedClassName?: string;
-  content: any;
+  content: DirectLineAudioCard;
   disabled?: boolean;
 };
 

packages/bundle/src/adaptiveCards/Attachment/CommonCard.js

@@ -6,8 +6,9 @@ import { hooks } from 'botframework-webchat-component';
 import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 import useAdaptiveCardsPackage from '../hooks/useAdaptiveCardsPackage';
+import useStyleOptions from '../../hooks/useStyleOptions';
 
-const { useDirection, useStyleOptions } = hooks;
+const { useDirection } = hooks;
 
 const CommonCard = ({ actionPerformedClassName, content, disabled }) => {
   const [adaptiveCardsPackage] = useAdaptiveCardsPackage();

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

@@ -1,23 +1,26 @@
+import { DirectLineHeroCard } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
 import React, { FC, useMemo } from 'react';
 
 import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 import useAdaptiveCardsPackage from '../hooks/useAdaptiveCardsPackage';
+import useStyleOptions from '../../hooks/useStyleOptions';
 
-const { useDirection, useStyleOptions } = hooks;
+const { useDirection } = hooks;
 
 type HeroCardContentProps = {
   actionPerformedClassName?: string;
-  content: any;
+  content: DirectLineHeroCard;
   disabled?: boolean;
 };
 
 const HeroCardContent: FC<HeroCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
   const [adaptiveCardsPackage] = useAdaptiveCardsPackage();
   const [styleOptions] = useStyleOptions();
   const [direction] = useDirection();
+
   const builtCard = useMemo(() => {
     const builder = new AdaptiveCardBuilder(adaptiveCardsPackage, styleOptions, direction);
 

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

@@ -1,16 +1,18 @@
+import { DirectLineOAuthCard } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
 import React, { FC, useMemo } from 'react';
 
 import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 import useAdaptiveCardsPackage from '../hooks/useAdaptiveCardsPackage';
+import useStyleOptions from '../../hooks/useStyleOptions';
 
-const { useDirection, useStyleOptions } = hooks;
+const { useDirection } = hooks;
 
 type OAuthCardContentProps = {
   actionPerformedClassName?: string;
-  content: any;
+  content: DirectLineOAuthCard;
   disabled?: boolean;
 };
 

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

@@ -1,32 +1,31 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [0, 1, 10, 15, 25, 50, 75] }] */
 
+import { DirectLineReceiptCard } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
 import React, { FC, useMemo } from 'react';
 
-import { StrictFullBundleStyleOptions } from '../../types/FullBundleStyleOptions';
 import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 import useAdaptiveCardsPackage from '../hooks/useAdaptiveCardsPackage';
+import useStyleOptions from '../../hooks/useStyleOptions';
 
-const { useDirection, useLocalizer, useStyleOptions } = hooks;
+const { useDirection, useLocalizer } = hooks;
 
 function nullOrUndefined(obj) {
   return obj === null || typeof obj === 'undefined';
 }
 
 type ReceiptCardContentProps = {
   actionPerformedClassName?: string;
-  content: any;
+  content: DirectLineReceiptCard;
   disabled?: boolean;
 };
 
 const ReceiptCardContent: FC<ReceiptCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
   const [adaptiveCardsPackage] = useAdaptiveCardsPackage();
   const [direction] = useDirection();
-
-  // TODO: Create another useStyleOptions that natively export the correct type.
-  const [styleOptions] = useStyleOptions() as [StrictFullBundleStyleOptions];
+  const [styleOptions] = useStyleOptions();
   const localize = useLocalizer();
 
   const taxText = localize('RECEIPT_CARD_TAX');

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

@@ -1,3 +1,4 @@
+import { DirectLineSignInCard } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
 import React, { FC } from 'react';
@@ -8,7 +9,7 @@ const { useStyleSet } = hooks;
 
 type SignInCardContentProps = {
   actionPerformedClassName?: string;
-  content: any;
+  content: DirectLineSignInCard;
   disabled?: boolean;
 };
 

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

@@ -1,28 +1,27 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [25, 75] }] */
 
+import { DirectLineThumbnailCard } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
 import React, { FC, useMemo } from 'react';
 
-import { StrictFullBundleStyleOptions } from '../../types/FullBundleStyleOptions';
 import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 import useAdaptiveCardsPackage from '../hooks/useAdaptiveCardsPackage';
+import useStyleOptions from '../../hooks/useStyleOptions';
 
-const { useDirection, useStyleOptions } = hooks;
+const { useDirection } = hooks;
 
 type ThumbnailCardContentProps = {
   actionPerformedClassName?: string;
-  content: any;
+  content: DirectLineThumbnailCard;
   disabled?: boolean;
 };
 
 const ThumbnailCardContent: FC<ThumbnailCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
   const [adaptiveCardsPackage] = useAdaptiveCardsPackage();
   const [direction] = useDirection();
-
-  // TODO: Create another useStyleOptions that natively export the correct type.
-  const [styleOptions] = useStyleOptions() as [StrictFullBundleStyleOptions];
+  const [styleOptions] = useStyleOptions();
 
   const builtCard = useMemo(() => {
     if (content) {

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

@@ -1,5 +1,6 @@
 /* eslint react/no-array-index-key: "off" */
 
+import { DirectLineVideoCard } from 'botframework-webchat-core';
 import { Components, hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
 import React, { FC } from 'react';
@@ -11,7 +12,7 @@ const { VideoContent } = Components;
 
 type VideoCardContentProps = {
   actionPerformedClassName?: string;
-  content: {
+  content: DirectLineVideoCard & {
     autoloop?: boolean;
     autostart?: boolean;
     image?: { url?: string };
@@ -21,7 +22,7 @@ type VideoCardContentProps = {
 };
 
 const VideoCardContent: FC<VideoCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
-  const { autoloop, autostart, image: { url: imageURL } = {}, media } = content;
+  const { autoloop, autostart, image: { url: imageURL } = { url: undefined }, media } = content;
   const [{ audioCardAttachment: audioCardAttachmentStyleSet }] = useStyleSet();
 
   return (

packages/bundle/src/adaptiveCards/defaultStyleOptions.ts

@@ -1,6 +1,7 @@
 import AdaptiveCardsStyleOptions from './AdaptiveCardsStyleOptions';
 
 const ADAPTIVE_CARDS_DEFAULT_STYLE_OPTIONS: Required<AdaptiveCardsStyleOptions> = {
+  adaptiveCardsParserMaxVersion: undefined,
   cardEmphasisBackgroundColor: '#F0F0F0',
   cardPushButtonBackgroundColor: '#0063B1',
   cardPushButtonTextColor: 'White',

packages/bundle/src/adaptiveCards/hooks/internal/useAdaptiveCardsContext.js → packages/bundle/src/adaptiveCards/hooks/internal/useAdaptiveCardsContext.ts

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 
 import AdaptiveCardsContext from '../../AdaptiveCardsContext';
 
-export default function useAdaptiveCardsContext() {
+export default function useAdaptiveCardsContext(): AdaptiveCardsContext {
   const context = useContext(AdaptiveCardsContext);
 
   if (!context) {

packages/bundle/src/adaptiveCards/hooks/internal/useParseAdaptiveCardJSON.js → packages/bundle/src/adaptiveCards/hooks/internal/useParseAdaptiveCardJSON.ts

@@ -2,8 +2,9 @@ import { hooks } from 'botframework-webchat-component';
 import { useCallback, useMemo } from 'react';
 
 import useAdaptiveCardsPackage from '../useAdaptiveCardsPackage';
+import useStyleOptions from '../../../hooks/useStyleOptions';
 
-const { useDirection, useStyleOptions } = hooks;
+const { useDirection } = hooks;
 
 function updateRTLInline(element, rtl, adaptiveCardsPackage) {
   if (element instanceof adaptiveCardsPackage.Container) {
@@ -33,7 +34,9 @@ export default function useParseAdaptiveCardJSON() {
     const maxVersion = Version.parse(adaptiveCardsParserMaxVersion, new SerializationContext());
 
     if (maxVersion && !maxVersion.isValid) {
-      return console.warn('botframework-webchat: "adaptiveCardsParserMaxVersion" specified is not a valid version.');
+      console.warn('botframework-webchat: "adaptiveCardsParserMaxVersion" specified is not a valid version.');
+
+      return;
     }
 
     return maxVersion;

packages/bundle/src/adaptiveCards/hooks/internal/useUniqueId.js → packages/bundle/src/adaptiveCards/hooks/internal/useUniqueId.ts

@@ -3,7 +3,7 @@
 import { useMemo } from 'react';
 import random from 'math-random';
 
-export default function useUniqueId(prefix) {
+export default function useUniqueId(prefix?: string): string {
   const id = useMemo(() => random().toString(36).substr(2, 5), []);
 
   prefix = prefix ? `${prefix}--` : '';

packages/bundle/src/adaptiveCards/hooks/useAdaptiveCardsHostConfig.ts

@@ -1,10 +1,8 @@
-import { hooks } from 'botframework-webchat-component';
 import { useMemo } from 'react';
 
 import createDefaultAdaptiveCardHostConfig from '../Styles/adaptiveCardHostConfig';
 import useAdaptiveCardsContext from './internal/useAdaptiveCardsContext';
-
-const { useStyleOptions } = hooks;
+import useStyleOptions from '../../hooks/useStyleOptions';
 
 export default function useAdaptiveCardsHostConfig(): [any] {
   const { hostConfigFromProps } = useAdaptiveCardsContext();

packages/bundle/src/hooks/useStyleOptions.ts

@@ -0,0 +1,9 @@
+import { hooks } from 'botframework-webchat-component';
+
+import { StrictFullBundleStyleOptions } from '../types/FullBundleStyleOptions';
+
+export default function useStyleOptions(): [StrictFullBundleStyleOptions] {
+  const [styleOptions] = hooks.useStyleOptions();
+
+  return [styleOptions as StrictFullBundleStyleOptions];
+}

packages/bundle/src/index.ts

@@ -27,6 +27,7 @@ import SignInCardContent from './adaptiveCards/Attachment/SignInCardContent';
 import ThumbnailCardContent from './adaptiveCards/Attachment/ThumbnailCardContent';
 import useAdaptiveCardsHostConfig from './adaptiveCards/hooks/useAdaptiveCardsHostConfig';
 import useAdaptiveCardsPackage from './adaptiveCards/hooks/useAdaptiveCardsPackage';
+import useStyleOptions from './hooks/useStyleOptions';
 import VideoCardContent from './adaptiveCards/Attachment/VideoCardContent';
 
 const renderWebChat = coreRenderWebChat.bind(null, ReactWebChat);
@@ -54,7 +55,8 @@ export const createDirectLineAppServiceExtension = (
 const patchedHooks = {
   ...hooks,
   useAdaptiveCardsHostConfig,
-  useAdaptiveCardsPackage
+  useAdaptiveCardsPackage,
+  useStyleOptions
 };
 
 const AdditionalComponents = {

packages/bundle/src/types/AdaptiveCardsPackage.ts

@@ -1,10 +1,12 @@
-class AdaptiveCard {}
+import { AdaptiveCard, HorizontalAlignment, TextSize, TextWeight, SerializationContext, Version } from 'adaptivecards';
 
 type AdaptiveCardsPackage = {
-  AdaptiveCard: AdaptiveCard;
-  HorizontalAlignment: any;
-  TextSize: any;
-  TextWeight: any;
+  AdaptiveCard: typeof AdaptiveCard;
+  HorizontalAlignment: typeof HorizontalAlignment;
+  TextSize: typeof TextSize;
+  TextWeight: typeof TextWeight;
+  SerializationContext: typeof SerializationContext;
+  Version: typeof Version;
 };
 
 export default AdaptiveCardsPackage;