[pull] release from appsmithorg:release

.github/workflows/test-storybook.yml

@@ -0,0 +1,55 @@
+name: "Storybook Tests"
+
+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/**"
+
+jobs:
+  storybook-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout PR if pull_request event
+        if: github.event_name == 'pull_request'
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: refs/pull/${{ github.event.pull_request.number }}/merge
+
+      - name: Checkout PR if push event
+        if: github.event_name == 'push'
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: release
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: app/client/package.json
+
+      - name: Install Dependencies
+        working-directory: ./app/client/packages/storybook
+        run: yarn install --immutable
+
+      - name: Storybook Tests
+        id: Test Storybook
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: app/client/package.json
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
+      - name: Serve Storybook and run tests
+        with:
+          workingDir: ./app/client/packages/storybook
+          buildScriptName: "test-storybook:ci"

app/client/jest.config.js

@@ -28,13 +28,13 @@ module.exports = {
     "^!!raw-loader!": "<rootDir>/test/__mocks__/derivedMock.js",
     "test/(.*)": "<rootDir>/test/$1",
     "@appsmith/(.*)": "<rootDir>/src/ee/$1",
-    "design-system-old": "<rootDir>/node_modules/design-system-old/build",
+    "design-system-old": "<rootDir>/node_modules/design-system-old",
     "@design-system/widgets-old":
       "<rootDir>/node_modules/@design-system/widgets-old",
     "@design-system/widgets": "<rootDir>/node_modules/@design-system/widgets",
     "@design-system/headless": "<rootDir>/node_modules/@design-system/headless",
     "@design-system/theming": "<rootDir>/node_modules/@design-system/theming",
-    "design-system": "<rootDir>/node_modules/design-system/build",
+    "design-system": "<rootDir>/node_modules/design-system",
     "^proxy-memoize$": "<rootDir>/node_modules/proxy-memoize/dist/wrapper.cjs",
     // @blueprintjs packages need to be resolved to the `esnext` directory. The default `esm` directory
     // contains sources that are transpiled to ES5. As Jest does not transpile our sources to ES5,
@@ -51,7 +51,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/build",
+    "design-system": "<rootDir>/node_modules/design-system",
     "^canvas$": "jest-canvas-mock",
   },
   globals: {
@@ -89,7 +89,7 @@ module.exports = {
         browserAgentlicenseKey: parseConfig(
           "__APPSMITH_NEW_RELIC_BROWSER_AGENT_LICENSE_KEY__",
         ),
-        browserAgentEndpoint:  parseConfig(
+        browserAgentEndpoint: parseConfig(
           "__APPSMITH_NEW_RELIC_BROWSER_AGENT_ENDPOINT__",
         ),
         otlpLicenseKey: parseConfig("__APPSMITH_NEW_RELIC_OTLP_LICENSE_KEY__"),

app/client/package.json

@@ -121,8 +121,8 @@
     "d3-geo": "^3.1.0",
     "dayjs": "^1.10.6",
     "deep-diff": "^1.0.2",
-    "design-system": "npm:@appsmithorg/[email protected]",
-    "design-system-old": "npm:@appsmithorg/[email protected]",
+    "design-system": "workspace:^",
+    "design-system-old": "workspace:^",
     "downloadjs": "^1.4.7",
     "echarts": "^5.4.2",
     "fast-deep-equal": "^3.1.3",

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

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../../.eslintrc.base.json", "plugin:storybook/recommended"],
+  "rules": {
+    "@typescript-eslint/strict-boolean-expressions": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/prefer-nullish-coalescing": "off",
+    "testing-library/no-node-access": "off",
+    "testing-library/await-async-queries": "off"
+  },
+  "overrides": [
+    {
+      "files": ["**/*.stories.*"],
+      "rules": {
+        "import/no-anonymous-default-export": "off"
+      }
+    }
+  ]
+}

app/client/packages/design-system/ads-old/.prettierignore

@@ -0,0 +1,3 @@
+Component-Migration-Checklist.md
+CONTRIBUTING.md
+README.md

app/client/packages/design-system/ads-old/CONTRIBUTING.md

