Merge pull request #13 from make3waves/feature/bc

toast component

.github/workflows/release.yml

@@ -10,6 +10,9 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          persist-credentials: false
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:

.releaserc

@@ -2,6 +2,11 @@
     "branches": [
         {
             "name": "main"
+        },
+        {
+            "name": "next",
+            "channel": "next",
+            "prerelease": true
         }
     ],
     "plugins": [
@@ -14,11 +19,24 @@
             {
                 "assets": [
                     "package.json",
+                    "package-lock.json",
                     "CHANGELOG.md"
                 ],
                 "message": "release: v${nextRelease.version} [skip ci] \n\n${nextRelease.notes}"
             }
         ],
-        "@semantic-release/github"
+        "@semantic-release/github",
+        [
+            "@saithodev/semantic-release-backmerge",
+            {
+                "branches": [
+                    {
+                        "from": "main",
+                        "to": "next"
+                    }
+                ],
+                "clearWorkspace": true
+            }
+        ]
     ]
 }

README.md

@@ -1,6 +1,20 @@
-# makaka
-
-轻量级 React 组件库
+<h1 align="center">makaka</h1>
+
+<p align="center">
+  轻量级 React 组件库
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/makaka">
+    <img src="https://img.shields.io/npm/v/makaka" />
+  </a>
+  <a href="https://www.npmjs.com/package/makaka">
+    <img src="https://img.shields.io/npm/dt/makaka.svg">
+  </a>
+  <a href="https://github.com/make3waves/makaka/actions/workflows/release.yml">
+    <img src="https://github.com/make3waves/makaka/actions/workflows/release.yml/badge.svg" />
+  </a>
+</p>
 
 ### 使用
 
@@ -48,6 +62,14 @@ npm run build
 
 发布 NPM 包通过 Github Actions 自动发布，合并到 main 分支即会自动发包
 
+### TODOLIST
+
+- [] 样式前缀名
+- [] 按需加载
+- [] 组件支持SSR
+- [] 浏览器引入 [案例](https://ant.design/docs/react/introduce-cn#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%BC%95%E5%85%A5)
+- [] 兼容环境 [案例](https://ant.design/docs/react/introduce-cn#%E5%85%BC%E5%AE%B9%E7%8E%AF%E5%A2%83)
+
 ### 参考
 
 [nutui-react](https://nutui.jd.com/react/#/zh-CN/guide/start-react)

examples/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 // 这里是重点！！！
 // App为库的入口，模拟外部引入
 import App from '../src/App'
@@ -11,7 +11,7 @@ const containerStyle: React.CSSProperties = {
   transform: 'translate(-50%, -50%)',
 }
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <div style={containerStyle}>
       <a href="./examples/test.html">跳转到线上包预览页面</a>
@@ -21,5 +21,4 @@ ReactDOM.render(
       </div>
     </div>
   </React.StrictMode>,
-  document.getElementById('root'),
 )

examples/test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { createRoot } from 'react-dom/client'
+import ReactDOM from 'react-dom/client'
 import { Button } from 'makaka'
 import 'makaka/lib/style.css'
 
@@ -31,7 +31,7 @@ const App: React.FC = () => {
   )
 }
 
-createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,

package.json

@@ -11,11 +11,14 @@
     },
     "scripts": {
         "dev": "vite",
-        "build": "npm run clean && vite build && npm run build-css && npm run copy-readme",
+        "build": "npm run test && npm run clean && vite build && npm run build:css && npm run copy-readme",
         "preview": "vite preview",
-        "build-css": "sass ./src/styles/index.scss ./lib/index.css",
+        "build:css": "sass ./src/styles/index.scss ./lib/index.css",
         "copy-readme": "cp ./README.md ./lib/README.md",
         "clean": "rimraf ./lib",
+        "test": "react-scripts test --watchAll=false",
+        "test:coverage": "react-scripts test --watchAll=false -- --coverage",
+        "eject": "react-scripts eject",
         "release": "npm run semantic-release",
         "release:beta": "standard-version --release-as major --prerelease beta",
         "release:major": "standard-version --release-as major",
@@ -51,7 +54,7 @@
         "registry": "https://registry.npmjs.org/"
     },
     "dependencies": {
-        "makaka": "^0.1.0"
+        "makaka": "^0.3.0"
     },
     "peerDependencies": {
         "react": "^18.2.0",
@@ -60,6 +63,7 @@
     "devDependencies": {
         "@babel/core": "^7.19.6",
         "@rollup/plugin-typescript": "^9.0.2",
+        "@saithodev/semantic-release-backmerge": "^2.1.2",
         "@semantic-release/changelog": "^6.0.1",
         "@semantic-release/commit-analyzer": "^9.0.2",
         "@semantic-release/git": "^10.0.1",
@@ -96,4 +100,4 @@
         "typescript": "^4.6.4",
         "vite": "^3.2.0"
     }
-}
+}

