1dc6944504
## Description Fixes #35296 ## 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/10182307436> > Commit: 8b0aa1a644769cd28161b92a21f7426d0d94cf4f > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10182307436&attempt=2" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Wed, 31 Jul 2024 15:48:59 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 --> ## Summary by CodeRabbit ## Summary by CodeRabbit - **New Features** - Updated TypeScript dependency across multiple modules to support newer features and improvements. - Updated `colorjs.io` dependency in design system packages to enhance functionality. - **Bug Fixes** - Enhanced type-checking and overall code quality through dependency updates. - Refined color values in both `LightModeTheme` and `DarkModeTheme` to improve visual accuracy. - **Chores** - Improved flexibility in dependency management by allowing minor and patch updates for TypeScript and `colorjs.io`. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|---|---|---|
| .. | ||
| plop-templates | ||
| src | ||
| .eslintrc.json | ||
| .prettierignore | ||
| CHANGELOG.md | ||
| fileTransformer.js | ||
| jest.config.js | ||
| jest.setup.js | ||
| package.json | ||
| plopfile.mjs | ||
| README.md | ||
| tsconfig.json | ||
Appsmith Design System
Welcome to the Appsmith Design System repository! This repository contains the design system components, styles, and guidelines used across the Appsmith platform.
About Appsmith
Appsmith is an open-source, low-code application development platform that allows users to build business applications quickly and easily. The Appsmith Design System plays a crucial role in providing a consistent and visually appealing user interface across all Appsmith projects.
External Usage
To use the Appsmith Design System in your project, follow these steps:
Installation
npm install @appsmithorg/design-system
or
yarn add @appsmithorg/design-system
Including CSS
Add the css import in the root index css file
@import "~@appsmithorg/design-system/build/css/design-system.css";
Usage
import { Button } from "@appsmithorg/design-system";
<Button onClick={() => console.log("An ads button was clicked")}>
Click me
</Button>
Contribute
- Clone the repository to your local machine using the following command:
git clone https://github.com/appsmithorg/design-system.git
The repository you are cloing is a monorepo that contains several packages, each serving a different purpose.
- Navigate to the design-system directory
cd design-system/packages/design-system
- Get all dependencies with
yarn install
Then run storybook in development and watch mode with
yarn run storybook
Any stories you write within design-system/packages/design-system/src/** will show up here.
- To add a new component, use our template
yarn generate:component YOUR_NEW_COMPONENT_NAME
This generates all the scaffolding our components use. Simply replace the fields in caps lock and develop away!
- To ensure that any changes you make are not breaking any other components or their stories, run
yarn test-storybook
and fix any failures before you create a pull request.
Using your changes externally
This repository is a library, and for any changes made here to reflect in another repository, the maintainers will have to publish a release. To get your PR accepted,
- Add a link to your PR in #design-system and ask someone to generate a release for you. They will give you an alpha version.
- Replace the version of design-system in the appsmith repository with this alpha version.
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 { Button } from "@appsmithorg/design-system";