chore: fixup and stub all components

Author: gagik

package-lock.json

@@ -65,7 +65,7 @@
     "@lg-chat/input-bar": "file:src/vendor/@lg-chat/input-bar",
     "@lg-chat/leafygreen-chat-provider": "file:src/vendor/@lg-chat/leafygreen-chat-provider",
     "@lg-chat/lg-markdown": "file:src/vendor/@lg-chat/lg-markdown",
-    "@leafygreen-ui/avatar": "file:src/vendor/leafygreen-ui/avatar",
+    "@vendor-leafygreen-ui/avatar": "file:src/vendor/leafygreen-ui/avatar",
     "@lg-chat/message-actions": "file:src/vendor/@lg-chat/message-actions",
     "@lg-chat/message-feed": "file:src/vendor/@lg-chat/message-feed",
     "@lg-chat/message-feedback": "file:src/vendor/@lg-chat/message-feedback",

packages/compass-assistant/package.json

@@ -7,10 +7,10 @@ import {
   LeafyGreenChatProvider,
   Variant,
 } from '@lg-chat/leafygreen-chat-provider';
-import { Message } from './vendor/@lg-chat/message/src/Message';
-import { MessageFeed } from './vendor/@lg-chat/message-feed/src/MessageFeed';
-import { InputBar } from './vendor/@lg-chat/input-bar/src/InputBar';
-import { InputBarFeedback } from './vendor/@lg-chat/input-bar/src/InputBar/InputBarFeedback';
+import { Message } from '@lg-chat/message';
+import { MessageFeed } from '@lg-chat/message-feed';
+import { InputBar } from '@lg-chat/input-bar';
+import { InputBarFeedback } from '@lg-chat/input-bar/src/InputBar/InputBarFeedback';
 
 interface AssistantChatProps {
   chat: Chat<AssistantMessage>;

packages/compass-assistant/src/assistant-chat.tsx

@@ -5,7 +5,9 @@
       "rules": {
         "@typescript-eslint/naming-convention": "off",
         "filename-rules/match": "off",
-        "@typescript-eslint/consistent-type-imports": "off"
+        "@typescript-eslint/consistent-type-imports": "off",
+        "@typescript-eslint/no-redundant-type-constituents": "off",
+        "@typescript-eslint/ban-ts-comment": "off"
       }
     }
   ]

packages/compass-assistant/src/vendor/@lg-chat/.eslintrc.json

@@ -1,24 +1,24 @@
 import { css } from '@mongodb-js/compass-components';
-import { Theme } from '@mongodb-js/compass-components';
+import { shim_Theme } from '@mongodb-js/compass-components';
 import { palette } from '@mongodb-js/compass-components';
 
 export const textAvatarStyleOverrides = css`
   background-color: ${palette.gray.dark1};
   border: unset;
 `;
 
-export const iconAvatarStyleOverrides = (theme: Theme) => css`
-  background-color: ${theme === Theme.Dark
+export const iconAvatarStyleOverrides = (theme: shim_Theme) => css`
+  background-color: ${theme === shim_Theme.Dark
     ? palette.gray.dark2
     : palette.gray.base};
 
