v3 - Chakra-UI v1 & Next.js v10 #210
Conversation
Starting Chakra v1 migration
BREAKING CHANGE: `SvgBox` renamed `Svg` BREAKING CHANGE: Replaced `PseudoBox` by `Box` (Chakra-UI v1)
BREAKING CHANGE: Removed `Container`, `StackContainer` and `FlexContainer`.
BREAKING CHANGE: `enableColorMode` is now part of Chakra (in `theme.config`) BREAKING CHANGE: `globalCss` is now part of Chakra (in `theme.styles.global`) BREAKING CHANGE: `getGlobalConfig` is deprecated and spread around in Chakra's config & global styles.
Somehow the new Chakra UI styles don't play well with JSDOM's CSS resolution, and textDecoration is not read correctly. Runtime tests show that the correct styles are applied, so we test the logic against another property (color, which seems to go through).
Pull Request Test Coverage Report for Build 364569309Warning: This coverage report may be inaccurate.This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.
Details
💛 - Coveralls |
| @@ -72,6 +72,9 @@ | |||
| "verbose": true, | |||
| "preset": "ts-jest/presets/js-with-ts", | |||
| "testEnvironment": "jsdom", | |||
| "setupFiles": [ | |||
| "./test/env.js" | |||
There was a problem hiding this comment.
Note: This is a workaround for Next.js image config not having a default, should be resolved in the next version:
vercel/next.js#18373 (comment)
|
Stoked for this release! Is there any way you could publish a prerelease version off of this branch? It seems like the repo is set up to auto deploy, but I thought I'd ask anyway. If the answer is no, I'm happy to be patient 😇 |
|
Hey Trevor, that sounds like a good idea, I'll look into how to do this. If you have experience with semantic-release, any help is welcome! |
|
@trevorblades you can give it a try: Note to self: deploying pre-releases is extremely simple with |
|
That's great to hear @franky47! I meant to investigate this, but you got to it before me. Thanks 😄 |
Doing so adds `next/image` in the imports tree, which is enough to automatically opt-in to Next.js Image Optimization feature, which has drawbacks: - Breaks static export - Requires a server / serverless setup - Requires setting up the Image Optimization config Buying in the Image component should be explicit, so imports will be separated. See #187.
|
Hey @trevorblades, as a heads-up, I'm changing the way the Image component is included. In So I'm moving it out of the top-level, the component can be accessed in import { Image } from '@47ng/chakra-next/dist/components/image' |
This lets npmjs.com know that the project has types, and shows a helpful TypeScript icon.
Introduce _document.ts to add colorMode persistanceAdd shorthands for-> No need, replaced by theCardlayout types:<Card.Flex>,<Card.Stack>etc..aspropforwardReffor custom componentsasin Links as optionalDocumentation
reloptionsCloses #187, #221.