Extended spacer to support theme sizes

Author: KIvanow

redisinsight/ui/src/components/base/layout/empty-prompt/RiEmptyPrompt.tsx

@@ -1,5 +1,7 @@
 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
@@ -14,26 +16,26 @@ const StyledEmptyPrompt = styled.div`
   margin: auto;
 `
 
-const Spacer = styled.div`
-  height: ${({ theme }) => theme.core.space.space100};
-`
+const RiEmptyPrompt = ({ body, title, icon, ...rest }: RiEmptyPromptProps) => {
+  const theme = useTheme()
 
-const RiEmptyPrompt = ({ body, title, icon, ...rest }: RiEmptyPromptProps) => (
-  <StyledEmptyPrompt {...rest}>
+  return (<StyledEmptyPrompt {...rest}>
     {icon}
     {title && (
       <>
-        <Spacer />
+        <Spacer size={theme.core.space.space100} />
         {title}
       </>
     )}
     {body && (
       <>
-        <Spacer />
+        <Spacer size={theme.core.space.space100} />
         {body}
       </>
     )}
   </StyledEmptyPrompt>
-)
+  )
+}
+  
 
 export default RiEmptyPrompt

redisinsight/ui/src/components/base/layout/spacer/spacer.styles.ts

@@ -1,13 +1,20 @@
 import { HTMLAttributes, ReactNode } from 'react'
 import styled from 'styled-components'
 import { CommonProps } from 'uiSrc/components/base/theme/types'
+import { theme } from 'uiSrc/components/base/theme'
 
 export const SpacerSizes = ['xs', 's', 'm', 'l', 'xl', 'xxl'] as const
 export type SpacerSize = (typeof SpacerSizes)[number]
+
+// Extract only the spaceXXX keys from the theme
+export type ThemeSpacingKey = Extract<keyof typeof theme.semantic.core.space, `space${string}`>
+// Allow direct theme spacing values
+export type ThemeSpacingValue = typeof theme.semantic.core.space[ThemeSpacingKey]
+
 export type SpacerProps = CommonProps &
   HTMLAttributes<HTMLDivElement> & {
     children?: ReactNode
-    size?: SpacerSize
+    size?: SpacerSize | ThemeSpacingKey | ThemeSpacingValue
   }
 
 export const spacerStyles = {
@@ -20,7 +27,26 @@ export const spacerStyles = {
   xxl: 'var(--size-xxl)',
 }
 
+const isThemeSpacingKey = (
+  size: SpacerSize | ThemeSpacingKey | ThemeSpacingValue
+): size is ThemeSpacingKey => typeof size === 'string' && size in theme.semantic.core.space
+
+const getSpacingValue = (
+  size: SpacerSize | ThemeSpacingKey | ThemeSpacingValue, 
+): string => {
+  const themeSpacingValues = Object.values(theme.semantic.core.space)
+  if (typeof size === 'string' && themeSpacingValues.includes(size)) {
+    return size
+  }
+  
+  if (isThemeSpacingKey(size)) {
+    return theme?.semantic?.core?.space?.[size] || '0'
+  }
+
+  return spacerStyles[size as SpacerSize]
+}
+
 export const StyledSpacer = styled.div<SpacerProps>`
   flex-shrink: 0;
-  height: ${({ size = 'l' }) => spacerStyles[size]};
+  height: ${({ size = 'l' }) => getSpacingValue(size)};
 `

redisinsight/ui/src/components/base/layout/spacer/spacer.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import cx from 'classnames'
+import { useTheme } from '@redis-ui/styles'
 import {
   SpacerProps,
   StyledSpacer,
@@ -9,17 +10,21 @@ import {
  * A simple spacer component that can be used to add vertical spacing between
  * other components. The size of the spacer can be specified using the `size`
  * prop, which can be one of the following values:
- *   - 'xs' = 4px
- *   - 's' = 8px
- *   - 'm' = 12px
- *   - 'l' = 16px
- *   - 'xl' = 24px
- *   - 'xxl' = 32px.
+ *   - Legacy sizes: 'xs' = 4px, 's' = 8px, 'm' = 12px, 'l' = 16px, 'xl' = 24px, 'xxl' = 32px
+ *   - Theme spacing sizes: Any key from theme.semantic.core.space (e.g., 'space000', 'space010', 
+ *     'space025', 'space050', 'space100', 'space150', 'space200', 'space250', 'space300', 
+ *     'space400', 'space500', 'space550', 'space600', 'space800', etc.)
+ *
+ *   The theme spacing tokens are dynamically extracted from the theme, ensuring consistency
+ *   and automatic updates when the theme changes.
  *
  *   The default value for `size` is 'l'.
  */
-export const Spacer = ({ className, children, ...rest }: SpacerProps) => (
-  <StyledSpacer {...rest} className={cx('RI-spacer', className)}>
+export const Spacer = ({ className, children, ...rest }: SpacerProps) => {
+  const theme = useTheme()
+  return (
+    <StyledSpacer {...rest} className={cx('RI-spacer', className)} theme={theme}>
     {children}
   </StyledSpacer>
 )
+}