diff --git a/package.json b/package.json index 6f446468d..6de544080 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "@internxt/css-config": "1.1.0", "@internxt/lib": "1.4.1", "@internxt/sdk": "=1.15.6", - "@internxt/ui": "=0.1.8", + "@internxt/ui": "=0.1.15", "@phosphor-icons/react": "^2.1.7", "@popperjs/core": "^2.11.6", "@reduxjs/toolkit": "^1.6.0", diff --git a/src/app/core/layouts/HeaderAndSidenavLayout/HeaderAndSidenavLayout.tsx b/src/app/core/layouts/HeaderAndSidenavLayout/HeaderAndSidenavLayout.tsx index 63c4b05ab..3a4c6f47b 100644 --- a/src/app/core/layouts/HeaderAndSidenavLayout/HeaderAndSidenavLayout.tsx +++ b/src/app/core/layouts/HeaderAndSidenavLayout/HeaderAndSidenavLayout.tsx @@ -8,7 +8,6 @@ import { AppView } from '../../types'; import { useAppDispatch, useAppSelector } from 'app/store/hooks'; import TaskLogger from 'app/tasks/components/TaskLogger/TaskLogger'; import DriveItemInfoMenu from 'app/drive/components/DriveItemInfoMenu/DriveItemInfoMenu'; -import SharedFolderTooBigDialog from '../../../drive/components/SharedFolderTooBigDialog/SharedFolderTooBigDialog'; import { getAppConfig } from 'services/config.service'; import ShareItemDialog from '../../../../views/Shared/components/ShareItemDialog/ShareItemDialog'; import { Sidebar as VersionHistorySidebar } from '../../../../views/Drive/components/VersionHistory'; @@ -24,7 +23,6 @@ export default function HeaderAndSidenavLayout(props: HeaderAndSidenavLayoutProp const itemToShare = useAppSelector((state) => state.storage.itemToShare); const isShareItemDialogOpen = useAppSelector((state) => state.ui.isShareItemDialogOpen); const isReachedPlanLimitDialogOpen = useAppSelector((state) => state.ui.isReachedPlanLimitDialogOpen); - const isSharedFolderTooBigDialogOpen = useAppSelector((state) => state.ui.isSharedFolderTooBigDialogOpen); const isDriveItemInfoMenuOpen = useAppSelector((state) => state.ui.isDriveItemInfoMenuOpen); const driveItemInfo = useAppSelector((state) => state.ui.currentFileInfoMenuItem); const onDriveItemInfoMenuClosed = () => { @@ -42,7 +40,6 @@ export default function HeaderAndSidenavLayout(props: HeaderAndSidenavLayoutProp
{isShareItemDialogOpen && itemToShare && } {isReachedPlanLimitDialogOpen && } - {isSharedFolderTooBigDialogOpen && }
diff --git a/src/app/drive/components/ReachedPlanLimitDialog/ReachedPlanLimitDialog.tsx b/src/app/drive/components/ReachedPlanLimitDialog/ReachedPlanLimitDialog.tsx index ae332c3a9..de90f8c2b 100644 --- a/src/app/drive/components/ReachedPlanLimitDialog/ReachedPlanLimitDialog.tsx +++ b/src/app/drive/components/ReachedPlanLimitDialog/ReachedPlanLimitDialog.tsx @@ -1,7 +1,6 @@ import navigationService from 'services/navigation.service'; import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; -import BaseDialog from 'components/BaseDialog'; -import { Button } from '@internxt/ui'; +import { Button, BaseDialog } from '@internxt/ui'; import { useAppDispatch, useAppSelector } from 'app/store/hooks'; import { uiActions } from 'app/store/slices/ui'; import DriveStorageError from 'assets/images/drive-error.svg'; diff --git a/src/app/drive/components/SharedFolderTooBigDialog/SharedFolderTooBigDialog.scss b/src/app/drive/components/SharedFolderTooBigDialog/SharedFolderTooBigDialog.scss deleted file mode 100644 index 7462fc39e..000000000 --- a/src/app/drive/components/SharedFolderTooBigDialog/SharedFolderTooBigDialog.scss +++ /dev/null @@ -1,10 +0,0 @@ -.message-dialog-panel { - inset: 0; - margin: auto; - width: 300px; - max-height: max-content; -} - -.message-dialog-close-button { - width: 16px; -} diff --git a/src/app/drive/components/SharedFolderTooBigDialog/SharedFolderTooBigDialog.tsx b/src/app/drive/components/SharedFolderTooBigDialog/SharedFolderTooBigDialog.tsx deleted file mode 100644 index 206005f12..000000000 --- a/src/app/drive/components/SharedFolderTooBigDialog/SharedFolderTooBigDialog.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { useAppDispatch, useAppSelector } from 'app/store/hooks'; -import BaseDialog from 'components/BaseDialog'; -import BaseButton from 'components/BaseButton'; -import { uiActions } from 'app/store/slices/ui'; -import './SharedFolderTooBigDialog.scss'; -import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; - -const SharedFolderTooBigDialog = (): JSX.Element => { - const { translate } = useTranslationContext(); - const isOpen = useAppSelector((state) => state.ui.isSharedFolderTooBigDialogOpen); - const dispatch = useAppDispatch(); - - const onClose = (): void => { - dispatch(uiActions.setIsSharedFolderTooBigDialogOpen(false)); - }; - - return ( - - - {translate('error.sharedFolderTooBig')}  - {translate('error.workingOnIt')}{' '} - - See more - - - -
-
- onClose()} className="transparent mr-2 w-11/12"> - {translate('actions.dismiss') as string} - -
-
- - ); -}; - -export default SharedFolderTooBigDialog; diff --git a/src/app/drive/components/UploadItemsFailsDialog/UploadItemsFailsDialog.tsx b/src/app/drive/components/UploadItemsFailsDialog/UploadItemsFailsDialog.tsx index b1693f93d..ce7c72b5b 100644 --- a/src/app/drive/components/UploadItemsFailsDialog/UploadItemsFailsDialog.tsx +++ b/src/app/drive/components/UploadItemsFailsDialog/UploadItemsFailsDialog.tsx @@ -1,6 +1,5 @@ import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; -import BaseDialog from 'components/BaseDialog'; -import { Button } from '@internxt/ui'; +import { Button, BaseDialog } from '@internxt/ui'; import { RootState } from 'app/store'; import { useAppDispatch, useAppSelector } from 'app/store/hooks'; import { uiActions } from 'app/store/slices/ui'; diff --git a/src/app/store/slices/ui/index.ts b/src/app/store/slices/ui/index.ts index e637d4965..74c96de28 100644 --- a/src/app/store/slices/ui/index.ts +++ b/src/app/store/slices/ui/index.ts @@ -22,7 +22,6 @@ interface UISliceState { isReachedPlanLimitDialogOpen: boolean; isUpgradePlanDialogOpen: boolean; currentUpgradePlanDialogInfo: UpgradePlanDialogInfo | null; - isSharedFolderTooBigDialogOpen: boolean; isShareItemDialogOpen: boolean; isShareItemDialogOpenInPreviewView: boolean; isUploadItemsFailsDialogOpen: boolean; @@ -61,7 +60,6 @@ const initialState: UISliceState = { isReachedPlanLimitDialogOpen: false, isUpgradePlanDialogOpen: false, currentUpgradePlanDialogInfo: null, - isSharedFolderTooBigDialogOpen: false, isShareItemDialogOpen: false, isShareItemDialogOpenInPreviewView: false, isUploadItemsFailsDialogOpen: false, @@ -148,9 +146,6 @@ export const uiSlice = createSlice({ setCurrentUpgradePlanDialogInfo: (state: UISliceState, action: PayloadAction) => { state.currentUpgradePlanDialogInfo = action.payload; }, - setIsSharedFolderTooBigDialogOpen: (state: UISliceState, action: PayloadAction) => { - state.isSharedFolderTooBigDialogOpen = action.payload; - }, setIsShareItemDialogOpen: (state: UISliceState, action: PayloadAction) => { state.isShareItemDialogOpen = action.payload; }, @@ -214,7 +209,6 @@ export const { setIsReachedPlanLimitDialogOpen, setIsUpgradePlanDialogOpen, setCurrentUpgradePlanDialogInfo, - setIsSharedFolderTooBigDialogOpen, setIsShareItemDialogOpen, setIsDeleteBackupDialog, setIsUploadItemsFailsDialogOpen, diff --git a/src/components/BaseDialog.tsx b/src/components/BaseDialog.tsx deleted file mode 100644 index 8eaa48efa..000000000 --- a/src/components/BaseDialog.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { IconWeight, X } from '@phosphor-icons/react'; - -interface BaseDialogProps { - isOpen: boolean; - title?: string; - hideCloseButton?: boolean; - subTitle?: string; - dialogRounded?: boolean; - children: JSX.Element | JSX.Element[]; - classes?: string; - titleClasses?: string; - panelClasses?: string; - closeClass?: string; - weightIcon?: IconWeight; - bgColor?: string; - onClose: () => void; - dataTest?: string; -} - -const BaseDialog = ({ - isOpen, - title, - subTitle, - dialogRounded, - children, - onClose, - classes, - panelClasses, - titleClasses, - closeClass, - weightIcon, - bgColor, - dataTest, - hideCloseButton, -}: BaseDialogProps): JSX.Element => { - return ( -
-
-
- {title ? ( -
- - {title} - - {subTitle} -
- ) : null} - {hideCloseButton ? null : ( -
- -
- )} -
- {children} -
-
- ); -}; - -export default BaseDialog; diff --git a/src/components/Card.tsx b/src/components/Card.tsx deleted file mode 100644 index 8794a6511..000000000 --- a/src/components/Card.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { ReactNode } from 'react'; - -interface CardProps { - className?: string; - children: ReactNode; -} -export default function Card({ className = '', children }: Readonly): JSX.Element { - return ( -
- {children} -
- ); -} diff --git a/src/components/Copyable.tsx b/src/components/Copyable.tsx deleted file mode 100644 index ce92767c9..000000000 --- a/src/components/Copyable.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { Copy } from '@phosphor-icons/react'; -import { useState } from 'react'; -import Tooltip from './Tooltip'; -import { copyTextToClipboard } from 'utils/copyToClipboard.utils'; - -interface CopyableProps { - className?: string; - text: string; -} -export default function Copyable({ className = '', text }: Readonly): JSX.Element { - const [justCopied, setJustCopied] = useState(false); - - async function onCopy() { - await copyTextToClipboard(text); - setJustCopied(true); - setTimeout(() => setJustCopied(false), 1000); - } - return ( -
-

{text}

- - - -
- ); -} diff --git a/src/components/Empty.tsx b/src/components/Empty.tsx deleted file mode 100644 index 1d4602f4a..000000000 --- a/src/components/Empty.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { Upload } from '@phosphor-icons/react'; -import { ReactNode } from 'react'; -import { Button } from '@internxt/ui'; - -interface EmptyProps { - icon: JSX.Element; - title: string; - subtitle: string; - action?: { - text: string; - icon: typeof Upload; - style: 'plain' | 'elevated'; - onClick: () => void; - }; - contextMenuClick?: (event: any) => void; -} - -export default function Empty({ icon, title, subtitle, action, contextMenuClick }: Readonly): JSX.Element { - let button: ReactNode = null; - - if (action) { - button = ( - - ); - } - - return ( -
-
-
{icon}
-
-

{title}

-

{subtitle}

-
- {button} -
-
- ); -} diff --git a/src/components/Popover.tsx b/src/components/Popover.tsx deleted file mode 100644 index 77589b6ff..000000000 --- a/src/components/Popover.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { Popover as HPopover, Transition } from '@headlessui/react'; -import { ReactNode } from 'react'; - -interface PopoverProps { - childrenButton: ReactNode; - panel: ReactNode; - className?: string; - classButton?: string; -} -export default function Popover({ - childrenButton, - panel, - className, - classButton, -}: Readonly): JSX.Element { - return ( - - {childrenButton} - - - - {panel} - - - - ); -} diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx deleted file mode 100644 index f9b000ed7..000000000 --- a/src/components/Tooltip.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { ReactNode, useRef, useState } from 'react'; - -interface TooltipProps { - children: ReactNode; - title: string; - subtitle?: string; - popsFrom: 'right' | 'left' | 'top' | 'bottom'; - className?: string; - delayInMs?: number; -} -export default function Tooltip({ - children, - title, - subtitle, - popsFrom, - className, - delayInMs, -}: Readonly): JSX.Element { - const [visible, setVisible] = useState(false); - - const timeoutRef = useRef(null); - - function show() { - setVisible(true); - } - - function hide() { - setVisible(false); - } - - function handleMouseEnter() { - if (timeoutRef.current !== null) { - clearTimeout(timeoutRef.current); - } - show(); - } - function handleMouseLeave() { - if (delayInMs) { - timeoutRef.current = setTimeout(() => { - timeoutRef.current = null; - hide(); - }, delayInMs) as unknown as number; - } else { - hide(); - } - } - - let tooltipPosition = ''; - let trianglePosition = ''; - let triangle = ''; - - switch (popsFrom) { - case 'right': - tooltipPosition = 'left-full top-1/2 -translate-y-1/2 ml-1.5'; - trianglePosition = 'flex-row-reverse'; - triangle = 'polygon(100% 0%, 100% 100%, 0% 50%)'; - break; - case 'left': - tooltipPosition = 'right-full top-1/2 -translate-y-1/2 mr-1.5'; - trianglePosition = 'flex-row'; - triangle = 'polygon(0% 0%, 0% 100%, 100% 50%)'; - break; - case 'top': - tooltipPosition = 'bottom-full left-1/2 -translate-x-1/2 mb-1.5 origin-bottom'; - trianglePosition = 'flex-col'; - triangle = 'polygon(0% 0%, 100% 0%, 50% 100%)'; - break; - case 'bottom': - tooltipPosition = 'top-full left-1/2 -translate-x-1/2 mt-1.5'; - trianglePosition = 'flex-col-reverse'; - triangle = 'polygon(50% 0%, 0% 100%, 100% 100%)'; - break; - } - - return ( -
-
-
-

{title}

- {subtitle &&

{subtitle}

} -
-
-
- {children} -
- ); -} diff --git a/src/components/UsageDetails.tsx b/src/components/UsageDetails.tsx index 3a20fb6b7..cb1541a07 100644 --- a/src/components/UsageDetails.tsx +++ b/src/components/UsageDetails.tsx @@ -1,7 +1,7 @@ import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; import { useEffect, useRef, useState } from 'react'; import { bytesToString } from 'app/drive/services/size.service'; -import Tooltip from './Tooltip'; +import { Tooltip } from '@internxt/ui'; import { RootState } from 'app/store'; import { useAppSelector } from 'app/store/hooks'; diff --git a/src/components/index.ts b/src/components/index.ts index 1f88e8449..cbcdc6c1b 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,26 +1,20 @@ export { default as BaseButton } from './BaseButton'; -export { default as BaseDialog } from './BaseDialog'; export { default as BreadcrumbsBackupsView } from './BreadcrumbsBackupsView'; export { default as BreadcrumbsDriveView } from './BreadcrumbsDriveView'; export { default as BreadcrumbsMenuBackups } from './BreadcrumbsMenuBackups'; export { default as BreadcrumbsMenuDrive } from './BreadcrumbsMenuDrive'; export { default as BreadcrumbsMoveItemsDialogView } from './BreadcrumbsMoveItemsDialogView'; export * from './BreadcrumbsHelper'; -export { default as Card } from './Card'; -export { default as Copyable } from './Copyable'; -export { default as Empty } from './Empty'; export { default as ExpiredLinkView } from './ExpiredLinkView'; export { LoadingRowSkeleton } from './LoadingRowSkeleton'; export { OnboardingModal } from './OnBoardingModal'; export { default as PasswordInput } from './PasswordInput'; export { default as PasswordStrengthIndicator } from './PasswordStrengthIndicator'; -export { default as Popover } from './Popover'; export { default as PreparingWorkspaceAnimation } from './PreparingWorkspaceAnimation'; export { ScrollableTable } from './ScrollableTable'; export { default as Sidenav } from './SidenavWrapper'; export { skinSkeleton } from './Skeleton'; export { default as TextInput } from './TextInput'; -export { default as Tooltip } from './Tooltip'; export { default as TooltipElement, DELAY_SHOW_MS } from './TooltipElement'; export { Tutorial } from './Tutorial'; export type { Step } from './Tutorial'; diff --git a/src/hooks/useSidenavNavigation.tsx b/src/hooks/useSidenavNavigation.tsx index ab6c6849f..100fd4926 100644 --- a/src/hooks/useSidenavNavigation.tsx +++ b/src/hooks/useSidenavNavigation.tsx @@ -5,7 +5,7 @@ import { useSelector } from 'react-redux'; import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; import { useAppSelector } from 'app/store/hooks'; import workspacesSelectors from 'app/store/slices/workspaces/workspaces.selectors'; -import { SidenavOption } from '@internxt/ui/dist/components/sidenav/SidenavOptions'; +import { SidenavOption } from '@internxt/ui/dist/components/navigation/sidenav/SidenavOptions'; import { AppView } from 'app/core/types'; import { RootState } from 'app/store'; import localStorageService from 'services/local-storage.service'; diff --git a/src/views/Backups/components/BackupsAsFoldersList.tsx b/src/views/Backups/components/BackupsAsFoldersList.tsx index 9c16a6c75..25baf1775 100644 --- a/src/views/Backups/components/BackupsAsFoldersList.tsx +++ b/src/views/Backups/components/BackupsAsFoldersList.tsx @@ -2,8 +2,7 @@ import { skinSkeleton } from 'components/Skeleton'; import folderEmptyImage from '../../../assets/icons/light/folder-open.svg'; import { DriveItemData } from '../../../app/drive/types'; import { useTranslationContext } from '../../../app/i18n/provider/TranslationProvider'; -import Empty from 'components/Empty'; -import { List, MenuItemType } from '@internxt/ui'; +import { List, MenuItemType, Empty } from '@internxt/ui'; import BackupListItem from './BackupListItem'; interface BackupsAsFoldersListProps { diff --git a/src/views/Backups/components/DeviceList.tsx b/src/views/Backups/components/DeviceList.tsx index 3402bc759..b6e96e7fc 100644 --- a/src/views/Backups/components/DeviceList.tsx +++ b/src/views/Backups/components/DeviceList.tsx @@ -2,12 +2,11 @@ import desktopService from 'services/desktop.service'; import folderEmptyImage from '../../../assets/icons/light/folder-backup.svg'; import { DownloadSimple } from '@phosphor-icons/react'; -import Empty from 'components/Empty'; +import { List, Empty } from '@internxt/ui'; import { useTranslationContext } from '../../../app/i18n/provider/TranslationProvider'; import { contextMenuBackupItems } from 'views/Drive/components/DriveExplorer/components'; import { DriveFolderData } from 'app/drive/types'; import { skinSkeleton } from 'components/Skeleton'; -import { List } from '@internxt/ui'; import { Device } from '@internxt/sdk/dist/drive/backups/types'; import { DeviceNameCell, DeviceDateCell, DeviceSizeCell } from './DeviceListItem'; diff --git a/src/views/Drive/components/DriveExplorer/DriveExplorer.tsx b/src/views/Drive/components/DriveExplorer/DriveExplorer.tsx index d3ee4f926..5354a0654 100644 --- a/src/views/Drive/components/DriveExplorer/DriveExplorer.tsx +++ b/src/views/Drive/components/DriveExplorer/DriveExplorer.tsx @@ -9,7 +9,6 @@ import { NativeTypes } from 'react-dnd-html5-backend'; import folderEmptyImage from 'assets/icons/light/folder-open.svg'; import { transformDraggedItems } from 'services/drag-and-drop.service'; -import Empty from 'components/Empty'; import { AppDispatch, RootState } from 'app/store'; import { StorageFilters } from 'app/store/slices/storage/storage.model'; import { DriveExplorerGrid, DriveExplorerList, DriveTopBarActions } from './components'; @@ -18,7 +17,7 @@ import { useHotkeys } from 'react-hotkeys-hook'; import { moveItemsToTrash } from 'views/Trash/services'; import { WorkspaceData } from '@internxt/sdk/dist/workspaces'; -import { ContextMenu } from '@internxt/ui'; +import { ContextMenu, Empty } from '@internxt/ui'; import { t } from 'i18next'; import BannerWrapper from 'app/banners/BannerWrapper'; import deviceService from 'services/device.service'; diff --git a/src/views/Drive/components/DriveExplorer/components/DriveExplorerGrid.scss b/src/views/Drive/components/DriveExplorer/components/DriveExplorerGrid.scss deleted file mode 100644 index 70d381886..000000000 --- a/src/views/Drive/components/DriveExplorer/components/DriveExplorerGrid.scss +++ /dev/null @@ -1,9 +0,0 @@ -@tailwind components; - -@layer components { - .files-grid { - max-width: fit-content; - - @apply mb-2 grid min-w-full auto-rows-min grid-cols-2 gap-2 overflow-y-auto overflow-x-hidden sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6; - } -} diff --git a/src/views/Drive/components/DriveExplorer/components/DriveExplorerGrid.tsx b/src/views/Drive/components/DriveExplorer/components/DriveExplorerGrid.tsx index 9c4bb3fa7..c7461915f 100644 --- a/src/views/Drive/components/DriveExplorer/components/DriveExplorerGrid.tsx +++ b/src/views/Drive/components/DriveExplorer/components/DriveExplorerGrid.tsx @@ -1,14 +1,13 @@ import React, { FC, useEffect, useRef } from 'react'; import { connect } from 'react-redux'; - import { useAppDispatch } from 'app/store/hooks'; import { fetchSortedFolderContentThunk } from 'app/store/slices/storage/storage.thunks/fetchSortedFolderContentThunk'; import InfiniteScroll from 'react-infinite-scroll-component'; import { DriveItemData } from 'app/drive/types'; +import { Grid } from '@internxt/ui'; import DriveGridItemSkeleton from '../../DriveGridItemSkeleton'; import EditItemNameDialog from 'app/drive/components/EditItemNameDialog/EditItemNameDialog'; import DriveExplorerGridItem from './DriveExplorerGridItem'; -import './DriveExplorerGrid.scss'; interface DriveExplorerGridProps { folderId: string; @@ -93,7 +92,7 @@ const DriveExplorerGrid: FC = (props: DriveExplorerGridP return ( <> {isLoading && isFirstLoad.current ? ( -
{loadingSkeleton()}
+ {loadingSkeleton()} ) : (
= (props: DriveExplorerGridP dataLength={itemsList().length} next={onEndOfScroll} hasMore={hasMoreItems} - loader={loadingSkeleton()} + loader={{loadingSkeleton()}} scrollableTarget="scrollableList" - className="files-grid z-0 grow" + className="z-0 grow" style={{ overflow: 'visible' }} scrollThreshold={0.6} > - {itemsFolderList()} - {itemsFileList()} + + {itemsFolderList()} + {itemsFileList()} +
)} diff --git a/src/views/NewSettings/components/BillingPaymentMethodCard.tsx b/src/views/NewSettings/components/BillingPaymentMethodCard.tsx index 76855ab9c..93322b5b1 100644 --- a/src/views/NewSettings/components/BillingPaymentMethodCard.tsx +++ b/src/views/NewSettings/components/BillingPaymentMethodCard.tsx @@ -1,6 +1,5 @@ import { PaymentMethod, UserType } from '@internxt/sdk/dist/drive/payments/types/types'; -import { Button, Loader } from '@internxt/ui'; -import Card from 'components/Card'; +import { Button, Card, Loader } from '@internxt/ui'; import { t } from 'i18next'; import { useEffect, useState } from 'react'; diff --git a/src/views/NewSettings/components/Sections/Account/Account/containers/AccountUsageContainer.tsx b/src/views/NewSettings/components/Sections/Account/Account/containers/AccountUsageContainer.tsx index e83076a86..82f257469 100644 --- a/src/views/NewSettings/components/Sections/Account/Account/containers/AccountUsageContainer.tsx +++ b/src/views/NewSettings/components/Sections/Account/Account/containers/AccountUsageContainer.tsx @@ -7,8 +7,7 @@ import errorService from 'services/error.service'; import navigationService from 'services/navigation.service'; import usageService, { UsageDetailsProps } from 'app/drive/services/usage.service'; import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; -import { Button, Loader } from '@internxt/ui'; -import Card from 'components/Card'; +import { Button, Card, Loader } from '@internxt/ui'; import { PlanState } from 'app/store/slices/plan'; import { uiActions } from 'app/store/slices/ui'; import VerticalDivider from '../../../../VerticalDivider'; diff --git a/src/views/NewSettings/components/Sections/Account/Billing/containers/BillingAccountOverview.tsx b/src/views/NewSettings/components/Sections/Account/Billing/containers/BillingAccountOverview.tsx index e766a90b6..077b475de 100644 --- a/src/views/NewSettings/components/Sections/Account/Billing/containers/BillingAccountOverview.tsx +++ b/src/views/NewSettings/components/Sections/Account/Billing/containers/BillingAccountOverview.tsx @@ -7,9 +7,7 @@ import localStorageService from 'services/local-storage.service'; import navigationService from 'services/navigation.service'; import { bytesToString } from 'app/drive/services/size.service'; -import Card from 'components/Card'; - -import { Button } from '@internxt/ui'; +import { Button, Card } from '@internxt/ui'; import { PlanState } from 'app/store/slices/plan'; import { getNextBillingDate, getSubscriptionData } from '../../../../../utils'; diff --git a/src/views/NewSettings/components/Sections/Account/Security/components/ChangePassword.tsx b/src/views/NewSettings/components/Sections/Account/Security/components/ChangePassword.tsx index 9015344bc..03d7ea495 100644 --- a/src/views/NewSettings/components/Sections/Account/Security/components/ChangePassword.tsx +++ b/src/views/NewSettings/components/Sections/Account/Security/components/ChangePassword.tsx @@ -1,10 +1,9 @@ import { useState } from 'react'; import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings'; import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; -import ChangePasswordModal from './ChangePasswordModal'; +import { Button, Card } from '@internxt/ui'; import Section from '../../../General/components/Section'; -import Card from 'components/Card'; -import { Button } from '@internxt/ui'; +import ChangePasswordModal from './ChangePasswordModal'; const ChangePassword = ({ currentPassword, diff --git a/src/views/NewSettings/components/Sections/Account/Security/components/EnterPassword.tsx b/src/views/NewSettings/components/Sections/Account/Security/components/EnterPassword.tsx index 9d9fc19e5..c49d12dfb 100644 --- a/src/views/NewSettings/components/Sections/Account/Security/components/EnterPassword.tsx +++ b/src/views/NewSettings/components/Sections/Account/Security/components/EnterPassword.tsx @@ -4,8 +4,7 @@ import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; import { areCredentialsCorrect } from 'services/auth.service'; import errorService from 'services/error.service'; -import { Button, Input } from '@internxt/ui'; -import Card from 'components/Card'; +import { Button, Card, Input } from '@internxt/ui'; const EnterPassword = ({ onUnlock, diff --git a/src/views/NewSettings/components/Sections/Account/Security/components/ExportBackupKey.tsx b/src/views/NewSettings/components/Sections/Account/Security/components/ExportBackupKey.tsx index 81877c8d2..52427b5a4 100644 --- a/src/views/NewSettings/components/Sections/Account/Security/components/ExportBackupKey.tsx +++ b/src/views/NewSettings/components/Sections/Account/Security/components/ExportBackupKey.tsx @@ -1,7 +1,6 @@ import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; import { handleExportBackupKey } from 'utils/backupKeyUtils'; -import { Button } from '@internxt/ui'; -import Card from 'components/Card'; +import { Button, Card } from '@internxt/ui'; import Section from '../../../General/components/Section'; const ExportBackupKey = (): JSX.Element => { diff --git a/src/views/NewSettings/components/Sections/Account/Security/components/TwoFactorAuthentication.tsx b/src/views/NewSettings/components/Sections/Account/Security/components/TwoFactorAuthentication.tsx index a85ebfb33..08f6f1597 100644 --- a/src/views/NewSettings/components/Sections/Account/Security/components/TwoFactorAuthentication.tsx +++ b/src/views/NewSettings/components/Sections/Account/Security/components/TwoFactorAuthentication.tsx @@ -1,9 +1,8 @@ import { useState, useEffect } from 'react'; import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; import { userHas2FAStored } from 'services/auth.service'; +import { Button, Card, Loader } from '@internxt/ui'; import Section from '../../../General/components/Section'; -import Card from 'components/Card'; -import { Button, Loader } from '@internxt/ui'; import TwoFactorAuthenticationEnableModal from './TwoFactorAuthenticationEnableModal'; import TwoFactorAuthenticationDisableModal from './TwoFactorAuthenticationDisableModal'; diff --git a/src/views/NewSettings/components/Sections/Account/Security/components/TwoFactorAuthenticationEnableModal.tsx b/src/views/NewSettings/components/Sections/Account/Security/components/TwoFactorAuthenticationEnableModal.tsx index 563696d17..0a043bfe9 100644 --- a/src/views/NewSettings/components/Sections/Account/Security/components/TwoFactorAuthenticationEnableModal.tsx +++ b/src/views/NewSettings/components/Sections/Account/Security/components/TwoFactorAuthenticationEnableModal.tsx @@ -1,11 +1,10 @@ import { Warning } from '@phosphor-icons/react'; import { useEffect, useState } from 'react'; import authService, { generateNew2FA } from 'services/auth.service'; -import { Button, Input, Loader, Modal } from '@internxt/ui'; +import { Button, Copyable, Input, Loader, Modal } from '@internxt/ui'; import appStoreIcon from 'app/../assets/icons/app-store.svg'; import playStoreIcon from 'app/../assets/icons/play-store.svg'; import useEffectAsync from 'hooks/useEffectAsync'; -import Copyable from 'components/Copyable'; import notificationsService, { ToastType } from 'app/notifications/services/notifications.service'; import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; import errorService from 'services/error.service'; @@ -70,7 +69,7 @@ const TwoFactorAuthenticationEnableModal = ({

{translate('views.account.tabs.security.2FA.modal.or')}

- +

{translate('views.account.tabs.security.2FA.modal.steps.qr.description')}

@@ -84,7 +83,7 @@ const TwoFactorAuthenticationEnableModal = ({ const backupKeyStep = (
- {qr && } + {qr && }

diff --git a/src/views/NewSettings/components/Sections/General/components/Language.tsx b/src/views/NewSettings/components/Sections/General/components/Language.tsx index c3f8eb82c..41cc05a8c 100644 --- a/src/views/NewSettings/components/Sections/General/components/Language.tsx +++ b/src/views/NewSettings/components/Sections/General/components/Language.tsx @@ -4,10 +4,10 @@ import i18next from 'i18next'; import React, { useEffect } from 'react'; import localStorageService from 'services/local-storage.service'; import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; -import Card from 'components/Card'; import ItemsDropdown from './ItemsDropdown'; import MenuItem from './MenuItem'; import Section from './Section'; +import { Card } from '@internxt/ui'; const localStorageLanguage = localStorageService.get('i18nextLng'); diff --git a/src/views/NewSettings/components/Sections/Workspace/Billing/BillingDetailsCard.tsx b/src/views/NewSettings/components/Sections/Workspace/Billing/BillingDetailsCard.tsx index 01b319650..814af96f5 100644 --- a/src/views/NewSettings/components/Sections/Workspace/Billing/BillingDetailsCard.tsx +++ b/src/views/NewSettings/components/Sections/Workspace/Billing/BillingDetailsCard.tsx @@ -1,7 +1,6 @@ import { t } from 'i18next'; -import { Button } from '@internxt/ui'; -import Card from 'components/Card'; +import { Button, Card } from '@internxt/ui'; import { BillingDetailsCardProps } from '../../../../types/types'; import Detail from './Detail'; diff --git a/src/views/NewSettings/components/Sections/Workspace/Billing/UpdateMembersCard.tsx b/src/views/NewSettings/components/Sections/Workspace/Billing/UpdateMembersCard.tsx index de643b551..0ee76e284 100644 --- a/src/views/NewSettings/components/Sections/Workspace/Billing/UpdateMembersCard.tsx +++ b/src/views/NewSettings/components/Sections/Workspace/Billing/UpdateMembersCard.tsx @@ -1,6 +1,5 @@ -import { Button, Loader } from '@internxt/ui'; +import { Button, Card, Loader } from '@internxt/ui'; import { Translate } from 'app/i18n/types'; -import Card from 'components/Card'; interface UpdateMembersCardProps { totalWorkspaceSeats: number; diff --git a/src/views/NewSettings/components/Sections/Workspace/Billing/containers/BillingWorkspaceOverview.tsx b/src/views/NewSettings/components/Sections/Workspace/Billing/containers/BillingWorkspaceOverview.tsx index a1ac5b2ee..3bd41b0f0 100644 --- a/src/views/NewSettings/components/Sections/Workspace/Billing/containers/BillingWorkspaceOverview.tsx +++ b/src/views/NewSettings/components/Sections/Workspace/Billing/containers/BillingWorkspaceOverview.tsx @@ -2,8 +2,7 @@ import { t } from 'i18next'; import localStorageService from 'services/local-storage.service'; import { bytesToString } from 'app/drive/services/size.service'; - -import Card from 'components/Card'; +import { Card } from '@internxt/ui'; import { UserType } from '@internxt/sdk/dist/drive/payments/types/types'; import { PlanState } from 'app/store/slices/plan'; diff --git a/src/views/NewSettings/components/Sections/Workspace/Members/InviteDialog.tsx b/src/views/NewSettings/components/Sections/Workspace/Members/InviteDialog.tsx index 786590e65..9589faa67 100644 --- a/src/views/NewSettings/components/Sections/Workspace/Members/InviteDialog.tsx +++ b/src/views/NewSettings/components/Sections/Workspace/Members/InviteDialog.tsx @@ -4,8 +4,7 @@ import { UserPlus, X } from '@phosphor-icons/react'; import { useForm } from 'react-hook-form'; import { IFormValues } from 'app/core/types'; import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; -import { Button, Modal, Checkbox, Input } from '@internxt/ui'; -import Card from 'components/Card'; +import { Button, Card, Modal, Checkbox, Input } from '@internxt/ui'; import TextArea from '../../Account/Account/components/TextArea'; import UserCard from './components/UserCard'; diff --git a/src/views/NewSettings/components/Sections/Workspace/Members/MembersSection.tsx b/src/views/NewSettings/components/Sections/Workspace/Members/MembersSection.tsx index 3b72affee..5a7c98830 100644 --- a/src/views/NewSettings/components/Sections/Workspace/Members/MembersSection.tsx +++ b/src/views/NewSettings/components/Sections/Workspace/Members/MembersSection.tsx @@ -7,8 +7,7 @@ import { bytesToString } from 'app/drive/services/size.service'; import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; import UsageBar from '../../../Usage/UsageBar'; import { getMemberRole, searchMembers } from '../../../../utils'; -import { Button, Input } from '@internxt/ui'; -import Card from 'components/Card'; +import { Button, Card, Input } from '@internxt/ui'; import { RootState } from 'app/store'; import { useAppSelector } from 'app/store/hooks'; import workspacesSelectors from 'app/store/slices/workspaces/workspaces.selectors'; diff --git a/src/views/NewSettings/components/Sections/Workspace/Members/containers/MemberDetailsContainer.tsx b/src/views/NewSettings/components/Sections/Workspace/Members/containers/MemberDetailsContainer.tsx index 754ce631a..0a0cdcfe0 100644 --- a/src/views/NewSettings/components/Sections/Workspace/Members/containers/MemberDetailsContainer.tsx +++ b/src/views/NewSettings/components/Sections/Workspace/Members/containers/MemberDetailsContainer.tsx @@ -10,7 +10,6 @@ import { workspaceThunks } from 'app/store/slices/workspaces/workspacesStore'; import { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; -import Card from 'components/Card'; import { MemberRole } from '../../../../../types/types'; import DeactivateMemberModal from '../components/DeactivateModal'; import LeaveMemberModal from '../components/LeaveModal'; @@ -18,7 +17,7 @@ import ReactivateMemberModal from '../components/ReactivateModal'; import RemoveMemberModal from '../components/RemoveModal'; import RequestPasswordChangeModal from '../components/RequestPasswordModal'; import UserCard from '../components/UserCard'; -import { Loader } from '@internxt/ui'; +import { Card, Loader } from '@internxt/ui'; import { RootState } from 'app/store'; import { ActionDialog } from 'app/contexts/dialog-manager/ActionDialogManager.context'; import { useActionDialog } from 'app/contexts/dialog-manager/useActionDialog'; diff --git a/src/views/NewSettings/components/Sections/Workspace/Overview/OverviewSection.tsx b/src/views/NewSettings/components/Sections/Workspace/Overview/OverviewSection.tsx index 6737f0efb..6451719b0 100644 --- a/src/views/NewSettings/components/Sections/Workspace/Overview/OverviewSection.tsx +++ b/src/views/NewSettings/components/Sections/Workspace/Overview/OverviewSection.tsx @@ -1,6 +1,6 @@ import { UserType } from '@internxt/sdk/dist/drive/payments/types/types'; import { WorkspaceTeam, WorkspaceUser } from '@internxt/sdk/dist/workspaces'; -import { Button, Dropdown, Loader, Modal } from '@internxt/ui'; +import { Button, Card, Dropdown, Loader, Modal } from '@internxt/ui'; import { PencilSimple } from '@phosphor-icons/react'; import { t } from 'i18next'; import { useEffect, useState } from 'react'; @@ -12,7 +12,6 @@ import { UsageDetailsProps } from 'app/drive/services/usage.service'; import Section from '../../../Section'; import DetailsInput from '../../../DetailsInput'; import notificationsService, { ToastType } from 'app/notifications/services/notifications.service'; -import Card from 'components/Card'; import { RootState } from 'app/store'; import { useAppDispatch, useAppSelector } from 'app/store/hooks'; import { PlanState } from 'app/store/slices/plan'; diff --git a/src/views/NewSettings/components/Usage/UsageBar.tsx b/src/views/NewSettings/components/Usage/UsageBar.tsx index c966bc4aa..629908230 100644 --- a/src/views/NewSettings/components/Usage/UsageBar.tsx +++ b/src/views/NewSettings/components/Usage/UsageBar.tsx @@ -1,6 +1,6 @@ import { useEffect, useRef, useState } from 'react'; import { bytesToString } from 'app/drive/services/size.service'; -import Tooltip from 'components/Tooltip'; +import { Tooltip } from '@internxt/ui'; const UsageBar = ({ backupsUsage, diff --git a/src/views/NewSettings/components/containers/InvoicesContainer.tsx b/src/views/NewSettings/components/containers/InvoicesContainer.tsx index 7c99d3295..dd774f259 100644 --- a/src/views/NewSettings/components/containers/InvoicesContainer.tsx +++ b/src/views/NewSettings/components/containers/InvoicesContainer.tsx @@ -1,7 +1,7 @@ import { Invoice, UserType } from '@internxt/sdk/dist/drive/payments/types/types'; import { useTranslationContext } from 'app/i18n/provider/TranslationProvider'; import Section from '../Sections/General/components/Section'; -import Card from 'components/Card'; +import { Card } from '@internxt/ui'; import InvoicesList from '../../components/Invoices/InvoicesList'; import { useEffect, useState } from 'react'; import { paymentService } from 'views/Checkout/services'; diff --git a/src/views/Shared/components/EmptySharedView.tsx b/src/views/Shared/components/EmptySharedView.tsx index c9210f46a..da972c002 100644 --- a/src/views/Shared/components/EmptySharedView.tsx +++ b/src/views/Shared/components/EmptySharedView.tsx @@ -1,6 +1,6 @@ import { UploadSimple, Users } from '@phosphor-icons/react'; import { useTranslationContext } from '../../../app/i18n/provider/TranslationProvider'; -import Empty from 'components/Empty'; +import { Empty } from '@internxt/ui'; import folderEmptyImage from '../../../assets/icons/light/folder-open.svg'; import { SharedNamePath } from '../../../app/share/types'; diff --git a/src/views/Shared/components/ShareItemDialog/ShareItemDialog.tsx b/src/views/Shared/components/ShareItemDialog/ShareItemDialog.tsx index 6adb33e43..456604bd7 100644 --- a/src/views/Shared/components/ShareItemDialog/ShareItemDialog.tsx +++ b/src/views/Shared/components/ShareItemDialog/ShareItemDialog.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import { DriveItemData } from '../../../../app/drive/types'; import { uiActions } from '../../../../app/store/slices/ui'; -import BaseDialog from 'components/BaseDialog'; +import { BaseDialog } from '@internxt/ui'; import './ShareItemDialog.scss'; import { storageActions } from '../../../../app/store/slices/storage'; import notificationsService, { ToastType } from '../../../../app/notifications/services/notifications.service'; diff --git a/yarn.lock b/yarn.lock index 63978bd44..e3960e201 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1914,10 +1914,10 @@ axios "1.13.6" internxt-crypto "0.0.14" -"@internxt/ui@=0.1.8": - version "0.1.8" - resolved "https://registry.yarnpkg.com/@internxt/ui/-/ui-0.1.8.tgz#563e266b431b9817a2dd6dd3a39d356a54c081db" - integrity sha512-h60suo8azArfm9/sTNQ0pzstPgu802z00gPXE/bnqhE8SyxYeIg3cUlmUAc8avuVOmErSqI5BcNN40JdVRj9NA== +"@internxt/ui@=0.1.15": + version "0.1.15" + resolved "https://registry.yarnpkg.com/@internxt/ui/-/ui-0.1.15.tgz#305e846837a8519bdea63eb17900bbf3aed2b09c" + integrity sha512-dxJlZSecIR67aEGI76CLHQ60GUkUjrMJfHeIVdd+528gm8Lz9yx7mr/bWCKfbpmbv5j9Oyvp5wBuFUfx/bxRLw== dependencies: "@internxt/css-config" "1.1.0" "@phosphor-icons/react" "^2.1.10"