feat: bluehivemind portal component additions and refinements#184
feat: bluehivemind portal component additions and refinements#184wreiske wants to merge 10 commits into
Conversation
- ProviderMap: Interactive Mapbox GL map with markers, popups, hover highlights - NearbyProviderCard: Card for displaying nearby provider results - Accordion: Expandable/collapsible content sections with FAQItem type - useTheme: Accept defaultTheme parameter for forced theme modes - ThemeProvider: Pass defaultTheme to useTheme hook - Add mapbox-gl as optional peer dependency - Updated exports in index.ts (HelpSupportPanel renamed to avoid FAQItem conflict)
- Rewrite ProviderDetailHeader with gradient hero design matching production - Add glass morphism action card with backdrop-blur - Responsive QuickAction buttons (grid on mobile, flex on desktop) - Fix SiteHeader logo sizing (h-[30px] w-auto for wordmark) - Add blue gradient bottom border to white navbar variant - Fix navbar whitespace by removing conflicting relative class - Update ProviderCard, NearbyProviderCard, ServiceBadge styling - Remove unused icon components and functions
Broad set of additions and updates to support the bluehivemind web
portal integration: new components (e.g. ActivityFeed, HeroActionCard,
LiveOrderTracker, PortalShell, PhoneNumber, WorkspaceSwitcher,
ServicePricingManager, CSVColumnMapper, DocumentScanner variants),
plus refinements across existing components, stories, hooks, and
utils. Includes lint/format sweep.
Note: branched from the submodule pointer pinned in bluehivemind
('feat/provider-map-components'), which is behind 'origin/main'.
A rebase/merge is expected before landing.
Deploying ui with
|
| Latest commit: |
cb8e0e8
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://a1033820.ui-6d0.pages.dev |
| Branch Preview URL: | https://feat-bluehivemind-integratio.ui-6d0.pages.dev |
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds/updates supporting portal and dashboard UI work while sweeping formatting and Storybook/docs configuration for consistency.
Changes:
- Reformats Storybook preview/manager styles and configuration for consistency (imports, CSS, addon list).
- Cleans up documentation formatting across repo docs and GitHub agent/prompt markdown.
- Improves readability of embedded code examples (line wrapping, spacing), though a couple examples became syntactically misleading.
Reviewed changes
Copilot reviewed 11 out of 823 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| TESTING.md | Adds spacing/readability tweaks and wraps long code lines in examples. |
| README.md | Fixes table separator formatting and adds spacing in release workflow docs. |
| .storybook/preview.tsx | Import reordering / formatting cleanup. |
| .storybook/preview.css | Dark-mode Storybook docs/controls CSS formatting normalization. |
| .storybook/manager.ts | Formats template-literal conditional CSS for readability. |
| .storybook/main.ts | Adds missing trailing comma for consistent formatting. |
| .github/prompts/validate.prompt.md | Adds spacing to improve prompt readability. |
| .github/prompts/fix.prompt.md | Adds spacing to improve prompt readability. |
| .github/prompts/commit.prompt.md | Adds spacing to improve prompt readability. |
| .github/agents/style.agent.md | Reformats frontmatter and markdown examples/tables. |
| .github/agents/ag-grid-styling.agent.md | Reformats markdown/code examples and adds spacing/line wrapping. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| ## What to Flag as Issues | ||
|
|
||
| ### ❌ Hardcoded Colors (BAD) |
There was a problem hiding this comment.
These examples are no longer valid JSX/TSX usage of className (they read like assignments, not component markup). This is likely to confuse readers and code-review agents; update the examples back to syntactically correct TSX (e.g., showing <div className=\"...\" />), while keeping the intent about hardcoded vs token-based classes.
|
|
||
| ## What to Flag as Issues | ||
|
|
||
| ### ❌ Hardcoded Colors (BAD) |
There was a problem hiding this comment.
Same issue as the style agent doc: the className = '...' examples are not valid TSX and will mislead readers. Use real TSX snippets (component markup) to demonstrate the classes without turning the example into an assignment statement.
| AG Grid's theming system provides comprehensive tools for design system integration through its three-pillar approach: **themes**, **parameters**, and **parts**. By leveraging CSS custom properties, modular parts system, and extensive customization options, you can create consistent, maintainable, and performant data grid experiences that align perfectly with your design system. | ||
|
|
||
| The key to successful implementation is starting with the appropriate built-in theme, mapping your design tokens to AG Grid parameters, and progressively enhancing with custom CSS while respecting the grid's architecture and performance characteristics. | ||
|
|
||
| - `--mieweb-shadow-card` - Card shadow | ||
|
|
||
| ### Tailwind Preset Mappings | ||
|
|
||
| The `tailwind-preset.ts` maps CSS variables to Tailwind classes: |
There was a problem hiding this comment.
This trailing section (starting with --mieweb-shadow-card and the Tailwind preset mapping) appears unrelated to the AG Grid styling agent’s scope and reads like content copied from the branding/style agent doc. Consider removing it from this file or moving it into the appropriate branding/tailwind documentation so the AG Grid agent stays focused and avoids conflicting guidance.
|
@copilot this is a major ask... but can you get this up-to-date with main? There are several conflicts that need CAREFULLY resolved to make sure we don't break anything. |
Agent-Logs-Url: https://github.com/mieweb/ui/sessions/b570024a-94d5-41a6-a2b6-a09a429bc35b Co-authored-by: wreiske <6295044+wreiske@users.noreply.github.com>
Done in 84b2875. Summary of how I resolved the conflicts (541 commits behind main, 101
Verified all new bluehivemind components are still present (ActivityFeed, HeroActionCard, LiveOrderTracker, PortalShell, PhoneNumber, WorkspaceSwitcher, ServicePricingManager, CSVColumnMapper, DocumentScanner, UserAvatar, Sidebar, ConfirmDialog), and One caveat worth flagging: the push ended up as a single-parent squash-style commit rather than a two-parent merge commit because the agent's push path rebases before pushing and can't force-push a rewritten merge. The tree contents are identical to a proper merge, but if you'd prefer a true two-parent merge commit in history, that will need to be done with a direct |
SidebarNavItem.handleClick now calls preventDefault() on plain left-clicks so client-side router navigation is used instead of a full document load, while still honoring modifier/middle clicks for new tabs.
Keeps the icon chip from shrinking (shrink-0), top-aligns the icon with the title (items-start), lets cards fill equal height in a grid (h-full), prevents long content from overflowing (min-w-0), and tightens the description spacing/line-height.
|
@copilot resolve the merge conflicts in this pull request |
…egration # Conflicts: # .github/workflows/ci.yml # .github/workflows/release.yml # .gitmodules # .storybook/main.ts # .storybook/preview.tsx # .storybook/public/enterprise-health/logo-dm.svg # .storybook/public/enterprise-health/logo-lm.svg # .storybook/public/waggleline/icon.svg # .storybook/public/waggleline/logo-dm.svg # .storybook/public/webchart/icon.svg # .storybook/public/webchart/logo-dm.svg # .storybook/public/webchart/logo-lm.svg # lessons/README.md # package-lock.json # package.json # pnpm-lock.yaml # src/Branding.mdx # src/Introduction.mdx # src/brands/bluehive.css # src/brands/logos/enterprise-health/logo-dm.svg # src/brands/logos/enterprise-health/logo-lm.svg # src/brands/logos/waggleline/icon.svg # src/brands/logos/waggleline/logo-dm.svg # src/brands/logos/webchart/icon.svg # src/brands/logos/webchart/logo-dm.svg # src/brands/logos/webchart/logo-lm.svg # src/brands/mieweb.css # src/brands/ozwell.css # src/brands/ozwell.ts # src/brands/webchart.css # src/components/AGGrid/CellRenderers.tsx # src/components/AGGrid/brand-theme-utils.ts # src/components/AI/AI.stories.tsx # src/components/AI/AIChat.tsx # src/components/AI/AIMessage.tsx # src/components/AI/MCPToolCall.tsx # src/components/Address/Address.tsx # src/components/Alert/Alert.stories.tsx # src/components/AppHeader/AppHeader.stories.tsx # src/components/AppHeader/AppHeader.tsx # src/components/AudioPlayer/AudioPlayer.stories.tsx # src/components/AudioPlayer/AudioPlayer.tsx # src/components/AudioRecorder/AudioRecorder.stories.tsx # src/components/AudioRecorder/AudioRecorder.tsx # src/components/AuthDialog/AuthDialog.stories.tsx # src/components/AuthDialog/AuthDialog.tsx # src/components/BookingDialog/BookingDialog.tsx # src/components/Breadcrumb/Breadcrumb.stories.tsx # src/components/BusinessHours/BusinessHours.tsx # src/components/BusinessHoursEditor/BusinessHoursEditor.tsx # src/components/CSVColumnMapper/CSVColumnMapper.tsx # src/components/Card/index.ts # src/components/Checkbox/Checkbox.tsx # src/components/CheckrIntegration/CheckrIntegration.tsx # src/components/ClaimProviderForm/ClaimProviderForm.tsx # src/components/Colors/Colors.stories.tsx # src/components/CommandPalette/CommandPalette.stories.tsx # src/components/CommandPalette/CommandPalette.tsx # src/components/ConnectionStatus/ConnectionStatus.tsx # src/components/CookieConsent/CookieConsent.tsx # src/components/CountBadge/CountBadge.tsx # src/components/CountryCodeDropdown/CountryCodeDropdown.tsx # src/components/CreateInvoiceModal/CreateInvoiceModal.tsx # src/components/CreateReferralModal/CreateReferralModal.tsx # src/components/Dashboard/Dashboard.stories.tsx # src/components/Dashboard/DashboardWidgets.stories.tsx # src/components/DashboardWidget/DashboardWidget.tsx # src/components/DataVisNITRO/DataVisNITRO.stories.tsx # src/components/DateInput/DateInput.tsx # src/components/DateRangePicker/DateRangePicker.tsx # src/components/DateRangePicker/index.ts # src/components/DocumentScanner/DocumentScanner.tsx # src/components/DocumentScanner/DropZone.tsx # src/components/Dropdown/Dropdown.tsx # src/components/EmployeeForm/EmployeeForm.tsx # src/components/EmployeeProfile/EmployeeProfile.tsx # src/components/EmployerList/EmployerList.tsx # src/components/EmployerPricingCard/EmployerPricingCard.tsx # src/components/EmployerServiceModal/EmployerServiceModal.tsx # src/components/EmployerView/EmployerView.tsx # src/components/ErrorPage/ErrorPage.tsx # src/components/FileManager/FileManager.tsx # src/components/HRISProviderSelector/HRISProviderSelector.tsx # src/components/Icons/Icons.stories.tsx # src/components/Input/Input.tsx # src/components/InventoryManager/InventoryManager.tsx # src/components/InvoiceList/InvoiceList.tsx # src/components/InvoicePaymentPage/InvoicePaymentPage.tsx # src/components/InvoiceView/InvoiceView.tsx # src/components/LanguageSelector/LanguageSelector.tsx # src/components/LoadingPage/LoadingPage.tsx # src/components/Messaging/AttachmentPicker.tsx # src/components/Messaging/ConversationHeader.tsx # src/components/Messaging/MessageBubble.tsx # src/components/Messaging/MessageComposer.tsx # src/components/Messaging/MessageList.tsx # src/components/NotificationCenter/NotificationCenter.tsx # src/components/OnboardingWizard/OnboardingWizard.tsx # src/components/OrderCard/OrderCard.tsx # src/components/OrderConfirmationWizard/OrderConfirmationWizard.tsx # src/components/OrderList/OrderList.tsx # src/components/OrderLookupForm/OrderLookupForm.tsx # src/components/OrderSidebar/OrderSidebar.tsx # src/components/PageHeader/PageHeader.tsx # src/components/Pagination/Pagination.stories.tsx # src/components/PatientHeader/PatientHeader.tsx # src/components/PaymentHistoryTable/PaymentHistoryTable.tsx # src/components/PaymentMethod/PaymentMethod.tsx # src/components/PendingClaimsTable/PendingClaimsTable.tsx # src/components/PermissionsEditor/PermissionsEditor.stories.tsx # src/components/PermissionsEditor/PermissionsEditor.tsx # src/components/PhoneInput/PhoneInput.tsx # src/components/ProductVersion/ProductVersion.tsx # src/components/Progress/Progress.tsx # src/components/ProviderCard/ProviderCard.tsx # src/components/ProviderDetailHeader/ProviderDetailHeader.stories.tsx # src/components/ProviderDetailHeader/ProviderDetailHeader.tsx # src/components/ProviderOverview/ProviderOverview.tsx # src/components/ProviderSearchFilters/ProviderSearchFilters.tsx # src/components/ProviderSelector/ProviderSelector.tsx # src/components/ProviderSettings/ProviderSettings.tsx # src/components/QuickAction/QuickAction.tsx # src/components/QuickLinksCard/QuickLinksCard.tsx # src/components/Radio/Radio.tsx # src/components/RecurringServiceCard/RecurringServiceCard.tsx # src/components/RejectionModal/RejectionModal.tsx # src/components/ReportDashboard/ReportDashboard.tsx # src/components/ResultsEntryForm/ResultsEntryForm.tsx # src/components/SSOConfigForm/SSOConfigForm.tsx # src/components/ScheduleCalendar/ScheduleCalendar.tsx # src/components/SchedulePicker/SchedulePicker.tsx # src/components/Select/Select.stories.tsx # src/components/Select/Select.tsx # src/components/ServiceAccordion/ServiceAccordion.stories.tsx # src/components/ServiceAccordion/ServiceAccordion.tsx # src/components/ServiceCard/ServiceCard.tsx # src/components/ServiceGeneralSettings/ServiceGeneralSettings.tsx # src/components/ServiceGrid/ServiceGrid.tsx # src/components/ServicePicker/ServicePicker.tsx # src/components/ServicePricingManager/ServicePricingManager.tsx # src/components/ServiceShippingSettings/ServiceShippingSettings.tsx # src/components/SetupServiceModal/SetupServiceModal.tsx # src/components/Sidebar/Sidebar.stories.tsx # src/components/Sidebar/Sidebar.tsx # src/components/SiteFooter/SiteFooter.stories.tsx # src/components/SiteFooter/SiteFooter.tsx # src/components/SiteHeader/SiteHeader.stories.tsx # src/components/SiteHeader/SiteHeader.tsx # src/components/Slider/Slider.stories.tsx # src/components/Slider/Slider.tsx # src/components/StepIndicator/StepIndicator.tsx # src/components/TableOfContents/TableOfContents.tsx # src/components/Textarea/Textarea.tsx # src/components/Timeline/Timeline.stories.tsx # src/components/Timeline/Timeline.tsx # src/components/Toast/Toast.stories.tsx # src/components/Toast/Toast.tsx # src/components/VisuallyHidden/VisuallyHidden.stories.tsx # src/components/WebsiteInput/WebsiteInput.tsx # src/index.ts # src/styles/base.css # src/styles/condensed-view.css # src/styles/init.css # src/tailwind-preset.ts # src/utils/index.ts # tsup.config.ts # vitest.config.ts
Resolved in 9101c02 — a true two-parent merge of How conflicts were resolved (167 total: 136 both-modified, 30 added-by-both, 1 delete):
Validation: One heads-up: |
| @@ -0,0 +1,70 @@ | |||
| import type { Meta, StoryObj } from '@storybook/react-vite'; | |||
| import React from 'react'; | |||
| const [mapStyle, setMapStyle] = React.useState<'streets' | 'satellite'>( | ||
| 'streets' | ||
| ); | ||
| const [isFullscreen, setIsFullscreen] = React.useState(false); |
| @@ -0,0 +1,35 @@ | |||
| import type { Meta, StoryObj } from '@storybook/react-vite'; | |||
| import React from 'react'; | |||
| useEffect(() => { | ||
| const stored = getStoredTheme(); | ||
| setThemeState(stored); | ||
| const initial = stored ?? defaultTheme; | ||
| setThemeState(initial); | ||
|
|
| // Reset state whenever the dialog is reopened or the default changes. | ||
| React.useEffect(() => { | ||
| if (open) { | ||
| setMessage(fieldOpts?.defaultValue ?? ''); | ||
| setValidationError(null); | ||
| } | ||
| }, [open]); |
| // Cleanup preview URLs on unmount | ||
| React.useEffect(() => { | ||
| return () => { | ||
| files.forEach((f) => URL.revokeObjectURL(f.previewUrl)); | ||
| }; |
| }); | ||
| } | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [open, permission]); |
| detection.stopDetection(); | ||
| }; | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [isReady, autoDetectEnabled, capturedFile]); |
| <button | ||
| type="button" | ||
| onClick={() => toggleItem(itemId)} | ||
| aria-expanded={isExpanded} | ||
| aria-controls={`accordion-content-${itemId}`} | ||
| className={cn(accordionTriggerVariants({ size, variant }), className)} |
| React.useEffect(() => { | ||
| if (!contentRef.current) return; | ||
| const resizeObserver = new ResizeObserver(() => { | ||
| if (isExpanded) { | ||
| setHeight(contentRef.current?.scrollHeight); | ||
| } | ||
| }); | ||
| resizeObserver.observe(contentRef.current); | ||
| return () => resizeObserver.disconnect(); | ||
| }, [isExpanded]); |
| <button | ||
| type="button" | ||
| className="hover:bg-muted/50 flex w-96 items-center justify-between rounded-lg border bg-card p-3 text-left" | ||
| onClick={() => alert('Row clicked')} | ||
| > |
| accent: 'success', | ||
| description: 'Click to view', | ||
|
|
||
| onClick: () => alert('Navigate to results'), |
| import tseslint from '@typescript-eslint/eslint-plugin'; | ||
| import tsparser from '@typescript-eslint/parser'; | ||
| import jsxA11yPlugin from 'eslint-plugin-jsx-a11y'; | ||
| import reactPlugin from 'eslint-plugin-react'; | ||
| import reactHooksPlugin from 'eslint-plugin-react-hooks'; |
Set scrollTop on the list's own scroll container instead of calling bottomRef.scrollIntoView(): scrollIntoView() also scrolls every scrollable ancestor (the page <main>/window) to reveal the anchor, yanking the whole page to the bottom on load and on new messages. Scoping the scroll keeps the conversation self-contained and never moves the surrounding page.
Adds and refines components needed to power the employee/employer portal in the bluehivemind monorepo ('apps/web') and the watchdog dashboard.
Highlights
Merge with main
origin/main(796 commits) as a true two-parent merge commit. 167 conflicts were resolved: all 12 branch-only components are preserved and exported, while shared infra and existing components/stories/tests take main's canonical version (branch-side changes to those were pure prettier/import-order reformatting).mapbox-glpeer/dev deps were re-added for ProviderMap, and integration breakages surfaced bytscwere fixed (ProviderSearchFilters export alignment; keeping the branch'sThemeProvider+useTheme(defaultTheme)pair).formatPhoneNumberambiguity has been resolved: the canonical version lives insrc/utils/phone.ts(used byPhoneInput); the component-local version remains importable directly from./PhoneNumber.Notes
pnpm typecheckclean,pnpm test196/196 passing,pnpm buildsucceeds.pnpm lintreports 17 errors, all in the new branch-only components (e.g. browser-globalno-undefforalert/ImageData/ResizeObserver, a fewexhaustive-deps). These are unchanged from the pre-merge branch tip — the merge introduced none — but they need a cleanup pass before CI lint is green.