Skip to content

Commit ec6a479

Browse files
ryanrozichryanrozich
committed
fix: dynamic branch links and StackBlitz functionality (#83)
- Add deployment detection utility for dynamic URL generation - Fix hardcoded branch references in StackBlitz components - Update example generation with improved templates and configs - Add stackblitz.json for proper StackBlitz integration - Remove duplicate Tailwind imports causing styling conflicts - Add scripts for example generation and branch info injection - Add comprehensive tests for deployment detection - Fix linting errors and remove duplicate logger method - Remove problematic GitHub workflow This ensures StackBlitz links work correctly across all deployment contexts (main branch, PR previews, local development) and examples actually show working components instead of just basic apps.
1 parent b1ba6bf commit ec6a479

22 files changed

+598
-115
lines changed

‎.github/workflows/update-stackblitz-examples.yml‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎examples/activefilters/App.tsx‎

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import React, { useState } from "react";
1+
import React, { useState, useRef } from "react";
22
import { ActiveFilters, DateFilter } from "ag-grid-react-components";
33
import { AgGridReact } from "ag-grid-react";
44
import "ag-grid-community/styles/ag-grid.css";
55
import "ag-grid-community/styles/ag-theme-quartz.css";
66

77
// Example implementation for ActiveFilters
88
function App() {
9+
const gridRef = useRef(null);
910
const [rowData] = useState([
1011
{
1112
id: 1,
@@ -28,33 +29,58 @@ function App() {
2829
status: "Done",
2930
priority: "Low",
3031
},
32+
{
33+
id: 4,
34+
name: "Task 4",
35+
date: "2024-01-30",
36+
status: "Open",
37+
priority: "High",
38+
},
39+
{
40+
id: 5,
41+
name: "Task 5",
42+
date: "2024-02-05",
43+
status: "In Progress",
44+
priority: "Low",
45+
},
3146
]);
3247

3348
const [columnDefs] = useState([
34-
{ field: "name", headerName: "Name" },
49+
{ field: "name", headerName: "Name", filter: true },
3550
{
3651
field: "date",
3752
headerName: "Date",
38-
filter: true,
53+
filter: DateFilter,
54+
filterParams: {
55+
naturalLanguageEnabled: true,
56+
},
3957
},
40-
{ field: "status", headerName: "Status" },
41-
{ field: "priority", headerName: "Priority" },
58+
{ field: "status", headerName: "Status", filter: true },
59+
{ field: "priority", headerName: "Priority", filter: true },
4260
]);
4361

4462
return (
4563
<div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
4664
<div style={{ padding: "20px", flex: "0 0 auto" }}>
4765
<h1>ActiveFilters - Interactive Pills</h1>
4866
<p>Display active filters as removable pills</p>
67+
68+
<div style={{ marginTop: "16px" }}>
69+
<ActiveFilters api={gridRef.current?.api} />
70+
</div>
4971
</div>
5072
<div
5173
className="ag-theme-quartz-dark"
5274
style={{ flex: 1, padding: "0 20px 20px" }}
5375
>
5476
<AgGridReact
77+
ref={gridRef}
5578
rowData={rowData}
5679
columnDefs={columnDefs}
5780
floatingFilter={true}
81+
onGridReady={(params) => {
82+
gridRef.current = params;
83+
}}
5884
/>
5985
</div>
6086
</div>

‎examples/activefilters/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
{
22
"name": "activefilters-example",
33
"version": "1.0.0",
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vite build",
7+
"preview": "vite preview"
8+
},
49
"dependencies": {
510
"react": "^18.2.0",
611
"react-dom": "^18.2.0",

‎examples/activefilters/stackblitz.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"installDependencies": true,
3+
"startCommand": "npm run dev",
4+
"env": {
5+
"NODE_ENV": "development"
6+
}
7+
}

‎examples/datefilter/App.tsx‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import React, { useState } from "react";
1+
import React, { useState, useRef } from "react";
22
import { DateFilter } from "ag-grid-react-components";
33
import { AgGridReact } from "ag-grid-react";
4+
45
import "ag-grid-community/styles/ag-grid.css";
56
import "ag-grid-community/styles/ag-theme-quartz.css";
67

78
// Example implementation for DateFilter
89
function App() {
10+
const gridRef = useRef(null);
911
const [rowData] = useState([
1012
{
1113
id: 1,
@@ -28,6 +30,20 @@ function App() {
2830
status: "Done",
2931
priority: "Low",
3032
},
33+
{
34+
id: 4,
35+
name: "Task 4",
36+
date: "2024-01-30",
37+
status: "Open",
38+
priority: "High",
39+
},
40+
{
41+
id: 5,
42+
name: "Task 5",
43+
date: "2024-02-05",
44+
status: "In Progress",
45+
priority: "Low",
46+
},
3147
]);
3248

3349
const [columnDefs] = useState([
@@ -36,6 +52,11 @@ function App() {
3652
field: "date",
3753
headerName: "Date",
3854
filter: DateFilter,
55+
filterParams: {
56+
naturalLanguageEnabled: true,
57+
dateFormat: "yyyy-MM-dd",
58+
},
59+
floatingFilter: true,
3960
},
4061
{ field: "status", headerName: "Status" },
4162
{ field: "priority", headerName: "Priority" },
@@ -52,9 +73,13 @@ function App() {
5273
style={{ flex: 1, padding: "0 20px 20px" }}
5374
>
5475
<AgGridReact
76+
ref={gridRef}
5577
rowData={rowData}
5678
columnDefs={columnDefs}
5779
floatingFilter={true}
80+
onGridReady={(params) => {
81+
gridRef.current = params;
82+
}}
5883
/>
5984
</div>
6085
</div>

‎examples/datefilter/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
{
22
"name": "datefilter-example",
33
"version": "1.0.0",
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vite build",
7+
"preview": "vite preview"
8+
},
49
"dependencies": {
510
"react": "^18.2.0",
611
"react-dom": "^18.2.0",

‎examples/datefilter/stackblitz.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"installDependencies": true,
3+
"startCommand": "npm run dev",
4+
"env": {
5+
"NODE_ENV": "development"
6+
}
7+
}

‎examples/manifest.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"name": "DateFilter",
66
"title": "DateFilter - Natural Language Example",
77
"description": "AG Grid with natural language date filtering",
8-
"stackblitzUrl": "https://stackblitz.com/github/ryanrozich/ag-grid-react-components/tree/main/examples/datefilter",
8+
"stackblitzUrl": "https://stackblitz.com/github/ryanrozich/ag-grid-react-components/tree/[BRANCH]/examples/datefilter",
99
"files": {
1010
"App.tsx": "examples/datefilter/App.tsx",
1111
"package.json": "examples/shared/package.json"
@@ -16,7 +16,7 @@
1616
"name": "QuickFilterDropdown",
1717
"title": "QuickFilterDropdown - Custom Presets",
1818
"description": "Quick filter dropdown with custom filter presets",
19-
"stackblitzUrl": "https://stackblitz.com/github/ryanrozich/ag-grid-react-components/tree/main/examples/quickfilterdropdown",
19+
"stackblitzUrl": "https://stackblitz.com/github/ryanrozich/ag-grid-react-components/tree/[BRANCH]/examples/quickfilterdropdown",
2020
"files": {
2121
"App.tsx": "examples/quickfilterdropdown/App.tsx",
2222
"package.json": "examples/shared/package.json"
@@ -27,7 +27,7 @@
2727
"name": "ActiveFilters",
2828
"title": "ActiveFilters - Interactive Pills",
2929
"description": "Display active filters as removable pills",
30-
"stackblitzUrl": "https://stackblitz.com/github/ryanrozich/ag-grid-react-components/tree/main/examples/activefilters",
30+
"stackblitzUrl": "https://stackblitz.com/github/ryanrozich/ag-grid-react-components/tree/[BRANCH]/examples/activefilters",
3131
"files": {
3232
"App.tsx": "examples/activefilters/App.tsx",
3333
"package.json": "examples/shared/package.json"

‎examples/quickfilterdropdown/App.tsx‎

Lines changed: 50 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import React, { useState } from "react";
2-
import { QuickFilterDropdown, ActiveFilters } from "ag-grid-react-components";
1+
import React, { useState, useRef } from "react";
2+
import { QuickFilterDropdown } from "ag-grid-react-components";
33
import { AgGridReact } from "ag-grid-react";
4+
45
import "ag-grid-community/styles/ag-grid.css";
56
import "ag-grid-community/styles/ag-theme-quartz.css";
67

78
// Example implementation for QuickFilterDropdown
89
function App() {
10+
const gridRef = useRef(null);
911
const [rowData] = useState([
1012
{
1113
id: 1,
@@ -28,33 +30,72 @@ function App() {
2830
status: "Done",
2931
priority: "Low",
3032
},
33+
{
34+
id: 4,
35+
name: "Task 4",
36+
date: "2024-01-30",
37+
status: "Open",
38+
priority: "High",
39+
},
40+
{
41+
id: 5,
42+
name: "Task 5",
43+
date: "2024-02-05",
44+
status: "In Progress",
45+
priority: "Low",
46+
},
3147
]);
3248

3349
const [columnDefs] = useState([
34-
{ field: "name", headerName: "Name" },
50+
{ field: "name", headerName: "Name", filter: true },
51+
{ field: "date", headerName: "Date", filter: "agDateColumnFilter" },
52+
{ field: "status", headerName: "Status", filter: true },
53+
{ field: "priority", headerName: "Priority", filter: true },
54+
]);
55+
56+
const filterPresets = [
3557
{
36-
field: "date",
37-
headerName: "Date",
38-
filter: true,
58+
id: "high-priority",
59+
name: "High Priority",
60+
filter: { priority: { values: ["High"] } },
3961
},
40-
{ field: "status", headerName: "Status" },
41-
{ field: "priority", headerName: "Priority" },
42-
]);
62+
{
63+
id: "recent",
64+
name: "Recent Tasks",
65+
filter: { date: { dateFrom: "2024-01-20" } },
66+
},
67+
{
68+
id: "in-progress",
69+
name: "In Progress",
70+
filter: { status: { values: ["In Progress"] } },
71+
},
72+
];
4373

4474
return (
4575
<div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
4676
<div style={{ padding: "20px", flex: "0 0 auto" }}>
4777
<h1>QuickFilterDropdown - Custom Presets</h1>
4878
<p>Quick filter dropdown with custom filter presets</p>
79+
80+
<div style={{ marginTop: "16px" }}>
81+
<QuickFilterDropdown
82+
api={gridRef.current?.api}
83+
filterPresets={filterPresets}
84+
/>
85+
</div>
4986
</div>
5087
<div
5188
className="ag-theme-quartz-dark"
5289
style={{ flex: 1, padding: "0 20px 20px" }}
5390
>
5491
<AgGridReact
92+
ref={gridRef}
5593
rowData={rowData}
5694
columnDefs={columnDefs}
5795
floatingFilter={true}
96+
onGridReady={(params) => {
97+
gridRef.current = params;
98+
}}
5899
/>
59100
</div>
60101
</div>

‎examples/quickfilterdropdown/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
{
22
"name": "quickfilterdropdown-example",
33
"version": "1.0.0",
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vite build",
7+
"preview": "vite preview"
8+
},
49
"dependencies": {
510
"react": "^18.2.0",
611
"react-dom": "^18.2.0",

0 commit comments

Comments
 (0)