Skip to content

Commit 7a3805b

Browse files
pd-redispd-redis
authored
RI-7781: modules icons: incorrect spacing (#5288)
* refactor(ui): migrate DatabaseListModules to styled-components and extract sub-components Migrated component from SCSS modules to styled-components, extracted sub-components (DatabaseModuleItem, DatabaseModuleContentItem, DatabaseModulesList) into components folder, and added new vector_sets.svg icon. References: #RI-7781
1 parent f7ba473 commit 7a3805b

30 files changed

Lines changed: 683 additions & 314 deletions

‎.storybook/helpers/styles.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,6 @@ export const StyledContainer = styled(PageBody)`
1111
theme.semantic.color.background.neutral100};
1212
border: 2px solid
1313
${({ theme }: { theme: Theme }) => theme.semantic.color.border.neutral500};
14+
align-items: center;
15+
justify-content: center;
1416
`

‎.storybook/preview.tsx‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import React from 'react'
22
import type { Parameters, Preview } from '@storybook/react-vite'
33
import { withThemeFromJSXProvider } from '@storybook/addon-themes'
4-
import {
5-
createGlobalStyle,
6-
ThemeProvider as StyledThemeProvider,
7-
} from 'styled-components'
8-
import { CommonStyles, themeDark, themeLight, themeOld } from '@redis-ui/styles'
4+
import { ThemeProvider as StyledThemeProvider } from 'styled-components'
5+
import { CommonStyles, themeDark, themeLight } from '@redis-ui/styles'
96
import 'modern-normalize/modern-normalize.css'
107
import '@redis-ui/styles/normalized-styles.css'
118
import '@redis-ui/styles/fonts.css'
@@ -14,8 +11,6 @@ import { RootStoryLayout } from './RootStoryLayout'
1411
import { StoryContextProvider } from './Story.context'
1512
import { useStoryContext } from 'storybook/internal/preview-api'
1613
import { TooltipProvider } from '@redis-ui/components'
17-
import { type Theme } from 'uiSrc/components/base/theme/types'
18-
// import { store } from 'uiSrc/utils/test-utils'
1914
import { Provider } from 'react-redux'
2015
import { store } from 'uiSrc/slices/store'
2116
import Router from 'uiSrc/Router'
@@ -51,13 +46,6 @@ const parameters: Parameters = {
5146
},
5247
}
5348

54-
const GlobalStoryStyles = createGlobalStyle`
55-
.sb-show-main, .docs-story {
56-
background: ${({ theme }: { theme: Theme }) => theme.globals.body.bgColor};
57-
color: ${({ theme }: { theme: Theme }) => theme.components.typography.colors.primary};
58-
}
59-
`
60-
6149
const preview: Preview = {
6250
parameters,
6351
decorators: [
@@ -82,11 +70,9 @@ const preview: Preview = {
8270
themes: {
8371
light: themeLight,
8472
dark: themeDark,
85-
obsolete: themeOld,
8673
},
8774
defaultTheme: 'light',
8875
Provider: StyledThemeProvider,
89-
GlobalStyles: GlobalStoryStyles,
9076
}),
9177
],
9278
}

‎redisinsight/ui/src/assets/img/icons/vector_sets.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎redisinsight/ui/src/assets/img/modules/RedisGears2.svg‎

Lines changed: 14 additions & 0 deletions
Loading

‎redisinsight/ui/src/assets/img/modules/Unknown.svg‎

Lines changed: 22 additions & 0 deletions
Loading

‎redisinsight/ui/src/components/base/icons/iconRegistry.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ import RedisBloomDark from 'uiSrc/assets/img/modules/RedisBloomDark.svg?react'
101101
import RedisBloomLight from 'uiSrc/assets/img/modules/RedisBloomLight.svg?react'
102102
import RedisGears2Dark from 'uiSrc/assets/img/modules/RedisGears2Dark.svg?react'
103103
import RedisGears2Light from 'uiSrc/assets/img/modules/RedisGears2Light.svg?react'
104+
import RedisGears2Svg from 'uiSrc/assets/img/modules/RedisGears2.svg?react'
104105
import RedisGearsDark from 'uiSrc/assets/img/modules/RedisGearsDark.svg?react'
105106
import RedisGearsLight from 'uiSrc/assets/img/modules/RedisGearsLight.svg?react'
106107
import RedisGraphDark from 'uiSrc/assets/img/modules/RedisGraphDark.svg?react'
@@ -113,7 +114,9 @@ import RedisTimeSeriesDark from 'uiSrc/assets/img/modules/RedisTimeSeriesDark.sv
113114
import RedisTimeSeriesLight from 'uiSrc/assets/img/modules/RedisTimeSeriesLight.svg?react'
114115
import UnknownDark from 'uiSrc/assets/img/modules/UnknownDark.svg?react'
115116
import UnknownLight from 'uiSrc/assets/img/modules/UnknownLight.svg?react'
117+
import UnknownSvg from 'uiSrc/assets/img/modules/Unknown.svg?react'
116118
import FormatterSvg from 'uiSrc/assets/img/icons/formatter.svg?react'
119+
import VectorSetSvg from 'uiSrc/assets/img/icons/vector_sets.svg?react'
117120

