fix(*Suggests): rewrite suggest items with new Table components

taskany-inc · Aug 7, 2023 · 7264ae8 · 7264ae8
1 parent bf3f714
commit 7264ae8
Show file tree

Hide file tree

Showing 10 changed files with 140 additions and 178 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "@sentry/nextjs": "7.60.0",
     "@tanstack/react-query": "4.29.5",
     "@tanstack/react-query-devtools": "4.29.5",
-    "@taskany/bricks": "1.27.3",
+    "@taskany/bricks": "1.28.0",
     "@taskany/colors": "1.1.0",
     "@taskany/icons": "1.0.0",
     "@tippyjs/react": "4.2.6",

diff --git a/src/components/GlobalSearch/GlobalSearch.tsx b/src/components/GlobalSearch/GlobalSearch.tsx
@@ -1,16 +1,16 @@
 /* eslint-disable no-nested-ternary */
 import React, { useState, ChangeEvent, useCallback, useMemo, useRef } from 'react';
 import styled from 'styled-components';
-import { ComboBox, Input, SearchIcon, Text } from '@taskany/bricks';
-import { gray7, textColor } from '@taskany/colors';
+import { ComboBox, Input, SearchIcon, Text, Table } from '@taskany/bricks';
+import { gapS, gapXs, gray7, radiusM, textColor } from '@taskany/colors';
+import NextLink from 'next/link';
 
 import { trpc } from '../../utils/trpcClient';
-import { useRouter } from '../../hooks/router';
+import { routes, useRouter } from '../../hooks/router';
 import { useHotkey } from '../../hooks/useHotkeys';
 import { Keyboard } from '../Keyboard';
 import { GoalListItemCompact } from '../GoalListItemCompact';
 import { ProjectListItemCompact } from '../ProjectListItemCompact';
-import { Table } from '../Table';
 
 import { tr } from './GlobalSearch.i18n';
 
@@ -34,8 +34,10 @@ const StyledTrigger = styled(StyledSearchIcon)`
     }
 `;
 
-const StyledResultsTable = styled(Table)`
-    grid-template-columns: 1fr minmax(300px, 30%) repeat(4, max-content) 1fr;
+const StyledRow = styled(GoalListItemCompact)`
+    padding: ${gapXs} ${gapS};
+    border-radius: ${radiusM};
+    cursor: pointer;
 `;
 
 enum ItemType {
@@ -120,26 +122,42 @@ export const GlobalSearch = React.forwardRef<HTMLDivElement>((_, ref) => {
                     {...props}
                 />
             )}
-            renderItems={(children) => (
-                <StyledResultsTable columns={6}>{children as React.ReactNode}</StyledResultsTable>
-            )}
+            renderItems={(children) => <Table width={700}>{children as React.ReactNode}</Table>}
             renderItem={(props) => {
                 switch (props.item.__kind) {
                     case ItemType.goal:
                         return (
-                            <GoalListItemCompact
+                            <NextLink
                                 key={props.item.id}
-                                shortId={props.item._shortId}
-                                projectId={props.item.projectId}
-                                title={props.item.title}
-                                state={props.item.state}
-                                issuer={props.item.activity}
-                                owner={props.item.owner}
-                                priority={props.item.priority}
-                                estimate={props.item._lastEstimate}
-                                focused={props.index === props.cursor}
-                                onClick={props.onClick}
-                            />
+                                passHref
+                                href={routes.goal(props.item._shortId)}
+                                legacyBehavior
+                            >
+                                <StyledRow
+                                    forwardedAs="a"
+                                    focused={props.index === props.cursor}
+                                    align="center"
+                                    gap={10}
+                                    onClick={props.onClick}
+                                    item={{
+                                        title: props.item.title,
+                                        priority: props.item.priority,
+                                        state: props.item.state,
+                                        owner: props.item.owner,
+                                        issuer: props.item.activity,
+                                        estimate: props.item._lastEstimate,
+                                        projectId: props.item.projectId,
+                                    }}
+                                    columns={[
+                                        { name: 'title', columnProps: { col: 3 } },
+                                        { name: 'state', columnProps: { col: 1, justify: 'end' } },
+                                        { name: 'priority', columnProps: { width: '12ch' } },
+                                        { name: 'projectId', columnProps: { col: 3 } },
+                                        { name: 'issuers' },
+                                        { name: 'estimate', columnProps: { width: '8ch' } },
+                                    ]}
+                                />
+                            </NextLink>
                         );
 
                     case ItemType.project:

diff --git a/src/components/GoalCriteria/GoalCriteria.tsx b/src/components/GoalCriteria/GoalCriteria.tsx
@@ -24,7 +24,7 @@ import { GoalAchiveCriteria } from '../../../trpc/inferredTypes';
 import { ActivityFeedItem } from '../ActivityFeed';
 import { Circle, CircledIcon } from '../Circle';
 import { UserGroup } from '../UserGroup';
-import { GoalListItemCompactCustomize, CustomCell } from '../GoalListItemCompact';
+import { GoalListItemCompact, CustomCell } from '../GoalListItemCompact';
 import { routes } from '../../hooks/router';
 import { AddCriteriaForm, EditCriteriaForm } from '../CriteriaForm/CriteriaForm';
 
@@ -77,7 +77,7 @@ const StyledCheckboxWrapper = styled.span<{ canEdit: boolean }>`
         `}
 `;
 
