Docs/add default devs tab (#3388)

* Fix live code preview iframe source in prod

* Reorganize scripts into folders

* Add default dev tab

* Revert "Fix live code preview iframe source in prod"

This reverts commit 67f7570.

* Clean default tab

* Fix content

Author: ethanshar

docuilib/src/components/ComponentPage.tsx

@@ -6,6 +6,7 @@ import './ComponentPage.module.scss';
 import {ListSection} from './pageComponents/ListSection';
 import {Section} from './pageComponents/Section';
 import {Banner} from './pageComponents/Banner';
+import {devTab} from './pageComponents/DefaultTabs';
 
 export default function ComponentPage({component}) {
   const Divider = section => {
@@ -62,7 +63,7 @@ export default function ComponentPage({component}) {
 
     // TODO: align Tabs bottom border with TabItem's selected indication line
     if (tabs) {
-      return <Tabs className="main-tabs">{getTabItems(tabs)}</Tabs>;
+      return <Tabs className="main-tabs">{getTabItems([...tabs, devTab])}</Tabs>;
     }
   };
 

docuilib/src/components/pageComponents/Banner.tsx

@@ -1,8 +1,11 @@
 import _ from 'lodash';
 import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import '../ComponentPage.module.scss';
 
 export const Banner = ({section, component}) => {
+  const {siteConfig} = useDocusaurusContext();
+
   const getColor = type => {
     switch (type) {
       case 'tip':
@@ -43,8 +46,7 @@ export const Banner = ({section, component}) => {
       const comma = isLast ? '' : ', ';
       return (
         <a
-          href={links[index]}
-          target="_blank"
+          href={links?.[index] ?? `${siteConfig?.baseUrl}docs/components/${component}`}
           rel="noreferrer"
           style={{fontSize: '16px', fontWeight: '700', lineHeight: '18px', borderBottom: '1px solid'}}
         >

docuilib/src/components/pageComponents/DefaultTabs.ts

@@ -0,0 +1,20 @@
+export const devTab = {
+  title: 'Dev',
+  sections: [
+    {
+      title: 'Usage',
+      type: 'usage'
+    },
+    {
+      type: 'info'
+    },
+    {
+      type: 'tip'
+    },
+    {
+      type: 'props',
+      title: 'API',
+      description: 'This is the list of additional props for the component'
+    }
+  ]
+};