Migration to emotionjs

grafana-plugin/package.json

@@ -144,7 +144,6 @@
     "@lifeomic/attempt": "^3.0.3",
     "array-move": "^4.0.0",
     "axios": "^1.6.7",
-    "babel-loader": "^9.1.3",
     "change-case": "^4.1.1",
     "circular-dependency-plugin": "^5.2.2",
     "dayjs": "^1.11.5",

grafana-plugin/src/components/Avatar/Avatar.styles.ts

@@ -0,0 +1,32 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+
+export const getAvatarStyles = (_theme: GrafanaTheme2) => {
+  return {
+    avatar: css`
+      display: inline-block;
+      border-radius: 50%;
+      overflow: hidden;
+
+      &--xs {
+        width: 12px;
+        height: 12px;
+      }
+
+      &--small {
+        width: 16px;
+        height: 16px;
+      }
+
+      &--medium {
+        width: 24px;
+        height: 24px;
+      }
+
+      &--large {
+        width: 32px;
+        height: 32px;
+      }
+    `,
+  };
+};

grafana-plugin/src/components/Avatar/Avatar.tsx

@@ -1,23 +1,33 @@
 import React, { FC } from 'react';
 
-import cn from 'classnames/bind';
+import { cx } from '@emotion/css';
+import { useStyles2 } from '@grafana/ui';
 
-import styles from './Avatar.module.css';
+import { bem } from 'utils/utils';
+
+import { getAvatarStyles } from './Avatar.styles';
 
 interface AvatarProps {
   src: string;
   size: 'xs' | 'small' | 'medium' | 'large';
   className?: string;
 }
 
-const cx = cn.bind(styles);
-
 export const Avatar: FC<AvatarProps> = (props) => {
   const { src, size, className, ...rest } = props;
 
+  const styles = useStyles2(getAvatarStyles);
+
   if (!src) {
     return null;
   }
 
-  return <img src={src} className={cx('root', `avatarSize-${size}`, className)} data-testid="test__avatar" {...rest} />;
+  return (
+    <img
+      src={src}
+      className={cx(styles.avatar, bem(styles.avatar, size), className)}
+      data-testid="test__avatar"
+      {...rest}
+    />
+  );
 };

grafana-plugin/src/components/CardButton/CardButton.styles.ts

@@ -0,0 +1,40 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+
+export const getCardButtonStyles = (theme: GrafanaTheme2) => {
+  return {
+    root: css`
+      height: 88px;
+      position: relative;
+      cursor: pointer;
+    `,
+
+    icon: css`
+      position: absolute;
+      left: 20px;
+      top: 20px;
+      color: ${theme.colors.text.disabled};
+    `,
+
+    meta: css`
+      position: absolute;
+      top: 14px;
+      left: 90px;
+    `,
+
+    rootSelected: css`
+       {
+        &::before {
+          display: block;
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 4px;
+          background-image: linear-gradient(270deg, #f55f3e 0%, #f83 100%);
+        }
+      }
+    `,
+  };
+};

grafana-plugin/src/components/CardButton/CardButton.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
 
-import { VerticalGroup } from '@grafana/ui';
-import cn from 'classnames/bind';
+import { cx } from '@emotion/css';
+import { VerticalGroup, useStyles2 } from '@grafana/ui';
 
 import { Block } from 'components/GBlock/Block';
 import { Text } from 'components/Text/Text';
 