-const StyledTableRow = styled(GoalListItemCompactCustomize)`
+const StyledTableRow = styled(GoalListItemCompact)`
     padding: 3px 0 4px;
 `;
 

diff --git a/src/components/GoalDependencyList/GoalDependencyList.tsx b/src/components/GoalDependencyList/GoalDependencyList.tsx
@@ -11,7 +11,7 @@ import { ToggleGoalDependency, dependencyKind } from '../../schema/goal';
 import { ActivityByIdReturnType, GoalDependencyItem } from '../../../trpc/inferredTypes';
 import { Circle, CircledIcon as CircleIconInner } from '../Circle';
 import { ContentItem, Title } from '../Table';
-import { CustomCell, GoalListItemCompactCustomize } from '../GoalListItemCompact';
+import { CustomCell, GoalListItemCompact } from '../GoalListItemCompact';
 import { routes } from '../../hooks/router';
 import { UserGroup } from '../UserGroup';
 import { BetaBadge } from '../BetaBadge';
@@ -41,7 +41,7 @@ const StyledTable = styled(Table)`
     margin-bottom: 10px;
 `;
 
-const StyledTableRow = styled(GoalListItemCompactCustomize)`
+const StyledTableRow = styled(GoalListItemCompact)`
     position: relative;
 
     &:hover {

diff --git a/src/components/GoalListItemCompact.tsx b/src/components/GoalListItemCompact.tsx
@@ -1,25 +1,25 @@
 import React, { MouseEventHandler, useMemo } from 'react';
-import NextLink from 'next/link';
 import styled, { css } from 'styled-components';
 import {
     nullable,
     GoalIcon,
     Dropdown,
     MenuItem,
-    TableRow as BrickTableRow,
-    TableCell as BrickTableCel,
+    TableRow,
+    TableCell,
+    TableRowProps,
+    TableCellProps,
 } from '@taskany/bricks';
 import { IconMoreVerticalOutline } from '@taskany/icons';
 import type { Estimate, State as StateType } from '@prisma/client';
 
-import { routes } from '../hooks/router';
 import { Priority } from '../types/priority';
 import { ActivityByIdReturnType } from '../../trpc/inferredTypes';
 import { estimateToString } from '../utils/estimateToString';
 
 import { getPriorityText } from './PriorityText/PriorityText';
 import { UserGroup } from './UserGroup';
-import { TableRow, ContentItem, TitleItem, TitleContainer, Title, TextItem } from './Table';
+import { Title, TextItem } from './Table';
 import { StateDot } from './StateDot';
 
 interface CommonGoalListItemCompactProps {
@@ -39,55 +39,6 @@ type GoalListItemCompactProps = {
     onClick?: MouseEventHandler<HTMLAnchorElement>;
 } & CommonGoalListItemCompactProps;
 
-export const GoalListItemCompact: React.FC<GoalListItemCompactProps> = React.memo(
-    ({ shortId, projectId, owner, issuer, title, state, focused, estimate, priority, className, onClick }) => {
-        const issuers = useMemo(() => {
-            if (issuer && owner && owner.id === issuer.id) {
-                return [owner];
-            }
-
-            return [issuer, owner].filter(Boolean) as NonNullable<ActivityByIdReturnType>[];
-        }, [issuer, owner]);
-
-        return (
-            <NextLink href={routes.goal(shortId)} passHref legacyBehavior>
-                <TableRow as="a" focused={focused} onClick={onClick} className={className}>
-                    <ContentItem>
-                        <GoalIcon size="s" />
-                    </ContentItem>
-                    <TitleItem>
-                        <TitleContainer>
-                            <Title size="s" weight="bold">
-                                {title}
-                            </Title>
-                        </TitleContainer>
-                    </TitleItem>
-                    <ContentItem>
-                        {nullable(state, (s) => (
-                            <StateDot size="m" title={s?.title} hue={s?.hue} />
-                        ))}
-                    </ContentItem>
-                    <ContentItem>
-                        <TextItem weight="regular">{getPriorityText(priority as Priority)}</TextItem>
-                    </ContentItem>
-
-                    <ContentItem>
-                        <TextItem>{projectId}</TextItem>
-                    </ContentItem>
-
-                    <ContentItem align="center">
-                        <UserGroup users={issuers} />
-                    </ContentItem>
-
-                    <ContentItem>
-                        <TextItem>{nullable(estimate, (e) => estimateToString(e))}</TextItem>
-                    </ContentItem>
-                </TableRow>
-            </NextLink>
-        );
-    },
-);
-
 type ColumnRenderProps<T extends Record<string, any>> = T &
     Omit<GoalListItemCompactProps, 'onClick' | 'className' | 'focused' | 'owner' | 'issuer'> & {
         issuers: Array<ActivityByIdReturnType>;
@@ -96,7 +47,7 @@ type ColumnRenderProps<T extends Record<string, any>> = T &
 type GoalListItemCompactColumnProps<T = any> = {
     name: 'icon' | 'title' | 'state' | 'priority' | 'projectId' | 'issuers' | 'estimate' | string;
     renderColumn?: (props: T) => React.ReactElement<T>;
-    columnProps?: React.ComponentProps<typeof ContentItem>;
+    columnProps?: TableCellProps;
 };
 
 interface GoalItemAction {
@@ -121,7 +72,9 @@ interface GoalListItemCompactCustomizeProps<T extends Record<string, any>> {
 }
 
 interface GoalListItemCompactCustomizeRender {
-    <T extends Record<string, any>>(props: GoalListItemCompactCustomizeProps<T>): React.ReactElement<T>;
+    <T extends Record<string, any>>(
+        props: GoalListItemCompactCustomizeProps<T> & Omit<TableRowProps, 'interactive'>,
+    ): React.ReactElement<T>;
 }
 
 interface RenderColumnProps<T> {
@@ -133,7 +86,7 @@ interface ColumnRender {
     <T extends GoalListItemCompactProps>(props: RenderColumnProps<T>): React.ReactNode;
 }
 
-const StyledCell = styled(BrickTableCel)<{ forIcon?: boolean }>`
+const StyledCell = styled(TableCell)<{ forIcon?: boolean }>`
     ${({ forIcon }) =>
         forIcon &&
         css`
