refactor: integrate EntityCardShared component in various dashboard widgets and remove unused styles

Author: kastov

src/pages/dashboard/subpage-config/ui/components/subpage-config-editor-page.component.tsx

@@ -218,6 +218,7 @@ export const SubpageConfigEditorPageComponent = (props: Props) => {
                         </ActionIcon>
                     </Group>
                 }
+                description={config.uuid}
                 icon={<TbFile size={24} />}
                 title={config.name}
             />

src/shared/ui/entity-card/entity-card.actions.tsx

@@ -0,0 +1,13 @@
+import { Group } from '@mantine/core'
+
+interface ActionsProps {
+    children: React.ReactNode
+}
+
+export function EntityCardActions({ children }: ActionsProps) {
+    return (
+        <Group gap={0} wrap="nowrap">
+            {children}
+        </Group>
+    )
+}

src/shared/ui/entity-card/entity-card.button-action.tsx

@@ -0,0 +1,34 @@
+import { Button } from '@mantine/core'
+
+import classes from './entity-card.module.css'
+
+interface ButtonActionProps {
+    children: React.ReactNode
+    color?: string
+    leftSection?: React.ReactNode
+    onClick?: (e: React.MouseEvent) => void
+}
+
+export function EntityCardButtonAction({
+    children,
+    leftSection,
+    onClick,
+    color = 'cyan'
+}: ButtonActionProps) {
+    return (
+        <Button
+            className={classes.button}
+            color={color}
+            fullWidth
+            leftSection={leftSection}
+            onClick={(e) => {
+                e.stopPropagation()
+                onClick?.(e)
+            }}
+            size="sm"
+            variant="light"
+        >
+            {children}
+        </Button>
+    )
+}

src/shared/ui/entity-card/entity-card.content.tsx

@@ -0,0 +1,32 @@
+import { Stack, Text } from '@mantine/core'
+
+import classes from './entity-card.module.css'
+
+interface ContentProps {
+    children?: React.ReactNode
+    subtitle?: string
+    title: string
+}
+
+export function EntityCardContent({ children, title, subtitle }: ContentProps) {
+    return (
+        <Stack gap={6} style={{ flex: 1, minWidth: 0 }}>
+            <Text
+                className={classes.title}
+                ff="monospace"
+                fw={700}
+                lineClamp={1}
+                size="lg"
+                title={title}
+            >
+                {title}
+            </Text>
+            {subtitle && (
+                <Text c="dimmed" className={classes.subtitle} lineClamp={1} size="xs">
+                    {subtitle}
+                </Text>
+            )}
+            {children}
+        </Stack>
+    )
+}

src/shared/ui/entity-card/entity-card.context.tsx

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react'
+
+interface EntityCardContextValue {
+    menuOpened: boolean
+    setMenuOpened: (opened: boolean) => void
+}
+
+export const EntityCardContext = createContext<EntityCardContextValue | null>(null)
+
+export const useEntityCardContext = () => {
+    const context = useContext(EntityCardContext)
+    if (!context) {
+        throw new Error('EntityCard components must be used within EntityCard')
+    }
+    return context
+}

src/shared/ui/entity-card/entity-card.header.tsx

@@ -0,0 +1,15 @@
+import { Group, Stack } from '@mantine/core'
+
+interface HeaderProps {
+    children: React.ReactNode
+}
+
+export function EntityCardHeader({ children }: HeaderProps) {
+    return (
+        <Stack gap="md">
+            <Group gap="md" wrap="nowrap">
+                {children}
+            </Group>
+        </Stack>
+    )
+}

src/shared/ui/entity-card/entity-card.icon.tsx

@@ -0,0 +1,23 @@
+import { ActionIcon, ActionIconProps, Box, PolymorphicComponentProps } from '@mantine/core'
+
+import classes from './entity-card.module.css'
+
+interface EntityCardIconProps extends PolymorphicComponentProps<'button', ActionIconProps> {
+    highlight?: boolean
+}
+
+export function EntityCardIcon({ children, highlight = true, ...props }: EntityCardIconProps) {
+    return (
+        <Box className={classes.iconWrapper}>
+            <ActionIcon
+                className={classes.icon}
+                color={highlight ? 'teal' : 'cyan'}
+                size="xl"
+                variant="light"
+                {...props}
+            >
+                {children}
+            </ActionIcon>
+        </Box>
+    )
+}

src/shared/ui/entity-card/entity-card.menu-action.tsx

@@ -0,0 +1,44 @@
+import { useDisclosure, useId } from '@mantine/hooks'
+import { ActionIcon, Menu } from '@mantine/core'
+import { TbChevronDown } from 'react-icons/tb'
+import clsx from 'clsx'
+
+// import { useEntityCardContext } from './entity-card.context'
+import classes from './entity-card.module.css'
+
+interface MenuActionProps {
+    children: React.ReactNode
+    color?: string
+}
+
+export function EntityCardMenuAction({ children, color = 'cyan' }: MenuActionProps) {
+    const uuid = useId()
+    // const { menuOpened, setMenuOpened } = useEntityCardContext()
+    const [opened, handlers] = useDisclosure()
+
+    return (
+        <Menu
+            key={uuid}
+            onClose={handlers.close}
+            onOpen={handlers.open}
+            position="bottom-end"
+            radius="md"
+            trigger="click-hover"
+            withinPortal
+        >
+            <Menu.Target>
+                <ActionIcon className={classes.menuControl} color={color} size="36" variant="light">
+                    <TbChevronDown
+                        className={clsx(classes.menuControlIcon, {
+                            [classes.menuControlIconOpen]: opened,
+                            [classes.menuControlIconClosed]: !opened
+                        })}
+                        size={20}
+                    />
+                </ActionIcon>
+            </Menu.Target>
+
+            <Menu.Dropdown>{children}</Menu.Dropdown>
+        </Menu>
+    )
+}

…quad-card/internal-squad-card.module.css …ed/ui/entity-card/entity-card.module.csssrc/widgets/dashboard/internal-squads/internal-squad-card/internal-squad-card.module.css renamed to src/shared/ui/entity-card/entity-card.module.css src/widgets/dashboard/internal-squads/internal-squad-card/internal-squad-card.module.css renamed to src/shared/ui/entity-card/entity-card.module.css

@@ -0,0 +1,34 @@
+import { Box, Card, Stack } from '@mantine/core'
+import { useState } from 'react'
+import clsx from 'clsx'
+
+import { EntityCardContext } from './entity-card.context'
+import classes from './entity-card.module.css'
+
+interface EntityCardProps {
+    children: React.ReactNode
+    withTopAccent?: boolean
+}
+
+export function EntityCardRoot({ children, withTopAccent = true }: EntityCardProps) {
+    const [menuOpened, setMenuOpened] = useState(false)
+
+    return (
+        <EntityCardContext.Provider value={{ menuOpened, setMenuOpened }}>
+            <Card className={classes.card} h="100%" p="xl" shadow="sm" withBorder>
+                <Box
+                    className={clsx({
+                        [classes.topAccent]: withTopAccent,
+                        [classes.inactiveTopAccent]: !withTopAccent
+                    })}
+                />
+
+                <Box className={classes.glowEffect} />
+
+                <Stack gap="lg" justify="space-between" style={{ flex: 1 }}>
+                    {children}
+                </Stack>
+            </Card>
+        </EntityCardContext.Provider>
+    )
+}