Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Mantine): support mantine 7 #6345

Open
wants to merge 60 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 50 commits
Commits
Show all changes
60 commits
Select commit Hold shift + click to select a range
13cbd1f
feat(mantine): mantine 7
glebtv Feb 21, 2024
51f4503
feat(inferencer): mantine 7
glebtv Feb 21, 2024
8cdbcb8
feat(ui-tests): mantine 7
glebtv Feb 21, 2024
41febc0
feat(live-previews): mantine 7
glebtv Feb 21, 2024
e06b1dd
feat(examples): mantine 7
glebtv Feb 21, 2024
f7b8900
fix(mantine): mantine select crashes when label is undefined
glebtv Feb 21, 2024
9aaa2d9
Merge branch 'master' into mantine7.v4
BatuhanW Feb 21, 2024
29349da
fix(mantine): fix e2e tests
glebtv Feb 22, 2024
fcee89d
chore: format files
BatuhanW Feb 26, 2024
c85e590
Merge branch 'master' into mantine7.v4
BatuhanW Feb 26, 2024
c67ad52
fix(mantine): restore accidentally removed class
glebtv Feb 26, 2024
9aba874
fix(inferencer): update test snapshots
glebtv Feb 26, 2024
7f16ddb
chore(mantine): remove unused types, remove ThemedLayout v1, remove c…
glebtv Feb 27, 2024
e152887
chore(mantine): add changeset, undo changes to package versions
glebtv Feb 27, 2024
e5e65a5
fix(mantine): better action button variant handling
glebtv Feb 27, 2024
00b4538
fix(mantine): move github banner to appshell footer
glebtv Feb 27, 2024
082517b
fix: restore refinedev/mantine version
glebtv Feb 27, 2024
cde6385
fix: examples/base-mantine remove unused filter
glebtv Feb 27, 2024
d2c8563
fix: remove commented code, better mantine test wrapper
glebtv Feb 27, 2024
451ad37
Merge branch 'master' into mantine7.v4
glebtv Feb 29, 2024
230c0a6
Merge branch 'master' into mantine7.v4
BatuhanW Feb 29, 2024
2a05017
fix(inferencer): add React import to mantine inferencer generated code
glebtv Feb 29, 2024
3221708
Merge branch 'master' into mantine7.v4
BatuhanW Feb 29, 2024
6afde2f
Merge branch 'master' into mantine7.v4
BatuhanW Mar 4, 2024
04e0f4b
chore(mantine): split changesets as per review
glebtv Mar 4, 2024
2d89b2f
chore(mantine): remove commented code
glebtv Mar 4, 2024
f7d75f7
chore(mantine): icon color should be primary
glebtv Mar 4, 2024
34480b7
fix(inferencer): filterDataOnExactSearchMatch is no longer available …
glebtv Mar 4, 2024
9260b67
Merge branch 'master' into mantine7.v4
BatuhanW Mar 7, 2024
1817134
Merge remote-tracking branch 'upstream/master' into mantine7-v2-1
glebtv Mar 28, 2024
f20d327
fix(mantine): try fix biome lint error
glebtv Mar 28, 2024
e0e99af
chore(mantine): update mantine version in docs
glebtv Mar 28, 2024
bacc65a
Merge remote-tracking branch 'upstream/releases/april' into mantine7.v4
glebtv Mar 29, 2024
77f7e9c
chore: try fix biome errors
glebtv Mar 29, 2024
515dc57
chore: fix versions after merge, fix mantine delete button tests
glebtv Mar 29, 2024
494fb07
Merge branch 'master' into mantine7.v4
alodela Sep 9, 2024
7fc8ffe
feat(mantine): mantine 7
alodela Sep 17, 2024
cdebb7e
chore(mantine): update packages version
alodela Sep 17, 2024
04b6720
Merge branch 'refinedev:master' into mantine7.v4
alodela Sep 17, 2024
ced22ca
Merge branch 'master' into mantine7.v4
alodela Sep 18, 2024
e460d33
fix(mantine): lint & build errors
alodela Sep 18, 2024
01c08f1
fix(mantine): update form types in examples
alodela Sep 18, 2024
6518830
Merge branch 'master' into mantine7.v4
alodela Sep 20, 2024
e8b46f4
Merge branch 'master' into mantine7.v4
BatuhanW Sep 24, 2024
3bd2870
Merge branch 'master' into mantine7.v4
alodela Oct 14, 2024
60e515a
Merge branch 'master' into mantine7.v4
alodela Oct 16, 2024
c2972c6
Merge branch 'master' into mantine7.v4
BatuhanW Oct 28, 2024
00be382
Merge branch 'master' into mantine7.v4
alodela Oct 31, 2024
0104168
Merge branch 'master' into mantine7.v4
alodela Oct 31, 2024
ba364b7
Merge branch 'master' into mantine7.v4
alodela Nov 2, 2024
65c68d4
Merge branch 'master' into mantine7.v4
alodela Nov 8, 2024
a688bd3
fix(mantine): fix action icon style
alodela Nov 9, 2024
10b36cf
Merge branch 'master' into mantine7.v4
alodela Nov 9, 2024
6e9c66a
Merge branch 'master' into mantine7.v4
alodela Nov 12, 2024
faf028d
Merge branch 'master' into mantine7.v4
alodela Nov 16, 2024
ceaf214
Merge branch 'master' into mantine7.v4
alodela Nov 24, 2024
a5365d2
fix(mantine): update snapshots
alodela Nov 24, 2024
a6eccbb
Merge branch 'master' into mantine7.v4
alodela Nov 28, 2024
935ce43
Merge branch 'main' into mantine7.v4
alodela Dec 4, 2024
58cf201
Merge branch 'main' into mantine7.v4
alodela Dec 12, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
5 changes: 5 additions & 0 deletions .changeset/mantine-7-inferencer.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@refinedev/inferencer": minor
---