118121
// Import options icons
119122
import ActiveActiveDark from 'uiSrc/assets/img/options/Active-ActiveDark.svg?react'
@@ -266,6 +269,7 @@ export const RedisBloomDarkIcon = createIconComponent(RedisBloomDark)
266269
export const RedisBloomLightIcon = createIconComponent(RedisBloomLight)
267270
export const RedisGears2DarkIcon = createIconComponent(RedisGears2Dark)
268271
export const RedisGears2LightIcon = createIconComponent(RedisGears2Light)
272+
export const RedisGears2Icon = createIconComponent(RedisGears2Svg)
269273
export const RedisGearsDarkIcon = createIconComponent(RedisGearsDark)
270274
export const RedisGearsLightIcon = createIconComponent(RedisGearsLight)
271275
export const RedisGraphDarkIcon = createIconComponent(RedisGraphDark)
@@ -285,6 +289,8 @@ export const RedisTimeSeriesLightIcon =
285289
createIconComponent(RedisTimeSeriesLight)
286290
export const UnknownDarkIcon = createIconComponent(UnknownDark)
287291
export const UnknownLightIcon = createIconComponent(UnknownLight)
292+
export const UnknownModuleIcon = createIconComponent(UnknownSvg)
293+
export const VectorSetIcon = createIconComponent(VectorSetSvg)
288294

289295
// Options icons
290296
export const ActiveActiveDarkIcon = createIconComponent(ActiveActiveDark)

‎redisinsight/ui/src/components/database-list-modules/DatabaseListModules.spec.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@ import {
66
} from 'uiSrc/slices/interfaces'
77
import { fireEvent, render, act } from 'uiSrc/utils/test-utils'
88
import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module'
9-
import DatabaseListModules, { Props } from './DatabaseListModules'
9+
import { DatabaseListModules } from './DatabaseListModules'
10+
import { DatabaseListModulesProps } from './DatabaseListModules.types'
1011

11-
const mockedProps = mock<Props>()
12+
const mockedProps = mock<DatabaseListModulesProps>()
1213

