diff --git a/.storybook/global.scss b/.storybook/global.scss new file mode 100644 index 00000000..bd590c60 --- /dev/null +++ b/.storybook/global.scss @@ -0,0 +1,4 @@ +html { + overflow: hidden; + overscroll-behavior: none; +} \ No newline at end of file diff --git a/.storybook/preview.ts b/.storybook/preview.ts index f67b3c76..269048e7 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,3 +1,4 @@ +import './global.scss'; import type {Preview} from "@storybook/react"; const preview: Preview = { diff --git a/__snapshots__/alert--with-body-chromium.png b/__snapshots__/alert--with-body-chromium.png index f15fcd44..ae35f78a 100644 Binary files a/__snapshots__/alert--with-body-chromium.png and b/__snapshots__/alert--with-body-chromium.png differ diff --git a/__snapshots__/alert--with-body-firefox.png b/__snapshots__/alert--with-body-firefox.png index e9a89249..4d5a7fdf 100644 Binary files a/__snapshots__/alert--with-body-firefox.png and b/__snapshots__/alert--with-body-firefox.png differ diff --git a/__snapshots__/alert--with-body-webkit.png b/__snapshots__/alert--with-body-webkit.png index 0378cf40..9ab0dd71 100644 Binary files a/__snapshots__/alert--with-body-webkit.png and b/__snapshots__/alert--with-body-webkit.png differ diff --git a/__snapshots__/alert--without-body-chromium.png b/__snapshots__/alert--without-body-chromium.png index edb5ce25..f5c031c2 100644 Binary files a/__snapshots__/alert--without-body-chromium.png and b/__snapshots__/alert--without-body-chromium.png differ diff --git a/__snapshots__/alert--without-body-firefox.png b/__snapshots__/alert--without-body-firefox.png index 2835ed5f..64bd8607 100644 Binary files a/__snapshots__/alert--without-body-firefox.png and b/__snapshots__/alert--without-body-firefox.png differ diff --git a/__snapshots__/alert--without-body-webkit.png b/__snapshots__/alert--without-body-webkit.png index af4d28c8..83c852e7 100644 Binary files a/__snapshots__/alert--without-body-webkit.png and b/__snapshots__/alert--without-body-webkit.png differ diff --git a/__snapshots__/badge--button-example-chromium.png b/__snapshots__/badge--button-example-chromium.png index 28428049..14be72b1 100644 Binary files a/__snapshots__/badge--button-example-chromium.png and b/__snapshots__/badge--button-example-chromium.png differ diff --git a/__snapshots__/badge--button-example-firefox.png b/__snapshots__/badge--button-example-firefox.png index bfcb0c4f..b2ba2bdb 100644 Binary files a/__snapshots__/badge--button-example-firefox.png and b/__snapshots__/badge--button-example-firefox.png differ diff --git a/__snapshots__/badge--button-example-webkit.png b/__snapshots__/badge--button-example-webkit.png index 16040bb4..48d0328f 100644 Binary files a/__snapshots__/badge--button-example-webkit.png and b/__snapshots__/badge--button-example-webkit.png differ diff --git a/__snapshots__/badge--variants-chromium.png b/__snapshots__/badge--variants-chromium.png index a34e6b24..d10e4fc9 100644 Binary files a/__snapshots__/badge--variants-chromium.png and b/__snapshots__/badge--variants-chromium.png differ diff --git a/__snapshots__/badge--variants-firefox.png b/__snapshots__/badge--variants-firefox.png index cff33e55..9c19d84d 100644 Binary files a/__snapshots__/badge--variants-firefox.png and b/__snapshots__/badge--variants-firefox.png differ diff --git a/__snapshots__/badge--variants-webkit.png b/__snapshots__/badge--variants-webkit.png index 5b45c805..ba8b2801 100644 Binary files a/__snapshots__/badge--variants-webkit.png and b/__snapshots__/badge--variants-webkit.png differ diff --git a/__snapshots__/button--button-groups-chromium.png b/__snapshots__/button--button-groups-chromium.png index ff1f55c4..885e3e94 100644 Binary files a/__snapshots__/button--button-groups-chromium.png and b/__snapshots__/button--button-groups-chromium.png differ diff --git a/__snapshots__/button--button-groups-firefox.png b/__snapshots__/button--button-groups-firefox.png index 1d97abc5..8c422fa8 100644 Binary files a/__snapshots__/button--button-groups-firefox.png and b/__snapshots__/button--button-groups-firefox.png differ diff --git a/__snapshots__/button--button-groups-webkit.png b/__snapshots__/button--button-groups-webkit.png index 6bd1c812..39f0f9b3 100644 Binary files a/__snapshots__/button--button-groups-webkit.png and b/__snapshots__/button--button-groups-webkit.png differ diff --git a/__snapshots__/button--buttons-chromium.png b/__snapshots__/button--buttons-chromium.png index f679d31f..be992e8a 100644 Binary files a/__snapshots__/button--buttons-chromium.png and b/__snapshots__/button--buttons-chromium.png differ diff --git a/__snapshots__/button--buttons-firefox.png b/__snapshots__/button--buttons-firefox.png index d9ec324a..e8cad50b 100644 Binary files a/__snapshots__/button--buttons-firefox.png and b/__snapshots__/button--buttons-firefox.png differ diff --git a/__snapshots__/button--buttons-webkit.png b/__snapshots__/button--buttons-webkit.png index 1f7ba7ea..fe0d9a62 100644 Binary files a/__snapshots__/button--buttons-webkit.png and b/__snapshots__/button--buttons-webkit.png differ diff --git a/__snapshots__/card--card-news-chromium.png b/__snapshots__/card--card-news-chromium.png index 082b174f..0fe2a72d 100644 Binary files a/__snapshots__/card--card-news-chromium.png and b/__snapshots__/card--card-news-chromium.png differ diff --git a/__snapshots__/card--card-news-firefox.png b/__snapshots__/card--card-news-firefox.png index 7e26204f..aa46121c 100644 Binary files a/__snapshots__/card--card-news-firefox.png and b/__snapshots__/card--card-news-firefox.png differ diff --git a/__snapshots__/card--card-news-webkit.png b/__snapshots__/card--card-news-webkit.png index a046ae60..c9d621e6 100644 Binary files a/__snapshots__/card--card-news-webkit.png and b/__snapshots__/card--card-news-webkit.png differ diff --git a/__snapshots__/container--container-row-col-chromium.png b/__snapshots__/container--container-row-col-chromium.png index 478e9cf3..42f61d9e 100644 Binary files a/__snapshots__/container--container-row-col-chromium.png and b/__snapshots__/container--container-row-col-chromium.png differ diff --git a/__snapshots__/container--container-row-col-firefox.png b/__snapshots__/container--container-row-col-firefox.png index af66c734..3bc24977 100644 Binary files a/__snapshots__/container--container-row-col-firefox.png and b/__snapshots__/container--container-row-col-firefox.png differ diff --git a/__snapshots__/container--container-row-col-webkit.png b/__snapshots__/container--container-row-col-webkit.png index a7800f02..357798db 100644 Binary files a/__snapshots__/container--container-row-col-webkit.png and b/__snapshots__/container--container-row-col-webkit.png differ diff --git a/__snapshots__/container--container-with-news-chromium.png b/__snapshots__/container--container-with-news-chromium.png index 9f9b8787..5c8c8661 100644 Binary files a/__snapshots__/container--container-with-news-chromium.png and b/__snapshots__/container--container-with-news-chromium.png differ diff --git a/__snapshots__/container--container-with-news-firefox.png b/__snapshots__/container--container-with-news-firefox.png index 81422ae6..8e1f7e96 100644 Binary files a/__snapshots__/container--container-with-news-firefox.png and b/__snapshots__/container--container-with-news-firefox.png differ diff --git a/__snapshots__/container--container-with-news-webkit.png b/__snapshots__/container--container-with-news-webkit.png index b3ea58fc..b9a58772 100644 Binary files a/__snapshots__/container--container-with-news-webkit.png and b/__snapshots__/container--container-with-news-webkit.png differ diff --git a/__snapshots__/dashboard-screen--dashboard-screen-example-chromium.png b/__snapshots__/dashboard-screen--dashboard-screen-example-chromium.png index fc2cb302..593805e8 100644 Binary files a/__snapshots__/dashboard-screen--dashboard-screen-example-chromium.png and b/__snapshots__/dashboard-screen--dashboard-screen-example-chromium.png differ diff --git a/__snapshots__/dashboard-screen--dashboard-screen-example-firefox.png b/__snapshots__/dashboard-screen--dashboard-screen-example-firefox.png index b21e7401..5e9a5af4 100644 Binary files a/__snapshots__/dashboard-screen--dashboard-screen-example-firefox.png and b/__snapshots__/dashboard-screen--dashboard-screen-example-firefox.png differ diff --git a/__snapshots__/dashboard-screen--dashboard-screen-example-webkit.png b/__snapshots__/dashboard-screen--dashboard-screen-example-webkit.png index e48e69bd..7942bb51 100644 Binary files a/__snapshots__/dashboard-screen--dashboard-screen-example-webkit.png and b/__snapshots__/dashboard-screen--dashboard-screen-example-webkit.png differ diff --git a/__snapshots__/dialog--example-dialog-chromium.png b/__snapshots__/dialog--example-dialog-chromium.png index c0b66bb2..338abd79 100644 Binary files a/__snapshots__/dialog--example-dialog-chromium.png and b/__snapshots__/dialog--example-dialog-chromium.png differ diff --git a/__snapshots__/dialog--example-dialog-firefox.png b/__snapshots__/dialog--example-dialog-firefox.png index a915ef69..81c8743f 100644 Binary files a/__snapshots__/dialog--example-dialog-firefox.png and b/__snapshots__/dialog--example-dialog-firefox.png differ diff --git a/__snapshots__/dialog--example-dialog-webkit.png b/__snapshots__/dialog--example-dialog-webkit.png index 6f3092dc..c7d380b3 100644 Binary files a/__snapshots__/dialog--example-dialog-webkit.png and b/__snapshots__/dialog--example-dialog-webkit.png differ diff --git a/__snapshots__/dialog--long-dialog-chromium.png b/__snapshots__/dialog--long-dialog-chromium.png index c0b66bb2..338abd79 100644 Binary files a/__snapshots__/dialog--long-dialog-chromium.png and b/__snapshots__/dialog--long-dialog-chromium.png differ diff --git a/__snapshots__/dialog--long-dialog-firefox.png b/__snapshots__/dialog--long-dialog-firefox.png index a915ef69..81c8743f 100644 Binary files a/__snapshots__/dialog--long-dialog-firefox.png and b/__snapshots__/dialog--long-dialog-firefox.png differ diff --git a/__snapshots__/dialog--long-dialog-webkit.png b/__snapshots__/dialog--long-dialog-webkit.png index 6f3092dc..c7d380b3 100644 Binary files a/__snapshots__/dialog--long-dialog-webkit.png and b/__snapshots__/dialog--long-dialog-webkit.png differ diff --git a/__snapshots__/dialog--nested-dialog-chromium.png b/__snapshots__/dialog--nested-dialog-chromium.png index c0b66bb2..338abd79 100644 Binary files a/__snapshots__/dialog--nested-dialog-chromium.png and b/__snapshots__/dialog--nested-dialog-chromium.png differ diff --git a/__snapshots__/dialog--nested-dialog-firefox.png b/__snapshots__/dialog--nested-dialog-firefox.png index a915ef69..81c8743f 100644 Binary files a/__snapshots__/dialog--nested-dialog-firefox.png and b/__snapshots__/dialog--nested-dialog-firefox.png differ diff --git a/__snapshots__/dialog--nested-dialog-webkit.png b/__snapshots__/dialog--nested-dialog-webkit.png index 6f3092dc..c7d380b3 100644 Binary files a/__snapshots__/dialog--nested-dialog-webkit.png and b/__snapshots__/dialog--nested-dialog-webkit.png differ diff --git a/__snapshots__/dropdown--dropdowns-chromium.png b/__snapshots__/dropdown--dropdowns-chromium.png index c94dd65b..d642ce76 100644 Binary files a/__snapshots__/dropdown--dropdowns-chromium.png and b/__snapshots__/dropdown--dropdowns-chromium.png differ diff --git a/__snapshots__/dropdown--dropdowns-firefox.png b/__snapshots__/dropdown--dropdowns-firefox.png index 47337d79..63cf2d03 100644 Binary files a/__snapshots__/dropdown--dropdowns-firefox.png and b/__snapshots__/dropdown--dropdowns-firefox.png differ diff --git a/__snapshots__/dropdown--dropdowns-webkit.png b/__snapshots__/dropdown--dropdowns-webkit.png index de7cd926..a13106b6 100644 Binary files a/__snapshots__/dropdown--dropdowns-webkit.png and b/__snapshots__/dropdown--dropdowns-webkit.png differ diff --git a/__snapshots__/input--disabled-chromium.png b/__snapshots__/input--disabled-chromium.png index 25a13cbb..39a2e683 100644 Binary files a/__snapshots__/input--disabled-chromium.png and b/__snapshots__/input--disabled-chromium.png differ diff --git a/__snapshots__/input--disabled-firefox.png b/__snapshots__/input--disabled-firefox.png index da42f8b3..2cc9de9a 100644 Binary files a/__snapshots__/input--disabled-firefox.png and b/__snapshots__/input--disabled-firefox.png differ diff --git a/__snapshots__/input--disabled-webkit.png b/__snapshots__/input--disabled-webkit.png index 92118be4..e5ab7a20 100644 Binary files a/__snapshots__/input--disabled-webkit.png and b/__snapshots__/input--disabled-webkit.png differ diff --git a/__snapshots__/input--mail-firefox.png b/__snapshots__/input--mail-firefox.png index c0e1d4d8..e0c7cfe8 100644 Binary files a/__snapshots__/input--mail-firefox.png and b/__snapshots__/input--mail-firefox.png differ diff --git a/__snapshots__/input--mail-webkit.png b/__snapshots__/input--mail-webkit.png index fa30d228..0acb47f1 100644 Binary files a/__snapshots__/input--mail-webkit.png and b/__snapshots__/input--mail-webkit.png differ diff --git a/__snapshots__/input--not-valid-firefox.png b/__snapshots__/input--not-valid-firefox.png index 9e13b321..6a9e74bc 100644 Binary files a/__snapshots__/input--not-valid-firefox.png and b/__snapshots__/input--not-valid-firefox.png differ diff --git a/__snapshots__/input--not-valid-webkit.png b/__snapshots__/input--not-valid-webkit.png index 443951c5..d179e413 100644 Binary files a/__snapshots__/input--not-valid-webkit.png and b/__snapshots__/input--not-valid-webkit.png differ diff --git a/__snapshots__/input--valid-firefox.png b/__snapshots__/input--valid-firefox.png index 28cecee6..0a6aceda 100644 Binary files a/__snapshots__/input--valid-firefox.png and b/__snapshots__/input--valid-firefox.png differ diff --git a/__snapshots__/input--valid-webkit.png b/__snapshots__/input--valid-webkit.png index 5ca148c3..f7d28800 100644 Binary files a/__snapshots__/input--valid-webkit.png and b/__snapshots__/input--valid-webkit.png differ diff --git a/__snapshots__/menu--menu-account-chromium.png b/__snapshots__/menu--menu-account-chromium.png index ea3b253e..db147875 100644 Binary files a/__snapshots__/menu--menu-account-chromium.png and b/__snapshots__/menu--menu-account-chromium.png differ diff --git a/__snapshots__/menu--menu-account-firefox.png b/__snapshots__/menu--menu-account-firefox.png index a43dd9f9..b545553a 100644 Binary files a/__snapshots__/menu--menu-account-firefox.png and b/__snapshots__/menu--menu-account-firefox.png differ diff --git a/__snapshots__/menu--menu-account-list-chromium.png b/__snapshots__/menu--menu-account-list-chromium.png index 2577915e..31bb9e36 100644 Binary files a/__snapshots__/menu--menu-account-list-chromium.png and b/__snapshots__/menu--menu-account-list-chromium.png differ diff --git a/__snapshots__/menu--menu-account-list-firefox.png b/__snapshots__/menu--menu-account-list-firefox.png index 350ad5d0..3a6e14ac 100644 Binary files a/__snapshots__/menu--menu-account-list-firefox.png and b/__snapshots__/menu--menu-account-list-firefox.png differ diff --git a/__snapshots__/menu--menu-account-list-webkit.png b/__snapshots__/menu--menu-account-list-webkit.png index 3cee9e11..9122fb72 100644 Binary files a/__snapshots__/menu--menu-account-list-webkit.png and b/__snapshots__/menu--menu-account-list-webkit.png differ diff --git a/__snapshots__/menu--menu-account-webkit.png b/__snapshots__/menu--menu-account-webkit.png index f6f3eb4d..819f1748 100644 Binary files a/__snapshots__/menu--menu-account-webkit.png and b/__snapshots__/menu--menu-account-webkit.png differ diff --git a/__snapshots__/popover--popover-test-chromium.png b/__snapshots__/popover--popover-test-chromium.png index f391f64b..1c4b5aa4 100644 Binary files a/__snapshots__/popover--popover-test-chromium.png and b/__snapshots__/popover--popover-test-chromium.png differ diff --git a/__snapshots__/popover--popover-test-firefox.png b/__snapshots__/popover--popover-test-firefox.png index e5df4efe..9c48ff2b 100644 Binary files a/__snapshots__/popover--popover-test-firefox.png and b/__snapshots__/popover--popover-test-firefox.png differ diff --git a/__snapshots__/popover--popover-test-webkit.png b/__snapshots__/popover--popover-test-webkit.png index d61d7d94..db42fb77 100644 Binary files a/__snapshots__/popover--popover-test-webkit.png and b/__snapshots__/popover--popover-test-webkit.png differ diff --git a/__snapshots__/quote--quote-with-logo-chromium.png b/__snapshots__/quote--quote-with-logo-chromium.png index 025f5769..d9b89f36 100644 Binary files a/__snapshots__/quote--quote-with-logo-chromium.png and b/__snapshots__/quote--quote-with-logo-chromium.png differ diff --git a/__snapshots__/quote--quote-with-logo-firefox.png b/__snapshots__/quote--quote-with-logo-firefox.png index 5df2aea0..ee595351 100644 Binary files a/__snapshots__/quote--quote-with-logo-firefox.png and b/__snapshots__/quote--quote-with-logo-firefox.png differ diff --git a/__snapshots__/quote--quote-with-logo-webkit.png b/__snapshots__/quote--quote-with-logo-webkit.png index 25b3f75d..130dcb38 100644 Binary files a/__snapshots__/quote--quote-with-logo-webkit.png and b/__snapshots__/quote--quote-with-logo-webkit.png differ diff --git a/__snapshots__/quote--quote-without-logo-chromium.png b/__snapshots__/quote--quote-without-logo-chromium.png index c0243aa8..5971c0cb 100644 Binary files a/__snapshots__/quote--quote-without-logo-chromium.png and b/__snapshots__/quote--quote-without-logo-chromium.png differ diff --git a/__snapshots__/quote--quote-without-logo-firefox.png b/__snapshots__/quote--quote-without-logo-firefox.png index 69eb3ef2..58b01c11 100644 Binary files a/__snapshots__/quote--quote-without-logo-firefox.png and b/__snapshots__/quote--quote-without-logo-firefox.png differ diff --git a/__snapshots__/quote--quote-without-logo-webkit.png b/__snapshots__/quote--quote-without-logo-webkit.png index eda2f4e9..e2b94fa6 100644 Binary files a/__snapshots__/quote--quote-without-logo-webkit.png and b/__snapshots__/quote--quote-without-logo-webkit.png differ diff --git a/__snapshots__/select--basic-select-chromium.png b/__snapshots__/select--basic-select-chromium.png index 8744ea48..540bde42 100644 Binary files a/__snapshots__/select--basic-select-chromium.png and b/__snapshots__/select--basic-select-chromium.png differ diff --git a/__snapshots__/select--basic-select-firefox.png b/__snapshots__/select--basic-select-firefox.png index d640fa41..996f3761 100644 Binary files a/__snapshots__/select--basic-select-firefox.png and b/__snapshots__/select--basic-select-firefox.png differ diff --git a/__snapshots__/select--basic-select-webkit.png b/__snapshots__/select--basic-select-webkit.png index c4af37cd..c96c6a85 100644 Binary files a/__snapshots__/select--basic-select-webkit.png and b/__snapshots__/select--basic-select-webkit.png differ diff --git a/__snapshots__/tooltip--tooltip-example-chromium.png b/__snapshots__/tooltip--tooltip-example-chromium.png index a53cb093..3bff3d8d 100644 Binary files a/__snapshots__/tooltip--tooltip-example-chromium.png and b/__snapshots__/tooltip--tooltip-example-chromium.png differ diff --git a/__snapshots__/tooltip--tooltip-example-firefox.png b/__snapshots__/tooltip--tooltip-example-firefox.png index 564e6850..6bdf04ad 100644 Binary files a/__snapshots__/tooltip--tooltip-example-firefox.png and b/__snapshots__/tooltip--tooltip-example-firefox.png differ diff --git a/__snapshots__/tooltip--tooltip-example-webkit.png b/__snapshots__/tooltip--tooltip-example-webkit.png index 58bb356a..35576129 100644 Binary files a/__snapshots__/tooltip--tooltip-example-webkit.png and b/__snapshots__/tooltip--tooltip-example-webkit.png differ diff --git a/package-lock.json b/package-lock.json index 7ace5692..2dcec2bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,9 @@ "": { "name": "@code0-tech/pictor", "version": "0.2.3", + "dependencies": { + "overlap-area": "^1.1.0" + }, "devDependencies": { "@ariakit/react": "^0.4.10", "@mdx-js/react": "^3.0.1", @@ -2083,6 +2086,11 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "dev": true }, + "node_modules/@daybrush/utils": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/@daybrush/utils/-/utils-1.13.0.tgz", + "integrity": "sha512-ALK12C6SQNNHw1enXK+UO8bdyQ+jaWNQ1Af7Z3FNxeAwjYhQT7do+TRE4RASAJ3ObaS2+TJ7TXR3oz2Gzbw0PQ==" + }, "node_modules/@esbuild/android-arm": { "version": "0.18.20", "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz", @@ -7324,28 +7332,6 @@ "integrity": "sha512-AjwI4MvWx3HAOaZqYsjKWyEObT9lcVV0Y0V8nXo6cXzN8ZiMxVhf6F3d/UNvXVGKrEzL/Dluc5p+y9GkzlTWig==", "dev": true }, - "node_modules/@types/eslint": { - "version": "8.56.10", - "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.10.tgz", - "integrity": "sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==", - "dev": true, - "peer": true, - "dependencies": { - "@types/estree": "*", - "@types/json-schema": "*" - } - }, - "node_modules/@types/eslint-scope": { - "version": "3.7.7", - "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz", - "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==", - "dev": true, - "peer": true, - "dependencies": { - "@types/eslint": "*", - "@types/estree": "*" - } - }, "node_modules/@types/estree": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", @@ -8276,9 +8262,9 @@ } }, "node_modules/axios": { - "version": "1.6.8", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", - "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", + "version": "1.7.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz", + "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==", "dev": true, "dependencies": { "follow-redirects": "^1.15.6", @@ -8666,9 +8652,9 @@ } }, "node_modules/body-parser": { - "version": "1.20.2", - "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz", - "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==", + "version": "1.20.3", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz", + "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==", "dev": true, "dependencies": { "bytes": "3.1.2", @@ -8679,7 +8665,7 @@ "http-errors": "2.0.0", "iconv-lite": "0.4.24", "on-finished": "2.4.1", - "qs": "6.11.0", + "qs": "6.13.0", "raw-body": "2.5.2", "type-is": "~1.6.18", "unpipe": "1.0.0" @@ -8689,15 +8675,6 @@ "npm": "1.2.8000 || >= 1.4.16" } }, - "node_modules/body-parser/node_modules/bytes": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", - "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", - "dev": true, - "engines": { - "node": ">= 0.8" - } - }, "node_modules/body-parser/node_modules/debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -8713,21 +8690,6 @@ "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", "dev": true }, - "node_modules/body-parser/node_modules/qs": { - "version": "6.11.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", - "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==", - "dev": true, - "dependencies": { - "side-channel": "^1.0.4" - }, - "engines": { - "node": ">=0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", @@ -8845,6 +8807,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/bytes": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", + "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", + "dev": true, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/caching-transform": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/caching-transform/-/caching-transform-4.0.0.tgz", @@ -10256,18 +10227,18 @@ "dev": true }, "node_modules/encodeurl": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", - "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz", + "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==", "dev": true, "engines": { "node": ">= 0.8" } }, "node_modules/enhanced-resolve": { - "version": "5.16.1", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.1.tgz", - "integrity": "sha512-4U5pNsuDl0EhuZpq46M5xPslstkviJuhrdobaRDBk2Jy2KO37FDAJl4lb2KlNabxT0m4MTK2UHNrsAcphE8nyw==", + "version": "5.17.1", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz", + "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==", "dev": true, "peer": true, "dependencies": { @@ -10619,37 +10590,37 @@ "dev": true }, "node_modules/express": { - "version": "4.19.2", - "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz", - "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==", + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz", + "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==", "dev": true, "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", - "body-parser": "1.20.2", + "body-parser": "1.20.3", "content-disposition": "0.5.4", "content-type": "~1.0.4", "cookie": "0.6.0", "cookie-signature": "1.0.6", "debug": "2.6.9", "depd": "2.0.0", - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "etag": "~1.8.1", - "finalhandler": "1.2.0", + "finalhandler": "1.3.1", "fresh": "0.5.2", "http-errors": "2.0.0", - "merge-descriptors": "1.0.1", + "merge-descriptors": "1.0.3", "methods": "~1.1.2", "on-finished": "2.4.1", "parseurl": "~1.3.3", - "path-to-regexp": "0.1.7", + "path-to-regexp": "0.1.10", "proxy-addr": "~2.0.7", - "qs": "6.11.0", + "qs": "6.13.0", "range-parser": "~1.2.1", "safe-buffer": "5.2.1", - "send": "0.18.0", - "serve-static": "1.15.0", + "send": "0.19.0", + "serve-static": "1.16.2", "setprototypeof": "1.2.0", "statuses": "2.0.1", "type-is": "~1.6.18", @@ -10675,21 +10646,6 @@ "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", "dev": true }, - "node_modules/express/node_modules/qs": { - "version": "6.11.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", - "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==", - "dev": true, - "dependencies": { - "side-channel": "^1.0.4" - }, - "engines": { - "node": ">=0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/express/node_modules/safe-buffer": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", @@ -10803,13 +10759,13 @@ } }, "node_modules/finalhandler": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", - "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz", + "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==", "dev": true, "dependencies": { "debug": "2.6.9", - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "on-finished": "2.4.1", "parseurl": "~1.3.3", @@ -15187,10 +15143,13 @@ } }, "node_modules/merge-descriptors": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", - "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==", - "dev": true + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz", + "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } }, "node_modules/merge-props": { "version": "6.0.0", @@ -15223,18 +15182,30 @@ } }, "node_modules/micromatch": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", - "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "dev": true, "dependencies": { - "braces": "^3.0.2", + "braces": "^3.0.3", "picomatch": "^2.3.1" }, "engines": { "node": ">=8.6" } }, + "node_modules/mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "dev": true, + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/mime-db": { "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", @@ -16068,6 +16039,14 @@ "node": ">=0.10.0" } }, + "node_modules/overlap-area": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/overlap-area/-/overlap-area-1.1.0.tgz", + "integrity": "sha512-3dlJgJCaVeXH0/eZjYVJvQiLVVrPO4U1ZGqlATtx6QGO3b5eNM6+JgUKa7oStBTdYuGTk7gVoABCW6Tp+dhRdw==", + "dependencies": { + "@daybrush/utils": "^1.7.1" + } + }, "node_modules/p-finally": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", @@ -16293,9 +16272,9 @@ } }, "node_modules/path-to-regexp": { - "version": "0.1.7", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", - "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==", + "version": "0.1.10", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz", + "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==", "dev": true }, "node_modules/path-type": { @@ -17215,6 +17194,21 @@ } ] }, + "node_modules/qs": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", + "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==", + "dev": true, + "dependencies": { + "side-channel": "^1.0.6" + }, + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -17278,15 +17272,6 @@ "node": ">= 0.8" } }, - "node_modules/raw-body/node_modules/bytes": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", - "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", - "dev": true, - "engines": { - "node": ">= 0.8" - } - }, "node_modules/react": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", @@ -18492,9 +18477,9 @@ } }, "node_modules/send": { - "version": "0.18.0", - "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz", - "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==", + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz", + "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==", "dev": true, "dependencies": { "debug": "2.6.9", @@ -18530,16 +18515,13 @@ "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", "dev": true }, - "node_modules/send/node_modules/mime": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", - "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "node_modules/send/node_modules/encodeurl": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", + "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", "dev": true, - "bin": { - "mime": "cli.js" - }, "engines": { - "node": ">=4" + "node": ">= 0.8" } }, "node_modules/send/node_modules/ms": { @@ -18559,15 +18541,15 @@ } }, "node_modules/serve-static": { - "version": "1.15.0", - "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz", - "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==", + "version": "1.16.2", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz", + "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==", "dev": true, "dependencies": { - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "parseurl": "~1.3.3", - "send": "0.18.0" + "send": "0.19.0" }, "engines": { "node": ">= 0.8.0" @@ -20114,22 +20096,21 @@ "dev": true }, "node_modules/webpack": { - "version": "5.91.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz", - "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==", + "version": "5.94.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz", + "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==", "dev": true, "peer": true, "dependencies": { - "@types/eslint-scope": "^3.7.3", "@types/estree": "^1.0.5", "@webassemblyjs/ast": "^1.12.1", "@webassemblyjs/wasm-edit": "^1.12.1", "@webassemblyjs/wasm-parser": "^1.12.1", "acorn": "^8.7.1", - "acorn-import-assertions": "^1.9.0", + "acorn-import-attributes": "^1.9.5", "browserslist": "^4.21.10", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.16.0", + "enhanced-resolve": "^5.17.1", "es-module-lexer": "^1.2.1", "eslint-scope": "5.1.1", "events": "^3.2.0", @@ -20177,9 +20158,9 @@ "dev": true }, "node_modules/webpack/node_modules/acorn": { - "version": "8.11.3", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", - "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", + "version": "8.12.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", + "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==", "dev": true, "peer": true, "bin": { @@ -20189,10 +20170,10 @@ "node": ">=0.4.0" } }, - "node_modules/webpack/node_modules/acorn-import-assertions": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz", - "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==", + "node_modules/webpack/node_modules/acorn-import-attributes": { + "version": "1.9.5", + "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz", + "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==", "dev": true, "peer": true, "peerDependencies": { diff --git a/package.json b/package.json index e6d41c53..8ace7fe6 100644 --- a/package.json +++ b/package.json @@ -81,5 +81,8 @@ }, "publishConfig": { "access": "public" + }, + "dependencies": { + "overlap-area": "^1.1.0" } } diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx index be10ed15..a0332243 100644 --- a/src/components/Text/Text.tsx +++ b/src/components/Text/Text.tsx @@ -5,11 +5,12 @@ import {mergeCode0Props} from "../../utils/utils"; export interface FontType extends Omit, "children">, "size"> { children: React.ReactNode, - size: Code0Sizes, + //defaults to lg + size?: Code0Sizes, hierarchy?: "primary" | "secondary" | "tertiary" } -const Text: React.FC = ({size, children, hierarchy = "secondary", ...rest}) => { +const Text: React.FC = ({size = "sm", children, hierarchy = "secondary", ...rest}) => { return {children} diff --git a/src/components/button-group/ButtonGroup.tsx b/src/components/button-group/ButtonGroup.tsx index 7a871429..d0a274cc 100644 --- a/src/components/button-group/ButtonGroup.tsx +++ b/src/components/button-group/ButtonGroup.tsx @@ -1,11 +1,11 @@ import React, {ReactElement} from "react"; -import {ButtonType} from "../button/Button"; +import {ButtonProps} from "../button/Button"; import "./ButtonGroup.style.scss" import {Code0Component} from "../../utils/types"; import {mergeCode0Props} from "../../utils/utils"; export interface ButtonGroupType extends Code0Component { - children: ReactElement[] + children: ReactElement[] } const ButtonGroup: React.FC = (props) => { diff --git a/src/components/button/Button.style.scss b/src/components/button/Button.style.scss index 461733ed..dc0a69dd 100644 --- a/src/components/button/Button.style.scss +++ b/src/components/button/Button.style.scss @@ -1,7 +1,7 @@ @import "../../styles/helpers"; .button { - padding: .5rem; + padding: $xxs; gap: .5rem; cursor: pointer; display: flex; diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx index 33119cbb..bec7081a 100644 --- a/src/components/button/Button.tsx +++ b/src/components/button/Button.tsx @@ -5,7 +5,7 @@ import React, { import {mergeCode0Props} from "../../utils/utils"; import {Code0Component, Color} from "../../utils/types" -export interface ButtonType extends Code0Component { +export interface ButtonProps extends Code0Component { children: ReactNode | ReactNode[] //defaults to primary color?: Color, @@ -17,7 +17,7 @@ export interface ButtonType extends Code0Component { disabled?: boolean } -const Button: React.FC = (props) => { +const Button: React.FC = (props) => { const {children, variant = "normal", color = "primary", active = false, disabled = false, ...args} = props diff --git a/src/components/card/Card.stories.tsx b/src/components/card/Card.stories.tsx index 7116b8ff..02c4e584 100644 --- a/src/components/card/Card.stories.tsx +++ b/src/components/card/Card.stories.tsx @@ -90,7 +90,7 @@ export const CardNews: CardStory = { } , args: { - variant: "outlined", + variant: "none", color: "secondary", outline: true, gradient: true, diff --git a/src/components/d-folder/DFolder.style.scss b/src/components/d-folder/DFolder.style.scss index 8496f57f..258a7777 100644 --- a/src/components/d-folder/DFolder.style.scss +++ b/src/components/d-folder/DFolder.style.scss @@ -3,33 +3,44 @@ .d-folder { @include box(); background: $primary; - padding: .25rem; + padding: $xxs; display: flex; white-space: nowrap; - gap: .5rem; + gap: $xs; - -webkit-touch-callout: none; /* iOS Safari */ - -webkit-user-select: none; /* Safari */ - -khtml-user-select: none; /* Konqueror HTML */ - -moz-user-select: none; /* Old versions of Firefox */ - -ms-user-select: none; /* Internet Explorer/Edge */ - user-select: none; /* Non-prefixed version, currently - supported by Chrome, Edge, Opera and Firefox */ + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; &__icon { color: $info; } &__content { - padding-left: 1.25rem; + margin-left: $xs; + position: relative; + + &:before { + z-index: 10; + height: 100%; + width: 1px; + background: backgroundColor($secondary); + position: absolute; + content: ""; + left: 0; + + } } } .d-folder-item { @include box(); background: $primary; - padding: .25rem; + padding: $xxs; display: flex; white-space: nowrap; - gap: .5rem; + gap: $xs; } \ No newline at end of file diff --git a/src/components/d-fullscreen/DFullScreen.tsx b/src/components/d-fullscreen/DFullScreen.tsx index c04bc286..b581cbf3 100644 --- a/src/components/d-fullscreen/DFullScreen.tsx +++ b/src/components/d-fullscreen/DFullScreen.tsx @@ -20,6 +20,8 @@ const DFullScreen: React.FC = props => { return
diff --git a/src/components/d-screen/DScreen.stories.tsx b/src/components/d-screen/DScreen.stories.tsx index b76e0cdd..1f11c04b 100644 --- a/src/components/d-screen/DScreen.stories.tsx +++ b/src/components/d-screen/DScreen.stories.tsx @@ -3,17 +3,17 @@ import React from "react"; import DScreen from "./DScreen"; import Badge from "../badge/Badge"; import { - IconApi, IconBrandAdobe, + IconBrandAdobe, IconDatabase, IconHierarchy3, - IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightCollapse, IconSettings, IconTicket } from "@tabler/icons-react"; import Text from "../Text/Text"; import DFullScreen from "../d-fullscreen/DFullScreen"; -import Button from "../button/Button"; import DFolder, {useFolderControls} from "../d-folder/DFolder"; +import DScreenBar from "./DScreenBar"; +import DScreenButton from "./DScreenButton"; const meta: Meta = { title: "Dashboard Screen", @@ -30,17 +30,107 @@ export const DashboardScreenExample = () => { const [controls, openAll, closeAll] = useFolderControls() + return + + + Home + / + Organisations + / + Code0 + / + Projects + / + Sagittarius + + + Test + + +
+ + + Flows + + + + Issues + + + + Database + +
+
+ + + Settings + +
+ + + + Docs + + + + + + + + + Open All + + + Close All + + +
+ {[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1].map((_, index) => { + return + + } + name={"Google Cloud Flows"}/> + + + + })} +
+ + + + + + Test Run + + + + + Logs + + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod + tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. + + + + + +} + +/*export const DashboardResizeLabelTest = () => { return - + Home / ... / Sagittarius - + Home / Organisations @@ -57,100 +147,14 @@ export const DashboardScreenExample = () => { Test - - -
- - - Flows - - - - Issues - - - - Database - -
-
- - - Settings - -
- - - - - - Docs - - - - - - - - - - - Open All - - - Close All - - - - - - Test - Test - - - - {[1,1,1,1,1,1,1,1,1,1,1,1].map(() => { - return - - } name={"Google Cloud Flows"}/> - - - - })} - - - - - - - - - - Test Run - - - - - - - Logs - - - - - - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod - tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - - - - - - + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod + tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. + -} +}*/ export default meta \ No newline at end of file diff --git a/src/components/d-screen/DScreen.style.scss b/src/components/d-screen/DScreen.style.scss index cebe1ebe..35f33518 100644 --- a/src/components/d-screen/DScreen.style.scss +++ b/src/components/d-screen/DScreen.style.scss @@ -23,7 +23,57 @@ position: relative; background: $primary; - .d-screen__item { + &--top { + border-bottom: 1px solid borderColor(); + + .d-screen__v-bar__resizable-label { + &--top { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + transform: translateX(-50%); + bottom: 0; + } + + &--bottom { + border-top-right-radius: 0; + border-top-left-radius: 0; + transform: translateX(-50%) translateY(100%); + bottom: 0; + } + } + } + + &--bottom { + border-top: 1px solid borderColor(); + + .d-screen__v-bar__resizable-label { + &--top { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + transform: translateX(-50%) translateY(-100%); + top: 0; + } + + &--bottom { + border-top-right-radius: 0; + border-top-left-radius: 0; + transform: translateX(-50%); + top: 0; + } + } + } + + &__resizable-label { + @include box(false); + position: absolute; + z-index: 2; + left: 50%; + display: flex; + transform: translateX(-50%); + padding: .25rem; + } + + .d-screen__button { writing-mode: unset !important; } @@ -32,18 +82,13 @@ height: 100%; padding: .5rem; overflow: auto; - display: none; + display: flex; gap: .5rem; - align-items: center; - } + align-items: start; - &--top { - border-bottom: 1px solid borderColor(); - } - &--bottom { - border-top: 1px solid borderColor(); } + } @@ -52,27 +97,72 @@ position: relative; background: $primary; - .d-screen__item { + &--left { + border-right: 1px solid borderColor(); + + .d-screen__h-bar__resizable-label { + + &--left { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + transform: translateY(-50%); + right: 0; + } + + &--right { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + transform: translateY(-50%) translateX(100%); + right: 0; + } + } + } + + &--right { + border-left: 1px solid borderColor(); + + .d-screen__h-bar__resizable-label { + + &--left { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + transform: translateY(-50%) translateX(-100%); + left: 0; + } + + &--right { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + transform: translateY(-50%); + left: 0; + } + } + } + + &__resizable-label { + @include box(false); + position: absolute; + top: 50%; + display: flex; + z-index: 2; + transform: translateY(-50%); + padding: .25rem; + } + + .d-screen__button { writing-mode: vertical-rl; } > .d-screen__bar-content { overflow: auto; - display: none; + display: flex; gap: .5rem; padding: .5rem; height: 100%; width: 100%; position: relative; flex-direction: column; - } - &--left { - border-right: 1px solid borderColor(); - } - - &--right { - border-left: 1px solid borderColor(); } } @@ -93,22 +183,19 @@ &__content { color: white; + background: $primary; height: 100%; overflow: auto; width: 100%; position: absolute; } - &__item { - @include box(true); + &__button { width: fit-content; - padding: .25rem; - font-size: .75rem; gap: .25rem; display: inline-flex; align-items: center; justify-content: center; - cursor: pointer; } &__collapsable-item { @@ -119,6 +206,6 @@ align-items: center; justify-content: center; cursor: pointer; - z-index: 2; + z-index: 9999999; } } \ No newline at end of file diff --git a/src/components/d-screen/DScreen.tsx b/src/components/d-screen/DScreen.tsx index 485790ae..899e7295 100644 --- a/src/components/d-screen/DScreen.tsx +++ b/src/components/d-screen/DScreen.tsx @@ -1,28 +1,30 @@ -"use client" - -import React, {useEffect, useMemo, useRef, useState} from "react"; -import {Code0Component} from "../../utils/types"; import "./DScreen.style.scss" -import {getChild, mergeCode0Props} from "../../utils/utils"; +import React from "react"; +import {Code0Component} from "../../utils/types"; +import {getChild, getContent} from "../../utils/utils"; +import Bar, {DScreenBarProps} from "./DScreenBar"; export interface DScreenProps extends Code0Component { - children: React.ReactElement & DScreenContentProps>[] + children: React.ReactElement[] } const DScreen: React.FC = (props) => { const {children} = props - const vBarTop = getChild(children, VBarTop, false) - const vBarBottom = getChild(children, VBarBottom, false) - const hBarLeft = getChild(children, HBarLeft, false) - const hBarRight = getChild(children, HBarRight, false) - const content = getChild(children, Content, true) + const vBarTop = getChild(children, Bar, false, {"type": "top"}) + const vBarBottom = getChild(children, Bar, false, {"type": "bottom"}) + const hBarLeft = getChild(children, Bar, false, {"type": "left"}) + const hBarRight = getChild(children, Bar, false, {"type": "right"}) + const content = getContent(children, Bar) + return
{vBarTop ? vBarTop : null} {content ? ( -
+
{hBarLeft ? hBarLeft : null} -
- {content} +
+
+ {content} +
{hBarRight ? hBarRight : null}
@@ -31,130 +33,5 @@ const DScreen: React.FC = (props) => {
} -interface DScreenBarProps extends Omit, "children"> { - children: React.ReactElement[] | React.ReactElement | ((collapsed: boolean, collapse: () => void) => React.ReactElement[] | React.ReactElement) - //defaults to false - collapsed?: boolean -} - -export interface DScreenVBarProps extends DScreenBarProps { - type: 'top' | 'bottom' -} - -export interface DScreenHBarProps extends DScreenBarProps { - type: 'left' | 'right' -} - -const Bar = (barType: 'v' | 'h'): React.FC => (props) => { - const {type, children, collapsed = false, ...rest} = props - const [stateCollapsed, setStateCollapsed] = useState(collapsed) - const barRef = useRef(null) - - const collapse = () => { - setStateCollapsed(prevState => !prevState) - } - - const child = typeof children === "function" ? useMemo(() => children(stateCollapsed, collapse), [stateCollapsed]) : children - - return
- {child} -
-} - -const VBar: React.FC = Bar("v") -const HBar: React.FC = Bar("h") -const VBarTop: React.FC> = (props) => -const VBarBottom: React.FC> = (props) => -const HBarLeft: React.FC> = (props) => -const HBarRight: React.FC> = (props) => - -export interface DScreenBarContentProps extends Code0Component { - children: React.ReactNode | React.ReactNode[] - mediaMinHeight?: number - mediaMinWidth?: number - mediaMaxHeight?: number - mediaMaxWidth?: number -} - -const BarContent: React.FC = props => { - const { - children, - mediaMinHeight = 0, - mediaMinWidth = 0, - mediaMaxHeight = 0, - mediaMaxWidth = 0, - ...rest - } = props - const contentRef = useRef(null) - - const resizeCallback = () => { - if (!contentRef.current) return - if ((window.innerWidth >= mediaMinWidth && window.innerWidth < (mediaMaxWidth == 0 ? window.innerWidth + 1 : mediaMaxWidth)) - && (window.innerHeight >= mediaMinHeight && window.innerHeight < (mediaMaxHeight == 0 ? window.innerHeight + 1 : mediaMaxHeight))) { - contentRef.current.style.display = "flex" - } else { - contentRef.current.style.display = "none" - } - } - - useEffect(() => { - window.addEventListener('resize', resizeCallback) - resizeCallback() - return () => window.removeEventListener('resize', resizeCallback) - }, [mediaMinHeight, mediaMinWidth, mediaMaxHeight, mediaMaxWidth]) - - return
- {props.children} -
-} - -export interface DScreenContentProps extends Code0Component { - children: React.ReactNode[] | React.ReactNode -} - -const Content: React.FC = (props) => { - const {children, ...rest} = props - return
- {children} -
-} - -export interface DScreenItemProps extends Code0Component { - children: React.ReactNode[] | React.ReactNode - //defaults to false - active?: boolean -} - -const Item: React.FC = (props) => { - const {children, active, ...rest} = props - return - {children} - -} - -export interface DScreenCollapsableItemProps extends Code0Component { - children: React.ReactNode[] | React.ReactNode -} - -const CollapsableItem: React.FC = props => { - const {children, ...rest} = props - return
- {children} -
-} - -export default Object.assign(DScreen, { - VBar: { - Top: VBarTop, - Bottom: VBarBottom - }, - HBar: { - Left: HBarLeft, - Right: HBarRight - }, - Content, - Item, - BarContent, - CollapsableItem -}) +export default DScreen as React.FC diff --git a/src/components/d-screen/DScreenBar.tsx b/src/components/d-screen/DScreenBar.tsx new file mode 100644 index 00000000..efc84110 --- /dev/null +++ b/src/components/d-screen/DScreenBar.tsx @@ -0,0 +1,400 @@ +"use client" + +import {Code0Component} from "../../utils/types"; +import React, {useEffect, useMemo, useRef, useState} from "react"; +import {getOverlapSize} from "overlap-area"; +import {mergeCode0Props} from "../../utils/utils"; +import {IconLayoutBottombarExpand} from "@tabler/icons-react"; + +export interface DScreenBarProps extends Omit, "children"> { + children: React.ReactNode[] | React.ReactNode | ((collapsed: boolean, collapse: () => void) => React.ReactNode[] | React.ReactNode) + type: 'top' | 'bottom' | 'left' | 'right' + //defaults to false + collapsed?: boolean + resizeable?: boolean + //defaults to 20px + resizeAreaDimensions?: number +} + +const getElementArea = (element: Element | null | undefined) => { + const height = element?.clientHeight ?? 0 + const width = element?.clientWidth ?? 0 + + const leftX = element?.getBoundingClientRect().left ?? 0 + const rightX = leftX + width + const topY = element?.getBoundingClientRect().top ?? 0 + const bottomY = topY + height + + return { + height, + width, + leftX, + rightX, + topY, + bottomY + } +} + +const isMouseInArea = (coordinates: any, mouseX: number, mouseY: number) => { + return mouseX >= coordinates.leftX + && mouseX <= coordinates.rightX + && mouseY >= coordinates.topY + && mouseY <= coordinates.bottomY +} + +const getShiftPercentage = (firstArea: any, secondArea: any): number | undefined => { + + const points1 = [ + [firstArea.leftX, firstArea.topY], + [firstArea.leftX, firstArea.bottomY], + [firstArea.rightX, firstArea.bottomY], + [firstArea.rightX, firstArea.topY], + ] + + const points2 = [ + [secondArea.leftX, secondArea.topY], + [secondArea.leftX, secondArea.bottomY], + [secondArea.rightX, secondArea.bottomY], + [secondArea.rightX, secondArea.topY], + ] + + const isLeft = firstArea.leftX <= secondArea.leftX + const isTop = firstArea.topY <= secondArea.topY + + const overlapAreaInPxSquared = getOverlapSize(points1, points2) + const resizeAreaPxSquared = (firstArea.rightX - firstArea.leftX) * (firstArea.bottomY - firstArea.topY) + const shiftPercentage = Math.min(overlapAreaInPxSquared / resizeAreaPxSquared, 1) + + const negativePositiveNumber = isLeft && isTop ? shiftPercentage : -(shiftPercentage) + + return shiftPercentage == 0 ? undefined : negativePositiveNumber +} + +const getResizeArea = (element: Element | undefined | null, shiftPercentage: number | undefined, resizeAreaDimensions: number = 25) => { + + const type = element?.getAttribute("data-bar-position") as 'top' | 'bottom' | 'left' | 'right' + const oppositeType = type === "left" ? "right" : type === "right" ? "left" : type === "top" ? "bottom" : "top" + + const elementParent = element?.parentElement + const elementCoordinates = getElementArea(element) + const defaultResizeArea: any = shiftPercentage == undefined ? getResizeArea(element, 0) : {} + + if (shiftPercentage == undefined) { + const elementsScope = elementParent?.querySelector(`:scope > [data-bar-position=${oppositeType}]`) + const resizeArea = getResizeArea(elementsScope, 0) + shiftPercentage = getShiftPercentage(defaultResizeArea, resizeArea) + } + + if (shiftPercentage == undefined) { + shiftPercentage = Array.from(document.querySelectorAll(`[data-bar-axis=${element?.getAttribute("data-bar-axis")}]`)).filter(elementParent => elementParent != element).map(elementParent => { + const resizeArea: any = getResizeArea(elementParent, 0) + return getShiftPercentage(defaultResizeArea, resizeArea) + }).filter(elementParent => !!elementParent)[0] + } + + if (shiftPercentage == undefined) shiftPercentage = 0 + + + if (type === 'top') return { + leftX: elementCoordinates.leftX, + rightX: elementCoordinates.rightX, + topY: elementCoordinates.bottomY - (resizeAreaDimensions + (shiftPercentage * resizeAreaDimensions)), + bottomY: elementCoordinates.bottomY + (resizeAreaDimensions - (shiftPercentage * resizeAreaDimensions)) + } + + if (type === 'bottom') return { + leftX: elementCoordinates.leftX, + rightX: elementCoordinates.rightX, + topY: elementCoordinates.topY - (resizeAreaDimensions + (shiftPercentage * resizeAreaDimensions)), + bottomY: elementCoordinates.topY + (resizeAreaDimensions - (shiftPercentage * resizeAreaDimensions)) + } + + if (type === 'left') return { + leftX: elementCoordinates.rightX - (resizeAreaDimensions + (shiftPercentage * resizeAreaDimensions)), + rightX: elementCoordinates.rightX + (resizeAreaDimensions - (shiftPercentage * resizeAreaDimensions)), + topY: elementCoordinates.topY, + bottomY: elementCoordinates.bottomY + } + + if (type === 'right') return { + leftX: elementCoordinates.leftX - (resizeAreaDimensions + (shiftPercentage * resizeAreaDimensions)), + rightX: elementCoordinates.leftX + (resizeAreaDimensions - (shiftPercentage * resizeAreaDimensions)), + topY: elementCoordinates.topY, + bottomY: elementCoordinates.bottomY + } + + return { + leftX: -1, + rightX: -1, + topY: -1, + bottomY: -1 + } + +} + +const isInResizeArea = (bar: HTMLElement | null | undefined, event: MouseEvent | TouchEvent) => { + let inResizeArea = false + + const mousePositionY = (event instanceof MouseEvent ? event.clientY : event.touches[0].clientY) + const mousePositionX = (event instanceof MouseEvent ? event.clientX : event.touches[0].clientX) + + const barType = bar?.dataset['bar-position'] + const oppositeType = barType === "left" ? "right" : barType === "right" ? "left" : barType === "top" ? "bottom" : "top" + + const barResizeCoordinates = getElementArea(bar?.querySelector('[data-resize-label]')) + const mouseOverResize = isMouseInArea(barResizeCoordinates, mousePositionX, mousePositionY) + + const barParent = bar?.parentElement + const oppositeBar = barParent?.querySelector(`.d-screen__${barType}-bar--${oppositeType}`) + const oppositeBarResizeCoordinates = getElementArea(oppositeBar?.querySelector("[data-resize-label]")) + + inResizeArea = !bar?.ariaDisabled && (isMouseInArea(getResizeArea(bar, undefined), mousePositionX, mousePositionY)) + && (!isMouseInArea(oppositeBarResizeCoordinates, mousePositionX, mousePositionY)) || mouseOverResize + + + if (inResizeArea && bar) bar!!.dataset.resize = 'true' + else if (!inResizeArea && bar) delete bar!!.dataset.resize + const barActiveBars = barParent?.querySelectorAll("[data-resize]") ?? [] + + return inResizeArea && (barActiveBars.length < 2) +} + +const Bar: React.FC = (props) => { + const { + type = 'top', + children, + collapsed = false, + resizeable = false, + resizeAreaDimensions = 20, + ...rest + } = props + const barType = type === "left" || type === "right" ? "h" : "v" + const oppositeType = type === "left" ? "right" : type === "right" ? "left" : type === "top" ? "bottom" : "top" + const barRef = useRef(null) + const barResizeRef = useRef(null) + const [stateCollapsed, setStateCollapsed] = useState(collapsed) + const [sizePercent, setSizePercent] = useState<{ + left: number | undefined, + right: number | undefined, + top: number | undefined, + bottom: number | undefined + }>({left: undefined, right: undefined, top: undefined, bottom: undefined}) + const showResizeLabel = useMemo(() => { + const barSizePercent = sizePercent[type as "top" | "bottom" | "left" | "right"] + const oppositeBarSizePercent = sizePercent[oppositeType] ?? 0 + + if (!resizeable) return false + if (barSizePercent === undefined) return false + if (barSizePercent > 1) return false + return oppositeBarSizePercent + barSizePercent <= 99; + }, [sizePercent]) + const showOppositeResizeLabel = useMemo(() => { + const barSizePercent = sizePercent[type as "top" | "bottom" | "left" | "right"] ?? 0 + const oppositeBarSizePercent = sizePercent[oppositeType] ?? 0 + + if (!resizeable) return false + if (barSizePercent === undefined) return false + if (barSizePercent < 99) return false + return barSizePercent + oppositeBarSizePercent >= 99; + + }, [barRef, sizePercent]) + + + resizeable && useEffect(() => { + + const startW = barRef.current?.offsetWidth ?? 0 + const startH = barRef.current?.offsetHeight ?? 0 + const minW = barRef.current?.style.minWidth ? parseFloat(barRef.current!!.style.minWidth) : 0 + const maxW = barRef.current?.style.maxWidth ? parseFloat(barRef.current!!.style.maxWidth) : Infinity + const minH = barRef.current?.style.minHeight ? parseFloat(barRef.current!!.style.minHeight) : 0 + const maxH = barRef.current?.style.maxHeight ? parseFloat(barRef.current!!.style.maxHeight) : Infinity + + const setResizeStyle = (isInResizeArea: boolean) => { + const border = `border${[...oppositeType][0].toUpperCase() + [...oppositeType].slice(1).join('')}Color` as "borderTopColor" | "borderLeftColor" | "borderBottomColor" | "borderRightColor" + + if (isInResizeArea && barRef.current) { + barRef.current!!.style[border] = "#70ffb2" + } else if (!isInResizeArea && barRef.current) { + barRef.current!!.style[border] = "" + } + + const resize = document.querySelector("[data-resize]") + if (resize) document.body.style.cursor = resize.getAttribute("data-bar-axis") == "horizontal" ? "col-resize" : "row-resize" + else document.body.style.cursor = "" + } + + const onResize = (event: MouseEvent | TouchEvent) => { + + const barParent = barRef.current?.parentElement + let localSizePercent = Infinity + + setStateCollapsed(false) + + + if (barType === "h" && type === "left") { + const spacing = barRef.current?.getBoundingClientRect().left ?? 0 + const mousePosition = (event instanceof MouseEvent ? event.clientX : event.touches[0].clientX) + const widthPixel = Math.max(Math.min((mousePosition - spacing), maxW), minW) + const widthPixelAttaching = widthPixel <= (startW + 25) && widthPixel >= (startW - 25) ? startW : widthPixel + localSizePercent = Math.max(Math.min((((widthPixelAttaching) / (barParent?.offsetWidth ?? 0)) * 100), 100), 0) + } else if (barType === "h" && type === "right") { + const spacing = (barRef.current?.getBoundingClientRect().right ?? 0) - (barParent?.offsetWidth ?? 0) + const mousePosition = (barParent?.offsetWidth ?? 0) - (event instanceof MouseEvent ? event.clientX : event.touches[0].clientX) + const widthPixel = Math.max(Math.min((spacing + mousePosition), maxW), minW) + const widthPixelAttaching = widthPixel <= (startW + 25) && widthPixel >= (startW - 25) ? startW : widthPixel + localSizePercent = Math.max(Math.min((((widthPixelAttaching) / ((barParent?.offsetWidth ?? 0))) * 100), 100), 0) + } else if (barType === "v" && type === "top") { + const spacing = barRef.current?.getBoundingClientRect().top ?? 0 + const mousePosition = (event instanceof MouseEvent ? event.clientY : event.touches[0].clientY) + const widthPixel = Math.max(Math.min((mousePosition - spacing), maxH), minH) + const widthPixelAttaching = widthPixel <= (startH + 25) && widthPixel >= (startH - 25) ? startH : widthPixel + localSizePercent = Math.max(Math.min((((widthPixelAttaching) / (barParent?.offsetHeight ?? 0)) * 100), 100), 0) + } else if (barType === "v" && type === "bottom") { + const spacing = (barRef.current?.getBoundingClientRect().bottom ?? 0) - (barParent?.offsetHeight ?? 0) + const mousePosition = (barParent?.offsetHeight ?? 0) - (event instanceof MouseEvent ? event.clientY : event.touches[0].clientY) + const widthPixel = Math.max(Math.min((spacing + mousePosition), maxH), minH) + const widthPixelAttaching = widthPixel <= (startH + 25) && widthPixel >= (startH - 25) ? startH : widthPixel + localSizePercent = Math.max(Math.min((((widthPixelAttaching) / ((barParent?.offsetHeight ?? 0))) * 100), 100), 0) + } + + //set new width + if (barType === "h" && barRef.current) { + barRef.current!!.style.minWidth = `${localSizePercent}%` + barRef.current!!.style.maxWidth = `${localSizePercent}%` + barRef.current!!.style.width = `${localSizePercent}%` + } else if (barType === "v" && barRef.current) { + barRef.current!!.style.minHeight = `${localSizePercent}%` + barRef.current!!.style.height = `${localSizePercent}%` + } + + } + + const onCursorMove = (event: MouseEvent | TouchEvent) => { + const barParent = barRef.current?.parentElement + const inResizeArea = isInResizeArea(barRef.current, event) + setResizeStyle(inResizeArea) + + const allBars = barParent?.querySelectorAll(":scope > [data-bar-axis]") ?? [] + const allBarsSize = Array.from(allBars).map(bar => { + return {[bar.getAttribute("data-bar-position") ?? ""]: bar.getAttribute("data-bar-axis")?.startsWith("h") ? (bar.clientWidth / (barParent?.clientWidth ?? 0)) * 100 : (bar.clientHeight / (barParent?.clientHeight ?? 0)) * 100} + }).reduce((a, v) => ({...a, ...v})) as { left: number, right: number, top: number, bottom: number } + setSizePercent(allBarsSize) + } + + const onCursorDown = (event: MouseEvent | TouchEvent) => { + + //check if mouse is over bars resize Area + const inResizeArea = isInResizeArea(barRef.current, event) + if (!inResizeArea) return + + //disable all text selections for a better resizing experience + const selection = document.getSelection() + const disableSelect = (event: MouseEvent) => event.preventDefault(); + if (selection) selection.removeAllRanges() + + const onCursorUp = (event: MouseEvent | TouchEvent) => { + + //get content of parent + const content = barRef.current?.parentElement?.querySelector(":scope > [data-content]") + const childBars = content?.querySelectorAll("[data-bar-axis]") ?? [] + const scopeBars = barRef.current?.parentElement?.querySelectorAll(":scope > [data-bar-axis]") ?? [] + + scopeBars.forEach((scopeBar: Element) => { + + const barResizeArea = getResizeArea(scopeBar, undefined) + + childBars.forEach((bar: Element) => { + + const childResizeArea = getResizeArea(bar, undefined) + const overlappingPercentage = getShiftPercentage(barResizeArea, childResizeArea) + + + if (overlappingPercentage && (overlappingPercentage <= -0.4 || overlappingPercentage >= 0.4)) { + bar.ariaDisabled = "true" + } else { + bar.ariaDisabled = null + } + }) + }) + + window.removeEventListener("touchcancel", onCursorUp) + window.removeEventListener("touchend", onCursorUp) + window.removeEventListener("mouseup", onCursorUp) + + window.removeEventListener("selectstart", disableSelect) + + window.removeEventListener("mousemove", onResize) + window.removeEventListener("touchmove", onResize) + window.addEventListener("mousemove", onCursorMove) + } + + window.addEventListener("touchcancel", onCursorUp) + window.addEventListener("touchend", onCursorUp) + window.addEventListener("mouseup", onCursorUp) + + window.addEventListener('selectstart', disableSelect); + + window.addEventListener("mousemove", onResize) + window.addEventListener("touchmove", onResize) + + window.removeEventListener("mousemove", onCursorMove) + } + + window.addEventListener("touchstart", onCursorDown) + window.addEventListener("mousedown", onCursorDown) + window.addEventListener("mousemove", onCursorMove) + + return () => { + window.removeEventListener("touchstart", onCursorDown) + window.removeEventListener("mousedown", onCursorDown) + window.removeEventListener("mousemove", onCursorMove) + } + + }, [barRef, barResizeRef]); + + const collapse = () => { + setStateCollapsed(prevState => { + if (!prevState && resizeable && barRef.current && barType === "h") { + barRef.current!!.style.minWidth = "" + barRef.current!!.style.width = "" + } else if (!prevState && resizeable && barRef.current && barType === "v") { + barRef.current!!.style.minHeight = "" + barRef.current!!.style.height = "" + } + return !prevState + }) + + } + + const child = typeof children === "function" ? useMemo(() => children(stateCollapsed, collapse), [stateCollapsed]) : children + + return
+ {showResizeLabel &&
+ +
} + + + {showOppositeResizeLabel &&
+ +
} + +
+ {child} +
+
+} + +export default Bar as React.FC \ No newline at end of file diff --git a/src/components/d-screen/DScreenButton.tsx b/src/components/d-screen/DScreenButton.tsx new file mode 100644 index 00000000..400f2036 --- /dev/null +++ b/src/components/d-screen/DScreenButton.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import {mergeCode0Props} from "../../utils/utils"; +import Button, {ButtonProps} from "../button/Button"; + +export type DScreenButtonProps = ButtonProps + +const DScreenButton: React.FC = (props) => { + const {children, active, color = "secondary", ...rest} = props + + return +} + +export default DScreenButton as React.FC \ No newline at end of file diff --git a/src/components/d-screen/DScreenCollapsableItem.tsx b/src/components/d-screen/DScreenCollapsableItem.tsx new file mode 100644 index 00000000..ed232434 --- /dev/null +++ b/src/components/d-screen/DScreenCollapsableItem.tsx @@ -0,0 +1,16 @@ +import {Code0Component} from "../../utils/types"; +import React from "react"; +import {mergeCode0Props} from "../../utils/utils"; + +export interface DScreenCollapsableItemProps extends Code0Component { + children: React.ReactNode[] | React.ReactNode +} + +const DScreenCollapsableItem: React.FC = props => { + const {children, ...rest} = props + return
+ {children} +
+} + +export default DScreenCollapsableItem as React.FunctionComponent \ No newline at end of file diff --git a/src/components/dialog/Dialog.tsx b/src/components/dialog/Dialog.tsx index 828df90a..5c0404fd 100644 --- a/src/components/dialog/Dialog.tsx +++ b/src/components/dialog/Dialog.tsx @@ -11,13 +11,13 @@ import { import {Code0Component, Code0ComponentProps} from "../../utils/types"; import React, {useEffect} from "react"; import {mergeCode0Props} from "../../utils/utils"; -import Button, {ButtonType} from "../button/Button"; +import Button, {ButtonProps} from "../button/Button"; import "./Dialog.style.scss" export type DialogProps = AKDialogProviderProps -export type DialogDisclosureProps = ButtonType & AKDialogDisclosureProps +export type DialogDisclosureProps = ButtonProps & AKDialogDisclosureProps export type DialogModalProps = Code0ComponentProps & AKDialogProps -export type DialogDismissProps = ButtonType & AKDialogDismissProps +export type DialogDismissProps = ButtonProps & AKDialogDismissProps export interface DialogStickyContentProps extends Code0Component { children: React.ReactNode | React.ReactNode[] @@ -38,14 +38,14 @@ const DialogDisclosure: React.FC = (props) =>