fix: merge conflict

Author: saurabhdaware

.changeset/curly-roses-peel.md

@@ -1,6 +1,6 @@
 # Contributing guidelines for `blade`
 
-## Development setup
+## Local Development Setup
 
 These steps should get you up and started for local development setup. Please ensure you've NodeJS and Yarn installed on your machine before proceeding.
 
@@ -22,7 +22,16 @@ These steps should get you up and started for local development setup. Please en
   yarn start:web
   ```
 
-- That's it!
+- That's it! You can access storybook on http://localhost:9009
+
+### Setting up React Native
+
+If you're contributing to React Native parts, you can follow the following setup.
+
+You can skip it if you're contributing to web only component. Our [Component Status Page in Documentation](https://blade.razorpay.com/?path=/docs/guides-component-status--docs) mentions which components are react native supported and which are web only
+
+<details>
+<summary><h4>React Native Local Development Setup</h4></summary>
 
 ### Setting up iOS
 
@@ -38,13 +47,13 @@ These steps should get you up and started for local development setup. Please en
 
 - Install [Xcode](https://reactnative.dev/docs/environment-setup#xcode).
 
-  > **Note**
+  > [!Note]
   >
   > Sometimes it can take a very long time for Xcode to install. Check [here](https://apple.stackexchange.com/questions/427640/mac-app-store-xcode-download-stuck-at-installing) for troubleshooting.
 
 - Install an iOS 13 simulator in Xcode: Xcode > Preferences > Platforms.
 
-  > **Note**
+  > [!Note]
   >
   > Sometimes this can get stuck or take a very long time. Check [here](https://stackoverflow.com/questions/29058229/download-xcode-simulator-directly) for troubleshooting.
 
@@ -56,7 +65,7 @@ These steps should get you up and started for local development setup. Please en
 
 - Install pods. This can be done by running `pod install` in the `ios/` directory for Intel machine. For M1, things might not work out of box.
 
-  > **Note**
+  > [!Note]
   >
   > Follow the note [here](https://reactnative.dev/docs/environment-setup#cocoapods) if you're using M1
 
@@ -70,9 +79,9 @@ These steps should get you up and started for local development setup. Please en
   >
   > You don't need to build the app everytime (only when you're changing native dependencies), once the app is built you can just start the storybook server and open the app directly on your simulator
 
-- If the stars aligned correctly, the storybook app should get installed and up and running on the simulator. If not, please refer to the official [guide](https://reactnative.dev/docs/environment-setup) for any deviations. 
+- If the stars aligned correctly, the storybook app should get installed and up and running on the simulator. If not, please refer to the official [guide](https://reactnative.dev/docs/environment-setup) for any deviations.
 
-*The storybook can take some time to open after simulator starts. Don't worry, it will start after few minutes (hopefully 🤞).*
+_The storybook can take some time to open after simulator starts. Don't worry, it will start after few minutes (hopefully 🤞)._
 
 ### Setting up Android
 
@@ -93,28 +102,99 @@ These steps should get you up and started for local development setup. Please en
   yarn start:android
   ```
 
-  > **Note**
+  > [!Note]
   >
   > If you already have `yarn start:ios` running, you might have to close it since `yarn start:android` will try to run react-native server on the same port and fail with port taken error.
-  > 
+  >
   > If you want to run both, android and ios at the same time, you can use `yarn start:native` instead.
 
-  > **Note**
+  > [!Note]
   >
   > Make sure `$ANDROID_SDK_ROOT` is added before running the above command, you can run `echo $ANDROID_SDK_ROOT` in same terminal to confirm. (You can run `source ~/.zshrc` or `source ~/.bash_profile` depending on where you added the variables)
 
 - If the stars aligned correctly, the storybook app should get installed and up and running on the emulator 🎉
 
-## Tips
+> [!TIP]
+>
+> You can use `yarn start:all` command to run storybooks on all platforms like web, android, and ios (better to not use it in development though to avoid stressing your laptop)
+
+</details>
+
+## Codebase Terminologies and Structure
 
