docs: update docs

wangdicoder · wangdicoder · commit e3401eef96bf · 2026-03-11T15:50:51.000+11:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,25 @@ Tiny UI strictly follows [Semantic Versioning 2.0.0](https://semver.org/).
 - **z version**: patch version at the end of every week for routine bugfix (anytime for urgent bugfix).
 
 
+## [1.0.2](https://github.com/wangdicoder/tiny-ui/compare/v1.0.1...v1.0.2) (2026-03-11)
+
+### Bug Fixes
+
+* CSSTransition issue ([5275a17](https://github.com/wangdicoder/tiny-ui/commit/5275a17))
+
+### Refactors
+
+* reuse Pagination component in Table and List ([444b9a0](https://github.com/wangdicoder/tiny-ui/commit/444b9a0))
+* unify component file structure so index.tsx only re-exports ([60bed2d](https://github.com/wangdicoder/tiny-ui/commit/60bed2d))
+
+## [1.0.1](https://github.com/wangdicoder/tiny-ui/compare/v1.0.0...v1.0.1) (2026-03-10)
+
+### Bug Fixes
+
+* `<Pagination />` - prevent custom props from leaking to DOM element ([#41](https://github.com/wangdicoder/tiny-ui/issues/41)) ([4b5103a](https://github.com/wangdicoder/tiny-ui/commit/4b5103a))
+* `<Grid />` - accept single Col element in RowProps ([#36](https://github.com/wangdicoder/tiny-ui/issues/36)) ([6edf326](https://github.com/wangdicoder/tiny-ui/commit/6edf326))
+* CSSTransition issue ([5275a17](https://github.com/wangdicoder/tiny-ui/commit/5275a17))
+
 ## [1.0.0](https://github.com/wangdicoder/tiny-ui/compare/v0.0.94...v1.0.0) (2026-03-10)
 
 ### Features
@@ -26,7 +45,6 @@ Tiny UI strictly follows [Semantic Versioning 2.0.0](https://semver.org/).
 
 ### Bug Fixes
 
-* `<Pagination />` - prevent custom props from leaking to DOM element ([#41](https://github.com/wangdicoder/tiny-ui/issues/41)) ([4b5103a](https://github.com/wangdicoder/tiny-ui/commit/4b5103a))
 * `<BackTop />` - reset native button styles and support custom children ([095da1e](https://github.com/wangdicoder/tiny-ui/commit/095da1e))
 * `<Tabs />` - reduce editable-card add button size to match tab height ([492cd06](https://github.com/wangdicoder/tiny-ui/commit/492cd06))
 * `<ColorPicker />` - show not-allowed cursor in disabled state ([17eba92](https://github.com/wangdicoder/tiny-ui/commit/17eba92))
diff --git a/components/anchor/anchor.tsx b/components/anchor/anchor.tsx
@@ -119,16 +119,25 @@ const Anchor = (props: AnchorProps): JSX.Element => {
 
     let newActiveId = '';
     let maxTop = -Infinity;
+    let firstId = '';
+    let firstTop = Infinity;
     links.forEach((href) => {
       const id = href.replace('#', '');
       const el = document.getElementById(id);
       if (!el) return;
       const elTop = el.getBoundingClientRect().top - containerTop;
+      if (elTop < firstTop) {
+        firstTop = elTop;
+        firstId = id;
+      }
       if (elTop <= offsetTop && elTop > maxTop) {
         maxTop = elTop;
         newActiveId = id;
       }
     });
+    if (!newActiveId && firstId) {
+      newActiveId = firstId;
+    }
 
     setActiveId((prev) => {
       if (prev !== newActiveId) {
diff --git a/components/message/demo/type.md b/components/message/demo/type.md
@@ -11,13 +11,13 @@ Messages of `info`, `success`, `warning`, `error` and `loading` types.
   };
   
   return (
-    <>
+    <Flex gap="sm">
       <Button btnType="info" onClick={() => onClick('info')}>Info</Button>
       <Button btnType="success" onClick={() => onClick('success')}>Success</Button>
       <Button btnType="warning" onClick={() => onClick('warning')}>Warning</Button>
       <Button btnType="danger" onClick={() => onClick('error')}>Error</Button>
       <Button btnType="info" onClick={() => onClick('loading')}>Loading</Button>
-    </>
+    </Flex>
   );
 }
 ```
diff --git a/components/modal/demo/animation.md b/components/modal/demo/animation.md
@@ -11,7 +11,7 @@ Use `animation` to set different popup animation.
     const [visible2, setVisible2] = React.useState(false);
   
     return (
-      <>
+      <Flex gap="sm">
         <Button btnType="primary" onClick={() => setVisible1(true)}>
           Default Slide up and down
         </Button>
@@ -37,7 +37,7 @@ Use `animation` to set different popup animation.
             <div>Some contents...</div>
             <div>Some contents...</div>
         </Modal>      
-      </>
+      </Flex>
     );
   };
   
diff --git a/components/modal/modal.tsx b/components/modal/modal.tsx
@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useId, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
 import Overlay from '../overlay';
-import Button from '../button/button';
+import { Button, Flex } from '..';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
 import { useLocale } from '../_utils/use-locale';
@@ -99,7 +99,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
       return null;
     } else {
       return (
-        <div className={`${prefixCls}__footer`} style={footerStyle}>
+        <Flex gap="sm" justify='end' className={`${prefixCls}__footer`} style={footerStyle}>
           <Button onClick={onCancel} className={`${prefixCls}__footer-btn`} {...cancelButtonProps}>
             {cancelText}
           </Button>
@@ -111,7 +111,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
             {...confirmButtonProps}>
             {confirmText}
           </Button>
-        </div>
+        </Flex>
       );
     }
   };
diff --git a/components/notification/demo/placement.md b/components/notification/demo/placement.md
@@ -16,12 +16,15 @@ A notification box can appear from the `topRight`, `bottomRight`, `bottomLeft` o
   
   return (
     <>
-      <Button btnType="primary" onClick={() => btnOnClick('topLeft')}>Top Left</Button>
-      <Button btnType="primary" onClick={() => btnOnClick('topRight')}>Top Right</Button>
+      <Flex gap="sm">
+        <Button btnType="primary" onClick={() => btnOnClick('topLeft')}>Top Left</Button>
+        <Button btnType="primary" onClick={() => btnOnClick('topRight')}>Top Right</Button>
+      </Flex>
       <br />
-      <br />
-      <Button btnType="primary" onClick={() => btnOnClick('bottomLeft')}>Bottom Left</Button>
-      <Button btnType="primary" onClick={() => btnOnClick('bottomRight')}>Bottom Right</Button>
+      <Flex gap="sm">
+        <Button btnType="primary" onClick={() => btnOnClick('bottomLeft')}>Bottom Left</Button>
+        <Button btnType="primary" onClick={() => btnOnClick('bottomRight')}>Bottom Right</Button>
+      </Flex>
     </>
   );
 }
diff --git a/components/notification/demo/type.md b/components/notification/demo/type.md
@@ -17,12 +17,12 @@ A notification box with a icon at the left side.
   };
   
   return (
-    <>
+    <Flex gap="sm">
       <Button btnType="info" onClick={() => btnOnClick('info')}>Info</Button>
       <Button btnType="success" onClick={() => btnOnClick('success')}>Success</Button>
       <Button btnType="warning" onClick={() => btnOnClick('warning')}>Warning</Button>
       <Button btnType="danger" onClick={() => btnOnClick('error')}>Error</Button>
-    </>
+    </Flex>
   );
 }
 ```
diff --git a/components/result/demo/success.md b/components/result/demo/success.md
@@ -9,12 +9,14 @@ Show successful results.
   status="success"
   title="Successfully Purchased Cloud Server ECS!"
   subtitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
-  extra={[
-    <Button btnType="primary" key="console">
-      Go Console
-    </Button>,
-    <Button key="buy">Buy Again</Button>,
-  ]}
+  extra={
+    <Flex gap="sm" justify="center">
+      <Button btnType="primary" key="console">
+        Go Console
+      </Button>
+      <Button key="buy">Buy Again</Button>
+    </Flex>
+  }
 />
 ```
 
diff --git a/dist/tiny.min.js b/dist/tiny.min.js
diff --git a/dist/tiny.min.js.map b/dist/tiny.min.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tiny-ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A friendly ui component set for react",
   "license": "MIT",
   "keywords": [
@@ -59,7 +59,8 @@
     "test:coverage": "jest --coverage",
     "test:update": "jest --updateSnapshot",
     "lint:style": "stylelint components/**/*.scss --syntax scss",
-    "lint:style:fix": "npm run lint:style -- --fix"
+    "lint:style:fix": "npm run lint:style -- --fix",
+    "changelog": "node scripts/changelog.js"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
diff --git a/scripts/changelog.js b/scripts/changelog.js
@@ -0,0 +1,199 @@
+#!/usr/bin/env node
+
+/**
+ * Automated changelog generator.
+ *
+ * Detects when package.json version differs from the latest CHANGELOG.md
+ * version and generates a new changelog entry from component-related
+ * conventional commits.
+ *
+ * Usage: node scripts/changelog.js
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const ROOT = path.resolve(__dirname, '..');
+const CHANGELOG_PATH = path.join(ROOT, 'CHANGELOG.md');
+const PKG_PATH = path.join(ROOT, 'package.json');
+const REPO_URL = 'https://github.com/wangdicoder/tiny-ui';
+
+const TYPE_MAP = {
+  feat: 'Features',
+  fix: 'Bug Fixes',
+  refactor: 'Refactors',
+  perf: 'Performance',
+};
+
+const ALLOWED_TYPES = new Set(Object.keys(TYPE_MAP));
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function run(cmd) {
+  return execSync(cmd, { cwd: ROOT, encoding: 'utf-8' }).trim();
+}
+
+/** Read current version from package.json */
+function getPackageVersion() {
+  const pkg = JSON.parse(fs.readFileSync(PKG_PATH, 'utf-8'));
+  return pkg.version;
+}
+
+/** Extract the latest version string from CHANGELOG.md (first ## [x.y.z] header) */
+function getChangelogVersion() {
+  const content = fs.readFileSync(CHANGELOG_PATH, 'utf-8');
+  const match = content.match(/^## \[(\d+\.\d+\.\d+)]/m);
+  return match ? match[1] : null;
+}
+
+/**
+ * Convert a kebab-case scope (e.g. "back-top") to PascalCase component name
+ * wrapped in JSX notation: `<BackTop />`
+ */
+function scopeToComponentTag(scope) {
+  if (!scope) return null;
+  const pascal = scope
+    .split('-')
+    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+    .join('');
+  return `\`<${pascal} />\``;
+}
+
+/**
+ * Parse a conventional commit message.
+ * Returns { type, scope, description } or null.
+ */
+function parseCommitMessage(message) {
+  const match = message.match(/^(\w+)(?:\(([^)]+)\))?:\s*(.+)$/);
+  if (!match) return null;
+  return { type: match[1], scope: match[2] || null, description: match[3] };
+}
+
+/**
+ * Check whether a commit touched files under components/ (excluding demo/).
+ */
+function touchesComponents(hash) {
+  const files = run(`git diff-tree --no-commit-id --name-only -r ${hash}`);
+  return files.split('\n').some(
+    (f) => f.startsWith('components/') && !f.includes('/demo/')
+  );
+}
+
+/**
+ * Get today's date in YYYY-MM-DD format.
+ */
+function today() {
+  const d = new Date();
+  const yyyy = d.getFullYear();
+  const mm = String(d.getMonth() + 1).padStart(2, '0');
+  const dd = String(d.getDate()).padStart(2, '0');
+  return `${yyyy}-${mm}-${dd}`;
+}
+
+// ---------------------------------------------------------------------------
+// Main
+// ---------------------------------------------------------------------------
+
+function main() {
+  const pkgVersion = getPackageVersion();
+  const clVersion = getChangelogVersion();
+
+  if (pkgVersion === clVersion) {
+    console.log(
+      `No version change detected (package.json and CHANGELOG.md are both at ${pkgVersion}).`
+    );
+    process.exit(0);
+  }
+
+  console.log(`Version bump detected: ${clVersion} → ${pkgVersion}`);
+
+  // Find the commit that last touched CHANGELOG.md (our baseline).
+  const baseCommit = run('git log -1 --format=%H -- CHANGELOG.md');
+  if (!baseCommit) {
+    console.error('Could not find a commit that last modified CHANGELOG.md.');
+    process.exit(1);
+  }
+
+  // Gather commits from baseline (exclusive) to HEAD.
+  const logOutput = run(
+    `git log ${baseCommit}..HEAD --format=%H%n%s%n---`
+  );
+
+  if (!logOutput) {
+    console.log('No new commits found since last CHANGELOG.md update.');
+    process.exit(0);
+  }
+
+  const rawEntries = logOutput.split('\n---\n').filter(Boolean);
+  const grouped = {};
+  for (const key of Object.keys(TYPE_MAP)) {
+    grouped[key] = [];
+  }
+
+  for (const entry of rawEntries) {
+    const lines = entry.split('\n');
+    const hash = lines[0];
+    const message = lines[1];
+    if (!hash || !message) continue;
+
+    const parsed = parseCommitMessage(message);
+    if (!parsed) continue;
+    if (!ALLOWED_TYPES.has(parsed.type)) continue;
+    if (!touchesComponents(hash)) continue;
+
+    const shortHash = hash.slice(0, 7);
+    const tag = scopeToComponentTag(parsed.scope);
+    const bullet = tag
+      ? `* ${tag} - ${parsed.description} ([${shortHash}](${REPO_URL}/commit/${shortHash}))`
+      : `* ${parsed.description} ([${shortHash}](${REPO_URL}/commit/${shortHash}))`;
+
+    grouped[parsed.type].push(bullet);
+  }
+
+  // Check if we have anything to write.
+  const hasEntries = Object.values(grouped).some((arr) => arr.length > 0);
+  if (!hasEntries) {
+    console.log(
+      'No component-related conventional commits found in the range. CHANGELOG.md not updated.'
+    );
+    process.exit(0);
+  }
+
+  // Build the new section.
+  const compareUrl = `${REPO_URL}/compare/v${clVersion}...v${pkgVersion}`;
+  const sectionLines = [
+    `## [${pkgVersion}](${compareUrl}) (${today()})`,
+    '',
+  ];
+
+  for (const [type, label] of Object.entries(TYPE_MAP)) {
+    if (grouped[type].length === 0) continue;
+    sectionLines.push(`### ${label}`, '');
+    for (const line of grouped[type]) {
+      sectionLines.push(line);
+    }
+    sectionLines.push('');
+  }
+
+  const newSection = sectionLines.join('\n');
+
+  // Insert after the header block (everything before the first ## [...] line).
+  const changelog = fs.readFileSync(CHANGELOG_PATH, 'utf-8');
+  const firstVersionIdx = changelog.search(/^## \[/m);
+  if (firstVersionIdx === -1) {
+    console.error('Could not locate existing version header in CHANGELOG.md.');
+    process.exit(1);
+  }
+
+  const header = changelog.slice(0, firstVersionIdx);
+  const rest = changelog.slice(firstVersionIdx);
+  const updated = header + newSection + '\n' + rest;
+
+  fs.writeFileSync(CHANGELOG_PATH, updated, 'utf-8');
+  console.log(`CHANGELOG.md updated with version ${pkgVersion}.`);
+}
+
+main();
