Merge branch 'rebranding/master' into anu/rebranding-skeleton

.github/workflows/blade-interaction-tests.yml

@@ -0,0 +1,37 @@
+name: Blade Interaction Tests
+
+# Runs the action when 
+# 1. 'Run Interaction Tests' label is added to PR 
+# 2. Workflow is trigerred manually
+# 3. PR is merged to master
+
+on:
+  workflow_dispatch:
+  pull_request:
+    types: [labeled]
+  push:
+    branches:
+      - 'master'
+
+env:
+  GITHUB_ACCESS_TOKEN: ${{ secrets.CI_BOT_TOKEN }}
+
+jobs:
+  interaction-tests:
+    name: Run Interaction Tests
+    runs-on: ubuntu-latest # nosemgrep: non-self-hosted-runner
+    if: ${{ github.event_name == 'workflow_dispatch' || github.event.label.name == 'Run Interaction Tests' || github.event_name == 'push' }}
+    steps:
+      - name: Checkout Codebase
+        uses: actions/checkout@v3
+      - name: Use Node v18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.12.1
+      - name: Setup Cache & Install Dependencies
+        uses: ./.github/actions/install-dependencies
+      - name: Run Interaction Tests
+        run: |
+          npx playwright install chromium firefox webkit --with-deps
+          yarn test:react:interaction:ci 
+        working-directory: packages/blade

.github/workflows/blade-validate.yml

@@ -46,7 +46,7 @@ jobs:
           node-version: 18.12.1
       - name: Setup Cache & Install Dependencies
         uses: ./.github/actions/install-dependencies
-      - name: Run React & React Native Tests
+      - name: Run Unit Tests
         run: yarn test
         working-directory: packages/blade
         env:

packages/blade-coverage-extension/yarn.lock

@@ -4589,9 +4589,9 @@ flatted@^3.1.0:
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
 follow-redirects@^1.0.0:
-  version "1.15.2"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
-  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+  version "1.15.4"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf"
+  integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==
 
 for-each@^0.3.3:
   version "0.3.3"

packages/blade/.storybook/react-native/storybook.requires.js

