Skip to content

Commit c0082bc

Browse files
ryanrozichryanrozich
committed
fix: resolve TypeScript and linting errors in PR #62
- Fix unused imports and variables across test files - Update ActiveFilters usage to pass correct props (api, filterModel) - Fix QuickFilterOption structure in RealWorldExamples (add id, label) - Add missing id prop to AnchorHeading components - Fix CodeBlock usage to use 'code' prop instead of children - Remove unused DocumentationPanel import - Fix type casting issues with window.location in tests - Apply automatic formatting fixes from linter
1 parent ffdb71d commit c0082bc

File tree

11 files changed

+158
-104
lines changed

11 files changed

+158
-104
lines changed

‎src/components/FilterPresets/ShareButton/ShareButton.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { describe, it, expect, vi, beforeEach } from "vitest";
2-
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
2+
import { render, screen, waitFor } from "@testing-library/react";
33
import userEvent from "@testing-library/user-event";
44
import { ShareButton } from "./index";
55
import type { FilterPreset } from "../../../utils/presetSharing/types";
@@ -13,7 +13,7 @@ Object.assign(navigator, {
1313

1414
// Mock the URL serialization
1515
vi.mock("../../../utils/presetSharing", () => ({
16-
createShareableUrl: vi.fn((preset, options) => ({
16+
createShareableUrl: vi.fn((_preset, options) => ({
1717
url:
1818
options.mode === "embedded"
1919
? "https://example.com?preset=compressed123"

‎src/demo/FilterPresetsShowcase.tsx‎

Lines changed: 68 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import AdvancedPresetExample from "./examples/AdvancedPresetExample";
99
import CustomUIExample from "./examples/CustomUIExample";
1010
import RealWorldExamples from "./examples/RealWorldExamples";
1111
import { AnchorHeading } from "./components/AnchorHeading";
12-
import { DocumentationPanel } from "./components/DocumentationPanel";
1312
import { CodeBlock } from "./components/CodeBlock";
1413

1514
const FilterPresetsShowcase: React.FC = () => {
@@ -18,7 +17,9 @@ const FilterPresetsShowcase: React.FC = () => {
1817
return (
1918
<div className={styles["showcase-container"]}>
2019
<div className={styles["showcase-header"]}>
21-
<AnchorHeading level={1}>Filter Presets Showcase</AnchorHeading>
20+
<AnchorHeading level={1} id="filter-presets-showcase">
21+
Filter Presets Showcase
22+
</AnchorHeading>
2223
<p className={styles["showcase-description"]}>
2324
Save, load, and share filter configurations with the powerful Filter
2425
Presets feature. This showcase demonstrates various preset
@@ -27,7 +28,9 @@ const FilterPresetsShowcase: React.FC = () => {
2728
</div>
2829

2930
<div className={styles["showcase-benefits"]}>
30-
<AnchorHeading level={2}>Overview & Benefits</AnchorHeading>
31+
<AnchorHeading level={2} id="overview-benefits">
32+
Overview & Benefits
33+
</AnchorHeading>
3134
<div className={styles["benefits-grid"]}>
3235
<div className={styles["benefit-card"]}>
3336
<h3>💾 Persistent Filters</h3>
@@ -59,7 +62,9 @@ const FilterPresetsShowcase: React.FC = () => {
5962

6063
<TabPanel>
6164
<div className={styles["tab-content"]}>
62-
<AnchorHeading level={2}>Basic Preset Usage</AnchorHeading>
65+
<AnchorHeading level={2} id="basic-preset-usage">
66+
Basic Preset Usage
67+
</AnchorHeading>
6368
<p>
6469
Get started with filter presets using system-defined and
6570
user-created presets. This example shows the fundamental features
@@ -71,7 +76,9 @@ const FilterPresetsShowcase: React.FC = () => {
7176

7277
<TabPanel>
7378
<div className={styles["tab-content"]}>
74-
<AnchorHeading level={2}>Advanced Features</AnchorHeading>
79+
<AnchorHeading level={2} id="advanced-features">
80+
Advanced Features
81+
</AnchorHeading>
7582
<p>
7683
Explore advanced capabilities including multi-grid
7784
synchronization, URL sharing, import/export workflows, and
@@ -83,7 +90,9 @@ const FilterPresetsShowcase: React.FC = () => {
8390

8491
<TabPanel>
8592
<div className={styles["tab-content"]}>
86-
<AnchorHeading level={2}>Custom UI Integration</AnchorHeading>
93+
<AnchorHeading level={2} id="custom-ui-integration">
94+
Custom UI Integration
95+
</AnchorHeading>
8796
<p>
8897
Customize the preset UI to match your application's design system.
8998
Replace default components with your own implementations.
@@ -94,7 +103,9 @@ const FilterPresetsShowcase: React.FC = () => {
94103

95104
<TabPanel>
96105
<div className={styles["tab-content"]}>
97-
<AnchorHeading level={2}>Real-World Examples</AnchorHeading>
106+
<AnchorHeading level={2} id="real-world-examples">
107+
Real-World Examples
108+
</AnchorHeading>
98109
<p>
99110
See filter presets in action with practical examples including
100111
sales dashboards, task management, and data analytics platforms.
@@ -105,18 +116,23 @@ const FilterPresetsShowcase: React.FC = () => {
105116

106117
<TabPanel>
107118
<div className={styles["tab-content"]}>
108-
<AnchorHeading level={2}>API Playground</AnchorHeading>
119+
<AnchorHeading level={2} id="api-playground">
120+
API Playground
121+
</AnchorHeading>
109122
<p>
110123
Experiment with the Filter Presets API directly. Try different
111124
configurations and see the results in real-time.
112125
</p>
113126
<div className={styles["api-playground"]}>
114-
<DocumentationPanel
115-
title="Filter Presets API"
116-
description="Interactive API documentation and playground"
117-
>
118-
<AnchorHeading level={3}>Quick Start</AnchorHeading>
119-
<CodeBlock language="typescript">{`
127+
<div className={styles["documentation-section"]}>
128+
<h3>Filter Presets API</h3>
129+
<p>Interactive API documentation and playground</p>
130+
<AnchorHeading level={3} id="quick-start">
131+
Quick Start
132+
</AnchorHeading>
133+
<CodeBlock
134+
language="typescript"
135+
code={`
120136
// Enable presets with basic configuration
121137
<QuickFilterDropdown
122138
columns={columns}
@@ -141,10 +157,15 @@ const FilterPresetsShowcase: React.FC = () => {
141157
allowExport: true
142158
}}
143159
/>
144-
`}</CodeBlock>
160+
`}
161+
/>
145162

146-
<AnchorHeading level={3}>Programmatic Control</AnchorHeading>
147-
<CodeBlock language="typescript">{`
163+
<AnchorHeading level={3} id="programmatic-control">
164+
Programmatic Control
165+
</AnchorHeading>
166+
<CodeBlock
167+
language="typescript"
168+
code={`
148169
// Use the useFilterPresets hook for programmatic control
149170
const {
150171
presets,
@@ -173,10 +194,15 @@ const handleSave = async () => {
173194
const handleLoad = (presetId: string) => {
174195
loadPreset(presetId);
175196
};
176-
`}</CodeBlock>
197+
`}
198+
/>
177199

178-
<AnchorHeading level={3}>Storage Configuration</AnchorHeading>
179-
<CodeBlock language="typescript">{`
200+
<AnchorHeading level={3} id="storage-configuration">
201+
Storage Configuration
202+
</AnchorHeading>
203+
<CodeBlock
204+
language="typescript"
205+
code={`
180206
// Configure storage options
181207
const storageConfig = {
182208
maxStorageSize: 5 * 1024 * 1024, // 5MB
@@ -186,10 +212,15 @@ const storageConfig = {
186212
cleanupInterval: 24 * 60 * 60 * 1000, // Daily
187213
maxAge: 90 * 24 * 60 * 60 * 1000 // 90 days
188214
};
189-
`}</CodeBlock>
215+
`}
216+
/>
190217

191-
<AnchorHeading level={3}>Custom Renderers</AnchorHeading>
192-
<CodeBlock language="typescript">{`
218+
<AnchorHeading level={3} id="custom-renderers">
219+
Custom Renderers
220+
</AnchorHeading>
221+
<CodeBlock
222+
language="typescript"
223+
code={`
193224
// Provide custom UI components
194225
<QuickFilterDropdown
195226
enablePresets={{
@@ -218,10 +249,15 @@ const storageConfig = {
218249
)
219250
}}
220251
/>
221-
`}</CodeBlock>
252+
`}
253+
/>
222254

223-
<AnchorHeading level={3}>Event Handlers</AnchorHeading>
224-
<CodeBlock language="typescript">{`
255+
<AnchorHeading level={3} id="event-handlers">
256+
Event Handlers
257+
</AnchorHeading>
258+
<CodeBlock
259+
language="typescript"
260+
code={`
225261
// Listen to preset events
226262
<QuickFilterDropdown
227263
enablePresets={{
@@ -245,7 +281,8 @@ const storageConfig = {
245281
}
246282
}}
247283
/>
248-
`}</CodeBlock>
284+
`}
285+
/>
249286

250287
<div className={styles["playground-controls"]}>
251288
<h4>Try It Live</h4>
@@ -281,14 +318,16 @@ const storageConfig = {
281318
Apply Configuration
282319
</button>
283320
</div>
284-
</DocumentationPanel>
321+
</div>
285322
</div>
286323
</div>
287324
</TabPanel>
288325
</Tabs>
289326

290327
<div className={styles["showcase-footer"]}>
291-
<AnchorHeading level={2}>Performance Metrics</AnchorHeading>
328+
<AnchorHeading level={2} id="performance-metrics">
329+
Performance Metrics
330+
</AnchorHeading>
292331
<div className={styles["metrics-grid"]}>
293332
<div className={styles["metric-card"]}>
294333
<h4>Storage Efficiency</h4>

‎src/demo/config/commonUIConfig.test.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from "react";
21
import { render, screen } from "@testing-library/react";
32
import { describe, it, expect } from "vitest";
43
import { StatsCard, statsCards } from "./commonUIConfig";
@@ -20,7 +19,6 @@ describe("StatsCard", () => {
2019
expect(iconContainer).toBeTruthy();
2120

2221
// Verify the background class is applied based on the color
23-
const expectedBgClass = `bg-${card.colorClass}-500/10`;
2422
const hasBackgroundClass =
2523
iconContainer?.className.includes("bg-indigo-500/10") ||
2624
iconContainer?.className.includes("bg-green-500/10") ||
@@ -31,7 +29,6 @@ describe("StatsCard", () => {
3129

3230
// Verify the text color is applied
3331
const iconSpan = iconContainer?.querySelector("span");
34-
const expectedTextClass = `text-${card.colorClass}-400`;
3532
const hasTextClass =
3633
iconSpan?.className.includes("text-indigo-400") ||
3734
iconSpan?.className.includes("text-green-400") ||

‎src/demo/examples/AdvancedPresetExample.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -263,11 +263,12 @@ const AdvancedPresetExample: React.FC = () => {
263263
</div>
264264

265265
<div style={{ margin: "1rem 0" }}>
266-
<ActiveFilters
267-
api={gridApi1}
268-
filterColumns={columnDefs}
269-
dateFilterMode="both"
270-
/>
266+
{gridApi1 && (
267+
<ActiveFilters
268+
api={gridApi1}
269+
filterModel={gridApi1.getFilterModel()}
270+
/>
271+
)}
271272
</div>
272273
</div>
273274

@@ -290,11 +291,12 @@ const AdvancedPresetExample: React.FC = () => {
290291
</div>
291292

292293
<div style={{ margin: "1rem 0" }}>
293-
<ActiveFilters
294-
api={gridApi2}
295-
filterColumns={columnDefs}
296-
dateFilterMode="both"
297-
/>
294+
{gridApi2 && (
295+
<ActiveFilters
296+
api={gridApi2}
297+
filterModel={gridApi2.getFilterModel()}
298+
/>
299+
)}
298300
</div>
299301
</div>
300302
</TabPanel>

‎src/demo/examples/BasicPresetExample.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -275,11 +275,12 @@ const BasicPresetExample: React.FC = () => {
275275
)}
276276

277277
<div className={styles.activeFiltersContainer}>
278-
<ActiveFilters
279-
api={gridApi}
280-
filterColumns={columnDefs}
281-
dateFilterMode="both"
282-
/>
278+
{gridApi && (
279+
<ActiveFilters
280+
api={gridApi}
281+
filterModel={gridApi.getFilterModel()}
282+
/>
283+
)}
283284
</div>
284285
</div>
285286

‎src/demo/examples/CustomUIExample.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -544,7 +544,7 @@ const CustomUIExample: React.FC = () => {
544544
<CustomPresetSelector
545545
presets={presets}
546546
onSelect={handlePresetSelect}
547-
currentPresetId={currentPresetId}
547+
currentPresetId={currentPresetId || undefined}
548548
/>
549549

550550
<button
@@ -563,11 +563,12 @@ const CustomUIExample: React.FC = () => {
563563
</div>
564564

565565
<div className={styles.activeFiltersContainer}>
566-
<ActiveFilters
567-
api={gridApi}
568-
filterColumns={columnDefs}
569-
dateFilterMode="both"
570-
/>
566+
{gridApi && (
567+
<ActiveFilters
568+
api={gridApi}
569+
filterModel={gridApi.getFilterModel()}
570+
/>
571+
)}
571572
</div>
572573
</div>
573574

0 commit comments

Comments
 (0)