feat: Update to mantine 7
5 changes: 5 additions & 0 deletions .changeset/mantine-7-live-previews.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@refinedev/live-previews": minor
---

feat: Update to mantine 7
7 changes: 7 additions & 0 deletions .changeset/mantine-7-mantine.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@refinedev/mantine": major
---

feat: Update to mantine 7

Resolves #5178
5 changes: 5 additions & 0 deletions .changeset/mantine-7-ui-tests.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@refinedev/ui-tests": minor
---

feat: Update to mantine 7
7 changes: 4 additions & 3 deletions cypress/e2e/auth-mantine/all.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ describe("auth-mantine", () => {
describe("logout", () => {
it("should logout", () => {
login();
cy.get("button")
cy.get("a")
.contains(/logout/i)
.click();
cy.location("pathname").should("eq", "/login");
Expand All @@ -134,8 +134,9 @@ describe("auth-mantine", () => {
describe("get identity", () => {
it("should render getIdentity response on header", () => {
login();
cy.get(".mantine-Text-root").contains(/jane doe/i);
cy.get(".mantine-Avatar-image").should("have.attr", "src");

cy.get("header .mantine-Title-root").contains(/jane doe/i);
cy.get("header .mantine-Avatar-image").should("have.attr", "src");
});
});
});
4 changes: 2 additions & 2 deletions cypress/e2e/form-mantine-mutation-mode/all.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ describe("form-mantine-mutation-mode", () => {
const fillForm = () => {
cy.get("#title").clear().type(mockPost.title);
cy.get("#content textarea").clear({ force: true }).type(mockPost.content);
cy.get("#status").click().get("#status-1").click();
cy.get("#categoryId").clear().get("#categoryId-1").click();
cy.fillMantineStatus("Draft");
cy.get("#categoryId").click().type("{downArrow}{enter}", { force: true });
};

const assertSuccessResponse = (response: any) => {
Expand Down
6 changes: 3 additions & 3 deletions cypress/e2e/form-mantine-use-drawer-form/all.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ describe("form-mantine-use-drawer-form", () => {
};

const isDrawerVisible = () => {
return cy.get(".mantine-Drawer-drawer").should("be.visible");
return cy.get(".mantine-Drawer-overlay").should("be.visible");
};

const fillForm = () => {
cy.get("#title").clear().type(mockPost.title);
cy.get("#content textarea").clear({ force: true }).type(mockPost.content);
cy.get("#status").click().get("#status-1").click();
cy.get("#categoryId").clear().get("#categoryId-1").click();
cy.fillMantineStatus("Draft");
cy.get("#categoryId").click().type("{downArrow}{enter}", { force: true });
};

const assertSuccessResponse = (response: any) => {
Expand Down
4 changes: 3 additions & 1 deletion cypress/e2e/form-mantine-use-form/all.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,9 @@ describe("form-mantine-use-form", () => {

cy.get("#content textarea").clear();
cy.get("#title").clear();
cy.get("#categoryId").clear();

//cy.get("#categoryId").clear();
cy.clearMantineSelect("#categoryId");

submitForm();

Expand Down
6 changes: 3 additions & 3 deletions cypress/e2e/form-mantine-use-modal-form/all.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ describe("form-mantine-use-modal-form", () => {
};

const isModalVisible = () => {
return cy.get(".mantine-Modal-modal").should("be.visible");
return cy.get(".mantine-Modal-inner").should("be.visible");
};

const fillForm = () => {
cy.get("#title").clear().type(mockPost.title);
cy.get("#content textarea").clear({ force: true }).type(mockPost.content);
cy.get("#status").click().get("#status-1").click();
cy.get("#categoryId").clear().get("#categoryId-1").click();
cy.fillMantineStatus("Draft");
cy.get("#categoryId").click().type("{downArrow}{enter}", { force: true });
};

const assertSuccessResponse = (response: any) => {
Expand Down
4 changes: 2 additions & 2 deletions cypress/e2e/form-mantine-use-steps-form/all.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ describe("form-mantine-use-steps-form", () => {
cy.get("#title").clear().type(mockPost.title);
cy.get("#slug").clear().type(mockPost.slug);
getNextStepButton().click();
cy.get("#status").click().get("#status-1").click();
cy.fillMantineStatus(mockPost.status);
getNextStepButton().click();
cy.get("#content textarea").clear().type(mockPost.content, { delay: 0 });
};
Expand Down Expand Up @@ -116,7 +116,7 @@ describe("form-mantine-use-steps-form", () => {
// go to second step
getNextStepButton().click();
// fill second step
cy.get("#status").click().get("#status-1").click();
cy.fillMantineStatus(mockPost.status);

// go to third step
getNextStepButton().click();
Expand Down
24 changes: 15 additions & 9 deletions cypress/e2e/inferencer-mantine/all.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,9 @@ describe("inferencer-mantine", () => {
cy.get("input").eq(3).type("status");
cy.get("input").eq(4).type(todayString);
cy.get(".mantine-Select-input").click();
cy.get(".mantine-Select-item").eq(0).click();
cy.get(".mantine-Popover-dropdown:visible .mantine-Select-option")
.eq(0)
.click();

cy.getSaveButton().click();

Expand All @@ -138,7 +140,7 @@ describe("inferencer-mantine", () => {
expect(body.content).to.equal(mockPost.content);
expect(body.status).to.equal("status");
expect(body.createdAt).to.equal(todayString);
expect(body.category.id).to.equal(1);
expect(body.category.id).to.equal("1");

cy.getMantineNotification().should("contain", "Success");
cy.location("pathname").should("eq", "/blog-posts");
Expand Down Expand Up @@ -183,7 +185,9 @@ describe("inferencer-mantine", () => {
cy.get("input").eq(4).clear().type("status");
cy.get("input").eq(5).clear().type(todayString);
cy.get(".mantine-Select-input").clear();
cy.get(".mantine-Select-item").eq(1).click();
cy.get(".mantine-Popover-dropdown:visible .mantine-Select-option")
.eq(1)
.click();

cy.getSaveButton().click();

Expand All @@ -195,7 +199,7 @@ describe("inferencer-mantine", () => {
expect(body.content).to.equal(mockPost.content);
expect(body.status).to.equal("status");
expect(body.createdAt).to.equal(todayString);
expect(body.category.id).to.equal(2);
expect(body.category.id).to.equal("2");

cy.getMantineNotification().should("contain", "Success");
cy.location("pathname").should("eq", "/blog-posts");
Expand Down Expand Up @@ -237,7 +241,9 @@ describe("inferencer-mantine", () => {
// find initial theme from localStorage
cy.getAllLocalStorage().then((ls) => {
const initialTheme =
ls[Cypress.config("baseUrl")!]["mantine-color-scheme"]?.toString();
ls[Cypress.config("baseUrl")!][
"mantine-color-scheme-value"
]?.toString();

console.log(initialTheme);

Expand All @@ -255,12 +261,12 @@ describe("inferencer-mantine", () => {
if (initialTheme === "dark") {
expect(cy.get(".tabler-icon-moon-stars").should("exist"));
expect(
ls[Cypress.config("baseUrl")!]["mantine-color-scheme"],
ls[Cypress.config("baseUrl")!]["mantine-color-scheme-value"],
).to.contains("light");
} else {
expect(cy.get(".tabler-icon-sun").should("exist"));
expect(
ls[Cypress.config("baseUrl")!]["mantine-color-scheme"],
ls[Cypress.config("baseUrl")!]["mantine-color-scheme-value"],
).to.contains("dark");
}
});
Expand All @@ -285,7 +291,7 @@ describe("inferencer-mantine", () => {
cy.wait("@getCategories");
cy.getMantineLoadingOverlay().should("not.exist");

cy.get(".mantine-Pagination-item").contains("2").click();
cy.get(".mantine-Pagination-control").contains("2").click();
cy.url().should("include", "current=2");
cy.getMantineLoadingOverlay().should("not.exist");
cy.wait("@getBlogPosts").then((interception) => {
Expand All @@ -296,7 +302,7 @@ describe("inferencer-mantine", () => {
expect(_end).to.equal("20");
});

cy.get(".mantine-Pagination-item").contains("1").click();
cy.get(".mantine-Pagination-control").contains("1").click();

cy.url().should("include", "current=1");

Expand Down
6 changes: 3 additions & 3 deletions cypress/e2e/table-mantine-basic/all.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ describe("table-mantine-basic", () => {
});

it("should work with pagination", () => {
cy.get(".mantine-Pagination-item").contains("2").click();
cy.get(".mantine-Pagination-control").contains("2").click();

cy.url().should("include", "current=2");

Expand All @@ -105,7 +105,7 @@ describe("table-mantine-basic", () => {
expect(_end).to.equal("20");
});

cy.get(".mantine-Pagination-item").contains("1").click();
cy.get(".mantine-Pagination-control").contains("1").click();

cy.url().should("include", "current=1");

Expand All @@ -121,7 +121,7 @@ describe("table-mantine-basic", () => {
it("should set current `1` when filter changed", () => {
cy.wait("@getPosts");

cy.get(".mantine-Pagination-item").contains("2").click();
cy.get(".mantine-Pagination-control").contains("2").click();

cy.get(".tabler-icon-filter").eq(1).click();
cy.get("#title").type("lorem");
Expand Down
43 changes: 41 additions & 2 deletions cypress/support/commands/mantine/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,52 @@ export const getMantineLoadingOverlay = () => {
return cy.get(".mantine-LoadingOverlay-root");
};

export const clearMantineSelect = (field: string) => {
cy.get(field).each(($elm) => {
cy.wrap($elm)
.invoke("val")
.then((text) => {
if (text) {
cy.get(field).click();
cy.get(".mantine-Popover-dropdown:visible .mantine-Select-option")
.contains(text as string)
.click();
}
});
});
};

export const fillMantineStatus = (status = "Published") => {
// Select option if it's not selected
cy.get("#status").each(($elm) => {
cy.wrap($elm)
.invoke("val")
.then((text) => {
if (status) {
if (text === status) {
} else {
cy.get("#status").click();
cy.get(".mantine-Popover-dropdown:visible .mantine-Select-option")
.contains(status)
.click();
}
} else {
cy.get("#status").click();
cy.get(".mantine-Popover-dropdown:visible .mantine-Select-option")
.first()
.click();
}
});
});
};

export const fillMantineForm = () => {
cy.fixture("mock-post").then((mockPost) => {
cy.get("#title").clear().type(mockPost.title);
cy.get("#content textarea").clear({ force: true }).type(mockPost.content, {
delay: 32,
});
cy.get("#status").click().get("#status-0").click();
cy.get("#categoryId").clear().get("#categoryId-1").click();
cy.fillMantineStatus();
cy.get("#categoryId").click().type("{downArrow}{enter}", { force: true });
});
};
4 changes: 4 additions & 0 deletions cypress/support/e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ import {
getMantineLoadingOverlay,
getMantineNotification,
getMantinePopoverDeleteButton,
fillMantineStatus,
clearMantineSelect,
} from "./commands/mantine";
import {
getCreateButton,
Expand Down Expand Up @@ -112,6 +114,8 @@ Cypress.Commands.add(
);
Cypress.Commands.add("getMaterialUIColumnHeader", getMaterialUIColumnHeader);

Cypress.Commands.add("clearMantineSelect", clearMantineSelect);
Cypress.Commands.add("fillMantineStatus", fillMantineStatus);
Cypress.Commands.add("fillMantineForm", fillMantineForm);
Cypress.Commands.add("getMantineNotification", getMantineNotification);
Cypress.Commands.add(
Expand Down
2 changes: 2 additions & 0 deletions cypress/support/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,8 @@ declare namespace Cypress {
params: IGetMantineFormItemErrorParams,
): Chainable<JQuery<HTMLElement>>;
getMantineLoadingOverlay(): Chainable<JQuery<HTMLElement>>;
fillMantineStatus: (status?: string) => void;
clearMantineSelect: (field: string) => void;
fillMantineForm: () => void;

getMaterialUINotification(): Chainable<JQuery<HTMLElement>>;
Expand Down
1 change: 1 addition & 0 deletions documentation/docs/data/hooks/use-infinite-list/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ Dynamically changing the `pagination` properties will trigger a new request. The
### Retrieving the Total Row Count

When the `getList` method is called via `useInfiniteList`, it should ideally return the total count of rows (`rowCount`). The way this count is obtained depends on the data provider in use:

- **REST Providers:** Commonly obtain the total count from the `x-total-count` header.
- **GraphQL Providers:** Often source the count from specific data fields like `pageInfo.total`.
- **Other Providers:** Follow their own practices for obtaining the total count.
Expand Down
1 change: 1 addition & 0 deletions documentation/docs/data/hooks/use-list/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ Dynamically changing the `pagination` properties will trigger a new request.
### Retrieving the Total Row Count

When the `useList` hook calls the `getList` method, it expects the response to include the total number of rows (`rowCount`). The way this count is retrieved can vary based on the data provider:

- **REST Providers:** Frequently use the `x-total-count` header to determine the total count.
- **GraphQL Providers:** Typically return the count in specific data fields, such as `pageInfo.total`.
- **Other Providers:** Follow their own conventions for obtaining the total count.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ export function MantineAuth() {
"react-router": "latest",
"@tabler/icons-react": "^3.1.0",
"@emotion/react": "^11.8.2",
"@mantine/core": "^5.10.4",
"@mantine/hooks": "^5.10.4",
"@mantine/notifications": "^5.10.4",
"@mantine/core": "^7.12.2",
"@mantine/hooks": "^7.12.2",
"@mantine/notifications": "^7.12.2",
}}
startRoute="/login"
files={{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@ export default function ServerSideValidationMantine() {
"@tanstack/react-table": "^8.2.6",
"@tabler/icons-react": "^3.1.0",
"@emotion/react": "^11.8.2",
"@mantine/core": "^5.10.4",
"@mantine/hooks": "^5.10.4",
"@mantine/form": "^5.10.4",
"@mantine/notifications": "^5.10.4",
"@mantine/core": "^7.12.2",
"@mantine/hooks": "^7.12.2",
"@mantine/form": "^7.12.2",
"@mantine/notifications": "^7.12.2",
"react-router": "latest",
"react-router-dom": "^6.8.1",
}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ export default function UseSelectMantine() {
"@refinedev/simple-rest": "latest",
"@refinedev/react-hook-form": "latest",
"@refinedev/mantine": "^2.28.21",
"@mantine/core": "^5.10.4",
"@mantine/notifications": "^5.10.4",
"@mantine/core": "^7.12.2",
"@mantine/notifications": "^7.12.2",
"@emotion/react": "^11.8.2",
"@mantine/form": "^5.10.4",
"@mantine/form": "^7.12.2",
}}
startRoute="/"
files={{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export function MantineAuth() {
"@refinedev/react-table": "latest",
"react-router-dom": "latest",
"react-router": "latest",
"@mantine/core": "^5.10.4",
"@mantine/core": "^7.12.2",
}}
startRoute="/login"
files={{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ export function MantineLayout() {
"react-router": "latest",
"@tabler/icons-react": "^3.1.0",
"@emotion/react": "^11.8.2",
"@mantine/core": "^5.10.4",
"@mantine/hooks": "^5.10.4",
"@mantine/notifications": "^5.10.4",
"@mantine/core": "^7.12.2",
"@mantine/hooks": "^7.12.2",
"@mantine/notifications": "^7.12.2",
}}
startRoute="/my-products"
files={{
Expand Down
Loading
Loading