README.md

ts-cra-rtk-chakraui-example

Features

Main	Sub	Version
Visual Studio Code		latest
Node.js with npm		v14 (LTS)
Create React App		latest
Typescript		4.3.5 or later
React		17
Chakra-UI		latest
Redux		latest
Redux Toolkit	createAction	latest
	createSlice
	createAsyncThunk
	createReducer
	createEntityAdapter
	createSelector
REACT FINAL FORM		latest
React Helmet Async		latest
react-intl		latest
Storybook		latest

• Support dark mode.
• Support i18n (english and japanese).

Screen Image

sc1x800.mp4

sc2x800.mp4

Usage

git clone git@github.com:treetips/ts-cra-rtk-chakraui-example.git
cd ts-cra-redux-toolkit-chakra-ui-example
npm i

# Start json-server
npm run json-server

# Start react
npm run start

# Start Storybook
npm run storybook

URL

Name	url
React	http://localhost:3000/
API	http://localhost:3001/api/tasks
	http://localhost:3001/api/tasks/1
Storybook	http://localhost:6006/

Directory Structures

Dir 1	Dir 2	Description
components	entrypoints	Entry point component referenced by Router.
	pages	A component used only on a specific page.
	projects	Components used throughout the project.
	uiParts	A generic component that is not limited to a project.
constants		Constants.
hooks		Global custom hooks.
store		Redux files (re-ducks pattern) .
types		Type definitions.
utility-types		TypeScript Utility Types.

Components Directory Structures

${PresentationalComponent Name}
├── container.tsx
├── hooks.ts
├── index.ts
└── presenter.tsx

File Name	Description
container.tsx	Container Component.
hooks.ts	Custom hook for Presentational Component.
index.ts	Barrel
presenter.test.tsx	Unit test for Presentational Component.
presenter.tsx	Presentational Component.
presenter.stories.tsx	Storybook.

Theme

The application's color settings are managed by the following files.

• src/theme.ts
• src/hooks/useAppTheme.ts

Known Issue

chakra-ui/chakra-ui#2531

If you use <MenuList> , you will see the following warning.

index.js:110 Popper: CSS "margin" styles cannot be used to apply padding between the popper and its reference element or boundary. To replicate margin, use the `offset` modifier, as well as the `padding` option in the `preventOverflow` and `flip` modifiers.

This is a problem with Popper.js, which is used internally, and this also happens in v1.6.4.