update to chakra v2 (#28)

* change d with display, update readme
* add github actions

Author: mustaphaturhan

.github/workflows/publish.yml

@@ -0,0 +1,22 @@
+name: Publish to NPM
+on:
+  release:
+    types: [created]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '14.x'
+          cache: 'yarn'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install dependencies and build 🔧
+        run: yarn install && yarn build
+      - name: Publish package on NPM 📦
+        run: yarn publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## [4.1.0] - 2022-06-23
+
+- Allows `react-markdown v8` and `chakra-ui v2` (#27, thanks [@baartch](https://github.com/baartch))
+- Updates deprecated `d=...` property to `display=...` property.
+- Changes type definition of first parameter. `heading` is not accepted as a property anymore since it isn't used anywhere. Use `h1, h2, h3, h4, h5, h6` instead.
+
 ## [4.0.0] - 2021-11-19
 
 ### 🔥💥 Breaking Changes

README.md

@@ -10,18 +10,18 @@ This package is created for people who using [Chakra-UI's](https://chakra-ui.com
 
 CSSReset component is turning down every default style of elements that provided by browser. HTML elements like h1, h2, h3... aren't get default styles but Markdown need them for rendering purposes. This package is solving the problem by changing renderer defaults with chakra-ui's components.
 
-For example, when you want to render level 2 heading component, it is rendering: `<Heading as="h2" size="xl">Your Header Title</Heading>`.
-
 ### Install
 
-Make @chakra-ui/react installation how they tell you on their [Getting Started - Chakra UI](https://chakra-ui.com/docs/getting-started) page.
+- Install @chakra-ui/react by following their [Getting Started - Chakra UI](https://chakra-ui.com/getting-started) guide.
+- Install [react-markdown](https://github.com/remarkjs/react-markdown).
+- Install `chakra-ui-markdown-renderer`.
 
 ```sh
-$ yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion chakra-ui-markdown-renderer
+$ yarn add chakra-ui-markdown-renderer
 
 # or
 
-$ npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion chakra-ui-markdown-renderer
+$ npm i chakra-ui-markdown-renderer
 ```
 
 ### Usage
@@ -56,3 +56,7 @@ const newTheme = {
   skipHtml
 />;
 ```
+
+#### Alternative ways
+
+[@nikolovlazar/chakra-ui-prose](https://www.npmjs.com/package/@nikolovlazar/chakra-ui-prose) might also work depends on your needs.

package.json

@@ -3,7 +3,7 @@
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "source": "src/index.tsx",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "private": false,
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -42,7 +42,7 @@
   "scripts": {
     "prepare": "install-peers",
     "build": "rollup -c",
-    "build-watch": "rollup -c -w"
+    "build:watch": "rollup -c -w"
   },
   "eslintConfig": {
     "extends": "react-app"

src/index.tsx

@@ -28,6 +28,9 @@ function getCoreProps(props: GetCoreProps): any {
 }
 
 interface Defaults extends Components {
+  /**
+   * @deprecated Use `h1, h2, h3, h4, h5, h6` instead.
+   */
   heading?: Components['h1'];
 }
 
@@ -59,7 +62,7 @@ export const defaults: Defaults = {
       <Code
         className={className}
         whiteSpace="break-spaces"
-        d="block"
+        display="block"
         w="full"
         p={2}
         children={children}