-- You can use `yarn start:all` command to run storybooks on all platforms like web, android, and ios (better to not use it in development though to avoid stressing your laptop)
+### Base Component Terminology in Code
 
-## TypeScript Guide
+We have some base components defined internally such as BaseInput, BaseButton, BaseText which act as a base for multiple exposed components.
+
+E.g.
+
+- Heading, Display, Text all use BaseText internally
+- TextInput, PasswordInput, SelectInput all use BaseInput internally
+- Majority of our components use BaseBox internally which is a more flexible version of the exposed Box component.
+
+### Cross Platform Guide
+
+You will see files with `.web.tsx` or `.native.tsx` syntax. The `.web.tsx` files end up in web bundle and `.native.tsx` files end up in react native bundle. You can define common logic in normal `.tsx` files which can be imported in both web and native files.
+
+#### Cross Platform TypeScript Guide
 
 [Writing Cross-Platform TypeScript In Blade](./rfcs/writing-cross-platform-typescript.md)
 
+## Testing Changes
+
+### Unit Tests
+
+We have unit tests which you can run by running following commands
+
+```sh
+cd packages/blade
+yarn test:react # web tests
+yarn test:react-native # native tests
+```
+
+### Visual Tests
+
+We also have visual tests that run on every PR. So if your PR changes / breaks a certain component, the diff will show up on chromatic checks of PR
+
+<img width="822" alt="image" src="https://github.com/user-attachments/assets/35f6dfd8-ba64-4bc8-a15d-39a3476b6ae8">
+
+### Interaction Tests
+
+We support writing interaction tests using playwright. You can check example interaction tests of toast at [Toast.test.stories.tsx](./packages/blade/src/components/Toast/__tests__/Toast.test.stories.tsx). You can run these tests by visiting the Interaction Tests section in blade documentation E.g. [Toast Stacking Interaction Test on Documentation](https://blade.razorpay.com/?path=/story/components-interaction-tests-toast--toast-stacking)
+
+## Editor Setup
+
+- Make sure you have [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) installed and setup on your VSCode. This will guide you and autofix errors to keep the code consistent with this project's guidelines
+- Make sure you have [VSCode MDX](https://marketplace.visualstudio.com/items?itemName=JounQin.vscode-mdx) installed on your VSCode. This will help you with linting the markdown files if you're modifying or adding any `mdx` files for documentation purpose.
+  - After installing this plugin navigate to your settings and add `mdx` extension to your `eslint` config. Below is how your settings will look after configuring `mdx` to work with eslint
+  ```json
+  // .vscode/settings.json
+  {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    },
+    "eslint.options": {
+      "extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx"]
+    },
+    "eslint.validate": [
+      "markdown",
+      "mdx",
+      "javascript",
+      "javascriptreact",
+      "typescript",
+      "typescriptreact"
+    ]
+  }
+  ```
+
 ## Troubleshooting guidelines
 
 - VSCode auto imports can sometimes mess things up due to import aliases and `.web` / `.native` extensions. If something is breaking weirdly after adding / importing a new module this might be related
 - Ensure you're not using any `.web`, `.native` files directly in respective imports in `.web` / `.native` modules. For example, if you end up importing a `.web` module accidentally in a `.native` module, you might see a blank component being rendered or module not found error
 - If you forget to import types inside a `.d.ts` file, sometimes TS won't complain and it can throw the typecheck logic in other modules off
+
+- `Blade requires "FRAMEWORK" environment variable to be set. Valid values are "REACT" and "REACT_NATIVE". Instead, received: undefined`
+
+  **Issue:** This is an issue that happens mostly if you run `yarn android` directly. For some reason `FRAMEWORK` doesn't gets passed to React Native application
+
+  **Fix:** If you come across this issue then you first run `yarn start` and then run `yarn android`.

.changeset/grumpy-keys-listen.md

@@ -25,11 +25,10 @@ Blade is the Design System that powers [Razorpay](https://razorpay.com/).
 - [@razorpay/blade-old](https://github.com/razorpay/blade-old) (Deprecated, Private)
 
 ## ✨ Features
-- Cross-Platform (Works Natively on [React Web](https://blade.razorpay.com/?path=/docs/guides-installation--page#%EF%B8%8F-installation) and [React Native](https://blade.razorpay.com/?path=/docs/guides-installation--page#react-native-projects))
-- [White Labelling](https://blade.razorpay.com/?path=/docs/guides-theming-theme-playground--page)
-- [CSS Variables for non-React Projects](https://blade.razorpay.com/?path=/docs/tokens-css-variables--page)
+- Cross-Platform (Works Natively on [React Web and React Native](https://blade.razorpay.com/?path=/docs/guides-installation--docs))
+- [White Labelling](https://blade.razorpay.com/?path=/docs/guides-theming-theme-playground--docs)
 - [Accessible](https://github.com/razorpay/blade/blob/master/rfcs/2022-04-09-accessibility.md#manual-testing)
-- Documented [RFCs](https://github.com/razorpay/blade/tree/docs/make-docs-pretty/rfcs) and [API Decisions](https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Alert/_decisions/decisions.md)
+- Documented [RFCs](https://github.com/razorpay/blade/tree/master/rfcs) and [API Decisions](https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Alert/_decisions/decisions.md)
 
 ## 📝 License
 

CONTRIBUTING.md

@@ -50,7 +50,7 @@ export const parameters = {
       method: 'alphabetical',
       order: [
         'Guides',
-        ['Intro', 'Installation', 'Local Development', 'How to use?'],
+        ['Intro', 'Installation', 'Contributing', 'How to use?'],
         'Tokens',
         [
           'Colors',
@@ -82,7 +82,7 @@ export const parameters = {
       console.log('----', context);
       const getThemeTokens = () => {
         if (context.store.globals.globals.brandColor) {
-          return createTheme({ brandColor: context.store.globals.globals.brandColor });
+          return createTheme({ brandColor: context.store.globals.globals.brandColor }).theme;
         }
         return bladeTheme;
       };
@@ -165,7 +165,7 @@ export const decorators = [
     toggleHiddenStoryStyle(context.globals.showInternalComponents);
     const getThemeTokens = () => {
       if (context.globals.brandColor) {
-        return createTheme({ brandColor: context.globals.brandColor });
+        return createTheme({ brandColor: context.globals.brandColor }).theme;
       }
       return bladeTheme;
     };

README.md

@@ -1,5 +1,111 @@
 # @razorpay/blade
 
+## 11.30.5
+
+### Patch Changes
+
+- 9d4f9b85: feat(blade): add height & styled props to carousel
+
+## 11.30.4
+
+### Patch Changes
+
+- 68e0ec53: fix(blade): Table cell text truncation
+
+## 11.30.3
+
+### Patch Changes
+
+- 98482ca9: fix(blade): interactive card cursor
+
+## 11.30.2
+
+### Patch Changes
+
+- 2f8a5029: fix(BaseHeader): Handle word break on single word. Fixes for AccordionItemHeader, DropdownHeader, etc
+
+## 11.30.1
+
+### Patch Changes
+
+- c050c1d9: fix: AccordionItemHeader to take full width
+
+## 11.30.0
+
+### Minor Changes
+
+- 6e059a68: feat: fix datepicker range selection bug & add onApply handler
+
+### Patch Changes
+
+- 98770d68: fix(Input): required necessity indicator label break
+- 3c31990d: feat(Table): add `defaultSelectedIds` prop
+
+## 11.29.0
+
+### Minor Changes
+
+- eaa75c64: feat(ActionList): add ActionListItemAvatar component for leading prop
+
+### Patch Changes
+
+- c6f8bc72: fix(blade): support overriding tooltip interactive wrapper display prop
+
+## 11.28.2
+
+### Patch Changes
+
+- 12f30712: fix(input): change `wordBreak` behaviour of input hint text & fix alignment
+- 601cedc8: feat(StepItem): add `isDisabled` prop to StepItem
+
+## 11.28.1
+
+### Patch Changes
+
+- 830c8744: fix(Table): table sticky column overlapping with relative cell
+
+## 11.28.0
+
+### Minor Changes
+
+- 95f19f49: feat: expose link negative/positive colors
+
+## 11.27.1
+
+### Patch Changes
+
+- 8ba3eab7: fix: datepicker necessityIndicator
+
+## 11.27.0
+
+### Minor Changes
+
+- f036ef58: feat: add EqualsIcon
+
+## 11.26.1
+
+### Patch Changes
+
+- 5d7317ca: fix: remove default `rel` values
+
+  > [!NOTE]
+  >
+  > While its non-ui-breaking change, you might want to add `rel="noopener noreferrer"` to your Button if that is what you're expecting. This PR removes the defaults in-order to not break analytics that relies on referrer.
+
+- 4dcad016: fix: set min-width on Radio to avoid shrinking
+
+## 11.26.0
+
+### Minor Changes
+
+- f26cf80d: chore: expose brand colors
+- 39742907: feat(TableEditableCell): refactor TableEditableCell and add TableEditableDropdownCell
+
+### Patch Changes
+
+- e13023de: fix: table footer background color
+- fb58be12: fix: Spinner colors
+
 ## 11.25.0
 
 ### Minor Changes

packages/blade/.storybook/react/preview.tsx

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Guides/Contributing" />
+
+# 🤗 Contributing to Blade
+
+Blade is an open-source project and we accept contributions from our other teams at Razorpay and also from outside of Razorpay. You can checkout the links below to help you get started with contribution
+
+## 🧑🏻‍💻 Local Development and Guidelines
+
+Check out [CONTRIBUTING.md](https://github.com/razorpay/blade/blob/master/CONTRIBUTING.md) for local installation, codebase terminologies, editor setup and more.
+
+## 📄 License
+
+Blade is MIT Licensed. You can read full license at [LICENSE](https://github.com/razorpay/blade/blob/master/LICENSE.md)
+
+## 🏘️ Slack Channel (For Razorpay Employees)
+
+Razorpay Employees can reach out on `#design-system` and tag `@designsystem` for anything related to contributing to Blade.

packages/blade/CHANGELOG.md

@@ -1,4 +1,3 @@
-{/* TODO: Rebranding - Rexpose Theming once we fix white-labeling */}
 import { Meta } from '@storybook/addon-docs';
 import {
   Collapsible,
@@ -43,7 +42,7 @@ To make this possible, Blade allows you to customize the theme of the components
 ```tsx
 import { createTheme } from '@razorpay/blade/tokens';
 
-const customThemeTokens = createTheme({
+const { theme: customThemeTokens } = createTheme({
   brandColor: '#83003D', // 'rgba(131, 0, 61)', 'hsl(332, 100%, 26%)' are also valid values
 });
 
@@ -70,11 +69,11 @@ Custom branded themes also contain support for light and dark color schemes. You
 export const ContrastDemo = () => {
   return (
     <div>
-      <BladeProvider themeTokens={createTheme({ brandColor: '#83003D' })} colorScheme="light">
+      <BladeProvider themeTokens={createTheme({ brandColor: '#83003D' }).theme} colorScheme="light">
         <Heading>Foreground on Button is Light based on the brand color</Heading>
         <Button icon={CreditCardIcon}>Pay Now</Button>
       </BladeProvider>
-      <BladeProvider themeTokens={createTheme({ brandColor: '#5EDD55' })} colorScheme="light">
+      <BladeProvider themeTokens={createTheme({ brandColor: '#5EDD55' }).theme} colorScheme="light">
         <Heading marginTop="spacing.6">
           Foreground on Button is Dark based on the brand color
         </Heading>