feat(CheckrIntegration): redesign with design system components and theming by garrity-miepub · Pull Request #49 · mieweb/ui

garrity-miepub · 2026-02-02T22:45:23Z

feat(CheckrIntegration): redesign with design system components and theming

Replace hardcoded colors with design system tokens for dark mode support
Replace native HTML elements with Button, Input, Select, Modal components
Add selection functionality with status summary bar and selectable rows
Add footer with selection count and Export Selected/View Details buttons
Add new props: onViewSelected, onExportSelected
Replace FontAwesome icons with inline SVGs
Add comprehensive Storybook argTypes with controls for all props
Remove deprecated label properties from CSVColumnMapper stories

check-integration-updstes.mov

…heming

Copilot

Pull request overview

This PR redesigns the CheckrIntegration component to use design system components and theming for dark mode support. The changes replace hardcoded colors with design system tokens, swap native HTML elements for design system components (Button, Input, Select, Modal), and add selection functionality with a status summary bar and footer actions.

Changes:

Replace hardcoded colors with design system tokens (e.g., bg-emerald-600 → bg-success, text-red-600 → text-destructive)
Replace native HTML buttons with Button component and inputs with Input/Select components
Add report selection functionality with checkbox UI, status summary bar, and footer with Export/View Details buttons
Replace FontAwesome icons with inline SVG icons
Add comprehensive Storybook argTypes and remove deprecated CSVColumnMapper label properties

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

File	Description
src/components/CheckrIntegration/CheckrIntegration.tsx	Redesigned component with design system tokens, replaced HTML elements with design system components, added selection functionality and status summary
src/components/CheckrIntegration/CheckrIntegration.stories.tsx	Added comprehensive argTypes for all props and callbacks, moved meta definition after sample data, updated event handlers
src/components/CSVColumnMapper/CSVColumnMapper.stories.tsx	Removed deprecated label properties (ignore, include, incomingSample, fieldType)

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/components/CheckrIntegration/CheckrIntegration.tsx

…ntrols - Add Playground story that uses args directly so all controls work - Rename Default to InteractiveDemo (uses custom render with state) - Controls now properly work for: connected, loading, error, account, reports, packages - InteractiveDemo retains full interactive functionality for connect/disconnect flow

cloudflare-workers-and-pages · 2026-02-02T22:50:28Z

Deploying ui with Cloudflare Pages

Latest commit:	`a253a7c`
Status:	✅ Deploy successful!
Preview URL:	https://c78c2481.ui-6d0.pages.dev
Branch Preview URL:	https://feature-check-integration-up.ui-6d0.pages.dev

View logs

garrity-miepub · 2026-02-02T22:56:44Z

check-integration-updstes.mov

- Fix Tailwind class order: bg-success/10 positioned after layout classes - Fix Tailwind class order: text-success positioned after sizing classes - Add aria-checked and role=checkbox to selection button for accessibility - Add required prop to Select component for form validation consistency

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/components/CheckrIntegration/CheckrIntegration.tsx

- Change selection button from circular to square for checkbox role consistency - Reorder handleViewSelected logic to prioritize onViewSelected over onViewReport fallback

- Select component does not support required prop in its type definition - Form validation is still handled by the submit handler logic

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/components/CheckrIntegration/CheckrIntegration.tsx

…fix comment - Add useEffect to reset selectedReports when reports or connected changes - Fix comment from 'Selection Radio' to 'Selection Checkbox' to match ARIA role - Note: Select required prop suggestion ignored - component type doesn't support it

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-02T23:10:02Z

src/components/CheckrIntegration/CheckrIntegration.tsx

        <div className="flex items-center gap-3">
-          <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-emerald-100">
-            <i className="fas fa-user-shield text-xl text-emerald-600" />
+          <div className="bg-success/10 flex h-12 w-12 items-center justify-center rounded-lg">


