diff --git a/.github/workflows/test-storybook.yml b/.github/workflows/test-storybook.yml new file mode 100644 index 000000000000..20081135e454 --- /dev/null +++ b/.github/workflows/test-storybook.yml @@ -0,0 +1,55 @@ +name: "Storybook Tests" + +on: + push: + branches: + - release + paths: + - "app/client/packages/design-system/**" + - "app/client/packages/storybook/**" + pull_request: + paths: + - "app/client/packages/design-system/**" + - "app/client/packages/storybook/**" + +jobs: + storybook-tests: + runs-on: ubuntu-latest + + steps: + - name: Checkout PR if pull_request event + if: github.event_name == 'pull_request' + uses: actions/checkout@v4 + with: + fetch-depth: 0 + ref: refs/pull/${{ github.event.pull_request.number }}/merge + + - name: Checkout PR if push event + if: github.event_name == 'push' + uses: actions/checkout@v4 + with: + fetch-depth: 0 + ref: release + + - name: Use Node.js + uses: actions/setup-node@v4 + with: + node-version-file: app/client/package.json + + - name: Install Dependencies + working-directory: ./app/client/packages/storybook + run: yarn install --immutable + + - name: Storybook Tests + id: Test Storybook + uses: actions/setup-node@v4 + with: + node-version-file: app/client/package.json + + - name: Install Playwright + run: npx playwright install --with-deps + + - name: Serve Storybook and run tests + with: + workingDir: ./app/client/packages/storybook + buildScriptName: "test-storybook:ci" diff --git a/app/client/jest.config.js b/app/client/jest.config.js index 60c7831dc909..e8158a237aec 100644 --- a/app/client/jest.config.js +++ b/app/client/jest.config.js @@ -28,13 +28,13 @@ module.exports = { "^!!raw-loader!": "/test/__mocks__/derivedMock.js", "test/(.*)": "/test/$1", "@appsmith/(.*)": "/src/ee/$1", - "design-system-old": "/node_modules/design-system-old/build", + "design-system-old": "/node_modules/design-system-old", "@design-system/widgets-old": "/node_modules/@design-system/widgets-old", "@design-system/widgets": "/node_modules/@design-system/widgets", "@design-system/headless": "/node_modules/@design-system/headless", "@design-system/theming": "/node_modules/@design-system/theming", - "design-system": "/node_modules/design-system/build", + "design-system": "/node_modules/design-system", "^proxy-memoize$": "/node_modules/proxy-memoize/dist/wrapper.cjs", // @blueprintjs packages need to be resolved to the `esnext` directory. The default `esm` directory // contains sources that are transpiled to ES5. As Jest does not transpile our sources to ES5, @@ -51,7 +51,7 @@ module.exports = { "/node_modules/@blueprintjs/popover2/lib/esnext", "^@blueprintjs/select$": "/node_modules/@blueprintjs/select/lib/esnext", - "design-system": "/node_modules/design-system/build", + "design-system": "/node_modules/design-system", "^canvas$": "jest-canvas-mock", }, globals: { @@ -89,7 +89,7 @@ module.exports = { browserAgentlicenseKey: parseConfig( "__APPSMITH_NEW_RELIC_BROWSER_AGENT_LICENSE_KEY__", ), - browserAgentEndpoint: parseConfig( + browserAgentEndpoint: parseConfig( "__APPSMITH_NEW_RELIC_BROWSER_AGENT_ENDPOINT__", ), otlpLicenseKey: parseConfig("__APPSMITH_NEW_RELIC_OTLP_LICENSE_KEY__"), diff --git a/app/client/package.json b/app/client/package.json index 790f453d7328..9897d5df8d7c 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -121,8 +121,8 @@ "d3-geo": "^3.1.0", "dayjs": "^1.10.6", "deep-diff": "^1.0.2", - "design-system": "npm:@appsmithorg/design-system@2.1.43", - "design-system-old": "npm:@appsmithorg/design-system-old@1.1.17", + "design-system": "workspace:^", + "design-system-old": "workspace:^", "downloadjs": "^1.4.7", "echarts": "^5.4.2", "fast-deep-equal": "^3.1.3", diff --git a/app/client/packages/design-system/ads-old/.eslintrc.json b/app/client/packages/design-system/ads-old/.eslintrc.json new file mode 100644 index 000000000000..05b2d31547de --- /dev/null +++ b/app/client/packages/design-system/ads-old/.eslintrc.json @@ -0,0 +1,18 @@ +{ + "extends": ["../../../.eslintrc.base.json", "plugin:storybook/recommended"], + "rules": { + "@typescript-eslint/strict-boolean-expressions": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/prefer-nullish-coalescing": "off", + "testing-library/no-node-access": "off", + "testing-library/await-async-queries": "off" + }, + "overrides": [ + { + "files": ["**/*.stories.*"], + "rules": { + "import/no-anonymous-default-export": "off" + } + } + ] +} diff --git a/app/client/packages/design-system/ads-old/.prettierignore b/app/client/packages/design-system/ads-old/.prettierignore new file mode 100644 index 000000000000..b0d121a62171 --- /dev/null +++ b/app/client/packages/design-system/ads-old/.prettierignore @@ -0,0 +1,3 @@ +Component-Migration-Checklist.md +CONTRIBUTING.md +README.md diff --git a/app/client/packages/design-system/ads-old/CHANGELOG.md b/app/client/packages/design-system/ads-old/CHANGELOG.md new file mode 100644 index 000000000000..bd3b3d496095 --- /dev/null +++ b/app/client/packages/design-system/ads-old/CHANGELOG.md @@ -0,0 +1,583 @@ +# @appsmithorg/design-system + +## 1.1.17 + +### Patch Changes + +- [#731](https://github.com/appsmithorg/design-system/pull/731) [`b843c841`](https://github.com/appsmithorg/design-system/commit/b843c84119b8a078109f232d1edfe59e5f42226f) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Added PT root UI font + +## 1.1.16 + +### Patch Changes + +- [#715](https://github.com/appsmithorg/design-system/pull/715) [`aa7aa940`](https://github.com/appsmithorg/design-system/commit/aa7aa940d0a3f2cea714343f3dd6b09ffa418adf) Thanks [@ayushpahwa](https://github.com/ayushpahwa)! - feat: new workflow icons + +## 1.1.15 + +### Patch Changes + +- [#711](https://github.com/appsmithorg/design-system/pull/711) [`cffe9497`](https://github.com/appsmithorg/design-system/commit/cffe94977c664efbf3465aff8545d30e5384a606) Thanks [@ayushpahwa](https://github.com/ayushpahwa)! - feat: Added new workflows icon + +## 1.1.14 + +### Patch Changes + +- [#667](https://github.com/appsmithorg/design-system/pull/667) [`a684a4e7`](https://github.com/appsmithorg/design-system/commit/a684a4e7d4e40d614418434ed51ec578855468a2) Thanks [@ankitakinger](https://github.com/ankitakinger)! - chore: Adding icons in AppIcon component and Icon provider + +## 1.1.13 + +### Patch Changes + +- [#660](https://github.com/appsmithorg/design-system/pull/660) [`e455013f`](https://github.com/appsmithorg/design-system/commit/e455013ff31f941e2de126bba0d6d84c06a73722) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: Added z-index for table head + +## 1.1.12 + +### Patch Changes + +- [#642](https://github.com/appsmithorg/design-system/pull/642) [`c2eadd2a`](https://github.com/appsmithorg/design-system/commit/c2eadd2aaf9265e3f1e3e5783b17dc956a9c9e7b) Thanks [@ankitakinger](https://github.com/ankitakinger)! - fix: Updating the value of tag input to the original value, when the form is reset + +## 1.1.11 + +### Patch Changes + +- [#514](https://github.com/appsmithorg/design-system/pull/514) [`185c6272`](https://github.com/appsmithorg/design-system/commit/185c627221478a13a240219c432b1c885c5bc095) Thanks [@iamakulov](https://github.com/iamakulov)! - perf(DisplayImageUpload): code-split Uppy away + +## 1.1.10 + +### Patch Changes + +- [#502](https://github.com/appsmithorg/design-system/pull/502) [`7eac4f78`](https://github.com/appsmithorg/design-system/commit/7eac4f78df1f0adba5e062b5ed76e2dd6fb7ec14) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - fix: old gray in gif player, alignment in error message for editable text + +## 1.1.9 + +### Patch Changes + +- [#497](https://github.com/appsmithorg/design-system/pull/497) [`2e722d54`](https://github.com/appsmithorg/design-system/commit/2e722d548376bd97ddbed8dcab5a7ed4291f34b1) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - fix: remove editable text backgroudn color on error, change saving icon + +## 1.1.8 + +### Patch Changes + +- [#479](https://github.com/appsmithorg/design-system/pull/479) [`c2c09b6c`](https://github.com/appsmithorg/design-system/commit/c2c09b6c7e6bb674c97b4613d87e359054dd98a8) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - fixes for - old toast, datepicker + Added new icons for layout and js file + +## 1.1.7 + +### Patch Changes + +- [#473](https://github.com/appsmithorg/design-system/pull/473) [`6bc83fd4`](https://github.com/appsmithorg/design-system/commit/6bc83fd4b9f813a23ce062459b9761fc27f9be80) Thanks [@ankitakinger](https://github.com/ankitakinger)! - fix: Adding default type for button + +* [#452](https://github.com/appsmithorg/design-system/pull/452) [`0db333d2`](https://github.com/appsmithorg/design-system/commit/0db333d2bd1b0aca1f07120f61d77b2ee6b656bd) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - fix: issues with components + +- [#474](https://github.com/appsmithorg/design-system/pull/474) [`292c0168`](https://github.com/appsmithorg/design-system/commit/292c01685aac90a16ab7d95674e1247d3647b59f) Thanks [@ankitakinger](https://github.com/ankitakinger)! - fix: Updating CSS for tooltip to fix position shift issue + +## 1.1.6 + +### Patch Changes + +- [#466](https://github.com/appsmithorg/design-system/pull/466) [`794f978`](https://github.com/appsmithorg/design-system/commit/794f9783403d105a71c75e3c49f6df7457351331) Thanks [@eco-monk](https://github.com/eco-monk)! - fix: add mime types to file upload + +* [#468](https://github.com/appsmithorg/design-system/pull/468) [`74cd9da`](https://github.com/appsmithorg/design-system/commit/74cd9da4c22565ad93292dc371d91cfb85102df3) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: icon not rendering in all icons page + +## 1.1.5 + +### Patch Changes + +- [#462](https://github.com/appsmithorg/design-system/pull/462) [`37d65c5`](https://github.com/appsmithorg/design-system/commit/37d65c5eae3f01aad126a5cd7664cf8fedb10896) Thanks [@berzerkeer](https://github.com/berzerkeer)! - chore: give control to user to enable/disable uppy informer + +## 1.1.4 + +### Patch Changes + +- [#445](https://github.com/appsmithorg/design-system/pull/445) [`8d3ef64`](https://github.com/appsmithorg/design-system/commit/8d3ef64c4b266569d8b837bc69da255987716e1f) Thanks [@ankitakinger](https://github.com/ankitakinger)! - fix: Adding autoResetExpanded to the table component for avoiding the tree getting closed on every change + +## 1.1.3 + +### Patch Changes + +- [#440](https://github.com/appsmithorg/design-system/pull/440) [`7523dd3`](https://github.com/appsmithorg/design-system/commit/7523dd3a1f7c99cf3cdb2f13ed8042ee8b7312d2) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: icon fixes and added new icons + +## 1.1.2 + +### Patch Changes + +- [#378](https://github.com/appsmithorg/design-system/pull/378) [`a6223d0`](https://github.com/appsmithorg/design-system/commit/a6223d07b39f587c2fa287953c7928bccdfae4c1) Thanks [@rahulramesha](https://github.com/rahulramesha)! - feat: Auto layout conversion design components changes + +## 1.1.1 + +### Patch Changes + +- [#427](https://github.com/appsmithorg/design-system/pull/427) [`d7c5538`](https://github.com/appsmithorg/design-system/commit/d7c5538aa07bd481ce463b06376c93b1f026686c) Thanks [@ChandanBalajiBP](https://github.com/ChandanBalajiBP)! - feat: Add close-circle-line icon + +## 1.1.0 + +### Minor Changes + +- [#415](https://github.com/appsmithorg/design-system/pull/415) [`b559bf6`](https://github.com/appsmithorg/design-system/commit/b559bf64d1a8e76839bee4d24a81cf13b8e06ea7) Thanks [@iamakulov](https://github.com/iamakulov)! - feat: new importSvg and importRemixIcon wrappers for code-splitting icons + +### Patch Changes + +- [#389](https://github.com/appsmithorg/design-system/pull/389) [`6c7441f`](https://github.com/appsmithorg/design-system/commit/6c7441fc69255c1f63dcc1708d30d4ebd3b5d3dc) Thanks [@iamakulov](https://github.com/iamakulov)! - perf: add "sideEffects": false for better tree-shaking + +## 1.0.52 + +### Patch Changes + +- [#393](https://github.com/appsmithorg/design-system/pull/393) [`a81f44b`](https://github.com/appsmithorg/design-system/commit/a81f44bcfbd9c259fbe03f1c754179250f14b16c) Thanks [@ankitakinger](https://github.com/ankitakinger)! - chore: Adding the support for row expansion on the Table component + +## 1.0.51 + +### Patch Changes + +- [#369](https://github.com/appsmithorg/design-system/pull/369) [`ca37154`](https://github.com/appsmithorg/design-system/commit/ca37154e9c636b35797a8c0c3ff5841893a535bf) Thanks [@akash-codemonk](https://github.com/akash-codemonk)! - chore: add sorting icons + +## 1.0.50 + +### Patch Changes + +- [#368](https://github.com/appsmithorg/design-system/pull/368) [`83ae938`](https://github.com/appsmithorg/design-system/commit/83ae938d12863d695ffeb49291c17e5aaac648b9) Thanks [@berzerkeer](https://github.com/berzerkeer)! - chore: added money dollar icon + +## 1.0.49 + +### Patch Changes + +- [#363](https://github.com/appsmithorg/design-system/pull/363) [`c4f9880`](https://github.com/appsmithorg/design-system/commit/c4f9880e2713aef24a0596d1c557acda00ff11a0) Thanks [@berzerkeer](https://github.com/berzerkeer)! - chore: added arrow up icon + +## 1.0.48 + +### Patch Changes + +- [#344](https://github.com/appsmithorg/design-system/pull/344) [`2d2e0bf`](https://github.com/appsmithorg/design-system/commit/2d2e0bf20deef4667f7d121e4a1718bed6b2e66c) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: Ds build script + +## 1.0.47 + +### Patch Changes + +- [#340](https://github.com/appsmithorg/design-system/pull/340) [`2f2e797`](https://github.com/appsmithorg/design-system/commit/2f2e79713c5a837cd54c509a6ad149d19e4fb092) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: Readme updates for new DS + +## 1.0.46 + +### Patch Changes + +- [#286](https://github.com/appsmithorg/design-system/pull/286) [`19723ee`](https://github.com/appsmithorg/design-system/commit/19723ee66318d59e2ec5342f15b72fc5b850389a) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: Changes to support branding components + +* [#303](https://github.com/appsmithorg/design-system/pull/303) [`7c8c552`](https://github.com/appsmithorg/design-system/commit/7c8c5528c934556e5d7bee2ee662a866bca1369e) Thanks [@yaldram](https://github.com/yaldram)! - chore: updated react versions to 17 + +- [#320](https://github.com/appsmithorg/design-system/pull/320) [`776fb11`](https://github.com/appsmithorg/design-system/commit/776fb11cc56bb979e94bbb87c84ebcbb8a462d71) Thanks [@berzerkeer](https://github.com/berzerkeer)! - feat: collapsible component + +## 1.0.45 + +### Patch Changes + +- [#302](https://github.com/appsmithorg/design-system/pull/302) [`4dcb50b`](https://github.com/appsmithorg/design-system/commit/4dcb50bb45fea6142dde0cdd4fded773746b9d8d) Thanks [@yaldram](https://github.com/yaldram)! - feat: updated styled components library + +## 1.0.44 + +### Patch Changes + +- [#305](https://github.com/appsmithorg/design-system/pull/305) [`0c94439`](https://github.com/appsmithorg/design-system/commit/0c944390a3f2209f02b70a2e1545209194b8f804) Thanks [@akash-codemonk](https://github.com/akash-codemonk)! - feat: add more icons used in nav bar + +## 1.0.43 + +### Patch Changes + +- [#299](https://github.com/appsmithorg/design-system/pull/299) [`ce7a5fc`](https://github.com/appsmithorg/design-system/commit/ce7a5fcd8d33bf43493f5e8f0bd5cba0fdf03dd9) Thanks [@akash-codemonk](https://github.com/akash-codemonk)! - chore: add more icons required in new editor header design + +* [#298](https://github.com/appsmithorg/design-system/pull/298) [`bb2077e`](https://github.com/appsmithorg/design-system/commit/bb2077e3bc60c9a3a38071b0a0b198489e96b3e1) Thanks [@ankitakinger](https://github.com/ankitakinger)! - fix: Removing tooltip on table header as it is not part of our design system + +## 1.0.42 + +### Patch Changes + +- [#294](https://github.com/appsmithorg/design-system/pull/294) [`a77d291`](https://github.com/appsmithorg/design-system/commit/a77d29188987d72beeb427954785135abf9e9f67) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - feat: update snippet button from 3ry to 2ry + +## 1.0.41 + +### Patch Changes + +- [#285](https://github.com/appsmithorg/design-system/pull/285) [`1ffd0d7`](https://github.com/appsmithorg/design-system/commit/1ffd0d779387517cb385866d1964b41c73cd40d0) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - feat: tag the latest commit with the alpha tag created + +* [#287](https://github.com/appsmithorg/design-system/pull/287) [`f8089a8`](https://github.com/appsmithorg/design-system/commit/f8089a86d5ea5ba8603f7fad2055756cbad15aa2) Thanks [@ankitakinger](https://github.com/ankitakinger)! - fix: Setting the active tab only via the onSelect function, if present in props + +## 1.0.40 + +### Patch Changes + +- [#280](https://github.com/appsmithorg/design-system/pull/280) [`1ee473f`](https://github.com/appsmithorg/design-system/commit/1ee473f1b0f8effeaac2a2fa9cb3aeccb9e02ae9) Thanks [@akash-codemonk](https://github.com/akash-codemonk)! - chore: Added more remix icons to be used in-app-embed settings + +* [#284](https://github.com/appsmithorg/design-system/pull/284) [`ab044ce`](https://github.com/appsmithorg/design-system/commit/ab044ceb3b38415dc86ce80e4b8df5485d0da275) Thanks [@ankitakinger](https://github.com/ankitakinger)! - chore: Add delete row icon for Access control upgrade page + +## 1.0.39 + +### Patch Changes + +- [#277](https://github.com/appsmithorg/design-system/pull/277) [`2aa515a`](https://github.com/appsmithorg/design-system/commit/2aa515ad96f768f6913a5977ccf25f367ac7a7ad) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - chore: Adding new icons for using them on the audit logs page for Granular Access Control + +## 1.0.38 + +### Patch Changes + +- [#272](https://github.com/appsmithorg/design-system/pull/272) [`7b557fa`](https://github.com/appsmithorg/design-system/commit/7b557fab7c501bcfac6246aa00022287fd396d11) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: Text input not triggering validation on defaultValue change + +## 1.0.37 + +### Patch Changes + +- [#261](https://github.com/appsmithorg/design-system/pull/261) [`0c9351f`](https://github.com/appsmithorg/design-system/commit/0c9351f7305e1a1d95eeafc4cd35cc01508ae59b) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - chore: update dependency categorization + +## 1.0.36 + +### Patch Changes + +- [#267](https://github.com/appsmithorg/design-system/pull/267) [`56770ed`](https://github.com/appsmithorg/design-system/commit/56770ed5033462b7c2c2e3a46ee7fc67305be3c8) Thanks [@yaldram](https://github.com/yaldram)! - fix: Flag font issue in dropdown fixed. + +## 1.0.35 + +### Patch Changes + +- [#250](https://github.com/appsmithorg/design-system/pull/250) [`12415dc`](https://github.com/appsmithorg/design-system/commit/12415dc0091cf279810afb986412fca3eeba712f) Thanks [@ankitakinger](https://github.com/ankitakinger)! - chore: Updating the logic for suggestions in the tag input component + +* [#255](https://github.com/appsmithorg/design-system/pull/255) [`097dbd1`](https://github.com/appsmithorg/design-system/commit/097dbd10e9ca2934a673c0ec1a2c1fcc5455172b) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - feat: update button states - tertiary becomes secondary and we have a new, more subtle, tertiary + +## 1.0.34 + +### Patch Changes + +- [#259](https://github.com/appsmithorg/design-system/pull/259) [`676a146`](https://github.com/appsmithorg/design-system/commit/676a146ab15b673355a5ecf1c79f214f166030c6) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: Form message component react router issue + +## 1.0.33 + +### Patch Changes + +- [#253](https://github.com/appsmithorg/design-system/pull/253) [`6c398b6`](https://github.com/appsmithorg/design-system/commit/6c398b6dcd8de8ec7e7fd1b496f68f314963e2ac) Thanks [@yaldram](https://github.com/yaldram)! - fix: added classname to leftElement in Dropdown + +## 1.0.32 + +### Patch Changes + +- [#247](https://github.com/appsmithorg/design-system/pull/247) [`bf94a82`](https://github.com/appsmithorg/design-system/commit/bf94a82f9acefece268560e504611d749b859040) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: multiple on change trigger in radio component + +## 1.0.31 + +### Patch Changes + +- [#245](https://github.com/appsmithorg/design-system/pull/245) [`b44e378`](https://github.com/appsmithorg/design-system/commit/b44e37863b80445b4ab8582bc021cc762071a8bb) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - fix: reveryt changes to tree dropdown + +## 1.0.30 + +### Patch Changes + +- [#228](https://github.com/appsmithorg/design-system/pull/228) [`7fe2634`](https://github.com/appsmithorg/design-system/commit/7fe26342c1d93db72eb136a8844b96fb9994a273) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - fix: destructure file picker functions so that they don't throw errors on local + +* [#131](https://github.com/appsmithorg/design-system/pull/131) [`09c108d`](https://github.com/appsmithorg/design-system/commit/09c108dbca070ca092b1ac7a229e6c26d7081a76) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - Create CONTRIBUTING.md + +## 1.0.29 + +### Patch Changes + +- [#229](https://github.com/appsmithorg/design-system/pull/229) [`c7f164e`](https://github.com/appsmithorg/design-system/commit/c7f164e35f485df7839b30eb7ed6ff8979b42c60) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - fix: issue with font of toasts on windows machines + +## 1.0.28 + +### Patch Changes + +- [#214](https://github.com/appsmithorg/design-system/pull/214) [`5430e7e`](https://github.com/appsmithorg/design-system/commit/5430e7e185976024cd00687ebe2bd551320cf276) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Added date range picker + +* [#217](https://github.com/appsmithorg/design-system/pull/217) [`93a675c`](https://github.com/appsmithorg/design-system/commit/93a675c55f12bf75eadc3c05d162de6af8694833) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: Dropdown performance due to createGlobalStyle + +- [#223](https://github.com/appsmithorg/design-system/pull/223) [`d66ff3a`](https://github.com/appsmithorg/design-system/commit/d66ff3a97e718c68c792980115237ccf26201a5c) Thanks [@IAmAnubhavSaini](https://github.com/IAmAnubhavSaini)! - chore: add two new icons and sort icon lines alphabetically + +## 1.0.27 + +### Patch Changes + +- [#202](https://github.com/appsmithorg/design-system/pull/202) [`c40f7ab`](https://github.com/appsmithorg/design-system/commit/c40f7ab3f4b71991d52011654afb63b36fe327c1) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Migrated BannerMessage component + +* [#202](https://github.com/appsmithorg/design-system/pull/202) [`4b98f32`](https://github.com/appsmithorg/design-system/commit/4b98f32a568e6754dd4ebfde00a30501f81d91b8) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Migrated BannerMessage component + +- [#207](https://github.com/appsmithorg/design-system/pull/207) [`5147ee4`](https://github.com/appsmithorg/design-system/commit/5147ee410bbbc3a8f34c2d09d55aa53e9413592c) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - feat: migrate file picker v2 + +* [#206](https://github.com/appsmithorg/design-system/pull/206) [`c98a9dd`](https://github.com/appsmithorg/design-system/commit/c98a9ddf69714187eb475cdee92249e7ecea7984) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - feat: migrate editable text, editable text sub component, and editable text wrapper + +- [#213](https://github.com/appsmithorg/design-system/pull/213) [`36d06c0`](https://github.com/appsmithorg/design-system/commit/36d06c0c19189cc913883c50040e19a57454ee14) Thanks [@aswathkk](https://github.com/aswathkk)! - feat: Makes ButtonTab to accept label + +* [#218](https://github.com/appsmithorg/design-system/pull/218) [`88cce94`](https://github.com/appsmithorg/design-system/commit/88cce94288f174bf2dd401df5f7aff68dc64abb6) Thanks [@IAmAnubhavSaini](https://github.com/IAmAnubhavSaini)! - feat: settings icon update + +- [#202](https://github.com/appsmithorg/design-system/pull/202) [`a6fc46f`](https://github.com/appsmithorg/design-system/commit/a6fc46f4b6b05c5caa5e6767d739fb1a23a97fa0) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Migrated BannerMessage component + +* [#216](https://github.com/appsmithorg/design-system/pull/216) [`bf2c626`](https://github.com/appsmithorg/design-system/commit/bf2c626d8869e0c7732d597edeb896f131266ac6) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: Table no data found hover state issue + +## 1.0.26 + +### Patch Changes + +- [#200](https://github.com/appsmithorg/design-system/pull/200) [`691ec30`](https://github.com/appsmithorg/design-system/commit/691ec3074e566472b1a07331a2429d5a2c063c5c) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: form group component migrated + +## 1.0.25 + +### Patch Changes + +- [#204](https://github.com/appsmithorg/design-system/pull/204) [`6f235f1`](https://github.com/appsmithorg/design-system/commit/6f235f1535494025e8df96aced91815bc50aee36) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: JS Toggle Button migrated + +* [#199](https://github.com/appsmithorg/design-system/pull/199) [`30cbd7c`](https://github.com/appsmithorg/design-system/commit/30cbd7c392d793083ac16674a2a75b8ab686392f) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - feat: migrate toast + +- [#205](https://github.com/appsmithorg/design-system/pull/205) [`615eb6e`](https://github.com/appsmithorg/design-system/commit/615eb6efb3c1f1e0fc4066446b75c55478c85993) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - fix typo in export of StepComponent + +## 1.0.25 + +### Patch Changes + +- [#145](https://github.com/appsmithorg/design-system/pull/145) [`dd6b696`](https://github.com/appsmithorg/design-system/commit/dd6b69638a9aac30883534b96ce43c87677a4dbd) Thanks [@dependabot](https://github.com/apps/dependabot)! - Bump moment-timezone from 0.5.34 to 0.5.35 + +* [#189](https://github.com/appsmithorg/design-system/pull/189) [`f975201`](https://github.com/appsmithorg/design-system/commit/f975201afae376d85457f2b1117883c302ee0c56) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - destructure props for onClick on UneditableField + +- [#187](https://github.com/appsmithorg/design-system/pull/187) [`b0b18c3`](https://github.com/appsmithorg/design-system/commit/b0b18c303966439175f78aa8aeaba37c62cea70c) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: Dropdown keyboard navigation and UI fixes + +## 1.0.24 + +### Patch Changes + +- [#160](https://github.com/appsmithorg/design-system/pull/160) [`c7d1471`](https://github.com/appsmithorg/design-system/commit/c7d14716908c3ff7d838b89e88ce81f2ce282a8d) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - feat: migrate callout v2, change it so it no longer contains redux + +* [#180](https://github.com/appsmithorg/design-system/pull/180) [`2a394d2`](https://github.com/appsmithorg/design-system/commit/2a394d216815afab40116f3e9f4582ea322d6a1d) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: Dropdown keyboard navigation issues + +- [#172](https://github.com/appsmithorg/design-system/pull/172) [`e01f7bd`](https://github.com/appsmithorg/design-system/commit/e01f7bdc395f1b954cb1eb6c6123c02c96495462) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: props destructuring for functions passed as props to components + +* [#181](https://github.com/appsmithorg/design-system/pull/181) [`26c0d6a`](https://github.com/appsmithorg/design-system/commit/26c0d6a592db5acaf30cb8f16a7c49b3734083fc) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - fix: destructure onClick on migrating CalloutV2 + +- [#184](https://github.com/appsmithorg/design-system/pull/184) [`d5acc69`](https://github.com/appsmithorg/design-system/commit/d5acc697a7b5ffdf5fc07b14aecfa52cfcc80730) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - feat: create SnippetButton component + +* [#182](https://github.com/appsmithorg/design-system/pull/182) [`fe9ce05`](https://github.com/appsmithorg/design-system/commit/fe9ce052b79827b2ab33e524b72466589d065cf6) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: Reverted dropdown changes + +## 1.0.23 + +### Patch Changes + +- [#171](https://github.com/appsmithorg/design-system/pull/171) [`08cc10f`](https://github.com/appsmithorg/design-system/commit/08cc10fb55f52d65fddee1950a9cc2f7191969bd) Thanks [@IAmAnubhavSaini](https://github.com/IAmAnubhavSaini)! - feat: Added audit logs icons + +* [#177](https://github.com/appsmithorg/design-system/pull/177) [`4b0865a`](https://github.com/appsmithorg/design-system/commit/4b0865ac4965d67131609a471ec9fc97d0b2fa89) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Added empty state for dropdown + +## 1.0.22 + +### Patch Changes + +- [#173](https://github.com/appsmithorg/design-system/pull/173) [`0ba1df7`](https://github.com/appsmithorg/design-system/commit/0ba1df7a93f85e14b5f848e774e5ae69ba66a747) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: Dropdown v1 design fixes + +## 1.0.21 + +### Patch Changes + +- [#162](https://github.com/appsmithorg/design-system/pull/162) [`38fc15b`](https://github.com/appsmithorg/design-system/commit/38fc15b91720351bd64b6dc827fa2bfed378693b) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: AppIcon story not showing in storybook + +* [#159](https://github.com/appsmithorg/design-system/pull/159) [`0249c93`](https://github.com/appsmithorg/design-system/commit/0249c9389f31b1f021c67c6a6e95cb83b268c3a8) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Dropdown - added selectedOptionElements + +## 1.0.20 + +### Patch Changes + +- [#152](https://github.com/appsmithorg/design-system/pull/152) [`a57397f`](https://github.com/appsmithorg/design-system/commit/a57397fb87301be1184bb4cb49a6429ee3ed2571) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - fix: issues with radio button not responding to click + +* [#155](https://github.com/appsmithorg/design-system/pull/155) [`9a4e930`](https://github.com/appsmithorg/design-system/commit/9a4e930b99e46d89d34611ba9608790dee694d9e) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - fix: radio button color + +## 1.0.19 + +### Patch Changes + +- [#144](https://github.com/appsmithorg/design-system/pull/144) [`43895a4`](https://github.com/appsmithorg/design-system/commit/43895a4689d042eda4c537a53f7d675053abcc8c) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - fix: issues with color and spacing in MenuDivider, Radio + +* [#139](https://github.com/appsmithorg/design-system/pull/139) [`ed6f5a7`](https://github.com/appsmithorg/design-system/commit/ed6f5a77ae54da13a7d9061079e84335e3ff7e0d) Thanks [@IAmAnubhavSaini](https://github.com/IAmAnubhavSaini)! - feat: Introducing icons for audit-logs + +- [#146](https://github.com/appsmithorg/design-system/pull/146) [`15892d5`](https://github.com/appsmithorg/design-system/commit/15892d5750a07656c2843e5e17529de962388084) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - fix: issue with default image being zoomed in on the Display Image Upload component + +* [#143](https://github.com/appsmithorg/design-system/pull/143) [`94035cb`](https://github.com/appsmithorg/design-system/commit/94035cb14016f8625e7db995916b65159d54a2ab) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix:IconSelector onSelect failure in local development + +- [#136](https://github.com/appsmithorg/design-system/pull/136) [`cd54d63`](https://github.com/appsmithorg/design-system/commit/cd54d63fa0138afd8a6f57d841b13aa54ab786ea) Thanks [@ankitakinger](https://github.com/ankitakinger)! - feat: Make Table and Tab header sticky + +## 1.0.18 + +### Patch Changes + +- [#137](https://github.com/appsmithorg/design-system/pull/137) [`ec192f4`](https://github.com/appsmithorg/design-system/commit/ec192f44159784064eff5f8cd9cf9d2adb2e05f9) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - Feat/add all icon stories + +* [#140](https://github.com/appsmithorg/design-system/pull/140) [`e316e87`](https://github.com/appsmithorg/design-system/commit/e316e87018b2f79bd0e5ecad5b0adabba78abbe5) Thanks [@yaldram](https://github.com/yaldram)! - fix: dropdown input search text color. + +## 1.0.17 + +### Patch Changes + +- [#133](https://github.com/appsmithorg/design-system/pull/133) [`0d0872e`](https://github.com/appsmithorg/design-system/commit/0d0872e09276f3a6584cc549942a9f43ebe1b472) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - fix: uneditable field icon + +* [#130](https://github.com/appsmithorg/design-system/pull/130) [`99f809b`](https://github.com/appsmithorg/design-system/commit/99f809b732370f935e0d55d08672704659f4527f) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - fix: issue with line height in TableDropdown + +- [#132](https://github.com/appsmithorg/design-system/pull/132) [`b2ba8a5`](https://github.com/appsmithorg/design-system/commit/b2ba8a586409703ecc15543bee03d034c114cc07) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - fix: color of menu divider + +## 1.0.16 + +### Patch Changes + +- [#122](https://github.com/appsmithorg/design-system/pull/122) [`acea1df`](https://github.com/appsmithorg/design-system/commit/acea1dfe6b2bb8887d173d7c338a3b016fd044c2) Thanks [@souma-ghosh](https://github.com/souma-ghosh)! - feat: Adds showScrollbarOnlyOnHover functionality as a property to ScrollIndicator + +* [#126](https://github.com/appsmithorg/design-system/pull/126) [`1e63e78`](https://github.com/appsmithorg/design-system/commit/1e63e78641a3b21a80bb3a0c919544193b5ed9fb) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: Table Widget shows scrollbar when not in focus + +- [#123](https://github.com/appsmithorg/design-system/pull/123) [`ae63f08`](https://github.com/appsmithorg/design-system/commit/ae63f08cede255f66deb27a4461565c7db2c243d) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - fix: ui issues with checkbox, button, dropdown + +## 1.0.15 + +### Patch Changes + +- [#124](https://github.com/appsmithorg/design-system/pull/124) [`5ce3673`](https://github.com/appsmithorg/design-system/commit/5ce3673a54679094fdc0dd487cb895eeb329ff07) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Adds showScrollbarOnlyOnHover functionality as a property to ScrollIndicator + +* [#124](https://github.com/appsmithorg/design-system/pull/124) [`5ce3673`](https://github.com/appsmithorg/design-system/commit/5ce3673a54679094fdc0dd487cb895eeb329ff07) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: ui issues with checkbox, button, dropdown + +## 1.0.14 + +### Patch Changes + +- [#116](https://github.com/appsmithorg/design-system/pull/116) [`538ca0f`](https://github.com/appsmithorg/design-system/commit/538ca0f561f0073663ec83842fc140a87a705910) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - feat: Migrate Table, Uneditable Field, Step Component + +* [#113](https://github.com/appsmithorg/design-system/pull/113) [`7511e4c`](https://github.com/appsmithorg/design-system/commit/7511e4cfb615e59df9f382c8b6b8d4ceb3576e54) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Added taginput changes for showing suggetion + +## 1.0.13 + +### Patch Changes + +- [#111](https://github.com/appsmithorg/design-system/pull/111) [`4b591ee`](https://github.com/appsmithorg/design-system/commit/4b591ee31bff46d12660fbb584efd13ae5396874) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - chore: sync LabelWithTooltip and Dropdown + +* [#109](https://github.com/appsmithorg/design-system/pull/109) [`8fc60ea`](https://github.com/appsmithorg/design-system/commit/8fc60ea238ad20ec34a21d799273c851dfdc709d) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: Button and ButtonTab component issue in onclick functions + +## 1.0.12 + +### Patch Changes + +- [#105](https://github.com/appsmithorg/design-system/pull/105) [`444cee2`](https://github.com/appsmithorg/design-system/commit/444cee2ace642335988ebab974f02ff17a775f9c) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - update DropdownOption to TableDropdownOption and export for typechecking ease + +## 1.0.11 + +### Patch Changes + +- [#100](https://github.com/appsmithorg/design-system/pull/100) [`cedb54d`](https://github.com/appsmithorg/design-system/commit/cedb54d0f357389f5db571fdb5a20ad3c675885d) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Added button test + +## 1.0.10 + +### Patch Changes + +- [#96](https://github.com/appsmithorg/design-system/pull/96) [`81b2848`](https://github.com/appsmithorg/design-system/commit/81b2848a12dc36da31f981f880a402ff1e38bea7) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - Update HighlightText from ee + +* [#94](https://github.com/appsmithorg/design-system/pull/94) [`f361147`](https://github.com/appsmithorg/design-system/commit/f361147a21aa49db92d1ac1ff46e8763de3c41ba) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - Update scroll indicator on hover behavior + +## 1.0.9 + +### Patch Changes + +- [#90](https://github.com/appsmithorg/design-system/pull/90) [`2c4ec92`](https://github.com/appsmithorg/design-system/commit/2c4ec92b08e5b073de94001115dad45fd0e03c9d) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - Add exports for Radio, Notificationbanner + Add some more unused tests + Update LabelWithTooltip from ce before deleting the file there + +* [#92](https://github.com/appsmithorg/design-system/pull/92) [`dc57c6e`](https://github.com/appsmithorg/design-system/commit/dc57c6e700f8fa0fe328f070e0f48f2c6c4ab0c8) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: Treedropdown icon and intent prop type + +## 1.0.8 + +### Patch Changes + +- [#87](https://github.com/appsmithorg/design-system/pull/87) [`d506fd1`](https://github.com/appsmithorg/design-system/commit/d506fd1a6b5aec7dc8596ba16d5f9e24d25e539d) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - Fix: Clashing dropdown exports + +## 1.0.7 + +### Patch Changes + +- [#82](https://github.com/appsmithorg/design-system/pull/82) [`74ad31c`](https://github.com/appsmithorg/design-system/commit/74ad31c525483d7cd0366a189e624863efa87f59) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - Added Jest configuration + Fixed svg viewBox trimming issue + Added sprint assignment to checklist + +## 1.0.6 + +### Patch Changes + +- [#36](https://github.com/appsmithorg/design-system/pull/36) [`1e25150`](https://github.com/appsmithorg/design-system/commit/1e25150af52bd683a4c27afaae0bca63c58d338c) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: Changed readme to test workflow + +* [#65](https://github.com/appsmithorg/design-system/pull/65) [`2651d28`](https://github.com/appsmithorg/design-system/commit/2651d28765ed404d2fcb678f8656f131656d4810) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - feat: migrate dropdown, list segment header + +- [#43](https://github.com/appsmithorg/design-system/pull/43) [`f0ccf39`](https://github.com/appsmithorg/design-system/commit/f0ccf39d245db0c292f3c47f47e55b34c62067d9) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - fix: issues with exports in the migration of dropdown V2 + +* [#69](https://github.com/appsmithorg/design-system/pull/69) [`8ecbd78`](https://github.com/appsmithorg/design-system/commit/8ecbd786d67d3749ad7875e8c3e58ca49c0c8b5b) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - Enable cross icon on the Search Component + +- [#58](https://github.com/appsmithorg/design-system/pull/58) [`a87589b`](https://github.com/appsmithorg/design-system/commit/a87589b0bdbef0995286c9b6600c18dc28c2bdf7) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - feat: migrate checkbox + +* [#66](https://github.com/appsmithorg/design-system/pull/66) [`7d1a82c`](https://github.com/appsmithorg/design-system/commit/7d1a82cff65ae933e9a3789c597211560f67c61c) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - feat: migrate label with tooltip + +- [#60](https://github.com/appsmithorg/design-system/pull/60) [`6ba241b`](https://github.com/appsmithorg/design-system/commit/6ba241b23ae3c1f263e38a7d482f2c3094109b08) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - feat: migrate callout + +* [#74](https://github.com/appsmithorg/design-system/pull/74) [`49adedb`](https://github.com/appsmithorg/design-system/commit/49adedb73d05dce6b5dc6caac62ff96a35b4db41) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - Update Component-Migration-Checklist to include note about diffing files before changing imports + +- [#46](https://github.com/appsmithorg/design-system/pull/46) [`9ab5309`](https://github.com/appsmithorg/design-system/commit/9ab530951efcedf44c84959aa53d318846e461c0) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Migration - Color Picker component + +* [#48](https://github.com/appsmithorg/design-system/pull/48) [`f6e63e4`](https://github.com/appsmithorg/design-system/commit/f6e63e4aa3a3ab8884d2a5dad2fcd834563c6964) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Migration - Menu, Menu Item component + +- [#61](https://github.com/appsmithorg/design-system/pull/61) [`712ebdf`](https://github.com/appsmithorg/design-system/commit/712ebdfeb084ac6594eb40b63dfc3e04378a3db2) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - feat: migrate text input + +* [#56](https://github.com/appsmithorg/design-system/pull/56) [`6d351b7`](https://github.com/appsmithorg/design-system/commit/6d351b70b65c5993b25110e1420876c4ccf88f10) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Migrated ButtonTab component + +- [#54](https://github.com/appsmithorg/design-system/pull/54) [`acfc97a`](https://github.com/appsmithorg/design-system/commit/acfc97a06ed4a473cd325a1484f609a587aed8b4) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Migrated Tag Input component + +* [#57](https://github.com/appsmithorg/design-system/pull/57) [`8e742e9`](https://github.com/appsmithorg/design-system/commit/8e742e9c02a10c58ca6aac01a6f86b646257dc73) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Migrated Toggle component + +- [#62](https://github.com/appsmithorg/design-system/pull/62) [`eb570c2`](https://github.com/appsmithorg/design-system/commit/eb570c2017ad7486136432881d78bdc60fe49840) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - feat: migrate copy to clipboard + +* [#40](https://github.com/appsmithorg/design-system/pull/40) [`d0c5cdd`](https://github.com/appsmithorg/design-system/commit/d0c5cdd82c47a08eee8b2ae336a0df57ac916604) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - feat: migrate Dropdown v2 + feat: migrate Search Component + feat: migrate Highlight Text + +- [#70](https://github.com/appsmithorg/design-system/pull/70) [`1a2909a`](https://github.com/appsmithorg/design-system/commit/1a2909aa91be23260ab187a14cbd7c75b2efc098) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - Feat/migrate notification banner + +* [#73](https://github.com/appsmithorg/design-system/pull/73) [`f52ed2b`](https://github.com/appsmithorg/design-system/commit/f52ed2ba7d8b59c43b24cab902b93af339a5d99d) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - Support primary and secondary variants in checkbox + +- [#32](https://github.com/appsmithorg/design-system/pull/32) [`6833851`](https://github.com/appsmithorg/design-system/commit/6833851de5303a6b4487743083a79e1f5bea987c) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - Readme change for testing workflows + +* [#51](https://github.com/appsmithorg/design-system/pull/51) [`4b7b8d9`](https://github.com/appsmithorg/design-system/commit/4b7b8d986f5f71744bf47669dddec49cc8363a73) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - Feature: migrate radio component, menu divider + +- [#47](https://github.com/appsmithorg/design-system/pull/47) [`c8543ed`](https://github.com/appsmithorg/design-system/commit/c8543ed7ca193ff77ce482ca0d9630999b6a3313) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Migration - Button component + +* [#68](https://github.com/appsmithorg/design-system/pull/68) [`56124c1`](https://github.com/appsmithorg/design-system/commit/56124c11e2f5b89118981d097682958545295c33) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - Migrated Display image upload, Draggable list, Numbered steps, Tabs, Tab item background fill, Emoji picker, Emoji reactions, Gif player, Scroll indicator, Icon selector, Multiswitch, Field error, Text field, Rectangular switch, Showcase carousal, Statusbar, Table dropdown + +- [#64](https://github.com/appsmithorg/design-system/pull/64) [`c636be2`](https://github.com/appsmithorg/design-system/commit/c636be2bcfcf2f98f99f7c85eb81af02f66c579d) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - Feat/migrate dialog + +* [#59](https://github.com/appsmithorg/design-system/pull/59) [`1f239f2`](https://github.com/appsmithorg/design-system/commit/1f239f26e0cc1be0eb1f323205cfa6a35986ae83) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - feat: Create ColorSelector + +- [#44](https://github.com/appsmithorg/design-system/pull/44) [`ccc9c37`](https://github.com/appsmithorg/design-system/commit/ccc9c37d4890fee26cc589d1e10c056f7e6c03a2) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Migration - icon, control icon, spinner components + +* [#49](https://github.com/appsmithorg/design-system/pull/49) [`913348e`](https://github.com/appsmithorg/design-system/commit/913348ee8ddb4a59bb2c6389ab397fefab1d9c15) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Migration - Switch component + +- [#42](https://github.com/appsmithorg/design-system/pull/42) [`b594f0c`](https://github.com/appsmithorg/design-system/commit/b594f0ccbf6b48609d72a0c95bbac5f602977239) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Migration - DatePicker, AppIcon + fix: AppIcon component size issue + fix: Typescript version conflict + fix: SVG import for storybook + +* [#38](https://github.com/appsmithorg/design-system/pull/38) [`6d66db6`](https://github.com/appsmithorg/design-system/commit/6d66db65aa8b510c53d35a92d530135305fd51d6) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - Readme change for testing workflow + +- [#55](https://github.com/appsmithorg/design-system/pull/55) [`4619399`](https://github.com/appsmithorg/design-system/commit/4619399bb4e0f70bb65209d01d8b7b1df9198d12) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - feat: Added breadcrumbs component and story + +## 1.0.5 + +### Patch Changes + +- [#29](https://github.com/appsmithorg/design-system/pull/29) [`e710c7a`](https://github.com/appsmithorg/design-system/commit/e710c7a9ce7fdac09d34c8085dc53c8c5856b1ad) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - Fixed spacing in readme + +## 1.0.4 + +### Patch Changes + +- [#23](https://github.com/appsmithorg/design-system/pull/23) [`a2bf066`](https://github.com/appsmithorg/design-system/commit/a2bf066c69b5d08100d2adf223d377bf947e280c) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - Added optional underline feature for tooltip target + +* [#22](https://github.com/appsmithorg/design-system/pull/22) [`c791e3e`](https://github.com/appsmithorg/design-system/commit/c791e3e2184e8528a0a1a54c59909a21e9d4ed16) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - Added Text component and related stories + +## 1.0.3 + +### Patch Changes + +- [#16](https://github.com/appsmithorg/design-system/pull/16) [`731f3ea`](https://github.com/appsmithorg/design-system/commit/731f3ea4cac1109fe5071490c295dc590ed89402) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - Readme file changed - casing change + +## 1.0.2 + +### Patch Changes + +- [#14](https://github.com/appsmithorg/design-system/pull/14) [`b073321`](https://github.com/appsmithorg/design-system/commit/b073321099aee0d24ba782da331bab807825f14b) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - Made changed in the readme file for NPM package diff --git a/app/client/packages/design-system/ads-old/CONTRIBUTING.md b/app/client/packages/design-system/ads-old/CONTRIBUTING.md new file mode 100644 index 000000000000..6eadec52e95a --- /dev/null +++ b/app/client/packages/design-system/ads-old/CONTRIBUTING.md @@ -0,0 +1,67 @@ + +Refer to [the README](https://github.com/appsmithorg/design-system/blob/main/packages/design-system/README.md#contribute) for a guide on how to get started with contributing. + +## Using yalc + +When you make a change in the design system, you will want to ensure that the component works as expected in the app you are using it for. To emulate working with published packages locally, we use [yalc](https://www.npmjs.com/package/yalc). + +### Installation + +Run +```shell +yarn global add yalc +``` + +### Setting up for appsmith usage + +If we're going to use this package in the `appsmith` repository, we need to make some additional changes to this repository. + +1. navigate to the `package/design-system/package.json` file +2. Make sure you change the field `"name": "@appsmithorg/design-system"` to `"name": "design-system"`. We do this so that we don't run into alias conflicts later. +3. Make sure you do not commit this file + +### In this repository + +We need to "publish" our package. + +1. Make sure the package builds by running `yarn build` +2. Make sure the functionality works as expected in the playground by running `yarn storybook` and then testing your component out in the relevant story +3. If you are writing a new component, write a story for it taking another story from this repository as reference. You could also refer to [the official docs](https://storybook.js.org/docs/react/writing-stories/introduction#how-to-write-stories). +4. When you've done all of this, run `yalc publish`. It will output the package name and number. + +### In the other repository + +1. Run `yalc add design-system` in the appsmith repository. +2. This will create changes in your `package.lock` file. Run `yarn` to get the new package version from `yalc`. +3. This will create changes in your `yarn.lock` file, which is what we want. Make sure you do not commit these changes. + +Now you can test your app while including the changes made in this package. Go ahead and run your local development environment, or some cypress tests. + +Please note that yalc will not test any uncommitted changes you make in your file system. Make sure you have everything you need in the commits (you can always revert bad ones!) + + +## Non-local testing + +You can create an alpha release of your branch so that other people can see and test your changes in a different repository (on a CI, for example). To do this, + +1. In your `package.json`, make sure the `version` key is set to be the latest alpha version listed on the `versions` tab on [our npm package listing](https://www.npmjs.com/package/@appsmithorg/design-system). If you don't do this, the alpha version you create will overwrite an existing version and bad things might happen. +2. Run `./alpha-release.sh` in your shell. In order to complete this script, you will need an OTP which only members of the [@appsmithorg](https://www.npmjs.com/package/@appsmithorg/design-system) organisation on npm have access to. Please contact someone from the design system pod before you start this action. + +## Creating stories + +When you create a component, make sure you write a well-defined story for it. A well defined story is one that +1. Denotes the default state of the component +2. Denotes all the variants of the component +3. Has a list of all the things the component can be + +You can create a template for your stories by running +```shell +yarn create-story -f +``` +where ideally your directory name matches your component name exactly. + +## Contribution Guidelines: Code Style + +1. Destructure function props where possible: https://github.com/appsmithorg/design-system/pull/109 +2. + diff --git a/app/client/packages/design-system/ads-old/Component-Migration-Checklist.md b/app/client/packages/design-system/ads-old/Component-Migration-Checklist.md new file mode 100644 index 000000000000..64d507dca1f5 --- /dev/null +++ b/app/client/packages/design-system/ads-old/Component-Migration-Checklist.md @@ -0,0 +1,39 @@ +# Steps to migrate components + +- [ ] Pick the component to be migrated. Mark it as in progress (highlight in yellow) on the migration sheet [Component Migration planning](https://docs.google.com/spreadsheets/d/1pcIMvGwknhbjnG1yxKH2UnRIOPwW5lw_xiFxrJdb1E8/edit?usp=drivesdk) +- [ ] Create an issue for it on [appsmith/ce](http://github.com/appsmithorg/appsmith). Announce that you’re doing this on #design-system and #team-tech channel. + - [ ] All PRs should have an issue. + - [ ] All issues should have estimates. + - [ ] All issues should be assigned to sprint(s). + - [ ] All migration-related issue goes inside the migration epic + - [ ] All migration issues should have labels ads migration + - [ ] All design system issues should have a design system pod label. Then, zenhub can track the issues. + - [ ] All issues should have sprint added to it. +- [ ] Copy the files over to the [appsmith/design-system](http://github.com/appsmithorg/design-system/) repository. + - [ ] Copy any unit test files over as well if they exist. + - [ ] In the files, props.theme variables become variables used from variables.css + - [ ] component-specific variables and tokens go in index.css (make sure you order this alphabetically) + - [ ] Add stories for every state and variation of the component + - [ ] Make sure to add the exports of the components you’ve added in the src/index.ts file +- [ ] Create a branch to change the imports on appsmith/ce. + - [ ] First, check that there has been no deviation from the migrated file in the design-system repo with the current file in the appsmith repo. You can run the command `git log -1 --pretty="format:%ci" ./src/components/ads/[YOUR_COMPONENT_FILE]` and if the date returned is after the beginning of July, it was probably modified. You can paste both files in a diff checker like [diffchecker.com](diffchecker.com) to compare and update the files in the design-system repo. + - [ ] On this branch, delete the files for the component you’ve just migrated. + - [ ] Everywhere the component was used, change the import to point to the design-system package instead. + - [ ] If you've migrated a component that is used a specific new places in the ee-repo, make updates there as well. +- [ ] Test the changes you’ve made and if the imports you’ve generated work as expected in your local developer environment of appsmith + - [ ] install yalc on your system + - [ ] run `yarn build` to build the package, then `yalc publish` to imitate the package being published + - [ ] run `yalc add '@appsmithorg/design-system'` in the appsmith/ce repository + - [ ] All the imports will now be named imports. for local testing purposes, they will come from `@appsmithorg/design-system` . Make sure to change these imports to just `design-system` when committing them. + - [ ] Make sure you also test on ee, because ee is a superset of ce. If things break on ee, you will have to fix the specific import changes there as well. + - [ ] You can test on ee by pulling your changes from your ce branch into your ee branch following the steps in the 'set up upstream repo' part of this document: https://www.notion.so/appsmith/How-to-resolve-merge-conflicts-when-Sync-Community-Workflow-fails-66f1eb73ce4b45f48f8e6f6f4f5ebfd8#e5e755eab837428581a4f81847b4e39c + - [ ] You will have to run ee locally following this document: https://www.notion.so/appsmith/Steps-to-run-EE-code-locally-d01e0bc343d94a209c8a90d3dba33e17 +- [ ] Raise a PR for the changes you’ve made in the design-system repository. Make sure you have added a changeset for the PR detailing what the PR will do. +- [ ] Once your changes on the design-system repository has been approved and merged to release, take the beta version number of our package under ‘current tags’ from the published npm page, and replace the version number of [this line](https://github.com/appsmithorg/appsmith/blob/8428ae506a02ec477027b82936ff003c0c53cafb/app/client/package.json#L48) with it on your branch. Test once again if the imports work as expected, then raise a PR for the changed imports in the appsmith/ce repository. [@appsmithorg/design-system](https://www.npmjs.com/package/@appsmithorg/design-system) +- [ ] Once the PR is raised, the deploy preview created will be given to QA for testing. To help them with that process, we will have to prepare a document of where the component is being used. Take a screenshot of the pages where the changes have happened, and then add them to the component usage spreadsheet: [Components usage](https://docs.google.com/spreadsheets/d/1np7jQdiQa0nyryOBnNa927NkGDplG9M2gb7qnoZIIyM/edit?usp=drivesdk) +- [ ] Ensure that QA signs off on both ce and ee repositories +- [ ] Minor versions are incremented every time release is merged into main. This is currently a manual process. Make sure that when you make this change, the package.json in appsmith/ce is updated accordingly. + +## **Versioning ([NPM semantic versioning](https://docs.npmjs.com/about-semantic-versioning))** + +![Screenshot 2022-05-10 at 4.20.48 PM.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ba1bcd19-e767-4f2b-bc37-1037451f0cc6/Screenshot_2022-05-10_at_4.20.48_PM.png) diff --git a/app/client/packages/design-system/ads-old/README.md b/app/client/packages/design-system/ads-old/README.md new file mode 100644 index 000000000000..eef06fa2d556 --- /dev/null +++ b/app/client/packages/design-system/ads-old/README.md @@ -0,0 +1,94 @@ +

+ + + +

+ +

Appsmith Design System - old (deprecated)

+ +
+ +UI Design system of Appsmith + +[![npm package](https://img.shields.io/npm/v/@appsmithorg/design-system.svg?style=flat-square)](https://www.npmjs.org/package/@appsmithorg/design-system) + +
+ +[![](https://github.com/appsmithorg/appsmith/raw/release/static/git-banner-new.png)](https://appsmith.com) + + + + +## Install + +```bash +npm install @appsmith/design-system-old +``` +or +```bash +yarn add @appsmithorg/design-system-old +``` + +## Including CSS + +Add css import in the root index css file +```bash +@import "~@appsmithorg/design-system-old/build/css/design-system-old.css"; +``` + +## Usage + +```jsx +import { TooltipComponent } from "@appsmithorg/design-system-old"; + + + Hover here 😁 + +``` + +## Contribute +> 🚫 This package is closed for contributions. We welcome contributions to the `design-system` package. + +```bash +git clone https://github.com/appsmithorg/design-system.git +``` + +Get all dependencies with +```bash +cd design-system/packages/design-system-old +yarn install +``` + +Then run storybook in development and watch mode with +```bash +yarn run design-system:storybook +``` + +Any stories you write within `design-system/packages/design-system-old/src/**` will show up here. + +To use your local version of the package, run +```bash +yarn link +``` +in this repository, then copy instruction it outputs into the root directory of the repository you want to use this package in. +Run +```bash +yarn install +``` +again to be able to import the components using + +```jsx +import { TooltipComponent } from "@appsmithorg/design-system-old"; +``` + +### Create story template +``` +yarn create-story -f +``` +'folder-name' is the folder which holds the component which the story template is being created. This should be under 'src' folder. + +Happy playground testing! + +## Links + +- [Home page](https://www.appsmith.com) diff --git a/app/client/packages/design-system/ads-old/create_story.sh b/app/client/packages/design-system/ads-old/create_story.sh new file mode 100755 index 000000000000..f878b5c58cc8 --- /dev/null +++ b/app/client/packages/design-system/ads-old/create_story.sh @@ -0,0 +1,10 @@ +# usage ./create_story.sh -f +while getopts f: flag +do + case "${flag}" in + f) folder=${OPTARG};; + esac +done + +echo "Creating story for folder: $folder" +cat story_template.txt >> src/$folder/$folder.stories.tsx diff --git a/app/client/packages/design-system/ads-old/jest.config.js b/app/client/packages/design-system/ads-old/jest.config.js new file mode 100644 index 000000000000..d356d81e4110 --- /dev/null +++ b/app/client/packages/design-system/ads-old/jest.config.js @@ -0,0 +1,28 @@ +module.exports = { + setupFiles: ["jest-canvas-mock"], + roots: ["./src"], + setupFilesAfterEnv: ["./jest.setup.ts"], + testPathIgnorePatterns: ["node_modules/"], + testEnvironment: "jsdom", + testTimeout: 9000, + transform: { + "^.+\\.(png|js|ts|tsx)$": "ts-jest", + }, + testMatch: ["**/*.test.(ts|tsx)"], + moduleNameMapper: { + // Mocks out all these file formats when tests are run + "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": + "identity-obj-proxy", + "\\.(css|less|scss|sass)$": "identity-obj-proxy", + }, + moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node", "css"], + moduleDirectories: ["node_modules", "src"], + transformIgnorePatterns: [ + "/node_modules/(?!codemirror|react-dnd|dnd-core|@babel|(@blueprintjs/core/lib/esnext)|(@blueprintjs/core/lib/esm)|@github|lodash-es|@draft-js-plugins|react-documents)", + ], + globals: { + "ts-jest": { + isolatedModules: true, + }, + }, +}; diff --git a/app/client/packages/design-system/ads-old/jest.setup.ts b/app/client/packages/design-system/ads-old/jest.setup.ts new file mode 100644 index 000000000000..0c01334d1e6b --- /dev/null +++ b/app/client/packages/design-system/ads-old/jest.setup.ts @@ -0,0 +1,17 @@ +import "@testing-library/jest-dom"; + +window.scrollTo = jest.fn(); +Element.prototype.scrollIntoView = jest.fn(); +Element.prototype.scrollBy = jest.fn(); +const mockObserveFn = () => { + return { + observe: jest.fn(), + unobserve: jest.fn(), + disconnect: jest.fn(), + }; +}; + +window.IntersectionObserver = jest.fn().mockImplementation(mockObserveFn); +window.ResizeObserver = jest.fn().mockImplementation(mockObserveFn); + +Element.prototype.scrollTo = () => {}; diff --git a/app/client/packages/design-system/ads-old/package.json b/app/client/packages/design-system/ads-old/package.json new file mode 100644 index 000000000000..cd5d6b77fa07 --- /dev/null +++ b/app/client/packages/design-system/ads-old/package.json @@ -0,0 +1,42 @@ +{ + "name": "design-system-old", + "version": "1.1.17", + "description": "This is the package for the Appsmith design system components", + "main": "src/index.ts", + "sideEffects": false, + "scripts": { + "create-story": "./create_story.sh", + "lint": "yarn g:lint", + "prettier": "yarn g:prettier", + "test:unit": "yarn g:jest" + }, + "contributors": [ + "Albin ", + "Rohit Agarwal ", + "Tanvi Bhakta " + ], + "repository": { + "type": "git", + "url": "https://github.com/appsmithorg/design-system.git", + "directory": "packages/design-system" + }, + "license": "Apache-2.0", + "devDependencies": { + "@types/loadable__component": "^5.13.4", + "@types/react-form": "^4.0.2", + "@types/wait-on": "^5.2.0", + "concurrently": "^7.3.0", + "identity-obj-proxy": "3.0.0", + "react-toastify": "^5.5.0", + "wait-on": "^5.3.0" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ], + "dependencies": { + "emoji-mart": "3.0.1" + } +} diff --git a/app/client/packages/design-system/ads-old/src/AppIcon/index.tsx b/app/client/packages/design-system/ads-old/src/AppIcon/index.tsx new file mode 100644 index 000000000000..3d741747d43e --- /dev/null +++ b/app/client/packages/design-system/ads-old/src/AppIcon/index.tsx @@ -0,0 +1,724 @@ +import React, { useMemo } from "react"; +import styled from "styled-components"; +import type { CommonComponentProps } from "../types/common"; +import { Classes } from "../constants/classes"; +import { importRemixIcon, importSvg } from "../utils/icon-loadables"; + +const BagIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/bag.svg"), +); +const ProductIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/product.svg"), +); +const BookIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/book.svg"), +); +const CameraIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/camera.svg"), +); +const FileIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/file.svg"), +); +const ChatIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/chat.svg"), +); +const CalenderIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/calender.svg"), +); +const FrameIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/frame.svg"), +); +const GlobeIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/globe.svg"), +); +const ShopperIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/shopper.svg"), +); +const HeartIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/heart.svg"), +); +const FlightIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/flight.svg"), +); +const AlienIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/alien.svg"), +); +const BarGraphIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/bar-graph.svg"), +); +const BasketballIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/basketball.svg"), +); +const BicycleIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/bicycle.svg"), +); +const BirdIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/bird.svg"), +); +const BitcoinIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/bitcoin.svg"), +); +const BurgerIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/burger.svg"), +); +const BusIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/bus.svg"), +); +const AirplaneIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/airplane.svg"), +); +const CallIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/call.svg"), +); +const CarIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/car.svg"), +); +const CardIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/card.svg"), +); +const CatIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/cat.svg"), +); +const ChineseRemnibiIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/chinese-remnibi.svg"), +); +const CloudIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/cloud.svg"), +); +const CodingIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/coding.svg"), +); +const CouplesIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/couples.svg"), +); +const CricketIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/cricket.svg"), +); +const DiamondIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/diamond.svg"), +); +const DogIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/dog.svg"), +); +const DollarIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/dollar.svg"), +); +const EarthIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/earth.svg"), +); +const EmailIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/email.svg"), +); +const EurosIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/euros.svg"), +); +const FamilyIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/family.svg"), +); +const FlagIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/flag.svg"), +); +const FootballIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/football.svg"), +); +const HatIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/hat.svg"), +); +const HeadphonesIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/headphones.svg"), +); +const HospitalIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/hospital.svg"), +); +const JoystickIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/joystick.svg"), +); +const LaptopIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/laptop.svg"), +); +const LineChartIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/line-chart.svg"), +); +const LocationIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/location.svg"), +); +const LotusIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/lotus.svg"), +); +const LoveIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/love.svg"), +); +const MedalIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/medal.svg"), +); +const MedicalIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/medical.svg"), +); +const MoneyIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/money.svg"), +); +const MoonIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/moon.svg"), +); +const MugIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/mug.svg"), +); +const MusicIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/music.svg"), +); +const PantsIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/pants.svg"), +); +const PieChartIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/pie-chart.svg"), +); +const PizzaIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/pizza.svg"), +); +const PlantIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/plant.svg"), +); +const RainyWeatherIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/rainy-weather.svg"), +); +const RestaurantIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/restaurant.svg"), +); +const RocketIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/rocket.svg"), +); +const RoseIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/rose.svg"), +); +const RupeeIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/rupee.svg"), +); +const SaturnIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/saturn.svg"), +); +const ServerIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/server.svg"), +); +const ShakeHandsIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/shake-hands.svg"), +); +const ShirtIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/shirt.svg"), +); +const ShopIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/shop.svg"), +); +const SinglePersonIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/single-person.svg"), +); +const SmartphoneIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/smartphone.svg"), +); +const SnowyWeatherIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/snowy-weather.svg"), +); +const StarsIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/stars.svg"), +); +const SunflowerIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/sunflower.svg"), +); +const SystemIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/system.svg"), +); +const TeamIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/team.svg"), +); +const TreeIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/tree.svg"), +); +const UkPoundsIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/uk-pounds.svg"), +); +const WebsiteIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/website.svg"), +); +const YenIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/yen.svg"), +); +const SteamBowlIcon = importSvg( + async () => import("../assets/icons/ads/app-icons/steam-bowl.svg"), +); +const PackageIcon = importSvg( + async () => import("../assets/icons/ads/package.svg"), +); +const WorkflowsIcon = importSvg( + async () => import("../assets/icons/ads/workflows.svg"), +); +const ArrowDownIcon = importRemixIcon( + async () => import("remixicon-react/ArrowDownSLineIcon"), +); +const ArrowUpIcon = importRemixIcon( + async () => import("remixicon-react/ArrowUpSLineIcon"), +); +const ArrowLeftIcon = importRemixIcon( + async () => import("remixicon-react/ArrowLeftSLineIcon"), +); +const ArrowRightIcon = importRemixIcon( + async () => import("remixicon-react/ArrowRightSLineIcon"), +); +const HelpIcon = importRemixIcon( + async () => import("remixicon-react/QuestionLineIcon"), +); +const OpenNewTabIcon = importRemixIcon( + async () => import("remixicon-react/ShareBoxLineIcon"), +); +const ServerLineIcon = importRemixIcon( + async () => import("remixicon-react/ServerLineIcon"), +); + +enum Size { + xxs = "xxs", + xs = "xs", + small = "small", + medium = "medium", + large = "large", +} + +export const AppIconCollection = [ + "bag", + "product", + "book", + "camera", + "file", + "chat", + "calender", + "flight", + "frame", + "globe", + "shopper", + "heart", + "alien", + "bar-graph", + "basketball", + "bicycle", + "bird", + "bitcoin", + "burger", + "bus", + "call", + "car", + "card", + "cat", + "chinese-remnibi", + "cloud", + "coding", + "couples", + "cricket", + "diamond", + "dog", + "dollar", + "earth", + "email", + "euros", + "family", + "flag", + "football", + "hat", + "headphones", + "hospital", + "joystick", + "laptop", + "line-chart", + "location", + "lotus", + "love", + "medal", + "medical", + "money", + "moon", + "mug", + "music", + "package", + "pants", + "pie-chart", + "pizza", + "plant", + "rainy-weather", + "restaurant", + "rocket", + "rose", + "rupee", + "saturn", + "server", + "server-line", + "shake-hands", + "shirt", + "shop", + "single-person", + "smartphone", + "snowy-weather", + "stars", + "steam-bowl", + "sunflower", + "system", + "team", + "tree", + "uk-pounds", + "website", + "yen", + "airplane", + "arrow-down", + "arrow-up", + "arrow-left", + "arrow-right", + "help", + "open-new-tab", + "workflows", +] as const; + +export type AppIconName = (typeof AppIconCollection)[number]; + +interface cssAttributes { + width: number; + height: number; + padding: number; +} + +const appSizeHandler = (size: Size): cssAttributes => { + let width, height, padding; + switch (size) { + case Size.small: + width = 20; + height = 20; + padding = 5; + break; + case Size.medium: + width = 32; + height = 32; + padding = 20; + break; + case Size.large: + width = 50; + height = 50; + padding = 50; + break; + default: + width = 20; + height = 20; + padding = 5; + break; + } + return { width, height, padding }; +}; + +const IconWrapper = styled.a` + cursor: pointer; + width: ${(props) => props.styledProps.width}px; + height: ${(props) => props.styledProps.height}px; + &:focus { + outline: none; + } + svg { + width: ${(props) => props.styledProps.width}px; + height: ${(props) => props.styledProps.height}px; + path { + fill: var(--ads-app-icon-normal-color); + } + } +`; + +export type AppIconProps = CommonComponentProps & { + size?: Size; + name: AppIconName; + onClick?: (e: unknown) => void; +}; + +function AppIcon(props: AppIconProps) { + const styledProps = useMemo( + // @ts-expect-error Fix this the next time the file is edited + () => appSizeHandler(props.size != null || Size.medium), + [props], + ); + + let returnIcon; + switch (props.name) { + case "bag": + returnIcon = ; + break; + case "product": + returnIcon = ; + break; + case "book": + returnIcon = ; + break; + case "camera": + returnIcon = ; + break; + case "file": + returnIcon = ; + break; + case "chat": + returnIcon = ; + break; + case "calender": + returnIcon = ; + break; + case "frame": + returnIcon = ; + break; + case "globe": + returnIcon = ; + break; + case "shopper": + returnIcon = ; + break; + case "heart": + returnIcon = ; + break; + case "flight": + returnIcon = ; + break; + case "alien": + returnIcon = ; + break; + case "bar-graph": + returnIcon = ; + break; + case "basketball": + returnIcon = ; + break; + case "bicycle": + returnIcon = ; + break; + case "bird": + returnIcon = ; + break; + case "bitcoin": + returnIcon = ; + break; + case "burger": + returnIcon = ; + break; + case "bus": + returnIcon = ; + break; + case "call": + returnIcon = ; + break; + case "car": + returnIcon = ; + break; + case "card": + returnIcon = ; + break; + case "cat": + returnIcon = ; + break; + case "chinese-remnibi": + returnIcon = ; + break; + case "cloud": + returnIcon = ; + break; + case "coding": + returnIcon = ; + break; + case "couples": + returnIcon = ; + break; + case "cricket": + returnIcon = ; + break; + case "diamond": + returnIcon = ; + break; + case "dog": + returnIcon = ; + break; + case "airplane": + returnIcon = ; + break; + case "dollar": + returnIcon = ; + break; + case "earth": + returnIcon = ; + break; + case "email": + returnIcon = ; + break; + case "euros": + returnIcon = ; + break; + case "family": + returnIcon = ; + break; + case "flag": + returnIcon = ; + break; + case "football": + returnIcon = ; + break; + case "hat": + returnIcon = ; + break; + case "headphones": + returnIcon = ; + break; + case "hospital": + returnIcon = ; + break; + case "joystick": + returnIcon = ; + break; + case "laptop": + returnIcon = ; + break; + case "line-chart": + returnIcon = ; + break; + case "location": + returnIcon = ; + break; + case "lotus": + returnIcon = ; + break; + case "love": + returnIcon = ; + break; + case "medal": + returnIcon = ; + break; + case "medical": + returnIcon = ; + break; + case "money": + returnIcon = ; + break; + case "moon": + returnIcon = ; + break; + case "mug": + returnIcon = ; + break; + case "music": + returnIcon = ; + break; + case "pants": + returnIcon = ; + break; + case "pie-chart": + returnIcon = ; + break; + case "package": + returnIcon = ; + break; + case "workflows": + returnIcon = ; + break; + case "pizza": + returnIcon = ; + break; + case "plant": + returnIcon = ; + break; + case "rainy-weather": + returnIcon = ; + break; + case "restaurant": + returnIcon = ; + break; + case "rocket": + returnIcon = ; + break; + case "rose": + returnIcon = ; + break; + case "rupee": + returnIcon = ; + break; + case "saturn": + returnIcon = ; + break; + case "server": + returnIcon = ; + break; + case "server-line": + returnIcon = ; + break; + case "shake-hands": + returnIcon = ; + break; + case "shirt": + returnIcon = ; + break; + case "shop": + returnIcon = ; + break; + case "single-person": + returnIcon = ; + break; + case "smartphone": + returnIcon = ; + break; + case "snowy-weather": + returnIcon = ; + break; + case "stars": + returnIcon = ; + break; + case "sunflower": + returnIcon = ; + break; + case "steam-bowl": + returnIcon = ; + break; + case "system": + returnIcon = ; + break; + case "team": + returnIcon = ; + break; + case "tree": + returnIcon = ; + break; + case "uk-pounds": + returnIcon = ; + break; + case "website": + returnIcon = ; + break; + case "yen": + returnIcon = ; + break; + case "arrow-down": + returnIcon = ; + break; + case "arrow-up": + returnIcon = ; + break; + case "arrow-left": + returnIcon = ; + break; + case "arrow-right": + returnIcon = ; + break; + case "help": + returnIcon = ; + break; + case "open-new-tab": + returnIcon = ; + break; + default: + returnIcon = null; + break; + } + return returnIcon ? ( + + {returnIcon} + + ) : null; +} + +export default AppIcon; diff --git a/app/client/packages/design-system/ads-old/src/Breadcrumbs/index.tsx b/app/client/packages/design-system/ads-old/src/Breadcrumbs/index.tsx new file mode 100644 index 000000000000..f2a41f46365e --- /dev/null +++ b/app/client/packages/design-system/ads-old/src/Breadcrumbs/index.tsx @@ -0,0 +1,118 @@ +// TODO: In Phase 2, add a warn when this component doesn't have a component in it's ancestors +import type { ReactNode } from "react"; +import React from "react"; +import { Link, useLocation } from "react-router-dom"; +import styled from "styled-components"; +import Icon from "../Icon"; + +export interface BreadcrumbsProps { + items: { + href: string; + text: string; + }[]; +} +export interface BreadcrumbProps { + children: ReactNode; +} + +export const StyledBreadcrumbList = styled.ol` + list-style: none; + display: flex; + align-items: center; + font-size: 16px; + color: var(--ads-breadcrumbs-list-text-color); + margin-bottom: 23px; + + .breadcrumb-separator { + color: var(--ads-breadcrumbs-separator-text-color); + margin: auto 6px; + user-select: none; + } + + .t--breadcrumb-item { + &.active { + color: var(--ads-breadcrumbs-active-text-color); + font-size: 20px; + } + } +`; + +function BreadcrumbSeparator({ children, ...props }: { children: ReactNode }) { + return ( +
  • + {children} +
    • + ); +} + +function BreadcrumbItem({ children, ...props }: { children: ReactNode }) { + return ( +
  • + {children} +
    • + ); +} + +function BreadcrumbList(props: BreadcrumbProps) { + let children = React.Children.toArray(props.children); + + children = children.map((child, index) => ( + {child} + )); + + const lastIndex = children.length - 1; + + const childrenNew = children.reduce((acc: ReactNode[], child, index) => { + const notLast = index < lastIndex; + + if (notLast) { + acc.push( + child, + + + , + ); + } else { + acc.push(child); + } + return acc; + }, []); + + return ( + + {childrenNew} + + ); +} + +function Breadcrumbs(props: BreadcrumbsProps) { + const { pathname } = useLocation(); + return ( + + {props.items.map(({ href, text }) => + href === pathname ? ( + + {text} + + ) : ( + + {text} + + ), + )} + + ); +} + +export default Breadcrumbs; diff --git a/app/client/packages/design-system/ads-old/src/Button/Button.test.tsx b/app/client/packages/design-system/ads-old/src/Button/Button.test.tsx new file mode 100644 index 000000000000..db0dd798888d --- /dev/null +++ b/app/client/packages/design-system/ads-old/src/Button/Button.test.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import "@testing-library/jest-dom"; +import { render, screen } from "@testing-library/react"; +import Button, { Size } from "./index"; +import { create } from "react-test-renderer"; + +describe(" +``` + +## Contribute + +1. Clone the repository to your local machine using the following command: + +```bash +git clone https://github.com/appsmithorg/design-system.git +``` +The repository you are cloing is a monorepo that contains several packages, each serving a different purpose. + +2. Navigate to the design-system directory + +```bash +cd design-system/packages/design-system +``` + +3. Get all dependencies with +```bash +yarn install +``` + +Then run storybook in development and watch mode with +```bash +yarn run storybook +``` + +Any stories you write within `design-system/packages/design-system/src/**` will show up here. + +4. To add a new component, use our template +```bash +yarn generate:component YOUR_NEW_COMPONENT_NAME +``` +This generates all the scaffolding our components use. Simply replace the fields in caps lock and develop away! + +5. To ensure that any changes you make are not breaking any other components or their stories, run +```bash +yarn test-storybook +``` +and fix any failures before you create a pull request. + +## Using your changes externally + +This repository is a library, and for any changes made here to reflect in another repository, the maintainers will have to publish a release. +To get your PR accepted, +1. Add a link to your PR in [#design-system](https://theappsmith.slack.com/archives/C0293DVQACW) and ask someone to generate a release for you. They will give you an alpha version. +2. Replace the version of design-system in the [appsmith repository](https://github.com/appsmithorg/appsmith/blob/da06cf7b4da657ba22a23f0780c253be3e4ba7cf/app/client/package.json#L96) with this alpha version. + +To use your local version of the package, run +```bash +yarn link +``` +in this repository, then copy instruction it outputs into the root directory of the repository you want to use this package in. +Run +```bash +yarn install +``` +again to be able to import the components using + +```jsx +import { Button } from "@appsmithorg/design-system"; +``` + +## Links + +- [Storybook](https://design-system.appsmith.com) diff --git a/app/client/packages/design-system/ads/fileTransformer.js b/app/client/packages/design-system/ads/fileTransformer.js new file mode 100644 index 000000000000..e1629110292a --- /dev/null +++ b/app/client/packages/design-system/ads/fileTransformer.js @@ -0,0 +1,7 @@ +const path = require("path"); + +module.exports = { + process(src, filename, config, options) { + return "module.exports = " + JSON.stringify(path.basename(filename)) + ";"; + }, +}; diff --git a/app/client/packages/design-system/ads/jest.config.js b/app/client/packages/design-system/ads/jest.config.js new file mode 100644 index 000000000000..ac214bc178d5 --- /dev/null +++ b/app/client/packages/design-system/ads/jest.config.js @@ -0,0 +1,16 @@ +module.exports = { + roots: ["", "/src"], // Set this to the directory containing your source code + modulePaths: [""], + moduleDirectories: ["node_modules", "src"], + setupFilesAfterEnv: ["/jest.setup.js"], // Optional: Additional setup + testEnvironment: "jsdom", + transform: { + "^.+\\.(ts|tsx)$": "ts-jest", // Use ts-jest for transforming TypeScript files + "\\.(svg)$": "/fileTransformer.js", // Create this file for SVG handling (see below) + }, + moduleNameMapper: { + // this mocks all binary files so jest doesn't try to convert it into js + "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": + "/fileTransformer.js", + }, +}; diff --git a/app/client/packages/design-system/ads/jest.setup.js b/app/client/packages/design-system/ads/jest.setup.js new file mode 100644 index 000000000000..1b9bddcd18b8 --- /dev/null +++ b/app/client/packages/design-system/ads/jest.setup.js @@ -0,0 +1 @@ +require("@testing-library/jest-dom/extend-expect"); diff --git a/app/client/packages/design-system/ads/package.json b/app/client/packages/design-system/ads/package.json new file mode 100644 index 000000000000..e0b216dabeb8 --- /dev/null +++ b/app/client/packages/design-system/ads/package.json @@ -0,0 +1,52 @@ +{ + "name": "design-system", + "version": "2.1.43", + "description": "This is the package for the design system that powers the Appsmith platform", + "main": "src/index.ts", + "sideEffects": false, + "scripts": { + "generate:component": "plop component", + "lint": "yarn g:lint", + "prettier": "yarn g:prettier", + "test:unit": "yarn g:jest" + }, + "author": "", + "license": "ISC", + "devDependencies": { + "@react-aria/focus": "^3.10.1", + "@react-types/button": "^3.7.0", + "@types/loadable__component": "^5.13.4", + "@types/react-datepicker": "^4.10.0", + "axe-core": "^4.7.2", + "concurrently": "^8.2.0", + "file-loader": "6.2.0", + "normalize.css": "^8.0.1", + "remark-gfm": "^3.0.1" + }, + "dependencies": { + "@radix-ui/react-dialog": "^1.0.2", + "@radix-ui/react-dropdown-menu": "^2.0.4", + "@radix-ui/react-hover-card": "^1.0.7", + "@radix-ui/react-popover": "^1.0.6", + "@radix-ui/react-tabs": "^1.0.2", + "@react-aria/button": "^3.7.0", + "@react-aria/checkbox": "^3.7.1", + "@react-aria/focus": "^3.10.1", + "@react-aria/link": "^3.3.6", + "@react-aria/radio": "^3.4.2", + "@react-aria/switch": "^3.3.1", + "@react-aria/textfield": "^3.8.1", + "@react-stately/radio": "^3.6.2", + "@react-stately/toggle": "^3.4.4", + "@xstyled/styled-components": "^3.8.0", + "csstype": "^3.1.2", + "date-fns": "^2.29.3", + "overlayscrollbars": "^2.7.2", + "overlayscrollbars-react": "^0.5.6", + "rc-select": "^14.4.3", + "rc-table": "^7.35.2", + "rc-tooltip": "^5.3.1", + "react-datepicker": "^4.10.0", + "react-toastify": "9.0.3" + } +} diff --git a/app/client/packages/design-system/ads/plop-templates/component.mdx.hbs b/app/client/packages/design-system/ads/plop-templates/component.mdx.hbs new file mode 100644 index 000000000000..74731fc0eba1 --- /dev/null +++ b/app/client/packages/design-system/ads/plop-templates/component.mdx.hbs @@ -0,0 +1,65 @@ +import { Canvas, Meta } from '@storybook/blocks'; + +import * as {{capitalize name}}Stories from './{{capitalize name}}.stories'; + + + +# {{capitalize name}} + + + + + +## Anatomy + +![{{capitalize name}} anatomy](./docs/{{capitalize name}}-anatomy.png) + + + +1. **Header:** Text title accompanied by an optional close button +2. **Content** Container for the main content of the modal; the content can be text, forms, lists, cards, or other elements. +4. **Footer:** Container for buttons related to the content of the modal + +## Spacing +![{{capitalize name}} spacing](./docs/{{capitalize name}}-spacing.png) + +## Kind + +### Kind 1 + + + +### Kind 2 + + + + +## Size + +### Size 1 + + + + +### Size 2 + + + + +## Usage + +### When to use + +### When not to use + +### Example: confirmation + +### Programmatically control + + +--- +## Resources + + +## References + diff --git a/app/client/packages/design-system/ads/plop-templates/component.tsx.hbs b/app/client/packages/design-system/ads/plop-templates/component.tsx.hbs new file mode 100644 index 000000000000..e26e723366d1 --- /dev/null +++ b/app/client/packages/design-system/ads/plop-templates/component.tsx.hbs @@ -0,0 +1,12 @@ +import React from "react"; + +import { {{capitalize name}}Props } from "./{{capitalize name}}.types"; +import { Styled{{capitalize name}} } from "./{{capitalize name}}.styles"; + +function {{capitalize name}}({ children, ...rest }: {{capitalize name}}Props) { + return {children}; +} + +{{capitalize name}}.displayName = "{{capitalize name}}"; + +export { {{capitalize name}} }; diff --git a/app/client/packages/design-system/ads/plop-templates/constants.ts.hbs b/app/client/packages/design-system/ads/plop-templates/constants.ts.hbs new file mode 100644 index 000000000000..bd9e771f9e8b --- /dev/null +++ b/app/client/packages/design-system/ads/plop-templates/constants.ts.hbs @@ -0,0 +1,6 @@ +import { CLASS_NAME_PREFIX } from "__config__/constants"; + +export const {{capitalize name}}ClassName = `${CLASS_NAME_PREFIX}-name`; +export const {{capitalize name}}SubElementClassName = `${ {{capitalize name}}ClassName}__sub-element`; +export const {{capitalize name}}SubElementChildClassName = `${ {{capitalize name}}SubElementClassName}-child`; +{{! Path: packages/design-system/plop-templates/index.ts.hbs }} diff --git a/app/client/packages/design-system/ads/plop-templates/index.ts.hbs b/app/client/packages/design-system/ads/plop-templates/index.ts.hbs new file mode 100644 index 000000000000..ec7092cafd1e --- /dev/null +++ b/app/client/packages/design-system/ads/plop-templates/index.ts.hbs @@ -0,0 +1,2 @@ +export * from "./{{capitalize name}}"; +export * from "./{{capitalize name}}.types"; diff --git a/app/client/packages/design-system/ads/plop-templates/stories.tsx.hbs b/app/client/packages/design-system/ads/plop-templates/stories.tsx.hbs new file mode 100644 index 000000000000..2b8873d62e6f --- /dev/null +++ b/app/client/packages/design-system/ads/plop-templates/stories.tsx.hbs @@ -0,0 +1,21 @@ +import React from "react"; +import { Meta, StoryObj } from "@storybook/react"; + +import { {{capitalize name}} } from "./{{capitalize name}}"; + +export default { + title: "ADS/{{capitalize name}}", + component: {{capitalize name}}, +} as Meta; + +type Story = StoryObj; + +export const {{capitalize name}}Story: Story = { + name: "{{capitalize name}}", + args: {}, + render: (args) => ( + <{{capitalize name}} {...args}> + content + + ), +}; diff --git a/app/client/packages/design-system/ads/plop-templates/styles.tsx.hbs b/app/client/packages/design-system/ads/plop-templates/styles.tsx.hbs new file mode 100644 index 000000000000..61b769e4ebe2 --- /dev/null +++ b/app/client/packages/design-system/ads/plop-templates/styles.tsx.hbs @@ -0,0 +1,24 @@ +import styled, { css } from "styled-components"; +import { YOUR_PROP_TYPE_1 } from "./{{capitalize name}}.types"; + +const Variables = css` + // Variables that are controlled, changed, or toggled entirely within this component + // are defined here and used in the component's styles. +`; + +// Kind style definitions +const YOUR_KINDS = css` + // Styles for the kinds defined in your type +`; + +export const Styled{{capitalize name}} = styled.span<{ + // Props that affect styles are passed through here. + YOUR_PROP: YOUR_PROP_TYPE_1; +}>` + ${Variables} + + /* Kind styles */ + ${({ YOUR_PROP }) => YOUR_PROP && YOUR_KINDS[YOUR_PROP]} /* Base style */ + + /* Additional styles and classes */ +`; diff --git a/app/client/packages/design-system/ads/plop-templates/types.ts.hbs b/app/client/packages/design-system/ads/plop-templates/types.ts.hbs new file mode 100644 index 000000000000..71580eac13e7 --- /dev/null +++ b/app/client/packages/design-system/ads/plop-templates/types.ts.hbs @@ -0,0 +1,5 @@ +// {{capitalize name}} props +export type {{capitalize name}}Props = { + children?: React.ReactNode; + className?: string; +}; diff --git a/app/client/packages/design-system/ads/plopfile.mjs b/app/client/packages/design-system/ads/plopfile.mjs new file mode 100644 index 000000000000..d3bb735fa8da --- /dev/null +++ b/app/client/packages/design-system/ads/plopfile.mjs @@ -0,0 +1,53 @@ +export default function (plop) { + plop.addHelper("capitalize", (text) => { + return text.charAt(0).toUpperCase() + text.slice(1); + }); + // component generator + plop.setGenerator("component", { + description: "Component generator", + prompts: [ + { + type: "input", + name: "name", + message: "Enter component name", + }, + ], + actions: [ + { + type: "add", + path: "src/{{capitalize name}}/{{capitalize name}}.tsx", + templateFile: "plop-templates/component.tsx.hbs", + }, + { + type: "add", + path: "src/{{capitalize name}}/index.ts", + templateFile: "plop-templates/index.ts.hbs", + }, + { + type: "add", + path: "src/{{capitalize name}}/{{capitalize name}}.stories.tsx", + templateFile: "plop-templates/stories.tsx.hbs", + }, + { + type: "add", + path: "src/{{capitalize name}}/{{capitalize name}}.styles.tsx", + templateFile: "plop-templates/styles.tsx.hbs", + }, + { + type: "add", + path: "src/{{capitalize name}}/{{capitalize name}}.types.ts", + templateFile: "plop-templates/types.ts.hbs", + }, + { + type: "add", + path: "src/{{capitalize name}}/{{capitalize name}}.constants.ts", + templateFile: "plop-templates/constants.ts.hbs", + }, + { + type: "add", + path: "src/{{capitalize name}}/{{capitalize name}}.mdx", + templateFile: "plop-templates/component.mdx.hbs", + }, + ], + }); +} diff --git a/app/client/packages/design-system/ads/src/AnnouncementModal/AnnouncementModal.constants.ts b/app/client/packages/design-system/ads/src/AnnouncementModal/AnnouncementModal.constants.ts new file mode 100644 index 000000000000..38f4fd5520a5 --- /dev/null +++ b/app/client/packages/design-system/ads/src/AnnouncementModal/AnnouncementModal.constants.ts @@ -0,0 +1,7 @@ +import { CLASS_NAME_PREFIX } from "../__config__/constants"; + +export const AnnouncementModalClassName = `${CLASS_NAME_PREFIX}-announcement-modal`; +export const AnnouncementModalBannerClassName = `${AnnouncementModalClassName}__banner`; +export const AnnouncementModalContentClassName = `${AnnouncementModalClassName}__content`; +export const AnnouncementModalContentDataClassName = `${AnnouncementModalContentClassName}-data`; +export const AnnouncementModalContentFooterClassName = `${AnnouncementModalContentClassName}-footer`; diff --git a/app/client/packages/design-system/ads/src/AnnouncementModal/AnnouncementModal.stories.tsx b/app/client/packages/design-system/ads/src/AnnouncementModal/AnnouncementModal.stories.tsx new file mode 100644 index 000000000000..0dda9474af7d --- /dev/null +++ b/app/client/packages/design-system/ads/src/AnnouncementModal/AnnouncementModal.stories.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import type { Meta, StoryObj } from "@storybook/react"; +import { AnnouncementModal } from "./AnnouncementModal"; +import { Button } from "../Button"; + +export default { + title: "ADS/Components/Announcement", + component: AnnouncementModal, +} as Meta; + +type Story = StoryObj; + +export const AnnouncementModalStory: Story = { + name: "Modal", + args: { + banner: "https://assets.appsmith.com/new-sidebar-banner.svg", + description: + "You can now write queries & JS functions as you refer to your UI on the side. This is a beta version that we will continue to improve with your feedback.", + title: "Code and UI side-by-side", + footer: ( + <> + + + + ), + isOpen: true, + isBeta: true, + }, + render: (args) => , +}; diff --git a/app/client/packages/design-system/ads/src/AnnouncementModal/AnnouncementModal.styles.tsx b/app/client/packages/design-system/ads/src/AnnouncementModal/AnnouncementModal.styles.tsx new file mode 100644 index 000000000000..a9f92019b0cc --- /dev/null +++ b/app/client/packages/design-system/ads/src/AnnouncementModal/AnnouncementModal.styles.tsx @@ -0,0 +1,43 @@ +import styled from "styled-components"; +import { ModalContent } from "../Modal"; + +export const StyledModalContent = styled(ModalContent)` + padding: 0; + width: 400px; + overflow: hidden; +`; + +export const BannerImage = styled.div<{ url: string }>` + height: 350px; + width: 100%; + background-image: url("${({ url }) => url}"); + background-position: center; + background-size: cover; +`; + +export const BannerContent = styled.div` + display: flex; + flex-direction: column; + padding: var(--ads-v2-spaces-9); + gap: var(--ads-v2-spaces-7); +`; + +export const BannerData = styled.div` + display: flex; + flex-direction: column; + align-items: start; + gap: var(--ads-v2-spaces-3); +`; + +export const BannerTitle = styled.div` + display: flex; + align-items: center; + justify-content: center; + gap: var(--ads-v2-spaces-3); +`; + +export const BannerFooter = styled.div` + display: flex; + flex-direction: row; + gap: var(--ads-v2-spaces-3); +`; diff --git a/app/client/packages/design-system/ads/src/AnnouncementModal/AnnouncementModal.tsx b/app/client/packages/design-system/ads/src/AnnouncementModal/AnnouncementModal.tsx new file mode 100644 index 000000000000..2161af26a077 --- /dev/null +++ b/app/client/packages/design-system/ads/src/AnnouncementModal/AnnouncementModal.tsx @@ -0,0 +1,61 @@ +import React from "react"; +import { Modal } from "../Modal"; + +import type { AnnouncementModalProps } from "./AnnouncementModal.types"; +import { + StyledModalContent, + BannerImage, + BannerContent, + BannerData, + BannerTitle, + BannerFooter, +} from "./AnnouncementModal.styles"; +import { Text } from "../Text"; +import { Tag } from "../Tag"; +import { + AnnouncementModalBannerClassName, + AnnouncementModalClassName, + AnnouncementModalContentClassName, + AnnouncementModalContentDataClassName, + AnnouncementModalContentFooterClassName, +} from "./AnnouncementModal.constants"; + +function AnnouncementModal({ + banner, + description, + footer, + isBeta, + isOpen, + title, +}: AnnouncementModalProps) { + return ( + + + + + + + {title} + {isBeta ? ( + + Beta + + ) : null} + + {description} + + + {footer} + + + + + ); +} + +AnnouncementModal.displayName = "AnnouncementModal"; + +export { AnnouncementModal }; diff --git a/app/client/packages/design-system/ads/src/AnnouncementModal/AnnouncementModal.types.ts b/app/client/packages/design-system/ads/src/AnnouncementModal/AnnouncementModal.types.ts new file mode 100644 index 000000000000..6e75757a8b71 --- /dev/null +++ b/app/client/packages/design-system/ads/src/AnnouncementModal/AnnouncementModal.types.ts @@ -0,0 +1,15 @@ +// AnnouncementModal props +export interface AnnouncementModalProps { + /** flag to show or hide modal */ + isOpen: boolean; + /** the banner url of the announcement */ + banner: string; + /** the title of the announcement */ + title: string; + /** the description of the announcement */ + description: string; + /** the footer of the announcement */ + footer?: React.ReactNode; + /** flag to show or hide beta flag */ + isBeta?: boolean; +} diff --git a/app/client/packages/design-system/ads/src/AnnouncementModal/index.ts b/app/client/packages/design-system/ads/src/AnnouncementModal/index.ts new file mode 100644 index 000000000000..d958f535fd67 --- /dev/null +++ b/app/client/packages/design-system/ads/src/AnnouncementModal/index.ts @@ -0,0 +1,2 @@ +export * from "./AnnouncementModal"; +export * from "./AnnouncementModal.types"; diff --git a/app/client/packages/design-system/ads/src/AnnouncementPopover/AnnouncementPopover.constants.ts b/app/client/packages/design-system/ads/src/AnnouncementPopover/AnnouncementPopover.constants.ts new file mode 100644 index 000000000000..1ec353910cef --- /dev/null +++ b/app/client/packages/design-system/ads/src/AnnouncementPopover/AnnouncementPopover.constants.ts @@ -0,0 +1,12 @@ +import { CLASS_NAME_PREFIX } from "../__config__/constants"; + +export const AnnouncementPopoverClassName = `${CLASS_NAME_PREFIX}-announcement-popover`; +export const AnnouncementPopoverTriggerClassName = `${AnnouncementPopoverClassName}__trigger`; +export const AnnouncementPopoverContentClassName = `${AnnouncementPopoverClassName}__content`; +export const AnnouncementPopoverArrowClassName = `${AnnouncementPopoverContentClassName}-arrow`; +export const AnnouncementPopoverBannerClassName = `${AnnouncementPopoverContentClassName}-banner`; +export const AnnouncementPopoverBannerCloseClassName = `${AnnouncementPopoverBannerClassName}-close`; +export const AnnouncementPopoverBodyClassName = `${AnnouncementPopoverContentClassName}-body`; +export const AnnouncementPopoverBodyTitleClassName = `${AnnouncementPopoverBodyClassName}-title`; +export const AnnouncementPopoverBodyDescriptionClassName = `${AnnouncementPopoverBodyClassName}-description`; +export const AnnouncementPopoverBodyFooterClassName = `${AnnouncementPopoverBodyClassName}-footer`; diff --git a/app/client/packages/design-system/ads/src/AnnouncementPopover/AnnouncementPopover.stories.tsx b/app/client/packages/design-system/ads/src/AnnouncementPopover/AnnouncementPopover.stories.tsx new file mode 100644 index 000000000000..4245e2b8948c --- /dev/null +++ b/app/client/packages/design-system/ads/src/AnnouncementPopover/AnnouncementPopover.stories.tsx @@ -0,0 +1,336 @@ +import React, { useState } from "react"; +import type { Meta, StoryObj } from "@storybook/react"; + +import { + AnnouncementPopover, + AnnouncementPopoverContent, + AnnouncementPopoverTrigger, +} from "./AnnouncementPopover"; +import { Button } from "../Button"; +import { Flex } from "../Flex"; + +export default { + title: "ADS/Components/Announcement", + component: AnnouncementPopover, + decorators: [ + (Story) => ( +
    + +
    + ), + ], +} as Meta; + +type Story = StoryObj; + +export const AnnouncementPopoverStory: Story = { + name: "Popover", + args: { + open: true, + }, + argTypes: { + open: { + control: { + type: "boolean", + }, + description: + "Whether the popover is open or not. By default popover opens based on hover", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + defaultOpen: { + control: { + type: "boolean", + }, + description: "Whether the popover is open by default or not", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + openDelay: { + control: { + type: "number", + }, + description: "Delay in ms before the popover opens.", + table: { + type: { + summary: "number", + }, + defaultValue: { + summary: "700", + }, + }, + }, + closeDelay: { + control: { + type: "number", + }, + description: "Delay in ms before the popover closes.", + table: { + type: { + summary: "number", + }, + defaultValue: { + summary: "300", + }, + }, + }, + }, + render: function Render(args) { + const [open, setOpen] = useState(args.open); + + return ( + + + Something that trigger the announcement + + + + + + } + onCloseButtonClick={() => setOpen(false)} + side="bottom" + title="Title of the banner" + /> + + ); + }, +}; + +type StoryContent = StoryObj; + +export const AnnouncementPopoverContentStory: StoryContent = { + name: "Popover Content", + args: { + arrowFillColor: "#F6F2FA", + banner: "https://assets.appsmith.com/new-sidebar-banner.svg", + description: + "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.", + side: "bottom", + title: "Title of the banner", + }, + argTypes: { + side: { + control: { + type: "select", + }, + options: ["top", "right", "bottom", "left"], + description: "Side of the popover", + table: { + type: { + summary: "top | right | bottom | left", + }, + defaultValue: { + summary: "bottom", + }, + }, + }, + sideOffset: { + control: { + type: "number", + }, + description: "The distance in pixels from the trigger.", + table: { + type: { + summary: "number", + }, + defaultValue: { + summary: "0", + }, + }, + }, + align: { + control: { + type: "select", + }, + options: ["start", "center", "end"], + description: "Align of the popover", + table: { + type: { + summary: "start | center | end", + }, + defaultValue: { + summary: "start", + }, + }, + }, + alignOffset: { + control: { + type: "number", + }, + description: + "An offset in pixels from the 'start' or 'end' alignment options.", + table: { + type: { + summary: "number", + }, + defaultValue: { + summary: "0", + }, + }, + }, + avoidCollisions: { + control: { + type: "boolean", + }, + description: + "When true, overrides the side andalign preferences to prevent collisions with boundary edges.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "true", + }, + }, + }, + collisionBoundary: { + control: { + type: "number", + }, + description: + "The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.", + table: { + type: { + summary: "Element | null | Array", + }, + defaultValue: { + summary: "[]", + }, + }, + }, + collisionPadding: { + control: { + type: "number", + }, + description: + "The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.", + table: { + type: { + summary: + "number | { top: number, right: number, bottom: number, left: number }", + }, + defaultValue: { + summary: "0", + }, + }, + }, + hideWhenDetached: { + control: { + type: "boolean", + }, + description: + "Whether to hide the content when the trigger becomes fully occluded.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + arrowFillColor: { + control: { + type: "color", + }, + description: "The fill color of the arrow.", + table: { + type: { + summary: "string", + }, + defaultValue: { + summary: "var(--ads-v2-colors-content-surface-default-bg)", + }, + }, + }, + banner: { + control: { + type: "text", + }, + description: "The banner image url.", + table: { + type: { + summary: "string", + }, + }, + }, + title: { + control: { + type: "text", + }, + description: "The title of the banner.", + table: { + type: { + summary: "string", + }, + }, + }, + description: { + control: { + type: "text", + }, + description: "The description of the banner.", + table: { + type: { + summary: "string", + }, + }, + }, + onCloseButtonClick: { + control: { + type: "number", + }, + description: "Callback when the close button is clicked.", + table: { + type: { + summary: "() => void", + }, + }, + }, + }, + render: function Render(args) { + return ( + + + Something that trigger the announcement + + + Got it + + } + /> + + ); + }, +}; diff --git a/app/client/packages/design-system/ads/src/AnnouncementPopover/AnnouncementPopover.styles.tsx b/app/client/packages/design-system/ads/src/AnnouncementPopover/AnnouncementPopover.styles.tsx new file mode 100644 index 000000000000..a87bae943b95 --- /dev/null +++ b/app/client/packages/design-system/ads/src/AnnouncementPopover/AnnouncementPopover.styles.tsx @@ -0,0 +1,51 @@ +import styled from "styled-components"; +import { Text } from "../Text"; +import { Content } from "@radix-ui/react-hover-card"; +import { AnnouncementPopoverArrowClassName } from "./AnnouncementPopover.constants"; + +export const StyledContent = styled(Content)` + display: flex; + width: 250px; + flex-direction: column; + background-color: var(--ads-v2-colors-content-surface-default-bg); + border: 1px solid var(--ads-v2-colors-content-container-default-border); + border-radius: var(--ads-v2-border-radius); + box-shadow: var(--ads-v2-shadow-popovers); + overflow: hidden; + z-index: 1001; + + .${AnnouncementPopoverArrowClassName} { + position: relative; + transform: rotate(180deg); + top: -3px; + visibility: visible; + } +`; + +export const StyledCustomBody = styled.div` + padding: var(--ads-v2-spaces-7); +`; + +export const StyledDescription = styled(Text)` + display: block; + margin-top: var(--ads-v2-spaces-3); + line-height: 20px; +`; + +export const StyledTitle = styled(Text)` + color: var(--ads-v2-color-fg-emphasis); + font-weight: 600; + line-height: 24px; +`; +export const StyledBanner = styled.div<{ backgroundUrl?: string }>` + height: 150px; + display: flex; + justify-content: flex-end; + background-image: url("${({ backgroundUrl }) => backgroundUrl}"); + background-size: cover; + padding: var(--ads-v2-spaces-5); +`; + +export const StyledFooter = styled.div` + margin-top: var(--ads-v2-spaces-5); +`; diff --git a/app/client/packages/design-system/ads/src/AnnouncementPopover/AnnouncementPopover.tsx b/app/client/packages/design-system/ads/src/AnnouncementPopover/AnnouncementPopover.tsx new file mode 100644 index 000000000000..fef245fc800d --- /dev/null +++ b/app/client/packages/design-system/ads/src/AnnouncementPopover/AnnouncementPopover.tsx @@ -0,0 +1,116 @@ +import React from "react"; +import * as HoverCard from "@radix-ui/react-hover-card"; +import clsx from "classnames"; + +import type { AnnouncementPopoverContentProps } from "./AnnouncementPopover.types"; +import { + StyledTitle, + StyledBanner, + StyledContent, + StyledCustomBody, + StyledDescription, + StyledFooter, +} from "./AnnouncementPopover.styles"; +import { + AnnouncementPopoverArrowClassName, + AnnouncementPopoverBannerClassName, + AnnouncementPopoverBannerCloseClassName, + AnnouncementPopoverBodyClassName, + AnnouncementPopoverBodyDescriptionClassName, + AnnouncementPopoverBodyFooterClassName, + AnnouncementPopoverBodyTitleClassName, + AnnouncementPopoverContentClassName, + AnnouncementPopoverTriggerClassName, +} from "./AnnouncementPopover.constants"; +import { Button } from "../Button"; + +const AnnouncementPopover = HoverCard.Root; +AnnouncementPopover.displayName = "AnnouncementPopover"; + +function AnnouncementPopoverTrigger(props: HoverCard.HoverCardTriggerProps) { + return ( + + {props.children} + + ); +} + +function AnnouncementPopoverContent({ + arrowFillColor = "var(--ads-v2-colors-content-surface-default-bg)", + banner, + className, + description, + footer, + onCloseButtonClick, + title, + ...rest +}: AnnouncementPopoverContentProps) { + return ( + + + + ; +}; + +export const ButtonStory = Template.bind({}) as StoryObj; +ButtonStory.storyName = "Button"; +ButtonStory.args = { + children: "Click me", + onClick: () => alert("Button clicked!"), + startIcon: "arrow-left-line", + endIcon: "arrow-right-line", + size: "md", + kind: "primary", + type: "button", +}; + +export const ButtonPrimaryStory = Template.bind({}) as StoryObj; +ButtonPrimaryStory.args = { + ...ButtonStory.args, + kind: "primary", +}; + +export const ButtonSecondaryStory = Template.bind({}) as StoryObj; +ButtonSecondaryStory.args = { + ...ButtonStory.args, + kind: "secondary", +}; + +export const ButtonTertiaryStory = Template.bind({}) as StoryObj; +ButtonTertiaryStory.args = { + ...ButtonStory.args, + kind: "tertiary", +}; + +export const ButtonErrorStory = Template.bind({}) as StoryObj; +ButtonErrorStory.args = { + ...ButtonStory.args, + kind: "error", +}; + +export const ButtonDisabledStory = Template.bind({}) as StoryObj; +ButtonDisabledStory.args = { + ...ButtonStory.args, + isDisabled: true, +}; + +export const ButtonLoadingStory = Template.bind({}) as StoryObj; +ButtonLoadingStory.args = { + ...ButtonStory.args, + isLoading: true, +}; + +export const IconButtonStory = Template.bind({}) as StoryObj; +IconButtonStory.storyName = "Icon Button"; +IconButtonStory.args = { + onClick: () => alert("Button clicked!"), + startIcon: "arrow-left-line", + size: "md", + kind: "primary", + isIconButton: true, + type: "button", +}; diff --git a/app/client/packages/design-system/ads/src/Button/Button.styles.tsx b/app/client/packages/design-system/ads/src/Button/Button.styles.tsx new file mode 100644 index 000000000000..19252abfda6e --- /dev/null +++ b/app/client/packages/design-system/ads/src/Button/Button.styles.tsx @@ -0,0 +1,273 @@ +import styled, { css } from "styled-components"; +import { + ButtonContentChildrenClassName, + ButtonContentIconEndClassName, + ButtonContentIconStartClassName, + ButtonLoadingClassName, +} from "./Button.constants"; +import type { ButtonSizes, ButtonKind } from "./Button.types"; + +const Variables = css` + --button-color-bg: var(--ads-v2-colors-action-primary-surface-default-bg); + --button-color-fg: var(--ads-v2-colors-action-primary-label-default-fg); + --button-color-border: var( + --ads-v2-colors-action-primary-surface-default-border + ); + --button-font-weight: 600; + --button-font-size: 14px; + --button-padding: var(--ads-v2-spaces-3) var(--ads-v2-spaces-4); + --button-height: 24px; + --button-gap: var(--ads-v2-spaces-2); +`; + +const getSizes = (size: ButtonSizes, isIconButton?: boolean) => { + const Sizes = { + sm: css` + --button-font-weight: 500; + --button-font-size: 12px; + --button-padding: ${isIconButton + ? "var(--ads-v2-spaces-2)" + : "var(--ads-v2-spaces-2) var(--ads-v2-spaces-3)"}; + --button-gap: var(--ads-v2-spaces-2); + `, + md: css` + --button-font-weight: 600; + --button-font-size: 14px; + --button-padding: ${isIconButton + ? "var(--ads-v2-spaces-3)" + : "var(--ads-v2-spaces-3) var(--ads-v2-spaces-4)"}; + --button-gap: var(--ads-v2-spaces-3); + `, + }; + return Sizes[size]; +}; + +const getHeights = (size: ButtonSizes, isIconButton?: boolean) => { + const Heights = { + sm: css` + --button-height: 24px; + ${isIconButton && `width: 24px;`} + `, + md: css` + --button-height: 36px; + ${isIconButton && `width: 36px;`} + `, + // lg: css` + // --button-height: 40px; + // `, + }; + return Heights[size]; +}; + +const Kind = { + primary: css` + --button-color-bg: var(--ads-v2-colors-action-primary-surface-default-bg); + --button-color-fg: var(--ads-v2-colors-action-primary-label-default-fg); + --button-color-border: var( + --ads-v2-colors-action-primary-surface-default-border + ); + + &:hover:not([data-disabled="true"]):not([data-loading="true"]) { + --button-color-bg: var(--ads-v2-colors-action-primary-surface-hover-bg); + --button-color-fg: var(--ads-v2-colors-action-primary-label-default-fg); + --button-color-border: var( + --ads-v2-colors-action-primary-surface-hover-border + ); + } + + &:active:not([data-disabled="true"]):not([data-loading="true"]) { + --button-color-bg: var(--ads-v2-colors-action-primary-surface-active-bg); + --button-color-fg: var(--ads-v2-colors-action-primary-label-default-fg); + --button-color-border: var( + --ads-v2-colors-action-primary-surface-active-border + ); + } + `, + secondary: css` + --button-color-bg: var(--ads-v2-colors-action-secondary-surface-default-bg); + --button-color-fg: var(--ads-v2-colors-action-secondary-label-default-fg); + --button-color-border: var( + --ads-v2-colors-action-secondary-surface-default-border + ); + + &:hover:not([data-disabled="true"]):not([data-loading="true"]) { + --button-color-bg: var(--ads-v2-colors-action-secondary-surface-hover-bg); + --button-color-fg: var(--ads-v2-colors-action-secondary-label-default-fg); + --button-color-border: var( + --ads-v2-colors-action-secondary-surface-hover-border + ); + } + + &:active:not([data-disabled="true"]):not([data-loading="true"]) { + --button-color-bg: var( + --ads-v2-colors-action-secondary-surface-active-bg + ); + --button-color-fg: var(--ads-v2-colors-action-secondary-label-default-fg); + --button-color-border: var( + --ads-v2-colors-action-secondary-surface-active-border-emphasis + ); + } + `, + tertiary: css` + --button-color-bg: var(--ads-v2-colors-action-tertiary-surface-default-bg); + --button-color-fg: var(--ads-v2-colors-action-tertiary-label-default-fg); + --button-color-border: var( + --ads-v2-colors-action-tertiary-surface-default-border + ); + // We only apply mix-blend-mode-to tertiary button because other buttons are + // not supposed to be on a background other than white. + mix-blend-mode: multiply; + + &:hover:not([data-disabled="true"]):not([data-loading="true"]) { + --button-color-bg: var(--ads-v2-colors-action-tertiary-surface-hover-bg); + --button-color-fg: var(--ads-v2-colors-action-tertiary-label-default-fg); + } + + &:active:not([data-disabled="true"]):not([data-loading="true"]) { + --button-color-bg: var(--ads-v2-colors-action-tertiary-surface-active-bg); + --button-color-fg: var(--ads-v2-colors-action-tertiary-label-default-fg); + } + + &:disabled { + --button-color-bg: var( + --ads-v2-colors-action-tertiary-surface-default-bg + ); + } + `, + error: css` + --button-color-bg: var(--ads-v2-colors-action-error-surface-default-bg); + --button-color-fg: var(--ads-v2-colors-action-error-label-default-fg); + --button-color-border: var( + --ads-v2-colors-action-error-surface-default-border + ); + + &:hover:not([data-disabled="true"]):not([data-loading="true"]) { + --button-color-bg: var(--ads-v2-colors-action-error-surface-hover-bg); + --button-color-fg: var(--ads-v2-colors-action-error-label-default-fg); + } + + &:active:not([data-disabled="true"]):not([data-loading="true"]) { + --button-color-bg: var(--ads-v2-colors-action-error-surface-active-bg); + --button-color-fg: var(--ads-v2-colors-action-error-label-default-fg); + } + `, +}; + +export const ButtonContent = styled.div<{ + isIconButton?: boolean; + size?: ButtonSizes; +}>` + /* Content is separated out to make opacity driven loader functionality. */ + /* Size style */ + ${({ isIconButton, size }) => size && getSizes(size, isIconButton)} + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: var(--button-gap); + background-color: var(--button-color-bg); + border: 1px solid var(--button-color-border); + width: 100%; + height: 100%; + box-sizing: border-box; + padding: var(--button-padding); + border-radius: inherit; + + & > .${ButtonContentChildrenClassName} { + display: flex; + justify-content: center; + align-items: center; + } + + & + > .${ButtonContentChildrenClassName}, + & + > .${ButtonContentChildrenClassName} + > * { + color: var(--button-color-fg); + font-family: var(--ads-v2-font-family); + font-weight: var(--button-font-weight); + font-size: var(--button-font-size); + } + + & > .${ButtonContentIconStartClassName} > svg, + & > .${ButtonContentIconEndClassName} > svg { + color: var(--button-color-fg); + } +`; + +export const StyledButton = styled.button<{ + kind?: ButtonKind; + UNSAFE_height?: string; + size?: ButtonSizes; + UNSAFE_width?: string; + disabled?: boolean; + isIconButton?: boolean; +}>` + ${Variables} + /* Kind style */ + ${({ kind }) => kind && Kind[kind]} + /* Button heights */ + ${({ isIconButton, size }) => size && getHeights(size, isIconButton)} + + && { + position: relative; + cursor: pointer; + border-radius: var(--ads-v2-border-radius) !important; + border: none; + background-color: transparent; + color: var(--button-color-fg); + text-decoration: none; + ${({ UNSAFE_height }) => + UNSAFE_height + ? `height: ${UNSAFE_height};` + : `height: var(--button-height);`} + ${({ UNSAFE_width }) => UNSAFE_width && `width: ${UNSAFE_width};`} + padding: 0; + box-sizing: border-box; + overflow: hidden; + min-width: ${({ isIconButton }) => + isIconButton ? "unset" : "fit-content"}; + + /* button disabled style */ + &[data-disabled="true"] { + cursor: not-allowed; + opacity: var(--ads-v2-opacity-disabled); + } + + /* Loader styles */ + & > .${ButtonLoadingClassName} { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; + color: var(--button-color-fg); + } + + /* Loading styles */ + &[data-loading="true"] { + cursor: not-allowed; + + & > ${ButtonContent} { + opacity: var(--ads-v2-opacity-disabled); + } + + & > ${ButtonContent} > * { + visibility: hidden; + } + } + + /* Focus styles */ + &:focus-visible { + outline: var(--ads-v2-border-width-outline) solid + var(--ads-v2-color-outline); + outline-offset: var(--ads-v2-offset-outline); + } + } +`; diff --git a/app/client/packages/design-system/ads/src/Button/Button.tsx b/app/client/packages/design-system/ads/src/Button/Button.tsx new file mode 100644 index 000000000000..7a62dfee77a0 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Button/Button.tsx @@ -0,0 +1,113 @@ +import React, { forwardRef } from "react"; +import clsx from "classnames"; + +import { StyledButton, ButtonContent } from "./Button.styles"; +import type { ButtonProps } from "./Button.types"; +import { useDOMRef } from "../__hooks__/useDomRef"; +import { Icon } from "../Icon"; +import { + ButtonClassName, + ButtonLoadingClassName, + ButtonLoadingIconClassName, + ButtonContentClassName, + ButtonContentChildrenClassName, + ButtonContentIconStartClassName, + ButtonContentIconEndClassName, +} from "./Button.constants"; +import { Spinner } from "../Spinner"; + +/** + * TODO: + * - if both left and right icon is used, disregard left icon and print a warning in the console. + */ +const Button = forwardRef( + (props, ref): JSX.Element => { + const { + children, + className, + endIcon, + isIconButton, + isLoading, + kind, + renderAs, + size, + startIcon, + UNSAFE_height, + UNSAFE_width, + ...rest + } = props; + // disable button when loading + rest.onClick = + props.isLoading || props.isDisabled ? undefined : props.onClick; + const buttonRef = useDOMRef(ref); + return ( + + {/* Loading section */} + {isLoading === true && ( + + )} + + {/* Button content */} + + {/* Start Icon Section */} + {startIcon ? ( + + ) : null} + + {/* Children section */} + {children && ( + {children} + )} + + {/* End Icon Section */} + {endIcon ? ( + + ) : null} + + + ); + }, +); + +Button.displayName = "Button"; + +Button.defaultProps = { + size: "sm", + kind: "primary", + isLoading: false, + isDisabled: false, + type: "button", +}; + +export { Button }; diff --git a/app/client/packages/design-system/ads/src/Button/Button.types.ts b/app/client/packages/design-system/ads/src/Button/Button.types.ts new file mode 100644 index 000000000000..085339905f32 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Button/Button.types.ts @@ -0,0 +1,40 @@ +import type React from "react"; +import type { Sizes } from "../__config__/types"; + +// Button types +export type ButtonKind = "primary" | "secondary" | "tertiary" | "error"; + +// Button sizes +export type ButtonSizes = Extract; + +// Button props +export type ButtonProps = { + /** The HTML element to render the button as. */ + renderAs?: "button" | "a"; + /** The class name to apply to the button component. */ + className?: string; + children?: React.ReactNode | string; + /** Whether the button should display a loading spinner. */ + isLoading?: boolean; + /** Whether the button is disabled. */ + isDisabled?: boolean; + /** Whether the button contains only an icon or not. If true, only pass the icon value to startIcon. */ + isIconButton?: boolean; + /** The visual style to apply to the button. */ + kind?: ButtonKind; + /** The size of the button. */ + size?: ButtonSizes; + /** The icon to display before the button text. Pass name of the icon from remix-icon library(eg: home-2-line) or an svg icon. */ + startIcon?: string; + /** The icon to display after the button text. Pass name of the icon from remix-icon library(eg: home-2-line) or an svg icon. */ + endIcon?: string; + /** The height of the button. Accepts all css units. */ + UNSAFE_height?: string; + /** The width of the button. Accepts all css units. */ + UNSAFE_width?: string; + /** The href attribute to apply to the button if it renders as an anchor. */ + href?: string; + /** The type of the button. This defaults to button type. */ + type?: "button" | "submit" | "reset"; +} & React.ButtonHTMLAttributes & + React.AnchorHTMLAttributes; diff --git a/app/client/packages/design-system/ads/src/Button/index.ts b/app/client/packages/design-system/ads/src/Button/index.ts new file mode 100644 index 000000000000..d22e95bbf3c1 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Button/index.ts @@ -0,0 +1,2 @@ +export * from "./Button"; +export * from "./Button.types"; diff --git a/app/client/packages/design-system/ads/src/Callout/Callout.constants.ts b/app/client/packages/design-system/ads/src/Callout/Callout.constants.ts new file mode 100644 index 000000000000..7890f26c57bf --- /dev/null +++ b/app/client/packages/design-system/ads/src/Callout/Callout.constants.ts @@ -0,0 +1,8 @@ +import { CLASS_NAME_PREFIX } from "../__config__/constants"; + +export const CalloutClassName = `${CLASS_NAME_PREFIX}-callout`; +export const CalloutIconContainerClassName = `${CalloutClassName}__icon-container`; +export const CalloutChildrenClassName = `${CalloutClassName}__children`; +export const CalloutChildrenChildClassName = `${CalloutClassName}__children-child`; +export const CalloutChildrenLinkClassName = `${CalloutClassName}__children-link`; +export const CalloutCloseClassName = `${CalloutClassName}__close`; diff --git a/app/client/packages/design-system/ads/src/Callout/Callout.mdx b/app/client/packages/design-system/ads/src/Callout/Callout.mdx new file mode 100644 index 000000000000..9551876fffcc --- /dev/null +++ b/app/client/packages/design-system/ads/src/Callout/Callout.mdx @@ -0,0 +1,74 @@ +import { Canvas, Meta } from "@storybook/blocks"; + +import * as CalloutStories from "./Callout.stories"; + + + +# Callout + +Callouts are messages that communicate the system’s response to the user. +System response. We currently use toasts to communicate system response across the app. Callouts are typically persistent unless the user discards them. The information kind of the callout can be used to emphasize certain information on the page, even if it is technically not a system response.. in this case, it is a system’s “suggestion” rather than a response. + + + +## Anatomy + +1. **Icon:** Informs users of the kind of notification at a glance. +2. **Action (actionable only):** Tertiary button that allows users to address the notification or navigates them to a page with further details. +3. **Close button (optional):** Closes the notification. +4. **Message:** Provides additional detail and actionable steps for the user to take. + +![Callout anatomy](./docs/callout-anatomy.png) + +## Spacing + +Callouts will take the smallest width possible in relation to its content. It has a minimum width, but its maximum width is constrained by its parent. +![Callout spacing](./docs/callout-spacing.png) + +## Kind + +### Info + +Use the callout kind: info to provide additional context or explanations for various components and widgets used in the app. + + + +### Success + +The callout kind: success can be utilized to celebrate successful operations, such as saving data, and executing actions. +It can be used to provide positive feedback to users, reinforcing that their actions have been completed successfully. + + + +### Warning + +Use warning callouts when you want the user to take a specific action or to warn them that something is about to go wrong. The callout kind: warning can be used to caution users about potentially risky actions, like deleting data or making irreversible changes. +It can also be used to warn users about deprecated features or upcoming changes to the application. + + + +### Error + +Use Error callouts kind: error to alert users about critical issues, such as data validation errors, failed API requests, or any system-related problems. +Use error banners to inform users something critical has happened and requires immediate attention. + + + +## Other variations + +### Closable + +Include the close button if it is not critical for a user to read or interact with the notification. + +### With link + +Use callouts with links to direct users to external resources, and official documentation for more in-depth explanations or troubleshooting. + + + +## Usage + +1. Callouts are sparingly to maintain their impact and avoid overwhelming the user with excessive visual elements. +2. Use Callouts for crucial information, errors, and warnings, or provide essential guidance. +3. Keep the content of the callout concise and clear. Avoid unnecessary jargon or technical language that might confuse users. +4. Use short sentences or bullet points to deliver the message concisely. diff --git a/app/client/packages/design-system/ads/src/Callout/Callout.stories.tsx b/app/client/packages/design-system/ads/src/Callout/Callout.stories.tsx new file mode 100644 index 000000000000..a28c5207dbb3 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Callout/Callout.stories.tsx @@ -0,0 +1,104 @@ +import React from "react"; +import { MemoryRouter } from "react-router-dom"; +import { Callout } from "./Callout"; +import type { CalloutProps } from "./Callout.types"; +import type { StoryObj } from "@storybook/react"; + +export default { + title: "ADS/Components/Callout", + component: Callout, + argTypes: { + _componentType: { + table: { + disable: true, + }, + }, + }, + decorators: [ + (Story: () => React.ReactNode) => {Story()}, + ], +}; + +// eslint-disable-next-line react/function-component-definition +const Template = (args: CalloutProps) => { + return {args.children}; +}; + +export const CalloutStory = Template.bind({}) as StoryObj; +CalloutStory.storyName = "Callout"; +CalloutStory.args = { + children: "This is a successful callout", +}; +CalloutStory.argTypes = { + children: { + control: { + type: "text", + }, + table: { + type: { + summary: "ReactNode", + }, + }, + }, + kind: { + defaultValue: "info", + control: {}, + }, +}; + +export const CalloutInfoStory = Template.bind({}) as StoryObj; +CalloutInfoStory.args = { + ...CalloutStory.args, + kind: "info", +}; +export const CalloutSuccessStory = Template.bind({}) as StoryObj; +CalloutSuccessStory.args = { + ...CalloutStory.args, + kind: "success", +}; + +export const CalloutWarningStory = Template.bind({}) as StoryObj; +CalloutWarningStory.args = { + ...CalloutStory.args, + kind: "warning", +}; + +export const CalloutErrorStory = Template.bind({}) as StoryObj; +CalloutErrorStory.args = { + ...CalloutStory.args, + kind: "error", +}; + +export const CalloutWithLink = Template.bind({}) as StoryObj; +CalloutWithLink.args = { + children: "This is a successful callout", + links: [ + { + to: "https://www.appsmith.com", + children: "Home", + }, + { + children: "Docs", + onClick: () => { + // eslint-disable-next-line no-console + console.log("I'm clicking things!"); + }, + }, + ], +}; +CalloutWithLink.argTypes = { + children: { + control: { + type: "text", + }, + table: { + type: { + summary: "ReactNode", + }, + }, + }, + kind: { + defaultValue: "info", + control: {}, + }, +}; diff --git a/app/client/packages/design-system/ads/src/Callout/Callout.styles.tsx b/app/client/packages/design-system/ads/src/Callout/Callout.styles.tsx new file mode 100644 index 000000000000..26e379eee234 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Callout/Callout.styles.tsx @@ -0,0 +1,85 @@ +import styled, { css } from "styled-components"; +import type { CalloutKind } from "./Callout.types"; +import { Button } from "../Button"; +import { Text } from "../Text"; + +const Variables = css` + --callout-color-background: var( + --ads-v2-colors-response-info-surface-default-bg + ); +`; + +const KindMap = { + success: css` + --callout-color-background: var( + --ads-v2-colors-response-success-surface-default-bg + ); + `, + warning: css` + --callout-color-background: var( + --ads-v2-colors-response-warning-surface-default-bg + ); + `, + info: css` + --callout-color-background: var( + --ads-v2-colors-response-info-surface-default-bg + ); + `, + error: css` + --callout-color-background: var( + --ads-v2-colors-response-error-surface-default-bg + ); + `, +}; + +export const StyledCallout = styled.div<{ + isClosed?: boolean; + kind: CalloutKind; +}>` + ${Variables} + + ${({ kind }) => kind && KindMap[kind]} + + // TODO: get minh, minw from vasanth (with all optionals switched off) + min-height: 40px; + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: flex-start; + gap: var(--ads-v2-spaces-3); + border-radius: var(--ads-v2-border-radius); + padding: var(--ads-v2-spaces-3) var(--ads-v2-spaces-4); + + // to ensure that small window sizes don't reduce the background size of callout + flex-shrink: 0; + + background-color: var(--callout-color-background); + + ${({ isClosed }) => isClosed && `display: none;`} +`; + +export const StyledCloseButton = styled(Button)` + && { + margin-left: auto; + cursor: pointer; + min-width: fit-content; + } +`; + +export const StyledLinks = styled.div` + display: flex; + flex-direction: row; + gap: var(--ads-v2-spaces-4); + margin-top: var(--ads-v2-spaces-3); + margin-bottom: var(--ads-v2-spaces-1); +`; + +export const StyledIconContainer = styled.div``; + +export const StyledChildrenContainer = styled.div` + margin-top: var(--ads-v2-spaces-1); +`; + +export const StyledChildren = styled(Text)` + color: var(--ads-v2-color-fg-emphasis); +`; diff --git a/app/client/packages/design-system/ads/src/Callout/Callout.tsx b/app/client/packages/design-system/ads/src/Callout/Callout.tsx new file mode 100644 index 000000000000..3c6e32cd1739 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Callout/Callout.tsx @@ -0,0 +1,100 @@ +import React from "react"; + +import type { CalloutProps } from "./Callout.types"; +import { + StyledCallout, + StyledChildrenContainer, + StyledCloseButton, + StyledIconContainer, + StyledLinks, + StyledChildren, +} from "./Callout.styles"; +import { getIconByKind } from "../Icon/getIconByKind"; +import { Link } from "../Link"; +import { + CalloutChildrenChildClassName, + CalloutChildrenClassName, + CalloutChildrenLinkClassName, + CalloutClassName, + CalloutCloseClassName, + CalloutIconContainerClassName, +} from "./Callout.constants"; + +/* + * TODO: + * - What will keyboard navigation for this look like? + */ +function Callout({ + _componentType = "callout", + children, + isClosable, + kind = "info", + links, + onClose, + ...rest +}: CalloutProps) { + const [isClosed, setClosed] = React.useState(false); + + return ( + + {_componentType === "callout" && ( + + {kind && getIconByKind(kind)} + + )} + + {_componentType === "banner" && ( + + {kind && getIconByKind(kind)} + + )} + + {children} + + {links && ( + + {links.map((link) => { + const { endIcon, onClick, startIcon, to, ...restOfLink } = link; + return ( + + {link.children} + + ); + })} + + )} + + {isClosable && ( + { + setClosed(true); + onClose && onClose(); + }} + size="sm" + startIcon="close-line" + /> + )} + + ); +} + +Callout.displayName = "Callout"; + +export { Callout }; diff --git a/app/client/packages/design-system/ads/src/Callout/Callout.types.ts b/app/client/packages/design-system/ads/src/Callout/Callout.types.ts new file mode 100644 index 000000000000..c9d1e5a20742 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Callout/Callout.types.ts @@ -0,0 +1,24 @@ +import type React from "react"; +import type { Kind } from "../__config__/types"; +import type { LinkProps } from "../Link"; + +export type CalloutKind = Kind; + +export type CalloutLinkProps = Omit; + +export type CalloutProps = { + /** (try not to) pass addition classes here */ + className?: string; + /** the words you want to display */ + children: React.ReactNode; + /** visual style to be used indicating type of callout */ + kind?: CalloutKind; + /** whether or not the callout should be closable */ + isClosable?: boolean; + /** any additional links that might be present in the callout */ + links?: CalloutLinkProps[]; + /** Not to use outside DS repo */ + _componentType?: "callout" | "banner"; + /** callback for when the callout is closed */ + onClose?: () => void; +} & React.HTMLAttributes; diff --git a/app/client/packages/design-system/ads/src/Callout/index.ts b/app/client/packages/design-system/ads/src/Callout/index.ts new file mode 100644 index 000000000000..60c6157b1175 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Callout/index.ts @@ -0,0 +1,2 @@ +export * from "./Callout"; +export * from "./Callout.types"; diff --git a/app/client/packages/design-system/ads/src/Checkbox/Checkbox.constants.ts b/app/client/packages/design-system/ads/src/Checkbox/Checkbox.constants.ts new file mode 100644 index 000000000000..bfc5d129008e --- /dev/null +++ b/app/client/packages/design-system/ads/src/Checkbox/Checkbox.constants.ts @@ -0,0 +1,5 @@ +import { CLASS_NAME_PREFIX } from "../__config__/constants"; + +export const CheckboxClassName = `${CLASS_NAME_PREFIX}-checkbox`; +export const CheckboxClassNameLabel = `${CheckboxClassName}__label`; +export const CheckboxClassNameSquare = `${CheckboxClassName}__square`; diff --git a/app/client/packages/design-system/ads/src/Checkbox/Checkbox.mdx b/app/client/packages/design-system/ads/src/Checkbox/Checkbox.mdx new file mode 100644 index 000000000000..4f6bc14ecec9 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Checkbox/Checkbox.mdx @@ -0,0 +1,64 @@ +import { Canvas, Meta } from "@storybook/blocks"; + +import * as CheckboxStories from "./Checkbox.stories"; + + + +# Checkbox + +Checkboxes are form based elements. They require an explicit confirmation (usually via a save or a submit button) for their values to be stored. The result of the action should be communicated to the user (how?). + +Checkboxes can also be used to allow users to select multiple options from a group. When using checkboxes, ensure clear and accurate labeling to convey the meaning of each checkbox. Provide feedback to users when a checkbox is selected or deselected, such as displaying a message. Avoid using an excessive number of checkboxes on a single page to prevent overwhelming the user with excessive options. + +> TODO: How can one provide feedback to users when a checkbox is selected or deselected? + + + +## Anatomy + +1. **Checkbox**: The selection control. +2. **Checkbox label**: Text label associated with the checkbox + +### Copy + +- Provide clear and descriptive labels for each checkbox option. +- Start all checkbox labels with a capital letter. +- Don't include punctuation after checkbox labels. + +![Checkbox anatomy](./docs/checkbox-anatomy.png) + +## Spacing + +![Checkbox spacing](./docs/checkbox-spacing.png) + +## Usage + +### When to use + +- To present multiple options that can each be selected. +- For changes that require confirmation after selection. + +### When not to use + +- When only one of multiple options can be selected — use a [radio group](https://design-system.appsmith.com/?path=/docs/design-system-radio--documentation). +- You want to group multiple options together into a single basic choice — use a [radio group](https://design-system.appsmith.com/?path=/docs/design-system-radio--documentation). +- For single on/off settings with an instant response — use a [switch](https://design-system.appsmith.com/?path=/docs/design-system-switch--documentation). +- Limited space: When there is limited space available for options or when the list of options is lengthy — use a [Select](https://design-system.appsmith.com/?path=/docs/design-system-select--documentation). You can even configure the select to allow picking multiple options. + +## States + +### Checked + +The state of the checkbox is handled internally by default. If you need the state of the checkbox, you can control it yourself via the `isSelected` and `onChange` props. + + + +### Disabled + + + +### Indeterminate + +Indeterminate state is typically used in a table, or some other group, to convey that some of the children checkboxes have been ticked and others have not. You can find an example of this usage in the audit logs. + + diff --git a/app/client/packages/design-system/ads/src/Checkbox/Checkbox.stories.tsx b/app/client/packages/design-system/ads/src/Checkbox/Checkbox.stories.tsx new file mode 100644 index 000000000000..637c706a5991 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Checkbox/Checkbox.stories.tsx @@ -0,0 +1,40 @@ +import React from "react"; +import { Checkbox } from "./Checkbox"; +import type { CheckboxProps } from "./Checkbox.types"; +import type { StoryObj } from "@storybook/react"; + +export default { + title: "ADS/Components/Checkbox", + component: Checkbox, +}; + +// eslint-disable-next-line react/function-component-definition +const Template = ({ children, ...args }: CheckboxProps) => { + return {children}; +}; + +export const CheckboxStory = Template.bind({}) as StoryObj; +CheckboxStory.storyName = "Checkbox"; +CheckboxStory.args = { + isIndeterminate: false, + value: "soccer", + children: "Soccer", +}; + +export const CheckboxCheckedStory = Template.bind({}) as StoryObj; +CheckboxCheckedStory.args = { + ...CheckboxStory.args, + isSelected: true, +}; + +export const CheckboxDisabledStory = Template.bind({}) as StoryObj; +CheckboxDisabledStory.args = { + ...CheckboxStory.args, + isDisabled: true, +}; + +export const CheckboxIndeterminateStory = Template.bind({}) as StoryObj; +CheckboxIndeterminateStory.args = { + ...CheckboxStory.args, + isIndeterminate: true, +}; diff --git a/app/client/packages/design-system/ads/src/Checkbox/Checkbox.styles.tsx b/app/client/packages/design-system/ads/src/Checkbox/Checkbox.styles.tsx new file mode 100644 index 000000000000..029251d2aa2b --- /dev/null +++ b/app/client/packages/design-system/ads/src/Checkbox/Checkbox.styles.tsx @@ -0,0 +1,175 @@ +import styled, { css } from "styled-components"; +import { CheckboxClassNameSquare } from "./Checkbox.constants"; + +const Variables = css` + /* This is a category level token.Since this is specific to checkbox, it is added here. */ + --ads-v2-colors-control-checkbox-icon-checked-fg: var( + --ads-v2-color-fg-on-brand-secondary + ); + + --checkbox-color-label: var(--ads-v2-colors-control-label-default-fg); + --checkbox-color-border: var(--ads-v2-colors-control-field-default-border); + --checkbox-color-background: var(--ads-v2-colors-control-field-default-bg); +`; + +const Checkbox = css` + input[type="checkbox"] { + opacity: 0; + position: absolute; + left: 0; + } + + cursor: pointer; + position: relative; + padding-left: var(--ads-v2-spaces-7); + font-family: var(--ads-v2-font-family); + font-size: 14px; + color: var(--checkbox-color-label); + display: flex; + align-items: start; + justify-content: start; + user-select: none; + line-height: initial; + + & > * { + cursor: pointer; + } + + span${"." + CheckboxClassNameSquare} { + position: absolute; + left: 0; + top: 0; + width: 16px; + height: 16px; + border: 1px solid var(--checkbox-color-border); + border-radius: var(--ads-v2-border-radius); + box-sizing: border-box; + background-color: var(--checkbox-color-background); + transition: + background-color 200ms ease, + border 200ms ease; + } + + input[type="checkbox"]:checked + span${"." + CheckboxClassNameSquare} { + --checkbox-color-border: var(--ads-v2-colors-control-field-checked-border); + --checkbox-color-background: var(--ads-v2-colors-control-field-checked-bg); + } + + span${"." + CheckboxClassNameSquare}::after { + content: ""; + opacity: 0; + position: absolute; + left: 2px; + top: 8px; + width: 5px; + height: var(--ads-v2-spaces-1); + border-radius: 4px; + background-color: var(--ads-v2-colors-control-checkbox-icon-checked-fg); + transform: rotateZ(48deg); + z-index: 2; + } + + input[type="checkbox"]:checked + span${"." + CheckboxClassNameSquare}::after { + opacity: 1; + } + + span${"." + CheckboxClassNameSquare}::before { + content: ""; + opacity: 0; + position: absolute; + left: 3px; + top: 6px; + width: 10px; + height: var(--ads-v2-spaces-1); + border-radius: 4px; + background-color: var(--ads-v2-colors-control-checkbox-icon-checked-fg); + transform: rotateZ(304deg); + z-index: 2; + } + + input[type="checkbox"]:checked + + span${"." + CheckboxClassNameSquare}::before { + opacity: 1; + } +`; + +export const StyledCheckbox = styled.label<{ + isChecked: boolean; + isIndeterminate?: boolean; + isFocusVisible?: boolean; + isDisabled?: boolean; +}>` + ${Variables}; + + ${Checkbox} + + ${({ isIndeterminate }) => { + if (isIndeterminate) { + return css` + span${"." + CheckboxClassNameSquare} { + --checkbox-color-border: var( + --ads-v2-colors-control-field-checked-border + ); + --checkbox-color-background: var( + --ads-v2-colors-control-field-checked-hover-bg + ); + } + + span${"." + CheckboxClassNameSquare}::after { + opacity: 1; + left: 2px; + top: 6px; + width: 10px; + transform: rotateZ(0deg); + } + + span${"." + CheckboxClassNameSquare}::before { + display: none; + } + `; + } + }} + + ${({ isFocusVisible }) => { + if (isFocusVisible === true) { + return css` + span${"." + CheckboxClassNameSquare} { + outline: var(--ads-v2-border-width-outline) solid + var(--ads-v2-color-outline); + outline-offset: var(--ads-v2-offset-outline); + } + `; + } + }} + + ${({ isChecked, isDisabled }) => { + if (isDisabled) { + return css` + opacity: var(--ads-v2-opacity-disabled); + &, + & > * { + cursor: not-allowed !important; + } + `; + } else { + return isChecked + ? css` + &:hover > span${"." + CheckboxClassNameSquare} { + --checkbox-color-background: var( + --ads-v2-colors-control-field-checked-hover-bg + ) !important; + --checkbox-color-border: var( + --ads-v2-colors-control-field-checked-hover-border + ) !important; + } + ` + : css` + &:hover > span${"." + CheckboxClassNameSquare} { + --checkbox-color-border: var( + --ads-v2-colors-control-field-hover-border + ); + } + `; + } + }} +`; diff --git a/app/client/packages/design-system/ads/src/Checkbox/Checkbox.tsx b/app/client/packages/design-system/ads/src/Checkbox/Checkbox.tsx new file mode 100644 index 000000000000..8e4a63887352 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Checkbox/Checkbox.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import { useCheckbox } from "@react-aria/checkbox"; +import { useToggleState } from "@react-stately/toggle"; +import { useFocusRing } from "@react-aria/focus"; +import clsx from "classnames"; + +import type { CheckboxProps } from "./Checkbox.types"; +import { StyledCheckbox } from "./Checkbox.styles"; +import { + CheckboxClassName, + CheckboxClassNameSquare, +} from "./Checkbox.constants"; + +function Checkbox(props: CheckboxProps) { + const { children, className, isDisabled, isIndeterminate } = props; + const state = useToggleState(props); + const ref = React.useRef(null); + const { inputProps } = useCheckbox(props, state, ref); + const { focusProps, isFocusVisible } = useFocusRing(); + + return ( + + {children} + + + + ); +} + +Checkbox.displayName = "Checkbox"; + +Checkbox.defaultProps = { + isIndeterminate: false, + isDisabled: false, +}; + +export { Checkbox }; diff --git a/app/client/packages/design-system/ads/src/Checkbox/Checkbox.types.tsx b/app/client/packages/design-system/ads/src/Checkbox/Checkbox.types.tsx new file mode 100644 index 000000000000..a20f43929020 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Checkbox/Checkbox.types.tsx @@ -0,0 +1,14 @@ +import type { ReactNode } from "react"; +import type { AriaCheckboxProps } from "@react-aria/checkbox"; + +export type CheckboxProps = { + name?: string; + value?: string; + children?: ReactNode; + isDefaultSelected?: boolean; + isSelected?: boolean; + isIndeterminate?: boolean; + isDisabled?: boolean; + onChange?: (isSelected: boolean) => void; +} & Omit & + Omit, "onChange">; diff --git a/app/client/packages/design-system/ads/src/Checkbox/index.ts b/app/client/packages/design-system/ads/src/Checkbox/index.ts new file mode 100644 index 000000000000..cd1d2c345e9d --- /dev/null +++ b/app/client/packages/design-system/ads/src/Checkbox/index.ts @@ -0,0 +1,2 @@ +export * from "./Checkbox"; +export * from "./Checkbox.types"; diff --git a/app/client/packages/design-system/ads/src/Collapsible/Collapsible.constants.ts b/app/client/packages/design-system/ads/src/Collapsible/Collapsible.constants.ts new file mode 100644 index 000000000000..d6cd7c0ffd98 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Collapsible/Collapsible.constants.ts @@ -0,0 +1,5 @@ +import { CLASS_NAME_PREFIX } from "../__config__/constants"; + +export const CollapsibleClassName = `${CLASS_NAME_PREFIX}-collapsible`; +export const CollapsibleHeaderClassName = `${CollapsibleClassName}__header`; +export const CollapsibleContentClassName = `${CLASS_NAME_PREFIX}__content`; diff --git a/app/client/packages/design-system/ads/src/Collapsible/Collapsible.mdx b/app/client/packages/design-system/ads/src/Collapsible/Collapsible.mdx new file mode 100644 index 000000000000..51de7166254c --- /dev/null +++ b/app/client/packages/design-system/ads/src/Collapsible/Collapsible.mdx @@ -0,0 +1,57 @@ +import { Canvas, Meta } from "@storybook/blocks"; + +import * as CollapsibleStories from "./Collapsible.stories"; + + + +# Collapsible + +A collapsible is a component that has related items under a section heading. These items could be either all content or all controls, but never both together. It retains memory of its past state. + + + +## Anatomy + +1. **Header**: contains the section title and is control for revealing the panel. +2. **Arrow**: indicates if the panel is open or closed. +3. **Icon**: (optional). + +### Copy + +The collapsible's header should be the category name for the group of items in it. Avoid using generic terms like "Show More" and "Hide Details". The UX already does the job of drawing attention to the interaction, and therefore the label should provide a hint as to what the user will find inside it. + +### Scrolling content + +If the content within the collapsible extends beyond the visible area of the screen, the collapsible element should stretch to accommodate the entire content, but should never scroll. However, the parent of the collapsible should scroll. Horizontal scrolling must also be avoided entirely within the collapsible component. + +![Collapsible anatomy](./docs/collapsible-anatomy.png) + +## Spacing + +![Collapsible spacing](./docs/collapsible-spacing.png) + +## When to use + +- To organize related information. +- To shorten pages and reduce scrolling when content is not crucial to read in full. +- When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel. +- Do not hide critical information or actions behind collapsible components. Users should not miss important content due to it being hidden. + +### Examples + +1. Widget drawer (a simple collapsible) + In the widget drawer, a collapsible contains the list of widgets grouped by type of widget + +2. Entity explorer (a collapsible with supplementary action and nested items) + In the entity explorer, a collapsible opens up queries, data sources, installed libraries, etc. + +3. Pages panel (a collapsible with a supplementary action) + In the pages panel, users can add a new page and view all other pages + +4. Property pane (a collapsible with a chevron icon on the right) + In the property pane, users can see all section properties under a collapsible, it can be anything from inputs, toggles, text area and more. + +## States + +The collapsible element operates in two primary modes: collapsed and expanded. The chevron icon located at the end of the collapsible signifies its current state. +By default, the collapsible starts out collapsed, so all content is concealed. This initial collapsed state offers users opportunity to look at information that is perhaps more relevant in the rest of the page. diff --git a/app/client/packages/design-system/ads/src/Collapsible/Collapsible.stories.tsx b/app/client/packages/design-system/ads/src/Collapsible/Collapsible.stories.tsx new file mode 100644 index 000000000000..a16ad07bfd1b --- /dev/null +++ b/app/client/packages/design-system/ads/src/Collapsible/Collapsible.stories.tsx @@ -0,0 +1,245 @@ +import React from "react"; +import { + Collapsible, + CollapsibleContent, + CollapsibleHeader, +} from "./Collapsible"; +import { Text } from "../Text"; +import { useArgs } from "@storybook/preview-api"; +import { ARROW_POSITIONS, type CollapsibleProps } from "./Collapsible.types"; +import type { StoryObj } from "@storybook/react"; + +export default { + title: "ADS/Components/Collapsible", + decorators: [ + (Story: () => React.ReactNode) => ( +
    {Story()}
    + ), + ], + component: Collapsible, + parameters: { + docs: { + description: { + component: + "Collapsibles can expand when clicked on. They allow you to hide content that is not immediately relevant to the user.", + }, + }, + }, + subcomponents: { + CollapsibleContent, + CollapsibleHeader, + }, +}; + +// eslint-disable-next-line react/function-component-definition +const CollapsibleTemplate = () => { + const [{ arrowPosition, className, isOpen }, updateArgs] = useArgs(); + const changeOpenState = (state: boolean) => updateArgs({ isOpen: state }); + + return ( + + + Collapsible Header + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + tincidunt, nisl eget aliquam tincidunt, nunc nisl aliquam nisl, et + aliquam nisl nisl sit amet nisl. Sed tincidunt, nisl eget aliquam + tincidunt, nunc nisl aliquam nisl, et aliquam nisl nisl sit amet nisl. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + tincidunt, nisl eget aliquam tincidunt, nunc nisl aliquam nisl, et + aliquam nisl nisl sit amet nisl. Sed tincidunt, nisl eget aliquam + tincidunt, nunc nisl aliquam nisl, et aliquam nisl nisl sit amet nisl. + + + + ); +}; + +export const CollapsibleStory = CollapsibleTemplate.bind({}) as StoryObj; +CollapsibleStory.storyName = "Collapsible"; +CollapsibleStory.args = { + isOpen: false, + arrowPosition: ARROW_POSITIONS.START, +}; +CollapsibleStory.argTypes = { + children: { + description: "Both header and content of the collapsible will go here.", + table: { + type: { + summary: "React.ReactNode", + }, + defaultValue: { + summary: "undefined", + }, + }, + }, + isOpen: { + control: { + type: "boolean", + }, + description: "The open state of the collapsible.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + onOpenChange: { + action: "onOpenChange", + description: "Callback for when the collapsible is opened or closed.", + table: { + type: { + summary: "(isOpen: boolean) => void", + }, + defaultValue: { + summary: "undefined", + }, + }, + }, + className: { + description: "(try not to) pass addition classes here.", + table: { + type: { + summary: "string", + }, + }, + }, + arrowPosition: { + control: "radio", + options: ["start", "end"], + defaultValue: "start", + description: "Position of the arrow icons.", + table: { + type: { + summary: `"start" | "end"`, + }, + defaultValue: { + summary: "start", + }, + }, + }, +}; + +// eslint-disable-next-line react/function-component-definition +const CollapsibleHeaderTemplate = (args: CollapsibleProps) => { + const [{ arrowPosition, className, isOpen }, updateArgs] = useArgs(); + const changeOpenState = (state: boolean) => updateArgs({ isOpen: state }); + + return ( + + + {args.children} + + + ); +}; + +export const CollapsibleHeaderStory = CollapsibleHeaderTemplate.bind( + {}, +) as StoryObj; +CollapsibleHeaderStory.storyName = "Header"; +CollapsibleHeaderStory.args = { + children: Collapsible Header, + isOpen: false, + arrowPosition: ARROW_POSITIONS.START, +}; +CollapsibleHeaderStory.argTypes = { + children: { + description: `Any React Node that will go in the header. + Clicking on this will toggle the collapsible.`, + table: { + type: { + summary: "React.ReactNode", + }, + defaultValue: { + summary: "undefined", + }, + }, + }, + className: { + description: "(try not to) pass addition classes here.", + table: { + type: { + summary: "string", + }, + }, + }, + arrowPosition: { + control: "radio", + options: ["start", "end"], + defaultValue: "start", + description: "Position of the arrow icons.", + table: { + type: { + summary: `"start" | "end"`, + }, + defaultValue: { + summary: "start", + }, + }, + }, +}; + +// eslint-disable-next-line react/function-component-definition +const CollapsibleContentTemplate = (args: CollapsibleProps) => { + const [{ className, isOpen }, updateArgs] = useArgs(); + const changeOpenState = (state: boolean) => updateArgs({ isOpen: state }); + + return ( + + + {args.children} + + + ); +}; + +export const CollapsibleContentStory = CollapsibleContentTemplate.bind( + {}, +) as StoryObj; +CollapsibleContentStory.storyName = "Content"; +CollapsibleContentStory.args = { + isOpen: true, + children: ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt, + nisl eget aliquam tincidunt, nunc nisl aliquam nisl, et aliquam nisl nisl + sit amet nisl. Sed tincidunt, nisl eget aliquam tincidunt, nunc nisl + aliquam nisl, et aliquam nisl nisl sit amet nisl. Lorem ipsum dolor sit + amet, consectetur adipiscing elit. Sed tincidunt, nisl eget aliquam + tincidunt, nunc nisl aliquam nisl, et aliquam nisl nisl sit amet nisl. Sed + tincidunt, nisl eget aliquam tincidunt, nunc nisl aliquam nisl, et aliquam + nisl nisl sit amet nisl. + + ), +}; +CollapsibleContentStory.argTypes = { + children: { + description: "Content to be displayed when the component is expanded.", + table: { + type: { + summary: "React.ReactNode", + }, + defaultValue: { + summary: "undefined", + }, + }, + }, + className: { + description: "(try not to) pass addition classes here.", + table: { + type: { + summary: "string", + }, + }, + }, +}; diff --git a/app/client/packages/design-system/ads/src/Collapsible/Collapsible.styles.tsx b/app/client/packages/design-system/ads/src/Collapsible/Collapsible.styles.tsx new file mode 100644 index 000000000000..ca162f166ef9 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Collapsible/Collapsible.styles.tsx @@ -0,0 +1,29 @@ +import { Icon } from "../Icon"; +import styled from "styled-components"; + +export const StyledCollapsibleContainer = styled.div` + display: flex; + flex-direction: column; + height: max-content; + gap: var(--ads-v2-spaces-2); +`; + +export const StyledCollapsibleHeader = styled.div` + cursor: pointer; + width: 100%; + display: flex; + align-items: center; + gap: var(--ads-v2-spaces-2); + padding: var(--ads-v2-spaces-2) var(--ads-v2-spaces-0); + color: var(--ads-v2-colors-content-label-default-fg); +`; + +export const StyledCollapsibleContent = styled.div<{ isExpanded: boolean }>` + display: ${(props) => (props.isExpanded ? "flex" : "none")}; + overflow: hidden; + flex-direction: column; +`; + +export const StyledEndIcon = styled(Icon)` + margin-left: auto; +`; diff --git a/app/client/packages/design-system/ads/src/Collapsible/Collapsible.tsx b/app/client/packages/design-system/ads/src/Collapsible/Collapsible.tsx new file mode 100644 index 000000000000..ca6bf74486a8 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Collapsible/Collapsible.tsx @@ -0,0 +1,111 @@ +import React, { useContext, useEffect, useState } from "react"; +import type { + CollapsibleHeaderProps, + CollapsibleContentProps, + CollapsibleProps, + CollapsibleContextType, +} from "./Collapsible.types"; +import { ARROW_POSITIONS } from "./Collapsible.types"; +import { + StyledCollapsibleContainer, + StyledCollapsibleContent, + StyledCollapsibleHeader, + StyledEndIcon, +} from "./Collapsible.styles"; +import { + CollapsibleClassName, + CollapsibleContentClassName, + CollapsibleHeaderClassName, +} from "./Collapsible.constants"; +import { Icon } from "../Icon"; +import { createContext } from "react"; +import clsx from "classnames"; + +export const CollapsibleContext = createContext({ + isExpanded: false, + handleOpenChange: () => { + return null; + }, +}); + +function CollapsibleHeader(props: CollapsibleHeaderProps) { + const { arrowPosition = ARROW_POSITIONS.START, children, className } = props; + const { handleOpenChange, isExpanded } = useContext(CollapsibleContext); + + return ( + + {arrowPosition === ARROW_POSITIONS.START && ( + + )} + + {children} + + {arrowPosition === ARROW_POSITIONS.END && ( + + )} + + ); +} + +function CollapsibleContent(props: CollapsibleContentProps) { + const { children, className } = props; + const { isExpanded } = useContext(CollapsibleContext); + + return ( + + {children} + + ); +} + +function Collapsible(props: CollapsibleProps) { + const { children, className, isOpen, onOpenChange } = props; + const [isExpanded, setIsExpanded] = useState(!!isOpen); + + useEffect(() => { + if (isOpen === true || isOpen === false) { + setIsExpanded(isOpen); + } + }, [isOpen]); + + const handleOpenChange = () => { + if (onOpenChange) { + onOpenChange(!isExpanded); + } + + setIsExpanded(!isExpanded); + }; + + return ( + + + {children} + + + ); +} + +Collapsible.displayName = "Collapsible"; +CollapsibleHeader.displayName = "CollapsibleHeader"; +CollapsibleContent.displayName = "CollapsibleContent"; + +export { Collapsible, CollapsibleHeader, CollapsibleContent }; diff --git a/app/client/packages/design-system/ads/src/Collapsible/Collapsible.types.ts b/app/client/packages/design-system/ads/src/Collapsible/Collapsible.types.ts new file mode 100644 index 000000000000..1c88961200f1 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Collapsible/Collapsible.types.ts @@ -0,0 +1,44 @@ +export interface CollapsibleProps { + /** + * Both header and content of the collapsible will go here. + */ + children: React.ReactNode; + /** The open state of the collapsible. */ + isOpen?: boolean; + /** Callback for when the collapsible is opened or closed. */ + onOpenChange?: (isOpen: boolean) => void; + /* (try not to) pass addition classes here. */ + className?: string; +} + +export interface CollapsibleContentProps { + /** Content to be displayed when the component is expanded. */ + children: React.ReactNode; + /* (try not to) pass addition classes here. */ + className?: string; +} + +export const ARROW_POSITIONS = { + START: "start", + END: "end", +} as const; + +export type ArrowPositions = + (typeof ARROW_POSITIONS)[keyof typeof ARROW_POSITIONS]; + +export type CollapsibleHeaderProps = { + /** + * Any React Node that will go in the header. + * Clicking on this will toggle the collapsible. + */ + children: React.ReactNode; + /* (try not to) pass addition classes here. */ + className?: string; + /** Position of the arrow icons. Defaults to "start" */ + arrowPosition?: ArrowPositions; +} & React.HTMLAttributes; + +export interface CollapsibleContextType { + isExpanded: boolean; + handleOpenChange: () => void; +} diff --git a/app/client/packages/design-system/ads/src/Collapsible/index.ts b/app/client/packages/design-system/ads/src/Collapsible/index.ts new file mode 100644 index 000000000000..2930c8bcfb5f --- /dev/null +++ b/app/client/packages/design-system/ads/src/Collapsible/index.ts @@ -0,0 +1,2 @@ +export * from "./Collapsible"; +export * from "./Collapsible.types"; diff --git a/app/client/packages/design-system/ads/src/DatePicker/DatePicker.constants.ts b/app/client/packages/design-system/ads/src/DatePicker/DatePicker.constants.ts new file mode 100644 index 000000000000..a31c90fa8682 --- /dev/null +++ b/app/client/packages/design-system/ads/src/DatePicker/DatePicker.constants.ts @@ -0,0 +1,10 @@ +import { CLASS_NAME_PREFIX } from "../__config__/constants"; + +export const DatePickerClassName = `${CLASS_NAME_PREFIX}-datepicker`; +export const DateTimePickerClassName = `${CLASS_NAME_PREFIX}-datetimepicker`; +export const DatePickerCalenderClassName = `${DatePickerClassName}__calender`; +export const DatePickerCalenderHeaderClassName = `${DatePickerCalenderClassName}-header`; +export const DatePickerFooterClassName = `${DatePickerCalenderClassName}-footer`; +export const DatePickerFooterTodayClassName = `${DatePickerCalenderClassName}-today`; +export const DatePickerFooterClearClassName = `${DatePickerCalenderClassName}-clear`; +export const DateRangePickerClassName = `${CLASS_NAME_PREFIX}-daterangepicker`; diff --git a/app/client/packages/design-system/ads/src/DatePicker/DatePicker.mdx b/app/client/packages/design-system/ads/src/DatePicker/DatePicker.mdx new file mode 100644 index 000000000000..f404fd375525 --- /dev/null +++ b/app/client/packages/design-system/ads/src/DatePicker/DatePicker.mdx @@ -0,0 +1,53 @@ +import { Canvas, Meta } from "@storybook/blocks"; + +import * as DatePickerStories from "./DatePicker.stories"; + + + +### Overview + +Date and time pickers enable users to select either a single date and time or a range of dates and times. + +Date pickers let users to choose dates from the past, present, or future. The type of date you require from the user will determine whether a simple or calendar date picker is more suitable. + +### Anatomy + +[//]: # "" + +1. Calendar icon +2. Input text +3. Input field +4. Previous and next month selectors +5. Year selector +6. Previous month date cell +7. Current date cell +8. Selected range start date +9. Selected range highlight +10. Selected range hovered cell +11. Selected range end date +12. Hovered cell +13. Next month date cell +14. Container elevation + +Variations + +Single Select / Range Select + +### Usage + +**Date Picker:** + +![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/664c7a08-a953-49f9-89e4-f84396f06101/Untitled.png) + +- Users can choose a single date using the date picker. +- When a user enters a new date in the date field input or selects a date from the calendar, it automatically replaces any previously-selected or placeholder value in the date input field. + +--- + +**Date Range Selection:** + +![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bca765c3-3250-4735-980a-571139297389/Untitled.png) + +- To specify a date range, two date pickers are used together. +- The first date picker represents the start ("from") date. +- The second date picker represents the end ("to") date. diff --git a/app/client/packages/design-system/ads/src/DatePicker/DatePicker.stories.tsx b/app/client/packages/design-system/ads/src/DatePicker/DatePicker.stories.tsx new file mode 100644 index 000000000000..60379f26429d --- /dev/null +++ b/app/client/packages/design-system/ads/src/DatePicker/DatePicker.stories.tsx @@ -0,0 +1,497 @@ +import React from "react"; +import { DatePicker } from "./DatePicker"; +import type { DatePickerProps } from "./DatePicker.types"; +import type { StoryObj } from "@storybook/react"; + +export default { + title: "ADS/Components/Date Picker", + component: DatePicker, + decorators: [ + (Story: () => React.ReactNode) => ( +
    + {Story()} +
    + ), + ], + argTypes: { + className: { + control: { + type: "text", + }, + description: "(try not to) pass addition classes here.", + table: { + type: { + summary: "string", + }, + defaultValue: { + summary: "", + }, + }, + }, + inputSize: { + control: { + type: "radio", + options: ["sm", "md"], + }, + description: "Size of the input field.", + table: { + type: { + summary: "sm | md", + }, + defaultValue: { + summary: "md", + }, + }, + }, + yearStartRange: { + control: { + type: "number", + }, + description: "Start year for the year dropdown.", + table: { + type: { + summary: "number", + }, + defaultValue: { + summary: "1990", + }, + }, + }, + yearEndRange: { + control: { + type: "number", + }, + description: "End year for the year dropdown.", + table: { + type: { + summary: "number", + }, + defaultValue: { + summary: "current year", + }, + }, + }, + allowSameDay: { + table: { + disable: true, + }, + }, + closeOnScroll: { + control: { + type: "boolean", + }, + description: + "Close the datepicker when the user scrolls anywhere in the screen.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "true", + }, + }, + }, + dateFormat: { + control: { + type: "text", + }, + description: "Date format for the input field.", + table: { + type: { + summary: "string", + }, + defaultValue: { + summary: "MM/dd/yyyy", + }, + }, + }, + isDisabled: { + control: { + type: "boolean", + }, + description: "Disable the datepicker.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + isRequired: { + control: { + type: "boolean", + }, + description: "Make the datepicker required.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + isReadOnly: { + control: { + type: "boolean", + }, + description: "Make the datepicker read only.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + startDate: { + table: { + disable: true, + }, + }, + endDate: { + table: { + disable: true, + }, + }, + excludeDates: { + control: { + type: "array", + }, + description: "Dates to be excluded from the datepicker.", + table: { + type: { + summary: "Date[]", + }, + defaultValue: { + summary: "[]", + }, + }, + }, + excludeDateIntervals: { + control: { + type: "string", + }, + description: "Date intervals to be excluded from the datepicker.", + table: { + type: { + summary: "Array<{ start: Date; end: Date }>", + }, + defaultValue: { + summary: "", + }, + }, + }, + excludeTimes: { + control: { + type: "array", + }, + description: "Times to be excluded from the datepicker.", + table: { + type: { + summary: "Date[]", + }, + defaultValue: { + summary: "[]", + }, + }, + }, + filterDate: { + control: { + type: "string", + }, + description: "Function to filter dates.", + table: { + type: { + summary: "(date: Date) => boolean", + }, + defaultValue: { + summary: "", + }, + }, + }, + filterTime: { + control: { + type: "string", + }, + description: "Function to filter times.", + table: { + type: { + summary: "(date: Date) => boolean", + }, + defaultValue: { + summary: "", + }, + }, + }, + isClearable: { + control: { + type: "boolean", + }, + description: "Allow the datepicker to be cleared.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + inputProps: { + control: { + type: "object", + }, + description: "Props to be passed to the input field.", + table: { + type: { + summary: "InputProps", + }, + defaultValue: { + summary: "{}", + }, + }, + }, + locale: { + control: { + type: "text", + }, + description: "Locale for the datepicker.", + table: { + type: { + summary: "string", + }, + defaultValue: { + summary: "en-US", + }, + }, + }, + label: { + control: { + type: "text", + }, + description: "Label for the datepicker.", + table: { + type: { + summary: "string", + }, + defaultValue: { + summary: "", + }, + }, + }, + minDate: { + control: { + type: "date", + }, + description: "Minimum date for the datepicker.", + table: { + type: { + summary: "Date", + }, + defaultValue: { + summary: "null", + }, + }, + }, + maxDate: { + control: { + type: "date", + }, + description: "Maximum date for the datepicker.", + table: { + type: { + summary: "Date", + }, + defaultValue: { + summary: "null", + }, + }, + }, + minTime: { + control: { + type: "date", + }, + description: "Minimum time for the datepicker.", + table: { + type: { + summary: "Date", + }, + defaultValue: { + summary: "null", + }, + }, + }, + maxTime: { + control: { + type: "date", + }, + description: "Maximum time for the datepicker.", + table: { + type: { + summary: "Date", + }, + defaultValue: { + summary: "null", + }, + }, + }, + onBlur: { + control: { + type: "string", + }, + description: "Function to be called when the datepicker is blurred.", + table: { + type: { + summary: "(event: React.FocusEvent) => void", + }, + defaultValue: { + summary: "", + }, + }, + }, + onCalendarClose: { + control: { + type: "string", + }, + description: "Function to be called when the calendar is closed.", + table: { + type: { + summary: "() => void", + }, + defaultValue: { + summary: "", + }, + }, + }, + onCalendarOpen: { + control: { + type: "string", + }, + description: "Function to be called when the calendar is opened.", + table: { + type: { + summary: "() => void", + }, + defaultValue: { + summary: "", + }, + }, + }, + onClickOutside: { + control: { + type: "string", + }, + description: + "Function to be called when the datepicker is clicked outside.", + table: { + type: { + summary: "(event: React.MouseEvent) => void", + }, + defaultValue: { + summary: "", + }, + }, + }, + open: { + control: { + type: "boolean", + }, + description: "Whether the datepicker is open or not.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + placeholderText: { + control: { + type: "text", + }, + description: "Placeholder text for the datepicker.", + table: { + type: { + summary: "string", + }, + defaultValue: { + summary: "", + }, + }, + }, + selected: { + control: { + type: "date", + }, + description: "Selected date for the datepicker.", + table: { + type: { + summary: "Date", + }, + defaultValue: { + summary: "null", + }, + }, + }, + shouldCloseOnSelect: { + control: { + type: "boolean", + }, + description: "Whether the datepicker should close on select or not.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "true", + }, + }, + }, + timeFormat: { + control: { + type: "text", + }, + description: "Time format for the datepicker.", + table: { + type: { + summary: "string", + }, + defaultValue: { + summary: "HH:mm", + }, + }, + }, + showTimeInput: { + control: { + type: "boolean", + }, + description: "Whether to show the time input or not.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + }, +}; + +// eslint-disable-next-line react/function-component-definition +const Template = (args: DatePickerProps) => { + return ; +}; + +export const DatePickerStory = Template.bind({}) as StoryObj; +DatePickerStory.storyName = "Date Picker"; +DatePickerStory.args = { + //add arguments here + excludeDates: [new Date()], + showTimeInput: true, +}; diff --git a/app/client/packages/design-system/ads/src/DatePicker/DatePicker.styles.tsx b/app/client/packages/design-system/ads/src/DatePicker/DatePicker.styles.tsx new file mode 100644 index 000000000000..6a4668c043d7 --- /dev/null +++ b/app/client/packages/design-system/ads/src/DatePicker/DatePicker.styles.tsx @@ -0,0 +1,52 @@ +import styled from "styled-components"; + +export const StyledDatePickerHeader = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + + & > div { + display: flex; + align-items: center; + gap: var(--ads-v2-spaces-2); + } +`; + +export const DatePickerFooter = styled.div` + display: flex; + justify-content: space-between; +`; + +export const DatePickerShortcutContainer = styled.div` + height: 100%; + display: flex; + flex-direction: row; + gap: var(--ads-v2-spaces-3); +`; +export const DatePickerShortcut = styled.div` + height: 100%; + display: flex; + flex-direction: column; + gap: var(--ads-v2-spaces-1); + align-items: end; +`; + +export const DatePickerShortcutItem = styled.div` + width: 120px; + box-sizing: border-box; + cursor: pointer; + color: var(--ads-v2-color-fg); + border-radius: var(--ads-v2-border-radius); + padding: var(--ads-v2-spaces-3); + font-size: 14px; + + &:hover:not([data-selected="true"]) { + background-color: var(--ads-v2-color-bg-subtle); + } + + &[data-selected="true"] { + background-color: var(--ads-v2-color-bg-muted); + color: var(--ads-v2-color-fg); + font-weight: unset; + } +`; diff --git a/app/client/packages/design-system/ads/src/DatePicker/DatePicker.tsx b/app/client/packages/design-system/ads/src/DatePicker/DatePicker.tsx new file mode 100644 index 000000000000..9ad7a2ca4f3a --- /dev/null +++ b/app/client/packages/design-system/ads/src/DatePicker/DatePicker.tsx @@ -0,0 +1,592 @@ +import React, { useEffect, useState } from "react"; +import BaseDatePicker from "react-datepicker"; +import range from "lodash/range"; +import getYear from "date-fns/getYear"; +import getMonth from "date-fns/getMonth"; +import clsx from "classnames"; + +import "react-datepicker/dist/react-datepicker.css"; +import "./styles.module.css"; +import { + DatePickerCalenderClassName, + DatePickerCalenderHeaderClassName, + DatePickerClassName, + DatePickerFooterClassName, + DatePickerFooterClearClassName, + DatePickerFooterTodayClassName, + DateRangePickerClassName, + DateTimePickerClassName, +} from "./DatePicker.constants"; +import type { + DatePickerHeaderProps, + DatePickerProps, + DateRange, + DateRangePickerProps, + DateRangeShortcut, + DateRangeShortcutsConfig, + DateRangeShortcutsProps, + ExcludeShortcuts, +} from "./DatePicker.types"; +import { + DatePickerFooter, + DatePickerShortcut, + DatePickerShortcutContainer, + DatePickerShortcutItem, + StyledDatePickerHeader, +} from "./DatePicker.styles"; +import { Input } from "../Input"; +import { Button } from "../Button"; +import { Menu, MenuContent, MenuItem, MenuTrigger } from "../Menu"; +import { Divider } from "../Divider"; + +function DatePicker(props: DatePickerProps) { + const { + calendarClassName, + className, + dateFormat = "MM/dd/yyyy", + inputProps, + inputSize = "md", + isClearable, + isDisabled, + isReadOnly, + isRequired, + label, + onChange, + placeholderText = "Select date", + selected, + yearEndRange, + yearStartRange, + ...rest + } = props; + const [selectedDate, setSelectedDate] = useState(null); + const [isOpen, setIsOpen] = useState(false); + + useEffect(() => { + if (selected !== selectedDate) { + setSelectedDate(selected || null); + } + }, [selected]); + + const onChangeHandler = ( + date: Date | null, + e: React.SyntheticEvent | undefined, + ) => { + setSelectedDate(date); + onChange && onChange(date, e); + if (e) { + setIsOpen(false); + } + }; + + return ( + onChangeHandler(null, undefined), + }} + isDisabled={isDisabled} + isReadOnly={isReadOnly} + isRequired={isRequired} + label={label} + renderAs="input" + size={inputSize} + style={{ caretColor: "transparent" }} + /> + } + dateFormat={dateFormat} + disabled={isDisabled} + monthsShown={1} + onChange={onChangeHandler} + onClickOutside={() => setIsOpen(false)} + onInputClick={() => setIsOpen(true)} + onKeyDown={(e: any) => { + // handling esc key press + if (e.keyCode === 27) { + setIsOpen(false); + } + }} + open={isOpen} + placeholderText={placeholderText} + readOnly={isReadOnly} + renderCustomHeader={(props) => { + return ( + + ); + }} + required={isRequired} + selected={selectedDate} + selectsRange={false} + showPopperArrow={false} + timeInputLabel="" + > + {props.showTimeInput ? ( + <> + + + + + + + ) : null} + + ); +} + +// Credits to blueprint(https://github.com/palantir/blueprint/blob/develop/packages/datetime/src/shortcuts.tsx#L132) +function clone(d: Date) { + return new Date(d.getTime()); +} + +function createShortcut( + label: string, + dateRange: DateRange, +): DateRangeShortcut { + return { dateRange, label }; +} + +export function createDefaultShortcuts( + allowSameDay: boolean, + excludeShortcuts: ExcludeShortcuts[], + useSingleDateShortcuts: boolean, +) { + const today = new Date(); + const makeDate = (action: (d: Date) => void) => { + const returnVal = clone(today); + action(returnVal); + returnVal.setDate(returnVal.getDate() + 1); + return returnVal; + }; + + const yesterday = makeDate((d) => d.setDate(d.getDate() - 2)); + const oneWeekAgo = makeDate((d) => d.setDate(d.getDate() - 7)); + const oneMonthAgo = makeDate((d) => d.setMonth(d.getMonth() - 1)); + const threeMonthsAgo = makeDate((d) => d.setMonth(d.getMonth() - 3)); + const sixMonthsAgo = makeDate((d) => d.setMonth(d.getMonth() - 6)); + const oneYearAgo = makeDate((d) => d.setFullYear(d.getFullYear() - 1)); + const twoYearsAgo = makeDate((d) => d.setFullYear(d.getFullYear() - 2)); + + const singleDateShortcuts = allowSameDay || useSingleDateShortcuts; + + return [ + ...(singleDateShortcuts && !excludeShortcuts.includes("today") + ? [createShortcut("Today", [today, today])] + : []), + ...(singleDateShortcuts && !excludeShortcuts.includes("yesterday") + ? [createShortcut("Yesterday", [yesterday, yesterday])] + : []), + ...(excludeShortcuts.includes("past_week") + ? [] + : [ + createShortcut(useSingleDateShortcuts ? "1 week ago" : "Past week", [ + oneWeekAgo, + today, + ]), + ]), + ...(excludeShortcuts.includes("past_month") + ? [] + : [ + createShortcut( + useSingleDateShortcuts ? "1 month ago" : "Past month", + [oneMonthAgo, today], + ), + ]), + ...(excludeShortcuts.includes("past_3_months") + ? [] + : [ + createShortcut( + useSingleDateShortcuts ? "3 months ago" : "Past 3 months", + [threeMonthsAgo, today], + ), + ]), + // Don't include a couple of these for the single date shortcut + ...(useSingleDateShortcuts || excludeShortcuts.includes("past_6_months") + ? [] + : [createShortcut("Past 6 months", [sixMonthsAgo, today])]), + ...(useSingleDateShortcuts || excludeShortcuts.includes("past_year") + ? [] + : [ + createShortcut(useSingleDateShortcuts ? "1 year ago" : "Past year", [ + oneYearAgo, + today, + ]), + ]), + ...(useSingleDateShortcuts || excludeShortcuts.includes("past_2_years") + ? [] + : [createShortcut("Past 2 years", [twoYearsAgo, today])]), + ]; +} + +function DateRangeShortcuts(props: DateRangeShortcutsProps) { + const { + allowSameDay = false, + currentDates, + excludeShortcuts = [], + onChangeHandler, + showRangeShortcuts = false, + useSingleDateShortcuts = false, + ...rest + } = props; + const shortCuts = createDefaultShortcuts( + allowSameDay, + excludeShortcuts, + useSingleDateShortcuts, + ); + const [selectedShortCut, setSelectedShortCut] = useState< + DateRangeShortcut | undefined + >(); + useEffect(() => { + if (currentDates) { + const currentSelectedShortcut = shortCuts.find( + (each) => + each.dateRange[0]?.toDateString() === + currentDates[0]?.toDateString() && + each.dateRange[1]?.toDateString() === currentDates[1]?.toDateString(), + ); + setSelectedShortCut(currentSelectedShortcut); + } + }, [currentDates]); + return showRangeShortcuts ? ( + + + {shortCuts.map((each) => { + const onClickHandle = (e: any) => { + onChangeHandler(each.dateRange, e, "shortcut"); + }; + const isSelected = selectedShortCut?.label === each.label; + return ( + + {each.label} + + ); + })} + + + + ) : null; +} + +function DatePickerHeader(props: DatePickerHeaderProps) { + const { + changeMonth, + changeYear, + className, + customHeaderCount, + dateRangePicker, + decreaseMonth, + endYear, + increaseMonth, + monthDate, + nextMonthButtonDisabled, + prevMonthButtonDisabled, + startYear, + } = props; + + const [selectedYear, setSelectedYear] = useState(getYear(monthDate)); + const startRange = startYear || 1990; + const endRange = endYear || getYear(new Date()); + const years = range(startRange, endRange + 1, 1); + const months = [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ]; + + // TODO: Fix this, causing unexpected behavior + // const handleScroll = React.useCallback((menuItem) => { + // setTimeout(() => { + // if (!menuItem) return; + // menuItem?.scrollIntoView({ behavior: "smooth"}); + // }, 0); + // }, []); + useEffect(() => { + const year = monthDate.getFullYear(); + if (year !== selectedYear) { + setSelectedYear(year); + } + }, [monthDate]); + const handleYearChange = (year: number) => { + changeYear(year); + setSelectedYear(year); + }; + + return ( + +
    + {customHeaderCount === 0 && ( + + + + {months.map((month) => ( + changeMonth(months.indexOf(month))} + > + {month} + + ))} + + +
    +
    + + + + + + {years.map((year) => ( + handleYearChange(year)} + // ref={year === selectedYear ? handleScroll : undefined} + > + {year} + + ))} + + + {(customHeaderCount === 1 || !dateRangePicker) && ( +
    +     + ); +} + +function DateRangePicker( + props: DateRangePickerProps & DateRangeShortcutsConfig, +) { + const { + calendarClassName, + className, + dateFormat = "MM/dd/yyyy", + endDate: propEndDate, + inputProps, + inputSize = "md", + isClearable, + isDisabled, + isReadOnly, + isRequired, + label, + onChange, + placeholderText = "Select date range", + showPreviousMonths = false, + startDate: propStartDate, + yearEndRange, + yearStartRange, + ...rest + } = props; + const [startDate, setStartDate] = useState(null); + const [endDate, setEndDate] = useState(null); + const [isOpen, setIsOpen] = useState(false); + const [showPreviousMonthsState, setShowPreviousMonths] = + useState(showPreviousMonths); + useEffect(() => { + if (propStartDate !== startDate) { + setStartDate(propStartDate || null); + } + if (propEndDate !== endDate) { + setEndDate(propEndDate || null); + } + }, [propStartDate, propEndDate]); + + const onChangeHandler = ( + date: [Date | null, Date | null], + e: React.SyntheticEvent | undefined, + type?: string, + ) => { + const [startDate, endDate] = date; + setStartDate(startDate); + setEndDate(endDate); + onChange && onChange(date, e); + if (type === "shortcut") { + setIsOpen(false); + } + if (showPreviousMonths) { + // doing this to avoid janky behaviour when navigating through the datepicker. + setShowPreviousMonths(false); + } + }; + + const onClearhandler = () => { + setStartDate(null); + setEndDate(null); + }; + + return ( + + } + dateFormat={dateFormat} + disabled={isDisabled} + endDate={endDate} + monthsShown={2} + onChange={onChangeHandler} + onClickOutside={() => setIsOpen(false)} + onInputClick={() => setIsOpen(true)} + onKeyDown={(e: any) => { + // handling esc key press + if (e.keyCode === 27) { + setIsOpen(false); + } + }} + open={isOpen} + placeholderText={placeholderText} + readOnly={isReadOnly} + renderCustomHeader={(props) => { + return ( + + ); + }} + required={isRequired} + selected={startDate} + selectsRange + showPopperArrow={false} + showPreviousMonths={showPreviousMonthsState} + showTimeInput={false} + startDate={startDate} + > + + + ); +} + +DatePicker.displayName = "DatePicker"; + +DatePicker.defaultProps = {}; + +DateRangePicker.displayName = "DateRangePicker"; + +DateRangePicker.defaultProps = {}; + +export { DatePicker, DateRangePicker }; diff --git a/app/client/packages/design-system/ads/src/DatePicker/DatePicker.types.ts b/app/client/packages/design-system/ads/src/DatePicker/DatePicker.types.ts new file mode 100644 index 000000000000..7ef55b69a4ec --- /dev/null +++ b/app/client/packages/design-system/ads/src/DatePicker/DatePicker.types.ts @@ -0,0 +1,132 @@ +import type { InputProps } from "../Input"; +import type { + ReactDatePickerProps, + ReactDatePickerCustomHeaderProps, +} from "react-datepicker"; + +import type { Sizes } from "../__config__/types"; +import type React from "react"; + +interface CommonProps { + /** The class name to apply to the button component. */ + className?: string; + /** Size of the input field */ + inputSize?: Extract; + /** The start year to display in the header list. */ + yearStartRange?: number; + /** The end year to display in the header list. */ + yearEndRange?: number; + /** Whether to allow same day range selection. */ + allowSameDay?: boolean | undefined; + /** Whether to close the calender on scroll. */ + closeOnScroll?: boolean | ((e: Event) => boolean) | undefined; + /** Date format */ + dateFormat?: string | string[] | undefined; + /** Whether the date picker is disabled or not. */ + isDisabled?: boolean | undefined; + /** Default end date of date range picker. */ + endDate?: Date | null | undefined; + /** Dates to be excluded. */ + excludeDates?: Date[] | undefined; + /** Date intervals to be excluded. */ + excludeDateIntervals?: Array<{ start: Date; end: Date }> | undefined; + /** Times to be excluded. */ + excludeTimes?: Date[] | undefined; + /** Function to filter dates. */ + filterDate?(date: Date): boolean; + /** Function to filter time. */ + filterTime?(date: Date): boolean; + /** Whether the field is clearable or not. */ + isClearable?: boolean | undefined; + /** input props */ + inputProps?: InputProps; + /** Locale which time should be shown. */ + locale?: string | Locale | undefined; + /** Label to be shown. */ + label?: string | undefined; + /** max date */ + maxDate?: Date | null | undefined; + /** max time */ + maxTime?: Date | undefined; + /** min date */ + minDate?: Date | null | undefined; + /** min time */ + minTime?: Date | undefined; + /** onBlur event. */ + onBlur?(event: React.FocusEvent): void; + /** Event for calender close. */ + onCalendarClose?(): void; + /** Event for calender open. */ + onCalendarOpen?(): void; + /** Event for clicking outside the calender. */ + onClickOutside?(event: React.MouseEvent): void; + /** Whether the datepicker is open or not. */ + open?: boolean | undefined; + /** Placeholder text */ + placeholderText?: string | undefined; + /** Whether the date picker is read only or not. */ + isReadOnly?: boolean | undefined; + /** Whether the date picker is required or not. */ + isRequired?: boolean | undefined; + /** Selected date. */ + selected?: Date | null | undefined; + /** Whether the calender should close on selection. */ + shouldCloseOnSelect?: boolean | undefined; + /** Default start date of date range picker. */ + startDate?: Date | null | undefined; + /** Time format. */ + timeFormat?: string | undefined; +} +export type DatePickerProps = Omit & + CommonProps; + +export type DateRangePickerProps = ReactDatePickerProps & + CommonProps & { + onChange: ( + dates: [Date | null, Date | null], + e: React.SyntheticEvent | undefined, + ) => void; + }; + +export type DatePickerHeaderProps = { + /** The class name to apply to the button component. */ + className?: string; + /** The start year to display in the header list. */ + startYear?: number; + /** The end year to display in the header list. */ + endYear?: number; + /** Whether the component is date picker or date range picker. */ + dateRangePicker: boolean; +} & ReactDatePickerCustomHeaderProps; + +export interface DateRangeShortcutsConfig { + showRangeShortcuts?: boolean; + allowSameDay?: boolean; + hasTimePrecision?: boolean; + useSingleDateShortcuts?: boolean; + excludeShortcuts?: ExcludeShortcuts[]; +} + +export type ExcludeShortcuts = + | "today" + | "yesterday" + | "past_2_years" + | "past_year" + | "past_6_months" + | "past_3_months" + | "past_month" + | "past_week"; + +export type DateRange = [Date | null, Date | null]; +export interface DateRangeShortcut { + label: string; + dateRange: DateRange; +} +export interface DateRangeShortcutsProps extends DateRangeShortcutsConfig { + currentDates: DateRange; + onChangeHandler: ( + date: [Date | null, Date | null], + e: React.SyntheticEvent | undefined, + type?: string, + ) => void; +} diff --git a/app/client/packages/design-system/ads/src/DatePicker/DateRangePicker.stories.tsx b/app/client/packages/design-system/ads/src/DatePicker/DateRangePicker.stories.tsx new file mode 100644 index 000000000000..e81647abbf55 --- /dev/null +++ b/app/client/packages/design-system/ads/src/DatePicker/DateRangePicker.stories.tsx @@ -0,0 +1,509 @@ +import React from "react"; +import { DateRangePicker } from "./DatePicker"; +import type { StoryObj } from "@storybook/react"; +import type { DateRangePickerProps } from "./DatePicker.types"; + +export default { + title: "ADS/Components/Date Picker", + component: DateRangePicker, + decorators: [ + (Story: () => React.ReactNode) => ( +
    + {Story()} +
    + ), + ], + argTypes: { + className: { + control: { + type: "text", + }, + description: "(try not to) pass addition classes here.", + table: { + type: { + summary: "string", + }, + defaultValue: { + summary: "", + }, + }, + }, + inputSize: { + control: { + type: "radio", + options: ["sm", "md"], + }, + description: "Size of the input field.", + table: { + type: { + summary: "sm | md", + }, + defaultValue: { + summary: "md", + }, + }, + }, + yearStartRange: { + control: { + type: "number", + }, + description: "Start year for the year dropdown.", + table: { + type: { + summary: "number", + }, + defaultValue: { + summary: "1990", + }, + }, + }, + yearEndRange: { + control: { + type: "number", + }, + description: "End year for the year dropdown.", + table: { + type: { + summary: "number", + }, + defaultValue: { + summary: "current year", + }, + }, + }, + allowSameDay: { + control: { + type: "boolean", + }, + description: "Allow the same day to be selected as start and end date.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + showRangeShortcuts: { + control: { + type: "boolean", + }, + description: + "Show a panel next to date range that contains quick predefined ranges", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + showPreviousMonths: { + control: { + type: "boolean", + }, + description: "When opened show previous months from the current month", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + closeOnScroll: { + control: { + type: "boolean", + }, + description: + "Close the datepicker when the user scrolls anywhere in the screen.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "true", + }, + }, + }, + dateFormat: { + control: { + type: "text", + }, + description: "Date format for the input field.", + table: { + type: { + summary: "string", + }, + defaultValue: { + summary: "MM/dd/yyyy", + }, + }, + }, + isDisabled: { + control: { + type: "boolean", + }, + description: "Disable the datepicker.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + isRequired: { + control: { + type: "boolean", + }, + description: "Make the datepicker required.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + isReadOnly: { + control: { + type: "boolean", + }, + description: "Make the datepicker read only.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + startDate: { + control: { + type: "date", + }, + description: "Start date of the date range picker.", + table: { + type: { + summary: "Date", + }, + defaultValue: { + summary: "null", + }, + }, + }, + endDate: { + control: { + type: "date", + }, + description: "End date of the date range picker.", + table: { + type: { + summary: "Date", + }, + defaultValue: { + summary: "null", + }, + }, + }, + excludeDates: { + control: { + type: "array", + }, + description: "Dates to be excluded from the datepicker.", + table: { + type: { + summary: "Date[]", + }, + defaultValue: { + summary: "[]", + }, + }, + }, + excludeDateIntervals: { + control: { + type: "string", + }, + description: "Date intervals to be excluded from the datepicker.", + table: { + type: { + summary: "Array<{ start: Date; end: Date }>", + }, + defaultValue: { + summary: "", + }, + }, + }, + excludeTimes: { + table: { + disable: true, + }, + }, + excludeShortcuts: { + control: { + type: "array", + }, + description: "Shortcuts to be excluded from the datepicker.", + table: { + type: { + summary: + "today | yesterday | past_2_years | past_year | past_6_months | past_3_months | past_month | past_week", + }, + defaultValue: { + summary: "[]", + }, + }, + }, + filterDate: { + control: { + type: "string", + }, + description: "Function to filter dates.", + table: { + type: { + summary: "(date: Date) => boolean", + }, + defaultValue: { + summary: "", + }, + }, + }, + filterTime: { + table: { + disable: true, + }, + }, + isClearable: { + control: { + type: "boolean", + }, + description: "Allow the datepicker to be cleared.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + inputProps: { + control: { + type: "object", + }, + description: "Props to be passed to the input field.", + table: { + type: { + summary: "InputProps", + }, + defaultValue: { + summary: "{}", + }, + }, + }, + locale: { + control: { + type: "text", + }, + description: "Locale for the datepicker.", + table: { + type: { + summary: "string", + }, + defaultValue: { + summary: "en-US", + }, + }, + }, + label: { + control: { + type: "text", + }, + description: "Label for the datepicker.", + table: { + type: { + summary: "string", + }, + defaultValue: { + summary: "", + }, + }, + }, + minDate: { + control: { + type: "date", + }, + description: "Minimum date for the datepicker.", + table: { + type: { + summary: "Date", + }, + defaultValue: { + summary: "null", + }, + }, + }, + maxDate: { + control: { + type: "date", + }, + description: "Maximum date for the datepicker.", + table: { + type: { + summary: "Date", + }, + defaultValue: { + summary: "null", + }, + }, + }, + minTime: { + table: { + disable: true, + }, + }, + maxTime: { + table: { + disable: true, + }, + }, + onBlur: { + control: { + type: "string", + }, + description: "Function to be called when the datepicker is blurred.", + table: { + type: { + summary: "(event: React.FocusEvent) => void", + }, + defaultValue: { + summary: "", + }, + }, + }, + onCalendarClose: { + control: { + type: "string", + }, + description: "Function to be called when the calendar is closed.", + table: { + type: { + summary: "() => void", + }, + defaultValue: { + summary: "", + }, + }, + }, + onCalendarOpen: { + control: { + type: "string", + }, + description: "Function to be called when the calendar is opened.", + table: { + type: { + summary: "() => void", + }, + defaultValue: { + summary: "", + }, + }, + }, + onClickOutside: { + control: { + type: "string", + }, + description: + "Function to be called when the datepicker is clicked outside.", + table: { + type: { + summary: "(event: React.MouseEvent) => void", + }, + defaultValue: { + summary: "", + }, + }, + }, + open: { + control: { + type: "boolean", + }, + description: "Whether the datepicker is open or not.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + placeholderText: { + control: { + type: "text", + }, + description: "Placeholder text for the datepicker.", + table: { + type: { + summary: "string", + }, + defaultValue: { + summary: "", + }, + }, + }, + selected: { + control: { + type: "date", + }, + description: "Selected date for the datepicker.", + table: { + type: { + summary: "Date", + }, + defaultValue: { + summary: "null", + }, + }, + }, + shouldCloseOnSelect: { + control: { + type: "boolean", + }, + description: "Whether the datepicker should close on select or not.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "true", + }, + }, + }, + timeFormat: { + table: { + disable: true, + }, + }, + }, +}; + +// eslint-disable-next-line react/function-component-definition +const Template = (args: DateRangePickerProps) => { + return ; +}; + +export const DateRangePickerStory = Template.bind({}) as StoryObj; +DateRangePickerStory.storyName = "Date Range Picker"; +DateRangePickerStory.args = { + //add arguments here + excludeDates: [new Date()], + excludeShortcuts: [], +}; diff --git a/app/client/packages/design-system/ads/src/DatePicker/index.ts b/app/client/packages/design-system/ads/src/DatePicker/index.ts new file mode 100644 index 000000000000..cd429c68276d --- /dev/null +++ b/app/client/packages/design-system/ads/src/DatePicker/index.ts @@ -0,0 +1,2 @@ +export * from "./DatePicker"; +export * from "./DatePicker.types"; diff --git a/app/client/packages/design-system/ads/src/DatePicker/styles.module.css b/app/client/packages/design-system/ads/src/DatePicker/styles.module.css new file mode 100644 index 000000000000..4ef2afe606a8 --- /dev/null +++ b/app/client/packages/design-system/ads/src/DatePicker/styles.module.css @@ -0,0 +1,318 @@ +.react-datepicker { + --ads-v2-colors-control-datepicker-value-active-fg: var( + --ads-v2-color-fg-brand + ); +} +/* Calender container */ +/* This follows the popover styles, hence the category content */ +.react-datepicker.ads-v2-datepicker__calender { + background-color: var(--ads-v2-colors-content-surface-default-bg); + border: 1px solid var(--ads-v2-colors-content-container-default-border); + border-radius: var(--ads-v2-border-radius); + box-shadow: var(--ads-v2-shadow-popovers); + padding: var(--ads-v2-spaces-3); + display: flex; + /* left 8px + right 8px + width of the separator(1px) */ + gap: 17px; + z-index: 1001; +} + +/* Calender container */ +/*When showing time input - input should come below dates */ +.react-datepicker.ads-v2-datepicker__calender.ads-v2-datetimepicker { + gap: 8px; + flex-direction: column; +} + +/* time input container */ +.react-datepicker.ads-v2-datepicker__calender.ads-v2-datetimepicker + > .react-datepicker__input-time-container { + display: flex; + align-items: center; + justify-content: center; + margin: 0; +} + +/* Time input wrapper */ +.react-datepicker.ads-v2-datepicker__calender.ads-v2-datetimepicker + > .react-datepicker__input-time-container + .react-datepicker-time__input { + margin: 0; + padding-bottom: var(--ads-v2-spaces-2); +} + +/* Time input */ +.react-datepicker.ads-v2-datepicker__calender.ads-v2-datetimepicker + > .react-datepicker__input-time-container + .react-datepicker-time__input + > input { + width: 80px; + height: 24px; + border: 1px solid var(--ads-v2-colors-control-field-default-border); + border-radius: var(--ads-v2-border-radius); + padding: var(--ads-v2-spaces-3); + font-family: var(--ads-v2-font-family); + font-size: var(--ads-v2-font-size-2); + color: var(--ads-v2-colors-control-value-default-fg); + box-sizing: border-box; + text-align: center; +} + +/* Time input - to hide clock icon of input type="time" */ +.react-datepicker.ads-v2-datepicker__calender.ads-v2-datetimepicker + > .react-datepicker__input-time-container + .react-datepicker-time__input + > input::-webkit-calendar-picker-indicator { + background: none; + display: none; +} + +/* Month container */ +.react-datepicker.ads-v2-datepicker__calender + > .react-datepicker__month-container:not(:first-of-type) { + position: relative; + padding-left: var(--ads-v2-spaces-3); + padding-right: var(--ads-v2-spaces-3); + margin-left: -8px; + margin-right: -32px; + border-left: 1px solid var(--ads-v2-colors-content-container-default-border); +} + +/* Custom header wrapper */ +.react-datepicker.ads-v2-datepicker__calender .react-datepicker__header { + background-color: var(--ads-v2-colors-content-surface-default-bg); + border-bottom: none; + padding: 0; +} + +/* Day names */ +.react-datepicker.ads-v2-datepicker__calender .react-datepicker__day-names { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--ads-v2-spaces-3); + margin-top: var(--ads-v2-spaces-3); +} + +/* Single day name */ +.react-datepicker.ads-v2-datepicker__calender + .react-datepicker__day-names + .react-datepicker__day-name { + display: flex; + align-items: center; + justify-content: center; + line-height: normal; + font-family: var(--ads-v2-font-family); + font-size: var(--ads-v2-font-size-3); + color: var(--ads-v2-colors-control-value-inactive-fg); + width: 30px; + height: 20px; + margin: 0; +} + +/* Month */ +.react-datepicker.ads-v2-datepicker__calender .react-datepicker__month { + margin: 0; +} + +/* Week */ +.react-datepicker.ads-v2-datepicker__calender + .react-datepicker__month + .react-datepicker__week { + display: flex; + align-items: center; + justify-content: space-between; +} + +/* Day */ +.react-datepicker.ads-v2-datepicker__calender + .react-datepicker__month + .react-datepicker__week + .react-datepicker__day { + display: flex; + align-items: center; + justify-content: center; + line-height: normal; + font-family: var(--ads-v2-font-family); + font-size: var(--ads-v2-font-size-4); + color: var(--ads-v2-colors-control-value-default-fg); + width: 30px; + height: 34px; /* 30px + 2px padding left and right */ + margin: 0; + border-radius: var(--ads-v2-border-radius); + padding: 0 var(--ads-v2-spaces-1); + background-color: var(--ads-v2-colors-control-field-default-bg); +} + +/* Day hover */ +.react-datepicker.ads-v2-datepicker__calender + .react-datepicker__month + .react-datepicker__week + .react-datepicker__day:not(.react-datepicker__day--disabled):hover { + background-color: var(--ads-v2-colors-control-field-hover-bg); +} + +/* Day focus */ +.react-datepicker.ads-v2-datepicker__calender + .react-datepicker__month + .react-datepicker__week + .react-datepicker__day:focus-visible { + outline: var(--ads-v2-border-width-outline) solid var(--ads-v2-color-outline); + outline-offset: -2px; /* trimming issue */ +} + +/* Day - Today */ +.react-datepicker.ads-v2-datepicker__calender + .react-datepicker__month + .react-datepicker__week + .react-datepicker__day--today, +.react-datepicker__month-text--today, +.react-datepicker__quarter-text--today, +.react-datepicker__year-text--today { + position: relative; + font-weight: normal; + color: var(--ads-v2-colors-control-datepicker-value-active-fg); +} + +.react-datepicker.ads-v2-datepicker__calender + .react-datepicker__month + .react-datepicker__week + .react-datepicker__day--today:not( + .react-datepicker__day--outside-month + ):after { + content: ""; + position: absolute; + bottom: 2px; + width: 4px; + height: 4px; + border-radius: 50%; + background-color: var(--ads-v2-colors-control-datepicker-value-active-fg); +} + +/* Day - outside month */ +.react-datepicker.ads-v2-datepicker__calender + .react-datepicker__month + .react-datepicker__week + .react-datepicker__day.react-datepicker__day--outside-month { + color: var(--ads-v2-colors-control-placeholder-default-fg); + pointer-events: none; +} + +/* Day - hide hover and select bg on empty day columns */ +.react-datepicker.ads-v2-datepicker__calender + .react-datepicker__month + .react-datepicker__week + .react-datepicker__day.react-datepicker__day--in-range.react-datepicker__day--outside-month:empty { + background-color: transparent !important; + color: transparent !important; +} + +/* Date range selected range days bg color */ +.react-datepicker.ads-v2-datepicker__calender + .react-datepicker__month + .react-datepicker__week + .react-datepicker__day.react-datepicker__day--in-range { + background-color: var(--ads-v2-colors-control-field-hover-bg); + border-radius: 0; +} + +/* Date range selection start date style */ +.react-datepicker.ads-v2-datepicker__calender + .react-datepicker__month + .react-datepicker__week + .react-datepicker__day.react-datepicker__day--in-range.react-datepicker__day--range-start { + border-top-left-radius: var(--ads-v2-border-radius); + border-bottom-left-radius: var(--ads-v2-border-radius); +} + +/* Date range selection end date style */ +.react-datepicker.ads-v2-datepicker__calender + .react-datepicker__month + .react-datepicker__week + .react-datepicker__day.react-datepicker__day--in-range.react-datepicker__day--range-end { + border-top-right-radius: var(--ads-v2-border-radius); + border-bottom-right-radius: var(--ads-v2-border-radius); + background-color: var(--ads-v2-colors-control-field-checked-bg); + color: var(--ads-v2-colors-control-value-checked-fg); +} + +/* Date range selected range days bg color on selecting */ +.react-datepicker.ads-v2-datepicker__calender + .react-datepicker__month + .react-datepicker__week + .react-datepicker__day--in-selecting-range:not( + .react-datepicker__day--in-range, + .react-datepicker__month-text--in-range, + .react-datepicker_quarter-text--in-range, + .react-datepicker_year-text--in-range, + .react-datepicker__day--selecting-range-start, + .react-datepicker__day--selecting-range-end, + .react-datepicker__day--outside-month + ) { + background-color: var(--ads-v2-colors-control-field-hover-bg); + border-radius: 0; +} + +/* Date keyboard selected/navigated day bg color */ +.react-datepicker.ads-v2-datepicker__calender + .react-datepicker__day--keyboard-selected, +.react-datepicker__month-text--keyboard-selected, +.react-datepicker__quarter-text--keyboard-selected, +.react-datepicker__year-text--keyboard-selected { + background-color: var(--ads-v2-colors-control-field-hover-bg); +} + +/* Day selected style */ +.react-datepicker.ads-v2-datepicker__calender + .react-datepicker__day--selected:not(.react-datepicker__day--outside-month), +.react-datepicker__month-text--selected, +.react-datepicker__quarter-text--selected, +.react-datepicker__year-text--selected { + background-color: var(--ads-v2-colors-control-field-checked-bg) !important; + color: var(--ads-v2-colors-control-icon-checked-fg) !important; + font-weight: unset; +} + +/* Disabled date style */ +.react-datepicker.ads-v2-datepicker__calender .react-datepicker__day--disabled, +.react-datepicker__month-text--disabled, +.react-datepicker__quarter-text--disabled, +.react-datepicker__year-text--disabled { + color: var(--ads-v2-colors-control-value-inactive-fg); + opacity: var(--ads-v2-opacity-disabled); + cursor: not-allowed; +} + +.react-datepicker__aria-live { + display: none; +} + +.react-datepicker__children-container { + margin-top: -10px !important; +} + +.ads-v2-daterangepicker .react-datepicker__children-container { + margin: 0 !important; + width: fit-content; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + box-sizing: border-box; +} + +/* Move the shortcut menu to the right of the calender */ +.ads-v2-daterangepicker.ads-v2-datepicker__calender.showRangeShortcuts { + padding-left: 146px; +} +.react-datepicker.ads-v2-datepicker__calender.showRangeShortcuts + > .react-datepicker__month-container:not(:first-of-type) { + margin-right: -160px; +} + +.ads-v2-daterangepicker.showRangeShortcuts + .react-datepicker__children-container { + /*.ads-v2-daterangepicker .react-datepicker__children-container {*/ + position: relative; + right: 500px; +} diff --git a/app/client/packages/design-system/ads/src/Divider/Divider.mdx b/app/client/packages/design-system/ads/src/Divider/Divider.mdx new file mode 100644 index 000000000000..1cde0d8ac85d --- /dev/null +++ b/app/client/packages/design-system/ads/src/Divider/Divider.mdx @@ -0,0 +1,29 @@ +import { Canvas, Meta } from "@storybook/blocks"; + +import * as DividerStories from "./Divider.stories"; + + + +# Divider + +A divider is a thin line that groups content in lists and layouts. + + + +## Kind + +### Horizontal + + + +### Vertical + + + +## Usage + +- Dividers are a useful tool for organizing content into distinct groups. They can differentiate between types of information or create visual hierarchy. +- Supports horizontal and vertical scrolling, and grows to the length of the parent. +- Use dividers sparingly and consider other design elements, such as space, to achieve balance in your design. + +> TODO: When should we use dividers and when should we use space? diff --git a/app/client/packages/design-system/ads/src/Divider/Divider.stories.tsx b/app/client/packages/design-system/ads/src/Divider/Divider.stories.tsx new file mode 100644 index 000000000000..4b9d29ab8959 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Divider/Divider.stories.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import { Divider } from "./Divider"; +import styled from "styled-components"; +import type { DividerProps } from "./Divider.types"; +import type { StoryObj } from "@storybook/react"; + +export default { + title: "ADS/Components/Divider", + component: Divider, + argTypes: { + orientation: { + options: ["horizontal", "vertical"], + control: { type: "radio" }, + }, + }, +}; + +// eslint-disable-next-line react/function-component-definition +const Template = (args: DividerProps) => { + return ( + + + + ); +}; + +const Box = styled.div` + width: 8vh; + height: 8vh; + + display: flex; + align-items: center; + justify-content: center; +`; + +export const DividerStory = Template.bind({}) as StoryObj; +DividerStory.storyName = "Divider"; + +export const DividerVerticalStory = Template.bind({}) as StoryObj; +DividerVerticalStory.args = { + orientation: "vertical", +}; diff --git a/app/client/packages/design-system/ads/src/Divider/Divider.styles.tsx b/app/client/packages/design-system/ads/src/Divider/Divider.styles.tsx new file mode 100644 index 000000000000..3e361a88250b --- /dev/null +++ b/app/client/packages/design-system/ads/src/Divider/Divider.styles.tsx @@ -0,0 +1,19 @@ +import styled, { css } from "styled-components"; + +const Variables = css` + --divider-thickness: 1px; + --divider-length: 100%; +`; + +export const StyledDivider = styled.span<{ + orientation: "horizontal" | "vertical"; +}>` + ${Variables}; + + ${(props) => + props.orientation === "horizontal" + ? "border-top: var(--divider-thickness) solid var(--ads-v2-colors-content-surface-default-border); width: var(--divider-length);" + : "border-left: var(--divider-thickness) solid var(--ads-v2-colors-content-surface-default-border); height: var(--divider-length);"} + + display: inline-block; +`; diff --git a/app/client/packages/design-system/ads/src/Divider/Divider.test.tsx b/app/client/packages/design-system/ads/src/Divider/Divider.test.tsx new file mode 100644 index 000000000000..60514b538ac6 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Divider/Divider.test.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { render } from "@testing-library/react"; +import { Divider } from "./Divider"; + +describe("Divider", () => { + it("renders", () => { + const { getByTestId } = render(); + // eslint-disable-next-line testing-library/prefer-screen-queries + const divider = getByTestId("divider"); + expect(divider).toBeInTheDocument(); + }); + + it("is horizontal by default", () => { + const { getByTestId } = render(); + // eslint-disable-next-line testing-library/prefer-screen-queries + const divider = getByTestId("divider"); + expect(divider).toHaveAttribute("orientation", "horizontal"); + }); + + it("is vertical when set explicitly", () => { + const { getByTestId } = render( + , + ); + // eslint-disable-next-line testing-library/prefer-screen-queries + const divider = getByTestId("divider"); + expect(divider).not.toHaveAttribute("orientation", "horizontal"); + expect(divider).toHaveAttribute("orientation", "vertical"); + }); +}); diff --git a/app/client/packages/design-system/ads/src/Divider/Divider.tsx b/app/client/packages/design-system/ads/src/Divider/Divider.tsx new file mode 100644 index 000000000000..37a596637593 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Divider/Divider.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import type { DividerProps } from "./Divider.types"; +import { StyledDivider } from "./Divider.styles"; + +/** + * A Divider is used to separate content into distinct sections. + * It must be used in elements that are direct children of a container. + * It is not intended to be used as a border. + * + * @param orientation + * @constructor + */ +function Divider({ orientation, ...rest }: DividerProps) { + return ; +} + +Divider.displayName = "Divider"; + +Divider.defaultProps = { + orientation: "horizontal", +}; + +export { Divider }; diff --git a/app/client/packages/design-system/ads/src/Divider/Divider.types.ts b/app/client/packages/design-system/ads/src/Divider/Divider.types.ts new file mode 100644 index 000000000000..7a91a3890abc --- /dev/null +++ b/app/client/packages/design-system/ads/src/Divider/Divider.types.ts @@ -0,0 +1,8 @@ +import type { HTMLAttributes } from "react"; + +export type DividerProps = { + /** control the direction of the divider*/ + orientation: "horizontal" | "vertical"; + /** (try not to) pass addition classes here */ + className?: string; +} & HTMLAttributes; diff --git a/app/client/packages/design-system/ads/src/Divider/index.ts b/app/client/packages/design-system/ads/src/Divider/index.ts new file mode 100644 index 000000000000..a0b8491d53f4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Divider/index.ts @@ -0,0 +1,2 @@ +export * from "./Divider"; +export * from "./Divider.types"; diff --git a/app/client/packages/design-system/ads/src/Documentation/CategoryTokens/ActionTokens.mdx b/app/client/packages/design-system/ads/src/Documentation/CategoryTokens/ActionTokens.mdx new file mode 100644 index 000000000000..5ab04e95f5c9 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Documentation/CategoryTokens/ActionTokens.mdx @@ -0,0 +1,241 @@ +import { Meta } from "@storybook/blocks"; +import { ColorBlock } from "../components/ColorBlock"; +import { CodeBlock } from "../components/CodeBlock"; +import { Toast } from "../../Toast"; + + + +#### Action + +They're designed to initiate specific events or requests that trigger changes in the application's state or data. Examples encompass buttons, links, and other elements that empower users to take actions. + +--- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + diff --git a/app/client/packages/design-system/ads/src/Documentation/CategoryTokens/ContentTokens.mdx b/app/client/packages/design-system/ads/src/Documentation/CategoryTokens/ContentTokens.mdx new file mode 100644 index 000000000000..a1a72d446d19 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Documentation/CategoryTokens/ContentTokens.mdx @@ -0,0 +1,241 @@ +import { Meta } from "@storybook/blocks"; +import { ColorBlock } from "../components/ColorBlock"; +import { CodeBlock } from "../components/CodeBlock"; +import { Toast } from "../../Toast"; + + + +#### Content + +Content components serve as the primary vehicles for presenting essential information and visual content to users. They showcase data, textual content, images, and multimedia elements that constitute the core essence of the user experience. Instances include text, callouts, banner and various forms of visual and textual content. + +--- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + diff --git a/app/client/packages/design-system/ads/src/Documentation/CategoryTokens/ControlTokens.mdx b/app/client/packages/design-system/ads/src/Documentation/CategoryTokens/ControlTokens.mdx new file mode 100644 index 000000000000..ac4238710f1f --- /dev/null +++ b/app/client/packages/design-system/ads/src/Documentation/CategoryTokens/ControlTokens.mdx @@ -0,0 +1,201 @@ +import { Meta } from "@storybook/blocks"; +import { ColorBlock } from "../components/ColorBlock"; +import { CodeBlock } from "../components/CodeBlock"; +import { Toast } from "../../Toast"; + + + +#### Control + +Control components provide tools for users to manage and manipulate the application or its content. They include input, select, Radio, checkbox, and other UI elements that allow users to manage and manipulate data. + +--- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + diff --git a/app/client/packages/design-system/ads/src/Documentation/CategoryTokens/Introduction.mdx b/app/client/packages/design-system/ads/src/Documentation/CategoryTokens/Introduction.mdx new file mode 100644 index 000000000000..e2d445e3195f --- /dev/null +++ b/app/client/packages/design-system/ads/src/Documentation/CategoryTokens/Introduction.mdx @@ -0,0 +1,66 @@ +import { Meta } from "@storybook/blocks"; + + + +# Category tokens + +Category tokens are required to be utilized throughout the platform, depending on the category to which the component belongs. + +
    + +#### Naming convention: + +_`atom-category-component-kind-surface-state-presenational_attribute`_ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    AtomType of token (color/spacing/typography)
    Category + Indicates which category the token belongs to (action, response, control, + content) +
    Component + Indicates which component the token belongs to (button, input, select + etc).This is optional if the token is not component specific. For example, + Avatar component has a different token for background color and border + color. So, the token will be + ```--ads-v2-colors-content-avatar-surface-default-bg``` and + ```--ads-v2-colors-content-avatar-surface-default-border```. This is + because the component has a different background and border color than + it's category. +
    Kind + Indicates the kind of the component (primary, secondary, tertiary etc) +
    Surface + Indicates the part of the component the token is being applied to + (surface, label, icon etc) +
    StateIndicates the state of the component (default, hover, active etc)
    PresentationalAttribute + Indicates the presenational attribute of the component (background, + foreground, border etc). +
    +**Example:** \ ![--ads-v2-colors-action-primary-surface-default-bg](./docs/categoryTokenStructure.png) +
    diff --git a/app/client/packages/design-system/ads/src/Documentation/CategoryTokens/ResponseTokens.mdx b/app/client/packages/design-system/ads/src/Documentation/CategoryTokens/ResponseTokens.mdx new file mode 100644 index 000000000000..3266c08c4de5 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Documentation/CategoryTokens/ResponseTokens.mdx @@ -0,0 +1,105 @@ +import { Meta } from "@storybook/blocks"; +import { ColorBlock } from "../components/ColorBlock"; +import { CodeBlock } from "../components/CodeBlock"; +import { Toast } from "../../Toast"; + + + +#### Response + +Response components furnish users with feedback based on their interactions or actions within the application. Their purpose is to convey outcomes of user actions, system status updates, and error messages. + +--- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + + +
    + + diff --git a/app/client/packages/design-system/ads/src/Documentation/Colors.mdx b/app/client/packages/design-system/ads/src/Documentation/Colors.mdx new file mode 100644 index 000000000000..0d45a1551f76 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Documentation/Colors.mdx @@ -0,0 +1,78 @@ +import { Meta } from "@storybook/blocks"; + + + +# Colors + +Colors in ADS2.0 have been refined to ensure we create interfaces that are accessible and modern. + +Color can be applied to: + +- Foregrounds: Text, Icons, Links +- Backgrounds +- Borders / dividers + +### Applying color to a textual content + +Use the Text component and the right color gets automatically applied. + +If you have to style your text using a typographic token in certain specific cases, use the corresponding color token. + +[//]: # "TODO: insert text tokens image >> insert corresponding color tokens image" + +> ⚠️ Do not use a different color than the color intended for a specific type. + +Important links are styled with the primary color of ADS 2.0 defined by the token, `colors.semantics.primary.text`. Notice that this token does not refer to the actual color but only mentions that this is a semantic token to be used for styling primary text. (This in turn references a primitive token `colors.raw.orange.600`) Using a higher level token makes your design future proof in case the primary color were to change in a new revision of ADS. Your designs would automatically get updated to the new primary color because you are using a token at the right level. This is really important to take note of. + +Remember the order of preference: + +> 🎏 Component >>> UI category token >> semantic token > primitive token. + +Use a component if it exists. If it doesn’t meet your case, style your design using a UI category token. If you cannot find the right token at this level, go down a level and find semantic tokens. In rare cases where you do not find the right token at this level, use a primitive token. + +### Applying color to icons + +Icons can be accessed using the Icon component in ADS 2.0. Icons by default come with the color defined by the token, `colors.ui.content.icon.color` which in turn refers to `Gray-600`. Do not change this color unless necessary. + +> 👉 Always use the highest level token to style your UI. That way your designs are future-proof if the underlying value were to change in a new version of ADS. + +[//]: # "TODO: Insert visual from the snapshot modal from mobile responsive project" + +Icons do support a color override in cases where you need to style them differently. Use this choice judiciously. + +### Applying color to backgrounds + +Background color would be needed to apply to page, pane, overlay backgrounds. While most of these use the `semantics.bg.default` token which refers to `colors.raw.white`, there are cases where background color is needed for hover states and selected states - for example, in a menu of items. + +| Use-case | Token to use | Refers to | Refers to | +| ----------------------------------- | --------------------------------- | ---------------------------- | -------------- | +| Page/pane/overlay/modal backgrounds | colors.semantics.bg.default | colors.raw.white | Gray-0 / White | +| Menu item :hover | colors.UI.content.menu-item.hover | colors.semantics.bg.muted | Gray-100 | +| Menu item :active | colors.UI.content.menu-ite.active | colors.semantics.bg.emphasis | Gray-200 | + +In addition to this, there are other background colors that exist in order to indicate information, warning, success and danger states to the users. Use this according to your needs. These are used for styling callouts, notification banners, debugger errors, warning logs to list a few. + +### Applying color to borders & dividers + +ADS 2.0 comes with a divider component that helps you segregate content. This uses the color token, `colors.UI.content.border` + +There also exist other border tokens, that have been used in components, should the need arise. + +[//]: # "TODO: Generate Color Palette block here of just the border colors" + +### Styling text on colored backgrounds + +Colored backgrounds exist primarily in the system response category in the form of information, success, warning and error variants. The Callout component automatically takes care of assigning the right color to the various textual elements involved. + +If you have to manually style this, for example for styling error messages in the debugger UI — use the right token. An error message belongs to the category of system response and therefore the right token to use in this case would be `colors.UI.response.error.text` + +## FAQs + +\***\*What if the color I need isn’t listed?\*\*** + +Our tokens should help you in almost all scenarios. However, a design system is never complete and we recognise that there may be edge cases we haven’t factored in. + +Here are some recommendations on how to proceed: + +- Can you re-work your design to use an existing color token? In most cases colors can be mapped to existing tokens. +- If this is not possible and if you feel that multiple surfaces need this token, reach out to [#design-system](https://theappsmith.slack.com/archives/C0293DVQACW) to make a case for adding a new color to ADS. diff --git a/app/client/packages/design-system/ads/src/Documentation/ContributionChecklist.mdx b/app/client/packages/design-system/ads/src/Documentation/ContributionChecklist.mdx new file mode 100644 index 000000000000..69d8d1df1799 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Documentation/ContributionChecklist.mdx @@ -0,0 +1,189 @@ +import { Meta } from "@storybook/blocks"; +import { Checkbox } from "../Checkbox"; + + + +# Contribution checklist + +
    +
    +
    +## Creating a new component + + + Check if the use case that is being designed for is not already solved by an + existing component or ui pattern. + +
    + + {" "} + Identify the number of places the component will be used. The proposed component + is more likely to be picked up if it is used across multiple contexts in the platform, + or more than three discrete times in the same context. + +
    + + Collaborate with design-system pod to get sign off on the design. + +
    + + During design, consider all use cases for the component across all contexts. + +
    + + The usage guidelines for the component are a part of the design hand off. + +
    + + Before dev picks up the components, the places the component will be used + within the main repository, and the owner and timeline for this process must + be identified (usages and deduplication). + +
    +The component is created +
    + Use the correct category tokens to style the component. + + Write stories for all kinds and sizes of the component exist. + + + Create a test plan for the component and write jest unit tests for them. + + Make sure there are no test violations in the a11y addon. + + Move the component documentation from notion to storybook. Delete the notion + page when done. + +
    +
    + + The component is used or deduplicated in at least one place in the main repo + as a sample. + +
    +
    +## Changing an existing component + + + Check if the use case that is being designed for is not already solved by an + existing component or ui pattern. + +
    + + Identify the number of places the changed component will be used. + +
    + + If adding a variant, it is likely to be picked up if there is a discrete + usecase for it that occurs at least three times on the platform. + + + If it is a change to the base component, the impact of the change needs to + be assessed via omlet. + + + If it is a change to the component API, it will only be picked up if quite + necessary. + +
    +
    + + Collaborate with design-system pod to get sign off on the design. + +
    + + During design, consider all use cases for the change across all contexts. + +
    + + The usage guidelines for the component are a part of the design hand off. + +
    + + If you’re adding a variant, make sure to propose the usage guidelines for + that variant. + + + If you’re making a change, go through the existing documentation and + identify if any changes need to be made to the documentation as a result of + the change. + +
    +
    + + Before dev picks up the components, the scope of applying these changes should + be identified, and a timeline and owner established. + +
    + + If a variant is added, consider if there are any other existing ui patterns + on the platform that can be replaced with this variant instead. + + + If there is a change to the component, main-repo intervention isn’t needed + but QA needs to go through all the usages of the component to ensure nothing + breaks. + + + If there is an API change, it is a breaking/blocking change because a dev + needs to update all the usages, before a QA validates all of them. The + timelines and effort need to reflect this as well. + +
    +The new kind of component is created +
    + + Make any changes required in types to support the new variant. + + Use the correct category tokens to style the new variant. + Write a story for the new kind of component. + + Add usage guidelines for the new kind in the documentation. + + + Update the test plan and the jest tests to test the new variant. + + + Make sure there are no test violations in the a11y add on. + +
    diff --git a/app/client/packages/design-system/ads/src/Documentation/DesignTokens.mdx b/app/client/packages/design-system/ads/src/Documentation/DesignTokens.mdx new file mode 100644 index 000000000000..74e0a77af843 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Documentation/DesignTokens.mdx @@ -0,0 +1,185 @@ +import { Meta } from "@storybook/blocks"; + + + +# Design tokens in ADS + +Design tokens enable us to encapsulate our design choices in order to ensure: + +- Consistency of styles across the design system +- Remove ambiguity in terms of how to style a UI element. + +There are several layers of abstraction at which tokens can be constructed. This document is a proposal to bring alignment between design and engg. teams, in order to meet the above two goals. + +Not using the same tokens lead to un-intended consequences of style inconsistencies and mis-communication amongst the team. So, it is essential for us to agree at what level we’d communicate our design choices. + +## Token types + +| Token Type | Example | Description | Remarks | +| ------------------------ | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Perceptual / core tokens | Gray-500, Orange-600 | Tokens at this level refer to a style property in their primitive state. Using tokens at this level removes burden in remembering the hex value of the color and one could easily refer them with their names. | If one were to change the underlying styles or theme the application - this is where the change needs to happen. For designers and engineers consuming ADS2.0, do not use tokens at this level. | +| Semantic tokens | primary-bg-color, text-muted | These tokens are more meaningful than the core tokens as they are associated with the brand or other semantics. One more layer of abstraction that enables users to easily identify if this is a primary color and not worry about what is the primary shade. | The minimum level at which tokens have to be used in order for people to understand the system. Engineers might come across these tokens in the appsmith repository. If you feel like the usage might be better served with a category token, feel free to replace it. | +| Component tokens | color/ui/control/switch/track/default/bg, color/ui/content/avatar/surface/active/bg | Component level tokens are highly component-specific, providing a means to uniquely style a component in case if the component cannot follow category styles. | Minimizing the use of component-level tokens is advisable whenever feasible. The only situation in which they may be created and employed is when the component cannot utilize a category token due to compelling design constraints. | +| Category tokens | color/ui/action/primary/surface/default/bg, color/ui/control/field/default/bg | These tokens apply to a category of components rather than individual components. (More info. below) | Requires some interpretation to understand how an atomic component falls under a category. Easier to apply across a range of components. Easier to relate to. Scales well with new components. Engineers building snowflakes should endeavor to use these tokens. | + +> 💡 The values of the category tokens are derived from semantic tokens and which are in turn derived from core tokens. Every level derives values from the previous level. + +## Category tokens + +This is a top-down lens which seeks to question what constitutes a UI and categorise them. + +![One way to categorise the elements in a UI.](./docs/categorize-elements-in-ui.png) +One way to categorise the elements in a UI. + +At a broad level, we can reason that a UI consists of the following categories: + +- Content +- Control +- Action +- Response + +The idea is to define tokens at this level and ensure that the users of the system are clear in terms of which UI components belong to which categories. + +This exercise is needed for atoms and not molecules in a system. Molecules or higher-order components are typically composed of atoms from various categories. + +![Parts of a Modal](./docs/parts-of-a-modal.png) + +Eg: A Modal could have text, input field, an information block and a call-to-action button. It contains components from all the categories above. + +### How does this help with our goals? + +🎯 **Remove ambiguity** By ensuring that we work close to the UI level, it is **easy to identify** the token to use in order to style an element. + +![Modal - Remove Ambiguity](./docs/modal-remove-ambiguity) + +🎯 **Consistency of style across components** + +> 👉 All component atoms **belonging to a category** should use the same style tokens to ensure that they are styled consistently, **unless** this leads to a bad visual design choice. + +For example: + +- The border of an input field should match the border of a checkbox, as they both belong to the category of input controls. +- The border of a secondary button does not have to match the border of an input field, as they belong to different categories. + +This generic structure should allow designers and engineers to understand which token to apply, without a lot of interpretation. This method will also scale well in cases when people have to create snowflakes by providing them an easy reference. + +> 🧵 Category tokens are simpler to use. Learn how to use them in your work below. + +In the cases that this doesn't work - we have semantic tokens that provide more stylistic control for one to achieve in their design projects. + +# How to style using design tokens + +> This section is illustrative only. The correct category tokens will be updated shortly. + +Every UI element comprises of structural surfaces that are styled using presentational attributes to make it unique. + +**eg:** An input field consists of the following structural properties: label, value, placeholder, helper, icon. + +[//]: # "TODO: Get labelled screenshot from Vasanth- https://www.notion.so/appsmith/How-to-style-using-design-tokens-fcc35bf74ce14083962704be5b3939cd?pvs=4#3c74a11be196461982175e8ed823fe55" + +![Parts of an input](./docs/labelled-input.png) + +Structural elements do not always comprise text. + +![Parts of a switch](./docs/parts-of-a-switch.png) + +
    + The knob and track are structural elements of a Switch that lend it a + distinctive look. +
    + +There are various presentation attributes we could use to style these surfaces. A text label can be styled with typographic styles (font style, font weight, font size, font color), while a button could have a shadow and border styles applied to it. + +The following are the presentational attributes available to us, in ADS: + +- fg (foreground) +- bg (background) +- border (border color) + +You will find tokens defined in the following format in Figma. +(Note: The exact name in Figma would be **color/ui/content/surface/default/bg.** This is due to how the tokens were defined in JSON for exporting to Token studio. We will correct this once we figure out how to do this well. In any case, if you search for a token — you will see it show up properly in Figma’s property pane.) + +[//]: # "TODO: How to embed this page so the preview shows?" + +## How to style? + +> This section is illustrative only. The correct category tokens will be updated shortly. + +**If you have to style a snowflake / new component** + +- Identify the category this component belongs to (input, action, response, or content) +- Identify it’s structural surfaces +- For each state of the component (default, hover, active, disabled etc.) + - For every structural surface — apply the corresponding presentation token to the surface, **_as needed_**. + +That’s it. You’ve styled the component! + +Let us illustrate the above process with an example of styling a switch. + +Category: Input control + +**Structural surfaces:** track, knob, label + +- Category tokens available for input controls: + + | State | Surface | Presentation attribute | Token name | + | ------- | ------- | ---------------------- | ------------------------------------- | + | default | label | fg | color/ui/control/label/default/fg | + | | bg | field | color/ui/control/field/default/bg | + | | border | field | color/ui/control/field/default/border | + | | | | + | hover | label | fg | color/ui/control/label/hover/fg | + | | bg | field | color/ui/control/field/hover/bg | + | | border | field | color/ui/control/field/hover/border | + | | | | + | active | label | fg | color/ui/control/label/hover/fg | + | | bg | field | color/ui/control/field/hover/bg | + | | border | field | color/ui/control/field/hover/border | + | | | | + +Styling the default state of the switch: + +![Styling Switch - Default state](./docs/styling-switch-default-state.png) + +| Structural surface | Presentation Token applied | +| ------------------ | ---------------------------------------- | +| label | color/ui/control/label/default/fg | +| track | color/ui/control/switch/track/default/bg | +| knob | color/ui/control/knob/default/bg | + +[//]: # "TODO: Separate active state from checked state and rewrite this bit" + +![Styling Switch - Checked State](./docs/styling-switch-checked-state.png) + +| Structural surface | Presentation Token applied | +| ------------------ | ---------------------------------------- | +| label | no change | +| track | color/ui/control/switch/track/checked/bg | +| knob | no change | + +How does this logic apply for styling an input field which belongs to the same category as that of a switch? +![styling-label-active-state](./docs/styling-label-active-state.png) + +
    + ✨ The same tokens apply for both the switch and the input field, albeit for + different surfaces. This ensures consistency and yet makes each of these + components feel distinct. +
    + +> 👉 It is the discretion of the designer to identify which surfaces have to be styled in a particular state. Blindly applying the tokens to all the surfaces will lead to poor design. + +### How to style content? + +> ℹ️ WIP + +A product’s UI comprises of headings, body, captions in the content category. + +The following tokens have been defined for the headings category + +> ☝️ For every ui-category **type** token.. there is a color token associated with it. For example, the `Page Heading` type will necessarily use the gray-800 color token. This is the color you should be using. However, in code all of these values will be available as one if the correct type is passed to `Text`. + +To make things even simpler for designers, we now have a Text component defined in Figma. Simply drag the component to Figma’s canvas and enter your text. + +### What to do if I cannot find the right category token? + +Use semantic tokens to style your structural surface. Semantic tokens are more versatile and therefore give you a little more control than category tokens. If you cannot even find a semantic token for your need, you can go down to using core tokens. When you are doing so, please let @design-system-pod know so that we may identify the gap and improve the system. diff --git a/app/client/packages/design-system/ads/src/Documentation/FAQs.mdx b/app/client/packages/design-system/ads/src/Documentation/FAQs.mdx new file mode 100644 index 000000000000..d9bf13eae735 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Documentation/FAQs.mdx @@ -0,0 +1,49 @@ +import { Meta } from "@storybook/blocks"; + + + +# FAQs + +### What is the source of truth for ADS 2.0? + +Components part of ADS2.0 are present at https://design-system.appsmith.com. This space will also list the available tokens and have documentation around usage guidelines. Components published here will be available for use via [Figma’s asset library](https://www.figma.com/file/sz08OJt2VrEgxQ8eToFIqG/ADS2.0---Components?node-id=3301%3A71053&t=jy9gnwPgIxtaTtY5-1), for designers. + +### I have a feature that needs a new component. What should I do? + +All designs should be composed of components from ADS. In cases, where this is not possible, the designer/engineer building the component should reach out to the ADS team to make a case for why their feature needs a new component. + +The DS team would evaluate if the UI could be refactored with an existing component. If not, the DS team would assess if there are other areas in the product that would benefit from a component that is being proposed. + +Generally, if the number of usages of a component is more than 3 distinct pages with in the UI, it is considered to be eligible to be added to ADS. If not, this component will not be worked by the DS team. + +### Who will own the design & development of a component that is not part of ADS? + +The pod designer and the engineer should develop this component. It’s code will reside in the main repo. This component should strictly follow the tokens defined in ADS 2.0, in order to ensure consistency of styles with ADS. + +### I have a feature that matches a component in ADS. However, it needs customisations. How should I proceed? + +Customisations are not encouraged to DS components. You should not override the CSS of the DS components. If there is a use-case for a customisation, reach out to the DS pod explaining your use-case. If the customisation can be implemented as a kind, the DS pod will own the design and development of this kind and make it available for consumption. + +### What if the slight customisation that is required to a component is only used in one place? How should I proceed? + +If the kind of component is not usable in more than three distinct parts of the product, this will not be implemented. You also cannot detach the component and make a custom component. We recommend if there is a possibility to refactor your design to use existing kinds of the component. Cases like this can lead to a product slowly going out of sync with the design system. Please reach out to the DS team to see how we can accommodate use-cases like this. + +### When will a component that is developed as a unique use-case (aka snowflake) become part of ADS? + +The DS team will keep track of requests for changes to the components or addition of new components. If the team sees a strong signal for a change from multiple parties over time justifying the need for a component that can be re-used in at least 3 different places within the product, they will add this to ADS. Based on the evolving needs of the product, the components in ADS will evolve. + +### Our pod has a component that is not part of the design system. How can I contribute to ADS? + +If there is a use-case for a component that is used in more than three distinct pages of the product, and you wish to help in contributing to code, please reach out to the design system pod in terms of how to proceed. + +[//]: # "TODO: Link contributing guide, and my slack message to Dhruvik here." + +### What is the source for icons? How will we handle new icons? + +Icons in ADS 2.0 have to be sourced from Remix. However, sufficient care needs to be taken to ensure that different icons are not being used for the same use-case (Eg: Having different icons for edit across the product.) + +In cases, where Remix does not support the icon that is required, custom SVGs are allowed. + +### Will all the design component props be strictly typed? + +Appsmith Design System provide strictly typed component props to ensure type safety and reduce errors in development. The types for the components should be available on autocomplete in your editor, and during development can be seen by Cmd + Clicking the component in question. The types for individual props are always available in the “Description” section of every component reference table in it’s story. For a detailed reference, all types are defined in the `ComponentName.types.ts` file for the respective component. diff --git a/app/client/packages/design-system/ads/src/Documentation/Introduction.mdx b/app/client/packages/design-system/ads/src/Documentation/Introduction.mdx new file mode 100644 index 000000000000..3e8e34fc0d4a --- /dev/null +++ b/app/client/packages/design-system/ads/src/Documentation/Introduction.mdx @@ -0,0 +1,80 @@ +import { Meta } from "@storybook/blocks"; + + + +# Welcome to Appsmith Design system (ADS) 2.0 + +![ADS 2.0 Banner](./docs/ads-banner.png) + +This site contains examples and documentation of all of the building blocks used to build the Appsmith platform. This re-write of Appsmith design system is significantly different from the previous iteration and requires you to understand a few basic concepts in order to maximise your productivity as a designer/engineer consuming ADS 2.0. + +### Experience goals + +- Ease of use: We want to minimise the interpretation that requires for a person in terms of how to style their UI, using strong defaults. +- Flexibility of design: We provide flexibility through a robust set of tokens in case the components do not meet your needs + +## How to access ADS 2.0 + +### For Designers + +Designers can access the components and tokens from ADS2.0 through Figma’s asset library panel. + +[//]: # "TODO: Add link to below via youtube and mdx-embed" +[//]: # "![How to access ADS 2.0 for designers tutorial](./docs/how-to-access-ads-for-designers.mp4)" + +Toggle the ADS2.0 components and Icon libraries from the Figma asset library panel, as shown above. You will see all the components and icons show up here. Drag the desired component you want to use to your Figma canvas. + +![Libraries available in Figma](./docs/libraries-in-figma.png) + +Ensure that you have the old library, referred to as Appsmith Design system, toggled off! This library will be deprecated soon. + +### For Engineers + +The component library is available on [npm](https://www.npmjs.com/package/@appsmithorg/design-system) and the source code on [github](https://www.github.com/appsmithorg/design-system). + +To make changes to the library, refer to the [README](https://github.com/appsmithorg/design-system/blob/release/packages/design-system/README.md). + +To use a specific component, refer to the docs for the component in the [storybook](https://design-system.appsmith.com/) here. + +[//]: # "TODO: Link category tokens story here" + +To use tokens created by ads in your own components, refer to [the story in the storybook.]() + +Design files you receive will almost certainly be using components or compositions of components alone. If you find that you are having to build a component from scratch, please confer with your designer if there’s an alternative using established components, or ask someone from the design-system team if you can develop the new component within the design-system repository, before proceeding to build the custom component. We are all responsible for ensuring the experience we deliver is consistent and as solid as a rock 🪨 + +## How to use ADS? + +Everything you design/code should be: + +- a component from ADS 2.0, or, +- composed of components from ADS 2.0. + +You have the provision to style your design using the tokens from ADS2.0 if the above two cases do not meet your need. + +Every component and its comprising parts in ADS2.0 has been styled using design tokens in order to ensure consistency and to achieve cohesiveness across the components. + +### Learn more about Design tokens: [Design tokens in ADS](https://design-system.appsmith.com/?path=/docs/design-tokens--documentation) + +> ☝️ **Remember this operating principle** +> Use components from ADS2.0. If they do not meet your need and you have a unique use-case to design for, use tokens. Anything else is not accepted as it would break the consistency of the designs within the product. + +### Adding a new component or variation to ADS + +1. A case needs to be made for the new component, and consensus needs to be achieved on its requirement. Stakeholders: pod proposing the component and design-system pod. +2. The design is prepared by the pod that is requesting the component or variation. +3. The design will pass a review by the design-system pod, from both design and engineering pov. +4. Handoff will happen on [the zeplin board](https://app.zeplin.io/project/63f7601064ab77243cf1eca1) +5. Component guidelines will start to be worked on by the designers. +6. Development will be taken up. This can be done by either engineering from requesting pod or from design-system pod, based on bandwidth and urgency. +7. Once a PR is ready and approved, an alpha release will be generated for that branch. This alpha version needs to be used in a PR in the appsmith repository. All ci tests need to pass on this branch. This branch should be added to the description of the component branch using the `Depends on` keywords. +8. The component is now ready to be picked up by the design-system QA. +9. Once QA has confirmed all is okay, the pod may optionally conduct a round of QA where the component is used in the feature branch. +10. We can now merge the component PR into release. A minor update to the design-system package will be released. Make sure that any feature branches in other repositories do not contain the alpha version in a non-feature branch, because this may cause unexpected failures. + +Phew! That's a lot of steps. Fortunately, as our platform becomes more stable, this is a process we will need lesser of. + +### ADS 2.0 Community File + +If you are outside of Appsmith, you can use the file published on [Figma community](https://www.figma.com/community/file/1342421531272282596/appsmith-design-system-2-0?searchSessionId=lt3wjj53-ewzttpn8z2a) + +**Note:** This file is not actively maintained and will not get regular updates. diff --git a/app/client/packages/design-system/ads/src/Documentation/LeanGuidelines.mdx b/app/client/packages/design-system/ads/src/Documentation/LeanGuidelines.mdx new file mode 100644 index 000000000000..6b4e2afaba18 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Documentation/LeanGuidelines.mdx @@ -0,0 +1,46 @@ +import { Meta } from "@storybook/blocks"; + + + +# Lean guidelines + +Components are the lego blocks that you get to build your system. Use these to compose higher order components and compose your UI. All our categories can be broadly grouped into 4 categories. Think about what is the purpose of your design before you get to selecting a component. + +## Displaying & organising information + +- [Text](https://design-system.appsmith.com/?path=/docs/design-system-text--documentation) +- [Tab](https://design-system.appsmith.com/?path=/docs/design-system-tab--documentation) +- [Menu](https://design-system.appsmith.com/?path=/docs/design-system-menu--documentation) +- [Tooltip](https://design-system.appsmith.com/?path=/docs/design-system-tooltip--documentation) +- [Icon](https://design-system.appsmith.com/?path=/docs/design-system-icon--documentation) +- [Avatar and avatar group](https://design-system.appsmith.com/?path=/docs/design-system-avatar--documentation) +- [Divider](https://design-system.appsmith.com/?path=/docs/design-system-divider--documentation) +- [Callout](https://design-system.appsmith.com/?path=/docs/design-system-callout--documentation) (information kind) +- [Spinner](https://design-system.appsmith.com/?path=/docs/design-system-spinner--documentation) + +## Taking user input + +Uses the UI category tokens of “input controls” to construct the atomic components in this category. Tokens start with `ui.control`. + +- [Input fields](https://design-system.appsmith.com/?path=/docs/design-system-input--documentation) +- [Switch](https://design-system.appsmith.com/?path=/docs/design-system-switch--documentation) +- [Checkbox](https://design-system.appsmith.com/?path=/docs/design-system-checkbox--documentation) +- [Segmented control](https://design-system.appsmith.com/?path=/docs/design-system-segmented-control--documentation) +- [Select](https://design-system.appsmith.com/?path=/docs/design-system-select--documentation) +- [Radio button](https://design-system.appsmith.com/?path=/docs/design-system-radio--documentation) +- [Toggle button](https://design-system.appsmith.com/?path=/docs/design-system-text--documentation) + +## Doing an action + +Uses the UI category tokens of “action” to construct the atomic components. Tokens start with `ui.action`. + +- [Button and iconbutton](https://design-system.appsmith.com/?path=/docs/design-system-button--documentation) +- [Link](https://design-system.appsmith.com/?path=/docs/design-system-link--documentation) +- [Modal](https://design-system.appsmith.com/?path=/docs/design-system-modal--documentation) + +## Displaying the system's response + +Uses the UI category tokens of “response” to construct the atomic components. Tokens start with `ui.response`. + +- [Callout](https://design-system.appsmith.com/?path=/docs/design-system-callout--documentation) (dismissable kinds) +- [Toast](https://design-system.appsmith.com/?path=/docs/design-system-toast--documentation) diff --git a/app/client/packages/design-system/ads/src/Documentation/SemanticColors.mdx b/app/client/packages/design-system/ads/src/Documentation/SemanticColors.mdx new file mode 100644 index 000000000000..7ed2f74a3166 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Documentation/SemanticColors.mdx @@ -0,0 +1,67 @@ +import { Meta } from "@storybook/blocks"; +import { ColorBlock } from "./components/ColorBlock"; +import { CodeBlock } from "./components/CodeBlock"; +import { Toast } from "../Toast"; + +import { bgTokens, fgTokens, borderTokens } from "./tokens"; + + + +#### Content + +If and when you are not able to use category token, then use the tokens from below list. + +--- + +##### Background + + + + {bgTokens.map((token) => ( + + + + + ))} + +
    + + + +
    + +##### Foreground + + + + {fgTokens.map((token) => ( + + + + + ))} + +
    + + + +
    + +##### Border + + + + {borderTokens.map((token) => ( + + + + + ))} + +
    + + + +
    + + diff --git a/app/client/packages/design-system/ads/src/Documentation/Space.mdx b/app/client/packages/design-system/ads/src/Documentation/Space.mdx new file mode 100644 index 000000000000..e1dcb95d9c81 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Documentation/Space.mdx @@ -0,0 +1,205 @@ +import { Meta } from "@storybook/blocks"; + + + +# Space + +Space is a key part of UI design. Mastering the use of space helps one become a better visual designer. + +Usage of space is depends on the content on the screen and the emphasis that this content needs. It is cumbersome to create higher order tokens for spacing rules and hence ADS 2.0 defines primitive tokens for space. + +## Fundamentals + +A pixel baseline grid is a visual guide that is used to align elements within a digital design. It consists of horizontal lines spaced at regular intervals, typically in increments of 4 or 8 pixels. The purpose of the grid is to provide a consistent structure for aligning and organising design elements, such as text, images, and layout elements. + +There are a few key concepts to understand when working with a pixel baseline grid: + +1. Baseline: A baseline is the horizontal line on which text is aligned. When using a pixel baseline grid, the baseline will typically be spaced at 4 or 8 pixel intervals. +2. Leading: Leading refers to the vertical space between baselines in a block of text. When using a pixel baseline grid, the leading should be an even multiple of the baseline grid increment. +3. Alignment: Alignment refers to the positioning of design elements relative to each other and to the overall layout. The pixel baseline grid can be used to ensure that elements are aligned consistently and accurately within the design. + +> To use a pixel baseline grid in your design, you can set up a grid system in your design software of choice. This will allow you to snap elements to the grid as you work, ensuring that they are aligned to the baseline and spaced consistently. You can also use the grid as a reference when adjusting the spacing and alignment of elements manually. + +In summary, a pixel baseline grid is a useful tool for creating consistent, well-organized digital designs. By aligning elements to the grid and using it as a reference for spacing and alignment, you can create designs that are visually appealing and easy to read. + +### 4-point grid + +This simply means to use ‘increments of 4’ to size and space out the elements on a page. any defined height or width should be divisible by 4, including padding, margins and line heights. + +## General Guidelines + +### Containers + +For most containers, we use an external spacing of **24px** between them, and a **padding of 16px** or **12px** if the content is simpler and more compact. Elements within the container usually have **16px** gutters, with **24px** gutters between major sections. + +Smaller container like _datepicker, property pane, menu_ can have 12px. + +![External spacing - 12px](./docs/external-spacing-12.png) + +Larger container like Modal **_can_** have 16px. + +![External spacing - 16px](./docs/external-spacing-16.png) + +> 💡 **Example:** If you are using a 4px baseline grid, your spacing values should be 4, 8, 12, 16, 20, 24, 32 and so on. + +### Component Level Spacing + +4px Examples + +![Internal spacing - 4px](./docs/internal-spacing-4.png) + +Two Related Components will have spacing of 8px. + +![Internal spacing - 8px](./docs/internal-spacing-8.png) + +### Layout Spacing + +![Layout spacing](./docs/layout-spacing.png) + +## Spacing Token Names + +Skip spacing multiples that might be too close to one another. + +| Token Name | Value | +| ---------- | ----- | +| Sp-1 | 4px | +| Sp-2 | 8px | +| Sp-3 | 12px | +| Sp-4 | 16px | +| Sp-5 | 24px | +| Sp-6 | 32px | +| Sp-7 | 40px | +| Sp-8 | 48px | +| Sp-9 | 56px | + +# How to use space in design + +Space helps in creating hierarchy among the elements in a layout. + +In a UI, space is expressed as margins, paddings and gap between items. While we have a spacing scale defined at a primitive level (space-s, space-M etc.), when to use these tokens during a UI is not clear. + +Space is subjective to the content on the screen and it is in the deft hands of a designer to compose a harmonious UI. + +However, operating at the level of patterns, we can reason about how much space to use in most scenarios. + +## Everything is a container + +Since space comes into play when laying out elements on the page, we start with a layout construct to help us define higher-order spacing rules: + + + +**1️⃣ When you are designing a UI, first, think about the container the information belongs to.** + +Large container blocks typically need headings. Use the appropriate heading type to indicate hierarchy (Eg: Page container block will use Page Heading, Modal container block will use Modal heading etc.). Each of these container types have their defined padding guidelines (see the spec below) + +**2️⃣ Place the information in the body of the container. Group them into sections.** + +Sections are logical units that group information together. A section comprises of controls, content, actions or response blocks. (Refer to the Getting started page for information on these categories). + +- TBD + +A section could also comprise of information blocks or catalog blocks + +While the container acts like a parent block holding the information, the actual information itself is organised in terms of sections. + +Note: A section does not need to have a heading. It is a logical unit to indicate grouping of information. + +A section could have sub-sections within it. + +The spacing rules to remember are: + + + + + +**3️⃣ Within a section, adjust space where necessary to associate related items in a section.** + +There could be scenarios where a certain element belongs more “closely” than the rest of the elements in a section. + +Eg: The ‘Add more’ button in the following UI is related to the input field above. Hence, these two items have to be grouped together and the gap between them needs to be adjusted accordingly. + +![Use space to create associations](./docs/space-grouping.png) + +### Specs for layout spacing + +| Container type / space | padding (vertical, horizontal) | semantic token | gap between sections in a container | gap within sections - controls | Examples in Appsmith | TBD:::gap within sections - Info. blocks | +| ---------------------- | ------------------------------ | -------------- | ----------------------------------- | ----------------------------------------- | -------------------- | ---------------------------------------- | +| Page | spacing-XL | +| 20, 20 | UI/container/Page/padding | 24 | 16 (datasource config) | Admin settings, Datasources, Queries etc. | ListItem: | + +GridItem: +Card: | +| Large overlay | 20, 20 | UI/container/Page/padding | 24 | | Templates | | +| Modal | 16, 20 | UI/container/Modal/padding | 24 | 16 | Share modal | | +| Pane | 12, 12 | UI/container/Pane/padding | 24 | 12 | Property pane | | +| Sidebar | 12, 12 | UI/container/Sidebar/padding | 24 | 12 (eg: filters in Templates) | Filters sidebar in Templates | | +| Small overlay | 12, 12 | UI/container/Modal/padding | 20 | 12 (action selector) | Action selector overlay | | +| Menu | 4, 4 | UI/container/Menu/padding | 12 | 12 | | | +| Toolbar | 4, 4 | UI/container/Toolbar/padding | TBD | NA | Header, Footer | NA | + +### Visual reference + +Let us illustrate how these spacing guidelines apply using a few examples: + +Here is a UI with a few containers. + +![Containers in UI](./docs/containers-in-ui.png) + +Every container has a defined padding. + +![Padding in container](./docs/padding-in-container.png) + +The heading of a container has a padding. + +![Padding in container 2](./docs/padding-in-container-2.png) + +Sections and gap between sections in a container + +![Padding in container 3](./docs/padding-in-container-3.png) + +## For Designers + +To make it easy for designers, we have the Container component which has variants related to container types. + +- Drag the component block to your canvas. Select the kind for your need. +- **Detach this component** and start using it to place elements in the body of the container. (The body is outlined by a dotted stroke) +- Use auto-layout, always. This helps one to think about space in terms of it’s 3 ingredients (margin, padding and gap). + + + +A section is nothing but an auto-layout box. + +### For Developers + +When breaking a screen into a set of components, see the UI as a series of containers and sections that comprise the containers. This will help you apply the right container style and spacing token accordingly. + +Default to using flexbox and the `gap` property. Avoid using position, especially in new code you are writing. If you see containers using position, try and refactor them away. If you do need to use something other than flex for some reason, in a list, the margin and padding should always be on the bottom and left of the elements you are styling. + +### In summary, + +Use container blocks to use space with intent. +Tweak where necessary. + +### FAQ + +**Will these containers work in all cases?** + +Like all patterns, they should work for a majority (upwards of 80%) of the cases we have in Appsmith. There would be cases which will require you to adjust the spacing based on the content on the screen. Having said this, the notion of container → sections is standard in layout design and should be followed in all contexts. diff --git a/app/client/packages/design-system/ads/src/Documentation/Typography.mdx b/app/client/packages/design-system/ads/src/Documentation/Typography.mdx new file mode 100644 index 000000000000..35573bdf5130 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Documentation/Typography.mdx @@ -0,0 +1,132 @@ +import { Meta } from "@storybook/blocks"; + + + +# Typography + +We use system font stack for typography in the product. This will default to SF Pro, Segoe UI and Ubuntu on mac, windows and linux systems, respectively. This also applies to monospace fonts that come into play when writing code or displaying output in the form of a JSON object. + +[//]: # "TODO: image of sans-serif font stack >> image of monospace font stack" + +## How to use? + +Text is ubiquitous in a user interface. You find it as part of buttons, labels of input fields, as headings on a page and as information in a notification banner. + +To make it simpler to deal with how to style text in your UI, we have the **Text component** in ADS 2.0. Use this whenever you have to deal with text on your UI. + +For majority of the cases of dealing with text, this is the component you need. In cases where you need to style your text differently, ADS2.0 provides robust typographic tokens for your consumption. + +### Guidelines + +| Text element | When to use? | +| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | +| Page heading (XL) | These headings are prominent anchors that convey what the page is about. There should only be one page heading on a page. | +| Modal heading (L) | Used on Modals and big overlays (eg: New JS libraries) | +| Section heading (M) | To be used to demarcate a section within a page or a pane. Can also be used as a heading for an overlay pane. (eg: action selector overlay) | +| Sub-section / small heading (S) | Used within a section. Or can be used as a heading for highlighting information subtly, along with body text. | +| body (M) | The default content type on ADS2.0. Use this to convey primary information. | +| supplementary (S) | Used to supplement primary information. Can be used for helpers, tags, metadata etc. | + +Text that is part of components belonging to input controls (eg: input fields, checkbox labels etc.), actions (buttons, links), system responses (eg: callouts) are all embedded within the components of those respective categories. To make it simpler we do not expose this to the users of the system, as of now. + +> 👉 In case you have to create a new component or if the text component does not meet your need, you can look at the diverse typographic tokens on offer to style your UI. +> [Read this page on how to style your design using tokens.](https://design-system.appsmith.com/?path=/docs/design-tokens--documentation#how-to-style-using-design-tokens) A list of all available typography tokens is [available in storybook](TODO: Add link to category tokens for typography here). + +### Text casing in ADS 2.0 + +[//]: # "TODO: Column layout" + +All text in the product should be sentence cased. This typically means that only the first letter of the word should be capitalised in a sentence. + +![Incorrect title case 1](./docs/incorrect-title-case-1.png) + +❌ Title case. + +![Incorrect title case 2](./docs/incorrect-title-case-2.png) + +❌ Title case + +![Correct title case 1](./docs/correct-title-case-1.png) + +✅ Sentence case + +![Correct title case 2](./docs/correct-title-case-2.png) + +✅ Sentence case + +There should not be all capital letters for text as this makes it difficult for readers of poor vision to process. + +![Incorrect action name](./docs/incorrect-action-names.png) + +❌ Action names are in all caps. + +![Correct action name](./docs/correct-action-names.png) + +✅ Actions are in sentence case. + +**Here are simple heuristics to remember regarding text casing:** + +The first letter of a word should be capitalised, if + +- it is the first word in a sentence or, +- it is part of an acronym (eg: URL, JS objects) or, +- it refers to nouns/terminology specific to Appsmith (Upgrade to Appsmith’s Business edition) or, +- If it is a proper noun, including especially if the word is “Appsmith” in which case the first letter (’A’) is always capitalised. + +### For designers + +Drag the desired kind of the Text component from Figma’s library to your canvas. The content kind group is far more used than the rest of the categories in a UI. And, the text within the rest of the categories (controls, actions and responses) have specific components within which text is embedded. (eg: A textual label of an input field comes by default with the input field component). + +Converting your existing designs using ADS 2.0 requires you to substitute the old components with components from ADS 2.0. This is the case with **text** too. + +> ☝ Do not merely change the text style token in Figma. Replace the text on the UI with the **Text component**, instead. + +[//]: # " TODO: Column layout " + +### Why a Text component in Figma? + +While this might seem like a roundabout way of using text, this done with an intention of **simplifying decision making** w.r.t selecting typographic tokens for your designs. + +Using type styles requires you to hunt through the specific token you need to use within Figma’s style library and most importantly, you need to ensure that you use the corresponding color token that is designated for this textual token. + +Figma decouples text styles with colors. Every time you use text, you have to diligently style it with the right color token. + +This increases the chance for human error and hence we recommend you to use the Text component. + +If you need to a lot more flexibility in terms of styling your design, you can use tokens. Be mindful of using the right color token to go with the text token. Note that there is a similar Text component in the code as well, which by default contains all the style couplings present in our Figma component. If you use a token instead of a component, the engineer implementing this will also have to implement a custom component, so make sure your use case is truly a snowflake. + +![Text component Figma](./docs/text-component-figma.png) + +> ⚠️ **Note:** Every text element has a designated color and should not be overridden. Eg: A page heading has a color represented by the token `colors/ui/heading/PageHeading` and this needs to be the case in all of it’s instances. + +> 🔎 Inspect the Text component (or any component) and you will see that it is composed of tokens applied to the text styles and color styles in Figma. This will help you understand how the components have been constructed and make you better at using a design system. + +If you find the text component not meeting your needs, please reach out with your query on [#design-system](https://theappsmith.slack.com/archives/C0293DVQACW) tagging the design system pod (@design-system-pod) + +### For engineers + +The `Text` component should be the base component for all text rendered on the app. + +In case you are unable to use the `Text` component (such as in the Code Editor), you may use the typographic tokens defined in the storybook. + +In case you are unable to find the relevant token, please reach out to us to create the token within ads instead of simply hard-coding the value you need. Your efforts will ensure that our platform entirely can be themed, and we will have to put in much lesser work if we want to eventually support internationalization. + +### For QA + +Every textual element should be tied to it’s corresponding color token on Zeplin. + +Zeplin **will not highlight** any error with respect to a color mismatch for a Text token or a component. QA should pay attention to the colors being applied to text on the uploaded screens. For eg: A text token of Page heading should use the corresponding color token of ‘Page Heading’. + +## FAQs + +**The text component does not fit my use-case. What do I do?** + +Please reach out with your query on [#design-system](https://theappsmith.slack.com/archives/C0293DVQACW) tagging the design system pod (@design-system-pod) + +**Can I detach the text component?** + +No. Please reach out to the design system pod explaining your need to detach. + +**I want a part of my text to be styled different (eg: bold, italics). How do I do that with the text component?** + +Engineers may pass the prop `bold` or `italics` to `Text` and it will handle this for you. When passing these props, `Text` can be nested. diff --git a/app/client/packages/design-system/ads/src/Documentation/components/CodeBlock.tsx b/app/client/packages/design-system/ads/src/Documentation/components/CodeBlock.tsx new file mode 100644 index 000000000000..320d52cda9bb --- /dev/null +++ b/app/client/packages/design-system/ads/src/Documentation/components/CodeBlock.tsx @@ -0,0 +1,40 @@ +import React from "react"; +import styled from "styled-components"; +import { Button } from "../../Button"; +import { toast } from "../../Toast"; + +interface CodeBlockProps { + code?: string; +} + +function CodeBlock({ code }: CodeBlockProps) { + return ( + { + code && navigator.clipboard.writeText(code.toString()); + toast.show("Copied to clipboard", { kind: "success" }); + }} + > + {code} + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec + + Item 2 + + Item 3 + + Sub Menu + + Sub Item 1 + + Sub Menu 2 + + Sub Item 2.1 + Sub Item 2.2 + Sub Item 2.3 + + + + + Item 4 + Item 5 + + Item 6 + + + + Menu Group + + + Item 7 + Item 8 + Item 9 + Item 10 + + + + ); +}; + +export const MenuFullStory = Template.bind({}) as StoryObj; +MenuFullStory.storyName = "Complete Menu"; +MenuFullStory.args = {}; + +export function MenuStory({ children, ...args }: MenuProps) { + return {children}; +} +MenuStory.storyName = "Menu"; +MenuStory.argTypes = { + children: { + control: { + type: "text", + }, + description: "Menu Trigger and Menu Content is passed here.", + table: { + type: { + summary: "text", + }, + defaultValue: { + summary: "", + }, + }, + }, + dir: { + control: { + type: "select", + options: ["ltr", "rtl"], + }, + description: "Direction of the menu.", + table: { + type: { + summary: "ltr | rtl", + }, + defaultValue: { + summary: "ltr", + }, + }, + }, + open: { + control: { + type: "boolean", + }, + description: "Whether the menu is open or not.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + defaultOpen: { + control: { + type: "boolean", + }, + description: "Whether the menu is open or not by default.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + onOpenChange: { + control: { + type: "function", + }, + description: "Callback when the menu is opened or closed.", + table: { + type: { + summary: "(open: boolean) => void", + }, + defaultValue: { + summary: "() => {}", + }, + }, + }, + modal: { + control: { + type: "boolean", + }, + description: "Whether the menu is modal or not.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, +}; +MenuStory.args = { + children: "This doesn't work alone. This is just to showcase props of Menu.", +}; + +export function MenuTriggerStory({ children, ...args }: MenuProps) { + return ( + + {children} + + ); +} +MenuTriggerStory.storyName = "Menu Trigger"; +MenuTriggerStory.argTypes = { + children: { + control: { + type: "text", + }, + description: "Menu Trigger is passed here.", + table: { + type: { + summary: "text", + }, + defaultValue: { + summary: "", + }, + }, + }, +}; +MenuTriggerStory.args = { + children: , +}; + +export function MenuContentStory({ children, ...args }: MenuProps) { + return ( + + + + + {children} + + ); +} +MenuContentStory.storyName = "Menu Content"; +MenuContentStory.argTypes = { + children: { + control: { + type: "text", + }, + description: "Menu Content is passed here.", + table: { + type: { + summary: "text", + }, + defaultValue: { + summary: "", + }, + }, + }, + height: { + control: { + type: "text", + }, + description: "Height of the menu content.", + table: { + type: { + summary: "string", + }, + defaultValue: { + summary: "fit-content", + }, + }, + }, + width: { + control: { + type: "text", + }, + description: "Width of the menu content. Max-width: 280px.", + table: { + type: { + summary: "string", + }, + defaultValue: { + summary: "fit-content", + }, + }, + }, + loop: { + control: { + type: "boolean", + }, + description: + "When true, keyboard navigation will loop from last item to first, and vice versa.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + onCloseAutoFocus: { + control: { + type: "object", + }, + description: + "Event handler called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault.", + table: { + type: { + summary: "(event: Event) => void", + }, + }, + }, + onEscapeKeyDown: { + control: { + type: "object", + }, + description: + "Event handler called when the escape key is pressed. It can be prevented by calling event.preventDefault.", + table: { + type: { + summary: "(event: KeyboardEvent) => void", + }, + }, + }, + onPointerDownOutside: { + control: { + type: "object", + }, + description: + "Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.", + table: { + type: { + summary: "(event: PointerDownOutsideEvent) => void", + }, + }, + }, + onFocusOutside: { + control: { + type: "object", + }, + description: + "Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault.", + table: { + type: { + summary: "(event: FocusOutsideEvent) => void", + }, + }, + }, + onInteractOutside: { + control: { + type: "object", + }, + description: + "Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component. It can be prevented by calling event.preventDefault.", + table: { + type: { + summary: "(event: PointerDownOutsideEvent | FocusOutsideEvent) => void", + }, + }, + }, + forceMount: { + control: { + type: "boolean", + }, + description: + "Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from DropdownMenu.Portal.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + side: { + control: { + type: "select", + }, + options: ["top", "right", "bottom", "left"], + description: + "The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.", + table: { + type: { + summary: "top | right | bottom | left", + }, + defaultValue: { + summary: "bottom", + }, + }, + }, + sideOffset: { + control: { + type: "number", + }, + description: + "The offset of the menu from the trigger. The offset is flipped when collisions occur and avoidCollisions is enabled.", + table: { + type: { + summary: "number", + }, + defaultValue: { + summary: "0", + }, + }, + }, + align: { + control: { + type: "select", + }, + options: ["start", "center", "end"], + description: + "The preferred alignment of the menu against the trigger. Will be reversed when collisions occur and avoidCollisions is enabled.", + table: { + type: { + summary: "start | center | end", + }, + defaultValue: { + summary: "center", + }, + }, + }, + alignOffset: { + control: { + type: "number", + }, + description: + "The offset of the menu from the trigger. The offset is flipped when collisions occur and avoidCollisions is enabled.", + table: { + type: { + summary: "number", + }, + defaultValue: { + summary: "0", + }, + }, + }, + avoidCollisions: { + control: { + type: "boolean", + }, + description: + "When true, the menu will flip sides when it reaches the viewport bounds.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "true", + }, + }, + }, + collisionBoundary: { + control: { + type: "object", + }, + description: + "The element that the menu will be constrained to fit within if it reaches the viewport bounds.", + table: { + type: { + summary: "Element | null | Array", + }, + }, + }, + collisionPadding: { + control: { + type: "object", + }, + description: + "The padding between the menu and the viewport edges when collisions occur.", + table: { + type: { + summary: "number | Partial>", + }, + defaultValue: { + summary: "0", + }, + }, + }, + arrowPadding: { + control: { + type: "object", + }, + description: + "The padding between the menu and the trigger when the menu is positioned with an arrow.", + table: { + type: { + summary: "number", + }, + defaultValue: { + summary: "0", + }, + }, + }, + sticky: { + control: { + type: "select", + }, + options: ["partial", "always"], + description: + "When true, the menu will remain open when the trigger is blurred.", + table: { + type: { + summary: "partial | always", + }, + defaultValue: { + summary: "partial", + }, + }, + }, + hideWhenDetached: { + control: { + type: "boolean", + }, + description: + "When true, the menu will hide when the trigger is detached from the DOM.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, +}; +MenuContentStory.args = { + children: Menu Content, + width: "150px", +}; + +export function MenuItemStory({ children, ...args }: MenuProps) { + return ( + + + + + + {children} + + + ); +} +MenuItemStory.storyName = "Menu Item"; +MenuItemStory.argTypes = { + children: { + control: { + type: "text", + }, + description: "Menu Item is passed here.", + table: { + type: { + summary: "text", + }, + defaultValue: { + summary: "", + }, + }, + }, + disabled: { + control: { + type: "boolean", + }, + description: "Whether the menu item is disabled or not.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + startIcon: { + control: { + type: "text", + }, + description: "Start icon of the menu item.", + table: { + type: { + summary: "string", + }, + defaultValue: { + summary: "", + }, + }, + }, + endIcon: { + control: { + type: "text", + }, + description: "End icon of the menu item.", + table: { + type: { + summary: "string", + }, + defaultValue: { + summary: "", + }, + }, + }, + size: { + control: { + type: "select", + options: ["sm", "md"], + }, + description: "Size of the menu item.", + table: { + type: { + summary: "sm | md", + }, + defaultValue: { + summary: "md", + }, + }, + }, + onSelect: { + control: { + type: "function", + }, + description: "Callback when the menu item is selected.", + table: { + type: { + summary: "() => void", + }, + defaultValue: { + summary: "() => {}", + }, + }, + }, +}; +MenuItemStory.args = { + children: "Item", +}; + +export function MenuSeparatorStory({ ...args }: MenuProps) { + return ( + + + + + + Item + + Item + Item + + + ); +} +MenuSeparatorStory.storyName = "Menu Separator"; + +export function MenuSubmenuStory({ ...args }: MenuProps) { + return ( + + + + + + Item + + Item Sub + + Sub Item + + + Item + + + ); +} +MenuSubmenuStory.storyName = "Menu Submenu"; +MenuSubmenuStory.argTypes = { + children: { + control: { + type: "text", + }, + description: "Menu Trigger and Menu Content is passed here.", + table: { + type: { + summary: "text", + }, + defaultValue: { + summary: "", + }, + }, + }, + open: { + control: { + type: "boolean", + }, + description: "Whether the menu is open or not.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + onOpenChange: { + control: { + type: "function", + }, + description: "Callback when the menu is opened or closed.", + table: { + type: { + summary: "(open: boolean) => void", + }, + defaultValue: { + summary: "() => {}", + }, + }, + }, +}; + +export function MenuWithTooltipOnTrigger() { + return ( + + + + + + + + Item + Item + + + ); +} diff --git a/app/client/packages/design-system/ads/src/Menu/Menu.styles.tsx b/app/client/packages/design-system/ads/src/Menu/Menu.styles.tsx new file mode 100644 index 000000000000..d6b61cdc1648 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Menu/Menu.styles.tsx @@ -0,0 +1,155 @@ +import styled, { css } from "styled-components"; +import * as RadixMenu from "@radix-ui/react-dropdown-menu"; +import type { MenuSizes } from "./Menu.types"; +import { + MenuItemChildrenClassName, + MenuItemEndIconClassName, +} from "./Menu.constants"; + +const Variables = css` + --menu-item-padding: var(--ads-v2-spaces-3); + --menu-item-gap: var(--ads-v2-spaces-3); + --menu-item-color-bg: var(--ads-v2-colors-content-surface-default-bg); + --menu-item-font-size: var(--ads-v2-font-size-4); + --menu-item-height: 36px; +`; + +const MenuItemSizeStyles = { + sm: css` + --menu-item-padding: var(--ads-v2-spaces-2); + --menu-item-gap: var(--ads-v2-spaces-2); + --menu-item-font-size: var(--ads-v2-font-size-2); + --menu-item-height: 22px; + `, + md: css` + --menu-item-padding: var(--ads-v2-spaces-3); + --menu-item-gap: var(--ads-v2-spaces-3); + --menu-item-font-size: var(--ads-v2-font-size-4); + --menu-item-height: 36px; + `, +}; + +const MenuContentStyle = css` + ${Variables}; + + width: fit-content; + min-width: 100px; + max-width: 280px; + max-height: calc(var(--radix-dropdown-menu-content-available-height) - 20px); + background-color: var(--ads-v2-colors-content-surface-default-bg); + border-radius: var(--ads-v2-border-radius); + border: 1px solid var(--ads-v2-colors-content-container-default-border); + box-shadow: var(--ads-v2-shadow-popovers); + padding: var(--ads-v2-spaces-2); + animation-duration: 400ms; + animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); + will-change: transform, opacity; + overflow: auto; + z-index: 1001; +`; + +export const StyledMenuContent = styled(RadixMenu.Content)<{ + height?: string; + width?: string; +}>` + ${MenuContentStyle}; + ${({ width }) => width && `width: ${width};`} + ${({ height }) => height && `height: ${height};`} +`; + +export const StyledMenuSubContent = styled(RadixMenu.SubContent)<{ + height?: string; + width?: string; +}>` + ${MenuContentStyle}; + ${({ width }) => width && `width: ${width};`} + ${({ height }) => height && `height: ${height};`} +`; + +const MenuItemStyle = css` + display: flex; + align-items: center; + padding: var(--menu-item-padding); + margin-bottom: var(--ads-v2-spaces-1); + gap: var(--menu-item-gap); + border-radius: var(--ads-v2-border-radius); + cursor: pointer; + background-color: var(--menu-item-color-bg); + position: relative; + color: var(--ads-v2-colors-content-label-default-fg); + min-height: var(--menu-item-height); + box-sizing: border-box; + + & > .${MenuItemEndIconClassName} { + position: relative; + right: 0; + } + + & > .${MenuItemChildrenClassName} { + flex: 1; + width: 100%; + font-size: var(--menu-item-font-size); + line-height: unset; + overflow: hidden; + overflow-wrap: break-word; + } + + &:hover:not([data-disabled]), + &:focus-visible { + --menu-item-color-bg: var(--ads-v2-colors-content-surface-hover-bg); + outline: none; + } + + &:focus-visible:not(:hover) { + outline: var(--ads-v2-border-width-outline) solid + var(--ads-v2-color-outline); + outline-offset: var(--ads-v2-offset-outline); + } + + &:active:not([data-disabled]) { + --menu-item-color-bg: var(--ads-v2-colors-content-surface-active-bg); + } + + &[data-disabled] { + cursor: not-allowed; + opacity: var(--ads-v2-opacity-disabled); + } +`; + +export const StyledMenuItem = styled(RadixMenu.Item)<{ + size?: MenuSizes; +}>` + ${MenuItemStyle} + + ${({ size }) => size && MenuItemSizeStyles[size]} +`; + +export const StyledMenuSubTrigger = styled(RadixMenu.SubTrigger)<{ + size?: MenuSizes; +}>` + ${MenuItemStyle} + + ${({ size }) => size && MenuItemSizeStyles[size]} + + &[data-state="open"] { + --menu-item-color-bg: var(--ads-v2-colors-content-surface-active-bg); + } +`; + +export const StyledMenuSeparator = styled(RadixMenu.Separator)` + height: 1px; + background-color: var(--ads-v2-colors-content-surface-default-border); + width: 100%; + display: list-item; + + &::marker { + content: ""; + } +`; + +export const StyledMenuGroupname = styled(RadixMenu.Label)` + font-size: var(--ads-v2-font-size-2); + color: var(--ads-v2-color-fg-muted); + font-weight: var(--ads-v2-font-weight-bold); + padding: 0 var(--menu-item-padding); +`; diff --git a/app/client/packages/design-system/ads/src/Menu/Menu.tsx b/app/client/packages/design-system/ads/src/Menu/Menu.tsx new file mode 100644 index 000000000000..67fe93cdeb4e --- /dev/null +++ b/app/client/packages/design-system/ads/src/Menu/Menu.tsx @@ -0,0 +1,191 @@ +import React from "react"; +import * as RadixMenu from "@radix-ui/react-dropdown-menu"; +import clsx from "classnames"; + +import { + StyledMenuContent, + StyledMenuItem, + StyledMenuGroupname, + StyledMenuSubContent, + StyledMenuSubTrigger, + StyledMenuSeparator, +} from "./Menu.styles"; +import type { + MenuContentProps, + MenuItemContentProps, + MenuItemProps, + MenuProps, + MenuSubContentProps, + MenuSubTriggerProps, +} from "./Menu.types"; +import { + MenuClassName, + MenuItemChildrenClassName, + MenuItemClassName, + MenuItemEndIconClassName, + MenuItemStartIconClassName, + MenuSeparatorClassName, + SIDE_OFFSET, + SubMenuClassName, +} from "./Menu.constants"; +import { Icon } from "../Icon"; +import { Text } from "../Text"; + +function MenuContent({ + children, + className, + height, + portalProps, + width, + ...props +}: MenuContentProps) { + return ( + + + {children} + + + ); +} + +function MenuSubContent({ + children, + className, + height, + width, + ...props +}: MenuSubContentProps) { + return ( + + + {children} + + + ); +} + +function MenuTrigger({ + children, + ...props +}: RadixMenu.DropdownMenuTriggerProps) { + return ( + + {children} + + ); +} + +function MenuItemContent(props: MenuItemContentProps) { + const { children, endIcon, size = "md", startIcon } = props; + return ( + <> + {startIcon && ( + + )} + {children} + {endIcon && ( + + )} + + ); +} + +const MenuItem = React.forwardRef( + ( + { + children, + className, + endIcon, + size = "md", + startIcon, + ...props + }: MenuItemProps, + ref: React.ForwardedRef, + ) => { + return ( + + + {children} + + + ); + }, +); +MenuItem.displayName = "MenuItem"; + +function MenuSubTrigger({ + children, + className, + size = "md", + startIcon, + ...props +}: MenuSubTriggerProps) { + return ( + + + {children} + + + ); +} + +function MenuSeparator({ + className, + ...props +}: RadixMenu.DropdownMenuSeparatorProps) { + return ( + + ); +} + +function Menu(props: MenuProps) { + return ; +} +const MenuSub = RadixMenu.Sub; +const MenuGroup = RadixMenu.Group; +const MenuGroupName = StyledMenuGroupname; + +export { + Menu, + MenuContent, + MenuGroup, + MenuGroupName, + MenuSubContent, + MenuTrigger, + MenuItem, + MenuSub, + MenuSubTrigger, + MenuSeparator, +}; diff --git a/app/client/packages/design-system/ads/src/Menu/Menu.types.ts b/app/client/packages/design-system/ads/src/Menu/Menu.types.ts new file mode 100644 index 000000000000..3ee5e535b7b1 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Menu/Menu.types.ts @@ -0,0 +1,45 @@ +import type * as RadixMenu from "@radix-ui/react-dropdown-menu"; +import type { Sizes } from "../__config__/types"; + +export type MenuSizes = Extract; + +export type MenuProps = RadixMenu.DropdownMenuProps & { + /** (try not to) pass addition classes here */ + className?: string; +}; +interface _MenuContentProps { + /** (try not to) pass addition classes here */ + className?: string; + /** height of the menu */ + height?: string; + /** width of the menu */ + width?: string; + /** portal props */ + portalProps?: RadixMenu.DropdownMenuPortalProps; +} +export type MenuContentProps = _MenuContentProps & + RadixMenu.DropdownMenuContentProps; +export type MenuSubContentProps = _MenuContentProps & + RadixMenu.DropdownMenuSubContentProps; + +interface _MenuItemProps { + /** (try not to) pass addition classes here */ + className?: string; + /** startIcon */ + startIcon?: string; + /** endIcon */ + endIcon?: string; + /** size of the menu item. */ + size?: MenuSizes; + /** onSelect handler */ + onSelect?: (event?: Event) => void; +} +export type MenuItemProps = Omit & + _MenuItemProps; +export type MenuSubTriggerProps = Omit<_MenuItemProps, "endIcon"> & + RadixMenu.DropdownMenuSubTriggerProps; + +export type MenuItemContentProps = Pick< + MenuItemProps, + "children" | "startIcon" | "endIcon" | "size" | "className" +>; diff --git a/app/client/packages/design-system/ads/src/Menu/index.ts b/app/client/packages/design-system/ads/src/Menu/index.ts new file mode 100644 index 000000000000..eb855f78025c --- /dev/null +++ b/app/client/packages/design-system/ads/src/Menu/index.ts @@ -0,0 +1,2 @@ +export * from "./Menu"; +export * from "./Menu.types"; diff --git a/app/client/packages/design-system/ads/src/Modal/Modal.constants.ts b/app/client/packages/design-system/ads/src/Modal/Modal.constants.ts new file mode 100644 index 000000000000..f27154cdbe50 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Modal/Modal.constants.ts @@ -0,0 +1,8 @@ +import { CLASS_NAME_PREFIX } from "../__config__/constants"; + +export const ModalClassName = `${CLASS_NAME_PREFIX}-modal`; +export const ModalContentClassName = `${ModalClassName}__content`; +export const ModalContentHeaderClassName = `${ModalContentClassName}-header`; +export const ModalContentHeaderCloseButtonClassName = `${ModalContentHeaderClassName}-close-button`; +export const ModalContentBodyClassName = `${ModalContentClassName}-body`; +export const ModalContentFooterClassName = `${ModalContentClassName}-footer`; diff --git a/app/client/packages/design-system/ads/src/Modal/Modal.mdx b/app/client/packages/design-system/ads/src/Modal/Modal.mdx new file mode 100644 index 000000000000..06518068bb9f --- /dev/null +++ b/app/client/packages/design-system/ads/src/Modal/Modal.mdx @@ -0,0 +1,50 @@ +import { Canvas, Meta } from "@storybook/blocks"; + +import * as ModalStories from "./Modal.stories"; + + + +# Modal + +Modals are commonly used to display additional content or prompt for user interaction while blocking the main flow of the application. Use a modal to bring attention to a certain action that the user needs to take, where no other state in the application can be changed. In appsmith, modals will always have a title and may or may not be closed. The content of the modal can be customised. The buttons in the footer of a modal are optional, but typically always present. When there is a group of action buttons, always place the primary button furthest to the right. + + + +## Anatomy + +![Modal anatomy](./docs/modal-anatomy.png) + +1. **Header:** Text title accompanied by an optional close button +2. **Content** Container for the main content of the modal; the content can be text, forms, lists, cards, or other elements. +3. **Footer:** Container for buttons related to the content of the modal + +## Spacing + +## Usage + +### When to use + +- Use a modal when you need to display content that temporarily blocks interactions with the main view of an application. +- Use a modal when you need to ask for confirmation from a user before proceeding. +- Use a modal when the user needs to take critical or non-reversible actions. + +### When not to use + +- For non-essential information that is not related to the current user flow. +- When the modal requires additional information, which is unavailable within the modal itself, for decision making. + +### Example: confirmation + +Use a modal to confirm irreversible actions and prevent mistakes. This is particularly helpful when a user is about to make a decision that has permanent consequences, such as deleting important data or cancelling a subscription. Only do this in situations that need additional thought from the user, because modals break the user flow. + +To do this, use a primary button on the right to indicate if the user should proceed or not, and a secondary button on the left to cancel the action. The group of buttons should be right-aligned. + +### Programmatically control a modal + + + +--- + +## Resources + +1. Internally, our modal component depends on [radix's dialog](https://www.radix-ui.com/docs/primitives/components/dialog) diff --git a/app/client/packages/design-system/ads/src/Modal/Modal.stories.tsx b/app/client/packages/design-system/ads/src/Modal/Modal.stories.tsx new file mode 100644 index 000000000000..7646acc9e6e7 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Modal/Modal.stories.tsx @@ -0,0 +1,229 @@ +import React, { useState } from "react"; +import { useArgs } from "@storybook/preview-api"; +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + ModalTrigger, +} from "./Modal"; +import { Button } from "../Button"; +import { Text } from "../Text"; +import type { ModalHeaderProps } from "./Modal.types"; +import type { StoryObj } from "@storybook/react"; +import type { DialogProps } from "@radix-ui/react-dialog"; + +export default { + title: "ADS/Components/Modal", + component: Modal, + argTypes: { + open: { + control: { + type: "boolean", + }, + description: + "Open state of the modal. Make sure onClose is passed in ModalHeader.", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + onOpenChange: { + action: "onOpenChange", + description: "Callback for when the modal is opened or closed", + table: { + type: { + summary: "(open: boolean) => void", + }, + defaultValue: { + summary: "undefined", + }, + }, + }, + children: { + description: "Content of the modal", + table: { + type: { + summary: "React.ReactNode", + }, + defaultValue: { + summary: "undefined", + }, + }, + }, + }, +}; + +// eslint-disable-next-line react/function-component-definition +const ModalHeaderTemplate = (args: ModalHeaderProps) => { + const [{}, updateArgs] = useArgs(); + const changeOpenState = (state: boolean) => updateArgs({ open: state }); + return ( + + + + + + {args.children} + + + ); +}; + +export const ModalHeaderStory = ModalHeaderTemplate.bind({}) as StoryObj; +ModalHeaderStory.storyName = "Header"; +ModalHeaderStory.args = { + children: "Modal Header", +}; + +// eslint-disable-next-line react/function-component-definition +const ModalBodyTemplate = (args: { children: React.ReactNode }) => { + const [{}, updateArgs] = useArgs(); + const changeOpenState = (state: boolean) => updateArgs({ open: state }); + return ( + + + + + + + {args.children} + + + + ); +}; + +export const ModalBodyStory = ModalBodyTemplate.bind({}) as StoryObj; +ModalBodyStory.storyName = "Body"; +ModalBodyStory.args = { + children: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt, nisl eget aliquam tincidunt, nunc nisl aliquam nisl, et aliquam nisl nisl eget nisl.", +}; + +// eslint-disable-next-line react/function-component-definition +const ModalFooterTemplate = () => { + const [{}, updateArgs] = useArgs(); + const changeOpenState = (state: boolean) => updateArgs({ open: state }); + + return ( + + + + + + + + + + + + ); +}; + +export const ModalFooterStory = ModalFooterTemplate.bind({}) as StoryObj; +ModalFooterStory.storyName = "Footer"; +ModalFooterStory.args = {}; + +// eslint-disable-next-line react/function-component-definition +const ModalWithFooterTemplate = (args: DialogProps) => { + const [{}, updateArgs] = useArgs(); + const changeOpenState = (state: boolean) => updateArgs({ open: state }); + + return ( + + + + + + Modal Header + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + tincidunt, nisl eget aliquam tincidunt, nunc nisl aliquam nisl, et + aliquam nisl nisl sit amet nisl. Sed tincidunt, nisl eget aliquam + tincidunt, nunc nisl aliquam nisl, et aliquam nisl nisl sit amet + nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + tincidunt, nisl eget aliquam tincidunt, nunc nisl aliquam nisl, et + aliquam nisl nisl sit amet nisl. Sed tincidunt, nisl eget aliquam + tincidunt, nunc nisl aliquam nisl, et aliquam nisl nisl sit amet + nisl. + + + + + + + + + ); +}; + +export const ModalStory = ModalWithFooterTemplate.bind({}) as StoryObj; +ModalStory.storyName = "With Footer"; +ModalStory.args = {}; + +// eslint-disable-next-line react/function-component-definition +const ModalWithoutFooter = (args: DialogProps) => { + const [{}, updateArgs] = useArgs(); + const changeOpenState = (state: boolean) => { + updateArgs({ open: state }); + }; + + return ( + + + + + + Modal Header + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + tincidunt, nisl eget aliquam tincidunt, nunc nisl aliquam nisl, et + aliquam nisl nisl sit amet nisl. Sed tincidunt, nisl eget aliquam + tincidunt, nunc nisl aliquam nisl, et aliquam nisl nisl sit amet + nisl. + + + + + ); +}; + +export const ModalStoryTwo = ModalWithoutFooter.bind({}) as StoryObj; +ModalStoryTwo.storyName = "Without Footer"; +ModalStoryTwo.args = {}; + +export function OpenModalProgrammatically() { + const [isModalOpen, setModalOpen] = useState(false); + const handleOnChange = () => { + setModalOpen(!isModalOpen); + }; + + return ( + <> + + + + Here is a thing + + + + ); +} diff --git a/app/client/packages/design-system/ads/src/Modal/Modal.styles.tsx b/app/client/packages/design-system/ads/src/Modal/Modal.styles.tsx new file mode 100644 index 000000000000..600957e695f1 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Modal/Modal.styles.tsx @@ -0,0 +1,86 @@ +import styled, { keyframes } from "styled-components"; +import { Overlay, Content, Close } from "@radix-ui/react-dialog"; +import { + ModalContentBodyClassName, + ModalContentFooterClassName, +} from "./Modal.constants"; + +const overlayShow = keyframes` + from { + opacity: 0; + } + to { + opacity: 1; + } +`; + +const contentShow = keyframes` + from { + opacity: 0; + transform: translate(-50%, -40%) scale(0.9); + } + to { + opacity: 1; + transform: translate(-50%, -40%) scale(1); + } +`; + +export const StyledOverlay = styled(Overlay)` + /* TODO: Opacity for colors needs to be handled in a better way*/ + background-color: #39393999; + position: fixed; + inset: 0; + animation: ${overlayShow} 250ms cubic-bezier(0.16, 1, 0.3, 1); + z-index: 1000; +`; + +export const StyledContent = styled(Content)` + background-color: var(--ads-v2-colors-content-surface-default-bg); + border-radius: var(--ads-v2-border-radius); + position: fixed; + top: 40%; + left: 50%; + transform: translate(-50%, -40%); + width: 50vw; + max-width: 90vw; + max-height: 85vh; + padding: var(--ads-v2-spaces-5) var(--ads-v2-spaces-6); + animation: ${contentShow} 250ms cubic-bezier(0.16, 1, 0.3, 1); + display: flex; + flex-direction: column; + z-index: 1001; +`; + +export const StyledHeader = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + padding-bottom: var(--ads-v2-spaces-3); + + & > h3 { + max-width: 90%; + word-wrap: break-word; + } +`; + +export const StyledClose = styled(Close)` + all: unset; + cursor: pointer; +`; + +export const StyledBody = styled.div.attrs({ + className: ModalContentBodyClassName, +})` + padding-top: var(--ads-v2-spaces-5); + flex: 1; + overflow-y: auto; +`; + +export const StyledFooter = styled.div.attrs({ + className: ModalContentFooterClassName, +})` + display: flex; + justify-content: flex-end; + padding-top: var(--ads-v2-spaces-5); + gap: var(--ads-v2-spaces-3); +`; diff --git a/app/client/packages/design-system/ads/src/Modal/Modal.tsx b/app/client/packages/design-system/ads/src/Modal/Modal.tsx new file mode 100644 index 000000000000..3447dd6eba87 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Modal/Modal.tsx @@ -0,0 +1,89 @@ +import React from "react"; +import type { DialogTriggerProps } from "@radix-ui/react-dialog"; +import { Portal, Root, Trigger } from "@radix-ui/react-dialog"; +import clsx from "classnames"; + +import type { ModalHeaderProps, ModalContentProps } from "./Modal.types"; +import { + StyledOverlay, + StyledContent, + StyledHeader, + StyledClose, + StyledBody, + StyledFooter, +} from "./Modal.styles"; +import { + ModalContentClassName, + ModalContentHeaderClassName, + ModalContentHeaderCloseButtonClassName, +} from "./Modal.constants"; +import { Text } from "../Text"; +import { Button } from "../Button"; + +function ModalContent(props: ModalContentProps) { + const { children, className, overlayClassName, ...rest } = props; + return ( + + + + {children} + + + ); +} + +function ModalHeader({ + children, + isCloseButtonVisible = true, +}: ModalHeaderProps) { + return ( + + + {children} + + {isCloseButtonVisible && ( + + + + + + + + ); +}; + +export const PopoverHeaderStory = PopoverHeaderTemplate.bind({}) as StoryObj; +PopoverHeaderStory.storyName = "Header"; +PopoverHeaderStory.args = { + children: "JS Libraries", + isClosable: true, +}; + +const PopoverContentTemplate = (args: PopoverContentProps) => { + return ( + + + + + + + ); +}; + +// TODO: The popover guidelines say that popovers should have at least one focusable element in it, but this story doesn't because PopoverHeader expects children to be a string. Change this. +export const PopoverContentStory = PopoverContentTemplate.bind({}) as StoryObj; +PopoverContentStory.storyName = "Small Content"; +PopoverContentStory.argTypes = { + size: { + control: "radio", + options: ["sm", "md"], + }, +}; +PopoverContentStory.args = { + size: "sm", + children: ( + <> + Chutney Podi + + + Chutney pudi, or milagai podi is a coarse spice powder from southern + India that typically contains ground dry spices like dried chillis, + black gram, chickpeas, salt and sesame seeds. + + + + ), +}; + +export const MediumPopoverContentStory = PopoverContentTemplate.bind( + {}, +) as StoryObj; +MediumPopoverContentStory.storyName = "Medium Content"; +MediumPopoverContentStory.argTypes = { + size: { + control: "radio", + options: ["sm", "md"], + }, +}; +MediumPopoverContentStory.args = { + size: "md", + children: ( + <> + Sign in + + + + + + + + + + + ), +}; + +// eslint-disable-next-line react/function-component-definition +const Template = (args: PopoverProps) => { + return ( + + + + + + Sign in + + + + + + + + + + ); +}; + +export const PopoverStory = Template.bind({}) as StoryObj; +PopoverStory.storyName = "Popover"; +PopoverStory.args = { + //add arguments here +}; diff --git a/app/client/packages/design-system/ads/src/Popover/Popover.styles.tsx b/app/client/packages/design-system/ads/src/Popover/Popover.styles.tsx new file mode 100644 index 000000000000..50cb5421ae81 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Popover/Popover.styles.tsx @@ -0,0 +1,69 @@ +import styled, { css } from "styled-components"; +import type { PopoverSize } from "./Popover.types"; +import { Content } from "@radix-ui/react-popover"; +import { Text } from "../Text"; + +const Variables = css` + --popover-padding: var(--ads-v2-spaces-4); + --popover-width: unset; + --popover-max-height: unset; +`; + +// Variant style definitions +const Size = { + sm: css` + --popover-padding: var(--ads-v2-spaces-4); + --popover-width: 250px; + --popover-max-height: 400px; + `, + md: css` + --popover-padding: var(--ads-v2-spaces-5); + --popover-width: 400px; + --popover-max-height: 600px; + `, +}; + +export const StyledContent = styled(Content)<{ $size: PopoverSize }>` + ${Variables}; + + ${({ $size }) => $size && Size[$size]}; + + padding: var(--popover-padding); + + background-color: var(--ads-v2-colors-content-surface-default-bg); + border: 1px solid var(--ads-v2-colors-content-container-default-border); + border-radius: var(--ads-v2-border-radius); + box-shadow: var(--ads-v2-shadow-popovers); + + width: var(--popover-width); + max-height: var(--popover-max-height); + + // to separate it from the bottom of the screen when it overflows + margin-bottom: var(--ads-v2-spaces-4); + z-index: 1001; +`; + +export const StyledHeader = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--ads-v2-spaces-4); +`; + +// TODO: Replace below rules with correct text kind when text is developed. +export const StyledHeaderText = styled(Text)` + --color: var(--ads-v2-colors-content-header-default-fg); + --font-size: var(--ads-v2-font-size-6); + --font-weight: 600; + --line-height: 1.5; +`; + +export const StyledBody = styled.div` + flex: 1; + // 25.5px is the line height of the header text. + // This code assumes that the header will always span exactly one line. + max-height: calc( + var(--popover-max-height) - calc(var(--popover-padding) * 2 + 25.5px) + ); + overflow-y: scroll; +`; diff --git a/app/client/packages/design-system/ads/src/Popover/Popover.tsx b/app/client/packages/design-system/ads/src/Popover/Popover.tsx new file mode 100644 index 000000000000..17d3b16ed71d --- /dev/null +++ b/app/client/packages/design-system/ads/src/Popover/Popover.tsx @@ -0,0 +1,75 @@ +import React from "react"; +import type { PopoverTriggerProps } from "@radix-ui/react-popover"; +import { Close, Root, Trigger, Portal } from "@radix-ui/react-popover"; + +import type { PopoverHeaderProps, PopoverContentProps } from "./Popover.types"; +import { + StyledBody, + StyledContent, + StyledHeader, + StyledHeaderText, +} from "./Popover.styles"; +import { Button } from "../Button"; +import { + PopoverBodyContentClassName, + PopoverBodyHeaderClassName, + PopoverTriggerClassName, +} from "./Popover.constants"; + +function PopoverTrigger(props: PopoverTriggerProps) { + return ( + + {props.children} + + ); +} + +// Text kind should be section-heading +function PopoverHeader({ + children, + className, + isClosable = true, +}: PopoverHeaderProps) { + return ( + + {children} + {isClosable && ( + + + + + +
    + + + +
    +     + + Tab3 Content + + + Tab4 Content + + + Tab5 Content + + + ); +}; + +export const TabsExample = TabsTemplate.bind({}) as StoryObj; +TabsExample.storyName = "Tabs"; +TabsExample.args = { + defaultValue: "tab1", +}; +TabsExample.argTypes = { + defaultValue: { + description: "The value of the tab to select by default, if uncontrolled", + control: { + type: "radio", + options: ["tab1", "tab2"], + }, + }, + value: { + description: "The value for the selected tab, if controlled", + control: { + type: "radio", + options: ["tab1", "tab2"], + }, + }, + orientation: { + description: + "The orientation the tabs are layed out. Mainly so arrow navigation is done accordingly (left & right vs. up & down). Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.", + control: { + type: "radio", + options: ["horizontal", "vertical"], + }, + }, + onValueChange: { + description: "A function called when a new tab is selected", + }, +}; + +// eslint-disable-next-line react/function-component-definition +const TabTemplate = (args: TabProps) => { + return ( + + + + + + ); +}; + +export const TabExample = TabTemplate.bind({}) as StoryObj; +TabExample.storyName = "Tab"; +TabExample.args = { + children: "Account", + value: "tab1", +}; +TabExample.argTypes = { + children: { + description: "The label given to the tab", + required: true, + }, + value: { + description: + "A unique id given to the tab that must match with the corresponding Tab Panel.", + required: true, + }, + notificationCount: { + description: "the number of notifications the tab contains", + control: { + type: "number", + }, + }, +}; + +// eslint-disable-next-line react/function-component-definition +const TabsListTemplate = (args: TabsListProps) => { + return ( + + + Account + Password + + + ); +}; + +export const TabsListExample = TabsListTemplate.bind({}) as StoryObj; +TabsListExample.storyName = "TabsList"; +TabsListExample.parameters = { + controls: { hideNoControlsWarning: true }, +}; + +// eslint-disable-next-line react/function-component-definition +const TabPanelTemplate = (args: TabPanelProps) => { + return ( + + + Account + Password + + + + + ); +}; + +export const TabPanelExample = TabPanelTemplate.bind({}) as StoryObj; +TabPanelExample.storyName = "TabPanel"; +TabPanelExample.args = { + children: ( +
    + Welcome to the Appsmith Emporium! + + Peruse the wide variety of templates available that may cater to your + interests, or build your own! + +
    + ), +}; +TabPanelExample.argTypes = { + children: { + description: + "The content that goes into the panel. Accepts any react node.", + required: true, + }, + value: { + description: + "A unique id given to the tab panel that must match with the corresponding tab.", + required: true, + }, +}; + +export function TabWithManyTabs() { + return ( + + + + Account + + + Password + + Account + Test + Another Account + Testing this + Tabs main + General + Test 3 + Test 4 + Test 5 + Test 6 + Test 7 + Test 8 + Test 9 + + +
    + + + +
    +     + +
    + + + +
    +     + + Tab3 Content + + + Tab4 Content + + + Tab5 Content + + + Tab6 Content + + + Tab7 Content + + + Tab8 Content + + + Tab9 Content + + + Tab10 Content + + + Tab11 Content + + + Tab12 Content + + + Tab13 Content + + + Tab14 Content + + + Tab15 Content + +     + ); +} diff --git a/app/client/packages/design-system/ads/src/Tab/Tab.styles.tsx b/app/client/packages/design-system/ads/src/Tab/Tab.styles.tsx new file mode 100644 index 000000000000..082c272ceba1 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Tab/Tab.styles.tsx @@ -0,0 +1,94 @@ +import styled, { css } from "styled-components"; +import * as RadixTabs from "@radix-ui/react-tabs"; + +const Variables = css` + --ads-v2-colors-content-tab-baseline-default-border: var( + --ads-v2-color-border + ); + --ads-v2-colors-content-tab-surface-default-border: transparent; + --ads-v2-colors-content-tab-surface-hover-border: var( + --ads-v2-color-border-emphasis + ); + --ads-v2-colors-content-tab-surface-active-border: var( + --ads-v2-color-border-brand + ); + --ads-v2-colors-content-tag-background-default-bg: var(--ads-v2-color-bg); + + --tab-color: var(--ads-v2-colors-content-label-inactive-fg); + --tab-selection-color: var( + --ads-v2-colors-content-tab-surface-default-border + ); +`; + +export const StyledTabs = styled(RadixTabs.Root)` + max-height: fit-content; + width: 100%; +`; + +export const StyledTabsList = styled(RadixTabs.List)` + ${Variables}; + display: flex; + background-color: var(--ads-v2-colors-content-tag-background-default-bg); + border-bottom: 1px solid + var(--ads-v2-colors-content-tab-baseline-default-border); + display: flex; + gap: var(--ads-v2-spaces-4); + width: 100%; + overflow: auto; + padding: var(--ads-v2-spaces-1); +`; + +export const StyledTabPanel = styled(RadixTabs.Content)` + margin-top: var(--ads-v2-spaces-4); +`; +export const StyledTab = styled(RadixTabs.TabsTrigger)` + ${Variables}; + + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + position: relative; + cursor: pointer; + padding: var(--ads-v2-spaces-2); + padding-bottom: var(--ads-v2-spaces-3); + background-color: var(--ads-v2-colors-content-tag-background-default-bg); + border: none; // get rid of button styles + color: var(--tab-color); + min-width: fit-content; + border-radius: var(--ads-v2-border-radius); + + &:after { + content: ""; + height: 2px; + position: absolute; + bottom: -2px; + left: 0; + right: 0; + background-color: var(--tab-selection-color); + } + + display: flex; + align-items: center; + gap: var(--ads-v2-spaces-3); + + &:hover { + --tab-selection-color: var( + --ads-v2-colors-content-tab-surface-hover-border + ); + } + + &[aria-selected="true"], + &:active { + --tab-selection-color: var( + --ads-v2-colors-content-tab-surface-active-border + ); + --tab-color: var(--ads-v2-colors-content-label-default-fg); + } + + &:focus-visible { + --tab-color: var(--ads-v2-colors-content-label-default-fg); + outline: var(--ads-v2-border-width-outline) solid + var(--ads-v2-color-outline); + outline-offset: var(--ads-v2-offset-outline); + } +`; diff --git a/app/client/packages/design-system/ads/src/Tab/Tab.tsx b/app/client/packages/design-system/ads/src/Tab/Tab.tsx new file mode 100644 index 000000000000..70fabdf4b284 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Tab/Tab.tsx @@ -0,0 +1,89 @@ +import React from "react"; +import clsx from "classnames"; + +import { + StyledTabs, + StyledTab, + StyledTabPanel, + StyledTabsList, +} from "./Tab.styles"; + +import { Text } from "../Text"; +import type { + TabPanelProps, + TabProps, + TabsListProps, + TabsProps, +} from "./Tab.types"; +import { Tag } from "../Tag"; +import { + TabsClassName, + TabsListClassName, + TabsListTabClassName, + TabsListTabCountClassName, + TabsPanelClassName, +} from "./Tab.constants"; + +/* TODO +- border styles using ::before +- vertical tabs +- focus styles + */ + +function Tabs(props: TabsProps) { + const { className, defaultValue, ...rest } = props; + return ( + + {props.children} + + ); +} + +function TabsList(props: TabsListProps) { + const { children, className, ...rest } = props; + return ( + + {children} + + ); +} + +function Tab(props: TabProps) { + const { children, className, notificationCount, value, ...rest } = props; + return ( + + + {children} + + {!!notificationCount && notificationCount > 0 && ( + + {notificationCount > 9 ? "9+" : notificationCount} + + )} + + ); +} + +function TabPanel(props: TabPanelProps) { + const { className, ...rest } = props; + return ( + + ); +} +export { Tabs, TabsList, Tab, TabPanel }; diff --git a/app/client/packages/design-system/ads/src/Tab/Tab.types.ts b/app/client/packages/design-system/ads/src/Tab/Tab.types.ts new file mode 100644 index 000000000000..62467e78cdc7 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Tab/Tab.types.ts @@ -0,0 +1,14 @@ +import type { + TabsContentProps, + TabsListProps as RadixTabsListProps, + TabsProps as RadixTabsProps, + TabsTriggerProps, +} from "@radix-ui/react-tabs"; + +export type TabsProps = RadixTabsProps; +export type TabsListProps = RadixTabsListProps; +export type TabProps = { + /** the number of notifications the tab contains */ + notificationCount?: number; +} & TabsTriggerProps; +export type TabPanelProps = TabsContentProps; diff --git a/app/client/packages/design-system/ads/src/Tab/index.ts b/app/client/packages/design-system/ads/src/Tab/index.ts new file mode 100644 index 000000000000..b87cca48f40c --- /dev/null +++ b/app/client/packages/design-system/ads/src/Tab/index.ts @@ -0,0 +1,2 @@ +export * from "./Tab"; +export * from "./Tab.types"; diff --git a/app/client/packages/design-system/ads/src/Table/Table.constants.ts b/app/client/packages/design-system/ads/src/Table/Table.constants.ts new file mode 100644 index 000000000000..2d6eadf25c89 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Table/Table.constants.ts @@ -0,0 +1,10 @@ +import { CLASS_NAME_PREFIX } from "../__config__/constants"; + +export const TableWrapperClassName = `${CLASS_NAME_PREFIX}-table-wrapper`; +export const TableClassName = `${CLASS_NAME_PREFIX}-table`; +export const TableHeaderClassName = `${TableClassName}__header`; +export const TableBodyClassName = `${TableClassName}__body`; +export const TableHeaderRowClassName = `${TableHeaderClassName}-row`; +export const TableHeaderCellClassName = `${TableHeaderRowClassName}-cell`; +export const TableBodyRowClassName = `${TableBodyClassName}-row`; +export const TableBodyCellClassName = `${TableBodyRowClassName}-cell`; diff --git a/app/client/packages/design-system/ads/src/Table/Table.stories.tsx b/app/client/packages/design-system/ads/src/Table/Table.stories.tsx new file mode 100644 index 000000000000..56c5c8b37ac8 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Table/Table.stories.tsx @@ -0,0 +1,434 @@ +import React from "react"; +import type { Meta, StoryObj } from "@storybook/react"; +import { Table } from "./Table"; +import { Tooltip } from "../Tooltip"; +import type { ColumnType } from "rc-table/lib/interface"; + +export default { + title: "ADS/Components/Table", + component: Table, + decorators: [ + (Story) => ( +
    + +
    + ), + ], +} as Meta; + +type Story = StoryObj; + +export const TableStory: Story = { + name: "Table", + argTypes: { + columns: { + control: { + type: "object", + }, + description: "Table columns", + }, + data: { + control: { + type: "object", + }, + description: "Table data", + }, + sticky: { + control: { + type: "boolean", + }, + description: + "This flag makes the table header sticky. This can be an object also.", + table: { + defaultValue: { + summary: "boolean | TableSticky", + }, + type: { + summary: `TableSticky { + offsetHeader?: number; + offsetSummary?: number; + offsetScroll?: number; + getContainer?: () => Window | HTMLElement; + }`, + }, + }, + }, + className: { + control: { + type: "text", + }, + description: "Table className", + }, + id: { + control: { + type: "text", + }, + description: "Table id", + }, + expandable: { + control: { + type: "object", + }, + description: + "Table expandable. ExpandableConfig object from rc-table. https://www.npmjs.com/package/rc-table", + }, + rowKey: { + control: { + type: "text", + }, + description: + "If rowKey is string, record[rowKey] will be used as key. If rowKey is function, the return value of rowKey(record, index) will be use as key.", + }, + rowClassName: { + control: { + type: "text", + }, + description: "get row's className", + table: { + type: { + summary: "string or Function(record, index, indent):string", + }, + }, + }, + onRow: { + control: { + type: "object", + }, + description: "onRow handler", + table: { + type: { + summary: "Function(record, index):Object", + }, + }, + }, + onHeaderRow: { + control: { + type: "object", + }, + description: "onHeaderRow handler", + table: { + type: { + summary: "Function(columns):Object", + }, + }, + }, + emptyText: { + control: { + type: "text", + }, + description: "empty text to show", + table: { + type: { + summary: "string | ReactNode | Function", + }, + defaultValue: { + summary: "No Data", + }, + }, + }, + summary: { + control: { + type: "object", + }, + description: + "Summary attribute in table component is used to define the summary row.", + table: { + type: { + summary: "Function(data):ReactNode", + }, + }, + }, + }, + args: { + columns: [ + { + title: "Column 1", + dataIndex: "col1", + width: 100, + }, + { + title: "Column 2", + dataIndex: "col2", + width: 100, + }, + { + title: "Column 3", + dataIndex: "col3", + width: 100, + }, + { + title: "Column 4", + dataIndex: "col4", + width: 100, + }, + { + title: "Column 5", + dataIndex: "col5", + width: 100, + }, + { + title: "Column 6", + dataIndex: "col6", + width: 100, + ellipsis: { + showTitle: false, + }, + render: (value: string) => ( + + {value} + + ), + }, + { + title: "Column 7", + dataIndex: "col7", + width: 100, + }, + ], + data: [ + { + col1: "Row 1, Column 1", + col2: "Row 1, Column 2", + col3: "Row 1, Column 3", + col4: "Row 1, Column 4", + col5: "Row 1, Column 5", + col6: "Row 1, Column 6, Row 1, Column 6, Row 1, Column 6, Row 1, Column 6, Row 1, Column 6", + col7: "Row 1, Column 7", + col8: "Row 1, Column 8", + col9: "Row 1, Column 9", + col10: "Row 1, Column 10", + }, + { + col1: "Row 2, Column 1", + col2: "Row 2, Column 2", + col3: "Row 2, Column 3", + col4: "Row 2, Column 4", + col5: "Row 2, Column 5", + col6: "Row 2, Column 6", + col7: "Row 2, Column 7", + col8: "Row 2, Column 8", + col9: "Row 2, Column 9", + col10: "Row 2, Column 10", + }, + { + col1: "Row 3, Column 1", + col2: "Row 3, Column 2", + col3: "Row 3, Column 3", + col4: "Row 3, Column 4", + col5: "Row 3, Column 5", + col6: "Row 3, Column 6", + col7: "Row 3, Column 7", + col8: "Row 3, Column 8", + col9: "Row 3, Column 9", + col10: "Row 3, Column 10", + }, + { + col1: "Row 4, Column 1", + col2: "Row 4, Column 2", + col3: "Row 4, Column 3", + col4: "Row 4, Column 4", + col5: "Row 4, Column 5", + col6: "Row 4, Column 6", + col7: "Row 4, Column 7", + col8: "Row 4, Column 8", + col9: "Row 4, Column 9", + col10: "Row 4, Column 10", + }, + { + col1: "Row 5, Column 1", + col2: "Row 5, Column 2", + col3: "Row 5, Column 3", + col4: "Row 5, Column 4", + col5: "Row 5, Column 5", + col6: "Row 5, Column 6", + col7: "Row 5, Column 7", + col8: "Row 5, Column 8", + col9: "Row 5, Column 9", + col10: "Row 5, Column 10", + }, + { + col1: "Row 6, Column 1", + col2: "Row 6, Column 2", + col3: "Row 6, Column 3", + col4: "Row 6, Column 4", + col5: "Row 6, Column 5", + col6: "Row 6, Column 6", + col7: "Row 6, Column 7", + col8: "Row 6, Column 8", + col9: "Row 6, Column 9", + col10: "Row 6, Column 10", + }, + { + col1: "Row 7, Column 1", + col2: "Row 7, Column 2", + col3: "Row 7, Column 3", + col4: "Row 7, Column 4", + col5: "Row 7, Column 5", + col6: "Row 7, Column 6", + col7: "Row 7, Column 7", + col8: "Row 7, Column 8", + col9: "Row 7, Column 9", + col10: "Row 7, Column 10", + }, + { + col1: "Row 8, Column 1", + col2: "Row 8, Column 2", + col3: "Row 8, Column 3", + col4: "Row 8, Column 4", + col5: "Row 8, Column 5", + col6: "Row 8, Column 6", + col7: "Row 8, Column 7", + col8: "Row 8, Column 8", + col9: "Row 8, Column 9", + col10: "Row 8, Column 10", + }, + { + col1: "Row 9, Column 1", + col2: "Row 9, Column 2", + col3: "Row 9, Column 3", + col4: "Row 9, Column 4", + col5: "Row 9, Column 5", + col6: "Row 9, Column 6", + col7: "Row 9, Column 7", + col8: "Row 9, Column 8", + col9: "Row 9, Column 9", + col10: "Row 9, Column 10", + }, + { + col1: "Row 10, Column 1", + col2: "Row 10, Column 2", + col3: "Row 10, Column 3", + col4: "Row 10, Column 4", + col5: "Row 10, Column 5", + col6: "Row 10, Column 6", + col7: "Row 10, Column 7", + col8: "Row 10, Column 8", + col9: "Row 10, Column 9", + col10: "Row 10, Column 10", + }, + ], + sticky: true, + tableLayout: "fixed", + }, + render: (args) => , +}; + +interface RecordType { + [key: string]: unknown; +} + +type ColumnStory = StoryObj>; +export const TableColumnStory: ColumnStory = { + name: "Table Column", + argTypes: { + key: { + control: { + type: "text", + }, + description: "Key for the column", + }, + className: { + control: { + type: "text", + }, + description: "className for the column", + }, + colSpan: { + control: { + type: "number", + }, + description: "Number of columns to be spanned", + }, + title: { + control: { + type: "text", + }, + description: "Title of the column", + }, + dataIndex: { + control: { + type: "text", + }, + description: "Display field of the data record", + }, + width: { + control: { + type: "number", + }, + description: "Width of the column", + }, + fixed: { + control: { + type: "text", + }, + description: "Set column to be fixed: true(same as left) 'left' 'right'", + }, + align: { + control: { + type: "text", + }, + description: "Alignment of the column", + }, + ellipsis: { + control: { + type: "boolean", + }, + description: "Whether ellipsis show or not", + table: { + defaultValue: { + summary: "false", + }, + }, + }, + rowScope: { + control: { + type: "text", + }, + description: "Scope of the row", + table: { + type: { + summary: "row | rowgroup", + }, + }, + }, + onCell: { + control: { + type: "object", + }, + description: "onCell handler", + table: { + type: { + summary: "Function(record, index):Object", + }, + }, + }, + onHeaderCell: { + control: { + type: "object", + }, + description: "onHeaderCell handler", + table: { + type: { + summary: "Function(column):Object", + }, + }, + }, + render: { + control: { + type: "object", + }, + description: "Render function of the cell", + table: { + type: { + summary: "Function(value, record, index):ReactNode", + }, + }, + }, + }, +}; diff --git a/app/client/packages/design-system/ads/src/Table/Table.styles.tsx b/app/client/packages/design-system/ads/src/Table/Table.styles.tsx new file mode 100644 index 000000000000..5ea487b5e56f --- /dev/null +++ b/app/client/packages/design-system/ads/src/Table/Table.styles.tsx @@ -0,0 +1,75 @@ +import styled from "styled-components"; +import clsx from "classnames"; +import { + TableBodyCellClassName, + TableBodyClassName, + TableBodyRowClassName, + TableClassName, + TableHeaderCellClassName, + TableHeaderClassName, + TableHeaderRowClassName, +} from "./Table.constants"; + +export const StyledTable = styled.table.attrs(({ className }) => ({ + className: clsx(TableClassName, className), +}))` + border-collapse: collapse; + border: none; + border-color: unset; +`; + +export const StyledHeader = styled.thead.attrs(({ className }) => ({ + className: clsx(TableHeaderClassName, className), +}))``; + +export const StyledHeaderRow = styled.tr.attrs(({ className }) => ({ + className: clsx(TableHeaderRowClassName, className), +}))` + height: var(--ads-v2-spaces-13); +`; + +export const StyledHeaderCell = styled.th.attrs(({ className }) => ({ + className: clsx(TableHeaderCellClassName, className), +}))` + && { + font-size: var(--ads-v2-font-size-4); + font-style: normal; + font-weight: var(--ads-v2-font-weight-normal); + line-height: 13px; + color: var(--ads-v2-colors-content-label-default-fg); + font-family: var(--ads-v2-font-family); + border: none; + border-color: unset; + padding: var(--ads-v2-spaces-5); + background-color: var(--ads-v2-colors-content-surface-neutral-bg); + border-bottom: 1px solid var(--ads-v2-colors-content-surface-default-border); + text-align: left; + } +`; + +export const StyledBody = styled.tbody.attrs(({ className }) => ({ + className: clsx(TableBodyClassName, className), +}))``; + +export const StyledRow = styled.tr.attrs(({ className }) => ({ + className: clsx(TableBodyRowClassName, className), +}))` + border-bottom: 1px solid var(--ads-v2-colors-content-surface-default-border); +`; + +export const StyledCell = styled.td.attrs(({ className }) => ({ + className: clsx(TableBodyCellClassName, className), +}))` + && { + font-size: var(--ads-v2-font-size-4); + padding: var(--ads-v2-spaces-6) var(--ads-v2-spaces-5); + color: var(--ads-v2-colors-content-label-default-fg); + font-family: var(--ads-v2-font-family); + border: none; + line-height: normal; + } + + &&.rc-table-cell.rc-table-cell-row-hover { + background: var(--ads-v2-colors-content-surface-neutral-bg); + } +`; diff --git a/app/client/packages/design-system/ads/src/Table/Table.tsx b/app/client/packages/design-system/ads/src/Table/Table.tsx new file mode 100644 index 000000000000..32fd3d33c110 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Table/Table.tsx @@ -0,0 +1,68 @@ +import React from "react"; +import RcTable from "rc-table"; +import clsx from "classnames"; + +import "rc-table/assets/index.css"; +import "./reset.css"; + +import type { DefaultRecordType } from "rc-table/lib/interface"; +import type { TableProps } from "./Table.types"; +import { + StyledBody, + StyledCell, + StyledHeader, + StyledHeaderCell, + StyledHeaderRow, + StyledRow, + StyledTable, +} from "./Table.styles"; +import { TableWrapperClassName } from "./Table.constants"; +import { Icon } from "../Icon"; +import { Text } from "../Text"; +import { Flex } from "../Flex"; + +function Table({ + className, + emptyText = NoData, + ...props +}: TableProps) { + const components = { + table: StyledTable, + header: { + wrapper: StyledHeader, + row: StyledHeaderRow, + cell: StyledHeaderCell, + }, + body: { + wrapper: StyledBody, + row: StyledRow, + cell: StyledCell, + }, + }; + return ( + + {...props} + className={clsx(TableWrapperClassName, className)} + components={components} + emptyText={emptyText} + /> + ); +} + +Table.displayName = "Table"; + +function NoData() { + return ( + + + No data found + + ); +} + +export { Table }; diff --git a/app/client/packages/design-system/ads/src/Table/Table.types.ts b/app/client/packages/design-system/ads/src/Table/Table.types.ts new file mode 100644 index 000000000000..80b87b9aa5fb --- /dev/null +++ b/app/client/packages/design-system/ads/src/Table/Table.types.ts @@ -0,0 +1,7 @@ +import type { TableProps as RcTableProps } from "rc-table"; +import type { DefaultRecordType } from "rc-table/lib/interface"; + +export type TableProps = Omit< + RcTableProps, + "styles" | "components" +>; diff --git a/app/client/packages/design-system/ads/src/Table/index.ts b/app/client/packages/design-system/ads/src/Table/index.ts new file mode 100644 index 000000000000..df14b6c44149 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Table/index.ts @@ -0,0 +1,2 @@ +export * from "./Table"; +export * from "./Table.types"; diff --git a/app/client/packages/design-system/ads/src/Table/reset.css b/app/client/packages/design-system/ads/src/Table/reset.css new file mode 100644 index 000000000000..6c062a96c8a7 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Table/reset.css @@ -0,0 +1,59 @@ +.rc-table.ads-v2-table-wrapper { + color: var(--ads-v2-colors-content-label-default-fg); +} + +.rc-table.ads-v2-table-wrapper .rc-table-content { + border: none; + border-radius: 0; +} + +.rc-table.ads-v2-table-wrapper .rc-table-header { + border: none; +} + +.rc-table.ads-v2-table-wrapper .rc-table-body { + border: none; +} + +.rc-table.ads-v2-table-wrapper .rc-table-footer, +.rc-table.ads-v2-table-wrapper .rc-table-summary, +.rc-table.ads-v2-table-wrapper .rc-table-caption { + border: none; + color: var(--ads-v2-colors-content-label-default-fg); + font-family: var(--ads-v2-font-family); +} + +.rc-table.ads-v2-table-wrapper .rc-table-tbody-virtual { + border: none; +} + +.rc-table.ads-v2-table-wrapper .rc-table-cell-fix-right-first, +.rc-table.ads-v2-table-wrapper .rc-table-cell-fix-right-last { + box-shadow: -1px 0 0 var(--ads-v2-shadow-color); +} + +.rc-table.ads-v2-table-wrapper .rc-table-fixed-column .rc-table-body::after { + border-right: none; +} + +.rc-table.ads-v2-table-wrapper .rc-table-expanded-row .rc-table-cell { + box-shadow: none; +} + +.rc-table.ads-v2-table-wrapper .rc-table-expanded-row-fixed::after { + border-right: none; +} + +.rc-table.ads-v2-table-wrapper.rc-table-has-fix-left + .rc-table-cell-fix-left-first::after, +.rc-table.ads-v2-table-wrapper.rc-table-has-fix-left + .rc-table-cell-fix-left-last::after { + box-shadow: inset 10px 0 8px -8px var(--ads-v2-shadow-color); +} + +.rc-table.ads-v2-table-wrapper.rc-table-has-fix-right + .rc-table-cell-fix-right-first::after, +.rc-table.ads-v2-table-wrapper.rc-table-has-fix-right + .rc-table-cell-fix-right-last::after { + box-shadow: inset -10px 0 8px -8px var(--ads-v2-shadow-color); +} diff --git a/app/client/packages/design-system/ads/src/Tag/Tag.mdx b/app/client/packages/design-system/ads/src/Tag/Tag.mdx new file mode 100644 index 000000000000..eafd8ea687d5 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Tag/Tag.mdx @@ -0,0 +1,45 @@ +import { Canvas, Meta } from "@storybook/blocks"; + +import * as TagStories from "./Tag.stories"; + + + +# Tag + +Use tags to categorize items with descriptive keywords. Use short labels for easy scanning. Use two words only if necessary to differentiate it. + + + +## Anatomy + +![Tag anatomy](./docs/tag-anatomy.png) + +## Spacing + +![Tag spacing](./docs/tag-spacing.png) + +## Kind + +### Special + +Used to indicate features that are available as a custom option under Enterprise Edition + + + +### Premium + +Used to tag and upsell features that are included in the Business Edition + + + +## Removing tags + +Tags can be permanent or closable (by displaying the close icon). The `isClosable` prop enables users to actively remove any tag and is frequently utilized in filtering. + + + +## Usage + +- Use sentence case for writing labels. +- Keep labels short to prevent wrapping. +- Avoid overloading an interface with tags as it reduces their meaning and makes them easier to overlook. diff --git a/app/client/packages/design-system/ads/src/Tag/Tag.stories.tsx b/app/client/packages/design-system/ads/src/Tag/Tag.stories.tsx new file mode 100644 index 000000000000..35ccdf76c4f3 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Tag/Tag.stories.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import { Tag } from "./Tag"; +import type { TagProps } from "./Tag.types"; +import type { StoryObj } from "@storybook/react"; + +export default { + title: "ADS/Components/Tag", + component: Tag, +}; + +// eslint-disable-next-line react/function-component-definition +const Template = (args: TagProps) => { + return ; +}; + +export const TagStory = Template.bind({}) as StoryObj; +TagStory.storyName = "Tag"; +TagStory.args = { + children: "contact@appsmith.com", + isClosable: false, + size: "sm", +}; + +export const SpecialTag = Template.bind({}) as StoryObj; +SpecialTag.args = { + ...TagStory.args, + children: "Enterprise", + kind: "special", +}; + +export const PremiumTag = Template.bind({}) as StoryObj; +PremiumTag.args = { + ...TagStory.args, + children: "Business Edition", + kind: "premium", +}; + +export const TagCloseStory = Template.bind({}) as StoryObj; +TagCloseStory.args = { + ...TagStory.args, + isClosable: true, +}; diff --git a/app/client/packages/design-system/ads/src/Tag/Tag.styles.tsx b/app/client/packages/design-system/ads/src/Tag/Tag.styles.tsx new file mode 100644 index 000000000000..19ca1304417f --- /dev/null +++ b/app/client/packages/design-system/ads/src/Tag/Tag.styles.tsx @@ -0,0 +1,101 @@ +import styled, { css } from "styled-components"; +import type { TagKind, TagSizes } from "./Tag.types"; +import { Button } from "../Button"; + +const Variables = css` + --tag-color-background: var(--ads-v2-colors-content-surface-neutral-bg); + --tag-color-border: transparent; + --tag-color-fg: var(--ads-v2-colors-content-label-default-fg); +`; + +const TagSizeMap = { + sm: css` + padding: var(--ads-v2-spaces-1) var(--ads-v2-spaces-2); + height: 18px; + `, + md: css` + padding: var(--ads-v2-spaces-2); + height: 22px; + `, +}; + +const KindMap = { + success: css` + --tag-color-background: var(--ads-v2-colors-content-surface-success-bg); + --tag-color-border: var(--ads-v2-colors-content-surface-success-border); + --tag-color-fg: var(--ads-v2-colors-content-label-success-fg); + `, + warning: css` + --tag-color-background: var(--ads-v2-colors-content-surface-warning-bg); + --tag-color-border: var(--ads-v2-colors-content-surface-warning-border); + --tag-color-fg: var(--ads-v2-colors-content-label-warning-fg); + `, + info: css` + --tag-color-background: var(--ads-v2-colors-content-surface-info-bg); + --tag-color-border: var(--ads-v2-colors-content-surface-info-border); + --tag-color-fg: var(--ads-v2-colors-content-label-info-fg); + `, + error: css` + --tag-color-background: var(--ads-v2-colors-content-surface-error-bg); + --tag-color-border: var(--ads-v2-colors-content-surface-error-border); + --tag-color-fg: var(--ads-v2-colors-content-label-error-fg); + `, + neutral: css` + --tag-color-background: var(--ads-v2-colors-content-surface-neutral-bg); + --tag-color-border: transparent; + --tag-color-fg: var(--ads-v2-colors-content-label-default-fg); + `, + special: css` + --tag-color-background: var(--ads-v2-colors-content-surface-special-bg); + --tag-color-border: var(--ads-v2-colors-content-surface-special-border); + --tag-color-fg: var(--ads-v2-colors-content-label-special-fg); + `, + premium: css` + --tag-color-background: var(--ads-v2-colors-content-surface-premium-bg); + --tag-color-border: var(--ads-v2-colors-content-surface-premium-border); + --tag-color-fg: var(--ads-v2-colors-content-label-premium-fg); + `, +}; + +export const StyledTag = styled.span<{ + isClosed: boolean; + kind?: TagKind; + size?: TagSizes; +}>` + ${Variables} + + ${({ size }) => size && TagSizeMap[size]} + ${({ kind }) => kind && KindMap[kind]} + min-width: fit-content; + + background-color: var(--tag-color-background); + border: 1px solid var(--tag-color-border); + color: var(--tag-color-fg); + + border-radius: var(--ads-v2-border-radius); + box-sizing: border-box; + + display: flex; + align-items: center; + + ${({ isClosed }) => isClosed && `display: none;`} +`; + +export const StyledButton = styled(Button)` + --button-color-fg: var(--tag-color-fg); + --button-color-bg: inherit; + + margin-left: var(--ads-v2-spaces-1); + position: relative; + top: 1px; // align with text + cursor: pointer; + + &:hover:not([data-disabled="true"]):not([data-loading="true"]) { + --button-color-fg: var(--tag-color-fg); + --button-color-bg: inherit; + } + &:active:not([data-disabled="true"]):not([data-loading="true"]) { + --button-color-fg: var(--tag-color-fg); + --button-color-bg: inherit; + } +`; diff --git a/app/client/packages/design-system/ads/src/Tag/Tag.tsx b/app/client/packages/design-system/ads/src/Tag/Tag.tsx new file mode 100644 index 000000000000..de430670ecc9 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Tag/Tag.tsx @@ -0,0 +1,54 @@ +import React from "react"; + +import type { TagProps } from "./Tag.types"; +import { StyledButton, StyledTag } from "./Tag.styles"; +import { Text } from "../Text"; + +/*TODO: + * It is unclear how the tag component can be interacted with using the keyboard. + * Should just the icon have a focus style? Should the whole tag have a focus style? + * Should the escape key dismiss the tag? Or should the enter key dismiss the tag when the icon is focused? + */ +function Tag({ + children, + isClosable, + kind = "neutral", + onClose, + ...rest +}: TagProps) { + const [isClosed, setClosed] = React.useState(false); + + const closeHandler = () => { + setClosed(true); + onClose && onClose(); + }; + + return ( + + + {children} + + {isClosable && ( + // We are setting unsafe height here because this is a rare case where a smaller icon button is needed. + + )} + + ); +} + +Tag.displayName = "Tag"; + +Tag.defaultProps = { + size: "sm", + isClosable: true, +}; + +export { Tag }; diff --git a/app/client/packages/design-system/ads/src/Tag/Tag.types.tsx b/app/client/packages/design-system/ads/src/Tag/Tag.types.tsx new file mode 100644 index 000000000000..5416ff7ec369 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Tag/Tag.types.tsx @@ -0,0 +1,27 @@ +import type React from "react"; +import type { Sizes } from "../__config__/types"; + +export type TagSizes = Extract; + +// TODO: Update this to include "Kind" from __config__/types +export type TagKind = "neutral" | "special" | "premium"; + +export type TagProps = { + /** the size of the tag */ + size?: TagSizes; + + /** (try not to) pass addition classes here */ + className?: string; + + /** the words you want to display */ + children: string | number | React.ReactNode; + + /** whether or not the tag can be dismissed*/ + isClosable?: boolean; + + /** the kind of the tag */ + kind?: TagKind; + + /** the function to call when the tag is dismissed */ + onClose?: () => void; +} & React.HTMLAttributes; diff --git a/app/client/packages/design-system/ads/src/Tag/index.ts b/app/client/packages/design-system/ads/src/Tag/index.ts new file mode 100644 index 000000000000..8a9d95f02aee --- /dev/null +++ b/app/client/packages/design-system/ads/src/Tag/index.ts @@ -0,0 +1,2 @@ +export * from "./Tag"; +export * from "./Tag.types"; diff --git a/app/client/packages/design-system/ads/src/Text/Text.constants.ts b/app/client/packages/design-system/ads/src/Text/Text.constants.ts new file mode 100644 index 000000000000..a526edc71dd5 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Text/Text.constants.ts @@ -0,0 +1,3 @@ +import { CLASS_NAME_PREFIX } from "../__config__/constants"; + +export const TextClassName = `${CLASS_NAME_PREFIX}-text`; diff --git a/app/client/packages/design-system/ads/src/Text/Text.mdx b/app/client/packages/design-system/ads/src/Text/Text.mdx new file mode 100644 index 000000000000..fdd8c6b185e9 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Text/Text.mdx @@ -0,0 +1,15 @@ +import { Meta } from "@storybook/blocks"; +import * as TextStories from "./Text.stories"; + + + +> To be written + +# Text + +Use the text component for displaying textual information to the user (as headings or body) + +- Only use text tokens (text styles in figma) when the Text component doesn’t meet your need. +- Use sentence case. No capital letters. + +To know more about how to use typography, refer [Typography](https://design-system.appsmith.com/?path=/docs/typography--documentation) diff --git a/app/client/packages/design-system/ads/src/Text/Text.stories.tsx b/app/client/packages/design-system/ads/src/Text/Text.stories.tsx new file mode 100644 index 000000000000..640ed86334e1 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Text/Text.stories.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import { Text } from "./Text"; +import type { Meta, StoryObj } from "@storybook/react"; + +export default { + title: "ADS/Components/Text", + component: Text, +} as Meta; + +type Story = StoryObj; + +export const TextStory: Story = { + name: "Text", + args: { + children: "How vexingly quick daft zebras jump!", + }, +}; + +export const EditableTextStory: Story = { + name: "Editable Text", + args: { + children: "How vexingly quick daft zebras jump!", + isEditable: true, + kind: "body-m", + }, + render: function Render(args) { + const [text, setText] = React.useState(args.children); + + return ( + { + // @ts-expect-error type error + setText(e.target.value); + }} + > + {text} + + ); + }, +}; diff --git a/app/client/packages/design-system/ads/src/Text/Text.styles.tsx b/app/client/packages/design-system/ads/src/Text/Text.styles.tsx new file mode 100644 index 000000000000..ec4a7b1f8b92 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Text/Text.styles.tsx @@ -0,0 +1,210 @@ +import styled, { css } from "styled-components"; +import type { TextKind } from "./Text.types"; + +const TypographyScales = css` + --ads-v2-h1-font-size: var(--ads-v2-font-size-10); + --ads-v2-h1-font-weight: var(--ads-v2-font-weight-bold); + --ads-v2-h1-line-height: var(--ads-v2-line-height-8); + --ads-v2-h1-letter-spacing: var(--ads-v2-letter-spacing-2); + + --ads-v2-h2-font-size: var(--ads-v2-font-size-8); + --ads-v2-h2-font-weight: var(--ads-v2-font-weight-bold); + --ads-v2-h2-line-height: var(--ads-v2-line-height-7); + --ads-v2-h2-letter-spacing: var(--ads-v2-letter-spacing-2); + + --ads-v2-h3-font-size: var(--ads-v2-font-size-7); + --ads-v2-h3-font-weight: var(--ads-v2-font-weight-bold); + --ads-v2-h3-line-height: var(--ads-v2-line-height-6); + --ads-v2-h3-letter-spacing: var(--ads-v2-letter-spacing-2); + + --ads-v2-h4-font-size: var(--ads-v2-font-size-6); + --ads-v2-h4-font-weight: var(--ads-v2-font-weight-bold); + --ads-v2-h4-line-height: var(--ads-v2-line-height-3); + --ads-v2-h4-letter-spacing: var(--ads-v2-letter-spacing-0); + + --ads-v2-h5-font-size: var(--ads-v2-font-size-4); + --ads-v2-h5-font-weight: var(--ads-v2-font-weight-bold); + --ads-v2-h5-line-height: var(--ads-v2-line-height-3); + --ads-v2-h5-letter-spacing: var(--ads-v2-letter-spacing-0); + + --ads-v2-h6-font-size: var(--ads-v2-font-size-2); + --ads-v2-h6-font-weight: var(--ads-v2-font-weight-bold); + --ads-v2-h6-line-height: var(--ads-v2-line-height-1); + --ads-v2-h6-letter-spacing: var(--ads-v2-letter-spacing-3); + + --ads-v2-p-font-size: var(--ads-v2-font-size-4); + --ads-v2-p-font-weight: var(--ads-v2-font-weight-normal); + --ads-v2-p-line-height: var(--ads-v2-line-height-3); + --ads-v2-p-letter-spacing: var(--ads-v2-letter-spacing-0); +`; + +const Variables = css` + --font-family: var(--ads-v2-font-family); + --color: var(--ads-v2-colors-content-label-default-fg); + + --font-size: var(--ads-v2-p-font-size); + --font-weight: var(--ads-v2-p-font-weight); + --line-height: var(--ads-v2-p-line-height); + --letter-spacing: var(--ads-v2-p-letter-spacing); +`; + +const Kind = { + error: css` + --font-size: var(--ads-v2-p-font-size); + --font-weight: var(--ads-v2-p-font-weight); + --line-height: var(--ads-v2-p-line-height); + --letter-spacing: var(--ads-v2-p-letter-spacing); + --color: var(--ads-v2-colors-content-label-error-fg); + `, + // The default, span, uses the same values as p for now. + span: css` + --font-size: var(--ads-v2-p-font-size); + --font-weight: var(--ads-v2-p-font-weight); + --line-height: var(--ads-v2-p-line-height); + --letter-spacing: var(--ads-v2-p-letter-spacing); + `, + code: css` + --font-family: var(--ads-v2-font-family-code); + --font-size: var(--ads-v2-font-size-4); + `, + "body-s": css` + --font-size: var(--ads-v2-font-size-2); + `, + "body-m": css` + --font-size: var(--ads-v2-font-size-4); + `, + "action-l": css` + --font-size: var(--ads-v2-font-size-6); + `, + "action-m": css` + --font-size: var(--ads-v2-font-size-4); + `, + "action-s": css` + --font-size: var(--ads-v2-font-size-2); + `, + "heading-xl": css` + --font-size: var(--ads-v2-font-size-14); + --font-weight: var(--ads-v2-h1-font-weight); + --line-height: var(--ads-v2-h1-line-height); + --letter-spacing: var(--ads-v2-h1-letter-spacing); + --color: var(--ads-v2-color-fg-emphasis-plus); + `, + "heading-l": css` + --font-size: var(--ads-v2-font-size-12); + --font-weight: var(--ads-v2-h2-font-weight); + --line-height: var(--ads-v2-h2-line-height); + --letter-spacing: var(--ads-v2-h2-letter-spacing); + --color: var(--ads-v2-color-fg-emphasis-plus); + `, + "heading-m": css` + --font-size: var(--ads-v2-font-size-10); + --font-weight: var(--ads-v2-h3-font-weight); + --line-height: var(--ads-v2-h3-line-height); + --letter-spacing: var(--ads-v2-h3-letter-spacing); + --color: var(--ads-v2-color-fg-emphasis-plus); + `, + "heading-s": css` + --font-size: var(--ads-v2-font-size-6); + --font-weight: var(--ads-v2-h4-font-weight); + --line-height: var(--ads-v2-h4-line-height); + --letter-spacing: var(--ads-v2-h4-letter-spacing); + --color: var(--ads-v2-color-fg-emphasis-plus); + `, + "heading-xs": css` + --font-size: var(--ads-v2-font-size-4); + --font-weight: var(--ads-v2-h5-font-weight); + --line-height: var(--ads-v2-h5-line-height); + --letter-spacing: var(--ads-v2-h5-letter-spacing); + --color: var(--ads-v2-color-fg-emphasis-plus); + `, +}; + +export const StyledText = styled.span<{ + color?: string; + kind?: TextKind; + isBold?: boolean; + isItalic?: boolean; + isUnderlined?: boolean; + isStriked?: boolean; + isEditable?: boolean; +}>` + ${TypographyScales} + ${Variables} + + /* Kind style */ + ${({ kind }) => kind && Kind[kind]} + + /* Base style */ + font-family: var(--font-family); + color: ${({ color }) => (color ? color : "var(--color)")}; + + font-size: var(--font-size); + font-weight: var(--font-weight); + /* line-height: var(--line-height); */ + letter-spacing: var(--letter-spacing); + margin: 0; + position: relative; + + /* Bold style */ + &[data-bold="true"] { + font-weight: var(--ads-v2-font-weight-bold); + } + + /* Italic style */ + &[data-italic="true"] { + font-style: italic; + } + + /* Underlined style */ + &[data-underlined="true"] { + text-decoration: underline; + } + + /* Striked style */ + &[data-striked="true"] { + text-decoration: line-through; + } + + /* Editable style */ + ${({ isEditable }) => + isEditable && + ` + &:after { + content: attr(data-value) " "; + visibility: hidden; + font-family: inherit; + font-size: inherit; + white-space: pre-wrap; + } + `} +`; + +export const StyledEditableInput = styled.input` + font-size: inherit; + font-weight: inherit; + font-family: inherit; + line-height: inherit; + letter-spacing: inherit; + color: inherit; + text-decoration: inherit; + background-color: transparent; + border: 1px solid transparent; + border-radius: var(--ads-v2-border-radius); + outline: none; + padding: 0; + margin: 0; + position: absolute; + left: -3px; + top: -3px; + width: 100%; + padding: var(--ads-v2-spaces-1); + + &:hover { + border-color: var(--ads-v2-colors-control-field-hover-border); + } + + &:focus, + &:active { + border-color: var(--ads-v2-colors-control-field-default-border); + } +`; diff --git a/app/client/packages/design-system/ads/src/Text/Text.tsx b/app/client/packages/design-system/ads/src/Text/Text.tsx new file mode 100644 index 000000000000..493555010f25 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Text/Text.tsx @@ -0,0 +1,57 @@ +import React from "react"; +import clsx from "classnames"; +import type { TextProps } from "./Text.types"; +import { StyledEditableInput, StyledText } from "./Text.styles"; +import { TextClassName } from "./Text.constants"; + +/* +TODO: + - add segment header style to list of styles + */ + +function Text({ + children, + className, + color, + inputProps, + isEditable, + kind, + onChange, + renderAs, + ...rest +}: TextProps) { + return ( + + {isEditable && typeof children === "string" ? ( + + ) : ( + children + )} + + ); +} + +Text.displayName = "Text"; + +Text.defaultProps = { + renderAs: "span", + kind: "span", +}; + +export { Text }; diff --git a/app/client/packages/design-system/ads/src/Text/Text.types.ts b/app/client/packages/design-system/ads/src/Text/Text.types.ts new file mode 100644 index 000000000000..ec105aeaf1dc --- /dev/null +++ b/app/client/packages/design-system/ads/src/Text/Text.types.ts @@ -0,0 +1,50 @@ +import type { ReactNode } from "react"; +import type React from "react"; + +export type TextKind = + | "heading-xl" + | "heading-l" + | "heading-m" + | "heading-s" + | "heading-xs" + | "body-m" + | "body-s" + | "action-l" + | "action-m" + | "action-s" + | "code"; + +// Text props +export type TextProps = { + /** to change the rendering component */ + renderAs?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label"; + /** (try not to) pass addition classes here */ + className?: string; + /** the words you want to display */ + children: ReactNode; + /** style the text based on it's function */ + kind?: TextKind; + /** the color of the text. Accepts any valid css value. */ + color?: string; + /** whether the text is bold or not */ + isBold?: boolean; + /** whether the text is italic or not */ + isItalic?: boolean; + /** whether the text is underlined or not */ + isUnderlined?: boolean; + /** whether the text is striked or not */ + isStriked?: boolean; + /** whether the text is editable or not */ + isEditable?: boolean; + /** onChange event for editable text */ + onChange?: (event: React.ChangeEvent) => void; + /** input component props while isEditable is true */ + inputProps?: Omit< + React.InputHTMLAttributes, + "value" | "onChange" + >; +} & React.HTMLAttributes & + React.HTMLAttributes & + React.HTMLAttributes & + React.HTMLAttributes & + React.LabelHTMLAttributes; diff --git a/app/client/packages/design-system/ads/src/Text/index.ts b/app/client/packages/design-system/ads/src/Text/index.ts new file mode 100644 index 000000000000..db748722ac03 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Text/index.ts @@ -0,0 +1,2 @@ +export * from "./Text"; +export * from "./Text.types"; diff --git a/app/client/packages/design-system/ads/src/Toast/Toast.constants.ts b/app/client/packages/design-system/ads/src/Toast/Toast.constants.ts new file mode 100644 index 000000000000..24b205f5518c --- /dev/null +++ b/app/client/packages/design-system/ads/src/Toast/Toast.constants.ts @@ -0,0 +1,4 @@ +import { CLASS_NAME_PREFIX } from "../__config__/constants"; + +export const ToastClassName = `${CLASS_NAME_PREFIX}-toast`; +export const ToastbodyClassName = `${ToastClassName}__body`; diff --git a/app/client/packages/design-system/ads/src/Toast/Toast.mdx b/app/client/packages/design-system/ads/src/Toast/Toast.mdx new file mode 100644 index 000000000000..95054830b21a --- /dev/null +++ b/app/client/packages/design-system/ads/src/Toast/Toast.mdx @@ -0,0 +1,65 @@ +import { Canvas, Meta } from "@storybook/blocks"; + +import * as ToastStories from "./Toast.stories"; + + + +# Toast + +The toast component provides quick feedback to users, without disrupting their workflow.The toast appears at the top of the interface, making it easy to see and understand. Use toasts to communicate the system’s response for actions that take a while to execute, or communicating the response of an action that has happened elsewhere or in the background. Be mindful of using toasts to communicate as these demand user’s attention and can be annoying when not used judiciously. + + + +## Anatomy + +Toasts typically have a simple design, consisting of a container with text and an icon. The text is short and to the point, providing users with quick information on what just happened. The icon is often used to convey the type of message being displayed, such as success, error, warning, or info. + +![Toast anatomy](./docs/toast-anatomy.png) + +## Spacing + +![Toast spacing](./docs/toast-spacing.png) + +## Kind + +There are 4 different kinds of toast notifications: info, success, warning, and error. + +### Info + + + +### Success + +Success toasts are used to inform users that an action has been completed successfully, and the desired outcome has been achieved. + + + +### Warning + +Warning toasts are used to inform users about potential issues that may arise in the future. Finally, Info toasts are used to provide users with additional information about a particular action or event. + + + +### Error + +Error toasts are used to inform users that something went wrong, and they need to take action to fix it. + + + +## Usage + +Toast should: + +- Be used for short messages to confirm an action +- Rarely be used for error messages. This is currenly a problem within Appsmith. All new features built should move away from using toast as an error delivery mechanism. + +When to use: + +- For success messages +- Only for non-critical errors that are relevant at the moment and can be explained in a few words. + +--- + +## Resources + +1. Internally, toast uses [react-toastify](https://fkhadra.github.io/react-toastify/introduction/) diff --git a/app/client/packages/design-system/ads/src/Toast/Toast.stories.tsx b/app/client/packages/design-system/ads/src/Toast/Toast.stories.tsx new file mode 100644 index 000000000000..c261e73b51ed --- /dev/null +++ b/app/client/packages/design-system/ads/src/Toast/Toast.stories.tsx @@ -0,0 +1,79 @@ +import React from "react"; +import { Toast, toast } from "./Toast"; +import type { ToastProps } from "./Toast.types"; +import type { StoryObj } from "@storybook/react"; + +export default { + title: "ADS/Components/Toast", + component: Toast, + argTypes: { + content: { + control: "text", + description: "The content the toast contains", + type: { + required: true, + }, + }, + kind: { + description: "visual style to be used indicating type of toast ", + }, + action: { + description: + "An object that displays an action that can be triggered from the toast", + }, + }, +}; + +// eslint-disable-next-line react/function-component-definition +const Template = (args: ToastProps) => { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + const notify = () => toast.show(args.content, { ...args }); + + return ( +
    + + +
    + ); +}; + +export const Default = Template.bind({}) as StoryObj; +Default.args = { + content: "Am I a toast?", +}; + +export const SuccessToast = Template.bind({}) as StoryObj; +SuccessToast.args = { + ...Default.args, + kind: "success", +}; + +export const WarningToast = Template.bind({}) as StoryObj; +WarningToast.args = { + ...Default.args, + kind: "warning", +}; + +export const ErrorToast = Template.bind({}) as StoryObj; +ErrorToast.args = { + ...Default.args, + kind: "error", +}; + +export const InformationToast = Template.bind({}) as StoryObj; +InformationToast.args = { + ...Default.args, + kind: "info", +}; + +export const ToastWithAction = Template.bind({}) as StoryObj; +ToastWithAction.args = { + content: "Widget was removed.", + kind: "success", + action: { + text: "undo", + // eslint-disable-next-line no-console + effect: () => console.log("effect affected"), + }, +}; diff --git a/app/client/packages/design-system/ads/src/Toast/Toast.styles.tsx b/app/client/packages/design-system/ads/src/Toast/Toast.styles.tsx new file mode 100644 index 000000000000..f27906c4b89e --- /dev/null +++ b/app/client/packages/design-system/ads/src/Toast/Toast.styles.tsx @@ -0,0 +1,65 @@ +import styled, { css } from "styled-components"; +import { ToastContainer } from "react-toastify"; +import { Text } from "../Text"; +import type { ToastProps } from "./Toast.types"; +import { Button } from "../Button"; +import { ToastClassName, ToastbodyClassName } from "./Toast.constants"; + +const Variables = css` + // All the --toastify prefixed variables are changing tokens defined in react-toastify + // For a complete list, see https://fkhadra.github.io/react-toastify/how-to-style/#override-css-variables + + --toastify-toast-width: 320px; + --toastify-toast-background: var(--ads-v2-colors-response-surface-default-bg); + --toastify-toast-min-height: 2.5rem; + --toastify-toast-max-height: 800px; + --toastify-font-family: var(--ads-v2-font-family); + --toastify-z-index: 9999; + + --toastify-text-color-light: var(--ads-v2-colors-response-label-default-fg); +`; + +export const StyledToast = styled(ToastContainer).attrs({ + toastClassName: ToastClassName, + bodyClassName: ToastbodyClassName, +})` + .${ToastClassName} { + border: solid 1px var(--ads-v2-color-border); + padding: var(--ads-v2-spaces-3); + } + + .${ToastbodyClassName} { + padding: 0; + gap: var(--ads-v2-spaces-3); + align-items: center; + } + + .Toastify__toast { + // TODO: Move box-shadow to theme once https://www.notion.so/appsmith/Box-shadows-enumerate-name-and-document-29c2d8490b4c4a42b4f381d82e761b87 is complete + box-shadow: + 0 1.9px 7px 0 rgba(42, 42, 42, 0.01), + 0 15px 56px 0 rgba(42, 42, 42, 0.07); + } + + .Toastify__toast-icon { + align-self: center; + width: fit-content; + margin-right: 0; + } + + ${Variables} +`; + +export const ToastBody = styled(Text)` + padding: 0; + display: flex; + align-items: center; + justify-content: space-between; + color: var(--ads-v2-colors-response-label-default-fg); + gap: var(--ads-v2-spaces-3); + word-break: break-word; +`; + +export const StyledButton = styled(Button)` + align-self: center; +`; diff --git a/app/client/packages/design-system/ads/src/Toast/Toast.tsx b/app/client/packages/design-system/ads/src/Toast/Toast.tsx new file mode 100644 index 000000000000..6f96522219d6 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Toast/Toast.tsx @@ -0,0 +1,74 @@ +import React from "react"; +import capitalize from "lodash/capitalize"; +import { Slide, toast as toastifyToast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.min.css"; + +import type { ToastProps } from "./Toast.types"; +import { StyledButton, StyledToast, ToastBody } from "./Toast.styles"; +import { getIconByKind } from "../Icon/getIconByKind"; + +/** + * TODO: + * - Look up accessibility features for toasts (spectrum, MDN, what toastify does and does not support) + * @constructor + */ + +function Toast({ ...rest }: ToastProps) { + return ( + + ); +} + +// content is of type string and not type ToastContent because we do not want to +// allow developers to pass in their own components. +const toast = { + show: (content: string, options?: ToastProps) => { + const actionText = capitalize(options?.action?.text); + const icon = getIconByKind(options?.kind); + // generate a unique toastId with the options given to it + const toastId = JSON.stringify({ ...options, content }); + return toastifyToast( + + {content} + {actionText && ( + { + options?.action?.effect && options?.action?.effect(); + toastifyToast.dismiss(); + }} + {...options?.action} + > + {actionText} + + )} + , + { + icon: icon, + toastId, + type: options?.kind, + closeOnClick: !actionText, + ...options, + }, + ); + }, + dismiss: () => toastifyToast.dismiss(), +}; + +Toast.displayName = "Toast"; + +Toast.defaultProps = { + kind: undefined, +}; + +export { Toast, toast }; diff --git a/app/client/packages/design-system/ads/src/Toast/Toast.types.tsx b/app/client/packages/design-system/ads/src/Toast/Toast.types.tsx new file mode 100644 index 000000000000..c6cd681b057d --- /dev/null +++ b/app/client/packages/design-system/ads/src/Toast/Toast.types.tsx @@ -0,0 +1,17 @@ +import type { ToastOptions } from "react-toastify"; +import type { ButtonProps } from "../Button/Button.types"; +import type { Kind } from "../__config__/types"; + +export type ToastKind = Kind; + +export type ToastProps = { + /** visual style to be used indicating type of toast */ + kind?: ToastKind; + /** An object that displays an action that can be triggered from the toast */ + action?: { + /** One word describing an action a user may perform upon seeing the toast */ + text: string; + /** A function that carries out the action */ + effect: any; + } & ButtonProps; +} & ToastOptions; diff --git a/app/client/packages/design-system/ads/src/Toast/index.ts b/app/client/packages/design-system/ads/src/Toast/index.ts new file mode 100644 index 000000000000..9fb95a663835 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Toast/index.ts @@ -0,0 +1,2 @@ +export * from "./Toast"; +export * from "./Toast.types"; diff --git a/app/client/packages/design-system/ads/src/ToggleButton/ToggleButton.constants.ts b/app/client/packages/design-system/ads/src/ToggleButton/ToggleButton.constants.ts new file mode 100644 index 000000000000..86f47cf10823 --- /dev/null +++ b/app/client/packages/design-system/ads/src/ToggleButton/ToggleButton.constants.ts @@ -0,0 +1,4 @@ +import { CLASS_NAME_PREFIX } from "../__config__/constants"; + +export const ToggleClassName = CLASS_NAME_PREFIX + "-toggle-button"; +export const ToggleIconClassName = ToggleClassName + "__icon"; diff --git a/app/client/packages/design-system/ads/src/ToggleButton/ToggleButton.mdx b/app/client/packages/design-system/ads/src/ToggleButton/ToggleButton.mdx new file mode 100644 index 000000000000..4262793a62b0 --- /dev/null +++ b/app/client/packages/design-system/ads/src/ToggleButton/ToggleButton.mdx @@ -0,0 +1,56 @@ +import { Canvas, Meta } from "@storybook/blocks"; + +import * as ToggleButtonStories from "./ToggleButton.stories"; + + + +# Toggle Button + +A toggle button is a button that when pressed, "selects" the value it represents, and when not pressed, hides it. While a toggle button presents a binary option, it's label describes the "on" state. If a sufficiently succinct description cannot be found, use a switch instead. If you have more than binary options, use a segmented control. Toggle buttons are typically used when the result of the change in state is instantaneous and confined to a small scope. +In Appsmith, the biggest use of toggle button is to display the state of evaluated javascript in many of the platform's input fields. + + + +## Anatomy + +![Toggle button anatomy](./docs/toggle-button-anatomy.png) + +## Spacing + +![Toggle button spacing](./docs/toggle-button-spacing.png) + +## Size + +- _Small_: Compact design for limited space. Use icons that are simple and easily recognizable. +- _Medium_: Balanced between space and usability. Use clear icons that maintain clarity when scaled down. +- _Large_: Prominent for easy interaction. You may use detailed icons for clear representation. + +An example of using a large toggle button is in the property pane style for switching between bold, italics, and preview modes within the navbar. + +## Usage + +Constraint: Our toggle button currently only displays icons. It cannot display text. + +**Use a Toggle Button when:** + +- You have two options or states that are mutually exclusive. +- Instant visual feedback is needed to indicate the selected option. +- The options have equal importance and need to be switched frequently. +- The scope of the change created by the toggle button is limited to a specific place in the visible UI. + +**Use a Switch when:** + +- The description for the toggle button would be too long. +- The scope for the change is much larger and will affect other parts of the application. + +**Use a Segmented Control when:** + +- You need separate descriptive words to describe the two different states. + +**Use a Button when:** + +- You have a single action or command to perform. +- The action does not involve toggling or switching states. +- Additional customization or functionality is required. + +In summary, choose a Toggle Button for mutually exclusive options with instant feedback and equal importance. Choose a General Button for single actions or when customization is needed. Consider the specific context and user needs when deciding which button type to use. diff --git a/app/client/packages/design-system/ads/src/ToggleButton/ToggleButton.stories.tsx b/app/client/packages/design-system/ads/src/ToggleButton/ToggleButton.stories.tsx new file mode 100644 index 000000000000..1e24558c19fb --- /dev/null +++ b/app/client/packages/design-system/ads/src/ToggleButton/ToggleButton.stories.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import { ToggleButton } from "./ToggleButton"; +import type { StoryObj } from "@storybook/react"; +import type { ToggleButtonProps } from "./ToggleButton.types"; + +export default { + title: "ADS/Components/Toggle Button/Toggle Button", + component: ToggleButton, +}; + +// eslint-disable-next-line react/function-component-definition +const Template = (args: ToggleButtonProps) => { + return ; +}; + +export const ToggleButtonStory = Template.bind({}) as StoryObj; +ToggleButtonStory.storyName = "Toggle Button"; +ToggleButtonStory.args = { + size: "sm", + icon: "add-more", +}; diff --git a/app/client/packages/design-system/ads/src/ToggleButton/ToggleButton.styles.tsx b/app/client/packages/design-system/ads/src/ToggleButton/ToggleButton.styles.tsx new file mode 100644 index 000000000000..2cd0763745d3 --- /dev/null +++ b/app/client/packages/design-system/ads/src/ToggleButton/ToggleButton.styles.tsx @@ -0,0 +1,84 @@ +import styled, { css } from "styled-components"; +import { ToggleIconClassName } from "./ToggleButton.constants"; +import type { ToggleButtonSizes } from "./ToggleButton.types"; + +const Variables = css` + --toggle-padding: var(--ads-v2-spaces-2); + --toggle-color-border: var(--ads-v2-colors-control-field-default-border); + --toggle-color-background: var(--ads-v2-colors-control-field-default-bg); + --toggle-color-icon: var(--ads-v2-colors-control-icon-default-fg); + --toggle-height: var(--ads-v2-spaces-5); + --toggle-width: var(--ads-v2-spaces-5); +`; + +const Sizes = { + sm: css` + --toggle-padding: var(--ads-v2-spaces-1); + --toggle-height: var(--ads-v2-spaces-5); + --toggle-width: var(--ads-v2-spaces-5); + `, + md: css` + --toggle-padding: var(--ads-v2-spaces-2); + --toggle-height: var(--ads-v2-spaces-7); + --toggle-width: var(--ads-v2-spaces-7); + `, + lg: css` + --toggle-padding: var(--ads-v2-spaces-2); + --toggle-height: var(--ads-v2-spaces-8); + --toggle-width: var(--ads-v2-spaces-8); + `, +}; + +export const StyledToggleButton = styled.button<{ + isDisabled?: boolean; + isSelected?: boolean; + size?: ToggleButtonSizes; +}>` + ${Variables}; + + ${({ size }) => size && Sizes[size]}; + + padding: var(--toggle-padding); + border-radius: var(--ads-v2-border-radius); + cursor: pointer; + height: var(--toggle-height); + width: var(--toggle-width); + + & > .${ToggleIconClassName} { + height: 100%; + width: 100%; + } + + &:hover:enabled { + --toggle-color-background: var(--ads-v2-colors-control-field-hover-bg); + --toggle-color-border: var(--ads-v2-colors-control-field-hover-border); + } + + ${({ isSelected }) => + isSelected && + `--toggle-color-background: var(--ads-v2-colors-control-field-checked-bg); + --toggle-color-border: var(--ads-v2-colors-control-field-checked-border); + --toggle-color-icon: var(--ads-v2-colors-control-icon-checked-fg); + + &:hover:enabled { + --toggle-color-background: var(--ads-v2-colors-control-field-checked-hover-bg); + --toggle-color-border: var(--ads-v2-colors-control-field-checked-hover-border); + } + `} + + &:focus-visible { + outline: var(--ads-v2-border-width-outline) solid + var(--ads-v2-color-outline); + outline-offset: var(--ads-v2-offset-outline); + } + &:disabled { + opacity: var(--ads-v2-opacity-disabled); + cursor: not-allowed; + } + + border: 1px solid var(--toggle-color-border); + background-color: var(--toggle-color-background); + & .${ToggleIconClassName} { + color: var(--toggle-color-icon); + } +`; diff --git a/app/client/packages/design-system/ads/src/ToggleButton/ToggleButton.tsx b/app/client/packages/design-system/ads/src/ToggleButton/ToggleButton.tsx new file mode 100644 index 000000000000..ba91136ddbcf --- /dev/null +++ b/app/client/packages/design-system/ads/src/ToggleButton/ToggleButton.tsx @@ -0,0 +1,51 @@ +import React, { forwardRef, useState } from "react"; +import clsx from "classnames"; + +import type { ToggleButtonProps } from "./ToggleButton.types"; +import { StyledToggleButton } from "./ToggleButton.styles"; +import { ToggleClassName, ToggleIconClassName } from "./ToggleButton.constants"; +import { Icon } from "../Icon"; + +const ToggleButton = forwardRef( + (props, ref) => { + const { + className, + icon, + isDisabled = false, + isSelected, + onClick, + size, + ...rest + } = props; + + const [selected, setSelected] = useState(false); + + const handleOnChange = () => { + setSelected(!selected); + onClick?.(!selected); + }; + + return ( + + + + ); + }, +); + +ToggleButton.displayName = "ToggleButton"; + +ToggleButton.defaultProps = { + size: "md", +}; + +export { ToggleButton }; diff --git a/app/client/packages/design-system/ads/src/ToggleButton/ToggleButton.types.ts b/app/client/packages/design-system/ads/src/ToggleButton/ToggleButton.types.ts new file mode 100644 index 000000000000..4a1e4f6f2b41 --- /dev/null +++ b/app/client/packages/design-system/ads/src/ToggleButton/ToggleButton.types.ts @@ -0,0 +1,24 @@ +import type React from "react"; +import type { Sizes } from "../__config__/types"; + +export type ToggleButtonSizes = Extract; + +// Toggle props +export type ToggleButtonProps = { + /** (try not to) pass addition classes here */ + className?: string; + /** the icon to be rendered */ + icon: string; + /** the size of the toggle button */ + size: ToggleButtonSizes; + /** Whether the toggle button is disabled or not. */ + isDisabled?: boolean; + /** Whether the toggle button is selected or not. */ + isSelected?: boolean; + /** Whether the element should be selected (uncontrolled). */ + defaultSelected?: boolean; + /** Handler that is called when the element's selection state changes. */ + onClick?: (isSelected: boolean) => void; + /** tabIndex for the button */ + tabIndex?: number; +} & React.ButtonHTMLAttributes; diff --git a/app/client/packages/design-system/ads/src/ToggleButton/index.ts b/app/client/packages/design-system/ads/src/ToggleButton/index.ts new file mode 100644 index 000000000000..76515fc5876b --- /dev/null +++ b/app/client/packages/design-system/ads/src/ToggleButton/index.ts @@ -0,0 +1,2 @@ +export * from "./ToggleButton"; +export * from "./ToggleButton.types"; diff --git a/app/client/packages/design-system/ads/src/ToggleButtonGroup/ToggleButtonGroup.constants.ts b/app/client/packages/design-system/ads/src/ToggleButtonGroup/ToggleButtonGroup.constants.ts new file mode 100644 index 000000000000..de3e86e9f4d6 --- /dev/null +++ b/app/client/packages/design-system/ads/src/ToggleButtonGroup/ToggleButtonGroup.constants.ts @@ -0,0 +1,4 @@ +import { CLASS_NAME_PREFIX } from "../__config__/constants"; + +// classnames +export const ToggleGroupClassName = CLASS_NAME_PREFIX + "-toggle-group"; diff --git a/app/client/packages/design-system/ads/src/ToggleButtonGroup/ToggleButtonGroup.stories.tsx b/app/client/packages/design-system/ads/src/ToggleButtonGroup/ToggleButtonGroup.stories.tsx new file mode 100644 index 000000000000..4ee22bcf73b9 --- /dev/null +++ b/app/client/packages/design-system/ads/src/ToggleButtonGroup/ToggleButtonGroup.stories.tsx @@ -0,0 +1,38 @@ +import React from "react"; +import { ToggleButtonGroup } from "./ToggleButtonGroup"; +import type { ToggleGroupProps } from "./ToggleButtonGroup.types"; +import type { StoryObj } from "@storybook/react"; + +export default { + title: "ADS/Components/Toggle Button/Toggle Button Group", + component: ToggleButtonGroup, + parameters: { + docs: { + description: { + component: + "A button group component used for selecting multiple values. ", + }, + }, + }, +}; + +// eslint-disable-next-line react/function-component-definition +const Template = (args: ToggleGroupProps) => { + return ; +}; + +export const ToggleButtonGroupStory = Template.bind({}) as StoryObj; +ToggleButtonGroupStory.storyName = "ToggleButtonGroup"; +ToggleButtonGroupStory.args = { + options: [ + { + icon: "text-bold", + value: "BOLD", + }, + { + icon: "text-italic", + value: "ITALIC", + }, + ], + values: ["ITALIC"], +}; diff --git a/app/client/packages/design-system/ads/src/ToggleButtonGroup/ToggleButtonGroup.styles.ts b/app/client/packages/design-system/ads/src/ToggleButtonGroup/ToggleButtonGroup.styles.ts new file mode 100644 index 000000000000..8b4db47554fb --- /dev/null +++ b/app/client/packages/design-system/ads/src/ToggleButtonGroup/ToggleButtonGroup.styles.ts @@ -0,0 +1,6 @@ +import styled from "styled-components"; + +export const Group = styled.div` + display: flex; + gap: 4px; +`; diff --git a/app/client/packages/design-system/ads/src/ToggleButtonGroup/ToggleButtonGroup.tsx b/app/client/packages/design-system/ads/src/ToggleButtonGroup/ToggleButtonGroup.tsx new file mode 100644 index 000000000000..626fb9bb0d60 --- /dev/null +++ b/app/client/packages/design-system/ads/src/ToggleButtonGroup/ToggleButtonGroup.tsx @@ -0,0 +1,101 @@ +import React, { useState } from "react"; +import { ToggleButton } from "../ToggleButton"; + +import { Group } from "./ToggleButtonGroup.styles"; +import type { + ToggleGroupOption, + ToggleGroupProps, +} from "./ToggleButtonGroup.types"; + +// eslint-disable-next-line react/display-name +export const ToggleButtonGroup = React.forwardRef< + HTMLDivElement, + ToggleGroupProps +>((props, ref) => { + const toggleRefs: Array = []; + + const { onClick, options, values } = props; + + const valueSet = new Set(values); + let firstValueIndex = 0; + + for (const [i, x] of options.entries()) { + if (valueSet.has(x.value)) { + firstValueIndex = i; + break; + } + } + + const [focusedIndex, setFocusedIndex] = useState(firstValueIndex); + + const handleKeyDown = ( + e: React.KeyboardEvent, + index: number, + value: string, + ) => { + if (!toggleRefs.length) return; + + switch (e.key) { + case "ArrowRight": + case "Right": + const rightIndex = index === options.length - 1 ? 0 : index + 1; + toggleRefs[rightIndex]?.focus(); + setFocusedIndex(rightIndex); + break; + + case "ArrowLeft": + case "Left": + const leftIndex = index === 0 ? options.length - 1 : index - 1; + toggleRefs[leftIndex]?.focus(); + setFocusedIndex(leftIndex); + break; + + case "Enter": + case " ": + onClick(value, true); + e.preventDefault(); + break; + + case "Tab": + break; + } + }; + + return ( + setFocusedIndex(firstValueIndex)} + ref={ref} + role="tablist" + > + {options.map(({ icon, value }: ToggleGroupOption, index: number) => { + const isSelected = valueSet.has(value); + return ( +
    + { + onClick(value, false); + setFocusedIndex(index); + }} + onKeyDown={(event) => handleKeyDown(event, index, value)} + ref={(input) => toggleRefs.push(input)} + size="md" + tabIndex={index === focusedIndex ? 0 : -1} + /> +
    + ); + })} +     + ); +}); diff --git a/app/client/packages/design-system/ads/src/ToggleButtonGroup/ToggleButtonGroup.types.ts b/app/client/packages/design-system/ads/src/ToggleButtonGroup/ToggleButtonGroup.types.ts new file mode 100644 index 000000000000..98c2aee964b4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/ToggleButtonGroup/ToggleButtonGroup.types.ts @@ -0,0 +1,10 @@ +export interface ToggleGroupOption { + icon: string; + value: string; +} + +export interface ToggleGroupProps { + options: ToggleGroupOption[]; + values: Array; + onClick: (value: string, isUpdatedViaKeyboard?: boolean) => void; +} diff --git a/app/client/packages/design-system/ads/src/ToggleButtonGroup/index.ts b/app/client/packages/design-system/ads/src/ToggleButtonGroup/index.ts new file mode 100644 index 000000000000..74c7d334cdae --- /dev/null +++ b/app/client/packages/design-system/ads/src/ToggleButtonGroup/index.ts @@ -0,0 +1,2 @@ +export * from "./ToggleButtonGroup"; +export * from "./ToggleButtonGroup.types"; diff --git a/app/client/packages/design-system/ads/src/Tooltip/Tooltip.constants.ts b/app/client/packages/design-system/ads/src/Tooltip/Tooltip.constants.ts new file mode 100644 index 000000000000..d75ed4850a88 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Tooltip/Tooltip.constants.ts @@ -0,0 +1,3 @@ +import { CLASS_NAME_PREFIX } from "../__config__/constants"; + +export const TooltipClassName = `${CLASS_NAME_PREFIX}-tooltip`; diff --git a/app/client/packages/design-system/ads/src/Tooltip/Tooltip.css b/app/client/packages/design-system/ads/src/Tooltip/Tooltip.css new file mode 100644 index 000000000000..ef4a71b6e4cf --- /dev/null +++ b/app/client/packages/design-system/ads/src/Tooltip/Tooltip.css @@ -0,0 +1,55 @@ +/* TODO: Find a better way to style */ +/* wrapping in styled component is not working anymore */ +.rc-tooltip.ads-v2-tooltip { + --ads-v2-colors-content-tooltip-surface-default-bg: var( + --ads-v2-color-bg-emphasis-max + ); + --ads-v2-colors-content-tooltip-label-default-fg: var( + --ads-v2-color-fg-on-emphasis-max + ); + + /* This is important because the styles is getting overridden by main repo */ + opacity: 1; + z-index: 100000; + max-width: 300px; + overflow: hidden; + overflow-wrap: break-word; +} + +/* Tooltip inner element styles */ +.ads-v2-tooltip > .rc-tooltip-content > .rc-tooltip-inner { + background-color: var(--ads-v2-colors-content-tooltip-surface-default-bg); + color: var(--ads-v2-colors-content-tooltip-label-default-fg); + font-family: var(--ads-v2-font-family); + border-radius: var(--ads-v2-border-radius); + min-height: unset; + padding: var(--ads-v2-spaces-3) var(--ads-v2-spaces-4); + box-shadow: + 0 2px 4px -2px rgba(0, 0, 0, 0.06), + 0 4px 8px -2px rgba(0, 0, 0, 0.1); +} + +/* arrow color for different placement */ +.ads-v2-tooltip.rc-tooltip-placement-right .rc-tooltip-arrow, +.ads-v2-tooltip.rc-tooltip-placement-rightTop .rc-tooltip-arrow, +.ads-v2-tooltip.rc-tooltip-placement-rightBottom .rc-tooltip-arrow { + border-right-color: var(--ads-v2-colors-content-tooltip-surface-default-bg); +} + +.ads-v2-tooltip.rc-tooltip-placement-left .rc-tooltip-arrow, +.ads-v2-tooltip.rc-tooltip-placement-leftTop .rc-tooltip-arrow, +.ads-v2-tooltip.rc-tooltip-placement-leftBottom .rc-tooltip-arrow { + border-left-color: var(--ads-v2-colors-content-tooltip-surface-default-bg); +} + +.ads-v2-tooltip.rc-tooltip-placement-top .rc-tooltip-arrow, +.ads-v2-tooltip.rc-tooltip-placement-topLeft .rc-tooltip-arrow, +.ads-v2-tooltip.rc-tooltip-placement-topRight .rc-tooltip-arrow { + border-top-color: var(--ads-v2-colors-content-tooltip-surface-default-bg); +} + +.ads-v2-tooltip.rc-tooltip-placement-bottom .rc-tooltip-arrow, +.ads-v2-tooltip.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow, +.ads-v2-tooltip.rc-tooltip-placement-bottomRight .rc-tooltip-arrow { + border-bottom-color: var(--ads-v2-colors-content-tooltip-surface-default-bg); +} diff --git a/app/client/packages/design-system/ads/src/Tooltip/Tooltip.mdx b/app/client/packages/design-system/ads/src/Tooltip/Tooltip.mdx new file mode 100644 index 000000000000..e859193cd028 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Tooltip/Tooltip.mdx @@ -0,0 +1,28 @@ +import { Canvas, Meta } from "@storybook/blocks"; + +import * as TooltipStories from "./Tooltip.stories"; + + + +# Tooltip + +Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when users hover over or click on the element. + +Use only when necessary to provide an explanation for an interface element. +Use tooltips to communicate more information to the user. This should be information supplementing the information that is shown. Typically information in a tooltip falls under ‘know once and the user gets it’ category. If the information in the tooltip is more important and the user needs to know about this to take an action, place this information up front. + + + +## Anatomy + +## Spacing + +## Usage + +To add a small amount of information to an element, use tooltips. Typically, tooltips are used to: + +- Help users understand the meaning or purpose of icons. +- Show the full version of truncated text. +- Display alternative text for an image. + +Tooltips should **not** be used to communicate critical information, including errors in forms or other interaction feedback. They should also not contain links or buttons. diff --git a/app/client/packages/design-system/ads/src/Tooltip/Tooltip.stories.tsx b/app/client/packages/design-system/ads/src/Tooltip/Tooltip.stories.tsx new file mode 100644 index 000000000000..1996384419c7 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Tooltip/Tooltip.stories.tsx @@ -0,0 +1,153 @@ +import React from "react"; +import { Tooltip } from "./Tooltip"; +import { Text } from "../Text"; +import type { TooltipProps } from "./Tooltip.types"; +import type { StoryObj } from "@storybook/react"; + +export default { + title: "ADS/Components/Tooltip", + component: Tooltip, + argTypes: { + content: { + control: { + type: "text", + }, + }, + trigger: { + control: { + type: "select", + options: ["click", "hover", "focus"], + }, + description: "The action that will trigger the tooltip", + table: { + type: { + summary: "click | hover | focus", + }, + defaultValue: { + summary: "hover", + }, + }, + }, + showArrow: { + control: { + type: "boolean", + }, + description: "Whether to show the arrow", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "true", + }, + }, + }, + placement: { + control: { + type: "select", + options: [ + "left", + "right", + "top", + "bottom", + "topLeft", + "topRight", + "bottomLeft", + "bottomRight", + "rightTop", + "rightBottom", + "leftTop", + "leftBottom", + ], + }, + description: "The placement of the tooltip", + table: { + type: { + summary: + "left | right | top | bottom | topLeft | topRight | bottomLeft | bottomRight | rightTop | rightBottom | leftTop | leftBottom", + }, + defaultValue: { + summary: "top", + }, + }, + }, + visible: { + control: { + type: "boolean", + }, + description: "Whether the tooltip is visible. (Controlled)", + table: { + type: { + summary: "boolean", + }, + defaultValue: { + summary: "false", + }, + }, + }, + onVisibleChange: { + control: { + type: "object", + }, + description: "Callback when the visibility of the tooltip changes", + table: { + type: { + summary: "(visible: boolean) => void", + }, + defaultValue: { + summary: "undefined", + }, + }, + }, + }, +}; + +// eslint-disable-next-line react/function-component-definition +const Template = (args: TooltipProps) => { + return ( + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla +
    +     +     + ); +}; + +/** + * TODO: Add this to documentation + * A disabled button will not trigger a tooltip because it doesn't recognise any actions, including a hover. + * To bypass this, simply wrap the disabled button with a span. + * @param args + * @constructor + */ + +// eslint-disable-next-line react/function-component-definition +const TemplateButton = (args: TooltipProps) => { + return ( + + {/* Replace this with DS button once button is in live */} + + + ); +}; + +export const TooltipStory = Template.bind({}) as StoryObj; +TooltipStory.storyName = "Tooltip"; +TooltipStory.args = { + content: "This is a tooltip", + trigger: "hover", +}; + +export const TooltipButtonStory = TemplateButton.bind({}) as StoryObj; +TooltipButtonStory.storyName = "Tooltip Button Trigger"; +TooltipButtonStory.args = { + content: "This is a tooltip", + trigger: "focus", +}; diff --git a/app/client/packages/design-system/ads/src/Tooltip/Tooltip.tsx b/app/client/packages/design-system/ads/src/Tooltip/Tooltip.tsx new file mode 100644 index 000000000000..95a23f0bf5f9 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Tooltip/Tooltip.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import RCTooltip from "rc-tooltip"; + +import type { TooltipProps } from "./Tooltip.types"; +import "rc-tooltip/assets/bootstrap.css"; +import "./Tooltip.css"; +import { TooltipClassName } from "./Tooltip.constants"; +import { Text } from "../Text"; + +function Tooltip(props: TooltipProps) { + const { children, className, content, isDisabled = false, ...rest } = props; + const disabledProps: { visible?: boolean } = {}; + if (isDisabled) { + disabledProps["visible"] = false; + } + return ( + + {content} + + } + overlayClassName={`${TooltipClassName} ${className}`} + {...rest} + {...disabledProps} + > + {children} + + ); +} + +Tooltip.displayName = "Tooltip"; + +Tooltip.defaultProps = { + placement: "top", + trigger: ["hover"], + showArrow: true, +}; + +export { Tooltip }; diff --git a/app/client/packages/design-system/ads/src/Tooltip/Tooltip.types.tsx b/app/client/packages/design-system/ads/src/Tooltip/Tooltip.types.tsx new file mode 100644 index 000000000000..8d2040b5bbf6 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Tooltip/Tooltip.types.tsx @@ -0,0 +1,35 @@ +import type { TooltipProps as RcTooltipProps } from "rc-tooltip/lib/Tooltip"; + +// TODO: these constants should be kebab-case + write a function to convert that into camelCase and pass into rc +export type TooltipPlacement = + | "left" + | "right" + | "top" + | "bottom" + | "topLeft" + | "topRight" + | "bottomLeft" + | "bottomRight" + | "rightTop" + | "rightBottom" + | "leftTop" + | "leftBottom"; + +// Tooltip props +export type TooltipProps = { + /** (try not to) pass addition classes here */ + className?: string; + /** Tooltip content to be shown */ + content: string | React.ReactNode; + /** Tooltip placement */ + placement?: TooltipPlacement; + /** Whether tooltip is disabled */ + isDisabled?: boolean; +} & Omit< + RcTooltipProps, + | "overlayStyle" + | "prefixCls" + | "overlayClassName" + | "overlayInnerStyle" + | "overlay" +>; diff --git a/app/client/packages/design-system/ads/src/Tooltip/index.ts b/app/client/packages/design-system/ads/src/Tooltip/index.ts new file mode 100644 index 000000000000..d77eddcb3c54 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Tooltip/index.ts @@ -0,0 +1,2 @@ +export * from "./Tooltip"; +export * from "./Tooltip.types"; diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/ads-banner.png b/app/client/packages/design-system/ads/src/__assets__/docs/ads-banner.png new file mode 100644 index 000000000000..f5e25b61e615 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/ads-banner.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/button-anatomy.png b/app/client/packages/design-system/ads/src/__assets__/docs/button-anatomy.png new file mode 100644 index 000000000000..0d62a87569bf Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/button-anatomy.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/button-spacing.png b/app/client/packages/design-system/ads/src/__assets__/docs/button-spacing.png new file mode 100644 index 000000000000..ea11617eb0cb Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/button-spacing.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/callout-anatomy.png b/app/client/packages/design-system/ads/src/__assets__/docs/callout-anatomy.png new file mode 100644 index 000000000000..95e1974f48e6 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/callout-anatomy.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/callout-spacing.png b/app/client/packages/design-system/ads/src/__assets__/docs/callout-spacing.png new file mode 100644 index 000000000000..ba92f9f86c14 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/callout-spacing.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/categorize-elements-in-ui.png b/app/client/packages/design-system/ads/src/__assets__/docs/categorize-elements-in-ui.png new file mode 100644 index 000000000000..e3987251193d Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/categorize-elements-in-ui.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/categoryTokenStructure.png b/app/client/packages/design-system/ads/src/__assets__/docs/categoryTokenStructure.png new file mode 100644 index 000000000000..2015b51067a8 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/categoryTokenStructure.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/checkbox-anatomy.png b/app/client/packages/design-system/ads/src/__assets__/docs/checkbox-anatomy.png new file mode 100644 index 000000000000..3a140d81ec07 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/checkbox-anatomy.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/checkbox-spacing.png b/app/client/packages/design-system/ads/src/__assets__/docs/checkbox-spacing.png new file mode 100644 index 000000000000..0cb0bda42411 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/checkbox-spacing.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/collapsible-anatomy.png b/app/client/packages/design-system/ads/src/__assets__/docs/collapsible-anatomy.png new file mode 100644 index 000000000000..08dca817b3f9 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/collapsible-anatomy.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/collapsible-spacing.png b/app/client/packages/design-system/ads/src/__assets__/docs/collapsible-spacing.png new file mode 100644 index 000000000000..d0836c5cfde1 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/collapsible-spacing.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/containers-in-ui.png b/app/client/packages/design-system/ads/src/__assets__/docs/containers-in-ui.png new file mode 100644 index 000000000000..25e39b80a579 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/containers-in-ui.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/correct-action-names.png b/app/client/packages/design-system/ads/src/__assets__/docs/correct-action-names.png new file mode 100644 index 000000000000..177dab248aa8 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/correct-action-names.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/correct-title-case-1.png b/app/client/packages/design-system/ads/src/__assets__/docs/correct-title-case-1.png new file mode 100644 index 000000000000..e74354c66828 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/correct-title-case-1.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/correct-title-case-2.png b/app/client/packages/design-system/ads/src/__assets__/docs/correct-title-case-2.png new file mode 100644 index 000000000000..0febd3f9a1b9 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/correct-title-case-2.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/external-spacing-12.png b/app/client/packages/design-system/ads/src/__assets__/docs/external-spacing-12.png new file mode 100644 index 000000000000..8fbf2fcfb136 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/external-spacing-12.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/external-spacing-16.png b/app/client/packages/design-system/ads/src/__assets__/docs/external-spacing-16.png new file mode 100644 index 000000000000..5d1c3aba775e Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/external-spacing-16.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/how-to-access-ads-for-designers.mp4 b/app/client/packages/design-system/ads/src/__assets__/docs/how-to-access-ads-for-designers.mp4 new file mode 100644 index 000000000000..e9679f73ece1 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/how-to-access-ads-for-designers.mp4 differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/iconbutton-usage-on-appsmith.png b/app/client/packages/design-system/ads/src/__assets__/docs/iconbutton-usage-on-appsmith.png new file mode 100644 index 000000000000..c9fcd2503ccf Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/iconbutton-usage-on-appsmith.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/iconbutton-usage.png b/app/client/packages/design-system/ads/src/__assets__/docs/iconbutton-usage.png new file mode 100644 index 000000000000..c9fcd2503ccf Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/iconbutton-usage.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/incorrect-action-names.png b/app/client/packages/design-system/ads/src/__assets__/docs/incorrect-action-names.png new file mode 100644 index 000000000000..a5593f3631e8 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/incorrect-action-names.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/incorrect-title-case-1.png b/app/client/packages/design-system/ads/src/__assets__/docs/incorrect-title-case-1.png new file mode 100644 index 000000000000..eedc4ed7a6e0 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/incorrect-title-case-1.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/incorrect-title-case-2.png b/app/client/packages/design-system/ads/src/__assets__/docs/incorrect-title-case-2.png new file mode 100644 index 000000000000..349a7a846ece Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/incorrect-title-case-2.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/input-anatomy.png b/app/client/packages/design-system/ads/src/__assets__/docs/input-anatomy.png new file mode 100644 index 000000000000..ea4671f7f1b3 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/input-anatomy.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/input-spacing.png b/app/client/packages/design-system/ads/src/__assets__/docs/input-spacing.png new file mode 100644 index 000000000000..19295f359f48 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/input-spacing.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/internal-spacing-4.png b/app/client/packages/design-system/ads/src/__assets__/docs/internal-spacing-4.png new file mode 100644 index 000000000000..8d1b02f784e2 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/internal-spacing-4.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/internal-spacing-8.png b/app/client/packages/design-system/ads/src/__assets__/docs/internal-spacing-8.png new file mode 100644 index 000000000000..3a51f6d7b0ba Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/internal-spacing-8.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/labelled-input.png b/app/client/packages/design-system/ads/src/__assets__/docs/labelled-input.png new file mode 100644 index 000000000000..d690666c8fe8 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/labelled-input.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/layout-spacing.png b/app/client/packages/design-system/ads/src/__assets__/docs/layout-spacing.png new file mode 100644 index 000000000000..f197461e4350 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/layout-spacing.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/libraries-in-figma.png b/app/client/packages/design-system/ads/src/__assets__/docs/libraries-in-figma.png new file mode 100644 index 000000000000..40bda7bfb69d Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/libraries-in-figma.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/link-anatomy.png b/app/client/packages/design-system/ads/src/__assets__/docs/link-anatomy.png new file mode 100644 index 000000000000..7c98c4c690ec Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/link-anatomy.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/link-spacing.png b/app/client/packages/design-system/ads/src/__assets__/docs/link-spacing.png new file mode 100644 index 000000000000..370e81fcdff7 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/link-spacing.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/list-item-anatomy.png b/app/client/packages/design-system/ads/src/__assets__/docs/list-item-anatomy.png new file mode 100644 index 000000000000..ecf87e0e1d19 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/list-item-anatomy.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/list-item-description-right.png b/app/client/packages/design-system/ads/src/__assets__/docs/list-item-description-right.png new file mode 100644 index 000000000000..7f56b049fd86 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/list-item-description-right.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/list-item-example.png b/app/client/packages/design-system/ads/src/__assets__/docs/list-item-example.png new file mode 100644 index 000000000000..f7949e522b89 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/list-item-example.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/list-item-interaction.png b/app/client/packages/design-system/ads/src/__assets__/docs/list-item-interaction.png new file mode 100644 index 000000000000..03527244e053 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/list-item-interaction.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/list-item-large.png b/app/client/packages/design-system/ads/src/__assets__/docs/list-item-large.png new file mode 100644 index 000000000000..1b6384996b8a Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/list-item-large.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/list-item-medium.png b/app/client/packages/design-system/ads/src/__assets__/docs/list-item-medium.png new file mode 100644 index 000000000000..0b1b26dceb04 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/list-item-medium.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/list-item-spacing.png b/app/client/packages/design-system/ads/src/__assets__/docs/list-item-spacing.png new file mode 100644 index 000000000000..b4427b31c9cd Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/list-item-spacing.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/list-item-state.png b/app/client/packages/design-system/ads/src/__assets__/docs/list-item-state.png new file mode 100644 index 000000000000..5a93d7e9e709 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/list-item-state.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/menu-anatomy.png b/app/client/packages/design-system/ads/src/__assets__/docs/menu-anatomy.png new file mode 100644 index 000000000000..3c4c411a0e00 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/menu-anatomy.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/menu-spacing.png b/app/client/packages/design-system/ads/src/__assets__/docs/menu-spacing.png new file mode 100644 index 000000000000..2572e8ebb50e Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/menu-spacing.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/modal-anatomy.png b/app/client/packages/design-system/ads/src/__assets__/docs/modal-anatomy.png new file mode 100644 index 000000000000..22bb5565ba37 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/modal-anatomy.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/modal-remove-ambiguity.png b/app/client/packages/design-system/ads/src/__assets__/docs/modal-remove-ambiguity.png new file mode 100644 index 000000000000..0760e67c8da3 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/modal-remove-ambiguity.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/padding-in-container-2.png b/app/client/packages/design-system/ads/src/__assets__/docs/padding-in-container-2.png new file mode 100644 index 000000000000..6ebe06d375b6 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/padding-in-container-2.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/padding-in-container-3.png b/app/client/packages/design-system/ads/src/__assets__/docs/padding-in-container-3.png new file mode 100644 index 000000000000..247478ca2ea4 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/padding-in-container-3.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/padding-in-container.png b/app/client/packages/design-system/ads/src/__assets__/docs/padding-in-container.png new file mode 100644 index 000000000000..28edfa7cb9b4 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/padding-in-container.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/parts-of-a-modal.png b/app/client/packages/design-system/ads/src/__assets__/docs/parts-of-a-modal.png new file mode 100644 index 000000000000..3eab8d25e62d Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/parts-of-a-modal.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/parts-of-a-switch.png b/app/client/packages/design-system/ads/src/__assets__/docs/parts-of-a-switch.png new file mode 100644 index 000000000000..bd5ef4227fe2 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/parts-of-a-switch.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/popover-anatomy.png b/app/client/packages/design-system/ads/src/__assets__/docs/popover-anatomy.png new file mode 100644 index 000000000000..b863a93317be Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/popover-anatomy.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/popover-spacing.png b/app/client/packages/design-system/ads/src/__assets__/docs/popover-spacing.png new file mode 100644 index 000000000000..f90373a56a8a Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/popover-spacing.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/radio-anatomy.png b/app/client/packages/design-system/ads/src/__assets__/docs/radio-anatomy.png new file mode 100644 index 000000000000..2339538a8c35 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/radio-anatomy.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/radio-spacing.png b/app/client/packages/design-system/ads/src/__assets__/docs/radio-spacing.png new file mode 100644 index 000000000000..60719f56fb02 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/radio-spacing.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/segmented-control-anatomy.png b/app/client/packages/design-system/ads/src/__assets__/docs/segmented-control-anatomy.png new file mode 100644 index 000000000000..3b28ab909c2d Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/segmented-control-anatomy.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/segmented-control-spacing.png b/app/client/packages/design-system/ads/src/__assets__/docs/segmented-control-spacing.png new file mode 100644 index 000000000000..4301794e8ffd Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/segmented-control-spacing.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/select-anatomy.png b/app/client/packages/design-system/ads/src/__assets__/docs/select-anatomy.png new file mode 100644 index 000000000000..eb4893542f1a Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/select-anatomy.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/select-spacing.png b/app/client/packages/design-system/ads/src/__assets__/docs/select-spacing.png new file mode 100644 index 000000000000..b55a15977313 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/select-spacing.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/space-grouping.png b/app/client/packages/design-system/ads/src/__assets__/docs/space-grouping.png new file mode 100644 index 000000000000..df67f47e9187 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/space-grouping.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/styling-label-active-state.png b/app/client/packages/design-system/ads/src/__assets__/docs/styling-label-active-state.png new file mode 100644 index 000000000000..adcc7fe90202 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/styling-label-active-state.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/styling-switch-checked-state.png b/app/client/packages/design-system/ads/src/__assets__/docs/styling-switch-checked-state.png new file mode 100644 index 000000000000..1fd5d9029685 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/styling-switch-checked-state.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/styling-switch-default-state.png b/app/client/packages/design-system/ads/src/__assets__/docs/styling-switch-default-state.png new file mode 100644 index 000000000000..25fd3b6a40cf Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/styling-switch-default-state.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/switch-anatomy.png b/app/client/packages/design-system/ads/src/__assets__/docs/switch-anatomy.png new file mode 100644 index 000000000000..1612031391ed Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/switch-anatomy.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/switch-spacing.png b/app/client/packages/design-system/ads/src/__assets__/docs/switch-spacing.png new file mode 100644 index 000000000000..0db1ca625334 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/switch-spacing.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/tab-anatomy.png b/app/client/packages/design-system/ads/src/__assets__/docs/tab-anatomy.png new file mode 100644 index 000000000000..694a96ad7ac3 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/tab-anatomy.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/tab-guideline.png b/app/client/packages/design-system/ads/src/__assets__/docs/tab-guideline.png new file mode 100644 index 000000000000..44e680843cef Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/tab-guideline.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/tab-spacing.png b/app/client/packages/design-system/ads/src/__assets__/docs/tab-spacing.png new file mode 100644 index 000000000000..f6a0a1fc72aa Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/tab-spacing.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/tag-anatomy.png b/app/client/packages/design-system/ads/src/__assets__/docs/tag-anatomy.png new file mode 100644 index 000000000000..bbc6c62de8fc Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/tag-anatomy.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/tag-spacing.png b/app/client/packages/design-system/ads/src/__assets__/docs/tag-spacing.png new file mode 100644 index 000000000000..345a512aa98a Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/tag-spacing.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/text-component-figma.png b/app/client/packages/design-system/ads/src/__assets__/docs/text-component-figma.png new file mode 100644 index 000000000000..e2c657628a20 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/text-component-figma.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/toast-anatomy.png b/app/client/packages/design-system/ads/src/__assets__/docs/toast-anatomy.png new file mode 100644 index 000000000000..b0493402ceb6 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/toast-anatomy.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/toast-spacing.png b/app/client/packages/design-system/ads/src/__assets__/docs/toast-spacing.png new file mode 100644 index 000000000000..07ab1fd8f38f Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/toast-spacing.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/toggle-button-anatomy.png b/app/client/packages/design-system/ads/src/__assets__/docs/toggle-button-anatomy.png new file mode 100644 index 000000000000..0fb7669a8663 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/toggle-button-anatomy.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/docs/toggle-button-spacing.png b/app/client/packages/design-system/ads/src/__assets__/docs/toggle-button-spacing.png new file mode 100644 index 000000000000..aa08437d33c1 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/docs/toggle-button-spacing.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/fonts/licence.txt b/app/client/packages/design-system/ads/src/__assets__/fonts/licence.txt new file mode 100644 index 000000000000..2197aa1ad12c --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/fonts/licence.txt @@ -0,0 +1,95 @@ +Copyright (c) 2018, Paratype Inc (https://paratype.com), +Copyright (c) 2018, Paratype Ltd, +with Reserved Font Name "PT Root UI". + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui.css b/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui.css new file mode 100644 index 000000000000..8972c096e164 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui.css @@ -0,0 +1,45 @@ +/* Generated by ParaType (http://www.paratype.com)*/ +/* Font PT Root UI: Copyright ? ParaType, 2018. All rights reserved.*/ + +@font-face { + font-family: "PTRootUI"; + src: + url("./pt-root-ui_regular.woff2") format("woff2"), + url("./pt-root-ui_regular.woff") format("woff"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "PTRootUI"; + src: + url("./pt-root-ui_light.woff2") format("woff2"), + url("./pt-root-ui_light.woff") format("woff"); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: "PTRootUI"; + src: + url("./pt-root-ui_medium.woff2") format("woff2"), + url("./pt-root-ui_medium.woff") format("woff"); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: "PTRootUI"; + src: url("./pt-root-ui_semi-bold.woff2") format("woff2"); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: "PTRootUI"; + src: + url("./pt-root-ui_bold.woff2") format("woff2"), + url("./pt-root-ui_bold.woff") format("woff"); + font-weight: 700; + font-style: normal; +} diff --git a/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_bold.woff b/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_bold.woff new file mode 100644 index 000000000000..75be1a73221f Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_bold.woff differ diff --git a/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_bold.woff2 b/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_bold.woff2 new file mode 100644 index 000000000000..fa85f8baf337 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_bold.woff2 differ diff --git a/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_light.woff b/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_light.woff new file mode 100644 index 000000000000..7f2c832187de Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_light.woff differ diff --git a/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_light.woff2 b/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_light.woff2 new file mode 100644 index 000000000000..ccc9892da0a2 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_light.woff2 differ diff --git a/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_medium.woff b/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_medium.woff new file mode 100644 index 000000000000..31356d47365f Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_medium.woff differ diff --git a/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_medium.woff2 b/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_medium.woff2 new file mode 100644 index 000000000000..827bd263795b Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_medium.woff2 differ diff --git a/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_regular.woff b/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_regular.woff new file mode 100644 index 000000000000..7111b7235731 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_regular.woff differ diff --git a/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_regular.woff2 b/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_regular.woff2 new file mode 100644 index 000000000000..d7acf577cd9f Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_regular.woff2 differ diff --git a/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_semi-bold.woff2 b/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_semi-bold.woff2 new file mode 100644 index 000000000000..1114c14cc423 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/fonts/pt-root-ui_semi-bold.woff2 differ diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/add-more.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/add-more.svg new file mode 100644 index 000000000000..5d4d8d563980 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/add-more.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/align-center.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/align-center.svg new file mode 100644 index 000000000000..5d438ba1e052 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/align-center.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/align-left.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/align-left.svg new file mode 100644 index 000000000000..b59d91b46ba6 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/align-left.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/align-right.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/align-right.svg new file mode 100644 index 000000000000..e8c3dd126dc0 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/align-right.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/airplane.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/airplane.svg new file mode 100644 index 000000000000..f326a7d8df30 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/airplane.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/alien.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/alien.svg new file mode 100644 index 000000000000..b3cb31a2b957 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/alien.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/bag.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/bag.svg new file mode 100644 index 000000000000..8ce3bef7ce79 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/bag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/bar-graph.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/bar-graph.svg new file mode 100644 index 000000000000..cc0d2c07c1e9 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/bar-graph.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/basketball.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/basketball.svg new file mode 100644 index 000000000000..a9abe2502241 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/basketball.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/bicycle.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/bicycle.svg new file mode 100644 index 000000000000..83676fc004be --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/bicycle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/bird.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/bird.svg new file mode 100644 index 000000000000..73b6ce5c8520 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/bird.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/bitcoin.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/bitcoin.svg new file mode 100644 index 000000000000..ea39a19f3fcd --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/bitcoin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/book.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/book.svg new file mode 100644 index 000000000000..51821b49d11f --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/book.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/burger.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/burger.svg new file mode 100644 index 000000000000..6a6be1ce9f75 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/burger.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/bus.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/bus.svg new file mode 100644 index 000000000000..185ea20016f3 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/bus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/calender.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/calender.svg new file mode 100644 index 000000000000..9177c399f45c --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/calender.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/call.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/call.svg new file mode 100644 index 000000000000..db6a08dc29bc --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/call.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/camera.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/camera.svg new file mode 100644 index 000000000000..15c623c91fe4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/camera.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/car.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/car.svg new file mode 100644 index 000000000000..b21baff53f6e --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/car.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/card.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/card.svg new file mode 100644 index 000000000000..a68fe32705b3 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/card.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/cat.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/cat.svg new file mode 100644 index 000000000000..ea0da21257c7 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/cat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/chat.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/chat.svg new file mode 100644 index 000000000000..4d254293c2cb --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/chat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/chinese-remnibi.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/chinese-remnibi.svg new file mode 100644 index 000000000000..4e59f5470b7a --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/chinese-remnibi.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/cloud.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/cloud.svg new file mode 100644 index 000000000000..e007fedfa8f0 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/cloud.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/coding.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/coding.svg new file mode 100644 index 000000000000..66428360efce --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/coding.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/couples.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/couples.svg new file mode 100644 index 000000000000..0a3ded4ecfcd --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/couples.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/cricket.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/cricket.svg new file mode 100644 index 000000000000..2bafba2f2d99 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/cricket.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/diamond.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/diamond.svg new file mode 100644 index 000000000000..a8f9b4ccd171 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/diamond.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/dog.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/dog.svg new file mode 100644 index 000000000000..2a51dd8b23af --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/dog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/dollar.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/dollar.svg new file mode 100644 index 000000000000..de659efb62ee --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/dollar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/draghandler.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/draghandler.svg new file mode 100644 index 000000000000..ef4924ebef48 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/draghandler.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/earth.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/earth.svg new file mode 100644 index 000000000000..27cf1978f06b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/earth.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/email.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/email.svg new file mode 100644 index 000000000000..2e2d1ca9b613 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/email.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/euros.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/euros.svg new file mode 100644 index 000000000000..56045acc1ce3 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/euros.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/family.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/family.svg new file mode 100644 index 000000000000..5f0b05e8c3ff --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/family.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/file.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/file.svg new file mode 100644 index 000000000000..be191cc8d356 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/flag.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/flag.svg new file mode 100644 index 000000000000..29b8d23c374f --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/flag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/flight.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/flight.svg new file mode 100644 index 000000000000..9374e31d0def --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/flight.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/football.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/football.svg new file mode 100644 index 000000000000..cb8cf2058ef1 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/football.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/frame.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/frame.svg new file mode 100644 index 000000000000..372560ab8846 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/frame.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/globe.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/globe.svg new file mode 100644 index 000000000000..2ca63fec36ab --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/globe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/hat.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/hat.svg new file mode 100644 index 000000000000..078af711ae36 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/hat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/headphones.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/headphones.svg new file mode 100644 index 000000000000..47b4439192b2 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/headphones.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/heart.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/heart.svg new file mode 100644 index 000000000000..1587bfbb99d3 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/heart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/hospital.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/hospital.svg new file mode 100644 index 000000000000..93169f404dfc --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/hospital.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/joystick.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/joystick.svg new file mode 100644 index 000000000000..de02d59764f4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/joystick.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/laptop.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/laptop.svg new file mode 100644 index 000000000000..78b260a16201 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/laptop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/lightning.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/lightning.svg new file mode 100644 index 000000000000..f253e4ab4c65 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/lightning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/line-chart.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/line-chart.svg new file mode 100644 index 000000000000..1fe99fbde127 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/line-chart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/location.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/location.svg new file mode 100644 index 000000000000..0e38f8340457 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/location.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/lotus.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/lotus.svg new file mode 100644 index 000000000000..935b75c9158b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/lotus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/love.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/love.svg new file mode 100644 index 000000000000..e49f14bf4b22 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/love.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/medal.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/medal.svg new file mode 100644 index 000000000000..4ea85cda8e99 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/medal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/medical.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/medical.svg new file mode 100644 index 000000000000..f100d4694d62 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/medical.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/money.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/money.svg new file mode 100644 index 000000000000..1cc599753fdf --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/money.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/moon.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/moon.svg new file mode 100644 index 000000000000..f25cb1129a84 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/moon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/mug.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/mug.svg new file mode 100644 index 000000000000..6f03079cb156 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/mug.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/music.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/music.svg new file mode 100644 index 000000000000..777d84bef379 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/music.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/pants.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/pants.svg new file mode 100644 index 000000000000..fe49a5e9264e --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/pants.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/pie-chart.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/pie-chart.svg new file mode 100644 index 000000000000..ed3accc76f89 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/pie-chart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/pizza.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/pizza.svg new file mode 100644 index 000000000000..91816e598fbb --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/pizza.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/plant.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/plant.svg new file mode 100644 index 000000000000..4d2a2c01f4be --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/plant.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/product.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/product.svg new file mode 100644 index 000000000000..02cf6f70df86 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/product.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/rainy-weather.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/rainy-weather.svg new file mode 100644 index 000000000000..5102d69c4295 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/rainy-weather.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/repeat.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/repeat.svg new file mode 100644 index 000000000000..c517ed66f38d --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/repeat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/restaurant.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/restaurant.svg new file mode 100644 index 000000000000..137210a6096f --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/restaurant.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/rocket.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/rocket.svg new file mode 100644 index 000000000000..92eb43ac7fa9 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/rocket.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/rose.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/rose.svg new file mode 100644 index 000000000000..2abbc19053b3 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/rose.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/rupee.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/rupee.svg new file mode 100644 index 000000000000..2967a77a9d67 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/rupee.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/saturn.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/saturn.svg new file mode 100644 index 000000000000..72763e18641d --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/saturn.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/server.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/server.svg new file mode 100644 index 000000000000..dc0e7d9d8a3b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/server.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/shake-hands.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/shake-hands.svg new file mode 100644 index 000000000000..97a325292d47 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/shake-hands.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/shirt.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/shirt.svg new file mode 100644 index 000000000000..c0559f1b7a17 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/shirt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/shop.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/shop.svg new file mode 100644 index 000000000000..555ec181c293 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/shop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/shopper.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/shopper.svg new file mode 100644 index 000000000000..1a7b7eea3b06 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/shopper.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/single-person.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/single-person.svg new file mode 100644 index 000000000000..cf66b53e1670 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/single-person.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/smartphone.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/smartphone.svg new file mode 100644 index 000000000000..a1f4885589ee --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/smartphone.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/snowy-weather.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/snowy-weather.svg new file mode 100644 index 000000000000..7cbaf6e1136a --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/snowy-weather.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/stars.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/stars.svg new file mode 100644 index 000000000000..748760d53e54 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/stars.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/steam-bowl.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/steam-bowl.svg new file mode 100644 index 000000000000..11651581cd43 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/steam-bowl.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/sunflower.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/sunflower.svg new file mode 100644 index 000000000000..9c2aaf3157b4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/sunflower.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/system.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/system.svg new file mode 100644 index 000000000000..649057b7ca9c --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/system.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/team.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/team.svg new file mode 100644 index 000000000000..a5cdf7afe776 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/team.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/tree.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/tree.svg new file mode 100644 index 000000000000..4f95e0e6f1d0 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/tree.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/uk-pounds.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/uk-pounds.svg new file mode 100644 index 000000000000..146967dee8d3 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/uk-pounds.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/website.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/website.svg new file mode 100644 index 000000000000..b65159e20920 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/website.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/yen.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/yen.svg new file mode 100644 index 000000000000..34ee2cb633b8 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/app-icons/yen.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/arrow-left-1.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/arrow-left-1.svg new file mode 100644 index 000000000000..58593b03b27d --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/arrow-left-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/arrow-left.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/arrow-left.svg new file mode 100644 index 000000000000..23384fc7e6a0 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/arrow-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/arrow-right-line.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/arrow-right-line.svg new file mode 100644 index 000000000000..a5b012372e1a --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/arrow-right-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/bell.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/bell.svg new file mode 100644 index 000000000000..e4a36d411c27 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/bell.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/billing.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/billing.svg new file mode 100644 index 000000000000..3b863e18f613 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/billing.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/binding-icon.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/binding-icon.svg new file mode 100644 index 000000000000..93d0a74c5c0f --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/binding-icon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/book-open-line.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/book-open-line.svg new file mode 100644 index 000000000000..b7df808970f1 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/book-open-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/book.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/book.svg new file mode 100644 index 000000000000..67ae3f8b6068 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/book.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/box-3-line.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/box-3-line.svg new file mode 100644 index 000000000000..34fef19ddc45 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/box-3-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/braces.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/braces.svg new file mode 100644 index 000000000000..f1f268ff3dd2 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/braces.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/bug.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/bug.svg new file mode 100644 index 000000000000..ec7d5635f82f --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/bug.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/cancel.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/cancel.svg new file mode 100644 index 000000000000..f8a4505add93 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/cancel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/card-context-menu.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/card-context-menu.svg new file mode 100644 index 000000000000..f9d2fd91f868 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/card-context-menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/check.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/check.svg new file mode 100644 index 000000000000..844187aa0383 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/chevron-down.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/chevron-down.svg new file mode 100644 index 000000000000..2704478b5186 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/chevron-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/chevron_left.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/chevron_left.svg new file mode 100644 index 000000000000..12cc5ee9c0b2 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/chevron_left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/chevron_right.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/chevron_right.svg new file mode 100644 index 000000000000..e3c3329b9b86 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/chevron_right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/close-modal.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/close-modal.svg new file mode 100644 index 000000000000..af851239a617 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/close-modal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/cloudy-line.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/cloudy-line.svg new file mode 100644 index 000000000000..809ea3fc2202 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/cloudy-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/column-freeze.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/column-freeze.svg new file mode 100644 index 000000000000..2edaf5f66663 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/column-freeze.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/column.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/column.svg new file mode 100644 index 000000000000..e272e4c8ee0d --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/column.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/commentIcon.png b/app/client/packages/design-system/ads/src/__assets__/icons/ads/commentIcon.png new file mode 100644 index 000000000000..e6d22c7d5e31 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/icons/ads/commentIcon.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/context-menu.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/context-menu.svg new file mode 100644 index 000000000000..1fda6ea2b9b6 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/context-menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/contract-left-line.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/contract-left-line.svg new file mode 100644 index 000000000000..5042fadb0bff --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/contract-left-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/contract-right-line.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/contract-right-line.svg new file mode 100644 index 000000000000..80aa1607cd53 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/contract-right-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/corner-down-left-line.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/corner-down-left-line.svg new file mode 100644 index 000000000000..14b83068b516 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/corner-down-left-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/create-new.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/create-new.svg new file mode 100644 index 000000000000..9264739e83d3 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/create-new.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/cross.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/cross.svg new file mode 100644 index 000000000000..ac7eaaca70dc --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/cross.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/dashboard-line.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/dashboard-line.svg new file mode 100644 index 000000000000..c0a187a04d2a --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/dashboard-line.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/datasource-v3-icon.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/datasource-v3-icon.svg new file mode 100644 index 000000000000..77a334e83abc --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/datasource-v3-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/datasource.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/datasource.svg new file mode 100644 index 000000000000..3cbf64aa9afb --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/datasource.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/delete.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/delete.svg new file mode 100644 index 000000000000..d1e8c04c040e --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/delete.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/desktop.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/desktop.svg new file mode 100644 index 000000000000..1aec067734c3 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/docs.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/docs.svg new file mode 100644 index 000000000000..1605226f580c --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/docs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/double-arrow-left.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/double-arrow-left.svg new file mode 100644 index 000000000000..c7fcf7fff01d --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/double-arrow-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/double-arrow-right.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/double-arrow-right.svg new file mode 100644 index 000000000000..8406b4bd61ce --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/double-arrow-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/down-arrow.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/down-arrow.svg new file mode 100644 index 000000000000..dc6f2932cda0 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/down-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/down_arrow.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/down_arrow.svg new file mode 100644 index 000000000000..098793c09ecf --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/down_arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/download.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/download.svg new file mode 100644 index 000000000000..230d2ec50d74 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/dropdown.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/dropdown.svg new file mode 100644 index 000000000000..f4b1ee45fd9c --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/dropdown.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/duplicate.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/duplicate.svg new file mode 100644 index 000000000000..0488d31d56a4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/duplicate.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/edit.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/edit.svg new file mode 100644 index 000000000000..5956addc8e22 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/edit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/editor-v3-icon.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/editor-v3-icon.svg new file mode 100644 index 000000000000..745a6f2ed7fc --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/editor-v3-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/entities.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/entities.svg new file mode 100644 index 000000000000..181f517469f4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/entities.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/error.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/error.svg new file mode 100644 index 000000000000..e63f120d544d --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/error.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/execute.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/execute.svg new file mode 100644 index 000000000000..159fd9afe9d3 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/execute.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/expand-more.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/expand-more.svg new file mode 100644 index 000000000000..ea4ce17fbeee --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/expand-more.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/file-copy-line.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/file-copy-line.svg new file mode 100644 index 000000000000..926ada1fd6de --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/file-copy-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/fluid.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/fluid.svg new file mode 100644 index 000000000000..ccb340bbde74 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/fluid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/fork-2.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/fork-2.svg new file mode 100644 index 000000000000..650e43f151be --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/fork-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/fork.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/fork.svg new file mode 100644 index 000000000000..c7914b5ae0e0 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/fork.svg @@ -0,0 +1 @@ +fork \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/gear.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/gear.svg new file mode 100644 index 000000000000..8e293c5601d5 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/gear.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/general.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/general.svg new file mode 100644 index 000000000000..a98c085ad8ae --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/general.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/git-branch.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/git-branch.svg new file mode 100644 index 000000000000..824c9493e1fc --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/git-branch.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/git-commit-line.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/git-commit-line.svg new file mode 100644 index 000000000000..eafa838be93b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/git-commit-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/git-merge.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/git-merge.svg new file mode 100644 index 000000000000..3e32ecd91c34 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/git-merge.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/google.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/google.svg new file mode 100644 index 000000000000..f4dcbd0d2a4b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/google.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/h-line.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/h-line.svg new file mode 100644 index 000000000000..98a0b95cc9c7 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/h-line.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/invite-users.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/invite-users.svg new file mode 100644 index 000000000000..9ba2c1c86c4b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/invite-users.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/js-square-v3-icon.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/js-square-v3-icon.svg new file mode 100644 index 000000000000..e0a4a7f232a8 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/js-square-v3-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/js-toggle-v2-bold.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/js-toggle-v2-bold.svg new file mode 100644 index 000000000000..26b49c02034d --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/js-toggle-v2-bold.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/js-toggle-v2.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/js-toggle-v2.svg new file mode 100644 index 000000000000..10fef2684295 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/js-toggle-v2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/js-yellow.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/js-yellow.svg new file mode 100644 index 000000000000..5b2e21b39a21 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/js-yellow.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/js.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/js.svg new file mode 100644 index 000000000000..d34cd1bd7b0a --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/js.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/key-2-line.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/key-2-line.svg new file mode 100644 index 000000000000..28d09d3f16c4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/key-2-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/launch.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/launch.svg new file mode 100644 index 000000000000..75b837aad93b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/launch.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/lightning.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/lightning.svg new file mode 100644 index 000000000000..0ad2d737873a --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/lightning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/link.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/link.svg new file mode 100644 index 000000000000..f4dd399408d8 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/logout.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/logout.svg new file mode 100644 index 000000000000..ca6ba7a170db --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/logout.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/manage.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/manage.svg new file mode 100644 index 000000000000..3b588a712e57 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/manage.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/maximize-v3-icon.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/maximize-v3-icon.svg new file mode 100644 index 000000000000..bbe9bf29bb69 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/maximize-v3-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/maximize.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/maximize.svg new file mode 100644 index 000000000000..fa58930ab061 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/maximize.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/minimize-v3-icon.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/minimize-v3-icon.svg new file mode 100644 index 000000000000..179cb20d23dc --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/minimize-v3-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/minimize.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/minimize.svg new file mode 100644 index 000000000000..fc0655540270 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/minimize.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/mobile.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/mobile.svg new file mode 100644 index 000000000000..a191c9105ff4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/module.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/module.svg new file mode 100644 index 000000000000..e174557f5ed7 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/module.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/no-response.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/no-response.svg new file mode 100644 index 000000000000..efef7aaf28fd --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/no-response.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/open.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/open.svg new file mode 100644 index 000000000000..f4dd399408d8 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/open.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/package.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/package.svg new file mode 100644 index 000000000000..dd41cebfb57e --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/package.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/packages-v3-icon.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/packages-v3-icon.svg new file mode 100644 index 000000000000..8c2b38b4c82b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/packages-v3-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/play.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/play.svg new file mode 100644 index 000000000000..1231a23717ab --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/plus.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/plus.svg new file mode 100644 index 000000000000..eca6ec88918d --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/queries-v3-icon.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/queries-v3-icon.svg new file mode 100644 index 000000000000..5a25dbc39c20 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/queries-v3-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/queries.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/queries.svg new file mode 100644 index 000000000000..ca5614375e4a --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/queries.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/recent.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/recent.svg new file mode 100644 index 000000000000..4558e57619f7 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/recent.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/right-arrow.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/right-arrow.svg new file mode 100644 index 000000000000..39cb006905cd --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/right-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/search.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/search.svg new file mode 100644 index 000000000000..fd0abc79ae9e --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/settings-v3-icon.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/settings-v3-icon.svg new file mode 100644 index 000000000000..df11c445c5b7 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/settings-v3-icon.svg @@ -0,0 +1,21 @@ + + + + + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/share-2.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/share-2.svg new file mode 100644 index 000000000000..cb968976fdb4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/share-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/share.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/share.svg new file mode 100644 index 000000000000..35fd9ca34350 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/share.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/shield.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/shield.svg new file mode 100644 index 000000000000..ea43ccce2fd3 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/shield.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/shine.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/shine.svg new file mode 100644 index 000000000000..9fbf0405ed16 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/shine.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/show-modal.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/show-modal.svg new file mode 100644 index 000000000000..41676d1376a4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/show-modal.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/skip-left-line.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/skip-left-line.svg new file mode 100644 index 000000000000..f9f8e83475dc --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/skip-left-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/skip-right-line.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/skip-right-line.svg new file mode 100644 index 000000000000..69f814bab215 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/skip-right-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/snippet.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/snippet.svg new file mode 100644 index 000000000000..8a93e62ba3c8 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/snippet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/success.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/success.svg new file mode 100644 index 000000000000..372868c6635e --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/success.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/support.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/support.svg new file mode 100644 index 000000000000..67aeab1005c1 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/support.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/tables.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/tables.svg new file mode 100644 index 000000000000..21fa87c590a1 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/tables.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/tablet-landscape.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/tablet-landscape.svg new file mode 100644 index 000000000000..b9df9b7b2b77 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/tablet-landscape.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/tablet.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/tablet.svg new file mode 100644 index 000000000000..20a8f0f17081 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/tablet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/trending-flat.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/trending-flat.svg new file mode 100644 index 000000000000..af673215c2e6 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/trending-flat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/two-line-hamburger.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/two-line-hamburger.svg new file mode 100644 index 000000000000..b613452efcf9 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/two-line-hamburger.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/up-arrow.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/up-arrow.svg new file mode 100644 index 000000000000..5c68afc10a55 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/up-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/upload-v2.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/upload-v2.svg new file mode 100644 index 000000000000..e3cbc3393b01 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/upload-v2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/upload.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/upload.svg new file mode 100644 index 000000000000..23238a7b5c2b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/upload.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/upload_success.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/upload_success.svg new file mode 100644 index 000000000000..20a260c74038 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/upload_success.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/upper_arrow.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/upper_arrow.svg new file mode 100644 index 000000000000..15e203070ae6 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/upper_arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/user-v2.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/user-v2.svg new file mode 100644 index 000000000000..0f57cf3ac1cb --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/user-v2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/user.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/user.svg new file mode 100644 index 000000000000..5ec8f749df09 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/user.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/vertical-bottom.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/vertical-bottom.svg new file mode 100644 index 000000000000..0767751f44aa --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/vertical-bottom.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/vertical-middle.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/vertical-middle.svg new file mode 100644 index 000000000000..e16a470e895e --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/vertical-middle.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/vertical-top.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/vertical-top.svg new file mode 100644 index 000000000000..a44abe86e99c --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/vertical-top.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/view-all.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/view-all.svg new file mode 100644 index 000000000000..f2edf62f0d7b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/view-all.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/view-less.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/view-less.svg new file mode 100644 index 000000000000..e0d450aa4e88 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/view-less.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/w-line.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/w-line.svg new file mode 100644 index 000000000000..c31b1a96f989 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/w-line.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/wand.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/wand.svg new file mode 100644 index 000000000000..3a0a798348b3 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/wand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/warning-triangle.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/warning-triangle.svg new file mode 100644 index 000000000000..1704602d5888 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/warning-triangle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/warning.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/warning.svg new file mode 100644 index 000000000000..2a6d5c023bd9 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/warning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/widgets-v3-icon.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/widgets-v3-icon.svg new file mode 100644 index 000000000000..c9b941f3b7f6 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/widgets-v3-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/workflows-mono.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/workflows-mono.svg new file mode 100644 index 000000000000..c3d5d8f05608 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/workflows-mono.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/workflows.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/workflows.svg new file mode 100644 index 000000000000..3dd053b7d9ed --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/workflows.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/workspace.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/workspace.svg new file mode 100644 index 000000000000..76b6cccd6779 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/workspace.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/workspaceIcon.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/workspaceIcon.svg new file mode 100644 index 000000000000..19ca79c9ddd4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/workspaceIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/alert/error.svg b/app/client/packages/design-system/ads/src/__assets__/icons/alert/error.svg new file mode 100644 index 000000000000..ff3581b77b87 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/alert/error.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/alert/info.svg b/app/client/packages/design-system/ads/src/__assets__/icons/alert/info.svg new file mode 100644 index 000000000000..3a608999b34b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/alert/info.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/alert/success.svg b/app/client/packages/design-system/ads/src/__assets__/icons/alert/success.svg new file mode 100644 index 000000000000..3df2b9b8398a --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/alert/success.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/alert/warning.svg b/app/client/packages/design-system/ads/src/__assets__/icons/alert/warning.svg new file mode 100644 index 000000000000..8ef6d4396029 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/alert/warning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/chat.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/chat.svg new file mode 100644 index 000000000000..e0feaa99fb50 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/chat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/check-oval.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/check-oval.svg new file mode 100644 index 000000000000..8abc88b134a1 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/check-oval.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/comment-mode-unread-indicator.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/comment-mode-unread-indicator.svg new file mode 100644 index 000000000000..6462f9cb808b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/comment-mode-unread-indicator.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/commentCursor.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/commentCursor.svg new file mode 100644 index 000000000000..dced22e93648 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/commentCursor.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/context-menu.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/context-menu.svg new file mode 100644 index 000000000000..646ae3404494 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/context-menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/down-arrow.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/down-arrow.svg new file mode 100644 index 000000000000..6274f608f961 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/down-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/edit-mode.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/edit-mode.svg new file mode 100644 index 000000000000..5aea2a20fa04 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/edit-mode.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/emoji.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/emoji.svg new file mode 100644 index 000000000000..9337c2dedec8 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/emoji.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/eye.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/eye.svg new file mode 100644 index 000000000000..af8e6ce4a3bd --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/eye.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/filter.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/filter.svg new file mode 100644 index 000000000000..5d4f05f9de03 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/filter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/link.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/link.svg new file mode 100644 index 000000000000..72f68c513b33 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/notifications-empty-state.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/notifications-empty-state.svg new file mode 100644 index 000000000000..cbce95b8ec95 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/notifications-empty-state.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/pen.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/pen.svg new file mode 100644 index 000000000000..80d650514f5c --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/pen.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/pin.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/pin.svg new file mode 100644 index 000000000000..cde437079e00 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/pin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/pin_2.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/pin_2.svg new file mode 100644 index 000000000000..d7d1825d4022 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/pin_2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/pin_3.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/pin_3.svg new file mode 100644 index 000000000000..57107b4c2805 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/pin_3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/reaction-2.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/reaction-2.svg new file mode 100644 index 000000000000..12349df06e25 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/reaction-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/reaction.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/reaction.svg new file mode 100644 index 000000000000..de31f8e68ee5 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/reaction.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/read-pin.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/read-pin.svg new file mode 100644 index 000000000000..bd5c84012b9d --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/read-pin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/send-button.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/send-button.svg new file mode 100644 index 000000000000..50fbeb2e22d5 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/send-button.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/toggle-comment-mode.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/toggle-comment-mode.svg new file mode 100644 index 000000000000..7e6bcd484961 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/toggle-comment-mode.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/trash.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/trash.svg new file mode 100644 index 000000000000..0d0cd882fc73 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/trash.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/unpin.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/unpin.svg new file mode 100644 index 000000000000..4fec8e2000e5 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/unpin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/unpinIcon.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/unpinIcon.svg new file mode 100644 index 000000000000..d6e34686d496 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/unpinIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/comments/unread-pin.svg b/app/client/packages/design-system/ads/src/__assets__/icons/comments/unread-pin.svg new file mode 100644 index 000000000000..75f18eedbe86 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/comments/unread-pin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/add-circle.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/add-circle.svg new file mode 100644 index 000000000000..1aa324c8b54d --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/add-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/address.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/address.svg new file mode 100644 index 000000000000..cb38ae84afe0 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/address.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/align_left.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/align_left.svg new file mode 100755 index 000000000000..2c398810cc42 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/align_left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/align_right.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/align_right.svg new file mode 100755 index 000000000000..0dfb44d379ef --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/align_right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/arrow_forward.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/arrow_forward.svg new file mode 100644 index 000000000000..8a6198358c45 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/arrow_forward.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/back.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/back.svg new file mode 100644 index 000000000000..b01487a2873d --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/back.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/bold.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/bold.svg new file mode 100644 index 000000000000..8eff234c30c8 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/bold.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/border-radius-circle.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/border-radius-circle.svg new file mode 100755 index 000000000000..3c9db5c6004e --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/border-radius-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/border-radius-rounded.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/border-radius-rounded.svg new file mode 100755 index 000000000000..bae8f82801fa --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/border-radius-rounded.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/border-radius-sharp.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/border-radius-sharp.svg new file mode 100755 index 000000000000..8afc464d2126 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/border-radius-sharp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/box-shadow-none.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/box-shadow-none.svg new file mode 100755 index 000000000000..f7297149f005 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/box-shadow-none.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/box-shadow-variant1.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/box-shadow-variant1.svg new file mode 100755 index 000000000000..4ad61231a839 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/box-shadow-variant1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/box-shadow-variant2.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/box-shadow-variant2.svg new file mode 100755 index 000000000000..fc9bf103b783 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/box-shadow-variant2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/box-shadow-variant3.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/box-shadow-variant3.svg new file mode 100755 index 000000000000..1d1bf581bccf --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/box-shadow-variant3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/box-shadow-variant4.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/box-shadow-variant4.svg new file mode 100755 index 000000000000..8d2a1646af98 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/box-shadow-variant4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/box-shadow-variant5.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/box-shadow-variant5.svg new file mode 100755 index 000000000000..65d0e7b4c4fc --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/box-shadow-variant5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/bullets.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/bullets.svg new file mode 100644 index 000000000000..bf78711ba420 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/bullets.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/cap_dot.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/cap_dot.svg new file mode 100644 index 000000000000..9099bb0ee61c --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/cap_dot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/cap_solid.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/cap_solid.svg new file mode 100644 index 000000000000..15ce3a0efb4b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/cap_solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/center-align.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/center-align.svg new file mode 100644 index 000000000000..0fd70a5d6aa9 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/center-align.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/checkmark.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/checkmark.svg new file mode 100644 index 000000000000..efa5b567ac0c --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/checkmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/chevron-down.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/chevron-down.svg new file mode 100644 index 000000000000..612b83e1e0e7 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/chevron-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/close.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/close.svg new file mode 100644 index 000000000000..c36a21cd8fd6 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/collapse.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/collapse.svg new file mode 100644 index 000000000000..c6c17171f954 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/collapse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/color-picker.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/color-picker.svg new file mode 100755 index 000000000000..3686225294e8 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/color-picker.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/columns-visibility.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/columns-visibility.svg new file mode 100755 index 000000000000..78c503e371a2 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/columns-visibility.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/compact.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/compact.svg new file mode 100755 index 000000000000..82a827774e70 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/compact.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/copy.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/copy.svg new file mode 100644 index 000000000000..b9d9af6cc47d --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/copy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/copy2.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/copy2.svg new file mode 100644 index 000000000000..278b370002d4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/copy2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/currency.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/currency.svg new file mode 100644 index 000000000000..9a6b2a040296 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/currency.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/cut.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/cut.svg new file mode 100644 index 000000000000..98aad3943d08 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/cut.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/datepicker.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/datepicker.svg new file mode 100644 index 000000000000..4bfed6bf775f --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/datepicker.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/decimal.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/decimal.svg new file mode 100644 index 000000000000..2d1271517017 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/decimal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/decrease.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/decrease.svg new file mode 100644 index 000000000000..87c0ac36523b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/decrease.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/delete-column.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/delete-column.svg new file mode 100644 index 000000000000..2a578820d0e4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/delete-column.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/delete.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/delete.svg new file mode 100644 index 000000000000..3fdd42d79996 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/delete.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/divider_cap_all.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/divider_cap_all.svg new file mode 100644 index 000000000000..6bd7faf28e8f --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/divider_cap_all.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/divider_cap_left.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/divider_cap_left.svg new file mode 100644 index 000000000000..72657869004d --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/divider_cap_left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/divider_cap_right.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/divider_cap_right.svg new file mode 100644 index 000000000000..c0119136eb09 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/divider_cap_right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/download-data-icon.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/download-data-icon.svg new file mode 100644 index 000000000000..48f23f85af7a --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/download-data-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/drag.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/drag.svg new file mode 100644 index 000000000000..604179d21d64 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/drag.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/draggable.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/draggable.svg new file mode 100644 index 000000000000..d156a65a40c6 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/draggable.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/edit-white.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/edit-white.svg new file mode 100644 index 000000000000..a85edc8187be --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/edit-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/edit.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/edit.svg new file mode 100644 index 000000000000..c60872ed2f98 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/edit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/email.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/email.svg new file mode 100644 index 000000000000..59dad51c3849 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/email.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/filter-icon.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/filter-icon.svg new file mode 100644 index 000000000000..4d92889575df --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/filter-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/group.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/group.svg new file mode 100644 index 000000000000..667f29ac6ed8 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/group.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/heading_1.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/heading_1.svg new file mode 100644 index 000000000000..32fa61797c5e --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/heading_1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/heading_2.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/heading_2.svg new file mode 100644 index 000000000000..cb7a6f27513c --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/heading_2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/heading_3.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/heading_3.svg new file mode 100644 index 000000000000..f7aff92aba92 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/heading_3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/help.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/help.svg new file mode 100644 index 000000000000..a6307184f110 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/help.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/hide-column.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/hide-column.svg new file mode 100644 index 000000000000..b1e41e5789ab --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/hide-column.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/increase.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/increase.svg new file mode 100644 index 000000000000..1c4c3f5e3331 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/increase.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/info.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/info.svg new file mode 100644 index 000000000000..95aa0a81ae5d --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/info.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/input.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/input.svg new file mode 100644 index 000000000000..ad382f979037 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/input.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/integer.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/integer.svg new file mode 100644 index 000000000000..25969f3b1a38 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/integer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/italics.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/italics.svg new file mode 100644 index 000000000000..1e3672dec331 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/italics.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/js-toggle.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/js-toggle.svg new file mode 100644 index 000000000000..2698942924af --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/js-toggle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/launch.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/launch.svg new file mode 100644 index 000000000000..aa793ca24fa6 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/launch.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/left-align.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/left-align.svg new file mode 100644 index 000000000000..ba60c9673a80 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/left-align.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/lightning.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/lightning.svg new file mode 100644 index 000000000000..e611c04972d2 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/lightning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/line_dashed.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/line_dashed.svg new file mode 100644 index 000000000000..6fb36f74a2c6 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/line_dashed.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/line_dotted.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/line_dotted.svg new file mode 100644 index 000000000000..99693fd9679f --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/line_dotted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/more-vertical.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/more-vertical.svg new file mode 100755 index 000000000000..e2a0e3ca5591 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/more-vertical.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/move.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/move.svg new file mode 100644 index 000000000000..568cc4de04fc --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/move.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/multiline.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/multiline.svg new file mode 100644 index 000000000000..ba7bb1e4c1a2 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/multiline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/open-new-tab.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/open-new-tab.svg new file mode 100644 index 000000000000..2cf241d0215f --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/open-new-tab.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/paragraph.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/paragraph.svg new file mode 100644 index 000000000000..fae0617396e5 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/paragraph.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/paragraph_2.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/paragraph_2.svg new file mode 100644 index 000000000000..9cb061ba5f44 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/paragraph_2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/password.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/password.svg new file mode 100644 index 000000000000..958ea5f3249b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/password.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/phone.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/phone.svg new file mode 100644 index 000000000000..8d43cad5191f --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/phone.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/pick-location-initial.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/pick-location-initial.svg new file mode 100644 index 000000000000..adc4d2290676 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/pick-location-initial.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/pick-location-onclick.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/pick-location-onclick.svg new file mode 100644 index 000000000000..24e2db51f99b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/pick-location-onclick.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/pick-location-selected.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/pick-location-selected.svg new file mode 100644 index 000000000000..be151d646dbf --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/pick-location-selected.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/pick-my-location.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/pick-my-location.svg new file mode 100644 index 000000000000..8655546aa2ed --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/pick-my-location.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/play-icon.png b/app/client/packages/design-system/ads/src/__assets__/icons/control/play-icon.png new file mode 100644 index 000000000000..48ca301f338b Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/icons/control/play-icon.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/redo.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/redo.svg new file mode 100644 index 000000000000..77c7dae9e90f --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/redo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/remove.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/remove.svg new file mode 100755 index 000000000000..14e58f2cc5d7 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/remove.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/right-align.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/right-align.svg new file mode 100644 index 000000000000..934931393bc7 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/right-align.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/search.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/search.svg new file mode 100644 index 000000000000..364ae959ce08 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/settings.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/settings.svg new file mode 100644 index 000000000000..40c65104082a --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/settings.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/sort-icon.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/sort-icon.svg new file mode 100755 index 000000000000..f11e670d5ff7 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/sort-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/underline.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/underline.svg new file mode 100644 index 000000000000..c340b6b0d46e --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/underline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/underline1.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/underline1.svg new file mode 100644 index 000000000000..6e3793cd874a --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/underline1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/undo.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/undo.svg new file mode 100644 index 000000000000..e7b58feae4a4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/undo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/undo_2.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/undo_2.svg new file mode 100644 index 000000000000..74df04755c69 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/undo_2.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/vertical_align_bottom.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/vertical_align_bottom.svg new file mode 100644 index 000000000000..73f190ad8b32 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/vertical_align_bottom.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/vertical_align_center.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/vertical_align_center.svg new file mode 100644 index 000000000000..b45851db35e0 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/vertical_align_center.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/vertical_align_top.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/vertical_align_top.svg new file mode 100644 index 000000000000..b25579e4680c --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/vertical_align_top.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/view.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/view.svg new file mode 100644 index 000000000000..77f7e055665a --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/view.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/zoomin.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/zoomin.svg new file mode 100644 index 000000000000..2af30e2b17c3 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/zoomin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/control/zoomout.svg b/app/client/packages/design-system/ads/src/__assets__/icons/control/zoomout.svg new file mode 100644 index 000000000000..6f1fb70136ca --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/control/zoomout.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/form/add-new.svg b/app/client/packages/design-system/ads/src/__assets__/icons/form/add-new.svg new file mode 100644 index 000000000000..2b36469eb031 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/form/add-new.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/form/help-outline.svg b/app/client/packages/design-system/ads/src/__assets__/icons/form/help-outline.svg new file mode 100644 index 000000000000..09c2e61bd6e8 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/form/help-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/form/info-outline.svg b/app/client/packages/design-system/ads/src/__assets__/icons/form/info-outline.svg new file mode 100644 index 000000000000..0782dabbbe24 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/form/info-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/form/lock.svg b/app/client/packages/design-system/ads/src/__assets__/icons/form/lock.svg new file mode 100644 index 000000000000..eba05a37534f --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/form/lock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/form/slash-line.svg b/app/client/packages/design-system/ads/src/__assets__/icons/form/slash-line.svg new file mode 100644 index 000000000000..9349ff945b87 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/form/slash-line.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/form/trash.svg b/app/client/packages/design-system/ads/src/__assets__/icons/form/trash.svg new file mode 100755 index 000000000000..13b83194d629 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/form/trash.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/gifs/config_pagination_darkmode.gif b/app/client/packages/design-system/ads/src/__assets__/icons/gifs/config_pagination_darkmode.gif new file mode 100644 index 000000000000..83bdde450221 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/icons/gifs/config_pagination_darkmode.gif differ diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/gifs/config_pagination_lightmode.gif b/app/client/packages/design-system/ads/src/__assets__/icons/gifs/config_pagination_lightmode.gif new file mode 100644 index 000000000000..01108af6c010 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/icons/gifs/config_pagination_lightmode.gif differ diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/gifs/darkmode_thumbnail.png b/app/client/packages/design-system/ads/src/__assets__/icons/gifs/darkmode_thumbnail.png new file mode 100644 index 000000000000..c520dad867bc Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/icons/gifs/darkmode_thumbnail.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/gifs/lightmode_thumbnail.png b/app/client/packages/design-system/ads/src/__assets__/icons/gifs/lightmode_thumbnail.png new file mode 100644 index 000000000000..c4f07d5e96ed Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/icons/gifs/lightmode_thumbnail.png differ diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/header/deploy.svg b/app/client/packages/design-system/ads/src/__assets__/icons/header/deploy.svg new file mode 100644 index 000000000000..37bdd9d81270 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/header/deploy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/header/feedback.svg b/app/client/packages/design-system/ads/src/__assets__/icons/header/feedback.svg new file mode 100644 index 000000000000..bfb512b8c3f7 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/header/feedback.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/header/hamburger.svg b/app/client/packages/design-system/ads/src/__assets__/icons/header/hamburger.svg new file mode 100644 index 000000000000..c42ae09715a2 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/header/hamburger.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/header/save-failure.svg b/app/client/packages/design-system/ads/src/__assets__/icons/header/save-failure.svg new file mode 100644 index 000000000000..b6210197ea83 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/header/save-failure.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/header/save-loading.gif b/app/client/packages/design-system/ads/src/__assets__/icons/header/save-loading.gif new file mode 100644 index 000000000000..504e82ba8d39 Binary files /dev/null and b/app/client/packages/design-system/ads/src/__assets__/icons/header/save-loading.gif differ diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/header/save-success.svg b/app/client/packages/design-system/ads/src/__assets__/icons/header/save-success.svg new file mode 100644 index 000000000000..340e58cf3239 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/header/save-success.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/header/share-white.svg b/app/client/packages/design-system/ads/src/__assets__/icons/header/share-white.svg new file mode 100644 index 000000000000..f90ae1bb14c7 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/header/share-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/help/close_blue.svg b/app/client/packages/design-system/ads/src/__assets__/icons/help/close_blue.svg new file mode 100644 index 000000000000..cd5b2314af86 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/help/close_blue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/help/discord.svg b/app/client/packages/design-system/ads/src/__assets__/icons/help/discord.svg new file mode 100644 index 000000000000..ee334bbc7e7a --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/help/discord.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/help/document.svg b/app/client/packages/design-system/ads/src/__assets__/icons/help/document.svg new file mode 100644 index 000000000000..bf8d13cf1e36 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/help/document.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/help/github-icon.svg b/app/client/packages/design-system/ads/src/__assets__/icons/help/github-icon.svg new file mode 100644 index 000000000000..7126204ff850 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/help/github-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/help/help.svg b/app/client/packages/design-system/ads/src/__assets__/icons/help/help.svg new file mode 100644 index 000000000000..46d0b764c45d --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/help/help.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/help/openlink.svg b/app/client/packages/design-system/ads/src/__assets__/icons/help/openlink.svg new file mode 100644 index 000000000000..4b64b21ed3ac --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/help/openlink.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/help/updates.svg b/app/client/packages/design-system/ads/src/__assets__/icons/help/updates.svg new file mode 100644 index 000000000000..f5fe10e63d06 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/help/updates.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/api-colored.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/api-colored.svg new file mode 100644 index 000000000000..43851daad271 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/api-colored.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/api.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/api.svg new file mode 100644 index 000000000000..a81046b50d6c --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/api.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/beta.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/beta.svg new file mode 100644 index 000000000000..1d63a3aa25b1 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/beta.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/binding.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/binding.svg new file mode 100644 index 000000000000..3c1bc542339e --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/binding.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/close-filter.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/close-filter.svg new file mode 100644 index 000000000000..253e5a162eed --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/close-filter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/copy-snippet.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/copy-snippet.svg new file mode 100644 index 000000000000..398ad47a1128 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/copy-snippet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/data-sources.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/data-sources.svg new file mode 100644 index 000000000000..63cc842f80e0 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/data-sources.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/datasource-colored.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/datasource-colored.svg new file mode 100644 index 000000000000..ae022d43fcf8 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/datasource-colored.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/datasource-column.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/datasource-column.svg new file mode 100644 index 000000000000..695d40a98c46 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/datasource-column.svg @@ -0,0 +1 @@ +Column \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/datasource-table.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/datasource-table.svg new file mode 100644 index 000000000000..a3c30a69fbb5 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/datasource-table.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/datasources-2.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/datasources-2.svg new file mode 100644 index 000000000000..e4489ea0ae0c --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/datasources-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/explorer.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/explorer.svg new file mode 100644 index 000000000000..1284f5ad5f0c --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/explorer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/filter.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/filter.svg new file mode 100644 index 000000000000..168dc29feff1 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/filter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/foreign-key.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/foreign-key.svg new file mode 100644 index 000000000000..7003efae12d4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/foreign-key.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/function.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/function.svg new file mode 100644 index 000000000000..2db8813779ea --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/function.svg @@ -0,0 +1 @@ +Fn \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/homepage.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/homepage.svg new file mode 100644 index 000000000000..361c14622bb4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/homepage.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/js-file-icon.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/js-file-icon.svg new file mode 100644 index 000000000000..f4fd5e1defa0 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/js-file-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/js-file.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/js-file.svg new file mode 100644 index 000000000000..d64307ffbb5d --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/js-file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/js-function.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/js-function.svg new file mode 100644 index 000000000000..da40bfe8effd --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/js-function.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/js-group.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/js-group.svg new file mode 100644 index 000000000000..51831e1d3e0d --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/js-group.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/js-icon.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/js-icon.svg new file mode 100644 index 000000000000..63b743eb4865 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/js-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/link.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/link.svg new file mode 100644 index 000000000000..d8aadd077a8e --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/new-plus.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/new-plus.svg new file mode 100644 index 000000000000..7cdbe3708f4e --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/new-plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/overflow-menu.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/overflow-menu.svg new file mode 100644 index 000000000000..da33393ad166 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/overflow-menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/page.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/page.svg new file mode 100644 index 000000000000..5ad6c9eab142 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/page.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/pages.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/pages.svg new file mode 100644 index 000000000000..95114f63d835 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/pages.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/play-snippet.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/play-snippet.svg new file mode 100644 index 000000000000..8a5ad87ae1d0 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/play-snippet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/primary-key.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/primary-key.svg new file mode 100644 index 000000000000..2ff17003e161 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/primary-key.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/queries.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/queries.svg new file mode 100644 index 000000000000..e8d26e3a536a --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/queries.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/query-main.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/query-main.svg new file mode 100644 index 000000000000..913199d4f6a8 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/query-main.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/run.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/run.svg new file mode 100644 index 000000000000..0f5e43b6554b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/run.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/settings.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/settings.svg new file mode 100644 index 000000000000..534284c35016 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/settings.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/storage.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/storage.svg new file mode 100644 index 000000000000..315b78ac5cef --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/storage.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/widgets-colored.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/widgets-colored.svg new file mode 100644 index 000000000000..181f517469f4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/widgets-colored.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/widgets.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/widgets.svg new file mode 100644 index 000000000000..65ad977c0f86 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/widgets.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/menu/workspace.svg b/app/client/packages/design-system/ads/src/__assets__/icons/menu/workspace.svg new file mode 100644 index 000000000000..a644fb6d78b1 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/menu/workspace.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/others/profile-placeholder.svg b/app/client/packages/design-system/ads/src/__assets__/icons/others/profile-placeholder.svg new file mode 100644 index 000000000000..b8ef8acc18d2 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/others/profile-placeholder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/camera-muted.svg b/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/camera-muted.svg new file mode 100755 index 000000000000..d77e0c28c2a5 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/camera-muted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/camera-offline.svg b/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/camera-offline.svg new file mode 100755 index 000000000000..4f70470333c4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/camera-offline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/camera.svg b/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/camera.svg new file mode 100755 index 000000000000..5c1bafbe8a60 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/camera.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/exit-fullscreen.svg b/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/exit-fullscreen.svg new file mode 100644 index 000000000000..3f058bce5484 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/exit-fullscreen.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/fullscreen.svg b/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/fullscreen.svg new file mode 100755 index 000000000000..4c18885f017c --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/fullscreen.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/microphone-muted.svg b/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/microphone-muted.svg new file mode 100755 index 000000000000..d35ee758544b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/microphone-muted.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/microphone.svg b/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/microphone.svg new file mode 100755 index 000000000000..3740c45a9bcb --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/widget/camera/microphone.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/widget/recorder/recorder_complete.svg b/app/client/packages/design-system/ads/src/__assets__/icons/widget/recorder/recorder_complete.svg new file mode 100755 index 000000000000..956227341e8a --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/widget/recorder/recorder_complete.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/widget/recorder/recorder_default.svg b/app/client/packages/design-system/ads/src/__assets__/icons/widget/recorder/recorder_default.svg new file mode 100755 index 000000000000..395deb5c6ab7 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/widget/recorder/recorder_default.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/widget/recorder/recorder_no_permission.svg b/app/client/packages/design-system/ads/src/__assets__/icons/widget/recorder/recorder_no_permission.svg new file mode 100755 index 000000000000..d35ee758544b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/widget/recorder/recorder_no_permission.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/widget/recorder/recorder_pause.svg b/app/client/packages/design-system/ads/src/__assets__/icons/widget/recorder/recorder_pause.svg new file mode 100755 index 000000000000..c541bf687749 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/widget/recorder/recorder_pause.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/widget/recorder/recorder_recording.svg b/app/client/packages/design-system/ads/src/__assets__/icons/widget/recorder/recorder_recording.svg new file mode 100755 index 000000000000..1cbcf8e55870 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/widget/recorder/recorder_recording.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/widget/table/checkbox-check.svg b/app/client/packages/design-system/ads/src/__assets__/icons/widget/table/checkbox-check.svg new file mode 100644 index 000000000000..8a2b071eb9c6 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/widget/table/checkbox-check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/widget/table/checkbox-line.svg b/app/client/packages/design-system/ads/src/__assets__/icons/widget/table/checkbox-line.svg new file mode 100644 index 000000000000..e08e6eee78b0 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/widget/table/checkbox-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/widget/tabs/scroll-nav-left.svg b/app/client/packages/design-system/ads/src/__assets__/icons/widget/tabs/scroll-nav-left.svg new file mode 100755 index 000000000000..d54150f8fbfc --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/widget/tabs/scroll-nav-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/widget/tabs/scroll-nav-right.svg b/app/client/packages/design-system/ads/src/__assets__/icons/widget/tabs/scroll-nav-right.svg new file mode 100755 index 000000000000..50557a07427c --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/widget/tabs/scroll-nav-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__config__/constants.ts b/app/client/packages/design-system/ads/src/__config__/constants.ts new file mode 100644 index 000000000000..fbe69f96708e --- /dev/null +++ b/app/client/packages/design-system/ads/src/__config__/constants.ts @@ -0,0 +1,7 @@ +/** + * The prefix for all class names in the design system. + * we use BEM naming convention for class names. + * @see https://en.bem.info/methodology/css/ + */ +export const CLASS_NAME_PREFIX = "ads-v2"; +export const CSS_VARIABLE_PREFIX = "--ads-v2-"; diff --git a/app/client/packages/design-system/ads/src/__config__/types.ts b/app/client/packages/design-system/ads/src/__config__/types.ts new file mode 100644 index 000000000000..c2063c47e9da --- /dev/null +++ b/app/client/packages/design-system/ads/src/__config__/types.ts @@ -0,0 +1,21 @@ +// This is a generic type, pick only the types needed. +export type Sizes = "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "xxxxl"; + +export type Kind = "success" | "error" | "warning" | "info" | undefined; + +export type Spaces = + | "spaces-0" + | "spaces-1" + | "spaces-2" + | "spaces-3" + | "spaces-4" + | "spaces-5" + | "spaces-6" + | "spaces-7" + | "spaces-8" + | "spaces-9" + | "spaces-10" + | "spaces-11" + | "spaces-12" + | "spaces-13" + | "spaces-14"; diff --git a/app/client/packages/design-system/ads/src/__config__/utils.ts b/app/client/packages/design-system/ads/src/__config__/utils.ts new file mode 100644 index 000000000000..e24015c77221 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__config__/utils.ts @@ -0,0 +1,11 @@ +import { style } from "@xstyled/styled-components"; + +export const width = style({ + prop: ["width", "w"], + css: "width", +}); + +export const height = style({ + prop: ["height", "h"], + css: "height", +}); diff --git a/app/client/packages/design-system/ads/src/__hooks__/useDomRef.ts b/app/client/packages/design-system/ads/src/__hooks__/useDomRef.ts new file mode 100644 index 000000000000..e901fa63d45f --- /dev/null +++ b/app/client/packages/design-system/ads/src/__hooks__/useDomRef.ts @@ -0,0 +1,12 @@ +import type { Ref, RefObject } from "react"; +import { useImperativeHandle, useRef } from "react"; + +export function useDOMRef( + ref?: RefObject | Ref, +) { + const domRef = useRef(null); + + useImperativeHandle(ref, () => domRef.current); + + return domRef; +} diff --git a/app/client/packages/design-system/ads/src/__theme__/default/colors.css b/app/client/packages/design-system/ads/src/__theme__/default/colors.css new file mode 100644 index 000000000000..eb49d3b2eb3b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__theme__/default/colors.css @@ -0,0 +1,82 @@ +:root { + /* orange */ + --ads-v2-color-orange-900: #933208; + --ads-v2-color-orange-800: #b33d0a; + --ads-v2-color-orange-700: #cf4d10; + --ads-v2-color-orange-600: #e15615; + --ads-v2-color-orange-500: #f86a2b; + --ads-v2-color-orange-400: #f97d4a; + --ads-v2-color-orange-300: #f9936b; + --ads-v2-color-orange-200: #fbb195; + --ads-v2-color-orange-100: #fccfbf; + --ads-v2-color-orange-50: #faeae8; + + /* black */ + --ads-v2-color-black: #000000; + --ads-v2-color-black-900: #191919; + --ads-v2-color-black-850: #302d2d; + --ads-v2-color-black-800: #393939; + --ads-v2-color-black-750: #4b4848; + --ads-v2-color-black-700: #575757; + --ads-v2-color-black-600: #6b6b6b; + --ads-v2-color-black-550: #716e6e; + --ads-v2-color-black-500: #939393; + --ads-v2-color-black-470: #939090; + --ads-v2-color-black-450: #a9a7a7; + --ads-v2-color-black-400: #b3b3b3; + --ads-v2-color-black-300: #d7d7d7; + --ads-v2-color-black-250: #e0dede; + --ads-v2-color-black-200: #e7e7e7; + --ads-v2-color-black-100: #f1f1f1; + --ads-v2-color-black-75: #f0f0f0; + --ads-v2-color-black-50: #f8f8f8; + --ads-v2-color-black-25: #f7f7f7; + --ads-v2-color-black-5: #fafafa; + --ads-v2-color-white: #ffffff; + + /* gray */ + --ads-v2-color-gray-900: #12192b; + --ads-v2-color-gray-800: #202939; + --ads-v2-color-gray-700: #364252; + --ads-v2-color-gray-600: #4c5664; + --ads-v2-color-gray-500: #6a7585; + --ads-v2-color-gray-400: #99a4b3; + --ads-v2-color-gray-300: #cdd5df; + --ads-v2-color-gray-200: #e3e8ef; + --ads-v2-color-gray-100: #f1f5f9; + --ads-v2-color-gray-50: #f8fafc; + --ads-v2-color-gray-0: #f8fafc; + + /* red */ + --ads-v2-color-red-600: #f22b2b; + --ads-v2-color-red-400: #ffb4b4; + --ads-v2-color-red-300: #ffe3e3; + --ads-v2-color-red-200: #ffebeb; + --ads-v2-color-red-100: #fff2f2; + --ads-v2-color-red-50: #fff8f8; + + /* blue */ + --ads-v2-color-blue-100: #eff6ff; + --ads-v2-color-blue-300: #8bb0fa; + --ads-v2-color-blue-600: #2d6bf4; + + /* yellow */ + --ads-v2-color-yellow-600: #eaa108; + --ads-v2-color-yellow-100: #fffbeb; + + /* green */ + --ads-v2-color-green-600: #059669; + --ads-v2-color-green-100: #ecfdf5; + + /* purple */ + --ads-v2-color-purple-50: #f5f4f9; + --ads-v2-color-purple-100: #f1eef9; + --ads-v2-color-purple-200: #d5c7eb; + --ads-v2-color-purple-300: #b59fd4; + --ads-v2-color-purple-400: #9166cc; + --ads-v2-color-purple-500: #8147cc; + --ads-v2-color-purple-600: #5b2e99; + --ads-v2-color-purple-700: #401d73; + --ads-v2-color-purple-800: #2e1259; + --ads-v2-color-purple-900: #1c0640; +} diff --git a/app/client/packages/design-system/ads/src/__theme__/default/index.css b/app/client/packages/design-system/ads/src/__theme__/default/index.css new file mode 100644 index 000000000000..ad6c149f68c3 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__theme__/default/index.css @@ -0,0 +1,307 @@ +@import "colors.css"; +@import "variables.css"; +@import "typography.css"; +@import "semantic.css"; + +:root { + /** + * ===========================================* + * =========== Category Tokens ===============* + * ===========================================* + */ + + /* https://design-system.appsmith.com/?path=/docs/docs-category-tokens-introduction--introduction */ + + /* ========================= Actions ========================= */ + /* Primary */ + --ads-v2-colors-action-primary-surface-default-bg: var( + --ads-v2-color-bg-brand + ); + --ads-v2-colors-action-primary-surface-hover-bg: var( + --ads-v2-color-bg-brand-emphasis + ); + --ads-v2-colors-action-primary-surface-active-bg: var( + --ads-v2-color-bg-brand-emphasis-plus + ); + --ads-v2-colors-action-primary-surface-default-border: var( + --ads-v2-color-border-brand + ); + --ads-v2-colors-action-primary-surface-hover-border: var( + --ads-v2-color-border-brand-emphasis + ); + --ads-v2-colors-action-primary-surface-active-border: var( + --ads-v2-color-border-brand-emphasis-plus + ); + --ads-v2-colors-action-primary-label-default-fg: var( + --ads-v2-color-fg-on-brand + ); + --ads-v2-colors-action-primary-icon-default-fg: var( + --ads-v2-color-fg-on-brand + ); + + /* Secondary */ + --ads-v2-colors-action-secondary-surface-default-bg: var(--ads-v2-color-bg); + --ads-v2-colors-action-secondary-surface-hover-bg: var( + --ads-v2-color-bg-subtle + ); + --ads-v2-colors-action-secondary-surface-active-bg: var( + --ads-v2-color-bg-muted + ); + --ads-v2-colors-action-secondary-surface-default-border: var( + --ads-v2-color-border + ); + --ads-v2-colors-action-secondary-surface-hover-border: var( + --ads-v2-color-border + ); + --ads-v2-colors-action-secondary-surface-active-border: var( + --ads-v2-color-border-emphasis + ); + --ads-v2-colors-action-secondary-label-default-fg: var(--ads-v2-color-fg); + --ads-v2-colors-action-secondary-label-hover-fg: var( + --ads-v2-color-fg-emphasis + ); + --ads-v2-colors-action-secondary-label-active-fg: var( + --ads-v2-color-fg-emphasis-plus + ); + --ads-v2-colors-action-secondary-icon-default-fg: var(--ads-v2-color-fg); + + /* Tertiary */ + --ads-v2-colors-action-tertiary-surface-default-bg: transparent; + --ads-v2-colors-action-tertiary-surface-hover-bg: var( + --ads-v2-color-bg-subtle + ); + --ads-v2-colors-action-tertiary-surface-active-bg: var( + --ads-v2-color-bg-muted + ); + --ads-v2-colors-action-tertiary-surface-default-border: transparent; + --ads-v2-colors-action-tertiary-label-default-fg: var(--ads-v2-color-fg); + --ads-v2-colors-action-tertiary-icon-default-fg: var(--ads-v2-color-fg); + + /* Error */ + --ads-v2-colors-action-error-surface-default-bg: var(--ads-v2-color-bg-error); + --ads-v2-colors-action-error-surface-hover-bg: var( + --ads-v2-color-bg-error-emphasis + ); + --ads-v2-colors-action-error-surface-active-bg: var( + --ads-v2-color-bg-error-emphasis-plus + ); + --ads-v2-colors-action-error-surface-default-border: transparent; + --ads-v2-colors-action-error-label-default-fg: var( + --ads-v2-color-fg-on-error + ); + --ads-v2-colors-action-error-icon-default-fg: var(--ads-v2-color-fg-on-error); + + /* ========================= Control ========================= */ + --ads-v2-colors-control-field-default-bg: var(--ads-v2-color-bg); + --ads-v2-colors-control-field-checked-bg: var( + --ads-v2-color-bg-brand-secondary + ); + --ads-v2-colors-control-field-hover-bg: var(--ads-v2-color-bg-subtle); + --ads-v2-colors-control-field-checked-hover-bg: var( + --ads-v2-color-bg-brand-secondary-emphasis + ); + --ads-v2-colors-control-knob-default-bg: var(--ads-v2-color-bg); + --ads-v2-colors-control-track-default-bg: var(--ads-v2-color-bg-subtle); + --ads-v2-colors-control-pill-default-bg: var(--ads-v2-color-bg-subtle); + --ads-v2-colors-control-field-default-border: var(--ads-v2-color-border); + --ads-v2-colors-control-field-hover-border: var( + --ads-v2-color-border-emphasis + ); + --ads-v2-colors-control-field-active-border: var( + --ads-v2-color-border-brand-secondary + ); + --ads-v2-colors-control-field-checked-border: var( + --ads-v2-color-border-brand-secondary + ); + --ads-v2-colors-control-field-checked-hover-border: var( + --ads-v2-color-border-brand-secondary-emphasis + ); + --ads-v2-colors-control-field-error-border: var(--ads-v2-color-border-error); + --ads-v2-colors-control-helper-default-fg: var(--ads-v2-color-fg); + --ads-v2-colors-control-helper-error-fg: var(--ads-v2-color-fg-error); + --ads-v2-colors-control-icon-checked-fg: var( + --ads-v2-color-fg-on-brand-secondary + ); + --ads-v2-colors-control-icon-default-fg: var(--ads-v2-color-fg); + --ads-v2-colors-control-icon-error-fg: var(--ads-v2-color-fg-error); + --ads-v2-colors-control-label-default-fg: var(--ads-v2-color-fg); + --ads-v2-colors-control-placeholder-default-fg: var(--ads-v2-color-fg-subtle); + --ads-v2-colors-control-value-checked-fg: var( + --ads-v2-color-fg-on-brand-secondary + ); + --ads-v2-colors-control-value-default-fg: var(--ads-v2-color-fg); + --ads-v2-colors-control-value-inactive-fg: var(--ads-v2-color-fg-muted); + + /* ========================= Response ========================= */ + --ads-v2-colors-response-surface-default-bg: var(--ads-v2-color-bg); + --ads-v2-colors-response-error-surface-default-bg: var( + --ads-v2-color-bg-error + ); + --ads-v2-colors-response-info-surface-default-bg: var( + --ads-v2-color-bg-information + ); + --ads-v2-colors-response-success-surface-default-bg: var( + --ads-v2-color-bg-success + ); + --ads-v2-colors-response-warning-surface-default-bg: var( + --ads-v2-color-bg-warning + ); + --ads-v2-colors-response-label-default-fg: var(--ads-v2-color-fg); + --ads-v2-colors-response-error-icon-default-fg: var(--ads-v2-color-fg-error); + --ads-v2-colors-response-info-icon-default-fg: var( + --ads-v2-color-fg-information + ); + --ads-v2-colors-response-success-icon-default-fg: var( + --ads-v2-color-fg-success + ); + --ads-v2-colors-response-warning-icon-default-fg: var( + --ads-v2-color-fg-warning + ); + --ads-v2-colors-response-surface-default-border: var(--ads-v2-color-border); + + /* ========================= Content ========================= */ + --ads-v2-colors-content-helper-default-fg: var(--ads-v2-color-fg-muted); + --ads-v2-colors-content-icon-default-fg: var(--ads-v2-color-fg); + --ads-v2-colors-content-header-default-fg: var(--ads-v2-color-fg-emphasis); + --ads-v2-colors-content-label-default-fg: var(--ads-v2-color-fg); + --ads-v2-colors-content-label-inactive-fg: var(--ads-v2-color-fg-muted); + --ads-v2-colors-content-label-error-fg: var(--ads-v2-color-fg-error); + --ads-v2-colors-content-label-warning-fg: var(--ads-v2-color-fg-warning); + --ads-v2-colors-content-label-success-fg: var(--ads-v2-color-fg-success); + --ads-v2-colors-content-label-info-fg: var(--ads-v2-color-fg-information); + --ads-v2-colors-content-label-special-fg: var(--ads-v2-color-fg-special); + --ads-v2-colors-content-label-premium-fg: var(--ads-v2-color-fg-premium); + --ads-v2-colors-content-surface-default-bg: var(--ads-v2-color-bg); + --ads-v2-colors-content-surface-hover-bg: var(--ads-v2-color-bg-subtle); + --ads-v2-colors-content-surface-active-bg: var(--ads-v2-color-bg-muted); + --ads-v2-colors-content-surface-error-bg: var(--ads-v2-color-bg-error); + --ads-v2-colors-content-surface-success-bg: var(--ads-v2-color-bg-success); + --ads-v2-colors-content-surface-info-bg: var(--ads-v2-color-bg-information); + --ads-v2-colors-content-surface-neutral-bg: var(--ads-v2-color-bg-subtle); + --ads-v2-colors-content-surface-warning-bg: var(--ads-v2-color-bg-warning); + --ads-v2-colors-content-surface-special-bg: var(--ads-v2-color-bg-special); + --ads-v2-colors-content-surface-premium-bg: var(--ads-v2-color-bg-premium); + --ads-v2-colors-content-surface-default-border: var(--ads-v2-color-border); + --ads-v2-colors-content-surface-info-border: var(--ads-v2-color-border-info); + --ads-v2-colors-content-surface-success-border: var( + --ads-v2-color-border-success + ); + --ads-v2-colors-content-surface-error-border: var( + --ads-v2-color-border-error + ); + --ads-v2-colors-content-surface-warning-border: var( + --ads-v2-color-border-warning + ); + --ads-v2-colors-content-surface-special-border: var( + --ads-v2-color-border-special + ); + --ads-v2-colors-content-surface-premium-border: var( + --ads-v2-color-border-premium + ); + + --ads-v2-colors-content-container-default-border: var( + --ads-v2-color-border-muted + ); + + /** + * ===========================================* + * ================== Shadow =================* + * ===========================================* + */ + --ads-v2-shadow-color: rgba(76, 86, 100, 0.11); + /* This is the shadow that applies only on popovers like select and menu and not in modal or anything that sort.*/ + --ads-v2-shadow-popovers: 0 1px 20px 0 rgba(76, 86, 100, 0.11); + + /** + * ===========================================* + * =========== Border Radius =================* + * ===========================================* + */ + --ads-v2-border-radius: 4px; + --ads-v2-border-radius-circle: 50%; + + /** + * ===========================================* + * =========== Font Family ===================* + * ===========================================* + */ + --ads-v2-font-family: "PTRootUI", -apple-system, "BlinkMacSystemFont", + "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", + "Helvetica Neue", "Icons16", sans-serif; + --ads-v2-font-family-code: source-code-pro, "Menlo", "Monaco", "Consolas", + "Courier New", monospace; + + /** + * ===========================================* + * =============== Outline ===================* + * ===========================================* + */ + /* --ads-v2-color-outline: var(--ads-v2-color-blue-300); + --ads-v2-border-width-outline: 2px; */ + /* TODO: fix focus issue across the platform */ + --ads-v2-color-outline: transparent; + --ads-v2-border-width-outline: 0; + --ads-v2-offset-outline: 0; + + /** + * ===========================================* + * =============== Opacity ===================* + * ===========================================* + */ + --ads-v2-opacity-disabled: 0.6; +} + +/* react-aria useFocusRing helper class*/ +.ads-v2-focus-ring { + outline: var(--ads-v2-border-width-outline) solid var(--ads-v2-color-outline); + outline-offset: var(--ads-v2-offset-outline); +} + +/* Placeholder color */ +::placeholder { + /* This needs to be important to override the placeholder color on main repo */ + color: var(--ads-v2-colors-control-placeholder-default-fg) !important; + opacity: 1; /* Firefox */ +} + +:-ms-input-placeholder { + /* Internet Explorer 10-11 */ + color: var(--ads-v2-colors-control-placeholder-default-fg); +} + +::-ms-input-placeholder { + /* Microsoft Edge */ + color: var(--ads-v2-colors-control-placeholder-default-fg); +} + +* { + scrollbar-width: thin; + scrollbar-color: var(--ads-v2-color-bg-emphasis) transparent; +} + +::-webkit-scrollbar { + height: 5px; + width: 5px; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb { + background-color: transparent; +} + +:hover::-webkit-scrollbar-thumb { + background-color: var(--ads-v2-color-bg-emphasis); + border-radius: 36px; + opacity: 0.5; +} + +body { + font-family: var(--ads-v2-font-family); + -webkit-font-smoothing: auto; + letter-spacing: -0.1px; + font-feature-settings: "ss03"; + text-wrap: pretty; +} diff --git a/app/client/packages/design-system/ads/src/__theme__/default/semantic.css b/app/client/packages/design-system/ads/src/__theme__/default/semantic.css new file mode 100644 index 000000000000..a1e50455e83b --- /dev/null +++ b/app/client/packages/design-system/ads/src/__theme__/default/semantic.css @@ -0,0 +1,142 @@ +/* Semantic tokens */ +:root { + /** + * ===========================================* + * ========== Background Colors ==============* + * ===========================================* + */ + + /** Used as active bg when --ads-v2-color-bg-brand is the default bg **/ + --ads-v2-color-bg-brand-emphasis-plus: var(--ads-v2-color-orange-800); + /** Used as hover bg when --ads-v2-color-bg-brand is the default bg **/ + --ads-v2-color-bg-brand-emphasis: var(--ads-v2-color-orange-700); + /** Brand primary color **/ + --ads-v2-color-bg-brand: var(--ads-v2-color-orange-600); + + /** Used as active bg when --ads-v2-color-bg-brand-secondary is the default bg */ + --ads-v2-color-bg-brand-secondary-emphasis-plus: var(--ads-v2-color-gray-600); + /** Used as hover bg when --ads-v2-color-bg-brand-secondary is the default bg */ + --ads-v2-color-bg-brand-secondary-emphasis: var(--ads-v2-color-gray-700); + /** Brand secondary color */ + --ads-v2-color-bg-brand-secondary: var(--ads-v2-color-gray-600); + + /** Used for tooltips or any high contrast components */ + --ads-v2-color-bg-emphasis-max: var(--ads-v2-color-gray-800); + /** Used for hover state for components without border */ + --ads-v2-color-bg-emphasis-plus: var(--ads-v2-color-gray-400); + /** Used for components without border */ + --ads-v2-color-bg-emphasis: var(--ads-v2-color-gray-300); + /** Default BG */ + --ads-v2-color-bg: var(--ads-v2-color-white); + /* Used for emphasis default bg */ + --ads-v2-color-bg-muted: var(--ads-v2-color-gray-200); + /** Used for disabled components */ + --ads-v2-color-bg-subtle: var(--ads-v2-color-gray-100); + + /** Used for error background active */ + --ads-v2-color-bg-error-emphasis-plus: var(--ads-v2-color-red-300); + /** Used for error background hover */ + --ads-v2-color-bg-error-emphasis: var(--ads-v2-color-red-200); + + /** Used for error background */ + --ads-v2-color-bg-error: var(--ads-v2-color-red-100); + /** Used for success background */ + --ads-v2-color-bg-success: var(--ads-v2-color-green-100); + /** Used for warning background */ + --ads-v2-color-bg-warning: var(--ads-v2-color-yellow-100); + /** Used for information background */ + --ads-v2-color-bg-information: var(--ads-v2-color-blue-100); + /** Used for special background */ + --ads-v2-color-bg-special: var(--ads-v2-color-purple-100); + /** Used for premium background */ + --ads-v2-color-bg-premium: var(--ads-v2-color-orange-50); + + /** + * ===========================================* + * ========== Foreground Colors ==============* + * ===========================================* + */ + + /** Used for content with high importance like main heading */ + --ads-v2-color-fg-emphasis-plus: var(--ads-v2-color-gray-800); + /** Used for content with lesser importance than title. Like subtitle */ + --ads-v2-color-fg-emphasis: var(--ads-v2-color-gray-700); + /** Default foreground color */ + --ads-v2-color-fg: var(--ads-v2-color-gray-600); + /** Used for content with lesser importance than body content */ + --ads-v2-color-fg-muted: var(--ads-v2-color-gray-500); + /** Used for all least important texts like placeholders, disabled text */ + --ads-v2-color-fg-subtle: var(--ads-v2-color-gray-400); + /** Text color with special meaning */ + --ads-v2-color-fg-brand: var(--ads-v2-color-orange-600); + /** Hover for text color with special meaning */ + --ads-v2-color-fg-brand-emphasis: var(--ads-v2-color-orange-700); + /** Active for text color with special meaning */ + --ads-v2-color-fg-brand-emphasis-plus: var(--ads-v2-color-orange-800); + + /** Text color for background --ads-v2-color-bg-brand */ + --ads-v2-color-fg-on-brand: var(--ads-v2-color-white); + /** Text color for background --ads-v2-color-bg-brand-secondary */ + --ads-v2-color-fg-on-brand-secondary: var(--ads-v2-color-white); + /** Text color for background --ads-v2-color-bg-emphasis-plus */ + --ads-v2-color-fg-on-emphasis-plus: var(--ads-v2-color-white); + /** Text color for background --ads-v2-color-bg-emphasis-max */ + --ads-v2-color-fg-on-emphasis-max: var(--ads-v2-color-white); + /** Text color for background --ads-v2-color-bg-error */ + --ads-v2-color-fg-on-error: var(--ads-v2-color-red-600); + /** Text color for background --ads-v2-color-bg-success */ + --ads-v2-color-fg-on-success: var(--ads-v2-color-white); + /** Text color for background --ads-v2-color-bg-warning */ + --ads-v2-color-fg-on-warning: var(--ads-v2-color-white); + + /** Foreground color for error */ + --ads-v2-color-fg-error: var(--ads-v2-color-red-600); + /** Foreground color for success */ + --ads-v2-color-fg-success: var(--ads-v2-color-green-600); + /** Foreground color for warning */ + --ads-v2-color-fg-warning: var(--ads-v2-color-yellow-600); + /** Foreground color for information*/ + --ads-v2-color-fg-information: var(--ads-v2-color-blue-600); + /** Foreground color for special */ + --ads-v2-color-fg-special: var(--ads-v2-color-purple-700); + /** Foreground color for premium */ + --ads-v2-color-fg-premium: var(--ads-v2-color-orange-600); + + /** + * ===========================================* + * ============ Border Colors ================* + * ===========================================* + */ + + /** Used for indicating active borders */ + --ads-v2-color-border-emphasis-plus: var(--ads-v2-color-gray-600); + /** Used for indicating hover borders */ + --ads-v2-color-border-emphasis: var(--ads-v2-color-gray-400); + /** Default border color */ + --ads-v2-color-border: var(--ads-v2-color-gray-300); + /** Used for indicating disabled borders and dividers */ + --ads-v2-color-border-muted: var(--ads-v2-color-gray-200); + + /** Used as active border when --ads-v2-color-bg-brand is the default bg */ + --ads-v2-color-border-brand-emphasis-plus: var(--ads-v2-color-orange-800); + /** Used as hover border when --ads-v2-color-bg-brand is the default bg */ + --ads-v2-color-border-brand-emphasis: var(--ads-v2-color-orange-700); + /** Used as active border hover color of secondary items like radio checkbox etc */ + --ads-v2-color-border-brand-secondary-emphasis: var(--ads-v2-color-gray-700); + /** Used as active border color of secondary items like radio checkbox etc */ + --ads-v2-color-border-brand-secondary: var(--ads-v2-color-gray-600); + /** Used as default border color when --ads-v2-color-bg-brand is the default bg */ + --ads-v2-color-border-brand: var(--ads-v2-color-orange-600); + /** Used for indicating error borders */ + --ads-v2-color-border-error: var(--ads-v2-color-red-400); + /** Used for indicating success borders */ + --ads-v2-color-border-success: var(--ads-v2-color-green-600); + /** Used for indicating warning borders */ + --ads-v2-color-border-warning: var(--ads-v2-color-yellow-600); + /** Used for indicating information borders */ + --ads-v2-color-border-info: var(--ads-v2-color-blue-600); + /** Used for indicating special borders */ + --ads-v2-color-border-special: var(--ads-v2-color-purple-300); + /** Used for indicating premium borders */ + --ads-v2-color-border-premium: var(--ads-v2-color-orange-300); +} diff --git a/app/client/packages/design-system/ads/src/__theme__/default/typography.css b/app/client/packages/design-system/ads/src/__theme__/default/typography.css new file mode 100644 index 000000000000..98f5b6c507f5 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__theme__/default/typography.css @@ -0,0 +1,43 @@ +@import url("../../__assets__/fonts/pt-root-ui.css"); + +:root { + /* Font Weights */ + --ads-v2-font-weight-0: 0; + --ads-v2-font-weight-normal: 400; + --ads-v2-font-weight-bold: 500; + + /* Font Sizes */ + --ads-v2-font-size-0: 10px; + --ads-v2-font-size-1: 11px; + --ads-v2-font-size-2: 12px; + --ads-v2-font-size-3: 13px; + --ads-v2-font-size-4: 14px; + --ads-v2-font-size-5: 15px; + --ads-v2-font-size-6: 16px; + --ads-v2-font-size-7: 17px; + --ads-v2-font-size-8: 18px; + --ads-v2-font-size-9: 19px; + --ads-v2-font-size-10: 20px; + --ads-v2-font-size-11: 22px; + --ads-v2-font-size-12: 24px; + --ads-v2-font-size-14: 28px; + + /* Line Heights */ + --ads-v2-line-height-0: 0px; + --ads-v2-line-height-1: 14px; + --ads-v2-line-height-2: 17px; + --ads-v2-line-height-3: 19px; + --ads-v2-line-height-4: 20px; + --ads-v2-line-height-5: 21px; + --ads-v2-line-height-6: 22px; + --ads-v2-line-height-7: 25px; + --ads-v2-line-height-8: 27px; + + /* Letter Spacings */ + --ads-v2-letter-spacing-0: -0.24; + --ads-v2-letter-spacing-1: -0.221538; + --ads-v2-letter-spacing-2: -0.204; + --ads-v2-letter-spacing-3: 0.4; + --ads-v2-letter-spacing-4: 0.6; + --ads-v2-letter-spacing-5: 0.8; +} diff --git a/app/client/packages/design-system/ads/src/__theme__/default/variables.css b/app/client/packages/design-system/ads/src/__theme__/default/variables.css new file mode 100644 index 000000000000..0318a455c0a7 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__theme__/default/variables.css @@ -0,0 +1,33 @@ +:root { + /* z-indexes */ + --ads-v2-z-index-0: 0; + --ads-v2-z-index-1: 1; + --ads-v2-z-index-2: 2; + --ads-v2-z-index-3: 3; + --ads-v2-z-index-4: 4; + --ads-v2-z-index-5: 5; + --ads-v2-z-index-6: 6; + --ads-v2-z-index-7: 7; + --ads-v2-z-index-8: 8; + --ads-v2-z-index-9: 9; + --ads-v2-z-index-10: 10; + --ads-v2-z-index-21: 21; + --ads-v2-z-index-max: 99999; + + /* Spaces */ + --ads-v2-spaces-0: 0; + --ads-v2-spaces-1: 2px; + --ads-v2-spaces-2: 4px; + --ads-v2-spaces-3: 8px; + --ads-v2-spaces-4: 12px; + --ads-v2-spaces-5: 16px; + --ads-v2-spaces-6: 20px; + --ads-v2-spaces-7: 24px; + --ads-v2-spaces-8: 28px; + --ads-v2-spaces-9: 32px; + --ads-v2-spaces-10: 36px; + --ads-v2-spaces-11: 40px; + --ads-v2-spaces-12: 44px; + --ads-v2-spaces-13: 48px; + --ads-v2-spaces-14: 52px; +} diff --git a/app/client/packages/design-system/ads/src/custom.d.ts b/app/client/packages/design-system/ads/src/custom.d.ts new file mode 100644 index 000000000000..456cb11181c8 --- /dev/null +++ b/app/client/packages/design-system/ads/src/custom.d.ts @@ -0,0 +1,11 @@ +declare module "*.svg" { + import React = require("react"); + export const ReactComponent: React.FC>; + const src: string; + export default src; +} + +declare module "*.png" { + const value: any; + export default value; +} diff --git a/app/client/packages/design-system/ads/src/index.ts b/app/client/packages/design-system/ads/src/index.ts new file mode 100644 index 000000000000..173d119074e6 --- /dev/null +++ b/app/client/packages/design-system/ads/src/index.ts @@ -0,0 +1,38 @@ +import "./__theme__/default/index.css"; + +export * from "./AnnouncementPopover"; +export * from "./AnnouncementModal"; +export * from "./Avatar"; +export * from "./Button"; +export * from "./Banner"; +export * from "./Callout"; +export * from "./Checkbox"; +export * from "./Collapsible"; +export * from "./DatePicker"; +export * from "./Divider"; +export * from "./Flex"; +export * from "./FormControl"; +export * from "./Grid"; +export * from "./Icon"; +export * from "./Input"; +export * from "./Link"; +export * from "./List"; +export * from "./Menu"; +export * from "./Modal"; +export * from "./NumberInput"; +export * from "./Popover"; +export * from "./Radio"; +export * from "./ScrollArea"; +export * from "./SearchInput"; +export * from "./SegmentedControl"; +export * from "./Select"; +export * from "./Spinner"; +export * from "./Switch"; +export * from "./Tab"; +export * from "./Table"; +export * from "./Tag"; +export * from "./Text"; +export * from "./Toast"; +export * from "./ToggleButton"; +export * from "./Tooltip"; +export * from "./ToggleButtonGroup"; diff --git a/app/client/packages/design-system/ads/tsconfig.json b/app/client/packages/design-system/ads/tsconfig.json new file mode 100644 index 000000000000..15bd9fe595bc --- /dev/null +++ b/app/client/packages/design-system/ads/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../tsconfig.json", + "include": ["./src/**/*"] +} diff --git a/app/client/packages/storybook/.storybook/addons/theming/manager.ts b/app/client/packages/storybook/.storybook/addons/theming/manager.ts index f2965ca03a42..e703d5bea777 100644 --- a/app/client/packages/storybook/.storybook/addons/theming/manager.ts +++ b/app/client/packages/storybook/.storybook/addons/theming/manager.ts @@ -6,5 +6,11 @@ addons.register("widgets/theming", () => { type: types.TOOL, title: "Theming tool", render: ThemingTool, + match: (args) => { + const { viewMode, storyId } = args; + + // show the addon only on wds + return Boolean(storyId && storyId?.includes("widgets")); + }, }); }); diff --git a/app/client/packages/storybook/.storybook/main.ts b/app/client/packages/storybook/.storybook/main.ts index 0271999d37a0..c4d6191c430f 100644 --- a/app/client/packages/storybook/.storybook/main.ts +++ b/app/client/packages/storybook/.storybook/main.ts @@ -46,13 +46,14 @@ const config: StorybookConfig = { }, }, + // in order ADS images to load correctly + staticDirs: ["../../design-system/ads/src/__assets__"], + core: { disableTelemetry: true, }, - docs: { - autodocs: true, - }, + docs: {}, }; export default config; diff --git a/app/client/packages/storybook/.storybook/preview.tsx b/app/client/packages/storybook/.storybook/preview.tsx index 6a16364f9748..d4bac02c358e 100644 --- a/app/client/packages/storybook/.storybook/preview.tsx +++ b/app/client/packages/storybook/.storybook/preview.tsx @@ -61,6 +61,7 @@ const preview = { userDensity: {}, userSizing: {}, }, + parameters: { viewport: { viewports: customViewports }, docs: { @@ -73,6 +74,8 @@ const preview = { ), }, }, + + tags: ["autodocs"] }; export default preview; diff --git a/app/client/packages/storybook/.storybook/styles.css b/app/client/packages/storybook/.storybook/styles.css index 63fbe72d7bfe..82a2464b0ade 100644 --- a/app/client/packages/storybook/.storybook/styles.css +++ b/app/client/packages/storybook/.storybook/styles.css @@ -8,6 +8,8 @@ @import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"); +@import url("design-system/src/__theme__/default/index.css"); /* This is to make theme variable available for stories */ + html, body, #storybook-root { diff --git a/app/client/packages/storybook/package.json b/app/client/packages/storybook/package.json index 606340f51005..c1a9eaa58713 100644 --- a/app/client/packages/storybook/package.json +++ b/app/client/packages/storybook/package.json @@ -8,29 +8,33 @@ "lint": "yarn g:lint", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", + "test-storybook": "test-storybook --testTimeout 40000", + "test-storybook:ci": "npx concurrently -k -s first -n 'SB,TEST' -c 'magenta,blue' 'npx http-server storybook-static --port 6006 --silent' 'npx wait-on tcp:6006 && yarn test-storybook'", "chromatic": "CHROMATIC=1 storybook dev -p 6006" }, "devDependencies": { - "@chromatic-com/storybook": "^1.3.3", - "@storybook/addon-a11y": "^8.0.8", - "@storybook/addon-controls": "^8.0.8", - "@storybook/addon-docs": "^8.0.8", - "@storybook/addon-measure": "^8.0.8", - "@storybook/addon-outline": "^8.0.8", - "@storybook/addon-toolbars": "^8.0.8", - "@storybook/addon-viewport": "^8.0.8", - "@storybook/blocks": "^8.0.8", - "@storybook/builder-vite": "^8.0.8", - "@storybook/components": "^8.0.8", - "@storybook/manager-api": "^8.0.8", - "@storybook/preset-create-react-app": "^8.0.8", - "@storybook/react-vite": "^8.0.8", - "@storybook/theming": "^8.0.8", + "@chromatic-com/storybook": "^1.6.1", + "@storybook/addon-a11y": "^8.2.6", + "@storybook/addon-controls": "^8.2.6", + "@storybook/addon-docs": "^8.2.6", + "@storybook/addon-measure": "^8.2.6", + "@storybook/addon-outline": "^8.2.6", + "@storybook/addon-toolbars": "^8.2.6", + "@storybook/addon-viewport": "^8.2.6", + "@storybook/blocks": "^8.2.6", + "@storybook/builder-vite": "^8.2.6", + "@storybook/components": "^8.2.6", + "@storybook/manager-api": "^8.2.6", + "@storybook/preset-create-react-app": "^8.2.6", + "@storybook/preview-api": "^8.2.6", + "@storybook/react-vite": "^8.2.6", + "@storybook/test-runner": "^0.19.1", + "@storybook/theming": "^8.2.6", "@vitejs/plugin-react": "^4.2.1", "babel-loader": "9.1.2", "chromatic": "^11.3.0", "react-docgen-typescript": "^2.2.2", - "storybook": "^8.0.8", + "storybook": "^8.2.6", "vite": "^5.2.9", "vite-plugin-svgr": "^4.2.0" }, diff --git a/app/client/packages/storybook/src/components/ColorTable.tsx b/app/client/packages/storybook/src/components/ColorTable.tsx index 1de401ea3f12..0800205466ad 100644 --- a/app/client/packages/storybook/src/components/ColorTable.tsx +++ b/app/client/packages/storybook/src/components/ColorTable.tsx @@ -17,11 +17,13 @@ export const ColorTable = ({ filter, isExactMatch = true, }: ColorTableProps) => { - const [seedColor, setSeedColor] = useState(defaultTokens.seedColor); - const [isDarkMode, setDarkMode] = useState(false); + const [seedColor, setSeedColor] = useState( + defaultTokens.seedColor, + ); + const [isDarkMode, setDarkMode] = useState(false); const { theme } = useTheme({ seedColor, - colorMode: isDarkMode ? "dark" : "light", + colorMode: isDarkMode != null ? "dark" : "light", }); const { color } = theme; diff --git a/app/client/packages/storybook/src/components/ThemeSettings.tsx b/app/client/packages/storybook/src/components/ThemeSettings.tsx index 864e2d118aa7..1853114613c3 100644 --- a/app/client/packages/storybook/src/components/ThemeSettings.tsx +++ b/app/client/packages/storybook/src/components/ThemeSettings.tsx @@ -25,9 +25,9 @@ const StyledSelect = styled(Form.Select)` interface ThemeSettingsProps { seedColor?: string; - setSeedColor?: (value: string) => void; + setSeedColor?: (value?: string) => void; isDarkMode?: boolean; - setDarkMode?: (value: boolean) => void; + setDarkMode?: (value?: boolean) => void; borderRadius?: string; setBorderRadius?: (value: string) => void; fontFamily?: string; @@ -54,7 +54,7 @@ export const ThemeSettings = ({ userDensity = 1, userSizing = 1, }: ThemeSettingsProps) => { - const colorChange = (value: string) => setSeedColor && setSeedColor(value); + const colorChange = (value?: string) => setSeedColor && setSeedColor(value); const debouncedSeedColorChange = useCallback(debounce(colorChange, 300), []); return ( diff --git a/app/client/packages/storybook/vite.config.js b/app/client/packages/storybook/vite.config.js index aa2b79deb239..efe79ea4f48c 100644 --- a/app/client/packages/storybook/vite.config.js +++ b/app/client/packages/storybook/vite.config.js @@ -8,7 +8,16 @@ import postcssEach from "postcss-each"; import postcssModulesValues from "postcss-modules-values"; export default defineConfig({ - plugins: [react(), svgr()], + plugins: [ + react(), + svgr({ + svgrOptions: { + exportType: "named", + ref: true, + }, + include: "**/*.svg", + }), + ], css: { postcss: { plugins: [ diff --git a/app/client/src/UITelemetry/generateTraces.ts b/app/client/src/UITelemetry/generateTraces.ts index 71b417a73217..776d132aec2f 100644 --- a/app/client/src/UITelemetry/generateTraces.ts +++ b/app/client/src/UITelemetry/generateTraces.ts @@ -11,14 +11,14 @@ import { deviceType } from "react-device-detect"; import { APP_MODE } from "entities/App"; import { matchBuilderPath, matchViewerPath } from "constants/routes"; +import memoizeOne from "memoize-one"; const GENERATOR_TRACE = "generator-tracer"; export type OtlpSpan = Span; export type SpanAttributes = Attributes; -const getCommonTelemetryAttributes = () => { - const pathname = window.location.pathname; +const getAppMode = memoizeOne((pathname: string) => { const isEditorUrl = matchBuilderPath(pathname); const isViewerUrl = matchViewerPath(pathname); @@ -27,6 +27,11 @@ const getCommonTelemetryAttributes = () => { : isViewerUrl ? APP_MODE.PUBLISHED : ""; + return appMode; +}); +const getCommonTelemetryAttributes = () => { + const pathname = window.location.pathname; + const appMode = getAppMode(pathname); return { appMode, @@ -87,6 +92,17 @@ export function setAttributesToSpan( span?.setAttributes(spanAttributes); } +export const startAndEndSpanForFn = ( + spanName: string, + spanAttributes: SpanAttributes = {}, + fn: () => T, +) => { + const span = startRootSpan(spanName, spanAttributes); + const res: T = fn(); + span.end(); + return res; +}; + export function wrapFnWithParentTraceContext(parentSpan: Span, fn: () => any) { const parentContext = trace.setSpan(context.active(), parentSpan); return context.with(parentContext, fn); diff --git a/app/client/src/WidgetProvider/factory/index.tsx b/app/client/src/WidgetProvider/factory/index.tsx index 78958ddd8a4f..967a339db52b 100644 --- a/app/client/src/WidgetProvider/factory/index.tsx +++ b/app/client/src/WidgetProvider/factory/index.tsx @@ -55,6 +55,9 @@ class WidgetFactory { Partial & WidgetConfigProps & { type: string } > = new Map(); + static widgetDefaultPropertiesMap: Map> = + new Map(); + static widgetsMap: Map = new Map(); static widgetBuilderMap: Map = new Map(); @@ -132,6 +135,18 @@ class WidgetFactory { onCanvasUI, }; + // When adding widgets to canvas in Anvil, we don't need all of configured properties + // (See _config object) + // and that should ideally be the case for Fixed mode widgets as well + // So, creating this map to use in WidgetAdditionSagas for both Fixed + // and Anvil. + // Before this we were using "ALL" configured properties when creating + // the newly added widget. This lead to many extra properties being added + // to the DSL + WidgetFactory.widgetDefaultPropertiesMap.set( + widget.type, + Object.freeze({ ...defaultConfig }), + ); WidgetFactory.widgetConfigMap.set(widget.type, Object.freeze(_config)); } diff --git a/app/client/src/ce/pages/Applications/StartWithTemplatesWrapper.tsx b/app/client/src/ce/pages/Applications/StartWithTemplatesWrapper.tsx index dcccccaecd5c..3b5559addab7 100644 --- a/app/client/src/ce/pages/Applications/StartWithTemplatesWrapper.tsx +++ b/app/client/src/ce/pages/Applications/StartWithTemplatesWrapper.tsx @@ -64,7 +64,7 @@ export const StartWithTemplatesHeader = ({ {title} {subtitle} diff --git a/app/client/src/ce/sagas/userSagas.tsx b/app/client/src/ce/sagas/userSagas.tsx index 216637e6c035..039b91a32149 100644 --- a/app/client/src/ce/sagas/userSagas.tsx +++ b/app/client/src/ce/sagas/userSagas.tsx @@ -84,7 +84,7 @@ import { USER_PROFILE_PICTURE_UPLOAD_FAILED, UPDATE_USER_DETAILS_FAILED, } from "@appsmith/constants/messages"; -import { createMessage } from "design-system-old/build/constants/messages"; +import { createMessage } from "design-system-old"; import type { ProductAlert, ProductAlertConfig, diff --git a/app/client/src/components/common/Card.tsx b/app/client/src/components/common/Card.tsx index a1fd477aeebb..6f603e24417a 100644 --- a/app/client/src/components/common/Card.tsx +++ b/app/client/src/components/common/Card.tsx @@ -350,6 +350,7 @@ function Card({ hasReadPermission={hasReadPermission} isMobile={isMobile} > + {/*@ts-expect-error fix this the next time the file is edited*/} diff --git a/app/client/src/components/editorComponents/ProductAlertBanner.tsx b/app/client/src/components/editorComponents/ProductAlertBanner.tsx index fab9f69a2cd4..d643602a97d7 100644 --- a/app/client/src/components/editorComponents/ProductAlertBanner.tsx +++ b/app/client/src/components/editorComponents/ProductAlertBanner.tsx @@ -7,7 +7,7 @@ import type { ProductAlertState, } from "reducers/uiReducers/usersReducer"; import { setMessageConfig } from "@appsmith/sagas/userSagas"; -import type { CalloutLinkProps } from "design-system/build/Callout/Callout.types"; +import type { CalloutLinkProps } from "design-system"; import moment from "moment/moment"; import { createMessage, diff --git a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/DatasourceDropdown/index.tsx b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/DatasourceDropdown/index.tsx index fe226564d753..d5677e9382b1 100644 --- a/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/DatasourceDropdown/index.tsx +++ b/app/client/src/components/editorComponents/WidgetQueryGeneratorForm/CommonControls/DatasourceDropdown/index.tsx @@ -134,6 +134,7 @@ function DatasourceDropdown() { data-testId="t--one-click-binding-datasource--search" onChange={onChange} size="md" + // @ts-expect-error Fix this the next time the file is edited type="text" value={searchText} /> diff --git a/app/client/src/components/editorComponents/form/fields/TextField.tsx b/app/client/src/components/editorComponents/form/fields/TextField.tsx index 04802b7f70eb..39819d280d23 100644 --- a/app/client/src/components/editorComponents/form/fields/TextField.tsx +++ b/app/client/src/components/editorComponents/form/fields/TextField.tsx @@ -17,6 +17,7 @@ class TextField extends React.Component< component={Input} type={this.props.type || "text"} {...this.props} + // @ts-expect-error fix this the next time the file is edited isDisabled={this.props.isDisabled} noValidate /> diff --git a/app/client/src/components/propertyControls/DatePickerControl.tsx b/app/client/src/components/propertyControls/DatePickerControl.tsx index 9f735a707226..d90552f6d52e 100644 --- a/app/client/src/components/propertyControls/DatePickerControl.tsx +++ b/app/client/src/components/propertyControls/DatePickerControl.tsx @@ -84,6 +84,7 @@ class DatePickerControl extends BaseControl< inputRef={this.inputRef} maxDate={this.maxDate} minDate={this.minDate} + // @ts-expect-error types methods and component do not match onChange={this.onDateSelected} parseDate={this.parseDate} placeholderText="YYYY-MM-DD HH:mm" diff --git a/app/client/src/components/propertyControls/KeyValueComponent.tsx b/app/client/src/components/propertyControls/KeyValueComponent.tsx index ab9ef69223e1..672ff159d680 100644 --- a/app/client/src/components/propertyControls/KeyValueComponent.tsx +++ b/app/client/src/components/propertyControls/KeyValueComponent.tsx @@ -186,6 +186,7 @@ export function KeyValueComponent(props: KeyValueComponentProps) { }} onFocus={onInputFocus} placeholder={"Name"} + // @ts-expect-error fix this the next time the file is edited value={pair.label} /> diff --git a/app/client/src/index.css b/app/client/src/index.css index c8b89ff82510..31433c7583c3 100755 --- a/app/client/src/index.css +++ b/app/client/src/index.css @@ -1,8 +1,6 @@ @import "~normalize.css"; @import "~@blueprintjs/core/lib/css/blueprint.css"; @import "~@blueprintjs/icons/lib/css/blueprint-icons.css"; -@import "~design-system-old/build/css/design-system-old.css"; -@import "~design-system/build/css/design-system.css"; @import "theme/colors.css"; @import "theme/defaultTheme.css"; @import "theme/wds.css"; diff --git a/app/client/src/index.tsx b/app/client/src/index.tsx index 30891d5c3fc0..49c037e0be40 100755 --- a/app/client/src/index.tsx +++ b/app/client/src/index.tsx @@ -6,6 +6,8 @@ import "./wdyr"; import ReactDOM from "react-dom"; import { Provider } from "react-redux"; import "./index.css"; +import "design-system/src/__theme__/default/index.css"; +import "design-system-old/src/themes/default/index.css"; import { ThemeProvider } from "styled-components"; import { appInitializer } from "utils/AppUtils"; import store, { runSagaMiddleware } from "./store"; diff --git a/app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/anvilDraggingSagas.test.ts b/app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/anvilDraggingSagas.test.ts index fb1ffd3ab6b4..ee8ec1ea6694 100644 --- a/app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/anvilDraggingSagas.test.ts +++ b/app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/anvilDraggingSagas.test.ts @@ -1,5 +1,5 @@ import { select } from "redux-saga/effects"; -import { addWidgetsSaga, moveWidgetsSaga } from "."; +import { moveWidgetsSaga } from "."; import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants"; import { generateReactKey } from "@shared/dsl/src/migrate/utils"; import { LayoutComponentTypes } from "layoutSystems/anvil/utils/anvilTypes"; @@ -33,6 +33,7 @@ import { ResponsiveBehavior, } from "layoutSystems/common/utils/constants"; import { mockAnvilHighlightInfo } from "mocks/mockHighlightInfo"; +import { addWidgetsSaga } from "../anvilWidgetAdditionSagas"; describe("", () => { beforeAll(() => { diff --git a/app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/helpers.ts b/app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/helpers.ts new file mode 100644 index 000000000000..81c97cff964d --- /dev/null +++ b/app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/helpers.ts @@ -0,0 +1,32 @@ +import type { WidgetProps } from "widgets/BaseWidget"; +import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants"; +import { FlexLayerAlignment } from "layoutSystems/common/utils/constants"; +import { select } from "redux-saga/effects"; +import { getWidget } from "sagas/selectors"; + +// Function to retrieve highlighting information for the last row in the main canvas layout +export function* getMainCanvasLastRowHighlight() { + // Retrieve the main canvas widget + const mainCanvas: WidgetProps = yield select( + getWidget, + MAIN_CONTAINER_WIDGET_ID, + ); + + const layoutId: string = mainCanvas.layout[0].layoutId; + const layoutOrder = [layoutId]; + const rowIndex = mainCanvas.layout[0].layout.length; + + // Return the highlighting information for the last row in the main canvas + return { + canvasId: MAIN_CONTAINER_WIDGET_ID, + layoutOrder, + rowIndex, + posX: 0, + posY: 0, + alignment: FlexLayerAlignment.Start, + dropZone: {}, + height: 0, + width: 0, + isVertical: false, + }; +} diff --git a/app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/index.ts b/app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/index.ts index 2b5c1b5e2bf5..4b011417219e 100644 --- a/app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/index.ts +++ b/app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/index.ts @@ -8,38 +8,13 @@ import { all, call, put, select, takeLatest } from "redux-saga/effects"; import type { AnvilHighlightInfo, DraggedWidget, - WidgetLayoutProps, } from "layoutSystems/anvil/utils/anvilTypes"; -import { getWidget, getWidgets } from "sagas/selectors"; -import { addWidgetsToPreset } from "../../../utils/layouts/update/additionUtils"; -import type { - AnvilMoveWidgetsPayload, - AnvilNewWidgetsPayload, -} from "../../actions/actionTypes"; +import { getWidgets } from "sagas/selectors"; +import type { AnvilMoveWidgetsPayload } from "../../actions/actionTypes"; import { AnvilReduxActionTypes } from "../../actions/actionTypes"; -import { generateDefaultLayoutPreset } from "layoutSystems/anvil/layoutComponents/presets/DefaultLayoutPreset"; -import { selectWidgetInitAction } from "actions/widgetSelectionActions"; -import { SelectionRequestType } from "sagas/WidgetSelectUtils"; -import { - addDetachedWidgetToMainCanvas, - addWidgetsToMainCanvasLayout, - moveWidgetsToMainCanvas, -} from "layoutSystems/anvil/utils/layouts/update/mainCanvasLayoutUtils"; -import type { WidgetProps } from "widgets/BaseWidget"; -import { - GridDefaults, - MAIN_CONTAINER_WIDGET_ID, -} from "constants/WidgetConstants"; -import { FlexLayerAlignment } from "layoutSystems/common/utils/constants"; -import { - addWidgetsToSection, - moveWidgetsToSection, -} from "layoutSystems/anvil/utils/layouts/update/sectionUtils"; -import { WDS_V2_WIDGET_MAP } from "widgets/wds/constants"; -import { - addNewWidgetToDsl, - getCreateWidgetPayload, -} from "layoutSystems/anvil/utils/widgetAdditionUtils"; +import { moveWidgetsToMainCanvas } from "layoutSystems/anvil/utils/layouts/update/mainCanvasLayoutUtils"; + +import { moveWidgetsToSection } from "layoutSystems/anvil/utils/layouts/update/sectionUtils"; import { updateAndSaveAnvilLayout } from "../../../utils/anvilChecksUtils"; import { isRedundantZoneWidget, @@ -49,259 +24,6 @@ import { import { severTiesFromParents } from "../../../utils/layouts/update/moveUtils"; import { widgetChildren } from "../../../utils/layouts/widgetUtils"; -// Function to retrieve highlighting information for the last row in the main canvas layout -export function* getMainCanvasLastRowHighlight() { - // Retrieve the main canvas widget - const mainCanvas: WidgetProps = yield select( - getWidget, - MAIN_CONTAINER_WIDGET_ID, - ); - - // Extract the layout ID and row index for the last row in the main canvas - const layoutId: string = mainCanvas.layout[0].layoutId; - const layoutOrder = [layoutId]; - const rowIndex = mainCanvas.layout[0].layout.length; - - // Return the highlighting information for the last row in the main canvas - return { - canvasId: MAIN_CONTAINER_WIDGET_ID, - layoutOrder, - rowIndex, - posX: 0, - posY: 0, - alignment: FlexLayerAlignment.Start, - dropZone: {}, - height: 0, - width: 0, - isVertical: false, - }; -} - -// function to handle adding suggested widgets to the Anvil canvas -function* addSuggestedWidgetsAnvilSaga( - actionPayload: ReduxAction<{ - newWidget: { - newWidgetId: string; - type: string; - rows?: number; - columns?: number; - props: WidgetProps; - detachFromLayout: boolean; - }; - }>, -) { - const { newWidget } = actionPayload.payload; - - // Find the corresponding WDS entry for the given widget type - const wdsEntry = Object.entries(WDS_V2_WIDGET_MAP).find( - ([legacyType]) => legacyType === newWidget.type, - ); - - // If a matching WDS entry is found, proceed with adding the suggested widget - if (wdsEntry) { - // Extract the WDS type for the suggested widget - const [, wdsType] = wdsEntry; - - // Define parameters for the new widget based on the WDS type and provided dimensions - const newWidgetParams = { - width: (newWidget.rows || 0 / GridDefaults.DEFAULT_GRID_COLUMNS) * 100, - height: newWidget.columns || 0 * GridDefaults.DEFAULT_GRID_ROW_HEIGHT, - newWidgetId: newWidget.newWidgetId, - parentId: MAIN_CONTAINER_WIDGET_ID, - type: wdsType, - detachFromLayout: newWidget.detachFromLayout, - }; - - // Get highlighting information for the last row in the main canvas - const mainCanvasHighLight: AnvilHighlightInfo = yield call( - getMainCanvasLastRowHighlight, - ); - - // Add the new widget to the DSL - const updatedWidgets: CanvasWidgetsReduxState = yield call( - addNewChildToDSL, - mainCanvasHighLight, - newWidgetParams, - true, - false, - ); - - // Update the widget properties with the properties provided in the action payload - updatedWidgets[newWidgetParams.newWidgetId] = { - ...updatedWidgets[newWidgetParams.newWidgetId], - ...newWidget.props, - }; - - // Save the updated Anvil layout - yield call(updateAndSaveAnvilLayout, updatedWidgets); - - // Select the added widget - yield put( - selectWidgetInitAction(SelectionRequestType.One, [ - newWidgetParams.newWidgetId, - ]), - ); - } -} - -// function to add a new child widget to the DSL -export function* addNewChildToDSL( - highlight: AnvilHighlightInfo, // Highlight information for the drop zone - newWidget: { - width: number; - height: number; - newWidgetId: string; - type: string; - detachFromLayout: boolean; - }, - isMainCanvas: boolean, // Indicates if the drop zone is the main canvas - isSection: boolean, // Indicates if the drop zone is a section -) { - const { alignment, canvasId } = highlight; - const allWidgets: CanvasWidgetsReduxState = yield select(getWidgets); - - const parentWidgetWithLayout = allWidgets[canvasId]; - let updatedWidgets: CanvasWidgetsReduxState = { ...allWidgets }; - - const draggedWidgets: WidgetLayoutProps[] = [ - { - alignment, - widgetId: newWidget.newWidgetId, - widgetType: newWidget.type, - }, - ]; - - if (newWidget.detachFromLayout) { - updatedWidgets = yield call(addDetachedWidgetToMainCanvas, updatedWidgets, { - widgetId: newWidget.newWidgetId, - type: newWidget.type, - }); - } else { - // Handle different scenarios based on the drop zone type (main canvas, section, or generic layout) - if (!!isMainCanvas || parentWidgetWithLayout.detachFromLayout) { - updatedWidgets = yield call( - addWidgetsToMainCanvasLayout, - updatedWidgets, - draggedWidgets, - highlight, - ); - } else if (!!isSection) { - const res: { canvasWidgets: CanvasWidgetsReduxState } = yield call( - addWidgetsToSection, - updatedWidgets, - draggedWidgets, - highlight, - updatedWidgets[canvasId], - ); - updatedWidgets = res.canvasWidgets; - } else { - updatedWidgets = yield call( - addWidgetToGenericLayout, - updatedWidgets, - draggedWidgets, - highlight, - newWidget, - ); - } - } - return updatedWidgets; -} - -// function to handle the addition of new widgets to the Anvil layout -export function* addWidgetsSaga( - actionPayload: ReduxAction, -) { - try { - const start = performance.now(); - - const { - dragMeta: { draggedOn }, - highlight, - newWidget, - } = actionPayload.payload; - // Check if the drop zone is the main canvas - const isMainCanvas = draggedOn === "MAIN_CANVAS"; - // Check if the drop zone is a section - const isSection = draggedOn === "SECTION"; - - // Call the addNewChildToDSL saga to perform the actual addition of the new widget to the DSL - const updatedWidgets: CanvasWidgetsReduxState = yield call( - addNewChildToDSL, - highlight, - newWidget, - !!isMainCanvas, - !!isSection, - ); - - // Save the updated Anvil layout - yield call(updateAndSaveAnvilLayout, updatedWidgets); - - // Select the newly added widget - yield put( - selectWidgetInitAction(SelectionRequestType.Create, [ - newWidget.newWidgetId, - ]), - ); - - log.debug("Anvil: add new widget took", performance.now() - start, "ms"); - } catch (error) { - yield put({ - type: ReduxActionErrorTypes.WIDGET_OPERATION_ERROR, - payload: { - action: AnvilReduxActionTypes.ANVIL_ADD_NEW_WIDGET, - error, - }, - }); - } -} - -function* addWidgetToGenericLayout( - allWidgets: CanvasWidgetsReduxState, - draggedWidgets: WidgetLayoutProps[], - highlight: AnvilHighlightInfo, - newWidget: { - width: number; - height: number; - newWidgetId: string; - type: string; - }, -) { - let updatedWidgets: CanvasWidgetsReduxState = { ...allWidgets }; - const canvasWidget = updatedWidgets[highlight.canvasId]; - const canvasLayout = canvasWidget.layout - ? canvasWidget.layout - : generateDefaultLayoutPreset(); - - /** - * Create widget and add to parent. - */ - updatedWidgets = yield call( - addNewWidgetToDsl, - updatedWidgets, - getCreateWidgetPayload( - newWidget.newWidgetId, - newWidget.type, - canvasWidget.widgetId, - ), - ); - /** - * Also add it to parent's layout. - */ - return { - ...updatedWidgets, - [canvasWidget.widgetId]: { - ...updatedWidgets[canvasWidget.widgetId], - layout: addWidgetsToPreset(canvasLayout, highlight, draggedWidgets), - }, - [newWidget.newWidgetId]: { - ...updatedWidgets[newWidget.newWidgetId], - // This is a temp fix, widget dimensions will be self computed by widgets - height: newWidget.height, - width: newWidget.width, - }, - }; -} - /** * Remove widgets from current parents and layouts. * Add to new parent and layout. @@ -421,11 +143,6 @@ export function handleDeleteRedundantZones( export default function* anvilDraggingSagas() { yield all([ - takeLatest(AnvilReduxActionTypes.ANVIL_ADD_NEW_WIDGET, addWidgetsSaga), takeLatest(AnvilReduxActionTypes.ANVIL_MOVE_WIDGET, moveWidgetsSaga), - takeLatest( - AnvilReduxActionTypes.ANVIL_ADD_SUGGESTED_WIDGET, - addSuggestedWidgetsAnvilSaga, - ), ]); } diff --git a/app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers.test.ts b/app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers.test.ts new file mode 100644 index 000000000000..c702495c8e20 --- /dev/null +++ b/app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers.test.ts @@ -0,0 +1,196 @@ +import type { WidgetProps } from "widgets/BaseWidget"; +import { + addChildReferenceToParent, + getUniqueWidgetName, + runBlueprintOperationsOnWidgets, + updateWidgetListWithNewWidget, +} from "./helpers"; +import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer"; +import { BlueprintOperationTypes } from "WidgetProvider/constants"; +import { expectSaga } from "redux-saga-test-plan"; +import { select } from "redux-saga/effects"; +import { getDataTree } from "selectors/dataTreeSelectors"; +import { getLayoutSystemType } from "selectors/layoutSystemSelectors"; +import WidgetFactory from "WidgetProvider/factory"; + +describe("addChildReferenceToParent", () => { + it("should add a new child reference to the parent widget", () => { + const widgets: Record> = { + parentId: { + widgetId: "parentId", + children: [], + }, + childWidgetId: { + widgetId: "childWidgetId", + }, + }; + + const updatedWidgets = addChildReferenceToParent( + widgets as CanvasWidgetsReduxState, + "parentId", + "childWidgetId", + ); + + expect(updatedWidgets["parentId"].children).toContain("childWidgetId"); + }); + + it("should handle parent widget without children property", () => { + const widgets: Record> = { + parentId: { + widgetId: "parentId", + }, + childWidgetId: { + widgetId: "childWidgetId", + }, + }; + + const updatedWidgets = addChildReferenceToParent( + widgets as CanvasWidgetsReduxState, + "parentId", + "childWidgetId", + ); + + expect(updatedWidgets["parentId"].children).toContain("childWidgetId"); + }); +}); + +describe("getUniqueWidgetName", () => { + it("should generate a unique widget name within the dataTree", async () => { + const prefix = "widget"; + const result = await expectSaga(getUniqueWidgetName, prefix) + .provide([[select(getDataTree), { someWidget: {} }]]) + .run(); + + expect(result.returnValue).toBe("widget1"); + }); + + it("should handle multiple widgets with the same prefix", async () => { + const prefix = "widget"; + const result = await expectSaga(getUniqueWidgetName, prefix) + .provide([[select(getDataTree), { widget1: {}, widget2: {} }]]) + .run(); + + expect(result.returnValue).toBe("widget3"); + }); +}); + +describe("runBlueprintOperationsOnWidgets", () => { + it("should call executeWidgetBlueprintOperations with the blueprint operations and widgets", async () => { + const widgets: Record> = { + widgetId: { + widgetId: "widgetId", + }, + }; + const blueprint = { + operations: [ + { + type: BlueprintOperationTypes.MODIFY_PROPS, + fn: () => [ + { + widgetId: "widgetId", + propertyName: "isOpen", + propertyValue: true, + }, + ], + }, + ], + }; + + const expected = { + widgetId: { + widgetId: "widgetId", + isOpen: true, + }, + }; + + const result = await expectSaga( + runBlueprintOperationsOnWidgets, + widgets as CanvasWidgetsReduxState, + "widgetId", + blueprint, + ) + .provide([[select(getLayoutSystemType), "ANVIL"]]) + .run(); + + expect(result.returnValue).toStrictEqual(expected); + }); +}); + +describe("updateWidgetListWithNewWidget", () => { + it("should updated list of widgets correctly with the new widget", async () => { + const blueprint = { + operations: [ + { + type: BlueprintOperationTypes.MODIFY_PROPS, + fn: () => [ + { + widgetId: "newWidgetId", + propertyName: "isOpen", + propertyValue: true, + }, + ], + }, + ], + }; + WidgetFactory.widgetDefaultPropertiesMap.get = jest.fn(() => ({ + someRandomProperty: "random", + widgetName: "widgetName", + version: 1, + blueprint, + })); + + const params = { + parentId: "parentId", + widgetId: "newWidgetId", + type: "widgetType", + }; + + const widgets: Record> = { + parentId: { + widgetId: "parentId", + widgetName: "parentWidget", + }, + existingWidget: { + widgetName: "widgetName", + widgetId: "existingWidget", + }, + }; + + const expected = { + parentId: { + widgetId: "parentId", + children: ["newWidgetId"], + widgetName: "parentWidget", + }, + newWidgetId: { + someRandomProperty: "random", + widgetName: "widgetName1", + parentId: "parentId", + widgetId: "newWidgetId", + type: "widgetType", + isOpen: true, + version: 1, + blueprint: undefined, + rows: undefined, + columns: undefined, + }, + existingWidget: { + widgetName: "widgetName", + widgetId: "existingWidget", + }, + }; + + const result = await expectSaga( + updateWidgetListWithNewWidget as any, + params, + widgets as CanvasWidgetsReduxState, + ) + .provide([ + [select(getDataTree), { existingWidget: {}, parentWidget: {} }], + [select(getLayoutSystemType), "ANVIL"], + ]) + .run(); + + expect(result.returnValue).toStrictEqual(expected); + }); +}); diff --git a/app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers.ts b/app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers.ts new file mode 100644 index 000000000000..0451da37713c --- /dev/null +++ b/app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers.ts @@ -0,0 +1,249 @@ +import type { + FlattenedWidgetProps, + WidgetBlueprint, +} from "WidgetProvider/constants"; +import { getNextEntityName } from "utils/AppsmithUtils"; +import type { DataTree } from "entities/DataTree/dataTreeTypes"; +import { getDataTree } from "selectors/dataTreeSelectors"; +import WidgetFactory from "WidgetProvider/factory"; +import { executeWidgetBlueprintOperations } from "sagas/WidgetBlueprintSagas"; +import { call, put, select } from "redux-saga/effects"; +import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer"; +import AppsmithConsole from "utils/AppsmithConsole"; +import { ENTITY_TYPE } from "@appsmith/entities/AppsmithConsole/utils"; +import { WidgetReduxActionTypes } from "@appsmith/constants/ReduxActionConstants"; + +/** + * In Anvil, we maintain some properties set by users on widgets. + * When a similar or same widget is added to the Canvas, we retrieve these + * properties and apply them. + * This is to assist users by automatically apply settings based on context. + + * Retrieves the values from session storage for the widget properties + * for hydration of the widget when we create widget on drop + */ +export function getWidgetSessionValues( + type: string, + parent: FlattenedWidgetProps, +) { + // For WDS_INLINE_BUTTONS_WIDGET, we want to hydation only to work when we add more items to the inline button group. + // So we don't want to hydrate the values when we drop the widget on the canvas. + if (["WDS_INLINE_BUTTONS_WIDGET"].includes(type)) return; + + let widgetType = type; + const configMap = WidgetFactory.widgetConfigMap.get(type); + + const widgetSessionValues: any = {}; + + // in case we are dropping WDS_ICON_BUTTON_WIDGET, we want to reuse the values of BUTTON_WIDGET + if (type === "WDS_ICON_BUTTON_WIDGET") { + widgetType = "WDS_BUTTON_WIDGET"; + } + + for (const key in configMap) { + if (configMap[key] === undefined) continue; + let sessionStorageKey = `${widgetType}.${key}`; + + if (type === "ZONE_WIDGET") { + sessionStorageKey = `${widgetType}.${parent.widgetId}.${key}`; + } + + let valueFromSession: any = sessionStorage.getItem(sessionStorageKey); + + // parse "true" as true and "false" as false + if (valueFromSession === "true") { + valueFromSession = true; + } else if (valueFromSession === "false") { + valueFromSession = false; + } + + if (valueFromSession !== undefined && valueFromSession !== null) { + widgetSessionValues[key] = valueFromSession; + } + } + + return widgetSessionValues; +} + +export function* getUniqueWidgetName(prefix: string) { + // The dataTree contains all entities (widgets, actions, etc). + // We need to make sure that none of the entities have the same name + // as the evaluations use the names of the entities as the unique identifier + // for entities. + const evalTree: DataTree = yield select(getDataTree); + const entityNames = Object.keys(evalTree); + + // Get a new widget name that doesn't conflict with any existing entity names + const widgetName = getNextEntityName( + prefix, // The widget name prefix configured by the widget + entityNames, + ); + return widgetName; +} + +/** + * This generator function runs the blueprint operations configured in the new + * widget being added. + * @param widgets Canvas Widgets + * @param widgetId Widget Id of the new widget being added + * @param blueprint The configured operations to be run on the list of widgets + * @returns An updated list of widgets + */ +export function* runBlueprintOperationsOnWidgets( + widgets: CanvasWidgetsReduxState, + widgetId: string, + blueprint?: WidgetBlueprint, +) { + if (!blueprint?.operations || blueprint.operations.length === 0) { + return widgets; + } + // Some widgets need to run a few operations like modifying props or adding an action + // these operations can be performed on the parent of the widget we're adding + // therefore, we pass all widgets to executeWidgetBlueprintOperations + // blueprint.operations contain the set of operations to perform to update the canvasWidgets + // The blueprint operations configuration can be found in the default configurations of the widgets + // Finalize the canvasWidgets with everything that needs to be updated + const updatedWidgets: CanvasWidgetsReduxState = yield call( + executeWidgetBlueprintOperations, + blueprint.operations, + widgets, + widgetId, + ); + return updatedWidgets; +} + +/** + * This function helps reference the new widget in the list of children + * of the existing parent widget + * @param widgets Canvas Widgets + * @param parentId Parent into which the new widget is added + * @param newChildWidgetId WidgetId of the new child widget + * @returns An updated list of widgets + */ +export function addChildReferenceToParent( + widgets: CanvasWidgetsReduxState, + parentId: string, + newChildWidgetId: string, +): CanvasWidgetsReduxState { + const stateParent = widgets[parentId]; + // Update widgets to put back in the canvasWidgetsReducer + const parent = { + ...stateParent, + children: [...(stateParent.children || []), newChildWidgetId], + }; + + widgets[parent.widgetId] = parent; + return widgets; +} + +/** + * This helper generator function adds all properties to the new widget so that + * it can be used in the application. The return value will eventually be stored + * in the CanvasWidgetsReducer (normalised) and the servers (DSL - denormalised) + * @param params The new widget's id, the parent whose child it is, and the type of the widget + * @param widgets The list of widgets in which we will add the new widget + * @returns An Object with the new list of widgets that also contains the new widget + */ +export function* updateWidgetListWithNewWidget( + params: { + parentId: string; + type: string; + widgetId: string; + }, + widgets: CanvasWidgetsReduxState, +) { + const { parentId, type, widgetId } = params; + + // Get default properties of the widget configured by the widget + const widgetDefaultProperties = WidgetFactory.widgetDefaultPropertiesMap.get( + type, + ) as Record; + + // Hydrate widget with properties based previously configured values of similar widgets + const widgetSessionValues = getWidgetSessionValues(type, widgets[parentId]); + + // Get a unique name for the new widget + const widgetName: string = yield getUniqueWidgetName( + widgetDefaultProperties.widgetName as string, + ); + + const widget = { + ...widgetDefaultProperties, + parentId, + widgetId, + type, + widgetName, + version: widgetDefaultProperties.version, + ...widgetSessionValues, // This is at the end of the spread to override + blueprint: undefined, // This is usually non-serializable and needs to be removed + rows: undefined, + columns: undefined, + }; + + // Add the widget to the canvasWidgets (type: CanvasWidgetsReduxState) + widgets[widget.widgetId] = widget; + + // Run blueprint operations an update the list of widgets + let updatedWidgets: CanvasWidgetsReduxState = + yield runBlueprintOperationsOnWidgets( + widgets, + widgetId, + widgetDefaultProperties.blueprint as WidgetBlueprint | undefined, + ); + + // Reference new widget in the parent widget + updatedWidgets = addChildReferenceToParent( + updatedWidgets, + parentId, + widgetId, + ); + + return updatedWidgets; +} + +/** + * This is a general orchestrator generator function that calls the appropriate + * operations to complete the addition of new widget into the list of widgets in + * the system + * @param stateWidgets The list of widgets from redux state + * @param payload Payload of the redux action that will be used to create the new child widget + * @returns An updated list of widgets + */ +export function* addNewAnvilWidgetToDSL( + widgets: CanvasWidgetsReduxState, + payload: { + parentId: string; + type: string; + widgetId: string; + }, +) { + const { type, widgetId } = payload; + + const updatedWidgets: CanvasWidgetsReduxState = + yield updateWidgetListWithNewWidget(payload, widgets); + + // We need to have a separate helper which listens to specific redux actions + // and updates the console accordingly. Doing it here doesn't seem right. + // In this case we may listen to `WIDGET_CHILD_ADDED` action. + // https://github.com/appsmithorg/appsmith/issues/35161 + AppsmithConsole.info({ + text: "Widget was created", + source: { + type: ENTITY_TYPE.WIDGET, + id: widgetId, + name: updatedWidgets[widgetId].widgetName, + }, + }); + + // This redux action seems useless, but it is possible that evaluations + // uses this to trigger evaluations. + yield put({ + type: WidgetReduxActionTypes.WIDGET_CHILD_ADDED, + payload: { + widgetId: widgetId, + type: type, + }, + }); + + return updatedWidgets; +} diff --git a/app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/index.ts b/app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/index.ts new file mode 100644 index 000000000000..ee43487e60fd --- /dev/null +++ b/app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/index.ts @@ -0,0 +1,265 @@ +import { all, call, put, select, takeLatest } from "redux-saga/effects"; +import type { AnvilNewWidgetsPayload } from "../../actions/actionTypes"; +import { AnvilReduxActionTypes } from "../../actions/actionTypes"; +import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer"; +import type { + AnvilHighlightInfo, + WidgetLayoutProps, +} from "layoutSystems/anvil/utils/anvilTypes"; +import { + ReduxActionErrorTypes, + type ReduxAction, +} from "@appsmith/constants/ReduxActionConstants"; +import type { WidgetProps } from "widgets/BaseWidget"; +import { WDS_V2_WIDGET_MAP } from "widgets/wds/constants"; +import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants"; +import { getMainCanvasLastRowHighlight } from "../anvilDraggingSagas/helpers"; +import { updateAndSaveAnvilLayout } from "layoutSystems/anvil/utils/anvilChecksUtils"; +import { selectWidgetInitAction } from "actions/widgetSelectionActions"; +import { SelectionRequestType } from "sagas/WidgetSelectUtils"; +import { getWidgets } from "sagas/selectors"; +import { + addDetachedWidgetToMainCanvas, + addWidgetsToMainCanvasLayout, +} from "layoutSystems/anvil/utils/layouts/update/mainCanvasLayoutUtils"; +import { addWidgetsToSection } from "layoutSystems/anvil/utils/layouts/update/sectionUtils"; +import log from "loglevel"; +import { generateDefaultLayoutPreset } from "layoutSystems/anvil/layoutComponents/presets/DefaultLayoutPreset"; +import { addWidgetsToPreset } from "layoutSystems/anvil/utils/layouts/update/additionUtils"; +import { addNewAnvilWidgetToDSL } from "./helpers"; + +// The suggested widget functionality allows users to bind data from the Query pane +// to a new or existing widget on the Canvas. +// This saga handles the necessary logic to add an the suggested widget to an Anvil canvas +function* addSuggestedWidgetToDSL( + actionPayload: ReduxAction<{ + newWidget: { + newWidgetId: string; + type: string; + props: WidgetProps; + detachFromLayout: boolean; + }; + }>, +) { + try { + const { newWidget } = actionPayload.payload; + + // Find the corresponding WDS entry for the given widget type + const wdsEntry = Object.entries(WDS_V2_WIDGET_MAP).find( + ([legacyType]) => legacyType === newWidget.type, + ); + + // If a matching WDS entry is found, proceed with adding the suggested widget + if (wdsEntry) { + // Extract the WDS type for the suggested widget + const [, wdsType] = wdsEntry; + + // Define parameters for the new widget based on the WDS type and provided dimensions + const newWidgetParams = { + newWidgetId: newWidget.newWidgetId, + parentId: MAIN_CONTAINER_WIDGET_ID, + type: wdsType, + detachFromLayout: newWidget.detachFromLayout, + }; + + // Get highlighting information for the last row in the main canvas + const mainCanvasHighLight: AnvilHighlightInfo = yield call( + getMainCanvasLastRowHighlight, + ); + + // Add the new widget to the DSL + const updatedWidgets: CanvasWidgetsReduxState = + yield getUpdatedListOfWidgetsAfterAddingNewWidget( + mainCanvasHighLight, + newWidgetParams, + true, + false, + ); + + // Update the widget properties with the properties provided in the action payload + updatedWidgets[newWidgetParams.newWidgetId] = { + ...updatedWidgets[newWidgetParams.newWidgetId], + ...newWidget.props, + }; + + // Save the updated Anvil layout + yield call(updateAndSaveAnvilLayout, updatedWidgets); + + // Select the added widget + yield put( + selectWidgetInitAction(SelectionRequestType.One, [ + newWidgetParams.newWidgetId, + ]), + ); + } + } catch (e) { + log.debug("Error adding suggested widget to Anvil Canvas: ", e); + } +} + +// function to add a new child widget to the DSL +export function* getUpdatedListOfWidgetsAfterAddingNewWidget( + highlight: AnvilHighlightInfo, // Highlight information for the drop zone + newWidget: { + newWidgetId: string; + type: string; + detachFromLayout: boolean; + }, + isMainCanvas: boolean, // Indicates if the drop zone is the main canvas + isSection: boolean, // Indicates if the drop zone is a section +) { + const { alignment, canvasId } = highlight; + const allWidgets: CanvasWidgetsReduxState = yield select(getWidgets); + + const parentWidgetWithLayout = allWidgets[canvasId]; + + // Creating a shallow copy of the widgets from redux state + // as these will be mutated in the course of the operation + let updatedWidgets: CanvasWidgetsReduxState = { ...allWidgets }; + + const draggedWidgets: WidgetLayoutProps[] = [ + { + alignment, + widgetId: newWidget.newWidgetId, + widgetType: newWidget.type, + }, + ]; + + // Follow the operations necessary for detached widgets like Modal Widget + if (newWidget.detachFromLayout) { + updatedWidgets = yield call(addDetachedWidgetToMainCanvas, updatedWidgets, { + widgetId: newWidget.newWidgetId, + type: newWidget.type, + }); + } else { + // Handle different scenarios based on the drop zone type (main canvas, section, or generic layout) + // If the widget is dropped in the main canvas or into a detached widget like the Modal Widget + if (isMainCanvas || parentWidgetWithLayout.detachFromLayout) { + updatedWidgets = yield call( + addWidgetsToMainCanvasLayout, + updatedWidgets, + draggedWidgets, + highlight, + ); + } else if (isSection) { + const res: { canvasWidgets: CanvasWidgetsReduxState } = yield call( + addWidgetsToSection, + updatedWidgets, + draggedWidgets, + highlight, + updatedWidgets[canvasId], + ); + updatedWidgets = res.canvasWidgets; + } else { + // The typical operation when adding widgets to a zone + updatedWidgets = yield addWidgetToGenericLayout( + updatedWidgets, + draggedWidgets, + highlight, + newWidget, + ); + } + } + return updatedWidgets; +} + +// function to handle the addition of new widgets to the Anvil layout +export function* addWidgetsSaga( + actionPayload: ReduxAction, +) { + try { + const start = performance.now(); + + const { + dragMeta: { draggedOn }, + highlight, + newWidget, + } = actionPayload.payload; + // Check if the drop zone is the main canvas + const isMainCanvas = draggedOn === "MAIN_CANVAS"; + // Check if the drop zone is a section + const isSection = draggedOn === "SECTION"; + + // Call the addNewChildToDSL saga to perform the actual addition of the new widget to the DSL + const updatedWidgets: CanvasWidgetsReduxState = yield call( + getUpdatedListOfWidgetsAfterAddingNewWidget, + highlight, + newWidget, + !!isMainCanvas, + !!isSection, + ); + + // Save the updated Anvil layout + yield call(updateAndSaveAnvilLayout, updatedWidgets); + + // Select the newly added widget + yield put( + selectWidgetInitAction(SelectionRequestType.Create, [ + newWidget.newWidgetId, + ]), + ); + + log.debug("Anvil: add new widget took", performance.now() - start, "ms"); + } catch (error) { + yield put({ + type: ReduxActionErrorTypes.WIDGET_OPERATION_ERROR, + payload: { + action: AnvilReduxActionTypes.ANVIL_ADD_NEW_WIDGET, + error, + }, + }); + } +} + +function* addWidgetToGenericLayout( + allWidgets: CanvasWidgetsReduxState, + draggedWidgets: WidgetLayoutProps[], + highlight: AnvilHighlightInfo, + newWidget: { + newWidgetId: string; + type: string; + }, +) { + let updatedWidgets: CanvasWidgetsReduxState = { ...allWidgets }; + const canvasWidget = updatedWidgets[highlight.canvasId]; + const canvasLayout = canvasWidget.layout + ? canvasWidget.layout + : generateDefaultLayoutPreset(); + + const newWidgetContext = { + widgetId: newWidget.newWidgetId, + type: newWidget.type, + parentId: canvasWidget.widgetId, + }; + + /** + * Create widget and add to parent. + */ + updatedWidgets = yield addNewAnvilWidgetToDSL( + updatedWidgets, + newWidgetContext, + ); + /** + * Also add it to parent's layout. + */ + return { + ...updatedWidgets, + [canvasWidget.widgetId]: { + ...updatedWidgets[canvasWidget.widgetId], + layout: addWidgetsToPreset(canvasLayout, highlight, draggedWidgets), + }, + [newWidget.newWidgetId]: { + ...updatedWidgets[newWidget.newWidgetId], + }, + }; +} + +export default function* anvilWidgetAdditionSagas() { + yield all([ + takeLatest(AnvilReduxActionTypes.ANVIL_ADD_NEW_WIDGET, addWidgetsSaga), + takeLatest( + AnvilReduxActionTypes.ANVIL_ADD_SUGGESTED_WIDGET, + addSuggestedWidgetToDSL, + ), + ]); +} diff --git a/app/client/src/layoutSystems/anvil/integrations/sagas/index.ts b/app/client/src/layoutSystems/anvil/integrations/sagas/index.ts index 69337fd560eb..d4851b070027 100644 --- a/app/client/src/layoutSystems/anvil/integrations/sagas/index.ts +++ b/app/client/src/layoutSystems/anvil/integrations/sagas/index.ts @@ -5,6 +5,7 @@ import anvilSectionSagas from "./sectionSagas"; import anvilSpaceDistributionSagas from "./anvilSpaceDistributionSagas"; import anvilWidgetSelectionSaga from "./anvilWidgetSelectionSaga"; import pasteSagas from "./pasteSagas"; +import anvilWidgetAdditionSagas from "./anvilWidgetAdditionSagas"; export default function* anvilSagas() { yield fork(LayoutElementPositionsSaga); @@ -13,4 +14,5 @@ export default function* anvilSagas() { yield fork(anvilSpaceDistributionSagas); yield fork(anvilWidgetSelectionSaga); yield fork(pasteSagas); + yield fork(anvilWidgetAdditionSagas); } diff --git a/app/client/src/layoutSystems/anvil/layoutComponents/presets/sectionPreset.tsx b/app/client/src/layoutSystems/anvil/layoutComponents/presets/sectionPreset.tsx index be5c56b2d451..5b792fb6366b 100644 --- a/app/client/src/layoutSystems/anvil/layoutComponents/presets/sectionPreset.tsx +++ b/app/client/src/layoutSystems/anvil/layoutComponents/presets/sectionPreset.tsx @@ -12,9 +12,6 @@ export const sectionPreset = (): LayoutProps[] => { isPermanent: true, layout: [], layoutId: generateReactKey(), - layoutStyle: { - border: "none", - }, layoutType: LayoutComponentTypes.SECTION, maxChildLimit: 4, }, diff --git a/app/client/src/layoutSystems/anvil/layoutComponents/presets/zonePreset.tsx b/app/client/src/layoutSystems/anvil/layoutComponents/presets/zonePreset.tsx index 05a84d31293a..52d1e740a580 100644 --- a/app/client/src/layoutSystems/anvil/layoutComponents/presets/zonePreset.tsx +++ b/app/client/src/layoutSystems/anvil/layoutComponents/presets/zonePreset.tsx @@ -12,10 +12,6 @@ export const zonePreset = (): LayoutProps[] => { isPermanent: true, layout: [], layoutId: generateReactKey(), - layoutStyle: { - border: "none", - height: "100%", - }, layoutType: LayoutComponentTypes.ZONE, }, ]; diff --git a/app/client/src/layoutSystems/anvil/utils/layouts/update/mainCanvasLayoutUtils.ts b/app/client/src/layoutSystems/anvil/utils/layouts/update/mainCanvasLayoutUtils.ts index 5465a6cfaf03..647e0fb323ba 100644 --- a/app/client/src/layoutSystems/anvil/utils/layouts/update/mainCanvasLayoutUtils.ts +++ b/app/client/src/layoutSystems/anvil/utils/layouts/update/mainCanvasLayoutUtils.ts @@ -13,10 +13,7 @@ import { call } from "redux-saga/effects"; import { severTiesFromParents, transformMovedWidgets } from "./moveUtils"; import { anvilWidgets } from "widgets/anvil/constants"; import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants"; -import { - addNewWidgetToDsl, - getCreateWidgetPayload, -} from "../../widgetAdditionUtils"; +import { addNewAnvilWidgetToDSL } from "layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers"; /** * This function adds a detached widget to the main canvas. @@ -30,14 +27,13 @@ export function* addDetachedWidgetToMainCanvas( allWidgets: CanvasWidgetsReduxState, draggedWidget: { widgetId: string; type: string }, ) { - const updatedWidgets: CanvasWidgetsReduxState = yield call( - addNewWidgetToDsl, + const updatedWidgets: CanvasWidgetsReduxState = yield addNewAnvilWidgetToDSL( allWidgets, - getCreateWidgetPayload( - draggedWidget.widgetId, - draggedWidget.type, - MAIN_CONTAINER_WIDGET_ID, - ), + { + widgetId: draggedWidget.widgetId, + type: draggedWidget.type, + parentId: MAIN_CONTAINER_WIDGET_ID, + }, ); return updatedWidgets; } diff --git a/app/client/src/layoutSystems/anvil/utils/layouts/update/sectionUtils.ts b/app/client/src/layoutSystems/anvil/utils/layouts/update/sectionUtils.ts index 427a57c27522..54fd4b7fe702 100644 --- a/app/client/src/layoutSystems/anvil/utils/layouts/update/sectionUtils.ts +++ b/app/client/src/layoutSystems/anvil/utils/layouts/update/sectionUtils.ts @@ -13,11 +13,8 @@ import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidg import { call } from "redux-saga/effects"; import { severTiesFromParents, transformMovedWidgets } from "./moveUtils"; import type { FlattenedWidgetProps } from "WidgetProvider/constants"; -import { - addNewWidgetToDsl, - getCreateWidgetPayload, -} from "../../widgetAdditionUtils"; import { anvilWidgets } from "widgets/anvil/constants"; +import { addNewAnvilWidgetToDSL } from "layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers"; export function* createSectionAndAddWidget( allWidgets: CanvasWidgetsReduxState, @@ -29,10 +26,13 @@ export function* createSectionAndAddWidget( * Step 1: Create Section widget. */ const widgetId: string = generateReactKey(); - const updatedWidgets: CanvasWidgetsReduxState = yield call( - addNewWidgetToDsl, + const updatedWidgets: CanvasWidgetsReduxState = yield addNewAnvilWidgetToDSL( allWidgets, - getCreateWidgetPayload(widgetId, anvilWidgets.SECTION_WIDGET, parentId), + { + widgetId, + type: anvilWidgets.SECTION_WIDGET, + parentId, + }, ); /** @@ -93,15 +93,11 @@ function* addZoneToSection( * => New widget. * => Create it and add to section. */ - canvasWidgets = yield call( - addNewWidgetToDsl, - canvasWidgets, - getCreateWidgetPayload( - zoneWidgetId, - anvilWidgets.ZONE_WIDGET, - sectionWidgetId, - ), - ); + canvasWidgets = yield addNewAnvilWidgetToDSL(canvasWidgets, { + widgetId: zoneWidgetId, + type: anvilWidgets.ZONE_WIDGET, + parentId: sectionWidgetId, + }); } else { /** * Add zone widgetIds to canvas.children. diff --git a/app/client/src/layoutSystems/anvil/utils/layouts/update/zoneUtils.ts b/app/client/src/layoutSystems/anvil/utils/layouts/update/zoneUtils.ts index e920e5d2cbc4..96ece0e14b2c 100644 --- a/app/client/src/layoutSystems/anvil/utils/layouts/update/zoneUtils.ts +++ b/app/client/src/layoutSystems/anvil/utils/layouts/update/zoneUtils.ts @@ -10,10 +10,6 @@ import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidg import { call } from "redux-saga/effects"; import { addWidgetsToChildTemplate } from "./additionUtils"; import type { FlattenedWidgetProps } from "WidgetProvider/constants"; -import { - addNewWidgetToDsl, - getCreateWidgetPayload, -} from "../../widgetAdditionUtils"; import { isLargeWidget } from "../../widgetUtils"; import { anvilWidgets } from "widgets/anvil/constants"; import { @@ -27,6 +23,7 @@ import { isEmptyWidget, widgetChildren, } from "../widgetUtils"; +import { addNewAnvilWidgetToDSL } from "layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers"; export function* createZoneAndAddWidgets( allWidgets: CanvasWidgetsReduxState, @@ -38,10 +35,13 @@ export function* createZoneAndAddWidgets( * Create Zone widget. */ const widgetId: string = generateReactKey(); - const updatedWidgets: CanvasWidgetsReduxState = yield call( - addNewWidgetToDsl, + const updatedWidgets: CanvasWidgetsReduxState = yield addNewAnvilWidgetToDSL( allWidgets, - getCreateWidgetPayload(widgetId, anvilWidgets.ZONE_WIDGET, parentId), + { + widgetId, + type: anvilWidgets.ZONE_WIDGET, + parentId, + }, ); /** @@ -176,11 +176,11 @@ function* updateDraggedWidgets( /** * Create new widget with zone as the parent. */ - updatedWidgets = yield call( - addNewWidgetToDsl, - allWidgets, - getCreateWidgetPayload(widgetId, widgetType, zoneWidgetId), - ); + updatedWidgets = yield addNewAnvilWidgetToDSL(allWidgets, { + widgetId, + type: widgetType, + parentId: zoneWidgetId, + }); } return updatedWidgets; } diff --git a/app/client/src/layoutSystems/anvil/utils/sectionOperationUtils.ts b/app/client/src/layoutSystems/anvil/utils/sectionOperationUtils.ts index e7ff6de8721c..a6b2551bf673 100644 --- a/app/client/src/layoutSystems/anvil/utils/sectionOperationUtils.ts +++ b/app/client/src/layoutSystems/anvil/utils/sectionOperationUtils.ts @@ -10,11 +10,11 @@ import type { import { call, select } from "redux-saga/effects"; import { getWidgets } from "sagas/selectors"; import { generateReactKey } from "utils/generators"; -import { addNewChildToDSL } from "../integrations/sagas/anvilDraggingSagas"; import type BaseLayoutComponent from "../layoutComponents/BaseLayoutComponent"; import LayoutFactory from "../layoutComponents/LayoutFactory"; import { defaultHighlightRenderInfo } from "../utils/constants"; import { anvilWidgets } from "widgets/anvil/constants"; +import { getUpdatedListOfWidgetsAfterAddingNewWidget } from "../integrations/sagas/anvilWidgetAdditionSagas"; /** * Function to get the highlight information for the last column of a Section Widget @@ -173,7 +173,7 @@ export function* addNewZonesToSection( }; const highlight = getSectionLastColumnHighlight(sectionWidget); updatedWidgets = yield call( - addNewChildToDSL, + getUpdatedListOfWidgetsAfterAddingNewWidget, highlight, newWidget, false, diff --git a/app/client/src/layoutSystems/anvil/utils/widgetAdditionUtils.ts b/app/client/src/layoutSystems/anvil/utils/widgetAdditionUtils.ts index 3577fc8cd201..347bccddeb32 100644 --- a/app/client/src/layoutSystems/anvil/utils/widgetAdditionUtils.ts +++ b/app/client/src/layoutSystems/anvil/utils/widgetAdditionUtils.ts @@ -1,7 +1,6 @@ import type { FlattenedWidgetProps } from "WidgetProvider/constants"; import type { WidgetAddChild } from "actions/pageActions"; import { WidgetReduxActionTypes } from "@appsmith/constants/ReduxActionConstants"; -import { GridDefaults } from "constants/WidgetConstants"; import { ENTITY_TYPE } from "@appsmith/entities/AppsmithConsole/utils"; import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer"; import { call, put } from "redux-saga/effects"; @@ -65,29 +64,3 @@ export function* addNewWidgetToDsl( return updatedWidgets; } - -/** - * - * Create default props for a new widget. - * Default values can be used here as some of these props are vestigial and are not required by Anvil. - */ -export function getCreateWidgetPayload( - widgetId: string, - type: string, - parentId: string, - data: Partial = {}, -): WidgetAddChild { - return { - columns: GridDefaults.DEFAULT_GRID_COLUMNS, - leftColumn: 0, - newWidgetId: widgetId, - parentColumnSpace: 1, - parentRowSpace: GridDefaults.DEFAULT_GRID_ROW_HEIGHT, - rows: 10, - tabId: "", - topRow: 0, - type: type, - widgetId: parentId, - ...data, - }; -} diff --git a/app/client/src/pages/AdminSettings/FormGroup/CopyUrlForm.tsx b/app/client/src/pages/AdminSettings/FormGroup/CopyUrlForm.tsx index 1e39e8c4dd3a..c46210d4b261 100644 --- a/app/client/src/pages/AdminSettings/FormGroup/CopyUrlForm.tsx +++ b/app/client/src/pages/AdminSettings/FormGroup/CopyUrlForm.tsx @@ -68,6 +68,7 @@ function CopyUrlForm(props: { endIcon="duplicate" endIconProps={{ className: "copy-icon", + // @ts-expect-error Fix this the next time the file is edited "data-testid": `${fieldName}-copy-icon`, onClick: handleCopy, }} diff --git a/app/client/src/pages/AppViewer/Navigation/components/MenuItem.tsx b/app/client/src/pages/AppViewer/Navigation/components/MenuItem.tsx index b2796ef3fd78..05f6ff13bd33 100644 --- a/app/client/src/pages/AppViewer/Navigation/components/MenuItem.tsx +++ b/app/client/src/pages/AppViewer/Navigation/components/MenuItem.tsx @@ -71,6 +71,7 @@ const MenuItem = ({ "mx-auto": isMinimal, })} name="file-line" + // @ts-expect-error Fix this the next time the file is edited size="large" /> )} diff --git a/app/client/src/pages/AppViewer/Navigation/components/MoreDropdownButton.tsx b/app/client/src/pages/AppViewer/Navigation/components/MoreDropdownButton.tsx index 42951c081843..aeac34fc2369 100644 --- a/app/client/src/pages/AppViewer/Navigation/components/MoreDropdownButton.tsx +++ b/app/client/src/pages/AppViewer/Navigation/components/MoreDropdownButton.tsx @@ -79,7 +79,7 @@ const MoreDropdownButton = ({ navColorStyle={navColorStyle} primaryColor={primaryColor} /> - + {/*@ts-expect-error Fix this the next time the file is edited*/} )} @@ -131,6 +131,7 @@ const MoreDropdownButton = ({ "page-icon mr-2": true, })} name="file-line" + // @ts-expect-error Fix this the next time the file is edited size="large" /> )} diff --git a/app/client/src/pages/Editor/CurlImport/ModalControls.tsx b/app/client/src/pages/Editor/CurlImport/ModalControls.tsx index 182408325555..2d43497ee40e 100644 --- a/app/client/src/pages/Editor/CurlImport/ModalControls.tsx +++ b/app/client/src/pages/Editor/CurlImport/ModalControls.tsx @@ -76,6 +76,7 @@ const ModalControls = (props: { children: ReactNode }) => { + {/*@ts-expect-error Fix this the next time the file is edited*/} CURL diff --git a/app/client/src/pages/Editor/CustomWidgetBuilder/header.tsx b/app/client/src/pages/Editor/CustomWidgetBuilder/header.tsx index 290b721e1f75..611f0a889294 100644 --- a/app/client/src/pages/Editor/CustomWidgetBuilder/header.tsx +++ b/app/client/src/pages/Editor/CustomWidgetBuilder/header.tsx @@ -52,6 +52,7 @@ export default function Header() { className={styles.closeButton} kind="tertiary" onClick={close} + // @ts-expect-error Fix this the next time the file is edited size="lg" > {createMessage(CUSTOM_WIDGET_FEATURE.builder.close)} diff --git a/app/client/src/pages/Editor/DatasourceInfo/DatasourceStructureContainer.tsx b/app/client/src/pages/Editor/DatasourceInfo/DatasourceStructureContainer.tsx index 67de9f450028..3d861d857709 100644 --- a/app/client/src/pages/Editor/DatasourceInfo/DatasourceStructureContainer.tsx +++ b/app/client/src/pages/Editor/DatasourceInfo/DatasourceStructureContainer.tsx @@ -158,13 +158,14 @@ const Container = (props: Props) => { handleOnChange(value)} + onChange={(value: string) => handleOnChange(value)} placeholder={createMessage( DATASOURCE_STRUCTURE_INPUT_PLACEHOLDER_TEXT, props.datasourceName, )} size={"sm"} startIcon="search" + //@ts-expect-error Fix this the next time the file is edited type="text" /> diff --git a/app/client/src/pages/Editor/DatasourceInfo/GoogleSheetSchema.tsx b/app/client/src/pages/Editor/DatasourceInfo/GoogleSheetSchema.tsx index 5291897ad63d..0330074985a6 100644 --- a/app/client/src/pages/Editor/DatasourceInfo/GoogleSheetSchema.tsx +++ b/app/client/src/pages/Editor/DatasourceInfo/GoogleSheetSchema.tsx @@ -407,10 +407,11 @@ function GoogleSheetSchema(props: Props) { handleSearch(value)} + onChange={(value: string) => handleSearch(value)} placeholder={createMessage(GSHEET_SEARCH_PLACEHOLDER)} size={"sm"} startIcon="search" + //@ts-expect-error Fix this the next time the file is edited type="text" /> diff --git a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx index c43f0f508d0e..ba4c6b8b890b 100644 --- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx +++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx @@ -369,6 +369,7 @@ function GeneratePageForm() { value: column.name, subText: column.type, icon: columnIcon, + // @ts-expect-error Fix this the next time the file is edited iconSize: "md", iconColor: "var(--ads-v2-color-fg)", }); @@ -444,6 +445,7 @@ function GeneratePageForm() { iconSize: "md", iconColor: "var(--ads-v2-color-fg)", })); + // @ts-expect-error Fix this the next time the file is edited setSelectedDatasourceTableOptions(tables); } }, [bucketList, isS3Plugin, setSelectedDatasourceTableOptions]); @@ -477,6 +479,7 @@ function GeneratePageForm() { columns, }, })); + // @ts-expect-error Fix this the next time the file is edited setSelectedDatasourceTableOptions(newTables); } } @@ -770,7 +773,9 @@ function GeneratePageForm() { @@ -843,7 +848,9 @@ function GeneratePageForm() { diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx index 843be08f1a5b..0a4eacf10dec 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx @@ -50,7 +50,7 @@ const AddQuery = ({ containerProps, innerContainerProps }: AddProps) => { onCloseClick={closeAddQuery} titleMessage={EDITOR_PANE_TEXTS.query_create_tab_title} /> - + {localGroups.length > 0 ? : null} {localGroups.length === 0 && searchTerm !== "" ? ( { { {createMessage(CREATE_NEW_DATASOURCE_REST_API)}

    + {/*@ts-expect-error Fix this the next time the file is edited*/} {isCreating && } ) : null diff --git a/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx b/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx index 05ad8e863e56..8c6018bc2463 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx @@ -257,6 +257,7 @@ function NewApiScreen(props: Props) { />

    REST API

    + {/*@ts-expect-error Fix this the next time the file is edited*/} {isCreating && } )} -
    +
    { onClick={() => { onEditSave(); }} - size="small" + size="sm" startIcon="check-line" />
    @@ -948,7 +948,7 @@ const PropertyControl = memo((props: Props) => { onClick={() => { resetEditing(); }} - size="small" + size="sm" startIcon="close-x" />
    @@ -1033,7 +1033,7 @@ const PropertyControl = memo((props: Props) => { }, ); }} - size="small" + size="sm" startIcon="pencil-line" /> )} @@ -1065,7 +1065,7 @@ const PropertyControl = memo((props: Props) => { }, ); }} - size="small" + size="sm" startIcon="trash" /> )} diff --git a/app/client/src/pages/Editor/gitSync/components/BranchList.tsx b/app/client/src/pages/Editor/gitSync/components/BranchList.tsx index 62b9348456ef..3a982beccd87 100644 --- a/app/client/src/pages/Editor/gitSync/components/BranchList.tsx +++ b/app/client/src/pages/Editor/gitSync/components/BranchList.tsx @@ -365,6 +365,7 @@ export default function BranchList(props: {
    { const errors: ResetPasswordFormValues = {}; diff --git a/app/client/src/pages/UserProfile/General.tsx b/app/client/src/pages/UserProfile/General.tsx index 02be160adef4..663186e9c17c 100644 --- a/app/client/src/pages/UserProfile/General.tsx +++ b/app/client/src/pages/UserProfile/General.tsx @@ -16,7 +16,7 @@ import UserProfileImagePicker from "./UserProfileImagePicker"; import { Wrapper, FieldWrapper, LabelWrapper } from "./StyledComponents"; import { ANONYMOUS_USERNAME } from "constants/userConstants"; import { ALL_LANGUAGE_CHARACTERS_REGEX } from "constants/Regex"; -import { createMessage } from "design-system-old/build/constants/messages"; +import { createMessage } from "design-system-old"; import { notEmptyValidator } from "design-system-old"; import { getIsFormLoginEnabled } from "@appsmith/selectors/tenantSelectors"; diff --git a/app/client/src/pages/common/ProfileImage.tsx b/app/client/src/pages/common/ProfileImage.tsx index 6ac27971d2b8..55b7105777f9 100644 --- a/app/client/src/pages/common/ProfileImage.tsx +++ b/app/client/src/pages/common/ProfileImage.tsx @@ -47,6 +47,7 @@ export default function ProfileImage(props: { firstLetter={props.commonName || initialsAndColorCode[0]} image={props.source} label={props.commonName || initialsAndColorCode[0]} + // @ts-expect-error Fix this the next time the file is edited size={props.size} /> ); diff --git a/app/client/src/pages/common/SearchBar/ApplicationSearchItem.tsx b/app/client/src/pages/common/SearchBar/ApplicationSearchItem.tsx index 918ce02bbc70..728de1d44f09 100644 --- a/app/client/src/pages/common/SearchBar/ApplicationSearchItem.tsx +++ b/app/client/src/pages/common/SearchBar/ApplicationSearchItem.tsx @@ -41,6 +41,7 @@ const ApplicationSearchItem = (props: Props) => { 0; if (!widgetName) { const widgetNames = Object.keys(widgets).map((w) => widgets[w].widgetName); @@ -122,12 +116,6 @@ function* getChildWidgetProps( } } - // in case we are creating zone inside zone, we want to use the parent's column space, we want - // to make sure the elevateBackground is set to false - if (type === "ZONE_WIDGET" && isModalOpen) { - props = { ...props, elevatedBackground: false }; - } - const isAutoLayout = isStack(widgets, parent); const isFillWidget = restDefaultConfig?.responsiveBehavior === ResponsiveBehavior.Fill; @@ -142,7 +130,6 @@ function* getChildWidgetProps( widgetId: newWidgetId, renderMode: RenderModes.CANVAS, ...themeDefaultConfig, - ...widgetSessionValues, }; const { minWidth } = getWidgetMinMaxDimensionsInPixel( @@ -549,51 +536,3 @@ export default function* widgetAdditionSagas() { takeEvery(ReduxActionTypes.WIDGET_ADD_NEW_TAB_CHILD, addNewTabChildSaga), ]); } - -/** - * retrieves the values from session storage for the widget properties - * for hydration of the widget when we create widget on drop - */ -export function getWidgetSessionValues( - type: string, - parent: FlattenedWidgetProps, -) { - // For WDS_INLINE_BUTTONS_WIDGET, we want to hydation only to work when we add more items to the inline button group. - // So we don't want to hydrate the values when we drop the widget on the canvas. - if (["WDS_INLINE_BUTTONS_WIDGET"].includes(type)) return; - - let widgetType = type; - const configMap = WidgetFactory.widgetConfigMap.get(type); - - const widgetSessionValues: any = {}; - - // in case we are dropping WDS_ICON_BUTTON_WIDGET, we want to reuse the values of BUTTON_WIDGET - if (type === "WDS_ICON_BUTTON_WIDGET") { - widgetType = "WDS_BUTTON_WIDGET"; - } - - for (const key in configMap) { - if (configMap[key] != undefined) { - let sessionStorageKey = `${widgetType}.${key}`; - - if (type === "ZONE_WIDGET") { - sessionStorageKey = `${widgetType}.${parent.widgetId}.${key}`; - } - - let valueFromSession: any = sessionStorage.getItem(sessionStorageKey); - - // parse "true" as true and "false" as false - if (valueFromSession === "true") { - valueFromSession = true; - } else if (valueFromSession === "false") { - valueFromSession = false; - } - - if (valueFromSession !== undefined && valueFromSession !== null) { - widgetSessionValues[key] = valueFromSession; - } - } - } - - return widgetSessionValues; -} diff --git a/app/client/src/widgets/JSONFormWidget/fields/useRegisterFieldValidity.ts b/app/client/src/widgets/JSONFormWidget/fields/useRegisterFieldValidity.ts index 27c100e90ae8..4871e0a37037 100644 --- a/app/client/src/widgets/JSONFormWidget/fields/useRegisterFieldValidity.ts +++ b/app/client/src/widgets/JSONFormWidget/fields/useRegisterFieldValidity.ts @@ -7,6 +7,7 @@ import { klona } from "klona"; import FormContext from "../FormContext"; import type { FieldType } from "../constants"; +import { startAndEndSpanForFn } from "UITelemetry/generateTraces"; export interface UseRegisterFieldValidityProps { isValid: boolean; @@ -34,10 +35,14 @@ function useRegisterFieldValidity({ setTimeout(() => { try { isValid - ? clearErrors(fieldName) - : setError(fieldName, { - type: fieldType, - message: "Invalid field", + ? startAndEndSpanForFn("JSONFormWidget.clearErrors", {}, () => { + clearErrors(fieldName); + }) + : startAndEndSpanForFn("JSONFormWidget.setError", {}, () => { + setError(fieldName, { + type: fieldType, + message: "Invalid field", + }); }); } catch (e) { Sentry.captureException(e); diff --git a/app/client/src/widgets/JSONFormWidget/widget/index.tsx b/app/client/src/widgets/JSONFormWidget/widget/index.tsx index 2381507dae72..0d708d98af78 100644 --- a/app/client/src/widgets/JSONFormWidget/widget/index.tsx +++ b/app/client/src/widgets/JSONFormWidget/widget/index.tsx @@ -68,6 +68,7 @@ import { ONSUBMIT_NOT_CONFIGURED_MESSAGE, } from "../constants/messages"; import { createMessage } from "@appsmith/constants/messages"; +import { endSpan, startRootSpan } from "UITelemetry/generateTraces"; const SUBMIT_BUTTON_DEFAULT_STYLES = { buttonVariant: ButtonVariantTypes.PRIMARY, @@ -651,6 +652,7 @@ class JSONFormWidget extends BaseWidget< schema: Schema, afterUpdateAction?: ExecuteTriggerPayload, ) => { + const span = startRootSpan("JSONFormWidget.parseAndSaveFieldState"); const fieldState = generateFieldState(schema, metaInternalFieldState); const action = klona(afterUpdateAction); @@ -664,6 +666,7 @@ class JSONFormWidget extends BaseWidget< actionPayload, ); } + endSpan(span); }; onSubmit = (event: React.MouseEvent) => { diff --git a/app/client/src/widgets/anvil/SectionWidget/widget/config/defaultConfig.ts b/app/client/src/widgets/anvil/SectionWidget/widget/config/defaultConfig.ts index 9456dfd23948..410e775e4008 100644 --- a/app/client/src/widgets/anvil/SectionWidget/widget/config/defaultConfig.ts +++ b/app/client/src/widgets/anvil/SectionWidget/widget/config/defaultConfig.ts @@ -9,14 +9,11 @@ import { LayoutSystemTypes } from "layoutSystems/types"; import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer"; import { getWidgetBluePrintUpdates } from "utils/WidgetBlueprintUtils"; import { sectionPreset } from "layoutSystems/anvil/layoutComponents/presets/sectionPreset"; -import { ButtonBoxShadowTypes } from "components/constants"; export const defaultConfig: WidgetDefaultProps = { elevatedBackground: false, - boxShadow: ButtonBoxShadowTypes.NONE, children: [], columns: 0, - detachFromLayout: false, responsiveBehavior: ResponsiveBehavior.Fill, rows: 0, version: 1, diff --git a/app/client/src/widgets/anvil/ZoneWidget/widget/config/defaultConfig.ts b/app/client/src/widgets/anvil/ZoneWidget/widget/config/defaultConfig.ts index d8aa8cf490c7..ed496a1128bd 100644 --- a/app/client/src/widgets/anvil/ZoneWidget/widget/config/defaultConfig.ts +++ b/app/client/src/widgets/anvil/ZoneWidget/widget/config/defaultConfig.ts @@ -5,10 +5,7 @@ import { } from "WidgetProvider/constants"; import { zonePreset } from "layoutSystems/anvil/layoutComponents/presets/zonePreset"; import type { LayoutProps } from "layoutSystems/anvil/utils/anvilTypes"; -import { - FlexVerticalAlignment, - ResponsiveBehavior, -} from "layoutSystems/common/utils/constants"; +import { ResponsiveBehavior } from "layoutSystems/common/utils/constants"; import { LayoutSystemTypes } from "layoutSystems/types"; import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer"; import { getWidgetBluePrintUpdates } from "utils/WidgetBlueprintUtils"; @@ -17,8 +14,6 @@ export const defaultConfig: WidgetDefaultProps = { elevatedBackground: true, children: [], columns: 0, - detachFromLayout: false, - flexVerticalAlignment: FlexVerticalAlignment.Stretch, responsiveBehavior: ResponsiveBehavior.Fill, rows: 0, version: 1, @@ -30,18 +25,36 @@ export const defaultConfig: WidgetDefaultProps = { fn: ( widget: FlattenedWidgetProps, widgets: CanvasWidgetsReduxState, - parent: FlattenedWidgetProps, - layoutSystemType: LayoutSystemTypes, + parent: FlattenedWidgetProps, // Why does this exist, when we have all the widgets? + layoutSystemType: LayoutSystemTypes, // All widgets are new in Anvil, however, it may be needed for Auto Layout ) => { if (layoutSystemType !== LayoutSystemTypes.ANVIL) return []; const layout: LayoutProps[] = zonePreset(); - return getWidgetBluePrintUpdates({ + const updates = getWidgetBluePrintUpdates({ [widget.widgetId]: { layout, }, }); + + // In a modal widget, the zones don't have borders and elevation + // by default. We go up the hierarchy to find any Modal Widget + // If it exists, we remove the elevated background for the zone + let parentId = widget.parentId; + while (parentId) { + if (widgets[parentId].type === "WDS_MODAL_WIDGET") { + updates.push({ + widgetId: widget.widgetId, + propertyName: "elevatedBackground", + propertyValue: false, + }); + break; + } + parentId = widgets[parentId].parentId; + } + + return updates; }, }, ], diff --git a/app/client/src/widgets/wds/WDSButtonWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSButtonWidget/config/metaConfig.ts index 7e9fbe52373f..f857e8f693ef 100644 --- a/app/client/src/widgets/wds/WDSButtonWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSButtonWidget/config/metaConfig.ts @@ -5,5 +5,5 @@ export const metaConfig = { needsMeta: false, isCanvas: false, tags: [WIDGET_TAGS.SUGGESTED_WIDGETS, WIDGET_TAGS.BUTTONS], - searchTags: ["click", "submit"], + searchTags: ["click", "submit", "button", "action", "run"], }; diff --git a/app/client/src/widgets/wds/WDSCheckboxGroupWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSCheckboxGroupWidget/config/metaConfig.ts index d36ce2a406cc..aa4dd3cb5d06 100644 --- a/app/client/src/widgets/wds/WDSCheckboxGroupWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSCheckboxGroupWidget/config/metaConfig.ts @@ -4,4 +4,18 @@ export const metaConfig = { name: "Checkbox Group", tags: [WIDGET_TAGS.TOGGLES], needsMeta: true, + searchTags: [ + "checkbox", + "check", + "toggle", + "option", + "switch", + "boolean", + "choose", + "choice", + "pick", + "group", + "tick", + "set", + ], }; diff --git a/app/client/src/widgets/wds/WDSCheckboxWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSCheckboxWidget/config/metaConfig.ts index 9e41115620b8..63afc5a2d477 100644 --- a/app/client/src/widgets/wds/WDSCheckboxWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSCheckboxWidget/config/metaConfig.ts @@ -4,5 +4,17 @@ export const metaConfig = { name: "Checkbox", tags: [WIDGET_TAGS.TOGGLES], needsMeta: true, - searchTags: ["boolean"], + searchTags: [ + "checkbox", + "check", + "toggle", + "option", + "switch", + "boolean", + "choose", + "choice", + "pick", + "tick", + "set", + ], }; diff --git a/app/client/src/widgets/wds/WDSCurrencyInputWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSCurrencyInputWidget/config/metaConfig.ts index 0eba043d6d14..b3468ca7e67d 100644 --- a/app/client/src/widgets/wds/WDSCurrencyInputWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSCurrencyInputWidget/config/metaConfig.ts @@ -4,5 +4,24 @@ export const metaConfig = { name: "Currency Input", tags: [WIDGET_TAGS.INPUTS], needsMeta: true, - searchTags: ["amount", "total"], + searchTags: [ + "amount", + "total", + "money", + "currency", + "form", + "number", + "input", + "entry", + "capture", + "prompt", + "field", + "textfield", + "text field", + "enter", + "cash", + "expense", + "cost", + "price", + ], }; diff --git a/app/client/src/widgets/wds/WDSIconButtonWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSIconButtonWidget/config/metaConfig.ts index 75c8d0b0a9d3..cdc1fff69d7b 100644 --- a/app/client/src/widgets/wds/WDSIconButtonWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSIconButtonWidget/config/metaConfig.ts @@ -3,5 +3,5 @@ import { WIDGET_TAGS } from "constants/WidgetConstants"; export const metaConfig = { name: "Icon Button", tags: [WIDGET_TAGS.BUTTONS], - searchTags: ["click", "submit"], + searchTags: ["click", "submit", "button", "action", "run", "icon", "pic"], }; diff --git a/app/client/src/widgets/wds/WDSInlineButtonsWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSInlineButtonsWidget/config/metaConfig.ts index becbda3e7511..2586f441c430 100644 --- a/app/client/src/widgets/wds/WDSInlineButtonsWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSInlineButtonsWidget/config/metaConfig.ts @@ -4,6 +4,21 @@ export const metaConfig = { name: "Inline Buttons", needsMeta: false, isCanvas: false, - searchTags: ["click", "submit"], + searchTags: [ + "click", + "submit", + "button", + "action", + "toolbar", + "menu", + "panel", + "delete", + "save", + "cancel", + "group", + "bar", + "footer", + "form", + ], tags: [WIDGET_TAGS.BUTTONS], }; diff --git a/app/client/src/widgets/wds/WDSInputWidget/config/defaultsConfig.ts b/app/client/src/widgets/wds/WDSInputWidget/config/defaultsConfig.ts index 14622efb1309..42436cf380b1 100644 --- a/app/client/src/widgets/wds/WDSInputWidget/config/defaultsConfig.ts +++ b/app/client/src/widgets/wds/WDSInputWidget/config/defaultsConfig.ts @@ -6,7 +6,7 @@ export const defaultsConfig = { labelPosition: "top", inputType: "TEXT", widgetName: "Input", - version: 2, + version: 1, label: "Label", showStepArrows: false, responsiveBehavior: ResponsiveBehavior.Fill, diff --git a/app/client/src/widgets/wds/WDSInputWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSInputWidget/config/metaConfig.ts index 1d29008f7d54..e5b0ab73b13b 100644 --- a/app/client/src/widgets/wds/WDSInputWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSInputWidget/config/metaConfig.ts @@ -4,5 +4,18 @@ export const metaConfig = { name: "Input", tags: [WIDGET_TAGS.SUGGESTED_WIDGETS, WIDGET_TAGS.INPUTS], needsMeta: true, - searchTags: ["form", "text input", "number", "textarea"], + searchTags: [ + "form", + "text input", + "number", + "textarea", + "input", + "entry", + "capture", + "prompt", + "field", + "textfield", + "text field", + "enter", + ], }; diff --git a/app/client/src/widgets/wds/WDSMenuButtonWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSMenuButtonWidget/config/metaConfig.ts index 7b3569a8979e..b08e5f60da99 100644 --- a/app/client/src/widgets/wds/WDSMenuButtonWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSMenuButtonWidget/config/metaConfig.ts @@ -3,4 +3,17 @@ import { WIDGET_TAGS } from "constants/WidgetConstants"; export const metaConfig = { name: "Menu Button", tags: [WIDGET_TAGS.BUTTONS], + searchTags: [ + "click", + "submit", + "button", + "menu", + "option", + "burger", + "hamburger", + "dropdown", + "select", + "action", + "choose", + ], }; diff --git a/app/client/src/widgets/wds/WDSModalWidget/config/defaultsConfig.ts b/app/client/src/widgets/wds/WDSModalWidget/config/defaultsConfig.ts index 77bf3cac8023..02175cbc413f 100644 --- a/app/client/src/widgets/wds/WDSModalWidget/config/defaultsConfig.ts +++ b/app/client/src/widgets/wds/WDSModalWidget/config/defaultsConfig.ts @@ -34,7 +34,6 @@ export const defaultsConfig = { layoutSystemType: LayoutSystemTypes, ) => { if (layoutSystemType !== LayoutSystemTypes.ANVIL) return []; - const layout: LayoutProps[] = modalPreset(); return getWidgetBluePrintUpdates({ [widget.widgetId]: { diff --git a/app/client/src/widgets/wds/WDSModalWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSModalWidget/config/metaConfig.ts index d94f017cd599..5fd9316ff403 100644 --- a/app/client/src/widgets/wds/WDSModalWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSModalWidget/config/metaConfig.ts @@ -4,7 +4,7 @@ export const metaConfig = { name: "Modal", tags: [WIDGET_TAGS.LAYOUT], needsMeta: true, - searchTags: ["dialog", "popup", "notification"], + searchTags: ["dialog", "popup", "modal", "window"], onCanvasUI: { selectionBGCSSVar: "--on-canvas-ui-widget-selection", focusBGCSSVar: "--on-canvas-ui-widget-focus", diff --git a/app/client/src/widgets/wds/WDSParagraphWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSParagraphWidget/config/metaConfig.ts index 8b5c18d37787..899267bfacbe 100644 --- a/app/client/src/widgets/wds/WDSParagraphWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSParagraphWidget/config/metaConfig.ts @@ -4,5 +4,14 @@ import { WIDGET_TAGS } from "constants/WidgetConstants"; export const metaConfig = { name: "Paragraph", tags: [WIDGET_TAGS.CONTENT] as WidgetTags[], - searchTags: ["typography", "paragraph", "label"], + searchTags: [ + "type", + "paragraph", + "text", + "content", + "prose", + "description", + "multiline", + "multi-line", + ], }; diff --git a/app/client/src/widgets/wds/WDSPhoneInputWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSPhoneInputWidget/config/metaConfig.ts index cd750e0bfaad..b0b5ec59bd24 100644 --- a/app/client/src/widgets/wds/WDSPhoneInputWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSPhoneInputWidget/config/metaConfig.ts @@ -4,5 +4,19 @@ export const metaConfig = { name: "Phone Input", tags: [WIDGET_TAGS.INPUTS], needsMeta: true, - searchTags: ["call"], + searchTags: [ + "form", + "call", + "number", + "input", + "entry", + "capture", + "prompt", + "field", + "textfield", + "text field", + "enter", + "phone", + "contact", + ], }; diff --git a/app/client/src/widgets/wds/WDSRadioGroupWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSRadioGroupWidget/config/metaConfig.ts index d9f20295438b..5bce5c83f992 100644 --- a/app/client/src/widgets/wds/WDSRadioGroupWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSRadioGroupWidget/config/metaConfig.ts @@ -4,5 +4,14 @@ export const metaConfig = { name: "Radio Group", tags: [WIDGET_TAGS.TOGGLES], needsMeta: true, - searchTags: ["choice"], + searchTags: [ + "choice", + "option", + "radio", + "variant", + "choose", + "pick", + "group", + "select", + ], }; diff --git a/app/client/src/widgets/wds/WDSStatsWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSStatsWidget/config/metaConfig.ts index fbfb017c4594..75caa827e26e 100644 --- a/app/client/src/widgets/wds/WDSStatsWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSStatsWidget/config/metaConfig.ts @@ -4,6 +4,16 @@ export const metaConfig = { name: "Stats", needsMeta: false, isCanvas: false, - searchTags: ["statbox"], + searchTags: [ + "statbox", + "stats", + "data", + "indicator", + "number", + "value", + "monitor", + "dashboard", + "signal", + ], tags: [WIDGET_TAGS.DISPLAY], }; diff --git a/app/client/src/widgets/wds/WDSSwitchGroupWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSSwitchGroupWidget/config/metaConfig.ts index 8fa7ea3053cf..ec9953b3259c 100644 --- a/app/client/src/widgets/wds/WDSSwitchGroupWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSSwitchGroupWidget/config/metaConfig.ts @@ -4,4 +4,18 @@ export const metaConfig = { name: "Switch Group", tags: [WIDGET_TAGS.TOGGLES], needsMeta: true, + searchTags: [ + "checkbox", + "check", + "toggle", + "option", + "switch", + "boolean", + "choose", + "choice", + "pick", + "group", + "tick", + "set", + ], }; diff --git a/app/client/src/widgets/wds/WDSSwitchWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSSwitchWidget/config/metaConfig.ts index 266c4070d217..44a3b08d414d 100644 --- a/app/client/src/widgets/wds/WDSSwitchWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSSwitchWidget/config/metaConfig.ts @@ -4,5 +4,17 @@ export const metaConfig = { name: "Switch", tags: [WIDGET_TAGS.TOGGLES], needsMeta: true, - searchTags: ["boolean"], + searchTags: [ + "checkbox", + "check", + "toggle", + "option", + "switch", + "boolean", + "choose", + "choice", + "pick", + "tick", + "set", + ], }; diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts b/app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts index 1467514b073b..44915803301a 100644 --- a/app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts +++ b/app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts @@ -36,7 +36,7 @@ export const defaultsConfig = { isVisiblePagination: true, isSortable: true, delimiter: ",", - version: 2, + version: 1, inlineEditingSaveOption: InlineEditingSaveOptions.ROW_LEVEL, pageSize: 8, buttonLabel: "Action", diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSTableWidget/config/metaConfig.ts index 67c44a4d9d75..ee1d71dd3966 100644 --- a/app/client/src/widgets/wds/WDSTableWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSTableWidget/config/metaConfig.ts @@ -5,4 +5,5 @@ export const metaConfig = { tags: [WIDGET_TAGS.SUGGESTED_WIDGETS, WIDGET_TAGS.DISPLAY], needsMeta: true, needsHeightForContent: true, + searchTags: ["table", "data", "display", "spreadsheet"], }; diff --git a/app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/metaConfig.ts index fa5996972242..3ad609f6ee2f 100644 --- a/app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/metaConfig.ts +++ b/app/client/src/widgets/wds/WDSToolbarButtonsWidget/config/metaConfig.ts @@ -4,6 +4,14 @@ export const metaConfig = { name: "Toolbar Buttons", needsMeta: false, isCanvas: false, - searchTags: ["click", "submit"], + searchTags: [ + "click", + "submit", + "button", + "action", + "toolbar", + "menu", + "panel", + ], tags: [WIDGET_TAGS.BUTTONS], }; diff --git a/app/client/tsconfig.path.json b/app/client/tsconfig.path.json index a6d3c8dd4537..37c086c0c1a6 100644 --- a/app/client/tsconfig.path.json +++ b/app/client/tsconfig.path.json @@ -1,6 +1,5 @@ { "compilerOptions": { - "baseUrl": "src", "paths": { "@appsmith/*": ["ee/*"], "test/*": ["../test/*"] diff --git a/app/client/yarn.lock b/app/client/yarn.lock index 82a81a495859..d4f50f7726ad 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -174,17 +174,6 @@ __metadata: languageName: node linkType: hard -"@aw-web-design/x-default-browser@npm:1.4.126": - version: 1.4.126 - resolution: "@aw-web-design/x-default-browser@npm:1.4.126" - dependencies: - default-browser-id: 3.0.0 - bin: - x-default-browser: bin/x-default-browser.js - checksum: f63b68a0ff41c8fe478b1b4822e169cac0d26c61b123c0400d5e16a8a5987732b85795aff16d6b21936f9c955f0d32bffbfc166890d3446f74a72a7a2c9633ea - languageName: node - linkType: hard - "@aws-crypto/crc32@npm:3.0.0": version: 3.0.0 resolution: "@aws-crypto/crc32@npm:3.0.0" @@ -861,43 +850,43 @@ __metadata: languageName: node linkType: hard -"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.1, @babel/code-frame@npm:^7.24.2, @babel/code-frame@npm:^7.8.3": - version: 7.24.2 - resolution: "@babel/code-frame@npm:7.24.2" +"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.24.7, @babel/code-frame@npm:^7.8.3": + version: 7.24.7 + resolution: "@babel/code-frame@npm:7.24.7" dependencies: - "@babel/highlight": ^7.24.2 + "@babel/highlight": ^7.24.7 picocolors: ^1.0.0 - checksum: 70e867340cfe09ca5488b2f36372c45cabf43c79a5b6426e6df5ef0611ff5dfa75a57dda841895693de6008f32c21a7c97027a8c7bcabd63a7d17416cbead6f8 + checksum: 830e62cd38775fdf84d612544251ce773d544a8e63df667728cc9e0126eeef14c6ebda79be0f0bc307e8318316b7f58c27ce86702e0a1f5c321d842eb38ffda4 languageName: node linkType: hard -"@babel/compat-data@npm:^7.17.7, @babel/compat-data@npm:^7.20.5, @babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.3, @babel/compat-data@npm:^7.23.5": - version: 7.23.5 - resolution: "@babel/compat-data@npm:7.23.5" - checksum: 06ce244cda5763295a0ea924728c09bae57d35713b675175227278896946f922a63edf803c322f855a3878323d48d0255a2a3023409d2a123483c8a69ebb4744 +"@babel/compat-data@npm:^7.17.7, @babel/compat-data@npm:^7.20.5, @babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.24.8": + version: 7.24.9 + resolution: "@babel/compat-data@npm:7.24.9" + checksum: 3590be0f7028bca0565a83f66752c0f0283b818e9e1bb7fc12912822768e379a6ff84c59d77dc64ba62c140b8500a3828d95c0ce013cd62d254a179bae38709b languageName: node linkType: hard -"@babel/core@npm:^7.1.0, @babel/core@npm:^7.11.1, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.16.0, @babel/core@npm:^7.18.9, @babel/core@npm:^7.19.6, @babel/core@npm:^7.21.3, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.5, @babel/core@npm:^7.23.9, @babel/core@npm:^7.7.2, @babel/core@npm:^7.8.0": - version: 7.24.4 - resolution: "@babel/core@npm:7.24.4" +"@babel/core@npm:^7.1.0, @babel/core@npm:^7.11.1, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.16.0, @babel/core@npm:^7.18.9, @babel/core@npm:^7.19.6, @babel/core@npm:^7.21.3, @babel/core@npm:^7.22.5, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.5, @babel/core@npm:^7.23.9, @babel/core@npm:^7.24.4, @babel/core@npm:^7.7.2, @babel/core@npm:^7.7.5, @babel/core@npm:^7.8.0": + version: 7.24.9 + resolution: "@babel/core@npm:7.24.9" dependencies: "@ampproject/remapping": ^2.2.0 - "@babel/code-frame": ^7.24.2 - "@babel/generator": ^7.24.4 - "@babel/helper-compilation-targets": ^7.23.6 - "@babel/helper-module-transforms": ^7.23.3 - "@babel/helpers": ^7.24.4 - "@babel/parser": ^7.24.4 - "@babel/template": ^7.24.0 - "@babel/traverse": ^7.24.1 - "@babel/types": ^7.24.0 + "@babel/code-frame": ^7.24.7 + "@babel/generator": ^7.24.9 + "@babel/helper-compilation-targets": ^7.24.8 + "@babel/helper-module-transforms": ^7.24.9 + "@babel/helpers": ^7.24.8 + "@babel/parser": ^7.24.8 + "@babel/template": ^7.24.7 + "@babel/traverse": ^7.24.8 + "@babel/types": ^7.24.9 convert-source-map: ^2.0.0 debug: ^4.1.0 gensync: ^1.0.0-beta.2 json5: ^2.2.3 semver: ^6.3.1 - checksum: 15ecad7581f3329995956ba461961b1af7bed48901f14fe962ccd3217edca60049e9e6ad4ce48134618397e6c90230168c842e2c28e47ef1f16c97dbbf663c61 + checksum: eae273bee154d6a059e742a2bb7a58b03438a1f70d7909887a28258b29556dc99bcd5cbd41f13cd4755a20b0baf5e82731acb1d3690e02b7a9300fb6d1950e2c languageName: node linkType: hard @@ -915,78 +904,79 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.23.0, @babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4, @babel/generator@npm:^7.7.2": - version: 7.24.4 - resolution: "@babel/generator@npm:7.24.4" +"@babel/generator@npm:^7.22.5, @babel/generator@npm:^7.24.8, @babel/generator@npm:^7.24.9, @babel/generator@npm:^7.7.2": + version: 7.24.10 + resolution: "@babel/generator@npm:7.24.10" dependencies: - "@babel/types": ^7.24.0 + "@babel/types": ^7.24.9 "@jridgewell/gen-mapping": ^0.3.5 "@jridgewell/trace-mapping": ^0.3.25 jsesc: ^2.5.1 - checksum: 1b6146c31386c9df3eb594a2c36b5c98da4f67f7c06edb3d68a442b92516b21bb5ba3ad7dbe0058fe76625ed24d66923e15c95b0df75ef1907d4068921a699b8 + checksum: eb13806e9eb76932ea5205502a85ea650a991c7a6f757fbe859176f6d9b34b3da5a2c1f52a2c24fdbe0045a90438fe6889077e338cdd6c727619dee925af1ba6 languageName: node linkType: hard -"@babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/helper-annotate-as-pure@npm:7.22.5" +"@babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.22.5, @babel/helper-annotate-as-pure@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-annotate-as-pure@npm:7.24.7" dependencies: - "@babel/types": ^7.22.5 - checksum: 53da330f1835c46f26b7bf4da31f7a496dee9fd8696cca12366b94ba19d97421ce519a74a837f687749318f94d1a37f8d1abcbf35e8ed22c32d16373b2f6198d + "@babel/types": ^7.24.7 + checksum: 6178566099a6a0657db7a7fa601a54fb4731ca0b8614fbdccfd8e523c210c13963649bc8fdfd53ce7dd14d05e3dda2fb22dea5b30113c488b9eb1a906d60212e languageName: node linkType: hard -"@babel/helper-builder-binary-assignment-operator-visitor@npm:^7.22.15": - version: 7.22.15 - resolution: "@babel/helper-builder-binary-assignment-operator-visitor@npm:7.22.15" +"@babel/helper-builder-binary-assignment-operator-visitor@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-builder-binary-assignment-operator-visitor@npm:7.24.7" dependencies: - "@babel/types": ^7.22.15 - checksum: 639c697a1c729f9fafa2dd4c9af2e18568190299b5907bd4c2d0bc818fcbd1e83ffeecc2af24327a7faa7ac4c34edd9d7940510a5e66296c19bad17001cf5c7a + "@babel/traverse": ^7.24.7 + "@babel/types": ^7.24.7 + checksum: 71a6158a9fdebffb82fdc400d5555ba8f2e370cea81a0d578155877bdc4db7d5252b75c43b2fdf3f72b3f68348891f99bd35ae315542daad1b7ace8322b1abcb languageName: node linkType: hard -"@babel/helper-compilation-targets@npm:^7.17.7, @babel/helper-compilation-targets@npm:^7.20.7, @babel/helper-compilation-targets@npm:^7.22.15, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6": - version: 7.23.6 - resolution: "@babel/helper-compilation-targets@npm:7.23.6" +"@babel/helper-compilation-targets@npm:^7.17.7, @babel/helper-compilation-targets@npm:^7.20.7, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.24.7, @babel/helper-compilation-targets@npm:^7.24.8": + version: 7.24.8 + resolution: "@babel/helper-compilation-targets@npm:7.24.8" dependencies: - "@babel/compat-data": ^7.23.5 - "@babel/helper-validator-option": ^7.23.5 - browserslist: ^4.22.2 + "@babel/compat-data": ^7.24.8 + "@babel/helper-validator-option": ^7.24.8 + browserslist: ^4.23.1 lru-cache: ^5.1.1 semver: ^6.3.1 - checksum: c630b98d4527ac8fe2c58d9a06e785dfb2b73ec71b7c4f2ddf90f814b5f75b547f3c015f110a010fd31f76e3864daaf09f3adcd2f6acdbfb18a8de3a48717590 + checksum: 40c9e87212fffccca387504b259a629615d7df10fc9080c113da6c51095d3e8b622a1409d9ed09faf2191628449ea28d582179c5148e2e993a3140234076b8da languageName: node linkType: hard -"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.23.6": - version: 7.23.10 - resolution: "@babel/helper-create-class-features-plugin@npm:7.23.10" +"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.23.6, @babel/helper-create-class-features-plugin@npm:^7.24.7": + version: 7.24.8 + resolution: "@babel/helper-create-class-features-plugin@npm:7.24.8" dependencies: - "@babel/helper-annotate-as-pure": ^7.22.5 - "@babel/helper-environment-visitor": ^7.22.20 - "@babel/helper-function-name": ^7.23.0 - "@babel/helper-member-expression-to-functions": ^7.23.0 - "@babel/helper-optimise-call-expression": ^7.22.5 - "@babel/helper-replace-supers": ^7.22.20 - "@babel/helper-skip-transparent-expression-wrappers": ^7.22.5 - "@babel/helper-split-export-declaration": ^7.22.6 + "@babel/helper-annotate-as-pure": ^7.24.7 + "@babel/helper-environment-visitor": ^7.24.7 + "@babel/helper-function-name": ^7.24.7 + "@babel/helper-member-expression-to-functions": ^7.24.8 + "@babel/helper-optimise-call-expression": ^7.24.7 + "@babel/helper-replace-supers": ^7.24.7 + "@babel/helper-skip-transparent-expression-wrappers": ^7.24.7 + "@babel/helper-split-export-declaration": ^7.24.7 semver: ^6.3.1 peerDependencies: "@babel/core": ^7.0.0 - checksum: ff0730c21f0e73b9e314701bca6568bb5885dff2aa3c32b1e2e3d18ed2818f56851b9ffdbe2e8008c9bb94b265a1443883ae4c1ca5dde278ce71ac4218006d68 + checksum: b4707e2c4a2cb504d7656168d887bf653db6fbe8ece4502e28e5798f2ec624dc606f2d6bc4820d31b4dc1b80f7d83d98db83516dda321a76c075e5f531abed0b languageName: node linkType: hard -"@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.22.15, @babel/helper-create-regexp-features-plugin@npm:^7.22.5": - version: 7.22.15 - resolution: "@babel/helper-create-regexp-features-plugin@npm:7.22.15" +"@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-create-regexp-features-plugin@npm:7.24.7" dependencies: - "@babel/helper-annotate-as-pure": ^7.22.5 + "@babel/helper-annotate-as-pure": ^7.24.7 regexpu-core: ^5.3.1 semver: ^6.3.1 peerDependencies: "@babel/core": ^7.0.0 - checksum: 0243b8d4854f1dc8861b1029a46d3f6393ad72f366a5a08e36a4648aa682044f06da4c6e87a456260e1e1b33c999f898ba591a0760842c1387bcc93fbf2151a6 + checksum: 17c59fa222af50f643946eca940ce1d474ff2da1f4afed2312687ab9d708ebbb8c9372754ddbdf44b6e21ead88b8fc144644f3a7b63ccb886de002458cef3974 languageName: node linkType: hard @@ -1006,9 +996,9 @@ __metadata: languageName: node linkType: hard -"@babel/helper-define-polyfill-provider@npm:^0.5.0": - version: 0.5.0 - resolution: "@babel/helper-define-polyfill-provider@npm:0.5.0" +"@babel/helper-define-polyfill-provider@npm:^0.6.1, @babel/helper-define-polyfill-provider@npm:^0.6.2": + version: 0.6.2 + resolution: "@babel/helper-define-polyfill-provider@npm:0.6.2" dependencies: "@babel/helper-compilation-targets": ^7.22.6 "@babel/helper-plugin-utils": ^7.22.5 @@ -1017,235 +1007,253 @@ __metadata: resolve: ^1.14.2 peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: d24626b819d3875cb65189d761004e9230f2b3fb60542525c4785616f4b2366741369235a864b744f54beb26d625ae4b0af0c9bb3306b61bf4fccb61e0620020 + checksum: 2bba965ea9a4887ddf9c11d51d740ab473bd7597b787d042c325f6a45912dfe908c2d6bb1d837bf82f7e9fa51e6ad5150563c58131d2bb85515e63d971414a9c languageName: node linkType: hard -"@babel/helper-environment-visitor@npm:^7.22.20": - version: 7.22.20 - resolution: "@babel/helper-environment-visitor@npm:7.22.20" - checksum: d80ee98ff66f41e233f36ca1921774c37e88a803b2f7dca3db7c057a5fea0473804db9fb6729e5dbfd07f4bed722d60f7852035c2c739382e84c335661590b69 +"@babel/helper-environment-visitor@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-environment-visitor@npm:7.24.7" + dependencies: + "@babel/types": ^7.24.7 + checksum: 079d86e65701b29ebc10baf6ed548d17c19b808a07aa6885cc141b690a78581b180ee92b580d755361dc3b16adf975b2d2058b8ce6c86675fcaf43cf22f2f7c6 languageName: node linkType: hard -"@babel/helper-function-name@npm:^7.22.5, @babel/helper-function-name@npm:^7.23.0": - version: 7.23.0 - resolution: "@babel/helper-function-name@npm:7.23.0" +"@babel/helper-function-name@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-function-name@npm:7.24.7" dependencies: - "@babel/template": ^7.22.15 - "@babel/types": ^7.23.0 - checksum: e44542257b2d4634a1f979244eb2a4ad8e6d75eb6761b4cfceb56b562f7db150d134bc538c8e6adca3783e3bc31be949071527aa8e3aab7867d1ad2d84a26e10 + "@babel/template": ^7.24.7 + "@babel/types": ^7.24.7 + checksum: 142ee08922074dfdc0ff358e09ef9f07adf3671ab6eef4fca74dcf7a551f1a43717e7efa358c9e28d7eea84c28d7f177b7a58c70452fc312ae3b1893c5dab2a4 languageName: node linkType: hard -"@babel/helper-hoist-variables@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/helper-hoist-variables@npm:7.22.5" +"@babel/helper-hoist-variables@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-hoist-variables@npm:7.24.7" dependencies: - "@babel/types": ^7.22.5 - checksum: 394ca191b4ac908a76e7c50ab52102669efe3a1c277033e49467913c7ed6f7c64d7eacbeabf3bed39ea1f41731e22993f763b1edce0f74ff8563fd1f380d92cc + "@babel/types": ^7.24.7 + checksum: 6cfdcf2289cd12185dcdbdf2435fa8d3447b797ac75851166de9fc8503e2fd0021db6baf8dfbecad3753e582c08e6a3f805c8d00cbed756060a877d705bd8d8d languageName: node linkType: hard -"@babel/helper-member-expression-to-functions@npm:^7.22.15, @babel/helper-member-expression-to-functions@npm:^7.23.0": - version: 7.23.0 - resolution: "@babel/helper-member-expression-to-functions@npm:7.23.0" +"@babel/helper-member-expression-to-functions@npm:^7.24.7, @babel/helper-member-expression-to-functions@npm:^7.24.8": + version: 7.24.8 + resolution: "@babel/helper-member-expression-to-functions@npm:7.24.8" dependencies: - "@babel/types": ^7.23.0 - checksum: 494659361370c979ada711ca685e2efe9460683c36db1b283b446122596602c901e291e09f2f980ecedfe6e0f2bd5386cb59768285446530df10c14df1024e75 + "@babel/traverse": ^7.24.8 + "@babel/types": ^7.24.8 + checksum: bf923d05d81b06857f4ca4fe9c528c9c447a58db5ea39595bb559eae2fce01a8266173db0fd6a2ec129d7bbbb9bb22f4e90008252f7c66b422c76630a878a4bc languageName: node linkType: hard -"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.0.0-beta.49, @babel/helper-module-imports@npm:^7.10.4, @babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.21.4, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.22.5": - version: 7.22.15 - resolution: "@babel/helper-module-imports@npm:7.22.15" +"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.0.0-beta.49, @babel/helper-module-imports@npm:^7.10.4, @babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.21.4, @babel/helper-module-imports@npm:^7.22.5, @babel/helper-module-imports@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-module-imports@npm:7.24.7" dependencies: - "@babel/types": ^7.22.15 - checksum: ecd7e457df0a46f889228f943ef9b4a47d485d82e030676767e6a2fdcbdaa63594d8124d4b55fd160b41c201025aec01fc27580352b1c87a37c9c6f33d116702 + "@babel/traverse": ^7.24.7 + "@babel/types": ^7.24.7 + checksum: 8ac15d96d262b8940bc469052a048e06430bba1296369be695fabdf6799f201dd0b00151762b56012a218464e706bc033f27c07f6cec20c6f8f5fd6543c67054 languageName: node linkType: hard -"@babel/helper-module-transforms@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/helper-module-transforms@npm:7.23.3" +"@babel/helper-module-transforms@npm:^7.24.7, @babel/helper-module-transforms@npm:^7.24.8, @babel/helper-module-transforms@npm:^7.24.9": + version: 7.24.9 + resolution: "@babel/helper-module-transforms@npm:7.24.9" dependencies: - "@babel/helper-environment-visitor": ^7.22.20 - "@babel/helper-module-imports": ^7.22.15 - "@babel/helper-simple-access": ^7.22.5 - "@babel/helper-split-export-declaration": ^7.22.6 - "@babel/helper-validator-identifier": ^7.22.20 + "@babel/helper-environment-visitor": ^7.24.7 + "@babel/helper-module-imports": ^7.24.7 + "@babel/helper-simple-access": ^7.24.7 + "@babel/helper-split-export-declaration": ^7.24.7 + "@babel/helper-validator-identifier": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0 - checksum: 5d0895cfba0e16ae16f3aa92fee108517023ad89a855289c4eb1d46f7aef4519adf8e6f971e1d55ac20c5461610e17213f1144097a8f932e768a9132e2278d71 + checksum: ffcf11b678a8d3e6a243285cb5262c37f4d47d507653420c1f7f0bd27076e88177f2b7158850d1a470fcfe923426a2e6571c554c455a90c9755ff488ac36ac40 languageName: node linkType: hard -"@babel/helper-optimise-call-expression@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/helper-optimise-call-expression@npm:7.22.5" +"@babel/helper-optimise-call-expression@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-optimise-call-expression@npm:7.24.7" dependencies: - "@babel/types": ^7.22.5 - checksum: c70ef6cc6b6ed32eeeec4482127e8be5451d0e5282d5495d5d569d39eb04d7f1d66ec99b327f45d1d5842a9ad8c22d48567e93fc502003a47de78d122e355f7c + "@babel/types": ^7.24.7 + checksum: 280654eaf90e92bf383d7eed49019573fb35a98c9e992668f701ad099957246721044be2068cf6840cb2299e0ad393705a1981c88c23a1048096a8d59e5f79a3 languageName: node linkType: hard -"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.16.7, @babel/helper-plugin-utils@npm:^7.17.12, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.24.0, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3": - version: 7.24.0 - resolution: "@babel/helper-plugin-utils@npm:7.24.0" - checksum: e2baa0eede34d2fa2265947042aa84d444aa48dc51e9feedea55b67fc1bc3ab051387e18b33ca7748285a6061390831ab82f8a2c767d08470b93500ec727e9b9 +"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.16.7, @babel/helper-plugin-utils@npm:^7.17.12, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.24.0, @babel/helper-plugin-utils@npm:^7.24.7, @babel/helper-plugin-utils@npm:^7.24.8, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3": + version: 7.24.8 + resolution: "@babel/helper-plugin-utils@npm:7.24.8" + checksum: 73b1a83ba8bcee21dc94de2eb7323207391715e4369fd55844bb15cf13e3df6f3d13a40786d990e6370bf0f571d94fc31f70dec96c1d1002058258c35ca3767a languageName: node linkType: hard -"@babel/helper-remap-async-to-generator@npm:^7.22.20": - version: 7.22.20 - resolution: "@babel/helper-remap-async-to-generator@npm:7.22.20" +"@babel/helper-remap-async-to-generator@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-remap-async-to-generator@npm:7.24.7" dependencies: - "@babel/helper-annotate-as-pure": ^7.22.5 - "@babel/helper-environment-visitor": ^7.22.20 - "@babel/helper-wrap-function": ^7.22.20 + "@babel/helper-annotate-as-pure": ^7.24.7 + "@babel/helper-environment-visitor": ^7.24.7 + "@babel/helper-wrap-function": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0 - checksum: 2fe6300a6f1b58211dffa0aed1b45d4958506d096543663dba83bd9251fe8d670fa909143a65b45e72acb49e7e20fbdb73eae315d9ddaced467948c3329986e7 + checksum: bab7be178f875350f22a2cb9248f67fe3a8a8128db77a25607096ca7599fd972bc7049fb11ed9e95b45a3f1dd1fac3846a3279f9cbac16f337ecb0e6ca76e1fc languageName: node linkType: hard -"@babel/helper-replace-supers@npm:^7.20.7, @babel/helper-replace-supers@npm:^7.22.20": - version: 7.22.20 - resolution: "@babel/helper-replace-supers@npm:7.22.20" +"@babel/helper-replace-supers@npm:^7.20.7, @babel/helper-replace-supers@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-replace-supers@npm:7.24.7" dependencies: - "@babel/helper-environment-visitor": ^7.22.20 - "@babel/helper-member-expression-to-functions": ^7.22.15 - "@babel/helper-optimise-call-expression": ^7.22.5 + "@babel/helper-environment-visitor": ^7.24.7 + "@babel/helper-member-expression-to-functions": ^7.24.7 + "@babel/helper-optimise-call-expression": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0 - checksum: a0008332e24daedea2e9498733e3c39b389d6d4512637e000f96f62b797e702ee24a407ccbcd7a236a551590a38f31282829a8ef35c50a3c0457d88218cae639 + checksum: 2bf0d113355c60d86a04e930812d36f5691f26c82d4ec1739e5ec0a4c982c9113dad3167f7c74f888a96328bd5e696372232406d8200e5979e6e0dc2af5e7c76 languageName: node linkType: hard -"@babel/helper-simple-access@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/helper-simple-access@npm:7.22.5" +"@babel/helper-simple-access@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-simple-access@npm:7.24.7" dependencies: - "@babel/types": ^7.22.5 - checksum: fe9686714caf7d70aedb46c3cce090f8b915b206e09225f1e4dbc416786c2fdbbee40b38b23c268b7ccef749dd2db35f255338fb4f2444429874d900dede5ad2 + "@babel/traverse": ^7.24.7 + "@babel/types": ^7.24.7 + checksum: ddbf55f9dea1900213f2a1a8500fabfd21c5a20f44dcfa957e4b0d8638c730f88751c77f678644f754f1a1dc73f4eb8b766c300deb45a9daad000e4247957819 languageName: node linkType: hard -"@babel/helper-skip-transparent-expression-wrappers@npm:^7.20.0, @babel/helper-skip-transparent-expression-wrappers@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.22.5" +"@babel/helper-skip-transparent-expression-wrappers@npm:^7.20.0, @babel/helper-skip-transparent-expression-wrappers@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.24.7" dependencies: - "@babel/types": ^7.22.5 - checksum: 1012ef2295eb12dc073f2b9edf3425661e9b8432a3387e62a8bc27c42963f1f216ab3124228015c748770b2257b4f1fda882ca8fa34c0bf485e929ae5bc45244 + "@babel/traverse": ^7.24.7 + "@babel/types": ^7.24.7 + checksum: 11b28fe534ce2b1a67c4d8e51a7b5711a2a0a0cae802f74614eee54cca58c744d9a62f6f60103c41759e81c537d270bfd665bf368a6bea214c6052f2094f8407 languageName: node linkType: hard -"@babel/helper-split-export-declaration@npm:^7.18.6, @babel/helper-split-export-declaration@npm:^7.22.6": - version: 7.22.6 - resolution: "@babel/helper-split-export-declaration@npm:7.22.6" +"@babel/helper-split-export-declaration@npm:^7.18.6, @babel/helper-split-export-declaration@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-split-export-declaration@npm:7.24.7" dependencies: - "@babel/types": ^7.22.5 - checksum: e141cace583b19d9195f9c2b8e17a3ae913b7ee9b8120246d0f9ca349ca6f03cb2c001fd5ec57488c544347c0bb584afec66c936511e447fd20a360e591ac921 + "@babel/types": ^7.24.7 + checksum: e3ddc91273e5da67c6953f4aa34154d005a00791dc7afa6f41894e768748540f6ebcac5d16e72541aea0c89bee4b89b4da6a3d65972a0ea8bfd2352eda5b7e22 languageName: node linkType: hard -"@babel/helper-string-parser@npm:^7.19.4, @babel/helper-string-parser@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/helper-string-parser@npm:7.23.4" - checksum: c0641144cf1a7e7dc93f3d5f16d5327465b6cf5d036b48be61ecba41e1eece161b48f46b7f960951b67f8c3533ce506b16dece576baef4d8b3b49f8c65410f90 +"@babel/helper-string-parser@npm:^7.19.4, @babel/helper-string-parser@npm:^7.24.8": + version: 7.24.8 + resolution: "@babel/helper-string-parser@npm:7.24.8" + checksum: 39b03c5119216883878655b149148dc4d2e284791e969b19467a9411fccaa33f7a713add98f4db5ed519535f70ad273cdadfd2eb54d47ebbdeac5083351328ce languageName: node linkType: hard -"@babel/helper-validator-identifier@npm:^7.22.20": - version: 7.22.20 - resolution: "@babel/helper-validator-identifier@npm:7.22.20" - checksum: 136412784d9428266bcdd4d91c32bcf9ff0e8d25534a9d94b044f77fe76bc50f941a90319b05aafd1ec04f7d127cd57a179a3716009ff7f3412ef835ada95bdc +"@babel/helper-validator-identifier@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-validator-identifier@npm:7.24.7" + checksum: 6799ab117cefc0ecd35cd0b40ead320c621a298ecac88686a14cffceaac89d80cdb3c178f969861bf5fa5e4f766648f9161ea0752ecfe080d8e89e3147270257 languageName: node linkType: hard -"@babel/helper-validator-option@npm:^7.22.15, @babel/helper-validator-option@npm:^7.22.5, @babel/helper-validator-option@npm:^7.23.5": - version: 7.23.5 - resolution: "@babel/helper-validator-option@npm:7.23.5" - checksum: 537cde2330a8aede223552510e8a13e9c1c8798afee3757995a7d4acae564124fe2bf7e7c3d90d62d3657434a74340a274b3b3b1c6f17e9a2be1f48af29cb09e +"@babel/helper-validator-option@npm:^7.22.15, @babel/helper-validator-option@npm:^7.22.5, @babel/helper-validator-option@npm:^7.24.8": + version: 7.24.8 + resolution: "@babel/helper-validator-option@npm:7.24.8" + checksum: a52442dfa74be6719c0608fee3225bd0493c4057459f3014681ea1a4643cd38b68ff477fe867c4b356da7330d085f247f0724d300582fa4ab9a02efaf34d107c languageName: node linkType: hard -"@babel/helper-wrap-function@npm:^7.22.20": - version: 7.22.20 - resolution: "@babel/helper-wrap-function@npm:7.22.20" +"@babel/helper-wrap-function@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-wrap-function@npm:7.24.7" dependencies: - "@babel/helper-function-name": ^7.22.5 - "@babel/template": ^7.22.15 - "@babel/types": ^7.22.19 - checksum: 221ed9b5572612aeb571e4ce6a256f2dee85b3c9536f1dd5e611b0255e5f59a3d0ec392d8d46d4152149156a8109f92f20379b1d6d36abb613176e0e33f05fca + "@babel/helper-function-name": ^7.24.7 + "@babel/template": ^7.24.7 + "@babel/traverse": ^7.24.7 + "@babel/types": ^7.24.7 + checksum: 085bf130ed08670336e3976f5841ae44e3e10001131632e22ef234659341978d2fd37e65785f59b6cb1745481347fc3bce84b33a685cacb0a297afbe1d2b03af languageName: node linkType: hard -"@babel/helpers@npm:^7.24.4": - version: 7.24.4 - resolution: "@babel/helpers@npm:7.24.4" +"@babel/helpers@npm:^7.24.8": + version: 7.24.8 + resolution: "@babel/helpers@npm:7.24.8" dependencies: - "@babel/template": ^7.24.0 - "@babel/traverse": ^7.24.1 - "@babel/types": ^7.24.0 - checksum: ecd2dc0b3b32e24b97fa3bcda432dd3235b77c2be1e16eafc35b8ef8f6c461faa99796a8bc2431a408c98b4aabfd572c160e2b67ecea4c5c9dd3a8314a97994a + "@babel/template": ^7.24.7 + "@babel/types": ^7.24.8 + checksum: 2d7301b1b9c91e518c4766bae171230e243d98461c15eabbd44f8f9c83c297fad5c4a64ad80cfec9ca8e90412fc2b41ee86d7eb35dc8a7611c268bcf1317fe46 languageName: node linkType: hard -"@babel/highlight@npm:^7.24.2": - version: 7.24.2 - resolution: "@babel/highlight@npm:7.24.2" +"@babel/highlight@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/highlight@npm:7.24.7" dependencies: - "@babel/helper-validator-identifier": ^7.22.20 + "@babel/helper-validator-identifier": ^7.24.7 chalk: ^2.4.2 js-tokens: ^4.0.0 picocolors: ^1.0.0 - checksum: 5f17b131cc3ebf3ab285a62cf98a404aef1bd71a6be045e748f8d5bf66d6a6e1aefd62f5972c84369472e8d9f22a614c58a89cd331eb60b7ba965b31b1bbeaf5 + checksum: 5cd3a89f143671c4ac129960024ba678b669e6fc673ce078030f5175002d1d3d52bc10b22c5b916a6faf644b5028e9a4bd2bb264d053d9b05b6a98690f1d46f1 languageName: node linkType: hard -"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.1, @babel/parser@npm:^7.24.4": - version: 7.24.4 - resolution: "@babel/parser@npm:7.24.4" +"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.24.7, @babel/parser@npm:^7.24.8": + version: 7.24.8 + resolution: "@babel/parser@npm:7.24.8" bin: parser: ./bin/babel-parser.js - checksum: 94c9e3e592894cd6fc57c519f4e06b65463df9be5f01739bb0d0bfce7ffcf99b3c2fdadd44dc59cc858ba2739ce6e469813a941c2f2dfacf333a3b2c9c5c8465 + checksum: 76f866333bfbd53800ac027419ae523bb0137fc63daa968232eb780e4390136bb6e497cb4a2cf6051a2c318aa335c2e6d2adc17079d60691ae7bde89b28c5688 languageName: node linkType: hard -"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.23.3" +"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-environment-visitor": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0 - checksum: ddbaf2c396b7780f15e80ee01d6dd790db076985f3dfeb6527d1a8d4cacf370e49250396a3aa005b2c40233cac214a106232f83703d5e8491848bde273938232 + checksum: 68d315642b53af143aa17a71eb976cf431b51339aee584e29514a462b81c998636dd54219c2713b5f13e1df89eaf130dfab59683f9116825608708c81696b96c languageName: node linkType: hard -"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.23.3" +"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 - "@babel/helper-skip-transparent-expression-wrappers": ^7.22.5 - "@babel/plugin-transform-optional-chaining": ^7.23.3 + "@babel/helper-plugin-utils": ^7.24.7 + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 7eb4e7ce5e3d6db4b0fdbdfaaa301c2e58f38a7ee39d5a4259a1fda61a612e83d3e4bc90fc36fb0345baf57e1e1a071e0caffeb80218623ad163f2fdc2e53a54 + languageName: node + linkType: hard + +"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.24.7" + dependencies: + "@babel/helper-plugin-utils": ^7.24.7 + "@babel/helper-skip-transparent-expression-wrappers": ^7.24.7 + "@babel/plugin-transform-optional-chaining": ^7.24.7 peerDependencies: "@babel/core": ^7.13.0 - checksum: 434b9d710ae856fa1a456678cc304fbc93915af86d581ee316e077af746a709a741ea39d7e1d4f5b98861b629cc7e87f002d3138f5e836775632466d4c74aef2 + checksum: 07b92878ac58a98ea1fdf6a8b4ec3413ba4fa66924e28b694d63ec5b84463123fbf4d7153b56cf3cedfef4a3482c082fe3243c04f8fb2c041b32b0e29b4a9e21 languageName: node linkType: hard -"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.7": - version: 7.23.7 - resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.7" +"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.24.7" dependencies: - "@babel/helper-environment-visitor": ^7.22.20 - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-environment-visitor": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0 - checksum: f88e400b548202a6f8c5dfd25bc4949a13ea1ccb64a170d7dea4deaa655a0fcb001d3fd61c35e1ad9c09a3d5f0d43f783400425471fe6d660ccaf33dabea9aba + checksum: 8324d458db57060590942c7c2e9603880d07718ccb6450ec935105b8bd3c4393c4b8ada88e178c232258d91f33ffdcf2b1043d54e07a86989e50667ee100a32e languageName: node linkType: hard @@ -1451,25 +1459,25 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-import-assertions@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-syntax-import-assertions@npm:7.23.3" +"@babel/plugin-syntax-import-assertions@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-syntax-import-assertions@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 883e6b35b2da205138caab832d54505271a3fee3fc1e8dc0894502434fc2b5d517cbe93bbfbfef8068a0fb6ec48ebc9eef3f605200a489065ba43d8cddc1c9a7 + checksum: c4d67be4eb1d4637e361477dbe01f5b392b037d17c1f861cfa0faa120030e137aab90a9237931b8040fd31d1e5d159e11866fa1165f78beef7a3be876a391a17 languageName: node linkType: hard -"@babel/plugin-syntax-import-attributes@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-syntax-import-attributes@npm:7.23.3" +"@babel/plugin-syntax-import-attributes@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-syntax-import-attributes@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 9aed7661ffb920ca75df9f494757466ca92744e43072e0848d87fa4aa61a3f2ee5a22198ac1959856c036434b5614a8f46f1fb70298835dbe28220cdd1d4c11e + checksum: 590dbb5d1a15264f74670b427b8d18527672c3d6c91d7bae7e65f80fd810edbc83d90e68065088644cbad3f2457ed265a54a9956fb789fcb9a5b521822b3a275 languageName: node linkType: hard @@ -1617,188 +1625,188 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-arrow-functions@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-arrow-functions@npm:7.23.3" +"@babel/plugin-transform-arrow-functions@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-arrow-functions@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 1e99118176e5366c2636064d09477016ab5272b2a92e78b8edb571d20bc3eaa881789a905b20042942c3c2d04efc530726cf703f937226db5ebc495f5d067e66 + checksum: 707c209b5331c7dc79bd326128c6a6640dbd62a78da1653c844db20c4f36bf7b68454f1bc4d2d051b3fde9136fa291f276ec03a071bb00ee653069ff82f91010 languageName: node linkType: hard -"@babel/plugin-transform-async-generator-functions@npm:^7.23.9": - version: 7.23.9 - resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.9" +"@babel/plugin-transform-async-generator-functions@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-async-generator-functions@npm:7.24.7" dependencies: - "@babel/helper-environment-visitor": ^7.22.20 - "@babel/helper-plugin-utils": ^7.22.5 - "@babel/helper-remap-async-to-generator": ^7.22.20 + "@babel/helper-environment-visitor": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 + "@babel/helper-remap-async-to-generator": ^7.24.7 "@babel/plugin-syntax-async-generators": ^7.8.4 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: d402494087a6b803803eb5ab46b837aab100a04c4c5148e38bfa943ea1bbfc1ecfb340f1ced68972564312d3580f550c125f452372e77607a558fbbaf98c31c0 + checksum: 112e3b18f9c496ebc01209fc27f0b41a3669c479c7bc44f7249383172b432ebaae1e523caa7c6ecbd2d0d7adcb7e5769fe2798f8cb01c08cd57232d1bb6d8ad4 languageName: node linkType: hard -"@babel/plugin-transform-async-to-generator@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-async-to-generator@npm:7.23.3" +"@babel/plugin-transform-async-to-generator@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-async-to-generator@npm:7.24.7" dependencies: - "@babel/helper-module-imports": ^7.22.15 - "@babel/helper-plugin-utils": ^7.22.5 - "@babel/helper-remap-async-to-generator": ^7.22.20 + "@babel/helper-module-imports": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 + "@babel/helper-remap-async-to-generator": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 2e9d9795d4b3b3d8090332104e37061c677f29a1ce65bcbda4099a32d243e5d9520270a44bbabf0fb1fb40d463bd937685b1a1042e646979086c546d55319c3c + checksum: 13704fb3b83effc868db2b71bfb2c77b895c56cb891954fc362e95e200afd523313b0e7cf04ce02f45b05e76017c5b5fa8070c92613727a35131bb542c253a36 languageName: node linkType: hard -"@babel/plugin-transform-block-scoped-functions@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.23.3" +"@babel/plugin-transform-block-scoped-functions@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: e63b16d94ee5f4d917e669da3db5ea53d1e7e79141a2ec873c1e644678cdafe98daa556d0d359963c827863d6b3665d23d4938a94a4c5053a1619c4ebd01d020 + checksum: 249cdcbff4e778b177245f9652b014ea4f3cd245d83297f10a7bf6d97790074089aa62bcde8c08eb299c5e68f2faed346b587d3ebac44d625ba9a83a4ee27028 languageName: node linkType: hard -"@babel/plugin-transform-block-scoping@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-block-scoping@npm:7.23.4" +"@babel/plugin-transform-block-scoping@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-block-scoping@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: fc4b2100dd9f2c47d694b4b35ae8153214ccb4e24ef545c259a9db17211b18b6a430f22799b56db8f6844deaeaa201af45a03331d0c80cc28b0c4e3c814570e4 + checksum: 039206155533600f079f3a455f85888dd7d4970ff7ffa85ef44760f4f5acb9f19c9d848cc1fec1b9bdbc0dfec9e8a080b90d0ab66ad2bdc7138b5ca4ba96e61c languageName: node linkType: hard -"@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-class-properties@npm:7.23.3" +"@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-class-properties@npm:7.24.7" dependencies: - "@babel/helper-create-class-features-plugin": ^7.22.15 - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-create-class-features-plugin": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 9c6f8366f667897541d360246de176dd29efc7a13d80a5b48361882f7173d9173be4646c3b7d9b003ccc0e01e25df122330308f33db921fa553aa17ad544b3fc + checksum: 1348d7ce74da38ba52ea85b3b4289a6a86913748569ef92ef0cff30702a9eb849e5eaf59f1c6f3517059aa68115fb3067e389735dccacca39add4e2b0c67e291 languageName: node linkType: hard -"@babel/plugin-transform-class-static-block@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-class-static-block@npm:7.23.4" +"@babel/plugin-transform-class-static-block@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-class-static-block@npm:7.24.7" dependencies: - "@babel/helper-create-class-features-plugin": ^7.22.15 - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-create-class-features-plugin": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 "@babel/plugin-syntax-class-static-block": ^7.14.5 peerDependencies: "@babel/core": ^7.12.0 - checksum: c8bfaba19a674fc2eb54edad71e958647360474e3163e8226f1acd63e4e2dbec32a171a0af596c1dc5359aee402cc120fea7abd1fb0e0354b6527f0fc9e8aa1e + checksum: 324049263504f18416f1c3e24033baebfafd05480fdd885c8ebe6f2b415b0fc8e0b98d719360f9e30743cc78ac387fabc0b3c6606d2b54135756ffb92963b382 languageName: node linkType: hard -"@babel/plugin-transform-classes@npm:^7.23.8": - version: 7.23.8 - resolution: "@babel/plugin-transform-classes@npm:7.23.8" +"@babel/plugin-transform-classes@npm:^7.24.8": + version: 7.24.8 + resolution: "@babel/plugin-transform-classes@npm:7.24.8" dependencies: - "@babel/helper-annotate-as-pure": ^7.22.5 - "@babel/helper-compilation-targets": ^7.23.6 - "@babel/helper-environment-visitor": ^7.22.20 - "@babel/helper-function-name": ^7.23.0 - "@babel/helper-plugin-utils": ^7.22.5 - "@babel/helper-replace-supers": ^7.22.20 - "@babel/helper-split-export-declaration": ^7.22.6 + "@babel/helper-annotate-as-pure": ^7.24.7 + "@babel/helper-compilation-targets": ^7.24.8 + "@babel/helper-environment-visitor": ^7.24.7 + "@babel/helper-function-name": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.8 + "@babel/helper-replace-supers": ^7.24.7 + "@babel/helper-split-export-declaration": ^7.24.7 globals: ^11.1.0 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 7dee6cebe52131d2d16944f36e1fdb9d4b24f44d0e7e450f93a44435d001f17cc0789a4cb6b15ec67c8e484581b8a730b5c3ec374470f29ff0133086955b8c58 + checksum: 9c0f547d67e255b37055461df9c1a578c29bf59c7055bd5b40b07b92e5448af3ca8d853d50056125b7dae9bfe3a4cf1559d61b9ccbc3d2578dd43f15386f12fe languageName: node linkType: hard -"@babel/plugin-transform-computed-properties@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-computed-properties@npm:7.23.3" +"@babel/plugin-transform-computed-properties@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-computed-properties@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 - "@babel/template": ^7.22.15 + "@babel/helper-plugin-utils": ^7.24.7 + "@babel/template": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 80452661dc25a0956f89fe98cb562e8637a9556fb6c00d312c57653ce7df8798f58d138603c7e1aad96614ee9ccd10c47e50ab9ded6b6eded5adeb230d2a982e + checksum: 0cf8c1b1e4ea57dec8d4612460d84fd4cdbf71a7499bb61ee34632cf89018a59eee818ffca88a8d99ee7057c20a4257044d7d463fda6daef9bf1db9fa81563cb languageName: node linkType: hard -"@babel/plugin-transform-destructuring@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-destructuring@npm:7.23.3" +"@babel/plugin-transform-destructuring@npm:^7.24.8": + version: 7.24.8 + resolution: "@babel/plugin-transform-destructuring@npm:7.24.8" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.8 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 9e015099877272501162419bfe781689aec5c462cd2aec752ee22288f209eec65969ff11b8fdadca2eaddea71d705d3bba5b9c60752fcc1be67874fcec687105 + checksum: 0b4bd3d608979a1e5bd97d9d42acd5ad405c7fffa61efac4c7afd8e86ea6c2d91ab2d94b6a98d63919571363fe76e0b03c4ff161f0f60241b895842596e4a999 languageName: node linkType: hard -"@babel/plugin-transform-dotall-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-dotall-regex@npm:7.23.3" +"@babel/plugin-transform-dotall-regex@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-dotall-regex@npm:7.24.7" dependencies: - "@babel/helper-create-regexp-features-plugin": ^7.22.15 - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-create-regexp-features-plugin": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: a2dbbf7f1ea16a97948c37df925cb364337668c41a3948b8d91453f140507bd8a3429030c7ce66d09c299987b27746c19a2dd18b6f17dcb474854b14fd9159a3 + checksum: 67b10fc6abb1f61f0e765288eb4c6d63d1d0f9fc0660e69f6f2170c56fa16bc74e49857afc644beda112b41771cd90cf52df0940d11e97e52617c77c7dcff171 languageName: node linkType: hard -"@babel/plugin-transform-duplicate-keys@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-duplicate-keys@npm:7.23.3" +"@babel/plugin-transform-duplicate-keys@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-duplicate-keys@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: c2a21c34dc0839590cd945192cbc46fde541a27e140c48fe1808315934664cdbf18db64889e23c4eeb6bad9d3e049482efdca91d29de5734ffc887c4fbabaa16 + checksum: d1da2ff85ecb56a63f4ccfd9dc9ae69400d85f0dadf44ecddd9e71c6e5c7a9178e74e3a9637555f415a2bb14551e563f09f98534ab54f53d25e8439fdde6ba2d languageName: node linkType: hard -"@babel/plugin-transform-dynamic-import@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-dynamic-import@npm:7.23.4" +"@babel/plugin-transform-dynamic-import@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-dynamic-import@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 "@babel/plugin-syntax-dynamic-import": ^7.8.3 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 57a722604c430d9f3dacff22001a5f31250e34785d4969527a2ae9160fa86858d0892c5b9ff7a06a04076f8c76c9e6862e0541aadca9c057849961343aab0845 + checksum: 776509ff62ab40c12be814a342fc56a5cc09b91fb63032b2633414b635875fd7da03734657be0f6db2891fe6e3033b75d5ddb6f2baabd1a02e4443754a785002 languageName: node linkType: hard -"@babel/plugin-transform-exponentiation-operator@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.23.3" +"@babel/plugin-transform-exponentiation-operator@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.24.7" dependencies: - "@babel/helper-builder-binary-assignment-operator-visitor": ^7.22.15 - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-builder-binary-assignment-operator-visitor": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 00d05ab14ad0f299160fcf9d8f55a1cc1b740e012ab0b5ce30207d2365f091665115557af7d989cd6260d075a252d9e4283de5f2b247dfbbe0e42ae586e6bf66 + checksum: 23c84a23eb56589fdd35a3540f9a1190615be069110a2270865223c03aee3ba4e0fc68fe14850800cf36f0712b26e4964d3026235261f58f0405a29fe8dac9b1 languageName: node linkType: hard -"@babel/plugin-transform-export-namespace-from@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-export-namespace-from@npm:7.23.4" +"@babel/plugin-transform-export-namespace-from@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-export-namespace-from@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 "@babel/plugin-syntax-export-namespace-from": ^7.8.3 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 9f770a81bfd03b48d6ba155d452946fd56d6ffe5b7d871e9ec2a0b15e0f424273b632f3ed61838b90015b25bbda988896b7a46c7d964fbf8f6feb5820b309f93 + checksum: 3bd3a10038f10ae0dea1ee42137f3edcf7036b5e9e570a0d1cbd0865f03658990c6c2d84fa2475f87a754e7dc5b46766c16f7ce5c9b32c3040150b6a21233a80 languageName: node linkType: hard @@ -1814,272 +1822,271 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-for-of@npm:^7.23.6": - version: 7.23.6 - resolution: "@babel/plugin-transform-for-of@npm:7.23.6" +"@babel/plugin-transform-for-of@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-for-of@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 - "@babel/helper-skip-transparent-expression-wrappers": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 + "@babel/helper-skip-transparent-expression-wrappers": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 228c060aa61f6aa89dc447170075f8214863b94f830624e74ade99c1a09316897c12d76e848460b0b506593e58dbc42739af6dc4cb0fe9b84dffe4a596050a36 + checksum: a53b42dc93ab4b7d1ebd3c695b52be22b3d592f6a3dbdb3dc2fea2c8e0a7e1508fe919864c455cde552aec44ce7518625fccbb70c7063373ca228d884f4f49ea languageName: node linkType: hard -"@babel/plugin-transform-function-name@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-function-name@npm:7.23.3" +"@babel/plugin-transform-function-name@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-function-name@npm:7.24.7" dependencies: - "@babel/helper-compilation-targets": ^7.22.15 - "@babel/helper-function-name": ^7.23.0 - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-compilation-targets": ^7.24.7 + "@babel/helper-function-name": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 355c6dbe07c919575ad42b2f7e020f320866d72f8b79181a16f8e0cd424a2c761d979f03f47d583d9471b55dcd68a8a9d829b58e1eebcd572145b934b48975a6 + checksum: 8eb1a67894a124910b5a67630bed4307757504381f39f0fb5cf82afc7ae8647dbc03b256d13865b73a749b9071b68e9fb8a28cef2369917b4299ebb93fd66146 languageName: node linkType: hard -"@babel/plugin-transform-json-strings@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-json-strings@npm:7.23.4" +"@babel/plugin-transform-json-strings@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-json-strings@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 "@babel/plugin-syntax-json-strings": ^7.8.3 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: f9019820233cf8955d8ba346df709a0683c120fe86a24ed1c9f003f2db51197b979efc88f010d558a12e1491210fc195a43cd1c7fee5e23b92da38f793a875de + checksum: 88874d0b7a1ddea66c097fc0abb68801ffae194468aa44b828dde9a0e20ac5d8647943793de86092eabaa2911c96f67a6b373793d4bb9c932ef81b2711c06c2e languageName: node linkType: hard -"@babel/plugin-transform-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-literals@npm:7.23.3" +"@babel/plugin-transform-literals@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-literals@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 519a544cd58586b9001c4c9b18da25a62f17d23c48600ff7a685d75ca9eb18d2c5e8f5476f067f0a8f1fea2a31107eff950b9864833061e6076dcc4bdc3e71ed + checksum: 3c075cc093a3dd9e294b8b7d6656e65f889e7ca2179ca27978dcd65b4dc4885ebbfb327408d7d8f483c55547deed00ba840956196f3ac8a3c3d2308a330a8c23 languageName: node linkType: hard -"@babel/plugin-transform-logical-assignment-operators@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.23.4" +"@babel/plugin-transform-logical-assignment-operators@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 "@babel/plugin-syntax-logical-assignment-operators": ^7.10.4 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 2ae1dc9b4ff3bf61a990ff3accdecb2afe3a0ca649b3e74c010078d1cdf29ea490f50ac0a905306a2bcf9ac177889a39ac79bdcc3a0fdf220b3b75fac18d39b5 + checksum: 3367ce0be243704dc6fce23e86a592c4380f01998ee5dd9f94c54b1ef7b971ac6f8a002901eb51599ac6cbdc0d067af8d1a720224fca1c40fde8bb8aab804aac languageName: node linkType: hard -"@babel/plugin-transform-member-expression-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-member-expression-literals@npm:7.23.3" +"@babel/plugin-transform-member-expression-literals@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-member-expression-literals@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 95cec13c36d447c5aa6b8e4c778b897eeba66dcb675edef01e0d2afcec9e8cb9726baf4f81b4bbae7a782595aed72e6a0d44ffb773272c3ca180fada99bf92db + checksum: 2720c57aa3bf70576146ba7d6ea03227f4611852122d76d237924f7b008dafc952e6ae61a19e5024f26c665f44384bbd378466f01b6bd1305b3564a3b7fb1a5d languageName: node linkType: hard -"@babel/plugin-transform-modules-amd@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-modules-amd@npm:7.23.3" +"@babel/plugin-transform-modules-amd@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-modules-amd@npm:7.24.7" dependencies: - "@babel/helper-module-transforms": ^7.23.3 - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-module-transforms": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: d163737b6a3d67ea579c9aa3b83d4df4b5c34d9dcdf25f415f027c0aa8cded7bac2750d2de5464081f67a042ad9e1c03930c2fab42acd79f9e57c00cf969ddff + checksum: f1dd0fb2f46c0f8f21076b8c7ccd5b33a85ce6dcb31518ea4c648d9a5bb2474cd4bd87c9b1b752e68591e24b022e334ba0d07631fef2b6b4d8a4b85cf3d581f5 languageName: node linkType: hard -"@babel/plugin-transform-modules-commonjs@npm:^7.23.0, @babel/plugin-transform-modules-commonjs@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-modules-commonjs@npm:7.23.3" +"@babel/plugin-transform-modules-commonjs@npm:^7.23.0, @babel/plugin-transform-modules-commonjs@npm:^7.23.3, @babel/plugin-transform-modules-commonjs@npm:^7.24.8": + version: 7.24.8 + resolution: "@babel/plugin-transform-modules-commonjs@npm:7.24.8" dependencies: - "@babel/helper-module-transforms": ^7.23.3 - "@babel/helper-plugin-utils": ^7.22.5 - "@babel/helper-simple-access": ^7.22.5 + "@babel/helper-module-transforms": ^7.24.8 + "@babel/helper-plugin-utils": ^7.24.8 + "@babel/helper-simple-access": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 720a231ceade4ae4d2632478db4e7fecf21987d444942b72d523487ac8d715ca97de6c8f415c71e939595e1a4776403e7dc24ed68fe9125ad4acf57753c9bff7 + checksum: a4cf95b1639c33382064b44558f73ee5fac023f2a94d16e549d2bb55ceebd5cbc10fcddd505d08cd5bc97f5a64af9fd155512358b7dcf7b1a0082e8945cf21c5 languageName: node linkType: hard -"@babel/plugin-transform-modules-systemjs@npm:^7.23.9": - version: 7.23.9 - resolution: "@babel/plugin-transform-modules-systemjs@npm:7.23.9" +"@babel/plugin-transform-modules-systemjs@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-modules-systemjs@npm:7.24.7" dependencies: - "@babel/helper-hoist-variables": ^7.22.5 - "@babel/helper-module-transforms": ^7.23.3 - "@babel/helper-plugin-utils": ^7.22.5 - "@babel/helper-validator-identifier": ^7.22.20 + "@babel/helper-hoist-variables": ^7.24.7 + "@babel/helper-module-transforms": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 + "@babel/helper-validator-identifier": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: cec6abeae6be66fd1a5940c482fe9ff94b689c71fcf4147e179119e4accd09d17d476e36528bc9cb4ab0ec6728fedf48b1c49d0551ea707fb192575d8eac9167 + checksum: 8af7a9db2929991d82cfdf41fb175dee344274d39b39122f8c35f24b5d682f98368e3d8f5130401298bd21412df21d416a7d8b33b59c334fae3d3c762118b1d8 languageName: node linkType: hard -"@babel/plugin-transform-modules-umd@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-modules-umd@npm:7.23.3" +"@babel/plugin-transform-modules-umd@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-modules-umd@npm:7.24.7" dependencies: - "@babel/helper-module-transforms": ^7.23.3 - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-module-transforms": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 586a7a2241e8b4e753a37af9466a9ffa8a67b4ba9aa756ad7500712c05d8fa9a8c1ed4f7bd25fae2a8265e6cf8fe781ec85a8ee885dd34cf50d8955ee65f12dc + checksum: 9ff1c464892efe042952ba778468bda6131b196a2729615bdcc3f24cdc94014f016a4616ee5643c5845bade6ba698f386833e61056d7201314b13a7fd69fac88 languageName: node linkType: hard -"@babel/plugin-transform-named-capturing-groups-regex@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/plugin-transform-named-capturing-groups-regex@npm:7.22.5" +"@babel/plugin-transform-named-capturing-groups-regex@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-named-capturing-groups-regex@npm:7.24.7" dependencies: - "@babel/helper-create-regexp-features-plugin": ^7.22.5 - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-create-regexp-features-plugin": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0 - checksum: 3ee564ddee620c035b928fdc942c5d17e9c4b98329b76f9cefac65c111135d925eb94ed324064cd7556d4f5123beec79abea1d4b97d1c8a2a5c748887a2eb623 + checksum: f1c6c7b5d60a86b6d7e4dd098798e1d393d55e993a0b57a73b53640c7a94985b601a96bdacee063f809a9a700bcea3a2ff18e98fa561554484ac56b761d774bd languageName: node linkType: hard -"@babel/plugin-transform-new-target@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-new-target@npm:7.23.3" +"@babel/plugin-transform-new-target@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-new-target@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: e5053389316fce73ad5201b7777437164f333e24787fbcda4ae489cd2580dbbbdfb5694a7237bad91fabb46b591d771975d69beb1c740b82cb4761625379f00b + checksum: 3cb94cd1076b270f768f91fdcf9dd2f6d487f8dbfff3df7ca8d07b915900b86d02769a35ba1407d16fe49499012c8f055e1741299e2c880798b953d942a8fa1b languageName: node linkType: hard -"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.23.4" +"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 "@babel/plugin-syntax-nullish-coalescing-operator": ^7.8.3 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: a27d73ea134d3d9560a6b2e26ab60012fba15f1db95865aa0153c18f5ec82cfef6a7b3d8df74e3c2fca81534fa5efeb6cacaf7b08bdb7d123e3dafdd079886a3 + checksum: 4a9221356401d87762afbc37a9e8e764afc2daf09c421117537820f8cfbed6876888372ad3a7bcfae2d45c95f026651f050ab4020b777be31d3ffb00908dbdd3 languageName: node linkType: hard -"@babel/plugin-transform-numeric-separator@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-numeric-separator@npm:7.23.4" +"@babel/plugin-transform-numeric-separator@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-numeric-separator@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 "@babel/plugin-syntax-numeric-separator": ^7.10.4 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 6ba0e5db3c620a3ec81f9e94507c821f483c15f196868df13fa454cbac719a5449baf73840f5b6eb7d77311b24a2cf8e45db53700d41727f693d46f7caf3eec3 + checksum: 561b5f1d08b2c3f92ce849f092751558b5e6cfeb7eb55c79e7375c34dd9c3066dce5e630bb439affef6adcf202b6cbcaaa23870070276fa5bb429c8f5b8c7514 languageName: node linkType: hard -"@babel/plugin-transform-object-rest-spread@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-object-rest-spread@npm:7.23.4" +"@babel/plugin-transform-object-rest-spread@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-object-rest-spread@npm:7.24.7" dependencies: - "@babel/compat-data": ^7.23.3 - "@babel/helper-compilation-targets": ^7.22.15 - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-compilation-targets": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 "@babel/plugin-syntax-object-rest-spread": ^7.8.3 - "@babel/plugin-transform-parameters": ^7.23.3 + "@babel/plugin-transform-parameters": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 73fec495e327ca3959c1c03d07a621be09df00036c69fff0455af9a008291677ee9d368eec48adacdc6feac703269a649747568b4af4c4e9f134aa71cc5b378d + checksum: 169d257b9800c13e1feb4c37fb05dae84f702e58b342bb76e19e82e6692b7b5337c9923ee89e3916a97c0dd04a3375bdeca14f5e126f110bbacbeb46d1886ca2 languageName: node linkType: hard -"@babel/plugin-transform-object-super@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-object-super@npm:7.23.3" +"@babel/plugin-transform-object-super@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-object-super@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 - "@babel/helper-replace-supers": ^7.22.20 + "@babel/helper-plugin-utils": ^7.24.7 + "@babel/helper-replace-supers": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: e495497186f621fa79026e183b4f1fbb172fd9df812cbd2d7f02c05b08adbe58012b1a6eb6dd58d11a30343f6ec80d0f4074f9b501d70aa1c94df76d59164c53 + checksum: f71e607a830ee50a22fa1a2686524d3339440cf9dea63032f6efbd865cfe4e35000e1e3f3492459e5c986f7c0c07dc36938bf3ce61fc9ba5f8ab732d0b64ab37 languageName: node linkType: hard -"@babel/plugin-transform-optional-catch-binding@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.23.4" +"@babel/plugin-transform-optional-catch-binding@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 "@babel/plugin-syntax-optional-catch-binding": ^7.8.3 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: d50b5ee142cdb088d8b5de1ccf7cea85b18b85d85b52f86618f6e45226372f01ad4cdb29abd4fd35ea99a71fefb37009e0107db7a787dcc21d4d402f97470faf + checksum: 7229f3a5a4facaab40f4fdfc7faabc157dc38a67d66bed7936599f4bc509e0bff636f847ac2aa45294881fce9cf8a0a460b85d2a465b7b977de9739fce9b18f6 languageName: node linkType: hard -"@babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.23.3, @babel/plugin-transform-optional-chaining@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-optional-chaining@npm:7.23.4" +"@babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.24.7, @babel/plugin-transform-optional-chaining@npm:^7.24.8": + version: 7.24.8 + resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.8" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 - "@babel/helper-skip-transparent-expression-wrappers": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.8 + "@babel/helper-skip-transparent-expression-wrappers": ^7.24.7 "@babel/plugin-syntax-optional-chaining": ^7.8.3 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: e7a4c08038288057b7a08d68c4d55396ada9278095509ca51ed8dfb72a7f13f26bdd7c5185de21079fe0a9d60d22c227cb32e300d266c1bda40f70eee9f4bc1e + checksum: 45e55e3a2fffb89002d3f89aef59c141610f23b60eee41e047380bffc40290b59f64fc649aa7ec5281f73d41b2065410d788acc6afaad2a9f44cad6e8af04442 languageName: node linkType: hard -"@babel/plugin-transform-parameters@npm:^7.20.7, @babel/plugin-transform-parameters@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-parameters@npm:7.23.3" +"@babel/plugin-transform-parameters@npm:^7.20.7, @babel/plugin-transform-parameters@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-parameters@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: a735b3e85316d17ec102e3d3d1b6993b429bdb3b494651c9d754e3b7d270462ee1f1a126ccd5e3d871af5e683727e9ef98c9d34d4a42204fffaabff91052ed16 + checksum: ab534b03ac2eff94bc79342b8f39a4584666f5305a6c63c1964afda0b1b004e6b861e49d1683548030defe248e3590d3ff6338ee0552cb90c064f7e1479968c3 languageName: node linkType: hard -"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-private-methods@npm:7.23.3" +"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-private-methods@npm:7.24.7" dependencies: - "@babel/helper-create-class-features-plugin": ^7.22.15 - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-create-class-features-plugin": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: cedc1285c49b5a6d9a3d0e5e413b756ac40b3ac2f8f68bdfc3ae268bc8d27b00abd8bb0861c72756ff5dd8bf1eb77211b7feb5baf4fdae2ebbaabe49b9adc1d0 + checksum: c151548e34909be2adcceb224d8fdd70bafa393bc1559a600906f3f647317575bf40db670470934a360e90ee8084ef36dffa34ec25d387d414afd841e74cf3fe languageName: node linkType: hard -"@babel/plugin-transform-private-property-in-object@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-private-property-in-object@npm:7.23.4" +"@babel/plugin-transform-private-property-in-object@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-private-property-in-object@npm:7.24.7" dependencies: - "@babel/helper-annotate-as-pure": ^7.22.5 - "@babel/helper-create-class-features-plugin": ^7.22.15 - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-annotate-as-pure": ^7.24.7 + "@babel/helper-create-class-features-plugin": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 "@babel/plugin-syntax-private-property-in-object": ^7.14.5 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: fb7adfe94ea97542f250a70de32bddbc3e0b802381c92be947fec83ebffda57e68533c4d0697152719a3496fdd3ebf3798d451c024cd4ac848fc15ac26b70aa7 + checksum: 8cee9473095305cc787bb653fd681719b49363281feabf677db8a552e8e41c94441408055d7e5fd5c7d41b315e634fa70b145ad0c7c54456216049df4ed57350 languageName: node linkType: hard -"@babel/plugin-transform-property-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-property-literals@npm:7.23.3" +"@babel/plugin-transform-property-literals@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-property-literals@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 16b048c8e87f25095f6d53634ab7912992f78e6997a6ff549edc3cf519db4fca01c7b4e0798530d7f6a05228ceee479251245cdd850a5531c6e6f404104d6cc9 + checksum: 9aeefc3aab6c6bf9d1fae1cf3a2d38c7d886fd3c6c81b7c608c477f5758aee2e7abf52f32724310fe861da61af934ee2508b78a5b5f234b9740c9134e1c14437 languageName: node linkType: hard @@ -2165,26 +2172,26 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-regenerator@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-regenerator@npm:7.23.3" +"@babel/plugin-transform-regenerator@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-regenerator@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 regenerator-transform: ^0.15.2 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 7fdacc7b40008883871b519c9e5cdea493f75495118ccc56ac104b874983569a24edd024f0f5894ba1875c54ee2b442f295d6241c3280e61c725d0dd3317c8e6 + checksum: 20c6c3fb6fc9f407829087316653388d311e8c1816b007609bb09aeef254092a7157adace8b3aaa8f34be752503717cb85c88a5fe482180a9b11bcbd676063be languageName: node linkType: hard -"@babel/plugin-transform-reserved-words@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-reserved-words@npm:7.23.3" +"@babel/plugin-transform-reserved-words@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-reserved-words@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 298c4440ddc136784ff920127cea137168e068404e635dc946ddb5d7b2a27b66f1dd4c4acb01f7184478ff7d5c3e7177a127279479926519042948fb7fa0fa48 + checksum: 3d5876954d5914d7270819479504f30c4bf5452a65c677f44e2dab2db50b3c9d4b47793c45dfad7abf4f377035dd79e4b3f554ae350df9f422201d370ce9f8dd languageName: node linkType: hard @@ -2204,59 +2211,59 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-shorthand-properties@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-shorthand-properties@npm:7.23.3" +"@babel/plugin-transform-shorthand-properties@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-shorthand-properties@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 5d677a03676f9fff969b0246c423d64d77502e90a832665dc872a5a5e05e5708161ce1effd56bb3c0f2c20a1112fca874be57c8a759d8b08152755519281f326 + checksum: 7b524245814607188212b8eb86d8c850e5974203328455a30881b4a92c364b93353fae14bc2af5b614ef16300b75b8c1d3b8f3a08355985b4794a7feb240adc3 languageName: node linkType: hard -"@babel/plugin-transform-spread@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-spread@npm:7.23.3" +"@babel/plugin-transform-spread@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-spread@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 - "@babel/helper-skip-transparent-expression-wrappers": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 + "@babel/helper-skip-transparent-expression-wrappers": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 8fd5cac201e77a0b4825745f4e07a25f923842f282f006b3a79223c00f61075c8868d12eafec86b2642cd0b32077cdd32314e27bcb75ee5e6a68c0144140dcf2 + checksum: 4c4254c8b9cceb1a8f975fa9b92257ddb08380a35c0a3721b8f4b9e13a3d82e403af2e0fba577b9f2452dd8f06bc3dea71cc53b1e2c6af595af5db52a13429d6 languageName: node linkType: hard -"@babel/plugin-transform-sticky-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-sticky-regex@npm:7.23.3" +"@babel/plugin-transform-sticky-regex@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-sticky-regex@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 53e55eb2575b7abfdb4af7e503a2bf7ef5faf8bf6b92d2cd2de0700bdd19e934e5517b23e6dfed94ba50ae516b62f3f916773ef7d9bc81f01503f585051e2949 + checksum: 118fc7a7ebf7c20411b670c8a030535fdfe4a88bc5643bb625a584dbc4c8a468da46430a20e6bf78914246962b0f18f1b9d6a62561a7762c4f34a038a5a77179 languageName: node linkType: hard -"@babel/plugin-transform-template-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-template-literals@npm:7.23.3" +"@babel/plugin-transform-template-literals@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-template-literals@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: b16c5cb0b8796be0118e9c144d15bdc0d20a7f3f59009c6303a6e9a8b74c146eceb3f05186f5b97afcba7cfa87e34c1585a22186e3d5b22f2fd3d27d959d92b2 + checksum: ad44e5826f5a98c1575832dbdbd033adfe683cdff195e178528ead62507564bf02f479b282976cfd3caebad8b06d5fd7349c1cdb880dec3c56daea4f1f179619 languageName: node linkType: hard -"@babel/plugin-transform-typeof-symbol@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-typeof-symbol@npm:7.23.3" +"@babel/plugin-transform-typeof-symbol@npm:^7.24.8": + version: 7.24.8 + resolution: "@babel/plugin-transform-typeof-symbol@npm:7.24.8" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.8 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 0af7184379d43afac7614fc89b1bdecce4e174d52f4efaeee8ec1a4f2c764356c6dba3525c0685231f1cbf435b6dd4ee9e738d7417f3b10ce8bbe869c32f4384 + checksum: 8663a8e7347cedf181001d99c88cf794b6598c3d82f324098510fe8fb8bd22113995526a77aa35a3cc5d70ffd0617a59dd0d10311a9bf0e1a3a7d3e59b900c00 languageName: node linkType: hard @@ -2274,72 +2281,73 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-unicode-escapes@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-escapes@npm:7.23.3" +"@babel/plugin-transform-unicode-escapes@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-unicode-escapes@npm:7.24.7" dependencies: - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 561c429183a54b9e4751519a3dfba6014431e9cdc1484fad03bdaf96582dfc72c76a4f8661df2aeeae7c34efd0fa4d02d3b83a2f63763ecf71ecc925f9cc1f60 + checksum: 4af0a193e1ddea6ff82b2b15cc2501b872728050bd625740b813c8062fec917d32d530ff6b41de56c15e7296becdf3336a58db81f5ca8e7c445c1306c52f3e01 languageName: node linkType: hard -"@babel/plugin-transform-unicode-property-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.23.3" +"@babel/plugin-transform-unicode-property-regex@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.24.7" dependencies: - "@babel/helper-create-regexp-features-plugin": ^7.22.15 - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-create-regexp-features-plugin": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 2298461a194758086d17c23c26c7de37aa533af910f9ebf31ebd0893d4aa317468043d23f73edc782ec21151d3c46cf0ff8098a83b725c49a59de28a1d4d6225 + checksum: aae13350c50973f5802ca7906d022a6a0cc0e3aebac9122d0450bbd51e78252d4c2032ad69385e2759fcbdd3aac5d571bd7e26258907f51f8e1a51b53be626c2 languageName: node linkType: hard -"@babel/plugin-transform-unicode-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-regex@npm:7.23.3" +"@babel/plugin-transform-unicode-regex@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-unicode-regex@npm:7.24.7" dependencies: - "@babel/helper-create-regexp-features-plugin": ^7.22.15 - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-create-regexp-features-plugin": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: c5f835d17483ba899787f92e313dfa5b0055e3deab332f1d254078a2bba27ede47574b6599fcf34d3763f0c048ae0779dc21d2d8db09295edb4057478dc80a9a + checksum: 1cb4e70678906e431da0a05ac3f8350025fee290304ad7482d9cfaa1ca67b2e898654de537c9268efbdad5b80d3ebadf42b4a88ea84609bd8a4cce7b11b48afd languageName: node linkType: hard -"@babel/plugin-transform-unicode-sets-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.23.3" +"@babel/plugin-transform-unicode-sets-regex@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.24.7" dependencies: - "@babel/helper-create-regexp-features-plugin": ^7.22.15 - "@babel/helper-plugin-utils": ^7.22.5 + "@babel/helper-create-regexp-features-plugin": ^7.24.7 + "@babel/helper-plugin-utils": ^7.24.7 peerDependencies: "@babel/core": ^7.0.0 - checksum: 79d0b4c951955ca68235c87b91ab2b393c96285f8aeaa34d6db416d2ddac90000c9bd6e8c4d82b60a2b484da69930507245035f28ba63c6cae341cf3ba68fdef + checksum: 08a2844914f33dacd2ce1ab021ce8c1cc35dc6568521a746d8bf29c21571ee5be78787b454231c4bb3526cbbe280f1893223c82726cec5df2be5dae0a3b51837 languageName: node linkType: hard -"@babel/preset-env@npm:^7.11.0, @babel/preset-env@npm:^7.12.1, @babel/preset-env@npm:^7.16.0, @babel/preset-env@npm:^7.16.4, @babel/preset-env@npm:^7.23.2": - version: 7.23.9 - resolution: "@babel/preset-env@npm:7.23.9" +"@babel/preset-env@npm:^7.11.0, @babel/preset-env@npm:^7.12.1, @babel/preset-env@npm:^7.16.0, @babel/preset-env@npm:^7.16.4, @babel/preset-env@npm:^7.24.4": + version: 7.24.8 + resolution: "@babel/preset-env@npm:7.24.8" dependencies: - "@babel/compat-data": ^7.23.5 - "@babel/helper-compilation-targets": ^7.23.6 - "@babel/helper-plugin-utils": ^7.22.5 - "@babel/helper-validator-option": ^7.23.5 - "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": ^7.23.3 - "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": ^7.23.3 - "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": ^7.23.7 + "@babel/compat-data": ^7.24.8 + "@babel/helper-compilation-targets": ^7.24.8 + "@babel/helper-plugin-utils": ^7.24.8 + "@babel/helper-validator-option": ^7.24.8 + "@babel/plugin-bugfix-firefox-class-in-computed-class-key": ^7.24.7 + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": ^7.24.7 + "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": ^7.24.7 + "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": ^7.24.7 "@babel/plugin-proposal-private-property-in-object": 7.21.0-placeholder-for-preset-env.2 "@babel/plugin-syntax-async-generators": ^7.8.4 "@babel/plugin-syntax-class-properties": ^7.12.13 "@babel/plugin-syntax-class-static-block": ^7.14.5 "@babel/plugin-syntax-dynamic-import": ^7.8.3 "@babel/plugin-syntax-export-namespace-from": ^7.8.3 - "@babel/plugin-syntax-import-assertions": ^7.23.3 - "@babel/plugin-syntax-import-attributes": ^7.23.3 + "@babel/plugin-syntax-import-assertions": ^7.24.7 + "@babel/plugin-syntax-import-attributes": ^7.24.7 "@babel/plugin-syntax-import-meta": ^7.10.4 "@babel/plugin-syntax-json-strings": ^7.8.3 "@babel/plugin-syntax-logical-assignment-operators": ^7.10.4 @@ -2351,63 +2359,63 @@ __metadata: "@babel/plugin-syntax-private-property-in-object": ^7.14.5 "@babel/plugin-syntax-top-level-await": ^7.14.5 "@babel/plugin-syntax-unicode-sets-regex": ^7.18.6 - "@babel/plugin-transform-arrow-functions": ^7.23.3 - "@babel/plugin-transform-async-generator-functions": ^7.23.9 - "@babel/plugin-transform-async-to-generator": ^7.23.3 - "@babel/plugin-transform-block-scoped-functions": ^7.23.3 - "@babel/plugin-transform-block-scoping": ^7.23.4 - "@babel/plugin-transform-class-properties": ^7.23.3 - "@babel/plugin-transform-class-static-block": ^7.23.4 - "@babel/plugin-transform-classes": ^7.23.8 - "@babel/plugin-transform-computed-properties": ^7.23.3 - "@babel/plugin-transform-destructuring": ^7.23.3 - "@babel/plugin-transform-dotall-regex": ^7.23.3 - "@babel/plugin-transform-duplicate-keys": ^7.23.3 - "@babel/plugin-transform-dynamic-import": ^7.23.4 - "@babel/plugin-transform-exponentiation-operator": ^7.23.3 - "@babel/plugin-transform-export-namespace-from": ^7.23.4 - "@babel/plugin-transform-for-of": ^7.23.6 - "@babel/plugin-transform-function-name": ^7.23.3 - "@babel/plugin-transform-json-strings": ^7.23.4 - "@babel/plugin-transform-literals": ^7.23.3 - "@babel/plugin-transform-logical-assignment-operators": ^7.23.4 - "@babel/plugin-transform-member-expression-literals": ^7.23.3 - "@babel/plugin-transform-modules-amd": ^7.23.3 - "@babel/plugin-transform-modules-commonjs": ^7.23.3 - "@babel/plugin-transform-modules-systemjs": ^7.23.9 - "@babel/plugin-transform-modules-umd": ^7.23.3 - "@babel/plugin-transform-named-capturing-groups-regex": ^7.22.5 - "@babel/plugin-transform-new-target": ^7.23.3 - "@babel/plugin-transform-nullish-coalescing-operator": ^7.23.4 - "@babel/plugin-transform-numeric-separator": ^7.23.4 - "@babel/plugin-transform-object-rest-spread": ^7.23.4 - "@babel/plugin-transform-object-super": ^7.23.3 - "@babel/plugin-transform-optional-catch-binding": ^7.23.4 - "@babel/plugin-transform-optional-chaining": ^7.23.4 - "@babel/plugin-transform-parameters": ^7.23.3 - "@babel/plugin-transform-private-methods": ^7.23.3 - "@babel/plugin-transform-private-property-in-object": ^7.23.4 - "@babel/plugin-transform-property-literals": ^7.23.3 - "@babel/plugin-transform-regenerator": ^7.23.3 - "@babel/plugin-transform-reserved-words": ^7.23.3 - "@babel/plugin-transform-shorthand-properties": ^7.23.3 - "@babel/plugin-transform-spread": ^7.23.3 - "@babel/plugin-transform-sticky-regex": ^7.23.3 - "@babel/plugin-transform-template-literals": ^7.23.3 - "@babel/plugin-transform-typeof-symbol": ^7.23.3 - "@babel/plugin-transform-unicode-escapes": ^7.23.3 - "@babel/plugin-transform-unicode-property-regex": ^7.23.3 - "@babel/plugin-transform-unicode-regex": ^7.23.3 - "@babel/plugin-transform-unicode-sets-regex": ^7.23.3 + "@babel/plugin-transform-arrow-functions": ^7.24.7 + "@babel/plugin-transform-async-generator-functions": ^7.24.7 + "@babel/plugin-transform-async-to-generator": ^7.24.7 + "@babel/plugin-transform-block-scoped-functions": ^7.24.7 + "@babel/plugin-transform-block-scoping": ^7.24.7 + "@babel/plugin-transform-class-properties": ^7.24.7 + "@babel/plugin-transform-class-static-block": ^7.24.7 + "@babel/plugin-transform-classes": ^7.24.8 + "@babel/plugin-transform-computed-properties": ^7.24.7 + "@babel/plugin-transform-destructuring": ^7.24.8 + "@babel/plugin-transform-dotall-regex": ^7.24.7 + "@babel/plugin-transform-duplicate-keys": ^7.24.7 + "@babel/plugin-transform-dynamic-import": ^7.24.7 + "@babel/plugin-transform-exponentiation-operator": ^7.24.7 + "@babel/plugin-transform-export-namespace-from": ^7.24.7 + "@babel/plugin-transform-for-of": ^7.24.7 + "@babel/plugin-transform-function-name": ^7.24.7 + "@babel/plugin-transform-json-strings": ^7.24.7 + "@babel/plugin-transform-literals": ^7.24.7 + "@babel/plugin-transform-logical-assignment-operators": ^7.24.7 + "@babel/plugin-transform-member-expression-literals": ^7.24.7 + "@babel/plugin-transform-modules-amd": ^7.24.7 + "@babel/plugin-transform-modules-commonjs": ^7.24.8 + "@babel/plugin-transform-modules-systemjs": ^7.24.7 + "@babel/plugin-transform-modules-umd": ^7.24.7 + "@babel/plugin-transform-named-capturing-groups-regex": ^7.24.7 + "@babel/plugin-transform-new-target": ^7.24.7 + "@babel/plugin-transform-nullish-coalescing-operator": ^7.24.7 + "@babel/plugin-transform-numeric-separator": ^7.24.7 + "@babel/plugin-transform-object-rest-spread": ^7.24.7 + "@babel/plugin-transform-object-super": ^7.24.7 + "@babel/plugin-transform-optional-catch-binding": ^7.24.7 + "@babel/plugin-transform-optional-chaining": ^7.24.8 + "@babel/plugin-transform-parameters": ^7.24.7 + "@babel/plugin-transform-private-methods": ^7.24.7 + "@babel/plugin-transform-private-property-in-object": ^7.24.7 + "@babel/plugin-transform-property-literals": ^7.24.7 + "@babel/plugin-transform-regenerator": ^7.24.7 + "@babel/plugin-transform-reserved-words": ^7.24.7 + "@babel/plugin-transform-shorthand-properties": ^7.24.7 + "@babel/plugin-transform-spread": ^7.24.7 + "@babel/plugin-transform-sticky-regex": ^7.24.7 + "@babel/plugin-transform-template-literals": ^7.24.7 + "@babel/plugin-transform-typeof-symbol": ^7.24.8 + "@babel/plugin-transform-unicode-escapes": ^7.24.7 + "@babel/plugin-transform-unicode-property-regex": ^7.24.7 + "@babel/plugin-transform-unicode-regex": ^7.24.7 + "@babel/plugin-transform-unicode-sets-regex": ^7.24.7 "@babel/preset-modules": 0.1.6-no-external-plugins - babel-plugin-polyfill-corejs2: ^0.4.8 - babel-plugin-polyfill-corejs3: ^0.9.0 - babel-plugin-polyfill-regenerator: ^0.5.5 - core-js-compat: ^3.31.0 + babel-plugin-polyfill-corejs2: ^0.4.10 + babel-plugin-polyfill-corejs3: ^0.10.4 + babel-plugin-polyfill-regenerator: ^0.6.1 + core-js-compat: ^3.37.1 semver: ^6.3.1 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 23a48468ba820c68ba34ea2c1dbc62fd2ff9cf858cfb69e159cabb0c85c72dc4c2266ce20ca84318d8742de050cb061e7c66902fbfddbcb09246afd248847933 + checksum: efea0039dbb089c9cc0b792b9ac0eef949699584b4c622e2abea062b44b1a0fbcda6ad25e2263ae36a69586889b4a22439a1096aa8152b366e3fedd921ae66ac languageName: node linkType: hard @@ -2510,12 +2518,12 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.0, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.7, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": - version: 7.23.5 - resolution: "@babel/runtime@npm:7.23.5" +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.0, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.2, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.7, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": + version: 7.24.8 + resolution: "@babel/runtime@npm:7.24.8" dependencies: regenerator-runtime: ^0.14.0 - checksum: 164d9802424f06908e62d29b8fd3a87db55accf82f46f964ac481dcead11ff7df8391e3696e5fa91a8ca10ea8845bf650acd730fa88cf13f8026cd8d5eec6936 + checksum: 6b1e4230580f67a807ad054720812bbefbb024cc2adc1159d050acbb764c4c81c7ac5f7a042c48f578987c5edc2453c71039268df059058e9501fa6023d764b0 languageName: node linkType: hard @@ -2526,43 +2534,43 @@ __metadata: languageName: node linkType: hard -"@babel/template@npm:^7.22.15, @babel/template@npm:^7.24.0, @babel/template@npm:^7.3.3": - version: 7.24.0 - resolution: "@babel/template@npm:7.24.0" +"@babel/template@npm:^7.22.5, @babel/template@npm:^7.24.7, @babel/template@npm:^7.3.3": + version: 7.24.7 + resolution: "@babel/template@npm:7.24.7" dependencies: - "@babel/code-frame": ^7.23.5 - "@babel/parser": ^7.24.0 - "@babel/types": ^7.24.0 - checksum: f257b003c071a0cecdbfceca74185f18fe62c055469ab5c1d481aab12abeebed328e67e0a19fd978a2a8de97b28953fa4bc3da6d038a7345fdf37923b9fcdec8 + "@babel/code-frame": ^7.24.7 + "@babel/parser": ^7.24.7 + "@babel/types": ^7.24.7 + checksum: ea90792fae708ddf1632e54c25fe1a86643d8c0132311f81265d2bdbdd42f9f4fac65457056c1b6ca87f7aa0d6a795b549566774bba064bdcea2034ab3960ee9 languageName: node linkType: hard -"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.24.1, @babel/traverse@npm:^7.4.5, @babel/traverse@npm:^7.7.2": - version: 7.24.1 - resolution: "@babel/traverse@npm:7.24.1" - dependencies: - "@babel/code-frame": ^7.24.1 - "@babel/generator": ^7.24.1 - "@babel/helper-environment-visitor": ^7.22.20 - "@babel/helper-function-name": ^7.23.0 - "@babel/helper-hoist-variables": ^7.22.5 - "@babel/helper-split-export-declaration": ^7.22.6 - "@babel/parser": ^7.24.1 - "@babel/types": ^7.24.0 +"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.24.7, @babel/traverse@npm:^7.24.8, @babel/traverse@npm:^7.4.5, @babel/traverse@npm:^7.7.2": + version: 7.24.8 + resolution: "@babel/traverse@npm:7.24.8" + dependencies: + "@babel/code-frame": ^7.24.7 + "@babel/generator": ^7.24.8 + "@babel/helper-environment-visitor": ^7.24.7 + "@babel/helper-function-name": ^7.24.7 + "@babel/helper-hoist-variables": ^7.24.7 + "@babel/helper-split-export-declaration": ^7.24.7 + "@babel/parser": ^7.24.8 + "@babel/types": ^7.24.8 debug: ^4.3.1 globals: ^11.1.0 - checksum: 92a5ca906abfba9df17666d2001ab23f18600035f706a687055a0e392a690ae48d6fec67c8bd4ef19ba18699a77a5b7f85727e36b83f7d110141608fe0c24fe9 + checksum: ee7955476ce031613249f2b0ce9e74a3b7787c9d52e84534fcf39ad61aeb0b811a4cd83edc157608be4886f04c6ecf210861e211ba2a3db4fda729cc2048b5ed languageName: node linkType: hard -"@babel/types@npm:^7.0.0, @babel/types@npm:^7.0.0-beta.49, @babel/types@npm:^7.12.6, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.24.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3": - version: 7.24.0 - resolution: "@babel/types@npm:7.24.0" +"@babel/types@npm:^7.0.0, @babel/types@npm:^7.0.0-beta.49, @babel/types@npm:^7.12.6, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.22.5, @babel/types@npm:^7.24.0, @babel/types@npm:^7.24.7, @babel/types@npm:^7.24.8, @babel/types@npm:^7.24.9, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3": + version: 7.24.9 + resolution: "@babel/types@npm:7.24.9" dependencies: - "@babel/helper-string-parser": ^7.23.4 - "@babel/helper-validator-identifier": ^7.22.20 + "@babel/helper-string-parser": ^7.24.8 + "@babel/helper-validator-identifier": ^7.24.7 to-fast-properties: ^2.0.0 - checksum: 4b574a37d490f621470ff36a5afaac6deca5546edcb9b5e316d39acbb20998e9c2be42f3fc0bf2b55906fc49ff2a5a6a097e8f5a726ee3f708a0b0ca93aed807 + checksum: 15cb05c45be5d4c49a749575d3742bd005d0e2e850c13fb462754983a5bc1063fbc8f6566246fc064e3e8b21a5a75a37a948f1b3f27189cc90b236fee93f5e51 languageName: node linkType: hard @@ -2702,16 +2710,16 @@ __metadata: languageName: node linkType: hard -"@chromatic-com/storybook@npm:^1.3.3": - version: 1.3.3 - resolution: "@chromatic-com/storybook@npm:1.3.3" +"@chromatic-com/storybook@npm:^1.6.1": + version: 1.6.1 + resolution: "@chromatic-com/storybook@npm:1.6.1" dependencies: - chromatic: ^11.3.0 + chromatic: ^11.4.0 filesize: ^10.0.12 jsonfile: ^6.1.0 react-confetti: ^6.1.0 strip-ansi: ^7.1.0 - checksum: c61819e318642c4530b4a1edc02b428798e70b83d827ab433bff4dd62a05bc947dce4e7ba5b09213216f1f5fcd0fdb54ad306ffe885a2affb23da6648f5219ac + checksum: 7a9330ecc573c89ab818212a71e55c23859a2d54e63bb3dac7c2df4b39c49a6c17a06521efd74f3a1b41007241a726898966446d2af4c2beb837b4753a715e9b languageName: node linkType: hard @@ -3011,32 +3019,34 @@ __metadata: version: 0.0.0-use.local resolution: "@design-system/storybook@workspace:packages/storybook" dependencies: - "@chromatic-com/storybook": ^1.3.3 + "@chromatic-com/storybook": ^1.6.1 "@design-system/headless": "workspace:^" "@design-system/theming": "workspace:^" "@design-system/widgets": "workspace:^" "@design-system/widgets-old": "workspace:^" - "@storybook/addon-a11y": ^8.0.8 - "@storybook/addon-controls": ^8.0.8 - "@storybook/addon-docs": ^8.0.8 - "@storybook/addon-measure": ^8.0.8 - "@storybook/addon-outline": ^8.0.8 - "@storybook/addon-toolbars": ^8.0.8 - "@storybook/addon-viewport": ^8.0.8 - "@storybook/blocks": ^8.0.8 - "@storybook/builder-vite": ^8.0.8 - "@storybook/components": ^8.0.8 - "@storybook/manager-api": ^8.0.8 - "@storybook/preset-create-react-app": ^8.0.8 - "@storybook/react-vite": ^8.0.8 - "@storybook/theming": ^8.0.8 + "@storybook/addon-a11y": ^8.2.6 + "@storybook/addon-controls": ^8.2.6 + "@storybook/addon-docs": ^8.2.6 + "@storybook/addon-measure": ^8.2.6 + "@storybook/addon-outline": ^8.2.6 + "@storybook/addon-toolbars": ^8.2.6 + "@storybook/addon-viewport": ^8.2.6 + "@storybook/blocks": ^8.2.6 + "@storybook/builder-vite": ^8.2.6 + "@storybook/components": ^8.2.6 + "@storybook/manager-api": ^8.2.6 + "@storybook/preset-create-react-app": ^8.2.6 + "@storybook/preview-api": ^8.2.6 + "@storybook/react-vite": ^8.2.6 + "@storybook/test-runner": ^0.19.1 + "@storybook/theming": ^8.2.6 "@vitejs/plugin-react": ^4.2.1 appsmith-icons: "workspace:^" babel-loader: 9.1.2 chromatic: ^11.3.0 colorjs.io: ^0.4.3 react-docgen-typescript: ^2.2.2 - storybook: ^8.0.8 + storybook: ^8.2.6 vite: ^5.2.9 vite-plugin-svgr: ^4.2.0 languageName: unknown @@ -3116,13 +3126,6 @@ __metadata: languageName: unknown linkType: soft -"@discoveryjs/json-ext@npm:^0.5.3": - version: 0.5.7 - resolution: "@discoveryjs/json-ext@npm:0.5.7" - checksum: 2176d301cc258ea5c2324402997cf8134ebb212469c0d397591636cea8d3c02f2b3cf9fd58dcb748c7a0dade77ebdc1b10284fa63e608c033a1db52fddc69918 - languageName: node - linkType: hard - "@emotion/babel-plugin@npm:^11.11.0": version: 11.11.0 resolution: "@emotion/babel-plugin@npm:11.11.0" @@ -3305,15 +3308,6 @@ __metadata: languageName: node linkType: hard -"@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1": - version: 1.0.1 - resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1" - peerDependencies: - react: ">=16.8.0" - checksum: 700b6e5bbb37a9231f203bb3af11295eed01d73b2293abece0bc2a2237015e944d7b5114d4887ad9a79776504aa51ed2a8b0ddbc117c54495dd01a6b22f93786 - languageName: node - linkType: hard - "@emotion/utils@npm:0.11.3": version: 0.11.3 resolution: "@emotion/utils@npm:0.11.3" @@ -3349,6 +3343,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/aix-ppc64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/aix-ppc64@npm:0.21.5" + conditions: os=aix & cpu=ppc64 + languageName: node + linkType: hard + "@esbuild/android-arm64@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/android-arm64@npm:0.19.4" @@ -3363,6 +3364,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/android-arm64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/android-arm64@npm:0.21.5" + conditions: os=android & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/android-arm@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/android-arm@npm:0.19.4" @@ -3377,6 +3385,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/android-arm@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/android-arm@npm:0.21.5" + conditions: os=android & cpu=arm + languageName: node + linkType: hard + "@esbuild/android-x64@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/android-x64@npm:0.19.4" @@ -3391,6 +3406,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/android-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/android-x64@npm:0.21.5" + conditions: os=android & cpu=x64 + languageName: node + linkType: hard + "@esbuild/darwin-arm64@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/darwin-arm64@npm:0.19.4" @@ -3405,6 +3427,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/darwin-arm64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/darwin-arm64@npm:0.21.5" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/darwin-x64@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/darwin-x64@npm:0.19.4" @@ -3419,6 +3448,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/darwin-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/darwin-x64@npm:0.21.5" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + "@esbuild/freebsd-arm64@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/freebsd-arm64@npm:0.19.4" @@ -3433,6 +3469,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/freebsd-arm64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/freebsd-arm64@npm:0.21.5" + conditions: os=freebsd & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/freebsd-x64@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/freebsd-x64@npm:0.19.4" @@ -3447,6 +3490,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/freebsd-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/freebsd-x64@npm:0.21.5" + conditions: os=freebsd & cpu=x64 + languageName: node + linkType: hard + "@esbuild/linux-arm64@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/linux-arm64@npm:0.19.4" @@ -3461,6 +3511,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-arm64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-arm64@npm:0.21.5" + conditions: os=linux & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/linux-arm@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/linux-arm@npm:0.19.4" @@ -3475,6 +3532,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-arm@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-arm@npm:0.21.5" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + "@esbuild/linux-ia32@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/linux-ia32@npm:0.19.4" @@ -3489,6 +3553,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-ia32@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-ia32@npm:0.21.5" + conditions: os=linux & cpu=ia32 + languageName: node + linkType: hard + "@esbuild/linux-loong64@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/linux-loong64@npm:0.19.4" @@ -3503,6 +3574,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-loong64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-loong64@npm:0.21.5" + conditions: os=linux & cpu=loong64 + languageName: node + linkType: hard + "@esbuild/linux-mips64el@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/linux-mips64el@npm:0.19.4" @@ -3517,6 +3595,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-mips64el@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-mips64el@npm:0.21.5" + conditions: os=linux & cpu=mips64el + languageName: node + linkType: hard + "@esbuild/linux-ppc64@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/linux-ppc64@npm:0.19.4" @@ -3531,6 +3616,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-ppc64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-ppc64@npm:0.21.5" + conditions: os=linux & cpu=ppc64 + languageName: node + linkType: hard + "@esbuild/linux-riscv64@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/linux-riscv64@npm:0.19.4" @@ -3545,6 +3637,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-riscv64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-riscv64@npm:0.21.5" + conditions: os=linux & cpu=riscv64 + languageName: node + linkType: hard + "@esbuild/linux-s390x@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/linux-s390x@npm:0.19.4" @@ -3559,6 +3658,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-s390x@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-s390x@npm:0.21.5" + conditions: os=linux & cpu=s390x + languageName: node + linkType: hard + "@esbuild/linux-x64@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/linux-x64@npm:0.19.4" @@ -3573,6 +3679,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/linux-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/linux-x64@npm:0.21.5" + conditions: os=linux & cpu=x64 + languageName: node + linkType: hard + "@esbuild/netbsd-x64@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/netbsd-x64@npm:0.19.4" @@ -3587,6 +3700,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/netbsd-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/netbsd-x64@npm:0.21.5" + conditions: os=netbsd & cpu=x64 + languageName: node + linkType: hard + "@esbuild/openbsd-x64@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/openbsd-x64@npm:0.19.4" @@ -3601,6 +3721,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/openbsd-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/openbsd-x64@npm:0.21.5" + conditions: os=openbsd & cpu=x64 + languageName: node + linkType: hard + "@esbuild/sunos-x64@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/sunos-x64@npm:0.19.4" @@ -3615,6 +3742,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/sunos-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/sunos-x64@npm:0.21.5" + conditions: os=sunos & cpu=x64 + languageName: node + linkType: hard + "@esbuild/win32-arm64@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/win32-arm64@npm:0.19.4" @@ -3629,6 +3763,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/win32-arm64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/win32-arm64@npm:0.21.5" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/win32-ia32@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/win32-ia32@npm:0.19.4" @@ -3643,6 +3784,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/win32-ia32@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/win32-ia32@npm:0.21.5" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + "@esbuild/win32-x64@npm:0.19.4": version: 0.19.4 resolution: "@esbuild/win32-x64@npm:0.19.4" @@ -3657,6 +3805,13 @@ __metadata: languageName: node linkType: hard +"@esbuild/win32-x64@npm:0.21.5": + version: 0.21.5 + resolution: "@esbuild/win32-x64@npm:0.21.5" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.4.0": version: 4.4.0 resolution: "@eslint-community/eslint-utils@npm:4.4.0" @@ -3706,13 +3861,6 @@ __metadata: languageName: node linkType: hard -"@fal-works/esbuild-plugin-global-externals@npm:^2.1.2": - version: 2.1.2 - resolution: "@fal-works/esbuild-plugin-global-externals@npm:2.1.2" - checksum: c59715902b9062aa7ff38973f298b509499fd146dbf564dc338b3f9e896da5bffb4ca676c27587fde79b3586003e24d65960acb62f009bca43dca34c76f8cbf7 - languageName: node - linkType: hard - "@floating-ui/core@npm:^0.7.3": version: 0.7.3 resolution: "@floating-ui/core@npm:0.7.3" @@ -4012,6 +4160,22 @@ __metadata: languageName: node linkType: hard +"@hapi/hoek@npm:^9.0.0, @hapi/hoek@npm:^9.3.0": + version: 9.3.0 + resolution: "@hapi/hoek@npm:9.3.0" + checksum: 4771c7a776242c3c022b168046af4e324d116a9d2e1d60631ee64f474c6e38d1bb07092d898bf95c7bc5d334c5582798a1456321b2e53ca817d4e7c88bc25b43 + languageName: node + linkType: hard + +"@hapi/topo@npm:^5.1.0": + version: 5.1.0 + resolution: "@hapi/topo@npm:5.1.0" + dependencies: + "@hapi/hoek": ^9.0.0 + checksum: 604dfd5dde76d5c334bd03f9001fce69c7ce529883acf92da96f4fe7e51221bf5e5110e964caca287a6a616ba027c071748ab636ff178ad750547fba611d6014 + languageName: node + linkType: hard + "@humanwhocodes/config-array@npm:^0.11.11": version: 0.11.11 resolution: "@humanwhocodes/config-array@npm:0.11.11" @@ -4087,20 +4251,6 @@ __metadata: languageName: node linkType: hard -"@isaacs/cliui@npm:^8.0.2": - version: 8.0.2 - resolution: "@isaacs/cliui@npm:8.0.2" - dependencies: - string-width: ^5.1.2 - string-width-cjs: "npm:string-width@^4.2.0" - strip-ansi: ^7.0.1 - strip-ansi-cjs: "npm:strip-ansi@^6.0.1" - wrap-ansi: ^8.1.0 - wrap-ansi-cjs: "npm:wrap-ansi@^7.0.0" - checksum: 4a473b9b32a7d4d3cfb7a614226e555091ff0c5a29a1734c28c72a182c2f6699b26fc6b5c2131dfd841e86b185aea714c72201d7c98c2fba5f17709333a67aeb - languageName: node - linkType: hard - "@istanbuljs/load-nyc-config@npm:^1.0.0": version: 1.1.0 resolution: "@istanbuljs/load-nyc-config@npm:1.1.0" @@ -4114,7 +4264,7 @@ __metadata: languageName: node linkType: hard -"@istanbuljs/schema@npm:^0.1.2": +"@istanbuljs/schema@npm:^0.1.2, @istanbuljs/schema@npm:^0.1.3": version: 0.1.3 resolution: "@istanbuljs/schema@npm:0.1.3" checksum: 5282759d961d61350f33d9118d16bcaed914ebf8061a52f4fa474b2cb08720c9c81d165e13b82f2e5a8a212cc5af482f0c6fc1ac27b9e067e5394c9a6ed186c9 @@ -4149,17 +4299,17 @@ __metadata: languageName: node linkType: hard -"@jest/console@npm:^29.5.0": - version: 29.5.0 - resolution: "@jest/console@npm:29.5.0" +"@jest/console@npm:^29.7.0": + version: 29.7.0 + resolution: "@jest/console@npm:29.7.0" dependencies: - "@jest/types": ^29.5.0 + "@jest/types": ^29.6.3 "@types/node": "*" chalk: ^4.0.0 - jest-message-util: ^29.5.0 - jest-util: ^29.5.0 + jest-message-util: ^29.7.0 + jest-util: ^29.7.0 slash: ^3.0.0 - checksum: 9f4f4b8fabd1221361b7f2e92d4a90f5f8c2e2b29077249996ab3c8b7f765175ffee795368f8d6b5b2bb3adb32dc09319f7270c7c787b0d259e624e00e0f64a5 + checksum: 0e3624e32c5a8e7361e889db70b170876401b7d70f509a2538c31d5cd50deb0c1ae4b92dc63fe18a0902e0a48c590c21d53787a0df41a52b34fa7cab96c384d6 languageName: node linkType: hard @@ -4204,36 +4354,36 @@ __metadata: languageName: node linkType: hard -"@jest/core@npm:^29.0.3, @jest/core@npm:^29.5.0": - version: 29.5.0 - resolution: "@jest/core@npm:29.5.0" +"@jest/core@npm:^29.0.3, @jest/core@npm:^29.7.0": + version: 29.7.0 + resolution: "@jest/core@npm:29.7.0" dependencies: - "@jest/console": ^29.5.0 - "@jest/reporters": ^29.5.0 - "@jest/test-result": ^29.5.0 - "@jest/transform": ^29.5.0 - "@jest/types": ^29.5.0 + "@jest/console": ^29.7.0 + "@jest/reporters": ^29.7.0 + "@jest/test-result": ^29.7.0 + "@jest/transform": ^29.7.0 + "@jest/types": ^29.6.3 "@types/node": "*" ansi-escapes: ^4.2.1 chalk: ^4.0.0 ci-info: ^3.2.0 exit: ^0.1.2 graceful-fs: ^4.2.9 - jest-changed-files: ^29.5.0 - jest-config: ^29.5.0 - jest-haste-map: ^29.5.0 - jest-message-util: ^29.5.0 - jest-regex-util: ^29.4.3 - jest-resolve: ^29.5.0 - jest-resolve-dependencies: ^29.5.0 - jest-runner: ^29.5.0 - jest-runtime: ^29.5.0 - jest-snapshot: ^29.5.0 - jest-util: ^29.5.0 - jest-validate: ^29.5.0 - jest-watcher: ^29.5.0 + jest-changed-files: ^29.7.0 + jest-config: ^29.7.0 + jest-haste-map: ^29.7.0 + jest-message-util: ^29.7.0 + jest-regex-util: ^29.6.3 + jest-resolve: ^29.7.0 + jest-resolve-dependencies: ^29.7.0 + jest-runner: ^29.7.0 + jest-runtime: ^29.7.0 + jest-snapshot: ^29.7.0 + jest-util: ^29.7.0 + jest-validate: ^29.7.0 + jest-watcher: ^29.7.0 micromatch: ^4.0.4 - pretty-format: ^29.5.0 + pretty-format: ^29.7.0 slash: ^3.0.0 strip-ansi: ^6.0.0 peerDependencies: @@ -4241,7 +4391,16 @@ __metadata: peerDependenciesMeta: node-notifier: optional: true - checksum: 9e8f5243fe82d5a57f3971e1b96f320058df7c315328a3a827263f3b17f64be10c80f4a9c1b1773628b64d2de6d607c70b5b2d5bf13e7f5ad04223e9ef6aac06 + checksum: af759c9781cfc914553320446ce4e47775ae42779e73621c438feb1e4231a5d4862f84b1d8565926f2d1aab29b3ec3dcfdc84db28608bdf5f29867124ebcfc0d + languageName: node + linkType: hard + +"@jest/create-cache-key-function@npm:^29.7.0": + version: 29.7.0 + resolution: "@jest/create-cache-key-function@npm:29.7.0" + dependencies: + "@jest/types": ^29.6.3 + checksum: 681bc761fa1d6fa3dd77578d444f97f28296ea80755e90e46d1c8fa68661b9e67f54dd38b988742db636d26cf160450dc6011892cec98b3a7ceb58cad8ff3aae languageName: node linkType: hard @@ -4257,34 +4416,34 @@ __metadata: languageName: node linkType: hard -"@jest/environment@npm:^29.5.0": - version: 29.5.0 - resolution: "@jest/environment@npm:29.5.0" +"@jest/environment@npm:^29.7.0": + version: 29.7.0 + resolution: "@jest/environment@npm:29.7.0" dependencies: - "@jest/fake-timers": ^29.5.0 - "@jest/types": ^29.5.0 + "@jest/fake-timers": ^29.7.0 + "@jest/types": ^29.6.3 "@types/node": "*" - jest-mock: ^29.5.0 - checksum: 921de6325cd4817dec6685e5ff299b499b6379f3f9cf489b4b13588ee1f3820a0c77b49e6a087996b6de8f629f6f5251e636cba08d1bdb97d8071cc7d033c88a + jest-mock: ^29.7.0 + checksum: 6fb398143b2543d4b9b8d1c6dbce83fa5247f84f550330604be744e24c2bd2178bb893657d62d1b97cf2f24baf85c450223f8237cccb71192c36a38ea2272934 languageName: node linkType: hard -"@jest/expect-utils@npm:^29.5.0": - version: 29.5.0 - resolution: "@jest/expect-utils@npm:29.5.0" +"@jest/expect-utils@npm:^29.7.0": + version: 29.7.0 + resolution: "@jest/expect-utils@npm:29.7.0" dependencies: - jest-get-type: ^29.4.3 - checksum: c46fb677c88535cf83cf29f0a5b1f376c6a1109ddda266ad7da1a9cbc53cb441fa402dd61fc7b111ffc99603c11a9b3357ee41a1c0e035a58830bcb360871476 + jest-get-type: ^29.6.3 + checksum: 75eb177f3d00b6331bcaa057e07c0ccb0733a1d0a1943e1d8db346779039cb7f103789f16e502f888a3096fb58c2300c38d1f3748b36a7fa762eb6f6d1b160ed languageName: node linkType: hard -"@jest/expect@npm:^29.5.0": - version: 29.5.0 - resolution: "@jest/expect@npm:29.5.0" +"@jest/expect@npm:^29.7.0": + version: 29.7.0 + resolution: "@jest/expect@npm:29.7.0" dependencies: - expect: ^29.5.0 - jest-snapshot: ^29.5.0 - checksum: bd10e295111547e6339137107d83986ab48d46561525393834d7d2d8b2ae9d5626653f3f5e48e5c3fa742ac982e97bdf1f541b53b9e1d117a247b08e938527f6 + expect: ^29.7.0 + jest-snapshot: ^29.7.0 + checksum: a01cb85fd9401bab3370618f4b9013b90c93536562222d920e702a0b575d239d74cecfe98010aaec7ad464f67cf534a353d92d181646a4b792acaa7e912ae55e languageName: node linkType: hard @@ -4302,17 +4461,17 @@ __metadata: languageName: node linkType: hard -"@jest/fake-timers@npm:^29.5.0": - version: 29.5.0 - resolution: "@jest/fake-timers@npm:29.5.0" +"@jest/fake-timers@npm:^29.7.0": + version: 29.7.0 + resolution: "@jest/fake-timers@npm:29.7.0" dependencies: - "@jest/types": ^29.5.0 + "@jest/types": ^29.6.3 "@sinonjs/fake-timers": ^10.0.2 "@types/node": "*" - jest-message-util: ^29.5.0 - jest-mock: ^29.5.0 - jest-util: ^29.5.0 - checksum: 69930c6922341f244151ec0d27640852ec96237f730fc024da1f53143d31b43cde75d92f9d8e5937981cdce3b31416abc3a7090a0d22c2377512c4a6613244ee + jest-message-util: ^29.7.0 + jest-mock: ^29.7.0 + jest-util: ^29.7.0 + checksum: caf2bbd11f71c9241b458d1b5a66cbe95debc5a15d96442444b5d5c7ba774f523c76627c6931cca5e10e76f0d08761f6f1f01a608898f4751a0eee54fc3d8d00 languageName: node linkType: hard @@ -4327,15 +4486,15 @@ __metadata: languageName: node linkType: hard -"@jest/globals@npm:^29.5.0": - version: 29.5.0 - resolution: "@jest/globals@npm:29.5.0" +"@jest/globals@npm:^29.7.0": + version: 29.7.0 + resolution: "@jest/globals@npm:29.7.0" dependencies: - "@jest/environment": ^29.5.0 - "@jest/expect": ^29.5.0 - "@jest/types": ^29.5.0 - jest-mock: ^29.5.0 - checksum: b309ab8f21b571a7c672608682e84bbdd3d2b554ddf81e4e32617fec0a69094a290ab42e3c8b2c66ba891882bfb1b8b2736720ea1285b3ad646d55c2abefedd9 + "@jest/environment": ^29.7.0 + "@jest/expect": ^29.7.0 + "@jest/types": ^29.6.3 + jest-mock: ^29.7.0 + checksum: 97dbb9459135693ad3a422e65ca1c250f03d82b2a77f6207e7fa0edd2c9d2015fbe4346f3dc9ebff1678b9d8da74754d4d440b7837497f8927059c0642a22123 languageName: node linkType: hard @@ -4377,16 +4536,16 @@ __metadata: languageName: node linkType: hard -"@jest/reporters@npm:^29.5.0": - version: 29.5.0 - resolution: "@jest/reporters@npm:29.5.0" +"@jest/reporters@npm:^29.7.0": + version: 29.7.0 + resolution: "@jest/reporters@npm:29.7.0" dependencies: "@bcoe/v8-coverage": ^0.2.3 - "@jest/console": ^29.5.0 - "@jest/test-result": ^29.5.0 - "@jest/transform": ^29.5.0 - "@jest/types": ^29.5.0 - "@jridgewell/trace-mapping": ^0.3.15 + "@jest/console": ^29.7.0 + "@jest/test-result": ^29.7.0 + "@jest/transform": ^29.7.0 + "@jest/types": ^29.6.3 + "@jridgewell/trace-mapping": ^0.3.18 "@types/node": "*" chalk: ^4.0.0 collect-v8-coverage: ^1.0.0 @@ -4394,13 +4553,13 @@ __metadata: glob: ^7.1.3 graceful-fs: ^4.2.9 istanbul-lib-coverage: ^3.0.0 - istanbul-lib-instrument: ^5.1.0 + istanbul-lib-instrument: ^6.0.0 istanbul-lib-report: ^3.0.0 istanbul-lib-source-maps: ^4.0.0 istanbul-reports: ^3.1.3 - jest-message-util: ^29.5.0 - jest-util: ^29.5.0 - jest-worker: ^29.5.0 + jest-message-util: ^29.7.0 + jest-util: ^29.7.0 + jest-worker: ^29.7.0 slash: ^3.0.0 string-length: ^4.0.1 strip-ansi: ^6.0.0 @@ -4410,7 +4569,7 @@ __metadata: peerDependenciesMeta: node-notifier: optional: true - checksum: 481268aac9a4a75cc49c4df1273d6b111808dec815e9d009dad717c32383ebb0cebac76e820ad1ab44e207540e1c2fe1e640d44c4f262de92ab1933e057fdeeb + checksum: 7eadabd62cc344f629024b8a268ecc8367dba756152b761bdcb7b7e570a3864fc51b2a9810cd310d85e0a0173ef002ba4528d5ea0329fbf66ee2a3ada9c40455 languageName: node linkType: hard @@ -4423,12 +4582,12 @@ __metadata: languageName: node linkType: hard -"@jest/schemas@npm:^29.4.3, @jest/schemas@npm:^29.6.0": - version: 29.6.0 - resolution: "@jest/schemas@npm:29.6.0" +"@jest/schemas@npm:^29.6.3": + version: 29.6.3 + resolution: "@jest/schemas@npm:29.6.3" dependencies: "@sinclair/typebox": ^0.27.8 - checksum: c00511c69cf89138a7d974404d3a5060af375b5a52b9c87215d91873129b382ca11c1ff25bd6d605951404bb381ddce5f8091004a61e76457da35db1f5c51365 + checksum: 910040425f0fc93cd13e68c750b7885590b8839066dfa0cd78e7def07bbb708ad869381f725945d66f2284de5663bbecf63e8fdd856e2ae6e261ba30b1687e93 languageName: node linkType: hard @@ -4443,14 +4602,14 @@ __metadata: languageName: node linkType: hard -"@jest/source-map@npm:^29.4.3": - version: 29.4.3 - resolution: "@jest/source-map@npm:29.4.3" +"@jest/source-map@npm:^29.6.3": + version: 29.6.3 + resolution: "@jest/source-map@npm:29.6.3" dependencies: - "@jridgewell/trace-mapping": ^0.3.15 + "@jridgewell/trace-mapping": ^0.3.18 callsites: ^3.0.0 graceful-fs: ^4.2.9 - checksum: 2301d225145f8123540c0be073f35a80fd26a2f5e59550fd68525d8cea580fb896d12bf65106591ffb7366a8a19790076dbebc70e0f5e6ceb51f81827ed1f89c + checksum: bcc5a8697d471396c0003b0bfa09722c3cd879ad697eb9c431e6164e2ea7008238a01a07193dfe3cbb48b1d258eb7251f6efcea36f64e1ebc464ea3c03ae2deb languageName: node linkType: hard @@ -4478,15 +4637,15 @@ __metadata: languageName: node linkType: hard -"@jest/test-result@npm:^29.5.0": - version: 29.5.0 - resolution: "@jest/test-result@npm:29.5.0" +"@jest/test-result@npm:^29.7.0": + version: 29.7.0 + resolution: "@jest/test-result@npm:29.7.0" dependencies: - "@jest/console": ^29.5.0 - "@jest/types": ^29.5.0 + "@jest/console": ^29.7.0 + "@jest/types": ^29.6.3 "@types/istanbul-lib-coverage": ^2.0.0 collect-v8-coverage: ^1.0.0 - checksum: 2e8ff5242227ab960c520c3ea0f6544c595cc1c42fa3873c158e9f4f685f4ec9670ec08a4af94ae3885c0005a43550a9595191ffbc27a0965df27d9d98bbf901 + checksum: 67b6317d526e335212e5da0e768e3b8ab8a53df110361b80761353ad23b6aea4432b7c5665bdeb87658ea373b90fb1afe02ed3611ef6c858c7fba377505057fa languageName: node linkType: hard @@ -4502,15 +4661,15 @@ __metadata: languageName: node linkType: hard -"@jest/test-sequencer@npm:^29.5.0": - version: 29.5.0 - resolution: "@jest/test-sequencer@npm:29.5.0" +"@jest/test-sequencer@npm:^29.7.0": + version: 29.7.0 + resolution: "@jest/test-sequencer@npm:29.7.0" dependencies: - "@jest/test-result": ^29.5.0 + "@jest/test-result": ^29.7.0 graceful-fs: ^4.2.9 - jest-haste-map: ^29.5.0 + jest-haste-map: ^29.7.0 slash: ^3.0.0 - checksum: eca34b4aeb2fda6dfb7f9f4b064c858a7adf64ec5c6091b6f4ed9d3c19549177cbadcf1c615c4c182688fa1cf085c8c55c3ca6eea40719a34554b0bf071d842e + checksum: 73f43599017946be85c0b6357993b038f875b796e2f0950487a82f4ebcb115fa12131932dd9904026b4ad8be131fe6e28bd8d0aa93b1563705185f9804bff8bd languageName: node linkType: hard @@ -4537,26 +4696,26 @@ __metadata: languageName: node linkType: hard -"@jest/transform@npm:^29.5.0": - version: 29.6.2 - resolution: "@jest/transform@npm:29.6.2" +"@jest/transform@npm:^29.7.0": + version: 29.7.0 + resolution: "@jest/transform@npm:29.7.0" dependencies: "@babel/core": ^7.11.6 - "@jest/types": ^29.6.1 + "@jest/types": ^29.6.3 "@jridgewell/trace-mapping": ^0.3.18 babel-plugin-istanbul: ^6.1.1 chalk: ^4.0.0 convert-source-map: ^2.0.0 fast-json-stable-stringify: ^2.1.0 graceful-fs: ^4.2.9 - jest-haste-map: ^29.6.2 - jest-regex-util: ^29.4.3 - jest-util: ^29.6.2 + jest-haste-map: ^29.7.0 + jest-regex-util: ^29.6.3 + jest-util: ^29.7.0 micromatch: ^4.0.4 pirates: ^4.0.4 slash: ^3.0.0 write-file-atomic: ^4.0.2 - checksum: ffb8c3c344cd48bedadec295d9c436737eccc39c1f0868aa9753b76397b33b2e5b121058af6f287ba6f2036181137e37df1212334bfa9d9a712986a4518cdc18 + checksum: 0f8ac9f413903b3cb6d240102db848f2a354f63971ab885833799a9964999dd51c388162106a807f810071f864302cdd8e3f0c241c29ce02d85a36f18f3f40ab languageName: node linkType: hard @@ -4587,23 +4746,23 @@ __metadata: languageName: node linkType: hard -"@jest/types@npm:^29.0.3, @jest/types@npm:^29.5.0, @jest/types@npm:^29.6.1": - version: 29.6.1 - resolution: "@jest/types@npm:29.6.1" +"@jest/types@npm:^29.0.3, @jest/types@npm:^29.6.3": + version: 29.6.3 + resolution: "@jest/types@npm:29.6.3" dependencies: - "@jest/schemas": ^29.6.0 + "@jest/schemas": ^29.6.3 "@types/istanbul-lib-coverage": ^2.0.0 "@types/istanbul-reports": ^3.0.0 "@types/node": "*" "@types/yargs": ^17.0.8 chalk: ^4.0.0 - checksum: 89fc1ccf71a84fe0da643e0675b1cfe6a6f19ea72e935b2ab1dbdb56ec547e94433fb59b3536d3832a6e156c077865b7176fe9dae707dab9c3d2f9405ba6233c + checksum: a0bcf15dbb0eca6bdd8ce61a3fb055349d40268622a7670a3b2eb3c3dbafe9eb26af59938366d520b86907b9505b0f9b29b85cec11579a9e580694b87cd90fcc languageName: node linkType: hard -"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0": - version: 0.3.0 - resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0" +"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.1": + version: 0.3.1 + resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.1" dependencies: glob: ^7.2.0 glob-promise: ^4.2.0 @@ -4615,7 +4774,7 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 3fe2dc68dcb43920cc08bc5cc2937953bed1080e9c453dc3f513156b9a862fe6af0cda94b70272a4844a27964070129f8d0d31056211b1486a8fd9f6e1c20559 + checksum: a7f3240668c695c3beca936d7a95272f8d03dd76fbf0ef057ca51bc864ceca628e6bb2e8d8adb6081ae0005287c204a3fbb4db6e558a8b7707545715cc12e101 languageName: node linkType: hard @@ -4681,7 +4840,7 @@ __metadata: languageName: node linkType: hard -"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.15, @jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25, @jridgewell/trace-mapping@npm:^0.3.9": +"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25, @jridgewell/trace-mapping@npm:^0.3.9": version: 0.3.25 resolution: "@jridgewell/trace-mapping@npm:0.3.25" dependencies: @@ -4770,17 +4929,6 @@ __metadata: languageName: node linkType: hard -"@ndelangen/get-tarball@npm:^3.0.7": - version: 3.0.9 - resolution: "@ndelangen/get-tarball@npm:3.0.9" - dependencies: - gunzip-maybe: ^1.4.2 - pump: ^3.0.0 - tar-fs: ^2.1.1 - checksum: 7fa8ac40b4e85738a4ee6bf891bc27fce2445b65b4477e0ec86aed0fa62ab18bdf5d193ce04553ad9bfa639e1eef33b8b30da4ef3e7218f12bf95f24c8786e5b - languageName: node - linkType: hard - "@newrelic/browser-agent@npm:^1.255.0": version: 1.255.0 resolution: "@newrelic/browser-agent@npm:1.255.0" @@ -5273,13 +5421,6 @@ __metadata: languageName: node linkType: hard -"@pkgjs/parseargs@npm:^0.11.0": - version: 0.11.0 - resolution: "@pkgjs/parseargs@npm:0.11.0" - checksum: 6ad6a00fc4f2f2cfc6bff76fb1d88b8ee20bc0601e18ebb01b6d4be583733a860239a521a7fbca73b612e66705078809483549d2b18f370eb346c5155c8e4a0f - languageName: node - linkType: hard - "@pkgr/utils@npm:^2.3.1": version: 2.4.2 resolution: "@pkgr/utils@npm:2.4.2" @@ -6077,7 +6218,7 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-slot@npm:1.0.2, @radix-ui/react-slot@npm:^1.0.2": +"@radix-ui/react-slot@npm:1.0.2": version: 1.0.2 resolution: "@radix-ui/react-slot@npm:1.0.2" dependencies: @@ -7710,14 +7851,14 @@ __metadata: languageName: node linkType: hard -"@react-types/button@npm:^3.7.1, @react-types/button@npm:^3.9.4": - version: 3.9.4 - resolution: "@react-types/button@npm:3.9.4" +"@react-types/button@npm:^3.7.0, @react-types/button@npm:^3.7.1, @react-types/button@npm:^3.9.4": + version: 3.9.6 + resolution: "@react-types/button@npm:3.9.6" dependencies: - "@react-types/shared": ^3.23.1 + "@react-types/shared": ^3.24.1 peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 - checksum: 2c16247709be5d7acdc631439ff3647dc7ce20c037bdc8b3aee2662c17d177cc9d6060898672f08b48d05ea118d86c41df5588a8088053ae30ec38f3055851d8 + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0 + checksum: e4454a005998101a23ddf84d076646c79f679383f8a81bfd3285ff0906182f0f67f11434283d3568e846ddfb9c86972f5e79aab8f0fc9c86de243185d39b5283 languageName: node linkType: hard @@ -7938,12 +8079,12 @@ __metadata: languageName: node linkType: hard -"@react-types/shared@npm:^3.18.0, @react-types/shared@npm:^3.21.0, @react-types/shared@npm:^3.22.0, @react-types/shared@npm:^3.23.0, @react-types/shared@npm:^3.23.1": - version: 3.23.1 - resolution: "@react-types/shared@npm:3.23.1" +"@react-types/shared@npm:^3.18.0, @react-types/shared@npm:^3.21.0, @react-types/shared@npm:^3.22.0, @react-types/shared@npm:^3.23.0, @react-types/shared@npm:^3.23.1, @react-types/shared@npm:^3.24.1": + version: 3.24.1 + resolution: "@react-types/shared@npm:3.24.1" peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 - checksum: a180d8b34b1ccf98f9d50bbbb0451090444aa576e1fecc46a769b24cf827658e1a77e5affb17407cfac25897ba461fb4234a160e5c8efa484880fcb4f230c2fe + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0 + checksum: 157ed3a210bcbdcf9aae25db5df5d0650edcc8b98686654433c9526bfb4be6431838c6480fff2710cd5b68c9a521f519d6f352e919e04bf9aed52fa0d70ed887 languageName: node linkType: hard @@ -8500,6 +8641,29 @@ __metadata: languageName: unknown linkType: soft +"@sideway/address@npm:^4.1.5": + version: 4.1.5 + resolution: "@sideway/address@npm:4.1.5" + dependencies: + "@hapi/hoek": ^9.0.0 + checksum: 3e3ea0f00b4765d86509282290368a4a5fd39a7995fdc6de42116ca19a96120858e56c2c995081def06e1c53e1f8bccc7d013f6326602bec9d56b72ee2772b9d + languageName: node + linkType: hard + +"@sideway/formula@npm:^3.0.1": + version: 3.0.1 + resolution: "@sideway/formula@npm:3.0.1" + checksum: e4beeebc9dbe2ff4ef0def15cec0165e00d1612e3d7cea0bc9ce5175c3263fc2c818b679bd558957f49400ee7be9d4e5ac90487e1625b4932e15c4aa7919c57a + languageName: node + linkType: hard + +"@sideway/pinpoint@npm:^2.0.0": + version: 2.0.0 + resolution: "@sideway/pinpoint@npm:2.0.0" + checksum: 0f4491e5897fcf5bf02c46f5c359c56a314e90ba243f42f0c100437935daa2488f20482f0f77186bd6bf43345095a95d8143ecf8b1f4d876a7bc0806aba9c3d2 + languageName: node + linkType: hard + "@sinclair/typebox@npm:^0.23.3": version: 0.23.5 resolution: "@sinclair/typebox@npm:0.23.5" @@ -8521,6 +8685,13 @@ __metadata: languageName: node linkType: hard +"@sindresorhus/merge-streams@npm:^2.1.0": + version: 2.3.0 + resolution: "@sindresorhus/merge-streams@npm:2.3.0" + checksum: e989d53dee68d7e49b4ac02ae49178d561c461144cea83f66fa91ff012d981ad0ad2340cbd13f2fdb57989197f5c987ca22a74eb56478626f04e79df84291159 + languageName: node + linkType: hard + "@sinonjs/commons@npm:^1.7.0": version: 1.8.3 resolution: "@sinonjs/commons@npm:1.8.3" @@ -9109,44 +9280,41 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-a11y@npm:^8.0.8": - version: 8.0.8 - resolution: "@storybook/addon-a11y@npm:8.0.8" +"@storybook/addon-a11y@npm:^8.2.6": + version: 8.2.6 + resolution: "@storybook/addon-a11y@npm:8.2.6" dependencies: - "@storybook/addon-highlight": 8.0.8 + "@storybook/addon-highlight": 8.2.6 axe-core: ^4.2.0 - checksum: 492315f0db37bd0b988d771036a95e6a5714c4db8e496051d48dbb07e5f94b5ad8c9095c60e316a8b54aa153da26e753c1f3682b84991cf85117dba17293dcb2 + peerDependencies: + storybook: ^8.2.6 + checksum: 121301b3b03b2fb5d82fae63ce185c1ddaa8dccbc9e74770bd76aa278d6e74b2cf5cdefb88480a0c4ab5aa9c6c59abc946c5748e9c5c1cef70eb5cd77593d1b9 languageName: node linkType: hard -"@storybook/addon-controls@npm:^8.0.8": - version: 8.0.8 - resolution: "@storybook/addon-controls@npm:8.0.8" +"@storybook/addon-controls@npm:^8.2.6": + version: 8.2.6 + resolution: "@storybook/addon-controls@npm:8.2.6" dependencies: - "@storybook/blocks": 8.0.8 + dequal: ^2.0.2 lodash: ^4.17.21 ts-dedent: ^2.0.0 - checksum: cb8df1ddb01bbdc523fed16e79375a0b4047bdad8de9af95d0bc30d42e2988d4d8b75d8ee41cf9bf308439fbc2d18241790113eac62565b32f7db3d5ade991d8 + peerDependencies: + storybook: ^8.2.6 + checksum: 9d9b8bfad69ecf11abcbc42ff19580761f4cdbaac1b2e4bf2e750805545e6b1941251ad6b036f232496d98a4544c7464c5ddf9ded80b78a06345962c687ebcba languageName: node linkType: hard -"@storybook/addon-docs@npm:^8.0.8": - version: 8.0.8 - resolution: "@storybook/addon-docs@npm:8.0.8" +"@storybook/addon-docs@npm:^8.2.6": + version: 8.2.6 + resolution: "@storybook/addon-docs@npm:8.2.6" dependencies: - "@babel/core": ^7.12.3 + "@babel/core": ^7.24.4 "@mdx-js/react": ^3.0.0 - "@storybook/blocks": 8.0.8 - "@storybook/client-logger": 8.0.8 - "@storybook/components": 8.0.8 - "@storybook/csf-plugin": 8.0.8 - "@storybook/csf-tools": 8.0.8 + "@storybook/blocks": 8.2.6 + "@storybook/csf-plugin": 8.2.6 "@storybook/global": ^5.0.0 - "@storybook/node-logger": 8.0.8 - "@storybook/preview-api": 8.0.8 - "@storybook/react-dom-shim": 8.0.8 - "@storybook/theming": 8.0.8 - "@storybook/types": 8.0.8 + "@storybook/react-dom-shim": 8.2.6 "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 fs-extra: ^11.1.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -9154,140 +9322,114 @@ __metadata: rehype-external-links: ^3.0.0 rehype-slug: ^6.0.0 ts-dedent: ^2.0.0 - checksum: 57f3b2a000a8251aff8d57af202a1025e3530eba2a8fbfb12a96753f303b31d282164f92bec61745dfb500c046fc6aac44b144e9cf4d86679276c6e6ae45b8c9 + peerDependencies: + storybook: ^8.2.6 + checksum: 1797a2a3510cda6f70c60b608ddaa6628fbeedda924165e8ff107777b93778e945732a79ac20bdf0b8262c2f0306127bc356ef224abf018f0fc87bdd68f39877 languageName: node linkType: hard -"@storybook/addon-highlight@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/addon-highlight@npm:8.0.8" +"@storybook/addon-highlight@npm:8.2.6": + version: 8.2.6 + resolution: "@storybook/addon-highlight@npm:8.2.6" dependencies: "@storybook/global": ^5.0.0 - checksum: a7b90ebbd0a50c3455f9ced4171f24f0cc5546ccbf63b3bc1a583ffd07a5994524765907a09a9e81b6d58d15de0b1bb80d07c6a7488746f0f794da74fef26d22 + peerDependencies: + storybook: ^8.2.6 + checksum: 35f8129c75c9ba6113fbcbc70a867708e53de0c85a2bc5d38354ae3e0101c6bec35733d62408b14e56d7d03f052c7ddcf8e52fcb41d85e00ec8b9304ebc6219f languageName: node linkType: hard -"@storybook/addon-measure@npm:^8.0.8": - version: 8.0.8 - resolution: "@storybook/addon-measure@npm:8.0.8" +"@storybook/addon-measure@npm:^8.2.6": + version: 8.2.6 + resolution: "@storybook/addon-measure@npm:8.2.6" dependencies: "@storybook/global": ^5.0.0 tiny-invariant: ^1.3.1 - checksum: 412fdb4ecd314a41f3b2e32d37a755226bcf219ed53abb2cdbff823645885cc4f8bef09e4fde2ef808ce23d4a0108c6c4a18d5012853a932e84a41a573f576b7 + peerDependencies: + storybook: ^8.2.6 + checksum: a20752eb5a37be037d088bcfb04bee4275ad62f5eacc1013c0213b05079f0d8a5741a339d2d9d30b06d2bafe035b5c2b85cc42e3c2c641e0783437262ed5705e languageName: node linkType: hard -"@storybook/addon-outline@npm:^8.0.8": - version: 8.0.8 - resolution: "@storybook/addon-outline@npm:8.0.8" +"@storybook/addon-outline@npm:^8.2.6": + version: 8.2.6 + resolution: "@storybook/addon-outline@npm:8.2.6" dependencies: "@storybook/global": ^5.0.0 ts-dedent: ^2.0.0 - checksum: 0e6a0ab99167ff33df91830ee996054d0bbe80a1bfa6487400714bd664d6a2cd46127706876197850f24d505576ef4f5a55271fc5b1c186ca9f43f95f2bda688 + peerDependencies: + storybook: ^8.2.6 + checksum: 570ae5ef1c30c7a5da5262548d93284b8a798d49f95f49ccbcc12d43436bb1f108c37aae3e6c6625fdcf72c52ca108f15f0ed21dde47e96042d7a5cfc071aaa4 languageName: node linkType: hard -"@storybook/addon-toolbars@npm:^8.0.8": - version: 8.0.8 - resolution: "@storybook/addon-toolbars@npm:8.0.8" - checksum: ea58e380b479440cd5944ae4af8a79c65463699fb91fc712e1c3cd64ca006d6a670dc4445a40e5d96c1b74ea06f9489a8461b681bfce2423e881fc5aae42c78d +"@storybook/addon-toolbars@npm:^8.2.6": + version: 8.2.6 + resolution: "@storybook/addon-toolbars@npm:8.2.6" + peerDependencies: + storybook: ^8.2.6 + checksum: 5201ea14d40ead43c86b0ae3540ded45fd71345ce0ba595e50938b4adbdaab8a86f99897c46676dfabe8260af83c52742cad38a588e2052862d313a8596505c6 languageName: node linkType: hard -"@storybook/addon-viewport@npm:^8.0.8": - version: 8.0.8 - resolution: "@storybook/addon-viewport@npm:8.0.8" +"@storybook/addon-viewport@npm:^8.2.6": + version: 8.2.6 + resolution: "@storybook/addon-viewport@npm:8.2.6" dependencies: memoizerific: ^1.11.3 - checksum: 43a371dc256f0586f38d9a64bc2d1079f2ac2a0ffe18e468c726cfa7c2bee44ccca3eabbc315e06e8dc1b589516f232b3413247797ed5c7d5f6f05dba3021b69 + peerDependencies: + storybook: ^8.2.6 + checksum: 89e5dc64fcc15acef921209d96b5c7d6ee039f0e3f55f8a44f74284a80f0947b59e3d3c692a3073bc40be250df49556d0bc69c29fc65d125d516c9012d013970 languageName: node linkType: hard -"@storybook/blocks@npm:8.0.8, @storybook/blocks@npm:^8.0.8": - version: 8.0.8 - resolution: "@storybook/blocks@npm:8.0.8" +"@storybook/blocks@npm:8.2.6, @storybook/blocks@npm:^8.2.6": + version: 8.2.6 + resolution: "@storybook/blocks@npm:8.2.6" dependencies: - "@storybook/channels": 8.0.8 - "@storybook/client-logger": 8.0.8 - "@storybook/components": 8.0.8 - "@storybook/core-events": 8.0.8 - "@storybook/csf": ^0.1.2 - "@storybook/docs-tools": 8.0.8 + "@storybook/csf": 0.1.11 "@storybook/global": ^5.0.0 "@storybook/icons": ^1.2.5 - "@storybook/manager-api": 8.0.8 - "@storybook/preview-api": 8.0.8 - "@storybook/theming": 8.0.8 - "@storybook/types": 8.0.8 "@types/lodash": ^4.14.167 color-convert: ^2.0.1 dequal: ^2.0.2 lodash: ^4.17.21 - markdown-to-jsx: 7.3.2 + markdown-to-jsx: ^7.4.5 memoizerific: ^1.11.3 polished: ^4.2.2 react-colorful: ^5.1.2 telejson: ^7.2.0 - tocbot: ^4.20.1 ts-dedent: ^2.0.0 util-deprecate: ^1.0.2 peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + storybook: ^8.2.6 peerDependenciesMeta: react: optional: true react-dom: optional: true - checksum: 3552086e3643775d8b9f0afe25b04164389acfc75909f74308ce4d9fc47a5f9c78f004cc798c348b1500a22d1530693d6460b7e79cdf7356a905dde40d8ef0c8 + checksum: 70206d194d05455fbb88e76457e8f2cc5b9c3bdf5d3da3eac75c23640518d39b04bc92943b9e12056c3baa9cd2789475432bacff486ccd315d98f4bd3cbb7c9f languageName: node linkType: hard -"@storybook/builder-manager@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/builder-manager@npm:8.0.8" +"@storybook/builder-vite@npm:8.2.6, @storybook/builder-vite@npm:^8.2.6": + version: 8.2.6 + resolution: "@storybook/builder-vite@npm:8.2.6" dependencies: - "@fal-works/esbuild-plugin-global-externals": ^2.1.2 - "@storybook/core-common": 8.0.8 - "@storybook/manager": 8.0.8 - "@storybook/node-logger": 8.0.8 - "@types/ejs": ^3.1.1 - "@yarnpkg/esbuild-plugin-pnp": ^3.0.0-rc.10 - browser-assert: ^1.2.1 - ejs: ^3.1.8 - esbuild: ^0.18.0 || ^0.19.0 || ^0.20.0 - esbuild-plugin-alias: ^0.2.1 - express: ^4.17.3 - fs-extra: ^11.1.0 - process: ^0.11.10 - util: ^0.12.4 - checksum: 491e4bfdff0f942bd8895ffa3c04fe54ab724a251b6ba3d1c60e7163fecf5e56b768db4466b75b06775c98ff5df48e20b80e80ed30121c4b0211511701d59245 - languageName: node - linkType: hard - -"@storybook/builder-vite@npm:8.0.8, @storybook/builder-vite@npm:^8.0.8": - version: 8.0.8 - resolution: "@storybook/builder-vite@npm:8.0.8" - dependencies: - "@storybook/channels": 8.0.8 - "@storybook/client-logger": 8.0.8 - "@storybook/core-common": 8.0.8 - "@storybook/core-events": 8.0.8 - "@storybook/csf-plugin": 8.0.8 - "@storybook/node-logger": 8.0.8 - "@storybook/preview": 8.0.8 - "@storybook/preview-api": 8.0.8 - "@storybook/types": 8.0.8 + "@storybook/csf-plugin": 8.2.6 "@types/find-cache-dir": ^3.2.1 browser-assert: ^1.2.1 - es-module-lexer: ^0.9.3 - express: ^4.17.3 + es-module-lexer: ^1.5.0 + express: ^4.19.2 find-cache-dir: ^3.0.0 fs-extra: ^11.1.0 magic-string: ^0.30.0 ts-dedent: ^2.0.0 peerDependencies: "@preact/preset-vite": "*" + storybook: ^8.2.6 typescript: ">= 4.3.x" vite: ^4.0.0 || ^5.0.0 vite-plugin-glimmerx: "*" @@ -9298,242 +9440,94 @@ __metadata: optional: true vite-plugin-glimmerx: optional: true - checksum: 64a0d197ca0f29f1554168937c532f90752af29c2ac239503ebf3c4e3473e1cb5510d6561b5aee007642e40bb5e1849325c8065133431f31e5b9ab835b232703 - languageName: node - linkType: hard - -"@storybook/channels@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/channels@npm:8.0.8" - dependencies: - "@storybook/client-logger": 8.0.8 - "@storybook/core-events": 8.0.8 - "@storybook/global": ^5.0.0 - telejson: ^7.2.0 - tiny-invariant: ^1.3.1 - checksum: 2638bd99f22be6653c9af2a0bd924f0c7171c444f83a654a22c58ba3d071771cc80c74387ebe5e63496e1bb59514279b96e8a86974da95b1086d984d6820ad0d - languageName: node - linkType: hard - -"@storybook/cli@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/cli@npm:8.0.8" - dependencies: - "@babel/core": ^7.23.0 - "@babel/types": ^7.23.0 - "@ndelangen/get-tarball": ^3.0.7 - "@storybook/codemod": 8.0.8 - "@storybook/core-common": 8.0.8 - "@storybook/core-events": 8.0.8 - "@storybook/core-server": 8.0.8 - "@storybook/csf-tools": 8.0.8 - "@storybook/node-logger": 8.0.8 - "@storybook/telemetry": 8.0.8 - "@storybook/types": 8.0.8 - "@types/semver": ^7.3.4 - "@yarnpkg/fslib": 2.10.3 - "@yarnpkg/libzip": 2.3.0 - chalk: ^4.1.0 - commander: ^6.2.1 - cross-spawn: ^7.0.3 - detect-indent: ^6.1.0 - envinfo: ^7.7.3 - execa: ^5.0.0 - find-up: ^5.0.0 - fs-extra: ^11.1.0 - get-npm-tarball-url: ^2.0.3 - giget: ^1.0.0 - globby: ^11.0.2 - jscodeshift: ^0.15.1 - leven: ^3.1.0 - ora: ^5.4.1 - prettier: ^3.1.1 - prompts: ^2.4.0 - read-pkg-up: ^7.0.1 - semver: ^7.3.7 - strip-json-comments: ^3.0.1 - tempy: ^1.0.1 - tiny-invariant: ^1.3.1 - ts-dedent: ^2.0.0 - bin: - getstorybook: ./bin/index.js - sb: ./bin/index.js - checksum: f3823b0e5cf7bd9af6ff9334ab8a78b93eaa0e8b9cae2cde261c72399a831ce435435aa2fa445c5ab189eb0db9aa9e00d646520176402c3f2a31af93b03a3c78 - languageName: node - linkType: hard - -"@storybook/client-logger@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/client-logger@npm:8.0.8" - dependencies: - "@storybook/global": ^5.0.0 - checksum: 338dfd38f155de32d404685cec3a7a26eed7d00c1589c0a436e4c24aa44c3fe99ea1e5f47198036ba140aa541e46239fe64ac489cdf23a24fab8637f99907c54 + checksum: 0629756daaa0beb7c46c9f074ba09eef1840b01686606192e3c6b10906963ad733570367799a12e70fca5e6ca8ea3e5c5c0128093682c80d3c1af7a40ef0bd17 languageName: node linkType: hard -"@storybook/codemod@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/codemod@npm:8.0.8" +"@storybook/codemod@npm:8.2.6": + version: 8.2.6 + resolution: "@storybook/codemod@npm:8.2.6" dependencies: - "@babel/core": ^7.23.2 - "@babel/preset-env": ^7.23.2 - "@babel/types": ^7.23.0 - "@storybook/csf": ^0.1.2 - "@storybook/csf-tools": 8.0.8 - "@storybook/node-logger": 8.0.8 - "@storybook/types": 8.0.8 + "@babel/core": ^7.24.4 + "@babel/preset-env": ^7.24.4 + "@babel/types": ^7.24.0 + "@storybook/core": 8.2.6 + "@storybook/csf": 0.1.11 "@types/cross-spawn": ^6.0.2 cross-spawn: ^7.0.3 - globby: ^11.0.2 + globby: ^14.0.1 jscodeshift: ^0.15.1 lodash: ^4.17.21 prettier: ^3.1.1 recast: ^0.23.5 tiny-invariant: ^1.3.1 - checksum: cf3e7c82519e8b38bb022f7eb91e13f6ee9dfcc1b74773ad988f024f4da7f2bdb10a2be53e8e52ac23474d338f4648b6c2cf5c28a5d7c6cfccff7a723d2455db + checksum: 7278f9103ddb04b0567ef8a8a00bc4350d2d666aa9ce1eeba2d8819abdbb1e73deab56477895a1fcd46f401605f80c65c901d5eec99515cd1571ac6378bc929f languageName: node linkType: hard -"@storybook/components@npm:8.0.8, @storybook/components@npm:^8.0.8": - version: 8.0.8 - resolution: "@storybook/components@npm:8.0.8" - dependencies: - "@radix-ui/react-slot": ^1.0.2 - "@storybook/client-logger": 8.0.8 - "@storybook/csf": ^0.1.2 - "@storybook/global": ^5.0.0 - "@storybook/icons": ^1.2.5 - "@storybook/theming": 8.0.8 - "@storybook/types": 8.0.8 - memoizerific: ^1.11.3 - util-deprecate: ^1.0.2 +"@storybook/components@npm:^8.2.6": + version: 8.2.6 + resolution: "@storybook/components@npm:8.2.6" peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: e8ace6eabb57ce229590095b4a3afe3713d21e51ea3cce900904149335d4399d0b6264f4a7b826d33f8a268a9af53c71839c233c6972a31ff4ae7008e809650a + storybook: ^8.2.6 + checksum: 847553f83acf25972210b89ba555efbc93e6b2d0d9d42a54cdc14f7ba98b699f91ea78a1ba6ebd323876069facefd6c8b7ebdc0685de85890cfadae5a44ce8ff languageName: node linkType: hard -"@storybook/core-common@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/core-common@npm:8.0.8" - dependencies: - "@storybook/core-events": 8.0.8 - "@storybook/csf-tools": 8.0.8 - "@storybook/node-logger": 8.0.8 - "@storybook/types": 8.0.8 - "@yarnpkg/fslib": 2.10.3 - "@yarnpkg/libzip": 2.3.0 - chalk: ^4.1.0 - cross-spawn: ^7.0.3 - esbuild: ^0.18.0 || ^0.19.0 || ^0.20.0 - esbuild-register: ^3.5.0 - execa: ^5.0.0 - file-system-cache: 2.3.0 - find-cache-dir: ^3.0.0 - find-up: ^5.0.0 - fs-extra: ^11.1.0 - glob: ^10.0.0 - handlebars: ^4.7.7 - lazy-universal-dotenv: ^4.0.0 - node-fetch: ^2.0.0 - picomatch: ^2.3.0 - pkg-dir: ^5.0.0 - pretty-hrtime: ^1.0.3 - resolve-from: ^5.0.0 - semver: ^7.3.7 - tempy: ^1.0.1 - tiny-invariant: ^1.3.1 - ts-dedent: ^2.0.0 - util: ^0.12.4 - checksum: eac21b6cca6916a60acc463515e3fd3171698459901f813c32b8006efe84bcf436eeb00d0027feee2be15e3fb64739078615a3953fef1a92abb53aa126071a42 - languageName: node - linkType: hard - -"@storybook/core-events@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/core-events@npm:8.0.8" - dependencies: - ts-dedent: ^2.0.0 - checksum: 5be3d0310bb1db3bbf1ed5a3b2c9b8f89df3fc1e735702e4b237b16c9bca09b27418948f80b10932b0a139256e1b3c9a870d553849319bdf164a14fd21719aa5 +"@storybook/core-common@npm:^8.0.0": + version: 8.2.6 + resolution: "@storybook/core-common@npm:8.2.6" + peerDependencies: + storybook: ^8.2.6 + checksum: 7b0be0932cba4f5137b07726d169fe16cbd2061d076b53878a1b3bdf306f1a615895efb58202f95b21e79b2e3336a2924cfcd4f40954aaa6f9d1ae92bcfd194f languageName: node linkType: hard -"@storybook/core-server@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/core-server@npm:8.0.8" +"@storybook/core@npm:8.2.6": + version: 8.2.6 + resolution: "@storybook/core@npm:8.2.6" dependencies: - "@aw-web-design/x-default-browser": 1.4.126 - "@babel/core": ^7.23.9 - "@discoveryjs/json-ext": ^0.5.3 - "@storybook/builder-manager": 8.0.8 - "@storybook/channels": 8.0.8 - "@storybook/core-common": 8.0.8 - "@storybook/core-events": 8.0.8 - "@storybook/csf": ^0.1.2 - "@storybook/csf-tools": 8.0.8 - "@storybook/docs-mdx": 3.0.0 - "@storybook/global": ^5.0.0 - "@storybook/manager": 8.0.8 - "@storybook/manager-api": 8.0.8 - "@storybook/node-logger": 8.0.8 - "@storybook/preview-api": 8.0.8 - "@storybook/telemetry": 8.0.8 - "@storybook/types": 8.0.8 - "@types/detect-port": ^1.3.0 + "@storybook/csf": 0.1.11 + "@types/express": ^4.17.21 "@types/node": ^18.0.0 - "@types/pretty-hrtime": ^1.0.0 - "@types/semver": ^7.3.4 - better-opn: ^3.0.2 - chalk: ^4.1.0 - cli-table3: ^0.6.1 - compression: ^1.7.4 - detect-port: ^1.3.0 - express: ^4.17.3 - fs-extra: ^11.1.0 - globby: ^11.0.2 - ip: ^2.0.1 - lodash: ^4.17.21 - open: ^8.4.0 - pretty-hrtime: ^1.0.3 - prompts: ^2.4.0 - read-pkg-up: ^7.0.1 - semver: ^7.3.7 - telejson: ^7.2.0 - tiny-invariant: ^1.3.1 - ts-dedent: ^2.0.0 + browser-assert: ^1.2.1 + esbuild: ^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 + esbuild-register: ^3.5.0 + express: ^4.19.2 + process: ^0.11.10 + recast: ^0.23.5 util: ^0.12.4 - util-deprecate: ^1.0.2 - watchpack: ^2.2.0 ws: ^8.2.3 - checksum: 173802dee1ce799a1c95f3e6d3de4ee6abe013592cc71adcf8d579ba3f7627aeb79d2a88013c29f0c8a96b98855de23c5dec606cde1c8601027395c9e26044b7 + checksum: 5fcfabbc4c17b8467a2cf4f985477c9b02b991da82dfd205358ba1bd8fecfaa595fe427da84711647689ee17263918d5ce97624842b9dba66ffc177ff7cc028a languageName: node linkType: hard -"@storybook/csf-plugin@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/csf-plugin@npm:8.0.8" +"@storybook/csf-plugin@npm:8.2.6": + version: 8.2.6 + resolution: "@storybook/csf-plugin@npm:8.2.6" dependencies: - "@storybook/csf-tools": 8.0.8 unplugin: ^1.3.1 - checksum: acd59296309739483b1129e878fc971ceef2f53652e210ca6df3992e6b1f33a1272f3c1813066db10e0febc828283416458e46bb9f9a5e2f7fd6af6498c9d305 + peerDependencies: + storybook: ^8.2.6 + checksum: 7ddf4c797930c210005a09310d3d8d2528b71fe8bd5a3768ffcc42d2ddcfec3388c4ef496b8345ec9c444a92753723c4ef052c9cd2039f638da7b48c90ea3a4c languageName: node linkType: hard -"@storybook/csf-tools@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/csf-tools@npm:8.0.8" +"@storybook/csf-tools@npm:^8.0.0": + version: 8.2.6 + resolution: "@storybook/csf-tools@npm:8.2.6" + peerDependencies: + storybook: ^8.2.6 + checksum: 473a16c5d26abdefe3517bd23fdff4786d012d905f37a92a99c651c53c7cb45983ab4bff8c2212c4032f9982243b76f761d5d59178e8d12f91bee23e6f7b4134 + languageName: node + linkType: hard + +"@storybook/csf@npm:0.1.11, @storybook/csf@npm:^0.1.11": + version: 0.1.11 + resolution: "@storybook/csf@npm:0.1.11" dependencies: - "@babel/generator": ^7.23.0 - "@babel/parser": ^7.23.0 - "@babel/traverse": ^7.23.2 - "@babel/types": ^7.23.0 - "@storybook/csf": ^0.1.2 - "@storybook/types": 8.0.8 - fs-extra: ^11.1.0 - recast: ^0.23.5 - ts-dedent: ^2.0.0 - checksum: d74cc18c564a4feec063dd02d3132bb360fe766d0dba5f06250554a4cbeb17d36c192da3f3bbe5aed30530a1270233d50cee963a55a8f5950f515878b79b6286 + type-fest: ^2.19.0 + checksum: ba2a265f62ad82a2853b069f77e974efe31bed263a640ca1dd8e6d7e194022018a67ad4a2587ae928f33ae45aaf6ffedd5925ba3fcf3fe5b7996667a918e22eb languageName: node linkType: hard @@ -9546,37 +9540,6 @@ __metadata: languageName: node linkType: hard -"@storybook/csf@npm:^0.1.2": - version: 0.1.2 - resolution: "@storybook/csf@npm:0.1.2" - dependencies: - type-fest: ^2.19.0 - checksum: 22038dfd5e46cd9565c3dec615918c0712eb5fc5f56e9ec89cfa75d7b48667b8fcbf7e9d1f46c9f4d440eee074f1d23a84dc56a937add37b28ddf890fdedfb8a - languageName: node - linkType: hard - -"@storybook/docs-mdx@npm:3.0.0": - version: 3.0.0 - resolution: "@storybook/docs-mdx@npm:3.0.0" - checksum: c83d59c1a2d917152adc9e8b3c7d1c089ac3377159c55757d70996b63d1e1d461b72e13c600c2d79d3e210b1cfa3724fe83838147ec45bc51c36f74bbb2bfbd5 - languageName: node - linkType: hard - -"@storybook/docs-tools@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/docs-tools@npm:8.0.8" - dependencies: - "@storybook/core-common": 8.0.8 - "@storybook/preview-api": 8.0.8 - "@storybook/types": 8.0.8 - "@types/doctrine": ^0.0.3 - assert: ^2.1.0 - doctrine: ^3.0.0 - lodash: ^4.17.21 - checksum: 9a1404d275df8ebe65567e5563a1d0d711fc16fc7d1b834a4445245c8bd34d759aee8fa86e74eea27c2e8bd6b90a04310e94c8a95a516bfbbbe2d47ef91a218a - languageName: node - linkType: hard - "@storybook/global@npm:^5.0.0": version: 5.0.0 resolution: "@storybook/global@npm:5.0.0" @@ -9594,129 +9557,101 @@ __metadata: languageName: node linkType: hard -"@storybook/manager-api@npm:8.0.8, @storybook/manager-api@npm:^8.0.8": - version: 8.0.8 - resolution: "@storybook/manager-api@npm:8.0.8" - dependencies: - "@storybook/channels": 8.0.8 - "@storybook/client-logger": 8.0.8 - "@storybook/core-events": 8.0.8 - "@storybook/csf": ^0.1.2 - "@storybook/global": ^5.0.0 - "@storybook/icons": ^1.2.5 - "@storybook/router": 8.0.8 - "@storybook/theming": 8.0.8 - "@storybook/types": 8.0.8 - dequal: ^2.0.2 - lodash: ^4.17.21 - memoizerific: ^1.11.3 - store2: ^2.14.2 - telejson: ^7.2.0 - ts-dedent: ^2.0.0 - checksum: 1d441178aa11e8553ddfd757697d6ed485cbc262c0556ff61507f54ceec3f809137adecaf038221ee89a7fcaae12ea724ade8973aa81f9a871b6f4a9f2ac48a1 - languageName: node - linkType: hard - -"@storybook/manager@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/manager@npm:8.0.8" - checksum: 0b6d9027128ff9a8e70bf74c0ecbd337b9242018fea8a1f675617e763f20800c8021982da7e193c6d0c2368d544c92788161fa34df787b0a9c91c70b6b57f131 - languageName: node - linkType: hard - -"@storybook/node-logger@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/node-logger@npm:8.0.8" - checksum: c7d2bc23cace21640b30c7a270c986932007c02b22c24ac271dfe9405bab4f70f45cb5847c630bd18913e45e975f4f69f3c57aa75badfb77757afef41069a278 +"@storybook/manager-api@npm:^8.2.6": + version: 8.2.6 + resolution: "@storybook/manager-api@npm:8.2.6" + peerDependencies: + storybook: ^8.2.6 + checksum: 98e0b8b8de478ea660318890b7227b490d4a206addc692493bdd9e8ef6c5a9d1f2977f7dd70a6064bccdef50948dbc47c047bc40a725df9e9dd2948740bb9b06 languageName: node linkType: hard -"@storybook/preset-create-react-app@npm:^8.0.8": - version: 8.0.8 - resolution: "@storybook/preset-create-react-app@npm:8.0.8" +"@storybook/preset-create-react-app@npm:^8.2.6": + version: 8.2.6 + resolution: "@storybook/preset-create-react-app@npm:8.2.6" dependencies: "@pmmmwh/react-refresh-webpack-plugin": ^0.5.1 - "@storybook/types": 8.0.8 + "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0 "@types/semver": ^7.5.6 pnp-webpack-plugin: ^1.7.0 semver: ^7.5.4 peerDependencies: react-scripts: ">=5.0.0" - checksum: 73e9fc3de735dcbf26a86884ff180c548b0b9182e397ba986e55cdef40fa5b7b4d67924f57cfb7d73b30867b35938846dcec96ee228e3b8005f9392e76544f6c + storybook: ^8.2.6 + checksum: 5895756384f44e6aee07bd0a63bd76e5d15e1fe3689494aea0a9ff09786feb2fed8bc7e9075f45708f2d46dc6e909f334483a0b9a93c3432ece98d6417219d64 languageName: node linkType: hard -"@storybook/preview-api@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/preview-api@npm:8.0.8" - dependencies: - "@storybook/channels": 8.0.8 - "@storybook/client-logger": 8.0.8 - "@storybook/core-events": 8.0.8 - "@storybook/csf": ^0.1.2 - "@storybook/global": ^5.0.0 - "@storybook/types": 8.0.8 - "@types/qs": ^6.9.5 - dequal: ^2.0.2 - lodash: ^4.17.21 - memoizerific: ^1.11.3 - qs: ^6.10.0 - tiny-invariant: ^1.3.1 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 - checksum: 98b19900755843aa171b56d8e8d219cff2c3fd186a063a4f5e50dbdcd708302e6e118a81e1cb2ee101b5b7d10c906ff1042be8a9c967e1541cc3b118102d9b95 +"@storybook/preview-api@npm:^8.0.0, @storybook/preview-api@npm:^8.2.6": + version: 8.2.6 + resolution: "@storybook/preview-api@npm:8.2.6" + peerDependencies: + storybook: ^8.2.6 + checksum: 97548cd4617a22066ad78a34a3d07cbfe9efbbdfa3ad98e13fdfedeed750a6bbaecea8d916d4b1b6b956e18a5dc401d3682b908a42ecdd734cf0f5d3583177da languageName: node linkType: hard -"@storybook/preview@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/preview@npm:8.0.8" - checksum: 819b59a8963525e89b64bad75f7eef599e0ab43b4ea4d812319b3e891513ac2f3fdfc6d7d23029ce685242b4c493d729f0d07464024b585ad8ea4293b137d686 +"@storybook/react-docgen-typescript-plugin@npm:1.0.6--canary.9.0c3f3b7.0": + version: 1.0.6--canary.9.0c3f3b7.0 + resolution: "@storybook/react-docgen-typescript-plugin@npm:1.0.6--canary.9.0c3f3b7.0" + dependencies: + debug: ^4.1.1 + endent: ^2.0.1 + find-cache-dir: ^3.3.1 + flat-cache: ^3.0.4 + micromatch: ^4.0.2 + react-docgen-typescript: ^2.2.2 + tslib: ^2.0.0 + peerDependencies: + typescript: ">= 4.x" + webpack: ">= 4" + checksum: 38c59c1dd7f9cdf5533e5ffe1991034f563f8d33c59e3cd33fa86719c72f5fe922276fde50315dd24f23f225d1ad5f3a261ecf4c70e82522805d09782272faff languageName: node linkType: hard -"@storybook/react-dom-shim@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/react-dom-shim@npm:8.0.8" +"@storybook/react-dom-shim@npm:8.2.6": + version: 8.2.6 + resolution: "@storybook/react-dom-shim@npm:8.2.6" peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: c3117f4c1fe290d23bdf62260066b9552a02de49c6d0bde1b138e8bf2b7e0405e2ad217b0bbee8ea0ba47cfb4b8f78eee7974dcefd7ca78f203d33f356ddc7ae + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + storybook: ^8.2.6 + checksum: 5eb25647970591be6144874fe39c40a4d054ca0c224fb065f27458395d3679c3606547de4d5a7115768897e3dee4c6eab9bbe46e7df5f3e7a31a49080cbbddee languageName: node linkType: hard -"@storybook/react-vite@npm:^8.0.8": - version: 8.0.8 - resolution: "@storybook/react-vite@npm:8.0.8" +"@storybook/react-vite@npm:^8.2.6": + version: 8.2.6 + resolution: "@storybook/react-vite@npm:8.2.6" dependencies: - "@joshwooding/vite-plugin-react-docgen-typescript": 0.3.0 + "@joshwooding/vite-plugin-react-docgen-typescript": 0.3.1 "@rollup/pluginutils": ^5.0.2 - "@storybook/builder-vite": 8.0.8 - "@storybook/node-logger": 8.0.8 - "@storybook/react": 8.0.8 + "@storybook/builder-vite": 8.2.6 + "@storybook/react": 8.2.6 find-up: ^5.0.0 magic-string: ^0.30.0 react-docgen: ^7.0.0 resolve: ^1.22.8 tsconfig-paths: ^4.2.0 peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + storybook: ^8.2.6 vite: ^4.0.0 || ^5.0.0 - checksum: bc82fc9d4a7d19dc1c75cd1290e4dac362bc3158944fad0bb3f5e6e0230e9bde67db5dbb813d0cdadfb0241d308c0c82b11ee5577550d7311b72c00b352b209c + checksum: c53878a87944251eeece0cc60918881c52d6a96131dab3584a08bfb24b1d6e94206f1658cb7b822ac54e81286b4259bbbc13f1d7719045205eefd47183c84d19 languageName: node linkType: hard -"@storybook/react@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/react@npm:8.0.8" +"@storybook/react@npm:8.2.6": + version: 8.2.6 + resolution: "@storybook/react@npm:8.2.6" dependencies: - "@storybook/client-logger": 8.0.8 - "@storybook/docs-tools": 8.0.8 + "@storybook/components": ^8.2.6 "@storybook/global": ^5.0.0 - "@storybook/preview-api": 8.0.8 - "@storybook/react-dom-shim": 8.0.8 - "@storybook/types": 8.0.8 + "@storybook/manager-api": ^8.2.6 + "@storybook/preview-api": ^8.2.6 + "@storybook/react-dom-shim": 8.2.6 + "@storybook/theming": ^8.2.6 "@types/escodegen": ^0.0.6 "@types/estree": ^0.0.51 "@types/node": ^18.0.0 @@ -9733,71 +9668,55 @@ __metadata: type-fest: ~2.19 util-deprecate: ^1.0.2 peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + storybook: ^8.2.6 typescript: ">= 4.2.x" peerDependenciesMeta: typescript: optional: true - checksum: c751a2b53aa5710bfdd80f0ab85202bf8b302dab5319cc27c76f3d22f86c2e4236c4ff22c6826244a4ef59094ed6182679f7ffa21b4375478bb713217584a9df - languageName: node - linkType: hard - -"@storybook/router@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/router@npm:8.0.8" - dependencies: - "@storybook/client-logger": 8.0.8 - memoizerific: ^1.11.3 - qs: ^6.10.0 - checksum: f3530f267d0c6b755c7603bd9799f1190a24b83f8fc8262d9c85dedeee80b2ad1919befceeebda89bda56c35097e075170db3f00f0caad29c0d9df36cdb369b1 + checksum: 245260e5d27f5780a93f7bcf7ead477129b1151ef22b417cba85bebe0311e8478cc0dd8b68864eea1d9d910f5461cfce7507bbe435f72a1c50adbec4c8504799 languageName: node linkType: hard -"@storybook/telemetry@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/telemetry@npm:8.0.8" +"@storybook/test-runner@npm:^0.19.1": + version: 0.19.1 + resolution: "@storybook/test-runner@npm:0.19.1" dependencies: - "@storybook/client-logger": 8.0.8 - "@storybook/core-common": 8.0.8 - "@storybook/csf-tools": 8.0.8 - chalk: ^4.1.0 - detect-package-manager: ^2.0.1 - fetch-retry: ^5.0.2 - fs-extra: ^11.1.0 - read-pkg-up: ^7.0.1 - checksum: c8021e61cb7d8e1f7d1024e3bd01f3b3f24f3203fa37ec1dc941c5ec3264b57832b4a217614bbd8a9dce49b1d4e2b75bf7b10963cea2114587a64dc3c1665938 + "@babel/core": ^7.22.5 + "@babel/generator": ^7.22.5 + "@babel/template": ^7.22.5 + "@babel/types": ^7.22.5 + "@jest/types": ^29.6.3 + "@storybook/core-common": ^8.0.0 + "@storybook/csf": ^0.1.11 + "@storybook/csf-tools": ^8.0.0 + "@storybook/preview-api": ^8.0.0 + "@swc/core": ^1.5.22 + "@swc/jest": ^0.2.23 + expect-playwright: ^0.8.0 + jest: ^29.6.4 + jest-circus: ^29.6.4 + jest-environment-node: ^29.6.4 + jest-junit: ^16.0.0 + jest-playwright-preset: ^4.0.0 + jest-runner: ^29.6.4 + jest-serializer-html: ^7.1.0 + jest-watch-typeahead: ^2.0.0 + nyc: ^15.1.0 + playwright: ^1.14.0 + bin: + test-storybook: dist/test-storybook.js + checksum: fbc40f032fdb98086ad4ab77ee396b4326923edf55ea59763d22308c89bfb61af5cbd397c76ed755759c1aa3be39f333733e35b2db960b3b130f8909096f158c languageName: node linkType: hard -"@storybook/theming@npm:8.0.8, @storybook/theming@npm:^8.0.8": - version: 8.0.8 - resolution: "@storybook/theming@npm:8.0.8" - dependencies: - "@emotion/use-insertion-effect-with-fallbacks": ^1.0.1 - "@storybook/client-logger": 8.0.8 - "@storybook/global": ^5.0.0 - memoizerific: ^1.11.3 +"@storybook/theming@npm:^8.2.6": + version: 8.2.6 + resolution: "@storybook/theming@npm:8.2.6" peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true - checksum: 48a5015b37a423f061ca9baf0348607159b5e875fa65c8c20c3ccf64f5e79c42139462d0d29c9c7e45bc2c44c006ab6ea4a03a218c87ac482054650efc41ea98 - languageName: node - linkType: hard - -"@storybook/types@npm:8.0.8": - version: 8.0.8 - resolution: "@storybook/types@npm:8.0.8" - dependencies: - "@storybook/channels": 8.0.8 - "@types/express": ^4.7.0 - file-system-cache: 2.3.0 - checksum: bdffe967f692feda4dfed0d682059b8bb7c9276d3627366b26a1c07fafe41f171ff3317c40c2fde655170f99a6a26983a5b49f8c31cdd3791d699301e2cd2db0 + storybook: ^8.2.6 + checksum: 1937e147862782b6464f8eb8b8a9747ba36c6e2d587200bd3cffc55f1dc88211544d9d5cf2add344d0c0f3ffbae4c8ad575eb4a2d8d9298cf3e086940e9aa508 languageName: node linkType: hard @@ -10180,6 +10099,129 @@ __metadata: languageName: node linkType: hard +"@swc/core-darwin-arm64@npm:1.7.2": + version: 1.7.2 + resolution: "@swc/core-darwin-arm64@npm:1.7.2" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@swc/core-darwin-x64@npm:1.7.2": + version: 1.7.2 + resolution: "@swc/core-darwin-x64@npm:1.7.2" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@swc/core-linux-arm-gnueabihf@npm:1.7.2": + version: 1.7.2 + resolution: "@swc/core-linux-arm-gnueabihf@npm:1.7.2" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + +"@swc/core-linux-arm64-gnu@npm:1.7.2": + version: 1.7.2 + resolution: "@swc/core-linux-arm64-gnu@npm:1.7.2" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@swc/core-linux-arm64-musl@npm:1.7.2": + version: 1.7.2 + resolution: "@swc/core-linux-arm64-musl@npm:1.7.2" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@swc/core-linux-x64-gnu@npm:1.7.2": + version: 1.7.2 + resolution: "@swc/core-linux-x64-gnu@npm:1.7.2" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@swc/core-linux-x64-musl@npm:1.7.2": + version: 1.7.2 + resolution: "@swc/core-linux-x64-musl@npm:1.7.2" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@swc/core-win32-arm64-msvc@npm:1.7.2": + version: 1.7.2 + resolution: "@swc/core-win32-arm64-msvc@npm:1.7.2" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + +"@swc/core-win32-ia32-msvc@npm:1.7.2": + version: 1.7.2 + resolution: "@swc/core-win32-ia32-msvc@npm:1.7.2" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + +"@swc/core-win32-x64-msvc@npm:1.7.2": + version: 1.7.2 + resolution: "@swc/core-win32-x64-msvc@npm:1.7.2" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + +"@swc/core@npm:^1.5.22": + version: 1.7.2 + resolution: "@swc/core@npm:1.7.2" + dependencies: + "@swc/core-darwin-arm64": 1.7.2 + "@swc/core-darwin-x64": 1.7.2 + "@swc/core-linux-arm-gnueabihf": 1.7.2 + "@swc/core-linux-arm64-gnu": 1.7.2 + "@swc/core-linux-arm64-musl": 1.7.2 + "@swc/core-linux-x64-gnu": 1.7.2 + "@swc/core-linux-x64-musl": 1.7.2 + "@swc/core-win32-arm64-msvc": 1.7.2 + "@swc/core-win32-ia32-msvc": 1.7.2 + "@swc/core-win32-x64-msvc": 1.7.2 + "@swc/counter": ^0.1.3 + "@swc/types": ^0.1.12 + peerDependencies: + "@swc/helpers": "*" + dependenciesMeta: + "@swc/core-darwin-arm64": + optional: true + "@swc/core-darwin-x64": + optional: true + "@swc/core-linux-arm-gnueabihf": + optional: true + "@swc/core-linux-arm64-gnu": + optional: true + "@swc/core-linux-arm64-musl": + optional: true + "@swc/core-linux-x64-gnu": + optional: true + "@swc/core-linux-x64-musl": + optional: true + "@swc/core-win32-arm64-msvc": + optional: true + "@swc/core-win32-ia32-msvc": + optional: true + "@swc/core-win32-x64-msvc": + optional: true + peerDependenciesMeta: + "@swc/helpers": + optional: true + checksum: 251da1c8e7d54dc8b1783ad88667dc519cdc33baa92d2f5470ca0cb0e02ec6f132bb3d513c6a99826c41443ff0ee097428f2bef64cc8c05d14b796537acaea75 + languageName: node + linkType: hard + +"@swc/counter@npm:^0.1.3": + version: 0.1.3 + resolution: "@swc/counter@npm:0.1.3" + checksum: df8f9cfba9904d3d60f511664c70d23bb323b3a0803ec9890f60133954173047ba9bdeabce28cd70ba89ccd3fd6c71c7b0bd58be85f611e1ffbe5d5c18616598 + languageName: node + linkType: hard + "@swc/helpers@npm:^0.4.14": version: 0.4.14 resolution: "@swc/helpers@npm:0.4.14" @@ -10198,6 +10240,28 @@ __metadata: languageName: node linkType: hard +"@swc/jest@npm:^0.2.23": + version: 0.2.36 + resolution: "@swc/jest@npm:0.2.36" + dependencies: + "@jest/create-cache-key-function": ^29.7.0 + "@swc/counter": ^0.1.3 + jsonc-parser: ^3.2.0 + peerDependencies: + "@swc/core": "*" + checksum: 14f2e696ac093e23dae1e2e57d894bbcde4de6fe80341a26c8d0d8cbae5aae31832f8fa32dc698529f128d19a76aeedf2227f59480de6dab5eb3f30bfdf9b71a + languageName: node + linkType: hard + +"@swc/types@npm:^0.1.12": + version: 0.1.12 + resolution: "@swc/types@npm:0.1.12" + dependencies: + "@swc/counter": ^0.1.3 + checksum: cf7f89e46f859864075d7965582baea9c5f98830f45b1046251568c9bdf1ca484b1bf37f6d3c32b7c82ecf8cd5df89d22f05268c391819c44e49911bb1a8e71a + languageName: node + linkType: hard + "@szmarczak/http-timer@npm:^4.0.5": version: 4.0.6 resolution: "@szmarczak/http-timer@npm:4.0.6" @@ -10567,6 +10631,15 @@ __metadata: languageName: node linkType: hard +"@types/debug@npm:^4.0.0": + version: 4.1.12 + resolution: "@types/debug@npm:4.1.12" + dependencies: + "@types/ms": "*" + checksum: 47876a852de8240bfdaf7481357af2b88cb660d30c72e73789abf00c499d6bc7cd5e52f41c915d1b9cd8ec9fef5b05688d7b7aef17f7f272c2d04679508d1053 + languageName: node + linkType: hard + "@types/deep-diff@npm:^1.0.0": version: 1.0.0 resolution: "@types/deep-diff@npm:1.0.0" @@ -10574,20 +10647,6 @@ __metadata: languageName: node linkType: hard -"@types/detect-port@npm:^1.3.0": - version: 1.3.3 - resolution: "@types/detect-port@npm:1.3.3" - checksum: 0dadb520286a5cfd2832d12189dc795cc3589dfd9166d1b033453fb94b0212c4067a847045833e85b0f7c73135c944cb4ccb49c8e683491845c2e8a3da5d5c1c - languageName: node - linkType: hard - -"@types/doctrine@npm:^0.0.3": - version: 0.0.3 - resolution: "@types/doctrine@npm:0.0.3" - checksum: 7ca9c8ff4d2da437785151c9eef0dd80b8fa12e0ff0fcb988458a78de4b6f0fc92727ba5bbee446e1df615a91f03053c5783b30b7c21ab6ceab6a42557e93e50 - languageName: node - linkType: hard - "@types/doctrine@npm:^0.0.9": version: 0.0.9 resolution: "@types/doctrine@npm:0.0.9" @@ -10616,13 +10675,6 @@ __metadata: languageName: node linkType: hard -"@types/ejs@npm:^3.1.1": - version: 3.1.2 - resolution: "@types/ejs@npm:3.1.2" - checksum: e4f0745b6ed53a63c08bdfdeb019a7d0e0c400896722b44d6732b4ee6bf6061d2dc965206186b8b0ae2ecd71303c29f1af1feddbca2df0acbd7bd234a74ca518 - languageName: node - linkType: hard - "@types/emoji-mart@npm:3.0.4": version: 3.0.4 resolution: "@types/emoji-mart@npm:3.0.4" @@ -10715,15 +10767,15 @@ __metadata: languageName: node linkType: hard -"@types/express@npm:*, @types/express@npm:^4.17.13, @types/express@npm:^4.17.14, @types/express@npm:^4.7.0": - version: 4.17.17 - resolution: "@types/express@npm:4.17.17" +"@types/express@npm:*, @types/express@npm:^4.17.13, @types/express@npm:^4.17.14, @types/express@npm:^4.17.21": + version: 4.17.21 + resolution: "@types/express@npm:4.17.21" dependencies: "@types/body-parser": "*" "@types/express-serve-static-core": ^4.17.33 "@types/qs": "*" "@types/serve-static": "*" - checksum: 0196dacc275ac3ce89d7364885cb08e7fb61f53ca101f65886dbf1daf9b7eb05c0943e2e4bbd01b0cc5e50f37e0eea7e4cbe97d0304094411ac73e1b7998f4da + checksum: fb238298630370a7392c7abdc80f495ae6c716723e114705d7e3fb67e3850b3859bbfd29391463a3fb8c0b32051847935933d99e719c0478710f8098ee7091c5 languageName: node linkType: hard @@ -11010,6 +11062,15 @@ __metadata: languageName: node linkType: hard +"@types/mdast@npm:^3.0.0": + version: 3.0.15 + resolution: "@types/mdast@npm:3.0.15" + dependencies: + "@types/unist": ^2 + checksum: af85042a4e3af3f879bde4059fa9e76c71cb552dffc896cdcc6cf9dc1fd38e37035c2dbd6245cfa6535b433f1f0478f5549696234ccace47a64055a10c656530 + languageName: node + linkType: hard + "@types/mdx@npm:^2.0.0": version: 2.0.5 resolution: "@types/mdx@npm:2.0.5" @@ -11040,6 +11101,13 @@ __metadata: languageName: node linkType: hard +"@types/ms@npm:*": + version: 0.7.34 + resolution: "@types/ms@npm:0.7.34" + checksum: f38d36e7b6edecd9badc9cf50474159e9da5fa6965a75186cceaf883278611b9df6669dc3a3cc122b7938d317b68a9e3d573d316fcb35d1be47ec9e468c6bd8a + languageName: node + linkType: hard + "@types/nanoid@npm:^2.0.0": version: 2.1.0 resolution: "@types/nanoid@npm:2.1.0" @@ -11132,13 +11200,6 @@ __metadata: languageName: node linkType: hard -"@types/pretty-hrtime@npm:^1.0.0": - version: 1.0.1 - resolution: "@types/pretty-hrtime@npm:1.0.1" - checksum: a6cdee417eea6f7af914e4fcd13e05822864ce10b5d7646525632e86d69b79123eec55a5d3fff0155ba46b61902775e1644bcb80e1e4dffdac28e7febb089083 - languageName: node - linkType: hard - "@types/prismjs@npm:^1.16.1": version: 1.16.1 resolution: "@types/prismjs@npm:1.16.1" @@ -11160,7 +11221,7 @@ __metadata: languageName: node linkType: hard -"@types/qs@npm:*, @types/qs@npm:^6.9.5": +"@types/qs@npm:*": version: 6.9.7 resolution: "@types/qs@npm:6.9.7" checksum: 7fd6f9c25053e9b5bb6bc9f9f76c1d89e6c04f7707a7ba0e44cc01f17ef5284adb82f230f542c2d5557d69407c9a40f0f3515e8319afd14e1e16b5543ac6cdba @@ -11192,6 +11253,18 @@ __metadata: languageName: node linkType: hard +"@types/react-datepicker@npm:^4.10.0": + version: 4.19.6 + resolution: "@types/react-datepicker@npm:4.19.6" + dependencies: + "@popperjs/core": ^2.9.2 + "@types/react": "*" + date-fns: ^2.0.1 + react-popper: ^2.2.5 + checksum: ee9f21bd7012c03abbcc3e6cda72aec69f4a96955d80938a8c8b23b1867bb515588ea17121d99835a9bd444774dd467f8e29e3ae36591d45e26c8ec536ba103a + languageName: node + linkType: hard + "@types/react-dom@npm:*": version: 18.2.6 resolution: "@types/react-dom@npm:18.2.6" @@ -11637,6 +11710,13 @@ __metadata: languageName: node linkType: hard +"@types/unist@npm:^2, @types/unist@npm:^2.0.0": + version: 2.0.10 + resolution: "@types/unist@npm:2.0.10" + checksum: e2924e18dedf45f68a5c6ccd6015cd62f1643b1b43baac1854efa21ae9e70505db94290434a23da1137d9e31eb58e54ca175982005698ac37300a1c889f6c4aa + languageName: node + linkType: hard + "@types/uuid@npm:^9.0.5": version: 9.0.8 resolution: "@types/uuid@npm:9.0.8" @@ -11644,6 +11724,15 @@ __metadata: languageName: node linkType: hard +"@types/wait-on@npm:^5.2.0": + version: 5.3.4 + resolution: "@types/wait-on@npm:5.3.4" + dependencies: + "@types/node": "*" + checksum: 2711a9ef4af3995efd442acb806d3bba0a03ef3a7eb07b1734ddd8a42b6682414f6b57ed7536fb6a5df6c6449ca24c3d42924a9d896ae3eb1065b2abbe988a18 + languageName: node + linkType: hard + "@types/web@npm:^0.0.99": version: 0.0.99 resolution: "@types/web@npm:0.0.99" @@ -12571,17 +12660,6 @@ __metadata: languageName: node linkType: hard -"@yarnpkg/esbuild-plugin-pnp@npm:^3.0.0-rc.10": - version: 3.0.0-rc.15 - resolution: "@yarnpkg/esbuild-plugin-pnp@npm:3.0.0-rc.15" - dependencies: - tslib: ^2.4.0 - peerDependencies: - esbuild: ">=0.10.0" - checksum: 04da15355a99773b441742814ba4d0f3453a83df47aa07e215f167e156f109ab8e971489c8b1a4ddf3c79d568d35213f496ad52e97298228597e1aacc22680aa - languageName: node - linkType: hard - "@yarnpkg/fslib@npm:2.10.3": version: 2.10.3 resolution: "@yarnpkg/fslib@npm:2.10.3" @@ -12943,6 +13021,13 @@ __metadata: languageName: node linkType: hard +"ansi-escapes@npm:^6.0.0": + version: 6.2.1 + resolution: "ansi-escapes@npm:6.2.1" + checksum: 4bdbabe0782a1d4007157798f8acab745d1d5e440c872e6792880d08025e0baababa6b85b36846e955fde7d1e4bf572cdb1fddf109de196e9388d7a1c55ce30d + languageName: node + linkType: hard + "ansi-html-community@npm:^0.0.8": version: 0.0.8 resolution: "ansi-html-community@npm:0.0.8" @@ -13045,10 +13130,12 @@ __metadata: languageName: node linkType: hard -"app-root-dir@npm:^1.0.2": - version: 1.0.2 - resolution: "app-root-dir@npm:1.0.2" - checksum: d4b1653fc60b6465b982bf5a88b12051ed2d807d70609386a809306e1c636496f53522d61fa30f9f98c71aaae34f34e1651889cf17d81a44e3dafd2859d495ad +"append-transform@npm:^2.0.0": + version: 2.0.0 + resolution: "append-transform@npm:2.0.0" + dependencies: + default-require-extensions: ^3.0.0 + checksum: f26f393bf7a428fd1bb18f2758a819830a582243310c5170edb3f98fdc5a535333d02b952f7c2d9b14522bd8ead5b132a0b15000eca18fa9f49172963ebbc231 languageName: node linkType: hard @@ -13248,8 +13335,8 @@ __metadata: d3-geo: ^3.1.0 dayjs: ^1.10.6 deep-diff: ^1.0.2 - design-system: "npm:@appsmithorg/design-system@2.1.43" - design-system-old: "npm:@appsmithorg/design-system-old@1.1.17" + design-system: "workspace:^" + design-system-old: "workspace:^" diff: ^5.0.0 dotenv: ^8.1.0 downloadjs: ^1.4.7 @@ -13444,6 +13531,13 @@ __metadata: languageName: node linkType: hard +"archy@npm:^1.0.0": + version: 1.0.0 + resolution: "archy@npm:1.0.0" + checksum: 504ae7af655130bab9f471343cfdb054feaec7d8e300e13348bc9fe9e660f83d422e473069584f73233c701ae37d1c8452ff2522f2a20c38849e0f406f1732ac + languageName: node + linkType: hard + "are-we-there-yet@npm:^3.0.0": version: 3.0.1 resolution: "are-we-there-yet@npm:3.0.1" @@ -13721,19 +13815,6 @@ __metadata: languageName: node linkType: hard -"assert@npm:^2.1.0": - version: 2.1.0 - resolution: "assert@npm:2.1.0" - dependencies: - call-bind: ^1.0.2 - is-nan: ^1.3.2 - object-is: ^1.1.5 - object.assign: ^4.1.4 - util: ^0.12.5 - checksum: 1ed1cabba9abe55f4109b3f7292b4e4f3cf2953aad8dc148c0b3c3bd676675c31b1abb32ef563b7d5a19d1715bf90d1e5f09fad2a4ee655199468902da80f7c2 - languageName: node - linkType: hard - "ast-types-flow@npm:^0.0.7": version: 0.0.7 resolution: "ast-types-flow@npm:0.0.7" @@ -13867,21 +13948,30 @@ __metadata: languageName: node linkType: hard -"axe-core@npm:^4.2.0, axe-core@npm:^4.3.5": - version: 4.7.2 - resolution: "axe-core@npm:4.7.2" - checksum: 5d86fa0f45213b0e54cbb5d713ce885c4a8fe3a72b92dd915a47aa396d6fd149c4a87fec53aa978511f6d941402256cfeb26f2db35129e370f25a453c688655a +"axe-core@npm:^4.2.0, axe-core@npm:^4.3.5, axe-core@npm:^4.7.2": + version: 4.9.1 + resolution: "axe-core@npm:4.9.1" + checksum: 41d9227871781f96c2952e2a777fca73624959dd0e98864f6d82806a77602f82b4fc490852082a7e524d8cd864e50d8b4d9931819b4a150112981d8c932110c5 + languageName: node + linkType: hard + +"axios@npm:^0.21.1": + version: 0.21.4 + resolution: "axios@npm:0.21.4" + dependencies: + follow-redirects: ^1.14.0 + checksum: 44245f24ac971e7458f3120c92f9d66d1fc695e8b97019139de5b0cc65d9b8104647db01e5f46917728edfc0cfd88eb30fc4c55e6053eef4ace76768ce95ff3c languageName: node linkType: hard -"axios@npm:^1.6.0": - version: 1.6.1 - resolution: "axios@npm:1.6.1" +"axios@npm:^1.6.0, axios@npm:^1.6.1": + version: 1.7.2 + resolution: "axios@npm:1.7.2" dependencies: - follow-redirects: ^1.15.0 + follow-redirects: ^1.15.6 form-data: ^4.0.0 proxy-from-env: ^1.1.0 - checksum: 573f03f59b7487d54551b16f5e155d1d130ad4864ed32d1da93d522b78a57123b34e3bde37f822a65ee297e79f1db840f9ad6514addff50d3cbf5caeed39e8dc + checksum: e457e2b0ab748504621f6fa6609074ac08c824bf0881592209dfa15098ece7e88495300e02cd22ba50b3468fd712fe687e629dcb03d6a3f6a51989727405aedf languageName: node linkType: hard @@ -13919,20 +14009,20 @@ __metadata: languageName: node linkType: hard -"babel-jest@npm:^29.5.0": - version: 29.5.0 - resolution: "babel-jest@npm:29.5.0" +"babel-jest@npm:^29.7.0": + version: 29.7.0 + resolution: "babel-jest@npm:29.7.0" dependencies: - "@jest/transform": ^29.5.0 + "@jest/transform": ^29.7.0 "@types/babel__core": ^7.1.14 babel-plugin-istanbul: ^6.1.1 - babel-preset-jest: ^29.5.0 + babel-preset-jest: ^29.6.3 chalk: ^4.0.0 graceful-fs: ^4.2.9 slash: ^3.0.0 peerDependencies: "@babel/core": ^7.8.0 - checksum: eafb6d37deb71f0c80bf3c80215aa46732153e5e8bcd73f6ff47d92e5c0c98c8f7f75995d0efec6289c371edad3693cd8fa2367b0661c4deb71a3a7117267ede + checksum: ee6f8e0495afee07cac5e4ee167be705c711a8cc8a737e05a587a131fdae2b3c8f9aa55dfd4d9c03009ac2d27f2de63d8ba96d3e8460da4d00e8af19ef9a83f7 languageName: node linkType: hard @@ -14014,15 +14104,15 @@ __metadata: languageName: node linkType: hard -"babel-plugin-jest-hoist@npm:^29.5.0": - version: 29.5.0 - resolution: "babel-plugin-jest-hoist@npm:29.5.0" +"babel-plugin-jest-hoist@npm:^29.6.3": + version: 29.6.3 + resolution: "babel-plugin-jest-hoist@npm:29.6.3" dependencies: "@babel/template": ^7.3.3 "@babel/types": ^7.3.3 "@types/babel__core": ^7.1.14 "@types/babel__traverse": ^7.0.6 - checksum: 099b5254073b6bc985b6d2d045ad26fb8ed30ff8ae6404c4fe8ee7cd0e98a820f69e3dfb871c7c65aae0f4b65af77046244c07bb92d49ef9005c90eedf681539 + checksum: 51250f22815a7318f17214a9d44650ba89551e6d4f47a2dc259128428324b52f5a73979d010cefd921fd5a720d8c1d55ad74ff601cd94c7bd44d5f6292fde2d1 languageName: node linkType: hard @@ -14096,16 +14186,28 @@ __metadata: languageName: node linkType: hard -"babel-plugin-polyfill-corejs2@npm:^0.4.8": - version: 0.4.8 - resolution: "babel-plugin-polyfill-corejs2@npm:0.4.8" +"babel-plugin-polyfill-corejs2@npm:^0.4.10": + version: 0.4.11 + resolution: "babel-plugin-polyfill-corejs2@npm:0.4.11" dependencies: "@babel/compat-data": ^7.22.6 - "@babel/helper-define-polyfill-provider": ^0.5.0 + "@babel/helper-define-polyfill-provider": ^0.6.2 semver: ^6.3.1 peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 22857b87268b354e095452199464accba5fd8f690558a2f24b0954807ca2494b96da8d5c13507955802427582015160bce26a66893acf6da5dafbed8b336cf79 + checksum: f098353ce7c7dde1a1d2710858e01b471e85689110c9e37813e009072347eb8c55d5f84d20d3bf1cab31755f20078ba90f8855fdc4686a9daa826a95ff280bd7 + languageName: node + linkType: hard + +"babel-plugin-polyfill-corejs3@npm:^0.10.4": + version: 0.10.4 + resolution: "babel-plugin-polyfill-corejs3@npm:0.10.4" + dependencies: + "@babel/helper-define-polyfill-provider": ^0.6.1 + core-js-compat: ^3.36.1 + peerDependencies: + "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 + checksum: b96a54495f7cc8b3797251c8c15f5ed015edddc3110fc122f6b32c94bec33af1e8bc56fa99091808f500bde0cccaaa266889cdc5935d9e6e9cf09898214f02dd languageName: node linkType: hard @@ -14121,18 +14223,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-polyfill-corejs3@npm:^0.9.0": - version: 0.9.0 - resolution: "babel-plugin-polyfill-corejs3@npm:0.9.0" - dependencies: - "@babel/helper-define-polyfill-provider": ^0.5.0 - core-js-compat: ^3.34.0 - peerDependencies: - "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 65bbf59fc0145c7a264822777403632008dce00015b4b5c7ec359125ef4faf9e8f494ae5123d2992104feb6f19a3cff85631992862e48b6d7bd64eb7e755ee1f - languageName: node - linkType: hard - "babel-plugin-polyfill-regenerator@npm:^0.4.1": version: 0.4.1 resolution: "babel-plugin-polyfill-regenerator@npm:0.4.1" @@ -14144,14 +14234,14 @@ __metadata: languageName: node linkType: hard -"babel-plugin-polyfill-regenerator@npm:^0.5.5": - version: 0.5.5 - resolution: "babel-plugin-polyfill-regenerator@npm:0.5.5" +"babel-plugin-polyfill-regenerator@npm:^0.6.1": + version: 0.6.2 + resolution: "babel-plugin-polyfill-regenerator@npm:0.6.2" dependencies: - "@babel/helper-define-polyfill-provider": ^0.5.0 + "@babel/helper-define-polyfill-provider": ^0.6.2 peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 3a9b4828673b23cd648dcfb571eadcd9d3fadfca0361d0a7c6feeb5a30474e92faaa49f067a6e1c05e49b6a09812879992028ff3ef3446229ff132d6e1de7eb6 + checksum: 150233571072b6b3dfe946242da39cba8587b7f908d1c006f7545fc88b0e3c3018d445739beb61e7a75835f0c2751dbe884a94ff9b245ec42369d9267e0e1b3f languageName: node linkType: hard @@ -14218,15 +14308,15 @@ __metadata: languageName: node linkType: hard -"babel-preset-jest@npm:^29.5.0": - version: 29.5.0 - resolution: "babel-preset-jest@npm:29.5.0" +"babel-preset-jest@npm:^29.6.3": + version: 29.6.3 + resolution: "babel-preset-jest@npm:29.6.3" dependencies: - babel-plugin-jest-hoist: ^29.5.0 + babel-plugin-jest-hoist: ^29.6.3 babel-preset-current-node-syntax: ^1.0.0 peerDependencies: "@babel/core": ^7.0.0 - checksum: 5566ca2762766c9319b4973d018d2fa08c0fcf6415c72cc54f4c8e7199e851ea8f5e6c6730f03ed7ed44fc8beefa959dd15911f2647dee47c615ff4faeddb1ad + checksum: aa4ff2a8a728d9d698ed521e3461a109a1e66202b13d3494e41eea30729a5e7cc03b3a2d56c594423a135429c37bf63a9fa8b0b9ce275298be3095a88c69f6fb languageName: node linkType: hard @@ -14263,6 +14353,13 @@ __metadata: languageName: node linkType: hard +"bail@npm:^2.0.0": + version: 2.0.2 + resolution: "bail@npm:2.0.2" + checksum: aab4e8ccdc8d762bf3fdfce8e706601695620c0c2eda256dd85088dc0be3cfd7ff126f6e99c2bee1f24f5d418414aacf09d7f9702f16d6963df2fa488cda8824 + languageName: node + linkType: hard + "balanced-match@npm:^1.0.0": version: 1.0.2 resolution: "balanced-match@npm:1.0.2" @@ -14321,15 +14418,6 @@ __metadata: languageName: node linkType: hard -"better-opn@npm:^3.0.2": - version: 3.0.2 - resolution: "better-opn@npm:3.0.2" - dependencies: - open: ^8.0.4 - checksum: 1471552fa7f733561e7f49e812be074b421153006ca744de985fb6d38939807959fc5fe9cb819cf09f864782e294704fd3b31711ea14c115baf3330a2f1135de - languageName: node - linkType: hard - "bfj@npm:^6.1.1": version: 6.1.2 resolution: "bfj@npm:6.1.2" @@ -14375,7 +14463,7 @@ __metadata: languageName: node linkType: hard -"bl@npm:^4.0.3, bl@npm:^4.1.0": +"bl@npm:^4.1.0": version: 4.1.0 resolution: "bl@npm:4.1.0" dependencies: @@ -14638,15 +14726,6 @@ __metadata: languageName: node linkType: hard -"browserify-zlib@npm:^0.1.4": - version: 0.1.4 - resolution: "browserify-zlib@npm:0.1.4" - dependencies: - pako: ~0.2.0 - checksum: abee4cb4349e8a21391fd874564f41b113fe691372913980e6fa06a777e4ea2aad4e942af14ab99bce190d5ac8f5328201432f4ef0eae48c6d02208bc212976f - languageName: node - linkType: hard - "browserify-zlib@npm:~0.2.0": version: 0.2.0 resolution: "browserify-zlib@npm:0.2.0" @@ -14972,6 +15051,18 @@ __metadata: languageName: node linkType: hard +"caching-transform@npm:^4.0.0": + version: 4.0.0 + resolution: "caching-transform@npm:4.0.0" + dependencies: + hasha: ^5.0.0 + make-dir: ^3.0.0 + package-hash: ^4.0.0 + write-file-atomic: ^3.0.0 + checksum: c4db6939533b677866808de67c32f0aaf8bf4fd3e3b8dc957e5d630c007c06b7f11512d44c38a38287fb068e931067e8da9019c34d787259a44121c9a6b87a1f + languageName: node + linkType: hard + "call-bind@npm:^1.0.0, call-bind@npm:^1.0.2": version: 1.0.2 resolution: "call-bind@npm:1.0.2" @@ -15078,7 +15169,14 @@ __metadata: languageName: node linkType: hard -"chalk@npm:5.3.0, chalk@npm:^5.0.0, chalk@npm:^5.0.1": +"ccount@npm:^2.0.0": + version: 2.0.1 + resolution: "ccount@npm:2.0.1" + checksum: 48193dada54c9e260e0acf57fc16171a225305548f9ad20d5471e0f7a8c026aedd8747091dccb0d900cde7df4e4ddbd235df0d8de4a64c71b12f0d3303eeafd4 + languageName: node + linkType: hard + +"chalk@npm:5.3.0, chalk@npm:^5.0.0, chalk@npm:^5.0.1, chalk@npm:^5.2.0": version: 5.3.0 resolution: "chalk@npm:5.3.0" checksum: 623922e077b7d1e9dedaea6f8b9e9352921f8ae3afe739132e0e00c275971bdd331268183b2628cf4ab1727c45ea1f28d7e24ac23ce1db1eb653c414ca8a5a80 @@ -15177,6 +15275,13 @@ __metadata: languageName: node linkType: hard +"character-entities@npm:^2.0.0": + version: 2.0.2 + resolution: "character-entities@npm:2.0.2" + checksum: cf1643814023697f725e47328fcec17923b8f1799102a8a79c1514e894815651794a2bffd84bb1b3a4b124b050154e4529ed6e81f7c8068a734aecf07a6d3def + languageName: node + linkType: hard + "character-reference-invalid@npm:^1.0.0": version: 1.1.4 resolution: "character-reference-invalid@npm:1.1.4" @@ -15231,13 +15336,6 @@ __metadata: languageName: node linkType: hard -"chownr@npm:^1.1.1": - version: 1.1.4 - resolution: "chownr@npm:1.1.4" - checksum: 115648f8eb38bac5e41c3857f3e663f9c39ed6480d1349977c4d96c95a47266fcacc5a5aabf3cb6c481e22d72f41992827db47301851766c4fd77ac21a4f081d - languageName: node - linkType: hard - "chownr@npm:^2.0.0": version: 2.0.0 resolution: "chownr@npm:2.0.0" @@ -15245,9 +15343,9 @@ __metadata: languageName: node linkType: hard -"chromatic@npm:^11.3.0": - version: 11.3.0 - resolution: "chromatic@npm:11.3.0" +"chromatic@npm:^11.3.0, chromatic@npm:^11.4.0": + version: 11.5.6 + resolution: "chromatic@npm:11.5.6" peerDependencies: "@chromatic-com/cypress": ^0.*.* || ^1.0.0 "@chromatic-com/playwright": ^0.*.* || ^1.0.0 @@ -15260,7 +15358,7 @@ __metadata: chroma: dist/bin.js chromatic: dist/bin.js chromatic-cli: dist/bin.js - checksum: 267bf4f4b5b548e065f770e6909229e67089f560233f04f8be3dc176583bd640a4637ad8f6f7e796b86b37af2a512b14b5e16ec7c0f6d07abf529ece740c62db + checksum: 968ff879301f963e25bed6f7be1f796dee90b06bbc1824004c97aa83dd83a959d39c4639e04e6cd947e5d4bcf0ab09d5908d0960dfb7b5f9483541f222a787ab languageName: node linkType: hard @@ -15371,7 +15469,7 @@ __metadata: languageName: node linkType: hard -"cli-table3@npm:^0.6.1, cli-table3@npm:~0.6.1": +"cli-table3@npm:~0.6.1": version: 0.6.3 resolution: "cli-table3@npm:0.6.3" dependencies: @@ -15705,6 +15803,13 @@ __metadata: languageName: node linkType: hard +"commander@npm:^3.0.2": + version: 3.0.2 + resolution: "commander@npm:3.0.2" + checksum: 6d14ad030d1904428139487ed31febcb04c1604db2b8d9fae711f60ee6718828dc0e11602249e91c8a97b0e721e9c6d53edbc166bad3cde1596851d59a8f824d + languageName: node + linkType: hard + "commander@npm:^4.0.0": version: 4.1.1 resolution: "commander@npm:4.1.1" @@ -15712,6 +15817,13 @@ __metadata: languageName: node linkType: hard +"commander@npm:^5.1.0": + version: 5.1.0 + resolution: "commander@npm:5.1.0" + checksum: 0b7fec1712fbcc6230fcb161d8d73b4730fa91a21dc089515489402ad78810547683f058e2a9835929c212fead1d6a6ade70db28bbb03edbc2829a9ab7d69447 + languageName: node + linkType: hard + "commander@npm:^6.2.1": version: 6.2.1 resolution: "commander@npm:6.2.1" @@ -15843,6 +15955,26 @@ __metadata: languageName: node linkType: hard +"concurrently@npm:^8.2.0": + version: 8.2.2 + resolution: "concurrently@npm:8.2.2" + dependencies: + chalk: ^4.1.2 + date-fns: ^2.30.0 + lodash: ^4.17.21 + rxjs: ^7.8.1 + shell-quote: ^1.8.1 + spawn-command: 0.0.2 + supports-color: ^8.1.1 + tree-kill: ^1.2.2 + yargs: ^17.7.2 + bin: + conc: dist/bin/concurrently.js + concurrently: dist/bin/concurrently.js + checksum: 8ac774df06869773438f1bf91025180c52d5b53139bc86cf47659136c0d97461d0579c515d848d1e945d4e3e0cafe646b2ea18af8d74259b46abddcfe39b2c6c + languageName: node + linkType: hard + "config-chain@npm:^1.1.12": version: 1.1.13 resolution: "config-chain@npm:1.1.13" @@ -16008,12 +16140,12 @@ __metadata: languageName: node linkType: hard -"core-js-compat@npm:^3.25.1, core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.34.0": - version: 3.35.1 - resolution: "core-js-compat@npm:3.35.1" +"core-js-compat@npm:^3.25.1, core-js-compat@npm:^3.36.1, core-js-compat@npm:^3.37.1": + version: 3.37.1 + resolution: "core-js-compat@npm:3.37.1" dependencies: - browserslist: ^4.22.2 - checksum: 4c1a7076d31fa489eec5c46eb11c7127703f9756b5fed1eab9bf27b7f0f151247886d3fa488911078bd2801a5dfa12a9ea2ecb7a4e61dfa460b2c291805f503b + browserslist: ^4.23.0 + checksum: 5e7430329358bced08c30950512d2081aea0a5652b4c5892cbb3c4a6db05b0d3893a191a955162a07fdb5f4fe74e61b6429fdb503f54e062336d76e43c9555d9 languageName: node linkType: hard @@ -16184,6 +16316,23 @@ __metadata: languageName: node linkType: hard +"create-jest@npm:^29.7.0": + version: 29.7.0 + resolution: "create-jest@npm:29.7.0" + dependencies: + "@jest/types": ^29.6.3 + chalk: ^4.0.0 + exit: ^0.1.2 + graceful-fs: ^4.2.9 + jest-config: ^29.7.0 + jest-util: ^29.7.0 + prompts: ^2.0.1 + bin: + create-jest: bin/create-jest.js + checksum: 1427d49458adcd88547ef6fa39041e1fe9033a661293aa8d2c3aa1b4967cb5bf4f0c00436c7a61816558f28ba2ba81a94d5c962e8022ea9a883978fc8e1f2945 + languageName: node + linkType: hard + "create-require@npm:^1.1.0": version: 1.1.1 resolution: "create-require@npm:1.1.1" @@ -16257,6 +16406,15 @@ __metadata: languageName: node linkType: hard +"crypto-random-string@npm:^4.0.0": + version: 4.0.0 + resolution: "crypto-random-string@npm:4.0.0" + dependencies: + type-fest: ^1.0.1 + checksum: 91f148f27bcc8582798f0fb3e75a09d9174557f39c3c40a89dd1bd70fb5a14a02548245aa26fa7d663c426ac5026f4729841231c84f9e30e8c8ece5e38656741 + languageName: node + linkType: hard + "css-blank-pseudo@npm:^3.0.3": version: 3.0.3 resolution: "css-blank-pseudo@npm:3.0.3" @@ -16692,6 +16850,16 @@ __metadata: languageName: node linkType: hard +"cwd@npm:^0.10.0": + version: 0.10.0 + resolution: "cwd@npm:0.10.0" + dependencies: + find-pkg: ^0.1.2 + fs-exists-sync: ^0.1.0 + checksum: 55ab180af86306fe7268c63dd87a737a12e1cb5146be6bcd7fe298df5f5c594cad85907a47fee02cee322d7dc98197a2b45e4d7ebfb0b2c93892bde7d787fe56 + languageName: node + linkType: hard + "cy-verify-downloads@npm:^0.0.5": version: 0.0.5 resolution: "cy-verify-downloads@npm:0.0.5" @@ -16933,7 +17101,7 @@ __metadata: languageName: node linkType: hard -"date-fns@npm:^2.24.0, date-fns@npm:^2.29.1, date-fns@npm:^2.29.3": +"date-fns@npm:^2.0.1, date-fns@npm:^2.24.0, date-fns@npm:^2.29.1, date-fns@npm:^2.29.3, date-fns@npm:^2.30.0": version: 2.30.0 resolution: "date-fns@npm:2.30.0" dependencies: @@ -16972,7 +17140,19 @@ __metadata: languageName: node linkType: hard -"debug@npm:4, debug@npm:4.3.4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.0, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:~4.3.1, debug@npm:~4.3.2": +"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.0, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:~4.3.1, debug@npm:~4.3.2": + version: 4.3.5 + resolution: "debug@npm:4.3.5" + dependencies: + ms: 2.1.2 + peerDependenciesMeta: + supports-color: + optional: true + checksum: 7c002b51e256257f936dda09eb37167df952758c57badf6bf44bdc40b89a4bcb8e5a0a2e4c7b53f97c69e2970dd5272d33a757378a12c8f8e64ea7bf99e8e86e + languageName: node + linkType: hard + +"debug@npm:4.3.4": version: 4.3.4 resolution: "debug@npm:4.3.4" dependencies: @@ -17007,6 +17187,15 @@ __metadata: languageName: node linkType: hard +"decode-named-character-reference@npm:^1.0.0": + version: 1.0.2 + resolution: "decode-named-character-reference@npm:1.0.2" + dependencies: + character-entities: ^2.0.0 + checksum: f4c71d3b93105f20076052f9cb1523a22a9c796b8296cd35eef1ca54239c78d182c136a848b83ff8da2071e3ae2b1d300bf29d00650a6d6e675438cc31b11d78 + languageName: node + linkType: hard + "decode-uri-component@npm:^0.2.0": version: 0.2.2 resolution: "decode-uri-component@npm:0.2.2" @@ -17030,6 +17219,18 @@ __metadata: languageName: node linkType: hard +"dedent@npm:^1.0.0": + version: 1.5.3 + resolution: "dedent@npm:1.5.3" + peerDependencies: + babel-plugin-macros: ^3.1.0 + peerDependenciesMeta: + babel-plugin-macros: + optional: true + checksum: 045b595557b2a8ea2eb9b0b4623d764e9a87326486fe2b61191b4342ed93dc01245644d8a09f3108a50c0ee7965f1eedd92e4a3a503ed89ea8e810566ea27f9a + languageName: node + linkType: hard + "deep-diff@npm:^1.0.2": version: 1.0.2 resolution: "deep-diff@npm:1.0.2" @@ -17098,7 +17299,7 @@ __metadata: languageName: node linkType: hard -"default-browser-id@npm:3.0.0, default-browser-id@npm:^3.0.0": +"default-browser-id@npm:^3.0.0": version: 3.0.0 resolution: "default-browser-id@npm:3.0.0" dependencies: @@ -17129,6 +17330,15 @@ __metadata: languageName: node linkType: hard +"default-require-extensions@npm:^3.0.0": + version: 3.0.1 + resolution: "default-require-extensions@npm:3.0.1" + dependencies: + strip-bom: ^4.0.0 + checksum: 45882fc971dd157faf6716ced04c15cf252c0a2d6f5c5844b66ca49f46ed03396a26cd940771aa569927aee22923a961bab789e74b25aabc94d90742c9dd1217 + languageName: node + linkType: hard + "defaults@npm:^1.0.3": version: 1.0.3 resolution: "defaults@npm:1.0.3" @@ -17260,7 +17470,7 @@ __metadata: languageName: node linkType: hard -"dequal@npm:^2.0.2": +"dequal@npm:^2.0.0, dequal@npm:^2.0.2": version: 2.0.3 resolution: "dequal@npm:2.0.3" checksum: 8679b850e1a3d0ebbc46ee780d5df7b478c23f335887464023a631d1b9af051ad4a6595a44220f9ff8ff95a8ddccf019b5ad778a976fd7bbf77383d36f412f90 @@ -17277,35 +17487,24 @@ __metadata: languageName: node linkType: hard -"design-system-old@npm:@appsmithorg/design-system-old@1.1.17": - version: 1.1.17 - resolution: "@appsmithorg/design-system-old@npm:1.1.17" +"design-system-old@workspace:^, design-system-old@workspace:packages/design-system/ads-old": + version: 0.0.0-use.local + resolution: "design-system-old@workspace:packages/design-system/ads-old" dependencies: + "@types/loadable__component": ^5.13.4 + "@types/react-form": ^4.0.2 + "@types/wait-on": ^5.2.0 + concurrently: ^7.3.0 emoji-mart: 3.0.1 - peerDependencies: - "@blueprintjs/core": 3.33.0 - "@blueprintjs/datetime": 3.23.6 - copy-to-clipboard: ^3.3.1 - react: ^17.0.2 - react-dnd: ^9.3.4 - react-dnd-html5-backend: ^9.3.4 - react-dom: ^17.0.2 - react-redux: ^7.2.4 - react-router-dom: ^6.3.0 - react-table: ^7.8.0 - react-tabs: 3.1.1 + identity-obj-proxy: 3.0.0 react-toastify: ^5.5.0 - redux-form: 8.2.6 - remixicon-react: ^1.0.0 - styled-components: 5.3.6 - tinycolor2: ^1.4.2 - checksum: f4e4faf58412912ca95e50ccf8554fa480bdfd8fb4628131f9a35df663207aec35469f340920f4ebe63568f29cc1e01a97c0f223ac753e0d574e099434588f06 - languageName: node - linkType: hard + wait-on: ^5.3.0 + languageName: unknown + linkType: soft -"design-system@npm:@appsmithorg/design-system@2.1.43": - version: 2.1.43 - resolution: "@appsmithorg/design-system@npm:2.1.43" +"design-system@workspace:^, design-system@workspace:packages/design-system/ads": + version: 0.0.0-use.local + resolution: "design-system@workspace:packages/design-system/ads" dependencies: "@radix-ui/react-dialog": ^1.0.2 "@radix-ui/react-dropdown-menu": ^2.0.4 @@ -17321,10 +17520,16 @@ __metadata: "@react-aria/textfield": ^3.8.1 "@react-stately/radio": ^3.6.2 "@react-stately/toggle": ^3.4.4 + "@react-types/button": ^3.7.0 + "@types/loadable__component": ^5.13.4 + "@types/react-datepicker": ^4.10.0 "@xstyled/styled-components": ^3.8.0 + axe-core: ^4.7.2 + concurrently: ^8.2.0 csstype: ^3.1.2 date-fns: ^2.29.3 - loglevel: ^1.8.1 + file-loader: 6.2.0 + normalize.css: ^8.0.1 overlayscrollbars: ^2.7.2 overlayscrollbars-react: ^0.5.6 rc-select: ^14.4.3 @@ -17332,14 +17537,9 @@ __metadata: rc-tooltip: ^5.3.1 react-datepicker: ^4.10.0 react-toastify: 9.0.3 - peerDependencies: - react: ^17.0.2 - react-dom: ^17.0.2 - react-router-dom: ^5.0.0 - styled-components: ^5.3.6 - checksum: 3704cfcabd3bc6a73b9dd1168f0ba2a55dd5ef606fff61aebf86b3a92784ebcb7303a67714f1b3f14fcf3ab52c5799a8e99670704f1ba6e7ebd80285c8152032 - languageName: node - linkType: hard + remark-gfm: ^3.0.1 + languageName: unknown + linkType: soft "destroy@npm:1.2.0": version: 1.2.0 @@ -17390,15 +17590,6 @@ __metadata: languageName: node linkType: hard -"detect-package-manager@npm:^2.0.1": - version: 2.0.1 - resolution: "detect-package-manager@npm:2.0.1" - dependencies: - execa: ^5.1.1 - checksum: e72b910182d5ad479198d4235be206ac64a479257b32201bb06f3c842cc34c65ea851d46f72cc1d4bf535bcc6c4b44b5b86bb29fe1192b8c9c07b46883672f28 - languageName: node - linkType: hard - "detect-port-alt@npm:^1.1.6": version: 1.1.6 resolution: "detect-port-alt@npm:1.1.6" @@ -17412,19 +17603,6 @@ __metadata: languageName: node linkType: hard -"detect-port@npm:^1.3.0": - version: 1.5.1 - resolution: "detect-port@npm:1.5.1" - dependencies: - address: ^1.0.1 - debug: 4 - bin: - detect: bin/detect-port.js - detect-port: bin/detect-port.js - checksum: b48da9340481742547263d5d985e65d078592557863402ecf538511735e83575867e94f91fe74405ea19b61351feb99efccae7e55de9a151d5654e3417cea05b - languageName: node - linkType: hard - "detective@npm:^5.2.0": version: 5.2.0 resolution: "detective@npm:5.2.0" @@ -17462,10 +17640,10 @@ __metadata: languageName: node linkType: hard -"diff-sequences@npm:^29.4.3": - version: 29.4.3 - resolution: "diff-sequences@npm:29.4.3" - checksum: 28b265e04fdddcf7f9f814effe102cc95a9dec0564a579b5aed140edb24fc345c611ca52d76d725a3cab55d3888b915b5e8a4702e0f6058968a90fa5f41fcde7 +"diff-sequences@npm:^29.6.3": + version: 29.6.3 + resolution: "diff-sequences@npm:29.6.3" + checksum: f4914158e1f2276343d98ff5b31fc004e7304f5470bf0f1adb2ac6955d85a531a6458d33e87667f98f6ae52ebd3891bb47d420bb48a5bd8b7a27ee25b20e33aa languageName: node linkType: hard @@ -17483,6 +17661,15 @@ __metadata: languageName: node linkType: hard +"diffable-html@npm:^4.1.0": + version: 4.1.0 + resolution: "diffable-html@npm:4.1.0" + dependencies: + htmlparser2: ^3.9.2 + checksum: f7d76bbe2cdbeebb928d3d625ffd84e2cfcda8ecb7adc5c513faabbc7fa5b69044bdb3ddbc0bded0685e8e52a00272cb0a378f9bb20f36fc85b437ce810f25a8 + languageName: node + linkType: hard + "diffie-hellman@npm:^5.0.0": version: 5.0.3 resolution: "diffie-hellman@npm:5.0.3" @@ -17670,7 +17857,7 @@ __metadata: languageName: node linkType: hard -"domelementtype@npm:1": +"domelementtype@npm:1, domelementtype@npm:^1.3.1": version: 1.3.1 resolution: "domelementtype@npm:1.3.1" checksum: 7893da40218ae2106ec6ffc146b17f203487a52f5228b032ea7aa470e41dfe03e1bd762d0ee0139e792195efda765434b04b43cddcf63207b098f6ae44b36ad6 @@ -17702,6 +17889,15 @@ __metadata: languageName: node linkType: hard +"domhandler@npm:^2.3.0": + version: 2.4.2 + resolution: "domhandler@npm:2.4.2" + dependencies: + domelementtype: 1 + checksum: 49bd70c9c784f845cd047e1dfb3611bd10891c05719acfc93f01fc726a419ed09fbe0b69f9064392d556a63fffc5a02010856cedae9368f4817146d95a97011f + languageName: node + linkType: hard + "domhandler@npm:^4.0.0, domhandler@npm:^4.2.0": version: 4.3.1 resolution: "domhandler@npm:4.3.1" @@ -17730,6 +17926,16 @@ __metadata: languageName: node linkType: hard +"domutils@npm:^1.5.1": + version: 1.7.0 + resolution: "domutils@npm:1.7.0" + dependencies: + dom-serializer: 0 + domelementtype: 1 + checksum: f60a725b1f73c1ae82f4894b691601ecc6ecb68320d87923ac3633137627c7865725af813ae5d188ad3954283853bcf46779eb50304ec5d5354044569fcefd2b + languageName: node + linkType: hard + "domutils@npm:^2.5.2, domutils@npm:^2.6.0": version: 2.8.0 resolution: "domutils@npm:2.8.0" @@ -17771,13 +17977,6 @@ __metadata: languageName: node linkType: hard -"dotenv-expand@npm:^10.0.0": - version: 10.0.0 - resolution: "dotenv-expand@npm:10.0.0" - checksum: 2a38b470efe0abcb1ac8490421a55e1d764dc9440fd220942bce40965074f3fb00b585f4346020cb0f0f219966ee6b4ee5023458b3e2953fe5b3214de1b314ee - languageName: node - linkType: hard - "dotenv-expand@npm:^5.1.0": version: 5.1.0 resolution: "dotenv-expand@npm:5.1.0" @@ -17792,13 +17991,6 @@ __metadata: languageName: node linkType: hard -"dotenv@npm:^16.0.0": - version: 16.3.1 - resolution: "dotenv@npm:16.3.1" - checksum: 15d75e7279018f4bafd0ee9706593dd14455ddb71b3bcba9c52574460b7ccaf67d5cf8b2c08a5af1a9da6db36c956a04a1192b101ee102a3e0cf8817bbcf3dfd - languageName: node - linkType: hard - "dotenv@npm:^8.1.0": version: 8.6.0 resolution: "dotenv@npm:8.6.0" @@ -17838,18 +18030,6 @@ __metadata: languageName: node linkType: hard -"duplexify@npm:^3.5.0, duplexify@npm:^3.6.0": - version: 3.7.1 - resolution: "duplexify@npm:3.7.1" - dependencies: - end-of-stream: ^1.0.0 - inherits: ^2.0.1 - readable-stream: ^2.0.0 - stream-shift: ^1.0.0 - checksum: 3c2ed2223d956a5da713dae12ba8295acb61d9acd966ccbba938090d04f4574ca4dca75cca089b5077c2d7e66101f32e6ea9b36a78ca213eff574e7a8b8accf2 - languageName: node - linkType: hard - "eastasianwidth@npm:^0.2.0": version: 0.2.0 resolution: "eastasianwidth@npm:0.2.0" @@ -18008,7 +18188,7 @@ __metadata: languageName: node linkType: hard -"end-of-stream@npm:^1.0.0, end-of-stream@npm:^1.1.0, end-of-stream@npm:^1.4.1": +"end-of-stream@npm:^1.1.0": version: 1.4.4 resolution: "end-of-stream@npm:1.4.4" dependencies: @@ -18017,6 +18197,17 @@ __metadata: languageName: node linkType: hard +"endent@npm:^2.0.1": + version: 2.1.0 + resolution: "endent@npm:2.1.0" + dependencies: + dedent: ^0.7.0 + fast-json-parse: ^1.0.3 + objectorarray: ^1.0.5 + checksum: c352831088fce745a39ddbd5f87a17e073ea6556e7e96e9010d945a3f3020f836b9a84657123fa01e897db9216f4b080d950b5ded9bf3a8227f14a34efaaaf7c + languageName: node + linkType: hard + "engine.io-client@npm:~6.2.3": version: 6.2.3 resolution: "engine.io-client@npm:6.2.3" @@ -18100,6 +18291,13 @@ __metadata: languageName: node linkType: hard +"entities@npm:^1.1.1": + version: 1.1.2 + resolution: "entities@npm:1.1.2" + checksum: d537b02799bdd4784ffd714d000597ed168727bddf4885da887c5a491d735739029a00794f1998abbf35f3f6aeda32ef5c15010dca1817d401903a501b6d3e05 + languageName: node + linkType: hard + "entities@npm:^2.0.0": version: 2.0.3 resolution: "entities@npm:2.0.3" @@ -18259,13 +18457,20 @@ __metadata: languageName: node linkType: hard -"es-module-lexer@npm:^0.9.0, es-module-lexer@npm:^0.9.3": +"es-module-lexer@npm:^0.9.0": version: 0.9.3 resolution: "es-module-lexer@npm:0.9.3" checksum: 84bbab23c396281db2c906c766af58b1ae2a1a2599844a504df10b9e8dc77ec800b3211fdaa133ff700f5703d791198807bba25d9667392d27a5e9feda344da8 languageName: node linkType: hard +"es-module-lexer@npm:^1.5.0": + version: 1.5.4 + resolution: "es-module-lexer@npm:1.5.4" + checksum: a0cf04fb92d052647ac7d818d1913b98d3d3d0f5b9d88f0eafb993436e4c3e2c958599db68839d57f2dfa281fdf0f60e18d448eb78fc292c33c0f25635b6854f + languageName: node + linkType: hard + "es-set-tostringtag@npm:^2.0.1": version: 2.0.1 resolution: "es-set-tostringtag@npm:2.0.1" @@ -18297,20 +18502,13 @@ __metadata: languageName: node linkType: hard -"es6-error@npm:^4.1.1": +"es6-error@npm:^4.0.1, es6-error@npm:^4.1.1": version: 4.1.1 resolution: "es6-error@npm:4.1.1" checksum: ae41332a51ec1323da6bbc5d75b7803ccdeddfae17c41b6166ebbafc8e8beb7a7b80b884b7fab1cc80df485860ac3c59d78605e860bb4f8cd816b3d6ade0d010 languageName: node linkType: hard -"esbuild-plugin-alias@npm:^0.2.1": - version: 0.2.1 - resolution: "esbuild-plugin-alias@npm:0.2.1" - checksum: afe2d2c8b5f09d5321cb8d9c0825e8a9f6e03c2d50df92f953a291d4620cc29eddb3da9e33b238f6d8f77738e0277bdcb831f127399449fecf78fb84c04e5da9 - languageName: node - linkType: hard - "esbuild-register@npm:^3.5.0": version: 3.5.0 resolution: "esbuild-register@npm:3.5.0" @@ -18322,33 +18520,33 @@ __metadata: languageName: node linkType: hard -"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0, esbuild@npm:^0.20.1": - version: 0.20.2 - resolution: "esbuild@npm:0.20.2" - dependencies: - "@esbuild/aix-ppc64": 0.20.2 - "@esbuild/android-arm": 0.20.2 - "@esbuild/android-arm64": 0.20.2 - "@esbuild/android-x64": 0.20.2 - "@esbuild/darwin-arm64": 0.20.2 - "@esbuild/darwin-x64": 0.20.2 - "@esbuild/freebsd-arm64": 0.20.2 - "@esbuild/freebsd-x64": 0.20.2 - "@esbuild/linux-arm": 0.20.2 - "@esbuild/linux-arm64": 0.20.2 - "@esbuild/linux-ia32": 0.20.2 - "@esbuild/linux-loong64": 0.20.2 - "@esbuild/linux-mips64el": 0.20.2 - "@esbuild/linux-ppc64": 0.20.2 - "@esbuild/linux-riscv64": 0.20.2 - "@esbuild/linux-s390x": 0.20.2 - "@esbuild/linux-x64": 0.20.2 - "@esbuild/netbsd-x64": 0.20.2 - "@esbuild/openbsd-x64": 0.20.2 - "@esbuild/sunos-x64": 0.20.2 - "@esbuild/win32-arm64": 0.20.2 - "@esbuild/win32-ia32": 0.20.2 - "@esbuild/win32-x64": 0.20.2 +"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0": + version: 0.21.5 + resolution: "esbuild@npm:0.21.5" + dependencies: + "@esbuild/aix-ppc64": 0.21.5 + "@esbuild/android-arm": 0.21.5 + "@esbuild/android-arm64": 0.21.5 + "@esbuild/android-x64": 0.21.5 + "@esbuild/darwin-arm64": 0.21.5 + "@esbuild/darwin-x64": 0.21.5 + "@esbuild/freebsd-arm64": 0.21.5 + "@esbuild/freebsd-x64": 0.21.5 + "@esbuild/linux-arm": 0.21.5 + "@esbuild/linux-arm64": 0.21.5 + "@esbuild/linux-ia32": 0.21.5 + "@esbuild/linux-loong64": 0.21.5 + "@esbuild/linux-mips64el": 0.21.5 + "@esbuild/linux-ppc64": 0.21.5 + "@esbuild/linux-riscv64": 0.21.5 + "@esbuild/linux-s390x": 0.21.5 + "@esbuild/linux-x64": 0.21.5 + "@esbuild/netbsd-x64": 0.21.5 + "@esbuild/openbsd-x64": 0.21.5 + "@esbuild/sunos-x64": 0.21.5 + "@esbuild/win32-arm64": 0.21.5 + "@esbuild/win32-ia32": 0.21.5 + "@esbuild/win32-x64": 0.21.5 dependenciesMeta: "@esbuild/aix-ppc64": optional: true @@ -18398,7 +18596,7 @@ __metadata: optional: true bin: esbuild: bin/esbuild - checksum: bc88050fc1ca5c1bd03648f9979e514bdefb956a63aa3974373bb7b9cbac0b3aac9b9da1b5bdca0b3490e39d6b451c72815dbd6b7d7f978c91fbe9c9e9aa4e4c + checksum: 2911c7b50b23a9df59a7d6d4cdd3a4f85855787f374dce751148dbb13305e0ce7e880dde1608c2ab7a927fc6cec3587b80995f7fc87a64b455f8b70b55fd8ec1 languageName: node linkType: hard @@ -18479,6 +18677,86 @@ __metadata: languageName: node linkType: hard +"esbuild@npm:^0.20.1": + version: 0.20.2 + resolution: "esbuild@npm:0.20.2" + dependencies: + "@esbuild/aix-ppc64": 0.20.2 + "@esbuild/android-arm": 0.20.2 + "@esbuild/android-arm64": 0.20.2 + "@esbuild/android-x64": 0.20.2 + "@esbuild/darwin-arm64": 0.20.2 + "@esbuild/darwin-x64": 0.20.2 + "@esbuild/freebsd-arm64": 0.20.2 + "@esbuild/freebsd-x64": 0.20.2 + "@esbuild/linux-arm": 0.20.2 + "@esbuild/linux-arm64": 0.20.2 + "@esbuild/linux-ia32": 0.20.2 + "@esbuild/linux-loong64": 0.20.2 + "@esbuild/linux-mips64el": 0.20.2 + "@esbuild/linux-ppc64": 0.20.2 + "@esbuild/linux-riscv64": 0.20.2 + "@esbuild/linux-s390x": 0.20.2 + "@esbuild/linux-x64": 0.20.2 + "@esbuild/netbsd-x64": 0.20.2 + "@esbuild/openbsd-x64": 0.20.2 + "@esbuild/sunos-x64": 0.20.2 + "@esbuild/win32-arm64": 0.20.2 + "@esbuild/win32-ia32": 0.20.2 + "@esbuild/win32-x64": 0.20.2 + dependenciesMeta: + "@esbuild/aix-ppc64": + optional: true + "@esbuild/android-arm": + optional: true + "@esbuild/android-arm64": + optional: true + "@esbuild/android-x64": + optional: true + "@esbuild/darwin-arm64": + optional: true + "@esbuild/darwin-x64": + optional: true + "@esbuild/freebsd-arm64": + optional: true + "@esbuild/freebsd-x64": + optional: true + "@esbuild/linux-arm": + optional: true + "@esbuild/linux-arm64": + optional: true + "@esbuild/linux-ia32": + optional: true + "@esbuild/linux-loong64": + optional: true + "@esbuild/linux-mips64el": + optional: true + "@esbuild/linux-ppc64": + optional: true + "@esbuild/linux-riscv64": + optional: true + "@esbuild/linux-s390x": + optional: true + "@esbuild/linux-x64": + optional: true + "@esbuild/netbsd-x64": + optional: true + "@esbuild/openbsd-x64": + optional: true + "@esbuild/sunos-x64": + optional: true + "@esbuild/win32-arm64": + optional: true + "@esbuild/win32-ia32": + optional: true + "@esbuild/win32-x64": + optional: true + bin: + esbuild: bin/esbuild + checksum: bc88050fc1ca5c1bd03648f9979e514bdefb956a63aa3974373bb7b9cbac0b3aac9b9da1b5bdca0b3490e39d6b451c72815dbd6b7d7f978c91fbe9c9e9aa4e4c + languageName: node + linkType: hard + "escalade@npm:^3.1.1": version: 3.1.1 resolution: "escalade@npm:3.1.1" @@ -18521,6 +18799,13 @@ __metadata: languageName: node linkType: hard +"escape-string-regexp@npm:^5.0.0": + version: 5.0.0 + resolution: "escape-string-regexp@npm:5.0.0" + checksum: 20daabe197f3cb198ec28546deebcf24b3dbb1a5a269184381b3116d12f0532e06007f4bc8da25669d6a7f8efb68db0758df4cd981f57bc5b57f521a3e12c59e + languageName: node + linkType: hard + "escodegen@npm:^2.0.0, escodegen@npm:^2.1.0": version: 2.1.0 resolution: "escodegen@npm:2.1.0" @@ -19125,7 +19410,7 @@ __metadata: languageName: node linkType: hard -"execa@npm:^5.0.0, execa@npm:^5.1.1": +"execa@npm:^5.0.0": version: 5.1.1 resolution: "execa@npm:5.1.1" dependencies: @@ -19172,6 +19457,15 @@ __metadata: languageName: node linkType: hard +"expand-tilde@npm:^1.2.2": + version: 1.2.2 + resolution: "expand-tilde@npm:1.2.2" + dependencies: + os-homedir: ^1.0.1 + checksum: 18051cd104977bc06e2bb1347db9959b90504437beea0de6fd287a3c8c58b41e2330337bd189cfca2ee4be6bda9bf045f8c07daf23e622f85eb6ee1c420619a0 + languageName: node + linkType: hard + "expand-tilde@npm:^2.0.0, expand-tilde@npm:^2.0.2": version: 2.0.2 resolution: "expand-tilde@npm:2.0.2" @@ -19181,6 +19475,13 @@ __metadata: languageName: node linkType: hard +"expect-playwright@npm:^0.8.0": + version: 0.8.0 + resolution: "expect-playwright@npm:0.8.0" + checksum: d9e8f0529527020524f2e27f454bdbee042df0c3b1e32f0902513d7c8cac927d87bd5b7cd835c8cc08776a4f61a8fd9adfde22a3390f253846a4c3422c415110 + languageName: node + linkType: hard + "expect@npm:^27.5.1": version: 27.5.1 resolution: "expect@npm:27.5.1" @@ -19193,16 +19494,16 @@ __metadata: languageName: node linkType: hard -"expect@npm:^29.0.0, expect@npm:^29.5.0": - version: 29.5.0 - resolution: "expect@npm:29.5.0" +"expect@npm:^29.0.0, expect@npm:^29.7.0": + version: 29.7.0 + resolution: "expect@npm:29.7.0" dependencies: - "@jest/expect-utils": ^29.5.0 - jest-get-type: ^29.4.3 - jest-matcher-utils: ^29.5.0 - jest-message-util: ^29.5.0 - jest-util: ^29.5.0 - checksum: 58f70b38693df6e5c6892db1bcd050f0e518d6f785175dc53917d4fa6a7359a048e5690e19ddcb96b65c4493881dd89a3dabdab1a84dfa55c10cdbdabf37b2d7 + "@jest/expect-utils": ^29.7.0 + jest-get-type: ^29.6.3 + jest-matcher-utils: ^29.7.0 + jest-message-util: ^29.7.0 + jest-util: ^29.7.0 + checksum: 9257f10288e149b81254a0fda8ffe8d54a7061cd61d7515779998b012579d2b8c22354b0eb901daf0145f347403da582f75f359f4810c007182ad3fb318b5c0c languageName: node linkType: hard @@ -19255,7 +19556,7 @@ __metadata: languageName: node linkType: hard -"extend@npm:^3.0.2, extend@npm:~3.0.2": +"extend@npm:^3.0.0, extend@npm:^3.0.2, extend@npm:~3.0.2": version: 3.0.2 resolution: "extend@npm:3.0.2" checksum: a50a8309ca65ea5d426382ff09f33586527882cf532931cb08ca786ea3146c0553310bda688710ff61d7668eba9f96b923fe1420cdf56a2c3eaf30fcab87b515 @@ -19341,6 +19642,13 @@ __metadata: languageName: node linkType: hard +"fast-json-parse@npm:^1.0.3": + version: 1.0.3 + resolution: "fast-json-parse@npm:1.0.3" + checksum: c19117c56ec18a9aa133c8ebf450c99d1037117e47a3cb9aff91b60580ba48d0fd8484b696c26749a1b9cb4914084177b3fa9ebef72063a74dee7d9ead987603 + languageName: node + linkType: hard + "fast-json-stable-stringify@npm:2.x, fast-json-stable-stringify@npm:^2.0.0, fast-json-stable-stringify@npm:^2.1.0": version: 2.1.0 resolution: "fast-json-stable-stringify@npm:2.1.0" @@ -19456,6 +19764,15 @@ __metadata: languageName: node linkType: hard +"fd-package-json@npm:^1.2.0": + version: 1.2.0 + resolution: "fd-package-json@npm:1.2.0" + dependencies: + walk-up-path: ^3.0.1 + checksum: 043a9b5bbec41d2e452b6c81943b235f0f89358acb1f0fbcfa7ecba80df53434f8e1d663d964c919447fbd0c6f8f8e7dc477fd31a1dd1d7217bfaeeae14fcbb0 + languageName: node + linkType: hard + "fd-slicer@npm:~1.1.0": version: 1.1.0 resolution: "fd-slicer@npm:1.1.0" @@ -19465,13 +19782,6 @@ __metadata: languageName: node linkType: hard -"fetch-retry@npm:^5.0.2": - version: 5.0.4 - resolution: "fetch-retry@npm:5.0.4" - checksum: 5c8a87f523223052b1192cc353001ceff8fe9f87926577c7e6532140c0780421cd7f7e0230e3d69f73f308b4071c4e6317b53e1058e31213dac1100c3ff96513 - languageName: node - linkType: hard - "fflate@npm:^0.4.4": version: 0.4.8 resolution: "fflate@npm:0.4.8" @@ -19513,7 +19823,7 @@ __metadata: languageName: node linkType: hard -"file-loader@npm:^6.2.0": +"file-loader@npm:6.2.0, file-loader@npm:^6.2.0": version: 6.2.0 resolution: "file-loader@npm:6.2.0" dependencies: @@ -19532,16 +19842,6 @@ __metadata: languageName: node linkType: hard -"file-system-cache@npm:2.3.0": - version: 2.3.0 - resolution: "file-system-cache@npm:2.3.0" - dependencies: - fs-extra: 11.1.1 - ramda: 0.29.0 - checksum: 74afa2870a062500643d41e02d1fbd47a3f30100f9e153dec5233d59f05545f4c8ada6085629d624e043479ac28c0cafc31824f7b49a3f997efab8cc5d05bfee - languageName: node - linkType: hard - "filelist@npm:^1.0.1": version: 1.0.4 resolution: "filelist@npm:1.0.4" @@ -19632,7 +19932,7 @@ __metadata: languageName: node linkType: hard -"find-cache-dir@npm:^3.0.0, find-cache-dir@npm:^3.3.1, find-cache-dir@npm:^3.3.2": +"find-cache-dir@npm:^3.0.0, find-cache-dir@npm:^3.2.0, find-cache-dir@npm:^3.3.1, find-cache-dir@npm:^3.3.2": version: 3.3.2 resolution: "find-cache-dir@npm:3.3.2" dependencies: @@ -19643,6 +19943,16 @@ __metadata: languageName: node linkType: hard +"find-file-up@npm:^0.1.2": + version: 0.1.3 + resolution: "find-file-up@npm:0.1.3" + dependencies: + fs-exists-sync: ^0.1.0 + resolve-dir: ^0.1.0 + checksum: 95475fee7b727266ec65312527c580eb4f01884592620296cf7859e72cce7f4f6a667c964ad6feeec53fb72a7c3991805532ed7a53d8224e9a1ccd88479cabce + languageName: node + linkType: hard + "find-node-modules@npm:^2.1.3": version: 2.1.3 resolution: "find-node-modules@npm:2.1.3" @@ -19653,6 +19963,28 @@ __metadata: languageName: node linkType: hard +"find-pkg@npm:^0.1.2": + version: 0.1.2 + resolution: "find-pkg@npm:0.1.2" + dependencies: + find-file-up: ^0.1.2 + checksum: cd797bfa7dd419849559312cdd3aec767c39939e552daa92e53ff6b61108f331eb2c800d20a5973631eb894ea36c13dded01a868b10f457a685e0ae87a1746e1 + languageName: node + linkType: hard + +"find-process@npm:^1.4.4": + version: 1.4.7 + resolution: "find-process@npm:1.4.7" + dependencies: + chalk: ^4.0.0 + commander: ^5.1.0 + debug: ^4.1.1 + bin: + find-process: bin/find-process.js + checksum: 1953e6a16af86ec033d613ddfcac24f68b7ca6cc7d7aadc037ede4ccad4f03c5571d3c95165842475bfa9432120be5c995cc234c9c02726fc886ac6cd85ece3b + languageName: node + linkType: hard + "find-root@npm:^1.1.0": version: 1.1.0 resolution: "find-root@npm:1.1.0" @@ -19809,7 +20141,7 @@ __metadata: languageName: node linkType: hard -"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.15.0": +"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.14.0, follow-redirects@npm:^1.15.6": version: 1.15.6 resolution: "follow-redirects@npm:1.15.6" peerDependenciesMeta: @@ -19844,13 +20176,13 @@ __metadata: languageName: node linkType: hard -"foreground-child@npm:^3.1.0": - version: 3.1.1 - resolution: "foreground-child@npm:3.1.1" +"foreground-child@npm:^2.0.0": + version: 2.0.0 + resolution: "foreground-child@npm:2.0.0" dependencies: cross-spawn: ^7.0.0 - signal-exit: ^4.0.1 - checksum: 139d270bc82dc9e6f8bc045fe2aae4001dc2472157044fdfad376d0a3457f77857fa883c1c8b21b491c6caade9a926a4bed3d3d2e8d3c9202b151a4cbbd0bcd5 + signal-exit: ^3.0.2 + checksum: f77ec9aff621abd6b754cb59e690743e7639328301fbea6ff09df27d2befaf7dd5b77cec51c32323d73a81a7d91caaf9413990d305cbe3d873eec4fe58960956 languageName: node linkType: hard @@ -19965,21 +20297,17 @@ __metadata: languageName: node linkType: hard -"fs-constants@npm:^1.0.0": - version: 1.0.0 - resolution: "fs-constants@npm:1.0.0" - checksum: 18f5b718371816155849475ac36c7d0b24d39a11d91348cfcb308b4494824413e03572c403c86d3a260e049465518c4f0d5bd00f0371cdfcad6d4f30a85b350d +"fromentries@npm:^1.2.0": + version: 1.3.2 + resolution: "fromentries@npm:1.3.2" + checksum: 33729c529ce19f5494f846f0dd4945078f4e37f4e8955f4ae8cc7385c218f600e9d93a7d225d17636c20d1889106fd87061f911550861b7072f53bf891e6b341 languageName: node linkType: hard -"fs-extra@npm:11.1.1": - version: 11.1.1 - resolution: "fs-extra@npm:11.1.1" - dependencies: - graceful-fs: ^4.2.0 - jsonfile: ^6.0.1 - universalify: ^2.0.0 - checksum: fb883c68245b2d777fbc1f2082c9efb084eaa2bbf9fddaa366130d196c03608eebef7fb490541276429ee1ca99f317e2d73e96f5ca0999eefedf5a624ae1edfd +"fs-exists-sync@npm:^0.1.0": + version: 0.1.0 + resolution: "fs-exists-sync@npm:0.1.0" + checksum: 850a0d6e4c03a7bd2fd25043f77cd9d6be9c3b48bb99308bcfe9c94f3f92f65f2cd3fa036e13a1b0ba7a46d2e58792f53e578f01d75fbdcd56baeb9eed63b705 languageName: node linkType: hard @@ -20058,6 +20386,16 @@ __metadata: languageName: node linkType: hard +"fsevents@npm:2.3.2": + version: 2.3.2 + resolution: "fsevents@npm:2.3.2" + dependencies: + node-gyp: latest + checksum: 97ade64e75091afee5265e6956cb72ba34db7819b4c3e94c431d4be2b19b8bb7a2d4116da417950c3425f17c8fe693d25e20212cac583ac1521ad066b77ae31f + conditions: os=darwin + languageName: node + linkType: hard + "fsevents@npm:^2.3.2, fsevents@npm:~2.3.2, fsevents@npm:~2.3.3": version: 2.3.3 resolution: "fsevents@npm:2.3.3" @@ -20068,6 +20406,15 @@ __metadata: languageName: node linkType: hard +"fsevents@patch:fsevents@2.3.2#~builtin": + version: 2.3.2 + resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin::version=2.3.2&hash=df0bf1" + dependencies: + node-gyp: latest + conditions: os=darwin + languageName: node + linkType: hard + "fsevents@patch:fsevents@^2.3.2#~builtin, fsevents@patch:fsevents@~2.3.2#~builtin, fsevents@patch:fsevents@~2.3.3#~builtin": version: 2.3.3 resolution: "fsevents@patch:fsevents@npm%3A2.3.3#~builtin::version=2.3.3&hash=df0bf1" @@ -20218,13 +20565,6 @@ __metadata: languageName: node linkType: hard -"get-npm-tarball-url@npm:^2.0.3": - version: 2.0.3 - resolution: "get-npm-tarball-url@npm:2.0.3" - checksum: 8ad48a6f1126697665e12ebf053e0d1c3b15b3c4f29ea6c458387ac68d044ea1c08f0f2eb5c0fe35447fdd2da4f2fb5c9882feb5a2ea195c773f94e762c9b886 - languageName: node - linkType: hard - "get-own-enumerable-property-symbols@npm:^3.0.0": version: 3.0.2 resolution: "get-own-enumerable-property-symbols@npm:3.0.2" @@ -20364,21 +20704,6 @@ __metadata: languageName: node linkType: hard -"glob@npm:^10.0.0": - version: 10.3.3 - resolution: "glob@npm:10.3.3" - dependencies: - foreground-child: ^3.1.0 - jackspeak: ^2.0.3 - minimatch: ^9.0.1 - minipass: ^5.0.0 || ^6.0.2 || ^7.0.0 - path-scurry: ^1.10.1 - bin: - glob: dist/cjs/src/bin.js - checksum: 29190d3291f422da0cb40b77a72fc8d2c51a36524e99b8bf412548b7676a6627489528b57250429612b6eec2e6fe7826d328451d3e694a9d15e575389308ec53 - languageName: node - linkType: hard - "glob@npm:^7.1.0, glob@npm:^7.1.1, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6, glob@npm:^7.2.0": version: 7.2.3 resolution: "glob@npm:7.2.3" @@ -20415,6 +20740,16 @@ __metadata: languageName: node linkType: hard +"global-modules@npm:^0.2.3": + version: 0.2.3 + resolution: "global-modules@npm:0.2.3" + dependencies: + global-prefix: ^0.1.4 + is-windows: ^0.2.0 + checksum: 3801788df54897d994c9c8f3d09f253d1379cd879ae61fcddbcc3ecdfdf6fe23a1edb983e8d4dd24cebf7e49823752e1cd29a2d33bdb4de587de8b4a85b17e24 + languageName: node + linkType: hard + "global-modules@npm:^1.0.0": version: 1.0.0 resolution: "global-modules@npm:1.0.0" @@ -20435,6 +20770,18 @@ __metadata: languageName: node linkType: hard +"global-prefix@npm:^0.1.4": + version: 0.1.5 + resolution: "global-prefix@npm:0.1.5" + dependencies: + homedir-polyfill: ^1.0.0 + ini: ^1.3.4 + is-windows: ^0.2.0 + which: ^1.2.12 + checksum: ea1b818a1851655ebb2341cdd5446da81c25f31ca6f0ac358a234cbed5442edc1bfa5628771466988d67d9fcc6ad09ca0e68a8d3d7e3d92f7de3aec87020e183 + languageName: node + linkType: hard + "global-prefix@npm:^1.0.1": version: 1.0.2 resolution: "global-prefix@npm:1.0.2" @@ -20484,7 +20831,7 @@ __metadata: languageName: node linkType: hard -"globby@npm:^11.0.1, globby@npm:^11.0.2, globby@npm:^11.0.4, globby@npm:^11.1.0": +"globby@npm:^11.0.1, globby@npm:^11.0.4, globby@npm:^11.1.0": version: 11.1.0 resolution: "globby@npm:11.1.0" dependencies: @@ -20511,6 +20858,20 @@ __metadata: languageName: node linkType: hard +"globby@npm:^14.0.1": + version: 14.0.2 + resolution: "globby@npm:14.0.2" + dependencies: + "@sindresorhus/merge-streams": ^2.1.0 + fast-glob: ^3.3.2 + ignore: ^5.2.4 + path-type: ^5.0.0 + slash: ^5.1.0 + unicorn-magic: ^0.1.0 + checksum: 2cee79efefca4383a825fc2fcbdb37e5706728f2d39d4b63851927c128fff62e6334ef7d4d467949d411409ad62767dc2d214e0f837a0f6d4b7290b6711d485c + languageName: node + linkType: hard + "glur@npm:^1.1.2": version: 1.1.2 resolution: "glur@npm:1.1.2" @@ -20602,22 +20963,6 @@ __metadata: languageName: node linkType: hard -"gunzip-maybe@npm:^1.4.2": - version: 1.4.2 - resolution: "gunzip-maybe@npm:1.4.2" - dependencies: - browserify-zlib: ^0.1.4 - is-deflate: ^1.0.0 - is-gzip: ^1.0.0 - peek-stream: ^1.1.0 - pumpify: ^1.3.3 - through2: ^2.0.3 - bin: - gunzip-maybe: bin.js - checksum: bc4d4977c24a2860238df271de75d53dd72a359d19f1248d1c613807dc221d3b8ae09624e3085c8106663e3e1b59db62a85b261d1138c2cc24efad9df577d4e1 - languageName: node - linkType: hard - "gzip-size@npm:^5.0.0": version: 5.1.1 resolution: "gzip-size@npm:5.1.1" @@ -20644,7 +20989,7 @@ __metadata: languageName: node linkType: hard -"handlebars@npm:^4.4.3, handlebars@npm:^4.7.7": +"handlebars@npm:^4.4.3": version: 4.7.7 resolution: "handlebars@npm:4.7.7" dependencies: @@ -20775,6 +21120,16 @@ __metadata: languageName: node linkType: hard +"hasha@npm:^5.0.0": + version: 5.2.2 + resolution: "hasha@npm:5.2.2" + dependencies: + is-stream: ^2.0.0 + type-fest: ^0.8.0 + checksum: 06cc474bed246761ff61c19d629977eb5f53fa817be4313a255a64ae0f433e831a29e83acb6555e3f4592b348497596f1d1653751008dda4f21c9c21ca60ac5a + languageName: node + linkType: hard + "hast-util-heading-rank@npm:^3.0.0": version: 3.0.0 resolution: "hast-util-heading-rank@npm:3.0.0" @@ -20896,7 +21251,7 @@ __metadata: languageName: node linkType: hard -"homedir-polyfill@npm:^1.0.1": +"homedir-polyfill@npm:^1.0.0, homedir-polyfill@npm:^1.0.1": version: 1.0.3 resolution: "homedir-polyfill@npm:1.0.3" dependencies: @@ -21020,6 +21375,20 @@ __metadata: languageName: node linkType: hard +"htmlparser2@npm:^3.9.2": + version: 3.10.1 + resolution: "htmlparser2@npm:3.10.1" + dependencies: + domelementtype: ^1.3.1 + domhandler: ^2.3.0 + domutils: ^1.5.1 + entities: ^1.1.1 + inherits: ^2.0.1 + readable-stream: ^3.1.1 + checksum: 6875f7dd875aa10be17d9b130e3738cd8ed4010b1f2edaf4442c82dfafe9d9336b155870dcc39f38843cbf7fef5e4fcfdf0c4c1fd4db3a1b91a1e0ee8f6c3475 + languageName: node + linkType: hard + "htmlparser2@npm:^6.1.0": version: 6.1.0 resolution: "htmlparser2@npm:6.1.0" @@ -21564,7 +21933,7 @@ __metadata: languageName: node linkType: hard -"ip@npm:^2.0.0, ip@npm:^2.0.1": +"ip@npm:^2.0.0": version: 2.0.1 resolution: "ip@npm:2.0.1" checksum: d765c9fd212b8a99023a4cde6a558a054c298d640fec1020567494d257afd78ca77e37126b1a3ef0e053646ced79a816bf50621d38d5e768cdde0431fa3b0d35 @@ -21691,6 +22060,13 @@ __metadata: languageName: node linkType: hard +"is-buffer@npm:^2.0.0": + version: 2.0.5 + resolution: "is-buffer@npm:2.0.5" + checksum: 764c9ad8b523a9f5a32af29bdf772b08eb48c04d2ad0a7240916ac2688c983bf5f8504bf25b35e66240edeb9d9085461f9b5dae1f3d2861c6b06a65fe983de42 + languageName: node + linkType: hard + "is-callable@npm:^1.1.3, is-callable@npm:^1.1.4, is-callable@npm:^1.2.7": version: 1.2.7 resolution: "is-callable@npm:1.2.7" @@ -21745,13 +22121,6 @@ __metadata: languageName: node linkType: hard -"is-deflate@npm:^1.0.0": - version: 1.0.0 - resolution: "is-deflate@npm:1.0.0" - checksum: c2f9f2d3db79ac50c5586697d1e69a55282a2b0cc5e437b3c470dd47f24e40b6216dcd7e024511e21381607bf57afa019343e3bd0e08a119032818b596004262 - languageName: node - linkType: hard - "is-docker@npm:^2.0.0, is-docker@npm:^2.1.1": version: 2.2.1 resolution: "is-docker@npm:2.2.1" @@ -21841,13 +22210,6 @@ __metadata: languageName: node linkType: hard -"is-gzip@npm:^1.0.0": - version: 1.0.0 - resolution: "is-gzip@npm:1.0.0" - checksum: 0d28931c1f445fa29c900cf9f48e06e9d1d477a3bf7bd7332e7ce68f1333ccd8cb381de2f0f62a9a262d9c0912608a9a71b4a40e788e201b3dbd67072bb20d86 - languageName: node - linkType: hard - "is-hexadecimal@npm:^1.0.0": version: 1.0.4 resolution: "is-hexadecimal@npm:1.0.4" @@ -21911,16 +22273,6 @@ __metadata: languageName: node linkType: hard -"is-nan@npm:^1.3.2": - version: 1.3.2 - resolution: "is-nan@npm:1.3.2" - dependencies: - call-bind: ^1.0.0 - define-properties: ^1.1.3 - checksum: 5dfadcef6ad12d3029d43643d9800adbba21cf3ce2ec849f734b0e14ee8da4070d82b15fdb35138716d02587c6578225b9a22779cab34888a139cc43e4e3610a - languageName: node - linkType: hard - "is-negative-zero@npm:^2.0.2": version: 2.0.2 resolution: "is-negative-zero@npm:2.0.2" @@ -21993,6 +22345,13 @@ __metadata: languageName: node linkType: hard +"is-plain-obj@npm:^4.0.0": + version: 4.1.0 + resolution: "is-plain-obj@npm:4.1.0" + checksum: 6dc45da70d04a81f35c9310971e78a6a3c7a63547ef782e3a07ee3674695081b6ca4e977fbb8efc48dae3375e0b34558d2bcd722aec9bddfa2d7db5b041be8ce + languageName: node + linkType: hard + "is-plain-object@npm:5.0.0, is-plain-object@npm:^5.0.0": version: 5.0.0 resolution: "is-plain-object@npm:5.0.0" @@ -22192,7 +22551,14 @@ __metadata: languageName: node linkType: hard -"is-windows@npm:^1.0.1": +"is-windows@npm:^0.2.0": + version: 0.2.0 + resolution: "is-windows@npm:0.2.0" + checksum: 3df25afda2fd9f3926b08cebacf1fc0a1fe7805a2cb73ef0f1b911c949e4e7648c4623979d74b4502bdd9af69471101eb6051b751595f7f88569148186cf7a7a + languageName: node + linkType: hard + +"is-windows@npm:^1.0.1, is-windows@npm:^1.0.2": version: 1.0.2 resolution: "is-windows@npm:1.0.2" checksum: 438b7e52656fe3b9b293b180defb4e448088e7023a523ec21a91a80b9ff8cdb3377ddb5b6e60f7c7de4fa8b63ab56e121b6705fe081b3cf1b828b0a380009ad7 @@ -22278,6 +22644,27 @@ __metadata: languageName: node linkType: hard +"istanbul-lib-hook@npm:^3.0.0": + version: 3.0.0 + resolution: "istanbul-lib-hook@npm:3.0.0" + dependencies: + append-transform: ^2.0.0 + checksum: ac4d0a0751e959cfe4c95d817df5f1f573f9b0cf892552e60d81785654291391fac1ceb667f13bb17fcc2ef23b74c89ed8cf1c6148c833c8596a2b920b079101 + languageName: node + linkType: hard + +"istanbul-lib-instrument@npm:^4.0.0": + version: 4.0.3 + resolution: "istanbul-lib-instrument@npm:4.0.3" + dependencies: + "@babel/core": ^7.7.5 + "@istanbuljs/schema": ^0.1.2 + istanbul-lib-coverage: ^3.0.0 + semver: ^6.3.0 + checksum: fa1171d3022b1bb8f6a734042620ac5d9ee7dc80f3065a0bb12863e9f0494d0eefa3d86608fcc0254ab2765d29d7dad8bdc42e5f8df2f9a1fbe85ccc59d76cb9 + languageName: node + linkType: hard + "istanbul-lib-instrument@npm:^5.0.4, istanbul-lib-instrument@npm:^5.1.0": version: 5.2.0 resolution: "istanbul-lib-instrument@npm:5.2.0" @@ -22291,6 +22678,33 @@ __metadata: languageName: node linkType: hard +"istanbul-lib-instrument@npm:^6.0.0": + version: 6.0.3 + resolution: "istanbul-lib-instrument@npm:6.0.3" + dependencies: + "@babel/core": ^7.23.9 + "@babel/parser": ^7.23.9 + "@istanbuljs/schema": ^0.1.3 + istanbul-lib-coverage: ^3.2.0 + semver: ^7.5.4 + checksum: 74104c60c65c4fa0e97cc76f039226c356123893929f067bfad5f86fe839e08f5d680354a68fead3bc9c1e2f3fa6f3f53cded70778e821d911e851d349f3545a + languageName: node + linkType: hard + +"istanbul-lib-processinfo@npm:^2.0.2": + version: 2.0.3 + resolution: "istanbul-lib-processinfo@npm:2.0.3" + dependencies: + archy: ^1.0.0 + cross-spawn: ^7.0.3 + istanbul-lib-coverage: ^3.2.0 + p-map: ^3.0.0 + rimraf: ^3.0.0 + uuid: ^8.3.2 + checksum: 501729e809a4e98bbb9f62f89cae924be81655a7ff8118661f8834a10bb89ed5d3a5099ea0b6555e1a8ee15a0099cb64f7170b89aae155ab2afacfe8dd94421a + languageName: node + linkType: hard + "istanbul-lib-report@npm:^3.0.0": version: 3.0.0 resolution: "istanbul-lib-report@npm:3.0.0" @@ -22313,13 +22727,13 @@ __metadata: languageName: node linkType: hard -"istanbul-reports@npm:^3.1.3": - version: 3.1.5 - resolution: "istanbul-reports@npm:3.1.5" +"istanbul-reports@npm:^3.0.2, istanbul-reports@npm:^3.1.3": + version: 3.1.7 + resolution: "istanbul-reports@npm:3.1.7" dependencies: html-escaper: ^2.0.0 istanbul-lib-report: ^3.0.0 - checksum: 7867228f83ed39477b188ea07e7ccb9b4f5320b6f73d1db93a0981b7414fa4ef72d3f80c4692c442f90fc250d9406e71d8d7ab65bb615cb334e6292b73192b89 + checksum: 2072db6e07bfbb4d0eb30e2700250636182398c1af811aea5032acb219d2080f7586923c09fa194029efd6b92361afb3dcbe1ebcc3ee6651d13340f7c6c4ed95 languageName: node linkType: hard @@ -22346,19 +22760,6 @@ __metadata: languageName: node linkType: hard -"jackspeak@npm:^2.0.3": - version: 2.2.2 - resolution: "jackspeak@npm:2.2.2" - dependencies: - "@isaacs/cliui": ^8.0.2 - "@pkgjs/parseargs": ^0.11.0 - dependenciesMeta: - "@pkgjs/parseargs": - optional: true - checksum: 7b1468dd910afc00642db87448f24b062346570b8b47531409aa9012bcb95fdf7ec2b1c48edbb8b57a938c08391f8cc01b5034fc335aa3a2e74dbcc0ee5c555a - languageName: node - linkType: hard - "jake@npm:^10.8.5": version: 10.8.5 resolution: "jake@npm:10.8.5" @@ -22394,13 +22795,14 @@ __metadata: languageName: node linkType: hard -"jest-changed-files@npm:^29.5.0": - version: 29.5.0 - resolution: "jest-changed-files@npm:29.5.0" +"jest-changed-files@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-changed-files@npm:29.7.0" dependencies: execa: ^5.0.0 + jest-util: ^29.7.0 p-limit: ^3.1.0 - checksum: a67a7cb3c11f8f92bd1b7c79e84f724cbd11a9ad51f3cdadafe3ce7ee3c79ee50dbea128f920f5fddc807e9e4e83f5462143094391feedd959a77dd20ab96cf3 + checksum: 963e203893c396c5dfc75e00a49426688efea7361b0f0e040035809cecd2d46b3c01c02be2d9e8d38b1138357d2de7719ea5b5be21f66c10f2e9685a5a73bb99 languageName: node linkType: hard @@ -22431,31 +22833,31 @@ __metadata: languageName: node linkType: hard -"jest-circus@npm:^29.5.0": - version: 29.5.0 - resolution: "jest-circus@npm:29.5.0" +"jest-circus@npm:^29.6.4, jest-circus@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-circus@npm:29.7.0" dependencies: - "@jest/environment": ^29.5.0 - "@jest/expect": ^29.5.0 - "@jest/test-result": ^29.5.0 - "@jest/types": ^29.5.0 + "@jest/environment": ^29.7.0 + "@jest/expect": ^29.7.0 + "@jest/test-result": ^29.7.0 + "@jest/types": ^29.6.3 "@types/node": "*" chalk: ^4.0.0 co: ^4.6.0 - dedent: ^0.7.0 + dedent: ^1.0.0 is-generator-fn: ^2.0.0 - jest-each: ^29.5.0 - jest-matcher-utils: ^29.5.0 - jest-message-util: ^29.5.0 - jest-runtime: ^29.5.0 - jest-snapshot: ^29.5.0 - jest-util: ^29.5.0 + jest-each: ^29.7.0 + jest-matcher-utils: ^29.7.0 + jest-message-util: ^29.7.0 + jest-runtime: ^29.7.0 + jest-snapshot: ^29.7.0 + jest-util: ^29.7.0 p-limit: ^3.1.0 - pretty-format: ^29.5.0 + pretty-format: ^29.7.0 pure-rand: ^6.0.0 slash: ^3.0.0 stack-utils: ^2.0.3 - checksum: 44ff5d06acedae6de6c866e20e3b61f83e29ab94cf9f960826e7e667de49c12dd9ab9dffd7fa3b7d1f9688a8b5bfb1ebebadbea69d9ed0d3f66af4a0ff8c2b27 + checksum: 349437148924a5a109c9b8aad6d393a9591b4dac1918fc97d81b7fc515bc905af9918495055071404af1fab4e48e4b04ac3593477b1d5dcf48c4e71b527c70a7 languageName: node linkType: hard @@ -22486,21 +22888,20 @@ __metadata: languageName: node linkType: hard -"jest-cli@npm:^29.0.3, jest-cli@npm:^29.5.0": - version: 29.5.0 - resolution: "jest-cli@npm:29.5.0" +"jest-cli@npm:^29.0.3, jest-cli@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-cli@npm:29.7.0" dependencies: - "@jest/core": ^29.5.0 - "@jest/test-result": ^29.5.0 - "@jest/types": ^29.5.0 + "@jest/core": ^29.7.0 + "@jest/test-result": ^29.7.0 + "@jest/types": ^29.6.3 chalk: ^4.0.0 + create-jest: ^29.7.0 exit: ^0.1.2 - graceful-fs: ^4.2.9 import-local: ^3.0.2 - jest-config: ^29.5.0 - jest-util: ^29.5.0 - jest-validate: ^29.5.0 - prompts: ^2.0.1 + jest-config: ^29.7.0 + jest-util: ^29.7.0 + jest-validate: ^29.7.0 yargs: ^17.3.1 peerDependencies: node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0 @@ -22509,7 +22910,7 @@ __metadata: optional: true bin: jest: bin/jest.js - checksum: 39897bbbc0f0d8a6b975ab12fd13887eaa28d92e3dee9e0173a5cb913ae8cc2ae46e090d38c6d723e84d9d6724429cd08685b4e505fa447d31ca615630c7dbba + checksum: 664901277a3f5007ea4870632ed6e7889db9da35b2434e7cb488443e6bf5513889b344b7fddf15112135495b9875892b156faeb2d7391ddb9e2a849dcb7b6c36 languageName: node linkType: hard @@ -22550,30 +22951,30 @@ __metadata: languageName: node linkType: hard -"jest-config@npm:^29.5.0": - version: 29.5.0 - resolution: "jest-config@npm:29.5.0" +"jest-config@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-config@npm:29.7.0" dependencies: "@babel/core": ^7.11.6 - "@jest/test-sequencer": ^29.5.0 - "@jest/types": ^29.5.0 - babel-jest: ^29.5.0 + "@jest/test-sequencer": ^29.7.0 + "@jest/types": ^29.6.3 + babel-jest: ^29.7.0 chalk: ^4.0.0 ci-info: ^3.2.0 deepmerge: ^4.2.2 glob: ^7.1.3 graceful-fs: ^4.2.9 - jest-circus: ^29.5.0 - jest-environment-node: ^29.5.0 - jest-get-type: ^29.4.3 - jest-regex-util: ^29.4.3 - jest-resolve: ^29.5.0 - jest-runner: ^29.5.0 - jest-util: ^29.5.0 - jest-validate: ^29.5.0 + jest-circus: ^29.7.0 + jest-environment-node: ^29.7.0 + jest-get-type: ^29.6.3 + jest-regex-util: ^29.6.3 + jest-resolve: ^29.7.0 + jest-runner: ^29.7.0 + jest-util: ^29.7.0 + jest-validate: ^29.7.0 micromatch: ^4.0.4 parse-json: ^5.2.0 - pretty-format: ^29.5.0 + pretty-format: ^29.7.0 slash: ^3.0.0 strip-json-comments: ^3.1.1 peerDependencies: @@ -22584,7 +22985,7 @@ __metadata: optional: true ts-node: optional: true - checksum: c37c4dab964c54ab293d4e302d40b09687037ac9d00b88348ec42366970747feeaf265e12e3750cd3660b40c518d4031335eda11ac10b70b10e60797ebbd4b9c + checksum: 4cabf8f894c180cac80b7df1038912a3fc88f96f2622de33832f4b3314f83e22b08fb751da570c0ab2b7988f21604bdabade95e3c0c041068ac578c085cf7dff languageName: node linkType: hard @@ -22600,15 +23001,15 @@ __metadata: languageName: node linkType: hard -"jest-diff@npm:^29.5.0": - version: 29.5.0 - resolution: "jest-diff@npm:29.5.0" +"jest-diff@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-diff@npm:29.7.0" dependencies: chalk: ^4.0.0 - diff-sequences: ^29.4.3 - jest-get-type: ^29.4.3 - pretty-format: ^29.5.0 - checksum: dfd0f4a299b5d127779c76b40106c37854c89c3e0785098c717d52822d6620d227f6234c3a9291df204d619e799e3654159213bf93220f79c8e92a55475a3d39 + diff-sequences: ^29.6.3 + jest-get-type: ^29.6.3 + pretty-format: ^29.7.0 + checksum: 08e24a9dd43bfba1ef07a6374e5af138f53137b79ec3d5cc71a2303515335898888fa5409959172e1e05de966c9e714368d15e8994b0af7441f0721ee8e1bb77 languageName: node linkType: hard @@ -22621,12 +23022,12 @@ __metadata: languageName: node linkType: hard -"jest-docblock@npm:^29.4.3": - version: 29.4.3 - resolution: "jest-docblock@npm:29.4.3" +"jest-docblock@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-docblock@npm:29.7.0" dependencies: detect-newline: ^3.0.0 - checksum: e0e9df1485bb8926e5b33478cdf84b3387d9caf3658e7dc1eaa6dc34cb93dea0d2d74797f6e940f0233a88f3dadd60957f2288eb8f95506361f85b84bf8661df + checksum: 66390c3e9451f8d96c5da62f577a1dad701180cfa9b071c5025acab2f94d7a3efc2515cfa1654ebe707213241541ce9c5530232cdc8017c91ed64eea1bd3b192 languageName: node linkType: hard @@ -22643,16 +23044,16 @@ __metadata: languageName: node linkType: hard -"jest-each@npm:^29.5.0": - version: 29.5.0 - resolution: "jest-each@npm:29.5.0" +"jest-each@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-each@npm:29.7.0" dependencies: - "@jest/types": ^29.5.0 + "@jest/types": ^29.6.3 chalk: ^4.0.0 - jest-get-type: ^29.4.3 - jest-util: ^29.5.0 - pretty-format: ^29.5.0 - checksum: b8b297534d25834c5d4e31e4c687359787b1e402519e42664eb704cc3a12a7a91a017565a75acb02e8cf9afd3f4eef3350bd785276bec0900184641b765ff7a5 + jest-get-type: ^29.6.3 + jest-util: ^29.7.0 + pretty-format: ^29.7.0 + checksum: e88f99f0184000fc8813f2a0aa79e29deeb63700a3b9b7928b8a418d7d93cd24933608591dbbdea732b473eb2021c72991b5cc51a17966842841c6e28e6f691c languageName: node linkType: hard @@ -22685,17 +23086,17 @@ __metadata: languageName: node linkType: hard -"jest-environment-node@npm:^29.5.0": - version: 29.5.0 - resolution: "jest-environment-node@npm:29.5.0" +"jest-environment-node@npm:^29.6.4, jest-environment-node@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-environment-node@npm:29.7.0" dependencies: - "@jest/environment": ^29.5.0 - "@jest/fake-timers": ^29.5.0 - "@jest/types": ^29.5.0 + "@jest/environment": ^29.7.0 + "@jest/fake-timers": ^29.7.0 + "@jest/types": ^29.6.3 "@types/node": "*" - jest-mock: ^29.5.0 - jest-util: ^29.5.0 - checksum: 57981911cc20a4219b0da9e22b2e3c9f31b505e43f78e61c899e3227ded455ce1a3a9483842c69cfa4532f02cfb536ae0995bf245f9211608edacfc1e478d411 + jest-mock: ^29.7.0 + jest-util: ^29.7.0 + checksum: 501a9966292cbe0ca3f40057a37587cb6def25e1e0c5e39ac6c650fe78d3c70a2428304341d084ac0cced5041483acef41c477abac47e9a290d5545fd2f15646 languageName: node linkType: hard @@ -22706,10 +23107,10 @@ __metadata: languageName: node linkType: hard -"jest-get-type@npm:^29.4.3": - version: 29.4.3 - resolution: "jest-get-type@npm:29.4.3" - checksum: 6ac7f2dde1c65e292e4355b6c63b3a4897d7e92cb4c8afcf6d397f2682f8080e094c8b0b68205a74d269882ec06bf696a9de6cd3e1b7333531e5ed7b112605ce +"jest-get-type@npm:^29.6.3": + version: 29.6.3 + resolution: "jest-get-type@npm:29.6.3" + checksum: 88ac9102d4679d768accae29f1e75f592b760b44277df288ad76ce5bf038c3f5ce3719dea8aa0f035dac30e9eb034b848ce716b9183ad7cc222d029f03e92205 languageName: node linkType: hard @@ -22737,26 +23138,26 @@ __metadata: languageName: node linkType: hard -"jest-haste-map@npm:^29.5.0, jest-haste-map@npm:^29.6.2": - version: 29.6.2 - resolution: "jest-haste-map@npm:29.6.2" +"jest-haste-map@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-haste-map@npm:29.7.0" dependencies: - "@jest/types": ^29.6.1 + "@jest/types": ^29.6.3 "@types/graceful-fs": ^4.1.3 "@types/node": "*" anymatch: ^3.0.3 fb-watchman: ^2.0.0 fsevents: ^2.3.2 graceful-fs: ^4.2.9 - jest-regex-util: ^29.4.3 - jest-util: ^29.6.2 - jest-worker: ^29.6.2 + jest-regex-util: ^29.6.3 + jest-util: ^29.7.0 + jest-worker: ^29.7.0 micromatch: ^4.0.4 walker: ^1.0.8 dependenciesMeta: fsevents: optional: true - checksum: 726233972030eb2e5bce6c9468e497310436b455c88b40e744bd053e20a6f3ff19aec340edcbd89537c629ed5cf8916506bc895d690cc39a0862c74dcd95b7b8 + checksum: c2c8f2d3e792a963940fbdfa563ce14ef9e14d4d86da645b96d3cd346b8d35c5ce0b992ee08593939b5f718cf0a1f5a90011a056548a1dbf58397d4356786f01 languageName: node linkType: hard @@ -22804,6 +23205,18 @@ __metadata: languageName: node linkType: hard +"jest-junit@npm:^16.0.0": + version: 16.0.0 + resolution: "jest-junit@npm:16.0.0" + dependencies: + mkdirp: ^1.0.4 + strip-ansi: ^6.0.1 + uuid: ^8.3.2 + xml: ^1.0.1 + checksum: 412aa4bfeec4254a9b34f417fda79107c7cbd295e56ffeb299ac9c977545910fbabe57c91c6cd1f12b700d4a1f60f79872b0075003f02da87d463e30fc2d9d78 + languageName: node + linkType: hard + "jest-leak-detector@npm:^27.5.1": version: 27.5.1 resolution: "jest-leak-detector@npm:27.5.1" @@ -22814,13 +23227,13 @@ __metadata: languageName: node linkType: hard -"jest-leak-detector@npm:^29.5.0": - version: 29.5.0 - resolution: "jest-leak-detector@npm:29.5.0" +"jest-leak-detector@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-leak-detector@npm:29.7.0" dependencies: - jest-get-type: ^29.4.3 - pretty-format: ^29.5.0 - checksum: 0fb845da7ac9cdfc9b3b2e35f6f623a41c547d7dc0103ceb0349013459d00de5870b5689a625e7e37f9644934b40e8f1dcdd5422d14d57470600350364676313 + jest-get-type: ^29.6.3 + pretty-format: ^29.7.0 + checksum: e3950e3ddd71e1d0c22924c51a300a1c2db6cf69ec1e51f95ccf424bcc070f78664813bef7aed4b16b96dfbdeea53fe358f8aeaaea84346ae15c3735758f1605 languageName: node linkType: hard @@ -22836,15 +23249,15 @@ __metadata: languageName: node linkType: hard -"jest-matcher-utils@npm:^29.5.0": - version: 29.5.0 - resolution: "jest-matcher-utils@npm:29.5.0" +"jest-matcher-utils@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-matcher-utils@npm:29.7.0" dependencies: chalk: ^4.0.0 - jest-diff: ^29.5.0 - jest-get-type: ^29.4.3 - pretty-format: ^29.5.0 - checksum: 1d3e8c746e484a58ce194e3aad152eff21fd0896e8b8bf3d4ab1a4e2cbfed95fb143646f4ad9fdf6e42212b9e8fc033268b58e011b044a9929df45485deb5ac9 + jest-diff: ^29.7.0 + jest-get-type: ^29.6.3 + pretty-format: ^29.7.0 + checksum: d7259e5f995d915e8a37a8fd494cb7d6af24cd2a287b200f831717ba0d015190375f9f5dc35393b8ba2aae9b2ebd60984635269c7f8cff7d85b077543b7744cd languageName: node linkType: hard @@ -22882,20 +23295,20 @@ __metadata: languageName: node linkType: hard -"jest-message-util@npm:^29.5.0": - version: 29.5.0 - resolution: "jest-message-util@npm:29.5.0" +"jest-message-util@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-message-util@npm:29.7.0" dependencies: "@babel/code-frame": ^7.12.13 - "@jest/types": ^29.5.0 + "@jest/types": ^29.6.3 "@types/stack-utils": ^2.0.0 chalk: ^4.0.0 graceful-fs: ^4.2.9 micromatch: ^4.0.4 - pretty-format: ^29.5.0 + pretty-format: ^29.7.0 slash: ^3.0.0 stack-utils: ^2.0.3 - checksum: daddece6bbf846eb6a2ab9be9f2446e54085bef4e5cecd13d2a538fa9c01cb89d38e564c6b74fd8e12d37ed9eface8a362240ae9f21d68b214590631e7a0d8bf + checksum: a9d025b1c6726a2ff17d54cc694de088b0489456c69106be6b615db7a51b7beb66788bea7a59991a019d924fbf20f67d085a445aedb9a4d6760363f4d7d09930 languageName: node linkType: hard @@ -22909,14 +23322,33 @@ __metadata: languageName: node linkType: hard -"jest-mock@npm:^29.5.0": - version: 29.5.0 - resolution: "jest-mock@npm:29.5.0" +"jest-mock@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-mock@npm:29.7.0" dependencies: - "@jest/types": ^29.5.0 + "@jest/types": ^29.6.3 "@types/node": "*" - jest-util: ^29.5.0 - checksum: 2a9cf07509948fa8608898c445f04fe4dd6e2049ff431e5531eee028c808d3ba3c67f226ac87b0cf383feaa1055776900d197c895e89783016886ac17a4ff10c + jest-util: ^29.7.0 + checksum: 81ba9b68689a60be1482212878973700347cb72833c5e5af09895882b9eb5c4e02843a1bbdf23f94c52d42708bab53a30c45a3482952c9eec173d1eaac5b86c5 + languageName: node + linkType: hard + +"jest-playwright-preset@npm:^4.0.0": + version: 4.0.0 + resolution: "jest-playwright-preset@npm:4.0.0" + dependencies: + expect-playwright: ^0.8.0 + jest-process-manager: ^0.4.0 + nyc: ^15.1.0 + playwright-core: ">=1.2.0" + rimraf: ^3.0.2 + uuid: ^8.3.2 + peerDependencies: + jest: ^29.3.1 + jest-circus: ^29.3.1 + jest-environment-node: ^29.3.1 + jest-runner: ^29.3.1 + checksum: bd59c166114c243c1e1506d5a6a11b583e280d0b6a8004022951b816919cd0aff45702ad802c966ea9dac722ddf6ad94e4c7d17cfbeb1fb657ac14053a24d47d languageName: node linkType: hard @@ -22957,6 +23389,24 @@ __metadata: languageName: node linkType: hard +"jest-process-manager@npm:^0.4.0": + version: 0.4.0 + resolution: "jest-process-manager@npm:0.4.0" + dependencies: + "@types/wait-on": ^5.2.0 + chalk: ^4.1.0 + cwd: ^0.10.0 + exit: ^0.1.2 + find-process: ^1.4.4 + prompts: ^2.4.1 + signal-exit: ^3.0.3 + spawnd: ^5.0.0 + tree-kill: ^1.2.2 + wait-on: ^7.0.0 + checksum: 7c31a2d08eeb801c8a9a29c4b129a173527472f167d2c7d4cda104bc9d711fb08919de0a96ba37a1564172bcec2219c41d9fc748900b1e1eb5f9e1736c23850b + languageName: node + linkType: hard + "jest-regex-util@npm:^27.5.1": version: 27.5.1 resolution: "jest-regex-util@npm:27.5.1" @@ -22971,10 +23421,10 @@ __metadata: languageName: node linkType: hard -"jest-regex-util@npm:^29.4.3": - version: 29.4.3 - resolution: "jest-regex-util@npm:29.4.3" - checksum: 96fc7fc28cd4dd73a63c13a526202c4bd8b351d4e5b68b1a2a2c88da3308c2a16e26feaa593083eb0bac38cca1aa9dd05025412e7de013ba963fb8e66af22b8a +"jest-regex-util@npm:^29.0.0, jest-regex-util@npm:^29.6.3": + version: 29.6.3 + resolution: "jest-regex-util@npm:29.6.3" + checksum: 0518beeb9bf1228261695e54f0feaad3606df26a19764bc19541e0fc6e2a3737191904607fb72f3f2ce85d9c16b28df79b7b1ec9443aa08c3ef0e9efda6f8f2a languageName: node linkType: hard @@ -22989,13 +23439,13 @@ __metadata: languageName: node linkType: hard -"jest-resolve-dependencies@npm:^29.5.0": - version: 29.5.0 - resolution: "jest-resolve-dependencies@npm:29.5.0" +"jest-resolve-dependencies@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-resolve-dependencies@npm:29.7.0" dependencies: - jest-regex-util: ^29.4.3 - jest-snapshot: ^29.5.0 - checksum: 479d2e5365d58fe23f2b87001e2e0adcbffe0147700e85abdec8f14b9703b0a55758c1929a9989e3f5d5e954fb88870ea4bfa04783523b664562fcf5f10b0edf + jest-regex-util: ^29.6.3 + jest-snapshot: ^29.7.0 + checksum: aeb75d8150aaae60ca2bb345a0d198f23496494677cd6aefa26fc005faf354061f073982175daaf32b4b9d86b26ca928586344516e3e6969aa614cb13b883984 languageName: node linkType: hard @@ -23017,20 +23467,20 @@ __metadata: languageName: node linkType: hard -"jest-resolve@npm:^29.5.0": - version: 29.5.0 - resolution: "jest-resolve@npm:29.5.0" +"jest-resolve@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-resolve@npm:29.7.0" dependencies: chalk: ^4.0.0 graceful-fs: ^4.2.9 - jest-haste-map: ^29.5.0 + jest-haste-map: ^29.7.0 jest-pnp-resolver: ^1.2.2 - jest-util: ^29.5.0 - jest-validate: ^29.5.0 + jest-util: ^29.7.0 + jest-validate: ^29.7.0 resolve: ^1.20.0 resolve.exports: ^2.0.0 slash: ^3.0.0 - checksum: 9a125f3cf323ceef512089339d35f3ee37f79fe16a831fb6a26773ea6a229b9e490d108fec7af334142e91845b5996de8e7cdd85a4d8d617078737d804e29c8f + checksum: 0ca218e10731aa17920526ec39deaec59ab9b966237905ffc4545444481112cd422f01581230eceb7e82d86f44a543d520a71391ec66e1b4ef1a578bd5c73487 languageName: node linkType: hard @@ -23063,32 +23513,32 @@ __metadata: languageName: node linkType: hard -"jest-runner@npm:^29.5.0": - version: 29.5.0 - resolution: "jest-runner@npm:29.5.0" +"jest-runner@npm:^29.6.4, jest-runner@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-runner@npm:29.7.0" dependencies: - "@jest/console": ^29.5.0 - "@jest/environment": ^29.5.0 - "@jest/test-result": ^29.5.0 - "@jest/transform": ^29.5.0 - "@jest/types": ^29.5.0 + "@jest/console": ^29.7.0 + "@jest/environment": ^29.7.0 + "@jest/test-result": ^29.7.0 + "@jest/transform": ^29.7.0 + "@jest/types": ^29.6.3 "@types/node": "*" chalk: ^4.0.0 emittery: ^0.13.1 graceful-fs: ^4.2.9 - jest-docblock: ^29.4.3 - jest-environment-node: ^29.5.0 - jest-haste-map: ^29.5.0 - jest-leak-detector: ^29.5.0 - jest-message-util: ^29.5.0 - jest-resolve: ^29.5.0 - jest-runtime: ^29.5.0 - jest-util: ^29.5.0 - jest-watcher: ^29.5.0 - jest-worker: ^29.5.0 + jest-docblock: ^29.7.0 + jest-environment-node: ^29.7.0 + jest-haste-map: ^29.7.0 + jest-leak-detector: ^29.7.0 + jest-message-util: ^29.7.0 + jest-resolve: ^29.7.0 + jest-runtime: ^29.7.0 + jest-util: ^29.7.0 + jest-watcher: ^29.7.0 + jest-worker: ^29.7.0 p-limit: ^3.1.0 source-map-support: 0.5.13 - checksum: 437dea69c5dddca22032259787bac74790d5a171c9d804711415f31e5d1abfb64fa52f54a9015bb17a12b858fd0cf3f75ef6f3c9e94255a8596e179f707229c4 + checksum: f0405778ea64812bf9b5c50b598850d94ccf95d7ba21f090c64827b41decd680ee19fcbb494007cdd7f5d0d8906bfc9eceddd8fa583e753e736ecd462d4682fb languageName: node linkType: hard @@ -23122,33 +23572,42 @@ __metadata: languageName: node linkType: hard -"jest-runtime@npm:^29.5.0": - version: 29.5.0 - resolution: "jest-runtime@npm:29.5.0" +"jest-runtime@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-runtime@npm:29.7.0" dependencies: - "@jest/environment": ^29.5.0 - "@jest/fake-timers": ^29.5.0 - "@jest/globals": ^29.5.0 - "@jest/source-map": ^29.4.3 - "@jest/test-result": ^29.5.0 - "@jest/transform": ^29.5.0 - "@jest/types": ^29.5.0 + "@jest/environment": ^29.7.0 + "@jest/fake-timers": ^29.7.0 + "@jest/globals": ^29.7.0 + "@jest/source-map": ^29.6.3 + "@jest/test-result": ^29.7.0 + "@jest/transform": ^29.7.0 + "@jest/types": ^29.6.3 "@types/node": "*" chalk: ^4.0.0 cjs-module-lexer: ^1.0.0 collect-v8-coverage: ^1.0.0 glob: ^7.1.3 graceful-fs: ^4.2.9 - jest-haste-map: ^29.5.0 - jest-message-util: ^29.5.0 - jest-mock: ^29.5.0 - jest-regex-util: ^29.4.3 - jest-resolve: ^29.5.0 - jest-snapshot: ^29.5.0 - jest-util: ^29.5.0 + jest-haste-map: ^29.7.0 + jest-message-util: ^29.7.0 + jest-mock: ^29.7.0 + jest-regex-util: ^29.6.3 + jest-resolve: ^29.7.0 + jest-snapshot: ^29.7.0 + jest-util: ^29.7.0 slash: ^3.0.0 strip-bom: ^4.0.0 - checksum: 7af27bd9d54cf1c5735404cf8d76c6509d5610b1ec0106a21baa815c1aff15d774ce534ac2834bc440dccfe6348bae1885fd9a806f23a94ddafdc0f5bae4b09d + checksum: d19f113d013e80691e07047f68e1e3448ef024ff2c6b586ce4f90cd7d4c62a2cd1d460110491019719f3c59bfebe16f0e201ed005ef9f80e2cf798c374eed54e + languageName: node + linkType: hard + +"jest-serializer-html@npm:^7.1.0": + version: 7.1.0 + resolution: "jest-serializer-html@npm:7.1.0" + dependencies: + diffable-html: ^4.1.0 + checksum: c1f003e3dd600eb6f835fab8440f794f92fbeb0c1a245f630984883dda172c9103b95302a58b284a07cfbbcd944a3989808970d055e388d7abf9e24c0b1837fb languageName: node linkType: hard @@ -23192,34 +23651,31 @@ __metadata: languageName: node linkType: hard -"jest-snapshot@npm:^29.5.0": - version: 29.5.0 - resolution: "jest-snapshot@npm:29.5.0" +"jest-snapshot@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-snapshot@npm:29.7.0" dependencies: "@babel/core": ^7.11.6 "@babel/generator": ^7.7.2 "@babel/plugin-syntax-jsx": ^7.7.2 "@babel/plugin-syntax-typescript": ^7.7.2 - "@babel/traverse": ^7.7.2 "@babel/types": ^7.3.3 - "@jest/expect-utils": ^29.5.0 - "@jest/transform": ^29.5.0 - "@jest/types": ^29.5.0 - "@types/babel__traverse": ^7.0.6 - "@types/prettier": ^2.1.5 + "@jest/expect-utils": ^29.7.0 + "@jest/transform": ^29.7.0 + "@jest/types": ^29.6.3 babel-preset-current-node-syntax: ^1.0.0 chalk: ^4.0.0 - expect: ^29.5.0 + expect: ^29.7.0 graceful-fs: ^4.2.9 - jest-diff: ^29.5.0 - jest-get-type: ^29.4.3 - jest-matcher-utils: ^29.5.0 - jest-message-util: ^29.5.0 - jest-util: ^29.5.0 + jest-diff: ^29.7.0 + jest-get-type: ^29.6.3 + jest-matcher-utils: ^29.7.0 + jest-message-util: ^29.7.0 + jest-util: ^29.7.0 natural-compare: ^1.4.0 - pretty-format: ^29.5.0 - semver: ^7.3.5 - checksum: fe5df54122ed10eed625de6416a45bc4958d5062b018f05b152bf9785ab7f355dcd55e40cf5da63895bf8278f8d7b2bb4059b2cfbfdee18f509d455d37d8aa2b + pretty-format: ^29.7.0 + semver: ^7.5.3 + checksum: 86821c3ad0b6899521ce75ee1ae7b01b17e6dfeff9166f2cf17f012e0c5d8c798f30f9e4f8f7f5bed01ea7b55a6bc159f5eda778311162cbfa48785447c237ad languageName: node linkType: hard @@ -23262,17 +23718,17 @@ __metadata: languageName: node linkType: hard -"jest-util@npm:^29.0.0, jest-util@npm:^29.5.0, jest-util@npm:^29.6.2": - version: 29.6.2 - resolution: "jest-util@npm:29.6.2" +"jest-util@npm:^29.0.0, jest-util@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-util@npm:29.7.0" dependencies: - "@jest/types": ^29.6.1 + "@jest/types": ^29.6.3 "@types/node": "*" chalk: ^4.0.0 ci-info: ^3.2.0 graceful-fs: ^4.2.9 picomatch: ^2.2.3 - checksum: 8aedc0c80083d0cabd6c6c4f04dea1cbcac609fd7bc3b1fc05a3999291bd6e63dd52b0c806f9378d5cae28eff5a6191709a4987861001293f8d03e53984adca4 + checksum: 042ab4980f4ccd4d50226e01e5c7376a8556b472442ca6091a8f102488c0f22e6e8b89ea874111d2328a2080083bf3225c86f3788c52af0bd0345a00eb57a3ca languageName: node linkType: hard @@ -23290,17 +23746,17 @@ __metadata: languageName: node linkType: hard -"jest-validate@npm:^29.5.0": - version: 29.5.0 - resolution: "jest-validate@npm:29.5.0" +"jest-validate@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-validate@npm:29.7.0" dependencies: - "@jest/types": ^29.5.0 + "@jest/types": ^29.6.3 camelcase: ^6.2.0 chalk: ^4.0.0 - jest-get-type: ^29.4.3 + jest-get-type: ^29.6.3 leven: ^3.1.0 - pretty-format: ^29.5.0 - checksum: 43ca5df7cb75572a254ac3e92fbbe7be6b6a1be898cc1e887a45d55ea003f7a112717d814a674d37f9f18f52d8de40873c8f084f17664ae562736c78dd44c6a1 + pretty-format: ^29.7.0 + checksum: 191fcdc980f8a0de4dbdd879fa276435d00eb157a48683af7b3b1b98b0f7d9de7ffe12689b617779097ff1ed77601b9f7126b0871bba4f776e222c40f62e9dae languageName: node linkType: hard @@ -23321,6 +23777,23 @@ __metadata: languageName: node linkType: hard +"jest-watch-typeahead@npm:^2.0.0": + version: 2.2.2 + resolution: "jest-watch-typeahead@npm:2.2.2" + dependencies: + ansi-escapes: ^6.0.0 + chalk: ^5.2.0 + jest-regex-util: ^29.0.0 + jest-watcher: ^29.0.0 + slash: ^5.0.0 + string-length: ^5.0.1 + strip-ansi: ^7.0.1 + peerDependencies: + jest: ^27.0.0 || ^28.0.0 || ^29.0.0 + checksum: 8685277ce1b96ec775882111ec55ce90a862cc57acb21ce94f8ac44a25f6fb34c7a7ce119e07b2d8ff5353a8d9e4f981cf96fa35532f71ddba6ca8fedc05bd8e + languageName: node + linkType: hard + "jest-watcher@npm:^27.5.1": version: 27.5.1 resolution: "jest-watcher@npm:27.5.1" @@ -23352,19 +23825,19 @@ __metadata: languageName: node linkType: hard -"jest-watcher@npm:^29.5.0": - version: 29.5.0 - resolution: "jest-watcher@npm:29.5.0" +"jest-watcher@npm:^29.0.0, jest-watcher@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-watcher@npm:29.7.0" dependencies: - "@jest/test-result": ^29.5.0 - "@jest/types": ^29.5.0 + "@jest/test-result": ^29.7.0 + "@jest/types": ^29.6.3 "@types/node": "*" ansi-escapes: ^4.2.1 chalk: ^4.0.0 emittery: ^0.13.1 - jest-util: ^29.5.0 + jest-util: ^29.7.0 string-length: ^4.0.1 - checksum: 62303ac7bdc7e61a8b4239a239d018f7527739da2b2be6a81a7be25b74ca769f1c43ee8558ce8e72bb857245c46d6e03af331227ffb00a57280abb2a928aa776 + checksum: 67e6e7fe695416deff96b93a14a561a6db69389a0667e9489f24485bb85e5b54e12f3b2ba511ec0b777eca1e727235b073e3ebcdd473d68888650489f88df92f languageName: node linkType: hard @@ -23390,15 +23863,15 @@ __metadata: languageName: node linkType: hard -"jest-worker@npm:^29.5.0, jest-worker@npm:^29.6.2": - version: 29.6.2 - resolution: "jest-worker@npm:29.6.2" +"jest-worker@npm:^29.7.0": + version: 29.7.0 + resolution: "jest-worker@npm:29.7.0" dependencies: "@types/node": "*" - jest-util: ^29.6.2 + jest-util: ^29.7.0 merge-stream: ^2.0.0 supports-color: ^8.0.0 - checksum: 11035564534bf181ead80b25be138c2d42372bd5626151a3e705200d47a74fd9da3ca79f8a7b15806cdc325ad73c3d21d23acceeed99d50941589ff02915ed38 + checksum: 30fff60af49675273644d408b650fc2eb4b5dcafc5a0a455f238322a8f9d8a98d847baca9d51ff197b6747f54c7901daa2287799230b856a0f48287d131f8c13 languageName: node linkType: hard @@ -23439,14 +23912,14 @@ __metadata: languageName: node linkType: hard -"jest@npm:^29.3.1, jest@npm:^29.5.0": - version: 29.5.0 - resolution: "jest@npm:29.5.0" +"jest@npm:^29.3.1, jest@npm:^29.5.0, jest@npm:^29.6.4": + version: 29.7.0 + resolution: "jest@npm:29.7.0" dependencies: - "@jest/core": ^29.5.0 - "@jest/types": ^29.5.0 + "@jest/core": ^29.7.0 + "@jest/types": ^29.6.3 import-local: ^3.0.2 - jest-cli: ^29.5.0 + jest-cli: ^29.7.0 peerDependencies: node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0 peerDependenciesMeta: @@ -23454,7 +23927,7 @@ __metadata: optional: true bin: jest: bin/jest.js - checksum: a8ff2eb0f421623412236e23cbe67c638127fffde466cba9606bc0c0553b4c1e5cb116d7e0ef990b5d1712851652c8ee461373b578df50857fe635b94ff455d5 + checksum: 17ca8d67504a7dbb1998cf3c3077ec9031ba3eb512da8d71cb91bcabb2b8995c4e4b292b740cb9bf1cbff5ce3e110b3f7c777b0cefb6f41ab05445f248d0ee0b languageName: node linkType: hard @@ -23467,6 +23940,19 @@ __metadata: languageName: node linkType: hard +"joi@npm:^17.11.0, joi@npm:^17.3.0": + version: 17.13.3 + resolution: "joi@npm:17.13.3" + dependencies: + "@hapi/hoek": ^9.3.0 + "@hapi/topo": ^5.1.0 + "@sideway/address": ^4.1.5 + "@sideway/formula": ^3.0.1 + "@sideway/pinpoint": ^2.0.0 + checksum: 66ed454fee3d8e8da1ce21657fd2c7d565d98f3e539d2c5c028767e5f38cbd6297ce54df8312d1d094e62eb38f9452ebb43da4ce87321df66cf5e3f128cbc400 + languageName: node + linkType: hard + "js-beautify@npm:^1.14.0": version: 1.14.0 resolution: "js-beautify@npm:1.14.0" @@ -23718,6 +24204,13 @@ __metadata: languageName: node linkType: hard +"jsonc-parser@npm:^3.2.0": + version: 3.3.1 + resolution: "jsonc-parser@npm:3.3.1" + checksum: 81ef19d98d9c6bd6e4a37a95e2753c51c21705cbeffd895e177f4b542cca9cda5fda12fb942a71a2e824a9132cf119dc2e642e9286386055e1365b5478f49a47 + languageName: node + linkType: hard + "jsonfile@npm:^4.0.0": version: 4.0.0 resolution: "jsonfile@npm:4.0.0" @@ -23828,6 +24321,13 @@ __metadata: languageName: node linkType: hard +"kleur@npm:^4.0.3": + version: 4.1.5 + resolution: "kleur@npm:4.1.5" + checksum: 1dc476e32741acf0b1b5b0627ffd0d722e342c1b0da14de3e8ae97821327ca08f9fb944542fb3c126d90ac5f27f9d804edbe7c585bf7d12ef495d115e0f22c12 + languageName: node + linkType: hard + "klona@npm:^2.0.4, klona@npm:^2.0.5": version: 2.0.5 resolution: "klona@npm:2.0.5" @@ -23884,17 +24384,6 @@ __metadata: languageName: node linkType: hard -"lazy-universal-dotenv@npm:^4.0.0": - version: 4.0.0 - resolution: "lazy-universal-dotenv@npm:4.0.0" - dependencies: - app-root-dir: ^1.0.2 - dotenv: ^16.0.0 - dotenv-expand: ^10.0.0 - checksum: 196e0d701100144fbfe078d604a477573413ebf38dfe8d543748605e6a7074978508a3bb9f8135acd319db4fa947eef78836497163617d15a22163c59a00996b - languageName: node - linkType: hard - "leven@npm:^3.1.0": version: 3.1.0 resolution: "leven@npm:3.1.0" @@ -24142,6 +24631,13 @@ __metadata: languageName: node linkType: hard +"lodash.flattendeep@npm:^4.4.0": + version: 4.4.0 + resolution: "lodash.flattendeep@npm:4.4.0" + checksum: 8521c919acac3d4bcf0aaf040c1ca9cb35d6c617e2d72e9b4d51c9a58b4366622cd6077441a18be626c3f7b28227502b3bf042903d447b056ee7e0b11d45c722 + languageName: node + linkType: hard + "lodash.flow@npm:^3.3.0": version: 3.5.0 resolution: "lodash.flow@npm:3.5.0" @@ -24348,6 +24844,13 @@ __metadata: languageName: node linkType: hard +"longest-streak@npm:^3.0.0": + version: 3.1.0 + resolution: "longest-streak@npm:3.1.0" + checksum: d7f952ed004cbdb5c8bcfc4f7f5c3d65449e6c5a9e9be4505a656e3df5a57ee125f284286b4bf8ecea0c21a7b3bf2b8f9001ad506c319b9815ad6a63a47d0fd0 + languageName: node + linkType: hard + "loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.2.0, loose-envify@npm:^1.3.1, loose-envify@npm:^1.4.0": version: 1.4.0 resolution: "loose-envify@npm:1.4.0" @@ -24438,13 +24941,6 @@ __metadata: languageName: node linkType: hard -"lru-cache@npm:^9.1.1 || ^10.0.0": - version: 10.0.0 - resolution: "lru-cache@npm:10.0.0" - checksum: 18f101675fe283bc09cda0ef1e3cc83781aeb8373b439f086f758d1d91b28730950db785999cd060d3c825a8571c03073e8c14512b6655af2188d623031baf50 - languageName: node - linkType: hard - "lz-string@npm:^1.5.0": version: 1.5.0 resolution: "lz-string@npm:1.5.0" @@ -24582,12 +25078,19 @@ __metadata: languageName: node linkType: hard -"markdown-to-jsx@npm:7.3.2": - version: 7.3.2 - resolution: "markdown-to-jsx@npm:7.3.2" +"markdown-table@npm:^3.0.0": + version: 3.0.3 + resolution: "markdown-table@npm:3.0.3" + checksum: 8fcd3d9018311120fbb97115987f8b1665a603f3134c93fbecc5d1463380c8036f789e2a62c19432058829e594fff8db9ff81c88f83690b2f8ed6c074f8d9e10 + languageName: node + linkType: hard + +"markdown-to-jsx@npm:^7.4.5": + version: 7.4.7 + resolution: "markdown-to-jsx@npm:7.4.7" peerDependencies: react: ">= 0.14.0" - checksum: 8885c6343b71570b0a7ec16cd85a49b853a830234790ee7430e2517ea5d8d361ff138bd52147f650790f3e7b3a28a15c755fc16f8856dd01ddf09a6161782e06 + checksum: bb8a696c8a95dd67ac1eb44255f31cf17e60b6c2ff03bfcd51b5e28da17856c57d7a16da59fda7f3a4eedb01d7e92eeef57a10ff3abd5431e5c80059d4565016 languageName: node linkType: hard @@ -24627,6 +25130,143 @@ __metadata: languageName: node linkType: hard +"mdast-util-find-and-replace@npm:^2.0.0": + version: 2.2.2 + resolution: "mdast-util-find-and-replace@npm:2.2.2" + dependencies: + "@types/mdast": ^3.0.0 + escape-string-regexp: ^5.0.0 + unist-util-is: ^5.0.0 + unist-util-visit-parents: ^5.0.0 + checksum: b4ce463c43fe6e1c38a53a89703f755c84ab5437f49bff9a0ac751279733332ca11c85ed0262aa6c17481f77b555d26ca6d64e70d6814f5b8d12d34a3e53a60b + languageName: node + linkType: hard + +"mdast-util-from-markdown@npm:^1.0.0": + version: 1.3.1 + resolution: "mdast-util-from-markdown@npm:1.3.1" + dependencies: + "@types/mdast": ^3.0.0 + "@types/unist": ^2.0.0 + decode-named-character-reference: ^1.0.0 + mdast-util-to-string: ^3.1.0 + micromark: ^3.0.0 + micromark-util-decode-numeric-character-reference: ^1.0.0 + micromark-util-decode-string: ^1.0.0 + micromark-util-normalize-identifier: ^1.0.0 + micromark-util-symbol: ^1.0.0 + micromark-util-types: ^1.0.0 + unist-util-stringify-position: ^3.0.0 + uvu: ^0.5.0 + checksum: c2fac225167e248d394332a4ea39596e04cbde07d8cdb3889e91e48972c4c3462a02b39fda3855345d90231eb17a90ac6e082fb4f012a77c1d0ddfb9c7446940 + languageName: node + linkType: hard + +"mdast-util-gfm-autolink-literal@npm:^1.0.0": + version: 1.0.3 + resolution: "mdast-util-gfm-autolink-literal@npm:1.0.3" + dependencies: + "@types/mdast": ^3.0.0 + ccount: ^2.0.0 + mdast-util-find-and-replace: ^2.0.0 + micromark-util-character: ^1.0.0 + checksum: 1748a8727cfc533bac0c287d6e72d571d165bfa77ae0418be4828177a3ec73c02c3f2ee534d87eb75cbaffa00c0866853bbcc60ae2255babb8210f7636ec2ce2 + languageName: node + linkType: hard + +"mdast-util-gfm-footnote@npm:^1.0.0": + version: 1.0.2 + resolution: "mdast-util-gfm-footnote@npm:1.0.2" + dependencies: + "@types/mdast": ^3.0.0 + mdast-util-to-markdown: ^1.3.0 + micromark-util-normalize-identifier: ^1.0.0 + checksum: 2d77505f9377ed7e14472ef5e6b8366c3fec2cf5f936bb36f9fbe5b97ccb7cce0464d9313c236fa86fb844206fd585db05707e4fcfb755e4fc1864194845f1f6 + languageName: node + linkType: hard + +"mdast-util-gfm-strikethrough@npm:^1.0.0": + version: 1.0.3 + resolution: "mdast-util-gfm-strikethrough@npm:1.0.3" + dependencies: + "@types/mdast": ^3.0.0 + mdast-util-to-markdown: ^1.3.0 + checksum: 17003340ff1bba643ec4a59fd4370fc6a32885cab2d9750a508afa7225ea71449fb05acaef60faa89c6378b8bcfbd86a9d94b05f3c6651ff27a60e3ddefc2549 + languageName: node + linkType: hard + +"mdast-util-gfm-table@npm:^1.0.0": + version: 1.0.7 + resolution: "mdast-util-gfm-table@npm:1.0.7" + dependencies: + "@types/mdast": ^3.0.0 + markdown-table: ^3.0.0 + mdast-util-from-markdown: ^1.0.0 + mdast-util-to-markdown: ^1.3.0 + checksum: 8b8c401bb4162e53f072a2dff8efbca880fd78d55af30601c791315ab6722cb2918176e8585792469a0c530cebb9df9b4e7fede75fdc4d83df2839e238836692 + languageName: node + linkType: hard + +"mdast-util-gfm-task-list-item@npm:^1.0.0": + version: 1.0.2 + resolution: "mdast-util-gfm-task-list-item@npm:1.0.2" + dependencies: + "@types/mdast": ^3.0.0 + mdast-util-to-markdown: ^1.3.0 + checksum: c9b86037d6953b84f11fb2fc3aa23d5b8e14ca0dfcb0eb2fb289200e172bb9d5647bfceb4f86606dc6d935e8d58f6a458c04d3e55e87ff8513c7d4ade976200b + languageName: node + linkType: hard + +"mdast-util-gfm@npm:^2.0.0": + version: 2.0.2 + resolution: "mdast-util-gfm@npm:2.0.2" + dependencies: + mdast-util-from-markdown: ^1.0.0 + mdast-util-gfm-autolink-literal: ^1.0.0 + mdast-util-gfm-footnote: ^1.0.0 + mdast-util-gfm-strikethrough: ^1.0.0 + mdast-util-gfm-table: ^1.0.0 + mdast-util-gfm-task-list-item: ^1.0.0 + mdast-util-to-markdown: ^1.0.0 + checksum: 7078cb985255208bcbce94a121906417d38353c6b1a9acbe56ee8888010d3500608b5d51c16b0999ac63ca58848fb13012d55f26930ff6c6f3450f053d56514e + languageName: node + linkType: hard + +"mdast-util-phrasing@npm:^3.0.0": + version: 3.0.1 + resolution: "mdast-util-phrasing@npm:3.0.1" + dependencies: + "@types/mdast": ^3.0.0 + unist-util-is: ^5.0.0 + checksum: c5b616d9b1eb76a6b351d195d94318494722525a12a89d9c8a3b091af7db3dd1fc55d294f9d29266d8159a8267b0df4a7a133bda8a3909d5331c383e1e1ff328 + languageName: node + linkType: hard + +"mdast-util-to-markdown@npm:^1.0.0, mdast-util-to-markdown@npm:^1.3.0": + version: 1.5.0 + resolution: "mdast-util-to-markdown@npm:1.5.0" + dependencies: + "@types/mdast": ^3.0.0 + "@types/unist": ^2.0.0 + longest-streak: ^3.0.0 + mdast-util-phrasing: ^3.0.0 + mdast-util-to-string: ^3.0.0 + micromark-util-decode-string: ^1.0.0 + unist-util-visit: ^4.0.0 + zwitch: ^2.0.0 + checksum: 64338eb33e49bb0aea417591fd986f72fdd39205052563bb7ce9eb9ecc160824509bfacd740086a05af355c6d5c36353aafe95cab9e6927d674478757cee6259 + languageName: node + linkType: hard + +"mdast-util-to-string@npm:^3.0.0, mdast-util-to-string@npm:^3.1.0": + version: 3.2.0 + resolution: "mdast-util-to-string@npm:3.2.0" + dependencies: + "@types/mdast": ^3.0.0 + checksum: dc40b544d54339878ae2c9f2b3198c029e1e07291d2126bd00ca28272ee6616d0d2194eb1c9828a7c34d412a79a7e73b26512a734698d891c710a1e73db1e848 + languageName: node + linkType: hard + "mdn-data@npm:2.0.14": version: 2.0.14 resolution: "mdn-data@npm:2.0.14" @@ -24753,6 +25393,335 @@ __metadata: languageName: node linkType: hard +"micromark-core-commonmark@npm:^1.0.0, micromark-core-commonmark@npm:^1.0.1": + version: 1.1.0 + resolution: "micromark-core-commonmark@npm:1.1.0" + dependencies: + decode-named-character-reference: ^1.0.0 + micromark-factory-destination: ^1.0.0 + micromark-factory-label: ^1.0.0 + micromark-factory-space: ^1.0.0 + micromark-factory-title: ^1.0.0 + micromark-factory-whitespace: ^1.0.0 + micromark-util-character: ^1.0.0 + micromark-util-chunked: ^1.0.0 + micromark-util-classify-character: ^1.0.0 + micromark-util-html-tag-name: ^1.0.0 + micromark-util-normalize-identifier: ^1.0.0 + micromark-util-resolve-all: ^1.0.0 + micromark-util-subtokenize: ^1.0.0 + micromark-util-symbol: ^1.0.0 + micromark-util-types: ^1.0.1 + uvu: ^0.5.0 + checksum: c6dfedc95889cc73411cb222fc2330b9eda6d849c09c9fd9eb3cd3398af246167e9d3cdb0ae3ce9ae59dd34a14624c8330e380255d41279ad7350cf6c6be6c5b + languageName: node + linkType: hard + +"micromark-extension-gfm-autolink-literal@npm:^1.0.0": + version: 1.0.5 + resolution: "micromark-extension-gfm-autolink-literal@npm:1.0.5" + dependencies: + micromark-util-character: ^1.0.0 + micromark-util-sanitize-uri: ^1.0.0 + micromark-util-symbol: ^1.0.0 + micromark-util-types: ^1.0.0 + checksum: ec2f6bc4a3eb238c1b8be9744454ffbc2957e3d8a248697af5a26bb21479862300c0e40e0a92baf17c299ddf70d4bc4470d4eee112cd92322f87d81e45c2e83d + languageName: node + linkType: hard + +"micromark-extension-gfm-footnote@npm:^1.0.0": + version: 1.1.2 + resolution: "micromark-extension-gfm-footnote@npm:1.1.2" + dependencies: + micromark-core-commonmark: ^1.0.0 + micromark-factory-space: ^1.0.0 + micromark-util-character: ^1.0.0 + micromark-util-normalize-identifier: ^1.0.0 + micromark-util-sanitize-uri: ^1.0.0 + micromark-util-symbol: ^1.0.0 + micromark-util-types: ^1.0.0 + uvu: ^0.5.0 + checksum: c151a629ee1cd92363c018a50f926a002c944ac481ca72b3720b9529e9c20f1cbef98b0fefdcd2d594af37d0d9743673409cac488af0d2b194210fd16375dcb7 + languageName: node + linkType: hard + +"micromark-extension-gfm-strikethrough@npm:^1.0.0": + version: 1.0.7 + resolution: "micromark-extension-gfm-strikethrough@npm:1.0.7" + dependencies: + micromark-util-chunked: ^1.0.0 + micromark-util-classify-character: ^1.0.0 + micromark-util-resolve-all: ^1.0.0 + micromark-util-symbol: ^1.0.0 + micromark-util-types: ^1.0.0 + uvu: ^0.5.0 + checksum: 169e310a4408feade0df80180f60d48c5cc5b7070e5e75e0bbd914e9100273508162c4bb20b72d53081dc37f1ff5834b3afa137862576f763878552c03389811 + languageName: node + linkType: hard + +"micromark-extension-gfm-table@npm:^1.0.0": + version: 1.0.7 + resolution: "micromark-extension-gfm-table@npm:1.0.7" + dependencies: + micromark-factory-space: ^1.0.0 + micromark-util-character: ^1.0.0 + micromark-util-symbol: ^1.0.0 + micromark-util-types: ^1.0.0 + uvu: ^0.5.0 + checksum: 4853731285224e409d7e2c94c6ec849165093bff819e701221701aa7b7b34c17702c44f2f831e96b49dc27bb07e445b02b025561b68e62f5c3254415197e7af6 + languageName: node + linkType: hard + +"micromark-extension-gfm-tagfilter@npm:^1.0.0": + version: 1.0.2 + resolution: "micromark-extension-gfm-tagfilter@npm:1.0.2" + dependencies: + micromark-util-types: ^1.0.0 + checksum: 7d2441df51f890c86f8e7cf7d331a570b69c8105fa1c2fc5b737cb739502c16c8ee01cf35550a8a78f89497c5dfacc97cf82d55de6274e8320f3aec25e2b0dd2 + languageName: node + linkType: hard + +"micromark-extension-gfm-task-list-item@npm:^1.0.0": + version: 1.0.5 + resolution: "micromark-extension-gfm-task-list-item@npm:1.0.5" + dependencies: + micromark-factory-space: ^1.0.0 + micromark-util-character: ^1.0.0 + micromark-util-symbol: ^1.0.0 + micromark-util-types: ^1.0.0 + uvu: ^0.5.0 + checksum: 929f05343d272cffb8008899289f4cffe986ef98fc622ebbd1aa4ff11470e6b32ed3e1f18cd294adb69cabb961a400650078f6c12b322cc515b82b5068b31960 + languageName: node + linkType: hard + +"micromark-extension-gfm@npm:^2.0.0": + version: 2.0.3 + resolution: "micromark-extension-gfm@npm:2.0.3" + dependencies: + micromark-extension-gfm-autolink-literal: ^1.0.0 + micromark-extension-gfm-footnote: ^1.0.0 + micromark-extension-gfm-strikethrough: ^1.0.0 + micromark-extension-gfm-table: ^1.0.0 + micromark-extension-gfm-tagfilter: ^1.0.0 + micromark-extension-gfm-task-list-item: ^1.0.0 + micromark-util-combine-extensions: ^1.0.0 + micromark-util-types: ^1.0.0 + checksum: c4a917c16d7aa5d00d1767b5ce5f3b1a78c0de11dbd5c8f69d2545083568aa6bb13bd9d8e4c7fec5f4da10e7ed8344b15acffc843b33a615c17396a118bc2bc1 + languageName: node + linkType: hard + +"micromark-factory-destination@npm:^1.0.0": + version: 1.1.0 + resolution: "micromark-factory-destination@npm:1.1.0" + dependencies: + micromark-util-character: ^1.0.0 + micromark-util-symbol: ^1.0.0 + micromark-util-types: ^1.0.0 + checksum: 9e2b5fb5fedbf622b687e20d51eb3d56ae90c0e7ecc19b37bd5285ec392c1e56f6e21aa7cfcb3c01eda88df88fe528f3acb91a5f57d7f4cba310bc3cd7f824fa + languageName: node + linkType: hard + +"micromark-factory-label@npm:^1.0.0": + version: 1.1.0 + resolution: "micromark-factory-label@npm:1.1.0" + dependencies: + micromark-util-character: ^1.0.0 + micromark-util-symbol: ^1.0.0 + micromark-util-types: ^1.0.0 + uvu: ^0.5.0 + checksum: fcda48f1287d9b148c562c627418a2ab759cdeae9c8e017910a0cba94bb759a96611e1fc6df33182e97d28fbf191475237298983bb89ef07d5b02464b1ad28d5 + languageName: node + linkType: hard + +"micromark-factory-space@npm:^1.0.0": + version: 1.1.0 + resolution: "micromark-factory-space@npm:1.1.0" + dependencies: + micromark-util-character: ^1.0.0 + micromark-util-types: ^1.0.0 + checksum: b58435076b998a7e244259a4694eb83c78915581206b6e7fc07b34c6abd36a1726ade63df8972fbf6c8fa38eecb9074f4e17be8d53f942e3b3d23d1a0ecaa941 + languageName: node + linkType: hard + +"micromark-factory-title@npm:^1.0.0": + version: 1.1.0 + resolution: "micromark-factory-title@npm:1.1.0" + dependencies: + micromark-factory-space: ^1.0.0 + micromark-util-character: ^1.0.0 + micromark-util-symbol: ^1.0.0 + micromark-util-types: ^1.0.0 + checksum: 4432d3dbc828c81f483c5901b0c6591a85d65a9e33f7d96ba7c3ae821617a0b3237ff5faf53a9152d00aaf9afb3a9f185b205590f40ed754f1d9232e0e9157b1 + languageName: node + linkType: hard + +"micromark-factory-whitespace@npm:^1.0.0": + version: 1.1.0 + resolution: "micromark-factory-whitespace@npm:1.1.0" + dependencies: + micromark-factory-space: ^1.0.0 + micromark-util-character: ^1.0.0 + micromark-util-symbol: ^1.0.0 + micromark-util-types: ^1.0.0 + checksum: ef0fa682c7d593d85a514ee329809dee27d10bc2a2b65217d8ef81173e33b8e83c549049764b1ad851adfe0a204dec5450d9d20a4ca8598f6c94533a73f73fcd + languageName: node + linkType: hard + +"micromark-util-character@npm:^1.0.0": + version: 1.2.0 + resolution: "micromark-util-character@npm:1.2.0" + dependencies: + micromark-util-symbol: ^1.0.0 + micromark-util-types: ^1.0.0 + checksum: 089e79162a19b4a28731736246579ab7e9482ac93cd681c2bfca9983dcff659212ef158a66a5957e9d4b1dba957d1b87b565d85418a5b009f0294f1f07f2aaac + languageName: node + linkType: hard + +"micromark-util-chunked@npm:^1.0.0": + version: 1.1.0 + resolution: "micromark-util-chunked@npm:1.1.0" + dependencies: + micromark-util-symbol: ^1.0.0 + checksum: c435bde9110cb595e3c61b7f54c2dc28ee03e6a57fa0fc1e67e498ad8bac61ee5a7457a2b6a73022ddc585676ede4b912d28dcf57eb3bd6951e54015e14dc20b + languageName: node + linkType: hard + +"micromark-util-classify-character@npm:^1.0.0": + version: 1.1.0 + resolution: "micromark-util-classify-character@npm:1.1.0" + dependencies: + micromark-util-character: ^1.0.0 + micromark-util-symbol: ^1.0.0 + micromark-util-types: ^1.0.0 + checksum: 8499cb0bb1f7fb946f5896285fcca65cd742f66cd3e79ba7744792bd413ec46834f932a286de650349914d02e822946df3b55d03e6a8e1d245d1ddbd5102e5b0 + languageName: node + linkType: hard + +"micromark-util-combine-extensions@npm:^1.0.0": + version: 1.1.0 + resolution: "micromark-util-combine-extensions@npm:1.1.0" + dependencies: + micromark-util-chunked: ^1.0.0 + micromark-util-types: ^1.0.0 + checksum: ee78464f5d4b61ccb437850cd2d7da4d690b260bca4ca7a79c4bb70291b84f83988159e373b167181b6716cb197e309bc6e6c96a68cc3ba9d50c13652774aba9 + languageName: node + linkType: hard + +"micromark-util-decode-numeric-character-reference@npm:^1.0.0": + version: 1.1.0 + resolution: "micromark-util-decode-numeric-character-reference@npm:1.1.0" + dependencies: + micromark-util-symbol: ^1.0.0 + checksum: 4733fe75146e37611243f055fc6847137b66f0cde74d080e33bd26d0408c1d6f44cabc984063eee5968b133cb46855e729d555b9ff8d744652262b7b51feec73 + languageName: node + linkType: hard + +"micromark-util-decode-string@npm:^1.0.0": + version: 1.1.0 + resolution: "micromark-util-decode-string@npm:1.1.0" + dependencies: + decode-named-character-reference: ^1.0.0 + micromark-util-character: ^1.0.0 + micromark-util-decode-numeric-character-reference: ^1.0.0 + micromark-util-symbol: ^1.0.0 + checksum: f1625155db452f15aa472918499689ba086b9c49d1322a08b22bfbcabe918c61b230a3002c8bc3ea9b1f52ca7a9bb1c3dd43ccb548c7f5f8b16c24a1ae77a813 + languageName: node + linkType: hard + +"micromark-util-encode@npm:^1.0.0": + version: 1.1.0 + resolution: "micromark-util-encode@npm:1.1.0" + checksum: 4ef29d02b12336918cea6782fa87c8c578c67463925221d4e42183a706bde07f4b8b5f9a5e1c7ce8c73bb5a98b261acd3238fecd152e6dd1cdfa2d1ae11b60a0 + languageName: node + linkType: hard + +"micromark-util-html-tag-name@npm:^1.0.0": + version: 1.2.0 + resolution: "micromark-util-html-tag-name@npm:1.2.0" + checksum: ccf0fa99b5c58676dc5192c74665a3bfd1b536fafaf94723bd7f31f96979d589992df6fcf2862eba290ef18e6a8efb30ec8e1e910d9f3fc74f208871e9f84750 + languageName: node + linkType: hard + +"micromark-util-normalize-identifier@npm:^1.0.0": + version: 1.1.0 + resolution: "micromark-util-normalize-identifier@npm:1.1.0" + dependencies: + micromark-util-symbol: ^1.0.0 + checksum: 8655bea41ffa4333e03fc22462cb42d631bbef9c3c07b625fd852b7eb442a110f9d2e5902a42e65188d85498279569502bf92f3434a1180fc06f7c37edfbaee2 + languageName: node + linkType: hard + +"micromark-util-resolve-all@npm:^1.0.0": + version: 1.1.0 + resolution: "micromark-util-resolve-all@npm:1.1.0" + dependencies: + micromark-util-types: ^1.0.0 + checksum: 1ce6c0237cd3ca061e76fae6602cf95014e764a91be1b9f10d36cb0f21ca88f9a07de8d49ab8101efd0b140a4fbfda6a1efb72027ab3f4d5b54c9543271dc52c + languageName: node + linkType: hard + +"micromark-util-sanitize-uri@npm:^1.0.0": + version: 1.2.0 + resolution: "micromark-util-sanitize-uri@npm:1.2.0" + dependencies: + micromark-util-character: ^1.0.0 + micromark-util-encode: ^1.0.0 + micromark-util-symbol: ^1.0.0 + checksum: 6663f365c4fe3961d622a580f4a61e34867450697f6806f027f21cf63c92989494895fcebe2345d52e249fe58a35be56e223a9776d084c9287818b40c779acc1 + languageName: node + linkType: hard + +"micromark-util-subtokenize@npm:^1.0.0": + version: 1.1.0 + resolution: "micromark-util-subtokenize@npm:1.1.0" + dependencies: + micromark-util-chunked: ^1.0.0 + micromark-util-symbol: ^1.0.0 + micromark-util-types: ^1.0.0 + uvu: ^0.5.0 + checksum: 4a9d780c4d62910e196ea4fd886dc4079d8e424e5d625c0820016da0ed399a281daff39c50f9288045cc4bcd90ab47647e5396aba500f0853105d70dc8b1fc45 + languageName: node + linkType: hard + +"micromark-util-symbol@npm:^1.0.0": + version: 1.1.0 + resolution: "micromark-util-symbol@npm:1.1.0" + checksum: 02414a753b79f67ff3276b517eeac87913aea6c028f3e668a19ea0fc09d98aea9f93d6222a76ca783d20299af9e4b8e7c797fe516b766185dcc6e93290f11f88 + languageName: node + linkType: hard + +"micromark-util-types@npm:^1.0.0, micromark-util-types@npm:^1.0.1": + version: 1.1.0 + resolution: "micromark-util-types@npm:1.1.0" + checksum: b0ef2b4b9589f15aec2666690477a6a185536927ceb7aa55a0f46475852e012d75a1ab945187e5c7841969a842892164b15d58ff8316b8e0d6cc920cabd5ede7 + languageName: node + linkType: hard + +"micromark@npm:^3.0.0": + version: 3.2.0 + resolution: "micromark@npm:3.2.0" + dependencies: + "@types/debug": ^4.0.0 + debug: ^4.0.0 + decode-named-character-reference: ^1.0.0 + micromark-core-commonmark: ^1.0.1 + micromark-factory-space: ^1.0.0 + micromark-util-character: ^1.0.0 + micromark-util-chunked: ^1.0.0 + micromark-util-combine-extensions: ^1.0.0 + micromark-util-decode-numeric-character-reference: ^1.0.0 + micromark-util-encode: ^1.0.0 + micromark-util-normalize-identifier: ^1.0.0 + micromark-util-resolve-all: ^1.0.0 + micromark-util-sanitize-uri: ^1.0.0 + micromark-util-subtokenize: ^1.0.0 + micromark-util-symbol: ^1.0.0 + micromark-util-types: ^1.0.1 + uvu: ^0.5.0 + checksum: 56c15851ad3eb8301aede65603473443e50c92a54849cac1dadd57e4ec33ab03a0a77f3df03de47133e6e8f695dae83b759b514586193269e98c0bf319ecd5e4 + languageName: node + linkType: hard + "micromatch@npm:4.0.5, micromatch@npm:^4.0.0, micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.5": version: 4.0.5 resolution: "micromatch@npm:4.0.5" @@ -24983,13 +25952,6 @@ __metadata: languageName: node linkType: hard -"minipass@npm:^5.0.0 || ^6.0.2 || ^7.0.0": - version: 7.0.2 - resolution: "minipass@npm:7.0.2" - checksum: 46776de732eb7cef2c7404a15fb28c41f5c54a22be50d47b03c605bf21f5c18d61a173c0a20b49a97e7a65f78d887245066410642551e45fffe04e9ac9e325bc - languageName: node - linkType: hard - "minizlib@npm:^2.1.1, minizlib@npm:^2.1.2": version: 2.1.2 resolution: "minizlib@npm:2.1.2" @@ -25153,7 +26115,7 @@ __metadata: languageName: node linkType: hard -"mri@npm:^1.2.0": +"mri@npm:^1.1.0, mri@npm:^1.2.0": version: 1.2.0 resolution: "mri@npm:1.2.0" checksum: 83f515abbcff60150873e424894a2f65d68037e5a7fcde8a9e2b285ee9c13ac581b63cfc1e6826c4732de3aeb84902f7c1e16b7aff46cd3f897a0f757a894e85 @@ -25437,6 +26399,15 @@ __metadata: languageName: node linkType: hard +"node-preload@npm:^0.2.1": + version: 0.2.1 + resolution: "node-preload@npm:0.2.1" + dependencies: + process-on-spawn: ^1.0.0 + checksum: 4586f91ac7417b33accce0ac629fb60f642d0c8d212b3c536dc3dda37fe54f8a3b858273380e1036e41a65d85470332c358315d2288e6584260d620fb4b00fb3 + languageName: node + linkType: hard + "node-releases@npm:^2.0.3": version: 2.0.4 resolution: "node-releases@npm:2.0.4" @@ -25594,6 +26565,43 @@ __metadata: languageName: node linkType: hard +"nyc@npm:^15.1.0": + version: 15.1.0 + resolution: "nyc@npm:15.1.0" + dependencies: + "@istanbuljs/load-nyc-config": ^1.0.0 + "@istanbuljs/schema": ^0.1.2 + caching-transform: ^4.0.0 + convert-source-map: ^1.7.0 + decamelize: ^1.2.0 + find-cache-dir: ^3.2.0 + find-up: ^4.1.0 + foreground-child: ^2.0.0 + get-package-type: ^0.1.0 + glob: ^7.1.6 + istanbul-lib-coverage: ^3.0.0 + istanbul-lib-hook: ^3.0.0 + istanbul-lib-instrument: ^4.0.0 + istanbul-lib-processinfo: ^2.0.2 + istanbul-lib-report: ^3.0.0 + istanbul-lib-source-maps: ^4.0.0 + istanbul-reports: ^3.0.2 + make-dir: ^3.0.0 + node-preload: ^0.2.1 + p-map: ^3.0.0 + process-on-spawn: ^1.0.0 + resolve-from: ^5.0.0 + rimraf: ^3.0.0 + signal-exit: ^3.0.2 + spawn-wrap: ^2.0.0 + test-exclude: ^6.0.0 + yargs: ^15.0.2 + bin: + nyc: bin/nyc.js + checksum: 82a7031982df2fd6ab185c9f1b5d032b6221846268007b45b5773c6582e776ab33e96cd22b4231520345942fcef69b4339bd967675b8483f3fa255b56326faef + languageName: node + linkType: hard + "object-assign@npm:^4, object-assign@npm:^4.0.1, object-assign@npm:^4.1.0, object-assign@npm:^4.1.1": version: 4.1.1 resolution: "object-assign@npm:4.1.1" @@ -25742,6 +26750,13 @@ __metadata: languageName: node linkType: hard +"objectorarray@npm:^1.0.5": + version: 1.0.5 + resolution: "objectorarray@npm:1.0.5" + checksum: 8fd776aa495d113e217837f4adc1d53e63f656498237094d25f84c3e2c038b34b71d6fd85c4b60c7ae5f558790e5042426a400fae3eac35f297e11be12643a78 + languageName: node + linkType: hard + "obuf@npm:^1.0.0, obuf@npm:^1.1.2, obuf@npm:~1.1.2": version: 1.1.2 resolution: "obuf@npm:1.1.2" @@ -25801,7 +26816,7 @@ __metadata: languageName: node linkType: hard -"open@npm:^8.0.4, open@npm:^8.0.9, open@npm:^8.4.0": +"open@npm:^8.0.9, open@npm:^8.4.0": version: 8.4.2 resolution: "open@npm:8.4.2" dependencies: @@ -25895,6 +26910,13 @@ __metadata: languageName: node linkType: hard +"os-homedir@npm:^1.0.1": + version: 1.0.2 + resolution: "os-homedir@npm:1.0.2" + checksum: af609f5a7ab72de2f6ca9be6d6b91a599777afc122ac5cad47e126c1f67c176fe9b52516b9eeca1ff6ca0ab8587fe66208bc85e40a3940125f03cdb91408e9d2 + languageName: node + linkType: hard + "os-tmpdir@npm:~1.0.2": version: 1.0.2 resolution: "os-tmpdir@npm:1.0.2" @@ -25994,6 +27016,15 @@ __metadata: languageName: node linkType: hard +"p-map@npm:^3.0.0": + version: 3.0.0 + resolution: "p-map@npm:3.0.0" + dependencies: + aggregate-error: ^3.0.0 + checksum: 49b0fcbc66b1ef9cd379de1b4da07fa7a9f84b41509ea3f461c31903623aaba8a529d22f835e0d77c7cb9fcc16e4fae71e308fd40179aea514ba68f27032b5d5 + languageName: node + linkType: hard + "p-map@npm:^4.0.0": version: 4.0.0 resolution: "p-map@npm:4.0.0" @@ -26020,6 +27051,18 @@ __metadata: languageName: node linkType: hard +"package-hash@npm:^4.0.0": + version: 4.0.0 + resolution: "package-hash@npm:4.0.0" + dependencies: + graceful-fs: ^4.1.15 + hasha: ^5.0.0 + lodash.flattendeep: ^4.4.0 + release-zalgo: ^1.0.0 + checksum: 32c49e3a0e1c4a33b086a04cdd6d6e570aee019cb8402ec16476d9b3564a40e38f91ce1a1f9bc88b08f8ef2917a11e0b786c08140373bdf609ea90749031e6fc + languageName: node + linkType: hard + "package-json@npm:^6.3.0": version: 6.5.0 resolution: "package-json@npm:6.5.0" @@ -26046,13 +27089,6 @@ __metadata: languageName: node linkType: hard -"pako@npm:~0.2.0": - version: 0.2.9 - resolution: "pako@npm:0.2.9" - checksum: 055f9487cd57fbb78df84315873bbdd089ba286f3499daed47d2effdc6253e981f5db6898c23486de76d4a781559f890d643bd3a49f70f1b4a18019c98aa5125 - languageName: node - linkType: hard - "pako@npm:~1.0.2, pako@npm:~1.0.5": version: 1.0.11 resolution: "pako@npm:1.0.11" @@ -26265,16 +27301,6 @@ __metadata: languageName: node linkType: hard -"path-scurry@npm:^1.10.1": - version: 1.10.1 - resolution: "path-scurry@npm:1.10.1" - dependencies: - lru-cache: ^9.1.1 || ^10.0.0 - minipass: ^5.0.0 || ^6.0.2 || ^7.0.0 - checksum: e2557cff3a8fb8bc07afdd6ab163a92587884f9969b05bbbaf6fe7379348bfb09af9ed292af12ed32398b15fb443e81692047b786d1eeb6d898a51eb17ed7d90 - languageName: node - linkType: hard - "path-to-regexp@npm:0.1.7": version: 0.1.7 resolution: "path-to-regexp@npm:0.1.7" @@ -26305,6 +27331,13 @@ __metadata: languageName: node linkType: hard +"path-type@npm:^5.0.0": + version: 5.0.0 + resolution: "path-type@npm:5.0.0" + checksum: 15ec24050e8932c2c98d085b72cfa0d6b4eeb4cbde151a0a05726d8afae85784fc5544f733d8dfc68536587d5143d29c0bd793623fad03d7e61cc00067291cd5 + languageName: node + linkType: hard + "pathe@npm:^1.1.0": version: 1.1.1 resolution: "pathe@npm:1.1.1" @@ -26325,17 +27358,6 @@ __metadata: languageName: node linkType: hard -"peek-stream@npm:^1.1.0": - version: 1.1.3 - resolution: "peek-stream@npm:1.1.3" - dependencies: - buffer-from: ^1.0.0 - duplexify: ^3.5.0 - through2: ^2.0.3 - checksum: a0e09d6d1a8a01158a3334f20d6b1cdd91747eba24eb06a1d742eefb620385593121a76d4378cc81f77cdce6a66df0575a41041b1189c510254aec91878afc99 - languageName: node - linkType: hard - "pend@npm:~1.2.0": version: 1.2.0 resolution: "pend@npm:1.2.0" @@ -26462,7 +27484,7 @@ __metadata: languageName: node linkType: hard -"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1": +"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1": version: 2.3.1 resolution: "picomatch@npm:2.3.1" checksum: 050c865ce81119c4822c45d3c84f1ced46f93a0126febae20737bd05ca20589c564d6e9226977df859ed5e03dc73f02584a2b0faad36e896936238238b0446cf @@ -26528,15 +27550,6 @@ __metadata: languageName: node linkType: hard -"pkg-dir@npm:^5.0.0": - version: 5.0.0 - resolution: "pkg-dir@npm:5.0.0" - dependencies: - find-up: ^5.0.0 - checksum: b167bb8dac7bbf22b1d5e30ec223e6b064b84b63010c9d49384619a36734caf95ed23ad23d4f9bd975e8e8082b60a83395f43a89bb192df53a7c25a38ecb57d9 - languageName: node - linkType: hard - "pkg-up@npm:^3.1.0": version: 3.1.0 resolution: "pkg-up@npm:3.1.0" @@ -26553,23 +27566,27 @@ __metadata: languageName: node linkType: hard -"playwright-core@npm:1.33.0": - version: 1.33.0 - resolution: "playwright-core@npm:1.33.0" +"playwright-core@npm:1.45.3, playwright-core@npm:>=1.2.0": + version: 1.45.3 + resolution: "playwright-core@npm:1.45.3" bin: - playwright: cli.js - checksum: 5fb7bda06a8b73b56b85b5a0b8f711211dde57a375d9379289e22239b2de879c6d93c8fdc9ba44b932bf100914ab1ca1a55697ad88440fdd0a39101fc020b77f + playwright-core: cli.js + checksum: cecb58877b2c643403d7a72c24a7aa0fdd087a3c7f9a5ea5403851336ea831d8e304b1f159aacbbabd12e5c47eaac054333746c9e5431ec07b13d64dbf3b50ec languageName: node linkType: hard -"playwright@npm:^1.25.1": - version: 1.33.0 - resolution: "playwright@npm:1.33.0" +"playwright@npm:^1.14.0, playwright@npm:^1.25.1": + version: 1.45.3 + resolution: "playwright@npm:1.45.3" dependencies: - playwright-core: 1.33.0 + fsevents: 2.3.2 + playwright-core: 1.45.3 + dependenciesMeta: + fsevents: + optional: true bin: playwright: cli.js - checksum: fb3934c56ed749cf412ea35b82052f013872d7f7b7747ab7042580af473dfc1b038956a31c132ee8c0098f74150c75e2073e9c737fd4c1ed54700a23fffc079f + checksum: d9d23b155ccd001553214f710561b01e48eb409676102f8ab94c0b4aa5ac5f398becc1a96528b0554944e07e34189503d891913e0e0a4aa58ad36b9c08747983 languageName: node linkType: hard @@ -28005,21 +29022,14 @@ __metadata: languageName: node linkType: hard -"pretty-format@npm:^29.0.0, pretty-format@npm:^29.5.0": - version: 29.5.0 - resolution: "pretty-format@npm:29.5.0" +"pretty-format@npm:^29.0.0, pretty-format@npm:^29.7.0": + version: 29.7.0 + resolution: "pretty-format@npm:29.7.0" dependencies: - "@jest/schemas": ^29.4.3 + "@jest/schemas": ^29.6.3 ansi-styles: ^5.0.0 react-is: ^18.0.0 - checksum: 4065356b558e6db25b4d41a01efb386935a6c06a0c9c104ef5ce59f2f476b8210edb8b3949b386e60ada0a6dc5ebcb2e6ccddc8c64dfd1a9943c3c3a9e7eaf89 - languageName: node - linkType: hard - -"pretty-hrtime@npm:^1.0.3": - version: 1.0.3 - resolution: "pretty-hrtime@npm:1.0.3" - checksum: bae0e6832fe13c3de43d1a3d43df52bf6090499d74dc65a17f5552cb1a94f1f8019a23284ddf988c3c408a09678d743901e1d8f5b7a71bec31eeeac445bef371 + checksum: 032c1602383e71e9c0c02a01bbd25d6759d60e9c7cf21937dde8357aa753da348fcec5def5d1002c9678a8524d5fe099ad98861286550ef44de8808cc61e43b6 languageName: node linkType: hard @@ -28037,6 +29047,15 @@ __metadata: languageName: node linkType: hard +"process-on-spawn@npm:^1.0.0": + version: 1.0.0 + resolution: "process-on-spawn@npm:1.0.0" + dependencies: + fromentries: ^1.2.0 + checksum: 597769e3db6a8e2cb1cd64a952bbc150220588debac31c7cf1a9f620ce981e25583d8d70848d8a14953577608512984a8808c3be77e09af8ebdcdc14ec23a295 + languageName: node + linkType: hard + "process@npm:^0.11.10, process@npm:~0.11.0": version: 0.11.10 resolution: "process@npm:0.11.10" @@ -28105,7 +29124,7 @@ __metadata: languageName: node linkType: hard -"prompts@npm:^2.0.1, prompts@npm:^2.4.0, prompts@npm:^2.4.2": +"prompts@npm:^2.0.1, prompts@npm:^2.4.0, prompts@npm:^2.4.1, prompts@npm:^2.4.2": version: 2.4.2 resolution: "prompts@npm:2.4.2" dependencies: @@ -28237,16 +29256,6 @@ __metadata: languageName: node linkType: hard -"pump@npm:^2.0.0": - version: 2.0.1 - resolution: "pump@npm:2.0.1" - dependencies: - end-of-stream: ^1.1.0 - once: ^1.3.1 - checksum: e9f26a17be00810bff37ad0171edb35f58b242487b0444f92fb7d78bc7d61442fa9b9c5bd93a43fd8fd8ddd3cc75f1221f5e04c790f42907e5baab7cf5e2b931 - languageName: node - linkType: hard - "pump@npm:^3.0.0": version: 3.0.0 resolution: "pump@npm:3.0.0" @@ -28257,17 +29266,6 @@ __metadata: languageName: node linkType: hard -"pumpify@npm:^1.3.3": - version: 1.5.1 - resolution: "pumpify@npm:1.5.1" - dependencies: - duplexify: ^3.6.0 - inherits: ^2.0.3 - pump: ^2.0.0 - checksum: 26ca412ec8d665bd0d5e185c1b8f627728eff603440d75d22a58e421e3c66eaf86ec6fc6a6efc54808ecef65979279fa8e99b109a23ec1fa8d79f37e6978c9bd - languageName: node - linkType: hard - "punycode@npm:^1.3.2, punycode@npm:^1.4.1": version: 1.4.1 resolution: "punycode@npm:1.4.1" @@ -28344,7 +29342,7 @@ __metadata: languageName: node linkType: hard -"qs@npm:^6.10.0, qs@npm:^6.11.0": +"qs@npm:^6.11.0": version: 6.11.1 resolution: "qs@npm:6.11.1" dependencies: @@ -28420,13 +29418,6 @@ __metadata: languageName: node linkType: hard -"ramda@npm:0.29.0": - version: 0.29.0 - resolution: "ramda@npm:0.29.0" - checksum: 9ab26c06eb7545cbb7eebcf75526d6ee2fcaae19e338f165b2bf32772121e7b28192d6664d1ba222ff76188ba26ab307342d66e805dbb02c860560adc4d5dd57 - languageName: node - linkType: hard - "ramda@npm:^0.25.0": version: 0.25.0 resolution: "ramda@npm:0.25.0" @@ -29378,7 +30369,7 @@ __metadata: languageName: node linkType: hard -"react-popper@npm:^2.2.4, react-popper@npm:^2.3.0": +"react-popper@npm:^2.2.4, react-popper@npm:^2.2.5, react-popper@npm:^2.3.0": version: 2.3.0 resolution: "react-popper@npm:2.3.0" dependencies: @@ -29818,6 +30809,21 @@ __metadata: languageName: node linkType: hard +"react-toastify@npm:^5.5.0": + version: 5.5.0 + resolution: "react-toastify@npm:5.5.0" + dependencies: + "@babel/runtime": ^7.4.2 + classnames: ^2.2.6 + prop-types: ^15.7.2 + react-transition-group: ^4 + peerDependencies: + react: ">=15.0.0" + react-dom: ">=15.0.0" + checksum: 9759c59371ad1ccf36ba5779bd6132061afd10bb30f2ea0038ddf2ab077a1957e7aa361c959f0f7656481734cb1b01f10d254c3f76cb6a2bd0f8c183414d78e2 + languageName: node + linkType: hard + "react-transition-group@npm:^2.9.0": version: 2.9.0 resolution: "react-transition-group@npm:2.9.0" @@ -29833,7 +30839,7 @@ __metadata: languageName: node linkType: hard -"react-transition-group@npm:^4.3.0": +"react-transition-group@npm:^4, react-transition-group@npm:^4.3.0": version: 4.4.5 resolution: "react-transition-group@npm:4.4.5" dependencies: @@ -29948,17 +30954,6 @@ __metadata: languageName: node linkType: hard -"read-pkg-up@npm:^7.0.1": - version: 7.0.1 - resolution: "read-pkg-up@npm:7.0.1" - dependencies: - find-up: ^4.1.0 - read-pkg: ^5.2.0 - type-fest: ^0.8.1 - checksum: e4e93ce70e5905b490ca8f883eb9e48b5d3cebc6cd4527c25a0d8f3ae2903bd4121c5ab9c5a3e217ada0141098eeb661313c86fa008524b089b8ed0b7f165e44 - languageName: node - linkType: hard - "read-pkg@npm:^5.2.0": version: 5.2.0 resolution: "read-pkg@npm:5.2.0" @@ -29994,7 +30989,7 @@ __metadata: languageName: node linkType: hard -"readable-stream@npm:^2.0.0, readable-stream@npm:^2.0.1, readable-stream@npm:^2.0.2, readable-stream@npm:^2.0.6, readable-stream@npm:^2.2.2, readable-stream@npm:~2.3.6": +"readable-stream@npm:^2.0.1, readable-stream@npm:^2.0.2, readable-stream@npm:^2.0.6, readable-stream@npm:^2.2.2, readable-stream@npm:~2.3.6": version: 2.3.8 resolution: "readable-stream@npm:2.3.8" dependencies: @@ -30323,6 +31318,27 @@ __metadata: languageName: node linkType: hard +"release-zalgo@npm:^1.0.0": + version: 1.0.0 + resolution: "release-zalgo@npm:1.0.0" + dependencies: + es6-error: ^4.0.1 + checksum: b59849dc310f6c426f34e308c48ba83df3d034ddef75189951723bb2aac99d29d15f5e127edad951c4095fc9025aa582053907154d68fe0c5380cd6a75365e53 + languageName: node + linkType: hard + +"remark-gfm@npm:^3.0.1": + version: 3.0.1 + resolution: "remark-gfm@npm:3.0.1" + dependencies: + "@types/mdast": ^3.0.0 + mdast-util-gfm: ^2.0.0 + micromark-extension-gfm: ^2.0.0 + unified: ^10.0.0 + checksum: 02254f74d67b3419c2c9cf62d799ec35f6c6cd74db25c001361751991552a7ce86049a972107bff8122d85d15ae4a8d1a0618f3bc01a7df837af021ae9b2a04e + languageName: node + linkType: hard + "remixicon-react@npm:^1.0.0": version: 1.0.0 resolution: "remixicon-react@npm:1.0.0" @@ -30437,6 +31453,16 @@ __metadata: languageName: node linkType: hard +"resolve-dir@npm:^0.1.0": + version: 0.1.1 + resolution: "resolve-dir@npm:0.1.1" + dependencies: + expand-tilde: ^1.2.2 + global-modules: ^0.2.3 + checksum: cc3e1885938f8fe9656a6faa651e21730d369260e907b8dd7c847a4aa18db348ac08ee0dbf2d6f87e2ba08715fb109432ec773bbb31698381bd2a48c0ea66072 + languageName: node + linkType: hard + "resolve-dir@npm:^1.0.0, resolve-dir@npm:^1.0.1": version: 1.0.1 resolution: "resolve-dir@npm:1.0.1" @@ -30854,7 +31880,7 @@ __metadata: languageName: node linkType: hard -"rxjs@npm:^6.4.0, rxjs@npm:^6.6.0, rxjs@npm:^6.6.7": +"rxjs@npm:^6.4.0, rxjs@npm:^6.6.0, rxjs@npm:^6.6.3, rxjs@npm:^6.6.7": version: 6.6.7 resolution: "rxjs@npm:6.6.7" dependencies: @@ -30863,7 +31889,7 @@ __metadata: languageName: node linkType: hard -"rxjs@npm:^7.0.0, rxjs@npm:^7.2.0, rxjs@npm:^7.5.5": +"rxjs@npm:^7.0.0, rxjs@npm:^7.2.0, rxjs@npm:^7.5.5, rxjs@npm:^7.8.1": version: 7.8.1 resolution: "rxjs@npm:7.8.1" dependencies: @@ -30872,6 +31898,15 @@ __metadata: languageName: node linkType: hard +"sade@npm:^1.7.3": + version: 1.8.1 + resolution: "sade@npm:1.8.1" + dependencies: + mri: ^1.1.0 + checksum: 0756e5b04c51ccdc8221ebffd1548d0ce5a783a44a0fa9017a026659b97d632913e78f7dca59f2496aa996a0be0b0c322afd87ca72ccd909406f49dbffa0f45d + languageName: node + linkType: hard + "safe-array-concat@npm:^1.0.1": version: 1.0.1 resolution: "safe-array-concat@npm:1.0.1" @@ -31330,7 +32365,7 @@ __metadata: languageName: node linkType: hard -"shell-quote@npm:^1.4.2, shell-quote@npm:^1.6.1, shell-quote@npm:^1.7.3": +"shell-quote@npm:^1.4.2, shell-quote@npm:^1.6.1, shell-quote@npm:^1.7.3, shell-quote@npm:^1.8.1": version: 1.8.1 resolution: "shell-quote@npm:1.8.1" checksum: 5f01201f4ef504d4c6a9d0d283fa17075f6770bfbe4c5850b074974c68062f37929ca61700d95ad2ac8822e14e8c4b990ca0e6e9272e64befd74ce5e19f0736b @@ -31380,13 +32415,6 @@ __metadata: languageName: node linkType: hard -"signal-exit@npm:^4.0.1": - version: 4.0.2 - resolution: "signal-exit@npm:4.0.2" - checksum: 41f5928431cc6e91087bf0343db786a6313dd7c6fd7e551dbc141c95bb5fb26663444fd9df8ea47c5d7fc202f60aa7468c3162a9365cbb0615fc5e1b1328fe31 - languageName: node - linkType: hard - "simple-bin-help@npm:^1.8.0": version: 1.8.0 resolution: "simple-bin-help@npm:1.8.0" @@ -31460,6 +32488,13 @@ __metadata: languageName: node linkType: hard +"slash@npm:^5.0.0, slash@npm:^5.1.0": + version: 5.1.0 + resolution: "slash@npm:5.1.0" + checksum: 70434b34c50eb21b741d37d455110258c42d2cf18c01e6518aeb7299f3c6e626330c889c0c552b5ca2ef54a8f5a74213ab48895f0640717cacefeef6830a1ba4 + languageName: node + linkType: hard + "slice-ansi@npm:^3.0.0": version: 3.0.0 resolution: "slice-ansi@npm:3.0.0" @@ -31711,13 +32746,39 @@ __metadata: languageName: node linkType: hard -"spawn-command@npm:^0.0.2-1": +"spawn-command@npm:0.0.2, spawn-command@npm:^0.0.2-1": version: 0.0.2 resolution: "spawn-command@npm:0.0.2" checksum: e35c5d28177b4d461d33c88cc11f6f3a5079e2b132c11e1746453bbb7a0c0b8a634f07541a2a234fa4758239d88203b758def509161b651e81958894c0b4b64b languageName: node linkType: hard +"spawn-wrap@npm:^2.0.0": + version: 2.0.0 + resolution: "spawn-wrap@npm:2.0.0" + dependencies: + foreground-child: ^2.0.0 + is-windows: ^1.0.2 + make-dir: ^3.0.0 + rimraf: ^3.0.0 + signal-exit: ^3.0.2 + which: ^2.0.1 + checksum: 5a518e37620def6d516b86207482a4f76bcf3c37c57d8d886d9fa399b04e5668d11fd12817b178029b02002a5ebbd09010374307effa821ba39594042f0a2d96 + languageName: node + linkType: hard + +"spawnd@npm:^5.0.0": + version: 5.0.0 + resolution: "spawnd@npm:5.0.0" + dependencies: + exit: ^0.1.2 + signal-exit: ^3.0.3 + tree-kill: ^1.2.2 + wait-port: ^0.2.9 + checksum: 6a14b8b3c5f398c645e8dce46fe8f02eb2db3c31a43e9e978e904d46bddcfc723cc0c171d7f745d6b899dbe745c1a29ec035b1db0283993116ac6795d2eb0dea + languageName: node + linkType: hard + "spdx-correct@npm:^3.0.0": version: 3.1.1 resolution: "spdx-correct@npm:3.1.1" @@ -31888,22 +32949,43 @@ __metadata: languageName: node linkType: hard -"store2@npm:^2.14.2": - version: 2.14.2 - resolution: "store2@npm:2.14.2" - checksum: 6f270fc5bab99b63f45fcc7bd8b99c2714b4adf880f557ed7ffb5ed3987131251165bccde425a00928aaf044870aee79ddeef548576d093c68703ed2edec45d7 - languageName: node - linkType: hard - -"storybook@npm:^8.0.8": - version: 8.0.8 - resolution: "storybook@npm:8.0.8" +"storybook@npm:^8.2.6": + version: 8.2.6 + resolution: "storybook@npm:8.2.6" dependencies: - "@storybook/cli": 8.0.8 + "@babel/core": ^7.24.4 + "@babel/types": ^7.24.0 + "@storybook/codemod": 8.2.6 + "@storybook/core": 8.2.6 + "@types/semver": ^7.3.4 + "@yarnpkg/fslib": 2.10.3 + "@yarnpkg/libzip": 2.3.0 + chalk: ^4.1.0 + commander: ^6.2.1 + cross-spawn: ^7.0.3 + detect-indent: ^6.1.0 + envinfo: ^7.7.3 + execa: ^5.0.0 + fd-package-json: ^1.2.0 + find-up: ^5.0.0 + fs-extra: ^11.1.0 + giget: ^1.0.0 + globby: ^14.0.1 + jscodeshift: ^0.15.1 + leven: ^3.1.0 + ora: ^5.4.1 + prettier: ^3.1.1 + prompts: ^2.4.0 + semver: ^7.3.7 + strip-json-comments: ^3.0.1 + tempy: ^3.1.0 + tiny-invariant: ^1.3.1 + ts-dedent: ^2.0.0 bin: - sb: ./index.js - storybook: ./index.js - checksum: f9a3bb1eccd68c1de15d9ca0da05133466e1bb3f44e2b9730d6f03b1907f4390027c139d895dd89f8d1e3c5ec7814f65878a4079c8734664da1075e27095ea38 + getstorybook: ./bin/index.cjs + sb: ./bin/index.cjs + storybook: ./bin/index.cjs + checksum: ed268ede161348578b82df61b7cd757eaf1e13a8e9fc8c8e77955a3d2882fa5cee2fecbadc9a01d52dd438c9b7dd8744bb7af6a146439e0370f6e204e86273fd languageName: node linkType: hard @@ -31949,13 +33031,6 @@ __metadata: languageName: node linkType: hard -"stream-shift@npm:^1.0.0": - version: 1.0.1 - resolution: "stream-shift@npm:1.0.1" - checksum: 59b82b44b29ec3699b5519a49b3cedcc6db58c72fb40c04e005525dfdcab1c75c4e0c180b923c380f204bed78211b9bad8faecc7b93dece4d004c3f6ec75737b - languageName: node - linkType: hard - "stream-splicer@npm:^2.0.0": version: 2.0.1 resolution: "stream-splicer@npm:2.0.1" @@ -32030,17 +33105,6 @@ __metadata: languageName: node linkType: hard -"string-width-cjs@npm:string-width@^4.2.0, string-width@npm:^1.0.2 || 2 || 3 || 4, string-width@npm:^4.0.0, string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.2, string-width@npm:^4.2.3": - version: 4.2.3 - resolution: "string-width@npm:4.2.3" - dependencies: - emoji-regex: ^8.0.0 - is-fullwidth-code-point: ^3.0.0 - strip-ansi: ^6.0.1 - checksum: e52c10dc3fbfcd6c3a15f159f54a90024241d0f149cf8aed2982a2d801d2e64df0bf1dc351cf8e95c3319323f9f220c16e740b06faecd53e2462df1d2b5443fb - languageName: node - linkType: hard - "string-width@npm:^1.0.1": version: 1.0.2 resolution: "string-width@npm:1.0.2" @@ -32052,6 +33116,17 @@ __metadata: languageName: node linkType: hard +"string-width@npm:^1.0.2 || 2 || 3 || 4, string-width@npm:^4.0.0, string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.2, string-width@npm:^4.2.3": + version: 4.2.3 + resolution: "string-width@npm:4.2.3" + dependencies: + emoji-regex: ^8.0.0 + is-fullwidth-code-point: ^3.0.0 + strip-ansi: ^6.0.1 + checksum: e52c10dc3fbfcd6c3a15f159f54a90024241d0f149cf8aed2982a2d801d2e64df0bf1dc351cf8e95c3319323f9f220c16e740b06faecd53e2462df1d2b5443fb + languageName: node + linkType: hard + "string-width@npm:^3.0.0, string-width@npm:^3.1.0": version: 3.1.0 resolution: "string-width@npm:3.1.0" @@ -32063,7 +33138,7 @@ __metadata: languageName: node linkType: hard -"string-width@npm:^5.0.0, string-width@npm:^5.0.1, string-width@npm:^5.1.2": +"string-width@npm:^5.0.0, string-width@npm:^5.0.1": version: 5.1.2 resolution: "string-width@npm:5.1.2" dependencies: @@ -32167,15 +33242,6 @@ __metadata: languageName: node linkType: hard -"strip-ansi-cjs@npm:strip-ansi@^6.0.1, strip-ansi@npm:^6.0.0, strip-ansi@npm:^6.0.1": - version: 6.0.1 - resolution: "strip-ansi@npm:6.0.1" - dependencies: - ansi-regex: ^5.0.1 - checksum: f3cd25890aef3ba6e1a74e20896c21a46f482e93df4a06567cebf2b57edabb15133f1f94e57434e0a958d61186087b1008e89c94875d019910a213181a14fc8c - languageName: node - linkType: hard - "strip-ansi@npm:^3.0.0, strip-ansi@npm:^3.0.1": version: 3.0.1 resolution: "strip-ansi@npm:3.0.1" @@ -32194,6 +33260,15 @@ __metadata: languageName: node linkType: hard +"strip-ansi@npm:^6.0.0, strip-ansi@npm:^6.0.1": + version: 6.0.1 + resolution: "strip-ansi@npm:6.0.1" + dependencies: + ansi-regex: ^5.0.1 + checksum: f3cd25890aef3ba6e1a74e20896c21a46f482e93df4a06567cebf2b57edabb15133f1f94e57434e0a958d61186087b1008e89c94875d019910a213181a14fc8c + languageName: node + linkType: hard + "strip-ansi@npm:^7.0.1, strip-ansi@npm:^7.1.0": version: 7.1.0 resolution: "strip-ansi@npm:7.1.0" @@ -32628,31 +33703,6 @@ __metadata: languageName: node linkType: hard -"tar-fs@npm:^2.1.1": - version: 2.1.1 - resolution: "tar-fs@npm:2.1.1" - dependencies: - chownr: ^1.1.1 - mkdirp-classic: ^0.5.2 - pump: ^3.0.0 - tar-stream: ^2.1.4 - checksum: f5b9a70059f5b2969e65f037b4e4da2daf0fa762d3d232ffd96e819e3f94665dbbbe62f76f084f1acb4dbdcce16c6e4dac08d12ffc6d24b8d76720f4d9cf032d - languageName: node - linkType: hard - -"tar-stream@npm:^2.1.4": - version: 2.2.0 - resolution: "tar-stream@npm:2.2.0" - dependencies: - bl: ^4.0.3 - end-of-stream: ^1.4.1 - fs-constants: ^1.0.0 - inherits: ^2.0.3 - readable-stream: ^3.1.1 - checksum: 699831a8b97666ef50021c767f84924cfee21c142c2eb0e79c63254e140e6408d6d55a065a2992548e72b06de39237ef2b802b99e3ece93ca3904a37622a66f3 - languageName: node - linkType: hard - "tar@npm:^6.1.11, tar@npm:^6.1.13, tar@npm:^6.1.2": version: 6.2.1 resolution: "tar@npm:6.2.1" @@ -32699,6 +33749,13 @@ __metadata: languageName: node linkType: hard +"temp-dir@npm:^3.0.0": + version: 3.0.0 + resolution: "temp-dir@npm:3.0.0" + checksum: 577211e995d1d584dd60f1469351d45e8a5b4524e4a9e42d3bdd12cfde1d0bb8f5898311bef24e02aaafb69514c1feb58c7b4c33dcec7129da3b0861a4ca935b + languageName: node + linkType: hard + "temp@npm:^0.8.4": version: 0.8.4 resolution: "temp@npm:0.8.4" @@ -32720,16 +33777,15 @@ __metadata: languageName: node linkType: hard -"tempy@npm:^1.0.1": - version: 1.0.1 - resolution: "tempy@npm:1.0.1" +"tempy@npm:^3.1.0": + version: 3.1.0 + resolution: "tempy@npm:3.1.0" dependencies: - del: ^6.0.0 - is-stream: ^2.0.0 - temp-dir: ^2.0.0 - type-fest: ^0.16.0 - unique-string: ^2.0.0 - checksum: e77ca4440af18e42dc64d8903b7ed0be673455b76680ff94a7d7c6ee7c16f7604bdcdee3c39436342b1082c23eda010dbe48f6094e836e0bd53c8b1aa63e5b95 + is-stream: ^3.0.0 + temp-dir: ^3.0.0 + type-fest: ^2.12.2 + unique-string: ^3.0.0 + checksum: c4ee8ce7700c6d0652f0828f15f7628e599e57f34352a7fe82abf8f1ebc36f10a5f83861b6c60cce55c321d8f7861d1fecbd9fb4c00de55bf460390bea42f7da languageName: node linkType: hard @@ -32854,7 +33910,7 @@ __metadata: languageName: node linkType: hard -"through2@npm:^2.0.0, through2@npm:^2.0.3": +"through2@npm:^2.0.0": version: 2.0.5 resolution: "through2@npm:2.0.5" dependencies: @@ -33018,13 +34074,6 @@ __metadata: languageName: node linkType: hard -"tocbot@npm:^4.20.1": - version: 4.21.0 - resolution: "tocbot@npm:4.21.0" - checksum: 473686301b14f3ad275f5e39a0cbd1e7a4cb5856a98653d916ec4fb09fb6e6cd913f000bc8299fdd42511001d0b53bfce2d041ed949de2a13e4f3daa88931f56 - languageName: node - linkType: hard - "toggle-selection@npm:^1.0.6": version: 1.0.6 resolution: "toggle-selection@npm:1.0.6" @@ -33099,6 +34148,13 @@ __metadata: languageName: node linkType: hard +"trough@npm:^2.0.0": + version: 2.2.0 + resolution: "trough@npm:2.2.0" + checksum: 6097df63169aca1f9b08c263b1b501a9b878387f46e161dde93f6d0bba7febba93c95f876a293c5ea370f6cb03bcb687b2488c8955c3cfb66c2c0161ea8c00f6 + languageName: node + linkType: hard + "tryer@npm:^1.0.1": version: 1.0.1 resolution: "tryer@npm:1.0.1" @@ -33474,21 +34530,21 @@ __metadata: languageName: node linkType: hard -"type-fest@npm:^0.8.1": +"type-fest@npm:^0.8.0": version: 0.8.1 resolution: "type-fest@npm:0.8.1" checksum: d61c4b2eba24009033ae4500d7d818a94fd6d1b481a8111612ee141400d5f1db46f199c014766b9fa9b31a6a7374d96fc748c6d688a78a3ce5a33123839becb7 languageName: node linkType: hard -"type-fest@npm:^1.0.2": +"type-fest@npm:^1.0.1, type-fest@npm:^1.0.2": version: 1.4.0 resolution: "type-fest@npm:1.4.0" checksum: b011c3388665b097ae6a109a437a04d6f61d81b7357f74cbcb02246f2f5bd72b888ae33631b99871388122ba0a87f4ff1c94078e7119ff22c70e52c0ff828201 languageName: node linkType: hard -"type-fest@npm:^2.19.0, type-fest@npm:~2.19": +"type-fest@npm:^2.12.2, type-fest@npm:^2.19.0, type-fest@npm:~2.19": version: 2.19.0 resolution: "type-fest@npm:2.19.0" checksum: a4ef07ece297c9fba78fc1bd6d85dff4472fe043ede98bd4710d2615d15776902b595abf62bd78339ed6278f021235fb28a96361f8be86ed754f778973a0d278 @@ -33760,6 +34816,28 @@ __metadata: languageName: node linkType: hard +"unicorn-magic@npm:^0.1.0": + version: 0.1.0 + resolution: "unicorn-magic@npm:0.1.0" + checksum: 48c5882ca3378f380318c0b4eb1d73b7e3c5b728859b060276e0a490051d4180966beeb48962d850fd0c6816543bcdfc28629dcd030bb62a286a2ae2acb5acb6 + languageName: node + linkType: hard + +"unified@npm:^10.0.0": + version: 10.1.2 + resolution: "unified@npm:10.1.2" + dependencies: + "@types/unist": ^2.0.0 + bail: ^2.0.0 + extend: ^3.0.0 + is-buffer: ^2.0.0 + is-plain-obj: ^4.0.0 + trough: ^2.0.0 + vfile: ^5.0.0 + checksum: 053e7c65ede644607f87bd625a299e4b709869d2f76ec8138569e6e886903b6988b21cd9699e471eda42bee189527be0a9dac05936f1d069a5e65d0125d5d756 + languageName: node + linkType: hard + "unique-filename@npm:^2.0.0": version: 2.0.1 resolution: "unique-filename@npm:2.0.1" @@ -33787,6 +34865,24 @@ __metadata: languageName: node linkType: hard +"unique-string@npm:^3.0.0": + version: 3.0.0 + resolution: "unique-string@npm:3.0.0" + dependencies: + crypto-random-string: ^4.0.0 + checksum: 1a1e2e7d02eab1bb10f720475da735e1990c8a5ff34edd1a3b6bc31590cb4210b7a1233d779360cc622ce11c211e43afa1628dd658f35d3e6a89964b622940df + languageName: node + linkType: hard + +"unist-util-is@npm:^5.0.0": + version: 5.2.1 + resolution: "unist-util-is@npm:5.2.1" + dependencies: + "@types/unist": ^2.0.0 + checksum: ae76fdc3d35352cd92f1bedc3a0d407c3b9c42599a52ab9141fe89bdd786b51f0ec5a2ab68b93fb532e239457cae62f7e39eaa80229e1cb94875da2eafcbe5c4 + languageName: node + linkType: hard + "unist-util-is@npm:^6.0.0": version: 6.0.0 resolution: "unist-util-is@npm:6.0.0" @@ -33796,6 +34892,25 @@ __metadata: languageName: node linkType: hard +"unist-util-stringify-position@npm:^3.0.0": + version: 3.0.3 + resolution: "unist-util-stringify-position@npm:3.0.3" + dependencies: + "@types/unist": ^2.0.0 + checksum: dbd66c15183607ca942a2b1b7a9f6a5996f91c0d30cf8966fb88955a02349d9eefd3974e9010ee67e71175d784c5a9fea915b0aa0b0df99dcb921b95c4c9e124 + languageName: node + linkType: hard + +"unist-util-visit-parents@npm:^5.0.0, unist-util-visit-parents@npm:^5.1.1": + version: 5.1.3 + resolution: "unist-util-visit-parents@npm:5.1.3" + dependencies: + "@types/unist": ^2.0.0 + unist-util-is: ^5.0.0 + checksum: 8ecada5978994f846b64658cf13b4092cd78dea39e1ba2f5090a5de842ba4852712c02351a8ae95250c64f864635e7b02aedf3b4a093552bb30cf1bd160efbaa + languageName: node + linkType: hard + "unist-util-visit-parents@npm:^6.0.0": version: 6.0.1 resolution: "unist-util-visit-parents@npm:6.0.1" @@ -33806,6 +34921,17 @@ __metadata: languageName: node linkType: hard +"unist-util-visit@npm:^4.0.0": + version: 4.1.2 + resolution: "unist-util-visit@npm:4.1.2" + dependencies: + "@types/unist": ^2.0.0 + unist-util-is: ^5.0.0 + unist-util-visit-parents: ^5.1.1 + checksum: 95a34e3f7b5b2d4b68fd722b6229972099eb97b6df18913eda44a5c11df8b1e27efe7206dd7b88c4ed244a48c474a5b2e2629ab79558ff9eb936840295549cee + languageName: node + linkType: hard + "unist-util-visit@npm:^5.0.0": version: 5.0.0 resolution: "unist-util-visit@npm:5.0.0" @@ -34073,7 +35199,7 @@ __metadata: languageName: node linkType: hard -"util@npm:^0.12.4, util@npm:^0.12.5, util@npm:~0.12.0": +"util@npm:^0.12.4, util@npm:~0.12.0": version: 0.12.5 resolution: "util@npm:0.12.5" dependencies: @@ -34127,6 +35253,20 @@ __metadata: languageName: node linkType: hard +"uvu@npm:^0.5.0": + version: 0.5.6 + resolution: "uvu@npm:0.5.6" + dependencies: + dequal: ^2.0.0 + diff: ^5.0.0 + kleur: ^4.0.3 + sade: ^1.7.3 + bin: + uvu: bin.js + checksum: 09460a37975627de9fcad396e5078fb844d01aaf64a6399ebfcfd9e55f1c2037539b47611e8631f89be07656962af0cf48c334993db82b9ae9c3d25ce3862168 + languageName: node + linkType: hard + "v8-compile-cache-lib@npm:^3.0.1": version: 3.0.1 resolution: "v8-compile-cache-lib@npm:3.0.1" @@ -34212,6 +35352,28 @@ __metadata: languageName: node linkType: hard +"vfile-message@npm:^3.0.0": + version: 3.1.4 + resolution: "vfile-message@npm:3.1.4" + dependencies: + "@types/unist": ^2.0.0 + unist-util-stringify-position: ^3.0.0 + checksum: d0ee7da1973ad76513c274e7912adbed4d08d180eaa34e6bd40bc82459f4b7bc50fcaff41556135e3339995575eac5f6f709aba9332b80f775618ea4880a1367 + languageName: node + linkType: hard + +"vfile@npm:^5.0.0": + version: 5.3.7 + resolution: "vfile@npm:5.3.7" + dependencies: + "@types/unist": ^2.0.0 + is-buffer: ^2.0.0 + unist-util-stringify-position: ^3.0.0 + vfile-message: ^3.0.0 + checksum: 642cce703afc186dbe7cabf698dc954c70146e853491086f5da39e1ce850676fc96b169fcf7898aa3ff245e9313aeec40da93acd1e1fcc0c146dc4f6308b4ef9 + languageName: node + linkType: hard + "vite-plugin-svgr@npm:^4.2.0": version: 4.2.0 resolution: "vite-plugin-svgr@npm:4.2.0" @@ -34297,6 +35459,56 @@ __metadata: languageName: node linkType: hard +"wait-on@npm:^5.3.0": + version: 5.3.0 + resolution: "wait-on@npm:5.3.0" + dependencies: + axios: ^0.21.1 + joi: ^17.3.0 + lodash: ^4.17.21 + minimist: ^1.2.5 + rxjs: ^6.6.3 + bin: + wait-on: bin/wait-on + checksum: b7099104b7900ff6349f1196edff759076ab557a2053c017a587819f7a59f146ec9e35c99579acd31dcda371bfa72241ef28b8ccda902f0bf3fbf2d780a00ebf + languageName: node + linkType: hard + +"wait-on@npm:^7.0.0": + version: 7.2.0 + resolution: "wait-on@npm:7.2.0" + dependencies: + axios: ^1.6.1 + joi: ^17.11.0 + lodash: ^4.17.21 + minimist: ^1.2.8 + rxjs: ^7.8.1 + bin: + wait-on: bin/wait-on + checksum: 69ec1432bb4479363fdd71f2f3f501a98aa356a562781108a4a89ef8fdf1e3d5fd0c2fd56c4cc5902abbb662065f1f22d4e436a1e6fc9331ce8b575eb023325e + languageName: node + linkType: hard + +"wait-port@npm:^0.2.9": + version: 0.2.14 + resolution: "wait-port@npm:0.2.14" + dependencies: + chalk: ^2.4.2 + commander: ^3.0.2 + debug: ^4.1.1 + bin: + wait-port: bin/wait-port.js + checksum: 3a3d6c4b3d45fff2e284d314166cff17101ca6ffbfe9bb7c30c0602d89c2585ec82e37e7b07910a679dc1bde7e2cf8b1881fcd38ba9336a60b45bfe83adf8855 + languageName: node + linkType: hard + +"walk-up-path@npm:^3.0.1": + version: 3.0.1 + resolution: "walk-up-path@npm:3.0.1" + checksum: 9ffca02fe30fb65f6db531260582988c5e766f4c739cf86a6109380a7f791236b5d0b92b1dce37a6f73e22dca6bc9d93bf3700413e16251b2bd6bbd1ca2be316 + languageName: node + linkType: hard + "walker@npm:^1.0.7, walker@npm:^1.0.8": version: 1.0.8 resolution: "walker@npm:1.0.8" @@ -34332,7 +35544,7 @@ __metadata: languageName: node linkType: hard -"watchpack@npm:^2.2.0, watchpack@npm:^2.4.0": +"watchpack@npm:^2.4.0": version: 2.4.0 resolution: "watchpack@npm:2.4.0" dependencies: @@ -34739,7 +35951,7 @@ __metadata: languageName: node linkType: hard -"which@npm:^1.2.14, which@npm:^1.2.9, which@npm:^1.3.1": +"which@npm:^1.2.12, which@npm:^1.2.14, which@npm:^1.2.9, which@npm:^1.3.1": version: 1.3.1 resolution: "which@npm:1.3.1" dependencies: @@ -35005,17 +36217,6 @@ __metadata: languageName: node linkType: hard -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0, wrap-ansi@npm:^7.0.0": - version: 7.0.0 - resolution: "wrap-ansi@npm:7.0.0" - dependencies: - ansi-styles: ^4.0.0 - string-width: ^4.1.0 - strip-ansi: ^6.0.0 - checksum: a790b846fd4505de962ba728a21aaeda189b8ee1c7568ca5e817d85930e06ef8d1689d49dbf0e881e8ef84436af3a88bc49115c2e2788d841ff1b8b5b51a608b - languageName: node - linkType: hard - "wrap-ansi@npm:^5.1.0": version: 5.1.0 resolution: "wrap-ansi@npm:5.1.0" @@ -35038,6 +36239,17 @@ __metadata: languageName: node linkType: hard +"wrap-ansi@npm:^7.0.0": + version: 7.0.0 + resolution: "wrap-ansi@npm:7.0.0" + dependencies: + ansi-styles: ^4.0.0 + string-width: ^4.1.0 + strip-ansi: ^6.0.0 + checksum: a790b846fd4505de962ba728a21aaeda189b8ee1c7568ca5e817d85930e06ef8d1689d49dbf0e881e8ef84436af3a88bc49115c2e2788d841ff1b8b5b51a608b + languageName: node + linkType: hard + "wrap-ansi@npm:^8.0.1, wrap-ansi@npm:^8.1.0": version: 8.1.0 resolution: "wrap-ansi@npm:8.1.0" @@ -35206,6 +36418,13 @@ __metadata: languageName: node linkType: hard +"xml@npm:^1.0.1": + version: 1.0.1 + resolution: "xml@npm:1.0.1" + checksum: 11b5545ef3f8fec3fa29ce251f50ad7b6c97c103ed4d851306ec23366f5fa4699dd6a942262df52313a0cd1840ab26256da253c023bad3309d8ce46fe6020ca0 + languageName: node + linkType: hard + "xmlbuilder@npm:^10.0.0": version: 10.1.1 resolution: "xmlbuilder@npm:10.1.1" @@ -35352,7 +36571,7 @@ __metadata: languageName: node linkType: hard -"yargs@npm:^15.3.1": +"yargs@npm:^15.0.2, yargs@npm:^15.3.1": version: 15.4.1 resolution: "yargs@npm:15.4.1" dependencies: @@ -35386,7 +36605,7 @@ __metadata: languageName: node linkType: hard -"yargs@npm:^17.2.1, yargs@npm:^17.3.1": +"yargs@npm:^17.2.1, yargs@npm:^17.3.1, yargs@npm:^17.7.2": version: 17.7.2 resolution: "yargs@npm:17.7.2" dependencies: @@ -35460,3 +36679,10 @@ __metadata: checksum: ae89584fbe4256217e500a74183fd5870a2bed7e7b3234cd78fcbc0a1a82da8449596b2019105927069531b567ecf94425fb171abd6cedcbf517e52fdf438722 languageName: node linkType: hard + +"zwitch@npm:^2.0.0": + version: 2.0.4 + resolution: "zwitch@npm:2.0.4" + checksum: f22ec5fc2d5f02c423c93d35cdfa83573a3a3bd98c66b927c368ea4d0e7252a500df2a90a6b45522be536a96a73404393c958e945fdba95e6832c200791702b6 + languageName: node + linkType: hard diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/configurations/CommonConfig.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/configurations/CommonConfig.java index 72545773fb46..aedf383937d4 100644 --- a/app/server/appsmith-server/src/main/java/com/appsmith/server/configurations/CommonConfig.java +++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/configurations/CommonConfig.java @@ -1,5 +1,6 @@ package com.appsmith.server.configurations; +import com.appsmith.server.helpers.LoadShifter; import com.appsmith.util.JSONPrettyPrinter; import com.appsmith.util.SerializationUtils; import com.fasterxml.jackson.core.PrettyPrinter; @@ -19,7 +20,6 @@ import org.springframework.context.annotation.Configuration; import org.springframework.util.StringUtils; import reactor.core.scheduler.Scheduler; -import reactor.core.scheduler.Schedulers; import java.time.Instant; import java.util.ArrayList; @@ -34,7 +34,6 @@ @Configuration public class CommonConfig { - private static final String ELASTIC_THREAD_POOL_NAME = "appsmith-elastic-pool"; public static final Integer LATEST_INSTANCE_SCHEMA_VERSION = 2; @Setter(AccessLevel.NONE) @@ -77,11 +76,8 @@ public class CommonConfig { private static String adminEmailDomainHash; @Bean - public Scheduler scheduler() { - return Schedulers.newBoundedElastic( - Schedulers.DEFAULT_BOUNDED_ELASTIC_SIZE, - Schedulers.DEFAULT_BOUNDED_ELASTIC_QUEUESIZE, - ELASTIC_THREAD_POOL_NAME); + public Scheduler elasticScheduler() { + return LoadShifter.elasticScheduler; } @Bean diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/helpers/LoadShifter.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/helpers/LoadShifter.java new file mode 100644 index 000000000000..b1a9f4c9287a --- /dev/null +++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/helpers/LoadShifter.java @@ -0,0 +1,47 @@ +package com.appsmith.server.helpers; + +import lombok.extern.slf4j.Slf4j; +import reactor.core.publisher.Mono; +import reactor.core.scheduler.Scheduler; +import reactor.core.scheduler.Schedulers; + +/** + * This class is used configure the load shifts for the Monos. + * The schedulers which are configured in the CommonConfig class. + */ +@Slf4j +public class LoadShifter { + private static final String PARALLEL_THREAD_POOL_NAME = "appsmith-parallel-pool"; + private static final String ELASTIC_THREAD_POOL_NAME = "appsmith-elastic-pool"; + public static final Scheduler parallelScheduler = Schedulers.newParallel(PARALLEL_THREAD_POOL_NAME); + + public static final Scheduler elasticScheduler = Schedulers.newBoundedElastic( + Schedulers.DEFAULT_BOUNDED_ELASTIC_SIZE, + Schedulers.DEFAULT_BOUNDED_ELASTIC_QUEUESIZE, + ELASTIC_THREAD_POOL_NAME); + + /** + * This method is used to shift the subscription from the current thread to the elastic scheduler + * and then publish the result on the parallel scheduler. + * @param mono The mono to be shifted. + * This mono will be subscribed on the elastic scheduler and the result will be published on the parallel scheduler. + * @param message The message to be logged. + * @return The shifted mono. + * @param The type of the mono. + */ + public static Mono subscribeOnElasticPublishOnParallel(Mono mono, String message) { + return mono.subscribeOn(elasticScheduler).publishOn(parallelScheduler); + } + + /** + * This method is used to shift the subscription from the current thread to the elastic scheduler. + * @param mono The mono to be shifted. + * This mono will be subscribed on the elastic scheduler. + * @param message The message to be logged. + * @return The shifted mono. + * @param The type of the mono. + */ + public static Mono subscribeOnElastic(Mono mono, String message) { + return mono.subscribeOn(elasticScheduler); + } +} diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/helpers/ce/InstanceConfigHelperCEImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/helpers/ce/InstanceConfigHelperCEImpl.java index 5a1b02991634..b35035d4fb35 100644 --- a/app/server/appsmith-server/src/main/java/com/appsmith/server/helpers/ce/InstanceConfigHelperCEImpl.java +++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/helpers/ce/InstanceConfigHelperCEImpl.java @@ -9,6 +9,7 @@ import com.appsmith.server.dtos.ResponseDTO; import com.appsmith.server.exceptions.AppsmithError; import com.appsmith.server.exceptions.AppsmithException; +import com.appsmith.server.helpers.LoadShifter; import com.appsmith.server.helpers.NetworkUtils; import com.appsmith.server.helpers.RTSCaller; import com.appsmith.server.services.AnalyticsService; @@ -125,7 +126,7 @@ private void sendServerSetupEvent(String instanceId) { analyticsProperties, false); }) - .subscribeOn(commonConfig.scheduler()) + .subscribeOn(LoadShifter.elasticScheduler) .subscribe(); } diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/plugins/base/PluginServiceCEImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/plugins/base/PluginServiceCEImpl.java index ca2c8d500923..f29d56e980fc 100644 --- a/app/server/appsmith-server/src/main/java/com/appsmith/server/plugins/base/PluginServiceCEImpl.java +++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/plugins/base/PluginServiceCEImpl.java @@ -11,6 +11,7 @@ import com.appsmith.server.dtos.WorkspacePluginStatus; import com.appsmith.server.exceptions.AppsmithError; import com.appsmith.server.exceptions.AppsmithException; +import com.appsmith.server.helpers.LoadShifter; import com.appsmith.server.repositories.PluginRepository; import com.appsmith.server.services.AnalyticsService; import com.appsmith.server.services.BaseService; @@ -403,7 +404,13 @@ private Mono> getTemplates(Plugin plugin) { }) .cache(); - templateCache.put(pluginId, mono); + /* + * The method loadTemplatesFromPlugin is reads a file from the system, and this is a blocking process. + * Since, we need to keep the nioEventLoop thread pool free, we are shifting the subscription to elastic + * thread pool and then publishing the result on the parallel thread pool. + */ + templateCache.put( + pluginId, LoadShifter.subscribeOnElasticPublishOnParallel(mono, "loadTemplatesFromPlugin")); } return templateCache.get(pluginId); @@ -600,24 +607,32 @@ private JsonNode loadPluginResourceGivenPluginAsJsonNode(Plugin plugin, String r @Override public Mono> loadPluginResource(String pluginId, String resourcePath) { - return findById(pluginId).map(plugin -> { + return findById(pluginId).flatMap(plugin -> { if ("editor.json".equals(resourcePath)) { // UI config will be available if this plugin is sourced from the cloud if (plugin.getActionUiConfig() != null) { - return plugin.getActionUiConfig(); + return Mono.just(plugin.getActionUiConfig()); } // For UQI, use another format of loading the config if (UQI_DB_EDITOR_FORM.equals(plugin.getUiComponent())) { - return loadEditorPluginResourceUqi(plugin); + return Mono.just(loadEditorPluginResourceUqi(plugin)); } } if ("form.json".equals(resourcePath)) { // UI config will be available if this plugin is sourced from the cloud if (plugin.getDatasourceUiConfig() != null) { - return plugin.getDatasourceUiConfig(); + return Mono.just(plugin.getDatasourceUiConfig()); } } - return loadPluginResourceGivenPluginAsMap(plugin, resourcePath); + /* + * The method loadPluginResourceGivenPluginAsMap is reads a file from the system, and this is a blocking + * process. Since, we need to keep the nioEventLoop thread pool free, we are shifting the subscription to + * elastic thread pool and then publishing the result on the parallel thread pool. + */ + Mono> pluginResourceMono = + Mono.fromCallable(() -> loadPluginResourceGivenPluginAsMap(plugin, resourcePath)); + + return LoadShifter.subscribeOnElasticPublishOnParallel(pluginResourceMono, "pluginResourceMono"); }); } diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/ratelimiting/ce/RateLimitServiceCEImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/ratelimiting/ce/RateLimitServiceCEImpl.java index 49687bdef92a..174a58ff7911 100644 --- a/app/server/appsmith-server/src/main/java/com/appsmith/server/ratelimiting/ce/RateLimitServiceCEImpl.java +++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/ratelimiting/ce/RateLimitServiceCEImpl.java @@ -2,13 +2,12 @@ import com.appsmith.server.exceptions.AppsmithError; import com.appsmith.server.exceptions.AppsmithException; +import com.appsmith.server.helpers.LoadShifter; import com.appsmith.server.helpers.RedisUtils; import com.appsmith.server.ratelimiting.RateLimitConfig; import io.github.bucket4j.distributed.BucketProxy; import lombok.extern.slf4j.Slf4j; import reactor.core.publisher.Mono; -import reactor.core.scheduler.Scheduler; -import reactor.core.scheduler.Schedulers; import java.time.Duration; import java.util.Map; @@ -19,7 +18,6 @@ @Slf4j public class RateLimitServiceCEImpl implements RateLimitServiceCE { - private final Scheduler scheduler = Schedulers.boundedElastic(); private final Map apiBuckets; private final RateLimitConfig rateLimitConfig; // this number of tokens can later be customised per API in the configuration. @@ -58,7 +56,7 @@ public Mono tryIncreaseCounter(String apiIdentifier, String userIdentif }) // Since we are interacting with redis, we want to make sure that the operation is done on a separate // thread pool - .subscribeOn(scheduler); + .subscribeOn(LoadShifter.elasticScheduler); } @Override @@ -75,7 +73,7 @@ public Mono resetCounter(String apiIdentifier, String userIdentifier) { .then() // Since we are interacting with redis, we want to make sure that the operation is done on a separate // thread pool - .subscribeOn(scheduler); + .subscribeOn(LoadShifter.elasticScheduler); } /* **************************************************************************************************** */ @@ -112,7 +110,7 @@ public Mono blockEndpointForConnectionRequest( }) // Since we are interacting with redis, we want to make sure that the operation is done on a separate // thread pool - .subscribeOn(scheduler); + .subscribeOn(LoadShifter.elasticScheduler); } /* @@ -139,7 +137,7 @@ public Mono isEndpointBlockedForConnectionRequest(String apiIdentifier, }) // Since we are interacting with redis, we want to make sure that the operation is done on a separate // thread pool - .subscribeOn(scheduler); + .subscribeOn(LoadShifter.elasticScheduler); } private Mono sanitizeInput(String apiIdentifier, String userIdentifier) { @@ -156,6 +154,6 @@ private Mono sanitizeInput(String apiIdentifier, String userIdentifier) return Mono.just(true); }) - .subscribeOn(scheduler); + .subscribeOn(LoadShifter.elasticScheduler); } } diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/TenantServiceImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/TenantServiceImpl.java index fba38e745aad..53fdf6b1be7f 100644 --- a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/TenantServiceImpl.java +++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/TenantServiceImpl.java @@ -10,13 +10,11 @@ import jakarta.validation.Validator; import org.springframework.context.annotation.Lazy; import org.springframework.stereotype.Service; -import reactor.core.scheduler.Scheduler; @Service public class TenantServiceImpl extends TenantServiceCEImpl implements TenantService { public TenantServiceImpl( - Scheduler scheduler, Validator validator, TenantRepository repository, AnalyticsService analyticsService, diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/ce/ProductAlertServiceCEImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/ce/ProductAlertServiceCEImpl.java index f034595494ca..0cb04d57164a 100644 --- a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/ce/ProductAlertServiceCEImpl.java +++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/ce/ProductAlertServiceCEImpl.java @@ -4,6 +4,7 @@ import com.appsmith.server.dtos.ProductAlertResponseDTO; import com.appsmith.server.exceptions.AppsmithError; import com.appsmith.server.exceptions.AppsmithException; +import com.appsmith.server.helpers.LoadShifter; import com.fasterxml.jackson.databind.ObjectMapper; import lombok.extern.slf4j.Slf4j; import org.springframework.expression.EvaluationContext; @@ -14,8 +15,6 @@ import org.springframework.expression.spel.support.StandardEvaluationContext; import org.springframework.stereotype.Service; import reactor.core.publisher.Mono; -import reactor.core.scheduler.Scheduler; -import reactor.core.scheduler.Schedulers; import java.nio.charset.StandardCharsets; import java.util.Arrays; @@ -31,8 +30,6 @@ public class ProductAlertServiceCEImpl implements ProductAlertServiceCE { private final ProductAlertResponseDTO[] messages; - private final Scheduler scheduler = Schedulers.boundedElastic(); - public ProductAlertServiceCEImpl(ObjectMapper objectMapper, CommonConfig commonConfig) { this.commonConfig = commonConfig; this.mapper = objectMapper; @@ -64,7 +61,7 @@ public Mono> getSingleApplicableMessage() { log.error("exception while getting and filtering product alert messages", error); throw new AppsmithException(AppsmithError.INTERNAL_SERVER_ERROR, error.getMessage()); }) - .subscribeOn(scheduler); + .subscribeOn(LoadShifter.elasticScheduler); } public Boolean evaluateAlertApplicability(ProductAlertResponseDTO productAlertResponseDTO) { diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/ScheduledTaskImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/ScheduledTaskImpl.java index 6ab52cbf884e..7b16eae7de6f 100644 --- a/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/ScheduledTaskImpl.java +++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/ScheduledTaskImpl.java @@ -3,10 +3,9 @@ import com.appsmith.server.services.FeatureFlagService; import com.appsmith.server.services.TenantService; import com.appsmith.server.solutions.ce.ScheduledTaskCEImpl; -import reactor.core.scheduler.Scheduler; public class ScheduledTaskImpl extends ScheduledTaskCEImpl implements ScheduledTask { - public ScheduledTaskImpl(FeatureFlagService featureFlagService, TenantService tenantService, Scheduler scheduler) { - super(featureFlagService, tenantService, scheduler); + public ScheduledTaskImpl(FeatureFlagService featureFlagService, TenantService tenantService) { + super(featureFlagService, tenantService); } } diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/UserSignupImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/UserSignupImpl.java index df46969d4ef0..29b03db32ad7 100644 --- a/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/UserSignupImpl.java +++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/UserSignupImpl.java @@ -1,7 +1,6 @@ package com.appsmith.server.solutions; import com.appsmith.server.authentication.handlers.AuthenticationSuccessHandler; -import com.appsmith.server.configurations.CommonConfig; import com.appsmith.server.helpers.NetworkUtils; import com.appsmith.server.helpers.UserUtils; import com.appsmith.server.services.AnalyticsService; @@ -27,7 +26,6 @@ public UserSignupImpl( ConfigService configService, AnalyticsService analyticsService, EnvManager envManager, - CommonConfig commonConfig, UserUtils userUtils, NetworkUtils networkUtils, EmailService emailService, @@ -41,7 +39,6 @@ public UserSignupImpl( configService, analyticsService, envManager, - commonConfig, userUtils, networkUtils, emailService, diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/ce/ScheduledTaskCEImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/ce/ScheduledTaskCEImpl.java index e49dedfcb8cc..9d385f2655fb 100644 --- a/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/ce/ScheduledTaskCEImpl.java +++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/ce/ScheduledTaskCEImpl.java @@ -1,5 +1,6 @@ package com.appsmith.server.solutions.ce; +import com.appsmith.server.helpers.LoadShifter; import com.appsmith.server.services.FeatureFlagService; import com.appsmith.server.services.TenantService; import io.micrometer.observation.annotation.Observed; @@ -7,7 +8,6 @@ import lombok.extern.slf4j.Slf4j; import org.springframework.scheduling.annotation.Scheduled; import org.springframework.stereotype.Component; -import reactor.core.scheduler.Scheduler; @RequiredArgsConstructor @Slf4j @@ -18,8 +18,6 @@ public class ScheduledTaskCEImpl implements ScheduledTaskCE { private final TenantService tenantService; - private final Scheduler scheduler; - @Scheduled(initialDelay = 10 * 1000 /* ten seconds */, fixedRate = 30 * 60 * 1000 /* thirty minutes */) @Observed(name = "fetchFeatures") public void fetchFeatures() { @@ -31,7 +29,7 @@ public void fetchFeatures() { .flatMap(featureFlagService::checkAndExecuteMigrationsForTenantFeatureFlags) .then(tenantService.restartTenant())) .doOnError(error -> log.error("Error while fetching tenant feature flags", error)) - .subscribeOn(scheduler) + .subscribeOn(LoadShifter.elasticScheduler) .subscribe(); } } diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/ce/UserSignupCEImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/ce/UserSignupCEImpl.java index f19dc32a019c..931d850e7ab9 100644 --- a/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/ce/UserSignupCEImpl.java +++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/ce/UserSignupCEImpl.java @@ -2,7 +2,6 @@ import com.appsmith.external.constants.AnalyticsEvents; import com.appsmith.server.authentication.handlers.AuthenticationSuccessHandler; -import com.appsmith.server.configurations.CommonConfig; import com.appsmith.server.constants.FieldName; import com.appsmith.server.domains.LoginSource; import com.appsmith.server.domains.Tenant; @@ -14,6 +13,7 @@ import com.appsmith.server.dtos.UserSignupRequestDTO; import com.appsmith.server.exceptions.AppsmithError; import com.appsmith.server.exceptions.AppsmithException; +import com.appsmith.server.helpers.LoadShifter; import com.appsmith.server.helpers.NetworkUtils; import com.appsmith.server.helpers.UserUtils; import com.appsmith.server.services.AnalyticsService; @@ -79,7 +79,6 @@ public class UserSignupCEImpl implements UserSignupCE { private final ConfigService configService; private final AnalyticsService analyticsService; private final EnvManager envManager; - private final CommonConfig commonConfig; private final UserUtils userUtils; private final NetworkUtils networkUtils; private final EmailService emailService; @@ -97,7 +96,6 @@ public UserSignupCEImpl( ConfigService configService, AnalyticsService analyticsService, EnvManager envManager, - CommonConfig commonConfig, UserUtils userUtils, NetworkUtils networkUtils, EmailService emailService, @@ -110,7 +108,6 @@ public UserSignupCEImpl( this.configService = configService; this.analyticsService = analyticsService; this.envManager = envManager; - this.commonConfig = commonConfig; this.userUtils = userUtils; this.networkUtils = networkUtils; this.emailService = emailService; @@ -350,7 +347,7 @@ public Mono signupAndLoginSuper( // because // of any other secondary function mono throwing an exception sendInstallationSetupAnalytics(userFromRequest, user, userData) - .subscribeOn(commonConfig.scheduler()) + .subscribeOn(LoadShifter.elasticScheduler) .subscribe(); Mono allSecondaryFunctions = Mono.when( diff --git a/app/server/appsmith-server/src/test/java/com/appsmith/server/services/ce/PluginServiceCEImplTest.java b/app/server/appsmith-server/src/test/java/com/appsmith/server/services/ce/PluginServiceCEImplTest.java index a2f648007f6d..cb17b8cbf901 100644 --- a/app/server/appsmith-server/src/test/java/com/appsmith/server/services/ce/PluginServiceCEImplTest.java +++ b/app/server/appsmith-server/src/test/java/com/appsmith/server/services/ce/PluginServiceCEImplTest.java @@ -19,7 +19,6 @@ import org.springframework.data.redis.core.ReactiveRedisTemplate; import org.springframework.data.redis.listener.ChannelTopic; import org.springframework.test.context.junit.jupiter.SpringExtension; -import reactor.core.scheduler.Scheduler; import java.io.IOException; import java.util.LinkedHashMap; @@ -33,9 +32,6 @@ @ExtendWith(SpringExtension.class) public class PluginServiceCEImplTest { - @MockBean - Scheduler scheduler; - @MockBean Validator validator; diff --git a/app/server/appsmith-server/src/test/java/com/appsmith/server/solutions/UserSignupTest.java b/app/server/appsmith-server/src/test/java/com/appsmith/server/solutions/UserSignupTest.java index eb85d05b672c..b00c0e0bd6c9 100644 --- a/app/server/appsmith-server/src/test/java/com/appsmith/server/solutions/UserSignupTest.java +++ b/app/server/appsmith-server/src/test/java/com/appsmith/server/solutions/UserSignupTest.java @@ -1,7 +1,6 @@ package com.appsmith.server.solutions; import com.appsmith.server.authentication.handlers.AuthenticationSuccessHandler; -import com.appsmith.server.configurations.CommonConfig; import com.appsmith.server.domains.Tenant; import com.appsmith.server.domains.TenantConfiguration; import com.appsmith.server.domains.User; @@ -55,9 +54,6 @@ public class UserSignupTest { @MockBean private EnvManager envManager; - @MockBean - private CommonConfig commonConfig; - @MockBean private UserUtils userUtils; @@ -86,7 +82,6 @@ public void setup() { configService, analyticsService, envManager, - commonConfig, userUtils, networkUtils, emailService,