Merge branch 'fe/feature/RI-7039-replace-eui' into fe/bugfix/RI-7223-links-should-have-underline-only-on-hover

Author: pd-redis

redisinsight/ui/src/assets/img/rdi/rocket.svg

@@ -0,0 +1,8 @@
+import React from 'react'
+import { RiImageProps, StyledImage } from './image.styles'
+
+const RiImage = ({ $size, src, alt, ...rest }: RiImageProps) => (
+  <StyledImage src={src} alt={alt} $size={$size} {...rest} />
+)
+
+export default RiImage

redisinsight/ui/src/components/base/display/image/RiImage.tsx

@@ -0,0 +1,37 @@
+import { HTMLAttributes } from 'react'
+import styled, { css } from 'styled-components'
+
+export const SIZES = ['s', 'm', 'l', 'xl', 'original', 'fullWidth'] as const
+
+export const imageSizeStyles = {
+  s: css`
+    width: 100px;
+  `,
+  m: css`
+    width: 200px;
+  `,
+  l: css`
+    width: 360px;
+  `,
+  xl: css`
+    width: 600px;
+  `,
+  original: css`
+    width: auto;
+  `,
+  fullWidth: css`
+    width: 100%;
+  `,
+}
+
+export type RiImageSize = (typeof SIZES)[number]
+
+export interface RiImageProps extends HTMLAttributes<HTMLImageElement> {
+  $size?: RiImageSize
+  src: string
+  alt: string
+}
+
+export const StyledImage = styled.img<RiImageProps>`
+  ${({ $size = 'original' }) => imageSizeStyles[$size]}
+`

redisinsight/ui/src/components/base/display/image/image.styles.ts

@@ -1,7 +1,11 @@
 import Loader from './loader/Loader'
 import ProgressBarLoader from './progress-bar/ProgressBarLoader'
+import RiImage from './image/RiImage'
+import RiLoadingLogo from './loading-logo/RiLoadingLogo'
+import { Modal } from './modal'
+
+export { Loader, ProgressBarLoader, RiImage, RiLoadingLogo, Modal }
 
-export { Loader, ProgressBarLoader }
 export { RICollapsibleNavGroup } from './collapsible-nav-group/RICollapsibleNavGroup'
 
 export type { RICollapsibleNavGroupProps } from './collapsible-nav-group/RICollapsibleNavGroup'

redisinsight/ui/src/components/base/display/index.ts

@@ -0,0 +1,54 @@
+import React, { HTMLAttributes } from 'react'
+import styled, { keyframes } from 'styled-components'
+
+const bounce = keyframes`
+  0%, 100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-15px);
+  }
+`
+
+export const SIZES = ['M', 'L', 'XL', 'XXL'] as const
+
+export type RiLoadingLogoSize = (typeof SIZES)[number]
+
+export interface RiLoadingLogoProps extends HTMLAttributes<HTMLImageElement> {
+  src: string
+  $size?: RiLoadingLogoSize
+  $bounceSpeed?: number
+  alt?: string
+}
+
+const Wrapper = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const BouncingLogo = styled.img<RiLoadingLogoProps>`
+  width: ${({ theme, $size = 'XL' }) =>
+    theme.components.iconButton.sizes[$size].width};
+  animation: ${bounce} ${({ $bounceSpeed }) => $bounceSpeed}s ease-in-out
+    infinite;
+`
+
+const RiLoadingLogo = ({
+  src,
+  $size = 'XL',
+  $bounceSpeed = 1,
+  alt = 'Loading logo',
+}: RiLoadingLogoProps) => (
+  <Wrapper>
+    <BouncingLogo
+      src={src}
+      $size={$size}
+      $bounceSpeed={$bounceSpeed}
+      alt={alt}
+    />
+  </Wrapper>
+)
+
+export default RiLoadingLogo

redisinsight/ui/src/components/base/display/loading-logo/RiLoadingLogo.tsx

@@ -0,0 +1 @@
+export { Modal } from '@redis-ui/components'

redisinsight/ui/src/components/base/display/modal/index.ts

@@ -0,0 +1,5 @@
+import { ButtonGroup, ButtonGroupProps } from '@redis-ui/components'
+
+export { ButtonGroup }
+
+export type { ButtonGroupProps }

redisinsight/ui/src/components/base/forms/button-group/ButtonGroup.tsx

@@ -0,0 +1,15 @@
+import React, { ComponentProps } from 'react'
+
+import { Input as RedisInput, TooltipProvider } from '@redis-ui/components'
+
+export type RedisInputProps = ComponentProps<typeof RedisInput>
+
+export default function TextInput(props: RedisInputProps) {
+  // eslint-disable-next-line react/destructuring-assignment
+  if (props.error) {
+    return <TooltipProvider>
+      <RedisInput {...props} />
+    </TooltipProvider>
+  }
+  return <RedisInput {...props} />
+} 

redisinsight/ui/src/components/base/inputs/TextInput.tsx

@@ -3,3 +3,4 @@ export { default as SearchInput } from './SearchInput'
 export { default as NumericInput } from './NumericInput'
 export { default as SwitchInput } from './SwitchInput'
 export { default as TextArea } from './TextArea'
+export { default as TextInput } from './TextInput'  

redisinsight/ui/src/components/base/inputs/index.ts

@@ -0,0 +1,41 @@
+import React, { HTMLAttributes } from 'react'
+import styled from 'styled-components'
+import { useTheme } from '@redis-ui/styles'
+import { Spacer } from '../spacer'
+
+interface RiEmptyPromptProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  body?: React.ReactNode
+  title?: React.ReactNode
+  icon?: React.ReactNode
+}
+
+const StyledEmptyPrompt = styled.div`
+  max-width: 36em;
+  text-align: center;
+  padding: 24px;
+  margin: auto;
+`
+
+const RiEmptyPrompt = ({ body, title, icon, ...rest }: RiEmptyPromptProps) => {
+  const theme = useTheme()
+
+  return (<StyledEmptyPrompt {...rest}>
+    {icon}
+    {title && (
+      <>
+        <Spacer size={theme.core.space.space100} />
+        {title}
+      </>
+    )}
+    {body && (
+      <>
+        <Spacer size={theme.core.space.space100} />
+        {body}
+      </>
+    )}
+  </StyledEmptyPrompt>
+  )
+}
+  
+
+export default RiEmptyPrompt