mantine乗り換えメモ

• HStack -> Group

• Providerとthemeとcss importを一緒にまとめておくと便利そう

• modal
  • https://mantine.dev/core/modal/
  • withCloseButton / titleがあるので簡素化はする
  • アニメーション変更はtransitionProps
    • popがchakraのそれに近そう

• primaryColor: dark が一番近い感じ

• Button
  • round: md
  • as -> component

• https://mantine.dev/core/transition/
• Function Childrenになる。
• 細かいところ色々chakraより劣後する

• https://mantine.dev/guides/next/#setup-with-app-router
• mantineHtmlProps

• Spinner -> Loader
  • https://mantine.dev/core/loader/

<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (143kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)

• https://mantine.dev/guides/next/#app-router-tree-shaking
• tree shaking

細かいstyle property

• https://mantine.dev/styles/style-props/
• position -> pos

• rounded=full -> radius=xl

VStack -> <Stack align="center">

color palette系でgray.200とか残ってるとランタイムエラーが起きるのマジ怖い。

const createColorArray = (colors: MantineColorsTuple): MantineColorsTuple => {
  const colorSteps = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]

  return colorSteps.reduce((result, step, index) => {
    result[step] = colors[index + 1]
    return result
  }, [...colors])

}