diff --git a/web-app/client/src/components/Inputs/MultiSelect/MultiSelect.module.scss b/web-app/client/src/components/Inputs/MultiSelect/MultiSelect.module.scss index 2522b873..e7817e5b 100644 --- a/web-app/client/src/components/Inputs/MultiSelect/MultiSelect.module.scss +++ b/web-app/client/src/components/Inputs/MultiSelect/MultiSelect.module.scss @@ -23,9 +23,7 @@ &.disabled { opacity: 0.5; } -} -.multiSelect { .control { display: flex; justify-content: space-between; @@ -114,47 +112,38 @@ .indicatorsContainer { margin: 0; } +} - .option { - @include paragraph; - padding: 16px; - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 4px; - - .optionText { - // min-width: 50%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - &.once { - justify-content: space-between; - } - - &.focused { - background: $primary-02; - } +.option { + @include paragraph; + padding: 16px; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 4px; - &.selected { - background: $primary-10; - } + .optionText { + // min-width: 50%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } - .noOptionsMessage { - color: $black-50; - text-align: center; + &.once { + justify-content: space-between; } - p.error { - @include paragraph-small; - margin: 8px 0 0; - color: $error; + &.focused { + background: $primary-02; } - &.disabled { - opacity: 0.5; + &.selected { + background: $primary-10; } } + +.noOptionsMessage { + color: $black-50; + display: block; + text-align: center; +} diff --git a/web-app/client/src/components/Inputs/MultiSelect/MultiSelect.tsx b/web-app/client/src/components/Inputs/MultiSelect/MultiSelect.tsx index 01d2c60f..7e5f32cc 100644 --- a/web-app/client/src/components/Inputs/MultiSelect/MultiSelect.tsx +++ b/web-app/client/src/components/Inputs/MultiSelect/MultiSelect.tsx @@ -4,6 +4,8 @@ import { forwardRef, ForwardRefRenderFunction, ReactNode, + useEffect, + useState, } from 'react'; import ReactSelect, { Props as ReactSelectProps } from 'react-select'; import { InputPropsBase } from '@components/Inputs'; @@ -25,6 +27,11 @@ const MultiSelect: ForwardRefRenderFunction = ( { label, error, tooltip, className, id, components, ...props }, ref, ) => { + const [portalNode, setPortalNode] = useState(null); + + useEffect(() => { + setPortalNode(document.getElementById('portals-container-node')); + }, []); return (
= ( className={cn(styles.multiSelect, error && styles.error)} {...props} ref={ref} + styles={{ + menuPortal: (base) => { + return { ...base, zIndex: 9999999 }; + }, + ...colorStyles, + }} + menuPortalTarget={portalNode} components={{ ...customComponents, ...components }} - styles={colorStyles} + // styles={colorStyles} // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore error={error} diff --git a/web-app/client/src/components/Inputs/MultiSelect/customComponents.tsx b/web-app/client/src/components/Inputs/MultiSelect/customComponents.tsx index 48dc0fdd..1153d363 100644 --- a/web-app/client/src/components/Inputs/MultiSelect/customComponents.tsx +++ b/web-app/client/src/components/Inputs/MultiSelect/customComponents.tsx @@ -21,6 +21,7 @@ import { import { OptionWithBadges } from 'types/multiSelect'; import { OptionBadge } from './OptionBadge'; import styles from './MultiSelect.module.scss'; +import { Option as OptionType } from 'types/inputs'; export const colorStyles: StylesConfig = { control: (style) => ({}), diff --git a/web-app/client/src/components/Inputs/Select/Select.module.scss b/web-app/client/src/components/Inputs/Select/Select.module.scss index 628d9be8..4f7cc3e4 100644 --- a/web-app/client/src/components/Inputs/Select/Select.module.scss +++ b/web-app/client/src/components/Inputs/Select/Select.module.scss @@ -73,11 +73,6 @@ opacity: 0.5; } - .noOptionsMessage { - color: $black-50; - text-align: center; - } - p.error { @include paragraph-small; margin: 8px 0 0; @@ -89,6 +84,11 @@ } } +.noOptionsMessage { + color: $black-50; + text-align: center; +} + .option { @include paragraph; padding: 16px; diff --git a/web-app/client/src/components/Inputs/Select/customComponents.tsx b/web-app/client/src/components/Inputs/Select/customComponents.tsx index e42b7490..7b421915 100644 --- a/web-app/client/src/components/Inputs/Select/customComponents.tsx +++ b/web-app/client/src/components/Inputs/Select/customComponents.tsx @@ -74,14 +74,6 @@ const IndicatorsContainer: ComponentType<
); -const Menu: ComponentType & InputPropsBase> = ( - innerProps, -) => ( - - - - ); - export const Option: ComponentType< OptionProps & InputPropsBase > = ({ innerProps, innerRef, children, isFocused, isSelected }) => ( diff --git a/web-app/client/src/components/ModalContainerCopy/ModalContainer.module.scss b/web-app/client/src/components/ModalContainerCopy/ModalContainer.module.scss deleted file mode 100644 index 2fd11a44..00000000 --- a/web-app/client/src/components/ModalContainerCopy/ModalContainer.module.scss +++ /dev/null @@ -1,35 +0,0 @@ -@import "styles/common"; - -.dialogOverlay { - box-sizing: border-box; - background: $black-50; - display: grid; - place-items: center; - z-index: 99999; -} - -.dialog { - @include dropdown-shadow; - position: relative; - display: flex; - flex-direction: column; - max-width: 560px; - width: 100%; - max-height: calc(100% - 64px); - padding: 48px; - overflow-y: auto; - overflow-x: visible; - border-radius: 16px; - background: $white; -} - -.closeButton { - position: absolute; - top: 0; - right: 0; - margin: 24px; - border: none; - outline: none; - background: none; - cursor: pointer; -} diff --git a/web-app/client/src/components/ModalContainerCopy/ModalContainerCopy.tsx b/web-app/client/src/components/ModalContainerCopy/ModalContainerCopy.tsx deleted file mode 100644 index db8f06b9..00000000 --- a/web-app/client/src/components/ModalContainerCopy/ModalContainerCopy.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { Icon } from '@components/IconComponent'; - -import { - useFloating, - FloatingPortal, - FloatingOverlay, - FloatingFocusManager, - useTransitionStyles, - useDismiss, - useInteractions, - useRole, -} from '@floating-ui/react'; -import { Dispatch, SetStateAction } from 'react'; -import { FCWithChildren } from 'types/react'; -import styles from './ModalContainer.module.scss'; - -export interface ModalProps { - onClose?: () => void; - className?: string; - isOpen: boolean; - setIsOpen: Dispatch>; -} - -const ModalContainer: FCWithChildren = ({ - onClose = () => null, - children, - isOpen, - setIsOpen, -}) => { - const { refs, context } = useFloating({ - open: isOpen, - onOpenChange: setIsOpen, - }); - - const handleClickClose = () => { - onClose(); - setIsOpen(false); - }; - - const stylesOverlay = useTransitionStyles(context, { - duration: 300, - initial: { - opacity: 0, - }, - }).styles; - - const stylesDialog = useTransitionStyles(context, { - duration: 300, - initial: { - transform: 'translate3d(0, 3%, 0)', - }, - }).styles; - - const dismiss = useDismiss(context, { outsidePressEvent: 'mousedown' }); - const role = useRole(context, { role: 'dialog' }); - - const { getFloatingProps } = useInteractions([dismiss, role]); - return ( - <> - - {isOpen && ( - - -
- {children} - -
- - - )} - - - ); -}; - -export default ModalContainer; diff --git a/web-app/client/src/components/ModalContainerCopy/index.ts b/web-app/client/src/components/ModalContainerCopy/index.ts deleted file mode 100644 index 92c4c812..00000000 --- a/web-app/client/src/components/ModalContainerCopy/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './ModalContainerCopy'; -export type { ModalProps } from './ModalContainerCopy'; diff --git a/web-app/client/src/components/SelectNew/Select.module.scss b/web-app/client/src/components/SelectNew/Select.module.scss deleted file mode 100644 index 19a91b64..00000000 --- a/web-app/client/src/components/SelectNew/Select.module.scss +++ /dev/null @@ -1,36 +0,0 @@ -@import "styles/common"; - -.select { - @include paragraph; - color: $black; - outline: none; - border: none; - border-radius: 4px; - padding: 10px; -} - -.selectInputContainer { - display: flex; - gap: 16px; - box-sizing: border-box; - padding: 0; - - input { - margin: 0; - } -} - -.dropdown { - border-radius: 4px; - z-index: 1000000; -} - -.options { - padding: 10px; - cursor: default; - color: $black; -} - -.selectInput::placeholder { - color: $black; -} diff --git a/web-app/client/src/components/SelectNew/SelectCopy.tsx b/web-app/client/src/components/SelectNew/SelectCopy.tsx deleted file mode 100644 index 8f33c7d4..00000000 --- a/web-app/client/src/components/SelectNew/SelectCopy.tsx +++ /dev/null @@ -1,189 +0,0 @@ -import styles from './Select.module.scss'; -import { forwardRef, useEffect, useRef, useState } from 'react'; -import { - autoUpdate, - size, - flip, - useId, - useDismiss, - useFloating, - useInteractions, - useListNavigation, - useRole, - FloatingFocusManager, - FloatingPortal, -} from '@floating-ui/react'; -import colors from '@constants/colors'; - -interface ItemProps { - children: React.ReactNode; - active: boolean; -} - -const data = [ - 'Red', - 'Orange', - 'Yellow', - 'Green', - 'Grey', - 'Cyan', - 'Blue', - 'Purple', - 'Pink', - 'Maroon', - 'Black', - 'White', -]; - -const AutoComplete = ({ options }) => { - const [open, setOpen] = useState(false); - const [inputValue, setInputValue] = useState(''); - const [activeIndex, setActiveIndex] = useState(null); - const [selectedIndex, setSelectedIndex] = useState(0); - const [portalNode, setPortalNode] = useState(null); - - useEffect(() => { - setPortalNode(document.getElementById('portals-container-node')); - }, []); - - useEffect(() => { - setOpen(false); - }, [selectedIndex]); - - const listRef = useRef>([]); - - const { refs, floatingStyles, context } = useFloating({ - whileElementsMounted: autoUpdate, - open, - onOpenChange: setOpen, - middleware: [ - flip({ padding: 10 }), - size({ - apply({ rects, availableHeight, elements }) { - Object.assign(elements.floating.style, { - width: `${rects.reference.width}px`, - maxHeight: `${availableHeight}px`, - }); - }, - padding: 10, - }), - ], - }); - - const role = useRole(context, { role: 'listbox' }); - const dismiss = useDismiss(context); - const listNav = useListNavigation(context, { - listRef, - activeIndex, - onNavigate: setActiveIndex, - virtual: true, - loop: true, - }); - - const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions( - [role, dismiss, listNav], - ); - - function onChange(event: React.ChangeEvent) { - const value = event.target.value; - setInputValue(value); - setOpen(true); - if (value) { - setActiveIndex(0); - } - } - - const items = data.filter((item) => - item.toLowerCase().startsWith(inputValue.toLowerCase()), - ); - - const filteredItems = options.filter( - (opt) => opt.toLowerCase().includes(inputValue.toLowerCase()) && opt, - ); - - const getBackgroundColor = (index: number) => { - if (index === selectedIndex) return colors.primary[10]; - if (index === activeIndex) return colors.primary[5]; - return colors.white[100]; - }; - - return ( - <> - - {open && ( - - -
- {filteredItems.map((item, index) => ( -
- {item} -
- ))} -
- - - )} - - ); -}; - -export default AutoComplete; diff --git a/web-app/client/src/components/TooltipOld/Tooltip.module.scss b/web-app/client/src/components/TooltipOld/Tooltip.module.scss deleted file mode 100644 index ee48ed0e..00000000 --- a/web-app/client/src/components/TooltipOld/Tooltip.module.scss +++ /dev/null @@ -1,74 +0,0 @@ -@import "styles/common"; - -.tooltip { - display: inline-block; - position: relative; - - ul { - list-style: disc; - margin-left: 24px; - } - - .icon { - cursor: pointer; - } - - .content { - @include paragraph-small; - position: absolute; - padding: 16px; - width: 256px; - color: $white; - background: $primary-gradient-0; - border-radius: 8px; - box-shadow: 0 51px 48px rgba(0, 0, 0, 0.06), 0 21.3066px 20.0533px rgba(0, 0, 0, 0.0431313), 0 11.3915px 10.7214px rgba(0, 0, 0, 0.0357664), 0 6.38599px 6.01034px rgba(0, 0, 0, 0.03), 0 3.39155px 3.19205px rgba(0, 0, 0, 0.0242336), 0 1.4113px 1.32828px rgba(0, 0, 0, 0.0168687); - transition: 0.2s; - - &.top { - top: -8px; - left: 50%; - transform: translateY(-100%) translateX(-50%); - } - - &.right { - right: -8px; - top: 50%; - transform: translateX(100%) translateY(-50%); - } - - &.bottom { - bottom: -8px; - left: 50%; - transform: translateY(100%) translateX(-50%); - } - - &.left { - left: -8px; - top: 50%; - transform: translateX(-100%) translateY(-50%); - } - - &.hidden { - pointer-events: none; - opacity: 0; - visibility: hidden; - - &.top { - top: -5px; - } - - &.right { - right: -5px; - } - - &.bottom { - bottom: -5px; - } - - &.left { - left: -5px; - } - } - } -} - diff --git a/web-app/client/src/components/TooltipOld/Tooltip.test.tsx b/web-app/client/src/components/TooltipOld/Tooltip.test.tsx deleted file mode 100644 index 5e0ec544..00000000 --- a/web-app/client/src/components/TooltipOld/Tooltip.test.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import Tooltip from './Tooltip'; - -const user = userEvent.setup(); - -describe('Text Component', () => { - beforeEach(() => { - jest.clearAllMocks(); - }); - - it('Should render with text', async () => { - render(Test Tooltip); - const trigger = screen.getByRole('img'); - const tooltip = screen.getByText(/test tooltip/i); - expect(tooltip).toHaveClass('hidden'); - await user.hover(trigger); - expect(tooltip).not.toHaveClass('hidden'); - await user.unhover(trigger); - expect(tooltip).toHaveClass('hidden'); - }); -}); diff --git a/web-app/client/src/components/TooltipOld/Tooltip.tsx b/web-app/client/src/components/TooltipOld/Tooltip.tsx deleted file mode 100644 index 3e3632d8..00000000 --- a/web-app/client/src/components/TooltipOld/Tooltip.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { Icon } from '@components/IconComponent'; -import colors from '@constants/colors'; -import cn from 'classnames'; -import { useState } from 'react'; -import { FCWithChildren } from 'types/react'; - -import styles from './Tooltip.module.scss'; - -interface Props { - position?: 'top' | 'right' | 'bottom' | 'left'; - className?: string; -} - -const Tooltip: FCWithChildren = ({ - className, - position = 'top', - children, -}) => { - const [isHovered, setIsHovered] = useState(false); - - return ( -
- setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)} - /> -
- {children} -
-
- ); -}; - -export default Tooltip; diff --git a/web-app/client/src/components/TooltipOld/index.ts b/web-app/client/src/components/TooltipOld/index.ts deleted file mode 100644 index cdc0fab1..00000000 --- a/web-app/client/src/components/TooltipOld/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Tooltip'; diff --git a/web-app/client/src/constants/options.ts b/web-app/client/src/constants/options.ts index 91d3b72a..8e39985e 100644 --- a/web-app/client/src/constants/options.ts +++ b/web-app/client/src/constants/options.ts @@ -93,7 +93,8 @@ export const optionsByAlgorithms: Record = { // Metrics Options -const MFDMetrics = ['Euclidean', 'Cosine', 'Levenshtein'] as const; +// const MFDMetrics = ['Euclidean', 'Cosine', 'Levenshtein'] as const; +const MFDMetrics = [] as const; export type MFDMetric = (typeof MFDMetrics)[number]; diff --git a/web-app/client/src/pages/reports/test.module.scss b/web-app/client/src/pages/reports/test.module.scss deleted file mode 100644 index 5fd57f08..00000000 --- a/web-app/client/src/pages/reports/test.module.scss +++ /dev/null @@ -1,39 +0,0 @@ -@import "styles/common"; - -.padding { - display: flex; - padding: 200px; - background-color: $primary-25; - gap: 32px; -} - -.gap { - display: flex; - gap: 16px; -} - -.error { - color: $error; -} - -.info { - color: $info; -} - -.res { - color: $error; -} - -.background { - position: fixed; - z-index: -1; - top: 0; - bottom: 0; - left: 0; - right: 0; -} - -.cont { - height: 200px; - background-color: $primary-25; -} \ No newline at end of file diff --git a/web-app/client/src/pages/reports/test.tsx b/web-app/client/src/pages/reports/test.tsx deleted file mode 100644 index 1f0f6ba8..00000000 --- a/web-app/client/src/pages/reports/test.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import Button from '@components/Button'; -import OrderingWindow from '@components/Filters/OrderingWindow'; -import { Icon } from '@components/IconComponent'; -import { Checkbox, NumberInput, Select, Text } from '@components/Inputs'; -import ModalContainer from '@components/ModalContainer'; -import Tooltip from '@components/Tooltip'; -import { - useClick, - useDismiss, - useFloating, - useInteractions, - useRole, -} from '@floating-ui/react'; -import { NextSeo } from 'next-seo'; -import { FC, useCallback, useEffect, useRef, useState } from 'react'; -import { PrimitiveType } from 'types/globalTypes'; -import styles from './test.module.scss'; -import CoreInfo from '@components/SignUpModal/steps/CoreInfo'; -import EmailVerification from '@components/SignUpModal/steps/EmailVerification'; -import { useAuthContext } from '@hooks/useAuthContext'; -import useModal from '@hooks/useModal'; -import AuthSuccessModal from '@components/AuthSuccessModal'; -import { FormProvider } from 'react-hook-form'; -import _ from 'lodash'; -import { OrderingTitles } from '@constants/titles'; -import SelectNew from '@components/SelectNew/SelectCopy'; - -const ViewIcons: FC = () => { - const [isOpen, setIsOpen] = useState(false); - const [isOrderingShown, setIsOrderingShown] = useState(false); - - const orderingOptions = _.mapValues( - OrderingTitles[PrimitiveType.CFD], - (k: string, v: string) => ({ - label: k, - value: v, - }), - ); - - const selectOptions = [ - 'Red', - 'Orange', - 'Yellow', - 'Green', - 'Grey', - 'Cyan', - 'Blue', - 'Purple', - 'Pink', - 'Maroon', - 'Black', - 'White', - ]; - - return ( - <> - - - -
- - {/* console.log('Closed')} - isOpen={isOpen} - setIsOpen={setIsOpen} - />*/} - -
- - -
- - ); -}; - -export default ViewIcons;