From bd59ed1a6f87190c81123046375e0c1e31dff59c Mon Sep 17 00:00:00 2001 From: Chaitanya Deorukhkar Date: Fri, 29 Dec 2023 14:49:41 +0530 Subject: [PATCH 01/14] fix: documentation bugs after storybook upgrade (#1917) --- packages/blade/src/components/SkipNav/SkipNav.stories.tsx | 1 + .../src/components/SpotlightPopoverTour/docs/Tour.stories.mdx | 2 +- packages/blade/src/components/Tooltip/Tooltip.stories.tsx | 1 + .../blade/src/components/Typography/Heading/Heading.stories.tsx | 1 + .../src/components/VisuallyHidden/VisuallyHidden.stories.tsx | 1 + 5 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/blade/src/components/SkipNav/SkipNav.stories.tsx b/packages/blade/src/components/SkipNav/SkipNav.stories.tsx index 360f286a0b2..b384ec7b198 100644 --- a/packages/blade/src/components/SkipNav/SkipNav.stories.tsx +++ b/packages/blade/src/components/SkipNav/SkipNav.stories.tsx @@ -60,6 +60,7 @@ const SkipNavStoryMeta: Meta = { title: 'Components/Accessibility/SkipNav', component: SkipNavLink, args: {}, + tags: ['autodocs'], parameters: { docs: { page: () => , diff --git a/packages/blade/src/components/SpotlightPopoverTour/docs/Tour.stories.mdx b/packages/blade/src/components/SpotlightPopoverTour/docs/Tour.stories.mdx index 3a94574f238..5b72f0b2294 100644 --- a/packages/blade/src/components/SpotlightPopoverTour/docs/Tour.stories.mdx +++ b/packages/blade/src/components/SpotlightPopoverTour/docs/Tour.stories.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs'; import { TourDocs } from './TourDocs'; - + diff --git a/packages/blade/src/components/Tooltip/Tooltip.stories.tsx b/packages/blade/src/components/Tooltip/Tooltip.stories.tsx index ef5e461260d..c5017530c49 100644 --- a/packages/blade/src/components/Tooltip/Tooltip.stories.tsx +++ b/packages/blade/src/components/Tooltip/Tooltip.stories.tsx @@ -56,6 +56,7 @@ const Page = (): React.ReactElement => { export default { title: 'Components/Tooltip', component: TooltipComponent, + tags: ['autodocs'], args: { placement: 'bottom', content: 'Amount reversed to customer bank account', diff --git a/packages/blade/src/components/Typography/Heading/Heading.stories.tsx b/packages/blade/src/components/Typography/Heading/Heading.stories.tsx index d135160ec87..67d54a74df9 100644 --- a/packages/blade/src/components/Typography/Heading/Heading.stories.tsx +++ b/packages/blade/src/components/Typography/Heading/Heading.stories.tsx @@ -63,6 +63,7 @@ const HeadingStoryMeta: Meta contrast: 'low', as: undefined, }, + tags: ['autodocs'], argTypes: getHeadingArgTypes(), parameters: { docs: { diff --git a/packages/blade/src/components/VisuallyHidden/VisuallyHidden.stories.tsx b/packages/blade/src/components/VisuallyHidden/VisuallyHidden.stories.tsx index ce51bf4eb03..48ad12f5eec 100644 --- a/packages/blade/src/components/VisuallyHidden/VisuallyHidden.stories.tsx +++ b/packages/blade/src/components/VisuallyHidden/VisuallyHidden.stories.tsx @@ -51,6 +51,7 @@ const Page = (): ReactElement => { const VisuallyHiddenStoryMeta: Meta = { title: 'Components/Accessibility/VisuallyHidden', component: VisuallyHiddenComponent, + tags: ['autodocs'], args: { children: 'Toggle dark mode' }, parameters: { docs: { From 95063de96212ace969b19f1bc4f4af6250175a74 Mon Sep 17 00:00:00 2001 From: Chaitanya Deorukhkar Date: Tue, 9 Jan 2024 14:38:05 +0530 Subject: [PATCH 02/14] chore: Update CODEOWNERS (#1939) --- CODEOWNERS | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CODEOWNERS b/CODEOWNERS index 56f1cf2b224..c683b2162b5 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -1 +1 @@ -/packages/blade/ @chaitanyadeorukhkar @kamleshchandnani +/packages/blade/ @chaitanyadeorukhkar @kamleshchandnani @anuraghazra @nashcheez @saurabhdaware @snitin315 From 6f89de9fa8a884ba37ea16870005f33d18ae08c0 Mon Sep 17 00:00:00 2001 From: Chaitanya Deorukhkar Date: Tue, 9 Jan 2024 15:38:38 +0530 Subject: [PATCH 03/14] fix(Table): handle case where currentPage is greater than total pages (#1929) --- .changeset/famous-cats-push.md | 5 +++ .../components/Table/TablePagination.web.tsx | 12 ++++- .../Table/__tests__/Table.web.test.tsx | 44 +++++++++++++++++++ 3 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 .changeset/famous-cats-push.md diff --git a/.changeset/famous-cats-push.md b/.changeset/famous-cats-push.md new file mode 100644 index 00000000000..4f019d2537e --- /dev/null +++ b/.changeset/famous-cats-push.md @@ -0,0 +1,5 @@ +--- +"@razorpay/blade": patch +--- + +fix(Table): handle case where currentPage is greater than total pages diff --git a/packages/blade/src/components/Table/TablePagination.web.tsx b/packages/blade/src/components/Table/TablePagination.web.tsx index af3834edd18..7c3d004bf6e 100644 --- a/packages/blade/src/components/Table/TablePagination.web.tsx +++ b/packages/blade/src/components/Table/TablePagination.web.tsx @@ -23,6 +23,7 @@ import { Button } from '~components/Button'; import { makeAccessible } from '~utils/makeAccessible'; import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects'; import { useTheme } from '~components/BladeProvider'; +import { throwBladeError } from '~utils/logger'; const pageSizeOptions: NonNullable[] = [10, 25, 50]; @@ -212,7 +213,16 @@ const _TablePagination = ({ }, [controlledCurrentPage, currentPage, handlePageChange, onPageChange]); if (currentPage > totalPages - 1) { - handlePageChange(totalPages - 1); + if (!isUndefined(controlledCurrentPage)) { + if (__DEV__) { + throwBladeError({ + moduleName: 'TablePagination', + message: `Value of 'currentPage' prop cannot be greater than the total pages`, + }); + } + } else { + handlePageChange(totalPages - 1); + } } const handlePageSizeChange = (pageSize: number): void => { diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index 76db1a18e92..86a78386e3c 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -806,4 +806,48 @@ describe('', () => { fireEvent.click(goBack5PagesButton); expect(onPageChange).toHaveBeenLastCalledWith({ page: 0 }); }, 10000); + + it('should throw error if currentPage is greater than total pages', () => { + const mockConsoleError = jest.spyOn(console, 'error').mockImplementation(); + expect(() => + renderWithTheme( +
} + > + {(tableData) => ( + <> + + + Payment ID + Amount + Status + Type + Method + Name + + + + {tableData.map((tableItem, index) => ( + + {tableItem.paymentId} + {tableItem.amount} + {tableItem.status} + {tableItem.type} + {tableItem.method} + {tableItem.name} + + ))} + + + )} +
, + ), + ).toThrow( + `[Blade: TablePagination]: Value of 'currentPage' prop cannot be greater than the total pages`, + ); + mockConsoleError.mockRestore(); + }); }); From 0a48d185878966a34f4e27ede17ef819bbe0819d Mon Sep 17 00:00:00 2001 From: rzpcibot <64553331+rzpcibot@users.noreply.github.com> Date: Tue, 9 Jan 2024 16:08:35 +0530 Subject: [PATCH 04/14] build(blade): update version (#1941) Co-authored-by: github-actions[bot] --- .changeset/famous-cats-push.md | 5 ----- packages/blade/CHANGELOG.md | 6 ++++++ packages/blade/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/famous-cats-push.md diff --git a/.changeset/famous-cats-push.md b/.changeset/famous-cats-push.md deleted file mode 100644 index 4f019d2537e..00000000000 --- a/.changeset/famous-cats-push.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@razorpay/blade": patch ---- - -fix(Table): handle case where currentPage is greater than total pages diff --git a/packages/blade/CHANGELOG.md b/packages/blade/CHANGELOG.md index d6692c2af7f..bf5f7aacbb6 100644 --- a/packages/blade/CHANGELOG.md +++ b/packages/blade/CHANGELOG.md @@ -1,5 +1,11 @@ # @razorpay/blade +## 10.23.1 + +### Patch Changes + +- 6f89de9f: fix(Table): handle case where currentPage is greater than total pages + ## 10.23.0 ### Minor Changes diff --git a/packages/blade/package.json b/packages/blade/package.json index 0b7dcf09611..93aad2824e1 100644 --- a/packages/blade/package.json +++ b/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.1", "license": "MIT", "engines": { "node": ">=18.12.1" From 8854ff5a9fa39070a8b65afa13010e1042a7c9a1 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 9 Jan 2024 17:51:52 +0530 Subject: [PATCH 05/14] build(deps): bump follow-redirects (#1945) Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.2 to 1.15.4. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.2...v1.15.4) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- .../examples/with-react-hook-form/yarn.lock | 364 +++++++++++++++++- 1 file changed, 356 insertions(+), 8 deletions(-) diff --git a/packages/examples/with-react-hook-form/yarn.lock b/packages/examples/with-react-hook-form/yarn.lock index 397513466e9..7d9f12ddad6 100644 --- a/packages/examples/with-react-hook-form/yarn.lock +++ b/packages/examples/with-react-hook-form/yarn.lock @@ -207,6 +207,13 @@ dependencies: "@babel/types" "^7.18.6" +"@babel/helper-module-imports@^7.16.7": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0" + integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w== + dependencies: + "@babel/types" "^7.22.15" + "@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.19.6", "@babel/helper-module-transforms@^7.20.2": version "7.20.2" resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.20.2.tgz#ac53da669501edd37e658602a21ba14c08748712" @@ -1097,6 +1104,20 @@ core-js-pure "^3.25.1" regenerator-runtime "^0.13.10" +"@babel/runtime@7.20.0": + version "7.20.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.0.tgz#824a9ef325ffde6f78056059db3168c08785e24a" + integrity sha512-NDYdls71fTXoU8TZHfbBWg7DiZfNzClcKui/+kyi6ppD2L1qnWW3VV6CjtaBXSUGGhiTWJ6ereOIkUvenif66Q== + dependencies: + regenerator-runtime "^0.13.10" + +"@babel/runtime@^7.0.0", "@babel/runtime@^7.18.3": + version "7.23.8" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.8.tgz#8ee6fe1ac47add7122902f257b8ddf55c898f650" + integrity sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.8.4": version "7.20.1" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.1.tgz#1148bb33ab252b165a06698fde7576092a78b4a9" @@ -1272,6 +1293,39 @@ resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36" integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg== +"@emotion/babel-plugin@^11.11.0": + version "11.11.0" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c" + integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ== + dependencies: + "@babel/helper-module-imports" "^7.16.7" + "@babel/runtime" "^7.18.3" + "@emotion/hash" "^0.9.1" + "@emotion/memoize" "^0.8.1" + "@emotion/serialize" "^1.1.2" + babel-plugin-macros "^3.1.0" + convert-source-map "^1.5.0" + escape-string-regexp "^4.0.0" + find-root "^1.1.0" + source-map "^0.5.7" + stylis "4.2.0" + +"@emotion/cache@^11.11.0": + version "11.11.0" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff" + integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ== + dependencies: + "@emotion/memoize" "^0.8.1" + "@emotion/sheet" "^1.2.2" + "@emotion/utils" "^1.2.1" + "@emotion/weak-memoize" "^0.3.1" + stylis "4.2.0" + +"@emotion/hash@^0.9.1": + version "0.9.1" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43" + integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ== + "@emotion/is-prop-valid@^1.1.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83" @@ -1284,6 +1338,41 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== +"@emotion/memoize@^0.8.1": + version "0.8.1" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17" + integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA== + +"@emotion/react@11.11.1": + version "11.11.1" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.1.tgz#b2c36afac95b184f73b08da8c214fdf861fa4157" + integrity sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA== + dependencies: + "@babel/runtime" "^7.18.3" + "@emotion/babel-plugin" "^11.11.0" + "@emotion/cache" "^11.11.0" + "@emotion/serialize" "^1.1.2" + "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1" + "@emotion/utils" "^1.2.1" + "@emotion/weak-memoize" "^0.3.1" + hoist-non-react-statics "^3.3.1" + +"@emotion/serialize@^1.1.2": + version "1.1.3" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.3.tgz#84b77bfcfe3b7bb47d326602f640ccfcacd5ffb0" + integrity sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA== + dependencies: + "@emotion/hash" "^0.9.1" + "@emotion/memoize" "^0.8.1" + "@emotion/unitless" "^0.8.1" + "@emotion/utils" "^1.2.1" + csstype "^3.0.2" + +"@emotion/sheet@^1.2.2": + version "1.2.2" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec" + integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA== + "@emotion/stylis@^0.8.4": version "0.8.5" resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" @@ -1294,6 +1383,26 @@ resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== +"@emotion/unitless@^0.8.1": + version "0.8.1" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3" + integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ== + +"@emotion/use-insertion-effect-with-fallbacks@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963" + integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw== + +"@emotion/utils@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4" + integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg== + +"@emotion/weak-memoize@^0.3.1": + version "0.3.1" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6" + integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww== + "@eslint/eslintrc@^1.3.3": version "1.3.3" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.3.tgz#2b044ab39fdfa75b4688184f9e573ce3c5b0ff95" @@ -1309,6 +1418,47 @@ minimatch "^3.1.2" strip-json-comments "^3.1.1" +"@floating-ui/core@^1.5.3": + version "1.5.3" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.3.tgz#b6aa0827708d70971c8679a16cf680a515b8a52a" + integrity sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q== + dependencies: + "@floating-ui/utils" "^0.2.0" + +"@floating-ui/dom@^1.5.4": + version "1.5.4" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.4.tgz#28df1e1cb373884224a463235c218dcbd81a16bb" + integrity sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ== + dependencies: + "@floating-ui/core" "^1.5.3" + "@floating-ui/utils" "^0.2.0" + +"@floating-ui/react-dom@^2.0.2": + version "2.0.5" + resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.5.tgz#851522899c34e3e2be1e29f3294f150834936e28" + integrity sha512-UsBK30Bg+s6+nsgblXtZmwHhgS2vmbuQK22qgt2pTQM6M3X6H1+cQcLXqgRY3ihVLcZJE6IvqDQozhsnIVqK/Q== + dependencies: + "@floating-ui/dom" "^1.5.4" + +"@floating-ui/react@0.25.4": + version "0.25.4" + resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.25.4.tgz#82507e14460aee70f435ad2fd717ea182b6d5c61" + integrity sha512-lWRQ/UiTvSIBxohn0/2HFHEmnmOVRjl7j6XcRJuLH0ls6f/9AyHMWVzkAJFuwx0n9gaEeCmg9VccCSCJzbEJig== + dependencies: + "@floating-ui/react-dom" "^2.0.2" + "@floating-ui/utils" "^0.1.1" + tabbable "^6.0.1" + +"@floating-ui/utils@^0.1.1": + version "0.1.6" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9" + integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A== + +"@floating-ui/utils@^0.2.0": + version "0.2.1" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2" + integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q== + "@fontsource/lato@^4.5.10": version "4.5.10" resolved "https://registry.yarnpkg.com/@fontsource/lato/-/lato-4.5.10.tgz#1ab3d33282e605886e4a8b4c32b1f230a4cb5ea6" @@ -1673,8 +1823,19 @@ schema-utils "^3.0.0" source-map "^0.7.3" -"@razorpay/blade@../../packages/blade/build/": - version "0.0.0" +"@razorpay/blade@file:../../blade": + version "10.23.1" + dependencies: + "@babel/runtime" "7.20.0" + "@emotion/react" "11.11.1" + "@floating-ui/react" "0.25.4" + "@table-library/react-table-library" "4.1.7" + "@use-gesture/react" "10.2.24" + body-scroll-lock-upgrade "1.1.0" + patch-package "7.0.0" + tinycolor2 "1.6.0" + ts-deepmerge "6.2.0" + use-presence "1.1.0" "@rollup/plugin-babel@^5.2.0": version "5.3.1" @@ -1850,6 +2011,15 @@ "@svgr/plugin-svgo" "^5.5.0" loader-utils "^2.0.0" +"@table-library/react-table-library@4.1.7": + version "4.1.7" + resolved "https://registry.yarnpkg.com/@table-library/react-table-library/-/react-table-library-4.1.7.tgz#90b71f959228f420d2deffeecc9eace879cb4c2e" + integrity sha512-KKFjdACvEUeD9yhgXBjZUJSdE9pxUbJdou4Pp71FW8dxQWc7LcMcSxpveSfGXw8KlcWY0hThJOwyjQb+UKOmnw== + dependencies: + clsx "1.1.1" + react-virtualized-auto-sizer "1.0.7" + react-window "1.8.7" + "@tootallnate/once@1": version "1.1.2" resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82" @@ -2295,6 +2465,18 @@ "@typescript-eslint/types" "5.44.0" eslint-visitor-keys "^3.3.0" +"@use-gesture/core@10.2.24": + version "10.2.24" + resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.2.24.tgz#88d13a60954ba62463c774acb92d12bf7b3d810c" + integrity sha512-ZL7F9mgOn3Qlnp6QLI9jaOfcvqrx6JPE/BkdVSd8imveaFTm/a3udoO6f5Us/1XtqnL4347PsIiK6AtCvMHk2Q== + +"@use-gesture/react@10.2.24": + version "10.2.24" + resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.2.24.tgz#bc13780381e786b286f099f69ea3801bb9ed27a5" + integrity sha512-rAZ8Nnpu1g4eFzqCPlaq+TppJpMy0dTpYOQx5KpfoBF4P3aWnCqwj7eKxcmdIb1NJKpIJj50DPugUH4mq5cpBg== + dependencies: + "@use-gesture/core" "10.2.24" + "@webassemblyjs/ast@1.11.1": version "1.11.1" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7" @@ -2426,6 +2608,11 @@ resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d" integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ== +"@yarnpkg/lockfile@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31" + integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ== + abab@^2.0.3, abab@^2.0.5: version "2.0.6" resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291" @@ -2923,6 +3110,11 @@ body-parser@1.20.1: type-is "~1.6.18" unpipe "1.0.0" +body-scroll-lock-upgrade@1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/body-scroll-lock-upgrade/-/body-scroll-lock-upgrade-1.1.0.tgz#3df63fca3d1db2f896bd9a050bd14c33cd0085d2" + integrity sha512-nnfVAS+tB7CS9RaksuHVTpgHWHF7fE/ptIBJnwZrMqImIvWJF1OGcLnMpBhC6qhkx9oelvyxmWXwmIJXCV98Sw== + bonjour-service@^1.0.11: version "1.0.14" resolved "https://registry.yarnpkg.com/bonjour-service/-/bonjour-service-1.0.14.tgz#c346f5bc84e87802d08f8d5a60b93f758e514ee7" @@ -3120,6 +3312,11 @@ ci-info@^3.2.0: resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.6.1.tgz#7594f1c95cb7fdfddee7af95a13af7dbc67afdcf" integrity sha512-up5ggbaDqOqJ4UqLKZ2naVkyqSJQgJi5lwD6b6mM748ysrghDBX0bx/qJTUHzw7zu6Mq4gycviSF5hJnwceD8w== +ci-info@^3.7.0: + version "3.9.0" + resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4" + integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ== + cjs-module-lexer@^1.0.0: version "1.2.2" resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40" @@ -3141,6 +3338,11 @@ cliui@^7.0.2: strip-ansi "^6.0.0" wrap-ansi "^7.0.0" +clsx@1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" + integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA== + co@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184" @@ -3278,7 +3480,7 @@ content-type@~1.0.4: resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b" integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA== -convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0: +convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0: version "1.9.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f" integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A== @@ -4427,6 +4629,11 @@ find-cache-dir@^3.3.1: make-dir "^3.0.2" pkg-dir "^4.1.0" +find-root@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" + integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng== + find-up@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73" @@ -4450,6 +4657,13 @@ find-up@^5.0.0: locate-path "^6.0.0" path-exists "^4.0.0" +find-yarn-workspace-root@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz#f47fb8d239c900eb78179aa81b66673eac88f7bd" + integrity sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ== + dependencies: + micromatch "^4.0.2" + flat-cache@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11" @@ -4464,9 +4678,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== fork-ts-checker-webpack-plugin@^6.5.0: version "6.5.2" @@ -4678,6 +4892,11 @@ globby@^11.0.4, globby@^11.1.0: merge2 "^1.4.1" slash "^3.0.0" +graceful-fs@^4.1.11: + version "4.2.11" + resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3" + integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ== + graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9: version "4.2.10" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c" @@ -4751,7 +4970,7 @@ he@^1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== -hoist-non-react-statics@^3.0.0: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.1: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -5172,7 +5391,7 @@ is-weakref@^1.0.2: dependencies: call-bind "^1.0.2" -is-wsl@^2.2.0: +is-wsl@^2.1.1, is-wsl@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271" integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww== @@ -5855,6 +6074,13 @@ kind-of@^6.0.2: resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd" integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw== +klaw-sync@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/klaw-sync/-/klaw-sync-6.0.0.tgz#1fd2cfd56ebb6250181114f0a581167099c2b28c" + integrity sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ== + dependencies: + graceful-fs "^4.1.11" + kleur@^3.0.3: version "3.0.3" resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e" @@ -6043,6 +6269,11 @@ memfs@^3.1.2, memfs@^3.4.3: dependencies: fs-monkey "^1.0.3" +"memoize-one@>=3.1.1 <6": + version "5.2.1" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e" + integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== + merge-descriptors@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61" @@ -6349,6 +6580,14 @@ onetime@^5.1.2: dependencies: mimic-fn "^2.1.0" +open@^7.4.2: + version "7.4.2" + resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321" + integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q== + dependencies: + is-docker "^2.0.0" + is-wsl "^2.1.1" + open@^8.0.9, open@^8.4.0: version "8.4.0" resolved "https://registry.yarnpkg.com/open/-/open-8.4.0.tgz#345321ae18f8138f82565a910fdc6b39e8c244f8" @@ -6382,6 +6621,11 @@ optionator@^0.9.1: type-check "^0.4.0" word-wrap "^1.2.3" +os-tmpdir@~1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274" + integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g== + p-limit@^2.0.0, p-limit@^2.2.0: version "2.3.0" resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1" @@ -6473,6 +6717,26 @@ pascal-case@^3.1.2: no-case "^3.0.4" tslib "^2.0.3" +patch-package@7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/patch-package/-/patch-package-7.0.0.tgz#5c646b6b4b4bf37e5184a6950777b21dea6bb66e" + integrity sha512-eYunHbnnB2ghjTNc5iL1Uo7TsGMuXk0vibX3RFcE/CdVdXzmdbMsG/4K4IgoSuIkLTI5oHrMQk4+NkFqSed0BQ== + dependencies: + "@yarnpkg/lockfile" "^1.1.0" + chalk "^4.1.2" + ci-info "^3.7.0" + cross-spawn "^7.0.3" + find-yarn-workspace-root "^2.0.0" + fs-extra "^9.0.0" + klaw-sync "^6.0.0" + minimist "^1.2.6" + open "^7.4.2" + rimraf "^2.6.3" + semver "^5.6.0" + slash "^2.0.0" + tmp "^0.0.33" + yaml "^2.2.2" + path-exists@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515" @@ -7384,6 +7648,19 @@ react-scripts@^5.0.1: optionalDependencies: fsevents "^2.3.2" +react-virtualized-auto-sizer@1.0.7: + version "1.0.7" + resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.7.tgz#bfb8414698ad1597912473de3e2e5f82180c1195" + integrity sha512-Mxi6lwOmjwIjC1X4gABXMJcKHsOo0xWl3E3ugOgufB8GJU+MqrtY35aBuvCYv/razQ1Vbp7h1gWJjGjoNN5pmA== + +react-window@1.8.7: + version "1.8.7" + resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.7.tgz#5e9fd0d23f48f432d7022cdb327219353a15f0d4" + integrity sha512-JHEZbPXBpKMmoNO1bNhoXOOLg/ujhL/BU4IqVU9r8eQPcy5KQnGHIHDRkJ0ns9IM5+Aq5LNwt3j8t3tIrePQzA== + dependencies: + "@babel/runtime" "^7.0.0" + memoize-one ">=3.1.1 <6" + react@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" @@ -7451,6 +7728,11 @@ regenerator-runtime@^0.13.10, regenerator-runtime@^0.13.9: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz#ed07b19616bcbec5da6274ebc75ae95634bfc2ee" integrity sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw== +regenerator-runtime@^0.14.0: + version "0.14.1" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f" + integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw== + regenerator-transform@^0.15.0: version "0.15.0" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537" @@ -7593,6 +7875,13 @@ reusify@^1.0.4: resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76" integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw== +rimraf@^2.6.3: + version "2.7.1" + resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec" + integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w== + dependencies: + glob "^7.1.3" + rimraf@^3.0.0, rimraf@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a" @@ -7729,6 +8018,11 @@ selfsigned@^2.1.1: dependencies: node-forge "^1" +semver@^5.6.0: + version "5.7.2" + resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8" + integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g== + semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0: version "6.3.1" resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" @@ -7848,6 +8142,11 @@ sisteransi@^1.0.5: resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed" integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg== +slash@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44" + integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A== + slash@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634" @@ -7899,6 +8198,11 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== +source-map@^0.5.7: + version "0.5.7" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" + integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ== + source-map@^0.7.3: version "0.7.4" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656" @@ -8124,6 +8428,11 @@ stylehacks@^5.1.1: browserslist "^4.21.4" postcss-selector-parser "^6.0.4" +stylis@4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51" + integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw== + supports-color@^5.3.0, supports-color@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" @@ -8200,6 +8509,11 @@ symbol-tree@^3.2.4: resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2" integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw== +tabbable@^6.0.1: + version "6.2.0" + resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97" + integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew== + tailwindcss@^3.0.2: version "3.2.4" resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.4.tgz#afe3477e7a19f3ceafb48e4b083e292ce0dc0250" @@ -8307,6 +8621,18 @@ thunky@^1.0.2: resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d" integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA== +tinycolor2@1.6.0: + version "1.6.0" + resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e" + integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw== + +tmp@^0.0.33: + version "0.0.33" + resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9" + integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw== + dependencies: + os-tmpdir "~1.0.2" + tmpl@1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc" @@ -8358,6 +8684,11 @@ tryer@^1.0.1: resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8" integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA== +ts-deepmerge@6.2.0: + version "6.2.0" + resolved "https://registry.yarnpkg.com/ts-deepmerge/-/ts-deepmerge-6.2.0.tgz#77554381a4884d66cab799470bc2620a1c9d84e8" + integrity sha512-2qxI/FZVDPbzh63GwWIZYE7daWKtwXZYuyc8YNq0iTmMUwn4mL0jRLsp6hfFlgbdRSR4x2ppe+E86FnvEpN7Nw== + tsconfig-paths@^3.14.1: version "3.14.1" resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a" @@ -8373,6 +8704,11 @@ tslib@^1.8.1: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== +tslib@^2.0.0: + version "2.6.2" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae" + integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== + tslib@^2.0.3: version "2.4.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e" @@ -8522,6 +8858,13 @@ url-parse@^1.5.3: querystringify "^2.1.1" requires-port "^1.0.0" +use-presence@1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/use-presence/-/use-presence-1.1.0.tgz#890b82e656f3a72fc15ee61be521ae1062afcedc" + integrity sha512-Tol+g7q81LLjhFMvrzhKXa4CCyZ0Tg4MRcPC2eSqdDLGQEA1MnjNc/jMFDKSB8CZDFchd7FOsq33glZyFX3zuw== + dependencies: + tslib "^2.0.0" + util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" @@ -9034,6 +9377,11 @@ yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2: resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b" integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg== +yaml@^2.2.2: + version "2.3.4" + resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.4.tgz#53fc1d514be80aabf386dc6001eb29bf3b7523b2" + integrity sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA== + yargs-parser@^20.2.2: version "20.2.9" resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee" From 1ebb1790ec05ce28c90023109e463fb27b2f3da7 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 9 Jan 2024 17:52:03 +0530 Subject: [PATCH 06/14] build(deps): bump follow-redirects in /packages/examples/basic (#1944) Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.3 to 1.15.4. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.3...v1.15.4) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- packages/examples/basic/yarn.lock | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/examples/basic/yarn.lock b/packages/examples/basic/yarn.lock index b30d7853397..ea3a13d7b0f 100644 --- a/packages/examples/basic/yarn.lock +++ b/packages/examples/basic/yarn.lock @@ -1785,7 +1785,7 @@ source-map "^0.7.3" "@razorpay/blade@file:../../blade": - version "10.20.1" + version "10.23.1" dependencies: "@babel/runtime" "7.20.0" "@emotion/react" "11.11.1" @@ -4744,9 +4744,9 @@ flatted@^3.2.9: integrity sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ== follow-redirects@^1.0.0: - version "1.15.3" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a" - integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q== + 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" From 56dec96a1803dc7013eb71067a9f6762e5151562 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 9 Jan 2024 17:52:18 +0530 Subject: [PATCH 07/14] build(deps): bump follow-redirects in /packages/blade-coverage-extension (#1943) Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.2 to 1.15.4. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.2...v1.15.4) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- packages/blade-coverage-extension/yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/blade-coverage-extension/yarn.lock b/packages/blade-coverage-extension/yarn.lock index f6a5404967d..d0cecef9a3a 100644 --- a/packages/blade-coverage-extension/yarn.lock +++ b/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" From 468fd1cfe6418ad4060bfb44200f66aa2410bc23 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 9 Jan 2024 17:52:35 +0530 Subject: [PATCH 08/14] build(deps): bump follow-redirects (#1942) Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.2 to 1.15.4. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.2...v1.15.4) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- packages/examples/with-multiple-theme-providers/yarn.lock | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/examples/with-multiple-theme-providers/yarn.lock b/packages/examples/with-multiple-theme-providers/yarn.lock index f4b0367c9f7..75fc189368a 100644 --- a/packages/examples/with-multiple-theme-providers/yarn.lock +++ b/packages/examples/with-multiple-theme-providers/yarn.lock @@ -1850,7 +1850,7 @@ source-map "^0.7.3" "@razorpay/blade@file:../../blade": - version "10.20.1" + version "10.23.1" dependencies: "@babel/runtime" "7.20.0" "@emotion/react" "11.11.1" @@ -4844,9 +4844,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" From d5f290bd154b2365d8e925782251bc3a43d3ee6e Mon Sep 17 00:00:00 2001 From: Kamlesh Chandnani Date: Wed, 10 Jan 2024 11:46:19 +0530 Subject: [PATCH 09/14] feat: setup interaction testing (#1895) Co-authored-by: Chaitanya Deorukhkar Co-authored-by: Nitin Kumar Co-authored-by: Nitin Kumar Co-authored-by: anuraghazra --- .github/workflows/blade-interaction-tests.yml | 37 + .github/workflows/blade-validate.yml | 2 +- .../react-native/storybook.requires.js | 189 ++- packages/blade/.storybook/react/main.ts | 1 + packages/blade/.storybook/react/preview.tsx | 16 +- packages/blade/package.json | 15 +- .../components/Carousel/Carousel.stories.tsx | 2 +- .../src/components/Carousel/Carousel.web.tsx | 41 +- .../__tests__/Carousel.test.stories.tsx | 205 +++ .../Carousel/__tests__/Carousel.web.test.tsx | 279 +--- .../__snapshots__/Carousel.web.test.tsx.snap | 58 +- .../AccessibilityInteropDemo.stories.tsx | 6 +- packages/blade/test-runner-jest.config.js | 31 + yarn.lock | 1474 ++++++++++++++++- 14 files changed, 1906 insertions(+), 450 deletions(-) create mode 100644 .github/workflows/blade-interaction-tests.yml create mode 100644 packages/blade/src/components/Carousel/__tests__/Carousel.test.stories.tsx create mode 100644 packages/blade/test-runner-jest.config.js diff --git a/.github/workflows/blade-interaction-tests.yml b/.github/workflows/blade-interaction-tests.yml new file mode 100644 index 00000000000..e1553cca858 --- /dev/null +++ b/.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 diff --git a/.github/workflows/blade-validate.yml b/.github/workflows/blade-validate.yml index a87d2048a53..35d1c959482 100644 --- a/.github/workflows/blade-validate.yml +++ b/.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: diff --git a/packages/blade/.storybook/react-native/storybook.requires.js b/packages/blade/.storybook/react-native/storybook.requires.js index b10be8d2338..343e22a6532 100644 --- a/packages/blade/.storybook/react-native/storybook.requires.js +++ b/packages/blade/.storybook/react-native/storybook.requires.js @@ -1,32 +1,37 @@ /* do not change this file, it is auto generated by storybook. */ -import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native'; +import { + configure, + addDecorator, + addParameters, + addArgsEnhancer, +} from "@storybook/react-native"; global.STORIES = [ { - titlePrefix: '', - directory: './src', - files: '**/!(_KitchenSink)*.stories.?(ts|tsx|js|jsx)', + titlePrefix: "", + directory: "./src", + files: "**/!(_KitchenSink)*.stories.?(ts|tsx|js|jsx)", importPathMatcher: - '^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?:(?!(?:_KitchenSink))[^/]*?)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$', + "^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?:(?!(?:_KitchenSink))[^/]*?)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$", }, { - titlePrefix: '', - directory: './src', - files: '**/*.stories.internal.?(ts|tsx|js|jsx)', + titlePrefix: "", + directory: "./src", + files: "**/*.stories.internal.?(ts|tsx|js|jsx)", importPathMatcher: - '^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.internal\\.(?:ts|tsx|js|jsx)?)$', + "^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.internal\\.(?:ts|tsx|js|jsx)?)$", }, ]; -import '@storybook/addon-ondevice-notes/register'; -import '@storybook/addon-ondevice-controls/register'; -import '@storybook/addon-ondevice-backgrounds/register'; -import '@storybook/addon-ondevice-actions/register'; +import "@storybook/addon-ondevice-notes/register"; +import "@storybook/addon-ondevice-controls/register"; +import "@storybook/addon-ondevice-backgrounds/register"; +import "@storybook/addon-ondevice-actions/register"; -import { argsEnhancers } from '@storybook/addon-actions/dist/preview'; +import { argsEnhancers } from "@storybook/addon-actions/dist/preview"; -import { decorators, parameters } from './preview'; +import { decorators, parameters } from "./preview"; if (decorators) { decorators.forEach((decorator) => addDecorator(decorator)); @@ -42,83 +47,83 @@ try { const getStories = () => { return { - './src/components/Accordion/Accordion.stories.tsx': require('../../src/components/Accordion/Accordion.stories.tsx'), - './src/components/ActionList/ActionList.stories.tsx': require('../../src/components/ActionList/ActionList.stories.tsx'), - './src/components/Alert/Alert.stories.tsx': require('../../src/components/Alert/Alert.stories.tsx'), - './src/components/Amount/Amount.stories.tsx': require('../../src/components/Amount/Amount.stories.tsx'), - './src/components/Badge/Badge.stories.tsx': require('../../src/components/Badge/Badge.stories.tsx'), - './src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx': require('../../src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx'), - './src/components/BottomSheet/BottomSheet.stories.tsx': require('../../src/components/BottomSheet/BottomSheet.stories.tsx'), - './src/components/Box/BaseBox/BaseBox.internal.stories.tsx': require('../../src/components/Box/BaseBox/BaseBox.internal.stories.tsx'), - './src/components/Box/Box.stories.tsx': require('../../src/components/Box/Box.stories.tsx'), - './src/components/Box/styledProps/StyledProps.stories.tsx': require('../../src/components/Box/styledProps/StyledProps.stories.tsx'), - './src/components/Button/BaseButton/BaseButton.internal.stories.tsx': require('../../src/components/Button/BaseButton/BaseButton.internal.stories.tsx'), - './src/components/Button/Button/Button.stories.tsx': require('../../src/components/Button/Button/Button.stories.tsx'), - './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/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'), - './src/components/Chip/Chip.stories.tsx': require('../../src/components/Chip/Chip.stories.tsx'), - './src/components/Chip/ChipGroup.stories.tsx': require('../../src/components/Chip/ChipGroup.stories.tsx'), - './src/components/Collapsible/Collapsible.stories.tsx': require('../../src/components/Collapsible/Collapsible.stories.tsx'), - './src/components/Counter/Counter.stories.tsx': require('../../src/components/Counter/Counter.stories.tsx'), - './src/components/Divider/Divider.stories.tsx': require('../../src/components/Divider/Divider.stories.tsx'), - './src/components/Dropdown/docs/DropdownWithAutoComplete.stories.tsx': require('../../src/components/Dropdown/docs/DropdownWithAutoComplete.stories.tsx'), - './src/components/Dropdown/docs/DropdownWithButton.stories.tsx': require('../../src/components/Dropdown/docs/DropdownWithButton.stories.tsx'), - './src/components/Dropdown/docs/DropdownWithSelect.stories.tsx': require('../../src/components/Dropdown/docs/DropdownWithSelect.stories.tsx'), - './src/components/Icons/Icons.stories.tsx': require('../../src/components/Icons/Icons.stories.tsx'), - './src/components/Indicator/Indicator.stories.tsx': require('../../src/components/Indicator/Indicator.stories.tsx'), - './src/components/Input/BaseInput/BaseInput.stories.tsx': require('../../src/components/Input/BaseInput/BaseInput.stories.tsx'), - './src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx': require('../../src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx'), - './src/components/Input/DropdownInputTriggers/SelectInput.stories.tsx': require('../../src/components/Input/DropdownInputTriggers/SelectInput.stories.tsx'), - './src/components/Input/OTPInput/OTPInput.stories.tsx': require('../../src/components/Input/OTPInput/OTPInput.stories.tsx'), - './src/components/Input/PasswordInput/PasswordInput.stories.tsx': require('../../src/components/Input/PasswordInput/PasswordInput.stories.tsx'), - './src/components/Input/TextArea/TextArea.stories.tsx': require('../../src/components/Input/TextArea/TextArea.stories.tsx'), - './src/components/Input/TextInput/TextInput.stories.tsx': require('../../src/components/Input/TextInput/TextInput.stories.tsx'), - './src/components/Link/BaseLink/BaseLink.stories.tsx': require('../../src/components/Link/BaseLink/BaseLink.stories.tsx'), - './src/components/Link/Link/Link.stories.tsx': require('../../src/components/Link/Link/Link.stories.tsx'), - './src/components/List/List.stories.tsx': require('../../src/components/List/List.stories.tsx'), - './src/components/Modal/docs/ModalExamples.stories.tsx': require('../../src/components/Modal/docs/ModalExamples.stories.tsx'), - './src/components/Modal/docs/SimpleModal.stories.tsx': require('../../src/components/Modal/docs/SimpleModal.stories.tsx'), - './src/components/Popover/Popover.stories.tsx': require('../../src/components/Popover/Popover.stories.tsx'), - './src/components/ProgressBar/ProgressBar.stories.tsx': require('../../src/components/ProgressBar/ProgressBar.stories.tsx'), - './src/components/Radio/Radio.stories.tsx': require('../../src/components/Radio/Radio.stories.tsx'), - './src/components/Skeleton/Skeleton.stories.tsx': require('../../src/components/Skeleton/Skeleton.stories.tsx'), - './src/components/SkipNav/SkipNav.stories.tsx': require('../../src/components/SkipNav/SkipNav.stories.tsx'), - './src/components/Spinner/BaseSpinner/BaseSpinner.stories.tsx': require('../../src/components/Spinner/BaseSpinner/BaseSpinner.stories.tsx'), - './src/components/Spinner/Spinner/Spinner.stories.tsx': require('../../src/components/Spinner/Spinner/Spinner.stories.tsx'), - './src/components/SpotlightPopoverTour/docs/Tour.stories.tsx': require('../../src/components/SpotlightPopoverTour/docs/Tour.stories.tsx'), - './src/components/Switch/Switch.stories.tsx': require('../../src/components/Switch/Switch.stories.tsx'), - './src/components/Table/docs/APIStories/TableAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableBodyAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableBodyAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableCellAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableCellAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableFooterAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableFooterAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableFooterCellAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableFooterCellAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableFooterRowAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableFooterRowAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableHeaderAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableHeaderAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableHeaderCellAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableHeaderCellAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableHeaderRowAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableHeaderRowAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TablePaginationAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TablePaginationAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableRowAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableRowAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableToolbarActionsAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableToolbarActionsAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableToolbarAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableToolbarAPI.stories.tsx'), - './src/components/Table/docs/BasicTable.stories.tsx': require('../../src/components/Table/docs/BasicTable.stories.tsx'), - './src/components/Table/docs/TableExamples.stories.tsx': require('../../src/components/Table/docs/TableExamples.stories.tsx'), - './src/components/Tabs/Tabs.stories.tsx': require('../../src/components/Tabs/Tabs.stories.tsx'), - './src/components/Tag/Tag.stories.tsx': require('../../src/components/Tag/Tag.stories.tsx'), - './src/components/Tooltip/Tooltip.stories.tsx': require('../../src/components/Tooltip/Tooltip.stories.tsx'), - './src/components/Typography/BaseText/BaseText.stories.tsx': require('../../src/components/Typography/BaseText/BaseText.stories.tsx'), - './src/components/Typography/Code/Code.stories.tsx': require('../../src/components/Typography/Code/Code.stories.tsx'), - './src/components/Typography/Display/Display.stories.tsx': require('../../src/components/Typography/Display/Display.stories.tsx'), - './src/components/Typography/Heading/Heading.stories.tsx': require('../../src/components/Typography/Heading/Heading.stories.tsx'), - './src/components/Typography/Text/Text.stories.tsx': require('../../src/components/Typography/Text/Text.stories.tsx'), - './src/components/Typography/Title/Title.stories.tsx': require('../../src/components/Typography/Title/Title.stories.tsx'), - './src/components/VisuallyHidden/VisuallyHidden.stories.tsx': require('../../src/components/VisuallyHidden/VisuallyHidden.stories.tsx'), - './src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.stories.tsx': require('../../src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.stories.tsx'), - './src/storybook-recipes/SimpleDashboard.stories.tsx': require('../../src/storybook-recipes/SimpleDashboard.stories.tsx'), - './src/storybook-recipes/SimpleForm.stories.tsx': require('../../src/storybook-recipes/SimpleForm.stories.tsx'), + "./src/components/Accordion/Accordion.stories.tsx": require("../../src/components/Accordion/Accordion.stories.tsx"), + "./src/components/ActionList/ActionList.stories.tsx": require("../../src/components/ActionList/ActionList.stories.tsx"), + "./src/components/Alert/Alert.stories.tsx": require("../../src/components/Alert/Alert.stories.tsx"), + "./src/components/Amount/Amount.stories.tsx": require("../../src/components/Amount/Amount.stories.tsx"), + "./src/components/Badge/Badge.stories.tsx": require("../../src/components/Badge/Badge.stories.tsx"), + "./src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx": require("../../src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx"), + "./src/components/BottomSheet/BottomSheet.stories.tsx": require("../../src/components/BottomSheet/BottomSheet.stories.tsx"), + "./src/components/Box/BaseBox/BaseBox.internal.stories.tsx": require("../../src/components/Box/BaseBox/BaseBox.internal.stories.tsx"), + "./src/components/Box/Box.stories.tsx": require("../../src/components/Box/Box.stories.tsx"), + "./src/components/Box/styledProps/StyledProps.stories.tsx": require("../../src/components/Box/styledProps/StyledProps.stories.tsx"), + "./src/components/Button/BaseButton/BaseButton.internal.stories.tsx": require("../../src/components/Button/BaseButton/BaseButton.internal.stories.tsx"), + "./src/components/Button/Button/Button.stories.tsx": require("../../src/components/Button/Button/Button.stories.tsx"), + "./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/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"), + "./src/components/Chip/Chip.stories.tsx": require("../../src/components/Chip/Chip.stories.tsx"), + "./src/components/Chip/ChipGroup.stories.tsx": require("../../src/components/Chip/ChipGroup.stories.tsx"), + "./src/components/Collapsible/Collapsible.stories.tsx": require("../../src/components/Collapsible/Collapsible.stories.tsx"), + "./src/components/Counter/Counter.stories.tsx": require("../../src/components/Counter/Counter.stories.tsx"), + "./src/components/Divider/Divider.stories.tsx": require("../../src/components/Divider/Divider.stories.tsx"), + "./src/components/Dropdown/docs/DropdownWithAutoComplete.stories.tsx": require("../../src/components/Dropdown/docs/DropdownWithAutoComplete.stories.tsx"), + "./src/components/Dropdown/docs/DropdownWithButton.stories.tsx": require("../../src/components/Dropdown/docs/DropdownWithButton.stories.tsx"), + "./src/components/Dropdown/docs/DropdownWithSelect.stories.tsx": require("../../src/components/Dropdown/docs/DropdownWithSelect.stories.tsx"), + "./src/components/Icons/Icons.stories.tsx": require("../../src/components/Icons/Icons.stories.tsx"), + "./src/components/Indicator/Indicator.stories.tsx": require("../../src/components/Indicator/Indicator.stories.tsx"), + "./src/components/Input/BaseInput/BaseInput.stories.tsx": require("../../src/components/Input/BaseInput/BaseInput.stories.tsx"), + "./src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx": require("../../src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx"), + "./src/components/Input/DropdownInputTriggers/SelectInput.stories.tsx": require("../../src/components/Input/DropdownInputTriggers/SelectInput.stories.tsx"), + "./src/components/Input/OTPInput/OTPInput.stories.tsx": require("../../src/components/Input/OTPInput/OTPInput.stories.tsx"), + "./src/components/Input/PasswordInput/PasswordInput.stories.tsx": require("../../src/components/Input/PasswordInput/PasswordInput.stories.tsx"), + "./src/components/Input/TextArea/TextArea.stories.tsx": require("../../src/components/Input/TextArea/TextArea.stories.tsx"), + "./src/components/Input/TextInput/TextInput.stories.tsx": require("../../src/components/Input/TextInput/TextInput.stories.tsx"), + "./src/components/Link/BaseLink/BaseLink.stories.tsx": require("../../src/components/Link/BaseLink/BaseLink.stories.tsx"), + "./src/components/Link/Link/Link.stories.tsx": require("../../src/components/Link/Link/Link.stories.tsx"), + "./src/components/List/List.stories.tsx": require("../../src/components/List/List.stories.tsx"), + "./src/components/Modal/docs/ModalExamples.stories.tsx": require("../../src/components/Modal/docs/ModalExamples.stories.tsx"), + "./src/components/Modal/docs/SimpleModal.stories.tsx": require("../../src/components/Modal/docs/SimpleModal.stories.tsx"), + "./src/components/Popover/Popover.stories.tsx": require("../../src/components/Popover/Popover.stories.tsx"), + "./src/components/ProgressBar/ProgressBar.stories.tsx": require("../../src/components/ProgressBar/ProgressBar.stories.tsx"), + "./src/components/Radio/Radio.stories.tsx": require("../../src/components/Radio/Radio.stories.tsx"), + "./src/components/Skeleton/Skeleton.stories.tsx": require("../../src/components/Skeleton/Skeleton.stories.tsx"), + "./src/components/SkipNav/SkipNav.stories.tsx": require("../../src/components/SkipNav/SkipNav.stories.tsx"), + "./src/components/Spinner/BaseSpinner/BaseSpinner.stories.tsx": require("../../src/components/Spinner/BaseSpinner/BaseSpinner.stories.tsx"), + "./src/components/Spinner/Spinner/Spinner.stories.tsx": require("../../src/components/Spinner/Spinner/Spinner.stories.tsx"), + "./src/components/SpotlightPopoverTour/docs/Tour.stories.tsx": require("../../src/components/SpotlightPopoverTour/docs/Tour.stories.tsx"), + "./src/components/Switch/Switch.stories.tsx": require("../../src/components/Switch/Switch.stories.tsx"), + "./src/components/Table/docs/APIStories/TableAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableBodyAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableBodyAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableCellAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableCellAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableFooterAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableFooterAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableFooterCellAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableFooterCellAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableFooterRowAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableFooterRowAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableHeaderAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableHeaderAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableHeaderCellAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableHeaderCellAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableHeaderRowAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableHeaderRowAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TablePaginationAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TablePaginationAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableRowAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableRowAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableToolbarActionsAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableToolbarActionsAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableToolbarAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableToolbarAPI.stories.tsx"), + "./src/components/Table/docs/BasicTable.stories.tsx": require("../../src/components/Table/docs/BasicTable.stories.tsx"), + "./src/components/Table/docs/TableExamples.stories.tsx": require("../../src/components/Table/docs/TableExamples.stories.tsx"), + "./src/components/Tabs/Tabs.stories.tsx": require("../../src/components/Tabs/Tabs.stories.tsx"), + "./src/components/Tag/Tag.stories.tsx": require("../../src/components/Tag/Tag.stories.tsx"), + "./src/components/Tooltip/Tooltip.stories.tsx": require("../../src/components/Tooltip/Tooltip.stories.tsx"), + "./src/components/Typography/BaseText/BaseText.stories.tsx": require("../../src/components/Typography/BaseText/BaseText.stories.tsx"), + "./src/components/Typography/Code/Code.stories.tsx": require("../../src/components/Typography/Code/Code.stories.tsx"), + "./src/components/Typography/Display/Display.stories.tsx": require("../../src/components/Typography/Display/Display.stories.tsx"), + "./src/components/Typography/Heading/Heading.stories.tsx": require("../../src/components/Typography/Heading/Heading.stories.tsx"), + "./src/components/Typography/Text/Text.stories.tsx": require("../../src/components/Typography/Text/Text.stories.tsx"), + "./src/components/Typography/Title/Title.stories.tsx": require("../../src/components/Typography/Title/Title.stories.tsx"), + "./src/components/VisuallyHidden/VisuallyHidden.stories.tsx": require("../../src/components/VisuallyHidden/VisuallyHidden.stories.tsx"), + "./src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.stories.tsx": require("../../src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.stories.tsx"), + "./src/storybook-recipes/SimpleDashboard.stories.tsx": require("../../src/storybook-recipes/SimpleDashboard.stories.tsx"), + "./src/storybook-recipes/SimpleForm.stories.tsx": require("../../src/storybook-recipes/SimpleForm.stories.tsx"), }; }; diff --git a/packages/blade/.storybook/react/main.ts b/packages/blade/.storybook/react/main.ts index 7460200550f..f108ec91156 100644 --- a/packages/blade/.storybook/react/main.ts +++ b/packages/blade/.storybook/react/main.ts @@ -29,6 +29,7 @@ const config: StorybookConfig = { '@storybook/addon-docs', '@storybook/addon-a11y', '@storybook/preset-create-react-app', + '@storybook/addon-interactions' ], framework: { name: '@storybook/react-webpack5', diff --git a/packages/blade/.storybook/react/preview.tsx b/packages/blade/.storybook/react/preview.tsx index 7087b0a4e64..4072bac8c8d 100644 --- a/packages/blade/.storybook/react/preview.tsx +++ b/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', ], }, diff --git a/packages/blade/package.json b/packages/blade/package.json index 93aad2824e1..82770302dfe 100644 --- a/packages/blade/package.json +++ b/packages/blade/package.json @@ -105,8 +105,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", @@ -135,6 +139,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", diff --git a/packages/blade/src/components/Carousel/Carousel.stories.tsx b/packages/blade/src/components/Carousel/Carousel.stories.tsx index c388c02f325..a1fd743830e 100644 --- a/packages/blade/src/components/Carousel/Carousel.stories.tsx +++ b/packages/blade/src/components/Carousel/Carousel.stories.tsx @@ -255,7 +255,7 @@ const TestimonialCard = ({ ); }; -const CarouselExample = (props: Omit): React.ReactElement => { +export const CarouselExample = (props: Omit): React.ReactElement => { const key = `${props.visibleItems}-${props.shouldAddStartEndSpacing}`; return ( diff --git a/packages/blade/src/components/Carousel/Carousel.web.tsx b/packages/blade/src/components/Carousel/Carousel.web.tsx index 20e5af048b4..2384872bad4 100644 --- a/packages/blade/src/components/Carousel/Carousel.web.tsx +++ b/packages/blade/src/components/Carousel/Carousel.web.tsx @@ -13,18 +13,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< @@ -223,6 +223,29 @@ const CarouselBody = React.forwardRef( }, ); +/** + * 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( + effect: React.EffectCallback, + stateToSyncWith: T, + deps: React.DependencyList, +) { + const isFirst = useFirstRender(); + const prevState = usePrevious(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, @@ -450,9 +473,13 @@ const Carousel = ({ shouldAddStartEndSpacing, ]); - useDidUpdate(() => { - onChange?.(activeSlide); - }, [activeSlide, onChange]); + useSyncUpdateEffect( + () => { + onChange?.(activeSlide); + }, + activeSlide, + [onChange], + ); return ( diff --git a/packages/blade/src/components/Carousel/__tests__/Carousel.test.stories.tsx b/packages/blade/src/components/Carousel/__tests__/Carousel.test.stories.tsx new file mode 100644 index 00000000000..692fdc4d13f --- /dev/null +++ b/packages/blade/src/components/Carousel/__tests__/Carousel.test.stories.tsx @@ -0,0 +1,205 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import type { StoryFn } from '@storybook/react'; +import { within, userEvent } from '@storybook/testing-library'; +import { expect, jest } from '@storybook/jest'; +import type { Mock } from 'jest-mock'; +import React from 'react'; +import type { CarouselProps } from '../'; +import { Carousel as CarouselComponent } from '../'; +import { CarouselExample } from '../Carousel.stories'; +import { Box } from '~components/Box'; + +const sleep = (ms: number): Promise => new Promise((resolve) => setTimeout(resolve, ms)); + +let onChange: Mock | null = null; + +const BasicCarousel = (props: CarouselProps): React.ReactElement => ( + + + +); + +export const TestCarouselOnChange: StoryFn = ( + props, +): React.ReactElement => { + onChange = jest.fn(); + return ; +}; + +TestCarouselOnChange.play = async ({ canvasElement }) => { + const { getByRole, getByText } = within(canvasElement); + const nextButton = getByRole('button', { name: 'Next Slide' }); + const previousButton = getByRole('button', { name: 'Previous Slide' }); + await userEvent.click(nextButton); + await sleep(1000); + await expect(onChange).toBeCalledWith(1); + await userEvent.click(previousButton); + await sleep(1000); + await expect(onChange).toBeCalledWith(0); + getByText(/Single Flow To Collect And Disburse Payments/)?.scrollIntoView({ behavior: 'smooth' }); + await sleep(1000); + await expect(onChange).toBeCalledWith(3); + await expect(onChange).toBeCalledTimes(3); +}; + +export const TestIndicatorButton: StoryFn = ( + props, +): React.ReactElement => { + onChange = jest.fn(); + return ; +}; + +TestIndicatorButton.play = async ({ canvasElement }) => { + const { getByLabelText } = within(canvasElement); + const indicatorButton = getByLabelText('Slide 7'); + await userEvent.click(indicatorButton); + await sleep(1000); + await expect(onChange).toBeCalledWith(6); + await expect(onChange).toBeCalledTimes(1); +}; + +export const TestStartOverAfterStartEnd: StoryFn = ( + props, +): React.ReactElement => { + onChange = jest.fn(); + return ; +}; + +TestStartOverAfterStartEnd.play = async ({ canvasElement }) => { + const { getByRole } = within(canvasElement); + const nextButton = getByRole('button', { name: 'Next Slide' }); + const previousButton = getByRole('button', { name: 'Previous Slide' }); + await userEvent.click(previousButton); + await sleep(1000); + await expect(onChange).toBeCalledWith(6); + await userEvent.click(nextButton); + await sleep(1000); + await expect(onChange).toBeCalledWith(0); + await expect(onChange).toBeCalledTimes(2); +}; + +export const TestAutoPlay: StoryFn = (props): React.ReactElement => { + onChange = jest.fn(); + return ; +}; + +TestAutoPlay.play = async ({ canvasElement }) => { + const { getByRole } = within(canvasElement); + await sleep(8000); + await expect(onChange).toBeCalledWith(1); + await expect(getByRole('tab', { selected: true })).toHaveAccessibleName('Slide 3'); + await expect(onChange).toBeCalledTimes(1); +}; + +export const TestAutofit: StoryFn = (props): React.ReactElement => { + onChange = jest.fn(); + return ( + + ); +}; + +TestAutofit.play = async ({ canvasElement }) => { + await sleep(1000); + const { getByLabelText, queryByRole } = within(canvasElement); + const lastIndicatorButton = getByLabelText('Slide 7'); + await expect(onChange).not.toBeCalled(); + await userEvent.click(lastIndicatorButton); + await sleep(1000); + const nextButton = queryByRole('button', { name: 'Next Slide' }); + await expect(nextButton).toBeNull(); + const firstIndicatorButton = getByLabelText('Slide 1'); + await userEvent.click(firstIndicatorButton); + await sleep(1000); + const previousButton = queryByRole('button', { name: 'Previous Slide' }); + await expect(previousButton).toBeNull(); + await expect(onChange).toBeCalledTimes(2); +}; + +export const TestAutoPlayPause: StoryFn = (props): React.ReactElement => { + onChange = jest.fn(); + return ; +}; + +TestAutoPlayPause.play = async ({ canvasElement }) => { + const { getByText } = within(canvasElement); + const slide = getByText(/Acquire Customers From New Customer Segments/); + await userEvent.hover(slide); + await sleep(7000); + await expect(onChange).not.toHaveBeenCalled(); +}; + +export const TestVisibleItemsOnMobile: StoryFn = ( + props, +): React.ReactElement => { + onChange = jest.fn(); + return ; +}; + +TestVisibleItemsOnMobile.parameters = { + viewport: { + defaultViewport: 'iPhone6', + }, +}; + +TestVisibleItemsOnMobile.play = async ({ canvasElement }) => { + // on mobile regardless of the visible items prop we always show 1 item + const { getByRole } = within(canvasElement); + const nextButton = getByRole('button', { name: 'Next Slide' }); + await userEvent.click(nextButton); + await sleep(1000); + await expect(onChange).toBeCalledWith(1); +}; + +// Test for onChange fires multiple times on parent component update +// https://github.com/razorpay/blade/issues/1863 +const multipleOnChange = jest.fn(); +export const TestOnChangeParentUpdate: StoryFn = ( + props, +): React.ReactElement => { + const [, setCount] = React.useState(0); + + React.useEffect(() => { + const intervalId = setInterval(() => { + setCount((prev) => prev++); + }, 100); + + return () => clearInterval(intervalId); + }, []); + + return ; +}; + +TestOnChangeParentUpdate.play = async ({ canvasElement }) => { + const { getByRole } = within(canvasElement); + await expect(multipleOnChange).not.toBeCalled(); + const nextButton = getByRole('button', { name: 'Next Slide' }); + const previousButton = getByRole('button', { name: 'Previous Slide' }); + await userEvent.click(nextButton); + await sleep(1000); + await expect(multipleOnChange).toBeCalledWith(1); + await userEvent.click(previousButton); + await sleep(1000); + await expect(multipleOnChange).toBeCalledWith(0); + await expect(multipleOnChange).toBeCalledTimes(2); +}; + +export default { + title: 'Components/Interaction Tests/Carousel', + component: CarouselComponent, + parameters: { + controls: { + disable: true, + }, + a11y: { disable: true }, + essentials: { disable: true }, + actions: { disable: true }, + }, +}; diff --git a/packages/blade/src/components/Carousel/__tests__/Carousel.web.test.tsx b/packages/blade/src/components/Carousel/__tests__/Carousel.web.test.tsx index d5456886606..be99c081557 100644 --- a/packages/blade/src/components/Carousel/__tests__/Carousel.web.test.tsx +++ b/packages/blade/src/components/Carousel/__tests__/Carousel.web.test.tsx @@ -1,6 +1,5 @@ /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */ /* eslint-disable @typescript-eslint/require-await */ -import { fireEvent, act } from '@testing-library/react'; import { mockViewport } from 'jsdom-testing-mocks'; import { Carousel } from '../Carousel'; import { CarouselItem } from '../CarouselItem'; @@ -43,107 +42,9 @@ afterAll(() => { }); describe('', () => { - it('should go to next/previous slide', () => { + it('should render number of indicators basis visibleItems prop', () => { const onChange = jest.fn(); - const { getByRole, queryAllByRole, queryAllByTestId } = renderWithTheme( - - - - - - - - - - - - - - , - ); - expect(queryAllByTestId('active-slide')[0]).toHaveTextContent('0'); - - const nextButton = getByRole('button', { name: 'Next Slide' }); - const previousButton = getByRole('button', { name: 'Previous Slide' }); - fireEvent.click(nextButton); - fireEvent.click(nextButton); - - expect(nextButton).toBeInTheDocument(); - expect(previousButton).toBeInTheDocument(); - - expect(onChange).toHaveBeenLastCalledWith(2); - - fireEvent.click(previousButton); - fireEvent.click(previousButton); - - expect(onChange).toHaveBeenLastCalledWith(0); - - expect(queryAllByRole('tab').length).toBe(4); - expect(onChange).toBeCalledTimes(4); - }); - - it('should go to specific slide when clicking on indicator button', () => { - const onChange = jest.fn(); - const { getByRole, queryAllByTestId } = renderWithTheme( - - - - - - - - - - - - - - , - ); - expect(queryAllByTestId('active-slide')[0]).toHaveTextContent('0'); - - const indicatorButton = getByRole('tab', { name: 'Slide 3' }); - fireEvent.click(indicatorButton); - - expect(onChange).toHaveBeenLastCalledWith(2); - expect(onChange).toBeCalledTimes(1); - }); - - it('should wrap around when reaching start or end slide', () => { - const onChange = jest.fn(); - const { getByRole, queryAllByTestId } = renderWithTheme( - - - - - - - - - - - - - - , - ); - expect(queryAllByTestId('active-slide')[0]).toHaveTextContent('0'); - - const nextButton = getByRole('button', { name: 'Next Slide' }); - const previousButton = getByRole('button', { name: 'Previous Slide' }); - fireEvent.click(previousButton); - - expect(onChange).toHaveBeenLastCalledWith(3); - - fireEvent.click(nextButton); - expect(onChange).toHaveBeenLastCalledWith(0); - - expect(onChange).toBeCalledTimes(2); - }); - - it('should work with visibleItems prop', () => { - const onChange = jest.fn(); - const { getByRole, queryAllByRole, queryAllByTestId } = renderWithTheme( + const { queryAllByRole, queryAllByTestId } = renderWithTheme( @@ -164,183 +65,8 @@ describe('', () => { ); expect(queryAllByTestId('active-slide')[0]).toHaveTextContent('0'); - const nextButton = getByRole('button', { name: 'Next Slide' }); - const previousButton = getByRole('button', { name: 'Previous Slide' }); - fireEvent.click(nextButton); - - expect(onChange).toHaveBeenLastCalledWith(1); - - fireEvent.click(previousButton); - - expect(onChange).toHaveBeenLastCalledWith(0); - // assert indicator button count expect(queryAllByRole('tab').length).toBe(3); - expect(onChange).toBeCalledTimes(2); - }); - - it('should auto play', async () => { - jest.useFakeTimers(); - const onChange = jest.fn(); - const { queryAllByTestId } = renderWithTheme( - - - - - - - - - - - , - ); - expect(queryAllByTestId('active-slide')[0]).toHaveTextContent('0'); - - await act(async () => { - jest.advanceTimersByTime(6000); - }); - - expect(onChange).toHaveBeenLastCalledWith(1); - - await act(async () => { - jest.advanceTimersByTime(6000); - }); - - expect(onChange).toHaveBeenLastCalledWith(2); - - await act(async () => { - jest.advanceTimersByTime(6000); - }); - - expect(onChange).toHaveBeenLastCalledWith(0); - expect(onChange).toBeCalledTimes(3); - }); - - it('should not auto play when mouse is over', async () => { - jest.useFakeTimers(); - const onChange = jest.fn(); - const { getByLabelText, queryAllByTestId } = renderWithTheme( - - - - - - - - - - - , - ); - expect(queryAllByTestId('active-slide')[0]).toHaveTextContent('0'); - - await act(async () => { - jest.advanceTimersByTime(6000); - }); - - expect(onChange).toHaveBeenLastCalledWith(1); - - // hover over carousel - fireEvent.mouseEnter(getByLabelText('My Carousel')); - - await act(async () => { - jest.advanceTimersByTime(6000); - }); - - expect(onChange).toHaveBeenLastCalledWith(1); - - // hover out of carousel - fireEvent.mouseLeave(getByLabelText('My Carousel')); - - await act(async () => { - jest.advanceTimersByTime(6000); - }); - - expect(onChange).toHaveBeenLastCalledWith(2); - expect(onChange).toBeCalledTimes(2); - }); - - it('should not auto play when focus is inside carousel', async () => { - jest.useFakeTimers(); - const onChange = jest.fn(); - const { getByLabelText } = renderWithTheme( - - - - - - - - - - - , - ); - - await act(async () => { - jest.advanceTimersByTime(6000); - }); - - expect(onChange).toHaveBeenLastCalledWith(1); - - // hover over carousel - fireEvent.focusIn(getByLabelText('My Carousel')); - - await act(async () => { - jest.advanceTimersByTime(6000); - }); - - expect(onChange).toHaveBeenLastCalledWith(1); - - // hover out of carousel - fireEvent.focusOut(getByLabelText('My Carousel')); - - await act(async () => { - jest.advanceTimersByTime(6000); - }); - - expect(onChange).toHaveBeenLastCalledWith(2); - expect(onChange).toBeCalledTimes(2); - }); - - test('when visibleItems:autofit & navigationButtonPosition:side then next / previous buttons should be removed on reaching start/end slide', () => { - const onChange = jest.fn(); - const { queryByRole, queryAllByTestId } = renderWithTheme( - - - - - - - - - - - - - - , - ); - expect(queryAllByTestId('active-slide')[0]).toHaveTextContent('0'); - - const nextButton = queryByRole('button', { name: 'Next Slide' }); - - expect(queryByRole('button', { name: 'Next Slide' })).toBeInTheDocument(); - expect(queryByRole('button', { name: 'Previous Slide' })).not.toBeInTheDocument(); - - fireEvent.click(nextButton!); - - expect(onChange).toHaveBeenLastCalledWith(1); - - fireEvent.click(nextButton!); - fireEvent.click(nextButton!); - - expect(onChange).toHaveBeenLastCalledWith(3); - - expect(queryByRole('button', { name: 'Next Slide' })).not.toBeInTheDocument(); - expect(queryByRole('button', { name: 'Previous Slide' })).toBeInTheDocument(); - expect(onChange).toBeCalledTimes(3); }); test('when visibleItems:autofit & shouldAddStartEndSpacing is undefined then we hide the indicators since they are unnecessary', () => { @@ -451,6 +177,7 @@ describe('Carousel Snapshots', () => { expect(container).toMatchSnapshot(); }); + // add this it('should not render overlay on mobile devices', () => { const viewport = mockViewport({ width: '320px', height: '568px' }); diff --git a/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.web.test.tsx.snap b/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.web.test.tsx.snap index 408502c57b7..382ffedfdc7 100644 --- a/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.web.test.tsx.snap +++ b/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.web.test.tsx.snap @@ -290,7 +290,7 @@ exports[`Carousel Snapshots should not render overlay on mobile devices 1`] = ` class=" c4" data-blade-component="base-box" data-slide-index="0" - id="carousel-52-carousel-item-0" + id="carousel-15-carousel-item-0" role="tabpanel" >
@@ -307,7 +307,7 @@ exports[`Carousel Snapshots should not render overlay on mobile devices 1`] = ` class=" c4" data-blade-component="base-box" data-slide-index="1" - id="carousel-52-carousel-item-1" + id="carousel-15-carousel-item-1" role="tabpanel" >
@@ -358,7 +358,7 @@ exports[`Carousel Snapshots should not render overlay on mobile devices 1`] = ` role="tablist" >