refactor: add reusable folder with DocsLink component

Author: woothu

jsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": "."
+  },
+  "include": ["src"]
+}

src/reusable/DocsLink.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { CLink } from '@coreui/react'
+
+const DocsLink = props => {
+  const {
+    name,
+    text,
+    ...rest
+  } = props
+
+  const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href
+
+  return (
+    <div className="card-header-actions">
+      <CLink 
+        {...rest}
+        href={href}
+        rel="noreferrer noopener" 
+        target="_blank" 
+        className="card-header-action"  
+      >
+        <small className="text-muted">{ text || 'docs' }</small>
+      </CLink>
+    </div>
+  )
+}
+
+export default React.memo(DocsLink)

src/reusable/index.js

@@ -0,0 +1,5 @@
+import DocsLink from './DocsLink'
+
+export {
+  DocsLink
+}

src/views/base/breadcrumbs/Breadcrumbs.js

@@ -10,6 +10,7 @@ import {
   CCol,
   CRow
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 import routes from '../../../routes'
 
 const Breadcrumbs = () => {
@@ -19,16 +20,7 @@ const Breadcrumbs = () => {
         <CCard>
           <CCardHeader>
             Bootstrap Breadcrumb
-            <div className="card-header-actions">
-              <a 
-                href="https://coreui.github.io/components/breadcrumbs/" 
-                rel="noreferrer noopener" 
-                target="_blank" 
-                className="card-header-action"
-              >
-                <small className="text-muted">docs</small>
-              </a>
-            </div>
+            <DocsLink name="CBreadcrumb"/>
           </CCardHeader>
           <CCardBody>
             <h6>CBreadcrumbRouter wrapper component</h6>

src/views/base/cards/Cards.js

@@ -13,6 +13,8 @@ import {
   CLink
 } from  '@coreui/react'
 import CIcon from '@coreui/icons-react'
+import { DocsLink } from 'src/reusable'
+
 
 const Cards = () => {
   const [collapsed, setCollapsed] = React.useState(true)
@@ -25,6 +27,7 @@ const Cards = () => {
           <CCard>
             <CCardHeader>
               Card title
+              <DocsLink name="CCard"/>
             </CCardHeader>
             <CCardBody>
               Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

src/views/base/carousels/Carousels.js

@@ -12,6 +12,7 @@ import {
   CCol,
   CRow 
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 const slides = [
   'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
@@ -28,6 +29,7 @@ const Carousels = () => {
         <CCard>
           <CCardHeader>
             Carousel with controls
+            <DocsLink name="CCarousel"/>
           </CCardHeader>
           <CCardBody>
             <CCarousel>

src/views/base/collapses/Collapses.js

@@ -10,6 +10,7 @@ import {
   CFade,
   CRow 
 } from '@coreui/react';
+import { DocsLink } from 'src/reusable'
 
 const Collapses = () => {
 
@@ -51,11 +52,7 @@ const Collapses = () => {
         <CCard>
           <CCardHeader>
             Collapse
-            <div className="card-header-actions">
-              <a href="https://coreui.github.io/components/collapse/" rel="noreferrer noopener" target="_blank" className="card-header-action">
-                <small className="text-muted">docs</small>
-              </a>
-            </div>
+            <DocsLink name="CCollapse"/>
           </CCardHeader>
           <CCollapse show={collapse}>
             <CCardBody>
@@ -129,11 +126,7 @@ const Collapses = () => {
         <CCard>
           <CCardHeader>
             Fade
-            <div className="card-header-actions">
-              <a href="https://coreui.github.io/components/fade/" rel="noreferrer noopener" target="_blank" className="card-header-action">
-                <small className="text-muted">docs</small>
-              </a>
-            </div>
+            <DocsLink name="CFade"/>
           </CCardHeader>
           <CCardBody>
             <CFade timeout={300} in={fade} tag="h5" className="mt-3">

src/views/base/forms/BasicForms.js

@@ -31,6 +31,7 @@ import {
   CRow
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
+import { DocsLink } from 'src/reusable'
 
 const BasicForms = () => {
   const [collapsed, setCollapsed] = React.useState(true)
@@ -44,6 +45,7 @@ const BasicForms = () => {
             <CCardHeader>
               Credit Card
               <small> Form</small>
+              <DocsLink name="-Input"/>
             </CCardHeader>
             <CCardBody>
               <CRow>

src/views/base/index.js

@@ -0,0 +1,20 @@
+import Breadcrumbs from './Breadcrumbs';
+import Cards from './Cards';
+import Carousels from './Carousels';
+import Collapses from './Collapses';
+import Dropdowns from './Dropdowns';
+import Jumbotrons from './Jumbotrons';
+import ListGroups from './ListGroups';
+import Navbars from './Navbars';
+import Navs from './Navs';
+import Paginations from './Paginations';
+import Popovers from './Popovers';
+import ProgressBar from './ProgressBar';
+import Switches from './Switches';
+import Tabs from './Tabs';
+import Tooltips from './Tooltips';
+
+export {
+  Breadcrumbs, Cards, Carousels, Collapses, Dropdowns, Jumbotrons, ListGroups, Navbars, Navs, Popovers, ProgressBar, Switches, Tabs, Tooltips, Paginations,
+};
+

src/views/base/jumbotrons/Jumbotrons.js

@@ -11,6 +11,7 @@ import {
   CEmbed,
   CEmbedItem
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 const Jumbotrons = () => {
 
@@ -21,11 +22,7 @@ const Jumbotrons = () => {
           <CCard>
             <CCardHeader>
               Jumbotron
-              <div className="card-header-actions">
-                <a href="https://coreui.github.io/components/jumbotron/" rel="noreferrer noopener" target="_blank" className="card-header-action">
-                  <small className="text-muted">docs</small>
-                </a>
-              </div>
+              <DocsLink name="CJumbotron"/>
             </CCardHeader>
             <CCardBody>
               <CJumbotron className="border">

src/views/base/list-groups/ListGroups.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState } from 'react'
 import {
   CBadge,
   CCard,
@@ -10,7 +10,9 @@ import {
   CRow,
   CTabContent,
   CTabPane
-} from '@coreui/react';
+} from '@coreui/react'
+import { DocsLink } from 'src/reusable'
+
 
 const ListGroups = () => {
   const [activeTab, setActiveTab] = useState(1)
@@ -23,11 +25,7 @@ const ListGroups = () => {
           <CCard>
             <CCardHeader>
               List group
-              <div className="card-header-actions">
-                <a href="https://coreui.github.io/components/listgroup/" rel="noreferrer noopener" target="_blank" className="card-header-action">
-                  <small className="text-muted">docs</small>
-                </a>
-              </div>
+              <DocsLink name="CListGroup"/>
             </CCardHeader>
             <CCardBody>
               <CListGroup>

src/views/base/navbars/Navbars.js

@@ -19,7 +19,7 @@ import {
   CButton,
   CImg
 } from '@coreui/react'
-// import CIcon from '@coreui/icons-react'
+import { DocsLink } from 'src/reusable'
 
 const CNavbars = () => {
   const [isOpen, setIsOpen] = useState(false)
@@ -32,6 +32,7 @@ const CNavbars = () => {
       <CCard>
         <CCardHeader>
           CNavbar
+          <DocsLink name="CNavbar"/>
         </CCardHeader>
         <CCardBody>
           <CNavbar expandable="sm" color="info" >

src/views/base/navs/Navs.js

@@ -13,6 +13,7 @@ import {
   CNavItem,
   CNavLink
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 const Navs = () => {
   return (
@@ -22,11 +23,7 @@ const Navs = () => {
           <CCard>
             <CCardHeader>
               Navs
-              <div className="card-header-actions">
-                <a href="https://coreui.github.io/components/navs/" rel="noreferrer noopener" target="_blank" className="card-header-action">
-                  <small className="text-muted">docs</small>
-                </a>
-              </div>
+              <DocsLink name="CNav"/>
             </CCardHeader>
             <CCardBody>
               <small>List Based</small>

src/views/base/paginations/Pagnations.js

@@ -5,6 +5,8 @@ import {
   CCardHeader,
   CPagination
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
+
 
 const Paginations = () => {
   const [currentPage, setCurrentPage] = useState(2)
@@ -14,11 +16,7 @@ const Paginations = () => {
       <CCard>
         <CCardHeader>
           Pagination
-          <div className="card-header-actions">
-            <a href="https://coreui.github.io/components/pagination/" rel="noreferrer noopener" target="_blank" className="card-header-action">
-              <small className="text-muted">docs</small>
-            </a>
-          </div>
+          <DocsLink name="CPagination"/>
         </CCardHeader>
         <CCardBody>
           <h6>Default</h6>

src/views/base/popovers/Popovers.js

@@ -9,6 +9,7 @@ import {
   CCol,
   CLink
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 const Popovers = () => {
   const placements = [
@@ -23,16 +24,7 @@ const Popovers = () => {
       <CCard>
         <CCardHeader>
           Popovers
-          <div className="card-header-actions">
-            <a
-              href="https://coreui.github.io/components/popovers/"
-              rel="noreferrer noopener"
-              target="_blank"
-              className="card-header-action"
-            >
-              <small className="text-muted">docs</small>
-            </a>
-          </div>
+          <DocsLink name="CPopover"/>
         </CCardHeader>
         <CCardBody>
           {/*eslint-disable-next-line*/}

src/views/base/progress-bar/ProgressBar.js

@@ -6,18 +6,15 @@ import {
   CProgress,
   CProgressBar
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 const ProgressBar = () => {
   return (
     <>
       <CCard>
         <CCardHeader>
           Progress
-          <div className="card-header-actions">
-            <a href="https://coreui.github.io/components/progress/" rel="noreferrer noopener" target="_blank" className="card-header-action">
-              <small className="text-muted">docs</small>
-            </a>
-          </div>
+          <DocsLink name="CProgressBar"/>
         </CCardHeader>
         <CCardBody>
           <CProgress className="mb-3" />

src/views/base/switches/Switches.js

@@ -7,6 +7,7 @@ import {
   CRow,
   CSwitch
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 const Switches = () => {
   return (
@@ -15,6 +16,7 @@ const Switches = () => {
         <CCard>
           <CCardHeader>
             3d Switch
+            <DocsLink name="CSwitch"/>
           </CCardHeader>
           <CCardBody>
             <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked onChange={(e)=>console.log(e.target.checked)}/>

src/views/base/tables/Tables.js

@@ -8,6 +8,7 @@ import {
   CDataTable,
   CRow
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 import usersData from '../../users/UsersData'
 
@@ -30,6 +31,7 @@ const Tables = () => {
           <CCard>
             <CCardHeader>
               Simple Table
+              <DocsLink name="CModal"/>
             </CCardHeader>
             <CCardBody>
             <CDataTable

src/views/base/tabs/Tabs.js

@@ -13,6 +13,7 @@ import {
   CCardHeader
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
+import { DocsLink } from 'src/reusable'
 
 const Tabs = () => {
   const [active, setActive] = useState(1)
@@ -24,6 +25,7 @@ const Tabs = () => {
         <CCard>
           <CCardHeader>
             Index indentifiers
+            <DocsLink name="CTabs"/>
           </CCardHeader>
           <CCardBody>
             <CTabs>