diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..63f923e --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,6 @@ +{ + "compilerOptions": { + "baseUrl": "." + }, + "include": ["src"] +} \ No newline at end of file diff --git a/src/reusable/DocsLink.js b/src/reusable/DocsLink.js new file mode 100644 index 0000000..673447f --- /dev/null +++ b/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 ( +
+ + { text || 'docs' } + +
+ ) +} + +export default React.memo(DocsLink) \ No newline at end of file diff --git a/src/reusable/index.js b/src/reusable/index.js new file mode 100644 index 0000000..6b2e38a --- /dev/null +++ b/src/reusable/index.js @@ -0,0 +1,5 @@ +import DocsLink from './DocsLink' + +export { + DocsLink +} \ No newline at end of file diff --git a/src/views/base/breadcrumbs/Breadcrumbs.js b/src/views/base/breadcrumbs/Breadcrumbs.js index c1bc3ec..1814b57 100644 --- a/src/views/base/breadcrumbs/Breadcrumbs.js +++ b/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 = () => { Bootstrap Breadcrumb -
- - docs - -
+
CBreadcrumbRouter wrapper component
diff --git a/src/views/base/cards/Cards.js b/src/views/base/cards/Cards.js index 6404457..cd1465c 100644 --- a/src/views/base/cards/Cards.js +++ b/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 = () => { Card title + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut diff --git a/src/views/base/carousels/Carousels.js b/src/views/base/carousels/Carousels.js index 82a5e3c..a916196 100644 --- a/src/views/base/carousels/Carousels.js +++ b/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 = () => { Carousel with controls + diff --git a/src/views/base/collapses/Collapses.js b/src/views/base/collapses/Collapses.js index 18597ee..52b977d 100644 --- a/src/views/base/collapses/Collapses.js +++ b/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 = () => { Collapse - + @@ -129,11 +126,7 @@ const Collapses = () => { Fade - + diff --git a/src/views/base/forms/BasicForms.js b/src/views/base/forms/BasicForms.js index 7f04893..ed04273 100644 --- a/src/views/base/forms/BasicForms.js +++ b/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 = () => { Credit Card Form + diff --git a/src/views/base/index.js b/src/views/base/index.js new file mode 100644 index 0000000..b340e0b --- /dev/null +++ b/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, +}; + diff --git a/src/views/base/jumbotrons/Jumbotrons.js b/src/views/base/jumbotrons/Jumbotrons.js index ccaeacf..b5633bb 100644 --- a/src/views/base/jumbotrons/Jumbotrons.js +++ b/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 = () => { Jumbotron - + diff --git a/src/views/base/list-groups/ListGroups.js b/src/views/base/list-groups/ListGroups.js index 2653b58..497eb06 100644 --- a/src/views/base/list-groups/ListGroups.js +++ b/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 = () => { List group - + diff --git a/src/views/base/navbars/Navbars.js b/src/views/base/navbars/Navbars.js index 9575dd3..1ec3f2d 100644 --- a/src/views/base/navbars/Navbars.js +++ b/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 = () => { CNavbar + diff --git a/src/views/base/navs/Navs.js b/src/views/base/navs/Navs.js index bac7f81..29e53f8 100644 --- a/src/views/base/navs/Navs.js +++ b/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 = () => { Navs - + List Based diff --git a/src/views/base/paginations/Pagnations.js b/src/views/base/paginations/Pagnations.js index c3d6524..26da767 100644 --- a/src/views/base/paginations/Pagnations.js +++ b/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 = () => { Pagination - +
Default
diff --git a/src/views/base/popovers/Popovers.js b/src/views/base/popovers/Popovers.js index 1d193da..259a84d 100644 --- a/src/views/base/popovers/Popovers.js +++ b/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 = () => { Popovers - + {/*eslint-disable-next-line*/} diff --git a/src/views/base/progress-bar/ProgressBar.js b/src/views/base/progress-bar/ProgressBar.js index 8e082f1..97d1810 100644 --- a/src/views/base/progress-bar/ProgressBar.js +++ b/src/views/base/progress-bar/ProgressBar.js @@ -6,6 +6,7 @@ import { CProgress, CProgressBar } from '@coreui/react' +import { DocsLink } from 'src/reusable' const ProgressBar = () => { return ( @@ -13,11 +14,7 @@ const ProgressBar = () => { Progress - + diff --git a/src/views/base/switches/Switches.js b/src/views/base/switches/Switches.js index 551bbb8..70a6073 100644 --- a/src/views/base/switches/Switches.js +++ b/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 = () => { 3d Switch + console.log(e.target.checked)}/> diff --git a/src/views/base/tables/Tables.js b/src/views/base/tables/Tables.js index 9638532..a6af753 100644 --- a/src/views/base/tables/Tables.js +++ b/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 = () => { Simple Table + { const [active, setActive] = useState(1) @@ -24,6 +25,7 @@ const Tabs = () => { Index indentifiers + diff --git a/src/views/base/tooltips/Tooltips.js b/src/views/base/tooltips/Tooltips.js index 6b17b3f..d68bf00 100644 --- a/src/views/base/tooltips/Tooltips.js +++ b/src/views/base/tooltips/Tooltips.js @@ -9,6 +9,7 @@ import { CCol, CLink } from '@coreui/react' +import { DocsLink } from 'src/reusable' const Tooltips = () => { const placements = [ @@ -23,16 +24,7 @@ const Tooltips = () => { Tooltips - + {/*eslint-disable-next-line*/} diff --git a/src/views/buttons/button-dropdowns/ButtonDropdowns.js b/src/views/buttons/button-dropdowns/ButtonDropdowns.js index ee8e8d9..28f656f 100644 --- a/src/views/buttons/button-dropdowns/ButtonDropdowns.js +++ b/src/views/buttons/button-dropdowns/ButtonDropdowns.js @@ -18,6 +18,7 @@ import { CInput, CInputCheckbox } from '@coreui/react' +import { DocsLink } from 'src/reusable' const ButtonDropdowns = () => { return ( @@ -26,11 +27,7 @@ const ButtonDropdowns = () => { Dropdowns - + diff --git a/src/views/buttons/button-groups/ButtonGroups.js b/src/views/buttons/button-groups/ButtonGroups.js index be90b56..3997248 100644 --- a/src/views/buttons/button-groups/ButtonGroups.js +++ b/src/views/buttons/button-groups/ButtonGroups.js @@ -18,6 +18,7 @@ import { CRow, CCallout } from '@coreui/react' +import { DocsLink } from 'src/reusable' const ButtonGroups = () => { return ( @@ -26,11 +27,7 @@ const ButtonGroups = () => { Callout - + @@ -42,11 +39,7 @@ const ButtonGroups = () => { Button Group - + diff --git a/src/views/buttons/buttons/Buttons.js b/src/views/buttons/buttons/Buttons.js index 7a81375..a970c23 100644 --- a/src/views/buttons/buttons/Buttons.js +++ b/src/views/buttons/buttons/Buttons.js @@ -8,6 +8,7 @@ import { CRow } from '@coreui/react' import CIcon from '@coreui/icons-react' +import { DocsLink } from 'src/reusable' const Buttons = () => { return ( @@ -15,6 +16,7 @@ const Buttons = () => { Standard Buttons + diff --git a/src/views/buttons/index.js b/src/views/buttons/index.js new file mode 100644 index 0000000..f9a39ce --- /dev/null +++ b/src/views/buttons/index.js @@ -0,0 +1,8 @@ +import ButtonDropdowns from './ButtonDropdowns' +import ButtonGroups from './ButtonGroups' +import Buttons from './Buttons' +import BrandButtons from './BrandButtons' + +export { + ButtonDropdowns, ButtonGroups, Buttons, BrandButtons +} diff --git a/src/views/charts/ChartBarSimple.js b/src/views/charts/ChartBarSimple.js index 1fbc532..1679cfe 100644 --- a/src/views/charts/ChartBarSimple.js +++ b/src/views/charts/ChartBarSimple.js @@ -48,7 +48,6 @@ const ChartBarSimple = props => { return ( { return ( { @@ -21,15 +22,10 @@ const Charts = () => { Bar Chart - + { { { { { { return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase() @@ -20,12 +21,8 @@ const CoreUIIcons = () => { return ( - Brand Icons / as CIcon{' '} - + Brand Icons + diff --git a/src/views/icons/coreui-icons/CoreUIIcons.js b/src/views/icons/coreui-icons/CoreUIIcons.js index 91fcd27..72c4d4d 100644 --- a/src/views/icons/coreui-icons/CoreUIIcons.js +++ b/src/views/icons/coreui-icons/CoreUIIcons.js @@ -2,17 +2,14 @@ import React from 'react' import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react' import { freeSet } from '@coreui/icons' import { getIconsView } from '../brands/Brands.js' +import { DocsLink } from 'src/reusable' const CoreUIIcons = () => { return ( Free Icons / as CIcon{' '} - + diff --git a/src/views/icons/flags/Flags.js b/src/views/icons/flags/Flags.js index 1927600..157b401 100644 --- a/src/views/icons/flags/Flags.js +++ b/src/views/icons/flags/Flags.js @@ -2,17 +2,14 @@ import React from 'react' import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react' import { getIconsView } from '../brands/Brands.js' import { flagSet } from '@coreui/icons' +import { DocsLink } from 'src/reusable' const CoreUIIcons = () => { return ( - Flag Icons / as CIcon{' '} - + Flag Icons + diff --git a/src/views/icons/index.js b/src/views/icons/index.js new file mode 100644 index 0000000..8b88ed3 --- /dev/null +++ b/src/views/icons/index.js @@ -0,0 +1,7 @@ +import CoreUIIcons from './coreui-icons'; +import Flags from './flags'; +import Brands from './brands'; + +export { + CoreUIIcons, Flags, Brands +}; diff --git a/src/views/notifications/alerts/Alerts.js b/src/views/notifications/alerts/Alerts.js index 0a7c78e..a27eb2b 100644 --- a/src/views/notifications/alerts/Alerts.js +++ b/src/views/notifications/alerts/Alerts.js @@ -10,6 +10,7 @@ import { CProgress, CRow } from '@coreui/react' +import { DocsLink } from 'src/reusable' const Alerts = () => { const [visible, setVisible] = React.useState(10) @@ -21,11 +22,7 @@ const Alerts = () => { Alerts - + diff --git a/src/views/notifications/badges/Badges.js b/src/views/notifications/badges/Badges.js index 45a15f6..d99f94a 100644 --- a/src/views/notifications/badges/Badges.js +++ b/src/views/notifications/badges/Badges.js @@ -9,6 +9,7 @@ import { CCol, CRow } from '@coreui/react' +import { DocsLink } from 'src/reusable' const Badges = () => { return ( @@ -17,11 +18,7 @@ const Badges = () => { Badges - +

Example heading New

diff --git a/src/views/notifications/index.js b/src/views/notifications/index.js new file mode 100644 index 0000000..fa7a3a7 --- /dev/null +++ b/src/views/notifications/index.js @@ -0,0 +1,8 @@ +import Alerts from './Alerts'; +import Badges from './Badges'; +import Modals from './Modals'; +import Toaster from './Toaster'; + +export { + Alerts, Badges, Modals, Toaster +}; diff --git a/src/views/notifications/modals/Modals.js b/src/views/notifications/modals/Modals.js index dcd9803..900bc81 100644 --- a/src/views/notifications/modals/Modals.js +++ b/src/views/notifications/modals/Modals.js @@ -12,6 +12,7 @@ import { CModalTitle, CRow } from '@coreui/react' +import { DocsLink } from 'src/reusable' const Modals = () => { @@ -30,25 +31,17 @@ const Modals = () => { Bootstrap Modals + setModal(!modal)} className="mr-1" - color="secondary" >Launch demo modal - setLarge(!large)} - className="mr-1" - color="secondary" - > + setLarge(!large)} className="mr-1"> Launch large modal - setSmall(!large)} - className="mr-1" - color="secondary" - > + setSmall(!large)} className="mr-1"> Launch small modal { @@ -65,6 +66,7 @@ const Toaster = () => { Toasts. + diff --git a/src/views/theme/colors/Colors.js b/src/views/theme/colors/Colors.js index 3da191c..9357fc8 100644 --- a/src/views/theme/colors/Colors.js +++ b/src/views/theme/colors/Colors.js @@ -1,7 +1,15 @@ import React, { useEffect, useState, createRef } from 'react' import classNames from 'classnames' -import { CRow, CCol } from '@coreui/react' +import { + CRow, + CCol, + CCard, + CCardHeader, + CCardBody +} from '@coreui/react' import { rgbToHex } from '@coreui/utils' +import { DocsLink } from 'src/reusable' + const ThemeView = () => { const [color, setColor] = useState('rgb(255, 255, 255)') @@ -43,11 +51,12 @@ const ThemeColor = ({className, children}) => { const Colors = () => { return ( <> -
-
+ + Theme colors -
-
+ + +
Brand Primary Color
@@ -74,13 +83,13 @@ const Colors = () => {
Brand Dark Color
 -
-
-
-
+ + + + Grays -
-
+ +
Gray 100 Color
@@ -110,8 +119,8 @@ const Colors = () => {
Gray 900 Color
 -
-
+ + ) } diff --git a/src/views/theme/typography/Typography.js b/src/views/theme/typography/Typography.js index 5b5645d..09025e7 100644 --- a/src/views/theme/typography/Typography.js +++ b/src/views/theme/typography/Typography.js @@ -1,13 +1,20 @@ import React from 'react' +import { + CCard, + CCardHeader, + CCardBody +} from '@coreui/react' +import { DocsLink } from 'src/reusable' const Typography = () => { return ( <> -
-
+ + Headings -
-
+ + +

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

@@ -55,15 +62,18 @@ const Typography = () => {
-
-
-
-
+ + + + Headings -
-
-

.h1 through .h6 classes are also available, for when you - want to match the font styling of a heading but cannot use the associated HTML element.

+ + +

.h1 through + .h6 + classes are also available, for when you + want to match the font styling of a heading but cannot use the + associated HTML element.

h1. Bootstrap heading

h2. Bootstrap heading

@@ -72,9 +82,9 @@ const Typography = () => {

h5. Bootstrap heading

h6. Bootstrap heading

-
-
-
+ + +
Display headings
@@ -100,12 +110,12 @@ const Typography = () => {
- -
-
+ + + Inline text elements -
-
+ +

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

@@ -124,13 +134,13 @@ const Typography = () => {

This line rendered as bold text.

This line rendered as italicized text.

-
-
-
-
+ + + + Description list alignment -
-
+ +

Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a .text-truncate class to truncate the text with an ellipsis.

@@ -159,8 +169,8 @@ const Typography = () => {
-
-
+ + ) }