diff --git a/invokeai/frontend/web/.eslintrc.js b/invokeai/frontend/web/.eslintrc.js index 955d37ef09..4ad387951f 100644 --- a/invokeai/frontend/web/.eslintrc.js +++ b/invokeai/frontend/web/.eslintrc.js @@ -93,6 +93,27 @@ module.exports = { '@typescript-eslint/no-import-type-side-effects': 'error', 'simple-import-sort/imports': 'error', 'simple-import-sort/exports': 'error', + // Prefer @invoke-ai/ui components over chakra + 'no-restricted-imports': 'off', + '@typescript-eslint/no-restricted-imports': [ + 'warn', + { + paths: [ + { + name: '@chakra-ui/react', + message: "Please import from '@invoke-ai/ui' instead.", + }, + { + name: '@chakra-ui/layout', + message: "Please import from '@invoke-ai/ui' instead.", + }, + { + name: '@chakra-ui/portal', + message: "Please import from '@invoke-ai/ui' instead.", + }, + ], + }, + ], }, overrides: [ { diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json index d30332a0f3..0def97ea68 100644 --- a/invokeai/frontend/web/package.json +++ b/invokeai/frontend/web/package.json @@ -32,8 +32,8 @@ "fix": "eslint --fix . && prettier --log-level warn --write .", "preinstall": "npx only-allow pnpm", "postinstall": "pnpm run theme", - "theme": "chakra-cli tokens src/theme/theme.ts", - "theme:watch": "chakra-cli tokens src/theme/theme.ts --watch", + "theme": "chakra-cli tokens --strict-component-types --strict-token-types node_modules/@invoke-ai/ui", + "theme:watch": "chakra-cli tokens --strict-component-types --strict-token-types node_modules/@invoke-ai/ui --watch", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", "unimported": "npx unimported" @@ -66,7 +66,7 @@ "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@fontsource-variable/inter": "^5.0.16", - "@invoke-ai/ui": "^0.0.3", + "@invoke-ai/ui": "file:/home/bat/Documents/Code/ui", "@mantine/form": "6.0.21", "@nanostores/react": "^0.7.1", "@reduxjs/toolkit": "2.0.1", diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml index 543d816f84..bb18789305 100644 --- a/invokeai/frontend/web/pnpm-lock.yaml +++ b/invokeai/frontend/web/pnpm-lock.yaml @@ -53,8 +53,8 @@ dependencies: specifier: ^5.0.16 version: 5.0.16 '@invoke-ai/ui': - specifier: ^0.0.3 - version: 0.0.3(@chakra-ui/anatomy@2.2.2)(@chakra-ui/icons@2.1.1)(@chakra-ui/layout@2.3.1)(@chakra-ui/portal@2.1.0)(@chakra-ui/react-use-size@2.1.0)(@chakra-ui/react@2.8.2)(@chakra-ui/styled-system@2.9.2)(@chakra-ui/theme-tools@2.1.2)(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@fontsource-variable/inter@5.0.16)(@nanostores/react@0.7.1)(framer-motion@10.18.0)(lodash-es@4.17.21)(nanostores@0.9.5)(react-dom@18.2.0)(react-i18next@14.0.0)(react@18.2.0) + specifier: file:/home/bat/Documents/Code/ui + version: file:../../../../ui(@chakra-ui/anatomy@2.2.2)(@chakra-ui/icons@2.1.1)(@chakra-ui/layout@2.3.1)(@chakra-ui/portal@2.1.0)(@chakra-ui/react@2.8.2)(@chakra-ui/styled-system@2.9.2)(@chakra-ui/theme-tools@2.1.2)(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@fontsource-variable/inter@5.0.16)(@nanostores/react@0.7.1)(chakra-react-select@4.7.6)(framer-motion@10.18.0)(lodash-es@4.17.21)(nanostores@0.9.5)(overlayscrollbars-react@0.5.3)(overlayscrollbars@2.4.6)(react-dom@18.2.0)(react-i18next@14.0.0)(react-select@5.8.0)(react@18.2.0) '@mantine/form': specifier: 6.0.21 version: 6.0.21(react@18.2.0) @@ -3688,48 +3688,6 @@ packages: resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==} dev: true - /@invoke-ai/ui@0.0.3(@chakra-ui/anatomy@2.2.2)(@chakra-ui/icons@2.1.1)(@chakra-ui/layout@2.3.1)(@chakra-ui/portal@2.1.0)(@chakra-ui/react-use-size@2.1.0)(@chakra-ui/react@2.8.2)(@chakra-ui/styled-system@2.9.2)(@chakra-ui/theme-tools@2.1.2)(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@fontsource-variable/inter@5.0.16)(@nanostores/react@0.7.1)(framer-motion@10.18.0)(lodash-es@4.17.21)(nanostores@0.9.5)(react-dom@18.2.0)(react-i18next@14.0.0)(react@18.2.0): - resolution: {integrity: sha512-EFh30NPTIWXJKNTgUghrbeB7hB59fD+cm6DIoOYMlMQOQGfHTu+6aOOx6hBoj7fse2UWWhL/dEhannz6homoCw==} - peerDependencies: - '@chakra-ui/anatomy': ^2.2.2 - '@chakra-ui/icons': ^2.1.1 - '@chakra-ui/layout': ^2.3.1 - '@chakra-ui/portal': ^2.1.0 - '@chakra-ui/react': ^2.8.2 - '@chakra-ui/react-use-size': ^2.1.0 - '@chakra-ui/styled-system': ^2.9.2 - '@chakra-ui/theme-tools': ^2.1.2 - '@emotion/react': ^11.11.3 - '@emotion/styled': ^11.11.0 - '@fontsource-variable/inter': ^5.0.16 - '@nanostores/react': ^0.7.1 - framer-motion: ^10.18.0 - lodash-es: ^4.17.21 - nanostores: ^0.9.5 - react: ^18.2.0 - react-dom: ^18.2.0 - react-i18next: ^14.0.0 - dependencies: - '@chakra-ui/anatomy': 2.2.2 - '@chakra-ui/icons': 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0) - '@chakra-ui/layout': 2.3.1(@chakra-ui/system@2.6.2)(react@18.2.0) - '@chakra-ui/portal': 2.1.0(react-dom@18.2.0)(react@18.2.0) - '@chakra-ui/react': 2.8.2(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.48)(framer-motion@10.18.0)(react-dom@18.2.0)(react@18.2.0) - '@chakra-ui/react-use-size': 2.1.0(react@18.2.0) - '@chakra-ui/styled-system': 2.9.2 - '@chakra-ui/theme-tools': 2.1.2(@chakra-ui/styled-system@2.9.2) - '@emotion/react': 11.11.3(@types/react@18.2.48)(react@18.2.0) - '@emotion/styled': 11.11.0(@emotion/react@11.11.3)(@types/react@18.2.48)(react@18.2.0) - '@fontsource-variable/inter': 5.0.16 - '@nanostores/react': 0.7.1(nanostores@0.9.5)(react@18.2.0) - framer-motion: 10.18.0(react-dom@18.2.0)(react@18.2.0) - lodash-es: 4.17.21 - nanostores: 0.9.5 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-i18next: 14.0.0(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0) - dev: false - /@isaacs/cliui@8.0.2: resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} engines: {node: '>=12'} @@ -13787,3 +13745,53 @@ packages: react: 18.2.0 use-sync-external-store: 1.2.0(react@18.2.0) dev: false + + file:../../../../ui(@chakra-ui/anatomy@2.2.2)(@chakra-ui/icons@2.1.1)(@chakra-ui/layout@2.3.1)(@chakra-ui/portal@2.1.0)(@chakra-ui/react@2.8.2)(@chakra-ui/styled-system@2.9.2)(@chakra-ui/theme-tools@2.1.2)(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@fontsource-variable/inter@5.0.16)(@nanostores/react@0.7.1)(chakra-react-select@4.7.6)(framer-motion@10.18.0)(lodash-es@4.17.21)(nanostores@0.9.5)(overlayscrollbars-react@0.5.3)(overlayscrollbars@2.4.6)(react-dom@18.2.0)(react-i18next@14.0.0)(react-select@5.8.0)(react@18.2.0): + resolution: {directory: ../../../../ui, type: directory} + id: file:../../../../ui + name: '@invoke-ai/ui' + peerDependencies: + '@chakra-ui/anatomy': ^2.2.2 + '@chakra-ui/icons': ^2.1.1 + '@chakra-ui/layout': ^2.3.1 + '@chakra-ui/portal': ^2.1.0 + '@chakra-ui/react': ^2.8.2 + '@chakra-ui/styled-system': ^2.9.2 + '@chakra-ui/theme-tools': ^2.1.2 + '@emotion/react': ^11.11.3 + '@emotion/styled': ^11.11.0 + '@fontsource-variable/inter': ^5.0.16 + '@nanostores/react': ^0.7.1 + chakra-react-select: ^4.7.6 + framer-motion: ^10.18.0 + lodash-es: ^4.17.21 + nanostores: ^0.9.5 + overlayscrollbars: ^2.4.6 + overlayscrollbars-react: ^0.5.3 + react: ^18.2.0 + react-dom: ^18.2.0 + react-i18next: ^14.0.0 + react-select: ^5.8.0 + dependencies: + '@chakra-ui/anatomy': 2.2.2 + '@chakra-ui/icons': 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0) + '@chakra-ui/layout': 2.3.1(@chakra-ui/system@2.6.2)(react@18.2.0) + '@chakra-ui/portal': 2.1.0(react-dom@18.2.0)(react@18.2.0) + '@chakra-ui/react': 2.8.2(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.48)(framer-motion@10.18.0)(react-dom@18.2.0)(react@18.2.0) + '@chakra-ui/styled-system': 2.9.2 + '@chakra-ui/theme-tools': 2.1.2(@chakra-ui/styled-system@2.9.2) + '@emotion/react': 11.11.3(@types/react@18.2.48)(react@18.2.0) + '@emotion/styled': 11.11.0(@emotion/react@11.11.3)(@types/react@18.2.48)(react@18.2.0) + '@fontsource-variable/inter': 5.0.16 + '@nanostores/react': 0.7.1(nanostores@0.9.5)(react@18.2.0) + chakra-react-select: 4.7.6(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@emotion/react@11.11.3)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0) + framer-motion: 10.18.0(react-dom@18.2.0)(react@18.2.0) + lodash-es: 4.17.21 + nanostores: 0.9.5 + overlayscrollbars: 2.4.6 + overlayscrollbars-react: 0.5.3(overlayscrollbars@2.4.6)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + react-i18next: 14.0.0(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0) + react-select: 5.8.0(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0) + dev: false diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx index a5294211ba..6be1741cfa 100644 --- a/invokeai/frontend/web/src/app/components/App.tsx +++ b/invokeai/frontend/web/src/app/components/App.tsx @@ -1,4 +1,4 @@ -import { Box } from '@chakra-ui/react'; +import { Box } from '@invoke-ai/ui'; import { useSocketIO } from 'app/hooks/useSocketIO'; import { useLogger } from 'app/logging/useLogger'; import { appStarted } from 'app/store/middleware/listenerMiddleware/listeners/appStarted'; diff --git a/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx b/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx index 3a2ec0a8c7..8ee59e6648 100644 --- a/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx +++ b/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx @@ -1,6 +1,4 @@ -import { Flex, Heading, Link, useToast } from '@chakra-ui/react'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvText } from 'common/components/InvText/wrapper'; +import { Button, Flex, Heading, Link, Text, useToast } from '@invoke-ai/ui'; import newGithubIssueUrl from 'new-github-issue-url'; import { memo, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -65,24 +63,24 @@ const AppErrorBoundaryFallback = ({ error, resetErrorBoundary }: Props) => { justifyContent="space-between" alignItems="center" > - + {error.name}: {error.message} - + - } onClick={resetErrorBoundary} > {t('accessibility.resetUI')} - - } onClick={handleCopy}> + + - }> + diff --git a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx index 1b4630e5db..15b4cf28fc 100644 --- a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx +++ b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx @@ -1,12 +1,16 @@ import '@fontsource-variable/inter'; import 'overlayscrollbars/overlayscrollbars.css'; -import 'common/components/OverlayScrollbars/overlayscrollbars.css'; -import { ChakraProvider, DarkMode, extendTheme } from '@chakra-ui/react'; +import { + ChakraProvider, + DarkMode, + extendTheme, + theme as _theme, + TOAST_OPTIONS, +} from '@invoke-ai/ui'; import type { ReactNode } from 'react'; import { memo, useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { theme as invokeAITheme, TOAST_OPTIONS } from 'theme/theme'; type ThemeLocaleProviderProps = { children: ReactNode; @@ -19,7 +23,7 @@ function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) { const theme = useMemo(() => { return extendTheme({ - ...invokeAITheme, + ..._theme, direction, }); }, [direction]); diff --git a/invokeai/frontend/web/src/app/components/Toaster.ts b/invokeai/frontend/web/src/app/components/Toaster.ts index ad10f58a5e..6bb2592ba4 100644 --- a/invokeai/frontend/web/src/app/components/Toaster.ts +++ b/invokeai/frontend/web/src/app/components/Toaster.ts @@ -1,4 +1,4 @@ -import { useToast } from '@chakra-ui/react'; +import { useToast } from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { addToast, clearToastQueue } from 'features/system/store/systemSlice'; import type { MakeToastArg } from 'features/system/util/makeToast'; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts index 1e8608d884..d848434df9 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts @@ -1,11 +1,10 @@ -import { createStandaloneToast } from '@chakra-ui/react'; +import { createStandaloneToast, theme, TOAST_OPTIONS } from '@invoke-ai/ui'; import { logger } from 'app/logging/logger'; import { parseify } from 'common/util/serialize'; import { zPydanticValidationError } from 'features/system/store/zodSchemas'; import { t } from 'i18next'; import { truncate, upperFirst } from 'lodash-es'; import { queueApi } from 'services/api/endpoints/queue'; -import { theme, TOAST_OPTIONS } from 'theme/theme'; import { startAppListening } from '..'; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts index c7141c51c5..fdcfc7b360 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts @@ -1,4 +1,4 @@ -import type { UseToastOptions } from '@chakra-ui/react'; +import type { UseToastOptions } from '@invoke-ai/ui'; import { logger } from 'app/logging/logger'; import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice'; import { diff --git a/invokeai/frontend/web/src/app/store/nanostores/customStarUI.ts b/invokeai/frontend/web/src/app/store/nanostores/customStarUI.ts index bb815164e5..71a8fc4017 100644 --- a/invokeai/frontend/web/src/app/store/nanostores/customStarUI.ts +++ b/invokeai/frontend/web/src/app/store/nanostores/customStarUI.ts @@ -1,4 +1,4 @@ -import type { MenuItemProps } from '@chakra-ui/react'; +import type { MenuItemProps } from '@invoke-ai/ui'; import { atom } from 'nanostores'; export type CustomStarUi = { diff --git a/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx b/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx index 5072b3442a..abba88ac12 100644 --- a/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx +++ b/invokeai/frontend/web/src/common/components/IAIColorPicker.tsx @@ -1,5 +1,10 @@ -import type { ChakraProps } from '@chakra-ui/react'; -import { Flex } from '@chakra-ui/react'; +import type { ChakraProps } from '@invoke-ai/ui'; +import { + CompositeNumberInput, + Flex, + FormControl, + FormLabel, +} from '@invoke-ai/ui'; import type { CSSProperties } from 'react'; import { memo, useCallback } from 'react'; import { RgbaColorPicker } from 'react-colorful'; @@ -8,9 +13,6 @@ import type { RgbaColor, } from 'react-colorful/dist/types'; -import { InvControl } from './InvControl/InvControl'; -import { InvNumberInput } from './InvNumberInput/InvNumberInput'; - type IAIColorPickerProps = ColorPickerBaseProps & { withNumberInput?: boolean; }; @@ -61,8 +63,9 @@ const IAIColorPicker = (props: IAIColorPickerProps) => { /> {withNumberInput && ( - - + Red + { w={numberInputWidth} defaultValue={90} /> - - - + + Green + { w={numberInputWidth} defaultValue={90} /> - - - + + Blue + { w={numberInputWidth} defaultValue={255} /> - - - + + Alpha + { w={numberInputWidth} defaultValue={1} /> - + )} diff --git a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx index e554306442..500ccdfb7b 100644 --- a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx +++ b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx @@ -1,9 +1,5 @@ -import type { - ChakraProps, - FlexProps, - SystemStyleObject, -} from '@chakra-ui/react'; -import { Flex, Icon, Image } from '@chakra-ui/react'; +import type { ChakraProps, FlexProps, SystemStyleObject } from '@invoke-ai/ui'; +import { Flex, Icon, Image } from '@invoke-ai/ui'; import { IAILoadingImageFallback, IAINoContentFallback, diff --git a/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx b/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx index ce0fecb20c..1df0cb527a 100644 --- a/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx +++ b/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx @@ -1,9 +1,8 @@ -import type { SystemStyleObject } from '@chakra-ui/react'; +import type { SystemStyleObject } from '@invoke-ai/ui'; +import { IconButton } from '@invoke-ai/ui'; import type { MouseEvent, ReactElement } from 'react'; import { memo, useMemo } from 'react'; -import { InvIconButton } from './InvIconButton/InvIconButton'; - type Props = { onClick: (event: MouseEvent) => void; tooltip: string; @@ -26,7 +25,7 @@ const IAIDndImageIcon = (props: Props) => { transitionDuration: 'normal', fill: 'base.100', _hover: { fill: 'base.50' }, - filter: 'drop-shadow(0px 0px 0.1rem var(--invokeai-colors-base-800))', + filter: 'drop-shadow(0px 0px 0.1rem var(--invoke-colors-base-800))', }, ...styleOverrides, }), @@ -34,7 +33,7 @@ const IAIDndImageIcon = (props: Props) => { ); return ( - { @@ -39,7 +37,7 @@ IAILoadingImageFallback.displayName = 'IAILoadingImageFallback'; type IAINoImageFallbackProps = FlexProps & { label?: string; icon?: As | null; - boxSize?: StyleProps['boxSize']; + boxSize?: ChakraProps['boxSize']; }; export const IAINoContentFallback = memo((props: IAINoImageFallbackProps) => { @@ -66,9 +64,9 @@ export const IAINoContentFallback = memo((props: IAINoImageFallbackProps) => { {icon && } {props.label && ( - + {props.label} - + )} ); @@ -102,7 +100,7 @@ export const IAINoContentFallbackWithSpinner = memo( return ( - {props.label && {props.label}} + {props.label && {props.label}} ); } diff --git a/invokeai/frontend/web/src/common/components/IAIInformationalPopover/IAIInformationalPopover.tsx b/invokeai/frontend/web/src/common/components/IAIInformationalPopover/IAIInformationalPopover.tsx index 6b280efe7b..8248324a26 100644 --- a/invokeai/frontend/web/src/common/components/IAIInformationalPopover/IAIInformationalPopover.tsx +++ b/invokeai/frontend/web/src/common/components/IAIInformationalPopover/IAIInformationalPopover.tsx @@ -1,15 +1,18 @@ -import { Divider, Flex, Image, Portal } from '@chakra-ui/react'; -import { useAppSelector } from 'app/store/storeHooks'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvHeading } from 'common/components/InvHeading/wrapper'; import { - InvPopover, - InvPopoverBody, - InvPopoverCloseButton, - InvPopoverContent, - InvPopoverTrigger, -} from 'common/components/InvPopover/wrapper'; -import { InvText } from 'common/components/InvText/wrapper'; + Button, + Divider, + Flex, + Heading, + Image, + Popover, + PopoverBody, + PopoverCloseButton, + PopoverContent, + PopoverTrigger, + Portal, + Text, +} from '@invoke-ai/ui'; +import { useAppSelector } from 'app/store/storeHooks'; import { merge, omit } from 'lodash-es'; import type { ReactElement } from 'react'; import { memo, useCallback, useMemo } from 'react'; @@ -47,7 +50,7 @@ const IAIInformationalPopover = ({ } return ( - - {children} + {children} {inPortal ? ( - + ) : ( - + )} - + ); }; export default memo(IAIInformationalPopover); -type PopoverContentProps = { +type ContentProps = { data?: PopoverData; feature: Feature; }; -const PopoverContent = ({ data, feature }: PopoverContentProps) => { +const Content = ({ data, feature }: ContentProps) => { const { t } = useTranslation(); const heading = useMemo( @@ -100,13 +103,13 @@ const PopoverContent = ({ data, feature }: PopoverContentProps) => { }, [data?.href]); return ( - - - + + + {heading && ( <> - {heading} + {heading} )} @@ -124,12 +127,12 @@ const PopoverContent = ({ data, feature }: PopoverContentProps) => { )} {paragraphs.map((p) => ( - {p} + {p} ))} {data?.href && ( <> - } @@ -137,11 +140,11 @@ const PopoverContent = ({ data, feature }: PopoverContentProps) => { variant="link" > {t('common.learnMore') ?? heading} - + )} - - + + ); }; diff --git a/invokeai/frontend/web/src/common/components/IAIInformationalPopover/constants.ts b/invokeai/frontend/web/src/common/components/IAIInformationalPopover/constants.ts index c48df92794..09d4e9c132 100644 --- a/invokeai/frontend/web/src/common/components/IAIInformationalPopover/constants.ts +++ b/invokeai/frontend/web/src/common/components/IAIInformationalPopover/constants.ts @@ -1,4 +1,4 @@ -import type { PopoverProps } from '@chakra-ui/react'; +import type { PopoverProps } from '@invoke-ai/ui'; export type Feature = | 'clipSkip' diff --git a/invokeai/frontend/web/src/common/components/ImageMetadataOverlay.tsx b/invokeai/frontend/web/src/common/components/ImageMetadataOverlay.tsx index 08226d6d48..003ace0d1c 100644 --- a/invokeai/frontend/web/src/common/components/ImageMetadataOverlay.tsx +++ b/invokeai/frontend/web/src/common/components/ImageMetadataOverlay.tsx @@ -1,4 +1,4 @@ -import { Badge, Flex } from '@chakra-ui/react'; +import { Badge, Flex } from '@invoke-ai/ui'; import { memo } from 'react'; import type { ImageDTO } from 'services/api/types'; diff --git a/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx b/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx index 0812889c15..dd0b250110 100644 --- a/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx +++ b/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, Heading } from '@chakra-ui/react'; +import { Box, Flex, Heading } from '@invoke-ai/ui'; import type { AnimationProps } from 'framer-motion'; import { motion } from 'framer-motion'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordion.stories.tsx b/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordion.stories.tsx deleted file mode 100644 index ba06d1a5dc..0000000000 --- a/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordion.stories.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { InvText } from 'common/components/InvText/wrapper'; - -import { InvAccordionButton } from './InvAccordionButton'; -import type { InvAccordionProps } from './types'; -import { InvAccordion, InvAccordionItem, InvAccordionPanel } from './wrapper'; - -const meta: Meta = { - title: 'Primitives/InvAccordion', - tags: ['autodocs'], - component: InvAccordion, - args: { - colorScheme: 'base', - }, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvAccordionProps) => { - return ( - - - - Section 1 title - - - - 25 years and my life is still Tryin' to get up that great big - hill of hope For a destination I realized quickly when I knew I - should That the world was made up of this brotherhood of man For - whatever that means - - - - - - - Section 1 title - - - - And so I cry sometimes when I'm lying in bed Just to get it all - out what's in my head And I, I am feeling a little peculiar And - so I wake in the morning and I step outside And I take a deep breath - and I get real high And I scream from the top of my lungs - "What's going on?" - - - - - - - Section 2 title - - - - And I say, hey-ey-ey Hey-ey-ey I said "Hey, a-what's going - on?" And I say, hey-ey-ey Hey-ey-ey I said "Hey, - a-what's going on?" - - - - - ); -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx b/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx deleted file mode 100644 index 667a6de460..0000000000 --- a/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { - AccordionButton as ChakraAccordionButton, - Spacer, -} from '@chakra-ui/react'; -import { InvBadge } from 'common/components/InvBadge/wrapper'; -import { truncate } from 'lodash-es'; -import { useMemo } from 'react'; - -import type { InvAccordionButtonProps } from './types'; -import { InvAccordionIcon } from './wrapper'; - -export const InvAccordionButton = (props: InvAccordionButtonProps) => { - const { children, badges: _badges, ...rest } = props; - const badges = useMemo( - () => - _badges?.map((b) => truncate(String(b), { length: 24, omission: '...' })), - [_badges] - ); - return ( - - {children} - - {badges?.map((b, i) => ( - - {b} - - ))} - - - ); -}; diff --git a/invokeai/frontend/web/src/common/components/InvAccordion/theme.ts b/invokeai/frontend/web/src/common/components/InvAccordion/theme.ts deleted file mode 100644 index a0d5ce3eec..0000000000 --- a/invokeai/frontend/web/src/common/components/InvAccordion/theme.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { accordionAnatomy as parts } from '@chakra-ui/anatomy'; -import { - createMultiStyleConfigHelpers, - defineStyle, -} from '@chakra-ui/styled-system'; - -const { definePartsStyle, defineMultiStyleConfig } = - createMultiStyleConfigHelpers(parts.keys); - -const invokeAIContainer = defineStyle({ - border: 'none', - bg: 'base.850', - borderRadius: 'base', - ':has(&div &button:hover)': { bg: 'base.800' }, - transitionProperty: 'common', - transitionDuration: '0.1s', -}); - -const invokeAIButton = defineStyle((_props) => { - return { - gap: 2, - fontWeight: 'semibold', - fontSize: 'sm', - border: 'none', - borderRadius: 'base', - color: 'base.300', - _hover: {}, - _expanded: { - borderBottomRadius: 'none', - }, - }; -}); - -const invokeAIPanel = defineStyle((props) => { - const { colorScheme: c } = props; - return { - bg: `${c}.800`, - borderRadius: 'base', - p: 0, - transitionProperty: 'common', - transitionDuration: '0.1s', - }; -}); - -const invokeAIIcon = defineStyle({ - ms: 2, -}); - -const invokeAI = definePartsStyle((props) => ({ - container: invokeAIContainer, - button: invokeAIButton(props), - panel: invokeAIPanel(props), - icon: invokeAIIcon, -})); - -const baseStyle = definePartsStyle(() => ({ - root: { - display: 'flex', - flexDirection: 'column', - gap: 4, - }, -})); - -export const accordionTheme = defineMultiStyleConfig({ - baseStyle, - variants: { invokeAI }, - defaultProps: { - variant: 'invokeAI', - colorScheme: 'base', - }, -}); diff --git a/invokeai/frontend/web/src/common/components/InvAccordion/types.ts b/invokeai/frontend/web/src/common/components/InvAccordion/types.ts deleted file mode 100644 index 94e3264cdb..0000000000 --- a/invokeai/frontend/web/src/common/components/InvAccordion/types.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { AccordionButtonProps as ChakraAccordionButtonProps } from '@chakra-ui/react'; -export type { - AccordionIconProps as InvAccordionIconProps, - AccordionItemProps as InvAccordionItemProps, - AccordionPanelProps as InvAccordionPanelProps, - AccordionProps as InvAccordionProps, -} from '@chakra-ui/react'; - -export type InvAccordionButtonProps = ChakraAccordionButtonProps & { - badges?: (string | number)[]; -}; diff --git a/invokeai/frontend/web/src/common/components/InvAccordion/wrapper.ts b/invokeai/frontend/web/src/common/components/InvAccordion/wrapper.ts deleted file mode 100644 index 80b9717df6..0000000000 --- a/invokeai/frontend/web/src/common/components/InvAccordion/wrapper.ts +++ /dev/null @@ -1,6 +0,0 @@ -export { - Accordion as InvAccordion, - AccordionIcon as InvAccordionIcon, - AccordionItem as InvAccordionItem, - AccordionPanel as InvAccordionPanel, -} from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvAlertDialog/types.ts b/invokeai/frontend/web/src/common/components/InvAlertDialog/types.ts deleted file mode 100644 index e419b0a92e..0000000000 --- a/invokeai/frontend/web/src/common/components/InvAlertDialog/types.ts +++ /dev/null @@ -1,4 +0,0 @@ -/** - * AlertDialog is a chakra Modal internally and uses those props. - */ -export type { AlertDialogProps as InvAlertDialogProps } from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvAlertDialog/wrapper.ts b/invokeai/frontend/web/src/common/components/InvAlertDialog/wrapper.ts deleted file mode 100644 index a0308f0bc6..0000000000 --- a/invokeai/frontend/web/src/common/components/InvAlertDialog/wrapper.ts +++ /dev/null @@ -1,9 +0,0 @@ -export { - AlertDialog as InvAlertDialog, - AlertDialogBody as InvAlertDialogBody, - AlertDialogCloseButton as InvAlertDialogCloseButton, - AlertDialogContent as InvAlertDialogContent, - AlertDialogFooter as InvAlertDialogFooter, - AlertDialogHeader as InvAlertDialogHeader, - AlertDialogOverlay as InvAlertDialogOverlay, -} from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/InvAutosizeTextarea.tsx b/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/InvAutosizeTextarea.tsx index 881343bf5c..b4c7e1ef5a 100644 --- a/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/InvAutosizeTextarea.tsx +++ b/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/InvAutosizeTextarea.tsx @@ -1,4 +1,4 @@ -import { Box, forwardRef, Textarea as ChakraTextarea } from '@chakra-ui/react'; +import { Box, forwardRef, Textarea as ChakraTextarea } from '@invoke-ai/ui'; import { useGlobalModifiersSetters } from 'common/hooks/useGlobalModifiers'; import { stopPastePropagation } from 'common/util/stopPastePropagation'; import type { KeyboardEvent } from 'react'; diff --git a/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/types.ts b/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/types.ts index ae1b157cec..350428eaf7 100644 --- a/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/types.ts +++ b/invokeai/frontend/web/src/common/components/InvAutosizeTextarea/types.ts @@ -1,4 +1,4 @@ -import type { TextareaProps as ChakraTextareaProps } from '@chakra-ui/react'; +import type { TextareaProps as ChakraTextareaProps } from '@invoke-ai/ui'; import type { TextareaAutosizeProps } from 'react-textarea-autosize'; export type InvAutosizeTextareaProps = Omit< diff --git a/invokeai/frontend/web/src/common/components/InvBadge/InvBadge.stories.tsx b/invokeai/frontend/web/src/common/components/InvBadge/InvBadge.stories.tsx deleted file mode 100644 index da72c66d4c..0000000000 --- a/invokeai/frontend/web/src/common/components/InvBadge/InvBadge.stories.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import type { InvBadgeProps } from './types'; -import { InvBadge } from './wrapper'; - -const meta: Meta = { - title: 'Primitives/InvBadge', - tags: ['autodocs'], - component: InvBadge, - args: { - colorScheme: 'base', - }, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvBadgeProps) => { - return Invoke; -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvBadge/theme.ts b/invokeai/frontend/web/src/common/components/InvBadge/theme.ts deleted file mode 100644 index bca68c3198..0000000000 --- a/invokeai/frontend/web/src/common/components/InvBadge/theme.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { defineStyle, defineStyleConfig } from '@chakra-ui/react'; - -const baseStyle = defineStyle((props) => ({ - fontSize: 9, - px: 2, - py: 1, - minW: 4, - lineHeight: 1, - borderRadius: 'sm', - bg: `${props.colorScheme}.200`, - color: 'base.900', - fontWeight: 'bold', - letterSpacing: 0.6, - wordBreak: 'break-all', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - overflow: 'hidden', -})); - -export const badgeTheme = defineStyleConfig({ - baseStyle, - defaultProps: { - colorScheme: 'base', - }, -}); diff --git a/invokeai/frontend/web/src/common/components/InvBadge/types.ts b/invokeai/frontend/web/src/common/components/InvBadge/types.ts deleted file mode 100644 index ed073818c8..0000000000 --- a/invokeai/frontend/web/src/common/components/InvBadge/types.ts +++ /dev/null @@ -1,3 +0,0 @@ -import type { BadgeProps as ChakraBadgeProps } from '@chakra-ui/react'; - -export type InvBadgeProps = ChakraBadgeProps; diff --git a/invokeai/frontend/web/src/common/components/InvBadge/wrapper.ts b/invokeai/frontend/web/src/common/components/InvBadge/wrapper.ts deleted file mode 100644 index 50b4c4ad60..0000000000 --- a/invokeai/frontend/web/src/common/components/InvBadge/wrapper.ts +++ /dev/null @@ -1 +0,0 @@ -export { Badge as InvBadge } from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvButton/InvButton.stories.tsx b/invokeai/frontend/web/src/common/components/InvButton/InvButton.stories.tsx deleted file mode 100644 index 80db0ab5c3..0000000000 --- a/invokeai/frontend/web/src/common/components/InvButton/InvButton.stories.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { Flex } from '@chakra-ui/layout'; -import type { Meta, StoryObj } from '@storybook/react'; -import { InvHeading } from 'common/components/InvHeading/wrapper'; -import { IoSparkles } from 'react-icons/io5'; - -import { InvButton } from './InvButton'; -import type { InvButtonProps } from './types'; - -const meta: Meta = { - title: 'Primitives/InvButton', - tags: ['autodocs'], - component: InvButton, - parameters: { - controls: { expanded: true }, - }, - argTypes: { - isLoading: { - defaultValue: false, - control: { type: 'boolean' }, - }, - isDisabled: { - defaultValue: false, - control: { type: 'boolean' }, - }, - }, -}; - -export default meta; -type Story = StoryObj; - -const colorSchemes = [ - 'base', - 'invokeYellow', - 'invokeRed', - 'invokeGreen', - 'invokeBlue', -] as const; -const variants = ['solid', 'outline', 'ghost', 'link'] as const; -const sizes = ['xs', 'sm', 'md', 'lg'] as const; - -const Component = (props: InvButtonProps) => { - return ( - - {sizes.map((size) => ( - <> - Size: {size} - - - {colorSchemes.map((colorScheme) => ( - - {variants.map((variant) => ( - <> - - {variant} - - {['solid', 'outline'].includes(variant) && ( - } - {...props} - > - {variant} - - )} - {['solid', 'outline'].includes(variant) && ( - } - {...props} - > - {variant} - - )} - - ))} - - ))} - - - ))} - - ); -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvButton/InvButton.tsx b/invokeai/frontend/web/src/common/components/InvButton/InvButton.tsx deleted file mode 100644 index 5d2dbc8aa7..0000000000 --- a/invokeai/frontend/web/src/common/components/InvButton/InvButton.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { Button, forwardRef } from '@chakra-ui/react'; -import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; -import { memo } from 'react'; - -import type { InvButtonProps } from './types'; - -export const InvButton = memo( - forwardRef( - ({ isChecked, tooltip, children, ...rest }: InvButtonProps, ref) => { - if (tooltip) { - return ( - - - - ); - } - - return ( - - ); - } - ) -); - -InvButton.displayName = 'InvButton'; diff --git a/invokeai/frontend/web/src/common/components/InvButton/theme.ts b/invokeai/frontend/web/src/common/components/InvButton/theme.ts deleted file mode 100644 index 5b54c36f97..0000000000 --- a/invokeai/frontend/web/src/common/components/InvButton/theme.ts +++ /dev/null @@ -1,228 +0,0 @@ -import type { StyleFunctionProps } from '@chakra-ui/react'; -import { defineStyle, defineStyleConfig } from '@chakra-ui/react'; -import { buttonVariantPromptOverlay } from 'features/parameters/components/Prompts/theme'; - -type Variant = `solid` | `outline` | `ghost` | `link`; - -const getBorders = ( - props: StyleFunctionProps, - variant: Variant -): { borderWidth: string; borderStyle: string } => { - if (variant !== 'outline') { - return { - borderWidth: '0px', - borderStyle: 'none', - }; - } - if (props.size === 'lg') { - return { - borderWidth: '1px', - borderStyle: 'solid', - }; - } - if (props.size === 'md') { - return { - borderWidth: '1px', - borderStyle: 'solid', - }; - } - return { - borderWidth: '1px', - borderStyle: 'solid', - }; -}; - -const getColors = ( - props: StyleFunctionProps, - variant: Variant -): { - bg: string; - bgDisabled: string; - bgHover: string; - fg: string; - fgDisabled: string; - fgHover: string; - borderColor: string; - borderColorDisabled: string; - borderColorHover: string; -} => { - const { colorScheme: c } = props; - - const bgBase = 'base.400'; - const bgColor = c === 'invokeYellow' ? `${c}.500` : `${c}.400`; - const bgBaseHover = 'base.300'; - const bgColorHover = c === 'invokeYellow' ? `${c}.300` : `${c}.300`; - - const notSolidFg = { - fg: c === 'base' ? 'base.300' : bgColor, - fgHover: c === 'base' ? 'base.50' : bgColorHover, - fgDisabled: 'base.600', - }; - const noBg = { bg: 'none', bgHover: 'none', bgDisabled: 'none' }; - const noBorder = { - borderColor: 'none', - borderColorDisabled: 'none', - borderColorHover: 'none', - }; - - if (variant === 'ghost') { - return { - ...notSolidFg, - ...noBg, - ...noBorder, - bgHover: 'baseAlpha.200', - }; - } - - if (variant === 'link') { - return { - ...notSolidFg, - ...noBg, - ...noBorder, - }; - } - if (variant === 'outline') { - return { - ...notSolidFg, - ...noBg, - borderColor: c === 'invokeYellow' ? `${c}Alpha.500` : `${c}Alpha.400`, - borderColorDisabled: 'base.600', - borderColorHover: - c === 'invokeYellow' ? `${c}Alpha.700` : `${c}Alpha.600`, - }; - } - - // solid - return { - bg: c === 'base' ? bgBase : bgColor, - bgHover: c === 'base' ? bgBaseHover : bgColorHover, - bgDisabled: 'base.600', - fg: 'base.900', - fgHover: 'base.900', - fgDisabled: 'base.750', - ...noBorder, - }; -}; - -const getStyles = ( - props: StyleFunctionProps, - variant: 'ghost' | 'solid' | 'outline' | 'link' -) => { - const { borderWidth, borderStyle } = getBorders(props, variant); - const { - bg, - bgDisabled, - bgHover, - fg, - fgDisabled, - fgHover, - borderColor, - borderColorDisabled, - borderColorHover, - } = getColors(props, variant); - - const _disabled = { - bg: bgDisabled, - color: fgDisabled, - opacity: 1, - borderColor: borderColorDisabled, - svg: { - fill: fgDisabled, - }, - _hover: { - bg: bgDisabled, - color: fgDisabled, - borderColor: borderColorDisabled, - svg: { - fill: fgDisabled, - }, - }, - }; - - const _base = { - bg: bg, - color: fg, - borderWidth: borderWidth, - borderStyle: borderStyle, - borderColor: borderColor, - svg: { - fill: fg, - }, - }; - - return { - ..._base, - _hover: { - bg: bgHover, - color: fgHover, - borderColor: borderColorHover, - svg: { - fill: fgHover, - }, - _disabled, - }, - _active: { ..._base }, - _disabled, - } as const; -}; - -export const buttonTheme = defineStyleConfig({ - baseStyle: { - fontWeight: 'semibold', - svg: { - transitionProperty: 'all', - transitionDuration: 'faster', - }, - }, - sizes: { - sm: { - fontSize: 'sm', - px: 3, - py: 2, - }, - md: { - fontSize: 'md', - px: 4, - py: 2, - }, - lg: { - fontSize: 'lg', - px: 4, - py: 2, - h: 12, - }, - }, - variants: { - solid: defineStyle((props) => getStyles(props, 'solid')), - appTab: defineStyle((_props) => { - // Has no disabled, invalid, loading, etc state - return { - bg: 'none', - svg: { - fill: 'base.600', - }, - _hover: { - bg: 'none', - svg: { - fill: 'base.400', - }, - }, - '&[data-selected="true"]': { - bg: 'none', - svg: { - fill: 'base.100', - }, - }, - }; - }), - outline: defineStyle((props) => getStyles(props, 'outline')), - ghost: defineStyle((props) => getStyles(props, 'ghost')), - link: defineStyle((props) => getStyles(props, 'link')), - promptOverlay: buttonVariantPromptOverlay, - }, - defaultProps: { - variant: 'solid', - colorScheme: 'base', - size: 'md', - }, -}); diff --git a/invokeai/frontend/web/src/common/components/InvButton/types.ts b/invokeai/frontend/web/src/common/components/InvButton/types.ts deleted file mode 100644 index eb25209961..0000000000 --- a/invokeai/frontend/web/src/common/components/InvButton/types.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type { ButtonProps } from '@chakra-ui/react'; -import type { ReactNode } from 'react'; - -export type InvButtonProps = ButtonProps & { - isChecked?: boolean; - tooltip?: ReactNode; -}; diff --git a/invokeai/frontend/web/src/common/components/InvButtonGroup/InvButtonGroup.stories.tsx b/invokeai/frontend/web/src/common/components/InvButtonGroup/InvButtonGroup.stories.tsx deleted file mode 100644 index ffb44d0a6c..0000000000 --- a/invokeai/frontend/web/src/common/components/InvButtonGroup/InvButtonGroup.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; -import { FaImage } from 'react-icons/fa'; - -import { InvButtonGroup } from './InvButtonGroup'; -import type { InvButtonGroupProps } from './types'; - -const meta: Meta = { - title: 'Primitives/InvButtonGroup', - tags: ['autodocs'], - component: InvButtonGroup, - args: { - colorScheme: 'base', - }, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvButtonGroupProps) => { - return ( - - Test - Test - Test - - ); -}; - -const ComponentWithIconButtons = (props: InvButtonGroupProps) => { - return ( - - } /> - } /> - } /> - - ); -}; - -export const Default: Story = { - render: Component, -}; - -export const WithIconButtons: Story = { - render: ComponentWithIconButtons, -}; diff --git a/invokeai/frontend/web/src/common/components/InvButtonGroup/InvButtonGroup.tsx b/invokeai/frontend/web/src/common/components/InvButtonGroup/InvButtonGroup.tsx deleted file mode 100644 index 6b31b3e516..0000000000 --- a/invokeai/frontend/web/src/common/components/InvButtonGroup/InvButtonGroup.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { ButtonGroup, forwardRef } from '@chakra-ui/react'; -import { memo } from 'react'; - -import type { InvButtonGroupProps } from './types'; - -export const InvButtonGroup = memo( - forwardRef( - ({ isAttached = true, ...rest }: InvButtonGroupProps, ref) => { - return ; - } - ) -); - -InvButtonGroup.displayName = 'InvButtonGroup'; diff --git a/invokeai/frontend/web/src/common/components/InvButtonGroup/types.ts b/invokeai/frontend/web/src/common/components/InvButtonGroup/types.ts deleted file mode 100644 index 41ecd1649f..0000000000 --- a/invokeai/frontend/web/src/common/components/InvButtonGroup/types.ts +++ /dev/null @@ -1 +0,0 @@ -export type { ButtonGroupProps as InvButtonGroupProps } from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvCard/InvCard.stories.tsx b/invokeai/frontend/web/src/common/components/InvCard/InvCard.stories.tsx deleted file mode 100644 index c0440bc266..0000000000 --- a/invokeai/frontend/web/src/common/components/InvCard/InvCard.stories.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import type { InvCardProps } from './types'; -import { InvCard } from './wrapper'; - -const meta: Meta = { - title: 'Primitives/InvCard', - tags: ['autodocs'], - component: InvCard, - args: { - colorScheme: 'base', - }, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvCardProps) => { - return Invoke; -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvCard/theme.ts b/invokeai/frontend/web/src/common/components/InvCard/theme.ts deleted file mode 100644 index 51bc4a0700..0000000000 --- a/invokeai/frontend/web/src/common/components/InvCard/theme.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { cardAnatomy } from '@chakra-ui/anatomy'; -import { createMultiStyleConfigHelpers } from '@chakra-ui/react'; -import { cardVariantLora } from 'features/lora/components/styles'; - -const { defineMultiStyleConfig } = createMultiStyleConfigHelpers( - cardAnatomy.keys -); - -export const cardTheme = defineMultiStyleConfig({ - variants: { lora: cardVariantLora }, -}); diff --git a/invokeai/frontend/web/src/common/components/InvCard/types.ts b/invokeai/frontend/web/src/common/components/InvCard/types.ts deleted file mode 100644 index cc57d20c54..0000000000 --- a/invokeai/frontend/web/src/common/components/InvCard/types.ts +++ /dev/null @@ -1,6 +0,0 @@ -export type { - CardBodyProps as InvCardBodyProps, - CardFooterProps as InvCardFooterProps, - CardHeaderProps as InvCardHeaderProps, - CardProps as InvCardProps, -} from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvCard/wrapper.ts b/invokeai/frontend/web/src/common/components/InvCard/wrapper.ts deleted file mode 100644 index 894e3bea59..0000000000 --- a/invokeai/frontend/web/src/common/components/InvCard/wrapper.ts +++ /dev/null @@ -1,6 +0,0 @@ -export { - Card as InvCard, - CardBody as InvCardBody, - CardFooter as InvCardFooter, - CardHeader as InvCardHeader, -} from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvCheckbox/InvCheckbox.stories.tsx b/invokeai/frontend/web/src/common/components/InvCheckbox/InvCheckbox.stories.tsx deleted file mode 100644 index 7ad6a93745..0000000000 --- a/invokeai/frontend/web/src/common/components/InvCheckbox/InvCheckbox.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import type { InvCheckboxProps } from './types'; -import { InvCheckbox } from './wrapper'; - -const meta: Meta = { - title: 'Primitives/InvCheckbox', - tags: ['autodocs'], - component: InvCheckbox, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvCheckboxProps) => { - return ; -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvCheckbox/theme.ts b/invokeai/frontend/web/src/common/components/InvCheckbox/theme.ts deleted file mode 100644 index 53a1b01beb..0000000000 --- a/invokeai/frontend/web/src/common/components/InvCheckbox/theme.ts +++ /dev/null @@ -1,69 +0,0 @@ -import { checkboxAnatomy as parts } from '@chakra-ui/anatomy'; -import { - createMultiStyleConfigHelpers, - defineStyle, -} from '@chakra-ui/styled-system'; - -const { definePartsStyle, defineMultiStyleConfig } = - createMultiStyleConfigHelpers(parts.keys); - -const invokeAIControl = defineStyle((props) => { - const { colorScheme: c } = props; - - return { - bg: 'base.700', - borderColor: 'base.600', - color: 'base.100', - - _checked: { - bg: `${c}.500`, - borderColor: `${c}.500`, - color: `${c}.100`, - - _hover: { - bg: `${c}.500`, - borderColor: `${c}.500`, - }, - - _disabled: { - borderColor: 'transparent', - bg: 'whiteAlpha.300', - color: 'whiteAlpha.500', - }, - }, - - _indeterminate: { - bg: `${c}.600`, - borderColor: `${c}.600`, - color: `${c}.100`, - }, - - _disabled: { - bg: 'whiteAlpha.100', - borderColor: 'transparent', - }, - - _focusVisible: { - boxShadow: 'none', - outline: 'none', - }, - - _invalid: { - borderColor: 'error.300', - }, - }; -}); - -const invokeAI = definePartsStyle((props) => ({ - control: invokeAIControl(props), -})); - -export const checkboxTheme = defineMultiStyleConfig({ - variants: { - invokeAI: invokeAI, - }, - defaultProps: { - variant: 'invokeAI', - colorScheme: 'blue', - }, -}); diff --git a/invokeai/frontend/web/src/common/components/InvCheckbox/types.ts b/invokeai/frontend/web/src/common/components/InvCheckbox/types.ts deleted file mode 100644 index 5874d57463..0000000000 --- a/invokeai/frontend/web/src/common/components/InvCheckbox/types.ts +++ /dev/null @@ -1,3 +0,0 @@ -import type { CheckboxProps as ChakraCheckboxProps } from '@chakra-ui/react'; - -export interface InvCheckboxProps extends ChakraCheckboxProps {} diff --git a/invokeai/frontend/web/src/common/components/InvCheckbox/wrapper.ts b/invokeai/frontend/web/src/common/components/InvCheckbox/wrapper.ts deleted file mode 100644 index d637fd3af4..0000000000 --- a/invokeai/frontend/web/src/common/components/InvCheckbox/wrapper.ts +++ /dev/null @@ -1 +0,0 @@ -export { Checkbox as InvCheckbox } from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvConfirmationAlertDialog/InvConfirmationAlertDialog.tsx b/invokeai/frontend/web/src/common/components/InvConfirmationAlertDialog/InvConfirmationAlertDialog.tsx deleted file mode 100644 index b3c8ebb8a1..0000000000 --- a/invokeai/frontend/web/src/common/components/InvConfirmationAlertDialog/InvConfirmationAlertDialog.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { - InvAlertDialog, - InvAlertDialogBody, - InvAlertDialogContent, - InvAlertDialogFooter, - InvAlertDialogHeader, - InvAlertDialogOverlay, -} from 'common/components/InvAlertDialog/wrapper'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { memo, useCallback, useRef } from 'react'; -import { useTranslation } from 'react-i18next'; - -import type { InvConfirmationAlertDialogProps } from './types'; - -/** - * This component is a wrapper around InvAlertDialog that provides a confirmation dialog. - * Its state must be managed externally using chakra's `useDisclosure()` hook. - */ -export const InvConfirmationAlertDialog = memo( - (props: InvConfirmationAlertDialogProps) => { - const { t } = useTranslation(); - - const { - acceptCallback, - cancelCallback, - acceptButtonText = t('common.accept'), - cancelButtonText = t('common.cancel'), - children, - title, - isOpen, - onClose, - } = props; - - const cancelRef = useRef(null); - - const handleAccept = useCallback(() => { - acceptCallback(); - onClose(); - }, [acceptCallback, onClose]); - - const handleCancel = useCallback(() => { - cancelCallback && cancelCallback(); - onClose(); - }, [cancelCallback, onClose]); - - return ( - - - - - {title} - - - {children} - - - - {cancelButtonText} - - - {acceptButtonText} - - - - - - ); - } -); - -InvConfirmationAlertDialog.displayName = 'InvConfirmationAlertDialog'; diff --git a/invokeai/frontend/web/src/common/components/InvConfirmationAlertDialog/types.ts b/invokeai/frontend/web/src/common/components/InvConfirmationAlertDialog/types.ts deleted file mode 100644 index 1c346462c2..0000000000 --- a/invokeai/frontend/web/src/common/components/InvConfirmationAlertDialog/types.ts +++ /dev/null @@ -1,16 +0,0 @@ -import type { AlertDialogProps } from '@chakra-ui/react'; -import type { PropsWithChildren } from 'react'; - -export type InvConfirmationAlertDialogProps = Omit< - AlertDialogProps, - 'leastDestructiveRef' | 'isOpen' | 'onClose' -> & - PropsWithChildren<{ - isOpen: boolean; - onClose: () => void; - acceptButtonText?: string; - acceptCallback: () => void; - cancelButtonText?: string; - cancelCallback?: () => void; - title: string; - }>; diff --git a/invokeai/frontend/web/src/common/components/InvContextMenu/InvContextMenu.stories.tsx b/invokeai/frontend/web/src/common/components/InvContextMenu/InvContextMenu.stories.tsx deleted file mode 100644 index f97264bd57..0000000000 --- a/invokeai/frontend/web/src/common/components/InvContextMenu/InvContextMenu.stories.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { InvMenuItem } from 'common/components/InvMenu/InvMenuItem'; -import { InvMenuList } from 'common/components/InvMenu/InvMenuList'; -import { InvText } from 'common/components/InvText/wrapper'; -import { useCallback } from 'react'; -import { FaCopy, FaDownload, FaTrash } from 'react-icons/fa6'; - -import { InvContextMenu } from './InvContextMenu'; - -const meta: Meta = { - title: 'Primitives/InvContextMenu', - tags: ['autodocs'], - component: InvContextMenu, -}; - -export default meta; -type Story = StoryObj; - -const Component = () => { - const renderMenuFunc = useCallback( - () => ( - - } command="⌘S"> - Download - - } command="⌘C"> - Create a Copy - - Mark as Draft - } isDestructive> - Delete - - Attend a Workshop - - ), - [] - ); - - return ( - renderMenu={renderMenuFunc}> - {(ref) => ( - - Right-click me - - )} - - ); -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvContextMenu/InvContextMenu.tsx b/invokeai/frontend/web/src/common/components/InvContextMenu/InvContextMenu.tsx deleted file mode 100644 index 83dcbc3857..0000000000 --- a/invokeai/frontend/web/src/common/components/InvContextMenu/InvContextMenu.tsx +++ /dev/null @@ -1,111 +0,0 @@ -/** - * Adapted from https://github.com/lukasbach/chakra-ui-contextmenu - */ -import type { - ChakraProps, - MenuButtonProps, - MenuProps, - PortalProps, -} from '@chakra-ui/react'; -import { Portal, useDisclosure, useEventListener } from '@chakra-ui/react'; -import { InvMenu, InvMenuButton } from 'common/components/InvMenu/wrapper'; -import { useGlobalMenuClose } from 'common/hooks/useGlobalMenuClose'; -import { typedMemo } from 'common/util/typedMemo'; -import { useCallback, useEffect, useRef, useState } from 'react'; - -export interface InvContextMenuProps { - renderMenu: () => JSX.Element | null; - children: (ref: React.MutableRefObject) => JSX.Element | null; - menuProps?: Omit & { children?: React.ReactNode }; - portalProps?: Omit & { children?: React.ReactNode }; - menuButtonProps?: MenuButtonProps; -} - -export const InvContextMenu = typedMemo( - (props: InvContextMenuProps) => { - const { isOpen, onOpen, onClose } = useDisclosure(); - const [position, setPosition] = useState([-1, -1]); - const targetRef = useRef(null); - const lastPositionRef = useRef([-1, -1]); - const timeoutRef = useRef(0); - - useGlobalMenuClose(onClose); - - const onContextMenu = useCallback( - (e: MouseEvent) => { - if (e.shiftKey) { - onClose(); - return; - } - if ( - targetRef.current?.contains(e.target as HTMLElement) || - e.target === targetRef.current - ) { - // clear pending delayed open - window.clearTimeout(timeoutRef.current); - e.preventDefault(); - if ( - lastPositionRef.current[0] !== e.pageX || - lastPositionRef.current[1] !== e.pageY - ) { - // if the mouse moved, we need to close, wait for animation and reopen the menu at the new position - onClose(); - timeoutRef.current = window.setTimeout(() => { - onOpen(); - setPosition([e.pageX, e.pageY]); - }, 100); - } else { - // else we can just open the menu at the current position - onOpen(); - setPosition([e.pageX, e.pageY]); - } - } - lastPositionRef.current = [e.pageX, e.pageY]; - }, - [onClose, onOpen] - ); - - useEffect( - () => () => { - window.clearTimeout(timeoutRef.current); - }, - [] - ); - - useEventListener('contextmenu', onContextMenu); - - return ( - <> - {props.children(targetRef)} - - - - {props.renderMenu()} - - - - ); - } -); - -const _hover: ChakraProps['_hover'] = { bg: 'transparent' }; diff --git a/invokeai/frontend/web/src/common/components/InvControl/InvControl.stories.tsx b/invokeai/frontend/web/src/common/components/InvControl/InvControl.stories.tsx deleted file mode 100644 index cd8353b668..0000000000 --- a/invokeai/frontend/web/src/common/components/InvControl/InvControl.stories.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { InvNumberInput } from 'common/components/InvNumberInput/InvNumberInput'; -import { InvSelect } from 'common/components/InvSelect/InvSelect'; -import type { InvSelectOption } from 'common/components/InvSelect/types'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; -import { useState } from 'react'; - -import { InvControl } from './InvControl'; -import type { InvControlProps } from './types'; - -const meta: Meta = { - title: 'Primitives/InvControl', - tags: ['autodocs'], - component: InvControl, - args: { - label: 'My Control', - isDisabled: false, - isInvalid: false, - w: 96, - }, -}; - -export default meta; -type Story = StoryObj; - -const InvControlWithSliderComponent = (props: InvControlProps) => { - const [value, setValue] = useState(0); - return ( - - - - ); -}; - -const InvControlWithSliderAndHelperTextComponent = (props: InvControlProps) => { - const [value, setValue] = useState(0); - return ( - - - - ); -}; - -const InvControlWithNumberInputComponent = (props: InvControlProps) => { - const [value, setValue] = useState(0); - return ( - - - - ); -}; - -const options: InvSelectOption[] = [ - { - value: 'chocolate', - label: 'Chocolate', - }, - { - value: 'strawberry', - label: 'Strawberry', - }, - { - value: 'vanilla', - label: 'Vanilla', - }, -]; -const InvControlWithSelectComponent = (props: InvControlProps) => { - return ( - - - - ); -}; - -export const InvControlWithSlider: Story = { - render: InvControlWithSliderComponent, -}; - -export const InvControlWithSliderAndHelperText: Story = { - render: InvControlWithSliderAndHelperTextComponent, -}; - -export const InvControlWithNumberInput: Story = { - render: InvControlWithNumberInputComponent, -}; - -export const InvControlWithSelect: Story = { - render: InvControlWithSelectComponent, -}; diff --git a/invokeai/frontend/web/src/common/components/InvControl/InvControl.tsx b/invokeai/frontend/web/src/common/components/InvControl/InvControl.tsx deleted file mode 100644 index 55d999da16..0000000000 --- a/invokeai/frontend/web/src/common/components/InvControl/InvControl.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { - Flex, - FormControl as ChakraFormControl, - FormErrorMessage as ChakraFormErrorMessage, - FormHelperText as ChakraFormHelperText, - forwardRef, -} from '@chakra-ui/react'; -import { InvControlGroupContext } from 'common/components/InvControl/InvControlGroup'; -import { memo, useContext, useMemo } from 'react'; - -import { InvLabel } from './InvLabel'; -import type { InvControlProps } from './types'; - -export const InvControl = memo( - forwardRef( - (props: InvControlProps, ref) => { - const { - children, - helperText, - feature, - orientation: _orientation, - renderInfoPopoverInPortal = true, - isDisabled: _isDisabled, - labelProps, - label, - error, - ...formControlProps - } = props; - - const ctx = useContext(InvControlGroupContext); - - const orientation = useMemo( - () => _orientation ?? ctx.orientation, - [_orientation, ctx.orientation] - ); - - const isDisabled = useMemo( - () => _isDisabled ?? ctx.isDisabled, - [_isDisabled, ctx.isDisabled] - ); - - return ( - - - {label && ( - - {label} - - )} - {children} - - {helperText && ( - {helperText} - )} - {error && {error}} - - ); - } - ) -); - -InvControl.displayName = 'InvControl'; diff --git a/invokeai/frontend/web/src/common/components/InvControl/InvControlGroup.tsx b/invokeai/frontend/web/src/common/components/InvControl/InvControlGroup.tsx deleted file mode 100644 index 5e23834e23..0000000000 --- a/invokeai/frontend/web/src/common/components/InvControl/InvControlGroup.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import type { FormControlProps, FormLabelProps } from '@chakra-ui/react'; -import type { PropsWithChildren } from 'react'; -import { createContext, memo } from 'react'; - -export type InvControlGroupProps = { - labelProps?: FormLabelProps; - controlProps?: FormControlProps; - isDisabled?: boolean; - orientation?: 'horizontal' | 'vertical'; -}; - -export const InvControlGroupContext = createContext({}); - -export const InvControlGroup = memo( - ({ children, ...context }: PropsWithChildren) => { - return ( - - {children} - - ); - } -); - -InvControlGroup.displayName = 'InvControlGroup'; diff --git a/invokeai/frontend/web/src/common/components/InvControl/InvLabel.tsx b/invokeai/frontend/web/src/common/components/InvControl/InvLabel.tsx deleted file mode 100644 index e8ec3e72e3..0000000000 --- a/invokeai/frontend/web/src/common/components/InvControl/InvLabel.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { Flex, FormLabel, forwardRef } from '@chakra-ui/react'; -import { useAppSelector } from 'app/store/storeHooks'; -import IAIInformationalPopover from 'common/components/IAIInformationalPopover/IAIInformationalPopover'; -import { InvControlGroupContext } from 'common/components/InvControl/InvControlGroup'; -import { memo, useContext } from 'react'; - -import type { InvLabelProps } from './types'; - -export const InvLabel = memo( - forwardRef( - ( - { feature, renderInfoPopoverInPortal, children, ...rest }: InvLabelProps, - ref - ) => { - const shouldEnableInformationalPopovers = useAppSelector( - (s) => s.system.shouldEnableInformationalPopovers - ); - - const ctx = useContext(InvControlGroupContext); - if (feature && shouldEnableInformationalPopovers) { - return ( - - - - {children} - - - - ); - } - return ( - - {children} - - ); - } - ) -); - -InvLabel.displayName = 'InvLabel'; diff --git a/invokeai/frontend/web/src/common/components/InvControl/theme.ts b/invokeai/frontend/web/src/common/components/InvControl/theme.ts deleted file mode 100644 index 457a243969..0000000000 --- a/invokeai/frontend/web/src/common/components/InvControl/theme.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { - formAnatomy as formParts, - formErrorAnatomy as formErrorParts, -} from '@chakra-ui/anatomy'; -import { - createMultiStyleConfigHelpers, - defineStyle, - defineStyleConfig, -} from '@chakra-ui/styled-system'; - -const { - definePartsStyle: defineFormPartsStyle, - defineMultiStyleConfig: defineFormMultiStyleConfig, -} = createMultiStyleConfigHelpers(formParts.keys); - -const formBaseStyle = defineFormPartsStyle((props) => ({ - container: { - flexDirection: 'column', - alignItems: 'flex-start', - gap: 4, - h: 'unset', - '> .invcontrol-label-wrapper': { - display: 'flex', - flexDirection: props.orientation === 'vertical' ? 'column' : 'row', - alignItems: props.orientation === 'vertical' ? 'flex-start' : 'center', - gap: props.orientation === 'vertical' ? 0 : 4, - minH: 8, - w: 'full', - _invalid: { - color: 'error.300', - }, - '> .invcontrol-input-wrapper': { - w: 'full', - display: 'flex', - gap: 4, - justifyContent: 'flex-end', - }, - }, - }, - helperText: { - w: 'full', - fontSize: 'sm', - color: 'base.400', - m: 0, - }, -})); - -export const formTheme = defineFormMultiStyleConfig({ - baseStyle: formBaseStyle, -}); - -const formLabelBaseStyle = defineStyle(() => { - return { - fontSize: 'sm', - marginEnd: 0, - mb: 0, - flexShrink: 0, - flexGrow: 0, - fontWeight: 'semibold', - transitionProperty: 'common', - transitionDuration: 'normal', - whiteSpace: 'nowrap', - userSelect: 'none', - h: 'full', - alignItems: 'center', - _disabled: { - opacity: 0.4, - }, - color: 'base.300', - _invalid: { - color: 'error.300', - }, - }; -}); - -export const formLabelTheme = defineStyleConfig({ - baseStyle: formLabelBaseStyle, -}); - -const { defineMultiStyleConfig: defineFormErrorMultiStyleConfig } = - createMultiStyleConfigHelpers(formErrorParts.keys); - -export const formErrorTheme = defineFormErrorMultiStyleConfig({ - baseStyle: { - text: { - color: 'error.300', - }, - }, -}); diff --git a/invokeai/frontend/web/src/common/components/InvControl/types.ts b/invokeai/frontend/web/src/common/components/InvControl/types.ts deleted file mode 100644 index 56cd8e6f1a..0000000000 --- a/invokeai/frontend/web/src/common/components/InvControl/types.ts +++ /dev/null @@ -1,22 +0,0 @@ -import type { - FormControlProps as ChakraFormControlProps, - FormLabelProps as ChakraFormLabelProps, -} from '@chakra-ui/react'; -import type { Feature } from 'common/components/IAIInformationalPopover/constants'; - -export type InvControlProps = ChakraFormControlProps & { - label?: string; - helperText?: string; - error?: string; - feature?: Feature; - renderInfoPopoverInPortal?: boolean; - labelProps?: Omit< - InvLabelProps, - 'children' | 'feature' | 'renderInfoPopoverInPortal' - >; -}; - -export type InvLabelProps = ChakraFormLabelProps & { - feature?: Feature; - renderInfoPopoverInPortal?: boolean; -}; diff --git a/invokeai/frontend/web/src/common/components/InvEditable/InvEditable.stories.tsx b/invokeai/frontend/web/src/common/components/InvEditable/InvEditable.stories.tsx deleted file mode 100644 index 54589ab246..0000000000 --- a/invokeai/frontend/web/src/common/components/InvEditable/InvEditable.stories.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import type { InvEditableProps } from './types'; -import { InvEditable, InvEditableInput, InvEditablePreview } from './wrapper'; - -const meta: Meta = { - title: 'Primitives/InvEditable', - tags: ['autodocs'], - component: InvEditable, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvEditableProps) => { - return ( - - - - - ); -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvEditable/theme.ts b/invokeai/frontend/web/src/common/components/InvEditable/theme.ts deleted file mode 100644 index 0577766e9e..0000000000 --- a/invokeai/frontend/web/src/common/components/InvEditable/theme.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { editableAnatomy as parts } from '@chakra-ui/anatomy'; -import { - createMultiStyleConfigHelpers, - defineStyle, -} from '@chakra-ui/styled-system'; - -const { definePartsStyle, defineMultiStyleConfig } = - createMultiStyleConfigHelpers(parts.keys); - -const baseStylePreview = defineStyle({ - fontSize: 'sm', - borderRadius: 'md', - py: '1', - transitionProperty: 'common', - transitionDuration: 'normal', - color: 'base.100', - _invalid: { - color: 'error.300', - }, -}); - -const baseStyleInput = defineStyle(() => ({ - color: 'base.100', - fontSize: 'sm', - borderRadius: 'md', - py: '1', - transitionProperty: 'common', - transitionDuration: 'normal', - width: 'full', - _focusVisible: { boxShadow: 'none' }, - _placeholder: { opacity: 0.6 }, - '::selection': { - color: 'blue.900', - bg: 'blue.300', - }, -})); - -const baseStyleTextarea = defineStyle({ - borderRadius: 'md', - py: '1', - transitionProperty: 'common', - transitionDuration: 'normal', - width: 'full', - _focusVisible: { boxShadow: 'outline' }, - _placeholder: { opacity: 0.6 }, -}); - -const invokeAI = definePartsStyle(() => ({ - preview: baseStylePreview, - input: baseStyleInput(), - textarea: baseStyleTextarea, -})); - -export const editableTheme = defineMultiStyleConfig({ - variants: { - invokeAI, - }, - defaultProps: { - size: 'sm', - variant: 'invokeAI', - }, -}); diff --git a/invokeai/frontend/web/src/common/components/InvEditable/types.ts b/invokeai/frontend/web/src/common/components/InvEditable/types.ts deleted file mode 100644 index 654c998bf9..0000000000 --- a/invokeai/frontend/web/src/common/components/InvEditable/types.ts +++ /dev/null @@ -1,6 +0,0 @@ -export type { - EditableInputProps as InvEditableInputProps, - EditablePreviewProps as InvEditablePreviewProps, - EditableProps as InvEditableProps, - EditableTextareaProps as InvEditableTextareaProps, -} from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvEditable/wrapper.ts b/invokeai/frontend/web/src/common/components/InvEditable/wrapper.ts deleted file mode 100644 index f68210e140..0000000000 --- a/invokeai/frontend/web/src/common/components/InvEditable/wrapper.ts +++ /dev/null @@ -1,6 +0,0 @@ -export { - Editable as InvEditable, - EditableInput as InvEditableInput, - EditablePreview as InvEditablePreview, - EditableTextarea as InvEditableTextarea, -} from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvExpander/InvExpander.stories.tsx b/invokeai/frontend/web/src/common/components/InvExpander/InvExpander.stories.tsx deleted file mode 100644 index 787d46fa28..0000000000 --- a/invokeai/frontend/web/src/common/components/InvExpander/InvExpander.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import { InvExpander } from './InvExpander'; -import type { InvExpanderProps } from './types'; - -const meta: Meta = { - title: 'Primitives/InvExpander', - tags: ['autodocs'], - component: InvExpander, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvExpanderProps) => { - return Invoke; -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvExpander/InvExpander.tsx b/invokeai/frontend/web/src/common/components/InvExpander/InvExpander.tsx deleted file mode 100644 index 409fc98572..0000000000 --- a/invokeai/frontend/web/src/common/components/InvExpander/InvExpander.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { Divider, Flex } from '@chakra-ui/layout'; -import type { SystemStyleObject } from '@chakra-ui/react'; -import { Collapse, Icon, useDisclosure } from '@chakra-ui/react'; -import { useAppDispatch } from 'app/store/storeHooks'; -import type { InvExpanderProps } from 'common/components/InvExpander/types'; -import { InvText } from 'common/components/InvText/wrapper'; -import { expanderToggled } from 'features/parameters/store/actions'; -import { t } from 'i18next'; -import { useCallback } from 'react'; -import { BiCollapseVertical, BiExpandVertical } from 'react-icons/bi'; - -const buttonStyles: SystemStyleObject = { - color: 'base.400', - borderColor: 'base.400', - transitionDuration: 'normal', - transitionProperty: 'common', - ':hover, :hover *': { - transitionDuration: 'normal', - transitionProperty: 'common', - color: 'base.300', - borderColor: 'base.300', - }, -}; - -export const InvExpander = ({ - children, - label = t('common.advancedOptions'), - defaultIsOpen = false, - id, -}: InvExpanderProps) => { - const { isOpen, onToggle } = useDisclosure({ defaultIsOpen }); - const dispatch = useAppDispatch(); - - const onToggleExpander = useCallback(() => { - if (id) { - dispatch(expanderToggled({ id, isOpen })); - } - - onToggle(); - }, [id, dispatch, onToggle, isOpen]); - - return ( - - - - - - - {label} - - - - - {children} - - - ); -}; diff --git a/invokeai/frontend/web/src/common/components/InvExpander/types.ts b/invokeai/frontend/web/src/common/components/InvExpander/types.ts deleted file mode 100644 index 8017461706..0000000000 --- a/invokeai/frontend/web/src/common/components/InvExpander/types.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type { PropsWithChildren } from 'react'; - -export type InvExpanderProps = PropsWithChildren<{ - label?: string; - defaultIsOpen?: boolean; - id?: string; -}>; diff --git a/invokeai/frontend/web/src/common/components/InvHeading/InvHeading.stories.tsx b/invokeai/frontend/web/src/common/components/InvHeading/InvHeading.stories.tsx deleted file mode 100644 index f8f779522e..0000000000 --- a/invokeai/frontend/web/src/common/components/InvHeading/InvHeading.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import type { InvHeadingProps } from './types'; -import { InvHeading } from './wrapper'; - -const meta: Meta = { - title: 'Primitives/InvHeading', - tags: ['autodocs'], - component: InvHeading, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvHeadingProps) => { - return Banana sushi is delectable!; -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvHeading/theme.ts b/invokeai/frontend/web/src/common/components/InvHeading/theme.ts deleted file mode 100644 index 73c0eecdc5..0000000000 --- a/invokeai/frontend/web/src/common/components/InvHeading/theme.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { defineStyle, defineStyleConfig } from '@chakra-ui/react'; - -const invokeBlue = defineStyle(() => ({ - color: 'invokeBlue.300', -})); - -export const headingTheme = defineStyleConfig({ - variants: { - invokeBlue, - }, -}); diff --git a/invokeai/frontend/web/src/common/components/InvHeading/types.ts b/invokeai/frontend/web/src/common/components/InvHeading/types.ts deleted file mode 100644 index 5d6549409f..0000000000 --- a/invokeai/frontend/web/src/common/components/InvHeading/types.ts +++ /dev/null @@ -1 +0,0 @@ -export type { HeadingProps as InvHeadingProps } from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvHeading/wrapper.ts b/invokeai/frontend/web/src/common/components/InvHeading/wrapper.ts deleted file mode 100644 index d0f7b705ad..0000000000 --- a/invokeai/frontend/web/src/common/components/InvHeading/wrapper.ts +++ /dev/null @@ -1 +0,0 @@ -export { Heading as InvHeading } from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvIconButton/InvIconButton.stories.tsx b/invokeai/frontend/web/src/common/components/InvIconButton/InvIconButton.stories.tsx deleted file mode 100644 index 9348f516b3..0000000000 --- a/invokeai/frontend/web/src/common/components/InvIconButton/InvIconButton.stories.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { FaBoltLightning } from 'react-icons/fa6'; - -import { InvIconButton } from './InvIconButton'; -import type { InvIconButtonProps } from './types'; - -const meta: Meta = { - title: 'Primitives/InvIconButton', - tags: ['autodocs'], - component: InvIconButton, - args: { - icon: , - }, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvIconButtonProps) => { - return ; -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvIconButton/InvIconButton.tsx b/invokeai/frontend/web/src/common/components/InvIconButton/InvIconButton.tsx deleted file mode 100644 index 6bddb79e2b..0000000000 --- a/invokeai/frontend/web/src/common/components/InvIconButton/InvIconButton.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { forwardRef, IconButton } from '@chakra-ui/react'; -import type { InvIconButtonProps } from 'common/components/InvIconButton/types'; -import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; -import { memo } from 'react'; - -export const InvIconButton = memo( - forwardRef( - ({ isChecked, tooltip, ...rest }: InvIconButtonProps, ref) => { - if (tooltip) { - return ( - - - - ); - } - - return ( - - ); - } - ) -); - -InvIconButton.displayName = 'InvIconButton'; diff --git a/invokeai/frontend/web/src/common/components/InvIconButton/types.ts b/invokeai/frontend/web/src/common/components/InvIconButton/types.ts deleted file mode 100644 index a6d77592f8..0000000000 --- a/invokeai/frontend/web/src/common/components/InvIconButton/types.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type { IconButtonProps as ChakraIconButtonProps } from '@chakra-ui/react'; -import type { ReactNode } from 'react'; - -export type InvIconButtonProps = ChakraIconButtonProps & { - isChecked?: boolean; - tooltip?: ReactNode; -}; diff --git a/invokeai/frontend/web/src/common/components/InvInput/InvInput.stories.tsx b/invokeai/frontend/web/src/common/components/InvInput/InvInput.stories.tsx deleted file mode 100644 index fb202cc012..0000000000 --- a/invokeai/frontend/web/src/common/components/InvInput/InvInput.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import { InvInput } from './InvInput'; -import type { InvInputProps } from './types'; - -const meta: Meta = { - title: 'Primitives/InvInput', - tags: ['autodocs'], - component: InvInput, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvInputProps) => { - return ; -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvInput/InvInput.tsx b/invokeai/frontend/web/src/common/components/InvInput/InvInput.tsx deleted file mode 100644 index 21018faa0c..0000000000 --- a/invokeai/frontend/web/src/common/components/InvInput/InvInput.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { forwardRef, Input } from '@chakra-ui/react'; -import { useGlobalModifiersSetters } from 'common/hooks/useGlobalModifiers'; -import { stopPastePropagation } from 'common/util/stopPastePropagation'; -import type { KeyboardEvent } from 'react'; -import { memo, useCallback } from 'react'; - -import type { InvInputProps } from './types'; - -export const InvInput = memo( - forwardRef((props: InvInputProps, ref) => { - const { setShift } = useGlobalModifiersSetters(); - const onKeyUpDown = useCallback( - (e: KeyboardEvent) => { - setShift(e.shiftKey); - }, - [setShift] - ); - return ( - - ); - }) -); - -InvInput.displayName = 'InvInput'; diff --git a/invokeai/frontend/web/src/common/components/InvInput/theme.ts b/invokeai/frontend/web/src/common/components/InvInput/theme.ts deleted file mode 100644 index 2352eb6258..0000000000 --- a/invokeai/frontend/web/src/common/components/InvInput/theme.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { inputAnatomy as parts } from '@chakra-ui/anatomy'; -import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'; -import { getInputFilledStyles } from 'theme/util/getInputFilledStyles'; - -const { definePartsStyle, defineMultiStyleConfig } = - createMultiStyleConfigHelpers(parts.keys); - -export const inputTheme = defineMultiStyleConfig({ - variants: { - filled: definePartsStyle((props) => ({ - field: getInputFilledStyles(props), - })), - darkFilled: definePartsStyle((props) => ({ - field: getInputFilledStyles(props), - })), - }, - defaultProps: { - size: 'sm', - variant: 'filled', - }, -}); diff --git a/invokeai/frontend/web/src/common/components/InvInput/types.ts b/invokeai/frontend/web/src/common/components/InvInput/types.ts deleted file mode 100644 index 1b032c1b1e..0000000000 --- a/invokeai/frontend/web/src/common/components/InvInput/types.ts +++ /dev/null @@ -1,3 +0,0 @@ -import type { InputProps as ChakraInputProps } from '@chakra-ui/react'; - -export type InvInputProps = ChakraInputProps; diff --git a/invokeai/frontend/web/src/common/components/InvMenu/InvMenu.stories.tsx b/invokeai/frontend/web/src/common/components/InvMenu/InvMenu.stories.tsx deleted file mode 100644 index 787401d190..0000000000 --- a/invokeai/frontend/web/src/common/components/InvMenu/InvMenu.stories.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { ChevronDownIcon } from '@chakra-ui/icons'; -import type { Meta, StoryObj } from '@storybook/react'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { FaCopy, FaDownload, FaTrash } from 'react-icons/fa6'; - -import { InvMenuItem } from './InvMenuItem'; -import { InvMenuList } from './InvMenuList'; -import type { InvMenuProps } from './types'; -import { InvMenu, InvMenuButton, InvMenuGroup } from './wrapper'; - -const meta: Meta = { - title: 'Primitives/InvMenu', - tags: ['autodocs'], - component: InvMenu, - args: { - colorScheme: 'base', - }, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvMenuProps) => { - return ( - - }> - Actions - - - - } command="⌘S"> - Download - - } command="⌘C"> - Create a Copy - - Mark as Draft - } isDestructive> - Delete - - Attend a Workshop - - - } command="⌘S"> - Download - - } command="⌘C"> - Create a Copy - - Mark as Draft - } isDestructive> - Delete - - Attend a Workshop - - - - ); -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvMenu/InvMenuItem.tsx b/invokeai/frontend/web/src/common/components/InvMenu/InvMenuItem.tsx deleted file mode 100644 index 687730c464..0000000000 --- a/invokeai/frontend/web/src/common/components/InvMenu/InvMenuItem.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { SpinnerIcon } from '@chakra-ui/icons'; -import { forwardRef, MenuItem as ChakraMenuItem } from '@chakra-ui/react'; -import { memo } from 'react'; -import { spinAnimation } from 'theme/animations'; - -import type { InvMenuItemProps } from './types'; - -export const InvMenuItem = memo( - forwardRef( - (props: InvMenuItemProps, ref) => { - const { - isDestructive = false, - isLoading = false, - isDisabled, - icon, - ...rest - } = props; - return ( - : icon} - isDisabled={isLoading || isDisabled} - data-destructive={isDestructive} - {...rest} - /> - ); - } - ) -); - -InvMenuItem.displayName = 'InvMenuItem'; diff --git a/invokeai/frontend/web/src/common/components/InvMenu/InvMenuList.tsx b/invokeai/frontend/web/src/common/components/InvMenu/InvMenuList.tsx deleted file mode 100644 index 61b7461b9d..0000000000 --- a/invokeai/frontend/web/src/common/components/InvMenu/InvMenuList.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { - forwardRef, - MenuList as ChakraMenuList, - Portal, -} from '@chakra-ui/react'; -import { skipMouseEvent } from 'common/util/skipMouseEvent'; -import { memo } from 'react'; - -import { menuListMotionProps } from './constants'; -import type { InvMenuListProps } from './types'; - -export const InvMenuList = memo( - forwardRef( - (props: InvMenuListProps, ref) => { - return ( - - - - ); - } - ) -); - -InvMenuList.displayName = 'InvMenuList'; diff --git a/invokeai/frontend/web/src/common/components/InvMenu/constants.ts b/invokeai/frontend/web/src/common/components/InvMenu/constants.ts deleted file mode 100644 index 8c554ac2f1..0000000000 --- a/invokeai/frontend/web/src/common/components/InvMenu/constants.ts +++ /dev/null @@ -1,29 +0,0 @@ -import type { MotionProps } from 'framer-motion'; - -/** - * Props for the animation of the MenuList. - */ -export const menuListMotionProps: MotionProps = { - variants: { - enter: { - visibility: 'visible', - opacity: 1, - scale: 1, - transition: { - duration: 0.07, - ease: [0.4, 0, 0.2, 1], - }, - }, - exit: { - transitionEnd: { - visibility: 'hidden', - }, - opacity: 0, - scale: 0.8, - transition: { - duration: 0.07, - easings: 'easeOut', - }, - }, - }, -}; diff --git a/invokeai/frontend/web/src/common/components/InvMenu/theme.ts b/invokeai/frontend/web/src/common/components/InvMenu/theme.ts deleted file mode 100644 index c8ffa99d26..0000000000 --- a/invokeai/frontend/web/src/common/components/InvMenu/theme.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { menuAnatomy } from '@chakra-ui/anatomy'; -import { createMultiStyleConfigHelpers } from '@chakra-ui/react'; - -const { definePartsStyle, defineMultiStyleConfig } = - createMultiStyleConfigHelpers(menuAnatomy.keys); - -// define the base component styles -const invokeAI = definePartsStyle(() => ({ - // define the part you're going to style - button: { - // this will style the MenuButton component - bg: 'base.500', - color: 'base.100', - _hover: { - bg: 'base.600', - color: 'base.50', - fontWeight: 'semibold', - }, - }, - list: { - zIndex: 9999, - color: 'base.150', - bg: 'base.800', - shadow: 'dark-lg', - border: 'none', - p: 2, - }, - item: { - // this will style the MenuItem and MenuItemOption components - borderRadius: 'sm', - fontSize: 'sm', - bg: 'base.800', - _hover: { - bg: 'base.700', - svg: { - opacity: 1, - }, - }, - _focus: { - bg: 'base.700', - }, - svg: { - opacity: 0.7, - fontSize: 14, - }, - "&[data-destructive='true']": { - color: 'error.300', - fill: 'error.300', - _hover: { - bg: 'error.600', - color: 'base.50', - fill: 'base.50', - }, - }, - "&[aria-selected='true']": { - fontWeight: 'semibold', - bg: 'blue.300 !important', - color: 'base.800 !important', - _hover: { - color: 'base.900 !important', - bg: 'blue.400 !important', - }, - }, - "&[aria-selected='true'] [data-option-desc='true']": { - color: 'base.800', - }, - }, - divider: { - borderColor: 'base.700', - }, - groupTitle: { - m: 0, - px: 3, - py: 2, - color: 'base.500', - }, -})); - -export const menuTheme = defineMultiStyleConfig({ - variants: { - invokeAI, - }, - defaultProps: { - variant: 'invokeAI', - }, -}); diff --git a/invokeai/frontend/web/src/common/components/InvMenu/types.ts b/invokeai/frontend/web/src/common/components/InvMenu/types.ts deleted file mode 100644 index 4d2aba2662..0000000000 --- a/invokeai/frontend/web/src/common/components/InvMenu/types.ts +++ /dev/null @@ -1,22 +0,0 @@ -import type { - MenuButtonProps as ChakraMenuButtonProps, - MenuDividerProps as ChakraMenuDividerProps, - MenuGroupProps as ChakraMenuGroupProps, - MenuItemOptionProps as ChakraMenuItemOptionProps, - MenuItemProps as ChakraMenuItemProps, - MenuListProps as ChakraMenuListProps, - MenuOptionGroupProps as ChakraMenuOptionGroupProps, - MenuProps as ChakraMenuProps, -} from '@chakra-ui/react'; - -export type InvMenuProps = ChakraMenuProps; -export type InvMenuButtonProps = ChakraMenuButtonProps; -export type InvMenuListProps = ChakraMenuListProps; -export type InvMenuItemProps = ChakraMenuItemProps & { - isDestructive?: boolean; - isLoading?: boolean; -}; -export type InvMenuItemOptionProps = ChakraMenuItemOptionProps; -export type InvMenuGroupProps = ChakraMenuGroupProps; -export type InvMenuOptionGroupProps = ChakraMenuOptionGroupProps; -export type InvMenuDividerProps = ChakraMenuDividerProps; diff --git a/invokeai/frontend/web/src/common/components/InvMenu/wrapper.ts b/invokeai/frontend/web/src/common/components/InvMenu/wrapper.ts deleted file mode 100644 index 5d00069872..0000000000 --- a/invokeai/frontend/web/src/common/components/InvMenu/wrapper.ts +++ /dev/null @@ -1,8 +0,0 @@ -export { - Menu as InvMenu, - MenuButton as InvMenuButton, - MenuDivider as InvMenuDivider, - MenuGroup as InvMenuGroup, - MenuItemOption as InvMenuItemOption, - MenuOptionGroup as InvMenuOptionGroup, -} from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvModal/InvModal.stories.tsx b/invokeai/frontend/web/src/common/components/InvModal/InvModal.stories.tsx deleted file mode 100644 index 731c74bed4..0000000000 --- a/invokeai/frontend/web/src/common/components/InvModal/InvModal.stories.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { useDisclosure } from '@chakra-ui/react'; -import type { Meta, StoryObj } from '@storybook/react'; -import { InvButton } from 'common/components/InvButton/InvButton'; - -import { - InvModal, - InvModalBody, - InvModalCloseButton, - InvModalContent, - InvModalFooter, - InvModalHeader, - InvModalOverlay, -} from './wrapper'; - -const meta: Meta = { - title: 'Primitives/InvModal', - tags: ['autodocs'], - component: InvModal, - args: { - colorScheme: 'base', - }, -}; - -export default meta; -type Story = StoryObj; - -const Component = () => { - const { isOpen, onOpen, onClose } = useDisclosure(); - return ( - <> - Open Modal - - - - - Modal Title - - - Slices of banana are caramelized with brown sugar and butter, then - rolled in sushi rice and topped with a drizzle of caramel sauce. - This variety offers a sweet and rich flavor, combining the - creaminess of banana with the indulgent taste of caramel. - - - - - Close - - - Secondary Action - - - - - - ); -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvModal/theme.ts b/invokeai/frontend/web/src/common/components/InvModal/theme.ts deleted file mode 100644 index f68503fcbb..0000000000 --- a/invokeai/frontend/web/src/common/components/InvModal/theme.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { modalAnatomy as parts } from '@chakra-ui/anatomy'; -import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'; - -const { defineMultiStyleConfig, definePartsStyle } = - createMultiStyleConfigHelpers(parts.keys); - -export const baseStyle = definePartsStyle(() => ({ - overlay: { - bg: 'blackAlpha.700', - }, - dialogContainer: {}, - dialog: { - maxH: '80vh', - bg: 'base.800', - }, - header: { - fontWeight: 'semibold', - fontSize: 'lg', - color: 'base.300', - }, - closeButton: { - opacity: 0.5, - }, - body: { - overflowY: 'scroll', - }, - footer: {}, -})); - -export const modalTheme = defineMultiStyleConfig({ - baseStyle, - defaultProps: { size: 'lg' }, -}); diff --git a/invokeai/frontend/web/src/common/components/InvModal/types.ts b/invokeai/frontend/web/src/common/components/InvModal/types.ts deleted file mode 100644 index 768a491614..0000000000 --- a/invokeai/frontend/web/src/common/components/InvModal/types.ts +++ /dev/null @@ -1,9 +0,0 @@ -export type { - ModalBody as InvModalBodyProps, - ModalCloseButton as InvModalCloseButtonProps, - ModalContent as InvModalContentProps, - ModalFooter as InvModalFooterProps, - ModalHeader as InvModalHeaderProps, - ModalOverlay as InvModalOverlayProps, - Modal as InvModalProps, -} from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvModal/wrapper.ts b/invokeai/frontend/web/src/common/components/InvModal/wrapper.ts deleted file mode 100644 index 4074de9577..0000000000 --- a/invokeai/frontend/web/src/common/components/InvModal/wrapper.ts +++ /dev/null @@ -1,9 +0,0 @@ -export { - Modal as InvModal, - ModalBody as InvModalBody, - ModalCloseButton as InvModalCloseButton, - ModalContent as InvModalContent, - ModalFooter as InvModalFooter, - ModalHeader as InvModalHeader, - ModalOverlay as InvModalOverlay, -} from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvNumberInput/InvNumberInput.stories.tsx b/invokeai/frontend/web/src/common/components/InvNumberInput/InvNumberInput.stories.tsx deleted file mode 100644 index 25ea3fd227..0000000000 --- a/invokeai/frontend/web/src/common/components/InvNumberInput/InvNumberInput.stories.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { useState } from 'react'; - -import { InvNumberInput } from './InvNumberInput'; -import type { InvNumberInputProps } from './types'; - -const meta: Meta = { - title: 'Primitives/InvNumberInput', - tags: ['autodocs'], - component: InvNumberInput, - args: { - min: -10, - max: 10, - step: 1, - }, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvNumberInputProps) => { - const [value, setValue] = useState(0); - return ; -}; - -export const Default: Story = { - render: Component, - args: { fineStep: 0.1 }, -}; - -export const Integer: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvNumberInput/InvNumberInput.tsx b/invokeai/frontend/web/src/common/components/InvNumberInput/InvNumberInput.tsx deleted file mode 100644 index 4f98bd6a81..0000000000 --- a/invokeai/frontend/web/src/common/components/InvNumberInput/InvNumberInput.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import { forwardRef, NumberInput as ChakraNumberInput } from '@chakra-ui/react'; -import { useStore } from '@nanostores/react'; -import { $shift } from 'common/hooks/useGlobalModifiers'; -import { roundToMultiple } from 'common/util/roundDownToMultiple'; -import { stopPastePropagation } from 'common/util/stopPastePropagation'; -import { clamp } from 'lodash-es'; -import type { FocusEventHandler } from 'react'; -import { memo, useCallback, useEffect, useMemo, useState } from 'react'; - -import { InvNumberInputField } from './InvNumberInputField'; -import { InvNumberInputStepper } from './InvNumberInputStepper'; -import type { InvNumberInputProps } from './types'; - -const isValidCharacter = (char: string) => /^[0-9\-.]$/i.test(char); - -export const InvNumberInput = memo( - forwardRef( - (props: InvNumberInputProps, ref) => { - const { - value, - min = 0, - max, - step: _step = 1, - fineStep: _fineStep, - onChange: _onChange, - numberInputFieldProps, - defaultValue, - ...rest - } = props; - - const [valueAsString, setValueAsString] = useState(String(value)); - const [valueAsNumber, setValueAsNumber] = useState(value); - const shift = useStore($shift); - const step = useMemo( - () => (shift ? _fineStep ?? _step : _step), - [shift, _fineStep, _step] - ); - const isInteger = useMemo( - () => Number.isInteger(_step) && Number.isInteger(_fineStep ?? 1), - [_step, _fineStep] - ); - - const inputMode = useMemo( - () => (isInteger ? 'numeric' : 'decimal'), - [isInteger] - ); - - const precision = useMemo(() => (isInteger ? 0 : 3), [isInteger]); - - const onChange = useCallback( - (valueAsString: string, valueAsNumber: number) => { - setValueAsString(valueAsString); - if (isNaN(valueAsNumber)) { - return; - } - setValueAsNumber(valueAsNumber); - _onChange(valueAsNumber); - }, - [_onChange] - ); - - // This appears to be unnecessary? Cannot figure out what it did but leaving it here in case - // it was important. - // const onClickStepper = useCallback( - // () => _onChange(Number(valueAsString)), - // [_onChange, valueAsString] - // ); - - const onBlur: FocusEventHandler = useCallback( - (e) => { - if (!e.target.value) { - // If the input is empty, we set it to the minimum value - onChange(String(defaultValue ?? min), Number(defaultValue) ?? min); - } else { - // Otherwise, we round the value to the nearest multiple if integer, else 3 decimals - const roundedValue = isInteger - ? roundToMultiple(valueAsNumber, _fineStep ?? _step) - : Number(valueAsNumber.toFixed(precision)); - // Clamp to min/max - const clampedValue = clamp(roundedValue, min, max); - onChange(String(clampedValue), clampedValue); - } - }, - [ - _fineStep, - _step, - defaultValue, - isInteger, - max, - min, - onChange, - precision, - valueAsNumber, - ] - ); - - /** - * When `value` changes (e.g. from a diff source than this component), we need - * to update the internal `valueAsString`, but only if the actual value is different - * from the current value. - */ - useEffect(() => { - if (value !== valueAsNumber) { - setValueAsString(String(value)); - setValueAsNumber(value); - } - }, [value, valueAsNumber]); - - return ( - - - - - ); - } - ) -); - -InvNumberInput.displayName = 'InvNumberInput'; diff --git a/invokeai/frontend/web/src/common/components/InvNumberInput/InvNumberInputField.tsx b/invokeai/frontend/web/src/common/components/InvNumberInput/InvNumberInputField.tsx deleted file mode 100644 index bd453f5d3e..0000000000 --- a/invokeai/frontend/web/src/common/components/InvNumberInput/InvNumberInputField.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { NumberInputField as ChakraNumberInputField } from '@chakra-ui/react'; -import { useGlobalModifiersSetters } from 'common/hooks/useGlobalModifiers'; -import type { KeyboardEventHandler } from 'react'; -import { memo, useCallback } from 'react'; - -import type { InvNumberInputFieldProps } from './types'; - -export const InvNumberInputField = memo((props: InvNumberInputFieldProps) => { - const { onKeyUp, onKeyDown, children, ...rest } = props; - const { setShift } = useGlobalModifiersSetters(); - - const _onKeyUp: KeyboardEventHandler = useCallback( - (e) => { - onKeyUp?.(e); - setShift(e.key === 'Shift'); - }, - [onKeyUp, setShift] - ); - const _onKeyDown: KeyboardEventHandler = useCallback( - (e) => { - onKeyDown?.(e); - setShift(e.key === 'Shift'); - }, - [onKeyDown, setShift] - ); - - return ( - - {children} - - ); -}); - -InvNumberInputField.displayName = 'InvNumberInputField'; diff --git a/invokeai/frontend/web/src/common/components/InvNumberInput/InvNumberInputStepper.tsx b/invokeai/frontend/web/src/common/components/InvNumberInput/InvNumberInputStepper.tsx deleted file mode 100644 index 247b42f7da..0000000000 --- a/invokeai/frontend/web/src/common/components/InvNumberInput/InvNumberInputStepper.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons'; -import { - forwardRef, - NumberDecrementStepper as ChakraNumberDecrementStepper, - NumberIncrementStepper as ChakraNumberIncrementStepper, - NumberInputStepper as ChakraNumberInputStepper, -} from '@chakra-ui/react'; -import { memo } from 'react'; - -import type { InvNumberInputStepperProps } from './types'; - -export const InvNumberInputStepper = memo( - forwardRef( - (props: InvNumberInputStepperProps, ref) => { - return ( - - - - - - - - - ); - } - ) -); - -InvNumberInputStepper.displayName = 'InvNumberInputStepper'; diff --git a/invokeai/frontend/web/src/common/components/InvNumberInput/theme.ts b/invokeai/frontend/web/src/common/components/InvNumberInput/theme.ts deleted file mode 100644 index a35928b77b..0000000000 --- a/invokeai/frontend/web/src/common/components/InvNumberInput/theme.ts +++ /dev/null @@ -1,84 +0,0 @@ -import { numberInputAnatomy as parts } from '@chakra-ui/anatomy'; -import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'; -import { getInputFilledStyles } from 'theme/util/getInputFilledStyles'; -import { getInputOutlineStyles } from 'theme/util/getInputOutlineStyles'; - -const { defineMultiStyleConfig, definePartsStyle } = - createMultiStyleConfigHelpers(parts.keys); - -const invokeAI = definePartsStyle(() => ({ - root: { - // height: 8, - }, - field: { - border: 'none', - fontWeight: 'semibold', - height: 'auto', - py: 1, - ps: 2, - pe: 6, - ...getInputOutlineStyles(), - }, - stepperGroup: { - display: 'flex', - }, - stepper: { - border: 'none', - svg: { - color: 'base.300', - width: 2.5, - height: 2.5, - _hover: { - color: 'base.100', - }, - }, - }, -})); - -const filled = definePartsStyle((props) => { - return { - root: { h: '28px' }, - field: { ...getInputFilledStyles(props), pe: 6, h: 'full' }, - stepperGroup: { - border: 'none', - w: 6, - }, - stepper: { - color: 'base.200', - _hover: { - bg: 'base.700', - color: 'base.100', - }, - _disabled: { - _hover: { - bg: 'base.800', - color: 'base.200', - }, - }, - _first: { - border: 'none', - margin: 0, - borderTopEndRadius: 'base', - borderBottomStartRadius: 'base', - }, - _last: { - border: 'none', - margin: 0, - borderBottomEndRadius: 'base', - borderTopStartRadius: 'base', - }, - }, - }; -}); - -export const numberInputTheme = defineMultiStyleConfig({ - variants: { - invokeAI, - filled, - darkFilled: filled, - }, - defaultProps: { - size: 'sm', - variant: 'filled', - }, -}); diff --git a/invokeai/frontend/web/src/common/components/InvNumberInput/types.ts b/invokeai/frontend/web/src/common/components/InvNumberInput/types.ts deleted file mode 100644 index 74f4dccfe3..0000000000 --- a/invokeai/frontend/web/src/common/components/InvNumberInput/types.ts +++ /dev/null @@ -1,46 +0,0 @@ -import type { - NumberDecrementStepperProps as ChakraNumberDecrementStepperProps, - NumberIncrementStepperProps as ChakraNumberIncrementStepperProps, - NumberInputFieldProps as ChakraNumberInputFieldProps, - NumberInputProps as ChakraNumberInputProps, - NumberInputStepperProps as ChakraNumberInputStepperProps, -} from '@chakra-ui/react'; - -export type InvNumberInputFieldProps = ChakraNumberInputFieldProps; -export type InvNumberInputStepperProps = ChakraNumberInputStepperProps; -export type InvNumberIncrementStepperProps = ChakraNumberIncrementStepperProps; -export type InvNumberDecrementStepperProps = ChakraNumberDecrementStepperProps; - -export type InvNumberInputProps = Omit< - ChakraNumberInputProps, - 'onChange' | 'min' | 'max' -> & { - /** - * The value - */ - value: number; - /** - * The minimum value - */ - min: number; - /** - * The maximum value - */ - max: number; - /** - * The default step - */ - step?: number; - /** - * The fine step (used when shift is pressed) - */ - fineStep?: number; - /** - * The change handler - */ - onChange: (v: number) => void; - /** - * Override props for the Chakra NumberInputField component - */ - numberInputFieldProps?: InvNumberInputFieldProps; -}; diff --git a/invokeai/frontend/web/src/common/components/InvPopover/InvPopover.stories.tsx b/invokeai/frontend/web/src/common/components/InvPopover/InvPopover.stories.tsx deleted file mode 100644 index 056b179af3..0000000000 --- a/invokeai/frontend/web/src/common/components/InvPopover/InvPopover.stories.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { InvButton } from 'common/components/InvButton/InvButton'; - -import { - InvPopover, - InvPopoverArrow, - InvPopoverBody, - InvPopoverCloseButton, - InvPopoverContent, - InvPopoverHeader, - InvPopoverTrigger, -} from './wrapper'; - -const meta: Meta = { - title: 'Primitives/InvPopover', - tags: ['autodocs'], - component: InvPopover, - args: { - colorScheme: 'base', - }, -}; - -export default meta; -type Story = StoryObj; - -const Component = () => { - return ( - - - Trigger - - - - - Confirmation! - - Are you sure you want to have that milkshake? - - - - ); -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvPopover/theme.ts b/invokeai/frontend/web/src/common/components/InvPopover/theme.ts deleted file mode 100644 index b32ae753c5..0000000000 --- a/invokeai/frontend/web/src/common/components/InvPopover/theme.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { popoverAnatomy as parts } from '@chakra-ui/anatomy'; -import { - createMultiStyleConfigHelpers, - defineStyle, -} from '@chakra-ui/styled-system'; -import { cssVar } from '@chakra-ui/theme-tools'; - -const { defineMultiStyleConfig, definePartsStyle } = - createMultiStyleConfigHelpers(parts.keys); - -const $popperBg = cssVar('popper-bg'); -const $arrowBg = cssVar('popper-arrow-bg'); -const $arrowShadowColor = cssVar('popper-arrow-shadow-color'); - -const invokeAIContent = defineStyle(() => { - return { - [$arrowBg.variable]: 'colors.base.800', - [$popperBg.variable]: 'colors.base.800', - [$arrowShadowColor.variable]: 'colors.base.600', - minW: 'unset', - width: 'unset', - p: 4, - bg: 'base.800', - border: 'none', - shadow: 'dark-lg', - }; -}); - -const informationalContent = defineStyle(() => { - return { - [$arrowBg.variable]: 'colors.base.700', - [$popperBg.variable]: 'colors.base.700', - [$arrowShadowColor.variable]: 'colors.base.400', - p: 4, - bg: 'base.700', - border: 'none', - shadow: 'dark-lg', - }; -}); - -const invokeAI = definePartsStyle(() => ({ - content: invokeAIContent(), - body: { padding: 0 }, -})); - -const informational = definePartsStyle(() => ({ - content: informationalContent(), - body: { padding: 0 }, -})); - -export const popoverTheme = defineMultiStyleConfig({ - variants: { - invokeAI, - informational, - }, - defaultProps: { - variant: 'invokeAI', - }, -}); diff --git a/invokeai/frontend/web/src/common/components/InvPopover/types.ts b/invokeai/frontend/web/src/common/components/InvPopover/types.ts deleted file mode 100644 index 62c38e2176..0000000000 --- a/invokeai/frontend/web/src/common/components/InvPopover/types.ts +++ /dev/null @@ -1,9 +0,0 @@ -export type { - PopoverArrowProps as InvPopoverArrowProps, - PopoverBodyProps as InvPopoverBodyProps, - PopoverCloseButtonProps as InvPopoverCloseButtonProps, - PopoverContentProps as InvPopoverContentProps, - PopoverFooterProps as InvPopoverFooterProps, - PopoverHeaderProps as InvPopoverHeaderProps, - PopoverProps as InvPopoverProps, -} from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvPopover/wrapper.ts b/invokeai/frontend/web/src/common/components/InvPopover/wrapper.ts deleted file mode 100644 index e0c3722fa8..0000000000 --- a/invokeai/frontend/web/src/common/components/InvPopover/wrapper.ts +++ /dev/null @@ -1,11 +0,0 @@ -export { - Popover as InvPopover, - PopoverAnchor as InvPopoverAnchor, - PopoverArrow as InvPopoverArrow, - PopoverBody as InvPopoverBody, - PopoverCloseButton as InvPopoverCloseButton, - PopoverContent as InvPopoverContent, - PopoverFooter as InvPopoverFooter, - PopoverHeader as InvPopoverHeader, - PopoverTrigger as InvPopoverTrigger, -} from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvProgress/InvProgress.stories.tsx b/invokeai/frontend/web/src/common/components/InvProgress/InvProgress.stories.tsx deleted file mode 100644 index 0e669a5c22..0000000000 --- a/invokeai/frontend/web/src/common/components/InvProgress/InvProgress.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import type { InvProgressProps } from './types'; -import { InvProgress } from './wrapper'; - -const meta: Meta = { - title: 'Primitives/InvProgress', - tags: ['autodocs'], - component: InvProgress, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvProgressProps) => { - return Banana sushi is delectable!; -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvProgress/theme.ts b/invokeai/frontend/web/src/common/components/InvProgress/theme.ts deleted file mode 100644 index 4ca58154cb..0000000000 --- a/invokeai/frontend/web/src/common/components/InvProgress/theme.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { progressAnatomy as parts } from '@chakra-ui/anatomy'; -import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'; -import { generateStripe, getColorVar } from '@chakra-ui/theme-tools'; - -const { defineMultiStyleConfig, definePartsStyle } = - createMultiStyleConfigHelpers(parts.keys); - -export const progressTheme = defineMultiStyleConfig({ - baseStyle: definePartsStyle( - ({ theme: t, colorScheme: c, hasStripe, isIndeterminate }) => { - const bgColor = `${c}.300`; - const addStripe = !isIndeterminate && hasStripe; - const gradient = `linear-gradient( - to right, - transparent 0%, - ${getColorVar(t, bgColor)} 50%, - transparent 100% - )`; - return { - track: { - borderRadius: '2px', - bg: 'base.800', - }, - filledTrack: { - borderRadius: '2px', - ...(addStripe && generateStripe()), - ...(isIndeterminate ? { bgImage: gradient } : { bgColor }), - }, - }; - } - ), -}); -// export const progressTheme = defineMultiStyleConfig({ -// baseStyle: definePartsStyle( -// ({ theme: t, colorScheme: c, hasStripe, isIndeterminate }) => { -// const bgColor = `${c}.500`; -// const addStripe = !isIndeterminate && hasStripe; -// const gradient = `linear-gradient( -// to right, -// transparent 0%, -// ${getColorVar(t, bgColor)} 50%, -// transparent 100% -// )`; -// return { -// track: { -// borderRadius: '2px', -// bg: 'base.800', -// }, -// filledTrack: { -// borderRadius: '2px', -// ...(addStripe && generateStripe("xs")), -// ...(isIndeterminate ? { bgImage: gradient } : { bgColor }), -// }, -// }; -// } -// ), -// }); diff --git a/invokeai/frontend/web/src/common/components/InvProgress/types.ts b/invokeai/frontend/web/src/common/components/InvProgress/types.ts deleted file mode 100644 index 63cdba071e..0000000000 --- a/invokeai/frontend/web/src/common/components/InvProgress/types.ts +++ /dev/null @@ -1 +0,0 @@ -export type { ProgressProps as InvProgressProps } from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvProgress/wrapper.ts b/invokeai/frontend/web/src/common/components/InvProgress/wrapper.ts deleted file mode 100644 index af331d945e..0000000000 --- a/invokeai/frontend/web/src/common/components/InvProgress/wrapper.ts +++ /dev/null @@ -1 +0,0 @@ -export { Progress as InvProgress } from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvRangeSlider/InvRangeSlider.stories.tsx b/invokeai/frontend/web/src/common/components/InvRangeSlider/InvRangeSlider.stories.tsx deleted file mode 100644 index 88cc8110d4..0000000000 --- a/invokeai/frontend/web/src/common/components/InvRangeSlider/InvRangeSlider.stories.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import type { InvRangeSliderProps } from 'common/components/InvRangeSlider/types'; -import { useCallback, useState } from 'react'; - -import { InvRangeSlider } from './InvRangeSlider'; - -const meta: Meta = { - title: 'Primitives/InvRangeSlider', - tags: ['autodocs'], - component: InvRangeSlider, - args: { - min: 0, - max: 10, - step: 1, - marks: [0, 5, 10], - }, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvRangeSliderProps) => { - const [value, setValue] = useState<[number, number]>([2, 8]); - const onReset = useCallback(() => { - setValue([2, 8]); - }, []); - const onChange = useCallback((v: [number, number]) => { - setValue(v); - }, []); - return ( - - - - ); -}; - -export const Default: Story = { - render: Component, - args: { - fineStep: 0.1, - withThumbTooltip: true, - formatValue: (v: number) => `${v} eggs`, - }, -}; diff --git a/invokeai/frontend/web/src/common/components/InvRangeSlider/InvRangeSlider.tsx b/invokeai/frontend/web/src/common/components/InvRangeSlider/InvRangeSlider.tsx deleted file mode 100644 index 5ec2c65637..0000000000 --- a/invokeai/frontend/web/src/common/components/InvRangeSlider/InvRangeSlider.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import { - forwardRef, - RangeSlider as ChakraRangeSlider, - RangeSliderFilledTrack as ChakraRangeSliderFilledTrack, - RangeSliderThumb as ChakraRangeSliderThumb, - RangeSliderTrack as ChakraRangeSliderTrack, - useFormControl, -} from '@chakra-ui/react'; -import { useStore } from '@nanostores/react'; -import type { InvFormattedMark } from 'common/components/InvSlider/types'; -import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; -import { $shift } from 'common/hooks/useGlobalModifiers'; -import { AnimatePresence } from 'framer-motion'; -import { memo, useCallback, useMemo, useState } from 'react'; - -import { InvRangeSliderMark } from './InvRangeSliderMark'; -import type { InvRangeSliderProps } from './types'; - -export const InvRangeSlider = memo( - forwardRef( - (props: InvRangeSliderProps, ref) => { - const { - value, - min, - max, - step: _step = 1, - fineStep: _fineStep, - onChange, - onReset, - formatValue = (v: number) => v.toString(), - marks: _marks, - withThumbTooltip: withTooltip = false, - ...sliderProps - } = props; - const [isMouseOverSlider, setIsMouseOverSlider] = useState(false); - const [isChanging, setIsChanging] = useState(false); - - const shift = useStore($shift); - const step = useMemo( - () => (shift ? _fineStep ?? _step : _step), - [shift, _fineStep, _step] - ); - const controlProps = useFormControl({}); - - const labels = useMemo( - () => value.map(formatValue), - [formatValue, value] - ); - - const onMouseEnter = useCallback(() => setIsMouseOverSlider(true), []); - const onMouseLeave = useCallback(() => setIsMouseOverSlider(false), []); - const onChangeStart = useCallback(() => setIsChanging(true), []); - const onChangeEnd = useCallback(() => setIsChanging(false), []); - - const marks = useMemo(() => { - if (_marks === true) { - return [min, max].map((m) => ({ value: m, label: formatValue(m) })); - } - if (_marks) { - return _marks?.map((m) => ({ value: m, label: formatValue(m) })); - } - return []; - }, [_marks, formatValue, max, min]); - - return ( - - - {marks?.length && - (isMouseOverSlider || isChanging) && - marks.map((m, i) => ( - - ))} - - - - - - - - - - - - - - ); - } - ) -); diff --git a/invokeai/frontend/web/src/common/components/InvRangeSlider/InvRangeSliderMark.tsx b/invokeai/frontend/web/src/common/components/InvRangeSlider/InvRangeSliderMark.tsx deleted file mode 100644 index ddb872ec30..0000000000 --- a/invokeai/frontend/web/src/common/components/InvRangeSlider/InvRangeSliderMark.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { RangeSliderMark as ChakraRangeSliderMark } from '@chakra-ui/react'; -import type { InvRangeSliderMarkProps } from 'common/components/InvRangeSlider/types'; -import { sliderMarkAnimationConstants } from 'common/components/InvSlider/InvSliderMark'; -import { motion } from 'framer-motion'; -import { memo } from 'react'; - -export const InvRangeSliderMark = memo( - ({ value, label, index, total }: InvRangeSliderMarkProps) => { - if (index === 0) { - return ( - - {label} - - ); - } - - if (index === total - 1) { - return ( - - {label} - - ); - } - - return ( - - {label} - - ); - } -); - -InvRangeSliderMark.displayName = 'InvRangeSliderMark'; diff --git a/invokeai/frontend/web/src/common/components/InvRangeSlider/theme.ts b/invokeai/frontend/web/src/common/components/InvRangeSlider/theme.ts deleted file mode 100644 index 720ab7eafa..0000000000 --- a/invokeai/frontend/web/src/common/components/InvRangeSlider/theme.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { sliderAnatomy as parts } from '@chakra-ui/anatomy'; -import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'; - -const { definePartsStyle, defineMultiStyleConfig } = - createMultiStyleConfigHelpers(parts.keys); - -const container = defineStyle(() => ({})); - -const track = defineStyle(() => { - return { - bg: 'base.600', - h: 2, - }; -}); - -const filledTrack = defineStyle((_props) => { - return { - bg: 'base.400', - h: 2, - }; -}); - -const thumb = defineStyle(() => { - return { - w: 4, - h: 4, - bg: 'base.400', - borderRadius: 'base', - borderColor: 'base.200', - borderWidth: 2, - _hover: { - transform: `translateY(-50%) scale(1.15)`, - transition: 'transform 0.1s', - _active: { - transform: `translateY(-50%) scale(1.22)`, - transition: 'transform 0.05s', - }, - }, - }; -}); - -const mark = defineStyle(() => { - return { - fontSize: '10px', - color: 'base.400', - mt: 2, - }; -}); - -const baseStyle = definePartsStyle((props) => ({ - container: container(), - track: track(), - filledTrack: filledTrack(props), - thumb: thumb(), - mark: mark(), -})); - -export const sliderTheme = defineMultiStyleConfig({ - baseStyle, - defaultProps: { - colorScheme: 'base', - }, -}); diff --git a/invokeai/frontend/web/src/common/components/InvRangeSlider/types.ts b/invokeai/frontend/web/src/common/components/InvRangeSlider/types.ts deleted file mode 100644 index 85706b9689..0000000000 --- a/invokeai/frontend/web/src/common/components/InvRangeSlider/types.ts +++ /dev/null @@ -1,51 +0,0 @@ -import type { RangeSliderProps as ChakraRangeSliderProps } from '@chakra-ui/react'; -import type { InvSliderMarkProps } from 'common/components/InvSlider/types'; - -export type InvRangeSliderProps = Omit & { - /** - * The value - */ - value: [number, number]; - /** - * The minimum value - */ - min: number; - /** - * The maximum value - */ - max: number; - /** - * The default step - */ - step?: number; - /** - * The fine step (when shift is pressed) - */ - fineStep?: number; - /** - * The change handler - */ - onChange: (v: [number, number]) => void; - /** - * The reset handler, called on double-click of the thumb - */ - onReset?: () => void; - /** - * The value formatter - */ - formatValue?: (v: number) => string; - /** - * Whether the slider is disabled - */ - isDisabled?: boolean; - /** - * The marks to render below the slider. If true, will use the min and max values. - */ - marks?: number[] | true; - /** - * Whether to show a tooltip over the slider thumb - */ - withThumbTooltip?: boolean; -}; - -export type InvRangeSliderMarkProps = InvSliderMarkProps; diff --git a/invokeai/frontend/web/src/common/components/InvSelect/CustomMenuList.tsx b/invokeai/frontend/web/src/common/components/InvSelect/CustomMenuList.tsx deleted file mode 100644 index f944447605..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSelect/CustomMenuList.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { Box } from '@chakra-ui/layout'; -import type { GroupBase, MenuListProps } from 'chakra-react-select'; -import { chakraComponents } from 'chakra-react-select'; -import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; -import { cloneDeep, merge } from 'lodash-es'; -import type { UseOverlayScrollbarsParams } from 'overlayscrollbars-react'; -import { useOverlayScrollbars } from 'overlayscrollbars-react'; -import type { PropsWithChildren } from 'react'; -import { memo, useEffect, useRef, useState } from 'react'; - -import type { InvSelectOption } from './types'; - -type CustomMenuListProps = MenuListProps< - InvSelectOption, - false, - GroupBase ->; - -const overlayScrollbarsParamsOverrides: Partial = { - options: { scrollbars: { autoHide: 'never' } }, -}; - -const osParams = merge( - cloneDeep(overlayScrollbarsParams), - overlayScrollbarsParamsOverrides -); - -const Scrollable = memo( - (props: PropsWithChildren<{ viewport: HTMLDivElement | null }>) => { - const { children, viewport } = props; - - const targetRef = useRef(null); - const [initialize, getInstance] = useOverlayScrollbars(osParams); - - useEffect(() => { - if (targetRef.current && viewport) { - initialize({ - target: targetRef.current, - elements: { - viewport, - }, - }); - } - return () => getInstance()?.destroy(); - }, [viewport, initialize, getInstance]); - - return ( - - {children} - - ); - } -); - -Scrollable.displayName = 'Scrollable'; - -export const CustomMenuList = memo( - ({ children, innerRef, ...other }: CustomMenuListProps) => { - const [viewport, setViewport] = useState(null); - - useEffect(() => { - if (!innerRef || !(innerRef instanceof Function)) { - return; - } - innerRef(viewport); - }, [innerRef, viewport]); - - return ( - - - {children} - - - ); - } -); - -CustomMenuList.displayName = 'CustomMenuList'; diff --git a/invokeai/frontend/web/src/common/components/InvSelect/CustomOption.tsx b/invokeai/frontend/web/src/common/components/InvSelect/CustomOption.tsx deleted file mode 100644 index e0372a4763..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSelect/CustomOption.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { Flex } from '@chakra-ui/layout'; -import type { GroupBase, OptionProps } from 'chakra-react-select'; -import { chakraComponents } from 'chakra-react-select'; -import { InvText } from 'common/components/InvText/wrapper'; -import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; -import { memo } from 'react'; - -import type { InvSelectOption } from './types'; - -type CustomOptionProps = OptionProps< - InvSelectOption, - false, - GroupBase ->; - -export const CustomOption = memo( - ({ children, ...props }: CustomOptionProps) => { - // On large lists, perf really takes a hit :/ - // This improves it drastically and doesn't seem to break anything... - delete props.innerProps.onMouseMove; - delete props.innerProps.onMouseOver; - - if (props.data.icon) { - return ( - - - - - {props.data.icon} - - - {children} - {props.data.description && ( - - {props.data.description} - - )} - - - - - ); - } - - return ( - - - - {children} - {props.data.description && ( - - {props.data.description} - - )} - - - - ); - } -); - -CustomOption.displayName = 'CustomOption'; diff --git a/invokeai/frontend/web/src/common/components/InvSelect/InvSelect.stories.tsx b/invokeai/frontend/web/src/common/components/InvSelect/InvSelect.stories.tsx deleted file mode 100644 index 39f2b70f73..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSelect/InvSelect.stories.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { omit } from 'lodash-es'; - -import { InvSelect } from './InvSelect'; -import type { InvSelectOption, InvSelectProps } from './types'; - -const SELECT_STORY_OPTIONS: InvSelectOption[] = [ - { - value: 'chocolate', - label: 'Chocolate', - description: - 'Chocolate is a usually sweet, brown food preparation of roasted and ground cacao seeds. It is made in the form of a liquid, paste, or in a block, or used as a flavoring ingredient in other foods.', - icon: '🍫', - }, - { - value: 'strawberry', - label: 'Strawberry', - description: - 'Strawberries are bright red fruits with a sweet yet slightly tart taste. They are often enjoyed fresh but are also used in a variety of desserts and sauces.', - icon: '🍓', - }, - { - value: 'vanilla', - label: 'Vanilla', - description: - 'Vanilla is a popular flavor derived from orchids of the genus Vanilla. It is used in a variety of desserts and beverages for its sweet and creamy flavor.', - icon: '🍦', - }, -]; - -const meta: Meta = { - title: 'Primitives/InvSelect', - tags: ['autodocs'], - component: InvSelect, - args: { - options: SELECT_STORY_OPTIONS, - }, - argTypes: { - options: { - control: { - type: 'select', - }, - options: ['WithIcon', 'WithDescription', 'OnlyLabel'], - mapping: { - WithIcon: SELECT_STORY_OPTIONS, - WithDescription: SELECT_STORY_OPTIONS.map((o) => omit(o, 'icon')), - OnlyLabel: SELECT_STORY_OPTIONS.map((o) => - omit(o, ['icon', 'description']) - ), - }, - }, - }, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvSelectProps) => { - return ; -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvSelect/InvSelect.tsx b/invokeai/frontend/web/src/common/components/InvSelect/InvSelect.tsx deleted file mode 100644 index 6d44e6bfed..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSelect/InvSelect.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import type { - GroupBase, - SelectComponentsConfig, - StylesConfig, -} from 'chakra-react-select'; -import { Select as ChakraReactSelect } from 'chakra-react-select'; -import { memo, useEffect, useMemo } from 'react'; - -import { CustomMenuList } from './CustomMenuList'; -import { CustomOption } from './CustomOption'; -import type { - CustomChakraStylesConfig, - InvSelectOption, - InvSelectProps, -} from './types'; - -const styles: StylesConfig = { - menuPortal: (provided) => ({ ...provided, zIndex: 9999 }), -}; - -const components: SelectComponentsConfig< - InvSelectOption, - false, - GroupBase -> = { - Option: CustomOption, - MenuList: CustomMenuList, - // Menu: CustomMenu, -}; - -export const InvSelect = memo((props: InvSelectProps) => { - const { sx, selectRef, inputRef, ...rest } = props; - const chakraStyles = useMemo( - () => ({ - container: (provided, _state) => ({ ...provided, w: 'full', ...sx }), - option: (provided, _state) => ({ ...provided, p: 0 }), - indicatorsContainer: (provided, _state) => ({ - ...provided, - w: 8, - alignItems: 'center', - justifyContent: 'center', - '> div': { p: 0, w: 'full', h: 'full', bg: 'unset' }, - }), - dropdownIndicator: (provided, _state) => ({ - ...provided, - display: - _state.hasValue && _state.selectProps.isClearable ? 'none' : 'flex', - }), - crossIcon: (provided, _state) => ({ ...provided, boxSize: 2.5 }), - inputContainer: (provided, _state) => ({ - ...provided, - cursor: 'pointer', - }), - }), - [sx] - ); - - useEffect(() => { - if (!inputRef) { - return; - } - inputRef.current = selectRef?.current?.inputRef ?? null; - }, [inputRef, selectRef]); - - return ( - > - ref={selectRef} - menuPortalTarget={document.body} - colorScheme="base" - selectedOptionColorScheme="base" - components={components} - chakraStyles={chakraStyles} - styles={styles} - variant="filled" - menuPosition="fixed" - {...rest} - /> - ); -}); - -InvSelect.displayName = 'InvSelect'; diff --git a/invokeai/frontend/web/src/common/components/InvSelect/InvSelectFallback.tsx b/invokeai/frontend/web/src/common/components/InvSelect/InvSelectFallback.tsx deleted file mode 100644 index fe95399653..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSelect/InvSelectFallback.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Flex } from '@chakra-ui/react'; -import { InvText } from 'common/components/InvText/wrapper'; -import { memo } from 'react'; - -import type { InvSelectFallbackProps } from './types'; - -export const InvSelectFallback = memo((props: InvSelectFallbackProps) => ( - - - {props.label} - - -)); - -InvSelectFallback.displayName = 'InvSelectFallback'; diff --git a/invokeai/frontend/web/src/common/components/InvSelect/theme.ts b/invokeai/frontend/web/src/common/components/InvSelect/theme.ts deleted file mode 100644 index eb3c0b3122..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSelect/theme.ts +++ /dev/null @@ -1,5 +0,0 @@ -/** - * This gets most of its styles from the native Chakra components it composes. - */ - -export default {}; diff --git a/invokeai/frontend/web/src/common/components/InvSelect/types.ts b/invokeai/frontend/web/src/common/components/InvSelect/types.ts deleted file mode 100644 index c52615c3fb..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSelect/types.ts +++ /dev/null @@ -1,45 +0,0 @@ -import type { ChakraProps } from '@chakra-ui/react'; -import type { - ChakraStylesConfig, - GroupBase, - OptionBase, - Props as ChakraReactSelectProps, - SelectInstance, - SingleValue, -} from 'chakra-react-select'; -import type { ReactNode } from 'react'; -export type {} from 'react-select/base'; - -export interface InvSelectOption extends OptionBase { - label: string; - value: string; - description?: string; - icon?: ReactNode; - tooltip?: string; - tags?: string[]; -} - -export type InvSelectProps = ChakraReactSelectProps< - InvSelectOption, - false, - GroupBase -> & { - sx?: ChakraProps['sx']; - selectRef?: React.RefObject< - SelectInstance> - >; - inputRef?: React.MutableRefObject; -}; -export type CustomChakraStylesConfig = ChakraStylesConfig< - InvSelectOption, - false, - GroupBase ->; - -export type InvSelectFallbackProps = { - label: string; -}; - -export type InvSelectOnChange = ( - v: SingleValue | null -) => void; diff --git a/invokeai/frontend/web/src/common/components/InvSingleAccordion/InvSingleAccordion.stories.tsx b/invokeai/frontend/web/src/common/components/InvSingleAccordion/InvSingleAccordion.stories.tsx deleted file mode 100644 index 0bbd8149da..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSingleAccordion/InvSingleAccordion.stories.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { InvTab } from 'common/components/InvTabs/InvTab'; -import { - InvTabList, - InvTabPanel, - InvTabPanels, - InvTabs, -} from 'common/components/InvTabs/wrapper'; -import { InvText } from 'common/components/InvText/wrapper'; - -import { InvSingleAccordion } from './InvSingleAccordion'; -import type { InvSingleAccordionProps } from './types'; - -const meta: Meta = { - title: 'Primitives/InvSingleAccordion', - tags: ['autodocs'], - component: InvSingleAccordion, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvSingleAccordionProps) => { - return ( - - - - Caramelized - Peanut Butter - Chocolate-Dipped - - - - - - Slices of banana are caramelized with brown sugar and butter, then - rolled in sushi rice and topped with a drizzle of caramel sauce. - This variety offers a sweet and rich flavor, combining the - creaminess of banana with the indulgent taste of caramel. - - - - - A combination of creamy peanut butter and ripe banana slices, - wrapped in sushi rice and seaweed. This sushi delivers a - satisfying balance of nutty and sweet flavors, appealing to those - who enjoy classic peanut butter and banana pairings. - - - - - Banana slices are dipped in melted dark chocolate, then rolled in - sushi rice and sprinkled with toasted sesame seeds. This type - provides a decadent chocolate experience with a hint of nuttiness - and the natural sweetness of banana. - - - - - - ); -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvSingleAccordion/InvSingleAccordion.tsx b/invokeai/frontend/web/src/common/components/InvSingleAccordion/InvSingleAccordion.tsx deleted file mode 100644 index 8e2825a6d0..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSingleAccordion/InvSingleAccordion.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { useAppDispatch } from 'app/store/storeHooks'; -import { InvAccordionButton } from 'common/components/InvAccordion/InvAccordionButton'; -import { - InvAccordion, - InvAccordionItem, - InvAccordionPanel, -} from 'common/components/InvAccordion/wrapper'; -import { singleAccordionExpanded } from 'features/parameters/store/actions'; -import { memo, useCallback } from 'react'; - -import type { InvSingleAccordionProps } from './types'; - -export const InvSingleAccordion = memo((props: InvSingleAccordionProps) => { - const dispatch = useAppDispatch(); - const handleAccordionClick = useCallback( - (isOpen: boolean) => { - if (props.id) { - dispatch(singleAccordionExpanded({ id: props.id, isOpen })); - } - }, - [props, dispatch] - ); - - return ( - - - {({ isExpanded }) => ( - <> - - {props.label} - - {props.children} - - )} - - - ); -}); - -InvSingleAccordion.displayName = 'InvSingleAccordion'; diff --git a/invokeai/frontend/web/src/common/components/InvSingleAccordion/types.ts b/invokeai/frontend/web/src/common/components/InvSingleAccordion/types.ts deleted file mode 100644 index 2e763809e4..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSingleAccordion/types.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type { PropsWithChildren } from 'react'; - -export type InvSingleAccordionProps = PropsWithChildren<{ - label: string; - badges?: (string | number)[]; - defaultIsOpen?: boolean; - id?: string; -}>; diff --git a/invokeai/frontend/web/src/common/components/InvSkeleton/InvSkeleton.stories.tsx b/invokeai/frontend/web/src/common/components/InvSkeleton/InvSkeleton.stories.tsx deleted file mode 100644 index 3866da4b85..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSkeleton/InvSkeleton.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import type { InvSkeletonProps } from './types'; -import { InvSkeleton } from './wrapper'; - -const meta: Meta = { - title: 'Primitives/InvSkeleton', - tags: ['autodocs'], - component: InvSkeleton, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvSkeletonProps) => { - return Banana sushi is delectable!; -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvSkeleton/theme.ts b/invokeai/frontend/web/src/common/components/InvSkeleton/theme.ts deleted file mode 100644 index 26313ca882..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSkeleton/theme.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { cssVar, defineStyle, defineStyleConfig } from '@chakra-ui/react'; - -const $startColor = cssVar('skeleton-start-color'); -const $endColor = cssVar('skeleton-end-color'); - -const invokeAI = defineStyle({ - borderRadius: 'base', - maxW: 'full', - maxH: 'full', - [$startColor.variable]: 'colors.base.700', - [$endColor.variable]: 'colors.base.500', -}); - -export const skeletonTheme = defineStyleConfig({ - variants: { invokeAI }, - defaultProps: { - variant: 'invokeAI', - }, -}); diff --git a/invokeai/frontend/web/src/common/components/InvSkeleton/types.ts b/invokeai/frontend/web/src/common/components/InvSkeleton/types.ts deleted file mode 100644 index 85fd635e3e..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSkeleton/types.ts +++ /dev/null @@ -1 +0,0 @@ -export type { SkeletonProps as InvSkeletonProps } from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvSkeleton/wrapper.ts b/invokeai/frontend/web/src/common/components/InvSkeleton/wrapper.ts deleted file mode 100644 index 4ea2c2c6d8..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSkeleton/wrapper.ts +++ /dev/null @@ -1 +0,0 @@ -export { Skeleton as InvSkeleton } from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvSlider/InvSlider.stories.tsx b/invokeai/frontend/web/src/common/components/InvSlider/InvSlider.stories.tsx deleted file mode 100644 index 44c66d7d05..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSlider/InvSlider.stories.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import type { InvSliderProps } from 'common/components/InvSlider/types'; -import { useCallback, useState } from 'react'; - -import { InvSlider } from './InvSlider'; - -const meta: Meta = { - title: 'Primitives/InvSlider', - tags: ['autodocs'], - component: InvSlider, - args: { - min: 0, - max: 10, - step: 1, - marks: [0, 5, 10], - }, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvSliderProps) => { - const [value, setValue] = useState(0); - const onReset = useCallback(() => { - setValue(0); - }, []); - return ( - - - - ); -}; - -export const Default: Story = { - render: Component, - args: { - fineStep: 0.1, - withThumbTooltip: true, - formatValue: (v: number) => `${v} eggs`, - }, -}; - -export const WithNumberInput: Story = { - render: Component, - args: { - withNumberInput: true, - numberInputWidth: 24, - }, -}; diff --git a/invokeai/frontend/web/src/common/components/InvSlider/InvSlider.tsx b/invokeai/frontend/web/src/common/components/InvSlider/InvSlider.tsx deleted file mode 100644 index e68e26b16c..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSlider/InvSlider.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import { - Slider as ChakraSlider, - SliderFilledTrack as ChakraSliderFilledTrack, - SliderThumb as ChakraSliderThumb, - SliderTrack as ChakraSliderTrack, - useFormControl, -} from '@chakra-ui/react'; -import { useStore } from '@nanostores/react'; -import { InvNumberInput } from 'common/components/InvNumberInput/InvNumberInput'; -import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; -import { $shift } from 'common/hooks/useGlobalModifiers'; -import { AnimatePresence } from 'framer-motion'; -import { isNil } from 'lodash-es'; -import { memo, useCallback, useMemo, useState } from 'react'; - -import { InvSliderMark } from './InvSliderMark'; -import type { InvFormattedMark, InvSliderProps } from './types'; - -export const InvSlider = memo((props: InvSliderProps) => { - const { - value, - min, - max, - step: _step = 1, - fineStep: _fineStep, - onChange, - onReset: _onReset, - defaultValue, - formatValue = (v: number) => v.toString(), - marks: _marks, - withThumbTooltip: withTooltip = false, - withNumberInput = false, - numberInputMin = min, - numberInputMax = max, - numberInputWidth, - ...sliderProps - } = props; - const [isMouseOverSlider, setIsMouseOverSlider] = useState(false); - const [isChanging, setIsChanging] = useState(false); - - const shift = useStore($shift); - const step = useMemo( - () => (shift ? _fineStep ?? _step : _step), - [shift, _fineStep, _step] - ); - const controlProps = useFormControl({}); - - const label = useMemo(() => formatValue(value), [formatValue, value]); - - const onMouseEnter = useCallback(() => setIsMouseOverSlider(true), []); - const onMouseLeave = useCallback(() => setIsMouseOverSlider(false), []); - const onChangeStart = useCallback(() => setIsChanging(true), []); - const onChangeEnd = useCallback(() => setIsChanging(false), []); - - const marks = useMemo(() => { - if (_marks === true) { - return [min, max].map((m) => ({ value: m, label: formatValue(m) })); - } - if (_marks) { - return _marks?.map((m) => ({ value: m, label: formatValue(m) })); - } - return []; - }, [_marks, formatValue, max, min]); - - const onReset = useCallback(() => { - if (!isNil(defaultValue)) { - onChange(defaultValue); - } - if (_onReset) { - _onReset(); - } - }, [defaultValue, onChange, _onReset]); - - return ( - <> - - - {marks?.length && - (isMouseOverSlider || isChanging) && - marks.map((m, i) => ( - - ))} - - - - - - - - - - - {withNumberInput && ( - - )} - - ); -}); - -InvSlider.displayName = 'InvSlider'; diff --git a/invokeai/frontend/web/src/common/components/InvSlider/InvSliderMark.tsx b/invokeai/frontend/web/src/common/components/InvSlider/InvSliderMark.tsx deleted file mode 100644 index 8222bc2057..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSlider/InvSliderMark.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import { SliderMark as ChakraSliderMark } from '@chakra-ui/react'; -import type { SystemStyleObject } from '@chakra-ui/styled-system'; -import type { InvSliderMarkProps } from 'common/components/InvSlider/types'; -import type { MotionProps } from 'framer-motion'; -import { motion } from 'framer-motion'; -import { memo } from 'react'; - -const initialFirstLast: MotionProps['initial'] = { opacity: 0, y: 10 }; -const initialOther = { ...initialFirstLast, x: '-50%' }; - -const animateFirstLast: MotionProps['animate'] = { - opacity: 1, - y: 0, - transition: { duration: 0.2, ease: 'easeOut' }, -}; -const animateOther = { ...animateFirstLast, x: '-50%' }; - -const exitFirstLast: MotionProps['exit'] = { - opacity: 0, - y: 10, - transition: { duration: 0.2, ease: 'anticipate' }, -}; -const exitOther = { ...exitFirstLast, x: '-50%' }; - -const firstMarkStyle: SystemStyleObject = { - insetInlineStart: '0 !important', - insetInlineEnd: 'unset !important', -}; -const lastMarkStyle: SystemStyleObject = { - insetInlineStart: 'unset !important', - insetInlineEnd: '0 !important', -}; - -export const sliderMarkAnimationConstants = { - initialFirstLast, - initialOther, - exitFirstLast, - exitOther, - animateFirstLast, - animateOther, - firstMarkStyle, - lastMarkStyle, -}; - -export const InvSliderMark = memo( - ({ value, label, index, total }: InvSliderMarkProps) => { - if (index === 0) { - return ( - - {label} - - ); - } - - if (index === total - 1) { - return ( - - {label} - - ); - } - - return ( - - {label} - - ); - } -); - -InvSliderMark.displayName = 'InvSliderMark'; diff --git a/invokeai/frontend/web/src/common/components/InvSlider/theme.ts b/invokeai/frontend/web/src/common/components/InvSlider/theme.ts deleted file mode 100644 index ef7340c367..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSlider/theme.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { sliderAnatomy as parts } from '@chakra-ui/anatomy'; -import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'; - -const { definePartsStyle, defineMultiStyleConfig } = - createMultiStyleConfigHelpers(parts.keys); - -const container = defineStyle(() => ({ - h: '28px', -})); - -const track = defineStyle(() => { - return { - bg: 'base.600', - h: 2, - }; -}); - -const filledTrack = defineStyle((_props) => { - return { - bg: 'base.400', - h: 2, - }; -}); - -const thumb = defineStyle((props) => { - const { orientation } = props; - return { - w: 5, - h: 5, - bg: 'base.400', - borderColor: 'base.200', - borderWidth: 3, - _hover: { - transform: - orientation === 'vertical' - ? 'translateX(-50%) scale(1.15)' - : 'translateY(-50%) scale(1.15)', - transition: 'transform 0.1s', - _active: { - transform: - orientation === 'vertical' - ? 'translateX(-50%) scale(1.22)' - : 'translateY(-50%) scale(1.22)', - transition: 'transform 0.05s', - }, - }, - }; -}); - -const mark = defineStyle(() => { - return { - fontSize: '10px', - color: 'base.400', - mt: 4, - }; -}); - -const baseStyle = definePartsStyle((props) => ({ - container: container(), - track: track(), - filledTrack: filledTrack(props), - thumb: thumb(props), - mark: mark(), -})); - -export const sliderTheme = defineMultiStyleConfig({ - baseStyle, - defaultProps: { - colorScheme: 'base', - }, -}); diff --git a/invokeai/frontend/web/src/common/components/InvSlider/types.ts b/invokeai/frontend/web/src/common/components/InvSlider/types.ts deleted file mode 100644 index 55e7111633..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSlider/types.ts +++ /dev/null @@ -1,76 +0,0 @@ -import type { - ChakraProps, - SliderProps as ChakraSliderProps, -} from '@chakra-ui/react'; - -export type InvSliderProps = Omit & { - /** - * The value - */ - value: number; - /** - * The minimum value - */ - min: number; - /** - * The maximum value - */ - max: number; - /** - * The default step - */ - step?: number; - /** - * The fine step (when shift is pressed) - */ - fineStep?: number; - /** - * The change handler - */ - onChange: (v: number) => void; - /** - * The reset handler, called on double-click of the thumb - */ - onReset?: () => void; - /** - * The value formatter - */ - formatValue?: (v: number) => string; - /** - * Whether the slider is disabled - */ - isDisabled?: boolean; - /** - * The marks to render below the slider. If true, will use the min and max values. - */ - marks?: number[] | true; - /** - * Whether to show a tooltip over the slider thumb - */ - withThumbTooltip?: boolean; - /** - * Whether or not to render a number input - */ - withNumberInput?: boolean; - /** - * The number input min (defaults to the slider min) - */ - numberInputMin?: number; - /** - * The number input max (defaults to the slider max) - */ - numberInputMax?: number; - /** - * The width of the number input - */ - numberInputWidth?: ChakraProps['width']; -}; - -export type InvFormattedMark = { value: number; label: string }; - -export type InvSliderMarkProps = { - value: number; - label: string; - index: number; - total: number; -}; diff --git a/invokeai/frontend/web/src/common/components/InvSwitch/InvSwitch.stories.tsx b/invokeai/frontend/web/src/common/components/InvSwitch/InvSwitch.stories.tsx deleted file mode 100644 index 0e956d53bc..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSwitch/InvSwitch.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import type { InvSwitchProps } from './types'; -import { InvSwitch } from './wrapper'; - -const meta: Meta = { - title: 'Primitives/InvSwitch', - tags: ['autodocs'], - component: InvSwitch, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvSwitchProps) => { - return ; -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvSwitch/theme.ts b/invokeai/frontend/web/src/common/components/InvSwitch/theme.ts deleted file mode 100644 index b0332762c6..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSwitch/theme.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { switchAnatomy as parts } from '@chakra-ui/anatomy'; -import { - createMultiStyleConfigHelpers, - defineStyle, -} from '@chakra-ui/styled-system'; - -const { defineMultiStyleConfig, definePartsStyle } = - createMultiStyleConfigHelpers(parts.keys); - -const invokeAITrack = defineStyle((_props) => { - return { - bg: 'base.600', - p: 1, - _focusVisible: { - boxShadow: 'none', - }, - _checked: { - bg: 'blue.500', - }, - }; -}); - -const invokeAIThumb = defineStyle((_props) => { - return { - bg: 'base.50', - }; -}); - -const invokeAI = definePartsStyle((props) => ({ - container: {}, - track: invokeAITrack(props), - thumb: invokeAIThumb(props), -})); - -export const switchTheme = defineMultiStyleConfig({ - variants: { invokeAI }, - defaultProps: { - size: 'md', - variant: 'invokeAI', - }, -}); diff --git a/invokeai/frontend/web/src/common/components/InvSwitch/types.ts b/invokeai/frontend/web/src/common/components/InvSwitch/types.ts deleted file mode 100644 index 31f00fe53c..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSwitch/types.ts +++ /dev/null @@ -1,3 +0,0 @@ -import type { SwitchProps as ChakraSwitchProps } from '@chakra-ui/react'; - -export type InvSwitchProps = ChakraSwitchProps; diff --git a/invokeai/frontend/web/src/common/components/InvSwitch/wrapper.ts b/invokeai/frontend/web/src/common/components/InvSwitch/wrapper.ts deleted file mode 100644 index 3152a7f851..0000000000 --- a/invokeai/frontend/web/src/common/components/InvSwitch/wrapper.ts +++ /dev/null @@ -1 +0,0 @@ -export { Switch as InvSwitch } from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvTabs/InvTab.tsx b/invokeai/frontend/web/src/common/components/InvTabs/InvTab.tsx deleted file mode 100644 index 011ef83161..0000000000 --- a/invokeai/frontend/web/src/common/components/InvTabs/InvTab.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Spacer } from '@chakra-ui/layout'; -import { forwardRef, Tab as ChakraTab } from '@chakra-ui/react'; -import { InvBadge } from 'common/components/InvBadge/wrapper'; -import type { InvTabProps } from 'common/components/InvTabs/types'; -import { memo } from 'react'; - -export const InvTab = memo( - forwardRef((props: InvTabProps, ref) => { - const { children, badges, ...rest } = props; - return ( - - {children} - - {badges?.map((b, i) => ( - - {b} - - ))} - - ); - }) -); - -InvTab.displayName = 'InvTab'; diff --git a/invokeai/frontend/web/src/common/components/InvTabs/InvTabs.stories.tsx b/invokeai/frontend/web/src/common/components/InvTabs/InvTabs.stories.tsx deleted file mode 100644 index 4c354d882f..0000000000 --- a/invokeai/frontend/web/src/common/components/InvTabs/InvTabs.stories.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import { InvTab } from './InvTab'; -import type { InvTabsProps } from './types'; -import { InvTabList, InvTabPanel, InvTabPanels, InvTabs } from './wrapper'; - -const meta: Meta = { - title: 'Primitives/InvTabs', - tags: ['autodocs'], - component: InvTabs, - args: { - colorScheme: 'base', - variant: 'collapse', - }, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvTabsProps) => { - return ( - - - One - Two - Three - - - - -

one!

- - -

two!

- - -

three!

- - - - ); -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvTabs/theme.ts b/invokeai/frontend/web/src/common/components/InvTabs/theme.ts deleted file mode 100644 index 3530d65ca7..0000000000 --- a/invokeai/frontend/web/src/common/components/InvTabs/theme.ts +++ /dev/null @@ -1,114 +0,0 @@ -import { tabsAnatomy as parts } from '@chakra-ui/anatomy'; -import { - createMultiStyleConfigHelpers, - defineStyle, -} from '@chakra-ui/styled-system'; - -const { defineMultiStyleConfig, definePartsStyle } = - createMultiStyleConfigHelpers(parts.keys); - -const appTabsRoot = defineStyle(() => { - return { - display: 'flex', - gap: 4, - }; -}); - -const appTabsTab = defineStyle(() => ({})); - -const appTabsTablist = defineStyle((_props) => { - return { - display: 'flex', - flexDirection: 'column', - gap: 1, - }; -}); - -const appTabsTabpanel = defineStyle(() => ({ - padding: 0, - height: '100%', -})); - -const appTabs = definePartsStyle((props) => ({ - root: appTabsRoot(), - tab: appTabsTab(), - tablist: appTabsTablist(props), - tabpanel: appTabsTabpanel(), -})); - -const line = definePartsStyle(() => ({ - tab: { - borderTopRadius: 'base', - px: 4, - py: 1, - fontSize: 'sm', - color: 'base.200', - _selected: { - color: 'blue.200', - }, - }, - tabpanel: { - p: 0, - pt: 4, - w: 'full', - h: 'full', - }, - tabpanels: { - w: 'full', - h: 'full', - }, -})); - -const TAB_INACTIVE = 'base.750'; -const TAB_ACTIVE = 'base.800'; - -const collapse = definePartsStyle(() => ({ - indicator: {}, - tablist: { - bg: TAB_ACTIVE, - borderRadius: 'base', - display: 'grid', - gridAutoFlow: 'column', - gridAutoColumns: '1fr', - }, - tab: { - gap: 4, - bg: TAB_INACTIVE, - fontSize: 'sm', - fontWeight: 'semibold', - borderInlineEnd: 1, - borderInlineEndColor: TAB_ACTIVE, - borderInlineEndStyle: 'solid', - _first: { - borderTopStartRadius: 'base', - }, - // select the tab next to the selected tab - '&[aria-selected="true"] + button': { borderBottomStartRadius: 'lg' }, - // select the tab prev to the selected tab - ':has(+ [aria-selected="true"])': { borderBottomEndRadius: 'lg' }, - _selected: { - bg: TAB_ACTIVE, - }, - _last: { - borderTopEndRadius: 'base', - alignSelf: 'start', - }, - transitionProperty: 'all', - }, - tabpanels: { bg: TAB_ACTIVE, borderBottomRadius: 'base' }, - tabpanel: { - p: 0, - }, -})); - -export const tabsTheme = defineMultiStyleConfig({ - variants: { - line, - appTabs, - collapse, - }, - defaultProps: { - variant: 'line', - colorScheme: 'blue', - }, -}); diff --git a/invokeai/frontend/web/src/common/components/InvTabs/types.ts b/invokeai/frontend/web/src/common/components/InvTabs/types.ts deleted file mode 100644 index db8f7af829..0000000000 --- a/invokeai/frontend/web/src/common/components/InvTabs/types.ts +++ /dev/null @@ -1,18 +0,0 @@ -import type { - TabListProps as InvTabListProps, - TabPanelProps as InvTabPanelProps, - TabPanelsProps as InvTabPanelsProps, - TabProps as ChakraTabProps, - TabsProps as InvTabsProps, -} from '@chakra-ui/react'; - -export type { - InvTabListProps, - InvTabPanelProps, - InvTabPanelsProps, - InvTabsProps, -}; - -export type InvTabProps = ChakraTabProps & { - badges?: (string | number)[]; -}; diff --git a/invokeai/frontend/web/src/common/components/InvTabs/wrapper.ts b/invokeai/frontend/web/src/common/components/InvTabs/wrapper.ts deleted file mode 100644 index b8305028a3..0000000000 --- a/invokeai/frontend/web/src/common/components/InvTabs/wrapper.ts +++ /dev/null @@ -1,6 +0,0 @@ -export { - TabList as InvTabList, - TabPanel as InvTabPanel, - TabPanels as InvTabPanels, - Tabs as InvTabs, -} from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvText/InvText.stories.tsx b/invokeai/frontend/web/src/common/components/InvText/InvText.stories.tsx deleted file mode 100644 index 988b876960..0000000000 --- a/invokeai/frontend/web/src/common/components/InvText/InvText.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import type { InvTextProps } from './types'; -import { InvText } from './wrapper'; - -const meta: Meta = { - title: 'Primitives/InvText', - tags: ['autodocs'], - component: InvText, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvTextProps) => { - return Banana sushi is delectable!; -}; - -export const Default: Story = { - render: Component, -}; diff --git a/invokeai/frontend/web/src/common/components/InvText/theme.ts b/invokeai/frontend/web/src/common/components/InvText/theme.ts deleted file mode 100644 index 38b4158fbd..0000000000 --- a/invokeai/frontend/web/src/common/components/InvText/theme.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { defineStyle, defineStyleConfig } from '@chakra-ui/react'; - -const baseStyle = defineStyle(() => ({ - fontSize: 'sm', -})); - -const error = defineStyle(() => ({ - color: 'error.400', -})); - -const subtext = defineStyle(() => ({ - color: 'base.400', -})); - -export const textTheme = defineStyleConfig({ - baseStyle, - variants: { - subtext, - error, - }, -}); diff --git a/invokeai/frontend/web/src/common/components/InvText/types.ts b/invokeai/frontend/web/src/common/components/InvText/types.ts deleted file mode 100644 index cb73b3aef0..0000000000 --- a/invokeai/frontend/web/src/common/components/InvText/types.ts +++ /dev/null @@ -1,3 +0,0 @@ -import type { TextProps as ChakraTextProps } from '@chakra-ui/react'; - -export type InvTextProps = ChakraTextProps; diff --git a/invokeai/frontend/web/src/common/components/InvText/wrapper.ts b/invokeai/frontend/web/src/common/components/InvText/wrapper.ts deleted file mode 100644 index cac7135c5e..0000000000 --- a/invokeai/frontend/web/src/common/components/InvText/wrapper.ts +++ /dev/null @@ -1 +0,0 @@ -export { Text as InvText } from '@chakra-ui/react'; diff --git a/invokeai/frontend/web/src/common/components/InvTextarea/InvTextarea.stories.tsx b/invokeai/frontend/web/src/common/components/InvTextarea/InvTextarea.stories.tsx deleted file mode 100644 index c121e5eee8..0000000000 --- a/invokeai/frontend/web/src/common/components/InvTextarea/InvTextarea.stories.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import { InvTextarea } from './InvTextarea'; -import type { InvTextareaProps } from './types'; - -const meta: Meta = { - title: 'Primitives/InvTextarea', - tags: ['autodocs'], - component: InvTextarea, -}; - -export default meta; -type Story = StoryObj; - -const Component = (props: InvTextareaProps) => { - return ; -}; - -export const Default: Story = { - render: Component, -}; - -export const Resizeable: Story = { - render: Component, - args: { - resize: 'vertical', - minW: '200px', - minH: '50px', - }, -}; diff --git a/invokeai/frontend/web/src/common/components/InvTextarea/InvTextarea.tsx b/invokeai/frontend/web/src/common/components/InvTextarea/InvTextarea.tsx deleted file mode 100644 index ff42fe9093..0000000000 --- a/invokeai/frontend/web/src/common/components/InvTextarea/InvTextarea.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { forwardRef, Textarea as ChakraTextarea } from '@chakra-ui/react'; -import { useGlobalModifiersSetters } from 'common/hooks/useGlobalModifiers'; -import { stopPastePropagation } from 'common/util/stopPastePropagation'; -import type { KeyboardEvent } from 'react'; -import { memo, useCallback } from 'react'; - -import type { InvTextareaProps } from './types'; - -export const InvTextarea = memo( - forwardRef( - (props: InvTextareaProps, ref) => { - const { ...rest } = props; - const { setShift } = useGlobalModifiersSetters(); - const onKeyUpDown = useCallback( - (e: KeyboardEvent) => { - setShift(e.shiftKey); - }, - [setShift] - ); - return ( - - ); - } - ) -); - -InvTextarea.displayName = 'InvTextarea'; diff --git a/invokeai/frontend/web/src/common/components/InvTextarea/theme.ts b/invokeai/frontend/web/src/common/components/InvTextarea/theme.ts deleted file mode 100644 index 40c58f06be..0000000000 --- a/invokeai/frontend/web/src/common/components/InvTextarea/theme.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { defineStyle, defineStyleConfig } from '@chakra-ui/react'; -import { getInputFilledStyles } from 'theme/util/getInputFilledStyles'; - -export const textareaTheme = defineStyleConfig({ - variants: { - filled: defineStyle((props) => getInputFilledStyles(props)), - darkFilled: defineStyle((props) => getInputFilledStyles(props)), - }, - defaultProps: { - size: 'md', - variant: 'filled', - }, -}); diff --git a/invokeai/frontend/web/src/common/components/InvTextarea/types.ts b/invokeai/frontend/web/src/common/components/InvTextarea/types.ts deleted file mode 100644 index 1c36ede94f..0000000000 --- a/invokeai/frontend/web/src/common/components/InvTextarea/types.ts +++ /dev/null @@ -1,3 +0,0 @@ -import type { TextareaProps as ChakraTextareaProps } from '@chakra-ui/react'; - -export type InvTextareaProps = ChakraTextareaProps; diff --git a/invokeai/frontend/web/src/common/components/InvTooltip/InvTooltip.stories.tsx b/invokeai/frontend/web/src/common/components/InvTooltip/InvTooltip.stories.tsx deleted file mode 100644 index c391c22545..0000000000 --- a/invokeai/frontend/web/src/common/components/InvTooltip/InvTooltip.stories.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { InvButton } from 'common/components/InvButton/InvButton'; - -import { InvTooltip } from './InvTooltip'; -import type { InvTooltipProps } from './types'; - -const meta: Meta = { - title: 'Primitives/InvTooltip', - component: InvTooltip, - tags: ['autodocs'], - args: { - label: 'My Tooltip', - placement: 'top', - hasArrow: true, - }, -}; - -export default meta; -type Story = StoryObj; - -const render = (props: InvTooltipProps) => ( - - Invoke - -); - -export const Default: Story = { - render, -}; - -export const WithoutArrow: Story = { - render, - args: { - hasArrow: false, - }, -}; diff --git a/invokeai/frontend/web/src/common/components/InvTooltip/InvTooltip.tsx b/invokeai/frontend/web/src/common/components/InvTooltip/InvTooltip.tsx deleted file mode 100644 index 7967d99c95..0000000000 --- a/invokeai/frontend/web/src/common/components/InvTooltip/InvTooltip.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { forwardRef, Tooltip as ChakraTooltip } from '@chakra-ui/react'; -import { memo } from 'react'; - -import type { InvTooltipProps } from './types'; - -const modifiers: InvTooltipProps['modifiers'] = [ - { - name: 'preventOverflow', - options: { - padding: 12, - }, - }, -]; - -export const InvTooltip = memo( - forwardRef( - (props: InvTooltipProps, ref) => { - const { children, hasArrow = true, placement = 'top', ...rest } = props; - return ( - - {children} - - ); - } - ) -); - -InvTooltip.displayName = 'InvTooltip'; diff --git a/invokeai/frontend/web/src/common/components/InvTooltip/theme.ts b/invokeai/frontend/web/src/common/components/InvTooltip/theme.ts deleted file mode 100644 index 2e7f2190aa..0000000000 --- a/invokeai/frontend/web/src/common/components/InvTooltip/theme.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { defineStyle, defineStyleConfig } from '@chakra-ui/react'; -import { cssVar } from '@chakra-ui/theme-tools'; - -const $arrowBg = cssVar('popper-arrow-bg'); - -const baseStyle = defineStyle(() => ({ - borderRadius: 'md', - shadow: 'dark-lg', - bg: 'base.200', - color: 'base.800', - [$arrowBg.variable]: 'colors.base.200', - pt: 1, - px: 2, - pb: 1, -})); - -// export the component theme -export const tooltipTheme = defineStyleConfig({ baseStyle }); diff --git a/invokeai/frontend/web/src/common/components/InvTooltip/types.ts b/invokeai/frontend/web/src/common/components/InvTooltip/types.ts deleted file mode 100644 index ce56cdfd88..0000000000 --- a/invokeai/frontend/web/src/common/components/InvTooltip/types.ts +++ /dev/null @@ -1,3 +0,0 @@ -import type { TooltipProps as ChakraTooltipProps } from '@chakra-ui/react'; - -export type InvTooltipProps = ChakraTooltipProps; diff --git a/invokeai/frontend/web/src/common/components/Loading/Loading.tsx b/invokeai/frontend/web/src/common/components/Loading/Loading.tsx index a9b95059b0..024936ebd8 100644 --- a/invokeai/frontend/web/src/common/components/Loading/Loading.tsx +++ b/invokeai/frontend/web/src/common/components/Loading/Loading.tsx @@ -1,4 +1,4 @@ -import { Flex, Image, Spinner } from '@chakra-ui/react'; +import { Flex, Image, Spinner } from '@invoke-ai/ui'; import InvokeLogoWhite from 'public/assets/images/invoke-symbol-wht-lrg.svg'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx b/invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx index 58f17a2255..7e31cd74c0 100644 --- a/invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx +++ b/invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx @@ -1,4 +1,4 @@ -import { Box } from '@chakra-ui/react'; +import { Box } from '@invoke-ai/ui'; import { memo, useMemo } from 'react'; type Props = { diff --git a/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx b/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx index 12e83c43c5..2e4b61a0a5 100644 --- a/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx +++ b/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx @@ -1,12 +1,12 @@ -import type { StyleProps } from '@chakra-ui/react'; -import { Box, Flex } from '@chakra-ui/react'; +import type { ChakraProps } from '@invoke-ai/ui'; +import { Box, Flex } from '@invoke-ai/ui'; import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import type { CSSProperties, PropsWithChildren } from 'react'; import { memo } from 'react'; type Props = PropsWithChildren & { - maxHeight?: StyleProps['maxHeight']; + maxHeight?: ChakraProps['maxHeight']; }; const styles: CSSProperties = { height: '100%', width: '100%' }; diff --git a/invokeai/frontend/web/src/common/components/SelectionOverlay.tsx b/invokeai/frontend/web/src/common/components/SelectionOverlay.tsx index 2143b1615c..9eb1af0b99 100644 --- a/invokeai/frontend/web/src/common/components/SelectionOverlay.tsx +++ b/invokeai/frontend/web/src/common/components/SelectionOverlay.tsx @@ -1,4 +1,4 @@ -import { Box } from '@chakra-ui/react'; +import { Box } from '@invoke-ai/ui'; import { memo, useMemo } from 'react'; type Props = { diff --git a/invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts b/invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts index 0afb7e7e5d..06090b3dbd 100644 --- a/invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts +++ b/invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts @@ -1,4 +1,4 @@ -import { useToken } from '@chakra-ui/react'; +import { useToken } from '@invoke-ai/ui'; export const useChakraThemeTokens = () => { const [ diff --git a/invokeai/frontend/web/src/common/components/InvSelect/useGroupedModelInvSelect.ts b/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts similarity index 80% rename from invokeai/frontend/web/src/common/components/InvSelect/useGroupedModelInvSelect.ts rename to invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts index 708906f495..d76eab4a53 100644 --- a/invokeai/frontend/web/src/common/components/InvSelect/useGroupedModelInvSelect.ts +++ b/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts @@ -1,3 +1,4 @@ +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; import type { EntityState } from '@reduxjs/toolkit'; import { useAppSelector } from 'app/store/storeHooks'; import type { GroupBase } from 'chakra-react-select'; @@ -7,9 +8,7 @@ import { useTranslation } from 'react-i18next'; import type { AnyModelConfigEntity } from 'services/api/endpoints/models'; import { getModelId } from 'services/api/endpoints/models'; -import type { InvSelectOnChange, InvSelectOption } from './types'; - -type UseGroupedModelInvSelectArg = { +type UseGroupedModelComboboxArg = { modelEntities: EntityState | undefined; selectedModel?: Pick | null; onChange: (value: T | null) => void; @@ -17,24 +16,24 @@ type UseGroupedModelInvSelectArg = { isLoading?: boolean; }; -type UseGroupedModelInvSelectReturn = { - value: InvSelectOption | undefined | null; - options: GroupBase[]; - onChange: InvSelectOnChange; +type UseGroupedModelComboboxReturn = { + value: ComboboxOption | undefined | null; + options: GroupBase[]; + onChange: ComboboxOnChange; placeholder: string; noOptionsMessage: () => string; }; -export const useGroupedModelInvSelect = ( - arg: UseGroupedModelInvSelectArg -): UseGroupedModelInvSelectReturn => { +export const useGroupedModelCombobox = ( + arg: UseGroupedModelComboboxArg +): UseGroupedModelComboboxReturn => { const { t } = useTranslation(); const base_model = useAppSelector( (s) => s.generation.model?.base_model ?? 'sdxl' ); const { modelEntities, selectedModel, getIsDisabled, onChange, isLoading } = arg; - const options = useMemo[]>(() => { + const options = useMemo[]>(() => { if (!modelEntities) { return []; } @@ -53,7 +52,7 @@ export const useGroupedModelInvSelect = ( }); return acc; }, - [] as GroupBase[] + [] as GroupBase[] ); _options.sort((a) => (a.label === base_model ? -1 : 1)); return _options; @@ -69,7 +68,7 @@ export const useGroupedModelInvSelect = ( [options, selectedModel] ); - const _onChange = useCallback( + const _onChange = useCallback( (v) => { if (!v) { onChange(null); diff --git a/invokeai/frontend/web/src/common/components/InvSelect/useModelInvSelect.ts b/invokeai/frontend/web/src/common/hooks/useModelCombobox.ts similarity index 80% rename from invokeai/frontend/web/src/common/components/InvSelect/useModelInvSelect.ts rename to invokeai/frontend/web/src/common/hooks/useModelCombobox.ts index 186d754ef6..25908c5f62 100644 --- a/invokeai/frontend/web/src/common/components/InvSelect/useModelInvSelect.ts +++ b/invokeai/frontend/web/src/common/hooks/useModelCombobox.ts @@ -1,3 +1,4 @@ +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; import type { EntityState } from '@reduxjs/toolkit'; import { map } from 'lodash-es'; import { useCallback, useMemo } from 'react'; @@ -5,9 +6,7 @@ import { useTranslation } from 'react-i18next'; import type { AnyModelConfigEntity } from 'services/api/endpoints/models'; import { getModelId } from 'services/api/endpoints/models'; -import type { InvSelectOnChange, InvSelectOption } from './types'; - -type UseModelInvSelectArg = { +type UseModelComboboxArg = { modelEntities: EntityState | undefined; selectedModel?: Pick | null; onChange: (value: T | null) => void; @@ -16,17 +15,17 @@ type UseModelInvSelectArg = { isLoading?: boolean; }; -type UseModelInvSelectReturn = { - value: InvSelectOption | undefined | null; - options: InvSelectOption[]; - onChange: InvSelectOnChange; +type UseModelComboboxReturn = { + value: ComboboxOption | undefined | null; + options: ComboboxOption[]; + onChange: ComboboxOnChange; placeholder: string; noOptionsMessage: () => string; }; -export const useModelInvSelect = ( - arg: UseModelInvSelectArg -): UseModelInvSelectReturn => { +export const useModelCombobox = ( + arg: UseModelComboboxArg +): UseModelComboboxReturn => { const { t } = useTranslation(); const { modelEntities, @@ -36,7 +35,7 @@ export const useModelInvSelect = ( isLoading, optionsFilter = () => true, } = arg; - const options = useMemo(() => { + const options = useMemo(() => { if (!modelEntities) { return []; } @@ -57,7 +56,7 @@ export const useModelInvSelect = ( [options, selectedModel] ); - const _onChange = useCallback( + const _onChange = useCallback( (v) => { if (!v) { onChange(null); diff --git a/invokeai/frontend/web/src/common/util/colorTokenToCssVar.ts b/invokeai/frontend/web/src/common/util/colorTokenToCssVar.ts index 87724d9c9b..2a7364aed7 100644 --- a/invokeai/frontend/web/src/common/util/colorTokenToCssVar.ts +++ b/invokeai/frontend/web/src/common/util/colorTokenToCssVar.ts @@ -1,2 +1,2 @@ export const colorTokenToCssVar = (colorToken: string) => - `var(--invokeai-colors-${colorToken.split('.').join('-')})`; + `var(--invoke-colors-${colorToken.split('.').join('-')})`; diff --git a/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx b/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx index 422ec78640..5d352c08c4 100644 --- a/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx @@ -1,7 +1,5 @@ -import { useDisclosure } from '@chakra-ui/react'; +import { Button, ConfirmationAlertDialog, useDisclosure } from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvConfirmationAlertDialog } from 'common/components/InvConfirmationAlertDialog/InvConfirmationAlertDialog'; import { isStagingSelector } from 'features/canvas/store/canvasSelectors'; import { clearCanvasHistory } from 'features/canvas/store/canvasSlice'; import { memo, useCallback } from 'react'; @@ -20,15 +18,15 @@ const ClearCanvasHistoryButtonModal = () => { return ( <> - } isDisabled={isStaging} > {t('unifiedCanvas.clearCanvasHistory')} - - + {

{t('unifiedCanvas.clearCanvasHistoryMessage')}


{t('unifiedCanvas.clearCanvasHistoryConfirm')}

- + ); }; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx index 73ee63a1bd..fafbccb705 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx @@ -1,4 +1,4 @@ -import { Box, chakra, Flex } from '@chakra-ui/react'; +import { Box, chakra, Flex } from '@invoke-ai/ui'; import { useStore } from '@nanostores/react'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx index 69b1751d9f..a049714037 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx @@ -1,11 +1,11 @@ // Grid drawing adapted from https://longviewcoder.com/2021/12/08/konva-a-better-grid/ +import { getArbitraryBaseColor } from '@invoke-ai/ui'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { selectCanvasSlice } from 'features/canvas/store/canvasSlice'; import type { ReactElement } from 'react'; import { memo, useCallback, useMemo } from 'react'; import { Group, Line as KonvaLine } from 'react-konva'; -import { getArbitraryBaseColor } from 'theme/colors'; const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => { return { diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx index 902f4b7d2c..ef23a55cd2 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx @@ -1,4 +1,4 @@ -import { useToken } from '@chakra-ui/react'; +import { useToken } from '@invoke-ai/ui'; import type { CanvasImage } from 'features/canvas/store/canvasTypes'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx index 10ccbc2376..976bc7c49a 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx @@ -1,9 +1,7 @@ -import { Flex } from '@chakra-ui/react'; +import { Button, ButtonGroup, Flex, IconButton } from '@invoke-ai/ui'; import { skipToken } from '@reduxjs/toolkit/query'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup'; import { stagingAreaImageSaved } from 'features/canvas/store/actions'; import { commitStagingAreaImage, @@ -14,7 +12,6 @@ import { setShouldShowStagingImage, setShouldShowStagingOutline, } from 'features/canvas/store/canvasSlice'; -import { InvIconButton } from 'index'; import { memo, useCallback } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; @@ -136,8 +133,8 @@ const IAICanvasStagingAreaToolbar = () => { onMouseEnter={handleMouseOver} onMouseLeave={handleMouseOut} > - - + } @@ -145,13 +142,13 @@ const IAICanvasStagingAreaToolbar = () => { colorScheme="invokeBlue" isDisabled={!shouldShowStagingImage} /> - {`${currentIndex + 1}/${total}`} - {`${currentIndex + 1}/${total}`} + } @@ -159,16 +156,16 @@ const IAICanvasStagingAreaToolbar = () => { colorScheme="invokeBlue" isDisabled={!shouldShowStagingImage} /> - - - + + } onClick={handleAccept} colorScheme="invokeBlue" /> - { onClick={handleToggleShouldShowStagingImage} colorScheme="invokeBlue" /> - { onClick={handleSaveToGallery} colorScheme="invokeBlue" /> - } @@ -200,7 +197,7 @@ const IAICanvasStagingAreaToolbar = () => { colorScheme="error" fontSize={20} /> - + ); }; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx index ad57301670..8e99ffb65a 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx @@ -1,4 +1,4 @@ -import { Box, Flex } from '@chakra-ui/react'; +import { Box, Flex } from '@invoke-ai/ui'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { selectCanvasSlice } from 'features/canvas/store/canvasSlice'; @@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next'; import IAICanvasStatusTextCursorPos from './IAICanvasStatusText/IAICanvasStatusTextCursorPos'; -const warningColor = 'var(--invokeai-colors-warning-500)'; +const warningColor = 'var(--invoke-colors-warning-500)'; const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => { const { diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx index 110fb4eef5..dd24ea34a1 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx @@ -1,4 +1,4 @@ -import { Box } from '@chakra-ui/react'; +import { Box } from '@invoke-ai/ui'; import { useStore } from '@nanostores/react'; import { $cursorPosition } from 'features/canvas/store/canvasNanostore'; import roundToHundreth from 'features/canvas/util/roundToHundreth'; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx index ea17c25b52..23cffc05a2 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx @@ -1,16 +1,18 @@ -import { Box, Flex } from '@chakra-ui/react'; +import { + Box, + Button, + Checkbox, + Flex, + FormControl, + FormLabel, + IconButton, + Popover, + PopoverBody, + PopoverContent, + PopoverTrigger, +} from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIColorPicker from 'common/components/IAIColorPicker'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvCheckbox } from 'common/components/InvCheckbox/wrapper'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; -import { - InvPopover, - InvPopoverBody, - InvPopoverContent, - InvPopoverTrigger, -} from 'common/components/InvPopover/wrapper'; import { canvasMaskSavedToGallery } from 'features/canvas/store/actions'; import { isStagingSelector } from 'features/canvas/store/canvasSelectors'; import { @@ -109,55 +111,57 @@ const IAICanvasMaskOptions = () => { ); return ( - - - + + } isChecked={layer === 'mask'} isDisabled={isStaging} /> - - - + + + - - + {`${t('unifiedCanvas.enableMask')} (H)`} + - - - + + {t('unifiedCanvas.preserveMaskedArea')} + - + - } onClick={handleSaveMask} > {t('unifiedCanvas.saveMask')} - - + - - - + + + ); }; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx index c08f3344ac..1fdffa0d3e 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx @@ -1,5 +1,5 @@ +import { IconButton } from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; import { redo } from 'features/canvas/store/canvasSlice'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { memo, useCallback } from 'react'; @@ -31,7 +31,7 @@ const IAICanvasRedoButton = () => { ); return ( - } diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx index 8dbdb8c9b3..6b2f2eddb0 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx @@ -1,12 +1,15 @@ -import { Flex } from '@chakra-ui/react'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvCheckbox } from 'common/components/InvCheckbox/wrapper'; -import { InvControl } from 'common/components/InvControl/InvControl'; import { - InvPopoverBody, - InvPopoverContent, - InvPopoverTrigger, -} from 'common/components/InvPopover/wrapper'; + Checkbox, + Flex, + FormControl, + FormLabel, + IconButton, + Popover, + PopoverBody, + PopoverContent, + PopoverTrigger, +} from '@invoke-ai/ui'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import ClearCanvasHistoryButtonModal from 'features/canvas/components/ClearCanvasHistoryButtonModal'; import { setShouldAntialias, @@ -19,7 +22,6 @@ import { setShouldShowIntermediates, setShouldSnapToGrid, } from 'features/canvas/store/canvasSlice'; -import { InvIconButton, InvPopover } from 'index'; import type { ChangeEvent } from 'react'; import { memo, useCallback } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; @@ -109,76 +111,85 @@ const IAICanvasSettingsButtonPopover = () => { ); return ( - - - + + } /> - - - + + + - - + {t('unifiedCanvas.showIntermediates')} + - - - + + {t('unifiedCanvas.showGrid')} + - - - + + {t('unifiedCanvas.snapToGrid')} + - - - + + {t('unifiedCanvas.darkenOutsideSelection')} + - - - + + {t('unifiedCanvas.autoSaveToGallery')} + - - - + + {t('unifiedCanvas.saveBoxRegionOnly')} + - - - + + {t('unifiedCanvas.limitStrokesToBox')} + - - - + + {t('unifiedCanvas.showCanvasDebugInfo')} + - - - + + {t('unifiedCanvas.antialiasing')} + - + - - - + + + ); }; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx index 7c3fd56088..59a0ae2619 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx @@ -1,16 +1,20 @@ -import { Box, Flex } from '@chakra-ui/react'; +import { + Box, + ButtonGroup, + CompositeNumberInput, + CompositeSlider, + Flex, + FormControl, + FormLabel, + IconButton, + Popover, + PopoverBody, + PopoverContent, + PopoverTrigger, +} from '@invoke-ai/ui'; import { useStore } from '@nanostores/react'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIColorPicker from 'common/components/IAIColorPicker'; -import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvNumberInput } from 'common/components/InvNumberInput/InvNumberInput'; -import { - InvPopoverBody, - InvPopoverContent, - InvPopoverTrigger, -} from 'common/components/InvPopover/wrapper'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; import { $tool, resetToolInteractionState, @@ -22,7 +26,6 @@ import { setBrushColor, setBrushSize, } from 'features/canvas/store/canvasSlice'; -import { InvIconButton, InvPopover } from 'index'; import { clamp } from 'lodash-es'; import { memo, useCallback } from 'react'; import type { RgbaColor } from 'react-colorful'; @@ -199,8 +202,8 @@ const IAICanvasToolChooserOptions = () => { ); return ( - - + } @@ -208,7 +211,7 @@ const IAICanvasToolChooserOptions = () => { onClick={handleSelectBrushTool} isDisabled={isStaging} /> - } @@ -216,21 +219,21 @@ const IAICanvasToolChooserOptions = () => { isDisabled={isStaging} onClick={handleSelectEraserTool} /> - } isDisabled={isStaging} onClick={handleFillRect} /> - } isDisabled={isStaging} onClick={handleEraseBoundingBox} /> - } @@ -238,20 +241,21 @@ const IAICanvasToolChooserOptions = () => { isDisabled={isStaging} onClick={handleSelectColorPickerTool} /> - - - + + } /> - - - + + + - - + {t('unifiedCanvas.brushSize')} + { marks={marks} defaultValue={50} /> - { onChange={handleChangeBrushSize} defaultValue={50} /> - + { /> - - - - + + + + ); }; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx index fda33ae9ae..865e0d5767 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx @@ -1,11 +1,14 @@ -import { Flex } from '@chakra-ui/react'; +import type { ComboboxOnChange } from '@invoke-ai/ui'; +import { + ButtonGroup, + Combobox, + Flex, + FormControl, + IconButton, + Tooltip, +} from '@invoke-ai/ui'; import { useStore } from '@nanostores/react'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSelect } from 'common/components/InvSelect/InvSelect'; -import type { InvSelectOnChange } from 'common/components/InvSelect/types'; -import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard'; import { useImageUploadButton } from 'common/hooks/useImageUploadButton'; import { useSingleAndDoubleClick } from 'common/hooks/useSingleAndDoubleClick'; @@ -25,7 +28,6 @@ import { } from 'features/canvas/store/canvasSlice'; import type { CanvasLayer } from 'features/canvas/store/canvasTypes'; import { LAYER_NAMES_DICT } from 'features/canvas/store/canvasTypes'; -import { InvIconButton } from 'index'; import { memo, useCallback, useMemo } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; @@ -188,7 +190,7 @@ const IAICanvasToolbar = () => { dispatch(canvasDownloadedAsImage()); }, [dispatch]); - const handleChangeLayer = useCallback( + const handleChangeLayer = useCallback( (v) => { if (!v) { return; @@ -208,44 +210,44 @@ const IAICanvasToolbar = () => { return ( - - - + + - - + + - - + } isChecked={tool === 'move' || isStaging} onClick={handleSelectMoveTool} /> - } onClick={handleClickResetCanvasView} /> - + - - + } onClick={handleMergeVisible} isDisabled={isStaging} /> - } @@ -253,7 +255,7 @@ const IAICanvasToolbar = () => { isDisabled={isStaging} /> {isClipboardAPIAvailable && ( - } @@ -261,21 +263,21 @@ const IAICanvasToolbar = () => { isDisabled={isStaging} /> )} - } onClick={handleDownloadAsImage} isDisabled={isStaging} /> - - + + - + - - + } @@ -283,7 +285,7 @@ const IAICanvasToolbar = () => { {...getUploadButtonProps()} /> - } @@ -291,10 +293,10 @@ const IAICanvasToolbar = () => { colorScheme="error" isDisabled={isStaging} /> - - + + - + ); }; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx index 8a05e86476..a2b8feac23 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx @@ -1,5 +1,5 @@ +import { IconButton } from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; import { undo } from 'features/canvas/store/canvasSlice'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { memo, useCallback } from 'react'; @@ -30,7 +30,7 @@ const IAICanvasUndoButton = () => { ); return ( - } diff --git a/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx b/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx index 23f8eabb31..d7e774c87f 100644 --- a/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx +++ b/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx @@ -1,14 +1,13 @@ -import { Flex } from '@chakra-ui/react'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; +import { + Combobox, + ConfirmationAlertDialog, + Flex, + FormControl, + Text, +} from '@invoke-ai/ui'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvConfirmationAlertDialog } from 'common/components/InvConfirmationAlertDialog/InvConfirmationAlertDialog'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSelect } from 'common/components/InvSelect/InvSelect'; -import type { - InvSelectOnChange, - InvSelectOption, -} from 'common/components/InvSelect/types'; -import { InvText } from 'common/components/InvText/wrapper'; import { changeBoardReset, isModalOpenChanged, @@ -37,7 +36,7 @@ const ChangeBoardModal = () => { const [removeImagesFromBoard] = useRemoveImagesFromBoardMutation(); const { t } = useTranslation(); - const options = useMemo(() => { + const options = useMemo(() => { return [{ label: t('boards.uncategorized'), value: 'none' }].concat( (boards ?? []).map((board) => ({ label: board.board_name, @@ -79,7 +78,7 @@ const ChangeBoardModal = () => { selectedBoard, ]); - const onChange = useCallback((v) => { + const onChange = useCallback((v) => { if (!v) { return; } @@ -87,7 +86,7 @@ const ChangeBoardModal = () => { }, []); return ( - { cancelButtonText={t('boards.cancel')} > - + {t('boards.movingImagesToBoard', { count: imagesToChange.length, })} : - - - + + { value={value} options={options} /> - + - + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx index 1031e6bf27..a878c19856 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx @@ -1,10 +1,13 @@ import { ChevronUpIcon } from '@chakra-ui/icons'; -import { Box, Flex } from '@chakra-ui/react'; +import { + Box, + Flex, + FormControl, + FormLabel, + IconButton, + Switch, +} from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import type { InvLabelProps } from 'common/components/InvControl/types'; -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; -import { InvSwitch } from 'common/components/InvSwitch/wrapper'; import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled'; import { useControlAdapterType } from 'features/controlAdapters/hooks/useControlAdapterType'; import { @@ -30,10 +33,6 @@ import ParamControlAdapterProcessorSelect from './parameters/ParamControlAdapter import ParamControlAdapterResizeMode from './parameters/ParamControlAdapterResizeMode'; import ParamControlAdapterWeight from './parameters/ParamControlAdapterWeight'; -const labelProps: InvLabelProps = { - flexGrow: 1, -}; - const ControlAdapterConfig = (props: { id: string; number: number }) => { const { id, number } = props; const controlAdapterType = useControlAdapterType(id); @@ -78,16 +77,16 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => { bg="base.750" > - - + + {t(`controlnet.${controlAdapterType}`, { number })} + + - + { {activeTabName === 'unifiedCanvas' && ( )} - } /> - { onClick={handleDelete} icon={} /> - { const isEnabled = useControlAdapterIsEnabled(id); const shouldAutoConfig = useControlAdapterShouldAutoConfig(id); @@ -32,16 +26,13 @@ const ControlAdapterShouldAutoConfig = ({ id }: Props) => { } return ( - - + {t('controlnet.autoConfigure')} + - + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx index 09b54c6375..4c94448cf5 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx @@ -1,6 +1,5 @@ -import { Flex } from '@chakra-ui/react'; +import { Flex, IconButton } from '@invoke-ai/ui'; import { useAppDispatch } from 'app/store/storeHooks'; -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; import { canvasImageToControlAdapter, canvasMaskToControlAdapter, @@ -30,14 +29,14 @@ const ControlNetCanvasImageImports = ( return ( - } tooltip={t('controlnet.importImageFromCanvas')} aria-label={t('controlnet.importImageFromCanvas')} onClick={handleImportImageFromCanvas} /> - } tooltip={t('controlnet.importMaskFromCanvas')} diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx index ab90bbfaa0..891cd1776a 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx @@ -1,6 +1,5 @@ +import { CompositeRangeSlider, FormControl, FormLabel } from '@invoke-ai/ui'; import { useAppDispatch } from 'app/store/storeHooks'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvRangeSlider } from 'common/components/InvRangeSlider/InvRangeSlider'; import { useControlAdapterBeginEndStepPct } from 'features/controlAdapters/hooks/useControlAdapterBeginEndStepPct'; import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled'; import { @@ -65,13 +64,13 @@ export const ParamControlAdapterBeginEnd = memo(({ id }: Props) => { } return ( - - {t('controlnet.beginEndStepPercent')} + { marks withThumbTooltip /> - + ); }); diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx index 2beed28fb4..9819697990 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx @@ -1,7 +1,6 @@ +import type { ComboboxOnChange } from '@invoke-ai/ui'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; import { useAppDispatch } from 'app/store/storeHooks'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSelect } from 'common/components/InvSelect/InvSelect'; -import type { InvSelectOnChange } from 'common/components/InvSelect/types'; import { useControlAdapterControlMode } from 'features/controlAdapters/hooks/useControlAdapterControlMode'; import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled'; import { controlAdapterControlModeChanged } from 'features/controlAdapters/store/controlAdaptersSlice'; @@ -29,7 +28,7 @@ const ParamControlAdapterControlMode = ({ id }: Props) => { [t] ); - const handleControlModeChange = useCallback( + const handleControlModeChange = useCallback( (v) => { if (!v) { return; @@ -54,17 +53,14 @@ const ParamControlAdapterControlMode = ({ id }: Props) => { } return ( - - + {t('controlnet.controlMode')} + - + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx index 1e27da467a..8323675caf 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx @@ -1,9 +1,7 @@ +import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSelect } from 'common/components/InvSelect/InvSelect'; -import { useGroupedModelInvSelect } from 'common/components/InvSelect/useGroupedModelInvSelect'; -import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; +import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox'; import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled'; import { useControlAdapterModel } from 'features/controlAdapters/hooks/useControlAdapterModel'; import { useControlAdapterModelEntities } from 'features/controlAdapters/hooks/useControlAdapterModelEntities'; @@ -81,7 +79,7 @@ const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => { ); const { options, value, onChange, noOptionsMessage } = - useGroupedModelInvSelect({ + useGroupedModelCombobox({ modelEntities: models, onChange: _onChange, selectedModel, @@ -89,20 +87,20 @@ const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => { }); return ( - - + - - - + + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterProcessorSelect.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterProcessorSelect.tsx index 5dc2a6e7ed..f395dbad32 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterProcessorSelect.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterProcessorSelect.tsx @@ -1,11 +1,7 @@ +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSelect } from 'common/components/InvSelect/InvSelect'; -import type { - InvSelectOnChange, - InvSelectOption, -} from 'common/components/InvSelect/types'; import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled'; import { useControlAdapterProcessorNode } from 'features/controlAdapters/hooks/useControlAdapterProcessorNode'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; @@ -21,7 +17,7 @@ type Props = { }; const selectOptions = createMemoizedSelector(configSelector, (config) => { - const options: InvSelectOption[] = map(CONTROLNET_PROCESSORS, (p) => ({ + const options: ComboboxOption[] = map(CONTROLNET_PROCESSORS, (p) => ({ value: p.type, label: p.label, })) @@ -50,7 +46,7 @@ const ParamControlAdapterProcessorSelect = ({ id }: Props) => { const options = useAppSelector(selectOptions); const { t } = useTranslation(); - const onChange = useCallback( + const onChange = useCallback( (v) => { if (!v) { return; @@ -73,9 +69,10 @@ const ParamControlAdapterProcessorSelect = ({ id }: Props) => { return null; } return ( - - - + + {t('controlnet.processor')} + + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx index b88a2d2193..4a652604a8 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx @@ -1,7 +1,6 @@ +import type { ComboboxOnChange } from '@invoke-ai/ui'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; import { useAppDispatch } from 'app/store/storeHooks'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSelect } from 'common/components/InvSelect/InvSelect'; -import type { InvSelectOnChange } from 'common/components/InvSelect/types'; import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled'; import { useControlAdapterResizeMode } from 'features/controlAdapters/hooks/useControlAdapterResizeMode'; import { controlAdapterResizeModeChanged } from 'features/controlAdapters/store/controlAdaptersSlice'; @@ -30,7 +29,7 @@ const ParamControlAdapterResizeMode = ({ id }: Props) => { [t] ); - const handleResizeModeChange = useCallback( + const handleResizeModeChange = useCallback( (v) => { if (!isResizeMode(v?.value)) { return; @@ -55,17 +54,15 @@ const ParamControlAdapterResizeMode = ({ id }: Props) => { } return ( - - + {t('controlnet.resizeMode')} + - + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx index 65a70d78de..95e3a99df5 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx @@ -1,8 +1,10 @@ +import { + CompositeNumberInput, + CompositeSlider, + FormControl, + FormLabel, +} from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvControlGroup } from 'common/components/InvControl/InvControlGroup'; -import { InvNumberInput } from 'common/components/InvNumberInput/InvNumberInput'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled'; import { useControlAdapterWeight } from 'features/controlAdapters/hooks/useControlAdapterWeight'; import { controlAdapterWeightChanged } from 'features/controlAdapters/store/controlAdaptersSlice'; @@ -46,35 +48,30 @@ const ParamControlAdapterWeight = ({ id }: ParamControlAdapterWeightProps) => { } return ( - - - - - - + + {t('controlnet.weight')} + + + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx index 0f0a66ce64..4803188202 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx @@ -1,5 +1,9 @@ -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; +import { + CompositeNumberInput, + CompositeSlider, + FormControl, + FormLabel, +} from '@invoke-ai/ui'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredCannyImageProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -39,26 +43,40 @@ const CannyProcessor = (props: CannyProcessorProps) => { return ( - - + {t('controlnet.lowThreshold')} + - - - + + + {t('controlnet.highThreshold')} + - + + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx index 646f3c93aa..efbd4e5ba5 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx @@ -1,5 +1,9 @@ -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; +import { + CompositeNumberInput, + CompositeSlider, + FormControl, + FormLabel, +} from '@invoke-ai/ui'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredColorMapImageProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -32,11 +36,9 @@ const ColorMapProcessor = (props: ColorMapProcessorProps) => { return ( - - + {t('controlnet.colorMapTileSize')} + { max={256} step={1} marks - withNumberInput - numberInputMax={4096} /> - + + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx index 941697dfb1..cca0aba74c 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx @@ -1,5 +1,9 @@ -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; +import { + CompositeNumberInput, + CompositeSlider, + FormControl, + FormLabel, +} from '@invoke-ai/ui'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredContentShuffleImageProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -60,67 +64,96 @@ const ContentShuffleProcessor = (props: Props) => { return ( - - + {t('controlnet.detectResolution')} + - - - + + + {t('controlnet.imageResolution')} + - - - + + + {t('controlnet.w')} + - - - + + + {t('controlnet.h')} + - - - + + + {t('controlnet.f')} + - + + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx index 7776d7c5f3..83c406829b 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx @@ -1,6 +1,10 @@ -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; -import { InvSwitch } from 'common/components/InvSwitch/wrapper'; +import { + CompositeNumberInput, + CompositeSlider, + FormControl, + FormLabel, + Switch, +} from '@invoke-ai/ui'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredHedImageProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -51,37 +55,46 @@ const HedPreprocessor = (props: HedProcessorProps) => { return ( - - + {t('controlnet.detectResolution')} + - - - + + + {t('controlnet.imageResolution')} + - - - - + + + + {t('controlnet.scribble')} + + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx index 18ecb4436d..a1651cd428 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx @@ -1,5 +1,9 @@ -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; +import { + CompositeNumberInput, + CompositeSlider, + FormControl, + FormLabel, +} from '@invoke-ai/ui'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredLineartAnimeImageProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -39,34 +43,42 @@ const LineartAnimeProcessor = (props: Props) => { return ( - - + {t('controlnet.detectResolution')} + - - - + + + {t('controlnet.imageResolution')} + - + + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx index 1407e3a006..3535d15d3c 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx @@ -1,6 +1,10 @@ -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; -import { InvSwitch } from 'common/components/InvSwitch/wrapper'; +import { + CompositeNumberInput, + CompositeSlider, + FormControl, + FormLabel, + Switch, +} from '@invoke-ai/ui'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredLineartImageProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -48,37 +52,46 @@ const LineartProcessor = (props: LineartProcessorProps) => { return ( - - + {t('controlnet.detectResolution')} + - - - + + + {t('controlnet.imageResolution')} + - - - - + + + + {t('controlnet.coarse')} + + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx index 0d8514f405..e914491000 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx @@ -1,5 +1,9 @@ -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; +import { + CompositeNumberInput, + CompositeSlider, + FormControl, + FormLabel, +} from '@invoke-ai/ui'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredMediapipeFaceProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -39,19 +43,27 @@ const MediapipeFaceProcessor = (props: Props) => { return ( - - + {t('controlnet.maxFaces')} + - - - + + + {t('controlnet.minConfidence')} + { max={1} step={0.01} marks - withNumberInput /> - + + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx index ba9867918b..e95c4c8a7f 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx @@ -1,5 +1,9 @@ -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; +import { + CompositeNumberInput, + CompositeSlider, + FormControl, + FormLabel, +} from '@invoke-ai/ui'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredMidasDepthImageProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -39,8 +43,9 @@ const MidasDepthProcessor = (props: Props) => { return ( - - + {t('controlnet.amult')} + { max={20} step={0.01} marks - withNumberInput /> - - - + + + {t('controlnet.bgth')} + { max={20} step={0.01} marks - withNumberInput /> - + + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx index f33773908e..34a993b070 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx @@ -1,5 +1,9 @@ -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; +import { + CompositeNumberInput, + CompositeSlider, + FormControl, + FormLabel, +} from '@invoke-ai/ui'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredMlsdImageProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -53,36 +57,45 @@ const MlsdImageProcessor = (props: Props) => { return ( - - + {t('controlnet.detectResolution')} + - - - + + + {t('controlnet.imageResolution')} + - - - + + + {t('controlnet.w')} + { max={1} step={0.01} marks={marks0to1} - withNumberInput /> - - - + + + {t('controlnet.h')} + { max={1} step={0.01} marks={marks0to1} - withNumberInput /> - + + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx index 2e526a9a84..24b83ef950 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx @@ -1,5 +1,9 @@ -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; +import { + CompositeNumberInput, + CompositeSlider, + FormControl, + FormLabel, +} from '@invoke-ai/ui'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredNormalbaeImageProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -39,34 +43,42 @@ const NormalBaeProcessor = (props: Props) => { return ( - - + {t('controlnet.detectResolution')} + - - - + + + {t('controlnet.imageResolution')} + - + + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx index 950cbc8dea..8385183cbc 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx @@ -1,6 +1,10 @@ -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; -import { InvSwitch } from 'common/components/InvSwitch/wrapper'; +import { + CompositeNumberInput, + CompositeSlider, + FormControl, + FormLabel, + Switch, +} from '@invoke-ai/ui'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredOpenposeImageProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -48,40 +52,46 @@ const OpenposeProcessor = (props: Props) => { return ( - - + {t('controlnet.detectResolution')} + - - - + + + {t('controlnet.imageResolution')} + - - - - + + + {t('controlnet.handAndFace')} + + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx index 2cbc5e5a6f..e8dac66e19 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx @@ -1,6 +1,10 @@ -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; -import { InvSwitch } from 'common/components/InvSwitch/wrapper'; +import { + CompositeNumberInput, + CompositeSlider, + FormControl, + FormLabel, + Switch, +} from '@invoke-ai/ui'; import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged'; import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants'; import type { RequiredPidiImageProcessorInvocation } from 'features/controlAdapters/store/types'; @@ -55,40 +59,50 @@ const PidiProcessor = (props: Props) => { return ( - - + {t('controlnet.detectResolution')} + - - - + + + {t('controlnet.imageResolution')} + - - - - - - - + + + + {t('controlnet.scribble')} + + + + {t('controlnet.safe')} + + ); }; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx index dbd6f7830f..1eb1b45de1 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@chakra-ui/react'; +import { Flex } from '@invoke-ai/ui'; import type { PropsWithChildren } from 'react'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx index ca63eb5270..e312553daf 100644 --- a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx +++ b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx @@ -1,11 +1,11 @@ +import type { IconButtonProps } from '@invoke-ai/ui'; +import { IconButton } from '@invoke-ai/ui'; import { useAppSelector } from 'app/store/storeHooks'; -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; -import type { InvIconButtonProps } from 'common/components/InvIconButton/types'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { PiTrashSimpleBold } from 'react-icons/pi'; -type DeleteImageButtonProps = Omit & { +type DeleteImageButtonProps = Omit & { onClick: () => void; }; @@ -15,7 +15,7 @@ export const DeleteImageButton = memo((props: DeleteImageButtonProps) => { const isConnected = useAppSelector((s) => s.system.isConnected); return ( - } tooltip={`${t('gallery.deleteImage')} (Del)`} diff --git a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx index 257b5022f7..b59d810bd1 100644 --- a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx +++ b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx @@ -1,10 +1,14 @@ -import { Divider, Flex } from '@chakra-ui/react'; +import { + ConfirmationAlertDialog, + Divider, + Flex, + FormControl, + FormLabel, + Switch, + Text, +} from '@invoke-ai/ui'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvConfirmationAlertDialog } from 'common/components/InvConfirmationAlertDialog/InvConfirmationAlertDialog'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSwitch } from 'common/components/InvSwitch/wrapper'; -import { InvText } from 'common/components/InvText/wrapper'; import { selectCanvasSlice } from 'features/canvas/store/canvasSlice'; import { selectControlAdaptersSlice } from 'features/controlAdapters/store/controlAdaptersSlice'; import { imageDeletionConfirmed } from 'features/deleteImageModal/store/actions'; @@ -101,7 +105,7 @@ const DeleteImageModal = () => { }, [dispatch, imagesToDelete, imagesUsage]); return ( - { - + {canRestoreDeletedImagesFromBin ? t('gallery.deleteImageBin') : t('gallery.deleteImagePermanent')} - - {t('common.areYouSure')} - - + {t('common.areYouSure')} + + {t('common.dontAskMeAgain')} + - + - + ); }; diff --git a/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx b/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx index c39a7a97cd..2e5c4efe24 100644 --- a/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx +++ b/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx @@ -1,5 +1,4 @@ -import { ListItem, UnorderedList } from '@chakra-ui/react'; -import { InvText } from 'common/components/InvText/wrapper'; +import { ListItem, Text, UnorderedList } from '@invoke-ai/ui'; import type { ImageUsage } from 'features/deleteImageModal/store/types'; import { some } from 'lodash-es'; import { memo } from 'react'; @@ -28,7 +27,7 @@ const ImageUsageMessage = (props: Props) => { return ( <> - {topMessage} + {topMessage} {imageUsage.isInitialImage && ( {t('common.img2img')} @@ -43,7 +42,7 @@ const ImageUsageMessage = (props: Props) => { {t('common.nodeEditor')} )} - {bottomMessage} + {bottomMessage} ); }; diff --git a/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx b/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx index 956ebfb4b6..f52f7945e0 100644 --- a/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx +++ b/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx @@ -1,7 +1,6 @@ -import type { ChakraProps } from '@chakra-ui/react'; -import { Box, Flex, Heading, Image } from '@chakra-ui/react'; +import type { ChakraProps } from '@invoke-ai/ui'; +import { Box, Flex, Heading, Image, Text } from '@invoke-ai/ui'; import { useAppSelector } from 'app/store/storeHooks'; -import { InvText } from 'common/components/InvText/wrapper'; import type { TypesafeDraggableData } from 'features/dnd/types'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -54,7 +53,7 @@ const DragPreview = (props: OverlayDragImageProps) => { whiteSpace="nowrap" fontSize="sm" > - {field.label || fieldTemplate.title} + {field.label || fieldTemplate.title} ); } diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/DynamicPromptsPreviewModal.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/DynamicPromptsPreviewModal.tsx index 68869f0898..8a67e36874 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/DynamicPromptsPreviewModal.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/DynamicPromptsPreviewModal.tsx @@ -1,12 +1,12 @@ -import { Flex } from '@chakra-ui/layout'; import { - InvModal, - InvModalBody, - InvModalCloseButton, - InvModalContent, - InvModalHeader, - InvModalOverlay, -} from 'common/components/InvModal/wrapper'; + Flex, + Modal, + ModalBody, + ModalCloseButton, + ModalContent, + ModalHeader, + ModalOverlay, +} from '@invoke-ai/ui'; import { useDynamicPromptsModal } from 'features/dynamicPrompts/hooks/useDynamicPromptsModal'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -20,27 +20,20 @@ export const DynamicPromptsModal = memo(() => { const { isOpen, onClose } = useDynamicPromptsModal(); return ( - - - - {t('dynamicPrompts.dynamicPrompts')} - - + + + + {t('dynamicPrompts.dynamicPrompts')} + + - - - + + + ); }); diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx index 7b0df5e602..1a772d8245 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx @@ -1,6 +1,5 @@ +import { FormControl, FormLabel, Switch } from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSwitch } from 'common/components/InvSwitch/wrapper'; import { combinatorialToggled } from 'features/dynamicPrompts/store/dynamicPromptsSlice'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; @@ -15,9 +14,10 @@ const ParamDynamicPromptsCombinatorial = () => { }, [dispatch]); return ( - - - + + {t('dynamicPrompts.combinatorial')} + + ); }; diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx index c4b69d49e4..e6f5616f13 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx @@ -1,6 +1,10 @@ +import { + CompositeNumberInput, + CompositeSlider, + FormControl, + FormLabel, +} from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; import { maxPromptsChanged } from 'features/dynamicPrompts/store/dynamicPromptsSlice'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; @@ -34,24 +38,28 @@ const ParamDynamicPromptsMaxPrompts = () => { ); return ( - - {t('dynamicPrompts.maxPrompts')} + - + + ); }; diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx index b54438c9c3..c6c424d479 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx @@ -1,10 +1,9 @@ -import type { ChakraProps } from '@chakra-ui/react'; -import { Flex, ListItem, OrderedList, Spinner } from '@chakra-ui/react'; +import type { ChakraProps } from '@invoke-ai/ui'; +import { Flex, ListItem, OrderedList, Spinner, Text } from '@invoke-ai/ui'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { IAINoContentFallback } from 'common/components/IAIImageFallback'; import IAIInformationalPopover from 'common/components/IAIInformationalPopover/IAIInformationalPopover'; -import { InvText } from 'common/components/InvText/wrapper'; import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent'; import { selectDynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice'; import { memo, useMemo } from 'react'; @@ -57,9 +56,9 @@ const ParamDynamicPromptsPreview = () => { return ( <> - + {label} - + { key={`${prompt}.${i}`} sx={listItemStyles} > - {prompt} + {prompt} ))} diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx index 85ef020dfa..069f41ff3c 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx @@ -1,10 +1,6 @@ +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSelect } from 'common/components/InvSelect/InvSelect'; -import type { - InvSelectOnChange, - InvSelectOption, -} from 'common/components/InvSelect/types'; import { isSeedBehaviour, seedBehaviourChanged, @@ -17,7 +13,7 @@ const ParamDynamicPromptsSeedBehaviour = () => { const { t } = useTranslation(); const seedBehaviour = useAppSelector((s) => s.dynamicPrompts.seedBehaviour); - const options = useMemo(() => { + const options = useMemo(() => { return [ { value: 'PER_ITERATION', @@ -32,7 +28,7 @@ const ParamDynamicPromptsSeedBehaviour = () => { ]; }, [t]); - const handleChange = useCallback( + const handleChange = useCallback( (v) => { if (!isSeedBehaviour(v?.value)) { return; @@ -48,13 +44,13 @@ const ParamDynamicPromptsSeedBehaviour = () => { ); return ( - - - + {t('dynamicPrompts.seedBehaviour.label')} + + ); }; diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx index a66cc09141..7dceb6acfc 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx @@ -1,12 +1,10 @@ -import type { SystemStyleObject } from '@chakra-ui/styled-system'; +import type { SystemStyleObject } from '@invoke-ai/ui'; +import { IconButton, spinAnimation, Tooltip } from '@invoke-ai/ui'; import { useAppSelector } from 'app/store/storeHooks'; -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; -import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; import { useDynamicPromptsModal } from 'features/dynamicPrompts/hooks/useDynamicPromptsModal'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { BsBracesAsterisk } from 'react-icons/bs'; -import { spinAnimation } from 'theme/animations'; const loadingStyles: SystemStyleObject = { svg: { animation: spinAnimation }, @@ -17,14 +15,14 @@ export const ShowDynamicPromptsPreviewButton = memo(() => { const isLoading = useAppSelector((s) => s.dynamicPrompts.isLoading); const { isOpen, onOpen } = useDynamicPromptsModal(); return ( - - { onClick={onOpen} sx={isLoading ? loadingStyles : undefined} /> - + ); }); diff --git a/invokeai/frontend/web/src/features/embedding/AddEmbeddingButton.tsx b/invokeai/frontend/web/src/features/embedding/AddEmbeddingButton.tsx index 7990fea0e5..c1207a13b0 100644 --- a/invokeai/frontend/web/src/features/embedding/AddEmbeddingButton.tsx +++ b/invokeai/frontend/web/src/features/embedding/AddEmbeddingButton.tsx @@ -1,5 +1,4 @@ -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; -import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; +import { IconButton, Tooltip } from '@invoke-ai/ui'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { PiCodeBold } from 'react-icons/pi'; @@ -13,15 +12,15 @@ export const AddEmbeddingButton = memo((props: Props) => { const { onOpen, isOpen } = props; const { t } = useTranslation(); return ( - - + } onClick={onOpen} /> - + ); }); diff --git a/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx b/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx index 484f484d8a..bd39c1012a 100644 --- a/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx +++ b/invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx @@ -1,25 +1,18 @@ import { - InvPopover, - InvPopoverAnchor, - InvPopoverBody, - InvPopoverContent, -} from 'common/components/InvPopover/wrapper'; + Popover, + PopoverAnchor, + PopoverBody, + PopoverContent, +} from '@invoke-ai/ui'; import { EmbeddingSelect } from 'features/embedding/EmbeddingSelect'; import type { EmbeddingPopoverProps } from 'features/embedding/types'; import { memo } from 'react'; -import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants'; export const EmbeddingPopover = memo((props: EmbeddingPopoverProps) => { - const { - onSelect, - isOpen, - onClose, - width = PARAMETERS_PANEL_WIDTH, - children, - } = props; + const { onSelect, isOpen, onClose, width, children } = props; return ( - { returnFocusOnClose={true} isLazy > - {children} - {children} + { borderWidth="2px" borderStyle="solid" > - + - - - + + + ); }); diff --git a/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx b/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx index 57b36d75eb..2a263894ff 100644 --- a/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx +++ b/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx @@ -1,8 +1,7 @@ -import type { ChakraProps } from '@chakra-ui/react'; +import type { ChakraProps } from '@invoke-ai/ui'; +import { Combobox, FormControl } from '@invoke-ai/ui'; import { useAppSelector } from 'app/store/storeHooks'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSelect } from 'common/components/InvSelect/InvSelect'; -import { useGroupedModelInvSelect } from 'common/components/InvSelect/useGroupedModelInvSelect'; +import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox'; import type { EmbeddingSelectProps } from 'features/embedding/types'; import { t } from 'i18next'; import { memo, useCallback } from 'react'; @@ -40,15 +39,15 @@ export const EmbeddingSelect = memo( [onSelect] ); - const { options, onChange } = useGroupedModelInvSelect({ + const { options, onChange } = useGroupedModelCombobox({ modelEntities: data, getIsDisabled, onChange: _onChange, }); return ( - - + - + ); } ); diff --git a/invokeai/frontend/web/src/features/embedding/usePrompt.ts b/invokeai/frontend/web/src/features/embedding/usePrompt.ts index 49716cf4ae..4c5878df6f 100644 --- a/invokeai/frontend/web/src/features/embedding/usePrompt.ts +++ b/invokeai/frontend/web/src/features/embedding/usePrompt.ts @@ -1,4 +1,4 @@ -import { useDisclosure } from '@chakra-ui/react'; +import { useDisclosure } from '@invoke-ai/ui'; import { isNil } from 'lodash-es'; import type { ChangeEventHandler, diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx index 72da8b3cba..edb15344c4 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx @@ -1,4 +1,4 @@ -import { Badge, Flex } from '@chakra-ui/react'; +import { Badge, Flex } from '@invoke-ai/ui'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx index 1c675aa412..aab12d0622 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx @@ -1,10 +1,6 @@ +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSelect } from 'common/components/InvSelect/InvSelect'; -import type { - InvSelectOnChange, - InvSelectOption, -} from 'common/components/InvSelect/types'; import { autoAddBoardIdChanged } from 'features/gallery/store/gallerySlice'; import { memo, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -19,7 +15,7 @@ const BoardAutoAddSelect = () => { ); const { options, hasBoards } = useListAllBoardsQuery(undefined, { selectFromResult: ({ data }) => { - const options: InvSelectOption[] = [ + const options: ComboboxOption[] = [ { label: 'None', value: 'none', @@ -37,7 +33,7 @@ const BoardAutoAddSelect = () => { }, }); - const onChange = useCallback( + const onChange = useCallback( (v) => { if (!v) { return; @@ -55,18 +51,16 @@ const BoardAutoAddSelect = () => { const noOptionsMessage = useCallback(() => t('boards.noMatching'), [t]); return ( - - + {t('boards.autoAddBoard')} + - + ); }; export default memo(BoardAutoAddSelect); diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx index 95e70b291f..09c4e94709 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx @@ -1,10 +1,7 @@ +import type { ContextMenuProps } from '@invoke-ai/ui'; +import { ContextMenu, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui'; import { createSelector } from '@reduxjs/toolkit'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import type { InvContextMenuProps } from 'common/components/InvContextMenu/InvContextMenu'; -import { InvContextMenu } from 'common/components/InvContextMenu/InvContextMenu'; -import { InvMenuItem } from 'common/components/InvMenu/InvMenuItem'; -import { InvMenuList } from 'common/components/InvMenu/InvMenuList'; -import { InvMenuGroup } from 'common/components/InvMenu/wrapper'; import { autoAddBoardIdChanged, selectGallerySlice, @@ -24,7 +21,7 @@ import GalleryBoardContextMenuItems from './GalleryBoardContextMenuItems'; type Props = { board?: BoardDTO; board_id: BoardId; - children: InvContextMenuProps['children']; + children: ContextMenuProps['children']; setBoardToDelete?: (board?: BoardDTO) => void; }; @@ -91,22 +88,22 @@ const BoardContextMenu = ({ const renderMenuFunc = useCallback( () => ( - - - + + } isDisabled={isSelectedForAutoAdd || autoAssignBoardOnClick} onClick={handleSetAutoAdd} > {t('boards.menuItemAutoAdd')} - + {isBulkDownloadEnabled && ( - } onClickCapture={handleBulkDownload} > {t('boards.downloadBoard')} - + )} {board && ( )} - - + + ), [ autoAssignBoardOnClick, @@ -130,9 +127,7 @@ const BoardContextMenu = ({ ] ); - return ( - {children} - ); + return {children}; }; export default memo(BoardContextMenu); diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx index 7439d75c7c..5e7a4b0f99 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx @@ -1,4 +1,4 @@ -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; +import { IconButton } from '@invoke-ai/ui'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { PiPlusBold } from 'react-icons/pi'; @@ -13,7 +13,7 @@ const AddBoardButton = () => { }, [createBoard, DEFAULT_BOARD_NAME]); return ( - } isLoading={isLoading} tooltip={t('boards.addBoard')} diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx index 69941ecd0c..4d62e5393c 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx @@ -1,4 +1,4 @@ -import { Collapse, Flex, Grid, GridItem } from '@chakra-ui/react'; +import { Collapse, Flex, Grid, GridItem } from '@invoke-ai/ui'; import { useAppSelector } from 'app/store/storeHooks'; import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal'; diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx index 5727dc79c0..e42ea03295 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx @@ -1,6 +1,10 @@ -import { Input, InputGroup, InputRightElement } from '@chakra-ui/react'; +import { + IconButton, + Input, + InputGroup, + InputRightElement, +} from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; import { boardSearchTextChanged } from 'features/gallery/store/gallerySlice'; import type { ChangeEvent, KeyboardEvent } from 'react'; import { memo, useCallback } from 'react'; @@ -51,7 +55,7 @@ const BoardsSearch = () => { /> {boardSearchText && boardSearchText.length && ( - {(ref) => ( - + {t('unifiedCanvas.move')} + {t('unifiedCanvas.move')} } /> - + )} diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx index a3ed79ff61..c8e8e3bb53 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx @@ -1,8 +1,6 @@ -import { Box, Flex, Image } from '@chakra-ui/react'; +import { Box, Flex, Image, Text, Tooltip } from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIDroppable from 'common/components/IAIDroppable'; -import { InvText } from 'common/components/InvText/wrapper'; -import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; import SelectionOverlay from 'common/components/SelectionOverlay'; import type { RemoveFromBoardDropData } from 'features/dnd/types'; import AutoAddIcon from 'features/gallery/components/Boards/AutoAddIcon'; @@ -81,7 +79,7 @@ const NoBoardBoard = memo(({ isSelected }: Props) => { > {(ref) => ( - + { {t('unifiedCanvas.move')} + {t('unifiedCanvas.move')} } /> - + )} diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx index 20340713ed..0f78177371 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx @@ -1,17 +1,18 @@ -import { Flex, Skeleton } from '@chakra-ui/react'; +import { + AlertDialog, + AlertDialogBody, + AlertDialogContent, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogOverlay, + Button, + Flex, + Skeleton, + Text, +} from '@invoke-ai/ui'; import { skipToken } from '@reduxjs/toolkit/query'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; -import { - InvAlertDialog, - InvAlertDialogBody, - InvAlertDialogContent, - InvAlertDialogFooter, - InvAlertDialogHeader, - InvAlertDialogOverlay, -} from 'common/components/InvAlertDialog/wrapper'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvText } from 'common/components/InvText/wrapper'; import { selectCanvasSlice } from 'features/canvas/store/canvasSlice'; import { selectControlAdaptersSlice } from 'features/controlAdapters/store/controlAdaptersSlice'; import ImageUsageMessage from 'features/deleteImageModal/components/ImageUsageMessage'; @@ -117,19 +118,19 @@ const DeleteBoardModal = (props: Props) => { } return ( - - - - + + + {t('controlnet.delete')} {boardToDelete.board_name} - + - + {isFetchingBoardNames ? ( @@ -142,38 +143,38 @@ const DeleteBoardModal = (props: Props) => { bottomMessage={t('boards.bottomMessage')} /> )} - {t('boards.deletedBoardsCannotbeRestored')} - + {t('boards.deletedBoardsCannotbeRestored')} + {canRestoreDeletedImagesFromBin ? t('gallery.deleteImageBin') : t('gallery.deleteImagePermanent')} - + - - + + - + - - - - + + + + ); }; diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx index 014e1066bb..70e22a920c 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx @@ -1,4 +1,4 @@ -import { InvMenuItem } from 'common/components/InvMenu/InvMenuItem'; +import { MenuItem } from '@invoke-ai/ui'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { PiTrashSimpleBold } from 'react-icons/pi'; @@ -20,13 +20,13 @@ const GalleryBoardContextMenuItems = ({ board, setBoardToDelete }: Props) => { return ( <> - } onClick={handleDelete} > {t('boards.deleteBoard')} - + ); }; diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx index 32915eae8a..1dc4ca2265 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx @@ -1,13 +1,16 @@ -import { Flex } from '@chakra-ui/react'; +import { + ButtonGroup, + Flex, + IconButton, + Menu, + MenuButton, + MenuList, +} from '@invoke-ai/ui'; import { createSelector } from '@reduxjs/toolkit'; import { skipToken } from '@reduxjs/toolkit/query'; import { useAppToaster } from 'app/components/Toaster'; import { upscaleRequested } from 'app/store/middleware/listenerMiddleware/listeners/upscaleRequested'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup'; -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; -import { InvMenuList } from 'common/components/InvMenu/InvMenuList'; -import { InvMenu, InvMenuButton } from 'common/components/InvMenu/wrapper'; import { DeleteImageButton } from 'features/deleteImageModal/components/DeleteImageButton'; import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice'; import SingleSelectionMenuItems from 'features/gallery/components/ImageContextMenu/SingleSelectionMenuItems'; @@ -204,23 +207,23 @@ const CurrentImageButtons = () => { return ( <> - - - + + } /> - + {imageDTO && } - - - + + + - - + } tooltip={`${t('nodes.loadWorkflow')} (W)`} aria-label={`${t('nodes.loadWorkflow')} (W)`} @@ -228,7 +231,7 @@ const CurrentImageButtons = () => { onClick={handleLoadWorkflow} isLoading={getAndLoadEmbeddedWorkflowResult.isLoading} /> - } tooltip={`${t('parameters.usePrompt')} (P)`} @@ -236,7 +239,7 @@ const CurrentImageButtons = () => { isDisabled={!metadata?.positive_prompt} onClick={handleUsePrompt} /> - } tooltip={`${t('parameters.useSeed')} (S)`} @@ -244,7 +247,7 @@ const CurrentImageButtons = () => { isDisabled={metadata?.seed === null || metadata?.seed === undefined} onClick={handleUseSeed} /> - } tooltip={`${t('parameters.useSize')} (D)`} @@ -257,7 +260,7 @@ const CurrentImageButtons = () => { } onClick={handleUseSize} /> - } tooltip={`${t('parameters.useAll')} (A)`} @@ -265,37 +268,37 @@ const CurrentImageButtons = () => { isDisabled={!metadata} onClick={handleClickUseAllParameters} /> - + {isUpscalingEnabled && ( - + {isUpscalingEnabled && } - + )} - - + } tooltip={`${t('parameters.info')} (I)`} aria-label={`${t('parameters.info')} (I)`} isChecked={shouldShowImageDetails} onClick={handleClickShowImageDetails} /> - + - - + } isChecked={shouldShowProgressInViewer} onClick={handleClickProgressImagesToggle} /> - + - + - + ); diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageDisplay.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageDisplay.tsx index 3341131a07..5d7a3755c3 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageDisplay.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageDisplay.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@chakra-ui/react'; +import { Flex } from '@invoke-ai/ui'; import { memo } from 'react'; import CurrentImageButtons from './CurrentImageButtons'; diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx index a609c8a7d8..1496562d5e 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx @@ -1,4 +1,4 @@ -import { Box, Flex } from '@chakra-ui/react'; +import { Box, Flex } from '@invoke-ai/ui'; import { createSelector } from '@reduxjs/toolkit'; import { skipToken } from '@reduxjs/toolkit/query'; import { useAppSelector } from 'app/store/storeHooks'; diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx index 94147e6751..6cb5ee05be 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx @@ -1,5 +1,5 @@ -import type { SystemStyleObject } from '@chakra-ui/react'; -import { Image } from '@chakra-ui/react'; +import type { SystemStyleObject } from '@invoke-ai/ui'; +import { Image } from '@invoke-ai/ui'; import { useAppSelector } from 'app/store/storeHooks'; import { memo, useMemo } from 'react'; diff --git a/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx b/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx index a91b7d557f..97e8f740ef 100644 --- a/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx @@ -1,5 +1,5 @@ import { ChevronUpIcon } from '@chakra-ui/icons'; -import { Button, Flex, Spacer } from '@chakra-ui/react'; +import { Button, Flex, Spacer } from '@invoke-ai/ui'; import { useAppSelector } from 'app/store/storeHooks'; import { memo, useMemo } from 'react'; import { useBoardName } from 'services/api/hooks/useBoardName'; diff --git a/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx b/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx index 0554f87f45..8056a34f9c 100644 --- a/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx @@ -1,16 +1,17 @@ -import { Flex } from '@chakra-ui/react'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvCheckbox } from 'common/components/InvCheckbox/wrapper'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; import { - InvPopover, - InvPopoverBody, - InvPopoverContent, - InvPopoverTrigger, -} from 'common/components/InvPopover/wrapper'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; -import { InvSwitch } from 'common/components/InvSwitch/wrapper'; + Checkbox, + CompositeSlider, + Flex, + FormControl, + FormLabel, + IconButton, + Popover, + PopoverBody, + PopoverContent, + PopoverTrigger, + Switch, +} from '@invoke-ai/ui'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { autoAssignBoardOnClickChanged, setGalleryImageMinimumWidth, @@ -55,44 +56,47 @@ const GallerySettingsPopover = () => { ); return ( - - - + + } /> - - - + + + - - + {t('gallery.galleryImageSize')} + - - - + + {t('gallery.autoSwitchNewImages')} + - - - + + {t('gallery.autoAssignBoardOnClick')} + - + - - - + + + ); }; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx index f38fa8aeb2..ada0d7bf61 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx @@ -1,7 +1,6 @@ +import type { ContextMenuProps } from '@invoke-ai/ui'; +import { ContextMenu, MenuList } from '@invoke-ai/ui'; import { useAppSelector } from 'app/store/storeHooks'; -import type { InvContextMenuProps } from 'common/components/InvContextMenu/InvContextMenu'; -import { InvContextMenu } from 'common/components/InvContextMenu/InvContextMenu'; -import { InvMenuList } from 'common/components/InvMenu/InvMenuList'; import { memo, useCallback } from 'react'; import type { ImageDTO } from 'services/api/types'; @@ -10,7 +9,7 @@ import SingleSelectionMenuItems from './SingleSelectionMenuItems'; type Props = { imageDTO: ImageDTO | undefined; - children: InvContextMenuProps['children']; + children: ContextMenuProps['children']; }; const ImageContextMenu = ({ imageDTO, children }: Props) => { @@ -23,22 +22,20 @@ const ImageContextMenu = ({ imageDTO, children }: Props) => { if (selectionCount > 1) { return ( - + - + ); } return ( - + - + ); }, [imageDTO, selectionCount]); - return ( - {children} - ); + return {children}; }; export default memo(ImageContextMenu); diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx index 86967af520..bf30bd2565 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx @@ -1,8 +1,7 @@ +import { MenuDivider, MenuItem } from '@invoke-ai/ui'; import { useStore } from '@nanostores/react'; import { $customStarUI } from 'app/store/nanostores/customStarUI'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvMenuItem } from 'common/components/InvMenu/InvMenuItem'; -import { InvMenuDivider } from 'common/components/InvMenu/wrapper'; import { imagesToChangeSelected, isModalOpenChanged, @@ -95,40 +94,40 @@ const MultipleSelectionMenuItems = () => { return ( <> {areAllStarred && ( - } onClickCapture={handleUnstarSelection} > {customStarUi ? customStarUi.off.text : `Unstar All`} - + )} {(areAllUnstarred || (!areAllStarred && !areAllUnstarred)) && ( - } onClickCapture={handleStarSelection} > {customStarUi ? customStarUi.on.text : `Star All`} - + )} {isBulkDownloadEnabled && ( - } onClickCapture={handleBulkDownload} > {t('gallery.downloadSelection')} - + )} - } onClickCapture={handleChangeBoard}> + } onClickCapture={handleChangeBoard}> {t('boards.changeBoard')} - - - + + } onClickCapture={handleDeleteSelection} > {t('gallery.deleteSelection')} - + ); }; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx index 17c37aae1a..acd70e2c64 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx @@ -1,10 +1,8 @@ -import { Flex, Spinner } from '@chakra-ui/react'; +import { Flex, MenuDivider, MenuItem, Spinner } from '@invoke-ai/ui'; import { useStore } from '@nanostores/react'; import { useAppToaster } from 'app/components/Toaster'; import { $customStarUI } from 'app/store/nanostores/customStarUI'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvMenuItem } from 'common/components/InvMenu/InvMenuItem'; -import { InvMenuDivider } from 'common/components/InvMenu/wrapper'; import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard'; import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice'; import { @@ -152,20 +150,20 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => { return ( <> - } > {t('common.openInNewTab')} - + {isClipboardAPIAvailable && ( - } onClickCapture={handleCopyImage}> + } onClickCapture={handleCopyImage}> {t('parameters.copyImage')} - + )} - { w="100%" > {t('parameters.downloadImage')} - - - + + @@ -188,8 +186,8 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => { isDisabled={!imageDTO.has_workflow} > {t('nodes.loadWorkflow')} - - + : } onClickCapture={handleRecallPrompt} isDisabled={ @@ -199,65 +197,65 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => { } > {t('parameters.usePrompt')} - - + : } onClickCapture={handleRecallSeed} isDisabled={isLoadingMetadata || metadata?.seed === undefined} > {t('parameters.useSeed')} - - + : } onClickCapture={handleUseAllParameters} isDisabled={isLoadingMetadata || !metadata} > {t('parameters.useAll')} - - - + + } onClickCapture={handleSendToImageToImage} id="send-to-img2img" > {t('parameters.sendToImg2Img')} - + {isCanvasEnabled && ( - } onClickCapture={handleSendToCanvas} id="send-to-canvas" > {t('parameters.sendToUnifiedCanvas')} - + )} - - } onClickCapture={handleChangeBoard}> + + } onClickCapture={handleChangeBoard}> {t('boards.changeBoard')} - + {imageDTO.starred ? ( - } onClickCapture={handleUnstarImage} > {customStarUi ? customStarUi.off.text : t('gallery.unstarImage')} - + ) : ( - } onClickCapture={handleStarImage} > {customStarUi ? customStarUi.on.text : t('gallery.starImage')} - + )} - - + } onClickCapture={handleDelete} > {t('gallery.deleteImage')} - + ); }; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx index 458661b3f3..aad3bfeecc 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx @@ -1,17 +1,17 @@ import { Box, + Button, + ButtonGroup, Flex, Tab, TabList, Tabs, useDisclosure, VStack, -} from '@chakra-ui/react'; +} from '@invoke-ai/ui'; import { useStore } from '@nanostores/react'; import { $galleryHeader } from 'app/store/nanostores/galleryHeader'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup'; import { galleryViewChanged } from 'features/gallery/store/gallerySlice'; import { memo, useCallback, useRef } from 'react'; import { useTranslation } from 'react-i18next'; @@ -77,9 +77,9 @@ const ImageGalleryContent = () => { w="full" > - + { {t('parameters.images')} { > {t('gallery.assets')} - + diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx index dceedaff27..893c419223 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx @@ -1,5 +1,5 @@ -import type { SystemStyleObject } from '@chakra-ui/react'; -import { Box, Flex } from '@chakra-ui/react'; +import type { SystemStyleObject } from '@invoke-ai/ui'; +import { Box, Flex } from '@invoke-ai/ui'; import { useStore } from '@nanostores/react'; import { $customStarUI } from 'app/store/nanostores/customStarUI'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx index fffa3d98e0..06f36784dd 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx @@ -1,8 +1,7 @@ -import { Box, Flex } from '@chakra-ui/react'; +import { Box, Button, Flex } from '@invoke-ai/ui'; import type { EntityId } from '@reduxjs/toolkit'; import { useAppSelector } from 'app/store/storeHooks'; import { IAINoContentFallback } from 'common/components/IAIImageFallback'; -import { InvButton } from 'common/components/InvButton/InvButton'; import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; import { virtuosoGridRefs } from 'features/gallery/components/ImageGrid/types'; import { useGalleryHotkeys } from 'features/gallery/hooks/useGalleryHotkeys'; @@ -120,7 +119,7 @@ const GalleryImageGrid = () => { overscan={10} /> - { flexShrink={0} > {`Load More (${currentData.ids.length} of ${currentViewTotal})`} - + ); } diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx index 6d793a767a..26247cc864 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx @@ -1,5 +1,5 @@ -import type { FlexProps } from '@chakra-ui/react'; -import { Box, forwardRef } from '@chakra-ui/react'; +import type { FlexProps } from '@invoke-ai/ui'; +import { Box, forwardRef } from '@invoke-ai/ui'; import type { PropsWithChildren } from 'react'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx index 678748e8df..58d074712f 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx @@ -1,5 +1,5 @@ -import type { FlexProps } from '@chakra-ui/react'; -import { forwardRef, Grid } from '@chakra-ui/react'; +import type { FlexProps } from '@invoke-ai/ui'; +import { forwardRef, Grid } from '@invoke-ai/ui'; import { useAppSelector } from 'app/store/storeHooks'; import type { PropsWithChildren } from 'react'; import { memo } from 'react'; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx index bc814605b6..23c59f3af4 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx @@ -1,6 +1,4 @@ -import { Box, Flex } from '@chakra-ui/react'; -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; -import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; +import { Box, Flex, IconButton, Tooltip } from '@invoke-ai/ui'; import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; import { isString } from 'lodash-es'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; @@ -69,26 +67,26 @@ const DataViewer = (props: Props) => { {withDownload && ( - - + } variant="ghost" opacity={0.7} onClick={handleDownload} /> - + )} {withCopy && ( - - + } variant="ghost" opacity={0.7} onClick={handleCopy} /> - + )} diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx index f61a1ae656..96154e1729 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx @@ -1,8 +1,5 @@ import { ExternalLinkIcon } from '@chakra-ui/icons'; -import { Flex, Link } from '@chakra-ui/react'; -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; -import { InvText } from 'common/components/InvText/wrapper'; -import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; +import { Flex, IconButton, Link, Text, Tooltip } from '@invoke-ai/ui'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { IoArrowUndoCircleOutline } from 'react-icons/io5'; @@ -42,8 +39,8 @@ const ImageMetadataItem = ({ return ( {onClick && ( - - + } size="xs" @@ -51,11 +48,11 @@ const ImageMetadataItem = ({ fontSize={20} onClick={onClick} /> - + )} {withCopy && ( - - + } size="xs" @@ -63,20 +60,20 @@ const ImageMetadataItem = ({ fontSize={14} onClick={handleCopy} /> - + )} - + {label}: - + {isLink ? ( {value.toString()} ) : ( - + {value.toString()} - + )} diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx index f6ad443142..52770458f7 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx @@ -7,9 +7,9 @@ import { TabPanel, TabPanels, Tabs, -} from '@chakra-ui/react'; + Text, +} from '@invoke-ai/ui'; import { IAINoContentFallback } from 'common/components/IAIImageFallback'; -import { InvText } from 'common/components/InvText/wrapper'; import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -47,7 +47,7 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => { overflow="hidden" > - {t('common.file')}: + {t('common.file')}: {image.image_name} diff --git a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx index 6163e595c9..350ac9be1c 100644 --- a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx @@ -1,6 +1,5 @@ -import type { ChakraProps } from '@chakra-ui/react'; -import { Box, Flex, Spinner } from '@chakra-ui/react'; -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; +import type { ChakraProps } from '@invoke-ai/ui'; +import { Box, Flex, IconButton, Spinner } from '@invoke-ai/ui'; import { useGalleryImages } from 'features/gallery/hooks/useGalleryImages'; import { useGalleryNavigation } from 'features/gallery/hooks/useGalleryNavigation'; import { memo } from 'react'; @@ -37,7 +36,7 @@ const NextPrevImageButtons = () => { insetInlineStart={1} > {!isOnFirstImage && ( - } variant="unstyled" @@ -54,7 +53,7 @@ const NextPrevImageButtons = () => { insetInlineEnd={6} > {!isOnLastImage && ( - } variant="unstyled" @@ -64,7 +63,7 @@ const NextPrevImageButtons = () => { /> )} {isOnLastImage && areMoreImagesAvailable && !isFetching && ( - } variant="unstyled" diff --git a/invokeai/frontend/web/src/features/hrf/components/HrfSettings.tsx b/invokeai/frontend/web/src/features/hrf/components/HrfSettings.tsx index b2517dc09c..cca4c49259 100644 --- a/invokeai/frontend/web/src/features/hrf/components/HrfSettings.tsx +++ b/invokeai/frontend/web/src/features/hrf/components/HrfSettings.tsx @@ -1,5 +1,5 @@ +import { FormControlGroup } from '@invoke-ai/ui'; import { useAppSelector } from 'app/store/storeHooks'; -import { InvControlGroup } from 'common/components/InvControl/InvControlGroup'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { memo } from 'react'; @@ -18,10 +18,10 @@ export const HrfSettings = memo(() => { return ( <> - + - + ); }); diff --git a/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx b/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx index 6eafd57a2d..f13c041f79 100644 --- a/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx +++ b/invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx @@ -1,16 +1,12 @@ +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSelect } from 'common/components/InvSelect/InvSelect'; -import type { - InvSelectOnChange, - InvSelectOption, -} from 'common/components/InvSelect/types'; import { setHrfMethod } from 'features/hrf/store/hrfSlice'; import { isParameterHRFMethod } from 'features/parameters/types/parameterSchemas'; import { memo, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -const options: InvSelectOption[] = [ +const options: ComboboxOption[] = [ { label: 'ESRGAN', value: 'ESRGAN' }, { label: 'bilinear', value: 'bilinear' }, ]; @@ -20,7 +16,7 @@ const ParamHrfMethodSelect = () => { const { t } = useTranslation(); const hrfMethod = useAppSelector((s) => s.hrf.hrfMethod); - const onChange = useCallback( + const onChange = useCallback( (v) => { if (!isParameterHRFMethod(v?.value)) { return; @@ -36,9 +32,10 @@ const ParamHrfMethodSelect = () => { ); return ( - - - + + {t('hrf.upscaleMethod')} + + ); }; diff --git a/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx b/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx index a41e096148..3033b6f578 100644 --- a/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx +++ b/invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx @@ -1,6 +1,10 @@ +import { + CompositeNumberInput, + CompositeSlider, + FormControl, + FormLabel, +} from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; import { setHrfStrength } from 'features/hrf/store/hrfSlice'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; @@ -29,8 +33,9 @@ const ParamHrfStrength = () => { ); return ( - - + {t('parameters.denoisingStrength')} + { defaultValue={initial} onChange={onChange} marks - withNumberInput - numberInputMin={numberInputMin} - numberInputMax={numberInputMax} /> - + + ); }; diff --git a/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx b/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx index 3099fb8027..47ce6190fc 100644 --- a/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx +++ b/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx @@ -1,7 +1,5 @@ +import { FormControl, FormLabel, Switch } from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import type { InvLabelProps } from 'common/components/InvControl/types'; -import { InvSwitch } from 'common/components/InvSwitch/wrapper'; import { setHrfEnabled } from 'features/hrf/store/hrfSlice'; import type { ChangeEvent } from 'react'; import { memo, useCallback } from 'react'; @@ -20,12 +18,11 @@ const ParamHrfToggle = () => { ); return ( - - - + + {t('hrf.enableHrf')} + + ); }; -const labelProps: InvLabelProps = { flexGrow: 1 }; - export default memo(ParamHrfToggle); diff --git a/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx b/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx index 4c9c9e96fb..7f58297cd5 100644 --- a/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx +++ b/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx @@ -1,13 +1,13 @@ -import { useAppDispatch } from 'app/store/storeHooks'; import { - InvCard, - InvCardBody, - InvCardHeader, -} from 'common/components/InvCard/wrapper'; -import { InvLabel } from 'common/components/InvControl/InvLabel'; -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; -import { InvNumberInput } from 'common/components/InvNumberInput/InvNumberInput'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; + Card, + CardBody, + CardHeader, + CompositeNumberInput, + CompositeSlider, + FormLabel, + IconButton, +} from '@invoke-ai/ui'; +import { useAppDispatch } from 'app/store/storeHooks'; import type { LoRA } from 'features/lora/store/loraSlice'; import { loraRemoved, loraWeightChanged } from 'features/lora/store/loraSlice'; import { memo, useCallback } from 'react'; @@ -33,21 +33,21 @@ export const LoRACard = memo((props: LoRACardProps) => { }, [dispatch, lora.id]); return ( - - - + + + {lora.model_name} - - + } /> - - - + + { marks={marks} defaultValue={0.75} /> - { flexShrink={0} defaultValue={0.75} /> - - + + ); }); diff --git a/invokeai/frontend/web/src/features/lora/components/LoRAList.tsx b/invokeai/frontend/web/src/features/lora/components/LoRAList.tsx index 6eb889b874..4804cf76c6 100644 --- a/invokeai/frontend/web/src/features/lora/components/LoRAList.tsx +++ b/invokeai/frontend/web/src/features/lora/components/LoRAList.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@chakra-ui/layout'; +import { Flex } from '@invoke-ai/ui'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { LoRACard } from 'features/lora/components/LoRACard'; diff --git a/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx b/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx index 0655fed3df..8b51e6876e 100644 --- a/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx +++ b/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx @@ -1,9 +1,8 @@ -import type { ChakraProps } from '@chakra-ui/react'; +import type { ChakraProps } from '@invoke-ai/ui'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSelect } from 'common/components/InvSelect/InvSelect'; -import { useGroupedModelInvSelect } from 'common/components/InvSelect/useGroupedModelInvSelect'; +import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox'; import { loraAdded, selectLoraSlice } from 'features/lora/store/loraSlice'; import { memo, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -41,7 +40,7 @@ const LoRASelect = () => { [dispatch] ); - const { options, onChange } = useGroupedModelInvSelect({ + const { options, onChange } = useGroupedModelCombobox({ modelEntities: data, getIsDisabled, onChange: _onChange, @@ -62,8 +61,9 @@ const LoRASelect = () => { const noOptionsMessage = useCallback(() => t('models.noMatchingLoRAs'), [t]); return ( - - + {t('models.lora')} + { data-testid="add-lora" sx={selectStyles} /> - + ); }; diff --git a/invokeai/frontend/web/src/features/lora/components/styles.ts b/invokeai/frontend/web/src/features/lora/components/styles.ts deleted file mode 100644 index 310ba5db96..0000000000 --- a/invokeai/frontend/web/src/features/lora/components/styles.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { cardAnatomy } from '@chakra-ui/anatomy'; -import { createMultiStyleConfigHelpers } from '@chakra-ui/react'; - -const { definePartsStyle } = createMultiStyleConfigHelpers(cardAnatomy.keys); - -export const cardVariantLora = definePartsStyle({ - container: { - backgroundColor: 'base.750', - p: 4, - gap: 2, - borderRadius: 'base', - minW: 64, - flexBasis: 1, - flexGrow: 1, - }, - header: { - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - p: 0, - fontSize: 'md', - fontWeight: 'semibold', - }, - body: { - p: 0, - display: 'flex', - alignItems: 'center', - gap: 4, - }, - footer: { - p: 0, - }, -}); diff --git a/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsButton.tsx b/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsButton.tsx index 06875df44e..0fd2bdb3a6 100644 --- a/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsButton.tsx +++ b/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsButton.tsx @@ -1,5 +1,5 @@ -import { InvButton } from 'common/components/InvButton/InvButton'; -import type { InvButtonProps } from 'common/components/InvButton/types'; +import type { ButtonProps } from '@invoke-ai/ui'; +import { Button } from '@invoke-ai/ui'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -7,28 +7,26 @@ import { PiArrowsClockwiseBold } from 'react-icons/pi'; import { useSyncModels } from './useSyncModels'; -export const SyncModelsButton = memo( - (props: Omit) => { - const { t } = useTranslation(); - const { syncModels, isLoading } = useSyncModels(); - const isSyncModelEnabled = useFeatureStatus('syncModels').isFeatureEnabled; +export const SyncModelsButton = memo((props: Omit) => { + const { t } = useTranslation(); + const { syncModels, isLoading } = useSyncModels(); + const isSyncModelEnabled = useFeatureStatus('syncModels').isFeatureEnabled; - if (!isSyncModelEnabled) { - return null; - } - - return ( - } - minW="max-content" - {...props} - > - {t('modelManager.syncModels')} - - ); + if (!isSyncModelEnabled) { + return null; } -); + + return ( + + ); +}); SyncModelsButton.displayName = 'SyncModelsButton'; diff --git a/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx b/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx index 33b0c97c32..0bff475673 100644 --- a/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx +++ b/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx @@ -1,5 +1,5 @@ -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; -import type { InvIconButtonProps } from 'common/components/InvIconButton/types'; +import type { IconButtonProps } from '@invoke-ai/ui'; +import { IconButton } from '@invoke-ai/ui'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -8,7 +8,7 @@ import { PiArrowsClockwiseBold } from 'react-icons/pi'; import { useSyncModels } from './useSyncModels'; export const SyncModelsIconButton = memo( - (props: Omit) => { + (props: Omit) => { const { t } = useTranslation(); const { syncModels, isLoading } = useSyncModels(); const isSyncModelEnabled = useFeatureStatus('syncModels').isFeatureEnabled; @@ -18,7 +18,7 @@ export const SyncModelsIconButton = memo( } return ( - } tooltip={t('modelManager.syncModels')} aria-label={t('modelManager.syncModels')} diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx index 7fe19312cc..c3e85a3a5b 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx @@ -1,6 +1,4 @@ -import { Flex } from '@chakra-ui/react'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup'; +import { Button, ButtonGroup, Flex } from '@invoke-ai/ui'; import { memo, useCallback, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -25,22 +23,22 @@ const AddModels = () => { maxHeight={window.innerHeight - 250} gap={4} > - - + + {addModelMode === 'simple' && } {addModelMode === 'advanced' && } diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx index 26798c7574..1278f31667 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx @@ -1,9 +1,12 @@ -import { Flex } from '@chakra-ui/react'; +import { + Button, + Checkbox, + Flex, + FormControl, + FormLabel, + Input, +} from '@invoke-ai/ui'; import { useAppDispatch } from 'app/store/storeHooks'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvCheckbox } from 'common/components/InvCheckbox/wrapper'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvInput } from 'common/components/InvInput/InvInput'; import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice'; import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect'; import CheckpointConfigsSelect from 'features/modelManager/subpanels/shared/CheckpointConfigsSelect'; @@ -117,41 +120,43 @@ const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => { return (
- - {t('modelManager.model')} + value.trim().length > 3 || 'Must be at least 3 characters', })} /> - + control={control} name="base_model" /> - - {t('modelManager.modelLocation')} + value.trim().length > 0 || 'Must provide a path', onBlur, })} /> - - - - - - - + + + {t('modelManager.description')} + + + + {t('modelManager.vaeLocation')} + + control={control} name="variant" @@ -160,19 +165,21 @@ const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => { {!useCustomConfig ? ( ) : ( - - - + + {t('modelManager.config')} + + )} - - + {t('modelManager.useCustomConfig')} + - - + +
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx index 0797a3e9da..2938662150 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx @@ -1,8 +1,5 @@ -import { Flex } from '@chakra-ui/react'; +import { Button, Flex, FormControl, FormLabel, Input } from '@invoke-ai/ui'; import { useAppDispatch } from 'app/store/storeHooks'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvInput } from 'common/components/InvInput/InvInput'; import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice'; import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect'; import ModelVariantSelect from 'features/modelManager/subpanels/shared/ModelVariantSelect'; @@ -106,51 +103,54 @@ const AdvancedAddDiffusers = (props: AdvancedAddDiffusersProps) => { return (
- - {t('modelManager.name')} + value.trim().length > 3 || 'Must be at least 3 characters', })} /> - - + + + {t('modelManager.baseModel')} control={control} name="base_model" /> - - + - {t('modelManager.modelLocation')} + value.trim().length > 0 || 'Must provide a path', onBlur, })} /> - - - - - - - + + + {t('modelManager.description')} + + + + {t('modelManager.vaeLocation')} + + control={control} name="variant" /> - +
); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx index f9a63e498f..7ea4c68370 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx @@ -1,10 +1,5 @@ -import { Flex } from '@chakra-ui/react'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSelect } from 'common/components/InvSelect/InvSelect'; -import type { - InvSelectOnChange, - InvSelectOption, -} from 'common/components/InvSelect/types'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; +import { Combobox, Flex, FormControl, FormLabel } from '@invoke-ai/ui'; import { memo, useCallback, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { z } from 'zod'; @@ -22,14 +17,14 @@ const AdvancedAddModels = () => { useState('diffusers'); const { t } = useTranslation(); - const handleChange: InvSelectOnChange = useCallback((v) => { + const handleChange: ComboboxOnChange = useCallback((v) => { if (!isManualAddMode(v?.value)) { return; } setAdvancedAddMode(v.value); }, []); - const options: InvSelectOption[] = useMemo( + const options: ComboboxOption[] = useMemo( () => [ { label: t('modelManager.diffusersModels'), value: 'diffusers' }, { label: t('modelManager.checkpointOrSafetensors'), value: 'checkpoint' }, @@ -44,9 +39,10 @@ const AdvancedAddModels = () => { return ( - - - + + {t('modelManager.modelType')} + + {advancedAddMode === 'diffusers' && } diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx index 323c2b8039..9f58558d7a 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx @@ -1,9 +1,12 @@ -import { Flex } from '@chakra-ui/react'; +import { + Button, + Flex, + FormControl, + FormLabel, + Input, + Text, +} from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvInput } from 'common/components/InvInput/InvInput'; -import { InvText } from 'common/components/InvText/wrapper'; import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent'; import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice'; import { addToast } from 'features/system/store/systemSlice'; @@ -115,31 +118,29 @@ const FoundModelsList = () => { bg="base.800" > - - {model.split('\\').slice(-1)[0]} - - + {model.split('\\').slice(-1)[0]} + {model} - + {showActions ? ( - {t('modelManager.quickAdd')} - - + ) : ( - { bg="invokeBlue.600" > {t('common.installed')} - + )} ); @@ -170,23 +171,24 @@ const FoundModelsList = () => { userSelect="none" bg="base.900" > - {t('modelManager.noModels')} + {t('modelManager.noModels')} ); } return ( - - - + + {t('modelManager.search')} + + - + {t('modelManager.modelsFound')}: {foundModels.length} - - + + {t('common.notInstalled')}: {filteredModels.length} - + diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx index 1cf11478c5..933a3c8498 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx @@ -1,13 +1,14 @@ -import { Box, Flex } from '@chakra-ui/react'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; +import { + Box, + Combobox, + Flex, + FormControl, + FormLabel, + IconButton, + Text, +} from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; -import { InvSelect } from 'common/components/InvSelect/InvSelect'; -import type { - InvSelectOnChange, - InvSelectOption, -} from 'common/components/InvSelect/types'; -import { InvText } from 'common/components/InvText/wrapper'; import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice'; import { memo, useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -25,7 +26,7 @@ const ScanAdvancedAddModels = () => { const { t } = useTranslation(); - const options: InvSelectOption[] = useMemo( + const options: ComboboxOption[] = useMemo( () => [ { label: t('modelManager.diffusersModels'), value: 'diffusers' }, { label: t('modelManager.checkpointOrSafetensors'), value: 'checkpoint' }, @@ -54,7 +55,7 @@ const ScanAdvancedAddModels = () => { [dispatch] ); - const handleChangeAddMode = useCallback((v) => { + const handleChangeAddMode = useCallback((v) => { if (!isManualAddMode(v?.value)) { return; } @@ -88,25 +89,26 @@ const ScanAdvancedAddModels = () => { bg="base.800" > - + {isCheckpoint || advancedAddMode === 'checkpoint' ? 'Add Checkpoint Model' : 'Add Diffusers Model'} - - + } aria-label={t('modelManager.closeAdvanced')} onClick={handleClickSetAdvanced} size="sm" /> - - + {t('modelManager.modelType')} + - + {isCheckpoint ? ( - {t('common.folder')} - + {!searchFolder ? ( - {!searchFolder ? ( - } @@ -103,7 +100,7 @@ function SearchFolderForm() { type="submit" /> ) : ( - } @@ -113,7 +110,7 @@ function SearchFolderForm() { /> )} - } diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx index df23d1c4e2..8b7367153e 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx @@ -1,11 +1,14 @@ -import { Flex } from '@chakra-ui/react'; +import type { ComboboxOption } from '@invoke-ai/ui'; +import { + Button, + Combobox, + Flex, + FormControl, + FormLabel, + Input, +} from '@invoke-ai/ui'; import { useForm } from '@mantine/form'; import { useAppDispatch } from 'app/store/storeHooks'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvInput } from 'common/components/InvInput/InvInput'; -import { InvSelect } from 'common/components/InvSelect/InvSelect'; -import type { InvSelectOption } from 'common/components/InvSelect/types'; import { addToast } from 'features/system/store/systemSlice'; import { makeToast } from 'features/system/util/makeToast'; import type { CSSProperties } from 'react'; @@ -13,7 +16,7 @@ import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { useImportMainModelsMutation } from 'services/api/endpoints/models'; -const options: InvSelectOption[] = [ +const options: ComboboxOption[] = [ { label: 'None', value: 'none' }, { label: 'v_prediction', value: 'v_prediction' }, { label: 'epsilon', value: 'epsilon' }, @@ -78,23 +81,25 @@ const SimpleAddModels = () => { style={formStyles} > - - + {t('modelManager.modelLocation')} + - - - + + {t('modelManager.predictionType')} + - - + + ); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx index 51ad6ab566..370af663f3 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx @@ -1,6 +1,4 @@ -import { Flex } from '@chakra-ui/react'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup'; +import { Button, ButtonGroup, Flex } from '@invoke-ai/ui'; import { memo, useCallback, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -18,16 +16,16 @@ const ImportModelsPanel = () => { return ( - - + + {addModelTab == 'add' && } {addModelTab == 'scan' && } diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx index 7418f2bc22..94d6574c0e 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx @@ -1,17 +1,20 @@ -import { Flex, Radio, RadioGroup } from '@chakra-ui/react'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; +import { + Button, + Checkbox, + Combobox, + CompositeNumberInput, + CompositeSlider, + Flex, + FormControl, + FormLabel, + Input, + Radio, + RadioGroup, + Text, + Tooltip, +} from '@invoke-ai/ui'; import { useAppDispatch } from 'app/store/storeHooks'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvCheckbox } from 'common/components/InvCheckbox/wrapper'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvInput } from 'common/components/InvInput/InvInput'; -import { InvSelect } from 'common/components/InvSelect/InvSelect'; -import type { - InvSelectOnChange, - InvSelectOption, -} from 'common/components/InvSelect/types'; -import { InvSlider } from 'common/components/InvSlider/InvSlider'; -import { InvText } from 'common/components/InvText/wrapper'; -import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; import { addToast } from 'features/system/store/systemSlice'; import { makeToast } from 'features/system/util/makeToast'; import { pickBy } from 'lodash-es'; @@ -25,7 +28,7 @@ import { } from 'services/api/endpoints/models'; import type { BaseModelType, MergeModelConfig } from 'services/api/types'; -const baseModelTypeSelectOptions: InvSelectOption[] = [ +const baseModelTypeSelectOptions: ComboboxOption[] = [ { label: 'Stable Diffusion 1', value: 'sd-1' }, { label: 'Stable Diffusion 2', value: 'sd-2' }, ]; @@ -115,7 +118,7 @@ const MergeModelsPanel = () => { [modelsMap, baseModel, modelOne, modelTwo] ); - const onChangeBaseModel = useCallback((v) => { + const onChangeBaseModel = useCallback((v) => { if (!v) { return; } @@ -127,19 +130,19 @@ const MergeModelsPanel = () => { setModelTwo(null); }, []); - const onChangeModelOne = useCallback((v) => { + const onChangeModelOne = useCallback((v) => { if (!v) { return; } setModelOne(v.value); }, []); - const onChangeModelTwo = useCallback((v) => { + const onChangeModelTwo = useCallback((v) => { if (!v) { return; } setModelTwo(v.value); }, []); - const onChangeModelThree = useCallback((v) => { + const onChangeModelThree = useCallback((v) => { if (!v) { setModelThree(null); setModelMergeInterp('add_difference'); @@ -261,50 +264,52 @@ const MergeModelsPanel = () => { return ( - {t('modelManager.modelMergeHeaderHelp1')} - + {t('modelManager.modelMergeHeaderHelp1')} + {t('modelManager.modelMergeHeaderHelp2')} - + - - + {t('modelManager.modelType')} + - - - + + {t('modelManager.modelOne')} + - - - + + {t('modelManager.modelTwo')} + - - - + + {t('modelManager.modelThree')} + - + - - - + + {t('modelManager.mergedModelName')} + + { gap={4} bg="base.800" > - - + {t('modelManager.alpha')} + - + + - + {t('modelManager.interpolationType')} - + {modelThree === null ? ( <> - - {t('modelManager.weightedSum')} - + {t('modelManager.weightedSum')} - {t('modelManager.sigmoid')} + {t('modelManager.sigmoid')} - - {t('modelManager.inverseSigmoid')} - + {t('modelManager.inverseSigmoid')} ) : ( - - - {t('modelManager.addDifference')} - - + {t('modelManager.addDifference')} + )} @@ -375,51 +379,53 @@ const MergeModelsPanel = () => { bg="base.900" > - + {t('modelManager.mergedModelSaveLocation')} - + - - {t('modelManager.invokeAIFolder')} - + {t('modelManager.invokeAIFolder')} - {t('modelManager.custom')} + {t('modelManager.custom')} {modelMergeSaveLocType === 'custom' && ( - - + + {t('modelManager.mergedModelCustomSaveLocation')} + + - + )} - - + {t('modelManager.ignoreMismatch')} + - + - {t('modelManager.merge')} - + ); }; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx index 974af0076f..55272a98cc 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx @@ -1,5 +1,4 @@ -import { Flex } from '@chakra-ui/react'; -import { InvText } from 'common/components/InvText/wrapper'; +import { Flex, Text } from '@invoke-ai/ui'; import { memo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { ALL_BASE_MODELS } from 'services/api/constants'; @@ -78,7 +77,7 @@ const ModelEdit = (props: ModelEditProps) => { maxH={96} userSelect="none" > - {t('modelManager.noModelSelected')} + {t('modelManager.noModelSelected')} ); }; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx index 096a05baab..b807cb0760 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx @@ -1,10 +1,15 @@ -import { Badge, Divider, Flex } from '@chakra-ui/react'; +import { + Badge, + Button, + Checkbox, + Divider, + Flex, + FormControl, + FormLabel, + Input, + Text, +} from '@invoke-ai/ui'; import { useAppDispatch } from 'app/store/storeHooks'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvCheckbox } from 'common/components/InvCheckbox/wrapper'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvInput } from 'common/components/InvInput/InvInput'; -import { InvText } from 'common/components/InvText/wrapper'; import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect'; import CheckpointConfigsSelect from 'features/modelManager/subpanels/shared/CheckpointConfigsSelect'; import ModelVariantSelect from 'features/modelManager/subpanels/shared/ModelVariantSelect'; @@ -110,12 +115,12 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => { - + {model.model_name} - - + + {MODEL_TYPE_MAP[model.base_model]} {t('modelManager.model')} - + {![''].includes(model.base_model) ? ( @@ -134,21 +139,22 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => { >
- - {t('modelManager.name')} + value.trim().length > 3 || 'Must be at least 3 characters', })} /> - - - - + + + {t('modelManager.description')} + + control={control} name="base_model" @@ -157,41 +163,44 @@ const CheckpointModelEdit = (props: CheckpointModelEditProps) => { control={control} name="variant" /> - - {t('modelManager.modelLocation')} + value.trim().length > 0 || 'Must provide a path', })} /> - - - - + + + {t('modelManager.vaeLocation')} + + {!useCustomConfig ? ( ) : ( - - - + + {t('modelManager.config')} + + )} - - + Use Custom Config + - + - +
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx index aa8032d055..03f7c7ffaf 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx @@ -1,9 +1,13 @@ -import { Divider, Flex } from '@chakra-ui/react'; +import { + Button, + Divider, + Flex, + FormControl, + FormLabel, + Input, + Text, +} from '@invoke-ai/ui'; import { useAppDispatch } from 'app/store/storeHooks'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvInput } from 'common/components/InvInput/InvInput'; -import { InvText } from 'common/components/InvText/wrapper'; import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect'; import ModelVariantSelect from 'features/modelManager/subpanels/shared/ModelVariantSelect'; import { MODEL_TYPE_MAP } from 'features/parameters/types/constants'; @@ -88,32 +92,33 @@ const DiffusersModelEdit = (props: DiffusersModelEditProps) => { return ( - + {model.model_name} - - + + {MODEL_TYPE_MAP[model.base_model]} {t('modelManager.model')} - +
- - {t('modelManager.name')} + value.trim().length > 3 || 'Must be at least 3 characters', })} /> - - - - + + + {t('modelManager.description')} + + control={control} name="base_model" @@ -122,24 +127,25 @@ const DiffusersModelEdit = (props: DiffusersModelEditProps) => { control={control} name="variant" /> - - {t('modelManager.modelLocation')} + value.trim().length > 0 || 'Must provide a path', })} /> - - - - - + + + {t('modelManager.vaeLocation')} + + +
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx index b8be206498..3e0b4c91ee 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx @@ -1,9 +1,13 @@ -import { Divider, Flex } from '@chakra-ui/react'; +import { + Button, + Divider, + Flex, + FormControl, + FormLabel, + Input, + Text, +} from '@invoke-ai/ui'; import { useAppDispatch } from 'app/store/storeHooks'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvInput } from 'common/components/InvInput/InvInput'; -import { InvText } from 'common/components/InvText/wrapper'; import BaseModelSelect from 'features/modelManager/subpanels/shared/BaseModelSelect'; import { LORA_MODEL_FORMAT_MAP, @@ -88,53 +92,54 @@ const LoRAModelEdit = (props: LoRAModelEditProps) => { return ( - + {model.model_name} - - + + {MODEL_TYPE_MAP[model.base_model]} {t('modelManager.model')} ⋅{' '} {LORA_MODEL_FORMAT_MAP[model.model_format]} {t('common.format')} - +
- - {t('modelManager.name')} + value.trim().length > 3 || 'Must be at least 3 characters', })} /> - - - - + + + {t('modelManager.description')} + + control={control} name="base_model" /> - - {t('modelManager.modelLocation')} + value.trim().length > 0 || 'Must provide a path', })} /> - - + +
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx index 1b4c347969..ca272e8eff 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx @@ -1,18 +1,19 @@ import { + Button, + ConfirmationAlertDialog, Flex, + FormControl, + FormLabel, + Input, ListItem, Radio, RadioGroup, + Text, + Tooltip, UnorderedList, useDisclosure, -} from '@chakra-ui/react'; +} from '@invoke-ai/ui'; import { useAppDispatch } from 'app/store/storeHooks'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvConfirmationAlertDialog } from 'common/components/InvConfirmationAlertDialog/InvConfirmationAlertDialog'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvInput } from 'common/components/InvInput/InvInput'; -import { InvText } from 'common/components/InvText/wrapper'; -import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; import { addToast } from 'features/system/store/systemSlice'; import { makeToast } from 'features/system/util/makeToast'; import type { ChangeEvent } from 'react'; @@ -122,7 +123,7 @@ const ModelConvert = (props: ModelConvertProps) => { return ( <> - { isLoading={isLoading} > 🧨 {t('modelManager.convertToDiffusers')} - - + { onClose={onClose} > - {t('modelManager.convertToDiffusersHelpText1')} + {t('modelManager.convertToDiffusersHelpText1')} {t('modelManager.convertToDiffusersHelpText2')} {t('modelManager.convertToDiffusersHelpText3')} {t('modelManager.convertToDiffusersHelpText4')} {t('modelManager.convertToDiffusersHelpText5')} - {t('modelManager.convertToDiffusersHelpText6')} + {t('modelManager.convertToDiffusersHelpText6')} - + {t('modelManager.convertToDiffusersSaveLocation')} - + - + {t('modelManager.invokeRoot')} - + - + {t('modelManager.custom')} - + {saveLocation === 'Custom' && ( - - + {t('modelManager.customSaveLocation')} + - + )} - + ); }; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx index 944c714008..547050f80f 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx @@ -1,10 +1,14 @@ -import { Flex, Spinner } from '@chakra-ui/react'; +import { + Button, + ButtonGroup, + Flex, + FormControl, + FormLabel, + Input, + Spinner, + Text, +} from '@invoke-ai/ui'; import type { EntityState } from '@reduxjs/toolkit'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvInput } from 'common/components/InvInput/InvInput'; -import { InvText } from 'common/components/InvText/wrapper'; import { forEach } from 'lodash-es'; import type { ChangeEvent, PropsWithChildren } from 'react'; import { memo, useCallback, useState } from 'react'; @@ -82,40 +86,41 @@ const ModelList = (props: ModelListProps) => { return ( - - + + - - - + + {t('modelManager.search')} + + { return ( - + {title} - + {modelList.map((model) => ( - + {loadingMessage ? loadingMessage : 'Fetching...'} - + ); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx index e9c0dc670b..48774809d2 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx @@ -1,10 +1,14 @@ -import { Badge, Flex, useDisclosure } from '@chakra-ui/react'; +import { + Badge, + Button, + ConfirmationAlertDialog, + Flex, + IconButton, + Text, + Tooltip, + useDisclosure, +} from '@invoke-ai/ui'; import { useAppDispatch } from 'app/store/storeHooks'; -import { InvButton } from 'common/components/InvButton/InvButton'; -import { InvConfirmationAlertDialog } from 'common/components/InvConfirmationAlertDialog/InvConfirmationAlertDialog'; -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; -import { InvText } from 'common/components/InvText/wrapper'; -import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; import { MODEL_TYPE_SHORT_MAP } from 'features/parameters/types/constants'; import { addToast } from 'features/system/store/systemSlice'; import { makeToast } from 'features/system/util/makeToast'; @@ -84,7 +88,7 @@ const ModelListItem = (props: ModelListItemProps) => { return ( { ] } - - {model.model_name} - + + {model.model_name} + - } aria-label={t('modelManager.deleteConfig')} colorScheme="error" /> - { acceptButtonText={t('modelManager.delete')} > - {t('modelManager.deleteMsg1')} - {t('modelManager.deleteMsg2')} + {t('modelManager.deleteMsg1')} + {t('modelManager.deleteMsg2')} - + ); }; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel.tsx index 4fdfa93eba..91a6be5044 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@chakra-ui/react'; +import { Flex } from '@invoke-ai/ui'; import { memo } from 'react'; import SyncModels from './ModelManagerSettingsPanel/SyncModels'; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx index 608c1a9f70..d851b566ce 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx @@ -1,5 +1,4 @@ -import { Flex } from '@chakra-ui/react'; -import { InvText } from 'common/components/InvText/wrapper'; +import { Flex, Text } from '@invoke-ai/ui'; import { SyncModelsButton } from 'features/modelManager/components/SyncModels/SyncModelsButton'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -18,10 +17,10 @@ const SyncModels = () => { bg="base.800" > - {t('modelManager.syncModels')} - + {t('modelManager.syncModels')} + {t('modelManager.syncModelsDesc')} - + diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx index 772d6b9d40..fdae4da7dd 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx @@ -1,9 +1,5 @@ -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSelect } from 'common/components/InvSelect/InvSelect'; -import type { - InvSelectOnChange, - InvSelectOption, -} from 'common/components/InvSelect/types'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; import { typedMemo } from 'common/util/typedMemo'; import { MODEL_TYPE_MAP } from 'features/parameters/types/constants'; import { useCallback, useMemo } from 'react'; @@ -12,7 +8,7 @@ import { useController } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import type { AnyModelConfig } from 'services/api/types'; -const options: InvSelectOption[] = [ +const options: ComboboxOption[] = [ { value: 'sd-1', label: MODEL_TYPE_MAP['sd-1'] }, { value: 'sd-2', label: MODEL_TYPE_MAP['sd-2'] }, { value: 'sdxl', label: MODEL_TYPE_MAP['sdxl'] }, @@ -28,16 +24,17 @@ const BaseModelSelect = ( () => options.find((o) => o.value === field.value), [field.value] ); - const onChange = useCallback( + const onChange = useCallback( (v) => { field.onChange(v?.value); }, [field] ); return ( - - - + + {t('modelManager.baseModel')} + + ); }; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx index 572ab6367e..de6f214211 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx @@ -1,10 +1,9 @@ -import type { ChakraProps } from '@chakra-ui/react'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSelect } from 'common/components/InvSelect/InvSelect'; import type { - InvSelectOnChange, - InvSelectOption, -} from 'common/components/InvSelect/types'; + ChakraProps, + ComboboxOnChange, + ComboboxOption, +} from '@invoke-ai/ui'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; import { memo, useCallback, useMemo } from 'react'; import { useController, type UseControllerProps } from 'react-hook-form'; import { useGetCheckpointConfigsQuery } from 'services/api/endpoints/models'; @@ -16,7 +15,7 @@ const CheckpointConfigsSelect = ( props: UseControllerProps ) => { const { data } = useGetCheckpointConfigsQuery(); - const options = useMemo( + const options = useMemo( () => (data ? data.map((i) => ({ label: i, value: i })) : []), [data] ); @@ -25,7 +24,7 @@ const CheckpointConfigsSelect = ( () => options.find((o) => o.value === field.value), [field.value, options] ); - const onChange = useCallback( + const onChange = useCallback( (v) => { field.onChange(v?.value); }, @@ -33,15 +32,16 @@ const CheckpointConfigsSelect = ( ); return ( - - + Config File + - + ); }; diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx index 3e137cf495..4514e18250 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx @@ -1,9 +1,5 @@ -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvSelect } from 'common/components/InvSelect/InvSelect'; -import type { - InvSelectOnChange, - InvSelectOption, -} from 'common/components/InvSelect/types'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; +import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui'; import { typedMemo } from 'common/util/typedMemo'; import { useCallback, useMemo } from 'react'; import type { UseControllerProps } from 'react-hook-form'; @@ -14,7 +10,7 @@ import type { DiffusersModelConfig, } from 'services/api/types'; -const options: InvSelectOption[] = [ +const options: ComboboxOption[] = [ { value: 'normal', label: 'Normal' }, { value: 'inpaint', label: 'Inpaint' }, { value: 'depth', label: 'Depth' }, @@ -31,16 +27,17 @@ const ModelVariantSelect = < () => options.find((o) => o.value === field.value), [field.value] ); - const onChange = useCallback( + const onChange = useCallback( (v) => { field.onChange(v?.value); }, [field] ); return ( - - - + + {t('modelManager.variant')} + + ); }; diff --git a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx index 54f525f3e0..65d142a830 100644 --- a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx @@ -1,6 +1,6 @@ import 'reactflow/dist/style.css'; -import { Flex } from '@chakra-ui/react'; +import { Flex } from '@invoke-ai/ui'; import { useAppSelector } from 'app/store/storeHooks'; import { IAINoContentFallback } from 'common/components/IAIImageFallback'; import TopPanel from 'features/nodes/components/flow/panels/TopPanel/TopPanel'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx index 85669fb3c6..368f3c4f7e 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx @@ -1,21 +1,18 @@ import 'reactflow/dist/style.css'; -import { Flex } from '@chakra-ui/react'; +import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui'; +import { + Combobox, + Flex, + Popover, + PopoverAnchor, + PopoverBody, + PopoverContent, +} from '@invoke-ai/ui'; import { useAppToaster } from 'app/components/Toaster'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import type { SelectInstance } from 'chakra-react-select'; -import { - InvPopover, - InvPopoverAnchor, - InvPopoverBody, - InvPopoverContent, -} from 'common/components/InvPopover/wrapper'; -import { InvSelect } from 'common/components/InvSelect/InvSelect'; -import type { - InvSelectOnChange, - InvSelectOption, -} from 'common/components/InvSelect/types'; import { useBuildNode } from 'features/nodes/hooks/useBuildNode'; import { addNodePopoverClosed, @@ -46,7 +43,7 @@ const createRegex = memoize( ); const filterOption = memoize( - (option: FilterOptionOption, inputValue: string) => { + (option: FilterOptionOption, inputValue: string) => { if (!inputValue) { return true; } @@ -64,7 +61,7 @@ const AddNodePopover = () => { const buildInvocation = useBuildNode(); const toaster = useAppToaster(); const { t } = useTranslation(); - const selectRef = useRef | null>(null); + const selectRef = useRef | null>(null); const inputRef = useRef(null); const fieldFilter = useAppSelector((s) => s.nodes.connectionStartFieldType); @@ -92,7 +89,7 @@ const AddNodePopover = () => { }) : map(nodeTemplates.templates); - const options: InvSelectOption[] = map( + const options: ComboboxOption[] = map( filteredNodeTemplates, (template) => { return { @@ -149,7 +146,7 @@ const AddNodePopover = () => { [dispatch, buildInvocation, toaster, t] ); - const onChange = useCallback( + const onChange = useCallback( (v) => { if (!v) { return; @@ -197,7 +194,7 @@ const AddNodePopover = () => { const noOptionsMessage = useCallback(() => t('nodes.noMatchingNodes'), [t]); return ( - { returnFocusOnClose={true} initialFocusRef={inputRef} > - + - - + { borderWidth="2px" borderStyle="solid" > - - + { inputRef={inputRef} closeMenuOnSelect={false} /> - - - + + + ); }; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx index 7a56ca845b..7d88aa1f58 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx @@ -1,4 +1,4 @@ -import { useToken } from '@chakra-ui/react'; +import { useToken } from '@invoke-ai/ui'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useGlobalMenuClose } from 'common/hooks/useGlobalMenuClose'; import { useIsValidConnection } from 'features/nodes/hooks/useIsValidConnection'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx index 5e16d060d8..4c313d8f15 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx @@ -1,4 +1,4 @@ -import { Badge, Flex } from '@chakra-ui/react'; +import { Badge, Flex } from '@invoke-ai/ui'; import { useAppSelector } from 'app/store/storeHooks'; import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens'; import { memo, useMemo } from 'react'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx index 6e12957874..038370db9c 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx @@ -1,9 +1,8 @@ -import { Flex, Image } from '@chakra-ui/react'; +import { Flex, Image, Text } from '@invoke-ai/ui'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import IAIDndImage from 'common/components/IAIDndImage'; import { IAINoContentFallback } from 'common/components/IAIImageFallback'; -import { InvText } from 'common/components/InvText/wrapper'; import NextPrevImageButtons from 'features/gallery/components/NextPrevImageButtons'; import { selectGallerySlice } from 'features/gallery/store/gallerySlice'; import NodeWrapper from 'features/nodes/components/flow/nodes/common/NodeWrapper'; @@ -94,9 +93,9 @@ const Wrapper = (props: PropsWithChildren<{ nodeProps: NodeProps }>) => { justifyContent="center" h={8} > - + {t('nodes.currentImage')} - + { } return ( - } placement="top" shouldWrapChildren @@ -29,7 +28,7 @@ const InvocationNodeClassificationIcon = ({ nodeId }: Props) => { boxSize={4} color="base.400" /> - + ); }; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx index fee2eb2c67..abe4ca0856 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx @@ -1,6 +1,5 @@ -import type { ChakraProps } from '@chakra-ui/react'; -import { Flex } from '@chakra-ui/react'; -import { InvControlGroup } from 'common/components/InvControl/InvControlGroup'; +import type { ChakraProps } from '@invoke-ai/ui'; +import { Flex, FormControlGroup } from '@invoke-ai/ui'; import { useHasImageOutput } from 'features/nodes/hooks/useHasImageOutput'; import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; @@ -30,10 +29,10 @@ const InvocationNodeFooter = ({ nodeId }: Props) => { h={8} justifyContent="space-between" > - + {isCacheEnabled && } {hasImageOutput && } - + ); }; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx index a576f3e798..99caba2df8 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@chakra-ui/react'; +import { Flex } from '@invoke-ai/ui'; import NodeCollapseButton from 'features/nodes/components/flow/nodes/common/NodeCollapseButton'; import NodeTitle from 'features/nodes/components/flow/nodes/common/NodeTitle'; import InvocationNodeClassificationIcon from 'features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon'; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx index 6f4761fb2a..42fd120cd1 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx @@ -1,6 +1,4 @@ -import { Flex, Icon } from '@chakra-ui/react'; -import { InvText } from 'common/components/InvText/wrapper'; -import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; +import { Flex, Icon, Text, Tooltip } from '@invoke-ai/ui'; import { compare } from 'compare-versions'; import { useNodeData } from 'features/nodes/hooks/useNodeData'; import { useNodeNeedsUpdate } from 'features/nodes/hooks/useNodeNeedsUpdate'; @@ -18,7 +16,7 @@ const InvocationNodeInfoIcon = ({ nodeId }: Props) => { const needsUpdate = useNodeNeedsUpdate(nodeId); return ( - } placement="top" shouldWrapChildren @@ -30,7 +28,7 @@ const InvocationNodeInfoIcon = ({ nodeId }: Props) => { w={8} color={needsUpdate ? 'error.400' : 'base.400'} /> - + ); }; @@ -64,62 +62,62 @@ const TooltipContent = memo(({ nodeId }: { nodeId: string }) => { if (!data.version) { return ( - + {t('nodes.versionUnknown')} - + ); } if (!nodeTemplate.version) { return ( - + {t('nodes.version')} {data.version} ({t('nodes.unknownTemplate')}) - + ); } if (compare(data.version, nodeTemplate.version, '<')) { return ( - + {t('nodes.version')} {data.version} ({t('nodes.updateNode')}) - + ); } if (compare(data.version, nodeTemplate.version, '>')) { return ( - + {t('nodes.version')} {data.version} ({t('nodes.updateApp')}) - + ); } return ( - + {t('nodes.version')} {data.version} - + ); }, [data, nodeTemplate, t]); if (!isInvocationNodeData(data)) { - return {t('nodes.unknownNode')}; + return {t('nodes.unknownNode')}; } return ( - + {title} - + {nodeTemplate?.nodePack && ( - + {t('nodes.nodePack')}: {nodeTemplate.nodePack} - + )} - + {nodeTemplate?.description} - + {versionComponent} - {data?.notes && {data.notes}} + {data?.notes && {data.notes}} ); }); diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx index 1c45d86baa..b96edf9b2a 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx @@ -1,9 +1,15 @@ -import type { SystemStyleObject } from '@chakra-ui/react'; -import { Badge, CircularProgress, Flex, Icon, Image } from '@chakra-ui/react'; +import type { SystemStyleObject } from '@invoke-ai/ui'; +import { + Badge, + CircularProgress, + Flex, + Icon, + Image, + Text, + Tooltip, +} from '@invoke-ai/ui'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; -import { InvText } from 'common/components/InvText/wrapper'; -import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; import { selectNodesSlice } from 'features/nodes/store/nodesSlice'; import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants'; import type { NodeExecutionState } from 'features/nodes/types/invocation'; @@ -46,7 +52,7 @@ const InvocationNodeStatusIndicator = ({ nodeId }: Props) => { } return ( - } placement="top" > @@ -59,7 +65,7 @@ const InvocationNodeStatusIndicator = ({ nodeId }: Props) => { > - + ); }; @@ -73,7 +79,7 @@ const TooltipLabel = memo(({ nodeExecutionState }: TooltipLabelProps) => { const { status, progress, progressImage } = nodeExecutionState; const { t } = useTranslation(); if (status === zNodeStatus.enum.PENDING) { - return {t('queue.pending')}; + return {t('queue.pending')}; } if (status === zNodeStatus.enum.IN_PROGRESS) { if (progressImage) { @@ -97,21 +103,21 @@ const TooltipLabel = memo(({ nodeExecutionState }: TooltipLabelProps) => { if (progress !== null) { return ( - + {t('nodes.executionStateInProgress')} ({Math.round(progress * 100)}%) - + ); } - return {t('nodes.executionStateInProgress')}; + return {t('nodes.executionStateInProgress')}; } if (status === zNodeStatus.enum.COMPLETED) { - return {t('nodes.executionStateCompleted')}; + return {t('nodes.executionStateCompleted')}; } if (status === zNodeStatus.enum.FAILED) { - return {t('nodes.executionStateError')}; + return {t('nodes.executionStateError')}; } return null; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeUnknownFallback.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeUnknownFallback.tsx index 7a3bcbac92..a1d1a93b0c 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeUnknownFallback.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeUnknownFallback.tsx @@ -1,5 +1,4 @@ -import { Flex } from '@chakra-ui/react'; -import { InvText } from 'common/components/InvText/wrapper'; +import { Flex, Text } from '@invoke-ai/ui'; import NodeCollapseButton from 'features/nodes/components/flow/nodes/common/NodeCollapseButton'; import NodeWrapper from 'features/nodes/components/flow/nodes/common/NodeWrapper'; import { useNodePack } from 'features/nodes/hooks/useNodePack'; @@ -37,9 +36,9 @@ const InvocationNodeUnknownFallback = ({ fontSize="sm" > - + {label ? `${label} (${type})` : type} - + {isOpen && ( - + {t('nodes.unknownNodeType')}:{' '} - + {type} - - + + {nodePack && ( - + {t('nodes.nodePack')}:{' '} - + {nodePack} - - + + )} diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx index 8c08eed3a8..6e092b0448 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/NotesTextarea.tsx @@ -1,6 +1,5 @@ +import { FormControl, FormLabel, Textarea } from '@invoke-ai/ui'; import { useAppDispatch } from 'app/store/storeHooks'; -import { InvControl } from 'common/components/InvControl/InvControl'; -import { InvTextarea } from 'common/components/InvTextarea/InvTextarea'; import { useNodeData } from 'features/nodes/hooks/useNodeData'; import { nodeNotesChanged } from 'features/nodes/store/nodesSlice'; import { isInvocationNodeData } from 'features/nodes/types/invocation'; @@ -22,14 +21,15 @@ const NotesTextarea = ({ nodeId }: { nodeId: string }) => { return null; } return ( - - + {t('nodes.notes')} +