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">