Skip to content

Commit 0b2ff9e

Browse files
Arifulislam5577Arifulislam5577
authored
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.
1 parent aad2f82 commit 0b2ff9e

File tree

539 files changed

+10847
-12262
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

539 files changed

+10847
-12262
lines changed

‎.eslintrc.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"endOfLine": "auto"
99
}
1010
],
11-
"@next/next/no-img-element": "off"
11+
"@next/next/no-img-element": "off",
12+
"no-unused-vars": "off"
1213
}
1314
}

‎app/blog/[slug]/page.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,12 @@ const page = async ({ params }: { params: { slug: string } }) => {
1919

2020
return (
2121
<section>
22-
<div className="bg-metal-100 py-20">
23-
<h1 className="text-center text-heading-5 font-medium text-metal-900">{title}</h1>
24-
</div>
2522
<div className="mx-auto my-12 max-w-7xl px-6 text-center 2xl:px-0">
26-
<div className="text-left">
27-
<p className="text-body-5 font-medium text-primary-500">{date}</p>
28-
<div className="mt-3">
23+
<div className="py-12 text-left">
24+
<p className="mb-1 text-body-3 font-medium text-primary-500">{date}</p>
25+
<p className="text-heading-5 font-medium text-metal-900 dark:text-white">{title}</p>
26+
<hr className="my-5 block border-b border-b-metal-100 dark:border-b-metal-800" />
27+
<div className="mt-10">
2928
<Markdown className="post">{post.content}</Markdown>
3029
</div>
3130
</div>

‎app/blog/page.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,19 @@ const page = () => {
66

77
return (
88
<section>
9-
<div className="bg-metal-100 py-20">
10-
<div className="mx-auto max-w-7xl px-6 text-center 2xl:px-0">
11-
<h1 className="text-heading-5 font-medium text-metal-900">The latest Keep React news</h1>
12-
</div>
13-
</div>
14-
<div className="mx-auto mt-12 max-w-7xl px-6 text-center 2xl:px-0">
15-
<div className="grid grid-cols-1 gap-5 lg:grid-cols-2 xl:grid-cols-4">
16-
{blogs?.map((blog) => <Blog key={blog.slug} {...blog} />)}
9+
<div className="-mt-2 py-20 ">
10+
<div className="mx-auto max-w-7xl px-6 2xl:px-0">
11+
<div className="max-w-md space-y-3">
12+
<h1 className="text-heading-5 font-semibold text-metal-900 dark:text-white">
13+
Stay Updated with the Latest Keep React Library
14+
</h1>
15+
<p className="text-body-3 text-metal-600 dark:text-metal-300">
16+
Keep React library continues to evolve with new features, bug fixes, and performance improvements.
17+
</p>
18+
</div>
19+
<div className="mt-12 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
20+
{blogs?.map((blog) => <Blog key={blog.slug} {...blog} />)}
21+
</div>
1722
</div>
1823
</div>
1924
</section>

‎app/components/Blog.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,28 @@
11
'use client'
22
import Link from 'next/link'
33
import { FC } from 'react'
4-
import { Badge, Card } from '../src'
4+
import { Card, CardContent, CardTitle } from '../src'
55

66
export interface BlogProps {
77
[key: string]: any
88
}
99

10-
const Blog: FC<BlogProps> = ({ title, description, date, keyFeatures, slug }) => {
10+
const Blog: FC<BlogProps> = ({ title, date, keyFeatures, slug }) => {
1111
return (
1212
<Card className="max-w-full lg:col-span-1">
13-
<Card.Content className="space-y-3 text-left">
14-
<Badge>{date}</Badge>
15-
<Card.Title>{title}</Card.Title>
16-
<Card.Description>{description}</Card.Description>
17-
<ul className="!mt-4 ml-5 list-disc space-y-1 text-body-4 font-normal text-metal-600">
13+
<CardContent className="flex flex-col justify-between gap-y-3 text-left">
14+
<p className="text-body-4 text-metal-600 dark:text-white">{date}</p>
15+
<CardTitle>{title}</CardTitle>
16+
<ul className="!mt-4 ml-5 list-disc space-y-1 text-body-4 font-normal text-metal-600 dark:text-metal-300">
1817
{keyFeatures?.map((item: string) => <li key={item}>{item}</li>)}
1918
</ul>
2019

2120
<Link
2221
href={`/blog/${slug}`}
23-
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">
22+
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">
2423
Read More
2524
</Link>
26-
</Card.Content>
25+
</CardContent>
2726
</Card>
2827
)
2928
}

‎app/components/CodePreview.tsx‎

Lines changed: 51 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
'use client'
22
import Image from 'next/image'
3+
import Link from 'next/link'
34
import { Check, Clipboard } from 'phosphor-react'
45
import { ReactNode, useState } from 'react'
56
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
@@ -13,15 +14,17 @@ interface CodePreviewProps {
1314
github?: string
1415
className?: string
1516
activeTab?: number
17+
hasData?: boolean
18+
data?: any
1619
}
1720

18-
const CodePreview = ({ children, code, github, className, activeTab }: CodePreviewProps) => {
19-
const [active, setActive] = useState(activeTab ? activeTab : 0)
21+
const CodePreview = ({ children, code, github, className, activeTab, hasData, data }: CodePreviewProps) => {
22+
const [active, setActive] = useState(activeTab ?? 0)
2023
const { copy, copyToClipboard } = useCopy()
2124
const githubUrl = `https://github.com/StaticMania/keep-react/tree/main/app/src/components/${github}`
2225

2326
return (
24-
<div className="my-10 w-full overflow-hidden rounded-xl border border-metal-200 shadow-small">
27+
<div className="my-10 w-full overflow-hidden rounded-xl border border-metal-200 shadow-small dark:border-metal-800">
2528
<div className="-mb-px flex flex-wrap border-b border-metal-200 bg-metal-900 px-5 text-center">
2629
<button
2730
type="button"
@@ -40,19 +43,30 @@ const CodePreview = ({ children, code, github, className, activeTab }: CodePrevi
4043
}`}>
4144
Code
4245
</button>
46+
47+
{hasData ? (
48+
<button
49+
id="code-btn"
50+
onClick={() => setActive(2)}
51+
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 ${
52+
active === 2 ? '!border-b-metal-100 text-white' : ''
53+
}`}>
54+
Data
55+
</button>
56+
) : null}
4357
</div>
4458

4559
<div>
46-
{active ? (
60+
{active === 1 && (
4761
<div className="relative">
4862
<div className="absolute -top-10 right-3 flex items-center justify-between gap-3 md:top-5 lg:right-10">
49-
<a
63+
<Link
5064
id="github-page-link"
5165
target="_blank"
5266
href={githubUrl}
5367
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">
5468
<Image src="/images/icon/github-white.svg" height={20} width={20} alt="github" />
55-
</a>
69+
</Link>
5670
<button
5771
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"
5872
onClick={() => copyToClipboard(code)}>
@@ -83,11 +97,40 @@ const CodePreview = ({ children, code, github, className, activeTab }: CodePrevi
8397
{code.trim()}
8498
</SyntaxHighlighter>
8599
</div>
86-
) : (
87-
<div className={cn('flex w-full items-center justify-center bg-white px-2 py-3 md:p-6', className)}>
100+
)}
101+
102+
{active === 0 && (
103+
<div
104+
className={cn(
105+
'flex w-full items-center justify-center bg-white px-2 py-3 dark:bg-black md:p-6',
106+
className,
107+
)}>
88108
<div className="h-full w-full overflow-auto">{children}</div>
89109
</div>
90110
)}
111+
112+
{active === 2 && (
113+
<div>
114+
<SyntaxHighlighter
115+
language="javascript"
116+
style={coldarkDark}
117+
showLineNumbers
118+
customStyle={{
119+
maxHeight: '420px',
120+
borderRadius: '0px',
121+
paddingLeft: '40px',
122+
paddingBottom: '20px',
123+
marginTop: '0px',
124+
marginBottom: '0px',
125+
background: '#1C222B',
126+
fontSize: '14px',
127+
lineHeight: '22px',
128+
letterSpacing: '-0.2px',
129+
}}>
130+
{data.trim()}
131+
</SyntaxHighlighter>
132+
</div>
133+
)}
91134
</div>
92135
</div>
93136
)

‎app/components/Community.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import Link from 'next/link'
33
import { ArrowLineUpRight } from 'phosphor-react'
44
import { useEffect, useState } from 'react'
5-
import { Avatar } from '../src'
5+
import { Avatar, AvatarGroup } from '../src'
66

77
interface Contributor {
88
login: string
@@ -36,8 +36,10 @@ const Community = () => {
3636
<section className="community py-20">
3737
<div className="mx-auto max-w-7xl px-6 py-6 2xl:px-0">
3838
<div className="mb-12 text-center">
39-
<h4 className="mb-1 text-body-1 !font-semibold text-black lg:text-heading-5">Join The Community</h4>
40-
<p className="mx-auto max-w-sm text-body-4 font-normal text-metal-600 md:text-body-3">
39+
<h4 className="mb-1 text-body-1 !font-semibold text-black dark:text-white lg:text-heading-5">
40+
Join The Community
41+
</h4>
42+
<p className="mx-auto max-w-sm text-body-4 font-normal text-metal-600 dark:text-metal-300 md:text-body-3">
4143
Become a member of a community of developers by supporting Keep React
4244
</p>
4345
</div>
@@ -47,7 +49,7 @@ const Community = () => {
4749
<div className="my-20">
4850
<div>
4951
{contributors?.length ? (
50-
<Avatar.Group>
52+
<AvatarGroup>
5153
{contributors?.map((user) => (
5254
<Avatar
5355
key={user?.id}
@@ -57,7 +59,7 @@ const Community = () => {
5759
className="border-2 border-[#9686E5] p-0"
5860
/>
5961
))}
60-
</Avatar.Group>
62+
</AvatarGroup>
6163
) : null}
6264
</div>
6365
<div className="mt-3">

‎app/components/ComponentApi.tsx‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,37 +19,45 @@ const spaceMono = Space_Mono({ subsets: ['latin'], weight: ['400'] })
1919
const ComponentApi: FC<ComponentProps> = ({ data }) => {
2020
return (
2121
<div className={spaceMono.className + 'mx-auto w-full overflow-auto'}>
22-
<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">
22+
<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">
2323
<thead>
2424
<tr>
25-
<th className="rounded-bl rounded-tl bg-metal-50 px-4 py-3 text-body-4 font-medium text-metal-900">
25+
<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">
2626
Property
2727
</th>
28-
<th className="bg-metal-50 px-4 py-3 text-body-4 font-medium text-metal-900">Description</th>
29-
<th className="bg-metal-50 px-4 py-3 text-body-4 font-medium text-metal-900">Type</th>
30-
<th className="rounded-br bg-metal-50 px-4 py-3 text-body-4 font-medium text-metal-900">Default</th>
28+
<th className="bg-metal-50 px-4 py-3 text-body-4 font-medium text-metal-900 dark:bg-white dark:text-metal-900">
29+
Description
30+
</th>
31+
<th className="bg-metal-50 px-4 py-3 text-body-4 font-medium text-metal-900 dark:bg-white dark:text-metal-900">
32+
Type
33+
</th>
34+
<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">
35+
Default
36+
</th>
3137
</tr>
3238
</thead>
3339
<tbody>
3440
{data?.map((item) => {
3541
return (
3642
<tr key={item.id}>
37-
<td className="border-t border-metal-100 px-4 py-3 text-body-4 !font-medium text-black">
43+
<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">
3844
{item.propsName}
3945
</td>
40-
<td className="border-t border-metal-100 px-4 py-3 text-body-4 text-metal-400">
46+
<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">
4147
{item.propsDescription}
4248
</td>
43-
<td className="border-t border-metal-100 px-4 py-3 text-body-4 text-metal-400">
49+
<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">
4450
{typeof item.propsType === 'string'
4551
? item.propsType
4652
: item?.propsType?.map((prop) => (
47-
<pre key={prop} className="m-0.5 inline-block rounded-lg bg-metal-100 px-2 py-0.5 ">
53+
<pre
54+
key={prop}
55+
className="m-0.5 inline-block rounded-xl bg-metal-100 px-2 py-0.5 dark:bg-metal-800">
4856
{prop}
4957
</pre>
5058
))}
5159
</td>
52-
<td className="border-t border-metal-100 px-4 py-3 text-body-4 text-metal-400">
60+
<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">
5361
{item.default ? item.default : 'None'}
5462
</td>
5563
</tr>

‎app/components/ComponentUI.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ const ComponentUI = () => {
99
<div className="mx-auto max-w-7xl px-6 2xl:px-0">
1010
<div className="my-5 flex items-center justify-between">
1111
<div className="mx-auto mb-4 px-5 text-center md:max-w-xl md:px-0">
12-
<h2 className="mb-3 text-body-1 !font-semibold text-black lg:text-heading-5">
12+
<h2 className="mb-3 text-body-1 !font-semibold text-black dark:text-white lg:text-heading-5">
1313
Design Excellence with Our React Component Library
1414
</h2>
15-
<p className="text-body-5 font-normal leading-6 text-metal-600 md:text-body-3">
15+
<p className="text-body-5 font-normal leading-6 text-metal-600 dark:text-metal-300 md:text-body-3">
1616
Explore our library of 40+ open-source React UI components and interactive elements, empowering you to
1717
create stunning web projects effortlessly.
1818
</p>
@@ -25,7 +25,7 @@ const ComponentUI = () => {
2525
<Link
2626
href={href}
2727
key={id}
28-
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">
28+
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">
2929
{Icon && <Icon size="18" />}
3030
{item.name}
3131
</Link>
@@ -35,7 +35,7 @@ const ComponentUI = () => {
3535
<div className="mt-9 flex items-center justify-center">
3636
<Link
3737
href="/docs/getting-started/introduction"
38-
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">
38+
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">
3939
View All Component <ArrowUpRight size={18} />
4040
</Link>
4141
</div>

‎app/components/CopyCode.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
44
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
55
import { coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
66
import useCopy from '../../hooks/useCopy'
7-
import { Skeleton } from '../src'
7+
import { Skeleton, SkeletonLine } from '../src'
88

99
const CopyCode = ({ code }: { code: string }) => {
1010
const { copy, copyToClipboard } = useCopy()
@@ -33,7 +33,7 @@ const CopyCode = ({ code }: { code: string }) => {
3333
</SyntaxHighlighter>
3434
) : (
3535
<Skeleton animation={true}>
36-
<Skeleton.Line className="h-[60px]" />
36+
<SkeletonLine className="h-[60px]" />
3737
</Skeleton>
3838
)}
3939
<button onClick={() => copyToClipboard(code)} className="absolute right-5 top-5 cursor-pointer">

0 commit comments

Comments
 (0)