feat: harmony Fieldset

taskany-inc · May 23, 2024 · b5c05f5 · b5c05f5
1 parent 3a63d00
commit b5c05f5
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 66 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "@sentry/nextjs": "7.99.0",
     "@tanstack/react-query": "4.29.5",
     "@tanstack/react-query-devtools": "4.29.6",
-    "@taskany/bricks": "5.34.0",
+    "@taskany/bricks": "0.0.0-d26247f",
     "@taskany/colors": "1.13.0",
     "@taskany/icons": "2.0.7",
     "@tippyjs/react": "4.2.6",

diff --git a/src/components/GoalContentHeader/GoalContentHeader.module.css b/src/components/GoalContentHeader/GoalContentHeader.module.css
@@ -23,3 +23,10 @@
 .GoalContentHeaderCard {
     margin-bottom: var(--gap-m);
 }
+
+.DropdownItem {
+    display: flex;
+    align-items: baseline;
+    gap: var(--gap-s);
+    color: var(--text-secondary);
+}
diff --git a/src/components/GoalContentHeader/GoalContentHeader.tsx b/src/components/GoalContentHeader/GoalContentHeader.tsx
@@ -1,4 +1,4 @@
-import { Dropdown, MenuItem, nullable, useCopyToClipboard } from '@taskany/bricks';
+import { nullable, useCopyToClipboard } from '@taskany/bricks';
 import { Card, CardContent, CardInfo, Text } from '@taskany/bricks/harmony';
 import { ComponentProps, FC, useCallback, useMemo } from 'react';
 import dynamic from 'next/dynamic';
@@ -8,6 +8,7 @@ import * as Sentry from '@sentry/nextjs';
 import { RelativeTime } from '../RelativeTime/RelativeTime';
 import { useClickSwitch } from '../../hooks/useClickSwitch';
 import { notifyPromise } from '../../utils/notifyPromise';
+import { Dropdown, DropdownPanel, DropdownTrigger } from '../Dropdown/Dropdown';
 
 import { tr } from './GoalContentHeader.i18n';
 import s from './GoalContentHeader.module.css';
