Docs updates improvements mar 30 2025 (#1005)

Author: kotAPI

docs/app/docs/components/accordion/docs/accordion_anatomy.tsx renamed to docs/app/docs/components/accordion/docs/anatomy.tsx

@@ -7,7 +7,7 @@ const example_1_SourceCode = await getSourceCodeFromPath('docs/app/docs/componen
 
 
 const scss_SourceCode = await getSourceCodeFromPath('styles/themes/components/accordion.scss');
-const anatomy_SourceCode = await getSourceCodeFromPath('docs/app/docs/components/accordion/docs/accordion_anatomy.tsx');
+const anatomy_SourceCode = await getSourceCodeFromPath('docs/app/docs/components/accordion/docs/anatomy.tsx');
 
 export const code = {
  javascript: {

docs/app/docs/components/accordion/docs/codeUsage.js

@@ -16,5 +16,5 @@ import {code, anatomy, keyboardShortcuts} from "./docs/codeUsage"
  <Documentation.Anatomy code={anatomy.code} />
 
  {/* Keyboard Shortcuts */}
- <Documentation.KeyboardShortcuts keyboardShortcuts={keyboardShortcuts} />
+ <Documentation.Table title="Keyboard Interactions" columns={keyboardShortcuts.columns} data={keyboardShortcuts.data} />
 </Documentation>

docs/app/docs/components/accordion/page.mdx

@@ -8,7 +8,7 @@ import CodeBlock from '@/components/layout/Documentation/helpers/CodeBlock';
 import ComponentHero from '@/components/layout/Documentation/helpers/ComponentHero/ComponentHero';
 import ComponentFeatures from '@/components/layout/Documentation/helpers/ComponentFeatures/ComponentFeatures';
 import { BookMarkLink } from '@/components/layout/Documentation/utils';
-import KeyboardInteractionsTable from './helpers/KeyboardInteractionsTable';
+
 
 
 const LeftArrow = () => {
@@ -65,9 +65,7 @@ const UnderConstruction = ({ children }) => {
  </div>;
 };
 
-const KeyboardShortcuts = ({ keyboardShortcuts }) => {
- return <KeyboardInteractionsTable columns={keyboardShortcuts.columns} data={keyboardShortcuts.data} />
-};
+
 
 Documentation.UnderConstruction = UnderConstruction;
 Documentation.Anatomy = Anatomy;
@@ -76,6 +74,5 @@ Documentation.ComponentHero = ComponentHero;
 Documentation.ComponentFeatures = ComponentFeatures;
 Documentation.CodeBlock = CodeBlock;
 Documentation.Table = DocsTable;
-Documentation.KeyboardShortcuts = KeyboardShortcuts;
 
 export default Documentation;

docs/components/layout/Documentation/Documentation.js

@@ -30,7 +30,7 @@ const renderElement = (element, index) => {
  }
 };
 
-const CodeBlock = ({ children, language = 'jsx' }) => {
+const CodeBlock = ({ children, inline=false, language = 'jsx' }) => {
  const [expanded, setExpanded] = useState(false);
  let code = refractor.highlight(children, language);
  code = code.children.map((child, index) => renderElement(child, index));
@@ -39,25 +39,46 @@ const CodeBlock = ({ children, language = 'jsx' }) => {
  const copyContent = children
  .replace(/\n{2,}/g, '\n') // Replace multiple newlines with single newline
  .trim(); // Remove leading/trailing whitespace
- 
+
+ let height = 'auto';
+ let maxHeight = 'auto';
+
+ if(expanded) {
+ if(!inline){
+ height = 'auto';
+ maxHeight = 640;
+ }
+ 
+ }
+ else{
+ if(!inline){
+ height = 180;
+ maxHeight = 640;
+ }
+
+ 
+
+ }
  return (
  <pre className="relative mb-8">
  <div className="relative ">
  <code className={`language-${language} whitespace-pre-wrap`} style={{ wordBreak: 'break-word' }}
  style={{
- height: expanded ? 'auto' : 180,
- maxHeight: 640,
+ height: height,
+ maxHeight: maxHeight,
  overflowY: expanded ? 'scroll' : 'hidden',
- 
  }}
  >{code}</code>
- {!expanded && <div className="code-block-blur"></div>}
- <div className="flex justify-center w-full bg-gradient-to-t from-background to-transparent bg-gray-100 px-4 py-2">
- 
- <Button size="small" onClick={() => setExpanded(!expanded)}>
- Show {expanded ? 'less' : 'more'}
- </Button>
- </div>
+ {!inline && <>
+ {!expanded && <div className="code-block-blur"></div>}
+ <div className="flex justify-center w-full bg-gradient-to-t from-background to-transparent bg-gray-100 px-4 py-2">
+ 
+ <Button size="small" onClick={() => setExpanded(!expanded)}>
+ Show {expanded ? 'less' : 'more'}
+ </Button>
+ </div>
+ </>}
+ 
  </div>
  <span className="absolute top-2 right-2">
  <Tooltip label="Copy" placement="bottom">

docs/components/layout/Documentation/helpers/CodeBlock.js

@@ -5,9 +5,10 @@ import Heading from '@radui/ui/Heading';
 
 
 const DocsTable = ({ title = 'API Documentation', columns = [], data = [] }) => {
- return <div>
- <BookMarkLink id="api-documentation"> <Heading as="h6" className="mb-4">{title}</Heading> </BookMarkLink>
-
+ return <div className="my-10">
+ <div className="mb-4">
+ <BookMarkLink id="api-documentation"> <Heading as="h6">{title}</Heading> </BookMarkLink>
+ </div>
  <Table.Root>
  <Table.Head>
  <Table.Row>

docs/components/layout/Documentation/helpers/DocsTable.js

@@ -34,7 +34,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
  <Text className="text-gray-1000 inline-block font-bold" >{children}</Text>
  ),
  code: ({ children }) => (
- <Documentation.CodeBlock>
+ <Documentation.CodeBlock inline>
  {children}
  </Documentation.CodeBlock>
  ),

docs/components/layout/Documentation/helpers/KeyboardInteractionsTable.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import Popper from '~/components/tools/Popper/Popper';
 
 // TODO: fix any
 export type DropdownProps ={
@@ -16,9 +15,9 @@ const Dropdown = ({ list = [], selected }: DropdownProps) => {
  </ul>;
  };
  return <div className='relative'>
- <Popper open={false} placement="bottom-start" popperName="dropdown" pop={<PopElem/>}>
-  <span>Dropdown</span>
- </Popper>
+
+ <span>Dropdown</span>
+
  </div>;
 };
 

docs/mdx-components.tsx

@@ -1,25 +1,17 @@
+'use client';
 import React from 'react';
-import Popper, { PopperProps } from '~/components/tools/Popper/Popper';
 
-const COMPONENT_NAME = 'Tooltip';
+import TooltipRoot from './fragments/TooltipRoot';
+import TooltipTrigger from './fragments/TooltipTrigger';
+import TooltipContent from './fragments/TooltipContent';
 
-type TooltipProps = {
- children: React.ReactNode;
- label?: string;
- placement?: PopperProps['placement'];
-} & JSX.IntrinsicElements['span'];
-
-const Tooltip = ({ children, label = '', placement = 'top', ...props }: TooltipProps) => {
- return (
- <Popper
- popperName={COMPONENT_NAME}
- pop={label}
- placement={placement}
- {...props}
- >
- {children}
- </Popper>
- );
+const Tooltip = () => {
+ console.warn('Direct usage of Tabs is not supported. Please use Tabs.Root, Tabs.List, etc. instead.');
+ return null;
 };
 
+Tooltip.Root = TooltipRoot;
+Tooltip.Trigger = TooltipTrigger;
+Tooltip.Content = TooltipContent;
+
 export default Tooltip;