-  color: ${theme === Theme.Dark ? palette.gray.light1 : palette.white};
+  color: ${theme === shim_Theme.Dark ? palette.gray.light1 : palette.white};
 
   border: unset;
 `;
 
-export const logoAvatarStyleOverrides = (theme: Theme) => css`
-  background-color: ${theme === Theme.Dark
+export const logoAvatarStyleOverrides = (theme: shim_Theme) => css`
+  background-color: ${theme === shim_Theme.Dark
     ? palette.green.dark3
     : palette.black};
 `;

packages/compass-assistant/src/vendor/@lg-chat/avatar/src/Avatar/ChatAvatar.styles.ts

@@ -1,9 +1,9 @@
 import React, { ForwardedRef, forwardRef } from 'react';
 import { useLeafyGreenChatContext } from '@lg-chat/leafygreen-chat-provider';
 
-import { Avatar, Format, getInitials } from '../../../../leafygreen-ui/avatar';
+import { Avatar, Format, getInitials } from '@vendor-leafygreen-ui/avatar';
 import { cx } from '@mongodb-js/compass-components';
-import { useDarkMode } from '@mongodb-js/compass-components';
+import { shim_useDarkMode } from '@mongodb-js/compass-components';
 import { breakpoints } from '@mongodb-js/compass-components';
 
 import {
@@ -60,8 +60,7 @@ export const ChatAvatar = forwardRef(
     }: ChatAvatarProps,
     fwdRef: ForwardedRef<HTMLDivElement>
   ) => {
-    const darkMode = useDarkMode(darkModeProp);
-    const theme = darkMode ? Theme.Dark : Theme.Light;
+    const { theme } = shim_useDarkMode(darkModeProp);
     const { containerWidth } = useLeafyGreenChatContext();
     const size =
       sizeProp || (containerWidth && containerWidth < breakpoints.Tablet)

packages/compass-assistant/src/vendor/@lg-chat/avatar/src/Avatar/ChatAvatar.tsx

@@ -1,4 +1,4 @@
-import { DarkModeProps } from '@mongodb-js/compass-components';
+import { type shim_lib } from '@mongodb-js/compass-components';
 
 export const ChatAvatarVariant = {
   /**
@@ -25,7 +25,7 @@ export const ChatAvatarSize = {
 
 export type ChatAvatarSize = typeof ChatAvatarSize[keyof typeof ChatAvatarSize];
 
-export interface ChatAvatarProps extends DarkModeProps {
+export interface ChatAvatarProps extends shim_lib.DarkModeProps {
   /**
    * If provided, overrides the size prop to a customizable number (in px)
    */

packages/compass-assistant/src/vendor/@lg-chat/avatar/src/Avatar/ChatAvatar.types.ts

@@ -1,6 +1,6 @@
-import { HTMLElementProps } from '@mongodb-js/compass-components';
+import { shim_lib } from '@mongodb-js/compass-components';
 
-export interface DisclaimerTextProps extends HTMLElementProps<'div'> {
+export interface DisclaimerTextProps extends shim_lib.HTMLElementProps<'div'> {
   /**
    * Heading text
    */

packages/compass-assistant/src/vendor/@lg-chat/chat-disclaimer/src/DisclaimerText/DisclaimerText.types.ts

@@ -1,15 +1,13 @@
 import { css, cx } from '@mongodb-js/compass-components';
-import { Theme } from '@mongodb-js/compass-components';
+import { shim_Theme } from '@mongodb-js/compass-components';
 import { palette } from '@mongodb-js/compass-components';
 import {
   borderRadius,
   breakpoints,
-  color,
-  InteractionState,
   spacing,
-  Variant,
+  shim_tokens,
 } from '@mongodb-js/compass-components';
-
+const { color, InteractionState, Variant } = shim_tokens;
 const baseContainerStyles = css`
   width: 100%;
   display: flex;
@@ -18,13 +16,13 @@ const baseContainerStyles = css`
   position: relative;
 `;
 
-const getSpaciousContainerStyles = (theme: Theme) => css`
+const getSpaciousContainerStyles = (theme: shim_Theme) => css`
   border-radius: ${borderRadius[200]}px;
   overflow: hidden;
   border: 1px solid
     ${color[theme].border[Variant.Secondary][InteractionState.Default]};
   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05);
-  background-color: ${theme === Theme.Dark
+  background-color: ${theme === shim_Theme.Dark
     ? palette.black
     : palette.gray.light3};
 `;
@@ -36,7 +34,7 @@ export const getContainerStyles = ({
 }: {
   className?: string;
   isCompact: boolean;
-  theme: Theme;
+  theme: shim_Theme;
 }) =>
   cx(
     baseContainerStyles,

packages/compass-assistant/src/vendor/@lg-chat/chat-window/src/ChatWindow/ChatWindow.styles.ts

@@ -1,11 +1,8 @@
 import { TitleBarProps } from '@lg-chat/title-bar';
 
-import {
-  DarkModeProps,
-  HTMLElementProps,
-} from '@mongodb-js/compass-components';
+import { shim_lib } from '@mongodb-js/compass-components';
 
 export interface ChatWindowProps
-  extends Omit<HTMLElementProps<'div'>, 'title'>,
-    DarkModeProps,
+  extends Omit<shim_lib.HTMLElementProps<'div'>, 'title'>,
+    shim_lib.DarkModeProps,
     TitleBarProps {}