@oanda/labs-sentiment-widget 1.0.172 → 1.0.174

package/src/SentimentWidget/components/SortSwitch/SortSwitch.tsx

@@ -1,79 +1,82 @@
-import React, { useContext } from 'react';
-import classnames from 'classnames';
 import {
-  LongArrowUp, LongArrowDown, ThemeContext,
+  LongArrowDown,
+  LongArrowUp,
+  useLayoutProvider,
 } from '@oanda/labs-widget-common';
-import { SelectedArrow, SortSwitchProps } from './types';
+import classnames from 'classnames';
+import React from 'react';
+
+import type { SortSwitchProps } from './types';
+import { SelectedArrow } from './types';
 
 const SortSwitch = ({
-  onClickButtonDown, onClickButtonUp, selected, disabled,
+  onClickButtonDown,
+  onClickButtonUp,
+  selected,
+  disabled,
 }: SortSwitchProps) => {
-  const { isDark } = useContext(ThemeContext);
+  const { isDark } = useLayoutProvider();
 
   return (
     <div
-      data-testid="sort-switch"
       className={classnames(
         'lw-flex lw-rounded lw-border-[1px] lw-border-solid lw-font-sans lw-text-xs lw-tracking-normal',
         {
           'lw-border-border-disabled': disabled,
           'lw-border-secondary': !disabled,
-        },
+        }
       )}
+      data-testid="sort-switch"
     >
       <button
-        data-testid="sort-switch-button-up"
-        disabled={disabled || selected === SelectedArrow.UP}
-        type="button"
-        onClick={onClickButtonUp}
         className={classnames(
           'lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center  lw-border-solid focus:lw-outline-secondary [&:enabled:hover>*]:-lw-translate-y-1',
           {
             'lw-border-r-[1px] lw-border-r-border-disabled': disabled,
             'lw-bg-secondary': selected === SelectedArrow.UP && !disabled,
-          },
+          }
         )}
+        data-testid="sort-switch-button-up"
+        disabled={disabled || selected === SelectedArrow.UP}
+        type="button"
+        onClick={onClickButtonUp}
       >
         <LongArrowUp
-          className={classnames(
-            'lw-transition-transform',
-            {
-              'lw-stroke-border-disabled': disabled,
-              'lw-stroke-secondary': selected !== SelectedArrow.UP && !disabled,
-              'lw-stroke-bg-primary': selected === SelectedArrow.UP && !disabled && isDark,
-              'lw-stroke-ok': selected === SelectedArrow.UP && !disabled && !isDark,
-            },
-          )}
+          className={classnames('lw-transition-transform', {
+            'lw-stroke-border-disabled': disabled,
+            'lw-stroke-secondary': selected !== SelectedArrow.UP && !disabled,
+            'lw-stroke-bg-primary':
+              selected === SelectedArrow.UP && !disabled && isDark,
+            'lw-stroke-ok':
+              selected === SelectedArrow.UP && !disabled && !isDark,
+          })}
         />
       </button>
       <button
-        data-testid="sort-switch-button-down"
-        disabled={disabled || selected === SelectedArrow.DOWN}
-        type="button"
-        onClick={onClickButtonDown}
         className={classnames(
           'lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center lw-text-center focus:lw-outline-secondary [&:enabled:hover>*]:lw-translate-y-1',
           {
             'lw-bg-secondary': selected === SelectedArrow.DOWN && !disabled,
-          },
+          }
         )}
+        data-testid="sort-switch-button-down"
+        disabled={disabled || selected === SelectedArrow.DOWN}
+        type="button"
+        onClick={onClickButtonDown}
       >
         <LongArrowDown
