Fix Letter spacing for fonts + Docs improvements (#998)

Author: kotAPI

.github/workflows/build-rad-ui.yml

@@ -3,7 +3,10 @@ name: Build RAD UI
 on:
   pull_request:
     branches: [ main, security-fixes ]
-
+    paths:
+      - 'src/components/ui/**'  # Only run when files in this directory change
+      - 'styles/**'
+      - 'package.json'
 jobs:
   build:
     runs-on: ubuntu-latest

.github/workflows/chromatic.yml

@@ -4,6 +4,9 @@ on:
   push:
     branches:
       - main  # Adjust this if your main branch has a different name
+    paths:
+      - 'src/components/ui/**'  # Only run when files in this directory change
+      - 'styles/**'
   # pull_request: # No need for PRs for now
   #   branches:
   #     - main  # Adjust this if your main branch has a different name

docs/app/docs/layout.tsx

@@ -18,9 +18,12 @@ const Layout = ({  children }: Doc) => {
             </div>
             <div className='text-gray-1000 flex flex-col overflow-y-auto flex-1' id="docs-content">
                 <div className=' p-4 md:mx-auto md:max-w-[1440px] w-full'>
+                    <div className="w-full max-w-screen-lg mx-auto">
                     <PageDetails  />
                     {children}
                     <EditPageOnGithub />
+                    </div>
+                   
                 </div>
             </div>
         </div>

docs/app/docs/page.mdx

@@ -1,7 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap';
 
+body {
+  font-family: Inter, sans-serif;
+}
 
 
 

docs/app/globals.scss

@@ -20,7 +20,7 @@ const RightArrow = () => {
 };
 
 const Documentation = ({ title = '', description = '', currentPage = undefined, children }) => {
-    return <div className='w-full max-w-screen-lg mx-auto'>
+    return <div>
         <div>
             <div className='flex items-center space-x-4'>
                 <BookMarkLink id={title}> <Heading>{title}</Heading> </BookMarkLink>

docs/components/layout/Documentation/Documentation.js

@@ -38,7 +38,7 @@ const CodeBlock = ({ children, language = 'jsx' }) => {
         .trim(); // Remove leading/trailing whitespace
 
     return (
-        <pre className="relative">
+        <pre className="relative mb-8">
             <code className={`language-${language} whitespace-pre-wrap`} style={{ wordBreak: 'break-word' }}>{code}</code>
            <span className="absolute top-2 right-2">
            <Tooltip label="Copy" placement="bottom">

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

@@ -3,47 +3,46 @@ import React from 'react';
 import { clsx } from 'clsx';
 import { customClassSwitcher } from '~/core';
 
-const RENDER_AS_ENUMS = [
-    {
-        label: 'H1',
-        tag: 'h1'
-    },
-    {
-        label: 'H2',
-        tag: 'h2'
-    },
-    {
-        label: 'H3',
-        tag: 'h3'
-    },
-    {
-        label: 'H4',
-        tag: 'h4'
-    },
-    {
-        label: 'H5',
-        tag: 'h5'
-    },
-    {
-        label: 'H6',
-        tag: 'h6'
-    }
-];
+export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
+/**
+ * Heading component that renders HTML heading elements (h1-h6)
+ * with customizable styling.
+ */
 export type HeadingProps = {
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** HTML heading tag to render */
+    as?: HeadingTag;
+    /** Custom root class for specialized styling */
     customRootClass?: string;
+    /** Additional class names to apply */
     className?: string;
+    /** Content of the heading */
     children?: React.ReactNode;
-    props?: any;
-};
+} & React.HTMLAttributes<HTMLHeadingElement>;
 
-const Heading = ({ children, as = 'h1', customRootClass = '', className = '', ...props }: HeadingProps) => {
-    const rootClass = customClassSwitcher(customRootClass, as || 'h1');
+/**
+ * Renders a heading element with customizable tag and styling
+ */
+const Heading = ({
+    children,
+    as = 'h1',
+    customRootClass = '',
+    className = '',
+    ...props
+}: HeadingProps) => {
+    const rootClass = customClassSwitcher(customRootClass, as);
 
-    const tag = RENDER_AS_ENUMS.find((item) => item.tag === as) ? as : 'h1';
-    return React.createElement(tag, { className: clsx(rootClass, className), ...props }, children);
+    // Check if the heading tag is valid
+    if (!['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(as)) {
+        as = 'h1';
+    }
+
+    return React.createElement(as, {
+        className: clsx(rootClass, className),
+        ...props
+    }, children);
 };
+
 Heading.displayName = 'Heading';
 
 export default Heading;

src/components/ui/Heading/Heading.tsx

@@ -2,40 +2,39 @@
 .rad-ui-h1{
     font-weight: bold;
     font-size: 60px;
-    letter-spacing: -3.5px;
+    letter-spacing: -3px;
     line-height:72px;
 }
 
 .rad-ui-h2{
     font-weight: bold;
     font-size: 35px;
-    letter-spacing: -3px;
+    letter-spacing: -1px;
     line-height:42px;
 }
 
 .rad-ui-h3{
     font-weight: bold;
     font-size: 28px;
-    letter-spacing: -2px;
     line-height:34px;
 }
 
 .rad-ui-h4{
     font-weight: bold;
     font-size: 24px;
-    letter-spacing: -1px;
     line-height:24px;
 }
 
 .rad-ui-h5{
     font-weight: bold;
     font-size: 20px;
-    letter-spacing: -0.5px;
+    letter-spacing: 1px;
     line-height:24px;
 }
 
 .rad-ui-h6{
     font-weight: bold;
     font-size: 18px;
     line-height:24px;
+    letter-spacing: 1px;
 }