From c1c196efbdcdffc24ea74012b93bedac17a855e7 Mon Sep 17 00:00:00 2001 From: Valera Melnikov Date: Fri, 16 Aug 2024 17:23:57 +0300 Subject: [PATCH] chore: use ads icons (#35633) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description Why did this PR appear? I wanted to replace the icons from `ads-old` with the icons from `ads`. After that, I had to fix some affected components in `ads-old` and in the main app. In the process, I discovered that a large amount of code is simply not being used. ## Automation /ok-to-test tags="@tag.All" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: 86491f43aff37e34468fb7dc32722b9ef2ec60c9 > Cypress dashboard. > Tags: `@tag.All` > Spec: >
Fri, 16 Aug 2024 13:28:03 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No ## Summary by CodeRabbit - **New Features** - Improved precision in UI element targeting for enhanced test reliability. - Broadened icon options within the FilePickerComponent for greater flexibility. - **Improvements** - Shifted component imports to a centralized design system for better consistency. - Simplified prop structures for the Button component to enhance clarity. - Enhanced validation utilities available for form handling and input validation. - **Bug Fixes** - Enhanced robustness of element locators, reducing potential UI interaction issues. - **Refactor** - Adjusted component properties to align with updated design guidelines, promoting semantic usage. - Consolidated exports to emphasize type definitions and utility functions for better maintainability. - **Chores** - Cleaned up imports and updated code structure for improved maintainability. --- app/client/cypress/locators/HomePage.js | 4 +- .../design-system/ads-old/create_story.sh | 10 - .../design-system/ads-old/package.json | 4 +- .../ads-old/src/AppIcon/index.tsx | 2 +- .../ads-old/src/Breadcrumbs/index.tsx | 118 -- .../ads-old/src/Button/Button.test.tsx | 46 - .../ads-old/src/Button/index.tsx | 581 ------- .../ads-old/src/DialogComponent/index.tsx | 12 +- .../ads-old/src/DisplayImageUpload/index.tsx | 4 +- .../ads-old/src/Dropdown/index.tsx | 1349 +---------------- .../src/EditableTextSubComponent/index.tsx | 36 +- .../ads-old/src/FilePickerV2/index.tsx | 49 +- .../ads-old/src/GifPlayer/index.tsx | 4 +- .../design-system/ads-old/src/Icon/index.tsx | 982 ------------ .../ads-old/src/IconSelector/index.tsx | 2 +- .../ads-old/src/MenuItem/index.tsx | 15 +- .../ads-old/src/Spinner/index.tsx | 59 - .../design-system/ads-old/src/Table/index.tsx | 9 +- .../design-system/ads-old/src/Tabs/index.tsx | 426 ------ .../ads-old/src/TextInput/index.tsx | 475 ------ .../ads-old/src/TreeDropdown/index.tsx | 4 +- .../ads-old/src/constants/classes.ts | 2 +- .../design-system/ads-old/src/index.ts | 26 +- .../ads-old/src/utils/emailValidator.ts | 21 + .../ads-old/src/utils/notEmptyValidator.ts | 9 + .../design-system/ads/src/Icon/index.ts | 1 + .../src/components/TabItemBackgroundFill.tsx | 5 +- .../editorComponents/ActionCreator/types.ts | 9 +- .../editorComponents/EntityBottomTabs.tsx | 27 +- .../PartialImportModal/index.tsx | 4 +- .../form/fields/NumberField.tsx | 41 - .../formControls/InputNumberControl.tsx | 61 - .../propertyControls/StyledControls.tsx | 17 +- .../components/utils/ReduxFormTextField.tsx | 3 +- .../src/components/utils/helperComponents.tsx | 2 +- app/client/src/constants/AppConstants.ts | 12 - .../AdminSettings/SettingsBreadcrumbs.tsx | 26 - .../pages/AppViewer/Navigation/Sidebar.tsx | 1 - .../pages/AppViewer/Navigation/TopInline.tsx | 16 - .../Navigation/components/MenuItem.tsx | 37 +- .../components/MoreDropdownButton.tsx | 57 +- .../pages/Editor/APIEditor/ApiRightPane.tsx | 4 +- .../AppSettings/NavigationSettings/index.tsx | 125 -- .../Editor/DataSourceEditor/Collapsible.tsx | 2 +- .../pages/Editor/EditorName/EditableName.tsx | 1 - .../src/pages/Editor/EditorName/index.tsx | 1 - .../Editor/Explorer/Libraries/Installer.tsx | 2 +- .../GeneratePageForm/GeneratePageForm.tsx | 15 +- .../IntegrationsHomeScreen.tsx | 403 ----- .../pages/Editor/IntegrationEditor/index.tsx | 33 - .../gitSync/components/DangerMenuItem.tsx | 20 - .../gitSync/components/DatasourceListItem.tsx | 2 +- .../gitSync/components/OptionSelector.tsx | 73 - .../Editor/gitSync/components/TabItem.tsx | 6 +- app/client/src/pages/common/ImportModal.tsx | 4 +- app/client/src/pages/common/MobileSidebar.tsx | 2 +- .../SearchBar/ApplicationSearchItem.tsx | 6 +- app/client/src/pages/common/ThemeSwitcher.tsx | 27 - app/client/src/widgets/WidgetUtils.ts | 3 - 59 files changed, 156 insertions(+), 5141 deletions(-) delete mode 100755 app/client/packages/design-system/ads-old/create_story.sh delete mode 100644 app/client/packages/design-system/ads-old/src/Breadcrumbs/index.tsx delete mode 100644 app/client/packages/design-system/ads-old/src/Button/Button.test.tsx delete mode 100644 app/client/packages/design-system/ads-old/src/Button/index.tsx delete mode 100644 app/client/packages/design-system/ads-old/src/Icon/index.tsx delete mode 100644 app/client/packages/design-system/ads-old/src/Spinner/index.tsx delete mode 100644 app/client/packages/design-system/ads-old/src/Tabs/index.tsx delete mode 100644 app/client/packages/design-system/ads-old/src/TextInput/index.tsx create mode 100644 app/client/packages/design-system/ads-old/src/utils/emailValidator.ts create mode 100644 app/client/packages/design-system/ads-old/src/utils/notEmptyValidator.ts delete mode 100644 app/client/src/components/editorComponents/form/fields/NumberField.tsx delete mode 100644 app/client/src/components/formControls/InputNumberControl.tsx delete mode 100644 app/client/src/pages/AdminSettings/SettingsBreadcrumbs.tsx delete mode 100644 app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx delete mode 100644 app/client/src/pages/Editor/IntegrationEditor/index.tsx delete mode 100644 app/client/src/pages/Editor/gitSync/components/DangerMenuItem.tsx delete mode 100644 app/client/src/pages/Editor/gitSync/components/OptionSelector.tsx delete mode 100644 app/client/src/pages/common/ThemeSwitcher.tsx diff --git a/app/client/cypress/locators/HomePage.js b/app/client/cypress/locators/HomePage.js index 87b2178b14..bbb0675551 100644 --- a/app/client/cypress/locators/HomePage.js +++ b/app/client/cypress/locators/HomePage.js @@ -86,7 +86,7 @@ export default { shareUserIcons: ".t--workspace-share-user-icons", toastMessage: "div.Toastify__toast", uploadLogo: "//div/form/input", - removeLogo: ".remove-button a span", + removeLogo: "[data-testid=t--remove-logo]", generalTab: "//li//span[text()='General']", membersTab: "//li//span[text()='Members']", cancelBtn: "//span[text()='Cancel']", @@ -105,5 +105,5 @@ export default { noEntityFound:".no-search-results", initialWorkspace:"[data-testid^='Untitled workspace']", initialApplication:"[data-testid^='Untitled application']", - _entitySearchBar:"[data-testid='t--application-search-input']"; + _entitySearchBar:"[data-testid='t--application-search-input']" }; diff --git a/app/client/packages/design-system/ads-old/create_story.sh b/app/client/packages/design-system/ads-old/create_story.sh deleted file mode 100755 index f878b5c58c..0000000000 --- a/app/client/packages/design-system/ads-old/create_story.sh +++ /dev/null @@ -1,10 +0,0 @@ -# usage ./create_story.sh -f -while getopts f: flag -do - case "${flag}" in - f) folder=${OPTARG};; - esac -done - -echo "Creating story for folder: $folder" -cat story_template.txt >> src/$folder/$folder.stories.tsx diff --git a/app/client/packages/design-system/ads-old/package.json b/app/client/packages/design-system/ads-old/package.json index a5617c98bc..1d9aa8be14 100644 --- a/app/client/packages/design-system/ads-old/package.json +++ b/app/client/packages/design-system/ads-old/package.json @@ -5,10 +5,8 @@ "main": "src/index.ts", "sideEffects": false, "scripts": { - "create-story": "./create_story.sh", "lint": "yarn g:lint", - "prettier": "yarn g:prettier", - "test:unit": "yarn g:jest" + "prettier": "yarn g:prettier" }, "contributors": [ "Albin ", diff --git a/app/client/packages/design-system/ads-old/src/AppIcon/index.tsx b/app/client/packages/design-system/ads-old/src/AppIcon/index.tsx index 664db42a9e..f5819af080 100644 --- a/app/client/packages/design-system/ads-old/src/AppIcon/index.tsx +++ b/app/client/packages/design-system/ads-old/src/AppIcon/index.tsx @@ -272,7 +272,7 @@ const ServerLineIcon = importRemixIcon( async () => import("remixicon-react/ServerLineIcon"), ); -enum Size { +export enum Size { xxs = "xxs", xs = "xs", small = "small", diff --git a/app/client/packages/design-system/ads-old/src/Breadcrumbs/index.tsx b/app/client/packages/design-system/ads-old/src/Breadcrumbs/index.tsx deleted file mode 100644 index f2a41f4636..0000000000 --- a/app/client/packages/design-system/ads-old/src/Breadcrumbs/index.tsx +++ /dev/null @@ -1,118 +0,0 @@ -// TODO: In Phase 2, add a warn when this component doesn't have a component in it's ancestors -import type { ReactNode } from "react"; -import React from "react"; -import { Link, useLocation } from "react-router-dom"; -import styled from "styled-components"; -import Icon from "../Icon"; - -export interface BreadcrumbsProps { - items: { - href: string; - text: string; - }[]; -} -export interface BreadcrumbProps { - children: ReactNode; -} - -export const StyledBreadcrumbList = styled.ol` - list-style: none; - display: flex; - align-items: center; - font-size: 16px; - color: var(--ads-breadcrumbs-list-text-color); - margin-bottom: 23px; - - .breadcrumb-separator { - color: var(--ads-breadcrumbs-separator-text-color); - margin: auto 6px; - user-select: none; - } - - .t--breadcrumb-item { - &.active { - color: var(--ads-breadcrumbs-active-text-color); - font-size: 20px; - } - } -`; - -function BreadcrumbSeparator({ children, ...props }: { children: ReactNode }) { - return ( -
  • - {children} -
    • - ); -} - -function BreadcrumbItem({ children, ...props }: { children: ReactNode }) { - return ( -
  • - {children} -
    • - ); -} - -function BreadcrumbList(props: BreadcrumbProps) { - let children = React.Children.toArray(props.children); - - children = children.map((child, index) => ( - {child} - )); - - const lastIndex = children.length - 1; - - const childrenNew = children.reduce((acc: ReactNode[], child, index) => { - const notLast = index < lastIndex; - - if (notLast) { - acc.push( - child, - - - , - ); - } else { - acc.push(child); - } - return acc; - }, []); - - return ( - - {childrenNew} - - ); -} - -function Breadcrumbs(props: BreadcrumbsProps) { - const { pathname } = useLocation(); - return ( - - {props.items.map(({ href, text }) => - href === pathname ? ( - - {text} - - ) : ( - - {text} - - ), - )} - - ); -} - -export default Breadcrumbs; diff --git a/app/client/packages/design-system/ads-old/src/Button/Button.test.tsx b/app/client/packages/design-system/ads-old/src/Button/Button.test.tsx deleted file mode 100644 index db0dd79888..0000000000 --- a/app/client/packages/design-system/ads-old/src/Button/Button.test.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from "react"; -import "@testing-library/jest-dom"; -import { render, screen } from "@testing-library/react"; -import Button, { Size } from "./index"; -import { create } from "react-test-renderer"; - -describe(" )} @@ -466,13 +456,14 @@ function FilePickerComponent(props: FilePickerProps) {
    ); @@ -493,7 +484,7 @@ function FilePickerComponent(props: FilePickerProps) { removeFile()}> - +
    diff --git a/app/client/packages/design-system/ads-old/src/GifPlayer/index.tsx b/app/client/packages/design-system/ads-old/src/GifPlayer/index.tsx index 91d8b9c9f6..7c0b7e81fc 100644 --- a/app/client/packages/design-system/ads-old/src/GifPlayer/index.tsx +++ b/app/client/packages/design-system/ads-old/src/GifPlayer/index.tsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; import styled from "styled-components"; -import Icon, { IconSize } from "../Icon"; +import { Icon } from "@appsmith/ads"; import Text, { TextType } from "../Text"; import { Classes } from "../constants/classes"; @@ -60,7 +60,7 @@ function GifPlayer(props: GifPlayerProps) { - + Click to play diff --git a/app/client/packages/design-system/ads-old/src/Icon/index.tsx b/app/client/packages/design-system/ads-old/src/Icon/index.tsx deleted file mode 100644 index 3fa4c31f06..0000000000 --- a/app/client/packages/design-system/ads-old/src/Icon/index.tsx +++ /dev/null @@ -1,982 +0,0 @@ -import type { Ref } from "react"; -import React, { forwardRef } from "react"; -import styled from "styled-components"; -import type { CommonComponentProps } from "../types/common"; -import { Classes } from "../constants/classes"; -import { noop } from "lodash"; -import Spinner from "../Spinner"; -import { ControlIcons } from "../ControlIcons"; -import { importRemixIcon, importSvg } from "../utils/icon-loadables"; -const ClearInterval = importSvg( - async () => import("../assets/icons/action/clearInterval.svg"), -); -const ClearStore = importSvg( - async () => import("../assets/icons/action/clearStore.svg"), -); -const CopyToClipboard = importSvg( - async () => import("../assets/icons/action/copyToClipboard.svg"), -); -const DownloadAction = importSvg( - async () => import("../assets/icons/action/download.svg"), -); -const ExecuteJs = importSvg( - async () => import("../assets/icons/action/executeJs.svg"), -); -const ExecuteQuery = importSvg( - async () => import("../assets/icons/action/executeQuery.svg"), -); -const GetGeolocation = importSvg( - async () => import("../assets/icons/action/getGeolocation.svg"), -); -const Modal = importSvg(async () => import("../assets/icons/action/modal.svg")); -const NavigateTo = importSvg( - async () => import("../assets/icons/action/navigateTo.svg"), -); -const RemoveStore = importSvg( - async () => import("../assets/icons/action/removeStore.svg"), -); -const ResetWidget = importSvg( - async () => import("../assets/icons/action/resetWidget.svg"), -); -const SetInterval = importSvg( - async () => import("../assets/icons/action/setInterval.svg"), -); -const ShowAlert = importSvg( - async () => import("../assets/icons/action/showAlert.svg"), -); -const StopWatchGeolocation = importSvg( - async () => import("../assets/icons/action/stopWatchGeolocation.svg"), -); -const StoreValue = importSvg( - async () => import("../assets/icons/action/storeValue.svg"), -); -const WatchGeolocation = importSvg( - async () => import("../assets/icons/action/watchGeolocation.svg"), -); -const RunAPI = importSvg( - async () => import("../assets/icons/action/runApi.svg"), -); -const PostMessage = importSvg( - async () => import("../assets/icons/action/postMessage.svg"), -); -const NoAction = importSvg( - async () => import("../assets/icons/action/noAction.svg"), -); -const BookLineIcon = importSvg( - async () => import("../assets/icons/ads/book-open-line.svg"), -); -const BugIcon = importSvg(async () => import("../assets/icons/ads/bug.svg")); -const CancelIcon = importSvg( - async () => import("../assets/icons/ads/cancel.svg"), -); -const CrossIcon = importSvg( - async () => import("../assets/icons/ads/cross.svg"), -); -const Fork2Icon = importSvg( - async () => import("../assets/icons/ads/fork-2.svg"), -); -const OpenIcon = importSvg(async () => import("../assets/icons/ads/open.svg")); -const UserIcon = importSvg(async () => import("../assets/icons/ads/user.svg")); -const GeneralIcon = importSvg( - async () => import("../assets/icons/ads/general.svg"), -); -const BillingIcon = importSvg( - async () => import("../assets/icons/ads/billing.svg"), -); -const ErrorIcon = importSvg( - async () => import("../assets/icons/ads/error.svg"), -); -const ShineIcon = importSvg( - async () => import("../assets/icons/ads/shine.svg"), -); -const SuccessIcon = importSvg( - async () => import("../assets/icons/ads/success.svg"), -); -const CloseIcon = importSvg( - async () => import("../assets/icons/ads/close.svg"), -); -const WarningTriangleIcon = importSvg( - async () => import("../assets/icons/ads/warning-triangle.svg"), -); -const ShareIcon2 = importSvg( - async () => import("../assets/icons/ads/share-2.svg"), -); -const InviteUserIcon = importSvg( - async () => import("../assets/icons/ads/invite-users.svg"), -); -const ManageIcon = importSvg( - async () => import("../assets/icons/ads/manage.svg"), -); -const ArrowLeft = importSvg( - async () => import("../assets/icons/ads/arrow-left.svg"), -); -const ChevronLeft = importSvg( - async () => import("../assets/icons/ads/chevron_left.svg"), -); -const LinkIcon = importSvg(async () => import("../assets/icons/ads/link.svg")); -const NoResponseIcon = importSvg( - async () => import("../assets/icons/ads/no-response.svg"), -); -const LightningIcon = importSvg( - async () => import("../assets/icons/ads/lightning.svg"), -); -const TrendingFlat = importSvg( - async () => import("../assets/icons/ads/trending-flat.svg"), -); -const PlayIcon = importSvg(async () => import("../assets/icons/ads/play.svg")); -const DesktopIcon = importSvg( - async () => import("../assets/icons/ads/desktop.svg"), -); -const WandIcon = importSvg(async () => import("../assets/icons/ads/wand.svg")); -const MobileIcon = importSvg( - async () => import("../assets/icons/ads/mobile.svg"), -); -const TabletIcon = importSvg( - async () => import("../assets/icons/ads/tablet.svg"), -); -const TabletLandscapeIcon = importSvg( - async () => import("../assets/icons/ads/tablet-landscape.svg"), -); -const FluidIcon = importSvg( - async () => import("../assets/icons/ads/fluid.svg"), -); -const CardContextMenu = importSvg( - async () => import("../assets/icons/ads/card-context-menu.svg"), -); -const SendButton = importSvg( - async () => import("../assets/icons/comments/send-button.svg"), -); -const Pin = importSvg(async () => import("../assets/icons/comments/pin.svg")); -const TrashOutline = importSvg( - async () => import("../assets/icons/form/trash.svg"), -); -const ReadPin = importSvg( - async () => import("../assets/icons/comments/read-pin.svg"), -); -const UnreadPin = importSvg( - async () => import("../assets/icons/comments/unread-pin.svg"), -); -const Chat = importSvg(async () => import("../assets/icons/comments/chat.svg")); -const Unpin = importSvg( - async () => import("../assets/icons/comments/unpinIcon.svg"), -); -const Reaction = importSvg( - async () => import("../assets/icons/comments/reaction.svg"), -); -const Reaction2 = importSvg( - async () => import("../assets/icons/comments/reaction-2.svg"), -); -const Upload = importSvg(async () => import("../assets/icons/ads/upload.svg")); -const ArrowForwardIcon = importSvg( - async () => import("../assets/icons/control/arrow_forward.svg"), -); -const DoubleArrowRightIcon = importSvg( - async () => import("../assets/icons/ads/double-arrow-right.svg"), -); -const CapSolidIcon = importSvg( - async () => import("../assets/icons/control/cap_solid.svg"), -); -const CapDotIcon = importSvg( - async () => import("../assets/icons/control/cap_dot.svg"), -); -const LineDottedIcon = importSvg( - async () => import("../assets/icons/control/line_dotted.svg"), -); -const LineDashedIcon = importSvg( - async () => import("../assets/icons/control/line_dashed.svg"), -); -const TableIcon = importSvg( - async () => import("../assets/icons/ads/tables.svg"), -); -const ColumnIcon = importSvg( - async () => import("../assets/icons/ads/column.svg"), -); -const GearIcon = importSvg(async () => import("../assets/icons/ads/gear.svg")); -const UserV2Icon = importSvg( - async () => import("../assets/icons/ads/user-v2.svg"), -); -const SupportIcon = importSvg( - async () => import("../assets/icons/ads/support.svg"), -); -const Snippet = importSvg( - async () => import("../assets/icons/ads/snippet.svg"), -); -const WorkspaceIcon = importSvg( - async () => import("../assets/icons/ads/workspaceIcon.svg"), -); -const SettingIcon = importSvg( - async () => import("../assets/icons/control/settings.svg"), -); -const DropdownIcon = importSvg( - async () => import("../assets/icons/ads/dropdown.svg"), -); -const ChatIcon = importSvg( - async () => import("../assets/icons/ads/app-icons/chat.svg"), -); -const JsIcon = importSvg(async () => import("../assets/icons/ads/js.svg")); -const ExecuteIcon = importSvg( - async () => import("../assets/icons/ads/execute.svg"), -); -const PackageIcon = importSvg( - async () => import("../assets/icons/ads/package.svg"), -); - -const DevicesIcon = importSvg( - async () => import("../assets/icons/ads/devices.svg"), -); -const GridIcon = importSvg(async () => import("../assets/icons/ads/grid.svg")); -const HistoryLineIcon = importSvg( - async () => import("../assets/icons/ads/history-line.svg"), -); -const SuccessLineIcon = importSvg( - async () => import("../assets/icons/ads/success-line.svg"), -); -const ErrorLineIcon = importSvg( - async () => import("../assets/icons/ads/error-line.svg"), -); -const UpdatesIcon = importSvg( - async () => import("../assets/icons/help/updates.svg"), -); - -// remix icons -const AddMoreIcon = importRemixIcon( - async () => import("remixicon-react/AddCircleLineIcon"), -); -const AddMoreFillIcon = importRemixIcon( - async () => import("remixicon-react/AddCircleFillIcon"), -); -const ArrowLeftRightIcon = importRemixIcon( - async () => import("remixicon-react/ArrowLeftRightLineIcon"), -); -const ArrowDownLineIcon = importRemixIcon( - async () => import("remixicon-react/ArrowDownLineIcon"), -); -const BookIcon = importRemixIcon( - async () => import("remixicon-react/BookOpenLineIcon"), -); -const BugLineIcon = importRemixIcon( - async () => import("remixicon-react/BugLineIcon"), -); -const ChevronRight = importRemixIcon( - async () => import("remixicon-react/ArrowRightSFillIcon"), -); -const CheckLineIcon = importRemixIcon( - async () => import("remixicon-react/CheckLineIcon"), -); -const CloseLineIcon = importRemixIcon( - async () => import("remixicon-react/CloseLineIcon"), -); -const CloseCircleIcon = importRemixIcon( - async () => import("remixicon-react/CloseCircleFillIcon"), -); -const CloseCircleLineIcon = importRemixIcon( - async () => import("remixicon-react/CloseCircleLineIcon"), -); -const CloudOfflineIcon = importRemixIcon( - async () => import("remixicon-react/CloudOffLineIcon"), -); -const CommentContextMenu = importRemixIcon( - async () => import("remixicon-react/More2FillIcon"), -); -const More2FillIcon = importRemixIcon( - async () => import("remixicon-react/More2FillIcon"), -); -const CompassesLine = importRemixIcon( - async () => import("remixicon-react/CompassesLineIcon"), -); -const ContextMenuIcon = importRemixIcon( - async () => import("remixicon-react/MoreFillIcon"), -); -const CreateNewIcon = importRemixIcon( - async () => import("remixicon-react/AddLineIcon"), -); -const Database2Line = importRemixIcon( - async () => import("remixicon-react/Database2LineIcon"), -); -const DatasourceIcon = importRemixIcon( - async () => import("remixicon-react/CloudFillIcon"), -); -const DeleteBin7 = importRemixIcon( - async () => import("remixicon-react/DeleteBin7LineIcon"), -); -const DiscordIcon = importRemixIcon( - async () => import("remixicon-react/DiscordLineIcon"), -); -const DownArrow = importRemixIcon( - async () => import("remixicon-react/ArrowDownSFillIcon"), -); -const Download = importRemixIcon( - async () => import("remixicon-react/DownloadCloud2LineIcon"), -); -const DuplicateIcon = importRemixIcon( - async () => import("remixicon-react/FileCopyLineIcon"), -); -const EditIcon = importRemixIcon( - async () => import("remixicon-react/PencilFillIcon"), -); -const EditLineIcon = importRemixIcon( - async () => import("remixicon-react/EditLineIcon"), -); -const EditUnderlineIcon = importRemixIcon( - async () => import("remixicon-react/EditLineIcon"), -); -const Emoji = importRemixIcon( - async () => import("remixicon-react/EmotionLineIcon"), -); -const ExpandMore = importRemixIcon( - async () => import("remixicon-react/ArrowDownSLineIcon"), -); -const DownArrowIcon = importRemixIcon( - async () => import("remixicon-react/ArrowDownSLineIcon"), -); -const ExpandLess = importRemixIcon( - async () => import("remixicon-react/ArrowUpSLineIcon"), -); -const EyeOn = importRemixIcon( - async () => import("remixicon-react/EyeLineIcon"), -); -const EyeOff = importRemixIcon( - async () => import("remixicon-react/EyeOffLineIcon"), -); -const FileTransfer = importRemixIcon( - async () => import("remixicon-react/FileTransferLineIcon"), -); -const FileLine = importRemixIcon( - async () => import("remixicon-react/FileLineIcon"), -); -const Filter = importRemixIcon( - async () => import("remixicon-react/Filter2FillIcon"), -); -const ForbidLineIcon = importRemixIcon( - async () => import("remixicon-react/ForbidLineIcon"), -); -const GitMerge = importRemixIcon( - async () => import("remixicon-react/GitMergeLineIcon"), -); -const GitCommit = importRemixIcon( - async () => import("remixicon-react/GitCommitLineIcon"), -); -const GitPullRequst = importRemixIcon( - async () => import("remixicon-react/GitPullRequestLineIcon"), -); -const GlobalLineIcon = importRemixIcon( - async () => import("remixicon-react/GlobalLineIcon"), -); -const GuideIcon = importRemixIcon( - async () => import("remixicon-react/GuideFillIcon"), -); -const HelpIcon = importRemixIcon( - async () => import("remixicon-react/QuestionMarkIcon"), -); -const LightbulbFlashLine = importRemixIcon( - async () => import("remixicon-react/LightbulbFlashLineIcon"), -); -const LinksLineIcon = importRemixIcon( - async () => import("remixicon-react/LinksLineIcon"), -); -const InfoIcon = importRemixIcon( - async () => import("remixicon-react/InformationLineIcon"), -); -const KeyIcon = importRemixIcon( - async () => import("remixicon-react/Key2LineIcon"), -); -const LeftArrowIcon2 = importRemixIcon( - async () => import("remixicon-react/ArrowLeftSLineIcon"), -); -const Link2 = importRemixIcon(async () => import("remixicon-react/LinkIcon")); -const LeftArrowIcon = importRemixIcon( - async () => import("remixicon-react/ArrowLeftLineIcon"), -); -const NewsPaperLine = importRemixIcon( - async () => import("remixicon-react/NewspaperLineIcon"), -); -const OvalCheck = importRemixIcon( - async () => import("remixicon-react/CheckboxCircleLineIcon"), -); -const OvalCheckFill = importRemixIcon( - async () => import("remixicon-react/CheckboxCircleFillIcon"), -); -const Pin3 = importRemixIcon( - async () => import("remixicon-react/Pushpin2FillIcon"), -); -const PlayCircleLineIcon = importRemixIcon( - async () => import("remixicon-react/PlayCircleLineIcon"), -); -const QueryIcon = importRemixIcon( - async () => import("remixicon-react/CodeSSlashLineIcon"), -); -const RemoveIcon = importRemixIcon( - async () => import("remixicon-react/SubtractLineIcon"), -); -const RightArrowIcon = importRemixIcon( - async () => import("remixicon-react/ArrowRightLineIcon"), -); -const RightArrowIcon2 = importRemixIcon( - async () => import("remixicon-react/ArrowRightSLineIcon"), -); -const RocketIcon = importRemixIcon( - async () => import("remixicon-react/RocketLineIcon"), -); -const SearchIcon = importRemixIcon( - async () => import("remixicon-react/SearchLineIcon"), -); -const SortAscIcon = importRemixIcon( - async () => import("remixicon-react/SortAscIcon"), -); -const SortDescIcon = importRemixIcon( - async () => import("remixicon-react/SortDescIcon"), -); -const ShareBoxLineIcon = importRemixIcon( - async () => import("remixicon-react/ShareBoxLineIcon"), -); -const ShareBoxFillIcon = importRemixIcon( - async () => import("remixicon-react/ShareBoxFillIcon"), -); -const ShareForwardIcon = importRemixIcon( - async () => import("remixicon-react/ShareForwardFillIcon"), -); -const Trash = importRemixIcon( - async () => import("remixicon-react/DeleteBinLineIcon"), -); -const UpArrow = importRemixIcon( - async () => import("remixicon-react/ArrowUpSFillIcon"), -); -const WarningIcon = importRemixIcon( - async () => import("remixicon-react/ErrorWarningFillIcon"), -); -const WarningLineIcon = importRemixIcon( - async () => import("remixicon-react/ErrorWarningLineIcon"), -); -const LoginIcon = importRemixIcon( - async () => import("remixicon-react/LoginBoxLineIcon"), -); -const LogoutIcon = importRemixIcon( - async () => import("remixicon-react/LogoutBoxRLineIcon"), -); -const ShareLineIcon = importRemixIcon( - async () => import("remixicon-react/ShareLineIcon"), -); -const LoaderLineIcon = importRemixIcon( - async () => import("remixicon-react/LoaderLineIcon"), -); -const WidgetIcon = importRemixIcon( - async () => import("remixicon-react/FunctionLineIcon"), -); -const RefreshLineIcon = importRemixIcon( - async () => import("remixicon-react/RefreshLineIcon"), -); -const GitBranchLineIcon = importRemixIcon( - async () => import("remixicon-react/GitBranchLineIcon"), -); -const EditBoxLineIcon = importRemixIcon( - async () => import("remixicon-react/EditBoxLineIcon"), -); -const StarLineIcon = importRemixIcon( - async () => import("remixicon-react/StarLineIcon"), -); -const StarFillIcon = importRemixIcon( - async () => import("remixicon-react/StarFillIcon"), -); -const Settings2LineIcon = importRemixIcon( - async () => import("remixicon-react/Settings2LineIcon"), -); -const DownloadIcon = importRemixIcon( - async () => import("remixicon-react/DownloadLineIcon"), -); -const UploadCloud2LineIcon = importRemixIcon( - async () => import("remixicon-react/UploadCloud2LineIcon"), -); -const DownloadLineIcon = importRemixIcon( - async () => import("remixicon-react/DownloadLineIcon"), -); -const UploadLineIcon = importRemixIcon( - async () => import("remixicon-react/UploadLineIcon"), -); -const FileListLineIcon = importRemixIcon( - async () => import("remixicon-react/FileListLineIcon"), -); -const HamburgerIcon = importRemixIcon( - async () => import("remixicon-react/MenuLineIcon"), -); -const MagicLineIcon = importRemixIcon( - async () => import("remixicon-react/MagicLineIcon"), -); -const UserHeartLineIcon = importRemixIcon( - async () => import("remixicon-react/UserHeartLineIcon"), -); -const DvdLineIcon = importRemixIcon( - async () => import("remixicon-react/DvdLineIcon"), -); -const Group2LineIcon = importRemixIcon( - async () => import("remixicon-react/Group2LineIcon"), -); -const CodeViewIcon = importRemixIcon( - async () => import("remixicon-react/CodeViewIcon"), -); -const GroupLineIcon = importRemixIcon( - async () => import("remixicon-react/GroupLineIcon"), -); -const ArrowRightUpLineIcon = importRemixIcon( - async () => import("remixicon-react/ArrowRightUpLineIcon"), -); -const MailCheckLineIcon = importRemixIcon( - async () => import("remixicon-react/MailCheckLineIcon"), -); -const UserFollowLineIcon = importRemixIcon( - async () => import("remixicon-react/UserFollowLineIcon"), -); -const AddBoxLineIcon = importRemixIcon( - async () => import("remixicon-react/AddBoxLineIcon"), -); -const ArrowRightSFillIcon = importRemixIcon( - async () => import("remixicon-react/ArrowRightSFillIcon"), -); -const ArrowDownSFillIcon = importRemixIcon( - async () => import("remixicon-react/ArrowDownSFillIcon"), -); -const MailLineIcon = importRemixIcon( - async () => import("remixicon-react/MailLineIcon"), -); -const LockPasswordLineIcon = importRemixIcon( - async () => import("remixicon-react/LockPasswordLineIcon"), -); -const Timer2LineIcon = importRemixIcon( - async () => import("remixicon-react/Timer2LineIcon"), -); -const MapPin2LineIcon = importRemixIcon( - async () => import("remixicon-react/MapPin2LineIcon"), -); -const User3LineIcon = importRemixIcon( - async () => import("remixicon-react/User3LineIcon"), -); -const User2LineIcon = importRemixIcon( - async () => import("remixicon-react/User2LineIcon"), -); -const Key2LineIcon = importRemixIcon( - async () => import("remixicon-react/Key2LineIcon"), -); -const FileList2LineIcon = importRemixIcon( - async () => import("remixicon-react/FileList2LineIcon"), -); -const Lock2LineIcon = importRemixIcon( - async () => import("remixicon-react/Lock2LineIcon"), -); -const SearchEyeLineIcon = importRemixIcon( - async () => import("remixicon-react/SearchEyeLineIcon"), -); -const AlertLineIcon = importRemixIcon( - async () => import("remixicon-react/AlertLineIcon"), -); -const SettingsLineIcon = importRemixIcon( - async () => import("remixicon-react/SettingsLineIcon"), -); -const LockUnlockLineIcon = importRemixIcon( - async () => import("remixicon-react/LockUnlockLineIcon"), -); -const PantoneLineIcon = importRemixIcon( - async () => import("remixicon-react/PantoneLineIcon"), -); -const QuestionFillIcon = importRemixIcon( - async () => import("remixicon-react/QuestionFillIcon"), -); -const QuestionLineIcon = importRemixIcon( - async () => import("remixicon-react/QuestionLineIcon"), -); -const UserSharedLineIcon = importRemixIcon( - async () => import("remixicon-react/UserSharedLineIcon"), -); -const UserReceived2LineIcon = importRemixIcon( - async () => import("remixicon-react/UserReceived2LineIcon"), -); -const UserAddLineIcon = importRemixIcon( - async () => import("remixicon-react/UserAddLineIcon"), -); -const UserUnfollowLineIcon = importRemixIcon( - async () => import("remixicon-react/UserUnfollowLineIcon"), -); -const DeleteRowIcon = importRemixIcon( - async () => import("remixicon-react/DeleteRowIcon"), -); -const ArrowUpLineIcon = importRemixIcon( - async () => import("remixicon-react/ArrowUpLineIcon"), -); -const MoneyDollarCircleLineIcon = importRemixIcon( - async () => import("remixicon-react/MoneyDollarCircleLineIcon"), -); -const ExternalLinkLineIcon = importRemixIcon( - async () => import("remixicon-react/ExternalLinkLineIcon"), -); -const PencilLineIcon = importRemixIcon( - async () => import("remixicon-react/PencilLineIcon"), -); - -export enum IconSize { - XXS = "extraExtraSmall", - XS = "extraSmall", - SMALL = "small", - MEDIUM = "medium", - LARGE = "large", - XL = "extraLarge", - XXL = "extraExtraLarge", - XXXL = "extraExtraExtraLarge", - XXXXL = "extraExtraExtraExtraLarge", -} - -const ICON_SIZE_LOOKUP = { - [IconSize.XXS]: 8, - [IconSize.XS]: 10, - [IconSize.SMALL]: 12, - [IconSize.MEDIUM]: 14, - [IconSize.LARGE]: 15, - [IconSize.XL]: 16, - [IconSize.XXL]: 18, - [IconSize.XXXL]: 20, - [IconSize.XXXXL]: 22, - undefined: 12, -}; - -export const sizeHandler = (size?: IconSize): number => { - return ( - ICON_SIZE_LOOKUP[size as keyof typeof ICON_SIZE_LOOKUP] || - ICON_SIZE_LOOKUP[IconSize.SMALL] - ); -}; - -export const IconWrapper = styled.span` - &:focus { - outline: none; - } - - display: flex; - align-items: center; - cursor: ${(props) => - props.disabled ? "not-allowed" : props.clickable ? "pointer" : "default"}; - ${(props) => - props.withWrapper && - ` - min-width: ${sizeHandler(props.size) * 2}px; - height: ${sizeHandler(props.size) * 2}px; - border-radius: 9999px; - justify-content: center; - background-color: ${props.wrapperColor || "rgba(0, 0, 0, 0.1)"}; - `} - svg { - width: ${(props) => sizeHandler(props.size)}px; - height: ${(props) => sizeHandler(props.size)}px; - ${(props) => - !props.keepColors - ? ` - fill: ${props.fillColor || ""}; - circle { - fill: ${props.fillColor || ""}; - } - path { - fill: ${props.fillColor || ""}; - } - ` - : ""}; - ${(props) => (props.invisible ? `visibility: hidden;` : null)}; - - &:hover { - ${(props) => - !props.keepColors - ? ` - fill: ${props.hoverFillColor || ""}; - path { - fill: ${props.hoverFillColor || ""}; - } - ` - : ""} - } - } -`; - -function getControlIcon(iconName: string) { - const ControlIcon = ControlIcons[iconName]; - return ; -} - -const ICON_LOOKUP = { - undefined: null, - HEADING_ONE: getControlIcon("HEADING_ONE"), - HEADING_THREE: getControlIcon("HEADING_THREE"), - HEADING_TWO: getControlIcon("HEADING_TWO"), - PARAGRAPH: getControlIcon("PARAGRAPH"), - PARAGRAPH_TWO: getControlIcon("PARAGRAPH_TWO"), - "add-box-line": , - "add-more": , - "add-more-fill": , - "alert-line": , - "arrow-down-s-fill": , - "arrow-forward": , - "arrow-left": , - "arrow-right-s-fill": , - "arrow-right-up-line": , - "arrow-up-line": , - "book-line": , - "bug-line": , - "cap-dot": , - "cap-solid": , - "card-context-menu": , - "chat-help": , - "check-line": , - "chevron-left": , - "chevron-right": , - "close-circle": , - "close-circle-line": , - "close-modal": , - "close-x": , - "cloud-off-line": , - "comment-context-menu": , - "compasses-line": , - "context-menu": , - "database-2-line": , - "delete-blank": , - "delete-row": , - "double-arrow-right": , - "down-arrow": , - "down-arrow-2": , - "download-line": , - "edit-box-line": , - "edit-line": , - "edit-underline": , - "expand-less": , - "expand-more": , - "external-link-line": , - "eye-off": , - "eye-on": , - "file-line": , - "file-list-2-line": , - "file-list-line": , - "file-transfer": , - "fork-2": , - "forbid-line": , - "git-branch": , - "git-commit": , - "git-pull-request": , - "global-line": , - "group-2-line": , - "group-line": , - "invite-user": , - "key-2-line": , - "left-arrow-2": , - "lightbulb-flash-line": , - "line-dashed": , - "line-dotted": , - "link-2": , - "links-line": , - "lock-2-line": , - "lock-password-line": , - "lock-unlock-line": , - "magic-line": , - "mail-check-line": , - "mail-line": , - "map-pin-2-line": , - "more-2-fill": , - "news-paper": , - "no-response": , - "oval-check": , - "oval-check-fill": , - "pin-3": , - "play-circle-line": , - "question-fill": , - "question-line": , - "reaction-2": , - "read-pin": , - "right-arrow": , - "right-arrow-2": , - "search-eye-line": , - "send-button": , - "settings-2-line": , - "settings-line": , - "share-2": , - "share-box": , - "share-box-line": , - "share-line": , - "sort-asc": , - "sort-desc": , - "star-fill": , - "star-line": , - "swap-horizontal": , - "timer-2-line": , - "trash-outline": , - "trending-flat": , - "unread-pin": , - "upload-cloud": , - "upload-line": , - "user-2": , - "user-2-line": , - "user-3-line": , - "user-add-line": , - "user-follow-line": , - "user-heart-line": , - "user-received-2-line": , - "user-shared-line": , - "user-unfollow-line": , - "view-all": , - "view-less": , - "warning-line": , - "warning-triangle": , - "money-dollar-circle-line": , - "success-line": , - "error-line": , - "history-line": , - billing: , - book: , - bug: , - cancel: , - chat: , - close: , - code: , - column: , - cross: , - danger: , - datasource: , - delete: , - desktop: , - discord: , - downArrow: , - download2: , - download: , - dropdown: , - duplicate: , - edit: , - emoji: , - enterprise: , - error: , - execute: , - filter: , - fluid: , - fork: , - gear: , - general: , - guide: , - hamburger: , - help: , - info: , - js: , - key: , - lightning: , - link: , - loader: , - login: , - logout: , - manage: , - member: , - minus: , - mobile: , - open: , - pantone: , - pin: , - play: , - plus: , - query: , - reaction: , - refresh: , - rocket: , - search: , - setting: , - share: , - shine: , - snippet: , - success: , - support: , - tables: , - tablet: , - tabletLandscape: , - trash: , - unpin: , - upArrow: , - upgrade: , - upload: , - user: , - wand: , - warning: , - widget: , - workspace: , - "clear-interval": , - "clear-store": , - "copy-to-clipboard": , - "download-action": , - "execute-js": , - "execute-query": , - "get-geolocation": , - modal: , - "navigate-to": , - "remove-store": , - "reset-widget": , - "set-interval": , - "show-alert": , - "stop-watch-geolocation": , - "store-value": , - "watch-geolocation": , - "run-api": , - "post-message": , - "no-action": , - package: , - devices: , - grid: , - updates: , - "pencil-line": , -}; - -export const IconCollection = Object.keys(ICON_LOOKUP); - -export type IconName = (typeof IconCollection)[number]; - -export interface IconProps { - size?: IconSize; - name?: IconName; - invisible?: boolean; - className?: string; - onClick?: (e: React.MouseEvent) => void; - fillColor?: string; - hoverFillColor?: string; - keepColors?: boolean; - loaderWithIconWrapper?: boolean; - clickable?: boolean; - disabled?: boolean; - withWrapper?: boolean; - wrapperColor?: string; -} - -const Icon = forwardRef( - ( - { onClick, ...props }: IconProps & CommonComponentProps, - ref: Ref, - ) => { - const iconName = props.name; - const returnIcon = - ICON_LOOKUP[iconName as keyof typeof ICON_LOOKUP] || null; - - const clickable = props.clickable === undefined ? true : props.clickable; - - let loader = ; - if (props.loaderWithIconWrapper) { - loader = ( - - - - ); - } - - return returnIcon && !props.isLoading ? ( - - {returnIcon} - - ) : props.isLoading ? ( - loader - ) : null; - }, -); - -Icon.displayName = "Icon"; - -export default React.memo(Icon); diff --git a/app/client/packages/design-system/ads-old/src/IconSelector/index.tsx b/app/client/packages/design-system/ads-old/src/IconSelector/index.tsx index 8431cd949d..d24bb6f305 100644 --- a/app/client/packages/design-system/ads-old/src/IconSelector/index.tsx +++ b/app/client/packages/design-system/ads-old/src/IconSelector/index.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from "react"; import styled from "styled-components"; import type { AppIconName } from "../AppIcon"; import AppIcon, { AppIconCollection } from "../AppIcon"; -import { Size } from "../Button"; +import { Size } from "../AppIcon"; import type { CommonComponentProps } from "../types/common"; import { Classes } from "../constants/classes"; diff --git a/app/client/packages/design-system/ads-old/src/MenuItem/index.tsx b/app/client/packages/design-system/ads-old/src/MenuItem/index.tsx index 16dc3f46b2..ffe22f6815 100644 --- a/app/client/packages/design-system/ads-old/src/MenuItem/index.tsx +++ b/app/client/packages/design-system/ads-old/src/MenuItem/index.tsx @@ -3,15 +3,15 @@ import React, { forwardRef } from "react"; import type { CommonComponentProps } from "../types/common"; import { Classes } from "../constants/classes"; import styled from "styled-components"; -import type { IconName } from "../Icon"; -import Icon, { IconSize } from "../Icon"; +import type { IconNames } from "@appsmith/ads"; +import { Icon } from "@appsmith/ads"; import TooltipComponent from "../Tooltip"; import Text, { TextType, FontWeight } from "../Text"; // eslint-disable-next-line @typescript-eslint/no-restricted-imports import type { PopoverPosition } from "@blueprintjs/core/lib/esnext/components/popover/popoverSharedProps"; export type MenuItemProps = CommonComponentProps & { - icon?: IconName; + icon?: IconNames; text: string; label?: ReactNode; href?: string; @@ -98,14 +98,7 @@ const MenuItemContent = forwardRef( type={props.type} > - {props.icon ? ( - - ) : null} + {props.icon ? : null} {props.text && ( {props.ellipsize diff --git a/app/client/packages/design-system/ads-old/src/Spinner/index.tsx b/app/client/packages/design-system/ads-old/src/Spinner/index.tsx deleted file mode 100644 index 3e787ac0d3..0000000000 --- a/app/client/packages/design-system/ads-old/src/Spinner/index.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from "react"; -import styled, { keyframes } from "styled-components"; -import type { IconSize } from "../Icon"; -import { sizeHandler } from "../Icon"; -import { Classes } from "../constants/classes"; - -const rotate = keyframes` - 100% { - transform: rotate(360deg); - } -`; - -const dash = keyframes` - 0% { - stroke-dasharray: 1, 150; - stroke-dashoffset: 0; - } - 50% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -35; - } - 100% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -124; - } -`; - -const SvgContainer = styled.svg` - animation: ${rotate} 2s linear infinite; - width: ${(props) => sizeHandler(props.size)}px; - height: ${(props) => sizeHandler(props.size)}px; -`; - -const SvgCircle = styled.circle` - stroke: var(--ads-v2-color-fg-subtle); - stroke-linecap: round; - animation: ${dash} 1.5s ease-in-out infinite; - stroke-width: var(--ads-spaces-1); -`; - -export interface SpinnerProp { - size?: IconSize; -} - -Spinner.defaultProp = { - size: "small", -}; - -export default function Spinner(props: SpinnerProp) { - return ( - - - - ); -} diff --git a/app/client/packages/design-system/ads-old/src/Table/index.tsx b/app/client/packages/design-system/ads-old/src/Table/index.tsx index 5699947460..e18d6c2c84 100644 --- a/app/client/packages/design-system/ads-old/src/Table/index.tsx +++ b/app/client/packages/design-system/ads-old/src/Table/index.tsx @@ -3,8 +3,7 @@ import React from "react"; import styled from "styled-components"; import { Classes } from "../constants/classes"; import { typography } from "../constants/typography"; -import Spinner from "../Spinner"; -import { IconSize } from "../Icon"; +import { Spinner } from "@appsmith/ads"; import { importSvg } from "../utils/icon-loadables"; const DownArrow = importSvg( @@ -192,11 +191,7 @@ function Table(props: TableProps) { - {loaderComponent ? ( - loaderComponent - ) : ( - - )} + {loaderComponent ? loaderComponent : } diff --git a/app/client/packages/design-system/ads-old/src/Tabs/index.tsx b/app/client/packages/design-system/ads-old/src/Tabs/index.tsx deleted file mode 100644 index 040bedf117..0000000000 --- a/app/client/packages/design-system/ads-old/src/Tabs/index.tsx +++ /dev/null @@ -1,426 +0,0 @@ -import type { RefObject } from "react"; -import React, { useCallback, useState, useEffect } from "react"; -import { Tab, Tabs, TabList, TabPanel } from "react-tabs"; -import "react-tabs/style/react-tabs.css"; -import styled from "styled-components"; -import type { IconName } from "../Icon"; -import Icon, { IconSize } from "../Icon"; -import { useResizeObserver } from "../hooks"; -import { Classes } from "../constants/classes"; -import type { CommonComponentProps } from "../types/common"; -import { typography } from "../constants/typography"; - -export const TAB_MIN_HEIGHT = `36px`; - -export interface TabProp { - key: string; - title: string; - count?: number; - panelComponent?: JSX.Element; - icon?: IconName; - iconSize?: IconSize; -} - -const TabsWrapper = styled.div<{ - shouldOverflow?: boolean; - vertical?: boolean; - responseViewer?: boolean; -}>` - border-radius: 0px; - height: 100%; - overflow: hidden; - .react-tabs { - height: 100%; - } - .react-tabs__tab-panel { - height: calc(100% - ${TAB_MIN_HEIGHT}); - overflow: auto; - } - .react-tabs__tab-list { - margin: 0px; - display: flex; - flex-direction: ${(props) => (!!props.vertical ? "column" : "row")}; - align-items: ${(props) => (!!props.vertical ? "stretch" : "center")}; - border-bottom: none; - color: var(--ads-tabs-default-tab-list-text-color); - path { - fill: var(--ads-tabs-default-tab-list-svg-fill-color); - } - ${(props) => - props.shouldOverflow && - ` - overflow-y: hidden; - overflow-x: auto; - white-space: nowrap; - `} - - ${(props) => - props.responseViewer && - ` - margin-left: 30px; - display: flex; - align-items: center; - height: 24px; - background-color: var(--ads-tabs-default-tab-list-response-viewer-background-color) !important; - width: fit-content; - padding-left: 1px; - margin-top: 10px !important; - margin-bottom: 10px !important; - `} - } - .react-tabs__tab { - align-items: center; - text-align: center; - display: inline-flex; - justify-content: center; - border-color: transparent; - position: relative; - - padding: 0px 3px; - margin-right: ${(props) => - !props.vertical ? `calc(var(--ads-spaces-12) - 3px)` : 0}; - } - - .react-tabs__tab, - .react-tabs__tab:focus { - box-shadow: none; - border: none; - &:after { - content: none; - } - - ${(props) => - props.responseViewer && - ` - display: flex; - align-items: center; - cursor: pointer; - height: 22px; - padding: 0 12px; - border: 1px solid var(--ads-tabs-default-tab-focus-response-viewer-border-color); - margin-right: -1px; - margin-left: -1px; - margin-top: -2px; - height: 100%; - `} - } - - .react-tabs__tab--selected { - background-color: transparent; - path { - fill: var(--ads-tabs-tab-selected-svg-fill-color); - } - - ${(props) => - props.responseViewer && - ` - background-color: var(--ads-tabs-tab-selected-response-viewer-background-color); - border: 1px solid var(--ads-tabs-tab-selected-response-viewer-border-color); - border-radius: 0px; - font-weight: normal; - `} - } -`; - -export const TabTitle = styled.span<{ responseViewer?: boolean }>` - font-size: ${typography.h5.fontSize}px; - font-weight: var(--ads-font-weight-bold); - line-height: var(--ads-spaces-6); - letter-spacing: ${typography.h5.letterSpacing}px; - margin: 0; - display: flex; - align-items: center; - - ${(props) => - props.responseViewer && - ` - font-size: 12px; - font-weight: normal; - line-height: 16px; - letter-spacing: normal; - text-transform: uppercase; - color: var(--ads-tabs-tab-title-response-viewer-text-color); - `} -`; - -export const TabCount = styled.div` - background-color: var(--ads-tabs-count-background-color); - border-radius: 8px; - min-width: 17px; - height: 17px; - font-size: 9px; - margin-left: 4px; - display: flex; - align-items: center; - justify-content: center; - padding: 0 2px; -`; - -const TabTitleWrapper = styled.div<{ - selected: boolean; - vertical: boolean; - responseViewer?: boolean; -}>` - display: flex; - align-items: center; - width: 100%; - padding: calc(var(--ads-spaces-3) - 1px) - ${(props) => (props.vertical ? `calc(var(--ads-spaces-4) - 1px)` : 0)} - calc(var(--ads-spaces-4) - 1px) - ${(props) => (props.vertical ? `calc(var(--ads-spaces-4) - 1px)` : 0)}; - color: var(--ads-tabs-title-wrapper-text-color); - &:hover { - color: var(--ads-tabs-title-wrapper-hover-text-color); - .${Classes.ICON} { - svg { - fill: var(--ads-tabs-title-wrapper-hover-text-color); - path { - fill: var(--ads-tabs-title-wrapper-hover-text-color); - } - } - } - } - - ${(props) => - props.responseViewer && - ` - padding: 0px; - `} - - .${Classes.ICON} { - margin-right: var(--ads-spaces-1); - border-radius: 50%; - svg { - width: 16px; - height: 16px; - margin: auto; - fill: var(--ads-tabs-title-wrapper-icon-fill-color); - path { - fill: var(--ads-tabs-title-wrapper-icon-fill-color); - } - } - } - - ${(props) => - props.selected - ? ` - background-color: transparent; - color: var(--ads-color-black-900); - .${Classes.ICON} { - svg { - path { - fill: var(--ads-color-black-900) - } - } - } - - .tab-title { - ${ - props.responseViewer && - ` - font-weight: normal; - ` - } - } - - &::after { - content: ""; - position: absolute; - width: ${props.vertical ? `calc(var(--ads-spaces-1) - 2px)` : "100%"}; - bottom: ${props.vertical ? "0%" : `calc(var(--ads-spaces-0) - 1px)`}; - top: ${ - props.vertical ? `calc(var(--ads-spaces-0) - 1px)` : "calc(100% - 2px)" - }; - left: var(--ads-spaces-0); - height: ${props.vertical ? "100%" : `calc(var(--ads-spaces-1) - 2px)`}; - background-color: var(--ads-color-brand); - z-index: var(--ads-z-index-3); - - ${ - props.responseViewer && - ` - display: none; - ` - } - } - ` - : ""} -`; - -const CollapseIconWrapper = styled.div` - position: absolute; - right: 14px; - top: calc(var(--ads-spaces-3) - 1px); - cursor: pointer; -`; - -export interface TabItemProps { - tab: TabProp; - selected: boolean; - vertical: boolean; - responseViewer?: boolean; -} - -function DefaultTabItem(props: TabItemProps) { - const { responseViewer, selected, tab, vertical } = props; - return ( - - {tab.icon ? ( - - ) : null} - - {tab.title} - - {tab.count && tab.count > 0 ? ( - {tab.count} - ) : null} - - ); -} - -export type TabbedViewComponentType = CommonComponentProps & { - tabs: Array; - selectedIndex?: number; - onSelect?: (tabIndex: number) => void; - overflow?: boolean; - vertical?: boolean; - tabItemComponent?: (props: TabItemProps) => JSX.Element; - responseViewer?: boolean; - canCollapse?: boolean; - // Reference to container for collapsing or expanding content - containerRef?: RefObject; - // height of container when expanded - expandedHeight?: string; -}; - -// Props required to support a collapsible (foldable) tab component -export interface CollapsibleTabProps { - // Reference to container for collapsing or expanding content - containerRef: RefObject; - // height of container when expanded( usually the default height of the tab component) - expandedHeight: string; -} - -export type CollapsibleTabbedViewComponentType = TabbedViewComponentType & - CollapsibleTabProps; - -export const collapsibleTabRequiredPropKeys: Array = - ["containerRef", "expandedHeight"]; - -// Tab is considered collapsible only when all required collapsible props are present -export const isCollapsibleTabComponent = ( - props: TabbedViewComponentType | CollapsibleTabbedViewComponentType, -): props is CollapsibleTabbedViewComponentType => - collapsibleTabRequiredPropKeys.every((key) => key in props); - -export function TabComponent( - props: TabbedViewComponentType | CollapsibleTabbedViewComponentType, -) { - const { onSelect, tabItemComponent } = props; - const TabItem = tabItemComponent || DefaultTabItem; - // for setting selected state of an uncontrolled component - const [selectedIndex, setSelectedIndex] = useState(props.selectedIndex || 0); - const [isExpanded, setIsExpanded] = useState(true); - - useEffect(() => { - if (typeof props.selectedIndex === "number") - setSelectedIndex(props.selectedIndex); - }, [props.selectedIndex]); - - const toggleCollapse = () => { - if (!isCollapsibleTabComponent(props)) return; - const { containerRef, expandedHeight } = props; - if (containerRef?.current && expandedHeight) { - containerRef.current.style.height = isExpanded - ? TAB_MIN_HEIGHT - : expandedHeight; - } - setIsExpanded((prev) => !prev); - }; - - const resizeCallback = useCallback( - (entries: ResizeObserverEntry[]) => { - if (entries && entries.length) { - const { - contentRect: { height }, - } = entries[0]; - if (height > Number(TAB_MIN_HEIGHT.replace("px", "")) + 6) { - !isExpanded && setIsExpanded(true); - } else { - isExpanded && setIsExpanded(false); - } - } - }, - [isExpanded], - ); - - useResizeObserver( - isCollapsibleTabComponent(props) ? props.containerRef?.current : null, - resizeCallback, - ); - - useEffect(() => { - if (!isCollapsibleTabComponent(props)) return; - const { containerRef } = props; - if (!isExpanded && containerRef.current) { - containerRef.current.style.height = TAB_MIN_HEIGHT; - } - }, [isExpanded]); - - return ( - - {isCollapsibleTabComponent(props) && ( - - - - )} - - { - onSelect ? onSelect(index) : setSelectedIndex(index); - !isExpanded && toggleCollapse(); - }} - selectedIndex={props.selectedIndex} - > - - {props.tabs.map((tab, index) => ( - - - - ))} - - {props.tabs.map((tab) => ( - {tab.panelComponent} - ))} - - - ); -} diff --git a/app/client/packages/design-system/ads-old/src/TextInput/index.tsx b/app/client/packages/design-system/ads-old/src/TextInput/index.tsx deleted file mode 100644 index 9e5cc06337..0000000000 --- a/app/client/packages/design-system/ads-old/src/TextInput/index.tsx +++ /dev/null @@ -1,475 +0,0 @@ -import type { EventHandler, FocusEvent, Ref } from "react"; -import React, { - forwardRef, - useCallback, - useEffect, - useMemo, - useState, -} from "react"; -import type { CommonComponentProps } from "../types/common"; -import { Classes } from "../constants/classes"; -import { typography } from "../constants/typography"; -import { Classes as BlueprintClasses } from "@blueprintjs/core"; -import styled from "styled-components"; -import Text, { TextType } from "../Text"; -import { - ERROR_MESSAGE_NAME_EMPTY, - createMessage, - FORM_VALIDATION_INVALID_EMAIL, -} from "../constants/messages"; -import type { IconName } from "../Icon"; -import Icon, { IconCollection, IconSize } from "../Icon"; -import { AsyncControllableInput } from "@blueprintjs/core/lib/esm/components/forms/asyncControllableInput"; -import _ from "lodash"; -import { replayHighlightClass } from "../constants/classes"; -import { hexToRgba } from "../utils/colors"; - -export type InputType = "text" | "password" | "number" | "email" | "tel"; - -export type Validator = (value: string) => { - isValid: boolean; - message: string; -}; - -// TODO (abhinav): Use a regex which adheres to standards RFC5322 -const isEmail = (value: string) => { - const re = - /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; - return re.test(value); -}; - -export function emailValidator(email: string) { - let isValid = true; - if (email) { - isValid = isEmail(email); - } - return { - isValid: isValid, - message: !isValid ? createMessage(FORM_VALIDATION_INVALID_EMAIL) : "", - }; -} - -export function notEmptyValidator(value: string) { - const isValid = !!value; - return { - isValid: isValid, - message: !isValid ? createMessage(ERROR_MESSAGE_NAME_EMPTY) : "", - }; -} - -export type TextInputProps = CommonComponentProps & { - autoFocus?: boolean; - placeholder?: string; - fill?: boolean; - defaultValue?: string; - value?: string; - validator?: (value: string) => { isValid: boolean; message: string }; - onChange?: (value: string) => void; - readOnly?: boolean; - dataType?: string; - leftIcon?: IconName; - prefix?: string; - helperText?: string; - rightSideComponent?: React.ReactNode; - width?: string; - height?: string; - noBorder?: boolean; - noCaret?: boolean; - onBlur?: EventHandler>; - onFocus?: EventHandler>; - errorMsg?: string; - trimValue?: boolean; - $padding?: string; - useTextArea?: boolean; - isCopy?: boolean; - border?: boolean; - style?: any; - tabIndex?: number; -}; - -interface boxReturnType { - bgColor: string; - color: string; - borderColor: string; -} - -const boxStyles = (props: TextInputProps, isValid: boolean): boxReturnType => { - let bgColor = "var(--ads-text-input-text-box-default-background-color)"; - let color = "var(--ads-text-input-text-box-default-text-color)"; - let borderColor = "var(--ads-text-input-text-box-default-border-color)"; - - if (props.disabled) { - bgColor = "var(--ads-text-input-text-box-disabled-background-color)"; - color = "var(--ads-text-input-text-box-disabled-text-color)"; - borderColor = "var(--ads-text-input-text-box-disabled-border-color)"; - } - if (props.readOnly) { - bgColor = "var(--ads-text-input-text-box-read-only-background-color)"; - color = "var(--ads-text-input-text-box-read-only-text-color)"; - borderColor = "var(--ads-text-input-text-box-read-only-border-color)"; - } - if (!isValid) { - bgColor = hexToRgba("var(--ads-danger-main)", 0.1); - color = "var(--ads-danger-main)"; - borderColor = "var(--ads-danger-main)"; - } - return { bgColor, color, borderColor }; -}; - -const InputLoader = styled.div<{ - $value?: string; - $noBorder?: boolean; - $isFocused?: boolean; - $isLoading?: boolean; - $height?: string; -}>` - display: ${(props) => (props.$isLoading ? "static" : "none")}; - border-radius: 0; - width: ${(props) => - props.$value && !props.$noBorder && props.$isFocused - ? "calc(100% - 50px)" - : "100%"}; - - height: ${(props) => props.$height || "36px"}; -`; - -const StyledInput = styled((props) => { - // we are removing non input related props before passing them in the components - // eslint-disable @typescript-eslint/no-unused-vars - const { dataType, inputRef, ...inputProps } = props; - - const omitProps = [ - "hasLeftIcon", - "inputStyle", - "rightSideComponentWidth", - "validator", - "isValid", - "cypressSelector", - "leftIcon", - "helperText", - "rightSideComponent", - "noBorder", - "isLoading", - "noCaret", - "fill", - "errorMsg", - "useTextArea", - "border", - "asyncControl", - "handleCopy", - "prefix", - ]; - - const HtmlTag = props.useTextArea ? "textarea" : "input"; - - return props.asyncControl ? ( - - ) : ( - - ); -})< - TextInputProps & { - inputStyle: boxReturnType; - isValid: boolean; - rightSideComponentWidth: number; - hasLeftIcon: boolean; - $isLoading?: boolean; - } ->` - display: ${(props) => (props.$isLoading ? "none" : "static")}; - ${(props) => (props.noCaret ? "caret-color: white;" : null)}; - color: ${(props) => props.inputStyle.color}; - width: ${(props) => - props.value && !props.noBorder && props.isFocused - ? "calc(100% - 50px)" - : "100%"}; - border-radius: 0; - outline: 0; - box-shadow: none; - border: none; - padding: 0px var(--ads-spaces-6); - ${(props) => (props.$padding ? `padding: ${props.$padding}` : "")}; - padding-right: ${(props) => - `calc(${props.rightSideComponentWidth}px + var(--ads-spaces-6))`}; - background-color: transparent; - font-size: ${typography.p1.fontSize}px; - font-weight: ${typography.p1.fontWeight}; - line-height: ${typography.p1.lineHeight}px; - letter-spacing: ${typography.p1.letterSpacing}px; - text-overflow: ellipsis; - height: 100%; - - &::placeholder { - color: var(--ads-text-input-placeholder-text-color); - } - &:disabled { - cursor: not-allowed; - } -`; - -export const InputWrapper = styled.div<{ - value?: string; - isFocused: boolean; - fill?: number; - noBorder?: boolean; - height?: string; - width?: string; - inputStyle: boxReturnType; - isValid?: boolean; - disabled?: boolean; - $isLoading?: boolean; - readOnly?: boolean; -}>` - position: relative; - display: flex; - align-items: center; - width: ${(props) => - props.fill ? "100%" : props.width ? props.width : "260px"}; - height: ${(props) => props.height || "36px"}; - border: 1.2px solid - ${(props) => - props.noBorder ? "transparent" : props.inputStyle.borderColor}; - background-color: ${(props) => props.inputStyle.bgColor}; - color: ${(props) => props.inputStyle.color}; - ${(props) => - props.isFocused && !props.noBorder && !props.disabled && !props.readOnly - ? ` - border: 1.2px solid - ${ - props.isValid - ? "var(--appsmith-input-focus-border-color)" - : "var(--ads-danger-main)" - }; - ` - : null} - - .${Classes.TEXT} { - color: var(--ads-danger-main); - } - .helper { - .${Classes.TEXT} { - color: var(--ads-text-input-helper-text-text-color); - } - } - &:hover { - background-color: ${(props) => - props.disabled || props.readOnly - ? props.inputStyle.bgColor - : "var(--ads-text-input-text-box-hover-background-color)"}; - } - ${(props) => (props.disabled ? "cursor: not-allowed;" : null)} -`; - -const MsgWrapper = styled.div` - position: absolute; - bottom: -20px; - left: 0px; - &.helper { - .${Classes.TEXT} { - color: var(--ads-text-input-helper-text-text-color); - } - } -`; - -const RightSideContainer = styled.div` - position: absolute; - right: var(--ads-spaces-6); - bottom: 0; - top: 0; - display: flex; - align-items: center; -`; - -const IconWrapper = styled.div` - .${Classes.ICON} { - margin-right: var(--ads-spaces-5); - } -`; - -const PrefixWrapper = styled.div` - .${Classes.TEXT} { - padding-left: var(--ads-spaces-2); - color: var(--ads-color-black-400); - } -`; - -const initialValidation = (props: TextInputProps) => { - let validationObj = { isValid: true, message: "" }; - if (props.defaultValue && props.validator) { - validationObj = props.validator(props.defaultValue); - } - return validationObj; -}; - -const TextInput = forwardRef( - (props: TextInputProps, ref: Ref) => { - // - const [validation, setValidation] = useState<{ - isValid: boolean; - message: string; - }>(initialValidation(props)); - - const [rightSideComponentWidth, setRightSideComponentWidth] = useState(0); - const [isFocused, setIsFocused] = useState(false); - const [inputValue, setInputValue] = useState(props.defaultValue); - - const { trimValue = false } = props; - - const setRightSideRef = useCallback((ref: HTMLDivElement) => { - if (ref) { - const { width } = ref.getBoundingClientRect(); - setRightSideComponentWidth(width); - } - }, []); - - const inputStyle = useMemo( - () => boxStyles(props, validation?.isValid), - [props, validation?.isValid], - ); - - // set the default value - useEffect(() => { - if (props.defaultValue) { - const inputValue = props.defaultValue; - setInputValue(inputValue); - checkValidator(inputValue); - props.onChange && props.onChange(inputValue); - } - }, [props.defaultValue]); - - const checkValidator = (inputValue: string) => { - const inputValueValidation = - props.validator && props.validator(inputValue); - if (inputValueValidation) { - props.validator && setValidation(inputValueValidation); - } - }; - - const memoizedChangeHandler = useCallback( - (el) => { - const inputValue: string = trimValue - ? el.target.value.trim() - : el.target.value; - setInputValue(inputValue); - checkValidator(inputValue); - return props.onChange && props.onChange(inputValue); - }, - [props.onChange, setValidation, trimValue], - ); - - const onBlurHandler = useCallback( - (e: React.FocusEvent) => { - setIsFocused(false); - if (props.onBlur) props.onBlur(e); - }, - [setIsFocused, props.onBlur], - ); - - const onFocusHandler = useCallback((e: React.FocusEvent) => { - setIsFocused(true); - if (props.onFocus) props.onFocus(e); - }, []); - - const ErrorMessage = ( - - - {props.errorMsg ? props.errorMsg : validation?.message} - - - ); - - const HelperMessage = ( - - * {props.helperText} - - ); - - const iconColor = !validation?.isValid - ? "var(--ads-danger-main)" - : "var(--ads-text-input-icon-path-color)"; - - const hasLeftIcon = props.leftIcon - ? IconCollection.includes(props.leftIcon) - : false; - - return ( - - {props.leftIcon && ( - - - - )} - - {props.prefix && ( - - {props.prefix} - - )} - - - - - {validation?.isValid && - props.helperText && - props.helperText.length > 0 && - HelperMessage} - {ErrorMessage} - - {props.rightSideComponent} - - - ); - }, -); - -TextInput.displayName = "TextInput"; - -export default TextInput; diff --git a/app/client/packages/design-system/ads-old/src/TreeDropdown/index.tsx b/app/client/packages/design-system/ads-old/src/TreeDropdown/index.tsx index e7c9ebfcdf..0a5c6a3322 100644 --- a/app/client/packages/design-system/ads-old/src/TreeDropdown/index.tsx +++ b/app/client/packages/design-system/ads-old/src/TreeDropdown/index.tsx @@ -18,7 +18,7 @@ import { Classes, } from "@blueprintjs/core"; import styled from "styled-components"; -import Icon, { IconSize } from "../Icon"; +import { Icon } from "@appsmith/ads"; import { replayHighlightClass } from "../constants/classes"; import useDSEvent from "../hooks/useDSEvent"; import { DSEventTypes } from "../types/common"; @@ -626,7 +626,7 @@ function TreeDropdown(props: TreeDropdownProps) { }`} elementRef={buttonRef} onKeyDown={handleKeydown} - rightIcon={} + rightIcon={} text={ selectedLabelModifier ? selectedLabelModifier(selectedOptionFromProps, displayValue) diff --git a/app/client/packages/design-system/ads-old/src/constants/classes.ts b/app/client/packages/design-system/ads-old/src/constants/classes.ts index 193150fc03..e49de106d7 100644 --- a/app/client/packages/design-system/ads-old/src/constants/classes.ts +++ b/app/client/packages/design-system/ads-old/src/constants/classes.ts @@ -1,5 +1,5 @@ export enum Classes { - ICON = "cs-icon", + ICON = "ads-v2-icon", APP_ICON = "cs-app-icon", TEXT = "cs-text", BP3_POPOVER_ARROW_BORDER = "bp3-popover-arrow-border", diff --git a/app/client/packages/design-system/ads-old/src/index.ts b/app/client/packages/design-system/ads-old/src/index.ts index 7359c6e804..b7ca23f274 100644 --- a/app/client/packages/design-system/ads-old/src/index.ts +++ b/app/client/packages/design-system/ads-old/src/index.ts @@ -3,12 +3,6 @@ export { default as AppIcon } from "./AppIcon"; export * from "./AppIcon"; -export { default as Breadcrumbs } from "./Breadcrumbs"; -export * from "./Breadcrumbs"; - -export { default as Button } from "./Button"; -export * from "./Button"; - export { default as Checkbox } from "./Checkbox"; export * from "./Checkbox"; @@ -26,8 +20,11 @@ export * from "./DisplayImageUpload"; export { default as DraggableList } from "./DraggableList"; export * from "./DraggableList"; -export { default as Dropdown } from "./Dropdown"; -export * from "./Dropdown"; +export type { + DropdownOption, + DropdownOnSelect, + RenderDropdownOptionType, +} from "./Dropdown"; export { default as EditableText } from "./EditableText"; export * from "./EditableText"; @@ -48,9 +45,6 @@ export * from "./GifPlayer"; export * from "./HighlightText"; -export { default as Icon } from "./Icon"; -export * from "./Icon"; - export { default as IconSelector } from "./IconSelector"; export * from "./IconSelector"; @@ -69,9 +63,6 @@ export * from "./RectangularSwitcher"; export { default as SearchComponent } from "./SearchComponent"; export * from "./SearchComponent"; -export { default as Spinner } from "./Spinner"; -export * from "./Spinner"; - export { default as Statusbar } from "./Statusbar"; export * from "./Statusbar"; @@ -81,8 +72,6 @@ export * from "./Switch"; export { default as Switcher } from "./Switcher"; export * from "./Switcher"; -export * from "./Tabs"; - export { default as Table } from "./Table"; export * from "./Table"; @@ -92,9 +81,6 @@ export * from "./TagInput"; export { default as Text } from "./Text"; export * from "./Text"; -export { default as TextInput } from "./TextInput"; -export * from "./TextInput"; - export { default as TooltipComponent } from "./Tooltip"; export * from "./Tooltip"; @@ -108,3 +94,5 @@ export * from "./constants/variants"; export * from "./types/common"; export * from "./utils/colors"; export * from "./utils/icon-loadables"; +export * from "./utils/emailValidator"; +export * from "./utils/notEmptyValidator"; diff --git a/app/client/packages/design-system/ads-old/src/utils/emailValidator.ts b/app/client/packages/design-system/ads-old/src/utils/emailValidator.ts new file mode 100644 index 0000000000..311dda4e13 --- /dev/null +++ b/app/client/packages/design-system/ads-old/src/utils/emailValidator.ts @@ -0,0 +1,21 @@ +import { + createMessage, + FORM_VALIDATION_INVALID_EMAIL, +} from "../constants/messages"; + +const isEmail = (value: string) => { + const re = + /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; + return re.test(value); +}; + +export function emailValidator(email: string) { + let isValid = true; + if (email) { + isValid = isEmail(email); + } + return { + isValid: isValid, + message: !isValid ? createMessage(FORM_VALIDATION_INVALID_EMAIL) : "", + }; +} diff --git a/app/client/packages/design-system/ads-old/src/utils/notEmptyValidator.ts b/app/client/packages/design-system/ads-old/src/utils/notEmptyValidator.ts new file mode 100644 index 0000000000..8eb2465994 --- /dev/null +++ b/app/client/packages/design-system/ads-old/src/utils/notEmptyValidator.ts @@ -0,0 +1,9 @@ +import { createMessage, ERROR_MESSAGE_NAME_EMPTY } from "../constants/messages"; + +export function notEmptyValidator(value: string) { + const isValid = !!value; + return { + isValid: isValid, + message: !isValid ? createMessage(ERROR_MESSAGE_NAME_EMPTY) : "", + }; +} diff --git a/app/client/packages/design-system/ads/src/Icon/index.ts b/app/client/packages/design-system/ads/src/Icon/index.ts index cc3bea1319..849fe20479 100644 --- a/app/client/packages/design-system/ads/src/Icon/index.ts +++ b/app/client/packages/design-system/ads/src/Icon/index.ts @@ -1,2 +1,3 @@ export * from "./Icon"; export * from "./Icon.types"; +export { IconCollection } from "./Icon.provider"; diff --git a/app/client/src/components/TabItemBackgroundFill.tsx b/app/client/src/components/TabItemBackgroundFill.tsx index b3f68e1c4a..ba218e791d 100644 --- a/app/client/src/components/TabItemBackgroundFill.tsx +++ b/app/client/src/components/TabItemBackgroundFill.tsx @@ -1,6 +1,5 @@ import React from "react"; import styled from "styled-components"; -import type { TabProp } from "@appsmith/ads-old"; import { getTypographyByKey } from "@appsmith/ads-old"; import type { Theme } from "constants/DefaultTheme"; @@ -40,7 +39,9 @@ const Wrapper = styled.div` `; export default function TabItemBackgroundFill(props: { - tab: TabProp; + tab: { + title: string; + }; selected: boolean; vertical: boolean; }) { diff --git a/app/client/src/components/editorComponents/ActionCreator/types.ts b/app/client/src/components/editorComponents/ActionCreator/types.ts index 6ff13ef069..f59b3d68f9 100644 --- a/app/client/src/components/editorComponents/ActionCreator/types.ts +++ b/app/client/src/components/editorComponents/ActionCreator/types.ts @@ -1,8 +1,5 @@ -import type { - SwitcherProps, - TreeDropdownOption, - IconName, -} from "@appsmith/ads-old"; +import type { SwitcherProps, TreeDropdownOption } from "@appsmith/ads-old"; +import type { IconNames } from "@appsmith/ads"; import type { EntityTypeValue, MetaArgs } from "ee/entities/DataTree/types"; import type React from "react"; import type { AdditionalDynamicDataTree } from "utils/autocomplete/customTreeTypeDefCreator"; @@ -177,7 +174,7 @@ export interface FieldGroupValueType { defaultParams: string; value?: string; children?: TreeDropdownOption[]; - icon?: IconName; + icon?: IconNames; } export interface FieldGroupConfig { diff --git a/app/client/src/components/editorComponents/EntityBottomTabs.tsx b/app/client/src/components/editorComponents/EntityBottomTabs.tsx index df4a388112..002b0f2620 100644 --- a/app/client/src/components/editorComponents/EntityBottomTabs.tsx +++ b/app/client/src/components/editorComponents/EntityBottomTabs.tsx @@ -1,10 +1,10 @@ import React from "react"; -import type { CollapsibleTabProps } from "@appsmith/ads-old"; import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import { DEBUGGER_TAB_KEYS } from "./Debugger/helpers"; import { Tab, TabPanel, Tabs, TabsList } from "@appsmith/ads"; import styled from "styled-components"; import { LIST_HEADER_HEIGHT, FOOTER_MARGIN } from "./Debugger/DebuggerLogs"; +import type { RefObject } from "react"; const TabPanelWrapper = styled(TabPanel)` margin-top: 0; @@ -40,8 +40,12 @@ interface EntityBottomTabsProps { isCollapsed?: boolean; } -type CollapsibleEntityBottomTabsProps = EntityBottomTabsProps & - CollapsibleTabProps; +type CollapsibleEntityBottomTabsProps = EntityBottomTabsProps & { + // Reference to container for collapsing or expanding content + containerRef: RefObject; + // height of container when expanded( usually the default height of the tab component) + expandedHeight: string; +}; // Using this if there are debugger related tabs function EntityBottomTabs( @@ -60,23 +64,6 @@ function EntityBottomTabs( } }; - // if (props.isCollapsed) { - // return ( - // - // {props.tabs.map((tab) => ( - // - // ))} - // - // ); - // } - return ( ` height: 100%; justify-content: flex-start; - .cs-icon { + .ads-v2-icon { border-radius: 50%; width: ${(props) => props.theme.spaces[12] + 2}px; height: ${(props) => props.theme.spaces[12] + 2}px; @@ -113,7 +113,7 @@ const StatusbarWrapper = styled.div` align-items: center; justify-content: center; - .cs-icon { + .ads-v2-icon { margin: auto; border-radius: var(--ads-v2-border-radius-circle); width: 32px; diff --git a/app/client/src/components/editorComponents/form/fields/NumberField.tsx b/app/client/src/components/editorComponents/form/fields/NumberField.tsx deleted file mode 100644 index 9e7c155037..0000000000 --- a/app/client/src/components/editorComponents/form/fields/NumberField.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from "react"; -import type { BaseFieldProps } from "redux-form"; -import { Field } from "redux-form"; -import type { TextInputProps } from "@appsmith/ads-old"; -import { TextInput } from "@appsmith/ads-old"; - -type RenderComponentProps = TextInputProps & { - input?: { - onChange?: (value: number) => void; - value?: number; - }; -}; - -function RenderComponent(props: RenderComponentProps) { - const onChangeHandler = (value: number) => { - props.input && props.input.onChange && props.input.onChange(value); - }; - - return ( - onChangeHandler(Number(value))} - /> - ); -} - -class NumberField extends React.Component { - render() { - return ( - - ); - } -} - -export default NumberField; diff --git a/app/client/src/components/formControls/InputNumberControl.tsx b/app/client/src/components/formControls/InputNumberControl.tsx deleted file mode 100644 index e77b2c9167..0000000000 --- a/app/client/src/components/formControls/InputNumberControl.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import React from "react"; -import type { ControlProps } from "./BaseControl"; -import BaseControl from "./BaseControl"; -import type { ControlType } from "constants/PropertyControlConstants"; -import NumberField from "components/editorComponents/form/fields/NumberField"; -import { Classes, Text, TextType } from "@appsmith/ads-old"; -import styled from "styled-components"; - -const FormGroup = styled.div` - display: flex; - align-items: center; - - .${Classes.TEXT} { - color: ${(props) => props.theme.colors.apiPane.settings.textColor}; - margin-right: ${(props) => props.theme.spaces[12]}px; - } -`; - -export function InputText(props: { - label: string; - value: string; - placeholder?: string; - dataType?: string; - name: string; -}) { - const { dataType, label, name, placeholder } = props; - - return ( - - {label} - - - ); -} - -class InputNumberControl extends BaseControl { - render() { - const { configProperty, dataType, label, placeholderText, propertyValue } = - this.props; - - return ( - - ); - } - - getControlType(): ControlType { - return "NUMBER_INPUT"; - } -} - -export interface InputControlProps extends ControlProps { - placeholderText: string; -} - -export default InputNumberControl; diff --git a/app/client/src/components/propertyControls/StyledControls.tsx b/app/client/src/components/propertyControls/StyledControls.tsx index 2c24244393..836d651658 100644 --- a/app/client/src/components/propertyControls/StyledControls.tsx +++ b/app/client/src/components/propertyControls/StyledControls.tsx @@ -1,6 +1,5 @@ import * as React from "react"; import styled from "styled-components"; -import type { TextInputProps } from "@appsmith/ads-old"; import type { ContainerOrientation } from "constants/WidgetConstants"; import { Input, Icon } from "@appsmith/ads"; import useInteractionAnalyticsEvent from "utils/hooks/useInteractionAnalyticsEvent"; @@ -90,7 +89,21 @@ export const StyledNavigateToFieldsContainer = styled.div` width: 95%; `; -export const InputGroup = React.forwardRef((props: TextInputProps, ref) => { +interface InputGroupProps { + autoFocus?: boolean; + className?: string; + dataType?: string; + onBlur?: () => void; + onFocus?: () => void; + placeholder?: string; + value?: string; + width?: string; + onChange?: (value: string) => void; + defaultValue?: string; + tabIndex?: number; +} + +export const InputGroup = React.forwardRef((props: InputGroupProps, ref) => { let inputRef = React.useRef(null); const wrapperRef = React.useRef(null); const { dispatchInteractionAnalyticsEvent } = diff --git a/app/client/src/components/utils/ReduxFormTextField.tsx b/app/client/src/components/utils/ReduxFormTextField.tsx index e62af75257..7201d1ff50 100644 --- a/app/client/src/components/utils/ReduxFormTextField.tsx +++ b/app/client/src/components/utils/ReduxFormTextField.tsx @@ -1,7 +1,6 @@ import React from "react"; import type { WrappedFieldMetaProps, WrappedFieldInputProps } from "redux-form"; import { Field } from "redux-form"; -import type { InputType } from "@appsmith/ads-old"; import { Input, NumberInput } from "@appsmith/ads"; import type { Intent } from "constants/DefaultTheme"; @@ -48,7 +47,7 @@ export interface FormTextFieldProps { name: string; placeholder: string; description?: string; - type?: InputType; + type?: "text" | "password" | "number" | "email" | "tel"; label?: React.ReactNode; intent?: Intent; disabled?: boolean; diff --git a/app/client/src/components/utils/helperComponents.tsx b/app/client/src/components/utils/helperComponents.tsx index 95a49683dc..9e11f0b3fb 100644 --- a/app/client/src/components/utils/helperComponents.tsx +++ b/app/client/src/components/utils/helperComponents.tsx @@ -7,7 +7,7 @@ import { Link, Text } from "@appsmith/ads"; export const HelpPopoverStyle = createGlobalStyle` .bp3-portal { .delete-menu-item { - .cs-icon, .cs-text { + .ads-v2-icon, .cs-text { color: var(--appsmith-color-red-500) !important; svg { path { diff --git a/app/client/src/constants/AppConstants.ts b/app/client/src/constants/AppConstants.ts index 4701738de8..8af037a86a 100644 --- a/app/client/src/constants/AppConstants.ts +++ b/app/client/src/constants/AppConstants.ts @@ -2,14 +2,10 @@ import localStorage from "utils/localStorage"; import { GridDefaults } from "./WidgetConstants"; import { APP_MAX_WIDTH, type AppMaxWidth } from "@appsmith/wds-theming"; -export const CANVAS_DEFAULT_HEIGHT_PX = 1292; export const CANVAS_DEFAULT_MIN_HEIGHT_PX = 380; -export const CANVAS_DEFAULT_GRID_HEIGHT_PX = 1; -export const CANVAS_DEFAULT_GRID_WIDTH_PX = 1; export const CANVAS_DEFAULT_MIN_ROWS = Math.ceil( CANVAS_DEFAULT_MIN_HEIGHT_PX / GridDefaults.DEFAULT_GRID_ROW_HEIGHT, ); -export const CANVAS_BACKGROUND_COLOR = "#FFFFFF"; export const DEFAULT_ENTITY_EXPLORER_WIDTH = 256; export const DEFAULT_PROPERTY_PANE_WIDTH = 288; export const APP_SETTINGS_PANE_WIDTH = 525; @@ -40,7 +36,6 @@ export const getPersistentAppStore = (appId: string, branch?: string) => { return store; }; -export const TOOLTIP_HOVER_ON_DELAY = 1000; export const TOOLTIP_HOVER_ON_DELAY_IN_S = 1; export const MOBILE_MAX_WIDTH = 767; @@ -63,11 +58,6 @@ export const NAVIGATION_SETTINGS = { STATIC: "static", STICKY: "sticky", }, - ITEM_STYLE: { - TEXT_ICON: "textIcon", - TEXT: "text", - ICON: "icon", - }, COLOR_STYLE: { LIGHT: "light", THEME: "theme", @@ -87,7 +77,6 @@ export interface NavigationSetting { orientation: (typeof NAVIGATION_SETTINGS.ORIENTATION)[keyof typeof NAVIGATION_SETTINGS.ORIENTATION]; navStyle: (typeof NAVIGATION_SETTINGS.NAV_STYLE)[keyof typeof NAVIGATION_SETTINGS.NAV_STYLE]; position: (typeof NAVIGATION_SETTINGS.POSITION)[keyof typeof NAVIGATION_SETTINGS.POSITION]; - itemStyle: (typeof NAVIGATION_SETTINGS.ITEM_STYLE)[keyof typeof NAVIGATION_SETTINGS.ITEM_STYLE]; colorStyle: (typeof NAVIGATION_SETTINGS.COLOR_STYLE)[keyof typeof NAVIGATION_SETTINGS.COLOR_STYLE]; logoAssetId: string; logoConfiguration: (typeof NAVIGATION_SETTINGS.LOGO_CONFIGURATION)[keyof typeof NAVIGATION_SETTINGS.LOGO_CONFIGURATION]; @@ -127,7 +116,6 @@ export const defaultNavigationSetting = { orientation: NAVIGATION_SETTINGS.ORIENTATION.TOP, navStyle: NAVIGATION_SETTINGS.NAV_STYLE.STACKED, position: NAVIGATION_SETTINGS.POSITION.STATIC, - itemStyle: NAVIGATION_SETTINGS.ITEM_STYLE.TEXT, colorStyle: NAVIGATION_SETTINGS.COLOR_STYLE.LIGHT, logoAssetId: NAVIGATION_SETTINGS.LOGO_ASSET_ID, logoConfiguration: diff --git a/app/client/src/pages/AdminSettings/SettingsBreadcrumbs.tsx b/app/client/src/pages/AdminSettings/SettingsBreadcrumbs.tsx deleted file mode 100644 index ebc84a8658..0000000000 --- a/app/client/src/pages/AdminSettings/SettingsBreadcrumbs.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react"; -import { Breadcrumbs } from "@appsmith/ads-old"; -import { BreadcrumbCategories } from "ee/pages/AdminSettings/BreadcrumbCategories"; - -export const getBreadcrumbList = (category: string, subCategory?: string) => { - const breadcrumbList = [ - BreadcrumbCategories.HOMEPAGE, - ...(subCategory - ? [BreadcrumbCategories[category], BreadcrumbCategories[subCategory]] - : [BreadcrumbCategories[category]]), - ]; - - return breadcrumbList; -}; - -function SettingsBreadcrumbs({ - category, - subCategory, -}: { - category: string; - subCategory?: string; -}) { - return ; -} - -export default SettingsBreadcrumbs; diff --git a/app/client/src/pages/AppViewer/Navigation/Sidebar.tsx b/app/client/src/pages/AppViewer/Navigation/Sidebar.tsx index 1d2ef4322d..cf012e47a2 100644 --- a/app/client/src/pages/AppViewer/Navigation/Sidebar.tsx +++ b/app/client/src/pages/AppViewer/Navigation/Sidebar.tsx @@ -197,7 +197,6 @@ export function Sidebar(props: SidebarProps) { key={page.pageId} > { +const MenuItem = ({ navigationSetting, page, query }: MenuItemProps) => { const appMode = useSelector(getAppMode); const pageURL = useHref( appMode === APP_MODE.PUBLISHED ? viewerURL : builderURL, @@ -61,28 +53,11 @@ const MenuItem = ({ state: { invokedBy: NavigationMethod.AppNavigation }, }} > - {navigationSetting?.itemStyle !== NAVIGATION_SETTINGS.ITEM_STYLE.TEXT && ( - - )} - {navigationSetting?.itemStyle !== NAVIGATION_SETTINGS.ITEM_STYLE.ICON && - !isMinimal && ( - - )} + ); }; diff --git a/app/client/src/pages/AppViewer/Navigation/components/MoreDropdownButton.tsx b/app/client/src/pages/AppViewer/Navigation/components/MoreDropdownButton.tsx index 9ef093650e..8075187854 100644 --- a/app/client/src/pages/AppViewer/Navigation/components/MoreDropdownButton.tsx +++ b/app/client/src/pages/AppViewer/Navigation/components/MoreDropdownButton.tsx @@ -6,7 +6,6 @@ import { useSelector } from "react-redux"; import { getSelectedAppTheme } from "selectors/appThemingSelectors"; import { Icon } from "@appsmith/ads"; import MenuText from "./MenuText"; -import classNames from "classnames"; import { StyledMenuDropdownContainer, StyledMenuItemInDropdown, @@ -57,32 +56,14 @@ const MoreDropdownButton = ({ }} primaryColor={primaryColor} > - {navigationSetting?.itemStyle !== - NAVIGATION_SETTINGS.ITEM_STYLE.TEXT && ( - + - )} - - {navigationSetting?.itemStyle !== - NAVIGATION_SETTINGS.ITEM_STYLE.ICON && ( - <> - - {/*@ts-expect-error Fix this the next time the file is edited*/} - - - )} + + ); @@ -124,25 +105,11 @@ const MoreDropdownButton = ({ state: { invokedBy: NavigationMethod.AppNavigation }, }} > - {navigationSetting?.itemStyle !== - NAVIGATION_SETTINGS.ITEM_STYLE.TEXT && ( - - )} - {navigationSetting?.itemStyle !== - NAVIGATION_SETTINGS.ITEM_STYLE.ICON && ( - - )} + ); })} diff --git a/app/client/src/pages/Editor/APIEditor/ApiRightPane.tsx b/app/client/src/pages/Editor/APIEditor/ApiRightPane.tsx index 0bd2e93cff..dd8169a2b1 100644 --- a/app/client/src/pages/Editor/APIEditor/ApiRightPane.tsx +++ b/app/client/src/pages/Editor/APIEditor/ApiRightPane.tsx @@ -97,7 +97,7 @@ const DatasourceCard = styled.div` opacity: 0; visibility: hidden; } - .cs-icon { + .ads-v2-icon { opacity: 0; transition: 0.3s all ease; } @@ -107,7 +107,7 @@ const DatasourceCard = styled.div` } &:hover { background-color: var(--ads-v2-color-bg-subtle); - .cs-icon { + .ads-v2-icon { opacity: 1; } } diff --git a/app/client/src/pages/Editor/AppSettingsPane/AppSettings/NavigationSettings/index.tsx b/app/client/src/pages/Editor/AppSettingsPane/AppSettings/NavigationSettings/index.tsx index e5204e386c..e17e972369 100644 --- a/app/client/src/pages/Editor/AppSettingsPane/AppSettings/NavigationSettings/index.tsx +++ b/app/client/src/pages/Editor/AppSettingsPane/AppSettings/NavigationSettings/index.tsx @@ -2,11 +2,6 @@ import React, { useCallback, useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { getCurrentApplication } from "ee/selectors/applicationSelectors"; import { APP_NAVIGATION_SETTING, createMessage } from "ee/constants/messages"; -// import { ReactComponent as NavOrientationTopIcon } from "assets/icons/settings/nav-orientation-top.svg"; -// import { ReactComponent as NavOrientationSideIcon } from "assets/icons/settings/nav-orientation-side.svg"; -// import { ReactComponent as NavStyleInlineIcon } from "assets/icons/settings/nav-style-inline.svg"; -// import { ReactComponent as NavStyleStackedIcon } from "assets/icons/settings/nav-style-stacked.svg"; -// import { ReactComponent as NavStyleSidebarIcon } from "assets/icons/settings/nav-style-sidebar.svg"; import type { NavigationSetting } from "constants/AppConstants"; import { NAVIGATION_SETTINGS } from "constants/AppConstants"; import _, { debounce, isEmpty, isPlainObject } from "lodash"; @@ -22,15 +17,6 @@ import LogoInput from "pages/Editor/NavigationSettings/LogoInput"; import SwitchSettingForLogoConfiguration from "./SwitchSettingForLogoConfiguration"; import { selectFeatureFlags } from "ee/selectors/featureFlagsSelectors"; -/** - * TODO - @Dhruvik - ImprovedAppNav - * Revisit these imports in v1.1 - * https://www.notion.so/appsmith/Ship-Faster-33b32ed5b6334810a0b4f42e03db4a5b?pvs=4 - */ -// import { ReactComponent as NavPositionStickyIcon } from "assets/icons/settings/nav-position-sticky.svg"; -// import { ReactComponent as NavPositionStaticIcon } from "assets/icons/settings/nav-position-static.svg"; -// import { ReactComponent as NavStyleMinimalIcon } from "assets/icons/settings/nav-style-minimal.svg"; - export type UpdateSetting = ( key: keyof NavigationSetting, value: NavigationSetting[keyof NavigationSetting], @@ -158,32 +144,6 @@ function NavigationSettings() { : NAVIGATION_SETTINGS.NAV_STYLE.SIDEBAR; } - /** - * TODO - @Dhruvik - ImprovedAppNav - * Uncomment to change these settings automatically in v1.1 - * https://www.notion.so/appsmith/Ship-Faster-33b32ed5b6334810a0b4f42e03db4a5b - * - * When the orientation is side and nav style changes - - * 1. to minimal, change the item style to icon - * 1. to sidebar, change the item style to text + icon - */ - // if ( - // newSettings.orientation === - // NAVIGATION_SETTINGS.ORIENTATION.SIDE && - // navigationSetting.navStyle !== newSettings.navStyle - // ) { - // if ( - // newSettings.navStyle === NAVIGATION_SETTINGS.NAV_STYLE.MINIMAL - // ) { - // newSettings.itemStyle = NAVIGATION_SETTINGS.ITEM_STYLE.ICON; - // } else if ( - // newSettings.navStyle === NAVIGATION_SETTINGS.NAV_STYLE.SIDEBAR - // ) { - // newSettings.itemStyle = - // NAVIGATION_SETTINGS.ITEM_STYLE.TEXT_ICON; - // } - // } - payload.applicationDetail = { navigationSetting: newSettings, }; @@ -225,23 +185,15 @@ function NavigationSettings() { { label: _.startCase(NAVIGATION_SETTINGS.ORIENTATION.TOP), value: NAVIGATION_SETTINGS.ORIENTATION.TOP, - // startIcon:, }, { label: _.startCase(NAVIGATION_SETTINGS.ORIENTATION.SIDE), value: NAVIGATION_SETTINGS.ORIENTATION.SIDE, - // startIcon:, }, ]} updateSetting={updateSetting} /> - {/** - * TODO - @Dhruvik - ImprovedAppNav - * Remove check for orientation = top when adding sidebar minimal to show sidebar - * variants as well. - * https://www.notion.so/appsmith/Ship-Faster-33b32ed5b6334810a0b4f42e03db4a5b - */} {navigationSetting?.orientation === NAVIGATION_SETTINGS.ORIENTATION.TOP && ( , hidden: navigationSetting?.orientation === NAVIGATION_SETTINGS.ORIENTATION.SIDE, @@ -260,7 +211,6 @@ function NavigationSettings() { { label: _.startCase(NAVIGATION_SETTINGS.NAV_STYLE.INLINE), value: NAVIGATION_SETTINGS.NAV_STYLE.INLINE, - // startIcon:, hidden: navigationSetting?.orientation === NAVIGATION_SETTINGS.ORIENTATION.SIDE, @@ -268,90 +218,15 @@ function NavigationSettings() { { label: _.startCase(NAVIGATION_SETTINGS.NAV_STYLE.SIDEBAR), value: NAVIGATION_SETTINGS.NAV_STYLE.SIDEBAR, - // startIcon:, hidden: navigationSetting?.orientation === NAVIGATION_SETTINGS.ORIENTATION.TOP, }, - /** - * TODO - @Dhruvik - ImprovedAppNav - * Hiding minimal sidebar for v1 - * https://www.notion.so/appsmith/Ship-Faster-33b32ed5b6334810a0b4f42e03db4a5b - */ - // { - // label: _.startCase(NAVIGATION_SETTINGS.NAV_STYLE.MINIMAL), - // value: NAVIGATION_SETTINGS.NAV_STYLE.MINIMAL, - // startIcon:, - // hidden: - // navigationSetting?.orientation === - // NAVIGATION_SETTINGS.ORIENTATION.TOP, - // }, ]} updateSetting={updateSetting} /> )} - {/** - * TODO - @Dhruvik - ImprovedAppNav - * Hiding position for v1 - * https://www.notion.so/appsmith/Logo-configuration-option-can-be-multiselect-2a436598539c4db99d1f030850fd8918?pvs=4 - */} - {/* , - }, - { - label: _.startCase(NAVIGATION_SETTINGS.POSITION.STICKY), - value: NAVIGATION_SETTINGS.POSITION.STICKY, - startIcon:, - }, - ]} - updateSetting={updateSetting} - /> */} - - {/** - * TODO - @Dhruvik - ImprovedAppNav - * Hiding item style for v1 - * https://www.notion.so/appsmith/Logo-configuration-option-can-be-multiselect-2a436598539c4db99d1f030850fd8918?pvs=4 - */} - {/* */} - props.theme.spaces[2]}px; } `; diff --git a/app/client/src/pages/Editor/EditorName/EditableName.tsx b/app/client/src/pages/Editor/EditorName/EditableName.tsx index 7c039b45fb..51d6aaae27 100644 --- a/app/client/src/pages/Editor/EditorName/EditableName.tsx +++ b/app/client/src/pages/Editor/EditorName/EditableName.tsx @@ -22,7 +22,6 @@ export type EditableAppNameProps = CommonComponentProps & { onBlur?: (value: string) => void; isEditingDefault?: boolean; inputValidation?: (value: string) => string | boolean; - hideEditIcon?: boolean; fill?: boolean; isError?: boolean; isEditing: boolean; diff --git a/app/client/src/pages/Editor/EditorName/index.tsx b/app/client/src/pages/Editor/EditorName/index.tsx index abb3fd5743..161beb75f6 100644 --- a/app/client/src/pages/Editor/EditorName/index.tsx +++ b/app/client/src/pages/Editor/EditorName/index.tsx @@ -123,7 +123,6 @@ export function EditorName(props: EditorNameProps) { defaultValue={defaultValue} editInteractionKind={props.editInteractionKind} fill={props.fill} - hideEditIcon inputValidation={inputValidation} isEditing={isEditing} isEditingDefault={isEditingDefault} diff --git a/app/client/src/pages/Editor/Explorer/Libraries/Installer.tsx b/app/client/src/pages/Editor/Explorer/Libraries/Installer.tsx index b390c1ca1c..e451cbbe14 100644 --- a/app/client/src/pages/Editor/Explorer/Libraries/Installer.tsx +++ b/app/client/src/pages/Editor/Explorer/Libraries/Installer.tsx @@ -52,7 +52,7 @@ const Wrapper = styled.div` margin-bottom: 16px; .left-icon { margin-left: 14px; - .cs-icon { + .ads-v2-icon { margin-right: 0; } } diff --git a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx index 63b98174e7..e57062a409 100644 --- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx +++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx @@ -372,7 +372,6 @@ function GeneratePageForm() { value: column.name, subText: column.type, icon: columnIcon, - // @ts-expect-error Fix this the next time the file is edited iconSize: "md", iconColor: "var(--ads-v2-color-fg)", }); @@ -448,8 +447,7 @@ function GeneratePageForm() { iconSize: "md", iconColor: "var(--ads-v2-color-fg)", })); - // @ts-expect-error Fix this the next time the file is edited - setSelectedDatasourceTableOptions(tables); + setSelectedDatasourceTableOptions(tables as DropdownOptions); } }, [bucketList, isS3Plugin, setSelectedDatasourceTableOptions]); @@ -482,8 +480,7 @@ function GeneratePageForm() { columns, }, })); - // @ts-expect-error Fix this the next time the file is edited - setSelectedDatasourceTableOptions(newTables); + setSelectedDatasourceTableOptions(newTables as DropdownOptions); } } } @@ -774,9 +771,7 @@ function GeneratePageForm() { @@ -849,9 +844,7 @@ function GeneratePageForm() { diff --git a/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx b/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx deleted file mode 100644 index 442aa8f3c6..0000000000 --- a/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx +++ /dev/null @@ -1,403 +0,0 @@ -import React from "react"; -import { connect } from "react-redux"; -import type { InjectedFormProps } from "redux-form"; -import { reduxForm } from "redux-form"; -import styled from "styled-components"; -import type { AppState } from "ee/reducers"; -import { API_HOME_SCREEN_FORM } from "ee/constants/forms"; -import ActiveDataSources from "./ActiveDataSources"; -import { - getDatasources, - getMockDatasources, -} from "ee/selectors/entitiesSelector"; -import type { Datasource, MockDatasource } from "entities/Datasource"; -import type { TabProp } from "@appsmith/ads-old"; -import { IconSize } from "@appsmith/ads-old"; -import { INTEGRATION_TABS, INTEGRATION_EDITOR_MODES } from "constants/routes"; -import BackButton from "../DataSourceEditor/BackButton"; -import UnsupportedPluginDialog from "./UnsupportedPluginDialog"; -import { getQueryParams } from "utils/URLUtils"; -import { getIsGeneratePageInitiator } from "utils/GenerateCrudUtil"; -import { getCurrentApplicationId } from "selectors/editorSelectors"; -import { integrationEditorURL } from "ee/RouteBuilder"; -import { getCurrentAppWorkspace } from "ee/selectors/selectedWorkspaceSelectors"; - -import { Tab, TabPanel, Tabs, TabsList } from "@appsmith/ads"; -import Debugger, { - ResizerContentContainer, - ResizerMainContainer, -} from "../DataSourceEditor/Debugger"; -import { showDebuggerFlag } from "selectors/debuggerSelectors"; -import AnalyticsUtil from "ee/utils/AnalyticsUtil"; -import { DatasourceCreateEntryPoints } from "constants/Datasource"; -import { selectFeatureFlags } from "ee/selectors/featureFlagsSelectors"; -import { isGACEnabled } from "ee/utils/planHelpers"; -import { getHasCreateDatasourcePermission } from "ee/utils/BusinessFeatures/permissionPageHelpers"; -import CreateNewDatasourceTab from "./CreateNewDatasourceTab"; - -const HeaderFlex = styled.div` - font-size: 20px; - display: flex; - align-items: center; - color: var(--ads-v2-color-fg-emphasis-plus); - padding: 0 var(--ads-v2-spaces-7); -`; - -const ApiHomePage = styled.div` - display: flex; - flex-direction: column; - - padding-top: 20px; - /* margin-left: 10px; */ - flex: 1; - overflow: hidden !important; - .closeBtn { - position: absolute; - left: 70%; - } - .fontSize16 { - font-size: 16px; - } - .integrations-content-container { - padding: 0 var(--ads-v2-spaces-7); - } - .t--vertical-menu { - overflow: auto; - } -`; - -const MainTabsContainer = styled.div` - width: 100%; - height: 100%; - padding: 0 var(--ads-v2-spaces-7); - /* .react-tabs__tab-list { - margin: 2px; - } */ -`; - -const SectionGrid = styled.div<{ isActiveTab?: boolean }>` - margin-top: 16px; - display: grid; - grid-template-columns: 1fr; - grid-template-rows: auto minmax(0, 1fr); - gap: 10px 16px; - flex: 1; - min-height: 100%; -`; - -interface IntegrationsHomeScreenProps { - basePageId: string; - selectedTab: string; - location: { - search: string; - pathname: string; - }; - history: { - replace: (data: string) => void; - push: (data: string) => void; - }; - isCreating: boolean; - dataSources: Datasource[]; - mockDatasources: MockDatasource[]; - applicationId: string; - canCreateDatasource?: boolean; - showDebugger: boolean; -} - -interface IntegrationsHomeScreenState { - page: number; - activePrimaryMenuId: string; - activeSecondaryMenuId: number; - unsupportedPluginDialogVisible: boolean; -} - -type Props = IntegrationsHomeScreenProps & - InjectedFormProps<{ category: string }, IntegrationsHomeScreenProps>; - -const PRIMARY_MENU_IDS = { - ACTIVE: "ACTIVE", - CREATE_NEW: "CREATE_NEW", -}; - -const getSecondaryMenuIds = (hasActiveSources = false) => { - return { - API: 0 + (hasActiveSources ? 0 : 1), - DATABASE: 1 + (hasActiveSources ? 0 : 1), - MOCK_DATABASE: 2 - (hasActiveSources ? 0 : 2), - }; -}; - -const TERTIARY_MENU_IDS = { - ACTIVE_CONNECTIONS: 0, - MOCK_DATABASE: 1, -}; - -class IntegrationsHomeScreen extends React.Component< - Props, - IntegrationsHomeScreenState -> { - unsupportedPluginContinueAction: () => void; - - constructor(props: Props) { - super(props); - this.unsupportedPluginContinueAction = () => null; - this.state = { - page: 1, - activePrimaryMenuId: PRIMARY_MENU_IDS.CREATE_NEW, - activeSecondaryMenuId: getSecondaryMenuIds( - props.mockDatasources.length > 0, - ).API, - unsupportedPluginDialogVisible: false, - }; - } - - syncActivePrimaryMenu = () => { - // on mount/update if syncing the primary active menu. - const { selectedTab } = this.props; - if ( - (selectedTab === INTEGRATION_TABS.NEW && - this.state.activePrimaryMenuId !== PRIMARY_MENU_IDS.CREATE_NEW) || - (selectedTab === INTEGRATION_TABS.ACTIVE && - this.state.activePrimaryMenuId !== PRIMARY_MENU_IDS.ACTIVE) - ) { - this.setState({ - activePrimaryMenuId: - selectedTab === INTEGRATION_TABS.NEW - ? PRIMARY_MENU_IDS.CREATE_NEW - : PRIMARY_MENU_IDS.ACTIVE, - }); - } - }; - - componentDidMount() { - const { basePageId, dataSources, history } = this.props; - - const queryParams = getQueryParams(); - const redirectMode = queryParams.mode; - const isGeneratePageInitiator = getIsGeneratePageInitiator(); - if (isGeneratePageInitiator) { - if (redirectMode === INTEGRATION_EDITOR_MODES.AUTO) { - delete queryParams.mode; - delete queryParams.from; - history.replace( - integrationEditorURL({ - basePageId, - selectedTab: INTEGRATION_TABS.NEW, - params: queryParams, - }), - ); - } - } else if ( - dataSources.length > 0 && - redirectMode === INTEGRATION_EDITOR_MODES.AUTO - ) { - // User will be taken to active tab if there are datasources - history.replace( - integrationEditorURL({ - basePageId, - selectedTab: INTEGRATION_TABS.ACTIVE, - }), - ); - } else if (redirectMode === INTEGRATION_EDITOR_MODES.MOCK) { - // If there are no datasources -> new user - history.replace( - integrationEditorURL({ - basePageId, - selectedTab: INTEGRATION_TABS.NEW, - }), - ); - this.onSelectSecondaryMenu( - getSecondaryMenuIds(dataSources.length > 0).MOCK_DATABASE, - ); - } else { - this.syncActivePrimaryMenu(); - } - } - - componentDidUpdate(prevProps: Props) { - this.syncActivePrimaryMenu(); - const { basePageId, dataSources, history } = this.props; - if (dataSources.length === 0 && prevProps.dataSources.length > 0) { - history.replace( - integrationEditorURL({ - basePageId, - selectedTab: INTEGRATION_TABS.NEW, - }), - ); - this.onSelectSecondaryMenu( - getSecondaryMenuIds(dataSources.length > 0).MOCK_DATABASE, - ); - } - } - - onSelectPrimaryMenu = (activePrimaryMenuId: string) => { - const { basePageId, dataSources, history } = this.props; - if (activePrimaryMenuId === this.state.activePrimaryMenuId) { - return; - } - history.push( - integrationEditorURL({ - basePageId, - selectedTab: - activePrimaryMenuId === PRIMARY_MENU_IDS.ACTIVE - ? INTEGRATION_TABS.ACTIVE - : INTEGRATION_TABS.NEW, - }), - ); - this.setState({ - activeSecondaryMenuId: - activePrimaryMenuId === PRIMARY_MENU_IDS.ACTIVE - ? TERTIARY_MENU_IDS.ACTIVE_CONNECTIONS - : getSecondaryMenuIds(dataSources.length > 0).API, - }); - }; - - onSelectSecondaryMenu = (activeSecondaryMenuId: number) => { - this.setState({ activeSecondaryMenuId }); - }; - - render() { - const { - basePageId, - canCreateDatasource = false, - dataSources, - location, - showDebugger, - } = this.props; - const { unsupportedPluginDialogVisible } = this.state; - let currentScreen; - const { activePrimaryMenuId } = this.state; - - const PRIMARY_MENU: TabProp[] = [ - { - key: "ACTIVE", - title: "Active", - panelComponent:
    , - }, - ...(canCreateDatasource - ? [ - { - key: "CREATE_NEW", - title: "Create new", - panelComponent:
    , - icon: "plus", - iconSize: IconSize.XS, - }, - ] - : []), - ].filter(Boolean); - - const isGeneratePageInitiator = getIsGeneratePageInitiator(); - // Avoid user to switch tabs when in generate page flow by hiding the tabs itself. - const showTabs = !isGeneratePageInitiator; - - if (activePrimaryMenuId === PRIMARY_MENU_IDS.CREATE_NEW) { - currentScreen = ; - } else { - currentScreen = ( - { - this.onSelectPrimaryMenu(PRIMARY_MENU_IDS.CREATE_NEW); - // Event for datasource creation click - const entryPoint = DatasourceCreateEntryPoints.ACTIVE_DATASOURCE; - AnalyticsUtil.logEvent("NAVIGATE_TO_CREATE_NEW_DATASOURCE_PAGE", { - entryPoint, - }); - }} - /> - ); - } - return ( - <> - - - this.setState({ unsupportedPluginDialogVisible: false }) - } - onContinue={this.unsupportedPluginContinueAction} - /> - - -

    Datasources in your workspace

    -     - - - {showTabs && ( - - - {PRIMARY_MENU.map((tab: TabProp) => ( - - {tab.title} - - ))} - - {PRIMARY_MENU.map((tab: TabProp) => ( - - {tab.panelComponent} - - ))} - - )} - - - - {currentScreen} - - {showDebugger && } - - -     - - ); - } -} - -const mapStateToProps = (state: AppState) => { - // Debugger render flag - const showDebugger = showDebuggerFlag(state); - - const userWorkspacePermissions = - getCurrentAppWorkspace(state).userPermissions ?? []; - - const featureFlags = selectFeatureFlags(state); - const isFeatureEnabled = isGACEnabled(featureFlags); - - const canCreateDatasource = getHasCreateDatasourcePermission( - isFeatureEnabled, - userWorkspacePermissions, - ); - return { - dataSources: getDatasources(state), - mockDatasources: getMockDatasources(state), - isCreating: state.ui.apiPane.isCreating, - applicationId: getCurrentApplicationId(state), - canCreateDatasource, - showDebugger, - }; -}; - -export default connect(mapStateToProps)( - reduxForm<{ category: string }, IntegrationsHomeScreenProps>({ - form: API_HOME_SCREEN_FORM, - })(IntegrationsHomeScreen), -); diff --git a/app/client/src/pages/Editor/IntegrationEditor/index.tsx b/app/client/src/pages/Editor/IntegrationEditor/index.tsx deleted file mode 100644 index 346fa0e361..0000000000 --- a/app/client/src/pages/Editor/IntegrationEditor/index.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from "react"; -import IntegrationsHomeScreen from "./IntegrationsHomeScreen"; -import type { RouteComponentProps } from "react-router"; -import * as Sentry from "@sentry/react"; - -type Props = RouteComponentProps<{ - basePageId: string; - selectedTab: string; -}>; - -const integrationsEditor = (props: Props) => { - const { history, location, match } = props; - - return ( -
    - -
    - ); -}; - -export default Sentry.withProfiler(integrationsEditor); diff --git a/app/client/src/pages/Editor/gitSync/components/DangerMenuItem.tsx b/app/client/src/pages/Editor/gitSync/components/DangerMenuItem.tsx deleted file mode 100644 index 6f0b24d3a5..0000000000 --- a/app/client/src/pages/Editor/gitSync/components/DangerMenuItem.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import styled from "styled-components"; -import { MenuItem } from "@appsmith/ads-old"; -import { Colors } from "constants/Colors"; - -const DangerMenuItem = styled(MenuItem)` - &&, - && .cs-text { - color: ${Colors.DANGER_SOLID}; - } - - &&, - &&:hover { - svg, - svg path { - fill: ${Colors.DANGER_SOLID}; - } - } -`; - -export default DangerMenuItem; diff --git a/app/client/src/pages/Editor/gitSync/components/DatasourceListItem.tsx b/app/client/src/pages/Editor/gitSync/components/DatasourceListItem.tsx index 6971596687..bc13a8f43d 100644 --- a/app/client/src/pages/Editor/gitSync/components/DatasourceListItem.tsx +++ b/app/client/src/pages/Editor/gitSync/components/DatasourceListItem.tsx @@ -50,7 +50,7 @@ const DsTitle = styled.div` text-overflow: ellipsis; padding-right: 4px; } - .cs-icon { + .ads-v2-icon { margin-left: ${(props) => props.theme.spaces[2]}px; } `; diff --git a/app/client/src/pages/Editor/gitSync/components/OptionSelector.tsx b/app/client/src/pages/Editor/gitSync/components/OptionSelector.tsx deleted file mode 100644 index c4e7262467..0000000000 --- a/app/client/src/pages/Editor/gitSync/components/OptionSelector.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from "react"; -import type { - DefaultDropDownValueNodeProps, - DropdownOption, -} from "@appsmith/ads-old"; -import { - Dropdown, - DropdownWrapper, - DropdownContainer as DropdownComponentContainer, -} from "@appsmith/ads-old"; -import { Colors } from "constants/Colors"; -import styled from "styled-components"; -import { Classes as GitSyncClasses } from "pages/Editor/gitSync/constants"; -import { importSvg } from "@appsmith/ads-old"; - -const ChevronDown = importSvg( - async () => import("assets/icons/ads/chevron-down.svg"), -); - -const SelectedValueNodeContainer = styled.div` - color: ${Colors.CRUSTA}; - display: flex; - align-items: center; - & .label { - margin-right: ${(props) => props.theme.spaces[2]}px; - } -`; - -function SelectedValueNode(props: DefaultDropDownValueNodeProps) { - const { selected } = props; - return ( - - {(selected as DropdownOption).label} - - - ); -} - -const DropdownContainer = styled.div` - & ${DropdownComponentContainer} { - width: max-content; - } - &&&& ${DropdownWrapper} { - padding: 0; - } -`; - -interface OptionSelectorProps { - options: DropdownOption[]; - selected: DropdownOption; - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - onSelect?: (value?: string, dropdownOption?: any) => void; -} - -function OptionSelector({ onSelect, options, selected }: OptionSelectorProps) { - return ( - - - - ); -} - -export default OptionSelector; diff --git a/app/client/src/pages/Editor/gitSync/components/TabItem.tsx b/app/client/src/pages/Editor/gitSync/components/TabItem.tsx index 598e7d1fa5..e4416e358d 100644 --- a/app/client/src/pages/Editor/gitSync/components/TabItem.tsx +++ b/app/client/src/pages/Editor/gitSync/components/TabItem.tsx @@ -1,7 +1,6 @@ import React from "react"; import styled from "styled-components"; import type { Theme } from "constants/DefaultTheme"; -import type { TabProp } from "@appsmith/ads-old"; import { getTypographyByKey } from "@appsmith/ads-old"; import { Colors } from "constants/Colors"; @@ -40,7 +39,10 @@ const Wrapper = styled.div` `; export default function TabItem(props: { - tab: TabProp; + tab: { + key: string; + title: string; + }; selected: boolean; vertical: boolean; }) { diff --git a/app/client/src/pages/common/ImportModal.tsx b/app/client/src/pages/common/ImportModal.tsx index e5381f98ac..2f6f9d43d8 100644 --- a/app/client/src/pages/common/ImportModal.tsx +++ b/app/client/src/pages/common/ImportModal.tsx @@ -75,7 +75,7 @@ const FileImportCard = styled.div<{ fillCardWidth: boolean }>` height: 100%; justify-content: flex-start; - .cs-icon { + .ads-v2-icon { border-radius: 50%; width: ${(props) => props.theme.spaces[12] + 2}px; height: ${(props) => props.theme.spaces[12] + 2}px; @@ -146,7 +146,7 @@ const StatusbarWrapper = styled.div` align-items: center; justify-content: center; - .cs-icon { + .ads-v2-icon { margin: auto; border-radius: var(--ads-v2-border-radius-circle); width: 32px; diff --git a/app/client/src/pages/common/MobileSidebar.tsx b/app/client/src/pages/common/MobileSidebar.tsx index 22bdb4c8ab..299d987172 100644 --- a/app/client/src/pages/common/MobileSidebar.tsx +++ b/app/client/src/pages/common/MobileSidebar.tsx @@ -62,7 +62,7 @@ const UserNameSection = styled.div` const StyledMenuItem = styled(MenuItem)` svg, - .cs-icon svg path { + .ads-v2-icon svg path { width: 18px; height: 18px; fill: var(--ads-v2-color-fg); diff --git a/app/client/src/pages/common/SearchBar/ApplicationSearchItem.tsx b/app/client/src/pages/common/SearchBar/ApplicationSearchItem.tsx index e5bc9a4ab3..791eebd9de 100644 --- a/app/client/src/pages/common/SearchBar/ApplicationSearchItem.tsx +++ b/app/client/src/pages/common/SearchBar/ApplicationSearchItem.tsx @@ -40,11 +40,9 @@ const ApplicationSearchItem = (props: Props) => { > diff --git a/app/client/src/pages/common/ThemeSwitcher.tsx b/app/client/src/pages/common/ThemeSwitcher.tsx deleted file mode 100644 index b069de8776..0000000000 --- a/app/client/src/pages/common/ThemeSwitcher.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, { useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import { setThemeMode } from "actions/themeActions"; -import { MenuItem, RectangularSwitcher } from "@appsmith/ads-old"; -import { getCurrentThemeMode, ThemeMode } from "selectors/themeSelectors"; - -export default function ThemeSwitcher(props: { className?: string }) { - const dispatch = useDispatch(); - const themeMode = useSelector(getCurrentThemeMode); - const [switchedOn, setSwitchOn] = useState(themeMode === ThemeMode.DARK); - - return ( - { - setSwitchOn(value); - dispatch(setThemeMode(value ? ThemeMode.DARK : ThemeMode.LIGHT)); - }} - value={switchedOn} - /> - } - text="Theme" - /> - ); -} diff --git a/app/client/src/widgets/WidgetUtils.ts b/app/client/src/widgets/WidgetUtils.ts index 77f02ab051..99b510f0c8 100644 --- a/app/client/src/widgets/WidgetUtils.ts +++ b/app/client/src/widgets/WidgetUtils.ts @@ -1,5 +1,3 @@ -// import React, { JSXElementConstructor } from "react"; -// import { IconProps, IconWrapper } from "constants/IconConstants"; import type React from "react"; import { Alignment, Classes } from "@blueprintjs/core"; import { Classes as DTClasses } from "@blueprintjs/datetime"; @@ -112,7 +110,6 @@ export const hexToRgba = (color: string, alpha: number) => { }; const ALPHANUMERIC = "1234567890abcdefghijklmnopqrstuvwxyz"; -// const ALPHABET = "abcdefghijklmnopqrstuvwxyz"; export const generateReactKey = ({ prefix = "",