-          className={classnames(
-            'lw-transition-transform',
-            {
-              'lw-stroke-border-disabled': disabled,
-              'lw-stroke-secondary': selected !== SelectedArrow.DOWN && !disabled,
-              'lw-stroke-bg-primary': selected === SelectedArrow.DOWN && !disabled && isDark,
-              'lw-stroke-ok': selected === SelectedArrow.DOWN && !disabled && !isDark,
-            },
-          )}
+          className={classnames('lw-transition-transform', {
+            'lw-stroke-border-disabled': disabled,
+            'lw-stroke-secondary': selected !== SelectedArrow.DOWN && !disabled,
+            'lw-stroke-bg-primary':
+              selected === SelectedArrow.DOWN && !disabled && isDark,
+            'lw-stroke-ok':
+              selected === SelectedArrow.DOWN && !disabled && !isDark,
+          })}
         />
       </button>
     </div>
   );
 };
 
-export {
-  SortSwitch,
-};
+export { SortSwitch };

package/src/SentimentWidget/render.tsx

@@ -1,8 +1,10 @@
+import type { Theme } from '@oanda/labs-widget-common';
+import { validateLocale, validateToolParams } from '@oanda/labs-widget-common';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { Theme, validateLocale, validateToolParams } from '@oanda/labs-widget-common';
-import { SentimentWidget } from './SentimentWidget';
+
 import { Division } from '../gql/types/graphql';
