refactor(DialogTemplate): convert to typescript

refactor(ui): import multiple components from ui folder in several files
This commit is contained in:
Daniel Avila 2023-06-11 14:45:38 -04:00 committed by Danny Avila
parent 544d72ee1d
commit c661276888
4 changed files with 27 additions and 15 deletions

View file

@ -1,9 +1,6 @@
import React, { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import DialogTemplate from '../ui/DialogTemplate';
import { Dialog } from '../ui/Dialog.tsx';
import { Input } from '../ui/Input.tsx';
import { Label } from '../ui/Label.tsx';
import {Dialog, DialogTemplate, Input, Label} from '../ui/';
import { cn } from '~/utils/';
import cleanupPreset from '~/utils/cleanupPreset';
import { useCreatePresetMutation } from '~/data-provider';

View file

@ -10,17 +10,17 @@ import FileUpload from './FileUpload';
import getIcon from '~/utils/getIcon';
import getDefaultConversation from '~/utils/getDefaultConversation';
import { useDeletePresetMutation, useCreatePresetMutation } from '~/data-provider';
import { Button } from '../../ui/Button.tsx';
import {
Button,
DropdownMenu,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuSeparator,
DropdownMenuTrigger
} from '../../ui/DropdownMenu.tsx';
import { Dialog, DialogTrigger } from '../../ui/Dialog.tsx';
import DialogTemplate from '../../ui/DialogTemplate';
DropdownMenuTrigger,
DialogTemplate,
Dialog, DialogTrigger
} from '../../ui/';
import { cn } from '~/utils/';
import store from '~/store';

View file

@ -1,7 +1,6 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useState } from 'react';
import DialogTemplate from '../../ui/DialogTemplate';
import { Dialog } from '../../ui/Dialog.tsx';
import { Dialog, DialogTemplate } from '../../ui';
import * as Checkbox from '@radix-ui/react-checkbox';
import { CheckIcon } from '@radix-ui/react-icons';
import FileUpload from '../NewConversationMenu/FileUpload';

View file

@ -1,4 +1,4 @@
import { forwardRef } from 'react';
import { forwardRef, ReactNode, Ref } from 'react';
import {
DialogClose,
DialogContent,
@ -6,10 +6,26 @@ import {
DialogFooter,
DialogHeader,
DialogTitle
} from './Dialog.tsx';
} from './';
import { cn } from '~/utils/';
const DialogTemplate = forwardRef((props, ref) => {
type SelectionProps = {
selectHandler?: () => void;
selectClasses?: string;
selectText?: string;
};
type DialogTemplateProps = {
title: string;
description?: string;
main?: ReactNode;
buttons?: ReactNode;
leftButtons?: ReactNode;
selection?: SelectionProps;
className?: string;
};
const DialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDivElement>) => {
const { title, description, main, buttons, leftButtons, selection, className } = props;
const { selectHandler, selectClasses, selectText } = selection || {};
@ -18,7 +34,7 @@ const DialogTemplate = forwardRef((props, ref) => {
return (
<DialogContent ref={ref} className={cn('shadow-2xl dark:bg-gray-900', className || '')}>
<DialogHeader>
<DialogTitle className="text-gray-800 dark:text-white">{title}</DialogTitle>
<DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">{title}</DialogTitle>
{description && (
<DialogDescription className="text-gray-600 dark:text-gray-300">
{description}