diff --git a/documentation/blog/2023-12-19-chakra-ui.md b/documentation/blog/2024-09-17-chakra-ui.md similarity index 83% rename from documentation/blog/2023-12-19-chakra-ui.md rename to documentation/blog/2024-09-17-chakra-ui.md index a6691612abed..edd3faad9a31 100644 --- a/documentation/blog/2023-12-19-chakra-ui.md +++ b/documentation/blog/2024-09-17-chakra-ui.md @@ -788,6 +788,141 @@ The `resource` argument in `useList` points to the name `"posts"`. This comes fr As you can see from the above output, using `Refine` components and hooks makes everything function exactly the same way. +Here is the humanized version of the "Chakra UI Ecosystem and Plugins" section: + +## Chakra UI Ecosystem and Plugins + +Chakra UI has a strong backbone, but it also integrates very well with several plugins and tools that can make development even faster and more powerful. Here are some key things worth knowing: + +### Chakra UI Icons + +Chakra includes, by default, an installed icon set, but we can extend it very easily by integrating it with **React Icons** or any other icon library. This will open up a lot of flexibility for using icons in our components. + +Example: + +```javascript +import { FaHome } from "react-icons/fa"; +import { Icon } from "@chakra-ui/react"; + +; +``` + +By doing this, we can easily use any popular icon set. + +### Chakra UI and Form Libraries + +Chakra UI works very well with form management libraries like **Formik** and **React Hook Form**. These libraries make it easier for us to handle things such as form validation, form submissions, and managing state, while their components fit well with Chakra's styling. + +Here is how you can use Chakra UI with Formik: + +```javascript +import { Formik, Form, Field } from "formik"; +import { Button, Input } from "@chakra-ui/react"; + + { + console.log(values); + }} +> +
+ + {({ field }) => } + + +
+; +``` + +Another good choice is **React Hook Form**, which also ties in nicely with Chakra's components. + +### Chakra UI with Framer Motion + +Chakra UI has built-in support for the powerful animation library **Framer Motion**, making it super easy to create smooth animations and transitions for any Chakra UI component. + +Example: + +```javascript +import { motion } from "framer-motion"; +import { Box } from "@chakra-ui/react"; + +const MotionBox = motion(Box); + + + Animated Box +; +``` + +This integration enables us to add animations without much extra code or setup. + +### Chakra UI and Storybook + +Storybook works especially well to construct UI components in isolation, and Chakra UI plays along perfectly. We can document and test each Chakra component within Storybook, making it easier to build and showcase reusable components. + +By installing **@chakra-ui/storybook-addon**, we get Chakra's theme and components set directly in Storybook: + +```bash +npm install @chakra-ui/storybook-addon +``` + +Once installed, we can start creating or developing components through Storybook while maintaining Chakra UI's styling system. + +### Chakra UI with Tailwind CSS + +While Chakra UI has its own design system, it can also be combined with **Tailwind CSS** if we need utility-based styles. Using both approaches together is not very common, but some developers do like combining Chakra components with Tailwind utility classes for added flexibility. + +### Chakra UI Pro + +Chakra UI has a paid version called **Chakra UI Pro**, which contains pre-built, ready-to-use templates for things like dashboards and e-commerce sites. This saves a lot of development time if you need high-quality, ready-made components and layouts. + +## Bonus: Testing Chakra Components + +Well, what I have been looking into is the testing of Chakra UI components. In fact, it is quite easy. We can test his components like regular React components using **React Testing Library** and **Jest**. It is cool to know that Chakra will handle lots of styling and accessibility out of the box, and we just have to check how the components behave. + +Here is a simple example of how one might test a Chakra UI button: + +```javascript +import { render, screen } from "@testing-library/react"; +import { Button } from "@chakra-ui/react"; + +test("renders Chakra UI button", () => { + render(); + // check if the button is in document + const buttonElement = screen.getByText(/click me/i); + expect(buttonElement).toBeInTheDocument(); +}); +``` + +For this example, we are rendering, using **React Testing Library**, a button and checking if it's on the page with the text "Click me." Chakra's styling does not impact how we test it, working just like testing any React component. + +We can also test interactions. For example, let's say we want to test that a button calls a function when clicked: + +```javascript +import { render, screen, fireEvent } from "@testing-library/react"; +import { Button } from "@chakra-ui/react"; + +test("calls onClick when button is clicked", () => { + let handleClick = jest.fn(); + render(); + + const buttonElement = screen.getByText(/click me/i); + // Simulate click + fireEvent.click(buttonElement); + + // Check if handleClick was called + expect(handleClick).toHaveBeenCalledTimes(1); +}); +``` + +Here we make use of **fireEvent** to simulate a button click and ensure it calls the `onClick` function. + +For more involved components—like modals or forms—we do the exact same thing: render the component, perform whatever interaction with that component (actually opening the modal in this case), and assert whatever we expect to happen ends up happening. + ## Conclusion By the end of this article, you should have a good understanding of how Chakra UI works, why it’s significant in web applications, and how to integrate it with a React-based framework such as Refine.