Skip to content

Commit e4b1735

Browse files
Arifulislam5577Arifulislam5577
authored
Keep React Version v1.2.0 updated.
* Added: Button Type Added. * Added: Chart tooltip button configuration added. * Tested: Button component restructured. * Updated: Button component updated. * Updated: Carousel component updated. * Updated: Accordion Component Updated. * Updated: Alert component updated. * Start Updating avatar component. * Updated: Breadcrumb component updated. * Updated: Breadcrumb component updated. * Removed: Remove component global context. * Updated: Next server component. * Replace phosphor icon to svg icon. * Updated: Update Slider component. * Updated: avatar component updated. * Updated: Empty component updated. * Updated: Progress component updated. * Updated: Badge component updated. * Updated: Play component updated. * Added: Divider component added. * Updated: Upload component updated processing. * Updated: Upload component updated. * Fixed: Sonalint error fixed. * Updated: Tabs component updated. * Deleted: CSS Theme preview deleted. * Updated: Pagination component updated. * Updated: Skeleton Component updated. * Added: Pagination theme interface added. * Updated: Rating component updated. * Updated: Popover component updated. * Fixed: Progress component Issue fixed. * Updated: Dropdown component updating. * Updated: Dropdown component updated. * Updated: Typography component updated. * Updated: Component API Table updated. * Updated: Typography update in latest component. * Updated: Input component updated. * Updated: Checkbox component updated. * Updated: Text area component udated. * Updated: Number Input Updated. * Removed: Remove unused code. * Updated: Number Input documentation updated. * Updated: Sidebar component updated. * Updated: Empty component updated. * Updated: Accordion Component. * Updated: Alert, Avatar & Badge updated. * Updated: Button and button group updated. * Updated: skeleton pagination play spinner tabs. * Updated: Modal component updated. * Fixed: Interface export issue fixed. * Updated: Update Home page design. * Fixed: Component Issue Fixed. * Deleted: Unused code deleted. * Updated: Card Component updated. * Updated: Card Component updated. * Updated: Notification component updated. * Updated: Tag component updated. * Updated: Redme file updated. * Updated: Home Page updated. * Udated: community style updated. * Updated: Home page updated. * Fixed: Checkbox issue fixed. * Fixed: Checkbox Issue fixed. * Link Added: Footer figma link added. * Fixed: Checkbox spelling typo issue fixed. * Fixed: Checkbox spelling typo issue fixed. * Fixed: Checkbox spelling typo issue fixed. * Fixed: Checkbox spelling typo issue fixed. * Fixed: Test area spelling typo issue fixed. * Fixed: Textarea spelling import mistake fixed.
1 parent 4c3428a commit e4b1735

684 files changed

Lines changed: 12295 additions & 37642 deletions

File tree

Some content is hidden

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

‎.storybook/style.css‎

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1056,30 +1056,6 @@ input[type='number'] {
10561056
letter-spacing: -0.5px;
10571057
}
10581058

1059-
.description-1 {
1060-
font-size: 1.875rem;
1061-
line-height: 2.625rem;
1062-
letter-spacing: -0.5px;
1063-
}
1064-
1065-
.description-2 {
1066-
font-size: 1.75rem;
1067-
line-height: 2.625rem;
1068-
letter-spacing: -0.5px;
1069-
}
1070-
1071-
.description-3 {
1072-
font-size: 1.625rem;
1073-
line-height: 2.5rem;
1074-
letter-spacing: -0.5px;
1075-
}
1076-
1077-
.description-4 {
1078-
font-size: 1.5rem;
1079-
line-height: 2.25rem;
1080-
letter-spacing: -0.5px;
1081-
}
1082-
10831059
.body-1 {
10841060
font-size: 1.375rem;
10851061
line-height: 1.875rem;

‎.vscode/settings.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"css.lint.unknownAtRules": "ignore"
2+
"css.lint.unknownAtRules": "ignore",
3+
"cSpell.words": ["embla", "Nuxt"]
34
}

‎README.md‎

Lines changed: 34 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -19,48 +19,54 @@ Keep React is an open-source component library built on Tailwind CSS and React.j
1919

2020
## Installation
2121

22-
### Vite React Application
22+
## Vite React Application
2323

24-
After creating a React application with Vite, follow these steps to
25-
install Keep React:
24+
Setting Up Keep React in Vite React Application
2625

27-
`Step 1:` Install Tailwind CSS
26+
`Step 1:` Create a Vite React Application
27+
28+
```console
29+
npm create vite@latest my-project -- --template react
30+
cd my-project
31+
```
32+
33+
`Step 2:` Install Tailwind CSS
2834

2935
```console
3036
npm i autoprefixer postcss tailwindcss
3137
npx tailwindcss init -p
3238
```
3339

34-
`Step 2:` Install Keep React:
40+
`Step 3:` Install Keep React:
3541

3642
```console
37-
npm i keep-react
43+
npm i keep-react phosphor-react
3844
```
3945

4046
Or with Yarn
4147

4248
```console
43-
yarn add keep-react
49+
yarn add keep-react phosphor-react
4450
```
4551

4652
Or with Pnpm
4753

4854
```console
49-
pnpm add keep-react
55+
pnpm add keep-react phosphor-react
5056
```
5157

52-
`Step 3:` Go to the `tailwind.config.js` file and paste the
58+
`Step 4:` Go to the `tailwind.config.js` file and paste the
5359
following code:
5460

5561
```jsx
5662
import keepPreset from 'keep-react/preset'
5763
export default {
58-
content: ['node_modules/keep-react/**/*.{js,jsx,ts,tsx}'],
64+
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', 'node_modules/keep-react/**/*.{js,jsx,ts,tsx}'],
5965
presets: [keepPreset],
6066
}
6167
```
6268