src/App.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import Button, { ButtonType, ButtonSize } from './components/Button/button'
+import Toast from './components/Toast/toast'
 import './styles/index.scss'
 
 const App: React.FC = () => {
@@ -17,4 +18,6 @@ const App: React.FC = () => {
   )
 }
 
+Toast('你好，我是一个命令式组件，我通过调用命令生成一个DOM节点。')
+
 export default App

src/components/Toast/_style.scss

@@ -0,0 +1,14 @@
+.toast {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba($color: black, $alpha: 0.7);
+  color: white;
+  font-size: 16px;
+  text-align: center;
+  max-width: 400px;
+  z-index: 9999;
+  padding: 10px 20px;
+  border-radius: 14px;
+}

src/components/Toast/toast.test.tsx

@@ -0,0 +1,19 @@
+import Toast, { ToastProps } from './toast'
+
+const testProps: ToastProps = {
+  message: '你好，我是命令式组件 Toast 。',
+}
+
+describe('test toast components', () => {
+  it('should render toast', () => {
+    Toast(testProps)
+    setTimeout(() => {
+      const element = document.querySelector('.toast')
+      expect(element?.innerHTML).toBe(testProps.message)
+      expect(element).toHaveClass('toast')
+      setTimeout(() => {
+        expect(element).not.toBeTruthy()
+      }, 4000)
+    }, 0)
+  })
+})

src/components/Toast/toast.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+
+interface BaseToastProps {
+  message?: string | React.ReactNode
+  duration?: number
+  style?: React.CSSProperties
+}
+
+type AnchorToastProps = BaseToastProps & React.AnchorHTMLAttributes<HTMLElement>
+export type ToastProps = Partial<AnchorToastProps>
+
+const Toast = (props: string | ToastProps) => {
+  const defaultDuration = 3000
+
+  let message: BaseToastProps['message']
+  let duration: BaseToastProps['duration'] = defaultDuration
+
+  if (typeof props === 'string') {
+    message = props
+  } else {
+    message = props.message
+    duration = props.duration || defaultDuration
+  }
+  const content = <div className="toast">{message}</div>
+
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+
+  const root = createRoot(container)
+
+  const init = () => {
+    const id = setTimeout(() => {
+      clearTimeout(id)
+      root.unmount()
+      document.body.removeChild(container)
+    }, duration)
+  }
+
+  init()
+
+  return root.render(content)
+}
+
+export default Toast

src/main.tsx

@@ -1,2 +1,5 @@
 export { default as Button } from './components/Button/button'
 export type { ButtonProps } from './components/Button/button'
+
+export { default as Toast } from './components/Toast/toast'
+export type { ToastProps } from './components/Toast/toast'

src/styles/index.scss

@@ -13,8 +13,8 @@
 // button
 @import '../components/Button/style';
 
-// alert
-// @import '../components/Alert/style';
+// toast
+@import '../components/Toast/style';
 
 // menu
 // @import '../components/Menu/style';