History

Valera Melnikov 42debc6d11 chore: rename ADS package (#35583 ) ## Description Rename `design-system` package to `@appsmith/ads` ## Automation /ok-to-test tags="@tag.All" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/10319507327> > Commit: 65d9664dd75b750496458a6e1652e0da858e1fc6 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10319507327&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Fri, 09 Aug 2024 13:47:50 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No		2024-08-09 17:20:29 +03:00
..
src	chore: rename ADS package (#35583 )	2024-08-09 17:20:29 +03:00
.eslintrc.json	chore:ads package (#35193 )	2024-07-29 16:23:26 +03:00
.prettierignore	chore:ads package (#35193 )	2024-07-29 16:23:26 +03:00
CHANGELOG.md	chore:ads package (#35193 )	2024-07-29 16:23:26 +03:00
Component-Migration-Checklist.md	chore:ads package (#35193 )	2024-07-29 16:23:26 +03:00
CONTRIBUTING.md	chore:ads package (#35193 )	2024-07-29 16:23:26 +03:00
create_story.sh	chore:ads package (#35193 )	2024-07-29 16:23:26 +03:00
jest.config.js	chore:ads package (#35193 )	2024-07-29 16:23:26 +03:00
jest.setup.ts	chore:ads package (#35193 )	2024-07-29 16:23:26 +03:00
package.json	chore: rename ADS package (#35583 )	2024-08-09 17:20:29 +03:00
README.md	chore:ads package (#35193 )	2024-07-29 16:23:26 +03:00
story_template.txt	chore:ads package (#35193 )	2024-07-29 16:23:26 +03:00
tsconfig.json	chore:ads package (#35193 )	2024-07-29 16:23:26 +03:00

README.md

Appsmith Design System - old (deprecated)

UI Design system of Appsmith

Install

npm install @appsmith/design-system-old

yarn add @appsmithorg/design-system-old

Including CSS

Add css import in the root index css file

@import "~@appsmithorg/design-system-old/build/css/design-system-old.css";

Usage

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.

git clone https://github.com/appsmithorg/design-system.git

Get all dependencies with

cd design-system/packages/design-system-old
yarn install

Then run storybook in development and watch mode with

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

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

yarn install

again to be able to import the components using

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!