Published: Keep React Version 1.4.0.

* Updated: Keep react update v1.4.0. * Added: Chart New Style added. * Updated: Sidebar component updated. * Added: Color code added. * Update: Update docuemtation and file structure. * Remove: Tree component and documentation. * Added: Dark Mode version. * Fixed: All Issue and test package for release. * Added: Dark Mode page added. * Fixed: Date Picker Dark Mode Issue Fixed.
StaticMania · Jun 24, 2024 · 0b2ff9e · 0b2ff9e
1 parent aad2f82
commit 0b2ff9e
Show file tree

Hide file tree

Showing 539 changed files with 10,847 additions and 12,262 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -8,6 +8,7 @@
         "endOfLine": "auto"
       }
     ],
-    "@next/next/no-img-element": "off"
+    "@next/next/no-img-element": "off",
+    "no-unused-vars": "off"
   }
 }
diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
@@ -19,13 +19,12 @@ const page = async ({ params }: { params: { slug: string } }) => {
 
   return (
     <section>
-      <div className="bg-metal-100 py-20">
-        <h1 className="text-center text-heading-5 font-medium text-metal-900">{title}</h1>
-      </div>
       <div className="mx-auto my-12 max-w-7xl px-6 text-center 2xl:px-0">
-        <div className="text-left">
-          <p className="text-body-5 font-medium text-primary-500">{date}</p>
-          <div className="mt-3">
+        <div className="py-12 text-left">
+          <p className="mb-1 text-body-3 font-medium text-primary-500">{date}</p>
+          <p className="text-heading-5 font-medium text-metal-900 dark:text-white">{title}</p>
+          <hr className="my-5 block border-b border-b-metal-100 dark:border-b-metal-800" />
+          <div className="mt-10">
             <Markdown className="post">{post.content}</Markdown>
           </div>
         </div>

diff --git a/app/blog/page.tsx b/app/blog/page.tsx
@@ -6,14 +6,19 @@ const page = () => {
 
   return (
     <section>
-      <div className="bg-metal-100 py-20">
-        <div className="mx-auto max-w-7xl px-6 text-center 2xl:px-0">
-          <h1 className="text-heading-5 font-medium text-metal-900">The latest Keep React news</h1>
-        </div>
-      </div>
-      <div className="mx-auto mt-12 max-w-7xl px-6 text-center 2xl:px-0">
-        <div className="grid grid-cols-1 gap-5 lg:grid-cols-2 xl:grid-cols-4">
-          {blogs?.map((blog) => <Blog key={blog.slug} {...blog} />)}
+      <div className="-mt-2 py-20 ">
+        <div className="mx-auto max-w-7xl px-6 2xl:px-0">
+          <div className="max-w-md space-y-3">
+            <h1 className="text-heading-5 font-semibold text-metal-900 dark:text-white">
+              Stay Updated with the Latest Keep React Library
+            </h1>
+            <p className="text-body-3 text-metal-600 dark:text-metal-300">
+              Keep React library continues to evolve with new features, bug fixes, and performance improvements.
+            </p>
+          </div>
+          <div className="mt-12 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {blogs?.map((blog) => <Blog key={blog.slug} {...blog} />)}
+          </div>
         </div>
       </div>
     </section>

diff --git a/app/components/Blog.tsx b/app/components/Blog.tsx
@@ -1,29 +1,28 @@
 'use client'
 import Link from 'next/link'
 import { FC } from 'react'
-import { Badge, Card } from '../src'
+import { Card, CardContent, CardTitle } from '../src'
 
 export interface BlogProps {
   [key: string]: any
 }
 
-const Blog: FC<BlogProps> = ({ title, description, date, keyFeatures, slug }) => {
+const Blog: FC<BlogProps> = ({ title, date, keyFeatures, slug }) => {
   return (
     <Card className="max-w-full lg:col-span-1">
-      <Card.Content className="space-y-3 text-left">
-        <Badge>{date}</Badge>
-        <Card.Title>{title}</Card.Title>
-        <Card.Description>{description}</Card.Description>
-        <ul className="!mt-4 ml-5 list-disc space-y-1 text-body-4 font-normal text-metal-600">
+      <CardContent className="flex flex-col justify-between gap-y-3 text-left">
+        <p className="text-body-4 text-metal-600 dark:text-white">{date}</p>
+        <CardTitle>{title}</CardTitle>
+        <ul className="!mt-4 ml-5 list-disc space-y-1 text-body-4 font-normal text-metal-600 dark:text-metal-300">
           {keyFeatures?.map((item: string) => <li key={item}>{item}</li>)}
         </ul>
 
         <Link
           href={`/blog/${slug}`}
-          className="flex w-full items-center justify-center rounded-lg bg-metal-900 px-5 py-2.5 text-body-4 font-medium text-white transition-all duration-150 hover:bg-metal-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-metal-200 focus-visible:ring-offset-2 active:focus:scale-95 disabled:cursor-not-allowed disabled:bg-metal-200">
+          className="flex w-full items-center justify-center rounded-lg bg-metal-900 px-5 py-2.5 text-body-4 font-medium text-white transition-all duration-150 hover:bg-metal-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-metal-200 focus-visible:ring-offset-2 active:focus:scale-95 disabled:cursor-not-allowed disabled:bg-metal-200 dark:bg-metal-800">
           Read More
         </Link>
-      </Card.Content>
+      </CardContent>
     </Card>
   )
 }

diff --git a/app/components/CodePreview.tsx b/app/components/CodePreview.tsx
@@ -1,5 +1,6 @@
 'use client'
 import Image from 'next/image'
+import Link from 'next/link'
 import { Check, Clipboard } from 'phosphor-react'
 import { ReactNode, useState } from 'react'
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
@@ -13,15 +14,17 @@ interface CodePreviewProps {
   github?: string
   className?: string
   activeTab?: number
+  hasData?: boolean
+  data?: any
 }
 
-const CodePreview = ({ children, code, github, className, activeTab }: CodePreviewProps) => {
-  const [active, setActive] = useState(activeTab ? activeTab : 0)
+const CodePreview = ({ children, code, github, className, activeTab, hasData, data }: CodePreviewProps) => {
+  const [active, setActive] = useState(activeTab ?? 0)
   const { copy, copyToClipboard } = useCopy()
   const githubUrl = `https://github.com/StaticMania/keep-react/tree/main/app/src/components/${github}`
 
   return (
-    <div className="my-10 w-full overflow-hidden rounded-xl border border-metal-200 shadow-small">
+    <div className="my-10 w-full overflow-hidden rounded-xl border border-metal-200 shadow-small dark:border-metal-800">
       <div className="-mb-px flex flex-wrap border-b border-metal-200 bg-metal-900 px-5 text-center">
         <button
           type="button"
@@ -40,19 +43,30 @@ const CodePreview = ({ children, code, github, className, activeTab }: CodePrevi
           }`}>
           Code
         </button>
+
+        {hasData ? (
+          <button
+            id="code-btn"
+            onClick={() => setActive(2)}
+            className={` flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-4 font-medium  text-metal-400 first:ml-0 ${
+              active === 2 ? '!border-b-metal-100 text-white' : ''
+            }`}>
+            Data
+          </button>
+        ) : null}
       </div>
 
       <div>
-        {active ? (
+        {active === 1 && (
           <div className="relative">
             <div className="absolute -top-10 right-3 flex items-center justify-between gap-3 md:top-5 lg:right-10">
-              <a
+              <Link
                 id="github-page-link"
                 target="_blank"
                 href={githubUrl}
                 className=" flex h-8 w-8 items-center justify-center rounded-md bg-metal-800 transition-all duration-300 hover:bg-metal-700 md:h-9 md:w-9">
                 <Image src="/images/icon/github-white.svg" height={20} width={20} alt="github" />
-              </a>
+              </Link>
               <button
                 className="flex h-8 w-8 items-center justify-center rounded-md border-2 border-metal-800 bg-metal-900 transition-all duration-300 hover:border-transparent hover:bg-metal-700 md:h-9 md:w-9"
                 onClick={() => copyToClipboard(code)}>
@@ -83,11 +97,40 @@ const CodePreview = ({ children, code, github, className, activeTab }: CodePrevi
               {code.trim()}
             </SyntaxHighlighter>
           </div>
-        ) : (
-          <div className={cn('flex w-full items-center justify-center bg-white px-2 py-3 md:p-6', className)}>
+        )}
+
+        {active === 0 && (
+          <div
+            className={cn(
+              'flex w-full items-center justify-center bg-white px-2 py-3 dark:bg-black md:p-6',
+              className,
+            )}>
             <div className="h-full w-full overflow-auto">{children}</div>
           </div>
         )}
+
+        {active === 2 && (
+          <div>
+            <SyntaxHighlighter
+              language="javascript"
+              style={coldarkDark}
+              showLineNumbers
+              customStyle={{
+                maxHeight: '420px',
+                borderRadius: '0px',
+                paddingLeft: '40px',
+                paddingBottom: '20px',
+                marginTop: '0px',
+                marginBottom: '0px',
+                background: '#1C222B',
+                fontSize: '14px',
+                lineHeight: '22px',
+                letterSpacing: '-0.2px',
+              }}>
+              {data.trim()}
+            </SyntaxHighlighter>
+          </div>
+        )}
       </div>
     </div>
   )

diff --git a/app/components/Community.tsx b/app/components/Community.tsx
@@ -2,7 +2,7 @@
 import Link from 'next/link'
 import { ArrowLineUpRight } from 'phosphor-react'
 import { useEffect, useState } from 'react'
-import { Avatar } from '../src'
+import { Avatar, AvatarGroup } from '../src'
 
 interface Contributor {
   login: string
@@ -36,8 +36,10 @@ const Community = () => {
     <section className="community py-20">
       <div className="mx-auto max-w-7xl px-6 py-6 2xl:px-0">
         <div className="mb-12 text-center">
-          <h4 className="mb-1 text-body-1 !font-semibold text-black lg:text-heading-5">Join The Community</h4>
-          <p className="mx-auto max-w-sm text-body-4 font-normal text-metal-600 md:text-body-3">
+          <h4 className="mb-1 text-body-1 !font-semibold text-black dark:text-white lg:text-heading-5">
+            Join The Community
+          </h4>
+          <p className="mx-auto max-w-sm text-body-4 font-normal text-metal-600 dark:text-metal-300 md:text-body-3">
             Become a member of a community of developers by supporting Keep React
           </p>
         </div>
@@ -47,7 +49,7 @@ const Community = () => {
               <div className="my-20">
                 <div>
                   {contributors?.length ? (
-                    <Avatar.Group>
+                    <AvatarGroup>
                       {contributors?.map((user) => (
                         <Avatar
                           key={user?.id}
@@ -57,7 +59,7 @@ const Community = () => {
                           className="border-2 border-[#9686E5] p-0"
                         />
                       ))}
-                    </Avatar.Group>
+                    </AvatarGroup>
                   ) : null}
                 </div>
                 <div className="mt-3">

diff --git a/app/components/ComponentApi.tsx b/app/components/ComponentApi.tsx
@@ -19,37 +19,45 @@ const spaceMono = Space_Mono({ subsets: ['latin'], weight: ['400'] })
 const ComponentApi: FC<ComponentProps> = ({ data }) => {
   return (
     <div className={spaceMono.className + 'mx-auto w-full overflow-auto'}>
-      <table className="whitespace-no-wrap z-50 mt-10 min-w-max table-auto overflow-hidden rounded-lg bg-white text-left md:w-full lg:min-w-min">
+      <table className="whitespace-no-wrap z-50 mt-10 min-w-max table-auto overflow-hidden rounded-xl bg-white text-left dark:bg-metal-900 md:w-full lg:min-w-min">
         <thead>
           <tr>
-            <th className="rounded-bl rounded-tl bg-metal-50 px-4  py-3 text-body-4 font-medium text-metal-900">
+            <th className="rounded-bl rounded-tl bg-metal-50 px-4  py-3 text-body-4 font-medium text-metal-900 dark:bg-white dark:text-metal-900">
               Property
             </th>
-            <th className="bg-metal-50 px-4 py-3 text-body-4 font-medium text-metal-900">Description</th>
-            <th className="bg-metal-50 px-4  py-3 text-body-4 font-medium text-metal-900">Type</th>
-            <th className="rounded-br  bg-metal-50 px-4 py-3 text-body-4 font-medium text-metal-900">Default</th>
+            <th className="bg-metal-50 px-4 py-3 text-body-4 font-medium text-metal-900 dark:bg-white dark:text-metal-900">
+              Description
+            </th>
+            <th className="bg-metal-50 px-4  py-3 text-body-4 font-medium text-metal-900 dark:bg-white dark:text-metal-900">
+              Type
+            </th>
+            <th className="rounded-br  bg-metal-50 px-4 py-3 text-body-4 font-medium text-metal-900 dark:bg-white dark:text-metal-900">
+              Default
+            </th>
           </tr>
         </thead>
         <tbody>
           {data?.map((item) => {
             return (
               <tr key={item.id}>
-                <td className="border-t border-metal-100 px-4 py-3 text-body-4 !font-medium text-black">
+                <td className="border-t border-metal-100 px-4 py-3 text-body-4 !font-medium text-black dark:border-metal-800 dark:text-metal-300">
                   {item.propsName}
                 </td>
-                <td className="border-t border-metal-100 px-4 py-3 text-body-4 text-metal-400">
+                <td className="border-t border-metal-100 px-4 py-3 text-body-4 text-metal-400 dark:border-metal-800 dark:text-metal-300">
                   {item.propsDescription}
                 </td>
-                <td className="border-t border-metal-100 px-4 py-3 text-body-4 text-metal-400">
+                <td className="border-t border-metal-100 px-4 py-3 text-body-4 text-metal-400 dark:border-metal-800 dark:text-metal-300">
                   {typeof item.propsType === 'string'
                     ? item.propsType
                     : item?.propsType?.map((prop) => (
-                        <pre key={prop} className="m-0.5 inline-block rounded-lg bg-metal-100 px-2 py-0.5 ">
+                        <pre
+                          key={prop}
+                          className="m-0.5 inline-block rounded-xl bg-metal-100 px-2 py-0.5 dark:bg-metal-800">
                           {prop}
                         </pre>
                       ))}
                 </td>
-                <td className="border-t border-metal-100 px-4 py-3 text-body-4 text-metal-400">
+                <td className="border-t border-metal-100 px-4 py-3 text-body-4 text-metal-400 dark:border-metal-800 dark:text-metal-300">
                   {item.default ? item.default : 'None'}
                 </td>
               </tr>

diff --git a/app/components/ComponentUI.tsx b/app/components/ComponentUI.tsx
@@ -9,10 +9,10 @@ const ComponentUI = () => {
       <div className="mx-auto max-w-7xl px-6 2xl:px-0">
         <div className="my-5 flex items-center justify-between">
           <div className="mx-auto mb-4 px-5 text-center md:max-w-xl md:px-0">
-            <h2 className="mb-3 text-body-1 !font-semibold text-black lg:text-heading-5">
+            <h2 className="mb-3 text-body-1 !font-semibold text-black dark:text-white lg:text-heading-5">
               Design Excellence with Our React Component Library
             </h2>
-            <p className="text-body-5 font-normal leading-6 text-metal-600 md:text-body-3">
+            <p className="text-body-5 font-normal leading-6 text-metal-600 dark:text-metal-300 md:text-body-3">
               Explore our library of 40+ open-source React UI components and interactive elements, empowering you to
               create stunning web projects effortlessly.
             </p>
@@ -25,7 +25,7 @@ const ComponentUI = () => {
               <Link
                 href={href}
                 key={id}
-                className="flex items-center gap-2.5 rounded-xl border border-dashed border-metal-200 bg-white px-5 py-2.5 transition-all duration-300 hover:bg-metal-900 hover:text-white md:px-8 md:py-4">
+                className="flex items-center gap-2.5 rounded-xl border border-dashed border-metal-200 bg-white px-5 py-2.5 transition-all duration-300 hover:bg-metal-900 hover:text-white dark:bg-metal-900 dark:hover:bg-metal-800 md:px-8 md:py-4">
                 {Icon && <Icon size="18" />}
                 {item.name}
               </Link>
@@ -35,7 +35,7 @@ const ComponentUI = () => {
         <div className="mt-9 flex items-center justify-center">
           <Link
             href="/docs/getting-started/introduction"
-            className="flex items-center gap-2 rounded-lg border border-dashed border-metal-200 bg-white px-6 py-2.5 transition-all duration-300 hover:bg-metal-900 hover:text-white">
+            className="flex items-center gap-2 rounded-lg border border-dashed border-metal-200 bg-white px-6 py-2.5 transition-all duration-300 hover:bg-metal-900 hover:text-white dark:bg-metal-900 dark:hover:bg-metal-800">
             View All Component <ArrowUpRight size={18} />
           </Link>
         </div>

diff --git a/app/components/CopyCode.tsx b/app/components/CopyCode.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import useCopy from '../../hooks/useCopy'
-import { Skeleton } from '../src'
+import { Skeleton, SkeletonLine } from '../src'
 
 const CopyCode = ({ code }: { code: string }) => {
   const { copy, copyToClipboard } = useCopy()
@@ -33,7 +33,7 @@ const CopyCode = ({ code }: { code: string }) => {
         </SyntaxHighlighter>
       ) : (
         <Skeleton animation={true}>
-          <Skeleton.Line className="h-[60px]" />
+          <SkeletonLine className="h-[60px]" />
         </Skeleton>
       )}
       <button onClick={() => copyToClipboard(code)} className="absolute right-5 top-5 cursor-pointer">