Update: Keep React Version 1.6.0

.vscode/settings.json

@@ -1,4 +1,8 @@
 {
   "css.lint.unknownAtRules": "ignore",
-  "cSpell.words": ["embla", "Nuxt"]
+  "cSpell.words": ["embla", "Nuxt"],
+  "tailwindCSS.experimental.classRegex": [
+    ["keepTw\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ]
 }

CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 
 ### v1.0.1
 
- We are thrilled to announce the initial release of Keep React, our open-source component library built on React and Tailwind CSS. This release marks the beginning of our journey in providing a collection of pre-designed UI components to simplify web application development.
+We are thrilled to announce the initial release of Keep React, our open-source component library built on React and Tailwind CSS. This release marks the beginning of our journey in providing a collection of pre-designed UI components to simplify web application development.
 
 ### Key Features
 
@@ -16,23 +16,50 @@ All notable changes to this project will be documented in this file.
 
 ### v1.0.2 (2023-11-17)
 
- - Fixed Typography Error
- - Update Documentation
- - Add className Props in every component
- - customClass props removed with className props
+- Fixed Typography Error
+- Update Documentation
+- Add className Props in every component
+- customClass props removed with className props
 
- ### v1.1.0 (2023-12-18)
+### v1.1.0 (2023-12-18)
 
- #### Features
- - Alert component props and structure changed
- - Accordion component props and structure changed
- - Notification component props and structure changed
- - Popover component props and structure changed
- - Added Modal and Notification component open animation
- - Added Typography component
- - CSS Import Style changed
- - Keep Preset import styles changed
+#### Features
+
+- Alert component props and structure changed
+- Accordion component props and structure changed
+- Notification component props and structure changed
+- Popover component props and structure changed
+- Added Modal and Notification component open animation
+- Added Typography component
+- CSS Import Style changed
+- Keep Preset import styles changed
 
 #### Bug fixes
- - Date Picker Type Issue
- - Popover width Issue
+
+- Date Picker Type Issue
+- Popover width Issue
+
+### v1.6.0 (2024-10-13)
+
+#### Features
+
+- Accordion component restructure
+- Alert color update
+- Avatar component restructure
+- Badge padding update
+- Breadcrumb component restructure
+- Carousel bug fixed
+- Charts new example added
+- Checkbox new variant
+- Drawer component package changed
+- Input OTP component added
+- Modal Animation changed
+- Notification Animation changed
+- Popover component package changed
+- Select component added
+- Steps component updated
+- Slider component color updated
+- Spinner component remove extra color variant
+- Tabs component package changed
+- Tooltip component package changed
+- Toast component configure updated

Contribute.md

@@ -44,6 +44,6 @@ Ready to contribute? Here's how to get started:
 
 - [Fork Keep React on GitHub](https://github.com/StaticMania/keep-react/fork)
 - [Browse Open Issues](https://github.com/StaticMania/keep-react/issues)
-- [Read the Documentation](https://react.keepdesign.io/docs/getting-started/introduction)
+- [Read the Documentation](https://react.keepdesign.io/docs/getting-started/installation)
 
 We're excited to have you as part of the Keep React community! Thank you for your support and contributions.

README.md

@@ -147,7 +147,7 @@ export default App
 
 ## Components
 
-The Keep React offers a wide range of components to build your user interfaces. For detailed usage and examples of each component, refer to our [component documentation](https://react.keepdesign.io/docs/getting-started/introduction).
+The Keep React offers a wide range of components to build your user interfaces. For detailed usage and examples of each component, refer to our [component documentation](https://react.keepdesign.io/docs/getting-started/installation).
 
 ## Contributing
 

app/blog/[slug]/page.tsx

@@ -1,33 +1,34 @@
-import Markdown from 'react-markdown'
-import getMarkDownContent from '~/utils/GetMarkDownContent'
-import getMarkDownData from '~/utils/GetMarkDownData'
+import { MDXRemote } from 'next-mdx-remote/rsc'
+import { Suspense } from 'react'
+import rehypePrettyCode from 'rehype-pretty-code'
+import BlogHeader from '~/app/components/BlogHeader'
+import { getBlogs } from '~/utils/getMdxContent'
 
 export async function generateStaticParams() {
-  const posts = getMarkDownData('data/blogs')
-
+  const posts = getBlogs()
   return posts.map((post) => ({
     slug: post.slug,
   }))
 }
 
 const page = async ({ params }: { params: { slug: string } }) => {
-  const folder = 'data/blogs/'
-  const slug = params.slug
-  const post: { [key: string]: any } = getMarkDownContent(folder, slug)
-
-  const { title, date } = post.data
+  const posts = getBlogs()
+  const post = posts.find((post) => post.slug === params.slug)
 
   return (
     <section>
-      <div className="mx-auto my-12 max-w-7xl px-6 text-center 2xl:px-0">
-        <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>
+      <div id="blog-content" className="mx-auto max-w-5xl overflow-hidden px-6 py-12 2xl:px-0">
+        <Suspense fallback={<>Loading...</>}>
+          <MDXRemote
+            components={{ BlogHeader }}
+            source={post?.content ? post.content : ''}
+            options={{
+              mdxOptions: {
+                rehypePlugins: [[rehypePrettyCode, { theme: 'poimandres' }]],
+              },
+            }}
+          />
+        </Suspense>
       </div>
     </section>
   )

app/blog/page.tsx

@@ -1,9 +1,8 @@
-import getMarkDownData from '~/utils/GetMarkDownData'
+import { getBlogs } from '~/utils/getMdxContent'
 import Blog from '../components/Blog'
 
 const page = () => {
-  const blogs: { slug: string; content: string; [key: string]: any }[] = getMarkDownData('data/blogs')
-
+  const blogs = getBlogs()
   return (
     <section>
       <div className="-mt-2 py-20 ">
@@ -16,7 +15,7 @@ const page = () => {
               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">
+          <div className="mt-12 grid grid-cols-1 gap-x-6 gap-y-10 md:grid-cols-2 lg:grid-cols-3 ">
             {blogs?.map((blog) => <Blog key={blog.slug} {...blog} />)}
           </div>
         </div>

app/components/Blog.tsx

@@ -1,29 +1,34 @@
 'use client'
+import Image from 'next/image'
 import Link from 'next/link'
 import { FC } from 'react'
-import { Card, CardContent, CardTitle } from '../src'
+import KeepDarkLogo from '../../public/images/keep-dark.svg'
 
 export interface BlogProps {
   [key: string]: any
 }
 
-const Blog: FC<BlogProps> = ({ title, date, keyFeatures, slug }) => {
+const Blog: FC<BlogProps> = ({ title, date, tag, slug, version }) => {
   return (
-    <Card className="max-w-full lg:col-span-1">
-      <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 dark:bg-metal-800">
-          Read More
-        </Link>
-      </CardContent>
-    </Card>
+    <div className="space-y-2.5">
+      <Link
+        href={`/blog/${slug}`}
+        className="blog-post relative flex h-[200px] w-full flex-col items-center justify-center gap-2 rounded-xl border border-metal-800 bg-[#0D1015]">
+        <Image src={KeepDarkLogo} alt="Keep React" width="100" height="40" />
+        <p className="text-body-2 font-semibold text-white">{version}</p>
+      </Link>
+      <div className="space-y-2.5">
+        <p className="text-body-5 text-primary-500">{tag}</p>
+        <div className="flex items-center justify-between">
+          <Link
+            href={`/blog/${slug}`}
+            className="cursor-pointer text-body-3 text-metal-900 dark:text-white dark:hover:text-primary-500">
+            {title}
+          </Link>
+          <p className="text-body-4 text-metal-600 dark:text-metal-300">{date}</p>
+        </div>
+      </div>
+    </div>
   )
 }
 

app/components/BlogHeader.tsx

@@ -0,0 +1,13 @@
+import Image from 'next/image'
+import KeepDarkLogo from '../../public/images/keep-dark.svg'
+
+const BlogHeader = ({ title }: { title: string }) => {
+  return (
+    <div className="blog-post relative mb-6 flex h-[200px] w-full flex-col items-center justify-center gap-2 rounded-xl border border-metal-800 bg-[#0D1015] lg:h-[300px]">
+      <Image src={KeepDarkLogo} alt="Keep React" width="130" height="55" />
+      <h1 className="text-heading-6 font-semibold text-white lg:text-heading-4">{title}</h1>
+    </div>
+  )
+}
+
+export default BlogHeader

app/components/CodeHighlight.tsx

@@ -4,7 +4,7 @@ import { FC, 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 { Tooltip, TooltipAction, TooltipContent } from '../src'
+import { toast } from '../src'
 import { cn } from '../src/utils/cn'
 
 interface CodeHighlightProps {
@@ -33,20 +33,19 @@ const CodeHighlight: FC<CodeHighlightProps> = ({ code }) => {
           ))}
         </div>
         <div>
-          <Tooltip placement="top">
-            <TooltipAction asChild>
-              <button onClick={() => copyToClipboard(Object.values(code)[codeType])} className="mx-6 my-2.5">
-                {copy ? (
-                  <Check size={20} weight="light" color="#fff" />
-                ) : (
-                  <Copy size={20} weight="light" color="#fff" />
-                )}
-              </button>
-            </TooltipAction>
-            <TooltipContent>
-              <p className="text-body-5 font-medium text-white dark:text-metal-900">{copy ? 'Copied' : 'Copy Code'}</p>
-            </TooltipContent>
-          </Tooltip>
+          <button
+            onClick={() => {
+              copyToClipboard(Object.values(code)[codeType])
+              toast.success('Code Copied!', {
+                classNames: {
+                  toast:
+                    'dark:!bg-metal-900/30 dark:!text-white dark:!border-metal-800 !bg-white !text-metal-900 !border-metal-50',
+                },
+              })
+            }}
+            className="mx-6 my-2.5">
+            {copy ? <Check size={20} weight="light" color="#fff" /> : <Copy size={20} weight="light" color="#fff" />}
+          </button>
         </div>
       </div>
       <div>

app/components/CodeHighlightPreview.tsx

@@ -4,7 +4,7 @@ import { forwardRef, HTMLAttributes, 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 { Tooltip, TooltipAction, TooltipContent } from '../src'
+import { toast } from '../src'
 import { cn } from '../src/utils/cn'
 
 interface CodeHighlightPreviewProps extends HTMLAttributes<HTMLDivElement> {
@@ -23,10 +23,10 @@ const CodeHighlightPreview = forwardRef<HTMLDivElement, CodeHighlightPreviewProp
       <div
         ref={ref}
         className={cn(
-          'my-10 max-w-full overflow-hidden rounded-xl border border-metal-200 dark:border-metal-800 ',
+          'my-10 max-w-full overflow-hidden rounded-xl border border-metal-200 dark:border-metal-800',
           className,
         )}>
-        <div className="flex items-center justify-between bg-[#0D1015] dark:bg-metal-900/60">
+        <div className="flex items-center justify-between bg-[#0D1015] dark:bg-metal-900/90">
           <div className="flex items-center">
             <button
               type="button"
@@ -55,22 +55,19 @@ const CodeHighlightPreview = forwardRef<HTMLDivElement, CodeHighlightPreviewProp
             ))}
           </div>
           <div>
-            <Tooltip placement="top">
-              <TooltipAction asChild>
-                <button
-                  onClick={() => copyToClipboard(Object.values(code)[active === 0 ? 0 : active - 1])}
-                  className="mx-6 my-2.5">
-                  {copy ? (
-                    <Check size={20} weight="light" color="#fff" />
-                  ) : (
-                    <Copy size={20} weight="light" color="#fff" />
-                  )}
-                </button>
-              </TooltipAction>
-              <TooltipContent>
-                <p className="text-body-5 font-medium text-white dark:text-white">{copy ? 'Copied' : 'Copy Code'}</p>
-              </TooltipContent>
-            </Tooltip>
+            <button
+              onClick={() => {
+                copyToClipboard(Object.values(code)[active === 0 ? 0 : active - 1])
+                toast.success('Code Copied!', {
+                  classNames: {
+                    toast:
+                      'dark:!bg-metal-900/30 dark:!text-white dark:!border-metal-800 !bg-white !text-metal-900 !border-metal-50',
+                  },
+                })
+              }}
+              className="mx-6 my-2.5">
+              {copy ? <Check size={20} weight="light" color="#fff" /> : <Copy size={20} weight="light" color="#fff" />}
+            </button>
           </div>
         </div>