From 220cecdce7965b13d86f5ba8ba3a27e789a18c1e Mon Sep 17 00:00:00 2001 From: Arifulislam5577 Date: Mon, 25 Dec 2023 18:27:10 +0600 Subject: [PATCH 01/70] Added: Button Type Added. --- app/components/ComponentsList.tsx | 6 +- app/docs/components/button/buttonApi.ts | 11 +++- .../button/variant/KeepButtonIcon.tsx | 12 ++-- .../button/variant/KeepButtonShape.tsx | 8 +-- .../button/variant/KeepButtonSize.tsx | 24 ++++---- .../button/variant/KeepButtonType.tsx | 32 +++++----- .../variant/ButtonGroupWithIcon.tsx | 12 ++-- .../variant/ButtonGroupWithOnlyIcon.tsx | 12 ++-- .../variant/DefaultButtonGroup.tsx | 12 ++-- .../components/card/variant/CardWithIcon.tsx | 59 ++++++++----------- .../components/card/variant/DefaultCard.tsx | 24 ++++---- .../card/variant/HorizontalCard.tsx | 17 ++---- .../components/card/variant/PricingCard.tsx | 4 +- .../components/card/variant/ProductCard.tsx | 26 ++++---- .../card/variant/ProfileCardWithCover.tsx | 6 +- .../dropdown/variant/DefaultDropdown.tsx | 4 +- .../dropdown/variant/DropdownSearchBar.tsx | 4 +- .../variant/DropdownWithBothSideIcon.tsx | 4 +- .../variant/DropdownWithIconAndSearchBar.tsx | 4 +- .../variant/DropdownWithTitleDescription.tsx | 4 +- .../modal/variant/ConfirmationModal.tsx | 24 ++++---- .../components/modal/variant/DefaultModal.tsx | 24 ++++---- .../components/modal/variant/HistoryModal.tsx | 24 ++++---- .../modal/variant/ModalPosition.tsx | 10 ++-- .../components/modal/variant/SizesOfModal.tsx | 10 ++-- .../navbar/variant/DefaultNavbar.tsx | 8 +-- .../navbar/variant/EcommerceNavbar.tsx | 4 +- .../navbar/variant/NavbarWithCenterLogo.tsx | 4 +- .../variant/DefaultNotification.tsx | 12 ++-- .../variant/NotificationWithAvatar.tsx | 12 ++-- .../variant/NotificationWithCard.tsx | 30 +++++----- .../variant/NotificationWithIcon.tsx | 12 ++-- app/docs/components/playButton/playButton.mdx | 8 +-- .../playButton/variant/NoBorderPlayButton.tsx | 16 ++--- .../variant/SecondaryPlayButton.tsx | 16 ++--- .../popover/variant/DefaultPopover.tsx | 4 +- .../popover/variant/PopoverPosition.tsx | 4 +- .../popover/variant/TriggerVariant.tsx | 4 +- .../variant/SearchBarWithColorVariant.tsx | 8 +-- .../sidebar/variant/SidebarWithCTA.tsx | 4 +- .../spinner/variant/SpinnerButton.tsx | 8 +-- .../steps/variant/InterActiveStep.tsx | 4 +- .../table/variant/BorderedTable.tsx | 28 ++++----- .../components/table/variant/DefaultTable.tsx | 28 ++++----- .../table/variant/FilesUploadedTable.tsx | 28 ++++----- .../table/variant/HoverableTable.tsx | 28 ++++----- .../components/table/variant/OrdersTable.tsx | 32 +++++----- .../components/table/variant/StripedTable.tsx | 28 ++++----- .../table/variant/TransactionsTable.tsx | 28 ++++----- .../timeline/variant/DashedBorderTimeline.tsx | 4 +- .../timeline/variant/DefaultTimeline.tsx | 4 +- .../tooltip/variant/DefaultTooltip.tsx | 4 +- .../tooltip/variant/TooltipPlacement.tsx | 16 ++--- .../tooltip/variant/TooltipStyles.tsx | 8 +-- .../tooltip/variant/TooltipTriggering.tsx | 8 +-- .../tooltip/variant/TooltipWithLargeText.tsx | 8 +-- app/src/Keep/KeepTheme.ts | 2 +- app/src/components/Button/Button.stories.tsx | 31 ++++++---- app/src/components/Button/Button.tsx | 51 +++++++++------- app/src/components/Card/Card.stories.tsx | 22 ++++--- .../components/Chart/AreaCharts.stories.tsx | 28 ++++----- app/src/components/Chart/CustomTooltip.tsx | 4 +- .../components/Dropdown/Dropdown.stories.tsx | 2 +- app/src/components/Empty/Redirect.tsx | 2 +- app/src/components/Modal/Modal.stories.tsx | 24 ++++---- .../Navigation/Navigation.stories.tsx | 8 +-- .../Notification/Notification.stories.tsx | 36 +++++------ app/src/components/PlayButton/index.tsx | 4 +- .../components/Popover/Popover.stories.tsx | 6 +- .../SearchBar/SearchBar.stories.tsx | 4 +- app/src/components/Statistic/Title.tsx | 2 +- app/src/components/Table/Table.stories.tsx | 58 +++++++++--------- .../components/Timeline/Timeline.stories.tsx | 2 +- .../components/Tooltip/Tooltip.stories.tsx | 2 +- app/src/components/Upload/InputField.tsx | 4 +- app/src/components/Upload/UploadContext.tsx | 4 +- .../components/Upload/UploadHorizontal.tsx | 2 +- app/src/components/Upload/index.tsx | 4 +- 78 files changed, 545 insertions(+), 544 deletions(-) diff --git a/app/components/ComponentsList.tsx b/app/components/ComponentsList.tsx index 169142b3..00d579a2 100644 --- a/app/components/ComponentsList.tsx +++ b/app/components/ComponentsList.tsx @@ -42,7 +42,7 @@ export const TooltipComponent = () => { placement="top" animation="duration-300" style="dark"> - @@ -131,10 +131,10 @@ export const ModalComponent = () => { - - diff --git a/app/docs/components/button/buttonApi.ts b/app/docs/components/button/buttonApi.ts index 6c9cdbd7..e0ee688f 100644 --- a/app/docs/components/button/buttonApi.ts +++ b/app/docs/components/button/buttonApi.ts @@ -15,11 +15,18 @@ export const buttonApiData = [ }, { id: 3, - propsName: 'type', + propsName: 'variant', propsType: ['primary', 'dashed', 'text', 'linkPrimary', 'linkGray', 'outlineGray', 'outlinePrimary', 'default'], - propsDescription: 'Type of the button.', + propsDescription: 'Variant of the button.', default: 'default', }, + { + id: 14, + propsName: 'type', + propsType: ['button', 'submit', 'reset'], + propsDescription: 'Type of the button.', + default: 'button', + }, { id: 4, propsName: 'notificationLabel', diff --git a/app/docs/components/button/variant/KeepButtonIcon.tsx b/app/docs/components/button/variant/KeepButtonIcon.tsx index a22a5d25..ee9fe5a2 100644 --- a/app/docs/components/button/variant/KeepButtonIcon.tsx +++ b/app/docs/components/button/variant/KeepButtonIcon.tsx @@ -5,16 +5,16 @@ import { Gear, SquaresFour } from 'phosphor-react' const KeepButtonIcon = () => { return (
- - - - + - - - + - - - - -
@@ -33,12 +33,12 @@ 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..fa37792a 100644 --- a/app/docs/components/button/variant/KeepButtonType.tsx +++ b/app/docs/components/button/variant/KeepButtonType.tsx @@ -4,28 +4,28 @@ import { Button } from '../../../../src' const KeepButtonType = () => { return (
- - - - - - - -
@@ -39,14 +39,14 @@ import { Button } from "keep-react"; export const ButtonComponent = () => { return ( <> - - - - - - - - + + + + + + + + ); }; diff --git a/app/docs/components/buttonGroup/variant/ButtonGroupWithIcon.tsx b/app/docs/components/buttonGroup/variant/ButtonGroupWithIcon.tsx index 7c800508..9d0dd318 100644 --- a/app/docs/components/buttonGroup/variant/ButtonGroupWithIcon.tsx +++ b/app/docs/components/buttonGroup/variant/ButtonGroupWithIcon.tsx @@ -6,19 +6,19 @@ const ButtonGroupWithIcon = () => { return (
- - - - - - - @@ -26,13 +26,13 @@ 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..25b6eebc 100644 --- a/app/docs/components/buttonGroup/variant/DefaultButtonGroup.tsx +++ b/app/docs/components/buttonGroup/variant/DefaultButtonGroup.tsx @@ -5,13 +5,13 @@ const DefaultButtonGroup = () => { return (
- - - @@ -26,9 +26,9 @@ import { Button } from "keep-react"; export const ButtonGroupComponent = () => { return ( - - - + + + ); }; diff --git a/app/docs/components/card/variant/CardWithIcon.tsx b/app/docs/components/card/variant/CardWithIcon.tsx index e391d9aa..74c64e88 100644 --- a/app/docs/components/card/variant/CardWithIcon.tsx +++ b/app/docs/components/card/variant/CardWithIcon.tsx @@ -60,7 +60,7 @@ const CardWithIcon = () => { - @@ -70,51 +70,43 @@ const CardWithIcon = () => { } const CardWithIconCode = ` -"use client"; -import { Button, Card, Popover } from "keep-react"; -import { - ArchiveTray, - CaretRight, - DotsThreeVertical, - PencilCircle, -} from "phosphor-react"; +'use client' +import { Button, Card, Popover } from 'keep-react' +import { ArchiveTray, CaretRight, DotsThreeVertical, PencilCircle } from 'phosphor-react' export const CardComponent = () => { 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. + Component design systems can help developers to be more productive by providing them with a ready-made set + of components to use. - } - iconPosition="left" - > + } 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. + Component design systems can help developers to be more productive by providing them with a ready-made + set of components to use. @@ -128,29 +120,26 @@ export const CardComponent = () => { - + {/* ===CARD THREE=== */} + Keep React - Lorem Ipsum is simply dummy text of the printing and typesetting - industry. + 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..a7437382 100644 --- a/app/docs/components/card/variant/DefaultCard.tsx +++ b/app/docs/components/card/variant/DefaultCard.tsx @@ -18,28 +18,24 @@ const DefaultCard = () => { } const DefaultCardCode = ` -"use client"; -import { Card } from "keep-react"; -import { CaretRight } from "phosphor-react"; +'use client' +import { Card } from 'keep-react' +import { CaretRight } from 'phosphor-react' export const CardComponent = () => { return ( - - Keep React + + 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. + Component design systems can help developers to be more productive by providing them with a ready-made set of + components to use. - } - iconPosition="left" - > + } iconPosition="left"> Learn More - ); -}; + ) +} ` export { DefaultCard, DefaultCardCode } diff --git a/app/docs/components/card/variant/HorizontalCard.tsx b/app/docs/components/card/variant/HorizontalCard.tsx index 9fea295b..1d5d01e9 100644 --- a/app/docs/components/card/variant/HorizontalCard.tsx +++ b/app/docs/components/card/variant/HorizontalCard.tsx @@ -36,7 +36,7 @@ const HorizontalCard = () => { $649,00 - @@ -46,16 +46,9 @@ const HorizontalCard = () => { } const HorizontalCardCode = ` -"use client"; -import { - ArrowsOutSimple, - Bed, - Heart, - MapPinLine, - Shower, - Users, -} from "phosphor-react"; -import { Button, Card } from "keep-react"; +'use client' +import { Button, Card } from 'keep-react' +import { ArrowsOutSimple, Bed, MapPinLine, Shower, Users } from 'phosphor-react' export const CardComponent = () => { return ( @@ -91,7 +84,7 @@ export const CardComponent = () => { $649,00 - diff --git a/app/docs/components/card/variant/PricingCard.tsx b/app/docs/components/card/variant/PricingCard.tsx index 91d1ca57..d866dc7f 100644 --- a/app/docs/components/card/variant/PricingCard.tsx +++ b/app/docs/components/card/variant/PricingCard.tsx @@ -39,7 +39,7 @@ const PricingCard = () => { - @@ -107,7 +107,7 @@ export const CardComponent = () => { - diff --git a/app/docs/components/card/variant/ProductCard.tsx b/app/docs/components/card/variant/ProductCard.tsx index ccf2557d..e8c1c424 100644 --- a/app/docs/components/card/variant/ProductCard.tsx +++ b/app/docs/components/card/variant/ProductCard.tsx @@ -40,7 +40,7 @@ const ProductCard = () => { - - } /> - - @@ -117,7 +117,7 @@ const ProductCard = () => { - $649,00 @@ -176,7 +176,7 @@ export const CardComponent = () => { - - } /> - - @@ -223,7 +223,7 @@ export const CardComponent = () => { {/*=== PRODUCT CARD THREE === */} - @@ -256,7 +256,7 @@ export const CardComponent = () => { - $649,00 diff --git a/app/docs/components/card/variant/ProfileCardWithCover.tsx b/app/docs/components/card/variant/ProfileCardWithCover.tsx index f4728e2c..1bed1c35 100644 --- a/app/docs/components/card/variant/ProfileCardWithCover.tsx +++ b/app/docs/components/card/variant/ProfileCardWithCover.tsx @@ -45,9 +45,9 @@ const ProfileCardWithCover = () => { } const ProfileCardWithCoverCode = ` -"use client"; -import { Heart } from "phosphor-react"; -import { Avatar, Card } from "keep-react"; +"use client" +import { Heart } from "phosphor-react" +import { Avatar, Card } from "keep-react" export const CardComponent = () => { return ( diff --git a/app/docs/components/dropdown/variant/DefaultDropdown.tsx b/app/docs/components/dropdown/variant/DefaultDropdown.tsx index f3542a6b..46b779e7 100644 --- a/app/docs/components/dropdown/variant/DefaultDropdown.tsx +++ b/app/docs/components/dropdown/variant/DefaultDropdown.tsx @@ -3,7 +3,7 @@ import { Dropdown } from '../../../../src' const DefaultDropdown = () => { return ( - + Dashboard Settings Earnings @@ -21,7 +21,7 @@ export const DropdownComponent = () => { Dashboard diff --git a/app/docs/components/dropdown/variant/DropdownSearchBar.tsx b/app/docs/components/dropdown/variant/DropdownSearchBar.tsx index d407ca30..620e2b4b 100644 --- a/app/docs/components/dropdown/variant/DropdownSearchBar.tsx +++ b/app/docs/components/dropdown/variant/DropdownSearchBar.tsx @@ -4,7 +4,7 @@ import { Dropdown, TextInput } from '../../../../src' const DropdownSearchBar = () => { return ( - +
@@ -45,7 +45,7 @@ export const DropdownComponent = () => { return ( diff --git a/app/docs/components/dropdown/variant/DropdownWithBothSideIcon.tsx b/app/docs/components/dropdown/variant/DropdownWithBothSideIcon.tsx index 5800a282..cce37c3b 100644 --- a/app/docs/components/dropdown/variant/DropdownWithBothSideIcon.tsx +++ b/app/docs/components/dropdown/variant/DropdownWithBothSideIcon.tsx @@ -4,7 +4,7 @@ import { CaretRight, Gear, Money, SignOut, SquaresFour } from 'phosphor-react' const DropdownWithBothSideIcon = () => { return ( - + }> Dashboard @@ -42,7 +42,7 @@ export const DropdownComponent = () => { return ( diff --git a/app/docs/components/dropdown/variant/DropdownWithIconAndSearchBar.tsx b/app/docs/components/dropdown/variant/DropdownWithIconAndSearchBar.tsx index 5956c316..e835c824 100644 --- a/app/docs/components/dropdown/variant/DropdownWithIconAndSearchBar.tsx +++ b/app/docs/components/dropdown/variant/DropdownWithIconAndSearchBar.tsx @@ -4,7 +4,7 @@ import { CaretRight, Gear, Money, SignOut, SquaresFour } from 'phosphor-react' const DropdownWithIconAndSearchBar = () => { return ( - +
@@ -40,7 +40,7 @@ export const DropdownComponent = () => { return ( diff --git a/app/docs/components/dropdown/variant/DropdownWithTitleDescription.tsx b/app/docs/components/dropdown/variant/DropdownWithTitleDescription.tsx index b378c86a..a6fec3c2 100644 --- a/app/docs/components/dropdown/variant/DropdownWithTitleDescription.tsx +++ b/app/docs/components/dropdown/variant/DropdownWithTitleDescription.tsx @@ -3,7 +3,7 @@ import { Dropdown } from '../../../../src' const DropdownWithTitleDescription = () => { return ( - +

Dropdown Title

@@ -49,7 +49,7 @@ export const DropdownComponent = () => { return ( diff --git a/app/docs/components/modal/variant/ConfirmationModal.tsx b/app/docs/components/modal/variant/ConfirmationModal.tsx index 530667fd..c8b3a649 100644 --- a/app/docs/components/modal/variant/ConfirmationModal.tsx +++ b/app/docs/components/modal/variant/ConfirmationModal.tsx @@ -15,10 +15,10 @@ const ConfirmationModal = () => { } return (
- - @@ -34,10 +34,10 @@ const ConfirmationModal = () => {
- -
@@ -53,10 +53,10 @@ const ConfirmationModal = () => {
- - @@ -83,8 +83,8 @@ export const ModalComponent = () => { }; return ( <> - - + @@ -100,11 +100,11 @@ export const ModalComponent = () => {
-
- - diff --git a/app/docs/components/modal/variant/DefaultModal.tsx b/app/docs/components/modal/variant/DefaultModal.tsx index b861b4c9..d7657541 100644 --- a/app/docs/components/modal/variant/DefaultModal.tsx +++ b/app/docs/components/modal/variant/DefaultModal.tsx @@ -16,10 +16,10 @@ const DefaultModal = () => { return (
- - } size="md" show={showModal} position="center"> @@ -32,10 +32,10 @@ const DefaultModal = () => {
- - @@ -50,10 +50,10 @@ const DefaultModal = () => {
- - @@ -81,8 +81,8 @@ export const ModalComponent = () => { return ( <> - - + + } size="md" @@ -98,10 +98,10 @@ export const ModalComponent = () => {
- - @@ -121,10 +121,10 @@ export const ModalComponent = () => {
- - diff --git a/app/docs/components/modal/variant/HistoryModal.tsx b/app/docs/components/modal/variant/HistoryModal.tsx index af757344..90327460 100644 --- a/app/docs/components/modal/variant/HistoryModal.tsx +++ b/app/docs/components/modal/variant/HistoryModal.tsx @@ -16,10 +16,10 @@ const HistoryModal = () => { return (
- - } size="md" show={showHistoryModal}> @@ -38,10 +38,10 @@ const HistoryModal = () => {
- - @@ -69,10 +69,10 @@ const HistoryModal = () => { - - @@ -104,8 +104,8 @@ export const ModalComponent = () => { return ( <> - - + + } size="md" @@ -136,10 +136,10 @@ export const ModalComponent = () => { - - @@ -189,10 +189,10 @@ export const ModalComponent = () => { - - diff --git a/app/docs/components/modal/variant/ModalPosition.tsx b/app/docs/components/modal/variant/ModalPosition.tsx index f2663b12..6d6a53de 100644 --- a/app/docs/components/modal/variant/ModalPosition.tsx +++ b/app/docs/components/modal/variant/ModalPosition.tsx @@ -10,7 +10,7 @@ const ModalPosition = () => { } return (
- } size="md" show={showModal} position="top-center"> @@ -23,10 +23,10 @@ const ModalPosition = () => {
- - @@ -64,10 +64,10 @@ export const ModalComponent = () => { - - diff --git a/app/docs/components/modal/variant/SizesOfModal.tsx b/app/docs/components/modal/variant/SizesOfModal.tsx index c5cce101..ac9e234d 100644 --- a/app/docs/components/modal/variant/SizesOfModal.tsx +++ b/app/docs/components/modal/variant/SizesOfModal.tsx @@ -10,7 +10,7 @@ const SizesOfModal = () => { } return (
- } size="xl" show={showModal} position="center"> @@ -23,10 +23,10 @@ const SizesOfModal = () => {
- - @@ -64,10 +64,10 @@ export const ModalComponent = () => { - - diff --git a/app/docs/components/navbar/variant/DefaultNavbar.tsx b/app/docs/components/navbar/variant/DefaultNavbar.tsx index 0ffbe647..df3dfbb8 100644 --- a/app/docs/components/navbar/variant/DefaultNavbar.tsx +++ b/app/docs/components/navbar/variant/DefaultNavbar.tsx @@ -29,13 +29,13 @@ const DefaultNavbar = () => { - - @@ -85,13 +85,13 @@ export const NavbarComponent = () => { - - diff --git a/app/docs/components/navbar/variant/EcommerceNavbar.tsx b/app/docs/components/navbar/variant/EcommerceNavbar.tsx index 3b984681..ee06e483 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} /> - @@ -20,10 +20,10 @@ const DefaultNotification = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - @@ -46,7 +46,7 @@ export const NotificationComponent = () => { } return (
- @@ -56,10 +56,10 @@ export const NotificationComponent = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - diff --git a/app/docs/components/notification/variant/NotificationWithAvatar.tsx b/app/docs/components/notification/variant/NotificationWithAvatar.tsx index ba67b202..03421f6a 100644 --- a/app/docs/components/notification/variant/NotificationWithAvatar.tsx +++ b/app/docs/components/notification/variant/NotificationWithAvatar.tsx @@ -10,7 +10,7 @@ const NotificationWithAvatar = () => { return (
- @@ -24,10 +24,10 @@ const NotificationWithAvatar = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - @@ -51,7 +51,7 @@ export const NotificationComponent = () => { return (
- @@ -65,10 +65,10 @@ export const NotificationComponent = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - diff --git a/app/docs/components/notification/variant/NotificationWithCard.tsx b/app/docs/components/notification/variant/NotificationWithCard.tsx index a14c169f..af37fa78 100644 --- a/app/docs/components/notification/variant/NotificationWithCard.tsx +++ b/app/docs/components/notification/variant/NotificationWithCard.tsx @@ -27,13 +27,13 @@ const NotificationWithCard = () => { return (
- - - @@ -53,10 +53,10 @@ const NotificationWithCard = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - @@ -78,10 +78,10 @@ const NotificationWithCard = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - @@ -103,13 +103,13 @@ const NotificationWithCard = () => { /> - - - @@ -198,10 +198,10 @@ export const NotificationComponent = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - @@ -223,13 +223,13 @@ export const NotificationComponent = () => { /> - - @@ -25,10 +25,10 @@ const NotificationWithIcon = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - @@ -53,7 +53,7 @@ export const NotificationComponent = () => { return (
- @@ -67,10 +67,10 @@ export const NotificationComponent = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - diff --git a/app/docs/components/playButton/playButton.mdx b/app/docs/components/playButton/playButton.mdx index 4a93f6a6..e1d3ec48 100644 --- a/app/docs/components/playButton/playButton.mdx +++ b/app/docs/components/playButton/playButton.mdx @@ -6,9 +6,9 @@ import { SizesPlayButton, SizesPlayButtonCode } from './variant/SizesOfPlayButto 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" +import CodePreview from '../../../components/CodePreview' +import CssThemePreview from '../../../components/CssThemePreview' +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents @@ -24,7 +24,7 @@ The play button is an essential component of multimedia interfaces, providing a ## 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. +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 `variant="outlineGray"` property. diff --git a/app/docs/components/playButton/variant/NoBorderPlayButton.tsx b/app/docs/components/playButton/variant/NoBorderPlayButton.tsx index 2fa8d87d..8d77e260 100644 --- a/app/docs/components/playButton/variant/NoBorderPlayButton.tsx +++ b/app/docs/components/playButton/variant/NoBorderPlayButton.tsx @@ -11,18 +11,18 @@ const NoBorderPlayButton = () => { } const NoBorderPlayButtonCode = ` -"use client"; -import { Play } from "phosphor-react"; -import { PlayButton } from "keep-react"; +"use client" +import { Play } from "phosphor-react" +import { PlayButton } from "keep-react" export const PlayButtonComponent = () => { return ( } - /> - ); + title="Play Video" + type="text" + icon={} + /> + ) } ` diff --git a/app/docs/components/playButton/variant/SecondaryPlayButton.tsx b/app/docs/components/playButton/variant/SecondaryPlayButton.tsx index 61422f35..9bdac65f 100644 --- a/app/docs/components/playButton/variant/SecondaryPlayButton.tsx +++ b/app/docs/components/playButton/variant/SecondaryPlayButton.tsx @@ -11,18 +11,18 @@ const SecondaryPlayButton = () => { } const SecondaryPlayButtonCode = ` -"use client"; -import { Play } from "phosphor-react"; -import { PlayButton } from "keep-react"; +"use client" +import { Play } from "phosphor-react" +import { PlayButton } from "keep-react" export const PlayButtonComponent = () => { return ( } - /> - ); + title="Play Video" + type="outlineGray" + icon={} + /> + ) } ` diff --git a/app/docs/components/popover/variant/DefaultPopover.tsx b/app/docs/components/popover/variant/DefaultPopover.tsx index 72c22637..926cedd8 100644 --- a/app/docs/components/popover/variant/DefaultPopover.tsx +++ b/app/docs/components/popover/variant/DefaultPopover.tsx @@ -11,7 +11,7 @@ const DefaultPopover = () => { some form, by injected humour - @@ -36,7 +36,7 @@ export const PopoverComponent = () => { some form, by injected humour - diff --git a/app/docs/components/popover/variant/PopoverPosition.tsx b/app/docs/components/popover/variant/PopoverPosition.tsx index 65091092..866fcde0 100644 --- a/app/docs/components/popover/variant/PopoverPosition.tsx +++ b/app/docs/components/popover/variant/PopoverPosition.tsx @@ -11,7 +11,7 @@ const PopoverPosition = () => { some form, by injected humour - @@ -36,7 +36,7 @@ export const PopoverComponent = () => { some form, by injected humour - diff --git a/app/docs/components/popover/variant/TriggerVariant.tsx b/app/docs/components/popover/variant/TriggerVariant.tsx index 9f385c4d..105dc028 100644 --- a/app/docs/components/popover/variant/TriggerVariant.tsx +++ b/app/docs/components/popover/variant/TriggerVariant.tsx @@ -11,7 +11,7 @@ const TriggerVariantPopover = () => { some form, by injected humour - @@ -36,7 +36,7 @@ export const PopoverComponent = () => { some form, by injected humour - diff --git a/app/docs/components/searchBar/variant/SearchBarWithColorVariant.tsx b/app/docs/components/searchBar/variant/SearchBarWithColorVariant.tsx index fd9f5f2b..7403633d 100644 --- a/app/docs/components/searchBar/variant/SearchBarWithColorVariant.tsx +++ b/app/docs/components/searchBar/variant/SearchBarWithColorVariant.tsx @@ -21,13 +21,13 @@ const SearchBarWithColorVariant = () => { placeholder="Search Anything" bordered={false} addon={ - } addonPosition="right" icon={ - } addonPosition="right" icon={ -
@@ -119,7 +119,7 @@ const SidebarWithCTA = () => {
Beta -
diff --git a/app/docs/components/spinner/variant/SpinnerButton.tsx b/app/docs/components/spinner/variant/SpinnerButton.tsx index 16986a5c..d0728598 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 = () => {
- - @@ -194,7 +194,7 @@ const BorderedTable = () => { - @@ -273,7 +273,7 @@ const BorderedTable = () => { - @@ -352,7 +352,7 @@ const BorderedTable = () => { - @@ -431,7 +431,7 @@ const BorderedTable = () => { - @@ -462,13 +462,13 @@ export const TableComponent = () => {
- - @@ -640,7 +640,7 @@ export const TableComponent = () => { - @@ -719,7 +719,7 @@ export const TableComponent = () => { - @@ -798,7 +798,7 @@ export const TableComponent = () => { - @@ -877,7 +877,7 @@ export const TableComponent = () => { - diff --git a/app/docs/components/table/variant/DefaultTable.tsx b/app/docs/components/table/variant/DefaultTable.tsx index 1ff57a03..7d9fb476 100644 --- a/app/docs/components/table/variant/DefaultTable.tsx +++ b/app/docs/components/table/variant/DefaultTable.tsx @@ -16,13 +16,13 @@ const DefaultTable = () => {
- - @@ -194,7 +194,7 @@ const DefaultTable = () => { - @@ -273,7 +273,7 @@ const DefaultTable = () => { - @@ -352,7 +352,7 @@ const DefaultTable = () => { - @@ -431,7 +431,7 @@ const DefaultTable = () => { - @@ -468,13 +468,13 @@ export const TableComponent = () => {
- - @@ -646,7 +646,7 @@ export const TableComponent = () => { - @@ -725,7 +725,7 @@ export const TableComponent = () => { - @@ -804,7 +804,7 @@ export const TableComponent = () => { - @@ -883,7 +883,7 @@ export const TableComponent = () => { - diff --git a/app/docs/components/table/variant/FilesUploadedTable.tsx b/app/docs/components/table/variant/FilesUploadedTable.tsx index e9c1e9b0..87212a76 100644 --- a/app/docs/components/table/variant/FilesUploadedTable.tsx +++ b/app/docs/components/table/variant/FilesUploadedTable.tsx @@ -12,13 +12,13 @@ const FilesUploadedTable = () => {

Files uploaded

- - @@ -163,7 +163,7 @@ const FilesUploadedTable = () => { - @@ -229,7 +229,7 @@ const FilesUploadedTable = () => { - @@ -295,7 +295,7 @@ const FilesUploadedTable = () => { - @@ -361,7 +361,7 @@ const FilesUploadedTable = () => { - @@ -388,13 +388,13 @@ export const TableComponent = () => {

Files uploaded

- - @@ -539,7 +539,7 @@ export const TableComponent = () => { - @@ -605,7 +605,7 @@ export const TableComponent = () => { - @@ -671,7 +671,7 @@ export const TableComponent = () => { - @@ -737,7 +737,7 @@ export const TableComponent = () => { - diff --git a/app/docs/components/table/variant/HoverableTable.tsx b/app/docs/components/table/variant/HoverableTable.tsx index f454ccf4..1985f423 100644 --- a/app/docs/components/table/variant/HoverableTable.tsx +++ b/app/docs/components/table/variant/HoverableTable.tsx @@ -12,13 +12,13 @@ const HoverableTable = () => {

Files uploaded

- - @@ -163,7 +163,7 @@ const HoverableTable = () => { - @@ -229,7 +229,7 @@ const HoverableTable = () => { - @@ -295,7 +295,7 @@ const HoverableTable = () => { - @@ -361,7 +361,7 @@ const HoverableTable = () => { - @@ -388,13 +388,13 @@ export const TableComponent = () => {

Files uploaded

- - @@ -539,7 +539,7 @@ export const TableComponent = () => { - @@ -605,7 +605,7 @@ export const TableComponent = () => { - @@ -671,7 +671,7 @@ export const TableComponent = () => { - @@ -737,7 +737,7 @@ export const TableComponent = () => { - diff --git a/app/docs/components/table/variant/OrdersTable.tsx b/app/docs/components/table/variant/OrdersTable.tsx index 0911a061..a4e39b8f 100644 --- a/app/docs/components/table/variant/OrdersTable.tsx +++ b/app/docs/components/table/variant/OrdersTable.tsx @@ -25,13 +25,13 @@ const OrdersTable = () => {

Orders

- - @@ -178,7 +178,7 @@ const OrdersTable = () => { - @@ -235,7 +235,7 @@ const OrdersTable = () => { - @@ -292,7 +292,7 @@ const OrdersTable = () => { - @@ -349,7 +349,7 @@ const OrdersTable = () => { - @@ -406,7 +406,7 @@ const OrdersTable = () => { - @@ -446,13 +446,13 @@ export const TableComponent = () => {

Orders

- - @@ -599,7 +599,7 @@ export const TableComponent = () => { - @@ -656,7 +656,7 @@ export const TableComponent = () => { - @@ -713,7 +713,7 @@ export const TableComponent = () => { - @@ -770,7 +770,7 @@ export const TableComponent = () => { - @@ -827,7 +827,7 @@ export const TableComponent = () => { - diff --git a/app/docs/components/table/variant/StripedTable.tsx b/app/docs/components/table/variant/StripedTable.tsx index 87f5948d..a234f012 100644 --- a/app/docs/components/table/variant/StripedTable.tsx +++ b/app/docs/components/table/variant/StripedTable.tsx @@ -12,13 +12,13 @@ const StripedTable = () => {

Files uploaded

- - @@ -163,7 +163,7 @@ const StripedTable = () => { - @@ -229,7 +229,7 @@ const StripedTable = () => { - @@ -295,7 +295,7 @@ const StripedTable = () => { - @@ -361,7 +361,7 @@ const StripedTable = () => { - @@ -388,13 +388,13 @@ export const TableComponent = () => {

Files uploaded

- - @@ -539,7 +539,7 @@ export const TableComponent = () => { - @@ -605,7 +605,7 @@ export const TableComponent = () => { - @@ -671,7 +671,7 @@ export const TableComponent = () => { - @@ -737,7 +737,7 @@ export const TableComponent = () => { - diff --git a/app/docs/components/table/variant/TransactionsTable.tsx b/app/docs/components/table/variant/TransactionsTable.tsx index 5d9c3996..28906822 100644 --- a/app/docs/components/table/variant/TransactionsTable.tsx +++ b/app/docs/components/table/variant/TransactionsTable.tsx @@ -12,13 +12,13 @@ const TransactionsTable = () => {

Cash Out Transactions

- - @@ -163,7 +163,7 @@ const TransactionsTable = () => { - @@ -225,7 +225,7 @@ const TransactionsTable = () => { - @@ -287,7 +287,7 @@ const TransactionsTable = () => { - @@ -349,7 +349,7 @@ const TransactionsTable = () => { - @@ -376,13 +376,13 @@ export const TableComponent = () => {

Cash Out Transactions

- - @@ -527,7 +527,7 @@ export const TableComponent = () => { - @@ -589,7 +589,7 @@ export const TableComponent = () => { - @@ -651,7 +651,7 @@ export const TableComponent = () => { - @@ -713,7 +713,7 @@ export const TableComponent = () => { - diff --git a/app/docs/components/timeline/variant/DashedBorderTimeline.tsx b/app/docs/components/timeline/variant/DashedBorderTimeline.tsx index f4fa0b84..4a2bccba 100644 --- a/app/docs/components/timeline/variant/DashedBorderTimeline.tsx +++ b/app/docs/components/timeline/variant/DashedBorderTimeline.tsx @@ -14,7 +14,7 @@ const DashedBorderTimeline = () => { Introducing a set of exciting new features that enhance user experience and functionality. - @@ -64,7 +64,7 @@ export const TimelineComponent = () => { Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. - diff --git a/app/docs/components/timeline/variant/DefaultTimeline.tsx b/app/docs/components/timeline/variant/DefaultTimeline.tsx index 91abac18..84130f2a 100644 --- a/app/docs/components/timeline/variant/DefaultTimeline.tsx +++ b/app/docs/components/timeline/variant/DefaultTimeline.tsx @@ -15,7 +15,7 @@ const DefaultTimeline = () => { Launching our new mobile app on both iOS and Android platforms, providing users with seamless access to our services on the go. - @@ -65,7 +65,7 @@ export const TimelineComponent = () => { Launching our new mobile app on both iOS and Android platforms, providing users with seamless access to our services on the go. - diff --git a/app/docs/components/tooltip/variant/DefaultTooltip.tsx b/app/docs/components/tooltip/variant/DefaultTooltip.tsx index 25cb22ed..465b2e86 100644 --- a/app/docs/components/tooltip/variant/DefaultTooltip.tsx +++ b/app/docs/components/tooltip/variant/DefaultTooltip.tsx @@ -4,7 +4,7 @@ import { Button, Tooltip } from '../../../../src' const DefaultTooltip = () => { return ( - @@ -24,7 +24,7 @@ export const TooltipComponent = () => { animation="duration-300" style="dark" > - diff --git a/app/docs/components/tooltip/variant/TooltipPlacement.tsx b/app/docs/components/tooltip/variant/TooltipPlacement.tsx index 184e112f..d872802f 100644 --- a/app/docs/components/tooltip/variant/TooltipPlacement.tsx +++ b/app/docs/components/tooltip/variant/TooltipPlacement.tsx @@ -5,22 +5,22 @@ const TooltipPlacement = () => { return (
- - - - @@ -42,7 +42,7 @@ export const TooltipComponent = () => { animation="duration-300" style="dark" > - @@ -53,7 +53,7 @@ export const TooltipComponent = () => { animation="duration-300" style="dark" > - @@ -64,7 +64,7 @@ export const TooltipComponent = () => { animation="duration-300" style="dark" > - @@ -75,7 +75,7 @@ export const TooltipComponent = () => { animation="duration-300" style="dark" > - diff --git a/app/docs/components/tooltip/variant/TooltipStyles.tsx b/app/docs/components/tooltip/variant/TooltipStyles.tsx index e586bbc7..477825ee 100644 --- a/app/docs/components/tooltip/variant/TooltipStyles.tsx +++ b/app/docs/components/tooltip/variant/TooltipStyles.tsx @@ -5,12 +5,12 @@ const TooltipStyles = () => { return (
- - @@ -32,7 +32,7 @@ export const TooltipComponent = () => { animation="duration-300" style="light" > - @@ -43,7 +43,7 @@ export const TooltipComponent = () => { animation="duration-300" style="dark" > - diff --git a/app/docs/components/tooltip/variant/TooltipTriggering.tsx b/app/docs/components/tooltip/variant/TooltipTriggering.tsx index cbe6b142..34f65b92 100644 --- a/app/docs/components/tooltip/variant/TooltipTriggering.tsx +++ b/app/docs/components/tooltip/variant/TooltipTriggering.tsx @@ -5,12 +5,12 @@ const TooltipTriggering = () => { return (
- - @@ -32,7 +32,7 @@ export const TooltipComponent = () => { animation="duration-300" style="dark" > - @@ -43,7 +43,7 @@ export const TooltipComponent = () => { animation="duration-300" style="dark" > - diff --git a/app/docs/components/tooltip/variant/TooltipWithLargeText.tsx b/app/docs/components/tooltip/variant/TooltipWithLargeText.tsx index 4f04fd1b..70c1a50f 100644 --- a/app/docs/components/tooltip/variant/TooltipWithLargeText.tsx +++ b/app/docs/components/tooltip/variant/TooltipWithLargeText.tsx @@ -11,7 +11,7 @@ const TooltipWithLargeText = () => { placement="top" animation="duration-300" style="dark"> - @@ -22,7 +22,7 @@ const TooltipWithLargeText = () => { placement="bottom" animation="duration-300" style="light"> - @@ -45,7 +45,7 @@ export const TooltipComponent = () => { animation="duration-300" style="dark" > - @@ -57,7 +57,7 @@ export const TooltipComponent = () => { animation="duration-300" style="light" > - diff --git a/app/src/Keep/KeepTheme.ts b/app/src/Keep/KeepTheme.ts index cabe9b25..89044c0f 100644 --- a/app/src/Keep/KeepTheme.ts +++ b/app/src/Keep/KeepTheme.ts @@ -71,7 +71,7 @@ export interface KeepSizes { '7xl': string } -export interface KeepButtonType { +export interface KeepButtonVariant { primary: string outlineGray: string outlinePrimary: string diff --git a/app/src/components/Button/Button.stories.tsx b/app/src/components/Button/Button.stories.tsx index 2c6a4e1a..2c801b8e 100644 --- a/app/src/components/Button/Button.stories.tsx +++ b/app/src/components/Button/Button.stories.tsx @@ -6,8 +6,8 @@ const meta: Meta = { component: Button, tags: ['autodocs'], argTypes: { - type: { - description: 'Available button type', + variant: { + description: 'Available button variant', control: { type: 'select', }, @@ -17,6 +17,17 @@ const meta: Meta = { defaultValue: { summary: 'primary' }, }, }, + type: { + description: 'Available button type', + control: { + type: 'select', + }, + options: ['button', 'reset', 'submit'], + table: { + type: { summary: 'string' }, + defaultValue: { summary: 'button' }, + }, + }, size: { description: 'Available button size', control: { @@ -107,7 +118,7 @@ type Story = StoryObj export const DefaultButton: Story = { args: { - type: 'default', + variant: 'default', size: 'md', children: 'Default Button', }, @@ -115,49 +126,49 @@ export const DefaultButton: Story = { export const PrimaryButton: Story = { args: { ...DefaultButton.args, - type: 'primary', + variant: 'primary', children: 'Primary Button', }, } export const DashedButton: Story = { args: { ...DefaultButton.args, - type: 'dashed', + variant: 'dashed', children: 'Dashed Button', }, } export const OutlinePrimaryButton: Story = { args: { ...DefaultButton.args, - type: 'outlinePrimary', + variant: 'outlinePrimary', children: 'Outline Primary Button', }, } export const OutlineGrayButton: Story = { args: { ...DefaultButton.args, - type: 'outlineGray', + variant: 'outlineGray', children: 'Outline Gray Button', }, } export const TextButton: Story = { args: { ...DefaultButton.args, - type: 'text', + variant: 'text', children: 'Text Button', }, } export const LinkPrimaryButton: Story = { args: { ...DefaultButton.args, - type: 'linkPrimary', + variant: 'linkPrimary', children: 'Link Primary Button', }, } export const LinkGrayButton: Story = { args: { ...DefaultButton.args, - type: 'linkGray', + variant: 'linkGray', children: 'Link Gray Button', }, } diff --git a/app/src/components/Button/Button.tsx b/app/src/components/Button/Button.tsx index 59e5fdf9..f0466fbe 100644 --- a/app/src/components/Button/Button.tsx +++ b/app/src/components/Button/Button.tsx @@ -1,6 +1,6 @@ import { ComponentProps, forwardRef, ReactNode } from 'react' import { excludeClassName } from '../../helpers/exclude' -import { KeepBoolean, KeepButtonType, KeepColors, KeepSizes } from '../../Keep/KeepTheme' +import { KeepBoolean, KeepButtonVariant, KeepColors, KeepSizes } from '../../Keep/KeepTheme' import { useTheme } from '../../Keep/ThemeContext' import type { PositionInButtonGroup } from './ButtonGroup' import { ButtonGroup } from './ButtonGroup' @@ -84,8 +84,14 @@ export interface ButtonProps extends Omit, 'className' * @type {keyof ButtonTypes} * @default 'default' */ - type?: keyof ButtonTypes + type?: 'reset' | 'submit' | 'button' + /** + * The type of the button. + * @type {keyof ButtonTypes} + * @default 'default' + */ + variant?: keyof ButtonVariant /** * The label for the notification badge displayed on the button. * @type {string} @@ -153,9 +159,9 @@ export interface ButtonProps extends Omit, 'className' onClick?: () => void } -export interface ButtonTypes +export interface ButtonVariant extends Pick< - KeepButtonType, + KeepButtonVariant, 'primary' | 'dashed' | 'text' | 'linkPrimary' | 'linkGray' | 'outlineGray' | 'outlinePrimary' | 'default' > { [key: string]: string @@ -175,7 +181,8 @@ const ButtonComponent = forwardRef( onClick, color = 'info', disabled = false, - type = 'default', + type = 'button', + variant = 'primary', href, notificationLabel, pill = false, @@ -202,19 +209,19 @@ const ButtonComponent = forwardRef( groupTheme.position[positionInGroup], !circle && theme.pill[pill ? 'on' : 'off'], circle && theme.circle.size[size], - type === 'default' && theme.default.color[color], - type === 'primary' && theme.primary.color[color], - type === 'outlineGray' && theme.outlineGray.color[color], - type === 'outlinePrimary' && theme.outlinePrimary.color[color], - type === 'dashed' && theme.dashed.color[color], - type === 'text' && theme.text.color[color], - type === 'linkPrimary' && theme.linkPrimary.color[color], - type === 'linkGray' && theme.linkGray.color[color], + variant === 'default' && theme.default.color[color], + variant === 'primary' && theme.primary.color[color], + variant === 'outlineGray' && theme.outlineGray.color[color], + variant === 'outlinePrimary' && theme.outlinePrimary.color[color], + variant === 'dashed' && theme.dashed.color[color], + variant === 'text' && theme.text.color[color], + variant === 'linkPrimary' && theme.linkPrimary.color[color], + variant === 'linkGray' && theme.linkGray.color[color], className, )} disabled={disabled} href={href} - type={isLink ? undefined : 'button'} + type={isLink ? undefined : type} onClick={onClick} {...theirProps}> ( theme.inner.base, !circle && theme.size[size], theme.inner.position[positionInGroup], - theme.default.transition[type === 'default' ? 'on' : 'off'], - theme.primary.transition[type === 'primary' ? 'on' : 'off'], - theme.outlineGray.transition[type === 'outlineGray' ? 'on' : 'off'], - theme.outlinePrimary.transition[type === 'outlinePrimary' ? 'on' : 'off'], - theme.dashed.transition[type === 'dashed' ? 'on' : 'off'], - theme.text.transition[type === 'text' ? 'on' : 'off'], - theme.linkPrimary.transition[type === 'linkPrimary' ? 'on' : 'off'], - theme.linkGray.transition[type === 'linkGray' ? 'on' : 'off'], + theme.default.transition[variant === 'default' ? 'on' : 'off'], + theme.primary.transition[variant === 'primary' ? 'on' : 'off'], + theme.outlineGray.transition[variant === 'outlineGray' ? 'on' : 'off'], + theme.outlinePrimary.transition[variant === 'outlinePrimary' ? 'on' : 'off'], + theme.dashed.transition[variant === 'dashed' ? 'on' : 'off'], + theme.text.transition[variant === 'text' ? 'on' : 'off'], + theme.linkPrimary.transition[variant === 'linkPrimary' ? 'on' : 'off'], + theme.linkGray.transition[variant === 'linkGray' ? 'on' : 'off'], )}> <> {typeof children !== 'undefined' && children} diff --git a/app/src/components/Card/Card.stories.tsx b/app/src/components/Card/Card.stories.tsx index 9901d9db..89e1acbc 100644 --- a/app/src/components/Card/Card.stories.tsx +++ b/app/src/components/Card/Card.stories.tsx @@ -296,7 +296,7 @@ export const CardWithPostCard: Story = { - + , ), @@ -327,9 +327,7 @@ export const RecentPostsCard: Story = { - - Tips & Advice - + Tips & Advice Keep React @@ -373,7 +371,7 @@ export const EcommerceProductCard: Story = { - $649,00 @@ -464,19 +462,19 @@ export const PodcastCard: Story = { - - } /> - - @@ -528,10 +526,10 @@ export const PricingCard: Story = { - - diff --git a/app/src/components/Chart/AreaCharts.stories.tsx b/app/src/components/Chart/AreaCharts.stories.tsx index f240a334..260be0f4 100644 --- a/app/src/components/Chart/AreaCharts.stories.tsx +++ b/app/src/components/Chart/AreaCharts.stories.tsx @@ -159,7 +159,7 @@ export const ChartWithDoubleSeriesAndGraphLine: Story = { }, } -export const ChartWithGridlineAndGraphline: Story = { +export const ChartWithGridLineAndGraphLine: Story = { args: { ...ChartWithDoubleSeries.args, showGridLine: true, @@ -168,48 +168,48 @@ export const ChartWithGridlineAndGraphline: Story = { }, } -export const ChartWithSmoothline: Story = { +export const ChartWithSmoothLine: Story = { args: { ...DefaultAreaChart.args, chartType: 'natural', }, } -export const ChartWithSmoothlineWithTooltip: Story = { +export const ChartWithSmoothLineWithTooltip: Story = { args: { - ...ChartWithSmoothline.args, + ...ChartWithSmoothLine.args, showTooltip: true, }, } -export const ChartWithSmoothlineWithGraphLine: Story = { +export const ChartWithSmoothLineWithGraphLine: Story = { args: { - ...ChartWithSmoothlineWithTooltip.args, + ...ChartWithSmoothLineWithTooltip.args, showXaxis: true, showYaxis: true, }, } -export const ChartWithSmoothlineWithGraphLineAndGridLine: Story = { +export const ChartWithSmoothLineWithGraphLineAndGridLine: Story = { args: { - ...ChartWithSmoothlineWithGraphLine.args, + ...ChartWithSmoothLineWithGraphLine.args, showGridLine: true, }, } -export const ChartWithSmoothlineDoubleSeries: Story = { +export const ChartWithSmoothLineDoubleSeries: Story = { args: { - ...ChartWithSmoothlineWithTooltip.args, + ...ChartWithSmoothLineWithTooltip.args, secondaryDataKey: 'sell', }, } -export const ChartWithSmoothlineDoubleSeriesAndGraphLine: Story = { +export const ChartWithSmoothLineDoubleSeriesAndGraphLine: Story = { args: { - ...ChartWithSmoothlineDoubleSeries.args, + ...ChartWithSmoothLineDoubleSeries.args, showXaxis: true, showYaxis: true, }, } -export const ChartWithSmoothlineDoubleSeriesAndGridLine: Story = { +export const ChartWithSmoothLineDoubleSeriesAndGridLine: Story = { args: { - ...ChartWithSmoothlineDoubleSeriesAndGraphLine.args, + ...ChartWithSmoothLineDoubleSeriesAndGraphLine.args, showGridLine: true, }, } diff --git a/app/src/components/Chart/CustomTooltip.tsx b/app/src/components/Chart/CustomTooltip.tsx index c746a3b6..87bbe97f 100644 --- a/app/src/components/Chart/CustomTooltip.tsx +++ b/app/src/components/Chart/CustomTooltip.tsx @@ -10,7 +10,7 @@ export const CustomTooltip = ({ active, payload }: TooltipProps {payload.length > 1 ? ( - diff --git a/app/src/components/Dropdown/Dropdown.stories.tsx b/app/src/components/Dropdown/Dropdown.stories.tsx index 29f05fc8..d994babd 100644 --- a/app/src/components/Dropdown/Dropdown.stories.tsx +++ b/app/src/components/Dropdown/Dropdown.stories.tsx @@ -171,7 +171,7 @@ export const DefaultDropdown: Story = { args: { label: 'Dropdown button', size: 'sm', - type: 'primary', + variant: 'primary', dismissOnClick: true, children: removeFragment( <> diff --git a/app/src/components/Empty/Redirect.tsx b/app/src/components/Empty/Redirect.tsx index 02d071ab..9de089b4 100644 --- a/app/src/components/Empty/Redirect.tsx +++ b/app/src/components/Empty/Redirect.tsx @@ -58,7 +58,7 @@ export const Redirect: FC = ({ }) => { if (!children) { return ( - ) diff --git a/app/src/components/Modal/Modal.stories.tsx b/app/src/components/Modal/Modal.stories.tsx index 63d447af..1ecb8954 100644 --- a/app/src/components/Modal/Modal.stories.tsx +++ b/app/src/components/Modal/Modal.stories.tsx @@ -57,10 +57,10 @@ const DefaultModalComponent = () => {
- - @@ -79,10 +79,10 @@ const DefaultModalComponent = () => {
- - @@ -112,10 +112,10 @@ const ConfirmationModalComponent = () => {
- -
@@ -136,10 +136,10 @@ const ConfirmationModalComponent = () => {
- - @@ -180,10 +180,10 @@ const HistoryModalComponent = () => {
- - @@ -221,10 +221,10 @@ const HistoryModalComponent = () => {
- - diff --git a/app/src/components/Navigation/Navigation.stories.tsx b/app/src/components/Navigation/Navigation.stories.tsx index 8fc25912..d55c9006 100644 --- a/app/src/components/Navigation/Navigation.stories.tsx +++ b/app/src/components/Navigation/Navigation.stories.tsx @@ -67,13 +67,13 @@ export const DefaultNavbar: Story = { - - @@ -111,7 +111,7 @@ export const NavbarWithCenterLogo: Story = { - @@ -24,10 +24,10 @@ const DefaultNotificationComponent = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - @@ -44,7 +44,7 @@ const NotificationWithAvatarComponent = () => { return (
- @@ -58,10 +58,10 @@ const NotificationWithAvatarComponent = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - @@ -79,7 +79,7 @@ const NotificationWithIconComponent = () => { return (
- @@ -93,10 +93,10 @@ const NotificationWithIconComponent = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - @@ -129,13 +129,13 @@ const NotificationWithCardComponent = () => { return (
- - - @@ -155,10 +155,10 @@ const NotificationWithCardComponent = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - @@ -180,10 +180,10 @@ const NotificationWithCardComponent = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - @@ -205,13 +205,13 @@ const NotificationWithCardComponent = () => { /> - - ) } return ( - diff --git a/app/src/components/Popover/Popover.stories.tsx b/app/src/components/Popover/Popover.stories.tsx index 68d72522..facfb903 100644 --- a/app/src/components/Popover/Popover.stories.tsx +++ b/app/src/components/Popover/Popover.stories.tsx @@ -79,7 +79,7 @@ export const DefaultPopover: Story = { some form, by injected humour - @@ -133,7 +133,7 @@ export const TriggerVariantPopover: Story = { some form, by injected humour - @@ -156,7 +156,7 @@ export const PopoverPosition: Story = { some form, by injected humour - diff --git a/app/src/components/SearchBar/SearchBar.stories.tsx b/app/src/components/SearchBar/SearchBar.stories.tsx index bbcf8c82..e68d0368 100644 --- a/app/src/components/SearchBar/SearchBar.stories.tsx +++ b/app/src/components/SearchBar/SearchBar.stories.tsx @@ -149,13 +149,13 @@ const SearchBarWithColorVariantCom = () => { withBg bordered={false} addon={ - } addonPosition="right" icon={ - -
-
-
-
-
- -
- -
- - diff --git a/app/src/components/Tooltip/Tooltip.stories.tsx b/app/src/components/Tooltip/Tooltip.stories.tsx index bb569c97..fe5940cc 100644 --- a/app/src/components/Tooltip/Tooltip.stories.tsx +++ b/app/src/components/Tooltip/Tooltip.stories.tsx @@ -113,7 +113,7 @@ export const DefaultTooltip: Story = { animation: 'duration-300', style: 'dark', children: ( - ), diff --git a/app/src/components/Upload/InputField.tsx b/app/src/components/Upload/InputField.tsx index 642f0311..e8103bb8 100644 --- a/app/src/components/Upload/InputField.tsx +++ b/app/src/components/Upload/InputField.tsx @@ -37,7 +37,7 @@ export const InputField: FC = () => { title, icon, id, - uploadBtnType, + uploadBtnType = 'primary', className, labelStyle, } = useUploadContext() @@ -60,7 +60,7 @@ export const InputField: FC = () => {

{fileType ? fileType : 'Files: JPEG, PNG, GIF'}

From 4126fe4ad22d70035c2efe7e8c019c3fc9b01b9a Mon Sep 17 00:00:00 2001 From: Arifulislam5577 Date: Tue, 2 Jan 2024 18:52:40 +0600 Subject: [PATCH 03/70] Tested: Button component restructured. --- app/new/Button/Button.tsx | 40 +++++++++++++++++++++++++++++++++++++++ app/new/page.tsx | 11 +++++++++++ 2 files changed, 51 insertions(+) create mode 100644 app/new/Button/Button.tsx create mode 100644 app/new/page.tsx diff --git a/app/new/Button/Button.tsx b/app/new/Button/Button.tsx new file mode 100644 index 00000000..51432810 --- /dev/null +++ b/app/new/Button/Button.tsx @@ -0,0 +1,40 @@ +import { ButtonHTMLAttributes, FC, ReactNode } from 'react' +import { ButtonVariant } from '~/app/src' +import { cn } from '~/app/src/helpers/cn' + +interface ButtonProps extends ButtonHTMLAttributes { + children?: ReactNode + size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' + color?: 'error' | 'info' | 'success' | 'warning' + type?: 'reset' | 'submit' | 'button' + variant?: keyof ButtonVariant + className?: string +} + +const buttonThemes = { + base: 'active:focus:scale-95 duration-150 rounded-md', + color: { + error: 'bg-error-500 text-white', + info: 'bg-primary-500 text-white', + success: 'bg-success-500 text-white', + warning: 'bg-warning-500 text-white', + }, + size: { + xs: 'text-body-5 px-3 py-2 text-body-5 font-medium', + sm: 'text-body-5 px-4 py-2.5 text-body-5 font-medium', + md: 'text-body-4 px-5 py-3 text-body-4 font-medium', + lg: 'text-body-3 px-5 py-[14px] text-body-4 font-medium', + xl: 'text-body-3 px-[22px] py-4 text-body-3 font-medium', + '2xl': 'text-body-2 px-6 py-[18px] text-body-3 font-medium', + }, +} + +const Button: FC = ({ children, className, size = 'md', color = 'info' }) => { + return ( + + ) +} + +export { Button } diff --git a/app/new/page.tsx b/app/new/page.tsx new file mode 100644 index 00000000..7e2cf8f9 --- /dev/null +++ b/app/new/page.tsx @@ -0,0 +1,11 @@ +import { Button } from './Button/Button' + +const New = () => { + return ( +
+ +
+ ) +} + +export default New From fdf5cf7eab5c884a667a571e298dedb694b39e7e Mon Sep 17 00:00:00 2001 From: Arifulislam5577 Date: Fri, 12 Jan 2024 18:22:38 +0600 Subject: [PATCH 04/70] Updated: Button component updated. --- app/components/ComponentsList.tsx | 10 +- .../button/variant/KeepButtonColor.tsx | 34 +- .../button/variant/KeepButtonIcon.tsx | 50 +- .../button/variant/KeepButtonShape.tsx | 27 +- .../button/variant/KeepButtonSize.tsx | 36 +- .../button/variant/KeepButtonType.tsx | 101 ++- .../variant/ButtonGroupWithIcon.tsx | 24 +- .../variant/ButtonGroupWithOnlyIcon.tsx | 34 +- .../variant/DefaultButtonGroup.tsx | 18 +- .../components/card/variant/CardWithIcon.tsx | 6 +- .../card/variant/HorizontalCard.tsx | 8 +- .../components/card/variant/PricingCard.tsx | 8 +- .../components/card/variant/ProductCard.tsx | 76 +- .../dropdown/variant/DefaultDropdown.tsx | 3 +- .../dropdown/variant/DropdownSearchBar.tsx | 3 +- .../variant/DropdownWithBothSideIcon.tsx | 3 +- .../variant/DropdownWithIconAndSearchBar.tsx | 3 +- .../variant/DropdownWithTitleDescription.tsx | 3 +- .../modal/variant/ConfirmationModal.tsx | 49 +- .../components/modal/variant/DefaultModal.tsx | 54 +- .../components/modal/variant/HistoryModal.tsx | 90 +- .../modal/variant/ModalPosition.tsx | 25 +- .../components/modal/variant/SizesOfModal.tsx | 25 +- .../navbar/variant/DefaultNavbar.tsx | 6 +- .../navbar/variant/EcommerceNavbar.tsx | 4 +- .../variant/DefaultNotification.tsx | 18 +- .../variant/NotificationWithAvatar.tsx | 16 +- .../variant/NotificationWithCard.tsx | 32 +- .../variant/NotificationWithIcon.tsx | 16 +- app/docs/components/playButton/index.tsx | 7 - app/docs/components/playButton/page.tsx | 19 - app/docs/components/playButton/playButton.mdx | 69 -- .../components/playButton/playButtonApi.ts | 51 -- .../playButton/variant/BlurPlayButton.tsx | 39 - .../playButton/variant/CirclePlayButton.tsx | 30 - .../playButton/variant/DefaultPlayButton.tsx | 25 - .../playButton/variant/NoBorderPlayButton.tsx | 29 - .../variant/SecondaryPlayButton.tsx | 29 - .../playButton/variant/SizesOfPlayButton.tsx | 37 - .../popover/variant/DefaultPopover.tsx | 4 +- .../popover/variant/PopoverPosition.tsx | 4 +- .../popover/variant/TriggerVariant.tsx | 4 +- .../variant/SearchBarWithColorVariant.tsx | 12 +- .../spinner/variant/SpinnerButton.tsx | 8 +- .../steps/variant/InterActiveStep.tsx | 4 +- .../table/variant/BorderedTable.tsx | 790 ++---------------- .../components/table/variant/DefaultTable.tsx | 784 ++--------------- .../table/variant/FilesUploadedTable.tsx | 646 ++------------ .../table/variant/HoverableTable.tsx | 742 +++------------- .../components/table/variant/OrdersTable.tsx | 692 +-------------- .../components/table/variant/StripedTable.tsx | 742 +++------------- .../table/variant/TableActionBtn.tsx | 37 + .../table/variant/TransactionsTable.tsx | 608 ++------------ .../timeline/variant/DashedBorderTimeline.tsx | 4 +- .../timeline/variant/DefaultTimeline.tsx | 4 +- .../tooltip/variant/DefaultTooltip.tsx | 6 +- .../tooltip/variant/TooltipPlacement.tsx | 24 +- .../tooltip/variant/TooltipStyles.tsx | 12 +- .../tooltip/variant/TooltipTriggering.tsx | 12 +- .../tooltip/variant/TooltipWithLargeText.tsx | 12 +- app/new/Button/Button.tsx | 164 +++- app/new/Button/ButtonGroup.tsx | 10 + app/new/page.tsx | 26 +- app/src/Keep/KeepTheme.ts | 4 - .../Accordion/Accordion.stories.tsx | 2 +- app/src/components/Accordion/Accordion.tsx | 9 +- app/src/components/Accordion/Container.tsx | 2 +- app/src/components/Accordion/Content.tsx | 2 +- app/src/components/Accordion/Icon.tsx | 2 +- app/src/components/Accordion/Panel.tsx | 2 +- app/src/components/Accordion/Title.tsx | 7 +- app/src/components/Accordion/theme.ts | 2 +- app/src/components/Button/Button.stories.tsx | 174 ---- app/src/components/Button/Button.tsx | 299 ++----- app/src/components/Button/ButtonGroup.tsx | 50 -- app/src/components/Button/index.tsx | 1 + app/src/components/Button/theme.ts | 251 +++--- .../components/ButtonGroup/ButtonGroup.tsx | 16 + app/src/components/ButtonGroup/index.tsx | 1 + app/src/components/Card/Card.stories.tsx | 25 +- app/src/components/Chart/AreaChart.tsx | 7 +- app/src/components/Chart/BarChart.tsx | 7 +- app/src/components/Chart/ChartContext.tsx | 3 +- app/src/components/Chart/CustomTooltip.tsx | 6 +- app/src/components/Empty/Empty.tsx | 1 + app/src/components/Empty/Redirect.tsx | 36 +- app/src/components/Empty/theme.ts | 2 + app/src/components/Modal/Modal.stories.tsx | 32 +- .../Navigation/Navigation.stories.tsx | 6 +- .../Notification/Notification.stories.tsx | 50 +- .../PlayButton/PlayButton.stories.tsx | 91 -- app/src/components/PlayButton/index.tsx | 75 -- .../components/Popover/Popover.stories.tsx | 6 +- .../SearchBar/SearchBar.stories.tsx | 4 +- app/src/components/Statistic/Title.tsx | 2 +- app/src/components/Table/Table.stories.tsx | 58 +- .../components/Timeline/Timeline.stories.tsx | 2 +- .../components/Tooltip/Tooltip.stories.tsx | 6 +- app/src/components/Upload/InputField.tsx | 4 +- app/src/components/Upload/UploadContext.tsx | 3 +- .../components/Upload/UploadHorizontal.tsx | 4 +- app/src/components/Upload/index.tsx | 7 +- app/src/components/index.tsx | 4 +- app/src/theme/theme.ts | 3 +- public/data/tableData.ts | 251 ++++++ 105 files changed, 1614 insertions(+), 6373 deletions(-) delete mode 100644 app/docs/components/playButton/index.tsx delete mode 100644 app/docs/components/playButton/page.tsx delete mode 100644 app/docs/components/playButton/playButton.mdx delete mode 100644 app/docs/components/playButton/playButtonApi.ts delete mode 100644 app/docs/components/playButton/variant/BlurPlayButton.tsx delete mode 100644 app/docs/components/playButton/variant/CirclePlayButton.tsx delete mode 100644 app/docs/components/playButton/variant/DefaultPlayButton.tsx delete mode 100644 app/docs/components/playButton/variant/NoBorderPlayButton.tsx delete mode 100644 app/docs/components/playButton/variant/SecondaryPlayButton.tsx delete mode 100644 app/docs/components/playButton/variant/SizesOfPlayButton.tsx create mode 100644 app/docs/components/table/variant/TableActionBtn.tsx create mode 100644 app/new/Button/ButtonGroup.tsx delete mode 100644 app/src/components/Button/Button.stories.tsx delete mode 100644 app/src/components/Button/ButtonGroup.tsx create mode 100644 app/src/components/Button/index.tsx create mode 100644 app/src/components/ButtonGroup/ButtonGroup.tsx create mode 100644 app/src/components/ButtonGroup/index.tsx delete mode 100644 app/src/components/PlayButton/PlayButton.stories.tsx delete mode 100644 app/src/components/PlayButton/index.tsx create mode 100644 public/data/tableData.ts diff --git a/app/components/ComponentsList.tsx b/app/components/ComponentsList.tsx index 00d579a2..b7db02d4 100644 --- a/app/components/ComponentsList.tsx +++ b/app/components/ComponentsList.tsx @@ -42,9 +42,7 @@ export const TooltipComponent = () => { placement="top" animation="duration-300" style="dark"> - + ) } @@ -131,12 +129,10 @@ export const ModalComponent = () => {
- - +
diff --git a/app/docs/components/button/variant/KeepButtonColor.tsx b/app/docs/components/button/variant/KeepButtonColor.tsx index e956584f..4240f583 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 ee9fe5a2..a35f527e 100644 --- a/app/docs/components/button/variant/KeepButtonIcon.tsx +++ b/app/docs/components/button/variant/KeepButtonIcon.tsx @@ -1,53 +1,49 @@ 'use client' import { Button } from '../../../../src' -import { Gear, SquaresFour } from 'phosphor-react' +import { ChatText, Gear, SignIn } 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 1f980dd0..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 b3baca9f..fc47cbe5 100644 --- a/app/docs/components/button/variant/KeepButtonSize.tsx +++ b/app/docs/components/button/variant/KeepButtonSize.tsx @@ -4,24 +4,12 @@ import { Button } from '../../../../src' const KeepButtonSize = () => { return (
- - - - - - + + + + + +
) } @@ -33,12 +21,12 @@ 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 fa37792a..66a71a82 100644 --- a/app/docs/components/button/variant/KeepButtonType.tsx +++ b/app/docs/components/button/variant/KeepButtonType.tsx @@ -4,52 +4,83 @@ import { Button } from '../../../../src' const KeepButtonType = () => { return (
- - - - - - - - +
+ + + + + +
+
+ + + + + +
) } const KeepButtonTypeCode = ` -"use client"; import { Button } from "keep-react"; export const ButtonComponent = () => { return ( <> - - - - - - - - + + + + + + + + + + - ); -}; + ) +} ` export { KeepButtonTypeCode, KeepButtonType } diff --git a/app/docs/components/buttonGroup/variant/ButtonGroupWithIcon.tsx b/app/docs/components/buttonGroup/variant/ButtonGroupWithIcon.tsx index 9d0dd318..49492f5f 100644 --- a/app/docs/components/buttonGroup/variant/ButtonGroupWithIcon.tsx +++ b/app/docs/components/buttonGroup/variant/ButtonGroupWithIcon.tsx @@ -6,22 +6,16 @@ const ButtonGroupWithIcon = () => { return (
- - - @@ -37,19 +31,19 @@ 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 = () => { +const ButtonGroupWithOnlyIcon = () => { return ( - - - - ); + ) } ` diff --git a/app/docs/components/buttonGroup/variant/DefaultButtonGroup.tsx b/app/docs/components/buttonGroup/variant/DefaultButtonGroup.tsx index 25b6eebc..08e830e2 100644 --- a/app/docs/components/buttonGroup/variant/DefaultButtonGroup.tsx +++ b/app/docs/components/buttonGroup/variant/DefaultButtonGroup.tsx @@ -5,15 +5,9 @@ const DefaultButtonGroup = () => { return (
- - - + + +
) @@ -26,9 +20,9 @@ import { Button } from "keep-react"; export const ButtonGroupComponent = () => { return ( - - - + + + ); }; diff --git a/app/docs/components/card/variant/CardWithIcon.tsx b/app/docs/components/card/variant/CardWithIcon.tsx index 74c64e88..21a7579a 100644 --- a/app/docs/components/card/variant/CardWithIcon.tsx +++ b/app/docs/components/card/variant/CardWithIcon.tsx @@ -60,9 +60,7 @@ const CardWithIcon = () => { - +
@@ -132,7 +130,7 @@ export const CardComponent = () => { - diff --git a/app/docs/components/card/variant/HorizontalCard.tsx b/app/docs/components/card/variant/HorizontalCard.tsx index 1d5d01e9..55347238 100644 --- a/app/docs/components/card/variant/HorizontalCard.tsx +++ b/app/docs/components/card/variant/HorizontalCard.tsx @@ -36,9 +36,7 @@ const HorizontalCard = () => { $649,00 - + @@ -84,9 +82,7 @@ export const CardComponent = () => { $649,00 - + diff --git a/app/docs/components/card/variant/PricingCard.tsx b/app/docs/components/card/variant/PricingCard.tsx index d866dc7f..0f61e682 100644 --- a/app/docs/components/card/variant/PricingCard.tsx +++ b/app/docs/components/card/variant/PricingCard.tsx @@ -39,9 +39,7 @@ const PricingCard = () => { - + @@ -107,9 +105,7 @@ export const CardComponent = () => { - + diff --git a/app/docs/components/card/variant/ProductCard.tsx b/app/docs/components/card/variant/ProductCard.tsx index e8c1c424..da50a888 100644 --- a/app/docs/components/card/variant/ProductCard.tsx +++ b/app/docs/components/card/variant/ProductCard.tsx @@ -1,5 +1,5 @@ 'use client' -import { Badge, PlayButton, Card, Button, Progress } from '../../../../src' +import { Badge, Card, Button, Progress } from '../../../../src' import { ArrowsOutSimple, Bed, @@ -40,10 +40,8 @@ const ProductCard = () => { - @@ -64,19 +62,21 @@ const ProductCard = () => { - - - } /> - + - @@ -117,9 +117,7 @@ const ProductCard = () => { - + $649,00 @@ -131,24 +129,10 @@ const ProductCard = () => { const ProductCardCode = ` "use client"; -import { Badge, -Button, -Card, -PlayButton, -Progress } from "keep-react"; +import { Badge,Button,Card,Progress } from "keep-react"; + import { - ArrowsOutSimple, - Bed, - Heart, - MapPinLine, - Play, - Rows, - ShoppingCart, - Shower, - SkipBack, - SkipForward, - SpeakerHigh, - Users, + ArrowsOutSimple,Bed,Heart,MapPinLine,Play,Rows,ShoppingCart,Shower,SkipBack,SkipForward,SpeakerHigh,Users, } from "phosphor-react"; export const CardComponent = () => { @@ -176,10 +160,8 @@ export const CardComponent = () => { - @@ -202,19 +184,21 @@ export const CardComponent = () => { - - - } /> - + - @@ -223,7 +207,7 @@ export const CardComponent = () => { {/*=== PRODUCT CARD THREE === */} - @@ -256,9 +240,7 @@ export const CardComponent = () => { - + $649,00 diff --git a/app/docs/components/dropdown/variant/DefaultDropdown.tsx b/app/docs/components/dropdown/variant/DefaultDropdown.tsx index 46b779e7..9b2b792c 100644 --- a/app/docs/components/dropdown/variant/DefaultDropdown.tsx +++ b/app/docs/components/dropdown/variant/DefaultDropdown.tsx @@ -3,7 +3,7 @@ import { Dropdown } from '../../../../src' const DefaultDropdown = () => { return ( - + Dashboard Settings Earnings @@ -21,7 +21,6 @@ export const DropdownComponent = () => { Dashboard diff --git a/app/docs/components/dropdown/variant/DropdownSearchBar.tsx b/app/docs/components/dropdown/variant/DropdownSearchBar.tsx index 620e2b4b..d1f67fba 100644 --- a/app/docs/components/dropdown/variant/DropdownSearchBar.tsx +++ b/app/docs/components/dropdown/variant/DropdownSearchBar.tsx @@ -4,7 +4,7 @@ import { Dropdown, TextInput } from '../../../../src' const DropdownSearchBar = () => { return ( - +
@@ -45,7 +45,6 @@ export const DropdownComponent = () => { return ( diff --git a/app/docs/components/dropdown/variant/DropdownWithBothSideIcon.tsx b/app/docs/components/dropdown/variant/DropdownWithBothSideIcon.tsx index cce37c3b..e95fe73b 100644 --- a/app/docs/components/dropdown/variant/DropdownWithBothSideIcon.tsx +++ b/app/docs/components/dropdown/variant/DropdownWithBothSideIcon.tsx @@ -4,7 +4,7 @@ import { CaretRight, Gear, Money, SignOut, SquaresFour } from 'phosphor-react' const DropdownWithBothSideIcon = () => { return ( - + }> Dashboard @@ -42,7 +42,6 @@ export const DropdownComponent = () => { return ( diff --git a/app/docs/components/dropdown/variant/DropdownWithIconAndSearchBar.tsx b/app/docs/components/dropdown/variant/DropdownWithIconAndSearchBar.tsx index e835c824..7a7ef801 100644 --- a/app/docs/components/dropdown/variant/DropdownWithIconAndSearchBar.tsx +++ b/app/docs/components/dropdown/variant/DropdownWithIconAndSearchBar.tsx @@ -4,7 +4,7 @@ import { CaretRight, Gear, Money, SignOut, SquaresFour } from 'phosphor-react' const DropdownWithIconAndSearchBar = () => { return ( - +
@@ -40,7 +40,6 @@ export const DropdownComponent = () => { return ( diff --git a/app/docs/components/dropdown/variant/DropdownWithTitleDescription.tsx b/app/docs/components/dropdown/variant/DropdownWithTitleDescription.tsx index a6fec3c2..675995d0 100644 --- a/app/docs/components/dropdown/variant/DropdownWithTitleDescription.tsx +++ b/app/docs/components/dropdown/variant/DropdownWithTitleDescription.tsx @@ -3,7 +3,7 @@ import { Dropdown } from '../../../../src' const DropdownWithTitleDescription = () => { return ( - +

Dropdown Title

@@ -49,7 +49,6 @@ export const DropdownComponent = () => { return ( diff --git a/app/docs/components/modal/variant/ConfirmationModal.tsx b/app/docs/components/modal/variant/ConfirmationModal.tsx index c8b3a649..87000368 100644 --- a/app/docs/components/modal/variant/ConfirmationModal.tsx +++ b/app/docs/components/modal/variant/ConfirmationModal.tsx @@ -15,12 +15,8 @@ const ConfirmationModal = () => { } return (
- - + +
@@ -34,10 +30,10 @@ const ConfirmationModal = () => {
- -
@@ -53,10 +49,10 @@ const ConfirmationModal = () => {
- - @@ -83,43 +79,32 @@ export const ModalComponent = () => { }; return ( <> - - - + + + + -
+
-

+

Do you want to upload this file?

- -
- } - size="md" - show={showErrorModalX} - onClose={onClickErrorModal} - > + } size="md" show={showErrorModalX} onClose={onClickErrorModal}> Do you want to delete this file?
@@ -129,10 +114,10 @@ export const ModalComponent = () => {
- - diff --git a/app/docs/components/modal/variant/DefaultModal.tsx b/app/docs/components/modal/variant/DefaultModal.tsx index d7657541..6f9010f5 100644 --- a/app/docs/components/modal/variant/DefaultModal.tsx +++ b/app/docs/components/modal/variant/DefaultModal.tsx @@ -16,12 +16,8 @@ const DefaultModal = () => { return (
- - + + } size="md" show={showModal} position="center"> Do you want to upload this file? @@ -32,12 +28,10 @@ const DefaultModal = () => {
- - + } size="md" show={showModalX} onClose={onClickTwo}> @@ -50,12 +44,10 @@ const DefaultModal = () => {
- - +
@@ -81,52 +73,38 @@ export const ModalComponent = () => { return ( <> - - - } - size="md" - show={showModal} - position="center" - > + + + } 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} - > + } size="md" show={showModalX} onClose={onClickTwo}> Do you want to upload this file?
-

+

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

- - + diff --git a/app/docs/components/modal/variant/HistoryModal.tsx b/app/docs/components/modal/variant/HistoryModal.tsx index 90327460..8a3a978c 100644 --- a/app/docs/components/modal/variant/HistoryModal.tsx +++ b/app/docs/components/modal/variant/HistoryModal.tsx @@ -16,12 +16,8 @@ const HistoryModal = () => { return (
- - + + } size="md" show={showHistoryModal}> Do you want to upload this file? @@ -38,10 +34,10 @@ const HistoryModal = () => {
- - @@ -69,12 +65,10 @@ const HistoryModal = () => {
- - +
@@ -104,13 +98,9 @@ export const ModalComponent = () => { return ( <> - - - } - size="md" - show={showHistoryModal} - > + + + } size="md" show={showHistoryModal}> Do you want to upload this file?
@@ -119,82 +109,48 @@ export const ModalComponent = () => {

- -
- - - } - size="lg" - show={showAccessModal} - > + } 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. +

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

-
- +
+
-

- Albert Flores -

+

Albert Flores

keep@designsystem.com

- -
- - + diff --git a/app/docs/components/modal/variant/ModalPosition.tsx b/app/docs/components/modal/variant/ModalPosition.tsx index 6d6a53de..c45bc7eb 100644 --- a/app/docs/components/modal/variant/ModalPosition.tsx +++ b/app/docs/components/modal/variant/ModalPosition.tsx @@ -10,9 +10,7 @@ const ModalPosition = () => { } return (
- + } size="md" show={showModal} position="top-center"> Do you want to upload this file? @@ -23,12 +21,10 @@ const ModalPosition = () => {
- - +
@@ -48,13 +44,8 @@ export const ModalComponent = () => { }; return ( <> - - } - size="md" - show={showModal} - position="top-center" - > + + } size="md" show={showModal} position="top-center"> Do you want to upload this file?
@@ -64,12 +55,10 @@ export const ModalComponent = () => {
- - + diff --git a/app/docs/components/modal/variant/SizesOfModal.tsx b/app/docs/components/modal/variant/SizesOfModal.tsx index ac9e234d..c3e49d63 100644 --- a/app/docs/components/modal/variant/SizesOfModal.tsx +++ b/app/docs/components/modal/variant/SizesOfModal.tsx @@ -10,9 +10,7 @@ const SizesOfModal = () => { } return (
- + } size="xl" show={showModal} position="center"> Do you want to upload this file? @@ -23,12 +21,10 @@ const SizesOfModal = () => {
- - + @@ -48,13 +44,8 @@ export const ModalComponent = () => { }; return ( <> - - } - size="md" - show={showModal} - position="top-center" - > + + } size="xl" show={showModal} position="center"> Do you want to upload this file?
@@ -64,12 +55,10 @@ export const ModalComponent = () => {
- - + diff --git a/app/docs/components/navbar/variant/DefaultNavbar.tsx b/app/docs/components/navbar/variant/DefaultNavbar.tsx index df3dfbb8..c8b31f48 100644 --- a/app/docs/components/navbar/variant/DefaultNavbar.tsx +++ b/app/docs/components/navbar/variant/DefaultNavbar.tsx @@ -35,9 +35,7 @@ const DefaultNavbar = () => { Search - + @@ -91,7 +89,7 @@ export const NavbarComponent = () => { Search - diff --git a/app/docs/components/navbar/variant/EcommerceNavbar.tsx b/app/docs/components/navbar/variant/EcommerceNavbar.tsx index ee06e483..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? @@ -21,10 +19,8 @@ const DefaultNotification = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - + @@ -47,9 +43,7 @@ export const NotificationComponent = () => { } return (
- + Can we store cookies? @@ -57,10 +51,10 @@ export const NotificationComponent = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - diff --git a/app/docs/components/notification/variant/NotificationWithAvatar.tsx b/app/docs/components/notification/variant/NotificationWithAvatar.tsx index 03421f6a..60285c55 100644 --- a/app/docs/components/notification/variant/NotificationWithAvatar.tsx +++ b/app/docs/components/notification/variant/NotificationWithAvatar.tsx @@ -10,9 +10,7 @@ const NotificationWithAvatar = () => { return (
- + @@ -24,10 +22,8 @@ const NotificationWithAvatar = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - + @@ -51,7 +47,7 @@ export const NotificationComponent = () => { return (
- @@ -65,10 +61,10 @@ export const NotificationComponent = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - diff --git a/app/docs/components/notification/variant/NotificationWithCard.tsx b/app/docs/components/notification/variant/NotificationWithCard.tsx index af37fa78..d262480d 100644 --- a/app/docs/components/notification/variant/NotificationWithCard.tsx +++ b/app/docs/components/notification/variant/NotificationWithCard.tsx @@ -27,13 +27,13 @@ const NotificationWithCard = () => { return (
- - - @@ -53,10 +53,8 @@ const NotificationWithCard = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - + @@ -78,10 +76,10 @@ const NotificationWithCard = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - @@ -103,13 +101,13 @@ const NotificationWithCard = () => { /> - - - @@ -198,10 +196,10 @@ export const NotificationComponent = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - @@ -223,13 +221,13 @@ export const NotificationComponent = () => { /> - - + @@ -25,10 +23,8 @@ const NotificationWithIcon = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - + @@ -53,7 +49,7 @@ export const NotificationComponent = () => { return (
- @@ -67,10 +63,10 @@ export const NotificationComponent = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - 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 e1d3ec48..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 `variant="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 8d77e260..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 9bdac65f..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/variant/DefaultPopover.tsx b/app/docs/components/popover/variant/DefaultPopover.tsx index 926cedd8..29b0c6b4 100644 --- a/app/docs/components/popover/variant/DefaultPopover.tsx +++ b/app/docs/components/popover/variant/DefaultPopover.tsx @@ -11,7 +11,7 @@ const DefaultPopover = () => { some form, by injected humour - @@ -36,7 +36,7 @@ export const PopoverComponent = () => { some form, by injected humour - diff --git a/app/docs/components/popover/variant/PopoverPosition.tsx b/app/docs/components/popover/variant/PopoverPosition.tsx index 866fcde0..51c6e8b2 100644 --- a/app/docs/components/popover/variant/PopoverPosition.tsx +++ b/app/docs/components/popover/variant/PopoverPosition.tsx @@ -11,7 +11,7 @@ const PopoverPosition = () => { some form, by injected humour - @@ -36,7 +36,7 @@ export const PopoverComponent = () => { some form, by injected humour - diff --git a/app/docs/components/popover/variant/TriggerVariant.tsx b/app/docs/components/popover/variant/TriggerVariant.tsx index 105dc028..b49526ad 100644 --- a/app/docs/components/popover/variant/TriggerVariant.tsx +++ b/app/docs/components/popover/variant/TriggerVariant.tsx @@ -11,7 +11,7 @@ const TriggerVariantPopover = () => { some form, by injected humour - @@ -36,7 +36,7 @@ export const PopoverComponent = () => { some form, by injected humour - diff --git a/app/docs/components/searchBar/variant/SearchBarWithColorVariant.tsx b/app/docs/components/searchBar/variant/SearchBarWithColorVariant.tsx index 7403633d..4a5b2e8c 100644 --- a/app/docs/components/searchBar/variant/SearchBarWithColorVariant.tsx +++ b/app/docs/components/searchBar/variant/SearchBarWithColorVariant.tsx @@ -20,14 +20,10 @@ const SearchBarWithColorVariant = () => { - Search - - } + addon={} addonPosition="right" icon={ - } addonPosition="right" icon={ - - -
@@ -77,7 +77,7 @@ export const StepComponent = () => {
- -
@@ -43,401 +41,67 @@ const BorderedTable = () => { - - -
-
-
- -
-

Ralph Edwards

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

UI/UX Designer

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

Wade Warren

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

Scrum Master

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

Eleanor Pena

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

{cell.name}

+ {cell.tag} +
-
- - - - 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% -
-
- - - - -
    -
  • - -
    • -
  • - -
    • -
- - - - - - - + + + + + + ))}
@@ -462,16 +126,12 @@ export const TableComponent = () => {
- -
@@ -561,323 +221,7 @@ 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 7d9fb476..c272b7ea 100644 --- a/app/docs/components/table/variant/DefaultTable.tsx +++ b/app/docs/components/table/variant/DefaultTable.tsx @@ -1,7 +1,9 @@ '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 { Avatar, Badge, Button, Table } from '../../../../src' +import { ArrowDown, Cube } from 'phosphor-react' +import { DefaultTableData } from '~/public/data/tableData' +import TableActionBtn from './TableActionBtn' const DefaultTable = () => { return ( @@ -16,13 +18,13 @@ const DefaultTable = () => {
- - - -
  • - -
    • - - - - - - - - - - -
    -
    -
    - -
    -

    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 +116,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 ( @@ -468,13 +130,13 @@ 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/FilesUploadedTable.tsx b/app/docs/components/table/variant/FilesUploadedTable.tsx index 87212a76..7eb6bb5a 100644 --- a/app/docs/components/table/variant/FilesUploadedTable.tsx +++ b/app/docs/components/table/variant/FilesUploadedTable.tsx @@ -1,6 +1,8 @@ 'use client' -import { Avatar, Button, Table, Popover } from '../../../../src' -import { Cube, DotsThreeOutline, Pencil, Trash } from 'phosphor-react' +import { FileUploadTableData } from '~/public/data/tableData' +import { Avatar, Button, Table } from '../../../../src' +import { Cube } from 'phosphor-react' +import TableActionBtn from './TableActionBtn' const FilesUploadedTable = () => { return ( @@ -12,13 +14,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}

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

    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

    -     - - - - - - - - - - - - - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - diff --git a/app/docs/components/table/variant/HoverableTable.tsx b/app/docs/components/table/variant/HoverableTable.tsx index 1985f423..704b1c70 100644 --- a/app/docs/components/table/variant/HoverableTable.tsx +++ b/app/docs/components/table/variant/HoverableTable.tsx @@ -1,6 +1,9 @@ 'use client' -import { Avatar, Button, Table, Popover } from '../../../../src' -import { Cube, DotsThreeOutline, Trash, Pencil } from 'phosphor-react' +import { DefaultTableData } from '~/public/data/tableData' +import { Avatar, Button, Table, Badge } from '../../../../src' +import { Cube, ArrowDown } from 'phosphor-react' +import Image from 'next/image' +import TableActionBtn from './TableActionBtn' const HoverableTable = () => { return ( @@ -9,16 +12,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 +114,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 +124,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,301 +162,50 @@ export const TableComponent = () => {
    - +
    -

    Static Next Plan.pdf

    -

    200 KB

    +

    Ralph Edwards

    + &ralph
    -

    Total 0.2 MB

    -

    200 KB

    -     - -

    Jan 10, 2023

    -

    4:45 pm

    -     - -

    Jan 10, 2023

    -     - - - - - - - - - - + + Active + - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     +

    UI/UX Designer

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

    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

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

    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

    -
    -
    +
    + + + + 20%
    - -

    Total 0.1 MB

    -

    100 KB

    -     - -

    Mar 25, 2023

    -

    8:45 pm

    -     - -

    Apr 10, 2023

    -     - - - - - - - - - - - @@ -737,8 +229,8 @@ export const TableComponent = () => { - diff --git a/app/docs/components/table/variant/OrdersTable.tsx b/app/docs/components/table/variant/OrdersTable.tsx index a4e39b8f..f92bedf7 100644 --- a/app/docs/components/table/variant/OrdersTable.tsx +++ b/app/docs/components/table/variant/OrdersTable.tsx @@ -1,19 +1,9 @@ '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 { Badge, Button, Table } from '../../../../src' +import { CalendarBlank, Crown, Cube, CurrencyDollar, DotsNine, Flag, Spinner, Tag } from 'phosphor-react' +import { OrderTableData } from '~/public/data/tableData' +import TableActionBtn from './TableActionBtn' const OrdersTable = () => { return ( @@ -25,13 +15,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 + + +
    + } + iconPosition="left"> + Delivered + +
    +     + +

    {cell.quantity}

    +     + +

    ${cell.amount}

    +     + +

    {cell.location}

    +     + + + +     + ))}
    @@ -446,13 +131,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 a234f012..c91c813e 100644 --- a/app/docs/components/table/variant/StripedTable.tsx +++ b/app/docs/components/table/variant/StripedTable.tsx @@ -1,6 +1,9 @@ 'use client' -import { Avatar, Button, Popover, Table } from '../../../../src' -import { Cube, DotsThreeOutline, Pencil, Trash } from 'phosphor-react' +import { DefaultTableData } from '~/public/data/tableData' +import { Avatar, Badge, Button, Table } from '../../../../src' +import { ArrowDown, Cube } from 'phosphor-react' +import Image from 'next/image' +import TableActionBtn from './TableActionBtn' const StripedTable = () => { return ( @@ -9,16 +12,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 +114,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 +124,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,301 +162,50 @@ export const TableComponent = () => {
    - +
    -

    Static Next Plan.pdf

    -

    200 KB

    +

    Ralph Edwards

    + &ralph
    -

    Total 0.2 MB

    -

    200 KB

    -     - -

    Jan 10, 2023

    -

    4:45 pm

    -     - -

    Jan 10, 2023

    -     - - - - - - - - - - + + Active + - - -
      -
    • - -
      • -
    • - -
      • -
    -     - - - -     +

    UI/UX Designer

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

    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

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

    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

    -
    -
    +
    + + + + 20%
    - -

    Total 0.1 MB

    -

    100 KB

    -     - -

    Mar 25, 2023

    -

    8:45 pm

    -     - -

    Apr 10, 2023

    -     - - - - - - - - - - - @@ -737,8 +229,8 @@ export const TableComponent = () => { - diff --git a/app/docs/components/table/variant/TableActionBtn.tsx b/app/docs/components/table/variant/TableActionBtn.tsx new file mode 100644 index 00000000..6ae7e792 --- /dev/null +++ b/app/docs/components/table/variant/TableActionBtn.tsx @@ -0,0 +1,37 @@ +'use client' +import { Button, Popover } from '~/app/src' +import { DotsThreeOutline, Pencil, Trash } from 'phosphor-react' + +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 28906822..9b35b4af 100644 --- a/app/docs/components/table/variant/TransactionsTable.tsx +++ b/app/docs/components/table/variant/TransactionsTable.tsx @@ -1,6 +1,8 @@ 'use client' -import { Avatar, Badge, Button, Popover, Table } from '../../../../src' -import { ArrowsDownUp, Crown, Cube, DotsThreeOutline, Pencil, Trash } from 'phosphor-react' +import { TransactionsTableData } from '~/public/data/tableData' +import { Avatar, Badge, Button, Table } from '../../../../src' +import { ArrowsDownUp, Crown, Cube } from 'phosphor-react' +import TableActionBtn from './TableActionBtn' const TransactionsTable = () => { return ( @@ -12,13 +14,13 @@ const TransactionsTable = () => {

    Cash Out Transactions

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

    Visa

    - Withdraw -
    -
    -
    -
    -     - -

    Jan 10, 2023

    -

    4:45 pm

    -     - -

    $534.00

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

    Jan 19, 2022

    -

    3:45 pm

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

    Stripe

    - Withdraw + {TransactionsTableData.map((cell) => ( + + +
    +
    +
    + +
    +

    {cell.name}

    + {cell.tag} +
    -
    - - -

    Mar 12, 2023

    -

    4:00 pm

    -     - -

    $123.00

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

    Jan 19, 2022

    -

    3:45 pm

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

    Western Union

    - Withdraw -
    -
    + + +

    {cell.date}

    +

    {cell.time}

    +     + +

    ${cell.amount}

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

    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 +110,13 @@ export const TableComponent = () => {

    Cash Out Transactions

    - - - - - - - - -
    -
    -
    - -
    -

    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/timeline/variant/DashedBorderTimeline.tsx b/app/docs/components/timeline/variant/DashedBorderTimeline.tsx index 4a2bccba..81099e1c 100644 --- a/app/docs/components/timeline/variant/DashedBorderTimeline.tsx +++ b/app/docs/components/timeline/variant/DashedBorderTimeline.tsx @@ -14,7 +14,7 @@ const DashedBorderTimeline = () => { Introducing a set of exciting new features that enhance user experience and functionality. - @@ -64,7 +64,7 @@ export const TimelineComponent = () => { Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. - diff --git a/app/docs/components/timeline/variant/DefaultTimeline.tsx b/app/docs/components/timeline/variant/DefaultTimeline.tsx index 84130f2a..68ccdbf8 100644 --- a/app/docs/components/timeline/variant/DefaultTimeline.tsx +++ b/app/docs/components/timeline/variant/DefaultTimeline.tsx @@ -15,7 +15,7 @@ const DefaultTimeline = () => { Launching our new mobile app on both iOS and Android platforms, providing users with seamless access to our services on the go. - @@ -65,7 +65,7 @@ export const TimelineComponent = () => { Launching our new mobile app on both iOS and Android platforms, providing users with seamless access to our services on the go. - diff --git a/app/docs/components/tooltip/variant/DefaultTooltip.tsx b/app/docs/components/tooltip/variant/DefaultTooltip.tsx index 465b2e86..62270e68 100644 --- a/app/docs/components/tooltip/variant/DefaultTooltip.tsx +++ b/app/docs/components/tooltip/variant/DefaultTooltip.tsx @@ -4,9 +4,7 @@ import { Button, Tooltip } from '../../../../src' const DefaultTooltip = () => { return ( - + ) } @@ -24,7 +22,7 @@ export const TooltipComponent = () => { animation="duration-300" style="dark" > - diff --git a/app/docs/components/tooltip/variant/TooltipPlacement.tsx b/app/docs/components/tooltip/variant/TooltipPlacement.tsx index d872802f..e4580bf8 100644 --- a/app/docs/components/tooltip/variant/TooltipPlacement.tsx +++ b/app/docs/components/tooltip/variant/TooltipPlacement.tsx @@ -5,24 +5,16 @@ const TooltipPlacement = () => { return (
    - + - + - + - +
    ) @@ -42,7 +34,7 @@ export const TooltipComponent = () => { animation="duration-300" style="dark" > - @@ -53,7 +45,7 @@ export const TooltipComponent = () => { animation="duration-300" style="dark" > - @@ -64,7 +56,7 @@ export const TooltipComponent = () => { animation="duration-300" style="dark" > - @@ -75,7 +67,7 @@ export const TooltipComponent = () => { animation="duration-300" style="dark" > - diff --git a/app/docs/components/tooltip/variant/TooltipStyles.tsx b/app/docs/components/tooltip/variant/TooltipStyles.tsx index 477825ee..7e990015 100644 --- a/app/docs/components/tooltip/variant/TooltipStyles.tsx +++ b/app/docs/components/tooltip/variant/TooltipStyles.tsx @@ -5,14 +5,10 @@ const TooltipStyles = () => { return (
    - + - +
    ) @@ -32,7 +28,7 @@ export const TooltipComponent = () => { animation="duration-300" style="light" > - @@ -43,7 +39,7 @@ export const TooltipComponent = () => { animation="duration-300" style="dark" > - diff --git a/app/docs/components/tooltip/variant/TooltipTriggering.tsx b/app/docs/components/tooltip/variant/TooltipTriggering.tsx index 34f65b92..8f8ab546 100644 --- a/app/docs/components/tooltip/variant/TooltipTriggering.tsx +++ b/app/docs/components/tooltip/variant/TooltipTriggering.tsx @@ -5,14 +5,10 @@ const TooltipTriggering = () => { return (
    - + - +
    ) @@ -32,7 +28,7 @@ export const TooltipComponent = () => { animation="duration-300" style="dark" > - @@ -43,7 +39,7 @@ export const TooltipComponent = () => { animation="duration-300" style="dark" > - diff --git a/app/docs/components/tooltip/variant/TooltipWithLargeText.tsx b/app/docs/components/tooltip/variant/TooltipWithLargeText.tsx index 70c1a50f..a74a3bd5 100644 --- a/app/docs/components/tooltip/variant/TooltipWithLargeText.tsx +++ b/app/docs/components/tooltip/variant/TooltipWithLargeText.tsx @@ -11,9 +11,7 @@ const TooltipWithLargeText = () => { placement="top" animation="duration-300" style="dark"> - + { placement="bottom" animation="duration-300" style="light"> - +
    ) @@ -45,7 +41,7 @@ export const TooltipComponent = () => { animation="duration-300" style="dark" > - @@ -57,7 +53,7 @@ export const TooltipComponent = () => { animation="duration-300" style="light" > - diff --git a/app/new/Button/Button.tsx b/app/new/Button/Button.tsx index 51432810..32b11352 100644 --- a/app/new/Button/Button.tsx +++ b/app/new/Button/Button.tsx @@ -1,37 +1,167 @@ import { ButtonHTMLAttributes, FC, ReactNode } from 'react' -import { ButtonVariant } from '~/app/src' import { cn } from '~/app/src/helpers/cn' interface ButtonProps extends ButtonHTMLAttributes { children?: ReactNode size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' - color?: 'error' | 'info' | 'success' | 'warning' + color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' type?: 'reset' | 'submit' | 'button' - variant?: keyof ButtonVariant + variant?: 'link' | 'outline' className?: string + disabled?: boolean + shape?: 'circle' | 'icon' + position?: 'start' | 'end' | 'center' + onClick?: () => void } -const buttonThemes = { - base: 'active:focus:scale-95 duration-150 rounded-md', +export interface ButtonTheme { + base: string color: { - error: 'bg-error-500 text-white', - info: 'bg-primary-500 text-white', - success: 'bg-success-500 text-white', - warning: 'bg-warning-500 text-white', + primary: string + secondary: string + success: string + warning: string + error: string + } + size: { + xs: string + sm: string + md: string + lg: string + xl: string + '2xl': string + } + iconBtn: { + xs: string + sm: string + md: string + lg: string + xl: string + '2xl': string + } + variant: { + link: { + primary: string + secondary: string + success: string + warning: string + error: string + } + outline: { + primary: string + secondary: string + success: string + warning: string + error: string + } + } + position: { + start: string + end: string + center: string + } +} + +const buttonThemes: ButtonTheme = { + base: 'active:focus:scale-95 duration-150 transition-all rounded-md flex items-center justify-center ring-offset-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', + color: { + primary: + 'bg-primary-500 hover:bg-primary-600 text-white focus-visible:ring-primary-100 disabled:cursor-not-allowed disabled:bg-primary-100', + secondary: + 'bg-metal-600 hover:bg-metal-700 text-white focus-visible:ring-metal-200 disabled:cursor-not-allowed disabled:bg-metal-200', + success: + 'bg-success-500 hover:bg-success-600 text-white focus-visible:ring-success-100 disabled:cursor-not-allowed disabled:bg-success-100', + warning: + 'bg-warning-500 hover:bg-warning-600 text-white focus-visible:ring-warning-100 disabled:cursor-not-allowed disabled:bg-warning-100', + error: + 'bg-error-500 hover:bg-error-600 text-white focus-visible:ring-error-100 disabled:cursor-not-allowed disabled:bg-error-100', }, size: { - xs: 'text-body-5 px-3 py-2 text-body-5 font-medium', - sm: 'text-body-5 px-4 py-2.5 text-body-5 font-medium', - md: 'text-body-4 px-5 py-3 text-body-4 font-medium', - lg: 'text-body-3 px-5 py-[14px] text-body-4 font-medium', - xl: 'text-body-3 px-[22px] py-4 text-body-3 font-medium', - '2xl': 'text-body-2 px-6 py-[18px] text-body-3 font-medium', + xs: 'text-body-5 px-[14px] py-2 font-medium rounded-md', + sm: 'text-body-5 px-5 py-2.5 font-medium', + md: 'text-body-4 px-6 py-3 font-medium', + lg: 'text-body-3 px-6 py-4 font-medium', + xl: 'text-body-3 px-6 py-[17px] font-medium', + '2xl': 'text-body-3 px-6 py-[18px] font-medium', + }, + iconBtn: { + xs: 'h-6 w-6', + sm: 'h-9 w-9', + md: 'h-10 w-10', + lg: 'h-12 w-12', + xl: 'h-14 w-14', + '2xl': 'h-[58px] w-[58px]', + }, + variant: { + link: { + primary: + 'bg-transparent hover:bg-transparent hover:text-primary-600 text-primary-500 focus-visible:ring-info-100 disabled:cursor-not-allowed disabled:bg-transparent', + secondary: + 'bg-transparent hover:bg-transparent hover:text-metal-600 text-metal-500 focus-visible:ring-metal-200 disabled:cursor-not-allowed disabled:bg-transparent', + success: + 'bg-transparent hover:bg-transparent hover:text-success-600 text-success-500 focus-visible:ring-success-100 disabled:cursor-not-allowed disabled:bg-transparent', + warning: + 'bg-transparent hover:bg-transparent hover:text-warning-600 text-warning-500 focus-visible:ring-warning-100 disabled:cursor-not-allowed disabled:bg-transparent', + error: + 'bg-transparent hover:bg-transparent hover:text-error-600 text-error-500 focus-visible:ring-error-100 disabled:cursor-not-allowed disabled:bg-transparent', + }, + outline: { + primary: + 'bg-white border border-primary-500 hover:bg-primary-50 hover:text-primary-600 text-primary-500 focus-visible:ring-primary-100 disabled:cursor-not-allowed disabled:bg-white disabled:text-primary-200 disabled:border-primary-100', + secondary: + 'bg-white border border-metal-300 hover:bg-metal-50 hover:text-metal-500 text-metal-500 focus-visible:ring-metal-100 disabled:cursor-not-allowed disabled:bg-white disabled:text-metal-200 disabled:border-metal-200', + success: + 'bg-white border border-success-500 hover:bg-success-50 hover:text-success-700 text-success-600 focus-visible:ring-success-100 disabled:cursor-not-allowed disabled:bg-white disabled:text-success-100 disabled:border-success-100', + warning: + 'bg-white border border-warning-600 hover:bg-warning-50 hover:text-warning-700 text-warning-600 focus-visible:ring-warning-200 disabled:cursor-not-allowed disabled:bg-white disabled:text-warning-100 disabled:border-warning-100', + error: + 'bg-white border border-error-500 hover:bg-error-25 hover:text-error-700 text-error-600 focus-visible:ring-error-200 disabled:cursor-not-allowed disabled:bg-white disabled:text-error-100 disabled:border-error-100', + }, + }, + position: { + start: '!rounded-l-md !rounded-r-none', + end: '!rounded-r-md !rounded-l-none', + center: '!rounded-none', }, } -const Button: FC = ({ children, className, size = 'md', color = 'info' }) => { +const Button: FC = ({ + type = 'button', + disabled, + children, + className, + size = 'md', + color = 'primary', + onClick, + variant, + shape, + position, +}) => { + const classNames = { + base: buttonThemes.base, + size: !shape && buttonThemes.size[size], + iconBtn: (shape === 'icon' || shape === 'circle') && buttonThemes.iconBtn[size], + roundedFull: shape === 'circle' && 'rounded-full', + color: !variant && buttonThemes.color[color], + link: variant === 'link' && buttonThemes.variant.link[color], + outline: variant === 'outline' && buttonThemes.variant.outline[color], + position: position && buttonThemes.position[position], + } + + const combinedClassNames = cn( + classNames.base, + classNames.size, + classNames.iconBtn, + classNames.roundedFull, + classNames.color, + classNames.link, + classNames.outline, + classNames.position, + className, + ) + return ( - ) diff --git a/app/new/Button/ButtonGroup.tsx b/app/new/Button/ButtonGroup.tsx new file mode 100644 index 00000000..4ed9b674 --- /dev/null +++ b/app/new/Button/ButtonGroup.tsx @@ -0,0 +1,10 @@ +import { FC, ReactNode } from 'react' + +interface ButtonGroupProps { + className?: string + children?: ReactNode +} + +export const ButtonGroup: FC = ({ children }) => { + return
    {children}
    +} diff --git a/app/new/page.tsx b/app/new/page.tsx index 7e2cf8f9..2ccd3b0a 100644 --- a/app/new/page.tsx +++ b/app/new/page.tsx @@ -1,10 +1,30 @@ +'use client' +import { Cube } from 'phosphor-react' import { Button } from './Button/Button' +import { ButtonGroup } from './Button/ButtonGroup' const New = () => { return ( -
    - -
    +
    +
    + + + + + + + +
    +
    ) } diff --git a/app/src/Keep/KeepTheme.ts b/app/src/Keep/KeepTheme.ts index 89044c0f..65a9afb7 100644 --- a/app/src/Keep/KeepTheme.ts +++ b/app/src/Keep/KeepTheme.ts @@ -4,8 +4,6 @@ import { keepAlertTheme } from '../components/Alert' import { keepAvatarTheme } from '../components/Avatar/Avatar' import { keepBadgeTheme } from '../components/Badge' import { keepBreadCrumbTheme } from '../components/Breadcrumb' -import { keepButtonTheme } from '../components/Button/Button' -import { keepButtonGroupTheme } from '../components/Button/ButtonGroup' import { KeepCardTheme } from '../components/Card' import { KeepCarouselTheme } from '../components/Carousel' import { keepCheckboxTheme } from '../components/CheckBox' @@ -144,8 +142,6 @@ export interface KeepTheme { alert: keepAlertTheme avatar: keepAvatarTheme accordion: keepAccordionTheme - button: keepButtonTheme - buttonGroup: keepButtonGroupTheme badge: keepBadgeTheme breadcrumb: keepBreadCrumbTheme card: KeepCardTheme diff --git a/app/src/components/Accordion/Accordion.stories.tsx b/app/src/components/Accordion/Accordion.stories.tsx index 4e6bcae8..342179bb 100644 --- a/app/src/components/Accordion/Accordion.stories.tsx +++ b/app/src/components/Accordion/Accordion.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react' +import { Plus } from 'phosphor-react' import { Accordion } from '.' import { removeFragment } from '../../helpers/mergeDeep' -import { Plus } from 'phosphor-react' const meta: Meta = { component: Accordion, diff --git a/app/src/components/Accordion/Accordion.tsx b/app/src/components/Accordion/Accordion.tsx index a366a9ed..ec3a6699 100644 --- a/app/src/components/Accordion/Accordion.tsx +++ b/app/src/components/Accordion/Accordion.tsx @@ -1,11 +1,11 @@ 'use client' import { Children, FC, ReactElement, cloneElement, isValidElement, useState } from 'react' -import { Title, keepAccordionTitleTheme } from './Title' -import { Content, keepAccordionContentTheme } from './Content' -import { Panel, PanelProps, keepAccordionPanelTheme } from './Panel' import { cn } from '../../helpers/cn' -import { Icon, keepAccordionIconTheme } from './Icon' import { Container, keepAccordionContainerTheme } from './Container' +import { Content, keepAccordionContentTheme } from './Content' +import { Icon, keepAccordionIconTheme } from './Icon' +import { Panel, PanelProps, keepAccordionPanelTheme } from './Panel' +import { Title, keepAccordionTitleTheme } from './Title' /** * Props for the Accordion component. @@ -42,6 +42,7 @@ export interface AccordionProps { * @default false */ openFirstPanel?: boolean + /** * Additional props for the Accordion component. * @type {any} diff --git a/app/src/components/Accordion/Container.tsx b/app/src/components/Accordion/Container.tsx index 8e581e9a..8f72782f 100644 --- a/app/src/components/Accordion/Container.tsx +++ b/app/src/components/Accordion/Container.tsx @@ -1,8 +1,8 @@ 'use client' import { FC, ReactNode } from 'react' +import { useTheme } from '../../Keep/ThemeContext' import { cn } from '../../helpers/cn' import { useAccordionContext } from './AccordionContext' -import { useTheme } from '../../Keep/ThemeContext' export interface ContainerProps { children?: ReactNode diff --git a/app/src/components/Accordion/Content.tsx b/app/src/components/Accordion/Content.tsx index cb622a81..8c26be4f 100644 --- a/app/src/components/Accordion/Content.tsx +++ b/app/src/components/Accordion/Content.tsx @@ -1,9 +1,9 @@ 'use client' import { FC, ReactNode } from 'react' import { Collapse } from 'react-collapse' +import { useTheme } from '../../Keep/ThemeContext' import { cn } from '../../helpers/cn' import { useAccordionContext } from './AccordionContext' -import { useTheme } from '../../Keep/ThemeContext' export interface ContentProps { children?: ReactNode diff --git a/app/src/components/Accordion/Icon.tsx b/app/src/components/Accordion/Icon.tsx index ec3e2898..1bf1985c 100644 --- a/app/src/components/Accordion/Icon.tsx +++ b/app/src/components/Accordion/Icon.tsx @@ -1,8 +1,8 @@ 'use client' import { FC, ReactNode } from 'react' +import { useTheme } from '../../Keep/ThemeContext' import { cn } from '../../helpers/cn' import { useAccordionContext } from './AccordionContext' -import { useTheme } from '../../Keep/ThemeContext' export interface IconProps { children?: ReactNode diff --git a/app/src/components/Accordion/Panel.tsx b/app/src/components/Accordion/Panel.tsx index 9a01ac72..fc3cddad 100644 --- a/app/src/components/Accordion/Panel.tsx +++ b/app/src/components/Accordion/Panel.tsx @@ -1,8 +1,8 @@ 'use client' import { FC, ReactNode } from 'react' +import { useTheme } from '../../Keep/ThemeContext' import { cn } from '../../helpers/cn' import { AccordionContext } from './AccordionContext' -import { useTheme } from '../../Keep/ThemeContext' export interface PanelProps { children?: ReactNode diff --git a/app/src/components/Accordion/Title.tsx b/app/src/components/Accordion/Title.tsx index 3e2a453a..780428df 100644 --- a/app/src/components/Accordion/Title.tsx +++ b/app/src/components/Accordion/Title.tsx @@ -1,7 +1,8 @@ 'use client' import { FC, ReactNode } from 'react' -import { cn } from '../../helpers/cn' import { useTheme } from '../../Keep/ThemeContext' +import { cn } from '../../helpers/cn' +import { Typography } from '../Typography' export interface TitleProps { children?: ReactNode @@ -15,8 +16,8 @@ export interface keepAccordionTitleTheme { export const Title: FC = ({ children, className, ...otherProps }) => { const { title } = useTheme().theme.accordion return ( -
    + {children} -
    + ) } diff --git a/app/src/components/Accordion/theme.ts b/app/src/components/Accordion/theme.ts index 372de120..19c1f632 100644 --- a/app/src/components/Accordion/theme.ts +++ b/app/src/components/Accordion/theme.ts @@ -15,7 +15,7 @@ export const accordionTheme: keepAccordionTheme = { icon: { base: 'transition-transform duration-300', rotated: { - full: 'rotate-[225deg]', // changed 180 to 225 deg + full: 'rotate-[225deg]', half: 'rotate-90', }, }, diff --git a/app/src/components/Button/Button.stories.tsx b/app/src/components/Button/Button.stories.tsx deleted file mode 100644 index 2c801b8e..00000000 --- a/app/src/components/Button/Button.stories.tsx +++ /dev/null @@ -1,174 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' - -import { Button } from './Button' - -const meta: Meta = { - component: Button, - tags: ['autodocs'], - argTypes: { - variant: { - description: 'Available button variant', - control: { - type: 'select', - }, - options: ['primary', 'dashed', 'text', 'linkPrimary', 'linkGray', 'outlineGray', 'outlinePrimary', 'default'], - table: { - type: { summary: 'string' }, - defaultValue: { summary: 'primary' }, - }, - }, - type: { - description: 'Available button type', - control: { - type: 'select', - }, - options: ['button', 'reset', 'submit'], - table: { - type: { summary: 'string' }, - defaultValue: { summary: 'button' }, - }, - }, - size: { - description: 'Available button size', - control: { - type: 'select', - }, - options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'], - table: { - type: { summary: 'string' }, - defaultValue: { summary: 'sm' }, - }, - }, - children: { - description: 'Button text', - table: { - type: { summary: 'string' }, - defaultValue: { summary: 'Default Button' }, - }, - }, - circle: { - description: 'Button circle or not', - control: { type: 'boolean' }, - }, - - onClick: { - description: 'Button Onclick event', - control: { type: 'null' }, - }, - - width: { - description: 'Button width full or half?', - control: { - type: 'select', - }, - options: ['full', 'half'], - table: { - type: { summary: 'boolean' }, - defaultValue: { summary: 'half' }, - }, - }, - href: { - description: 'Href to navigate', - table: { - type: { summary: 'string' }, - defaultValue: { summary: '/' }, - }, - }, - notificationLabel: { - description: 'Button notification label text', - table: { - type: { summary: 'string' }, - defaultValue: { summary: '' }, - }, - }, - pill: { - description: 'Button pill or not', - control: { type: 'boolean' }, - }, - positionInGroup: { - description: 'Button position in button group', - table: { - type: { summary: 'string' }, - defaultValue: { summary: 'start' }, - }, - control: { type: 'select' }, - }, - - className: { - description: 'Custom class Name', - table: { - type: { summary: 'string' }, - defaultValue: { summary: '' }, - }, - }, - color: { - description: 'Button available color', - table: { - type: { summary: 'String' }, - defaultValue: { summary: 'info' }, - }, - control: { type: 'select' }, - options: ['error', 'info', 'success', 'warning'], - }, - }, -} - -export default meta -type Story = StoryObj - -export const DefaultButton: Story = { - args: { - variant: 'default', - size: 'md', - children: 'Default Button', - }, -} -export const PrimaryButton: Story = { - args: { - ...DefaultButton.args, - variant: 'primary', - children: 'Primary Button', - }, -} -export const DashedButton: Story = { - args: { - ...DefaultButton.args, - variant: 'dashed', - children: 'Dashed Button', - }, -} -export const OutlinePrimaryButton: Story = { - args: { - ...DefaultButton.args, - variant: 'outlinePrimary', - children: 'Outline Primary Button', - }, -} -export const OutlineGrayButton: Story = { - args: { - ...DefaultButton.args, - variant: 'outlineGray', - children: 'Outline Gray Button', - }, -} -export const TextButton: Story = { - args: { - ...DefaultButton.args, - variant: 'text', - children: 'Text Button', - }, -} -export const LinkPrimaryButton: Story = { - args: { - ...DefaultButton.args, - variant: 'linkPrimary', - children: 'Link Primary Button', - }, -} -export const LinkGrayButton: Story = { - args: { - ...DefaultButton.args, - variant: 'linkGray', - children: 'Link Gray Button', - }, -} diff --git a/app/src/components/Button/Button.tsx b/app/src/components/Button/Button.tsx index f0466fbe..db063f00 100644 --- a/app/src/components/Button/Button.tsx +++ b/app/src/components/Button/Button.tsx @@ -1,259 +1,66 @@ -import { ComponentProps, forwardRef, ReactNode } from 'react' -import { excludeClassName } from '../../helpers/exclude' -import { KeepBoolean, KeepButtonVariant, KeepColors, KeepSizes } from '../../Keep/KeepTheme' -import { useTheme } from '../../Keep/ThemeContext' -import type { PositionInButtonGroup } from './ButtonGroup' -import { ButtonGroup } from './ButtonGroup' +import { ButtonHTMLAttributes, FC, ReactNode } from 'react' import { cn } from '../../helpers/cn' +import { buttonTheme } from './theme' +import { ButtonGroup } from '../ButtonGroup' -export interface keepButtonTheme { - base: string - disabled: string - width: { - half: string - full: string - } - inner: { - base: string - position: PositionInButtonGroup - } - notificationLabel: string - default: { - color: ButtonColors - transition: KeepBoolean - } - primary: { - color: ButtonColors - transition: KeepBoolean - } - outlineGray: { - color: ButtonColors - transition: KeepBoolean - } - outlinePrimary: { - color: ButtonColors - - transition: KeepBoolean - } - dashed: { - color: ButtonColors - transition: KeepBoolean - } - text: { - color: ButtonColors - transition: KeepBoolean - } - linkPrimary: { - color: ButtonColors - transition: KeepBoolean - } - linkGray: { - color: ButtonColors - transition: KeepBoolean - } - pill: KeepBoolean - circle: { - off: string - size: ButtonSizes - } - size: ButtonSizes -} - -/** - * Props for the Button component. - * @interface ButtonProps - * @extends {Omit, 'className' | 'color' | 'type'>} - */ - -export interface ButtonProps extends Omit, 'className' | 'color' | 'type'> { - /** - * The URL to navigate to when the button is clicked (if provided). - * @type {string} - */ - href?: string - - /** - * The color variant of the button. - * @type {keyof ButtonColors} - * @default 'info' - */ - color?: keyof ButtonColors - - /** - * The type of the button. - * @type {keyof ButtonTypes} - * @default 'default' - */ - - type?: 'reset' | 'submit' | 'button' - /** - * The type of the button. - * @type {keyof ButtonTypes} - * @default 'default' - */ - variant?: keyof ButtonVariant - /** - * The label for the notification badge displayed on the button. - * @type {string} - */ - notificationLabel?: string - - /** - * The CSS style for the notification label. - * @type {string} - * @default 'bg-red-500 text-white' - */ - notificationLabelStyle?: string - - /** - * Whether the button should be rendered as a pill shape. - * @type {boolean} - * @default false - */ - pill?: boolean - - /** - * Whether the button should be rendered as a circle shape. - * @type {boolean} - * @default false - */ - circle?: boolean - - /** - * The position of the button within a group of buttons. - * @type {keyof PositionInButtonGroup} - * @default 'none' - */ - positionInGroup?: keyof PositionInButtonGroup - - /** - * The content of the button. - * @type {ReactNode} - */ +export interface ButtonProps extends ButtonHTMLAttributes { children?: ReactNode - - /** - * The size variant of the button. - * @type {keyof ButtonSizes} - * @default 'md' - */ - size?: keyof ButtonSizes - - /** - * The width of the button. - * @type {'full' | 'half'} - */ - width?: 'full' | 'half' - - /** - * Additional CSS class name(s) for the button. - * @type {string} - * @default '' - */ + size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' + color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' + type?: 'reset' | 'submit' | 'button' + variant?: 'link' | 'outline' className?: string - - /** - * The callback function to be executed when the button is clicked. - * @type {() => void} - */ + disabled?: boolean + shape?: 'circle' | 'icon' + position?: 'start' | 'end' | 'center' onClick?: () => void + [key: string]: any } -export interface ButtonVariant - extends Pick< - KeepButtonVariant, - 'primary' | 'dashed' | 'text' | 'linkPrimary' | 'linkGray' | 'outlineGray' | 'outlinePrimary' | 'default' - > { - [key: string]: string -} +const ButtonComponent: FC = ({ + type = 'button', + disabled, + children, + className, + size = 'md', + color = 'primary', + onClick, + variant, + shape, + position, + ...props +}) => { + const classNames = { + base: buttonTheme.base, + size: !shape && buttonTheme.size[size], + iconBtn: (shape === 'icon' || shape === 'circle') && buttonTheme.iconBtn[size], + roundedFull: shape === 'circle' && 'rounded-full', + color: !variant && buttonTheme.color[color], + link: variant === 'link' && buttonTheme.variant.link[color], + outline: variant === 'outline' && buttonTheme.variant.outline[color], + position: position && buttonTheme.position[position], + } -export interface ButtonColors extends Pick { - [key: string]: string + const combinedClassNames = cn( + classNames.base, + classNames.size, + classNames.iconBtn, + classNames.roundedFull, + classNames.color, + classNames.link, + classNames.outline, + classNames.position, + className, + ) + + return ( + + ) } -export interface ButtonSizes extends Pick { - [key: string]: string -} - -const ButtonComponent = forwardRef( - ( - { - children, - onClick, - color = 'info', - disabled = false, - type = 'button', - variant = 'primary', - href, - notificationLabel, - pill = false, - circle = false, - positionInGroup = 'none', - size = 'md', - width, - className, - notificationLabelStyle, - ...props - }, - ref, - ) => { - const isLink = typeof href !== 'undefined' - const theirProps = excludeClassName(props) - const { buttonGroup: groupTheme, button: theme } = useTheme().theme - const Component = isLink ? 'a' : 'button' - return ( - - - <> - {typeof children !== 'undefined' && children} - {typeof notificationLabel !== 'undefined' && ( - - {notificationLabel} - - )} - - - - ) - }, -) -ButtonComponent.displayName = 'Button' +ButtonGroup.displayName = 'Button.Group' export const Button = Object.assign(ButtonComponent, { Group: ButtonGroup, }) diff --git a/app/src/components/Button/ButtonGroup.tsx b/app/src/components/Button/ButtonGroup.tsx deleted file mode 100644 index fc4d0d18..00000000 --- a/app/src/components/Button/ButtonGroup.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import type { ComponentProps, FC, PropsWithChildren, ReactElement } from 'react' -import { Children, cloneElement, useMemo } from 'react' -import { excludeClassName } from '../../helpers/exclude' -import { useTheme } from '../../Keep/ThemeContext' -import type { ButtonProps } from './Button' -import { cn } from '../../helpers/cn' - -export interface keepButtonGroupTheme { - base: string - position: PositionInButtonGroup -} - -/** - * Props for the ButtonGroup component. - * @typedef {Object} ButtonGroupProps - * @extends {ComponentProps<'div'>} - */ -export type ButtonGroupProps = PropsWithChildren & Pick> - -export interface PositionInButtonGroup { - none: string - start: string - middle: string - end: string -} - -export const ButtonGroup: FC = ({ children, pill, className, ...props }): ReactElement => { - const theirProps = excludeClassName(props) - - const items = useMemo( - () => - Children.map(children as ReactElement[], (child, index) => - cloneElement(child, { - pill, - positionInGroup: - index === 0 ? 'start' : index === (children as ReactElement[]).length - 1 ? 'end' : 'middle', - }), - ), - [children, pill], - ) - const theme = useTheme().theme.buttonGroup - - return ( -
    - {items} -
    - ) -} - -ButtonGroup.displayName = 'Button.Group' diff --git a/app/src/components/Button/index.tsx b/app/src/components/Button/index.tsx new file mode 100644 index 00000000..8486fd6d --- /dev/null +++ b/app/src/components/Button/index.tsx @@ -0,0 +1 @@ +export * from './Button' diff --git a/app/src/components/Button/theme.ts b/app/src/components/Button/theme.ts index 2a894898..cb07e423 100644 --- a/app/src/components/Button/theme.ts +++ b/app/src/components/Button/theme.ts @@ -1,175 +1,110 @@ -import { keepButtonTheme } from './Button' -import { keepButtonGroupTheme } from './ButtonGroup' +interface keepButtonTheme { + base: string + color: { + primary: string + secondary: string + success: string + warning: string + error: string + } + size: { + xs: string + sm: string + md: string + lg: string + xl: string + '2xl': string + } + iconBtn: { + xs: string + sm: string + md: string + lg: string + xl: string + '2xl': string + } + variant: { + link: { + primary: string + secondary: string + success: string + warning: string + error: string + } + outline: { + primary: string + secondary: string + success: string + warning: string + error: string + } + } + position: { + start: string + end: string + center: string + } +} export const buttonTheme: keepButtonTheme = { - base: 'group rounded-md flex h-min w-fit items-center justify-center text-center font-medium active:focus:scale-95 duration-150', - disabled: 'cursor-not-allowed opacity-50', - width: { - half: '!w-1/2', - full: '!w-full', + base: 'active:focus:scale-95 duration-150 transition-all rounded-md flex items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', + color: { + primary: + 'bg-primary-500 hover:bg-primary-600 text-white focus-visible:ring-primary-100 disabled:cursor-not-allowed disabled:bg-primary-100', + secondary: + 'bg-metal-600 hover:bg-metal-700 text-white focus-visible:ring-metal-200 disabled:cursor-not-allowed disabled:bg-metal-200', + success: + 'bg-success-500 hover:bg-success-600 text-white focus-visible:ring-success-100 disabled:cursor-not-allowed disabled:bg-success-100', + warning: + 'bg-warning-500 hover:bg-warning-600 text-white focus-visible:ring-warning-100 disabled:cursor-not-allowed disabled:bg-warning-100', + error: + 'bg-error-500 hover:bg-error-600 text-white focus-visible:ring-error-100 disabled:cursor-not-allowed disabled:bg-error-100', }, - inner: { - base: 'flex items-center', - position: { - none: '', - start: 'rounded-r-none', - middle: '!rounded-none', - end: 'rounded-l-none', - }, - }, - notificationLabel: - 'ml-2 inline-flex px-2.5 py-0.5 items-center justify-center rounded-full bg-primary-400 text-body-6 font-medium text-white', - default: { - color: { - error: - 'text-error-500 bg-error-25 border border-transparent hover:bg-error-50 active:bg-error-50 focus:ring-4 focus:ring-error-50 disabled:bg-error-50 disabled:hover:bg-error-50', - info: 'text-primary-500 bg-primary-25 border border-transparent hover:bg-primary-50 active:bg-primary-50 disabled:bg-primary-50 disabled:hover:bg-primary-50 focus:ring-4 focus:ring-primary-50', - success: - 'text-success-500 bg-success-25 border border-transparent hover:bg-success-50 active:bg-success-50 focus:ring-4 focus:ring-success-50 disabled:bg-success-50 disabled:hover:bg-success-50', - warning: - 'text-warning-500 bg-warning-25 border border-transparent hover:bg-warning-50 active:bg-warning-50 focus:ring-4 focus:ring-warning-50 disabled:bg-warning-50 disabled:hover:bg-warning-50', - }, - transition: { - off: '', - on: 'transition-all duration-75 ease-in', - }, - }, - primary: { - color: { - error: - 'text-white bg-error-500 border border-transparent hover:bg-error-600 active:bg-error-600 focus:ring-4 focus:ring-error-50 disabled:bg-error-100 disabled:hover:bg-error-100', - info: 'text-white bg-primary-500 border border-transparent hover:bg-primary-600 active:bg-primary-600 focus:ring-4 focus:ring-primary-50 disabled:bg-primary-100 disabled:hover:bg-primary-100', - success: - 'text-white bg-success-500 border border-transparent hover:bg-success-600 active:bg-success-600 focus:ring-4 focus:ring-success-50 disabled:bg-success-100 disabled:hover:bg-success-100', - warning: - 'text-white bg-warning-500 border border-transparent hover:bg-warning-600 active:bg-warning-600 focus:ring-4 focus:ring-warning-50 disabled:bg-warning-100 disabled:hover:bg-warning-100', - }, - transition: { - off: '', - on: 'transition-all duration-75 ease-in', - }, - }, - outlineGray: { - color: { - error: - 'text-error-600 bg-white border border-error-200 hover:bg-error-25 active:bg-error-25 focus:ring-4 focus:ring-error-50 disabled:text-error-200 disabled:bg-white disabled:hover:bg-white disabled:opacity-100', - info: 'text-metal-600 bg-white border border-metal-200 hover:bg-metal-200/90 active:bg-metal-25 focus:ring-4 focus:ring-metal-50 disabled:text-metal-200 disabled:bg-white disabled:hover:bg-white disabled:opacity-100', - success: - 'text-success-600 bg-white border border-success-200 hover:bg-success-25 active:bg-success-25 focus:ring-4 focus:ring-success-50 disabled:text-success-200 disabled:bg-white disabled:hover:bg-white disabled:opacity-100', - warning: - 'text-warning-600 bg-white border border-warning-200 hover:bg-warning-25 active:bg-warning-25 focus:ring-4 focus:ring-warning-50 disabled:text-warning-200 disabled:bg-white disabled:hover:bg-white disabled:opacity-100', - }, - transition: { - off: '', - on: 'transition-all duration-75 ease-in', - }, + size: { + xs: 'text-body-5 px-[14px] py-2 font-medium rounded-md', + sm: 'text-body-5 px-5 py-2.5 font-medium', + md: 'text-body-4 px-6 py-3 font-medium', + lg: 'text-body-3 px-6 py-4 font-medium', + xl: 'text-body-3 px-6 py-[17px] font-medium', + '2xl': 'text-body-3 px-6 py-[18px] font-medium', }, - outlinePrimary: { - color: { - error: - 'text-error-500 bg-white border border-error-400 hover:bg-error-25 active:bg-error-25 focus:ring-4 focus:ring-error-50 disabled:text-error-100 disabled:bg-white disabled:hover:bg-white disabled:opacity-100 disabled:border-error-100', - info: 'text-primary-500 bg-white border border-primary-400 hover:bg-primary-25 active:bg-primary-25 focus:ring-4 focus:ring-primary-50 disabled:text-primary-100 disabled:bg-white disabled:hover:bg-white disabled:opacity-100 disabled:border-primary-100', - success: - 'text-success-500 bg-white border border-success-400 hover:bg-success-25 active:bg-success-25 focus:ring-4 focus:ring-success-50 disabled:text-success-100 disabled:bg-white disabled:hover:bg-white disabled:opacity-100 disabled:border-success-100', - warning: - 'text-warning-500 bg-white border border-warning-400 hover:bg-warning-25 active:bg-warning-25 focus:ring-4 focus:ring-warning-50 disabled:text-warning-100 disabled:bg-white disabled:hover:bg-white disabled:opacity-100 disabled:border-warning-100', - }, - transition: { - off: '', - on: 'transition-all duration-75 ease-in', - }, + iconBtn: { + xs: 'h-6 w-6', + sm: 'h-9 w-9', + md: 'h-10 w-10', + lg: 'h-12 w-12', + xl: 'h-14 w-14', + '2xl': 'h-[58px] w-[58px]', }, - dashed: { - color: { - error: - 'text-error-600 bg-white border border-dashed border-error-300 hover:bg-error-25 active:bg-error-25 focus:ring-4 focus:ring-error-50 disabled:text-error-200 disabled:bg-white disabled:hover:bg-white disabled:opacity-100 disabled:border-error-100', - info: 'text-metal-600 bg-white border border-dashed border-metal-300 hover:bg-metal-25 active:bg-metal-25 focus:ring-4 focus:ring-metal-50 disabled:text-metal-200 disabled:bg-white disabled:hover:bg-white disabled:opacity-100 disabled:border-metal-100', + variant: { + link: { + primary: + 'bg-transparent hover:bg-transparent hover:text-primary-600 text-primary-500 focus-visible:ring-info-100 disabled:cursor-not-allowed disabled:bg-transparent', + secondary: + 'bg-transparent hover:bg-transparent hover:text-metal-600 text-metal-500 focus-visible:ring-metal-200 disabled:cursor-not-allowed disabled:bg-transparent', success: - 'text-success-600 bg-white border border-dashed border-success-300 hover:bg-success-25 active:bg-success-25 focus:ring-4 focus:ring-success-50 disabled:text-success-200 disabled:bg-white disabled:hover:bg-white disabled:opacity-100 disabled:border-success-100', + 'bg-transparent hover:bg-transparent hover:text-success-600 text-success-500 focus-visible:ring-success-100 disabled:cursor-not-allowed disabled:bg-transparent', warning: - 'text-warning-600 bg-white border border-dashed border-warning-300 hover:bg-warning-25 active:bg-warning-25 focus:ring-4 focus:ring-warning-50 disabled:text-warning-200 disabled:bg-white disabled:hover:bg-white disabled:opacity-100 disabled:border-warning-100', - }, - transition: { - off: '', - on: 'transition-all duration-75 ease-in', - }, - }, - text: { - color: { + 'bg-transparent hover:bg-transparent hover:text-warning-600 text-warning-500 focus-visible:ring-warning-100 disabled:cursor-not-allowed disabled:bg-transparent', error: - 'text-error-600 bg-white border-0 hover:bg-error-25 hover:text-error-500 active:bg-error-25 active:text-error-500 focus:!ring-0 focus:!ring-offset-0 focus:text-error-500 disabled:text-error-200 disabled:bg-white disabled:hover:bg-white disabled:opacity-100', - info: 'text-metal-600 bg-transparent border-0 hover:bg-primary-25 hover:text-primary-500 active:bg-primary-25 active:text-primary-500 focus:!ring-0 focus:!ring-offset-0 focus:text-primary-500 disabled:text-metal-200 disabled:bg-white disabled:hover:bg-white disabled:opacity-100', - success: - 'text-success-600 bg-white border-0 hover:bg-success-25 hover:text-success-500 active:bg-success-25 active:text-success-500 focus:!ring-0 focus:!ring-offset-0 focus:text-success-500 disabled:text-success-200 disabled:bg-white disabled:hover:bg-white disabled:opacity-100', - warning: - 'text-warning-600 bg-white border-0 hover:bg-warning-25 hover:text-warning-500 active:bg-warning-25 active:text-warning-500 focus:!ring-0 focus:!ring-offset-0 focus:text-warning-500 disabled:text-warning-200 disabled:bg-white disabled:hover:bg-white disabled:opacity-100', - }, - transition: { - off: '', - on: 'transition-all duration-75 ease-in', + 'bg-transparent hover:bg-transparent hover:text-error-600 text-error-500 focus-visible:ring-error-100 disabled:cursor-not-allowed disabled:bg-transparent', }, - }, - linkPrimary: { - color: { - error: - 'text-error-600 bg-white border-0 hover:bg-white hover:text-error-400 active:bg-white active:text-error-400 focus:!ring-0 focus:!ring-offset-0 focus:text-error-500 disabled:text-error-600 disabled:bg-white disabled:hover:bg-white', - info: 'text-primary-600 bg-white border-0 hover:bg-white hover:text-primary-400 active:bg-white active:text-primary-400 focus:!ring-0 focus:!ring-offset-0 focus:text-primary-500 disabled:text-primary-600 disabled:bg-white disabled:hover:bg-white', + outline: { + primary: + 'bg-white border border-primary-500 hover:bg-primary-50 hover:text-primary-600 text-primary-500 focus-visible:ring-primary-100 disabled:cursor-not-allowed disabled:bg-white disabled:text-primary-200 disabled:border-primary-100', + secondary: + 'bg-white border border-metal-300 hover:bg-metal-50 hover:text-metal-500 text-metal-500 focus-visible:ring-metal-100 disabled:cursor-not-allowed disabled:bg-white disabled:text-metal-200 disabled:border-metal-200', success: - 'text-success-600 bg-white border-0 hover:bg-white hover:text-success-400 active:bg-white active:text-success-400 focus:!ring-0 focus:!ring-offset-0 focus:text-success-500 disabled:text-success-600 disabled:bg-white disabled:hover:bg-white', + 'bg-white border border-success-500 hover:bg-success-50 hover:text-success-700 text-success-600 focus-visible:ring-success-100 disabled:cursor-not-allowed disabled:bg-white disabled:text-success-100 disabled:border-success-100', warning: - 'text-warning-600 bg-white border-0 hover:bg-white hover:text-warning-400 active:bg-white active:text-warning-400 focus:!ring-0 focus:!ring-offset-0 focus:text-warning-500 disabled:text-warning-600 disabled:bg-white disabled:hover:bg-white', - }, - transition: { - off: '', - on: 'transition-all duration-75 ease-in', - }, - }, - linkGray: { - color: { + 'bg-white border border-warning-600 hover:bg-warning-50 hover:text-warning-700 text-warning-600 focus-visible:ring-warning-200 disabled:cursor-not-allowed disabled:bg-white disabled:text-warning-100 disabled:border-warning-100', error: - 'text-error-600 bg-white border-0 hover:bg-white hover:text-error-700 active:bg-white active:text-error-700 focus:!ring-0 focus:!ring-offset-0 focus:text-error-900 disabled:text-error-200 disabled:bg-white disabled:hover:bg-white disabled:opacity-100', - info: 'text-metal-600 bg-white border-0 hover:bg-white hover:text-metal-700 active:bg-white active:text-metal-700 focus:!ring-0 focus:!ring-offset-0 focus:text-metal-900 disabled:text-metal-200 disabled:bg-white disabled:hover:bg-white disabled:opacity-100', - success: - 'text-success-600 bg-white border-0 hover:bg-white hover:text-success-700 active:bg-white active:text-success-700 focus:!ring-0 focus:!ring-offset-0 focus:text-success-900 disabled:text-success-200 disabled:bg-white disabled:hover:bg-white disabled:opacity-100', - warning: - 'text-warning-600 bg-white border-0 hover:bg-white hover:text-warning-700 active:bg-white active:text-warning-700 focus:!ring-0 focus:!ring-offset-0 focus:text-warning-900 disabled:text-warning-200 disabled:bg-white disabled:hover:bg-white disabled:opacity-100', - }, - transition: { - off: '', - on: 'transition-all duration-75 ease-in', - }, - }, - pill: { - off: '', - on: 'rounded-full', - }, - circle: { - off: 'p-0', - size: { - xs: 'text-body-5 p-2 rounded-full', - sm: 'text-body-5 p-2.5 rounded-full', - md: 'text-body-4 p-3 rounded-full', - lg: 'text-body-3 p-3.5 rounded-full', - xl: 'text-body-3 p-4 rounded-full', - '2xl': 'text-body-2 p-5 rounded-full', + 'bg-white border border-error-500 hover:bg-error-25 hover:text-error-700 text-error-600 focus-visible:ring-error-200 disabled:cursor-not-allowed disabled:bg-white disabled:text-error-100 disabled:border-error-100', }, }, - size: { - xs: 'text-body-5 px-3 py-2', - sm: 'text-body-5 px-4 py-2.5', - md: 'text-body-4 px-5 py-3 flex items-center justify-center cursor-pointer', - lg: 'text-body-3 px-5 py-[14px]', - xl: 'text-body-3 px-[22px] py-4', - '2xl': 'text-body-2 px-6 py-[18px]', - }, -} - -export const buttonGroupTheme: keepButtonGroupTheme = { - base: 'flex gap-0', position: { - none: '', - start: 'rounded-r-none', - middle: 'rounded-none !border-l-0 !border-r-0 pl-0 z-10', - end: '!rounded-l-none pl-0', + start: '!rounded-l-md !rounded-r-none', + end: '!rounded-r-md !rounded-l-none', + center: '!rounded-none', }, } diff --git a/app/src/components/ButtonGroup/ButtonGroup.tsx b/app/src/components/ButtonGroup/ButtonGroup.tsx new file mode 100644 index 00000000..aa602c46 --- /dev/null +++ b/app/src/components/ButtonGroup/ButtonGroup.tsx @@ -0,0 +1,16 @@ +import { FC, ReactNode } from 'react' +import { cn } from '../../helpers/cn' + +export interface ButtonGroupProps { + className?: string + children?: ReactNode + [key: string]: any +} + +export const ButtonGroup: FC = ({ children, className, ...props }) => { + return ( +
    + {children} +
    + ) +} diff --git a/app/src/components/ButtonGroup/index.tsx b/app/src/components/ButtonGroup/index.tsx new file mode 100644 index 00000000..d22d23bf --- /dev/null +++ b/app/src/components/ButtonGroup/index.tsx @@ -0,0 +1 @@ +export * from './ButtonGroup' diff --git a/app/src/components/Card/Card.stories.tsx b/app/src/components/Card/Card.stories.tsx index 89e1acbc..3b20f264 100644 --- a/app/src/components/Card/Card.stories.tsx +++ b/app/src/components/Card/Card.stories.tsx @@ -29,7 +29,6 @@ import { Avatar } from '../Avatar/Avatar' import { Button } from '../Button/Button' import { Badge } from '../Badge' import { Progress } from '../Progress' -import { PlayButton } from '../PlayButton' const meta: Meta = { component: Card, @@ -296,7 +295,7 @@ export const CardWithPostCard: Story = { - + , ), @@ -371,7 +370,7 @@ export const EcommerceProductCard: Story = { - + $649,00 @@ -462,19 +459,21 @@ export const PodcastCard: Story = { - - - } /> - + - @@ -526,10 +525,10 @@ export const PricingCard: Story = { - - diff --git a/app/src/components/Chart/AreaChart.tsx b/app/src/components/Chart/AreaChart.tsx index e4e43b60..e1fda414 100644 --- a/app/src/components/Chart/AreaChart.tsx +++ b/app/src/components/Chart/AreaChart.tsx @@ -1,7 +1,6 @@ import { FC } from 'react' import { Area, AreaChart as AreaChartCom, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts' import { CustomTooltip } from './CustomTooltip' -import { ButtonVariant } from '../Button/Button' import { ChartContext } from './ChartContext' /** @@ -14,7 +13,7 @@ interface AreaChartProps { * @type {string} * @default primary */ - tooltipBtnVariant?: keyof ButtonVariant + tooltipBtnColor?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' /** * Tooltip custom className * @type {string} @@ -170,7 +169,7 @@ export const AreaChart: FC = ({ secondaryChartColor = '#1B4DFF', areaStoke = '#1B4DFF', secondaryAreaStoke = '#94ABFF', - tooltipBtnVariant = 'primary', + tooltipBtnColor = 'primary', tooltipBtnStyle, opacity = { topStartOpacity: 0.3, @@ -225,5 +224,5 @@ export const AreaChart: FC = ({ ) - return {RenderLineChart} + return {RenderLineChart} } diff --git a/app/src/components/Chart/BarChart.tsx b/app/src/components/Chart/BarChart.tsx index 0ea218fc..4f286fb1 100644 --- a/app/src/components/Chart/BarChart.tsx +++ b/app/src/components/Chart/BarChart.tsx @@ -3,7 +3,6 @@ import { FC, useEffect, useState } from 'react' import { Bar, BarChart as BarChartCom, CartesianGrid, Cell, Legend, Tooltip, XAxis, YAxis } from 'recharts' import CustomLegend from './CustomLegend' import { CustomTooltip } from './CustomTooltip' -import { ButtonVariant } from '../Button/Button' import { ChartContext } from './ChartContext' /** @@ -16,7 +15,7 @@ interface BarChartProps { * @type {string} * @default primary */ - tooltipBtnVariant?: keyof ButtonVariant + tooltipBtnColor?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' /** * Tooltip custom className * @type {string} @@ -214,7 +213,7 @@ export const BarChart: FC = ({ width = 600, barSize = 6, secondaryDataKey, - tooltipBtnVariant = 'primary', + tooltipBtnColor = 'primary', tooltipBtnStyle, }) => { const [client, setClient] = useState(false) @@ -270,7 +269,7 @@ export const BarChart: FC = ({ }, []) return ( - + {client ? RenderBarChart : null} ) diff --git a/app/src/components/Chart/ChartContext.tsx b/app/src/components/Chart/ChartContext.tsx index dec116de..e88e97ed 100644 --- a/app/src/components/Chart/ChartContext.tsx +++ b/app/src/components/Chart/ChartContext.tsx @@ -1,8 +1,7 @@ import { createContext, useContext } from 'react' -import { ButtonVariant } from '../Button/Button' type ChartContextProps = { - tooltipBtnVariant?: keyof ButtonVariant + tooltipBtnColor?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' tooltipBtnStyle?: string } diff --git a/app/src/components/Chart/CustomTooltip.tsx b/app/src/components/Chart/CustomTooltip.tsx index 07e470d8..d3116ba2 100644 --- a/app/src/components/Chart/CustomTooltip.tsx +++ b/app/src/components/Chart/CustomTooltip.tsx @@ -6,13 +6,13 @@ import { ReactElement } from 'react' import { useChartContext } from './ChartContext' export const CustomTooltip = ({ active, payload }: TooltipProps): ReactElement | null => { - const { tooltipBtnVariant, tooltipBtnStyle } = useChartContext() + const { tooltipBtnColor, tooltipBtnStyle } = useChartContext() if (active && payload?.length) { return ( <> {payload.length > 1 ? ( - diff --git a/app/src/components/Empty/Empty.tsx b/app/src/components/Empty/Empty.tsx index ccbe9fb9..7f68addc 100644 --- a/app/src/components/Empty/Empty.tsx +++ b/app/src/components/Empty/Empty.tsx @@ -13,6 +13,7 @@ export interface keepEmptyTheme { root: RootTheme title: keepTitleTheme description: keepDescriptionTheme + redirectBtn: string } interface RootTheme { diff --git a/app/src/components/Empty/Redirect.tsx b/app/src/components/Empty/Redirect.tsx index 9de089b4..6df70ae4 100644 --- a/app/src/components/Empty/Redirect.tsx +++ b/app/src/components/Empty/Redirect.tsx @@ -1,15 +1,8 @@ 'use client' import { FC, ReactNode } from 'react' - -import { Button } from '../Button/Button' - import { cn } from '../../helpers/cn' +import { useTheme } from '../../Keep/ThemeContext' -/** - * Props for the Redirect component. - * @interface RedirectProps - * - */ export interface RedirectProps { /** * The URL to redirect to. @@ -17,18 +10,7 @@ export interface RedirectProps { * @default '' */ redirectUrl?: string - /** - * The size of the redirect button. - * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'} - * @default 'md' - */ - redirectBtnSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' - /** - * The type of the redirect button. - * @type {'primary' | 'dashed' | 'text' | 'linkPrimary' | 'linkGray' | 'outlineGray' | 'outlinePrimary' | 'default'} - * @default 'primary' - */ - buttonType?: 'primary' | 'dashed' | 'text' | 'linkPrimary' | 'linkGray' | 'outlineGray' | 'outlinePrimary' | 'default' + /** * The text to display on the redirect button. * @type {string} @@ -48,19 +30,13 @@ export interface RedirectProps { children?: ReactNode } -export const Redirect: FC = ({ - redirectUrl, - redirectBtnSize = 'md', - buttonType = 'primary', - buttonText, - className, - children, -}) => { +export const Redirect: FC = ({ redirectUrl, buttonText, className, children }) => { + const { redirectBtn } = useTheme().theme.empty if (!children) { return ( - + ) } diff --git a/app/src/components/Empty/theme.ts b/app/src/components/Empty/theme.ts index 7f2ac12c..16166876 100644 --- a/app/src/components/Empty/theme.ts +++ b/app/src/components/Empty/theme.ts @@ -10,4 +10,6 @@ export const emptyTheme: keepEmptyTheme = { description: { base: 'mb-8 text-center text-body-3 font-normal text-metal-400', }, + redirectBtn: + 'flex items-center justify-center rounded-md bg-primary-500 px-6 py-3 text-body-4 font-medium text-white transition-all duration-150 hover:bg-primary-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100 focus-visible:ring-offset-2 active:focus:scale-95 disabled:cursor-not-allowed disabled:bg-primary-100', } diff --git a/app/src/components/Modal/Modal.stories.tsx b/app/src/components/Modal/Modal.stories.tsx index 1ecb8954..ff9b2bb2 100644 --- a/app/src/components/Modal/Modal.stories.tsx +++ b/app/src/components/Modal/Modal.stories.tsx @@ -57,12 +57,10 @@ const DefaultModalComponent = () => {
    - - + {
    - - +
    @@ -112,10 +108,10 @@ const ConfirmationModalComponent = () => {
    - -
    @@ -136,10 +132,10 @@ const ConfirmationModalComponent = () => {
    - - @@ -180,12 +176,10 @@ const HistoryModalComponent = () => {
    - - + @@ -221,12 +215,10 @@ const HistoryModalComponent = () => {
    - - +
    diff --git a/app/src/components/Navigation/Navigation.stories.tsx b/app/src/components/Navigation/Navigation.stories.tsx index d55c9006..86e36d37 100644 --- a/app/src/components/Navigation/Navigation.stories.tsx +++ b/app/src/components/Navigation/Navigation.stories.tsx @@ -73,9 +73,7 @@ export const DefaultNavbar: Story = { Search - + @@ -153,7 +151,7 @@ export const NavbarEcommerceMenu: Story = { } iconAnimation={false} /> - + Can we store cookies? @@ -24,10 +22,8 @@ const DefaultNotificationComponent = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - + @@ -44,9 +40,7 @@ const NotificationWithAvatarComponent = () => { return (
    - + @@ -58,10 +52,8 @@ const NotificationWithAvatarComponent = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - + @@ -79,9 +71,7 @@ const NotificationWithIconComponent = () => { return (
    - + @@ -93,10 +83,8 @@ const NotificationWithIconComponent = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - + @@ -129,13 +117,13 @@ const NotificationWithCardComponent = () => { return (
    - - - @@ -155,10 +143,8 @@ const NotificationWithCardComponent = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - + @@ -180,10 +166,10 @@ const NotificationWithCardComponent = () => { Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry. - - @@ -205,13 +191,13 @@ const NotificationWithCardComponent = () => { /> - - - ) - } - return ( - - ) -} diff --git a/app/src/components/Popover/Popover.stories.tsx b/app/src/components/Popover/Popover.stories.tsx index facfb903..f866de9b 100644 --- a/app/src/components/Popover/Popover.stories.tsx +++ b/app/src/components/Popover/Popover.stories.tsx @@ -79,7 +79,7 @@ export const DefaultPopover: Story = { some form, by injected humour - @@ -133,7 +133,7 @@ export const TriggerVariantPopover: Story = { some form, by injected humour - @@ -156,7 +156,7 @@ export const PopoverPosition: Story = { some form, by injected humour - diff --git a/app/src/components/SearchBar/SearchBar.stories.tsx b/app/src/components/SearchBar/SearchBar.stories.tsx index e68d0368..ed23fa23 100644 --- a/app/src/components/SearchBar/SearchBar.stories.tsx +++ b/app/src/components/SearchBar/SearchBar.stories.tsx @@ -149,13 +149,13 @@ const SearchBarWithColorVariantCom = () => { withBg bordered={false} addon={ - } addonPosition="right" icon={ - -
    -
    -
    -
    -
    - -
    - -
    - - diff --git a/app/src/components/Tooltip/Tooltip.stories.tsx b/app/src/components/Tooltip/Tooltip.stories.tsx index fe5940cc..c5df3b3f 100644 --- a/app/src/components/Tooltip/Tooltip.stories.tsx +++ b/app/src/components/Tooltip/Tooltip.stories.tsx @@ -112,11 +112,7 @@ export const DefaultTooltip: Story = { placement: 'right', animation: 'duration-300', style: 'dark', - children: ( - - ), + children: , }, } export const TooltipWithTitle: Story = { diff --git a/app/src/components/Upload/InputField.tsx b/app/src/components/Upload/InputField.tsx index e8103bb8..164df231 100644 --- a/app/src/components/Upload/InputField.tsx +++ b/app/src/components/Upload/InputField.tsx @@ -37,7 +37,7 @@ export const InputField: FC = () => { title, icon, id, - uploadBtnType = 'primary', + uploadBtnColor = 'primary', className, labelStyle, } = useUploadContext() @@ -60,7 +60,7 @@ export const InputField: FC = () => {

    {fileType ? fileType : 'Files: JPEG, PNG, GIF'}

    @@ -69,8 +69,8 @@ const ProductCard = () => { - @@ -191,8 +191,8 @@ export const CardComponent = () => { - - - - - - +
    + + + + + + + + + + + + + + + + + + + + +
    ) diff --git a/public/images/carousel/four.svg b/public/images/carousel/four.svg new file mode 100644 index 00000000..25d45ec3 --- /dev/null +++ b/public/images/carousel/four.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/carousel/one.svg b/public/images/carousel/one.svg new file mode 100644 index 00000000..84a208df --- /dev/null +++ b/public/images/carousel/one.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/carousel/three.svg b/public/images/carousel/three.svg new file mode 100644 index 00000000..e1aed4e3 --- /dev/null +++ b/public/images/carousel/three.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/carousel/two.svg b/public/images/carousel/two.svg new file mode 100644 index 00000000..7e0a7ac9 --- /dev/null +++ b/public/images/carousel/two.svg @@ -0,0 +1 @@ + \ No newline at end of file From 0a1f4156c4e7db37c4737f1fcf86d4c4e3df66f7 Mon Sep 17 00:00:00 2001 From: Arifulislam5577 Date: Sun, 14 Jan 2024 19:00:45 +0600 Subject: [PATCH 06/70] Updated: Accordion Component Updated. --- app/components/Navbar.tsx | 20 ++- .../accordion/variant/AccordionFlush.tsx | 12 +- .../accordion/variant/AccordionOpenPanel.tsx | 38 ++-- .../accordion/variant/AccordionWithIcon.tsx | 16 +- .../accordion/variant/CustomizeAccordion.tsx | 26 ++- .../accordion/variant/DefaultAccordion.tsx | 6 +- .../accordion/variant/DisabledAccordion.tsx | 22 +-- app/docs/layout.tsx | 14 +- app/new/Button/Button.tsx | 170 ------------------ app/new/Button/ButtonGroup.tsx | 10 -- app/new/page.tsx | 95 +--------- app/src/Keep/KeepTheme.ts | 2 - .../Accordion/Accordion.stories.tsx | 30 ++-- app/src/components/Accordion/Accordion.tsx | 38 +--- app/src/components/Accordion/Container.tsx | 13 +- app/src/components/Accordion/Content.tsx | 6 +- app/src/components/Accordion/Icon.tsx | 31 +++- app/src/components/Accordion/Panel.tsx | 16 +- app/src/components/Accordion/Title.tsx | 14 +- app/src/components/Accordion/theme.ts | 20 ++- app/src/theme/theme.ts | 2 - 21 files changed, 160 insertions(+), 441 deletions(-) delete mode 100644 app/new/Button/Button.tsx delete mode 100644 app/new/Button/ButtonGroup.tsx diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx index 1d6c2b45..aeed8252 100644 --- a/app/components/Navbar.tsx +++ b/app/components/Navbar.tsx @@ -144,9 +144,11 @@ const Navbar = () => { }`}>
    - + - Quick Link + + Quick Link + @@ -165,10 +167,10 @@ const Navbar = () => { - - + + - + Getting Started @@ -189,10 +191,12 @@ const Navbar = () => { - - + + - Components + + Components + diff --git a/app/docs/components/accordion/variant/AccordionFlush.tsx b/app/docs/components/accordion/variant/AccordionFlush.tsx index 6f89d1b5..a23018ec 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 @@ -48,6 +51,7 @@ export const AccordionComponent = () => { 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 @@ -58,6 +62,7 @@ export const AccordionComponent = () => { 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 @@ -68,6 +73,7 @@ export const AccordionComponent = () => { Can I add additional content to notifications? + Yes, the Notification component in the Keep React allows you to include extra content alongside the primary diff --git a/app/docs/components/accordion/variant/AccordionOpenPanel.tsx b/app/docs/components/accordion/variant/AccordionOpenPanel.tsx index 1a9a1319..75c7fd1b 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 = () => { +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 @@ -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..516dfa08 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 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 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/layout.tsx b/app/docs/layout.tsx index 5ca14211..7df7681a 100644 --- a/app/docs/layout.tsx +++ b/app/docs/layout.tsx @@ -86,10 +86,10 @@ const DocsLayout = ({ children }: { children: ReactNode }) => {
    ) diff --git a/app/src/components/Accordion/Container.tsx b/app/src/components/Accordion/Container.tsx index 8f72782f..66a22972 100644 --- a/app/src/components/Accordion/Container.tsx +++ b/app/src/components/Accordion/Container.tsx @@ -1,8 +1,8 @@ 'use client' import { FC, ReactNode } from 'react' -import { useTheme } from '../../Keep/ThemeContext' -import { cn } from '../../helpers/cn' +import { cn } from '~/app/src/helpers/cn' import { useAccordionContext } from './AccordionContext' +import { accordionTheme } from './theme' export interface ContainerProps { children?: ReactNode @@ -16,13 +16,10 @@ export interface keepAccordionContainerTheme { } export const Container: FC = ({ children, className, ...otherProps }) => { - const { isOpen, flush, setIsOpen } = useAccordionContext() - const { container } = useTheme().theme.accordion + const { isOpen, setIsOpen } = useAccordionContext() + const { container } = accordionTheme return ( -
    setIsOpen && setIsOpen(!isOpen)} - className={cn(container.base, !flush && isOpen ? container.open : '', flush && isOpen ? '' : '', className)}> +
    setIsOpen && setIsOpen(!isOpen)} className={cn(container.base, className)}> {children}
    ) diff --git a/app/src/components/Accordion/Content.tsx b/app/src/components/Accordion/Content.tsx index 8c26be4f..67300284 100644 --- a/app/src/components/Accordion/Content.tsx +++ b/app/src/components/Accordion/Content.tsx @@ -1,9 +1,9 @@ 'use client' import { FC, ReactNode } from 'react' import { Collapse } from 'react-collapse' -import { useTheme } from '../../Keep/ThemeContext' -import { cn } from '../../helpers/cn' import { useAccordionContext } from './AccordionContext' +import { accordionTheme } from './theme' +import { cn } from '../../helpers/cn' export interface ContentProps { children?: ReactNode @@ -17,7 +17,7 @@ export interface keepAccordionContentTheme { export const Content: FC = ({ children, className, ...otherProps }) => { const { isOpen = false } = useAccordionContext() - const { content } = useTheme().theme.accordion + const { content } = accordionTheme return (
    diff --git a/app/src/components/Accordion/Icon.tsx b/app/src/components/Accordion/Icon.tsx index 1bf1985c..38039720 100644 --- a/app/src/components/Accordion/Icon.tsx +++ b/app/src/components/Accordion/Icon.tsx @@ -1,8 +1,8 @@ 'use client' import { FC, ReactNode } from 'react' -import { useTheme } from '../../Keep/ThemeContext' -import { cn } from '../../helpers/cn' import { useAccordionContext } from './AccordionContext' +import { accordionTheme } from './theme' +import { cn } from '../../helpers/cn' export interface IconProps { children?: ReactNode @@ -20,10 +20,31 @@ export interface keepAccordionIconTheme { export const Icon: FC = ({ children, className, ...otherProps }) => { const { isOpen } = useAccordionContext() - const { icon } = useTheme().theme.accordion + const { icon } = accordionTheme return ( -
    - {children} +
    + {children ? ( + children + ) : ( + + + + + )}
    ) } diff --git a/app/src/components/Accordion/Panel.tsx b/app/src/components/Accordion/Panel.tsx index fc3cddad..0a682da9 100644 --- a/app/src/components/Accordion/Panel.tsx +++ b/app/src/components/Accordion/Panel.tsx @@ -1,8 +1,8 @@ 'use client' import { FC, ReactNode } from 'react' -import { useTheme } from '../../Keep/ThemeContext' -import { cn } from '../../helpers/cn' import { AccordionContext } from './AccordionContext' +import { accordionTheme } from './theme' +import { cn } from '../../helpers/cn' export interface PanelProps { children?: ReactNode @@ -11,15 +11,19 @@ export interface PanelProps { } export interface keepAccordionPanelTheme { - base: string - panelBg: string + flush: { + on: string + off: string + } } export const Panel: FC = ({ children, className, ...props }) => { const { isOpen, setIsOpen, flush } = props.state - const { panel } = useTheme().theme.accordion + const { panel } = accordionTheme return ( -
    +
    {children}
    ) diff --git a/app/src/components/Accordion/Title.tsx b/app/src/components/Accordion/Title.tsx index 780428df..cf487913 100644 --- a/app/src/components/Accordion/Title.tsx +++ b/app/src/components/Accordion/Title.tsx @@ -1,8 +1,6 @@ -'use client' import { FC, ReactNode } from 'react' -import { useTheme } from '../../Keep/ThemeContext' +import { accordionTheme } from './theme' import { cn } from '../../helpers/cn' -import { Typography } from '../Typography' export interface TitleProps { children?: ReactNode @@ -13,11 +11,7 @@ export interface keepAccordionTitleTheme { base: string } -export const Title: FC = ({ children, className, ...otherProps }) => { - const { title } = useTheme().theme.accordion - return ( - - {children} - - ) +export const Title: FC = ({ children, className }) => { + const { title } = accordionTheme + return

    {children}

    } diff --git a/app/src/components/Accordion/theme.ts b/app/src/components/Accordion/theme.ts index 19c1f632..01e17250 100644 --- a/app/src/components/Accordion/theme.ts +++ b/app/src/components/Accordion/theme.ts @@ -2,22 +2,26 @@ import { keepAccordionTheme } from '.' export const accordionTheme: keepAccordionTheme = { container: { - base: 'flex cursor-pointer items-center justify-between px-5 py-[18px]', - open: 'border-b border-b-metal-200 bg-metal-200/50 group-hover:bg-metal-100 group-hover:bg-metal-200/50', + base: 'flex cursor-pointer items-center justify-between px-6 py-5', + open: '', }, content: { - base: 'p-6 text-body-4 font-normal text-metal-500', + base: 'select-none text-body-4 font-normal text-metal-500 pb-5 px-6', }, panel: { - base: 'group transition-colors duration-200', - panelBg: 'bg-metal-50', + flush: { + on: 'rounded-none border-b border-metal-100', + off: 'rounded-xl border border-metal-100 bg-white', + }, }, icon: { base: 'transition-transform duration-300', rotated: { - full: 'rotate-[225deg]', - half: 'rotate-90', + full: 'rotate-180', + half: 'rotate-0', }, }, - title: { base: 'select-none text-body-2 font-medium text-metal-700' }, + title: { + base: 'select-none text-body-2 font-medium text-metal-700 first-letter:mr-1 first-letter:text-primary-500', + }, } diff --git a/app/src/theme/theme.ts b/app/src/theme/theme.ts index e1b547b0..e3065921 100644 --- a/app/src/theme/theme.ts +++ b/app/src/theme/theme.ts @@ -1,4 +1,3 @@ -import { accordionTheme } from '../components/Accordion/theme' import { alertTheme } from '../components/Alert/theme' import { avatarTheme } from '../components/Avatar/theme' import { badgeTheme } from '../components/Badge/theme' @@ -35,7 +34,6 @@ import { uploadTheme } from '../components/Upload/theme' export const theme = { alert: alertTheme, avatar: avatarTheme, - accordion: accordionTheme, button: buttonTheme, badge: badgeTheme, breadcrumb: breadcrumbTheme, From 8d8f61a1b8c5183426d5393eeadd6638a83adf4c Mon Sep 17 00:00:00 2001 From: Arifulislam5577 Date: Tue, 16 Jan 2024 20:21:37 +0600 Subject: [PATCH 07/70] Updated: Alert component updated. --- app/components/Navbar.tsx | 6 +- app/docs/components/alert/alert.mdx | 59 ++- app/docs/components/alert/alertApi.ts | 61 +-- .../alert/variant/AlertColorVariant.tsx | 269 +++-------- .../alert/variant/AlertWithBgColor.tsx | 73 +++ .../alert/variant/AlertWithBorderAccent.tsx | 65 --- .../alert/variant/AlertWithCard.tsx | 199 ++++++++ .../alert/variant/AlertWithDismissIcon.tsx | 46 +- .../alert/variant/AlertWithRounded.tsx | 65 --- .../alert/variant/CustomizeAlert.tsx | 54 --- .../components/alert/variant/DefaultAlert.tsx | 46 +- app/docs/layout.tsx | 4 +- app/new/Alert/Alert.tsx | 75 ++++ app/new/Alert/Container.tsx | 12 + app/new/Alert/Description.tsx | 11 + app/new/Alert/Dismiss.tsx | 27 ++ app/new/Alert/Icon.tsx | 54 +++ app/new/Alert/Link.tsx | 21 + app/new/Alert/Title.tsx | 11 + app/new/Alert/index.tsx | 1 + app/new/page.tsx | 424 +++++++++++++++++- app/src/Keep/KeepTheme.ts | 2 - app/src/components/Alert/Alert.stories.tsx | 151 ------- app/src/components/Alert/Alert.tsx | 212 ++------- app/src/components/Alert/AlertContext.tsx | 17 - app/src/components/Alert/Body.tsx | 12 +- app/src/components/Alert/Container.tsx | 13 +- app/src/components/Alert/Description.tsx | 8 +- app/src/components/Alert/Dismiss.tsx | 27 ++ app/src/components/Alert/Icon.tsx | 56 ++- app/src/components/Alert/Link.tsx | 20 + app/src/components/Alert/Title.tsx | 14 +- app/src/components/Alert/theme.ts | 100 +++-- app/src/theme/theme.ts | 2 - 34 files changed, 1241 insertions(+), 976 deletions(-) create mode 100644 app/docs/components/alert/variant/AlertWithBgColor.tsx delete mode 100644 app/docs/components/alert/variant/AlertWithBorderAccent.tsx create mode 100644 app/docs/components/alert/variant/AlertWithCard.tsx delete mode 100644 app/docs/components/alert/variant/AlertWithRounded.tsx delete mode 100644 app/docs/components/alert/variant/CustomizeAlert.tsx create mode 100644 app/new/Alert/Alert.tsx create mode 100644 app/new/Alert/Container.tsx create mode 100644 app/new/Alert/Description.tsx create mode 100644 app/new/Alert/Dismiss.tsx create mode 100644 app/new/Alert/Icon.tsx create mode 100644 app/new/Alert/Link.tsx create mode 100644 app/new/Alert/Title.tsx create mode 100644 app/new/Alert/index.tsx delete mode 100644 app/src/components/Alert/Alert.stories.tsx delete mode 100644 app/src/components/Alert/AlertContext.tsx create mode 100644 app/src/components/Alert/Dismiss.tsx create mode 100644 app/src/components/Alert/Link.tsx diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx index aeed8252..7a3aef38 100644 --- a/app/components/Navbar.tsx +++ b/app/components/Navbar.tsx @@ -146,7 +146,7 @@ const Navbar = () => { - + Quick Link @@ -170,7 +170,7 @@ const Navbar = () => { - + Getting Started @@ -194,7 +194,7 @@ const Navbar = () => { - + Components diff --git a/app/docs/components/alert/alert.mdx b/app/docs/components/alert/alert.mdx index 90e6272a..e8b1b4ff 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 CssThemePreview from '../../../components/CssThemePreview' +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 +## Color Variants of 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. +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. - - + + -## Softly Rounded Alerts +## Alert With Background Color -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. +Switch the background color of alerts using the `withBg={true}` prop. By default, `withBg` is set to `false`. - - + + -## Accented Border Alerts +## Alert With Card -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"`. +Display the alert message with a card view, and access all the available props for customization. - - + + -## Color Variants of Alerts - -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. - - - - - -## 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..d7afac8d 100644 --- a/app/docs/components/alert/variant/AlertColorVariant.tsx +++ b/app/docs/components/alert/variant/AlertColorVariant.tsx @@ -1,256 +1,107 @@ -'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 +
    ) } 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..94c47e79 --- /dev/null +++ b/app/docs/components/alert/variant/AlertWithBgColor.tsx @@ -0,0 +1,73 @@ +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 = ` +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..37c78730 --- /dev/null +++ b/app/docs/components/alert/variant/AlertWithCard.tsx @@ -0,0 +1,199 @@ +import { Alert, Button, CheckBox } 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 = ` +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..b32f5ba3 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' 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 { Alert } from '../../../../src' 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..367acf9c 100644 --- a/app/docs/components/alert/variant/DefaultAlert.tsx +++ b/app/docs/components/alert/variant/DefaultAlert.tsx @@ -1,52 +1,32 @@ -'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/layout.tsx b/app/docs/layout.tsx index 7df7681a..a9d51196 100644 --- a/app/docs/layout.tsx +++ b/app/docs/layout.tsx @@ -89,7 +89,7 @@ const DocsLayout = ({ children }: { children: ReactNode }) => { - + Getting Started @@ -115,7 +115,7 @@ const DocsLayout = ({ children }: { children: ReactNode }) => { - + Components diff --git a/app/new/Alert/Alert.tsx b/app/new/Alert/Alert.tsx new file mode 100644 index 00000000..98be8c92 --- /dev/null +++ b/app/new/Alert/Alert.tsx @@ -0,0 +1,75 @@ +import { Children, FC, ReactElement, ReactNode, cloneElement } from 'react' +import { Container } from './Container' +import { Description } from './Description' +import { Title } from './Title' +import { Dismiss } from './Dismiss' +import { Link } from './Link' +import { Icon } from './Icon' +import { cn } from '~/app/src/helpers/cn' + +interface AlertProps { + children?: ReactNode + color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' + className?: string + withBg?: boolean + onClick?: boolean | (() => void) + dismiss?: boolean + [key: string]: any +} + +const alertTheme = { + colorWithBg: { + primary: 'text-primary-500 bg-primary-50 border border-primary-200', + secondary: 'text-metal-900 bg-metal-50 border border-metal-200', + success: 'text-success-500 bg-success-25 border border-success-200', + warning: 'text-warning-500 bg-warning-25 border border-warning-200', + error: 'text-error-500 bg-error-25 border border-error-100', + }, + colorWithOutBg: { + primary: 'bg-white text-primary-500 border border-primary-200', + secondary: 'bg-white text-metal-900 border border-metal-200', + success: 'bg-white text-success-500 border border-success-200', + warning: 'bg-white text-warning-500 border border-warning-200', + error: 'bg-white text-error-500 border border-error-100', + }, +} + +export const AlertComponent: FC = ({ + children, + color = 'primary', + withBg, + onClick, + dismiss, + className, +}) => { + const childrenWithProps = Children.map(children, (child) => + cloneElement(child as ReactElement, { color: color, onClick: onClick }), + ) + return ( +
    + {childrenWithProps} +
    + ) +} + +Container.displayName = 'Alert.Container' +Description.displayName = 'Alert.Description' +Title.displayName = 'Alert.Title' +Dismiss.displayName = 'Alert.Dismiss' +Link.displayName = 'Alert.Link' +Icon.displayName = 'Alert.Icon' + +export const Alert = Object.assign(AlertComponent, { + Container, + Description, + Title, + Dismiss, + Link, + Icon, +}) diff --git a/app/new/Alert/Container.tsx b/app/new/Alert/Container.tsx new file mode 100644 index 00000000..c7ed5223 --- /dev/null +++ b/app/new/Alert/Container.tsx @@ -0,0 +1,12 @@ +import { ReactNode, FC, Children, cloneElement, ReactElement } from 'react' +import { cn } from '~/app/src/helpers/cn' + +export interface ContainerProps { + children?: ReactNode + className?: string +} + +export const Container: FC = ({ children, className, ...props }) => { + const childrenWithProps = Children.map(children, (child) => cloneElement(child as ReactElement, { ...props })) + return
    {childrenWithProps}
    +} diff --git a/app/new/Alert/Description.tsx b/app/new/Alert/Description.tsx new file mode 100644 index 00000000..2c23171e --- /dev/null +++ b/app/new/Alert/Description.tsx @@ -0,0 +1,11 @@ +import { FC, ReactNode } from 'react' +import { cn } from '~/app/src/helpers/cn' + +export interface DescriptionProps { + children?: ReactNode + className?: string +} + +export const Description: FC = ({ children, className }) => { + return

    {children}

    +} diff --git a/app/new/Alert/Dismiss.tsx b/app/new/Alert/Dismiss.tsx new file mode 100644 index 00000000..e7bc9799 --- /dev/null +++ b/app/new/Alert/Dismiss.tsx @@ -0,0 +1,27 @@ +import { FC, ReactNode } from 'react' + +export interface DismissProps { + children?: ReactNode + [key: string]: any +} + +export const Dismiss: FC = ({ children, ...props }) => { + const { onClick } = props + return ( + + ) +} diff --git a/app/new/Alert/Icon.tsx b/app/new/Alert/Icon.tsx new file mode 100644 index 00000000..1b5a9857 --- /dev/null +++ b/app/new/Alert/Icon.tsx @@ -0,0 +1,54 @@ +import { FC, ReactElement, ReactNode, cloneElement } from 'react' +import { cn } from '~/app/src/helpers/cn' + +export interface IconProps { + children?: ReactNode + className?: string + [key: string]: any +} + +export const Icon: FC = ({ children, className, ...restProps }) => { + const { color } = restProps! + const iconStyles = cn(className) + if (children) { + return cloneElement(children as ReactElement, { className: iconStyles }) + } else { + if (color === 'error') { + return ( + + + + ) + } else if (color === 'success') { + return ( + + + + ) + } else { + return ( + + + + ) + } + } +} diff --git a/app/new/Alert/Link.tsx b/app/new/Alert/Link.tsx new file mode 100644 index 00000000..a78a8170 --- /dev/null +++ b/app/new/Alert/Link.tsx @@ -0,0 +1,21 @@ +import { FC, ReactNode } from 'react' +import { cn } from '~/app/src/helpers/cn' + +export interface LinkProps { + children?: ReactNode + className?: string + href?: string +} + +export const Link: FC = ({ children, className, href = '#' }) => { + return ( + + {children} + + + + + ) +} diff --git a/app/new/Alert/Title.tsx b/app/new/Alert/Title.tsx new file mode 100644 index 00000000..30d89165 --- /dev/null +++ b/app/new/Alert/Title.tsx @@ -0,0 +1,11 @@ +import { FC, ReactNode } from 'react' +import { cn } from '~/app/src/helpers/cn' + +export interface TitleProps { + children?: ReactNode + className?: string +} + +export const Title: FC = ({ children, className }) => { + return

    {children}

    +} diff --git a/app/new/Alert/index.tsx b/app/new/Alert/index.tsx new file mode 100644 index 00000000..1d5a733b --- /dev/null +++ b/app/new/Alert/index.tsx @@ -0,0 +1 @@ +export * from './Alert' diff --git a/app/new/page.tsx b/app/new/page.tsx index 41ca6934..60f2bcb7 100644 --- a/app/new/page.tsx +++ b/app/new/page.tsx @@ -1,7 +1,423 @@ -import React from 'react' +'use client' +import { CheckBox, Button, Alert } from '../src' -const page = () => { - return
    +const Page = () => { + 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 + + +
    +
    + + + + 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 + + +
    +
    + + + + + 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. + +
    + +
    + + + + +     + +     +     +
    +
    + + + + + 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. + +
    + +
    + + + + +     + +     +     +
    +
    +
    +
    + ) } -export default page +export default Page diff --git a/app/src/Keep/KeepTheme.ts b/app/src/Keep/KeepTheme.ts index 8757373a..87a868b6 100644 --- a/app/src/Keep/KeepTheme.ts +++ b/app/src/Keep/KeepTheme.ts @@ -1,5 +1,4 @@ import { keepNotificationTheme } from '../components' -import { keepAlertTheme } from '../components/Alert' import { keepAvatarTheme } from '../components/Avatar/Avatar' import { keepBadgeTheme } from '../components/Badge' import { keepBreadCrumbTheme } from '../components/Breadcrumb' @@ -138,7 +137,6 @@ export type KeepHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' export type CustomKeepTheme = DeepPartial export interface KeepTheme { - alert: keepAlertTheme avatar: keepAvatarTheme badge: keepBadgeTheme breadcrumb: keepBreadCrumbTheme diff --git a/app/src/components/Alert/Alert.stories.tsx b/app/src/components/Alert/Alert.stories.tsx deleted file mode 100644 index af729ba2..00000000 --- a/app/src/components/Alert/Alert.stories.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import { Meta, StoryObj } from '@storybook/react' -import Link from 'next/link' -import { CheckCircle, Info, WarningCircle, X, XCircle } from 'phosphor-react' -import { Alert } from '.' -import { removeFragment } from '../../helpers/mergeDeep' - -const meta: Meta = { - component: Alert, - tags: ['autodocs'], - argTypes: { - color: { - control: 'select', - options: ['primary', 'success', 'warning', 'error', 'metal'], - table: { - type: { summary: 'primary | success | warning | error | metal' }, - defaultValue: { summary: 'primary' }, - }, - description: 'What background color to use like', - }, - rounded: { description: 'Adds rounded corners to the alert.', control: { type: 'boolean' } }, - dismiss: { description: 'Enables or disables the dismiss icon.', control: { type: 'boolean' } }, - withBorder: { description: 'Adds a border around the alert.', control: { type: 'boolean' } }, - withBorderAccent: { description: 'Adds a border accent to the alert.', control: { type: 'boolean' } }, - withBorderAccentPosition: { - control: 'select', - options: ['left', 'right', 'top', 'bottom'], - description: 'What is the border accent position color to use like', - table: { - type: { summary: 'left | right | top | bottom' }, - defaultValue: { summary: 'left' }, - }, - }, - children: { - control: { disable: true }, - }, - icon: { - control: { disable: true }, - }, - onDismiss: { - control: { disable: true }, - }, - }, -} - -export default meta -type Story = StoryObj - -export const DefaultAlert: Story = { - args: { - color: 'primary', - rounded: false, - withBorder: false, - withBorderAccent: false, - withBorderAccentPosition: 'left', - dismiss: false, - icon: , - children: removeFragment( - <> - - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - - - , - ), - }, -} -export const RoundedAlert: Story = { - args: { - ...DefaultAlert.args, - rounded: true, - }, -} -export const AlertWithBorder: Story = { - args: { - ...DefaultAlert.args, - rounded: true, - withBorder: true, - }, -} -export const AlertWithAccentBorder: Story = { - args: { - ...DefaultAlert.args, - withBorderAccent: true, - }, -} -export const InfoAlert: Story = { - args: { - ...DefaultAlert.args, - }, -} -export const GrayAlert: Story = { - args: { - ...DefaultAlert.args, - color: 'metal', - icon: , - }, -} -export const ErrorAlert: Story = { - args: { - ...DefaultAlert.args, - color: 'error', - icon: , - }, -} -export const SuccessAlert: Story = { - args: { - ...DefaultAlert.args, - color: 'success', - icon: , - }, -} -export const WarningAlert: Story = { - args: { - ...DefaultAlert.args, - color: 'warning', - icon: , - }, -} -export const CustomAlert: Story = { - args: { - className: 'rounded-lg bg-slate-900', - children: removeFragment( - <> - - - - - - Default message - make it short - - Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry - - Link style - - - - - , - ), - }, -} diff --git a/app/src/components/Alert/Alert.tsx b/app/src/components/Alert/Alert.tsx index 9652e657..d41d65dd 100644 --- a/app/src/components/Alert/Alert.tsx +++ b/app/src/components/Alert/Alert.tsx @@ -1,200 +1,54 @@ -'use client' -import { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react' -import { Title } from './Title' -import { Description } from './Description' +import { Children, FC, ReactElement, ReactNode, cloneElement } from 'react' import { Container } from './Container' -import { X } from 'phosphor-react' -import { AlertContext } from './AlertContext' -import { cn } from '../../helpers/cn' -import clsx from 'clsx' +import { Description } from './Description' +import { Title } from './Title' +import { Dismiss } from './Dismiss' +import { Link } from './Link' import { Icon } from './Icon' +import { cn } from '../../helpers/cn' +import { alertTheme } from './theme' import { Body } from './Body' -import { useTheme } from '../../Keep/ThemeContext' - -export interface keepAlertTheme { - base: string - container: string - dismiss: string - rounded: string - border: string - disMissButton: { - base: string - color: { - primary: string - success: string - warning: string - error: string - metal: string - } - } - borderColor: { - primary: string - success: string - warning: string - error: string - metal: string - } - borderAccent: { - left: string - right: string - top: string - bottom: string - } - color: { - primary: string - success: string - warning: string - error: string - metal: string - } - icon: { - primary: string - success: string - warning: string - error: string - metal: string - } - title: { - base: string - color: { - primary: string - success: string - warning: string - error: string - metal: string - } - } - description: string -} -/** - * Props for the Alert component. - * @interface AlertProps - * @extends {PropsWithChildren, 'color'>>} - */ -interface AlertProps extends PropsWithChildren, 'color'>> { - /** - * The color of the alert. - * @type {'primary' | 'success' | 'warning' | 'error' | 'metal'} - * @default 'primary' - */ - color?: 'primary' | 'success' | 'warning' | 'error' | 'metal' - /** - * The icon to be displayed in the alert. - * @type {ReactNode} - */ - icon?: ReactNode - /** - * Determines whether the alert can be dismissed. - * If set to `true`, a default dismiss button will be applied. - * @type {boolean} - * @default false - */ - dismiss?: boolean - /** - * The callback function to be called when the alert is dismissed. - * @type {boolean | (() => void)} - */ - onDismiss?: boolean | (() => void) - /** - * Determines whether the alert has rounded corners. - * @type {boolean} - * @default false - */ - rounded?: boolean - /** - * Determines whether the alert has a border. - * @type {boolean} - * @default false - */ - withBorder?: boolean - /** - * Determines whether the alert has an accent border. - * @type {boolean} - * @default false - */ - withBorderAccent?: boolean - /** - * The position of the accent border. - * @type {'left' | 'right' | 'top' | 'bottom'} - * @default 'left' - */ - withBorderAccentPosition?: 'left' | 'right' | 'top' | 'bottom' - /** - * The content of the alert. - * @type {ReactNode} - * @default '' - */ +interface AlertProps { children?: ReactNode - /** - * Additional CSS class name for the alert. - * @type {string} - * @default '' - */ + color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' className?: string - /** - * Additional CSS style for the alert button. - * @type {string} - * @default '' - */ - BtnStyle?: string - /** - * Additional props for the alert component. - * @type {any} - * @default '' - */ + withBg?: boolean + dismiss?: boolean [key: string]: any } -const AlertComponent: FC = ({ - children, - color = 'primary', - withBorder = false, - withBorderAccent = false, - withBorderAccentPosition = 'left', - className, - BtnStyle, - rounded, - icon, - dismiss, - onDismiss, - ...restProps -}) => { - const theme = useTheme().theme.alert - let alertClasses = clsx( - theme.base, - theme.color[color], - withBorder && theme.border, - withBorder && theme.borderColor[color], - withBorderAccent && theme.borderAccent[withBorderAccentPosition], - withBorderAccent && theme.borderColor[color], - rounded && theme.rounded, - dismiss && theme.dismiss, +export const AlertComponent: FC = ({ children, color = 'primary', withBg, dismiss, className }) => { + const childrenWithProps = Children.map(children, (child) => + cloneElement(child as ReactElement, { color: color }), ) - let btnClasses = clsx(theme.disMissButton.base, theme.disMissButton.color[color]) - return ( -
    - {onDismiss && typeof onDismiss === 'function' && ( - - )} - {children} +
    + {childrenWithProps}
    ) } -Title.displayName = 'Alert.Title' -Description.displayName = 'Alert.Description' Container.displayName = 'Alert.Container' +Description.displayName = 'Alert.Description' +Title.displayName = 'Alert.Title' +Dismiss.displayName = 'Alert.Dismiss' +Link.displayName = 'Alert.Link' Icon.displayName = 'Alert.Icon' Body.displayName = 'Alert.Body' export const Alert = Object.assign(AlertComponent, { - Title: Title, - Description: Description, - Container: Container, - Icon: Icon, - Body: Body, + Container, + Description, + Title, + Dismiss, + Link, + Icon, + Body, }) diff --git a/app/src/components/Alert/AlertContext.tsx b/app/src/components/Alert/AlertContext.tsx deleted file mode 100644 index 2723f5f3..00000000 --- a/app/src/components/Alert/AlertContext.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { createContext, useContext } from 'react' - -type AlertPropsContext = { - color?: 'primary' | 'success' | 'warning' | 'error' | 'metal' -} - -export const AlertContext = createContext(undefined) - -export function useAlertContext(): AlertPropsContext { - const context = useContext(AlertContext) - - if (!context) { - throw new Error('useAlertContext should be used within the AlertContext provider!') - } - - return context -} diff --git a/app/src/components/Alert/Body.tsx b/app/src/components/Alert/Body.tsx index de778af6..40a35e5f 100644 --- a/app/src/components/Alert/Body.tsx +++ b/app/src/components/Alert/Body.tsx @@ -1,12 +1,12 @@ -'use client' -import { FC, ReactNode } from 'react' +import { ReactNode, FC, Children, cloneElement, ReactElement } from 'react' import { cn } from '../../helpers/cn' -export interface BodyProps { - className?: string +export interface AlertBodyProps { children?: ReactNode + className?: string } -export const Body: FC = ({ children, className }) => { - return
    {children}
    +export const Body: FC = ({ children, className, ...props }) => { + const childrenWithProps = Children.map(children, (child) => cloneElement(child as ReactElement, { ...props })) + return
    {childrenWithProps}
    } diff --git a/app/src/components/Alert/Container.tsx b/app/src/components/Alert/Container.tsx index 25b76dcc..60d1c21f 100644 --- a/app/src/components/Alert/Container.tsx +++ b/app/src/components/Alert/Container.tsx @@ -1,14 +1,13 @@ -'use client' -import { FC, ReactNode } from 'react' -import { useTheme } from '../../Keep/ThemeContext' +import { ReactNode, FC, Children, cloneElement, ReactElement } from 'react' import { cn } from '../../helpers/cn' +import { alertTheme } from './theme' export interface ContainerProps { - className?: string children?: ReactNode + className?: string } -export const Container: FC = ({ children, className }) => { - const { container } = useTheme().theme.alert - return
    {children}
    +export const Container: FC = ({ children, className, ...props }) => { + const childrenWithProps = Children.map(children, (child) => cloneElement(child as ReactElement, { ...props })) + return
    {childrenWithProps}
    } diff --git a/app/src/components/Alert/Description.tsx b/app/src/components/Alert/Description.tsx index 955cfb53..e3be7912 100644 --- a/app/src/components/Alert/Description.tsx +++ b/app/src/components/Alert/Description.tsx @@ -1,14 +1,12 @@ -'use client' import { FC, ReactNode } from 'react' import { cn } from '../../helpers/cn' -import { useTheme } from '../../Keep/ThemeContext' +import { alertTheme } from './theme' export interface DescriptionProps { - className?: string children?: ReactNode + className?: string } export const Description: FC = ({ children, className }) => { - const { description } = useTheme().theme.alert - return

    {children}

    + return

    {children}

    } diff --git a/app/src/components/Alert/Dismiss.tsx b/app/src/components/Alert/Dismiss.tsx new file mode 100644 index 00000000..ed965146 --- /dev/null +++ b/app/src/components/Alert/Dismiss.tsx @@ -0,0 +1,27 @@ +import { FC, ReactNode } from 'react' + +export interface DismissProps { + children?: ReactNode + onClick?: () => void + [key: string]: any +} + +export const Dismiss: FC = ({ children, onClick }) => { + return ( + + ) +} diff --git a/app/src/components/Alert/Icon.tsx b/app/src/components/Alert/Icon.tsx index a54b8de7..883a7c13 100644 --- a/app/src/components/Alert/Icon.tsx +++ b/app/src/components/Alert/Icon.tsx @@ -1,16 +1,54 @@ -'use client' -import { FC, ReactNode } from 'react' +import { FC, ReactElement, ReactNode, cloneElement } from 'react' import { cn } from '../../helpers/cn' -import { useTheme } from '../../Keep/ThemeContext' -import { useAlertContext } from './AlertContext' export interface IconProps { - className?: string children?: ReactNode + className?: string + [key: string]: any } -export const Icon: FC = ({ children, className }) => { - const { icon } = useTheme().theme.alert - const { color = 'primary' } = useAlertContext() - return
    {children}
    +export const Icon: FC = ({ children, className, ...restProps }) => { + const { color } = restProps! + const iconStyles = cn(className) + if (children) { + return cloneElement(children as ReactElement, { className: iconStyles }) + } else { + if (color === 'error') { + return ( + + + + ) + } else if (color === 'success') { + return ( + + + + ) + } else { + return ( + + + + ) + } + } } diff --git a/app/src/components/Alert/Link.tsx b/app/src/components/Alert/Link.tsx new file mode 100644 index 00000000..6dd94d97 --- /dev/null +++ b/app/src/components/Alert/Link.tsx @@ -0,0 +1,20 @@ +import { FC, ReactNode } from 'react' +import { cn } from '../../helpers/cn' +import { alertTheme } from './theme' + +export interface LinkProps { + children?: ReactNode + className?: string + href?: string +} + +export const Link: FC = ({ children, className, href = '#' }) => { + return ( + + {children} + + + + + ) +} diff --git a/app/src/components/Alert/Title.tsx b/app/src/components/Alert/Title.tsx index b5592ca4..19ed39d5 100644 --- a/app/src/components/Alert/Title.tsx +++ b/app/src/components/Alert/Title.tsx @@ -1,18 +1,12 @@ -'use client' -import clsx from 'clsx' import { FC, ReactNode } from 'react' -import { useAlertContext } from './AlertContext' import { cn } from '../../helpers/cn' -import { useTheme } from '../../Keep/ThemeContext' +import { alertTheme } from './theme' export interface TitleProps { - className?: string children?: ReactNode + className?: string } -export const Title: FC = ({ className, children }) => { - const { color } = useAlertContext() - let { title } = useTheme().theme.alert - let titleClasses = clsx(title.base, title.color[color ? color : 'primary']) - return

    {children}

    +export const Title: FC = ({ children, className }) => { + return

    {children}

    } diff --git a/app/src/components/Alert/theme.ts b/app/src/components/Alert/theme.ts index 7796a28f..276d8579 100644 --- a/app/src/components/Alert/theme.ts +++ b/app/src/components/Alert/theme.ts @@ -1,57 +1,63 @@ -import { keepAlertTheme } from './Alert' +interface keepAlertTheme { + colorWithBg: { + primary: string + secondary: string + success: string + warning: string + error: string + } + colorWithOutBg: { + primary: string + secondary: string + success: string + warning: string + error: string + } + root: { + base: string + } + container: { + base: string + } + description: { + base: string + } + link: { + base: string + } + title: { + base: string + } +} export const alertTheme: keepAlertTheme = { - base: 'relative max-w-lg py-[18px] pl-5 pr-6', - dismiss: 'hidden', - container: 'flex gap-[14px]', - color: { - primary: 'bg-primary-50', - success: 'bg-success-50', - warning: 'bg-warning-50', - error: 'bg-error-50', - metal: 'bg-metal-50', + colorWithBg: { + primary: 'text-primary-500 bg-primary-50 border border-primary-200', + secondary: 'text-metal-900 bg-metal-50 border border-metal-200', + success: 'text-success-500 bg-success-25 border border-success-200', + warning: 'text-warning-500 bg-warning-25 border border-warning-200', + error: 'text-error-500 bg-error-25 border border-error-100', + }, + colorWithOutBg: { + primary: 'bg-white text-primary-500 border border-primary-200', + secondary: 'bg-white text-metal-900 border border-metal-200', + success: 'bg-white text-success-500 border border-success-200', + warning: 'bg-white text-warning-500 border border-warning-200', + error: 'bg-white text-error-500 border border-error-100', }, - rounded: 'rounded-md', - border: 'border', - borderColor: { - primary: 'border-primary-100', - success: 'border-success-100', - warning: 'border-warning-100', - error: 'border-error-100', - metal: 'border-metal-200', + root: { + base: 'w-full justify-between gap-2 rounded-xl p-4 shadow-large md:max-w-xl', }, - icon: { - primary: 'text-primary-600', - success: 'text-success-600', - warning: 'text-warning-600', - error: 'text-error-600', - metal: 'text-metal-500', + container: { + base: 'flex flex-1 items-center gap-3', }, - disMissButton: { - base: 'absolute right-4 top-4 p-1 rounded-lg', - color: { - primary: 'text-primary-600 hover:bg-primary-200 focus:ring-2 focus:ring-primary-300', - success: 'text-success-600 hover:bg-success-200 focus:ring-2 focus:ring-success-300', - warning: 'text-warning-600 hover:bg-warning-200 focus:ring-2 focus:ring-warning-300', - error: 'text-error-600 hover:bg-error-200 focus:ring-2 focus:ring-error-300', - metal: 'text-metal-600 hover:bg-metal-200 focus:ring-2 focus:ring-metal-300', - }, + description: { + base: 'hidden w-[234px] text-body-3 font-normal sm:line-clamp-1', }, - borderAccent: { - left: 'border-l-[6px]', - right: 'border-r-[6px]', - top: 'border-t-[6px]', - bottom: 'border-b-[6px]', + link: { + base: 'flex items-center gap-1 text-body-4 font-medium underline underline-offset-2', }, title: { - base: 'mb-3 text-body-3 font-semibold', - color: { - primary: 'text-primary-600', - success: 'text-success-600', - warning: 'text-warning-600', - error: 'text-error-600', - metal: 'text-metal-600', - }, + base: 'text-body-3 font-semibold', }, - description: 'text-body-4 font-normal text-metal-500', } diff --git a/app/src/theme/theme.ts b/app/src/theme/theme.ts index e3065921..fc313598 100644 --- a/app/src/theme/theme.ts +++ b/app/src/theme/theme.ts @@ -1,4 +1,3 @@ -import { alertTheme } from '../components/Alert/theme' import { avatarTheme } from '../components/Avatar/theme' import { badgeTheme } from '../components/Badge/theme' import { breadcrumbTheme } from '../components/Breadcrumb/theme' @@ -32,7 +31,6 @@ import { treeTheme } from '../components/Tree/theme' import { uploadTheme } from '../components/Upload/theme' export const theme = { - alert: alertTheme, avatar: avatarTheme, button: buttonTheme, badge: badgeTheme, From 9f114a12910522486c6339ff22b833f97217d7c9 Mon Sep 17 00:00:00 2001 From: Arifulislam5577 Date: Wed, 17 Jan 2024 12:57:45 +0600 Subject: [PATCH 08/70] Start Updating avatar component. --- app/new/Alert/Alert.tsx | 75 ------ app/new/Alert/Container.tsx | 12 - app/new/Alert/Description.tsx | 11 - app/new/Alert/Dismiss.tsx | 27 --- app/new/Alert/Icon.tsx | 54 ----- app/new/Alert/Link.tsx | 21 -- app/new/Alert/Title.tsx | 11 - app/new/Alert/index.tsx | 1 - app/new/Avatar/Avatar.tsx | 28 +++ app/new/Avatar/Group.tsx | 0 app/new/Avatar/index.tsx | 1 + app/new/page.tsx | 420 +--------------------------------- app/page.tsx | 52 +---- 13 files changed, 43 insertions(+), 670 deletions(-) delete mode 100644 app/new/Alert/Alert.tsx delete mode 100644 app/new/Alert/Container.tsx delete mode 100644 app/new/Alert/Description.tsx delete mode 100644 app/new/Alert/Dismiss.tsx delete mode 100644 app/new/Alert/Icon.tsx delete mode 100644 app/new/Alert/Link.tsx delete mode 100644 app/new/Alert/Title.tsx delete mode 100644 app/new/Alert/index.tsx create mode 100644 app/new/Avatar/Avatar.tsx create mode 100644 app/new/Avatar/Group.tsx create mode 100644 app/new/Avatar/index.tsx diff --git a/app/new/Alert/Alert.tsx b/app/new/Alert/Alert.tsx deleted file mode 100644 index 98be8c92..00000000 --- a/app/new/Alert/Alert.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { Children, FC, ReactElement, ReactNode, cloneElement } from 'react' -import { Container } from './Container' -import { Description } from './Description' -import { Title } from './Title' -import { Dismiss } from './Dismiss' -import { Link } from './Link' -import { Icon } from './Icon' -import { cn } from '~/app/src/helpers/cn' - -interface AlertProps { - children?: ReactNode - color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' - className?: string - withBg?: boolean - onClick?: boolean | (() => void) - dismiss?: boolean - [key: string]: any -} - -const alertTheme = { - colorWithBg: { - primary: 'text-primary-500 bg-primary-50 border border-primary-200', - secondary: 'text-metal-900 bg-metal-50 border border-metal-200', - success: 'text-success-500 bg-success-25 border border-success-200', - warning: 'text-warning-500 bg-warning-25 border border-warning-200', - error: 'text-error-500 bg-error-25 border border-error-100', - }, - colorWithOutBg: { - primary: 'bg-white text-primary-500 border border-primary-200', - secondary: 'bg-white text-metal-900 border border-metal-200', - success: 'bg-white text-success-500 border border-success-200', - warning: 'bg-white text-warning-500 border border-warning-200', - error: 'bg-white text-error-500 border border-error-100', - }, -} - -export const AlertComponent: FC = ({ - children, - color = 'primary', - withBg, - onClick, - dismiss, - className, -}) => { - const childrenWithProps = Children.map(children, (child) => - cloneElement(child as ReactElement, { color: color, onClick: onClick }), - ) - return ( -
    - {childrenWithProps} -
    - ) -} - -Container.displayName = 'Alert.Container' -Description.displayName = 'Alert.Description' -Title.displayName = 'Alert.Title' -Dismiss.displayName = 'Alert.Dismiss' -Link.displayName = 'Alert.Link' -Icon.displayName = 'Alert.Icon' - -export const Alert = Object.assign(AlertComponent, { - Container, - Description, - Title, - Dismiss, - Link, - Icon, -}) diff --git a/app/new/Alert/Container.tsx b/app/new/Alert/Container.tsx deleted file mode 100644 index c7ed5223..00000000 --- a/app/new/Alert/Container.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ReactNode, FC, Children, cloneElement, ReactElement } from 'react' -import { cn } from '~/app/src/helpers/cn' - -export interface ContainerProps { - children?: ReactNode - className?: string -} - -export const Container: FC = ({ children, className, ...props }) => { - const childrenWithProps = Children.map(children, (child) => cloneElement(child as ReactElement, { ...props })) - return
    {childrenWithProps}
    -} diff --git a/app/new/Alert/Description.tsx b/app/new/Alert/Description.tsx deleted file mode 100644 index 2c23171e..00000000 --- a/app/new/Alert/Description.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { FC, ReactNode } from 'react' -import { cn } from '~/app/src/helpers/cn' - -export interface DescriptionProps { - children?: ReactNode - className?: string -} - -export const Description: FC = ({ children, className }) => { - return

    {children}

    -} diff --git a/app/new/Alert/Dismiss.tsx b/app/new/Alert/Dismiss.tsx deleted file mode 100644 index e7bc9799..00000000 --- a/app/new/Alert/Dismiss.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { FC, ReactNode } from 'react' - -export interface DismissProps { - children?: ReactNode - [key: string]: any -} - -export const Dismiss: FC = ({ children, ...props }) => { - const { onClick } = props - return ( - - ) -} diff --git a/app/new/Alert/Icon.tsx b/app/new/Alert/Icon.tsx deleted file mode 100644 index 1b5a9857..00000000 --- a/app/new/Alert/Icon.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { FC, ReactElement, ReactNode, cloneElement } from 'react' -import { cn } from '~/app/src/helpers/cn' - -export interface IconProps { - children?: ReactNode - className?: string - [key: string]: any -} - -export const Icon: FC = ({ children, className, ...restProps }) => { - const { color } = restProps! - const iconStyles = cn(className) - if (children) { - return cloneElement(children as ReactElement, { className: iconStyles }) - } else { - if (color === 'error') { - return ( - - - - ) - } else if (color === 'success') { - return ( - - - - ) - } else { - return ( - - - - ) - } - } -} diff --git a/app/new/Alert/Link.tsx b/app/new/Alert/Link.tsx deleted file mode 100644 index a78a8170..00000000 --- a/app/new/Alert/Link.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { FC, ReactNode } from 'react' -import { cn } from '~/app/src/helpers/cn' - -export interface LinkProps { - children?: ReactNode - className?: string - href?: string -} - -export const Link: FC = ({ children, className, href = '#' }) => { - return ( - - {children} - - - - - ) -} diff --git a/app/new/Alert/Title.tsx b/app/new/Alert/Title.tsx deleted file mode 100644 index 30d89165..00000000 --- a/app/new/Alert/Title.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { FC, ReactNode } from 'react' -import { cn } from '~/app/src/helpers/cn' - -export interface TitleProps { - children?: ReactNode - className?: string -} - -export const Title: FC = ({ children, className }) => { - return

    {children}

    -} diff --git a/app/new/Alert/index.tsx b/app/new/Alert/index.tsx deleted file mode 100644 index 1d5a733b..00000000 --- a/app/new/Alert/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './Alert' diff --git a/app/new/Avatar/Avatar.tsx b/app/new/Avatar/Avatar.tsx new file mode 100644 index 00000000..2ad0b06d --- /dev/null +++ b/app/new/Avatar/Avatar.tsx @@ -0,0 +1,28 @@ +import { FC } from 'react' +import { cn } from '~/app/src/helpers/cn' + +interface AvatarProps { + imgUrl?: string + alt?: string + size?: 'xs' | 'sm' | 'md' | 'lg' + shape?: 'circle' | 'rounded' + verified?: boolean +} + +const avatarTheme = { + size: { + xs: 'h-6 w-6', + sm: 'h-8 w-8', + md: 'h-10 w-10', + lg: 'h-14 w-14', + }, + shape: { + circle: 'rounded-full', + rounded: 'rounded-md', + }, +} + +export const Avatar: FC = ({ imgUrl, alt, size = 'md' }) => { + console.log(size) + return {alt} +} diff --git a/app/new/Avatar/Group.tsx b/app/new/Avatar/Group.tsx new file mode 100644 index 00000000..e69de29b diff --git a/app/new/Avatar/index.tsx b/app/new/Avatar/index.tsx new file mode 100644 index 00000000..227ecdba --- /dev/null +++ b/app/new/Avatar/index.tsx @@ -0,0 +1 @@ +export * from './Avatar' diff --git a/app/new/page.tsx b/app/new/page.tsx index 60f2bcb7..93b2009c 100644 --- a/app/new/page.tsx +++ b/app/new/page.tsx @@ -1,420 +1,10 @@ -'use client' -import { CheckBox, Button, Alert } from '../src' - const Page = () => { 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 - - -
    -
    - - - - 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 - - -
    -
    - - - - - 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. - -
    - -
    - - - - -     - -     -     -
    -
    - - - - - 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. - -
    - -
    - - - - -     - -     -     -
    -
    +
    +
    +

    Badge component

    + +
    ) diff --git a/app/page.tsx b/app/page.tsx index ad5e9cb7..b3feb4a5 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,6 +1,6 @@ 'use client' import Link from 'next/link' -import { ArrowUpRight, Check, Clipboard, Plus } from 'phosphor-react' +import { ArrowUpRight, Check, Clipboard } from 'phosphor-react' import Image from 'next/image' import { useEffect, useState } from 'react' import useCopy from '../hooks/useCopy' @@ -153,37 +153,37 @@ const FAQ = () => { const faqs = [ { id: 1, - question: 'What is Keep React?', + question: 'Q. What is Keep React?', answer: 'Keep React is an open-source component library built on React and Tailwind CSS. It offers a collection of pre-designed UI components and styles that you can easily integrate into your web applications.', }, { id: 2, - question: 'How can I use Keep React components?', + question: 'Q. How can I use Keep React components?', answer: 'To use Keep React components, you can install the library via npm or yarn, import the components you need in your React application, and start using them in your code.', }, { id: 3, - question: 'Is Keep React compatible with other React projects?', + question: 'Q. Is Keep React compatible with other React projects?', answer: 'Yes, Keep React is designed to be compatible with other React projects. You can seamlessly integrate its components into your existing React applications.', }, { id: 4, - question: 'What makes Keep React different from other component libraries?', + question: 'Q. What makes Keep React different from other component libraries?', answer: 'Keep React combines the power of React with the flexibility and utility of Tailwind CSS. It provides a wide range of customizable components to help you build beautiful, responsive, and functional user interfaces.', }, { id: 5, - question: 'Can I customize the styling of Keep React components?', + question: 'Q. Can I customize the styling of Keep React components?', answer: "Yes, Keep React components are highly customizable. You can use Tailwind CSS utility classes or even create your own styles to tailor the appearance of the components to your project's needs.", }, { id: 6, - question: 'Is Keep React suitable for both small and large-scale applications?', + question: 'Q. Is Keep React suitable for both small and large-scale applications?', answer: 'Absolutely! Keep React is designed to be versatile, making it suitable for a wide range of projects, from small personal websites to large-scale applications. Its components and styles are designed to scale to your needs.', }, @@ -197,53 +197,19 @@ const FAQ = () => {
    -
    +
    {faqs.map((faq) => ( {faq.question} - - - + {faq.answer} ))}
    -
    -
    - - {faqs.slice(0, 3).map((faq) => ( - - - {faq.question} - - - - - {faq.answer} - - ))} - -
    -
    - - {faqs.slice(3, 6).map((faq) => ( - - - {faq.question} - - - - - {faq.answer} - - ))} - -
    -
    ) } From 3a27eb1c57d06aa4ccbadc4ffdc6c0ab52c961c2 Mon Sep 17 00:00:00 2001 From: Arifulislam5577 Date: Fri, 19 Jan 2024 19:12:34 +0600 Subject: [PATCH 09/70] Updated: Breadcrumb component updated. --- app/docs/components/breadcrumb/breadcrumb.mdx | 43 ++--- .../components/breadcrumb/breadcrumbApi.ts | 53 +++--- .../variant/BreadcrumbDividerIcon.tsx | 48 +++++ .../variant/BreadcrumbWithBorder.tsx | 101 +++-------- .../variant/BreadcrumbWithNumber.tsx | 112 ------------ .../variant/BreadcrumbWithPageIcon.tsx | 106 ----------- .../variant/BreadcrumbWithSeparatorIcon.tsx | 106 ----------- .../variant/CustomizeBreadcrumb.tsx | 37 ++++ .../breadcrumb/variant/DefaultBreadcrumb.tsx | 86 +++------ app/new/Breadcrumb/Breadcrumb.tsx | 67 +++++++ app/new/Breadcrumb/Item.tsx | 33 ++++ app/new/Breadcrumb/index.tsx | 1 + app/new/page.tsx | 21 ++- app/src/Keep/KeepTheme.ts | 2 - .../Breadcrumb/Breadcrumb.stories.tsx | 167 ------------------ app/src/components/Breadcrumb/Breadcrumb.tsx | 101 +++-------- .../Breadcrumb/BreadcrumbContext.tsx | 31 ---- .../components/Breadcrumb/BreadcrumbItem.tsx | 79 --------- app/src/components/Breadcrumb/Item.tsx | 33 ++++ app/src/components/Breadcrumb/theme.ts | 57 ++++-- app/src/theme/theme.ts | 2 - 21 files changed, 393 insertions(+), 893 deletions(-) create mode 100644 app/docs/components/breadcrumb/variant/BreadcrumbDividerIcon.tsx delete mode 100644 app/docs/components/breadcrumb/variant/BreadcrumbWithNumber.tsx delete mode 100644 app/docs/components/breadcrumb/variant/BreadcrumbWithPageIcon.tsx delete mode 100644 app/docs/components/breadcrumb/variant/BreadcrumbWithSeparatorIcon.tsx create mode 100644 app/docs/components/breadcrumb/variant/CustomizeBreadcrumb.tsx create mode 100644 app/new/Breadcrumb/Breadcrumb.tsx create mode 100644 app/new/Breadcrumb/Item.tsx create mode 100644 app/new/Breadcrumb/index.tsx delete mode 100644 app/src/components/Breadcrumb/Breadcrumb.stories.tsx delete mode 100644 app/src/components/Breadcrumb/BreadcrumbContext.tsx delete mode 100644 app/src/components/Breadcrumb/BreadcrumbItem.tsx create mode 100644 app/src/components/Breadcrumb/Item.tsx diff --git a/app/docs/components/breadcrumb/breadcrumb.mdx b/app/docs/components/breadcrumb/breadcrumb.mdx index 1f642dde..3867a44a 100644 --- a/app/docs/components/breadcrumb/breadcrumb.mdx +++ b/app/docs/components/breadcrumb/breadcrumb.mdx @@ -1,13 +1,12 @@ 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 { breadcrumbApiData, breadcrumbItemApiData } from './breadcrumbApi' +import { BreadcrumbDividerIcon, BreadcrumbDividerIconCode } from './variant/BreadcrumbDividerIcon' -import CodePreview from "../../../components/CodePreview" -import CssThemePreview from "../../../components/CssThemePreview" -import ComponentApi from "../../../components/ComponentApi" +import { breadcrumbApiData, breadcrumbItemApiData } from './breadcrumbApi' +import CodePreview from '../../../components/CodePreview' +import CssThemePreview from '../../../components/CssThemePreview' +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents @@ -21,36 +20,28 @@ The default Breadcrumbs component provides a simple and intuitive way for users -## 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 with the `borderType` prop with two value that will be `"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 with the `dividerIconStyle` prop with two value that will be `"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 breadcrumb component using className props. And also we have more api for customizable options. - - + + ## Breadcrumb API Reference @@ -59,7 +50,7 @@ Explore the available props for the `` component -## Breadcrumb Item API Reference +## Item API Reference 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..57cd99ac --- /dev/null +++ b/app/docs/components/breadcrumb/variant/BreadcrumbDividerIcon.tsx @@ -0,0 +1,48 @@ +'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 = ` +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..6c34f0fb 100644 --- a/app/docs/components/breadcrumb/variant/BreadcrumbWithBorder.tsx +++ b/app/docs/components/breadcrumb/variant/BreadcrumbWithBorder.tsx @@ -1,93 +1,46 @@ -'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"; 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..9a0540fa 100644 --- a/app/docs/components/breadcrumb/variant/DefaultBreadcrumb.tsx +++ b/app/docs/components/breadcrumb/variant/DefaultBreadcrumb.tsx @@ -1,81 +1,35 @@ -'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"; +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/new/Breadcrumb/Breadcrumb.tsx b/app/new/Breadcrumb/Breadcrumb.tsx new file mode 100644 index 00000000..0d8c787a --- /dev/null +++ b/app/new/Breadcrumb/Breadcrumb.tsx @@ -0,0 +1,67 @@ +import { ReactNode, FC, Children, ReactElement, cloneElement } from 'react' +import { cn } from '~/app/src/helpers/cn' +import { Item } from './Item' + +interface BreadcrumbProps { + children?: ReactNode + className?: string + borderType?: 'border-xy' | 'border-y' + dividerIcon?: ReactNode + dividerIconStyle?: 'slash' | 'caret' + icon?: ReactNode +} + +export const breadcrumbTheme = { + root: { + base: 'flex max-w-[407px] items-center gap-2 px-3 py-2', + }, + borderType: { + 'border-xy': 'rounded-xl border border-metal-100', + 'border-y': 'border-y border-metal-100', + }, + + item: { + base: 'flex items-center gap-1', + icon: { + slash: 'flex h-4 w-4 items-center justify-center text-xl text-metal-600', + caret: 'flex h-4 w-4 items-center justify-center text-metal-600', + }, + text: { + base: 'rounded-md px-[6px] py-1 text-body-5 font-medium transition-all duration-150 hover:text-primary-500', + activeType: { + base: 'bg-primary-25 text-primary-500', + border: 'border border-primary-500 text-primary-500', + }, + }, + }, +} + +export const BreadcrumbComponent: FC = ({ + children, + className, + borderType, + dividerIconStyle, + dividerIcon, + icon, +}) => { + const childrenWithProps = Children.map(children, (child) => + cloneElement(child as ReactElement, { dividerIconStyle: dividerIconStyle, dividerIcon: dividerIcon }), + ) + return ( +
    + {icon ? ( + icon + ) : ( + + + + )} + {childrenWithProps} +
    + ) +} + +Item.displayName = 'Breadcrumb.Item' +export const Breadcrumb = Object.assign(BreadcrumbComponent, { + Item, +}) diff --git a/app/new/Breadcrumb/Item.tsx b/app/new/Breadcrumb/Item.tsx new file mode 100644 index 00000000..95695312 --- /dev/null +++ b/app/new/Breadcrumb/Item.tsx @@ -0,0 +1,33 @@ +import { FC, ReactNode } from 'react' +import { cn } from '~/app/src/helpers/cn' +import { breadcrumbTheme } from './Breadcrumb' + +export interface ItemsProps { + className?: string + children?: ReactNode + activeType?: 'base' | 'border' + href?: string + [keyof: string]: any +} +export const Item: FC = ({ className, children, activeType, href = '#', ...props }) => { + const { dividerIconStyle, dividerIcon } = props + const { base, icon, text } = breadcrumbTheme.item + return ( +
    + {dividerIcon && dividerIcon} + + {!dividerIcon && dividerIconStyle === 'slash' ? ( +
    /
    + ) : ( +
    + + + +
    + )} + + {children} + +
    + ) +} diff --git a/app/new/Breadcrumb/index.tsx b/app/new/Breadcrumb/index.tsx new file mode 100644 index 00000000..e01e180c --- /dev/null +++ b/app/new/Breadcrumb/index.tsx @@ -0,0 +1 @@ +export * from './Breadcrumb' diff --git a/app/new/page.tsx b/app/new/page.tsx index 93b2009c..9eb5b274 100644 --- a/app/new/page.tsx +++ b/app/new/page.tsx @@ -1,10 +1,23 @@ +import { Breadcrumb } from './Breadcrumb/Breadcrumb' + const Page = () => { return ( -
    -
    -

    Badge component

    +
    +
    +

    Breadcrumb component

    + + + Overview + Pools + Tokens + Color + -
    + + Overview + Pools + Color +
    ) diff --git a/app/src/Keep/KeepTheme.ts b/app/src/Keep/KeepTheme.ts index 87a868b6..91da6171 100644 --- a/app/src/Keep/KeepTheme.ts +++ b/app/src/Keep/KeepTheme.ts @@ -1,7 +1,6 @@ import { keepNotificationTheme } from '../components' import { keepAvatarTheme } from '../components/Avatar/Avatar' import { keepBadgeTheme } from '../components/Badge' -import { keepBreadCrumbTheme } from '../components/Breadcrumb' import { KeepCardTheme } from '../components/Card' import { KeepCarouselTheme } from '../components/Carousel' import { keepCheckboxTheme } from '../components/CheckBox' @@ -139,7 +138,6 @@ export type CustomKeepTheme = DeepPartial export interface KeepTheme { avatar: keepAvatarTheme badge: keepBadgeTheme - breadcrumb: keepBreadCrumbTheme card: KeepCardTheme carousel: KeepCarouselTheme dropdown: keepDropdownTheme diff --git a/app/src/components/Breadcrumb/Breadcrumb.stories.tsx b/app/src/components/Breadcrumb/Breadcrumb.stories.tsx deleted file mode 100644 index ae806f8a..00000000 --- a/app/src/components/Breadcrumb/Breadcrumb.stories.tsx +++ /dev/null @@ -1,167 +0,0 @@ -import { Breadcrumb } from '.' -import type { Meta, StoryObj } from '@storybook/react' -import { removeFragment } from '../../helpers/mergeDeep' -import { CaretLeft, CaretRight, House } from 'phosphor-react' - -const meta: Meta = { - component: Breadcrumb, - tags: ['autodocs'], - argTypes: { - separatorIcon: { - control: { - disable: true, - }, - description: 'It will separate breadcrumb with an icon', - }, - children: { - control: { - disable: true, - }, - description: 'It is breadcrumb item itself', - }, - breadCrumbWithBorder: { - description: 'Breadcrumb border show or not?', - control: { - type: 'boolean', - }, - }, - }, -} - -export default meta -type Story = StoryObj - -export const DefaultBreadcrumb: Story = { - args: { - children: removeFragment( - <> - Products - Category - ..... - - Product - - , - ), - separatorIcon: , - }, -} - -export const BreadcrumbWithBorder: Story = { - args: { - ...DefaultBreadcrumb.args, - breadCrumbWithBorder: true, - }, -} - -export const BreadcrumbWithItemBase: Story = { - args: { - children: removeFragment( - <> - }> - Products - Category - ..... - - Product - - - , - ), - separatorIcon: , - }, -} - -export const BreadcrumbWithItemBar: Story = { - args: { - children: removeFragment( - <> - }> - Products - Category - ..... - - Product - - - , - ), - separatorIcon: , - }, -} - -export const BreadcrumbWithItemBorder: Story = { - args: { - children: removeFragment( - <> - }> - Products - Category - ..... - - Product - - - , - ), - separatorIcon: , - }, -} - -export const BreadcrumbWithPageIcon: Story = { - args: { - children: removeFragment( - <> - }> - }> - Products - - Category - ..... - - Product - - - , - ), - }, -} - -export const BreadcrumbWithCustomSeparetorIcon: Story = { - args: { - children: removeFragment( - <> - }> - }> - Products - - Category - ..... - - Product - - - , - ), - }, -} - -export const BreadcrumbWithNumberItems: Story = { - args: { - breadCrumbWithBorder: true, - separatorIcon: , - children: removeFragment( - <> - }> - 01 - - 02 - 03 - ...... - - 08 - - , - ), - }, -} diff --git a/app/src/components/Breadcrumb/Breadcrumb.tsx b/app/src/components/Breadcrumb/Breadcrumb.tsx index fd793709..469c2ec4 100644 --- a/app/src/components/Breadcrumb/Breadcrumb.tsx +++ b/app/src/components/Breadcrumb/Breadcrumb.tsx @@ -1,86 +1,43 @@ -import { BreadcrumbItem } from './BreadcrumbItem' -import { useTheme } from '../../Keep/ThemeContext' -import { BreadcrumbContext } from './BreadcrumbContext' -import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react' +import { ReactNode, FC, Children, ReactElement, cloneElement } from 'react' +import { Item } from './Item' import { cn } from '../../helpers/cn' +import { breadcrumbTheme } from './theme' -export interface keepBreadCrumbTheme { - breadCrumbWithBorder: string - item: { - base: string - chevron: string - href: { - off: string - on: string - } - icon: string - iconWrapper: string - disabled: string - activeItem: { - base: string - border: string - bar: string - } - } - list: string -} - -/** - * Props for the Breadcrumb component. - * @interface BreadcrumbProps - * @extends {PropsWithChildren>} - */ -export interface BreadcrumbProps extends PropsWithChildren> { - /** - * The separator icon to be displayed between breadcrumb items. - * @type {ReactNode} - */ - separatorIcon?: ReactNode - - /** - * Determines whether the breadcrumb should have a border. - * @type {boolean} - * @default false - */ - breadCrumbWithBorder?: boolean - - /** - * Additional CSS class name for the breadcrumb component. - * @type {string} - * @default '' - */ +interface BreadcrumbProps { + children?: ReactNode className?: string - - /** - * The style for the breadcrumb list. - * @type {string} - * @default '' - */ - listStyle?: string + borderType?: 'border-xy' | 'border-y' + dividerIcon?: ReactNode + dividerIconStyle?: 'slash' | 'caret' + icon?: ReactNode } -const BreadcrumbComponent: FC = ({ +export const BreadcrumbComponent: FC = ({ children, - separatorIcon, - breadCrumbWithBorder = false, className, - listStyle, - ...props + borderType, + dividerIconStyle, + dividerIcon, + icon, }) => { - const theme = useTheme().theme.breadcrumb + const childrenWithProps = Children.map(children, (child) => + cloneElement(child as ReactElement, { dividerIconStyle: dividerIconStyle, dividerIcon: dividerIcon }), + ) return ( - - - +
    + {icon ? ( + icon + ) : ( + + + + )} + {childrenWithProps} +
    ) } -BreadcrumbComponent.displayName = 'Breadcrumb' +Item.displayName = 'Breadcrumb.Item' export const Breadcrumb = Object.assign(BreadcrumbComponent, { - Item: BreadcrumbItem, + Item, }) diff --git a/app/src/components/Breadcrumb/BreadcrumbContext.tsx b/app/src/components/Breadcrumb/BreadcrumbContext.tsx deleted file mode 100644 index 90befadd..00000000 --- a/app/src/components/Breadcrumb/BreadcrumbContext.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import type { ReactNode } from 'react' -import { createContext, useContext } from 'react' - -/** - * Represents the context for the Breadcrumb component. - * @interface BreadcrumbContext - */ -type BreadcrumbContextProps = { - /** - * The separator icon to be displayed between breadcrumb items. - * @type {ReactNode} - */ - separatorIcon?: ReactNode -} - -export const BreadcrumbContext = createContext(undefined) - -/** - * Returns the BreadcrumbContext object from the nearest BreadcrumbContext provider. - * @returns {BreadcrumbContext} The BreadcrumbContext object. - * @throws {Error} Throws an error if used outside of a BreadcrumbContext provider. - */ -export function useBreadcrumbContext(): BreadcrumbContextProps { - const context = useContext(BreadcrumbContext) - - if (!context) { - throw new Error('useBreadcrumbContext should be used within the BreadcrumbContext provider!') - } - - return context -} diff --git a/app/src/components/Breadcrumb/BreadcrumbItem.tsx b/app/src/components/Breadcrumb/BreadcrumbItem.tsx deleted file mode 100644 index ad6e922a..00000000 --- a/app/src/components/Breadcrumb/BreadcrumbItem.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { forwardRef } from 'react' -import { useTheme } from '../../Keep/ThemeContext' -import { useBreadcrumbContext } from './BreadcrumbContext' -import type { ComponentProps, PropsWithChildren, ReactElement, ReactNode } from 'react' -import { cn } from '../../helpers/cn' - -/** - * Props for the BreadcrumbItem component. - * @interface BreadcrumbItemProps - * @extends {PropsWithChildren, 'ref'>>} - */ -export interface BreadcrumbItemProps extends PropsWithChildren, 'ref'>> { - /** - * The URL to navigate to when the breadcrumb item is clicked. - * @type {string} - */ - href?: string - - /** - * The icon to display alongside the breadcrumb item. - * @type {ReactNode} - */ - icon?: ReactNode - - /** - * The active state of the breadcrumb item. - * - 'border': Adds a border to the breadcrumb item. - * - 'bar': Adds a bar to the breadcrumb item. - * - 'base': Default active state. - * @type {'border' | 'bar' | 'base'} - * @default 'base' - */ - active?: 'border' | 'bar' | 'base' - - /** - * Determines if the breadcrumb item is disabled. - * @type {boolean} - * @default false - */ - disabled?: boolean - - /** - * Additional CSS class name for the breadcrumb item. - * @type {string} - * @default '' - */ - className?: string -} - -export const BreadcrumbItem = forwardRef( - ({ children, className, href, icon: Icon, disabled, active, ...props }, ref): ReactElement => { - const { separatorIcon } = useBreadcrumbContext() - const isLink = typeof href !== 'undefined' - const theme = useTheme().theme.breadcrumb.item - - const Component = isLink ? 'a' : 'span' - - return ( -
  • - {separatorIcon && ( - - {separatorIcon} - - )} - -
    - {Icon && {Icon}} - {children} -
    -     -
    • - ) - }, -) -BreadcrumbItem.displayName = 'Breadcrumb.Item' diff --git a/app/src/components/Breadcrumb/Item.tsx b/app/src/components/Breadcrumb/Item.tsx new file mode 100644 index 00000000..0d252a40 --- /dev/null +++ b/app/src/components/Breadcrumb/Item.tsx @@ -0,0 +1,33 @@ +import { FC, ReactNode } from 'react' +import { breadcrumbTheme } from './theme' +import { cn } from '../../helpers/cn' + +export interface ItemsProps { + className?: string + children?: ReactNode + activeType?: 'base' | 'border' + href?: string + [keyof: string]: any +} + +export const Item: FC = ({ className, children, activeType, href = '#', ...props }) => { + const { dividerIconStyle, dividerIcon } = props + const { base, icon, text } = breadcrumbTheme.item + return ( +
    + {dividerIcon && dividerIcon} + + {!dividerIcon && dividerIconStyle === 'slash' &&
    /
    } + {!dividerIcon && dividerIconStyle !== 'slash' && ( +
    + + + +
    + )} + + {children} + +
    + ) +} diff --git a/app/src/components/Breadcrumb/theme.ts b/app/src/components/Breadcrumb/theme.ts index cce127ec..17ce9c31 100644 --- a/app/src/components/Breadcrumb/theme.ts +++ b/app/src/components/Breadcrumb/theme.ts @@ -1,22 +1,47 @@ -import { keepBreadCrumbTheme } from '.' +interface BreadcrumbTheme { + root: { + base: string + } + borderType: { + 'border-xy': string + 'border-y': string + } + item: { + base: string + icon: { + slash: string + caret: string + } + text: { + base: string + activeType: { + base: string + border: string + } + } + } +} -export const breadcrumbTheme: keepBreadCrumbTheme = { - breadCrumbWithBorder: 'border-metal-100 p-[9px] border-t border-b', +export const breadcrumbTheme: BreadcrumbTheme = { + root: { + base: 'flex max-w-[407px] items-center gap-2 px-3 py-2', + }, + borderType: { + 'border-xy': 'rounded-xl border border-metal-100', + 'border-y': 'border-y border-metal-100', + }, item: { - base: 'group flex items-center', - chevron: 'mx-1 group-first:hidden md:mx-2', - href: { - off: 'flex items-center text-body-4 font-normal text-metal-500', - on: 'group flex items-center text-body-4 font-normal text-metal-500 hover:text-primary-400', + base: 'flex items-center gap-1', + icon: { + slash: 'flex h-4 w-4 items-center justify-center text-xl text-metal-600', + caret: 'flex h-4 w-4 items-center justify-center text-metal-600', }, - icon: 'mr-2', - iconWrapper: 'relative flex items-center', - disabled: 'text-metal-200', - activeItem: { - base: 'text-primary-400', - border: 'px-2 py-1 bg-primary-25 border border-primary-100 text-primary-400 rounded-md', - bar: 'text-primary-400 after:content[""] after:absolute after:bottom-0 after:w-8 after:h-0.5 after:bg-primary-400 after:left-2/4 after:-translate-x-2/4', + text: { + base: 'rounded-md px-[6px] py-1 text-body-5 font-medium transition-all duration-150 hover:text-primary-500', + activeType: { + base: 'bg-primary-25 text-primary-500', + border: 'border border-primary-500 text-primary-500', + }, }, }, - list: 'flex items-center', } diff --git a/app/src/theme/theme.ts b/app/src/theme/theme.ts index fc313598..9108a2c4 100644 --- a/app/src/theme/theme.ts +++ b/app/src/theme/theme.ts @@ -1,6 +1,5 @@ import { avatarTheme } from '../components/Avatar/theme' import { badgeTheme } from '../components/Badge/theme' -import { breadcrumbTheme } from '../components/Breadcrumb/theme' import { buttonTheme } from '../components/Button/theme' import { cardTheme } from '../components/Card/theme' import { carouselTheme } from '../components/Carousel/theme' @@ -34,7 +33,6 @@ export const theme = { avatar: avatarTheme, button: buttonTheme, badge: badgeTheme, - breadcrumb: breadcrumbTheme, card: cardTheme, carousel: carouselTheme, progress: progressTheme, From 2513526d53712c3511e1b5cf3d48c1a56615d135 Mon Sep 17 00:00:00 2001 From: Arifulislam5577 Date: Fri, 19 Jan 2024 19:51:22 +0600 Subject: [PATCH 10/70] Updated: Breadcrumb component updated. --- app/docs/components/breadcrumb/breadcrumb.mdx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/app/docs/components/breadcrumb/breadcrumb.mdx b/app/docs/components/breadcrumb/breadcrumb.mdx index 3867a44a..880a6d59 100644 --- a/app/docs/components/breadcrumb/breadcrumb.mdx +++ b/app/docs/components/breadcrumb/breadcrumb.mdx @@ -10,11 +10,11 @@ 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. @@ -22,7 +22,7 @@ The default Breadcrumbs component provides a simple and intuitive way for users ## Border Types -The Breadcrumbs component with the `borderType` prop with two value that will be `"border-xy"` and `"border-y"`. +The Breadcrumbs component includes the `borderType` prop with two possible values: `"border-xy"` and `"border-y"`. @@ -30,7 +30,7 @@ The Breadcrumbs component with the `borderType` prop with two value that will be ## Divider Icon Type -The Breadcrumbs component with the `dividerIconStyle` prop with two value that will be `"slash"` and `"caret"`. +The Breadcrumbs component incorporates the `dividerIconStyle` prop with two possible values: `"slash"` and `"caret"`. @@ -38,7 +38,7 @@ The Breadcrumbs component with the `dividerIconStyle` prop with two value that w ## Customize Breadcrumb -You can customize breadcrumb component using className props. And also we have more api for customizable options. +You can customize the breadcrumb component using the `className` props. Additionally, we provide more APIs for customizable options. @@ -46,12 +46,12 @@ You can customize breadcrumb component using className props. And also we have m ## Breadcrumb API Reference -Explore the available props for the `` component +Explore the available props for the `` component. ## Item API Reference -Explore the available props for the `` component +Explore the available props for the `` component. From b300c6ced97f668e546da6e23f0ff73a9138be59 Mon Sep 17 00:00:00 2001 From: Arifulislam5577 Date: Sun, 21 Jan 2024 20:32:53 +0600 Subject: [PATCH 11/70] Removed: Remove component global context. --- app/new/Breadcrumb/Breadcrumb.tsx | 67 ------- app/new/Breadcrumb/Item.tsx | 33 ---- app/new/Breadcrumb/index.tsx | 1 - app/new/page.tsx | 17 +- app/src/Keep/KeepTheme.ts | 65 ------- app/src/Keep/ThemeContext.tsx | 115 ------------ app/src/Keep/index.tsx | 52 ------ app/src/components/Accordion/Container.tsx | 2 +- app/src/components/Avatar/Avatar.tsx | 87 +-------- app/src/components/Avatar/AvatarAdd.tsx | 5 +- .../components/Avatar/AvatarGroupCounter.tsx | 5 +- app/src/components/Avatar/theme.ts | 83 ++++++++- app/src/components/Badge/index.tsx | 66 +------ app/src/components/Badge/theme.ts | 64 ++++++- app/src/components/Card/Card.tsx | 42 +---- app/src/components/Card/CardDescription.tsx | 6 +- app/src/components/Card/theme.ts | 32 +++- app/src/components/Carousel/Carousel.tsx | 61 +------ app/src/components/Carousel/theme.ts | 54 +++++- app/src/components/CheckBox/index.tsx | 34 +--- app/src/components/CheckBox/theme.ts | 25 ++- app/src/components/CheckboxGroup/index.tsx | 68 +------ app/src/components/CheckboxGroup/theme.ts | 59 +++++- app/src/components/Dropdown/Dropdown.tsx | 23 +-- .../components/Dropdown/DropdownDivider.tsx | 9 +- .../components/Dropdown/DropdownHeader.tsx | 9 +- app/src/components/Dropdown/DropdownItem.tsx | 10 +- app/src/components/Dropdown/theme.ts | 28 ++- app/src/components/Empty/Description.tsx | 8 +- app/src/components/Empty/Empty.tsx | 25 +-- app/src/components/Empty/Redirect.tsx | 4 +- app/src/components/Empty/Title.tsx | 8 +- app/src/components/Empty/theme.ts | 19 +- .../components/FormControls/HelperText.tsx | 17 +- app/src/components/FormControls/Label.tsx | 18 +- .../components/FormControls/NumberInput.tsx | 42 +---- app/src/components/FormControls/Radio.tsx | 22 +-- app/src/components/FormControls/TextInput.tsx | 71 +------- app/src/components/FormControls/Textarea.tsx | 25 +-- .../components/FormControls/formControls.tsx | 26 --- app/src/components/FormControls/theme.ts | 172 +++++++++++++++++- app/src/components/Modal/ModalBody.tsx | 14 +- app/src/components/Modal/ModalFooter.tsx | 14 +- app/src/components/Modal/ModalHeader.tsx | 12 +- app/src/components/Modal/index.tsx | 61 +------ app/src/components/Modal/theme.ts | 40 +++- app/src/components/Navigation/Navigation.tsx | 37 +--- .../Navigation/NavigationCollapse.tsx | 21 +-- .../Navigation/NavigationContainer.tsx | 2 +- .../Navigation/NavigationDivider.tsx | 8 +- .../components/Navigation/NavigationLink.tsx | 17 +- .../Navigation/NavigationToggle.tsx | 4 +- app/src/components/Navigation/theme.ts | 53 +++++- app/src/components/Notification/Avatar.tsx | 5 +- app/src/components/Notification/Body.tsx | 5 +- app/src/components/Notification/Container.tsx | 1 - .../components/Notification/Description.tsx | 5 +- app/src/components/Notification/Icon.tsx | 5 +- app/src/components/Notification/Media.tsx | 1 - .../components/Notification/Notification.tsx | 36 +--- app/src/components/Notification/Title.tsx | 4 +- app/src/components/Notification/theme.ts | 19 +- app/src/components/Pagination/index.tsx | 61 +------ app/src/components/Pagination/theme.ts | 53 +++++- app/src/components/Popover/Container.tsx | 4 +- app/src/components/Popover/Description.tsx | 4 +- app/src/components/Popover/Popover.tsx | 48 ++--- app/src/components/Popover/Title.tsx | 4 +- app/src/components/Popover/theme.ts | 16 +- app/src/components/Progress/index.tsx | 48 +---- app/src/components/Progress/theme.ts | 35 +++- app/src/components/Rating/RatingAdvanced.tsx | 22 +-- app/src/components/Rating/RatingStar.tsx | 6 +- app/src/components/Rating/index.tsx | 33 +--- app/src/components/Rating/theme.ts | 23 ++- app/src/components/SearchBar/index.tsx | 3 +- app/src/components/Sidebar/SidebarCTA.tsx | 21 +-- .../components/Sidebar/SidebarCollapse.tsx | 30 +-- app/src/components/Sidebar/SidebarItem.tsx | 33 +--- .../components/Sidebar/SidebarItemGroup.tsx | 6 +- app/src/components/Sidebar/SidebarItems.tsx | 4 +- app/src/components/Sidebar/SidebarLogo.tsx | 13 +- app/src/components/Sidebar/index.tsx | 31 +--- app/src/components/Sidebar/theme.ts | 65 ++++++- app/src/components/Skeleton/Skeleton.tsx | 13 +- .../components/Skeleton/SkeletonAvatar.tsx | 4 +- app/src/components/Skeleton/SkeletonLine.tsx | 4 +- app/src/components/Skeleton/theme.ts | 7 +- app/src/components/Spinner/index.tsx | 20 +- app/src/components/Spinner/theme.ts | 17 +- app/src/components/Statistic/Amout.tsx | 11 +- app/src/components/Statistic/Rate.tsx | 10 +- app/src/components/Statistic/Statistic.tsx | 19 +- app/src/components/Statistic/StatusIcon.tsx | 14 +- app/src/components/Statistic/Title.tsx | 17 +- app/src/components/Statistic/theme.ts | 25 ++- app/src/components/Steps/StepItem.tsx | 6 +- app/src/components/Steps/Steps.tsx | 55 +----- app/src/components/Steps/theme.ts | 47 ++++- app/src/components/Switch/index.tsx | 33 +--- app/src/components/Switch/theme.ts | 27 ++- app/src/components/Table/Table.tsx | 27 +-- app/src/components/Table/TableBody.tsx | 16 +- app/src/components/Table/TableCaption.tsx | 10 +- app/src/components/Table/TableCell.tsx | 12 +- app/src/components/Table/TableHead.tsx | 14 +- app/src/components/Table/TableHeadCell.tsx | 20 +- app/src/components/Table/TableRow.tsx | 13 +- app/src/components/Table/theme.ts | 54 +++++- app/src/components/Tabs/TabItem.tsx | 2 +- app/src/components/Tabs/index.tsx | 64 +------ app/src/components/Tabs/theme.ts | 54 +++++- app/src/components/Tag/index.tsx | 32 +--- app/src/components/Tag/theme.ts | 29 ++- app/src/components/Timeline/TimelineBody.tsx | 7 +- .../components/Timeline/TimelineContent.tsx | 13 +- app/src/components/Timeline/TimelineItem.tsx | 18 +- app/src/components/Timeline/TimelinePoint.tsx | 24 +-- app/src/components/Timeline/TimelineTime.tsx | 14 +- app/src/components/Timeline/TimelineTitle.tsx | 10 +- app/src/components/Timeline/index.tsx | 39 +--- app/src/components/Timeline/theme.ts | 57 +++++- app/src/components/Tooltip/index.tsx | 4 +- app/src/components/Tree/index.tsx | 43 +---- app/src/components/Tree/theme.ts | 37 +++- app/src/components/Upload/InputField.tsx | 28 +-- app/src/components/Upload/UploadFailed.tsx | 30 +-- .../components/Upload/UploadHorizontal.tsx | 29 +-- app/src/components/Upload/UploadPending.tsx | 32 +--- app/src/components/Upload/UploadSuccess.tsx | 23 +-- app/src/components/Upload/index.tsx | 15 +- app/src/components/Upload/theme.ts | 115 +++++++++++- app/src/components/index.tsx | 6 +- app/src/index.ts | 1 - app/src/theme/theme.ts | 63 ------- routes/routes.ts | 27 +-- 136 files changed, 1605 insertions(+), 2212 deletions(-) delete mode 100644 app/new/Breadcrumb/Breadcrumb.tsx delete mode 100644 app/new/Breadcrumb/Item.tsx delete mode 100644 app/new/Breadcrumb/index.tsx delete mode 100644 app/src/Keep/index.tsx delete mode 100644 app/src/components/FormControls/formControls.tsx delete mode 100644 app/src/theme/theme.ts diff --git a/app/new/Breadcrumb/Breadcrumb.tsx b/app/new/Breadcrumb/Breadcrumb.tsx deleted file mode 100644 index 0d8c787a..00000000 --- a/app/new/Breadcrumb/Breadcrumb.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { ReactNode, FC, Children, ReactElement, cloneElement } from 'react' -import { cn } from '~/app/src/helpers/cn' -import { Item } from './Item' - -interface BreadcrumbProps { - children?: ReactNode - className?: string - borderType?: 'border-xy' | 'border-y' - dividerIcon?: ReactNode - dividerIconStyle?: 'slash' | 'caret' - icon?: ReactNode -} - -export const breadcrumbTheme = { - root: { - base: 'flex max-w-[407px] items-center gap-2 px-3 py-2', - }, - borderType: { - 'border-xy': 'rounded-xl border border-metal-100', - 'border-y': 'border-y border-metal-100', - }, - - item: { - base: 'flex items-center gap-1', - icon: { - slash: 'flex h-4 w-4 items-center justify-center text-xl text-metal-600', - caret: 'flex h-4 w-4 items-center justify-center text-metal-600', - }, - text: { - base: 'rounded-md px-[6px] py-1 text-body-5 font-medium transition-all duration-150 hover:text-primary-500', - activeType: { - base: 'bg-primary-25 text-primary-500', - border: 'border border-primary-500 text-primary-500', - }, - }, - }, -} - -export const BreadcrumbComponent: FC = ({ - children, - className, - borderType, - dividerIconStyle, - dividerIcon, - icon, -}) => { - const childrenWithProps = Children.map(children, (child) => - cloneElement(child as ReactElement, { dividerIconStyle: dividerIconStyle, dividerIcon: dividerIcon }), - ) - return ( -
    - {icon ? ( - icon - ) : ( - - - - )} - {childrenWithProps} -
    - ) -} - -Item.displayName = 'Breadcrumb.Item' -export const Breadcrumb = Object.assign(BreadcrumbComponent, { - Item, -}) diff --git a/app/new/Breadcrumb/Item.tsx b/app/new/Breadcrumb/Item.tsx deleted file mode 100644 index 95695312..00000000 --- a/app/new/Breadcrumb/Item.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { FC, ReactNode } from 'react' -import { cn } from '~/app/src/helpers/cn' -import { breadcrumbTheme } from './Breadcrumb' - -export interface ItemsProps { - className?: string - children?: ReactNode - activeType?: 'base' | 'border' - href?: string - [keyof: string]: any -} -export const Item: FC = ({ className, children, activeType, href = '#', ...props }) => { - const { dividerIconStyle, dividerIcon } = props - const { base, icon, text } = breadcrumbTheme.item - return ( -
    - {dividerIcon && dividerIcon} - - {!dividerIcon && dividerIconStyle === 'slash' ? ( -
    /
    - ) : ( -
    - - - -
    - )} - - {children} - -
    - ) -} diff --git a/app/new/Breadcrumb/index.tsx b/app/new/Breadcrumb/index.tsx deleted file mode 100644 index e01e180c..00000000 --- a/app/new/Breadcrumb/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './Breadcrumb' diff --git a/app/new/page.tsx b/app/new/page.tsx index 9eb5b274..115558a6 100644 --- a/app/new/page.tsx +++ b/app/new/page.tsx @@ -1,23 +1,8 @@ -import { Breadcrumb } from './Breadcrumb/Breadcrumb' - const Page = () => { return (
    -

    Breadcrumb component

    - - - Overview - Pools - Tokens - Color - - - - Overview - Pools - Color - +

    Carousel component

    ) diff --git a/app/src/Keep/KeepTheme.ts b/app/src/Keep/KeepTheme.ts index 91da6171..8cf4d120 100644 --- a/app/src/Keep/KeepTheme.ts +++ b/app/src/Keep/KeepTheme.ts @@ -1,34 +1,3 @@ -import { keepNotificationTheme } from '../components' -import { keepAvatarTheme } from '../components/Avatar/Avatar' -import { keepBadgeTheme } from '../components/Badge' -import { KeepCardTheme } from '../components/Card' -import { KeepCarouselTheme } from '../components/Carousel' -import { keepCheckboxTheme } from '../components/CheckBox' -import { keepCheckboxGroupTheme } from '../components/CheckboxGroup' -import { keepDropdownTheme } from '../components/Dropdown' -import { keepEmptyTheme } from '../components/Empty' -import { keepFloatingTheme } from '../components/Floating' -import { keepFormControlTheme } from '../components/FormControls/formControls' -import { keepModalTheme } from '../components/Modal' -import { KeepNavigationTheme } from '../components/Navigation' -import { keepPaginationTheme } from '../components/Pagination' -import { keepPopoverTheme } from '../components/Popover' -import { keepProgressTheme } from '../components/Progress' -import { keepRatingTheme } from '../components/Rating' -import { KeepSidebarTheme } from '../components/Sidebar' -import { keepSkeletonTheme } from '../components/Skeleton' -import { KeepSpinnerTheme } from '../components/Spinner' -import { keepStatisticTheme } from '../components/Statistic' -import { KeepStepTheme } from '../components/Steps' -import { keepToggleTheme } from '../components/Switch' -import { keepTableTheme } from '../components/Table' -import { keepTabTheme } from '../components/Tabs' -import { keepTagTheme } from '../components/Tag' -import { keepTimelineTheme } from '../components/Timeline' -import { keepTreeTheme } from '../components/Tree' -import { keepUploadTheme } from '../components/Upload' -import { DeepPartial } from '../helpers/deep-partial' - export interface KeepCheckboxShape { circle: string round: string @@ -132,37 +101,3 @@ export type KeepTypography = | `description-${1 | 2 | 3 | 4}` export type KeepHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' - -export type CustomKeepTheme = DeepPartial - -export interface KeepTheme { - avatar: keepAvatarTheme - badge: keepBadgeTheme - card: KeepCardTheme - carousel: KeepCarouselTheme - dropdown: keepDropdownTheme - progress: keepProgressTheme - popover: keepPopoverTheme - pagination: keepPaginationTheme - navigation: KeepNavigationTheme - notification: keepNotificationTheme - tooltip: keepFloatingTheme - modal: keepModalTheme - rating: keepRatingTheme - spinner: KeepSpinnerTheme - tabs: keepTabTheme - sidebar: KeepSidebarTheme - switch: keepToggleTheme - skeleton: keepSkeletonTheme - tag: keepTagTheme - table: keepTableTheme - timeline: keepTimelineTheme - empty: keepEmptyTheme - statistic: keepStatisticTheme - upload: keepUploadTheme - checkbox: keepCheckboxTheme - formControls: keepFormControlTheme - checkboxGroup: keepCheckboxGroupTheme - tree: keepTreeTheme - step: KeepStepTheme -} diff --git a/app/src/Keep/ThemeContext.tsx b/app/src/Keep/ThemeContext.tsx index d39884fd..e69de29b 100644 --- a/app/src/Keep/ThemeContext.tsx +++ b/app/src/Keep/ThemeContext.tsx @@ -1,115 +0,0 @@ -/* eslint-disable react-hooks/rules-of-hooks */ -'use client' -import type { Dispatch, FC, ReactNode, SetStateAction } from 'react' -import { createContext, useContext, useEffect, useState } from 'react' -import type { KeepTheme } from './KeepTheme' -import { theme as defaultTheme } from '../theme/theme' -import { windowExists } from '../helpers/window-exists' - -/** - * Represents the mode of the theme. - * It can be 'light', 'dark', or undefined. - */ -export type Mode = string | undefined | 'light' | 'dark' - -/** - * Props for the ThemeContext component. - */ -interface ThemeContextProps { - theme: KeepTheme - mode?: Mode - toggleMode?: () => void | null -} - -/** - * Context for managing the theme in the application. - */ -export const ThemeContext = createContext({ - theme: defaultTheme, -}) - -/** - * Props for the ThemeProvider component. - */ -interface ThemeProviderProps { - children: ReactNode - value: ThemeContextProps -} - -export const ThemeProvider: FC = ({ children, value }) => { - return {children} -} - -export function useTheme(): ThemeContextProps { - return useContext(ThemeContext) -} - -/** - * Custom hook that provides theme mode state and functions for toggling the theme mode. - * @param usePreferences - Flag indicating whether to use user preferences for theme mode. - * @returns A tuple containing the current theme mode, a function to set the theme mode, and a function to toggle the theme mode. - */ -export const useThemeMode = ( - usePreferences: boolean, -): [Mode, Dispatch> | undefined, (() => void) | undefined] => { - if (!usePreferences) return [undefined, undefined, undefined] - - const [mode, setMode] = useState(undefined) - - /** - * Saves the theme preference to the local storage. - * - * @param m - The theme preference to be saved. - */ - const savePreference = (m: string) => localStorage.setItem('theme', m) - - /** - * Toggles the mode between 'dark' and 'light'. - * If the current mode is 'dark', it will be changed to 'light', and vice versa. - * Saves the preference and updates the mode state accordingly. - */ - const toggleMode = () => { - if (!mode) { - return - } - - if (windowExists()) { - document.documentElement.classList.toggle('dark') - } - - savePreference(mode) - setMode(mode == 'dark' ? 'light' : 'dark') - } - - if (usePreferences) { - useEffect(() => { - const userPreference = - windowExists() && !!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches - const userMode = localStorage.getItem('theme') || (userPreference ? 'dark' : 'light') - - if (userMode) { - setMode(userMode) - } - }, []) - - useEffect(() => { - if (!mode) { - return - } - - savePreference(mode) - - if (!windowExists()) { - return - } - - if (mode != 'dark') { - document.documentElement.classList.remove('dark') - } else { - document.documentElement.classList.add('dark') - } - }, [mode]) - } - - return [mode, setMode, toggleMode] -} diff --git a/app/src/Keep/index.tsx b/app/src/Keep/index.tsx deleted file mode 100644 index 647bc3db..00000000 --- a/app/src/Keep/index.tsx +++ /dev/null @@ -1,52 +0,0 @@ -'use client' -import type { FC, HTMLAttributes, ReactNode } from 'react' -import { useEffect, useMemo } from 'react' -import type { KeepTheme } from './KeepTheme' -import { ThemeContext, useThemeMode } from './ThemeContext' -import { DeepPartial } from '../helpers/deep-partial' -import { mergeDeep } from '../helpers/mergeDeep' -import { theme as defaultTheme } from '../theme/theme' -import { windowExists } from '../helpers/window-exists' - -export interface ThemeProps { - dark?: boolean - theme?: DeepPartial - usePreferences?: boolean -} - -interface KeepProps extends HTMLAttributes { - children: ReactNode - theme?: ThemeProps -} - -export const Keep: FC = ({ children, theme = {} }) => { - const { theme: customTheme = {}, dark, usePreferences = true } = theme - const [mode, setMode, toggleMode] = useThemeMode(usePreferences) - - const mergedTheme = mergeDeep(defaultTheme, customTheme) as unknown as KeepTheme - - useEffect(() => { - if (dark) { - if (setMode != null) { - setMode('dark') - } - - if (windowExists()) { - document.documentElement.classList.add('dark') - } - } - }, [dark, setMode]) - - const themeContextValue = useMemo( - () => ({ - theme: mergedTheme, - mode, - toggleMode, - }), - [mode, toggleMode, mergedTheme], - ) - - return {children} -} - -export type { KeepTheme } from './KeepTheme' diff --git a/app/src/components/Accordion/Container.tsx b/app/src/components/Accordion/Container.tsx index 66a22972..5081a155 100644 --- a/app/src/components/Accordion/Container.tsx +++ b/app/src/components/Accordion/Container.tsx @@ -1,6 +1,6 @@ 'use client' import { FC, ReactNode } from 'react' -import { cn } from '~/app/src/helpers/cn' +import { cn } from '../../helpers/cn' import { useAccordionContext } from './AccordionContext' import { accordionTheme } from './theme' diff --git a/app/src/components/Avatar/Avatar.tsx b/app/src/components/Avatar/Avatar.tsx index b356eca3..ad1acdc8 100644 --- a/app/src/components/Avatar/Avatar.tsx +++ b/app/src/components/Avatar/Avatar.tsx @@ -7,93 +7,12 @@ import type { ComponentProps, FC, PropsWithChildren } from 'react' import { excludeClassName } from '../../helpers/exclude' -import { KeepPositions, KeepSizes } from '../../Keep/KeepTheme' -import { useTheme } from '../../Keep/ThemeContext' import { AvatarAdd } from './AvatarAdd' import { AvatarGroup } from './AvatarGroup' import { AvatarGroupCounter } from './AvatarGroupCounter' import { cn } from '../../helpers/cn' - -export interface keepAvatarTheme { - base: string - bordered: string - img: { - off: string - on: string - } - size: AvatarSizes - customStatusIcon: AvatarSizes - shape: { - square: string - circle: string - rounded: AvatarSizes - } - stacked: string - status: { - away: string - busy: string - offline: string - online: string - } - statusType: { - type: AvatarStatusType - size: KeepAvatarStatusTypeSize - fontSize: KeepAvatarStatusFontSize - } - statusPosition: { - square: KeepAvatarStatusPositions - circle: KeepAvatarStatusPositions - rounded: KeepAvatarStatusPositions - } - groupCounter: { - base: string - } - add: { - base: string - iconSize: AvatarSizes - } -} - -export interface AvatarSizes extends Pick { - [key: string]: string -} - -export interface AvatarStatusType extends Pick { - [key: string]: string -} - -export interface AvatarStatusPositions - extends Pick { - [key: string]: string -} - -export interface KeepAvatarStatusType { - dot: string - notification: string -} - -export interface KeepAvatarStatusTypeSize { - dot: AvatarSizes - notification: AvatarSizes -} - -export interface StatusPositions { - xs: AvatarStatusPositions - sm: AvatarStatusPositions - md: AvatarStatusPositions - lg: AvatarStatusPositions - xl: AvatarStatusPositions - '2xl': AvatarStatusPositions -} - -export interface KeepAvatarStatusPositions { - dot: StatusPositions - notification: StatusPositions -} - -export interface KeepAvatarStatusFontSize { - notification: AvatarSizes -} +import { AvatarSizes, KeepAvatarStatusType, StatusPositions, avatarTheme } from './theme' +import { KeepPositions } from '../../Keep/KeepTheme' /** * Props for the Avatar component @@ -198,7 +117,7 @@ const AvatarComponent: FC = ({ ...props }) => { const theirProps = excludeClassName(props) - const theme = useTheme().theme.avatar + const theme = avatarTheme return (
    diff --git a/app/src/components/Avatar/AvatarAdd.tsx b/app/src/components/Avatar/AvatarAdd.tsx index f414b809..6feebde0 100644 --- a/app/src/components/Avatar/AvatarAdd.tsx +++ b/app/src/components/Avatar/AvatarAdd.tsx @@ -1,7 +1,6 @@ import type { FC, PropsWithChildren } from 'react' -import type { AvatarSizes } from './Avatar' -import { useTheme } from '../../Keep/ThemeContext' import { cn } from '../../helpers/cn' +import { AvatarSizes, avatarTheme } from './theme' /** * Props for the AvatarAdd component. @@ -58,7 +57,7 @@ export const AvatarAdd: FC = ({ ringColor = 'ring-white', className, }) => { - const theme = useTheme().theme.avatar + const theme = avatarTheme return (
    diff --git a/app/src/components/Avatar/AvatarGroupCounter.tsx b/app/src/components/Avatar/AvatarGroupCounter.tsx index 480bb7d3..fc0fe1da 100644 --- a/app/src/components/Avatar/AvatarGroupCounter.tsx +++ b/app/src/components/Avatar/AvatarGroupCounter.tsx @@ -1,7 +1,6 @@ import type { FC, PropsWithChildren } from 'react' -import type { AvatarSizes } from './Avatar' -import { useTheme } from '../../Keep/ThemeContext' import { cn } from '../../helpers/cn' +import { AvatarSizes, avatarTheme } from './theme' /** * Props for the AvatarGroupCounter component. @@ -38,7 +37,7 @@ export type AvatarGroupCounterProps = PropsWithChildren<{ }> export const AvatarGroupCounter: FC = ({ total, href, size = 'md', className }) => { - const theme = useTheme().theme.avatar + const theme = avatarTheme return ( { + [key: string]: string +} + +export interface AvatarStatusType extends Pick { + [key: string]: string +} + +export interface AvatarStatusPositions + extends Pick { + [key: string]: string +} + +export interface KeepAvatarStatusType { + dot: string + notification: string +} + +export interface KeepAvatarStatusTypeSize { + dot: AvatarSizes + notification: AvatarSizes +} + +export interface StatusPositions { + xs: AvatarStatusPositions + sm: AvatarStatusPositions + md: AvatarStatusPositions + lg: AvatarStatusPositions + xl: AvatarStatusPositions + '2xl': AvatarStatusPositions +} + +export interface KeepAvatarStatusPositions { + dot: StatusPositions + notification: StatusPositions +} + +export interface KeepAvatarStatusFontSize { + notification: AvatarSizes +} + +export interface keepAvatarTheme { + base: string + bordered: string + img: { + off: string + on: string + } + size: AvatarSizes + customStatusIcon: AvatarSizes + shape: { + square: string + circle: string + rounded: AvatarSizes + } + stacked: string + status: { + away: string + busy: string + offline: string + online: string + } + statusType: { + type: AvatarStatusType + size: KeepAvatarStatusTypeSize + fontSize: KeepAvatarStatusFontSize + } + statusPosition: { + square: KeepAvatarStatusPositions + circle: KeepAvatarStatusPositions + rounded: KeepAvatarStatusPositions + } + groupCounter: { + base: string + } + add: { + base: string + iconSize: AvatarSizes + } +} export const avatarTheme: keepAvatarTheme = { base: 'flex items-center space-x-4', diff --git a/app/src/components/Badge/index.tsx b/app/src/components/Badge/index.tsx index 4dbe65eb..efbdba8c 100644 --- a/app/src/components/Badge/index.tsx +++ b/app/src/components/Badge/index.tsx @@ -1,62 +1,8 @@ import type { ComponentProps, FC, PropsWithChildren, ReactElement, ReactNode } from 'react' import { excludeClassName } from '../../helpers/exclude' -import { KeepColors, KeepSizes } from '../../Keep/KeepTheme' -import { useTheme } from '../../Keep/ThemeContext' import { cn } from '../../helpers/cn' +import { BadgeColors, BadgeSizes, badgeTheme } from './theme' -export interface keepBadgeTheme { - base: string - href: string - badgeType: { - default: { - colorType: { - light: { - color: BadgeColors - } - strong: { - color: BadgeColors - } - } - } - outline: { - colorType: { - light: { - color: BadgeColors - } - strong: { - color: BadgeColors - } - } - } - text: { - colorType: { - light: { - color: BadgeColors - } - strong: { - color: BadgeColors - } - } - } - } - icon: { - off: string - on: string - size: BadgeSizes - } - size: BadgeSizes - dot: string - dotPosition: { - left: string - right: string - } -} - -/** - * Props for the Badge component. - * @interface BadgeProps - * @extends {PropsWithChildren, 'className' | 'color'>>} - */ export interface BadgeProps extends PropsWithChildren, 'className' | 'color'>> { /** * The color of the badge. @@ -149,14 +95,6 @@ export interface BadgeProps extends PropsWithChildren { - [key: string]: string -} - -export interface BadgeSizes extends Pick { - [key: string]: string -} - export const Badge: FC = ({ children, color = 'info', @@ -175,7 +113,7 @@ export const Badge: FC = ({ }): ReactElement => { const theirProps = excludeClassName(props) - const theme = useTheme().theme.badge + const theme = badgeTheme const Content = (): ReactElement => ( , 'className' | 'color'>>} + */ + +export interface BadgeColors extends Pick { + [key: string]: string +} + +export interface BadgeSizes extends Pick { + [key: string]: string +} export const badgeTheme: keepBadgeTheme = { base: 'flex h-fit w-fit items-center justify-center gap-1 font-medium rounded-md cursor-pointer', diff --git a/app/src/components/Card/Card.tsx b/app/src/components/Card/Card.tsx index ed46f739..80b8058f 100644 --- a/app/src/components/Card/Card.tsx +++ b/app/src/components/Card/Card.tsx @@ -4,45 +4,8 @@ import { CardDescription } from './CardDescription' import { CardLink } from './CardLink' import { CardList } from './CardList' import { CardTitle } from './CardTitle' -import { KeepBoolean, KeepSizes } from '../../Keep/KeepTheme' -import { useTheme } from '../../Keep/ThemeContext' import { cn } from '../../helpers/cn' - -export interface KeepCardTheme { - base: string - children: string - shadow: KeepBoolean - border: KeepBoolean - horizontal: { - off: string - on: string - } - href: string - img: { - base: string - horizontal: { - off: { - base: string - size: CardBgImageSizes - } - on: { - base: string - size: CardBgImageSizes - } - } - } - description: string -} - -export interface CardBgImageSizes extends Pick { - [key: string]: string -} - -/** - * Props for the Card component. - * @interface CardProps - * @extends {PropsWithChildren>} - */ +import { CardBgImageSizes, cardTheme } from './theme' export interface CardProps extends PropsWithChildren> { /** @@ -114,8 +77,7 @@ const CardComponent: FC = ({ imgStyle, ...props }): ReactElement => { - const theme = useTheme().theme.card - + const theme = cardTheme const Component = typeof href === 'undefined' ? 'div' : 'a' const theirProps = props as object return ( diff --git a/app/src/components/Card/CardDescription.tsx b/app/src/components/Card/CardDescription.tsx index 3b519c6f..472ccd44 100644 --- a/app/src/components/Card/CardDescription.tsx +++ b/app/src/components/Card/CardDescription.tsx @@ -1,6 +1,6 @@ import type { FC, ReactNode } from 'react' import { cn } from '../../helpers/cn' -import { useTheme } from '../../Keep/ThemeContext' +import { cardTheme } from './theme' /** * Props for the CardDescription component. @@ -23,6 +23,6 @@ export interface CardDescriptionProps { } export const CardDescription: FC = ({ children, className }) => { - const theme = useTheme().theme.card.description - return

    {children}

    + const theme = cardTheme + return

    {children}

    } diff --git a/app/src/components/Card/theme.ts b/app/src/components/Card/theme.ts index 61895e81..72f03714 100644 --- a/app/src/components/Card/theme.ts +++ b/app/src/components/Card/theme.ts @@ -1,4 +1,34 @@ -import type { KeepCardTheme } from '.' +import { KeepBoolean, KeepSizes } from '../../Keep/KeepTheme' + +export interface KeepCardTheme { + base: string + children: string + shadow: KeepBoolean + border: KeepBoolean + horizontal: { + off: string + on: string + } + href: string + img: { + base: string + horizontal: { + off: { + base: string + size: CardBgImageSizes + } + on: { + base: string + size: CardBgImageSizes + } + } + } + description: string +} + +export interface CardBgImageSizes extends Pick { + [key: string]: string +} export const cardTheme: KeepCardTheme = { base: 'flex rounded-md bg-white ', diff --git a/app/src/components/Carousel/Carousel.tsx b/app/src/components/Carousel/Carousel.tsx index 5c1f5f87..66dfcc6b 100644 --- a/app/src/components/Carousel/Carousel.tsx +++ b/app/src/components/Carousel/Carousel.tsx @@ -3,61 +3,8 @@ import type { ComponentProps, FC, PropsWithChildren, ReactElement, ReactNode } f import { Children, cloneElement, useCallback, useEffect, useMemo, useRef, useState } from 'react' import ScrollContainer from 'react-indiana-drag-scroll' import { windowExists } from '../../helpers/window-exists' -import { KeepColors } from '../../Keep/KeepTheme' -import { useTheme } from '../../Keep/ThemeContext' import { cn } from '../../helpers/cn' - -export interface KeepCarouselTheme { - base: string - indicators: { - active: { - off: { - base: string - color: IndicatorsTypeColors - } - on: { - base: string - type: { - dot: string - ring: string - bar: string - square: string - squareRing: string - } - color: IndicatorsTypeColors - } - } - base: string - wrapper: string - type: { - dot: string - ring: string - bar: string - square: string - squareRing: string - } - } - item: { - base: string - wrapper: string - } - control: { - base: string - icon: string - } - leftControl: string - rightControl: string - scrollContainer: { - base: string - snap: string - } -} - -export type IndicatorsType = 'dot' | 'ring' | 'bar' | 'square' | 'squareRing' - -export interface IndicatorsTypeColors extends Pick { - [key: string]: string -} +import { IndicatorsType, IndicatorsTypeColors, carouselTheme } from './theme' /** * Props for the Carousel component. @@ -154,7 +101,7 @@ export const Carousel: FC = ({ const carouselContainer = useRef(null) const [activeItem, setActiveItem] = useState(0) const [isDragging, setIsDragging] = useState(false) - const theme = useTheme().theme.carousel + const theme = carouselTheme const items = useMemo( () => @@ -262,7 +209,7 @@ export const Carousel: FC = ({ } const DefaultLeftControl: FC = () => { - const theme = useTheme().theme.carousel + const theme = carouselTheme return ( @@ -271,7 +218,7 @@ const DefaultLeftControl: FC = () => { } const DefaultRightControl: FC = () => { - const theme = useTheme().theme.carousel + const theme = carouselTheme return ( diff --git a/app/src/components/Carousel/theme.ts b/app/src/components/Carousel/theme.ts index af33dc14..e46cb0ec 100644 --- a/app/src/components/Carousel/theme.ts +++ b/app/src/components/Carousel/theme.ts @@ -1,4 +1,56 @@ -import { KeepCarouselTheme } from '.' +import { KeepColors } from '../../Keep/KeepTheme' + +export interface KeepCarouselTheme { + base: string + indicators: { + active: { + off: { + base: string + color: IndicatorsTypeColors + } + on: { + base: string + type: { + dot: string + ring: string + bar: string + square: string + squareRing: string + } + color: IndicatorsTypeColors + } + } + base: string + wrapper: string + type: { + dot: string + ring: string + bar: string + square: string + squareRing: string + } + } + item: { + base: string + wrapper: string + } + control: { + base: string + icon: string + } + leftControl: string + rightControl: string + scrollContainer: { + base: string + snap: string + } +} + +export type IndicatorsType = 'dot' | 'ring' | 'bar' | 'square' | 'squareRing' + +export interface IndicatorsTypeColors extends Pick { + [key: string]: string +} export const carouselTheme: KeepCarouselTheme = { base: 'relative h-56 sm:h-64 xl:h-80 2xl:h-96', diff --git a/app/src/components/CheckBox/index.tsx b/app/src/components/CheckBox/index.tsx index b13b05ca..ee7208be 100644 --- a/app/src/components/CheckBox/index.tsx +++ b/app/src/components/CheckBox/index.tsx @@ -1,29 +1,9 @@ import { ComponentProps, FC, ReactNode } from 'react' import { excludeClassName } from '../../helpers/exclude' -import { KeepSizes, KeepStateColors } from '../../Keep/KeepTheme' -import { useTheme } from '../../Keep/ThemeContext' +import { KeepStateColors } from '../../Keep/KeepTheme' import { cn } from '../../helpers/cn' +import { CheckboxLabelColors, CheckboxSizes, checkboxTheme } from './theme' -export interface keepCheckboxTheme { - base: string - checkboxInput: string - enabled: string - disabled: string - label: CheckboxSizes - labelColor: CheckboxLabelColors - variant: { - circle: string - square: string - } - size: CheckboxSizes - color: KeepStateColors -} - -/** - * Checkbox component props. - * @interface CheckboxProps - * @extends {Omit, 'className' | 'color' | 'size' | 'type'>} - */ export interface CheckboxProps extends Omit, 'className' | 'color' | 'size' | 'type'> { /** * The label to display next to the checkbox. @@ -103,14 +83,6 @@ export interface CheckboxProps extends Omit, 'className' labelStyle?: string } -export interface CheckboxSizes extends Pick { - [key: string]: string -} - -export interface CheckboxLabelColors extends Pick { - [key: string]: string -} - const CheckboxComponent: FC = ({ color = 'info', labelColor = 'info', @@ -126,7 +98,7 @@ const CheckboxComponent: FC = ({ ...props }) => { const theirProps = excludeClassName(props) - const theme = useTheme().theme.checkbox + const theme = checkboxTheme const handleOnChange = (e: { target: { checked: any } }) => { if (handleChecked) { diff --git a/app/src/components/CheckBox/theme.ts b/app/src/components/CheckBox/theme.ts index 130e0ca3..df635d84 100644 --- a/app/src/components/CheckBox/theme.ts +++ b/app/src/components/CheckBox/theme.ts @@ -1,4 +1,27 @@ -import { keepCheckboxTheme } from '.' +import { KeepSizes, KeepStateColors } from '../../Keep/KeepTheme' + +export interface CheckboxSizes extends Pick { + [key: string]: string +} + +export interface CheckboxLabelColors extends Pick { + [key: string]: string +} + +export interface keepCheckboxTheme { + base: string + checkboxInput: string + enabled: string + disabled: string + label: CheckboxSizes + labelColor: CheckboxLabelColors + variant: { + circle: string + square: string + } + size: CheckboxSizes + color: KeepStateColors +} export const checkboxTheme: keepCheckboxTheme = { checkboxInput: 'opacity-0 peer absolute cursor-pointer', diff --git a/app/src/components/CheckboxGroup/index.tsx b/app/src/components/CheckboxGroup/index.tsx index eef15bf9..d661487f 100644 --- a/app/src/components/CheckboxGroup/index.tsx +++ b/app/src/components/CheckboxGroup/index.tsx @@ -2,72 +2,8 @@ import { cn } from '../../helpers/cn' import type { ChangeEvent, ReactNode } from 'react' import { FC } from 'react' import { Avatar } from '../Avatar/Avatar' -import { useTheme } from '../../Keep/ThemeContext' import { Radio } from '../FormControls/Radio' - -export interface keepCheckboxGroupTheme { - label: { - base: string - iconRight: { - on: string - off: string - } - selected: { - on: string - off: string - } - spacing: string - } - - main: { - order: string - spacing: string - } - root: { - base: string - icon: { - base: string - selected: { - on: string - off: string - } - } - circleImg: { - base: string - selected: { - on: string - off: string - } - } - squareImg: { - base: string - img: string - } - } - textBox: { - spacing: string - order: string - title: { - base: string - selected: { - on: string - off: string - } - } - description: { - base: string - selected: { - on: string - off: string - } - } - } -} - -/** - * Props for the CheckboxGroup component. - * @interface CheckboxGroupProps - */ +import { checkboxGroupTheme } from './theme' interface CheckboxGroupProps { /** @@ -193,7 +129,7 @@ export const CheckboxGroup: FC = ({ descriptionClassName, className, }) => { - const theme = useTheme().theme.checkboxGroup + const theme = checkboxGroupTheme return (
    } diff --git a/app/src/components/Dropdown/DropdownHeader.tsx b/app/src/components/Dropdown/DropdownHeader.tsx index 742fb783..fdff9a31 100644 --- a/app/src/components/Dropdown/DropdownHeader.tsx +++ b/app/src/components/Dropdown/DropdownHeader.tsx @@ -1,19 +1,14 @@ import type { ComponentProps, FC, PropsWithChildren } from 'react' import { DropdownDivider } from './DropdownDivider' -import { useTheme } from '../../Keep/ThemeContext' import { cn } from '../../helpers/cn' - -export interface keepDropdownHeaderTheme { - header: string -} +import { dropdownTheme } from './theme' /** * DropdownHeader component. * @param {PropsWithChildren>} props */ export const DropdownHeader: FC> = ({ children, className, ...props }) => { - const theme = useTheme().theme.dropdown.floating.header - + const theme = dropdownTheme return ( <>
    diff --git a/app/src/components/Dropdown/DropdownItem.tsx b/app/src/components/Dropdown/DropdownItem.tsx index 34abb54a..3cfcd3f9 100644 --- a/app/src/components/Dropdown/DropdownItem.tsx +++ b/app/src/components/Dropdown/DropdownItem.tsx @@ -1,12 +1,7 @@ import { cn } from '../../helpers/cn' -import { useTheme } from '../../Keep/ThemeContext' import { DeepPartial } from '../../helpers/deep-partial' import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react' - -export interface keepDropdownItemTheme { - base: string - icon: string -} +import { dropdownTheme, keepDropdownItemTheme } from './theme' /** * Props for the DropdownItem component. @@ -34,8 +29,7 @@ export interface DropdownItemProps extends PropsWithChildren, ComponentProps<'li } export const DropdownItem: FC = ({ children, className, icon: Icon, onClick, ...props }) => { - const theme = useTheme().theme.dropdown.floating.item - + const theme = dropdownTheme.floating.item return (
  • {Icon && {Icon}} diff --git a/app/src/components/Dropdown/theme.ts b/app/src/components/Dropdown/theme.ts index b0efb5f8..c45ed7f9 100644 --- a/app/src/components/Dropdown/theme.ts +++ b/app/src/components/Dropdown/theme.ts @@ -1,4 +1,30 @@ -import { keepDropdownTheme } from './Dropdown' +import { keepFloatingTheme } from '../Floating' + +export interface keepDropdownDividerTheme { + divider: string +} + +export interface keepDropdownHeaderTheme { + header: string +} + +export interface keepDropdownItemTheme { + base: string + icon: string +} + +export interface keepDropdownFloatingTheme + extends keepFloatingTheme, + keepDropdownDividerTheme, + keepDropdownHeaderTheme { + item: keepDropdownItemTheme +} + +export interface keepDropdownTheme { + floating: keepDropdownFloatingTheme + content: string + arrowIcon: string +} export const dropdownTheme: keepDropdownTheme = { arrowIcon: 'ml-2 h-4 w-4', diff --git a/app/src/components/Empty/Description.tsx b/app/src/components/Empty/Description.tsx index 5a954749..89ed7ab8 100644 --- a/app/src/components/Empty/Description.tsx +++ b/app/src/components/Empty/Description.tsx @@ -1,11 +1,7 @@ 'use client' import { FC, ReactNode } from 'react' import { cn } from '../../helpers/cn' -import { useTheme } from '../../Keep/ThemeContext' - -export interface keepDescriptionTheme { - base: string -} +import { emptyTheme } from './theme' export interface DescriptionProps { className?: string @@ -13,6 +9,6 @@ export interface DescriptionProps { } export const Description: FC = ({ children, className }) => { - const { description } = useTheme().theme.empty + const { description } = emptyTheme return

    {children}

    } diff --git a/app/src/components/Empty/Empty.tsx b/app/src/components/Empty/Empty.tsx index 7f68addc..6e7cc38c 100644 --- a/app/src/components/Empty/Empty.tsx +++ b/app/src/components/Empty/Empty.tsx @@ -1,29 +1,12 @@ 'use client' import { FC, ReactNode } from 'react' - import { Image } from './Image' import { Redirect } from './Redirect' -import { Title, keepTitleTheme } from './Title' -import { Description, keepDescriptionTheme } from './Description' - +import { Title } from './Title' +import { Description } from './Description' import { cn } from '../../helpers/cn' -import { useTheme } from '../../Keep/ThemeContext' - -export interface keepEmptyTheme { - root: RootTheme - title: keepTitleTheme - description: keepDescriptionTheme - redirectBtn: string -} - -interface RootTheme { - base: string -} +import { emptyTheme } from './theme' -/** - * Props for the Empty component. - * @interface EmptyProps - */ interface EmptyProps { /** * The class name of the Empty. @@ -38,7 +21,7 @@ interface EmptyProps { children?: ReactNode } const EmptyComponent: FC = ({ children, className }) => { - const { root } = useTheme().theme.empty + const { root } = emptyTheme return (
    {children} diff --git a/app/src/components/Empty/Redirect.tsx b/app/src/components/Empty/Redirect.tsx index 6df70ae4..5f576a99 100644 --- a/app/src/components/Empty/Redirect.tsx +++ b/app/src/components/Empty/Redirect.tsx @@ -1,7 +1,7 @@ 'use client' import { FC, ReactNode } from 'react' import { cn } from '../../helpers/cn' -import { useTheme } from '../../Keep/ThemeContext' +import { emptyTheme } from './theme' export interface RedirectProps { /** @@ -31,7 +31,7 @@ export interface RedirectProps { } export const Redirect: FC = ({ redirectUrl, buttonText, className, children }) => { - const { redirectBtn } = useTheme().theme.empty + const { redirectBtn } = emptyTheme if (!children) { return ( diff --git a/app/src/components/Empty/Title.tsx b/app/src/components/Empty/Title.tsx index b566a898..519601bd 100644 --- a/app/src/components/Empty/Title.tsx +++ b/app/src/components/Empty/Title.tsx @@ -1,11 +1,7 @@ 'use client' import { FC, ReactNode } from 'react' import { cn } from '../../helpers/cn' -import { useTheme } from '../../Keep/ThemeContext' - -export interface keepTitleTheme { - base: string -} +import { emptyTheme } from './theme' export interface TitleProps { className?: string @@ -13,6 +9,6 @@ export interface TitleProps { } export const Title: FC = ({ children, className }) => { - const { title } = useTheme().theme.empty + const { title } = emptyTheme return

    {children}

    } diff --git a/app/src/components/Empty/theme.ts b/app/src/components/Empty/theme.ts index 16166876..b51977d4 100644 --- a/app/src/components/Empty/theme.ts +++ b/app/src/components/Empty/theme.ts @@ -1,4 +1,21 @@ -import { keepEmptyTheme } from './Empty' +export interface keepEmptyTheme { + root: RootTheme + title: keepTitleTheme + description: keepDescriptionTheme + redirectBtn: string +} + +export interface keepDescriptionTheme { + base: string +} + +export interface keepTitleTheme { + base: string +} + +interface RootTheme { + base: string +} export const emptyTheme: keepEmptyTheme = { root: { diff --git a/app/src/components/FormControls/HelperText.tsx b/app/src/components/FormControls/HelperText.tsx index e1c6c616..60fad491 100644 --- a/app/src/components/FormControls/HelperText.tsx +++ b/app/src/components/FormControls/HelperText.tsx @@ -1,18 +1,7 @@ import type { ComponentProps, FC, PropsWithChildren } from 'react' -import { excludeClassName } from '../../helpers/exclude' -import type { KeepColors } from '../../Keep/KeepTheme' -import { useTheme } from '../../Keep/ThemeContext' import { cn } from '../../helpers/cn' - -export interface keepHelperTextTheme { - base: string - disabled: string - colors: HelperColors -} - -export interface HelperColors extends Pick { - [key: string]: string -} +import { excludeClassName } from '../../helpers/exclude' +import { HelperColors, formControlsTheme } from './theme' /** * Props for the HelperText component. @@ -57,7 +46,7 @@ export const HelperText: FC = ({ className, ...props }) => { - const theme = useTheme().theme.formControls.helperText + const theme = formControlsTheme.helperText const theirProps = excludeClassName(props) return ( diff --git a/app/src/components/FormControls/Label.tsx b/app/src/components/FormControls/Label.tsx index a1243b22..7bbf7754 100644 --- a/app/src/components/FormControls/Label.tsx +++ b/app/src/components/FormControls/Label.tsx @@ -1,19 +1,7 @@ import type { ComponentProps, FC, PropsWithChildren, ReactElement } from 'react' -import { excludeClassName } from '../../helpers/exclude' -import type { KeepStateColors } from '../../Keep/KeepTheme' -import { useTheme } from '../../Keep/ThemeContext' import { cn } from '../../helpers/cn' - -export interface keepLabelTheme { - base: string - colors: LabelColors - disabled: string -} - -export interface LabelColors extends KeepStateColors { - [key: string]: string - default: string -} +import { excludeClassName } from '../../helpers/exclude' +import { LabelColors, formControlsTheme } from './theme' /** * Props for the Label component. @@ -67,7 +55,7 @@ export const Label: FC = ({ className, ...props }): ReactElement => { - const theme = useTheme().theme.formControls.label + const theme = formControlsTheme.label const theirProps = excludeClassName(props) return (
    +
    {icon}
    {onClose && ( diff --git a/app/src/components/Modal/index.tsx b/app/src/components/Modal/index.tsx index 22d19d4c..a5e63341 100644 --- a/app/src/components/Modal/index.tsx +++ b/app/src/components/Modal/index.tsx @@ -1,52 +1,12 @@ import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react' import { useEffect, useState } from 'react' import { createPortal } from 'react-dom' -import { excludeClassName } from '../../helpers/exclude' +import { cn } from '../../helpers/cn' import { ModalBody } from './ModalBody' import { ModalContext } from './ModalContext' import { ModalFooter } from './ModalFooter' import { ModalHeader } from './ModalHeader' -import { KeepBoolean, KeepPositions, KeepSizes } from '../../Keep/KeepTheme' -import { useTheme } from '../../Keep/ThemeContext' -import { cn } from '../../helpers/cn' - -export interface keepModalTheme { - base: string - show: KeepBoolean - content: { - base: string - inner: string - } - body: { - base: string - } - header: { - base: string - title: string - iconSection: string - headerIcon: { - base: string - icon: string - } - close: { - base: string - icon: string - } - } - footer: { - base: string - } - sizes: ModalSizes - positions: ModalPositions -} - -export interface ModalPositions extends KeepPositions { - [key: string]: string -} - -export interface ModalSizes extends Omit { - [key: string]: string -} +import { ModalPositions, ModalSizes, modalTheme } from './theme' /** * Props for the Modal component. @@ -96,20 +56,10 @@ export interface ModalProps extends PropsWithChildren position?: keyof ModalPositions } -const ModalComponent: FC = ({ - children, - show, - root, - icon, - size = 'sm', - position = 'center', - onClose, - ...props -}) => { +const ModalComponent: FC = ({ children, show, root, icon, size = 'sm', position = 'center', onClose }) => { + const theme = modalTheme const [parent, setParent] = useState(root) const [container, setContainer] = useState() - const theme = useTheme().theme.modal - const theirProps = excludeClassName(props) useEffect(() => { if (!parent) setParent(document.body) @@ -137,8 +87,7 @@ const ModalComponent: FC = ({ aria-hidden={!show} className={cn(theme.base, theme.positions[position], show ? theme.show.on : theme.show.off)} data-testid="modal" - role="dialog" - {...theirProps}> + role="dialog">
    {children}
    diff --git a/app/src/components/Modal/theme.ts b/app/src/components/Modal/theme.ts index 6e23cef0..9ab2be68 100644 --- a/app/src/components/Modal/theme.ts +++ b/app/src/components/Modal/theme.ts @@ -1,4 +1,42 @@ -import { keepModalTheme } from '.' +import { KeepSizes, KeepBoolean, KeepPositions } from '../../Keep/KeepTheme' + +export interface keepModalTheme { + base: string + show: KeepBoolean + content: { + base: string + inner: string + } + body: { + base: string + } + header: { + base: string + title: string + iconSection: string + headerIcon: { + base: string + icon: string + } + close: { + base: string + icon: string + } + } + footer: { + base: string + } + sizes: ModalSizes + positions: ModalPositions +} + +export interface ModalPositions extends KeepPositions { + [key: string]: string +} + +export interface ModalSizes extends Omit { + [key: string]: string +} export const modalTheme: keepModalTheme = { base: 'fixed z-[90] inset-0 flex items-center justify-center top-0', diff --git a/app/src/components/Navigation/Navigation.tsx b/app/src/components/Navigation/Navigation.tsx index 50dadba4..44771f9e 100644 --- a/app/src/components/Navigation/Navigation.tsx +++ b/app/src/components/Navigation/Navigation.tsx @@ -1,13 +1,13 @@ import { FC, ReactNode, useState } from 'react' +import { cn } from '../../helpers/cn' import { NavigationBrand } from './NavigationBrand' +import { NavigationCollapse } from './NavigationCollapse' import { NavigationContainer } from './NavigationContainer' -import { DividerTheme, NavigationDivider } from './NavigationDivider' -import { NavLinkTheme, NavigationLink } from './NavigationLink' -import { NavigationToggle } from './NavigationToggle' import { NavigationContext } from './NavigationContext' -import { CollapseTheme, NavigationCollapse } from './NavigationCollapse' -import { useTheme } from '../../Keep/ThemeContext' -import { cn } from '../../helpers/cn' +import { NavigationDivider } from './NavigationDivider' +import { NavigationLink } from './NavigationLink' +import { NavigationToggle } from './NavigationToggle' +import { navigationTheme } from './theme' /** * Props for the Navigation component. @@ -36,32 +36,9 @@ export interface NavigationProps { className?: string } -export interface KeepNavigationTheme { - root: NavigationRoot - collapse: CollapseTheme - divider: DividerTheme - navLink: NavLinkTheme -} - -export interface NavigationRoot { - base: string - rounded: { - on: string - off: string - } - bordered: { - on: string - off: string - } - container: { - on: string - off: string - } -} - const NavigationComponent: FC = ({ fluid, bordered, rounded, children, className }) => { const [isOpen, setIsOpen] = useState(false) - const { root } = useTheme().theme.navigation + const { root } = navigationTheme isOpen && window.addEventListener('scroll', () => { diff --git a/app/src/components/Navigation/NavigationCollapse.tsx b/app/src/components/Navigation/NavigationCollapse.tsx index ebe5b105..0566a029 100644 --- a/app/src/components/Navigation/NavigationCollapse.tsx +++ b/app/src/components/Navigation/NavigationCollapse.tsx @@ -1,8 +1,8 @@ -import { FC, ReactNode } from 'react' -import { useNavigationContext } from './NavigationContext' -import { useTheme } from '../../Keep/ThemeContext' import { CaretLeft } from 'phosphor-react' +import { FC, ReactNode } from 'react' import { cn } from '../../helpers/cn' +import { useNavigationContext } from './NavigationContext' +import { navigationTheme } from './theme' /** * Props for the Collapse component. @@ -25,22 +25,9 @@ export interface CollapseProps { collapseType?: 'sidebar' | 'fullWidth' } -export interface CollapseTheme { - base: string - menu: { - open: string - close: string - position: string - } - type: { - sidebar: string - fullWidth: string - } -} - export const NavigationCollapse: FC = ({ children, className, collapseType = 'fullWidth' }) => { const { isOpen, setIsOpen } = useNavigationContext() - const { collapse } = useTheme().theme.navigation + const { collapse } = navigationTheme return (
    = ({ className }) => { - const { divider } = useTheme().theme.navigation + const { divider } = navigationTheme return
    } diff --git a/app/src/components/Navigation/NavigationLink.tsx b/app/src/components/Navigation/NavigationLink.tsx index b2921ceb..f2427b9c 100644 --- a/app/src/components/Navigation/NavigationLink.tsx +++ b/app/src/components/Navigation/NavigationLink.tsx @@ -1,6 +1,6 @@ import { FC, ReactNode } from 'react' -import { useTheme } from '../../Keep/ThemeContext' import { cn } from '../../helpers/cn' +import { navigationTheme } from './theme' /** * Props for the NavigationLink component. @@ -33,21 +33,8 @@ export interface NavLinkProps { href?: string } -export interface NavLinkTheme { - base: string - icon: { - on: string - off: string - } - linkText: string - iconAnimation: { - on: string - off: string - } -} - export const NavigationLink: FC = ({ icon, iconAnimation = true, linkName, href = '/', className }) => { - const { navLink } = useTheme().theme.navigation + const { navLink } = navigationTheme return (
  • diff --git a/app/src/components/Navigation/NavigationToggle.tsx b/app/src/components/Navigation/NavigationToggle.tsx index 2c34de0d..81c730df 100644 --- a/app/src/components/Navigation/NavigationToggle.tsx +++ b/app/src/components/Navigation/NavigationToggle.tsx @@ -1,7 +1,7 @@ -import { FC, ReactNode } from 'react' import { List, X } from 'phosphor-react' -import { useNavigationContext } from './NavigationContext' +import { FC, ReactNode } from 'react' import { cn } from '../../helpers/cn' +import { useNavigationContext } from './NavigationContext' /** * Props for the NavigationToggle component. diff --git a/app/src/components/Navigation/theme.ts b/app/src/components/Navigation/theme.ts index 8cfabf26..6f63fa19 100644 --- a/app/src/components/Navigation/theme.ts +++ b/app/src/components/Navigation/theme.ts @@ -1,4 +1,55 @@ -import { KeepNavigationTheme } from './Navigation' +interface NavigationRoot { + base: string + rounded: { + on: string + off: string + } + bordered: { + on: string + off: string + } + container: { + on: string + off: string + } +} + +interface CollapseTheme { + base: string + menu: { + open: string + close: string + position: string + } + type: { + sidebar: string + fullWidth: string + } +} + +interface DividerTheme { + base: string +} + +interface NavLinkTheme { + base: string + icon: { + on: string + off: string + } + linkText: string + iconAnimation: { + on: string + off: string + } +} + +export interface KeepNavigationTheme { + root: NavigationRoot + collapse: CollapseTheme + divider: DividerTheme + navLink: NavLinkTheme +} export const navigationTheme: KeepNavigationTheme = { root: { diff --git a/app/src/components/Notification/Avatar.tsx b/app/src/components/Notification/Avatar.tsx index 735ed29b..ce7b00fe 100644 --- a/app/src/components/Notification/Avatar.tsx +++ b/app/src/components/Notification/Avatar.tsx @@ -1,7 +1,6 @@ -'use client' import { FC, ReactNode } from 'react' import { cn } from '../../helpers/cn' -import { useTheme } from '../../Keep/ThemeContext' +import { notificationTheme } from './theme' export interface AvatarProps { children?: ReactNode @@ -9,6 +8,6 @@ export interface AvatarProps { } export const Avatar: FC = ({ children, className }) => { - const { avatar } = useTheme().theme.notification + const { avatar } = notificationTheme return
    {children}
    } diff --git a/app/src/components/Notification/Body.tsx b/app/src/components/Notification/Body.tsx index a4118a60..bc236cba 100644 --- a/app/src/components/Notification/Body.tsx +++ b/app/src/components/Notification/Body.tsx @@ -1,7 +1,6 @@ -'use client' import { FC, ReactNode } from 'react' import { cn } from '../../helpers/cn' -import { useTheme } from '../../Keep/ThemeContext' +import { notificationTheme } from './theme' export interface BodyProps { children?: ReactNode @@ -9,6 +8,6 @@ export interface BodyProps { } export const Body: FC = ({ children, className }) => { - const { body } = useTheme().theme.notification + const { body } = notificationTheme return
    {children}
    } diff --git a/app/src/components/Notification/Container.tsx b/app/src/components/Notification/Container.tsx index be0e7e91..f6de4661 100644 --- a/app/src/components/Notification/Container.tsx +++ b/app/src/components/Notification/Container.tsx @@ -1,4 +1,3 @@ -'use client' import { FC, ReactNode } from 'react' import { cn } from '../../helpers/cn' diff --git a/app/src/components/Notification/Description.tsx b/app/src/components/Notification/Description.tsx index 73ca0358..4862cd9f 100644 --- a/app/src/components/Notification/Description.tsx +++ b/app/src/components/Notification/Description.tsx @@ -1,7 +1,6 @@ -'use client' import { FC, ReactNode } from 'react' import { cn } from '../../helpers/cn' -import { useTheme } from '../../Keep/ThemeContext' +import { notificationTheme } from './theme' export interface DescriptionProps { children?: ReactNode @@ -9,6 +8,6 @@ export interface DescriptionProps { } export const Description: FC = ({ children, className }) => { - const { description } = useTheme().theme.notification + const { description } = notificationTheme return

    {children}

    } diff --git a/app/src/components/Notification/Icon.tsx b/app/src/components/Notification/Icon.tsx index d4ca50c6..fde5805f 100644 --- a/app/src/components/Notification/Icon.tsx +++ b/app/src/components/Notification/Icon.tsx @@ -1,7 +1,6 @@ -'use client' import { FC, ReactNode } from 'react' import { cn } from '../../helpers/cn' -import { useTheme } from '../../Keep/ThemeContext' +import { notificationTheme } from './theme' export interface IconProps { children?: ReactNode @@ -9,6 +8,6 @@ export interface IconProps { } export const Icon: FC = ({ children, className }) => { - const { icon } = useTheme().theme.notification + const { icon } = notificationTheme return
    {children}
    } diff --git a/app/src/components/Notification/Media.tsx b/app/src/components/Notification/Media.tsx index 14831db3..fe80f226 100644 --- a/app/src/components/Notification/Media.tsx +++ b/app/src/components/Notification/Media.tsx @@ -1,4 +1,3 @@ -'use client' import { FC, ReactNode } from 'react' import { cn } from '../../helpers/cn' diff --git a/app/src/components/Notification/Notification.tsx b/app/src/components/Notification/Notification.tsx index cb5e01c6..dc68dfe0 100644 --- a/app/src/components/Notification/Notification.tsx +++ b/app/src/components/Notification/Notification.tsx @@ -1,18 +1,15 @@ 'use client' -import { FC, ReactNode } from 'react' import { X } from 'phosphor-react' - +import { FC, ReactNode } from 'react' +import { cn } from '../../helpers/cn' +import { Avatar } from './Avatar' import { Body } from './Body' +import { Container } from './Container' +import { Description } from './Description' import { Icon } from './Icon' import { Media } from './Media' import { Title } from './Title' -import { Avatar } from './Avatar' -import { Container } from './Container' -import { Description } from './Description' - -import { cn } from '../../helpers/cn' - -import { useTheme } from '../../Keep/ThemeContext' +import { notificationTheme } from './theme' /** * Props for the Notification component. @@ -52,25 +49,6 @@ export interface NotificationProps { dismiss?: boolean } -export interface keepNotificationTheme { - root: string - position: { - show: string - hidden: string - 'top-left': string - 'top-right': string - 'bottom-left': string - 'bottom-right': string - } - crossBtn: string - description: string - media: string - icon: string - body: string - avatar: string - title: string -} - const NotificationComponent: FC = ({ className, children, @@ -78,7 +56,7 @@ const NotificationComponent: FC = ({ dismiss = false, onDismiss, }) => { - const { root, crossBtn, position: positionStyle } = useTheme().theme.notification + const { root, crossBtn, position: positionStyle } = notificationTheme return (
    diff --git a/app/src/components/Notification/Title.tsx b/app/src/components/Notification/Title.tsx index 2c4d780d..6e9ee47b 100644 --- a/app/src/components/Notification/Title.tsx +++ b/app/src/components/Notification/Title.tsx @@ -1,7 +1,7 @@ 'use client' import { FC, ReactNode } from 'react' import { cn } from '../../helpers/cn' -import { useTheme } from '../../Keep/ThemeContext' +import { notificationTheme } from './theme' export interface TitleProps { children?: ReactNode @@ -9,6 +9,6 @@ export interface TitleProps { } export const Title: FC = ({ children, className }) => { - const { title } = useTheme().theme.notification + const { title } = notificationTheme return

    {children}

    } diff --git a/app/src/components/Notification/theme.ts b/app/src/components/Notification/theme.ts index f41cc5e4..d3d2575f 100644 --- a/app/src/components/Notification/theme.ts +++ b/app/src/components/Notification/theme.ts @@ -1,4 +1,21 @@ -import { keepNotificationTheme } from './Notification' +export interface keepNotificationTheme { + root: string + position: { + show: string + hidden: string + 'top-left': string + 'top-right': string + 'bottom-left': string + 'bottom-right': string + } + crossBtn: string + description: string + media: string + icon: string + body: string + avatar: string + title: string +} export const notificationTheme: keepNotificationTheme = { root: 'relative max-w-sm overflow-hidden rounded-xl bg-white pb-5 pl-[30px] pr-4 pt-5 shadow-large', diff --git a/app/src/components/Pagination/index.tsx b/app/src/components/Pagination/index.tsx index 44ac0d2f..c836694e 100644 --- a/app/src/components/Pagination/index.tsx +++ b/app/src/components/Pagination/index.tsx @@ -1,63 +1,10 @@ -import { useState } from 'react' import { ArrowLeft, ArrowRight } from 'phosphor-react' import type { ComponentProps, FC, PropsWithChildren, ReactElement } from 'react' +import { useState } from 'react' +import { cn } from '../../helpers/cn' import { excludeClassName } from '../../helpers/exclude' -import { useTheme } from '../../Keep/ThemeContext' import { paginationGenerator } from '../../helpers/rangeWithDots' -import { cn } from '../../helpers/cn' - -export interface keepPaginationTheme { - paginateWithBorder: string - layout: { - table: { - base: string - span: string - } - } - pages: { - base: string - previous: { - base: string - icon: string - title: string - iconWithText: string - iconWithOutText: string - } - next: { - base: string - icon: string - title: string - iconWithText: string - iconWithOutText: string - } - selector: { - base: string - active: { - base: string - circle: string - roundSquare: string - } - } - prevNextShape: { - none: string - circle: string - round: string - roundSquare: string - } - } - goTo: { - base: string - title: string - input: string - withBorder: string - goToShape: { - none: string - circle: string - round: string - roundSquare: string - } - } -} +import { paginationTheme } from './theme' export type PaginationProps = PropsWithChildren @@ -164,7 +111,7 @@ export const Pagination: FC = ({ const firstPage = Math.max(1, currentPage - 4) const lastPage = Math.min(currentPage + 4, totalPages) - const theme = useTheme().theme.pagination + const theme = paginationTheme const theirProps = excludeClassName(props) const goToNextPage = (): void => { diff --git a/app/src/components/Pagination/theme.ts b/app/src/components/Pagination/theme.ts index d27bbc9f..26b904dd 100644 --- a/app/src/components/Pagination/theme.ts +++ b/app/src/components/Pagination/theme.ts @@ -1,4 +1,55 @@ -import { keepPaginationTheme } from '.' +export interface keepPaginationTheme { + paginateWithBorder: string + layout: { + table: { + base: string + span: string + } + } + pages: { + base: string + previous: { + base: string + icon: string + title: string + iconWithText: string + iconWithOutText: string + } + next: { + base: string + icon: string + title: string + iconWithText: string + iconWithOutText: string + } + selector: { + base: string + active: { + base: string + circle: string + roundSquare: string + } + } + prevNextShape: { + none: string + circle: string + round: string + roundSquare: string + } + } + goTo: { + base: string + title: string + input: string + withBorder: string + goToShape: { + none: string + circle: string + round: string + roundSquare: string + } + } +} export const paginationTheme: keepPaginationTheme = { paginateWithBorder: 'p-2 border border-metal-200 rounded-md', diff --git a/app/src/components/Popover/Container.tsx b/app/src/components/Popover/Container.tsx index 4d4ff67e..76c729ff 100644 --- a/app/src/components/Popover/Container.tsx +++ b/app/src/components/Popover/Container.tsx @@ -1,7 +1,7 @@ 'use client' import { FC, ReactNode } from 'react' -import { useTheme } from '../../Keep/ThemeContext' import { cn } from '../../helpers/cn' +import { popoverTheme } from './theme' export interface PopoverContainerProps { children?: ReactNode @@ -10,7 +10,7 @@ export interface PopoverContainerProps { } export const Container: FC = ({ children, className, ...props }) => { - const { container } = useTheme().theme.popover + const { container } = popoverTheme return (
    {children} diff --git a/app/src/components/Popover/Description.tsx b/app/src/components/Popover/Description.tsx index 49fc5cc9..3a4cbfb2 100644 --- a/app/src/components/Popover/Description.tsx +++ b/app/src/components/Popover/Description.tsx @@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react' import { cn } from '../../helpers/cn' import { usePopoverContext } from './PopoverContext' -import { useTheme } from '../../Keep/ThemeContext' +import { popoverTheme } from './theme' export interface PopoverDescriptionProps { children?: ReactNode @@ -12,7 +12,7 @@ export interface PopoverDescriptionProps { export const Description: FC = ({ children, className, ...props }) => { const { isTitleExist } = usePopoverContext() - const { description } = useTheme().theme.popover + const { description } = popoverTheme return (

    = ({ children, className, @@ -117,7 +101,7 @@ export const PopoverComponent: FC = ({ const [isOpen, setIsOpen] = useState(false) const [title, setTitle] = useState(true) const arrowRef = useRef(null) - const { root } = useTheme().theme.popover + const { root } = popoverTheme const { refs, floatingStyles, context } = useFloating({ open: isOpen, onOpenChange: setIsOpen, diff --git a/app/src/components/Popover/Title.tsx b/app/src/components/Popover/Title.tsx index eac53901..7eb1bf9d 100644 --- a/app/src/components/Popover/Title.tsx +++ b/app/src/components/Popover/Title.tsx @@ -1,7 +1,7 @@ 'use client' import { FC, ReactNode } from 'react' -import { useTheme } from '../../Keep/ThemeContext' import { cn } from '../../helpers/cn' +import { popoverTheme } from './theme' export interface PopoverTitleProps { children?: ReactNode @@ -10,7 +10,7 @@ export interface PopoverTitleProps { } export const Title: FC = ({ children, className, ...props }) => { - const { title } = useTheme().theme.popover + const { title } = popoverTheme return (

    {children} diff --git a/app/src/components/Popover/theme.ts b/app/src/components/Popover/theme.ts index 9da0f79e..105044c7 100644 --- a/app/src/components/Popover/theme.ts +++ b/app/src/components/Popover/theme.ts @@ -1,4 +1,18 @@ -import { keepPopoverTheme } from './Popover' +interface keepPopoverTheme { + root: { + base: string + icon: string + } + title: string + description: { + base: string + title: { + off: string + on: string + } + } + container: string +} export const popoverTheme: keepPopoverTheme = { root: { diff --git a/app/src/components/Progress/index.tsx b/app/src/components/Progress/index.tsx index e879eb48..78f412b9 100644 --- a/app/src/components/Progress/index.tsx +++ b/app/src/components/Progress/index.tsx @@ -1,38 +1,7 @@ -import { KeepBoolean, KeepColors, KeepSizes } from '../../Keep/KeepTheme' -import { useTheme } from '../../Keep/ThemeContext' import type { ComponentProps, FC, PropsWithChildren, ReactElement } from 'react' import { cn } from '../../helpers/cn' +import { ProgressSizes, progressTheme } from './theme' -export interface keepProgressTheme { - base: string - label: string - progressBar: { - base: string - bar: string - rounded: KeepBoolean - bordered: { - on: { - base: string - color: ProgressColor - } - off: string - } - progressPercentage: { - base: string - color: ProgressColor - } - popupLabelProgress: string - progressBaseColor: ProgressColor - progressPercentageColor: ProgressColor - } - size: ProgressSizes -} - -/** - * Props for the Progress component. - * @interface ProgressProps - * @extends PropsWithChildren> - */ export interface ProgressProps extends PropsWithChildren> { /** * The size of the progress component. @@ -68,19 +37,6 @@ export interface ProgressProps extends PropsWithChildren> progress: number } -export interface ProgressColor - extends Pick { - [key: string]: string -} -/** - * Interface for defining the sizes of the Progress component. - * @interface ProgressSizes - * @extends Pick - */ -export interface ProgressSizes extends Pick { - [key: string]: string -} - export const Progress: FC = ({ color = 'blue', label = 'progressbar', @@ -94,7 +50,7 @@ export const Progress: FC = ({ className, ...props }): ReactElement => { - const theme = useTheme().theme.progress + const theme = progressTheme return ( <> diff --git a/app/src/components/Progress/theme.ts b/app/src/components/Progress/theme.ts index e6eef3f9..b2c633cd 100644 --- a/app/src/components/Progress/theme.ts +++ b/app/src/components/Progress/theme.ts @@ -1,4 +1,37 @@ -import type { keepProgressTheme } from '.' +import { KeepBoolean, KeepColors, KeepSizes } from '../../Keep/KeepTheme' + +interface ProgressColor extends Pick { + [key: string]: string +} + +export interface ProgressSizes extends Pick { + [key: string]: string +} + +interface keepProgressTheme { + base: string + label: string + progressBar: { + base: string + bar: string + rounded: KeepBoolean + bordered: { + on: { + base: string + color: ProgressColor + } + off: string + } + progressPercentage: { + base: string + color: ProgressColor + } + popupLabelProgress: string + progressBaseColor: ProgressColor + progressPercentageColor: ProgressColor + } + size: ProgressSizes +} export const progressTheme: keepProgressTheme = { base: 'flex items-center', diff --git a/app/src/components/Rating/RatingAdvanced.tsx b/app/src/components/Rating/RatingAdvanced.tsx index bb55540a..ce84c17c 100644 --- a/app/src/components/Rating/RatingAdvanced.tsx +++ b/app/src/components/Rating/RatingAdvanced.tsx @@ -1,30 +1,12 @@ -import { KeepSizes } from '../../Keep/KeepTheme' -import { useTheme } from '../../Keep/ThemeContext' import type { ComponentProps, FC, PropsWithChildren } from 'react' import { cn } from '../../helpers/cn' +import { RatingAdvancedSizes, ratingTheme } from './theme' -/** - * Props for the RatingAdvanced component. - * @interface RatingAdvancedProps - * @extends {PropsWithChildren>} - */ export interface RatingAdvancedProps extends PropsWithChildren> { - /** - * The percentage of the rating that should be filled. - */ percentFilled?: number - - /** - * The size of the rating. - * Options: 'sm', 'md', 'lg' - */ size?: keyof RatingAdvancedSizes } -export interface RatingAdvancedSizes extends Pick { - [key: string]: string -} - export const RatingAdvanced: FC = ({ percentFilled = 0, size = 'sm', @@ -32,7 +14,7 @@ export const RatingAdvanced: FC = ({ className, ...props }) => { - const theme = useTheme().theme.rating.advanced + const theme = ratingTheme.advanced return (
    diff --git a/app/src/components/Rating/RatingStar.tsx b/app/src/components/Rating/RatingStar.tsx index 7ed30427..8359a43c 100644 --- a/app/src/components/Rating/RatingStar.tsx +++ b/app/src/components/Rating/RatingStar.tsx @@ -1,8 +1,8 @@ import { Star, StarHalf } from 'phosphor-react' import type { FC, ReactNode } from 'react' -import { useRatingContext } from './RatingContext' -import { useTheme } from '../../Keep/ThemeContext' import { cn } from '../../helpers/cn' +import { useRatingContext } from './RatingContext' +import { ratingTheme } from './theme' /** * Props for the RatingStar component. @@ -44,7 +44,7 @@ export const RatingStar: FC = ({ starIcon: Icon, className, }) => { - const theme = useTheme().theme.rating.star + const theme = ratingTheme.star const { size = 24 } = useRatingContext() Icon = diff --git a/app/src/components/Rating/index.tsx b/app/src/components/Rating/index.tsx index e40627c3..44f0d6ac 100644 --- a/app/src/components/Rating/index.tsx +++ b/app/src/components/Rating/index.tsx @@ -1,41 +1,16 @@ import type { ComponentProps, FC, PropsWithChildren } from 'react' -import { RatingAdvanced, RatingAdvancedSizes } from './RatingAdvanced' +import { cn } from '../../helpers/cn' +import { RatingAdvanced } from './RatingAdvanced' import { RatingContext } from './RatingContext' import { RatingStar } from './RatingStar' -import { useTheme } from '../../Keep/ThemeContext' -import { cn } from '../../helpers/cn' - -export interface keepRatingTheme { - base: string - star: { - base: string - } - advanced: { - base: string - label: string - progress: { - base: string - fill: string - label: string - size: RatingAdvancedSizes - } - } -} +import { ratingTheme } from './theme' -/** - * Props for the Rating component. - * @interface RatingProps - * @extends {PropsWithChildren>} - */ export interface RatingProps extends PropsWithChildren> { - /** - * The size of the rating. - */ size?: number } const RatingComponent: FC = ({ children, size, className, ...props }) => { - const theme = useTheme().theme.rating + const theme = ratingTheme return ( diff --git a/app/src/components/Rating/theme.ts b/app/src/components/Rating/theme.ts index b2b62ae9..33a3286f 100644 --- a/app/src/components/Rating/theme.ts +++ b/app/src/components/Rating/theme.ts @@ -1,4 +1,25 @@ -import type { keepRatingTheme } from '.' +import { KeepSizes } from '../../Keep/KeepTheme' + +export interface RatingAdvancedSizes extends Pick { + [key: string]: string +} + +interface keepRatingTheme { + base: string + star: { + base: string + } + advanced: { + base: string + label: string + progress: { + base: string + fill: string + label: string + size: RatingAdvancedSizes + } + } +} export const ratingTheme: keepRatingTheme = { base: 'flex items-center', diff --git a/app/src/components/SearchBar/index.tsx b/app/src/components/SearchBar/index.tsx index 79880f60..138fb3e5 100644 --- a/app/src/components/SearchBar/index.tsx +++ b/app/src/components/SearchBar/index.tsx @@ -1,5 +1,6 @@ import { ChangeEvent, FC, ReactNode } from 'react' -import { TextInput, TextInputColors, TextInputSizes } from '../FormControls/TextInput' +import { TextInput } from '../FormControls/TextInput' +import { TextInputColors, TextInputSizes } from '../FormControls/theme' /** * Props for the SearchBar component. diff --git a/app/src/components/Sidebar/SidebarCTA.tsx b/app/src/components/Sidebar/SidebarCTA.tsx index 81e477f8..7cfcb7c7 100644 --- a/app/src/components/Sidebar/SidebarCTA.tsx +++ b/app/src/components/Sidebar/SidebarCTA.tsx @@ -1,15 +1,8 @@ import type { ComponentProps, FC, PropsWithChildren } from 'react' +import { cn } from '../../helpers/cn' import type { DeepPartial } from '../../helpers/deep-partial' - import { useSidebarContext } from './SidebarContext' -import { KeepColors } from '../../Keep/KeepTheme' -import { useTheme } from '../../Keep/ThemeContext' -import { cn } from '../../helpers/cn' - -export interface KeepSidebarCTATheme { - base: string - color: KeepSidebarCTAColors -} +import { KeepSidebarCTAColors, KeepSidebarCTATheme, sidebarTheme } from './theme' /** * Props for the SidebarCTA component. @@ -28,17 +21,9 @@ export interface SidebarCTAProps extends PropsWithChildren, Omit } -export interface KeepSidebarCTAColors - extends Pick< - KeepColors, - 'blue' | 'dark' | 'failure' | 'gray' | 'green' | 'light' | 'purple' | 'red' | 'success' | 'warning' | 'yellow' - > { - [key: string]: string -} - export const SidebarCTA: FC = ({ children, color = 'info', className, ...props }) => { const { isCollapsed } = useSidebarContext() - const theme = useTheme().theme.sidebar.cta + const theme = sidebarTheme.cta return (
    = ({ icon: Icon, label, open = false, - theme: customTheme = {}, ...props }) => { const id = useId() const { isCollapsed } = useSidebarContext() const [isOpen, setOpen] = useState(open) - const oldTheme = useTheme().theme.sidebar.collapse - const theme = mergeDeep(oldTheme, customTheme) + const theme = sidebarTheme.collapse useEffect(() => setOpen(open), [open]) diff --git a/app/src/components/Sidebar/SidebarItem.tsx b/app/src/components/Sidebar/SidebarItem.tsx index 17d307c7..fbac764d 100644 --- a/app/src/components/Sidebar/SidebarItem.tsx +++ b/app/src/components/Sidebar/SidebarItem.tsx @@ -1,31 +1,14 @@ import type { ComponentProps, ElementType, FC, PropsWithChildren, ReactNode } from 'react' -import type { DeepPartial } from '../../helpers/deep-partial' import { forwardRef, useId } from 'react' -import { Tooltip } from '../Tooltip' -import { useSidebarContext } from './SidebarContext' -import { useSidebarItemContext } from './SidebarItemContext' import { KeepColors } from '../../Keep/KeepTheme' -import { useTheme } from '../../Keep/ThemeContext' +import { cn } from '../../helpers/cn' +import type { DeepPartial } from '../../helpers/deep-partial' import { mergeDeep } from '../../helpers/mergeDeep' import { Badge } from '../Badge' -import { cn } from '../../helpers/cn' - -export interface KeepSidebarItemTheme { - active: string - base: string - collapsed: { - insideCollapse: string - noIcon: string - } - content: { - base: string - } - icon: { - base: string - active: string - } - label: string -} +import { Tooltip } from '../Tooltip' +import { useSidebarContext } from './SidebarContext' +import { useSidebarItemContext } from './SidebarItemContext' +import { KeepSidebarItemTheme, sidebarTheme } from './theme' /** * Props for the SidebarItem component. @@ -109,7 +92,7 @@ const TooltipContent: FC> = ({ id, children }) ) const Children: FC> = ({ id, children }) => { - const theme = useTheme().theme.sidebar.item + const theme = sidebarTheme.item return ( @@ -136,7 +119,7 @@ export const SidebarItem = forwardRef( const id = useId() const { isCollapsed } = useSidebarContext() const { isInsideCollapse } = useSidebarItemContext() - const oldTheme = useTheme().theme.sidebar.item + const oldTheme = sidebarTheme.item const theme = mergeDeep(oldTheme, customTheme) return ( diff --git a/app/src/components/Sidebar/SidebarItemGroup.tsx b/app/src/components/Sidebar/SidebarItemGroup.tsx index 5146c41e..5b509b2e 100644 --- a/app/src/components/Sidebar/SidebarItemGroup.tsx +++ b/app/src/components/Sidebar/SidebarItemGroup.tsx @@ -1,7 +1,7 @@ import type { ComponentProps, FC, PropsWithChildren } from 'react' -import { SidebarItemContext } from './SidebarItemContext' -import { useTheme } from '../../Keep/ThemeContext' import { cn } from '../../helpers/cn' +import { SidebarItemContext } from './SidebarItemContext' +import { sidebarTheme } from './theme' export interface SidebarItemGroupProps extends PropsWithChildren, ComponentProps<'ul'> {} @@ -11,7 +11,7 @@ export const SidebarItemGroup: FC = ({ ...props }) => { - const theme = useTheme().theme.sidebar.itemGroup + const theme = sidebarTheme.itemGroup return ( - diff --git a/app/docs/components/table/variant/TransactionsTable.tsx b/app/docs/components/table/variant/TransactionsTable.tsx index 9b35b4af..18eb0eb1 100644 --- a/app/docs/components/table/variant/TransactionsTable.tsx +++ b/app/docs/components/table/variant/TransactionsTable.tsx @@ -1,7 +1,7 @@ 'use client' +import { ArrowsDownUp, Crown, Cube } from 'phosphor-react' import { TransactionsTableData } from '~/public/data/tableData' import { Avatar, Badge, Button, Table } from '../../../../src' -import { ArrowsDownUp, Crown, Cube } from 'phosphor-react' import TableActionBtn from './TableActionBtn' const TransactionsTable = () => { @@ -54,7 +54,7 @@ const TransactionsTable = () => {
    - +

    {cell.name}

    {cell.tag} @@ -149,7 +149,7 @@ export const TableComponent = () => {
    - +

    Paypal

    Withdraw diff --git a/app/new/Avatar/Avatar.tsx b/app/new/Avatar/Avatar.tsx index 2ad0b06d..0de11ef4 100644 --- a/app/new/Avatar/Avatar.tsx +++ b/app/new/Avatar/Avatar.tsx @@ -1,28 +1,186 @@ import { FC } from 'react' import { cn } from '~/app/src/helpers/cn' +import { Counter } from './Counter' +import { Group } from './Group' +import { Verify } from './Verify' interface AvatarProps { imgUrl?: string alt?: string - size?: 'xs' | 'sm' | 'md' | 'lg' + size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' + color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' shape?: 'circle' | 'rounded' verified?: boolean + active?: boolean + className?: string } -const avatarTheme = { +export const avatarTheme = { + base: 'border', + color: { + primary: 'border-primary-200 text-primary-500', + secondary: 'border-secondary-200 text-secondary-100', + success: 'border-success-100 text-success-500', + warning: 'border-warning-100 text-warning-500', + error: 'border-error-100 text-error-500', + }, size: { - xs: 'h-6 w-6', - sm: 'h-8 w-8', - md: 'h-10 w-10', - lg: 'h-14 w-14', + sm: 'h-6 w-6', + md: 'h-8 w-8', + lg: 'h-10 w-10', + xl: 'h-14 w-14', + '2xl': 'h-16 w-16', }, shape: { circle: 'rounded-full', rounded: 'rounded-md', }, + svgIcon: { + xs: 'h-3 w-3 fill-current', + sm: 'h-3 w-3 fill-current', + md: 'h-4 w-4 fill-current', + lg: 'h-5 w-5 fill-current', + xl: 'h-6 w-6 fill-current', + '2xl': 'h-7 w-7 fill-current', + }, + activeIcon: { + base: 'before:absolute before:rounded-full before:border before:content-[""]', + color: { + primary: 'before:bg-primary-500 before:border-primary-200', + secondary: 'before:bg-metal-500 before:border-metal-200', + success: 'before:bg-success-500 before:border-success-200', + warning: 'before:bg-warning-500 before:border-warning-200', + error: 'before:bg-error-500 before:border-error-200', + }, + size: { + rounded: { + sm: 'before:bottom-0 before:right-0 before:h-1.5 before:w-1.5', + md: 'before:bottom-0 before:right-0 before:h-2 before:w-2', + lg: 'before:bottom-0 before:right-0 before:h-2 before:w-2', + xl: 'before:bottom-0.5 before:right-0.5 before:h-2 before:w-2', + '2xl': 'before:bottom-0 before:right-0 before:h-2.5 before:w-2.5', + }, + circle: { + sm: 'before:bottom-0 before:right-0 before:h-1.5 before:w-1.5', + md: 'before:bottom-0 before:right-0 before:h-2 before:w-2', + lg: 'before:bottom-0.5 before:right-0.5 before:h-2 before:w-2', + xl: 'before:bottom-1 before:right-1 before:h-2 before:w-2', + '2xl': 'before:bottom-1 before:right-1 before:h-2.5 before:w-2.5', + }, + }, + }, + verifyIcon: { + base: 'absolute', + position: { + circle: { + sm: '-right-1.5 -top-1.5', + md: '-right-1 -top-1', + lg: '-right-1 -top-1', + xl: '-right-0.5 -top-0.5', + '2xl': '-right-0.5 -top-0.5', + }, + rounded: { + sm: '-right-1.5 -top-1.5', + md: '-right-1.5 -top-1.5 ', + lg: '-right-2 -top-2', + xl: '-right-2 -top-2', + '2xl': '-right-2 -top-2', + }, + }, + size: { + sm: 'h-4 w-4', + md: 'h-4 w-4', + lg: 'h-[18px] w-[18px]', + xl: 'h-5 w-5', + '2xl': 'h-6 w-6', + }, + color: { + primary: '#1B4DFF', + secondary: '#2D3643', + success: '#11A75C', + warning: '#FFC700', + error: '#FF3838', + }, + }, } +const AvatarComponent: FC = ({ + imgUrl, + alt = 'avatar', + size = 'xl', + shape = 'circle', + color = 'success', + active = false, + verified = false, + className, +}) => { + if (!imgUrl) { + return ( +
    + + + + + {verified && ( +
    + + + + + +
    + )} +
    + ) + } -export const Avatar: FC = ({ imgUrl, alt, size = 'md' }) => { - console.log(size) - return {alt} + return ( +
    + {alt} + {verified && ( + + )} +
    + ) } + +Group.displayName = 'Avatar.Group' +Counter.displayName = 'Avatar.Counter' +export const Avatar = Object.assign(AvatarComponent, { + Group, + Counter, +}) diff --git a/app/new/Avatar/Counter.tsx b/app/new/Avatar/Counter.tsx new file mode 100644 index 00000000..1064055f --- /dev/null +++ b/app/new/Avatar/Counter.tsx @@ -0,0 +1,22 @@ +import { FC, ReactNode } from 'react' +import { cn } from '~/app/src/helpers/cn' +import { avatarTheme } from './Avatar' + +export interface CounterProps { + children?: ReactNode + className?: string + size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' +} + +export const Counter: FC = ({ children, className, size = 'xl' }) => { + return ( +
    + {children} +
    + ) +} diff --git a/app/new/Avatar/Group.tsx b/app/new/Avatar/Group.tsx index e69de29b..fe8b8921 100644 --- a/app/new/Avatar/Group.tsx +++ b/app/new/Avatar/Group.tsx @@ -0,0 +1,9 @@ +import { FC, ReactNode } from 'react' + +interface GroupProps { + children?: ReactNode +} + +export const Group: FC = ({ children }) => { + return
    {children}
    +} diff --git a/app/new/Avatar/Verify.tsx b/app/new/Avatar/Verify.tsx new file mode 100644 index 00000000..2e7abc9f --- /dev/null +++ b/app/new/Avatar/Verify.tsx @@ -0,0 +1,41 @@ +import { FC, ReactNode } from 'react' +import { cn } from '~/app/src/helpers/cn' +import { avatarTheme } from './Avatar' + +export interface VerifyProps { + children?: ReactNode + className?: string + size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' + position?: string + color?: string +} + +export const Verify: FC = ({ children, className, size = 'md', position, color }) => { + return ( +
    + {children ? ( + children + ) : ( + + + + + + )} +
    + ) +} diff --git a/app/new/page.tsx b/app/new/page.tsx index e081a81f..f470fa6c 100644 --- a/app/new/page.tsx +++ b/app/new/page.tsx @@ -1,22 +1,25 @@ -'use client' - -import { Slider } from '../src' +import { Avatar } from './Avatar' const Page = () => { return ( -
    +

    Server component

    -
    - console.log(value)} - step={100} - tooltip="bottom" - /> +
    + + + + +
    + + + + + + + +99 +
    ) diff --git a/app/page.tsx b/app/page.tsx index b3feb4a5..eb8d182e 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,7 +1,7 @@ 'use client' +import Image from 'next/image' import Link from 'next/link' import { ArrowUpRight, Check, Clipboard } from 'phosphor-react' -import Image from 'next/image' import { useEffect, useState } from 'react' import useCopy from '../hooks/useCopy' import { ComponentList } from '../routes/routes' @@ -125,9 +125,7 @@ const Community = () => {
    - {contributors?.map((user) => ( - - ))} + {contributors?.map((user) => )}

    Join the community diff --git a/app/src/components/Avatar/Avatar.stories.tsx b/app/src/components/Avatar/Avatar.stories.tsx deleted file mode 100644 index fb9db1fe..00000000 --- a/app/src/components/Avatar/Avatar.stories.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' -import { Avatar } from './Avatar' - -const meta: Meta = { - component: Avatar, - tags: ['autodocs'], - argTypes: { - size: { - control: 'select', - options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'], - description: 'Specifies the size of the avatar', - - table: { - type: { summary: 'string' }, - defaultValue: { summary: 'xl' }, - }, - }, - totalNotification: { - table: { - type: { summary: 'The total number of notifications to be displayed.' }, - defaultValue: { summary: '99' }, - }, - }, - alt: { - description: 'Alternative text for the avatar image.', - }, - statusPosition: { - control: 'select', - options: ['bottom-left', 'bottom-right', 'top-left', 'top-right'], - table: { - type: { summary: 'Specifies the position of the status indicator.' }, - defaultValue: { summary: 'top-right' }, - }, - }, - statusType: { - description: 'Specifies the type of status.', - control: 'select', - options: ['dot', 'notification'], - table: { - defaultValue: { summary: 'dot' }, - }, - }, - children: { - description: 'It define text about the avatar', - defaultValue: 'avatar', - type: 'string', - }, - shape: { - description: 'Determines the shape of the avatar.', - control: 'select', - options: ['circle', 'rounded', 'square'], - table: { - defaultValue: { summary: 'square' }, - }, - }, - status: { - description: "Reflects the user's availability status.", - control: 'select', - options: ['away', 'busy', 'offline', 'online'], - table: { - defaultValue: { summary: 'online' }, - }, - }, - stacked: { - description: 'Specifies if avatars should be stacked together.', - }, - img: { - description: "Path to the user's image to be displayed in the avatar.", - }, - bordered: { - description: 'Determines if the avatar has a border.', - }, - }, - decorators: [ - (Story) => ( -
    - -
    - ), - ], -} - -export default meta -type Story = StoryObj - -export const DefaultAvatar: Story = { - args: { - size: 'xl', - shape: 'square', - status: 'online', - statusType: 'dot', - statusPosition: 'top-left', - img: '', - totalNotification: 99, - stacked: false, - alt: 'avatar', - bordered: false, - children: '', - }, -} - -export const RoundedAvatar: Story = { - args: { - shape: 'circle', - size: 'xl', - }, -} - -export const AvatarWithDot: Story = { - args: { - ...RoundedAvatar.args, - statusType: 'dot', - statusPosition: 'top-left', - status: 'away', - }, -} - -export const AvatarWithImg: Story = { - args: { - ...RoundedAvatar.args, - alt: 'user', - img: 'https://randomuser.me/api/portraits/women/11.jpg', - }, -} - -export const AvatarWithNotification: Story = { - args: { - ...RoundedAvatar.args, - alt: 'user', - img: 'https://randomuser.me/api/portraits/women/11.jpg', - statusType: 'notification', - totalNotification: 99, - statusPosition: 'top-right', - status: 'away', - }, -} diff --git a/app/src/components/Avatar/Avatar.tsx b/app/src/components/Avatar/Avatar.tsx index ad1acdc8..8063ca0c 100644 --- a/app/src/components/Avatar/Avatar.tsx +++ b/app/src/components/Avatar/Avatar.tsx @@ -1,196 +1,186 @@ -/** - * Renders an avatar component with optional image, shape, size, and status. - * @param {AvatarProps} props - The props object containing optional alt text, bordered, children, img, shape, size, stacked, status, statusType, statusPosition, and totalNotification. - * @returns {ReactElement} - The rendered Avatar component. - * @see https://react.keepdesign.io/docs/components/avatar - */ - -import type { ComponentProps, FC, PropsWithChildren } from 'react' -import { excludeClassName } from '../../helpers/exclude' -import { AvatarAdd } from './AvatarAdd' -import { AvatarGroup } from './AvatarGroup' -import { AvatarGroupCounter } from './AvatarGroupCounter' +import { FC } from 'react' import { cn } from '../../helpers/cn' -import { AvatarSizes, KeepAvatarStatusType, StatusPositions, avatarTheme } from './theme' -import { KeepPositions } from '../../Keep/KeepTheme' - -/** - * Props for the Avatar component - * @interface AvatarProps - * @extends {PropsWithChildren>} - */ -export interface AvatarProps extends PropsWithChildren> { - /** - * Alternative text for the avatar image - * @type string - * @default '' - */ - alt?: string +import { Counter } from './Counter' +import { Group } from './Group' +import { Verify } from './Verify' - /** - * Whether to show a border around the avatar - * @type boolean - * @default false - */ - bordered?: boolean - - /** - * URL of the image to display as the avatar - * @type string - */ +interface AvatarProps { img?: string - - /** - * Size of the avatar - * @type keyof AvatarSizes - * @default 'md' - */ - size?: keyof AvatarSizes - - /** - * Shape of the avatar - * @type ('circle' | 'rounded' | 'square') - * @default 'square' - */ - shape?: 'circle' | 'rounded' | 'square' - - /** - * Whether to stack the avatar on top of other avatars - * @type boolean - * @default false - */ - stacked?: boolean - - /** - * Status of the user associated with the avatar - * @type ('away' | 'busy' | 'offline' | 'online') - */ - status?: 'away' | 'busy' | 'offline' | 'online' - - /** - * Type of status icon to display - * @type keyof KeepAvatarStatusType - * @default 'dot' - */ - statusType?: keyof KeepAvatarStatusType - - /** - * Position of the status icon - * @type keyof KeepPositions - * @default 'top-left' - */ - statusPosition?: keyof KeepPositions - - /** - * Number of notifications to display on the avatar - * @type number - */ - totalNotification?: number - - /** - * className to apply to the Avatar. - * @type string - */ + alt?: string + size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' + color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' + shape?: 'circle' | 'rounded' + verified?: boolean + active?: boolean className?: string - - /** - * style to apply to the Avatar status. - * @type string - */ - statusStyle?: string } +export const avatarTheme = { + base: 'border', + color: { + primary: 'border-primary-200 text-primary-500', + secondary: 'border-secondary-200 text-secondary-100', + success: 'border-success-100 text-success-500', + warning: 'border-warning-100 text-warning-500', + error: 'border-error-100 text-error-500', + }, + size: { + sm: 'h-6 w-6', + md: 'h-8 w-8', + lg: 'h-10 w-10', + xl: 'h-14 w-14', + '2xl': 'h-16 w-16', + }, + shape: { + circle: 'rounded-full', + rounded: 'rounded-md', + }, + svgIcon: { + xs: 'h-3 w-3 fill-current', + sm: 'h-3 w-3 fill-current', + md: 'h-4 w-4 fill-current', + lg: 'h-5 w-5 fill-current', + xl: 'h-6 w-6 fill-current', + '2xl': 'h-7 w-7 fill-current', + }, + activeIcon: { + base: 'before:absolute before:rounded-full before:border before:content-[""]', + color: { + primary: 'before:bg-primary-500 before:border-primary-200', + secondary: 'before:bg-metal-500 before:border-metal-200', + success: 'before:bg-success-500 before:border-success-200', + warning: 'before:bg-warning-500 before:border-warning-200', + error: 'before:bg-error-500 before:border-error-200', + }, + size: { + rounded: { + sm: 'before:bottom-0 before:right-0 before:h-1.5 before:w-1.5', + md: 'before:bottom-0 before:right-0 before:h-2 before:w-2', + lg: 'before:bottom-0 before:right-0 before:h-2 before:w-2', + xl: 'before:bottom-0.5 before:right-0.5 before:h-2 before:w-2', + '2xl': 'before:bottom-0 before:right-0 before:h-2.5 before:w-2.5', + }, + circle: { + sm: 'before:bottom-0 before:right-0 before:h-1.5 before:w-1.5', + md: 'before:bottom-0 before:right-0 before:h-2 before:w-2', + lg: 'before:bottom-0.5 before:right-0.5 before:h-2 before:w-2', + xl: 'before:bottom-1 before:right-1 before:h-2 before:w-2', + '2xl': 'before:bottom-1 before:right-1 before:h-2.5 before:w-2.5', + }, + }, + }, + verifyIcon: { + base: 'absolute', + position: { + circle: { + sm: '-right-1.5 -top-1.5', + md: '-right-1 -top-1', + lg: '-right-1 -top-1', + xl: '-right-0.5 -top-0.5', + '2xl': '-right-0.5 -top-0.5', + }, + rounded: { + sm: '-right-1.5 -top-1.5', + md: '-right-1.5 -top-1.5 ', + lg: '-right-2 -top-2', + xl: '-right-2 -top-2', + '2xl': '-right-2 -top-2', + }, + }, + size: { + sm: 'h-4 w-4', + md: 'h-4 w-4', + lg: 'h-[18px] w-[18px]', + xl: 'h-5 w-5', + '2xl': 'h-6 w-6', + }, + color: { + primary: '#1B4DFF', + secondary: '#2D3643', + success: '#11A75C', + warning: '#FFC700', + error: '#FF3838', + }, + }, +} const AvatarComponent: FC = ({ - alt = '', - bordered = false, - children, img, - shape = 'square', - size = 'md', - stacked = false, - status, - statusType = 'dot', - statusPosition = 'top-left', - totalNotification = 99, + alt = 'avatar', + size = 'xl', + shape = 'circle', + color = 'primary', + active = false, + verified = false, className, - statusStyle, - ...props }) => { - const theirProps = excludeClassName(props) - const theme = avatarTheme - - return ( -
    -
    - {img ? ( - {alt} - ) : ( -
    + if (!img) { + return ( +
    + + + + + {verified && ( +
    +
    )} - {status && ( - - {statusType === 'notification' && `${totalNotification}`} - - )}
    - {children &&
    {children}
    } + ) + } + + return ( +
    + {alt} + {verified && ( + + )}
    ) } -AvatarComponent.displayName = 'Avatar' - +Group.displayName = 'Avatar.Group' +Counter.displayName = 'Avatar.Counter' export const Avatar = Object.assign(AvatarComponent, { - Group: AvatarGroup, - Counter: AvatarGroupCounter, - Add: AvatarAdd, + Group, + Counter, }) diff --git a/app/src/components/Avatar/AvatarAdd.tsx b/app/src/components/Avatar/AvatarAdd.tsx deleted file mode 100644 index 6feebde0..00000000 --- a/app/src/components/Avatar/AvatarAdd.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import type { FC, PropsWithChildren } from 'react' -import { cn } from '../../helpers/cn' -import { AvatarSizes, avatarTheme } from './theme' - -/** - * Props for the AvatarAdd component. - * @type {AvatarAddProps} - */ -export type AvatarAddProps = PropsWithChildren<{ - /** - * The icon to be displayed in the AvatarAdd component. - * @type {string} - */ - icon?: string - - /** - * The size of the AvatarAdd component. - * @type {keyof AvatarSizes} - * @default 'md' - */ - size?: keyof AvatarSizes - - /** - * The background color of the AvatarAdd component. - * @type {string} - * @default '#F0F3F7' - */ - bg?: string - - /** - * The color of the icon in the AvatarAdd component. - * @type {string} - * @default '#5E718D' - */ - iconColor?: string - - /** - * The color of the ring around the AvatarAdd component. - * @type {string} - * @default 'ring-white' - */ - ringColor?: string - - /** - * Additional CSS classes for the AvatarAdd component. - * @type {string} - * @default '' - */ - className?: string -}> - -export const AvatarAdd: FC = ({ - icon, - size = 'md', - bg = '#F0F3F7', - iconColor = '#5E718D', - ringColor = 'ring-white', - className, -}) => { - const theme = avatarTheme - - return ( -
    - {icon ? ( - add_icon - ) : ( - - - - )} -
    - ) -} - -AvatarAdd.displayName = 'Avatar.Add' diff --git a/app/src/components/Avatar/AvatarGroup.stories.tsx b/app/src/components/Avatar/AvatarGroup.stories.tsx deleted file mode 100644 index 6f4ac137..00000000 --- a/app/src/components/Avatar/AvatarGroup.stories.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' - -import { AvatarGroup } from './AvatarGroup' -import { mergeChildren, removeFragment } from '../../helpers/mergeDeep' -import { Avatar } from './Avatar' -const meta: Meta = { - component: AvatarGroup, - tags: ['autodocs'], - args: {}, - - argTypes: { - children: { - description: 'It will be the Avatar component itself', - control: { disable: true }, - }, - }, - parameters: { - componentSubtitle: 'Displays an image that represents a user or organization', - }, -} - -export default meta -type Story = StoryObj - -export const DefaultAvatarGroup: Story = { - args: { - children: removeFragment( - <> - - - - - - - - , - ), - }, -} - -export const AvatarWithAddIcon: Story = { - args: { - children: mergeChildren( - DefaultAvatarGroup?.args?.children, - , - ), - }, -} - -export const AvatarWithNotification: Story = { - args: { - children: mergeChildren(DefaultAvatarGroup?.args?.children, ), - }, -} - -export const AvatarWithNotificationAndAddIcon: Story = { - args: { - children: mergeChildren( - AvatarWithNotification?.args?.children, - , - ), - }, -} diff --git a/app/src/components/Avatar/AvatarGroup.tsx b/app/src/components/Avatar/AvatarGroup.tsx deleted file mode 100644 index 9bb6ea0d..00000000 --- a/app/src/components/Avatar/AvatarGroup.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import type { FC, PropsWithChildren, ReactNode } from 'react' -import { cn } from '../../helpers/cn' - -/** - * Props for the AvatarGroup component. - * @type {AvatarGroupProps} - */ -export type AvatarGroupProps = PropsWithChildren<{ - /** - * The children of the AvatarGroup component. - * @type {ReactNode} - */ - children: ReactNode - /** - * The optional class name for the AvatarGroup component. - * @type {string} - * @default '' - */ - className?: string -}> - -export const AvatarGroup: FC = ({ children, className }) => { - return ( -
    - {children} -
    - ) -} - -AvatarGroup.displayName = 'Avatar.Group' diff --git a/app/src/components/Avatar/AvatarGroupCounter.tsx b/app/src/components/Avatar/AvatarGroupCounter.tsx deleted file mode 100644 index fc0fe1da..00000000 --- a/app/src/components/Avatar/AvatarGroupCounter.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import type { FC, PropsWithChildren } from 'react' -import { cn } from '../../helpers/cn' -import { AvatarSizes, avatarTheme } from './theme' - -/** - * Props for the AvatarGroupCounter component. - * @type {AvatarGroupCounterProps} - */ -export type AvatarGroupCounterProps = PropsWithChildren<{ - /** - * The total number to be displayed. - * @type {number} - * @default 0 - */ - total?: number - - /** - * The URL to navigate to when the component is clicked. - * @type {string} - * @default '' - */ - href?: string - - /** - * The size of the avatar. - * @type {keyof AvatarSizes} - * @default 'md' - */ - size?: keyof AvatarSizes - - /** - * Additional CSS class names for the component. - * @type {string} - * @default '' - */ - className?: string -}> - -export const AvatarGroupCounter: FC = ({ total, href, size = 'md', className }) => { - const theme = avatarTheme - return ( - - +{total} - - ) -} - -AvatarGroupCounter.displayName = 'Avatar.GroupCounter' diff --git a/app/src/components/Avatar/Counter.tsx b/app/src/components/Avatar/Counter.tsx new file mode 100644 index 00000000..ef88eee1 --- /dev/null +++ b/app/src/components/Avatar/Counter.tsx @@ -0,0 +1,22 @@ +import { FC, ReactNode } from 'react' +import { cn } from '../../helpers/cn' +import { avatarTheme } from './Avatar' + +export interface CounterProps { + children?: ReactNode + className?: string + size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' +} + +export const Counter: FC = ({ children, className, size = 'xl' }) => { + return ( +
    + {children} +
    + ) +} diff --git a/app/src/components/Avatar/Group.tsx b/app/src/components/Avatar/Group.tsx new file mode 100644 index 00000000..b9ac724e --- /dev/null +++ b/app/src/components/Avatar/Group.tsx @@ -0,0 +1,9 @@ +import { FC, ReactNode } from 'react' + +export interface GroupProps { + children?: ReactNode +} + +export const Group: FC = ({ children }) => { + return
    {children}
    +} diff --git a/app/src/components/Avatar/Verify.tsx b/app/src/components/Avatar/Verify.tsx new file mode 100644 index 00000000..76002e33 --- /dev/null +++ b/app/src/components/Avatar/Verify.tsx @@ -0,0 +1,41 @@ +import { FC, ReactNode } from 'react' +import { cn } from '../../helpers/cn' +import { avatarTheme } from './Avatar' + +export interface VerifyProps { + children?: ReactNode + className?: string + size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' + position?: string + color?: string +} + +export const Verify: FC = ({ children, className, size = 'md', position, color }) => { + return ( +
    + {children ? ( + children + ) : ( + + + + + + )} +
    + ) +} diff --git a/app/src/components/Avatar/index.tsx b/app/src/components/Avatar/index.tsx new file mode 100644 index 00000000..227ecdba --- /dev/null +++ b/app/src/components/Avatar/index.tsx @@ -0,0 +1 @@ +export * from './Avatar' diff --git a/app/src/components/Avatar/theme.ts b/app/src/components/Avatar/theme.ts deleted file mode 100644 index e8ebd148..00000000 --- a/app/src/components/Avatar/theme.ts +++ /dev/null @@ -1,410 +0,0 @@ -import { KeepPositions, KeepSizes } from '../../Keep/KeepTheme' - -export interface AvatarSizes extends Pick { - [key: string]: string -} - -export interface AvatarStatusType extends Pick { - [key: string]: string -} - -export interface AvatarStatusPositions - extends Pick { - [key: string]: string -} - -export interface KeepAvatarStatusType { - dot: string - notification: string -} - -export interface KeepAvatarStatusTypeSize { - dot: AvatarSizes - notification: AvatarSizes -} - -export interface StatusPositions { - xs: AvatarStatusPositions - sm: AvatarStatusPositions - md: AvatarStatusPositions - lg: AvatarStatusPositions - xl: AvatarStatusPositions - '2xl': AvatarStatusPositions -} - -export interface KeepAvatarStatusPositions { - dot: StatusPositions - notification: StatusPositions -} - -export interface KeepAvatarStatusFontSize { - notification: AvatarSizes -} - -export interface keepAvatarTheme { - base: string - bordered: string - img: { - off: string - on: string - } - size: AvatarSizes - customStatusIcon: AvatarSizes - shape: { - square: string - circle: string - rounded: AvatarSizes - } - stacked: string - status: { - away: string - busy: string - offline: string - online: string - } - statusType: { - type: AvatarStatusType - size: KeepAvatarStatusTypeSize - fontSize: KeepAvatarStatusFontSize - } - statusPosition: { - square: KeepAvatarStatusPositions - circle: KeepAvatarStatusPositions - rounded: KeepAvatarStatusPositions - } - groupCounter: { - base: string - } - add: { - base: string - iconSize: AvatarSizes - } -} - -export const avatarTheme: keepAvatarTheme = { - base: 'flex items-center space-x-4', - bordered: 'border border-metal-600', - img: { - off: 'relative overflow-hidden bg-primary-25', - on: 'relative overflow-hidden', - }, - shape: { - square: 'border-0', - circle: 'rounded-full', - rounded: { - xs: 'rounded-lg', - sm: 'rounded-xl', - md: 'rounded-xl', - lg: 'rounded-2xl', - xl: 'rounded-2xl', - '2xl': 'rounded-3xl', - }, - }, - size: { - xs: 'w-6 h-6', - sm: 'w-8 h-8', - md: 'w-10 h-10', - lg: 'w-14 h-14', - xl: 'w-16 h-16', - '2xl': 'w-24 h-24', - }, - customStatusIcon: { - xs: 'absolute w-[12px] h-[12px]', - sm: 'absolute w-[14px] h-[14px]', - md: 'absolute w-[16px] h-[16px]', - lg: 'absolute w-[18px] h-[18px]', - xl: 'absolute w-[20px] h-[20px]', - '2xl': 'absolute w-[22px] h-[22px]', - }, - stacked: 'ring-2 ring-white', - status: { - busy: 'bg-red-400', - away: 'bg-yellow-400', - online: 'bg-green-300', - offline: 'bg-metal-500', - }, - statusType: { - type: { - dot: 'absolute rounded-full border-[1.5px] border-white', - notification: 'absolute rounded-[20px] border-[1.5px] border-white flex items-center justify-center text-white', - }, - fontSize: { - notification: { - xs: 'text-[8px] leading-[9px]', - sm: 'text-body-6', - md: 'text-body-6', - lg: 'text-body-6', - xl: 'text-body-5', - '2xl': 'text-body-4', - }, - }, - size: { - dot: { - xs: 'w-1.5 h-1.5', - sm: 'w-1.5 h-1.5', - md: 'w-2 h-2', - lg: 'w-2.5 h-2.5', - xl: 'w-3 h-3', - '2xl': 'w-3.5 h-3.5', - }, - notification: { - xs: 'w-[22px] h-[12px]', - sm: 'w-[30px] h-[15px]', - md: 'w-[30px] h-[15px]', - lg: 'w-[34px] h-[15px]', - xl: 'w-9 h-[18px]', - '2xl': 'w-11 h-[22px]', - }, - }, - }, - statusPosition: { - square: { - dot: { - xs: { - 'bottom-left': '-bottom-0.5 -left-0.5', - 'bottom-right': '-bottom-0.5 -right-0.5', - 'top-left': '-top-0.5 -left-0.5', - 'top-right': '-top-0.5 -right-0.5', - }, - sm: { - 'bottom-left': '-bottom-0.5 -left-0.5', - 'bottom-right': '-bottom-0.5 -right-0.5', - 'top-left': '-top-0.5 -left-0.5', - 'top-right': '-top-0.5 -right-0.5', - }, - md: { - 'bottom-left': '-bottom-0.5 -left-0.5', - 'bottom-right': '-bottom-0.5 -right-0.5', - 'top-left': '-top-0.5 -left-0.5', - 'top-right': '-top-0.5 -right-0.5', - }, - lg: { - 'bottom-left': '-bottom-1 -left-1', - 'bottom-right': '-bottom-1 -right-1', - 'top-left': '-top-1 -left-1', - 'top-right': '-top-1 -right-1', - }, - xl: { - 'bottom-left': '-bottom-1 -left-1', - 'bottom-right': '-bottom-1 -right-1', - 'top-left': '-top-1 -left-1', - 'top-right': '-top-1 -right-1', - }, - '2xl': { - 'bottom-left': '-bottom-1 -left-1', - 'bottom-right': '-bottom-1 -right-1', - 'top-left': '-top-1 -left-1', - 'top-right': '-top-1 -right-1', - }, - }, - notification: { - xs: { - 'bottom-left': '-bottom-0.5 -left-3', - 'bottom-right': '-bottom-0.5 -right-3', - 'top-left': '-top-0.5 -left-3', - 'top-right': '-top-0.5 -right-3', - }, - sm: { - 'bottom-left': '-bottom-0.5 -left-3', - 'bottom-right': '-bottom-0.5 -right-3', - 'top-left': '-top-0.5 -left-3', - 'top-right': '-top-0.5 -right-3', - }, - md: { - 'bottom-left': '-bottom-0.5 -left-3', - 'bottom-right': '-bottom-0.5 -right-3', - 'top-left': '-top-0.5 -left-3', - 'top-right': '-top-0.5 -right-3', - }, - lg: { - 'bottom-left': '-bottom-1 -left-3', - 'bottom-right': '-bottom-1 -right-3', - 'top-left': '-top-1 -left-3', - 'top-right': '-top-1 -right-3', - }, - xl: { - 'bottom-left': '-bottom-1 -left-3', - 'bottom-right': '-bottom-1 -right-3', - 'top-left': '-top-1 -left-3', - 'top-right': '-top-1 -right-3', - }, - '2xl': { - 'bottom-left': '-bottom-1 -left-3', - 'bottom-right': '-bottom-1 -right-3', - 'top-left': '-top-1 -left-3', - 'top-right': '-top-1 -right-3', - }, - }, - }, - circle: { - dot: { - xs: { - 'bottom-left': '-bottom-0.5 left-1', - 'bottom-right': '-bottom-0.5 right-1', - 'top-left': '-top-0.5 left-1', - 'top-right': 'top-0 -right-1.5', - }, - sm: { - 'bottom-left': '-bottom-px left-1', - 'bottom-right': '-bottom-0.5 right-1', - 'top-left': '-top-px left-1', - 'top-right': '-top-px right-1', - }, - md: { - 'bottom-left': 'bottom-px left-0.5', - 'bottom-right': 'bottom-px right-0.5', - 'top-left': 'top-px left-0.5', - 'top-right': 'top-px right-1', - }, - lg: { - 'bottom-left': 'bottom-0.5 left-1', - 'bottom-right': 'bottom-0.5 right-1', - 'top-left': 'top-0.5 left-1', - 'top-right': 'top-0.5 right-1', - }, - xl: { - 'bottom-left': 'bottom-0.5 left-1', - 'bottom-right': 'bottom-0.5 right-1', - 'top-left': 'top-0.5 left-1', - 'top-right': 'top-0.5 right-1', - }, - '2xl': { - 'bottom-left': 'bottom-2 left-1', - 'bottom-right': 'bottom-2 right-1', - 'top-left': 'top-2 left-1', - 'top-right': 'top-1 right-1', - }, - }, - notification: { - xs: { - 'bottom-left': '-bottom-0.5 -left-3', - 'bottom-right': '-bottom-0.5 -right-3', - 'top-left': '-top-0.5 -left-3', - 'top-right': '-top-0.5 -right-3', - }, - sm: { - 'bottom-left': '-bottom-px -left-3', - 'bottom-right': '-bottom-0.5 -right-3', - 'top-left': '-top-px -left-3', - 'top-right': '-top-px -right-3', - }, - md: { - 'bottom-left': 'bottom-px -left-3', - 'bottom-right': 'bottom-px -right-3', - 'top-left': 'top-px -left-3', - 'top-right': 'top-px -right-3', - }, - lg: { - 'bottom-left': 'bottom-0.5 -left-3', - 'bottom-right': 'bottom-0.5 -right-3', - 'top-left': 'top-0.5 -left-3', - 'top-right': 'top-0.5 -right-3', - }, - xl: { - 'bottom-left': 'bottom-0.5 -left-3', - 'bottom-right': 'bottom-0.5 -right-3', - 'top-left': 'top-0.5 -left-3', - 'top-right': 'top-0.5 -right-3', - }, - '2xl': { - 'bottom-left': 'bottom-2 -left-3', - 'bottom-right': 'bottom-2 -right-3', - 'top-left': 'top-2 -left-3', - 'top-right': 'top-2 -right-3', - }, - }, - }, - rounded: { - dot: { - xs: { - 'bottom-left': '-bottom-px -left-0.5', - 'bottom-right': '-bottom-px -right-0.5', - 'top-left': '-top-px -left-0.5', - 'top-right': '-top-px -right-0.5', - }, - sm: { - 'bottom-left': '-bottom-px left-px', - 'bottom-right': '-bottom-px right-px', - 'top-left': '-top-px left-px', - 'top-right': '-top-px right-px', - }, - md: { - 'bottom-left': '-bottom-0.5 -left-0.5', - 'bottom-right': '-bottom-0.5 -right-0.5', - 'top-left': '-top-0.5 -left-0.5', - 'top-right': '-top-0.5 -right-0.5', - }, - lg: { - 'bottom-left': '-bottom-0.5 -left-0.5', - 'bottom-right': '-bottom-0.5 -right-0.5', - 'top-left': '-top-0.5 -left-0.5', - 'top-right': '-top-0.5 -right-0.5', - }, - xl: { - 'bottom-left': '-bottom-0.5 -left-0.5', - 'bottom-right': '-bottom-0.5 -right-0.5', - 'top-left': '-top-0.5 -left-0.5', - 'top-right': '-top-0.5 -right-0.5', - }, - '2xl': { - 'bottom-left': '-bottom-0.5 -left-px', - 'bottom-right': '-bottom-0.5 -right-px', - 'top-left': '-top-0.5 -left-px', - 'top-right': '-top-0.5 -right-px', - }, - }, - notification: { - xs: { - 'bottom-left': '-bottom-px -left-3', - 'bottom-right': '-bottom-px -right-3', - 'top-left': '-top-px -left-3', - 'top-right': '-top-px -right-3', - }, - sm: { - 'bottom-left': '-bottom-px -left-3', - 'bottom-right': '-bottom-px -right-3', - 'top-left': '-top-px -left-3', - 'top-right': '-top-px -right-3', - }, - md: { - 'bottom-left': '-bottom-0.5 -left-3', - 'bottom-right': '-bottom-0.5 -right-3', - 'top-left': '-top-0.5 -left-3', - 'top-right': '-top-0.5 -right-3', - }, - lg: { - 'bottom-left': '-bottom-0.5 -left-3', - 'bottom-right': '-bottom-0.5 -right-3', - 'top-left': '-top-0.5 -left-3', - 'top-right': '-top-0.5 -right-3', - }, - xl: { - 'bottom-left': '-bottom-0.5 -left-3', - 'bottom-right': '-bottom-0.5 -right-3', - 'top-left': '-top-0.5 -left-3', - 'top-right': '-top-0.5 -right-3', - }, - '2xl': { - 'bottom-left': '-bottom-0.5 -left-3', - 'bottom-right': '-bottom-0.5 -right-3', - 'top-left': '-top-0.5 -left-3', - 'top-right': '-top-0.5 -right-3', - }, - }, - }, - }, - groupCounter: { - base: 'relative flex items-center justify-center rounded-full bg-gray-50 font-medium text-metal-400 ring-2 ring-white', - }, - add: { - base: 'relative flex items-center justify-center rounded-full ring-2 !ml-3', - iconSize: { - xs: 'w-3 h-3', - sm: 'w-4 h-4', - md: 'w-5 h-5', - lg: 'w-7 h-7', - xl: 'w-9 h-9', - '2xl': 'w-11 h-11', - }, - }, -} diff --git a/app/src/components/Card/Card.stories.tsx b/app/src/components/Card/Card.stories.tsx index 3b20f264..9a9edd6a 100644 --- a/app/src/components/Card/Card.stories.tsx +++ b/app/src/components/Card/Card.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react' +import Image from 'next/image' import { ArchiveTray, ArrowsOutSimple, @@ -21,14 +22,13 @@ import { TwitterLogo, Users, } from 'phosphor-react' -import Image from 'next/image' import { removeFragment } from '../../helpers/mergeDeep' -import { Card } from './Card' -import { Popover } from '../Popover' import { Avatar } from '../Avatar/Avatar' -import { Button } from '../Button/Button' import { Badge } from '../Badge' +import { Button } from '../Button/Button' +import { Popover } from '../Popover' import { Progress } from '../Progress' +import { Card } from './Card' const meta: Meta = { component: Card, @@ -195,12 +195,7 @@ export const CardWithAvatar: Story = { children: removeFragment( <> - + diff --git a/app/src/components/Modal/Modal.stories.tsx b/app/src/components/Modal/Modal.stories.tsx index ff9b2bb2..05a796ce 100644 --- a/app/src/components/Modal/Modal.stories.tsx +++ b/app/src/components/Modal/Modal.stories.tsx @@ -2,8 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react' import { CloudArrowUp, Trash, UserPlus } from 'phosphor-react' import { useState } from 'react' import { Modal } from '.' -import { Button } from '../Button/Button' import { Avatar } from '../Avatar/Avatar' +import { Button } from '../Button/Button' const meta: Meta = { component: Modal, @@ -192,7 +192,7 @@ const HistoryModalComponent = () => {

    - +

    Albert Flores

    diff --git a/app/src/components/Modal/ModalHeader.tsx b/app/src/components/Modal/ModalHeader.tsx index 004826cd..223bf278 100644 --- a/app/src/components/Modal/ModalHeader.tsx +++ b/app/src/components/Modal/ModalHeader.tsx @@ -23,13 +23,13 @@ export const ModalHeader: FC = ({ children, className }): Reac {onClose && ( )} diff --git a/app/src/components/Slider/Slider.tsx b/app/src/components/Slider/Slider.tsx index 884e2313..00218f69 100644 --- a/app/src/components/Slider/Slider.tsx +++ b/app/src/components/Slider/Slider.tsx @@ -13,7 +13,7 @@ export interface MarkObj { * @interface SliderProps */ export interface SliderProps { - children: ReactNode + children?: ReactNode /** * The minimum value of the slider. * @type {number} diff --git a/app/src/components/Table/Table.stories.tsx b/app/src/components/Table/Table.stories.tsx index f2576df7..10d3a074 100644 --- a/app/src/components/Table/Table.stories.tsx +++ b/app/src/components/Table/Table.stories.tsx @@ -13,10 +13,10 @@ import { Tag, } from 'phosphor-react' import { Table } from '.' -import { Badge } from '../Badge' -import { Button } from '../Button/Button' import { removeFragment } from '../../helpers/mergeDeep' import { Avatar } from '../Avatar/Avatar' +import { Badge } from '../Badge' +import { Button } from '../Button/Button' const meta: Meta = { component: Table, @@ -1028,13 +1028,13 @@ export const FileUploadedTable: Story = { - - - - - - - + + + + + + + @@ -1075,13 +1075,13 @@ export const FileUploadedTable: Story = { - - - - - - - + + + + + + + @@ -1122,13 +1122,13 @@ export const FileUploadedTable: Story = { - - - - - - - + + + + + + + @@ -1169,13 +1169,13 @@ export const FileUploadedTable: Story = { - - - - - - - + + + + + + + @@ -1216,13 +1216,13 @@ export const FileUploadedTable: Story = { - - - - - - - + + + + + + + diff --git a/app/src/components/index.tsx b/app/src/components/index.tsx index 9d42c1a6..c712e120 100644 --- a/app/src/components/index.tsx +++ b/app/src/components/index.tsx @@ -1,7 +1,6 @@ export * from './Accordion' export * from './Alert' export * from './Avatar/Avatar' -export * from './Avatar/AvatarGroup' export * from './Badge' export * from './Breadcrumb' export * from './Button' diff --git a/app/src/theme/keep-preset.ts b/app/src/theme/keep-preset.ts index b37df3c0..d7fbc90e 100644 --- a/app/src/theme/keep-preset.ts +++ b/app/src/theme/keep-preset.ts @@ -236,6 +236,9 @@ module.exports = { animation: { 'keep-bounce': 'bounce-open 0.3s', }, + content: { + img: 'url("/images/avatar/verify.svg")', + }, }, }, } diff --git a/public/images/avatar/verify.svg b/public/images/avatar/verify.svg new file mode 100644 index 00000000..f5d0d695 --- /dev/null +++ b/public/images/avatar/verify.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/routes/routes.ts b/routes/routes.ts index 53f130a3..4ce39fc9 100644 --- a/routes/routes.ts +++ b/routes/routes.ts @@ -54,14 +54,6 @@ export const routes: routerPath[] = [ deprecate: false, folderName: 'Avatar', }, - { - id: 5, - name: 'Avatar Group', - href: '/docs/components/avatarGroup', - tag: false, - deprecate: false, - folderName: 'Avatar', - }, { id: 6, name: 'Badge', From 2eb698305d4e3a94923eaa1dcaaba79e4300ae1f Mon Sep 17 00:00:00 2001 From: Arifulislam5577 Date: Sun, 28 Jan 2024 17:34:11 +0600 Subject: [PATCH 16/70] Updated: Empty component updated. --- app/docs/components/empty/Empty.mdx | 6 +-- .../components/empty/variant/DefaultEmpty.tsx | 6 +-- .../components/empty/variant/EmptyFolder.tsx | 6 +-- .../components/empty/variant/NoDataFound.tsx | 6 +-- .../components/empty/variant/NoResultPage.tsx | 6 +-- .../components/empty/variant/NotFoundPage.tsx | 6 +-- .../empty/variant/PageNotAvailable.tsx | 6 +-- app/not-found.tsx | 12 +++-- app/src/components/Empty/Empty.stories.tsx | 15 ++++--- app/src/components/Empty/Empty.tsx | 16 +------ app/src/components/Empty/Redirect.tsx | 44 ------------------- app/src/components/Empty/theme.ts | 3 -- 12 files changed, 36 insertions(+), 96 deletions(-) delete mode 100644 app/src/components/Empty/Redirect.tsx diff --git a/app/docs/components/empty/Empty.mdx b/app/docs/components/empty/Empty.mdx index 81151ea6..5b69cced 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 CssThemePreview from '../../../components/CssThemePreview' +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/not-found.tsx b/app/not-found.tsx index 285020e1..6cef91b9 100644 --- a/app/not-found.tsx +++ b/app/not-found.tsx @@ -16,13 +16,11 @@ const NotFound = () => { Sorry, No Result Found! The page/topic you are looking for is not found. - - - Back to home - - + + Back to home + ) } diff --git a/app/src/components/Empty/Empty.stories.tsx b/app/src/components/Empty/Empty.stories.tsx index 6b67cd42..d30ed4e9 100644 --- a/app/src/components/Empty/Empty.stories.tsx +++ b/app/src/components/Empty/Empty.stories.tsx @@ -1,7 +1,8 @@ import type { Meta, StoryObj } from '@storybook/react' -import { Empty } from './' import Image from 'next/image' +import { Button } from '../Button' +import { Empty } from './' const meta: Meta = { tags: ['autodocs'], @@ -37,7 +38,7 @@ export const DefaultEmptyPage: Story = { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ), }, @@ -59,7 +60,7 @@ export const EmptyFolder: Story = { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ), }, @@ -81,7 +82,7 @@ export const NoDataFound: Story = { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ), }, @@ -103,7 +104,7 @@ export const NoResultPage: Story = { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ), }, @@ -125,7 +126,7 @@ export const NotFoundPage: Story = { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ), }, @@ -147,7 +148,7 @@ export const PageNotAvailable: Story = { Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry. - + ), }, diff --git a/app/src/components/Empty/Empty.tsx b/app/src/components/Empty/Empty.tsx index 6e7cc38c..54c5f614 100644 --- a/app/src/components/Empty/Empty.tsx +++ b/app/src/components/Empty/Empty.tsx @@ -1,23 +1,13 @@ 'use client' import { FC, ReactNode } from 'react' +import { cn } from '../../helpers/cn' +import { Description } from './Description' import { Image } from './Image' -import { Redirect } from './Redirect' import { Title } from './Title' -import { Description } from './Description' -import { cn } from '../../helpers/cn' import { emptyTheme } from './theme' interface EmptyProps { - /** - * The class name of the Empty. - * @type {string} - * @default '' - */ className?: string - /** - * The content of the Empty. - * @type {ReactNode} - */ children?: ReactNode } const EmptyComponent: FC = ({ children, className }) => { @@ -32,11 +22,9 @@ const EmptyComponent: FC = ({ children, className }) => { Title.displayName = 'Empty.Title' Description.displayName = 'Empty.Description' Image.displayName = 'Empty.Image' -Redirect.displayName = 'Empty.Redirect' export const Empty = Object.assign(EmptyComponent, { Title, Description, Image, - Redirect, }) diff --git a/app/src/components/Empty/Redirect.tsx b/app/src/components/Empty/Redirect.tsx deleted file mode 100644 index 5f576a99..00000000 --- a/app/src/components/Empty/Redirect.tsx +++ /dev/null @@ -1,44 +0,0 @@ -'use client' -import { FC, ReactNode } from 'react' -import { cn } from '../../helpers/cn' -import { emptyTheme } from './theme' - -export interface RedirectProps { - /** - * The URL to redirect to. - * @type {string} - * @default '' - */ - redirectUrl?: string - - /** - * The text to display on the redirect button. - * @type {string} - * @default '' - */ - buttonText?: string - /** - * Additional CSS class for the component. - * @type {string} - * @default '' - */ - className?: string - /** - * The child elements of the component. - * @type {ReactNode} - */ - children?: ReactNode -} - -export const Redirect: FC = ({ redirectUrl, buttonText, className, children }) => { - const { redirectBtn } = emptyTheme - if (!children) { - return ( - - {buttonText} - - ) - } - - return children -} diff --git a/app/src/components/Empty/theme.ts b/app/src/components/Empty/theme.ts index b51977d4..493f7d92 100644 --- a/app/src/components/Empty/theme.ts +++ b/app/src/components/Empty/theme.ts @@ -2,7 +2,6 @@ export interface keepEmptyTheme { root: RootTheme title: keepTitleTheme description: keepDescriptionTheme - redirectBtn: string } export interface keepDescriptionTheme { @@ -27,6 +26,4 @@ export const emptyTheme: keepEmptyTheme = { description: { base: 'mb-8 text-center text-body-3 font-normal text-metal-400', }, - redirectBtn: - 'flex items-center justify-center rounded-md bg-primary-500 px-6 py-3 text-body-4 font-medium text-white transition-all duration-150 hover:bg-primary-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-100 focus-visible:ring-offset-2 active:focus:scale-95 disabled:cursor-not-allowed disabled:bg-primary-100', } From a05dbeb196303a51a025afd5039bf238ce16ca3e Mon Sep 17 00:00:00 2001 From: Arifulislam5577 Date: Sun, 4 Feb 2024 16:03:01 +0600 Subject: [PATCH 17/70] Updated: Progress component updated. --- app/docs/components/avatar/avatarApi.ts | 7 + .../components/card/variant/ProductCard.tsx | 6 +- app/docs/components/progress/page.tsx | 4 +- app/docs/components/progress/progress.mdx | 67 +++---- app/docs/components/progress/progressApi.ts | 90 +++++---- .../progress/variant/ColorsOfProgress.tsx | 70 ------- .../progress/variant/CustomizeProgress.tsx | 35 ++++ .../progress/variant/DefaultLineProgress.tsx | 27 +++ .../progress/variant/DefaultProgress.tsx | 18 +- .../progress/variant/LineProgressSize.tsx | 39 ++++ .../progress/variant/ProgressWithNumber.tsx | 43 ----- .../progress/variant/ProgressWithPopup.tsx | 28 --- .../progress/variant/SizesOfProgress.tsx | 38 ++-- .../progress/variant/VariantOfProgress.tsx | 32 ++-- app/main.css | 4 +- app/new/Slider/Slider.tsx | 33 ---- app/new/Slider/TooltipSlider.tsx | 76 -------- app/new/components/Alert.tsx | 18 -- app/new/page.tsx | 112 ++++++++++-- app/new/switch/switch.tsx | 14 ++ app/src/components/Card/Card.stories.tsx | 4 +- .../components/Progress/CircleProgress.tsx | 66 +++++++ app/src/components/Progress/CircleText.tsx | 11 ++ app/src/components/Progress/LineProgress.tsx | 43 +++++ app/src/components/Progress/LineText.tsx | 11 ++ .../components/Progress/Progress.stories.tsx | 117 ------------ app/src/components/Progress/index.tsx | 110 ----------- app/src/components/Progress/theme.ts | 171 +++++++++--------- app/src/components/index.tsx | 3 +- 29 files changed, 586 insertions(+), 711 deletions(-) delete mode 100644 app/docs/components/progress/variant/ColorsOfProgress.tsx create mode 100644 app/docs/components/progress/variant/CustomizeProgress.tsx create mode 100644 app/docs/components/progress/variant/DefaultLineProgress.tsx create mode 100644 app/docs/components/progress/variant/LineProgressSize.tsx delete mode 100644 app/docs/components/progress/variant/ProgressWithNumber.tsx delete mode 100644 app/docs/components/progress/variant/ProgressWithPopup.tsx delete mode 100644 app/new/Slider/Slider.tsx delete mode 100644 app/new/Slider/TooltipSlider.tsx delete mode 100644 app/new/components/Alert.tsx create mode 100644 app/new/switch/switch.tsx create mode 100644 app/src/components/Progress/CircleProgress.tsx create mode 100644 app/src/components/Progress/CircleText.tsx create mode 100644 app/src/components/Progress/LineProgress.tsx create mode 100644 app/src/components/Progress/LineText.tsx delete mode 100644 app/src/components/Progress/Progress.stories.tsx delete mode 100644 app/src/components/Progress/index.tsx diff --git a/app/docs/components/avatar/avatarApi.ts b/app/docs/components/avatar/avatarApi.ts index 570d6819..620778a6 100644 --- a/app/docs/components/avatar/avatarApi.ts +++ b/app/docs/components/avatar/avatarApi.ts @@ -20,6 +20,13 @@ export const avatarApiData = [ propsDescription: 'Specifies the size of the avatar', default: 'md', }, + { + id: 7, + propsName: 'color', + propsType: ['primary', 'secondary', 'success', 'warning', 'error'], + propsDescription: 'Specifies the color of the avatar', + default: 'primary', + }, { id: 4, propsName: 'shape', diff --git a/app/docs/components/card/variant/ProductCard.tsx b/app/docs/components/card/variant/ProductCard.tsx index c68bd8d6..7f07fc42 100644 --- a/app/docs/components/card/variant/ProductCard.tsx +++ b/app/docs/components/card/variant/ProductCard.tsx @@ -1,5 +1,4 @@ 'use client' -import { Badge, Card, Button, Progress } from '../../../../src' import { ArrowsOutSimple, Bed, @@ -14,6 +13,7 @@ import { SpeakerHigh, Users, } from 'phosphor-react' +import { Badge, Button, Card, LineProgress } from '../../../../src' const ProductCard = () => { return ( @@ -60,7 +60,7 @@ const ProductCard = () => { 4:05 10:05 - +

    ) diff --git a/app/new/switch/switch.tsx b/app/new/switch/switch.tsx new file mode 100644 index 00000000..ce8ec3f6 --- /dev/null +++ b/app/new/switch/switch.tsx @@ -0,0 +1,14 @@ +'use client' +import { useState } from 'react' + +export const Switch = () => { + const [active, setActive] = useState(false) + return ( +
    setActive(!active)}> +
    +
    + ) +} diff --git a/app/src/components/Card/Card.stories.tsx b/app/src/components/Card/Card.stories.tsx index 9a9edd6a..c1e4f1fe 100644 --- a/app/src/components/Card/Card.stories.tsx +++ b/app/src/components/Card/Card.stories.tsx @@ -27,7 +27,7 @@ import { Avatar } from '../Avatar/Avatar' import { Badge } from '../Badge' import { Button } from '../Button/Button' import { Popover } from '../Popover' -import { Progress } from '../Progress' +import { LineProgress } from '../Progress/LineProgress' import { Card } from './Card' const meta: Meta = { @@ -452,7 +452,7 @@ export const PodcastCard: Story = { 4:05 10:05 - +
    - + Active @@ -182,13 +178,13 @@ export const TableComponent = () => { nevaeh.simmons@example.com
    - + Product - + Marketing - + +3
    diff --git a/app/docs/components/table/variant/HoverableTable.tsx b/app/docs/components/table/variant/HoverableTable.tsx index ffb306ee..aaad502e 100644 --- a/app/docs/components/table/variant/HoverableTable.tsx +++ b/app/docs/components/table/variant/HoverableTable.tsx @@ -13,7 +13,7 @@ const HoverableTable = () => {

    Team member

    - + 100 Member
    @@ -62,11 +62,11 @@ const HoverableTable = () => { {cell.status ? ( - + Active ) : ( - + Offline )} @@ -77,11 +77,11 @@ const HoverableTable = () => {
    {cell.tags.map((tag, index, arr) => index === arr.length - 1 ? ( - + {tag} ) : ( - + {tag} ), @@ -125,9 +125,9 @@ export const TableComponent = () => {

    Team member

    - - 100 Member - + + 100 Member +
    - + Active @@ -182,13 +182,13 @@ export const TableComponent = () => { nevaeh.simmons@example.com
    - + Product - + Marketing - + +3
    diff --git a/app/docs/components/table/variant/OrdersTable.tsx b/app/docs/components/table/variant/OrdersTable.tsx index f92bedf7..5dd31d4a 100644 --- a/app/docs/components/table/variant/OrdersTable.tsx +++ b/app/docs/components/table/variant/OrdersTable.tsx @@ -1,8 +1,8 @@ 'use client' import Image from 'next/image' -import { Badge, Button, Table } from '../../../../src' -import { CalendarBlank, Crown, Cube, CurrencyDollar, DotsNine, Flag, Spinner, Tag } from 'phosphor-react' +import { CalendarBlank, Cube, CurrencyDollar, DotsNine, Flag, Spinner, Tag } from 'phosphor-react' import { OrderTableData } from '~/public/data/tableData' +import { Badge, Button, Table } from '../../../../src' import TableActionBtn from './TableActionBtn' const OrdersTable = () => { @@ -75,13 +75,7 @@ const OrdersTable = () => {
    - } - iconPosition="left"> - Delivered - + Delivered
    @@ -190,9 +184,7 @@ export const TableComponent = () => {
    - } iconPosition="left"> - Delivered - + Delivered
    diff --git a/app/docs/components/table/variant/StripedTable.tsx b/app/docs/components/table/variant/StripedTable.tsx index 724838ed..71e99026 100644 --- a/app/docs/components/table/variant/StripedTable.tsx +++ b/app/docs/components/table/variant/StripedTable.tsx @@ -13,7 +13,7 @@ const StripedTable = () => {

    Team member

    - + 100 Member
    @@ -62,11 +62,11 @@ const StripedTable = () => { {cell.status ? ( - + Active ) : ( - + Offline )} @@ -77,11 +77,11 @@ const StripedTable = () => {
    {cell.tags.map((tag, index, arr) => index === arr.length - 1 ? ( - + {tag} ) : ( - + {tag} ), @@ -125,7 +125,7 @@ export const TableComponent = () => {

    Team member

    - + 100 Member
    @@ -172,7 +172,7 @@ export const TableComponent = () => {
    - + Active @@ -182,13 +182,13 @@ export const TableComponent = () => { nevaeh.simmons@example.com
    - + Product - + Marketing - + +3
    diff --git a/app/docs/components/table/variant/TransactionsTable.tsx b/app/docs/components/table/variant/TransactionsTable.tsx index 18eb0eb1..24974859 100644 --- a/app/docs/components/table/variant/TransactionsTable.tsx +++ b/app/docs/components/table/variant/TransactionsTable.tsx @@ -1,5 +1,5 @@ 'use client' -import { ArrowsDownUp, Crown, Cube } from 'phosphor-react' +import { ArrowsDownUp, Cube } from 'phosphor-react' import { TransactionsTableData } from '~/public/data/tableData' import { Avatar, Badge, Button, Table } from '../../../../src' import TableActionBtn from './TableActionBtn' @@ -72,13 +72,7 @@ const TransactionsTable = () => {
    - } - iconPosition="left"> - Delivered - + Delivered
    @@ -167,9 +161,7 @@ export const TableComponent = () => {
    - } iconPosition="left"> - Delivered - + Delivered
    diff --git a/app/new/Badge/Badge.tsx b/app/new/Badge/Badge.tsx new file mode 100644 index 00000000..e6ff7fb0 --- /dev/null +++ b/app/new/Badge/Badge.tsx @@ -0,0 +1,106 @@ +import { FC, ReactNode } from 'react' +import { cn } from '~/app/src/helpers/cn' + +interface BadgeProps { + children?: ReactNode + className?: string + dotStyle?: string + color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' + showIcon?: boolean + iconPosition?: 'left' | 'right' + size?: 'sm' | 'md' + variant?: 'base' | 'border' | 'background' + disabled?: boolean +} + +const badgeTheme = { + base: 'inline-flex w-fit items-center font-inherit rounded-full text-body-6 font-medium cursor-pointer', + size: { + sm: 'px-1 h-4', + md: 'px-2 h-5', + }, + disabled: 'pointer-events-none cursor-not-allowed select-none bg-metal-300 opacity-30', + variant: { + base: { + primary: 'bg-primary-50 text-primary-500', + secondary: 'bg-metal-50 text-metal-500', + success: 'bg-success-50 text-success-500', + warning: 'bg-warning-50 text-warning-500', + error: 'bg-error-50 text-error-500', + }, + border: { + primary: 'border border-primary-100 bg-primary-50 text-primary-500', + secondary: 'border border-metal-200 bg-metal-50 text-metal-500', + success: 'border border-success-100 bg-success-50 text-success-500', + warning: 'border border-warning-200 bg-warning-50 text-warning-500', + error: 'border border-error-100 bg-error-50 text-error-500', + }, + background: { + primary: 'bg-primary-500 text-white', + secondary: 'bg-metal-500 text-white', + success: 'bg-success-500 text-white', + warning: 'bg-warning-500 text-white', + error: 'bg-error-500 text-white', + }, + }, + icon: { + base: 'rounded-full', + size: { + sm: 'h-1.5 w-1.5', + md: 'h-2 w-2', + }, + color: { + primary: 'bg-primary-500', + secondary: 'bg-metal-500', + success: 'bg-success-500', + warning: 'bg-warning-500', + error: 'bg-error-500', + }, + }, +} + +export const Badge: FC = ({ + size = 'md', + color = 'primary', + variant = 'base', + children, + disabled = false, + showIcon = false, + iconPosition = 'left', + className, + dotStyle, +}) => { + return ( +
    + {showIcon && iconPosition === 'left' && ( +
    + )} + {children} + {showIcon && iconPosition === 'right' && ( +
    + )} +
    + ) +} diff --git a/app/new/Badge/index.tsx b/app/new/Badge/index.tsx new file mode 100644 index 00000000..b9eff9e1 --- /dev/null +++ b/app/new/Badge/index.tsx @@ -0,0 +1 @@ +export * from './Badge' diff --git a/app/new/Badge/theme.ts b/app/new/Badge/theme.ts new file mode 100644 index 00000000..e69de29b diff --git a/app/new/com.tsx b/app/new/com.tsx new file mode 100644 index 00000000..ae87447e --- /dev/null +++ b/app/new/com.tsx @@ -0,0 +1,106 @@ +'use client' +import { useState } from 'react' + +const Page = () => { + const [active, setActive] = useState(false) + const [theme, setTheme] = useState(false) + + return ( +
    +
    +
    setActive(!active)}> +
    + + {/*
    + + + +
    +
    + + + +
    */} +
    +
    +
    setTheme(!theme)} + className="relative flex h-8 w-32 cursor-pointer items-center gap-4 rounded-full bg-metal-100 px-1.5"> +
    + + + + Light +
    +
    + + + + Dark +
    + +
    +
    + + +
    +
    + ) +} + +export default Page diff --git a/app/new/page.tsx b/app/new/page.tsx index ae87447e..b8c8535d 100644 --- a/app/new/page.tsx +++ b/app/new/page.tsx @@ -1,106 +1,17 @@ -'use client' -import { useState } from 'react' - -const Page = () => { - const [active, setActive] = useState(false) - const [theme, setTheme] = useState(false) +import { Badge } from './Badge' +const page = () => { return ( -
    -
    -
    setActive(!active)}> -
    - - {/*
    - - - -
    -
    - - - -
    */} -
    -
    -
    setTheme(!theme)} - className="relative flex h-8 w-32 cursor-pointer items-center gap-4 rounded-full bg-metal-100 px-1.5"> -
    - - - - Light -
    -
    - - - - Dark -
    - -
    -
    - - +
    +
    + Badges + Badges + Badges + Badges + Badges
    ) } -export default Page +export default page diff --git a/app/src/components/Badge/Badge.stories.tsx b/app/src/components/Badge/Badge.stories.tsx deleted file mode 100644 index 2fda4e7a..00000000 --- a/app/src/components/Badge/Badge.stories.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' -import { Crown } from 'phosphor-react' -import { Badge } from '.' - -const meta: Meta = { - component: Badge, - tags: ['autodocs'], - - decorators: [ - (Story) => ( -
    - -
    - ), - ], - argTypes: { - size: { - description: 'Size variant of the badge.', - control: 'select', - options: ['xs', 'sm'], - table: { - type: { summary: 'string' }, - defaultValue: { summary: 'sm' }, - }, - }, - iconPosition: { - description: 'Position of the icon inside the badge.', - control: 'select', - options: ['left', 'right'], - table: { - type: { summary: 'string' }, - defaultValue: { summary: 'left' }, - }, - }, - color: { - description: 'Available Badge color.', - control: 'select', - options: ['error', 'gray', 'info', 'success', 'warning'], - table: { - type: { summary: 'string' }, - defaultValue: { summary: 'info' }, - }, - }, - colorType: { - description: 'Color type of the badge', - control: 'select', - options: ['light', 'strong'], - table: { - type: { summary: 'string' }, - defaultValue: { summary: 'light' }, - }, - }, - badgeType: { - description: "Type of the badge ('default', 'outline', or 'text').", - control: 'select', - options: ['default', 'outline', 'text'], - table: { - type: { summary: 'string' }, - defaultValue: { summary: 'default' }, - }, - }, - href: { - description: 'URL to navigate when the badge is clicked.', - table: { - type: { summary: 'string' }, - defaultValue: { summary: '' }, - }, - }, - icon: { - description: 'Icon element to be displayed inside the badge.', - control: { - disable: true, - }, - }, - className: { - description: 'Custom CSS class to be added to the badge', - }, - dot: { - description: 'Show a dot on the badge', - control: { type: 'boolean' }, - }, - dotPosition: { - description: 'Position of the dot inside the badge', - control: 'select', - options: ['left', 'right'], - table: { - type: { summary: 'string' }, - defaultValue: { summary: 'left' }, - }, - }, - children: { - description: 'Badge text', - control: { - disable: true, - }, - }, - }, -} - -export default meta -type Story = StoryObj - -export const DefaultBadge: Story = { - args: { - size: 'xs', - colorType: 'light', - color: 'info', - children: 'Default Badge', - icon: null, - }, -} - -export const BadgeWithLeftIcon: Story = { - args: { - size: 'xs', - colorType: 'light', - color: 'info', - children: 'Icon Badge', - icon: , - iconPosition: 'left', - }, -} - -export const BadgeWithRightIcon: Story = { - args: { - ...BadgeWithLeftIcon.args, - size: 'sm', - iconPosition: 'right', - }, -} diff --git a/app/src/components/Badge/Badge.tsx b/app/src/components/Badge/Badge.tsx new file mode 100644 index 00000000..e6ff7fb0 --- /dev/null +++ b/app/src/components/Badge/Badge.tsx @@ -0,0 +1,106 @@ +import { FC, ReactNode } from 'react' +import { cn } from '~/app/src/helpers/cn' + +interface BadgeProps { + children?: ReactNode + className?: string + dotStyle?: string + color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' + showIcon?: boolean + iconPosition?: 'left' | 'right' + size?: 'sm' | 'md' + variant?: 'base' | 'border' | 'background' + disabled?: boolean +} + +const badgeTheme = { + base: 'inline-flex w-fit items-center font-inherit rounded-full text-body-6 font-medium cursor-pointer', + size: { + sm: 'px-1 h-4', + md: 'px-2 h-5', + }, + disabled: 'pointer-events-none cursor-not-allowed select-none bg-metal-300 opacity-30', + variant: { + base: { + primary: 'bg-primary-50 text-primary-500', + secondary: 'bg-metal-50 text-metal-500', + success: 'bg-success-50 text-success-500', + warning: 'bg-warning-50 text-warning-500', + error: 'bg-error-50 text-error-500', + }, + border: { + primary: 'border border-primary-100 bg-primary-50 text-primary-500', + secondary: 'border border-metal-200 bg-metal-50 text-metal-500', + success: 'border border-success-100 bg-success-50 text-success-500', + warning: 'border border-warning-200 bg-warning-50 text-warning-500', + error: 'border border-error-100 bg-error-50 text-error-500', + }, + background: { + primary: 'bg-primary-500 text-white', + secondary: 'bg-metal-500 text-white', + success: 'bg-success-500 text-white', + warning: 'bg-warning-500 text-white', + error: 'bg-error-500 text-white', + }, + }, + icon: { + base: 'rounded-full', + size: { + sm: 'h-1.5 w-1.5', + md: 'h-2 w-2', + }, + color: { + primary: 'bg-primary-500', + secondary: 'bg-metal-500', + success: 'bg-success-500', + warning: 'bg-warning-500', + error: 'bg-error-500', + }, + }, +} + +export const Badge: FC = ({ + size = 'md', + color = 'primary', + variant = 'base', + children, + disabled = false, + showIcon = false, + iconPosition = 'left', + className, + dotStyle, +}) => { + return ( +
    + {showIcon && iconPosition === 'left' && ( +
    + )} + {children} + {showIcon && iconPosition === 'right' && ( +
    + )} +
    + ) +} diff --git a/app/src/components/Badge/index.tsx b/app/src/components/Badge/index.tsx index efbdba8c..b9eff9e1 100644 --- a/app/src/components/Badge/index.tsx +++ b/app/src/components/Badge/index.tsx @@ -1,144 +1 @@ -import type { ComponentProps, FC, PropsWithChildren, ReactElement, ReactNode } from 'react' -import { excludeClassName } from '../../helpers/exclude' -import { cn } from '../../helpers/cn' -import { BadgeColors, BadgeSizes, badgeTheme } from './theme' - -export interface BadgeProps extends PropsWithChildren, 'className' | 'color'>> { - /** - * The color of the badge. - * @type {keyof BadgeColors} - * @default 'info' - */ - color?: keyof BadgeColors - - /** - * The type of color for the badge. - * @type {'light' | 'strong'} - * @default 'strong' - */ - colorType?: 'light' | 'strong' - - /** - * The type of badge. - * @type {'default' | 'outline' | 'text'} - * @default 'default' - */ - badgeType?: 'default' | 'outline' | 'text' - - /** - * The URL to navigate to when the badge is clicked. - * @type {string} - * @default '' - */ - href?: string - - /** - * The icon to display within the badge. - * @type {ReactNode} - * @default '' - */ - icon?: ReactNode - - /** - * The position of the icon within the badge. - * @type {'left' | 'right'} - * @default 'left' - */ - iconPosition?: 'left' | 'right' - - /** - * Additional CSS class name for the badge. - * @type {string} - * @default '' - */ - className?: string - - /** - * The size of the badge. - * @type {keyof BadgeSizes} - * @default 'xs' - */ - size?: keyof BadgeSizes - - /** - * The content of the badge. - * @type {ReactNode} - */ - children?: ReactNode - - /** - * Whether to display a dot on the badge. - * @type {boolean} - * @default false - */ - dot?: boolean - - /** - * The position of the dot within the badge. - * @type {'left' | 'right'} - * @default 'left' - */ - dotPosition?: 'left' | 'right' - - /** - * Custom CSS style for the dot. - * @type {string} - * @default '' - */ - dotStyle?: string - - /** - * Custom CSS style for the icon. - * @type {string} - * @default '' - */ - iconStyle?: string -} - -export const Badge: FC = ({ - children, - color = 'info', - colorType = 'strong', - badgeType = 'default', - href, - icon: Icon, - iconPosition = 'left', - size = 'xs', - dot = false, - dotPosition = 'left', - className, - dotStyle, - iconStyle, - ...props -}): ReactElement => { - const theirProps = excludeClassName(props) - - const theme = badgeTheme - - const Content = (): ReactElement => ( - - {Icon && iconPosition === 'left' && {Icon}} - {dot && dotPosition === 'left' &&
    } - {children && {children}} - {dot && dotPosition === 'right' &&
    } - {Icon && iconPosition === 'right' && {Icon}} -     - ) - - return href ? ( -     - - - ) : ( - - ) -} +export * from './Badge' diff --git a/app/src/components/Badge/theme.ts b/app/src/components/Badge/theme.ts index 657c685e..e69de29b 100644 --- a/app/src/components/Badge/theme.ts +++ b/app/src/components/Badge/theme.ts @@ -1,150 +0,0 @@ -import { KeepColors, KeepSizes } from '../../Keep/KeepTheme' - -interface keepBadgeTheme { - base: string - href: string - badgeType: { - default: { - colorType: { - light: { - color: BadgeColors - } - strong: { - color: BadgeColors - } - } - } - outline: { - colorType: { - light: { - color: BadgeColors - } - strong: { - color: BadgeColors - } - } - } - text: { - colorType: { - light: { - color: BadgeColors - } - strong: { - color: BadgeColors - } - } - } - } - icon: { - off: string - on: string - size: BadgeSizes - } - size: BadgeSizes - dot: string - dotPosition: { - left: string - right: string - } -} - -/** - * Props for the Badge component. - * @interface BadgeProps - * @extends {PropsWithChildren, 'className' | 'color'>>} - */ - -export interface BadgeColors extends Pick { - [key: string]: string -} - -export interface BadgeSizes extends Pick { - [key: string]: string -} - -export const badgeTheme: keepBadgeTheme = { - base: 'flex h-fit w-fit items-center justify-center gap-1 font-medium rounded-md cursor-pointer', - badgeType: { - default: { - colorType: { - light: { - color: { - info: 'bg-primary-25 text-primary-400 hover:bg-primary-50', - gray: 'bg-metal-50 text-metal-500 hover:bg-metal-100', - error: 'bg-error-25 text-error-500 hover:bg-error-50 ', - success: 'bg-success-50 text-success-500 hover:bg-success-100', - warning: 'bg-warning-100 text-warning-700 hover:bg-warning-200', - }, - }, - strong: { - color: { - info: 'bg-primary-500 text-white hover:bg-primary-400', - gray: 'bg-metal-500 text-white hover:bg-metal-400', - error: 'bg-error-500 text-white hover:bg-error-400 ', - success: 'bg-success-500 text-white hover:bg-success-400', - warning: 'bg-warning-600 text-white hover:bg-warning-400', - }, - }, - }, - }, - outline: { - colorType: { - light: { - color: { - info: 'bg-white border border-primary-100 text-primary-400 hover:bg-primary-100', - gray: 'bg-white border border-metal-200 text-metal-500 hover:bg-metal-100', - error: 'bg-white border border-error-100 text-error-500 hover:bg-error-100', - success: 'bg-white border border-success-100 text-success-500 hover:bg-success-100', - warning: 'bg-white border border-warning-200 text-warning-700 hover:bg-warning-100', - }, - }, - strong: { - color: { - info: 'bg-primary-25 border border-primary-100 text-primary-400 hover:bg-primary-100', - gray: 'bg-metal-25 border border-metal-200 text-metal-500 hover:bg-metal-100', - error: 'bg-error-25 border border-error-100 text-error-500 hover:bg-error-100', - success: 'bg-success-25 border border-success-100 text-success-500 hover:bg-success-100', - warning: 'bg-warning-25 border border-warning-200 text-warning-700 hover:bg-warning-100', - }, - }, - }, - }, - text: { - colorType: { - light: { - color: { - info: 'bg-transparent text-primary-400 hover:bg-primary-100', - gray: 'bg-transparent text-metal-500 hover:bg-metal-100', - error: 'bg-transparent text-error-500 hover:bg-error-100 ', - success: 'bg-transparent text-success-500 hover:bg-success-100', - warning: 'bg-transparent text-warning-700 hover:bg-warning-100', - }, - }, - strong: { - color: { - info: 'bg-transparent text-primary-400 hover:bg-primary-100', - gray: 'bg-transparent text-metal-500 hover:bg-metal-100', - error: 'bg-transparent text-error-500 hover:bg-error-100 ', - success: 'bg-transparent text-success-500 hover:bg-success-100', - warning: 'bg-transparent text-warning-700 hover:bg-warning-100', - }, - }, - }, - }, - }, - href: 'group', - icon: { - off: '', - on: '', - size: { - xs: 'w-3 h-3 text-body-6', - sm: 'w-3.5 h-3.5 text-body-5', - }, - }, - dot: 'h-2 w-2 rounded-full bg-current', - dotPosition: { left: 'pr-2', right: 'pl-2' }, - size: { - xs: 'py-[3px] px-2 text-body-6', - sm: 'py-[5px] px-2 text-body-5', - }, -} diff --git a/app/src/components/Card/Card.stories.tsx b/app/src/components/Card/Card.stories.tsx index c1e4f1fe..59406547 100644 --- a/app/src/components/Card/Card.stories.tsx +++ b/app/src/components/Card/Card.stories.tsx @@ -321,7 +321,7 @@ export const RecentPostsCard: Story = { - Tips & Advice + Tips & Advice Keep React @@ -353,9 +353,7 @@ export const EcommerceProductCard: Story = { - - For Sale - + For Sale $9.99 diff --git a/app/src/components/Sidebar/SidebarItem.tsx b/app/src/components/Sidebar/SidebarItem.tsx index fbac764d..fd79fff9 100644 --- a/app/src/components/Sidebar/SidebarItem.tsx +++ b/app/src/components/Sidebar/SidebarItem.tsx @@ -110,7 +110,6 @@ export const SidebarItem = forwardRef( className, icon: Icon, label, - labelColor = 'info', theme: customTheme = {}, ...props }, @@ -147,7 +146,7 @@ export const SidebarItem = forwardRef( )} {!isCollapsed && {children}} {!isCollapsed && label && ( -
    - + Offline @@ -214,15 +207,9 @@ export const DefaultTable: Story = {
    - - Product - - - Marketing - - - +3 - + Product + Marketing + +3
    @@ -264,7 +251,7 @@ export const DefaultTable: Story = {
    - + Active @@ -274,15 +261,9 @@ export const DefaultTable: Story = { nathan.roberts@example.com
    - - Product - - - Marketing - - - +3 - + Product + Marketing + +3
    @@ -323,7 +304,7 @@ export const DefaultTable: Story = {
    - + Offline @@ -334,15 +315,9 @@ export const DefaultTable: Story = {
    - - Javascript - - - React - - - +7 - + Javascript + React + +7
    @@ -383,7 +358,7 @@ export const DefaultTable: Story = {
    - + Active @@ -394,15 +369,9 @@ export const DefaultTable: Story = {
    - - Adobe - - - Figma - - - +6 - + Adobe + Figma + +6
    @@ -500,7 +469,7 @@ export const CashOutTransitionTable: Story = {
    - } iconPosition="left"> + Delivered
    @@ -542,7 +511,7 @@ export const CashOutTransitionTable: Story = {
    - } iconPosition="left"> + Delivered
    @@ -583,7 +552,7 @@ export const CashOutTransitionTable: Story = {
    - } iconPosition="left"> + Delivered
    @@ -624,7 +593,7 @@ export const CashOutTransitionTable: Story = {
    - } iconPosition="left"> + Delivered
    @@ -665,7 +634,7 @@ export const CashOutTransitionTable: Story = {
    - } iconPosition="left"> + Delivered
    @@ -759,7 +728,7 @@ export const OrdersTable: Story = {
    - } iconPosition="left"> + Delivered
    @@ -794,7 +763,7 @@ export const OrdersTable: Story = {
    - } iconPosition="left"> + Delivered
    @@ -829,7 +798,7 @@ export const OrdersTable: Story = {
    - } iconPosition="left"> + Pending
    @@ -864,7 +833,7 @@ export const OrdersTable: Story = {
    - } iconPosition="left"> + Delivered
    @@ -899,7 +868,7 @@ export const OrdersTable: Story = {
    - } iconPosition="left"> + Pending
    @@ -934,7 +903,7 @@ export const OrdersTable: Story = {
    - } iconPosition="left"> + Delivered
    From 6d5c55feb1374f8187717d28d4aa2687f788cace Mon Sep 17 00:00:00 2001 From: Arifulislam5577 Date: Mon, 5 Feb 2024 20:01:35 +0600 Subject: [PATCH 19/70] Updated: Play component updated. --- app/components/Navbar.tsx | 6 +- app/docs/components/pagination/Pagination.mdx | 6 +- app/docs/components/play/Play.mdx | 50 +++++++ app/docs/components/play/PlayApi.ts | 44 +++++++ app/docs/components/play/index.tsx | 7 + app/docs/components/play/page.tsx | 19 +++ .../components/play/variant/CustomizePlay.tsx | 37 ++++++ .../components/play/variant/DefaultPlay.tsx | 33 +++++ .../play/variant/PlayColorVariant.tsx | 57 ++++++++ .../play/variant/PlaySizeVariant.tsx | 57 ++++++++ app/docs/layout.tsx | 4 +- app/new/page.tsx | 10 +- app/src/components/Badge/Badge.tsx | 52 +------- app/src/components/Badge/theme.ts | 91 +++++++++++++ app/src/components/Modal/theme.ts | 2 +- app/src/components/Play/Dismiss.tsx | 21 +++ app/src/components/Play/Frame.tsx | 27 ++++ app/src/components/Play/Play.tsx | 76 +++++++++++ app/src/components/Play/PlayContext.tsx | 18 +++ app/src/components/Play/Player.tsx | 18 +++ app/src/components/Play/index.tsx | 1 + app/src/components/Play/theme.ts | 64 +++++++++ app/src/components/index.tsx | 1 + package.json | 3 +- routes/routes.ts | 123 ++++++++++-------- 25 files changed, 704 insertions(+), 123 deletions(-) create mode 100644 app/docs/components/play/Play.mdx create mode 100644 app/docs/components/play/PlayApi.ts create mode 100644 app/docs/components/play/index.tsx create mode 100644 app/docs/components/play/page.tsx create mode 100644 app/docs/components/play/variant/CustomizePlay.tsx create mode 100644 app/docs/components/play/variant/DefaultPlay.tsx create mode 100644 app/docs/components/play/variant/PlayColorVariant.tsx create mode 100644 app/docs/components/play/variant/PlaySizeVariant.tsx create mode 100644 app/src/components/Play/Dismiss.tsx create mode 100644 app/src/components/Play/Frame.tsx create mode 100644 app/src/components/Play/Play.tsx create mode 100644 app/src/components/Play/PlayContext.tsx create mode 100644 app/src/components/Play/Player.tsx create mode 100644 app/src/components/Play/index.tsx create mode 100644 app/src/components/Play/theme.ts diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx index 7a3aef38..f7a5deec 100644 --- a/app/components/Navbar.tsx +++ b/app/components/Navbar.tsx @@ -1,12 +1,12 @@ 'use client' -import Link from 'next/link' import Image from 'next/image' -import { useEffect, useState } from 'react' +import Link from 'next/link' import { usePathname } from 'next/navigation' import { List, MagnifyingGlass, X } from 'phosphor-react' -import Search from './Search' +import { useEffect, useState } from 'react' import { gettingStartedRoutes, navbarRoutes, routes } from '../../routes/routes' import { Accordion, Typography } from '../src' +import Search from './Search' const Navbar = () => { const [active, setActive] = useState(false) diff --git a/app/docs/components/pagination/Pagination.mdx b/app/docs/components/pagination/Pagination.mdx index f0982704..21667e37 100644 --- a/app/docs/components/pagination/Pagination.mdx +++ b/app/docs/components/pagination/Pagination.mdx @@ -1,13 +1,11 @@ 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 CodePreview from '../../../components/CodePreview' +import ComponentApi from '../../../components/ComponentApi' ## Table of Contents diff --git a/app/docs/components/play/Play.mdx b/app/docs/components/play/Play.mdx new file mode 100644 index 00000000..5ad239e9 --- /dev/null +++ b/app/docs/components/play/Play.mdx @@ -0,0 +1,50 @@ +import CodePreview from '../../../components/CodePreview' +import { DefaultPlay, DefaultPlayCode } from './variant/DefaultPlay' +import { PlaySize, PlaySizeCode } from './variant/PlaySizeVariant' +import { PlayColor, PlayColorCode } from './variant/PlayColorVariant' +import { CustomizePlay, CustomizePlayCode } from './variant/CustomizePlay' + +import ComponentApi from '../../../components/ComponentApi' +import { playDataAPI } from './PlayApi' + +## 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. + +## Default Play + +Quickly implement the default Play button to add interactivity and user engagement. + + + + + +## Play size variant + +Choose from a range of sizes to fit your design needs, from `'sm'`, `'md'`, `'lg'`, `'xl'`, `'2xl'`. + + + + + +## Play color variant + +Customize the Play button with different color options, including `'primary'`, `'secondary'`, `'success'`, `'warning'`, and `'error'`. + + + + + +## How to customize + +Tailor the Play button to match your design by adding a className prop. + + + + + +## API Reference + +Explore the available props for the Play component: + + diff --git a/app/docs/components/play/PlayApi.ts b/app/docs/components/play/PlayApi.ts new file mode 100644 index 00000000..cb1b7e60 --- /dev/null +++ b/app/docs/components/play/PlayApi.ts @@ -0,0 +1,44 @@ +export const playDataAPI = [ + { + id: 1, + propsName: 'children', + propsType: 'ReactNode', + propsDescription: 'The content to be rendered inside the Play component.', + default: '', + }, + { + id: 2, + propsName: 'className', + propsType: 'string', + propsDescription: 'Additional CSS class to apply to the Play component.', + default: '', + }, + { + id: 3, + propsName: 'shadowStyle', + propsType: 'string', + propsDescription: 'The style of the shadow for the Play component.', + default: '', + }, + { + id: 4, + propsName: 'size', + propsType: ['sm', 'md', 'lg', 'xl', '2xl'], + propsDescription: 'The size of the Play component.', + default: 'md', + }, + { + id: 5, + propsName: 'color', + propsType: ['primary', 'secondary', 'success', 'warning', 'error'], + propsDescription: 'The color scheme of the Play component.', + default: 'primary', + }, + { + id: 6, + propsName: 'shadow', + propsType: 'boolean', + propsDescription: 'Indicates whether to show a shadow for the Play component.', + default: false, + }, +] diff --git a/app/docs/components/play/index.tsx b/app/docs/components/play/index.tsx new file mode 100644 index 00000000..07aa759f --- /dev/null +++ b/app/docs/components/play/index.tsx @@ -0,0 +1,7 @@ +'use client' +import type { FC } from 'react' +import PlayDocsContent from './Play.mdx' + +const PlayDocs: FC = () => + +export default PlayDocs diff --git a/app/docs/components/play/page.tsx b/app/docs/components/play/page.tsx new file mode 100644 index 00000000..1858ba30 --- /dev/null +++ b/app/docs/components/play/page.tsx @@ -0,0 +1,19 @@ +import type { Metadata, NextPage } from 'next' +import PlayDocs from '.' +import { DocsContentLayout } from '../../../components/DocsContentLayout' + +export const metadata: Metadata = { + description: + 'The Play component is a button that, when clicked, opens a centered modal with an embedded YouTube video. Enhance your web app user experience with this sleek and interactive video playback feature. Customize the button appearance using provided themes for a seamless integration.', + title: 'Play - Keep React', +} + +const page: NextPage = () => { + return ( + + + + ) +} + +export default page diff --git a/app/docs/components/play/variant/CustomizePlay.tsx b/app/docs/components/play/variant/CustomizePlay.tsx new file mode 100644 index 00000000..489d9315 --- /dev/null +++ b/app/docs/components/play/variant/CustomizePlay.tsx @@ -0,0 +1,37 @@ +'use client' +import { Play } from '../../../../src' + +const CustomizePlay = () => { + return ( +
    + + + + + + +
    + ) +} + +const CustomizePlayCode = ` +'use client' +import { Play } from 'keep-react' + +export const PlayComponent = () => { + return ( + + + + + + + ) +} +` + +export { CustomizePlay, CustomizePlayCode } diff --git a/app/docs/components/play/variant/DefaultPlay.tsx b/app/docs/components/play/variant/DefaultPlay.tsx new file mode 100644 index 00000000..e1dd7857 --- /dev/null +++ b/app/docs/components/play/variant/DefaultPlay.tsx @@ -0,0 +1,33 @@ +'use client' +import { Play } from '../../../../src' + +const DefaultPlay = () => { + return ( +
    + + + + + + +
    + ) +} + +const DefaultPlayCode = ` +'use client' +import { Play } from 'keep-react' + +export const PlayComponent = () => { + return ( + + + + + + + ) +} +` + +export { DefaultPlay, DefaultPlayCode } diff --git a/app/docs/components/play/variant/PlayColorVariant.tsx b/app/docs/components/play/variant/PlayColorVariant.tsx new file mode 100644 index 00000000..6e60603b --- /dev/null +++ b/app/docs/components/play/variant/PlayColorVariant.tsx @@ -0,0 +1,57 @@ +'use client' +import { Play } from '../../../../src' + +const PlayColor = () => { + return ( +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + ) +} + +const PlayColorCode = ` +'use client' +import { Play } from 'keep-react' + +export const PlayComponent = () => { + return ( + + + + + + + ) +} +` + +export { PlayColor, PlayColorCode } diff --git a/app/docs/components/play/variant/PlaySizeVariant.tsx b/app/docs/components/play/variant/PlaySizeVariant.tsx new file mode 100644 index 00000000..f08769a5 --- /dev/null +++ b/app/docs/components/play/variant/PlaySizeVariant.tsx @@ -0,0 +1,57 @@ +'use client' +import { Play } from '../../../../src' + +const PlaySize = () => { + return ( +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + ) +} + +const PlaySizeCode = ` +'use client' +import { Play } from 'keep-react' + +export const PlayComponent = () => { + return ( + + + + + + + ) +} +` + +export { PlaySize, PlaySizeCode } diff --git a/app/docs/layout.tsx b/app/docs/layout.tsx index a9d51196..f256b849 100644 --- a/app/docs/layout.tsx +++ b/app/docs/layout.tsx @@ -1,10 +1,10 @@ /* eslint-disable no-undef */ 'use client' import Link from 'next/link' -import { Accordion, Typography } from '../src' -import { ReactNode, useEffect, useState } from 'react' import { usePathname } from 'next/navigation' +import { ReactNode, useEffect, useState } from 'react' import { gettingStartedRoutes, routes } from '../../routes/routes' +import { Accordion, Typography } from '../src' export interface Sections { id: number diff --git a/app/new/page.tsx b/app/new/page.tsx index b8c8535d..4bbe307e 100644 --- a/app/new/page.tsx +++ b/app/new/page.tsx @@ -1,15 +1,9 @@ -import { Badge } from './Badge' +'use client' const page = () => { return (
    -
    - Badges - Badges - Badges - Badges - Badges -
    +
    ) } diff --git a/app/src/components/Badge/Badge.tsx b/app/src/components/Badge/Badge.tsx index e6ff7fb0..d2a95156 100644 --- a/app/src/components/Badge/Badge.tsx +++ b/app/src/components/Badge/Badge.tsx @@ -1,5 +1,6 @@ import { FC, ReactNode } from 'react' -import { cn } from '~/app/src/helpers/cn' +import { cn } from '../../helpers/cn' +import { badgeTheme } from './theme' interface BadgeProps { children?: ReactNode @@ -11,52 +12,7 @@ interface BadgeProps { size?: 'sm' | 'md' variant?: 'base' | 'border' | 'background' disabled?: boolean -} - -const badgeTheme = { - base: 'inline-flex w-fit items-center font-inherit rounded-full text-body-6 font-medium cursor-pointer', - size: { - sm: 'px-1 h-4', - md: 'px-2 h-5', - }, - disabled: 'pointer-events-none cursor-not-allowed select-none bg-metal-300 opacity-30', - variant: { - base: { - primary: 'bg-primary-50 text-primary-500', - secondary: 'bg-metal-50 text-metal-500', - success: 'bg-success-50 text-success-500', - warning: 'bg-warning-50 text-warning-500', - error: 'bg-error-50 text-error-500', - }, - border: { - primary: 'border border-primary-100 bg-primary-50 text-primary-500', - secondary: 'border border-metal-200 bg-metal-50 text-metal-500', - success: 'border border-success-100 bg-success-50 text-success-500', - warning: 'border border-warning-200 bg-warning-50 text-warning-500', - error: 'border border-error-100 bg-error-50 text-error-500', - }, - background: { - primary: 'bg-primary-500 text-white', - secondary: 'bg-metal-500 text-white', - success: 'bg-success-500 text-white', - warning: 'bg-warning-500 text-white', - error: 'bg-error-500 text-white', - }, - }, - icon: { - base: 'rounded-full', - size: { - sm: 'h-1.5 w-1.5', - md: 'h-2 w-2', - }, - color: { - primary: 'bg-primary-500', - secondary: 'bg-metal-500', - success: 'bg-success-500', - warning: 'bg-warning-500', - error: 'bg-error-500', - }, - }, + [key: string]: any } export const Badge: FC = ({ @@ -69,9 +25,11 @@ export const Badge: FC = ({ iconPosition = 'left', className, dotStyle, + ...props }) => { return (
    = ({ className, ...props }) => { + const { handleModal } = usePlayContext() + return ( + + ) +} diff --git a/app/src/components/Play/Frame.tsx b/app/src/components/Play/Frame.tsx new file mode 100644 index 00000000..618ecd22 --- /dev/null +++ b/app/src/components/Play/Frame.tsx @@ -0,0 +1,27 @@ +'use client' +import { FC, ReactNode } from 'react' +import { cn } from '../../helpers/cn' +import { playTheme } from './theme' + +export interface FrameProps { + children?: ReactNode + className?: string + src?: string + [key: string]: any +} + +export const Frame: FC = ({ className, children, src, ...props }) => { + return ( +
    + {children ? ( + children + ) : ( + + )} +
    + ) +} diff --git a/app/src/components/Play/Play.tsx b/app/src/components/Play/Play.tsx new file mode 100644 index 00000000..85596699 --- /dev/null +++ b/app/src/components/Play/Play.tsx @@ -0,0 +1,76 @@ +'use client' +import { FC, ReactNode, useEffect, useState } from 'react' +import { cn } from '../../helpers/cn' +import { Dismiss } from './Dismiss' +import { Frame } from './Frame' +import { PlayContext } from './PlayContext' +import { Player } from './Player' +import { playTheme } from './theme' + +interface PlayProps { + children?: ReactNode + className?: string + shadowStyle?: string + size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' + color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' + shadow?: boolean + [key: string]: any +} + +export const PlayComponent: FC = ({ + children, + className, + shadow = false, + color = 'primary', + size = 'md', + shadowStyle, + ...props +}) => { + const [show, setShow] = useState(false) + + const handleModal = () => { + setShow(!show) + } + + useEffect(() => { + const handleKeyDown = (event: { key: string; keyCode: number }) => { + if ((event.key === 'Escape' || event.keyCode === 27) && show) { + setShow(false) + } + } + document.addEventListener('keydown', handleKeyDown) + return () => { + document.removeEventListener('keydown', handleKeyDown) + } + }, [show]) + return ( +
    + + {show && children && {children}} + {show && shadow &&
    } +
    + ) +} + +Player.displayName = 'Play.Player' +Dismiss.displayName = 'Play.Close' +Frame.displayName = 'Play.Frame' + +export const Play = Object.assign(PlayComponent, { + Player, + Close: Dismiss, + Frame, +}) diff --git a/app/src/components/Play/PlayContext.tsx b/app/src/components/Play/PlayContext.tsx new file mode 100644 index 00000000..fd890b4c --- /dev/null +++ b/app/src/components/Play/PlayContext.tsx @@ -0,0 +1,18 @@ +'use client' +import { createContext, useContext } from 'react' + +export type PlayPropsContext = { + handleModal?: () => void +} + +export const PlayContext = createContext(undefined) + +export function usePlayContext(): PlayPropsContext { + const context = useContext(PlayContext) + + if (!context) { + throw new Error('usePlayContext should be used within the PlayContext provider!') + } + + return context +} diff --git a/app/src/components/Play/Player.tsx b/app/src/components/Play/Player.tsx new file mode 100644 index 00000000..b4b072dd --- /dev/null +++ b/app/src/components/Play/Player.tsx @@ -0,0 +1,18 @@ +'use client' +import { FC, ReactNode } from 'react' +import { cn } from '../../helpers/cn' +import { playTheme } from './theme' + +export interface PlayerProps { + children?: ReactNode + className?: string + [key: string]: any +} + +export const Player: FC = ({ children, className, ...props }) => { + return ( +
    + {children} +
    + ) +} diff --git a/app/src/components/Play/index.tsx b/app/src/components/Play/index.tsx new file mode 100644 index 00000000..4ff446fd --- /dev/null +++ b/app/src/components/Play/index.tsx @@ -0,0 +1 @@ +export * from './Play' diff --git a/app/src/components/Play/theme.ts b/app/src/components/Play/theme.ts new file mode 100644 index 00000000..2ec3441f --- /dev/null +++ b/app/src/components/Play/theme.ts @@ -0,0 +1,64 @@ +interface PlayTheme { + base: string + size: { + sm: string + md: string + lg: string + xl: string + '2xl': string + } + color: { + primary: string + secondary: string + success: string + warning: string + error: string + } + iconSize: { + sm: string + md: string + lg: string + xl: string + '2xl': string + } + player: string + dismiss: string + frame: string + shadow: string +} + +export const playTheme: PlayTheme = { + base: 'flex items-center justify-center rounded-full transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 active:focus:scale-95', + size: { + sm: 'h-11 w-11', + md: 'h-14 w-14', + lg: 'h-16 w-16', + xl: 'h-20 w-20', + '2xl': 'h-24 w-24', + }, + color: { + primary: + 'bg-primary-500 hover:bg-primary-600 text-white focus-visible:ring-primary-100 disabled:cursor-not-allowed disabled:bg-primary-100', + secondary: + 'bg-metal-600 hover:bg-metal-700 text-white focus-visible:ring-metal-200 disabled:cursor-not-allowed disabled:bg-metal-200', + success: + 'bg-success-500 hover:bg-success-600 text-white focus-visible:ring-success-100 disabled:cursor-not-allowed disabled:bg-success-100', + warning: + 'bg-warning-500 hover:bg-warning-600 text-white focus-visible:ring-warning-100 disabled:cursor-not-allowed disabled:bg-warning-100', + error: + 'bg-error-500 hover:bg-error-600 text-white focus-visible:ring-error-100 disabled:cursor-not-allowed disabled:bg-error-100', + }, + iconSize: { + sm: 'h-4 w-4', + md: 'h-5 w-5', + lg: 'h-5 w-5', + xl: 'h-8 w-8', + '2xl': 'h-10 w-10', + }, + player: 'fixed z-[999] inset-0 flex items-center justify-center top-0', + frame: + 'relative z-[60] animate-keep-bounce overflow-hidden bg-white md:h-[541px] md:w-[961px] border-4 border-error-500', + dismiss: + 'absolute right-5 bottom-5 flex items-center justify-center h-10 w-10 z-[60] bg-metal-900 fill-white text-body-4', + shadow: 'fixed inset-0 z-[55] h-full w-full bg-metal-900/80', +} diff --git a/app/src/components/index.tsx b/app/src/components/index.tsx index a12b952b..26d09285 100644 --- a/app/src/components/index.tsx +++ b/app/src/components/index.tsx @@ -23,6 +23,7 @@ export * from './Modal' export * from './Navigation' export * from './Notification' export * from './Pagination' +export * from './Play' export * from './Popover' export * from './Progress/CircleProgress' export * from './Progress/LineProgress' diff --git a/package.json b/package.json index d7ec02dd..7756895d 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,8 @@ "recharts": "^2.10.3", "tailwind-merge": "^2.2.0", "tailwindcss": "^3.4.0", - "typescript": "^5.3.3" + "typescript": "^5.3.3", + "uuid": "^9.0.1" }, "devDependencies": { "@babel/core": "^7.23.6", diff --git a/routes/routes.ts b/routes/routes.ts index 4ce39fc9..89da7604 100644 --- a/routes/routes.ts +++ b/routes/routes.ts @@ -1,4 +1,5 @@ import { ReactElement } from 'react' +import { v4 as generatedID } from 'uuid' import { BarChartComponent, CheckboxGroupComponent, @@ -12,7 +13,7 @@ import { } from '../app/components/ComponentsList' interface routerPath { - id: number + id: string name: string href: string tag?: boolean @@ -23,7 +24,7 @@ interface routerPath { export const routes: routerPath[] = [ { - id: 1, + id: generatedID(), name: 'Accordion', href: '/docs/components/accordion', tag: false, @@ -31,7 +32,7 @@ export const routes: routerPath[] = [ folderName: 'Accordion', }, { - id: 2, + id: generatedID(), name: 'Alert', href: '/docs/components/alert', tag: false, @@ -39,7 +40,7 @@ export const routes: routerPath[] = [ folderName: 'Alert', }, { - id: 3, + id: generatedID(), name: 'Area Chart', href: '/docs/components/areaChart', tag: false, @@ -47,7 +48,7 @@ export const routes: routerPath[] = [ folderName: 'Chart', }, { - id: 4, + id: generatedID(), name: 'Avatar', href: '/docs/components/avatar', tag: false, @@ -55,7 +56,7 @@ export const routes: routerPath[] = [ folderName: 'Avatar', }, { - id: 6, + id: generatedID(), name: 'Badge', folderName: 'Badge', href: '/docs/components/badge', @@ -63,7 +64,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 43, + id: generatedID(), name: 'Bar Chart', folderName: 'Chart', href: '/docs/components/barChart', @@ -71,7 +72,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 7, + id: generatedID(), name: 'BreadCrumb', folderName: 'Breadcrumb', href: '/docs/components/breadcrumb', @@ -79,7 +80,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 8, + id: generatedID(), name: 'Button', folderName: 'Button', href: '/docs/components/button', @@ -87,7 +88,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 9, + id: generatedID(), name: 'Button Group', folderName: 'Button', href: '/docs/components/buttonGroup', @@ -95,7 +96,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 10, + id: generatedID(), name: 'Card', folderName: 'Card', href: '/docs/components/card', @@ -103,7 +104,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 11, + id: generatedID(), name: 'Carousel', folderName: 'Carousel', href: '/docs/components/carousel', @@ -111,7 +112,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 12, + id: generatedID(), name: 'CheckBox', folderName: 'CheckBox', href: '/docs/components/checkbox', @@ -119,7 +120,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 13, + id: generatedID(), name: 'CheckBox Group', folderName: 'CheckboxGroup', href: '/docs/components/checkboxGroup', @@ -127,7 +128,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 14, + id: generatedID(), name: 'Date Picker', folderName: 'DatePicker', href: '/docs/components/datePicker', @@ -135,7 +136,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 15, + id: generatedID(), name: 'Dropdown', folderName: 'Dropdown', href: '/docs/components/dropdown', @@ -143,7 +144,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 16, + id: generatedID(), name: 'Empty', folderName: 'Empty', href: '/docs/components/empty', @@ -151,7 +152,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 17, + id: generatedID(), name: 'Modal', folderName: 'Modal', href: '/docs/components/modal', @@ -159,7 +160,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 18, + id: generatedID(), name: 'Navbar', folderName: 'Navbar', href: '/docs/components/navbar', @@ -167,7 +168,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 19, + id: generatedID(), name: 'Notification', folderName: 'Notification', href: '/docs/components/notification', @@ -175,7 +176,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 20, + id: generatedID(), name: 'Number Input', folderName: 'FormControls', href: '/docs/components/numberInput', @@ -183,7 +184,15 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 22, + id: generatedID(), + name: 'Play', + folderName: 'Play', + href: '/docs/components/play', + tag: false, + deprecate: false, + }, + { + id: generatedID(), name: 'Progress', folderName: 'Progress', href: '/docs/components/progress', @@ -191,7 +200,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 44, + id: generatedID(), name: 'Pagination', folderName: 'Pagination', href: '/docs/components/pagination', @@ -199,7 +208,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 45, + id: generatedID(), name: 'Popover', folderName: 'Popover', href: '/docs/components/popover', @@ -207,7 +216,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 23, + id: generatedID(), name: 'Radio', folderName: 'FormControls', href: '/docs/components/radio', @@ -215,7 +224,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 24, + id: generatedID(), name: 'Rating', folderName: 'Rating', href: '/docs/components/rating', @@ -223,7 +232,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 25, + id: generatedID(), name: 'Search Bar', folderName: 'SearchBar', href: '/docs/components/searchBar', @@ -231,7 +240,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 26, + id: generatedID(), name: 'Sidebar', folderName: 'Sidebar', href: '/docs/components/sidebar', @@ -239,7 +248,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 27, + id: generatedID(), name: 'Skeleton', folderName: 'Skeleton', href: '/docs/components/skeleton', @@ -247,7 +256,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 28, + id: generatedID(), name: 'Slider', folderName: 'Slider', href: '/docs/components/slider', @@ -255,7 +264,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 29, + id: generatedID(), name: 'Spinner', folderName: 'Spinner', href: '/docs/components/spinner', @@ -263,7 +272,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 30, + id: generatedID(), name: 'Statistic', folderName: 'Statistic', href: '/docs/components/statistic', @@ -271,7 +280,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 31, + id: generatedID(), name: 'Steps', folderName: 'Steps', href: '/docs/components/steps', @@ -279,7 +288,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 32, + id: generatedID(), name: 'Switch', folderName: 'FormControls', href: '/docs/components/switch', @@ -287,7 +296,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 33, + id: generatedID(), name: 'Table', folderName: 'Table', href: '/docs/components/table', @@ -295,7 +304,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 34, + id: generatedID(), name: 'Tabs', folderName: 'Tabs', href: '/docs/components/tabs', @@ -303,7 +312,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 35, + id: generatedID(), name: 'Tag', folderName: 'Tag', href: '/docs/components/tag', @@ -311,7 +320,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 36, + id: generatedID(), name: 'Text Area', folderName: 'FormControls', href: '/docs/components/textArea', @@ -319,7 +328,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 37, + id: generatedID(), name: 'Text Input', folderName: 'FormControls', href: '/docs/components/textInput', @@ -327,7 +336,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 38, + id: generatedID(), name: 'Timeline', folderName: 'Timeline', href: '/docs/components/timeline', @@ -335,7 +344,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 39, + id: generatedID(), name: 'Tooltip', folderName: 'Tooltip', href: '/docs/components/tooltip', @@ -343,7 +352,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 40, + id: generatedID(), name: 'Tree', folderName: 'Tree', href: '/docs/components/tree', @@ -351,7 +360,7 @@ export const routes: routerPath[] = [ deprecate: false, }, { - id: 41, + id: generatedID(), name: 'Upload', folderName: 'Upload', href: '/docs/components/upload', @@ -362,12 +371,12 @@ export const routes: routerPath[] = [ export const gettingStartedRoutes: routerPath[] = [ { - id: 1, + id: generatedID(), name: 'Introduction', href: '/docs/getting-started/Introduction', }, { - id: 2, + id: generatedID(), name: 'Typography', href: '/docs/getting-started/Typography', }, @@ -375,13 +384,13 @@ export const gettingStartedRoutes: routerPath[] = [ export const navbarRoutes: routerPath[] = [ { - id: 1, + id: generatedID(), href: 'https://keepdesign.io', name: 'Figma', redirect: true, }, { - id: 2, + id: generatedID(), href: '/docs/getting-started/Introduction', name: 'Documentation', redirect: false, @@ -389,54 +398,54 @@ export const navbarRoutes: routerPath[] = [ ] export const ComponentList: { - id: number + id: string href: string component: () => ReactElement }[] = [ { - id: 1, + id: generatedID(), href: '/docs/components/pagination', component: PaginationComponent, }, { - id: 2, + id: generatedID(), href: '/docs/components/tabs', component: TabsComponent, }, { - id: 3, + id: generatedID(), href: '/docs/components/modal', component: ModalComponent, }, { - id: 4, + id: generatedID(), href: '/docs/components/tooltip', component: TooltipComponent, }, { - id: 5, + id: generatedID(), href: '/docs/components/barChart', component: BarChartComponent, }, { - id: 6, + id: generatedID(), href: '/docs/components/checkboxGroup', component: CheckboxGroupComponent, }, { - id: 7, + id: generatedID(), href: '/docs/components/radio', component: RadioSelectComponent, }, { - id: 8, + id: generatedID(), href: '/docs/components/slider', component: SliderComponent, }, { - id: 9, + id: generatedID(), href: '/docs/components/datePicker', component: DatePickerComponent, }, From 0f08832b792bb35d4001c6a32444f44628879f2b Mon Sep 17 00:00:00 2001 From: Arifulislam5577 Date: Tue, 6 Feb 2024 19:59:32 +0600 Subject: [PATCH 20/70] Added: Divider component added. --- app/docs/components/alert/alert.mdx | 2 +- app/docs/components/avatar/avatar.mdx | 2 +- app/docs/components/badge/badge.mdx | 2 +- app/docs/components/breadcrumb/breadcrumb.mdx | 2 +- app/docs/components/carousel/carousel.mdx | 2 +- app/docs/components/divider/Divider.mdx | 50 ++++++ app/docs/components/divider/DividerAPI.ts | 37 ++++ app/docs/components/divider/index.tsx | 7 + app/docs/components/divider/page.tsx | 19 +++ .../divider/variant/DefaultDivider.tsx | 33 ++++ .../divider/variant/DividerAlign.tsx | 29 ++++ .../divider/variant/DividerColor.tsx | 33 ++++ .../divider/variant/DividerSize.tsx | 33 ++++ app/docs/components/empty/Empty.mdx | 2 +- app/docs/components/progress/progress.mdx | 2 +- app/new/Divider/Divider.tsx | 40 +++++ app/new/Divider/index.tsx | 1 + app/new/Divider/theme.ts | 161 ++++++++++++++++++ app/new/page.tsx | 29 +++- .../components/DatePicker/DateRangePicker.tsx | 4 +- .../DatePicker/SingleDatePicker.tsx | 4 +- app/src/components/Divider/Divider.tsx | 46 +++++ app/src/components/Divider/index.tsx | 1 + app/src/components/Divider/theme.ts | 161 ++++++++++++++++++ app/src/components/index.tsx | 1 + routes/routes.ts | 8 + 26 files changed, 695 insertions(+), 16 deletions(-) create mode 100644 app/docs/components/divider/Divider.mdx create mode 100644 app/docs/components/divider/DividerAPI.ts create mode 100644 app/docs/components/divider/index.tsx create mode 100644 app/docs/components/divider/page.tsx create mode 100644 app/docs/components/divider/variant/DefaultDivider.tsx create mode 100644 app/docs/components/divider/variant/DividerAlign.tsx create mode 100644 app/docs/components/divider/variant/DividerColor.tsx create mode 100644 app/docs/components/divider/variant/DividerSize.tsx create mode 100644 app/new/Divider/Divider.tsx create mode 100644 app/new/Divider/index.tsx create mode 100644 app/new/Divider/theme.ts create mode 100644 app/src/components/Divider/Divider.tsx create mode 100644 app/src/components/Divider/index.tsx create mode 100644 app/src/components/Divider/theme.ts diff --git a/app/docs/components/alert/alert.mdx b/app/docs/components/alert/alert.mdx index e8b1b4ff..1b7cf18b 100644 --- a/app/docs/components/alert/alert.mdx +++ b/app/docs/components/alert/alert.mdx @@ -5,7 +5,7 @@ import { AlertWithBgColor, AlertWithBgColorCode } from './variant/AlertWithBgCol import { AlertWithCard, AlertWithCardCode } from './variant/AlertWithCard' import CodePreview from '../../../components/CodePreview' -import CssThemePreview from '../../../components/CssThemePreview' + import ComponentApi from '../../../components/ComponentApi' import { alertApiData, dismissButtonApi } from './alertApi' diff --git a/app/docs/components/avatar/avatar.mdx b/app/docs/components/avatar/avatar.mdx index 8fba45b3..ddd35197 100644 --- a/app/docs/components/avatar/avatar.mdx +++ b/app/docs/components/avatar/avatar.mdx @@ -7,7 +7,7 @@ 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' ## Table of Contents diff --git a/app/docs/components/badge/badge.mdx b/app/docs/components/badge/badge.mdx index 99b65aff..1ebb9ff4 100644 --- a/app/docs/components/badge/badge.mdx +++ b/app/docs/components/badge/badge.mdx @@ -5,7 +5,7 @@ import { BadgeWithDot, BadgeWithDotCode } from './variant/BadgeWithDot' import { badgeApiData } from './badgeApi' import CodePreview from '../../../components/CodePreview' -import CssThemePreview from '../../../components/CssThemePreview' + import ComponentApi from '../../../components/ComponentApi' ## Table of Contents diff --git a/app/docs/components/breadcrumb/breadcrumb.mdx b/app/docs/components/breadcrumb/breadcrumb.mdx index 880a6d59..6cc3bdd3 100644 --- a/app/docs/components/breadcrumb/breadcrumb.mdx +++ b/app/docs/components/breadcrumb/breadcrumb.mdx @@ -5,7 +5,7 @@ import { BreadcrumbDividerIcon, BreadcrumbDividerIconCode } from './variant/Brea import { breadcrumbApiData, breadcrumbItemApiData } from './breadcrumbApi' import CodePreview from '../../../components/CodePreview' -import CssThemePreview from '../../../components/CssThemePreview' + import ComponentApi from '../../../components/ComponentApi' ## Table of Contents diff --git a/app/docs/components/carousel/carousel.mdx b/app/docs/components/carousel/carousel.mdx index a5b3be31..3b577576 100644 --- a/app/docs/components/carousel/carousel.mdx +++ b/app/docs/components/carousel/carousel.mdx @@ -10,7 +10,7 @@ import { CarouselWithIndicator, CarouselWithIndicatorCode } from './variant/Caro import { carouselDataApi } from './carouselApi' import CodePreview from '../../../components/CodePreview' -import CssThemePreview from '../../../components/CssThemePreview' + 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/empty/Empty.mdx b/app/docs/components/empty/Empty.mdx index 5b69cced..02ec71cd 100644 --- a/app/docs/components/empty/Empty.mdx +++ b/app/docs/components/empty/Empty.mdx @@ -7,7 +7,7 @@ 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' ## Table of Contents diff --git a/app/docs/components/progress/progress.mdx b/app/docs/components/progress/progress.mdx index 80c235a8..25606b7f 100644 --- a/app/docs/components/progress/progress.mdx +++ b/app/docs/components/progress/progress.mdx @@ -7,7 +7,7 @@ import { CustomizeProgress, CustomizeProgressCode } from './variant/CustomizePro import { LineProgressDataApi, circleProgressDataApi } from './progressApi' import CodePreview from '../../../components/CodePreview' -import CssThemePreview from '../../../components/CssThemePreview' + import ComponentApi from '../../../components/ComponentApi' ## Table of Contents diff --git a/app/new/Divider/Divider.tsx b/app/new/Divider/Divider.tsx new file mode 100644 index 00000000..447e62aa --- /dev/null +++ b/app/new/Divider/Divider.tsx @@ -0,0 +1,40 @@ +'use client' +import { FC, ReactNode } from 'react' +import { cn } from '~/app/src/helpers/cn' +import { dividerTheme } from './theme' + +interface DividerProps { + color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' + size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' + variant?: 'start' | 'end' | 'center' + className?: string + children?: ReactNode +} + +export const Divider: FC = ({ + color = 'primary', + size = 'md', + variant = 'center', + className, + children, +}) => { + const { withChildren, withOutChildren } = dividerTheme + if (!children) { + return ( +
    + ) + } + return ( +
    + {children} +
    + ) +} diff --git a/app/new/Divider/index.tsx b/app/new/Divider/index.tsx new file mode 100644 index 00000000..1b872641 --- /dev/null +++ b/app/new/Divider/index.tsx @@ -0,0 +1 @@ +export * from './Divider' diff --git a/app/new/Divider/theme.ts b/app/new/Divider/theme.ts new file mode 100644 index 00000000..4d3c808a --- /dev/null +++ b/app/new/Divider/theme.ts @@ -0,0 +1,161 @@ +interface DividerThemeInterface { + withOutChildren: { + base: string + color: { + primary: string + secondary: string + success: string + warning: string + error: string + } + size: { + sm: string + md: string + lg: string + xl: string + '2xl': string + } + } + withChildren: { + base: string + textColor: { + primary: string + secondary: string + success: string + warning: string + error: string + } + size: { + start: { + sm: string + md: string + lg: string + xl: string + '2xl': string + } + center: { + sm: string + md: string + lg: string + xl: string + '2xl': string + } + end: { + sm: string + md: string + lg: string + xl: string + '2xl': string + } + } + color: { + start: { + primary: string + secondary: string + success: string + warning: string + error: string + } + center: { + primary: string + secondary: string + success: string + warning: string + error: string + } + end: { + primary: string + secondary: string + success: string + warning: string + error: string + } + } + variant: { + start: string + end: string + center: string + } + } +} + +export const dividerTheme: DividerThemeInterface = { + withOutChildren: { + base: 'border-b-0 block', + color: { + primary: 'border-t-primary-100', + secondary: 'border-t-metal-100', + success: 'border-t-success-100', + warning: 'border-t-warning-100', + error: 'border-t-error-100', + }, + size: { + sm: 'border-t-[0.5px]', + md: 'border-t', + lg: 'border-t-2', + xl: 'border-t-4', + '2xl': 'border-t-8', + }, + }, + withChildren: { + base: 'flex items-center text-body-4', + textColor: { + primary: 'text-primary-500', + secondary: 'text-metal-500', + success: 'text-success-500', + warning: 'text-warning-500', + error: 'text-error-500', + }, + size: { + start: { + sm: 'after:border-t-[0.5px]', + md: 'after:border-t', + lg: 'after:border-t-2', + xl: 'after:border-t-4', + '2xl': 'after:border-t-8', + }, + center: { + sm: 'before:border-t-[0.5px] after:border-t-[0.5px]', + md: 'before:border-t after:border-t', + lg: 'before:border-t-2 after:border-t-2', + xl: 'before:border-t-4 after:border-t-4', + '2xl': 'before:border-t-8 after:border-t-8', + }, + end: { + sm: 'before:border-t-[0.5px]', + md: 'before:border-t', + lg: 'before:border-t-2', + xl: 'before:border-t-4', + '2xl': 'before:border-t-8', + }, + }, + color: { + start: { + primary: 'after:border-primary-100', + secondary: 'after:border-metal-100', + success: 'after:border-success-100', + warning: 'after:border-warning-100', + error: 'after:border-error-100', + }, + center: { + primary: 'before:border-primary-100 after:border-primary-100', + secondary: 'before:border-metal-100 after:border-metal-100', + success: 'before:border-success-100 after:border-success-100', + warning: 'before:border-warning-100 after:border-warning-100', + error: 'before:border-error-100 after:border-error-100', + }, + end: { + primary: 'before:border-primary-100', + secondary: 'before:border-metal-100', + success: 'before:border-success-100', + warning: 'before:border-warning-100', + error: 'before:border-error-100', + }, + }, + variant: { + start: 'after:ms-6 after:flex-[1_1_0%]', + end: 'before:me-6 before:flex-[1_1_0%]', + center: 'before:me-6 before:flex-[1_1_0%] after:ms-6 after:flex-[1_1_0%]', + }, + }, +} diff --git a/app/new/page.tsx b/app/new/page.tsx index 4bbe307e..d7e0ff5f 100644 --- a/app/new/page.tsx +++ b/app/new/page.tsx @@ -1,11 +1,30 @@ -'use client' +import { Divider } from './Divider' -const page = () => { +const Page = () => { return ( -
    -
    +
    +
    + + + + + + + +
    + + Divider + + + Divider + + + Divider + +
    +
    ) } -export default page +export default Page diff --git a/app/src/components/DatePicker/DateRangePicker.tsx b/app/src/components/DatePicker/DateRangePicker.tsx index 8d10fa39..b8106366 100644 --- a/app/src/components/DatePicker/DateRangePicker.tsx +++ b/app/src/components/DatePicker/DateRangePicker.tsx @@ -1,12 +1,12 @@ 'use client' import { FC, createElement, forwardRef, useState } from 'react' import RangePicker from 'react-datepicker' -import { useDatePickerContext } from './DatePickerContext' import { CustomInput } from './CustomInput' +import { useDatePickerContext } from './DatePickerContext' export const DateRangePicker: FC = () => { const { showTwoMonth, rangeDate, placeholder } = useDatePickerContext() - const [selectedStartDate, setSelectedStartDate] = useState(null) + const [selectedStartDate, setSelectedStartDate] = useState(new Date()) const [selectedEndDate, setSelectedEndDate] = useState(null) return ( { const { showTwoMonth, singleDate, placeholder } = useDatePickerContext() - const [date, setDate] = useState() + const [date, setDate] = useState(new Date()) const handleChange = (date: Date | null) => { setDate(date) singleDate && singleDate(date) diff --git a/app/src/components/Divider/Divider.tsx b/app/src/components/Divider/Divider.tsx new file mode 100644 index 00000000..67cb2a61 --- /dev/null +++ b/app/src/components/Divider/Divider.tsx @@ -0,0 +1,46 @@ +'use client' +import { FC, ReactNode } from 'react' +import { cn } from '../../helpers/cn' +import { dividerTheme } from './theme' + +interface DividerProps { + color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' + size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' + variant?: 'start' | 'end' | 'center' + className?: string + children?: ReactNode + [key: string]: any +} + +export const Divider: FC = ({ + color = 'secondary', + size = 'md', + variant = 'center', + className, + children, + ...props +}) => { + const { withChildren, withOutChildren } = dividerTheme + if (!children) { + return ( +
    + ) + } + return ( +
    + {children} +
    + ) +} diff --git a/app/src/components/Divider/index.tsx b/app/src/components/Divider/index.tsx new file mode 100644 index 00000000..1b872641 --- /dev/null +++ b/app/src/components/Divider/index.tsx @@ -0,0 +1 @@ +export * from './Divider' diff --git a/app/src/components/Divider/theme.ts b/app/src/components/Divider/theme.ts new file mode 100644 index 00000000..4d3c808a --- /dev/null +++ b/app/src/components/Divider/theme.ts @@ -0,0 +1,161 @@ +interface DividerThemeInterface { + withOutChildren: { + base: string + color: { + primary: string + secondary: string + success: string + warning: string + error: string + } + size: { + sm: string + md: string + lg: string + xl: string + '2xl': string + } + } + withChildren: { + base: string + textColor: { + primary: string + secondary: string + success: string + warning: string + error: string + } + size: { + start: { + sm: string + md: string + lg: string + xl: string + '2xl': string + } + center: { + sm: string + md: string + lg: string + xl: string + '2xl': string + } + end: { + sm: string + md: string + lg: string + xl: string + '2xl': string + } + } + color: { + start: { + primary: string + secondary: string + success: string + warning: string + error: string + } + center: { + primary: string + secondary: string + success: string + warning: string + error: string + } + end: { + primary: string + secondary: string + success: string + warning: string + error: string + } + } + variant: { + start: string + end: string + center: string + } + } +} + +export const dividerTheme: DividerThemeInterface = { + withOutChildren: { + base: 'border-b-0 block', + color: { + primary: 'border-t-primary-100', + secondary: 'border-t-metal-100', + success: 'border-t-success-100', + warning: 'border-t-warning-100', + error: 'border-t-error-100', + }, + size: { + sm: 'border-t-[0.5px]', + md: 'border-t', + lg: 'border-t-2', + xl: 'border-t-4', + '2xl': 'border-t-8', + }, + }, + withChildren: { + base: 'flex items-center text-body-4', + textColor: { + primary: 'text-primary-500', + secondary: 'text-metal-500', + success: 'text-success-500', + warning: 'text-warning-500', + error: 'text-error-500', + }, + size: { + start: { + sm: 'after:border-t-[0.5px]', + md: 'after:border-t', + lg: 'after:border-t-2', + xl: 'after:border-t-4', + '2xl': 'after:border-t-8', + }, + center: { + sm: 'before:border-t-[0.5px] after:border-t-[0.5px]', + md: 'before:border-t after:border-t', + lg: 'before:border-t-2 after:border-t-2', + xl: 'before:border-t-4 after:border-t-4', + '2xl': 'before:border-t-8 after:border-t-8', + }, + end: { + sm: 'before:border-t-[0.5px]', + md: 'before:border-t', + lg: 'before:border-t-2', + xl: 'before:border-t-4', + '2xl': 'before:border-t-8', + }, + }, + color: { + start: { + primary: 'after:border-primary-100', + secondary: 'after:border-metal-100', + success: 'after:border-success-100', + warning: 'after:border-warning-100', + error: 'after:border-error-100', + }, + center: { + primary: 'before:border-primary-100 after:border-primary-100', + secondary: 'before:border-metal-100 after:border-metal-100', + success: 'before:border-success-100 after:border-success-100', + warning: 'before:border-warning-100 after:border-warning-100', + error: 'before:border-error-100 after:border-error-100', + }, + end: { + primary: 'before:border-primary-100', + secondary: 'before:border-metal-100', + success: 'before:border-success-100', + warning: 'before:border-warning-100', + error: 'before:border-error-100', + }, + }, + variant: { + start: 'after:ms-6 after:flex-[1_1_0%]', + end: 'before:me-6 before:flex-[1_1_0%]', + center: 'before:me-6 before:flex-[1_1_0%] after:ms-6 after:flex-[1_1_0%]', + }, + }, +} diff --git a/app/src/components/index.tsx b/app/src/components/index.tsx index 26d09285..2b95f493 100644 --- a/app/src/components/index.tsx +++ b/app/src/components/index.tsx @@ -12,6 +12,7 @@ export * from './Chart/BarChart' export * from './CheckBox' export * from './CheckboxGroup' export * from './DatePicker' +export * from './Divider' export * from './Dropdown' export * from './Empty' export * from './FormControls/Label' diff --git a/routes/routes.ts b/routes/routes.ts index 89da7604..ffecc989 100644 --- a/routes/routes.ts +++ b/routes/routes.ts @@ -127,6 +127,14 @@ export const routes: routerPath[] = [ tag: false, deprecate: false, }, + { + id: generatedID(), + name: 'Divider', + folderName: 'Divider', + href: '/docs/components/divider', + tag: false, + deprecate: false, + }, { id: generatedID(), name: 'Date Picker', From 0cee0763652ed2412bc28196afeacc4b821f1778 Mon Sep 17 00:00:00 2001 From: Arifulislam5577 Date: Wed, 7 Feb 2024 20:48:56 +0600 Subject: [PATCH 21/70] Updated: Upload component updated processing. --- app/new/Upload/Body.tsx | 28 ++++++ app/new/Upload/File.tsx | 24 +++++ app/new/Upload/Footer.tsx | 13 +++ app/new/Upload/Icon.tsx | 16 ++++ app/new/Upload/Text.tsx | 12 +++ app/new/Upload/Upload.tsx | 39 ++++++++ app/new/Upload/UploadContext.tsx | 20 ++++ app/new/Upload/index.tsx | 1 + app/new/Upload/theme.ts | 0 app/new/page.tsx | 96 ++++++++++++++----- app/new/page1.tsx | 33 +++++++ .../components/FormControls/NumberInput.tsx | 1 + package.json | 1 + public/images/icon/folder.svg | 30 ++++++ 14 files changed, 290 insertions(+), 24 deletions(-) create mode 100644 app/new/Upload/Body.tsx create mode 100644 app/new/Upload/File.tsx create mode 100644 app/new/Upload/Footer.tsx create mode 100644 app/new/Upload/Icon.tsx create mode 100644 app/new/Upload/Text.tsx create mode 100644 app/new/Upload/Upload.tsx create mode 100644 app/new/Upload/UploadContext.tsx create mode 100644 app/new/Upload/index.tsx create mode 100644 app/new/Upload/theme.ts create mode 100644 app/new/page1.tsx create mode 100644 public/images/icon/folder.svg diff --git a/app/new/Upload/Body.tsx b/app/new/Upload/Body.tsx new file mode 100644 index 00000000..532f5536 --- /dev/null +++ b/app/new/Upload/Body.tsx @@ -0,0 +1,28 @@ +'use client' +import { FC, ReactNode } from 'react' +import { useDropzone } from 'react-dropzone' +import { cn } from '~/app/src/helpers/cn' +import { useUploadContext } from './UploadContext' + +export interface BodyProps { + children?: ReactNode + className?: string +} + +export const Body: FC = ({ children, className }) => { + const { options, horizontal } = useUploadContext() + const { getRootProps, getInputProps } = useDropzone(options) + return ( +
    + + {children} +
    + ) +} diff --git a/app/new/Upload/File.tsx b/app/new/Upload/File.tsx new file mode 100644 index 00000000..81fbc2ee --- /dev/null +++ b/app/new/Upload/File.tsx @@ -0,0 +1,24 @@ +'use client' +import { Trash } from 'phosphor-react' +import { FC, ReactNode } from 'react' +import { cn } from '~/app/src/helpers/cn' + +export interface FileProps { + children?: ReactNode + className?: string + icon?: ReactNode + onClick?: () => void +} + +export const File: FC = ({ children, className, onClick, icon }) => { + return ( +
  • + {children} + +
    • + ) +} diff --git a/app/new/Upload/Footer.tsx b/app/new/Upload/Footer.tsx new file mode 100644 index 00000000..4d60b261 --- /dev/null +++ b/app/new/Upload/Footer.tsx @@ -0,0 +1,13 @@ +'use client' +import { FC, ReactNode } from 'react' +import { cn } from '~/app/src/helpers/cn' + +export interface FooterProps { + children?: ReactNode + className?: string + isFileExists?: boolean +} + +export const Footer: FC = ({ children, className, isFileExists = false }) => { + return
    {isFileExists ? children : null}
    +} diff --git a/app/new/Upload/Icon.tsx b/app/new/Upload/Icon.tsx new file mode 100644 index 00000000..075fb681 --- /dev/null +++ b/app/new/Upload/Icon.tsx @@ -0,0 +1,16 @@ +'use client' +import { FC, ReactNode } from 'react' +import { cn } from '~/app/src/helpers/cn' + +export interface IconProps { + children?: ReactNode + className?: string +} + +export const Icon: FC = ({ children, className }) => { + return ( +
    + {children} +
    + ) +} diff --git a/app/new/Upload/Text.tsx b/app/new/Upload/Text.tsx new file mode 100644 index 00000000..8b65c06d --- /dev/null +++ b/app/new/Upload/Text.tsx @@ -0,0 +1,12 @@ +'use client' +import { FC, ReactNode } from 'react' +import { cn } from '~/app/src/helpers/cn' + +export interface TextProps { + children?: ReactNode + className?: string +} + +export const Text: FC = ({ children, className }) => { + return
    {children}
    +} diff --git a/app/new/Upload/Upload.tsx b/app/new/Upload/Upload.tsx new file mode 100644 index 00000000..91cbca77 --- /dev/null +++ b/app/new/Upload/Upload.tsx @@ -0,0 +1,39 @@ +'use client' +import { FC, ReactNode } from 'react' +import { DropzoneOptions } from 'react-dropzone' +import { cn } from '~/app/src/helpers/cn' +import { Body } from './Body' +import { File } from './File' +import { Footer } from './Footer' +import { Icon } from './Icon' +import { Text } from './Text' +import { UploadContext } from './UploadContext' + +export interface UploadProps { + children?: ReactNode + className?: string + options?: DropzoneOptions | undefined + horizontal?: boolean +} + +const UploadComponent: FC = ({ children, className, options, horizontal }) => { + return ( +
    + {children} +
    + ) +} + +Body.displayName = 'Upload.Body' +Icon.displayName = 'Upload.Icon' +Text.displayName = 'Upload.Text' +Footer.displayName = 'Upload.Footer' +File.displayName = 'Upload.File' + +export const Upload = Object.assign(UploadComponent, { + Body, + Icon, + Text, + Footer, + File, +}) diff --git a/app/new/Upload/UploadContext.tsx b/app/new/Upload/UploadContext.tsx new file mode 100644 index 00000000..d6a76120 --- /dev/null +++ b/app/new/Upload/UploadContext.tsx @@ -0,0 +1,20 @@ +'use client' +import { createContext, useContext } from 'react' +import { DropzoneOptions } from 'react-dropzone' + +export type UploadPropsContext = { + options?: DropzoneOptions | undefined + horizontal?: boolean +} + +export const UploadContext = createContext(undefined) + +export function useUploadContext(): UploadPropsContext { + const context = useContext(UploadContext) + + if (!context) { + throw new Error('useUploadContext should be used within the UploadContext provider!') + } + + return context +} diff --git a/app/new/Upload/index.tsx b/app/new/Upload/index.tsx new file mode 100644 index 00000000..193e7f36 --- /dev/null +++ b/app/new/Upload/index.tsx @@ -0,0 +1 @@ +export * from './Upload' diff --git a/app/new/Upload/theme.ts b/app/new/Upload/theme.ts new file mode 100644 index 00000000..e69de29b diff --git a/app/new/page.tsx b/app/new/page.tsx index d7e0ff5f..91fdbf36 100644 --- a/app/new/page.tsx +++ b/app/new/page.tsx @@ -1,30 +1,78 @@ -import { Divider } from './Divider' +'use client' +import Image from 'next/image' +import { Info } from 'phosphor-react' +import { useCallback, useState } from 'react' +import { Typography } from '../src' +import { Upload } from './Upload' -const Page = () => { - return ( -
    -
    - - - - - +interface UploadFile { + path: string + lastModified: number + lastModifiedDate: string + name: string + size: number + type: string + [key: string]: any +} + +export default function MyDropzone() { + const [files, setFiles] = useState([]) + const onDrop = useCallback((acceptedFiles: any) => { + setFiles(acceptedFiles) + }, []) - -
    - - Divider - - - Divider - - - Divider - -
    + return ( +
    +
    + + + + folder + + + + Drag & Drop or Choose File to Upload + + + DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB. + + + + 0}> + + + Uploaded Files + + + {files?.map((file) => {file?.name})} + + + + + + + folder + + + + Choose File to Upload + + + PDF and JPG formats + + + + 0}> + + + Uploaded Files + + + {files?.map((file) => {file?.name})} + + +
    ) } - -export default Page diff --git a/app/new/page1.tsx b/app/new/page1.tsx new file mode 100644 index 00000000..8ef764e2 --- /dev/null +++ b/app/new/page1.tsx @@ -0,0 +1,33 @@ +'use client' +import Image from 'next/image' +import { Button, Typography } from '../src' +import { Upload } from './Upload' + +const Page = () => { + return ( +
    +
    + + + + folder + + + + Drag & Drop or Choose File to Upload + + + DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB. + + + + + +
    +
    + ) +} + +export default Page diff --git a/app/src/components/FormControls/NumberInput.tsx b/app/src/components/FormControls/NumberInput.tsx index 609dbf07..136aefad 100644 --- a/app/src/components/FormControls/NumberInput.tsx +++ b/app/src/components/FormControls/NumberInput.tsx @@ -84,6 +84,7 @@ export const NumberInput = forwardRef( theme.field.icon.position.incrementIcon, disabled && theme.field.icon.disabled, )} + role="button" onClick={() => setValue((prevVal: number): number => prevVal + 1)}> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 1b592b751b38f0d68149b356c1b55f7d21c24345 Mon Sep 17 00:00:00 2001 From: Arifulislam5577 Date: Thu, 8 Feb 2024 12:13:22 +0600 Subject: [PATCH 22/70] Updated: Upload component updated. --- app/docs/components/upload/Upload.mdx | 87 ++----- app/docs/components/upload/UploadApi.ts | 56 ++--- .../upload/variant/DefaultUpload.tsx | 92 ++++++-- .../variant/HorizontailUploadFailed.tsx | 56 ----- .../variant/HorizontalDisabledUpload.tsx | 50 ---- .../upload/variant/HorizontalUpload.tsx | 91 +++++-- .../variant/HorizontalUploadPending.tsx | 56 ----- .../variant/HorizontalUploadSuccess.tsx | 52 ---- .../upload/variant/SingleUpload.tsx | 82 +++++++ .../upload/variant/UploadDisabled.tsx | 98 ++++++-- .../upload/variant/UploadFailed.tsx | 54 ----- .../upload/variant/UploadPending.tsx | 53 ----- .../upload/variant/UploadSuccess.tsx | 50 ---- app/new/Upload/File.tsx | 4 +- app/new/Upload/Upload.tsx | 7 +- app/new/Upload/UploadContext.tsx | 2 +- app/new/page.tsx | 8 +- app/src/components/Upload/Body.tsx | 28 +++ app/src/components/Upload/File.tsx | 24 ++ app/src/components/Upload/Footer.tsx | 13 + app/src/components/Upload/Icon.tsx | 16 ++ app/src/components/Upload/InputField.tsx | 87 ------- app/src/components/Upload/Text.tsx | 12 + app/src/components/Upload/Upload.stories.tsx | 127 ---------- app/src/components/Upload/Upload.tsx | 40 ++++ app/src/components/Upload/UploadContext.tsx | 107 +-------- app/src/components/Upload/UploadFailed.tsx | 55 ----- .../components/Upload/UploadHorizontal.tsx | 79 ------- app/src/components/Upload/UploadPending.tsx | 56 ----- app/src/components/Upload/UploadSuccess.tsx | 39 --- app/src/components/Upload/index.tsx | 173 +------------- app/src/components/Upload/theme.ts | 222 ------------------ app/src/components/Upload/useProgress.tsx | 33 --- 33 files changed, 476 insertions(+), 1533 deletions(-) delete mode 100644 app/docs/components/upload/variant/HorizontailUploadFailed.tsx delete mode 100644 app/docs/components/upload/variant/HorizontalDisabledUpload.tsx delete mode 100644 app/docs/components/upload/variant/HorizontalUploadPending.tsx delete mode 100644 app/docs/components/upload/variant/HorizontalUploadSuccess.tsx create mode 100644 app/docs/components/upload/variant/SingleUpload.tsx delete mode 100644 app/docs/components/upload/variant/UploadFailed.tsx delete mode 100644 app/docs/components/upload/variant/UploadPending.tsx delete mode 100644 app/docs/components/upload/variant/UploadSuccess.tsx create mode 100644 app/src/components/Upload/Body.tsx create mode 100644 app/src/components/Upload/File.tsx create mode 100644 app/src/components/Upload/Footer.tsx create mode 100644 app/src/components/Upload/Icon.tsx delete mode 100644 app/src/components/Upload/InputField.tsx create mode 100644 app/src/components/Upload/Text.tsx delete mode 100644 app/src/components/Upload/Upload.stories.tsx create mode 100644 app/src/components/Upload/Upload.tsx delete mode 100644 app/src/components/Upload/UploadFailed.tsx delete mode 100644 app/src/components/Upload/UploadHorizontal.tsx delete mode 100644 app/src/components/Upload/UploadPending.tsx delete mode 100644 app/src/components/Upload/UploadSuccess.tsx delete mode 100644 app/src/components/Upload/useProgress.tsx diff --git a/app/docs/components/upload/Upload.mdx b/app/docs/components/upload/Upload.mdx index 3e8d5148..53545b07 100644 --- a/app/docs/components/upload/Upload.mdx +++ b/app/docs/components/upload/Upload.mdx @@ -1,101 +1,46 @@ import { DefaultUpload, DefaultUploadCode } from './variant/DefaultUpload' -import { UploadPending, UploadPendingCode } from './variant/UploadPending' -import { UploadFailed, UploadFailedCode } from './variant/UploadFailed' -import { UploadSuccess, UploadSuccessCode } from './variant/UploadSuccess' -import { UploadDisabled, UploadDisabledCode } from './variant/UploadDisabled' -import { HorizontalDisabledUpload, HorizontalDisabledUploadCode } from './variant/HorizontalDisabledUpload' -import { HorizontalUploadSuccess, HorizontalUploadSuccessCode } from './variant/HorizontalUploadSuccess' -import { HorizontalUploadFailed, HorizontalUploadFailedCode } from './variant/HorizontailUploadFailed' -import { HorizontalUploadPending, HorizontalUploadPendingCode } from './variant/HorizontalUploadPending' +import { DisabledUpload, DisabledUploadCode } from './variant/UploadDisabled' import { HorizontalUpload, HorizontalUploadCode } from './variant/HorizontalUpload' +import { SingleUpload, SingleUploadCode } from './variant/SingleUpload' import { uploadApiData } from './UploadApi' -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 -Upload Component is a user interface element that enables users to upload files or media from their local device to a web application or platform. It provides a means to select files, preview them if applicable, and initiate the upload process. The component is essential for allowing users to share content, images, documents, and other files with the application or website. +Upload Component is a user interface element that enables users to upload files or media from their local device to a web application or platform. The component is essential for allowing users to share content, images, documents, and other files with the application or website. ## Default Upload -The Default Upload component enables users to choose and upload a file.The `onFileChange` callback is used to handle the file selection and update the selected file's name. +The Default Upload component allows users to select and upload a file. When a file is selected, the `onDrop` callback is triggered to handle the file selection and update the name of the selected file. -## Upload Pending - -The `progressType` prop is set to `"pending"` to indicate that the progress is pending. - - - - - -## Upload Failed - -The `progressType` prop is set to `"error"` to indicate that the progress is failed. - - - - - -## Upload Success - -The `progressType` prop is set to `"success"` to indicate that the progress is success. - - - - - ## Horizontal Upload -The `horizontal` prop is set to `true`, allowing for a horizontal layout. +To display the upload component in a `horizontal` layout, set the `horizontal` prop to `true`. -## Horizontal Upload Pending - -The `progressType="pending"` and `horizontal={true}` props indicate that the horizontal upload progress is pending. - - - - - -## Horizontal Upload Failed - -The `progressType="error"` and `horizontal={true}` props indicate that the horizontal upload progress is failed. - - - - - -## Horizontal Upload Success +## Single Upload -The `progressType="success"` and `horizontal={true}` props indicate that the horizontal upload progress is success. +By default, the upload component allows users to select multiple files. To restrict users to uploading a single file, set the `multiple` prop to `false` within the `options` object. - - - - -## Horizontal Disabled Upload - -The `horizontal={true}` and `disabled={true}` props indicate that the horizontal upload disabled. - - - + + ## Upload Disabled -The `disabled={true}` prop indicate that the upload component is disabled. +To prevent users from uploading files, use the `disabled` prop set to `true` within the `options` props. - - + + ## API Reference @@ -103,3 +48,7 @@ The `disabled={true}` prop indicate that the upload component is disabled. Explore the available props for the upload component + +## Reference + +Our Upload component is built using the `react-dropzone` package. For more information , follow the documentation [react-dropzone](https://react-dropzone.js.org). diff --git a/app/docs/components/upload/UploadApi.ts b/app/docs/components/upload/UploadApi.ts index 400137a6..7c37f991 100644 --- a/app/docs/components/upload/UploadApi.ts +++ b/app/docs/components/upload/UploadApi.ts @@ -1,58 +1,30 @@ export const uploadApiData = [ { id: 1, - propsName: 'file', - propsType: 'string', - propsDescription: "The selected file's name or path for display.", - default: 'None', + propsName: 'children', + propsType: 'ReactNode', + propsDescription: 'Children is upload content', + default: 'ReactNode', }, { id: 2, - propsName: 'horizontal', - propsType: 'boolean', - propsDescription: 'Arranges the component horizontally if set to true.', - default: 'false', + propsName: 'className', + propsType: 'string', + propsDescription: 'Custom className for customize style', + default: '', }, { id: 3, - propsName: 'disabled', + propsName: 'horizontal', propsType: 'boolean', - propsDescription: 'Disables interactions with the upload component.', + propsDescription: 'Upload show horizontally or vertically', default: 'false', }, { id: 4, - propsName: 'showProgressBar', - propsType: 'boolean', - propsDescription: 'Indicates whether to display a progress bar during file upload.', - default: 'false', - }, - { - id: 5, - propsName: 'progressType', - propsType: ['success', 'error', 'pending'], - propsDescription: 'Sets the visual style of the progress bar based on the upload status.', - default: 'pending', - }, - { - id: 6, - propsName: 'progress', - propsType: 'number', - propsDescription: 'The progress percentage of the file upload.', - default: '0', - }, - { - id: 7, - propsName: 'uploadTime', - propsType: 'string', - propsDescription: 'Timestamp indicating the time of the upload.', - default: '0', - }, - { - id: 8, - propsName: 'onFileChange', - propsType: 'Function', - propsDescription: 'Callback function when the selected file changes.', - default: '(e:ChangeEvent)=>void', + propsName: 'options', + propsType: 'DropzoneOptions', + propsDescription: 'Option is object for controlling the upload', + default: 'DropzoneOptions', }, ] diff --git a/app/docs/components/upload/variant/DefaultUpload.tsx b/app/docs/components/upload/variant/DefaultUpload.tsx index ab0f3da9..beb9c421 100644 --- a/app/docs/components/upload/variant/DefaultUpload.tsx +++ b/app/docs/components/upload/variant/DefaultUpload.tsx @@ -1,33 +1,81 @@ 'use client' -import { ChangeEvent, useState } from 'react' -import { Upload } from '../../../../src' +import Image from 'next/image' +import { Info } from 'phosphor-react' +import { useCallback, useState } from 'react' +import { UploadedFile } from '~/app/new/page' +import { Typography, Upload } from '../../../../src' const DefaultUpload = () => { - const [fileName, setFileName] = useState('') - const handleFileChange = (event: ChangeEvent) => { - const file = event.target.files && event.target.files[0] - if (file) { - setFileName(file.name) - } - } - - return + const [files, setFiles] = useState([]) + const onDrop = useCallback((acceptedFiles: any) => { + setFiles(acceptedFiles) + }, []) + return ( + + + + folder + + + + Drag & Drop or Choose File to Upload + + + DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB. + + + + 0}> + + + Uploaded Files + + + {files?.map((file) => {file?.name})} + + + + ) } const DefaultUploadCode = ` -"use client"; -import { useState } from "react"; -import { Upload } from "keep-react"; +'use client' +import Image from 'next/image' +import { Info } from 'phosphor-react' +import { useCallback, useState } from 'react' +import { Typography, Upload } from 'keep-react' export const UploadComponent = () => { - const [fileName, setFileName] = useState(""); - const handleFileChange = (event) => { - const file = event.target.files[0]; - if (file) { - setFileName(file.name); - } - }; - return ; + const [files, setFiles] = useState([]) + const onDrop = useCallback((acceptedFiles) => { + setFiles(acceptedFiles) + }, []) + return ( + + + + folder + + + + Drag & Drop or Choose File to Upload + + + DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB. + + + + 0}> + + + Uploaded Files + + + {files?.map((file) => {file?.name})} + + + + ) } ` diff --git a/app/docs/components/upload/variant/HorizontailUploadFailed.tsx b/app/docs/components/upload/variant/HorizontailUploadFailed.tsx deleted file mode 100644 index 88a87a87..00000000 --- a/app/docs/components/upload/variant/HorizontailUploadFailed.tsx +++ /dev/null @@ -1,56 +0,0 @@ -'use client' -import { ChangeEvent, useState } from 'react' -import { Upload } from '../../../../src' - -const HorizontalUploadFailed = () => { - const [fileName, setFileName] = useState('') - - const handleFileChange = (event: ChangeEvent) => { - const file = event.target.files && event.target.files[0] - if (file) { - setFileName(file.name) - } - } - return ( - - ) -} - -const HorizontalUploadFailedCode = ` -"use client"; -import { useState } from "react"; -import { Upload } from "keep-react"; - -export const UploadComponent = () => { - const [fileName, setFileName] = useState(""); - const handleFileChange = (event) => { - const file = event.target.files[0]; - if (file) { - setFileName(file.name); - } - }; - return ( - - ); -} -` - -export { HorizontalUploadFailed, HorizontalUploadFailedCode } diff --git a/app/docs/components/upload/variant/HorizontalDisabledUpload.tsx b/app/docs/components/upload/variant/HorizontalDisabledUpload.tsx deleted file mode 100644 index 8b24217e..00000000 --- a/app/docs/components/upload/variant/HorizontalDisabledUpload.tsx +++ /dev/null @@ -1,50 +0,0 @@ -'use client' -import { ChangeEvent, useState } from 'react' -import { Upload } from '../../../../src' - -const HorizontalDisabledUpload = () => { - const [fileName, setFileName] = useState('') - - const handleFileChange = (event: ChangeEvent) => { - const file = event.target.files && event.target.files[0] - if (file) { - setFileName(file.name) - } - } - return ( - - ) -} - -const HorizontalDisabledUploadCode = ` -"use client"; -import { useState } from "react"; -import { Upload } from "keep-react"; - -export const UploadComponent = () => { - const [fileName, setFileName] = useState(""); - const handleFileChange = (event) => { - const file = event.target.files[0]; - if (file) { - setFileName(file.name); - } - }; - return ( - - ); -} -` - -export { HorizontalDisabledUpload, HorizontalDisabledUploadCode } diff --git a/app/docs/components/upload/variant/HorizontalUpload.tsx b/app/docs/components/upload/variant/HorizontalUpload.tsx index b36fd844..d1cbe837 100644 --- a/app/docs/components/upload/variant/HorizontalUpload.tsx +++ b/app/docs/components/upload/variant/HorizontalUpload.tsx @@ -1,32 +1,81 @@ 'use client' -import { ChangeEvent, useState } from 'react' -import { Upload } from '../../../../src' +import Image from 'next/image' +import { Info } from 'phosphor-react' +import { useCallback, useState } from 'react' +import { UploadedFile } from '~/app/new/page' +import { Typography, Upload } from '../../../../src' const HorizontalUpload = () => { - const [fileName, setFileName] = useState('') - const handleFileChange = (event: ChangeEvent) => { - const file = event.target.files && event.target.files[0] - if (file) { - setFileName(file.name) - } - } - return + const [files, setFiles] = useState([]) + const onDrop = useCallback((acceptedFiles: any) => { + setFiles(acceptedFiles) + }, []) + return ( + + + + folder + + + + Choose File to Upload + + + PDF and JPG formats + + + + 0}> + + + Uploaded Files + + + {files?.map((file) => {file?.name})} + + + + ) } const HorizontalUploadCode = ` -"use client"; -import { useState } from "react"; -import { Upload } from "keep-react"; +'use client' +import Image from 'next/image' +import { Info } from 'phosphor-react' +import { useCallback, useState } from 'react' +import { Typography, Upload } from 'keep-react' export const UploadComponent = () => { - const [fileName, setFileName] = useState(""); - const handleFileChange = (event) => { - const file = event.target.files[0]; - if (file) { - setFileName(file.name); - } - }; - return ; + const [files, setFiles] = useState([]) + const onDrop = useCallback((acceptedFiles) => { + setFiles(acceptedFiles) + }, []) + return ( + + + + folder + + + + Choose File to Upload + + + PDF and JPG formats + + + + 0}> + + + Uploaded Files + + + {files?.map((file) => {file?.name})} + + + + ) } ` diff --git a/app/docs/components/upload/variant/HorizontalUploadPending.tsx b/app/docs/components/upload/variant/HorizontalUploadPending.tsx deleted file mode 100644 index 7819955e..00000000 --- a/app/docs/components/upload/variant/HorizontalUploadPending.tsx +++ /dev/null @@ -1,56 +0,0 @@ -'use client' -import { ChangeEvent, useState } from 'react' -import { Upload } from '../../../../src' - -const HorizontalUploadPending = () => { - const [fileName, setFileName] = useState('') - - const handleFileChange = (event: ChangeEvent) => { - const file = event.target.files && event.target.files[0] - if (file) { - setFileName(file.name) - } - } - return ( - - ) -} - -const HorizontalUploadPendingCode = ` -"use client"; -import { useState } from "react"; -import { Upload } from "keep-react"; - -export const UploadComponent = () => { - const [fileName, setFileName] = useState(""); - const handleFileChange = (event) => { - const file = event.target.files[0]; - if (file) { - setFileName(file.name); - } - }; - return ( - - ); -} -` - -export { HorizontalUploadPending, HorizontalUploadPendingCode } diff --git a/app/docs/components/upload/variant/HorizontalUploadSuccess.tsx b/app/docs/components/upload/variant/HorizontalUploadSuccess.tsx deleted file mode 100644 index 52ec9c4d..00000000 --- a/app/docs/components/upload/variant/HorizontalUploadSuccess.tsx +++ /dev/null @@ -1,52 +0,0 @@ -'use client' -import { ChangeEvent, useState } from 'react' -import { Upload } from '../../../../src' - -const HorizontalUploadSuccess = () => { - const [fileName, setFileName] = useState('') - - const handleFileChange = (event: ChangeEvent) => { - const file = event.target.files && event.target.files[0] - if (file) { - setFileName(file.name) - } - } - return ( - - ) -} - -const HorizontalUploadSuccessCode = ` -"use client"; -import { useState } from "react"; -import { Upload } from "keep-react"; - -export const UploadComponent = () => { - const [fileName, setFileName] = useState(""); - const handleFileChange = (event) => { - const file = event.target.files[0]; - if (file) { - setFileName(file.name); - } - }; - return ( - - ); -} -` - -export { HorizontalUploadSuccess, HorizontalUploadSuccessCode } diff --git a/app/docs/components/upload/variant/SingleUpload.tsx b/app/docs/components/upload/variant/SingleUpload.tsx new file mode 100644 index 00000000..147b8a9c --- /dev/null +++ b/app/docs/components/upload/variant/SingleUpload.tsx @@ -0,0 +1,82 @@ +'use client' +import Image from 'next/image' +import { Info } from 'phosphor-react' +import { useCallback, useState } from 'react' +import { UploadedFile } from '~/app/new/page' +import { Typography, Upload } from '../../../../src' + +const SingleUpload = () => { + const [files, setFiles] = useState([]) + const onDrop = useCallback((acceptedFiles: any) => { + setFiles(acceptedFiles) + }, []) + return ( + + + + folder + + + + Drag & Drop or Choose File to Upload + + + DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB. + + + + 0}> + + + Uploaded Files + + + {files?.map((file) => {file?.name})} + + + + ) +} + +const SingleUploadCode = ` +'use client' +import Image from 'next/image' +import { Info } from 'phosphor-react' +import { useCallback, useState } from 'react' +import { Typography, Upload } from 'keep-react' + +export const UploadComponent = () => { + const [files, setFiles] = useState([]) + const onDrop = useCallback((acceptedFiles) => { + setFiles(acceptedFiles) + }, []) + return ( + + + + folder + + + + Drag & Drop or Choose File to Upload + + + DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB. + + + + 0}> + + + Uploaded Files + + + {files?.map((file) => {file?.name})} + + + + ) +} +` + +export { SingleUpload, SingleUploadCode } diff --git a/app/docs/components/upload/variant/UploadDisabled.tsx b/app/docs/components/upload/variant/UploadDisabled.tsx index ccdfd15b..c585a5db 100644 --- a/app/docs/components/upload/variant/UploadDisabled.tsx +++ b/app/docs/components/upload/variant/UploadDisabled.tsx @@ -1,34 +1,82 @@ 'use client' -import { ChangeEvent, useState } from 'react' -import { Upload } from '../../../../src' +import Image from 'next/image' +import { Info } from 'phosphor-react' +import { useCallback, useState } from 'react' +import { UploadedFile } from '~/app/new/page' +import { Typography, Upload } from '../../../../src' -const UploadDisabled = () => { - const [fileName, setFileName] = useState('') - - const handleFileChange = (event: ChangeEvent) => { - const file = event.target.files && event.target.files[0] - if (file) { - setFileName(file.name) - } - } - return +const DisabledUpload = () => { + const [files, setFiles] = useState([]) + const onDrop = useCallback((acceptedFiles: any) => { + setFiles(acceptedFiles) + }, []) + return ( + + + + folder + + + + Drag & Drop or Choose File to Upload + + + DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB. + + + + 0}> + + + Uploaded Files + + + {files?.map((file) => {file?.name})} + + + + ) } -const UploadDisabledCode = ` -"use client"; -import { useState } from "react"; -import { Upload } from "keep-react"; +const DisabledUploadCode = ` +'use client' +import Image from 'next/image' +import { Info } from 'phosphor-react' +import { useCallback, useState } from 'react' +import { Typography, Upload } from 'keep-react' export const UploadComponent = () => { - const [fileName, setFileName] = useState(""); - const handleFileChange = (event) => { - const file = event.target.files[0]; - if (file) { - setFileName(file.name); - } - }; - return ; + const [files, setFiles] = useState([]) + const onDrop = useCallback((acceptedFiles) => { + setFiles(acceptedFiles) + }, []) + return ( + + + + folder + + + + Drag & Drop or Choose File to Upload + + + DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB. + + + + 0}> + + + Uploaded Files + + + {files?.map((file) => {file?.name})} + + + + ) } ` -export { UploadDisabled, UploadDisabledCode } +export { DisabledUpload, DisabledUploadCode } diff --git a/app/docs/components/upload/variant/UploadFailed.tsx b/app/docs/components/upload/variant/UploadFailed.tsx deleted file mode 100644 index 359a018c..00000000 --- a/app/docs/components/upload/variant/UploadFailed.tsx +++ /dev/null @@ -1,54 +0,0 @@ -'use client' -import { ChangeEvent, useState } from 'react' -import { Upload } from '../../../../src' - -const UploadFailed = () => { - const [fileName, setFileName] = useState('') - - const handleFileChange = (event: ChangeEvent) => { - const file = event.target.files && event.target.files[0] - if (file) { - setFileName(file.name) - } - } - return ( - - ) -} - -const UploadFailedCode = ` -"use client"; -import { Upload } from "keep-react"; -import { useState } from "react"; - -export const UploadComponent = () => { - const [fileName, setFileName] = useState(""); - const handleFileChange = (event) => { - const file = event.target.files[0]; - if (file) { - setFileName(file.name); - } - }; - return ( - - ); -} -` - -export { UploadFailed, UploadFailedCode } diff --git a/app/docs/components/upload/variant/UploadPending.tsx b/app/docs/components/upload/variant/UploadPending.tsx deleted file mode 100644 index 80ffa56e..00000000 --- a/app/docs/components/upload/variant/UploadPending.tsx +++ /dev/null @@ -1,53 +0,0 @@ -'use client' -import { ChangeEvent, useState } from 'react' -import { Upload } from '../../../../src' - -const UploadPending = () => { - const [fileName, setFileName] = useState('') - const handleFileChange = (event: ChangeEvent) => { - const file = event.target.files && event.target.files[0] - if (file) { - setFileName(file.name) - } - } - return ( - - ) -} - -const UploadPendingCode = ` -"use client"; -import { useState } from "react"; -import { Upload } from "keep-react"; - -export const UploadComponent = () => { - const [fileName, setFileName] = useState(""); - const handleFileChange = (event) => { - const file = event.target.files[0]; - if (file) { - setFileName(file.name); - } - }; - return ( - - ); -} -` - -export { UploadPending, UploadPendingCode } diff --git a/app/docs/components/upload/variant/UploadSuccess.tsx b/app/docs/components/upload/variant/UploadSuccess.tsx deleted file mode 100644 index b5a84c9a..00000000 --- a/app/docs/components/upload/variant/UploadSuccess.tsx +++ /dev/null @@ -1,50 +0,0 @@ -'use client' -import { ChangeEvent, useState } from 'react' -import { Upload } from '../../../../src' - -const UploadSuccess = () => { - const [fileName, setFileName] = useState('') - - const handleFileChange = (event: ChangeEvent) => { - const file = event.target.files && event.target.files[0] - if (file) { - setFileName(file.name) - } - } - return ( - - ) -} - -const UploadSuccessCode = ` -"use client"; -import { useState } from "react"; -import { Upload } from "keep-react"; - -export const UploadComponent = () => { - const [fileName, setFileName] = useState(""); - const handleFileChange = (event) => { - const file = event.target.files[0]; - if (file) { - setFileName(file.name); - } - }; - return ( - - ); -} -` - -export { UploadSuccess, UploadSuccessCode } diff --git a/app/new/Upload/File.tsx b/app/new/Upload/File.tsx index 81fbc2ee..0d62a5ef 100644 --- a/app/new/Upload/File.tsx +++ b/app/new/Upload/File.tsx @@ -10,7 +10,7 @@ export interface FileProps { onClick?: () => void } -export const File: FC = ({ children, className, onClick, icon }) => { +export const File: FC = ({ children, className, onClick, icon = }) => { return (
  • = ({ children, className, onClick, icon }) => { 'flex items-center justify-between border-l-4 border-l-metal-100 bg-metal-25 px-4 py-2.5 text-left text-body-6 font-normal capitalize text-metal-600', )}> {children} - +
    • ) } diff --git a/app/new/Upload/Upload.tsx b/app/new/Upload/Upload.tsx index 91cbca77..988aae3c 100644 --- a/app/new/Upload/Upload.tsx +++ b/app/new/Upload/Upload.tsx @@ -1,5 +1,5 @@ 'use client' -import { FC, ReactNode } from 'react' +import { FC, ReactNode, useMemo } from 'react' import { DropzoneOptions } from 'react-dropzone' import { cn } from '~/app/src/helpers/cn' import { Body } from './Body' @@ -12,14 +12,15 @@ import { UploadContext } from './UploadContext' export interface UploadProps { children?: ReactNode className?: string - options?: DropzoneOptions | undefined + options?: DropzoneOptions horizontal?: boolean } const UploadComponent: FC = ({ children, className, options, horizontal }) => { + const dropzoneAPI = useMemo(() => ({ options, horizontal }), [options, horizontal]) return (
    - {children} + {children}
    ) } diff --git a/app/new/Upload/UploadContext.tsx b/app/new/Upload/UploadContext.tsx index d6a76120..3fbbae7b 100644 --- a/app/new/Upload/UploadContext.tsx +++ b/app/new/Upload/UploadContext.tsx @@ -3,7 +3,7 @@ import { createContext, useContext } from 'react' import { DropzoneOptions } from 'react-dropzone' export type UploadPropsContext = { - options?: DropzoneOptions | undefined + options?: DropzoneOptions horizontal?: boolean } diff --git a/app/new/page.tsx b/app/new/page.tsx index 91fdbf36..e40d5d35 100644 --- a/app/new/page.tsx +++ b/app/new/page.tsx @@ -5,7 +5,7 @@ import { useCallback, useState } from 'react' import { Typography } from '../src' import { Upload } from './Upload' -interface UploadFile { +export interface UploadedFile { path: string lastModified: number lastModifiedDate: string @@ -16,7 +16,7 @@ interface UploadFile { } export default function MyDropzone() { - const [files, setFiles] = useState([]) + const [files, setFiles] = useState([]) const onDrop = useCallback((acceptedFiles: any) => { setFiles(acceptedFiles) }, []) @@ -24,7 +24,7 @@ export default function MyDropzone() { return (
    - + folder @@ -48,7 +48,7 @@ export default function MyDropzone() { - + folder diff --git a/app/src/components/Upload/Body.tsx b/app/src/components/Upload/Body.tsx new file mode 100644 index 00000000..3263f208 --- /dev/null +++ b/app/src/components/Upload/Body.tsx @@ -0,0 +1,28 @@ +'use client' +import { FC, ReactNode } from 'react' +import { useDropzone } from 'react-dropzone' +import { cn } from '../../helpers/cn' +import { useUploadContext } from './UploadContext' + +export interface BodyProps { + children?: ReactNode + className?: string +} + +export const Body: FC = ({ children, className }) => { + const { options, horizontal } = useUploadContext() + const { getRootProps, getInputProps } = useDropzone(options) + return ( +
    + + {children} +
    + ) +} diff --git a/app/src/components/Upload/File.tsx b/app/src/components/Upload/File.tsx new file mode 100644 index 00000000..3153c885 --- /dev/null +++ b/app/src/components/Upload/File.tsx @@ -0,0 +1,24 @@ +'use client' +import { Trash } from 'phosphor-react' +import { FC, ReactNode } from 'react' +import { cn } from '../../helpers/cn' + +export interface FileProps { + children?: ReactNode + className?: string + icon?: ReactNode + onClick?: () => void +} + +export const File: FC = ({ children, className, onClick, icon = }) => { + return ( +
  • + {children} + +
    • + ) +} diff --git a/app/src/components/Upload/Footer.tsx b/app/src/components/Upload/Footer.tsx new file mode 100644 index 00000000..b5810c55 --- /dev/null +++ b/app/src/components/Upload/Footer.tsx @@ -0,0 +1,13 @@ +'use client' +import { FC, ReactNode } from 'react' +import { cn } from '../../helpers/cn' + +export interface FooterProps { + children?: ReactNode + className?: string + isFileExists?: boolean +} + +export const Footer: FC = ({ children, className, isFileExists = false }) => { + return
    {isFileExists ? children : null}
    +} diff --git a/app/src/components/Upload/Icon.tsx b/app/src/components/Upload/Icon.tsx new file mode 100644 index 00000000..27621dfc --- /dev/null +++ b/app/src/components/Upload/Icon.tsx @@ -0,0 +1,16 @@ +'use client' +import { FC, ReactNode } from 'react' +import { cn } from '../../helpers/cn' + +export interface IconProps { + children?: ReactNode + className?: string +} + +export const Icon: FC = ({ children, className }) => { + return ( +
    + {children} +
    + ) +} diff --git a/app/src/components/Upload/InputField.tsx b/app/src/components/Upload/InputField.tsx deleted file mode 100644 index f71f0da4..00000000 --- a/app/src/components/Upload/InputField.tsx +++ /dev/null @@ -1,87 +0,0 @@ -'use client' -import { FC, useRef } from 'react' -import { cn } from '../../helpers/cn' -import { Button } from '../Button/Button' -import { useUploadContext } from './UploadContext' -import { UploadFailed } from './UploadFailed' -import { UploadPending } from './UploadPending' -import { UploadSuccess } from './UploadSuccess' -import { uploadTheme } from './theme' - -export const InputField: FC = () => { - const { - disabled, - onFileChange, - file, - showProgressBar, - progressType, - fileType, - title, - icon, - id, - uploadBtnColor = 'primary', - className, - labelStyle, - } = useUploadContext() - - const theme = uploadTheme.input - const extension = file?.split('.').pop() - const inputRef = useRef(null) - - const handleClick = () => { - inputRef.current?.click() - } - return ( -
    - - - {showProgressBar && - !disabled && - (progressType === 'success' ? ( - - ) : progressType === 'error' ? ( - - ) : progressType === 'pending' ? ( - - ) : null)} -
    - ) -} diff --git a/app/src/components/Upload/Text.tsx b/app/src/components/Upload/Text.tsx new file mode 100644 index 00000000..e22e9261 --- /dev/null +++ b/app/src/components/Upload/Text.tsx @@ -0,0 +1,12 @@ +'use client' +import { FC, ReactNode } from 'react' +import { cn } from '../../helpers/cn' + +export interface TextProps { + children?: ReactNode + className?: string +} + +export const Text: FC = ({ children, className }) => { + return
    {children}
    +} diff --git a/app/src/components/Upload/Upload.stories.tsx b/app/src/components/Upload/Upload.stories.tsx deleted file mode 100644 index e0336327..00000000 --- a/app/src/components/Upload/Upload.stories.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import { Upload } from '.' -import type { Meta, StoryObj } from '@storybook/react' - -const meta: Meta = { - component: Upload, - tags: ['autodocs'], - argTypes: { - horizontal: { - description: 'Upload type horizontal or not?', - control: { type: 'boolean' }, - }, - showProgressBar: { - description: 'Progress bar show or not?', - control: { type: 'boolean' }, - }, - progressType: { - description: 'Available Progress type', - control: { type: 'radio' }, - options: ['success', 'error', 'pending'], - table: { - type: { summary: 'String' }, - defaultValue: { summary: 'pending' }, - }, - }, - progress: { - description: 'Upload Progress number', - table: { - type: { summary: 'Number' }, - defaultValue: { summary: 0 }, - }, - control: { type: 'number', min: 0, max: 100, step: 1 }, - }, - uploadTime: { - description: 'Upload required time', - table: { - type: { summary: 'String' }, - defaultValue: { summary: '10 second left' }, - }, - }, - disabled: { - description: 'Upload disabled or not?', - control: { type: 'boolean' }, - }, - file: { - description: 'Selected file name', - table: { - type: { summary: 'string' }, - defaultValue: { summary: '' }, - }, - }, - onFileChange: { - description: 'Selected file function', - control: { type: null }, - }, - }, -} - -export default meta -type Story = StoryObj - -export const DefaultUpload: Story = { - args: { - horizontal: false, - showProgressBar: false, - progressType: 'pending', - progress: 45, - uploadTime: '10 second left', - disabled: false, - }, -} - -export const UploadPending: Story = { - args: { - showProgressBar: true, - progressType: 'pending', - progress: 45, - }, -} - -export const UploadFailed: Story = { - args: { - showProgressBar: true, - progressType: 'error', - progress: 55, - }, -} - -export const UploadSuccess: Story = { - args: { - showProgressBar: true, - progressType: 'success', - }, -} - -export const HorizontalUpload: Story = { args: { horizontal: true } } - -export const HorizontalUploadPending: Story = { - args: { - ...HorizontalUpload.args, - showProgressBar: true, - progressType: 'pending', - progress: 45, - }, -} - -export const HorizontalUploadFailed: Story = { - args: { - ...HorizontalUpload.args, - showProgressBar: true, - progressType: 'error', - progress: 55, - }, -} - -export const HorizontalUploadSuccess: Story = { - args: { - ...HorizontalUpload.args, - showProgressBar: true, - progressType: 'success', - }, -} - -export const UploadDisabled: Story = { args: { disabled: true } } - -export const HorizontalUploadDisabled: Story = { - args: { disabled: true, horizontal: true }, -} diff --git a/app/src/components/Upload/Upload.tsx b/app/src/components/Upload/Upload.tsx new file mode 100644 index 00000000..d6e63739 --- /dev/null +++ b/app/src/components/Upload/Upload.tsx @@ -0,0 +1,40 @@ +'use client' +import { FC, ReactNode, useMemo } from 'react' +import { DropzoneOptions } from 'react-dropzone' +import { cn } from '../../helpers/cn' +import { Body } from './Body' +import { File } from './File' +import { Footer } from './Footer' +import { Icon } from './Icon' +import { Text } from './Text' +import { UploadContext } from './UploadContext' + +export interface UploadProps { + children?: ReactNode + className?: string + options?: DropzoneOptions + horizontal?: boolean +} + +const UploadComponent: FC = ({ children, className, options, horizontal }) => { + const ContextValue = useMemo(() => ({ options, horizontal }), [options, horizontal]) + return ( +
    + {children} +
    + ) +} + +Body.displayName = 'Upload.Body' +Icon.displayName = 'Upload.Icon' +Text.displayName = 'Upload.Text' +Footer.displayName = 'Upload.Footer' +File.displayName = 'Upload.File' + +export const Upload = Object.assign(UploadComponent, { + Body, + Icon, + Text, + Footer, + File, +}) diff --git a/app/src/components/Upload/UploadContext.tsx b/app/src/components/Upload/UploadContext.tsx index f318bd9f..3fbbae7b 100644 --- a/app/src/components/Upload/UploadContext.tsx +++ b/app/src/components/Upload/UploadContext.tsx @@ -1,109 +1,10 @@ 'use client' -import { ChangeEvent, ReactNode, createContext, useContext } from 'react' +import { createContext, useContext } from 'react' +import { DropzoneOptions } from 'react-dropzone' -/** - * Represents the context for file upload. - * @interface UploadContext - */ export type UploadPropsContext = { - /** - * The unique identifier for the upload. - * @type {string} - * @default '' - */ - id?: string - - /** - * The progress of the upload, represented as a number between 0 and 100. - * @type {number} - * @default 0 - */ - progress: number - - /** - * The time when the upload was initiated. - * @type {string} - * @default '' - */ - uploadTime?: string - - /** - * The file being uploaded. - * @type {string} - * @default '' - */ - file?: string - - /** - * Indicates whether the upload is disabled. - * @type {boolean} - * @default false - */ - disabled?: boolean - - /** - * Indicates whether to show the progress bar. - * @type {boolean} - * @default false - */ - showProgressBar?: boolean - - /** - * The type of progress, can be 'success', 'error', or 'pending'. - * @type {'success' | 'error' | 'pending'} - * @default 'success' - */ - progressType?: 'success' | 'error' | 'pending' - - /** - * The title of the upload. - * @type {string} - * @default '' - */ - title?: string - - /** - * The type of file being uploaded. - * @type {string} - * @default '' - */ - fileType?: string - - /** - * The icon to display for the upload. - * @type {ReactNode} - * @default '' - */ - icon?: ReactNode - - /** - * The callback function to handle file change event. - * @type {React.ChangeEvent} - * @default () => {} - */ - // eslint-disable-next-line no-unused-vars - onFileChange?: (e: ChangeEvent) => void - - /** - * The type of upload button. - * @type {keyof ButtonTypes} - * @default 'primary' - */ - uploadBtnColor?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' - - /** - * The additional class name for the upload. - * @type {string} - * @default '' - */ - className?: string - - /** - * The label style for the upload. - * @type {string} - * @default '' - */ - labelStyle?: string + options?: DropzoneOptions + horizontal?: boolean } export const UploadContext = createContext(undefined) diff --git a/app/src/components/Upload/UploadFailed.tsx b/app/src/components/Upload/UploadFailed.tsx deleted file mode 100644 index 7449d52a..00000000 --- a/app/src/components/Upload/UploadFailed.tsx +++ /dev/null @@ -1,55 +0,0 @@ -'use client' -import { FC, useEffect, useRef, useState } from 'react' -import { cn } from '../../helpers/cn' -import { useUploadContext } from './UploadContext' -import { uploadTheme } from './theme' -import { useProgress } from './useProgress' - -export const UploadFailed: FC = () => { - const theme = uploadTheme.uploadFailed - const { progress, uploadTime } = useUploadContext() - const [divWidth, setDivWidth] = useState(0) - const divRef = useRef(null) - - useEffect(() => { - if (divRef.current) { - const width = divRef.current.getBoundingClientRect().width - setDivWidth(width) - } - }, []) - - const { divOneWidth, divTwoWidth } = useProgress({ - width: divWidth, - progress: progress, - }) - return ( -
    -
    -
    -
    -

    Something error

    -
    -

    {progress}%

    -
    -

    {uploadTime ? uploadTime : '10 Second Left'}

    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    - ) -} diff --git a/app/src/components/Upload/UploadHorizontal.tsx b/app/src/components/Upload/UploadHorizontal.tsx deleted file mode 100644 index 728bd216..00000000 --- a/app/src/components/Upload/UploadHorizontal.tsx +++ /dev/null @@ -1,79 +0,0 @@ -'use client' -import { FC, useRef } from 'react' -import { cn } from '../../helpers/cn' -import { Button } from '../Button/Button' -import { useUploadContext } from './UploadContext' -import { UploadFailed } from './UploadFailed' -import { UploadPending } from './UploadPending' -import { UploadSuccess } from './UploadSuccess' -import { uploadTheme } from './theme' - -export const UploadHorizontal: FC = () => { - const { disabled, showProgressBar, progressType, file, onFileChange, title, fileType, id, uploadBtnColor } = - useUploadContext() - - const theme = uploadTheme.uploadHorizontal - const extension = file?.split('.').pop() - const inputRef = useRef(null) - - const handleClick = () => { - inputRef.current?.click() - } - return ( -
    - - {showProgressBar && - !disabled && - (progressType === 'success' ? ( - - ) : progressType === 'error' ? ( - - ) : progressType === 'pending' ? ( - - ) : null)} -
    - ) -} diff --git a/app/src/components/Upload/UploadPending.tsx b/app/src/components/Upload/UploadPending.tsx deleted file mode 100644 index 778f7a3d..00000000 --- a/app/src/components/Upload/UploadPending.tsx +++ /dev/null @@ -1,56 +0,0 @@ -'use client' -import { FC, useEffect, useRef, useState } from 'react' -import { cn } from '../../helpers/cn' -import { useUploadContext } from './UploadContext' -import { uploadTheme } from './theme' -import { useProgress } from './useProgress' - -export const UploadPending: FC = () => { - const [divWidth, setDivWidth] = useState(0) - const divRef = useRef(null) - const theme = uploadTheme.uploadPending - const { progress, uploadTime } = useUploadContext() - - useEffect(() => { - if (divRef.current) { - const width = divRef.current.getBoundingClientRect().width - setDivWidth(width) - } - }, []) - - const { divOneWidth, divTwoWidth } = useProgress({ - width: divWidth, - progress: progress, - }) - - return ( -
    -
    -
    -
    -

    Uploading...

    -
    -

    {progress}%

    -
    -

    {uploadTime ? uploadTime : '10 Second Left'}

    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    - ) -} diff --git a/app/src/components/Upload/UploadSuccess.tsx b/app/src/components/Upload/UploadSuccess.tsx deleted file mode 100644 index b5631aa3..00000000 --- a/app/src/components/Upload/UploadSuccess.tsx +++ /dev/null @@ -1,39 +0,0 @@ -'use client' -import { FC } from 'react' -import { cn } from '../../helpers/cn' -import { uploadTheme } from './theme' - -export const UploadSuccess: FC = () => { - const theme = uploadTheme.uploadSuccess - return ( -
    -
    -
    -
    -
    - - - - - -

    File Name.pdf

    -
    -

    Size: 515 Kb

    -
    -
    - -
    - -
    -
    -
    - ) -} diff --git a/app/src/components/Upload/index.tsx b/app/src/components/Upload/index.tsx index a735bf81..193e7f36 100644 --- a/app/src/components/Upload/index.tsx +++ b/app/src/components/Upload/index.tsx @@ -1,172 +1 @@ -'use client' -import type { ChangeEvent, FC } from 'react' -import { InputField } from './InputField' -import { UploadContext } from './UploadContext' -import { UploadFailed } from './UploadFailed' -import { UploadHorizontal } from './UploadHorizontal' -import { UploadPending } from './UploadPending' -import { UploadSuccess } from './UploadSuccess' - -/** - * Props for the UploadComponent. - * @interface UploadComponentProps - */ -interface UploadComponentProps { - /** - * The selected file. - * @type {string} - * @default '' - */ - file?: string - - /** - * Determines if the component should be displayed horizontally. - * @type {boolean} - * @default false - */ - horizontal?: boolean - - /** - * Determines if the component is disabled. - * @type {boolean} - * @default false - */ - disabled?: boolean - - /** - * Determines if the progress bar should be shown. - * @type {boolean} - * @default false - */ - showProgressBar?: boolean - - /** - * The type of progress (success, error, pending). - * @type {'success' | 'error' | 'pending'} - * @default 'success' - */ - progressType?: 'success' | 'error' | 'pending' - - /** - * The progress value (0-100). - * @type {number} - * @default 0 - */ - progress?: number - - /** - * The time of upload. - * @type {string} - * @default '' - */ - uploadTime?: string - - /** - * Event handler for file change. - * @type {React.ChangeEvent} - * @default () => {} - */ - // eslint-disable-next-line no-unused-vars - onFileChange: (e: ChangeEvent) => void - - /** - * The title of the component. - * @type {string} - * @default '' - */ - title?: string - - /** - * The type of file. - * @type {string} - * @default '' - */ - fileType?: string - - /** - * The ID of the component. - * @type {string} - * @default '' - */ - id?: string - - /** - * The type of upload button. - * @type {keyof ButtonTypes} - * @default 'primary' - */ - uploadBtnColor?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' - - /** - * Additional CSS class name for styling purposes. - * @type {string} - * @default '' - */ - className?: string - - /** - * Additional CSS style for the label. - * @type {string} - * @default '' - */ - labelStyle?: string -} - -const UploadComponent: FC = ({ - file, - horizontal = false, - disabled = false, - showProgressBar = false, - progress = 0, - uploadTime = '', - progressType, - onFileChange, - title, - fileType, - id, - uploadBtnColor = 'primary', - className, - labelStyle, -}) => { - let content = null - - if (horizontal) { - content = - } else { - content = - } - - return ( - - {content} - - ) -} - -UploadComponent.displayName = 'Upload' -UploadHorizontal.displayName = 'Upload.Horizontal' -UploadFailed.displayName = 'Upload.Failed' -UploadSuccess.displayName = 'Upload.Success' -UploadPending.displayName = 'Upload.Pending' - -export const Upload = Object.assign(UploadComponent, { - Horizontal: UploadHorizontal, - Failed: UploadFailed, - Success: UploadSuccess, - Pending: UploadPending, -}) +export * from './Upload' diff --git a/app/src/components/Upload/theme.ts b/app/src/components/Upload/theme.ts index a2c5e5c9..e69de29b 100644 --- a/app/src/components/Upload/theme.ts +++ b/app/src/components/Upload/theme.ts @@ -1,222 +0,0 @@ -interface keepUploadTheme { - input: keepInputFieldTheme - uploadFailed: keepUploadFailedTheme - uploadHorizontal: UploadHorizontalTheme - uploadPending: UploadPendingTheme - uploadSuccess: UploadSuccessTheme -} - -export interface UploadSuccessTheme { - base: string - bgColor: string - root: { - base: string - left: { - base: string - fileName: string - fileSize: string - } - confirmBox: { - base: string - checked: string - divider: string - trash: string - } - } -} - -export interface UploadPendingTheme { - base: string - bgColor: string - root: { - base: string - status: string - statusBox: { - base: string - count: string - dot: string - time: string - } - confirmBox: { - base: string - pause: string - dismiss: string - } - } - progress: { - bgBar: string - mainBar: string - } -} -export interface UploadHorizontalTheme { - base: string - disabled: string - label: { - base: string - root: { - base: string - iconBox: { - base: string - icon: string - dragDrop: string - fileType: string - } - upload: { - base: string - input: string - fileName: string - fileSize: string - } - } - } -} - -export interface keepUploadFailedTheme { - base: string - bgColor: string - root: { - base: string - status: string - statusBox: { - base: string - count: string - dot: string - time: string - } - confirmBox: { - base: string - restart: string - dismiss: string - } - } - progress: { - bgBar: string - mainBar: string - } -} - -export interface keepInputFieldTheme { - base: string - disabled: string - label: { - base: string - root: string - icon: string - dragDrop: string - fileType: string - - upload: { - base: string - input: string - fileName: string - } - } -} - -export const uploadTheme: keepUploadTheme = { - input: { - disabled: 'cursor-not-allowed opacity-50 select-none', - base: 'flex flex-col items-center justify-center gap-5 rounded-lg bg-metal-25 p-5 transition-all hover:bg-metal-50', - label: { - base: 'flex w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-metal-300', - root: 'flex flex-col items-center justify-center pt-5 pb-6', - icon: 'flex h-16 w-16 items-center justify-center rounded-full border border-metal-100 bg-white', - dragDrop: 'mb-2 text-body-4 md:text-body-2 font-semibold text-metal-500', - fileType: 'text-center text-body-6 md:text-body-5 text-metal-400', - - upload: { - base: 'relative mt-5 flex cursor-pointer flex-col items-center space-y-2', - input: 'absolute top-0 left-0 cursor-pointer opacity-0 hidden', - fileName: 'text-body-6 md:text-body-5 text-metal-400 text-center', - }, - }, - }, - uploadFailed: { - base: 'relative z-40 w-full rounded-lg border border-error-50 p-2.5 px-5 bg-error-25', - bgColor: 'absolute top-0 left-0 z-[-1] h-full bg-error-50 overflow-hidden', - root: { - base: 'mb-2 flex items-center justify-between', - status: 'text-body-5 font-medium text-error-500', - statusBox: { - base: 'flex items-center gap-3', - count: 'text-body-6 font-normal text-error-400', - dot: 'h-2.5 w-2.5 rounded-full bg-error-400', - time: 'text-body-6 font-normal text-error-400', - }, - confirmBox: { - base: 'flex items-center gap-5', - restart: 'flex h-6 w-6 items-center justify-center rounded-full bg-error-50 text-metal-500', - dismiss: 'flex h-6 w-6 items-center justify-center rounded-full bg-error-50', - }, - }, - progress: { - bgBar: 'h-3.5 bg-error-50 w-full relative', - mainBar: 'absolute left-0 h-full bg-error-500', - }, - }, - uploadHorizontal: { - disabled: 'cursor-not-allowed opacity-50 select-none', - base: 'flex flex-col items-center justify-center gap-5 rounded-lg bg-metal-25 p-5 transition-all hover:bg-metal-50 ', - label: { - base: 'relative w-full cursor-pointer items-center justify-between space-y-5 rounded-lg border-2 border-dashed border-metal-300 p-4', - root: { - base: 'flex items-center justify-between', - iconBox: { - base: 'flex items-center gap-5', - icon: 'flex h-16 w-16 items-center justify-center rounded-full border border-metal-100 bg-white', - dragDrop: 'text-body-4 2xl:text-body-2 font-semibold text-metal-500', - fileType: 'text-body-5 text-metal-400', - }, - upload: { - base: 'relative hidden md:flex cursor-pointer items-center md:gap-5', - input: 'absolute top-0 w-full left-0 scale-100 opacity-0', - fileName: 'text-body-5 text-metal-400', - fileSize: 'text-body-5 xl:block hidden text-metal-400', - }, - }, - }, - }, - uploadPending: { - base: 'relative z-20 w-full rounded-lg border border-metal-200 p-2.5 px-5 overflow-hidden', - bgColor: 'absolute top-0 left-0 z-[-1] h-full bg-primary-50 overflow-hidden', - root: { - base: 'mb-2 flex items-center justify-between', - status: 'text-body-5 font-medium text-metal-500', - statusBox: { - base: 'flex items-center gap-3', - count: 'text-body-6 font-normal text-metal-400', - dot: 'h-2.5 w-2.5 rounded-full bg-metal-400', - time: 'text-body-6 font-normal text-metal-400', - }, - confirmBox: { - base: 'flex items-center gap-5', - pause: 'flex h-6 w-6 items-center justify-center rounded-full bg-metal-100 text-metal-500', - dismiss: 'flex h-6 w-6 items-center justify-center rounded-full bg-error-50', - }, - }, - progress: { - bgBar: 'h-3.5 bg-primary-50 w-full relative', - mainBar: 'absolute left-0 h-full bg-primary-500', - }, - }, - uploadSuccess: { - base: 'relative z-40 w-full rounded-lg border border-success-100 p-2.5 px-5', - bgColor: 'absolute top-0 left-0 z-[-1] h-full w-full rounded-lg bg-success-25 p-5', - root: { - base: 'mb-2 flex items-center justify-between', - left: { - base: 'flex items-center gap-1', - fileName: 'text-body-5 font-medium text-success-500', - fileSize: 'text-body-5 font-medium text-success-500', - }, - - confirmBox: { - base: 'flex items-center gap-3', - checked: 'flex h-8 w-8 border-spacing-1 items-center justify-center rounded-full border border-success-100', - divider: 'h-full w-px bg-success-200 py-4', - trash: - 'flex h-8 w-8 border-spacing-1 items-center justify-center rounded-full border border-error-100 bg-error-25', - }, - }, - }, -} diff --git a/app/src/components/Upload/useProgress.tsx b/app/src/components/Upload/useProgress.tsx deleted file mode 100644 index 0938285f..00000000 --- a/app/src/components/Upload/useProgress.tsx +++ /dev/null @@ -1,33 +0,0 @@ -/** - * Custom hook that calculates the width of two progress divs based on the given width and progress values. - * @param {number} width - The width of the progress bar. - * @param {number} progress - The progress value (between 0 and 100). - * @returns {Object} - An object containing the calculated widths for the two progress divs. - */ -export const useProgress = ({ width, progress }: { width: number; progress: number }) => { - const progressBar = 20 + width / 100 + (width / 100) * (progress === 1 ? 0 : progress) - const progressBar2 = progressBar - 20 - - let divOneWidth: number | string = 0 - let divTwoWidth: number | string = 0 - - if (progress === 0) { - divOneWidth = 0 - } else if (progress === 100) { - divOneWidth = '100%' - } else { - divOneWidth = progressBar - } - - if (progress === 0) { - divTwoWidth = 0 - } else if (progress >= 100) { - divTwoWidth = '100%' - } else { - divTwoWidth = progressBar2 - } - return { - divOneWidth, - divTwoWidth, - } -} From e6e552e0839684216a06b801e6badab1be3778b8 Mon Sep 17 00:00:00 2001 From: Arifulislam5577 Date: Thu, 8 Feb 2024 13:10:02 +0600 Subject: [PATCH 23/70] Fixed: Sonalint error fixed. --- app/new/page.tsx | 82 +------- app/src/components/Accordion/Accordion.tsx | 7 +- app/src/components/Accordion/Container.tsx | 8 +- app/src/components/Accordion/Content.tsx | 4 +- app/src/components/Accordion/Icon.tsx | 10 +- app/src/components/Accordion/Panel.tsx | 8 +- app/src/components/Accordion/Title.tsx | 4 +- app/src/components/Accordion/theme.ts | 2 +- app/src/components/Alert/Alert.tsx | 19 +- app/src/components/Alert/AlertContext.tsx | 18 ++ app/src/components/Alert/Body.tsx | 8 +- app/src/components/Alert/Container.tsx | 8 +- app/src/components/Alert/Description.tsx | 1 + app/src/components/Alert/Dismiss.tsx | 5 +- app/src/components/Alert/Icon.tsx | 79 ++++---- app/src/components/Alert/Link.tsx | 1 + app/src/components/Alert/Title.tsx | 1 + app/src/components/Avatar/Avatar.tsx | 90 +-------- app/src/components/Avatar/Counter.tsx | 3 +- app/src/components/Avatar/Group.tsx | 1 + app/src/components/Avatar/Verify.tsx | 7 +- app/src/components/Avatar/theme.ts | 177 ++++++++++++++++++ app/src/components/Badge/Badge.tsx | 1 + app/src/components/Breadcrumb/Breadcrumb.tsx | 9 +- app/src/components/Breadcrumb/Item.tsx | 6 +- app/src/components/Button/Button.tsx | 3 +- .../components/ButtonGroup/ButtonGroup.tsx | 1 + app/src/components/Empty/Empty.tsx | 6 +- app/src/components/Play/Frame.tsx | 8 +- app/src/components/Play/Play.tsx | 1 + .../components/Progress/CircleProgress.tsx | 3 +- app/src/components/Progress/CircleText.tsx | 1 + app/src/components/Progress/LineProgress.tsx | 4 +- app/src/components/Progress/LineText.tsx | 1 + 34 files changed, 319 insertions(+), 268 deletions(-) create mode 100644 app/src/components/Alert/AlertContext.tsx create mode 100644 app/src/components/Avatar/theme.ts diff --git a/app/new/page.tsx b/app/new/page.tsx index e40d5d35..f3d421f1 100644 --- a/app/new/page.tsx +++ b/app/new/page.tsx @@ -1,78 +1,14 @@ -'use client' -import Image from 'next/image' -import { Info } from 'phosphor-react' -import { useCallback, useState } from 'react' -import { Typography } from '../src' -import { Upload } from './Upload' - -export interface UploadedFile { - path: string - lastModified: number - lastModifiedDate: string - name: string - size: number - type: string - [key: string]: any -} - -export default function MyDropzone() { - const [files, setFiles] = useState([]) - const onDrop = useCallback((acceptedFiles: any) => { - setFiles(acceptedFiles) - }, []) - +const New = () => { return ( -
    -
    - - - - folder - - - - Drag & Drop or Choose File to Upload - - - DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB. - - - - 0}> - - - Uploaded Files - - - {files?.map((file) => {file?.name})} - - - - - - - folder - - - - Choose File to Upload - - - PDF and JPG formats - - - - 0}> - - - Uploaded Files - - - {files?.map((file) => {file?.name})} - - - +
    +
    +
    ) } + +export default New diff --git a/app/src/components/Accordion/Accordion.tsx b/app/src/components/Accordion/Accordion.tsx index cc098e75..a43eab3c 100644 --- a/app/src/components/Accordion/Accordion.tsx +++ b/app/src/components/Accordion/Accordion.tsx @@ -1,11 +1,11 @@ 'use client' import { Children, FC, ReactElement, cloneElement, isValidElement, useState } from 'react' +import { cn } from '../../helpers/cn' import { Container, keepAccordionContainerTheme } from './Container' import { Content, keepAccordionContentTheme } from './Content' import { Icon, keepAccordionIconTheme } from './Icon' import { Panel, PanelProps, keepAccordionPanelTheme } from './Panel' import { Title, keepAccordionTitleTheme } from './Title' -import { cn } from '../../helpers/cn' export interface AccordionProps { children?: ReactElement | ReactElement[] @@ -48,13 +48,12 @@ export const AccordionComponent: FC = ({ }) return ( -
    {modifiedChildren} -
    +
    ) } diff --git a/app/src/components/Accordion/Container.tsx b/app/src/components/Accordion/Container.tsx index 5081a155..5e77465b 100644 --- a/app/src/components/Accordion/Container.tsx +++ b/app/src/components/Accordion/Container.tsx @@ -19,8 +19,12 @@ export const Container: FC = ({ children, className, ...otherPro const { isOpen, setIsOpen } = useAccordionContext() const { container } = accordionTheme return ( -
    setIsOpen && setIsOpen(!isOpen)} className={cn(container.base, className)}> +
    + ) } diff --git a/app/src/components/Accordion/Content.tsx b/app/src/components/Accordion/Content.tsx index 67300284..04cbf6ff 100644 --- a/app/src/components/Accordion/Content.tsx +++ b/app/src/components/Accordion/Content.tsx @@ -1,9 +1,9 @@ 'use client' import { FC, ReactNode } from 'react' import { Collapse } from 'react-collapse' +import { cn } from '../../helpers/cn' import { useAccordionContext } from './AccordionContext' import { accordionTheme } from './theme' -import { cn } from '../../helpers/cn' export interface ContentProps { children?: ReactNode @@ -20,7 +20,7 @@ export const Content: FC = ({ children, className, ...otherProps } const { content } = accordionTheme return ( -
    +
    {children}
    diff --git a/app/src/components/Accordion/Icon.tsx b/app/src/components/Accordion/Icon.tsx index 38039720..515fe0d2 100644 --- a/app/src/components/Accordion/Icon.tsx +++ b/app/src/components/Accordion/Icon.tsx @@ -1,8 +1,8 @@ 'use client' import { FC, ReactNode } from 'react' +import { cn } from '../../helpers/cn' import { useAccordionContext } from './AccordionContext' import { accordionTheme } from './theme' -import { cn } from '../../helpers/cn' export interface IconProps { children?: ReactNode @@ -22,12 +22,10 @@ export const Icon: FC = ({ children, className, ...otherProps }) => { const { isOpen } = useAccordionContext() const { icon } = accordionTheme return ( -
    - {children ? ( - children - ) : ( + {children ?? ( = ({ children, className, ...otherProps }) => { /> )} -
    + ) } diff --git a/app/src/components/Accordion/Panel.tsx b/app/src/components/Accordion/Panel.tsx index 0a682da9..6b213c7a 100644 --- a/app/src/components/Accordion/Panel.tsx +++ b/app/src/components/Accordion/Panel.tsx @@ -1,8 +1,8 @@ 'use client' -import { FC, ReactNode } from 'react' +import { FC, ReactNode, useMemo } from 'react' +import { cn } from '../../helpers/cn' import { AccordionContext } from './AccordionContext' import { accordionTheme } from './theme' -import { cn } from '../../helpers/cn' export interface PanelProps { children?: ReactNode @@ -20,11 +20,13 @@ export interface keepAccordionPanelTheme { export const Panel: FC = ({ children, className, ...props }) => { const { isOpen, setIsOpen, flush } = props.state const { panel } = accordionTheme + + const contextValue = useMemo(() => ({ isOpen, setIsOpen, flush }), [isOpen, setIsOpen, flush]) return (
    - {children} + {children}
    ) } diff --git a/app/src/components/Accordion/Title.tsx b/app/src/components/Accordion/Title.tsx index cf487913..f1bfe058 100644 --- a/app/src/components/Accordion/Title.tsx +++ b/app/src/components/Accordion/Title.tsx @@ -1,6 +1,6 @@ import { FC, ReactNode } from 'react' -import { accordionTheme } from './theme' import { cn } from '../../helpers/cn' +import { accordionTheme } from './theme' export interface TitleProps { children?: ReactNode @@ -13,5 +13,5 @@ export interface keepAccordionTitleTheme { export const Title: FC = ({ children, className }) => { const { title } = accordionTheme - return

    {children}

    + return {children} } diff --git a/app/src/components/Accordion/theme.ts b/app/src/components/Accordion/theme.ts index 01e17250..93c47eda 100644 --- a/app/src/components/Accordion/theme.ts +++ b/app/src/components/Accordion/theme.ts @@ -2,7 +2,7 @@ import { keepAccordionTheme } from '.' export const accordionTheme: keepAccordionTheme = { container: { - base: 'flex cursor-pointer items-center justify-between px-6 py-5', + base: 'flex cursor-pointer items-center w-full justify-between px-6 py-5', open: '', }, content: { diff --git a/app/src/components/Alert/Alert.tsx b/app/src/components/Alert/Alert.tsx index d41d65dd..7b84e5ca 100644 --- a/app/src/components/Alert/Alert.tsx +++ b/app/src/components/Alert/Alert.tsx @@ -1,15 +1,17 @@ -import { Children, FC, ReactElement, ReactNode, cloneElement } from 'react' +'use client' +import { FC, ReactNode } from 'react' +import { cn } from '../../helpers/cn' +import { AlertContext } from './AlertContext' +import { Body } from './Body' import { Container } from './Container' import { Description } from './Description' -import { Title } from './Title' import { Dismiss } from './Dismiss' -import { Link } from './Link' import { Icon } from './Icon' -import { cn } from '../../helpers/cn' +import { Link } from './Link' +import { Title } from './Title' import { alertTheme } from './theme' -import { Body } from './Body' -interface AlertProps { +export interface AlertProps { children?: ReactNode color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' className?: string @@ -19,9 +21,6 @@ interface AlertProps { } export const AlertComponent: FC = ({ children, color = 'primary', withBg, dismiss, className }) => { - const childrenWithProps = Children.map(children, (child) => - cloneElement(child as ReactElement, { color: color }), - ) return (
    = ({ children, color = 'primary', wi dismiss ? 'hidden' : 'flex', className, )}> - {childrenWithProps} + {children}
    ) } diff --git a/app/src/components/Alert/AlertContext.tsx b/app/src/components/Alert/AlertContext.tsx new file mode 100644 index 00000000..23de6bc0 --- /dev/null +++ b/app/src/components/Alert/AlertContext.tsx @@ -0,0 +1,18 @@ +import { createContext, useContext } from 'react' +import { AlertProps } from './Alert' + +type AlertContextProps = Omit & { + color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' +} + +export const AlertContext = createContext(undefined) + +export function useAlertContext(): AlertContextProps { + const context = useContext(AlertContext) + + if (!context) { + throw new Error('useAlertContext should be used within the AlertContext provider!') + } + + return context +} diff --git a/app/src/components/Alert/Body.tsx b/app/src/components/Alert/Body.tsx index 40a35e5f..579859fa 100644 --- a/app/src/components/Alert/Body.tsx +++ b/app/src/components/Alert/Body.tsx @@ -1,4 +1,5 @@ -import { ReactNode, FC, Children, cloneElement, ReactElement } from 'react' +'use client' +import { FC, ReactNode } from 'react' import { cn } from '../../helpers/cn' export interface AlertBodyProps { @@ -6,7 +7,6 @@ export interface AlertBodyProps { className?: string } -export const Body: FC = ({ children, className, ...props }) => { - const childrenWithProps = Children.map(children, (child) => cloneElement(child as ReactElement, { ...props })) - return
    {childrenWithProps}
    +export const Body: FC = ({ children, className }) => { + return
    {children}
    } diff --git a/app/src/components/Alert/Container.tsx b/app/src/components/Alert/Container.tsx index 60d1c21f..2254608f 100644 --- a/app/src/components/Alert/Container.tsx +++ b/app/src/components/Alert/Container.tsx @@ -1,4 +1,5 @@ -import { ReactNode, FC, Children, cloneElement, ReactElement } from 'react' +'use client' +import { FC, ReactNode } from 'react' import { cn } from '../../helpers/cn' import { alertTheme } from './theme' @@ -7,7 +8,6 @@ export interface ContainerProps { className?: string } -export const Container: FC = ({ children, className, ...props }) => { - const childrenWithProps = Children.map(children, (child) => cloneElement(child as ReactElement, { ...props })) - return
    {childrenWithProps}
    +export const Container: FC = ({ children, className }) => { + return
    {children}
    } diff --git a/app/src/components/Alert/Description.tsx b/app/src/components/Alert/Description.tsx index e3be7912..863c446d 100644 --- a/app/src/components/Alert/Description.tsx +++ b/app/src/components/Alert/Description.tsx @@ -1,3 +1,4 @@ +'use client' import { FC, ReactNode } from 'react' import { cn } from '../../helpers/cn' import { alertTheme } from './theme' diff --git a/app/src/components/Alert/Dismiss.tsx b/app/src/components/Alert/Dismiss.tsx index ed965146..376ea734 100644 --- a/app/src/components/Alert/Dismiss.tsx +++ b/app/src/components/Alert/Dismiss.tsx @@ -1,3 +1,4 @@ +'use client' import { FC, ReactNode } from 'react' export interface DismissProps { @@ -9,9 +10,7 @@ export interface DismissProps { export const Dismiss: FC = ({ children, onClick }) => { return (