@@ -57,6 +57,7 @@ const getStories = () => {
     './src/components/Button/IconButton/IconButton.stories.tsx': require('../../src/components/Button/IconButton/IconButton.stories.tsx'),
     './src/components/Card/Card.stories.tsx': require('../../src/components/Card/Card.stories.tsx'),
     './src/components/Card/CardInteractive.stories.tsx': require('../../src/components/Card/CardInteractive.stories.tsx'),
+    './src/components/Carousel/__tests__/Carousel.test.stories.tsx': require('../../src/components/Carousel/__tests__/Carousel.test.stories.tsx'),
     './src/components/Carousel/Carousel.stories.tsx': require('../../src/components/Carousel/Carousel.stories.tsx'),
     './src/components/Checkbox/Checkbox.stories.tsx': require('../../src/components/Checkbox/Checkbox.stories.tsx'),
     './src/components/Checkbox/CheckboxGroup.stories.tsx': require('../../src/components/Checkbox/CheckboxGroup.stories.tsx'),

packages/blade/.storybook/react/main.ts

@@ -43,6 +43,7 @@ const config: StorybookConfig = {
     '../../src/components/Radio/**/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Popover/**/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Skeleton/**/**/*.stories.@(ts|tsx|js|jsx)',
+    '../../src/components/Switch/**/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Checkbox/**/**/*.stories.@(ts|tsx|js|jsx)',
     '../../docs/**/*.stories.mdx',
     '../../docs/**/*.stories.@(ts|tsx|js|jsx)',
@@ -57,6 +58,7 @@ const config: StorybookConfig = {
     '@storybook/addon-docs',
     '@storybook/addon-a11y',
     '@storybook/preset-create-react-app',
+    '@storybook/addon-interactions',
   ],
   framework: {
     name: '@storybook/react-webpack5',

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

@@ -9,6 +9,7 @@ import { INTERNAL_STORY_ADDON_PARAM } from './constants';
 const { GlobalStyle } = global;
 import { DocsContainer } from '@storybook/addon-docs';
 import React from 'react';
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 import './global.css';
 
 export const parameters = {
@@ -27,6 +28,19 @@ export const parameters = {
       disable: true,
     },
   },
+  viewport: {
+    viewports: {
+      ...MINIMAL_VIEWPORTS,
+      iPhone6: {
+        name: 'iPhone 6',
+        styles: {
+          height: '667px',
+          width: '375px',
+        },
+        type: 'mobile',
+      },
+    },
+  },
   // on development setting it to undefined so that on 'live reload' it won't switch
   // to docs panel while developing the component
   viewMode: process.env.NODE_ENV === 'development' ? undefined : 'docs',
@@ -58,7 +72,7 @@ export const parameters = {
           'useTheme',
         ],
         'Components',
-        ['*', 'KitchenSink'],
+        ['*', 'Interaction Tests', 'KitchenSink'],
         'Recipes',
       ],
     },

packages/blade/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @razorpay/blade
 
+## 10.23.2
+
+### Patch Changes
+
+- bd7d8dc5: feat(Skeleton): add minHeight and minWidth prop
+
+## 10.23.1
+
+### Patch Changes
+
+- 6f89de9f: fix(Table): handle case where currentPage is greater than total pages
+
 ## 10.23.0
 
 ### Minor Changes

packages/blade/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "10.23.0",
+  "version": "10.23.2",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"
@@ -109,8 +109,12 @@
     "react-native:storybook:ios": "yarn react-native:get-stories && cross-env FRAMEWORK=REACT_NATIVE react-native run-ios",
     "react-native:storybook:start": "yarn react-native:get-stories && cross-env NODE_OPTIONS=--openssl-legacy-provider FRAMEWORK=REACT_NATIVE react-native start --reset-cache",
     "react": "yarn run react:storybook",
-    "react:storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider FRAMEWORK=REACT storybook dev -c ./.storybook/react -p 9009",
-    "react:storybook:build": "cross-env NODE_OPTIONS=--openssl-legacy-provider FRAMEWORK=REACT storybook build -c ./.storybook/react -o storybook-site",
+    "react:storybook": "cross-env FRAMEWORK=REACT storybook dev -c ./.storybook/react -p 9009",
+    "react:storybook:build": "cross-env FRAMEWORK=REACT storybook build -c ./.storybook/react -o storybook-site --quiet",
+    "react:storybook:serve": "http-server storybook-site --port 9009 --silent",
+    "react:storybook:serve:test": "wait-on http://127.0.0.1:9009/ && yarn test:react:interaction",
+    "test:react:interaction": "cross-env FRAMEWORK=REACT test-storybook -c ./.storybook/react --url http://127.0.0.1:9009/",
+    "test:react:interaction:ci": "yarn react:storybook:build && run-p react:storybook:serve react:storybook:serve:test --race",
     "test:react": "cross-env FRAMEWORK=REACT jest -c ./jest.web.config.js --shard=$SHARD --forceExit",
     "test:react-native": "cross-env FRAMEWORK=REACT_NATIVE jest -c ./jest.native.config.js --shard=$SHARD --forceExit",
     "start:ios": "cross-env NODE_OPTIONS=--openssl-legacy-provider run-p react-native:storybook:start react-native:storybook:ios",
@@ -139,6 +143,13 @@
     "tinycolor2": "1.6.0"
   },
   "devDependencies": {
+    "http-server": "14.1.1",
+    "wait-on": "7.2.0",
+    "@storybook/addon-interactions": "7.6.6",
+    "@storybook/testing-library": "0.2.2",
+    "@storybook/test-runner": "0.16.0",
+    "@storybook/jest": "0.2.3",
+    "playwright": "1.40.1",
     "chromatic": "6.22.0",
     "@babel/cli": "7.23.0",
     "@babel/core": "7.20.2",

packages/blade/rebranded-components.js

@@ -31,6 +31,7 @@ const rebrandedComponents = [
   'VisuallyHidden',
   'Tooltip',
   'Skeleton',
+  'Switch',
   'Radio',
   'Checkbox',
 ];

packages/blade/src/components/Carousel/Carousel.stories.tsx

@@ -248,7 +248,7 @@ const TestimonialCard = ({
   );
 };
 
-const CarouselExample = (props: Omit<CarouselProps, 'children'>): React.ReactElement => {
+export const CarouselExample = (props: Omit<CarouselProps, 'children'>): React.ReactElement => {
   const key = `${props.visibleItems}-${props.shouldAddStartEndSpacing}`;
   return (
     <Box width="100%" height={isReactNative() ? '350px' : 'auto'}>

packages/blade/src/components/Carousel/Carousel.web.tsx

@@ -14,18 +14,18 @@ import type { CarouselContextProps } from './CarouselContext';
 import { CarouselContext } from './CarouselContext';
 import { getCarouselItemId } from './utils';
 import { CAROUSEL_AUTOPLAY_INTERVAL, componentIds } from './constants';
-import debounce from '~utils/lodashButBetter/debounce';
-import throttle from '~utils/lodashButBetter/throttle';
 import getIn from '~utils/lodashButBetter/get';
+import throttle from '~utils/lodashButBetter/throttle';
+import debounce from '~utils/lodashButBetter/debounce';
 import { Box } from '~components/Box';
 import BaseBox from '~components/Box/BaseBox';
-import { castWebType, makeMotionTime, useInterval } from '~utils';
+import { castWebType, makeMotionTime, useInterval, usePrevious } from '~utils';
 import { useId } from '~utils/useId';
 import { makeAccessible } from '~utils/makeAccessible';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
-import { useDidUpdate } from '~utils/useDidUpdate';
 import { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';
 import { useTheme } from '~components/BladeProvider';
+import { useFirstRender } from '~utils/useFirstRender';
 
 type ControlsProp = Required<
   Pick<
@@ -224,6 +224,29 @@ const CarouselBody = React.forwardRef<HTMLDivElement, CarouselBodyProps>(
   },
 );
 
+/**
+ * A custom hook which syncs an effect with a state
+ * While ignoring the first render & only running the effect when the state changes
+ */
+function useSyncUpdateEffect<T>(
+  effect: React.EffectCallback,
+  stateToSyncWith: T,
+  deps: React.DependencyList,
+) {
+  const isFirst = useFirstRender();
+  const prevState = usePrevious<T>(stateToSyncWith);
+
+  React.useEffect(() => {
+    if (!isFirst) {
+      // if the state is the same as the previous state
+      // we don't want to run the effect
+      if (prevState === stateToSyncWith) return;
+      return effect();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stateToSyncWith, ...deps]);
+}
+
 const Carousel = ({
   autoPlay,
   visibleItems = 1,
@@ -451,9 +474,13 @@ const Carousel = ({
     shouldAddStartEndSpacing,
   ]);
 
-  useDidUpdate(() => {
-    onChange?.(activeSlide);
-  }, [activeSlide, onChange]);
+  useSyncUpdateEffect(
+    () => {
+      onChange?.(activeSlide);
+    },
+    activeSlide,
+    [onChange],
+  );
 
   return (
     <CarouselContext.Provider value={carouselContext}>