chore: rename ADS package

.github/workflows/test-storybook.yml

@@ -1,16 +1,7 @@
-name: "Storybook Tests"
+name: "Tests Storybook stories"
 
 on:
-  push:
-    branches:
-      - release
-    paths:
-      - "app/client/packages/design-system/**"
-      - "app/client/packages/storybook/**"
-  pull_request:
-    paths:
-      - "app/client/packages/design-system/**"
-      - "app/client/packages/storybook/**"
+  workflow_dispatch:
 
 jobs:
   storybook-tests:

app/client/jest.config.js

@@ -17,7 +17,7 @@ module.exports = {
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node", "css"],
   moduleDirectories: ["node_modules", "src", "test"],
   transformIgnorePatterns: [
-    "<rootDir>/node_modules/(?!codemirror|konva|design-system|react-dnd|dnd-core|@babel|(@blueprintjs)|@github|lodash-es|@draft-js-plugins|react-documents|linkedom|assert-never|axios)",
+    "<rootDir>/node_modules/(?!codemirror|konva|react-dnd|dnd-core|@babel|(@blueprintjs)|@github|lodash-es|@draft-js-plugins|react-documents|linkedom|assert-never|axios)",
   ],
   moduleNameMapper: {
     "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
@@ -49,7 +49,7 @@ module.exports = {
       "<rootDir>/node_modules/@blueprintjs/popover2/lib/esnext",
     "^@blueprintjs/select$":
       "<rootDir>/node_modules/@blueprintjs/select/lib/esnext",
-    "design-system": "<rootDir>/node_modules/design-system",
+    "@appsmith/ads": "<rootDir>/node_modules/@appsmith/ads",
     "^canvas$": "jest-canvas-mock",
   },
   globals: {

app/client/package.json

@@ -48,6 +48,7 @@
     "cypress:snapshot:docker:build": "docker build . -f cypress/Dockerfile -t cypress-snapshot"
   },
   "dependencies": {
+    "@appsmith/ads": "workspace:^",
     "@appsmith/ads-old": "workspace:^",
     "@aws-sdk/client-s3": "^3.622.0",
     "@aws-sdk/lib-storage": "^3.622.0",
@@ -123,7 +124,6 @@
     "d3-geo": "^3.1.0",
     "dayjs": "^1.10.6",
     "deep-diff": "^1.0.2",
-    "design-system": "workspace:^",
     "downloadjs": "^1.4.7",
     "echarts": "^5.4.2",
     "fast-deep-equal": "^3.1.3",

app/client/packages/design-system/ads-old/package.json

@@ -12,14 +12,8 @@
   },
   "contributors": [
     "Albin <albin@appsmith.com>",
-    "Rohit Agarwal <rohit.agarwal@appsmith.com>",
-    "Tanvi Bhakta <tanvi@appsmith.com>"
+    "Rohit Agarwal <rohit.agarwal@appsmith.com>"
   ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/appsmithorg/design-system.git",
-    "directory": "packages/design-system"
-  },
   "license": "Apache-2.0",
   "devDependencies": {
     "@types/loadable__component": "^5.13.4",

app/client/packages/design-system/ads-old/src/FilePickerV2/index.tsx

@@ -7,7 +7,7 @@ import Button, { Category, IconPositions, Size } from "../Button";
 import type { IconName } from "../Icon";
 import Icon, { IconSize } from "../Icon";
 import Text, { TextType } from "../Text";
-import { toast } from "design-system";
+import { toast } from "@appsmith/ads";
 import TooltipComponent from "../Tooltip";
 import {
   createMessage,

app/client/packages/design-system/ads/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "design-system",
+  "name": "@appsmith/ads",
   "version": "2.1.43",
   "description": "This is the package for the design system that powers the Appsmith platform",
   "main": "src/index.ts",

app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx

@@ -1468,7 +1468,7 @@ export function IconProvider(props: {
       iconName,
       " not found. If you haven't made a typo, the icon probably does not exit " +
         "in our database - check the lookup here: " +
-        "https://github.com/appsmithorg/design-system/blob/c6c2d821c45e459fcb0522fccb273fccbce41664/packages/design-system/src/Icon/Icon.provider.tsx#L292",
+        "https://github.com/appsmithorg/appsmith/blob/release/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx#L1078",
     );
   }
   return Icon && <Icon color={color} size={size} />;

app/client/packages/design-system/ads/src/List/List.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { List, ListItem, Icon } from "design-system";
+import { List, ListItem, Icon } from "@appsmith/ads";
 import type { StoryObj } from "@storybook/react";
-import type { ListItemProps, ListProps } from "design-system";
+import type { ListItemProps, ListProps } from "@appsmith/ads";
 
 export default {
   title: "ADS/Components/List",

app/client/packages/storybook/.storybook/styles.css

@@ -8,7 +8,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
 
-@import url("design-system/src/__theme__/default/index.css"); /* This is to make theme variable available for stories */
+@import url("@appsmith/ads/src/__theme__/default/index.css"); /* This is to make theme variable available for stories */
 
 html,
 body,

app/client/src/AppErrorBoundry.tsx

@@ -4,7 +4,7 @@ import AppCrashImage from "assets/images/404-image.png";
 import * as Sentry from "@sentry/react";
 import log from "loglevel";
 import AnalyticsUtil from "ee/utils/AnalyticsUtil";
-import { Button } from "design-system";
+import { Button } from "@appsmith/ads";
 
 const Wrapper = styled.div`
   display: flex;

app/client/src/IDE/Components/BottomView.tsx

@@ -5,7 +5,7 @@ import Resizer, {
 } from "components/editorComponents/Debugger/Resizer";
 import { CodeEditorWithGutterStyles } from "pages/Editor/JSEditor/styledComponents";
 import { ViewDisplayMode, ViewHideBehaviour } from "IDE/Interfaces/View";
-import { Button } from "design-system";
+import { Button } from "@appsmith/ads";
 
 const VIEW_MIN_HEIGHT = 38;
 

app/client/src/IDE/Components/FileTab.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import clsx from "classnames";
 
-import { Flex, Icon } from "design-system";
+import { Flex, Icon } from "@appsmith/ads";
 import { sanitizeString } from "utils/URLUtils";
 
 interface FileTabProps {

app/client/src/IDE/Components/HeaderDropdown.tsx

@@ -1,4 +1,4 @@
-import { Flex } from "design-system";
+import { Flex } from "@appsmith/ads";
 import React from "react";
 import styled from "styled-components";
 

app/client/src/IDE/Components/HeaderEditorSwitcher.tsx

@@ -1,4 +1,4 @@
-import { Flex, Icon, Text } from "design-system";
+import { Flex, Icon, Text } from "@appsmith/ads";
 import React from "react";
 import styled from "styled-components";
 

app/client/src/IDE/Components/HeaderTitle.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, Text } from "design-system";
+import { Flex, Text } from "@appsmith/ads";
 
 /**
  * Handy little styled component that can be used to render the title in the IDEHeader component

app/client/src/IDE/Components/Sidebar/Sidebar.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import SidebarButton from "./SidebarButton";
 import type { EditorState } from "ee/entities/IDE/constants";
 import type { SidebarButtonProps } from "./SidebarButton/SidebarButton";
-import { Flex } from "design-system";
+import { Flex } from "@appsmith/ads";
 
 const Container = styled(Flex)`
   width: 50px;

app/client/src/IDE/Components/Sidebar/SidebarButton/SidebarButton.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { Flex, Icon, Text, Tooltip } from "design-system";
+import { Flex, Icon, Text, Tooltip } from "@appsmith/ads";
 import styled from "styled-components";
 
 import { Condition } from "../../../enums";

app/client/src/IDE/Structure/Header.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Divider, Flex } from "design-system";
+import { Divider, Flex } from "@appsmith/ads";
 import { AppsmithLink } from "pages/Editor/AppsmithLink";
 
 interface ChildrenProps {

app/client/src/ce/actions/applicationActions.ts

@@ -7,7 +7,7 @@ import type {
 } from "ee/api/ApplicationApi";
 import { ReduxActionTypes } from "ee/constants/ReduxActionConstants";
 import type { NavigationSetting, ThemeSetting } from "constants/AppConstants";
-import type { IconNames } from "design-system";
+import type { IconNames } from "@appsmith/ads";
 import type { Datasource } from "entities/Datasource";
 
 export enum ApplicationVersion {

app/client/src/ce/api/ApplicationApi.tsx

@@ -6,7 +6,7 @@ import type { AxiosProgressEvent, AxiosPromise } from "axios";
 import type { NavigationSetting, ThemeSetting } from "constants/AppConstants";
 import type { AppColorCode } from "constants/DefaultTheme";
 import type { EvaluationVersion } from "constants/EvalConstants";
-import type { IconNames } from "design-system";
+import type { IconNames } from "@appsmith/ads";
 import type { Action, BaseAction } from "entities/Action";
 import type { APP_MODE } from "entities/App";
 import type { Datasource } from "entities/Datasource";

app/client/src/ce/components/DSDataFilter/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
-import { Link, Tag, Text, Tooltip } from "design-system";
+import { Link, Tag, Text, Tooltip } from "@appsmith/ads";
 import { BUSINESS_TAG, createMessage } from "ee/constants/messages";
 import { capitalizeFirstLetter } from "utils/helpers";
 import { getRampLink, showProductRamps } from "ee/selectors/rampSelectors";

app/client/src/ce/components/SwitchEnvironment/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import styled from "styled-components";
-import { Icon, Link, Option, Select, Text, Tooltip } from "design-system";
+import { Icon, Link, Option, Select, Text, Tooltip } from "@appsmith/ads";
 import { capitalizeFirstLetter } from "utils/helpers";
 import {
   BUSINESS_EDITION_TEXT,

app/client/src/ce/components/WorkspaceSettingsTabs/index.tsx

@@ -7,7 +7,7 @@ import {
 } from "react-router-dom";
 import MemberSettings from "ee/pages/workspace/Members";
 import { GeneralSettings } from "pages/workspace/General";
-import { Tabs, Tab, TabsList, TabPanel } from "design-system";
+import { Tabs, Tab, TabsList, TabPanel } from "@appsmith/ads";
 import { navigateToTab } from "ee/pages/workspace/helpers";
 import styled from "styled-components";
 

app/client/src/ce/components/gitComponents/GitSettingsCDTab/UnlicensedGitCD.tsx

@@ -4,7 +4,7 @@ import {
   TRY_APPSMITH_ENTERPRISE,
   createMessage,
 } from "ee/constants/messages";
-import { Button, Text } from "design-system";
+import { Button, Text } from "@appsmith/ads";
 import { useAppsmithEnterpriseLink } from "pages/Editor/gitSync/GitSettingsModal/TabBranch/hooks";
 import React from "react";
 import styled from "styled-components";

app/client/src/ce/hooks/datasourceEditorHooks.tsx

@@ -12,7 +12,7 @@ import {
   getHasCreatePagePermission,
   hasCreateDSActionPermissionInApp,
 } from "ee/utils/BusinessFeatures/permissionPageHelpers";
-import { Button } from "design-system";
+import { Button } from "@appsmith/ads";
 import type { Datasource } from "entities/Datasource";
 import type { ApiDatasourceForm } from "entities/Datasource/RestAPIForm";
 import NewActionButton from "pages/Editor/DataSourceEditor/NewActionButton";

app/client/src/ce/pages/AdminSettings/Branding/UpgradeBanner.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "design-system";
+import { Button } from "@appsmith/ads";
 import { ContentBox } from "pages/AdminSettings/components";
 import {
   ADMIN_BRANDING_SETTINGS_SUBTITLE_UPGRADE,

app/client/src/ce/pages/AdminSettings/config/types.ts

@@ -2,7 +2,7 @@ import type React from "react";
 import type { ReduxAction } from "ee/constants/ReduxActionConstants";
 import type { Dispatch } from "react";
 import type { RadioOptionProps } from "pages/AdminSettings/FormGroup/Radio";
-import type { CalloutKind, SelectOptionProps } from "design-system";
+import type { CalloutKind, SelectOptionProps } from "@appsmith/ads";
 
 type ControlType = {
   [K in keyof ControlPropsType]: {

app/client/src/ce/pages/Applications/ApplicationCardList.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import React from "react";
-import { Text } from "design-system";
+import { Text } from "@appsmith/ads";
 import { useSelector } from "react-redux";
 
 import CardList from "pages/Applications/CardList";

app/client/src/ce/pages/Applications/CreateNewAppFromTemplateModal/index.tsx

@@ -20,7 +20,7 @@ import {
   ModalBody,
   ModalContent,
   ModalHeader,
-} from "design-system";
+} from "@appsmith/ads";
 import { isEmpty } from "lodash";
 import { TemplateView } from "pages/Templates/TemplateView";
 import TemplatesListLayoutSwitcher from "pages/Templates/TemplatesModal/TemplatesListLayoutSwitcher";

app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx

@@ -12,7 +12,7 @@ import {
   resetCurrentPluginIdForCreateNewApp,
 } from "actions/onboardingActions";
 import { fetchPlugins } from "actions/pluginActions";
-import { Flex, Link, Text } from "design-system";
+import { Flex, Link, Text } from "@appsmith/ads";
 import CreateNewDatasourceTab from "pages/Editor/IntegrationEditor/CreateNewDatasourceTab";
 import { getApplicationsOfWorkspace } from "ee/selectors/selectedWorkspaceSelectors";
 import { default as React, useEffect } from "react";

app/client/src/ce/pages/Applications/EmbedSnippetTab.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useSelector } from "react-redux";
 import styled from "styled-components";
-import { Switch, Icon, Tooltip, Link, Text } from "design-system";
+import { Switch, Icon, Tooltip, Link, Text } from "@appsmith/ads";
 import useUpdateEmbedSnippet from "pages/Applications/EmbedSnippet/useUpdateEmbedSnippet";
 import EmbedCodeSnippet from "pages/Applications/EmbedSnippet/Snippet";
 import { createMessage, IN_APP_EMBED_SETTING } from "ee/constants/messages";

app/client/src/ce/pages/Applications/ResourceListLoader.tsx

@@ -3,7 +3,7 @@ import { noop } from "lodash";
 
 import Card from "components/common/Card";
 import CardList from "pages/Applications/CardList";
-import { Button } from "design-system";
+import { Button } from "@appsmith/ads";
 import { PaddingWrapper } from "pages/Applications/CommonElements";
 import type { ApplicationPayload } from "ee/constants/ReduxActionConstants";
 

app/client/src/ce/pages/Applications/StartWithTemplatesWrapper.tsx

@@ -4,7 +4,7 @@ import {
   createMessage,
 } from "ee/constants/messages";
 import type { Template } from "api/TemplatesApi";
-import { Flex, Text } from "design-system";
+import { Flex, Text } from "@appsmith/ads";
 import TemplatesLayoutWithFilters from "pages/Templates/TemplatesLayoutWithFilters";
 import React from "react";
 import { useSelector } from "react-redux";

app/client/src/ce/pages/Applications/WorkspaceAction.tsx

@@ -5,7 +5,7 @@ import {
   MenuContent,
   MenuItem,
   MenuTrigger,
-} from "design-system";
+} from "@appsmith/ads";
 import React, { useCallback, useState } from "react";
 import { useSelector } from "react-redux";
 

app/client/src/ce/pages/Applications/WorkspaceMenu.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { Button, Icon, Menu, MenuContent, MenuTrigger } from "design-system";
+import { Button, Icon, Menu, MenuContent, MenuTrigger } from "@appsmith/ads";
 import {
   EditInteractionKind,
   EditableText,

app/client/src/ce/pages/Applications/index.tsx

@@ -51,7 +51,7 @@ import {
   Select,
   Tooltip,
   Tag,
-} from "design-system";
+} from "@appsmith/ads";
 import {
   AppIconCollection,
   Classes,

app/client/src/ce/pages/Editor/IDE/EditorPane/JS/ListItem.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ExplorerJSCollectionEntity from "pages/Editor/Explorer/JSActions/JSActionEntity";
 import type { ActionParentEntityTypeInterface } from "ee/entities/Engine/actionHelpers";
-import { Flex } from "design-system";
+import { Flex } from "@appsmith/ads";
 import type { EntityItem } from "ee/entities/IDE/constants";
 
 export interface JSListItemProps {

app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx

@@ -30,7 +30,7 @@ import AddQuery from "pages/Editor/IDE/EditorPane/Query/Add";
 import type { AppState } from "ee/reducers";
 import keyBy from "lodash/keyBy";
 import { getPluginEntityIcon } from "pages/Editor/Explorer/ExplorerIcons";
-import type { ListItemProps } from "design-system";
+import type { ListItemProps } from "@appsmith/ads";
 import { createAddClassName } from "pages/Editor/IDE/EditorPane/utils";
 import { QueriesBlankState } from "pages/Editor/QueryEditor/QueriesBlankState";
 

app/client/src/ce/pages/Editor/NavigationSettings/DeleteLogoButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from "design-system";
+import { Button } from "@appsmith/ads";
 import React from "react";
 
 export const DeleteLogoButton = ({

app/client/src/ce/pages/Upgrade/Carousel.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import React, { useEffect, useState } from "react";
-import { Icon, Text } from "design-system";
+import { Icon, Text } from "@appsmith/ads";
 import type { CarouselProps } from "./types";
 
 const CarouselContainer = styled.div`

app/client/src/ce/pages/Upgrade/Footer.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import React from "react";
-import { Button, Text } from "design-system";
+import { Button, Text } from "@appsmith/ads";
 import type { FooterProps } from "./types";
 import {
   AVAILABLE_ON_BUSINESS,

app/client/src/ce/pages/Upgrade/Header.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import React from "react";
 import type { HeaderProps } from "./types";
-import { Text } from "design-system";
+import { Text } from "@appsmith/ads";
 
 export const HeaderContainer = styled.div`
   padding: 32px 32px 20px;