Chakra Migration Guide - graceoncampus/goc-web-v3 GitHub Wiki

  1. Switch to migrate-to-chakra branch
  2. yarn to install Chakra
  3. If you refactor a file, don't delete the old Bootstrap file -- rename the old Bootstrap file to [filename]Old.tsx. For example, for Navbar rename it to NavbarOld.tsx and create a Chakra Navbar.tsx

Chakra specific guidelines

  1. Try not to use shortcut/abbreviated shortcut prop names (e.g. use margin instead of m and padding instead of p). We want to make things as easy as possible to read!
  2. Use the arrow functions instead of the function keyword for component definitions
  3. Whenever using a color or font size etc., please reference theme.ts instead of hardcoding. For example, instead of using #F6F6F6 for background color, use goc.gray.

Common errors

  1. Make sure to reference Chakra 3.0 documentation (https://www.chakra-ui.com) NOT 2.0 or 1.0
  2. If there are a ton of import errors, it could be because one of the folders is not lowercased properly (e.g. we renamed Component/ -> component/, and git doesn't pick that up. Contact Shawn to help you to fix that. Here's what the folder structure looks like on my end:

What to know about Chakra

  1. All global styles are in theme.ts. Reference that to used commonly used styles.

Changes

  1. Remove React Bootstrap and Sass, replacing it with Chakra.
  2. Divide up Components folder (and decapitalize folder names), turning it into: Move things out of the old folder structure as you implement each page
components/
	Button.tsx
	Accordion.tsx
	Container.tsx
	Footer.tsx
	Navbar.tsx
	...
layouts/
	SplitLayout.tsx
	...
pages/
	LandingPage.tsx
	MinistryTeamsPage.tsx
	...