github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-03 12:35:21 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): remove chakra as direct dependency

Browse Source 
Moved a number of things to `@invoke-ai/ui` to support this.

Unfortunately, the bundle size has increased a bit. I will work on that later.
This commit is contained in:
psychedelicious
2024-01-23 22:56:11 +11:00
committed by Kent Keirsey
parent 1178fd8bd3
commit 52b24e01e2
14 changed files with 730 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
View File

@@ -1,9 +1,9 @@
import { ChevronUpIcon } from '@chakra-ui/icons';
import {
Box,
Flex,
FormControl,
FormLabel,
Icon,
IconButton,
Switch,
} from '@invoke-ai/ui';
@@ -19,7 +19,7 @@ import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import type { ChangeEvent } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { PiCopyBold, PiTrashSimpleBold } from 'react-icons/pi';
import { PiCaretUpBold, PiCopyBold, PiTrashSimpleBold } from 'react-icons/pi';
import { useToggle } from 'react-use';
import ControlAdapterImagePreview from './ControlAdapterImagePreview';
@@ -130,8 +130,9 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
onClick={toggleIsExpanded}
variant="ghost"
icon={
<ChevronUpIcon
boxSize={6}
<Icon
boxSize={4}
as={PiCaretUpBold}
transform={isExpanded ? 'rotate(0deg)' : 'rotate(180deg)'}
transitionProperty="common"
transitionDuration="normal"

2
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx
View File

@@ -58,7 +58,7 @@ const BoardsSearch = () => {
<IconButton
onClick={clearBoardSearch}
size="sm"
variant="ghost"
variant="link"
aria-label={t('boards.clearSearch')}
icon={<PiXBold />}
/>

8
invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
View File

@@ -1,7 +1,7 @@
import { ChevronUpIcon } from '@chakra-ui/icons';
import { Button, Flex, Spacer } from '@invoke-ai/ui';
import { Button, Flex, Icon, Spacer } from '@invoke-ai/ui';
import { useAppSelector } from 'app/store/storeHooks';
import { memo, useMemo } from 'react';
import { PiCaretUpBold } from 'react-icons/pi';
import { useBoardName } from 'services/api/hooks/useBoardName';
type Props = {
@@ -36,7 +36,9 @@ const GalleryBoardName = (props: Props) => {
<Spacer />
{formattedBoardName}
<Spacer />
<ChevronUpIcon
<Icon
as={PiCaretUpBold}
boxSize={4}
transform={isOpen ? 'rotate(0deg)' : 'rotate(180deg)'}
transitionProperty="common"
transitionDuration="normal"

4
invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
View File

@@ -1,7 +1,5 @@
import { Box, Flex, IconButton, Tooltip } from '@invoke-ai/ui';
import {
getOverlayScrollbarsParams,
} from 'common/components/OverlayScrollbars/constants';
import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
import { isString } from 'lodash-es';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import type { CSSProperties } from 'react';

7
invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx
View File

@@ -1,5 +1,4 @@
import { ExternalLinkIcon } from '@chakra-ui/icons';
import { Flex, IconButton, Link, Text, Tooltip } from '@invoke-ai/ui';
import { ExternalLink, Flex, IconButton, Text, Tooltip } from '@invoke-ai/ui';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { IoArrowUndoCircleOutline } from 'react-icons/io5';
@@ -67,9 +66,7 @@ const ImageMetadataItem = ({
{label}:
</Text>
{isLink ? (
<Link href={value.toString()} isExternal wordBreak="break-all">
{value.toString()} <ExternalLinkIcon mx="2px" />
</Link>
<ExternalLink href={value.toString()} label={value.toString()} />
) : (
<Text overflowY="scroll" wordBreak="break-all">
{value.toString()}

12
invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
View File

@@ -1,13 +1,11 @@
import { ExternalLinkIcon } from '@chakra-ui/icons';
import {
ExternalLink,
Flex,
Link,
Tab,
TabList,
TabPanel,
TabPanels,
Tabs,
Text,
} from '@invoke-ai/ui';
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
@@ -46,13 +44,7 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => {
position="absolute"
overflow="hidden"
>
<Flex gap={2}>
<Text fontWeight="semibold">{t('common.file')}:</Text>
<Link href={image.image_url} isExternal maxW="calc(100% - 3rem)">
{image.image_name}
<ExternalLinkIcon mx="2px" />
</Link>
</Flex>
<ExternalLink href={image.image_url} label={image.image_name} />
<Tabs
variant="line"

7
invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx
View File

@@ -1,8 +1,8 @@
import { ChevronUpIcon } from '@chakra-ui/icons';
import { IconButton } from '@invoke-ai/ui';
import { Icon, IconButton } from '@invoke-ai/ui';
import { useAppDispatch } from 'app/store/storeHooks';
import { nodeIsOpenChanged } from 'features/nodes/store/nodesSlice';
import { memo, useCallback } from 'react';
import { PiCaretUpBold } from 'react-icons/pi';
import { useUpdateNodeInternals } from 'reactflow';
interface Props {
@@ -29,7 +29,8 @@ const NodeCollapseButton = ({ nodeId, isOpen }: Props) => {
h={8}
variant="link"
icon={
<ChevronUpIcon
<Icon
as={PiCaretUpBold}
transform={isOpen ? 'rotate(0deg)' : 'rotate(180deg)'}
transitionProperty="common"
transitionDuration="normal"

11
invokeai/frontend/web/src/features/settingsAccordions/hooks/useExpanderToggle.ts
View File

@@ -1,9 +1,6 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import {
expanderStateChanged,
selectUiSlice,
} from 'features/ui/store/uiSlice';
import { expanderStateChanged, selectUiSlice } from 'features/ui/store/uiSlice';
import { useCallback, useMemo } from 'react';
type UseExpanderToggleArg = {
@@ -14,7 +11,11 @@ type UseExpanderToggleArg = {
export const useExpanderToggle = (arg: UseExpanderToggleArg) => {
const dispatch = useAppDispatch();
const selectIsOpen = useMemo(
() => createSelector(selectUiSlice, (ui) => ui.expanders[arg.id] ?? arg.defaultIsOpen),
() =>
createSelector(
selectUiSlice,
(ui) => ui.expanders[arg.id] ?? arg.defaultIsOpen
),
[arg]
);
const isOpen = useAppSelector(selectIsOpen);

23
invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx
View File

@@ -1,11 +1,10 @@
import { ExternalLinkIcon } from '@chakra-ui/icons';
import {
ExternalLink,
Flex,
Grid,
GridItem,
Heading,
Image,
Link,
Modal,
ModalBody,
ModalCloseButton,
@@ -103,23 +102,21 @@ const AboutModal = ({ children }: AboutModalProps) => {
{appVersion && <Text>{`v${appVersion?.version}`}</Text>}
<Grid templateColumns="repeat(2, 1fr)" gap="3">
<GridItem>
<Link fontSize="sm" href={githubLink} isExternal>
{t('common.githubLabel')}
<ExternalLinkIcon mx="2px" />
</Link>
<ExternalLink
href={githubLink}
label={t('common.githubLabel')}
/>
</GridItem>
<GridItem>
<Link fontSize="sm" href={discordLink} isExternal>
{t('common.discordLabel')}
<ExternalLinkIcon mx="2px" />
</Link>
<ExternalLink
href={discordLink}
label={t('common.discordLabel')}
/>
</GridItem>
</Grid>
<Heading fontSize="large">{t('common.aboutHeading')}</Heading>
<Text fontSize="sm">{t('common.aboutDesc')}</Text>
<Link isExternal href={websiteLink} fontSize="sm">
{websiteLink} <ExternalLinkIcon mx="2px" />
</Link>
<ExternalLink href={websiteLink} label={websiteLink} />
</Flex>
</GridItem>
</Grid>

5
invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx
View File

@@ -1,4 +1,3 @@
import { CloseIcon } from '@chakra-ui/icons';
import {
Divider,
Flex,
@@ -30,6 +29,7 @@ import {
useState,
} from 'react';
import { useTranslation } from 'react-i18next';
import { PiXBold } from 'react-icons/pi';
import HotkeyListItem from './HotkeyListItem';
@@ -103,7 +103,8 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
size="sm"
variant="ghost"
aria-label={t('hotkeys.clearSearch')}
icon={<CloseIcon boxSize={3} />}
boxSize={4}
icon={<PiXBold />}
/>
</InputRightElement>
)}

6
invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
View File

@@ -1,8 +1,8 @@
import { SpinnerIcon } from '@chakra-ui/icons';
import type { SystemStyleObject } from '@invoke-ai/ui';
import {
ButtonGroup,
Flex,
Icon,
IconButton,
Portal,
spinAnimation,
@@ -14,7 +14,7 @@ import { useQueueBack } from 'features/queue/hooks/useQueueBack';
import type { UsePanelReturn } from 'features/ui/hooks/usePanel';
import { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiSlidersHorizontalBold } from 'react-icons/pi';
import { PiCircleNotchBold, PiSlidersHorizontalBold } from 'react-icons/pi';
import { RiSparklingFill } from 'react-icons/ri';
import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
@@ -35,7 +35,7 @@ const FloatingSidePanelButtons = (props: Props) => {
const queueButtonIcon = useMemo(
() =>
!isDisabled && queueStatus?.processor.is_processing ? (
<SpinnerIcon animation={spinAnimation} />
<Icon boxSize={6} as={PiCircleNotchBold} animation={spinAnimation} />
) : (
<RiSparklingFill size="16px" />
),

11
invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
View File

@@ -1,4 +1,3 @@
import { CloseIcon } from '@chakra-ui/icons';
import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
import {
Button,
@@ -25,6 +24,7 @@ import WorkflowLibraryPagination from 'features/workflowLibrary/components/Workf
import type { ChangeEvent, KeyboardEvent } from 'react';
import { memo, useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PiXBold } from 'react-icons/pi';
import { useListWorkflowsQuery } from 'services/api/endpoints/workflows';
import type {
SQLiteDirection,
@@ -202,14 +202,13 @@ const WorkflowLibraryList = () => {
minW={64}
/>
{query.trim().length && (
<InputRightElement>
<InputRightElement h="full" pe={2}>
<IconButton
onClick={resetFilterText}
size="xs"
variant="ghost"
size="sm"
variant="link"
aria-label={t('workflows.clearWorkflowSearchFilter')}
opacity={0.5}
icon={<CloseIcon boxSize={2} />}
icon={<PiXBold />}
/>
</InputRightElement>
)}