63-
`Step 4:` Add Tailwind CSS to index.css File:
69+
`Step 5:` Add Tailwind CSS to index.css File:
6470

6571
```css
6672
@import 'keep-react/css';
@@ -69,49 +75,52 @@ export default {
6975
@tailwind utilities;
7076
```
7177

72-
### Next JS Application
78+
## Next JS Application
7379

74-
You can easily integrate `keep-react` into your Next.js application. Starting from Next.js version 13.4, the app router automatically installs Tailwind CSS, eliminating the need for a separate Tailwind CSS installation. If you have already installed Tailwind CSS as part of the Next.js application setup, you can proceed with Step 2. Otherwise, start with Step 1.
80+
You can easily integrate `keep-react` into your Next.js application.
7581

76-
After creating a Next JS application, follow these steps to
77-
install Keep React:
78-
79-
`Step 1:` Install Tailwind CSS
82+
`Step 1:` Install Next Js Application
8083

8184
```console
82-
npm i autoprefixer postcss tailwindcss
83-
npx tailwindcss init -p
85+
npx create-next-app@latest
8486
```
8587

88+
Ensure that you select `tailwindcss` as a dependency for your application during the setup.
89+
90+
`Would you like to use Tailwind CSS? -- Yes`
91+
8692
`Step 2:` Install Keep React
8793

8894
```console
89-
npm i keep-react
95+
npm i keep-react phosphor-react
9096
```
9197

9298
Or with Yarn
9399

94100
```console
95-
yarn add keep-react
101+
yarn add keep-react phosphor-react
96102
```
97103

98104
Or with Pnpm
99105

100106
```console
101-
pnpm add keep-react
107+
pnpm add keep-react phosphor-react
102108
```
103109

104110
`Step 3:` Go to the `tailwind.config.js` file and paste the
105111
following code
106112

107113
```js
108114
module.exports = {
109-
content: ['node_modules/keep-react/**/*.{js,jsx,ts,tsx}'],
115+
content: [
116+
// ... (existing content)
117+
'./node_modules/keep-react/**/*.{js,jsx,ts,tsx}',
118+
],
110119
presets: [require('keep-react/preset')],
111120
}
112121
```
113122

114-
`Step 4:` Add Tailwind CSS to globals.css File:
123+
`Step 4:` Add Tailwind CSS to `globals.css` File:
115124

116125
```css
117126
@import 'keep-react/css';
@@ -128,7 +137,7 @@ Congratulations! You have successfully installed the Keep React. Now you can imp
128137
'use client'
129138
import { Button } from 'keep-react'
130139
const App = () => {
131-
return <Button size="md">Default</Button>
140+
return <Button>Button</Button>
132141
}
133142
export default App
134143
```

‎app/components/CodePreview.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,27 @@ import { ReactNode, useState } from 'react'
55
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
66
import { coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
77
import useCopy from '../../hooks/useCopy'
8+
import { cn } from '../src/helpers/cn'
89

910
interface CodePreviewProps {
1011
children: ReactNode
1112
code: string
1213
github?: string
14+
className?: string
1315
}
1416

15-
const CodePreview = ({ children, code, github }: CodePreviewProps) => {
17+
const CodePreview = ({ children, code, github, className }: CodePreviewProps) => {
1618
const [active, setActive] = useState(0)
1719
const { copy, copyToClipboard } = useCopy()
1820
const githubUrl = `https://github.com/StaticMania/keep-react/tree/main/app/src/components/${github}`
1921

2022
return (
21-
<div className="my-10 w-full overflow-hidden rounded-md border border-metal-200 shadow-small">
23+
<div className="my-10 w-full overflow-hidden rounded-xl border border-metal-200 shadow-small">
2224
<div className="-mb-px flex flex-wrap border-b border-metal-200 bg-metal-900 px-5 text-center">
2325
<button
2426
type="button"
2527
onClick={() => setActive(0)}
26-
className={`-mb-[0.7px] flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-5 font-medium text-metal-400 first:ml-0 ${
28+
className={`-mb-[0.7px] 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 ${
2729
active === 0 ? '!border-b-white text-white' : ''
2830
}`}
2931
id="preview-btn">
@@ -32,7 +34,7 @@ const CodePreview = ({ children, code, github }: CodePreviewProps) => {
3234
<button
3335
id="code-btn"
3436
onClick={() => setActive(1)}
35-
className={` flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-5 font-medium text-metal-400 first:ml-0 ${
37+
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 ${
3638
active === 1 ? '!border-b-metal-100 text-white' : ''
3739
}`}>
3840
Code
@@ -54,7 +56,7 @@ const CodePreview = ({ children, code, github }: CodePreviewProps) => {
5456
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"
5557
onClick={() => copyToClipboard(code)}>
5658
{copy ? (
57-
<span className="flex items-center text-body-6">
59+
<span className="flex items-center text-body-5">
5860
<Check size={20} color="white" />
5961
</span>
6062
) : (
@@ -81,7 +83,7 @@ const CodePreview = ({ children, code, github }: CodePreviewProps) => {
8183
</SyntaxHighlighter>
8284
</div>
8385
) : (
84-
<div className="flex w-full items-center justify-center bg-white px-2 py-3 md:p-6">
86+
<div className={cn('flex w-full items-center justify-center bg-white px-2 py-3 md:p-6', className)}>
8587
<div className="h-full w-full overflow-auto">{children}</div>
8688
</div>
8789
)}

0 commit comments

Comments
 (0)