diff --git a/.storybook/style.css b/.storybook/style.css index 916c6e10..c5f9f034 100644 --- a/.storybook/style.css +++ b/.storybook/style.css @@ -1056,30 +1056,6 @@ input[type='number'] { letter-spacing: -0.5px; } -.description-1 { - font-size: 1.875rem; - line-height: 2.625rem; - letter-spacing: -0.5px; -} - -.description-2 { - font-size: 1.75rem; - line-height: 2.625rem; - letter-spacing: -0.5px; -} - -.description-3 { - font-size: 1.625rem; - line-height: 2.5rem; - letter-spacing: -0.5px; -} - -.description-4 { - font-size: 1.5rem; - line-height: 2.25rem; - letter-spacing: -0.5px; -} - .body-1 { font-size: 1.375rem; line-height: 1.875rem; diff --git a/.vscode/settings.json b/.vscode/settings.json index 5a586b3d..9203e0a4 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,4 @@ { - "css.lint.unknownAtRules": "ignore" + "css.lint.unknownAtRules": "ignore", + "cSpell.words": ["embla", "Nuxt"] } diff --git a/README.md b/README.md index 98031025..90af41df 100644 --- a/README.md +++ b/README.md @@ -19,48 +19,54 @@ Keep React is an open-source component library built on Tailwind CSS and React.j ## Installation -### Vite React Application +## Vite React Application -After creating a React application with Vite, follow these steps to -install Keep React: +Setting Up Keep React in Vite React Application -`Step 1:` Install Tailwind CSS +`Step 1:` Create a Vite React Application + +```console +npm create vite@latest my-project -- --template react +cd my-project +``` + +`Step 2:` Install Tailwind CSS ```console npm i autoprefixer postcss tailwindcss npx tailwindcss init -p ``` -`Step 2:` Install Keep React: +`Step 3:` Install Keep React: ```console -npm i keep-react +npm i keep-react phosphor-react ``` Or with Yarn ```console -yarn add keep-react +yarn add keep-react phosphor-react ``` Or with Pnpm ```console -pnpm add keep-react +pnpm add keep-react phosphor-react ``` -`Step 3:` Go to the `tailwind.config.js` file and paste the +`Step 4:` Go to the `tailwind.config.js` file and paste the following code: ```jsx import keepPreset from 'keep-react/preset' export default { - content: ['node_modules/keep-react/**/*.{js,jsx,ts,tsx}'], + content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', 'node_modules/keep-react/**/*.{js,jsx,ts,tsx}'], presets: [keepPreset], } ``` -`Step 4:` Add Tailwind CSS to index.css File: +`Step 5:` Add Tailwind CSS to index.css File: ```css @import 'keep-react/css'; @@ -69,36 +75,36 @@ export default { @tailwind utilities; ``` -### Next JS Application +## Next JS Application -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. +You can easily integrate `keep-react` into your Next.js application. -After creating a Next JS application, follow these steps to -install Keep React: - -`Step 1:` Install Tailwind CSS +`Step 1:` Install Next Js Application ```console -npm i autoprefixer postcss tailwindcss -npx tailwindcss init -p +npx create-next-app@latest ``` +Ensure that you select `tailwindcss` as a dependency for your application during the setup. + +`Would you like to use Tailwind CSS? -- Yes` + `Step 2:` Install Keep React ```console -npm i keep-react +npm i keep-react phosphor-react ``` Or with Yarn ```console -yarn add keep-react +yarn add keep-react phosphor-react ``` Or with Pnpm ```console -pnpm add keep-react +pnpm add keep-react phosphor-react ``` `Step 3:` Go to the `tailwind.config.js` file and paste the @@ -106,12 +112,15 @@ following code ```js module.exports = { - content: ['node_modules/keep-react/**/*.{js,jsx,ts,tsx}'], + content: [ + // ... (existing content) + './node_modules/keep-react/**/*.{js,jsx,ts,tsx}', + ], presets: [require('keep-react/preset')], } ``` -`Step 4:` Add Tailwind CSS to globals.css File: +`Step 4:` Add Tailwind CSS to `globals.css` File: ```css @import 'keep-react/css'; @@ -128,7 +137,7 @@ Congratulations! You have successfully installed the Keep React. Now you can imp 'use client' import { Button } from 'keep-react' const App = () => { - return + return } export default App ``` diff --git a/app/components/CodePreview.tsx b/app/components/CodePreview.tsx index a26c9944..c1ab6fb8 100644 --- a/app/components/CodePreview.tsx +++ b/app/components/CodePreview.tsx @@ -5,25 +5,27 @@ import { ReactNode, 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 { cn } from '../src/helpers/cn' interface CodePreviewProps { children: ReactNode code: string github?: string + className?: string } -const CodePreview = ({ children, code, github }: CodePreviewProps) => { +const CodePreview = ({ children, code, github, className }: CodePreviewProps) => { const [active, setActive] = useState(0) const { copy, copyToClipboard } = useCopy() const githubUrl = `https://github.com/StaticMania/keep-react/tree/main/app/src/components/${github}` return ( -
+
) : ( -
+
{children}
)} diff --git a/app/components/Community.tsx b/app/components/Community.tsx new file mode 100644 index 00000000..239ebb40 --- /dev/null +++ b/app/components/Community.tsx @@ -0,0 +1,210 @@ +import Link from 'next/link' +import { ArrowLineUpRight } from 'phosphor-react' +import { useEffect, useState } from 'react' +import { Avatar } from '../src' + +interface Contributor { + login: string + id: number + avatar_url: string +} + +const Community = () => { + const [contributors, setContributors] = useState([]) + + useEffect(() => { + let ignore = false + const getUser = async () => { + try { + const response = await fetch('https://api.github.com/repos/StaticMania/keep-react/contributors?per_page=7') + const result = await response.json() + if (!ignore) { + setContributors(result) + } + } catch (error) { + console.error(error) + } + } + getUser() + + return () => { + ignore = true + } + }, []) + return ( +
+
+
+

Join The Community

+

+ Become a member of a community of developers by supporting Keep React +

+
+
+
+
+
+
+ {contributors?.length ? ( + + {contributors?.map((user) => ( + + ))} + + ) : null} +
+
+

Join the community

+

+ Become a member of a community of developers by supporting Keep React +

+
+ + See Our Repository + + +
+
+
+ +
+
+ + + + + + + + + + +
+
+

Github Discussion

+

+ Request new features, ask questions and provide feedback with GitHub discussions +

+
+
+ + + +
+
+ + + + + + + + + + +
+
+

X Twitter

+

+ Stay updated on all our latest minor and major releases +

+
+
+ + + +
+
+ + + + + + + + + + +
+
+
+

Discord Community

+

+ Ask questions, share feedback, get updates, learn about upcoming features and more. +

+
+
+
+ + +
+
+
+ ) +} + +export default Community diff --git a/app/components/ComponentApi.tsx b/app/components/ComponentApi.tsx index 2a67e45c..e224547d 100644 --- a/app/components/ComponentApi.tsx +++ b/app/components/ComponentApi.tsx @@ -1,5 +1,6 @@ +'use client' import { Space_Mono } from 'next/font/google' -import React, { FC } from 'react' +import { FC } from 'react' interface ComponentApiProps { id: number @@ -17,16 +18,16 @@ const spaceMono = Space_Mono({ subsets: ['latin'], weight: ['400'] }) const ComponentApi: FC = ({ data }) => { return ( -
- +
+
- - - - + + @@ -35,22 +36,22 @@ const ComponentApi: FC = ({ data }) => { {data?.map((item) => { return ( - - - - diff --git a/app/components/ComponentUI.tsx b/app/components/ComponentUI.tsx new file mode 100644 index 00000000..1097d7b0 --- /dev/null +++ b/app/components/ComponentUI.tsx @@ -0,0 +1,46 @@ +import Link from 'next/link' +import { ArrowUpRight } from 'phosphor-react' +import { routes } from '../../routes/routes' + +const ComponentUI = () => { + return ( +
+
+
+
+

+ Design Excellence with Our React Component Library +

+

+ Explore our library of 40+ open-source React UI components and interactive elements, empowering you to + create stunning web projects effortlessly. +

+
+
+
+ {routes.slice(0, 20).map((item) => { + const { href, id, Icon } = item + return ( + + {Icon && } + {item.name} + + ) + })} +
+
+ + View All Component + +
+
+
+ ) +} + +export default ComponentUI diff --git a/app/components/ComponentsList.tsx b/app/components/ComponentsList.tsx index 169142b3..5f874d5c 100644 --- a/app/components/ComponentsList.tsx +++ b/app/components/ComponentsList.tsx @@ -1,9 +1,21 @@ 'use client' -import { CloudArrowUp, GridFour, Phone, User } from 'phosphor-react' -import { ChangeEvent, useState } from 'react' -import { Button, CheckboxGroup, Modal, Pagination, Slider, Tooltip, Tabs, DatePicker } from '../src' +import { CloudArrowUp, DotsThree, HouseLine, Phone, SignIn, User } from 'phosphor-react' +import { useState } from 'react' import { CustomizedBarSizeWithAxisData } from '../docs/components/barChart/variant/CustomizedBarSizeWithAxisData' import { DefaultRadio } from '../docs/components/radio/variant/DefaultRadio' +import { + Accordion, + AreaChart, + Button, + DatePicker, + Modal, + Pagination, + Skeleton, + Slider, + Tabs, + Tooltip, + Typography, +} from '../src' export const SliderComponent = () => { return ( @@ -20,16 +32,20 @@ export const SliderComponent = () => { ) } export const PaginationComponent = () => { - const [currentPage, setCurrentPage] = useState(1) return (
- + + + 1 + 2 + 3 + 4 + + + + 10 + +
) } @@ -42,9 +58,7 @@ export const TooltipComponent = () => { placement="top" animation="duration-300" style="dark"> - + ) } @@ -55,48 +69,6 @@ export const BarChartComponent = () => { ) } -export const CheckboxGroupComponent = () => { - const [selected, setSelected] = useState('') - const handleOptionChange = (e: ChangeEvent) => { - setSelected(e.target.value) - } - return ( -
-
- - - - -
- ) -} export const DatePickerComponent = () => { return (
@@ -114,48 +86,197 @@ export const RadioSelectComponent = () => { ) } export const ModalComponent = () => { - const [showModal, setShowModal] = useState(false) - const onClick = () => { - setShowModal(!showModal) + const [isOpen, setIsOpen] = useState(false) + const openModal = () => { + setIsOpen(true) + } + const closeModal = () => { + setIsOpen(false) } return (
- - } size="md" show={showModal} position="center"> - Do you want to upload this file? - -
-

- Contrary to popular belief, Lorem Ipsum is not simply random text. -

-
+ + + + + + + + + + Update Modal Status + + + Your document has unsaved changes. Discard or save them as a new page to continue. + + + + + + + - - - -
) } export const TabsComponent = () => { return ( -
- - }> - Profile content - - }> - Dashboard content - - }> - Contacts content - +
+ + + + + Home + + + + About + + + + Contact + + + + Sign Up + + + Home Content + About Content + Contact Content + Sign Up Content
) } +export const AreaChartComponent = () => { + const chartData = [ + { + name: '1', + price: 0, + sell: 0, + }, + { + name: '2', + price: 300, + sell: 200, + }, + { + name: '3', + price: 170, + sell: 120, + }, + { + name: '4', + price: 190, + sell: 130, + }, + { + name: '5', + price: 220, + sell: 120, + }, + { + name: '6', + price: 400, + sell: 213, + }, + { + name: '7', + price: 420, + sell: 325, + }, + { + name: '8', + price: 450, + sell: 250, + }, + { + name: '9', + price: 400, + sell: 300, + }, + { + name: '10', + price: 500, + sell: 400, + }, + ] + return ( + + ) +} + +export const AccordionComponent = () => { + return ( + + + + Q. What is the purpose of the Keep React? + + + + The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a unified + user experience across our products. It simplifies the design and development process by providing + ready-to-use components that can be easily customized and integrated into various applications. + + + + + Q. How do I customize the color scheme of components? + + + + The Keep React offers a range of color variants for components. To customize the color scheme, you can use the + available color options such as gray,info,error,warning and success. Simply set the desired color variant as a + prop when using the component, and it will reflect the chosen color. + + + + + Q. Can I add additional content to notifications? + + + + Yes, the Notification component in the Keep React allows you to include extra content alongside the primary + message. The additionalContent prop can be used to display supplementary information, such as buttons, links, + or icons, within the notification to provide users with more context and options. + + + + ) +} + +export const SkeletonComponent = () => { + return ( +
+ + + + + + + + + + + + + + +
+ ) +} diff --git a/app/components/CopyCode.tsx b/app/components/CopyCode.tsx index 4f5fcd42..6efcb61c 100644 --- a/app/components/CopyCode.tsx +++ b/app/components/CopyCode.tsx @@ -8,11 +8,16 @@ import { Skeleton } from '../src' const CopyCode = ({ code }: { code: string }) => { const { copy, copyToClipboard } = useCopy() - const [isClient, setIsClient] = useState(false) useEffect(() => { - setIsClient(true) + let ignore = false + if (!ignore) { + setIsClient(true) + } + return () => { + ignore = true + } }, []) return (
@@ -28,7 +33,7 @@ const CopyCode = ({ code }: { code: string }) => { ) : ( - + )}
-

RESOURCES

-
-

- ©{new Date().getFullYear()} All Rights Reserved by{' '} - +

+ ©{new Date().getFullYear()} All Rights Reserved by   + StaticMania - - . +

diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx new file mode 100644 index 00000000..cd14605e --- /dev/null +++ b/app/components/Hero.tsx @@ -0,0 +1,60 @@ +'use client' +import Image from 'next/image' +import Link from 'next/link' +import { Check, Clipboard } from 'phosphor-react' +import useCopy from '~/hooks/useCopy' +import HeroImg from '../../public/images/home/hero-1.png' + +const Hero = () => { + const { copy, copyToClipboard } = useCopy() + return ( +
+
+
+
+
+ + Keep Product Hunt + +

+ Supercharge your web + development with + Keep React +

+

+ Elevate your web projects with Keep React's 40+ customizable components. Access open-source + resources for efficient development and bring your ideas to life with ease. +

+
+
+ npm install keep-react + +
+ + Get Started + +
+

⭐ Got 1.2k stars on Github Repository

+
+
+
+ +
+
+
+
+ ) +} + +export default Hero diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx index 0aaa6092..662980f0 100644 --- a/app/components/Navbar.tsx +++ b/app/components/Navbar.tsx @@ -2,7 +2,7 @@ import Image from 'next/image' import Link from 'next/link' import { usePathname } from 'next/navigation' -import { List, MagnifyingGlass, X } from 'phosphor-react' +import { Command, List, MagnifyingGlass, X } from 'phosphor-react' import { useEffect, useState } from 'react' import { gettingStartedRoutes, navbarRoutes, routes } from '../../routes/routes' import { Accordion, Typography } from '../src' @@ -10,26 +10,31 @@ import Search from './Search' const Navbar = () => { const [active, setActive] = useState(false) - const [showModal, setShowMainModal] = useState(false) + const [isOpen, setIsOpen] = useState(false) const pathname = usePathname() + const openModal = () => { + setIsOpen(true) + } + + const closeModal = () => { + setIsOpen(false) + } + const IsActive = (str: string) => { - const lastPart = pathname.toLocaleLowerCase().split('/').pop() - return str.toLocaleLowerCase() === '/' + lastPart + const lastPart = pathname.toLowerCase().split('/').pop() + const strPart = str.toLowerCase().split('/').pop() + return strPart === lastPart } useEffect(() => { setActive(false) - setShowMainModal(false) + setIsOpen(false) }, [pathname]) - const handleModal = () => { - setShowMainModal(!showModal) - } - return (
-
+
- {showModal && } -
+ +
- - - - - - - - - + + + - - + className="rounded-lg bg-primary-25 p-2.5 transition-all duration-300 hover:bg-primary-50"> + + + className="rounded-lg bg-metal-900 px-4 py-2.5 text-body-4 font-normal capitalize text-white transition-all duration-300 hover:bg-metal-800"> get started
-
+
+ + + className="rounded-lg bg-primary-25 p-2.5 transition duration-300 hover:bg-primary-50"> - - - - - + className="rounded-lg bg-primary-25 p-2.5 transition duration-300 hover:bg-primary-50"> -
-
-
- } - addonPosition="left" - value={query} - handleOnChange={(e: any) => setQuery(e.target.value)} - ref={inputFocus} - /> -
- - -

- {!query && !storedData.length ? ( - No recent searches - ) : !query && storedData.length ? ( - Recent searches - ) : ( - Documentation - )} -

+ useEffect(() => { + const down = (e: KeyboardEvent) => { + if ((e.key === 'k' && (e.metaKey || e.ctrlKey)) || e.key === '/') { + if ( + (e.target instanceof HTMLElement && e.target.isContentEditable) || + e.target instanceof HTMLInputElement || + e.target instanceof HTMLTextAreaElement || + e.target instanceof HTMLSelectElement + ) { + return + } + + e.preventDefault() + setIsOpen && setIsOpen((open) => !open) + } + } - {!query && storedData.length - ? storedData?.map((item: result) => ( - - {item.name} - - - - - )) - : null} + document.addEventListener('keydown', down) + return () => document.removeEventListener('keydown', down) + }, [setIsOpen]) - {loading ? ( -
- - - - - - -
- ) : query && results.length ? ( - results?.slice(0, 1).map((item) => ( -
- - {item.name} - - - - -
- {item?.sections?.slice(0, 5).map((sec) => ( - - {sec.title} - - - - + return ( + + +
+ + + + +
+ + +

Quick Access

+
    +
  • + + + Figma + +
    • +
  • + + + Installation + +
    • +
  • + + + Typography + +
    • +
+ + +

Components

+ + {isPending ? ( +

Loading...

+ ) : data.length > 0 ? ( +
    + {data.map((route) => ( +
  • + + + {route.name} + +
    • ))} -
-
- )) - ) : !loading && query && !results.length ? ( -
-

No Result Found with {query} word

-
- ) : null} -
+ + ) : ( +

No results found.

+ )} + + + ) } diff --git a/app/components/TopProgressBar.tsx b/app/components/TopProgressBar.tsx index 0c62232f..3239325c 100644 --- a/app/components/TopProgressBar.tsx +++ b/app/components/TopProgressBar.tsx @@ -5,7 +5,7 @@ import { Suspense } from 'react' const TopProgressBar = () => { return ( - + ) } diff --git a/app/docs.css b/app/docs.css index cfb20d20..d6864b1d 100644 --- a/app/docs.css +++ b/app/docs.css @@ -1,8 +1,8 @@ #mainContent > h2 { - @apply border-b border-b-metal-200 pb-2 text-body-3 font-semibold leading-6 tracking-[-0.3px] text-metal-900; + @apply border-b border-b-metal-200 pb-2 text-body-2 font-semibold text-metal-900; } #mainContent > p { - @apply mt-4 text-body-5 font-normal leading-6 tracking-[-0.3px] text-metal-700 md:text-body-4; + @apply mt-4 text-body-3 font-normal text-metal-500; } #mainContent > p a { @@ -56,7 +56,7 @@ } #visible-table-of-contents li { - @apply my-2 -ml-px border-l border-l-transparent pl-3 text-body-5 leading-7 tracking-[-0.2px] text-metal-500 hover:border-l-metal-900 hover:text-metal-900 active:text-metal-900; + @apply my-2 -ml-px border-l border-l-transparent pl-3 text-body-4 text-metal-500 hover:border-l-metal-900 hover:text-metal-900 active:text-metal-900; } #visible-table-of-contents li:has(.active-link) { diff --git a/app/docs/components/accordion/accordion.mdx b/app/docs/components/accordion/accordion.mdx index 4ce240a6..5b163b5f 100644 --- a/app/docs/components/accordion/accordion.mdx +++ b/app/docs/components/accordion/accordion.mdx @@ -4,9 +4,8 @@ import { AccordionOpenPanel, AccordionOpenPanelCode } from './variant/AccordionO import { DisabledAccordionCode, DisabledAccordion } from './variant/DisabledAccordion' import { AccordionWithIcon, AccordionWithIconCode } from './variant/AccordionWithIcon' import { CustomizeAccordion, CustomizeAccordionCode } from './variant/CustomizeAccordion' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' +import ComponentApi from '../../../components/ComponentApi' import { accordionApiData } from './accordionApi' ## Table of Contents diff --git a/app/docs/components/accordion/variant/AccordionFlush.tsx b/app/docs/components/accordion/variant/AccordionFlush.tsx index 6f89d1b5..10153930 100644 --- a/app/docs/components/accordion/variant/AccordionFlush.tsx +++ b/app/docs/components/accordion/variant/AccordionFlush.tsx @@ -6,7 +6,8 @@ const AccordionFlush = () => { - What is the purpose of the Keep React? + Q. What is the purpose of the Keep React? + The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a unified @@ -16,7 +17,8 @@ const AccordionFlush = () => { - How do I customize the color scheme of components? + Q. How do I customize the color scheme of components? + The Keep React offers a range of color variants for components. To customize the color scheme, you can use the @@ -26,7 +28,8 @@ const AccordionFlush = () => { - Can I add additional content to notifications? + Q. Can I add additional content to notifications? + Yes, the Notification component in the Keep React allows you to include extra content alongside the primary @@ -47,7 +50,8 @@ export const AccordionComponent = () => { - What is the purpose of the Keep React? + Q. What is the purpose of the Keep React? + The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a unified @@ -57,7 +61,8 @@ export const AccordionComponent = () => { - How do I customize the color scheme of components? + Q. How do I customize the color scheme of components? + The Keep React offers a range of color variants for components. To customize the color scheme, you can use the @@ -67,7 +72,8 @@ export const AccordionComponent = () => { - Can I add additional content to notifications? + Q. Can I add additional content to notifications? + Yes, the Notification component in the Keep React allows you to include extra content alongside the primary @@ -78,6 +84,7 @@ export const AccordionComponent = () => { ) } + ` export { AccordionFlush, AccordionFlushCode } diff --git a/app/docs/components/accordion/variant/AccordionOpenPanel.tsx b/app/docs/components/accordion/variant/AccordionOpenPanel.tsx index 1a9a1319..f6b8687e 100644 --- a/app/docs/components/accordion/variant/AccordionOpenPanel.tsx +++ b/app/docs/components/accordion/variant/AccordionOpenPanel.tsx @@ -3,10 +3,11 @@ import { Accordion } from '../../../../src' const AccordionOpenPanel = () => { return ( - + - What is the purpose of the Keep React? + Q. What is the purpose of the Keep React? + The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a unified @@ -16,7 +17,8 @@ const AccordionOpenPanel = () => { - How do I customize the color scheme of components? + Q. How do I customize the color scheme of components? + The Keep React offers a range of color variants for components. To customize the color scheme, you can use the @@ -26,7 +28,8 @@ const AccordionOpenPanel = () => { - Can I add additional content to notifications? + Q. Can I add additional content to notifications? + Yes, the Notification component in the Keep React allows you to include extra content alongside the primary @@ -39,15 +42,16 @@ const AccordionOpenPanel = () => { } const AccordionOpenPanelCode = ` -"use client"; -import { Accordion } from "keep-react"; +'use client' +import { Accordion } from 'keep-react' export const AccordionComponent = () => { return ( - + - What is the purpose of the Keep React? + Q. What is the purpose of the Keep React? + The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a unified @@ -57,22 +61,24 @@ export const AccordionComponent = () => { - How do I customize the color scheme of components? + Q. How do I customize the color scheme of components? + - The Keep React offers a range of color variants for components. To customize the color scheme, you can use - the available color options such as gray,info,error,warning and success. Simply set the desired color - variant as a prop when using the component, and it will reflect the chosen color. + The Keep React offers a range of color variants for components. To customize the color scheme, you can use the + available color options such as gray,info,error,warning and success. Simply set the desired color variant as a + prop when using the component, and it will reflect the chosen color. - Can I add additional content to notifications? + Q. Can I add additional content to notifications? + Yes, the Notification component in the Keep React allows you to include extra content alongside the primary - message. The additionalContent prop can be used to display supplementary information, such as buttons, - links, or icons, within the notification to provide users with more context and options. + message. The additionalContent prop can be used to display supplementary information, such as buttons, links, + or icons, within the notification to provide users with more context and options. diff --git a/app/docs/components/accordion/variant/AccordionWithIcon.tsx b/app/docs/components/accordion/variant/AccordionWithIcon.tsx index 73e0dc5f..0e0792f7 100644 --- a/app/docs/components/accordion/variant/AccordionWithIcon.tsx +++ b/app/docs/components/accordion/variant/AccordionWithIcon.tsx @@ -4,10 +4,10 @@ import { Accordion } from '../../../../src' const AccordionWithIcon = () => { return ( - + - What is the purpose of the Keep React? + Q. What is the purpose of the Keep React? @@ -20,7 +20,7 @@ const AccordionWithIcon = () => { - How do I customize the color scheme of components? + Q. How do I customize the color scheme of components? @@ -33,7 +33,7 @@ const AccordionWithIcon = () => { - Can I add additional content to notifications? + Q. Can I add additional content to notifications? @@ -55,10 +55,10 @@ import { Plus } from "phosphor-react"; export const AccordionComponent = () => { return ( - + - What is the purpose of the Keep React? + Q. What is the purpose of the Keep React? @@ -71,7 +71,7 @@ export const AccordionComponent = () => { - How do I customize the color scheme of components? + Q. How do I customize the color scheme of components? @@ -84,7 +84,7 @@ export const AccordionComponent = () => { - Can I add additional content to notifications? + Q. Can I add additional content to notifications? diff --git a/app/docs/components/accordion/variant/CustomizeAccordion.tsx b/app/docs/components/accordion/variant/CustomizeAccordion.tsx index c9afb397..38c4d640 100644 --- a/app/docs/components/accordion/variant/CustomizeAccordion.tsx +++ b/app/docs/components/accordion/variant/CustomizeAccordion.tsx @@ -1,18 +1,15 @@ 'use client' -import { Plus } from 'phosphor-react' import { Accordion } from '../../../../src' const CustomizeAccordion = () => { return ( - - - What is the of the Keep React? - - - + + + Q. What is the of the Keep React? + - + The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a unified user experience across our products. It simplifies the design and development process by providing ready-to-use components that can be easily customized and integrated into various applications. @@ -24,20 +21,17 @@ const CustomizeAccordion = () => { const CustomizeAccordionCode = ` 'use client' -import { Plus } from 'phosphor-react' import { Accordion } from 'keep-react' export const AccordionComponent = () => { return ( - - - What is the of the Keep React? - - - + + + Q. What is the of the Keep React? + - + The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a unified user experience across our products. It simplifies the design and development process by providing ready-to-use components that can be easily customized and integrated into various applications. diff --git a/app/docs/components/accordion/variant/DefaultAccordion.tsx b/app/docs/components/accordion/variant/DefaultAccordion.tsx index 3ed0bb2d..54e872e1 100644 --- a/app/docs/components/accordion/variant/DefaultAccordion.tsx +++ b/app/docs/components/accordion/variant/DefaultAccordion.tsx @@ -6,7 +6,8 @@ const DefaultAccordion = () => { - What is the of the Keep React? + Q. What is the purpose of the Keep React? + The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a unified @@ -27,7 +28,8 @@ export const AccordionComponent = () => { - What is the of the Keep React? + Q. What is the purpose of the Keep React? + The Keep React is a collection of UI components, styles, and guidelines that ensure consistency and a diff --git a/app/docs/components/accordion/variant/DisabledAccordion.tsx b/app/docs/components/accordion/variant/DisabledAccordion.tsx index 04c19366..4e7275b7 100644 --- a/app/docs/components/accordion/variant/DisabledAccordion.tsx +++ b/app/docs/components/accordion/variant/DisabledAccordion.tsx @@ -6,17 +6,11 @@ const DisabledAccordion = () => { - What is keep Design? + Q. What is keep Design? -

- keep Design is an open-source library of interactive components built on top of Tailwind CSS including - buttons, dropdowns, modals, navbar, and more. -

-

- Check out this guide to learn how to and start developing websites even faster with components on top of - Tailwind CSS. -

+ keep Design is an open-source library of interactive components built on top of Tailwind CSS including + buttons, dropdowns, modals, navbar, and more. @@ -35,14 +29,8 @@ export const AccordionComponent = () => { What is keep Design? -

- keep Design is an open-source library of interactive components built on top of Tailwind CSS including - buttons, dropdowns, modals, navbar, and more. -

-

- Check out this guide to learn how to and start developing websites even faster with components on top of - Tailwind CSS. -

+ keep Design is an open-source library of interactive components built on top of Tailwind CSS including + buttons, dropdowns, modals, navbar, and more. diff --git a/app/docs/components/alert/alert.mdx b/app/docs/components/alert/alert.mdx index 90e6272a..1b7cf18b 100644 --- a/app/docs/components/alert/alert.mdx +++ b/app/docs/components/alert/alert.mdx @@ -1,14 +1,13 @@ import { DefaultAlert, DefaultAlertCode } from './variant/DefaultAlert' import { AlertWithDismissIcon, AlertWithDismissIconCode } from './variant/AlertWithDismissIcon' -import { AlertWithRounded, AlertWithRoundedCode } from './variant/AlertWithRounded' import { AlertWithColorVariant, AlertWithColorVariantCode } from './variant/AlertColorVariant' -import { AlertWithBorderAccent, AlertWithBorderAccentCode } from './variant/AlertWithBorderAccent' -import { CustomizeAlert, CustomizeAlertCode } from './variant/CustomizeAlert' +import { AlertWithBgColor, AlertWithBgColorCode } from './variant/AlertWithBgColor' +import { AlertWithCard, AlertWithCardCode } from './variant/AlertWithCard' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" -import { alertApiData } from './alertApi' +import CodePreview from '../../../components/CodePreview' + +import ComponentApi from '../../../components/ComponentApi' +import { alertApiData, dismissButtonApi } from './alertApi' ## Table of Contents @@ -22,44 +21,36 @@ The Default Alert is a clean and simple design, ideal for conveying straightforw -## Dismissible Alerts - -For alerts that users can close, the Dismiss Icon comes in handy. Pass a handler function to the `onDismiss` prop to enable this feature. - - - - - -## Softly Rounded Alerts +## Color Variants of Alerts -If you prefer a more approachable appearance, the Rounded Alert is a great option. By setting the `rounded` prop to `true`, the alert corners become rounded, giving it a friendly touch. +Colors can convey the nature of alerts. While the default color is `primary`, you can choose from `secondary`, `success`, `warning`, or `error`. Simply set the `color` prop accordingly. - - + + -## Accented Border Alerts +## Alert With Background Color -To make alerts stand out, you can add a border using the `withBorder` prop set to `true`. For an elegant accent, use the `withBorderAccent` prop. By default, the accent appears on the left, but you can customize its position using `withBorderAccentPosition="left"|"right"|"top"|"bottom"`. +Switch the background color of alerts using the `withBg={true}` prop. By default, `withBg` is set to `false`. - - + + -## Color Variants of Alerts +## Alert With Card -Colors can convey the nature of alerts. While the default color is `info`, you can choose from `success`, `warning`, `error`, `gray`, or `info`. Simply set the `color` prop accordingly. +Display the alert message with a card view, and access all the available props for customization. - - + + -## Customize Alert +## Dismissible Alerts -Alert is fully customizable component. You can inject any className from tailwind as your desired. +Dismiss alert messages by using the `dismiss` prop. The default behavior is server-side rendering. If you want to use a click event handler, set the alert as a client-side component. - - + + ## API Reference @@ -67,3 +58,9 @@ Alert is fully customizable component. You can inject any className from tailwin Explore the available props for the Alert component + +## Dismiss Button API Reference + +Explore the available props for the `` component + + diff --git a/app/docs/components/alert/alertApi.ts b/app/docs/components/alert/alertApi.ts index 9c46c57b..ec489b69 100644 --- a/app/docs/components/alert/alertApi.ts +++ b/app/docs/components/alert/alertApi.ts @@ -3,67 +3,42 @@ export const alertApiData = [ id: 1, propsName: 'color', propsDescription: 'The color variant of the alert.', - propsType: ['primary', 'metal', 'success', 'warning', 'error'], + propsType: ['primary', 'secondary', 'success', 'warning', 'error'], default: 'primary', }, { id: 2, - propsName: 'icon', - propsDescription: 'Custom icon to be displayed in the alert.', - propsType: 'ReactNode', - default: '', - }, - { - id: 3, propsName: 'dismiss', propsDescription: 'Enables or disables the dismiss icon.', propsType: 'boolean', default: 'false', }, { - id: 4, - propsName: 'onDismiss', - propsDescription: 'Handler function to be called when the dismiss icon is clicked.', - propsType: 'function', - default: '() => void', - }, - { - id: 5, - propsName: 'rounded', - propsDescription: 'Adds rounded corners to the alert.', - propsType: 'boolean', - default: 'false', - }, - { - id: 6, - propsName: 'withBorder', - propsDescription: 'Adds a border around the alert.', - propsType: 'boolean', - default: 'false', - }, - { - id: 7, - propsName: 'withBorderAccent', - propsDescription: 'Adds a border accent to the alert.', + id: 3, + propsName: 'withBg', + propsDescription: 'Enables background color.', propsType: 'boolean', default: 'false', }, { - id: 8, - propsName: 'withBorderAccentPosition', - propsDescription: 'Specifies the position of the border accent.', - propsType: ['left', 'right', 'top', 'bottom'], - default: 'left', - }, - { - id: 9, - propsName: 'BtnStyle', - propsDescription: 'Injects the class name in alert dismiss button.', + id: 4, + propsName: 'className', + propsDescription: 'Injects the class name', propsType: 'string', default: 'None', }, +] + +export const dismissButtonApi = [ { - id: 10, + id: 1, + propsName: 'onClick', + propsDescription: 'Handler function to be called when the dismiss icon is clicked.', + propsType: 'function', + default: '() => void', + }, + { + id: 2, propsName: 'className', propsDescription: 'Injects the class name', propsType: 'string', diff --git a/app/docs/components/alert/variant/AlertColorVariant.tsx b/app/docs/components/alert/variant/AlertColorVariant.tsx index dd71156a..fe3bd2e1 100644 --- a/app/docs/components/alert/variant/AlertColorVariant.tsx +++ b/app/docs/components/alert/variant/AlertColorVariant.tsx @@ -1,128 +1,53 @@ 'use client' -import Link from 'next/link' import { Alert } from '../../../../src' -import { useState } from 'react' -import { CheckCircle, Info, XCircle } from 'phosphor-react' const AlertWithColorVariant = () => { - const [dismiss, setDismiss] = useState([false, false, false, false, false]) - - const handleDismiss = (index: number) => { - const updatedDismissStates = [...dismiss] - updatedDismissStates[index] = true - setDismiss(updatedDismissStates) - } return (
- handleDismiss(1)} - dismiss={dismiss[1]} - rounded={true} - withBorder={true} - withBorderAccent={true} - color="primary"> + - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - + + Alert here + A short description followed by two actions items.. + Learn More + - handleDismiss(2)} - dismiss={dismiss[2]} - rounded={true} - withBorder={true} - withBorderAccent={true} - color="success"> + - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - + + Alert here + A short description followed by two actions items.. + Learn More + - handleDismiss(3)} - dismiss={dismiss[3]} - rounded={true} - withBorder={true} - withBorderAccent={true} - color="metal"> + - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - + + Alert here + A short description followed by two actions items.. + Learn More + - handleDismiss(4)} - dismiss={dismiss[4]} - rounded={true} - withBorder={true} - withBorderAccent={true} - color="warning"> + - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - + + Alert here + A short description followed by two actions items.. + Learn More + - handleDismiss(5)} - dismiss={dismiss[5]} - rounded={true} - withBorder={true} - withBorderAccent={true} - color="error"> + - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - + + Alert here + A short description followed by two actions items.. + Learn More +
) @@ -130,127 +55,55 @@ const AlertWithColorVariant = () => { const AlertWithColorVariantCode = ` 'use client' -import Link from 'next/link' -import { useState } from 'react' import { Alert } from 'keep-react' -import { CheckCircle, Info, XCircle } from 'phosphor-react' export const AlertComponent = () => { - const [showAlert, setShowAlert] = useState(false) - const onDismiss = () => { - setShowAlert(!showAlert) - } return (
- + - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - + + Alert here + A short description followed by two actions items.. + Learn More + - + - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - + + Alert here + A short description followed by two actions items.. + Learn More + - + - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - + + Alert here + A short description followed by two actions items.. + Learn More + - + - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - + + Alert here + A short description followed by two actions items.. + Learn More + - + - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - + + Alert here + A short description followed by two actions items.. + Learn More +
) diff --git a/app/docs/components/alert/variant/AlertWithBgColor.tsx b/app/docs/components/alert/variant/AlertWithBgColor.tsx new file mode 100644 index 00000000..5be65cee --- /dev/null +++ b/app/docs/components/alert/variant/AlertWithBgColor.tsx @@ -0,0 +1,75 @@ +'use client' +import { Alert } from '../../../../src' + +const AlertWithBgColor = () => { + return ( +
+ + + + Alert here + A short description followed by two actions items.. + + Learn More + + + + + + Alert here + A short description followed by two actions items.. + + Learn More + + + + + + Alert here + A short description followed by two actions items.. + + Learn More + + + + + + Alert here + A short description followed by two actions items.. + + Learn More + + + + + + Alert here + A short description followed by two actions items.. + + Learn More + + +
+ ) +} + +const AlertWithBgColorCode = ` +'use client' +import { Alert } from 'keep-react' + +export const AlertComponent = () => { + return ( + + + + Alert here + A short description followed by two actions items.. + + Learn More + + + ) +} +` + +export { AlertWithBgColor, AlertWithBgColorCode } diff --git a/app/docs/components/alert/variant/AlertWithBorderAccent.tsx b/app/docs/components/alert/variant/AlertWithBorderAccent.tsx deleted file mode 100644 index 4081d7d8..00000000 --- a/app/docs/components/alert/variant/AlertWithBorderAccent.tsx +++ /dev/null @@ -1,65 +0,0 @@ -'use client' -import Link from 'next/link' -import { Alert } from '../../../../src' -import { useState } from 'react' -import { Info } from 'phosphor-react' - -const AlertWithBorderAccent = () => { - const [showAlert, setShowAlert] = useState(false) - const onDismiss = () => { - setShowAlert(!showAlert) - } - return ( - - - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - - - - ) -} - -const AlertWithBorderAccentCode = ` -"use client"; -import Link from "next/link"; -import { useState } from "react"; -import { Alert } from "keep-react"; -import { Info } from "phosphor-react"; - -export const AlertComponent = () => { - const [showAlert, setShowAlert] = useState(false) - const onDismiss = () => { - setShowAlert(!showAlert) - } - return ( - - - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - - - - ) -} -` - -export { AlertWithBorderAccent, AlertWithBorderAccentCode } diff --git a/app/docs/components/alert/variant/AlertWithCard.tsx b/app/docs/components/alert/variant/AlertWithCard.tsx new file mode 100644 index 00000000..280192b0 --- /dev/null +++ b/app/docs/components/alert/variant/AlertWithCard.tsx @@ -0,0 +1,178 @@ +'use client' +import { Alert, Button, Checkbox, Label } from '../../../../src' + +const AlertWithCard = () => { + return ( +
+ + + + + Alert here + + A short description followed by two actions items. + +
+ + +
+ + + + + + + + + + + + + Alert here + + A short description followed by two actions items. + +
+ + +
+ + + + + + + + + + + + + Alert here + + A short description followed by two actions items. + +
+ + +
+ + + + + + + + + + + + + Alert here + + A short description followed by two actions items. + +
+ + +
+ + + + + + + + + + + + + Alert here + + A short description followed by two actions items. + +
+ + +
+ + + + + + + + +
+ ) +} + +const AlertWithCardCode = ` +'use client' +import { Alert, Button, Checkbox } from 'keep-react' + +export const AlertComponent = () => { + return ( + + + + + Alert here + + A short description followed by two actions items. + +
+ + +
+ + + + + + + + + ) +} + +` + +export { AlertWithCard, AlertWithCardCode } diff --git a/app/docs/components/alert/variant/AlertWithDismissIcon.tsx b/app/docs/components/alert/variant/AlertWithDismissIcon.tsx index 7f92e6cb..88ec2a3b 100644 --- a/app/docs/components/alert/variant/AlertWithDismissIcon.tsx +++ b/app/docs/components/alert/variant/AlertWithDismissIcon.tsx @@ -1,8 +1,6 @@ 'use client' -import Link from 'next/link' -import { Alert } from '../../../../src' import { useState } from 'react' -import { Info } from 'phosphor-react' +import { Alert } from '../../../../src' const AlertWithDismissIcon = () => { const [showAlert, setShowAlert] = useState(false) @@ -10,31 +8,22 @@ const AlertWithDismissIcon = () => { setShowAlert(!showAlert) } return ( - + - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - + + Alert here + A short description followed by two actions items. + Learn More + ) } const AlertWithDismissIconCode = ` 'use client' -import Link from 'next/link' import { useState } from 'react' import { Alert } from 'keep-react' -import { Info } from 'phosphor-react' const AlertComponent = () => { const [showAlert, setShowAlert] = useState(false) @@ -42,21 +31,14 @@ const AlertComponent = () => { setShowAlert(!showAlert) } return ( - - - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - + + + + Alert here + A short description followed by two actions items. + Learn More + ) } diff --git a/app/docs/components/alert/variant/AlertWithRounded.tsx b/app/docs/components/alert/variant/AlertWithRounded.tsx deleted file mode 100644 index 57071977..00000000 --- a/app/docs/components/alert/variant/AlertWithRounded.tsx +++ /dev/null @@ -1,65 +0,0 @@ -'use client' -import Link from 'next/link' -import { Alert } from '../../../../src' -import { useState } from 'react' -import { Info } from 'phosphor-react' - -const AlertWithRounded = () => { - const [showAlert, setShowAlert] = useState(false) - const onDismiss = () => { - setShowAlert(!showAlert) - } - return ( - - - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - - - - ) -} - -const AlertWithRoundedCode = ` -'use client' -import Link from 'next/link' -import { useState } from 'react' -import { Alert } from 'keep-react' -import { Info } from 'phosphor-react' - -const AlertComponent = () => { - const [showAlert, setShowAlert] = useState(false) - const onDismiss = () => { - setShowAlert(!showAlert) - } - return ( - - - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - - - - ) -} -` - -export { AlertWithRounded, AlertWithRoundedCode } diff --git a/app/docs/components/alert/variant/CustomizeAlert.tsx b/app/docs/components/alert/variant/CustomizeAlert.tsx deleted file mode 100644 index d48376af..00000000 --- a/app/docs/components/alert/variant/CustomizeAlert.tsx +++ /dev/null @@ -1,54 +0,0 @@ -'use client' -import { Alert } from '../../../../src' -import Link from 'next/link' -import { Info } from 'phosphor-react' - -const CustomizeAlert = () => { - return ( - - - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - - - - ) -} - -const CustomizeAlertCode = ` -'use client' -import Link from 'next/link' -import { Alert } from 'keep-react' -import { Info } from 'phosphor-react' - -export const AlertComponent = () => { - return ( - - - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - - - - ) -} -` -export { CustomizeAlert, CustomizeAlertCode } diff --git a/app/docs/components/alert/variant/DefaultAlert.tsx b/app/docs/components/alert/variant/DefaultAlert.tsx index 6f7cac4b..7bdc4397 100644 --- a/app/docs/components/alert/variant/DefaultAlert.tsx +++ b/app/docs/components/alert/variant/DefaultAlert.tsx @@ -1,52 +1,34 @@ 'use client' import { Alert } from '../../../../src' -import Link from 'next/link' -import { Info } from 'phosphor-react' const DefaultAlert = () => { return ( - + - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - + + Alert here + A short description followed by two actions items. + Learn More + ) } const DefaultAlertCode = ` 'use client' -import Link from 'next/link' import { Alert } from 'keep-react' -import { Info } from 'phosphor-react' export const AlertComponent = () => { return ( - - - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - + + + + Alert here + A short description followed by two actions items. + Learn More + ) } diff --git a/app/docs/components/areaChart/AreaChart.mdx b/app/docs/components/areaChart/AreaChart.mdx index 24a4fe6d..dcd8a4da 100644 --- a/app/docs/components/areaChart/AreaChart.mdx +++ b/app/docs/components/areaChart/AreaChart.mdx @@ -3,9 +3,8 @@ import { AreaChartWithDoubleSeries, AreaChartWithDoubleSeriesCode } from './vari import { AreaChartWithGridGraphLine, AreaChartWithGridGraphLineCode } from './variant/ChartWithGridlineGraphline' import { SmoothAreaChart, SmoothAreaChartCode } from './variant/SmoothAreaChart' import { areaChartAPIData } from './AreaChartApi' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents diff --git a/app/docs/components/areaChart/AreaChartApi.ts b/app/docs/components/areaChart/AreaChartApi.ts index 72e10805..ed2459c2 100644 --- a/app/docs/components/areaChart/AreaChartApi.ts +++ b/app/docs/components/areaChart/AreaChartApi.ts @@ -97,4 +97,18 @@ export const areaChartAPIData = [ propsDescription: 'Color for the secondary area stroke', default: '#94ABFF', }, + { + id: 15, + propsName: 'tooltipBtnVariant', + propsType: ['primary', 'dashed', 'text', 'linkPrimary', 'linkGray', 'outlineGray', 'outlinePrimary', 'default'], + propsDescription: 'Variant of the tooltip button.', + default: 'default', + }, + { + id: 16, + propsName: 'tooltipBtnStyle', + propsType: 'string', + propsDescription: 'Custom style of the tooltip.', + default: 'None', + }, ] diff --git a/app/docs/components/avatar/avatar.mdx b/app/docs/components/avatar/avatar.mdx index a9dc8347..ddd35197 100644 --- a/app/docs/components/avatar/avatar.mdx +++ b/app/docs/components/avatar/avatar.mdx @@ -3,11 +3,12 @@ import { ShapeAvatar, ShapeAvatarCode } from './variant/ShapeAvatar' import { SizesOfAvatar, SizesOfAvatarCode } from './variant/SizesOfAvatar' import { ImageOfAvatar, ImageOfAvatarCode } from './variant/ImageOfAvatar' import { StatusOfAvatar, StatusOfAvatarCode } from './variant/StatusOfAvatar' -import { NotificationOfAvatar, NotificationOfAvatarCode } from './variant/NotificationOfAvatar' +import { AvatarGroup, AvatarGroupCode } from './variant/AvatarGroup' + import { avatarApiData } from './avatarApi' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' + +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents @@ -23,7 +24,7 @@ When you enable the placeholder option, a default avatar image appears when ther ## Avatar Shapes -Choose from three different avatar shapes: round, round square, or square. Just use the `shape` prop with values: `"circle"`, `"rounded"`, or `"square"`. +Choose between two avatar shapes: rounded and circle. Utilize the shape prop with values `"circle"` or `"rounded"`. @@ -31,7 +32,7 @@ Choose from three different avatar shapes: round, round square, or square. Just ## Avatar Sizes -There are various avatar sizes to fit your design. To change the size, use the `size` prop with values: `xs`, `sm`, `md`, `lg`, `xl`, or `2xl`. +There are various avatar sizes to fit your design. To change the size, use the `size` prop with values: `"sm"`, `"md"`, `"lg"`, `"xl"`, or `"2xl"`. @@ -39,7 +40,7 @@ There are various avatar sizes to fit your design. To change the size, use the ` ## Using User Images -Instead of an icon, you can display a user's image. Use the `img` prop and provide the path to the user's image, whether it's a local or remote URL. +Display a user's image using the `img` prop. Provide the path to the user's image, whether it's a local or remote URL. @@ -47,18 +48,18 @@ Instead of an icon, you can display a user's image. Use the `img` prop and provi ## Avatar Status -The avatar's status reflects the user's availability. You can show the user's status using the `status` prop with values: `online`, `offline`, `away`, or `busy`. You can also customize the status position with the `statusPosition` prop, which accepts values: `bottom-left`, `bottom-right`, `top-left`, or `top-right`. +The avatar's status reflects the user's availability. Show the user's status using the `"active"` prop, and use the `"verified"` prop to indicate a verified status. -## Avatar Notifications +## Avatar Group -You can use the avatar to indicate notifications for the user. Use the `status` prop with values: `"online"`, `"offline"`, `"away"`, or `"busy"` and set the `statusType` prop to `notification` to display notification indicators. +Display multiple avatars in a group setting. Customize the layout for visually appealing designs. - - + + ## API Reference diff --git a/app/docs/components/avatar/avatarApi.ts b/app/docs/components/avatar/avatarApi.ts index 43a130d5..9722a848 100644 --- a/app/docs/components/avatar/avatarApi.ts +++ b/app/docs/components/avatar/avatarApi.ts @@ -8,79 +8,44 @@ export const avatarApiData = [ }, { id: 2, - propsName: 'bordered', - propsType: 'boolean', - propsDescription: 'Determines if the avatar has a border.', - default: 'false', - }, - { - id: 3, propsName: 'img', propsType: 'string', propsDescription: "Path to the user's image", default: '/avatar.png', }, { - id: 4, + id: 3, propsName: 'size', - propsType: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'], + propsType: ['sm', 'md', 'lg', 'xl', '2xl'], propsDescription: 'Specifies the size of the avatar', default: 'md', }, { - id: 5, - propsName: 'shape', - propsType: ['circle', 'rounded', 'square'], - propsDescription: 'The shape of the avatar.', - default: 'square', + id: 7, + propsName: 'color', + propsType: ['primary', 'secondary', 'success', 'warning', 'error'], + propsDescription: 'Specifies the color of the avatar', + default: 'secondary', }, { - id: 6, - propsName: 'stacked', - propsType: 'boolean', - propsDescription: 'Specifies if avatars should be stacked together.', - default: 'false', + id: 4, + propsName: 'shape', + propsType: ['circle', 'rounded'], + propsDescription: 'The shape of the avatar.', + default: 'circle', }, { - id: 8, + id: 5, propsName: 'status', - propsType: ['away', 'busy', 'offline', 'online'], + propsType: 'boolean', propsDescription: "Reflects the user's availability status.", - default: 'None', - }, - { - id: 9, - propsName: 'statusType', - propsType: ['dot', 'notification'], - propsDescription: 'Specifies the type of status', - default: 'None', - }, - { - id: 10, - propsName: 'statusPosition', - propsType: ['bottom-left', 'bottom-right', 'top-left', 'top-right'], - propsDescription: 'Specifies the position of the status indicator.', - default: 'bottom-right', - }, - { - id: 11, - propsName: 'totalNotification', - propsType: 'number', - propsDescription: 'Total number of notifications', - default: '99', + default: 'false', }, { - id: 12, + id: 6, propsName: 'className', propsType: 'string', propsDescription: 'Injects the class name in avatar', default: 'None', }, - { - id: 13, - propsName: 'statusStyle', - propsType: 'string', - propsDescription: 'Injects the class name in avatar status', - default: 'None', - }, ] diff --git a/app/docs/components/avatar/variant/AvatarGroup.tsx b/app/docs/components/avatar/variant/AvatarGroup.tsx new file mode 100644 index 00000000..986a4560 --- /dev/null +++ b/app/docs/components/avatar/variant/AvatarGroup.tsx @@ -0,0 +1,33 @@ +'use client' +import { Avatar } from '../../../../src' + +const AvatarGroup = () => { + return ( + + + + + + +9 + + ) +} + +const AvatarGroupCode = ` +'use client' +import { Avatar } from 'keep-react' + +const AvatarGroupComponent = () => { + return ( + + + + + + +9 + + ) +} +` + +export { AvatarGroup, AvatarGroupCode } diff --git a/app/docs/components/avatar/variant/DefaultAvatar.tsx b/app/docs/components/avatar/variant/DefaultAvatar.tsx index 84aaa039..cb0d7dee 100644 --- a/app/docs/components/avatar/variant/DefaultAvatar.tsx +++ b/app/docs/components/avatar/variant/DefaultAvatar.tsx @@ -6,11 +6,11 @@ const DefaultAvatar = () => { } const DefaultAvatarCode = ` -"use client"; -import { Avatar } from "keep-react"; +'use client' +import { Avatar } from 'keep-react' export const AvatarComponent = () => { - return ; + return } ` diff --git a/app/docs/components/avatar/variant/ImageOfAvatar.tsx b/app/docs/components/avatar/variant/ImageOfAvatar.tsx index c58752e1..8b130646 100644 --- a/app/docs/components/avatar/variant/ImageOfAvatar.tsx +++ b/app/docs/components/avatar/variant/ImageOfAvatar.tsx @@ -4,21 +4,23 @@ import { Avatar } from '../../../../src' const ImageOfAvatar = () => { return (
- - - + +
) } const ImageOfAvatarCode = ` -"use client"; -import { Avatar } from "keep-react"; +'use client' +import { Avatar } from "keep-react" export const AvatarComponent = () => { return ( - - ); + <> + + + + ) } ` diff --git a/app/docs/components/avatar/variant/NotificationOfAvatar.tsx b/app/docs/components/avatar/variant/NotificationOfAvatar.tsx deleted file mode 100644 index b5e23ee6..00000000 --- a/app/docs/components/avatar/variant/NotificationOfAvatar.tsx +++ /dev/null @@ -1,96 +0,0 @@ -'use client' -import { Avatar } from '../../../../src' - -const NotificationOfAvatar = () => { - return ( -
- - - - -
- ) -} - -const NotificationOfAvatarCode = ` -"use client"; -import { Avatar } from "keep-react"; - -export const AvatarComponent = () => { - return ( - <> - - - - - - ); -} -` - -export { NotificationOfAvatar, NotificationOfAvatarCode } diff --git a/app/docs/components/avatar/variant/ShapeAvatar.tsx b/app/docs/components/avatar/variant/ShapeAvatar.tsx index 019cea63..12a7269c 100644 --- a/app/docs/components/avatar/variant/ShapeAvatar.tsx +++ b/app/docs/components/avatar/variant/ShapeAvatar.tsx @@ -6,23 +6,20 @@ const ShapeAvatar = () => {
-
) } const ShapeAvatarCode = ` -"use client"; -import { Avatar } from "keep-react"; +import { Avatar } from "keep-react" export const AvatarComponent = () => { return ( <> - - ); + ) } ` diff --git a/app/docs/components/avatar/variant/SizesOfAvatar.tsx b/app/docs/components/avatar/variant/SizesOfAvatar.tsx index a136ee7d..8e814e56 100644 --- a/app/docs/components/avatar/variant/SizesOfAvatar.tsx +++ b/app/docs/components/avatar/variant/SizesOfAvatar.tsx @@ -4,31 +4,29 @@ import { Avatar } from '../../../../src' const SizesOfAvatar = () => { return (
- - - - - - + + + + +
) } const SizesOfAvatarCode = ` -"use client"; -import { Avatar } from "keep-react"; +'use client' +import { Avatar } from "keep-react" export const AvatarComponent = () => { return ( <> - - - - - - + + + + + - ); + ) } ` diff --git a/app/docs/components/avatar/variant/StatusOfAvatar.tsx b/app/docs/components/avatar/variant/StatusOfAvatar.tsx index 602191f7..ea706689 100644 --- a/app/docs/components/avatar/variant/StatusOfAvatar.tsx +++ b/app/docs/components/avatar/variant/StatusOfAvatar.tsx @@ -3,56 +3,22 @@ import { Avatar } from '../../../../src' const StatusOfAvatar = () => { return ( -
- - - - +
+ +
) } const StatusOfAvatarCode = ` -"use client"; +'use client' import { Avatar } from "keep-react"; export const AvatarComponent = () => { return ( <> - - - - + + ); } diff --git a/app/docs/components/avatarGroup/avatarGroup.mdx b/app/docs/components/avatarGroup/avatarGroup.mdx deleted file mode 100644 index f736726a..00000000 --- a/app/docs/components/avatarGroup/avatarGroup.mdx +++ /dev/null @@ -1,47 +0,0 @@ -import { DefaultAvatarGroupCode, DefaultAvatarGroup } from './variant/DefaultAvatarGroup' -import { AvatarWithAddIcon, AvatarWithAddIconCode } from './variant/AvatarWithAddIcon' -import { AvatarWithCounter, AvatarWithCounterCode } from './variant/AvatarWithCounter' -import { AvatarWithPlusCounter, AvatarWithPlusCounterCode } from './variant/AvatarWithAddCounter' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" - -## Table of Contents - -The Keep React's Avatar component allows you to showcase user avatars or profile images consistently and aesthetically. With customizable choices for placeholders, shapes, status icons, and sizes, you can craft adaptable avatars to suit your design objectives. - -## Default Avatar Group - -The Avatar Group component simplifies the display of user avatars or profile images within a group. - - - - - -## Avatar Group With Add Icon - -Improve user interactions with the Avatar Group by adding an icon for user addition. Showcase avatar images within the group, accompanied by a plus button icon, enabling users to add new members effortlessly. - - - - - -## Avatar Group With Counter - -The Avatar Group with Counter component exhibits a limited set of avatar images while representing the remaining users numerically with a label like `"+99"` or a similar indicator. - - - - - -## Avatar Group With Plus Counter - -Enhance user engagement with the Avatar Group with Plus Counter feature. Display a concise collection of avatar images while indicating additional members with a numeric badge, such as `"+99"`. - - - - - -## Reference - -To access the available props for avatars and customize their themes, please follow this documentation [Avatar](https://react.keepdesign.io/docs/components/avatar) . diff --git a/app/docs/components/avatarGroup/index.tsx b/app/docs/components/avatarGroup/index.tsx deleted file mode 100644 index 5f7733df..00000000 --- a/app/docs/components/avatarGroup/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -'use client' -import type { FC } from 'react' -import AvatarGroupDocsContent from './avatarGroup.mdx' - -const AvatarGroupDocs: FC = () => - -export default AvatarGroupDocs diff --git a/app/docs/components/avatarGroup/page.tsx b/app/docs/components/avatarGroup/page.tsx deleted file mode 100644 index b6c03a4e..00000000 --- a/app/docs/components/avatarGroup/page.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { Metadata, NextPage } from 'next' -import { DocsContentLayout } from '../../../components/DocsContentLayout' -import AvatarGroupDocs from '.' - -export const metadata: Metadata = { - description: - 'The Avatar Group component in the Keep React allows you to display user avatars or profile images in a consistent and visually appealing manner. With customizable options for placeholders, shapes, status icons, and sizes, you can create versatile avatars to suit your design needs.', - title: 'Avatar Group - Keep React', -} - -const page: NextPage = () => { - return ( - - - - ) -} - -export default page diff --git a/app/docs/components/avatarGroup/variant/AvatarWithAddCounter.tsx b/app/docs/components/avatarGroup/variant/AvatarWithAddCounter.tsx deleted file mode 100644 index 6d58ab92..00000000 --- a/app/docs/components/avatarGroup/variant/AvatarWithAddCounter.tsx +++ /dev/null @@ -1,76 +0,0 @@ -'use client' -import { Avatar } from '../../../../src' - -const AvatarWithPlusCounter = () => { - return ( - - - - - - - - - - - ) -} - -const AvatarWithPlusCounterCode = ` -"use client"; -import { Avatar } from "keep-react"; - -export const AvatarGroupComponent = () => { - return ( - - - - - - - - - - - ); -}; -` - -export { AvatarWithPlusCounterCode, AvatarWithPlusCounter } diff --git a/app/docs/components/avatarGroup/variant/AvatarWithAddIcon.tsx b/app/docs/components/avatarGroup/variant/AvatarWithAddIcon.tsx deleted file mode 100644 index 59c818e9..00000000 --- a/app/docs/components/avatarGroup/variant/AvatarWithAddIcon.tsx +++ /dev/null @@ -1,75 +0,0 @@ -'use client' -import { Avatar } from '../../../../src' - -const AvatarWithAddIcon = () => { - return ( - - - - - - - - - - - ) -} - -const AvatarWithAddIconCode = ` -'use client'; -import { Avatar } from "keep-react"; - -export const AvatarGroupComponent = () => { - return ( - - - - - - - - - - - ); -}; -` -export { AvatarWithAddIcon, AvatarWithAddIconCode } diff --git a/app/docs/components/avatarGroup/variant/AvatarWithCounter.tsx b/app/docs/components/avatarGroup/variant/AvatarWithCounter.tsx deleted file mode 100644 index 5781e81b..00000000 --- a/app/docs/components/avatarGroup/variant/AvatarWithCounter.tsx +++ /dev/null @@ -1,64 +0,0 @@ -'use client' -import { Avatar } from '../../../../src' - -const AvatarWithCounter = () => { - return ( - - - - - - - - - - - ) -} - -const AvatarWithCounterCode = ` -"use client"; -import { Avatar } from "keep-react"; - -export const AvatarGroupComponent = () => { - return ( - - - - - - - - - - - ); -}; -` - -export { AvatarWithCounter, AvatarWithCounterCode } diff --git a/app/docs/components/avatarGroup/variant/DefaultAvatarGroup.tsx b/app/docs/components/avatarGroup/variant/DefaultAvatarGroup.tsx deleted file mode 100644 index 816a799c..00000000 --- a/app/docs/components/avatarGroup/variant/DefaultAvatarGroup.tsx +++ /dev/null @@ -1,62 +0,0 @@ -'use client' -import { Avatar } from '../../../../src' - -const DefaultAvatarGroup = () => { - return ( - - - - - - - - - - ) -} - -const DefaultAvatarGroupCode = ` -"use client"; -import { Avatar } from "keep-react"; - -export const AvatarGroupComponent = () => { - return ( - - - - - - - - - - ); -}; -` - -export { DefaultAvatarGroupCode, DefaultAvatarGroup } diff --git a/app/docs/components/badge/badge.mdx b/app/docs/components/badge/badge.mdx index eca38308..1ebb9ff4 100644 --- a/app/docs/components/badge/badge.mdx +++ b/app/docs/components/badge/badge.mdx @@ -1,13 +1,12 @@ import { DefaultBadge, DefaultBadgeCode } from './variant/DefaultBadge' import { SizesOfBadge, SizesOfBadgeCode } from './variant/SizesOfBadge' import { VariantOfBadge, VariantOfBadgeCode } from './variant/VariantOfBadge' -import { IconWithBadge, IconWithBadgeCode } from './variant/IconWithBadge' import { BadgeWithDot, BadgeWithDotCode } from './variant/BadgeWithDot' -import { OnlyIconOfBadge, OnlyIconOfBadgeCode } from './variant/BadgeWithOnlyIcon' + import { badgeApiData } from './badgeApi' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' + +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents @@ -15,7 +14,7 @@ The Badge component in the Keep React allows you to add visual indicators or lab ## Default Badge -The default badge offers a simple yet effective way to highlight information. It's a versatile component that can be customized to suit various design requirements. +The default badge is a versatile component that allows you to add visual indicators or labels to highlight specific information. It offers a simple yet effective way to enhance your design. @@ -23,7 +22,7 @@ The default badge offers a simple yet effective way to highlight information. It ## Sizes of Badge -The Badge component provides two available sizes: `xs` (extra small) and `sm` (small), allowing you to choose the appropriate size for your specific design needs. +Choose from two available sizes for the Badge component: `sm` (small) and `md` (medium). This flexibility allows you to tailor the badge to your specific design needs. @@ -31,36 +30,20 @@ The Badge component provides two available sizes: `xs` (extra small) and `sm` (s ## Variant of Badge -The Badge component offers three variants: `colorType="light"`,`colorType="strong"` and `badgeType="text"`. These variants provide options for different visual styles, allowing you to choose the one that best suits your design and helps highlight the badge content effectively. +The Badge component offers three variants: `variant="base"`, `variant="border"`, and `variant="background"`. These variants provide options for different visual styles, allowing you to choose the one that best suits your design and effectively highlights the badge content. -## Icon With Badge - -The Badge component can be combined with an icon to create an enhanced visual element that conveys additional information or status. You can position the icon on either the `iconPosition="left"` or `iconPosition="right"` side of the badge, allowing you to customize the badge's appearance and ensure its compatibility with your design. - - - - - ## Badge With Dot -You can display a badge with a dot by setting the `dot` prop to `true`. Additionally, you can customize the position of the dot by using the `dotPosition` prop, allowing you to choose between `left` and `right`. +Display a badge with a dot by setting the `showIcon` prop to `true`. Customize the position of the dot with the `iconPosition` prop, choosing between `left` and `right`. -## Only Icon With Badge - -You can utilize the Badge component to create badges with just icons. This is especially useful when you want to display a compact and visually informative badge alongside an icon. - - - - - ## API Reference Explore the available props for the Badge component diff --git a/app/docs/components/badge/badgeApi.ts b/app/docs/components/badge/badgeApi.ts index c9445b6b..8f3c09d8 100644 --- a/app/docs/components/badge/badgeApi.ts +++ b/app/docs/components/badge/badgeApi.ts @@ -2,86 +2,51 @@ export const badgeApiData = [ { id: 1, propsName: 'color', - propsType: ['error', 'gray', 'info', 'success', 'warning'], + propsType: ['primary', 'secondary', 'success', 'warning', 'error'], propsDescription: 'Available Badge color.', - default: 'gray', + default: 'primary', }, { id: 2, - propsName: 'colorType', - propsType: ['light', 'strong'], - propsDescription: 'Color type of the badge', - default: 'light', + propsName: 'variant', + propsType: ['base', 'border', 'background'], + propsDescription: 'Variant the badge', + default: 'base', }, { id: 3, - propsName: 'badgeType', - propsType: ['default', 'outline', 'text'], - propsDescription: 'Type of the badge', - default: 'default', + propsName: 'size', + propsType: ['xs', 'sm'], + propsDescription: 'Size variant of the badge.', + default: 'sm', }, + { id: 4, - propsName: 'href', - propsType: 'string', - propsDescription: 'URL to navigate when the badge is clicked.', - default: 'None', + propsName: 'showIcon', + propsType: 'boolean', + propsDescription: 'Icon show in badge show or not?', + default: 'false', }, { id: 5, - propsName: 'icon', - propsType: 'ReactNode', - propsDescription: 'Icon element to be displayed inside the badge.', - default: '', - }, - { - id: 6, propsName: 'iconPosition', propsType: ['left', 'right'], propsDescription: 'Position of the icon inside the badge.', default: 'right', }, { - id: 7, + id: 6, propsName: 'className', propsType: 'string', propsDescription: 'Custom CSS class to be added to the badge.', default: 'None', }, { - id: 12, + id: 7, propsName: 'dotStyle', propsType: 'string', propsDescription: 'Custom style to be added to the badge.', default: 'None', }, - { - id: 13, - propsName: 'iconStyle', - propsType: 'string', - propsDescription: 'Custom style to be added to the badge icon.', - default: 'None', - }, - { - id: 8, - propsName: 'size', - propsType: ['xs', 'sm'], - propsDescription: 'Size variant of the badge.', - default: 'sm', - }, - - { - id: 10, - propsName: 'dot', - propsType: 'boolean', - propsDescription: 'Show a dot on the badge.', - default: 'false', - }, - { - id: 11, - propsName: 'dotPosition', - propsType: ['left', 'right'], - propsDescription: 'Position of the dot inside the badge', - default: 'right', - }, ] diff --git a/app/docs/components/badge/variant/BadgeWithDot.tsx b/app/docs/components/badge/variant/BadgeWithDot.tsx index 3ad09058..ed22f575 100644 --- a/app/docs/components/badge/variant/BadgeWithDot.tsx +++ b/app/docs/components/badge/variant/BadgeWithDot.tsx @@ -3,20 +3,29 @@ import { Badge } from '../../../../src' const BadgeWithDot = () => { return ( -
- - Left Dot +
+ + Primary - - Right Dot + + Secondary + + + Success + + + Warning + + + Error
) } const BadgeWithDotCode = ` -"use client"; -import { Badge } from "keep-react"; +'use client' +import { Badge } from 'keep-react' export const BadgeComponent = () => { return ( diff --git a/app/docs/components/badge/variant/BadgeWithOnlyIcon.tsx b/app/docs/components/badge/variant/BadgeWithOnlyIcon.tsx deleted file mode 100644 index e7243101..00000000 --- a/app/docs/components/badge/variant/BadgeWithOnlyIcon.tsx +++ /dev/null @@ -1,105 +0,0 @@ -'use client' -import { Badge } from '../../../../src' -import { Check, Checks, CloudCheck, XCircle } from 'phosphor-react' - -const OnlyIconOfBadge = () => { - return ( -
- } - iconPosition="right" - /> - } - iconPosition="right" - /> - } - iconPosition="right" - /> - } - iconPosition="right" - /> - } - iconPosition="right" - /> -
- ) -} - -const OnlyIconOfBadgeCode = ` -"use client"; -import { Badge } from "keep-react"; -import { Check, Checks, CloudCheck, XCircle } from "phosphor-react"; - -export const BadgeComponent = () => { - return ( -
- } - iconPosition="right" - /> - } - iconPosition="right" - /> - } - iconPosition="right" - /> - } - iconPosition="right" - /> - } - iconPosition="right" - /> -
- ); -} -` - -export { OnlyIconOfBadge, OnlyIconOfBadgeCode } diff --git a/app/docs/components/badge/variant/DefaultBadge.tsx b/app/docs/components/badge/variant/DefaultBadge.tsx index b3632a44..adcfd2a6 100644 --- a/app/docs/components/badge/variant/DefaultBadge.tsx +++ b/app/docs/components/badge/variant/DefaultBadge.tsx @@ -3,51 +3,32 @@ import { Badge } from '../../../../src' const DefaultBadge = () => { return ( -
- - Default - - - Gray Badge - - - Error Badges - - - Success Badges - - - Warning Badges - +
+ Primary + Secondary + Success + Warning + Error
) } const DefaultBadgeCode = ` -"use client"; -import { Badge } from "keep-react"; +'use client' +import { Badge } from 'keep-react' export const BadgeComponent = () => { return ( -
- - Default - - - Gray Badge - - - Error Badges - - - Success Badges - - - Warning Badges - -
- ); -}; + <> + Primary + Secondary + Success + Warning + Error + + ) +} + ` export { DefaultBadge, DefaultBadgeCode } diff --git a/app/docs/components/badge/variant/IconWithBadge.tsx b/app/docs/components/badge/variant/IconWithBadge.tsx deleted file mode 100644 index 57b51429..00000000 --- a/app/docs/components/badge/variant/IconWithBadge.tsx +++ /dev/null @@ -1,49 +0,0 @@ -'use client' -import { Badge } from '../../../../src' -import { Crown, ShieldCheck } from 'phosphor-react' - -const IconWithBadge = () => { - return ( -
- } iconPosition="left"> - Badges - - } iconPosition="right"> - Badges - -
- ) -} - -const IconWithBadgeCode = ` -"use client"; -import { Badge } from "keep-react"; -import { Crown, ShieldCheck } from "phosphor-react"; - -export const BadgeComponent = () => { - return ( -
- } - iconPosition="left" - > - Badges - - } - iconPosition="right" - > - Badges - -
- ); -} -` - -export { IconWithBadge, IconWithBadgeCode } diff --git a/app/docs/components/badge/variant/SizesOfBadge.tsx b/app/docs/components/badge/variant/SizesOfBadge.tsx index b8fc1a09..12738cb0 100644 --- a/app/docs/components/badge/variant/SizesOfBadge.tsx +++ b/app/docs/components/badge/variant/SizesOfBadge.tsx @@ -3,27 +3,55 @@ import { Badge } from '../../../../src' const SizesOfBadge = () => { return ( -
- - Extra Small - - - Small Badge - +
+
+ + Primary + + + Secondary + + + Success + + + Warning + + + Error + +
+
+ + Primary + + + Secondary + + + Success + + + Warning + + + Error + +
) } const SizesOfBadgeCode = ` -"use client"; -import { Badge } from "keep-react"; +'use client' +import { Badge } from 'keep-react' export const BadgeComponent = () => { return ( -
- Extra Small - Small Badge -
+ <> + Small Badge + Medium Badge + ); }; ` diff --git a/app/docs/components/badge/variant/VariantOfBadge.tsx b/app/docs/components/badge/variant/VariantOfBadge.tsx index 97fab020..db3aa48c 100644 --- a/app/docs/components/badge/variant/VariantOfBadge.tsx +++ b/app/docs/components/badge/variant/VariantOfBadge.tsx @@ -3,31 +3,73 @@ import { Badge } from '../../../../src' const VariantOfBadge = () => { return ( -
- - Badge - - - Badge - - - Badge - +
+
+ + Primary + + + Secondary + + + Success + + + Warning + + + Error + +
+
+ + Primary + + + Secondary + + + Success + + + Warning + + + Error + +
+
+ + Primary + + + Secondary + + + Success + + + Warning + + + Error + +
) } const VariantOfBadgeCode = ` -"use client"; -import { Badge } from "keep-react"; +'use client' +import { Badge } from 'keep-react' export const BadgeComponent = () => { return ( -
- Badge - Badge - Badge -
+ <> + Base + Border + Background + ); }; ` diff --git a/app/docs/components/barChart/BarChart.mdx b/app/docs/components/barChart/BarChart.mdx index 5fde3e6f..b81204a2 100644 --- a/app/docs/components/barChart/BarChart.mdx +++ b/app/docs/components/barChart/BarChart.mdx @@ -8,9 +8,8 @@ import { CustomizedBarSizeWithAxisDataCode, } from './variant/CustomizedBarSizeWithAxisData' import { barChartAPIData } from './BarChartApi' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents diff --git a/app/docs/components/barChart/BarChartApi.ts b/app/docs/components/barChart/BarChartApi.ts index 0fe0c867..b75a9da6 100644 --- a/app/docs/components/barChart/BarChartApi.ts +++ b/app/docs/components/barChart/BarChartApi.ts @@ -160,4 +160,18 @@ export const barChartAPIData = [ propsDescription: 'Key in the data array for the Y-axis data.', default: 'None', }, + { + id: 24, + propsName: 'tooltipBtnVariant', + propsType: ['primary', 'dashed', 'text', 'linkPrimary', 'linkGray', 'outlineGray', 'outlinePrimary', 'default'], + propsDescription: 'Variant of the tooltip button.', + default: 'default', + }, + { + id: 25, + propsName: 'tooltipBtnStyle', + propsType: 'string', + propsDescription: 'Custom style of the tooltip.', + default: 'None', + }, ] diff --git a/app/docs/components/breadcrumb/breadcrumb.mdx b/app/docs/components/breadcrumb/breadcrumb.mdx index 1f642dde..6cc3bdd3 100644 --- a/app/docs/components/breadcrumb/breadcrumb.mdx +++ b/app/docs/components/breadcrumb/breadcrumb.mdx @@ -1,66 +1,57 @@ import { DefaultBreadcrumb, DefaultBreadcrumbCode } from './variant/DefaultBreadcrumb' +import { CustomizeBreadcrumb, CustomizeBreadcrumbCode } from './variant/CustomizeBreadcrumb' import { BreadcrumbWithBorder, BreadcrumbWithBorderCode } from './variant/BreadcrumbWithBorder' -import { BreadcrumbWithPageIcon, BreadcrumbWithPageIconCode } from './variant/BreadcrumbWithPageIcon' -import { BreadcrumbWithSeparatorIcon, BreadcrumbWithSeparatorIconCode } from './variant/BreadcrumbWithSeparatorIcon' -import { BreadcrumbWithNumber, BreadcrumbWithNumberCode } from './variant/BreadcrumbWithNumber' +import { BreadcrumbDividerIcon, BreadcrumbDividerIconCode } from './variant/BreadcrumbDividerIcon' + import { breadcrumbApiData, breadcrumbItemApiData } from './breadcrumbApi' +import CodePreview from '../../../components/CodePreview' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents -The Breadcrumbs component in the Keep React provides a navigation aid that allows users to understand their current location within a website or application. With customizable options for type, icon, divider, line, and style, you can create breadcrumbs that align with your design and enhance the navigation experience. +The Breadcrumbs component in Keep React serves as a navigation aid, enabling users to comprehend their current location within a website or application. With customizable options for type, icon, divider, line, and style, you can create breadcrumbs that seamlessly integrate with your design and enhance the navigation experience. ## Default Breadcrumb -The default Breadcrumbs component provides a simple and intuitive way for users to understand their current location within a website or application. +The default Breadcrumbs component offers a simple and intuitive way for users to grasp their current location within a website or application. -## Breadcrumb With Border +## Border Types -The Breadcrumbs component with the `breadCrumbWithBorder` prop set to `true` adds a subtle border around each breadcrumb item, providing a clear visual separation between the items. +The Breadcrumbs component includes the `borderType` prop with two possible values: `"border-xy"` and `"border-y"`. -## Breadcrumb With Page Icon - -By utilizing the `icon` prop and providing an appropriate icon component, such as ``, you can visually represent each page or section within the breadcrumb navigation, making it easier for users to identify their current location within the website or application. - - - - - -## Breadcrumb With Separator Icon +## Divider Icon Type -You can further customize the appearance of your breadcrumb navigation by adding a separator icon between items using the `separatorIcon` with any icon. +The Breadcrumbs component incorporates the `dividerIconStyle` prop with two possible values: `"slash"` and `"caret"`. - - + + -## Breadcrumb With Number Item +## Customize Breadcrumb -Enhance user navigation through step-by-step processes or hierarchical sections by incorporating numbered items into the Breadcrumbs component. +You can customize the breadcrumb component using the `className` props. Additionally, we provide more APIs for customizable options. - - + + ## Breadcrumb API Reference -Explore the available props for the `` component +Explore the available props for the `` component. -## Breadcrumb Item API Reference +## Item API Reference -Explore the available props for the `` component +Explore the available props for the `` component. diff --git a/app/docs/components/breadcrumb/breadcrumbApi.ts b/app/docs/components/breadcrumb/breadcrumbApi.ts index 965c0387..eedc7420 100644 --- a/app/docs/components/breadcrumb/breadcrumbApi.ts +++ b/app/docs/components/breadcrumb/breadcrumbApi.ts @@ -1,30 +1,37 @@ export const breadcrumbApiData = [ { id: 1, - propsName: 'separatorIcon', - propsType: 'ReactNode', + propsName: 'borderType', + propsType: ['border-xy', 'border-y'], propsDescription: 'Icon to be used as a separator between breadcrumb items.', default: '', }, { id: 2, - propsName: 'breadCrumbWithBorder', - propsType: 'boolean', - propsDescription: 'Add a border around the breadcrumb container.', - default: 'false', + propsName: 'dividerIcon', + propsType: 'ReactNode', + propsDescription: 'An icon element to display within the breadcrumb items.', + default: 'None', }, { id: 3, - propsName: 'className', - propsType: 'string', - propsDescription: 'Custom class to be added to the breadcrumb.', - default: 'None', + propsName: 'dividerIconStyle', + propsType: ['slash', 'caret'], + propsDescription: 'An icon element to display within the breadcrumb items.', + default: 'caret', }, { id: 4, - propsName: 'listStyle', + propsName: 'icon', + propsType: 'ReactNode', + propsDescription: 'Breadcrumb main icon', + default: 'Home', + }, + { + id: 5, + propsName: 'className', propsType: 'string', - propsDescription: 'Custom class to be added to the breadcrumb list wrapper.', + propsDescription: 'Custom class to be added to the breadcrumb.', default: 'None', }, ] @@ -39,27 +46,13 @@ export const breadcrumbItemApiData = [ }, { id: 2, - propsName: 'icon', - propsType: 'ReactNode', - propsDescription: 'An icon element to display within the breadcrumb.', - default: 'None', - }, - { - id: 3, - propsName: 'active', - propsType: ['border', 'bar', 'base'], - propsDescription: 'Defines the active state style for the breadcrumb.', + propsName: 'activeType', + propsType: ['border', 'base'], + propsDescription: 'Defines the active state style for the breadcrumb item.', default: 'base', }, { - id: 4, - propsName: 'disabled', - propsType: 'boolean', - propsDescription: 'Disables the breadcrumb, making it uncheckable.', - default: 'false', - }, - { - id: 5, + id: 3, propsName: 'className', propsType: 'string', propsDescription: 'Custom class to be added to the breadcrumb item wrapper.', diff --git a/app/docs/components/breadcrumb/variant/BreadcrumbDividerIcon.tsx b/app/docs/components/breadcrumb/variant/BreadcrumbDividerIcon.tsx new file mode 100644 index 00000000..e21acad8 --- /dev/null +++ b/app/docs/components/breadcrumb/variant/BreadcrumbDividerIcon.tsx @@ -0,0 +1,49 @@ +'use client' +import { Breadcrumb } from '../../../../src' + +const BreadcrumbDividerIcon = () => { + return ( + <> + + Overview + Pools + Tokens + Color + + + Overview + Pools + Color + + + Overview + Pools + Tokens + Color + + + Overview + Pools + Color + + + ) +} + +const BreadcrumbDividerIconCode = ` +'use client' +import { Breadcrumb } from 'keep-react' + +export const BreadcrumbComponent = () => { + return ( + + Overview + Pools + Tokens + Color + + ) +} +` + +export { BreadcrumbDividerIcon, BreadcrumbDividerIconCode } diff --git a/app/docs/components/breadcrumb/variant/BreadcrumbWithBorder.tsx b/app/docs/components/breadcrumb/variant/BreadcrumbWithBorder.tsx index 4b904569..5fc52727 100644 --- a/app/docs/components/breadcrumb/variant/BreadcrumbWithBorder.tsx +++ b/app/docs/components/breadcrumb/variant/BreadcrumbWithBorder.tsx @@ -1,93 +1,48 @@ 'use client' import { Breadcrumb } from '../../../../src' -import { CaretRight } from 'phosphor-react' const BreadcrumbWithBorder = () => { return ( -
- }> - Products - Category - ..... - - Product - +
+ + Overview + Pools + Tokens + Color - }> - Products - Category - ..... - - Product - + + Overview + Pools + Color - }> - Products - Category - ..... - - Product - + + Overview + Pools + Tokens + Color + + + Overview + Pools + Color
) } const BreadcrumbWithBorderCode = ` -"use client"; -import { Breadcrumb } from "keep-react"; -import { CaretRight } from "phosphor-react"; +'use client' +import { Breadcrumb } from 'keep-react' export const BreadcrumbComponent = () => { return ( -
- } - > - Products - Category - ..... - - Product - - - } - > - Products - Category - ..... - - Product - - - } - > - Products - Category - ..... - - Product - - -
- ); + + Overview + Pools + Tokens + Color + + ) } ` diff --git a/app/docs/components/breadcrumb/variant/BreadcrumbWithNumber.tsx b/app/docs/components/breadcrumb/variant/BreadcrumbWithNumber.tsx deleted file mode 100644 index bb832d87..00000000 --- a/app/docs/components/breadcrumb/variant/BreadcrumbWithNumber.tsx +++ /dev/null @@ -1,112 +0,0 @@ -'use client' -import { Breadcrumb } from '../../../../src' -import { CaretRight, House } from 'phosphor-react' - -const BreadcrumbWithNumber = () => { - return ( -
- }> - }> - 01 - - 02 - 03 - ...... - - 08 - - - }> - }> - 01 - - 02 - 03 - ...... - - 08 - - - }> - }> - 01 - - 02 - 03 - ...... - - 08 - - -
- ) -} - -const BreadcrumbWithNumberCode = ` -"use client" -import { Breadcrumb } from "keep-react"; -import { CaretRight, House } from "phosphor-react"; - -export const BreadcrumbComponent = () => { - return ( -
- } - > - }> - 01 - - 02 - 03 - ...... - - 08 - - - } - > - }> - 01 - - 02 - 03 - ...... - - 08 - - - } - > - }> - 01 - - 02 - 03 - ...... - - 08 - - -
- ); -} -` - -export { BreadcrumbWithNumber, BreadcrumbWithNumberCode } diff --git a/app/docs/components/breadcrumb/variant/BreadcrumbWithPageIcon.tsx b/app/docs/components/breadcrumb/variant/BreadcrumbWithPageIcon.tsx deleted file mode 100644 index f6dd39f2..00000000 --- a/app/docs/components/breadcrumb/variant/BreadcrumbWithPageIcon.tsx +++ /dev/null @@ -1,106 +0,0 @@ -'use client' -import { Breadcrumb } from '../../../../src' -import { CaretRight, House } from 'phosphor-react' - -const BreadcrumbWithPageIcon = () => { - return ( -
- }> - }> - Products - - Category - ..... - - Product - - - }> - }> - Products - - Category - ..... - - Product - - - }> - }> - Products - - Category - ..... - - Product - - -
- ) -} - -const BreadcrumbWithPageIconCode = ` -"use client"; -import { Breadcrumb } from "keep-react"; -import { CaretRight,House } from "phosphor-react"; - -export const BreadcrumbComponent = () => { - return ( -
- } - > - }> - Products - - Category - ..... - - Product - - - } - > - }> - Products - - Category - ..... - - Product - - - } - > - }> - Products - - Category - ..... - - Product - - -
- ); -} -` - -export { BreadcrumbWithPageIcon, BreadcrumbWithPageIconCode } diff --git a/app/docs/components/breadcrumb/variant/BreadcrumbWithSeparatorIcon.tsx b/app/docs/components/breadcrumb/variant/BreadcrumbWithSeparatorIcon.tsx deleted file mode 100644 index a30b56e9..00000000 --- a/app/docs/components/breadcrumb/variant/BreadcrumbWithSeparatorIcon.tsx +++ /dev/null @@ -1,106 +0,0 @@ -'use client' -import { Breadcrumb } from '../../../../src' -import { ArrowsLeftRight, House } from 'phosphor-react' - -const BreadcrumbWithSeparatorIcon = () => { - return ( -
- }> - }> - Products - - Category - ..... - - Product - - - }> - }> - Products - - Category - ..... - - Product - - - }> - }> - Products - - Category - ..... - - Product - - -
- ) -} - -const BreadcrumbWithSeparatorIconCode = ` -"use client"; -import { Breadcrumb } from "keep-react"; -import { ArrowsLeftRight, House } from "phosphor-react"; - -export const BreadcrumbComponent = () => { - return ( -
- } - > - }> - Breadcrumb Item - - Breadcrumb item - ..... - - Breadcrumb item - - - } - > - }> - Breadcrumb Item - - Breadcrumb item - ..... - - Breadcrumb item - - - } - > - }> - Breadcrumb Item - - Breadcrumb item - ..... - - Breadcrumb item - - -
- ); -} -` - -export { BreadcrumbWithSeparatorIcon, BreadcrumbWithSeparatorIconCode } diff --git a/app/docs/components/breadcrumb/variant/CustomizeBreadcrumb.tsx b/app/docs/components/breadcrumb/variant/CustomizeBreadcrumb.tsx new file mode 100644 index 00000000..71821658 --- /dev/null +++ b/app/docs/components/breadcrumb/variant/CustomizeBreadcrumb.tsx @@ -0,0 +1,37 @@ +'use client' +import { Browsers, CaretDoubleRight } from 'phosphor-react' +import { Breadcrumb } from '../../../../src' + +const CustomizeBreadcrumb = () => { + return ( + } + dividerIcon={}> + Overview + Pools + Tokens + Color + + ) +} + +const CustomizeBreadcrumbCode = ` +'use client' +import { Browsers, CaretDoubleRight } from 'phosphor-react' +import { Breadcrumb } from 'keep-react' + +export const BreadcrumbComponent = () => { + return ( + } + dividerIcon={}> + Overview + Pools + Tokens + Color + + ) +} +` + +export { CustomizeBreadcrumb, CustomizeBreadcrumbCode } diff --git a/app/docs/components/breadcrumb/variant/DefaultBreadcrumb.tsx b/app/docs/components/breadcrumb/variant/DefaultBreadcrumb.tsx index 617ad9d8..8af3192a 100644 --- a/app/docs/components/breadcrumb/variant/DefaultBreadcrumb.tsx +++ b/app/docs/components/breadcrumb/variant/DefaultBreadcrumb.tsx @@ -1,81 +1,37 @@ 'use client' import { Breadcrumb } from '../../../../src' -import { CaretRight } from 'phosphor-react' const DefaultBreadcrumb = () => { return ( -
- }> - Products - Category - ..... - - Product - + <> + + Overview + Pools + Tokens + Color - }> - Products - Category - ..... - - Product - + + Overview + Pools + Tokens - }> - Products - Category - ..... - - Product - - -
+ ) } const DefaultBreadcrumbCode = ` -"use client"; -import { Breadcrumb } from "keep-react"; -import { CaretRight } from "phosphor-react"; +'use client' +import { Breadcrumb } from 'keep-react' -export const BreadcrumbComponent = () => { +const BreadcrumbComponent = () => { return ( -
- } - > - Products - Category - ..... - - Product - - - } - > - Products - Category - ..... - - Product - - - } - > - Products - Category - ..... - - Product - - -
- ); + + Overview + Pools + Tokens + Color + + ) } ` diff --git a/app/docs/components/button/button.mdx b/app/docs/components/button/button.mdx index 39d5928c..a4d0164b 100644 --- a/app/docs/components/button/button.mdx +++ b/app/docs/components/button/button.mdx @@ -4,17 +4,16 @@ import { KeepButtonSize, KeepButtonSizeCode } from './variant/KeepButtonSize' import { KeepButtonShape, KeepButtonShapeCode } from './variant/KeepButtonShape' import { KeepButtonIcon, KeepButtonIconCode } from './variant/KeepButtonIcon' import { buttonApiData } from './buttonApi' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents The Buttons component in the Keep React offers a variety of button types, sizes, and states to meet your design needs. With options for icons and destructiveness, you can create visually appealing and functional buttons for your product. -## Button Types Variant +## Button Variant Type -There are lots of button types for the best fits design of your application. Available types : `default` `primary` `dashed` `text` `linkPrimary` `linkGray` `outlineGray` and `outlinePrimary`. +There are two kinds of button variant types. Available types : `link` and `outline`. @@ -22,7 +21,7 @@ There are lots of button types for the best fits design of your application. Ava ## Button Colors Variant -Here are the available color variants for the Button component, each with its own unique color scheme: `error` `info` `success` and `warning`. +Here are the available color variants for the Button component, each with its own unique color scheme: `primary` `secondary` `success` `warning` and `error`. @@ -38,7 +37,7 @@ Here are the available size options for the Button component : `xs` `sm` `md` `l ## Button Shape Variant -There are two available button shape variant: `pill` and `circle` props for added variety and style. +There are two available button shape variant: `icon` and `circle` props for added variety and style. diff --git a/app/docs/components/button/buttonApi.ts b/app/docs/components/button/buttonApi.ts index 6c9cdbd7..dd3cbd77 100644 --- a/app/docs/components/button/buttonApi.ts +++ b/app/docs/components/button/buttonApi.ts @@ -1,87 +1,37 @@ export const buttonApiData = [ { id: 1, - propsName: 'href', - propsType: 'string', - propsDescription: 'URL to navigate when the button is clicked.', - default: 'None', - }, - { - id: 2, propsName: 'color', - propsType: ['error', 'info', 'success', 'warning'], + propsType: ['primary', 'secondary', 'error', 'success', 'warning'], propsDescription: 'Color variant of the button', - default: 'info', - }, - { - id: 3, - propsName: 'type', - propsType: ['primary', 'dashed', 'text', 'linkPrimary', 'linkGray', 'outlineGray', 'outlinePrimary', 'default'], - propsDescription: 'Type of the button.', - default: 'default', + default: 'primary', }, { - id: 4, - propsName: 'notificationLabel', - propsType: 'string', - propsDescription: 'Label for notification badge on the button.', - default: 'None', - }, - { - id: 5, - propsName: 'pill', - propsType: 'boolean', - propsDescription: 'Apply pill-shaped styling to the button.', - default: 'false', + id: 2, + propsName: 'variant', + propsType: ['link', 'outline'], + propsDescription: 'Variant of the button.', + default: 'outline', }, { - id: 6, - propsName: 'circle', - propsType: 'boolean', + id: 3, + propsName: 'shape', + propsType: ['circle', 'icon'], propsDescription: 'Apply circular styling to the button.', - default: 'false', + default: 'circle', }, { - id: 7, - propsName: 'positionInGroup', - propsType: ['start', 'end', 'middle'], + id: 4, + propsName: 'position', + propsType: ['start', 'end', 'center'], propsDescription: 'Position of the button within a button group.', default: 'start', }, - { - id: 9, + id: 5, propsName: 'size', propsType: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'], propsDescription: 'Size variant of the button.', default: 'md', }, - { - id: 10, - propsName: 'width', - propsType: ['full', 'half'], - propsDescription: 'Width of the button', - default: 'None', - }, - { - id: 11, - propsName: 'className', - propsType: 'string', - propsDescription: 'Custom CSS class to be added to the button.', - default: 'None', - }, - { - id: 12, - propsName: 'notificationLabelStyle', - propsType: 'string', - propsDescription: 'notification Label Style', - default: 'None', - }, - { - id: 13, - propsName: 'onClick', - propsType: '() => void', - propsDescription: 'Function to be called when the button is clicked.', - default: 'function', - }, ] diff --git a/app/docs/components/button/variant/KeepButtonColor.tsx b/app/docs/components/button/variant/KeepButtonColor.tsx index e956584f..e44d491e 100644 --- a/app/docs/components/button/variant/KeepButtonColor.tsx +++ b/app/docs/components/button/variant/KeepButtonColor.tsx @@ -4,36 +4,30 @@ import { Button } from '../../../../src' const KeepButtonColor = () => { return (
- - - - + + + + +
) } const KeepButtonColorCode = ` -"use client"; -import { Button } from "keep-react"; +'use client' +import { Button } from 'keep-react' export const ButtonComponent = () => { return ( <> - - - - + + + + + - ); -}; + ) +} ` export { KeepButtonColor, KeepButtonColorCode } diff --git a/app/docs/components/button/variant/KeepButtonIcon.tsx b/app/docs/components/button/variant/KeepButtonIcon.tsx index a22a5d25..0069b93d 100644 --- a/app/docs/components/button/variant/KeepButtonIcon.tsx +++ b/app/docs/components/button/variant/KeepButtonIcon.tsx @@ -1,53 +1,49 @@ 'use client' +import { ChatText, Gear, SignIn } from 'phosphor-react' import { Button } from '../../../../src' -import { Gear, SquaresFour } from 'phosphor-react' const KeepButtonIcon = () => { return (
- - -
) } const KeepButtonIconCode = ` -"use client"; -import { Button } from "keep-react"; -import { Gear, SquaresFour, Cube } from "phosphor-react"; +'use client' +import { Button } from 'keep-react' +import { ChatText, Gear, SignIn } from 'phosphor-react' -export const ButtonComponent = () => { +const KeepButtonIcon = () => { return ( <> - - + - - ); -}; + ) +} ` export { KeepButtonIcon, KeepButtonIconCode } diff --git a/app/docs/components/button/variant/KeepButtonShape.tsx b/app/docs/components/button/variant/KeepButtonShape.tsx index 04309457..0181ab9d 100644 --- a/app/docs/components/button/variant/KeepButtonShape.tsx +++ b/app/docs/components/button/variant/KeepButtonShape.tsx @@ -5,35 +5,28 @@ import { ShoppingCart } from 'phosphor-react' const KeepButtonShape = () => { return (
- -
) } const KeepButtonShapeCode = ` -"use client"; -import { Button } from "keep-react"; -import { ShoppingCart } from "phosphor-react"; +import { Button } from 'keep-react' +import { ShoppingCart } from 'phosphor-react' export const ButtonComponent = () => { return ( <> - - + + - ); -}; + ) +} ` export { KeepButtonShape, KeepButtonShapeCode } diff --git a/app/docs/components/button/variant/KeepButtonSize.tsx b/app/docs/components/button/variant/KeepButtonSize.tsx index 8d579414..5052a9ee 100644 --- a/app/docs/components/button/variant/KeepButtonSize.tsx +++ b/app/docs/components/button/variant/KeepButtonSize.tsx @@ -4,41 +4,29 @@ import { Button } from '../../../../src' const KeepButtonSize = () => { return (
- - - - - - + + + + + +
) } const KeepButtonSizeCode = ` -"use client"; -import { Button } from "keep-react; +'use client' +import { Button } from 'keep-react' export const ButtonComponent = () => { return ( <> - - - - - - + + + + + + ); }; diff --git a/app/docs/components/button/variant/KeepButtonType.tsx b/app/docs/components/button/variant/KeepButtonType.tsx index 23726da5..29b536fd 100644 --- a/app/docs/components/button/variant/KeepButtonType.tsx +++ b/app/docs/components/button/variant/KeepButtonType.tsx @@ -4,52 +4,84 @@ import { Button } from '../../../../src' const KeepButtonType = () => { return (
- - - - - - - - +
+ + + + + +
+
+ + + + + +
) } const KeepButtonTypeCode = ` -"use client"; -import { Button } from "keep-react"; +'use client' +import { Button } from 'keep-react' export const ButtonComponent = () => { return ( <> - - - - - - - - + + + + + + + + + + - ); -}; + ) +} ` -export { KeepButtonTypeCode, KeepButtonType } +export { KeepButtonType, KeepButtonTypeCode } diff --git a/app/docs/components/buttonGroup/buttonGroup.mdx b/app/docs/components/buttonGroup/buttonGroup.mdx index b8181ac5..b0ba38fa 100644 --- a/app/docs/components/buttonGroup/buttonGroup.mdx +++ b/app/docs/components/buttonGroup/buttonGroup.mdx @@ -2,9 +2,9 @@ import { DefaultButtonGroup, DefaultButtonGroupCode } from './variant/DefaultBut import { ButtonGroupWithIcon, ButtonGroupWithIconCode } from './variant/ButtonGroupWithIcon' import { ButtonGroupWithOnlyIcon, ButtonGroupWithOnlyIconCode } from './variant/ButtonGroupWithOnlyIcon' import { buttonApiData } from '../button/buttonApi' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' + +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents diff --git a/app/docs/components/buttonGroup/variant/ButtonGroupWithIcon.tsx b/app/docs/components/buttonGroup/variant/ButtonGroupWithIcon.tsx index 7c800508..8f784f7b 100644 --- a/app/docs/components/buttonGroup/variant/ButtonGroupWithIcon.tsx +++ b/app/docs/components/buttonGroup/variant/ButtonGroupWithIcon.tsx @@ -1,27 +1,21 @@ 'use client' -import { Button } from '../../../../src' import { ChatCircleDots, Cube, Gear } from 'phosphor-react' +import { Button } from '../../../../src' const ButtonGroupWithIcon = () => { return (
- - - @@ -30,26 +24,26 @@ const ButtonGroupWithIcon = () => { } const ButtonGroupWithIconCode = ` -"use client"; -import { Button } from "keep-react"; -import { ChatCircleDots, Cube, Gear } from "phosphor-react"; +'use client' +import { Button } from 'keep-react' +import { ChatCircleDots, Cube, Gear } from 'phosphor-react' export const ButtonGroupComponent = () => { return ( - - - - - ) } const ButtonGroupWithOnlyIconCode = ` -"use client"; -import { Button } from "keep-react"; -import { ChatCircleDots, Cube, Gear } from "phosphor-react"; +'use client' +import { Button } from 'keep-react' +import { ChatCircleDots, Cube, Gear } from 'phosphor-react' export const ButtonGroupComponent = () => { return ( - - - - ); + ) } ` diff --git a/app/docs/components/buttonGroup/variant/DefaultButtonGroup.tsx b/app/docs/components/buttonGroup/variant/DefaultButtonGroup.tsx index c7430c50..150c8813 100644 --- a/app/docs/components/buttonGroup/variant/DefaultButtonGroup.tsx +++ b/app/docs/components/buttonGroup/variant/DefaultButtonGroup.tsx @@ -5,33 +5,27 @@ const DefaultButtonGroup = () => { return (
- - - + + +
) } const DefaultButtonGroupCode = ` -"use client"; -import { Button } from "keep-react"; +'use client' +import { Button } from 'keep-react' export const ButtonGroupComponent = () => { return ( - - - + + + - ); -}; + ) +} ` export { DefaultButtonGroup, DefaultButtonGroupCode } diff --git a/app/docs/components/card/card.mdx b/app/docs/components/card/card.mdx index 416c266b..db5e80b4 100644 --- a/app/docs/components/card/card.mdx +++ b/app/docs/components/card/card.mdx @@ -1,86 +1,43 @@ import { DefaultCard, DefaultCardCode } from './variant/DefaultCard' -import { CardWithIcon, CardWithIconCode } from './variant/CardWithIcon' -import { ProfileCard, ProfileCardCode } from './variant/ProfileCard' -import { PostCard, PostCardCode } from './variant/PostCard' +import { RegisterCard, RegisterCardCode } from './variant/RegisterCard' +import { CardWithAvatar, CardWithAvatarCode } from './variant/CardWithAvatar' import { ProductCard, ProductCardCode } from './variant/ProductCard' -import { PricingCard, PricingCardCode } from './variant/PricingCard' -import { HorizontalCard, HorizontalCardCode } from './variant/HorizontalCard' import { cardAPIData } from './cardApi' -import { ProfileCardWithCover, ProfileCardWithCoverCode } from './variant/ProfileCardWithCover' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents -The card component in the Keep React offers a variety of button types, sizes, and states to meet your design needs. With options for icons and destructiveness, you can create visually appealing and functional buttons for your product. +The card component in Keep React offers a variety of button types, sizes, and states to meet your design needs. With options for icons and destructiveness, you can create visually appealing and functional buttons for your product. ## Default Card -The Default Card in the Keep React is a foundational component that provides a clean and straightforward appearance. It serves as a starting point for creating more complex card designs. +The Default Card in Keep React is a foundational component that provides a clean and straightforward appearance. It serves as a starting point for creating more complex card designs. -## Card With Icon +## Card with avatar -The Card component in the Keep React can be enhanced with icons to provide additional visual context and meaning. By incorporating icons into your cards, you can effectively communicate information and improve the overall user experience. +Any component can be placed inside the card, including avatars. - - + + -## Profile Card +## Card with product -The Profile Card is a specialized variant of the Card component in the Keep React that is specifically designed to display user profiles. It combines textual information with icons and images to create a visually appealing and informative representation of an individual's profile. - - - - - -## Profile Card With Cover Image - -The Profile Card with Cover Image is an extended version of the Profile Card component in the Keep React. It includes a prominent cover image alongside the user's profile information, offering a visually striking way to showcase individuals' profiles. - - - - - -## Post Card - -This component is particularly useful for creating an organized and engaging display of your blog content, allowing users to quickly browse through and access your latest articles. - - - - - -## Product Card - -It provides a structured layout that includes key details about each product, such as the product image, title, price, and a brief description. This component is designed to effectively present your products to users, making it easier for them to evaluate and make purchase decisions. +Any component can be placed inside the card, including avatars. -## Horizontal Card +## Register Card -To make a card in Horizontal view you need to set `horizontal` props as `true`. +Here we design a demo register card for the user. Customize it as desired using the className props. - - + + - -## Pricing Card - -It offers a structured layout that includes details such as the plan name, price, features, and call-to-action buttons. This component is particularly useful for displaying pricing options in a clear and organized manner, helping users make informed decisions about which plan suits their needs best. - - - - - -## API Reference - -Explore the available props for the card component - - diff --git a/app/docs/components/card/cardApi.ts b/app/docs/components/card/cardApi.ts index 0a834a01..ba836928 100644 --- a/app/docs/components/card/cardApi.ts +++ b/app/docs/components/card/cardApi.ts @@ -1,58 +1 @@ -export const cardAPIData = [ - { - id: 1, - propsName: 'shadow', - propsType: 'boolean', - propsDescription: 'Toggle the shadow effect for the card.', - default: 'false', - }, - { - id: 2, - propsName: 'border', - propsType: 'boolean', - propsDescription: 'Toggle the border for the card.', - default: 'false', - }, - { - id: 3, - propsName: 'horizontal', - propsType: 'boolean', - propsDescription: 'Display the card content horizontally.', - default: 'false', - }, - { - id: 4, - propsName: 'href', - propsType: 'string', - propsDescription: 'URL link for the card.', - default: 'None', - }, - { - id: 5, - propsName: 'imgAlt', - propsType: 'string', - propsDescription: "Alt text for the card's background image.", - default: 'None', - }, - { - id: 6, - propsName: 'imgSrc', - propsType: 'string', - propsDescription: "Source URL for the card's background image.", - default: 'URL', - }, - { - id: 7, - propsName: 'imgSize', - propsType: ['sm', 'md', 'lg'], - propsDescription: "Size of the card's background image.", - default: 'lg', - }, - { - id: 8, - propsName: 'className', - propsType: 'string', - propsDescription: 'Custom class to be added to the card.', - default: 'None', - }, -] +export const cardAPIData = [] diff --git a/app/docs/components/card/page.tsx b/app/docs/components/card/page.tsx index becbc7e4..f5089413 100644 --- a/app/docs/components/card/page.tsx +++ b/app/docs/components/card/page.tsx @@ -1,10 +1,10 @@ import type { Metadata, NextPage } from 'next' -import { DocsContentLayout } from '../../../components/DocsContentLayout' import CardDocs from '.' +import { DocsContentLayout } from '../../../components/DocsContentLayout' export const metadata: Metadata = { description: - 'The Card component in the Keep React library is a versatile and visually appealing UI element designed for React applications. It provides a structured container for displaying various types of content, such as text, images, buttons, and more, in an organized and elegant manner.', + 'The card component in Keep React offers a variety of button types, sizes, and states to meet your design needs. With options for icons and destructiveness, you can create visually appealing and functional buttons for your product.', title: 'Card - Keep React', } diff --git a/app/docs/components/card/variant/CardWithAvatar.tsx b/app/docs/components/card/variant/CardWithAvatar.tsx new file mode 100644 index 00000000..1b5746d4 --- /dev/null +++ b/app/docs/components/card/variant/CardWithAvatar.tsx @@ -0,0 +1,43 @@ +'use client' +import { Avatar, Card } from '../../../../src' +const CardWithAvatar = () => { + return ( + + + Our Contributors + They help us to grow up the keep react component library + + + + + + +9 + + + + ) +} + +const CardWithAvatarCode = ` +'use client' +import { Avatar, Card } from 'keep-react' + +export const CardComponent = () => { + return ( + + + Our Contributors + They help us to grow up the keep react component library + + + + + + +9 + + + + ) +} +` +export { CardWithAvatar, CardWithAvatarCode } diff --git a/app/docs/components/card/variant/CardWithIcon.tsx b/app/docs/components/card/variant/CardWithIcon.tsx deleted file mode 100644 index e391d9aa..00000000 --- a/app/docs/components/card/variant/CardWithIcon.tsx +++ /dev/null @@ -1,156 +0,0 @@ -'use client' -import { Button, Card, Popover } from '../../../../src' -import { ArchiveTray, CaretRight, DotsThreeVertical, PencilCircle } from 'phosphor-react' - -const CardWithIcon = () => { - return ( -
- {/* ===CARD ONE=== */} - - - - - - - Keep React - - Component design systems can help developers to be more productive by providing them with a ready-made set - of components to use. - - } iconPosition="left"> - Learn More - - - - - {/* ===CARD TWO=== */} - - - - - - - - Keep React - - Component design systems can help developers to be more productive by providing them with a ready-made - set of components to use. - - - - - - Keep Design System - - - - - - - - {/* ===CARD THREE=== */} - - - - - - Keep React - - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - - - - - -
- ) -} - -const CardWithIconCode = ` -"use client"; -import { Button, Card, Popover } from "keep-react"; -import { - ArchiveTray, - CaretRight, - DotsThreeVertical, - PencilCircle, -} from "phosphor-react"; - -export const CardComponent = () => { - return ( - <> - - - - - - - Keep React - - Component design systems can help developers to be more productive - by providing them with a ready-made set of components to use. - - } - iconPosition="left" - > - Learn More - - - - - - - - - - - - Keep React - - Component design systems can help developers to be more - productive by providing them with a ready-made set of components - to use. - - - - - - Keep Design System - - - - - - - - - - - - - Keep React - - Lorem Ipsum is simply dummy text of the printing and typesetting - industry. - - - - - - - - - ); -}; -` - -export { CardWithIcon, CardWithIconCode } diff --git a/app/docs/components/card/variant/DefaultCard.tsx b/app/docs/components/card/variant/DefaultCard.tsx index 367ca843..4562c4c4 100644 --- a/app/docs/components/card/variant/DefaultCard.tsx +++ b/app/docs/components/card/variant/DefaultCard.tsx @@ -1,45 +1,37 @@ 'use client' import { Card } from '../../../../src' -import { CaretRight } from 'phosphor-react' const DefaultCard = () => { return ( - - Keep design system - - Component design systems can help developers to be more productive by providing them with a ready-made set of - components to use. - - } iconPosition="left"> - Learn More - + + + Keep design system + + Component design systems can help developers to be more productive by providing them with a ready-made set of + components to use. + + ) } const DefaultCardCode = ` -"use client"; -import { Card } from "keep-react"; -import { CaretRight } from "phosphor-react"; +'use client' +import { Card } from 'keep-react' export const CardComponent = () => { return ( - - Keep React - - Component design systems can help developers to be more productive by - providing them with a ready-made set of components to use. - - } - iconPosition="left" - > - Learn More - + + + Keep design system + + Component design systems can help developers to be more productive by providing them with a ready-made set of + components to use. + + - ); -}; + ) +} ` export { DefaultCard, DefaultCardCode } diff --git a/app/docs/components/card/variant/HorizontalCard.tsx b/app/docs/components/card/variant/HorizontalCard.tsx deleted file mode 100644 index 9fea295b..00000000 --- a/app/docs/components/card/variant/HorizontalCard.tsx +++ /dev/null @@ -1,104 +0,0 @@ -'use client' -import { ArrowsOutSimple, Bed, MapPinLine, Shower, Users } from 'phosphor-react' -import { Button, Card } from '../../../../src' - -const HorizontalCard = () => { - return ( - - - - - Garden Street,Ring Road - - - - - 3 Bed Room - - - - 1 Bath - - - - - - 1,032 sqft - - - - Family - - - - $649,00 - - - - - ) -} - -const HorizontalCardCode = ` -"use client"; -import { - ArrowsOutSimple, - Bed, - Heart, - MapPinLine, - Shower, - Users, -} from "phosphor-react"; -import { Button, Card } from "keep-react"; - -export const CardComponent = () => { - return ( - - - - - Garden Street,Ring Road - - - - - 3 Bed Room - - - - 1 Bath - - - - - - 1,032 sqft - - - - Family - - - - $649,00 - - - - - ) -} -` - -export { HorizontalCard, HorizontalCardCode } diff --git a/app/docs/components/card/variant/PostCard.tsx b/app/docs/components/card/variant/PostCard.tsx deleted file mode 100644 index 197fa4f6..00000000 --- a/app/docs/components/card/variant/PostCard.tsx +++ /dev/null @@ -1,137 +0,0 @@ -'use client' -import Image from 'next/image' -import { Badge, Card } from '../../../../src' -import { CaretRight } from 'phosphor-react' - -const PostCard = () => { - return ( -
- - - - - - - Keep Design System - - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo excepturi quam incidunt tempora? - - } - iconPosition="left"> - Read More - - - - - - - - - - - - - Tips & Advice - - - - Keep Design System - - - Component design systems can help developers to be more productive by providing them with a ready-made set - of components to use. - - - - -
- ) -} - -const PostCardCode = ` -"use client"; -import Image from "next/image"; -import { Badge, Card } from "keep-react"; -import { CaretRight } from "phosphor-react"; - -export const CardComponent = () => { - return ( - <> - - - - - - - - Keep React - - - Component design systems can help developers to be more productive - by providing them with a ready-made set of components to use. - - } - iconPosition="left" - > - Read More - - - - - - - - - - - - - Tips & Advice - - - - Keep React - - - Component design systems can help developers to be more productive - by providing them with a ready-made set of components to use. - - - - - - ); -}; -` - -export { PostCard, PostCardCode } diff --git a/app/docs/components/card/variant/PricingCard.tsx b/app/docs/components/card/variant/PricingCard.tsx deleted file mode 100644 index 91d1ca57..00000000 --- a/app/docs/components/card/variant/PricingCard.tsx +++ /dev/null @@ -1,120 +0,0 @@ -'use client' -import Image from 'next/image' -import { CheckCircle } from 'phosphor-react' -import { Button, Card } from '../../../../src' - -const PricingCard = () => { - return ( - - - - - - - Business - - $79 - / mth - - - Until recently, the prevailing view assumed. - - - - - - One Month Free Access - - - - All The Component Access - - - - Access Html Component - - - - Access React Component - - - - - - - - ) -} - -const PricingCardCode = ` -"use client"; -import Image from "next/image"; -import { Button,Card } from "keep-react"; -import { CheckCircle } from "phosphor-react"; - -export const CardComponent = () => { - return ( - - - - - - - - Business - - - $79 - - / mth - - - - Until recently, the prevailing view assumed. - - - - - - - One Month Free Access - - - - - - All The Component Access - - - - - - Access Html Component - - - - - - Access React Component - - - - - - - - - ); -}; -` - -export { PricingCard, PricingCardCode } diff --git a/app/docs/components/card/variant/ProductCard.tsx b/app/docs/components/card/variant/ProductCard.tsx index ccf2557d..84af1fe8 100644 --- a/app/docs/components/card/variant/ProductCard.tsx +++ b/app/docs/components/card/variant/ProductCard.tsx @@ -1,269 +1,47 @@ 'use client' -import { Badge, PlayButton, Card, Button, Progress } from '../../../../src' -import { - ArrowsOutSimple, - Bed, - Heart, - MapPinLine, - Play, - Rows, - ShoppingCart, - Shower, - SkipBack, - SkipForward, - SpeakerHigh, - Users, -} from 'phosphor-react' +import Image from 'next/image' +import { Button, Card } from '../../../../src' const ProductCard = () => { return ( -
-
- - - - - - - - For Sale - - $9.99 - - - Men Nike Shoe - - This can save time and effort, and it can also help to reduce the risk of errors. - - - - - - - - - - - Keep design podcast - By Static Mania - - - 4:05 - 10:05 - - - - - - - } /> - - - - - - -
-
- - - - - - - - Garden Street,Ring Road - - - - - 3 Bed Room - - - - 1 Bath - - - - - - 1,032 sqft - - - - Family - - - - - $649,00 - - - -
-
+ + + + + + Lorem ipsum dolor sit + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ipsam animi voluptas perspiciatis quidem esse! + + + + ) } const ProductCardCode = ` -"use client"; -import { Badge, -Button, -Card, -PlayButton, -Progress } from "keep-react"; -import { - ArrowsOutSimple, - Bed, - Heart, - MapPinLine, - Play, - Rows, - ShoppingCart, - Shower, - SkipBack, - SkipForward, - SpeakerHigh, - Users, -} from "phosphor-react"; +'use client' +import Image from 'next/image' +import { Button, Card } from 'keep-react' export const CardComponent = () => { return ( - <> - {/*=== PRODUCT CARD ONE=== */} - - - - - - - - For Sale - - $9.99 - - - Men Nike Shoe - - This can save time and effort, and it can also help to reduce the risk of errors. - - - - - - - - - {/*=== PRODUCT CARD TWO === */} - - - - Keep design podcast - By Static Mania - - - 4:05 - 10:05 - - - - - - - } /> - - - - - - - - {/*=== PRODUCT CARD THREE === */} - - - - - - - - - Garden Street,Ring Road - - - - - 3 Bed Room - - - - 1 Bath - - - - - - 1,032 sqft - - - - Family - - - - - $649,00 - - - - + + + + + + Lorem ipsum dolor sit + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ipsam animi voluptas perspiciatis quidem esse! + + + + ) } ` diff --git a/app/docs/components/card/variant/ProfileCard.tsx b/app/docs/components/card/variant/ProfileCard.tsx deleted file mode 100644 index dc2f2373..00000000 --- a/app/docs/components/card/variant/ProfileCard.tsx +++ /dev/null @@ -1,119 +0,0 @@ -'use client' -import { Avatar, Card } from '../../../../src' -import { FacebookLogo, LinkedinLogo, TwitterLogo } from 'phosphor-react' - -const ProfileCard = () => { - return ( -
- {/*=== PROFILE CARD ONE=== */} - - - Component design systems can help developers to be more productive by providing them with a ready-made set of - components to use. This can save time and effort, and it can also help to reduce the risk of errors. - - - - - Md Ariful Islam - Product Designer - - - - {/*=== PROFILE CARD TWO=== */} - - - - - - - Khairul Islam Ridoy - - UI/UX Designer - - - } - href="#" - /> - } - href="#" - /> - } - href="#" - /> - - -
- ) -} - -const ProfileCardCode = ` -"use client"; -import { Avatar,Card } from "keep-react"; -import { FacebookLogo, LinkedinLogo, TwitterLogo } from "phosphor-react"; - -export const CardComponent = () => { - return ( - <> - - - Component design systems can help developers to be more productive by providing them with a ready-made set of - components to use. This can save time and effort, and it can also help to reduce the risk of errors. - - - - - Md Ariful Islam - Product Designer - - - - - - - - - - Khairul Islam Ridoy - - UI/UX Designer - - - } - href="#" - /> - } - href="#" - /> - } - href="#" - /> - - - - ); -}; -` - -export { ProfileCard, ProfileCardCode } diff --git a/app/docs/components/card/variant/ProfileCardWithCover.tsx b/app/docs/components/card/variant/ProfileCardWithCover.tsx deleted file mode 100644 index f4728e2c..00000000 --- a/app/docs/components/card/variant/ProfileCardWithCover.tsx +++ /dev/null @@ -1,94 +0,0 @@ -'use client' -import { Heart } from 'phosphor-react' -import { Avatar, Card } from '../../../../src' - -const ProfileCardWithCover = () => { - return ( - - - - - - - - - - Khairul Islam - UI/UX Designer - - - - - Post - - 254 - - - - Followers - - 1245M - - - - Following - - 58 - - - - - ) -} - -const ProfileCardWithCoverCode = ` -"use client"; -import { Heart } from "phosphor-react"; -import { Avatar, Card } from "keep-react"; - -export const CardComponent = () => { - return ( - - - - - - - - - - Khairul Islam - UI/UX Designer - - - - - Post - - 254 - - - - Followers - - 1245M - - - - Following - - 58 - - - - - ) -} -` -export { ProfileCardWithCover, ProfileCardWithCoverCode } diff --git a/app/docs/components/card/variant/RegisterCard.tsx b/app/docs/components/card/variant/RegisterCard.tsx new file mode 100644 index 00000000..1eec8766 --- /dev/null +++ b/app/docs/components/card/variant/RegisterCard.tsx @@ -0,0 +1,106 @@ +'use client' +import { Envelope, FacebookLogo, GoogleLogo, Lock } from 'phosphor-react' +import { Button, Card, Divider, Icon, Input, Label } from '../../../../src' + +const RegisterCard = () => { + return ( + + + + Create an account + If you don't have any account then just click here + +
+ + +
+ Or +
+
+ +
+ + + + +
+
+
+ +
+ + + + +
+
+ + + + + ) +} + +const RegisterCardCode = ` +'use client' +import { Envelope, FacebookLogo, GoogleLogo, Lock } from 'phosphor-react' +import { Button, Card, Divider, Icon, Input, Label } from 'keep-react' + +export const CardComponent = () => { + return ( + + + + Create an account + If you don't have any account then just click here + +
+ + +
+ Or +
+
+ +
+ + + + +
+
+
+ +
+ + + + +
+
+ + + + + ) +} + +` + +export { RegisterCard, RegisterCardCode } diff --git a/app/docs/components/carousel/carousel.mdx b/app/docs/components/carousel/carousel.mdx index 0fd1a87c..3b577576 100644 --- a/app/docs/components/carousel/carousel.mdx +++ b/app/docs/components/carousel/carousel.mdx @@ -6,13 +6,12 @@ import { } from './variant/CarouselWithCustomControlIcon' import { CarouselWithTextControl, CarouselWithTextControlCode } from './variant/CarouselWithTextControl' import { CarouselWithIndicator, CarouselWithIndicatorCode } from './variant/CarouselWithIndicator' -import { MultipleCarousel, MultipleCarouselCode } from './variant/MultipleCarousel' import { carouselDataApi } from './carouselApi' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' + +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents @@ -58,14 +57,6 @@ The IndicatorsType prop allows you to choose from different types of indicators. -## Multiple Carousel - -A Multiple Carousel is a user interface component that allows you to display multiple carousels on a single page or screen. - - - - - ## API Reference Explore the available props for the carousel component diff --git a/app/docs/components/carousel/variant/CarouselWithCustomControlIcon.tsx b/app/docs/components/carousel/variant/CarouselWithCustomControlIcon.tsx index 3cdd655f..e97f2ee1 100644 --- a/app/docs/components/carousel/variant/CarouselWithCustomControlIcon.tsx +++ b/app/docs/components/carousel/variant/CarouselWithCustomControlIcon.tsx @@ -2,6 +2,10 @@ import Image from 'next/image' import { Carousel } from '../../../../src' import { ArrowLineLeft, ArrowLineRight } from 'phosphor-react' +import CarouselOne from '../../../../../public/images/carousel/one.svg' +import CarouselTwo from '../../../../../public/images/carousel/two.svg' +import CarouselThree from '../../../../../public/images/carousel/three.svg' +import CarouselFour from '../../../../../public/images/carousel/four.svg' const CarouselWithCustomControlIcon = () => { return ( @@ -17,30 +21,10 @@ const CarouselWithCustomControlIcon = () => { }> - - - - + + + + ) } @@ -65,30 +49,10 @@ export const CarouselComponent = () => { }> - - - - + + + + ) } diff --git a/app/docs/components/carousel/variant/CarouselWithIndicator.tsx b/app/docs/components/carousel/variant/CarouselWithIndicator.tsx index be3cac49..29a2026e 100644 --- a/app/docs/components/carousel/variant/CarouselWithIndicator.tsx +++ b/app/docs/components/carousel/variant/CarouselWithIndicator.tsx @@ -1,34 +1,18 @@ 'use client' import { Carousel } from '../../../../src' import Image from 'next/image' +import CarouselOne from '../../../../../public/images/carousel/one.svg' +import CarouselTwo from '../../../../../public/images/carousel/two.svg' +import CarouselThree from '../../../../../public/images/carousel/three.svg' +import CarouselFour from '../../../../../public/images/carousel/four.svg' const CarouselWithIndicator = () => { return ( - - - - + + + + ) } @@ -41,30 +25,10 @@ import { Carousel } from "keep-react"; export const CarouselComponent = () => { return ( - - - - + + + + ) } diff --git a/app/docs/components/carousel/variant/CarouselWithTextControl.tsx b/app/docs/components/carousel/variant/CarouselWithTextControl.tsx index 4ebdbc1c..6027da89 100644 --- a/app/docs/components/carousel/variant/CarouselWithTextControl.tsx +++ b/app/docs/components/carousel/variant/CarouselWithTextControl.tsx @@ -1,34 +1,18 @@ 'use client' import { Carousel } from '../../../../src' import Image from 'next/image' +import CarouselOne from '../../../../../public/images/carousel/one.svg' +import CarouselTwo from '../../../../../public/images/carousel/two.svg' +import CarouselThree from '../../../../../public/images/carousel/three.svg' +import CarouselFour from '../../../../../public/images/carousel/four.svg' const CarouselWithTextControl = () => { return ( - - - - + + + + ) } @@ -41,30 +25,10 @@ import { Carousel } from "keep-react"; export const CarouselComponent = () => { return ( - - - - + + + + ) } diff --git a/app/docs/components/carousel/variant/DefaultCarousel.tsx b/app/docs/components/carousel/variant/DefaultCarousel.tsx index 2b88eea5..f7cb8d7d 100644 --- a/app/docs/components/carousel/variant/DefaultCarousel.tsx +++ b/app/docs/components/carousel/variant/DefaultCarousel.tsx @@ -1,34 +1,18 @@ 'use client' import Image from 'next/image' import { Carousel } from '../../../../src' +import CarouselOne from '../../../../../public/images/carousel/one.svg' +import CarouselTwo from '../../../../../public/images/carousel/two.svg' +import CarouselThree from '../../../../../public/images/carousel/three.svg' +import CarouselFour from '../../../../../public/images/carousel/four.svg' const DefaultCarousel = () => { return ( - - - - + + + + ) } @@ -41,30 +25,10 @@ import { Carousel } from "keep-react"; export const CarouselComponent = () => { return ( - - - - + + + + ) } diff --git a/app/docs/components/carousel/variant/MultipleCarousel.tsx b/app/docs/components/carousel/variant/MultipleCarousel.tsx deleted file mode 100644 index e7afe42e..00000000 --- a/app/docs/components/carousel/variant/MultipleCarousel.tsx +++ /dev/null @@ -1,113 +0,0 @@ -'use client' -import Image from 'next/image' -import { Carousel } from '../../../../src' - -const MultipleCarousel = () => { - return ( -
- - - - - - - - - - -
- ) -} - -const MultipleCarouselCode = ` -"use client"; -import Image from "next/image"; -import { Carousel } from "keep-react"; - -export const CarouselComponent = () => { - return ( -
- - - - - - - - - - -
- ); -} -` - -export { MultipleCarousel, MultipleCarouselCode } diff --git a/app/docs/components/carousel/variant/StaticCarousel.tsx b/app/docs/components/carousel/variant/StaticCarousel.tsx index 4a45431c..28a160ce 100644 --- a/app/docs/components/carousel/variant/StaticCarousel.tsx +++ b/app/docs/components/carousel/variant/StaticCarousel.tsx @@ -1,34 +1,18 @@ 'use client' import { Carousel } from '../../../../src' import Image from 'next/image' +import CarouselOne from '../../../../../public/images/carousel/one.svg' +import CarouselTwo from '../../../../../public/images/carousel/two.svg' +import CarouselThree from '../../../../../public/images/carousel/three.svg' +import CarouselFour from '../../../../../public/images/carousel/four.svg' const StaticCarousel = () => { return ( - - - - + + + + ) } @@ -41,30 +25,10 @@ import { Carousel } from "keep-react"; export const CarouselComponent = () => { return ( - - - - + + + + ) } diff --git a/app/docs/components/checkbox/Checkbox.mdx b/app/docs/components/checkbox/Checkbox.mdx index b27d6091..30b4b826 100644 --- a/app/docs/components/checkbox/Checkbox.mdx +++ b/app/docs/components/checkbox/Checkbox.mdx @@ -3,9 +3,9 @@ import { CheckboxVariant, CheckboxVariantCode } from './variant/CheckboxVariant' import { DisabledCheckbox, DisabledCheckboxCode } from './variant/DisabledCheckbox' import { CheckBoxApiData } from './CheckboxApi' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' + +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents @@ -15,15 +15,15 @@ The Checkbox component is a user interface element that allows users to toggle b The default checkbox is a square checkbox that can be checked or unchecked. - + ## Checkbox Variant -The Checkbox component offers two variants: `square` and `circle`. You can use the `variant` prop to specify the desired variant. +The Checkbox component offers four variants: `checked`,`dashed`,`rounded` and `circle`. You can use the `variant` prop to specify the desired variant. - + @@ -31,7 +31,7 @@ The Checkbox component offers two variants: `square` and `circle`. You can use t You can disable the checkbox by setting the `disabled` prop to `true`. - + diff --git a/app/docs/components/checkbox/CheckboxApi.ts b/app/docs/components/checkbox/CheckboxApi.ts index 868cf396..f542248a 100644 --- a/app/docs/components/checkbox/CheckboxApi.ts +++ b/app/docs/components/checkbox/CheckboxApi.ts @@ -1,65 +1,16 @@ export const CheckBoxApiData = [ { id: 1, - propsName: 'size', - propsType: ['sm', 'md', 'lg'], - propsDescription: 'Available size options for checkbox.', - default: 'md', - }, - { - id: 2, - propsName: 'label', - propsType: 'string', - propsDescription: 'Checkbox label text', - default: 'Checkbox', - }, - { - id: 3, - propsName: 'color', - propsType: ['info', 'warning', 'error', 'success'], - propsDescription: 'Checkbox Color', - default: 'info', - }, - { - id: 4, - propsName: 'labelColor', - propsType: ['info', 'warning', 'error', 'success'], - propsDescription: 'Checkbox Color', - default: 'info', - }, - { - id: 5, propsName: 'variant', - propsType: ['square', 'circle'], + propsType: ['dashed', 'checked', 'rounded', 'circle'], propsDescription: 'Checkbox Variant', - default: 'square', + default: 'checked', }, { - id: 6, - propsName: 'id', - propsType: 'string', - propsDescription: 'Checkbox Input Field ID', - default: 'one', - }, - { - id: 7, - propsName: 'fieldName', - propsType: 'string', - propsDescription: 'Checkbox Input Field Name', - default: 'checkbox', - }, - { - id: 8, + id: 2, propsName: 'className', propsType: 'string', propsDescription: 'Custom class to be added to the checkbox.', default: 'None', }, - { - id: 9, - propsName: 'labelStyle', - propsType: 'string', - propsDescription: 'Custom class to be added to the label.', - default: 'None', - }, ] diff --git a/app/docs/components/checkbox/variant/CheckboxVariant.tsx b/app/docs/components/checkbox/variant/CheckboxVariant.tsx index a42064fb..8f84bfd8 100644 --- a/app/docs/components/checkbox/variant/CheckboxVariant.tsx +++ b/app/docs/components/checkbox/variant/CheckboxVariant.tsx @@ -1,45 +1,59 @@ 'use client' -import { CheckBox } from '../../../../src' +import { useState } from 'react' +import { Checkbox, Label } from '../../../../src' const CheckboxVariant = () => { + const [checked1, setChecked1] = useState(true) + const [checked2, setChecked2] = useState(true) + const [checked3, setChecked3] = useState(true) + const [checked4, setChecked4] = useState(true) return ( -
- - +
+
+ setChecked1(e.target.checked)} checked={checked1} /> + +
+
+ setChecked2(e.target.checked)} checked={checked2} /> + +
+
+ setChecked3(e.target.checked)} checked={checked3} /> + +
+
+ setChecked4(e.target.checked)} checked={checked4} /> + +
) } const CheckboxVariantCode = ` -"use client"; -import { CheckBox } from "keep-react"; +'use client' +import { Checkbox, Label } from 'keep-react' -export const CheckboxComponent = () => { - const handleChecked = (value) => { - // value is available - }; +export const CheckboxComponent = () => { return ( <> - - +
+ + +
+
+ + +
+
+ + +
+
+ + +
- ); + ) } ` diff --git a/app/docs/components/checkbox/variant/DefaultCheckbox.tsx b/app/docs/components/checkbox/variant/DefaultCheckbox.tsx index 09e2a900..7ffc9ae0 100644 --- a/app/docs/components/checkbox/variant/DefaultCheckbox.tsx +++ b/app/docs/components/checkbox/variant/DefaultCheckbox.tsx @@ -1,29 +1,28 @@ 'use client' -import { CheckBox } from '../../../../src' +import { useState } from 'react' +import { Checkbox, Label } from '../../../../src' const DefaultCheckbox = () => { - return + const [checked, setChecked] = useState(true) + return ( +
+ setChecked(e.target.checked)} /> + +
+ ) } const DefaultCheckboxCode = ` -"use client"; -import { CheckBox } from "keep-react"; +'use client' +import { Checkbox, Label } from 'keep-react' -export const CheckboxComponent = () => { - const handleChecked = (value) => { - //value - }; +export const CheckboxComponent = () => { return ( - - ); +
+ + +
+ ) } ` diff --git a/app/docs/components/checkbox/variant/DisabledCheckbox.tsx b/app/docs/components/checkbox/variant/DisabledCheckbox.tsx index d3da5d97..c55f38ca 100644 --- a/app/docs/components/checkbox/variant/DisabledCheckbox.tsx +++ b/app/docs/components/checkbox/variant/DisabledCheckbox.tsx @@ -1,38 +1,82 @@ 'use client' -import { CheckBox } from '../../../../src' +import { useState } from 'react' +import { Checkbox, Label } from '../../../../src' const DisabledCheckbox = () => { + const [checked1, setChecked1] = useState(true) + const [checked2, setChecked2] = useState(true) + const [checked3, setChecked3] = useState(true) + const [checked4, setChecked4] = useState(true) return ( -
- +
+
+ setChecked1(e.target.checked)} + /> + +
+
+ setChecked2(e.target.checked)} + /> + +
+
+ setChecked3(e.target.checked)} + /> + +
+
+ setChecked4(e.target.checked)} + /> + +
) } - const DisabledCheckboxCode = ` -"use client"; -import { CheckBox } from "keep-react"; +'use client' +import { Checkbox, Label } from 'keep-react' -export const CheckboxComponent = () => { +export const CheckboxComponent = () => { return ( - - ); + <> +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + ) } ` diff --git a/app/docs/components/checkboxGroup/CheckboxGroup.mdx b/app/docs/components/checkboxGroup/CheckboxGroup.mdx deleted file mode 100644 index 52472c96..00000000 --- a/app/docs/components/checkboxGroup/CheckboxGroup.mdx +++ /dev/null @@ -1,69 +0,0 @@ -import { DefaultCheckboxGroup, DefaultCheckboxGroupCode } from './variant/DefaultCheckboxGroup' -import { CircleCheckboxGroup, CircleCheckboxGroupCode } from './variant/CircleCheckboxGroup' -import { CheckboxGroupWithIcon, CheckboxGroupWithIconCode } from './variant/CheckboxGroupWithIcon' -import { CheckboxGroupWithLogo, CheckboxGroupWithLogoCode } from './variant/CheckboxGroupWithLogo' -import { CheckboxGroupWithAvatar, CheckboxGroupWithAvatarCode } from './variant/CheckboxGroupWithAvatar' -import { CheckboxGroupWithImage, CheckboxGroupWithImageCode } from './variant/CheckboxGroupWithImage' -import { checkboxGroupApiData } from './CheckboxGroupApi' - -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" - -## Table of Contents - -A Checkbox Group is a user interface element that allows users to select multiple options from a list by checking corresponding checkboxes. This component is often used when users need to choose from a set of related options, and they can select one or more options simultaneously. - -## Default Checkbox Group - -The Default Checkbox Group is a pre-designed Checkbox Group component that lets users select a single option from a list of checkboxes. - - - - - -## Circle Checkbox Group - -When the `checkboxType` is set to `"circle"` the checkboxes within the group are displayed in a circular shape rather than the traditional `square` shape. - - - - - -## Checkbox Group With Icon - -A Checkbox Group with Icon is a Checkbox Group component that includes an icon next to each checkbox option. In this case, the `icon` prop is used to specify the icon that should be displayed alongside the checkboxes. - - - - - -## Checkbox Group With Logo - -A Checkbox Group with Logo is a Checkbox Group component that includes a logo image next to each checkbox option using the `img` prop. - - - - - -## Checkbox Group With Avatar - -A Checkbox Group with Avatar is a Checkbox Group component that features an avatar image next to each checkbox option using the `img` prop. - - - - - -## Checkbox Group With Image - -A Checkbox Group with image is a Checkbox Group component that displays an image next to each checkbox option using the `img` prop. - - - - - -## API Reference - -Explore the available props for the checkbox group component - - diff --git a/app/docs/components/checkboxGroup/CheckboxGroupApi.ts b/app/docs/components/checkboxGroup/CheckboxGroupApi.ts deleted file mode 100644 index e949f4ae..00000000 --- a/app/docs/components/checkboxGroup/CheckboxGroupApi.ts +++ /dev/null @@ -1,93 +0,0 @@ -export const checkboxGroupApiData = [ - { - id: 1, - propsName: 'checkboxType', - propsType: ['square', 'circle'], - propsDescription: 'Specifies the type of checkbox style: square or circular.', - default: 'square', - }, - { - id: 2, - propsName: 'checkboxPosition', - propsType: ['left', 'right'], - propsDescription: 'Specifies the position of the checkbox relative to the label.', - default: 'left', - }, - { - id: 3, - propsName: 'title', - propsType: 'string', - propsDescription: 'Main title or label for the checkbox group.', - default: 'Static Design System', - }, - { - id: 4, - propsName: 'description', - propsType: 'string', - propsDescription: 'Additional description or information about the checkbox group.', - default: 'The largest UI kit...', - }, - { - id: 5, - propsName: 'icon', - propsType: 'ReactNode', - propsDescription: 'Optional icon displayed alongside the checkbox group.', - default: 'None', - }, - { - id: 6, - propsName: 'img', - propsType: 'string', - propsDescription: 'URL of an image displayed alongside the checkbox group.', - default: 'URL', - }, - { - id: 7, - propsName: 'imgShape', - propsType: ['square', 'circle'], - propsDescription: 'Specifies the shape of the image: square or circular.', - default: 'circle', - }, - { - id: 10, - propsName: 'value', - propsType: 'string', - propsDescription: 'Value of the currently selected checkbox.', - default: 'selected', - }, - { - id: 11, - propsName: 'selected', - propsType: 'string', - propsDescription: 'Value of the pre-selected checkbox, if any.', - default: 'selected', - }, - { - id: 12, - propsName: 'onOptionChange', - propsType: '(e: ChangeEvent) => void', - propsDescription: 'Callback function when a checkbox option is changed.', - default: 'function', - }, - { - id: 13, - propsName: 'className', - propsType: 'string', - propsDescription: 'Custom class to be added to the checkbox group container.', - default: 'None', - }, - { - id: 14, - propsName: 'titleClassName', - propsType: 'string', - propsDescription: 'Custom class to be added to the checkbox title.', - default: 'None', - }, - { - id: 15, - propsName: 'descriptionClassName', - propsType: 'string', - propsDescription: 'Custom class to be added to the checkbox description.', - default: 'None', - }, -] diff --git a/app/docs/components/checkboxGroup/index.tsx b/app/docs/components/checkboxGroup/index.tsx deleted file mode 100644 index 1adcf9a1..00000000 --- a/app/docs/components/checkboxGroup/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -'use client' -import type { FC } from 'react' -import CheckboxGroupDocsContent from './CheckboxGroup.mdx' - -const CheckboxGroupDocs: FC = () => - -export default CheckboxGroupDocs diff --git a/app/docs/components/checkboxGroup/page.tsx b/app/docs/components/checkboxGroup/page.tsx deleted file mode 100644 index 4327c2a3..00000000 --- a/app/docs/components/checkboxGroup/page.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { Metadata, NextPage } from 'next' -import { DocsContentLayout } from '../../../components/DocsContentLayout' -import CheckboxGroupDocs from '.' - -export const metadata: Metadata = { - description: - 'A Checkbox Group is a user interface element that allows users to select multiple options from a list by checking corresponding checkboxes. This component is often used when users need to choose from a set of related options, and they can select one or more options simultaneously.', - title: 'Checkbox Group - Keep React', -} - -const page: NextPage = () => { - return ( - - - - ) -} - -export default page diff --git a/app/docs/components/checkboxGroup/variant/CheckboxGroupWithAvatar.tsx b/app/docs/components/checkboxGroup/variant/CheckboxGroupWithAvatar.tsx deleted file mode 100644 index de9dfc06..00000000 --- a/app/docs/components/checkboxGroup/variant/CheckboxGroupWithAvatar.tsx +++ /dev/null @@ -1,113 +0,0 @@ -'use client' -import { ChangeEvent, useState } from 'react' -import { CheckboxGroup } from '../../../../src' - -const CheckboxGroupWithAvatar = () => { - const [selected, setSelected] = useState('') - const handleOptionChange = (e: ChangeEvent) => { - setSelected(e.target.value) - } - return ( -
- - - - - - ) -} - -const CheckboxGroupWithAvatarCode = ` -"use client"; -import { useState } from "react"; -import { CheckboxGroup } from "keep-react"; - -export const CheckboxGroupComponent = () => { - const [selected, setSelected] = useState(""); - const handleOptionChange = (event) => { - setSelected(event.target.value); - }; - return ( -
- - - - - - ); -} -` - -export { CheckboxGroupWithAvatar, CheckboxGroupWithAvatarCode } diff --git a/app/docs/components/checkboxGroup/variant/CheckboxGroupWithIcon.tsx b/app/docs/components/checkboxGroup/variant/CheckboxGroupWithIcon.tsx deleted file mode 100644 index 6461165e..00000000 --- a/app/docs/components/checkboxGroup/variant/CheckboxGroupWithIcon.tsx +++ /dev/null @@ -1,123 +0,0 @@ -'use client' -import { ChangeEvent, useState } from 'react' -import { SquaresFour } from 'phosphor-react' -import { CheckboxGroup } from '../../../../src' - -const CheckboxGroupWithIcon = () => { - const [selected, setSelected] = useState('') - const handleOptionChange = (e: ChangeEvent) => { - setSelected(e.target.value) - } - return ( -
- } - fieldName="Icon Checkbox" - value="value8" - selected={selected} - onOptionChange={handleOptionChange} - /> - } - fieldName="Icon Checkbox" - value="value9" - selected={selected} - onOptionChange={handleOptionChange} - /> - } - fieldName="Icon Checkbox" - value="value10" - selected={selected} - onOptionChange={handleOptionChange} - /> - } - fieldName="Icon Checkbox" - value="value11" - selected={selected} - onOptionChange={handleOptionChange} - /> - - ) -} - -const CheckboxGroupWithIconCode = ` -"use client"; -import { useState } from "react"; -import { SquaresFour } from "phosphor-react"; -import { CheckboxGroup } from "keep-react"; - -export const CheckboxGroupComponent = () => { - const [selected, setSelected] = useState(""); - const handleOptionChange = (event) => { - setSelected(event.target.value); - }; - return ( -
- } - fieldName="Icon Checkbox" - value="value8" - selected={selected} - onOptionChange={handleOptionChange} - /> - } - fieldName="Icon Checkbox" - value="value9" - selected={selected} - onOptionChange={handleOptionChange} - /> - } - fieldName="Icon Checkbox" - value="value10" - selected={selected} - onOptionChange={handleOptionChange} - /> - } - fieldName="Icon Checkbox" - value="value11" - selected={selected} - onOptionChange={handleOptionChange} - /> - - ); -} -` - -export { CheckboxGroupWithIcon, CheckboxGroupWithIconCode } diff --git a/app/docs/components/checkboxGroup/variant/CheckboxGroupWithImage.tsx b/app/docs/components/checkboxGroup/variant/CheckboxGroupWithImage.tsx deleted file mode 100644 index 953f204b..00000000 --- a/app/docs/components/checkboxGroup/variant/CheckboxGroupWithImage.tsx +++ /dev/null @@ -1,112 +0,0 @@ -'use client' -import { ChangeEvent, useState } from 'react' -import { CheckboxGroup } from '../../../../src' - -const CheckboxGroupWithImage = () => { - const [selected, setSelected] = useState('') - const handleOptionChange = (e: ChangeEvent) => { - setSelected(e.target.value) - } - return ( -
- - - - - - ) -} - -const CheckboxGroupWithImageCode = ` -"use client"; -import { useState } from "react"; -import { CheckboxGroup } from "keep-react"; - -export const CheckboxGroupComponent = () => { - const [selected, setSelected] = useState(""); - const handleOptionChange = (event) => { - setSelected(event.target.value); - }; - return ( -
- - - - - - ); -}` - -export { CheckboxGroupWithImage, CheckboxGroupWithImageCode } diff --git a/app/docs/components/checkboxGroup/variant/CheckboxGroupWithLogo.tsx b/app/docs/components/checkboxGroup/variant/CheckboxGroupWithLogo.tsx deleted file mode 100644 index 1a9afe03..00000000 --- a/app/docs/components/checkboxGroup/variant/CheckboxGroupWithLogo.tsx +++ /dev/null @@ -1,112 +0,0 @@ -'use client' -import { ChangeEvent, useState } from 'react' -import { CheckboxGroup } from '../../../../src' - -const CheckboxGroupWithLogo = () => { - const [selected, setSelected] = useState('') - const handleOptionChange = (e: ChangeEvent) => { - setSelected(e.target.value) - } - return ( -
- - - - - - ) -} -const CheckboxGroupWithLogoCode = ` -"use client"; -import { useState } from "react"; -import { CheckboxGroup } from "keep-react"; - -export const CheckboxGroupComponent = () => { - const [selected, setSelected] = useState(""); - const handleOptionChange = (event) => { - setSelected(event.target.value); - }; - return ( -
- - - - - - ); -} -` - -export { CheckboxGroupWithLogo, CheckboxGroupWithLogoCode } diff --git a/app/docs/components/checkboxGroup/variant/CircleCheckboxGroup.tsx b/app/docs/components/checkboxGroup/variant/CircleCheckboxGroup.tsx deleted file mode 100644 index a0449d35..00000000 --- a/app/docs/components/checkboxGroup/variant/CircleCheckboxGroup.tsx +++ /dev/null @@ -1,113 +0,0 @@ -'use client' -import { ChangeEvent, useState } from 'react' -import { CheckboxGroup } from '../../../../src' - -const CircleCheckboxGroup = () => { - const [selected, setSelected] = useState('') - const handleOptionChange = (e: ChangeEvent) => { - setSelected(e.target.value) - } - return ( -
- - - - - - ) -} - -const CircleCheckboxGroupCode = ` -"use client"; -import { useState } from "react"; -import { CheckboxGroup } from "keep-react"; - -export const CheckboxGroupComponent = () => { - const [selected, setSelected] = useState(""); - const handleOptionChange = (event) => { - setSelected(event.target.value); - }; - return ( -
- - - - - - ); -} -` - -export { CircleCheckboxGroup, CircleCheckboxGroupCode } diff --git a/app/docs/components/checkboxGroup/variant/DefaultCheckboxGroup.tsx b/app/docs/components/checkboxGroup/variant/DefaultCheckboxGroup.tsx deleted file mode 100644 index 9a6aad63..00000000 --- a/app/docs/components/checkboxGroup/variant/DefaultCheckboxGroup.tsx +++ /dev/null @@ -1,97 +0,0 @@ -'use client' -import { ChangeEvent, useState } from 'react' -import { CheckboxGroup } from '../../../../src' - -const DefaultCheckboxGroup = () => { - const [selected, setSelected] = useState('') - const handleOptionChange = (e: ChangeEvent) => { - setSelected(e.target.value) - } - return ( -
- - - - - - ) -} - -const DefaultCheckboxGroupCode = ` -"use client"; -import { useState } from "react"; -import { CheckboxGroup } from "keep-react"; - -export const CheckboxGroupComponent = () => { - const [selected, setSelected] = useState(""); - const handleOptionChange = (event) => { - setSelected(event.target.value); - }; - return ( -
- - - - - - ); -} -` - -export { DefaultCheckboxGroup, DefaultCheckboxGroupCode } diff --git a/app/docs/components/datePicker/DatePicker.mdx b/app/docs/components/datePicker/DatePicker.mdx index 9c7dd531..bf7c9a1b 100644 --- a/app/docs/components/datePicker/DatePicker.mdx +++ b/app/docs/components/datePicker/DatePicker.mdx @@ -7,9 +7,9 @@ import { YearPicker, YearPickerCode } from './variant/YearPicker' import { TimePicker, TimePickerCode } from './variant/TimePicker' import { DatePickerApiData } from './DatePickerApi' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' + +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents diff --git a/app/docs/components/divider/Divider.mdx b/app/docs/components/divider/Divider.mdx new file mode 100644 index 00000000..d33f1446 --- /dev/null +++ b/app/docs/components/divider/Divider.mdx @@ -0,0 +1,50 @@ +import { DefaultDivider, DefaultDividerCode } from './variant/DefaultDivider' +import { DividerColor, DividerColorCode } from './variant/DividerColor' +import { DividerSize, DividerSizeCode } from './variant/DividerSize' +import { DividerAlign, DividerAlignCode } from './variant/DividerAlign' + +import CodePreview from '../../../components/CodePreview' +import ComponentApi from '../../../components/ComponentApi' +import { dividerDataAPI } from './DividerAPI' + +## Table of Contents + +The Divider component serves as a visual separator, helping to organize content and improve readability in user interfaces. It allows you to add horizontal lines or dividers between different sections of a page or within a component. With customizable options for color, size, and alignment, the Divider component enhances the overall design and structure of your application. + +## Default Divider + +Displays a default divider with the secondary color. + + + + + +## Divider color variant + +You can customize the color of the divider using the `color` prop. Available options are `'primary'`, `'secondary'`, `'success'`, `'warning'`, and `'error'`. + + + + + +## Divider size variant + +Adjust the size of the divider with the `size` prop. Options include `'sm'`, `'md'`, `'lg'`, `'xl'`, and `'2xl'`. + + + + + +## Divider align variant + +Control the alignment of the divider with the `variant` prop. Choose from `'start'`, `'end'`, or `'center'`. + + + + + +## API Reference + +Here is a list of the props that you can pass to the Divider component: + + diff --git a/app/docs/components/divider/DividerAPI.ts b/app/docs/components/divider/DividerAPI.ts new file mode 100644 index 00000000..bd0e5e6f --- /dev/null +++ b/app/docs/components/divider/DividerAPI.ts @@ -0,0 +1,37 @@ +export const dividerDataAPI = [ + { + id: 1, + propsName: 'color', + propsType: ['primary', 'secondary', 'success', 'warning', 'error'], + propsDescription: 'Available color options for the divider.', + default: 'secondary', + }, + { + id: 2, + propsName: 'size', + propsType: ['sm', 'md', 'lg', 'xl', '2xl'], + propsDescription: 'Available sizes options for the divider.', + default: 'md', + }, + { + id: 3, + propsName: 'variant', + propsType: ['start', 'end', 'center'], + propsDescription: 'Available variants for the divider alignment.', + default: 'center', + }, + { + id: 4, + propsName: 'className', + propsType: 'string', + propsDescription: 'Additional CSS classes to customize the divider appearance.', + default: '', + }, + { + id: 5, + propsName: 'children', + propsType: 'ReactNode', + propsDescription: 'Content to be placed within the divider, if any.', + default: '', + }, +] diff --git a/app/docs/components/divider/index.tsx b/app/docs/components/divider/index.tsx new file mode 100644 index 00000000..c8d1c0b9 --- /dev/null +++ b/app/docs/components/divider/index.tsx @@ -0,0 +1,7 @@ +'use client' +import type { FC } from 'react' +import DividerDocsContent from './Divider.mdx' + +const DividerDocs: FC = () => + +export default DividerDocs diff --git a/app/docs/components/divider/page.tsx b/app/docs/components/divider/page.tsx new file mode 100644 index 00000000..ab2b7b15 --- /dev/null +++ b/app/docs/components/divider/page.tsx @@ -0,0 +1,19 @@ +import type { Metadata, NextPage } from 'next' +import DividerDocs from '.' +import { DocsContentLayout } from '../../../components/DocsContentLayout' + +export const metadata: Metadata = { + description: + 'The Divider component serves as a visual separator, helping to organize content and improve readability in user interfaces. It allows you to add horizontal lines or dividers between different sections of a page or within a component. With customizable options for color, size, and alignment, the Divider component enhances the overall design and structure of your application.', + title: 'Divider - Keep React', +} + +const page: NextPage = () => { + return ( + + + + ) +} + +export default page diff --git a/app/docs/components/divider/variant/DefaultDivider.tsx b/app/docs/components/divider/variant/DefaultDivider.tsx new file mode 100644 index 00000000..a4c7db30 --- /dev/null +++ b/app/docs/components/divider/variant/DefaultDivider.tsx @@ -0,0 +1,33 @@ +'use client' +import { Divider, Typography } from '../../../../src' + +const DefaultDivider = () => { + return ( +
+ I am alone, and feel the charm of existence in this spot. + + I should be incapable of drawing a single stroke at the present moment. + + A wonderful serenity has taken possession of my entire soul. +
+ ) +} + +const DefaultDividerCode = ` +'use client' +import { Divider, Typography } from 'keep-react' + +export const DividerComponent = () => { + return ( +
+ I am alone, and feel the charm of existence in this spot. + + I should be incapable of drawing a single stroke at the present moment. + + A wonderful serenity has taken possession of my entire soul. +
+ ) +} +` + +export { DefaultDivider, DefaultDividerCode } diff --git a/app/docs/components/divider/variant/DividerAlign.tsx b/app/docs/components/divider/variant/DividerAlign.tsx new file mode 100644 index 00000000..2ec8cc4d --- /dev/null +++ b/app/docs/components/divider/variant/DividerAlign.tsx @@ -0,0 +1,29 @@ +'use client' +import { Divider } from '../../../../src' + +const DividerAlign = () => { + return ( +
+ Left Align + Center Align + Right Align +
+ ) +} + +const DividerAlignCode = ` +'use client' +import { Divider } from 'keep-react' + +export const DividerComponent = () => { + return ( +
+ Left Align + Center Align + Right Align +
+ ) +} +` + +export { DividerAlign, DividerAlignCode } diff --git a/app/docs/components/divider/variant/DividerColor.tsx b/app/docs/components/divider/variant/DividerColor.tsx new file mode 100644 index 00000000..121f75f6 --- /dev/null +++ b/app/docs/components/divider/variant/DividerColor.tsx @@ -0,0 +1,33 @@ +'use client' +import { Divider } from '../../../../src' + +const DividerColor = () => { + return ( +
+ + + + + +
+ ) +} + +const DividerColorCode = ` +'use client' +import { Divider } from 'keep-react' + +export const DividerComponent = () => { + return ( +
+ + + + + +
+ ) +} +` + +export { DividerColor, DividerColorCode } diff --git a/app/docs/components/divider/variant/DividerSize.tsx b/app/docs/components/divider/variant/DividerSize.tsx new file mode 100644 index 00000000..6b8c17e8 --- /dev/null +++ b/app/docs/components/divider/variant/DividerSize.tsx @@ -0,0 +1,33 @@ +'use client' +import { Divider } from '../../../../src' + +const DividerSize = () => { + return ( +
+ + + + + +
+ ) +} + +const DividerSizeCode = ` +'use client' +import { Divider } from 'keep-react' + +export const DividerComponent = () => { + return ( +
+ + + + + +
+ ) +} +` + +export { DividerSize, DividerSizeCode } diff --git a/app/docs/components/dropdown/Dropdown.mdx b/app/docs/components/dropdown/Dropdown.mdx index 2202b7fb..c18df67d 100644 --- a/app/docs/components/dropdown/Dropdown.mdx +++ b/app/docs/components/dropdown/Dropdown.mdx @@ -1,16 +1,9 @@ import { DefaultDropdown, DefaultDropdownCode } from './variant/DefaultDropdown' - -import { DropdownSearchBar, DropdownSearchBarCode } from './variant/DropdownSearchBar' -import { DropdownWithBothSideIcon, DropdownWithBothSideIconCode } from './variant/DropdownWithBothSideIcon' - -import { DropdownWithIconAndSearchBar, DropdownWithIconAndSearchBarCode } from './variant/DropdownWithIconAndSearchBar' - -import { DropdownWithTitleDescription, DropdownWithTitleDescriptionCode } from './variant/DropdownWithTitleDescription' - +import { DropdownWithIcon, DropdownWithIconCode } from './variant/DropdownWithIcon' +import { CustomDropdown, CustomDropdownCode } from './variant/CustomDropdown' import { dropdownAPIData } from './DropdownApi' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents @@ -18,42 +11,26 @@ The Dropdown Component is a versatile user interface element that provides users ## Default Dropdown -The Default Dropdown represents some list items as a dropdown items with `` components and the `` is a wrapper button where user can click to show the dropdown items. `dismissOnClick={true}` props means when the user select a dropdown item dropdown will be closed. +The Default Dropdown represents a list of items as dropdown items with `` components. -## Dropdown With Search Bar - -The Dropdown with Search Bar component features a search bar that allows users to filter and select from a list of fruit options. - - - - - ## Dropdown With Icon -The Dropdown with Both Side Icon component combines dropdown items with icons on both sides of the label. - - - - - -## Dropdown With Icon And SearchBar - -The Dropdown with Both Side Icon component combines dropdown items with search bar `` component. +The Dropdown with Icon component allows you to include icons within dropdown items. - - + + -## Dropdown With Title Description +## Customize Dropdown -The dropdown with title description component represents the title and description in every dropdown items. +Customize the dropdown according to your preferences. - - + + ## API Reference diff --git a/app/docs/components/dropdown/DropdownApi.ts b/app/docs/components/dropdown/DropdownApi.ts index 204ab73a..152df6b0 100644 --- a/app/docs/components/dropdown/DropdownApi.ts +++ b/app/docs/components/dropdown/DropdownApi.ts @@ -21,31 +21,30 @@ export const dropdownAPIData = [ }, { id: 2, - propsName: 'trigger', - propsType: ['hover', 'click'], - propsDescription: 'Specifies the trigger behavior for the dropdown.', - default: 'click', + propsName: 'showArrow', + propsType: 'boolean', + propsDescription: 'Enables or disables the floating arrow within the dropdown.', + default: 'false', }, { id: 3, - propsName: 'label', + propsName: 'className', propsType: 'string', - propsDescription: 'The content to display within the dropdown.', - default: 'Dropdown Button', + propsDescription: 'Custom class for styling the dropdown', + default: '', }, - { id: 4, - propsName: 'floatingArrow', - propsType: 'boolean', - propsDescription: 'Enables or disables the floating arrow within the dropdown.', - default: 'false', + propsName: 'actionClassName', + propsType: 'string', + propsDescription: 'action button Custom class for styling', + default: '', }, { id: 5, - propsName: 'arrowIcon', - propsType: 'boolean', - propsDescription: 'Enables or disables the arrow icon.', - default: 'true', + propsName: 'action', + propsType: 'ReactNode', + propsDescription: 'Dropdown clickable item', + default: 'Dot Icon', }, ] diff --git a/app/docs/components/dropdown/variant/CustomDropdown.tsx b/app/docs/components/dropdown/variant/CustomDropdown.tsx new file mode 100644 index 00000000..c0537947 --- /dev/null +++ b/app/docs/components/dropdown/variant/CustomDropdown.tsx @@ -0,0 +1,90 @@ +'use client' +import { Avatar, Button, Dropdown, Typography } from '../../../../src' + +const dropdownData = [ + { + id: 1, + img: '/images/avatar/avatar-3.png', + name: 'Khairul Islam Ridoy', + title: 'UI/UX Designer', + }, + { + id: 2, + img: '/images/avatar/avatar-1.png', + name: 'Zakir Hossain', + title: 'Web Designer', + }, + { + id: 3, + img: '/images/avatar/avatar-2.png', + name: 'Atique Hasan', + title: 'CEO of StaticMania', + }, + { + id: 4, + img: '/images/avatar/avatar-4.png', + name: 'Kausar Ahamed Pial', + title: 'CTO of StaticMania', + }, + { + id: 5, + img: '/images/avatar/avatar-5.png', + name: 'Md Ariful Islam', + title: 'Web Developer', + }, +] + +const CustomDropdown = () => { + return ( + Dropdown} actionClassName="border-none"> + + {dropdownData.map((data) => ( + +
+ +
+
+ + {data.name} + + + {data.title} + +
+ + ))} + + + ) +} + +const CustomDropdownCode = ` +'use client' +import { Avatar, Dropdown, Typography, Button } from 'keep-react' + +export const DropdownComponent = () => { + return ( + Dropdown} actionClassName="border-none"> + + {dropdownData.map((data) => ( + +
+ +
+
+ + {data.name} + + + {data.title} + +
+ + ))} + + + ) +} +` + +export { CustomDropdown, CustomDropdownCode } diff --git a/app/docs/components/dropdown/variant/DefaultDropdown.tsx b/app/docs/components/dropdown/variant/DefaultDropdown.tsx index f3542a6b..c9912d89 100644 --- a/app/docs/components/dropdown/variant/DefaultDropdown.tsx +++ b/app/docs/components/dropdown/variant/DefaultDropdown.tsx @@ -1,35 +1,44 @@ 'use client' -import { Dropdown } from '../../../../src' +import { Divider, Dropdown } from '../../../../src' const DefaultDropdown = () => { return ( - - Dashboard - Settings - Earnings - Sign out + + + Contacts + Phone + Statistics + + Rename + Duplicate + + Account + Logout + ) } const DefaultDropdownCode = ` -"use client"; -import { Dropdown } from "keep-react"; +'use client' +import { Divider, Dropdown } from 'keep-react' export const DropdownComponent = () => { return ( - - Dashboard - Settings - Earnings - Sign out + + + Contacts + Phone + Statistics + + Rename + Duplicate + + Account + Logout + - ); + ) } ` diff --git a/app/docs/components/dropdown/variant/DropdownSearchBar.tsx b/app/docs/components/dropdown/variant/DropdownSearchBar.tsx deleted file mode 100644 index d407ca30..00000000 --- a/app/docs/components/dropdown/variant/DropdownSearchBar.tsx +++ /dev/null @@ -1,89 +0,0 @@ -'use client' -import { CaretRight } from 'phosphor-react' -import { Dropdown, TextInput } from '../../../../src' - -const DropdownSearchBar = () => { - return ( - -
- -
- - Dashboard - - - - - - Settings - - - - - - Earnings - - - - - - Sign out - - - - - - ) -} - -const DropdownSearchBarCode = ` -"use client"; -import { CaretRight } from "phosphor-react"; -import { Dropdown,TextInput } from "keep-react"; - -export const DropdownComponent = () => { - return ( - -
- -
- - Dashboard - - - - - - Settings - - - - - - Earnings - - - - - - Sign out - - - - - - ); -} -` - -export { DropdownSearchBar, DropdownSearchBarCode } diff --git a/app/docs/components/dropdown/variant/DropdownWithBothSideIcon.tsx b/app/docs/components/dropdown/variant/DropdownWithBothSideIcon.tsx deleted file mode 100644 index 5800a282..00000000 --- a/app/docs/components/dropdown/variant/DropdownWithBothSideIcon.tsx +++ /dev/null @@ -1,78 +0,0 @@ -'use client' -import { Dropdown } from '../../../../src' -import { CaretRight, Gear, Money, SignOut, SquaresFour } from 'phosphor-react' - -const DropdownWithBothSideIcon = () => { - return ( - - }> - Dashboard - - - - - }> - Settings - - - - - }> - Earnings - - - - - }> - Sign out - - - - - - ) -} - -const DropdownWithBothSideIconCode = ` -"use client"; -import { Dropdown } from "keep-react"; -import { CaretRight, Gear, Money, SignOut, SquaresFour } from "phosphor-react"; - -export const DropdownComponent = () => { - return ( - - }> - Dashboard - - - - - }> - Settings - - - - - }> - Earnings - - - - - }> - Sign out - - - - - - ); -} -` - -export { DropdownWithBothSideIcon, DropdownWithBothSideIconCode } diff --git a/app/docs/components/dropdown/variant/DropdownWithIcon.tsx b/app/docs/components/dropdown/variant/DropdownWithIcon.tsx new file mode 100644 index 00000000..7324379a --- /dev/null +++ b/app/docs/components/dropdown/variant/DropdownWithIcon.tsx @@ -0,0 +1,89 @@ +'use client' +import { ChartPieSlice, Copy, Pen, Phone, SignOut, UserCircle, Users } from 'phosphor-react' +import { Divider, Dropdown } from '../../../../src' + +const DropdownWithIcon = () => { + return ( + + + + + Contacts + + + + Phone + + + + Statistics + + + + + Rename + + + + Duplicate + + + + + Account + + + + Logout + + + + ) +} + +const DropdownWithIconCode = ` +'use client' +import { ChartPieSlice, Copy, Pen, Phone, SignOut, UserCircle, Users } from 'phosphor-react' +import { Divider, Dropdown } from 'keep-react' + +export const DropdownComponent = () => { + return ( + + + + + Contacts + + + + Phone + + + + Statistics + + + + + Rename + + + + Duplicate + + + + + Account + + + + Logout + + + + ) +} +` + +export { DropdownWithIcon, DropdownWithIconCode } diff --git a/app/docs/components/dropdown/variant/DropdownWithIconAndSearchBar.tsx b/app/docs/components/dropdown/variant/DropdownWithIconAndSearchBar.tsx deleted file mode 100644 index 5956c316..00000000 --- a/app/docs/components/dropdown/variant/DropdownWithIconAndSearchBar.tsx +++ /dev/null @@ -1,76 +0,0 @@ -'use client' -import { Dropdown, TextInput } from '../../../../src' -import { CaretRight, Gear, Money, SignOut, SquaresFour } from 'phosphor-react' - -const DropdownWithIconAndSearchBar = () => { - return ( - -
- -
- }> - Dashboard - - - - - }> - Settings - - - - - }> - Earnings - - - - - }>Sign out - - ) -} - -const DropdownWithIconAndSearchBarCode = ` -"use client"; -import { Dropdown,TextInput } from "keep-react"; -import { CaretRight, Gear, Money, SignOut, SquaresFour } from "phosphor-react"; - -export const DropdownComponent = () => { - return ( - -
- -
- }> - Dashboard - - - - - }> - Settings - - - - - }> - Earnings - - - - - }> - Sign out - - - ); -} -` - -export { DropdownWithIconAndSearchBar, DropdownWithIconAndSearchBarCode } diff --git a/app/docs/components/dropdown/variant/DropdownWithTitleDescription.tsx b/app/docs/components/dropdown/variant/DropdownWithTitleDescription.tsx deleted file mode 100644 index b378c86a..00000000 --- a/app/docs/components/dropdown/variant/DropdownWithTitleDescription.tsx +++ /dev/null @@ -1,101 +0,0 @@ -'use client' -import { Dropdown } from '../../../../src' - -const DropdownWithTitleDescription = () => { - return ( - - -
-

Dropdown Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. -

-
- - -
-

Dropdown Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. -

-
- - -
-

Dropdown Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. -

-
- - -
-

Dropdown Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. -

-
- - - ) -} - -const DropdownWithTitleDescriptionCode = ` -"use client"; -import { CaretRight } from "phosphor-react"; -import { Dropdown,TextInput } from "keep-react"; - -export const DropdownComponent = () => { - return ( - - -
-

- Dropdown Title -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. -

-
- - -
-

- Dropdown Title -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. -

-
- - -
-

- Dropdown Title -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. -

-
- - -
-

- Dropdown Title -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. -

-
- - - ); -} -` - -export { DropdownWithTitleDescription, DropdownWithTitleDescriptionCode } diff --git a/app/docs/components/empty/Empty.mdx b/app/docs/components/empty/Empty.mdx index 81151ea6..02ec71cd 100644 --- a/app/docs/components/empty/Empty.mdx +++ b/app/docs/components/empty/Empty.mdx @@ -6,9 +6,9 @@ import { NoDataFound, NoDataFoundCode } from './variant/NoDataFound' import { redirectButtonApi } from './EmptyApi' import { PageNotAvailable, PageNotAvailableCode } from './variant/PageNotAvailable' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' + +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents diff --git a/app/docs/components/empty/variant/DefaultEmpty.tsx b/app/docs/components/empty/variant/DefaultEmpty.tsx index 7177fefe..c06df7b9 100644 --- a/app/docs/components/empty/variant/DefaultEmpty.tsx +++ b/app/docs/components/empty/variant/DefaultEmpty.tsx @@ -1,6 +1,6 @@ 'use client' import Image from 'next/image' -import { Empty } from '../../../../src' +import { Button, Empty } from '../../../../src' const DefaultEmpty = () => { return ( @@ -17,7 +17,7 @@ const DefaultEmpty = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ) } @@ -42,7 +42,7 @@ export const EmptyComponent = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ) } diff --git a/app/docs/components/empty/variant/EmptyFolder.tsx b/app/docs/components/empty/variant/EmptyFolder.tsx index 97946f1e..970e7e5c 100644 --- a/app/docs/components/empty/variant/EmptyFolder.tsx +++ b/app/docs/components/empty/variant/EmptyFolder.tsx @@ -1,6 +1,6 @@ 'use client' import Image from 'next/image' -import { Empty } from '../../../../src' +import { Button, Empty } from '../../../../src' const EmptyFolder = () => { return ( @@ -17,7 +17,7 @@ const EmptyFolder = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ) } @@ -42,7 +42,7 @@ export const EmptyComponent = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ) } diff --git a/app/docs/components/empty/variant/NoDataFound.tsx b/app/docs/components/empty/variant/NoDataFound.tsx index 4bf65a30..00713012 100644 --- a/app/docs/components/empty/variant/NoDataFound.tsx +++ b/app/docs/components/empty/variant/NoDataFound.tsx @@ -1,6 +1,6 @@ 'use client' import Image from 'next/image' -import { Empty } from '../../../../src' +import { Button, Empty } from '../../../../src' const NoDataFound = () => { return ( @@ -17,7 +17,7 @@ const NoDataFound = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ) } @@ -42,7 +42,7 @@ export const EmptyComponent = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ) } diff --git a/app/docs/components/empty/variant/NoResultPage.tsx b/app/docs/components/empty/variant/NoResultPage.tsx index add6bce2..8fdcc455 100644 --- a/app/docs/components/empty/variant/NoResultPage.tsx +++ b/app/docs/components/empty/variant/NoResultPage.tsx @@ -1,6 +1,6 @@ 'use client' import Image from 'next/image' -import { Empty } from '../../../../src' +import { Button, Empty } from '../../../../src' const NoResultPage = () => { return ( @@ -17,7 +17,7 @@ const NoResultPage = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ) } @@ -42,7 +42,7 @@ export const EmptyComponent = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ) } diff --git a/app/docs/components/empty/variant/NotFoundPage.tsx b/app/docs/components/empty/variant/NotFoundPage.tsx index fda781b6..c0e227f5 100644 --- a/app/docs/components/empty/variant/NotFoundPage.tsx +++ b/app/docs/components/empty/variant/NotFoundPage.tsx @@ -1,6 +1,6 @@ 'use client' import Image from 'next/image' -import { Empty } from '../../../../src' +import { Button, Empty } from '../../../../src' const NotFoundPage = () => { return ( @@ -17,7 +17,7 @@ const NotFoundPage = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ) } @@ -42,7 +42,7 @@ export const EmptyComponent = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ) } diff --git a/app/docs/components/empty/variant/PageNotAvailable.tsx b/app/docs/components/empty/variant/PageNotAvailable.tsx index 3e3708a2..0805c815 100644 --- a/app/docs/components/empty/variant/PageNotAvailable.tsx +++ b/app/docs/components/empty/variant/PageNotAvailable.tsx @@ -1,6 +1,6 @@ 'use client' import Image from 'next/image' -import { Empty } from '../../../../src' +import { Button, Empty } from '../../../../src' const PageNotAvailable = () => { return ( @@ -17,7 +17,7 @@ const PageNotAvailable = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ) } @@ -42,7 +42,7 @@ export const EmptyComponent = () => { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ) } diff --git a/app/docs/components/input/Input.mdx b/app/docs/components/input/Input.mdx new file mode 100644 index 00000000..5c9a199c --- /dev/null +++ b/app/docs/components/input/Input.mdx @@ -0,0 +1,52 @@ +import { DefaultInput, DefaultInputCode } from './variant/DefaultInput' +import { LabelInput, LabelInputCode } from './variant/LabelInput' +import { InputWithIcon, InputWithIconCode } from './variant/InputWithIcon' +import { DisabledInput, DisabledInputCode } from './variant/DisabledInput' +import { InputUseCaseCode, InputUseCases } from './variant/InputUseCases' + +import CodePreview from '../../../components/CodePreview' +import ComponentApi from '../../../components/ComponentApi' + +## Table of Contents + +The Input Component is a fundamental user interface element used to collect user input or data in various forms, such as text, numbers, dates, or selections. It provides a space where users can type or select information, allowing them to interact with the application and provide necessary inputs. + +## Default Input + +Show a basic input field. + + + + + +## Input With Label + +Input field with a corresponding label. + + + + + +## Input With Icon + +Input field with an accompanying icon. + + + + + +## Disabled Input + +Disabled input field example. + + + + + +## Use Case of Input + +An example demonstrating the usage of input fields. + + + + diff --git a/app/docs/components/input/InputApi.ts b/app/docs/components/input/InputApi.ts new file mode 100644 index 00000000..e69de29b diff --git a/app/docs/components/input/index.tsx b/app/docs/components/input/index.tsx new file mode 100644 index 00000000..c3e378f8 --- /dev/null +++ b/app/docs/components/input/index.tsx @@ -0,0 +1,7 @@ +'use client' +import type { FC } from 'react' +import InputDocsContent from './Input.mdx' + +const InputDocs: FC = () => + +export default InputDocs diff --git a/app/docs/components/textInput/page.tsx b/app/docs/components/input/page.tsx similarity index 88% rename from app/docs/components/textInput/page.tsx rename to app/docs/components/input/page.tsx index 6692fd62..777ce487 100644 --- a/app/docs/components/textInput/page.tsx +++ b/app/docs/components/input/page.tsx @@ -1,17 +1,17 @@ import type { Metadata, NextPage } from 'next' +import InputDocs from '.' import { DocsContentLayout } from '../../../components/DocsContentLayout' -import TextInputDocs from '.' export const metadata: Metadata = { description: 'Input Component is a fundamental user interface element used to collect user input or data in various forms, such as text, numbers, dates, or selections. It provides a space where users can type or select information, allowing them to interact with the application and provide necessary inputs.', - title: 'Text Input - Keep React', + title: 'Input - Keep React', } const page: NextPage = () => { return ( - + ) } diff --git a/app/docs/components/input/variant/DefaultInput.tsx b/app/docs/components/input/variant/DefaultInput.tsx new file mode 100644 index 00000000..b547df26 --- /dev/null +++ b/app/docs/components/input/variant/DefaultInput.tsx @@ -0,0 +1,21 @@ +'use client' +import { Input } from '../../../../src' + +const DefaultInput = () => { + return ( +
+ +
+ ) +} + +const DefaultInputCode = ` +'use client' +import { Input } from 'keep-react' + +export const InputComponent = () => { + return +} +` + +export { DefaultInput, DefaultInputCode } diff --git a/app/docs/components/input/variant/DisabledInput.tsx b/app/docs/components/input/variant/DisabledInput.tsx new file mode 100644 index 00000000..f9e07c7c --- /dev/null +++ b/app/docs/components/input/variant/DisabledInput.tsx @@ -0,0 +1,21 @@ +'use client' +import { Input } from '../../../../src' + +const DisabledInput = () => { + return ( +
+ +
+ ) +} + +const DisabledInputCode = ` +'use client' +import { Input } from 'keep-react' + +export const InputComponent = () => { + return +} +` + +export { DisabledInput, DisabledInputCode } diff --git a/app/docs/components/input/variant/InputUseCases.tsx b/app/docs/components/input/variant/InputUseCases.tsx new file mode 100644 index 00000000..4234b7a7 --- /dev/null +++ b/app/docs/components/input/variant/InputUseCases.tsx @@ -0,0 +1,67 @@ +'use client' +import { Envelope, Lock } from 'phosphor-react' +import { Button, Icon, Input, Label } from '../../../../src' + +const InputUseCases = () => { + return ( +
+
+ +
+ + + + +
+
+
+ +
+ + + + +
+
+ + + ) +} + +const InputUseCaseCode = ` +'use client' +import { Envelope, Lock } from 'phosphor-react' +import { Button, Icon, Input, Label } from 'keep-react' + +export const InputComponent = () => { + return ( +
+
+ +
+ + + + +
+
+
+ +
+ + + + +
+
+ + + ) +} +` + +export { InputUseCaseCode, InputUseCases } diff --git a/app/docs/components/input/variant/InputWithIcon.tsx b/app/docs/components/input/variant/InputWithIcon.tsx new file mode 100644 index 00000000..c5d1faa2 --- /dev/null +++ b/app/docs/components/input/variant/InputWithIcon.tsx @@ -0,0 +1,35 @@ +'use client' +import { Envelope } from 'phosphor-react' +import { Icon, Input } from '../../../../src' + +const InputWithIcon = () => { + return ( +
+
+ + + + +
+
+ ) +} + +const InputWithIconCode = ` +'use client' +import { Envelope } from 'phosphor-react' +import { Icon, Input } from 'keep-react' + +const InputWithIcon = () => { + return ( +
+ + + + +
+ ) +} +` + +export { InputWithIcon, InputWithIconCode } diff --git a/app/docs/components/input/variant/LabelInput.tsx b/app/docs/components/input/variant/LabelInput.tsx new file mode 100644 index 00000000..a38fefc6 --- /dev/null +++ b/app/docs/components/input/variant/LabelInput.tsx @@ -0,0 +1,27 @@ +'use client' +import { Input, Label } from '../../../../src' + +const LabelInput = () => { + return ( +
+ + +
+ ) +} + +const LabelInputCode = ` +'use client' +import { Input, Label } from 'keep-react' + +const LabelInput = () => { + return ( +
+ + +
+ ) +} +` + +export { LabelInput, LabelInputCode } diff --git a/app/docs/components/modal/modal.mdx b/app/docs/components/modal/modal.mdx index cc6bf120..e3858b76 100644 --- a/app/docs/components/modal/modal.mdx +++ b/app/docs/components/modal/modal.mdx @@ -1,13 +1,9 @@ import { DefaultModal, DefaultModalCode } from './variant/DefaultModal' -import { HistoryModal, HistoryModalCode } from './variant/HistoryModal' -import { ModalPosition, ModalPositionCode } from './variant/ModalPosition' -import { SizesOfModal, SizesOfModalCode } from './variant/SizesOfModal' -import { ConfirmationModal, ConfirmationModalCode } from './variant/ConfirmationModal' +import { ModalWithCheckbox, ModalWithCheckboxCode } from './variant/ModalWithCheckbox' +import { CustomizeModal, CustomizeModalCode } from './variant/CustomizeModal' import { modalApiData } from './modalApi' - -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents @@ -21,37 +17,20 @@ Modal components typically appear as a small window or dialog box that appears o -## Confirmation Modal - -Modal help to maintain context and prevent users from navigating away or performing other actions while the modal is active. Modals can be closed by clicking an overlay area outside the modal, pressing an "X" or "Close" button, or completing a specific action within the modal content. - - - - - -## History Modal - -A "History Modal" seems to be a component or feature that captures and displays a user's historical interactions or actions within a web application. This type of modal could serve as a summary or log of a user's past activities, possibly including login details and other information saved on the browser. - - - - - -## All The Position of Modal +## Modal With Checkbox -These positioning options ensure that the modal is displayed in a way that best suits your layout and user experience. The available positions for the modal are: `bottom-left`, `bottom-right`, `bottom-center`, `top-left`, `top-center`, `top-right`, `center-left`, `center`, and `center-right`. You can select the appropriate position to align the modal with your design intentions and provide a comfortable viewing experience for your users. +You can use any other component inside our modal component. We just use the checkbox component. - - + + -## All The Size of Modal +## Customizable Modal -These sizes offer flexibility when designing your modals, ensuring they align with your overall design while maintaining consistency across different parts of your application. Here is all available sizes for the modal: -`sm` `md` `lg` `xl` `2xl` `3xl` `4xl` `5xl` `6xl ` and `7xl` +You can customize our modal as your desire except the modal functionality. - - + + ## API Reference diff --git a/app/docs/components/modal/modalApi.ts b/app/docs/components/modal/modalApi.ts index 057cd2a9..fa38f92c 100644 --- a/app/docs/components/modal/modalApi.ts +++ b/app/docs/components/modal/modalApi.ts @@ -1,38 +1,16 @@ export const modalApiData = [ { id: 1, - propsName: 'onClose', - propsType: 'function', - propsDescription: 'Function to be called when the modal is closed.', - default: '()=>void', - }, - - { - id: 3, - propsName: 'show', + propsName: 'isOpen', propsType: 'boolean', - propsDescription: 'Controls the visibility of the modal.', + propsDescription: 'Modal is open or not?', default: 'false', }, { - id: 4, - propsName: 'icon', - propsType: 'ReactNode', - default: 'ReactNode', - propsDescription: 'Optional icon to be displayed within the modal.', - }, - { - id: 5, - propsName: 'size', - propsType: ['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'], - default: 'sm', - propsDescription: 'Defines the size of the modal.', - }, - { - id: 6, - propsName: 'position', - propsType: ['bottom', 'top', 'left', 'right', 'center'], - propsDescription: 'Determines the position of the modal on the screen.', - default: 'center', + id: 2, + propsName: 'onClose', + propsType: 'function', + propsDescription: 'Function to be called when the modal is closed.', + default: '()=>void', }, ] diff --git a/app/docs/components/modal/variant/ConfirmationModal.tsx b/app/docs/components/modal/variant/ConfirmationModal.tsx deleted file mode 100644 index 530667fd..00000000 --- a/app/docs/components/modal/variant/ConfirmationModal.tsx +++ /dev/null @@ -1,145 +0,0 @@ -'use client' -import { useState } from 'react' -import { Button, Modal } from '../../../../src' -import { CloudArrowUp, Trash } from 'phosphor-react' - -const ConfirmationModal = () => { - const [showInfoModal, setShowInfoModal] = useState(false) - const [showErrorModalX, setShowErrorModalX] = useState(false) - - const onClickInfoModal = () => { - setShowInfoModal(!showInfoModal) - } - const onClickErrorModal = () => { - setShowErrorModalX(!showErrorModalX) - } - return ( -
- - - - -
-
- -
-

- Do you want to upload this file? -

-
- - -
- - -
- - - } size="md" show={showErrorModalX} onClose={onClickErrorModal}> - Do you want to delete this file? - -
-

- Contrary to popular belief, Lorem Ipsum is not simply random text. -

-
- - - - - - -
- ) -} - -const ConfirmationModalCode = ` -"use client"; -import { useState } from "react"; -import { Button,Modal } from "keep-react"; -import { CloudArrowUp, Trash } from "phosphor-react"; - -export const ModalComponent = () => { - const [showInfoModal, setShowInfoModal] = useState(false); - const [showErrorModalX, setShowErrorModalX] = useState(false); - - const onClickInfoModal = () => { - setShowInfoModal(!showInfoModal); - }; - const onClickErrorModal = () => { - setShowErrorModalX(!showErrorModalX); - }; - return ( - <> - - - - -
-
- -
-

- Do you want to upload this file? -

-
- - -
- - -
- - - } - size="md" - show={showErrorModalX} - onClose={onClickErrorModal} - > - Do you want to delete this file? - -
-

- Contrary to popular belief, Lorem Ipsum is not simply random text. -

-
- - - - - - - - ); -}; -` - -export { ConfirmationModal, ConfirmationModalCode } diff --git a/app/docs/components/modal/variant/CustomizeModal.tsx b/app/docs/components/modal/variant/CustomizeModal.tsx new file mode 100644 index 00000000..5ab34b03 --- /dev/null +++ b/app/docs/components/modal/variant/CustomizeModal.tsx @@ -0,0 +1,85 @@ +'use client' +import { Check } from 'phosphor-react' +import { useState } from 'react' +import { Button, Modal, Typography } from '../../../../src' + +const CustomizeModal = () => { + const [isOpen, setIsOpen] = useState(false) + const openModal = () => { + setIsOpen(true) + } + const closeModal = () => { + setIsOpen(false) + } + + return ( + <> + + + + + + + + + Payment Successful + + + Your document has unsaved changes. Discard or save them as a new page to continue. + + + + + + + + + ) +} + +const CustomizeModalCode = ` +'use client' +import { useState } from 'react' +import { Check } from 'phosphor-react' +import { Button, Modal, Typography } from 'keep-react' + +export const ModalComponent = () => { + const [isOpen, setIsOpen] = useState(false) + const openModal = () => { + setIsOpen(true) + } + const closeModal = () => { + setIsOpen(false) + } + + return ( + <> + + + + + + + + + Payment Successful + + + Your document has unsaved changes. Discard or save them as a new page to continue. + + + + + + + + + ) +} +` + +export { CustomizeModal, CustomizeModalCode } diff --git a/app/docs/components/modal/variant/DefaultModal.tsx b/app/docs/components/modal/variant/DefaultModal.tsx index b861b4c9..bfe6f17b 100644 --- a/app/docs/components/modal/variant/DefaultModal.tsx +++ b/app/docs/components/modal/variant/DefaultModal.tsx @@ -1,136 +1,94 @@ 'use client' -import { useState } from 'react' import { CloudArrowUp } from 'phosphor-react' -import { Button, Modal } from '../../../../src' +import { useState } from 'react' +import { Button, Modal, Typography } from '../../../../src' const DefaultModal = () => { - const [showModal, setShowModal] = useState(false) - const [showModalX, setShowModalX] = useState(false) - - const onClickOne = () => { - setShowModal(!showModal) + const [isOpen, setIsOpen] = useState(false) + const openModal = () => { + setIsOpen(true) } - const onClickTwo = () => { - setShowModalX(!showModalX) + const closeModal = () => { + setIsOpen(false) } return ( -
- - - } size="md" show={showModal} position="center"> - Do you want to upload this file? - -
-

- Contrary to popular belief, Lorem Ipsum is not simply random text. -

-
- - - - - - - } size="md" show={showModalX} onClose={onClickTwo}> - Do you want to upload this file? - -
-

- Contrary to popular belief, Lorem Ipsum is not simply random text. -

-
+ <> + + + + + + + + + + Update Modal Status + + + Your document has unsaved changes. Discard or save them as a new page to continue. + + + + + + + - - - - -
+ ) } const DefaultModalCode = ` -"use client"; -import { useState } from "react"; -import { Modal,Button } from "keep-react"; -import { CloudArrowUp } from "phosphor-react"; +'use client' +import { useState } from 'react' +import { CloudArrowUp } from 'phosphor-react' +import { Button, Modal, Typography } from 'keep-react' export const ModalComponent = () => { - const [showModal, setShowModal] = useState(false); - const [showModalX, setShowModalX] = useState(false); - - const onClickOne = () => { - setShowModal(!showModal); - }; - const onClickTwo = () => { - setShowModalX(!showModalX); - }; + const [isOpen, setIsOpen] = useState(false) + const openModal = () => { + setIsOpen(true) + } + const closeModal = () => { + setIsOpen(false) + } return ( <> - - - } - size="md" - show={showModal} - position="center" - > - Do you want to upload this file? - -
-

- Contrary to popular belief, Lorem Ipsum is not simply random text. -

-
- - - - - - - } - size="md" - show={showModalX} - onClose={onClickTwo} - > - Do you want to upload this file? - -
-

- Contrary to popular belief, Lorem Ipsum is not simply random text. -

-
+ + + + + + + + + + Update Modal Status + + + Your document has unsaved changes. Discard or save them as a new page to continue. + + + + + + + - - - - - ); + ) } ` diff --git a/app/docs/components/modal/variant/HistoryModal.tsx b/app/docs/components/modal/variant/HistoryModal.tsx deleted file mode 100644 index af757344..00000000 --- a/app/docs/components/modal/variant/HistoryModal.tsx +++ /dev/null @@ -1,205 +0,0 @@ -'use client' -import { useState } from 'react' -import { Avatar, Modal, Button, CheckBox } from '../../../../src' -import { CloudArrowUp, UserPlus } from 'phosphor-react' - -const HistoryModal = () => { - const [showHistoryModal, setShowHistoryModal] = useState(false) - const [showAccessModal, setShowAccessModal] = useState(false) - - const onClickHistoryModal = () => { - setShowHistoryModal(!showHistoryModal) - } - const onClickAccessModal = () => { - setShowAccessModal(!showAccessModal) - } - - return ( -
- - - } size="md" show={showHistoryModal}> - Do you want to upload this file? - -
-

- Contrary to popular belief, Lorem Ipsum is not simply random text. -

-
-
- - -
- - - - - - - } size="lg" show={showAccessModal}> - Someone request edit access - -
-

- Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classica. -

-
- -
-

Albert Flores

-

keep@designsystem.com

-
-
-
-
- - -
- - - - - - -
- ) -} - -const HistoryModalCode = ` -"use client"; -import { useState } from "react"; -import { Avatar,Button,Modal } from "keep-react"; -import { CloudArrowUp, UserPlus } from "phosphor-react"; - -export const ModalComponent = () => { - const [showHistoryModal, setShowHistoryModal] = useState(false); - const [showAccessModal, setShowAccessModal] = useState(false); - - const onClickHistoryModal = () => { - setShowHistoryModal(!showHistoryModal); - }; - const onClickAccessModal = () => { - setShowAccessModal(!showAccessModal); - }; - - const handleChecked = (value) => { - //value - }; - - return ( - <> - - - } - size="md" - show={showHistoryModal} - > - Do you want to upload this file? - -
-

- Contrary to popular belief, Lorem Ipsum is not simply random text. -

-
-
- - -
- - - - - - - } - size="lg" - show={showAccessModal} - > - Someone request edit access - -
-

- Contrary to popular belief, Lorem Ipsum is not simply random text. - It has roots in a piece of classica. -

-
- -
-

- Albert Flores -

-

keep@designsystem.com

-
-
-
-
- - -
- - - - - - - - ); -} -` - -export { HistoryModal, HistoryModalCode } diff --git a/app/docs/components/modal/variant/ModalPosition.tsx b/app/docs/components/modal/variant/ModalPosition.tsx deleted file mode 100644 index f2663b12..00000000 --- a/app/docs/components/modal/variant/ModalPosition.tsx +++ /dev/null @@ -1,80 +0,0 @@ -'use client' -import { useState } from 'react' -import { Button, Modal } from '../../../../src' -import { CloudArrowUp } from 'phosphor-react' - -const ModalPosition = () => { - const [showModal, setShowModal] = useState(false) - const onClick = () => { - setShowModal(!showModal) - } - return ( -
- - } size="md" show={showModal} position="top-center"> - Do you want to upload this file? - -
-

- Contrary to popular belief, Lorem Ipsum is not simply random text. -

-
- - - - - - -
- ) -} - -const ModalPositionCode = ` -"use client"; -import { useState } from "react"; -import { Button,Modal } from "keep-react"; -import { CloudArrowUp } from "phosphor-react"; - -export const ModalComponent = () => { - const [showModal, setShowModal] = useState(false); - const onClick = () => { - setShowModal(!showModal); - }; - return ( - <> - - } - size="md" - show={showModal} - position="top-center" - > - Do you want to upload this file? - -
-

- Contrary to popular belief, Lorem Ipsum is not simply random text. -

-
- - - - - - - - ); -} -` - -export { ModalPosition, ModalPositionCode } diff --git a/app/docs/components/modal/variant/ModalWithCheckbox.tsx b/app/docs/components/modal/variant/ModalWithCheckbox.tsx new file mode 100644 index 00000000..688773e0 --- /dev/null +++ b/app/docs/components/modal/variant/ModalWithCheckbox.tsx @@ -0,0 +1,107 @@ +'use client' +import { Info } from 'phosphor-react' +import { useState } from 'react' +import { Button, Checkbox, Label, Modal, Typography } from '../../../../src' + +const ModalWithCheckbox = () => { + const [isOpen, setIsOpen] = useState(false) + const openModal = () => { + setIsOpen(true) + } + const closeModal = () => { + setIsOpen(false) + } + + return ( + <> + + + + + + + + + + Update Modal Status + + + Your document has unsaved changes. Discard or save them as a new page to continue. + + + + + + + + + + + + + + + ) +} + +const ModalWithCheckboxCode = ` +'use client' +import { useState } from 'react' +import { Info } from 'phosphor-react' +import { Button, Checkbox, Label, Modal, Typography } from 'keep-react' + +export const ModalComponent = () => { + const [isOpen, setIsOpen] = useState(false) + const openModal = () => { + setIsOpen(true) + } + const closeModal = () => { + setIsOpen(false) + } + + return ( + <> + + + + + + + + + + Update Modal Status + + + Your document has unsaved changes. Discard or save them as a new page to continue. + + + + + + + + + + + + + + + ) +} +` + +export { ModalWithCheckbox, ModalWithCheckboxCode } diff --git a/app/docs/components/modal/variant/SizesOfModal.tsx b/app/docs/components/modal/variant/SizesOfModal.tsx deleted file mode 100644 index c5cce101..00000000 --- a/app/docs/components/modal/variant/SizesOfModal.tsx +++ /dev/null @@ -1,80 +0,0 @@ -'use client' -import { useState } from 'react' -import { Button, Modal } from '../../../../src' -import { CloudArrowUp } from 'phosphor-react' - -const SizesOfModal = () => { - const [showModal, setShowModal] = useState(false) - const onClick = () => { - setShowModal(!showModal) - } - return ( -
- - } size="xl" show={showModal} position="center"> - Do you want to upload this file? - -
-

- Contrary to popular belief, Lorem Ipsum is not simply random text. -

-
- - - - - - -
- ) -} - -const SizesOfModalCode = ` -"use client"; -import { useState } from "react"; -import { Button,Modal } from "keep-react"; -import { CloudArrowUp } from "phosphor-react"; - -export const ModalComponent = () => { - const [showModal, setShowModal] = useState(false); - const onClick = () => { - setShowModal(!showModal); - }; - return ( - <> - - } - size="md" - show={showModal} - position="top-center" - > - Do you want to upload this file? - -
-

- Contrary to popular belief, Lorem Ipsum is not simply random text. -

-
- - - - - - - - ); -} -` - -export { SizesOfModal, SizesOfModalCode } diff --git a/app/docs/components/navbar/Navbar.mdx b/app/docs/components/navbar/Navbar.mdx index b179652f..a59b10b1 100644 --- a/app/docs/components/navbar/Navbar.mdx +++ b/app/docs/components/navbar/Navbar.mdx @@ -7,9 +7,9 @@ import { EcommerceNavbar, EcommerceNavbarCode } from './variant/EcommerceNavbar' import { NavbarApiData, NavLinksAPIData } from './NavbarApi' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' + +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents diff --git a/app/docs/components/navbar/variant/DefaultNavbar.tsx b/app/docs/components/navbar/variant/DefaultNavbar.tsx index 0ffbe647..c8b31f48 100644 --- a/app/docs/components/navbar/variant/DefaultNavbar.tsx +++ b/app/docs/components/navbar/variant/DefaultNavbar.tsx @@ -29,15 +29,13 @@ const DefaultNavbar = () => { - - + @@ -85,13 +83,13 @@ export const NavbarComponent = () => { - - diff --git a/app/docs/components/navbar/variant/EcommerceNavbar.tsx b/app/docs/components/navbar/variant/EcommerceNavbar.tsx index 3b984681..8416bc6e 100644 --- a/app/docs/components/navbar/variant/EcommerceNavbar.tsx +++ b/app/docs/components/navbar/variant/EcommerceNavbar.tsx @@ -32,7 +32,7 @@ const EcommerceNavbar = () => { } iconAnimation={false} /> - - + + - Can we store cookies? - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - - - - +
@@ -40,35 +37,34 @@ import { useState } from 'react' import { Button, Notification } from 'keep-react' export const NotificationComponent = () => { - const [showNotification, setShowNotification] = useState(true) + const [isOpen, setIsOpen] = useState(false) + const control = () => setIsOpen(!isOpen) - const onDismiss = () => { - setShowNotification(!showNotification) - } return ( -
- - +
+ + - Can we store cookies? - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - - - - +
) } + ` export { DefaultNotification, DefaultNotificationCode } diff --git a/app/docs/components/notification/variant/NotificationPosition.tsx b/app/docs/components/notification/variant/NotificationPosition.tsx new file mode 100644 index 00000000..28cea601 --- /dev/null +++ b/app/docs/components/notification/variant/NotificationPosition.tsx @@ -0,0 +1,101 @@ +'use client' +import { useState } from 'react' +import { Avatar, Button, Notification } from '../../../../src' + +const NotificationPosition = () => { + const [isOpen, setIsOpen] = useState(false) + const [position, setPosition] = useState<'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'>('bottom-right') + const openController = () => setIsOpen(!isOpen) + + return ( +
+ + + + + + + + + +
+
+ +
+
+

+ Khairul Islam Ridoy comment on your recent posts +

+

5 min ago

+
+
+ + + +
+ ) +} + +const NotificationPositionCode = ` +'use client' +import { useState } from 'react' +import { Avatar, Button, Notification } from 'keep-react' + +export const NotificationComponent = () => { + const [isOpen, setIsOpen] = useState(false) + const control = () => setIsOpen(!isOpen) + + return ( +
+ + + + +
+
+ +
+
+

+ Khairul Islam Ridoy comment on your recent posts +

+

5 min ago

+
+
+ + + +
+ ) +} +` + +export { NotificationPosition, NotificationPositionCode } diff --git a/app/docs/components/notification/variant/NotificationWithAvatar.tsx b/app/docs/components/notification/variant/NotificationWithAvatar.tsx deleted file mode 100644 index ba67b202..00000000 --- a/app/docs/components/notification/variant/NotificationWithAvatar.tsx +++ /dev/null @@ -1,83 +0,0 @@ -'use client' -import { useState } from 'react' -import { Notification, Button, Avatar } from '../../../../src' - -const NotificationWithAvatar = () => { - const [showNotification, setShowNotification] = useState(true) - const onDismiss = () => { - setShowNotification(!showNotification) - } - - return ( -
- - - - - - - - Kausar Ahmed Pial - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - - - - - - - -
- ) -} - -const NotificationWithAvatarCode = ` -'use client' -import { useState } from 'react' -import { Notification, Button, Avatar } from 'keep-react' - -export const NotificationComponent = () => { - const [showNotification, setShowNotification] = useState(true) - const onDismiss = () => { - setShowNotification(!showNotification) - } - - return ( -
- - - - - - - - Kausar Ahmed Pial - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - - - - - - - -
- ) -} -` - -export { NotificationWithAvatar, NotificationWithAvatarCode } diff --git a/app/docs/components/notification/variant/NotificationWithCard.tsx b/app/docs/components/notification/variant/NotificationWithCard.tsx index a14c169f..968e1354 100644 --- a/app/docs/components/notification/variant/NotificationWithCard.tsx +++ b/app/docs/components/notification/variant/NotificationWithCard.tsx @@ -1,121 +1,34 @@ 'use client' import Image from 'next/image' -import { DownloadSimple, FigmaLogo } from 'phosphor-react' import { useState } from 'react' import { Button, Notification } from '../../../../src' const NotificationWithCard = () => { - const [notificationOne, setNotificationOne] = useState(true) - const [notificationTwo, setNotificationTwo] = useState(true) - const [notificationThree, setNotificationThree] = useState(true) + const [isOpen, setIsOpen] = useState(false) + const control = () => setIsOpen(!isOpen) - const onDismissOne = () => { - setNotificationOne(!notificationOne) - setNotificationTwo(true) - setNotificationThree(true) - } - const onDismissTwo = () => { - setNotificationTwo(!notificationTwo) - setNotificationOne(true) - setNotificationThree(true) - } - const onDismissThree = () => { - setNotificationTwo(true) - setNotificationOne(true) - setNotificationThree(!notificationThree) - } return (
- - - - - - - - - - - Keep React is awesome - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - - + + + + + + + Can we store cookies? + + Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. + + + + - - - - - - - - - - Keep React is awesome - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - - - - - - - - - Can we store cookies? - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - - - - - - - +
@@ -127,120 +40,40 @@ const NotificationWithCardCode = ` import Image from 'next/image' import { useState } from 'react' import { Button, Notification } from 'keep-react' -import { DownloadSimple, FigmaLogo } from 'phosphor-react' + export const NotificationComponent = () => { - const [notificationOne, setNotificationOne] = useState(true) - const [notificationTwo, setNotificationTwo] = useState(true) - const [notificationThree, setNotificationThree] = useState(true) + const [isOpen, setIsOpen] = useState(false) + const control = () => setIsOpen(!isOpen) - const onDismissOne = () => { - setNotificationOne(!notificationOne) - } - const onDismissTwo = () => { - setNotificationTwo(!notificationTwo) - } - const onDismissThree = () => { - setNotificationThree(!notificationThree) - } return ( -
- - - - - - - - - - - - Keep React is awesome - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - - + + + + + + + Can we store cookies? + + Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. + + + + - - - - - - - - - - Keep React is awesome - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - - - - - - - - - Can we store cookies? - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - - - - - - - +
) } + ` export { NotificationWithCard, NotificationWithCardCode } diff --git a/app/docs/components/notification/variant/NotificationWithIcon.tsx b/app/docs/components/notification/variant/NotificationWithIcon.tsx deleted file mode 100644 index 858adc65..00000000 --- a/app/docs/components/notification/variant/NotificationWithIcon.tsx +++ /dev/null @@ -1,85 +0,0 @@ -'use client' -import { useState } from 'react' -import { Cookie } from 'phosphor-react' -import { Notification, Button } from '../../../../src' - -const NotificationWithIcon = () => { - const [showNotification, setShowNotification] = useState(true) - const onDismiss = () => { - setShowNotification(!showNotification) - } - - return ( -
- - - - - - - - Can we store cookies? - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - - - - - - - -
- ) -} - -const NotificationWithIconCode = ` -'use client' -import { useState } from 'react' -import { Cookie } from 'phosphor-react' -import { Notification, Button } from 'keep-react' - -export const NotificationComponent = () => { - const [showNotification, setShowNotification] = useState(true) - const onDismiss = () => { - setShowNotification(!showNotification) - } - - return ( -
- - - - - - - - Can we store cookies? - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - - - - - - - -
- ) -} -` - -export { NotificationWithIcon, NotificationWithIconCode } diff --git a/app/docs/components/numberInput/NumberInput.mdx b/app/docs/components/numberInput/NumberInput.mdx index 5d545017..dfbecaf1 100644 --- a/app/docs/components/numberInput/NumberInput.mdx +++ b/app/docs/components/numberInput/NumberInput.mdx @@ -1,40 +1,33 @@ import { DefaultNumberInput, DefaultNumberInputCode } from './variant/DefaultNumberInput' -import { SizesOfNumberInput, SizesOfNumberInputCode } from './variant/SizesOfNumberInput' -import { DisabledNumberInput, DisabledNumberInputCode } from './variant/DisabledNumberInput' +import { NumberInputWithLabel, NumberInputWithLabelCode } from './variant/NumberInputWithLabel' +import { NumberInputWithState, NumberInputWithStateCode } from './variant/NumberInputWithState' import { numberInputApiData } from './NumberInputApi' - -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' ## Table of Contents -Number Input Component is a user interface element designed for collecting numeric input from users. It provides a field where users can enter numerical values, such as integers or decimals, using keyboard input or arrow buttons. +The Number Input Component is a user interface element designed for collecting numeric input from users. It provides a field where users can enter numerical values, such as integers or decimals, using keyboard input or arrow buttons. ## Default Number Input -Default Number Input a simple numeric input field with two buttons for incrementing and decrementing the value. +Default Number Input is a simple numeric input field with two buttons for incrementing and decrementing the value. - + -## Sizes Of Number Input +## Number Input With Label -The NumberInput component in the Keep React offers three available sizes: `"sm"` `"md"` and `"lg"`. +You can show a label and helper text to assist the user. - - + + -## Disabled Number Input - - - - +## Number Input With State -## API Reference +You can manage the input state with React state. -Explore the available props for the number input component - - + + + diff --git a/app/docs/components/numberInput/NumberInputApi.ts b/app/docs/components/numberInput/NumberInputApi.ts index 398b902f..1f4016d5 100644 --- a/app/docs/components/numberInput/NumberInputApi.ts +++ b/app/docs/components/numberInput/NumberInputApi.ts @@ -1,51 +1 @@ -export const numberInputApiData = [ - { - id: 1, - propsName: 'value', - propsType: 'number', - propsDescription: 'The current value of the NumberInput.', - default: '100', - }, - { - id: 2, - propsName: 'sizing', - propsType: ['sm', 'md', 'lg'], - propsDescription: 'Size of the NumberInput component.', - default: 'md', - }, - { - id: 3, - propsName: 'disabled', - propsType: 'boolean', - propsDescription: 'Indicates whether the NumberInput is disabled.', - default: 'false', - }, - { - id: 4, - propsName: 'helperText', - propsType: 'ReactNode', - propsDescription: 'Additional helper text to assist the user.', - default: 'null', - }, - { - id: 5, - propsName: 'icon', - propsType: 'ReactNode', - propsDescription: 'An optional icon to display within the NumberInput component.', - default: 'None', - }, - { - id: 6, - propsName: 'iconPosition', - propsType: ['right', 'left'], - propsDescription: 'Position of the icon within the NumberInput.', - default: 'None', - }, - { - id: 7, - propsName: 'setValue', - propsType: 'Function', - propsDescription: 'Function to update the value of the NumberInput.', - default: 'Function', - }, -] +export const numberInputApiData = [] diff --git a/app/docs/components/numberInput/variant/DefaultNumberInput.tsx b/app/docs/components/numberInput/variant/DefaultNumberInput.tsx index 62ef9f85..dba47a25 100644 --- a/app/docs/components/numberInput/variant/DefaultNumberInput.tsx +++ b/app/docs/components/numberInput/variant/DefaultNumberInput.tsx @@ -1,21 +1,40 @@ 'use client' -import { useState } from 'react' +import { Minus, Plus } from 'phosphor-react' import { NumberInput } from '../../../../src' const DefaultNumberInput = () => { - const [value, setValue] = useState(100) - return + return ( + + + + + + + + + + ) } const DefaultNumberInputCode = ` -"use client"; -import { useState } from "react"; -import { NumberInput } from "keep-react"; +'use client' +import { Minus, Plus } from 'phosphor-react' +import { NumberInput } from 'keep-react' export const NumberInputComponent = () => { - const [value, setValue] = useState(100); - return + return ( + + + + + + + + + + ) } + ` export { DefaultNumberInput, DefaultNumberInputCode } diff --git a/app/docs/components/numberInput/variant/DisabledNumberInput.tsx b/app/docs/components/numberInput/variant/DisabledNumberInput.tsx deleted file mode 100644 index 676c70d3..00000000 --- a/app/docs/components/numberInput/variant/DisabledNumberInput.tsx +++ /dev/null @@ -1,28 +0,0 @@ -'use client' -import { useState } from 'react' -import { NumberInput } from '../../../../src' - -const DisabledNumberInput = () => { - const [value, setValue] = useState(100) - return -} - -const DisabledNumberInputCode = ` -"use client"; -import { useState } from "react"; -import { NumberInput } from "keep-react"; - -export const NumberInputComponent = () => { - const [value, setValue] = useState(100); - return ( - - ); -} -` - -export { DisabledNumberInput, DisabledNumberInputCode } diff --git a/app/docs/components/numberInput/variant/NumberInputWithLabel.tsx b/app/docs/components/numberInput/variant/NumberInputWithLabel.tsx new file mode 100644 index 00000000..1846e5ce --- /dev/null +++ b/app/docs/components/numberInput/variant/NumberInputWithLabel.tsx @@ -0,0 +1,47 @@ +'use client' +import { Minus, Plus } from 'phosphor-react' +import { Label, NumberInput } from '../../../../src' + +const NumberInputWithLabel = () => { + return ( +
+ + + + + + + + + + +

Number Must be between 1 to 100

+
+ ) +} + +const NumberInputWithLabelCode = ` +'use client' +import { Minus, Plus } from 'phosphor-react' +import { Label, NumberInput } from 'keep-react' + +export const NumberInputComponent = () => { + return ( +
+ + + + + + + + + + +

Number Must be between 1 to 100

+
+ ) +} +` + +export { NumberInputWithLabel, NumberInputWithLabelCode } diff --git a/app/docs/components/numberInput/variant/NumberInputWithState.tsx b/app/docs/components/numberInput/variant/NumberInputWithState.tsx new file mode 100644 index 00000000..f2b1fe5f --- /dev/null +++ b/app/docs/components/numberInput/variant/NumberInputWithState.tsx @@ -0,0 +1,51 @@ +'use client' +import { Minus, Plus } from 'phosphor-react' +import { useState } from 'react' +import { Label, NumberInput } from '../../../../src' + +const NumberInputWithState = () => { + const [number, setNumber] = useState(0) + return ( +
+ + + setNumber((prev) => prev - 1)}> + + + setNumber(+e.target.value)} /> + setNumber((prev) => prev + 1)}> + + + +

Number Must be between 1 to 100

+
+ ) +} + +const NumberInputWithStateCode = ` +'use client' +import { useState } from 'react' +import { Minus, Plus } from 'phosphor-react' +import { Label, NumberInput } from 'keep-react' + +export const NumberInputComponent = () => { + const [number, setNumber] = useState(0) + return ( +
+ + + setNumber((prev) => prev - 1)}> + + + setNumber(+e.target.value)} /> + setNumber((prev) => prev + 1)}> + + + +

Number Must be between 1 to 100

+
+ ) +} +` + +export { NumberInputWithState, NumberInputWithStateCode } diff --git a/app/docs/components/numberInput/variant/SizesOfNumberInput.tsx b/app/docs/components/numberInput/variant/SizesOfNumberInput.tsx deleted file mode 100644 index 86930fce..00000000 --- a/app/docs/components/numberInput/variant/SizesOfNumberInput.tsx +++ /dev/null @@ -1,33 +0,0 @@ -'use client' -import { useState } from 'react' -import { NumberInput } from '../../../../src' - -const SizesOfNumberInput = () => { - const [value, setValue] = useState(100) - return ( -
- - - -
- ) -} - -const SizesOfNumberInputCode = ` -"use client"; -import { useState } from "react"; -import { NumberInput } from "keep-react"; - -export const NumberInputComponent = () => { - const [value, setValue] = useState(100); - return ( - <> - - - - - ); -} -` - -export { SizesOfNumberInput, SizesOfNumberInputCode } diff --git a/app/docs/components/pagination/Pagination.mdx b/app/docs/components/pagination/Pagination.mdx index f0982704..1ebe8541 100644 --- a/app/docs/components/pagination/Pagination.mdx +++ b/app/docs/components/pagination/Pagination.mdx @@ -1,52 +1,70 @@ import { DefaultPagination, DefaultPaginationCode } from './variant/DefaultPagination' -import { PaginationWithBorder, PaginationWithBorderCode } from './variant/PaginationWithBorder' -import { PaginationWithInputPage, PaginationWithInputPageCode } from './variant/PaginationWithInputPage' - -import { PaginationWithRoundedPage, PaginationWithRoundedPageCode } from './variant/PaginationWithRoundedPage' -import { paginationApiData } from './PaginationApi' - -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import { PaginationInput, PaginationInputCode } from './variant/PaginationInput' +import { PaginationShape, PaginationShapeCode } from './variant/PaginationShape' +import { PaginationNavigator, PaginationNavigatorCode } from './variant/PaginationNavigator' +import { PaginationNavigatorText, PaginationNavigatorTextCode } from './variant/PaginationNavigatorText' +import { itemApiData, navigatorApiData, paginationApiData } from './PaginationApi' +import CodePreview from '../../../components/CodePreview' +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents -The Pagination component provides a user-friendly way to navigate through large sets of content by breaking it down into manageable pages. It enhances user experience by allowing easy access to various sections of data or results, such as articles, search results, or product listings, through page numbers or next/previous controls. +The Pagination component enhances user experience by providing a user-friendly way to navigate through large sets of content. Whether it's articles, search results, or product listings, Pagination breaks down the data into manageable pages, allowing users to easily access different sections. ## Default Pagination -There are two variants of next/previous buttons. You can change the variant with `prevNextShape` props, and available variants are: `"roundSquare"` and `"circle"`. Use the `iconWithOutText` prop to show only the icon in the button. +The Default Pagination component displays a basic pagination list, allowing users to navigate between pages. -## Pagination With Border +## Pagination Shape + +You can customize the shape of pagination items using the `shape` prop. Available shapes include `'rounded'` and `'circle'`. By default, pagination items have a `'rounded'` shape. + + + + + +## Navigator With Icon -Add borders to the pagination elements for a clear visual separation. To enable borders in the pagination elements, use the `paginateWithBorder={true}` prop. +Enhance the navigational controls with icons to make them more visually appealing and intuitive. - - + + -## Pagination With Rounded Page +## Navigator With Text -This style uses rounded page numbers, providing a soft and friendly appearance. To achieve this circle active button, set the `activeCurrentPageShape="circle"` prop. +Alternatively, you can use text-based navigational controls for a simpler approach. - - + + -## Pagination With Input Page +## Pagination With Input -Allow users to input the page number they want to navigate to, enhancing the user experience. To enable this feature, use the `showGoToPaginate={true}` prop. +Allow users to switch to a specific page by entering the page number in an input field. - - + + -## API Reference +## Pagination API -Explore the available props for the Pagination component: +Here are the available props for the `` component: + +## Pagination Item API + +Explore the props available for the `` component: + + + +## Navigator API + +Discover the available props for the `` component: + + diff --git a/app/docs/components/pagination/PaginationApi.ts b/app/docs/components/pagination/PaginationApi.ts index 9a557f33..4ca11969 100644 --- a/app/docs/components/pagination/PaginationApi.ts +++ b/app/docs/components/pagination/PaginationApi.ts @@ -1,93 +1,73 @@ -export const paginationApiData = [ +const paginationApiData = [ { id: 1, - propsName: 'currentPage', - propsType: 'number', - propsDescription: 'Current page number.', - default: '1', + propsName: 'children', + propsType: 'ReactNode', + propsDescription: 'Pagination content', + default: 'JSX', }, { id: 2, - propsName: 'prevNextShape', - propsType: ['circle', 'round', 'roundSquare', 'none'], - propsDescription: 'Shape of the previous and next buttons.', + propsName: 'className', + propsType: 'string', + propsDescription: 'ClassName for style elements', default: 'none', }, { id: 3, - propsName: 'goToShape', - propsType: ['circle', 'round', 'roundSquare', 'none'], - propsDescription: 'Shape of the go-to page input field.', - default: 'none', - }, - { - id: 4, - propsName: 'activeCurrentPageShape', - propsType: ['circle', 'roundSquare'], - propsDescription: 'Shape of the active/current page number.', - default: '"roundSquare"', - }, - { - id: 6, - propsName: 'onPageChange', - propsType: 'function', - propsDescription: 'Function to be called when a page is changed.', - default: 'function', - }, - { - id: 7, - propsName: 'iconWithText', - propsType: 'boolean', - propsDescription: 'Whether to display icons with text.', - default: 'false', + propsName: 'shape', + propsType: ['rounded', 'circle'], + propsDescription: 'Shape of the pagination element', + default: 'rounded', }, +] + +const itemApiData = [ { - id: 8, - propsName: 'iconWithOutText', - propsType: 'boolean', - propsDescription: 'Whether to display icons without text.', - default: 'false', + id: 1, + propsName: 'children', + propsType: 'ReactNode', + propsDescription: 'Pagination Item content', + default: 'Page', }, { - id: 9, - propsName: 'paginateWithBorder', - propsType: 'boolean', - propsDescription: 'Whether to add borders to pagination elements.', - default: 'false', + id: 2, + propsName: 'className', + propsType: 'string', + propsDescription: 'ClassName for style elements', + default: 'none', }, { - id: 10, - propsName: 'showGoToPaginate', + id: 3, + propsName: 'active', propsType: 'boolean', - propsDescription: 'Whether to show the go-to page input field.', + propsDescription: 'Page is active or not', default: 'false', }, +] + +const navigatorApiData = [ { - id: 11, - propsName: 'totalPages', - propsType: 'number', - propsDescription: 'Total number of pages.', - default: '30', - }, - { - id: 12, - propsName: 'nextBtnStyle', - propsType: 'string', - propsDescription: 'Custom class to style the next button.', - default: 'None', + id: 1, + propsName: 'children', + propsType: 'ReactNode', + propsDescription: 'Navigator content', + default: 'Icon', }, { - id: 13, - propsName: 'previousBtnStyle', + id: 2, + propsName: 'className', propsType: 'string', - propsDescription: 'Custom class to style the previous button.', - default: 'None', + propsDescription: 'ClassName for style elements', + default: 'none', }, { - id: 14, - propsName: 'pageStyle', - propsType: 'string', - propsDescription: 'Custom class to style the page button.', - default: 'None', + id: 3, + propsName: 'shape', + propsType: ['rounded', 'circle'], + propsDescription: 'Shape of the pagination navigator', + default: 'rounded', }, ] + +export { itemApiData, navigatorApiData, paginationApiData } diff --git a/app/docs/components/pagination/page.tsx b/app/docs/components/pagination/page.tsx index 67cb2a66..1ace1726 100644 --- a/app/docs/components/pagination/page.tsx +++ b/app/docs/components/pagination/page.tsx @@ -1,10 +1,10 @@ import type { Metadata, NextPage } from 'next' -import { DocsContentLayout } from '../../../components/DocsContentLayout' import PaginationDocs from '.' +import { DocsContentLayout } from '../../../components/DocsContentLayout' export const metadata: Metadata = { description: - 'The Pagination component provides a user-friendly way to navigate through large sets of content by breaking it down into manageable pages. It enhances user experience by allowing easy access to various sections of data or results, such as articles, search results, or product listings, through page numbers or next/previous controls.', + 'The Pagination component enhances user experience by providing a user-friendly way to navigate through large sets of content. Whether its articles, search results, or product listings, Pagination breaks down the data into manageable pages, allowing users to easily access different sections.', title: 'Pagination - Keep React', } diff --git a/app/docs/components/pagination/variant/DefaultPagination.tsx b/app/docs/components/pagination/variant/DefaultPagination.tsx index c4a8b43f..d6ef75fe 100644 --- a/app/docs/components/pagination/variant/DefaultPagination.tsx +++ b/app/docs/components/pagination/variant/DefaultPagination.tsx @@ -1,36 +1,44 @@ 'use client' -import { useState } from 'react' +import { DotsThree } from 'phosphor-react' import { Pagination } from '../../../../src' const DefaultPagination = () => { - const [currentPage, setCurrentPage] = useState(1) return ( - + + + 1 + 2 + 3 + 4 + + + + 10 + + ) } const DefaultPaginationCode = ` -"use client"; -import { Pagination } from "keep-react"; -import { useState } from "react"; +'use client' +import { DotsThree } from 'phosphor-react' +import { Pagination } from 'keep-react' export const PaginationComponent = () => { - const [currentPage, setCurrentPage] = useState(1); return ( - setCurrentPage(val)} - totalPages={30} - iconWithOutText - prevNextShape="roundSquare" - /> - ); + + + 1 + 2 + 3 + 4 + + + + 10 + + + ) } ` diff --git a/app/docs/components/pagination/variant/PaginationInput.tsx b/app/docs/components/pagination/variant/PaginationInput.tsx new file mode 100644 index 00000000..9129fd39 --- /dev/null +++ b/app/docs/components/pagination/variant/PaginationInput.tsx @@ -0,0 +1,74 @@ +'use client' +import { CaretLeft, CaretRight, DotsThree } from 'phosphor-react' +import { Pagination, Typography } from '../../../../src' + +const PaginationInput = () => { + return ( + + + + + + 1 + 2 + 3 + 4 + + + + 10 + + + + + + / Go to + + of 200 + + + ) +} + +const PaginationInputCode = ` +'use client' +import { Pagination, Typography } from 'keep-react' +import { CaretLeft, CaretRight, DotsThree } from 'phosphor-react' + +export const PaginationComponent = () => { + return ( + + + + + + 1 + 2 + 3 + 4 + + + + 10 + + + + + + / Go to + + of 200 + + + ) +} +` +export { PaginationInput, PaginationInputCode } diff --git a/app/docs/components/pagination/variant/PaginationNavigator.tsx b/app/docs/components/pagination/variant/PaginationNavigator.tsx new file mode 100644 index 00000000..3f3d1c3a --- /dev/null +++ b/app/docs/components/pagination/variant/PaginationNavigator.tsx @@ -0,0 +1,57 @@ +'use client' +import { CaretLeft, CaretRight, DotsThree } from 'phosphor-react' +import { Pagination } from '../../../../src' + +const PaginationNavigator = () => { + return ( + + + + + + 1 + 2 + 3 + 4 + + + + 10 + + + + + + ) +} + +const PaginationNavigatorCode = ` +'use client' +import { Pagination } from 'keep-react' +import { CaretLeft, CaretRight, DotsThree } from 'phosphor-react' + +export const PaginationComponent = () => { + return ( + + + + + + 1 + 2 + 3 + 4 + + + + 10 + + + + + + ) +} +` + +export { PaginationNavigator, PaginationNavigatorCode } diff --git a/app/docs/components/pagination/variant/PaginationNavigatorText.tsx b/app/docs/components/pagination/variant/PaginationNavigatorText.tsx new file mode 100644 index 00000000..879b2624 --- /dev/null +++ b/app/docs/components/pagination/variant/PaginationNavigatorText.tsx @@ -0,0 +1,61 @@ +'use client' +import { CaretLeft, CaretRight, DotsThree } from 'phosphor-react' +import { Pagination } from '../../../../src' + +const PaginationNavigatorText = () => { + return ( + + + + Previous + + + 1 + 2 + 3 + 4 + + + + 10 + + + Next + + + + ) +} + +const PaginationNavigatorTextCode = ` +'use client' +import { Pagination } from 'keep-react' +import { CaretLeft, CaretRight, DotsThree } from 'phosphor-react' + +export const PaginationComponent = () => { + return ( + + + + Previous + + + 1 + 2 + 3 + 4 + + + + 10 + + + Next + + + + ) +} +` + +export { PaginationNavigatorText, PaginationNavigatorTextCode } diff --git a/app/docs/components/pagination/variant/PaginationShape.tsx b/app/docs/components/pagination/variant/PaginationShape.tsx new file mode 100644 index 00000000..c589b7a8 --- /dev/null +++ b/app/docs/components/pagination/variant/PaginationShape.tsx @@ -0,0 +1,45 @@ +'use client' +import { DotsThree } from 'phosphor-react' +import { Pagination } from '../../../../src' + +const PaginationShape = () => { + return ( + + + 1 + 2 + 3 + 4 + + + + 10 + + + ) +} + +const PaginationShapeCode = ` +'use client' +import { DotsThree } from 'phosphor-react' +import { Pagination } from 'keep-react' + +export const PaginationComponent = () => { + return ( + + + 1 + 2 + 3 + 4 + + + + 10 + + + ) +} +` + +export { PaginationShape, PaginationShapeCode } diff --git a/app/docs/components/pagination/variant/PaginationWithBorder.tsx b/app/docs/components/pagination/variant/PaginationWithBorder.tsx deleted file mode 100644 index 8be86d7a..00000000 --- a/app/docs/components/pagination/variant/PaginationWithBorder.tsx +++ /dev/null @@ -1,39 +0,0 @@ -'use client' -import { useState } from 'react' -import { Pagination } from '../../../../src' - -const PaginationWithBorder = () => { - const [currentPage, setCurrentPage] = useState(1) - return ( - - ) -} - -const PaginationWithBorderCode = ` -"use client"; -import { useState } from "react"; -import { Pagination } from "keep-react"; - -export const PaginationComponent = () => { - const [currentPage, setCurrentPage] = useState(1); - return ( - - ); -} -` - -export { PaginationWithBorder, PaginationWithBorderCode } diff --git a/app/docs/components/pagination/variant/PaginationWithInputPage.tsx b/app/docs/components/pagination/variant/PaginationWithInputPage.tsx deleted file mode 100644 index 476062a2..00000000 --- a/app/docs/components/pagination/variant/PaginationWithInputPage.tsx +++ /dev/null @@ -1,38 +0,0 @@ -'use client' -import { useState } from 'react' -import { Pagination } from '../../../../src' - -const PaginationWithInputPage = () => { - const [currentPage, setCurrentPage] = useState(1) - return ( - - ) -} - -const PaginationWithInputPageCode = ` -"use client"; -import { Pagination } from "keep-react"; -import React, { useState } from "react"; - -export const PaginationComponent = () => { - const [currentPage, setCurrentPage] = useState(1); - return ( - - ); -} -` -export { PaginationWithInputPage, PaginationWithInputPageCode } diff --git a/app/docs/components/pagination/variant/PaginationWithRoundedPage.tsx b/app/docs/components/pagination/variant/PaginationWithRoundedPage.tsx deleted file mode 100644 index eab35124..00000000 --- a/app/docs/components/pagination/variant/PaginationWithRoundedPage.tsx +++ /dev/null @@ -1,39 +0,0 @@ -'use client' -import { useState } from 'react' -import { Pagination } from '../../../../src' - -const PaginationWithRoundedPage = () => { - const [currentPage, setCurrentPage] = useState(1) - return ( - - ) -} - -const PaginationWithRoundedPageCode = ` -"use client"; -import { useState } from "react"; -import { Pagination } from "keep-react"; - -export const PaginationComponent = () => { - const [currentPage, setCurrentPage] = useState(1); - return ( - - ); -} -` - -export { PaginationWithRoundedPage, PaginationWithRoundedPageCode } diff --git a/app/docs/components/playButton/index.tsx b/app/docs/components/playButton/index.tsx deleted file mode 100644 index 873aa494..00000000 --- a/app/docs/components/playButton/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -'use client' -import type { FC } from 'react' -import PlayButtonDocsContent from './playButton.mdx' - -const PlayButtonDocs: FC = () => - -export default PlayButtonDocs diff --git a/app/docs/components/playButton/page.tsx b/app/docs/components/playButton/page.tsx deleted file mode 100644 index ba01a432..00000000 --- a/app/docs/components/playButton/page.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { Metadata, NextPage } from 'next' -import { DocsContentLayout } from '../../../components/DocsContentLayout' -import PlayButtonDocs from '.' - -export const metadata: Metadata = { - description: - 'The Play Button - Rounded component in the Keep React allows you to incorporate a rounded play button into your user interface. It provides a visually appealing and intuitive way to indicate playback or media-related actions. With customizable options for type and size, you can create play buttons that align with your design style.', - title: 'Play Button - Keep React', -} - -const page: NextPage = () => { - return ( - - - - ) -} - -export default page diff --git a/app/docs/components/playButton/playButton.mdx b/app/docs/components/playButton/playButton.mdx deleted file mode 100644 index 4a93f6a6..00000000 --- a/app/docs/components/playButton/playButton.mdx +++ /dev/null @@ -1,69 +0,0 @@ -import { DefaultPlayButton, DefaultPlayButtonCode } from './variant/DefaultPlayButton' -import { SecondaryPlayButton, SecondaryPlayButtonCode } from './variant/SecondaryPlayButton' -import { NoBorderPlayButton, NoBorderPlayButtonCode } from './variant/NoBorderPlayButton' -import { CirclePlayButton, CirclePlayButtonCode } from './variant/CirclePlayButton' -import { SizesPlayButton, SizesPlayButtonCode } from './variant/SizesOfPlayButton' -import { BlurPlayButton, BlurPlayButtonCode } from './variant/BlurPlayButton' -import { playButtonApiData } from './playButtonApi' - -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" - -## Table of Contents - -The Play Button - Rounded component in the Keep React allows you to incorporate a rounded play button into your user interface. It provides a visually appealing and intuitive way to indicate playback or media-related actions. With customizable options for type and size, you can create play buttons that align with your design style. - -## Default Play Button - -The play button is an essential component of multimedia interfaces, providing a clear and intuitive way for users to start enjoying audiovisual content. - - - - - -## Secondary Play Button - -A "Secondary Play Button" is a variant of the standard play button that is used to initiate playback of multimedia content. The `type` property provides different styling options. For the secondary play button to match the design you need to add `type="outlineGray"` property. - - - - - -## No Border Play Button - -A "No Border Play Button" with the type set to "text" provides a variant of the play button that has no visible border. This style is typically used when you want a minimalistic and subtle play button appearance. - - - - - -## Circle Play Button - -A "Circle Play Button" is a style variation of the play button where the button itself is rendered in the shape of a circle. This circular design can draw attention to the play button and create a visually distinct element. When the `circle` prop is set to `true`, it indicates that the play button should be displayed as a circle. - - - - - -## Blur Play Button - -A "Blur Play Button" with the `type` set to `outlineGray` is a style variation that adds a blurred effect to the play button. This effect can create a sense of depth and motion, making the button appear as if it's slightly out of focus. - - - - - -## Sizes of Play Button - -The "Sizes of Play Button" feature allows you to adjust the dimensions of the play button according to various predefined size options. These sizes help you ensure that the play button's visual presence aligns with your design and provides a consistent user experience. - - - - - -## API Reference - -Explore the available props for the play button component - - diff --git a/app/docs/components/playButton/playButtonApi.ts b/app/docs/components/playButton/playButtonApi.ts deleted file mode 100644 index 23a35faa..00000000 --- a/app/docs/components/playButton/playButtonApi.ts +++ /dev/null @@ -1,51 +0,0 @@ -export const playButtonApiData = [ - { - id: 1, - propsName: 'title', - propsType: 'string', - propsDescription: 'A descriptive title or label for the play button.', - default: 'title', - }, - { - id: 2, - propsName: 'type', - propsType: ['primary', 'text', 'outlineGray', 'blur'], - propsDescription: 'The type of play button style.', - default: 'primary', - }, - { - id: 3, - propsName: 'icon', - propsType: 'ReactNode', - propsDescription: 'The icon element to be displayed within the play button.', - default: '', - }, - { - id: 4, - propsName: 'circle', - propsType: 'boolean', - propsDescription: 'If true, the play button will be displayed in a circular shape.', - default: 'false', - }, - { - id: 5, - propsName: 'size', - propsType: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'], - propsDescription: 'The size of the play button.', - default: 'md', - }, - { - id: 6, - propsName: 'className', - propsType: 'string', - propsDescription: 'Additional CSS classes to apply to the play button for custom styling.', - default: 'None', - }, - { - id: 7, - propsName: 'onClick', - propsType: 'Function', - propsDescription: 'On click event Handler', - default: 'None', - }, -] diff --git a/app/docs/components/playButton/variant/BlurPlayButton.tsx b/app/docs/components/playButton/variant/BlurPlayButton.tsx deleted file mode 100644 index fbab088c..00000000 --- a/app/docs/components/playButton/variant/BlurPlayButton.tsx +++ /dev/null @@ -1,39 +0,0 @@ -'use client' -import { Play } from 'phosphor-react' -import { PlayButton } from '../../../../src' - -const BlurPlayButton = () => { - return ( -
- } - className="bg-black/40 backdrop-blur-sm" - /> -
- ) -} - -const BlurPlayButtonCode = ` -"use client"; -import { PlayButton } from "keep-react"; -import { Play } from "phosphor-react"; - -export const PlayButtonComponent = () => { - return ( - } - className="bg-black/40 backdrop-blur-sm" - /> - ); -} -` - -export { BlurPlayButton, BlurPlayButtonCode } diff --git a/app/docs/components/playButton/variant/CirclePlayButton.tsx b/app/docs/components/playButton/variant/CirclePlayButton.tsx deleted file mode 100644 index cdc333ea..00000000 --- a/app/docs/components/playButton/variant/CirclePlayButton.tsx +++ /dev/null @@ -1,30 +0,0 @@ -'use client' -import { Play } from 'phosphor-react' -import { PlayButton } from '../../../../src' - -const CirclePlayButton = () => { - return ( -
- } /> -
- ) -} - -const CirclePlayButtonCode = ` -"use client"; -import { PlayButton } from "keep-react"; -import { Play } from "phosphor-react"; - -export const PlayButtonComponent = () => { - return ( - } - /> - ); -} -` - -export { CirclePlayButton, CirclePlayButtonCode } diff --git a/app/docs/components/playButton/variant/DefaultPlayButton.tsx b/app/docs/components/playButton/variant/DefaultPlayButton.tsx deleted file mode 100644 index d586142f..00000000 --- a/app/docs/components/playButton/variant/DefaultPlayButton.tsx +++ /dev/null @@ -1,25 +0,0 @@ -'use client' -import { Play } from 'phosphor-react' -import { PlayButton } from '../../../../src' - -const DefaultPlayButton = () => { - return ( -
- } /> -
- ) -} - -const DefaultPlayButtonCode = ` -"use client"; -import { Play } from "phosphor-react"; -import { PlayButton } from "keep-react"; - -export const PlayButtonComponent = () => { - return ( - } /> - ); -} -` - -export { DefaultPlayButton, DefaultPlayButtonCode } diff --git a/app/docs/components/playButton/variant/NoBorderPlayButton.tsx b/app/docs/components/playButton/variant/NoBorderPlayButton.tsx deleted file mode 100644 index 2fa8d87d..00000000 --- a/app/docs/components/playButton/variant/NoBorderPlayButton.tsx +++ /dev/null @@ -1,29 +0,0 @@ -'use client' -import { Play } from 'phosphor-react' -import { PlayButton } from '../../../../src' - -const NoBorderPlayButton = () => { - return ( -
- } /> -
- ) -} - -const NoBorderPlayButtonCode = ` -"use client"; -import { Play } from "phosphor-react"; -import { PlayButton } from "keep-react"; - -export const PlayButtonComponent = () => { - return ( - } - /> - ); -} -` - -export { NoBorderPlayButton, NoBorderPlayButtonCode } diff --git a/app/docs/components/playButton/variant/SecondaryPlayButton.tsx b/app/docs/components/playButton/variant/SecondaryPlayButton.tsx deleted file mode 100644 index 61422f35..00000000 --- a/app/docs/components/playButton/variant/SecondaryPlayButton.tsx +++ /dev/null @@ -1,29 +0,0 @@ -'use client' -import { Play } from 'phosphor-react' -import { PlayButton } from '../../../../src' - -const SecondaryPlayButton = () => { - return ( -
- } /> -
- ) -} - -const SecondaryPlayButtonCode = ` -"use client"; -import { Play } from "phosphor-react"; -import { PlayButton } from "keep-react"; - -export const PlayButtonComponent = () => { - return ( - } - /> - ); -} -` - -export { SecondaryPlayButton, SecondaryPlayButtonCode } diff --git a/app/docs/components/playButton/variant/SizesOfPlayButton.tsx b/app/docs/components/playButton/variant/SizesOfPlayButton.tsx deleted file mode 100644 index 594258bb..00000000 --- a/app/docs/components/playButton/variant/SizesOfPlayButton.tsx +++ /dev/null @@ -1,37 +0,0 @@ -'use client' -import { Play } from 'phosphor-react' -import { PlayButton } from '../../../../src' - -const SizesPlayButton = () => { - return ( -
- } /> - } /> - } /> - } /> - } /> - } /> -
- ) -} - -const SizesPlayButtonCode = ` -"use client"; -import { Play } from "phosphor-react"; -import { PlayButton } from "keep-react"; - -export const PlayButtonComponent = () => { - return ( -
- } /> - } /> - } /> - } /> - } /> - } /> -
- ); -} -` - -export { SizesPlayButton, SizesPlayButtonCode } diff --git a/app/docs/components/popover/popover.mdx b/app/docs/components/popover/popover.mdx index 6a45f8f8..4d006811 100644 --- a/app/docs/components/popover/popover.mdx +++ b/app/docs/components/popover/popover.mdx @@ -1,64 +1,44 @@ import { DefaultPopover, DefaultPopoverCode } from './variant/DefaultPopover' -import { TriggerVariantPopover, TriggerVariantPopoverCode } from './variant/TriggerVariant' -import { PopoverPosition, PopoverPositionCode } from './variant/PopoverPosition' -import { SingleLinePopover, SingleLinePopoverCode } from './variant/SingleLinePopover' -import { OneParagraphPopover, OneParagraphPopoverCode } from './variant/OneParagraphPopover' - +import { CardPopover, CardPopoverCode } from './variant/CardPopover' +import { IconPopover, IconPopoverCode } from './variant/IconPopover' import { popoverAPI } from './popoverApi' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents -Popover component is a user interface element that displays additional information or options when a user interacts with a specific trigger, such as hovering over text or clicking a button. +The Popover component serves as a user interface element that conveniently displays additional information or options when a user interacts with a specific trigger. This trigger could be hovering over text, clicking a button, or any other user action. ## Default Popover The Default Popover demonstrates a basic popover component. - + -## One Paragraph Popover - -The One Paragraph Popover showcases a popover with a single paragraph of text. - - - - - -## Single Line Popover - -The Single Line Popover displays a popover with content confined to a single line. - - - - - -## Trigger Variant Popover +## Card Popover -The Trigger Variant Popover exhibits different trigger interactions for the popover. There are two variants of trigger interactions such as `trigger='click'` and `trigger='hover'`. +The Card Popover showcases a popover with a card view, providing a visually appealing way to present additional information or options. - - + + -## Popover Position +## Icon Popover -The Popover Position component demonstrates various popover positions relative to the trigger element. There are lots of position for popover. Please see the `API Reference` sections to apply the position. +The Icon Popover displays a popover with an icon, offering a compact and visually engaging way to provide additional context or actions. - - + + ## API Reference -Explore the available props for the Popover component +Explore the available props for the Popover component: ## Reference -To learn more about the Floating-UI, please see the documentation of [Floating-UI](https://floating-ui.com/docs/react) +To learn more about the Floating-UI library and its capabilities, please refer to the comprehensive documentation provided on the [Floating-UI website](https://floating-ui.com/docs/react). diff --git a/app/docs/components/popover/popoverApi.ts b/app/docs/components/popover/popoverApi.ts index bcba0df8..7c85e468 100644 --- a/app/docs/components/popover/popoverApi.ts +++ b/app/docs/components/popover/popoverApi.ts @@ -1,56 +1,14 @@ export const popoverAPI = [ { id: 1, - propsName: 'trigger', - propsType: ['hover', 'click'], - propsDescription: 'Defines the interaction trigger for the popover.', - default: 'click', - }, - { - id: 2, - propsName: 'children', - propsType: ['ReactNode'], - propsDescription: 'Content that triggers the popover when interacted with.', - default: 'Button', - }, - { - id: 3, - propsName: 'additionalContent', - propsType: ['ReactNode'], - propsDescription: 'Additional content to be displayed within the popover.', - default: 'None', - }, - { - id: 4, - propsName: 'title', - propsType: ['string'], - propsDescription: 'Title or heading for the popover content.', - default: 'Popover Title', - }, - { - id: 5, - propsName: 'description', - propsType: ['string'], - propsDescription: 'Additional text description for the popover content.', - default: 'Description', - }, - { - id: 6, - propsName: 'icon', - propsType: ['ReactNode'], - propsDescription: 'Icon to be displayed within the popover.', - default: 'Xcricle', - }, - { - id: 7, propsName: 'className', propsType: ['string'], propsDescription: 'Custom CSS class for styling the popover.', default: 'None', }, { - id: 8, - propsName: 'position', + id: 2, + propsName: 'placement', propsType: [ 'top', 'top-end', @@ -66,6 +24,6 @@ export const popoverAPI = [ 'right-start', ], propsDescription: 'Defines the position of the popover relative to the trigger element.', - default: 'bottom-start', + default: 'top', }, ] diff --git a/app/docs/components/popover/variant/CardPopover.tsx b/app/docs/components/popover/variant/CardPopover.tsx new file mode 100644 index 00000000..cd8513a6 --- /dev/null +++ b/app/docs/components/popover/variant/CardPopover.tsx @@ -0,0 +1,156 @@ +'use client' +import Image from 'next/image' +import { CaretDown, CaretLeft, CaretRight, CaretUp } from 'phosphor-react' +import CardImg from '../../../../../public/images/card.jpg' +import { Button, Popover, Typography } from '../../../../src' + +const CardPopover = () => { + return ( +
+ + + + + + +
+ Popover title + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industrys standard dummy text ever since + + + Step - 1 / 5 + + + + + +
+ + + + + + + + +
+ Popover title + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industrys standard dummy text ever since + + + Step - 1 / 5 + + + + + +
+ + + + + + + + +
+ Popover title + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industrys standard dummy text ever since + + + Step - 1 / 5 + + + + + +
+ + + + + + + + +
+ Popover title + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industrys standard dummy text ever since + + + Step - 1 / 5 + + + + + +
+ + +
+ ) +} + +const CardPopoverCode = ` +'use client' +import Image from 'next/image' +import CardImg from '@/public/images/card.jpg' +import { Button, Popover, Typography } from 'keep-react' + +export const PopoverComponent = () => { + return ( + + + + + + +
+ Popover title + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industrys standard dummy text ever since + + + Step - 1 / 5 + + + + + +
+ + + ) +} +` + +export { CardPopover, CardPopoverCode } diff --git a/app/docs/components/popover/variant/DefaultPopover.tsx b/app/docs/components/popover/variant/DefaultPopover.tsx index 72c22637..f2e2d6d6 100644 --- a/app/docs/components/popover/variant/DefaultPopover.tsx +++ b/app/docs/components/popover/variant/DefaultPopover.tsx @@ -1,23 +1,69 @@ 'use client' -import { Button, Popover } from '../../../../src' +import { CaretDown, CaretLeft, CaretRight, CaretUp } from 'phosphor-react' +import { Avatar, Button, Popover } from '../../../../src' const DefaultPopover = () => { return ( -
- - Popover title here - - There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in - some form, by injected humour - - - + + + + + + + + +
+ Popover title + demo_email@email.com +
+ + + + + + + + + +
+ Popover title + demo_email@email.com +
+ - + + + - + + + +
+ Popover title + demo_email@email.com +
+ +
) @@ -25,24 +71,25 @@ const DefaultPopover = () => { const DefaultPopoverCode = ` 'use client' -import { Button, Popover } from 'keep-react' +import { Popover } from 'keep-react' +import { CaretRight } from 'phosphor-react' -export const PopoverComponent = () => { +export const PopoverComponent = () => { return ( - - Popover title here - - There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in - some form, by injected humour - - - - + - + + + +
+ Popover title + demo_email@email.com +
+ + ) } diff --git a/app/docs/components/popover/variant/IconPopover.tsx b/app/docs/components/popover/variant/IconPopover.tsx new file mode 100644 index 00000000..cc1af4f4 --- /dev/null +++ b/app/docs/components/popover/variant/IconPopover.tsx @@ -0,0 +1,162 @@ +'use client' +import { CaretDown, CaretLeft, CaretRight, CaretUp, Confetti } from 'phosphor-react' +import { Button, Popover, Typography } from '../../../../src' + +const IconPopover = () => { + return ( +
+ + + + + +
+ +
+
+ Popover title + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industrys standard dummy text ever since + +
+ + Step - 1 / 5 + + + + + + + + + + + + +
+ +
+
+ Popover title + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industrys standard dummy text ever since + +
+ + Step - 1 / 5 + + + + + + + + + + + + +
+ +
+
+ Popover title + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industrys standard dummy text ever since + +
+ + Step - 1 / 5 + + + + + + + + + + + + +
+ +
+
+ Popover title + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industrys standard dummy text ever since + +
+ + Step - 1 / 5 + + + + + + + +
+ ) +} + +const IconPopoverCode = ` +'use client' +import { CaretLeft } from 'phosphor-react' +import { Button, Popover, Typography } from 'keep-react' + +export const PopoverComponent = () => { + return ( + + + + + +
+ +
+
+ Popover title + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industrys standard dummy text ever since + +
+ + Step - 1 / 5 + + + + + + + + ) +}` + +export { IconPopover, IconPopoverCode } diff --git a/app/docs/components/popover/variant/OneParagraphPopover.tsx b/app/docs/components/popover/variant/OneParagraphPopover.tsx deleted file mode 100644 index c0a7b473..00000000 --- a/app/docs/components/popover/variant/OneParagraphPopover.tsx +++ /dev/null @@ -1,43 +0,0 @@ -'use client' -import { Button, Popover } from '../../../../src' - -const OneParagraphPopover = () => { - return ( -
- - There are many variations of passages of Lorem Ipsum available. - - - - - - - -
- ) -} - -const OneParagraphPopoverCode = ` -"use client"; -import { Button, Popover } from "keep-react"; - -export const PopoverComponent = () => { - return ( - - There are many variations of passages of Lorem Ipsum available. - - - - - - - - ) -} -` - -export { OneParagraphPopover, OneParagraphPopoverCode } diff --git a/app/docs/components/popover/variant/PopoverPosition.tsx b/app/docs/components/popover/variant/PopoverPosition.tsx deleted file mode 100644 index 65091092..00000000 --- a/app/docs/components/popover/variant/PopoverPosition.tsx +++ /dev/null @@ -1,51 +0,0 @@ -'use client' -import { Button, Popover } from '../../../../src' - -const PopoverPosition = () => { - return ( -
- - Popover title here - - There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in - some form, by injected humour - - - - - - - - -
- ) -} - -const PopoverPositionCode = ` -"use client"; -import { Button, Popover } from "keep-react"; - -export const PopoverComponent = () => { - return ( - - Popover title here - - There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in - some form, by injected humour - - - - - - - - - ) -} -` - -export { PopoverPosition, PopoverPositionCode } diff --git a/app/docs/components/popover/variant/SingleLinePopover.tsx b/app/docs/components/popover/variant/SingleLinePopover.tsx deleted file mode 100644 index c17fa01f..00000000 --- a/app/docs/components/popover/variant/SingleLinePopover.tsx +++ /dev/null @@ -1,32 +0,0 @@ -'use client' -import { Button, Popover } from '../../../../src' - -const SingleLinePopover = () => { - return ( -
- - Single line message - - - - -
- ) -} - -const SingleLinePopoverCode = ` -"use client"; -import { Button, Popover } from "keep-react"; - -export const PopoverComponent = () => { - return ( - - Single line message - - - - - ) -} -` -export { SingleLinePopover, SingleLinePopoverCode } diff --git a/app/docs/components/popover/variant/TriggerVariant.tsx b/app/docs/components/popover/variant/TriggerVariant.tsx deleted file mode 100644 index 9f385c4d..00000000 --- a/app/docs/components/popover/variant/TriggerVariant.tsx +++ /dev/null @@ -1,51 +0,0 @@ -'use client' -import { Button, Popover } from '../../../../src' - -const TriggerVariantPopover = () => { - return ( -
- - Popover title here - - There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in - some form, by injected humour - - - - - - - - -
- ) -} - -const TriggerVariantPopoverCode = ` -"use client"; -import { Button, Popover } from "keep-react"; - -export const PopoverComponent = () => { - return ( - - Popover title here - - There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in - some form, by injected humour - - - - - - - - - ) -} -` - -export { TriggerVariantPopover, TriggerVariantPopoverCode } diff --git a/app/docs/components/progress/page.tsx b/app/docs/components/progress/page.tsx index 33a1f692..9625afc1 100644 --- a/app/docs/components/progress/page.tsx +++ b/app/docs/components/progress/page.tsx @@ -1,11 +1,11 @@ import type { Metadata, NextPage } from 'next' -import { DocsContentLayout } from '../../../components/DocsContentLayout' import ProgressDocs from '.' +import { DocsContentLayout } from '../../../components/DocsContentLayout' export const metadata: Metadata = { description: 'The Progress Bar Component in the Keep React allows you to visually represent the progress or completion of a task or process.', - title: 'Progress Bar - Keep React', + title: 'Progress - Keep React', } const page: NextPage = () => { diff --git a/app/docs/components/progress/progress.mdx b/app/docs/components/progress/progress.mdx index ffcf1beb..25606b7f 100644 --- a/app/docs/components/progress/progress.mdx +++ b/app/docs/components/progress/progress.mdx @@ -1,15 +1,14 @@ +import { DefaultLineProgress, DefaultLineProgressCode } from './variant/DefaultLineProgress' import { DefaultProgress, DefaultProgressCode } from './variant/DefaultProgress' -import { VariantOfProgress, VariantOfProgressCode } from './variant/VariantOfProgress' import { SizesOfProgress, SizesOfProgressCode } from './variant/SizesOfProgress' -import { ColorsOfProgress, ColorsOfProgressCode } from './variant/ColorsOfProgress' -import { ProgressWithNumber, ProgressWithNumberCode } from './variant/ProgressWithNumber' -import { ProgressWithPopup, ProgressWithPopupCode } from './variant/ProgressWithPopup' +import { VariantOfProgress, VariantOfProgressCode } from './variant/VariantOfProgress' +import { SizesOfLineProgress, SizesOfLineProgressCode } from './variant/LineProgressSize' +import { CustomizeProgress, CustomizeProgressCode } from './variant/CustomizeProgress' +import { LineProgressDataApi, circleProgressDataApi } from './progressApi' -import { progressDataApi } from './progressApi' +import CodePreview from '../../../components/CodePreview' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents @@ -23,48 +22,50 @@ Default Progress allows you to visually represent the progress or completion of -## Progress Style Variant +## Progress Size Variant + +Progress component supports multiple sizes to fit your design needs. Here is available sizes options for the progress component in our design system `sm` `md` `lg` `xl` and `2xl`. + + + + -The Progress component in our design system comes with two style options: `rounded` and `bordered` +## Progress Variant + +The Progress component in our design system comes with two options: `LineProgress` and `CircleProgress` -## Progress Size Variant - -Progress component supports multiple sizes to fit your design needs. Here is available sizes options for the progress component in our design system `sm` `md` `lg` and `lg`. +## Line Progress - - + + -## Progress Colors Variant +## Line Progress Size -The Progress component offers various color options to suit your design preferences.Here is available colors options for the progress component in our design system `info` `error` `success` `warning` `indigo` and `purple`. +Progress component supports multiple sizes to fit your design needs. Here is available sizes options for the progress component in our design system `sm` `md` `lg` `xl` and `2xl`. - - + + -## Progress with Progress Number - -You can enhance the Progress component by adding a progress number that indicates the completion percentage of a task or process. This feature is particularly useful for providing users with a clear numeric representation of progress. +## How To Customize - - + + -## Progress with Popup +## Circle Progress API -The Progress component can be augmented with a popup that displays the progress percentage in a more detailed manner with `showPopupLabelProgress={true}` props. +Explore the available props for the Circle Progress component: - - - + -## API Reference +## Line Progress API -Explore the available props for the Progress component: +Explore the available props for the Line Progress component: - + diff --git a/app/docs/components/progress/progressApi.ts b/app/docs/components/progress/progressApi.ts index 1348586a..50842238 100644 --- a/app/docs/components/progress/progressApi.ts +++ b/app/docs/components/progress/progressApi.ts @@ -1,65 +1,75 @@ -export const progressDataApi = [ - { - id: 9, - propsName: 'color', - propsType: ['info', 'error', 'success', 'warning', 'indigo', 'purple'], - propsDescription: 'Defines the available color options for progress.', - default: 'info', - }, +export const LineProgressDataApi = [ { id: 1, propsName: 'size', - propsType: ['sm', 'md', 'lg', 'xl'], + propsType: ['sm', 'md', 'lg', 'xl', '2xl'], propsDescription: 'Defines the available sizes options for progress.', default: 'md', }, { id: 2, - propsName: 'label', + propsName: 'progress', + propsType: 'number', + propsDescription: 'Defines the progress control for the progress bar.', + default: '55', + }, + { + id: 4, + propsName: 'lineBg', propsType: 'string', - propsDescription: 'Progress level text.', - default: 'Text', + propsDescription: 'Progress line background color', + default: '', }, { id: 3, - propsName: 'labelPosition', - propsType: ['inside', 'outside', 'none'], - propsDescription: 'Defines the available position for progress label.', - default: 'outside', + propsName: 'className', + propsType: 'string', + propsDescription: 'Add your own className', + default: '', }, +] + +export const circleProgressDataApi = [ { - id: 4, - propsName: 'labelProgress', - propsType: 'boolean', - propsDescription: 'Specifies whether the progress label is shown.', - default: 'false', + id: 1, + propsName: 'size', + propsType: ['sm', 'md', 'lg', 'xl', '2xl'], + propsDescription: 'Defines the available sizes options for progress.', + default: 'md', }, { - id: 5, - propsName: 'showPopupLabelProgress', - propsType: 'boolean', - propsDescription: 'Specifies whether the popup label progress is shown.', - default: 'false', + id: 2, + propsName: 'progress', + propsType: 'number', + propsDescription: 'Defines the progress control for the progress bar.', + default: '55', }, { - id: 6, - propsName: 'rounded', - propsType: 'boolean', - propsDescription: 'Specifies whether the progress bar is rounded.', - default: 'false', + id: 3, + propsName: 'strokeBgColor', + propsType: 'string', + propsDescription: 'Circle Stroke Background Color', + default: '', }, { - id: 7, - propsName: 'bordered', - propsType: 'boolean', - propsDescription: 'Specifies whether the progress bar is bordered.', - default: 'false', + id: 5, + propsName: 'strokeColor', + propsType: 'string', + propsDescription: 'Circle Stroke Color', + default: '', }, { - id: 8, - propsName: 'progress', + id: 6, + propsName: 'strokeWidth', propsType: 'number', - propsDescription: 'Defines the progress control for the progress bar.', - default: '45', + propsDescription: 'Circle Stroke Width', + default: '2.5', + }, + { + id: 7, + propsName: 'className', + propsType: 'string', + propsDescription: 'Add your own className', + default: '', }, ] diff --git a/app/docs/components/progress/variant/ColorsOfProgress.tsx b/app/docs/components/progress/variant/ColorsOfProgress.tsx deleted file mode 100644 index e8c15073..00000000 --- a/app/docs/components/progress/variant/ColorsOfProgress.tsx +++ /dev/null @@ -1,70 +0,0 @@ -'use client' -import { Progress } from '../../../../src' - -const ColorsOfProgress = () => { - return ( -
-
Blue
- - - -
Red
- - - -
Green
- - - -
Yellow
- - - -
Indigo
- - - -
Purple
- - - -
- ) -} - -const ColorsOfProgressCode = ` -"use client"; -import { Progress } from "keep-react"; - -export const ProgressComponent = () => { - return ( -
-
Blue
- - - -
Red
- - - -
Green
- - - -
Yellow
- - - -
Indigo
- - - -
Purple
- - - -
- ); -}` - -export { ColorsOfProgress, ColorsOfProgressCode } diff --git a/app/docs/components/progress/variant/CustomizeProgress.tsx b/app/docs/components/progress/variant/CustomizeProgress.tsx new file mode 100644 index 00000000..bcbaed25 --- /dev/null +++ b/app/docs/components/progress/variant/CustomizeProgress.tsx @@ -0,0 +1,35 @@ +'use client' +import { CircleProgress, LineProgress } from '../../../../src' + +const CustomizeProgress = () => { + return ( +
+ + 45% + + + 65% + +
+ ) +} + +const CustomizeProgressCode = ` +'use client' +import { CircleProgress, LineProgress } from 'keep-react' + +export const ProgressComponent = () => { + return ( + <> + + 45% + + + 65% + + + ) +} +` + +export { CustomizeProgress, CustomizeProgressCode } diff --git a/app/docs/components/progress/variant/DefaultLineProgress.tsx b/app/docs/components/progress/variant/DefaultLineProgress.tsx new file mode 100644 index 00000000..dbc1b4d9 --- /dev/null +++ b/app/docs/components/progress/variant/DefaultLineProgress.tsx @@ -0,0 +1,27 @@ +'use client' +import { LineProgress } from '../../../../src' + +const DefaultLineProgress = () => { + return ( +
+ + 55% + +
+ ) +} + +const DefaultLineProgressCode = ` +'use client' +import { LineProgress } from 'keep-react' + +export const ProgressComponent = () => { + return ( + + 55% + + ) +} +` + +export { DefaultLineProgress, DefaultLineProgressCode } diff --git a/app/docs/components/progress/variant/DefaultProgress.tsx b/app/docs/components/progress/variant/DefaultProgress.tsx index 64096608..cc1711ca 100644 --- a/app/docs/components/progress/variant/DefaultProgress.tsx +++ b/app/docs/components/progress/variant/DefaultProgress.tsx @@ -1,20 +1,24 @@ 'use client' -import { Progress } from '../../../../src' +import { CircleProgress } from '../../../../src' const DefaultProgress = () => { return ( -
- -
+ + 55% + ) } const DefaultProgressCode = ` -"use client"; -import { Progress } from "keep-react"; +'use client' +import { CircleProgress } from 'keep-react' export const ProgressComponent = () => { - return ; + return ( + + 55% + + ) } ` diff --git a/app/docs/components/progress/variant/LineProgressSize.tsx b/app/docs/components/progress/variant/LineProgressSize.tsx new file mode 100644 index 00000000..495e09ee --- /dev/null +++ b/app/docs/components/progress/variant/LineProgressSize.tsx @@ -0,0 +1,39 @@ +'use client' +import { LineProgress } from '../../../../src' + +const SizesOfLineProgress = () => { + return ( +
+ + 50% + + + 60% + + + 70% + + + 80% + + + 90% + +
+ ) +} + +const SizesOfLineProgressCode = ` +"use client" +import { CircleProgress } from "keep-react" + +export const ProgressComponent = () => { + return ( + + 55% + + ) +} +` + +export { SizesOfLineProgress, SizesOfLineProgressCode } diff --git a/app/docs/components/progress/variant/ProgressWithNumber.tsx b/app/docs/components/progress/variant/ProgressWithNumber.tsx deleted file mode 100644 index 910fbe73..00000000 --- a/app/docs/components/progress/variant/ProgressWithNumber.tsx +++ /dev/null @@ -1,43 +0,0 @@ -'use client' -import { Progress } from '../../../../src' - -const ProgressWithNumber = () => { - return ( -
- - - -
- ) -} - -const ProgressWithNumberCode = ` -"use client"; -import { Progress } from "keep-react"; - -export const ProgressComponent = () => { - return ( -
- - - -
- ); -}` - -export { ProgressWithNumber, ProgressWithNumberCode } diff --git a/app/docs/components/progress/variant/ProgressWithPopup.tsx b/app/docs/components/progress/variant/ProgressWithPopup.tsx deleted file mode 100644 index e19cae83..00000000 --- a/app/docs/components/progress/variant/ProgressWithPopup.tsx +++ /dev/null @@ -1,28 +0,0 @@ -'use client' -import { Progress } from '../../../../src' - -const ProgressWithPopup = () => { - return ( -
- -
- ) -} - -const ProgressWithPopupCode = ` -"use client"; -import { Progress } from "keep-react"; - -export const ProgressComponent = () => { - return ( - - ); -}; -` - -export { ProgressWithPopup, ProgressWithPopupCode } diff --git a/app/docs/components/progress/variant/SizesOfProgress.tsx b/app/docs/components/progress/variant/SizesOfProgress.tsx index acd5260d..6d1fca4b 100644 --- a/app/docs/components/progress/variant/SizesOfProgress.tsx +++ b/app/docs/components/progress/variant/SizesOfProgress.tsx @@ -1,30 +1,38 @@ 'use client' -import { Progress } from '../../../../src' +import { CircleProgress } from '../../../../src' const SizesOfProgress = () => { return ( -
- - - - +
+ + 55% + + + 55% + + + 55% + + + 55% + + + 55% +
) } const SizesOfProgressCode = ` -"use client"; -import { Progress } from "keep-react"; +"use client" +import { CircleProgress } from "keep-react" export const ProgressComponent = () => { return ( -
- - - - -
- ); + + 55% + + ) } ` diff --git a/app/docs/components/progress/variant/VariantOfProgress.tsx b/app/docs/components/progress/variant/VariantOfProgress.tsx index 0e640ab0..eb37d18e 100644 --- a/app/docs/components/progress/variant/VariantOfProgress.tsx +++ b/app/docs/components/progress/variant/VariantOfProgress.tsx @@ -1,28 +1,34 @@ 'use client' -import { Progress } from '../../../../src' +import { CircleProgress, LineProgress } from '../../../../src' const VariantOfProgress = () => { return ( -
- - - +
+ + 55% + + + 55% +
) } const VariantOfProgressCode = ` -"use client"; -import { Progress } from "keep-react"; +'use client' +import { CircleProgress, LineProgress } from 'keep-react' export const ProgressComponent = () => { return ( -
- - - -
- ); + <> + + 55% + + + 55% + + + ) } ` diff --git a/app/docs/components/radio/Radio.mdx b/app/docs/components/radio/Radio.mdx index ecfbb876..f7087974 100644 --- a/app/docs/components/radio/Radio.mdx +++ b/app/docs/components/radio/Radio.mdx @@ -1,11 +1,8 @@ import { DefaultRadio, DefaultRadioCode } from './variant/DefaultRadio' -import { SizesOfRadio, SizesOfRadioCode } from './variant/SizesOfRadio' import { RadioVariant, RadioVariantCode } from './variant/RadioVariant' import { radioApiData } from './RadioApi' - -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents @@ -15,26 +12,18 @@ Radio Input Component is a user interface element used for selecting a single op The Default Radio Input is a fundamental user interface element that allows users to choose a single option from a group of options. It presents a list of choices, each accompanied by a radio button. - + ## Radio shape variant -The Radio Shape Variant component introduces different shape options for radio inputs, allowing you to customize the appearance of radio buttons. The available shape variants are: `"circle"` and `"square"`. +The Radio Shape Variant component introduces different shape options for radio inputs, allowing you to customize the appearance of radio buttons. The available shape variants are: `"circle"` `"rounded"` and `"square"`. - + -## Sizes Of Radio - -The Sizes of Radio component offers different size options for radio inputs to suit various design preferences and layouts. The available sizes include: `sm` `md` and `lg`. - - - - - ## API Reference Explore the available props for the radio component diff --git a/app/docs/components/radio/RadioApi.ts b/app/docs/components/radio/RadioApi.ts index 274fe77f..b62be1cb 100644 --- a/app/docs/components/radio/RadioApi.ts +++ b/app/docs/components/radio/RadioApi.ts @@ -1,44 +1,9 @@ export const radioApiData = [ { id: 1, - propsName: 'sizing', - propsType: ['sm', 'md', 'lg'], - propsDescription: 'Sets the size of the radio input component.', - default: 'lg', - }, - { - id: 2, - propsName: 'color', - propsType: ['info', 'success', 'warning', 'error'], - propsDescription: 'Radio input color', - default: 'info', - }, - { - id: 3, - propsName: 'radioShape', - propsType: ['circle', 'square'], - propsDescription: 'Specifies the shape of the radio input, either circle or square.', - default: 'circle', - }, - { - id: 4, - propsName: 'value', - propsType: 'string', - propsDescription: 'Value associated with the radio input.', - default: 'None', - }, - { - id: 5, - propsName: 'selected', - propsType: 'string', - propsDescription: 'Currently selected value in a group of radio inputs.', - default: 'None', - }, - { - id: 6, - propsName: 'onOptionChange', - propsType: '() => void', - propsDescription: 'Callback function when the radio option changes.', - default: 'None', + propsName: 'variant', + propsType: ['circle', 'rounded', 'square'], + propsDescription: 'Specifies the shape of the radio input.', + default: 'rounded', }, ] diff --git a/app/docs/components/radio/variant/DefaultRadio.tsx b/app/docs/components/radio/variant/DefaultRadio.tsx index c08f85de..11b65aa2 100644 --- a/app/docs/components/radio/variant/DefaultRadio.tsx +++ b/app/docs/components/radio/variant/DefaultRadio.tsx @@ -1,138 +1,48 @@ 'use client' -import { ChangeEvent, useState } from 'react' import { Label, Radio } from '../../../../src' const DefaultRadio = () => { - const [selected, setSelected] = useState('') - const handleOptionChange = (e: ChangeEvent) => { - setSelected(e.target.value) - } - return ( -
- Choose your favorite country -
- - -
-
- - -
-
- - -
-
- - -
-
+
+ Choose your favorite country +
+ + +
+
+ + +
+
+ + +
+ ) } const DefaultRadioCode = ` -"use client"; -import { useState } from "react"; -import { Label,Radio } from "keep-react"; +'use client' +import { Label, Radio } from 'keep-react' export const RadioComponent = () => { - const [selected, setSelected] = useState(""); - const handleOptionChange = (event) => { - setSelected(event.target.value); - }; - return ( -
- Choose your favorite country -
- - -
-
- - -
-
- - -
-
- - -
-
- ); +
+ Choose your favorite country +
+ + +
+
+ + +
+
+ + +
+ + ) } ` diff --git a/app/docs/components/radio/variant/RadioVariant.tsx b/app/docs/components/radio/variant/RadioVariant.tsx index a6a23ee0..254d9714 100644 --- a/app/docs/components/radio/variant/RadioVariant.tsx +++ b/app/docs/components/radio/variant/RadioVariant.tsx @@ -1,140 +1,48 @@ 'use client' -import { ChangeEvent, useState } from 'react' import { Label, Radio } from '../../../../src' const RadioVariant = () => { - const [selected, setSelected] = useState('') - const handleOptionChange = (e: ChangeEvent) => { - setSelected(e.target.value) - } - return ( -
- Choose your favorite country -
- - -
-
- - -
-
- - -
- -
- - -
-
+
+ Choose your favorite country +
+ + +
+
+ + +
+
+ + +
+ ) } const RadioVariantCode = ` -"use client"; -import { useState } from "react"; -import { Label,Radio } from "keep-react"; +'use client' +import { Label, Radio } from 'keep-react' export const RadioComponent = () => { - const [selected, setSelected] = useState(""); - const handleOptionChange = (e: React.ChangeEvent) => { - setSelected(e.target.value); - }; - return ( -
- Choose your favorite country -
- - -
-
- - -
-
- - -
- -
- - -
-
- ); +
+ Choose your favorite country +
+ + +
+
+ + +
+
+ + +
+ + ) } ` diff --git a/app/docs/components/radio/variant/SizesOfRadio.tsx b/app/docs/components/radio/variant/SizesOfRadio.tsx deleted file mode 100644 index 1f43d0ee..00000000 --- a/app/docs/components/radio/variant/SizesOfRadio.tsx +++ /dev/null @@ -1,102 +0,0 @@ -'use client' -import { ChangeEvent, useState } from 'react' -import { Label, Radio } from '../../../../src' - -const SizesOfRadio = () => { - const [selected, setSelected] = useState('') - const handleOptionChange = (e: ChangeEvent) => { - setSelected(e.target.value) - } - return ( -
-
- Choose your favorite Framework -
- - -
-
- - -
-
- - -
-
-
- ) -} - -const SizesOfRadioCode = ` -"use client"; -import { useState } from "react"; -import { Label, Radio } from "keep-react"; - -export const RadioComponent = () => { - const [selected, setSelected] = useState(""); - const handleOptionChange = (e) => { - setSelected(e.target.value); - }; - return ( -
- Choose your favorite Framework -
- - -
-
- - -
-
- - -
-
- ); -} -` -export { SizesOfRadio, SizesOfRadioCode } diff --git a/app/docs/components/rating/rating.mdx b/app/docs/components/rating/rating.mdx index d26a9604..9fac5ab2 100644 --- a/app/docs/components/rating/rating.mdx +++ b/app/docs/components/rating/rating.mdx @@ -1,12 +1,9 @@ import { DefaultRating, DefaultRatingCode } from './variant/DefaultRating' import { VariantOfRating, VariantOfRatingCode } from './variant/RatingVariant' import { RatingTypes, RatingTypesCode } from './variant/RatingTypes' -import { RatingWithProgress, RatingWithProgressCode } from './variant/RatingWithProgress' import { RatingDataApi } from './ratingApi' - -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents @@ -36,14 +33,6 @@ Rating Type refers to the specific behavior and appearance of individual rating -## Rating With Progress - -The Rating component appears to be used to render each rating item. The `percentFilled` prop is utilized to indicate the percentage of the rating that should be filled. This creates a visually meaningful representation of each rating with varying levels of filled content, akin to a progress bar that indicates the level of the rating's completeness. - - - - - ## API Reference Explore the available props for the rating component diff --git a/app/docs/components/rating/ratingApi.ts b/app/docs/components/rating/ratingApi.ts index f5da5880..de8a1696 100644 --- a/app/docs/components/rating/ratingApi.ts +++ b/app/docs/components/rating/ratingApi.ts @@ -20,11 +20,4 @@ export const RatingDataApi = [ propsDescription: 'Rating start icon type.', default: 'full', }, - { - id: 4, - propsName: 'percentFilled', - propsType: 'number', - propsDescription: 'rating progress number', - default: '70', - }, ] diff --git a/app/docs/components/rating/variant/DefaultRating.tsx b/app/docs/components/rating/variant/DefaultRating.tsx index 7c32b622..5d997a58 100644 --- a/app/docs/components/rating/variant/DefaultRating.tsx +++ b/app/docs/components/rating/variant/DefaultRating.tsx @@ -3,7 +3,7 @@ import { Rating } from '../../../../src' const DefaultRating = () => { return ( - + @@ -14,19 +14,19 @@ const DefaultRating = () => { } const DefaultRatingCode = ` -"use client"; -import { Rating } from "keep-react"; +'use client' +import { Rating } from 'keep-react' export const RatingComponent = () => { return ( - + - ); + ) } ` diff --git a/app/docs/components/rating/variant/RatingTypes.tsx b/app/docs/components/rating/variant/RatingTypes.tsx index 8e40f1b2..d42d1ffb 100644 --- a/app/docs/components/rating/variant/RatingTypes.tsx +++ b/app/docs/components/rating/variant/RatingTypes.tsx @@ -3,7 +3,7 @@ import { Rating } from '../../../../src' const RatingTypes = () => { return ( - + @@ -11,16 +11,16 @@ const RatingTypes = () => { } const RatingTypesCode = ` -"use client"; -import { Rating } from "keep-react"; +'use client' +import { Rating } from 'keep-react' export const RatingComponent = () => { return ( - + - ); + ) } ` diff --git a/app/docs/components/rating/variant/RatingVariant.tsx b/app/docs/components/rating/variant/RatingVariant.tsx index 4cacd047..b30f0222 100644 --- a/app/docs/components/rating/variant/RatingVariant.tsx +++ b/app/docs/components/rating/variant/RatingVariant.tsx @@ -3,7 +3,7 @@ import { Rating } from '../../../../src' const VariantOfRating = () => { return ( - + @@ -15,20 +15,20 @@ const VariantOfRating = () => { } const VariantOfRatingCode = ` -"use client"; -import { Rating } from "keep-react"; +'use client' +import { Rating } from 'keep-react' export const RatingComponent = () => { return ( - - - - - - - - - ); + + + + + + + + + ) } ` diff --git a/app/docs/components/rating/variant/RatingWithProgress.tsx b/app/docs/components/rating/variant/RatingWithProgress.tsx deleted file mode 100644 index cf31bc78..00000000 --- a/app/docs/components/rating/variant/RatingWithProgress.tsx +++ /dev/null @@ -1,33 +0,0 @@ -'use client' -import { Rating } from '../../../../src' - -const RatingWithProgress = () => { - return ( -
- 5 Star - 4 Star - 3 Star - 2 Star - 1 Star -
- ) -} - -const RatingWithProgressCode = ` -"use client"; -import { Rating } from "keep-react"; - -export const RatingComponent = () => { - return ( -
- 5 star - 4 star - 3 star - 2 star - 1 star -
- ); -} -` - -export { RatingWithProgress, RatingWithProgressCode } diff --git a/app/docs/components/searchBar/SearchBar.mdx b/app/docs/components/searchBar/SearchBar.mdx deleted file mode 100644 index 737b1ab5..00000000 --- a/app/docs/components/searchBar/SearchBar.mdx +++ /dev/null @@ -1,51 +0,0 @@ -import { DefaultSearchBar, DefaultSearchBarCode } from './variant/DefaultSearchBar' -import { SearchBarWithIcon, SearchBarWithIconCode } from './variant/SearchBarWithIcon' -import { SearchBarWithColorVariant, SearchBarWithColorVariantCode } from './variant/SearchBarWithColorVariant' -import { DisabledSearchBar, DisabledSearchBarCode } from './variant/DisabledSearchBar' -import { searchBarApiData } from './SearchBarApi' - -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" - -## Table of Contents - -The Search Bar component provides a user interface element for entering search queries. It includes various customization options such as placeholder text, color variants, size variations, icons, and additional content. The component can be configured with search input addons and icons, along with their respective positions. - -## Default SearchBar - -The Default Search Bar component provides a simple and intuitive user interface element for entering search queries. - - - - - -## SearchBar With Icon - -The Search Bar component with an icon allows you to enhance the visual appeal and functionality of the search input field. By adding an `icon` through the icon prop. - - - - - -## SearchBar With Color Variant - -The Search Bar component can be customized with different color variants to match your design aesthetics. You can choose from a range of available colors, including `"gray"` `"info"` `"error"` `"warning"` and `"success"`. - - - - - -## Disabled SearchBar - -The Search Bar component can be disabled using the `disabled` prop. When you set the `disabled` prop to `true`, the search input field becomes non-editable and the user cannot interact with it. - - - - - -## API Reference - -Explore the available props for the search bar component - - diff --git a/app/docs/components/searchBar/SearchBarApi.ts b/app/docs/components/searchBar/SearchBarApi.ts deleted file mode 100644 index be834f15..00000000 --- a/app/docs/components/searchBar/SearchBarApi.ts +++ /dev/null @@ -1,86 +0,0 @@ -export const searchBarApiData = [ - { - id: 1, - propsName: 'placeholder', - propsType: 'string', - propsDescription: 'Placeholder text for the search input.', - default: 'search anything', - }, - { - id: 2, - propsName: 'color', - propsType: ['gray', 'info', 'error', 'warning', 'success'], - propsDescription: 'Specifies the color variant of the search input component.', - default: 'gray', - }, - { - id: 3, - propsName: 'size', - propsType: ['sm', 'md', 'lg'], - propsDescription: 'Sets the size of the search input component.', - default: 'lg', - }, - { - id: 4, - propsName: 'addon', - propsType: 'ReactNode', - propsDescription: 'Additional content or components added as a search input addon.', - default: 'ICON', - }, - { - id: 5, - propsName: 'icon', - propsType: 'ReactNode', - propsDescription: 'Icon displayed within the search input component.', - default: 'ICON', - }, - { - id: 6, - propsName: 'addonPosition', - propsType: ['left', 'right'], - propsDescription: 'Specifies the position of the search input addon.', - default: 'right', - }, - { - id: 7, - propsName: 'iconPosition', - propsType: ['left', 'right'], - propsDescription: 'Specifies the position of the icon within the search input.', - default: 'right', - }, - { - id: 8, - propsName: 'handleOnChange', - propsType: 'function', - propsDescription: 'Callback function when the search input value changes.', - default: '(e) => void', - }, - { - id: 9, - propsName: 'children', - propsType: 'ReactNode', - propsDescription: 'Child components and content to be placed within the search input component.', - default: 'Search Result', - }, - { - id: 10, - propsName: 'disabled', - propsType: 'boolean', - propsDescription: 'Disables interactions with the search input component.', - default: 'false', - }, - { - id: 11, - propsName: 'bordered', - propsType: 'boolean', - propsDescription: 'Displays a border around the search input component.', - default: 'false', - }, - { - id: 12, - propsName: 'withBg', - propsType: 'boolean', - propsDescription: 'Applies a background style to the search input component.', - default: 'false', - }, -] diff --git a/app/docs/components/searchBar/index.tsx b/app/docs/components/searchBar/index.tsx deleted file mode 100644 index ba575a06..00000000 --- a/app/docs/components/searchBar/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -'use client' -import type { FC } from 'react' -import SearchBarDocsContent from './SearchBar.mdx' - -const SearchBarDocs: FC = () => - -export default SearchBarDocs diff --git a/app/docs/components/searchBar/page.tsx b/app/docs/components/searchBar/page.tsx deleted file mode 100644 index 0e089829..00000000 --- a/app/docs/components/searchBar/page.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { Metadata, NextPage } from 'next' -import { DocsContentLayout } from '../../../components/DocsContentLayout' -import SearchBarDocs from '.' - -export const metadata: Metadata = { - description: - 'The Search Bar component provides a user interface element for entering search queries. It includes various customization options such as placeholder text, color variants, size variations, icons, and additional content. The component can be configured with search input addons and icons, along with their respective positions. ', - title: 'Search Bar - Keep React', -} - -const page: NextPage = () => { - return ( - - - - ) -} - -export default page diff --git a/app/docs/components/searchBar/variant/DefaultSearchBar.tsx b/app/docs/components/searchBar/variant/DefaultSearchBar.tsx deleted file mode 100644 index 56535489..00000000 --- a/app/docs/components/searchBar/variant/DefaultSearchBar.tsx +++ /dev/null @@ -1,115 +0,0 @@ -'use client' -import { ChangeEvent, useState } from 'react' -import { SearchBar, Dropdown } from '../../../../src' -import { ArrowRight, MagnifyingGlass } from 'phosphor-react' - -export interface Book { - id: number - name: string -} - -export const books: Book[] = [ - { id: 1, name: 'To Kill a Mockingbird' }, - { id: 2, name: 'Pride and Prejudice' }, - { id: 3, name: '1984' }, - { id: 4, name: 'The Great Gatsby' }, - { id: 5, name: 'Moby Dick' }, - { id: 6, name: 'The Catcher in the Rye' }, - { id: 7, name: 'Jane Eyre' }, - { id: 8, name: 'The Lord of the Rings' }, - { id: 9, name: 'To the Lighthouse' }, - { id: 10, name: 'Brave New World' }, -] - -const DefaultSearchBar = () => { - const [data, setData] = useState([]) - const handleOnChange = (e: ChangeEvent) => { - const searchTerm = e.target.value.toLowerCase() - const results = books.filter((book) => book.name.toLowerCase().includes(searchTerm)) - - if (searchTerm === '') { - setData([]) - } else { - setData(results) - } - } - - return ( - } - addonPosition="left" - handleOnChange={handleOnChange}> -
    - {data.map((book) => ( - - {book?.name} - - - - - ))} -
- - ) -} - -const DefaultSearchBarCode = ` -"use client"; -import { useState } from "react"; -import { Dropdown,SearchBar } from "keep-react"; -import { ArrowRight, MagnifyingGlass } from "phosphor-react"; - -const books = [ - { id: 1, name: "To Kill a Mockingbird" }, - { id: 2, name: "Pride and Prejudice" }, - { id: 3, name: "1984" }, - { id: 4, name: "The Great Gatsby" }, - { id: 5, name: "Moby Dick" }, - { id: 6, name: "The Catcher in the Rye" }, - { id: 7, name: "Jane Eyre" }, - { id: 8, name: "The Lord of the Rings" }, - { id: 9, name: "To the Lighthouse" }, - { id: 10, name: "Brave New World" }, -]; - -export const SearchBarComponent = () => { - - const [data, setData] = useState([]); - const handleOnChange = (event) => { - const searchTerm = event.target.value.toLowerCase(); - const results = books.filter((book) => - book.name.toLowerCase().includes(searchTerm) - ); - - if (searchTerm === "") { - setData([]); - } else { - setData(results); - } - - }; - - return ( - } - addonPosition="left" - handleOnChange={handleOnChange} - > -
    - {data.map((book) => ( - - {book?.name} - - - - - ))} -
- - ); -} -` - -export { DefaultSearchBar, DefaultSearchBarCode } diff --git a/app/docs/components/searchBar/variant/DisabledSearchBar.tsx b/app/docs/components/searchBar/variant/DisabledSearchBar.tsx deleted file mode 100644 index 697e874a..00000000 --- a/app/docs/components/searchBar/variant/DisabledSearchBar.tsx +++ /dev/null @@ -1,33 +0,0 @@ -'use client' -import { SearchBar } from '../../../../src' -import { MagnifyingGlass } from 'phosphor-react' - -const DisabledSearchBar = () => { - return ( - } - addonPosition="left" - disabled={true} - /> - ) -} - -const DisabledSearchBarCode = ` -"use client"; -import { SearchBar } from "keep-react"; -import { MagnifyingGlass } from "phosphor-react"; - -export const SearchBarComponent = () => { - return ( - } - addonPosition="left" - disabled={true} - /> - ); -} -` - -export { DisabledSearchBar, DisabledSearchBarCode } diff --git a/app/docs/components/searchBar/variant/SearchBarWithColorVariant.tsx b/app/docs/components/searchBar/variant/SearchBarWithColorVariant.tsx deleted file mode 100644 index fd9f5f2b..00000000 --- a/app/docs/components/searchBar/variant/SearchBarWithColorVariant.tsx +++ /dev/null @@ -1,128 +0,0 @@ -'use client' -import { ChangeEvent, useState } from 'react' -import { Book, books } from './DefaultSearchBar' -import { ArrowRight, MapPinLine } from 'phosphor-react' -import { SearchBar, Dropdown, Button } from '../../../../src' - -const SearchBarWithColorVariant = () => { - const [data, setData] = useState([]) - const handleOnChange = (e: ChangeEvent) => { - const searchTerm = e.target.value.toLowerCase() - const results = books.filter((book) => book.name.toLowerCase().includes(searchTerm)) - - if (searchTerm === '') { - setData([]) - } else { - setData(results) - } - } - return ( - - Search - - } - addonPosition="right" - icon={ - - } - iconPosition="right" - handleOnChange={handleOnChange} - size="lg" - color="info"> -
    - {data.map((book) => ( - - {book?.name} - - - - - ))} -
- - ) -} - -const SearchBarWithColorVariantCode = ` -"use client"; -import { useState } from "react"; -import { ArrowRight, MapPinLine } from "phosphor-react"; -import { SearchBar, Dropdown, Button } from "keep-react"; - - -const books = [ - { id: 1, name: "To Kill a Mockingbird" }, - { id: 2, name: "Pride and Prejudice" }, - { id: 3, name: "1984" }, - { id: 4, name: "The Great Gatsby" }, - { id: 5, name: "Moby Dick" }, - { id: 6, name: "The Catcher in the Rye" }, - { id: 7, name: "Jane Eyre" }, - { id: 8, name: "The Lord of the Rings" }, - { id: 9, name: "To the Lighthouse" }, - { id: 10, name: "Brave New World" }, -]; - -const SearchBarComponent = () => { - const [data, setData] = useState([]); - - const handleOnChange = (event) => { - const searchTerm = event.target.value.toLowerCase(); - const results = books.filter((book) => - book.name.toLowerCase().includes(searchTerm) - ); - - if (searchTerm === "") { - setData([]); - } else { - setData(results); - } - }; - return ( - - Search - - } - addonPosition="right" - icon={ - - } - iconPosition="right" - handleOnChange={handleOnChange} - size="lg" - color="info" - > -
    - {data.map((book) => ( - - {book?.name} - - - - - ))} -
- - ); -} -` - -export { SearchBarWithColorVariant, SearchBarWithColorVariantCode } diff --git a/app/docs/components/searchBar/variant/SearchBarWithIcon.tsx b/app/docs/components/searchBar/variant/SearchBarWithIcon.tsx deleted file mode 100644 index 591c8c92..00000000 --- a/app/docs/components/searchBar/variant/SearchBarWithIcon.tsx +++ /dev/null @@ -1,99 +0,0 @@ -'use client' -import { ChangeEvent, useState } from 'react' -import { Book, books } from './DefaultSearchBar' -import { SearchBar, Dropdown } from '../../../../src' -import { ArrowRight, MagnifyingGlass } from 'phosphor-react' - -const SearchBarWithIcon = () => { - const [data, setData] = useState([]) - const handleOnChange = (e: ChangeEvent) => { - const searchTerm = e.target.value.toLowerCase() - const results = books.filter((book) => book.name.toLowerCase().includes(searchTerm)) - - if (searchTerm === '') { - setData([]) - } else { - setData(results) - } - } - return ( - } - addonPosition="left" - icon={} - iconPosition="right" - handleOnChange={handleOnChange}> -
    - {data.map((book) => ( - - {book?.name} - - - - - ))} -
- - ) -} - -const SearchBarWithIconCode = ` -"use client"; -import { useState } from "react"; -import { SearchBar,Dropdown } from "keep-react"; -import { ArrowRight, MagnifyingGlass } from "phosphor-react"; - -const books = [ - { id: 1, name: "To Kill a Mockingbird" }, - { id: 2, name: "Pride and Prejudice" }, - { id: 3, name: "1984" }, - { id: 4, name: "The Great Gatsby" }, - { id: 5, name: "Moby Dick" }, - { id: 6, name: "The Catcher in the Rye" }, - { id: 7, name: "Jane Eyre" }, - { id: 8, name: "The Lord of the Rings" }, - { id: 9, name: "To the Lighthouse" }, - { id: 10, name: "Brave New World" }, -]; - -export const SearchBarComponent = () => { - - const [data, setData] = useState([]); - const handleOnChange = (event) => { - const searchTerm = event.target.value.toLowerCase(); - const results = books.filter((book) => - book.name.toLowerCase().includes(searchTerm) - ); - if (searchTerm === "") { - setData([]); - } else { - setData(results); - } - }; - - return ( - } - addonPosition="left" - icon={} - iconPosition="right" - handleOnChange={handleOnChange} - > -
    - {data.map((book) => ( - - {book?.name} - - - - - ))} -
- - ); -} -` - -export { SearchBarWithIcon, SearchBarWithIconCode } diff --git a/app/docs/components/sidebar/Sidebar.mdx b/app/docs/components/sidebar/Sidebar.mdx index fbcdcce3..833c1c8a 100644 --- a/app/docs/components/sidebar/Sidebar.mdx +++ b/app/docs/components/sidebar/Sidebar.mdx @@ -1,52 +1,32 @@ import { DefaultSidebar, DefaultSidebarCode } from './variant/DefaultSidebar' -import { SidebarWithContentSeparator, SidebarWithContentSeparatorCode } from './variant/SidebarWithContentSeparator' -import { SidebarWithBranding, SidebarWithBrandingCode } from './variant/SidebarWithBranding' -import { SidebarWithCTA, SidebarWithCTACode } from './variant/SidebarWithCTA' -import { SidebarWithDropdown, SidebarWithDropdownCode } from './variant/SidebarWithDropdown' - -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" +import { SidebarWithIcon, SidebarWithIconCode } from './variant/SidebarWithIcon' +import { SidebarWithCart, SidebarWithCartCode } from './variant/SidebarWithCart' +import CodePreview from '../../../components/CodePreview' ## Table of Contents -A Sidebar Component is a user interface element commonly found in web and mobile applications. It provides a dedicated space at the side of the main content area to display navigation links, menu items, or other relevant information. The sidebar is often used to help users navigate between different sections of the application, access important features, or view contextual details. +The Sidebar Component is a user interface element commonly found in web and mobile applications. It provides a dedicated space at the side of the main content area to display navigation links, menu items, or other relevant information. ## Default Sidebar -The Default Sidebar component offers a versatile multi-level navigation menu enriched with icons and labels, catering to a seamless navigation experience. It requires icons sourced from an icon library package and easy setup within the `` component with appropriate props. +A default sidebar with sidebar items and item icons. -## Sidebar With Dropdown - -Craft dropdown menus within the sidebar using the `` component. This empowers you to provide sub-level navigation options for an organized user experience. - - - - - -## Sidebar With Logo Branding - -Infuse your brand identity by incorporating a brand logo into the sidebar using the `` component. Customize the code snippet with your brand logo's URL. - - - - - -## Sidebar With Content Separator +## Sidebar With Icon -Enhance content separation in the sidebar by employing separators. Divide your sidebar items into distinct groups using `` components. +Display sidebar items with icons only. - - + + -## Sidebar With Call to Action +## Sidebar With Cart -Integrate compelling calls to action within the sidebar to engage users effectively. Utilize the `` component for seamless incorporation. +Utilize the sidebar as a product cart in an e-commerce website. - - + + diff --git a/app/docs/components/sidebar/page.tsx b/app/docs/components/sidebar/page.tsx index f9541c28..3177af06 100644 --- a/app/docs/components/sidebar/page.tsx +++ b/app/docs/components/sidebar/page.tsx @@ -1,10 +1,10 @@ import type { Metadata, NextPage } from 'next' -import { DocsContentLayout } from '../../../components/DocsContentLayout' import SidebarDocs from '.' +import { DocsContentLayout } from '../../../components/DocsContentLayout' export const metadata: Metadata = { description: - 'Sidebar Component is a user interface element commonly found in web and mobile applications. It provides a dedicated space at the side of the main content area to display navigation links, menu items, or other relevant information. The sidebar is often used to help users navigate between different sections of the application, access important features, or view contextual details.', + 'Sidebar Component is a user interface element commonly found in web and mobile applications. It provides a dedicated space at the side of the main content area to display navigation links, menu items, or other relevant information.', title: 'Sidebar - Keep React', } diff --git a/app/docs/components/sidebar/variant/DefaultSidebar.tsx b/app/docs/components/sidebar/variant/DefaultSidebar.tsx index e72e6767..69b6cc8c 100644 --- a/app/docs/components/sidebar/variant/DefaultSidebar.tsx +++ b/app/docs/components/sidebar/variant/DefaultSidebar.tsx @@ -1,88 +1,170 @@ 'use client' -import { Sidebar } from '../../../../src' -import { Chat, LockSimple, ShoppingBagOpen, ShoppingCart, SignIn, SquaresFour, UserPlus, Users } from 'phosphor-react' +import { + ArchiveTray, + Chat, + Gear, + List, + MagnifyingGlass, + ShoppingCart, + SignIn, + SquaresFour, + Users, +} from 'phosphor-react' +import { Avatar, Button, Divider, Icon, Input, Sidebar, Typography } from '../../../../src' const DefaultSidebar = () => { return ( - - - }> - Dashboard - - }>E-commerce - } label="pro" labelColor="gray"> - Components - - } label="3"> - Inbox - - }> - Users - - }> - Products - - }> - Sign In - - }> - Sign Up - - - +
+ + +
+ + Keep + + +
+
+
+ + + + +
+
+ + + + + Profile + + + + Products + + + + Download + + + + Message + + + + Settings + + + + Users + + + + Log Out + + + + +
+ +
+
+ + Md Ariful Islam + + + Web Developer + +
+ + +
) } const DefaultSidebarCode = ` -"use client"; -import { Sidebar } from "keep-react"; +'use client' import { + ArchiveTray, Chat, - LockSimple, - ShoppingBagOpen, + Gear, + List, + MagnifyingGlass, ShoppingCart, SignIn, SquaresFour, - UserPlus, Users, -} from "phosphor-react"; +} from 'phosphor-react' +import { Avatar, Button, Divider, Icon, Input, Sidebar, Typography } from 'keep-react' export const SidebarComponent = () => { return ( - - - }> - Dashboard - - }> - E-commerce - - } - label="pro" - labelColor="gray" - > - Components - - } label="3"> - Inbox - - }> - Users - - }> - Products - - }> - Sign In - - }> - Sign Up - - + + +
+ + Keep + + +
+
+
+ + + + +
+
+ + + + + Profile + + + + Products + + + + Download + + + + Message + + + + Settings + + + + Users + + + + Log Out + + + + +
+ +
+
+ + Md Ariful Islam + + + Web Developer + +
+ - ); + ) } ` diff --git a/app/docs/components/sidebar/variant/SidebarWithBranding.tsx b/app/docs/components/sidebar/variant/SidebarWithBranding.tsx deleted file mode 100644 index 751e0e54..00000000 --- a/app/docs/components/sidebar/variant/SidebarWithBranding.tsx +++ /dev/null @@ -1,93 +0,0 @@ -'use client' -import { Sidebar } from '../../../../src' -import { Chat, Handbag, ShoppingBagOpen, ShoppingCart, SignIn, SquaresFour, UserPlus, Users } from 'phosphor-react' - -const SidebarWithBranding = () => { - return ( - - - - - }> - Dashboard - - } label="E-commerce"> - }> - Products - - - }> - Inbox - - }> - Users - - }> - Products - - }> - Sign In - - }> - Sign Up - - - - - ) -} - -const SidebarWithBrandingCode = ` -"use client"; -import { Sidebar } from "keep-react"; -import { - Chat, - Handbag, - ShoppingBagOpen, - ShoppingCart, - SignIn, - SquaresFour, - UserPlus, - Users, -} from "phosphor-react"; - -export const SidebarComponent = () => { - return ( - - - - - }> - Dashboard - - } - label="E-commerce" - > - }> - Products - - - }> - Inbox - - }> - Users - - }> - Products - - }> - Sign In - - }> - Sign Up - - - - - ); -} -` - -export { SidebarWithBranding, SidebarWithBrandingCode } diff --git a/app/docs/components/sidebar/variant/SidebarWithCTA.tsx b/app/docs/components/sidebar/variant/SidebarWithCTA.tsx deleted file mode 100644 index b5983669..00000000 --- a/app/docs/components/sidebar/variant/SidebarWithCTA.tsx +++ /dev/null @@ -1,136 +0,0 @@ -'use client' -import { Sidebar, Badge, Button } from '../../../../src' -import { X } from 'phosphor-react' -import { - ChartBar, - Chat, - Handbag, - LockKey, - ShoppingBagOpen, - ShoppingCart, - SquaresFour, - TreeStructure, - Users, -} from 'phosphor-react' - -const SidebarWithCTA = () => { - return ( - - - - }> - Dashboard - - } label="E-commerce"> - }> - Products - - - }> - Inbox - - }> - Users - - }> - Products - - }> - Project Plan - - }> - Our Progress - - }> - Security - - - -
- Beta - -
-

- Preview the new keep design dashboard navigation! You can turn the new navigation off for a limited time in - your profile. -

- - - - ) -} - -const SidebarWithCTACode = ` -"use client"; -import { Sidebar, Badge, Button } from "keep-react"; -import { X } from "phosphor-react"; -import { - ChartBar, - Chat, - Handbag, - LockKey, - ShoppingBagOpen, - ShoppingCart, - SquaresFour, - TreeStructure, - Users, -} from "phosphor-react"; - -const SidebarWithCTA = () => { - return ( - - - - }> - Dashboard - - } - label="E-commerce" - > - }> - Products - - - }> - Inbox - - }> - Users - - }> - Products - - }> - Project Plan - - }> - Our Progress - - }> - Security - - - -
- Beta - -
-

- Preview the new keep design dashboard navigation! You can turn the - new navigation off for a limited time in your profile. -

- - - - ); -} -` -export { SidebarWithCTA, SidebarWithCTACode } diff --git a/app/docs/components/sidebar/variant/SidebarWithCart.tsx b/app/docs/components/sidebar/variant/SidebarWithCart.tsx new file mode 100644 index 00000000..e503a5c5 --- /dev/null +++ b/app/docs/components/sidebar/variant/SidebarWithCart.tsx @@ -0,0 +1,140 @@ +'use client' +import { Button, Divider, Sidebar, Typography } from '../../../../src' + +const SidebarWithCart = () => { + return ( +
+ + +
+
+
+
+
+ Men's casual shoe + 1 x 99 = $99 + +
+
+
+
+
+
+
+ Men's casual shoe + 1 x 99 = $99 + +
+
+
+
+
+
+
+ Men's casual shoe + 1 x 99 = $99 + +
+
+ + + +
+ Total + $297 +
+ + + +
+ ) +} + +const SidebarWithCartCode = ` +'use client' +import { Button, Divider, Sidebar, Typography } from 'keep-react' + +export const SidebarComponent = () => { + return ( + + +
+
+
+
+
+ Men's casual shoe + 1 x 99 = $99 + +
+
+
+
+
+
+
+ Men's casual shoe + 1 x 99 = $99 + +
+
+
+
+
+
+
+ Men's casual shoe + 1 x 99 = $99 + +
+
+ + + +
+ Total + $297 +
+ + + + ) +} +` +export { SidebarWithCart, SidebarWithCartCode } diff --git a/app/docs/components/sidebar/variant/SidebarWithContentSeparator.tsx b/app/docs/components/sidebar/variant/SidebarWithContentSeparator.tsx deleted file mode 100644 index 4c9d4406..00000000 --- a/app/docs/components/sidebar/variant/SidebarWithContentSeparator.tsx +++ /dev/null @@ -1,106 +0,0 @@ -'use client' -import { Sidebar } from '../../../../src' -import { - ChartBar, - Chat, - Handbag, - LockKey, - ShoppingBagOpen, - ShoppingCart, - SquaresFour, - TreeStructure, - Users, -} from 'phosphor-react' - -const SidebarWithContentSeparator = () => { - return ( - - - }> - Dashboard - - } label="E-commerce"> - }> - Products - - - }> - Inbox - - }> - Users - - }> - Products - - - - }> - Project Plan - - }> - Our Progress - - }> - Security - - - - ) -} - -const SidebarWithContentSeparatorCode = ` - -"use client"; -import { Sidebar } from "keep-react"; -import { - ChartBar, - Chat, - Handbag, - LockKey, - ShoppingBagOpen, - ShoppingCart, - SquaresFour, - TreeStructure, - Users, -} from "phosphor-react"; - -export const SidebarComponent = () => { - return ( - - - }> - Dashboard - - } label="E-commerce"> - }> - Products - - - }> - Inbox - - }> - Users - - }> - Products - - - - }> - Project Plan - - }> - Our Progress - - }> - Security - - - - ); -} -` - -export { SidebarWithContentSeparator, SidebarWithContentSeparatorCode } diff --git a/app/docs/components/sidebar/variant/SidebarWithDropdown.tsx b/app/docs/components/sidebar/variant/SidebarWithDropdown.tsx deleted file mode 100644 index 62db81bc..00000000 --- a/app/docs/components/sidebar/variant/SidebarWithDropdown.tsx +++ /dev/null @@ -1,91 +0,0 @@ -'use client' -import { Sidebar } from '../../../../src' -import { Chat, Handbag, ShoppingBagOpen, ShoppingCart, SignIn, SquaresFour, UserPlus, Users } from 'phosphor-react' - -const SidebarWithDropdown = () => { - return ( - - - - }> - Dashboard - - } label="E-commerce"> - }> - Products - - - }> - Inbox - - }> - Users - - }> - Products - - }> - Sign In - - }> - Sign Up - - - - - ) -} - -const SidebarWithDropdownCode = ` -"use client"; -import { Sidebar } from "keep-react"; -import { - Chat, - Handbag, - ShoppingBagOpen, - ShoppingCart, - SignIn, - SquaresFour, - UserPlus, - Users, -} from "phosphor-react"; - -export const SidebarComponent = () => { - return ( - - - - }> - Dashboard - - } - label="E-commerce" - > - }> - Products - - - }> - Inbox - - }> - Users - - }> - Products - - }> - Sign In - - }> - Sign Up - - - - - ); -} -` - -export { SidebarWithDropdown, SidebarWithDropdownCode } diff --git a/app/docs/components/sidebar/variant/SidebarWithIcon.tsx b/app/docs/components/sidebar/variant/SidebarWithIcon.tsx new file mode 100644 index 00000000..169d5d4a --- /dev/null +++ b/app/docs/components/sidebar/variant/SidebarWithIcon.tsx @@ -0,0 +1,70 @@ +'use client' +import { ArchiveTray, Chat, Gear, ShoppingCart, SignIn, SquaresFour, Users } from 'phosphor-react' +import { Sidebar } from '../../../../src' + +const SidebarWithIcon = () => { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ ) +} + +const SidebarWithIconCode = ` +'use client' +import { ArchiveTray, Chat, Gear, ShoppingCart, SignIn, SquaresFour, Users } from 'phosphor-react' +import { Sidebar } from 'keep-react' + +export const SidebarComponent = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +` + +export { SidebarWithIcon, SidebarWithIconCode } diff --git a/app/docs/components/skeleton/Skeleton.mdx b/app/docs/components/skeleton/Skeleton.mdx index 02ad1aee..0a125714 100644 --- a/app/docs/components/skeleton/Skeleton.mdx +++ b/app/docs/components/skeleton/Skeleton.mdx @@ -1,14 +1,12 @@ import { DefaultSkeleton, DefaultSkeletonCode } from './variant/DefaultSkeleton' -import { SkeletonLayout, SkeletonLayoutCode } from './variant/SkeletonLayout' import { CommentLayout, CommentLayoutCode } from './variant/CommentLayout' import { PostSkeleton, PostSkeletonCode } from './variant/PostSkeleton' -import { SkeletonWithAnimation, SkeletonWithAnimationCode } from './variant/SkeletonWithAnimation' import { ParagraphSkeleton, ParagraphSkeletonCode } from './variant/ParagraphSkeleton' import { SkeletonApiData } from './SkeletonApi' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' + +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents @@ -22,14 +20,6 @@ The Default Skeleton component provides a visual placeholder that mimics the app -## Skeleton Layout - -With the `` component, you can create various layout structures to match your design. This example showcases one possible skeleton layout, but you can tailor it to your specific requirements. - - - - - ## Comment Layout The Comment Layout skeleton mimics a comment structure with a larger line, an avatar-like circle, and a description skeleton. You can customize this layout to fit your design seamlessly. @@ -38,14 +28,6 @@ The Comment Layout skeleton mimics a comment structure with a larger line, an av -## Post Skeleton - -The Post Skeleton demonstrates a skeleton representing a post-like structure, ideal for showcasing loading placeholders in a social media or content platform. - - - - - ## Paragraph Skeleton The Paragraph Skeleton incorporates multiple lines of skeleton components, resembling a paragraph. It's a versatile choice for loading various content blocks. @@ -54,12 +36,12 @@ The Paragraph Skeleton incorporates multiple lines of skeleton components, resem -## Skeleton With Animation +## Post Skeleton -To enhance the loading experience, you can add animation to the skeleton component by using the `animation={true}` props. +The Post Skeleton demonstrates a skeleton representing a post-like structure, ideal for showcasing loading placeholders in a social media or content platform. - - + + ## API Reference diff --git a/app/docs/components/skeleton/SkeletonApi.ts b/app/docs/components/skeleton/SkeletonApi.ts index 7c18888f..fb7db6ae 100644 --- a/app/docs/components/skeleton/SkeletonApi.ts +++ b/app/docs/components/skeleton/SkeletonApi.ts @@ -13,11 +13,4 @@ export const SkeletonApiData = [ propsDescription: 'Skeleton Content', default: 'Content', }, - { - id: 3, - propsName: 'height', - propsType: 'string', - propsDescription: 'Skeleton item height', - default: 'h-4', - }, ] diff --git a/app/docs/components/skeleton/variant/CommentLayout.tsx b/app/docs/components/skeleton/variant/CommentLayout.tsx index 2154a219..64a4bba8 100644 --- a/app/docs/components/skeleton/variant/CommentLayout.tsx +++ b/app/docs/components/skeleton/variant/CommentLayout.tsx @@ -3,42 +3,30 @@ import { Skeleton } from '../../../../src' const CommentLayout = () => { return ( -
- - -
-
- -
-
- -
-
- -
+ + +
+ + +
+ ) } const CommentLayoutCode = ` -"use client"; -import { Skeleton } from "keep-react"; +'use client' +import { Skeleton } from 'keep-react' export const SkeletonComponent = () => { return ( -
- - -
-
- -
-
- -
-
- -
- ); + + +
+ + +
+ + ) } ` diff --git a/app/docs/components/skeleton/variant/DefaultSkeleton.tsx b/app/docs/components/skeleton/variant/DefaultSkeleton.tsx index 9b2125cb..905b74dc 100644 --- a/app/docs/components/skeleton/variant/DefaultSkeleton.tsx +++ b/app/docs/components/skeleton/variant/DefaultSkeleton.tsx @@ -3,26 +3,30 @@ import { Skeleton } from '../../../../src' const DefaultSkeleton = () => { return ( -
- - - -
+ + + + + + + ) } const DefaultSkeletonCode = ` -"use client"; -import { Skeleton } from "keep-react"; +'use client' +import { Skeleton } from 'keep-react' export const SkeletonComponent = () => { return ( -
- - - -
- ); + + + + + + + + ) } ` diff --git a/app/docs/components/skeleton/variant/ParagraphSkeleton.tsx b/app/docs/components/skeleton/variant/ParagraphSkeleton.tsx index cc75b98c..d504ff80 100644 --- a/app/docs/components/skeleton/variant/ParagraphSkeleton.tsx +++ b/app/docs/components/skeleton/variant/ParagraphSkeleton.tsx @@ -3,22 +3,12 @@ import { Skeleton } from '../../../../src' const ParagraphSkeleton = () => { return ( -
- -
- -
-
- -
-
- -
-
- -
- -
+ + + + + + ) } @@ -28,23 +18,13 @@ import { Skeleton } from "keep-react"; export const SkeletonComponent = () => { return ( -
- -
- -
-
- -
-
- -
-
- -
- -
- ); + + + + + + + ) } ` diff --git a/app/docs/components/skeleton/variant/PostSkeleton.tsx b/app/docs/components/skeleton/variant/PostSkeleton.tsx index c69e807c..ecfc1105 100644 --- a/app/docs/components/skeleton/variant/PostSkeleton.tsx +++ b/app/docs/components/skeleton/variant/PostSkeleton.tsx @@ -3,72 +3,48 @@ import { Skeleton } from '../../../../src' const PostSkeleton = () => { return ( -
- -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
+
+ + + + + + + + + + + + +
) } const PostSkeletonCode = ` -"use client"; -import { Skeleton } from "keep-react"; +'use client' +import { Skeleton } from 'keep-react' export const SkeletonComponent = () => { return ( -
- -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
+
+ + + + + + + + + + + + +
- ); + ) } ` diff --git a/app/docs/components/skeleton/variant/SkeletonLayout.tsx b/app/docs/components/skeleton/variant/SkeletonLayout.tsx deleted file mode 100644 index 69777ed5..00000000 --- a/app/docs/components/skeleton/variant/SkeletonLayout.tsx +++ /dev/null @@ -1,39 +0,0 @@ -'use client' -import { Skeleton } from '../../../../src' - -const SkeletonLayout = () => { - return ( -
- - -
- - -
- - -
- ) -} - -const SkeletonLayoutCode = ` -"use client"; -import { Skeleton } from "keep-react"; - -export const SkeletonComponent = () => { - return ( -
- - -
- - -
- - -
- ); -} -` - -export { SkeletonLayout, SkeletonLayoutCode } diff --git a/app/docs/components/skeleton/variant/SkeletonWithAnimation.tsx b/app/docs/components/skeleton/variant/SkeletonWithAnimation.tsx deleted file mode 100644 index ff6b8cc4..00000000 --- a/app/docs/components/skeleton/variant/SkeletonWithAnimation.tsx +++ /dev/null @@ -1,74 +0,0 @@ -'use client' -import { Skeleton } from '../../../../src' - -const SkeletonWithAnimation = () => { - return ( -
- -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- -
- ) -} - -const SkeletonWithAnimationCode = ` -"use client"; -import { Skeleton } from "keep-react"; - -export const SkeletonComponent = () => { - return ( -
- -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- -
- ); -} -` -export { SkeletonWithAnimation, SkeletonWithAnimationCode } diff --git a/app/docs/components/slider/Slider.mdx b/app/docs/components/slider/Slider.mdx index f62c8abb..1579ff93 100644 --- a/app/docs/components/slider/Slider.mdx +++ b/app/docs/components/slider/Slider.mdx @@ -4,9 +4,9 @@ import { SliderTooltipPosition, SliderTooltipPositionCode } from './variant/Slid import { SliderWithMarks, SliderWithMarksCode } from './variant/SliderWithMarks' import { sliderAPIData } from './SliderApi' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' + +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents diff --git a/app/docs/components/slider/variant/DefaultSlider.tsx b/app/docs/components/slider/variant/DefaultSlider.tsx index b768c7c1..3fae2f22 100644 --- a/app/docs/components/slider/variant/DefaultSlider.tsx +++ b/app/docs/components/slider/variant/DefaultSlider.tsx @@ -1,7 +1,9 @@ 'use client' -import { Slider } from '../../../../src' +import { useState } from 'react' +import { Button, Slider } from '../../../../src' const DefaultSlider = () => { + const [value, setValue] = useState([]) return (
{ defaultValue={[100, 300]} tooltip="top" range={true} - onChange={(value: number | number[]) => console.log(value)} - /> + onChange={(value: number | number[]) => setValue(value)}> + {Array.isArray(value) && ( + + + + + )} +
) } const DefaultSliderCode = ` -"use client"; -import { Slider } from "keep-react"; +'use client' +import { useState } from 'react' +import { Button, Slider } from 'keep-react' export const SliderComponent = () => { + const [value, setValue] = useState([]) return ( console.log(value)} - /> - ); + range={true} + onChange={(value) => setValue(value)}> + {Array.isArray(value) && ( + + + + + )} + + ) } ` diff --git a/app/docs/components/spinner/spinner.mdx b/app/docs/components/spinner/spinner.mdx index 19c462db..f32a9481 100644 --- a/app/docs/components/spinner/spinner.mdx +++ b/app/docs/components/spinner/spinner.mdx @@ -4,9 +4,9 @@ import { SpinnerSizesCode, SpinnerSizes } from './variant/SpinnerSizes' import { SpinnerButton, SpinnerButtonCode } from './variant/SpinnerButton' import { SpinnerApiData } from './spinnerApi' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' + +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents diff --git a/app/docs/components/spinner/variant/SpinnerButton.tsx b/app/docs/components/spinner/variant/SpinnerButton.tsx index 16986a5c..69a06455 100644 --- a/app/docs/components/spinner/variant/SpinnerButton.tsx +++ b/app/docs/components/spinner/variant/SpinnerButton.tsx @@ -4,13 +4,13 @@ import { Button, Spinner } from '../../../../src' const SpinnerButton = () => { return (
- - -
@@ -77,7 +77,7 @@ export const StepComponent = () => {
-
@@ -33,7 +28,7 @@ const BorderedTable = () => { -

Type

+

Type

 Status Role @@ -43,401 +38,67 @@ const BorderedTable = () => { - - -
-
-
- -
-

Ralph Edwards

- &ralph -
-
-
-
- - - - Active - - - -

UI/UX Designer

- - nevaeh.simmons@example.com - -
- - Product - - - Marketing - - - +3 - -
- - -
-
- -
-
- - - - 20% -
-
- - - - -
    -
  • - -
    • -
  • - -
    • -
- - - - - - - - - -
-
-
- -
-

Wade Warren

- &ralph + {DefaultTableData.map((cell) => ( + + +
+
+
+ +
+

{cell.name}

+ {cell.tag} +
-
- - - - Offline - - - -

Scrum Master

- - curtis.weaver@example.com - -
- - Product - - - Marketing - - - +3 - -
- - -
-
- -
+ + + {cell.status ? ( + + Active + + ) : ( + + Offline + + )} + + {cell.position} + {cell.email} +
- - - - 20% -
-
- - - - -
    -
  • - -
    • -
  • - -
    • -
- - - - - - - - - -
-
-
- -
-

Eleanor Pena

- &ralph -
-
-
-
- - - - Active - - - -

Software Tester

- - nathan.roberts@example.com - -
- - Product - - - Marketing - - - +3 - -
- - -
-
- -
-
- - - - 30% -
-
- - - - -
    -
  • - -
    • -
  • - -
    • -
- - - - - - - - - -
-
-
- -
-

Jerome Bell

- &ralph -
+ {cell.tags.map((tag, index, arr) => + index === arr.length - 1 ? ( + + {tag} + + ) : ( + {tag} + ), + )} +
+ + +
+
+
-
-
- - - - Offline - - - -

JS Developer

- - arif.jsdev@example.com - -
- - Javascript - - - React - - - +7 - -
- - -
-
- -
-
- - - - 50% -
-
- - - - -
    -
  • - -
    • -
  • - -
    • -
- - - - - - - - - -
-
-
- -
-

Macky Scheman

- &ralph -
+
+ + + + {cell.performance}%
-
- - - - Active - - - -

Web Developer

- - macky.jsdev@example.com - -
- - Adobe - - - Figma - - - +6 - -
- - -
-
- -
-
- - - - 40% -
-
- - - - -
    -
  • - -
    • -
  • - -
    • -
- - - - - - - + + + + + + ))}
+ Property DescriptionType + DescriptionType Default
+ {item.propsName} + {item.propsDescription} + {typeof item.propsType === 'string' ? item.propsType : item.propsType.map((prop) => ( - 
+                        
                           {prop}
                         

                       ))}
+ {item.default ? item.default : 'None'}
@@ -457,21 +118,17 @@ export const TableComponent = () => {

Team member

- + 100 Member
- -
@@ -479,7 +136,7 @@ export const TableComponent = () => { -

Type

+

Type

 Status Role @@ -494,7 +151,7 @@ export const TableComponent = () => {
- +

Ralph Edwards

&ralph @@ -504,7 +161,7 @@ export const TableComponent = () => {
- + Active @@ -514,15 +171,9 @@ export const TableComponent = () => { nevaeh.simmons@example.com
- - Product - - - Marketing - - - +3 - + Product + Marketing + +3
@@ -539,349 +190,9 @@ export const TableComponent = () => {
- - -
    -
  • - -
    • -
  • - -
    • -
- - - - - - - - - -
-
-
- -
-

Wade Warren

- &ralph -
-
-
-
- - - - Offline - - - -

Scrum Master

- - curtis.weaver@example.com - -
- - Product - - - Marketing - - - +3 - -
- - -
-
- line -
-
- - - - 20% -
-
- - - - -
    -
  • - -
    • -
  • - -
    • -
- - - - - - - - - -
-
-
- -
-

Eleanor Pena

- &ralph -
-
-
-
- - - - Active - - - -

Software Tester

- - nathan.roberts@example.com - -
- - Product - - - Marketing - - - +3 - -
- - -
-
- line -
-
- - - - 30% -
-
- - - - -
    -
  • - -
    • -
  • - -
    • -
- - - - - - - - - -
-
-
- -
-

Jerome Bell

- &ralph -
-
-
-
- - - - Offline - - - -

JS Developer

- - arif.jsdev@example.com - -
- - Javascript - - - React - - - +7 - -
- - -
-
- line -
-
- - - - 50% -
-
- - - - -
    -
  • - -
    • -
  • - -
    • -
- - - - - - - - - -
-
-
- -
-

Macky Scheman

- &ralph -
-
-
-
- - - - Active - - - -

Web Developer

- - macky.jsdev@example.com - -
- - Adobe - - - Figma - - - +6 - -
- - -
-
- line -
-
- - - - 40% -
-
- - - - -
    -
  • - -
    • -
  • - -
    • -
- - - - - + diff --git a/app/docs/components/table/variant/DefaultTable.tsx b/app/docs/components/table/variant/DefaultTable.tsx index 1ff57a03..b6fc4ce5 100644 --- a/app/docs/components/table/variant/DefaultTable.tsx +++ b/app/docs/components/table/variant/DefaultTable.tsx @@ -1,7 +1,8 @@ 'use client' import Image from 'next/image' -import { Avatar, Badge, Button, Popover, Table } from '../../../../src' -import { ArrowDown, Cube, DotsThreeOutline, Pencil, Trash } from 'phosphor-react' +import { ArrowDown, Cube, DotsThreeOutline } from 'phosphor-react' +import { DefaultTableData } from '~/public/data/tableData' +import { Avatar, Badge, Button, Table } from '../../../../src' const DefaultTable = () => { return ( @@ -11,18 +12,18 @@ const DefaultTable = () => {

Team member

- + 100 Member
- - - -
  • - -
    • - - - - - - - - - - -
    -
    -
    - -
    -

    Wade Warren

    - &ralph -
    -
    -
    -
    -     - - - Offline - - - -

    Scrum Master

    -     - curtis.weaver@example.com - -
    - - Product - - - Marketing - - - +3 - -
    -     - -
    -
    - line -
    -
    - - - - 20% -
    -
    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Eleanor Pena

    - &ralph -
    -
    -
    -
    -     - - - Active - - - -

    Software Tester

    -     - nathan.roberts@example.com - -
    - - Product - - - Marketing - - - +3 - -
    -     - -
    -
    - line -
    + + + {cell.status ? ( + + Active + + ) : ( + + Offline + + )} + + {cell.position} + {cell.email} +
    - - - - 30% -
    -
    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Jerome Bell

    - &ralph -
    + {cell.tags.map((tag, index, arr) => + index === arr.length - 1 ? ( + + {tag} + + ) : ( + {tag} + ), + )} +
    + + +
    +
    + line
    -
    -
    - - - - Offline - - - -

    JS Developer

    -     - arif.jsdev@example.com - -
    - - Javascript - - - React - - - +7 - -
    -     - -
    -
    - line -
    -
    - - - - 50% -
    -
    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     - - - -
    -
    -
    - -
    -

    Macky Scheman

    - &ralph -
    +
    + + + + {cell.performance}%
    -
    - - - - Active - - - -

    Web Developer

    -     - macky.jsdev@example.com - -
    - - Adobe - - - Figma - - - +6 - -
    -     - -
    -
    - line -
    -
    - - - - 40% -
    -
    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     - + + + + + + ))}
    @@ -448,13 +115,7 @@ const DefaultTableCode = ` "use client"; import Image from "next/image"; import { Avatar, Badge, Button, Popover, Table } from "keep-react"; -import { - ArrowDown, - Cube, - DotsThreeOutline, - Pencil, - Trash, -} from "phosphor-react"; +import { ArrowDown, Cube, DotsThreeOutline, Pencil, Trash } from "phosphor-react"; export const TableComponent = () => { return ( @@ -463,18 +124,16 @@ export const TableComponent = () => {

    Team member

    - - 100 Member - + 100 Member
    - - - -
  • - -
    • - - - - - - - - - - -
    -
    -
    - -
    -

    Wade Warren

    - &ralph -
    -
    -
    -
    -     - - - Offline - - - -

    Scrum Master

    -     - curtis.weaver@example.com - -
    - - Product - - - Marketing - - - +3 - -
    -     - -
    -
    - line -
    -
    - - - - 20% -
    -
    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Eleanor Pena

    - &ralph -
    -
    -
    -
    -     - - - Active - - - -

    Software Tester

    -     - nathan.roberts@example.com - -
    - - Product - - - Marketing - - - +3 - -
    -     - -
    -
    - line -
    -
    - - - - 30% -
    -
    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Jerome Bell

    - &ralph -
    -
    -
    -
    -     - - - Offline - - - -

    JS Developer

    -     - arif.jsdev@example.com - -
    - - Javascript - - - React - - - +7 - -
    -     - -
    -
    - line -
    -
    - - - - 50% -
    -
    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Macky Scheman

    - &ralph -
    -
    -
    -
    -     - - - Active - - - -

    Web Developer

    -     - macky.jsdev@example.com - -
    - - Adobe - - - Figma - - - +6 - -
    -     - -
    -
    - line -
    -
    - - - - 40% -
    -
    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     +     diff --git a/app/docs/components/table/variant/FilesUploadedTable.tsx b/app/docs/components/table/variant/FilesUploadedTable.tsx index e9c1e9b0..72a44df2 100644 --- a/app/docs/components/table/variant/FilesUploadedTable.tsx +++ b/app/docs/components/table/variant/FilesUploadedTable.tsx @@ -1,6 +1,7 @@ 'use client' -import { Avatar, Button, Table, Popover } from '../../../../src' -import { Cube, DotsThreeOutline, Pencil, Trash } from 'phosphor-react' +import { Cube, DotsThreeOutline } from 'phosphor-react' +import { FileUploadTableData } from '~/public/data/tableData' +import { Avatar, Button, Table } from '../../../../src' const FilesUploadedTable = () => { return ( @@ -12,13 +13,13 @@ const FilesUploadedTable = () => {

    Files uploaded

    - - - -
  • - -
    • - - - - - - - - - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    700 KB

    -
    -
    -
    -
    -     - -

    Total 0.7 MB

    -

    700 KB

    -     - -

    Jan 12, 2023

    -

    4:12 pm

    -     - -

    Jan 15, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    500 KB

    -
    -
    -
    -
    -     - -

    Total 0.5 MB

    -

    500 KB

    -     - -

    Nov 23, 2023

    -

    02:45 pm

    -     - -

    Nov 10, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    900 KB

    -
    -
    -
    -
    -     - -

    Total 0.9 MB

    -

    900 KB

    -     - -

    Feb 21, 2023

    -

    3:45 pm

    -     - -

    Jan 10, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    200 KB

    -
    -
    -
    -
    -     - -

    Total 0.1 MB

    -

    100 KB

    -     - -

    Mar 25, 2023

    -

    8:45 pm

    -     - -

    Apr 10, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     + + +

    {cell.totalSize}

    +

    {cell.fileSize}

    +     + +

    {cell.date}

    +

    {cell.time}

    +     + +

    {cell.date}

    +     + + + + + + + + +9 + + + + + + + ))}
    @@ -388,13 +102,13 @@ export const TableComponent = () => {

    Files uploaded

    - -
    @@ -430,318 +144,29 @@ export const TableComponent = () => {

    Total 0.2 MB

    -

    200 KB

    +

    200 KB

    Jan 10, 2023

    -

    4:45 pm

    +

    4:45 pm

    Jan 10, 2023

     - - - - - - - + + + + + + +9 - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    700 KB

    -
    -
    -
    -
    -     - -

    Total 0.7 MB

    -

    700 KB

    -     - -

    Jan 12, 2023

    -

    4:12 pm

    -     - -

    Jan 15, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    500 KB

    -
    -
    -
    -
    -     - -

    Total 0.5 MB

    -

    500 KB

    -     - -

    Nov 23, 2023

    -

    02:45 pm

    -     - -

    Nov 10, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    900 KB

    -
    -
    -
    -
    -     - -

    Total 0.9 MB

    -

    900 KB

    -     - -

    Feb 21, 2023

    -

    3:45 pm

    -     - -

    Jan 10, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    200 KB

    -
    -
    -
    -
    -     - -

    Total 0.1 MB

    -

    100 KB

    -     - -

    Mar 25, 2023

    -

    8:45 pm

    -     - -

    Apr 10, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     +     diff --git a/app/docs/components/table/variant/HoverableTable.tsx b/app/docs/components/table/variant/HoverableTable.tsx index f454ccf4..8f91e060 100644 --- a/app/docs/components/table/variant/HoverableTable.tsx +++ b/app/docs/components/table/variant/HoverableTable.tsx @@ -1,6 +1,8 @@ 'use client' -import { Avatar, Button, Table, Popover } from '../../../../src' -import { Cube, DotsThreeOutline, Trash, Pencil } from 'phosphor-react' +import Image from 'next/image' +import { ArrowDown, Cube, DotsThreeOutline } from 'phosphor-react' +import { DefaultTableData } from '~/public/data/tableData' +import { Avatar, Badge, Button, Table } from '../../../../src' const HoverableTable = () => { return ( @@ -9,16 +11,19 @@ const HoverableTable = () => {
    -

    Files uploaded

    +

    Team member

    + + 100 Member +
    - -
    - -

    File no.

    + +

    Type

     - File size - Date uploaded - Last uploaded - Team + Status + Role + Email Address + Team + Performance     - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    200 KB

    + {DefaultTableData.map((cell) => ( + + +
    +
    +
    + +
    +

    {cell.name}

    + {cell.tag} +
    -
    - - -

    Total 0.2 MB

    -

    200 KB

    -     - -

    Jan 10, 2023

    -

    4:45 pm

    -     - -

    Jan 10, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     - - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    700 KB

    -
    -
    -
    -
    -     - -

    Total 0.7 MB

    -

    700 KB

    -     - -

    Jan 12, 2023

    -

    4:12 pm

    -     - -

    Jan 15, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    500 KB

    -
    -
    + + + {cell.status ? ( + + Active + + ) : ( + + Offline + + )} + + {cell.position} + {cell.email} + +
    + {cell.tags.map((tag, index, arr) => + index === arr.length - 1 ? ( + + {tag} + + ) : ( + + {tag} + + ), + )}
    -
    - - -

    Total 0.5 MB

    -

    500 KB

    -     - -

    Nov 23, 2023

    -

    02:45 pm

    -     - -

    Nov 10, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     - - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    900 KB

    -
    + + +
    +
    + line
    -
    -
    - - -

    Total 0.9 MB

    -

    900 KB

    -     - -

    Feb 21, 2023

    -

    3:45 pm

    -     - -

    Jan 10, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     - - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    200 KB

    -
    +
    + + + + {cell.performance}%
    -
    - - -

    Total 0.1 MB

    -

    100 KB

    -     - -

    Mar 25, 2023

    -

    8:45 pm

    -     - -

    Apr 10, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     - + + + + + + ))}
    @@ -376,8 +115,9 @@ const HoverableTable = () => { const HoverableTableCode = ` "use client"; -import { Avatar, Button, Table, Popover } from "keep-react"; -import { Cube, DotsThreeOutline, Trash, Pencil } from "phosphor-react"; +import Image from "next/image"; +import { Avatar, Badge, Button, Popover, Table } from "keep-react"; +import { ArrowDown, Cube, DotsThreeOutline, Pencil, Trash } from "phosphor-react"; export const TableComponent = () => { return ( @@ -385,16 +125,19 @@ export const TableComponent = () => {
    -

    Files uploaded

    +

    Team member

    + + 100 Member +
    - -
    - -

    File no.

    + +

    Type

     - File size - Date uploaded - Last uploaded - Team + Status + Role + Email Address + Team + Performance     @@ -419,329 +163,54 @@ export const TableComponent = () => {
    - +
    -

    Static Next Plan.pdf

    -

    200 KB

    +

    Ralph Edwards

    + &ralph
    -

    Total 0.2 MB

    -

    200 KB

    -     - -

    Jan 10, 2023

    -

    4:45 pm

    + + Active +     -

    Jan 10, 2023

    +

    UI/UX Designer

     + nevaeh.simmons@example.com - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     - - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    700 KB

    -
    -
    -
    +
    + + Product + + + Marketing + + + +3 +
    - -

    Total 0.7 MB

    -

    700 KB

    -     - -

    Jan 12, 2023

    -

    4:12 pm

    -     - -

    Jan 15, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    500 KB

    -
    -
    +
    + line
    -
    - - -

    Total 0.5 MB

    -

    500 KB

    -     - -

    Nov 23, 2023

    -

    02:45 pm

    -     - -

    Nov 10, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     - - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    900 KB

    -
    -
    -
    -
    -     - -

    Total 0.9 MB

    -

    900 KB

    -     - -

    Feb 21, 2023

    -

    3:45 pm

    -     - -

    Jan 10, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    200 KB

    -
    -
    +
    + + + + 20%
    -

    Total 0.1 MB

    -

    100 KB

    -     - -

    Mar 25, 2023

    -

    8:45 pm

    -     - -

    Apr 10, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     +     diff --git a/app/docs/components/table/variant/OrdersTable.tsx b/app/docs/components/table/variant/OrdersTable.tsx index 0911a061..dea31b87 100644 --- a/app/docs/components/table/variant/OrdersTable.tsx +++ b/app/docs/components/table/variant/OrdersTable.tsx @@ -1,19 +1,8 @@ 'use client' import Image from 'next/image' -import { Badge, Button, Popover, Table } from '../../../../src' -import { - CalendarBlank, - Crown, - Cube, - CurrencyDollar, - DotsNine, - DotsThreeOutline, - Flag, - Pencil, - Spinner, - Tag, - Trash, -} from 'phosphor-react' +import { CalendarBlank, Cube, CurrencyDollar, DotsNine, DotsThreeOutline, Flag, Spinner, Tag } from 'phosphor-react' +import { OrderTableData } from '~/public/data/tableData' +import { Badge, Button, Table } from '../../../../src' const OrdersTable = () => { return ( @@ -25,13 +14,13 @@ const OrdersTable = () => {

    Orders

    - - - -
  • - -
    • - - - - - - - - - - -

    DL - 34233451

    -     - -

    Jan 23, 2022

    -

    4:45 pm

    -     - - country - - -
    - } iconPosition="left"> - Delivered - -
    -     - -

    6

    -     - -

    $13,000

    -     - -

    19 Great North Road, Grey Lynn

    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -

    DL - 19266567

    -     - -

    Jan 31, 2022

    -

    5:45 pm

    -     - - country - - -
    - } iconPosition="left"> - Pending - -
    -     - -

    8

    -     - -

    $24,000

    -     - -

    19 Great North Road, Grey Lynn

    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -

    DL - 19266755

    -     - -

    Jan 19, 2022

    -

    3:45 pm

    -     - - country - - -
    - } iconPosition="left"> - Delivered - -
    -     - -

    9

    -     - -

    $82,000

    -     - -

    686 Great South Road, Manukau

    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -

    DL - 19264155

    -     - -

    Jan 07, 2022

    -

    02:45 pm

    -     - - country - - -
    - } iconPosition="left"> - Pending - -
    -     - -

    3

    -     - -

    $21,000

    -     - -

    20 Poland Road, Wairau Valley

    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -

    DL - 19266755

    -     - -

    Jan 19, 2022

    -

    3:45 pm

    -     - - country - - -
    - } iconPosition="left"> - Delivered - -
    -     - -

    3

    -     - -

    $21,000

    -     - -

    285 Great North Road, Grey Lynn.

    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     + {OrderTableData.map((cell) => ( + + +

    {cell.orderNo}

    +     + +

    {cell.date}

    +

    {cell.time}

    +     + + country + + +
    + Delivered +
    +     + +

    {cell.quantity}

    +     + +

    ${cell.amount}

    +     + +

    {cell.location}

    +     + + + +     + ))}
    @@ -446,13 +126,13 @@ export const TableComponent = () => {

    Orders

    - - - -
  • - -
    • - - - - - - - - - - -

    DL - 34233451

    -     - -

    Jan 23, 2022

    -

    4:45 pm

    -     - - country - - -
    - } iconPosition="left"> - Delivered - -
    -     - -

    6

    -     - -

    $13,000

    -     - -

    19 Great North Road, Grey Lynn

    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -

    DL - 19266567

    -     - -

    Jan 31, 2022

    -

    5:45 pm

    -     - - country - - -
    - } iconPosition="left"> - Pending - -
    -     - -

    8

    -     - -

    $24,000

    -     - -

    19 Great North Road, Grey Lynn

    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -

    DL - 19266755

    -     - -

    Jan 19, 2022

    -

    3:45 pm

    -     - - country - - -
    - } iconPosition="left"> - Delivered - -
    -     - -

    9

    -     - -

    $82,000

    -     - -

    686 Great South Road, Manukau

    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -

    DL - 19264155

    -     - -

    Jan 07, 2022

    -

    02:45 pm

    -     - - country - - -
    - } iconPosition="left"> - Pending - -
    -     - -

    3

    -     - -

    $21,000

    -     - -

    20 Poland Road, Wairau Valley

    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -

    DL - 19266755

    -     - -

    Jan 19, 2022

    -

    3:45 pm

    -     - - country - - -
    - } iconPosition="left"> - Delivered - -
    -     - -

    3

    -     - -

    $21,000

    -     - -

    285 Great North Road, Grey Lynn.

    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     +     diff --git a/app/docs/components/table/variant/StripedTable.tsx b/app/docs/components/table/variant/StripedTable.tsx index 87f5948d..9e14802e 100644 --- a/app/docs/components/table/variant/StripedTable.tsx +++ b/app/docs/components/table/variant/StripedTable.tsx @@ -1,6 +1,8 @@ 'use client' -import { Avatar, Button, Popover, Table } from '../../../../src' -import { Cube, DotsThreeOutline, Pencil, Trash } from 'phosphor-react' +import Image from 'next/image' +import { ArrowDown, Cube, DotsThreeOutline } from 'phosphor-react' +import { DefaultTableData } from '~/public/data/tableData' +import { Avatar, Badge, Button, Table } from '../../../../src' const StripedTable = () => { return ( @@ -9,16 +11,19 @@ const StripedTable = () => {
    -

    Files uploaded

    +

    Team member

    + + 100 Member +
    - -
    - -

    File no.

    + +

    Type

     - File size - Date uploaded - Last uploaded - Team + Status + Role + Email Address + Team + Performance     - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    200 KB

    + {DefaultTableData.map((cell) => ( + + +
    +
    +
    + +
    +

    {cell.name}

    + {cell.tag} +
    -
    - - -

    Total 0.2 MB

    -

    200 KB

    -     - -

    Jan 10, 2023

    -

    4:45 pm

    -     - -

    Jan 10, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     - - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    700 KB

    -
    -
    -
    -
    -     - -

    Total 0.7 MB

    -

    700 KB

    -     - -

    Jan 12, 2023

    -

    4:12 pm

    -     - -

    Jan 15, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    500 KB

    -
    -
    + + + {cell.status ? ( + + Active + + ) : ( + + Offline + + )} + + {cell.position} + {cell.email} + +
    + {cell.tags.map((tag, index, arr) => + index === arr.length - 1 ? ( + + {tag} + + ) : ( + + {tag} + + ), + )}
    -
    - - -

    Total 0.5 MB

    -

    500 KB

    -     - -

    Nov 23, 2023

    -

    02:45 pm

    -     - -

    Nov 10, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     - - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    900 KB

    -
    + + +
    +
    + line
    -
    -
    - - -

    Total 0.9 MB

    -

    900 KB

    -     - -

    Feb 21, 2023

    -

    3:45 pm

    -     - -

    Jan 10, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     - - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    200 KB

    -
    +
    + + + + {cell.performance}%
    -
    - - -

    Total 0.1 MB

    -

    100 KB

    -     - -

    Mar 25, 2023

    -

    8:45 pm

    -     - -

    Apr 10, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     - + + + + + + ))}
    @@ -376,8 +115,9 @@ const StripedTable = () => { const StripedTableCode = ` "use client"; -import { Avatar, Button, Popover, Table } from "keep-react"; -import { Cube, DotsThreeOutline, Pencil, Trash } from "phosphor-react"; +import Image from "next/image"; +import { Avatar, Badge, Button, Popover, Table } from "keep-react"; +import { ArrowDown, Cube, DotsThreeOutline, Pencil, Trash } from "phosphor-react"; export const TableComponent = () => { return ( @@ -385,16 +125,19 @@ export const TableComponent = () => {
    -

    Files uploaded

    +

    Team member

    + + 100 Member +
    - -
    - -

    File no.

    + +

    Type

     - File size - Date uploaded - Last uploaded - Team + Status + Role + Email Address + Team + Performance     @@ -419,329 +163,54 @@ export const TableComponent = () => {
    - +
    -

    Static Next Plan.pdf

    -

    200 KB

    +

    Ralph Edwards

    + &ralph
    -

    Total 0.2 MB

    -

    200 KB

    -     - -

    Jan 10, 2023

    -

    4:45 pm

    + + Active +     -

    Jan 10, 2023

    +

    UI/UX Designer

     + nevaeh.simmons@example.com - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     - - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    700 KB

    -
    -
    -
    +
    + + Product + + + Marketing + + + +3 +
    - -

    Total 0.7 MB

    -

    700 KB

    -     - -

    Jan 12, 2023

    -

    4:12 pm

    -     - -

    Jan 15, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    500 KB

    -
    -
    +
    + line
    -
    - - -

    Total 0.5 MB

    -

    500 KB

    -     - -

    Nov 23, 2023

    -

    02:45 pm

    -     - -

    Nov 10, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     - - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    900 KB

    -
    -
    -
    -
    -     - -

    Total 0.9 MB

    -

    900 KB

    -     - -

    Feb 21, 2023

    -

    3:45 pm

    -     - -

    Jan 10, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Static Next Plan.pdf

    -

    200 KB

    -
    -
    +
    + + + + 20%
    -

    Total 0.1 MB

    -

    100 KB

    -     - -

    Mar 25, 2023

    -

    8:45 pm

    -     - -

    Apr 10, 2023

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     +     diff --git a/app/docs/components/table/variant/TableActionBtn.tsx b/app/docs/components/table/variant/TableActionBtn.tsx new file mode 100644 index 00000000..9dd46465 --- /dev/null +++ b/app/docs/components/table/variant/TableActionBtn.tsx @@ -0,0 +1,37 @@ +'use client' +import { DotsThreeOutline, Pencil, Trash } from 'phosphor-react' +import { Button, Popover } from '~/app/src' + +const TableActionBtn = () => { + return ( + + +
      +
    • + +
      • +
    • + +
      • +
    +     + + + +     + ) +} + +export default TableActionBtn diff --git a/app/docs/components/table/variant/TransactionsTable.tsx b/app/docs/components/table/variant/TransactionsTable.tsx index 5d9c3996..f58f2a75 100644 --- a/app/docs/components/table/variant/TransactionsTable.tsx +++ b/app/docs/components/table/variant/TransactionsTable.tsx @@ -1,6 +1,7 @@ 'use client' -import { Avatar, Badge, Button, Popover, Table } from '../../../../src' -import { ArrowsDownUp, Crown, Cube, DotsThreeOutline, Pencil, Trash } from 'phosphor-react' +import { ArrowsDownUp, Cube, DotsThreeOutline } from 'phosphor-react' +import { TransactionsTableData } from '~/public/data/tableData' +import { Avatar, Badge, Button, Table } from '../../../../src' const TransactionsTable = () => { return ( @@ -12,13 +13,13 @@ const TransactionsTable = () => {

    Cash Out Transactions

    - - - -
  • - -
    • - - - - - - - - - - -
    -
    -
    - -
    -

    Visa

    - Withdraw -
    -
    + + +

    {cell.date}

    +

    {cell.time}

    +     + +

    ${cell.amount}

    +     + +
    + Delivered
    -
    - - -

    Jan 10, 2023

    -

    4:45 pm

    -     - -

    $534.00

    -     - -
    - } iconPosition="left"> - Delivered - -
    -     - -

    Jan 19, 2022

    -

    3:45 pm

    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     - - - -
    -
    -
    - -
    -

    Stripe

    - Withdraw -
    -
    -
    -
    -     - -

    Mar 12, 2023

    -

    4:00 pm

    -     - -

    $123.00

    -     - -
    - } iconPosition="left"> - Delivered - -
    -     - -

    Jan 19, 2022

    -

    3:45 pm

    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Western Union

    - Withdraw -
    -
    -
    -
    -     - -

    Nov 23, 2023

    -

    5:30 pm

    -     - -

    $434.00

    -     - -
    - } iconPosition="left"> - Delivered - -
    -     - -

    Jan 19, 2022

    -

    3:45 pm

    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Mastercard

    - Withdraw -
    -
    -
    -
    -     - -

    Apr 23, 2023

    -

    7:30 pm

    -     - -

    $786.00

    -     - -
    - } iconPosition="left"> - Delivered - -
    -     - -

    Jan 19, 2022

    -

    3:45 pm

    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     + + +

    {cell.date}

    +

    {cell.time}

    +     + + + + + ))}
    @@ -376,13 +105,13 @@ export const TableComponent = () => {

    Cash Out Transactions

    - - - -
  • - -
    • - - - - - - +

    3:45 pm

    - - -
    -
    -
    - -
    -

    Visa

    - Withdraw -
    -
    -
    -
    -     - -

    Jan 10, 2023

    -

    4:45 pm

    -     - -

    $534.00

    -     - -
    - } iconPosition="left"> - Delivered - -
    -     - -

    Jan 19, 2022

    -

    3:45 pm

    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Stripe

    - Withdraw -
    -
    -
    -
    -     - -

    Mar 12, 2023

    -

    4:00 pm

    -     - -

    $123.00

    -     - -
    - } iconPosition="left"> - Delivered - -
    -     - -

    Jan 19, 2022

    -

    3:45 pm

    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Western Union

    - Withdraw -
    -
    -
    -
    -     - -

    Nov 23, 2023

    -

    5:30 pm

    -     - -

    $434.00

    -     - -
    - } iconPosition="left"> - Delivered - -
    -     - -

    Jan 19, 2022

    -

    3:45 pm

    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     -     -     - - -
    -
    -
    - -
    -

    Mastercard

    - Withdraw -
    -
    -
    -
    -     - -

    Apr 23, 2023

    -

    7:30 pm

    -     - -

    $786.00

    -     - -
    - } iconPosition="left"> - Delivered - -
    -     - -

    Jan 19, 2022

    -

    3:45 pm

    -     - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     +     diff --git a/app/docs/components/tabs/page.tsx b/app/docs/components/tabs/page.tsx index 0ffa99be..e46c6d55 100644 --- a/app/docs/components/tabs/page.tsx +++ b/app/docs/components/tabs/page.tsx @@ -1,10 +1,10 @@ import type { Metadata, NextPage } from 'next' -import { DocsContentLayout } from '../../../components/DocsContentLayout' import TabsDocs from '.' +import { DocsContentLayout } from '../../../components/DocsContentLayout' export const metadata: Metadata = { description: - 'The Tab Group Component in the Keep React allows you to organize and display content in a tabbed interface. It provides a convenient way to switch between different sections or views within a single container. With customizable options for size, type, and status, you can create versatile and visually appealing tab groups that align with your design aesthetic.', + 'The Tab Group Component in the Keep React allows you to organize and display content in a tabbed interface. It provides a convenient way to switch between different sections or views within a single container.', title: 'Tabs - Keep React', } diff --git a/app/docs/components/tabs/tabs.mdx b/app/docs/components/tabs/tabs.mdx index a26e6efb..cb2386a0 100644 --- a/app/docs/components/tabs/tabs.mdx +++ b/app/docs/components/tabs/tabs.mdx @@ -1,48 +1,37 @@ import { DefaultTabs, DefaultTabsCode } from './variant/DefaultTabs' -import { BorderedTabs, BorderedTabsCode } from './variant/BorderedTabs' +import { VerticalTab, VerticalTabCode } from './variant/VerticalTabs' import { TabsWithIcon, TabsWithIconCode } from './variant/TabsWithIcon' - -import { TabsWithNotification, TabsWithNotificationCode } from './variant/TabsWithNotification' import { tabsApiData, tabsItemApiData } from './tabsApi' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents -The Tab Group Component in the Keep React allows you to organize and display content in a tabbed interface. It provides a convenient way to switch between different sections or views within a single container. With customizable options for size, type, and status, you can create versatile and visually appealing tab groups that align with your design aesthetic. +The Tab Group Component in the Keep React allows you to organize and display content in a tabbed interface. It provides a convenient way to switch between different sections or views within a single container. ## Default Tabs -The default Tabs component presents a collection of `pills` style button that include both tab elements and corresponding tab content. +The Default Tabs component showcases the basic implementation of tabs. -## Bordered Tabs - -By setting `borderPosition="top"`, you can make the border appear at the top of the tab group. Conversely, setting `borderPosition="bottom"` will cause the border to appear at the bottom of the tab group. - - - - - ## Tabs with Icon -Tabs items with icons are a user interface design element where each tab in a tabbed navigation system is accompanied by an icon. You can change the icon position by using `iconPosition` props as `"right" | "left"`. +Enhance your tabs by incorporating icons alongside the tab labels. -## Tab Notifications +## Vertical Tab -Keep users informed by adding notifications to tabs. Utilize badges to indicate new or important content. +Display tabs vertically by setting the `vertical` prop to `true`. - - + + ## Tabs API Reference diff --git a/app/docs/components/tabs/tabsApi.ts b/app/docs/components/tabs/tabsApi.ts index 360bf571..19afddc2 100644 --- a/app/docs/components/tabs/tabsApi.ts +++ b/app/docs/components/tabs/tabsApi.ts @@ -1,75 +1,54 @@ export const tabsApiData = [ { id: 1, - propsName: 'style', - propsType: ['default', 'underline', 'pills'], - propsDescription: 'Specifies the style variant of the tabs.', - default: 'default', + propsName: 'children', + propsType: 'ReactNode', + propsDescription: 'Children is tab items.', + default: 'Item', }, { id: 2, - propsName: 'iconPosition', - propsType: ['left', 'right'], - propsDescription: 'Determines whether icons appear on the left or right side of tab labels.', - default: 'left', + propsName: 'activeLabel', + propsType: 'string', + propsDescription: 'Which tabs by default will be active', + default: 'one', }, { id: 3, - propsName: 'borderPosition', - propsType: ['top', 'bottom'], - default: 'bottom', - propsDescription: 'Sets the position of a border line within the Tabs component.', + propsName: 'vertical', + propsType: 'boolean', + propsDescription: 'Tabs show vertical position', + default: 'false', }, { id: 4, - propsName: 'onActiveTabChange', - propsType: 'function', - default: '()=>void', - propsDescription: 'Callback for handling active tab changes.', + propsName: 'className', + propsType: 'string', + propsDescription: 'Custom class name for the component', + default: '', }, ] export const tabsItemApiData = [ { id: 1, - propsName: 'title', - propsType: 'ReactNode', - propsDescription: 'The title of the tab item.', - default: 'Profile', - }, - { - id: 2, - propsName: 'active', - propsType: 'boolean', - propsDescription: 'Determines whether the tab item is active.', - default: 'false', - }, - { - id: 3, propsName: 'disabled', propsType: 'boolean', propsDescription: 'Determines whether the tab item is disabled.', default: 'false', }, { - id: 4, - propsName: 'icon', - propsType: 'ReactNode', - propsDescription: 'The icon to display with the tab item.', - default: 'None', - }, - { - id: 5, - propsName: 'notification', - propsType: ['number', 'string'], - propsDescription: 'Notification content for the tab item.', - default: 'number', + id: 2, + propsName: 'className', + propsType: 'string', + propsDescription: 'Custom class name for the component', + default: '', }, { - id: 6, - propsName: 'notificationColor', - propsType: ['error', 'gray', 'info', 'success', 'warning'], - propsDescription: 'The color of the notification for the tab item.', - default: 'info', + id: 3, + propsName: 'label', + propsType: 'string', + propsDescription: 'This label connect to the content', + default: 'one', }, ] diff --git a/app/docs/components/tabs/variant/BorderedTabs.tsx b/app/docs/components/tabs/variant/BorderedTabs.tsx deleted file mode 100644 index c499fbc0..00000000 --- a/app/docs/components/tabs/variant/BorderedTabs.tsx +++ /dev/null @@ -1,37 +0,0 @@ -'use client' -import { Tabs } from '../../../../src' - -const BorderedTabs = () => { - return ( - - Profile content - Dashboard content - Settings content - Contacts content - - Disabled content - - - ) -} - -const BorderedTabsCode = ` -"use client"; -import { Tabs } from "keep-react"; - -export const TabsComponent = () => { - return ( - - Profile content - Dashboard content - Settings content - Contacts content - - Disabled content - - - ); -} -` - -export { BorderedTabs, BorderedTabsCode } diff --git a/app/docs/components/tabs/variant/DefaultTabs.tsx b/app/docs/components/tabs/variant/DefaultTabs.tsx index 04f854ee..80bb7191 100644 --- a/app/docs/components/tabs/variant/DefaultTabs.tsx +++ b/app/docs/components/tabs/variant/DefaultTabs.tsx @@ -3,16 +3,39 @@ import { Tabs } from '../../../../src' const DefaultTabs = () => { return ( - - - Profile content - - Dashboard content - Settings content - Contacts content - - Disabled content - + + + Home + About + Contact + Blogs + Sign Up + + + A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy + with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss + of souls like mine. + + + I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my + talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was + a greater artist than now. + + + A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy + with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss + of souls like mine. + + + I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my + talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was + a greater artist than now. + + + A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy + with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss + of souls like mine. + ) } @@ -23,18 +46,21 @@ import { Tabs } from "keep-react"; export const TabsComponent = () => { return ( - - - Profile content - - Dashboard content - Settings content - Contacts content - - Disabled content - + + + Home + About + Contact + Blogs + Sign Up + + Home + About Content + Contact Content + Blogs Content + Sign Up Content - ); + ) } ` diff --git a/app/docs/components/tabs/variant/TabsWithIcon.tsx b/app/docs/components/tabs/variant/TabsWithIcon.tsx index fb201ed3..554824f1 100644 --- a/app/docs/components/tabs/variant/TabsWithIcon.tsx +++ b/app/docs/components/tabs/variant/TabsWithIcon.tsx @@ -1,63 +1,118 @@ 'use client' +import { HouseLine, Pen, Phone, SignIn, User } from 'phosphor-react' import { Tabs } from '../../../../src' -import { Gear, GridFour, Phone, User, WarningCircle } from 'phosphor-react' const TabsWithIcon = () => { return ( - - }> - Profile content - - }> - Dashboard content - - }> - Settings content - - }> - Contacts content - - }> - Disabled content - + + + + + Home + + + + About + + + + Contact + + + + Blogs + + + + Sign Up + + + + A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy + with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss + of souls like mine. + + + I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my + talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was + a greater artist than now. + + + A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy + with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss + of souls like mine. + + + I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my + talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was + a greater artist than now. + + + A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy + with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss + of souls like mine. + ) } const TabsWithIconCode = ` -"use client"; -import { Tabs } from "keep-react"; -import { Gear, GridFour, Phone, User, WarningCircle } from "phosphor-react"; +'use client' +import { Tabs } from 'keep-react' +import { HouseLine, Pen, Phone, SignIn, User } from 'phosphor-react' export const TabsComponent = () => { return ( - - }> - Profile content - - }> - Dashboard content - - }> - Settings content - - }> - Contacts content - - } - > - Disabled content - + + + + + Home + + + + About + + + + Contact + + + + Blogs + + + + Sign Up + + + + A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy + with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss + of souls like mine. + + + I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my + talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was + a greater artist than now. + + + A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy + with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss + of souls like mine. + + + I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my + talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was + a greater artist than now. + + + A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy + with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss + of souls like mine. + - ); + ) } ` diff --git a/app/docs/components/tabs/variant/TabsWithNotification.tsx b/app/docs/components/tabs/variant/TabsWithNotification.tsx deleted file mode 100644 index 1e96b353..00000000 --- a/app/docs/components/tabs/variant/TabsWithNotification.tsx +++ /dev/null @@ -1,61 +0,0 @@ -'use client' -import { Tabs } from '../../../../src' - -const TabsWithNotification = () => { - return ( - - - Inbox content - - - Cart content - - - Notification - - - Message content - - - ) -} - -const TabsWithNotificationCode = ` -"use client"; -import { Tabs } from "keep-react"; - -export const TabsComponent = () => { - return ( - - - Inbox content - - - Cart content - - - Notification - - - Message content - - - ); -} -` - -export { TabsWithNotification, TabsWithNotificationCode } diff --git a/app/docs/components/tabs/variant/VerticalTabs.tsx b/app/docs/components/tabs/variant/VerticalTabs.tsx new file mode 100644 index 00000000..7318846a --- /dev/null +++ b/app/docs/components/tabs/variant/VerticalTabs.tsx @@ -0,0 +1,130 @@ +'use client' +import { CaretRight, HouseLine, Pen, Phone, SignIn, User } from 'phosphor-react' +import { Tabs } from '../../../../src' + +const VerticalTab = () => { + return ( + + + + + Home + + + + + About + + + + + Contact + + + + + Blogs + + + + + Sign Up + + + + + A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy + with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss + of souls like mine. + + + I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my + talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was + a greater artist than now. + + + A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy + with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss + of souls like mine. + + + I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my + talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was + a greater artist than now. + + + A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy + with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss + of souls like mine. + + + ) +} + +const VerticalTabCode = ` +'use client' +import { CaretRight, HouseLine, Pen, Phone, SignIn, User } from 'phosphor-react' +import { Tabs } from 'keep-react' + +export const TabsComponent = () => { + return ( + + + + + Home + + + + + About + + + + + Contact + + + + + Blogs + + + + + Sign Up + + + + + A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy + with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss + of souls like mine. + + + I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my + talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was + a greater artist than now. + + + A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy + with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss + of souls like mine. + + + I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my + talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was + a greater artist than now. + + + A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy + with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss + of souls like mine. + + + ) +} + +` + +export { VerticalTab, VerticalTabCode } diff --git a/app/docs/components/tag/Tag.mdx b/app/docs/components/tag/Tag.mdx index e9d15fa1..614cf4de 100644 --- a/app/docs/components/tag/Tag.mdx +++ b/app/docs/components/tag/Tag.mdx @@ -1,60 +1,40 @@ import { DefaultTag, DefaultTagCode } from './variant/DefaultTag' -import { BothSideIconTag, BothSideIconTagCode } from './variant/BothSideIconTag' -import { ColorsOfTag, ColorsOfTagCode } from './variant/ColorsOfTag' -import { LeftSideIconTag, LeftSideIconTagCode } from './variant/LeftSideIconTag' -import { TagWithDashedBorder, TagWithDashedBorderCode } from './variant/TagWithDashedBorder' +import { TagWithIcon, TagWithIconCode } from './variant/TagWithIcon' +import { DisabledTag, DisabledTagCode } from './variant/DisabledTag' import { tagApiData } from './TagApi' - -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents -The Color Tag Component in the Keep React allows you to visually represent and label items with different colors. With customizable options for the type, close button, color, and border, you can create color tags that align with your design and provide a clear visual distinction. +The Color Tag Component in Keep React allows you to visually represent and label items with customizable options for style and icon. ## Default Tag -The Default Tag component represents a tag without any additional elements. It serves as a fundamental building block for various tag variations. +The Default Tag component represents a tag without any additional elements. -## Colors of Tag - -Customize the appearance of your tags by choosing from a range of color options. The "Colors of Tag" component showcases the available color variants. - - - - - -## Left Side Icon Tag - -Enhance your tags by adding an icon to the left side using the `leftIcon` props. - - - - - -## Tag With Both Side Icon +## Tag With Icon -Create tags with icons on both sides. The left side can accommodate a custom icon, while the right side features a dismiss icon for easy removal. +Enhance your tags by adding icons for better visual representation. - - + + -## Tag With Dashed Border +## Disabled Tag -The "Tag With Dashed Border" example demonstrates two types of border styles for tags: `borderType="solid"` and `borderType="dashed"`. +Restrict user interaction with the `disabled` prop set to `true`. - - + + ## API Reference -For a comprehensive overview of the Tag component's properties, refer to the API documentation. +Refer to the API documentation for a comprehensive overview of the Tag component's properties. diff --git a/app/docs/components/tag/TagApi.ts b/app/docs/components/tag/TagApi.ts index b69e4805..46b3dab5 100644 --- a/app/docs/components/tag/TagApi.ts +++ b/app/docs/components/tag/TagApi.ts @@ -1,51 +1,16 @@ export const tagApiData = [ { id: 1, - propsName: 'leftIcon', - propsType: 'ReactNode', - propsDescription: 'Icon component displayed on the left side of the tag.', - default: '', - }, - { - id: 2, - propsName: 'dismissIcon', - propsType: 'ReactNode', - propsDescription: 'Icon component used for dismissing the tag.', - default: '', - }, - { - id: 3, - propsName: 'dismiss', - propsType: 'Boolean', - propsDescription: 'Determines if the tag can be dismissed.', + propsName: 'rounded', + propsType: 'boolean', + propsDescription: 'Tag with rounded corner', default: 'false', }, { - id: 4, + id: 2, propsName: 'disabled', propsType: 'Boolean', propsDescription: 'Disables interactions with the tag.', default: 'false', }, - { - id: 5, - propsName: 'color', - propsType: ['error', 'gray', 'info', 'success', 'warning', 'teal', 'purple'], - propsDescription: 'Specifies the color variant of the tag.', - default: 'gray', - }, - { - id: 6, - propsName: 'borderType', - propsType: ['solid', 'dashed'], - propsDescription: 'Sets the type of border for the tag.', - default: 'solid', - }, - { - id: 7, - propsName: 'onDismiss', - propsType: 'boolean | (() => void)', - propsDescription: 'Callback function when the tag is dismissed.', - default: 'Function', - }, ] diff --git a/app/docs/components/tag/page.tsx b/app/docs/components/tag/page.tsx index 1b2bc13d..fb831f94 100644 --- a/app/docs/components/tag/page.tsx +++ b/app/docs/components/tag/page.tsx @@ -1,10 +1,10 @@ import type { Metadata, NextPage } from 'next' -import { DocsContentLayout } from '../../../components/DocsContentLayout' import TagDocs from '.' +import { DocsContentLayout } from '../../../components/DocsContentLayout' export const metadata: Metadata = { description: - 'The Color Tag Component in the Keep React allows you to visually represent and label items with different colors. With customizable options for the type, close button, color, and border, you can create color tags that align with your design and provide a clear visual distinction.', + 'The Color Tag Component in the Keep React allows you to visually represent and label items. With customizable options for the style, icon.', title: 'Tag - Keep React', } diff --git a/app/docs/components/tag/variant/BothSideIconTag.tsx b/app/docs/components/tag/variant/BothSideIconTag.tsx deleted file mode 100644 index 33ef79ce..00000000 --- a/app/docs/components/tag/variant/BothSideIconTag.tsx +++ /dev/null @@ -1,157 +0,0 @@ -'use client' -import { useState } from 'react' -import { Tag } from '../../../../src' -import { CrownSimple, X } from 'phosphor-react' - -const BothSideIconTag = () => { - const [dismiss, setDismiss] = useState([false, false, false, false, false, false, false]) - - const handleDismiss = (index: number) => { - const updatedDismissStates = [...dismiss] - updatedDismissStates[index] = true - setDismiss(updatedDismissStates) - } - return ( -
    - handleDismiss(1)} - leftIcon={} - dismissIcon={}> - Tag - - handleDismiss(2)} - leftIcon={} - dismissIcon={}> - Tag - - handleDismiss(3)} - leftIcon={} - dismissIcon={}> - Tag - - handleDismiss(4)} - leftIcon={} - dismissIcon={}> - Tag - - handleDismiss(5)} - leftIcon={} - dismissIcon={}> - Tag - - handleDismiss(6)} - leftIcon={} - dismissIcon={}> - Tag - - handleDismiss(0)} - leftIcon={} - dismissIcon={}> - Tag - -
    - ) -} - -const BothSideIconTagCode = ` -"use client"; -import { Tag } from "keep-react"; -import { useState } from "react"; -import { CrownSimple, X } from "phosphor-react"; - -export const TagComponent = () => { - const [dismiss, setDismiss] = useState(false); - const onDismiss = () => { - setDismiss(!dismiss); - }; - return ( -
    - } - dismissIcon={} - > - Tag - - } - dismissIcon={} - > - Tag - - } - dismissIcon={} - > - Tag - - } - dismissIcon={} - > - Tag - - } - dismissIcon={} - > - Tag - - } - dismissIcon={} - > - Tag - - } - dismissIcon={} - > - Tag - -
    - ); -} -` - -export { BothSideIconTag, BothSideIconTagCode } diff --git a/app/docs/components/tag/variant/ColorsOfTag.tsx b/app/docs/components/tag/variant/ColorsOfTag.tsx deleted file mode 100644 index a3acee9e..00000000 --- a/app/docs/components/tag/variant/ColorsOfTag.tsx +++ /dev/null @@ -1,39 +0,0 @@ -'use client' -import { Tag } from '../../../../src' - -const ColorsOfTag = () => { - return ( -
    - Gray Tag - Error Tag - Info Tag - Success Tag - Warning Tag - Teal Tag - Purple Tag - Disabled Tag -
    - ) -} - -const ColorsOfTagCode = ` -"use client"; -import { Tag } from "keep-react"; - -export const TagComponent = () => { - return ( -
    - Gray Tag - Error Tag - Info Tag - Success Tag - Warning Tag - Teal Tag - Purple Tag - Disabled Tag -
    - ); -} -` - -export { ColorsOfTag, ColorsOfTagCode } diff --git a/app/docs/components/tag/variant/DefaultTag.tsx b/app/docs/components/tag/variant/DefaultTag.tsx index 02ef3ce2..b85696a4 100644 --- a/app/docs/components/tag/variant/DefaultTag.tsx +++ b/app/docs/components/tag/variant/DefaultTag.tsx @@ -2,11 +2,7 @@ import { Tag } from '../../../../src' const DefaultTag = () => { - return ( -
    - Default Tag -
    - ) + return Default Tag } const DefaultTagCode = ` diff --git a/app/docs/components/tag/variant/DisabledTag.tsx b/app/docs/components/tag/variant/DisabledTag.tsx new file mode 100644 index 00000000..3ae5c688 --- /dev/null +++ b/app/docs/components/tag/variant/DisabledTag.tsx @@ -0,0 +1,17 @@ +'use client' +import { Tag } from '../../../../src' + +const DisabledTag = () => { + return Disabled Tag +} + +const DisabledTagCode = ` +'use client' +import { Tag } from 'keep-react' + +export const TagComponent = () => { + return Disabled Tag +} +` + +export { DisabledTag, DisabledTagCode } diff --git a/app/docs/components/tag/variant/LeftSideIconTag.tsx b/app/docs/components/tag/variant/LeftSideIconTag.tsx deleted file mode 100644 index 8b2e9a89..00000000 --- a/app/docs/components/tag/variant/LeftSideIconTag.tsx +++ /dev/null @@ -1,73 +0,0 @@ -'use client' -import { Tag } from '../../../../src' -import { CrownSimple } from 'phosphor-react' - -const LeftSideIconTag = () => { - return ( -
    - } color="gray"> - Tag - - } color="error"> - Tag - - } color="info"> - Tag - - } color="success"> - Tag - - } color="warning"> - Tag - - } color="teal"> - Tag - - } color="purple"> - Tag - - } disabled={true}> - Tag - -
    - ) -} - -const LeftSideIconTagCode = ` -"use client"; -import { Tag } from "keep-react"; -import { CrownSimple } from "phosphor-react"; - -export const TagComponent = () => { - return ( -
    - } color="gray"> - Tag - - } color="error"> - Tag - - } color="info"> - Tag - - } color="success"> - Tag - - } color="warning"> - Tag - - } color="teal"> - Tag - - } color="purple"> - Tag - - } disabled={true}> - Tag - -
    - ); -} -` - -export { LeftSideIconTag, LeftSideIconTagCode } diff --git a/app/docs/components/tag/variant/TagWithDashedBorder.tsx b/app/docs/components/tag/variant/TagWithDashedBorder.tsx deleted file mode 100644 index 247f9dd1..00000000 --- a/app/docs/components/tag/variant/TagWithDashedBorder.tsx +++ /dev/null @@ -1,173 +0,0 @@ -'use client' -import { useState } from 'react' -import { Tag } from '../../../../src' -import { CrownSimple, X } from 'phosphor-react' - -const TagWithDashedBorder = () => { - const [dismiss, setDismiss] = useState([false, false, false, false, false, false, false]) - - const handleDismiss = (index: number) => { - const updatedDismissStates = [...dismiss] - updatedDismissStates[index] = true - setDismiss(updatedDismissStates) - } - - return ( -
    - handleDismiss(0)} - leftIcon={} - dismissIcon={} - borderType="dashed"> - Tag - - handleDismiss(1)} - leftIcon={} - dismissIcon={} - borderType="dashed"> - Tag - - handleDismiss(2)} - leftIcon={} - dismissIcon={} - borderType="dashed"> - Tag - - - handleDismiss(3)} - leftIcon={} - dismissIcon={} - borderType="dashed"> - Tag - - handleDismiss(4)} - leftIcon={} - dismissIcon={} - borderType="dashed"> - Tag - - handleDismiss(5)} - leftIcon={} - dismissIcon={} - borderType="dashed"> - Tag - - handleDismiss(6)} - leftIcon={} - dismissIcon={} - borderType="dashed"> - Tag - -
    - ) -} - -const TagWithDashedBorderCode = ` -"use client"; -import { useState } from "react"; -import { Tag } from "keep-react"; -import { CrownSimple, X } from "phosphor-react"; - -export const TagComponent = () => { - const [dismiss, setDismiss] = useState(false); - const onDismiss = () => { - setDismiss(!dismiss); - }; - return ( -
    - } - dismissIcon={} - borderType="dashed" - > - Tag - - } - dismissIcon={} - borderType="dashed" - > - Tag - - } - dismissIcon={} - borderType="dashed" - > - Tag - - } - dismissIcon={} - borderType="dashed" - > - Tag - - } - dismissIcon={} - borderType="dashed" - > - Tag - - } - dismissIcon={} - borderType="dashed" - > - Tag - - } - dismissIcon={} - borderType="dashed" - > - Tag - -
    - ); -} -` - -export { TagWithDashedBorder, TagWithDashedBorderCode } diff --git a/app/docs/components/tag/variant/TagWithIcon.tsx b/app/docs/components/tag/variant/TagWithIcon.tsx new file mode 100644 index 00000000..47527ab6 --- /dev/null +++ b/app/docs/components/tag/variant/TagWithIcon.tsx @@ -0,0 +1,50 @@ +'use client' +import { Clock, X } from 'phosphor-react' +import { Tag } from '../../../../src' + +const TagWithIcon = () => { + return ( +
    + + + Icon Tag + + + Icon Tag + + + + + Round Tag + +
    + ) +} + +const TagWithIconCode = ` +'use client' +import { Tag } from 'keep-react' +import { Clock, X } from 'phosphor-react' + +export const TagComponent = () => { + return ( +
    + + + Icon Tag + + + Icon Tag + + + + + Round Tag + +
    + ) +} + +` + +export { TagWithIcon, TagWithIconCode } diff --git a/app/docs/components/textArea/TextArea.mdx b/app/docs/components/textArea/TextArea.mdx index 95914c58..f2f18cf7 100644 --- a/app/docs/components/textArea/TextArea.mdx +++ b/app/docs/components/textArea/TextArea.mdx @@ -1,51 +1,49 @@ import { DefaultTextArea, DefaultTextAreaCode } from './variant/DefaultTextArea' -import { ColorVariantOfTextArea, ColorVariantOfTextAreaCode } from './variant/ColorVariantOfTextArea' -import { TextAreaWithOutBorder, TextAreaWithOutBorderCode } from './variant/TextAreaWithOutBorder' +import { TextAreaWithForm, TextAreaWithFormCode } from './variant/TextAreaWithForm' +import { DisabledTextArea, DisabledTextAreaCode } from './variant/DisabledTextArea' import { TextAreaWithHelperText, TextAreaWithHelperTextCode } from './variant/TextAreaWithHelperText' import { textareaApiData } from './TextAreaApi' - -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import CodePreview from '../../../components/CodePreview' +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents -Textarea Input Component is a user interface element used to collect and display multiline text input from users. It provides an expandable box where users can enter a larger amount of text, such as comments, descriptions, or messages. +The Textarea Input Component is a versatile user interface element for collecting and displaying multiline text input from users. It offers an expandable box that accommodates larger amounts of text, such as comments, descriptions, or messages. -## Default TextArea +## Default Textarea -The Default TextArea is a simple and versatile component that provides users with a larger text input area. +The Default Textarea component provides users with a simple and versatile text input area. - + -## Color variant Of Text Area +## Textarea With Helper Text -The Text Area component in our design system offers different color variants to match your UI's visual style and provide additional context. You can choose from the following color options: `"gray"` `"info"` `"error"` `"warning"` and `"success"`. +Display the textarea component with a label and helper text to assist users. - - + + -## Text Area Without Border +## Textarea in a Form -You can easily create a TextArea without a border by setting the `border` prop to `false`. +Learn how to integrate the textarea component into a form for seamless data collection. - - + + -## Text Area With Helper Text +## Disabled Textarea -It will be displayed below the TextArea to provide additional guidance or context for the user. You can add a helperText using the `helperText` prop in the TextArea component. +Demonstrate the use of the disabled prop to render a disabled textarea component. - - + + ## API Reference -Explore the available props for the Text Area component +Explore the available props for the Textarea component. diff --git a/app/docs/components/textArea/TextAreaApi.ts b/app/docs/components/textArea/TextAreaApi.ts index c7524eac..4a86ccef 100644 --- a/app/docs/components/textArea/TextAreaApi.ts +++ b/app/docs/components/textArea/TextAreaApi.ts @@ -1,44 +1,16 @@ export const textareaApiData = [ { id: 1, - propsName: 'shadow', - propsType: 'boolean', - propsDescription: 'Applies a shadow effect to the textarea component.', - default: 'false', + propsName: 'className', + propsType: 'string', + propsDescription: 'className for custom style', + default: '', }, { id: 2, - propsName: 'helperText', - propsType: 'ReactNode', - propsDescription: 'Additional helper text or information related to the textarea.', - default: 'None', - }, - { - id: 3, - propsName: 'withBg', - propsType: 'boolean', - propsDescription: 'Applies a background style to the textarea component.', - default: 'false', - }, - { - id: 4, - propsName: 'border', - propsType: 'boolean', - propsDescription: 'Displays a border around the textarea component.', - default: 'false', - }, - { - id: 5, propsName: 'disabled', propsType: 'boolean', propsDescription: 'Disables interactions with the textarea component.', default: 'false', }, - { - id: 6, - propsName: 'color', - propsType: ['gray', 'info', 'error', 'warning', 'success'], - propsDescription: 'Specifies the color variant of the textarea component.', - default: 'gray', - }, ] diff --git a/app/docs/components/textArea/variant/ColorVariantOfTextArea.tsx b/app/docs/components/textArea/variant/ColorVariantOfTextArea.tsx deleted file mode 100644 index 55613a13..00000000 --- a/app/docs/components/textArea/variant/ColorVariantOfTextArea.tsx +++ /dev/null @@ -1,26 +0,0 @@ -'use client' -import { Textarea } from '../../../../src' - -const ColorVariantOfTextArea = () => { - return