Skip to content

Commit 5e38804

Browse files
daniellerouxdanielleroux
authored
feat: deploy react starter app with latest v4 (#158)
1 parent f036029 commit 5e38804

File tree

20 files changed

+496
-201
lines changed

20 files changed

+496
-201
lines changed

‎.env.production‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
BRAND_VERSION=1.0.0

‎.github/workflows/deploy-pages.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ jobs:
2121
- uses: ./.github/workflows/actions/install
2222

2323
- name: Install optional theme
24-
run: pnpm exec ix-theme-downloader
24+
run: pnpm --filter ix-theme-downloader download
2525
env:
2626
CSC_TOKEN: ${{ secrets.CSC_TOKEN }}
2727
BRAND_URL: ${{ vars.BRAND_URL }}

‎.vscode/settings.json‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,22 @@
11
{
2-
"eslint.workingDirectories": [
3-
{
4-
"mode": "auto"
5-
}
6-
]
2+
"editor.formatOnSave": true,
3+
"editor.defaultFormatter": "esbenp.prettier-vscode",
4+
"[typescript]": {
5+
"editor.defaultFormatter": "esbenp.prettier-vscode"
6+
},
7+
"[typescriptreact]": {
8+
"editor.defaultFormatter": "esbenp.prettier-vscode"
9+
},
10+
"[javascript]": {
11+
"editor.defaultFormatter": "esbenp.prettier-vscode"
12+
},
13+
"[javascriptreact]": {
14+
"editor.defaultFormatter": "esbenp.prettier-vscode"
15+
},
16+
"[json]": {
17+
"editor.defaultFormatter": "esbenp.prettier-vscode"
18+
},
19+
"[css]": {
20+
"editor.defaultFormatter": "esbenp.prettier-vscode"
21+
}
722
}

‎apps/react-starter/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="en">
2+
<html lang="en" data-ix-theme="classic" data-ix-color-schema="dark">
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />

‎apps/react-starter/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,18 @@
1212
"e2e": "playwright test"
1313
},
1414
"dependencies": {
15-
"@siemens/ix": "3.2.0",
16-
"@siemens/ix-aggrid": "3.0.2",
15+
"@siemens/ix": "^4.0.0",
16+
"@siemens/ix-aggrid": "^4.0.0",
1717
"@siemens/ix-echarts": "3.0.0",
18-
"@siemens/ix-icons": "3.1.1",
19-
"@siemens/ix-react": "3.2.0",
20-
"ag-grid-community": "32.2.1",
21-
"ag-grid-react": "32.2.1",
18+
"@siemens/ix-icons": "3.2.0",
19+
"@siemens/ix-react": "^4.0.0",
20+
"ag-grid-community": "33.3.2",
21+
"ag-grid-react": "33.3.2",
2222
"clsx": "^2.1.1",
2323
"echarts": "^5.5.1",
2424
"echarts-for-react": "^3.0.2",
2525
"element-internals-polyfill": "^3.0.1",
26-
"i18next": "^23.15.1",
26+
"i18next": "^25.6.0",
2727
"react": "^18.3.1",
2828
"react-dom": "^18.3.1",
2929
"react-hook-form": "^7.53.0",

‎apps/react-starter/src/index.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
@import "ag-grid-community/styles/ag-grid.css";
2-
@import "ag-grid-community/styles/ag-theme-alpine.css";
3-
@import "@siemens/ix-aggrid/dist/ix-aggrid/ix-aggrid.css";
4-
51
html,
62
body {
73
width: 100vw;

‎apps/react-starter/src/main.tsx‎

Lines changed: 44 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1+
import { themeSwitcher } from "@siemens/ix";
2+
import { getIxTheme } from "@siemens/ix-aggrid";
13
import { IxApplicationContext } from "@siemens/ix-react";
2-
import "@siemens/ix/dist/siemens-ix/siemens-ix.css";
4+
import "@siemens/ix/dist/siemens-ix/siemens-ix-core.css";
5+
import "@siemens/ix/dist/siemens-ix/theme/classic-dark.css";
6+
import "@siemens/ix/dist/siemens-ix/theme/classic-light.css";
7+
import { AllCommunityModule, ModuleRegistry, provideGlobalGridOptions } from "ag-grid-community";
38
import { StrictMode } from "react";
49
import { createRoot } from "react-dom/client";
510
import { createHashRouter, RouterProvider } from "react-router-dom";
@@ -8,6 +13,9 @@ import "./i18n";
813
import "./index.css";
914
import DevicesPage from "./pages/devices/index.tsx";
1015
import OverviewPage from "./pages/overview/index.tsx";
16+
import * as agGrid from "ag-grid-community";
17+
18+
ModuleRegistry.registerModules([AllCommunityModule]);
1119

1220
function optionalTheme() {
1321
if (import.meta.env.VITE_THEME) {
@@ -23,33 +31,43 @@ function optionalTheme() {
2331
script.type = "module";
2432
document.head.appendChild(script);
2533

26-
document.body.classList.add("theme-brand-dark");
34+
themeSwitcher.setTheme("brand");
2735
}
2836
}
2937

3038
optionalTheme();
3139

32-
const router = createHashRouter([
33-
{
34-
path: "/",
35-
element: <App />,
36-
children: [
37-
{
38-
path: "/",
39-
element: <OverviewPage />,
40-
},
41-
{
42-
path: "/devices",
43-
element: <DevicesPage />,
44-
},
45-
],
46-
},
47-
]);
48-
49-
createRoot(document.getElementById("root")!).render(
50-
<StrictMode>
51-
<IxApplicationContext>
52-
<RouterProvider router={router}></RouterProvider>
53-
</IxApplicationContext>
54-
</StrictMode>,
55-
);
40+
async function configureAgGridTheme() {
41+
const ixTheme = getIxTheme(agGrid);
42+
provideGlobalGridOptions({
43+
theme: ixTheme,
44+
});
45+
}
46+
47+
// Initialize AG Grid theme and then render the app
48+
configureAgGridTheme().then(() => {
49+
const router = createHashRouter([
50+
{
51+
path: "/",
52+
element: <App />,
53+
children: [
54+
{
55+
path: "/",
56+
element: <OverviewPage />,
57+
},
58+
{
59+
path: "/devices",
60+
element: <DevicesPage />,
61+
},
62+
],
63+
},
64+
]);
65+
66+
createRoot(document.getElementById("root")!).render(
67+
<StrictMode>
68+
<IxApplicationContext>
69+
<RouterProvider router={router}></RouterProvider>
70+
</IxApplicationContext>
71+
</StrictMode>,
72+
);
73+
});

‎apps/react-starter/src/pages/devices/components/ag-grid-table/ag-grid-table.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
import { useDataStore, useFilterStore, useOverviewPaneStore } from "@/store/device-store.ts";
1111
import { Device } from "@/types";
1212
import { LogicalFilterOperator } from "@siemens/ix";
13+
import { iconProject } from "@siemens/ix-icons/icons";
1314
import { IxEmptyState } from "@siemens/ix-react";
1415
import { ColDef, ColGroupDef, GridApi, IRowNode, RowSelectedEvent } from "ag-grid-community";
1516
import { AgGridReact } from "ag-grid-react";
@@ -18,7 +19,6 @@ import { useTranslation } from "react-i18next";
1819
import CustomDeviceCellRenderer from "./device-cell-renderer.tsx";
1920
import QuickActionsCellRenderer from "./quick-actions-cell-renderer.tsx";
2021
import styles from "./styles.module.css";
21-
import { iconProject } from "@siemens/ix-icons/icons";
2222

2323
function AgGridTable() {
2424
const { t } = useTranslation();
@@ -118,9 +118,9 @@ function AgGridTable() {
118118

119119
const onRowSelected = useCallback(
120120
(rowSelection: RowSelectedEvent) => {
121-
const { event } = rowSelection;
122-
if (event) {
123-
setSelectedDeviceId(rowSelection.data.id);
121+
const { event, data } = rowSelection;
122+
if (event && data) {
123+
setSelectedDeviceId(data.id);
124124
setExpanded(true);
125125
}
126126
},
@@ -149,9 +149,8 @@ function AgGridTable() {
149149
columnDefs={getColumnDefs() as ColDef[] | ColGroupDef[]}
150150
suppressRowTransform={true}
151151
suppressCellFocus={true}
152-
rowSelection={"single"}
152+
rowSelection="single"
153153
rowData={devices}
154-
className="ag-theme-alpine-dark ag-theme-ix"
155154
onRowSelected={onRowSelected}
156155
onCellValueChanged={(e) => editDevice(e.data)}
157156
isExternalFilterPresent={isExternalFilterPresent}

‎apps/react-starter/src/pages/devices/components/ag-grid-table/delete-modal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,10 @@ export default function DeleteModal() {
3737
</IxModalHeader>
3838
<IxModalContent> {t("device-delete-modal.content")}</IxModalContent>
3939
<IxModalFooter>
40-
<IxButton variant="secondary" outline onClick={() => dismiss()}>
40+
<IxButton variant="subtle-secondary" onClick={() => dismiss()}>
4141
{t("device-delete-modal.dismiss")}
4242
</IxButton>
43-
<IxButton variant="danger" onClick={() => close()}>
43+
<IxButton variant="danger-primary" onClick={() => close()}>
4444
{t("device-delete-modal.close")}
4545
</IxButton>
4646
</IxModalFooter>

‎apps/react-starter/src/pages/devices/components/ag-grid-table/quick-actions-cell-renderer.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -109,8 +109,7 @@ const QuickActionsCellRenderer = (props: QuickActionsCellRendererProps) => {
109109
className={`edit-tooltip-${props.data.id}`}
110110
aria-describedby={`tooltip-${props.data.id}`}
111111
icon={iconPen}
112-
variant="secondary"
113-
ghost
112+
variant="subtle-tertiary"
114113
onClick={startEditingFirstCell}
115114
/>
116115
<IxTooltip id={`tooltip-${props.data.id}`} for={`.edit-tooltip-${props.data.id}`}>
@@ -120,25 +119,23 @@ const QuickActionsCellRenderer = (props: QuickActionsCellRendererProps) => {
120119
className={`delete-tooltip-${props.data.id}`}
121120
aria-describedby="delete-tooltip"
122121
icon={iconTrashcan}
123-
variant="secondary"
124-
ghost
122+
variant="subtle-tertiary"
125123
onClick={handleDelete}
126124
/>
127125
<IxTooltip id={props.data.id} for={`.delete-tooltip-${props.data.id}`}>
128126
{t("dropdown-quick-actions.delete")}
129127
</IxTooltip>
130128
<IxIconButton
131129
icon={iconContextMenu}
132-
variant="secondary"
133-
ghost
130+
variant="subtle-tertiary"
134131
id={`device_${props.node.rowIndex}`}
135132
></IxIconButton>
136133
<IxDropdown trigger={`device_${props.node.rowIndex}`}>
137134
<IxDropdownQuickActions>
138-
<IxIconButton icon={iconDuplicate} ghost onClick={handleDuplicate}></IxIconButton>
139-
<IxIconButton icon={iconCut} ghost onClick={handleCut}></IxIconButton>
140-
<IxIconButton icon={iconCopy} ghost onClick={handleCopy}></IxIconButton>
141-
<IxIconButton icon={iconPaste} ghost onClick={handlePaste}></IxIconButton>
135+
<IxIconButton icon={iconDuplicate} variant="subtle-tertiary" onClick={handleDuplicate}></IxIconButton>
136+
<IxIconButton icon={iconCut} variant="subtle-tertiary" onClick={handleCut}></IxIconButton>
137+
<IxIconButton icon={iconCopy} variant="subtle-tertiary" onClick={handleCopy}></IxIconButton>
138+
<IxIconButton icon={iconPaste} variant="subtle-tertiary" onClick={handlePaste}></IxIconButton>
142139
</IxDropdownQuickActions>
143140
<IxDivider></IxDivider>
144141
<IxDropdownItem

0 commit comments

Comments
 (0)