+import { SentimentWidget } from './SentimentWidget';
 
 const {
   graphqlUrl: configGraphQl,
@@ -12,56 +14,66 @@ const {
   locale: configLocale,
 } = window.sentimentWidgetConfig || {};
 
-const {
-  graphqlUrl,
-} = window.widgetsConfig || {};
+const { graphqlUrl } = window.widgetsConfig || {};
 
-const sentimentParamsElements = document.querySelectorAll('div[data-sentiment-params]');
+const sentimentParamsElements = document.querySelectorAll(
+  'div[data-sentiment-params]'
+);
 
 if (sentimentParamsElements.length > 0) {
   sentimentParamsElements.forEach((element) => {
     const root = createRoot(element);
     const params = element.getAttribute('data-sentiment-params');
     const mode = element.getAttribute('data-mode');
-    const {
-      instrument, division, locale, includeDescriptionLabels, logoLink,
-    } = JSON.parse(params as string);
+    const { instrument, division, locale, includeDescriptionLabels, logoLink } =
+      JSON.parse(params as string);
 
-    const isParamError = validateToolParams({
-      division, locale, graphqlUrl,
-    }, [
+    const isParamError = validateToolParams(
       {
-        name: 'locale',
-        valueCheck: (value) => validateLocale(value),
-      }, {
-        name: 'division',
-        valueCheck: (value) => Object.values(Division).includes(value),
-      }, {
-        name: 'graphqlUrl',
+        division,
+        locale,
+        graphqlUrl,
       },
-    ]);
+      [
+        {
+          name: 'locale',
+          valueCheck: (value: string | undefined) => validateLocale(value),
+        },
+        {
+          name: 'division',
+          valueCheck: (value: Division) =>
+            Object.values(Division).includes(value),
+        },
+        {
+          name: 'graphqlUrl',
+        },
+      ]
+    );
     root.render(
       <SentimentWidget
-        graphqlUrl={graphqlUrl}
         division={division}
-        instrument={instrument}
-        locale={locale}
-        theme={mode as Theme}
+        graphqlUrl={graphqlUrl}
         includeDescriptionLabels={includeDescriptionLabels}
+        instrument={instrument}
         isParamError={isParamError}
+        locale={locale}
         logoLink={logoLink}
-      />,
+        theme={mode as Theme}
+      />
     );
   });
 } else {
-  const container = document.getElementById(configRenderElementId);
+  const container: HTMLElement | null = document.querySelector(
+    configRenderElementId
+  );
+
   const root = createRoot(container!);
   root.render(
     <SentimentWidget
-      graphqlUrl={configGraphQl}
       division={configDivision}
+      graphqlUrl={configGraphQl}
       instrument={configInstrument}
       locale={configLocale}
-    />,
+    />
   );
 }

package/src/SentimentWidget/types.ts

@@ -1,5 +1,6 @@
-import { WidgetConfig } from '@oanda/labs-widget-common';
-import { Division } from '../gql/types/graphql';
+import type { WidgetConfig } from '@oanda/labs-widget-common';
+
+import type { Division } from '../gql/types/graphql';
 
 export interface SentimentConfig extends WidgetConfig {
   division: Division;

package/src/SentimentWidget/utils.ts

@@ -1,12 +1,20 @@
-import { GetSentimentListQuery, Sort } from '../gql/types/graphql';
+import type { GetSentimentListQuery } from '../gql/types/graphql';
+import { Sort } from '../gql/types/graphql';
 
-export const sortData = ({ sentimentList }: GetSentimentListQuery, sort: Sort) => {
+export const sortData = (
+  { sentimentList }: GetSentimentListQuery,
+  sort: Sort
+) => {
   if (!sentimentList) {
     return [];
   }
 
   if (sort === Sort.Bullish) {
-    return [...sentimentList].sort((a, b) => a.sentiment.shortPercent - b.sentiment.shortPercent);
+    return [...sentimentList].sort(
+      (a, b) => a.sentiment.shortPercent - b.sentiment.shortPercent
+    );
   }
-  return [...sentimentList].sort((a, b) => a.sentiment.longPercent - b.sentiment.longPercent);
+  return [...sentimentList].sort(
+    (a, b) => a.sentiment.longPercent - b.sentiment.longPercent
+  );
 };

package/src/gql/getInstrumentSentiment.ts

@@ -1,14 +1,8 @@
 import { gql } from '@apollo/client';
 
 const getInstrumentSentiment = gql`
-  query GetInstrumentSentiment(
-    $name: String!
-    $division: Division
-  ) {
-    sentiment(
-      name: $name
-      division: $division
-    ) {
+  query GetInstrumentSentiment($name: String!, $division: Division) {
+    sentiment(name: $name, division: $division) {
       name
       displayName
       sentiment {

package/src/gql/getSentimentList.ts

@@ -1,12 +1,8 @@
 import { gql } from '@apollo/client';
 
 const getSentimentList = gql`
-  query GetSentimentList (
-    $division: Division
-  ) {
-    sentimentList (
-      division: $division
-    ) {
+  query GetSentimentList($division: Division) {
+    sentimentList(division: $division) {
       name
       displayName
       sentiment {

package/src/gql/types/fragment-masking.ts

@@ -1,18 +1,21 @@
-import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import {
+  ResultOf,
+  DocumentTypeDecoration,
+  TypedDocumentNode,
+} from '@graphql-typed-document-node/core';
 import { FragmentDefinitionNode } from 'graphql';
 import { Incremental } from './graphql';
 
-
-export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<
-  infer TType,
-  any
->
-  ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
-    ? TKey extends string
-      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+export type FragmentType<
+  TDocumentType extends DocumentTypeDecoration<any, any>,
+> =
+  TDocumentType extends DocumentTypeDecoration<infer TType, any>
+    ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
+      ? TKey extends string
+        ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+        : never
       : never
-    : never
-  : never;
+    : never;
 
 // return non-nullable if `fragmentType` is non-nullable
 export function useFragment<TType>(
@@ -22,7 +25,10 @@ export function useFragment<TType>(
 // return nullable if `fragmentType` is nullable
 export function useFragment<TType>(
   _documentNode: DocumentTypeDecoration<TType, any>,
-  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
+  fragmentType:
+    | FragmentType<DocumentTypeDecoration<TType, any>>
+    | null
+    | undefined
 ): TType | null | undefined;
 // return array of non-nullable if `fragmentType` is array of non-nullable
 export function useFragment<TType>(
@@ -32,35 +38,49 @@ export function useFragment<TType>(
 // return array of nullable if `fragmentType` is array of nullable
 export function useFragment<TType>(
   _documentNode: DocumentTypeDecoration<TType, any>,
-  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+  fragmentType:
+    | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+    | null
+    | undefined
 ): ReadonlyArray<TType> | null | undefined;
 export function useFragment<TType>(
   _documentNode: DocumentTypeDecoration<TType, any>,
-  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+  fragmentType:
+    | FragmentType<DocumentTypeDecoration<TType, any>>
+    | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+    | null
+    | undefined
 ): TType | ReadonlyArray<TType> | null | undefined {
   return fragmentType as any;
 }
 
-
 export function makeFragmentData<
   F extends DocumentTypeDecoration<any, any>,
-  FT extends ResultOf<F>
+  FT extends ResultOf<F>,
 >(data: FT, _fragment: F): FragmentType<F> {
   return data as FragmentType<F>;
 }
 export function isFragmentReady<TQuery, TFrag>(
   queryNode: DocumentTypeDecoration<TQuery, any>,
   fragmentNode: TypedDocumentNode<TFrag>,
-  data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined
+  data:
+    | FragmentType<TypedDocumentNode<Incremental<TFrag>, any>>
+    | null
+    | undefined
 ): data is FragmentType<typeof fragmentNode> {
-  const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__
-    ?.deferredFields;
+  const deferredFields = (
+    queryNode as {
+      __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> };
+    }
+  ).__meta__?.deferredFields;
 
   if (!deferredFields) return true;
 
-  const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;
+  const fragDef = fragmentNode.definitions[0] as
+    | FragmentDefinitionNode
+    | undefined;
   const fragName = fragDef?.name?.value;
 
   const fields = (fragName && deferredFields[fragName]) || [];
-  return fields.length > 0 && fields.every(field => data && field in data);
+  return fields.length > 0 && fields.every((field) => data && field in data);
 }

package/src/gql/types/gql.ts

@@ -13,8 +13,10 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-    "\n  query GetInstrumentSentiment(\n    $name: String!\n    $division: Division\n  ) {\n    sentiment(\n      name: $name\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n": types.GetInstrumentSentimentDocument,
-    "\n  query GetSentimentList (\n    $division: Division\n  ) {\n    sentimentList (\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n": types.GetSentimentListDocument,
+  '\n  query GetInstrumentSentiment(\n    $name: String!\n    $division: Division\n  ) {\n    sentiment(\n      name: $name\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n':
+    types.GetInstrumentSentimentDocument,
+  '\n  query GetSentimentList (\n    $division: Division\n  ) {\n    sentimentList (\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n':
+    types.GetSentimentListDocument,
 };
 
 /**
@@ -34,14 +36,19 @@ export function graphql(source: string): unknown;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query GetInstrumentSentiment(\n    $name: String!\n    $division: Division\n  ) {\n    sentiment(\n      name: $name\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n"): (typeof documents)["\n  query GetInstrumentSentiment(\n    $name: String!\n    $division: Division\n  ) {\n    sentiment(\n      name: $name\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n"];
+export function graphql(
+  source: '\n  query GetInstrumentSentiment(\n    $name: String!\n    $division: Division\n  ) {\n    sentiment(\n      name: $name\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n'
+): (typeof documents)['\n  query GetInstrumentSentiment(\n    $name: String!\n    $division: Division\n  ) {\n    sentiment(\n      name: $name\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n'];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query GetSentimentList (\n    $division: Division\n  ) {\n    sentimentList (\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n"): (typeof documents)["\n  query GetSentimentList (\n    $division: Division\n  ) {\n    sentimentList (\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n"];
+export function graphql(
+  source: '\n  query GetSentimentList (\n    $division: Division\n  ) {\n    sentimentList (\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n'
+): (typeof documents)['\n  query GetSentimentList (\n    $division: Division\n  ) {\n    sentimentList (\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n'];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};
 }
 
-export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> =
+  TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;