@@ -36,6 +37,7 @@ export const GoalContentHeader: FC<GoalContentHeaderProps> = ({ description, dat
     const dropdownItems = useMemo(() => {
         return [
             {
+                id: 'copy',
                 label: tr('Copy raw'),
                 icon: <IconClipboardOutline size="xxs" />,
                 onClick: onCopyDescription,
@@ -48,22 +50,30 @@ export const GoalContentHeader: FC<GoalContentHeaderProps> = ({ description, dat
             <CardInfo className={s.CardInfo} onClick={onDateViewTypeChange}>
                 <RelativeTime kind={kind} className={s.CardInfoTime} isRelativeTime={isRelative} date={date} />
                 {nullable(description, () => (
-                    <Dropdown
-                        items={dropdownItems}
-                        renderTrigger={({ ref, onClick }) => (
-                            <IconMoreVerticalOutline
-                                size="xs"
-                                ref={ref}
-                                onClick={onClick}
-                                className={s.DropdownTrigger}
-                            />
-                        )}
-                        renderItem={({ item }) => (
-                            <MenuItem key={item.label} ghost icon={item.icon} onClick={item.onClick}>
-                                {item.label}
-                            </MenuItem>
-                        )}
-                    />
+                    <Dropdown>
+                        <DropdownTrigger
+                            renderTrigger={({ onClick, ref }) => (
+                                <IconMoreVerticalOutline
+                                    size="xs"
+                                    ref={ref}
+                                    onClick={onClick}
+                                    className={s.DropdownTrigger}
+                                />
+                            )}
+                        />
+                        <DropdownPanel
+                            placement="bottom-start"
+                            items={dropdownItems}
+                            mode="single"
+                            onChange={(props) => props.onClick?.()}
+                            renderItem={({ item }) => (
+                                <Text key={item.label} className={s.DropdownItem} onClick={item.onClick}>
+                                    {item.icon}
+                                    {item.label}
+                                </Text>
+                            )}
+                        />
+                    </Dropdown>
                 ))}
             </CardInfo>
 

diff --git a/src/components/GoalListItemCompact/GoalListItemCompact.tsx b/src/components/GoalListItemCompact/GoalListItemCompact.tsx
@@ -1,8 +1,8 @@
 import React, { ComponentProps, FC, MouseEventHandler, useMemo } from 'react';
 import cn from 'classnames';
-import { nullable, Dropdown, MenuItem } from '@taskany/bricks';
+import { nullable } from '@taskany/bricks';
 import { TableRow, TableCell, UserGroup } from '@taskany/bricks/harmony';
-import { IconMoreVerticalOutline, IconTargetOutline } from '@taskany/icons';
+import { IconTargetOutline } from '@taskany/icons';
 import type { State as StateType } from '@prisma/client';
 
 import { DateType } from '../../types/date';
@@ -52,26 +52,17 @@ type GoalListItemCompactColumnProps<T = any> = {
     columnProps?: TableCellProps;
 };
 
-interface GoalItemAction {
-    label: string;
-    handler: () => void;
-    color?: string;
-    icon: React.ReactNode;
-}
-
 type CanBeNullableValue<T> = { [K in keyof T]?: T[K] | null };
 
 interface GoalListItemCompactCustomizeProps<T extends Record<string, any>> {
     item: T & CanBeNullableValue<CommonGoalListItemCompactProps>;
     icon?: boolean;
     rawIcon?: React.ReactNode;
-    actions?: Array<GoalItemAction>;
     columns: Array<GoalListItemCompactColumnProps<ColumnRenderProps<T>>>;
     focused?: boolean;
     forwardedAs?: keyof JSX.IntrinsicElements;
     className?: string;
 
-    onActionClick?: <A extends NonNullable<GoalListItemCompactCustomizeProps<T>['actions']>[number]>(action: A) => void;
     onClick?: React.MouseEventHandler;
 }
 
@@ -165,11 +156,9 @@ const Column: ColumnRender = ({ col, componentProps }) => {
 
 export const GoalListItemCompact: GoalListItemCompactCustomizeRender = ({
     columns,
-    actions,
     icon,
     rawIcon = <IconTargetOutline size="s" />,
     item,
-    onActionClick,
     ...attrs
 }) => {
     return (
@@ -182,30 +171,6 @@ export const GoalListItemCompact: GoalListItemCompactCustomizeRender = ({
             {columns.map((col) => (
                 <Column key={col.name} col={col} componentProps={item} />
             ))}
-            {nullable(actions, (list) => (
-                <CustomCell key="actions" forIcon>
-                    <div className={s.GoalListItemCompactDropdownWrapper}>
-                        <Dropdown
-                            className={s.GoalListItemCompactDropdown}
-                            onChange={onActionClick}
-                            renderTrigger={({ onClick }) => <IconMoreVerticalOutline size="xs" onClick={onClick} />}
-                            placement="right"
-                            items={list}
-                            renderItem={(props) => (
-                                <MenuItem
-                                    key={props.index}
-                                    onClick={props.onClick}
-                                    icon={props.item.icon}
-                                    ghost
-                                    color={props.item.color}
-                                >
-                                    {props.item.label}
-                                </MenuItem>
-                            )}
-                        />
-                    </div>
-                </CustomCell>
-            ))}
         </TableRow>
     );
 };
diff --git a/src/components/ProjectAccessUser/ProjectAccessUser.tsx b/src/components/ProjectAccessUser/ProjectAccessUser.tsx
@@ -1,6 +1,6 @@
 import { FC, useCallback, useMemo, useState } from 'react';
-import { Fieldset, nullable } from '@taskany/bricks';
-import { Switch, SwitchControl } from '@taskany/bricks/harmony';
+import { nullable } from '@taskany/bricks';
+import { Fieldset, Switch, SwitchControl } from '@taskany/bricks/harmony';
 
 import { ActivityByIdReturnType, ProjectByIdReturnType } from '../../../trpc/inferredTypes';
 import { useProjectResource } from '../../hooks/useProjectResource';

diff --git a/src/components/ProjectListItem/ProjectListItem.tsx b/src/components/ProjectListItem/ProjectListItem.tsx
@@ -1,5 +1,5 @@
-import { CircleProgressBar, nullable } from '@taskany/bricks';
-import { TableCell, TableRow, UserGroup } from '@taskany/bricks/harmony';
+import { nullable } from '@taskany/bricks';
+import { CircleProgressBar, TableCell, TableRow, UserGroup } from '@taskany/bricks/harmony';
 import cn from 'classnames';
 import { IconStarSolid, IconEyeOutline } from '@taskany/icons';
 import { ComponentProps, useMemo } from 'react';

diff --git a/src/components/ProjectParticipants/ProjectParticipants.tsx b/src/components/ProjectParticipants/ProjectParticipants.tsx
@@ -1,5 +1,5 @@
 import { ComponentProps, FC, useCallback, useMemo } from 'react';
-import { Fieldset } from '@taskany/bricks';
+import { Fieldset } from '@taskany/bricks/harmony';
 
 import { useProjectResource } from '../../hooks/useProjectResource';
 import { SettingsCard, SettingsCardItem } from '../SettingsContent/SettingsContent';

diff --git a/src/components/ProjectSettingsPage/ProjectSettingsPage.tsx b/src/components/ProjectSettingsPage/ProjectSettingsPage.tsx
@@ -2,7 +2,7 @@ import { ChangeEvent, useCallback, useState } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import dynamic from 'next/dynamic';
-import { Fieldset, nullable } from '@taskany/bricks';
+import { nullable } from '@taskany/bricks';
 import { IconExclamationCircleSolid, IconPlusCircleOutline } from '@taskany/icons';
 import {
     Tip,
@@ -17,6 +17,7 @@ import {
     ModalContent,
     Tag,
     TagCleanButton,
+    Fieldset,
 } from '@taskany/bricks/harmony';
 
 import { ExternalPageProps } from '../../utils/declareSsrProps';

diff --git a/src/components/UserSettingsPage/UserSettingsPage.tsx b/src/components/UserSettingsPage/UserSettingsPage.tsx
@@ -3,7 +3,7 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useTheme } from 'next-themes';
 import { signOut } from 'next-auth/react';
-import { Fieldset, nullable } from '@taskany/bricks';
+import { nullable } from '@taskany/bricks';
 import { z } from 'zod';
 import dynamic from 'next/dynamic';
 import {
@@ -16,6 +16,7 @@ import {
     RadioGroup,
     RadioControl,
     RadioGroupLabel,
+    Fieldset,
 } from '@taskany/bricks/harmony';
 
 import { ExternalPageProps } from '../../utils/declareSsrProps';