feat(documentation): documentation updated

resolves #23

example/index.css

@@ -1,7 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 
 @layer base {
   :root {
@@ -50,12 +50,23 @@
   }
 }
 
- 
+
 @layer base {
   * {
     @apply border-border;
   }
+
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground scroll-smooth;
+  }
+
+  pre {
+    @apply overflow-x-auto rounded-lg p-4;
+  }
+
+  code,
+  pre {
+    line-height: 1.5;
   }
+
 }

example/package.json

@@ -18,7 +18,11 @@
     "clsx": "^2.1.0",
     "lucide-react": "^0.306.0",
     "react-app-polyfill": "^3.0.0",
-    "react-code-blocks": "^0.1.5",
+    "rehype-pretty-code": "^0.13.2",
+    "rehype-stringify": "^10.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.0",
+    "shiki": "^1.12.0",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7"
   },

example/src/common/CodeSample.tsx

@@ -1,19 +1,36 @@
-import { CodeBlock, dracula } from 'react-code-blocks'
-import Usage from './Details/Usage'
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+import rehypePrettyCode from "rehype-pretty-code";
+import { useEffect, useRef } from "react";
 
 export default function CodeSample({ code }: any) {
+
+    const ref = useRef<any>();
+
+    useEffect(() => {
+        const process = async () => {
+
+            const processor = await unified()
+                .use(remarkParse)
+                .use(remarkRehype)
+                .use(rehypePrettyCode, {
+                    theme: 'rose-pine',
+                    grid: false
+                })
+                .use(rehypeStringify)
+                .process("```ts \n" + code);
+
+            if (ref.current)
+                ref.current.innerHTML = processor.toString();
+        }
+
+        process();
+
+    }, [code]);
+
     return (
-        <Usage title="Syntex">
-            <CodeBlock
-                customStyle={{
-                    padding: "0 0.1rem"
-                }}
-                theme={dracula}
-                text={code}
-                language="jsx"
-                wrapLongLines
-                showLineNumbers={false}
-            />
-        </Usage>
+        <div ref={ref}></div>
     )
 }

example/src/common/Details/Api.tsx

