PromucFlow_constructor/app/client/packages/design-system/ads-old/README.md
Valera Melnikov 320f9e3c02
chore:ads package (#35193)
## Description
- Move [ADS](https://github.com/appsmithorg/design-system) to local
packages
- Fix ADS stories according of Storybook 8
- Fix type errors
- Update Storybook to latest version to be able to run `test-storybook`
- Remove unused files(components, tests, stories) from
ADS-old(design-system-old)

Following steps:
- Merge `ads-old` and `widgets-old`, only 1 package should remain
- Rename packages https://github.com/appsmithorg/appsmith/issues/27658
- Use `importSvg` `importRemixIcon` from ADS remove this functionality
from `ads-old`


Fixes #34252  

## 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/10114839347>
> Commit: 64cdfec4d2acd45ca955cc0d19c3cb582e1ac0ad
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10114839347&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Fri, 26 Jul 2024 17:49:25 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->



<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-07-29 16:23:26 +03:00

2.1 KiB

Appsmith Design System - old (deprecated)

UI Design system of Appsmith

npm package

Install

npm install @appsmith/design-system-old

or

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!