feat(storybook): add storybook examples for all components

docs/components/PageContent.tsx

@@ -12,6 +12,7 @@ import scrollIntoView from '../utils/scrollIntoView';
 import { VercelBanner } from './VercelBanner';
 import CustomCodeView, { CustomCodeViewProps } from './CodeView';
 import InstallGuide from './InstallGuide';
+import { installCarbon, installBadges } from './scripts';
 
 const defaultInDocsComponents = {
   'install-guide': InstallGuide
@@ -27,22 +28,6 @@ export interface PageContentProps extends CustomCodeViewProps {
   inDocsComponents?: Record<string, React.ComponentType>;
 }
 
-function installCarbon() {
-  const subtitle = document.querySelector('h2');
-  const carbonadsJs = document.getElementById('_carbonads_js');
-
-  if (subtitle && !carbonadsJs) {
-    const adSpace = document.createElement('div');
-    const carbon = document.createElement('script');
-
-    carbon.src = 'https://cdn.carbonads.com/carbon.js?serve=CEAIL2JU&placement=rsuitejscom';
-    carbon.id = '_carbonads_js';
-    adSpace.appendChild(carbon);
-
-    subtitle.parentNode.insertBefore(adSpace, subtitle);
-  }
-}
-
 const PageContent = (props: PageContentProps) => {
   const {
     category = 'components',
@@ -74,11 +59,15 @@ const PageContent = (props: PageContentProps) => {
   useEffect(() => {
     scrollIntoView();
     installCarbon();
+
+    installBadges({ minVersion: component?.minVersion, componentName: component?.name });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
     <PageContainer designHash={designHash} routerId={pathname} hidePageNav={hidePageNav}>
       {pageHead}
+
       {fragments.map((item, index) => {
         const result = item.match(/include:`(\S+)`(\|(\d+)\|)?/);
 

docs/components/scripts.ts

@@ -0,0 +1,97 @@
+export function installCarbon() {
+  const subtitle = document.querySelector('h2');
+  const carbonadsJs = document.getElementById('_carbonads_js');
+
+  if (subtitle && !carbonadsJs) {
+    const adSpace = document.createElement('div');
+    const carbon = document.createElement('script');
+
+    carbon.src = 'https://cdn.carbonads.com/carbon.js?serve=CEAIL2JU&placement=rsuitejscom';
+    carbon.id = '_carbonads_js';
+    adSpace.appendChild(carbon);
+
+    subtitle.parentNode.insertBefore(adSpace, subtitle);
+  }
+}
+
+function createStorybook(componentName: string) {
+  const ignoreList = [
+    'Affix',
+    'Animation',
+    'DOMHelper',
+    'Whisper',
+    'useMediaQuery',
+    'CustomProvider',
+    'Overview',
+    'Icons',
+    'CSS Reset'
+  ];
+
+  if (ignoreList.includes(componentName) || !componentName) {
+    return null;
+  }
+
+  const storybook = document.createElement('a');
+  storybook.href = `https://storybook.rsuitejs.com/?path=/story/components-${componentName?.toLocaleLowerCase()}`;
+  storybook.target = '_blank';
+  storybook.rel = 'noopener noreferrer';
+  storybook.id = 'storybook-link';
+  storybook.className = 'rs-stack-item';
+
+  const storybookIcon = document.createElement('img');
+  storybookIcon.src = '/images/storybook.svg';
+  storybookIcon.alt = 'Storybook';
+  storybook.appendChild(storybookIcon);
+
+  return storybook;
+}
+
+function createMinVersionBadge(minVersion: string) {
+  const badge = document.createElement('a');
+  badge.href = `https://github.com/rsuite/rsuite/releases/tag/v${minVersion}`;
+  badge.target = '_blank';
+  badge.rel = 'noopener noreferrer';
+  badge.id = 'min-version-badge';
+  badge.className = 'rs-stack-item';
+  const img = document.createElement('img');
+  img.src = `https://img.shields.io/badge/version->=${minVersion}-blue`;
+  img.alt = `Supported from version ${minVersion}`;
+  img.title = `Supported from version ${minVersion}`;
+
+  badge.appendChild(img);
+
+  return badge;
+}
+
+export function installBadges({
+  minVersion,
+  componentName
+}: {
+  minVersion?: string;
+  componentName: string;
+}) {
+  if (document.getElementById('badge-container')) {
+    return;
+  }
+
+  const pageHeader = document.querySelector('.page-heading');
+  const badgeContainer = document.createElement('div');
+  badgeContainer.className = 'rs-stack';
+  badgeContainer.id = 'badge-container';
+  badgeContainer.style.gap = '10px';
+  badgeContainer.style.marginBottom = '10px';
+
+  const storybook = createStorybook(componentName);
+
+  if (storybook) {
+    badgeContainer.appendChild(storybook);
+  }
+
+  if (minVersion) {
+    badgeContainer.appendChild(createMinVersionBadge(minVersion));
+  }
+
+  if (badgeContainer.children.length > 0) {
+    pageHeader.parentNode?.insertBefore(badgeContainer, pageHeader?.nextSibling);
+  }
+}

docs/pages/components/date-input/en-US/index.md

@@ -2,8 +2,6 @@
 
 The DateInput component lets users select a date with the keyboard.
 
-![Supported from version 5.48.0](https://img.shields.io/badge/version->=5.48.0-blue)
-
 ## Import
 
 <!--{include:(components/date-input/fragments/import.md)}-->

docs/pages/components/date-input/zh-CN/index.md

@@ -2,8 +2,6 @@
 
 DateInput 组件允许用户使用键盘选择日期。
 
-![Supported from version 5.48.0](https://img.shields.io/badge/version->=5.48.0-blue)
-
 ## 获取组件
 
 <!--{include:(components/date-input/fragments/import.md)}-->

docs/pages/components/date-range-input/en-US/index.md

@@ -2,8 +2,6 @@
 
 The DateRangeInput components let the user select a date range with the keyboard.
 
-![Supported from version 5.49.0](https://img.shields.io/badge/version->=5.49.0-blue)
-
 ## Import
 
 <!--{include:(components/date-range-input/fragments/import.md)}-->

docs/pages/components/date-range-input/zh-CN/index.md

@@ -2,8 +2,6 @@
 
 DateRangeInput 组件允许用户使用键盘选择日期范围。
 
-![Supported from version 5.49.0](https://img.shields.io/badge/version->=5.49.0-blue)
-
 ## 获取组件
 
 <!--{include:(components/date-range-input/fragments/import.md)}-->

docs/pages/components/radio-tile/en-US/index.md

@@ -2,8 +2,6 @@
 
 A series of selectable tile components that behave like Radio.
 
-![Supported from version 5.35.0](https://img.shields.io/badge/version->=5.35.0-blue)
-
 ## Import
 
 <!--{include:(components/radio-tile/fragments/import.md)}-->

docs/pages/components/radio-tile/zh-CN/index.md

@@ -2,8 +2,6 @@
 
 一系列可选的磁贴组件，其行为类似于 Radio。
 
-![Supported from version 5.35.0](https://img.shields.io/badge/version->=5.35.0-blue)
-
 ## 获取组件
 
 <!--{include:(components/radio-tile/fragments/import.md)}-->

docs/utils/mock.ts

@@ -199,11 +199,11 @@ export const mockAsyncData = (sort = true) => {
   };
 
   const getNodes = length => {
-    const list = [];
+    const list: any[] = [];
     for (let i = 0; i < length; i++) {
       list.push(createNode());
     }
-    return sort ? list.sort((a, b) => (b.children ? 1 : 0) - (a.children ? 1 : 0)) : list;
+    return sort ? list.sort((a: any, b: any) => (b.children ? 1 : 0) - (a.children ? 1 : 0)) : list;
   };
 
   const fetchNodes = () => {

scripts/gulpfile.js

@@ -28,7 +28,8 @@ const tsSources = [
   `${srcRoot}/**/*.tsx`,
   `${srcRoot}/**/*.ts`,
   `!${srcRoot}/**/*.d.ts`,
-  `!${srcRoot}/**/test/*`
+  `!${srcRoot}/**/test/*`,
+  `!${srcRoot}/**/stories/*`
 ];
 
 function clean(done) {

src/Animation/styles/bounce.less

@@ -0,0 +1,34 @@
+// Bounce
+.rs-anim-bounce-in {
+  animation-name: bounceIn;
+  .animation-common(cubic-bezier(0.68, -0.55, 0.27, 1.55)); // Ease in out
+
+  @keyframes bounceIn {
+    from {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
+.rs-anim-bounce-out {
+  animation-name: bounceOut;
+  .animation-common(cubic-bezier(0.4, 0, 1, 1)); //Fast out
+
+  @keyframes bounceOut {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+  }
+}

src/Animation/styles/collapse.less

@@ -0,0 +1,22 @@
+.rs-anim-collapse {
+  display: none;
+
+  &.rs-anim-in {
+    display: block;
+  }
+
+  tr&.rs-anim-in {
+    display: table-row;
+  }
+
+  tbody&.rs-anim-in {
+    display: table-row-group;
+  }
+}
+
+.rs-anim-collapsing {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  transition: height 0.35s ease, width 0.35s ease, visibility 0.35s ease;
+}

src/Animation/styles/fade.less

@@ -0,0 +1,10 @@
+.rs-anim-fade {
+  opacity: 0;
+  transition: opacity 0.15s linear;
+  pointer-events: none;
+
+  &.rs-anim-in {
+    opacity: 1;
+    pointer-events: unset;
+  }
+}

src/Animation/styles/index.less

@@ -1,97 +1,7 @@
-@import '../../styles/common';
-@import 'mixin';
-@import 'animation';
-
-// Slide
-.rs-anim-slide-out {
-  .animation-common(cubic-bezier(0.4, 0, 1, 1)); //Fast out
-}
-
-.rs-anim-slide-in {
-  .animation-common(ease-in-out);
-}
-
-.rs-anim-right {
-  .slide-animation-setting(slideInRight, slideOutRight);
-}
-
-.rs-anim-left {
-  .slide-animation-setting(slideInLeft, slideOutLeft);
-}
-
-.rs-anim-top {
-  .slide-animation-setting(slideInTop, slideOutTop);
-}
-
-.rs-anim-bottom {
-  .slide-animation-setting(slideInBottom, slideOutBottom);
-}
-
-// Bounce
-.rs-anim-bounce-in {
-  animation-name: bounceIn;
-  .animation-common(cubic-bezier(0.68, -0.55, 0.27, 1.55)); // Ease in out
-
-  @keyframes bounceIn {
-    from {
-      opacity: 0;
-      transform: scale(0.8);
-    }
-
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-}
-
-.rs-anim-bounce-out {
-  animation-name: bounceOut;
-  .animation-common(cubic-bezier(0.4, 0, 1, 1)); //Fast out
-
-  @keyframes bounceOut {
-    from {
-      opacity: 1;
-      transform: scale(1);
-    }
-
-    to {
-      opacity: 0;
-      transform: scale(0.8);
-    }
-  }
-}
-
-.rs-anim-fade {
-  opacity: 0;
-  transition: opacity 0.15s linear;
-  pointer-events: none;
-
-  &.rs-anim-in {
-    opacity: 1;
-    pointer-events: unset;
-  }
-}
-
-.rs-anim-collapse {
-  display: none;
-
-  &.rs-anim-in {
-    display: block;
-  }
-
-  tr&.rs-anim-in {
-    display: table-row;
-  }
-
-  tbody&.rs-anim-in {
-    display: table-row-group;
-  }
-}
-
-.rs-anim-collapsing {
-  position: relative;
-  height: 0;
-  overflow: hidden;
-  transition: height 0.35s ease, width 0.35s ease, visibility 0.35s ease;
-}
+@import '../../styles/common.less';
+@import './mixin.less';
+@import './animation.less';
+@import './slide.less';
+@import './bounce.less';
+@import './collapse.less';
+@import './fade.less';