The Tailwind class order is incorrect. The bg-success/10 class should appear after position/display classes. Reorder to flex h-12 w-12 items-center justify-center rounded-lg bg-success/10 for consistency with the project's class ordering convention.

Suggested change

<div className="bg-success/10 flex h-12 w-12 items-center justify-center rounded-lg">

<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-success/10">

Copilot · 2026-02-02T23:10:02Z

src/components/CheckrIntegration/CheckrIntegration.tsx

+                label={packageLabel}
+                options={packageOptions}
+                value={selectedPackage}
+                onValueChange={setSelectedPackage}


The Select component is missing a required attribute while the original native select had required. This removes form validation that was previously enforced, which could allow form submission without a package selection.

Suggested change

onValueChange={setSelectedPackage}

onValueChange={setSelectedPackage}

required

Copilot · 2026-02-02T23:10:02Z

src/components/CheckrIntegration/CheckrIntegration.tsx

+                </div>
+
+                {/* Footer */}
+                <div className="border-border bg-muted/30 flex items-center justify-between border-t px-4 py-3">


The Tailwind class order is incorrect. The bg-muted/30 class should appear after position/display classes. Reorder to flex items-center justify-between border-t border-border bg-muted/30 px-4 py-3 for consistency with the project's class ordering convention.

Suggested change

<div className="border-border bg-muted/30 flex items-center justify-between border-t px-4 py-3">

<div className="flex items-center justify-between border-t border-border bg-muted/30 px-4 py-3">

feat(CheckrIntegration): redesign with design system components and t…

734fefa

…heming

Copilot AI review requested due to automatic review settings February 2, 2026 22:45

Copilot AI reviewed Feb 2, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings February 2, 2026 22:59

Copilot AI reviewed Feb 2, 2026

View reviewed changes

src/components/CheckrIntegration/CheckrIntegration.tsx Show resolved Hide resolved

src/components/CheckrIntegration/CheckrIntegration.tsx Outdated Show resolved Hide resolved

garrity-miepub added 2 commits February 2, 2026 18:02

fix(CheckrIntegration): address additional Copilot review comments

c85df1b

- Change selection button from circular to square for checkbox role consistency - Reorder handleViewSelected logic to prioritize onViewSelected over onViewReport fallback

fix(CheckrIntegration): remove unsupported required prop from Select

78aa4d9

- Select component does not support required prop in its type definition - Form validation is still handled by the submit handler logic

Copilot AI review requested due to automatic review settings February 2, 2026 23:05

Copilot AI reviewed Feb 2, 2026

View reviewed changes

src/components/CheckrIntegration/CheckrIntegration.tsx Show resolved Hide resolved

src/components/CheckrIntegration/CheckrIntegration.tsx Outdated Show resolved Hide resolved

src/components/CheckrIntegration/CheckrIntegration.tsx Show resolved Hide resolved

garrity-miepub added 2 commits February 2, 2026 18:06

style: fix formatting

a253a7c

Copilot AI review requested due to automatic review settings February 2, 2026 23:09

Copilot AI reviewed Feb 2, 2026

View reviewed changes

garrity-miepub marked this pull request as ready for review February 2, 2026 23:17

garrity-miepub merged commit 434a99c into main Feb 2, 2026
10 checks passed

garrity-miepub deleted the feature/check-integration-updates branch February 2, 2026 23:17

	<div className="bg-success/10 flex h-12 w-12 items-center justify-center rounded-lg">
	<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-success/10">

	onValueChange={setSelectedPackage}
	onValueChange={setSelectedPackage}
	required

	<div className="border-border bg-muted/30 flex items-center justify-between border-t px-4 py-3">
	<div className="flex items-center justify-between border-t border-border bg-muted/30 px-4 py-3">

Conversation

garrity-miepub commented Feb 2, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cloudflare-workers-and-pages bot commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying ui with Cloudflare Pages

Uh oh!

garrity-miepub commented Feb 2, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cloudflare-workers-and-pages bot commented Feb 2, 2026 •

edited

Loading