@@ -12,7 +12,7 @@ export default function Api({ api }: any) {
     return (
         <Table className='bg-white border-x border-b mt-4'>
             <TableHeader>
-                <TableRow className='bg-blue-600 hover:bg-blue-600'>
+                <TableRow className='bg-primary'>
                     <TableHead className="w-[100px] text-white">Api</TableHead>
                     <TableHead className='text-white w-1/4'>Type</TableHead>
                     <TableHead className='text-white'>Description</TableHead>

example/src/common/Details/Block.tsx

@@ -2,11 +2,7 @@ import { cn } from '@/lib/utils'
 
 export default function Block({ title, children, className, ...rest }: any) {
     return (
-        <div className={`${cn('mt-4 border rounded-md p-4 bg-slate-50', className)}`} {...rest}>
-            <p className='text-lg border-b pb-2 font-semibold tracking-wider mb-4 text-slate-800'>
-                {title}
-            </p>
-
+        <div className={`${cn('border rounded-md p-4 bg-slate-50', className)}`} {...rest}>
             {children}
         </div>
     )

example/src/common/Details/RedirectToExample.tsx

@@ -12,7 +12,7 @@ export default function RedirectToExample({ hook }: any) {
         <>
             <Button size="sm" className='mt-2'
                 onClick={() => {
-                    window.open(`${exampleCodeUrl}/${hook}/index.tsx`, '_blank');
+                    window.open(`${exampleCodeUrl}/${hook}/Demo.tsx`, '_blank');
                 }}
             >
                 Example Code

example/src/common/Details/Title.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 export default function Title({ children }: any) {
     return (
-        <h2 className="text-blue-600 scroll-m-20 mb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0">
+        <h2 className="text-primary scroll-m-20 mb-2 text-xl font-semibold tracking-tight transition-colors first:mt-0">
             {children}
         </h2>
     )

example/src/common/Documentation.tsx

@@ -1,27 +1,45 @@
-import React, { lazy, Suspense } from 'react'
+import React, { lazy, Suspense, useState } from 'react'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 
 const Title = lazy(() => import('@/common/Details/Title'));
-const Lead = lazy(() => import('@/common/Lead'));
 const CodeSample = lazy(() => import('@/common/CodeSample'));
 
 export default function Documentation({ hook, info, usage, children }: any) {
+    const [activeTab, setActiveTab] = useState('docs');
+
     return (
         <>
             <Suspense fallback={<></>}>
                 <Title>{hook}</Title>
             </Suspense>
 
             <Suspense fallback={<>Loading Code Block</>}>
-                <Lead className='text-md'>
+                <h2 className='text-sm'>
                     {info}
-                </Lead>
+                </h2>
             </Suspense>
 
-            <Suspense fallback={<></>}>
-                <CodeSample code={usage} />
-            </Suspense>
+            <Tabs defaultValue={activeTab} className="w-full" onValueChange={(newTab) => {
+                setActiveTab(newTab);
+            }}>
+                <TabsList className="w-full my-4">
+                    <TabsTrigger className="w-1/2" value="docs">Docs</TabsTrigger>
+                    <TabsTrigger className="w-1/2" value="demo">Demo</TabsTrigger>
+                </TabsList>
+                <TabsContent value="docs">
+                    <CodeSample code={usage} />
+                </TabsContent>
+                {
+                    activeTab === 'demo'
+                        ? <TabsContent value="demo">
+                            <div className='border rounded-md p-4 bg-slate-50'>
+                                {children}
+                            </div>
+                        </TabsContent>
+                        : ""
+                }
+            </Tabs>
 
-            {children}
         </>
     )
 }

example/src/hooks/useArray/Demo.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { useArray } from '../../../..';
+import { Button } from '@/components/ui/button';
+
+export default function Demo() {
+    const { array, set, push, remove, filter, update, clear } = useArray([1, 2, 3, 4, 5, 6])
+
+    return (
+        <>
+            <div>{array.join(", ")}</div>
+
+            <div className="flex flex-row flex-wrap gap-3 mt-2">
+                <Button size="sm" onClick={() => push(Math.floor(Math.random() * 50))}>Add random number</Button>
+                <Button size="sm" onClick={() => update(1, 9)}>Update 2nd element to 9</Button>
+                <Button size="sm" onClick={() => remove(1)}>Remove Second Element</Button>
+                <Button size="sm" onClick={() => filter((f: number) => f < 3)}>Keep numbers less than 3</Button>
+                <Button size="sm" onClick={() => set([1, 2])}>Set 1 to 2</Button>
+                <Button size="sm" onClick={clear}>Clear</Button>
+            </div>
+        </>
+    )
+}

example/src/hooks/useArray/index.tsx

@@ -1,35 +1,32 @@
 import { lazy, Suspense } from 'react';
-import { useArray } from '../../../..';
 import { packageName } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
+import Demo from './Demo';
+
 
-const Block = lazy(() => import('@/common/Details/Block'));
 const Documentation = lazy(() => import('@/common/Documentation'));
 
 const hook = 'useArray';
 const info = 'Useful to use methods of array like push, update, remove, filter, update, clear etc...';
 
 const usage: string = `import { ${hook} } from '${packageName}';
 
-export default function Component() {
-    /*
-        @params - Array - The datasource as an array
-
-        @returns
-            array - Array - Data on which operation to perform
-            set - function - Re-initialize the array with new data
-            push - function - Insert an element in array
-            remove - function - Remove an element from array
-            filter - function - Filter out the data from array ( This will mutate the source )
-            update - function - Update any element of array
-            clear - function - Clear whole array
-    */
-    const { array, set, push, remove, filter, update, clear } = ${hook}([DATA]);
-}`
+const { array, set, push, remove, filter, update, clear } = ${hook}([DATA]);
 
-export default function ArrayComponent() {
+/*
+    @params
+        Array - The datasource as an array
 
-    const { array, set, push, remove, filter, update, clear } = useArray([1, 2, 3, 4, 5, 6])
+    @returns
+        array - Array - Data on which operation to perform
+        set - function - Re-initialize the array with new data
+        push - function - Insert an element in array
+        remove - function - Remove an element from array
+        filter - function - Filter out the data from array ( This will mutate the source )
+        update - function - Update any element of array
+        clear - function - Clear whole array
+*/`
+
+export default function ArrayComponent() {
 
     return (
         <Suspense fallback={<></>}>
@@ -39,23 +36,10 @@ export default function ArrayComponent() {
                 info={info}
                 usage={usage}
             >
-                <Block title='Example'>
-
-                    <div>{array.join(", ")}</div>
-
-                    <div className="flex flex-row flex-wrap gap-3 mt-2">
-                        <Button size="sm" onClick={() => push(((Math.random() + 1) * 10).toFixed(0))}>Add random number</Button>
-                        <Button size="sm" onClick={() => update(1, 9)}>Update 2nd element to 9</Button>
-                        <Button size="sm" onClick={() => remove(1)}>Remove Second Element</Button>
-                        <Button size="sm" onClick={() => filter(f => f < 3)}>Keep numbers less than 3</Button>
-                        <Button size="sm" onClick={() => set([1, 2])}>Set 1 to 2</Button>
-                        <Button size="sm" onClick={clear}>Clear</Button>
-                    </div>
-                </Block>
 
+                <Demo />
 
             </Documentation>
-
         </Suspense>
     )
 }

example/src/hooks/useAsync/Demo.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { useAsync } from '../../../..';
+
+export default function Demo() {
+  const { loading, value, error } = useAsync(() => {
+    return new Promise((resolve, reject) => {
+      const success = true;
+
+      setTimeout(() => {
+        success ? resolve("Success") : reject("Error");
+      }, 1500)
+    })
+  })
+
+  return (
+    <>
+      <div>Loading: {loading.toString()}</div>
+
+      <div className="flex flex-row flex-wrap gap-3 mt-2">
+        <div className='text-green-600 font-semibold'>{value}</div>
+        <div className='text-red-600 font-semibold'>{error}</div>
+      </div>
+    </>
+  )
+}

example/src/hooks/useAsync/index.tsx

@@ -1,40 +1,28 @@
 import { lazy, Suspense } from 'react';
-import { useAsync } from '../../../..';
 import { packageName } from '@/lib/utils';
+import Demo from './Demo';
 
-const Block = lazy(() => import('@/common/Details/Block'));
 const Documentation = lazy(() => import('@/common/Documentation'));
 
 const hook = 'useAsync';
 const info = 'Hook to handle async method';
 
 const usage: string = `import { ${hook} } from '${packageName}';
 
-export default function Component() {
-    /*
-        @params
-            CALLBACK_FUNCTION - function - block of code to execute
-            DEPENDENCIES - Array<any> - Collection of dependencies, Callback function will execute when the value of any dependencies change
+const { loading, value, error } = ${hook}(CALLBACK_FUNCTION, [DEPENDENCIES]);
 
-        @returns
-            loading - boolean - Loading state ( true or false )
-            value - any - Data we get when async process completed with success response'
-            error - any - Data we get when async process rejected
-    */
-    const { loading, value, error } = ${hook}(CALLBACK_FUNCTION, [DEPENDENCIES]);
-}`
+/*
+    @params
+        CALLBACK_FUNCTION - function - block of code to execute
+        DEPENDENCIES - Array - Collection of dependencies, Callback function will execute when the value of any dependencies change
 
-export default function AsyncComponent() {
-
-    const { loading, value, error } = useAsync(() => {
-        return new Promise((resolve, reject) => {
-            const success = true;
+    @returns
+        loading - boolean - Loading state ( true or false )
+        value - any - Data we get when async process completed with success response'
+        error - any - Data we get when async process rejected
+*/`
 
-            setTimeout(() => {
-                success ? resolve("Success") : reject("Error");
-            }, 1500)
-        })
-    })
+export default function AsyncComponent() {
 
     return (
         <Suspense fallback={<></>}>
@@ -44,14 +32,7 @@ export default function AsyncComponent() {
                 info={info}
                 usage={usage}
             >
-                <Block title='Example'>
-                    <div>Loading: {loading.toString()}</div>
-
-                    <div className="flex flex-row flex-wrap gap-3 mt-2">
-                        <div className='text-green-600 font-semibold'>{value}</div>
-                        <div className='text-red-600 font-semibold'>{error}</div>
-                    </div>
-                </Block>
+                <Demo />
             </Documentation>
 
         </Suspense>