docs: add dark mode, update components, update styles

Author: mrholek

packages/docs/package.json

@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@coreui/chartjs": "^3.1.1",
-    "@coreui/coreui": "^4.2.6",
+    "@coreui/coreui": "4.3.0-alpha.0",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.1.0",
     "@coreui/react-chartjs": "^2.1.2",

packages/docs/src/AppContext.tsx

@@ -4,6 +4,8 @@ export interface AppContextProps {
   name?: string
   sidebarVisible?: boolean | undefined
   setSidebarVisible?: React.Dispatch<React.SetStateAction<boolean | undefined>>
+  storedTheme?: string | undefined
+  setStoredTheme?: React.Dispatch<React.SetStateAction<string | undefined>>
 }
 
 export const AppContextInitialState: AppContextProps = {

packages/docs/src/assets/coreui-react.svg

@@ -0,0 +1,19 @@
+import React, { FC, ReactNode } from 'react'
+interface CalloutProps {
+  children: ReactNode
+  color: string
+  title?: string
+}
+
+const Callout: FC<CalloutProps> = ({ children, color, title }) => {
+  return (
+    <div className={`docs-callout docs-callout-${color}`}>
+      {title && <h5>{title}</h5>}
+      {children}
+    </div>
+  )
+}
+
+Callout.displayName = 'Callout'
+
+export default Callout

packages/docs/src/components/Callout.tsx

@@ -12,13 +12,12 @@ const CodeBlock: FC<CodeBlockProps> = ({ children }) => {
     : 'jsx'
 
   return (
-    <div className="code mb-4">
+    <div className="highlight">
       <Highlight {...defaultProps} theme={undefined} code={_children?.trim()} language={language}>
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
           <pre className={className} style={{ ...style }}>
             {tokens.map((line, i) => (
               <div key={i} {...getLineProps({ line, key: i })}>
-                <span className="line-no">{i + 1}</span>
                 {line.map((token, key) => (
                   <span key={key} {...getTokenProps({ token, key })} />
                 ))}

packages/docs/src/components/CodeBlock.tsx

@@ -7,9 +7,7 @@ interface ExampleProps {
 const Example: FC<ExampleProps> = ({ children, className, ...rest }) => {
   return (
     <div
-      className={`docs-example border ${className} ${
-        className && className.includes('p-') ? '' : 'p-3'
-      }`}
+      className={`docs-example ${className} ${className && className.includes('p-') ? '' : 'p-3'}`}
       {...rest}
     >
       {children}