c7a7c3fa3f
## Description Upgrade Typescript from 4.9.5 to 5.4 Upgrading to 5.5 is not possible until we upgrade colors.js lib. It will be done in separate PR More details here https://github.com/color-js/color.js/issues/560#issuecomment-2182819685 ## 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/10163124159> > Commit: 8d2e93f2e2913e715686ccb058d3efddd55aabc9 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10163124159&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Tue, 30 Jul 2024 14:11:42 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 to the latest version (5.4), enhancing overall functionality with potential new features and improvements. - **Improvements** - Enhanced type safety by refining the `isString` function, allowing better type inference and preventing runtime errors. - Improved comments and annotations in the `indirectEval` function for better clarity on its usage and intent. - Corrected typographical errors in error handling logic across multiple controllers, improving reliability in error messaging. - Updated export style for `IconNames` to clarify its purpose as a type, enhancing developer experience. - **Configuration Changes** - Updated Jest configurations to better support ECMAScript Modules (ESM), improving compatibility and allowing for more flexible module handling. - Adjusted TypeScript configuration to enhance module handling and compatibility. <!-- 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";