v3 - Chakra-UI v1 & Next.js v10

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+github: [franky47]
+liberapay: francoisbest
+custom: ['https://paypal.me/francoisbest?locale.x=fr_FR']

.github/dependabot.yml

@@ -0,0 +1,16 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: weekly
+      time: "09:00"
+      timezone: Europe/Paris
+    assignees:
+      - franky47
+  - package-ecosystem: github-actions
+    directory: /
+    schedule:
+      interval: monthly
+    assignees:
+      - franky47

.github/workflows/cd.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - master
+      - beta
 
 jobs:
   cd:
@@ -31,7 +32,7 @@ jobs:
 
       # Continuous Delivery Pipeline --
 
-      - uses: codfish/semantic-release-action@e062b24edc9c1a2c4bb8b1f5cc914f3387c00458
+      - uses: docker://ghcr.io/codfish/semantic-release-action@sha256:16ab6c16b1bff6bebdbcc6cfc07dfafff49d23c6818490500b8edb3babfff29e
         name: Semantic Release
         id: semantic
         env:

.github/workflows/ci.yml

@@ -6,6 +6,7 @@ on:
       - next
       - feature/*
       - dependabot/*
+      - v3
   pull_request:
     types: [opened, edited, reopened, synchronize]
 
@@ -36,3 +37,10 @@ jobs:
         name: Report code coverage
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
+      - uses: 47ng/actions-slack-notify@main
+        name: Notify on Slack
+        if: always()
+        with:
+          status: ${{ job.status }}
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

README.md

@@ -346,7 +346,7 @@ export default () => (
 
 ### SvgBox
 
-Composes [PseudoBox](https://chakra-ui.com/pseudobox) with an SVG tag, with:
+Composes [Box](https://chakra-ui.com/pseudobox) with an SVG tag, with:
 
 - SVG namespace pre-filled
 - `role="img"`
@@ -398,7 +398,7 @@ export default () => (
 Header with navigation links:
 
 ```tsx
-import { Box, Stack } from '@chakra-ui/core'
+import { Box, Stack } from '@chakra-ui/react'
 import { NavLink } from '@47ng/chakra-next'
 
 export default () => (
@@ -415,3 +415,5 @@ export default () => (
 ## License
 
 [MIT](https://github.com/47ng/chakra-next/blob/next/LICENSE) - Made with ❤️ by [François Best](https://francoisbest.com).
+
+Using this package at work ? [Sponsor me](https://github.com/sponsors/franky47) to help with support and maintenance.

next-env.d.ts

@@ -1,2 +1,10 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+
+declare namespace webpack {
+  export type Compiler = any
+  export type Plugin = any
+}
+declare module 'next/dist/compiled/webpack/webpack' {
+  export const webpack: any
+}

next.config.js

@@ -5,8 +5,11 @@ const withMDX = require('@next/mdx')({
 
 const nextConfig = {
   pageExtensions: ['tsx', 'mdx'],
-  experimental: {
-    reactRefresh: true,
+  images: {
+    deviceSizes: [320, 420, 768, 1024, 1200],
+    iconSizes: [],
+    domains: ['images.unsplash.com'],
+    loader: 'default',
   },
 }
 

package.json

@@ -3,6 +3,7 @@
   "version": "0.0.0-semantically-released",
   "description": "Design System for React, based on Chakra UI + Next.js, written in TypeScript.",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "license": "MIT",
   "author": {
     "name": "François Best",
@@ -33,43 +34,51 @@
   },
   "dependencies": {},
   "peerDependencies": {
-    "@chakra-ui/core": "^0.8.0",
-    "@emotion/core": "*",
-    "@emotion/styled": "*",
-    "emotion-theming": "*",
+    "@chakra-ui/react": "^1.x",
+    "@emotion/react": "^11.x",
+    "@emotion/styled": "^11.x",
+    "framer-motion": "*",
     "next": "^10.x",
-    "react": "*",
-    "react-dom": "*"
+    "react": "^17.x",
+    "react-dom": "^17.x",
+    "react-icons": "^4.1.0"
   },
   "devDependencies": {
-    "@chakra-ui/core": "^0.8.0",
+    "@chakra-ui/react": "^1.0.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@emotion/core": "^10.0.28",
-    "@emotion/styled": "^10.0.27",
-    "@mdx-js/loader": "^1.6.19",
-    "@next/mdx": "^10.0.0",
-    "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/react": "^11.1.0",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^14.14.5",
-    "@types/webpack": "^4.41.23",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.x",
+    "@mdx-js/loader": "^1.6.22",
+    "@next/mdx": "^10.0.4",
+    "@testing-library/jest-dom": "^5.11.8",
+    "@testing-library/react": "^11.2.2",
+    "@types/jest": "^26.0.19",
+    "@types/node": "^14.14.19",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/testing-library__jest-dom": "^5.9.5",
+    "@types/webpack": "^4.41.25",
     "commitlint": "^11.0.0",
-    "emotion-theming": "^10.0.27",
-    "husky": "^4.3.0",
-    "jest": "^26.6.1",
-    "next": "^10.0.1",
-    "next-compose-plugins": "^2.2.0",
+    "framer-motion": "^2.9.4",
+    "husky": "^4.3.6",
+    "jest": "^26.6.3",
+    "next": "^10.0.6",
+    "next-compose-plugins": "^2.2.1",
     "npm-run-all": "^4.1.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "ts-jest": "^26.4.3",
-    "ts-node": "^9.0.0",
-    "typescript": "^4.0.5"
+    "react-icons": "^4.1.0",
+    "ts-jest": "^26.4.4",
+    "ts-node": "^9.1.1",
+    "typescript": "^4.1.3"
   },
   "jest": {
     "verbose": true,
     "preset": "ts-jest/presets/js-with-ts",
     "testEnvironment": "jsdom",
+    "setupFiles": [
+      "./test/env.js"
+    ],
     "globals": {
       "ts-jest": {
         "tsconfig": "tsconfig.test.json"

pages/_app.tsx

@@ -1,7 +1,6 @@
 import { createChakraNextApp } from '../src'
 
 export default createChakraNextApp({
-  enableColorMode: 'dark',
   Providers: ({ children }) => {
     console.log('Render root')
     return children

pages/index.mdx

@@ -1,11 +1,27 @@
 import { useRouter } from 'next/router'
-import { Box, Stack, Text, Code, Button } from '@chakra-ui/core'
-import { Container, StackCard } from '../src'
+import {
+  Box,
+  Stack,
+  Text,
+  Code,
+  Button,
+  Heading,
+  StackDivider,
+  Container,
+} from '@chakra-ui/react'
+import { StackCard, NavLink, Image } from '../src'
 
 export default ({ children }) => <Container my={8}>{children}</Container>
 
-Foo
-
-<StackCard>
-  <Text>Bar</Text>
+<StackCard spacing={8}>
+  <Heading fontSize="3xl" textAlign="center">
+    Chakra-UI 🤝 Next.js
+  </Heading>
+  <NavLink to="/">Foo</NavLink>
+  <Text fontSize="sm">Subtext</Text>
+  <Image
+    src="https://images.unsplash.com/photo-1585245332774-3dd2b177e7fa?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjU3ODY1fQ"
+    dimensions={[5048, 3414]}
+    rounded="md"
+  />
 </StackCard>

src/components/cards.tsx

@@ -1,8 +1,13 @@
 import React from 'react'
-import PseudoBox, { PseudoBoxProps } from '@chakra-ui/core/dist/PseudoBox'
-import Flex, { FlexProps } from '@chakra-ui/core/dist/Flex'
-import Stack, { StackProps } from '@chakra-ui/core/dist/Stack'
-import { useColorMode } from '@chakra-ui/core/dist/ColorModeProvider'
+import {
+  Box,
+  BoxProps,
+  Flex,
+  FlexProps,
+  Stack,
+  StackProps,
+  useColorMode,
+} from '@chakra-ui/react'
 
 // --
 
@@ -11,19 +16,17 @@ export const cardBackgroundColors = {
   dark: 'gray.900',
 }
 
-export const cardProps: PseudoBoxProps = {
+export const cardProps: BoxProps = {
   p: 4,
   borderRadius: 4,
   shadow: 'md',
 }
 
-export interface CardProps extends PseudoBoxProps {}
+export interface CardProps extends BoxProps {}
 
 export const Card: React.FC<CardProps> = ({ ...props }) => {
   const { colorMode } = useColorMode()
-  return (
-    <PseudoBox {...cardProps} bg={cardBackgroundColors[colorMode]} {...props} />
-  )
+  return <Box {...cardProps} bg={cardBackgroundColors[colorMode]} {...props} />
 }
 
 // --