@@ -208,24 +161,32 @@ const Column: ColumnRender = ({ col, componentProps }) => {
             return null;
     }
 
-    return nullable(content, (c) => (
-        <StyledCell {...columnProps} forIcon={col.name === 'state'}>
-            {c}
-        </StyledCell>
-    ));
+    return nullable(content, (c) => <StyledCell {...columnProps}>{c}</StyledCell>);
 };
 
-export const GoalListItemCompactCustomize: GoalListItemCompactCustomizeRender = ({
+export const GoalListItemCompact: GoalListItemCompactCustomizeRender = ({
     columns,
     actions,
     rowIcon,
     onActionClick,
     onClick,
     className,
     item,
+    gap = 7,
+    align,
+    justify,
+    focused,
 }) => {
     return (
-        <BrickTableRow onClick={onClick} className={className} gap={7} align="baseline">
+        <TableRow
+            onClick={onClick}
+            className={className}
+            interactive={focused != null}
+            focused={focused}
+            gap={gap}
+            align={align}
+            justify={justify}
+        >
             <StyledCell key="icon" forIcon min>
                 {rowIcon || <GoalIcon size="s" />}
             </StyledCell>
@@ -255,7 +216,7 @@ export const GoalListItemCompactCustomize: GoalListItemCompactCustomizeRender =
                     ))}
                 </StyledActionsWrapper>
             </StyledCell>
-        </BrickTableRow>
+        </TableRow>
     );
 };