@@ -0,0 +1,67 @@
+
+Refer to [the README](https://github.com/appsmithorg/design-system/blob/main/packages/design-system/README.md#contribute) for a guide on how to get started with contributing.
+
+## Using yalc
+
+When you make a change in the design system, you will want to ensure that the component works as expected in the app you are using it for. To emulate working with published packages locally, we use [yalc](https://www.npmjs.com/package/yalc).
+
+### Installation
+
+Run 
+```shell
+yarn global add yalc
+```
+
+### Setting up for appsmith usage
+
+If we're going to use this package in the `appsmith` repository, we need to make some additional changes to this repository.
+
+1. navigate to the `package/design-system/package.json` file
+2. Make sure you change the field `"name": "@appsmithorg/design-system"` to `"name": "design-system"`. We do this so that we don't run into alias conflicts later.
+3. Make sure you do not commit this file
+
+### In this repository 
+
+We need to "publish" our package.
+
+1. Make sure the package builds by running `yarn build`
+2. Make sure the functionality works as expected in the playground by running `yarn storybook` and then testing your component out in the relevant story
+3. If you are writing a new component, write a story for it taking another story from this repository as reference. You could also refer to [the official docs](https://storybook.js.org/docs/react/writing-stories/introduction#how-to-write-stories).
+4. When you've done all of this, run `yalc publish`. It will output the package name and number.
+
+### In the other repository
+
+1. Run `yalc add design-system` in the appsmith repository.
+2. This will create changes in your `package.lock` file. Run `yarn` to get the new package version from `yalc`.
+3. This will create changes in your `yarn.lock` file, which is what we want. Make sure you do not commit these changes.
+
+Now you can test your app while including the changes made in this package. Go ahead and run your local development environment, or some cypress tests.
+
+Please note that yalc will not test any uncommitted changes you make in your file system. Make sure you have everything you need in the commits (you can always revert bad ones!) 
+
+
+## Non-local testing 
+
+You can create an alpha release of your branch so that other people can see and test your changes in a different repository (on a CI, for example). To do this, 
+
+1. In your `package.json`, make sure the `version` key is set to be the latest alpha version listed on the `versions` tab on [our npm package listing](https://www.npmjs.com/package/@appsmithorg/design-system). If you don't do this, the alpha version you create will overwrite an existing version and bad things might happen. 
+2. Run `./alpha-release.sh` in your shell. In order to complete this script, you will need an OTP which only members of the [@appsmithorg](https://www.npmjs.com/package/@appsmithorg/design-system) organisation on npm have access to. Please contact someone from the design system pod before you start this action.  
+
+## Creating stories 
+
+When you create a component, make sure you write a well-defined story for it. A well defined story is one that 
+1. Denotes the default state of the component 
+2. Denotes all the variants of the component 
+3. Has a list of all the things the component can be
+
+You can create a template for your stories by running 
+```shell
+yarn create-story -f <DIRECTORY_NAME>
+```
+where ideally your directory name matches your component name exactly. 
+
+## Contribution Guidelines: Code Style
+
+1. Destructure function props where possible: https://github.com/appsmithorg/design-system/pull/109
+2. 
+

app/client/packages/design-system/ads-old/Component-Migration-Checklist.md

@@ -0,0 +1,39 @@
+# Steps to migrate components
+
+- [ ]  Pick the component to be migrated. Mark it as in progress (highlight in yellow) on the migration sheet [Component Migration planning](https://docs.google.com/spreadsheets/d/1pcIMvGwknhbjnG1yxKH2UnRIOPwW5lw_xiFxrJdb1E8/edit?usp=drivesdk)
+- [ ]  Create an issue for it on [appsmith/ce](http://github.com/appsmithorg/appsmith). Announce that you’re doing this on #design-system and #team-tech channel.
+    - [ ] All PRs should have an issue.
+    - [ ] All issues should have estimates.
+    - [ ] All issues should be assigned to sprint(s).
+    - [ ] All migration-related issue goes inside the migration epic
+    - [ ] All migration issues should have labels ads migration
+    - [ ] All design system issues should have a design system pod label. Then, zenhub can track the issues.
+    - [ ] All issues should have sprint added to it.
+- [ ]  Copy the files over to the [appsmith/design-system](http://github.com/appsmithorg/design-system/) repository.
+    - [ ]  Copy any unit test files over as well if they exist.
+    - [ ]  In the files, props.theme variables become variables used from variables.css
+    - [ ]  component-specific variables and tokens go in index.css (make sure you order this alphabetically)
+    - [ ]  Add stories for every state and variation of the component
+    - [ ]  Make sure to add the exports of the components you’ve added in the src/index.ts file
+- [ ]  Create a branch to change the imports on appsmith/ce.
+    - [ ]  First, check that there has been no deviation from the migrated file in the design-system repo with the current file in the appsmith repo. You can run the command `git log -1 --pretty="format:%ci" ./src/components/ads/[YOUR_COMPONENT_FILE]` and if the date returned is after the beginning of July, it was probably modified. You can paste both files in a diff checker like [diffchecker.com](diffchecker.com) to compare and update the files in the design-system repo.
+    - [ ]  On this branch, delete the files for the component you’ve just migrated.
+    - [ ]  Everywhere the component was used, change the import to point to the design-system package instead.
+    - [ ] If you've migrated a component that is used a specific new places in the ee-repo, make updates there as well.
+- [ ]  Test the changes you’ve made and if the imports you’ve generated work as expected in your local developer environment of appsmith
+    - [ ]  install yalc on your system
+    - [ ]  run `yarn build` to build the package, then `yalc publish` to imitate the package being published
+    - [ ]  run `yalc add '@appsmithorg/design-system'` in the appsmith/ce repository
+    - [ ]  All the imports will now be named imports. for local testing purposes, they will come from `@appsmithorg/design-system` . Make sure to change these imports to just `design-system` when committing them.
+    - [ ]  Make sure you also test on ee, because ee is a superset of ce. If things break on ee, you will have to fix the specific import changes there as well.
+        - [ ]  You can test on ee by pulling your changes from your ce branch into your ee branch following the steps in the 'set up upstream repo' part of this document: https://www.notion.so/appsmith/How-to-resolve-merge-conflicts-when-Sync-Community-Workflow-fails-66f1eb73ce4b45f48f8e6f6f4f5ebfd8#e5e755eab837428581a4f81847b4e39c
+        - [ ]  You will have to run ee locally following this document: https://www.notion.so/appsmith/Steps-to-run-EE-code-locally-d01e0bc343d94a209c8a90d3dba33e17
+- [ ]  Raise a PR for the changes you’ve made in the design-system repository. Make sure you have added a changeset for the PR detailing what the PR will do.
+- [ ]  Once your changes on the design-system repository has been approved and merged to release, take the beta version number of our package under ‘current tags’ from the published npm page, and replace the version number of [this line](https://github.com/appsmithorg/appsmith/blob/8428ae506a02ec477027b82936ff003c0c53cafb/app/client/package.json#L48) with it on your branch. Test once again if the imports work as expected, then raise a PR for the changed imports in the appsmith/ce repository. [@appsmithorg/design-system](https://www.npmjs.com/package/@appsmithorg/design-system)
+- [ ]  Once the PR is raised, the deploy preview created will be given to QA for testing. To help them with that process, we will have to prepare a document of where the component is being used. Take a screenshot of the pages where the changes have happened, and then add them to the component usage spreadsheet: [Components usage](https://docs.google.com/spreadsheets/d/1np7jQdiQa0nyryOBnNa927NkGDplG9M2gb7qnoZIIyM/edit?usp=drivesdk)
+- [ ]  Ensure that QA signs off on both ce and ee repositories
+- [ ]  Minor versions are incremented every time release is merged into main. This is currently a manual process. Make sure that when you make this change, the package.json in appsmith/ce is updated accordingly.
+
+## **Versioning ([NPM semantic versioning](https://docs.npmjs.com/about-semantic-versioning))**
+
+![Screenshot 2022-05-10 at 4.20.48 PM.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ba1bcd19-e767-4f2b-bc37-1037451f0cc6/Screenshot_2022-05-10_at_4.20.48_PM.png)

app/client/packages/design-system/ads-old/README.md

@@ -0,0 +1,94 @@
+<p align="center">
+  <a href="http://appsmith.com">
+    <img width="110px" style="margin-right: 20px" src="https://global-uploads.webflow.com/61531b23c347e4fbd4a84209/61531b23c347e41e24a8423e_Logo.svg">
+  </a>
+</p>
+
+<h1 align="center">Appsmith Design System - old (deprecated)</h1>
+
+<div align="center">
+
+UI Design system of Appsmith
+
+[![npm package](https://img.shields.io/npm/v/@appsmithorg/design-system.svg?style=flat-square)](https://www.npmjs.org/package/@appsmithorg/design-system)
+
+</div>
+
+[![](https://github.com/appsmithorg/appsmith/raw/release/static/git-banner-new.png)](https://appsmith.com)
+
+
+
+
+## Install
+
+```bash
+npm install @appsmith/design-system-old
+```
+or
+```bash
+yarn add @appsmithorg/design-system-old
+```
+
+## Including CSS
+
+Add css import in the root index css file
+```bash
+@import "~@appsmithorg/design-system-old/build/css/design-system-old.css";
+```
+
+## Usage
+
+```jsx
+import { TooltipComponent } from "@appsmithorg/design-system-old";
+
+<TooltipComponent content="Some useful content 🤷🏽‍♂️">
+  Hover here 😁
+</TooltipComponent>
+```
+
+## Contribute
+> 🚫 This package is closed for contributions. We welcome contributions to the `design-system` package.
+
+```bash
+git clone https://github.com/appsmithorg/design-system.git
+```
+
+Get all dependencies with
+```bash 
+cd design-system/packages/design-system-old
+yarn install
+```
+
+Then run storybook in development and watch mode with
+```bash
+yarn run design-system:storybook
+```
+
+Any stories you write within `design-system/packages/design-system-old/src/**` will show up here. 
+
+To use your local version of the package, run 
+```bash
+yarn link
+```
+in this repository, then copy instruction it outputs into the root directory of the repository you want to use this package in. 
+Run
+```bash
+yarn install 
+```
+again to be able to import the components using 
+
+```jsx
+import { TooltipComponent } from "@appsmithorg/design-system-old";
+```
+
+### Create story template
+```
+yarn create-story -f <folder-name>
+```
+'folder-name' is the folder which holds the component which the story template is being created. This should be under 'src' folder.
+
+Happy playground testing!
+
+## Links
+
+- [Home page](https://www.appsmith.com)

app/client/packages/design-system/ads-old/create_story.sh

@@ -0,0 +1,10 @@
+# usage ./create_story.sh -f <Folder name under src fodler>
+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

app/client/packages/design-system/ads-old/jest.config.js

@@ -0,0 +1,28 @@
+module.exports = {
+  setupFiles: ["jest-canvas-mock"],
+  roots: ["./src"],
+  setupFilesAfterEnv: ["./jest.setup.ts"],
+  testPathIgnorePatterns: ["node_modules/"],
+  testEnvironment: "jsdom",
+  testTimeout: 9000,
+  transform: {
+    "^.+\\.(png|js|ts|tsx)$": "ts-jest",
+  },
+  testMatch: ["**/*.test.(ts|tsx)"],
+  moduleNameMapper: {
+    // Mocks out all these file formats when tests are run
+    "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "identity-obj-proxy",
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
+  },
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node", "css"],
+  moduleDirectories: ["node_modules", "src"],
+  transformIgnorePatterns: [
+    "<rootDir>/node_modules/(?!codemirror|react-dnd|dnd-core|@babel|(@blueprintjs/core/lib/esnext)|(@blueprintjs/core/lib/esm)|@github|lodash-es|@draft-js-plugins|react-documents)",
+  ],
+  globals: {
+    "ts-jest": {
+      isolatedModules: true,
+    },
+  },
+};

app/client/packages/design-system/ads-old/jest.setup.ts

@@ -0,0 +1,17 @@
+import "@testing-library/jest-dom";
+
+window.scrollTo = jest.fn();
+Element.prototype.scrollIntoView = jest.fn();
+Element.prototype.scrollBy = jest.fn();
+const mockObserveFn = () => {
+  return {
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+  };
+};
+
+window.IntersectionObserver = jest.fn().mockImplementation(mockObserveFn);
+window.ResizeObserver = jest.fn().mockImplementation(mockObserveFn);
+
+Element.prototype.scrollTo = () => {};