## 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 -->
2.1 KiB
2.1 KiB
Appsmith Design System - old (deprecated)
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-systempackage.
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!