-import styles from './CardButton.module.css';
+import { getCardButtonStyles } from './CardButton.styles';
 
 interface CardButtonProps {
   icon: React.ReactElement;
@@ -16,27 +16,23 @@ interface CardButtonProps {
   onClick: (selected: boolean) => void;
 }
 
-const cx = cn.bind(styles);
-
 export const CardButton: FC<CardButtonProps> = (props) => {
   const { icon, description, title, selected, onClick } = props;
 
+  const styles = useStyles2(getCardButtonStyles);
+
   return (
     <Block
       onClick={() => onClick(!selected)}
       withBackground
-      className={cx('root', { root_selected: selected })}
+      className={cx(styles.root, { [styles.rootSelected]: selected })}
       data-testid="test__cardButton"
     >
-      <div className={cx('icon')}>{icon}</div>
-      <div className={cx('meta')}>
+      <div className={cx(styles.icon)}>{icon}</div>
+      <div className={cx(styles.meta)}>
         <VerticalGroup spacing="xs">
-          <Text type="secondary" className={cx('description')}>
-            {description}
-          </Text>
-          <Text.Title level={1} className={cx('title')}>
-            {title}
-          </Text.Title>
+          <Text type="secondary">{description}</Text>
+          <Text.Title level={1}>{title}</Text.Title>
         </VerticalGroup>
       </div>
     </Block>

grafana-plugin/src/components/CheatSheet/CheatSheet.styles.ts

@@ -0,0 +1,40 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+
+export const getCheatSheetStyles = (theme: GrafanaTheme2) => {
+  return {
+    cheatsheetContainer: css`
+      width: 40%;
+      height: 100%;
+      padding: 16px;
+      padding-right: 0;
+      border: 1px solid ${theme.colors.border.weak};
+      min-width: min-content;
+      overflow-y: scroll;
+    `,
+
+    cheatsheetInnerContainer: css`
+      padding-right: 16px;
+      overflow-y: scroll;
+      height: 100%;
+
+      & > div {
+        height: 100%;
+        max-height: 100%;
+      }
+    }`,
+
+    cheatsheetItem: css`
+      margin-bottom: 24px;
+
+      &--small {
+        margin-bottom: 16px;
+        width: 100%;
+      }
+    `,
+
+    code: css`
+      white-space: pre;
+    `,
+  };
+};

grafana-plugin/src/components/CheatSheet/CheatSheet.tsx

@@ -1,39 +1,41 @@
 import React from 'react';
 
-import { HorizontalGroup, IconButton, VerticalGroup } from '@grafana/ui';
-import cn from 'classnames/bind';
+import { HorizontalGroup, IconButton, VerticalGroup, useStyles2 } from '@grafana/ui';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
 import { Block } from 'components/GBlock/Block';
 import { Text } from 'components/Text/Text';
-import { openNotification } from 'utils/utils';
+import { bem, openNotification } from 'utils/utils';
+import { getUtilStyles } from 'utils/utils.styles';
 
 import { CheatSheetInterface, CheatSheetItem } from './CheatSheet.config';
-import styles from './CheatSheet.module.scss';
+import { getCheatSheetStyles } from './CheatSheet.styles';
 
 interface CheatSheetProps {
   cheatSheetName: string;
   cheatSheetData: CheatSheetInterface;
   onClose: () => void;
 }
 
-const cx = cn.bind(styles);
-
 export const CheatSheet = (props: CheatSheetProps) => {
   const { cheatSheetName, cheatSheetData, onClose } = props;
+
+  const styles = useStyles2(getCheatSheetStyles);
+  const utils = useStyles2(getUtilStyles);
+
   return (
-    <div className={cx('cheatsheet-container')}>
-      <div className={cx('cheatsheet-innerContainer')}>
+    <div className={styles.cheatsheetContainer}>
+      <div className={styles.cheatsheetInnerContainer}>
         <VerticalGroup>
           <HorizontalGroup justify="space-between">
             <Text strong>{cheatSheetName} cheatsheet</Text>
             <IconButton aria-label="Close" name="times" onClick={onClose} />
           </HorizontalGroup>
           <Text type="secondary">{cheatSheetData.description}</Text>
-          <div className={cx('u-width-100')}>
+          <div className={utils.width100}>
             {cheatSheetData.fields?.map((field: CheatSheetItem) => {
               return (
-                <div key={field.name} className={cx('cheatsheet-item')}>
+                <div key={field.name} className={styles.cheatsheetItem}>
                   <CheatSheetListItem field={field} />
                 </div>
               );
@@ -50,6 +52,8 @@ interface CheatSheetListItemProps {
 }
 const CheatSheetListItem = (props: CheatSheetListItemProps) => {
   const { field } = props;
+  const styles = useStyles2(getCheatSheetStyles);
+
   return (
     <>
       <Text>{field.name}</Text>
@@ -63,10 +67,10 @@ const CheatSheetListItem = (props: CheatSheetListItemProps) => {
                 </li>
               )}
               {item.codeExample && (
-                <div className={cx('cheatsheet-item-small')}>
+                <div className={bem(styles.cheatsheetItem, 'small')}>
                   <Block bordered fullWidth withBackground>
                     <HorizontalGroup justify="space-between">
-                      <Text type="link" className={cx('code')}>
+                      <Text type="link" className={styles.code}>
                         {item.codeExample}
                       </Text>
                       <CopyToClipboard text={item.codeExample} onCopy={() => openNotification('Example copied')}>