1314
const modulesMock: AdditionalRedisModule[] = [
1415
{ name: RedisDefaultModules.AI },
@@ -41,7 +42,7 @@ describe('DatabaseListModules', () => {
4142

4243
const module = queryByTestId(`${term}_module`)
4344

44-
await act(() => {
45+
await act(async () => {
4546
module && fireEvent.click(module)
4647
})
4748

‎redisinsight/ui/src/components/database-list-modules/DatabaseListModules.stories.tsx‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import React from 'react'
2+
import type { Meta, StoryObj } from '@storybook/react-vite'
3+
4+
import { DatabaseListModules } from './DatabaseListModules'
5+
import { RedisDefaultModules } from 'uiSrc/slices/interfaces'
6+
import type { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module'
7+
8+
const meta: Meta<typeof DatabaseListModules> = {
9+
component: DatabaseListModules,
10+
tags: ['autodocs'],
11+
}
12+
13+
export default meta
14+
15+
type Story = StoryObj<typeof meta>
16+
17+
const commonModules: AdditionalRedisModule[] = [
18+
{ name: RedisDefaultModules.Search },
19+
{ name: RedisDefaultModules.ReJSON },
20+
{ name: RedisDefaultModules.TimeSeries },
21+
]
22+
23+
const allModules: AdditionalRedisModule[] = [
24+
{ name: RedisDefaultModules.AI },
25+
{ name: RedisDefaultModules.Bloom },
26+
{ name: RedisDefaultModules.Gears },
27+
{ name: RedisDefaultModules.RedisGears },
28+
{ name: RedisDefaultModules.RedisGears2 },
29+
{ name: RedisDefaultModules.Graph },
30+
{ name: RedisDefaultModules.ReJSON },
31+
{ name: RedisDefaultModules.Search },
32+
{ name: RedisDefaultModules.SearchLight },
33+
{ name: RedisDefaultModules.TimeSeries },
34+
{ name: RedisDefaultModules.FT },
35+
{ name: RedisDefaultModules.FTL },
36+
{ name: RedisDefaultModules.VectorSet },
37+
]
38+
const withVectorSet: AdditionalRedisModule[] = [
39+
{
40+
name: RedisDefaultModules.Bloom,
41+
version: 80200,
42+
semanticVersion: '8.2.0',
43+
},
44+
{
45+
name: RedisDefaultModules.VectorSet,
46+
version: 1,
47+
semanticVersion: '0.0.1',
48+
},
49+
{
50+
name: RedisDefaultModules.Search,
51+
version: 80201,
52+
semanticVersion: '8.2.1',
53+
},
54+
{
55+
name: RedisDefaultModules.TimeSeries,
56+
version: 80200,
57+
semanticVersion: '8.2.0',
58+
},
59+
{
60+
name: RedisDefaultModules.ReJSON,
61+
version: 80200,
62+
semanticVersion: '8.2.0',
63+
},
64+
]
65+
66+
const customModules: AdditionalRedisModule[] = [
67+
{ name: 'CustomModule1' },
68+
{ name: 'AnotherCustomModule', semanticVersion: '1.0.0' },
69+
{ name: RedisDefaultModules.Search },
70+
]
71+
72+
export const AllModules: Story = {
73+
args: {
74+
modules: allModules,
75+
},
76+
}
77+
78+
export const WithVectorSet: Story = {
79+
args: {
80+
modules: withVectorSet,
81+
},
82+
}
83+
84+
export const SingleModule: Story = {
85+
args: {
86+
modules: [{ name: RedisDefaultModules.Search }],
87+
},
88+
}
89+
90+
export const CommonModules: Story = {
91+
args: {
92+
modules: commonModules,
93+
},
94+
}
95+
96+
export const WithCustomModules: Story = {
97+
args: {
98+
modules: customModules,
99+
},
100+
}
101+
102+
export const InCircle: Story = {
103+
args: {
104+
modules: commonModules,
105+
inCircle: true,
106+
},
107+
}
108+
109+
export const Highlighted: Story = {
110+
args: {
111+
modules: commonModules,
112+
highlight: true,
113+
},
114+
}
115+
116+
export const InCircleAndHighlighted: Story = {
117+
args: {
118+
modules: commonModules,
119+
inCircle: true,
120+
highlight: true,
121+
},
122+
}
123+
124+
export const WithCustomContent: Story = {
125+
args: {
126+
modules: commonModules,
127+
content: <span>Custom Content</span>,
128+
},
129+
}
130+
131+
export const WithTooltipTitle: Story = {
132+
args: {
133+
modules: commonModules,
134+
tooltipTitle: 'Database Capabilities',
135+
},
136+
}
137+
138+
export const WithoutStyles: Story = {
139+
args: {
140+
modules: commonModules,
141+
withoutStyles: true,
142+
},
143+
}

‎redisinsight/ui/src/components/database-list-modules/DatabaseListModules.styles.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from 'react'
2+
import styled, { css } from 'styled-components'
3+
4+
export interface StyledContainerProps {
5+
$unstyled?: boolean
6+
$highlight?: boolean
7+
$inCircle?: boolean
8+
children?: React.ReactNode
9+
}
10+
11+
const highlightStyles = css`
12+
background-color: ${({ theme }) =>
13+
theme.semantic.color.background.neutral300};
14+
border-radius: ${({ theme }) => theme.core.space.space150};
15+
`
16+
17+
const inCircleStyles = css`
18+
height: ${({ theme }) => theme.core.space.space400};
19+
`
20+
21+
export const StyledContainer = styled.div<StyledContainerProps>`
22+
${({ $unstyled, $highlight, $inCircle }) =>
23+
!$unstyled &&
24+
css`
25+
height: ${({ theme }) => theme.core.space.space300};
26+
line-height: ${({ theme }) => theme.core.space.space250};
27+
display: inline-block;
28+
width: auto;
29+
padding-left: ${({ theme }) => theme.core.space.space050};
30+
padding-right: ${({ theme }) => theme.core.space.space050};
31+
32+
${$highlight && highlightStyles}
33+
34+
${$inCircle && inCircleStyles}
35+
`}
36+
`

0 commit comments

Comments
 (0)