PromucFlow_constructor/app/client/packages/design-system/ads-old/CONTRIBUTING.md

Refer to the README for a guide on how to get started with contributing.

Using yalc

When you make a change in the design system, you will want to ensure that the component works as expected in the app you are using it for. To emulate working with published packages locally, we use yalc.

Installation

Run

yarn global add yalc

Setting up for appsmith usage

If we're going to use this package in the appsmith repository, we need to make some additional changes to this repository.

1. navigate to the package/design-system/package.json file
2. Make sure you change the field "name": "@appsmithorg/design-system" to "name": "design-system". We do this so that we don't run into alias conflicts later.
3. Make sure you do not commit this file

In this repository

We need to "publish" our package.

1. Make sure the package builds by running yarn build
2. Make sure the functionality works as expected in the playground by running yarn storybook and then testing your component out in the relevant story
3. If you are writing a new component, write a story for it taking another story from this repository as reference. You could also refer to the official docs.
4. When you've done all of this, run yalc publish. It will output the package name and number.

In the other repository

1. Run yalc add design-system in the appsmith repository.
2. This will create changes in your package.lock file. Run yarn to get the new package version from yalc.
3. This will create changes in your yarn.lock file, which is what we want. Make sure you do not commit these changes.

Now you can test your app while including the changes made in this package. Go ahead and run your local development environment, or some cypress tests.

Please note that yalc will not test any uncommitted changes you make in your file system. Make sure you have everything you need in the commits (you can always revert bad ones!)

Non-local testing

You can create an alpha release of your branch so that other people can see and test your changes in a different repository (on a CI, for example). To do this,

1. In your package.json, make sure the version key is set to be the latest alpha version listed on the versions tab on our npm package listing. If you don't do this, the alpha version you create will overwrite an existing version and bad things might happen.
2. Run ./alpha-release.sh in your shell. In order to complete this script, you will need an OTP which only members of the @appsmithorg organisation on npm have access to. Please contact someone from the design system pod before you start this action.

Creating stories

When you create a component, make sure you write a well-defined story for it. A well defined story is one that

1. Denotes the default state of the component
2. Denotes all the variants of the component
3. Has a list of all the things the component can be

You can create a template for your stories by running

yarn create-story -f <DIRECTORY_NAME>

where ideally your directory name matches your component name exactly.

Contribution Guidelines: Code Style

1. Destructure function props where possible: https://github.com/appsmithorg/design-system/pull/109