From eb679464d8cda62c0cb420de8a70422c51bc2c1a Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Thu, 21 Aug 2025 05:35:07 +0530 Subject: [PATCH 01/20] chore: global css file added to tailwind config package --- packages/tailwind-config/global.css | 696 ++++++++++++++++++++++++++++ 1 file changed, 696 insertions(+) create mode 100644 packages/tailwind-config/global.css diff --git a/packages/tailwind-config/global.css b/packages/tailwind-config/global.css new file mode 100644 index 00000000000..1cf51692220 --- /dev/null +++ b/packages/tailwind-config/global.css @@ -0,0 +1,696 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer components { + .text-1\.5xl { + font-size: 1.375rem; + line-height: 1.875rem; + } + + .text-2\.5xl { + font-size: 1.75rem; + line-height: 2.25rem; + } +} + +@layer base { + html { + font-family: "Inter", sans-serif; + } + + :root { + color-scheme: light !important; + + --color-primary-10: 229, 243, 250; + --color-primary-20: 216, 237, 248; + --color-primary-30: 199, 229, 244; + --color-primary-40: 169, 214, 239; + --color-primary-50: 144, 202, 234; + --color-primary-60: 109, 186, 227; + --color-primary-70: 75, 170, 221; + --color-primary-80: 41, 154, 214; + --color-primary-90: 34, 129, 180; + --color-primary-100: 0, 99, 153; + --color-primary-200: 0, 92, 143; + --color-primary-300: 0, 86, 133; + --color-primary-400: 0, 77, 117; + --color-primary-500: 0, 66, 102; + --color-primary-600: 0, 53, 82; + --color-primary-700: 0, 43, 66; + --color-primary-800: 0, 33, 51; + --color-primary-900: 0, 23, 36; + + --color-background-100: 255, 255, 255; /* primary bg */ + --color-background-90: 247, 247, 247; /* secondary bg */ + --color-background-80: 232, 232, 232; /* tertiary bg */ + + --color-text-100: 23, 23, 23; /* primary text */ + --color-text-200: 58, 58, 58; /* secondary text */ + --color-text-300: 82, 82, 82; /* tertiary text */ + --color-text-400: 163, 163, 163; /* placeholder text */ + + --color-scrollbar: 163, 163, 163; /* scrollbar thumb */ + + --color-border-100: 245, 245, 245; /* subtle border= 1 */ + --color-border-200: 229, 229, 229; /* subtle border- 2 */ + --color-border-300: 212, 212, 212; /* strong border- 1 */ + --color-border-400: 185, 185, 185; /* strong border- 2 */ + + --color-shadow-2xs: + 0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06), + 0px 1px 2px 0px rgba(23, 23, 23, 0.14); + --color-shadow-xs: + 0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12), + 0px 1px 8px -1px rgba(16, 24, 40, 0.1); + --color-shadow-sm: + 0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12); + --color-shadow-rg: + 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08), + 0px 1px 12px 0px rgba(16, 24, 40, 0.04); + --color-shadow-md: + 0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12), + 0px 1px 16px 0px rgba(16, 24, 40, 0.12); + --color-shadow-lg: + 0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12), + 0px 1px 24px 0px rgba(16, 24, 40, 0.12); + --color-shadow-xl: + 0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16), + 0px 0px 52px 0px rgba(16, 24, 40, 0.16); + --color-shadow-2xl: + 0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12), + 0px 1px 32px 0px rgba(16, 24, 40, 0.12); + --color-shadow-3xl: + 0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12), + 0px 1px 48px 0px rgba(16, 24, 40, 0.12); + --color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), 0px 12px 32px -16px rgba(0, 0, 0, 0.05); + + --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */ + --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */ + --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */ + + --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */ + --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */ + --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */ + --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */ + + --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */ + --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */ + --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */ + --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */ + + --color-sidebar-shadow-2xs: var(--color-shadow-2xs); + --color-sidebar-shadow-xs: var(--color-shadow-xs); + --color-sidebar-shadow-sm: var(--color-shadow-sm); + --color-sidebar-shadow-rg: var(--color-shadow-rg); + --color-sidebar-shadow-md: var(--color-shadow-md); + --color-sidebar-shadow-lg: var(--color-shadow-lg); + --color-sidebar-shadow-xl: var(--color-shadow-xl); + --color-sidebar-shadow-2xl: var(--color-shadow-2xl); + --color-sidebar-shadow-3xl: var(--color-shadow-3xl); + --color-sidebar-shadow-4xl: var(--color-shadow-4xl); + + /* pi */ + --color-pi-50: var(--color-background-90); + --color-pi-100: var(--color-background-90); + --color-pi-200: var(--color-primary-200); + --color-pi-300: var(--color-primary-200); + --color-pi-400: var(--color-primary-200); + --color-pi-500: var(--color-primary-200); + --color-pi-600: 151, 150, 246; + --color-pi-700: var(--color-primary-100); + --color-pi-800: 57, 56, 149; + --color-pi-900: 30, 29, 78; + --color-pi-950: 14, 14, 37; + } + + [data-theme="light"], + [data-theme="light-contrast"] { + color-scheme: light !important; + + --color-background-100: 255, 255, 255; /* primary bg */ + --color-background-90: 247, 247, 247; /* secondary bg */ + --color-background-80: 232, 232, 232; /* tertiary bg */ + + /* pi */ + --color-pi-50: var(--color-background-90); + --color-pi-100: var(--color-background-90); + --color-pi-200: var(--color-primary-200); + --color-pi-300: var(--color-primary-200); + --color-pi-400: var(--color-primary-200); + --color-pi-500: var(--color-primary-200); + --color-pi-600: 151, 150, 246; + --color-pi-700: var(--color-primary-100); + --color-pi-800: 57, 56, 149; + --color-pi-900: 30, 29, 78; + --color-pi-950: 14, 14, 37; + } + + [data-theme="light"] { + --color-text-100: 23, 23, 23; /* primary text */ + --color-text-200: 58, 58, 58; /* secondary text */ + --color-text-300: 82, 82, 82; /* tertiary text */ + --color-text-400: 163, 163, 163; /* placeholder text */ + + --color-scrollbar: 163, 163, 163; /* scrollbar thumb */ + + --color-border-100: 245, 245, 245; /* subtle border= 1 */ + --color-border-200: 229, 229, 229; /* subtle border- 2 */ + --color-border-300: 212, 212, 212; /* strong border- 1 */ + --color-border-400: 185, 185, 185; /* strong border- 2 */ + + /* onboarding colors */ + --gradient-onboarding-100: linear-gradient(106deg, #f2f6ff 29.8%, #e1eaff 99.34%); + --gradient-onboarding-200: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%); + --gradient-onboarding-300: linear-gradient(164deg, #fff 4.25%, rgba(255, 255, 255, 0.06) 93.5%); + --gradient-onboarding-400: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%); + + --color-onboarding-text-100: 23, 23, 23; + --color-onboarding-text-200: 58, 58, 58; + --color-onboarding-text-300: 82, 82, 82; + --color-onboarding-text-400: 163, 163, 163; + + --color-onboarding-background-100: 236, 241, 255; + --color-onboarding-background-200: 255, 255, 255; + --color-onboarding-background-300: 236, 241, 255; + --color-onboarding-background-400: 177, 206, 250; + + --color-onboarding-border-100: 229, 229, 229; + --color-onboarding-border-200: 217, 228, 255; + --color-onboarding-border-300: 229, 229, 229, 0.5; + + --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1); + + /* toast theme */ + --color-toast-success-text: 62, 155, 79; + --color-toast-error-text: 220, 62, 66; + --color-toast-warning-text: 255, 186, 24; + --color-toast-info-text: 51, 88, 212; + --color-toast-loading-text: 28, 32, 36; + --color-toast-secondary-text: 128, 131, 141; + --color-toast-tertiary-text: 96, 100, 108; + + --color-toast-success-background: 253, 253, 254; + --color-toast-error-background: 255, 252, 252; + --color-toast-warning-background: 254, 253, 251; + --color-toast-info-background: 253, 253, 254; + --color-toast-loading-background: 253, 253, 254; + + --color-toast-success-border: 218, 241, 219; + --color-toast-error-border: 255, 219, 220; + --color-toast-warning-border: 255, 247, 194; + --color-toast-info-border: 210, 222, 255; + --color-toast-loading-border: 224, 225, 230; + } + + [data-theme="light-contrast"] { + --color-text-100: 11, 11, 11; /* primary text */ + --color-text-200: 38, 38, 38; /* secondary text */ + --color-text-300: 58, 58, 58; /* tertiary text */ + --color-text-400: 115, 115, 115; /* placeholder text */ + + --color-scrollbar: 115, 115, 115; /* scrollbar thumb */ + + --color-border-100: 34, 34, 34; /* subtle border= 1 */ + --color-border-200: 38, 38, 38; /* subtle border- 2 */ + --color-border-300: 46, 46, 46; /* strong border- 1 */ + --color-border-400: 58, 58, 58; /* strong border- 2 */ + } + + [data-theme="dark"], + [data-theme="dark-contrast"] { + color-scheme: dark !important; + + --color-primary-10: 8, 31, 43; + --color-primary-20: 10, 37, 51; + --color-primary-30: 13, 49, 69; + --color-primary-40: 16, 58, 81; + --color-primary-50: 18, 68, 94; + --color-primary-60: 23, 86, 120; + --color-primary-70: 28, 104, 146; + --color-primary-80: 31, 116, 163; + --color-primary-90: 34, 129, 180; + --color-primary-100: 40, 146, 204; + --color-primary-200: 41, 154, 214; + --color-primary-300: 75, 170, 221; + --color-primary-400: 109, 186, 227; + --color-primary-500: 144, 202, 234; + --color-primary-600: 169, 214, 239; + --color-primary-700: 199, 229, 244; + --color-primary-800: 216, 237, 248; + --color-primary-900: 229, 243, 250; + + --color-background-100: 25, 25, 25; /* primary bg */ + --color-background-90: 32, 32, 32; /* secondary bg */ + --color-background-80: 44, 44, 44; /* tertiary bg */ + + --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5); + --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5); + --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5); + --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5); + --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5); + --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55); + --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55); + --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6); + --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65); + /* pi */ + --color-pi-50: var(--color-background-90); + --color-pi-100: var(--color-background-90); + --color-pi-200: var(--color-primary-200); + --color-pi-300: var(--color-primary-200); + --color-pi-400: var(--color-primary-200); + --color-pi-500: var(--color-primary-200); + --color-pi-600: 151, 150, 246; + --color-pi-700: var(--color-primary-100); + --color-pi-800: 57, 56, 149; + --color-pi-900: 30, 29, 78; + --color-pi-950: 14, 14, 37; + } + + [data-theme="dark"] { + --color-text-100: 229, 229, 229; /* primary text */ + --color-text-200: 163, 163, 163; /* secondary text */ + --color-text-300: 115, 115, 115; /* tertiary text */ + --color-text-400: 82, 82, 82; /* placeholder text */ + + --color-scrollbar: 82, 82, 82; /* scrollbar thumb */ + + --color-border-100: 34, 34, 34; /* subtle border= 1 */ + --color-border-200: 38, 38, 38; /* subtle border- 2 */ + --color-border-300: 46, 46, 46; /* strong border- 1 */ + --color-border-400: 58, 58, 58; /* strong border- 2 */ + + /* onboarding colors */ + --gradient-onboarding-100: linear-gradient(106deg, #18191b 25.17%, #18191b 99.34%); + --gradient-onboarding-200: linear-gradient(129deg, rgba(47, 49, 53, 0.8) -22.23%, rgba(33, 34, 37, 0.8) 62.98%); + --gradient-onboarding-300: linear-gradient(167deg, rgba(47, 49, 53, 0.45) 19.22%, #212225 98.48%); + + --color-onboarding-text-100: 237, 238, 240; + --color-onboarding-text-200: 176, 180, 187; + --color-onboarding-text-300: 118, 123, 132; + --color-onboarding-text-400: 105, 110, 119; + + --color-onboarding-background-100: 54, 58, 64; + --color-onboarding-background-200: 40, 42, 45; + --color-onboarding-background-300: 40, 42, 45; + --color-onboarding-background-400: 67, 72, 79; + + --color-onboarding-border-100: 54, 58, 64; + --color-onboarding-border-200: 54, 58, 64; + --color-onboarding-border-300: 34, 35, 38, 0.5; + + --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1); + + /* toast theme */ + --color-toast-success-text: 178, 221, 181; + --color-toast-error-text: 206, 44, 49; + --color-toast-warning-text: 255, 186, 24; + --color-toast-info-text: 141, 164, 239; + --color-toast-loading-text: 255, 255, 255; + --color-toast-secondary-text: 185, 187, 198; + --color-toast-tertiary-text: 139, 141, 152; + + --color-toast-success-background: 46, 46, 46; + --color-toast-error-background: 46, 46, 46; + --color-toast-warning-background: 46, 46, 46; + --color-toast-info-background: 46, 46, 46; + --color-toast-loading-background: 46, 46, 46; + + --color-toast-success-border: 42, 126, 59; + --color-toast-error-border: 100, 23, 35; + --color-toast-warning-border: 79, 52, 34; + --color-toast-info-border: 58, 91, 199; + --color-toast-loading-border: 96, 100, 108; + } + + [data-theme="dark-contrast"] { + --color-text-100: 250, 250, 250; /* primary text */ + --color-text-200: 241, 241, 241; /* secondary text */ + --color-text-300: 212, 212, 212; /* tertiary text */ + --color-text-400: 115, 115, 115; /* placeholder text */ + + --color-scrollbar: 115, 115, 115; /* scrollbar thumb */ + + --color-border-100: 245, 245, 245; /* subtle border= 1 */ + --color-border-200: 229, 229, 229; /* subtle border- 2 */ + --color-border-300: 212, 212, 212; /* strong border- 1 */ + --color-border-400: 185, 185, 185; /* strong border- 2 */ + } + + [data-theme="light"], + [data-theme="dark"], + [data-theme="light-contrast"], + [data-theme="dark-contrast"] { + --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */ + --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */ + --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */ + + --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */ + --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */ + --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */ + --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */ + + --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */ + --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */ + --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */ + --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */ + } +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + font-variant-ligatures: none; + -webkit-font-variant-ligatures: none; + text-rendering: optimizeLegibility; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} + +body { + color: rgba(var(--color-text-100)); +} + +/* scrollbar style */ +::-webkit-scrollbar { + display: none; +} + +.tags-input-container { + border: 2px solid #000; + padding: 0.5em; + border-radius: 3px; + width: min(80vw, 600px); + margin-top: 1em; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0.5em; +} + +.tag-item { + background-color: rgb(218, 216, 216); + display: inline-block; + padding: 0.5em 0.75em; + border-radius: 20px; +} +.tag-item .close { + height: 20px; + width: 20px; + background-color: rgb(48, 48, 48); + color: #fff; + border-radius: 50%; + display: inline-flex; + justify-content: center; + align-items: center; + margin-left: 0.5em; + font-size: 18px; + cursor: pointer; +} + +.tags-input { + flex-grow: 1; + padding: 0.5em 0; + border: none; + outline: none; +} + +/* emoji icon picker */ +.conical-gradient { + background: conic-gradient( + from 180deg at 50% 50%, + #ff6b00 0deg, + #f7ae59 70.5deg, + #3f76ff 151.12deg, + #05c3ff 213deg, + #18914f 289.87deg, + #f6f172 329.25deg, + #ff6b00 360deg + ); +} + +/* progress bar */ +.progress-bar { + fill: currentColor; + color: rgba(var(--color-sidebar-background-100)); +} + +/* lineclamp */ +.lineclamp { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; +} + +/* popover2 styling */ +.bp4-popover2-transition-container { + z-index: 1 !important; +} + +::-webkit-input-placeholder, +::placeholder, +:-ms-input-placeholder { + color: rgb(var(--color-text-400)); +} + +.bp4-overlay-content { + z-index: 555 !important; +} + +.disable-scroll { + overflow: hidden !important; +} + +.vertical-lr { + writing-mode: vertical-lr; + -webkit-writing-mode: vertical-lr; + -ms-writing-mode: vertical-lr; + width: fit-content; +} + +div.web-view-spinner { + position: relative; + width: 54px; + height: 54px; + display: inline-block; + margin-left: 50%; + margin-right: 50%; + padding: 10px; + border-radius: 10px; +} + +div.web-view-spinner div { + width: 6%; + height: 16%; + background: rgb(var(--color-text-400)); + position: absolute; + left: 49%; + top: 43%; + opacity: 0; + border-radius: 50px; + -webkit-border-radius: 50px; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); + animation: fade 1s linear infinite; + -webkit-animation: fade 1s linear infinite; +} + +@keyframes fade { + from { + opacity: 1; + } + to { + opacity: 0.25; + } +} +@-webkit-keyframes fade { + from { + opacity: 1; + } + to { + opacity: 0.25; + } +} + +div.web-view-spinner div.bar1 { + transform: rotate(0deg) translate(0, -130%); + -webkit-transform: rotate(0deg) translate(0, -130%); + animation-delay: 0s; + -webkit-animation-delay: 0s; +} + +div.web-view-spinner div.bar2 { + transform: rotate(30deg) translate(0, -130%); + -webkit-transform: rotate(30deg) translate(0, -130%); + animation-delay: -0.9167s; + -webkit-animation-delay: -0.9167s; +} + +div.web-view-spinner div.bar3 { + transform: rotate(60deg) translate(0, -130%); + -webkit-transform: rotate(60deg) translate(0, -130%); + animation-delay: -0.833s; + -webkit-animation-delay: -0.833s; +} +div.web-view-spinner div.bar4 { + transform: rotate(90deg) translate(0, -130%); + -webkit-transform: rotate(90deg) translate(0, -130%); + animation-delay: -0.7497s; + -webkit-animation-delay: -0.7497s; +} +div.web-view-spinner div.bar5 { + transform: rotate(120deg) translate(0, -130%); + -webkit-transform: rotate(120deg) translate(0, -130%); + animation-delay: -0.667s; + -webkit-animation-delay: -0.667s; +} +div.web-view-spinner div.bar6 { + transform: rotate(150deg) translate(0, -130%); + -webkit-transform: rotate(150deg) translate(0, -130%); + animation-delay: -0.5837s; + -webkit-animation-delay: -0.5837s; +} +div.web-view-spinner div.bar7 { + transform: rotate(180deg) translate(0, -130%); + -webkit-transform: rotate(180deg) translate(0, -130%); + animation-delay: -0.5s; + -webkit-animation-delay: -0.5s; +} +div.web-view-spinner div.bar8 { + transform: rotate(210deg) translate(0, -130%); + -webkit-transform: rotate(210deg) translate(0, -130%); + animation-delay: -0.4167s; + -webkit-animation-delay: -0.4167s; +} +div.web-view-spinner div.bar9 { + transform: rotate(240deg) translate(0, -130%); + -webkit-transform: rotate(240deg) translate(0, -130%); + animation-delay: -0.333s; + -webkit-animation-delay: -0.333s; +} +div.web-view-spinner div.bar10 { + transform: rotate(270deg) translate(0, -130%); + -webkit-transform: rotate(270deg) translate(0, -130%); + animation-delay: -0.2497s; + -webkit-animation-delay: -0.2497s; +} +div.web-view-spinner div.bar11 { + transform: rotate(300deg) translate(0, -130%); + -webkit-transform: rotate(300deg) translate(0, -130%); + animation-delay: -0.167s; + -webkit-animation-delay: -0.167s; +} +div.web-view-spinner div.bar12 { + transform: rotate(330deg) translate(0, -130%); + -webkit-transform: rotate(330deg) translate(0, -130%); + animation-delay: -0.0833s; + -webkit-animation-delay: -0.0833s; +} + +@-moz-document url-prefix() { + * { + scrollbar-width: none; + } + .vertical-scrollbar, + .horizontal-scrollbar { + scrollbar-width: initial; + scrollbar-color: rgba(96, 100, 108, 0.1) transparent; + } + .vertical-scrollbar:hover, + .horizontal-scrollbar:hover { + scrollbar-color: rgba(96, 100, 108, 0.25) transparent; + } + .vertical-scrollbar:active, + .horizontal-scrollbar:active { + scrollbar-color: rgba(96, 100, 108, 0.7) transparent; + } +} + +.vertical-scrollbar { + overflow-y: auto; +} +.horizontal-scrollbar { + overflow-x: auto; +} +.vertical-scrollbar::-webkit-scrollbar, +.horizontal-scrollbar::-webkit-scrollbar { + display: block; +} +.vertical-scrollbar::-webkit-scrollbar-track, +.horizontal-scrollbar::-webkit-scrollbar-track { + background-color: transparent; + border-radius: 9999px; +} +.vertical-scrollbar::-webkit-scrollbar-thumb, +.horizontal-scrollbar::-webkit-scrollbar-thumb { + background-clip: padding-box; + background-color: rgba(96, 100, 108, 0.1); + border-radius: 9999px; +} +.vertical-scrollbar:hover::-webkit-scrollbar-thumb, +.horizontal-scrollbar:hover::-webkit-scrollbar-thumb { + background-color: rgba(96, 100, 108, 0.25); +} +.vertical-scrollbar::-webkit-scrollbar-thumb:hover, +.horizontal-scrollbar::-webkit-scrollbar-thumb:hover { + background-color: rgba(96, 100, 108, 0.5); +} +.vertical-scrollbar::-webkit-scrollbar-thumb:active, +.horizontal-scrollbar::-webkit-scrollbar-thumb:active { + background-color: rgba(96, 100, 108, 0.7); +} +.vertical-scrollbar::-webkit-scrollbar-corner, +.horizontal-scrollbar::-webkit-scrollbar-corner { + background-color: transparent; +} +.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track { + margin-top: 44px; +} + +/* scrollbar sm size */ +.scrollbar-sm::-webkit-scrollbar { + height: 12px; + width: 12px; +} +.scrollbar-sm::-webkit-scrollbar-thumb { + border: 3px solid rgba(0, 0, 0, 0); +} +/* scrollbar md size */ +.scrollbar-md::-webkit-scrollbar { + height: 14px; + width: 14px; +} +.scrollbar-md::-webkit-scrollbar-thumb { + border: 3px solid rgba(0, 0, 0, 0); +} +/* scrollbar lg size */ + +.scrollbar-lg::-webkit-scrollbar { + height: 16px; + width: 16px; +} +.scrollbar-lg::-webkit-scrollbar-thumb { + border: 4px solid rgba(0, 0, 0, 0); +} + +/* highlight class */ +.highlight { + border: 1px solid rgb(var(--color-primary-100)) !important; +} +.highlight-with-line { + border-left: 5px solid rgb(var(--color-primary-100)) !important; + background: rgb(var(--color-background-80)); +} + +/* By applying below class, the autofilled text in form fields will not have the default autofill background color and styles applied by WebKit browsers */ + +.disable-autofill-style:-webkit-autofill, +.disable-autofill-style:-webkit-autofill:hover, +.disable-autofill-style:-webkit-autofill:focus, +.disable-autofill-style:-webkit-autofill:active { + -webkit-background-clip: text; +} From 583cb4d111825a34555c7ec3a873d2d3a07d939c Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Thu, 21 Aug 2025 05:36:01 +0530 Subject: [PATCH 02/20] chore: tailwind config updated --- packages/tailwind-config/tailwind.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/tailwind-config/tailwind.config.js b/packages/tailwind-config/tailwind.config.js index cc8c1139220..2ed513003f4 100644 --- a/packages/tailwind-config/tailwind.config.js +++ b/packages/tailwind-config/tailwind.config.js @@ -18,6 +18,7 @@ module.exports = { "./pages/**/*.tsx", "./app/**/*.tsx", "./ui/**/*.tsx", + "./propel/**/*.{js,ts,jsx,tsx}", "../../packages/ui/src/**/*.{js,ts,jsx,tsx}", "../../packages/propel/src/**/*.{js,ts,jsx,tsx}", "../../packages/editor/src/**/*.{js,ts,jsx,tsx}", From a145246d9421bc482d58415a524cd4ec754b11aa Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Thu, 21 Aug 2025 05:36:53 +0530 Subject: [PATCH 03/20] chore: cn utility function added to propel package --- packages/propel/src/utils/classname.tsx | 4 ++++ packages/propel/src/utils/index.ts | 1 + 2 files changed, 5 insertions(+) create mode 100644 packages/propel/src/utils/classname.tsx create mode 100644 packages/propel/src/utils/index.ts diff --git a/packages/propel/src/utils/classname.tsx b/packages/propel/src/utils/classname.tsx new file mode 100644 index 00000000000..a500a738583 --- /dev/null +++ b/packages/propel/src/utils/classname.tsx @@ -0,0 +1,4 @@ +import { clsx, type ClassValue } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs)); diff --git a/packages/propel/src/utils/index.ts b/packages/propel/src/utils/index.ts new file mode 100644 index 00000000000..c065afbecf1 --- /dev/null +++ b/packages/propel/src/utils/index.ts @@ -0,0 +1 @@ +export * from "./classname"; \ No newline at end of file From 4914fb33996d766549d656691c073d5309644773 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Thu, 21 Aug 2025 05:42:14 +0530 Subject: [PATCH 04/20] chore: storybook init --- .gitignore | 2 + packages/propel/.eslintrc.js | 2 +- packages/propel/.storybook/main.ts | 22 ++ packages/propel/.storybook/preview.ts | 15 + packages/propel/package.json | 12 +- pnpm-lock.yaml | 454 +++++++++++++++++++++++++- 6 files changed, 490 insertions(+), 17 deletions(-) create mode 100644 packages/propel/.storybook/main.ts create mode 100644 packages/propel/.storybook/preview.ts diff --git a/.gitignore b/.gitignore index a4917dedfe3..4baa3495a98 100644 --- a/.gitignore +++ b/.gitignore @@ -97,3 +97,5 @@ dev-editor # Redis *.rdb *.rdb.gz + +storybook-static diff --git a/packages/propel/.eslintrc.js b/packages/propel/.eslintrc.js index 0ce8953748f..69ccc20906b 100644 --- a/packages/propel/.eslintrc.js +++ b/packages/propel/.eslintrc.js @@ -1,7 +1,7 @@ /** @type {import("eslint").Linter.Config} */ module.exports = { root: true, - extends: ["@plane/eslint-config/library.js"], + extends: ["@plane/eslint-config/library.js", "plugin:storybook/recommended"], parser: "@typescript-eslint/parser", rules: { "import/order": [ diff --git a/packages/propel/.storybook/main.ts b/packages/propel/.storybook/main.ts new file mode 100644 index 00000000000..8c53a9ed07d --- /dev/null +++ b/packages/propel/.storybook/main.ts @@ -0,0 +1,22 @@ +import type { StorybookConfig } from '@storybook/react-vite'; + +import { join, dirname } from "path" + +/** +* This function is used to resolve the absolute path of a package. +* It is needed in projects that use Yarn PnP or are set up within a monorepo. +*/ +function getAbsolutePath(value: string): any { + return dirname(require.resolve(join(value, 'package.json'))) +} +const config: StorybookConfig = { + "stories": [ + "../src/**/*.stories.@(ts|tsx)", + ], + "addons": [], + "framework": { + "name": getAbsolutePath('@storybook/react-vite'), + "options": {} + } +}; +export default config; \ No newline at end of file diff --git a/packages/propel/.storybook/preview.ts b/packages/propel/.storybook/preview.ts new file mode 100644 index 00000000000..af30c2a9c2d --- /dev/null +++ b/packages/propel/.storybook/preview.ts @@ -0,0 +1,15 @@ +import type { Preview } from '@storybook/react-vite' +import "@plane/tailwind-config/global.css" + +const preview: Preview = { + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, +}; + +export default preview; \ No newline at end of file diff --git a/packages/propel/package.json b/packages/propel/package.json index 490d086de9e..50e6a6b4afe 100644 --- a/packages/propel/package.json +++ b/packages/propel/package.json @@ -9,7 +9,9 @@ "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"", "fix:lint": "eslint . --fix", "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\"", - "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist" + "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist", + "storybook": "storybook dev -p 6006", + "build-storybook": "storybook build" }, "exports": { "./avatar": "./src/avatar/index.ts", @@ -29,17 +31,23 @@ "@plane/utils": "workspace:*", "@tanstack/react-table": "^8.21.3", "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", "lucide-react": "^0.469.0", + "postcss": "^8.5.6", "react": "^18.3.1", "react-dom": "^18.3.1", - "recharts": "^2.15.1" + "recharts": "^2.15.1", + "tailwind-merge": "^3.3.1" }, "devDependencies": { "@plane/eslint-config": "workspace:*", "@plane/tailwind-config": "workspace:*", "@plane/typescript-config": "workspace:*", + "@storybook/react-vite": "^9.1.2", "@types/react": "18.3.1", "@types/react-dom": "18.3.0", + "eslint-plugin-storybook": "^9.1.2", + "storybook": "^9.1.2", "typescript": "5.8.3" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index abe64c2dfc0..82d2671e45e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -973,9 +973,15 @@ importers: class-variance-authority: specifier: ^0.7.1 version: 0.7.1 + clsx: + specifier: ^2.1.1 + version: 2.1.1 lucide-react: specifier: ^0.469.0 version: 0.469.0(react@18.3.1) + postcss: + specifier: ^8.5.6 + version: 8.5.6 react: specifier: ^18.3.1 version: 18.3.1 @@ -985,6 +991,9 @@ importers: recharts: specifier: ^2.15.1 version: 2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + tailwind-merge: + specifier: ^3.3.1 + version: 3.3.1 devDependencies: '@plane/eslint-config': specifier: workspace:* @@ -995,12 +1004,21 @@ importers: '@plane/typescript-config': specifier: workspace:* version: link:../typescript-config + '@storybook/react-vite': + specifier: ^9.1.2 + version: 9.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.46.3)(storybook@9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)) '@types/react': specifier: 18.3.1 version: 18.3.1 '@types/react-dom': specifier: 18.3.0 version: 18.3.0 + eslint-plugin-storybook: + specifier: ^9.1.2 + version: 9.1.2(eslint@8.57.1)(storybook@9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3) + storybook: + specifier: ^9.1.2 + version: 9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)) typescript: specifier: 5.8.3 version: 5.8.3 @@ -1342,8 +1360,8 @@ packages: resolution: {integrity: sha512-60X7qkglvrap8mn1lh2ebxXdZYtUcpd7gsmy9kLaBJ4i/WdY8PqTSdxyA8qraikqKQK5C1KRBKXqznrVapyNaw==} engines: {node: '>=6.9.0'} - '@babel/core@7.28.3': - resolution: {integrity: sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==} + '@babel/core@7.28.0': + resolution: {integrity: sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==} engines: {node: '>=6.9.0'} '@babel/generator@7.28.3': @@ -1362,8 +1380,8 @@ packages: resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==} engines: {node: '>=6.9.0'} - '@babel/helper-module-transforms@7.28.3': - resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==} + '@babel/helper-module-transforms@7.27.3': + resolution: {integrity: sha512-dSOvYwvyLsWBeIRyOeHXp5vPj5l1I011r52FM1+r1jCERv+aFXYk4whgQccYEGYxK2H3ZAIA8nuPkQ0HaUo3qg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 @@ -1957,6 +1975,15 @@ packages: resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} engines: {node: '>=12'} + '@joshwooding/vite-plugin-react-docgen-typescript@0.6.1': + resolution: {integrity: sha512-J4BaTocTOYFkMHIra1JDWrMWpNmBl4EkplIwHEsV8aeUOtdWjwSnln9U7twjMFTAEB7mptNtSKyVi1Y2W9sDJw==} + peerDependencies: + typescript: 5.8.3 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 + peerDependenciesMeta: + typescript: + optional: true + '@jridgewell/gen-mapping@0.3.13': resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==} @@ -2406,6 +2433,15 @@ packages: '@remirror/core-constants@3.0.0': resolution: {integrity: sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==} + '@rollup/pluginutils@5.2.0': + resolution: {integrity: sha512-qWJ2ZTbmumwiLFomfzTyt5Kng4hwPi9rwCYN4SHb6eaRU1KNO4ccxINHr/VhH4GgPlt1XfSTLX2LBTme8ne4Zw==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + '@rollup/rollup-android-arm-eabi@4.46.3': resolution: {integrity: sha512-UmTdvXnLlqQNOCJnyksjPs1G4GqXNGW1LrzCe8+8QoaLhhDeTXYBgJ3k6x61WIhlHX2U+VzEJ55TtIjR/HTySA==} cpu: [arm] @@ -2602,6 +2638,12 @@ packages: react-dom: optional: true + '@storybook/builder-vite@9.1.2': + resolution: {integrity: sha512-5Y7e5wnSzFxCGP63UNRRZVoxHe1znU4dYXazJBobAlEcUPBk7A0sH2716tA6bS4oz92oG9tgvn1g996hRrw4ow==} + peerDependencies: + storybook: ^9.1.2 + vite: ^5.0.0 || ^6.0.0 || ^7.0.0 + '@storybook/builder-webpack5@8.6.14': resolution: {integrity: sha512-YZYAqc6NBKoMTKZpjxnkMch6zDtMkBZdS/yaji1+wJX2QPFBwTbSh7SpeBxDp1S11gXSAJ4f1btUWeqSqo8nJA==} peerDependencies: @@ -2634,6 +2676,11 @@ packages: peerDependencies: storybook: ^8.6.14 + '@storybook/csf-plugin@9.1.2': + resolution: {integrity: sha512-bfMh6r+RieBLPWtqqYN70le2uTE4JzOYPMYSCagHykUti3uM/1vRFaZNkZtUsRy5GwEzE5jLdDXioG1lOEeT2Q==} + peerDependencies: + storybook: ^9.1.2 + '@storybook/global@5.0.0': resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==} @@ -2689,6 +2736,22 @@ packages: react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta storybook: ^8.6.14 + '@storybook/react-dom-shim@9.1.2': + resolution: {integrity: sha512-nw7BLAHCJswPZGsuL0Gs2AvFUWriusCTgPBmcHppSw/AqvT4XRFRDE+5q3j04/XKuZBrAA2sC4L+HuC0uzEChQ==} + peerDependencies: + 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: ^9.1.2 + + '@storybook/react-vite@9.1.2': + resolution: {integrity: sha512-dv3CBjOzmMoSyIotMtdmsBRjB25i19OjFP0IZqauLeUoVm6QddILW7JRcZVLrzhATyBEn+sEAdWQ4j79Z11HAg==} + engines: {node: '>=20.0.0'} + peerDependencies: + 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: ^9.1.2 + vite: ^5.0.0 || ^6.0.0 || ^7.0.0 + '@storybook/react-webpack5@8.6.14': resolution: {integrity: sha512-ka0q9tQBLruhO38sybP/MkZzejqAltce7HJTJ2KKbUYUlbvuG7m56tBX7DVC5JaImbsO3b8fqOrKH7gRt4KYrQ==} engines: {node: '>=18.0.0'} @@ -2716,6 +2779,18 @@ packages: typescript: optional: true + '@storybook/react@9.1.2': + resolution: {integrity: sha512-VVXu1HrhDExj/yj+heFYc8cgIzBruXy1UYT3LW0WiJyadgzYz3J41l/Lf/j2FCppyxwlXb19Uv51plb1F1C77w==} + engines: {node: '>=20.0.0'} + peerDependencies: + 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: ^9.1.2 + typescript: 5.8.3 + peerDependenciesMeta: + typescript: + optional: true + '@storybook/test@8.6.14': resolution: {integrity: sha512-GkPNBbbZmz+XRdrhMtkxPotCLOQ1BaGNp/gFZYdGDk2KmUWBKmvc5JxxOhtoXM2703IzNFlQHSSNnhrDZYuLlw==} peerDependencies: @@ -2845,12 +2920,22 @@ packages: resolution: {integrity: sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==} engines: {node: '>=14', npm: '>=6', yarn: '>=1'} + '@testing-library/jest-dom@6.6.3': + resolution: {integrity: sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==} + engines: {node: '>=14', npm: '>=6', yarn: '>=1'} + '@testing-library/user-event@14.5.2': resolution: {integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==} engines: {node: '>=12', npm: '>=6'} peerDependencies: '@testing-library/dom': '>=7.21.4' + '@testing-library/user-event@14.6.1': + resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==} + engines: {node: '>=12', npm: '>=6'} + peerDependencies: + '@testing-library/dom': '>=7.21.4' + '@tiptap/core@2.26.1': resolution: {integrity: sha512-fymyd/XZvYiHjBoLt1gxs024xP/LY26d43R1vluYq7AHBL/7DE3ywzy+1GEsGyAv5Je2L0KBhNIR/izbq3Kaqg==} peerDependencies: @@ -3080,12 +3165,15 @@ packages: '@types/babel__template@7.4.4': resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==} - '@types/babel__traverse@7.28.0': - resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==} + '@types/babel__traverse@7.20.7': + resolution: {integrity: sha512-dkO5fhS7+/oos4ciWxyEyjWe48zmG6wbCheo/G2ZnHx4fs3EU6YC6UM8rk56gAjNJ9P3MTH2jo5jb92/K6wbng==} '@types/body-parser@1.19.6': resolution: {integrity: sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==} + '@types/chai@5.2.2': + resolution: {integrity: sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg==} + '@types/compression@1.8.1': resolution: {integrity: sha512-kCFuWS0ebDbmxs0AXYn6e2r2nrGAb5KwQhknjSPSPgJcGd8+HVSILlUyFhGqML2gk39HcG7D1ydW9/qpYkN00Q==} @@ -3125,6 +3213,9 @@ packages: '@types/debug@4.1.12': resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==} + '@types/deep-eql@4.0.2': + resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==} + '@types/doctrine@0.0.9': resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==} @@ -3473,21 +3564,44 @@ packages: '@vitest/expect@2.0.5': resolution: {integrity: sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==} + '@vitest/expect@3.2.4': + resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==} + + '@vitest/mocker@3.2.4': + resolution: {integrity: sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==} + peerDependencies: + msw: ^2.4.9 + vite: ^5.0.0 || ^6.0.0 || ^7.0.0-0 + peerDependenciesMeta: + msw: + optional: true + vite: + optional: true + '@vitest/pretty-format@2.0.5': resolution: {integrity: sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==} '@vitest/pretty-format@2.1.9': resolution: {integrity: sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==} + '@vitest/pretty-format@3.2.4': + resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==} + '@vitest/spy@2.0.5': resolution: {integrity: sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==} + '@vitest/spy@3.2.4': + resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==} + '@vitest/utils@2.0.5': resolution: {integrity: sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==} '@vitest/utils@2.1.9': resolution: {integrity: sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==} + '@vitest/utils@3.2.4': + resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==} + '@webassemblyjs/ast@1.14.1': resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==} @@ -4603,6 +4717,13 @@ packages: peerDependencies: eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7 + eslint-plugin-storybook@9.1.2: + resolution: {integrity: sha512-EQa/kChrYrekxv36q3pvW57anqxMlAP4EdPXEDyA/EDrCQJaaTbWEdsMnVZtD744RjPP0M5wzaUjHbMhNooAwQ==} + engines: {node: '>=20.0.0'} + peerDependencies: + eslint: '>=8' + storybook: ^9.1.2 + eslint-plugin-turbo@1.13.4: resolution: {integrity: sha512-82GfMzrewI/DJB92Bbch239GWbGx4j1zvjk1lqb06lxIlMPnVwUHVwPbAnLfyLG3JuhLv9whxGkO/q1CL18JTg==} peerDependencies: @@ -4655,6 +4776,9 @@ packages: resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==} engines: {node: '>=4.0'} + estree-walker@2.0.2: + resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} + estree-walker@3.0.3: resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} @@ -4789,6 +4913,10 @@ packages: resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==} engines: {node: '>=10'} + find-up@7.0.0: + resolution: {integrity: sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g==} + engines: {node: '>=18'} + fizzy-ui-utils@2.0.7: resolution: {integrity: sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==} @@ -5452,6 +5580,10 @@ packages: resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} engines: {node: '>=10'} + locate-path@7.2.0: + resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + lodash-es@4.17.21: resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} @@ -5938,6 +6070,10 @@ packages: resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==} engines: {node: '>=10'} + p-limit@4.0.0: + resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + p-locate@4.1.0: resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==} engines: {node: '>=8'} @@ -5946,6 +6082,10 @@ packages: resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==} engines: {node: '>=10'} + p-locate@6.0.0: + resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + p-map@2.1.0: resolution: {integrity: sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==} engines: {node: '>=6'} @@ -5997,6 +6137,10 @@ packages: resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} engines: {node: '>=8'} + path-exists@5.0.0: + resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + path-is-absolute@1.0.1: resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==} engines: {node: '>=0.10.0'} @@ -6453,6 +6597,10 @@ packages: resolution: {integrity: sha512-hlSJDQ2synMPKFZOsKo9Hi8WWZTC7POR8EmWvTSjow+VDgKzkmjQvFm2fk0tmRw+f0vTOIYKlarR0iL4996pdg==} engines: {node: '>=16.14.0'} + react-docgen@8.0.0: + resolution: {integrity: sha512-kmob/FOTwep7DUWf9KjuenKX0vyvChr3oTdvvPt09V60Iz75FJp+T/0ZeHMbAfJj2WaVWqAPP5Hmm3PYzSPPKg==} + engines: {node: ^20.9.0 || >=22} + react-dom@18.3.1: resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==} peerDependencies: @@ -6911,6 +7059,15 @@ packages: prettier: optional: true + storybook@9.1.2: + resolution: {integrity: sha512-TYcq7WmgfVCAQge/KueGkVlM/+g33sQcmbATlC3X6y/g2FEeSSLGrb6E6d3iemht8oio+aY6ld3YOdAnMwx45Q==} + hasBin: true + peerDependencies: + prettier: ^2 || ^3 + peerDependenciesMeta: + prettier: + optional: true + streamsearch@1.1.0: resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==} engines: {node: '>=10.0.0'} @@ -7042,6 +7199,9 @@ packages: tailwind-merge@2.6.0: resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==} + tailwind-merge@3.3.1: + resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==} + tailwindcss-animate@1.0.7: resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==} peerDependencies: @@ -7116,10 +7276,18 @@ packages: resolution: {integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==} engines: {node: '>=14.0.0'} + tinyrainbow@2.0.0: + resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==} + engines: {node: '>=14.0.0'} + tinyspy@3.0.2: resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==} engines: {node: '>=14.0.0'} + tinyspy@4.0.3: + resolution: {integrity: sha512-t2T/WLB2WRgZ9EpE4jgPJ9w+i66UZfDc8wHh0xrwiRNN+UwH98GIJkTeZqX9rg0i0ptwzqW+uYeIF0T4F8LR7A==} + engines: {node: '>=14.0.0'} + tippy.js@6.3.7: resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==} @@ -7326,6 +7494,10 @@ packages: unicode-trie@2.0.0: resolution: {integrity: sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==} + unicorn-magic@0.1.0: + resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==} + engines: {node: '>=18'} + unified@10.1.2: resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==} @@ -7461,6 +7633,46 @@ packages: resolution: {integrity: sha512-t20zYkrSf868+j/p31cRIGN28Phrjm3nRSLR2fyc2tiWi4cZGVdv68yNlwnIINTkMTmPoMiSlc0OadaO7DXZaQ==} engines: {node: '>= 6'} + vite@7.0.0: + resolution: {integrity: sha512-ixXJB1YRgDIw2OszKQS9WxGHKwLdCsbQNkpJN171udl6szi/rIySHL6/Os3s2+oE4P/FLD4dxg4mD7Wust+u5g==} + engines: {node: ^20.19.0 || >=22.12.0} + hasBin: true + peerDependencies: + '@types/node': ^20.19.0 || >=22.12.0 + jiti: '>=1.21.0' + less: ^4.0.0 + lightningcss: ^1.21.0 + sass: ^1.70.0 + sass-embedded: ^1.70.0 + stylus: '>=0.54.8' + sugarss: ^5.0.0 + terser: ^5.16.0 + tsx: ^4.8.1 + yaml: ^2.4.2 + peerDependenciesMeta: + '@types/node': + optional: true + jiti: + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + sass-embedded: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + tsx: + optional: true + yaml: + optional: true + w3c-keyname@2.2.8: resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==} @@ -7674,6 +7886,10 @@ packages: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} + yocto-queue@1.2.1: + resolution: {integrity: sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==} + engines: {node: '>=12.20'} + yoga-layout@2.0.1: resolution: {integrity: sha512-tT/oChyDXelLo2A+UVnlW9GU7CsvFMaEnd9kVFsaiCQonFAXd3xrHhkLYu+suwwosrAEQ746xBU+HvYtm1Zs2Q==} @@ -7727,13 +7943,13 @@ snapshots: '@babel/compat-data@7.28.0': {} - '@babel/core@7.28.3': + '@babel/core@7.28.0': dependencies: '@ampproject/remapping': 2.3.0 '@babel/code-frame': 7.27.1 '@babel/generator': 7.28.3 '@babel/helper-compilation-targets': 7.27.2 - '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.3) + '@babel/helper-module-transforms': 7.27.3(@babel/core@7.28.0) '@babel/helpers': 7.26.10 '@babel/parser': 7.28.3 '@babel/template': 7.27.2 @@ -7772,9 +7988,9 @@ snapshots: transitivePeerDependencies: - supports-color - '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.3)': + '@babel/helper-module-transforms@7.27.3(@babel/core@7.28.0)': dependencies: - '@babel/core': 7.28.3 + '@babel/core': 7.28.0 '@babel/helper-module-imports': 7.27.1 '@babel/helper-validator-identifier': 7.27.1 '@babel/traverse': 7.28.3 @@ -8381,6 +8597,15 @@ snapshots: wrap-ansi: 8.1.0 wrap-ansi-cjs: wrap-ansi@7.0.0 + '@joshwooding/vite-plugin-react-docgen-typescript@0.6.1(typescript@5.8.3)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1))': + dependencies: + glob: 10.4.5 + magic-string: 0.30.17 + react-docgen-typescript: 2.4.0(typescript@5.8.3) + vite: 7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1) + optionalDependencies: + typescript: 5.8.3 + '@jridgewell/gen-mapping@0.3.13': dependencies: '@jridgewell/sourcemap-codec': 1.5.5 @@ -8866,6 +9091,14 @@ snapshots: '@remirror/core-constants@3.0.0': {} + '@rollup/pluginutils@5.2.0(rollup@4.46.3)': + dependencies: + '@types/estree': 1.0.8 + estree-walker: 2.0.2 + picomatch: 4.0.3 + optionalDependencies: + rollup: 4.46.3 + '@rollup/rollup-android-arm-eabi@4.46.3': optional: true @@ -9053,6 +9286,13 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + '@storybook/builder-vite@9.1.2(storybook@9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)))(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1))': + dependencies: + '@storybook/csf-plugin': 9.1.2(storybook@9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1))) + storybook: 9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)) + ts-dedent: 2.2.0 + vite: 7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1) + '@storybook/builder-webpack5@8.6.14(@swc/core@1.13.3(@swc/helpers@0.5.17))(esbuild@0.25.0)(storybook@8.6.14(prettier@3.6.2))(typescript@5.8.3)': dependencies: '@storybook/core-webpack': 8.6.14(storybook@8.6.14(prettier@3.6.2)) @@ -9124,6 +9364,11 @@ snapshots: storybook: 8.6.14(prettier@3.6.2) unplugin: 1.16.1 + '@storybook/csf-plugin@9.1.2(storybook@9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)))': + dependencies: + storybook: 9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)) + unplugin: 1.16.1 + '@storybook/global@5.0.0': {} '@storybook/icons@1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': @@ -9195,6 +9440,32 @@ snapshots: react-dom: 18.3.1(react@18.3.1) storybook: 8.6.14(prettier@3.6.2) + '@storybook/react-dom-shim@9.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)))': + dependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + storybook: 9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)) + + '@storybook/react-vite@9.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.46.3)(storybook@9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1))': + dependencies: + '@joshwooding/vite-plugin-react-docgen-typescript': 0.6.1(typescript@5.8.3)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)) + '@rollup/pluginutils': 5.2.0(rollup@4.46.3) + '@storybook/builder-vite': 9.1.2(storybook@9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)))(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)) + '@storybook/react': 9.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3) + find-up: 7.0.0 + magic-string: 0.30.17 + react: 18.3.1 + react-docgen: 8.0.0 + react-dom: 18.3.1(react@18.3.1) + resolve: 1.22.10 + storybook: 9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)) + tsconfig-paths: 4.2.0 + vite: 7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1) + transitivePeerDependencies: + - rollup + - supports-color + - typescript + '@storybook/react-webpack5@8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(@swc/core@1.13.3(@swc/helpers@0.5.17))(esbuild@0.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.6.2))(typescript@5.8.3)': dependencies: '@storybook/builder-webpack5': 8.6.14(@swc/core@1.13.3(@swc/helpers@0.5.17))(esbuild@0.25.0)(storybook@8.6.14(prettier@3.6.2))(typescript@5.8.3) @@ -9229,6 +9500,16 @@ snapshots: '@storybook/test': 8.6.14(storybook@8.6.14(prettier@3.6.2)) typescript: 5.8.3 + '@storybook/react@9.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3)': + dependencies: + '@storybook/global': 5.0.0 + '@storybook/react-dom-shim': 9.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1))) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + storybook: 9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)) + optionalDependencies: + typescript: 5.8.3 + '@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2))': dependencies: '@storybook/global': 5.0.0 @@ -9355,10 +9636,24 @@ snapshots: lodash: 4.17.21 redent: 3.0.0 + '@testing-library/jest-dom@6.6.3': + dependencies: + '@adobe/css-tools': 4.4.4 + aria-query: 5.3.2 + chalk: 3.0.0 + css.escape: 1.5.1 + dom-accessibility-api: 0.6.3 + lodash: 4.17.21 + redent: 3.0.0 + '@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)': dependencies: '@testing-library/dom': 10.4.0 + '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.0)': + dependencies: + '@testing-library/dom': 10.4.0 + '@tiptap/core@2.26.1(@tiptap/pm@2.26.1)': dependencies: '@tiptap/pm': 2.26.1 @@ -9599,7 +9894,7 @@ snapshots: '@babel/types': 7.28.2 '@types/babel__generator': 7.27.0 '@types/babel__template': 7.4.4 - '@types/babel__traverse': 7.28.0 + '@types/babel__traverse': 7.20.7 '@types/babel__generator@7.27.0': dependencies: @@ -9610,7 +9905,7 @@ snapshots: '@babel/parser': 7.28.3 '@babel/types': 7.28.2 - '@types/babel__traverse@7.28.0': + '@types/babel__traverse@7.20.7': dependencies: '@babel/types': 7.28.2 @@ -9619,6 +9914,10 @@ snapshots: '@types/connect': 3.4.38 '@types/node': 20.19.11 + '@types/chai@5.2.2': + dependencies: + '@types/deep-eql': 4.0.2 + '@types/compression@1.8.1': dependencies: '@types/express': 4.17.23 @@ -9660,6 +9959,8 @@ snapshots: dependencies: '@types/ms': 2.1.0 + '@types/deep-eql@4.0.2': {} + '@types/doctrine@0.0.9': {} '@types/dom4@2.0.4': {} @@ -10022,6 +10323,22 @@ snapshots: chai: 5.3.1 tinyrainbow: 1.2.0 + '@vitest/expect@3.2.4': + dependencies: + '@types/chai': 5.2.2 + '@vitest/spy': 3.2.4 + '@vitest/utils': 3.2.4 + chai: 5.3.1 + tinyrainbow: 2.0.0 + + '@vitest/mocker@3.2.4(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1))': + dependencies: + '@vitest/spy': 3.2.4 + estree-walker: 3.0.3 + magic-string: 0.30.17 + optionalDependencies: + vite: 7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1) + '@vitest/pretty-format@2.0.5': dependencies: tinyrainbow: 1.2.0 @@ -10030,10 +10347,18 @@ snapshots: dependencies: tinyrainbow: 1.2.0 + '@vitest/pretty-format@3.2.4': + dependencies: + tinyrainbow: 2.0.0 + '@vitest/spy@2.0.5': dependencies: tinyspy: 3.0.2 + '@vitest/spy@3.2.4': + dependencies: + tinyspy: 4.0.3 + '@vitest/utils@2.0.5': dependencies: '@vitest/pretty-format': 2.0.5 @@ -10047,6 +10372,12 @@ snapshots: loupe: 3.2.0 tinyrainbow: 1.2.0 + '@vitest/utils@3.2.4': + dependencies: + '@vitest/pretty-format': 3.2.4 + loupe: 3.2.0 + tinyrainbow: 2.0.0 + '@webassemblyjs/ast@1.14.1': dependencies: '@webassemblyjs/helper-numbers': 1.13.2 @@ -11332,6 +11663,15 @@ snapshots: string.prototype.matchall: 4.0.12 string.prototype.repeat: 1.0.0 + eslint-plugin-storybook@9.1.2(eslint@8.57.1)(storybook@9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3): + dependencies: + '@typescript-eslint/utils': 8.40.0(eslint@8.57.1)(typescript@5.8.3) + eslint: 8.57.1 + storybook: 9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)) + transitivePeerDependencies: + - supports-color + - typescript + eslint-plugin-turbo@1.13.4(eslint@8.57.1): dependencies: dotenv: 16.0.3 @@ -11414,6 +11754,8 @@ snapshots: estraverse@5.3.0: {} + estree-walker@2.0.2: {} + estree-walker@3.0.3: dependencies: '@types/estree': 1.0.8 @@ -11568,6 +11910,12 @@ snapshots: locate-path: 6.0.0 path-exists: 4.0.0 + find-up@7.0.0: + dependencies: + locate-path: 7.2.0 + path-exists: 5.0.0 + unicorn-magic: 0.1.0 + fizzy-ui-utils@2.0.7: dependencies: desandro-matches-selector: 2.0.2 @@ -12277,6 +12625,10 @@ snapshots: dependencies: p-locate: 5.0.0 + locate-path@7.2.0: + dependencies: + p-locate: 6.0.0 + lodash-es@4.17.21: {} lodash.castarray@4.4.0: {} @@ -12842,6 +13194,10 @@ snapshots: dependencies: yocto-queue: 0.1.0 + p-limit@4.0.0: + dependencies: + yocto-queue: 1.2.1 + p-locate@4.1.0: dependencies: p-limit: 2.3.0 @@ -12850,6 +13206,10 @@ snapshots: dependencies: p-limit: 3.1.0 + p-locate@6.0.0: + dependencies: + p-limit: 4.0.0 + p-map@2.1.0: {} p-try@2.2.0: {} @@ -12898,6 +13258,8 @@ snapshots: path-exists@4.0.0: {} + path-exists@5.0.0: {} + path-is-absolute@1.0.1: {} path-key@3.1.1: {} @@ -13328,11 +13690,26 @@ snapshots: react-docgen@7.1.1: dependencies: - '@babel/core': 7.28.3 + '@babel/core': 7.28.0 + '@babel/traverse': 7.28.3 + '@babel/types': 7.28.2 + '@types/babel__core': 7.20.5 + '@types/babel__traverse': 7.20.7 + '@types/doctrine': 0.0.9 + '@types/resolve': 1.20.6 + doctrine: 3.0.0 + resolve: 1.22.10 + strip-indent: 4.0.0 + transitivePeerDependencies: + - supports-color + + react-docgen@8.0.0: + dependencies: + '@babel/core': 7.28.0 '@babel/traverse': 7.28.3 '@babel/types': 7.28.2 '@types/babel__core': 7.20.5 - '@types/babel__traverse': 7.28.0 + '@types/babel__traverse': 7.20.7 '@types/doctrine': 0.0.9 '@types/resolve': 1.20.6 doctrine: 3.0.0 @@ -13928,6 +14305,30 @@ snapshots: - supports-color - utf-8-validate + storybook@9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)): + dependencies: + '@storybook/global': 5.0.0 + '@testing-library/jest-dom': 6.6.3 + '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.0) + '@vitest/expect': 3.2.4 + '@vitest/mocker': 3.2.4(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)) + '@vitest/spy': 3.2.4 + better-opn: 3.0.2 + esbuild: 0.25.0 + esbuild-register: 3.6.0(esbuild@0.25.0) + recast: 0.23.11 + semver: 7.7.2 + ws: 8.18.3 + optionalDependencies: + prettier: 3.6.2 + transitivePeerDependencies: + - '@testing-library/dom' + - bufferutil + - msw + - supports-color + - utf-8-validate + - vite + streamsearch@1.1.0: {} string-width@4.2.3: @@ -14075,6 +14476,8 @@ snapshots: tailwind-merge@2.6.0: {} + tailwind-merge@3.3.1: {} + tailwindcss-animate@1.0.7(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.13.3(@swc/helpers@0.5.17))(@types/node@22.17.2)(typescript@5.8.3))): dependencies: tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.13.3(@swc/helpers@0.5.17))(@types/node@22.17.2)(typescript@5.8.3)) @@ -14160,8 +14563,12 @@ snapshots: tinyrainbow@1.2.0: {} + tinyrainbow@2.0.0: {} + tinyspy@3.0.2: {} + tinyspy@4.0.3: {} + tippy.js@6.3.7: dependencies: '@popperjs/core': 2.11.8 @@ -14404,6 +14811,8 @@ snapshots: pako: 0.2.9 tiny-inflate: 1.0.3 + unicorn-magic@0.1.0: {} + unified@10.1.2: dependencies: '@types/unist': 2.0.11 @@ -14585,6 +14994,21 @@ snapshots: string_decoder: 1.3.0 util-deprecate: 1.0.2 + vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1): + dependencies: + esbuild: 0.25.0 + fdir: 6.5.0(picomatch@4.0.3) + picomatch: 4.0.3 + postcss: 8.5.6 + rollup: 4.46.3 + tinyglobby: 0.2.14 + optionalDependencies: + '@types/node': 22.17.2 + fsevents: 2.3.3 + jiti: 1.21.7 + terser: 5.43.1 + yaml: 2.8.1 + w3c-keyname@2.2.8: {} w3c-xmlserializer@5.0.0: @@ -14826,6 +15250,8 @@ snapshots: yocto-queue@0.1.0: {} + yocto-queue@1.2.1: {} + yoga-layout@2.0.1: {} zeed-dom@0.15.1: From fb385ea10b57dbad5d3f944d4b163e8cf558a6ed Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Thu, 21 Aug 2025 05:45:58 +0530 Subject: [PATCH 05/20] fix: format error --- packages/propel/.storybook/main.ts | 28 +++++++++++++-------------- packages/propel/.storybook/preview.ts | 11 +++++------ packages/propel/src/utils/index.ts | 2 +- 3 files changed, 19 insertions(+), 22 deletions(-) diff --git a/packages/propel/.storybook/main.ts b/packages/propel/.storybook/main.ts index 8c53a9ed07d..d32ac29920d 100644 --- a/packages/propel/.storybook/main.ts +++ b/packages/propel/.storybook/main.ts @@ -1,22 +1,20 @@ -import type { StorybookConfig } from '@storybook/react-vite'; +import type { StorybookConfig } from "@storybook/react-vite"; -import { join, dirname } from "path" +import { join, dirname } from "path"; /** -* This function is used to resolve the absolute path of a package. -* It is needed in projects that use Yarn PnP or are set up within a monorepo. -*/ + * This function is used to resolve the absolute path of a package. + * It is needed in projects that use Yarn PnP or are set up within a monorepo. + */ function getAbsolutePath(value: string): any { - return dirname(require.resolve(join(value, 'package.json'))) + return dirname(require.resolve(join(value, "package.json"))); } const config: StorybookConfig = { - "stories": [ - "../src/**/*.stories.@(ts|tsx)", - ], - "addons": [], - "framework": { - "name": getAbsolutePath('@storybook/react-vite'), - "options": {} - } + stories: ["../src/**/*.stories.@(ts|tsx)"], + addons: [], + framework: { + name: getAbsolutePath("@storybook/react-vite"), + options: {}, + }, }; -export default config; \ No newline at end of file +export default config; diff --git a/packages/propel/.storybook/preview.ts b/packages/propel/.storybook/preview.ts index af30c2a9c2d..1015738c92d 100644 --- a/packages/propel/.storybook/preview.ts +++ b/packages/propel/.storybook/preview.ts @@ -1,15 +1,14 @@ -import type { Preview } from '@storybook/react-vite' -import "@plane/tailwind-config/global.css" +import type { Preview } from "@storybook/react-vite"; +import "@plane/tailwind-config/global.css"; const preview: Preview = { parameters: { controls: { matchers: { - color: /(background|color)$/i, - date: /Date$/i, + color: /(background|color)$/i, + date: /Date$/i, }, }, }, }; - -export default preview; \ No newline at end of file +export default preview; diff --git a/packages/propel/src/utils/index.ts b/packages/propel/src/utils/index.ts index c065afbecf1..9e23af8b8c1 100644 --- a/packages/propel/src/utils/index.ts +++ b/packages/propel/src/utils/index.ts @@ -1 +1 @@ -export * from "./classname"; \ No newline at end of file +export * from "./classname"; From 8aac7840dae7001205956b198cc1939383f3140b Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Thu, 21 Aug 2025 20:08:18 +0530 Subject: [PATCH 06/20] feat: added base ui tabs --- packages/propel/package.json | 6 +- packages/propel/src/tabs/index.ts | 1 + packages/propel/src/tabs/list.tsx | 58 ------------ packages/propel/src/tabs/tabs.tsx | 141 +++++++++++++----------------- pnpm-lock.yaml | 35 +++----- 5 files changed, 73 insertions(+), 168 deletions(-) delete mode 100644 packages/propel/src/tabs/list.tsx diff --git a/packages/propel/package.json b/packages/propel/package.json index 11e6921eb6a..0bf3b7ce451 100644 --- a/packages/propel/package.json +++ b/packages/propel/package.json @@ -42,8 +42,8 @@ "@plane/eslint-config": "workspace:*", "@plane/tailwind-config": "workspace:*", "@plane/typescript-config": "workspace:*", - "@types/react": "18.3.1", - "@types/react-dom": "18.3.0", + "@types/react": "^18.3.11", + "@types/react-dom": "^18.2.18", "typescript": "5.8.3" } -} +} \ No newline at end of file diff --git a/packages/propel/src/tabs/index.ts b/packages/propel/src/tabs/index.ts index e69de29bb2d..811d3d4a725 100644 --- a/packages/propel/src/tabs/index.ts +++ b/packages/propel/src/tabs/index.ts @@ -0,0 +1 @@ +export * from "./tabs"; diff --git a/packages/propel/src/tabs/list.tsx b/packages/propel/src/tabs/list.tsx deleted file mode 100644 index 6155b10cebd..00000000000 --- a/packages/propel/src/tabs/list.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React, { FC } from "react"; -import { Tabs as BaseTabs } from "@base-ui-components/react/tabs"; -import { LucideProps } from "lucide-react"; -// helpers -import { cn } from "@plane/utils"; - -export type TabListItem = { - key: string; - icon?: FC; - label?: React.ReactNode; - disabled?: boolean; - onClick?: () => void; -}; - -type TTabListProps = { - tabs: TabListItem[]; - tabListClassName?: string; - tabClassName?: string; - size?: "sm" | "md" | "lg"; - selectedTab?: string; -}; - -export const TabList: FC = ({ tabs, tabListClassName, tabClassName, size = "md", selectedTab }) => ( - - {tabs.map((tab) => ( - - cn( - "flex items-center justify-center p-1 min-w-fit w-full font-medium text-custom-text-100 outline-none focus:outline-none cursor-pointer transition-all rounded", - (selectedTab ? selectedTab === tab.key : selected) - ? "bg-custom-background-100 text-custom-text-100 shadow-sm" - : tab.disabled - ? "text-custom-text-400 cursor-not-allowed" - : "text-custom-text-400 hover:text-custom-text-300 hover:bg-custom-background-80/60", - { - "text-xs": size === "sm", - "text-sm": size === "md", - "text-base": size === "lg", - }, - tabClassName - ) - } - key={tab.key} - disabled={tab.disabled} - > - {tab.icon && } - {tab.label} - - ))} - - - -); diff --git a/packages/propel/src/tabs/tabs.tsx b/packages/propel/src/tabs/tabs.tsx index ad40370cf33..11b972a6607 100644 --- a/packages/propel/src/tabs/tabs.tsx +++ b/packages/propel/src/tabs/tabs.tsx @@ -1,91 +1,68 @@ -import React, { FC, useEffect, useState } from "react"; -import { Tabs as BaseTabs } from "@base-ui-components/react/tabs"; -// helpers -import { useLocalStorage } from "@plane/hooks"; +import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs"; +import * as React from "react"; import { cn } from "@plane/utils"; -// types -import { TabList, TabListItem } from "./list"; -export type TabContent = { - content: React.ReactNode; -}; +function Tabs({ className, ...props }: React.ComponentProps) { + return ; +} -export type TabItem = TabListItem & TabContent; - -type TTabsProps = { - tabs: TabItem[]; - storageKey?: string; - actions?: React.ReactNode; - defaultTab?: string; - containerClassName?: string; - tabListContainerClassName?: string; - tabListClassName?: string; - tabClassName?: string; - tabPanelClassName?: string; - size?: "sm" | "md" | "lg"; - storeInLocalStorage?: boolean; -}; - -export const Tabs: FC = (props: TTabsProps) => { - const { - tabs, - storageKey, - actions, - defaultTab = tabs[0]?.key, - containerClassName = "", - tabListContainerClassName = "", - tabListClassName = "", - tabClassName = "", - tabPanelClassName = "", - size = "md", - storeInLocalStorage = true, - } = props; - - const { storedValue, setValue } = useLocalStorage( - storeInLocalStorage && storageKey ? `tab-${storageKey}` : `tab-${tabs[0]?.key}`, - defaultTab +function TabsList({ className, ...props }: React.ComponentProps) { + return ( + ); +} - const [activeIndex, setActiveIndex] = useState(() => { - const initialTab = storedValue ?? defaultTab; - return tabs.findIndex((tab) => tab.key === initialTab); - }); - - useEffect(() => { - if (storeInLocalStorage && tabs[activeIndex]) { - setValue(tabs[activeIndex].key); - } - }, [activeIndex, setValue, storeInLocalStorage, tabs]); +function TabsTrigger({ + className, + size = "md", + ...props +}: React.ComponentProps & { size?: "sm" | "md" | "lg" }) { + return ( + + ); +} - const handleTabChange = (index: number) => { - setActiveIndex(index); - if (!tabs[index].disabled) { - tabs[index].onClick?.(); - } - }; +function TabsContent({ className, ...props }: React.ComponentProps) { + return ; +} +function TabsIndicator({ className, ...props }: React.ComponentProps<"div">) { return ( - -
- - {actions &&
{actions}
} -
- - {tabs.map((tab) => ( - - {tab.content} - - ))} - +
); -}; +} + +Tabs.List = TabsList; +Tabs.Trigger = TabsTrigger; +Tabs.Content = TabsContent; +Tabs.Indicator = TabsIndicator; + +export { Tabs, TabsList, TabsTrigger, TabsContent, TabsIndicator }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index abe64c2dfc0..c79cba3455b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -951,7 +951,7 @@ importers: dependencies: '@base-ui-components/react': specifier: ^1.0.0-beta.2 - version: 1.0.0-beta.2(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 1.0.0-beta.2(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@plane/constants': specifier: workspace:* version: link:../constants @@ -996,11 +996,11 @@ importers: specifier: workspace:* version: link:../typescript-config '@types/react': - specifier: 18.3.1 - version: 18.3.1 + specifier: ^18.3.11 + version: 18.3.11 '@types/react-dom': - specifier: 18.3.0 - version: 18.3.0 + specifier: ^18.2.18 + version: 18.3.1 typescript: specifier: 5.8.3 version: 5.8.3 @@ -3255,9 +3255,6 @@ packages: peerDependencies: '@types/react': '*' - '@types/react-dom@18.3.0': - resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==} - '@types/react-dom@18.3.1': resolution: {integrity: sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==} @@ -3266,9 +3263,6 @@ packages: peerDependencies: '@types/react': '*' - '@types/react@18.3.1': - resolution: {integrity: sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==} - '@types/react@18.3.11': resolution: {integrity: sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==} @@ -7823,10 +7817,10 @@ snapshots: '@babel/helper-string-parser': 7.27.1 '@babel/helper-validator-identifier': 7.27.1 - '@base-ui-components/react@1.0.0-beta.2(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@base-ui-components/react@1.0.0-beta.2(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.10 - '@base-ui-components/utils': 0.1.0(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@base-ui-components/utils': 0.1.0(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@floating-ui/react-dom': 2.1.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@floating-ui/utils': 0.2.10 react: 18.3.1 @@ -7835,9 +7829,9 @@ snapshots: tabbable: 6.2.0 use-sync-external-store: 1.5.0(react@18.3.1) optionalDependencies: - '@types/react': 18.3.1 + '@types/react': 18.3.11 - '@base-ui-components/utils@0.1.0(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@base-ui-components/utils@0.1.0(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.10 '@floating-ui/utils': 0.2.10 @@ -7846,7 +7840,7 @@ snapshots: reselect: 5.1.1 use-sync-external-store: 1.5.0(react@18.3.1) optionalDependencies: - '@types/react': 18.3.1 + '@types/react': 18.3.11 '@blueprintjs/colors@4.2.1': dependencies: @@ -9801,10 +9795,6 @@ snapshots: '@types/react': 18.3.11 '@types/reactcss': 1.2.13(@types/react@18.3.11) - '@types/react-dom@18.3.0': - dependencies: - '@types/react': 18.3.11 - '@types/react-dom@18.3.1': dependencies: '@types/react': 18.3.11 @@ -9813,11 +9803,6 @@ snapshots: dependencies: '@types/react': 18.3.11 - '@types/react@18.3.1': - dependencies: - '@types/prop-types': 15.7.15 - csstype: 3.1.3 - '@types/react@18.3.11': dependencies: '@types/prop-types': 15.7.15 From 6094bdfe76aeed732f67fe72559ea6e5f59fe6fa Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Thu, 21 Aug 2025 20:14:37 +0530 Subject: [PATCH 07/20] fix: add missing newline at end of package.json in propel package --- packages/propel/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/propel/package.json b/packages/propel/package.json index 0bf3b7ce451..1e79a5b2d94 100644 --- a/packages/propel/package.json +++ b/packages/propel/package.json @@ -46,4 +46,4 @@ "@types/react-dom": "^18.2.18", "typescript": "5.8.3" } -} \ No newline at end of file +} From f163f4146af4d4b15d83d4ba67508a1efd02e155 Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Thu, 21 Aug 2025 20:15:09 +0530 Subject: [PATCH 08/20] fix: reorder import statement for Tabs component in propel package --- packages/propel/src/tabs/tabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/propel/src/tabs/tabs.tsx b/packages/propel/src/tabs/tabs.tsx index 11b972a6607..230cc6d7cfb 100644 --- a/packages/propel/src/tabs/tabs.tsx +++ b/packages/propel/src/tabs/tabs.tsx @@ -1,5 +1,5 @@ -import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs"; import * as React from "react"; +import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs"; import { cn } from "@plane/utils"; function Tabs({ className, ...props }: React.ComponentProps) { From 3d463636d6d33ecbad03ad71853b42b0ec9208fa Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Thu, 21 Aug 2025 20:22:41 +0530 Subject: [PATCH 09/20] feat: refactor Tabs component to support compound structure with forward refs --- packages/propel/src/tabs/tabs.tsx | 87 +++++++++++++++++++++++-------- 1 file changed, 65 insertions(+), 22 deletions(-) diff --git a/packages/propel/src/tabs/tabs.tsx b/packages/propel/src/tabs/tabs.tsx index 230cc6d7cfb..d45f90e68de 100644 --- a/packages/propel/src/tabs/tabs.tsx +++ b/packages/propel/src/tabs/tabs.tsx @@ -2,11 +2,41 @@ import * as React from "react"; import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs"; import { cn } from "@plane/utils"; -function Tabs({ className, ...props }: React.ComponentProps) { - return ; -} +type TabsCompound = React.ForwardRefExoticComponent< + React.ComponentProps & React.RefAttributes> +> & { + List: React.ForwardRefExoticComponent< + React.ComponentProps & React.RefAttributes> + >; + Trigger: React.ForwardRefExoticComponent< + React.ComponentProps & { size?: "sm" | "md" | "lg" } & React.RefAttributes< + React.ElementRef + > + >; + Content: React.ForwardRefExoticComponent< + React.ComponentProps & React.RefAttributes> + >; + Indicator: React.ForwardRefExoticComponent & React.RefAttributes>; +}; -function TabsList({ className, ...props }: React.ComponentProps) { +const TabsRoot = React.forwardRef< + React.ElementRef, + React.ComponentProps +>(({ className, ...props }, ref) => { + return ( + + ); +}); + +const TabsList = React.forwardRef< + React.ElementRef, + React.ComponentProps +>(({ className, ...props }, ref) => { return ( ); -} +}); -function TabsTrigger({ - className, - size = "md", - ...props -}: React.ComponentProps & { size?: "sm" | "md" | "lg" }) { +const TabsTrigger = React.forwardRef< + React.ElementRef, + React.ComponentProps & { size?: "sm" | "md" | "lg" } +>(({ className, size = "md", ...props }, ref) => { return ( ); -} +}); -function TabsContent({ className, ...props }: React.ComponentProps) { - return ; -} - -function TabsIndicator({ className, ...props }: React.ComponentProps<"div">) { +const TabsContent = React.forwardRef< + React.ElementRef, + React.ComponentProps +>(({ className, ...props }, ref) => { + return ( + + ); +}); +const TabsIndicator = React.forwardRef>(({ className, ...props }, ref) => { return (
) { className )} {...props} + ref={ref} /> ); -} +}); -Tabs.List = TabsList; -Tabs.Trigger = TabsTrigger; -Tabs.Content = TabsContent; -Tabs.Indicator = TabsIndicator; +export const Tabs = Object.assign(TabsRoot, { + List: TabsList, + Trigger: TabsTrigger, + Content: TabsContent, + Indicator: TabsIndicator, +}) satisfies TabsCompound; -export { Tabs, TabsList, TabsTrigger, TabsContent, TabsIndicator }; +export { TabsList, TabsTrigger, TabsContent, TabsIndicator }; From 93faef4ffa962d24558036688ca940f4ea7d5302 Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Thu, 21 Aug 2025 20:48:05 +0530 Subject: [PATCH 10/20] fix: lint --- packages/propel/src/tabs/tabs.tsx | 117 +++++++++++++----------------- 1 file changed, 51 insertions(+), 66 deletions(-) diff --git a/packages/propel/src/tabs/tabs.tsx b/packages/propel/src/tabs/tabs.tsx index d45f90e68de..8188d1aa423 100644 --- a/packages/propel/src/tabs/tabs.tsx +++ b/packages/propel/src/tabs/tabs.tsx @@ -22,84 +22,69 @@ type TabsCompound = React.ForwardRefExoticComponent< const TabsRoot = React.forwardRef< React.ElementRef, React.ComponentProps ->(({ className, ...props }, ref) => { - return ( - - ); -}); +>(({ className, ...props }, ref) => ( + +)); const TabsList = React.forwardRef< React.ElementRef, React.ComponentProps ->(({ className, ...props }, ref) => { - return ( - - ); -}); +>(({ className, ...props }, ref) => ( + +)); const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentProps & { size?: "sm" | "md" | "lg" } ->(({ className, size = "md", ...props }, ref) => { - return ( - - ); -}); +>(({ className, size = "md", ...props }, ref) => ( + +)); const TabsContent = React.forwardRef< React.ElementRef, React.ComponentProps ->(({ className, ...props }, ref) => { - return ( - - ); -}); -const TabsIndicator = React.forwardRef>(({ className, ...props }, ref) => { - return ( -
- ); -}); +>(({ className, ...props }, ref) => ( + +)); +const TabsIndicator = React.forwardRef>(({ className, ...props }, ref) => ( +
+)); export const Tabs = Object.assign(TabsRoot, { List: TabsList, From 77aee58ec84d0e7b4459360c473bd0a240a26463 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Fri, 22 Aug 2025 14:32:26 +0530 Subject: [PATCH 11/20] chore: code refactor --- packages/propel/.storybook/main.ts | 4 ++-- packages/propel/.storybook/preview.ts | 5 +---- packages/propel/package.json | 6 ++---- packages/tailwind-config/tailwind.config.js | 2 +- pnpm-lock.yaml | 11 ----------- turbo.json | 4 ++++ 6 files changed, 10 insertions(+), 22 deletions(-) diff --git a/packages/propel/.storybook/main.ts b/packages/propel/.storybook/main.ts index d32ac29920d..b493c8f3127 100644 --- a/packages/propel/.storybook/main.ts +++ b/packages/propel/.storybook/main.ts @@ -2,11 +2,11 @@ import type { StorybookConfig } from "@storybook/react-vite"; import { join, dirname } from "path"; -/** +/* * This function is used to resolve the absolute path of a package. * It is needed in projects that use Yarn PnP or are set up within a monorepo. */ -function getAbsolutePath(value: string): any { +function getAbsolutePath(value: string) { return dirname(require.resolve(join(value, "package.json"))); } const config: StorybookConfig = { diff --git a/packages/propel/.storybook/preview.ts b/packages/propel/.storybook/preview.ts index 1015738c92d..1c5245934f2 100644 --- a/packages/propel/.storybook/preview.ts +++ b/packages/propel/.storybook/preview.ts @@ -4,10 +4,7 @@ import "@plane/tailwind-config/global.css"; const preview: Preview = { parameters: { controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/i, - }, + matchers: {}, }, }, }; diff --git a/packages/propel/package.json b/packages/propel/package.json index 50e6a6b4afe..ce38793c037 100644 --- a/packages/propel/package.json +++ b/packages/propel/package.json @@ -33,11 +33,9 @@ "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.469.0", - "postcss": "^8.5.6", "react": "^18.3.1", "react-dom": "^18.3.1", - "recharts": "^2.15.1", - "tailwind-merge": "^3.3.1" + "recharts": "^2.15.1" }, "devDependencies": { "@plane/eslint-config": "workspace:*", @@ -50,4 +48,4 @@ "storybook": "^9.1.2", "typescript": "5.8.3" } -} +} \ No newline at end of file diff --git a/packages/tailwind-config/tailwind.config.js b/packages/tailwind-config/tailwind.config.js index 2ed513003f4..2dfdfa7b76c 100644 --- a/packages/tailwind-config/tailwind.config.js +++ b/packages/tailwind-config/tailwind.config.js @@ -18,7 +18,7 @@ module.exports = { "./pages/**/*.tsx", "./app/**/*.tsx", "./ui/**/*.tsx", - "./propel/**/*.{js,ts,jsx,tsx}", + "./propel/src/**/*.tsx", "../../packages/ui/src/**/*.{js,ts,jsx,tsx}", "../../packages/propel/src/**/*.{js,ts,jsx,tsx}", "../../packages/editor/src/**/*.{js,ts,jsx,tsx}", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 82d2671e45e..e39de07a06f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -979,9 +979,6 @@ importers: lucide-react: specifier: ^0.469.0 version: 0.469.0(react@18.3.1) - postcss: - specifier: ^8.5.6 - version: 8.5.6 react: specifier: ^18.3.1 version: 18.3.1 @@ -991,9 +988,6 @@ importers: recharts: specifier: ^2.15.1 version: 2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - tailwind-merge: - specifier: ^3.3.1 - version: 3.3.1 devDependencies: '@plane/eslint-config': specifier: workspace:* @@ -7199,9 +7193,6 @@ packages: tailwind-merge@2.6.0: resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==} - tailwind-merge@3.3.1: - resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==} - tailwindcss-animate@1.0.7: resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==} peerDependencies: @@ -14476,8 +14467,6 @@ snapshots: tailwind-merge@2.6.0: {} - tailwind-merge@3.3.1: {} - tailwindcss-animate@1.0.7(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.13.3(@swc/helpers@0.5.17))(@types/node@22.17.2)(typescript@5.8.3))): dependencies: tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.13.3(@swc/helpers@0.5.17))(@types/node@22.17.2)(typescript@5.8.3)) diff --git a/turbo.json b/turbo.json index 976048bbeef..127ba466138 100644 --- a/turbo.json +++ b/turbo.json @@ -25,6 +25,10 @@ "dependsOn": ["^build"], "outputs": [".next/**", "dist/**"] }, + "build-storybook": { + "dependsOn": ["^build"], + "outputs": ["storybook-static/**"] + }, "dev": { "dependsOn": ["^build"], "cache": false, From 250b534ab5dda699097f1254578741e4115154df Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Fri, 22 Aug 2025 14:49:08 +0530 Subject: [PATCH 12/20] chore: code refactor --- packages/propel/src/utils/classname.tsx | 3 +-- packages/tailwind-config/tailwind.config.js | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/propel/src/utils/classname.tsx b/packages/propel/src/utils/classname.tsx index a500a738583..2daa71e6268 100644 --- a/packages/propel/src/utils/classname.tsx +++ b/packages/propel/src/utils/classname.tsx @@ -1,4 +1,3 @@ import { clsx, type ClassValue } from "clsx"; -import { twMerge } from "tailwind-merge"; -export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs)); +export const cn = (...inputs: ClassValue[]) => clsx(inputs); diff --git a/packages/tailwind-config/tailwind.config.js b/packages/tailwind-config/tailwind.config.js index 2dfdfa7b76c..cc8c1139220 100644 --- a/packages/tailwind-config/tailwind.config.js +++ b/packages/tailwind-config/tailwind.config.js @@ -18,7 +18,6 @@ module.exports = { "./pages/**/*.tsx", "./app/**/*.tsx", "./ui/**/*.tsx", - "./propel/src/**/*.tsx", "../../packages/ui/src/**/*.{js,ts,jsx,tsx}", "../../packages/propel/src/**/*.{js,ts,jsx,tsx}", "../../packages/editor/src/**/*.{js,ts,jsx,tsx}", From 220da4774adb7d7e152e76f121ff28cd28b8adf1 Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Sun, 24 Aug 2025 15:02:28 +0530 Subject: [PATCH 13/20] fix: lock file --- pnpm-lock.yaml | 5 ----- 1 file changed, 5 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 399b7c7166e..a24cd46a3ee 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1005,19 +1005,14 @@ importers: specifier: ^18.3.11 version: 18.3.11 '@types/react-dom': -<<<<<<< HEAD specifier: ^18.2.18 version: 18.3.1 -======= - specifier: 18.3.0 - version: 18.3.0 eslint-plugin-storybook: specifier: ^9.1.2 version: 9.1.2(eslint@8.57.1)(storybook@9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3) storybook: specifier: ^9.1.2 version: 9.1.2(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.0.0(@types/node@22.17.2)(jiti@1.21.7)(terser@5.43.1)(yaml@2.8.1)) ->>>>>>> origin/chore-propel-storybook-setup typescript: specifier: 5.8.3 version: 5.8.3 From 2b5a07d9595466dce73bab1a41507ad9595e0fb6 Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Sun, 24 Aug 2025 20:10:23 +0530 Subject: [PATCH 14/20] chore: added stories for tabs --- packages/propel/src/tabs/tabs.stories.tsx | 66 +++++++++++++++++++++++ packages/propel/src/tabs/tabs.tsx | 23 +++++--- 2 files changed, 82 insertions(+), 7 deletions(-) create mode 100644 packages/propel/src/tabs/tabs.stories.tsx diff --git a/packages/propel/src/tabs/tabs.stories.tsx b/packages/propel/src/tabs/tabs.stories.tsx new file mode 100644 index 00000000000..0113e60a02b --- /dev/null +++ b/packages/propel/src/tabs/tabs.stories.tsx @@ -0,0 +1,66 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { Tabs } from "./tabs"; +import { Fragment } from "react"; + +const meta: Meta = { + title: "Components/Tabs", + component: Tabs, + parameters: { + layout: "centered", + }, +}; + +export default meta; +type Story = StoryObj; + +export const Basic: Story = { + render: () => ( +
+ + + Overview + Settings + + + + Overview settings go here + + + Settings settings go here + + +
+ ), +}; + +export const Sizes: Story = { + render: () => { + const sizes = ["sm", "md", "lg"] as const; + const labels = { + sm: "Small", + md: "Medium", + lg: "Large", + }; + + return ( +
+ {sizes.map((size, index) => ( + + {index > 0 &&
} +
{labels[size]}
+ + + + Overview + + + Settings + + + + + ))} +
+ ); + }, +}; diff --git a/packages/propel/src/tabs/tabs.tsx b/packages/propel/src/tabs/tabs.tsx index 8188d1aa423..b7b3232e436 100644 --- a/packages/propel/src/tabs/tabs.tsx +++ b/packages/propel/src/tabs/tabs.tsx @@ -1,6 +1,8 @@ import * as React from "react"; import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs"; -import { cn } from "@plane/utils"; +import clsx from "clsx"; + + type TabsCompound = React.ForwardRefExoticComponent< React.ComponentProps & React.RefAttributes> @@ -23,7 +25,12 @@ const TabsRoot = React.forwardRef< React.ElementRef, React.ComponentProps >(({ className, ...props }, ref) => ( - + )); const TabsList = React.forwardRef< @@ -32,7 +39,7 @@ const TabsList = React.forwardRef< >(({ className, ...props }, ref) => ( (({ className, size = "md", ...props }, ref) => ( (({ className, ...props }, ref) => ( )); const TabsIndicator = React.forwardRef>(({ className, ...props }, ref) => (
+ > +
+
)); export const Tabs = Object.assign(TabsRoot, { From 72d396ebc69687f575703c2cb6ebb8cbfc5a7b0b Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Sun, 24 Aug 2025 21:17:27 +0530 Subject: [PATCH 15/20] refactor: clean up --- packages/propel/src/tabs/tabs.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/propel/src/tabs/tabs.tsx b/packages/propel/src/tabs/tabs.tsx index b7b3232e436..73889360433 100644 --- a/packages/propel/src/tabs/tabs.tsx +++ b/packages/propel/src/tabs/tabs.tsx @@ -2,8 +2,6 @@ import * as React from "react"; import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs"; import clsx from "clsx"; - - type TabsCompound = React.ForwardRefExoticComponent< React.ComponentProps & React.RefAttributes> > & { @@ -90,9 +88,7 @@ const TabsIndicator = React.forwardRef -
-
+ /> )); export const Tabs = Object.assign(TabsRoot, { From 15bd65c4eade34b6eae9dc99adc2acfb1254fec6 Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Thu, 28 Aug 2025 12:12:24 +0530 Subject: [PATCH 16/20] fix: lint --- packages/propel/package.json | 2 +- packages/propel/src/charts/components/tooltip.tsx | 2 +- packages/propel/src/tabs/tabs.stories.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/propel/package.json b/packages/propel/package.json index 0139872eba9..648a630ac31 100644 --- a/packages/propel/package.json +++ b/packages/propel/package.json @@ -53,4 +53,4 @@ "storybook": "^9.1.2", "typescript": "5.8.3" } -} \ No newline at end of file +} diff --git a/packages/propel/src/charts/components/tooltip.tsx b/packages/propel/src/charts/components/tooltip.tsx index 44ed5177442..076bf94867e 100644 --- a/packages/propel/src/charts/components/tooltip.tsx +++ b/packages/propel/src/charts/components/tooltip.tsx @@ -1,9 +1,9 @@ import React from "react"; import { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent"; // plane imports +import { cn } from "@plane/utils"; import { Card, ECardSpacing } from "../../card"; -import { cn } from "@plane/utils"; type Props = { active: boolean | undefined; diff --git a/packages/propel/src/tabs/tabs.stories.tsx b/packages/propel/src/tabs/tabs.stories.tsx index 0113e60a02b..28e7dc11ec7 100644 --- a/packages/propel/src/tabs/tabs.stories.tsx +++ b/packages/propel/src/tabs/tabs.stories.tsx @@ -1,6 +1,6 @@ +import { Fragment } from "react"; import type { Meta, StoryObj } from "@storybook/react-vite"; import { Tabs } from "./tabs"; -import { Fragment } from "react"; const meta: Meta = { title: "Components/Tabs", From fe380c441e30560932f4493c44a30dfac3f19f2a Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Thu, 28 Aug 2025 12:22:14 +0530 Subject: [PATCH 17/20] fix: lint --- packages/propel/src/charts/components/tooltip.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/propel/src/charts/components/tooltip.tsx b/packages/propel/src/charts/components/tooltip.tsx index 076bf94867e..a711a7df4de 100644 --- a/packages/propel/src/charts/components/tooltip.tsx +++ b/packages/propel/src/charts/components/tooltip.tsx @@ -4,7 +4,6 @@ import { NameType, Payload, ValueType } from "recharts/types/component/DefaultTo import { cn } from "@plane/utils"; import { Card, ECardSpacing } from "../../card"; - type Props = { active: boolean | undefined; activeKey?: string | null; From c9f27117c2c072f4a138c777d66ca9a625c438f3 Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Thu, 28 Aug 2025 20:12:20 +0530 Subject: [PATCH 18/20] fix: Remove duplicate storybook ESLint config --- packages/propel/.eslintrc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/propel/.eslintrc.js b/packages/propel/.eslintrc.js index 0828c415730..059c5445b2e 100644 --- a/packages/propel/.eslintrc.js +++ b/packages/propel/.eslintrc.js @@ -1,6 +1,6 @@ module.exports = { root: true, - extends: ["@plane/eslint-config/library.js", "plugin:storybook/recommended", "plugin:storybook/recommended"], + extends: ["@plane/eslint-config/library.js", "plugin:storybook/recommended"], rules: { "import/order": [ "warn", From 2f8127eed383e291f3cc892ee3cf28187ce3f024 Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Fri, 29 Aug 2025 01:29:05 +0530 Subject: [PATCH 19/20] fix: lint --- packages/propel/src/tabs/tabs.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/propel/src/tabs/tabs.tsx b/packages/propel/src/tabs/tabs.tsx index 9257c682307..5f6ca6c0c6b 100644 --- a/packages/propel/src/tabs/tabs.tsx +++ b/packages/propel/src/tabs/tabs.tsx @@ -2,7 +2,6 @@ import * as React from "react"; import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs"; import { cn } from "../utils"; - type TabsCompound = React.ForwardRefExoticComponent< React.ComponentProps & React.RefAttributes> > & { @@ -24,12 +23,7 @@ const TabsRoot = React.forwardRef< React.ElementRef, React.ComponentProps >(({ className, ...props }, ref) => ( - + )); const TabsList = React.forwardRef< From 728bd23d3099e482413e33a58390245b855f19ac Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Fri, 29 Aug 2025 02:13:38 +0530 Subject: [PATCH 20/20] fix: update classname import path in Tabs component --- packages/propel/src/tabs/tabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/propel/src/tabs/tabs.tsx b/packages/propel/src/tabs/tabs.tsx index 5f6ca6c0c6b..5bd148ba484 100644 --- a/packages/propel/src/tabs/tabs.tsx +++ b/packages/propel/src/tabs/tabs.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs"; -import { cn } from "../utils"; +import { cn } from "../utils/classname"; type TabsCompound = React.ForwardRefExoticComponent< React.ComponentProps & React.RefAttributes>