feat: alertdialog story (#974)

Co-authored-by: Guido <stereopt@gmail.com>
xgeekshq · Jan 31, 2023 · 377f306 · 377f306
1 parent 8e3e01e
commit 377f306
Show file tree

Hide file tree

Showing 15 changed files with 375 additions and 464 deletions.
diff --git a/frontend/src/components/Board/Card/DeleteCard.tsx b/frontend/src/components/Board/Card/DeleteCard.tsx
@@ -1,4 +1,11 @@
-import AlertCustomDialog from '@/components/Primitives/AlertCustomDialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+} from '@/components/Primitives/AlertDialog';
+import Flex from '@/components/Primitives/Flex';
+import Text from '@/components/Primitives/Text';
 import useCards from '@/hooks/useCards';
 
 interface DeleteProps {
@@ -42,21 +49,22 @@ const DeleteCard = ({
   };
 
   return (
-    <AlertCustomDialog
-      defaultOpen
-      addEllipsis={cardTitle.length > 100}
-      cancelText="Cancel"
-      confirmText="Delete card"
-      handleClose={handleClose}
-      handleConfirm={handleDelete}
-      title="Delete card"
-      variant="danger"
-      text={
-        <>
-          Do you really want to delete <span>{cardTitle}</span> card?
-        </>
-      }
-    />
+    <AlertDialog defaultOpen>
+      <AlertDialogContent title="Delete card">
+        <Text>Do you really want to delete the following card?</Text>
+        <Text ellipsis fontWeight="bold">
+          {cardTitle}
+        </Text>
+        <Flex gap="16" justify="end" css={{ mt: '$24' }}>
+          <AlertDialogCancel variant="primaryOutline" onClick={handleClose}>
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction variant="danger" onClick={handleDelete}>
+            Delete card
+          </AlertDialogAction>
+        </Flex>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 };
 

diff --git a/frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx b/frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx
@@ -1,25 +1,19 @@
-import Icon from '@/components/icons/Icon';
-import {
-  DialogTitleContainer,
-  StyledDialogTitle,
-} from '@/components/Primitives/AlertCustomDialog/styles';
+// TODO: AlertDialog handle is weird!
 import {
   AlertDialog,
+  AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
 } from '@/components/Primitives/AlertDialog';
 import Flex from '@/components/Primitives/Flex';
 import Input from '@/components/Primitives/Input';
-import Separator from '@/components/Primitives/Separator';
 import { SchemaChangeColumnName } from '@/schema/schemaChangeColumnName';
-import { ReactNode, useRef } from 'react';
+import { useRef } from 'react';
 import { joiResolver } from '@hookform/resolvers/joi';
 import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import { styled } from '@/styles/stitches/stitches.config';
-import Button from '@/components/Primitives/Button';
 import useColumn from '@/hooks/useColumn';
 import CardType from '@/types/card/card';
-import { ButtonsContainer } from '@/components/Board/Settings/styles';
 import Text from '@/components/Primitives/Text';
 import TextArea from '@/components/Primitives/TextArea';
 
@@ -31,7 +25,6 @@ type UpdateColumnNameProps = {
   cards: CardType[];
   isOpen: boolean;
   setIsOpen: (value: boolean) => void;
-  children?: ReactNode;
   cardText?: string;
   isDefaultText?: boolean;
   type: string;
@@ -48,7 +41,6 @@ const UpdateColumnDialog: React.FC<UpdateColumnNameProps> = ({
   cards,
   isOpen,
   setIsOpen,
-  children,
   isDefaultText,
   type,
 }) => {
@@ -101,87 +93,56 @@ const UpdateColumnDialog: React.FC<UpdateColumnNameProps> = ({
 
   return (
     <AlertDialog open={isOpen}>
-      {children}
-      <AlertDialogContent handleClose={handleClose}>
-        <DialogTitleContainer css={{ px: '$24' }} align="center" justify="between">
-          <StyledDialogTitle heading="4">
-            {type === 'ColumnName' ? 'Update column name' : 'Activate card default text'}
-          </StyledDialogTitle>
-
-          <AlertDialogCancel
-            asChild
-            isIcon
-            css={{ '@hover': { '&:hover': { cursor: 'pointer' } } }}
-            onClick={handleClose}
-          >
-            <Flex css={{ '& svg': { color: '$primaryBase' } }}>
-              <Icon css={{ width: '$24', height: '$24' }} name="close" />
-            </Flex>
-          </AlertDialogCancel>
-        </DialogTitleContainer>
+      <AlertDialogContent
+        title={type === 'ColumnName' ? 'Update column name' : 'Activate card default text'}
+        handleClose={handleClose}
+      >
         <FormProvider {...methods}>
           <StyledForm
             id="form_dialog"
             onSubmit={methods.handleSubmit(({ title, text }) => {
               handleConfirm(title, text);
             })}
+            direction="column"
+            gap="16"
           >
-            <Flex direction="column" css={{ width: '100%' }}>
-              <Separator css={{ backgroundColor: '$primary100' }} />
-              <Flex direction="column" css={{ width: '100%', px: '$32', pt: '$24' }}>
-                {type === 'ColumnName' ? (
-                  <Input
-                    forceState
-                    id="title"
-                    maxChars="15"
-                    placeholder="Column name"
-                    state="default"
-                    type="text"
-                    showCount
-                    currentValue={columnName}
-                  />
-                ) : (
-                  <>
-                    <Text size="md" color="primary400" fontWeight="regular">
-                      This default text will be visible as placeholder when someone is creating a
-                      new card.
-                    </Text>
-                    <TextArea
-                      floatPlaceholder={false}
-                      id="text"
-                      placeholder={columnTextCard || 'Write your comment here...'}
-                    />
-                  </>
-                )}
-              </Flex>
-              <ButtonsContainer
-                gap={24}
-                align="center"
-                justify="end"
-                css={{
-                  backgroundColor: '$white',
-                  borderRadius: '$12',
-                  border: 'none',
-                }}
+            {type === 'ColumnName' ? (
+              <Input
+                forceState
+                id="title"
+                maxChars="15"
+                placeholder="Column name"
+                state="default"
+                type="text"
+                showCount
+                currentValue={columnName}
+                css={{ mb: '0' }}
+              />
+            ) : (
+              <>
+                <Text size="md" color="primary400" fontWeight="regular">
+                  This default text will be visible as placeholder when someone is creating a new
+                  card.
+                </Text>
+                <TextArea
+                  floatPlaceholder={false}
+                  id="text"
+                  placeholder={columnTextCard || 'Write your comment here...'}
+                />
+              </>
+            )}
+            <Flex gap="16" justify="end">
+              <AlertDialogCancel variant="primaryOutline" onClick={handleClose}>
+                Cancel
+              </AlertDialogCancel>
+              <AlertDialogAction
+                variant="primary"
+                form="form_dialog"
+                ref={submitBtnRef}
+                type="submit"
               >
-                <Button
-                  css={{ margin: '0 $24 0 auto', padding: '$16 $24' }}
-                  variant="primaryOutline"
-                  onClick={handleClose}
-                  type="button"
-                >
-                  Cancel
-                </Button>
-
-                <Button
-                  css={{ marginRight: '$32', padding: '$16 $24' }}
-                  variant="primary"
-                  form="form_dialog"
-                  ref={submitBtnRef}
-                >
-                  {type === 'ColumnName' ? 'Update column name' : 'Activate card default text'}
-                </Button>
-              </ButtonsContainer>
+                {type === 'ColumnName' ? 'Update column name' : 'Activate card default text'}
+              </AlertDialogAction>
             </Flex>
           </StyledForm>
         </FormProvider>

diff --git a/frontend/src/components/Board/Settings/partials/Columns/DeleteButton.tsx b/frontend/src/components/Board/Settings/partials/Columns/DeleteButton.tsx
@@ -1,11 +1,18 @@
 import Flex from '@/components/Primitives/Flex';
-import AlertCustomDialog from '@/components/Primitives/AlertCustomDialog';
-import { AlertDialogTrigger } from '@radix-ui/react-alert-dialog';
+import Text from '@/components/Primitives/Text';
+// import { AlertDialogTrigger } from '@radix-ui/react-alert-dialog';
 import Tooltip from '@/components/Primitives/Tooltip';
 import Icon from '@/components/icons/Icon';
 import { editColumnsState } from '@/store/board/atoms/board.atom';
 import { useRecoilState } from 'recoil';
-import { DisabledDeleteColumnButton } from './DisabledDeleteButton';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogTrigger,
+} from '@/components/Primitives/AlertDialog';
+import Button from '@/components/Primitives/Button';
 
 interface Props {
   columnTitle: string;
@@ -22,40 +29,35 @@ const DeleteColumnButton = ({ columnTitle, columnIndex, disableDeleteColumn }: P
   };
 
   return (
-    <Flex direction="column">
-      <Flex css={{ alignItems: 'center' }}>
-        <Flex align="center" css={{ ml: '$24' }} gap="24">
-          {disableDeleteColumn ? (
-            <DisabledDeleteColumnButton />
-          ) : (
-            <AlertCustomDialog
-              cancelText="Cancel"
-              confirmText="Delete"
-              css={undefined}
-              defaultOpen={false}
-              handleConfirm={handleDeleteColumn}
-              text={`Do you really want to delete the column ${columnTitle}?`}
-              title="Delete column"
-            >
-              <Tooltip content="Delete column">
-                <AlertDialogTrigger asChild>
-                  <Flex pointer>
-                    <Icon
-                      name="trash-alt"
-                      css={{
-                        color: '$primary400',
-                        mt: '$16',
-                        size: '$20',
-                      }}
-                    />
-                  </Flex>
-                </AlertDialogTrigger>
-              </Tooltip>
-            </AlertCustomDialog>
-          )}
+    <AlertDialog>
+      <Tooltip
+        content={
+          disableDeleteColumn ? 'Your board must have at least one column.' : 'Delete column'
+        }
+      >
+        <AlertDialogTrigger asChild onMouseDown={(e) => e.preventDefault()}>
+          <Button isIcon disabled={disableDeleteColumn}>
+            <Icon
+              name="trash-alt"
+              css={{
+                mt: '$16',
+                size: '$20',
+              }}
+            />
+          </Button>
+        </AlertDialogTrigger>
+      </Tooltip>
+
+      <AlertDialogContent title="Delete column">
+        <Text>
+          Do you really want to delete the column <Text fontWeight="bold">{columnTitle}</Text>?
+        </Text>
+        <Flex gap="16" justify="end" css={{ mt: '$24' }}>
+          <AlertDialogCancel variant="primaryOutline">Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleDeleteColumn}>Delete</AlertDialogAction>
         </Flex>
-      </Flex>
-    </Flex>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 };
 

diff --git a/frontend/src/components/Board/SplitBoard/AlertMergeIntoMain/index.tsx b/frontend/src/components/Board/SplitBoard/AlertMergeIntoMain/index.tsx
@@ -1,7 +1,14 @@
 import Icon from '@/components/icons/Icon';
-import AlertCustomDialog from '@/components/Primitives/AlertCustomDialog';
-import { AlertDialogTrigger } from '@/components/Primitives/AlertDialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogTrigger,
+} from '@/components/Primitives/AlertDialog';
 import Button from '@/components/Primitives/Button';
+import Flex from '@/components/Primitives/Flex';
+import Text from '@/components/Primitives/Text';
 import useCards from '@/hooks/useCards';
 
 type Props = {
@@ -11,25 +18,30 @@ type Props = {
 const AlertMergeIntoMain: React.FC<Props> = ({ boardId, socketId }) => {
   const { mergeBoard } = useCards();
 
+  const handleMergeClick = () => {
+    mergeBoard.mutate({ subBoardId: boardId, socketId });
+  };
+
   return (
-    <AlertCustomDialog
-      cancelText="Cancel"
-      confirmText="Merge into main board"
-      defaultOpen={false}
-      text="If you merge your sub-team's board into the main board it can not be edited anymore afterwards. Are you sure you want to merge it?"
-      title="Merge board into main board"
-      variant="primary"
-      handleConfirm={() => {
-        mergeBoard.mutate({ subBoardId: boardId, socketId });
-      }}
-    >
+    <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button size="sm" variant="primaryOutline">
+        <Button variant="primaryOutline" size="sm">
           Merge into main board
           <Icon name="merge" />
         </Button>
       </AlertDialogTrigger>
-    </AlertCustomDialog>
+
+      <AlertDialogContent title="Merge board into main board">
+        <Text>
+          If you merge your sub-team&apos;s board into the main board it can not be edited anymore
+          afterwards. Are you sure you want to merge it?
+        </Text>
+        <Flex gap="16" justify="end" css={{ mt: '$24' }}>
+          <AlertDialogCancel variant="primaryOutline">Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleMergeClick}>Merge into main board</AlertDialogAction>
+        </Flex>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 };