Skip to content

Commit b9c98dc

Browse files
committed
docs(chakra-ui-v3): Add integration package for Chakra UI v3 [:sparkle:]
This commit adds the integration support package link for Chakra UI v3. This is to support the latest version of Chakra UI. Signed-off-by: Edward Fitz Abucay <[email protected]>
1 parent 00f6c5f commit b9c98dc

File tree

5 files changed

+69
-0
lines changed

5 files changed

+69
-0
lines changed

documentation/docs/packages/list-of-packages/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -79,3 +79,4 @@ To learn more about Live Providers, check out [Realtime](/docs/guides-concepts/r
7979
- [`@refine-auth/kinde-react`](https://github.com/hirenf14/refine-auth-kinde-react) - Support for [Kinde](https://kinde.com) authentication.
8080
- [`refine-pocketbase`](https://github.com/kruschid/refine-pocketbase) - Connector for backends created with [PocketBase](https://pocketbase.io/). Also has auth provider and live provider supports.
8181
- [`refine-postgrest-ts`](https://github.com/ffimnsr/refine-postgrest-ts) - Connector for [PostgREST](https://postgrest.org) backends.
82+
- [`refine-chakra-ui-v3-ts`](https://github.com/ffimnsr/refine-chakra-ui-v3-ts) - Integration for [Chakra UI v3](https://www.chakra-ui.com).
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import * as React from "react";
2+
import type { SVGProps } from "react";
3+
4+
const SvgChakrav3 = ({
5+
withBrandColor = true,
6+
...props
7+
}: SVGProps<SVGSVGElement> & { withBrandColor?: boolean }) => (
8+
<svg width="65" height="65" viewBox="0 0 36 36" {...props}>
9+
<path
10+
d="M34.5655 17.9244L28.0585 16.7206L27.3139 18.0099L25.4813 21.1828L20.7231 29.4212C20.5147 29.7819 19.9653 29.6335 19.9653 29.2166V22.2928V21.5412C19.9653 21.1509 19.6901 20.8153 19.3087 20.7404L11.8954 19.2841L5.25929 18.0708C5.26937 18.4155 5.35079 18.7586 5.50582 19.0761L10.9828 28.5803C11.7469 29.9063 13.1577 30.7221 14.6835 30.7201L25.1868 30.7061C26.7118 30.7041 28.1198 29.8854 28.8808 28.5585L34.2409 19.2113C34.4694 18.8138 34.5768 18.3679 34.5655 17.9244Z"
11+
fill="url(#paint0_linear_:Rcpjajsrkq:)"
12+
/>
13+
<path
14+
d="M12.642 17.9885L14.4774 14.8034L19.2073 6.59529C19.4154 6.2342 19.9653 6.38242 19.9653 6.79963V14.471C19.9653 14.8617 20.2411 15.1976 20.6231 15.272L28.0585 16.7207L34.5655 17.9245C34.5572 17.5987 34.4841 17.2747 34.3464 16.9717C34.314 16.9004 34.2792 16.8299 34.2397 16.7613L28.8728 7.42387C28.1102 6.09724 26.7007 5.27994 25.1753 5.27994H14.6361C13.1082 5.27994 11.6968 6.09981 10.9352 7.42979L5.58357 16.7749C5.57125 16.7963 5.56056 16.8184 5.54894 16.8401C5.34348 17.2237 5.24692 17.6483 5.25929 18.0708L11.8954 19.2841L12.642 17.9885Z"
15+
fill="url(#paint1_linear_:Rcpjajsrkq:)"
16+
/>
17+
<defs>
18+
<linearGradient
19+
id="paint0_linear_:Rcpjajsrkq:"
20+
x1="33.9534"
21+
y1="23.645"
22+
x2="5.78627"
23+
y2="23.9059"
24+
gradientUnits="userSpaceOnUse"
25+
>
26+
<stop stopColor="#3585A3"></stop>
27+
<stop offset="1" stopColor="#00DEAE"></stop>
28+
</linearGradient>
29+
<linearGradient
30+
id="paint1_linear_:Rcpjajsrkq:"
31+
x1="6.67767"
32+
y1="12.4545"
33+
x2="31.7007"
34+
y2="11.8021"
35+
gradientUnits="userSpaceOnUse"
36+
>
37+
<stop stopColor="#3585A3"></stop>
38+
<stop offset="1" stopColor="#00DEAE"></stop>
39+
</linearGradient>
40+
</defs>
41+
</svg>
42+
);
43+
44+
export default SvgChakrav3;

documentation/src/assets/integration-icons/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export { default as Airtable } from "./airtable";
33
export { default as Antd } from "./antd";
44
export { default as Appwrite } from "./appwrite";
55
export { default as Chakra } from "./chakra";
6+
export { default as Chakrav3 } from "./chakra-v3";
67
export { default as Directus } from "./directus";
78
export { default as Dp } from "./dp";
89
export { default as Elide } from "./elide";

documentation/src/assets/integrations.ts

+17
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import {
3535
PocketBase,
3636
ShadCnUI,
3737
PostgREST,
38+
Chakrav3,
3839
} from "./integration-icons";
3940

4041
export const integrations: IntegrationsType = {
@@ -151,6 +152,22 @@ export const integrations: IntegrationsType = {
151152
status: "stable",
152153
},
153154
],
155+
"community-ui-framework-packages": [
156+
{
157+
name: "Chakra UI v3",
158+
icon: Chakrav3,
159+
description:
160+
" <strong>Chakra UI v3</strong> Framework support. 20+ framework-specific components incl. Layout, Feedback, and CRUD components.",
161+
url: "https://www.npmjs.com/package/@ffimnsr/refine-chakra-ui-v3",
162+
status: "stable",
163+
contributors: [
164+
{
165+
name: "ffimnsr",
166+
url: "https://github.com/ffimnsr",
167+
},
168+
],
169+
},
170+
],
154171
"community-data-provider-packages": [
155172
{
156173
name: "Directus Data Provider",

documentation/src/pages/integrations/index.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ const Integrations: React.FC = () => {
4747
const {
4848
communityPackages,
4949
dataProviderPackages,
50+
communityUiFrameworkPackages,
5051
communityDataProviderPackages,
5152
frameworks,
5253
integrations,
@@ -56,6 +57,8 @@ const Integrations: React.FC = () => {
5657
return {
5758
uiPackages: integrationsData["ui-framework-packages"],
5859
dataProviderPackages: integrationsData["data-provider-packages"],
60+
communityUiFrameworkPackages:
61+
integrationsData["community-ui-framework-packages"],
5962
communityDataProviderPackages:
6063
integrationsData["community-data-provider-packages"],
6164
frameworks: integrationsData["frameworks"],
@@ -103,6 +106,9 @@ const Integrations: React.FC = () => {
103106
<Title className="mt-20">Data Provider Packages</Title>
104107
<List data={dataProviderPackages} />
105108

109+
<Title className="mt-20">UI Framework Packages by the Community ❤️</Title>
110+
<List data={communityUiFrameworkPackages} />
111+
106112
<Title className="mt-20">Data Provider Packages by the Community ❤️</Title>
107113
<List data={communityDataProviderPackages} />
108114

0 commit comments

Comments
 (0)